[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31898,"doc-\u002Fdocs\u002Fcomponents\u002Fthinfilm":81976,"doc-surr-\u002Fdocs\u002Fcomponents\u002Fthinfilm":82219},[4,199,1525,2248,2486,4448,5511,6127,7605,10240,12239,15014,17296,20962,25841,26205,26840,27482,28379,28996,29574,30116,30703,31225],{"id":5,"title":6,"body":7,"category":188,"description":189,"exclude":190,"extension":191,"forceFramework":190,"icon":192,"meta":193,"navigation":194,"path":195,"seo":196,"stem":197,"__hash__":198},"guide\u002Fdocs\u002Fguide\u002F0.index.md","What is shaders?",{"type":8,"value":9,"toc":177},"minimark",[10,14,18,22,27,30,33,52,61,65,68,71,91,95,103,106,110,113,136,139,143,146,149,153,156,170,174],[11,12,6],"h1",{"id":13},"what-is-shaders",[15,16,17],"p",{},"Shaders is a design platform for creating production-ready WebGPU effects. It lets developers and design engineers build interactive backgrounds, logo effects, image effects, and other GPU-powered visuals without writing a line of shader code.",[19,20],"shader-demo",{":preset":21},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"color\":\"#0f0f12\"}},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.54,\"y\":0.77},\"fontFamily\":\"Geist\",\"fontSize\":0.39,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"welcome\"}},{\"type\":\"LightEdge\",\"props\":{\"bloom\":0.52,\"center\":{\"x\":0.22,\"y\":0.36},\"intensity\":1,\"pulse\":0.34,\"scale\":1.6111,\"shape\":{\"type\":\"metaballs3D\",\"ballRadius\":0.16,\"spread\":0.2,\"blend\":0.12,\"speed\":1,\"rotX\":0,\"rotY\":0,\"rotZ\":0},\"shapeType\":\"metaballs3D\",\"softness\":1,\"spots\":4,\"spotSize\":0.43,\"thickness\":0.26}}]}",[23,24,26],"h2",{"id":25},"design-first-code-second","Design first. Code second.",[15,28,29],{},"Most people start in the design editor, not in code.",[15,31,32],{},"In the editor you can:",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"Visually build effects by adding and arranging layers",[37,41,42],{},"Combine layers to create something more complex than any single effect",[37,44,45],{},"Adjust properties with sliders, color pickers, and other visual controls",[37,47,48],{},"Experiment quickly, trying ideas without touching a text editor",[37,50,51],{},"Preview instantly, with every change reflected in real time",[15,53,54,55,60],{},"Once you're happy with the result, you export clean components for your framework of choice, or use the ",[56,57,59],"a",{"href":58},"\u002Fdocs\u002Fguide\u002Fmcp","MCP"," to have your AI coding agent install the effect directly into your project. For most people, the editor is where the actual work of building an effect happens.",[23,62,64],{"id":63},"production-ready-from-day-one","Production-ready from day one",[15,66,67],{},"What you export is code you can drop straight into your project, not a video or an image. It's written in the same simple, declarative component structure you use throughout Shaders, so it reads clearly and stays easy to adjust once it's in your codebase.",[15,69,70],{},"Export to:",[34,72,73,76,79,82,85,88],{},[37,74,75],{},"Vue",[37,77,78],{},"React",[37,80,81],{},"Svelte",[37,83,84],{},"Solid",[37,86,87],{},"JavaScript",[37,89,90],{},"Framer",[23,92,94],{"id":93},"how-shaders-works","How Shaders works",[15,96,97,98,102],{},"Under the hood, a ",[99,100,101],"code",{},"\u003CShader>"," component renders to a single canvas element, no matter how many layers you nest inside it. Those layers are combined by our own render engine, built on TypeGPU for performance, which compiles everything down to WebGPU.",[15,104,105],{},"Props stay reactive, so changing a value updates the effect instantly without recompiling anything.",[23,107,109],{"id":108},"what-can-i-build","What can I build?",[15,111,112],{},"Almost anything visual. A few examples to get you thinking:",[34,114,115,118,121,124,127,130,133],{},[37,116,117],{},"Hero backgrounds and animated gradients",[37,119,120],{},"Cursor-reactive interactions",[37,122,123],{},"Logo effects and image effects",[37,125,126],{},"Glass, distortion, and lighting effects",[37,128,129],{},"Procedural shapes",[37,131,132],{},"Masking, blending, and text effects",[37,134,135],{},"Animated UI decoration",[15,137,138],{},"These building blocks show up everywhere from landing pages and product showcases to portfolio sites and full marketing websites. Every effect is built by combining a handful of simple components, and new components keep expanding what's possible.",[23,140,142],{"id":141},"no-shader-experience-required","No shader experience required",[15,144,145],{},"You don't need to know GLSL, WGSL, or any graphics programming to use Shaders. If you're comfortable with everyday frontend development or visual design tools, you already have what you need to get started.",[15,147,148],{},"The component-based approach also scales with you. As you get more comfortable, composing and layering effects lets you build results that look more sophisticated than the individual pieces suggest.",[23,150,152],{"id":151},"supported-frameworks","Supported frameworks",[15,154,155],{},"Shaders ships dedicated integrations for Vue, React, Svelte, Solid, JavaScript, and Framer, so you can use it with the framework or platform you're already building in.",[15,157,158,162,163,169],{},[159,160,161],"strong",{},"Building in Framer?"," You don't need npm or any of the code guides here — everything works through the ",[56,164,168],{"href":165,"rel":166},"https:\u002F\u002Fshaders.com\u002Fframer",[167],"nofollow","official Shaders plugin for Framer",". Browse your shaders and the preset library, then drop effects straight onto your Framer canvas, no code required.",[23,171,173],{"id":172},"browser-support","Browser support",[15,175,176],{},"Shaders runs on WebGPU, the modern successor to WebGL, now shipping in every major browser. Across telemetry from 145,000+ sessions on 1,000+ production domains, more than 99% of user devices run it without issue. And on the rare device that doesn't support it, the canvas simply stays empty — your layout and the rest of your page carry on exactly as normal.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183,184,185,186,187],{"id":25,"depth":179,"text":26},{"id":63,"depth":179,"text":64},{"id":93,"depth":179,"text":94},{"id":108,"depth":179,"text":109},{"id":141,"depth":179,"text":142},{"id":151,"depth":179,"text":152},{"id":172,"depth":179,"text":173},"concepts","A design platform for creating production-ready WebGPU effects",null,"md","hand-wave",{},true,"\u002Fdocs\u002Fguide",{"title":6,"description":189},"docs\u002Fguide\u002F0.index","tljpUYFl1uZaqTdHradMgrA4VY1wPQeNSChUAPMo8FE",{"id":200,"title":201,"body":202,"category":188,"description":1516,"exclude":1517,"extension":191,"forceFramework":190,"icon":1519,"meta":1520,"navigation":194,"path":1521,"seo":1522,"stem":1523,"__hash__":1524},"guide\u002Fdocs\u002Fguide\u002F1.quickstart.md","Quickstart",{"type":8,"value":203,"toc":1507},[204,207,211,235,238,242,245,320,324,330,576,579,591,595,598,1147,1150,1154,1162,1464,1468,1471,1475,1503],[11,205,201],{"id":206},"quickstart",[23,208,210],{"id":209},"installation","Installation",[212,213,217],"pre",{"className":214,"code":215,"language":216,"meta":178,"style":178},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[99,218,219],{"__ignoreMap":178},[220,221,224,228,232],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"svObZ","npm",[220,229,231],{"class":230},"sU2Wk"," install",[220,233,234],{"class":230}," shaders\n",[15,236,237],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[23,239,241],{"id":240},"import-your-components","Import your components",[15,243,244],{},"Import from the entry point that matches your framework:",[246,247,249,272,288,304],"code-group",{":tabs":248},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[212,250,254],{"className":251,"code":252,"language":253,"meta":178,"style":178},"language-javascript shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fvue'\n","javascript",[99,255,256],{"__ignoreMap":178},[220,257,258,262,266,269],{"class":222,"line":223},[220,259,261],{"class":260},"snl16","import",[220,263,265],{"class":264},"s95oV"," { Shader, LinearGradient, CursorTrail } ",[220,267,268],{"class":260},"from",[220,270,271],{"class":230}," 'shaders\u002Fvue'\n",[212,273,275],{"className":251,"code":274,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n",[99,276,277],{"__ignoreMap":178},[220,278,279,281,283,285],{"class":222,"line":223},[220,280,261],{"class":260},[220,282,265],{"class":264},[220,284,268],{"class":260},[220,286,287],{"class":230}," 'shaders\u002Freact'\n",[212,289,291],{"className":251,"code":290,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n",[99,292,293],{"__ignoreMap":178},[220,294,295,297,299,301],{"class":222,"line":223},[220,296,261],{"class":260},[220,298,265],{"class":264},[220,300,268],{"class":260},[220,302,303],{"class":230}," 'shaders\u002Fsvelte'\n",[212,305,307],{"className":251,"code":306,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsolid'\n",[99,308,309],{"__ignoreMap":178},[220,310,311,313,315,317],{"class":222,"line":223},[220,312,261],{"class":260},[220,314,265],{"class":264},[220,316,268],{"class":260},[220,318,319],{"class":230}," 'shaders\u002Fsolid'\n",[23,321,323],{"id":322},"your-first-shader","Your first shader",[15,325,326,327,329],{},"Wrap your effects in a ",[99,328,101],{}," component and add children inside:",[246,331,332,407,466,522],{":tabs":248},[212,333,337],{"className":334,"code":335,"language":336,"meta":178,"style":178},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","vue-html",[99,338,339,360,387,397],{"__ignoreMap":178},[220,340,341,344,348,351,354,357],{"class":222,"line":223},[220,342,343],{"class":264},"\u003C",[220,345,347],{"class":346},"s4JwU","Shader",[220,349,350],{"class":226}," class",[220,352,353],{"class":264},"=",[220,355,356],{"class":230},"\"w-full h-64\"",[220,358,359],{"class":264},">\n",[220,361,362,365,368,371,373,376,379,381,384],{"class":222,"line":179},[220,363,364],{"class":264}," \u003C",[220,366,367],{"class":346},"LinearGradient",[220,369,370],{"class":226}," colorA",[220,372,353],{"class":264},[220,374,375],{"class":230},"\"#0f172a\"",[220,377,378],{"class":226}," colorB",[220,380,353],{"class":264},[220,382,383],{"class":230},"\"#7c3aed\"",[220,385,386],{"class":264}," \u002F>\n",[220,388,390,392,395],{"class":222,"line":389},3,[220,391,364],{"class":264},[220,393,394],{"class":346},"CursorTrail",[220,396,386],{"class":264},[220,398,400,403,405],{"class":222,"line":399},4,[220,401,402],{"class":264},"\u003C\u002F",[220,404,347],{"class":346},[220,406,359],{"class":264},[212,408,412],{"className":409,"code":410,"language":411,"meta":178,"style":178},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","jsx",[99,413,414,430,450,458],{"__ignoreMap":178},[220,415,416,418,421,424,426,428],{"class":222,"line":223},[220,417,343],{"class":264},[220,419,347],{"class":420},"sDLfK",[220,422,423],{"class":226}," className",[220,425,353],{"class":260},[220,427,356],{"class":230},[220,429,359],{"class":264},[220,431,432,434,436,438,440,442,444,446,448],{"class":222,"line":179},[220,433,364],{"class":264},[220,435,367],{"class":420},[220,437,370],{"class":226},[220,439,353],{"class":260},[220,441,375],{"class":230},[220,443,378],{"class":226},[220,445,353],{"class":260},[220,447,383],{"class":230},[220,449,386],{"class":264},[220,451,452,454,456],{"class":222,"line":389},[220,453,364],{"class":264},[220,455,394],{"class":420},[220,457,386],{"class":264},[220,459,460,462,464],{"class":222,"line":399},[220,461,402],{"class":264},[220,463,347],{"class":420},[220,465,359],{"class":264},[212,467,470],{"className":468,"code":335,"language":469,"meta":178,"style":178},"language-tsx shiki shiki-themes github-dark","tsx",[99,471,472,486,506,514],{"__ignoreMap":178},[220,473,474,476,478,480,482,484],{"class":222,"line":223},[220,475,343],{"class":264},[220,477,347],{"class":420},[220,479,350],{"class":226},[220,481,353],{"class":260},[220,483,356],{"class":230},[220,485,359],{"class":264},[220,487,488,490,492,494,496,498,500,502,504],{"class":222,"line":179},[220,489,364],{"class":264},[220,491,367],{"class":420},[220,493,370],{"class":226},[220,495,353],{"class":260},[220,497,375],{"class":230},[220,499,378],{"class":226},[220,501,353],{"class":260},[220,503,383],{"class":230},[220,505,386],{"class":264},[220,507,508,510,512],{"class":222,"line":389},[220,509,364],{"class":264},[220,511,394],{"class":420},[220,513,386],{"class":264},[220,515,516,518,520],{"class":222,"line":399},[220,517,402],{"class":264},[220,519,347],{"class":420},[220,521,359],{"class":264},[212,523,524],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,525,526,540,560,568],{"__ignoreMap":178},[220,527,528,530,532,534,536,538],{"class":222,"line":223},[220,529,343],{"class":264},[220,531,347],{"class":420},[220,533,350],{"class":226},[220,535,353],{"class":260},[220,537,356],{"class":230},[220,539,359],{"class":264},[220,541,542,544,546,548,550,552,554,556,558],{"class":222,"line":179},[220,543,364],{"class":264},[220,545,367],{"class":420},[220,547,370],{"class":226},[220,549,353],{"class":260},[220,551,375],{"class":230},[220,553,378],{"class":226},[220,555,353],{"class":260},[220,557,383],{"class":230},[220,559,386],{"class":264},[220,561,562,564,566],{"class":222,"line":389},[220,563,364],{"class":264},[220,565,394],{"class":420},[220,567,386],{"class":264},[220,569,570,572,574],{"class":222,"line":399},[220,571,402],{"class":264},[220,573,347],{"class":420},[220,575,359],{"class":264},[19,577],{":preset":578},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,580,581,583,584,587,588,590],{},[99,582,101],{}," renders a ",[99,585,586],{},"\u003Ccanvas>"," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[99,589,101],{}," controls the canvas size and position.",[23,592,594],{"id":593},"sizing-the-canvas","Sizing the canvas",[15,596,597],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[246,599,600,734,877,1014],{":tabs":248},[212,601,603],{"className":334,"code":602,"language":336,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio with fluid width -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,604,605,611,626,634,642,648,654,671,680,689,694,700,716,725],{"__ignoreMap":178},[220,606,607],{"class":222,"line":223},[220,608,610],{"class":609},"sAwPA","\u003C!-- Fill the viewport -->\n",[220,612,613,615,617,619,621,624],{"class":222,"line":179},[220,614,343],{"class":264},[220,616,347],{"class":346},[220,618,350],{"class":226},[220,620,353],{"class":264},[220,622,623],{"class":230},"\"w-screen h-screen\"",[220,625,359],{"class":264},[220,627,628,630,632],{"class":222,"line":389},[220,629,364],{"class":264},[220,631,367],{"class":346},[220,633,386],{"class":264},[220,635,636,638,640],{"class":222,"line":399},[220,637,402],{"class":264},[220,639,347],{"class":346},[220,641,359],{"class":264},[220,643,645],{"class":222,"line":644},5,[220,646,647],{"emptyLinePlaceholder":194},"\n",[220,649,651],{"class":222,"line":650},6,[220,652,653],{"class":609},"\u003C!-- Fixed dimensions -->\n",[220,655,657,659,661,664,666,669],{"class":222,"line":656},7,[220,658,343],{"class":264},[220,660,347],{"class":346},[220,662,663],{"class":226}," style",[220,665,353],{"class":264},[220,667,668],{"class":230},"\"width: 600px; height: 400px;\"",[220,670,359],{"class":264},[220,672,674,676,678],{"class":222,"line":673},8,[220,675,364],{"class":264},[220,677,367],{"class":346},[220,679,386],{"class":264},[220,681,683,685,687],{"class":222,"line":682},9,[220,684,402],{"class":264},[220,686,347],{"class":346},[220,688,359],{"class":264},[220,690,692],{"class":222,"line":691},10,[220,693,647],{"emptyLinePlaceholder":194},[220,695,697],{"class":222,"line":696},11,[220,698,699],{"class":609},"\u003C!-- Aspect ratio with fluid width -->\n",[220,701,703,705,707,709,711,714],{"class":222,"line":702},12,[220,704,343],{"class":264},[220,706,347],{"class":346},[220,708,350],{"class":226},[220,710,353],{"class":264},[220,712,713],{"class":230},"\"w-full aspect-video\"",[220,715,359],{"class":264},[220,717,719,721,723],{"class":222,"line":718},13,[220,720,364],{"class":264},[220,722,367],{"class":346},[220,724,386],{"class":264},[220,726,728,730,732],{"class":222,"line":727},14,[220,729,402],{"class":264},[220,731,347],{"class":346},[220,733,359],{"class":264},[212,735,737],{"className":409,"code":736,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,738,739,750,764,772,780,784,793,818,826,834,838,847,861,869],{"__ignoreMap":178},[220,740,741,744,747],{"class":222,"line":223},[220,742,743],{"class":264},"{",[220,745,746],{"class":609},"\u002F* Fill the viewport *\u002F",[220,748,749],{"class":264},"}\n",[220,751,752,754,756,758,760,762],{"class":222,"line":179},[220,753,343],{"class":264},[220,755,347],{"class":420},[220,757,423],{"class":226},[220,759,353],{"class":260},[220,761,623],{"class":230},[220,763,359],{"class":264},[220,765,766,768,770],{"class":222,"line":389},[220,767,364],{"class":264},[220,769,367],{"class":420},[220,771,386],{"class":264},[220,773,774,776,778],{"class":222,"line":399},[220,775,402],{"class":264},[220,777,347],{"class":420},[220,779,359],{"class":264},[220,781,782],{"class":222,"line":644},[220,783,647],{"emptyLinePlaceholder":194},[220,785,786,788,791],{"class":222,"line":650},[220,787,743],{"class":264},[220,789,790],{"class":609},"\u002F* Fixed dimensions *\u002F",[220,792,749],{"class":264},[220,794,795,797,799,801,803,806,809,812,815],{"class":222,"line":656},[220,796,343],{"class":264},[220,798,347],{"class":420},[220,800,663],{"class":226},[220,802,353],{"class":260},[220,804,805],{"class":264},"{{ width: ",[220,807,808],{"class":230},"'600px'",[220,810,811],{"class":264},", height: ",[220,813,814],{"class":230},"'400px'",[220,816,817],{"class":264}," }}>\n",[220,819,820,822,824],{"class":222,"line":673},[220,821,364],{"class":264},[220,823,367],{"class":420},[220,825,386],{"class":264},[220,827,828,830,832],{"class":222,"line":682},[220,829,402],{"class":264},[220,831,347],{"class":420},[220,833,359],{"class":264},[220,835,836],{"class":222,"line":691},[220,837,647],{"emptyLinePlaceholder":194},[220,839,840,842,845],{"class":222,"line":696},[220,841,743],{"class":264},[220,843,844],{"class":609},"\u002F* Aspect ratio with fluid width *\u002F",[220,846,749],{"class":264},[220,848,849,851,853,855,857,859],{"class":222,"line":702},[220,850,343],{"class":264},[220,852,347],{"class":420},[220,854,423],{"class":226},[220,856,353],{"class":260},[220,858,713],{"class":230},[220,860,359],{"class":264},[220,862,863,865,867],{"class":222,"line":718},[220,864,364],{"class":264},[220,866,367],{"class":420},[220,868,386],{"class":264},[220,870,871,873,875],{"class":222,"line":727},[220,872,402],{"class":264},[220,874,347],{"class":420},[220,876,359],{"class":264},[212,878,879],{"className":468,"code":602,"language":469,"meta":178,"style":178},[99,880,881,892,906,914,922,926,935,949,957,965,969,984,998,1006],{"__ignoreMap":178},[220,882,883,886,889],{"class":222,"line":223},[220,884,885],{"class":260},"\u003C!--",[220,887,888],{"class":264}," Fill the viewport ",[220,890,891],{"class":260},"-->\n",[220,893,894,896,898,900,902,904],{"class":222,"line":179},[220,895,343],{"class":264},[220,897,347],{"class":420},[220,899,350],{"class":226},[220,901,353],{"class":260},[220,903,623],{"class":230},[220,905,359],{"class":264},[220,907,908,910,912],{"class":222,"line":389},[220,909,364],{"class":264},[220,911,367],{"class":420},[220,913,386],{"class":264},[220,915,916,918,920],{"class":222,"line":399},[220,917,402],{"class":264},[220,919,347],{"class":420},[220,921,359],{"class":264},[220,923,924],{"class":222,"line":644},[220,925,647],{"emptyLinePlaceholder":194},[220,927,928,930,933],{"class":222,"line":650},[220,929,885],{"class":260},[220,931,932],{"class":264}," Fixed dimensions ",[220,934,891],{"class":260},[220,936,937,939,941,943,945,947],{"class":222,"line":656},[220,938,343],{"class":264},[220,940,347],{"class":420},[220,942,663],{"class":226},[220,944,353],{"class":260},[220,946,668],{"class":230},[220,948,359],{"class":264},[220,950,951,953,955],{"class":222,"line":673},[220,952,364],{"class":264},[220,954,367],{"class":420},[220,956,386],{"class":264},[220,958,959,961,963],{"class":222,"line":682},[220,960,402],{"class":264},[220,962,347],{"class":420},[220,964,359],{"class":264},[220,966,967],{"class":222,"line":691},[220,968,647],{"emptyLinePlaceholder":194},[220,970,971,973,976,979,982],{"class":222,"line":696},[220,972,885],{"class":260},[220,974,975],{"class":264}," Aspect ratio ",[220,977,978],{"class":260},"with",[220,980,981],{"class":264}," fluid width ",[220,983,891],{"class":260},[220,985,986,988,990,992,994,996],{"class":222,"line":702},[220,987,343],{"class":264},[220,989,347],{"class":420},[220,991,350],{"class":226},[220,993,353],{"class":260},[220,995,713],{"class":230},[220,997,359],{"class":264},[220,999,1000,1002,1004],{"class":222,"line":718},[220,1001,364],{"class":264},[220,1003,367],{"class":420},[220,1005,386],{"class":264},[220,1007,1008,1010,1012],{"class":222,"line":727},[220,1009,402],{"class":264},[220,1011,347],{"class":420},[220,1013,359],{"class":264},[212,1015,1017],{"className":468,"code":1016,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,1018,1019,1027,1041,1049,1057,1061,1069,1089,1097,1105,1109,1117,1131,1139],{"__ignoreMap":178},[220,1020,1021,1023,1025],{"class":222,"line":223},[220,1022,743],{"class":264},[220,1024,746],{"class":609},[220,1026,749],{"class":264},[220,1028,1029,1031,1033,1035,1037,1039],{"class":222,"line":179},[220,1030,343],{"class":264},[220,1032,347],{"class":420},[220,1034,350],{"class":226},[220,1036,353],{"class":260},[220,1038,623],{"class":230},[220,1040,359],{"class":264},[220,1042,1043,1045,1047],{"class":222,"line":389},[220,1044,364],{"class":264},[220,1046,367],{"class":420},[220,1048,386],{"class":264},[220,1050,1051,1053,1055],{"class":222,"line":399},[220,1052,402],{"class":264},[220,1054,347],{"class":420},[220,1056,359],{"class":264},[220,1058,1059],{"class":222,"line":644},[220,1060,647],{"emptyLinePlaceholder":194},[220,1062,1063,1065,1067],{"class":222,"line":650},[220,1064,743],{"class":264},[220,1066,790],{"class":609},[220,1068,749],{"class":264},[220,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":222,"line":656},[220,1072,343],{"class":264},[220,1074,347],{"class":420},[220,1076,663],{"class":226},[220,1078,353],{"class":260},[220,1080,805],{"class":264},[220,1082,808],{"class":230},[220,1084,811],{"class":264},[220,1086,814],{"class":230},[220,1088,817],{"class":264},[220,1090,1091,1093,1095],{"class":222,"line":673},[220,1092,364],{"class":264},[220,1094,367],{"class":420},[220,1096,386],{"class":264},[220,1098,1099,1101,1103],{"class":222,"line":682},[220,1100,402],{"class":264},[220,1102,347],{"class":420},[220,1104,359],{"class":264},[220,1106,1107],{"class":222,"line":691},[220,1108,647],{"emptyLinePlaceholder":194},[220,1110,1111,1113,1115],{"class":222,"line":696},[220,1112,743],{"class":264},[220,1114,844],{"class":609},[220,1116,749],{"class":264},[220,1118,1119,1121,1123,1125,1127,1129],{"class":222,"line":702},[220,1120,343],{"class":264},[220,1122,347],{"class":420},[220,1124,350],{"class":226},[220,1126,353],{"class":260},[220,1128,713],{"class":230},[220,1130,359],{"class":264},[220,1132,1133,1135,1137],{"class":222,"line":718},[220,1134,364],{"class":264},[220,1136,367],{"class":420},[220,1138,386],{"class":264},[220,1140,1141,1143,1145],{"class":222,"line":727},[220,1142,402],{"class":264},[220,1144,347],{"class":420},[220,1146,359],{"class":264},[15,1148,1149],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[23,1151,1153],{"id":1152},"configuring-components","Configuring components",[15,1155,1156,1157,1161],{},"Each component accepts props that control its appearance. Browse the ",[56,1158,1160],{"href":1159},"\u002Fdocs\u002Fcomponents","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[246,1163,1164,1243,1319,1392],{":tabs":248},[212,1165,1167],{"className":334,"code":1166,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1168,1169,1183,1190,1200,1210,1220,1230,1235],{"__ignoreMap":178},[220,1170,1171,1173,1175,1177,1179,1181],{"class":222,"line":223},[220,1172,343],{"class":264},[220,1174,347],{"class":346},[220,1176,350],{"class":226},[220,1178,353],{"class":264},[220,1180,356],{"class":230},[220,1182,359],{"class":264},[220,1184,1185,1187],{"class":222,"line":179},[220,1186,364],{"class":264},[220,1188,1189],{"class":346},"LinearGradient\n",[220,1191,1192,1195,1197],{"class":222,"line":389},[220,1193,1194],{"class":226}," colorA",[220,1196,353],{"class":264},[220,1198,1199],{"class":230},"\"#ff6b6b\"\n",[220,1201,1202,1205,1207],{"class":222,"line":399},[220,1203,1204],{"class":226}," colorB",[220,1206,353],{"class":264},[220,1208,1209],{"class":230},"\"#4ecdc4\"\n",[220,1211,1212,1215,1217],{"class":222,"line":644},[220,1213,1214],{"class":226}," :angle",[220,1216,353],{"class":264},[220,1218,1219],{"class":230},"\"45\"\n",[220,1221,1222,1225,1227],{"class":222,"line":650},[220,1223,1224],{"class":226}," color-space",[220,1226,353],{"class":264},[220,1228,1229],{"class":230},"\"oklch\"\n",[220,1231,1232],{"class":222,"line":656},[220,1233,1234],{"class":264}," \u002F>\n",[220,1236,1237,1239,1241],{"class":222,"line":673},[220,1238,402],{"class":264},[220,1240,347],{"class":346},[220,1242,359],{"class":264},[212,1244,1246],{"className":409,"code":1245,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1247,1248,1262,1268,1276,1284,1298,1307,1311],{"__ignoreMap":178},[220,1249,1250,1252,1254,1256,1258,1260],{"class":222,"line":223},[220,1251,343],{"class":264},[220,1253,347],{"class":420},[220,1255,423],{"class":226},[220,1257,353],{"class":260},[220,1259,356],{"class":230},[220,1261,359],{"class":264},[220,1263,1264,1266],{"class":222,"line":179},[220,1265,364],{"class":264},[220,1267,1189],{"class":420},[220,1269,1270,1272,1274],{"class":222,"line":389},[220,1271,1194],{"class":226},[220,1273,353],{"class":260},[220,1275,1199],{"class":230},[220,1277,1278,1280,1282],{"class":222,"line":399},[220,1279,1204],{"class":226},[220,1281,353],{"class":260},[220,1283,1209],{"class":230},[220,1285,1286,1289,1291,1293,1296],{"class":222,"line":644},[220,1287,1288],{"class":226}," angle",[220,1290,353],{"class":260},[220,1292,743],{"class":264},[220,1294,1295],{"class":420},"45",[220,1297,749],{"class":264},[220,1299,1300,1303,1305],{"class":222,"line":650},[220,1301,1302],{"class":226}," colorSpace",[220,1304,353],{"class":260},[220,1306,1229],{"class":230},[220,1308,1309],{"class":222,"line":656},[220,1310,1234],{"class":264},[220,1312,1313,1315,1317],{"class":222,"line":673},[220,1314,402],{"class":264},[220,1316,347],{"class":420},[220,1318,359],{"class":264},[212,1320,1322],{"className":468,"code":1321,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1323,1324,1338,1344,1352,1360,1372,1380,1384],{"__ignoreMap":178},[220,1325,1326,1328,1330,1332,1334,1336],{"class":222,"line":223},[220,1327,343],{"class":264},[220,1329,347],{"class":420},[220,1331,350],{"class":226},[220,1333,353],{"class":260},[220,1335,356],{"class":230},[220,1337,359],{"class":264},[220,1339,1340,1342],{"class":222,"line":179},[220,1341,364],{"class":264},[220,1343,1189],{"class":420},[220,1345,1346,1348,1350],{"class":222,"line":389},[220,1347,1194],{"class":226},[220,1349,353],{"class":260},[220,1351,1199],{"class":230},[220,1353,1354,1356,1358],{"class":222,"line":399},[220,1355,1204],{"class":226},[220,1357,353],{"class":260},[220,1359,1209],{"class":230},[220,1361,1362,1364,1366,1368,1370],{"class":222,"line":644},[220,1363,1288],{"class":226},[220,1365,353],{"class":260},[220,1367,743],{"class":264},[220,1369,1295],{"class":420},[220,1371,749],{"class":264},[220,1373,1374,1376,1378],{"class":222,"line":650},[220,1375,1302],{"class":226},[220,1377,353],{"class":260},[220,1379,1229],{"class":230},[220,1381,1382],{"class":222,"line":656},[220,1383,1234],{"class":264},[220,1385,1386,1388,1390],{"class":222,"line":673},[220,1387,402],{"class":264},[220,1389,347],{"class":420},[220,1391,359],{"class":264},[212,1393,1394],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,1395,1396,1410,1416,1424,1432,1444,1452,1456],{"__ignoreMap":178},[220,1397,1398,1400,1402,1404,1406,1408],{"class":222,"line":223},[220,1399,343],{"class":264},[220,1401,347],{"class":420},[220,1403,350],{"class":226},[220,1405,353],{"class":260},[220,1407,356],{"class":230},[220,1409,359],{"class":264},[220,1411,1412,1414],{"class":222,"line":179},[220,1413,364],{"class":264},[220,1415,1189],{"class":420},[220,1417,1418,1420,1422],{"class":222,"line":389},[220,1419,1194],{"class":226},[220,1421,353],{"class":260},[220,1423,1199],{"class":230},[220,1425,1426,1428,1430],{"class":222,"line":399},[220,1427,1204],{"class":226},[220,1429,353],{"class":260},[220,1431,1209],{"class":230},[220,1433,1434,1436,1438,1440,1442],{"class":222,"line":644},[220,1435,1288],{"class":226},[220,1437,353],{"class":260},[220,1439,743],{"class":264},[220,1441,1295],{"class":420},[220,1443,749],{"class":264},[220,1445,1446,1448,1450],{"class":222,"line":650},[220,1447,1302],{"class":226},[220,1449,353],{"class":260},[220,1451,1229],{"class":230},[220,1453,1454],{"class":222,"line":656},[220,1455,1234],{"class":264},[220,1457,1458,1460,1462],{"class":222,"line":673},[220,1459,402],{"class":264},[220,1461,347],{"class":420},[220,1463,359],{"class":264},[23,1465,1467],{"id":1466},"using-with-ssr-frameworks","Using with SSR frameworks",[15,1469,1470],{},"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,1472,1474],{"id":1473},"next-steps","Next steps",[34,1476,1477,1484,1491,1498],{},[37,1478,1479,1483],{},[56,1480,1482],{"href":1481},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing Effects"," — stack and nest components for complex results",[37,1485,1486,1490],{},[56,1487,1489],{"href":1488},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout & Positioning"," — position the canvas in your UI",[37,1492,1493,1497],{},[56,1494,1496],{"href":1495},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props & Reactivity"," — bind state and animate props",[37,1499,1500,1502],{},[56,1501,1160],{"href":1159}," — browse all available shaders",[1504,1505,1506],"style",{},"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":1508},[1509,1510,1511,1512,1513,1514,1515],{"id":209,"depth":179,"text":210},{"id":240,"depth":179,"text":241},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":1466,"depth":179,"text":1467},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect",[1518],"js","rocket",{},"\u002Fdocs\u002Fguide\u002Fquickstart",{"title":201,"description":1516},"docs\u002Fguide\u002F1.quickstart","Qy5aUJ4DcUgHPKGddDTVC0xlY3cmFxYRJk7xfpnPymY",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"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,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"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,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"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":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4441,"exclude":190,"extension":191,"forceFramework":190,"icon":4442,"meta":4443,"navigation":194,"path":4444,"seo":4445,"stem":4446,"__hash__":4447},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4430},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312,3316,3322,3325,3329,3339,4073,4077,4083,4364,4368,4371,4427],[11,2492,2488],{"id":2493},"hooks-events",[15,2495,2496],{},"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,2498,2500],{"id":2499},"onready","onReady",[15,2502,1839,2503,2505],{},[99,2504,2500],{}," 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.",[246,2507,2508,2671,2842,2971,3121],{":tabs":1557},[212,2509,2511],{"className":334,"code":2510,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C\u002Fscript>\n",[99,2512,2513,2522,2546,2563,2572,2580,2584,2596,2608,2612,2633,2637,2648,2658,2662],{"__ignoreMap":178},[220,2514,2515,2517,2520],{"class":222,"line":223},[220,2516,343],{"class":264},[220,2518,2519],{"class":346},"template",[220,2521,359],{"class":264},[220,2523,2524,2526,2528,2531,2533,2536,2539,2541,2544],{"class":222,"line":179},[220,2525,364],{"class":264},[220,2527,347],{"class":346},[220,2529,2530],{"class":226}," @ready",[220,2532,353],{"class":264},[220,2534,2535],{"class":230},"\"onShaderReady\"",[220,2537,2538],{"class":226}," :style",[220,2540,353],{"class":264},[220,2542,2543],{"class":230},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[220,2545,359],{"class":264},[220,2547,2548,2551,2554,2556,2558,2561],{"class":222,"line":389},[220,2549,2550],{"class":264}," \u003C",[220,2552,2553],{"class":346},"Circle",[220,2555,1588],{"class":226},[220,2557,353],{"class":264},[220,2559,2560],{"class":230},"\"#ff0088\"",[220,2562,386],{"class":264},[220,2564,2565,2568,2570],{"class":222,"line":399},[220,2566,2567],{"class":264}," \u003C\u002F",[220,2569,347],{"class":346},[220,2571,359],{"class":264},[220,2573,2574,2576,2578],{"class":222,"line":644},[220,2575,402],{"class":264},[220,2577,2519],{"class":346},[220,2579,359],{"class":264},[220,2581,2582],{"class":222,"line":650},[220,2583,647],{"emptyLinePlaceholder":194},[220,2585,2586,2588,2591,2594],{"class":222,"line":656},[220,2587,343],{"class":264},[220,2589,2590],{"class":346},"script",[220,2592,2593],{"class":226}," setup",[220,2595,359],{"class":264},[220,2597,2598,2600,2603,2605],{"class":222,"line":673},[220,2599,261],{"class":260},[220,2601,2602],{"class":264}," { ref } ",[220,2604,268],{"class":260},[220,2606,2607],{"class":230}," 'vue'\n",[220,2609,2610],{"class":222,"line":682},[220,2611,647],{"emptyLinePlaceholder":194},[220,2613,2614,2616,2619,2621,2624,2627,2630],{"class":222,"line":691},[220,2615,1735],{"class":260},[220,2617,2618],{"class":420}," visible",[220,2620,1741],{"class":260},[220,2622,2623],{"class":226}," ref",[220,2625,2626],{"class":264},"(",[220,2628,2629],{"class":420},"false",[220,2631,2632],{"class":264},")\n",[220,2634,2635],{"class":222,"line":696},[220,2636,647],{"emptyLinePlaceholder":194},[220,2638,2639,2642,2645],{"class":222,"line":702},[220,2640,2641],{"class":260},"function",[220,2643,2644],{"class":226}," onShaderReady",[220,2646,2647],{"class":264},"() {\n",[220,2649,2650,2653,2655],{"class":222,"line":718},[220,2651,2652],{"class":264}," visible.value ",[220,2654,353],{"class":260},[220,2656,2657],{"class":420}," true\n",[220,2659,2660],{"class":222,"line":727},[220,2661,749],{"class":264},[220,2663,2665,2667,2669],{"class":222,"line":2664},15,[220,2666,402],{"class":264},[220,2668,2590],{"class":346},[220,2670,359],{"class":264},[212,2672,2674],{"className":409,"code":2673,"language":411,"meta":178,"style":178},"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\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2675,2676,2688,2692,2701,2731,2735,2743,2750,2773,2804,2809,2824,2833,2838],{"__ignoreMap":178},[220,2677,2678,2680,2683,2685],{"class":222,"line":223},[220,2679,261],{"class":260},[220,2681,2682],{"class":264}," { useState } ",[220,2684,268],{"class":260},[220,2686,2687],{"class":230}," 'react'\n",[220,2689,2690],{"class":222,"line":179},[220,2691,647],{"emptyLinePlaceholder":194},[220,2693,2694,2696,2699],{"class":222,"line":389},[220,2695,2641],{"class":260},[220,2697,2698],{"class":226}," App",[220,2700,2647],{"class":264},[220,2702,2703,2706,2709,2712,2714,2717,2720,2722,2725,2727,2729],{"class":222,"line":399},[220,2704,2705],{"class":260}," const",[220,2707,2708],{"class":264}," [",[220,2710,2711],{"class":420},"visible",[220,2713,1895],{"class":264},[220,2715,2716],{"class":420},"setVisible",[220,2718,2719],{"class":264},"] ",[220,2721,353],{"class":260},[220,2723,2724],{"class":226}," useState",[220,2726,2626],{"class":264},[220,2728,2629],{"class":420},[220,2730,2632],{"class":264},[220,2732,2733],{"class":222,"line":644},[220,2734,647],{"emptyLinePlaceholder":194},[220,2736,2737,2740],{"class":222,"line":650},[220,2738,2739],{"class":260}," return",[220,2741,2742],{"class":264}," (\n",[220,2744,2745,2747],{"class":222,"line":656},[220,2746,2550],{"class":264},[220,2748,2749],{"class":420},"Shader\n",[220,2751,2752,2755,2757,2760,2763,2766,2768,2770],{"class":222,"line":673},[220,2753,2754],{"class":226}," onReady",[220,2756,353],{"class":260},[220,2758,2759],{"class":264},"{() ",[220,2761,2762],{"class":260},"=>",[220,2764,2765],{"class":226}," setVisible",[220,2767,2626],{"class":264},[220,2769,2332],{"class":420},[220,2771,2772],{"class":264},")}\n",[220,2774,2775,2778,2780,2783,2786,2789,2792,2795,2798,2801],{"class":222,"line":682},[220,2776,2777],{"class":226}," style",[220,2779,353],{"class":260},[220,2781,2782],{"class":264},"{{ opacity: visible ",[220,2784,2785],{"class":260},"?",[220,2787,2788],{"class":420}," 1",[220,2790,2791],{"class":260}," :",[220,2793,2794],{"class":420}," 0",[220,2796,2797],{"class":264},", transition: ",[220,2799,2800],{"class":230},"'opacity 0.5s'",[220,2802,2803],{"class":264}," }}\n",[220,2805,2806],{"class":222,"line":691},[220,2807,2808],{"class":264}," >\n",[220,2810,2811,2814,2816,2818,2820,2822],{"class":222,"line":696},[220,2812,2813],{"class":264}," \u003C",[220,2815,2553],{"class":420},[220,2817,1588],{"class":226},[220,2819,353],{"class":260},[220,2821,2560],{"class":230},[220,2823,386],{"class":264},[220,2825,2826,2829,2831],{"class":222,"line":702},[220,2827,2828],{"class":264}," \u003C\u002F",[220,2830,347],{"class":420},[220,2832,359],{"class":264},[220,2834,2835],{"class":222,"line":718},[220,2836,2837],{"class":264}," )\n",[220,2839,2840],{"class":222,"line":727},[220,2841,749],{"class":264},[212,2843,2847],{"className":2844,"code":2845,"language":2846,"meta":178,"style":178},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C\u002Fscript>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n","svelte",[99,2848,2849,2857,2879,2887,2891,2949,2963],{"__ignoreMap":178},[220,2850,2851,2853,2855],{"class":222,"line":223},[220,2852,343],{"class":264},[220,2854,2590],{"class":346},[220,2856,359],{"class":264},[220,2858,2859,2862,2865,2867,2870,2873,2875,2877],{"class":222,"line":179},[220,2860,2861],{"class":260}," let",[220,2863,2864],{"class":264}," visible ",[220,2866,353],{"class":260},[220,2868,2869],{"class":264}," $",[220,2871,2872],{"class":226},"state",[220,2874,2626],{"class":264},[220,2876,2629],{"class":420},[220,2878,2632],{"class":264},[220,2880,2881,2883,2885],{"class":222,"line":389},[220,2882,402],{"class":264},[220,2884,2590],{"class":346},[220,2886,359],{"class":264},[220,2888,2889],{"class":222,"line":399},[220,2890,647],{"emptyLinePlaceholder":194},[220,2892,2893,2895,2897,2900,2903,2905,2907,2909,2912,2915,2917,2919,2922,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944,2947],{"class":222,"line":644},[220,2894,343],{"class":264},[220,2896,347],{"class":420},[220,2898,2899],{"class":226}," onready",[220,2901,2902],{"class":264},"={() ",[220,2904,2762],{"class":260},[220,2906,2864],{"class":264},[220,2908,353],{"class":260},[220,2910,2911],{"class":420}," true",[220,2913,2914],{"class":264},"} ",[220,2916,1504],{"class":226},[220,2918,1554],{"class":264},[220,2920,2921],{"class":420},"opacity",[220,2923,2924],{"class":264},"={visible ",[220,2926,2785],{"class":260},[220,2928,2788],{"class":420},[220,2930,2791],{"class":260},[220,2932,2794],{"class":420},[220,2934,2914],{"class":264},[220,2936,1504],{"class":226},[220,2938,1554],{"class":264},[220,2940,2941],{"class":420},"transition",[220,2943,353],{"class":264},[220,2945,2946],{"class":230},"\"opacity 0.5s\"",[220,2948,359],{"class":264},[220,2950,2951,2953,2955,2957,2959,2961],{"class":222,"line":650},[220,2952,364],{"class":264},[220,2954,2553],{"class":420},[220,2956,1588],{"class":226},[220,2958,353],{"class":264},[220,2960,2560],{"class":230},[220,2962,386],{"class":264},[220,2964,2965,2967,2969],{"class":222,"line":656},[220,2966,402],{"class":264},[220,2968,347],{"class":420},[220,2970,359],{"class":264},[212,2972,2974],{"className":468,"code":2973,"language":469,"meta":178,"style":178},"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\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2975,2976,2988,2992,3000,3025,3029,3035,3041,3059,3087,3091,3105,3113,3117],{"__ignoreMap":178},[220,2977,2978,2980,2983,2985],{"class":222,"line":223},[220,2979,261],{"class":260},[220,2981,2982],{"class":264}," { createSignal } ",[220,2984,268],{"class":260},[220,2986,2987],{"class":230}," 'solid-js'\n",[220,2989,2990],{"class":222,"line":179},[220,2991,647],{"emptyLinePlaceholder":194},[220,2993,2994,2996,2998],{"class":222,"line":389},[220,2995,2641],{"class":260},[220,2997,2698],{"class":226},[220,2999,2647],{"class":264},[220,3001,3002,3004,3006,3008,3010,3012,3014,3016,3019,3021,3023],{"class":222,"line":399},[220,3003,2705],{"class":260},[220,3005,2708],{"class":264},[220,3007,2711],{"class":420},[220,3009,1895],{"class":264},[220,3011,2716],{"class":420},[220,3013,2719],{"class":264},[220,3015,353],{"class":260},[220,3017,3018],{"class":226}," createSignal",[220,3020,2626],{"class":264},[220,3022,2629],{"class":420},[220,3024,2632],{"class":264},[220,3026,3027],{"class":222,"line":644},[220,3028,647],{"emptyLinePlaceholder":194},[220,3030,3031,3033],{"class":222,"line":650},[220,3032,2739],{"class":260},[220,3034,2742],{"class":264},[220,3036,3037,3039],{"class":222,"line":656},[220,3038,2550],{"class":264},[220,3040,2749],{"class":420},[220,3042,3043,3045,3047,3049,3051,3053,3055,3057],{"class":222,"line":673},[220,3044,2754],{"class":226},[220,3046,353],{"class":260},[220,3048,2759],{"class":264},[220,3050,2762],{"class":260},[220,3052,2765],{"class":226},[220,3054,2626],{"class":264},[220,3056,2332],{"class":420},[220,3058,2772],{"class":264},[220,3060,3061,3063,3065,3068,3070,3073,3075,3077,3079,3081,3083,3085],{"class":222,"line":682},[220,3062,2777],{"class":226},[220,3064,353],{"class":260},[220,3066,3067],{"class":264},"{{ opacity: ",[220,3069,2711],{"class":226},[220,3071,3072],{"class":264},"() ",[220,3074,2785],{"class":260},[220,3076,2788],{"class":420},[220,3078,2791],{"class":260},[220,3080,2794],{"class":420},[220,3082,2797],{"class":264},[220,3084,2800],{"class":230},[220,3086,2803],{"class":264},[220,3088,3089],{"class":222,"line":691},[220,3090,2808],{"class":264},[220,3092,3093,3095,3097,3099,3101,3103],{"class":222,"line":696},[220,3094,2813],{"class":264},[220,3096,2553],{"class":420},[220,3098,1588],{"class":226},[220,3100,353],{"class":260},[220,3102,2560],{"class":230},[220,3104,386],{"class":264},[220,3106,3107,3109,3111],{"class":222,"line":702},[220,3108,2828],{"class":264},[220,3110,347],{"class":420},[220,3112,359],{"class":264},[220,3114,3115],{"class":222,"line":718},[220,3116,2837],{"class":264},[220,3118,3119],{"class":222,"line":727},[220,3120,749],{"class":264},[212,3122,3125],{"className":3123,"code":3124,"language":1518,"meta":178,"style":178},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n\u002F\u002F 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",[99,3126,3127,3149,3153,3158,3168,3178,3182,3196,3200,3220,3224,3229,3242,3252,3257],{"__ignoreMap":178},[220,3128,3129,3131,3134,3136,3139,3142,3144,3147],{"class":222,"line":223},[220,3130,1735],{"class":260},[220,3132,3133],{"class":420}," canvas",[220,3135,1741],{"class":260},[220,3137,3138],{"class":264}," document.",[220,3140,3141],{"class":226},"getElementById",[220,3143,2626],{"class":264},[220,3145,3146],{"class":230},"'my-canvas'",[220,3148,2632],{"class":264},[220,3150,3151],{"class":222,"line":179},[220,3152,647],{"emptyLinePlaceholder":194},[220,3154,3155],{"class":222,"line":389},[220,3156,3157],{"class":609},"\u002F\u002F Start hidden\n",[220,3159,3160,3163,3165],{"class":222,"line":399},[220,3161,3162],{"class":264},"canvas.style.opacity ",[220,3164,353],{"class":260},[220,3166,3167],{"class":230}," '0'\n",[220,3169,3170,3173,3175],{"class":222,"line":644},[220,3171,3172],{"class":264},"canvas.style.transition ",[220,3174,353],{"class":260},[220,3176,3177],{"class":230}," 'opacity 0.5s'\n",[220,3179,3180],{"class":222,"line":650},[220,3181,647],{"emptyLinePlaceholder":194},[220,3183,3184,3186,3188,3190,3192,3194],{"class":222,"line":656},[220,3185,1735],{"class":260},[220,3187,1738],{"class":420},[220,3189,1741],{"class":260},[220,3191,1744],{"class":260},[220,3193,1747],{"class":226},[220,3195,1750],{"class":264},[220,3197,3198],{"class":222,"line":673},[220,3199,1765],{"class":264},[220,3201,3202,3204,3207,3210,3213,3215,3218],{"class":222,"line":682},[220,3203,1770],{"class":264},[220,3205,3206],{"class":230},"'Circle'",[220,3208,3209],{"class":264},", id: ",[220,3211,3212],{"class":230},"'c1'",[220,3214,1776],{"class":264},[220,3216,3217],{"class":230},"'#ff0088'",[220,3219,1782],{"class":264},[220,3221,3222],{"class":222,"line":691},[220,3223,1787],{"class":264},[220,3225,3226],{"class":222,"line":696},[220,3227,3228],{"class":264},"}, {\n",[220,3230,3231,3234,3237,3239],{"class":222,"line":702},[220,3232,3233],{"class":226}," onReady",[220,3235,3236],{"class":264},": () ",[220,3238,2762],{"class":260},[220,3240,3241],{"class":264}," {\n",[220,3243,3244,3247,3249],{"class":222,"line":718},[220,3245,3246],{"class":264}," canvas.style.opacity ",[220,3248,353],{"class":260},[220,3250,3251],{"class":230}," '1'\n",[220,3253,3254],{"class":222,"line":727},[220,3255,3256],{"class":264}," }\n",[220,3258,3259],{"class":222,"line":2664},[220,3260,1792],{"class":264},[3262,3263,3265],"h3",{"id":3264},"timing","Timing",[15,3267,3268,3270],{},[99,3269,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3272,3273,3276,3279,3282],{},[37,3274,3275],{},"The WebGPU renderer is initialized",[37,3277,3278],{},"All child shader components have registered",[37,3280,3281],{},"The composed shader pipeline has been compiled",[37,3283,3284],{},"The first frame is ready to display",[15,3286,3287,3288,3291],{},"The callback fires ",[159,3289,3290],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3262,3293,3295],{"id":3294},"notes","Notes",[34,3297,3298,3303],{},[37,3299,3300,3302],{},[99,3301,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3304,3305,3306,3308,3309,3311],{},"If the ",[99,3307,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3310,2500],{}," fires after that deferred initialization completes",[23,3313,3315],{"id":3314},"unsupported-browsers","Unsupported browsers",[15,3317,3318,3319,3321],{},"Shaders is WebGPU-only. On a browser or driver that can't provide a working GPU device — an\nolder Safari, Firefox with WebGPU still behind a flag, a blocklisted or exhausted driver — the\ncanvas simply stays transparent. ",[99,3320,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3323,3324],{},"If you want to render your own fallback instead of empty space, you have two options.",[3262,3326,3328],{"id":3327},"check-before-you-mount","Check before you mount",[15,3330,3331,3334,3335,3338],{},[99,3332,3333],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3336,3337],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3340,3341,3529,3698,3818,3991],{":tabs":1557},[212,3342,3344],{"className":334,"code":3343,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader v-if=\"supported\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv v-else class=\"fallback\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fvue'\n\nconst supported = ref(false)\nonMounted(async () => {\n supported.value = (await getWebGPUSupport()).supported\n})\n\u003C\u002Fscript>\n",[99,3345,3346,3354,3370,3384,3392,3415,3423,3427,3437,3448,3459,3463,3480,3497,3516,3520],{"__ignoreMap":178},[220,3347,3348,3350,3352],{"class":222,"line":223},[220,3349,343],{"class":264},[220,3351,2519],{"class":346},[220,3353,359],{"class":264},[220,3355,3356,3358,3360,3363,3365,3368],{"class":222,"line":179},[220,3357,364],{"class":264},[220,3359,347],{"class":346},[220,3361,3362],{"class":226}," v-if",[220,3364,353],{"class":264},[220,3366,3367],{"class":230},"\"supported\"",[220,3369,359],{"class":264},[220,3371,3372,3374,3376,3378,3380,3382],{"class":222,"line":389},[220,3373,2550],{"class":264},[220,3375,2553],{"class":346},[220,3377,1588],{"class":226},[220,3379,353],{"class":264},[220,3381,2560],{"class":230},[220,3383,386],{"class":264},[220,3385,3386,3388,3390],{"class":222,"line":399},[220,3387,2567],{"class":264},[220,3389,347],{"class":346},[220,3391,359],{"class":264},[220,3393,3394,3396,3399,3402,3404,3406,3409,3413],{"class":222,"line":644},[220,3395,364],{"class":264},[220,3397,3398],{"class":346},"div",[220,3400,3401],{"class":226}," v-else",[220,3403,350],{"class":226},[220,3405,353],{"class":264},[220,3407,3408],{"class":230},"\"fallback\"",[220,3410,3412],{"class":3411},"s6RL2"," \u002F",[220,3414,359],{"class":264},[220,3416,3417,3419,3421],{"class":222,"line":650},[220,3418,402],{"class":264},[220,3420,2519],{"class":346},[220,3422,359],{"class":264},[220,3424,3425],{"class":222,"line":656},[220,3426,647],{"emptyLinePlaceholder":194},[220,3428,3429,3431,3433,3435],{"class":222,"line":673},[220,3430,343],{"class":264},[220,3432,2590],{"class":346},[220,3434,2593],{"class":226},[220,3436,359],{"class":264},[220,3438,3439,3441,3444,3446],{"class":222,"line":682},[220,3440,261],{"class":260},[220,3442,3443],{"class":264}," { ref, onMounted } ",[220,3445,268],{"class":260},[220,3447,2607],{"class":230},[220,3449,3450,3452,3455,3457],{"class":222,"line":691},[220,3451,261],{"class":260},[220,3453,3454],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3456,268],{"class":260},[220,3458,271],{"class":230},[220,3460,3461],{"class":222,"line":696},[220,3462,647],{"emptyLinePlaceholder":194},[220,3464,3465,3467,3470,3472,3474,3476,3478],{"class":222,"line":702},[220,3466,1735],{"class":260},[220,3468,3469],{"class":420}," supported",[220,3471,1741],{"class":260},[220,3473,2623],{"class":226},[220,3475,2626],{"class":264},[220,3477,2629],{"class":420},[220,3479,2632],{"class":264},[220,3481,3482,3485,3487,3490,3493,3495],{"class":222,"line":718},[220,3483,3484],{"class":226},"onMounted",[220,3486,2626],{"class":264},[220,3488,3489],{"class":260},"async",[220,3491,3492],{"class":264}," () ",[220,3494,2762],{"class":260},[220,3496,3241],{"class":264},[220,3498,3499,3502,3504,3507,3510,3513],{"class":222,"line":727},[220,3500,3501],{"class":264}," supported.value ",[220,3503,353],{"class":260},[220,3505,3506],{"class":264}," (",[220,3508,3509],{"class":260},"await",[220,3511,3512],{"class":226}," getWebGPUSupport",[220,3514,3515],{"class":264},"()).supported\n",[220,3517,3518],{"class":222,"line":2664},[220,3519,1792],{"class":264},[220,3521,3523,3525,3527],{"class":222,"line":3522},16,[220,3524,402],{"class":264},[220,3526,2590],{"class":346},[220,3528,359],{"class":264},[212,3530,3532],{"className":409,"code":3531,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Freact'\n\nfunction App() {\n const [supported, setSupported] = useState(false)\n useEffect(() => {\n getWebGPUSupport().then(({ supported }) => setSupported(supported))\n }, [])\n\n return supported\n ? \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n : \u003Cdiv className=\"fallback\" \u002F>\n}\n",[99,3533,3534,3545,3555,3559,3567,3593,3605,3633,3638,3642,3649,3677,3694],{"__ignoreMap":178},[220,3535,3536,3538,3541,3543],{"class":222,"line":223},[220,3537,261],{"class":260},[220,3539,3540],{"class":264}," { useState, useEffect } ",[220,3542,268],{"class":260},[220,3544,2687],{"class":230},[220,3546,3547,3549,3551,3553],{"class":222,"line":179},[220,3548,261],{"class":260},[220,3550,3454],{"class":264},[220,3552,268],{"class":260},[220,3554,287],{"class":230},[220,3556,3557],{"class":222,"line":389},[220,3558,647],{"emptyLinePlaceholder":194},[220,3560,3561,3563,3565],{"class":222,"line":399},[220,3562,2641],{"class":260},[220,3564,2698],{"class":226},[220,3566,2647],{"class":264},[220,3568,3569,3571,3573,3576,3578,3581,3583,3585,3587,3589,3591],{"class":222,"line":644},[220,3570,2705],{"class":260},[220,3572,2708],{"class":264},[220,3574,3575],{"class":420},"supported",[220,3577,1895],{"class":264},[220,3579,3580],{"class":420},"setSupported",[220,3582,2719],{"class":264},[220,3584,353],{"class":260},[220,3586,2724],{"class":226},[220,3588,2626],{"class":264},[220,3590,2629],{"class":420},[220,3592,2632],{"class":264},[220,3594,3595,3598,3601,3603],{"class":222,"line":650},[220,3596,3597],{"class":226}," useEffect",[220,3599,3600],{"class":264},"(() ",[220,3602,2762],{"class":260},[220,3604,3241],{"class":264},[220,3606,3607,3610,3613,3616,3619,3622,3625,3627,3630],{"class":222,"line":656},[220,3608,3609],{"class":226}," getWebGPUSupport",[220,3611,3612],{"class":264},"().",[220,3614,3615],{"class":226},"then",[220,3617,3618],{"class":264},"(({ ",[220,3620,3575],{"class":3621},"s9osk",[220,3623,3624],{"class":264}," }) ",[220,3626,2762],{"class":260},[220,3628,3629],{"class":226}," setSupported",[220,3631,3632],{"class":264},"(supported))\n",[220,3634,3635],{"class":222,"line":673},[220,3636,3637],{"class":264}," }, [])\n",[220,3639,3640],{"class":222,"line":682},[220,3641,647],{"emptyLinePlaceholder":194},[220,3643,3644,3646],{"class":222,"line":691},[220,3645,2739],{"class":260},[220,3647,3648],{"class":264}," supported\n",[220,3650,3651,3654,3657,3659,3662,3664,3666,3668,3670,3673,3675],{"class":222,"line":696},[220,3652,3653],{"class":260}," ?",[220,3655,3656],{"class":264}," \u003C",[220,3658,347],{"class":420},[220,3660,3661],{"class":264},">\u003C",[220,3663,2553],{"class":420},[220,3665,1588],{"class":226},[220,3667,353],{"class":260},[220,3669,2560],{"class":230},[220,3671,3672],{"class":264}," \u002F>\u003C\u002F",[220,3674,347],{"class":420},[220,3676,359],{"class":264},[220,3678,3679,3682,3684,3686,3688,3690,3692],{"class":222,"line":702},[220,3680,3681],{"class":260}," :",[220,3683,3656],{"class":264},[220,3685,3398],{"class":346},[220,3687,423],{"class":226},[220,3689,353],{"class":260},[220,3691,3408],{"class":230},[220,3693,386],{"class":264},[220,3695,3696],{"class":222,"line":718},[220,3697,749],{"class":264},[212,3699,3701],{"className":468,"code":3700,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n\n let supported = $state(false)\n getWebGPUSupport().then((info) => { supported = info.supported })\n\u003C\u002Fscript>\n\n{#if supported}\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n{:else}\n \u003Cdiv class=\"fallback\">\u003C\u002Fdiv>\n{\u002Fif}\n",[99,3702,3703,3711,3716,3720,3725,3735,3743,3747,3758,3780,3790,3809],{"__ignoreMap":178},[220,3704,3705,3707,3709],{"class":222,"line":223},[220,3706,343],{"class":264},[220,3708,2590],{"class":346},[220,3710,359],{"class":264},[220,3712,3713],{"class":222,"line":179},[220,3714,3715],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3717,3718],{"class":222,"line":389},[220,3719,647],{"emptyLinePlaceholder":194},[220,3721,3722],{"class":222,"line":399},[220,3723,3724],{"class":264}," let supported = $state(false)\n",[220,3726,3727,3730,3732],{"class":222,"line":644},[220,3728,3729],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3731,353],{"class":260},[220,3733,3734],{"class":264}," info.supported })\n",[220,3736,3737,3739,3741],{"class":222,"line":650},[220,3738,402],{"class":264},[220,3740,2590],{"class":346},[220,3742,359],{"class":264},[220,3744,3745],{"class":222,"line":656},[220,3746,647],{"emptyLinePlaceholder":194},[220,3748,3749,3752,3755],{"class":222,"line":673},[220,3750,3751],{"class":264},"{#",[220,3753,3754],{"class":260},"if",[220,3756,3757],{"class":264}," supported}\n",[220,3759,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":222,"line":682},[220,3761,364],{"class":264},[220,3763,347],{"class":420},[220,3765,3661],{"class":264},[220,3767,2553],{"class":420},[220,3769,1588],{"class":226},[220,3771,353],{"class":260},[220,3773,2560],{"class":230},[220,3775,3672],{"class":264},[220,3777,347],{"class":420},[220,3779,359],{"class":264},[220,3781,3782,3785,3788],{"class":222,"line":691},[220,3783,3784],{"class":264},"{:",[220,3786,3787],{"class":260},"else",[220,3789,749],{"class":264},[220,3791,3792,3794,3796,3798,3800,3802,3805,3807],{"class":222,"line":696},[220,3793,364],{"class":264},[220,3795,3398],{"class":346},[220,3797,350],{"class":226},[220,3799,353],{"class":260},[220,3801,3408],{"class":230},[220,3803,3804],{"class":264},">\u003C\u002F",[220,3806,3398],{"class":346},[220,3808,359],{"class":264},[220,3810,3811,3813,3816],{"class":222,"line":702},[220,3812,743],{"class":264},[220,3814,3815],{"class":260},"\u002Fif",[220,3817,749],{"class":264},[212,3819,3821],{"className":409,"code":3820,"language":411,"meta":178,"style":178},"import { createSignal, onMount, Show } from 'solid-js'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsolid'\n\nfunction App() {\n const [supported, setSupported] = createSignal(false)\n onMount(async () => setSupported((await getWebGPUSupport()).supported))\n\n return (\n \u003CShow when={supported()} fallback={\u003Cdiv class=\"fallback\" \u002F>}>\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n \u003C\u002FShow>\n )\n}\n",[99,3822,3823,3834,3844,3848,3856,3880,3905,3909,3915,3953,3975,3983,3987],{"__ignoreMap":178},[220,3824,3825,3827,3830,3832],{"class":222,"line":223},[220,3826,261],{"class":260},[220,3828,3829],{"class":264}," { createSignal, onMount, Show } ",[220,3831,268],{"class":260},[220,3833,2987],{"class":230},[220,3835,3836,3838,3840,3842],{"class":222,"line":179},[220,3837,261],{"class":260},[220,3839,3454],{"class":264},[220,3841,268],{"class":260},[220,3843,319],{"class":230},[220,3845,3846],{"class":222,"line":389},[220,3847,647],{"emptyLinePlaceholder":194},[220,3849,3850,3852,3854],{"class":222,"line":399},[220,3851,2641],{"class":260},[220,3853,2698],{"class":226},[220,3855,2647],{"class":264},[220,3857,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":222,"line":644},[220,3859,2705],{"class":260},[220,3861,2708],{"class":264},[220,3863,3575],{"class":420},[220,3865,1895],{"class":264},[220,3867,3580],{"class":420},[220,3869,2719],{"class":264},[220,3871,353],{"class":260},[220,3873,3018],{"class":226},[220,3875,2626],{"class":264},[220,3877,2629],{"class":420},[220,3879,2632],{"class":264},[220,3881,3882,3885,3887,3889,3891,3893,3895,3898,3900,3902],{"class":222,"line":650},[220,3883,3884],{"class":226}," onMount",[220,3886,2626],{"class":264},[220,3888,3489],{"class":260},[220,3890,3492],{"class":264},[220,3892,2762],{"class":260},[220,3894,3629],{"class":226},[220,3896,3897],{"class":264},"((",[220,3899,3509],{"class":260},[220,3901,3512],{"class":226},[220,3903,3904],{"class":264},"()).supported))\n",[220,3906,3907],{"class":222,"line":656},[220,3908,647],{"emptyLinePlaceholder":194},[220,3910,3911,3913],{"class":222,"line":673},[220,3912,2739],{"class":260},[220,3914,2742],{"class":264},[220,3916,3917,3919,3922,3925,3927,3929,3931,3934,3937,3939,3942,3944,3946,3948,3950],{"class":222,"line":682},[220,3918,2550],{"class":264},[220,3920,3921],{"class":420},"Show",[220,3923,3924],{"class":226}," when",[220,3926,353],{"class":260},[220,3928,743],{"class":264},[220,3930,3575],{"class":226},[220,3932,3933],{"class":264},"()} ",[220,3935,3936],{"class":226},"fallback",[220,3938,353],{"class":260},[220,3940,3941],{"class":264},"{\u003C",[220,3943,3398],{"class":346},[220,3945,350],{"class":226},[220,3947,353],{"class":260},[220,3949,3408],{"class":230},[220,3951,3952],{"class":264}," \u002F>}>\n",[220,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973],{"class":222,"line":691},[220,3956,2813],{"class":264},[220,3958,347],{"class":420},[220,3960,3661],{"class":264},[220,3962,2553],{"class":420},[220,3964,1588],{"class":226},[220,3966,353],{"class":260},[220,3968,2560],{"class":230},[220,3970,3672],{"class":264},[220,3972,347],{"class":420},[220,3974,359],{"class":264},[220,3976,3977,3979,3981],{"class":222,"line":696},[220,3978,2828],{"class":264},[220,3980,3921],{"class":420},[220,3982,359],{"class":264},[220,3984,3985],{"class":222,"line":702},[220,3986,2837],{"class":264},[220,3988,3989],{"class":222,"line":718},[220,3990,749],{"class":264},[212,3992,3994],{"className":3123,"code":3993,"language":1518,"meta":178,"style":178},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n\nconst { supported } = await getWebGPUSupport()\nif (supported) {\n await createShader(canvas, preset)\n} else {\n canvas.replaceWith(fallbackElement)\n}\n",[99,3995,3996,4008,4012,4033,4040,4050,4058,4069],{"__ignoreMap":178},[220,3997,3998,4000,4003,4005],{"class":222,"line":223},[220,3999,261],{"class":260},[220,4001,4002],{"class":264}," { createShader, getWebGPUSupport } ",[220,4004,268],{"class":260},[220,4006,4007],{"class":230}," 'shaders\u002Fjs'\n",[220,4009,4010],{"class":222,"line":179},[220,4011,647],{"emptyLinePlaceholder":194},[220,4013,4014,4016,4019,4021,4024,4026,4028,4030],{"class":222,"line":389},[220,4015,1735],{"class":260},[220,4017,4018],{"class":264}," { ",[220,4020,3575],{"class":420},[220,4022,4023],{"class":264}," } ",[220,4025,353],{"class":260},[220,4027,1744],{"class":260},[220,4029,3512],{"class":226},[220,4031,4032],{"class":264},"()\n",[220,4034,4035,4037],{"class":222,"line":399},[220,4036,3754],{"class":260},[220,4038,4039],{"class":264}," (supported) {\n",[220,4041,4042,4045,4047],{"class":222,"line":644},[220,4043,4044],{"class":260}," await",[220,4046,1747],{"class":226},[220,4048,4049],{"class":264},"(canvas, preset)\n",[220,4051,4052,4054,4056],{"class":222,"line":650},[220,4053,2914],{"class":264},[220,4055,3787],{"class":260},[220,4057,3241],{"class":264},[220,4059,4060,4063,4066],{"class":222,"line":656},[220,4061,4062],{"class":264}," canvas.",[220,4064,4065],{"class":226},"replaceWith",[220,4067,4068],{"class":264},"(fallbackElement)\n",[220,4070,4071],{"class":222,"line":673},[220,4072,749],{"class":264},[3262,4074,4076],{"id":4075},"react-to-it-after-the-fact","React to it after the fact",[15,4078,1839,4079,4082],{},[99,4080,4081],{},"unavailable"," event fires at most once if the GPU can't be used — either because it was\nnever available, or because it became unusable later (device loss with no recovery, an\nout-of-memory refusal, a driver that can't run the compiled pipeline). By the time it fires the\ncanvas has already been cleared and every GPU resource released.",[246,4084,4085,4144,4203,4254,4303],{":tabs":1557},[212,4086,4088],{"className":334,"code":4087,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @unavailable=\"showFallback = true\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,4089,4090,4098,4114,4128,4136],{"__ignoreMap":178},[220,4091,4092,4094,4096],{"class":222,"line":223},[220,4093,343],{"class":264},[220,4095,2519],{"class":346},[220,4097,359],{"class":264},[220,4099,4100,4102,4104,4107,4109,4112],{"class":222,"line":179},[220,4101,364],{"class":264},[220,4103,347],{"class":346},[220,4105,4106],{"class":226}," @unavailable",[220,4108,353],{"class":264},[220,4110,4111],{"class":230},"\"showFallback = true\"",[220,4113,359],{"class":264},[220,4115,4116,4118,4120,4122,4124,4126],{"class":222,"line":389},[220,4117,2550],{"class":264},[220,4119,2553],{"class":346},[220,4121,1588],{"class":226},[220,4123,353],{"class":264},[220,4125,2560],{"class":230},[220,4127,386],{"class":264},[220,4129,4130,4132,4134],{"class":222,"line":399},[220,4131,2567],{"class":264},[220,4133,347],{"class":346},[220,4135,359],{"class":264},[220,4137,4138,4140,4142],{"class":222,"line":644},[220,4139,402],{"class":264},[220,4141,2519],{"class":346},[220,4143,359],{"class":264},[212,4145,4147],{"className":409,"code":4146,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4148,4149,4181,4195],{"__ignoreMap":178},[220,4150,4151,4153,4155,4158,4160,4163,4166,4169,4171,4174,4176,4178],{"class":222,"line":223},[220,4152,343],{"class":264},[220,4154,347],{"class":420},[220,4156,4157],{"class":226}," onUnavailable",[220,4159,353],{"class":260},[220,4161,4162],{"class":264},"{(",[220,4164,4165],{"class":3621},"reason",[220,4167,4168],{"class":264},") ",[220,4170,2762],{"class":260},[220,4172,4173],{"class":226}," setShowFallback",[220,4175,2626],{"class":264},[220,4177,2332],{"class":420},[220,4179,4180],{"class":264},")}>\n",[220,4182,4183,4185,4187,4189,4191,4193],{"class":222,"line":179},[220,4184,364],{"class":264},[220,4186,2553],{"class":420},[220,4188,1588],{"class":226},[220,4190,353],{"class":260},[220,4192,2560],{"class":230},[220,4194,386],{"class":264},[220,4196,4197,4199,4201],{"class":222,"line":389},[220,4198,402],{"class":264},[220,4200,347],{"class":420},[220,4202,359],{"class":264},[212,4204,4206],{"className":468,"code":4205,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4207,4208,4232,4246],{"__ignoreMap":178},[220,4209,4210,4212,4214,4217,4219,4221,4223,4226,4228,4230],{"class":222,"line":223},[220,4211,343],{"class":264},[220,4213,347],{"class":420},[220,4215,4216],{"class":226}," onunavailable",[220,4218,353],{"class":260},[220,4220,2759],{"class":264},[220,4222,2762],{"class":260},[220,4224,4225],{"class":264}," (showFallback ",[220,4227,353],{"class":260},[220,4229,2911],{"class":420},[220,4231,4180],{"class":264},[220,4233,4234,4236,4238,4240,4242,4244],{"class":222,"line":179},[220,4235,364],{"class":264},[220,4237,2553],{"class":420},[220,4239,1588],{"class":226},[220,4241,353],{"class":260},[220,4243,2560],{"class":230},[220,4245,386],{"class":264},[220,4247,4248,4250,4252],{"class":222,"line":389},[220,4249,402],{"class":264},[220,4251,347],{"class":420},[220,4253,359],{"class":264},[212,4255,4257],{"className":409,"code":4256,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4258,4259,4281,4295],{"__ignoreMap":178},[220,4260,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":222,"line":223},[220,4262,343],{"class":264},[220,4264,347],{"class":420},[220,4266,4157],{"class":226},[220,4268,353],{"class":260},[220,4270,2759],{"class":264},[220,4272,2762],{"class":260},[220,4274,4173],{"class":226},[220,4276,2626],{"class":264},[220,4278,2332],{"class":420},[220,4280,4180],{"class":264},[220,4282,4283,4285,4287,4289,4291,4293],{"class":222,"line":179},[220,4284,364],{"class":264},[220,4286,2553],{"class":420},[220,4288,1588],{"class":226},[220,4290,353],{"class":260},[220,4292,2560],{"class":230},[220,4294,386],{"class":264},[220,4296,4297,4299,4301],{"class":222,"line":389},[220,4298,402],{"class":264},[220,4300,347],{"class":420},[220,4302,359],{"class":264},[212,4304,4306],{"className":3123,"code":4305,"language":1518,"meta":178,"style":178},"await createShader(canvas, preset, {\n onError: (reason) => {\n \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n showFallback(reason)\n }\n})\n",[99,4307,4308,4317,4333,4338,4343,4348,4356,4360],{"__ignoreMap":178},[220,4309,4310,4312,4314],{"class":222,"line":223},[220,4311,3509],{"class":260},[220,4313,1747],{"class":226},[220,4315,4316],{"class":264},"(canvas, preset, {\n",[220,4318,4319,4322,4325,4327,4329,4331],{"class":222,"line":179},[220,4320,4321],{"class":226}," onError",[220,4323,4324],{"class":264},": (",[220,4326,4165],{"class":3621},[220,4328,4168],{"class":264},[220,4330,2762],{"class":260},[220,4332,3241],{"class":264},[220,4334,4335],{"class":222,"line":389},[220,4336,4337],{"class":609}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4339,4340],{"class":222,"line":399},[220,4341,4342],{"class":609}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4344,4345],{"class":222,"line":644},[220,4346,4347],{"class":609}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4349,4350,4353],{"class":222,"line":650},[220,4351,4352],{"class":226}," showFallback",[220,4354,4355],{"class":264},"(reason)\n",[220,4357,4358],{"class":222,"line":656},[220,4359,3256],{"class":264},[220,4361,4362],{"class":222,"line":673},[220,4363,1792],{"class":264},[3262,4365,4367],{"id":4366},"debugging","Debugging",[15,4369,4370],{},"Shaders keeps quiet in production on purpose — an embedded background effect must never fill\na host page's console with errors the visitor can do nothing about. When you need to see what\nthe renderer is actually doing, switch diagnostics on:",[212,4372,4374],{"className":3123,"code":4373,"language":1518,"meta":178,"style":178},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n\u002F\u002F or, in code:\nimport { setShadersDebug } from 'shaders\u002Fvue'\nsetShadersDebug(true)\n",[99,4375,4376,4400,4405,4416],{"__ignoreMap":178},[220,4377,4378,4381,4384,4386,4389,4391,4394,4397],{"class":222,"line":223},[220,4379,4380],{"class":264},"localStorage.",[220,4382,4383],{"class":226},"setItem",[220,4385,2626],{"class":264},[220,4387,4388],{"class":230},"'shaders:debug'",[220,4390,1895],{"class":264},[220,4392,4393],{"class":230},"'1'",[220,4395,4396],{"class":264},") ",[220,4398,4399],{"class":609},"\u002F\u002F persists for the origin\n",[220,4401,4402],{"class":222,"line":179},[220,4403,4404],{"class":609},"\u002F\u002F or, in code:\n",[220,4406,4407,4409,4412,4414],{"class":222,"line":389},[220,4408,261],{"class":260},[220,4410,4411],{"class":264}," { setShadersDebug } ",[220,4413,268],{"class":260},[220,4415,271],{"class":230},[220,4417,4418,4421,4423,4425],{"class":222,"line":399},[220,4419,4420],{"class":226},"setShadersDebug",[220,4422,2626],{"class":264},[220,4424,2332],{"class":420},[220,4426,2632],{"class":264},[1504,4428,4429],{},"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}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":4431},[4432,4436],{"id":2499,"depth":179,"text":2500,"children":4433},[4434,4435],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},{"id":3314,"depth":179,"text":3315,"children":4437},[4438,4439,4440],{"id":3327,"depth":389,"text":3328},{"id":4075,"depth":389,"text":4076},{"id":4366,"depth":389,"text":4367},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4441},"docs\u002Fguide\u002F12.hooks-events","5swX9Xt3mdKh2Ke08B_93ih7fjlcaeZgbTwEfxtu2To",{"id":4449,"title":4450,"body":4451,"category":2240,"description":5505,"exclude":190,"extension":191,"forceFramework":190,"icon":5506,"meta":5507,"navigation":194,"path":58,"seo":5508,"stem":5509,"__hash__":5510},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP",{"type":8,"value":4452,"toc":5495},[4453,4456,4459,4471,4475,4478,4482,4485,4501,4508,4511,4515,4518,4523,4526,4531,4794,4796,4800,4807,4816,4818,4822,4825,4837,4840,5245,5249,5252,5258,5264,5270,5276,5279,5318,5369,5412,5452,5456,5459,5462,5465,5469,5471,5475,5481,5484,5492],[11,4454,4450],{"id":4455},"shaders-mcp",[19,4457],{":preset":4458},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002F0oExGojy9aDN.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}}]}",[15,4460,4461,4462,4466,4467,4470],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. Connecting works on any account, free included. A ",[56,4463,4465],{"href":4464},"\u002Fpricing","Core"," subscription lets your agent ship your own design-editor creations to production; ",[56,4468,4469],{"href":4464},"Pro"," additionally unlocks the full library of curated presets and sections.",[23,4472,4474],{"id":4473},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,4476,4477],{},"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.",[3262,4479,4481],{"id":4480},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,4483,4484],{},"One command detects the coding agents on your machine — Cursor, Claude Code, Codex, VS Code, Windsurf, Antigravity, and more — and writes the right MCP config for each:",[212,4486,4488],{"className":214,"code":4487,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,4489,4490],{"__ignoreMap":178},[220,4491,4492,4495,4498],{"class":222,"line":223},[220,4493,4494],{"class":226},"npx",[220,4496,4497],{"class":230}," shaders@latest",[220,4499,4500],{"class":230}," install-mcp\n",[15,4502,4503,4504,4507],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,4505,4506],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[4509,4510],"hr",{},[3262,4512,4514],{"id":4513},"manual-configuration","Manual configuration",[15,4516,4517],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,4519,4520],{},[159,4521,4522],{},"Cursor",[4524,4525],"cursor-install-button",{},[15,4527,4528],{},[159,4529,4530],{},"Other tools",[246,4532,4534,4562,4618,4657,4684,4743],{":tabs":4533},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4535,4537],{"className":214,"code":4536,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,4538,4539],{"__ignoreMap":178},[220,4540,4541,4544,4547,4550,4553,4556,4559],{"class":222,"line":223},[220,4542,4543],{"class":226},"claude",[220,4545,4546],{"class":230}," mcp",[220,4548,4549],{"class":230}," add",[220,4551,4552],{"class":420}," --transport",[220,4554,4555],{"class":230}," http",[220,4557,4558],{"class":230}," shaders",[220,4560,4561],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,4563,4567],{"className":4564,"code":4565,"language":4566,"meta":178,"style":178},"language-json shiki shiki-themes github-dark","\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n","json",[99,4568,4569,4574,4579,4587,4594,4605,4610,4614],{"__ignoreMap":178},[220,4570,4571],{"class":222,"line":223},[220,4572,4573],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,4575,4576],{"class":222,"line":179},[220,4577,4578],{"class":264},"{\n",[220,4580,4581,4584],{"class":222,"line":389},[220,4582,4583],{"class":420}," \"mcpServers\"",[220,4585,4586],{"class":264},": {\n",[220,4588,4589,4592],{"class":222,"line":399},[220,4590,4591],{"class":420}," \"shaders\"",[220,4593,4586],{"class":264},[220,4595,4596,4599,4602],{"class":222,"line":644},[220,4597,4598],{"class":420}," \"serverUrl\"",[220,4600,4601],{"class":264},": ",[220,4603,4604],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,4606,4607],{"class":222,"line":650},[220,4608,4609],{"class":264}," }\n",[220,4611,4612],{"class":222,"line":656},[220,4613,3256],{"class":264},[220,4615,4616],{"class":222,"line":673},[220,4617,749],{"class":264},[212,4619,4621],{"className":4564,"code":4620,"language":4566,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n}\n",[99,4622,4623,4628,4632,4644,4653],{"__ignoreMap":178},[220,4624,4625],{"class":222,"line":223},[220,4626,4627],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,4629,4630],{"class":222,"line":179},[220,4631,4578],{"class":264},[220,4633,4634,4637,4639,4642],{"class":222,"line":389},[220,4635,4636],{"class":420}," \"name\"",[220,4638,4601],{"class":264},[220,4640,4641],{"class":230},"\"shaders\"",[220,4643,1760],{"class":264},[220,4645,4646,4649,4651],{"class":222,"line":399},[220,4647,4648],{"class":420}," \"url\"",[220,4650,4601],{"class":264},[220,4652,4604],{"class":230},[220,4654,4655],{"class":222,"line":644},[220,4656,749],{"class":264},[212,4658,4662],{"className":4659,"code":4660,"language":4661,"meta":178,"style":178},"language-toml shiki shiki-themes github-dark","# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n","toml",[99,4663,4664,4669,4674,4679],{"__ignoreMap":178},[220,4665,4666],{"class":222,"line":223},[220,4667,4668],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,4670,4671],{"class":222,"line":179},[220,4672,4673],{},"[mcp_servers.shaders]\n",[220,4675,4676],{"class":222,"line":389},[220,4677,4678],{},"enabled = true\n",[220,4680,4681],{"class":222,"line":399},[220,4682,4683],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,4685,4687],{"className":4564,"code":4686,"language":4566,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4688,4689,4694,4698,4704,4710,4722,4731,4735,4739],{"__ignoreMap":178},[220,4690,4691],{"class":222,"line":223},[220,4692,4693],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,4695,4696],{"class":222,"line":179},[220,4697,4578],{"class":264},[220,4699,4700,4702],{"class":222,"line":389},[220,4701,4583],{"class":420},[220,4703,4586],{"class":264},[220,4705,4706,4708],{"class":222,"line":399},[220,4707,4591],{"class":420},[220,4709,4586],{"class":264},[220,4711,4712,4715,4717,4720],{"class":222,"line":644},[220,4713,4714],{"class":420}," \"type\"",[220,4716,4601],{"class":264},[220,4718,4719],{"class":230},"\"http\"",[220,4721,1760],{"class":264},[220,4723,4724,4727,4729],{"class":222,"line":650},[220,4725,4726],{"class":420}," \"url\"",[220,4728,4601],{"class":264},[220,4730,4604],{"class":230},[220,4732,4733],{"class":222,"line":656},[220,4734,4609],{"class":264},[220,4736,4737],{"class":222,"line":673},[220,4738,3256],{"class":264},[220,4740,4741],{"class":222,"line":682},[220,4742,749],{"class":264},[212,4744,4746],{"className":4564,"code":4745,"language":4566,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4747,4748,4752,4758,4764,4774,4782,4786,4790],{"__ignoreMap":178},[220,4749,4750],{"class":222,"line":223},[220,4751,4578],{"class":264},[220,4753,4754,4756],{"class":222,"line":179},[220,4755,4583],{"class":420},[220,4757,4586],{"class":264},[220,4759,4760,4762],{"class":222,"line":389},[220,4761,4591],{"class":420},[220,4763,4586],{"class":264},[220,4765,4766,4768,4770,4772],{"class":222,"line":399},[220,4767,4714],{"class":420},[220,4769,4601],{"class":264},[220,4771,4719],{"class":230},[220,4773,1760],{"class":264},[220,4775,4776,4778,4780],{"class":222,"line":644},[220,4777,4726],{"class":420},[220,4779,4601],{"class":264},[220,4781,4604],{"class":230},[220,4783,4784],{"class":222,"line":650},[220,4785,4609],{"class":264},[220,4787,4788],{"class":222,"line":656},[220,4789,3256],{"class":264},[220,4791,4792],{"class":222,"line":673},[220,4793,749],{"class":264},[4509,4795],{},[23,4797,4799],{"id":4798},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,4801,4802],{},[4803,4804],"img",{"alt":4805,"src":4806},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,4808,4809,4810,4815],{},"Shaders has an official connector on ",[56,4811,4814],{"href":4812,"rel":4813},"https:\u002F\u002Fbolt.new",[167],"bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Shaders account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[4509,4817],{},[23,4819,4821],{"id":4820},"using-an-api-key-instead","Using an API key instead",[15,4823,4824],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[15,4826,4827,4828,4832,4833,4836],{},"The same key works for the ",[56,4829,4831],{"href":4830},"\u002Fdocs\u002Fguide\u002Fregistry","shadcn registry",", which lets you install any preset or section from the command line with ",[99,4834,4835],{},"npx shadcn add",".",[4838,4839],"api-keys",{},[246,4841,4843,4871,4942,5007,5064,5099,5174],{":tabs":4842},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4844,4846],{"className":214,"code":4845,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp --header \"Authorization: Bearer YOUR_API_KEY\"\n",[99,4847,4848],{"__ignoreMap":178},[220,4849,4850,4852,4854,4856,4858,4860,4862,4865,4868],{"class":222,"line":223},[220,4851,4543],{"class":226},[220,4853,4546],{"class":230},[220,4855,4549],{"class":230},[220,4857,4552],{"class":420},[220,4859,4555],{"class":230},[220,4861,4558],{"class":230},[220,4863,4864],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,4866,4867],{"class":420}," --header",[220,4869,4870],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,4872,4874],{"className":4564,"code":4873,"language":4566,"meta":178,"style":178},"\u002F\u002F .cursor\u002Fmcp.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4875,4876,4881,4885,4891,4897,4908,4915,4925,4930,4934,4938],{"__ignoreMap":178},[220,4877,4878],{"class":222,"line":223},[220,4879,4880],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,4882,4883],{"class":222,"line":179},[220,4884,4578],{"class":264},[220,4886,4887,4889],{"class":222,"line":389},[220,4888,4583],{"class":420},[220,4890,4586],{"class":264},[220,4892,4893,4895],{"class":222,"line":399},[220,4894,4591],{"class":420},[220,4896,4586],{"class":264},[220,4898,4899,4901,4903,4906],{"class":222,"line":644},[220,4900,4726],{"class":420},[220,4902,4601],{"class":264},[220,4904,4905],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,4907,1760],{"class":264},[220,4909,4910,4913],{"class":222,"line":650},[220,4911,4912],{"class":420}," \"headers\"",[220,4914,4586],{"class":264},[220,4916,4917,4920,4922],{"class":222,"line":656},[220,4918,4919],{"class":420}," \"Authorization\"",[220,4921,4601],{"class":264},[220,4923,4924],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,4926,4927],{"class":222,"line":673},[220,4928,4929],{"class":264}," }\n",[220,4931,4932],{"class":222,"line":682},[220,4933,4609],{"class":264},[220,4935,4936],{"class":222,"line":691},[220,4937,3256],{"class":264},[220,4939,4940],{"class":222,"line":696},[220,4941,749],{"class":264},[212,4943,4945],{"className":4564,"code":4944,"language":4566,"meta":178,"style":178},"\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4946,4947,4951,4955,4961,4967,4977,4983,4991,4995,4999,5003],{"__ignoreMap":178},[220,4948,4949],{"class":222,"line":223},[220,4950,4573],{"class":609},[220,4952,4953],{"class":222,"line":179},[220,4954,4578],{"class":264},[220,4956,4957,4959],{"class":222,"line":389},[220,4958,4583],{"class":420},[220,4960,4586],{"class":264},[220,4962,4963,4965],{"class":222,"line":399},[220,4964,4591],{"class":420},[220,4966,4586],{"class":264},[220,4968,4969,4971,4973,4975],{"class":222,"line":644},[220,4970,4598],{"class":420},[220,4972,4601],{"class":264},[220,4974,4905],{"class":230},[220,4976,1760],{"class":264},[220,4978,4979,4981],{"class":222,"line":650},[220,4980,4912],{"class":420},[220,4982,4586],{"class":264},[220,4984,4985,4987,4989],{"class":222,"line":656},[220,4986,4919],{"class":420},[220,4988,4601],{"class":264},[220,4990,4924],{"class":230},[220,4992,4993],{"class":222,"line":673},[220,4994,4929],{"class":264},[220,4996,4997],{"class":222,"line":682},[220,4998,4609],{"class":264},[220,5000,5001],{"class":222,"line":691},[220,5002,3256],{"class":264},[220,5004,5005],{"class":222,"line":696},[220,5006,749],{"class":264},[212,5008,5010],{"className":4564,"code":5009,"language":4566,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n}\n",[99,5011,5012,5016,5020,5030,5040,5047,5056,5060],{"__ignoreMap":178},[220,5013,5014],{"class":222,"line":223},[220,5015,4627],{"class":609},[220,5017,5018],{"class":222,"line":179},[220,5019,4578],{"class":264},[220,5021,5022,5024,5026,5028],{"class":222,"line":389},[220,5023,4636],{"class":420},[220,5025,4601],{"class":264},[220,5027,4641],{"class":230},[220,5029,1760],{"class":264},[220,5031,5032,5034,5036,5038],{"class":222,"line":399},[220,5033,4648],{"class":420},[220,5035,4601],{"class":264},[220,5037,4905],{"class":230},[220,5039,1760],{"class":264},[220,5041,5042,5045],{"class":222,"line":644},[220,5043,5044],{"class":420}," \"headers\"",[220,5046,4586],{"class":264},[220,5048,5049,5052,5054],{"class":222,"line":650},[220,5050,5051],{"class":420}," \"Authorization\"",[220,5053,4601],{"class":264},[220,5055,4924],{"class":230},[220,5057,5058],{"class":222,"line":656},[220,5059,3256],{"class":264},[220,5061,5062],{"class":222,"line":673},[220,5063,749],{"class":264},[212,5065,5067],{"className":4659,"code":5066,"language":4661,"meta":178,"style":178},"# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n\n[mcp_servers.shaders.http_headers]\nAuthorization = \"Bearer YOUR_API_KEY\"\n",[99,5068,5069,5073,5077,5081,5085,5089,5094],{"__ignoreMap":178},[220,5070,5071],{"class":222,"line":223},[220,5072,4668],{},[220,5074,5075],{"class":222,"line":179},[220,5076,4673],{},[220,5078,5079],{"class":222,"line":389},[220,5080,4678],{},[220,5082,5083],{"class":222,"line":399},[220,5084,4683],{},[220,5086,5087],{"class":222,"line":644},[220,5088,647],{"emptyLinePlaceholder":194},[220,5090,5091],{"class":222,"line":650},[220,5092,5093],{},"[mcp_servers.shaders.http_headers]\n",[220,5095,5096],{"class":222,"line":656},[220,5097,5098],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,5100,5102],{"className":4564,"code":5101,"language":4566,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5103,5104,5108,5112,5118,5124,5134,5144,5150,5158,5162,5166,5170],{"__ignoreMap":178},[220,5105,5106],{"class":222,"line":223},[220,5107,4693],{"class":609},[220,5109,5110],{"class":222,"line":179},[220,5111,4578],{"class":264},[220,5113,5114,5116],{"class":222,"line":389},[220,5115,4583],{"class":420},[220,5117,4586],{"class":264},[220,5119,5120,5122],{"class":222,"line":399},[220,5121,4591],{"class":420},[220,5123,4586],{"class":264},[220,5125,5126,5128,5130,5132],{"class":222,"line":644},[220,5127,4714],{"class":420},[220,5129,4601],{"class":264},[220,5131,4719],{"class":230},[220,5133,1760],{"class":264},[220,5135,5136,5138,5140,5142],{"class":222,"line":650},[220,5137,4726],{"class":420},[220,5139,4601],{"class":264},[220,5141,4905],{"class":230},[220,5143,1760],{"class":264},[220,5145,5146,5148],{"class":222,"line":656},[220,5147,4912],{"class":420},[220,5149,4586],{"class":264},[220,5151,5152,5154,5156],{"class":222,"line":673},[220,5153,4919],{"class":420},[220,5155,4601],{"class":264},[220,5157,4924],{"class":230},[220,5159,5160],{"class":222,"line":682},[220,5161,4929],{"class":264},[220,5163,5164],{"class":222,"line":691},[220,5165,4609],{"class":264},[220,5167,5168],{"class":222,"line":696},[220,5169,3256],{"class":264},[220,5171,5172],{"class":222,"line":702},[220,5173,749],{"class":264},[212,5175,5177],{"className":4564,"code":5176,"language":4566,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5178,5179,5183,5189,5195,5205,5215,5221,5229,5233,5237,5241],{"__ignoreMap":178},[220,5180,5181],{"class":222,"line":223},[220,5182,4578],{"class":264},[220,5184,5185,5187],{"class":222,"line":179},[220,5186,4583],{"class":420},[220,5188,4586],{"class":264},[220,5190,5191,5193],{"class":222,"line":389},[220,5192,4591],{"class":420},[220,5194,4586],{"class":264},[220,5196,5197,5199,5201,5203],{"class":222,"line":399},[220,5198,4714],{"class":420},[220,5200,4601],{"class":264},[220,5202,4719],{"class":230},[220,5204,1760],{"class":264},[220,5206,5207,5209,5211,5213],{"class":222,"line":644},[220,5208,4726],{"class":420},[220,5210,4601],{"class":264},[220,5212,4905],{"class":230},[220,5214,1760],{"class":264},[220,5216,5217,5219],{"class":222,"line":650},[220,5218,4912],{"class":420},[220,5220,4586],{"class":264},[220,5222,5223,5225,5227],{"class":222,"line":656},[220,5224,4919],{"class":420},[220,5226,4601],{"class":264},[220,5228,4924],{"class":230},[220,5230,5231],{"class":222,"line":673},[220,5232,4929],{"class":264},[220,5234,5235],{"class":222,"line":682},[220,5236,4609],{"class":264},[220,5238,5239],{"class":222,"line":691},[220,5240,3256],{"class":264},[220,5242,5243],{"class":222,"line":696},[220,5244,749],{"class":264},[23,5246,5248],{"id":5247},"start-prompting","Start prompting",[15,5250,5251],{},"Once connected, your agent gains access to the following capabilities:",[15,5253,5254,5257],{},[159,5255,5256],{},"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,5259,5260,5263],{},[159,5261,5262],{},"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,5265,5266,5269],{},[159,5267,5268],{},"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,5271,5272,5275],{},[159,5273,5274],{},"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,5277,5278],{},"Example prompts to get started:",[212,5280,5282],{"className":214,"code":5281,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,5283,5284],{"__ignoreMap":178},[220,5285,5286,5289,5292,5295,5297,5300,5303,5306,5309,5312,5315],{"class":222,"line":223},[220,5287,5288],{"class":226},"Install",[220,5290,5291],{"class":230}," my",[220,5293,5294],{"class":230}," \"Landing Hero\"",[220,5296,1738],{"class":230},[220,5298,5299],{"class":230}," in",[220,5301,5302],{"class":230}," the",[220,5304,5305],{"class":230}," hero",[220,5307,5308],{"class":230}," section",[220,5310,5311],{"class":230}," as",[220,5313,5314],{"class":230}," a",[220,5316,5317],{"class":230}," background.\n",[212,5319,5321],{"className":214,"code":5320,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,5322,5323],{"__ignoreMap":178},[220,5324,5325,5328,5330,5332,5335,5337,5340,5343,5346,5349,5352,5355,5358,5360,5363,5366],{"class":222,"line":223},[220,5326,5327],{"class":226},"Add",[220,5329,5314],{"class":230},[220,5331,1738],{"class":230},[220,5333,5334],{"class":230}," to",[220,5336,5302],{"class":230},[220,5338,5339],{"class":230}," background",[220,5341,5342],{"class":230}," of",[220,5344,5345],{"class":230}," this",[220,5347,5348],{"class":230}," card,",[220,5350,5351],{"class":230}," something",[220,5353,5354],{"class":230}," blue",[220,5356,5357],{"class":230}," with",[220,5359,5314],{"class":230},[220,5361,5362],{"class":230}," subtle",[220,5364,5365],{"class":230}," flowing",[220,5367,5368],{"class":230}," animation.\n",[212,5370,5372],{"className":214,"code":5371,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,5373,5374],{"__ignoreMap":178},[220,5375,5376,5379,5381,5384,5386,5388,5390,5393,5396,5398,5401,5404,5407,5409],{"class":222,"line":223},[220,5377,5378],{"class":226},"Make",[220,5380,5302],{"class":230},[220,5382,5383],{"class":230}," circle",[220,5385,5299],{"class":230},[220,5387,5345],{"class":230},[220,5389,1738],{"class":230},[220,5391,5392],{"class":230}," get",[220,5394,5395],{"class":230}," bigger",[220,5397,5311],{"class":230},[220,5399,5400],{"class":230}," we",[220,5402,5403],{"class":230}," scroll",[220,5405,5406],{"class":230}," past",[220,5408,5302],{"class":230},[220,5410,5411],{"class":230}," section.\n",[212,5413,5415],{"className":214,"code":5414,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,5416,5417],{"__ignoreMap":178},[220,5418,5419,5421,5423,5426,5428,5430,5433,5436,5439,5442,5445,5447,5449],{"class":222,"line":223},[220,5420,5327],{"class":226},[220,5422,5291],{"class":230},[220,5424,5425],{"class":230}," logo.svg",[220,5427,5311],{"class":230},[220,5429,5314],{"class":230},[220,5431,5432],{"class":230}," liquid",[220,5434,5435],{"class":230}," glass",[220,5437,5438],{"class":230}," effect",[220,5440,5441],{"class":230}," on",[220,5443,5444],{"class":230}," top",[220,5446,5342],{"class":230},[220,5448,5345],{"class":230},[220,5450,5451],{"class":230}," shader.\n",[23,5453,5455],{"id":5454},"pro-knowledge-base","Pro knowledge base",[15,5457,5458],{},"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,5460,5461],{},"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,5463,5464],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[5466,5467],"pro-callout",{"message":5468},"Make your agent a shader expert...",[4509,5470],{},[11,5472,5474],{"id":5473},"mcp-for-business","MCP for business",[15,5476,5477],{},[4803,5478],{"alt":5479,"src":5480},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,5482,5483],{},"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,5485,5486,5487,5491],{},"We're open to partnerships and custom integrations. Reach out at ",[56,5488,5490],{"href":5489},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,5493,5494],{},"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":178,"searchDepth":179,"depth":179,"links":5496},[5497,5501,5502,5503,5504],{"id":4473,"depth":179,"text":4474,"children":5498},[5499,5500],{"id":4480,"depth":389,"text":4481},{"id":4513,"depth":389,"text":4514},{"id":4798,"depth":179,"text":4799},{"id":4820,"depth":179,"text":4821},{"id":5247,"depth":179,"text":5248},{"id":5454,"depth":179,"text":5455},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":4450,"description":5505},"docs\u002Fguide\u002F13.mcp","YHiq9w5VdAqwFQyW_7SckMQ0wGWaoxjmbwuApSqRkq4",{"id":5512,"title":5513,"body":5514,"category":2240,"description":6121,"exclude":190,"extension":191,"forceFramework":190,"icon":6122,"meta":6123,"navigation":194,"path":4830,"seo":6124,"stem":6125,"__hash__":6126},"guide\u002Fdocs\u002Fguide\u002F14.registry.md","shadcn Registry",{"type":8,"value":5515,"toc":6108},[5516,5519,5527,5544,5551,5555,5559,5562,5564,5575,5595,5598,5602,5613,5870,5888,5892,5899,5915,5921,5928,5932,5935,5951,5954,5958,5961,5975,5981,5985,6015,6018,6022,6047,6055,6073,6082,6086,6089,6102,6105],[11,5517,5513],{"id":5518},"shadcn-registry",[15,5520,5521,5522,5526],{},"Every preset and section on Shaders is also a ",[56,5523,4831],{"href":5524,"rel":5525},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry",[167]," item. Point the shadcn CLI at the Shaders registry once, and you can pull any effect into your codebase with a single command:",[212,5528,5530],{"className":214,"code":5529,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Faurora-hero\n",[99,5531,5532],{"__ignoreMap":178},[220,5533,5534,5536,5539,5541],{"class":222,"line":223},[220,5535,4494],{"class":226},[220,5537,5538],{"class":230}," shadcn",[220,5540,4549],{"class":230},[220,5542,5543],{"class":230}," @shaders\u002Faurora-hero\n",[15,5545,5546,5547,5550],{},"The CLI writes real source files into your project — a component for a preset, a full block for a section — with imports from the ",[99,5548,5549],{},"shaders"," package. Nothing is bundled from our servers at runtime, and nothing in the installed code points back at us.",[23,5552,5554],{"id":5553},"setup","Setup",[3262,5556,5558],{"id":5557},"_1-create-an-api-key-and-add-it-to-your-environment","1. Create an API key and add it to your environment",[15,5560,5561],{},"Free items install with no key at all. Paid items need a personal API key belonging to an account that owns them. Any signed-in Shaders account can create keys — you don't need Pro to hold one.",[4838,5563],{},[15,5565,5566,5567,5570,5571,5574],{},"Put the key in ",[99,5568,5569],{},".env.local"," (or wherever your project keeps local secrets — the CLI expands ",[99,5572,5573],{},"${SHADERS_API_KEY}"," from your environment):",[212,5576,5578],{"className":214,"code":5577,"language":216,"meta":178,"style":178},"# .env.local\nSHADERS_API_KEY=sk_live_your_key_here\n",[99,5579,5580,5585],{"__ignoreMap":178},[220,5581,5582],{"class":222,"line":223},[220,5583,5584],{"class":609},"# .env.local\n",[220,5586,5587,5590,5592],{"class":222,"line":179},[220,5588,5589],{"class":264},"SHADERS_API_KEY",[220,5591,353],{"class":260},[220,5593,5594],{"class":230},"sk_live_your_key_here\n",[15,5596,5597],{},"Don't commit the key. It is tied to your account and can be revoked at any time from the same panel that created it.",[3262,5599,5601],{"id":5600},"_2-register-the-namespace","2. Register the namespace",[15,5603,5604,5605,5608,5609,5612],{},"Add a ",[99,5606,5607],{},"@shaders"," registry to your project's ",[99,5610,5611],{},"components.json",", referencing the key you just created. The framework lives in the URL, so pick the segment that matches your stack:",[246,5614,5615,5684,5746,5808],{":tabs":248},[212,5616,5618],{"className":4564,"code":5617,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5619,5620,5625,5629,5636,5643,5654,5672,5676,5680],{"__ignoreMap":178},[220,5621,5622],{"class":222,"line":223},[220,5623,5624],{"class":609},"\u002F\u002F components.json\n",[220,5626,5627],{"class":222,"line":179},[220,5628,4578],{"class":264},[220,5630,5631,5634],{"class":222,"line":389},[220,5632,5633],{"class":420}," \"registries\"",[220,5635,4586],{"class":264},[220,5637,5638,5641],{"class":222,"line":399},[220,5639,5640],{"class":420}," \"@shaders\"",[220,5642,4586],{"class":264},[220,5644,5645,5647,5649,5652],{"class":222,"line":644},[220,5646,4726],{"class":420},[220,5648,4601],{"class":264},[220,5650,5651],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\"",[220,5653,1760],{"class":264},[220,5655,5656,5658,5661,5664,5666,5669],{"class":222,"line":650},[220,5657,4912],{"class":420},[220,5659,5660],{"class":264},": { ",[220,5662,5663],{"class":420},"\"Authorization\"",[220,5665,4601],{"class":264},[220,5667,5668],{"class":230},"\"Bearer ${SHADERS_API_KEY}\"",[220,5670,5671],{"class":264}," }\n",[220,5673,5674],{"class":222,"line":656},[220,5675,4609],{"class":264},[220,5677,5678],{"class":222,"line":673},[220,5679,3256],{"class":264},[220,5681,5682],{"class":222,"line":682},[220,5683,749],{"class":264},[212,5685,5687],{"className":4564,"code":5686,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5688,5689,5693,5697,5703,5709,5720,5734,5738,5742],{"__ignoreMap":178},[220,5690,5691],{"class":222,"line":223},[220,5692,5624],{"class":609},[220,5694,5695],{"class":222,"line":179},[220,5696,4578],{"class":264},[220,5698,5699,5701],{"class":222,"line":389},[220,5700,5633],{"class":420},[220,5702,4586],{"class":264},[220,5704,5705,5707],{"class":222,"line":399},[220,5706,5640],{"class":420},[220,5708,4586],{"class":264},[220,5710,5711,5713,5715,5718],{"class":222,"line":644},[220,5712,4726],{"class":420},[220,5714,4601],{"class":264},[220,5716,5717],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\"",[220,5719,1760],{"class":264},[220,5721,5722,5724,5726,5728,5730,5732],{"class":222,"line":650},[220,5723,4912],{"class":420},[220,5725,5660],{"class":264},[220,5727,5663],{"class":420},[220,5729,4601],{"class":264},[220,5731,5668],{"class":230},[220,5733,5671],{"class":264},[220,5735,5736],{"class":222,"line":656},[220,5737,4609],{"class":264},[220,5739,5740],{"class":222,"line":673},[220,5741,3256],{"class":264},[220,5743,5744],{"class":222,"line":682},[220,5745,749],{"class":264},[212,5747,5749],{"className":4564,"code":5748,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5750,5751,5755,5759,5765,5771,5782,5796,5800,5804],{"__ignoreMap":178},[220,5752,5753],{"class":222,"line":223},[220,5754,5624],{"class":609},[220,5756,5757],{"class":222,"line":179},[220,5758,4578],{"class":264},[220,5760,5761,5763],{"class":222,"line":389},[220,5762,5633],{"class":420},[220,5764,4586],{"class":264},[220,5766,5767,5769],{"class":222,"line":399},[220,5768,5640],{"class":420},[220,5770,4586],{"class":264},[220,5772,5773,5775,5777,5780],{"class":222,"line":644},[220,5774,4726],{"class":420},[220,5776,4601],{"class":264},[220,5778,5779],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\"",[220,5781,1760],{"class":264},[220,5783,5784,5786,5788,5790,5792,5794],{"class":222,"line":650},[220,5785,4912],{"class":420},[220,5787,5660],{"class":264},[220,5789,5663],{"class":420},[220,5791,4601],{"class":264},[220,5793,5668],{"class":230},[220,5795,5671],{"class":264},[220,5797,5798],{"class":222,"line":656},[220,5799,4609],{"class":264},[220,5801,5802],{"class":222,"line":673},[220,5803,3256],{"class":264},[220,5805,5806],{"class":222,"line":682},[220,5807,749],{"class":264},[212,5809,5811],{"className":4564,"code":5810,"language":4566,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5812,5813,5817,5821,5827,5833,5844,5858,5862,5866],{"__ignoreMap":178},[220,5814,5815],{"class":222,"line":223},[220,5816,5624],{"class":609},[220,5818,5819],{"class":222,"line":179},[220,5820,4578],{"class":264},[220,5822,5823,5825],{"class":222,"line":389},[220,5824,5633],{"class":420},[220,5826,4586],{"class":264},[220,5828,5829,5831],{"class":222,"line":399},[220,5830,5640],{"class":420},[220,5832,4586],{"class":264},[220,5834,5835,5837,5839,5842],{"class":222,"line":644},[220,5836,4726],{"class":420},[220,5838,4601],{"class":264},[220,5840,5841],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\"",[220,5843,1760],{"class":264},[220,5845,5846,5848,5850,5852,5854,5856],{"class":222,"line":650},[220,5847,4912],{"class":420},[220,5849,5660],{"class":264},[220,5851,5663],{"class":420},[220,5853,4601],{"class":264},[220,5855,5668],{"class":230},[220,5857,5671],{"class":264},[220,5859,5860],{"class":222,"line":656},[220,5861,4609],{"class":264},[220,5863,5864],{"class":222,"line":673},[220,5865,3256],{"class":264},[220,5867,5868],{"class":222,"line":682},[220,5869,749],{"class":264},[15,5871,5872,5873,5876,5877,5880,5881,1864,5884,5887],{},"Use the official ",[99,5874,5875],{},"shadcn"," CLI — it is a framework-agnostic file writer, and it is the CLI that understands the ",[99,5878,5879],{},"registries"," config block. The ",[99,5882,5883],{},"shadcn-vue",[99,5885,5886],{},"shadcn-svelte"," forks have their own CLIs and do not read this configuration.",[23,5889,5891],{"id":5890},"installing-presets","Installing presets",[15,5893,5894,5895,5898],{},"Preset items are named ",[99,5896,5897],{},"\u003Ccollection-slug>-\u003Cvariant>",", matching the collection slug and the variant number shown on the preset page:",[212,5900,5902],{"className":214,"code":5901,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fliquid-chrome-2\n",[99,5903,5904],{"__ignoreMap":178},[220,5905,5906,5908,5910,5912],{"class":222,"line":223},[220,5907,4494],{"class":226},[220,5909,5538],{"class":230},[220,5911,4549],{"class":230},[220,5913,5914],{"class":230}," @shaders\u002Fliquid-chrome-2\n",[15,5916,5917,5918,5920],{},"You get a single component file that renders that exact preset, with all non-default props inlined and ",[99,5919,5549],{}," added to your dependencies. From there it's ordinary source code — change the props, wire them to state, compose it with other effects.",[15,5922,5923,5924,5927],{},"Every preset page on the site has an ",[159,5925,5926],{},"Install with shadcn"," link that shows you the exact command for that variant.",[23,5929,5931],{"id":5930},"installing-sections","Installing sections",[15,5933,5934],{},"Sections are complete, designed page sections rather than a single effect, so they install as a block — layout, copy, and the shader composition together:",[212,5936,5938],{"className":214,"code":5937,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fprism-pricing\n",[99,5939,5940],{"__ignoreMap":178},[220,5941,5942,5944,5946,5948],{"class":222,"line":223},[220,5943,4494],{"class":226},[220,5945,5538],{"class":230},[220,5947,4549],{"class":230},[220,5949,5950],{"class":230}," @shaders\u002Fprism-pricing\n",[15,5952,5953],{},"Sections are hand-authored in Vue and ported to React, Svelte, and Solid, so the same slug works in all four namespaces.",[3262,5955,5957],{"id":5956},"section-assets-and-follow-up-steps","Section assets and follow-up steps",[15,5959,5960],{},"The shadcn CLI can only transport text, so a section install arrives in two parts:",[34,5962,5963,5969],{},[37,5964,5965,5968],{},[159,5966,5967],{},"Code and SVG logos"," are written directly into your project.",[37,5970,5971,5974],{},[159,5972,5973],{},"Binary assets"," — images, video, and SDF files — are fetched once by a small downloader the item ships with. If you are running the install through a coding agent, it will run this for you; otherwise the CLI prints the command.",[15,5976,5977,5978,5980],{},"After the files land, the CLI prints a requirements checklist for that specific section: which logo to swap in, which demo image or video to replace, and whether a shape effect needs an SDF generated from your own SVG. Generating an SDF is a one-liner for any agent connected to ",[56,5979,4450],{"href":58}," — ask it to generate an SDF from your logo and it will handle the rest.",[23,5982,5984],{"id":5983},"free-vs-paid","Free vs paid",[1794,5986,5987,5997],{},[1797,5988,5989],{},[1800,5990,5991,5994],{},[1803,5992,5993],{},"Item",[1803,5995,5996],{},"What's needed",[1810,5998,5999,6007],{},[1800,6000,6001,6004],{},[1815,6002,6003],{},"Free preset or section",[1815,6005,6006],{},"Nothing — installs without a key",[1800,6008,6009,6012],{},[1815,6010,6011],{},"Paid preset or section",[1815,6013,6014],{},"An API key on an account with Shaders Pro, or a single purchase of that item",[15,6016,6017],{},"Entitlement is checked server-side on every install, so the command itself is public — you can share it, put it in a README, or hand it to an agent. It simply won't complete for an account that doesn't own the item.",[23,6019,6021],{"id":6020},"troubleshooting","Troubleshooting",[15,6023,6024,6029,6030,6032,6033,6036,6037,6040,6041,6043,6044,4836],{},[159,6025,6026],{},[99,6027,6028],{},"401 Unauthorized"," — the registry couldn't read a valid key. Either ",[99,6031,5589],{}," isn't set in the environment the CLI is running in, or the key has been revoked. Check that the variable resolves (",[99,6034,6035],{},"echo $SHADERS_API_KEY",") and that the ",[99,6038,6039],{},"Authorization"," header in ",[99,6042,5611],{}," is spelled ",[99,6045,6046],{},"Bearer ${SHADERS_API_KEY}",[15,6048,6049,6054],{},[159,6050,6051],{},[99,6052,6053],{},"403 Forbidden"," — the key is valid but the account isn't entitled to that item. The response body includes a link to unlock it, either with Pro or as a single purchase. If you just bought it, the entitlement can take a moment to propagate; retry once.",[15,6056,6057,6062,6063,6065,6066,6072],{},[159,6058,6059],{},[99,6060,6061],{},"404 Not Found"," — the item name is wrong. Preset names are ",[99,6064,5897],{}," and section names are the section slug exactly as it appears in the URL on shaders.com. You can list everything available at ",[56,6067,6070],{"href":6068,"rel":6069},"https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json",[167],[99,6071,6068],{},", which is public and needs no key.",[15,6074,6075,6078,6079,6081],{},[159,6076,6077],{},"Installed files are for the wrong framework"," — the framework comes from the URL, not from your project. Check the segment in ",[99,6080,5611],{}," matches your stack.",[23,6083,6085],{"id":6084},"browsing-the-registry","Browsing the registry",[15,6087,6088],{},"The index is public:",[212,6090,6092],{"className":214,"code":6091,"language":216,"meta":178,"style":178},"curl https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[99,6093,6094],{"__ignoreMap":178},[220,6095,6096,6099],{"class":222,"line":223},[220,6097,6098],{"class":226},"curl",[220,6100,6101],{"class":230}," https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[15,6103,6104],{},"Every entry carries a title, description, category, thumbnail, and whether it's free or paid — enough to build your own picker, or to let an agent browse the catalogue before choosing what to install.",[1504,6106,6107],{},"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":178,"searchDepth":179,"depth":179,"links":6109},[6110,6114,6115,6118,6119,6120],{"id":5553,"depth":179,"text":5554,"children":6111},[6112,6113],{"id":5557,"depth":389,"text":5558},{"id":5600,"depth":389,"text":5601},{"id":5890,"depth":179,"text":5891},{"id":5930,"depth":179,"text":5931,"children":6116},[6117],{"id":5956,"depth":389,"text":5957},{"id":5983,"depth":179,"text":5984},{"id":6020,"depth":179,"text":6021},{"id":6084,"depth":179,"text":6085},"Install any Shaders preset or section straight into your project with the shadcn CLI","terminal",{},{"title":5513,"description":6121},"docs\u002Fguide\u002F14.registry","HSE0sG5XJcGlPkMnxnc2zLwpah9usnfvUGE5YdszqFY",{"id":6128,"title":1482,"body":6129,"category":188,"description":7599,"exclude":190,"extension":191,"forceFramework":190,"icon":7600,"meta":7601,"navigation":194,"path":1481,"seo":7602,"stem":7603,"__hash__":7604},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":6130,"toc":7595},[6131,6134,6140,6144,6151,6594,6597,6601,6618,7040,7043,7052,7589,7592],[11,6132,1482],{"id":6133},"composing-effects",[15,6135,6136,6137,6139],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,6138,101],{}," 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,6141,6143],{"id":6142},"stacking-components","Stacking Components",[15,6145,6146,6147,6150],{},"Components are evaluated ",[159,6148,6149],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,6152,6153,6236,6332,6422,6512],{":tabs":1557},[212,6154,6156],{"className":334,"code":6155,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- Bottom layer -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Middle layer -->\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n\n \u003C!-- Top layer -->\n \u003CGlassTiles \u002F>\n\u003C\u002FShader>\n",[99,6157,6158,6166,6171,6179,6183,6188,6210,6214,6219,6228],{"__ignoreMap":178},[220,6159,6160,6162,6164],{"class":222,"line":223},[220,6161,343],{"class":264},[220,6163,347],{"class":346},[220,6165,359],{"class":264},[220,6167,6168],{"class":222,"line":179},[220,6169,6170],{"class":609}," \u003C!-- Bottom layer -->\n",[220,6172,6173,6175,6177],{"class":222,"line":389},[220,6174,364],{"class":264},[220,6176,367],{"class":346},[220,6178,386],{"class":264},[220,6180,6181],{"class":222,"line":399},[220,6182,647],{"emptyLinePlaceholder":194},[220,6184,6185],{"class":222,"line":644},[220,6186,6187],{"class":609}," \u003C!-- Middle layer -->\n",[220,6189,6190,6192,6194,6196,6198,6200,6203,6205,6208],{"class":222,"line":650},[220,6191,364],{"class":264},[220,6193,2553],{"class":346},[220,6195,1588],{"class":226},[220,6197,353],{"class":264},[220,6199,2560],{"class":230},[220,6201,6202],{"class":226}," radius",[220,6204,353],{"class":264},[220,6206,6207],{"class":230},"\"0.8\"",[220,6209,386],{"class":264},[220,6211,6212],{"class":222,"line":656},[220,6213,647],{"emptyLinePlaceholder":194},[220,6215,6216],{"class":222,"line":673},[220,6217,6218],{"class":609}," \u003C!-- Top layer -->\n",[220,6220,6221,6223,6226],{"class":222,"line":682},[220,6222,364],{"class":264},[220,6224,6225],{"class":346},"GlassTiles",[220,6227,386],{"class":264},[220,6229,6230,6232,6234],{"class":222,"line":691},[220,6231,402],{"class":264},[220,6233,347],{"class":346},[220,6235,359],{"class":264},[212,6237,6239],{"className":409,"code":6238,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* Bottom layer *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Middle layer *\u002F}\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n\n {\u002F* Top layer *\u002F}\n \u003CGlassTiles \u002F>\n\u003C\u002FShader>\n",[99,6240,6241,6249,6258,6266,6270,6279,6303,6307,6316,6324],{"__ignoreMap":178},[220,6242,6243,6245,6247],{"class":222,"line":223},[220,6244,343],{"class":264},[220,6246,347],{"class":420},[220,6248,359],{"class":264},[220,6250,6251,6253,6256],{"class":222,"line":179},[220,6252,1999],{"class":264},[220,6254,6255],{"class":609},"\u002F* Bottom layer *\u002F",[220,6257,749],{"class":264},[220,6259,6260,6262,6264],{"class":222,"line":389},[220,6261,364],{"class":264},[220,6263,367],{"class":420},[220,6265,386],{"class":264},[220,6267,6268],{"class":222,"line":399},[220,6269,647],{"emptyLinePlaceholder":194},[220,6271,6272,6274,6277],{"class":222,"line":644},[220,6273,1999],{"class":264},[220,6275,6276],{"class":609},"\u002F* Middle layer *\u002F",[220,6278,749],{"class":264},[220,6280,6281,6283,6285,6287,6289,6291,6293,6295,6297,6300],{"class":222,"line":650},[220,6282,364],{"class":264},[220,6284,2553],{"class":420},[220,6286,1588],{"class":226},[220,6288,353],{"class":260},[220,6290,2560],{"class":230},[220,6292,6202],{"class":226},[220,6294,353],{"class":260},[220,6296,743],{"class":264},[220,6298,6299],{"class":420},"0.8",[220,6301,6302],{"class":264},"} \u002F>\n",[220,6304,6305],{"class":222,"line":656},[220,6306,647],{"emptyLinePlaceholder":194},[220,6308,6309,6311,6314],{"class":222,"line":673},[220,6310,1999],{"class":264},[220,6312,6313],{"class":609},"\u002F* Top layer *\u002F",[220,6315,749],{"class":264},[220,6317,6318,6320,6322],{"class":222,"line":682},[220,6319,364],{"class":264},[220,6321,6225],{"class":420},[220,6323,386],{"class":264},[220,6325,6326,6328,6330],{"class":222,"line":691},[220,6327,402],{"class":264},[220,6329,347],{"class":420},[220,6331,359],{"class":264},[212,6333,6334],{"className":468,"code":6238,"language":469,"meta":178,"style":178},[99,6335,6336,6344,6352,6360,6364,6372,6394,6398,6406,6414],{"__ignoreMap":178},[220,6337,6338,6340,6342],{"class":222,"line":223},[220,6339,343],{"class":264},[220,6341,347],{"class":420},[220,6343,359],{"class":264},[220,6345,6346,6348,6350],{"class":222,"line":179},[220,6347,1999],{"class":264},[220,6349,6255],{"class":609},[220,6351,749],{"class":264},[220,6353,6354,6356,6358],{"class":222,"line":389},[220,6355,364],{"class":264},[220,6357,367],{"class":420},[220,6359,386],{"class":264},[220,6361,6362],{"class":222,"line":399},[220,6363,647],{"emptyLinePlaceholder":194},[220,6365,6366,6368,6370],{"class":222,"line":644},[220,6367,1999],{"class":264},[220,6369,6276],{"class":609},[220,6371,749],{"class":264},[220,6373,6374,6376,6378,6380,6382,6384,6386,6388,6390,6392],{"class":222,"line":650},[220,6375,364],{"class":264},[220,6377,2553],{"class":420},[220,6379,1588],{"class":226},[220,6381,353],{"class":260},[220,6383,2560],{"class":230},[220,6385,6202],{"class":226},[220,6387,353],{"class":260},[220,6389,743],{"class":264},[220,6391,6299],{"class":420},[220,6393,6302],{"class":264},[220,6395,6396],{"class":222,"line":656},[220,6397,647],{"emptyLinePlaceholder":194},[220,6399,6400,6402,6404],{"class":222,"line":673},[220,6401,1999],{"class":264},[220,6403,6313],{"class":609},[220,6405,749],{"class":264},[220,6407,6408,6410,6412],{"class":222,"line":682},[220,6409,364],{"class":264},[220,6411,6225],{"class":420},[220,6413,386],{"class":264},[220,6415,6416,6418,6420],{"class":222,"line":691},[220,6417,402],{"class":264},[220,6419,347],{"class":420},[220,6421,359],{"class":264},[212,6423,6424],{"className":468,"code":6238,"language":469,"meta":178,"style":178},[99,6425,6426,6434,6442,6450,6454,6462,6484,6488,6496,6504],{"__ignoreMap":178},[220,6427,6428,6430,6432],{"class":222,"line":223},[220,6429,343],{"class":264},[220,6431,347],{"class":420},[220,6433,359],{"class":264},[220,6435,6436,6438,6440],{"class":222,"line":179},[220,6437,1999],{"class":264},[220,6439,6255],{"class":609},[220,6441,749],{"class":264},[220,6443,6444,6446,6448],{"class":222,"line":389},[220,6445,364],{"class":264},[220,6447,367],{"class":420},[220,6449,386],{"class":264},[220,6451,6452],{"class":222,"line":399},[220,6453,647],{"emptyLinePlaceholder":194},[220,6455,6456,6458,6460],{"class":222,"line":644},[220,6457,1999],{"class":264},[220,6459,6276],{"class":609},[220,6461,749],{"class":264},[220,6463,6464,6466,6468,6470,6472,6474,6476,6478,6480,6482],{"class":222,"line":650},[220,6465,364],{"class":264},[220,6467,2553],{"class":420},[220,6469,1588],{"class":226},[220,6471,353],{"class":260},[220,6473,2560],{"class":230},[220,6475,6202],{"class":226},[220,6477,353],{"class":260},[220,6479,743],{"class":264},[220,6481,6299],{"class":420},[220,6483,6302],{"class":264},[220,6485,6486],{"class":222,"line":656},[220,6487,647],{"emptyLinePlaceholder":194},[220,6489,6490,6492,6494],{"class":222,"line":673},[220,6491,1999],{"class":264},[220,6493,6313],{"class":609},[220,6495,749],{"class":264},[220,6497,6498,6500,6502],{"class":222,"line":682},[220,6499,364],{"class":264},[220,6501,6225],{"class":420},[220,6503,386],{"class":264},[220,6505,6506,6508,6510],{"class":222,"line":691},[220,6507,402],{"class":264},[220,6509,347],{"class":420},[220,6511,359],{"class":264},[212,6513,6515],{"className":251,"code":6514,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F Bottom layer\n { type: 'LinearGradient', props: {} },\n \u002F\u002F Middle layer\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } },\n \u002F\u002F Top layer\n { type: 'GlassTiles', props: {} }\n ]\n})\n",[99,6516,6517,6531,6535,6540,6549,6554,6572,6577,6586,6590],{"__ignoreMap":178},[220,6518,6519,6521,6523,6525,6527,6529],{"class":222,"line":223},[220,6520,1735],{"class":260},[220,6522,1738],{"class":420},[220,6524,1741],{"class":260},[220,6526,1744],{"class":260},[220,6528,1747],{"class":226},[220,6530,1750],{"class":264},[220,6532,6533],{"class":222,"line":179},[220,6534,1765],{"class":264},[220,6536,6537],{"class":222,"line":389},[220,6538,6539],{"class":609}," \u002F\u002F Bottom layer\n",[220,6541,6542,6544,6546],{"class":222,"line":399},[220,6543,1770],{"class":264},[220,6545,2462],{"class":230},[220,6547,6548],{"class":264},", props: {} },\n",[220,6550,6551],{"class":222,"line":644},[220,6552,6553],{"class":609}," \u002F\u002F Middle layer\n",[220,6555,6556,6558,6560,6562,6564,6567,6569],{"class":222,"line":650},[220,6557,1770],{"class":264},[220,6559,3206],{"class":230},[220,6561,1776],{"class":264},[220,6563,3217],{"class":230},[220,6565,6566],{"class":264},", radius: ",[220,6568,6299],{"class":420},[220,6570,6571],{"class":264}," } },\n",[220,6573,6574],{"class":222,"line":656},[220,6575,6576],{"class":609}," \u002F\u002F Top layer\n",[220,6578,6579,6581,6584],{"class":222,"line":673},[220,6580,1770],{"class":264},[220,6582,6583],{"class":230},"'GlassTiles'",[220,6585,2465],{"class":264},[220,6587,6588],{"class":222,"line":682},[220,6589,1787],{"class":264},[220,6591,6592],{"class":222,"line":691},[220,6593,1792],{"class":264},[19,6595],{":preset":6596},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,6598,6600],{"id":6599},"nesting-components","Nesting Components",[15,6602,6603,6604,6607,6608,6611,6612,6615,6616,1938],{},"Notice how the ",[99,6605,6606],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,6609,6610],{},"only"," apply glass tiles to the ",[99,6613,6614],{},"\u003CCircle>"," component, you can nest it inside the ",[99,6617,6606],{},[246,6619,6620,6699,6788,6874,6960],{":tabs":1557},[212,6621,6623],{"className":334,"code":6622,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- This gradient is NOT affected -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Only the Circle inside has glass tiles applied -->\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,6624,6625,6633,6638,6646,6650,6655,6663,6683,6691],{"__ignoreMap":178},[220,6626,6627,6629,6631],{"class":222,"line":223},[220,6628,343],{"class":264},[220,6630,347],{"class":346},[220,6632,359],{"class":264},[220,6634,6635],{"class":222,"line":179},[220,6636,6637],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,6639,6640,6642,6644],{"class":222,"line":389},[220,6641,364],{"class":264},[220,6643,367],{"class":346},[220,6645,386],{"class":264},[220,6647,6648],{"class":222,"line":399},[220,6649,647],{"emptyLinePlaceholder":194},[220,6651,6652],{"class":222,"line":644},[220,6653,6654],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,6656,6657,6659,6661],{"class":222,"line":650},[220,6658,364],{"class":264},[220,6660,6225],{"class":346},[220,6662,359],{"class":264},[220,6664,6665,6667,6669,6671,6673,6675,6677,6679,6681],{"class":222,"line":656},[220,6666,2550],{"class":264},[220,6668,2553],{"class":346},[220,6670,1588],{"class":226},[220,6672,353],{"class":264},[220,6674,2560],{"class":230},[220,6676,6202],{"class":226},[220,6678,353],{"class":264},[220,6680,6207],{"class":230},[220,6682,386],{"class":264},[220,6684,6685,6687,6689],{"class":222,"line":673},[220,6686,2567],{"class":264},[220,6688,6225],{"class":346},[220,6690,359],{"class":264},[220,6692,6693,6695,6697],{"class":222,"line":682},[220,6694,402],{"class":264},[220,6696,347],{"class":346},[220,6698,359],{"class":264},[212,6700,6702],{"className":409,"code":6701,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* This gradient is NOT affected *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Only the Circle inside has glass tiles applied *\u002F}\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,6703,6704,6712,6721,6729,6733,6742,6750,6772,6780],{"__ignoreMap":178},[220,6705,6706,6708,6710],{"class":222,"line":223},[220,6707,343],{"class":264},[220,6709,347],{"class":420},[220,6711,359],{"class":264},[220,6713,6714,6716,6719],{"class":222,"line":179},[220,6715,1999],{"class":264},[220,6717,6718],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,6720,749],{"class":264},[220,6722,6723,6725,6727],{"class":222,"line":389},[220,6724,364],{"class":264},[220,6726,367],{"class":420},[220,6728,386],{"class":264},[220,6730,6731],{"class":222,"line":399},[220,6732,647],{"emptyLinePlaceholder":194},[220,6734,6735,6737,6740],{"class":222,"line":644},[220,6736,1999],{"class":264},[220,6738,6739],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,6741,749],{"class":264},[220,6743,6744,6746,6748],{"class":222,"line":650},[220,6745,364],{"class":264},[220,6747,6225],{"class":420},[220,6749,359],{"class":264},[220,6751,6752,6754,6756,6758,6760,6762,6764,6766,6768,6770],{"class":222,"line":656},[220,6753,2550],{"class":264},[220,6755,2553],{"class":420},[220,6757,1588],{"class":226},[220,6759,353],{"class":260},[220,6761,2560],{"class":230},[220,6763,6202],{"class":226},[220,6765,353],{"class":260},[220,6767,743],{"class":264},[220,6769,6299],{"class":420},[220,6771,6302],{"class":264},[220,6773,6774,6776,6778],{"class":222,"line":673},[220,6775,2567],{"class":264},[220,6777,6225],{"class":420},[220,6779,359],{"class":264},[220,6781,6782,6784,6786],{"class":222,"line":682},[220,6783,402],{"class":264},[220,6785,347],{"class":420},[220,6787,359],{"class":264},[212,6789,6790],{"className":468,"code":6701,"language":469,"meta":178,"style":178},[99,6791,6792,6800,6808,6816,6820,6828,6836,6858,6866],{"__ignoreMap":178},[220,6793,6794,6796,6798],{"class":222,"line":223},[220,6795,343],{"class":264},[220,6797,347],{"class":420},[220,6799,359],{"class":264},[220,6801,6802,6804,6806],{"class":222,"line":179},[220,6803,1999],{"class":264},[220,6805,6718],{"class":609},[220,6807,749],{"class":264},[220,6809,6810,6812,6814],{"class":222,"line":389},[220,6811,364],{"class":264},[220,6813,367],{"class":420},[220,6815,386],{"class":264},[220,6817,6818],{"class":222,"line":399},[220,6819,647],{"emptyLinePlaceholder":194},[220,6821,6822,6824,6826],{"class":222,"line":644},[220,6823,1999],{"class":264},[220,6825,6739],{"class":609},[220,6827,749],{"class":264},[220,6829,6830,6832,6834],{"class":222,"line":650},[220,6831,364],{"class":264},[220,6833,6225],{"class":420},[220,6835,359],{"class":264},[220,6837,6838,6840,6842,6844,6846,6848,6850,6852,6854,6856],{"class":222,"line":656},[220,6839,2550],{"class":264},[220,6841,2553],{"class":420},[220,6843,1588],{"class":226},[220,6845,353],{"class":260},[220,6847,2560],{"class":230},[220,6849,6202],{"class":226},[220,6851,353],{"class":260},[220,6853,743],{"class":264},[220,6855,6299],{"class":420},[220,6857,6302],{"class":264},[220,6859,6860,6862,6864],{"class":222,"line":673},[220,6861,2567],{"class":264},[220,6863,6225],{"class":420},[220,6865,359],{"class":264},[220,6867,6868,6870,6872],{"class":222,"line":682},[220,6869,402],{"class":264},[220,6871,347],{"class":420},[220,6873,359],{"class":264},[212,6875,6876],{"className":468,"code":6701,"language":469,"meta":178,"style":178},[99,6877,6878,6886,6894,6902,6906,6914,6922,6944,6952],{"__ignoreMap":178},[220,6879,6880,6882,6884],{"class":222,"line":223},[220,6881,343],{"class":264},[220,6883,347],{"class":420},[220,6885,359],{"class":264},[220,6887,6888,6890,6892],{"class":222,"line":179},[220,6889,1999],{"class":264},[220,6891,6718],{"class":609},[220,6893,749],{"class":264},[220,6895,6896,6898,6900],{"class":222,"line":389},[220,6897,364],{"class":264},[220,6899,367],{"class":420},[220,6901,386],{"class":264},[220,6903,6904],{"class":222,"line":399},[220,6905,647],{"emptyLinePlaceholder":194},[220,6907,6908,6910,6912],{"class":222,"line":644},[220,6909,1999],{"class":264},[220,6911,6739],{"class":609},[220,6913,749],{"class":264},[220,6915,6916,6918,6920],{"class":222,"line":650},[220,6917,364],{"class":264},[220,6919,6225],{"class":420},[220,6921,359],{"class":264},[220,6923,6924,6926,6928,6930,6932,6934,6936,6938,6940,6942],{"class":222,"line":656},[220,6925,2550],{"class":264},[220,6927,2553],{"class":420},[220,6929,1588],{"class":226},[220,6931,353],{"class":260},[220,6933,2560],{"class":230},[220,6935,6202],{"class":226},[220,6937,353],{"class":260},[220,6939,743],{"class":264},[220,6941,6299],{"class":420},[220,6943,6302],{"class":264},[220,6945,6946,6948,6950],{"class":222,"line":673},[220,6947,2567],{"class":264},[220,6949,6225],{"class":420},[220,6951,359],{"class":264},[220,6953,6954,6956,6958],{"class":222,"line":682},[220,6955,402],{"class":264},[220,6957,347],{"class":420},[220,6959,359],{"class":264},[212,6961,6963],{"className":251,"code":6962,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F This gradient is NOT affected\n { type: 'LinearGradient', props: {} },\n \u002F\u002F 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",[99,6964,6965,6979,6983,6988,6996,7001,7010,7027,7032,7036],{"__ignoreMap":178},[220,6966,6967,6969,6971,6973,6975,6977],{"class":222,"line":223},[220,6968,1735],{"class":260},[220,6970,1738],{"class":420},[220,6972,1741],{"class":260},[220,6974,1744],{"class":260},[220,6976,1747],{"class":226},[220,6978,1750],{"class":264},[220,6980,6981],{"class":222,"line":179},[220,6982,1765],{"class":264},[220,6984,6985],{"class":222,"line":389},[220,6986,6987],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,6989,6990,6992,6994],{"class":222,"line":399},[220,6991,1770],{"class":264},[220,6993,2462],{"class":230},[220,6995,6548],{"class":264},[220,6997,6998],{"class":222,"line":644},[220,6999,7000],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,7002,7003,7005,7007],{"class":222,"line":650},[220,7004,1770],{"class":264},[220,7006,6583],{"class":230},[220,7008,7009],{"class":264},", props: {}, children: [\n",[220,7011,7012,7015,7017,7019,7021,7023,7025],{"class":222,"line":656},[220,7013,7014],{"class":264}," { type: ",[220,7016,3206],{"class":230},[220,7018,1776],{"class":264},[220,7020,3217],{"class":230},[220,7022,6566],{"class":264},[220,7024,6299],{"class":420},[220,7026,1782],{"class":264},[220,7028,7029],{"class":222,"line":673},[220,7030,7031],{"class":264}," ]}\n",[220,7033,7034],{"class":222,"line":682},[220,7035,1787],{"class":264},[220,7037,7038],{"class":222,"line":691},[220,7039,1792],{"class":264},[19,7041],{":preset":7042},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,7044,7045,7046,7048,7049,7051],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,7047,367],{},") don't accept children, whereas components that apply effects (such as ",[99,7050,6225],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,7053,7054,7157,7271,7381,7491],{":tabs":1557},[212,7055,7057],{"className":334,"code":7056,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- Unaffected -->\n \u003CLinearGradient \u002F>\n\n \u003C!-- Nested effects apply only to Circle -->\n \u003CGridDistortion radius=\"2\">\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" \u002F>\n \u003C\u002FGlassTiles>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,7058,7059,7067,7072,7080,7084,7089,7105,7113,7133,7141,7149],{"__ignoreMap":178},[220,7060,7061,7063,7065],{"class":222,"line":223},[220,7062,343],{"class":264},[220,7064,347],{"class":346},[220,7066,359],{"class":264},[220,7068,7069],{"class":222,"line":179},[220,7070,7071],{"class":609}," \u003C!-- Unaffected -->\n",[220,7073,7074,7076,7078],{"class":222,"line":389},[220,7075,364],{"class":264},[220,7077,367],{"class":346},[220,7079,386],{"class":264},[220,7081,7082],{"class":222,"line":399},[220,7083,647],{"emptyLinePlaceholder":194},[220,7085,7086],{"class":222,"line":644},[220,7087,7088],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,7090,7091,7093,7096,7098,7100,7103],{"class":222,"line":650},[220,7092,364],{"class":264},[220,7094,7095],{"class":346},"GridDistortion",[220,7097,6202],{"class":226},[220,7099,353],{"class":264},[220,7101,7102],{"class":230},"\"2\"",[220,7104,359],{"class":264},[220,7106,7107,7109,7111],{"class":222,"line":656},[220,7108,2550],{"class":264},[220,7110,6225],{"class":346},[220,7112,359],{"class":264},[220,7114,7115,7117,7119,7121,7123,7125,7127,7129,7131],{"class":222,"line":673},[220,7116,2813],{"class":264},[220,7118,2553],{"class":346},[220,7120,1588],{"class":226},[220,7122,353],{"class":264},[220,7124,2560],{"class":230},[220,7126,6202],{"class":226},[220,7128,353],{"class":264},[220,7130,6207],{"class":230},[220,7132,386],{"class":264},[220,7134,7135,7137,7139],{"class":222,"line":682},[220,7136,2828],{"class":264},[220,7138,6225],{"class":346},[220,7140,359],{"class":264},[220,7142,7143,7145,7147],{"class":222,"line":691},[220,7144,2567],{"class":264},[220,7146,7095],{"class":346},[220,7148,359],{"class":264},[220,7150,7151,7153,7155],{"class":222,"line":696},[220,7152,402],{"class":264},[220,7154,347],{"class":346},[220,7156,359],{"class":264},[212,7158,7160],{"className":409,"code":7159,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* Unaffected *\u002F}\n \u003CLinearGradient \u002F>\n\n {\u002F* Nested effects apply only to Circle *\u002F}\n \u003CGridDistortion radius={2}>\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} \u002F>\n \u003C\u002FGlassTiles>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,7161,7162,7170,7179,7187,7191,7200,7217,7225,7247,7255,7263],{"__ignoreMap":178},[220,7163,7164,7166,7168],{"class":222,"line":223},[220,7165,343],{"class":264},[220,7167,347],{"class":420},[220,7169,359],{"class":264},[220,7171,7172,7174,7177],{"class":222,"line":179},[220,7173,1999],{"class":264},[220,7175,7176],{"class":609},"\u002F* Unaffected *\u002F",[220,7178,749],{"class":264},[220,7180,7181,7183,7185],{"class":222,"line":389},[220,7182,364],{"class":264},[220,7184,367],{"class":420},[220,7186,386],{"class":264},[220,7188,7189],{"class":222,"line":399},[220,7190,647],{"emptyLinePlaceholder":194},[220,7192,7193,7195,7198],{"class":222,"line":644},[220,7194,1999],{"class":264},[220,7196,7197],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,7199,749],{"class":264},[220,7201,7202,7204,7206,7208,7210,7212,7215],{"class":222,"line":650},[220,7203,364],{"class":264},[220,7205,7095],{"class":420},[220,7207,6202],{"class":226},[220,7209,353],{"class":260},[220,7211,743],{"class":264},[220,7213,7214],{"class":420},"2",[220,7216,2335],{"class":264},[220,7218,7219,7221,7223],{"class":222,"line":656},[220,7220,2550],{"class":264},[220,7222,6225],{"class":420},[220,7224,359],{"class":264},[220,7226,7227,7229,7231,7233,7235,7237,7239,7241,7243,7245],{"class":222,"line":673},[220,7228,2813],{"class":264},[220,7230,2553],{"class":420},[220,7232,1588],{"class":226},[220,7234,353],{"class":260},[220,7236,2560],{"class":230},[220,7238,6202],{"class":226},[220,7240,353],{"class":260},[220,7242,743],{"class":264},[220,7244,6299],{"class":420},[220,7246,6302],{"class":264},[220,7248,7249,7251,7253],{"class":222,"line":682},[220,7250,2828],{"class":264},[220,7252,6225],{"class":420},[220,7254,359],{"class":264},[220,7256,7257,7259,7261],{"class":222,"line":691},[220,7258,2567],{"class":264},[220,7260,7095],{"class":420},[220,7262,359],{"class":264},[220,7264,7265,7267,7269],{"class":222,"line":696},[220,7266,402],{"class":264},[220,7268,347],{"class":420},[220,7270,359],{"class":264},[212,7272,7273],{"className":468,"code":7159,"language":469,"meta":178,"style":178},[99,7274,7275,7283,7291,7299,7303,7311,7327,7335,7357,7365,7373],{"__ignoreMap":178},[220,7276,7277,7279,7281],{"class":222,"line":223},[220,7278,343],{"class":264},[220,7280,347],{"class":420},[220,7282,359],{"class":264},[220,7284,7285,7287,7289],{"class":222,"line":179},[220,7286,1999],{"class":264},[220,7288,7176],{"class":609},[220,7290,749],{"class":264},[220,7292,7293,7295,7297],{"class":222,"line":389},[220,7294,364],{"class":264},[220,7296,367],{"class":420},[220,7298,386],{"class":264},[220,7300,7301],{"class":222,"line":399},[220,7302,647],{"emptyLinePlaceholder":194},[220,7304,7305,7307,7309],{"class":222,"line":644},[220,7306,1999],{"class":264},[220,7308,7197],{"class":609},[220,7310,749],{"class":264},[220,7312,7313,7315,7317,7319,7321,7323,7325],{"class":222,"line":650},[220,7314,364],{"class":264},[220,7316,7095],{"class":420},[220,7318,6202],{"class":226},[220,7320,353],{"class":260},[220,7322,743],{"class":264},[220,7324,7214],{"class":420},[220,7326,2335],{"class":264},[220,7328,7329,7331,7333],{"class":222,"line":656},[220,7330,2550],{"class":264},[220,7332,6225],{"class":420},[220,7334,359],{"class":264},[220,7336,7337,7339,7341,7343,7345,7347,7349,7351,7353,7355],{"class":222,"line":673},[220,7338,2813],{"class":264},[220,7340,2553],{"class":420},[220,7342,1588],{"class":226},[220,7344,353],{"class":260},[220,7346,2560],{"class":230},[220,7348,6202],{"class":226},[220,7350,353],{"class":260},[220,7352,743],{"class":264},[220,7354,6299],{"class":420},[220,7356,6302],{"class":264},[220,7358,7359,7361,7363],{"class":222,"line":682},[220,7360,2828],{"class":264},[220,7362,6225],{"class":420},[220,7364,359],{"class":264},[220,7366,7367,7369,7371],{"class":222,"line":691},[220,7368,2567],{"class":264},[220,7370,7095],{"class":420},[220,7372,359],{"class":264},[220,7374,7375,7377,7379],{"class":222,"line":696},[220,7376,402],{"class":264},[220,7378,347],{"class":420},[220,7380,359],{"class":264},[212,7382,7383],{"className":468,"code":7159,"language":469,"meta":178,"style":178},[99,7384,7385,7393,7401,7409,7413,7421,7437,7445,7467,7475,7483],{"__ignoreMap":178},[220,7386,7387,7389,7391],{"class":222,"line":223},[220,7388,343],{"class":264},[220,7390,347],{"class":420},[220,7392,359],{"class":264},[220,7394,7395,7397,7399],{"class":222,"line":179},[220,7396,1999],{"class":264},[220,7398,7176],{"class":609},[220,7400,749],{"class":264},[220,7402,7403,7405,7407],{"class":222,"line":389},[220,7404,364],{"class":264},[220,7406,367],{"class":420},[220,7408,386],{"class":264},[220,7410,7411],{"class":222,"line":399},[220,7412,647],{"emptyLinePlaceholder":194},[220,7414,7415,7417,7419],{"class":222,"line":644},[220,7416,1999],{"class":264},[220,7418,7197],{"class":609},[220,7420,749],{"class":264},[220,7422,7423,7425,7427,7429,7431,7433,7435],{"class":222,"line":650},[220,7424,364],{"class":264},[220,7426,7095],{"class":420},[220,7428,6202],{"class":226},[220,7430,353],{"class":260},[220,7432,743],{"class":264},[220,7434,7214],{"class":420},[220,7436,2335],{"class":264},[220,7438,7439,7441,7443],{"class":222,"line":656},[220,7440,2550],{"class":264},[220,7442,6225],{"class":420},[220,7444,359],{"class":264},[220,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463,7465],{"class":222,"line":673},[220,7448,2813],{"class":264},[220,7450,2553],{"class":420},[220,7452,1588],{"class":226},[220,7454,353],{"class":260},[220,7456,2560],{"class":230},[220,7458,6202],{"class":226},[220,7460,353],{"class":260},[220,7462,743],{"class":264},[220,7464,6299],{"class":420},[220,7466,6302],{"class":264},[220,7468,7469,7471,7473],{"class":222,"line":682},[220,7470,2828],{"class":264},[220,7472,6225],{"class":420},[220,7474,359],{"class":264},[220,7476,7477,7479,7481],{"class":222,"line":691},[220,7478,2567],{"class":264},[220,7480,7095],{"class":420},[220,7482,359],{"class":264},[220,7484,7485,7487,7489],{"class":222,"line":696},[220,7486,402],{"class":264},[220,7488,347],{"class":420},[220,7490,359],{"class":264},[212,7492,7494],{"className":251,"code":7493,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n \u002F\u002F Unaffected\n { type: 'LinearGradient', props: {} },\n \u002F\u002F 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",[99,7495,7496,7510,7514,7519,7527,7532,7547,7555,7572,7577,7581,7585],{"__ignoreMap":178},[220,7497,7498,7500,7502,7504,7506,7508],{"class":222,"line":223},[220,7499,1735],{"class":260},[220,7501,1738],{"class":420},[220,7503,1741],{"class":260},[220,7505,1744],{"class":260},[220,7507,1747],{"class":226},[220,7509,1750],{"class":264},[220,7511,7512],{"class":222,"line":179},[220,7513,1765],{"class":264},[220,7515,7516],{"class":222,"line":389},[220,7517,7518],{"class":609}," \u002F\u002F Unaffected\n",[220,7520,7521,7523,7525],{"class":222,"line":399},[220,7522,1770],{"class":264},[220,7524,2462],{"class":230},[220,7526,6548],{"class":264},[220,7528,7529],{"class":222,"line":644},[220,7530,7531],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,7533,7534,7536,7539,7542,7544],{"class":222,"line":650},[220,7535,1770],{"class":264},[220,7537,7538],{"class":230},"'GridDistortion'",[220,7540,7541],{"class":264},", props: { radius: ",[220,7543,7214],{"class":420},[220,7545,7546],{"class":264}," }, children: [\n",[220,7548,7549,7551,7553],{"class":222,"line":656},[220,7550,7014],{"class":264},[220,7552,6583],{"class":230},[220,7554,7009],{"class":264},[220,7556,7557,7560,7562,7564,7566,7568,7570],{"class":222,"line":673},[220,7558,7559],{"class":264}," { type: ",[220,7561,3206],{"class":230},[220,7563,1776],{"class":264},[220,7565,3217],{"class":230},[220,7567,6566],{"class":264},[220,7569,6299],{"class":420},[220,7571,1782],{"class":264},[220,7573,7574],{"class":222,"line":682},[220,7575,7576],{"class":264}," ]}\n",[220,7578,7579],{"class":222,"line":691},[220,7580,7031],{"class":264},[220,7582,7583],{"class":222,"line":696},[220,7584,1787],{"class":264},[220,7586,7587],{"class":222,"line":702},[220,7588,1792],{"class":264},[19,7590],{":preset":7591},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,7593,7594],{},"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":178,"searchDepth":179,"depth":179,"links":7596},[7597,7598],{"id":6142,"depth":179,"text":6143},{"id":6599,"depth":179,"text":6600},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":7599},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":7606,"title":7607,"body":7608,"category":10232,"description":10233,"exclude":190,"extension":191,"forceFramework":190,"icon":10234,"meta":10235,"navigation":194,"path":10236,"seo":10237,"stem":10238,"__hash__":10239},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":7609,"toc":10222},[7610,7613,7616,7620,7631,7974,7977,7982,8077,8081,8084,8659,8662,8665,8679,8994,8997,9000,9004,9015,9036,9047,9051,9066,9072,9481,9484,9489,9493,9500,9534,10217,10220],[11,7611,7607],{"id":7612},"blending-masking",[15,7614,7615],{},"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,7617,7619],{"id":7618},"blend-modes","Blend Modes",[15,7621,7622,7623,7626,7627,7630],{},"Every component has a ",[99,7624,7625],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,7628,7629],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,7632,7633,7700,7773,7843,7913],{":tabs":1557},[212,7634,7636],{"className":334,"code":7635,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003C!-- Multiply darkens by multiplying colors -->\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" blendMode=\"multiply\" \u002F>\n\u003C\u002FShader>\n",[99,7637,7638,7646,7654,7658,7663,7692],{"__ignoreMap":178},[220,7639,7640,7642,7644],{"class":222,"line":223},[220,7641,343],{"class":264},[220,7643,347],{"class":346},[220,7645,359],{"class":264},[220,7647,7648,7650,7652],{"class":222,"line":179},[220,7649,364],{"class":264},[220,7651,367],{"class":346},[220,7653,386],{"class":264},[220,7655,7656],{"class":222,"line":389},[220,7657,647],{"emptyLinePlaceholder":194},[220,7659,7660],{"class":222,"line":399},[220,7661,7662],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,7664,7665,7667,7669,7671,7673,7675,7677,7679,7682,7685,7687,7690],{"class":222,"line":644},[220,7666,364],{"class":264},[220,7668,2553],{"class":346},[220,7670,1588],{"class":226},[220,7672,353],{"class":264},[220,7674,2560],{"class":230},[220,7676,6202],{"class":226},[220,7678,353],{"class":264},[220,7680,7681],{"class":230},"\"0.5\"",[220,7683,7684],{"class":226}," blendMode",[220,7686,353],{"class":264},[220,7688,7689],{"class":230},"\"multiply\"",[220,7691,386],{"class":264},[220,7693,7694,7696,7698],{"class":222,"line":650},[220,7695,402],{"class":264},[220,7697,347],{"class":346},[220,7699,359],{"class":264},[212,7701,7703],{"className":409,"code":7702,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n {\u002F* Multiply darkens by multiplying colors *\u002F}\n \u003CCircle color=\"#ff0088\" radius={0.5} blendMode=\"multiply\" \u002F>\n\u003C\u002FShader>\n",[99,7704,7705,7713,7721,7725,7734,7765],{"__ignoreMap":178},[220,7706,7707,7709,7711],{"class":222,"line":223},[220,7708,343],{"class":264},[220,7710,347],{"class":420},[220,7712,359],{"class":264},[220,7714,7715,7717,7719],{"class":222,"line":179},[220,7716,364],{"class":264},[220,7718,367],{"class":420},[220,7720,386],{"class":264},[220,7722,7723],{"class":222,"line":389},[220,7724,647],{"emptyLinePlaceholder":194},[220,7726,7727,7729,7732],{"class":222,"line":399},[220,7728,1999],{"class":264},[220,7730,7731],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,7733,749],{"class":264},[220,7735,7736,7738,7740,7742,7744,7746,7748,7750,7752,7755,7757,7759,7761,7763],{"class":222,"line":644},[220,7737,364],{"class":264},[220,7739,2553],{"class":420},[220,7741,1588],{"class":226},[220,7743,353],{"class":260},[220,7745,2560],{"class":230},[220,7747,6202],{"class":226},[220,7749,353],{"class":260},[220,7751,743],{"class":264},[220,7753,7754],{"class":420},"0.5",[220,7756,2914],{"class":264},[220,7758,7625],{"class":226},[220,7760,353],{"class":260},[220,7762,7689],{"class":230},[220,7764,386],{"class":264},[220,7766,7767,7769,7771],{"class":222,"line":650},[220,7768,402],{"class":264},[220,7770,347],{"class":420},[220,7772,359],{"class":264},[212,7774,7775],{"className":468,"code":7702,"language":469,"meta":178,"style":178},[99,7776,7777,7785,7793,7797,7805,7835],{"__ignoreMap":178},[220,7778,7779,7781,7783],{"class":222,"line":223},[220,7780,343],{"class":264},[220,7782,347],{"class":420},[220,7784,359],{"class":264},[220,7786,7787,7789,7791],{"class":222,"line":179},[220,7788,364],{"class":264},[220,7790,367],{"class":420},[220,7792,386],{"class":264},[220,7794,7795],{"class":222,"line":389},[220,7796,647],{"emptyLinePlaceholder":194},[220,7798,7799,7801,7803],{"class":222,"line":399},[220,7800,1999],{"class":264},[220,7802,7731],{"class":609},[220,7804,749],{"class":264},[220,7806,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7829,7831,7833],{"class":222,"line":644},[220,7808,364],{"class":264},[220,7810,2553],{"class":420},[220,7812,1588],{"class":226},[220,7814,353],{"class":260},[220,7816,2560],{"class":230},[220,7818,6202],{"class":226},[220,7820,353],{"class":260},[220,7822,743],{"class":264},[220,7824,7754],{"class":420},[220,7826,2914],{"class":264},[220,7828,7625],{"class":226},[220,7830,353],{"class":260},[220,7832,7689],{"class":230},[220,7834,386],{"class":264},[220,7836,7837,7839,7841],{"class":222,"line":650},[220,7838,402],{"class":264},[220,7840,347],{"class":420},[220,7842,359],{"class":264},[212,7844,7845],{"className":468,"code":7702,"language":469,"meta":178,"style":178},[99,7846,7847,7855,7863,7867,7875,7905],{"__ignoreMap":178},[220,7848,7849,7851,7853],{"class":222,"line":223},[220,7850,343],{"class":264},[220,7852,347],{"class":420},[220,7854,359],{"class":264},[220,7856,7857,7859,7861],{"class":222,"line":179},[220,7858,364],{"class":264},[220,7860,367],{"class":420},[220,7862,386],{"class":264},[220,7864,7865],{"class":222,"line":389},[220,7866,647],{"emptyLinePlaceholder":194},[220,7868,7869,7871,7873],{"class":222,"line":399},[220,7870,1999],{"class":264},[220,7872,7731],{"class":609},[220,7874,749],{"class":264},[220,7876,7877,7879,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903],{"class":222,"line":644},[220,7878,364],{"class":264},[220,7880,2553],{"class":420},[220,7882,1588],{"class":226},[220,7884,353],{"class":260},[220,7886,2560],{"class":230},[220,7888,6202],{"class":226},[220,7890,353],{"class":260},[220,7892,743],{"class":264},[220,7894,7754],{"class":420},[220,7896,2914],{"class":264},[220,7898,7625],{"class":226},[220,7900,353],{"class":260},[220,7902,7689],{"class":230},[220,7904,386],{"class":264},[220,7906,7907,7909,7911],{"class":222,"line":650},[220,7908,402],{"class":264},[220,7910,347],{"class":420},[220,7912,359],{"class":264},[212,7914,7916],{"className":251,"code":7915,"language":253,"meta":178,"style":178},"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",[99,7917,7918,7932,7936,7944,7966,7970],{"__ignoreMap":178},[220,7919,7920,7922,7924,7926,7928,7930],{"class":222,"line":223},[220,7921,1735],{"class":260},[220,7923,1738],{"class":420},[220,7925,1741],{"class":260},[220,7927,1744],{"class":260},[220,7929,1747],{"class":226},[220,7931,1750],{"class":264},[220,7933,7934],{"class":222,"line":179},[220,7935,1765],{"class":264},[220,7937,7938,7940,7942],{"class":222,"line":389},[220,7939,1770],{"class":264},[220,7941,2462],{"class":230},[220,7943,6548],{"class":264},[220,7945,7946,7948,7950,7952,7954,7956,7958,7961,7964],{"class":222,"line":399},[220,7947,1770],{"class":264},[220,7949,3206],{"class":230},[220,7951,1776],{"class":264},[220,7953,3217],{"class":230},[220,7955,6566],{"class":264},[220,7957,7754],{"class":420},[220,7959,7960],{"class":264},", blendMode: ",[220,7962,7963],{"class":230},"'multiply'",[220,7965,1782],{"class":264},[220,7967,7968],{"class":222,"line":644},[220,7969,1787],{"class":264},[220,7971,7972],{"class":222,"line":650},[220,7973,1792],{"class":264},[19,7975],{":preset":7976},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,7978,7979],{},[159,7980,7981],{},"Available blend modes:",[34,7983,7984,7991,8008,8024,8038,8049,8066],{},[37,7985,7986,4601,7989],{},[159,7987,7988],{},"Basic",[99,7990,7629],{},[37,7992,7993,4601,7996,1895,7999,1895,8002,1895,8005],{},[159,7994,7995],{},"Darkening",[99,7997,7998],{},"multiply",[99,8000,8001],{},"darken",[99,8003,8004],{},"colorBurn",[99,8006,8007],{},"linearBurn",[37,8009,8010,4601,8013,1895,8016,1895,8019,1895,8022],{},[159,8011,8012],{},"Lightening",[99,8014,8015],{},"screen",[99,8017,8018],{},"lighten",[99,8020,8021],{},"colorDodge",[99,8023,1924],{},[37,8025,8026,4601,8029,1895,8032,1895,8035],{},[159,8027,8028],{},"Contrast",[99,8030,8031],{},"overlay",[99,8033,8034],{},"softLight",[99,8036,8037],{},"hardLight",[37,8039,8040,4601,8043,1895,8046],{},[159,8041,8042],{},"Difference",[99,8044,8045],{},"difference",[99,8047,8048],{},"exclusion",[37,8050,8051,4601,8054,1895,8057,1895,8060,1895,8063],{},[159,8052,8053],{},"Color",[99,8055,8056],{},"hue",[99,8058,8059],{},"saturation",[99,8061,8062],{},"color",[99,8064,8065],{},"luminosity",[37,8067,8068,4601,8071,1895,8074],{},[159,8069,8070],{},"Color Space Blending",[99,8072,8073],{},"normal-oklab",[99,8075,8076],{},"normal-oklch",[3262,8078,8080],{"id":8079},"combining-blend-modes","Combining Blend Modes",[15,8082,8083],{},"Use different blend modes on multiple layers to create complex interactions:",[246,8085,8086,8191,8318,8438,8558],{":tabs":1557},[212,8087,8089],{"className":334,"code":8088,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#00ffff\" radius=\"0.6\" :center=\"{ x: 0.4, y: 0.5 }\" blendMode=\"screen\" \u002F>\n \u003CCircle color=\"#ff00ff\" radius=\"0.6\" :center=\"{ x: 0.6, y: 0.5 }\" blendMode=\"difference\" \u002F>\n\u003C\u002FShader>\n",[99,8090,8091,8099,8107,8111,8148,8183],{"__ignoreMap":178},[220,8092,8093,8095,8097],{"class":222,"line":223},[220,8094,343],{"class":264},[220,8096,347],{"class":346},[220,8098,359],{"class":264},[220,8100,8101,8103,8105],{"class":222,"line":179},[220,8102,364],{"class":264},[220,8104,367],{"class":346},[220,8106,386],{"class":264},[220,8108,8109],{"class":222,"line":389},[220,8110,647],{"emptyLinePlaceholder":194},[220,8112,8113,8115,8117,8119,8121,8124,8126,8128,8131,8134,8136,8139,8141,8143,8146],{"class":222,"line":399},[220,8114,364],{"class":264},[220,8116,2553],{"class":346},[220,8118,1588],{"class":226},[220,8120,353],{"class":264},[220,8122,8123],{"class":230},"\"#00ffff\"",[220,8125,6202],{"class":226},[220,8127,353],{"class":264},[220,8129,8130],{"class":230},"\"0.6\"",[220,8132,8133],{"class":226}," :center",[220,8135,353],{"class":264},[220,8137,8138],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,8140,7684],{"class":226},[220,8142,353],{"class":264},[220,8144,8145],{"class":230},"\"screen\"",[220,8147,386],{"class":264},[220,8149,8150,8152,8154,8156,8158,8161,8163,8165,8167,8169,8171,8174,8176,8178,8181],{"class":222,"line":644},[220,8151,364],{"class":264},[220,8153,2553],{"class":346},[220,8155,1588],{"class":226},[220,8157,353],{"class":264},[220,8159,8160],{"class":230},"\"#ff00ff\"",[220,8162,6202],{"class":226},[220,8164,353],{"class":264},[220,8166,8130],{"class":230},[220,8168,8133],{"class":226},[220,8170,353],{"class":264},[220,8172,8173],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,8175,7684],{"class":226},[220,8177,353],{"class":264},[220,8179,8180],{"class":230},"\"difference\"",[220,8182,386],{"class":264},[220,8184,8185,8187,8189],{"class":222,"line":650},[220,8186,402],{"class":264},[220,8188,347],{"class":346},[220,8190,359],{"class":264},[212,8192,8194],{"className":409,"code":8193,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#00ffff\" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode=\"screen\" \u002F>\n \u003CCircle color=\"#ff00ff\" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode=\"difference\" \u002F>\n\u003C\u002FShader>\n",[99,8195,8196,8204,8212,8216,8266,8310],{"__ignoreMap":178},[220,8197,8198,8200,8202],{"class":222,"line":223},[220,8199,343],{"class":264},[220,8201,347],{"class":420},[220,8203,359],{"class":264},[220,8205,8206,8208,8210],{"class":222,"line":179},[220,8207,364],{"class":264},[220,8209,367],{"class":420},[220,8211,386],{"class":264},[220,8213,8214],{"class":222,"line":389},[220,8215,647],{"emptyLinePlaceholder":194},[220,8217,8218,8220,8222,8224,8226,8228,8230,8232,8234,8237,8239,8242,8244,8247,8250,8253,8255,8258,8260,8262,8264],{"class":222,"line":399},[220,8219,364],{"class":264},[220,8221,2553],{"class":420},[220,8223,1588],{"class":226},[220,8225,353],{"class":260},[220,8227,8123],{"class":230},[220,8229,6202],{"class":226},[220,8231,353],{"class":260},[220,8233,743],{"class":264},[220,8235,8236],{"class":420},"0.6",[220,8238,2914],{"class":264},[220,8240,8241],{"class":226},"center",[220,8243,353],{"class":260},[220,8245,8246],{"class":264},"{{ x: ",[220,8248,8249],{"class":420},"0.4",[220,8251,8252],{"class":264},", y: ",[220,8254,7754],{"class":420},[220,8256,8257],{"class":264}," }} ",[220,8259,7625],{"class":226},[220,8261,353],{"class":260},[220,8263,8145],{"class":230},[220,8265,386],{"class":264},[220,8267,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290,8292,8294,8296,8298,8300,8302,8304,8306,8308],{"class":222,"line":644},[220,8269,364],{"class":264},[220,8271,2553],{"class":420},[220,8273,1588],{"class":226},[220,8275,353],{"class":260},[220,8277,8160],{"class":230},[220,8279,6202],{"class":226},[220,8281,353],{"class":260},[220,8283,743],{"class":264},[220,8285,8236],{"class":420},[220,8287,2914],{"class":264},[220,8289,8241],{"class":226},[220,8291,353],{"class":260},[220,8293,8246],{"class":264},[220,8295,8236],{"class":420},[220,8297,8252],{"class":264},[220,8299,7754],{"class":420},[220,8301,8257],{"class":264},[220,8303,7625],{"class":226},[220,8305,353],{"class":260},[220,8307,8180],{"class":230},[220,8309,386],{"class":264},[220,8311,8312,8314,8316],{"class":222,"line":650},[220,8313,402],{"class":264},[220,8315,347],{"class":420},[220,8317,359],{"class":264},[212,8319,8320],{"className":468,"code":8193,"language":469,"meta":178,"style":178},[99,8321,8322,8330,8338,8342,8386,8430],{"__ignoreMap":178},[220,8323,8324,8326,8328],{"class":222,"line":223},[220,8325,343],{"class":264},[220,8327,347],{"class":420},[220,8329,359],{"class":264},[220,8331,8332,8334,8336],{"class":222,"line":179},[220,8333,364],{"class":264},[220,8335,367],{"class":420},[220,8337,386],{"class":264},[220,8339,8340],{"class":222,"line":389},[220,8341,647],{"emptyLinePlaceholder":194},[220,8343,8344,8346,8348,8350,8352,8354,8356,8358,8360,8362,8364,8366,8368,8370,8372,8374,8376,8378,8380,8382,8384],{"class":222,"line":399},[220,8345,364],{"class":264},[220,8347,2553],{"class":420},[220,8349,1588],{"class":226},[220,8351,353],{"class":260},[220,8353,8123],{"class":230},[220,8355,6202],{"class":226},[220,8357,353],{"class":260},[220,8359,743],{"class":264},[220,8361,8236],{"class":420},[220,8363,2914],{"class":264},[220,8365,8241],{"class":226},[220,8367,353],{"class":260},[220,8369,8246],{"class":264},[220,8371,8249],{"class":420},[220,8373,8252],{"class":264},[220,8375,7754],{"class":420},[220,8377,8257],{"class":264},[220,8379,7625],{"class":226},[220,8381,353],{"class":260},[220,8383,8145],{"class":230},[220,8385,386],{"class":264},[220,8387,8388,8390,8392,8394,8396,8398,8400,8402,8404,8406,8408,8410,8412,8414,8416,8418,8420,8422,8424,8426,8428],{"class":222,"line":644},[220,8389,364],{"class":264},[220,8391,2553],{"class":420},[220,8393,1588],{"class":226},[220,8395,353],{"class":260},[220,8397,8160],{"class":230},[220,8399,6202],{"class":226},[220,8401,353],{"class":260},[220,8403,743],{"class":264},[220,8405,8236],{"class":420},[220,8407,2914],{"class":264},[220,8409,8241],{"class":226},[220,8411,353],{"class":260},[220,8413,8246],{"class":264},[220,8415,8236],{"class":420},[220,8417,8252],{"class":264},[220,8419,7754],{"class":420},[220,8421,8257],{"class":264},[220,8423,7625],{"class":226},[220,8425,353],{"class":260},[220,8427,8180],{"class":230},[220,8429,386],{"class":264},[220,8431,8432,8434,8436],{"class":222,"line":650},[220,8433,402],{"class":264},[220,8435,347],{"class":420},[220,8437,359],{"class":264},[212,8439,8440],{"className":468,"code":8193,"language":469,"meta":178,"style":178},[99,8441,8442,8450,8458,8462,8506,8550],{"__ignoreMap":178},[220,8443,8444,8446,8448],{"class":222,"line":223},[220,8445,343],{"class":264},[220,8447,347],{"class":420},[220,8449,359],{"class":264},[220,8451,8452,8454,8456],{"class":222,"line":179},[220,8453,364],{"class":264},[220,8455,367],{"class":420},[220,8457,386],{"class":264},[220,8459,8460],{"class":222,"line":389},[220,8461,647],{"emptyLinePlaceholder":194},[220,8463,8464,8466,8468,8470,8472,8474,8476,8478,8480,8482,8484,8486,8488,8490,8492,8494,8496,8498,8500,8502,8504],{"class":222,"line":399},[220,8465,364],{"class":264},[220,8467,2553],{"class":420},[220,8469,1588],{"class":226},[220,8471,353],{"class":260},[220,8473,8123],{"class":230},[220,8475,6202],{"class":226},[220,8477,353],{"class":260},[220,8479,743],{"class":264},[220,8481,8236],{"class":420},[220,8483,2914],{"class":264},[220,8485,8241],{"class":226},[220,8487,353],{"class":260},[220,8489,8246],{"class":264},[220,8491,8249],{"class":420},[220,8493,8252],{"class":264},[220,8495,7754],{"class":420},[220,8497,8257],{"class":264},[220,8499,7625],{"class":226},[220,8501,353],{"class":260},[220,8503,8145],{"class":230},[220,8505,386],{"class":264},[220,8507,8508,8510,8512,8514,8516,8518,8520,8522,8524,8526,8528,8530,8532,8534,8536,8538,8540,8542,8544,8546,8548],{"class":222,"line":644},[220,8509,364],{"class":264},[220,8511,2553],{"class":420},[220,8513,1588],{"class":226},[220,8515,353],{"class":260},[220,8517,8160],{"class":230},[220,8519,6202],{"class":226},[220,8521,353],{"class":260},[220,8523,743],{"class":264},[220,8525,8236],{"class":420},[220,8527,2914],{"class":264},[220,8529,8241],{"class":226},[220,8531,353],{"class":260},[220,8533,8246],{"class":264},[220,8535,8236],{"class":420},[220,8537,8252],{"class":264},[220,8539,7754],{"class":420},[220,8541,8257],{"class":264},[220,8543,7625],{"class":226},[220,8545,353],{"class":260},[220,8547,8180],{"class":230},[220,8549,386],{"class":264},[220,8551,8552,8554,8556],{"class":222,"line":650},[220,8553,402],{"class":264},[220,8555,347],{"class":420},[220,8557,359],{"class":264},[212,8559,8561],{"className":251,"code":8560,"language":253,"meta":178,"style":178},"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",[99,8562,8563,8577,8581,8589,8621,8651,8655],{"__ignoreMap":178},[220,8564,8565,8567,8569,8571,8573,8575],{"class":222,"line":223},[220,8566,1735],{"class":260},[220,8568,1738],{"class":420},[220,8570,1741],{"class":260},[220,8572,1744],{"class":260},[220,8574,1747],{"class":226},[220,8576,1750],{"class":264},[220,8578,8579],{"class":222,"line":179},[220,8580,1765],{"class":264},[220,8582,8583,8585,8587],{"class":222,"line":389},[220,8584,1770],{"class":264},[220,8586,2462],{"class":230},[220,8588,6548],{"class":264},[220,8590,8591,8593,8595,8597,8600,8602,8604,8607,8609,8611,8613,8616,8619],{"class":222,"line":399},[220,8592,1770],{"class":264},[220,8594,3206],{"class":230},[220,8596,1776],{"class":264},[220,8598,8599],{"class":230},"'#00ffff'",[220,8601,6566],{"class":264},[220,8603,8236],{"class":420},[220,8605,8606],{"class":264},", center: { x: ",[220,8608,8249],{"class":420},[220,8610,8252],{"class":264},[220,8612,7754],{"class":420},[220,8614,8615],{"class":264}," }, blendMode: ",[220,8617,8618],{"class":230},"'screen'",[220,8620,6571],{"class":264},[220,8622,8623,8625,8627,8629,8632,8634,8636,8638,8640,8642,8644,8646,8649],{"class":222,"line":644},[220,8624,1770],{"class":264},[220,8626,3206],{"class":230},[220,8628,1776],{"class":264},[220,8630,8631],{"class":230},"'#ff00ff'",[220,8633,6566],{"class":264},[220,8635,8236],{"class":420},[220,8637,8606],{"class":264},[220,8639,8236],{"class":420},[220,8641,8252],{"class":264},[220,8643,7754],{"class":420},[220,8645,8615],{"class":264},[220,8647,8648],{"class":230},"'difference'",[220,8650,1782],{"class":264},[220,8652,8653],{"class":222,"line":650},[220,8654,1787],{"class":264},[220,8656,8657],{"class":222,"line":656},[220,8658,1792],{"class":264},[19,8660],{":preset":8661},"{\"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,8663,8664],{"id":2921},"Opacity",[15,8666,8667,8668,8670,8671,8674,8675,8678],{},"Control layer transparency with the ",[99,8669,2921],{}," prop. Values range from ",[99,8672,8673],{},"0"," (fully transparent) to ",[99,8676,8677],{},"1"," (fully opaque):",[246,8680,8681,8741,8806,8870,8934],{":tabs":1557},[212,8682,8684],{"className":334,"code":8683,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" opacity=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,8685,8686,8694,8702,8706,8733],{"__ignoreMap":178},[220,8687,8688,8690,8692],{"class":222,"line":223},[220,8689,343],{"class":264},[220,8691,347],{"class":346},[220,8693,359],{"class":264},[220,8695,8696,8698,8700],{"class":222,"line":179},[220,8697,364],{"class":264},[220,8699,367],{"class":346},[220,8701,386],{"class":264},[220,8703,8704],{"class":222,"line":389},[220,8705,647],{"emptyLinePlaceholder":194},[220,8707,8708,8710,8712,8714,8716,8718,8720,8722,8724,8727,8729,8731],{"class":222,"line":399},[220,8709,364],{"class":264},[220,8711,2553],{"class":346},[220,8713,1588],{"class":226},[220,8715,353],{"class":264},[220,8717,2560],{"class":230},[220,8719,6202],{"class":226},[220,8721,353],{"class":264},[220,8723,6207],{"class":230},[220,8725,8726],{"class":226}," opacity",[220,8728,353],{"class":264},[220,8730,7681],{"class":230},[220,8732,386],{"class":264},[220,8734,8735,8737,8739],{"class":222,"line":644},[220,8736,402],{"class":264},[220,8738,347],{"class":346},[220,8740,359],{"class":264},[212,8742,8744],{"className":409,"code":8743,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003CCircle color=\"#ff0088\" radius={0.8} opacity={0.5} \u002F>\n\u003C\u002FShader>\n",[99,8745,8746,8754,8762,8766,8798],{"__ignoreMap":178},[220,8747,8748,8750,8752],{"class":222,"line":223},[220,8749,343],{"class":264},[220,8751,347],{"class":420},[220,8753,359],{"class":264},[220,8755,8756,8758,8760],{"class":222,"line":179},[220,8757,364],{"class":264},[220,8759,367],{"class":420},[220,8761,386],{"class":264},[220,8763,8764],{"class":222,"line":389},[220,8765,647],{"emptyLinePlaceholder":194},[220,8767,8768,8770,8772,8774,8776,8778,8780,8782,8784,8786,8788,8790,8792,8794,8796],{"class":222,"line":399},[220,8769,364],{"class":264},[220,8771,2553],{"class":420},[220,8773,1588],{"class":226},[220,8775,353],{"class":260},[220,8777,2560],{"class":230},[220,8779,6202],{"class":226},[220,8781,353],{"class":260},[220,8783,743],{"class":264},[220,8785,6299],{"class":420},[220,8787,2914],{"class":264},[220,8789,2921],{"class":226},[220,8791,353],{"class":260},[220,8793,743],{"class":264},[220,8795,7754],{"class":420},[220,8797,6302],{"class":264},[220,8799,8800,8802,8804],{"class":222,"line":644},[220,8801,402],{"class":264},[220,8803,347],{"class":420},[220,8805,359],{"class":264},[212,8807,8808],{"className":468,"code":8743,"language":469,"meta":178,"style":178},[99,8809,8810,8818,8826,8830,8862],{"__ignoreMap":178},[220,8811,8812,8814,8816],{"class":222,"line":223},[220,8813,343],{"class":264},[220,8815,347],{"class":420},[220,8817,359],{"class":264},[220,8819,8820,8822,8824],{"class":222,"line":179},[220,8821,364],{"class":264},[220,8823,367],{"class":420},[220,8825,386],{"class":264},[220,8827,8828],{"class":222,"line":389},[220,8829,647],{"emptyLinePlaceholder":194},[220,8831,8832,8834,8836,8838,8840,8842,8844,8846,8848,8850,8852,8854,8856,8858,8860],{"class":222,"line":399},[220,8833,364],{"class":264},[220,8835,2553],{"class":420},[220,8837,1588],{"class":226},[220,8839,353],{"class":260},[220,8841,2560],{"class":230},[220,8843,6202],{"class":226},[220,8845,353],{"class":260},[220,8847,743],{"class":264},[220,8849,6299],{"class":420},[220,8851,2914],{"class":264},[220,8853,2921],{"class":226},[220,8855,353],{"class":260},[220,8857,743],{"class":264},[220,8859,7754],{"class":420},[220,8861,6302],{"class":264},[220,8863,8864,8866,8868],{"class":222,"line":644},[220,8865,402],{"class":264},[220,8867,347],{"class":420},[220,8869,359],{"class":264},[212,8871,8872],{"className":468,"code":8743,"language":469,"meta":178,"style":178},[99,8873,8874,8882,8890,8894,8926],{"__ignoreMap":178},[220,8875,8876,8878,8880],{"class":222,"line":223},[220,8877,343],{"class":264},[220,8879,347],{"class":420},[220,8881,359],{"class":264},[220,8883,8884,8886,8888],{"class":222,"line":179},[220,8885,364],{"class":264},[220,8887,367],{"class":420},[220,8889,386],{"class":264},[220,8891,8892],{"class":222,"line":389},[220,8893,647],{"emptyLinePlaceholder":194},[220,8895,8896,8898,8900,8902,8904,8906,8908,8910,8912,8914,8916,8918,8920,8922,8924],{"class":222,"line":399},[220,8897,364],{"class":264},[220,8899,2553],{"class":420},[220,8901,1588],{"class":226},[220,8903,353],{"class":260},[220,8905,2560],{"class":230},[220,8907,6202],{"class":226},[220,8909,353],{"class":260},[220,8911,743],{"class":264},[220,8913,6299],{"class":420},[220,8915,2914],{"class":264},[220,8917,2921],{"class":226},[220,8919,353],{"class":260},[220,8921,743],{"class":264},[220,8923,7754],{"class":420},[220,8925,6302],{"class":264},[220,8927,8928,8930,8932],{"class":222,"line":644},[220,8929,402],{"class":264},[220,8931,347],{"class":420},[220,8933,359],{"class":264},[212,8935,8937],{"className":251,"code":8936,"language":253,"meta":178,"style":178},"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",[99,8938,8939,8953,8957,8965,8986,8990],{"__ignoreMap":178},[220,8940,8941,8943,8945,8947,8949,8951],{"class":222,"line":223},[220,8942,1735],{"class":260},[220,8944,1738],{"class":420},[220,8946,1741],{"class":260},[220,8948,1744],{"class":260},[220,8950,1747],{"class":226},[220,8952,1750],{"class":264},[220,8954,8955],{"class":222,"line":179},[220,8956,1765],{"class":264},[220,8958,8959,8961,8963],{"class":222,"line":389},[220,8960,1770],{"class":264},[220,8962,2462],{"class":230},[220,8964,6548],{"class":264},[220,8966,8967,8969,8971,8973,8975,8977,8979,8982,8984],{"class":222,"line":399},[220,8968,1770],{"class":264},[220,8970,3206],{"class":230},[220,8972,1776],{"class":264},[220,8974,3217],{"class":230},[220,8976,6566],{"class":264},[220,8978,6299],{"class":420},[220,8980,8981],{"class":264},", opacity: ",[220,8983,7754],{"class":420},[220,8985,1782],{"class":264},[220,8987,8988],{"class":222,"line":644},[220,8989,1787],{"class":264},[220,8991,8992],{"class":222,"line":650},[220,8993,1792],{"class":264},[19,8995],{":preset":8996},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,8998,8999],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,9001,9003],{"id":9002},"visibility","Visibility",[15,9005,7622,9006,9008,9009,9011,9012,9014],{},[99,9007,2711],{}," prop that defaults to ",[99,9010,2332],{},". Setting it to ",[99,9013,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,9016,9018],{"className":409,"code":9017,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,9019,9020],{"__ignoreMap":178},[220,9021,9022,9024,9026,9028,9030,9032,9034],{"class":222,"line":223},[220,9023,343],{"class":264},[220,9025,2553],{"class":420},[220,9027,2618],{"class":226},[220,9029,353],{"class":260},[220,9031,743],{"class":264},[220,9033,2629],{"class":420},[220,9035,6302],{"class":264},[15,9037,9038,9039,9042,9043,9046],{},"This is different from ",[99,9040,9041],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,9044,9045],{},"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,9048,9050],{"id":9049},"masking","Masking",[15,9052,9053,9054,9057,9058,9061,9062,9065],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,9055,9056],{},"id"," property (",[99,9059,9060],{},"string",") and then set ",[99,9063,9064],{},"maskSource"," to that ID on another component to use it as a mask.",[15,9067,9068,9069,9071],{},"Masks typically have ",[99,9070,9045],{}," so they don't appear in the final output—they only control visibility of other components:",[246,9073,9074,9154,9243,9329,9415],{":tabs":1557},[212,9075,9077],{"className":334,"code":9076,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003C!-- This circle acts as the mask -->\n \u003CCircle id=\"myMask\" radius=\"0.8\" :visible=\"false\" \u002F>\n\n \u003C!-- This gradient is masked by the circle -->\n \u003CLinearGradient maskSource=\"myMask\" \u002F>\n\u003C\u002FShader>\n",[99,9078,9079,9087,9092,9122,9126,9131,9146],{"__ignoreMap":178},[220,9080,9081,9083,9085],{"class":222,"line":223},[220,9082,343],{"class":264},[220,9084,347],{"class":346},[220,9086,359],{"class":264},[220,9088,9089],{"class":222,"line":179},[220,9090,9091],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,9093,9094,9096,9098,9101,9103,9106,9108,9110,9112,9115,9117,9120],{"class":222,"line":389},[220,9095,364],{"class":264},[220,9097,2553],{"class":346},[220,9099,9100],{"class":226}," id",[220,9102,353],{"class":264},[220,9104,9105],{"class":230},"\"myMask\"",[220,9107,6202],{"class":226},[220,9109,353],{"class":264},[220,9111,6207],{"class":230},[220,9113,9114],{"class":226}," :visible",[220,9116,353],{"class":264},[220,9118,9119],{"class":230},"\"false\"",[220,9121,386],{"class":264},[220,9123,9124],{"class":222,"line":399},[220,9125,647],{"emptyLinePlaceholder":194},[220,9127,9128],{"class":222,"line":644},[220,9129,9130],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,9132,9133,9135,9137,9140,9142,9144],{"class":222,"line":650},[220,9134,364],{"class":264},[220,9136,367],{"class":346},[220,9138,9139],{"class":226}," maskSource",[220,9141,353],{"class":264},[220,9143,9105],{"class":230},[220,9145,386],{"class":264},[220,9147,9148,9150,9152],{"class":222,"line":656},[220,9149,402],{"class":264},[220,9151,347],{"class":346},[220,9153,359],{"class":264},[212,9155,9157],{"className":409,"code":9156,"language":411,"meta":178,"style":178},"\u003CShader>\n {\u002F* This circle acts as the mask *\u002F}\n \u003CCircle id=\"myMask\" radius={0.8} visible={false} \u002F>\n\n {\u002F* This gradient is masked by the circle *\u002F}\n \u003CLinearGradient maskSource=\"myMask\" \u002F>\n\u003C\u002FShader>\n",[99,9158,9159,9167,9176,9208,9212,9221,9235],{"__ignoreMap":178},[220,9160,9161,9163,9165],{"class":222,"line":223},[220,9162,343],{"class":264},[220,9164,347],{"class":420},[220,9166,359],{"class":264},[220,9168,9169,9171,9174],{"class":222,"line":179},[220,9170,1999],{"class":264},[220,9172,9173],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,9175,749],{"class":264},[220,9177,9178,9180,9182,9184,9186,9188,9190,9192,9194,9196,9198,9200,9202,9204,9206],{"class":222,"line":389},[220,9179,364],{"class":264},[220,9181,2553],{"class":420},[220,9183,9100],{"class":226},[220,9185,353],{"class":260},[220,9187,9105],{"class":230},[220,9189,6202],{"class":226},[220,9191,353],{"class":260},[220,9193,743],{"class":264},[220,9195,6299],{"class":420},[220,9197,2914],{"class":264},[220,9199,2711],{"class":226},[220,9201,353],{"class":260},[220,9203,743],{"class":264},[220,9205,2629],{"class":420},[220,9207,6302],{"class":264},[220,9209,9210],{"class":222,"line":399},[220,9211,647],{"emptyLinePlaceholder":194},[220,9213,9214,9216,9219],{"class":222,"line":644},[220,9215,1999],{"class":264},[220,9217,9218],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,9220,749],{"class":264},[220,9222,9223,9225,9227,9229,9231,9233],{"class":222,"line":650},[220,9224,364],{"class":264},[220,9226,367],{"class":420},[220,9228,9139],{"class":226},[220,9230,353],{"class":260},[220,9232,9105],{"class":230},[220,9234,386],{"class":264},[220,9236,9237,9239,9241],{"class":222,"line":656},[220,9238,402],{"class":264},[220,9240,347],{"class":420},[220,9242,359],{"class":264},[212,9244,9245],{"className":468,"code":9156,"language":469,"meta":178,"style":178},[99,9246,9247,9255,9263,9295,9299,9307,9321],{"__ignoreMap":178},[220,9248,9249,9251,9253],{"class":222,"line":223},[220,9250,343],{"class":264},[220,9252,347],{"class":420},[220,9254,359],{"class":264},[220,9256,9257,9259,9261],{"class":222,"line":179},[220,9258,1999],{"class":264},[220,9260,9173],{"class":609},[220,9262,749],{"class":264},[220,9264,9265,9267,9269,9271,9273,9275,9277,9279,9281,9283,9285,9287,9289,9291,9293],{"class":222,"line":389},[220,9266,364],{"class":264},[220,9268,2553],{"class":420},[220,9270,9100],{"class":226},[220,9272,353],{"class":260},[220,9274,9105],{"class":230},[220,9276,6202],{"class":226},[220,9278,353],{"class":260},[220,9280,743],{"class":264},[220,9282,6299],{"class":420},[220,9284,2914],{"class":264},[220,9286,2711],{"class":226},[220,9288,353],{"class":260},[220,9290,743],{"class":264},[220,9292,2629],{"class":420},[220,9294,6302],{"class":264},[220,9296,9297],{"class":222,"line":399},[220,9298,647],{"emptyLinePlaceholder":194},[220,9300,9301,9303,9305],{"class":222,"line":644},[220,9302,1999],{"class":264},[220,9304,9218],{"class":609},[220,9306,749],{"class":264},[220,9308,9309,9311,9313,9315,9317,9319],{"class":222,"line":650},[220,9310,364],{"class":264},[220,9312,367],{"class":420},[220,9314,9139],{"class":226},[220,9316,353],{"class":260},[220,9318,9105],{"class":230},[220,9320,386],{"class":264},[220,9322,9323,9325,9327],{"class":222,"line":656},[220,9324,402],{"class":264},[220,9326,347],{"class":420},[220,9328,359],{"class":264},[212,9330,9331],{"className":468,"code":9156,"language":469,"meta":178,"style":178},[99,9332,9333,9341,9349,9381,9385,9393,9407],{"__ignoreMap":178},[220,9334,9335,9337,9339],{"class":222,"line":223},[220,9336,343],{"class":264},[220,9338,347],{"class":420},[220,9340,359],{"class":264},[220,9342,9343,9345,9347],{"class":222,"line":179},[220,9344,1999],{"class":264},[220,9346,9173],{"class":609},[220,9348,749],{"class":264},[220,9350,9351,9353,9355,9357,9359,9361,9363,9365,9367,9369,9371,9373,9375,9377,9379],{"class":222,"line":389},[220,9352,364],{"class":264},[220,9354,2553],{"class":420},[220,9356,9100],{"class":226},[220,9358,353],{"class":260},[220,9360,9105],{"class":230},[220,9362,6202],{"class":226},[220,9364,353],{"class":260},[220,9366,743],{"class":264},[220,9368,6299],{"class":420},[220,9370,2914],{"class":264},[220,9372,2711],{"class":226},[220,9374,353],{"class":260},[220,9376,743],{"class":264},[220,9378,2629],{"class":420},[220,9380,6302],{"class":264},[220,9382,9383],{"class":222,"line":399},[220,9384,647],{"emptyLinePlaceholder":194},[220,9386,9387,9389,9391],{"class":222,"line":644},[220,9388,1999],{"class":264},[220,9390,9218],{"class":609},[220,9392,749],{"class":264},[220,9394,9395,9397,9399,9401,9403,9405],{"class":222,"line":650},[220,9396,364],{"class":264},[220,9398,367],{"class":420},[220,9400,9139],{"class":226},[220,9402,353],{"class":260},[220,9404,9105],{"class":230},[220,9406,386],{"class":264},[220,9408,9409,9411,9413],{"class":222,"line":656},[220,9410,402],{"class":264},[220,9412,347],{"class":420},[220,9414,359],{"class":264},[212,9416,9418],{"className":251,"code":9417,"language":253,"meta":178,"style":178},"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",[99,9419,9420,9434,9438,9460,9473,9477],{"__ignoreMap":178},[220,9421,9422,9424,9426,9428,9430,9432],{"class":222,"line":223},[220,9423,1735],{"class":260},[220,9425,1738],{"class":420},[220,9427,1741],{"class":260},[220,9429,1744],{"class":260},[220,9431,1747],{"class":226},[220,9433,1750],{"class":264},[220,9435,9436],{"class":222,"line":179},[220,9437,1765],{"class":264},[220,9439,9440,9442,9444,9446,9449,9451,9453,9456,9458],{"class":222,"line":389},[220,9441,1770],{"class":264},[220,9443,3206],{"class":230},[220,9445,3209],{"class":264},[220,9447,9448],{"class":230},"'myMask'",[220,9450,7541],{"class":264},[220,9452,6299],{"class":420},[220,9454,9455],{"class":264},", visible: ",[220,9457,2629],{"class":420},[220,9459,6571],{"class":264},[220,9461,9462,9464,9466,9469,9471],{"class":222,"line":399},[220,9463,1770],{"class":264},[220,9465,2462],{"class":230},[220,9467,9468],{"class":264},", props: { maskSource: ",[220,9470,9448],{"class":230},[220,9472,1782],{"class":264},[220,9474,9475],{"class":222,"line":644},[220,9476,1787],{"class":264},[220,9478,9479],{"class":222,"line":650},[220,9480,1792],{"class":264},[19,9482],{":preset":9483},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,9485,9486,9487,4836],{},"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 ",[99,9488,9045],{},[3262,9490,9492],{"id":9491},"mask-types","Mask Types",[15,9494,9495,9496,9499],{},"Control how the mask is interpreted with the ",[99,9497,9498],{},"maskType"," prop:",[34,9501,9502,9510,9518,9526],{},[37,9503,9504,9509],{},[159,9505,9506],{},[99,9507,9508],{},"alpha",": Uses the mask's alpha channel (default)",[37,9511,9512,9517],{},[159,9513,9514],{},[99,9515,9516],{},"alphaInverted",": Uses the inverted alpha channel",[37,9519,9520,9525],{},[159,9521,9522],{},[99,9523,9524],{},"luminance",": Uses the mask's brightness",[37,9527,9528,9533],{},[159,9529,9530],{},[99,9531,9532],{},"luminanceInverted",": Uses the inverted brightness",[246,9535,9536,9685,9833,9977,10121],{":tabs":1557},[212,9537,9539],{"className":334,"code":9538,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n \u003C!-- Hidden checkerboard mask controls visibility -->\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n :visible=\"false\"\n \u002F>\n\n \u003C!-- Visible where mask is bright -->\n \u003CCircle\n color=\"#ff0088\"\n radius=\"0.8\"\n maskSource=\"mask\"\n maskType=\"luminance\"\n \u002F>\n\u003C\u002FShader>\n",[99,9540,9541,9549,9557,9561,9566,9573,9583,9592,9601,9611,9615,9619,9624,9631,9641,9651,9660,9671,9676],{"__ignoreMap":178},[220,9542,9543,9545,9547],{"class":222,"line":223},[220,9544,343],{"class":264},[220,9546,347],{"class":346},[220,9548,359],{"class":264},[220,9550,9551,9553,9555],{"class":222,"line":179},[220,9552,364],{"class":264},[220,9554,367],{"class":346},[220,9556,386],{"class":264},[220,9558,9559],{"class":222,"line":389},[220,9560,647],{"emptyLinePlaceholder":194},[220,9562,9563],{"class":222,"line":399},[220,9564,9565],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,9567,9568,9570],{"class":222,"line":644},[220,9569,364],{"class":264},[220,9571,9572],{"class":346},"Checkerboard\n",[220,9574,9575,9578,9580],{"class":222,"line":650},[220,9576,9577],{"class":226}," id",[220,9579,353],{"class":264},[220,9581,9582],{"class":230},"\"mask\"\n",[220,9584,9585,9587,9589],{"class":222,"line":656},[220,9586,1194],{"class":226},[220,9588,353],{"class":264},[220,9590,9591],{"class":230},"\"#ffffff\"\n",[220,9593,9594,9596,9598],{"class":222,"line":673},[220,9595,1204],{"class":226},[220,9597,353],{"class":264},[220,9599,9600],{"class":230},"\"#111111\"\n",[220,9602,9603,9606,9608],{"class":222,"line":682},[220,9604,9605],{"class":226}," :visible",[220,9607,353],{"class":264},[220,9609,9610],{"class":230},"\"false\"\n",[220,9612,9613],{"class":222,"line":691},[220,9614,1234],{"class":264},[220,9616,9617],{"class":222,"line":696},[220,9618,647],{"emptyLinePlaceholder":194},[220,9620,9621],{"class":222,"line":702},[220,9622,9623],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,9625,9626,9628],{"class":222,"line":718},[220,9627,364],{"class":264},[220,9629,9630],{"class":346},"Circle\n",[220,9632,9633,9636,9638],{"class":222,"line":727},[220,9634,9635],{"class":226}," color",[220,9637,353],{"class":264},[220,9639,9640],{"class":230},"\"#ff0088\"\n",[220,9642,9643,9646,9648],{"class":222,"line":2664},[220,9644,9645],{"class":226}," radius",[220,9647,353],{"class":264},[220,9649,9650],{"class":230},"\"0.8\"\n",[220,9652,9653,9656,9658],{"class":222,"line":3522},[220,9654,9655],{"class":226}," maskSource",[220,9657,353],{"class":264},[220,9659,9582],{"class":230},[220,9661,9663,9666,9668],{"class":222,"line":9662},17,[220,9664,9665],{"class":226}," maskType",[220,9667,353],{"class":264},[220,9669,9670],{"class":230},"\"luminance\"\n",[220,9672,9674],{"class":222,"line":9673},18,[220,9675,1234],{"class":264},[220,9677,9679,9681,9683],{"class":222,"line":9678},19,[220,9680,402],{"class":264},[220,9682,347],{"class":346},[220,9684,359],{"class":264},[212,9686,9688],{"className":409,"code":9687,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\n {\u002F* Hidden checkerboard mask controls visibility *\u002F}\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n visible={false}\n \u002F>\n\n {\u002F* Visible where mask is bright *\u002F}\n \u003CCircle\n color=\"#ff0088\"\n radius={0.8}\n maskSource=\"mask\"\n maskType=\"luminance\"\n \u002F>\n\u003C\u002FShader>\n",[99,9689,9690,9698,9706,9710,9719,9725,9733,9741,9749,9762,9766,9770,9779,9785,9793,9805,9813,9821,9825],{"__ignoreMap":178},[220,9691,9692,9694,9696],{"class":222,"line":223},[220,9693,343],{"class":264},[220,9695,347],{"class":420},[220,9697,359],{"class":264},[220,9699,9700,9702,9704],{"class":222,"line":179},[220,9701,364],{"class":264},[220,9703,367],{"class":420},[220,9705,386],{"class":264},[220,9707,9708],{"class":222,"line":389},[220,9709,647],{"emptyLinePlaceholder":194},[220,9711,9712,9714,9717],{"class":222,"line":399},[220,9713,1999],{"class":264},[220,9715,9716],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,9718,749],{"class":264},[220,9720,9721,9723],{"class":222,"line":644},[220,9722,364],{"class":264},[220,9724,9572],{"class":420},[220,9726,9727,9729,9731],{"class":222,"line":650},[220,9728,9577],{"class":226},[220,9730,353],{"class":260},[220,9732,9582],{"class":230},[220,9734,9735,9737,9739],{"class":222,"line":656},[220,9736,1194],{"class":226},[220,9738,353],{"class":260},[220,9740,9591],{"class":230},[220,9742,9743,9745,9747],{"class":222,"line":673},[220,9744,1204],{"class":226},[220,9746,353],{"class":260},[220,9748,9600],{"class":230},[220,9750,9751,9754,9756,9758,9760],{"class":222,"line":682},[220,9752,9753],{"class":226}," visible",[220,9755,353],{"class":260},[220,9757,743],{"class":264},[220,9759,2629],{"class":420},[220,9761,749],{"class":264},[220,9763,9764],{"class":222,"line":691},[220,9765,1234],{"class":264},[220,9767,9768],{"class":222,"line":696},[220,9769,647],{"emptyLinePlaceholder":194},[220,9771,9772,9774,9777],{"class":222,"line":702},[220,9773,1999],{"class":264},[220,9775,9776],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,9778,749],{"class":264},[220,9780,9781,9783],{"class":222,"line":718},[220,9782,364],{"class":264},[220,9784,9630],{"class":420},[220,9786,9787,9789,9791],{"class":222,"line":727},[220,9788,9635],{"class":226},[220,9790,353],{"class":260},[220,9792,9640],{"class":230},[220,9794,9795,9797,9799,9801,9803],{"class":222,"line":2664},[220,9796,9645],{"class":226},[220,9798,353],{"class":260},[220,9800,743],{"class":264},[220,9802,6299],{"class":420},[220,9804,749],{"class":264},[220,9806,9807,9809,9811],{"class":222,"line":3522},[220,9808,9655],{"class":226},[220,9810,353],{"class":260},[220,9812,9582],{"class":230},[220,9814,9815,9817,9819],{"class":222,"line":9662},[220,9816,9665],{"class":226},[220,9818,353],{"class":260},[220,9820,9670],{"class":230},[220,9822,9823],{"class":222,"line":9673},[220,9824,1234],{"class":264},[220,9826,9827,9829,9831],{"class":222,"line":9678},[220,9828,402],{"class":264},[220,9830,347],{"class":420},[220,9832,359],{"class":264},[212,9834,9835],{"className":468,"code":9687,"language":469,"meta":178,"style":178},[99,9836,9837,9845,9853,9857,9865,9871,9879,9887,9895,9907,9911,9915,9923,9929,9937,9949,9957,9965,9969],{"__ignoreMap":178},[220,9838,9839,9841,9843],{"class":222,"line":223},[220,9840,343],{"class":264},[220,9842,347],{"class":420},[220,9844,359],{"class":264},[220,9846,9847,9849,9851],{"class":222,"line":179},[220,9848,364],{"class":264},[220,9850,367],{"class":420},[220,9852,386],{"class":264},[220,9854,9855],{"class":222,"line":389},[220,9856,647],{"emptyLinePlaceholder":194},[220,9858,9859,9861,9863],{"class":222,"line":399},[220,9860,1999],{"class":264},[220,9862,9716],{"class":609},[220,9864,749],{"class":264},[220,9866,9867,9869],{"class":222,"line":644},[220,9868,364],{"class":264},[220,9870,9572],{"class":420},[220,9872,9873,9875,9877],{"class":222,"line":650},[220,9874,9577],{"class":226},[220,9876,353],{"class":260},[220,9878,9582],{"class":230},[220,9880,9881,9883,9885],{"class":222,"line":656},[220,9882,1194],{"class":226},[220,9884,353],{"class":260},[220,9886,9591],{"class":230},[220,9888,9889,9891,9893],{"class":222,"line":673},[220,9890,1204],{"class":226},[220,9892,353],{"class":260},[220,9894,9600],{"class":230},[220,9896,9897,9899,9901,9903,9905],{"class":222,"line":682},[220,9898,9753],{"class":226},[220,9900,353],{"class":260},[220,9902,743],{"class":264},[220,9904,2629],{"class":420},[220,9906,749],{"class":264},[220,9908,9909],{"class":222,"line":691},[220,9910,1234],{"class":264},[220,9912,9913],{"class":222,"line":696},[220,9914,647],{"emptyLinePlaceholder":194},[220,9916,9917,9919,9921],{"class":222,"line":702},[220,9918,1999],{"class":264},[220,9920,9776],{"class":609},[220,9922,749],{"class":264},[220,9924,9925,9927],{"class":222,"line":718},[220,9926,364],{"class":264},[220,9928,9630],{"class":420},[220,9930,9931,9933,9935],{"class":222,"line":727},[220,9932,9635],{"class":226},[220,9934,353],{"class":260},[220,9936,9640],{"class":230},[220,9938,9939,9941,9943,9945,9947],{"class":222,"line":2664},[220,9940,9645],{"class":226},[220,9942,353],{"class":260},[220,9944,743],{"class":264},[220,9946,6299],{"class":420},[220,9948,749],{"class":264},[220,9950,9951,9953,9955],{"class":222,"line":3522},[220,9952,9655],{"class":226},[220,9954,353],{"class":260},[220,9956,9582],{"class":230},[220,9958,9959,9961,9963],{"class":222,"line":9662},[220,9960,9665],{"class":226},[220,9962,353],{"class":260},[220,9964,9670],{"class":230},[220,9966,9967],{"class":222,"line":9673},[220,9968,1234],{"class":264},[220,9970,9971,9973,9975],{"class":222,"line":9678},[220,9972,402],{"class":264},[220,9974,347],{"class":420},[220,9976,359],{"class":264},[212,9978,9979],{"className":468,"code":9687,"language":469,"meta":178,"style":178},[99,9980,9981,9989,9997,10001,10009,10015,10023,10031,10039,10051,10055,10059,10067,10073,10081,10093,10101,10109,10113],{"__ignoreMap":178},[220,9982,9983,9985,9987],{"class":222,"line":223},[220,9984,343],{"class":264},[220,9986,347],{"class":420},[220,9988,359],{"class":264},[220,9990,9991,9993,9995],{"class":222,"line":179},[220,9992,364],{"class":264},[220,9994,367],{"class":420},[220,9996,386],{"class":264},[220,9998,9999],{"class":222,"line":389},[220,10000,647],{"emptyLinePlaceholder":194},[220,10002,10003,10005,10007],{"class":222,"line":399},[220,10004,1999],{"class":264},[220,10006,9716],{"class":609},[220,10008,749],{"class":264},[220,10010,10011,10013],{"class":222,"line":644},[220,10012,364],{"class":264},[220,10014,9572],{"class":420},[220,10016,10017,10019,10021],{"class":222,"line":650},[220,10018,9577],{"class":226},[220,10020,353],{"class":260},[220,10022,9582],{"class":230},[220,10024,10025,10027,10029],{"class":222,"line":656},[220,10026,1194],{"class":226},[220,10028,353],{"class":260},[220,10030,9591],{"class":230},[220,10032,10033,10035,10037],{"class":222,"line":673},[220,10034,1204],{"class":226},[220,10036,353],{"class":260},[220,10038,9600],{"class":230},[220,10040,10041,10043,10045,10047,10049],{"class":222,"line":682},[220,10042,9753],{"class":226},[220,10044,353],{"class":260},[220,10046,743],{"class":264},[220,10048,2629],{"class":420},[220,10050,749],{"class":264},[220,10052,10053],{"class":222,"line":691},[220,10054,1234],{"class":264},[220,10056,10057],{"class":222,"line":696},[220,10058,647],{"emptyLinePlaceholder":194},[220,10060,10061,10063,10065],{"class":222,"line":702},[220,10062,1999],{"class":264},[220,10064,9776],{"class":609},[220,10066,749],{"class":264},[220,10068,10069,10071],{"class":222,"line":718},[220,10070,364],{"class":264},[220,10072,9630],{"class":420},[220,10074,10075,10077,10079],{"class":222,"line":727},[220,10076,9635],{"class":226},[220,10078,353],{"class":260},[220,10080,9640],{"class":230},[220,10082,10083,10085,10087,10089,10091],{"class":222,"line":2664},[220,10084,9645],{"class":226},[220,10086,353],{"class":260},[220,10088,743],{"class":264},[220,10090,6299],{"class":420},[220,10092,749],{"class":264},[220,10094,10095,10097,10099],{"class":222,"line":3522},[220,10096,9655],{"class":226},[220,10098,353],{"class":260},[220,10100,9582],{"class":230},[220,10102,10103,10105,10107],{"class":222,"line":9662},[220,10104,9665],{"class":226},[220,10106,353],{"class":260},[220,10108,9670],{"class":230},[220,10110,10111],{"class":222,"line":9673},[220,10112,1234],{"class":264},[220,10114,10115,10117,10119],{"class":222,"line":9678},[220,10116,402],{"class":264},[220,10118,347],{"class":420},[220,10120,359],{"class":264},[212,10122,10124],{"className":251,"code":10123,"language":253,"meta":178,"style":178},"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",[99,10125,10126,10140,10144,10152,10182,10209,10213],{"__ignoreMap":178},[220,10127,10128,10130,10132,10134,10136,10138],{"class":222,"line":223},[220,10129,1735],{"class":260},[220,10131,1738],{"class":420},[220,10133,1741],{"class":260},[220,10135,1744],{"class":260},[220,10137,1747],{"class":226},[220,10139,1750],{"class":264},[220,10141,10142],{"class":222,"line":179},[220,10143,1765],{"class":264},[220,10145,10146,10148,10150],{"class":222,"line":389},[220,10147,1770],{"class":264},[220,10149,2462],{"class":230},[220,10151,6548],{"class":264},[220,10153,10154,10156,10159,10161,10164,10167,10170,10173,10176,10178,10180],{"class":222,"line":399},[220,10155,1770],{"class":264},[220,10157,10158],{"class":230},"'Checkerboard'",[220,10160,3209],{"class":264},[220,10162,10163],{"class":230},"'mask'",[220,10165,10166],{"class":264},", props: { colorA: ",[220,10168,10169],{"class":230},"'#ffffff'",[220,10171,10172],{"class":264},", colorB: ",[220,10174,10175],{"class":230},"'#111111'",[220,10177,9455],{"class":264},[220,10179,2629],{"class":420},[220,10181,6571],{"class":264},[220,10183,10184,10186,10188,10190,10192,10194,10196,10199,10201,10204,10207],{"class":222,"line":644},[220,10185,1770],{"class":264},[220,10187,3206],{"class":230},[220,10189,1776],{"class":264},[220,10191,3217],{"class":230},[220,10193,6566],{"class":264},[220,10195,6299],{"class":420},[220,10197,10198],{"class":264},", maskSource: ",[220,10200,10163],{"class":230},[220,10202,10203],{"class":264},", maskType: ",[220,10205,10206],{"class":230},"'luminance'",[220,10208,1782],{"class":264},[220,10210,10211],{"class":222,"line":650},[220,10212,1787],{"class":264},[220,10214,10215],{"class":222,"line":656},[220,10216,1792],{"class":264},[19,10218],{":preset":10219},"{\"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\"}}]}",[1504,10221,7594],{},{"title":178,"searchDepth":179,"depth":179,"links":10223},[10224,10227,10228,10229],{"id":7618,"depth":179,"text":7619,"children":10225},[10226],{"id":8079,"depth":389,"text":8080},{"id":2921,"depth":179,"text":8664},{"id":9002,"depth":179,"text":9003},{"id":9049,"depth":179,"text":9050,"children":10230},[10231],{"id":9491,"depth":389,"text":9492},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":7607,"description":10233},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":10241,"title":1496,"body":10242,"category":10232,"description":12233,"exclude":190,"extension":191,"forceFramework":190,"icon":12234,"meta":12235,"navigation":194,"path":1495,"seo":12236,"stem":12237,"__hash__":12238},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":10243,"toc":12226},[10244,10247,10250,10254,10257,10474,10477,10481,10484,11643,11646,11651,11654,11658,11661,11666,11709,11714,11753,11758,11809,11814,11840,11843,11847,11850,11856,12186,12190,12193,12197,12200,12220,12223],[11,10245,1496],{"id":10246},"props-reactivity",[15,10248,10249],{},"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,10251,10253],{"id":10252},"basic-props","Basic Props",[15,10255,10256],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,10258,10259,10300,10343,10385,10427],{":tabs":1557},[212,10260,10262],{"className":334,"code":10261,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,10263,10264,10272,10292],{"__ignoreMap":178},[220,10265,10266,10268,10270],{"class":222,"line":223},[220,10267,343],{"class":264},[220,10269,347],{"class":346},[220,10271,359],{"class":264},[220,10273,10274,10276,10278,10280,10282,10284,10286,10288,10290],{"class":222,"line":179},[220,10275,364],{"class":264},[220,10277,2553],{"class":346},[220,10279,1588],{"class":226},[220,10281,353],{"class":264},[220,10283,2560],{"class":230},[220,10285,6202],{"class":226},[220,10287,353],{"class":264},[220,10289,7681],{"class":230},[220,10291,386],{"class":264},[220,10293,10294,10296,10298],{"class":222,"line":389},[220,10295,402],{"class":264},[220,10297,347],{"class":346},[220,10299,359],{"class":264},[212,10301,10303],{"className":409,"code":10302,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,10304,10305,10313,10335],{"__ignoreMap":178},[220,10306,10307,10309,10311],{"class":222,"line":223},[220,10308,343],{"class":264},[220,10310,347],{"class":420},[220,10312,359],{"class":264},[220,10314,10315,10317,10319,10321,10323,10325,10327,10329,10331,10333],{"class":222,"line":179},[220,10316,364],{"class":264},[220,10318,2553],{"class":420},[220,10320,1588],{"class":226},[220,10322,353],{"class":260},[220,10324,2560],{"class":230},[220,10326,6202],{"class":226},[220,10328,353],{"class":260},[220,10330,743],{"class":264},[220,10332,7754],{"class":420},[220,10334,6302],{"class":264},[220,10336,10337,10339,10341],{"class":222,"line":389},[220,10338,402],{"class":264},[220,10340,347],{"class":420},[220,10342,359],{"class":264},[212,10344,10345],{"className":468,"code":10302,"language":469,"meta":178,"style":178},[99,10346,10347,10355,10377],{"__ignoreMap":178},[220,10348,10349,10351,10353],{"class":222,"line":223},[220,10350,343],{"class":264},[220,10352,347],{"class":420},[220,10354,359],{"class":264},[220,10356,10357,10359,10361,10363,10365,10367,10369,10371,10373,10375],{"class":222,"line":179},[220,10358,364],{"class":264},[220,10360,2553],{"class":420},[220,10362,1588],{"class":226},[220,10364,353],{"class":260},[220,10366,2560],{"class":230},[220,10368,6202],{"class":226},[220,10370,353],{"class":260},[220,10372,743],{"class":264},[220,10374,7754],{"class":420},[220,10376,6302],{"class":264},[220,10378,10379,10381,10383],{"class":222,"line":389},[220,10380,402],{"class":264},[220,10382,347],{"class":420},[220,10384,359],{"class":264},[212,10386,10387],{"className":468,"code":10302,"language":469,"meta":178,"style":178},[99,10388,10389,10397,10419],{"__ignoreMap":178},[220,10390,10391,10393,10395],{"class":222,"line":223},[220,10392,343],{"class":264},[220,10394,347],{"class":420},[220,10396,359],{"class":264},[220,10398,10399,10401,10403,10405,10407,10409,10411,10413,10415,10417],{"class":222,"line":179},[220,10400,364],{"class":264},[220,10402,2553],{"class":420},[220,10404,1588],{"class":226},[220,10406,353],{"class":260},[220,10408,2560],{"class":230},[220,10410,6202],{"class":226},[220,10412,353],{"class":260},[220,10414,743],{"class":264},[220,10416,7754],{"class":420},[220,10418,6302],{"class":264},[220,10420,10421,10423,10425],{"class":222,"line":389},[220,10422,402],{"class":264},[220,10424,347],{"class":420},[220,10426,359],{"class":264},[212,10428,10430],{"className":251,"code":10429,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5 } }\n ]\n})\n",[99,10431,10432,10446,10450,10466,10470],{"__ignoreMap":178},[220,10433,10434,10436,10438,10440,10442,10444],{"class":222,"line":223},[220,10435,1735],{"class":260},[220,10437,1738],{"class":420},[220,10439,1741],{"class":260},[220,10441,1744],{"class":260},[220,10443,1747],{"class":226},[220,10445,1750],{"class":264},[220,10447,10448],{"class":222,"line":179},[220,10449,1765],{"class":264},[220,10451,10452,10454,10456,10458,10460,10462,10464],{"class":222,"line":389},[220,10453,1770],{"class":264},[220,10455,3206],{"class":230},[220,10457,1776],{"class":264},[220,10459,3217],{"class":230},[220,10461,6566],{"class":264},[220,10463,7754],{"class":420},[220,10465,1782],{"class":264},[220,10467,10468],{"class":222,"line":399},[220,10469,1787],{"class":264},[220,10471,10472],{"class":222,"line":644},[220,10473,1792],{"class":264},[15,10475,10476],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,10478,10480],{"id":10479},"reactive-props","Reactive Props",[15,10482,10483],{},"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.",[246,10485,10486,10718,11007,11228,11501],{":tabs":1557},[212,10487,10489],{"className":334,"code":10488,"language":336,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Fvue'\n\nconst angle = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"angle += 45\">Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton @click=\"angle -= 45\">Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton @click=\"angle = 0\">Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius=\"0.8\" :visible=\"false\" \u002F>\n \u003CLinearGradient :angle=\"angle\" maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,10490,10491,10501,10511,10522,10526,10543,10551,10555,10563,10571,10593,10613,10633,10641,10645,10653,10680,10702,10710],{"__ignoreMap":178},[220,10492,10493,10495,10497,10499],{"class":222,"line":223},[220,10494,343],{"class":264},[220,10496,2590],{"class":346},[220,10498,2593],{"class":226},[220,10500,359],{"class":264},[220,10502,10503,10505,10507,10509],{"class":222,"line":179},[220,10504,261],{"class":260},[220,10506,2602],{"class":264},[220,10508,268],{"class":260},[220,10510,2607],{"class":230},[220,10512,10513,10515,10518,10520],{"class":222,"line":389},[220,10514,261],{"class":260},[220,10516,10517],{"class":264}," { Shader, LinearGradient, Circle } ",[220,10519,268],{"class":260},[220,10521,271],{"class":230},[220,10523,10524],{"class":222,"line":399},[220,10525,647],{"emptyLinePlaceholder":194},[220,10527,10528,10530,10533,10535,10537,10539,10541],{"class":222,"line":644},[220,10529,1735],{"class":260},[220,10531,10532],{"class":420}," angle",[220,10534,1741],{"class":260},[220,10536,2623],{"class":226},[220,10538,2626],{"class":264},[220,10540,8673],{"class":420},[220,10542,2632],{"class":264},[220,10544,10545,10547,10549],{"class":222,"line":650},[220,10546,402],{"class":264},[220,10548,2590],{"class":346},[220,10550,359],{"class":264},[220,10552,10553],{"class":222,"line":656},[220,10554,647],{"emptyLinePlaceholder":194},[220,10556,10557,10559,10561],{"class":222,"line":673},[220,10558,343],{"class":264},[220,10560,2519],{"class":346},[220,10562,359],{"class":264},[220,10564,10565,10567,10569],{"class":222,"line":682},[220,10566,364],{"class":264},[220,10568,3398],{"class":346},[220,10570,359],{"class":264},[220,10572,10573,10575,10578,10581,10583,10586,10589,10591],{"class":222,"line":691},[220,10574,2550],{"class":264},[220,10576,10577],{"class":346},"button",[220,10579,10580],{"class":226}," @click",[220,10582,353],{"class":264},[220,10584,10585],{"class":230},"\"angle += 45\"",[220,10587,10588],{"class":264},">Rotate +45°\u003C\u002F",[220,10590,10577],{"class":346},[220,10592,359],{"class":264},[220,10594,10595,10597,10599,10601,10603,10606,10609,10611],{"class":222,"line":696},[220,10596,2550],{"class":264},[220,10598,10577],{"class":346},[220,10600,10580],{"class":226},[220,10602,353],{"class":264},[220,10604,10605],{"class":230},"\"angle -= 45\"",[220,10607,10608],{"class":264},">Rotate -45°\u003C\u002F",[220,10610,10577],{"class":346},[220,10612,359],{"class":264},[220,10614,10615,10617,10619,10621,10623,10626,10629,10631],{"class":222,"line":702},[220,10616,2550],{"class":264},[220,10618,10577],{"class":346},[220,10620,10580],{"class":226},[220,10622,353],{"class":264},[220,10624,10625],{"class":230},"\"angle = 0\"",[220,10627,10628],{"class":264},">Reset\u003C\u002F",[220,10630,10577],{"class":346},[220,10632,359],{"class":264},[220,10634,10635,10637,10639],{"class":222,"line":718},[220,10636,2567],{"class":264},[220,10638,3398],{"class":346},[220,10640,359],{"class":264},[220,10642,10643],{"class":222,"line":727},[220,10644,647],{"emptyLinePlaceholder":194},[220,10646,10647,10649,10651],{"class":222,"line":2664},[220,10648,364],{"class":264},[220,10650,347],{"class":346},[220,10652,359],{"class":264},[220,10654,10655,10657,10659,10661,10663,10666,10668,10670,10672,10674,10676,10678],{"class":222,"line":3522},[220,10656,2550],{"class":264},[220,10658,2553],{"class":346},[220,10660,9100],{"class":226},[220,10662,353],{"class":264},[220,10664,10665],{"class":230},"\"mask\"",[220,10667,6202],{"class":226},[220,10669,353],{"class":264},[220,10671,6207],{"class":230},[220,10673,9114],{"class":226},[220,10675,353],{"class":264},[220,10677,9119],{"class":230},[220,10679,386],{"class":264},[220,10681,10682,10684,10686,10689,10691,10694,10696,10698,10700],{"class":222,"line":9662},[220,10683,2550],{"class":264},[220,10685,367],{"class":346},[220,10687,10688],{"class":226}," :angle",[220,10690,353],{"class":264},[220,10692,10693],{"class":230},"\"angle\"",[220,10695,9139],{"class":226},[220,10697,353],{"class":264},[220,10699,10665],{"class":230},[220,10701,386],{"class":264},[220,10703,10704,10706,10708],{"class":222,"line":9673},[220,10705,2567],{"class":264},[220,10707,347],{"class":346},[220,10709,359],{"class":264},[220,10711,10712,10714,10716],{"class":222,"line":9678},[220,10713,402],{"class":264},[220,10715,2519],{"class":346},[220,10717,359],{"class":264},[212,10719,10721],{"className":409,"code":10720,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Freact'\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\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient angle={angle} maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,10722,10723,10733,10743,10747,10756,10782,10786,10792,10797,10805,10847,10883,10910,10919,10923,10931,10963,10984,10992,10997,11002],{"__ignoreMap":178},[220,10724,10725,10727,10729,10731],{"class":222,"line":223},[220,10726,261],{"class":260},[220,10728,2682],{"class":264},[220,10730,268],{"class":260},[220,10732,2687],{"class":230},[220,10734,10735,10737,10739,10741],{"class":222,"line":179},[220,10736,261],{"class":260},[220,10738,10517],{"class":264},[220,10740,268],{"class":260},[220,10742,287],{"class":230},[220,10744,10745],{"class":222,"line":389},[220,10746,647],{"emptyLinePlaceholder":194},[220,10748,10749,10751,10754],{"class":222,"line":399},[220,10750,2641],{"class":260},[220,10752,10753],{"class":226}," MyComponent",[220,10755,2647],{"class":264},[220,10757,10758,10760,10762,10765,10767,10770,10772,10774,10776,10778,10780],{"class":222,"line":644},[220,10759,2705],{"class":260},[220,10761,2708],{"class":264},[220,10763,10764],{"class":420},"angle",[220,10766,1895],{"class":264},[220,10768,10769],{"class":420},"setAngle",[220,10771,2719],{"class":264},[220,10773,353],{"class":260},[220,10775,2724],{"class":226},[220,10777,2626],{"class":264},[220,10779,8673],{"class":420},[220,10781,2632],{"class":264},[220,10783,10784],{"class":222,"line":650},[220,10785,647],{"emptyLinePlaceholder":194},[220,10787,10788,10790],{"class":222,"line":656},[220,10789,2739],{"class":260},[220,10791,2742],{"class":264},[220,10793,10794],{"class":222,"line":673},[220,10795,10796],{"class":264}," \u003C>\n",[220,10798,10799,10801,10803],{"class":222,"line":682},[220,10800,2813],{"class":264},[220,10802,3398],{"class":346},[220,10804,359],{"class":264},[220,10806,10807,10810,10812,10815,10817,10819,10821,10824,10826,10828,10831,10834,10837,10840,10843,10845],{"class":222,"line":691},[220,10808,10809],{"class":264}," \u003C",[220,10811,10577],{"class":346},[220,10813,10814],{"class":226}," onClick",[220,10816,353],{"class":260},[220,10818,2759],{"class":264},[220,10820,2762],{"class":260},[220,10822,10823],{"class":226}," setAngle",[220,10825,2626],{"class":264},[220,10827,56],{"class":3621},[220,10829,10830],{"class":260}," =>",[220,10832,10833],{"class":264}," a ",[220,10835,10836],{"class":260},"+",[220,10838,10839],{"class":420}," 45",[220,10841,10842],{"class":264},")}>Rotate +45°\u003C\u002F",[220,10844,10577],{"class":346},[220,10846,359],{"class":264},[220,10848,10849,10851,10853,10855,10857,10859,10861,10863,10865,10867,10869,10871,10874,10876,10879,10881],{"class":222,"line":696},[220,10850,10809],{"class":264},[220,10852,10577],{"class":346},[220,10854,10814],{"class":226},[220,10856,353],{"class":260},[220,10858,2759],{"class":264},[220,10860,2762],{"class":260},[220,10862,10823],{"class":226},[220,10864,2626],{"class":264},[220,10866,56],{"class":3621},[220,10868,10830],{"class":260},[220,10870,10833],{"class":264},[220,10872,10873],{"class":260},"-",[220,10875,10839],{"class":420},[220,10877,10878],{"class":264},")}>Rotate -45°\u003C\u002F",[220,10880,10577],{"class":346},[220,10882,359],{"class":264},[220,10884,10885,10887,10889,10891,10893,10895,10897,10899,10901,10903,10906,10908],{"class":222,"line":702},[220,10886,10809],{"class":264},[220,10888,10577],{"class":346},[220,10890,10814],{"class":226},[220,10892,353],{"class":260},[220,10894,2759],{"class":264},[220,10896,2762],{"class":260},[220,10898,10823],{"class":226},[220,10900,2626],{"class":264},[220,10902,8673],{"class":420},[220,10904,10905],{"class":264},")}>Reset\u003C\u002F",[220,10907,10577],{"class":346},[220,10909,359],{"class":264},[220,10911,10912,10915,10917],{"class":222,"line":718},[220,10913,10914],{"class":264}," \u003C\u002F",[220,10916,3398],{"class":346},[220,10918,359],{"class":264},[220,10920,10921],{"class":222,"line":727},[220,10922,647],{"emptyLinePlaceholder":194},[220,10924,10925,10927,10929],{"class":222,"line":2664},[220,10926,2813],{"class":264},[220,10928,347],{"class":420},[220,10930,359],{"class":264},[220,10932,10933,10935,10937,10939,10941,10943,10945,10947,10949,10951,10953,10955,10957,10959,10961],{"class":222,"line":3522},[220,10934,10809],{"class":264},[220,10936,2553],{"class":420},[220,10938,9100],{"class":226},[220,10940,353],{"class":260},[220,10942,10665],{"class":230},[220,10944,6202],{"class":226},[220,10946,353],{"class":260},[220,10948,743],{"class":264},[220,10950,6299],{"class":420},[220,10952,2914],{"class":264},[220,10954,2711],{"class":226},[220,10956,353],{"class":260},[220,10958,743],{"class":264},[220,10960,2629],{"class":420},[220,10962,6302],{"class":264},[220,10964,10965,10967,10969,10971,10973,10976,10978,10980,10982],{"class":222,"line":9662},[220,10966,10809],{"class":264},[220,10968,367],{"class":420},[220,10970,10532],{"class":226},[220,10972,353],{"class":260},[220,10974,10975],{"class":264},"{angle} ",[220,10977,9064],{"class":226},[220,10979,353],{"class":260},[220,10981,10665],{"class":230},[220,10983,386],{"class":264},[220,10985,10986,10988,10990],{"class":222,"line":9673},[220,10987,10914],{"class":264},[220,10989,347],{"class":420},[220,10991,359],{"class":264},[220,10993,10994],{"class":222,"line":9678},[220,10995,10996],{"class":264}," \u003C\u002F>\n",[220,10998,11000],{"class":222,"line":10999},20,[220,11001,2837],{"class":264},[220,11003,11005],{"class":222,"line":11004},21,[220,11006,749],{"class":264},[212,11008,11010],{"className":468,"code":11009,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n\n let angle = 0\n\u003C\u002Fscript>\n\n\u003Cdiv>\n \u003Cbutton on:click={() => angle += 45}>Rotate +45°\u003C\u002Fbutton>\n \u003Cbutton on:click={() => angle -= 45}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton on:click={() => angle = 0}>Reset\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient {angle} maskSource=\"mask\" \u002F>\n\u003C\u002FShader>\n",[99,11011,11012,11020,11025,11029,11034,11042,11046,11054,11088,11120,11151,11159,11163,11171,11203,11220],{"__ignoreMap":178},[220,11013,11014,11016,11018],{"class":222,"line":223},[220,11015,343],{"class":264},[220,11017,2590],{"class":346},[220,11019,359],{"class":264},[220,11021,11022],{"class":222,"line":179},[220,11023,11024],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,11026,11027],{"class":222,"line":389},[220,11028,647],{"emptyLinePlaceholder":194},[220,11030,11031],{"class":222,"line":399},[220,11032,11033],{"class":264}," let angle = 0\n",[220,11035,11036,11038,11040],{"class":222,"line":644},[220,11037,402],{"class":264},[220,11039,2590],{"class":346},[220,11041,359],{"class":264},[220,11043,11044],{"class":222,"line":650},[220,11045,647],{"emptyLinePlaceholder":194},[220,11047,11048,11050,11052],{"class":222,"line":656},[220,11049,343],{"class":264},[220,11051,3398],{"class":346},[220,11053,359],{"class":264},[220,11055,11056,11058,11060,11062,11064,11067,11069,11071,11073,11076,11079,11081,11084,11086],{"class":222,"line":673},[220,11057,364],{"class":264},[220,11059,10577],{"class":346},[220,11061,5441],{"class":226},[220,11063,1554],{"class":264},[220,11065,11066],{"class":226},"click",[220,11068,353],{"class":260},[220,11070,2759],{"class":264},[220,11072,2762],{"class":260},[220,11074,11075],{"class":264}," angle ",[220,11077,11078],{"class":260},"+=",[220,11080,10839],{"class":420},[220,11082,11083],{"class":264},"}>Rotate +45°\u003C\u002F",[220,11085,10577],{"class":346},[220,11087,359],{"class":264},[220,11089,11090,11092,11094,11096,11098,11100,11102,11104,11106,11108,11111,11113,11116,11118],{"class":222,"line":682},[220,11091,364],{"class":264},[220,11093,10577],{"class":346},[220,11095,5441],{"class":226},[220,11097,1554],{"class":264},[220,11099,11066],{"class":226},[220,11101,353],{"class":260},[220,11103,2759],{"class":264},[220,11105,2762],{"class":260},[220,11107,11075],{"class":264},[220,11109,11110],{"class":260},"-=",[220,11112,10839],{"class":420},[220,11114,11115],{"class":264},"}>Rotate -45°\u003C\u002F",[220,11117,10577],{"class":346},[220,11119,359],{"class":264},[220,11121,11122,11124,11126,11128,11130,11132,11134,11136,11138,11140,11142,11144,11147,11149],{"class":222,"line":691},[220,11123,364],{"class":264},[220,11125,10577],{"class":346},[220,11127,5441],{"class":226},[220,11129,1554],{"class":264},[220,11131,11066],{"class":226},[220,11133,353],{"class":260},[220,11135,2759],{"class":264},[220,11137,2762],{"class":260},[220,11139,11075],{"class":264},[220,11141,353],{"class":260},[220,11143,2794],{"class":420},[220,11145,11146],{"class":264},"}>Reset\u003C\u002F",[220,11148,10577],{"class":346},[220,11150,359],{"class":264},[220,11152,11153,11155,11157],{"class":222,"line":696},[220,11154,402],{"class":264},[220,11156,3398],{"class":346},[220,11158,359],{"class":264},[220,11160,11161],{"class":222,"line":702},[220,11162,647],{"emptyLinePlaceholder":194},[220,11164,11165,11167,11169],{"class":222,"line":718},[220,11166,343],{"class":264},[220,11168,347],{"class":420},[220,11170,359],{"class":264},[220,11172,11173,11175,11177,11179,11181,11183,11185,11187,11189,11191,11193,11195,11197,11199,11201],{"class":222,"line":727},[220,11174,364],{"class":264},[220,11176,2553],{"class":420},[220,11178,9100],{"class":226},[220,11180,353],{"class":260},[220,11182,10665],{"class":230},[220,11184,6202],{"class":226},[220,11186,353],{"class":260},[220,11188,743],{"class":264},[220,11190,6299],{"class":420},[220,11192,2914],{"class":264},[220,11194,2711],{"class":226},[220,11196,353],{"class":260},[220,11198,743],{"class":264},[220,11200,2629],{"class":420},[220,11202,6302],{"class":264},[220,11204,11205,11207,11209,11212,11214,11216,11218],{"class":222,"line":2664},[220,11206,364],{"class":264},[220,11208,367],{"class":420},[220,11210,11211],{"class":264}," {angle} ",[220,11213,9064],{"class":226},[220,11215,353],{"class":260},[220,11217,10665],{"class":230},[220,11219,386],{"class":264},[220,11221,11222,11224,11226],{"class":222,"line":3522},[220,11223,402],{"class":264},[220,11225,347],{"class":420},[220,11227,359],{"class":264},[212,11229,11231],{"className":468,"code":11230,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Fsolid'\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\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C\u002Fbutton>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} \u002F>\n \u003CLinearGradient angle={angle()} maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,11232,11233,11243,11253,11257,11265,11289,11293,11299,11303,11311,11345,11379,11405,11413,11417,11425,11457,11481,11489,11493,11497],{"__ignoreMap":178},[220,11234,11235,11237,11239,11241],{"class":222,"line":223},[220,11236,261],{"class":260},[220,11238,2982],{"class":264},[220,11240,268],{"class":260},[220,11242,2987],{"class":230},[220,11244,11245,11247,11249,11251],{"class":222,"line":179},[220,11246,261],{"class":260},[220,11248,10517],{"class":264},[220,11250,268],{"class":260},[220,11252,319],{"class":230},[220,11254,11255],{"class":222,"line":389},[220,11256,647],{"emptyLinePlaceholder":194},[220,11258,11259,11261,11263],{"class":222,"line":399},[220,11260,2641],{"class":260},[220,11262,10753],{"class":226},[220,11264,2647],{"class":264},[220,11266,11267,11269,11271,11273,11275,11277,11279,11281,11283,11285,11287],{"class":222,"line":644},[220,11268,2705],{"class":260},[220,11270,2708],{"class":264},[220,11272,10764],{"class":420},[220,11274,1895],{"class":264},[220,11276,10769],{"class":420},[220,11278,2719],{"class":264},[220,11280,353],{"class":260},[220,11282,3018],{"class":226},[220,11284,2626],{"class":264},[220,11286,8673],{"class":420},[220,11288,2632],{"class":264},[220,11290,11291],{"class":222,"line":650},[220,11292,647],{"emptyLinePlaceholder":194},[220,11294,11295,11297],{"class":222,"line":656},[220,11296,2739],{"class":260},[220,11298,2742],{"class":264},[220,11300,11301],{"class":222,"line":673},[220,11302,10796],{"class":264},[220,11304,11305,11307,11309],{"class":222,"line":682},[220,11306,2813],{"class":264},[220,11308,3398],{"class":346},[220,11310,359],{"class":264},[220,11312,11313,11315,11317,11319,11321,11323,11325,11327,11329,11331,11333,11335,11337,11339,11341,11343],{"class":222,"line":691},[220,11314,10809],{"class":264},[220,11316,10577],{"class":346},[220,11318,10814],{"class":226},[220,11320,353],{"class":260},[220,11322,2759],{"class":264},[220,11324,2762],{"class":260},[220,11326,10823],{"class":226},[220,11328,2626],{"class":264},[220,11330,56],{"class":3621},[220,11332,10830],{"class":260},[220,11334,10833],{"class":264},[220,11336,10836],{"class":260},[220,11338,10839],{"class":420},[220,11340,10842],{"class":264},[220,11342,10577],{"class":346},[220,11344,359],{"class":264},[220,11346,11347,11349,11351,11353,11355,11357,11359,11361,11363,11365,11367,11369,11371,11373,11375,11377],{"class":222,"line":696},[220,11348,10809],{"class":264},[220,11350,10577],{"class":346},[220,11352,10814],{"class":226},[220,11354,353],{"class":260},[220,11356,2759],{"class":264},[220,11358,2762],{"class":260},[220,11360,10823],{"class":226},[220,11362,2626],{"class":264},[220,11364,56],{"class":3621},[220,11366,10830],{"class":260},[220,11368,10833],{"class":264},[220,11370,10873],{"class":260},[220,11372,10839],{"class":420},[220,11374,10878],{"class":264},[220,11376,10577],{"class":346},[220,11378,359],{"class":264},[220,11380,11381,11383,11385,11387,11389,11391,11393,11395,11397,11399,11401,11403],{"class":222,"line":702},[220,11382,10809],{"class":264},[220,11384,10577],{"class":346},[220,11386,10814],{"class":226},[220,11388,353],{"class":260},[220,11390,2759],{"class":264},[220,11392,2762],{"class":260},[220,11394,10823],{"class":226},[220,11396,2626],{"class":264},[220,11398,8673],{"class":420},[220,11400,10905],{"class":264},[220,11402,10577],{"class":346},[220,11404,359],{"class":264},[220,11406,11407,11409,11411],{"class":222,"line":718},[220,11408,10914],{"class":264},[220,11410,3398],{"class":346},[220,11412,359],{"class":264},[220,11414,11415],{"class":222,"line":727},[220,11416,647],{"emptyLinePlaceholder":194},[220,11418,11419,11421,11423],{"class":222,"line":2664},[220,11420,2813],{"class":264},[220,11422,347],{"class":420},[220,11424,359],{"class":264},[220,11426,11427,11429,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455],{"class":222,"line":3522},[220,11428,10809],{"class":264},[220,11430,2553],{"class":420},[220,11432,9100],{"class":226},[220,11434,353],{"class":260},[220,11436,10665],{"class":230},[220,11438,6202],{"class":226},[220,11440,353],{"class":260},[220,11442,743],{"class":264},[220,11444,6299],{"class":420},[220,11446,2914],{"class":264},[220,11448,2711],{"class":226},[220,11450,353],{"class":260},[220,11452,743],{"class":264},[220,11454,2629],{"class":420},[220,11456,6302],{"class":264},[220,11458,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477,11479],{"class":222,"line":9662},[220,11460,10809],{"class":264},[220,11462,367],{"class":420},[220,11464,10532],{"class":226},[220,11466,353],{"class":260},[220,11468,743],{"class":264},[220,11470,10764],{"class":226},[220,11472,3933],{"class":264},[220,11474,9064],{"class":226},[220,11476,353],{"class":260},[220,11478,10665],{"class":230},[220,11480,386],{"class":264},[220,11482,11483,11485,11487],{"class":222,"line":9673},[220,11484,10914],{"class":264},[220,11486,347],{"class":420},[220,11488,359],{"class":264},[220,11490,11491],{"class":222,"line":9678},[220,11492,10996],{"class":264},[220,11494,11495],{"class":222,"line":10999},[220,11496,2837],{"class":264},[220,11498,11499],{"class":222,"line":11004},[220,11500,749],{"class":264},[212,11502,11504],{"className":251,"code":11503,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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\u002F\u002F Update angle at runtime\nshader.update('gradient', { angle: 45 })\n\n\u002F\u002F Reset angle\nshader.update('gradient', { angle: 0 })\n",[99,11505,11506,11517,11521,11535,11539,11559,11581,11585,11589,11593,11598,11618,11622,11627],{"__ignoreMap":178},[220,11507,11508,11510,11513,11515],{"class":222,"line":223},[220,11509,261],{"class":260},[220,11511,11512],{"class":264}," { createShader } ",[220,11514,268],{"class":260},[220,11516,4007],{"class":230},[220,11518,11519],{"class":222,"line":179},[220,11520,647],{"emptyLinePlaceholder":194},[220,11522,11523,11525,11527,11529,11531,11533],{"class":222,"line":389},[220,11524,1735],{"class":260},[220,11526,1738],{"class":420},[220,11528,1741],{"class":260},[220,11530,1744],{"class":260},[220,11532,1747],{"class":226},[220,11534,1750],{"class":264},[220,11536,11537],{"class":222,"line":399},[220,11538,1765],{"class":264},[220,11540,11541,11543,11545,11547,11549,11551,11553,11555,11557],{"class":222,"line":644},[220,11542,1770],{"class":264},[220,11544,3206],{"class":230},[220,11546,3209],{"class":264},[220,11548,10163],{"class":230},[220,11550,7541],{"class":264},[220,11552,6299],{"class":420},[220,11554,9455],{"class":264},[220,11556,2629],{"class":420},[220,11558,6571],{"class":264},[220,11560,11561,11563,11565,11567,11570,11573,11575,11577,11579],{"class":222,"line":650},[220,11562,1770],{"class":264},[220,11564,2462],{"class":230},[220,11566,3209],{"class":264},[220,11568,11569],{"class":230},"'gradient'",[220,11571,11572],{"class":264},", props: { angle: ",[220,11574,8673],{"class":420},[220,11576,10198],{"class":264},[220,11578,10163],{"class":230},[220,11580,1782],{"class":264},[220,11582,11583],{"class":222,"line":656},[220,11584,1787],{"class":264},[220,11586,11587],{"class":222,"line":673},[220,11588,1792],{"class":264},[220,11590,11591],{"class":222,"line":682},[220,11592,647],{"emptyLinePlaceholder":194},[220,11594,11595],{"class":222,"line":691},[220,11596,11597],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,11599,11600,11603,11606,11608,11610,11613,11615],{"class":222,"line":696},[220,11601,11602],{"class":264},"shader.",[220,11604,11605],{"class":226},"update",[220,11607,2626],{"class":264},[220,11609,11569],{"class":230},[220,11611,11612],{"class":264},", { angle: ",[220,11614,1295],{"class":420},[220,11616,11617],{"class":264}," })\n",[220,11619,11620],{"class":222,"line":702},[220,11621,647],{"emptyLinePlaceholder":194},[220,11623,11624],{"class":222,"line":718},[220,11625,11626],{"class":609},"\u002F\u002F Reset angle\n",[220,11628,11629,11631,11633,11635,11637,11639,11641],{"class":222,"line":727},[220,11630,11602],{"class":264},[220,11632,11605],{"class":226},[220,11634,2626],{"class":264},[220,11636,11569],{"class":230},[220,11638,11612],{"class":264},[220,11640,8673],{"class":420},[220,11642,11617],{"class":264},[15,11644,11645],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[11647,11648],"interactive-shader-demo",{":controls":11649,":preset":11650},"[{\"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,11652,11653],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,11655,11657],{"id":11656},"common-reactive-props","Common Reactive Props",[15,11659,11660],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,11662,11663,1554],{},[159,11664,11665],{},"Position and Size",[212,11667,11671],{"className":11668,"code":11669,"language":11670,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,11672,11673],{"__ignoreMap":178},[220,11674,11675,11677,11679,11681,11684,11686,11689,11692,11694,11696,11698,11700,11702,11705,11707],{"class":222,"line":223},[220,11676,343],{"class":264},[220,11678,2553],{"class":346},[220,11680,2791],{"class":264},[220,11682,11683],{"class":226},"radius",[220,11685,353],{"class":264},[220,11687,11688],{"class":230},"\"",[220,11690,11691],{"class":264},"size",[220,11693,11688],{"class":230},[220,11695,2791],{"class":264},[220,11697,8241],{"class":226},[220,11699,353],{"class":264},[220,11701,11688],{"class":230},[220,11703,11704],{"class":264},"{ x: posX, y: posY }",[220,11706,11688],{"class":230},[220,11708,386],{"class":264},[15,11710,11711,1554],{},[159,11712,11713],{},"Colors",[212,11715,11717],{"className":11668,"code":11716,"language":11670,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,11718,11719],{"__ignoreMap":178},[220,11720,11721,11723,11725,11727,11729,11731,11733,11736,11738,11740,11742,11744,11746,11749,11751],{"class":222,"line":223},[220,11722,343],{"class":264},[220,11724,367],{"class":346},[220,11726,2791],{"class":264},[220,11728,1863],{"class":226},[220,11730,353],{"class":264},[220,11732,11688],{"class":230},[220,11734,11735],{"class":264},"startColor",[220,11737,11688],{"class":230},[220,11739,2791],{"class":264},[220,11741,1867],{"class":226},[220,11743,353],{"class":264},[220,11745,11688],{"class":230},[220,11747,11748],{"class":264},"endColor",[220,11750,11688],{"class":230},[220,11752,386],{"class":264},[15,11754,11755,1554],{},[159,11756,11757],{},"Intensity and Strength",[212,11759,11761],{"className":11668,"code":11760,"language":11670,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,11762,11763,11786],{"__ignoreMap":178},[220,11764,11765,11767,11770,11772,11775,11777,11779,11782,11784],{"class":222,"line":223},[220,11766,343],{"class":264},[220,11768,11769],{"class":346},"Blur",[220,11771,2791],{"class":264},[220,11773,11774],{"class":226},"intensity",[220,11776,353],{"class":264},[220,11778,11688],{"class":230},[220,11780,11781],{"class":264},"blurAmount",[220,11783,11688],{"class":230},[220,11785,386],{"class":264},[220,11787,11788,11790,11793,11795,11798,11800,11802,11805,11807],{"class":222,"line":179},[220,11789,343],{"class":264},[220,11791,11792],{"class":346},"Glow",[220,11794,2791],{"class":264},[220,11796,11797],{"class":226},"strength",[220,11799,353],{"class":264},[220,11801,11688],{"class":230},[220,11803,11804],{"class":264},"glowPower",[220,11806,11688],{"class":230},[220,11808,386],{"class":264},[15,11810,11811,1554],{},[159,11812,11813],{},"Angles and Rotation",[212,11815,11817],{"className":11668,"code":11816,"language":11670,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,11818,11819],{"__ignoreMap":178},[220,11820,11821,11823,11825,11827,11829,11831,11833,11836,11838],{"class":222,"line":223},[220,11822,343],{"class":264},[220,11824,367],{"class":346},[220,11826,2791],{"class":264},[220,11828,10764],{"class":226},[220,11830,353],{"class":264},[220,11832,11688],{"class":230},[220,11834,11835],{"class":264},"rotation",[220,11837,11688],{"class":230},[220,11839,386],{"class":264},[15,11841,11842],{},"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,11844,11846],{"id":11845},"animating-props","Animating Props",[15,11848,11849],{},"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,11851,11852,11855],{},[159,11853,11854],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,11857,11859],{"className":409,"code":11858,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { animate } from 'motion'\nimport { Shader, LinearGradient, Circle } from 'shaders\u002Freact'\n\nfunction MyComponent() {\n const [radius, setRadius] = useState(0.6)\n\n async function pulse() {\n \u002F\u002F 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\u002Fbutton>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={radius} visible={false} \u002F>\n \u003CLinearGradient maskSource=\"mask\" \u002F>\n \u003C\u002FShader>\n \u003C\u002F>\n )\n}\n",[99,11860,11861,11871,11883,11893,11897,11905,11930,11934,11947,11952,11968,11977,11987,12007,12012,12028,12036,12045,12061,12065,12069,12073,12080,12085,12103,12108,12117,12147,12162,12171,12176,12181],{"__ignoreMap":178},[220,11862,11863,11865,11867,11869],{"class":222,"line":223},[220,11864,261],{"class":260},[220,11866,2682],{"class":264},[220,11868,268],{"class":260},[220,11870,2687],{"class":230},[220,11872,11873,11875,11878,11880],{"class":222,"line":179},[220,11874,261],{"class":260},[220,11876,11877],{"class":264}," { animate } ",[220,11879,268],{"class":260},[220,11881,11882],{"class":230}," 'motion'\n",[220,11884,11885,11887,11889,11891],{"class":222,"line":389},[220,11886,261],{"class":260},[220,11888,10517],{"class":264},[220,11890,268],{"class":260},[220,11892,287],{"class":230},[220,11894,11895],{"class":222,"line":399},[220,11896,647],{"emptyLinePlaceholder":194},[220,11898,11899,11901,11903],{"class":222,"line":644},[220,11900,2641],{"class":260},[220,11902,10753],{"class":226},[220,11904,2647],{"class":264},[220,11906,11907,11909,11911,11913,11915,11918,11920,11922,11924,11926,11928],{"class":222,"line":650},[220,11908,2705],{"class":260},[220,11910,2708],{"class":264},[220,11912,11683],{"class":420},[220,11914,1895],{"class":264},[220,11916,11917],{"class":420},"setRadius",[220,11919,2719],{"class":264},[220,11921,353],{"class":260},[220,11923,2724],{"class":226},[220,11925,2626],{"class":264},[220,11927,8236],{"class":420},[220,11929,2632],{"class":264},[220,11931,11932],{"class":222,"line":656},[220,11933,647],{"emptyLinePlaceholder":194},[220,11935,11936,11939,11942,11945],{"class":222,"line":673},[220,11937,11938],{"class":260}," async",[220,11940,11941],{"class":260}," function",[220,11943,11944],{"class":226}," pulse",[220,11946,2647],{"class":264},[220,11948,11949],{"class":222,"line":682},[220,11950,11951],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,11953,11954,11957,11960,11963,11965],{"class":222,"line":691},[220,11955,11956],{"class":260}," await",[220,11958,11959],{"class":226}," animate",[220,11961,11962],{"class":264},"(radius, ",[220,11964,8677],{"class":420},[220,11966,11967],{"class":264},", {\n",[220,11969,11970,11973,11975],{"class":222,"line":696},[220,11971,11972],{"class":264}," duration: ",[220,11974,7754],{"class":420},[220,11976,1760],{"class":264},[220,11978,11979,11982,11985],{"class":222,"line":702},[220,11980,11981],{"class":264}," easing: ",[220,11983,11984],{"class":230},"'ease-out'",[220,11986,1760],{"class":264},[220,11988,11989,11992,11994,11997,11999,12001,12004],{"class":222,"line":718},[220,11990,11991],{"class":226}," onUpdate",[220,11993,4324],{"class":264},[220,11995,11996],{"class":3621},"latest",[220,11998,4168],{"class":264},[220,12000,2762],{"class":260},[220,12002,12003],{"class":226}," setRadius",[220,12005,12006],{"class":264},"(latest)\n",[220,12008,12009],{"class":222,"line":727},[220,12010,12011],{"class":264}," })\n",[220,12013,12014,12016,12018,12020,12022,12024,12026],{"class":222,"line":2664},[220,12015,11956],{"class":260},[220,12017,11959],{"class":226},[220,12019,2626],{"class":264},[220,12021,8677],{"class":420},[220,12023,1895],{"class":264},[220,12025,8236],{"class":420},[220,12027,11967],{"class":264},[220,12029,12030,12032,12034],{"class":222,"line":3522},[220,12031,11972],{"class":264},[220,12033,7754],{"class":420},[220,12035,1760],{"class":264},[220,12037,12038,12040,12043],{"class":222,"line":9662},[220,12039,11981],{"class":264},[220,12041,12042],{"class":230},"'ease-in'",[220,12044,1760],{"class":264},[220,12046,12047,12049,12051,12053,12055,12057,12059],{"class":222,"line":9673},[220,12048,11991],{"class":226},[220,12050,4324],{"class":264},[220,12052,11996],{"class":3621},[220,12054,4168],{"class":264},[220,12056,2762],{"class":260},[220,12058,12003],{"class":226},[220,12060,12006],{"class":264},[220,12062,12063],{"class":222,"line":9678},[220,12064,12011],{"class":264},[220,12066,12067],{"class":222,"line":10999},[220,12068,3256],{"class":264},[220,12070,12071],{"class":222,"line":11004},[220,12072,647],{"emptyLinePlaceholder":194},[220,12074,12076,12078],{"class":222,"line":12075},22,[220,12077,2739],{"class":260},[220,12079,2742],{"class":264},[220,12081,12083],{"class":222,"line":12082},23,[220,12084,10796],{"class":264},[220,12086,12088,12090,12092,12094,12096,12099,12101],{"class":222,"line":12087},24,[220,12089,2813],{"class":264},[220,12091,10577],{"class":346},[220,12093,10814],{"class":226},[220,12095,353],{"class":260},[220,12097,12098],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,12100,10577],{"class":346},[220,12102,359],{"class":264},[220,12104,12106],{"class":222,"line":12105},25,[220,12107,647],{"emptyLinePlaceholder":194},[220,12109,12111,12113,12115],{"class":222,"line":12110},26,[220,12112,2813],{"class":264},[220,12114,347],{"class":420},[220,12116,359],{"class":264},[220,12118,12120,12122,12124,12126,12128,12130,12132,12134,12137,12139,12141,12143,12145],{"class":222,"line":12119},27,[220,12121,10809],{"class":264},[220,12123,2553],{"class":420},[220,12125,9100],{"class":226},[220,12127,353],{"class":260},[220,12129,10665],{"class":230},[220,12131,6202],{"class":226},[220,12133,353],{"class":260},[220,12135,12136],{"class":264},"{radius} ",[220,12138,2711],{"class":226},[220,12140,353],{"class":260},[220,12142,743],{"class":264},[220,12144,2629],{"class":420},[220,12146,6302],{"class":264},[220,12148,12150,12152,12154,12156,12158,12160],{"class":222,"line":12149},28,[220,12151,10809],{"class":264},[220,12153,367],{"class":420},[220,12155,9139],{"class":226},[220,12157,353],{"class":260},[220,12159,10665],{"class":230},[220,12161,386],{"class":264},[220,12163,12165,12167,12169],{"class":222,"line":12164},29,[220,12166,10914],{"class":264},[220,12168,347],{"class":420},[220,12170,359],{"class":264},[220,12172,12174],{"class":222,"line":12173},30,[220,12175,10996],{"class":264},[220,12177,12179],{"class":222,"line":12178},31,[220,12180,2837],{"class":264},[220,12182,12184],{"class":222,"line":12183},32,[220,12185,749],{"class":264},[11647,12187],{":controls":12188,":preset":12189},"[{\"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,12191,12192],{},"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,12194,12196],{"id":12195},"performance-notes","Performance Notes",[15,12198,12199],{},"Reactive props update GPU uniforms directly. This means:",[34,12201,12202,12208,12214],{},[37,12203,12204,12207],{},[159,12205,12206],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,12209,12210,12213],{},[159,12211,12212],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,12215,12216,12219],{},[159,12217,12218],{},"Frame-rate friendly",": Animate as many props as you need",[15,12221,12222],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,12224,12225],{},"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":178,"searchDepth":179,"depth":179,"links":12227},[12228,12229,12230,12231,12232],{"id":10252,"depth":179,"text":10253},{"id":10479,"depth":179,"text":10480},{"id":11656,"depth":179,"text":11657},{"id":11845,"depth":179,"text":11846},{"id":12195,"depth":179,"text":12196},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":12233},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":12240,"title":1489,"body":12241,"category":188,"description":15008,"exclude":190,"extension":191,"forceFramework":190,"icon":15009,"meta":15010,"navigation":194,"path":1488,"seo":15011,"stem":15012,"__hash__":15013},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":12242,"toc":14992},[12243,12246,12254,12258,12267,12269,12274,12573,12577,12581,12584,13011,13015,13025,13374,13378,13381,13942,13946,13949,14263,14267,14271,14278,14419,14431,14435,14446,14521,14525,14528,14755,14759,14762,14989],[11,12244,1489],{"id":12245},"layout-positioning",[15,12247,1839,12248,12250,12251,12253],{},[99,12249,101],{}," component renders a ",[99,12252,586],{}," 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,12255,12257],{"id":12256},"the-canvas-model","The canvas model",[15,12259,12260,12261,12263,12264,12266],{},"Every ",[99,12262,101],{}," renders exactly one ",[99,12265,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,12268,594],{"id":593},[15,12270,12271,12272,1938],{},"Apply classes or styles directly to the ",[99,12273,101],{},[246,12275,12276,12395,12430,12465,12499],{":tabs":1557},[212,12277,12279],{"className":334,"code":12278,"language":336,"meta":178,"style":178},"\u003C!-- Tailwind -->\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- CSS class -->\n\u003CShader class=\"hero-shader\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Inline -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12280,12281,12286,12300,12308,12316,12320,12325,12340,12348,12356,12360,12365,12379,12387],{"__ignoreMap":178},[220,12282,12283],{"class":222,"line":223},[220,12284,12285],{"class":609},"\u003C!-- Tailwind -->\n",[220,12287,12288,12290,12292,12294,12296,12298],{"class":222,"line":179},[220,12289,343],{"class":264},[220,12291,347],{"class":346},[220,12293,350],{"class":226},[220,12295,353],{"class":264},[220,12297,356],{"class":230},[220,12299,359],{"class":264},[220,12301,12302,12304,12306],{"class":222,"line":389},[220,12303,364],{"class":264},[220,12305,367],{"class":346},[220,12307,386],{"class":264},[220,12309,12310,12312,12314],{"class":222,"line":399},[220,12311,402],{"class":264},[220,12313,347],{"class":346},[220,12315,359],{"class":264},[220,12317,12318],{"class":222,"line":644},[220,12319,647],{"emptyLinePlaceholder":194},[220,12321,12322],{"class":222,"line":650},[220,12323,12324],{"class":609},"\u003C!-- CSS class -->\n",[220,12326,12327,12329,12331,12333,12335,12338],{"class":222,"line":656},[220,12328,343],{"class":264},[220,12330,347],{"class":346},[220,12332,350],{"class":226},[220,12334,353],{"class":264},[220,12336,12337],{"class":230},"\"hero-shader\"",[220,12339,359],{"class":264},[220,12341,12342,12344,12346],{"class":222,"line":673},[220,12343,364],{"class":264},[220,12345,367],{"class":346},[220,12347,386],{"class":264},[220,12349,12350,12352,12354],{"class":222,"line":682},[220,12351,402],{"class":264},[220,12353,347],{"class":346},[220,12355,359],{"class":264},[220,12357,12358],{"class":222,"line":691},[220,12359,647],{"emptyLinePlaceholder":194},[220,12361,12362],{"class":222,"line":696},[220,12363,12364],{"class":609},"\u003C!-- Inline -->\n",[220,12366,12367,12369,12371,12373,12375,12377],{"class":222,"line":702},[220,12368,343],{"class":264},[220,12370,347],{"class":346},[220,12372,663],{"class":226},[220,12374,353],{"class":264},[220,12376,668],{"class":230},[220,12378,359],{"class":264},[220,12380,12381,12383,12385],{"class":222,"line":718},[220,12382,364],{"class":264},[220,12384,367],{"class":346},[220,12386,386],{"class":264},[220,12388,12389,12391,12393],{"class":222,"line":727},[220,12390,402],{"class":264},[220,12392,347],{"class":346},[220,12394,359],{"class":264},[212,12396,12398],{"className":409,"code":12397,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12399,12400,12414,12422],{"__ignoreMap":178},[220,12401,12402,12404,12406,12408,12410,12412],{"class":222,"line":223},[220,12403,343],{"class":264},[220,12405,347],{"class":420},[220,12407,423],{"class":226},[220,12409,353],{"class":260},[220,12411,356],{"class":230},[220,12413,359],{"class":264},[220,12415,12416,12418,12420],{"class":222,"line":179},[220,12417,364],{"class":264},[220,12419,367],{"class":420},[220,12421,386],{"class":264},[220,12423,12424,12426,12428],{"class":222,"line":389},[220,12425,402],{"class":264},[220,12427,347],{"class":420},[220,12429,359],{"class":264},[212,12431,12433],{"className":468,"code":12432,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12434,12435,12449,12457],{"__ignoreMap":178},[220,12436,12437,12439,12441,12443,12445,12447],{"class":222,"line":223},[220,12438,343],{"class":264},[220,12440,347],{"class":420},[220,12442,350],{"class":226},[220,12444,353],{"class":260},[220,12446,356],{"class":230},[220,12448,359],{"class":264},[220,12450,12451,12453,12455],{"class":222,"line":179},[220,12452,364],{"class":264},[220,12454,367],{"class":420},[220,12456,386],{"class":264},[220,12458,12459,12461,12463],{"class":222,"line":389},[220,12460,402],{"class":264},[220,12462,347],{"class":420},[220,12464,359],{"class":264},[212,12466,12467],{"className":468,"code":12432,"language":469,"meta":178,"style":178},[99,12468,12469,12483,12491],{"__ignoreMap":178},[220,12470,12471,12473,12475,12477,12479,12481],{"class":222,"line":223},[220,12472,343],{"class":264},[220,12474,347],{"class":420},[220,12476,350],{"class":226},[220,12478,353],{"class":260},[220,12480,356],{"class":230},[220,12482,359],{"class":264},[220,12484,12485,12487,12489],{"class":222,"line":179},[220,12486,364],{"class":264},[220,12488,367],{"class":420},[220,12490,386],{"class":264},[220,12492,12493,12495,12497],{"class":222,"line":389},[220,12494,402],{"class":264},[220,12496,347],{"class":420},[220,12498,359],{"class":264},[212,12500,12502],{"className":251,"code":12501,"language":253,"meta":178,"style":178},"\u002F\u002F 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",[99,12503,12504,12509,12528,12538,12548,12552],{"__ignoreMap":178},[220,12505,12506],{"class":222,"line":223},[220,12507,12508],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,12510,12511,12513,12515,12517,12519,12521,12523,12526],{"class":222,"line":179},[220,12512,1735],{"class":260},[220,12514,3133],{"class":420},[220,12516,1741],{"class":260},[220,12518,3138],{"class":264},[220,12520,3141],{"class":226},[220,12522,2626],{"class":264},[220,12524,12525],{"class":230},"'my-shader'",[220,12527,2632],{"class":264},[220,12529,12530,12533,12535],{"class":222,"line":389},[220,12531,12532],{"class":264},"canvas.style.width ",[220,12534,353],{"class":260},[220,12536,12537],{"class":230}," '100%'\n",[220,12539,12540,12543,12545],{"class":222,"line":399},[220,12541,12542],{"class":264},"canvas.style.height ",[220,12544,353],{"class":260},[220,12546,12547],{"class":230}," '400px'\n",[220,12549,12550],{"class":222,"line":644},[220,12551,647],{"emptyLinePlaceholder":194},[220,12553,12554,12556,12558,12560,12562,12564,12567,12570],{"class":222,"line":650},[220,12555,1735],{"class":260},[220,12557,1738],{"class":420},[220,12559,1741],{"class":260},[220,12561,1744],{"class":260},[220,12563,1747],{"class":226},[220,12565,12566],{"class":264},"(canvas, { components: [",[220,12568,12569],{"class":260},"...",[220,12571,12572],{"class":264},"] })\n",[23,12574,12576],{"id":12575},"common-layout-patterns","Common layout patterns",[3262,12578,12580],{"id":12579},"full-page-background","Full-page background",[15,12582,12583],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,12585,12586,12661,12738,12804,12877],{":tabs":1557},[212,12587,12589],{"className":334,"code":12588,"language":336,"meta":178,"style":178},"\u003C!-- In your layout or App.vue -->\n\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content scrolls over the shader -->\n\u003C\u002Fmain>\n",[99,12590,12591,12596,12611,12620,12628,12632,12648,12653],{"__ignoreMap":178},[220,12592,12593],{"class":222,"line":223},[220,12594,12595],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,12597,12598,12600,12602,12604,12606,12609],{"class":222,"line":179},[220,12599,343],{"class":264},[220,12601,347],{"class":346},[220,12603,350],{"class":226},[220,12605,353],{"class":264},[220,12607,12608],{"class":230},"\"fixed inset-0 -z-10\"",[220,12610,359],{"class":264},[220,12612,12613,12615,12618],{"class":222,"line":389},[220,12614,364],{"class":264},[220,12616,12617],{"class":346},"Aurora",[220,12619,386],{"class":264},[220,12621,12622,12624,12626],{"class":222,"line":399},[220,12623,402],{"class":264},[220,12625,347],{"class":346},[220,12627,359],{"class":264},[220,12629,12630],{"class":222,"line":644},[220,12631,647],{"emptyLinePlaceholder":194},[220,12633,12634,12636,12639,12641,12643,12646],{"class":222,"line":650},[220,12635,343],{"class":264},[220,12637,12638],{"class":346},"main",[220,12640,350],{"class":226},[220,12642,353],{"class":264},[220,12644,12645],{"class":230},"\"relative z-10\"",[220,12647,359],{"class":264},[220,12649,12650],{"class":222,"line":656},[220,12651,12652],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,12654,12655,12657,12659],{"class":222,"line":673},[220,12656,402],{"class":264},[220,12658,12638],{"class":346},[220,12660,359],{"class":264},[212,12662,12664],{"className":409,"code":12663,"language":411,"meta":178,"style":178},"\u003C>\n \u003CShader className=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n \u003Cmain className=\"relative z-10\">\n {\u002F* Your page content *\u002F}\n \u003C\u002Fmain>\n\u003C\u002F>\n",[99,12665,12666,12671,12685,12693,12701,12715,12725,12733],{"__ignoreMap":178},[220,12667,12668],{"class":222,"line":223},[220,12669,12670],{"class":264},"\u003C>\n",[220,12672,12673,12675,12677,12679,12681,12683],{"class":222,"line":179},[220,12674,364],{"class":264},[220,12676,347],{"class":420},[220,12678,423],{"class":226},[220,12680,353],{"class":260},[220,12682,12608],{"class":230},[220,12684,359],{"class":264},[220,12686,12687,12689,12691],{"class":222,"line":389},[220,12688,2550],{"class":264},[220,12690,12617],{"class":420},[220,12692,386],{"class":264},[220,12694,12695,12697,12699],{"class":222,"line":399},[220,12696,2567],{"class":264},[220,12698,347],{"class":420},[220,12700,359],{"class":264},[220,12702,12703,12705,12707,12709,12711,12713],{"class":222,"line":644},[220,12704,364],{"class":264},[220,12706,12638],{"class":346},[220,12708,423],{"class":226},[220,12710,353],{"class":260},[220,12712,12645],{"class":230},[220,12714,359],{"class":264},[220,12716,12717,12720,12723],{"class":222,"line":650},[220,12718,12719],{"class":264}," {",[220,12721,12722],{"class":609},"\u002F* Your page content *\u002F",[220,12724,749],{"class":264},[220,12726,12727,12729,12731],{"class":222,"line":656},[220,12728,2567],{"class":264},[220,12730,12638],{"class":346},[220,12732,359],{"class":264},[220,12734,12735],{"class":222,"line":673},[220,12736,12737],{"class":264},"\u003C\u002F>\n",[212,12739,12741],{"className":468,"code":12740,"language":469,"meta":178,"style":178},"\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content -->\n\u003C\u002Fmain>\n",[99,12742,12743,12757,12765,12773,12777,12791,12796],{"__ignoreMap":178},[220,12744,12745,12747,12749,12751,12753,12755],{"class":222,"line":223},[220,12746,343],{"class":264},[220,12748,347],{"class":420},[220,12750,350],{"class":226},[220,12752,353],{"class":260},[220,12754,12608],{"class":230},[220,12756,359],{"class":264},[220,12758,12759,12761,12763],{"class":222,"line":179},[220,12760,364],{"class":264},[220,12762,12617],{"class":420},[220,12764,386],{"class":264},[220,12766,12767,12769,12771],{"class":222,"line":389},[220,12768,402],{"class":264},[220,12770,347],{"class":420},[220,12772,359],{"class":264},[220,12774,12775],{"class":222,"line":399},[220,12776,647],{"emptyLinePlaceholder":194},[220,12778,12779,12781,12783,12785,12787,12789],{"class":222,"line":644},[220,12780,343],{"class":264},[220,12782,12638],{"class":346},[220,12784,350],{"class":226},[220,12786,353],{"class":260},[220,12788,12645],{"class":230},[220,12790,359],{"class":264},[220,12792,12793],{"class":222,"line":650},[220,12794,12795],{"class":264}," \u003C!-- Your page content -->\n",[220,12797,12798,12800,12802],{"class":222,"line":656},[220,12799,402],{"class":264},[220,12801,12638],{"class":346},[220,12803,359],{"class":264},[212,12805,12807],{"className":468,"code":12806,"language":469,"meta":178,"style":178},"\u003C>\n \u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n \u003Cmain class=\"relative z-10\">\n {\u002F* Your page content *\u002F}\n \u003C\u002Fmain>\n\u003C\u002F>\n",[99,12808,12809,12813,12827,12835,12843,12857,12865,12873],{"__ignoreMap":178},[220,12810,12811],{"class":222,"line":223},[220,12812,12670],{"class":264},[220,12814,12815,12817,12819,12821,12823,12825],{"class":222,"line":179},[220,12816,364],{"class":264},[220,12818,347],{"class":420},[220,12820,350],{"class":226},[220,12822,353],{"class":260},[220,12824,12608],{"class":230},[220,12826,359],{"class":264},[220,12828,12829,12831,12833],{"class":222,"line":389},[220,12830,2550],{"class":264},[220,12832,12617],{"class":420},[220,12834,386],{"class":264},[220,12836,12837,12839,12841],{"class":222,"line":399},[220,12838,2567],{"class":264},[220,12840,347],{"class":420},[220,12842,359],{"class":264},[220,12844,12845,12847,12849,12851,12853,12855],{"class":222,"line":644},[220,12846,364],{"class":264},[220,12848,12638],{"class":346},[220,12850,350],{"class":226},[220,12852,353],{"class":260},[220,12854,12645],{"class":230},[220,12856,359],{"class":264},[220,12858,12859,12861,12863],{"class":222,"line":650},[220,12860,12719],{"class":264},[220,12862,12722],{"class":609},[220,12864,749],{"class":264},[220,12866,12867,12869,12871],{"class":222,"line":656},[220,12868,2567],{"class":264},[220,12870,12638],{"class":346},[220,12872,359],{"class":264},[220,12874,12875],{"class":222,"line":673},[220,12876,12737],{"class":264},[212,12878,12882],{"className":12879,"code":12880,"language":12881,"meta":178,"style":178},"language-html shiki shiki-themes github-dark","\u003Ccanvas id=\"bg\" style=\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\">\u003C\u002Fcanvas>\n\u003Cmain style=\"position:relative;z-index:10;\">Your content\u003C\u002Fmain>\n\n\u003Cscript type=\"module\">\n import { createShader } from 'shaders\u002Fjs'\n const shader = await createShader(document.getElementById('bg'), {\n components: [{ type: 'Aurora', props: {} }]\n })\n\u003C\u002Fscript>\n","html",[99,12883,12884,12911,12931,12935,12951,12962,12987,12998,13003],{"__ignoreMap":178},[220,12885,12886,12888,12891,12893,12895,12898,12900,12902,12905,12907,12909],{"class":222,"line":223},[220,12887,343],{"class":264},[220,12889,12890],{"class":346},"canvas",[220,12892,9100],{"class":226},[220,12894,353],{"class":264},[220,12896,12897],{"class":230},"\"bg\"",[220,12899,663],{"class":226},[220,12901,353],{"class":264},[220,12903,12904],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,12906,3804],{"class":264},[220,12908,12890],{"class":346},[220,12910,359],{"class":264},[220,12912,12913,12915,12917,12919,12921,12924,12927,12929],{"class":222,"line":179},[220,12914,343],{"class":264},[220,12916,12638],{"class":346},[220,12918,663],{"class":226},[220,12920,353],{"class":264},[220,12922,12923],{"class":230},"\"position:relative;z-index:10;\"",[220,12925,12926],{"class":264},">Your content\u003C\u002F",[220,12928,12638],{"class":346},[220,12930,359],{"class":264},[220,12932,12933],{"class":222,"line":389},[220,12934,647],{"emptyLinePlaceholder":194},[220,12936,12937,12939,12941,12944,12946,12949],{"class":222,"line":399},[220,12938,343],{"class":264},[220,12940,2590],{"class":346},[220,12942,12943],{"class":226}," type",[220,12945,353],{"class":264},[220,12947,12948],{"class":230},"\"module\"",[220,12950,359],{"class":264},[220,12952,12953,12956,12958,12960],{"class":222,"line":644},[220,12954,12955],{"class":260}," import",[220,12957,11512],{"class":264},[220,12959,268],{"class":260},[220,12961,4007],{"class":230},[220,12963,12964,12966,12968,12970,12972,12974,12977,12979,12981,12984],{"class":222,"line":650},[220,12965,2705],{"class":260},[220,12967,1738],{"class":420},[220,12969,1741],{"class":260},[220,12971,1744],{"class":260},[220,12973,1747],{"class":226},[220,12975,12976],{"class":264},"(document.",[220,12978,3141],{"class":226},[220,12980,2626],{"class":264},[220,12982,12983],{"class":230},"'bg'",[220,12985,12986],{"class":264},"), {\n",[220,12988,12989,12992,12995],{"class":222,"line":656},[220,12990,12991],{"class":264}," components: [{ type: ",[220,12993,12994],{"class":230},"'Aurora'",[220,12996,12997],{"class":264},", props: {} }]\n",[220,12999,13000],{"class":222,"line":673},[220,13001,13002],{"class":264}," })\n",[220,13004,13005,13007,13009],{"class":222,"line":682},[220,13006,402],{"class":264},[220,13008,2590],{"class":346},[220,13010,359],{"class":264},[3262,13012,13014],{"id":13013},"section-background","Section background",[15,13016,13017,13018,1864,13021,13024],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,13019,13020],{},"position: relative",[99,13022,13023],{},"overflow: hidden"," to contain the canvas:",[246,13026,13027,13132,13225,13300],{":tabs":248},[212,13028,13030],{"className":334,"code":13029,"language":336,"meta":178,"style":178},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n \u003Cp class=\"relative text-white\u002F80 mt-4\">Content above the shader.\u003C\u002Fp>\n\u003C\u002Fsection>\n",[99,13031,13032,13048,13063,13072,13080,13084,13104,13124],{"__ignoreMap":178},[220,13033,13034,13036,13039,13041,13043,13046],{"class":222,"line":223},[220,13035,343],{"class":264},[220,13037,13038],{"class":346},"section",[220,13040,350],{"class":226},[220,13042,353],{"class":264},[220,13044,13045],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,13047,359],{"class":264},[220,13049,13050,13052,13054,13056,13058,13061],{"class":222,"line":179},[220,13051,364],{"class":264},[220,13053,347],{"class":346},[220,13055,350],{"class":226},[220,13057,353],{"class":264},[220,13059,13060],{"class":230},"\"absolute inset-0 -z-10\"",[220,13062,359],{"class":264},[220,13064,13065,13067,13070],{"class":222,"line":389},[220,13066,2550],{"class":264},[220,13068,13069],{"class":346},"Plasma",[220,13071,386],{"class":264},[220,13073,13074,13076,13078],{"class":222,"line":399},[220,13075,2567],{"class":264},[220,13077,347],{"class":346},[220,13079,359],{"class":264},[220,13081,13082],{"class":222,"line":644},[220,13083,647],{"emptyLinePlaceholder":194},[220,13085,13086,13088,13090,13092,13094,13097,13100,13102],{"class":222,"line":650},[220,13087,364],{"class":264},[220,13089,23],{"class":346},[220,13091,350],{"class":226},[220,13093,353],{"class":264},[220,13095,13096],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,13098,13099],{"class":264},">Section Heading\u003C\u002F",[220,13101,23],{"class":346},[220,13103,359],{"class":264},[220,13105,13106,13108,13110,13112,13114,13117,13120,13122],{"class":222,"line":656},[220,13107,364],{"class":264},[220,13109,15],{"class":346},[220,13111,350],{"class":226},[220,13113,353],{"class":264},[220,13115,13116],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,13118,13119],{"class":264},">Content above the shader.\u003C\u002F",[220,13121,15],{"class":346},[220,13123,359],{"class":264},[220,13125,13126,13128,13130],{"class":222,"line":673},[220,13127,402],{"class":264},[220,13129,13038],{"class":346},[220,13131,359],{"class":264},[212,13133,13135],{"className":409,"code":13134,"language":411,"meta":178,"style":178},"\u003Csection className=\"relative overflow-hidden py-24 px-8\">\n \u003CShader className=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n \u003Ch2 className=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n \u003Cp className=\"relative text-white\u002F80 mt-4\">Content above the shader.\u003C\u002Fp>\n\u003C\u002Fsection>\n",[99,13136,13137,13151,13165,13173,13181,13199,13217],{"__ignoreMap":178},[220,13138,13139,13141,13143,13145,13147,13149],{"class":222,"line":223},[220,13140,343],{"class":264},[220,13142,13038],{"class":346},[220,13144,423],{"class":226},[220,13146,353],{"class":260},[220,13148,13045],{"class":230},[220,13150,359],{"class":264},[220,13152,13153,13155,13157,13159,13161,13163],{"class":222,"line":179},[220,13154,364],{"class":264},[220,13156,347],{"class":420},[220,13158,423],{"class":226},[220,13160,353],{"class":260},[220,13162,13060],{"class":230},[220,13164,359],{"class":264},[220,13166,13167,13169,13171],{"class":222,"line":389},[220,13168,2550],{"class":264},[220,13170,13069],{"class":420},[220,13172,386],{"class":264},[220,13174,13175,13177,13179],{"class":222,"line":399},[220,13176,2567],{"class":264},[220,13178,347],{"class":420},[220,13180,359],{"class":264},[220,13182,13183,13185,13187,13189,13191,13193,13195,13197],{"class":222,"line":644},[220,13184,364],{"class":264},[220,13186,23],{"class":346},[220,13188,423],{"class":226},[220,13190,353],{"class":260},[220,13192,13096],{"class":230},[220,13194,13099],{"class":264},[220,13196,23],{"class":346},[220,13198,359],{"class":264},[220,13200,13201,13203,13205,13207,13209,13211,13213,13215],{"class":222,"line":650},[220,13202,364],{"class":264},[220,13204,15],{"class":346},[220,13206,423],{"class":226},[220,13208,353],{"class":260},[220,13210,13116],{"class":230},[220,13212,13119],{"class":264},[220,13214,15],{"class":346},[220,13216,359],{"class":264},[220,13218,13219,13221,13223],{"class":222,"line":656},[220,13220,402],{"class":264},[220,13222,13038],{"class":346},[220,13224,359],{"class":264},[212,13226,13228],{"className":468,"code":13227,"language":469,"meta":178,"style":178},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma \u002F>\n \u003C\u002FShader>\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C\u002Fh2>\n\u003C\u002Fsection>\n",[99,13229,13230,13244,13258,13266,13274,13292],{"__ignoreMap":178},[220,13231,13232,13234,13236,13238,13240,13242],{"class":222,"line":223},[220,13233,343],{"class":264},[220,13235,13038],{"class":346},[220,13237,350],{"class":226},[220,13239,353],{"class":260},[220,13241,13045],{"class":230},[220,13243,359],{"class":264},[220,13245,13246,13248,13250,13252,13254,13256],{"class":222,"line":179},[220,13247,364],{"class":264},[220,13249,347],{"class":420},[220,13251,350],{"class":226},[220,13253,353],{"class":260},[220,13255,13060],{"class":230},[220,13257,359],{"class":264},[220,13259,13260,13262,13264],{"class":222,"line":389},[220,13261,2550],{"class":264},[220,13263,13069],{"class":420},[220,13265,386],{"class":264},[220,13267,13268,13270,13272],{"class":222,"line":399},[220,13269,2567],{"class":264},[220,13271,347],{"class":420},[220,13273,359],{"class":264},[220,13275,13276,13278,13280,13282,13284,13286,13288,13290],{"class":222,"line":644},[220,13277,364],{"class":264},[220,13279,23],{"class":346},[220,13281,350],{"class":226},[220,13283,353],{"class":260},[220,13285,13096],{"class":230},[220,13287,13099],{"class":264},[220,13289,23],{"class":346},[220,13291,359],{"class":264},[220,13293,13294,13296,13298],{"class":222,"line":650},[220,13295,402],{"class":264},[220,13297,13038],{"class":346},[220,13299,359],{"class":264},[212,13301,13302],{"className":468,"code":13227,"language":469,"meta":178,"style":178},[99,13303,13304,13318,13332,13340,13348,13366],{"__ignoreMap":178},[220,13305,13306,13308,13310,13312,13314,13316],{"class":222,"line":223},[220,13307,343],{"class":264},[220,13309,13038],{"class":346},[220,13311,350],{"class":226},[220,13313,353],{"class":260},[220,13315,13045],{"class":230},[220,13317,359],{"class":264},[220,13319,13320,13322,13324,13326,13328,13330],{"class":222,"line":179},[220,13321,364],{"class":264},[220,13323,347],{"class":420},[220,13325,350],{"class":226},[220,13327,353],{"class":260},[220,13329,13060],{"class":230},[220,13331,359],{"class":264},[220,13333,13334,13336,13338],{"class":222,"line":389},[220,13335,2550],{"class":264},[220,13337,13069],{"class":420},[220,13339,386],{"class":264},[220,13341,13342,13344,13346],{"class":222,"line":399},[220,13343,2567],{"class":264},[220,13345,347],{"class":420},[220,13347,359],{"class":264},[220,13349,13350,13352,13354,13356,13358,13360,13362,13364],{"class":222,"line":644},[220,13351,364],{"class":264},[220,13353,23],{"class":346},[220,13355,350],{"class":226},[220,13357,353],{"class":260},[220,13359,13096],{"class":230},[220,13361,13099],{"class":264},[220,13363,23],{"class":346},[220,13365,359],{"class":264},[220,13367,13368,13370,13372],{"class":222,"line":650},[220,13369,402],{"class":264},[220,13371,13038],{"class":346},[220,13373,359],{"class":264},[3262,13375,13377],{"id":13376},"card-with-shader-fill","Card with shader fill",[15,13379,13380],{},"A shader used as the visual background of a card or panel:",[246,13382,13383,13543,13689,13816],{":tabs":248},[212,13384,13386],{"className":334,"code":13385,"language":336,"meta":178,"style":178},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow :intensity=\"0.4\" color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n\n \u003C!-- Content sits above the shader -->\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003Cp class=\"text-white\u002F70 mt-2\">Card description here.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13387,13388,13403,13418,13433,13456,13464,13468,13473,13487,13507,13527,13535],{"__ignoreMap":178},[220,13389,13390,13392,13394,13396,13398,13401],{"class":222,"line":223},[220,13391,343],{"class":264},[220,13393,3398],{"class":346},[220,13395,350],{"class":226},[220,13397,353],{"class":264},[220,13399,13400],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,13402,359],{"class":264},[220,13404,13405,13407,13409,13411,13413,13416],{"class":222,"line":179},[220,13406,364],{"class":264},[220,13408,347],{"class":346},[220,13410,350],{"class":226},[220,13412,353],{"class":264},[220,13414,13415],{"class":230},"\"absolute inset-0\"",[220,13417,359],{"class":264},[220,13419,13420,13422,13424,13426,13428,13431],{"class":222,"line":389},[220,13421,2550],{"class":264},[220,13423,1585],{"class":346},[220,13425,1588],{"class":226},[220,13427,353],{"class":264},[220,13429,13430],{"class":230},"\"#1e1b4b\"",[220,13432,386],{"class":264},[220,13434,13435,13437,13439,13442,13444,13447,13449,13451,13454],{"class":222,"line":399},[220,13436,2550],{"class":264},[220,13438,11792],{"class":346},[220,13440,13441],{"class":226}," :intensity",[220,13443,353],{"class":264},[220,13445,13446],{"class":230},"\"0.4\"",[220,13448,1588],{"class":226},[220,13450,353],{"class":264},[220,13452,13453],{"class":230},"\"#6366f1\"",[220,13455,386],{"class":264},[220,13457,13458,13460,13462],{"class":222,"line":644},[220,13459,2567],{"class":264},[220,13461,347],{"class":346},[220,13463,359],{"class":264},[220,13465,13466],{"class":222,"line":650},[220,13467,647],{"emptyLinePlaceholder":194},[220,13469,13470],{"class":222,"line":656},[220,13471,13472],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,13474,13475,13477,13479,13481,13483,13485],{"class":222,"line":673},[220,13476,364],{"class":264},[220,13478,3398],{"class":346},[220,13480,350],{"class":226},[220,13482,353],{"class":264},[220,13484,12645],{"class":230},[220,13486,359],{"class":264},[220,13488,13489,13491,13493,13495,13497,13500,13503,13505],{"class":222,"line":682},[220,13490,2550],{"class":264},[220,13492,3262],{"class":346},[220,13494,350],{"class":226},[220,13496,353],{"class":264},[220,13498,13499],{"class":230},"\"text-xl font-semibold\"",[220,13501,13502],{"class":264},">Card Title\u003C\u002F",[220,13504,3262],{"class":346},[220,13506,359],{"class":264},[220,13508,13509,13511,13513,13515,13517,13520,13523,13525],{"class":222,"line":691},[220,13510,2550],{"class":264},[220,13512,15],{"class":346},[220,13514,350],{"class":226},[220,13516,353],{"class":264},[220,13518,13519],{"class":230},"\"text-white\u002F70 mt-2\"",[220,13521,13522],{"class":264},">Card description here.\u003C\u002F",[220,13524,15],{"class":346},[220,13526,359],{"class":264},[220,13528,13529,13531,13533],{"class":222,"line":696},[220,13530,2567],{"class":264},[220,13532,3398],{"class":346},[220,13534,359],{"class":264},[220,13536,13537,13539,13541],{"class":222,"line":702},[220,13538,402],{"class":264},[220,13540,3398],{"class":346},[220,13542,359],{"class":264},[212,13544,13546],{"className":409,"code":13545,"language":411,"meta":178,"style":178},"\u003Cdiv className=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader className=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow intensity={0.4} color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv className=\"relative z-10\">\n \u003Ch3 className=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003Cp className=\"text-white\u002F70 mt-2\">Card description here.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13547,13548,13562,13576,13590,13615,13623,13637,13655,13673,13681],{"__ignoreMap":178},[220,13549,13550,13552,13554,13556,13558,13560],{"class":222,"line":223},[220,13551,343],{"class":264},[220,13553,3398],{"class":346},[220,13555,423],{"class":226},[220,13557,353],{"class":260},[220,13559,13400],{"class":230},[220,13561,359],{"class":264},[220,13563,13564,13566,13568,13570,13572,13574],{"class":222,"line":179},[220,13565,364],{"class":264},[220,13567,347],{"class":420},[220,13569,423],{"class":226},[220,13571,353],{"class":260},[220,13573,13415],{"class":230},[220,13575,359],{"class":264},[220,13577,13578,13580,13582,13584,13586,13588],{"class":222,"line":389},[220,13579,2550],{"class":264},[220,13581,1585],{"class":420},[220,13583,1588],{"class":226},[220,13585,353],{"class":260},[220,13587,13430],{"class":230},[220,13589,386],{"class":264},[220,13591,13592,13594,13596,13599,13601,13603,13605,13607,13609,13611,13613],{"class":222,"line":399},[220,13593,2550],{"class":264},[220,13595,11792],{"class":420},[220,13597,13598],{"class":226}," intensity",[220,13600,353],{"class":260},[220,13602,743],{"class":264},[220,13604,8249],{"class":420},[220,13606,2914],{"class":264},[220,13608,8062],{"class":226},[220,13610,353],{"class":260},[220,13612,13453],{"class":230},[220,13614,386],{"class":264},[220,13616,13617,13619,13621],{"class":222,"line":644},[220,13618,2567],{"class":264},[220,13620,347],{"class":420},[220,13622,359],{"class":264},[220,13624,13625,13627,13629,13631,13633,13635],{"class":222,"line":650},[220,13626,364],{"class":264},[220,13628,3398],{"class":346},[220,13630,423],{"class":226},[220,13632,353],{"class":260},[220,13634,12645],{"class":230},[220,13636,359],{"class":264},[220,13638,13639,13641,13643,13645,13647,13649,13651,13653],{"class":222,"line":656},[220,13640,2550],{"class":264},[220,13642,3262],{"class":346},[220,13644,423],{"class":226},[220,13646,353],{"class":260},[220,13648,13499],{"class":230},[220,13650,13502],{"class":264},[220,13652,3262],{"class":346},[220,13654,359],{"class":264},[220,13656,13657,13659,13661,13663,13665,13667,13669,13671],{"class":222,"line":673},[220,13658,2550],{"class":264},[220,13660,15],{"class":346},[220,13662,423],{"class":226},[220,13664,353],{"class":260},[220,13666,13519],{"class":230},[220,13668,13522],{"class":264},[220,13670,15],{"class":346},[220,13672,359],{"class":264},[220,13674,13675,13677,13679],{"class":222,"line":682},[220,13676,2567],{"class":264},[220,13678,3398],{"class":346},[220,13680,359],{"class":264},[220,13682,13683,13685,13687],{"class":222,"line":691},[220,13684,402],{"class":264},[220,13686,3398],{"class":346},[220,13688,359],{"class":264},[212,13690,13692],{"className":468,"code":13691,"language":469,"meta":178,"style":178},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" \u002F>\n \u003CGlow intensity={0.4} color=\"#6366f1\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C\u002Fh3>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,13693,13694,13708,13722,13736,13760,13768,13782,13800,13808],{"__ignoreMap":178},[220,13695,13696,13698,13700,13702,13704,13706],{"class":222,"line":223},[220,13697,343],{"class":264},[220,13699,3398],{"class":346},[220,13701,350],{"class":226},[220,13703,353],{"class":260},[220,13705,13400],{"class":230},[220,13707,359],{"class":264},[220,13709,13710,13712,13714,13716,13718,13720],{"class":222,"line":179},[220,13711,364],{"class":264},[220,13713,347],{"class":420},[220,13715,350],{"class":226},[220,13717,353],{"class":260},[220,13719,13415],{"class":230},[220,13721,359],{"class":264},[220,13723,13724,13726,13728,13730,13732,13734],{"class":222,"line":389},[220,13725,2550],{"class":264},[220,13727,1585],{"class":420},[220,13729,1588],{"class":226},[220,13731,353],{"class":260},[220,13733,13430],{"class":230},[220,13735,386],{"class":264},[220,13737,13738,13740,13742,13744,13746,13748,13750,13752,13754,13756,13758],{"class":222,"line":399},[220,13739,2550],{"class":264},[220,13741,11792],{"class":420},[220,13743,13598],{"class":226},[220,13745,353],{"class":260},[220,13747,743],{"class":264},[220,13749,8249],{"class":420},[220,13751,2914],{"class":264},[220,13753,8062],{"class":226},[220,13755,353],{"class":260},[220,13757,13453],{"class":230},[220,13759,386],{"class":264},[220,13761,13762,13764,13766],{"class":222,"line":644},[220,13763,2567],{"class":264},[220,13765,347],{"class":420},[220,13767,359],{"class":264},[220,13769,13770,13772,13774,13776,13778,13780],{"class":222,"line":650},[220,13771,364],{"class":264},[220,13773,3398],{"class":346},[220,13775,350],{"class":226},[220,13777,353],{"class":260},[220,13779,12645],{"class":230},[220,13781,359],{"class":264},[220,13783,13784,13786,13788,13790,13792,13794,13796,13798],{"class":222,"line":656},[220,13785,2550],{"class":264},[220,13787,3262],{"class":346},[220,13789,350],{"class":226},[220,13791,353],{"class":260},[220,13793,13499],{"class":230},[220,13795,13502],{"class":264},[220,13797,3262],{"class":346},[220,13799,359],{"class":264},[220,13801,13802,13804,13806],{"class":222,"line":673},[220,13803,2567],{"class":264},[220,13805,3398],{"class":346},[220,13807,359],{"class":264},[220,13809,13810,13812,13814],{"class":222,"line":682},[220,13811,402],{"class":264},[220,13813,3398],{"class":346},[220,13815,359],{"class":264},[212,13817,13818],{"className":468,"code":13691,"language":469,"meta":178,"style":178},[99,13819,13820,13834,13848,13862,13886,13894,13908,13926,13934],{"__ignoreMap":178},[220,13821,13822,13824,13826,13828,13830,13832],{"class":222,"line":223},[220,13823,343],{"class":264},[220,13825,3398],{"class":346},[220,13827,350],{"class":226},[220,13829,353],{"class":260},[220,13831,13400],{"class":230},[220,13833,359],{"class":264},[220,13835,13836,13838,13840,13842,13844,13846],{"class":222,"line":179},[220,13837,364],{"class":264},[220,13839,347],{"class":420},[220,13841,350],{"class":226},[220,13843,353],{"class":260},[220,13845,13415],{"class":230},[220,13847,359],{"class":264},[220,13849,13850,13852,13854,13856,13858,13860],{"class":222,"line":389},[220,13851,2550],{"class":264},[220,13853,1585],{"class":420},[220,13855,1588],{"class":226},[220,13857,353],{"class":260},[220,13859,13430],{"class":230},[220,13861,386],{"class":264},[220,13863,13864,13866,13868,13870,13872,13874,13876,13878,13880,13882,13884],{"class":222,"line":399},[220,13865,2550],{"class":264},[220,13867,11792],{"class":420},[220,13869,13598],{"class":226},[220,13871,353],{"class":260},[220,13873,743],{"class":264},[220,13875,8249],{"class":420},[220,13877,2914],{"class":264},[220,13879,8062],{"class":226},[220,13881,353],{"class":260},[220,13883,13453],{"class":230},[220,13885,386],{"class":264},[220,13887,13888,13890,13892],{"class":222,"line":644},[220,13889,2567],{"class":264},[220,13891,347],{"class":420},[220,13893,359],{"class":264},[220,13895,13896,13898,13900,13902,13904,13906],{"class":222,"line":650},[220,13897,364],{"class":264},[220,13899,3398],{"class":346},[220,13901,350],{"class":226},[220,13903,353],{"class":260},[220,13905,12645],{"class":230},[220,13907,359],{"class":264},[220,13909,13910,13912,13914,13916,13918,13920,13922,13924],{"class":222,"line":656},[220,13911,2550],{"class":264},[220,13913,3262],{"class":346},[220,13915,350],{"class":226},[220,13917,353],{"class":260},[220,13919,13499],{"class":230},[220,13921,13502],{"class":264},[220,13923,3262],{"class":346},[220,13925,359],{"class":264},[220,13927,13928,13930,13932],{"class":222,"line":673},[220,13929,2567],{"class":264},[220,13931,3398],{"class":346},[220,13933,359],{"class":264},[220,13935,13936,13938,13940],{"class":222,"line":682},[220,13937,402],{"class":264},[220,13939,3398],{"class":346},[220,13941,359],{"class":264},[3262,13943,13945],{"id":13944},"inline-content-block","Inline content block",[15,13947,13948],{},"A shader that flows naturally in document layout, like an image or video:",[246,13950,13951,14039,14114,14189],{":tabs":248},[212,13952,13954],{"className":334,"code":13953,"language":336,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,13955,13956,13965,13978,13982,13997,14006,14014,14018,14031],{"__ignoreMap":178},[220,13957,13958,13960,13963],{"class":222,"line":223},[220,13959,343],{"class":264},[220,13961,13962],{"class":346},"article",[220,13964,359],{"class":264},[220,13966,13967,13969,13971,13974,13976],{"class":222,"line":179},[220,13968,364],{"class":264},[220,13970,15],{"class":346},[220,13972,13973],{"class":264},">Text before the shader.\u003C\u002F",[220,13975,15],{"class":346},[220,13977,359],{"class":264},[220,13979,13980],{"class":222,"line":389},[220,13981,647],{"emptyLinePlaceholder":194},[220,13983,13984,13986,13988,13990,13992,13995],{"class":222,"line":399},[220,13985,364],{"class":264},[220,13987,347],{"class":346},[220,13989,350],{"class":226},[220,13991,353],{"class":264},[220,13993,13994],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,13996,359],{"class":264},[220,13998,13999,14001,14004],{"class":222,"line":644},[220,14000,2550],{"class":264},[220,14002,14003],{"class":346},"Swirl",[220,14005,386],{"class":264},[220,14007,14008,14010,14012],{"class":222,"line":650},[220,14009,2567],{"class":264},[220,14011,347],{"class":346},[220,14013,359],{"class":264},[220,14015,14016],{"class":222,"line":656},[220,14017,647],{"emptyLinePlaceholder":194},[220,14019,14020,14022,14024,14027,14029],{"class":222,"line":673},[220,14021,364],{"class":264},[220,14023,15],{"class":346},[220,14025,14026],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,14028,15],{"class":346},[220,14030,359],{"class":264},[220,14032,14033,14035,14037],{"class":222,"line":682},[220,14034,402],{"class":264},[220,14036,13962],{"class":346},[220,14038,359],{"class":264},[212,14040,14042],{"className":409,"code":14041,"language":411,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n \u003CShader className=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,14043,14044,14052,14064,14078,14086,14094,14106],{"__ignoreMap":178},[220,14045,14046,14048,14050],{"class":222,"line":223},[220,14047,343],{"class":264},[220,14049,13962],{"class":346},[220,14051,359],{"class":264},[220,14053,14054,14056,14058,14060,14062],{"class":222,"line":179},[220,14055,364],{"class":264},[220,14057,15],{"class":346},[220,14059,13973],{"class":264},[220,14061,15],{"class":346},[220,14063,359],{"class":264},[220,14065,14066,14068,14070,14072,14074,14076],{"class":222,"line":389},[220,14067,364],{"class":264},[220,14069,347],{"class":420},[220,14071,423],{"class":226},[220,14073,353],{"class":260},[220,14075,13994],{"class":230},[220,14077,359],{"class":264},[220,14079,14080,14082,14084],{"class":222,"line":399},[220,14081,2550],{"class":264},[220,14083,14003],{"class":420},[220,14085,386],{"class":264},[220,14087,14088,14090,14092],{"class":222,"line":644},[220,14089,2567],{"class":264},[220,14091,347],{"class":420},[220,14093,359],{"class":264},[220,14095,14096,14098,14100,14102,14104],{"class":222,"line":650},[220,14097,364],{"class":264},[220,14099,15],{"class":346},[220,14101,14026],{"class":264},[220,14103,15],{"class":346},[220,14105,359],{"class":264},[220,14107,14108,14110,14112],{"class":222,"line":656},[220,14109,402],{"class":264},[220,14111,13962],{"class":346},[220,14113,359],{"class":264},[212,14115,14117],{"className":468,"code":14116,"language":469,"meta":178,"style":178},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C\u002Fp>\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl \u002F>\n \u003C\u002FShader>\n \u003Cp>Text after the shader continues here.\u003C\u002Fp>\n\u003C\u002Farticle>\n",[99,14118,14119,14127,14139,14153,14161,14169,14181],{"__ignoreMap":178},[220,14120,14121,14123,14125],{"class":222,"line":223},[220,14122,343],{"class":264},[220,14124,13962],{"class":346},[220,14126,359],{"class":264},[220,14128,14129,14131,14133,14135,14137],{"class":222,"line":179},[220,14130,364],{"class":264},[220,14132,15],{"class":346},[220,14134,13973],{"class":264},[220,14136,15],{"class":346},[220,14138,359],{"class":264},[220,14140,14141,14143,14145,14147,14149,14151],{"class":222,"line":389},[220,14142,364],{"class":264},[220,14144,347],{"class":420},[220,14146,350],{"class":226},[220,14148,353],{"class":260},[220,14150,13994],{"class":230},[220,14152,359],{"class":264},[220,14154,14155,14157,14159],{"class":222,"line":399},[220,14156,2550],{"class":264},[220,14158,14003],{"class":420},[220,14160,386],{"class":264},[220,14162,14163,14165,14167],{"class":222,"line":644},[220,14164,2567],{"class":264},[220,14166,347],{"class":420},[220,14168,359],{"class":264},[220,14170,14171,14173,14175,14177,14179],{"class":222,"line":650},[220,14172,364],{"class":264},[220,14174,15],{"class":346},[220,14176,14026],{"class":264},[220,14178,15],{"class":346},[220,14180,359],{"class":264},[220,14182,14183,14185,14187],{"class":222,"line":656},[220,14184,402],{"class":264},[220,14186,13962],{"class":346},[220,14188,359],{"class":264},[212,14190,14191],{"className":468,"code":14116,"language":469,"meta":178,"style":178},[99,14192,14193,14201,14213,14227,14235,14243,14255],{"__ignoreMap":178},[220,14194,14195,14197,14199],{"class":222,"line":223},[220,14196,343],{"class":264},[220,14198,13962],{"class":346},[220,14200,359],{"class":264},[220,14202,14203,14205,14207,14209,14211],{"class":222,"line":179},[220,14204,364],{"class":264},[220,14206,15],{"class":346},[220,14208,13973],{"class":264},[220,14210,15],{"class":346},[220,14212,359],{"class":264},[220,14214,14215,14217,14219,14221,14223,14225],{"class":222,"line":389},[220,14216,364],{"class":264},[220,14218,347],{"class":420},[220,14220,350],{"class":226},[220,14222,353],{"class":260},[220,14224,13994],{"class":230},[220,14226,359],{"class":264},[220,14228,14229,14231,14233],{"class":222,"line":399},[220,14230,2550],{"class":264},[220,14232,14003],{"class":420},[220,14234,386],{"class":264},[220,14236,14237,14239,14241],{"class":222,"line":644},[220,14238,2567],{"class":264},[220,14240,347],{"class":420},[220,14242,359],{"class":264},[220,14244,14245,14247,14249,14251,14253],{"class":222,"line":650},[220,14246,364],{"class":264},[220,14248,15],{"class":346},[220,14250,14026],{"class":264},[220,14252,15],{"class":346},[220,14254,359],{"class":264},[220,14256,14257,14259,14261],{"class":222,"line":656},[220,14258,402],{"class":264},[220,14260,13962],{"class":346},[220,14262,359],{"class":264},[23,14264,14266],{"id":14265},"layering-content-over-shaders","Layering content over shaders",[3262,14268,14270],{"id":14269},"pointer-events","Pointer events",[15,14272,14273,14274,14277],{},"Canvases capture all pointer events by default. Add ",[99,14275,14276],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,14279,14280,14316,14351,14385],{":tabs":248},[212,14281,14283],{"className":334,"code":14282,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14284,14285,14300,14308],{"__ignoreMap":178},[220,14286,14287,14289,14291,14293,14295,14298],{"class":222,"line":223},[220,14288,343],{"class":264},[220,14290,347],{"class":346},[220,14292,350],{"class":226},[220,14294,353],{"class":264},[220,14296,14297],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,14299,359],{"class":264},[220,14301,14302,14304,14306],{"class":222,"line":179},[220,14303,364],{"class":264},[220,14305,12617],{"class":346},[220,14307,386],{"class":264},[220,14309,14310,14312,14314],{"class":222,"line":389},[220,14311,402],{"class":264},[220,14313,347],{"class":346},[220,14315,359],{"class":264},[212,14317,14319],{"className":409,"code":14318,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14320,14321,14335,14343],{"__ignoreMap":178},[220,14322,14323,14325,14327,14329,14331,14333],{"class":222,"line":223},[220,14324,343],{"class":264},[220,14326,347],{"class":420},[220,14328,423],{"class":226},[220,14330,353],{"class":260},[220,14332,14297],{"class":230},[220,14334,359],{"class":264},[220,14336,14337,14339,14341],{"class":222,"line":179},[220,14338,364],{"class":264},[220,14340,12617],{"class":420},[220,14342,386],{"class":264},[220,14344,14345,14347,14349],{"class":222,"line":389},[220,14346,402],{"class":264},[220,14348,347],{"class":420},[220,14350,359],{"class":264},[212,14352,14353],{"className":468,"code":14282,"language":469,"meta":178,"style":178},[99,14354,14355,14369,14377],{"__ignoreMap":178},[220,14356,14357,14359,14361,14363,14365,14367],{"class":222,"line":223},[220,14358,343],{"class":264},[220,14360,347],{"class":420},[220,14362,350],{"class":226},[220,14364,353],{"class":260},[220,14366,14297],{"class":230},[220,14368,359],{"class":264},[220,14370,14371,14373,14375],{"class":222,"line":179},[220,14372,364],{"class":264},[220,14374,12617],{"class":420},[220,14376,386],{"class":264},[220,14378,14379,14381,14383],{"class":222,"line":389},[220,14380,402],{"class":264},[220,14382,347],{"class":420},[220,14384,359],{"class":264},[212,14386,14387],{"className":468,"code":14282,"language":469,"meta":178,"style":178},[99,14388,14389,14403,14411],{"__ignoreMap":178},[220,14390,14391,14393,14395,14397,14399,14401],{"class":222,"line":223},[220,14392,343],{"class":264},[220,14394,347],{"class":420},[220,14396,350],{"class":226},[220,14398,353],{"class":260},[220,14400,14297],{"class":230},[220,14402,359],{"class":264},[220,14404,14405,14407,14409],{"class":222,"line":179},[220,14406,364],{"class":264},[220,14408,12617],{"class":420},[220,14410,386],{"class":264},[220,14412,14413,14415,14417],{"class":222,"line":389},[220,14414,402],{"class":264},[220,14416,347],{"class":420},[220,14418,359],{"class":264},[15,14420,14421,14422,1864,14424,14427,14428,14430],{},"Interactive effects like ",[99,14423,394],{},[99,14425,14426],{},"CursorRipples"," still track global mouse position even with ",[99,14429,14276],{}," — they listen on the window rather than the canvas element.",[3262,14432,14434],{"id":14433},"stacking-context-and-z-index","Stacking context and z-index",[15,14436,14437,14440,14441,14443,14444,1554],{},[99,14438,14439],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,14442,13020],{}," (or similar) and a higher ",[99,14445,14439],{},[212,14447,14449],{"className":12879,"code":14448,"language":12881,"meta":178,"style":178},"\u003Cdiv class=\"relative\">\n \u003C!-- canvas at z-0 -->\n \u003Ccanvas class=\"absolute inset-0\">\u003C\u002Fcanvas>\n \u003C!-- content above canvas -->\n \u003Cdiv class=\"relative z-10\">I appear above the canvas\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[99,14450,14451,14466,14471,14489,14494,14513],{"__ignoreMap":178},[220,14452,14453,14455,14457,14459,14461,14464],{"class":222,"line":223},[220,14454,343],{"class":264},[220,14456,3398],{"class":346},[220,14458,350],{"class":226},[220,14460,353],{"class":264},[220,14462,14463],{"class":230},"\"relative\"",[220,14465,359],{"class":264},[220,14467,14468],{"class":222,"line":179},[220,14469,14470],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,14472,14473,14475,14477,14479,14481,14483,14485,14487],{"class":222,"line":389},[220,14474,364],{"class":264},[220,14476,12890],{"class":346},[220,14478,350],{"class":226},[220,14480,353],{"class":264},[220,14482,13415],{"class":230},[220,14484,3804],{"class":264},[220,14486,12890],{"class":346},[220,14488,359],{"class":264},[220,14490,14491],{"class":222,"line":399},[220,14492,14493],{"class":609}," \u003C!-- content above canvas -->\n",[220,14495,14496,14498,14500,14502,14504,14506,14509,14511],{"class":222,"line":644},[220,14497,364],{"class":264},[220,14499,3398],{"class":346},[220,14501,350],{"class":226},[220,14503,353],{"class":264},[220,14505,12645],{"class":230},[220,14507,14508],{"class":264},">I appear above the canvas\u003C\u002F",[220,14510,3398],{"class":346},[220,14512,359],{"class":264},[220,14514,14515,14517,14519],{"class":222,"line":650},[220,14516,402],{"class":264},[220,14518,3398],{"class":346},[220,14520,359],{"class":264},[23,14522,14524],{"id":14523},"responsive-sizing","Responsive sizing",[15,14526,14527],{},"Shaders responds to any CSS-based resize:",[246,14529,14530,14651,14686,14721],{":tabs":248},[212,14531,14533],{"className":334,"code":14532,"language":336,"meta":178,"style":178},"\u003C!-- Different heights at breakpoints -->\n\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio preserving at any width -->\n\u003CShader class=\"w-full aspect-square md:aspect-video\">\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Dynamic viewport height (mobile-safe) -->\n\u003CShader class=\"w-full h-[100dvh]\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14534,14535,14540,14555,14563,14571,14575,14580,14595,14603,14611,14615,14620,14635,14643],{"__ignoreMap":178},[220,14536,14537],{"class":222,"line":223},[220,14538,14539],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,14541,14542,14544,14546,14548,14550,14553],{"class":222,"line":179},[220,14543,343],{"class":264},[220,14545,347],{"class":346},[220,14547,350],{"class":226},[220,14549,353],{"class":264},[220,14551,14552],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,14554,359],{"class":264},[220,14556,14557,14559,14561],{"class":222,"line":389},[220,14558,364],{"class":264},[220,14560,367],{"class":346},[220,14562,386],{"class":264},[220,14564,14565,14567,14569],{"class":222,"line":399},[220,14566,402],{"class":264},[220,14568,347],{"class":346},[220,14570,359],{"class":264},[220,14572,14573],{"class":222,"line":644},[220,14574,647],{"emptyLinePlaceholder":194},[220,14576,14577],{"class":222,"line":650},[220,14578,14579],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,14581,14582,14584,14586,14588,14590,14593],{"class":222,"line":656},[220,14583,343],{"class":264},[220,14585,347],{"class":346},[220,14587,350],{"class":226},[220,14589,353],{"class":264},[220,14591,14592],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,14594,359],{"class":264},[220,14596,14597,14599,14601],{"class":222,"line":673},[220,14598,364],{"class":264},[220,14600,14003],{"class":346},[220,14602,386],{"class":264},[220,14604,14605,14607,14609],{"class":222,"line":682},[220,14606,402],{"class":264},[220,14608,347],{"class":346},[220,14610,359],{"class":264},[220,14612,14613],{"class":222,"line":691},[220,14614,647],{"emptyLinePlaceholder":194},[220,14616,14617],{"class":222,"line":696},[220,14618,14619],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,14621,14622,14624,14626,14628,14630,14633],{"class":222,"line":702},[220,14623,343],{"class":264},[220,14625,347],{"class":346},[220,14627,350],{"class":226},[220,14629,353],{"class":264},[220,14631,14632],{"class":230},"\"w-full h-[100dvh]\"",[220,14634,359],{"class":264},[220,14636,14637,14639,14641],{"class":222,"line":718},[220,14638,364],{"class":264},[220,14640,12617],{"class":346},[220,14642,386],{"class":264},[220,14644,14645,14647,14649],{"class":222,"line":727},[220,14646,402],{"class":264},[220,14648,347],{"class":346},[220,14650,359],{"class":264},[212,14652,14654],{"className":409,"code":14653,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14655,14656,14670,14678],{"__ignoreMap":178},[220,14657,14658,14660,14662,14664,14666,14668],{"class":222,"line":223},[220,14659,343],{"class":264},[220,14661,347],{"class":420},[220,14663,423],{"class":226},[220,14665,353],{"class":260},[220,14667,14552],{"class":230},[220,14669,359],{"class":264},[220,14671,14672,14674,14676],{"class":222,"line":179},[220,14673,364],{"class":264},[220,14675,367],{"class":420},[220,14677,386],{"class":264},[220,14679,14680,14682,14684],{"class":222,"line":389},[220,14681,402],{"class":264},[220,14683,347],{"class":420},[220,14685,359],{"class":264},[212,14687,14689],{"className":468,"code":14688,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14690,14691,14705,14713],{"__ignoreMap":178},[220,14692,14693,14695,14697,14699,14701,14703],{"class":222,"line":223},[220,14694,343],{"class":264},[220,14696,347],{"class":420},[220,14698,350],{"class":226},[220,14700,353],{"class":260},[220,14702,14552],{"class":230},[220,14704,359],{"class":264},[220,14706,14707,14709,14711],{"class":222,"line":179},[220,14708,364],{"class":264},[220,14710,367],{"class":420},[220,14712,386],{"class":264},[220,14714,14715,14717,14719],{"class":222,"line":389},[220,14716,402],{"class":264},[220,14718,347],{"class":420},[220,14720,359],{"class":264},[212,14722,14723],{"className":468,"code":14688,"language":469,"meta":178,"style":178},[99,14724,14725,14739,14747],{"__ignoreMap":178},[220,14726,14727,14729,14731,14733,14735,14737],{"class":222,"line":223},[220,14728,343],{"class":264},[220,14730,347],{"class":420},[220,14732,350],{"class":226},[220,14734,353],{"class":260},[220,14736,14552],{"class":230},[220,14738,359],{"class":264},[220,14740,14741,14743,14745],{"class":222,"line":179},[220,14742,364],{"class":264},[220,14744,367],{"class":420},[220,14746,386],{"class":264},[220,14748,14749,14751,14753],{"class":222,"line":389},[220,14750,402],{"class":264},[220,14752,347],{"class":420},[220,14754,359],{"class":264},[23,14756,14758],{"id":14757},"other-css-properties","Other CSS properties",[15,14760,14761],{},"The canvas element is fully styleable with standard CSS:",[246,14763,14764,14885,14920,14955],{":tabs":248},[212,14765,14767],{"className":334,"code":14766,"language":336,"meta":178,"style":178},"\u003C!-- Rounded with border -->\n\u003CShader class=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Drop shadow -->\n\u003CShader class=\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\">\n \u003CPlasma \u002F>\n\u003C\u002FShader>\n\n\u003C!-- CSS blur (applied after GPU render) -->\n\u003CShader class=\"blur-sm w-full h-32\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14768,14769,14774,14789,14797,14805,14809,14814,14829,14837,14845,14849,14854,14869,14877],{"__ignoreMap":178},[220,14770,14771],{"class":222,"line":223},[220,14772,14773],{"class":609},"\u003C!-- Rounded with border -->\n",[220,14775,14776,14778,14780,14782,14784,14787],{"class":222,"line":179},[220,14777,343],{"class":264},[220,14779,347],{"class":346},[220,14781,350],{"class":226},[220,14783,353],{"class":264},[220,14785,14786],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,14788,359],{"class":264},[220,14790,14791,14793,14795],{"class":222,"line":389},[220,14792,364],{"class":264},[220,14794,367],{"class":346},[220,14796,386],{"class":264},[220,14798,14799,14801,14803],{"class":222,"line":399},[220,14800,402],{"class":264},[220,14802,347],{"class":346},[220,14804,359],{"class":264},[220,14806,14807],{"class":222,"line":644},[220,14808,647],{"emptyLinePlaceholder":194},[220,14810,14811],{"class":222,"line":650},[220,14812,14813],{"class":609},"\u003C!-- Drop shadow -->\n",[220,14815,14816,14818,14820,14822,14824,14827],{"class":222,"line":656},[220,14817,343],{"class":264},[220,14819,347],{"class":346},[220,14821,350],{"class":226},[220,14823,353],{"class":264},[220,14825,14826],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,14828,359],{"class":264},[220,14830,14831,14833,14835],{"class":222,"line":673},[220,14832,364],{"class":264},[220,14834,13069],{"class":346},[220,14836,386],{"class":264},[220,14838,14839,14841,14843],{"class":222,"line":682},[220,14840,402],{"class":264},[220,14842,347],{"class":346},[220,14844,359],{"class":264},[220,14846,14847],{"class":222,"line":691},[220,14848,647],{"emptyLinePlaceholder":194},[220,14850,14851],{"class":222,"line":696},[220,14852,14853],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,14855,14856,14858,14860,14862,14864,14867],{"class":222,"line":702},[220,14857,343],{"class":264},[220,14859,347],{"class":346},[220,14861,350],{"class":226},[220,14863,353],{"class":264},[220,14865,14866],{"class":230},"\"blur-sm w-full h-32\"",[220,14868,359],{"class":264},[220,14870,14871,14873,14875],{"class":222,"line":718},[220,14872,364],{"class":264},[220,14874,367],{"class":346},[220,14876,386],{"class":264},[220,14878,14879,14881,14883],{"class":222,"line":727},[220,14880,402],{"class":264},[220,14882,347],{"class":346},[220,14884,359],{"class":264},[212,14886,14888],{"className":409,"code":14887,"language":411,"meta":178,"style":178},"\u003CShader className=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14889,14890,14904,14912],{"__ignoreMap":178},[220,14891,14892,14894,14896,14898,14900,14902],{"class":222,"line":223},[220,14893,343],{"class":264},[220,14895,347],{"class":420},[220,14897,423],{"class":226},[220,14899,353],{"class":260},[220,14901,14786],{"class":230},[220,14903,359],{"class":264},[220,14905,14906,14908,14910],{"class":222,"line":179},[220,14907,364],{"class":264},[220,14909,367],{"class":420},[220,14911,386],{"class":264},[220,14913,14914,14916,14918],{"class":222,"line":389},[220,14915,402],{"class":264},[220,14917,347],{"class":420},[220,14919,359],{"class":264},[212,14921,14923],{"className":468,"code":14922,"language":469,"meta":178,"style":178},"\u003CShader class=\"rounded-2xl border border-white\u002F10 w-full h-48\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,14924,14925,14939,14947],{"__ignoreMap":178},[220,14926,14927,14929,14931,14933,14935,14937],{"class":222,"line":223},[220,14928,343],{"class":264},[220,14930,347],{"class":420},[220,14932,350],{"class":226},[220,14934,353],{"class":260},[220,14936,14786],{"class":230},[220,14938,359],{"class":264},[220,14940,14941,14943,14945],{"class":222,"line":179},[220,14942,364],{"class":264},[220,14944,367],{"class":420},[220,14946,386],{"class":264},[220,14948,14949,14951,14953],{"class":222,"line":389},[220,14950,402],{"class":264},[220,14952,347],{"class":420},[220,14954,359],{"class":264},[212,14956,14957],{"className":468,"code":14922,"language":469,"meta":178,"style":178},[99,14958,14959,14973,14981],{"__ignoreMap":178},[220,14960,14961,14963,14965,14967,14969,14971],{"class":222,"line":223},[220,14962,343],{"class":264},[220,14964,347],{"class":420},[220,14966,350],{"class":226},[220,14968,353],{"class":260},[220,14970,14786],{"class":230},[220,14972,359],{"class":264},[220,14974,14975,14977,14979],{"class":222,"line":179},[220,14976,364],{"class":264},[220,14978,367],{"class":420},[220,14980,386],{"class":264},[220,14982,14983,14985,14987],{"class":222,"line":389},[220,14984,402],{"class":264},[220,14986,347],{"class":420},[220,14988,359],{"class":264},[1504,14990,14991],{},"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":178,"searchDepth":179,"depth":179,"links":14993},[14994,14995,14996,15002,15006,15007],{"id":12256,"depth":179,"text":12257},{"id":593,"depth":179,"text":594},{"id":12575,"depth":179,"text":12576,"children":14997},[14998,14999,15000,15001],{"id":12579,"depth":389,"text":12580},{"id":13013,"depth":389,"text":13014},{"id":13376,"depth":389,"text":13377},{"id":13944,"depth":389,"text":13945},{"id":14265,"depth":179,"text":14266,"children":15003},[15004,15005],{"id":14269,"depth":389,"text":14270},{"id":14433,"depth":389,"text":14434},{"id":14523,"depth":179,"text":14524},{"id":14757,"depth":179,"text":14758},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":15008},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":15015,"title":15016,"body":15017,"category":10232,"description":17289,"exclude":190,"extension":191,"forceFramework":190,"icon":17290,"meta":17291,"navigation":194,"path":17292,"seo":17293,"stem":17294,"__hash__":17295},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":15018,"toc":17278},[15019,15023,15030,15037,15143,15150,15176,15343,15365,15371,15382,15385,15450,15565,15568,15619,15621,15639,15647,15674,15731,15734,15804,15820,15823,15828,15881,15885,15892,15923,15926,15930,16488,16492,16497,17267,17275],[11,15020,15022],{"id":15021},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,15024,15025,15026,15029],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,15027,15028],{},"bounding box"," — a rectangular frame, just like a layer in a design tool. You move it, resize it, and rotate it, and the layer is drawn to fit.",[15,15031,15032,15033,15036],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,15034,15035],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,15038,15040],{"className":334,"code":15039,"language":336,"meta":178,"style":178},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n\u003CShader class=\"-translate-x-4\">...\u003C\u002FShader>\n\n\u003C!-- Bounding box: frames one layer inside the canvas -->\n\u003CShader>\n \u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0.25 },\n y: { unit: 'uv', value: 0.25 },\n width: { unit: 'uv', value: 0.5 },\n height: { unit: 'uv', value: 0.5 },\n origin: 'top-left',\n rotation: 0\n }\" \u002F>\n\u003C\u002FShader>\n",[99,15041,15042,15047,15067,15071,15076,15084,15098,15103,15108,15113,15118,15123,15128,15135],{"__ignoreMap":178},[220,15043,15044],{"class":222,"line":223},[220,15045,15046],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,15048,15049,15051,15053,15055,15057,15060,15063,15065],{"class":222,"line":179},[220,15050,343],{"class":264},[220,15052,347],{"class":346},[220,15054,350],{"class":226},[220,15056,353],{"class":264},[220,15058,15059],{"class":230},"\"-translate-x-4\"",[220,15061,15062],{"class":264},">...\u003C\u002F",[220,15064,347],{"class":346},[220,15066,359],{"class":264},[220,15068,15069],{"class":222,"line":389},[220,15070,647],{"emptyLinePlaceholder":194},[220,15072,15073],{"class":222,"line":399},[220,15074,15075],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,15077,15078,15080,15082],{"class":222,"line":644},[220,15079,343],{"class":264},[220,15081,347],{"class":346},[220,15083,359],{"class":264},[220,15085,15086,15088,15090,15093,15095],{"class":222,"line":650},[220,15087,364],{"class":264},[220,15089,367],{"class":346},[220,15091,15092],{"class":226}," :bounding-box",[220,15094,353],{"class":264},[220,15096,15097],{"class":230},"\"{\n",[220,15099,15100],{"class":222,"line":656},[220,15101,15102],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15104,15105],{"class":222,"line":673},[220,15106,15107],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15109,15110],{"class":222,"line":682},[220,15111,15112],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15114,15115],{"class":222,"line":691},[220,15116,15117],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15119,15120],{"class":222,"line":696},[220,15121,15122],{"class":230}," origin: 'top-left',\n",[220,15124,15125],{"class":222,"line":702},[220,15126,15127],{"class":230}," rotation: 0\n",[220,15129,15130,15133],{"class":222,"line":718},[220,15131,15132],{"class":230}," }\"",[220,15134,386],{"class":264},[220,15136,15137,15139,15141],{"class":222,"line":727},[220,15138,402],{"class":264},[220,15140,347],{"class":346},[220,15142,359],{"class":264},[23,15144,1839,15146,15149],{"id":15145},"the-boundingbox-prop",[99,15147,15148],{},"boundingBox"," prop",[15,15151,15152,15153,15155,15156,1895,15159,1895,15162,1895,15165,15168,15169,15172,15173,15175],{},"Every renderable component accepts a ",[99,15154,15148],{}," object. It has four required dimensions — ",[99,15157,15158],{},"x",[99,15160,15161],{},"y",[99,15163,15164],{},"width",[99,15166,15167],{},"height"," — plus an optional ",[99,15170,15171],{},"origin",", a ",[99,15174,11835],{},", and a couple of refinements.",[1794,15177,15178,15193],{},[1797,15179,15180],{},[1800,15181,15182,15185,15188,15191],{},[1803,15183,15184],{},"Field",[1803,15186,15187],{},"Type",[1803,15189,15190],{},"Default",[1803,15192,1808],{},[1810,15194,15195,15215,15232,15247,15262,15290,15308,15324],{},[1800,15196,15197,15201,15206,15209],{},[1815,15198,15199],{},[99,15200,15158],{},[1815,15202,15203],{},[99,15204,15205],{},"{ value, unit }",[1815,15207,15208],{},"—",[1815,15210,15211,15212,15214],{},"Horizontal position of the box's anchor corner, measured in the ",[99,15213,15171],{}," frame",[1800,15216,15217,15221,15225,15227],{},[1815,15218,15219],{},[99,15220,15161],{},[1815,15222,15223],{},[99,15224,15205],{},[1815,15226,15208],{},[1815,15228,15229,15230,15214],{},"Vertical position of the box's anchor corner, measured in the ",[99,15231,15171],{},[1800,15233,15234,15238,15242,15244],{},[1815,15235,15236],{},[99,15237,15164],{},[1815,15239,15240],{},[99,15241,15205],{},[1815,15243,15208],{},[1815,15245,15246],{},"Box width",[1800,15248,15249,15253,15257,15259],{},[1815,15250,15251],{},[99,15252,15167],{},[1815,15254,15255],{},[99,15256,15205],{},[1815,15258,15208],{},[1815,15260,15261],{},"Box height",[1800,15263,15264,15268,15272,15277],{},[1815,15265,15266],{},[99,15267,15171],{},[1815,15269,15270],{},[99,15271,9060],{},[1815,15273,15274],{},[99,15275,15276],{},"'top-left'",[1815,15278,15279,15280,15282,15283,15285,15286],{},"Which reference point ",[99,15281,15158],{}," \u002F ",[99,15284,15161],{}," are measured from — see ",[56,15287,15289],{"href":15288},"#origin","Origin",[1800,15291,15292,15296,15301,15305],{},[1815,15293,15294],{},[99,15295,11835],{},[1815,15297,15298],{},[99,15299,15300],{},"number",[1815,15302,15303],{},[99,15304,8673],{},[1815,15306,15307],{},"Rotation in degrees, around the box's geometric center",[1800,15309,15310,15315,15319,15321],{},[1815,15311,15312],{},[99,15313,15314],{},"cornerRadius",[1815,15316,15317],{},[99,15318,15205],{},[1815,15320,15208],{},[1815,15322,15323],{},"Rounds the corners of the clipped region (filter layers only)",[1800,15325,15326,15331,15336,15340],{},[1815,15327,15328],{},[99,15329,15330],{},"lockAspect",[1815,15332,15333],{},[99,15334,15335],{},"boolean",[1815,15337,15338],{},[99,15339,2629],{},[1815,15341,15342],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,15344,15345,15346,1895,15348,1895,15350,1895,15352,15354,15355,15357,15358,15361,15362,15364],{},"Each of ",[99,15347,15158],{},[99,15349,15161],{},[99,15351,15164],{},[99,15353,15167],{}," (and ",[99,15356,15314],{},") is a ",[159,15359,15360],{},"dimensional value"," — a ",[99,15363,15205],{}," pair, so you can mix relative and absolute units on the same layer.",[15,15366,15367,15368,15370],{},"When no ",[99,15369,15148],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,15372,15374,15375,15378,15379],{"id":15373},"units-uv-vs-px","Units: ",[99,15376,15377],{},"uv"," (%) vs ",[99,15380,15381],{},"px",[15,15383,15384],{},"Each dimension carries its own unit:",[1794,15386,15387,15397],{},[1797,15388,15389],{},[1800,15390,15391,15394],{},[1803,15392,15393],{},"Unit",[1803,15395,15396],{},"Meaning",[1810,15398,15399,15438],{},[1800,15400,15401,15405],{},[1815,15402,15403],{},[99,15404,15377],{},[1815,15406,15407,15408,1895,15411,15413,15414,15416,15417,15419,15420,15422,15423,15419,15425,15427,15428,15430,15431,3506,15434,15437],{},"A ",[159,15409,15410],{},"fraction of the canvas",[99,15412,8673],{},"–",[99,15415,8677],{},". ",[99,15418,15158],{},"\u002F",[99,15421,15164],{}," are fractions of the canvas width; ",[99,15424,15161],{},[99,15426,15167],{}," of the canvas height. ",[99,15429,7754],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,15432,15433],{},"percentage",[99,15435,15436],{},"50%",").",[1800,15439,15440,15444],{},[1815,15441,15442],{},[99,15443,15381],{},[1815,15445,15446,15449],{},[159,15447,15448],{},"Device pixels",". A fixed size that stays constant as the canvas resizes — the renderer re-resolves px → uv on every resize. Good for fixed-size logos, badges, and UI chrome.",[212,15451,15453],{"className":334,"code":15452,"language":336,"meta":178,"style":178},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n\u003CGlass :bounding-box=\"{\n x: { unit: 'uv', value: 0.25 },\n y: { unit: 'uv', value: 0.25 },\n width: { unit: 'uv', value: 0.5 },\n height: { unit: 'uv', value: 0.5 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n\n\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n\u003CGlass :bounding-box=\"{\n x: { unit: 'px', value: 24 },\n y: { unit: 'px', value: 24 },\n width: { unit: 'px', value: 200 },\n height: { unit: 'px', value: 200 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n",[99,15454,15455,15460,15473,15478,15483,15488,15493,15498,15503,15510,15514,15519,15531,15536,15541,15546,15551,15555,15559],{"__ignoreMap":178},[220,15456,15457],{"class":222,"line":223},[220,15458,15459],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,15461,15462,15464,15467,15469,15471],{"class":222,"line":179},[220,15463,343],{"class":264},[220,15465,15466],{"class":346},"Glass",[220,15468,15092],{"class":226},[220,15470,353],{"class":264},[220,15472,15097],{"class":230},[220,15474,15475],{"class":222,"line":389},[220,15476,15477],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15479,15480],{"class":222,"line":399},[220,15481,15482],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15484,15485],{"class":222,"line":644},[220,15486,15487],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15489,15490],{"class":222,"line":650},[220,15491,15492],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15494,15495],{"class":222,"line":656},[220,15496,15497],{"class":230}," origin: 'top-left',\n",[220,15499,15500],{"class":222,"line":673},[220,15501,15502],{"class":230}," rotation: 0\n",[220,15504,15505,15508],{"class":222,"line":682},[220,15506,15507],{"class":230},"}\"",[220,15509,386],{"class":264},[220,15511,15512],{"class":222,"line":691},[220,15513,647],{"emptyLinePlaceholder":194},[220,15515,15516],{"class":222,"line":696},[220,15517,15518],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,15520,15521,15523,15525,15527,15529],{"class":222,"line":702},[220,15522,343],{"class":264},[220,15524,15466],{"class":346},[220,15526,15092],{"class":226},[220,15528,353],{"class":264},[220,15530,15097],{"class":230},[220,15532,15533],{"class":222,"line":718},[220,15534,15535],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15537,15538],{"class":222,"line":727},[220,15539,15540],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15542,15543],{"class":222,"line":2664},[220,15544,15545],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,15547,15548],{"class":222,"line":3522},[220,15549,15550],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,15552,15553],{"class":222,"line":9662},[220,15554,15497],{"class":230},[220,15556,15557],{"class":222,"line":9673},[220,15558,15502],{"class":230},[220,15560,15561,15563],{"class":222,"line":9678},[220,15562,15507],{"class":230},[220,15564,386],{"class":264},[15,15566,15567],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,15569,15571],{"className":334,"code":15570,"language":336,"meta":178,"style":178},"\u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0 },\n y: { unit: 'px', value: 0 },\n width: { unit: 'uv', value: 1 },\n height: { unit: 'px', value: 80 },\n origin: 'top-left',\n rotation: 0\n}\" \u002F>\n",[99,15572,15573,15585,15590,15595,15600,15605,15609,15613],{"__ignoreMap":178},[220,15574,15575,15577,15579,15581,15583],{"class":222,"line":223},[220,15576,343],{"class":264},[220,15578,367],{"class":346},[220,15580,15092],{"class":226},[220,15582,353],{"class":264},[220,15584,15097],{"class":230},[220,15586,15587],{"class":222,"line":179},[220,15588,15589],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,15591,15592],{"class":222,"line":389},[220,15593,15594],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,15596,15597],{"class":222,"line":399},[220,15598,15599],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,15601,15602],{"class":222,"line":644},[220,15603,15604],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,15606,15607],{"class":222,"line":650},[220,15608,15497],{"class":230},[220,15610,15611],{"class":222,"line":656},[220,15612,15502],{"class":230},[220,15614,15615,15617],{"class":222,"line":673},[220,15616,15507],{"class":230},[220,15618,386],{"class":264},[23,15620,15289],{"id":15171},[15,15622,1839,15623,15625,15626,15629,15630,1864,15632,15634,15635,15638],{},[99,15624,15171],{}," is the ",[159,15627,15628],{},"reference point"," that ",[99,15631,15158],{},[99,15633,15161],{}," are measured from — the box's anchor corner ",[1847,15636,15637],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,15640,15645],{"className":15641,"code":15643,"language":15644},[15642],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,15646,15643],{"__ignoreMap":178},[15,15648,15649,15650,15653,15654,15657,15658,15660,15661,1895,15664,15667,15668,15670,15671,15673],{},"The two axes are independent. The horizontal part picks the X reference (",[99,15651,15652],{},"left"," → from the left edge, ",[99,15655,15656],{},"right"," → from the right edge, ",[99,15659,8241],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,15662,15663],{},"top",[99,15665,15666],{},"bottom",", or ",[99,15669,8241],{},"). The bare value ",[99,15672,8241],{}," centers both axes.",[34,15675,15676,15686,15702,15717],{},[37,15677,15678,15680,15681,15419,15683,15685],{},[99,15679,15276],{}," (default) — ",[99,15682,15158],{},[99,15684,15161],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,15687,15688,15691,15692,15694,15695,15698,15699,15701],{},[99,15689,15690],{},"'top-right'"," — ",[99,15693,15158],{}," is measured ",[1847,15696,15697],{},"leftward"," from the right edge; ",[99,15700,15161],{}," downward from the top.",[37,15703,15704,15691,15707,15709,15710,15712,15713,15716],{},[99,15705,15706],{},"'bottom-right'",[99,15708,15158],{}," leftward from the right, ",[99,15711,15161],{}," ",[1847,15714,15715],{},"upward"," from the bottom.",[37,15718,15719,15691,15722,15419,15724,15726,15727,15730],{},[99,15720,15721],{},"'center'",[99,15723,15158],{},[99,15725,15161],{}," are signed offsets from the canvas center (",[99,15728,15729],{},"0, 0"," centers the box).",[15,15732,15733],{},"This makes \"pin to a corner\" trivial and resize-stable. A badge 24px in from the top-right corner stays glued there at any canvas size:",[212,15735,15737],{"className":334,"code":15736,"language":336,"meta":178,"style":178},"\u003CImageTexture\n url=\"\u002Fbadge.svg\"\n :bounding-box=\"{\n x: { unit: 'px', value: 24 },\n y: { unit: 'px', value: 24 },\n width: { unit: 'px', value: 96 },\n height: { unit: 'px', value: 96 },\n origin: 'top-right',\n rotation: 0\n }\"\n\u002F>\n",[99,15738,15739,15746,15756,15765,15770,15775,15780,15785,15790,15794,15799],{"__ignoreMap":178},[220,15740,15741,15743],{"class":222,"line":223},[220,15742,343],{"class":264},[220,15744,15745],{"class":346},"ImageTexture\n",[220,15747,15748,15751,15753],{"class":222,"line":179},[220,15749,15750],{"class":226}," url",[220,15752,353],{"class":264},[220,15754,15755],{"class":230},"\"\u002Fbadge.svg\"\n",[220,15757,15758,15761,15763],{"class":222,"line":389},[220,15759,15760],{"class":226}," :bounding-box",[220,15762,353],{"class":264},[220,15764,15097],{"class":230},[220,15766,15767],{"class":222,"line":399},[220,15768,15769],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15771,15772],{"class":222,"line":644},[220,15773,15774],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15776,15777],{"class":222,"line":650},[220,15778,15779],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,15781,15782],{"class":222,"line":656},[220,15783,15784],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,15786,15787],{"class":222,"line":673},[220,15788,15789],{"class":230}," origin: 'top-right',\n",[220,15791,15792],{"class":222,"line":682},[220,15793,15127],{"class":230},[220,15795,15796],{"class":222,"line":691},[220,15797,15798],{"class":230}," }\"\n",[220,15800,15801],{"class":222,"line":696},[220,15802,15803],{"class":264},"\u002F>\n",[15805,15806,15807],"blockquote",{},[15,15808,15809,15712,15812,15814,15815,15419,15817,15819],{},[159,15810,15811],{},"Origin vs. rotation pivot:",[99,15813,15171],{}," only controls where ",[99,15816,15158],{},[99,15818,15161],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,15821,15822],{"id":11835},"Rotation",[15,15824,15825,15827],{},[99,15826,11835],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,15829,15831],{"className":334,"code":15830,"language":336,"meta":178,"style":178},"\u003CStripes :bounding-box=\"{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation: 30\n}\" \u002F>\n",[99,15832,15833,15846,15851,15856,15861,15866,15870,15875],{"__ignoreMap":178},[220,15834,15835,15837,15840,15842,15844],{"class":222,"line":223},[220,15836,343],{"class":264},[220,15838,15839],{"class":346},"Stripes",[220,15841,15092],{"class":226},[220,15843,353],{"class":264},[220,15845,15097],{"class":230},[220,15847,15848],{"class":222,"line":179},[220,15849,15850],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,15852,15853],{"class":222,"line":389},[220,15854,15855],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,15857,15858],{"class":222,"line":399},[220,15859,15860],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,15862,15863],{"class":222,"line":644},[220,15864,15865],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,15867,15868],{"class":222,"line":650},[220,15869,15497],{"class":230},[220,15871,15872],{"class":222,"line":656},[220,15873,15874],{"class":230}," rotation: 30\n",[220,15876,15877,15879],{"class":222,"line":673},[220,15878,15507],{"class":230},[220,15880,386],{"class":264},[23,15882,15884],{"id":15883},"how-different-layers-fill-the-box","How different layers fill the box",[15,15886,15887,15888,15891],{},"The box means \"draw this layer here,\" but exactly ",[1847,15889,15890],{},"how"," a layer fills its box depends on the kind of layer:",[34,15893,15894,15904,15910],{},[37,15895,15896,15899,15900,15903],{},[159,15897,15898],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,15901,15902],{},"re-fit"," into the box — the effect lays itself out as if the canvas had been resized to the box, undistorted, then confined to the box rectangle. (A handful of screen-anchored patterns simply confine to the box instead of re-fitting.)",[37,15905,15906,15909],{},[159,15907,15908],{},"Shapes"," (Circle, Star, Blob, and the SDF shape effects like Glass and Crystal) drive their native position\u002Fsize\u002Frotation from the box, so the shape itself moves and scales with the frame.",[37,15911,15912,15915,15916,15919,15920,15922],{},[159,15913,15914],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,15917,15918],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,15921,15314],{}," applies, rounding the clipped region.",[15,15924,15925],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,15927,15929],{"id":15928},"basic-usage-across-frameworks","Basic usage across frameworks",[246,15931,15932,16006,16131,16242,16352],{":tabs":1557},[212,15933,15935],{"className":334,"code":15934,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient :bounding-box=\"{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }\" \u002F>\n\u003C\u002FShader>\n",[99,15936,15937,15951,15963,15968,15973,15978,15983,15987,15992,15998],{"__ignoreMap":178},[220,15938,15939,15941,15943,15945,15947,15949],{"class":222,"line":223},[220,15940,343],{"class":264},[220,15942,347],{"class":346},[220,15944,350],{"class":226},[220,15946,353],{"class":264},[220,15948,356],{"class":230},[220,15950,359],{"class":264},[220,15952,15953,15955,15957,15959,15961],{"class":222,"line":179},[220,15954,364],{"class":264},[220,15956,367],{"class":346},[220,15958,15092],{"class":226},[220,15960,353],{"class":264},[220,15962,15097],{"class":230},[220,15964,15965],{"class":222,"line":389},[220,15966,15967],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,15969,15970],{"class":222,"line":399},[220,15971,15972],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,15974,15975],{"class":222,"line":644},[220,15976,15977],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,15979,15980],{"class":222,"line":650},[220,15981,15982],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,15984,15985],{"class":222,"line":656},[220,15986,15122],{"class":230},[220,15988,15989],{"class":222,"line":673},[220,15990,15991],{"class":230}," rotation: 15\n",[220,15993,15994,15996],{"class":222,"line":682},[220,15995,15132],{"class":230},[220,15997,386],{"class":264},[220,15999,16000,16002,16004],{"class":222,"line":691},[220,16001,402],{"class":264},[220,16003,347],{"class":346},[220,16005,359],{"class":264},[212,16007,16009],{"className":409,"code":16008,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n boundingBox={{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,16010,16011,16025,16031,16041,16058,16071,16084,16097,16106,16114,16119,16123],{"__ignoreMap":178},[220,16012,16013,16015,16017,16019,16021,16023],{"class":222,"line":223},[220,16014,343],{"class":264},[220,16016,347],{"class":420},[220,16018,423],{"class":226},[220,16020,353],{"class":260},[220,16022,356],{"class":230},[220,16024,359],{"class":264},[220,16026,16027,16029],{"class":222,"line":179},[220,16028,364],{"class":264},[220,16030,1189],{"class":420},[220,16032,16033,16036,16038],{"class":222,"line":389},[220,16034,16035],{"class":226}," boundingBox",[220,16037,353],{"class":260},[220,16039,16040],{"class":264},"{{\n",[220,16042,16043,16046,16049,16052,16055],{"class":222,"line":399},[220,16044,16045],{"class":264}," x: { unit: ",[220,16047,16048],{"class":230},"'uv'",[220,16050,16051],{"class":264},", value: ",[220,16053,16054],{"class":420},"0.1",[220,16056,16057],{"class":264}," },\n",[220,16059,16060,16063,16065,16067,16069],{"class":222,"line":644},[220,16061,16062],{"class":264}," y: { unit: ",[220,16064,16048],{"class":230},[220,16066,16051],{"class":264},[220,16068,16054],{"class":420},[220,16070,16057],{"class":264},[220,16072,16073,16076,16078,16080,16082],{"class":222,"line":650},[220,16074,16075],{"class":264}," width: { unit: ",[220,16077,16048],{"class":230},[220,16079,16051],{"class":264},[220,16081,6299],{"class":420},[220,16083,16057],{"class":264},[220,16085,16086,16089,16091,16093,16095],{"class":222,"line":656},[220,16087,16088],{"class":264}," height: { unit: ",[220,16090,16048],{"class":230},[220,16092,16051],{"class":264},[220,16094,6299],{"class":420},[220,16096,16057],{"class":264},[220,16098,16099,16102,16104],{"class":222,"line":673},[220,16100,16101],{"class":264}," origin: ",[220,16103,15276],{"class":230},[220,16105,1760],{"class":264},[220,16107,16108,16111],{"class":222,"line":682},[220,16109,16110],{"class":264}," rotation: ",[220,16112,16113],{"class":420},"15\n",[220,16115,16116],{"class":222,"line":691},[220,16117,16118],{"class":264}," }}\n",[220,16120,16121],{"class":222,"line":696},[220,16122,1234],{"class":264},[220,16124,16125,16127,16129],{"class":222,"line":702},[220,16126,402],{"class":264},[220,16128,347],{"class":420},[220,16130,359],{"class":264},[212,16132,16134],{"className":468,"code":16133,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n boundingBox={{\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }}\n \u002F>\n\u003C\u002FShader>\n",[99,16135,16136,16150,16156,16164,16176,16188,16200,16212,16220,16226,16230,16234],{"__ignoreMap":178},[220,16137,16138,16140,16142,16144,16146,16148],{"class":222,"line":223},[220,16139,343],{"class":264},[220,16141,347],{"class":420},[220,16143,350],{"class":226},[220,16145,353],{"class":260},[220,16147,356],{"class":230},[220,16149,359],{"class":264},[220,16151,16152,16154],{"class":222,"line":179},[220,16153,364],{"class":264},[220,16155,1189],{"class":420},[220,16157,16158,16160,16162],{"class":222,"line":389},[220,16159,16035],{"class":226},[220,16161,353],{"class":260},[220,16163,16040],{"class":264},[220,16165,16166,16168,16170,16172,16174],{"class":222,"line":399},[220,16167,16045],{"class":264},[220,16169,16048],{"class":230},[220,16171,16051],{"class":264},[220,16173,16054],{"class":420},[220,16175,16057],{"class":264},[220,16177,16178,16180,16182,16184,16186],{"class":222,"line":644},[220,16179,16062],{"class":264},[220,16181,16048],{"class":230},[220,16183,16051],{"class":264},[220,16185,16054],{"class":420},[220,16187,16057],{"class":264},[220,16189,16190,16192,16194,16196,16198],{"class":222,"line":650},[220,16191,16075],{"class":264},[220,16193,16048],{"class":230},[220,16195,16051],{"class":264},[220,16197,6299],{"class":420},[220,16199,16057],{"class":264},[220,16201,16202,16204,16206,16208,16210],{"class":222,"line":656},[220,16203,16088],{"class":264},[220,16205,16048],{"class":230},[220,16207,16051],{"class":264},[220,16209,6299],{"class":420},[220,16211,16057],{"class":264},[220,16213,16214,16216,16218],{"class":222,"line":673},[220,16215,16101],{"class":264},[220,16217,15276],{"class":230},[220,16219,1760],{"class":264},[220,16221,16222,16224],{"class":222,"line":682},[220,16223,16110],{"class":264},[220,16225,16113],{"class":420},[220,16227,16228],{"class":222,"line":691},[220,16229,16118],{"class":264},[220,16231,16232],{"class":222,"line":696},[220,16233,1234],{"class":264},[220,16235,16236,16238,16240],{"class":222,"line":702},[220,16237,402],{"class":264},[220,16239,347],{"class":420},[220,16241,359],{"class":264},[212,16243,16244],{"className":468,"code":16133,"language":469,"meta":178,"style":178},[99,16245,16246,16260,16266,16274,16286,16298,16310,16322,16330,16336,16340,16344],{"__ignoreMap":178},[220,16247,16248,16250,16252,16254,16256,16258],{"class":222,"line":223},[220,16249,343],{"class":264},[220,16251,347],{"class":420},[220,16253,350],{"class":226},[220,16255,353],{"class":260},[220,16257,356],{"class":230},[220,16259,359],{"class":264},[220,16261,16262,16264],{"class":222,"line":179},[220,16263,364],{"class":264},[220,16265,1189],{"class":420},[220,16267,16268,16270,16272],{"class":222,"line":389},[220,16269,16035],{"class":226},[220,16271,353],{"class":260},[220,16273,16040],{"class":264},[220,16275,16276,16278,16280,16282,16284],{"class":222,"line":399},[220,16277,16045],{"class":264},[220,16279,16048],{"class":230},[220,16281,16051],{"class":264},[220,16283,16054],{"class":420},[220,16285,16057],{"class":264},[220,16287,16288,16290,16292,16294,16296],{"class":222,"line":644},[220,16289,16062],{"class":264},[220,16291,16048],{"class":230},[220,16293,16051],{"class":264},[220,16295,16054],{"class":420},[220,16297,16057],{"class":264},[220,16299,16300,16302,16304,16306,16308],{"class":222,"line":650},[220,16301,16075],{"class":264},[220,16303,16048],{"class":230},[220,16305,16051],{"class":264},[220,16307,6299],{"class":420},[220,16309,16057],{"class":264},[220,16311,16312,16314,16316,16318,16320],{"class":222,"line":656},[220,16313,16088],{"class":264},[220,16315,16048],{"class":230},[220,16317,16051],{"class":264},[220,16319,6299],{"class":420},[220,16321,16057],{"class":264},[220,16323,16324,16326,16328],{"class":222,"line":673},[220,16325,16101],{"class":264},[220,16327,15276],{"class":230},[220,16329,1760],{"class":264},[220,16331,16332,16334],{"class":222,"line":682},[220,16333,16110],{"class":264},[220,16335,16113],{"class":420},[220,16337,16338],{"class":222,"line":691},[220,16339,16118],{"class":264},[220,16341,16342],{"class":222,"line":696},[220,16343,1234],{"class":264},[220,16345,16346,16348,16350],{"class":222,"line":702},[220,16347,402],{"class":264},[220,16349,347],{"class":420},[220,16351,359],{"class":264},[212,16353,16355],{"className":251,"code":16354,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n props: {\n boundingBox: {\n x: { unit: 'uv', value: 0.1 },\n y: { unit: 'uv', value: 0.1 },\n width: { unit: 'uv', value: 0.8 },\n height: { unit: 'uv', value: 0.8 },\n origin: 'top-left',\n rotation: 15\n }\n }\n }\n ]\n})\n",[99,16356,16357,16371,16375,16380,16389,16394,16399,16412,16425,16438,16451,16460,16467,16472,16476,16480,16484],{"__ignoreMap":178},[220,16358,16359,16361,16363,16365,16367,16369],{"class":222,"line":223},[220,16360,1735],{"class":260},[220,16362,1738],{"class":420},[220,16364,1741],{"class":260},[220,16366,1744],{"class":260},[220,16368,1747],{"class":226},[220,16370,1750],{"class":264},[220,16372,16373],{"class":222,"line":179},[220,16374,1765],{"class":264},[220,16376,16377],{"class":222,"line":389},[220,16378,16379],{"class":264}," {\n",[220,16381,16382,16385,16387],{"class":222,"line":399},[220,16383,16384],{"class":264}," type: ",[220,16386,2462],{"class":230},[220,16388,1760],{"class":264},[220,16390,16391],{"class":222,"line":644},[220,16392,16393],{"class":264}," props: {\n",[220,16395,16396],{"class":222,"line":650},[220,16397,16398],{"class":264}," boundingBox: {\n",[220,16400,16401,16404,16406,16408,16410],{"class":222,"line":656},[220,16402,16403],{"class":264}," x: { unit: ",[220,16405,16048],{"class":230},[220,16407,16051],{"class":264},[220,16409,16054],{"class":420},[220,16411,16057],{"class":264},[220,16413,16414,16417,16419,16421,16423],{"class":222,"line":673},[220,16415,16416],{"class":264}," y: { unit: ",[220,16418,16048],{"class":230},[220,16420,16051],{"class":264},[220,16422,16054],{"class":420},[220,16424,16057],{"class":264},[220,16426,16427,16430,16432,16434,16436],{"class":222,"line":682},[220,16428,16429],{"class":264}," width: { unit: ",[220,16431,16048],{"class":230},[220,16433,16051],{"class":264},[220,16435,6299],{"class":420},[220,16437,16057],{"class":264},[220,16439,16440,16443,16445,16447,16449],{"class":222,"line":691},[220,16441,16442],{"class":264}," height: { unit: ",[220,16444,16048],{"class":230},[220,16446,16051],{"class":264},[220,16448,6299],{"class":420},[220,16450,16057],{"class":264},[220,16452,16453,16456,16458],{"class":222,"line":696},[220,16454,16455],{"class":264}," origin: ",[220,16457,15276],{"class":230},[220,16459,1760],{"class":264},[220,16461,16462,16465],{"class":222,"line":702},[220,16463,16464],{"class":264}," rotation: ",[220,16466,16113],{"class":420},[220,16468,16469],{"class":222,"line":718},[220,16470,16471],{"class":264}," }\n",[220,16473,16474],{"class":222,"line":727},[220,16475,4929],{"class":264},[220,16477,16478],{"class":222,"line":2664},[220,16479,4609],{"class":264},[220,16481,16482],{"class":222,"line":3522},[220,16483,1787],{"class":264},[220,16485,16486],{"class":222,"line":9662},[220,16487,1792],{"class":264},[23,16489,16491],{"id":16490},"animating-a-bounding-box","Animating a bounding box",[15,16493,16494,16496],{},[99,16495,15148],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,16498,16500,16752,17054],{":tabs":16499},"[\"Vue\", \"React\", \"JS\"]",[212,16501,16503],{"className":334,"code":16502,"language":336,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst rotation = ref(0)\nlet frame\n\nonMounted(() => {\n const animate = () => {\n rotation.value = (rotation.value + 0.5) % 360\n frame = requestAnimationFrame(animate)\n }\n frame = requestAnimationFrame(animate)\n})\nonUnmounted(() => cancelAnimationFrame(frame))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CStripes :bounding-box=\"{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,16504,16505,16515,16526,16530,16547,16555,16559,16569,16583,16606,16619,16623,16634,16638,16653,16661,16665,16673,16687,16699,16704,16709,16714,16719,16724,16729,16736,16744],{"__ignoreMap":178},[220,16506,16507,16509,16511,16513],{"class":222,"line":223},[220,16508,343],{"class":264},[220,16510,2590],{"class":346},[220,16512,2593],{"class":226},[220,16514,359],{"class":264},[220,16516,16517,16519,16522,16524],{"class":222,"line":179},[220,16518,261],{"class":260},[220,16520,16521],{"class":264}," { ref, onMounted, onUnmounted } ",[220,16523,268],{"class":260},[220,16525,2607],{"class":230},[220,16527,16528],{"class":222,"line":389},[220,16529,647],{"emptyLinePlaceholder":194},[220,16531,16532,16534,16537,16539,16541,16543,16545],{"class":222,"line":399},[220,16533,1735],{"class":260},[220,16535,16536],{"class":420}," rotation",[220,16538,1741],{"class":260},[220,16540,2623],{"class":226},[220,16542,2626],{"class":264},[220,16544,8673],{"class":420},[220,16546,2632],{"class":264},[220,16548,16549,16552],{"class":222,"line":644},[220,16550,16551],{"class":260},"let",[220,16553,16554],{"class":264}," frame\n",[220,16556,16557],{"class":222,"line":650},[220,16558,647],{"emptyLinePlaceholder":194},[220,16560,16561,16563,16565,16567],{"class":222,"line":656},[220,16562,3484],{"class":226},[220,16564,3600],{"class":264},[220,16566,2762],{"class":260},[220,16568,3241],{"class":264},[220,16570,16571,16573,16575,16577,16579,16581],{"class":222,"line":673},[220,16572,2705],{"class":260},[220,16574,11959],{"class":226},[220,16576,1741],{"class":260},[220,16578,3492],{"class":264},[220,16580,2762],{"class":260},[220,16582,3241],{"class":264},[220,16584,16585,16588,16590,16593,16595,16598,16600,16603],{"class":222,"line":682},[220,16586,16587],{"class":264}," rotation.value ",[220,16589,353],{"class":260},[220,16591,16592],{"class":264}," (rotation.value ",[220,16594,10836],{"class":260},[220,16596,16597],{"class":420}," 0.5",[220,16599,4168],{"class":264},[220,16601,16602],{"class":260},"%",[220,16604,16605],{"class":420}," 360\n",[220,16607,16608,16611,16613,16616],{"class":222,"line":691},[220,16609,16610],{"class":264}," frame ",[220,16612,353],{"class":260},[220,16614,16615],{"class":226}," requestAnimationFrame",[220,16617,16618],{"class":264},"(animate)\n",[220,16620,16621],{"class":222,"line":696},[220,16622,3256],{"class":264},[220,16624,16625,16628,16630,16632],{"class":222,"line":702},[220,16626,16627],{"class":264}," frame ",[220,16629,353],{"class":260},[220,16631,16615],{"class":226},[220,16633,16618],{"class":264},[220,16635,16636],{"class":222,"line":718},[220,16637,1792],{"class":264},[220,16639,16640,16643,16645,16647,16650],{"class":222,"line":727},[220,16641,16642],{"class":226},"onUnmounted",[220,16644,3600],{"class":264},[220,16646,2762],{"class":260},[220,16648,16649],{"class":226}," cancelAnimationFrame",[220,16651,16652],{"class":264},"(frame))\n",[220,16654,16655,16657,16659],{"class":222,"line":2664},[220,16656,402],{"class":264},[220,16658,2590],{"class":346},[220,16660,359],{"class":264},[220,16662,16663],{"class":222,"line":3522},[220,16664,647],{"emptyLinePlaceholder":194},[220,16666,16667,16669,16671],{"class":222,"line":9662},[220,16668,343],{"class":264},[220,16670,2519],{"class":346},[220,16672,359],{"class":264},[220,16674,16675,16677,16679,16681,16683,16685],{"class":222,"line":9673},[220,16676,364],{"class":264},[220,16678,347],{"class":346},[220,16680,350],{"class":226},[220,16682,353],{"class":264},[220,16684,356],{"class":230},[220,16686,359],{"class":264},[220,16688,16689,16691,16693,16695,16697],{"class":222,"line":9678},[220,16690,2550],{"class":264},[220,16692,15839],{"class":346},[220,16694,15092],{"class":226},[220,16696,353],{"class":264},[220,16698,15097],{"class":230},[220,16700,16701],{"class":222,"line":10999},[220,16702,16703],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,16705,16706],{"class":222,"line":11004},[220,16707,16708],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,16710,16711],{"class":222,"line":12075},[220,16712,16713],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,16715,16716],{"class":222,"line":12082},[220,16717,16718],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,16720,16721],{"class":222,"line":12087},[220,16722,16723],{"class":230}," origin: 'top-left',\n",[220,16725,16726],{"class":222,"line":12105},[220,16727,16728],{"class":230}," rotation\n",[220,16730,16731,16734],{"class":222,"line":12110},[220,16732,16733],{"class":230}," }\"",[220,16735,386],{"class":264},[220,16737,16738,16740,16742],{"class":222,"line":12119},[220,16739,2567],{"class":264},[220,16741,347],{"class":346},[220,16743,359],{"class":264},[220,16745,16746,16748,16750],{"class":222,"line":12149},[220,16747,402],{"class":264},[220,16749,2519],{"class":346},[220,16751,359],{"class":264},[212,16753,16755],{"className":409,"code":16754,"language":411,"meta":178,"style":178},"import { useState, useEffect, useRef } from 'react'\n\nfunction SpinningBox() {\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 \u003CStripes\n boundingBox={{\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }}\n \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,16756,16757,16768,16772,16781,16806,16825,16829,16839,16854,16882,16893,16897,16908,16922,16926,16930,16936,16950,16957,16966,16979,16991,17003,17015,17023,17028,17033,17038,17046,17050],{"__ignoreMap":178},[220,16758,16759,16761,16764,16766],{"class":222,"line":223},[220,16760,261],{"class":260},[220,16762,16763],{"class":264}," { useState, useEffect, useRef } ",[220,16765,268],{"class":260},[220,16767,2687],{"class":230},[220,16769,16770],{"class":222,"line":179},[220,16771,647],{"emptyLinePlaceholder":194},[220,16773,16774,16776,16779],{"class":222,"line":389},[220,16775,2641],{"class":260},[220,16777,16778],{"class":226}," SpinningBox",[220,16780,2647],{"class":264},[220,16782,16783,16785,16787,16789,16791,16794,16796,16798,16800,16802,16804],{"class":222,"line":399},[220,16784,2705],{"class":260},[220,16786,2708],{"class":264},[220,16788,11835],{"class":420},[220,16790,1895],{"class":264},[220,16792,16793],{"class":420},"setRotation",[220,16795,2719],{"class":264},[220,16797,353],{"class":260},[220,16799,2724],{"class":226},[220,16801,2626],{"class":264},[220,16803,8673],{"class":420},[220,16805,2632],{"class":264},[220,16807,16808,16810,16813,16815,16818,16820,16823],{"class":222,"line":644},[220,16809,2705],{"class":260},[220,16811,16812],{"class":420}," frameRef",[220,16814,1741],{"class":260},[220,16816,16817],{"class":226}," useRef",[220,16819,2626],{"class":264},[220,16821,16822],{"class":420},"null",[220,16824,2632],{"class":264},[220,16826,16827],{"class":222,"line":650},[220,16828,647],{"emptyLinePlaceholder":194},[220,16830,16831,16833,16835,16837],{"class":222,"line":656},[220,16832,3597],{"class":226},[220,16834,3600],{"class":264},[220,16836,2762],{"class":260},[220,16838,3241],{"class":264},[220,16840,16841,16844,16846,16848,16850,16852],{"class":222,"line":673},[220,16842,16843],{"class":260}," const",[220,16845,11959],{"class":226},[220,16847,1741],{"class":260},[220,16849,3492],{"class":264},[220,16851,2762],{"class":260},[220,16853,3241],{"class":264},[220,16855,16856,16859,16861,16864,16866,16869,16871,16873,16875,16877,16880],{"class":222,"line":682},[220,16857,16858],{"class":226}," setRotation",[220,16860,2626],{"class":264},[220,16862,16863],{"class":3621},"r",[220,16865,10830],{"class":260},[220,16867,16868],{"class":264}," (r ",[220,16870,10836],{"class":260},[220,16872,16597],{"class":420},[220,16874,4168],{"class":264},[220,16876,16602],{"class":260},[220,16878,16879],{"class":420}," 360",[220,16881,2632],{"class":264},[220,16883,16884,16887,16889,16891],{"class":222,"line":691},[220,16885,16886],{"class":264}," frameRef.current ",[220,16888,353],{"class":260},[220,16890,16615],{"class":226},[220,16892,16618],{"class":264},[220,16894,16895],{"class":222,"line":696},[220,16896,4609],{"class":264},[220,16898,16899,16902,16904,16906],{"class":222,"line":702},[220,16900,16901],{"class":264}," frameRef.current ",[220,16903,353],{"class":260},[220,16905,16615],{"class":226},[220,16907,16618],{"class":264},[220,16909,16910,16913,16915,16917,16919],{"class":222,"line":718},[220,16911,16912],{"class":260}," return",[220,16914,3492],{"class":264},[220,16916,2762],{"class":260},[220,16918,16649],{"class":226},[220,16920,16921],{"class":264},"(frameRef.current)\n",[220,16923,16924],{"class":222,"line":727},[220,16925,3637],{"class":264},[220,16927,16928],{"class":222,"line":2664},[220,16929,647],{"emptyLinePlaceholder":194},[220,16931,16932,16934],{"class":222,"line":3522},[220,16933,2739],{"class":260},[220,16935,2742],{"class":264},[220,16937,16938,16940,16942,16944,16946,16948],{"class":222,"line":9662},[220,16939,2550],{"class":264},[220,16941,347],{"class":420},[220,16943,423],{"class":226},[220,16945,353],{"class":260},[220,16947,356],{"class":230},[220,16949,359],{"class":264},[220,16951,16952,16954],{"class":222,"line":9673},[220,16953,2813],{"class":264},[220,16955,16956],{"class":420},"Stripes\n",[220,16958,16959,16962,16964],{"class":222,"line":9678},[220,16960,16961],{"class":226}," boundingBox",[220,16963,353],{"class":260},[220,16965,16040],{"class":264},[220,16967,16968,16970,16972,16974,16977],{"class":222,"line":10999},[220,16969,16403],{"class":264},[220,16971,16048],{"class":230},[220,16973,16051],{"class":264},[220,16975,16976],{"class":420},"0.2",[220,16978,16057],{"class":264},[220,16980,16981,16983,16985,16987,16989],{"class":222,"line":11004},[220,16982,16416],{"class":264},[220,16984,16048],{"class":230},[220,16986,16051],{"class":264},[220,16988,16976],{"class":420},[220,16990,16057],{"class":264},[220,16992,16993,16995,16997,16999,17001],{"class":222,"line":12075},[220,16994,16429],{"class":264},[220,16996,16048],{"class":230},[220,16998,16051],{"class":264},[220,17000,8236],{"class":420},[220,17002,16057],{"class":264},[220,17004,17005,17007,17009,17011,17013],{"class":222,"line":12082},[220,17006,16442],{"class":264},[220,17008,16048],{"class":230},[220,17010,16051],{"class":264},[220,17012,8236],{"class":420},[220,17014,16057],{"class":264},[220,17016,17017,17019,17021],{"class":222,"line":12087},[220,17018,16455],{"class":264},[220,17020,15276],{"class":230},[220,17022,1760],{"class":264},[220,17024,17025],{"class":222,"line":12105},[220,17026,17027],{"class":264}," rotation\n",[220,17029,17030],{"class":222,"line":12110},[220,17031,17032],{"class":264}," }}\n",[220,17034,17035],{"class":222,"line":12119},[220,17036,17037],{"class":264}," \u002F>\n",[220,17039,17040,17042,17044],{"class":222,"line":12149},[220,17041,2828],{"class":264},[220,17043,347],{"class":420},[220,17045,359],{"class":264},[220,17047,17048],{"class":222,"line":12164},[220,17049,2837],{"class":264},[220,17051,17052],{"class":222,"line":12173},[220,17053,749],{"class":264},[212,17055,17057],{"className":251,"code":17056,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stripes', id: 'bars', props: {} }\n ]\n})\n\nlet rotation = 0\nconst animate = () => {\n rotation = (rotation + 0.5) % 360\n shader.update('bars', {\n boundingBox: {\n x: { unit: 'uv', value: 0.2 },\n y: { unit: 'uv', value: 0.2 },\n width: { unit: 'uv', value: 0.6 },\n height: { unit: 'uv', value: 0.6 },\n origin: 'top-left',\n rotation\n }\n })\n requestAnimationFrame(animate)\n}\nrequestAnimationFrame(animate)\n",[99,17058,17059,17069,17073,17087,17091,17105,17109,17113,17117,17129,17143,17163,17176,17181,17193,17205,17217,17229,17237,17241,17245,17249,17256,17260],{"__ignoreMap":178},[220,17060,17061,17063,17065,17067],{"class":222,"line":223},[220,17062,261],{"class":260},[220,17064,11512],{"class":264},[220,17066,268],{"class":260},[220,17068,4007],{"class":230},[220,17070,17071],{"class":222,"line":179},[220,17072,647],{"emptyLinePlaceholder":194},[220,17074,17075,17077,17079,17081,17083,17085],{"class":222,"line":389},[220,17076,1735],{"class":260},[220,17078,1738],{"class":420},[220,17080,1741],{"class":260},[220,17082,1744],{"class":260},[220,17084,1747],{"class":226},[220,17086,1750],{"class":264},[220,17088,17089],{"class":222,"line":399},[220,17090,1765],{"class":264},[220,17092,17093,17095,17098,17100,17103],{"class":222,"line":644},[220,17094,1770],{"class":264},[220,17096,17097],{"class":230},"'Stripes'",[220,17099,3209],{"class":264},[220,17101,17102],{"class":230},"'bars'",[220,17104,2465],{"class":264},[220,17106,17107],{"class":222,"line":650},[220,17108,1787],{"class":264},[220,17110,17111],{"class":222,"line":656},[220,17112,1792],{"class":264},[220,17114,17115],{"class":222,"line":673},[220,17116,647],{"emptyLinePlaceholder":194},[220,17118,17119,17121,17124,17126],{"class":222,"line":682},[220,17120,16551],{"class":260},[220,17122,17123],{"class":264}," rotation ",[220,17125,353],{"class":260},[220,17127,17128],{"class":420}," 0\n",[220,17130,17131,17133,17135,17137,17139,17141],{"class":222,"line":691},[220,17132,1735],{"class":260},[220,17134,11959],{"class":226},[220,17136,1741],{"class":260},[220,17138,3492],{"class":264},[220,17140,2762],{"class":260},[220,17142,3241],{"class":264},[220,17144,17145,17148,17150,17153,17155,17157,17159,17161],{"class":222,"line":696},[220,17146,17147],{"class":264}," rotation ",[220,17149,353],{"class":260},[220,17151,17152],{"class":264}," (rotation ",[220,17154,10836],{"class":260},[220,17156,16597],{"class":420},[220,17158,4168],{"class":264},[220,17160,16602],{"class":260},[220,17162,16605],{"class":420},[220,17164,17165,17168,17170,17172,17174],{"class":222,"line":702},[220,17166,17167],{"class":264}," shader.",[220,17169,11605],{"class":226},[220,17171,2626],{"class":264},[220,17173,17102],{"class":230},[220,17175,11967],{"class":264},[220,17177,17178],{"class":222,"line":718},[220,17179,17180],{"class":264}," boundingBox: {\n",[220,17182,17183,17185,17187,17189,17191],{"class":222,"line":727},[220,17184,16045],{"class":264},[220,17186,16048],{"class":230},[220,17188,16051],{"class":264},[220,17190,16976],{"class":420},[220,17192,16057],{"class":264},[220,17194,17195,17197,17199,17201,17203],{"class":222,"line":2664},[220,17196,16062],{"class":264},[220,17198,16048],{"class":230},[220,17200,16051],{"class":264},[220,17202,16976],{"class":420},[220,17204,16057],{"class":264},[220,17206,17207,17209,17211,17213,17215],{"class":222,"line":3522},[220,17208,16075],{"class":264},[220,17210,16048],{"class":230},[220,17212,16051],{"class":264},[220,17214,8236],{"class":420},[220,17216,16057],{"class":264},[220,17218,17219,17221,17223,17225,17227],{"class":222,"line":9662},[220,17220,16088],{"class":264},[220,17222,16048],{"class":230},[220,17224,16051],{"class":264},[220,17226,8236],{"class":420},[220,17228,16057],{"class":264},[220,17230,17231,17233,17235],{"class":222,"line":9673},[220,17232,16101],{"class":264},[220,17234,15276],{"class":230},[220,17236,1760],{"class":264},[220,17238,17239],{"class":222,"line":9678},[220,17240,16728],{"class":264},[220,17242,17243],{"class":222,"line":10999},[220,17244,4609],{"class":264},[220,17246,17247],{"class":222,"line":11004},[220,17248,13002],{"class":264},[220,17250,17251,17254],{"class":222,"line":12075},[220,17252,17253],{"class":226}," requestAnimationFrame",[220,17255,16618],{"class":264},[220,17257,17258],{"class":222,"line":12082},[220,17259,749],{"class":264},[220,17261,17262,17265],{"class":222,"line":12087},[220,17263,17264],{"class":226},"requestAnimationFrame",[220,17266,16618],{"class":264},[15,17268,17269,17270,17274],{},"For continuous animation, you can also reach for a ",[56,17271,17273],{"href":17272},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,17276,17277],{},"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":178,"searchDepth":179,"depth":179,"links":17279},[17280,17282,17284,17285,17286,17287,17288],{"id":15145,"depth":179,"text":17281},"The boundingBox prop",{"id":15373,"depth":179,"text":17283},"Units: uv (%) vs px",{"id":15171,"depth":179,"text":15289},{"id":11835,"depth":179,"text":15822},{"id":15883,"depth":179,"text":15884},{"id":15928,"depth":179,"text":15929},{"id":16490,"depth":179,"text":16491},"Position, size, and rotate any layer with a bounding box — using % or px units and a layout-aware origin","arrows-to-circle",{},"\u002Fdocs\u002Fguide\u002Ftransforms",{"title":15016,"description":17289},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":17297,"title":17298,"body":17299,"category":10232,"description":20956,"exclude":190,"extension":191,"forceFramework":190,"icon":20957,"meta":20958,"navigation":194,"path":17272,"seo":20959,"stem":20960,"__hash__":20961},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":17300,"toc":20948},[17301,17304,17307,17310,17359,17362,17365,17898,17901,17906,18035,18047,18050,18065,18533,18536,18540,18737,18749,18781,18784,18787,19269,19272,19276,19407,19412,19415,19418,19424,20147,20150,20154,20295,20300,20304,20307,20787,20791,20798,20946],[11,17302,17298],{"id":17303},"dynamic-props",[15,17305,17306],{},"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,17308,17309],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,17311,17313],{"className":334,"code":17312,"language":336,"meta":178,"style":178},"\u003C!-- Static value -->\n\u003CCircle :radius=\"0.5\" \u002F>\n\n\u003C!-- Dynamic prop: animates radius automatically -->\n\u003CCircle :radius=\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\" \u002F>\n",[99,17314,17315,17320,17335,17339,17344],{"__ignoreMap":178},[220,17316,17317],{"class":222,"line":223},[220,17318,17319],{"class":609},"\u003C!-- Static value -->\n",[220,17321,17322,17324,17326,17329,17331,17333],{"class":222,"line":179},[220,17323,343],{"class":264},[220,17325,2553],{"class":346},[220,17327,17328],{"class":226}," :radius",[220,17330,353],{"class":264},[220,17332,7681],{"class":230},[220,17334,386],{"class":264},[220,17336,17337],{"class":222,"line":389},[220,17338,647],{"emptyLinePlaceholder":194},[220,17340,17341],{"class":222,"line":399},[220,17342,17343],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,17345,17346,17348,17350,17352,17354,17357],{"class":222,"line":644},[220,17347,343],{"class":264},[220,17349,2553],{"class":346},[220,17351,17328],{"class":226},[220,17353,353],{"class":264},[220,17355,17356],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,17358,386],{"class":264},[23,17360,17361],{"id":17361},"auto-animate",[15,17363,17364],{},"Continuously animates a numeric prop between two values over time.",[246,17366,17367,17457,17567,17670,17772],{":tabs":1557},[212,17368,17370],{"className":334,"code":17369,"language":336,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,17371,17372,17386,17392,17401,17410,17415,17420,17425,17430,17435,17440,17445,17449],{"__ignoreMap":178},[220,17373,17374,17376,17378,17380,17382,17384],{"class":222,"line":223},[220,17375,343],{"class":264},[220,17377,347],{"class":346},[220,17379,350],{"class":226},[220,17381,353],{"class":264},[220,17383,356],{"class":230},[220,17385,359],{"class":264},[220,17387,17388,17390],{"class":222,"line":179},[220,17389,364],{"class":264},[220,17391,9630],{"class":346},[220,17393,17394,17396,17398],{"class":222,"line":389},[220,17395,9635],{"class":226},[220,17397,353],{"class":264},[220,17399,17400],{"class":230},"\"#6366f1\"\n",[220,17402,17403,17406,17408],{"class":222,"line":399},[220,17404,17405],{"class":226}," :radius",[220,17407,353],{"class":264},[220,17409,15097],{"class":230},[220,17411,17412],{"class":222,"line":644},[220,17413,17414],{"class":230}," type: 'auto-animate',\n",[220,17416,17417],{"class":222,"line":650},[220,17418,17419],{"class":230}," mode: 'ping-pong',\n",[220,17421,17422],{"class":222,"line":656},[220,17423,17424],{"class":230}," outputMin: 0.2,\n",[220,17426,17427],{"class":222,"line":673},[220,17428,17429],{"class":230}," outputMax: 0.6,\n",[220,17431,17432],{"class":222,"line":682},[220,17433,17434],{"class":230}," speed: 0.8,\n",[220,17436,17437],{"class":222,"line":691},[220,17438,17439],{"class":230}," easing: 'sine'\n",[220,17441,17442],{"class":222,"line":696},[220,17443,17444],{"class":230}," }\"\n",[220,17446,17447],{"class":222,"line":702},[220,17448,1234],{"class":264},[220,17450,17451,17453,17455],{"class":222,"line":718},[220,17452,402],{"class":264},[220,17454,347],{"class":346},[220,17456,359],{"class":264},[212,17458,17460],{"className":409,"code":17459,"language":411,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,17461,17462,17476,17482,17490,17498,17507,17517,17526,17535,17544,17551,17555,17559],{"__ignoreMap":178},[220,17463,17464,17466,17468,17470,17472,17474],{"class":222,"line":223},[220,17465,343],{"class":264},[220,17467,347],{"class":420},[220,17469,423],{"class":226},[220,17471,353],{"class":260},[220,17473,356],{"class":230},[220,17475,359],{"class":264},[220,17477,17478,17480],{"class":222,"line":179},[220,17479,364],{"class":264},[220,17481,9630],{"class":420},[220,17483,17484,17486,17488],{"class":222,"line":389},[220,17485,9635],{"class":226},[220,17487,353],{"class":260},[220,17489,17400],{"class":230},[220,17491,17492,17494,17496],{"class":222,"line":399},[220,17493,9645],{"class":226},[220,17495,353],{"class":260},[220,17497,16040],{"class":264},[220,17499,17500,17502,17505],{"class":222,"line":644},[220,17501,16384],{"class":264},[220,17503,17504],{"class":230},"'auto-animate'",[220,17506,1760],{"class":264},[220,17508,17509,17512,17515],{"class":222,"line":650},[220,17510,17511],{"class":264}," mode: ",[220,17513,17514],{"class":230},"'ping-pong'",[220,17516,1760],{"class":264},[220,17518,17519,17522,17524],{"class":222,"line":656},[220,17520,17521],{"class":264}," outputMin: ",[220,17523,16976],{"class":420},[220,17525,1760],{"class":264},[220,17527,17528,17531,17533],{"class":222,"line":673},[220,17529,17530],{"class":264}," outputMax: ",[220,17532,8236],{"class":420},[220,17534,1760],{"class":264},[220,17536,17537,17540,17542],{"class":222,"line":682},[220,17538,17539],{"class":264}," speed: ",[220,17541,6299],{"class":420},[220,17543,1760],{"class":264},[220,17545,17546,17548],{"class":222,"line":691},[220,17547,11981],{"class":264},[220,17549,17550],{"class":230},"'sine'\n",[220,17552,17553],{"class":222,"line":696},[220,17554,16118],{"class":264},[220,17556,17557],{"class":222,"line":702},[220,17558,1234],{"class":264},[220,17560,17561,17563,17565],{"class":222,"line":718},[220,17562,402],{"class":264},[220,17564,347],{"class":420},[220,17566,359],{"class":264},[212,17568,17570],{"className":468,"code":17569,"language":469,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,17571,17572,17586,17592,17600,17608,17616,17624,17632,17640,17648,17654,17658,17662],{"__ignoreMap":178},[220,17573,17574,17576,17578,17580,17582,17584],{"class":222,"line":223},[220,17575,343],{"class":264},[220,17577,347],{"class":420},[220,17579,350],{"class":226},[220,17581,353],{"class":260},[220,17583,356],{"class":230},[220,17585,359],{"class":264},[220,17587,17588,17590],{"class":222,"line":179},[220,17589,364],{"class":264},[220,17591,9630],{"class":420},[220,17593,17594,17596,17598],{"class":222,"line":389},[220,17595,9635],{"class":226},[220,17597,353],{"class":260},[220,17599,17400],{"class":230},[220,17601,17602,17604,17606],{"class":222,"line":399},[220,17603,9645],{"class":226},[220,17605,353],{"class":260},[220,17607,16040],{"class":264},[220,17609,17610,17612,17614],{"class":222,"line":644},[220,17611,16384],{"class":264},[220,17613,17504],{"class":230},[220,17615,1760],{"class":264},[220,17617,17618,17620,17622],{"class":222,"line":650},[220,17619,17511],{"class":264},[220,17621,17514],{"class":230},[220,17623,1760],{"class":264},[220,17625,17626,17628,17630],{"class":222,"line":656},[220,17627,17521],{"class":264},[220,17629,16976],{"class":420},[220,17631,1760],{"class":264},[220,17633,17634,17636,17638],{"class":222,"line":673},[220,17635,17530],{"class":264},[220,17637,8236],{"class":420},[220,17639,1760],{"class":264},[220,17641,17642,17644,17646],{"class":222,"line":682},[220,17643,17539],{"class":264},[220,17645,6299],{"class":420},[220,17647,1760],{"class":264},[220,17649,17650,17652],{"class":222,"line":691},[220,17651,11981],{"class":264},[220,17653,17550],{"class":230},[220,17655,17656],{"class":222,"line":696},[220,17657,16118],{"class":264},[220,17659,17660],{"class":222,"line":702},[220,17661,1234],{"class":264},[220,17663,17664,17666,17668],{"class":222,"line":718},[220,17665,402],{"class":264},[220,17667,347],{"class":420},[220,17669,359],{"class":264},[212,17671,17672],{"className":468,"code":17569,"language":469,"meta":178,"style":178},[99,17673,17674,17688,17694,17702,17710,17718,17726,17734,17742,17750,17756,17760,17764],{"__ignoreMap":178},[220,17675,17676,17678,17680,17682,17684,17686],{"class":222,"line":223},[220,17677,343],{"class":264},[220,17679,347],{"class":420},[220,17681,350],{"class":226},[220,17683,353],{"class":260},[220,17685,356],{"class":230},[220,17687,359],{"class":264},[220,17689,17690,17692],{"class":222,"line":179},[220,17691,364],{"class":264},[220,17693,9630],{"class":420},[220,17695,17696,17698,17700],{"class":222,"line":389},[220,17697,9635],{"class":226},[220,17699,353],{"class":260},[220,17701,17400],{"class":230},[220,17703,17704,17706,17708],{"class":222,"line":399},[220,17705,9645],{"class":226},[220,17707,353],{"class":260},[220,17709,16040],{"class":264},[220,17711,17712,17714,17716],{"class":222,"line":644},[220,17713,16384],{"class":264},[220,17715,17504],{"class":230},[220,17717,1760],{"class":264},[220,17719,17720,17722,17724],{"class":222,"line":650},[220,17721,17511],{"class":264},[220,17723,17514],{"class":230},[220,17725,1760],{"class":264},[220,17727,17728,17730,17732],{"class":222,"line":656},[220,17729,17521],{"class":264},[220,17731,16976],{"class":420},[220,17733,1760],{"class":264},[220,17735,17736,17738,17740],{"class":222,"line":673},[220,17737,17530],{"class":264},[220,17739,8236],{"class":420},[220,17741,1760],{"class":264},[220,17743,17744,17746,17748],{"class":222,"line":682},[220,17745,17539],{"class":264},[220,17747,6299],{"class":420},[220,17749,1760],{"class":264},[220,17751,17752,17754],{"class":222,"line":691},[220,17753,11981],{"class":264},[220,17755,17550],{"class":230},[220,17757,17758],{"class":222,"line":696},[220,17759,16118],{"class":264},[220,17761,17762],{"class":222,"line":702},[220,17763,1234],{"class":264},[220,17765,17766,17768,17770],{"class":222,"line":718},[220,17767,402],{"class":264},[220,17769,347],{"class":420},[220,17771,359],{"class":264},[212,17773,17775],{"className":251,"code":17774,"language":253,"meta":178,"style":178},"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",[99,17776,17777,17791,17795,17799,17807,17811,17821,17826,17835,17844,17853,17862,17871,17878,17882,17886,17890,17894],{"__ignoreMap":178},[220,17778,17779,17781,17783,17785,17787,17789],{"class":222,"line":223},[220,17780,1735],{"class":260},[220,17782,1738],{"class":420},[220,17784,1741],{"class":260},[220,17786,1744],{"class":260},[220,17788,1747],{"class":226},[220,17790,1750],{"class":264},[220,17792,17793],{"class":222,"line":179},[220,17794,1765],{"class":264},[220,17796,17797],{"class":222,"line":389},[220,17798,16379],{"class":264},[220,17800,17801,17803,17805],{"class":222,"line":399},[220,17802,16384],{"class":264},[220,17804,3206],{"class":230},[220,17806,1760],{"class":264},[220,17808,17809],{"class":222,"line":644},[220,17810,16393],{"class":264},[220,17812,17813,17816,17819],{"class":222,"line":650},[220,17814,17815],{"class":264}," color: ",[220,17817,17818],{"class":230},"'#6366f1'",[220,17820,1760],{"class":264},[220,17822,17823],{"class":222,"line":656},[220,17824,17825],{"class":264}," radius: {\n",[220,17827,17828,17831,17833],{"class":222,"line":673},[220,17829,17830],{"class":264}," type: ",[220,17832,17504],{"class":230},[220,17834,1760],{"class":264},[220,17836,17837,17840,17842],{"class":222,"line":682},[220,17838,17839],{"class":264}," mode: ",[220,17841,17514],{"class":230},[220,17843,1760],{"class":264},[220,17845,17846,17849,17851],{"class":222,"line":691},[220,17847,17848],{"class":264}," outputMin: ",[220,17850,16976],{"class":420},[220,17852,1760],{"class":264},[220,17854,17855,17858,17860],{"class":222,"line":696},[220,17856,17857],{"class":264}," outputMax: ",[220,17859,8236],{"class":420},[220,17861,1760],{"class":264},[220,17863,17864,17867,17869],{"class":222,"line":702},[220,17865,17866],{"class":264}," speed: ",[220,17868,6299],{"class":420},[220,17870,1760],{"class":264},[220,17872,17873,17876],{"class":222,"line":718},[220,17874,17875],{"class":264}," easing: ",[220,17877,17550],{"class":230},[220,17879,17880],{"class":222,"line":727},[220,17881,16471],{"class":264},[220,17883,17884],{"class":222,"line":2664},[220,17885,4929],{"class":264},[220,17887,17888],{"class":222,"line":3522},[220,17889,4609],{"class":264},[220,17891,17892],{"class":222,"line":9662},[220,17893,1787],{"class":264},[220,17895,17896],{"class":222,"line":9673},[220,17897,1792],{"class":264},[19,17899],{":preset":17900},"{\"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,17902,17903],{},[159,17904,17905],{},"Properties:",[1794,17907,17908,17921],{},[1797,17909,17910],{},[1800,17911,17912,17915,17917,17919],{},[1803,17913,17914],{},"Prop",[1803,17916,15187],{},[1803,17918,15190],{},[1803,17920,1808],{},[1810,17922,17923,17948,17964,17980,17999],{},[1800,17924,17925,17930,17935,17938],{},[1815,17926,17927],{},[99,17928,17929],{},"mode",[1815,17931,17932],{},[99,17933,17934],{},"'ping-pong' | 'loop'",[1815,17936,17937],{},"required",[1815,17939,17940,17943,17944,17947],{},[99,17941,17942],{},"ping-pong"," oscillates between min and max. ",[99,17945,17946],{},"loop"," advances from min to max then wraps.",[1800,17949,17950,17955,17959,17961],{},[1815,17951,17952],{},[99,17953,17954],{},"outputMin",[1815,17956,17957],{},[99,17958,15300],{},[1815,17960,17937],{},[1815,17962,17963],{},"Value at the start\u002Fbottom of the range.",[1800,17965,17966,17971,17975,17977],{},[1815,17967,17968],{},[99,17969,17970],{},"outputMax",[1815,17972,17973],{},[99,17974,15300],{},[1815,17976,17937],{},[1815,17978,17979],{},"Value at the end\u002Ftop of the range.",[1800,17981,17982,17987,17991,17996],{},[1815,17983,17984],{},[99,17985,17986],{},"speed",[1815,17988,17989],{},[99,17990,15300],{},[1815,17992,17993],{},[99,17994,17995],{},"1.0",[1815,17997,17998],{},"Cycles per second. Negative values reverse the loop direction.",[1800,18000,18001,18006,18010,18015],{},[1815,18002,18003],{},[99,18004,18005],{},"easing",[1815,18007,18008],{},[99,18009,9060],{},[1815,18011,18012],{},[99,18013,18014],{},"'sine'",[1815,18016,18017,18018,18020,18021,1895,18024,1895,18026,1895,18029,1895,18032,4836],{},"Easing curve for ",[99,18019,17942],{}," mode. Options: ",[99,18022,18023],{},"sine",[99,18025,1894],{},[99,18027,18028],{},"quad",[99,18030,18031],{},"expo",[99,18033,18034],{},"bounce",[15,18036,18037,18040,18041,18043,18044,4836],{},[159,18038,18039],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,18042,17946],{}," mode and ",[99,18045,18046],{},"outputMin: 0, outputMax: 360",[23,18048,18049],{"id":18049},"mouse-position",[15,18051,18052,18053,18056,18057,1895,18059,15667,18062,4836],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,18054,18055],{},"{ x, y }"," coordinates, such as ",[99,18058,8241],{},[99,18060,18061],{},"position",[99,18063,18064],{},"offset",[246,18066,18067,18149,18247,18338,18428],{":tabs":1557},[212,18068,18070],{"className":334,"code":18069,"language":336,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18071,18072,18086,18092,18100,18109,18118,18123,18128,18133,18137,18141],{"__ignoreMap":178},[220,18073,18074,18076,18078,18080,18082,18084],{"class":222,"line":223},[220,18075,343],{"class":264},[220,18077,347],{"class":346},[220,18079,350],{"class":226},[220,18081,353],{"class":264},[220,18083,356],{"class":230},[220,18085,359],{"class":264},[220,18087,18088,18090],{"class":222,"line":179},[220,18089,364],{"class":264},[220,18091,9630],{"class":346},[220,18093,18094,18096,18098],{"class":222,"line":389},[220,18095,9635],{"class":226},[220,18097,353],{"class":264},[220,18099,17400],{"class":230},[220,18101,18102,18104,18106],{"class":222,"line":399},[220,18103,17405],{"class":226},[220,18105,353],{"class":264},[220,18107,18108],{"class":230},"\"0.15\"\n",[220,18110,18111,18114,18116],{"class":222,"line":644},[220,18112,18113],{"class":226}," :center",[220,18115,353],{"class":264},[220,18117,15097],{"class":230},[220,18119,18120],{"class":222,"line":650},[220,18121,18122],{"class":230}," type: 'mouse-position',\n",[220,18124,18125],{"class":222,"line":656},[220,18126,18127],{"class":230}," smoothing: 0.12,\n",[220,18129,18130],{"class":222,"line":673},[220,18131,18132],{"class":230}," momentum: 0.2\n",[220,18134,18135],{"class":222,"line":682},[220,18136,17444],{"class":230},[220,18138,18139],{"class":222,"line":691},[220,18140,1234],{"class":264},[220,18142,18143,18145,18147],{"class":222,"line":696},[220,18144,402],{"class":264},[220,18146,347],{"class":346},[220,18148,359],{"class":264},[212,18150,18152],{"className":409,"code":18151,"language":411,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18153,18154,18168,18174,18182,18195,18204,18213,18223,18231,18235,18239],{"__ignoreMap":178},[220,18155,18156,18158,18160,18162,18164,18166],{"class":222,"line":223},[220,18157,343],{"class":264},[220,18159,347],{"class":420},[220,18161,423],{"class":226},[220,18163,353],{"class":260},[220,18165,356],{"class":230},[220,18167,359],{"class":264},[220,18169,18170,18172],{"class":222,"line":179},[220,18171,364],{"class":264},[220,18173,9630],{"class":420},[220,18175,18176,18178,18180],{"class":222,"line":389},[220,18177,9635],{"class":226},[220,18179,353],{"class":260},[220,18181,17400],{"class":230},[220,18183,18184,18186,18188,18190,18193],{"class":222,"line":399},[220,18185,9645],{"class":226},[220,18187,353],{"class":260},[220,18189,743],{"class":264},[220,18191,18192],{"class":420},"0.15",[220,18194,749],{"class":264},[220,18196,18197,18200,18202],{"class":222,"line":644},[220,18198,18199],{"class":226}," center",[220,18201,353],{"class":260},[220,18203,16040],{"class":264},[220,18205,18206,18208,18211],{"class":222,"line":650},[220,18207,16384],{"class":264},[220,18209,18210],{"class":230},"'mouse-position'",[220,18212,1760],{"class":264},[220,18214,18215,18218,18221],{"class":222,"line":656},[220,18216,18217],{"class":264}," smoothing: ",[220,18219,18220],{"class":420},"0.12",[220,18222,1760],{"class":264},[220,18224,18225,18228],{"class":222,"line":673},[220,18226,18227],{"class":264}," momentum: ",[220,18229,18230],{"class":420},"0.2\n",[220,18232,18233],{"class":222,"line":682},[220,18234,16118],{"class":264},[220,18236,18237],{"class":222,"line":691},[220,18238,1234],{"class":264},[220,18240,18241,18243,18245],{"class":222,"line":696},[220,18242,402],{"class":264},[220,18244,347],{"class":420},[220,18246,359],{"class":264},[212,18248,18250],{"className":468,"code":18249,"language":469,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18251,18252,18266,18272,18280,18292,18300,18308,18316,18322,18326,18330],{"__ignoreMap":178},[220,18253,18254,18256,18258,18260,18262,18264],{"class":222,"line":223},[220,18255,343],{"class":264},[220,18257,347],{"class":420},[220,18259,350],{"class":226},[220,18261,353],{"class":260},[220,18263,356],{"class":230},[220,18265,359],{"class":264},[220,18267,18268,18270],{"class":222,"line":179},[220,18269,364],{"class":264},[220,18271,9630],{"class":420},[220,18273,18274,18276,18278],{"class":222,"line":389},[220,18275,9635],{"class":226},[220,18277,353],{"class":260},[220,18279,17400],{"class":230},[220,18281,18282,18284,18286,18288,18290],{"class":222,"line":399},[220,18283,9645],{"class":226},[220,18285,353],{"class":260},[220,18287,743],{"class":264},[220,18289,18192],{"class":420},[220,18291,749],{"class":264},[220,18293,18294,18296,18298],{"class":222,"line":644},[220,18295,18199],{"class":226},[220,18297,353],{"class":260},[220,18299,16040],{"class":264},[220,18301,18302,18304,18306],{"class":222,"line":650},[220,18303,16384],{"class":264},[220,18305,18210],{"class":230},[220,18307,1760],{"class":264},[220,18309,18310,18312,18314],{"class":222,"line":656},[220,18311,18217],{"class":264},[220,18313,18220],{"class":420},[220,18315,1760],{"class":264},[220,18317,18318,18320],{"class":222,"line":673},[220,18319,18227],{"class":264},[220,18321,18230],{"class":420},[220,18323,18324],{"class":222,"line":682},[220,18325,16118],{"class":264},[220,18327,18328],{"class":222,"line":691},[220,18329,1234],{"class":264},[220,18331,18332,18334,18336],{"class":222,"line":696},[220,18333,402],{"class":264},[220,18335,347],{"class":420},[220,18337,359],{"class":264},[212,18339,18340],{"className":468,"code":18249,"language":469,"meta":178,"style":178},[99,18341,18342,18356,18362,18370,18382,18390,18398,18406,18412,18416,18420],{"__ignoreMap":178},[220,18343,18344,18346,18348,18350,18352,18354],{"class":222,"line":223},[220,18345,343],{"class":264},[220,18347,347],{"class":420},[220,18349,350],{"class":226},[220,18351,353],{"class":260},[220,18353,356],{"class":230},[220,18355,359],{"class":264},[220,18357,18358,18360],{"class":222,"line":179},[220,18359,364],{"class":264},[220,18361,9630],{"class":420},[220,18363,18364,18366,18368],{"class":222,"line":389},[220,18365,9635],{"class":226},[220,18367,353],{"class":260},[220,18369,17400],{"class":230},[220,18371,18372,18374,18376,18378,18380],{"class":222,"line":399},[220,18373,9645],{"class":226},[220,18375,353],{"class":260},[220,18377,743],{"class":264},[220,18379,18192],{"class":420},[220,18381,749],{"class":264},[220,18383,18384,18386,18388],{"class":222,"line":644},[220,18385,18199],{"class":226},[220,18387,353],{"class":260},[220,18389,16040],{"class":264},[220,18391,18392,18394,18396],{"class":222,"line":650},[220,18393,16384],{"class":264},[220,18395,18210],{"class":230},[220,18397,1760],{"class":264},[220,18399,18400,18402,18404],{"class":222,"line":656},[220,18401,18217],{"class":264},[220,18403,18220],{"class":420},[220,18405,1760],{"class":264},[220,18407,18408,18410],{"class":222,"line":673},[220,18409,18227],{"class":264},[220,18411,18230],{"class":420},[220,18413,18414],{"class":222,"line":682},[220,18415,16118],{"class":264},[220,18417,18418],{"class":222,"line":691},[220,18419,1234],{"class":264},[220,18421,18422,18424,18426],{"class":222,"line":696},[220,18423,402],{"class":264},[220,18425,347],{"class":420},[220,18427,359],{"class":264},[212,18429,18431],{"className":251,"code":18430,"language":253,"meta":178,"style":178},"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",[99,18432,18433,18447,18451,18455,18463,18467,18475,18484,18489,18497,18506,18513,18517,18521,18525,18529],{"__ignoreMap":178},[220,18434,18435,18437,18439,18441,18443,18445],{"class":222,"line":223},[220,18436,1735],{"class":260},[220,18438,1738],{"class":420},[220,18440,1741],{"class":260},[220,18442,1744],{"class":260},[220,18444,1747],{"class":226},[220,18446,1750],{"class":264},[220,18448,18449],{"class":222,"line":179},[220,18450,1765],{"class":264},[220,18452,18453],{"class":222,"line":389},[220,18454,16379],{"class":264},[220,18456,18457,18459,18461],{"class":222,"line":399},[220,18458,16384],{"class":264},[220,18460,3206],{"class":230},[220,18462,1760],{"class":264},[220,18464,18465],{"class":222,"line":644},[220,18466,16393],{"class":264},[220,18468,18469,18471,18473],{"class":222,"line":650},[220,18470,17815],{"class":264},[220,18472,17818],{"class":230},[220,18474,1760],{"class":264},[220,18476,18477,18480,18482],{"class":222,"line":656},[220,18478,18479],{"class":264}," radius: ",[220,18481,18192],{"class":420},[220,18483,1760],{"class":264},[220,18485,18486],{"class":222,"line":673},[220,18487,18488],{"class":264}," center: {\n",[220,18490,18491,18493,18495],{"class":222,"line":682},[220,18492,17830],{"class":264},[220,18494,18210],{"class":230},[220,18496,1760],{"class":264},[220,18498,18499,18502,18504],{"class":222,"line":691},[220,18500,18501],{"class":264}," smoothing: ",[220,18503,18220],{"class":420},[220,18505,1760],{"class":264},[220,18507,18508,18511],{"class":222,"line":696},[220,18509,18510],{"class":264}," momentum: ",[220,18512,18230],{"class":420},[220,18514,18515],{"class":222,"line":702},[220,18516,16471],{"class":264},[220,18518,18519],{"class":222,"line":718},[220,18520,4929],{"class":264},[220,18522,18523],{"class":222,"line":727},[220,18524,4609],{"class":264},[220,18526,18527],{"class":222,"line":2664},[220,18528,1787],{"class":264},[220,18530,18531],{"class":222,"line":3522},[220,18532,1792],{"class":264},[19,18534],{":preset":18535},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,18537,18538],{},[159,18539,17905],{},[1794,18541,18542,18554],{},[1797,18543,18544],{},[1800,18545,18546,18548,18550,18552],{},[1803,18547,17914],{},[1803,18549,15187],{},[1803,18551,15190],{},[1803,18553,1808],{},[1810,18555,18556,18577,18596,18614,18632,18653,18674,18701,18719],{},[1800,18557,18558,18562,18567,18572],{},[1815,18559,18560],{},[99,18561,15158],{},[1815,18563,18564],{},[99,18565,18566],{},"'mouse' | number",[1815,18568,18569],{},[99,18570,18571],{},"'mouse'",[1815,18573,18574,18576],{},[99,18575,18571],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,18578,18579,18583,18587,18591],{},[1815,18580,18581],{},[99,18582,15161],{},[1815,18584,18585],{},[99,18586,18566],{},[1815,18588,18589],{},[99,18590,18571],{},[1815,18592,18593,18595],{},[99,18594,18571],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,18597,18598,18603,18607,18611],{},[1815,18599,18600],{},[99,18601,18602],{},"invertX",[1815,18604,18605],{},[99,18606,15335],{},[1815,18608,18609],{},[99,18610,2629],{},[1815,18612,18613],{},"Flips the X direction — cursor moving right moves position left.",[1800,18615,18616,18621,18625,18629],{},[1815,18617,18618],{},[99,18619,18620],{},"invertY",[1815,18622,18623],{},[99,18624,15335],{},[1815,18626,18627],{},[99,18628,2629],{},[1815,18630,18631],{},"Flips the Y direction.",[1800,18633,18634,18639,18643,18647],{},[1815,18635,18636],{},[99,18637,18638],{},"smoothing",[1815,18640,18641],{},[99,18642,15300],{},[1815,18644,18645],{},[99,18646,8673],{},[1815,18648,18649,18650,18652],{},"Lag amount (0–1). ",[99,18651,8673],{}," = instant, higher values = sluggish follow.",[1800,18654,18655,18660,18664,18668],{},[1815,18656,18657],{},[99,18658,18659],{},"momentum",[1815,18661,18662],{},[99,18663,15300],{},[1815,18665,18666],{},[99,18667,8673],{},[1815,18669,18670,18671,18673],{},"Spring bounce (0–1). ",[99,18672,8673],{}," = no overshoot, values near 1 = springy.",[1800,18675,18676,18681,18685,18689],{},[1815,18677,18678],{},[99,18679,18680],{},"reach",[1815,18682,18683],{},[99,18684,15300],{},[1815,18686,18687],{},[99,18688,8677],{},[1815,18690,18691,18692,18694,18695,18697,18698,18700],{},"Displacement scale. ",[99,18693,8677],{}," = 1:1 with cursor. ",[99,18696,7214],{}," = twice the displacement. ",[99,18699,8673],{}," = pinned to origin.",[1800,18702,18703,18708,18712,18716],{},[1815,18704,18705],{},[99,18706,18707],{},"originX",[1815,18709,18710],{},[99,18711,15300],{},[1815,18713,18714],{},[99,18715,7754],{},[1815,18717,18718],{},"X coordinate of the origin point that displacement scales from.",[1800,18720,18721,18726,18730,18734],{},[1815,18722,18723],{},[99,18724,18725],{},"originY",[1815,18727,18728],{},[99,18729,15300],{},[1815,18731,18732],{},[99,18733,7754],{},[1815,18735,18736],{},"Y coordinate of the origin point.",[15,18738,18739,18742,18743,18745,18746,18748],{},[159,18740,18741],{},"Pinning one axis:"," Set ",[99,18744,15158],{}," or ",[99,18747,15161],{}," to a number to fix that axis while the other tracks the mouse:",[212,18750,18752],{"className":334,"code":18751,"language":336,"meta":178,"style":178},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n\u003CCircle :radius=\"0.15\" :center=\"{ type: 'mouse-position', y: 0.5 }\" \u002F>\n",[99,18753,18754,18759],{"__ignoreMap":178},[220,18755,18756],{"class":222,"line":223},[220,18757,18758],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,18760,18761,18763,18765,18767,18769,18772,18774,18776,18779],{"class":222,"line":179},[220,18762,343],{"class":264},[220,18764,2553],{"class":346},[220,18766,17328],{"class":226},[220,18768,353],{"class":264},[220,18770,18771],{"class":230},"\"0.15\"",[220,18773,8133],{"class":226},[220,18775,353],{"class":264},[220,18777,18778],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,18780,386],{"class":264},[23,18782,18783],{"id":18783},"mouse",[15,18785,18786],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,18788,18789,18871,18970,19065,19159],{":tabs":1557},[212,18790,18792],{"className":334,"code":18791,"language":336,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18793,18794,18808,18814,18822,18830,18835,18840,18845,18850,18855,18859,18863],{"__ignoreMap":178},[220,18795,18796,18798,18800,18802,18804,18806],{"class":222,"line":223},[220,18797,343],{"class":264},[220,18799,347],{"class":346},[220,18801,350],{"class":226},[220,18803,353],{"class":264},[220,18805,356],{"class":230},[220,18807,359],{"class":264},[220,18809,18810,18812],{"class":222,"line":179},[220,18811,364],{"class":264},[220,18813,9630],{"class":346},[220,18815,18816,18818,18820],{"class":222,"line":389},[220,18817,9635],{"class":226},[220,18819,353],{"class":264},[220,18821,17400],{"class":230},[220,18823,18824,18826,18828],{"class":222,"line":399},[220,18825,17405],{"class":226},[220,18827,353],{"class":264},[220,18829,15097],{"class":230},[220,18831,18832],{"class":222,"line":644},[220,18833,18834],{"class":230}," type: 'mouse',\n",[220,18836,18837],{"class":222,"line":650},[220,18838,18839],{"class":230}," axis: 'x',\n",[220,18841,18842],{"class":222,"line":656},[220,18843,18844],{"class":230}," outputMin: 0.1,\n",[220,18846,18847],{"class":222,"line":673},[220,18848,18849],{"class":230}," outputMax: 0.7,\n",[220,18851,18852],{"class":222,"line":682},[220,18853,18854],{"class":230}," smoothing: 0.1\n",[220,18856,18857],{"class":222,"line":691},[220,18858,17444],{"class":230},[220,18860,18861],{"class":222,"line":696},[220,18862,1234],{"class":264},[220,18864,18865,18867,18869],{"class":222,"line":702},[220,18866,402],{"class":264},[220,18868,347],{"class":346},[220,18870,359],{"class":264},[212,18872,18874],{"className":409,"code":18873,"language":411,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18875,18876,18890,18896,18904,18912,18920,18930,18938,18947,18954,18958,18962],{"__ignoreMap":178},[220,18877,18878,18880,18882,18884,18886,18888],{"class":222,"line":223},[220,18879,343],{"class":264},[220,18881,347],{"class":420},[220,18883,423],{"class":226},[220,18885,353],{"class":260},[220,18887,356],{"class":230},[220,18889,359],{"class":264},[220,18891,18892,18894],{"class":222,"line":179},[220,18893,364],{"class":264},[220,18895,9630],{"class":420},[220,18897,18898,18900,18902],{"class":222,"line":389},[220,18899,9635],{"class":226},[220,18901,353],{"class":260},[220,18903,17400],{"class":230},[220,18905,18906,18908,18910],{"class":222,"line":399},[220,18907,9645],{"class":226},[220,18909,353],{"class":260},[220,18911,16040],{"class":264},[220,18913,18914,18916,18918],{"class":222,"line":644},[220,18915,16384],{"class":264},[220,18917,18571],{"class":230},[220,18919,1760],{"class":264},[220,18921,18922,18925,18928],{"class":222,"line":650},[220,18923,18924],{"class":264}," axis: ",[220,18926,18927],{"class":230},"'x'",[220,18929,1760],{"class":264},[220,18931,18932,18934,18936],{"class":222,"line":656},[220,18933,17521],{"class":264},[220,18935,16054],{"class":420},[220,18937,1760],{"class":264},[220,18939,18940,18942,18945],{"class":222,"line":673},[220,18941,17530],{"class":264},[220,18943,18944],{"class":420},"0.7",[220,18946,1760],{"class":264},[220,18948,18949,18951],{"class":222,"line":682},[220,18950,18217],{"class":264},[220,18952,18953],{"class":420},"0.1\n",[220,18955,18956],{"class":222,"line":691},[220,18957,16118],{"class":264},[220,18959,18960],{"class":222,"line":696},[220,18961,1234],{"class":264},[220,18963,18964,18966,18968],{"class":222,"line":702},[220,18965,402],{"class":264},[220,18967,347],{"class":420},[220,18969,359],{"class":264},[212,18971,18973],{"className":468,"code":18972,"language":469,"meta":178,"style":178},"\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 \u002F>\n\u003C\u002FShader>\n",[99,18974,18975,18989,18995,19003,19011,19019,19027,19035,19043,19049,19053,19057],{"__ignoreMap":178},[220,18976,18977,18979,18981,18983,18985,18987],{"class":222,"line":223},[220,18978,343],{"class":264},[220,18980,347],{"class":420},[220,18982,350],{"class":226},[220,18984,353],{"class":260},[220,18986,356],{"class":230},[220,18988,359],{"class":264},[220,18990,18991,18993],{"class":222,"line":179},[220,18992,364],{"class":264},[220,18994,9630],{"class":420},[220,18996,18997,18999,19001],{"class":222,"line":389},[220,18998,9635],{"class":226},[220,19000,353],{"class":260},[220,19002,17400],{"class":230},[220,19004,19005,19007,19009],{"class":222,"line":399},[220,19006,9645],{"class":226},[220,19008,353],{"class":260},[220,19010,16040],{"class":264},[220,19012,19013,19015,19017],{"class":222,"line":644},[220,19014,16384],{"class":264},[220,19016,18571],{"class":230},[220,19018,1760],{"class":264},[220,19020,19021,19023,19025],{"class":222,"line":650},[220,19022,18924],{"class":264},[220,19024,18927],{"class":230},[220,19026,1760],{"class":264},[220,19028,19029,19031,19033],{"class":222,"line":656},[220,19030,17521],{"class":264},[220,19032,16054],{"class":420},[220,19034,1760],{"class":264},[220,19036,19037,19039,19041],{"class":222,"line":673},[220,19038,17530],{"class":264},[220,19040,18944],{"class":420},[220,19042,1760],{"class":264},[220,19044,19045,19047],{"class":222,"line":682},[220,19046,18217],{"class":264},[220,19048,18953],{"class":420},[220,19050,19051],{"class":222,"line":691},[220,19052,16118],{"class":264},[220,19054,19055],{"class":222,"line":696},[220,19056,1234],{"class":264},[220,19058,19059,19061,19063],{"class":222,"line":702},[220,19060,402],{"class":264},[220,19062,347],{"class":420},[220,19064,359],{"class":264},[212,19066,19067],{"className":468,"code":18972,"language":469,"meta":178,"style":178},[99,19068,19069,19083,19089,19097,19105,19113,19121,19129,19137,19143,19147,19151],{"__ignoreMap":178},[220,19070,19071,19073,19075,19077,19079,19081],{"class":222,"line":223},[220,19072,343],{"class":264},[220,19074,347],{"class":420},[220,19076,350],{"class":226},[220,19078,353],{"class":260},[220,19080,356],{"class":230},[220,19082,359],{"class":264},[220,19084,19085,19087],{"class":222,"line":179},[220,19086,364],{"class":264},[220,19088,9630],{"class":420},[220,19090,19091,19093,19095],{"class":222,"line":389},[220,19092,9635],{"class":226},[220,19094,353],{"class":260},[220,19096,17400],{"class":230},[220,19098,19099,19101,19103],{"class":222,"line":399},[220,19100,9645],{"class":226},[220,19102,353],{"class":260},[220,19104,16040],{"class":264},[220,19106,19107,19109,19111],{"class":222,"line":644},[220,19108,16384],{"class":264},[220,19110,18571],{"class":230},[220,19112,1760],{"class":264},[220,19114,19115,19117,19119],{"class":222,"line":650},[220,19116,18924],{"class":264},[220,19118,18927],{"class":230},[220,19120,1760],{"class":264},[220,19122,19123,19125,19127],{"class":222,"line":656},[220,19124,17521],{"class":264},[220,19126,16054],{"class":420},[220,19128,1760],{"class":264},[220,19130,19131,19133,19135],{"class":222,"line":673},[220,19132,17530],{"class":264},[220,19134,18944],{"class":420},[220,19136,1760],{"class":264},[220,19138,19139,19141],{"class":222,"line":682},[220,19140,18217],{"class":264},[220,19142,18953],{"class":420},[220,19144,19145],{"class":222,"line":691},[220,19146,16118],{"class":264},[220,19148,19149],{"class":222,"line":696},[220,19150,1234],{"class":264},[220,19152,19153,19155,19157],{"class":222,"line":702},[220,19154,402],{"class":264},[220,19156,347],{"class":420},[220,19158,359],{"class":264},[212,19160,19162],{"className":251,"code":19161,"language":253,"meta":178,"style":178},"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",[99,19163,19164,19178,19182,19186,19194,19198,19206,19210,19218,19227,19235,19243,19249,19253,19257,19261,19265],{"__ignoreMap":178},[220,19165,19166,19168,19170,19172,19174,19176],{"class":222,"line":223},[220,19167,1735],{"class":260},[220,19169,1738],{"class":420},[220,19171,1741],{"class":260},[220,19173,1744],{"class":260},[220,19175,1747],{"class":226},[220,19177,1750],{"class":264},[220,19179,19180],{"class":222,"line":179},[220,19181,1765],{"class":264},[220,19183,19184],{"class":222,"line":389},[220,19185,16379],{"class":264},[220,19187,19188,19190,19192],{"class":222,"line":399},[220,19189,16384],{"class":264},[220,19191,3206],{"class":230},[220,19193,1760],{"class":264},[220,19195,19196],{"class":222,"line":644},[220,19197,16393],{"class":264},[220,19199,19200,19202,19204],{"class":222,"line":650},[220,19201,17815],{"class":264},[220,19203,17818],{"class":230},[220,19205,1760],{"class":264},[220,19207,19208],{"class":222,"line":656},[220,19209,17825],{"class":264},[220,19211,19212,19214,19216],{"class":222,"line":673},[220,19213,17830],{"class":264},[220,19215,18571],{"class":230},[220,19217,1760],{"class":264},[220,19219,19220,19223,19225],{"class":222,"line":682},[220,19221,19222],{"class":264}," axis: ",[220,19224,18927],{"class":230},[220,19226,1760],{"class":264},[220,19228,19229,19231,19233],{"class":222,"line":691},[220,19230,17848],{"class":264},[220,19232,16054],{"class":420},[220,19234,1760],{"class":264},[220,19236,19237,19239,19241],{"class":222,"line":696},[220,19238,17857],{"class":264},[220,19240,18944],{"class":420},[220,19242,1760],{"class":264},[220,19244,19245,19247],{"class":222,"line":702},[220,19246,18501],{"class":264},[220,19248,18953],{"class":420},[220,19250,19251],{"class":222,"line":718},[220,19252,16471],{"class":264},[220,19254,19255],{"class":222,"line":727},[220,19256,4929],{"class":264},[220,19258,19259],{"class":222,"line":2664},[220,19260,4609],{"class":264},[220,19262,19263],{"class":222,"line":3522},[220,19264,1787],{"class":264},[220,19266,19267],{"class":222,"line":9662},[220,19268,1792],{"class":264},[19,19270],{":preset":19271},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,19273,19274],{},[159,19275,17905],{},[1794,19277,19278,19290],{},[1797,19279,19280],{},[1800,19281,19282,19284,19286,19288],{},[1803,19283,17914],{},[1803,19285,15187],{},[1803,19287,15190],{},[1803,19289,1808],{},[1810,19291,19292,19309,19324,19339,19369,19388],{},[1800,19293,19294,19299,19304,19306],{},[1815,19295,19296],{},[99,19297,19298],{},"axis",[1815,19300,19301],{},[99,19302,19303],{},"'x' | 'y'",[1815,19305,17937],{},[1815,19307,19308],{},"Which pointer axis drives this prop.",[1800,19310,19311,19315,19319,19321],{},[1815,19312,19313],{},[99,19314,17954],{},[1815,19316,19317],{},[99,19318,15300],{},[1815,19320,17937],{},[1815,19322,19323],{},"Output value when axis is at 0 (left or top).",[1800,19325,19326,19330,19334,19336],{},[1815,19327,19328],{},[99,19329,17970],{},[1815,19331,19332],{},[99,19333,15300],{},[1815,19335,17937],{},[1815,19337,19338],{},"Output value when axis is at 1 (right or bottom).",[1800,19340,19341,19346,19350,19354],{},[1815,19342,19343],{},[99,19344,19345],{},"curve",[1815,19347,19348],{},[99,19349,15300],{},[1815,19351,19352],{},[99,19353,8673],{},[1815,19355,19356,19357,1550,19360,19363,19364,19366,19367,4836],{},"Power curve: ",[99,19358,19359],{},"-1",[99,19361,19362],{},"+1",". Negative = biased toward ",[99,19365,17954],{},", positive = toward ",[99,19368,17970],{},[1800,19370,19371,19375,19379,19383],{},[1815,19372,19373],{},[99,19374,18638],{},[1815,19376,19377],{},[99,19378,15300],{},[1815,19380,19381],{},[99,19382,8673],{},[1815,19384,19385,19386,4836],{},"Lag (0–1). Same as ",[99,19387,18049],{},[1800,19389,19390,19394,19398,19402],{},[1815,19391,19392],{},[99,19393,18659],{},[1815,19395,19396],{},[99,19397,15300],{},[1815,19399,19400],{},[99,19401,8673],{},[1815,19403,19404,19405,4836],{},"Spring bounce (0–1). Same as ",[99,19406,18049],{},[15,19408,19409,19411],{},[159,19410,18039],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,19413,19414],{"id":19414},"map",[15,19416,19417],{},"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,19419,19420,19421,19423],{},"First, give the source component an ",[99,19422,9056],{},". Then reference that id in the driver:",[246,19425,19426,19564,19710,19847,19983],{":tabs":1557},[212,19427,19429],{"className":334,"code":19428,"language":336,"meta":178,"style":178},"\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 \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,19430,19431,19445,19450,19456,19465,19475,19484,19488,19492,19497,19504,19513,19518,19523,19528,19533,19538,19543,19548,19552,19556],{"__ignoreMap":178},[220,19432,19433,19435,19437,19439,19441,19443],{"class":222,"line":223},[220,19434,343],{"class":264},[220,19436,347],{"class":346},[220,19438,350],{"class":226},[220,19440,353],{"class":264},[220,19442,356],{"class":230},[220,19444,359],{"class":264},[220,19446,19447],{"class":222,"line":179},[220,19448,19449],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,19451,19452,19454],{"class":222,"line":389},[220,19453,364],{"class":264},[220,19455,1189],{"class":346},[220,19457,19458,19460,19462],{"class":222,"line":399},[220,19459,9577],{"class":226},[220,19461,353],{"class":264},[220,19463,19464],{"class":230},"\"grad\"\n",[220,19466,19467,19470,19472],{"class":222,"line":644},[220,19468,19469],{"class":226}," color-a",[220,19471,353],{"class":264},[220,19473,19474],{"class":230},"\"#000000\"\n",[220,19476,19477,19480,19482],{"class":222,"line":650},[220,19478,19479],{"class":226}," color-b",[220,19481,353],{"class":264},[220,19483,9591],{"class":230},[220,19485,19486],{"class":222,"line":656},[220,19487,1234],{"class":264},[220,19489,19490],{"class":222,"line":673},[220,19491,647],{"emptyLinePlaceholder":194},[220,19493,19494],{"class":222,"line":682},[220,19495,19496],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,19498,19499,19501],{"class":222,"line":691},[220,19500,364],{"class":264},[220,19502,19503],{"class":346},"DotGrid\n",[220,19505,19506,19509,19511],{"class":222,"line":696},[220,19507,19508],{"class":226}," :dot-size",[220,19510,353],{"class":264},[220,19512,15097],{"class":230},[220,19514,19515],{"class":222,"line":702},[220,19516,19517],{"class":230}," type: 'map',\n",[220,19519,19520],{"class":222,"line":718},[220,19521,19522],{"class":230}," source: 'grad',\n",[220,19524,19525],{"class":222,"line":727},[220,19526,19527],{"class":230}," channel: 'luminance',\n",[220,19529,19530],{"class":222,"line":2664},[220,19531,19532],{"class":230}," inputMin: 0,\n",[220,19534,19535],{"class":222,"line":3522},[220,19536,19537],{"class":230}," inputMax: 1,\n",[220,19539,19540],{"class":222,"line":9662},[220,19541,19542],{"class":230}," outputMin: 0.02,\n",[220,19544,19545],{"class":222,"line":9673},[220,19546,19547],{"class":230}," outputMax: 0.12\n",[220,19549,19550],{"class":222,"line":9678},[220,19551,17444],{"class":230},[220,19553,19554],{"class":222,"line":10999},[220,19555,1234],{"class":264},[220,19557,19558,19560,19562],{"class":222,"line":11004},[220,19559,402],{"class":264},[220,19561,347],{"class":346},[220,19563,359],{"class":264},[212,19565,19567],{"className":409,"code":19566,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,19568,19569,19583,19589,19597,19605,19613,19617,19623,19632,19641,19651,19660,19669,19678,19687,19694,19698,19702],{"__ignoreMap":178},[220,19570,19571,19573,19575,19577,19579,19581],{"class":222,"line":223},[220,19572,343],{"class":264},[220,19574,347],{"class":420},[220,19576,423],{"class":226},[220,19578,353],{"class":260},[220,19580,356],{"class":230},[220,19582,359],{"class":264},[220,19584,19585,19587],{"class":222,"line":179},[220,19586,364],{"class":264},[220,19588,1189],{"class":420},[220,19590,19591,19593,19595],{"class":222,"line":389},[220,19592,9577],{"class":226},[220,19594,353],{"class":260},[220,19596,19464],{"class":230},[220,19598,19599,19601,19603],{"class":222,"line":399},[220,19600,1194],{"class":226},[220,19602,353],{"class":260},[220,19604,19474],{"class":230},[220,19606,19607,19609,19611],{"class":222,"line":644},[220,19608,1204],{"class":226},[220,19610,353],{"class":260},[220,19612,9591],{"class":230},[220,19614,19615],{"class":222,"line":650},[220,19616,1234],{"class":264},[220,19618,19619,19621],{"class":222,"line":656},[220,19620,364],{"class":264},[220,19622,19503],{"class":420},[220,19624,19625,19628,19630],{"class":222,"line":673},[220,19626,19627],{"class":226}," dotSize",[220,19629,353],{"class":260},[220,19631,16040],{"class":264},[220,19633,19634,19636,19639],{"class":222,"line":682},[220,19635,16384],{"class":264},[220,19637,19638],{"class":230},"'map'",[220,19640,1760],{"class":264},[220,19642,19643,19646,19649],{"class":222,"line":691},[220,19644,19645],{"class":264}," source: ",[220,19647,19648],{"class":230},"'grad'",[220,19650,1760],{"class":264},[220,19652,19653,19656,19658],{"class":222,"line":696},[220,19654,19655],{"class":264}," channel: ",[220,19657,10206],{"class":230},[220,19659,1760],{"class":264},[220,19661,19662,19665,19667],{"class":222,"line":702},[220,19663,19664],{"class":264}," inputMin: ",[220,19666,8673],{"class":420},[220,19668,1760],{"class":264},[220,19670,19671,19674,19676],{"class":222,"line":718},[220,19672,19673],{"class":264}," inputMax: ",[220,19675,8677],{"class":420},[220,19677,1760],{"class":264},[220,19679,19680,19682,19685],{"class":222,"line":727},[220,19681,17521],{"class":264},[220,19683,19684],{"class":420},"0.02",[220,19686,1760],{"class":264},[220,19688,19689,19691],{"class":222,"line":2664},[220,19690,17530],{"class":264},[220,19692,19693],{"class":420},"0.12\n",[220,19695,19696],{"class":222,"line":3522},[220,19697,16118],{"class":264},[220,19699,19700],{"class":222,"line":9662},[220,19701,1234],{"class":264},[220,19703,19704,19706,19708],{"class":222,"line":9673},[220,19705,402],{"class":264},[220,19707,347],{"class":420},[220,19709,359],{"class":264},[212,19711,19713],{"className":468,"code":19712,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,19714,19715,19729,19735,19743,19751,19759,19763,19769,19777,19785,19793,19801,19809,19817,19825,19831,19835,19839],{"__ignoreMap":178},[220,19716,19717,19719,19721,19723,19725,19727],{"class":222,"line":223},[220,19718,343],{"class":264},[220,19720,347],{"class":420},[220,19722,350],{"class":226},[220,19724,353],{"class":260},[220,19726,356],{"class":230},[220,19728,359],{"class":264},[220,19730,19731,19733],{"class":222,"line":179},[220,19732,364],{"class":264},[220,19734,1189],{"class":420},[220,19736,19737,19739,19741],{"class":222,"line":389},[220,19738,9577],{"class":226},[220,19740,353],{"class":260},[220,19742,19464],{"class":230},[220,19744,19745,19747,19749],{"class":222,"line":399},[220,19746,1194],{"class":226},[220,19748,353],{"class":260},[220,19750,19474],{"class":230},[220,19752,19753,19755,19757],{"class":222,"line":644},[220,19754,1204],{"class":226},[220,19756,353],{"class":260},[220,19758,9591],{"class":230},[220,19760,19761],{"class":222,"line":650},[220,19762,1234],{"class":264},[220,19764,19765,19767],{"class":222,"line":656},[220,19766,364],{"class":264},[220,19768,19503],{"class":420},[220,19770,19771,19773,19775],{"class":222,"line":673},[220,19772,19627],{"class":226},[220,19774,353],{"class":260},[220,19776,16040],{"class":264},[220,19778,19779,19781,19783],{"class":222,"line":682},[220,19780,16384],{"class":264},[220,19782,19638],{"class":230},[220,19784,1760],{"class":264},[220,19786,19787,19789,19791],{"class":222,"line":691},[220,19788,19645],{"class":264},[220,19790,19648],{"class":230},[220,19792,1760],{"class":264},[220,19794,19795,19797,19799],{"class":222,"line":696},[220,19796,19655],{"class":264},[220,19798,10206],{"class":230},[220,19800,1760],{"class":264},[220,19802,19803,19805,19807],{"class":222,"line":702},[220,19804,19664],{"class":264},[220,19806,8673],{"class":420},[220,19808,1760],{"class":264},[220,19810,19811,19813,19815],{"class":222,"line":718},[220,19812,19673],{"class":264},[220,19814,8677],{"class":420},[220,19816,1760],{"class":264},[220,19818,19819,19821,19823],{"class":222,"line":727},[220,19820,17521],{"class":264},[220,19822,19684],{"class":420},[220,19824,1760],{"class":264},[220,19826,19827,19829],{"class":222,"line":2664},[220,19828,17530],{"class":264},[220,19830,19693],{"class":420},[220,19832,19833],{"class":222,"line":3522},[220,19834,16118],{"class":264},[220,19836,19837],{"class":222,"line":9662},[220,19838,1234],{"class":264},[220,19840,19841,19843,19845],{"class":222,"line":9673},[220,19842,402],{"class":264},[220,19844,347],{"class":420},[220,19846,359],{"class":264},[212,19848,19849],{"className":468,"code":19712,"language":469,"meta":178,"style":178},[99,19850,19851,19865,19871,19879,19887,19895,19899,19905,19913,19921,19929,19937,19945,19953,19961,19967,19971,19975],{"__ignoreMap":178},[220,19852,19853,19855,19857,19859,19861,19863],{"class":222,"line":223},[220,19854,343],{"class":264},[220,19856,347],{"class":420},[220,19858,350],{"class":226},[220,19860,353],{"class":260},[220,19862,356],{"class":230},[220,19864,359],{"class":264},[220,19866,19867,19869],{"class":222,"line":179},[220,19868,364],{"class":264},[220,19870,1189],{"class":420},[220,19872,19873,19875,19877],{"class":222,"line":389},[220,19874,9577],{"class":226},[220,19876,353],{"class":260},[220,19878,19464],{"class":230},[220,19880,19881,19883,19885],{"class":222,"line":399},[220,19882,1194],{"class":226},[220,19884,353],{"class":260},[220,19886,19474],{"class":230},[220,19888,19889,19891,19893],{"class":222,"line":644},[220,19890,1204],{"class":226},[220,19892,353],{"class":260},[220,19894,9591],{"class":230},[220,19896,19897],{"class":222,"line":650},[220,19898,1234],{"class":264},[220,19900,19901,19903],{"class":222,"line":656},[220,19902,364],{"class":264},[220,19904,19503],{"class":420},[220,19906,19907,19909,19911],{"class":222,"line":673},[220,19908,19627],{"class":226},[220,19910,353],{"class":260},[220,19912,16040],{"class":264},[220,19914,19915,19917,19919],{"class":222,"line":682},[220,19916,16384],{"class":264},[220,19918,19638],{"class":230},[220,19920,1760],{"class":264},[220,19922,19923,19925,19927],{"class":222,"line":691},[220,19924,19645],{"class":264},[220,19926,19648],{"class":230},[220,19928,1760],{"class":264},[220,19930,19931,19933,19935],{"class":222,"line":696},[220,19932,19655],{"class":264},[220,19934,10206],{"class":230},[220,19936,1760],{"class":264},[220,19938,19939,19941,19943],{"class":222,"line":702},[220,19940,19664],{"class":264},[220,19942,8673],{"class":420},[220,19944,1760],{"class":264},[220,19946,19947,19949,19951],{"class":222,"line":718},[220,19948,19673],{"class":264},[220,19950,8677],{"class":420},[220,19952,1760],{"class":264},[220,19954,19955,19957,19959],{"class":222,"line":727},[220,19956,17521],{"class":264},[220,19958,19684],{"class":420},[220,19960,1760],{"class":264},[220,19962,19963,19965],{"class":222,"line":2664},[220,19964,17530],{"class":264},[220,19966,19693],{"class":420},[220,19968,19969],{"class":222,"line":3522},[220,19970,16118],{"class":264},[220,19972,19973],{"class":222,"line":9662},[220,19974,1234],{"class":264},[220,19976,19977,19979,19981],{"class":222,"line":9673},[220,19978,402],{"class":264},[220,19980,347],{"class":420},[220,19982,359],{"class":264},[212,19984,19986],{"className":251,"code":19985,"language":253,"meta":178,"style":178},"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",[99,19987,19988,20002,20006,20010,20018,20027,20041,20046,20050,20059,20063,20068,20076,20085,20094,20103,20112,20120,20127,20131,20135,20139,20143],{"__ignoreMap":178},[220,19989,19990,19992,19994,19996,19998,20000],{"class":222,"line":223},[220,19991,1735],{"class":260},[220,19993,1738],{"class":420},[220,19995,1741],{"class":260},[220,19997,1744],{"class":260},[220,19999,1747],{"class":226},[220,20001,1750],{"class":264},[220,20003,20004],{"class":222,"line":179},[220,20005,1765],{"class":264},[220,20007,20008],{"class":222,"line":389},[220,20009,16379],{"class":264},[220,20011,20012,20014,20016],{"class":222,"line":399},[220,20013,16384],{"class":264},[220,20015,2462],{"class":230},[220,20017,1760],{"class":264},[220,20019,20020,20023,20025],{"class":222,"line":644},[220,20021,20022],{"class":264}," id: ",[220,20024,19648],{"class":230},[220,20026,1760],{"class":264},[220,20028,20029,20032,20035,20037,20039],{"class":222,"line":650},[220,20030,20031],{"class":264}," props: { colorA: ",[220,20033,20034],{"class":230},"'#000000'",[220,20036,10172],{"class":264},[220,20038,10169],{"class":230},[220,20040,5671],{"class":264},[220,20042,20043],{"class":222,"line":656},[220,20044,20045],{"class":264}," },\n",[220,20047,20048],{"class":222,"line":673},[220,20049,16379],{"class":264},[220,20051,20052,20054,20057],{"class":222,"line":682},[220,20053,16384],{"class":264},[220,20055,20056],{"class":230},"'DotGrid'",[220,20058,1760],{"class":264},[220,20060,20061],{"class":222,"line":691},[220,20062,16393],{"class":264},[220,20064,20065],{"class":222,"line":696},[220,20066,20067],{"class":264}," dotSize: {\n",[220,20069,20070,20072,20074],{"class":222,"line":702},[220,20071,17830],{"class":264},[220,20073,19638],{"class":230},[220,20075,1760],{"class":264},[220,20077,20078,20081,20083],{"class":222,"line":718},[220,20079,20080],{"class":264}," source: ",[220,20082,19648],{"class":230},[220,20084,1760],{"class":264},[220,20086,20087,20090,20092],{"class":222,"line":727},[220,20088,20089],{"class":264}," channel: ",[220,20091,10206],{"class":230},[220,20093,1760],{"class":264},[220,20095,20096,20099,20101],{"class":222,"line":2664},[220,20097,20098],{"class":264}," inputMin: ",[220,20100,8673],{"class":420},[220,20102,1760],{"class":264},[220,20104,20105,20108,20110],{"class":222,"line":3522},[220,20106,20107],{"class":264}," inputMax: ",[220,20109,8677],{"class":420},[220,20111,1760],{"class":264},[220,20113,20114,20116,20118],{"class":222,"line":9662},[220,20115,17848],{"class":264},[220,20117,8673],{"class":420},[220,20119,1760],{"class":264},[220,20121,20122,20124],{"class":222,"line":9673},[220,20123,17857],{"class":264},[220,20125,20126],{"class":420},"1\n",[220,20128,20129],{"class":222,"line":9678},[220,20130,16471],{"class":264},[220,20132,20133],{"class":222,"line":10999},[220,20134,4929],{"class":264},[220,20136,20137],{"class":222,"line":11004},[220,20138,4609],{"class":264},[220,20140,20141],{"class":222,"line":12075},[220,20142,1787],{"class":264},[220,20144,20145],{"class":222,"line":12082},[220,20146,1792],{"class":264},[19,20148],{":preset":20149},"{\"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,20151,20152],{},[159,20153,17905],{},[1794,20155,20156,20168],{},[1797,20157,20158],{},[1800,20159,20160,20162,20164,20166],{},[1803,20161,17914],{},[1803,20163,15187],{},[1803,20165,15190],{},[1803,20167,1808],{},[1810,20169,20170,20188,20212,20228,20244,20259,20274],{},[1800,20171,20172,20177,20181,20183],{},[1815,20173,20174],{},[99,20175,20176],{},"source",[1815,20178,20179],{},[99,20180,9060],{},[1815,20182,17937],{},[1815,20184,1839,20185,20187],{},[99,20186,9056],{}," of the source component to sample from.",[1800,20189,20190,20195,20199,20201],{},[1815,20191,20192],{},[99,20193,20194],{},"channel",[1815,20196,20197],{},[99,20198,9060],{},[1815,20200,17937],{},[1815,20202,20203,20204,1895,20206,1895,20208,1895,20210,4836],{},"Which channel to extract. ",[99,20205,9508],{},[99,20207,9516],{},[99,20209,9524],{},[99,20211,9532],{},[1800,20213,20214,20219,20223,20225],{},[1815,20215,20216],{},[99,20217,20218],{},"inputMin",[1815,20220,20221],{},[99,20222,15300],{},[1815,20224,17937],{},[1815,20226,20227],{},"Source values at or below this are treated as 0.",[1800,20229,20230,20235,20239,20241],{},[1815,20231,20232],{},[99,20233,20234],{},"inputMax",[1815,20236,20237],{},[99,20238,15300],{},[1815,20240,17937],{},[1815,20242,20243],{},"Source values at or above this are treated as 1.",[1800,20245,20246,20250,20254,20256],{},[1815,20247,20248],{},[99,20249,17954],{},[1815,20251,20252],{},[99,20253,15300],{},[1815,20255,17937],{},[1815,20257,20258],{},"Output value when input = 0.",[1800,20260,20261,20265,20269,20271],{},[1815,20262,20263],{},[99,20264,17970],{},[1815,20266,20267],{},[99,20268,15300],{},[1815,20270,17937],{},[1815,20272,20273],{},"Output value when input = 1.",[1800,20275,20276,20280,20284,20288],{},[1815,20277,20278],{},[99,20279,19345],{},[1815,20281,20282],{},[99,20283,15300],{},[1815,20285,20286],{},[99,20287,8673],{},[1815,20289,20290,20291,1550,20293,4836],{},"Power curve applied after normalization. ",[99,20292,19359],{},[99,20294,19362],{},[15,20296,1839,20297,20299],{},[99,20298,19414],{}," 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,20301,20303],{"id":20302},"combining-dynamic-props","Combining dynamic props",[15,20305,20306],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,20308,20309,20415,20542,20665],{":tabs":248},[212,20310,20312],{"className":334,"code":20311,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#0f172a\" color-b=\"#4f46e5\" \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,20313,20314,20328,20351,20358,20367,20376,20380,20384,20389,20394,20399,20403,20407],{"__ignoreMap":178},[220,20315,20316,20318,20320,20322,20324,20326],{"class":222,"line":223},[220,20317,343],{"class":264},[220,20319,347],{"class":346},[220,20321,350],{"class":226},[220,20323,353],{"class":264},[220,20325,356],{"class":230},[220,20327,359],{"class":264},[220,20329,20330,20332,20334,20337,20339,20341,20344,20346,20349],{"class":222,"line":179},[220,20331,364],{"class":264},[220,20333,367],{"class":346},[220,20335,20336],{"class":226}," color-a",[220,20338,353],{"class":264},[220,20340,375],{"class":230},[220,20342,20343],{"class":226}," color-b",[220,20345,353],{"class":264},[220,20347,20348],{"class":230},"\"#4f46e5\"",[220,20350,386],{"class":264},[220,20352,20353,20355],{"class":222,"line":389},[220,20354,364],{"class":264},[220,20356,20357],{"class":346},"LensFlare\n",[220,20359,20360,20362,20364],{"class":222,"line":399},[220,20361,18113],{"class":226},[220,20363,353],{"class":264},[220,20365,20366],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,20368,20369,20372,20374],{"class":222,"line":644},[220,20370,20371],{"class":226}," :intensity",[220,20373,353],{"class":264},[220,20375,15097],{"class":230},[220,20377,20378],{"class":222,"line":650},[220,20379,17414],{"class":230},[220,20381,20382],{"class":222,"line":656},[220,20383,17419],{"class":230},[220,20385,20386],{"class":222,"line":673},[220,20387,20388],{"class":230}," outputMin: 0.4,\n",[220,20390,20391],{"class":222,"line":682},[220,20392,20393],{"class":230}," outputMax: 1.0,\n",[220,20395,20396],{"class":222,"line":691},[220,20397,20398],{"class":230}," speed: 0.6\n",[220,20400,20401],{"class":222,"line":696},[220,20402,17444],{"class":230},[220,20404,20405],{"class":222,"line":702},[220,20406,1234],{"class":264},[220,20408,20409,20411,20413],{"class":222,"line":718},[220,20410,402],{"class":264},[220,20412,347],{"class":346},[220,20414,359],{"class":264},[212,20416,20418],{"className":409,"code":20417,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,20419,20420,20434,20454,20460,20478,20487,20495,20503,20511,20519,20526,20530,20534],{"__ignoreMap":178},[220,20421,20422,20424,20426,20428,20430,20432],{"class":222,"line":223},[220,20423,343],{"class":264},[220,20425,347],{"class":420},[220,20427,423],{"class":226},[220,20429,353],{"class":260},[220,20431,356],{"class":230},[220,20433,359],{"class":264},[220,20435,20436,20438,20440,20442,20444,20446,20448,20450,20452],{"class":222,"line":179},[220,20437,364],{"class":264},[220,20439,367],{"class":420},[220,20441,370],{"class":226},[220,20443,353],{"class":260},[220,20445,375],{"class":230},[220,20447,378],{"class":226},[220,20449,353],{"class":260},[220,20451,20348],{"class":230},[220,20453,386],{"class":264},[220,20455,20456,20458],{"class":222,"line":389},[220,20457,364],{"class":264},[220,20459,20357],{"class":420},[220,20461,20462,20464,20466,20469,20471,20474,20476],{"class":222,"line":399},[220,20463,18199],{"class":226},[220,20465,353],{"class":260},[220,20467,20468],{"class":264},"{{ type: ",[220,20470,18210],{"class":230},[220,20472,20473],{"class":264},", smoothing: ",[220,20475,16054],{"class":420},[220,20477,2803],{"class":264},[220,20479,20480,20483,20485],{"class":222,"line":644},[220,20481,20482],{"class":226}," intensity",[220,20484,353],{"class":260},[220,20486,16040],{"class":264},[220,20488,20489,20491,20493],{"class":222,"line":650},[220,20490,16384],{"class":264},[220,20492,17504],{"class":230},[220,20494,1760],{"class":264},[220,20496,20497,20499,20501],{"class":222,"line":656},[220,20498,17511],{"class":264},[220,20500,17514],{"class":230},[220,20502,1760],{"class":264},[220,20504,20505,20507,20509],{"class":222,"line":673},[220,20506,17521],{"class":264},[220,20508,8249],{"class":420},[220,20510,1760],{"class":264},[220,20512,20513,20515,20517],{"class":222,"line":682},[220,20514,17530],{"class":264},[220,20516,17995],{"class":420},[220,20518,1760],{"class":264},[220,20520,20521,20523],{"class":222,"line":691},[220,20522,17539],{"class":264},[220,20524,20525],{"class":420},"0.6\n",[220,20527,20528],{"class":222,"line":696},[220,20529,16118],{"class":264},[220,20531,20532],{"class":222,"line":702},[220,20533,1234],{"class":264},[220,20535,20536,20538,20540],{"class":222,"line":718},[220,20537,402],{"class":264},[220,20539,347],{"class":420},[220,20541,359],{"class":264},[212,20543,20545],{"className":468,"code":20544,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" \u002F>\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 \u002F>\n\u003C\u002FShader>\n",[99,20546,20547,20561,20581,20587,20603,20611,20619,20627,20635,20643,20649,20653,20657],{"__ignoreMap":178},[220,20548,20549,20551,20553,20555,20557,20559],{"class":222,"line":223},[220,20550,343],{"class":264},[220,20552,347],{"class":420},[220,20554,350],{"class":226},[220,20556,353],{"class":260},[220,20558,356],{"class":230},[220,20560,359],{"class":264},[220,20562,20563,20565,20567,20569,20571,20573,20575,20577,20579],{"class":222,"line":179},[220,20564,364],{"class":264},[220,20566,367],{"class":420},[220,20568,370],{"class":226},[220,20570,353],{"class":260},[220,20572,375],{"class":230},[220,20574,378],{"class":226},[220,20576,353],{"class":260},[220,20578,20348],{"class":230},[220,20580,386],{"class":264},[220,20582,20583,20585],{"class":222,"line":389},[220,20584,364],{"class":264},[220,20586,20357],{"class":420},[220,20588,20589,20591,20593,20595,20597,20599,20601],{"class":222,"line":399},[220,20590,18199],{"class":226},[220,20592,353],{"class":260},[220,20594,20468],{"class":264},[220,20596,18210],{"class":230},[220,20598,20473],{"class":264},[220,20600,16054],{"class":420},[220,20602,2803],{"class":264},[220,20604,20605,20607,20609],{"class":222,"line":644},[220,20606,20482],{"class":226},[220,20608,353],{"class":260},[220,20610,16040],{"class":264},[220,20612,20613,20615,20617],{"class":222,"line":650},[220,20614,16384],{"class":264},[220,20616,17504],{"class":230},[220,20618,1760],{"class":264},[220,20620,20621,20623,20625],{"class":222,"line":656},[220,20622,17511],{"class":264},[220,20624,17514],{"class":230},[220,20626,1760],{"class":264},[220,20628,20629,20631,20633],{"class":222,"line":673},[220,20630,17521],{"class":264},[220,20632,8249],{"class":420},[220,20634,1760],{"class":264},[220,20636,20637,20639,20641],{"class":222,"line":682},[220,20638,17530],{"class":264},[220,20640,17995],{"class":420},[220,20642,1760],{"class":264},[220,20644,20645,20647],{"class":222,"line":691},[220,20646,17539],{"class":264},[220,20648,20525],{"class":420},[220,20650,20651],{"class":222,"line":696},[220,20652,16118],{"class":264},[220,20654,20655],{"class":222,"line":702},[220,20656,1234],{"class":264},[220,20658,20659,20661,20663],{"class":222,"line":718},[220,20660,402],{"class":264},[220,20662,347],{"class":420},[220,20664,359],{"class":264},[212,20666,20667],{"className":468,"code":20544,"language":469,"meta":178,"style":178},[99,20668,20669,20683,20703,20709,20725,20733,20741,20749,20757,20765,20771,20775,20779],{"__ignoreMap":178},[220,20670,20671,20673,20675,20677,20679,20681],{"class":222,"line":223},[220,20672,343],{"class":264},[220,20674,347],{"class":420},[220,20676,350],{"class":226},[220,20678,353],{"class":260},[220,20680,356],{"class":230},[220,20682,359],{"class":264},[220,20684,20685,20687,20689,20691,20693,20695,20697,20699,20701],{"class":222,"line":179},[220,20686,364],{"class":264},[220,20688,367],{"class":420},[220,20690,370],{"class":226},[220,20692,353],{"class":260},[220,20694,375],{"class":230},[220,20696,378],{"class":226},[220,20698,353],{"class":260},[220,20700,20348],{"class":230},[220,20702,386],{"class":264},[220,20704,20705,20707],{"class":222,"line":389},[220,20706,364],{"class":264},[220,20708,20357],{"class":420},[220,20710,20711,20713,20715,20717,20719,20721,20723],{"class":222,"line":399},[220,20712,18199],{"class":226},[220,20714,353],{"class":260},[220,20716,20468],{"class":264},[220,20718,18210],{"class":230},[220,20720,20473],{"class":264},[220,20722,16054],{"class":420},[220,20724,2803],{"class":264},[220,20726,20727,20729,20731],{"class":222,"line":644},[220,20728,20482],{"class":226},[220,20730,353],{"class":260},[220,20732,16040],{"class":264},[220,20734,20735,20737,20739],{"class":222,"line":650},[220,20736,16384],{"class":264},[220,20738,17504],{"class":230},[220,20740,1760],{"class":264},[220,20742,20743,20745,20747],{"class":222,"line":656},[220,20744,17511],{"class":264},[220,20746,17514],{"class":230},[220,20748,1760],{"class":264},[220,20750,20751,20753,20755],{"class":222,"line":673},[220,20752,17521],{"class":264},[220,20754,8249],{"class":420},[220,20756,1760],{"class":264},[220,20758,20759,20761,20763],{"class":222,"line":682},[220,20760,17530],{"class":264},[220,20762,17995],{"class":420},[220,20764,1760],{"class":264},[220,20766,20767,20769],{"class":222,"line":691},[220,20768,17539],{"class":264},[220,20770,20525],{"class":420},[220,20772,20773],{"class":222,"line":696},[220,20774,16118],{"class":264},[220,20776,20777],{"class":222,"line":702},[220,20778,1234],{"class":264},[220,20780,20781,20783,20785],{"class":222,"line":718},[220,20782,402],{"class":264},[220,20784,347],{"class":420},[220,20786,359],{"class":264},[23,20788,20790],{"id":20789},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,20792,20793,20794,20797],{},"In the JavaScript API, ",[99,20795,20796],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,20799,20801],{"className":251,"code":20800,"language":253,"meta":178,"style":178},"\u002F\u002F 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\u002F\u002F 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\u002F\u002F Later: switch back to static\nshader.update('c', { radius: 0.4 })\n",[99,20802,20803,20808,20822,20826,20843,20847,20851,20855,20860,20872,20877,20886,20895,20904,20912,20916,20920,20924,20929],{"__ignoreMap":178},[220,20804,20805],{"class":222,"line":223},[220,20806,20807],{"class":609},"\u002F\u002F Start with a static value\n",[220,20809,20810,20812,20814,20816,20818,20820],{"class":222,"line":179},[220,20811,1735],{"class":260},[220,20813,1738],{"class":420},[220,20815,1741],{"class":260},[220,20817,1744],{"class":260},[220,20819,1747],{"class":226},[220,20821,1750],{"class":264},[220,20823,20824],{"class":222,"line":389},[220,20825,1765],{"class":264},[220,20827,20828,20830,20832,20834,20837,20839,20841],{"class":222,"line":399},[220,20829,1770],{"class":264},[220,20831,3206],{"class":230},[220,20833,3209],{"class":264},[220,20835,20836],{"class":230},"'c'",[220,20838,7541],{"class":264},[220,20840,8249],{"class":420},[220,20842,1782],{"class":264},[220,20844,20845],{"class":222,"line":644},[220,20846,1787],{"class":264},[220,20848,20849],{"class":222,"line":650},[220,20850,1792],{"class":264},[220,20852,20853],{"class":222,"line":656},[220,20854,647],{"emptyLinePlaceholder":194},[220,20856,20857],{"class":222,"line":673},[220,20858,20859],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,20861,20862,20864,20866,20868,20870],{"class":222,"line":682},[220,20863,11602],{"class":264},[220,20865,11605],{"class":226},[220,20867,2626],{"class":264},[220,20869,20836],{"class":230},[220,20871,11967],{"class":264},[220,20873,20874],{"class":222,"line":691},[220,20875,20876],{"class":264}," radius: {\n",[220,20878,20879,20882,20884],{"class":222,"line":696},[220,20880,20881],{"class":264}," type: ",[220,20883,17504],{"class":230},[220,20885,1760],{"class":264},[220,20887,20888,20891,20893],{"class":222,"line":702},[220,20889,20890],{"class":264}," mode: ",[220,20892,17514],{"class":230},[220,20894,1760],{"class":264},[220,20896,20897,20900,20902],{"class":222,"line":718},[220,20898,20899],{"class":264}," outputMin: ",[220,20901,16976],{"class":420},[220,20903,1760],{"class":264},[220,20905,20906,20909],{"class":222,"line":727},[220,20907,20908],{"class":264}," outputMax: ",[220,20910,20911],{"class":420},"0.7\n",[220,20913,20914],{"class":222,"line":2664},[220,20915,3256],{"class":264},[220,20917,20918],{"class":222,"line":3522},[220,20919,1792],{"class":264},[220,20921,20922],{"class":222,"line":9662},[220,20923,647],{"emptyLinePlaceholder":194},[220,20925,20926],{"class":222,"line":9673},[220,20927,20928],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,20930,20931,20933,20935,20937,20939,20942,20944],{"class":222,"line":9678},[220,20932,11602],{"class":264},[220,20934,11605],{"class":226},[220,20936,2626],{"class":264},[220,20938,20836],{"class":230},[220,20940,20941],{"class":264},", { radius: ",[220,20943,8249],{"class":420},[220,20945,11617],{"class":264},[1504,20947,14991],{},{"title":178,"searchDepth":179,"depth":179,"links":20949},[20950,20951,20952,20953,20954,20955],{"id":17361,"depth":179,"text":17361},{"id":18049,"depth":179,"text":18049},{"id":18783,"depth":179,"text":18783},{"id":19414,"depth":179,"text":19414},{"id":20302,"depth":179,"text":20303},{"id":20789,"depth":179,"text":20790},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":17298,"description":20956},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":20963,"title":20964,"body":20965,"category":10232,"description":25834,"exclude":190,"extension":191,"forceFramework":190,"icon":25835,"meta":25836,"navigation":194,"path":25837,"seo":25838,"stem":25839,"__hash__":25840},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":20966,"toc":25778},[20967,20970,20973,20993,20996,21011,21015,21031,21675,21677,21681,21689,21695,21698,21731,21759,21761,21768,21771,21838,21883,21885,21892,21895,21980,22034,22036,22043,22046,22135,22185,22187,22194,22197,22286,22336,22338,22345,22348,22400,22435,22437,22444,22447,22534,22585,22587,22594,22597,22680,22729,22731,22738,22741,22814,22857,22859,22866,22869,22953,23004,23006,23013,23016,23100,23152,23154,23158,23178,23191,23212,23322,23328,23331,23385,23438,23440,23447,23450,23564,23641,23643,23650,23653,23729,23786,23788,23795,23798,23857,23907,23909,23916,23919,24013,24079,24081,24088,24091,24166,24224,24226,24233,24243,24337,24404,24406,24413,24416,24491,24549,24551,24558,24561,24637,24695,24697,24704,24707,24803,24872,24874,24881,24887,24961,25019,25021,25028,25031,25122,25189,25191,25195,25198,25215,25334,25338,25353,25429,25438,25767,25776],[11,20968,20964],{"id":20969},"shape-sdf-effects",[19,20971],{":preset":20972,"toneMapping":1536},"{\"components\":[{\"type\":\"MultiPointGradient\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"colorA\":\"#3772e3\",\"colorB\":\"#f800ff\",\"colorC\":\"#472cd8\",\"colorD\":\"#9922d4\",\"colorE\":\"#2acae8\",\"colorSpace\":\"oklch\",\"positionA\":{\"x\":0.01,\"y\":-0.06},\"positionB\":{\"x\":0.75,\"y\":0.19},\"positionC\":{\"x\":0.27,\"y\":0.8},\"positionD\":{\"x\":1.09,\"y\":1.14}}},{\"type\":\"ImageTexture\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0.42421875},\"y\":{\"unit\":\"uv\",\"value\":0.3625},\"width\":{\"unit\":\"uv\",\"value\":0.1515625},\"height\":{\"unit\":\"uv\",\"value\":0.275},\"origin\":\"top-left\",\"rotation\":0,\"lockAspect\":true},\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FlJovqT3gjKH4.svg\"}},{\"type\":\"Glass\",\"props\":{\"blur\":20,\"fresnel\":0.45,\"fresnelSoftness\":0.56,\"innerZoom\":0.5,\"refraction\":2,\"thickness\":0.17,\"shapeType\":\"prism3D\",\"shape\":{\"type\":\"prism3D\",\"radius\":0.28,\"height\":0.14,\"rotX\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"rotY\":32,\"rotZ\":0}}}]}",[15,20974,20975,20976,1895,20978,20981,20982,20985,20986,20989,20990,20992],{},"Several components — such as ",[159,20977,15466],{},[159,20979,20980],{},"Neon",", and ",[159,20983,20984],{},"Emboss"," — are driven by a ",[1847,20987,20988],{},"shape",". These effects accept a ",[99,20991,20988],{}," 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,20994,20995],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,20997,20998,20999,21002,21003,21006,21007,21010],{},"Shapes come in two flavours: flat ",[159,21000,21001],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,21004,21005],{},"3D"," primitives (spheres, cubes, toruses, …) that are raymarched into the field, so effects like Glass and Crystal refract through real volume and curvature. You can also ",[159,21008,21009],{},"extrude"," your own SVG into a solid 3D slab.",[23,21012,21014],{"id":21013},"configuration","Configuration",[15,21016,1839,21017,21019,21020,21023,21024,18745,21027,21030],{},[99,21018,20988],{}," prop accepts a configuration object. The only required key is ",[99,21021,21022],{},"type",", which selects one of the built-in shapes, like ",[99,21025,21026],{},"circleSDF",[99,21028,21029],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,21032,21033,21107,21252,21376,21500],{":tabs":1557},[212,21034,21036],{"className":334,"code":21035,"language":336,"meta":178,"style":178},"\u003C!-- Circle (default) -->\n\u003CGlass :shape='{ type: \"circleSDF\", radius: 0.35 }' \u002F>\n\n\u003C!-- Six-pointed star -->\n\u003CNeon :shape='{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }' \u002F>\n\n\u003C!-- Rounded rectangle -->\n\u003CEmboss :shape='{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }' \u002F>\n",[99,21037,21038,21043,21059,21063,21068,21083,21087,21092],{"__ignoreMap":178},[220,21039,21040],{"class":222,"line":223},[220,21041,21042],{"class":609},"\u003C!-- Circle (default) -->\n",[220,21044,21045,21047,21049,21052,21054,21057],{"class":222,"line":179},[220,21046,343],{"class":264},[220,21048,15466],{"class":346},[220,21050,21051],{"class":226}," :shape",[220,21053,353],{"class":264},[220,21055,21056],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,21058,386],{"class":264},[220,21060,21061],{"class":222,"line":389},[220,21062,647],{"emptyLinePlaceholder":194},[220,21064,21065],{"class":222,"line":399},[220,21066,21067],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,21069,21070,21072,21074,21076,21078,21081],{"class":222,"line":644},[220,21071,343],{"class":264},[220,21073,20980],{"class":346},[220,21075,21051],{"class":226},[220,21077,353],{"class":264},[220,21079,21080],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,21082,386],{"class":264},[220,21084,21085],{"class":222,"line":650},[220,21086,647],{"emptyLinePlaceholder":194},[220,21088,21089],{"class":222,"line":656},[220,21090,21091],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,21093,21094,21096,21098,21100,21102,21105],{"class":222,"line":673},[220,21095,343],{"class":264},[220,21097,20984],{"class":346},[220,21099,21051],{"class":226},[220,21101,353],{"class":264},[220,21103,21104],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,21106,386],{"class":264},[212,21108,21110],{"className":409,"code":21109,"language":411,"meta":178,"style":178},"\u002F\u002F Circle (default)\n\u003CGlass shape={JSON.stringify({ type: \"circleSDF\", radius: 0.35 })} \u002F>\n\n\u002F\u002F Six-pointed star\n\u003CNeon shape={JSON.stringify({ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 })} \u002F>\n\n\u002F\u002F Rounded rectangle\n\u003CEmboss shape={JSON.stringify({ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 })} \u002F>\n",[99,21111,21112,21117,21152,21156,21161,21202,21206,21211],{"__ignoreMap":178},[220,21113,21114],{"class":222,"line":223},[220,21115,21116],{"class":609},"\u002F\u002F Circle (default)\n",[220,21118,21119,21121,21123,21126,21128,21130,21133,21135,21138,21141,21144,21146,21149],{"class":222,"line":179},[220,21120,343],{"class":264},[220,21122,15466],{"class":420},[220,21124,21125],{"class":226}," shape",[220,21127,353],{"class":260},[220,21129,743],{"class":264},[220,21131,21132],{"class":420},"JSON",[220,21134,4836],{"class":264},[220,21136,21137],{"class":226},"stringify",[220,21139,21140],{"class":264},"({ type: ",[220,21142,21143],{"class":230},"\"circleSDF\"",[220,21145,6566],{"class":264},[220,21147,21148],{"class":420},"0.35",[220,21150,21151],{"class":264}," })} \u002F>\n",[220,21153,21154],{"class":222,"line":389},[220,21155,647],{"emptyLinePlaceholder":194},[220,21157,21158],{"class":222,"line":399},[220,21159,21160],{"class":609},"\u002F\u002F Six-pointed star\n",[220,21162,21163,21165,21167,21169,21171,21173,21175,21177,21179,21181,21184,21186,21188,21191,21194,21197,21200],{"class":222,"line":644},[220,21164,343],{"class":264},[220,21166,20980],{"class":420},[220,21168,21125],{"class":226},[220,21170,353],{"class":260},[220,21172,743],{"class":264},[220,21174,21132],{"class":420},[220,21176,4836],{"class":264},[220,21178,21137],{"class":226},[220,21180,21140],{"class":264},[220,21182,21183],{"class":230},"\"starSDF\"",[220,21185,6566],{"class":264},[220,21187,21148],{"class":420},[220,21189,21190],{"class":264},", sides: ",[220,21192,21193],{"class":420},"6",[220,21195,21196],{"class":264},", innerRatio: ",[220,21198,21199],{"class":420},"0.45",[220,21201,21151],{"class":264},[220,21203,21204],{"class":222,"line":650},[220,21205,647],{"emptyLinePlaceholder":194},[220,21207,21208],{"class":222,"line":656},[220,21209,21210],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,21212,21213,21215,21217,21219,21221,21223,21225,21227,21229,21231,21234,21237,21239,21241,21244,21247,21250],{"class":222,"line":673},[220,21214,343],{"class":264},[220,21216,20984],{"class":420},[220,21218,21125],{"class":226},[220,21220,353],{"class":260},[220,21222,743],{"class":264},[220,21224,21132],{"class":420},[220,21226,4836],{"class":264},[220,21228,21137],{"class":226},[220,21230,21140],{"class":264},[220,21232,21233],{"class":230},"\"roundedRectSDF\"",[220,21235,21236],{"class":264},", width: ",[220,21238,8249],{"class":420},[220,21240,811],{"class":264},[220,21242,21243],{"class":420},"0.25",[220,21245,21246],{"class":264},", rounding: ",[220,21248,21249],{"class":420},"0.06",[220,21251,21151],{"class":264},[212,21253,21254],{"className":468,"code":21109,"language":469,"meta":178,"style":178},[99,21255,21256,21260,21288,21292,21296,21332,21336,21340],{"__ignoreMap":178},[220,21257,21258],{"class":222,"line":223},[220,21259,21116],{"class":609},[220,21261,21262,21264,21266,21268,21270,21272,21274,21276,21278,21280,21282,21284,21286],{"class":222,"line":179},[220,21263,343],{"class":264},[220,21265,15466],{"class":420},[220,21267,21125],{"class":226},[220,21269,353],{"class":260},[220,21271,743],{"class":264},[220,21273,21132],{"class":420},[220,21275,4836],{"class":264},[220,21277,21137],{"class":226},[220,21279,21140],{"class":264},[220,21281,21143],{"class":230},[220,21283,6566],{"class":264},[220,21285,21148],{"class":420},[220,21287,21151],{"class":264},[220,21289,21290],{"class":222,"line":389},[220,21291,647],{"emptyLinePlaceholder":194},[220,21293,21294],{"class":222,"line":399},[220,21295,21160],{"class":609},[220,21297,21298,21300,21302,21304,21306,21308,21310,21312,21314,21316,21318,21320,21322,21324,21326,21328,21330],{"class":222,"line":644},[220,21299,343],{"class":264},[220,21301,20980],{"class":420},[220,21303,21125],{"class":226},[220,21305,353],{"class":260},[220,21307,743],{"class":264},[220,21309,21132],{"class":420},[220,21311,4836],{"class":264},[220,21313,21137],{"class":226},[220,21315,21140],{"class":264},[220,21317,21183],{"class":230},[220,21319,6566],{"class":264},[220,21321,21148],{"class":420},[220,21323,21190],{"class":264},[220,21325,21193],{"class":420},[220,21327,21196],{"class":264},[220,21329,21199],{"class":420},[220,21331,21151],{"class":264},[220,21333,21334],{"class":222,"line":650},[220,21335,647],{"emptyLinePlaceholder":194},[220,21337,21338],{"class":222,"line":656},[220,21339,21210],{"class":609},[220,21341,21342,21344,21346,21348,21350,21352,21354,21356,21358,21360,21362,21364,21366,21368,21370,21372,21374],{"class":222,"line":673},[220,21343,343],{"class":264},[220,21345,20984],{"class":420},[220,21347,21125],{"class":226},[220,21349,353],{"class":260},[220,21351,743],{"class":264},[220,21353,21132],{"class":420},[220,21355,4836],{"class":264},[220,21357,21137],{"class":226},[220,21359,21140],{"class":264},[220,21361,21233],{"class":230},[220,21363,21236],{"class":264},[220,21365,8249],{"class":420},[220,21367,811],{"class":264},[220,21369,21243],{"class":420},[220,21371,21246],{"class":264},[220,21373,21249],{"class":420},[220,21375,21151],{"class":264},[212,21377,21378],{"className":468,"code":21109,"language":469,"meta":178,"style":178},[99,21379,21380,21384,21412,21416,21420,21456,21460,21464],{"__ignoreMap":178},[220,21381,21382],{"class":222,"line":223},[220,21383,21116],{"class":609},[220,21385,21386,21388,21390,21392,21394,21396,21398,21400,21402,21404,21406,21408,21410],{"class":222,"line":179},[220,21387,343],{"class":264},[220,21389,15466],{"class":420},[220,21391,21125],{"class":226},[220,21393,353],{"class":260},[220,21395,743],{"class":264},[220,21397,21132],{"class":420},[220,21399,4836],{"class":264},[220,21401,21137],{"class":226},[220,21403,21140],{"class":264},[220,21405,21143],{"class":230},[220,21407,6566],{"class":264},[220,21409,21148],{"class":420},[220,21411,21151],{"class":264},[220,21413,21414],{"class":222,"line":389},[220,21415,647],{"emptyLinePlaceholder":194},[220,21417,21418],{"class":222,"line":399},[220,21419,21160],{"class":609},[220,21421,21422,21424,21426,21428,21430,21432,21434,21436,21438,21440,21442,21444,21446,21448,21450,21452,21454],{"class":222,"line":644},[220,21423,343],{"class":264},[220,21425,20980],{"class":420},[220,21427,21125],{"class":226},[220,21429,353],{"class":260},[220,21431,743],{"class":264},[220,21433,21132],{"class":420},[220,21435,4836],{"class":264},[220,21437,21137],{"class":226},[220,21439,21140],{"class":264},[220,21441,21183],{"class":230},[220,21443,6566],{"class":264},[220,21445,21148],{"class":420},[220,21447,21190],{"class":264},[220,21449,21193],{"class":420},[220,21451,21196],{"class":264},[220,21453,21199],{"class":420},[220,21455,21151],{"class":264},[220,21457,21458],{"class":222,"line":650},[220,21459,647],{"emptyLinePlaceholder":194},[220,21461,21462],{"class":222,"line":656},[220,21463,21210],{"class":609},[220,21465,21466,21468,21470,21472,21474,21476,21478,21480,21482,21484,21486,21488,21490,21492,21494,21496,21498],{"class":222,"line":673},[220,21467,343],{"class":264},[220,21469,20984],{"class":420},[220,21471,21125],{"class":226},[220,21473,353],{"class":260},[220,21475,743],{"class":264},[220,21477,21132],{"class":420},[220,21479,4836],{"class":264},[220,21481,21137],{"class":226},[220,21483,21140],{"class":264},[220,21485,21233],{"class":230},[220,21487,21236],{"class":264},[220,21489,8249],{"class":420},[220,21491,811],{"class":264},[220,21493,21243],{"class":420},[220,21495,21246],{"class":264},[220,21497,21249],{"class":420},[220,21499,21151],{"class":264},[212,21501,21503],{"className":251,"code":21502,"language":253,"meta":178,"style":178},"\u002F\u002F Circle (default)\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } }\n ]\n})\n\n\u002F\u002F 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\u002F\u002F 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",[99,21504,21505,21509,21523,21527,21547,21551,21555,21559,21563,21577,21581,21607,21611,21615,21619,21623,21637,21641,21667,21671],{"__ignoreMap":178},[220,21506,21507],{"class":222,"line":223},[220,21508,21116],{"class":609},[220,21510,21511,21513,21515,21517,21519,21521],{"class":222,"line":179},[220,21512,1735],{"class":260},[220,21514,1738],{"class":420},[220,21516,1741],{"class":260},[220,21518,1744],{"class":260},[220,21520,1747],{"class":226},[220,21522,1750],{"class":264},[220,21524,21525],{"class":222,"line":389},[220,21526,1765],{"class":264},[220,21528,21529,21531,21534,21537,21540,21542,21544],{"class":222,"line":399},[220,21530,1770],{"class":264},[220,21532,21533],{"class":230},"'Glass'",[220,21535,21536],{"class":264},", props: { shape: { type: ",[220,21538,21539],{"class":230},"'circleSDF'",[220,21541,6566],{"class":264},[220,21543,21148],{"class":420},[220,21545,21546],{"class":264}," } } }\n",[220,21548,21549],{"class":222,"line":644},[220,21550,1787],{"class":264},[220,21552,21553],{"class":222,"line":650},[220,21554,1792],{"class":264},[220,21556,21557],{"class":222,"line":656},[220,21558,647],{"emptyLinePlaceholder":194},[220,21560,21561],{"class":222,"line":673},[220,21562,21160],{"class":609},[220,21564,21565,21567,21569,21571,21573,21575],{"class":222,"line":682},[220,21566,1735],{"class":260},[220,21568,1738],{"class":420},[220,21570,1741],{"class":260},[220,21572,1744],{"class":260},[220,21574,1747],{"class":226},[220,21576,1750],{"class":264},[220,21578,21579],{"class":222,"line":691},[220,21580,1765],{"class":264},[220,21582,21583,21585,21588,21590,21593,21595,21597,21599,21601,21603,21605],{"class":222,"line":696},[220,21584,1770],{"class":264},[220,21586,21587],{"class":230},"'Neon'",[220,21589,21536],{"class":264},[220,21591,21592],{"class":230},"'starSDF'",[220,21594,6566],{"class":264},[220,21596,21148],{"class":420},[220,21598,21190],{"class":264},[220,21600,21193],{"class":420},[220,21602,21196],{"class":264},[220,21604,21199],{"class":420},[220,21606,21546],{"class":264},[220,21608,21609],{"class":222,"line":702},[220,21610,1787],{"class":264},[220,21612,21613],{"class":222,"line":718},[220,21614,1792],{"class":264},[220,21616,21617],{"class":222,"line":727},[220,21618,647],{"emptyLinePlaceholder":194},[220,21620,21621],{"class":222,"line":2664},[220,21622,21210],{"class":609},[220,21624,21625,21627,21629,21631,21633,21635],{"class":222,"line":3522},[220,21626,1735],{"class":260},[220,21628,1738],{"class":420},[220,21630,1741],{"class":260},[220,21632,1744],{"class":260},[220,21634,1747],{"class":226},[220,21636,1750],{"class":264},[220,21638,21639],{"class":222,"line":9662},[220,21640,1765],{"class":264},[220,21642,21643,21645,21648,21650,21653,21655,21657,21659,21661,21663,21665],{"class":222,"line":9673},[220,21644,1770],{"class":264},[220,21646,21647],{"class":230},"'Emboss'",[220,21649,21536],{"class":264},[220,21651,21652],{"class":230},"'roundedRectSDF'",[220,21654,21236],{"class":264},[220,21656,8249],{"class":420},[220,21658,811],{"class":264},[220,21660,21243],{"class":420},[220,21662,21246],{"class":264},[220,21664,21249],{"class":420},[220,21666,21546],{"class":264},[220,21668,21669],{"class":222,"line":9678},[220,21670,1787],{"class":264},[220,21672,21673],{"class":222,"line":10999},[220,21674,1792],{"class":264},[4509,21676],{},[23,21678,21680],{"id":21679},"_2d-shapes","2D shapes",[15,21682,21683,21684,15413,21686,21688],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,21685,8673],{},[99,21687,7754],{}," from the centre to an edge), and rotations are in degrees.",[3262,21690,21692,21693],{"id":21691},"circle-circlesdf","Circle — ",[99,21694,21026],{},[15,21696,21697],{},"A perfect circle. The default shape for all shape effects.",[1794,21699,21700,21712],{},[1797,21701,21702],{},[1800,21703,21704,21706,21708,21710],{},[1803,21705,17914],{},[1803,21707,15187],{},[1803,21709,15190],{},[1803,21711,1808],{},[1810,21713,21714],{},[1800,21715,21716,21720,21724,21728],{},[1815,21717,21718],{},[99,21719,11683],{},[1815,21721,21722],{},[99,21723,15300],{},[1815,21725,21726],{},[99,21727,21148],{},[1815,21729,21730],{},"Circle radius in UV space",[212,21732,21734],{"className":4564,"code":21733,"language":4566,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,21735,21736],{"__ignoreMap":178},[220,21737,21738,21741,21744,21746,21748,21750,21753,21755,21757],{"class":222,"line":223},[220,21739,21740],{"class":264},"{ ",[220,21742,21743],{"class":420},"\"type\"",[220,21745,4601],{"class":264},[220,21747,21143],{"class":230},[220,21749,1895],{"class":264},[220,21751,21752],{"class":420},"\"radius\"",[220,21754,4601],{"class":264},[220,21756,21148],{"class":420},[220,21758,5671],{"class":264},[4509,21760],{},[3262,21762,21764,21765],{"id":21763},"ellipse-ellipsesdf","Ellipse — ",[99,21766,21767],{},"ellipseSDF",[15,21769,21770],{},"A stretched circle with independent horizontal and vertical radii.",[1794,21772,21773,21785],{},[1797,21774,21775],{},[1800,21776,21777,21779,21781,21783],{},[1803,21778,17914],{},[1803,21780,15187],{},[1803,21782,15190],{},[1803,21784,1808],{},[1810,21786,21787,21804,21821],{},[1800,21788,21789,21793,21797,21801],{},[1815,21790,21791],{},[99,21792,15164],{},[1815,21794,21795],{},[99,21796,15300],{},[1815,21798,21799],{},[99,21800,8249],{},[1815,21802,21803],{},"Horizontal radius (semi-major axis)",[1800,21805,21806,21810,21814,21818],{},[1815,21807,21808],{},[99,21809,15167],{},[1815,21811,21812],{},[99,21813,15300],{},[1815,21815,21816],{},[99,21817,21243],{},[1815,21819,21820],{},"Vertical radius (semi-minor axis)",[1800,21822,21823,21827,21831,21835],{},[1815,21824,21825],{},[99,21826,11835],{},[1815,21828,21829],{},[99,21830,15300],{},[1815,21832,21833],{},[99,21834,8673],{},[1815,21836,21837],{},"Rotation in degrees",[212,21839,21841],{"className":4564,"code":21840,"language":4566,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,21842,21843],{"__ignoreMap":178},[220,21844,21845,21847,21849,21851,21854,21856,21859,21861,21863,21865,21868,21870,21872,21874,21877,21879,21881],{"class":222,"line":223},[220,21846,21740],{"class":264},[220,21848,21743],{"class":420},[220,21850,4601],{"class":264},[220,21852,21853],{"class":230},"\"ellipseSDF\"",[220,21855,1895],{"class":264},[220,21857,21858],{"class":420},"\"width\"",[220,21860,4601],{"class":264},[220,21862,8249],{"class":420},[220,21864,1895],{"class":264},[220,21866,21867],{"class":420},"\"height\"",[220,21869,4601],{"class":264},[220,21871,21243],{"class":420},[220,21873,1895],{"class":264},[220,21875,21876],{"class":420},"\"rotation\"",[220,21878,4601],{"class":264},[220,21880,8673],{"class":420},[220,21882,5671],{"class":264},[4509,21884],{},[3262,21886,21888,21889],{"id":21887},"polygon-polygonsdf","Polygon — ",[99,21890,21891],{},"polygonSDF",[15,21893,21894],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,21896,21897,21909],{},[1797,21898,21899],{},[1800,21900,21901,21903,21905,21907],{},[1803,21902,17914],{},[1803,21904,15187],{},[1803,21906,15190],{},[1803,21908,1808],{},[1810,21910,21911,21928,21946,21964],{},[1800,21912,21913,21917,21921,21925],{},[1815,21914,21915],{},[99,21916,11683],{},[1815,21918,21919],{},[99,21920,15300],{},[1815,21922,21923],{},[99,21924,21148],{},[1815,21926,21927],{},"Distance from center to nearest edge midpoint",[1800,21929,21930,21935,21939,21943],{},[1815,21931,21932],{},[99,21933,21934],{},"sides",[1815,21936,21937],{},[99,21938,15300],{},[1815,21940,21941],{},[99,21942,21193],{},[1815,21944,21945],{},"Number of sides",[1800,21947,21948,21953,21957,21961],{},[1815,21949,21950],{},[99,21951,21952],{},"rounding",[1815,21954,21955],{},[99,21956,15300],{},[1815,21958,21959],{},[99,21960,8673],{},[1815,21962,21963],{},"Corner rounding amount",[1800,21965,21966,21970,21974,21978],{},[1815,21967,21968],{},[99,21969,11835],{},[1815,21971,21972],{},[99,21973,15300],{},[1815,21975,21976],{},[99,21977,8673],{},[1815,21979,21837],{},[212,21981,21983],{"className":4564,"code":21982,"language":4566,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,21984,21985],{"__ignoreMap":178},[220,21986,21987,21989,21991,21993,21996,21998,22000,22002,22005,22007,22010,22012,22014,22016,22019,22021,22024,22026,22028,22030,22032],{"class":222,"line":223},[220,21988,21740],{"class":264},[220,21990,21743],{"class":420},[220,21992,4601],{"class":264},[220,21994,21995],{"class":230},"\"polygonSDF\"",[220,21997,1895],{"class":264},[220,21999,21752],{"class":420},[220,22001,4601],{"class":264},[220,22003,22004],{"class":420},"0.3",[220,22006,1895],{"class":264},[220,22008,22009],{"class":420},"\"sides\"",[220,22011,4601],{"class":264},[220,22013,21193],{"class":420},[220,22015,1895],{"class":264},[220,22017,22018],{"class":420},"\"rounding\"",[220,22020,4601],{"class":264},[220,22022,22023],{"class":420},"0.05",[220,22025,1895],{"class":264},[220,22027,21876],{"class":420},[220,22029,4601],{"class":264},[220,22031,8673],{"class":420},[220,22033,5671],{"class":264},[4509,22035],{},[3262,22037,22039,22040],{"id":22038},"star-starsdf","Star — ",[99,22041,22042],{},"starSDF",[15,22044,22045],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,22047,22048,22060],{},[1797,22049,22050],{},[1800,22051,22052,22054,22056,22058],{},[1803,22053,17914],{},[1803,22055,15187],{},[1803,22057,15190],{},[1803,22059,1808],{},[1810,22061,22062,22079,22097,22119],{},[1800,22063,22064,22068,22072,22076],{},[1815,22065,22066],{},[99,22067,11683],{},[1815,22069,22070],{},[99,22071,15300],{},[1815,22073,22074],{},[99,22075,21148],{},[1815,22077,22078],{},"Outer tip radius",[1800,22080,22081,22085,22089,22094],{},[1815,22082,22083],{},[99,22084,21934],{},[1815,22086,22087],{},[99,22088,15300],{},[1815,22090,22091],{},[99,22092,22093],{},"5",[1815,22095,22096],{},"Number of points",[1800,22098,22099,22104,22108,22113],{},[1815,22100,22101],{},[99,22102,22103],{},"innerRatio",[1815,22105,22106],{},[99,22107,15300],{},[1815,22109,22110],{},[99,22111,22112],{},"0.382",[1815,22114,22115,22116,22118],{},"Inner vertex radius as a fraction of outer radius — ",[99,22117,22112],{}," gives the classic golden-ratio 5-star",[1800,22120,22121,22125,22129,22133],{},[1815,22122,22123],{},[99,22124,11835],{},[1815,22126,22127],{},[99,22128,15300],{},[1815,22130,22131],{},[99,22132,8673],{},[1815,22134,21837],{},[212,22136,22138],{"className":4564,"code":22137,"language":4566,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,22139,22140],{"__ignoreMap":178},[220,22141,22142,22144,22146,22148,22150,22152,22154,22156,22158,22160,22162,22164,22166,22168,22171,22173,22175,22177,22179,22181,22183],{"class":222,"line":223},[220,22143,21740],{"class":264},[220,22145,21743],{"class":420},[220,22147,4601],{"class":264},[220,22149,21183],{"class":230},[220,22151,1895],{"class":264},[220,22153,21752],{"class":420},[220,22155,4601],{"class":264},[220,22157,21148],{"class":420},[220,22159,1895],{"class":264},[220,22161,22009],{"class":420},[220,22163,4601],{"class":264},[220,22165,22093],{"class":420},[220,22167,1895],{"class":264},[220,22169,22170],{"class":420},"\"innerRatio\"",[220,22172,4601],{"class":264},[220,22174,22112],{"class":420},[220,22176,1895],{"class":264},[220,22178,21876],{"class":420},[220,22180,4601],{"class":264},[220,22182,8673],{"class":420},[220,22184,5671],{"class":264},[4509,22186],{},[3262,22188,22190,22191],{"id":22189},"flower-flowersdf","Flower — ",[99,22192,22193],{},"flowerSDF",[15,22195,22196],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,22198,22199,22211],{},[1797,22200,22201],{},[1800,22202,22203,22205,22207,22209],{},[1803,22204,17914],{},[1803,22206,15187],{},[1803,22208,15190],{},[1803,22210,1808],{},[1810,22212,22213,22230,22247,22270],{},[1800,22214,22215,22219,22223,22227],{},[1815,22216,22217],{},[99,22218,11683],{},[1815,22220,22221],{},[99,22222,15300],{},[1815,22224,22225],{},[99,22226,21148],{},[1815,22228,22229],{},"Outer petal tip radius",[1800,22231,22232,22236,22240,22244],{},[1815,22233,22234],{},[99,22235,21934],{},[1815,22237,22238],{},[99,22239,15300],{},[1815,22241,22242],{},[99,22243,21193],{},[1815,22245,22246],{},"Number of petals",[1800,22248,22249,22253,22257,22261],{},[1815,22250,22251],{},[99,22252,22103],{},[1815,22254,22255],{},[99,22256,15300],{},[1815,22258,22259],{},[99,22260,7754],{},[1815,22262,22263,22264,22266,22267,22269],{},"Valley depth — ",[99,22265,16976],{}," = deep narrow valleys, ",[99,22268,6299],{}," = subtle scalloped edge",[1800,22271,22272,22276,22280,22284],{},[1815,22273,22274],{},[99,22275,11835],{},[1815,22277,22278],{},[99,22279,15300],{},[1815,22281,22282],{},[99,22283,8673],{},[1815,22285,21837],{},[212,22287,22289],{"className":4564,"code":22288,"language":4566,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,22290,22291],{"__ignoreMap":178},[220,22292,22293,22295,22297,22299,22302,22304,22306,22308,22310,22312,22314,22316,22318,22320,22322,22324,22326,22328,22330,22332,22334],{"class":222,"line":223},[220,22294,21740],{"class":264},[220,22296,21743],{"class":420},[220,22298,4601],{"class":264},[220,22300,22301],{"class":230},"\"flowerSDF\"",[220,22303,1895],{"class":264},[220,22305,21752],{"class":420},[220,22307,4601],{"class":264},[220,22309,21148],{"class":420},[220,22311,1895],{"class":264},[220,22313,22009],{"class":420},[220,22315,4601],{"class":264},[220,22317,21193],{"class":420},[220,22319,1895],{"class":264},[220,22321,22170],{"class":420},[220,22323,4601],{"class":264},[220,22325,7754],{"class":420},[220,22327,1895],{"class":264},[220,22329,21876],{"class":420},[220,22331,4601],{"class":264},[220,22333,8673],{"class":420},[220,22335,5671],{"class":264},[4509,22337],{},[3262,22339,22341,22342],{"id":22340},"ring-ringsdf","Ring — ",[99,22343,22344],{},"ringSDF",[15,22346,22347],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,22349,22350,22362],{},[1797,22351,22352],{},[1800,22353,22354,22356,22358,22360],{},[1803,22355,17914],{},[1803,22357,15187],{},[1803,22359,15190],{},[1803,22361,1808],{},[1810,22363,22364,22381],{},[1800,22365,22366,22370,22374,22378],{},[1815,22367,22368],{},[99,22369,11683],{},[1815,22371,22372],{},[99,22373,15300],{},[1815,22375,22376],{},[99,22377,22004],{},[1815,22379,22380],{},"Distance from center to the ring centerline",[1800,22382,22383,22388,22392,22397],{},[1815,22384,22385],{},[99,22386,22387],{},"thickness",[1815,22389,22390],{},[99,22391,15300],{},[1815,22393,22394],{},[99,22395,22396],{},"0.08",[1815,22398,22399],{},"Half-width of the ring on each side of the centerline",[212,22401,22403],{"className":4564,"code":22402,"language":4566,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,22404,22405],{"__ignoreMap":178},[220,22406,22407,22409,22411,22413,22416,22418,22420,22422,22424,22426,22429,22431,22433],{"class":222,"line":223},[220,22408,21740],{"class":264},[220,22410,21743],{"class":420},[220,22412,4601],{"class":264},[220,22414,22415],{"class":230},"\"ringSDF\"",[220,22417,1895],{"class":264},[220,22419,21752],{"class":420},[220,22421,4601],{"class":264},[220,22423,22004],{"class":420},[220,22425,1895],{"class":264},[220,22427,22428],{"class":420},"\"thickness\"",[220,22430,4601],{"class":264},[220,22432,22396],{"class":420},[220,22434,5671],{"class":264},[4509,22436],{},[3262,22438,22440,22441],{"id":22439},"cross-crosssdf","Cross — ",[99,22442,22443],{},"crossSDF",[15,22445,22446],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,22448,22449,22461],{},[1797,22450,22451],{},[1800,22452,22453,22455,22457,22459],{},[1803,22454,17914],{},[1803,22456,15187],{},[1803,22458,15190],{},[1803,22460,1808],{},[1810,22462,22463,22480,22497,22514],{},[1800,22464,22465,22469,22473,22477],{},[1815,22466,22467],{},[99,22468,11691],{},[1815,22470,22471],{},[99,22472,15300],{},[1815,22474,22475],{},[99,22476,21243],{},[1815,22478,22479],{},"Arm half-length",[1800,22481,22482,22486,22490,22494],{},[1815,22483,22484],{},[99,22485,22387],{},[1815,22487,22488],{},[99,22489,15300],{},[1815,22491,22492],{},[99,22493,22396],{},[1815,22495,22496],{},"Arm half-width",[1800,22498,22499,22503,22507,22511],{},[1815,22500,22501],{},[99,22502,21952],{},[1815,22504,22505],{},[99,22506,15300],{},[1815,22508,22509],{},[99,22510,19684],{},[1815,22512,22513],{},"Corner rounding at arm ends and intersections",[1800,22515,22516,22520,22524,22528],{},[1815,22517,22518],{},[99,22519,11835],{},[1815,22521,22522],{},[99,22523,15300],{},[1815,22525,22526],{},[99,22527,8673],{},[1815,22529,22530,22531,22533],{},"Rotation in degrees — use ",[99,22532,1295],{}," for an X shape",[212,22535,22537],{"className":4564,"code":22536,"language":4566,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,22538,22539],{"__ignoreMap":178},[220,22540,22541,22543,22545,22547,22550,22552,22555,22557,22559,22561,22563,22565,22567,22569,22571,22573,22575,22577,22579,22581,22583],{"class":222,"line":223},[220,22542,21740],{"class":264},[220,22544,21743],{"class":420},[220,22546,4601],{"class":264},[220,22548,22549],{"class":230},"\"crossSDF\"",[220,22551,1895],{"class":264},[220,22553,22554],{"class":420},"\"size\"",[220,22556,4601],{"class":264},[220,22558,21243],{"class":420},[220,22560,1895],{"class":264},[220,22562,22428],{"class":420},[220,22564,4601],{"class":264},[220,22566,22396],{"class":420},[220,22568,1895],{"class":264},[220,22570,22018],{"class":420},[220,22572,4601],{"class":264},[220,22574,19684],{"class":420},[220,22576,1895],{"class":264},[220,22578,21876],{"class":420},[220,22580,4601],{"class":264},[220,22582,8673],{"class":420},[220,22584,5671],{"class":264},[4509,22586],{},[3262,22588,22590,22591],{"id":22589},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,22592,22593],{},"roundedRectSDF",[15,22595,22596],{},"A rectangle with uniformly rounded corners.",[1794,22598,22599,22611],{},[1797,22600,22601],{},[1800,22602,22603,22605,22607,22609],{},[1803,22604,17914],{},[1803,22606,15187],{},[1803,22608,15190],{},[1803,22610,1808],{},[1810,22612,22613,22630,22647,22664],{},[1800,22614,22615,22619,22623,22627],{},[1815,22616,22617],{},[99,22618,15164],{},[1815,22620,22621],{},[99,22622,15300],{},[1815,22624,22625],{},[99,22626,21148],{},[1815,22628,22629],{},"Half-width",[1800,22631,22632,22636,22640,22644],{},[1815,22633,22634],{},[99,22635,15167],{},[1815,22637,22638],{},[99,22639,15300],{},[1815,22641,22642],{},[99,22643,21243],{},[1815,22645,22646],{},"Half-height",[1800,22648,22649,22653,22657,22661],{},[1815,22650,22651],{},[99,22652,21952],{},[1815,22654,22655],{},[99,22656,15300],{},[1815,22658,22659],{},[99,22660,22023],{},[1815,22662,22663],{},"Corner rounding radius",[1800,22665,22666,22670,22674,22678],{},[1815,22667,22668],{},[99,22669,11835],{},[1815,22671,22672],{},[99,22673,15300],{},[1815,22675,22676],{},[99,22677,8673],{},[1815,22679,21837],{},[212,22681,22683],{"className":4564,"code":22682,"language":4566,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,22684,22685],{"__ignoreMap":178},[220,22686,22687,22689,22691,22693,22695,22697,22699,22701,22703,22705,22707,22709,22711,22713,22715,22717,22719,22721,22723,22725,22727],{"class":222,"line":223},[220,22688,21740],{"class":264},[220,22690,21743],{"class":420},[220,22692,4601],{"class":264},[220,22694,21233],{"class":230},[220,22696,1895],{"class":264},[220,22698,21858],{"class":420},[220,22700,4601],{"class":264},[220,22702,21148],{"class":420},[220,22704,1895],{"class":264},[220,22706,21867],{"class":420},[220,22708,4601],{"class":264},[220,22710,21243],{"class":420},[220,22712,1895],{"class":264},[220,22714,22018],{"class":420},[220,22716,4601],{"class":264},[220,22718,22023],{"class":420},[220,22720,1895],{"class":264},[220,22722,21876],{"class":420},[220,22724,4601],{"class":264},[220,22726,8673],{"class":420},[220,22728,5671],{"class":264},[4509,22730],{},[3262,22732,22734,22735],{"id":22733},"vesica-vesicasdf","Vesica — ",[99,22736,22737],{},"vesicaSDF",[15,22739,22740],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,22742,22743,22755],{},[1797,22744,22745],{},[1800,22746,22747,22749,22751,22753],{},[1803,22748,17914],{},[1803,22750,15187],{},[1803,22752,15190],{},[1803,22754,1808],{},[1810,22756,22757,22774,22798],{},[1800,22758,22759,22763,22767,22771],{},[1815,22760,22761],{},[99,22762,11683],{},[1815,22764,22765],{},[99,22766,15300],{},[1815,22768,22769],{},[99,22770,21148],{},[1815,22772,22773],{},"Radius of each circle",[1800,22775,22776,22781,22785,22789],{},[1815,22777,22778],{},[99,22779,22780],{},"spread",[1815,22782,22783],{},[99,22784,15300],{},[1815,22786,22787],{},[99,22788,7754],{},[1815,22790,22791,22792,22794,22795,22797],{},"Half-distance between circle centers as a fraction of radius — ",[99,22793,8673],{}," = a single circle, ",[99,22796,8677],{}," = an infinitely thin lens",[1800,22799,22800,22804,22808,22812],{},[1815,22801,22802],{},[99,22803,11835],{},[1815,22805,22806],{},[99,22807,15300],{},[1815,22809,22810],{},[99,22811,8673],{},[1815,22813,21837],{},[212,22815,22817],{"className":4564,"code":22816,"language":4566,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,22818,22819],{"__ignoreMap":178},[220,22820,22821,22823,22825,22827,22830,22832,22834,22836,22838,22840,22843,22845,22847,22849,22851,22853,22855],{"class":222,"line":223},[220,22822,21740],{"class":264},[220,22824,21743],{"class":420},[220,22826,4601],{"class":264},[220,22828,22829],{"class":230},"\"vesicaSDF\"",[220,22831,1895],{"class":264},[220,22833,21752],{"class":420},[220,22835,4601],{"class":264},[220,22837,21148],{"class":420},[220,22839,1895],{"class":264},[220,22841,22842],{"class":420},"\"spread\"",[220,22844,4601],{"class":264},[220,22846,7754],{"class":420},[220,22848,1895],{"class":264},[220,22850,21876],{"class":420},[220,22852,4601],{"class":264},[220,22854,8673],{"class":420},[220,22856,5671],{"class":264},[4509,22858],{},[3262,22860,22862,22863],{"id":22861},"crescent-crescentsdf","Crescent — ",[99,22864,22865],{},"crescentSDF",[15,22867,22868],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,22870,22871,22883],{},[1797,22872,22873],{},[1800,22874,22875,22877,22879,22881],{},[1803,22876,17914],{},[1803,22878,15187],{},[1803,22880,15190],{},[1803,22882,1808],{},[1810,22884,22885,22902,22920,22937],{},[1800,22886,22887,22891,22895,22899],{},[1815,22888,22889],{},[99,22890,11683],{},[1815,22892,22893],{},[99,22894,15300],{},[1815,22896,22897],{},[99,22898,21148],{},[1815,22900,22901],{},"Outer circle radius",[1800,22903,22904,22908,22912,22917],{},[1815,22905,22906],{},[99,22907,22103],{},[1815,22909,22910],{},[99,22911,15300],{},[1815,22913,22914],{},[99,22915,22916],{},"0.75",[1815,22918,22919],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,22921,22922,22926,22930,22934],{},[1815,22923,22924],{},[99,22925,18064],{},[1815,22927,22928],{},[99,22929,15300],{},[1815,22931,22932],{},[99,22933,18192],{},[1815,22935,22936],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,22938,22939,22943,22947,22951],{},[1815,22940,22941],{},[99,22942,11835],{},[1815,22944,22945],{},[99,22946,15300],{},[1815,22948,22949],{},[99,22950,8673],{},[1815,22952,21837],{},[212,22954,22956],{"className":4564,"code":22955,"language":4566,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,22957,22958],{"__ignoreMap":178},[220,22959,22960,22962,22964,22966,22969,22971,22973,22975,22977,22979,22981,22983,22985,22987,22990,22992,22994,22996,22998,23000,23002],{"class":222,"line":223},[220,22961,21740],{"class":264},[220,22963,21743],{"class":420},[220,22965,4601],{"class":264},[220,22967,22968],{"class":230},"\"crescentSDF\"",[220,22970,1895],{"class":264},[220,22972,21752],{"class":420},[220,22974,4601],{"class":264},[220,22976,21148],{"class":420},[220,22978,1895],{"class":264},[220,22980,22170],{"class":420},[220,22982,4601],{"class":264},[220,22984,22916],{"class":420},[220,22986,1895],{"class":264},[220,22988,22989],{"class":420},"\"offset\"",[220,22991,4601],{"class":264},[220,22993,18192],{"class":420},[220,22995,1895],{"class":264},[220,22997,21876],{"class":420},[220,22999,4601],{"class":264},[220,23001,8673],{"class":420},[220,23003,5671],{"class":264},[4509,23005],{},[3262,23007,23009,23010],{"id":23008},"trapezoid-trapezoidsdf","Trapezoid — ",[99,23011,23012],{},"trapezoidSDF",[15,23014,23015],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,23017,23018,23030],{},[1797,23019,23020],{},[1800,23021,23022,23024,23026,23028],{},[1803,23023,17914],{},[1803,23025,15187],{},[1803,23027,15190],{},[1803,23029,1808],{},[1810,23031,23032,23050,23068,23084],{},[1800,23033,23034,23039,23043,23047],{},[1815,23035,23036],{},[99,23037,23038],{},"bottomWidth",[1815,23040,23041],{},[99,23042,15300],{},[1815,23044,23045],{},[99,23046,21148],{},[1815,23048,23049],{},"Bottom edge half-width",[1800,23051,23052,23057,23061,23065],{},[1815,23053,23054],{},[99,23055,23056],{},"topWidth",[1815,23058,23059],{},[99,23060,15300],{},[1815,23062,23063],{},[99,23064,16976],{},[1815,23066,23067],{},"Top edge half-width",[1800,23069,23070,23074,23078,23082],{},[1815,23071,23072],{},[99,23073,15167],{},[1815,23075,23076],{},[99,23077,15300],{},[1815,23079,23080],{},[99,23081,21243],{},[1815,23083,22646],{},[1800,23085,23086,23090,23094,23098],{},[1815,23087,23088],{},[99,23089,11835],{},[1815,23091,23092],{},[99,23093,15300],{},[1815,23095,23096],{},[99,23097,8673],{},[1815,23099,21837],{},[212,23101,23103],{"className":4564,"code":23102,"language":4566,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,23104,23105],{"__ignoreMap":178},[220,23106,23107,23109,23111,23113,23116,23118,23121,23123,23125,23127,23130,23132,23134,23136,23138,23140,23142,23144,23146,23148,23150],{"class":222,"line":223},[220,23108,21740],{"class":264},[220,23110,21743],{"class":420},[220,23112,4601],{"class":264},[220,23114,23115],{"class":230},"\"trapezoidSDF\"",[220,23117,1895],{"class":264},[220,23119,23120],{"class":420},"\"bottomWidth\"",[220,23122,4601],{"class":264},[220,23124,21148],{"class":420},[220,23126,1895],{"class":264},[220,23128,23129],{"class":420},"\"topWidth\"",[220,23131,4601],{"class":264},[220,23133,16976],{"class":420},[220,23135,1895],{"class":264},[220,23137,21867],{"class":420},[220,23139,4601],{"class":264},[220,23141,21243],{"class":420},[220,23143,1895],{"class":264},[220,23145,21876],{"class":420},[220,23147,4601],{"class":264},[220,23149,8673],{"class":420},[220,23151,5671],{"class":264},[4509,23153],{},[23,23155,23157],{"id":23156},"_3d-shapes","3D shapes",[15,23159,23160,23161,1895,23163,1895,23165,1895,23167,20981,23170,23173,23174,23177],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,23162,15466],{},[159,23164,20980],{},[159,23166,20984],{},[159,23168,23169],{},"ThinFilm",[159,23171,23172],{},"Crystal",") use this to refract, shade, and crease according to the real surface, giving you a physically based 3D object lit inside your design. (",[159,23175,23176],{},"SmokeFill"," treats every shape as a flat fill.)",[15,23179,23180,23181,1895,23184,20981,23187,23190],{},"Every 3D shape is positioned with three independent rotations — ",[99,23182,23183],{},"rotX",[99,23185,23186],{},"rotY",[99,23188,23189],{},"rotZ"," — given in degrees. All sizes are in UV space.",[15805,23192,23193],{},[15,23194,23195,23198,23199,23202,23203,23205,23206,23208,23209,23211],{},[159,23196,23197],{},"Rotation order:"," 3D rotations don't commute — the order they're combined in changes the result. Shaders applies them as a fixed Euler sequence: ",[159,23200,23201],{},"Y first, then X, then Z",". Because the sequence is fixed, the order you list the props in the config has no effect — only the angle values matter. If a combination of angles doesn't land the way you expect, adjust the values rather than trying to reorder them. As a rough mental model, ",[99,23204,23186],{}," is a turntable spin (left\u002Fright), ",[99,23207,23183],{}," tips the shape toward or away from you, and ",[99,23210,23189],{}," rolls it in the screen plane.",[15805,23213,23214,23234],{},[15,23215,23216,23219,23220,23223,23224,23226,23227,1550,23230,23233],{},[159,23217,23218],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,23221,23222],{"href":17272},"dynamic prop"," instead of a number. Set a rotation to an ",[99,23225,17361],{}," config looping from ",[99,23228,23229],{},"-180",[99,23231,23232],{},"180"," for a continuous spin, with no animation code:",[212,23235,23237],{"className":4564,"code":23236,"language":4566,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12,\n \"rotY\": { \"type\": \"auto-animate\", \"mode\": \"loop\", \"outputMin\": -180, \"outputMax\": 180, \"speed\": 0.5 } }\n",[99,23238,23239,23269],{"__ignoreMap":178},[220,23240,23241,23243,23245,23247,23250,23252,23254,23256,23258,23260,23263,23265,23267],{"class":222,"line":223},[220,23242,21740],{"class":264},[220,23244,21743],{"class":420},[220,23246,4601],{"class":264},[220,23248,23249],{"class":230},"\"torus3D\"",[220,23251,1895],{"class":264},[220,23253,21752],{"class":420},[220,23255,4601],{"class":264},[220,23257,22004],{"class":420},[220,23259,1895],{"class":264},[220,23261,23262],{"class":420},"\"tube\"",[220,23264,4601],{"class":264},[220,23266,18220],{"class":420},[220,23268,1760],{"class":264},[220,23270,23271,23274,23276,23278,23280,23283,23285,23288,23290,23293,23295,23298,23300,23302,23304,23307,23309,23311,23313,23316,23318,23320],{"class":222,"line":179},[220,23272,23273],{"class":420}," \"rotY\"",[220,23275,5660],{"class":264},[220,23277,21743],{"class":420},[220,23279,4601],{"class":264},[220,23281,23282],{"class":230},"\"auto-animate\"",[220,23284,1895],{"class":264},[220,23286,23287],{"class":420},"\"mode\"",[220,23289,4601],{"class":264},[220,23291,23292],{"class":230},"\"loop\"",[220,23294,1895],{"class":264},[220,23296,23297],{"class":420},"\"outputMin\"",[220,23299,4601],{"class":264},[220,23301,23229],{"class":420},[220,23303,1895],{"class":264},[220,23305,23306],{"class":420},"\"outputMax\"",[220,23308,4601],{"class":264},[220,23310,23232],{"class":420},[220,23312,1895],{"class":264},[220,23314,23315],{"class":420},"\"speed\"",[220,23317,4601],{"class":264},[220,23319,7754],{"class":420},[220,23321,1782],{"class":264},[3262,23323,23325,23326],{"id":23324},"sphere-sphere3d","Sphere — ",[99,23327,21029],{},[15,23329,23330],{},"A perfect sphere.",[1794,23332,23333,23345],{},[1797,23334,23335],{},[1800,23336,23337,23339,23341,23343],{},[1803,23338,17914],{},[1803,23340,15187],{},[1803,23342,15190],{},[1803,23344,1808],{},[1810,23346,23347,23364],{},[1800,23348,23349,23353,23357,23361],{},[1815,23350,23351],{},[99,23352,11683],{},[1815,23354,23355],{},[99,23356,15300],{},[1815,23358,23359],{},[99,23360,21148],{},[1815,23362,23363],{},"Sphere radius",[1800,23365,23366,23374,23378,23382],{},[1815,23367,23368,15712,23370,15712,23372],{},[99,23369,23183],{},[99,23371,23186],{},[99,23373,23189],{},[1815,23375,23376],{},[99,23377,15300],{},[1815,23379,23380],{},[99,23381,8673],{},[1815,23383,23384],{},"Rotation around each axis, in degrees",[212,23386,23388],{"className":4564,"code":23387,"language":4566,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23389,23390],{"__ignoreMap":178},[220,23391,23392,23394,23396,23398,23401,23403,23405,23407,23409,23411,23414,23416,23418,23420,23423,23425,23427,23429,23432,23434,23436],{"class":222,"line":223},[220,23393,21740],{"class":264},[220,23395,21743],{"class":420},[220,23397,4601],{"class":264},[220,23399,23400],{"class":230},"\"sphere3D\"",[220,23402,1895],{"class":264},[220,23404,21752],{"class":420},[220,23406,4601],{"class":264},[220,23408,21148],{"class":420},[220,23410,1895],{"class":264},[220,23412,23413],{"class":420},"\"rotX\"",[220,23415,4601],{"class":264},[220,23417,8673],{"class":420},[220,23419,1895],{"class":264},[220,23421,23422],{"class":420},"\"rotY\"",[220,23424,4601],{"class":264},[220,23426,8673],{"class":420},[220,23428,1895],{"class":264},[220,23430,23431],{"class":420},"\"rotZ\"",[220,23433,4601],{"class":264},[220,23435,8673],{"class":420},[220,23437,5671],{"class":264},[4509,23439],{},[3262,23441,23443,23444],{"id":23442},"cube-cube3d","Cube — ",[99,23445,23446],{},"cube3D",[15,23448,23449],{},"A box with independent dimensions and rounded edges.",[1794,23451,23452,23464],{},[1797,23453,23454],{},[1800,23455,23456,23458,23460,23462],{},[1803,23457,17914],{},[1803,23459,15187],{},[1803,23461,15190],{},[1803,23463,1808],{},[1810,23465,23466,23485,23503,23521,23538],{},[1800,23467,23468,23473,23477,23482],{},[1815,23469,23470],{},[99,23471,23472],{},"sizeX",[1815,23474,23475],{},[99,23476,15300],{},[1815,23478,23479],{},[99,23480,23481],{},"0.27",[1815,23483,23484],{},"Half-width (X)",[1800,23486,23487,23492,23496,23500],{},[1815,23488,23489],{},[99,23490,23491],{},"sizeY",[1815,23493,23494],{},[99,23495,15300],{},[1815,23497,23498],{},[99,23499,23481],{},[1815,23501,23502],{},"Half-height (Y)",[1800,23504,23505,23510,23514,23518],{},[1815,23506,23507],{},[99,23508,23509],{},"sizeZ",[1815,23511,23512],{},[99,23513,15300],{},[1815,23515,23516],{},[99,23517,23481],{},[1815,23519,23520],{},"Half-depth (Z)",[1800,23522,23523,23527,23531,23535],{},[1815,23524,23525],{},[99,23526,21952],{},[1815,23528,23529],{},[99,23530,15300],{},[1815,23532,23533],{},[99,23534,19684],{},[1815,23536,23537],{},"Edge\u002Fcorner rounding",[1800,23539,23540,23548,23552,23562],{},[1815,23541,23542,15712,23544,15712,23546],{},[99,23543,23183],{},[99,23545,23186],{},[99,23547,23189],{},[1815,23549,23550],{},[99,23551,15300],{},[1815,23553,23554,15282,23557,15282,23560],{},[99,23555,23556],{},"25",[99,23558,23559],{},"35",[99,23561,8673],{},[1815,23563,23384],{},[212,23565,23567],{"className":4564,"code":23566,"language":4566,"meta":178,"style":178},"{ \"type\": \"cube3D\", \"sizeX\": 0.27, \"sizeY\": 0.27, \"sizeZ\": 0.27, \"rounding\": 0.02, \"rotX\": 25, \"rotY\": 35, \"rotZ\": 0 }\n",[99,23568,23569],{"__ignoreMap":178},[220,23570,23571,23573,23575,23577,23580,23582,23585,23587,23589,23591,23594,23596,23598,23600,23603,23605,23607,23609,23611,23613,23615,23617,23619,23621,23623,23625,23627,23629,23631,23633,23635,23637,23639],{"class":222,"line":223},[220,23572,21740],{"class":264},[220,23574,21743],{"class":420},[220,23576,4601],{"class":264},[220,23578,23579],{"class":230},"\"cube3D\"",[220,23581,1895],{"class":264},[220,23583,23584],{"class":420},"\"sizeX\"",[220,23586,4601],{"class":264},[220,23588,23481],{"class":420},[220,23590,1895],{"class":264},[220,23592,23593],{"class":420},"\"sizeY\"",[220,23595,4601],{"class":264},[220,23597,23481],{"class":420},[220,23599,1895],{"class":264},[220,23601,23602],{"class":420},"\"sizeZ\"",[220,23604,4601],{"class":264},[220,23606,23481],{"class":420},[220,23608,1895],{"class":264},[220,23610,22018],{"class":420},[220,23612,4601],{"class":264},[220,23614,19684],{"class":420},[220,23616,1895],{"class":264},[220,23618,23413],{"class":420},[220,23620,4601],{"class":264},[220,23622,23556],{"class":420},[220,23624,1895],{"class":264},[220,23626,23422],{"class":420},[220,23628,4601],{"class":264},[220,23630,23559],{"class":420},[220,23632,1895],{"class":264},[220,23634,23431],{"class":420},[220,23636,4601],{"class":264},[220,23638,8673],{"class":420},[220,23640,5671],{"class":264},[4509,23642],{},[3262,23644,23646,23647],{"id":23645},"torus-torus3d","Torus — ",[99,23648,23649],{},"torus3D",[15,23651,23652],{},"A doughnut ring.",[1794,23654,23655,23667],{},[1797,23656,23657],{},[1800,23658,23659,23661,23663,23665],{},[1803,23660,17914],{},[1803,23662,15187],{},[1803,23664,15190],{},[1803,23666,1808],{},[1810,23668,23669,23686,23704],{},[1800,23670,23671,23675,23679,23683],{},[1815,23672,23673],{},[99,23674,11683],{},[1815,23676,23677],{},[99,23678,15300],{},[1815,23680,23681],{},[99,23682,22004],{},[1815,23684,23685],{},"Ring radius (centre to tube centreline)",[1800,23687,23688,23693,23697,23701],{},[1815,23689,23690],{},[99,23691,23692],{},"tube",[1815,23694,23695],{},[99,23696,15300],{},[1815,23698,23699],{},[99,23700,18220],{},[1815,23702,23703],{},"Tube radius",[1800,23705,23706,23714,23718,23727],{},[1815,23707,23708,15712,23710,15712,23712],{},[99,23709,23183],{},[99,23711,23186],{},[99,23713,23189],{},[1815,23715,23716],{},[99,23717,15300],{},[1815,23719,23720,15282,23723,15282,23725],{},[99,23721,23722],{},"55",[99,23724,8673],{},[99,23726,8673],{},[1815,23728,23384],{},[212,23730,23732],{"className":4564,"code":23731,"language":4566,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23733,23734],{"__ignoreMap":178},[220,23735,23736,23738,23740,23742,23744,23746,23748,23750,23752,23754,23756,23758,23760,23762,23764,23766,23768,23770,23772,23774,23776,23778,23780,23782,23784],{"class":222,"line":223},[220,23737,21740],{"class":264},[220,23739,21743],{"class":420},[220,23741,4601],{"class":264},[220,23743,23249],{"class":230},[220,23745,1895],{"class":264},[220,23747,21752],{"class":420},[220,23749,4601],{"class":264},[220,23751,22004],{"class":420},[220,23753,1895],{"class":264},[220,23755,23262],{"class":420},[220,23757,4601],{"class":264},[220,23759,18220],{"class":420},[220,23761,1895],{"class":264},[220,23763,23413],{"class":420},[220,23765,4601],{"class":264},[220,23767,23722],{"class":420},[220,23769,1895],{"class":264},[220,23771,23422],{"class":420},[220,23773,4601],{"class":264},[220,23775,8673],{"class":420},[220,23777,1895],{"class":264},[220,23779,23431],{"class":420},[220,23781,4601],{"class":264},[220,23783,8673],{"class":420},[220,23785,5671],{"class":264},[4509,23787],{},[3262,23789,23791,23792],{"id":23790},"octahedron-octahedron3d","Octahedron — ",[99,23793,23794],{},"octahedron3D",[15,23796,23797],{},"An eight-faced diamond\u002Fbipyramid.",[1794,23799,23800,23812],{},[1797,23801,23802],{},[1800,23803,23804,23806,23808,23810],{},[1803,23805,17914],{},[1803,23807,15187],{},[1803,23809,15190],{},[1803,23811,1808],{},[1810,23813,23814,23832],{},[1800,23815,23816,23820,23824,23829],{},[1815,23817,23818],{},[99,23819,11683],{},[1815,23821,23822],{},[99,23823,15300],{},[1815,23825,23826],{},[99,23827,23828],{},"0.42",[1815,23830,23831],{},"Distance from centre to each vertex",[1800,23833,23834,23842,23846,23855],{},[1815,23835,23836,15712,23838,15712,23840],{},[99,23837,23183],{},[99,23839,23186],{},[99,23841,23189],{},[1815,23843,23844],{},[99,23845,15300],{},[1815,23847,23848,15282,23851,15282,23853],{},[99,23849,23850],{},"10",[99,23852,23556],{},[99,23854,8673],{},[1815,23856,23384],{},[212,23858,23860],{"className":4564,"code":23859,"language":4566,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,23861,23862],{"__ignoreMap":178},[220,23863,23864,23866,23868,23870,23873,23875,23877,23879,23881,23883,23885,23887,23889,23891,23893,23895,23897,23899,23901,23903,23905],{"class":222,"line":223},[220,23865,21740],{"class":264},[220,23867,21743],{"class":420},[220,23869,4601],{"class":264},[220,23871,23872],{"class":230},"\"octahedron3D\"",[220,23874,1895],{"class":264},[220,23876,21752],{"class":420},[220,23878,4601],{"class":264},[220,23880,23828],{"class":420},[220,23882,1895],{"class":264},[220,23884,23413],{"class":420},[220,23886,4601],{"class":264},[220,23888,23850],{"class":420},[220,23890,1895],{"class":264},[220,23892,23422],{"class":420},[220,23894,4601],{"class":264},[220,23896,23556],{"class":420},[220,23898,1895],{"class":264},[220,23900,23431],{"class":420},[220,23902,4601],{"class":264},[220,23904,8673],{"class":420},[220,23906,5671],{"class":264},[4509,23908],{},[3262,23910,23912,23913],{"id":23911},"cylinder-cylinder3d","Cylinder — ",[99,23914,23915],{},"cylinder3D",[15,23917,23918],{},"A capped cylinder with rounded edges.",[1794,23920,23921,23933],{},[1797,23922,23923],{},[1800,23924,23925,23927,23929,23931],{},[1803,23926,17914],{},[1803,23928,15187],{},[1803,23930,15190],{},[1803,23932,1808],{},[1810,23934,23935,23953,23970,23987],{},[1800,23936,23937,23941,23945,23950],{},[1815,23938,23939],{},[99,23940,11683],{},[1815,23942,23943],{},[99,23944,15300],{},[1815,23946,23947],{},[99,23948,23949],{},"0.22",[1815,23951,23952],{},"Cylinder radius",[1800,23954,23955,23959,23963,23968],{},[1815,23956,23957],{},[99,23958,15167],{},[1815,23960,23961],{},[99,23962,15300],{},[1815,23964,23965],{},[99,23966,23967],{},"0.26",[1815,23969,22646],{},[1800,23971,23972,23976,23980,23984],{},[1815,23973,23974],{},[99,23975,21952],{},[1815,23977,23978],{},[99,23979,15300],{},[1815,23981,23982],{},[99,23983,19684],{},[1815,23985,23986],{},"Edge rounding",[1800,23988,23989,23997,24001,24011],{},[1815,23990,23991,15712,23993,15712,23995],{},[99,23992,23183],{},[99,23994,23186],{},[99,23996,23189],{},[1815,23998,23999],{},[99,24000,15300],{},[1815,24002,24003,15282,24006,15282,24008],{},[99,24004,24005],{},"60",[99,24007,8673],{},[99,24009,24010],{},"30",[1815,24012,23384],{},[212,24014,24016],{"className":4564,"code":24015,"language":4566,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,24017,24018],{"__ignoreMap":178},[220,24019,24020,24022,24024,24026,24029,24031,24033,24035,24037,24039,24041,24043,24045,24047,24049,24051,24053,24055,24057,24059,24061,24063,24065,24067,24069,24071,24073,24075,24077],{"class":222,"line":223},[220,24021,21740],{"class":264},[220,24023,21743],{"class":420},[220,24025,4601],{"class":264},[220,24027,24028],{"class":230},"\"cylinder3D\"",[220,24030,1895],{"class":264},[220,24032,21752],{"class":420},[220,24034,4601],{"class":264},[220,24036,23949],{"class":420},[220,24038,1895],{"class":264},[220,24040,21867],{"class":420},[220,24042,4601],{"class":264},[220,24044,23967],{"class":420},[220,24046,1895],{"class":264},[220,24048,22018],{"class":420},[220,24050,4601],{"class":264},[220,24052,19684],{"class":420},[220,24054,1895],{"class":264},[220,24056,23413],{"class":420},[220,24058,4601],{"class":264},[220,24060,24005],{"class":420},[220,24062,1895],{"class":264},[220,24064,23422],{"class":420},[220,24066,4601],{"class":264},[220,24068,8673],{"class":420},[220,24070,1895],{"class":264},[220,24072,23431],{"class":420},[220,24074,4601],{"class":264},[220,24076,24010],{"class":420},[220,24078,5671],{"class":264},[4509,24080],{},[3262,24082,24084,24085],{"id":24083},"capsule-capsule3d","Capsule — ",[99,24086,24087],{},"capsule3D",[15,24089,24090],{},"A cylinder with hemispherical caps (a pill).",[1794,24092,24093,24105],{},[1797,24094,24095],{},[1800,24096,24097,24099,24101,24103],{},[1803,24098,17914],{},[1803,24100,15187],{},[1803,24102,15190],{},[1803,24104,1808],{},[1810,24106,24107,24125,24142],{},[1800,24108,24109,24113,24117,24122],{},[1815,24110,24111],{},[99,24112,11683],{},[1815,24114,24115],{},[99,24116,15300],{},[1815,24118,24119],{},[99,24120,24121],{},"0.16",[1815,24123,24124],{},"Capsule radius",[1800,24126,24127,24131,24135,24139],{},[1815,24128,24129],{},[99,24130,15167],{},[1815,24132,24133],{},[99,24134,15300],{},[1815,24136,24137],{},[99,24138,16976],{},[1815,24140,24141],{},"Half-length of the straight section",[1800,24143,24144,24152,24156,24164],{},[1815,24145,24146,15712,24148,15712,24150],{},[99,24147,23183],{},[99,24149,23186],{},[99,24151,23189],{},[1815,24153,24154],{},[99,24155,15300],{},[1815,24157,24158,15282,24160,15282,24162],{},[99,24159,8673],{},[99,24161,8673],{},[99,24163,23559],{},[1815,24165,23384],{},[212,24167,24169],{"className":4564,"code":24168,"language":4566,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,24170,24171],{"__ignoreMap":178},[220,24172,24173,24175,24177,24179,24182,24184,24186,24188,24190,24192,24194,24196,24198,24200,24202,24204,24206,24208,24210,24212,24214,24216,24218,24220,24222],{"class":222,"line":223},[220,24174,21740],{"class":264},[220,24176,21743],{"class":420},[220,24178,4601],{"class":264},[220,24180,24181],{"class":230},"\"capsule3D\"",[220,24183,1895],{"class":264},[220,24185,21752],{"class":420},[220,24187,4601],{"class":264},[220,24189,24121],{"class":420},[220,24191,1895],{"class":264},[220,24193,21867],{"class":420},[220,24195,4601],{"class":264},[220,24197,16976],{"class":420},[220,24199,1895],{"class":264},[220,24201,23413],{"class":420},[220,24203,4601],{"class":264},[220,24205,8673],{"class":420},[220,24207,1895],{"class":264},[220,24209,23422],{"class":420},[220,24211,4601],{"class":264},[220,24213,8673],{"class":420},[220,24215,1895],{"class":264},[220,24217,23431],{"class":420},[220,24219,4601],{"class":264},[220,24221,23559],{"class":420},[220,24223,5671],{"class":264},[4509,24225],{},[3262,24227,24229,24230],{"id":24228},"cone-cone3d","Cone — ",[99,24231,24232],{},"cone3D",[15,24234,24235,24236,24239,24240,24242],{},"A cone or truncated cone. Set ",[99,24237,24238],{},"topRadius"," above ",[99,24241,8673],{}," to flatten the tip into a frustum.",[1794,24244,24245,24257],{},[1797,24246,24247],{},[1800,24248,24249,24251,24253,24255],{},[1803,24250,17914],{},[1803,24252,15187],{},[1803,24254,15190],{},[1803,24256,1808],{},[1810,24258,24259,24276,24296,24312],{},[1800,24260,24261,24265,24269,24273],{},[1815,24262,24263],{},[99,24264,11683],{},[1815,24266,24267],{},[99,24268,15300],{},[1815,24270,24271],{},[99,24272,22004],{},[1815,24274,24275],{},"Base radius",[1800,24277,24278,24282,24286,24290],{},[1815,24279,24280],{},[99,24281,24238],{},[1815,24283,24284],{},[99,24285,15300],{},[1815,24287,24288],{},[99,24289,19684],{},[1815,24291,24292,24293,24295],{},"Top radius — ",[99,24294,8673],{}," for a sharp point",[1800,24297,24298,24302,24306,24310],{},[1815,24299,24300],{},[99,24301,15167],{},[1815,24303,24304],{},[99,24305,15300],{},[1815,24307,24308],{},[99,24309,22004],{},[1815,24311,22646],{},[1800,24313,24314,24322,24326,24335],{},[1815,24315,24316,15712,24318,15712,24320],{},[99,24317,23183],{},[99,24319,23186],{},[99,24321,23189],{},[1815,24323,24324],{},[99,24325,15300],{},[1815,24327,24328,15282,24330,15282,24332],{},[99,24329,23556],{},[99,24331,8673],{},[99,24333,24334],{},"15",[1815,24336,23384],{},[212,24338,24340],{"className":4564,"code":24339,"language":4566,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,24341,24342],{"__ignoreMap":178},[220,24343,24344,24346,24348,24350,24353,24355,24357,24359,24361,24363,24366,24368,24370,24372,24374,24376,24378,24380,24382,24384,24386,24388,24390,24392,24394,24396,24398,24400,24402],{"class":222,"line":223},[220,24345,21740],{"class":264},[220,24347,21743],{"class":420},[220,24349,4601],{"class":264},[220,24351,24352],{"class":230},"\"cone3D\"",[220,24354,1895],{"class":264},[220,24356,21752],{"class":420},[220,24358,4601],{"class":264},[220,24360,22004],{"class":420},[220,24362,1895],{"class":264},[220,24364,24365],{"class":420},"\"topRadius\"",[220,24367,4601],{"class":264},[220,24369,19684],{"class":420},[220,24371,1895],{"class":264},[220,24373,21867],{"class":420},[220,24375,4601],{"class":264},[220,24377,22004],{"class":420},[220,24379,1895],{"class":264},[220,24381,23413],{"class":420},[220,24383,4601],{"class":264},[220,24385,23556],{"class":420},[220,24387,1895],{"class":264},[220,24389,23422],{"class":420},[220,24391,4601],{"class":264},[220,24393,8673],{"class":420},[220,24395,1895],{"class":264},[220,24397,23431],{"class":420},[220,24399,4601],{"class":264},[220,24401,24334],{"class":420},[220,24403,5671],{"class":264},[4509,24405],{},[3262,24407,24409,24410],{"id":24408},"pyramid-pyramid3d","Pyramid — ",[99,24411,24412],{},"pyramid3D",[15,24414,24415],{},"A square-based pyramid.",[1794,24417,24418,24430],{},[1797,24419,24420],{},[1800,24421,24422,24424,24426,24428],{},[1803,24423,17914],{},[1803,24425,15187],{},[1803,24427,15190],{},[1803,24429,1808],{},[1810,24431,24432,24449,24466],{},[1800,24433,24434,24438,24442,24446],{},[1815,24435,24436],{},[99,24437,11691],{},[1815,24439,24440],{},[99,24441,15300],{},[1815,24443,24444],{},[99,24445,22004],{},[1815,24447,24448],{},"Base half-width",[1800,24450,24451,24455,24459,24463],{},[1815,24452,24453],{},[99,24454,15167],{},[1815,24456,24457],{},[99,24458,15300],{},[1815,24460,24461],{},[99,24462,21199],{},[1815,24464,24465],{},"Apex height",[1800,24467,24468,24476,24480,24489],{},[1815,24469,24470,15712,24472,15712,24474],{},[99,24471,23183],{},[99,24473,23186],{},[99,24475,23189],{},[1815,24477,24478],{},[99,24479,15300],{},[1815,24481,24482,15282,24485,15282,24487],{},[99,24483,24484],{},"-10",[99,24486,24010],{},[99,24488,8673],{},[1815,24490,23384],{},[212,24492,24494],{"className":4564,"code":24493,"language":4566,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24495,24496],{"__ignoreMap":178},[220,24497,24498,24500,24502,24504,24507,24509,24511,24513,24515,24517,24519,24521,24523,24525,24527,24529,24531,24533,24535,24537,24539,24541,24543,24545,24547],{"class":222,"line":223},[220,24499,21740],{"class":264},[220,24501,21743],{"class":420},[220,24503,4601],{"class":264},[220,24505,24506],{"class":230},"\"pyramid3D\"",[220,24508,1895],{"class":264},[220,24510,22554],{"class":420},[220,24512,4601],{"class":264},[220,24514,22004],{"class":420},[220,24516,1895],{"class":264},[220,24518,21867],{"class":420},[220,24520,4601],{"class":264},[220,24522,21199],{"class":420},[220,24524,1895],{"class":264},[220,24526,23413],{"class":420},[220,24528,4601],{"class":264},[220,24530,24484],{"class":420},[220,24532,1895],{"class":264},[220,24534,23422],{"class":420},[220,24536,4601],{"class":264},[220,24538,24010],{"class":420},[220,24540,1895],{"class":264},[220,24542,23431],{"class":420},[220,24544,4601],{"class":264},[220,24546,8673],{"class":420},[220,24548,5671],{"class":264},[4509,24550],{},[3262,24552,24554,24555],{"id":24553},"prism-prism3d","Prism — ",[99,24556,24557],{},"prism3D",[15,24559,24560],{},"A hexagonal prism.",[1794,24562,24563,24575],{},[1797,24564,24565],{},[1800,24566,24567,24569,24571,24573],{},[1803,24568,17914],{},[1803,24570,15187],{},[1803,24572,15190],{},[1803,24574,1808],{},[1810,24576,24577,24595,24613],{},[1800,24578,24579,24583,24587,24592],{},[1815,24580,24581],{},[99,24582,11683],{},[1815,24584,24585],{},[99,24586,15300],{},[1815,24588,24589],{},[99,24590,24591],{},"0.28",[1815,24593,24594],{},"Hexagon radius",[1800,24596,24597,24601,24605,24610],{},[1815,24598,24599],{},[99,24600,15167],{},[1815,24602,24603],{},[99,24604,15300],{},[1815,24606,24607],{},[99,24608,24609],{},"0.14",[1815,24611,24612],{},"Half-depth of the prism",[1800,24614,24615,24623,24627,24635],{},[1815,24616,24617,15712,24619,15712,24621],{},[99,24618,23183],{},[99,24620,23186],{},[99,24622,23189],{},[1815,24624,24625],{},[99,24626,15300],{},[1815,24628,24629,15282,24631,15282,24633],{},[99,24630,23556],{},[99,24632,24010],{},[99,24634,8673],{},[1815,24636,23384],{},[212,24638,24640],{"className":4564,"code":24639,"language":4566,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24641,24642],{"__ignoreMap":178},[220,24643,24644,24646,24648,24650,24653,24655,24657,24659,24661,24663,24665,24667,24669,24671,24673,24675,24677,24679,24681,24683,24685,24687,24689,24691,24693],{"class":222,"line":223},[220,24645,21740],{"class":264},[220,24647,21743],{"class":420},[220,24649,4601],{"class":264},[220,24651,24652],{"class":230},"\"prism3D\"",[220,24654,1895],{"class":264},[220,24656,21752],{"class":420},[220,24658,4601],{"class":264},[220,24660,24591],{"class":420},[220,24662,1895],{"class":264},[220,24664,21867],{"class":420},[220,24666,4601],{"class":264},[220,24668,24609],{"class":420},[220,24670,1895],{"class":264},[220,24672,23413],{"class":420},[220,24674,4601],{"class":264},[220,24676,23556],{"class":420},[220,24678,1895],{"class":264},[220,24680,23422],{"class":420},[220,24682,4601],{"class":264},[220,24684,24010],{"class":420},[220,24686,1895],{"class":264},[220,24688,23431],{"class":420},[220,24690,4601],{"class":264},[220,24692,8673],{"class":420},[220,24694,5671],{"class":264},[4509,24696],{},[3262,24698,24700,24701],{"id":24699},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,24702,24703],{},"ellipsoid3D",[15,24705,24706],{},"A sphere with three independent radii.",[1794,24708,24709,24721],{},[1797,24710,24711],{},[1800,24712,24713,24715,24717,24719],{},[1803,24714,17914],{},[1803,24716,15187],{},[1803,24718,15190],{},[1803,24720,1808],{},[1810,24722,24723,24742,24760,24778],{},[1800,24724,24725,24730,24734,24739],{},[1815,24726,24727],{},[99,24728,24729],{},"radiusX",[1815,24731,24732],{},[99,24733,15300],{},[1815,24735,24736],{},[99,24737,24738],{},"0.38",[1815,24740,24741],{},"Radius along X",[1800,24743,24744,24749,24753,24757],{},[1815,24745,24746],{},[99,24747,24748],{},"radiusY",[1815,24750,24751],{},[99,24752,15300],{},[1815,24754,24755],{},[99,24756,23949],{},[1815,24758,24759],{},"Radius along Y",[1800,24761,24762,24767,24771,24775],{},[1815,24763,24764],{},[99,24765,24766],{},"radiusZ",[1815,24768,24769],{},[99,24770,15300],{},[1815,24772,24773],{},[99,24774,22004],{},[1815,24776,24777],{},"Radius along Z",[1800,24779,24780,24788,24792,24801],{},[1815,24781,24782,15712,24784,15712,24786],{},[99,24783,23183],{},[99,24785,23186],{},[99,24787,23189],{},[1815,24789,24790],{},[99,24791,15300],{},[1815,24793,24794,15282,24796,15282,24798],{},[99,24795,8673],{},[99,24797,8673],{},[99,24799,24800],{},"20",[1815,24802,23384],{},[212,24804,24806],{"className":4564,"code":24805,"language":4566,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,24807,24808],{"__ignoreMap":178},[220,24809,24810,24812,24814,24816,24819,24821,24824,24826,24828,24830,24833,24835,24837,24839,24842,24844,24846,24848,24850,24852,24854,24856,24858,24860,24862,24864,24866,24868,24870],{"class":222,"line":223},[220,24811,21740],{"class":264},[220,24813,21743],{"class":420},[220,24815,4601],{"class":264},[220,24817,24818],{"class":230},"\"ellipsoid3D\"",[220,24820,1895],{"class":264},[220,24822,24823],{"class":420},"\"radiusX\"",[220,24825,4601],{"class":264},[220,24827,24738],{"class":420},[220,24829,1895],{"class":264},[220,24831,24832],{"class":420},"\"radiusY\"",[220,24834,4601],{"class":264},[220,24836,23949],{"class":420},[220,24838,1895],{"class":264},[220,24840,24841],{"class":420},"\"radiusZ\"",[220,24843,4601],{"class":264},[220,24845,22004],{"class":420},[220,24847,1895],{"class":264},[220,24849,23413],{"class":420},[220,24851,4601],{"class":264},[220,24853,8673],{"class":420},[220,24855,1895],{"class":264},[220,24857,23422],{"class":420},[220,24859,4601],{"class":264},[220,24861,8673],{"class":420},[220,24863,1895],{"class":264},[220,24865,23431],{"class":420},[220,24867,4601],{"class":264},[220,24869,24800],{"class":420},[220,24871,5671],{"class":264},[4509,24873],{},[3262,24875,24877,24878],{"id":24876},"diamond-diamond3d","Diamond — ",[99,24879,24880],{},"diamond3D",[15,24882,24883,24884,24886],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,24885,23172],{}," effect.",[1794,24888,24889,24901],{},[1797,24890,24891],{},[1800,24892,24893,24895,24897,24899],{},[1803,24894,17914],{},[1803,24896,15187],{},[1803,24898,15190],{},[1803,24900,1808],{},[1810,24902,24903,24920,24937],{},[1800,24904,24905,24909,24913,24917],{},[1815,24906,24907],{},[99,24908,11683],{},[1815,24910,24911],{},[99,24912,15300],{},[1815,24914,24915],{},[99,24916,22004],{},[1815,24918,24919],{},"Girdle radius",[1800,24921,24922,24926,24930,24934],{},[1815,24923,24924],{},[99,24925,15167],{},[1815,24927,24928],{},[99,24929,15300],{},[1815,24931,24932],{},[99,24933,23828],{},[1815,24935,24936],{},"Total height (crown + pavilion)",[1800,24938,24939,24947,24951,24959],{},[1815,24940,24941,15712,24943,15712,24945],{},[99,24942,23183],{},[99,24944,23186],{},[99,24946,23189],{},[1815,24948,24949],{},[99,24950,15300],{},[1815,24952,24953,15282,24955,15282,24957],{},[99,24954,24334],{},[99,24956,8673],{},[99,24958,8673],{},[1815,24960,23384],{},[212,24962,24964],{"className":4564,"code":24963,"language":4566,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,24965,24966],{"__ignoreMap":178},[220,24967,24968,24970,24972,24974,24977,24979,24981,24983,24985,24987,24989,24991,24993,24995,24997,24999,25001,25003,25005,25007,25009,25011,25013,25015,25017],{"class":222,"line":223},[220,24969,21740],{"class":264},[220,24971,21743],{"class":420},[220,24973,4601],{"class":264},[220,24975,24976],{"class":230},"\"diamond3D\"",[220,24978,1895],{"class":264},[220,24980,21752],{"class":420},[220,24982,4601],{"class":264},[220,24984,22004],{"class":420},[220,24986,1895],{"class":264},[220,24988,21867],{"class":420},[220,24990,4601],{"class":264},[220,24992,23828],{"class":420},[220,24994,1895],{"class":264},[220,24996,23413],{"class":420},[220,24998,4601],{"class":264},[220,25000,24334],{"class":420},[220,25002,1895],{"class":264},[220,25004,23422],{"class":420},[220,25006,4601],{"class":264},[220,25008,8673],{"class":420},[220,25010,1895],{"class":264},[220,25012,23431],{"class":420},[220,25014,4601],{"class":264},[220,25016,8673],{"class":420},[220,25018,5671],{"class":264},[4509,25020],{},[3262,25022,25024,25025],{"id":25023},"link-link3d","Link — ",[99,25026,25027],{},"link3D",[15,25029,25030],{},"A rounded chain link.",[1794,25032,25033,25045],{},[1797,25034,25035],{},[1800,25036,25037,25039,25041,25043],{},[1803,25038,17914],{},[1803,25040,15187],{},[1803,25042,15190],{},[1803,25044,1808],{},[1810,25046,25047,25065,25082,25098],{},[1800,25048,25049,25053,25057,25062],{},[1815,25050,25051],{},[99,25052,11683],{},[1815,25054,25055],{},[99,25056,15300],{},[1815,25058,25059],{},[99,25060,25061],{},"0.18",[1815,25063,25064],{},"Inner radius of the link's curve",[1800,25066,25067,25072,25076,25080],{},[1815,25068,25069],{},[99,25070,25071],{},"length",[1815,25073,25074],{},[99,25075,15300],{},[1815,25077,25078],{},[99,25079,18192],{},[1815,25081,24141],{},[1800,25083,25084,25088,25092,25096],{},[1815,25085,25086],{},[99,25087,23692],{},[1815,25089,25090],{},[99,25091,15300],{},[1815,25093,25094],{},[99,25095,22396],{},[1815,25097,23703],{},[1800,25099,25100,25108,25112,25120],{},[1815,25101,25102,15712,25104,15712,25106],{},[99,25103,23183],{},[99,25105,23186],{},[99,25107,23189],{},[1815,25109,25110],{},[99,25111,15300],{},[1815,25113,25114,15282,25116,15282,25118],{},[99,25115,24800],{},[99,25117,24010],{},[99,25119,8673],{},[1815,25121,23384],{},[212,25123,25125],{"className":4564,"code":25124,"language":4566,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,25126,25127],{"__ignoreMap":178},[220,25128,25129,25131,25133,25135,25138,25140,25142,25144,25146,25148,25151,25153,25155,25157,25159,25161,25163,25165,25167,25169,25171,25173,25175,25177,25179,25181,25183,25185,25187],{"class":222,"line":223},[220,25130,21740],{"class":264},[220,25132,21743],{"class":420},[220,25134,4601],{"class":264},[220,25136,25137],{"class":230},"\"link3D\"",[220,25139,1895],{"class":264},[220,25141,21752],{"class":420},[220,25143,4601],{"class":264},[220,25145,25061],{"class":420},[220,25147,1895],{"class":264},[220,25149,25150],{"class":420},"\"length\"",[220,25152,4601],{"class":264},[220,25154,18192],{"class":420},[220,25156,1895],{"class":264},[220,25158,23262],{"class":420},[220,25160,4601],{"class":264},[220,25162,22396],{"class":420},[220,25164,1895],{"class":264},[220,25166,23413],{"class":420},[220,25168,4601],{"class":264},[220,25170,24800],{"class":420},[220,25172,1895],{"class":264},[220,25174,23422],{"class":420},[220,25176,4601],{"class":264},[220,25178,24010],{"class":420},[220,25180,1895],{"class":264},[220,25182,23431],{"class":420},[220,25184,4601],{"class":264},[220,25186,8673],{"class":420},[220,25188,5671],{"class":264},[4509,25190],{},[23,25192,25194],{"id":25193},"custom-shapes","Custom shapes",[15,25196,25197],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,25199,25200,25201,25204,25205,25208,25209,25211,25212,25214],{},"To use an SVG shape, set ",[99,25202,25203],{},"shapeSdfUrl"," to the URL of an SDF ",[99,25206,25207],{},".bin"," file. The easiest way to get one is the design editor — upload your SVG there, and the code export includes a ready-to-use hosted ",[99,25210,25207],{}," URL. If you work with the ",[56,25213,4450],{"href":58},", your agent can also generate an SDF from any SVG in your project.",[246,25216,25217,25238,25257,25273,25289],{":tabs":1557},[212,25218,25220],{"className":334,"code":25219,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,25221,25222],{"__ignoreMap":178},[220,25223,25224,25226,25228,25231,25233,25236],{"class":222,"line":223},[220,25225,343],{"class":264},[220,25227,15466],{"class":346},[220,25229,25230],{"class":226}," :shapeSdfUrl",[220,25232,353],{"class":264},[220,25234,25235],{"class":230},"\"myLogoUrl\"",[220,25237,386],{"class":264},[212,25239,25241],{"className":409,"code":25240,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,25242,25243],{"__ignoreMap":178},[220,25244,25245,25247,25249,25252,25254],{"class":222,"line":223},[220,25246,343],{"class":264},[220,25248,15466],{"class":420},[220,25250,25251],{"class":226}," shapeSdfUrl",[220,25253,353],{"class":260},[220,25255,25256],{"class":264},"{myLogoUrl} \u002F>\n",[212,25258,25259],{"className":468,"code":25240,"language":469,"meta":178,"style":178},[99,25260,25261],{"__ignoreMap":178},[220,25262,25263,25265,25267,25269,25271],{"class":222,"line":223},[220,25264,343],{"class":264},[220,25266,15466],{"class":420},[220,25268,25251],{"class":226},[220,25270,353],{"class":260},[220,25272,25256],{"class":264},[212,25274,25275],{"className":468,"code":25240,"language":469,"meta":178,"style":178},[99,25276,25277],{"__ignoreMap":178},[220,25278,25279,25281,25283,25285,25287],{"class":222,"line":223},[220,25280,343],{"class":264},[220,25282,15466],{"class":420},[220,25284,25251],{"class":226},[220,25286,353],{"class":260},[220,25288,25256],{"class":264},[212,25290,25292],{"className":251,"code":25291,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shapeSdfUrl: 'https:\u002F\u002Fexample.com\u002Fmy-logo.bin' } }\n ]\n})\n",[99,25293,25294,25308,25312,25326,25330],{"__ignoreMap":178},[220,25295,25296,25298,25300,25302,25304,25306],{"class":222,"line":223},[220,25297,1735],{"class":260},[220,25299,1738],{"class":420},[220,25301,1741],{"class":260},[220,25303,1744],{"class":260},[220,25305,1747],{"class":226},[220,25307,1750],{"class":264},[220,25309,25310],{"class":222,"line":179},[220,25311,1765],{"class":264},[220,25313,25314,25316,25318,25321,25324],{"class":222,"line":389},[220,25315,1770],{"class":264},[220,25317,21533],{"class":230},[220,25319,25320],{"class":264},", props: { shapeSdfUrl: ",[220,25322,25323],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,25325,1782],{"class":264},[220,25327,25328],{"class":222,"line":399},[220,25329,1787],{"class":264},[220,25331,25332],{"class":222,"line":644},[220,25333,1792],{"class":264},[3262,25335,25337],{"id":25336},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,25339,25340,25341,25343,25344,25346,25347,1550,25349,25352],{},"Custom SVGs aren't limited to flat profiles — they can be extruded into a solid 3D slab with rounded bevels, so volumetric effects (Glass, Neon, Emboss, ThinFilm, Crystal) wrap around your logo as a real object. Alongside ",[99,25342,25203],{},", set the ",[99,25345,20988],{}," config ",[99,25348,21022],{},[99,25350,25351],{},"svgExtrude3D"," and tune the extrusion:",[1794,25354,25355,25367],{},[1797,25356,25357],{},[1800,25358,25359,25361,25363,25365],{},[1803,25360,17914],{},[1803,25362,15187],{},[1803,25364,15190],{},[1803,25366,1808],{},[1810,25368,25369,25387,25405],{},[1800,25370,25371,25376,25380,25384],{},[1815,25372,25373],{},[99,25374,25375],{},"depth",[1815,25377,25378],{},[99,25379,15300],{},[1815,25381,25382],{},[99,25383,18220],{},[1815,25385,25386],{},"Total thickness of the slab along the view axis",[1800,25388,25389,25394,25398,25402],{},[1815,25390,25391],{},[99,25392,25393],{},"bevel",[1815,25395,25396],{},[99,25397,15300],{},[1815,25399,25400],{},[99,25401,19684],{},[1815,25403,25404],{},"Rounded-edge radius on the extruded sides",[1800,25406,25407,25415,25419,25427],{},[1815,25408,25409,15712,25411,15712,25413],{},[99,25410,23183],{},[99,25412,23186],{},[99,25414,23189],{},[1815,25416,25417],{},[99,25418,15300],{},[1815,25420,25421,15282,25423,15282,25425],{},[99,25422,24334],{},[99,25424,24010],{},[99,25426,8673],{},[1815,25428,23384],{},[15,25430,25431,25432,25434,25435,25437],{},"As with the analytic 3D shapes, these sub-props accept ",[56,25433,23222],{"href":17272}," configs (e.g. an ",[99,25436,17361],{}," rotation for a spinning logo).",[246,25439,25440,25476,25549,25611,25673],{":tabs":1557},[212,25441,25443],{"className":334,"code":25442,"language":336,"meta":178,"style":178},"\u003CGlass\n :shapeSdfUrl=\"myLogoUrl\"\n :shape='{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n\u002F>\n",[99,25444,25445,25452,25462,25472],{"__ignoreMap":178},[220,25446,25447,25449],{"class":222,"line":223},[220,25448,343],{"class":264},[220,25450,25451],{"class":346},"Glass\n",[220,25453,25454,25457,25459],{"class":222,"line":179},[220,25455,25456],{"class":226}," :shapeSdfUrl",[220,25458,353],{"class":264},[220,25460,25461],{"class":230},"\"myLogoUrl\"\n",[220,25463,25464,25467,25469],{"class":222,"line":389},[220,25465,25466],{"class":226}," :shape",[220,25468,353],{"class":264},[220,25470,25471],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,25473,25474],{"class":222,"line":399},[220,25475,15803],{"class":264},[212,25477,25479],{"className":409,"code":25478,"language":411,"meta":178,"style":178},"\u003CGlass\n shapeSdfUrl={myLogoUrl}\n shape={JSON.stringify({ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 })}\n\u002F>\n",[99,25480,25481,25487,25497,25545],{"__ignoreMap":178},[220,25482,25483,25485],{"class":222,"line":223},[220,25484,343],{"class":264},[220,25486,25451],{"class":420},[220,25488,25489,25492,25494],{"class":222,"line":179},[220,25490,25491],{"class":226}," shapeSdfUrl",[220,25493,353],{"class":260},[220,25495,25496],{"class":264},"{myLogoUrl}\n",[220,25498,25499,25502,25504,25506,25508,25510,25512,25514,25517,25520,25522,25525,25527,25530,25532,25535,25537,25540,25542],{"class":222,"line":389},[220,25500,25501],{"class":226}," shape",[220,25503,353],{"class":260},[220,25505,743],{"class":264},[220,25507,21132],{"class":420},[220,25509,4836],{"class":264},[220,25511,21137],{"class":226},[220,25513,21140],{"class":264},[220,25515,25516],{"class":230},"\"svgExtrude3D\"",[220,25518,25519],{"class":264},", depth: ",[220,25521,18220],{"class":420},[220,25523,25524],{"class":264},", bevel: ",[220,25526,19684],{"class":420},[220,25528,25529],{"class":264},", rotX: ",[220,25531,24334],{"class":420},[220,25533,25534],{"class":264},", rotY: ",[220,25536,24010],{"class":420},[220,25538,25539],{"class":264},", rotZ: ",[220,25541,8673],{"class":420},[220,25543,25544],{"class":264}," })}\n",[220,25546,25547],{"class":222,"line":399},[220,25548,15803],{"class":264},[212,25550,25551],{"className":468,"code":25478,"language":469,"meta":178,"style":178},[99,25552,25553,25559,25567,25607],{"__ignoreMap":178},[220,25554,25555,25557],{"class":222,"line":223},[220,25556,343],{"class":264},[220,25558,25451],{"class":420},[220,25560,25561,25563,25565],{"class":222,"line":179},[220,25562,25491],{"class":226},[220,25564,353],{"class":260},[220,25566,25496],{"class":264},[220,25568,25569,25571,25573,25575,25577,25579,25581,25583,25585,25587,25589,25591,25593,25595,25597,25599,25601,25603,25605],{"class":222,"line":389},[220,25570,25501],{"class":226},[220,25572,353],{"class":260},[220,25574,743],{"class":264},[220,25576,21132],{"class":420},[220,25578,4836],{"class":264},[220,25580,21137],{"class":226},[220,25582,21140],{"class":264},[220,25584,25516],{"class":230},[220,25586,25519],{"class":264},[220,25588,18220],{"class":420},[220,25590,25524],{"class":264},[220,25592,19684],{"class":420},[220,25594,25529],{"class":264},[220,25596,24334],{"class":420},[220,25598,25534],{"class":264},[220,25600,24010],{"class":420},[220,25602,25539],{"class":264},[220,25604,8673],{"class":420},[220,25606,25544],{"class":264},[220,25608,25609],{"class":222,"line":399},[220,25610,15803],{"class":264},[212,25612,25613],{"className":468,"code":25478,"language":469,"meta":178,"style":178},[99,25614,25615,25621,25629,25669],{"__ignoreMap":178},[220,25616,25617,25619],{"class":222,"line":223},[220,25618,343],{"class":264},[220,25620,25451],{"class":420},[220,25622,25623,25625,25627],{"class":222,"line":179},[220,25624,25491],{"class":226},[220,25626,353],{"class":260},[220,25628,25496],{"class":264},[220,25630,25631,25633,25635,25637,25639,25641,25643,25645,25647,25649,25651,25653,25655,25657,25659,25661,25663,25665,25667],{"class":222,"line":389},[220,25632,25501],{"class":226},[220,25634,353],{"class":260},[220,25636,743],{"class":264},[220,25638,21132],{"class":420},[220,25640,4836],{"class":264},[220,25642,21137],{"class":226},[220,25644,21140],{"class":264},[220,25646,25516],{"class":230},[220,25648,25519],{"class":264},[220,25650,18220],{"class":420},[220,25652,25524],{"class":264},[220,25654,19684],{"class":420},[220,25656,25529],{"class":264},[220,25658,24334],{"class":420},[220,25660,25534],{"class":264},[220,25662,24010],{"class":420},[220,25664,25539],{"class":264},[220,25666,8673],{"class":420},[220,25668,25544],{"class":264},[220,25670,25671],{"class":222,"line":399},[220,25672,15803],{"class":264},[212,25674,25676],{"className":251,"code":25675,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Glass',\n props: {\n shapeSdfUrl: 'https:\u002F\u002Fexample.com\u002Fmy-logo.bin',\n shape: { type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }\n }\n }\n ]\n})\n",[99,25677,25678,25692,25696,25700,25708,25712,25721,25751,25755,25759,25763],{"__ignoreMap":178},[220,25679,25680,25682,25684,25686,25688,25690],{"class":222,"line":223},[220,25681,1735],{"class":260},[220,25683,1738],{"class":420},[220,25685,1741],{"class":260},[220,25687,1744],{"class":260},[220,25689,1747],{"class":226},[220,25691,1750],{"class":264},[220,25693,25694],{"class":222,"line":179},[220,25695,1765],{"class":264},[220,25697,25698],{"class":222,"line":389},[220,25699,16379],{"class":264},[220,25701,25702,25704,25706],{"class":222,"line":399},[220,25703,16384],{"class":264},[220,25705,21533],{"class":230},[220,25707,1760],{"class":264},[220,25709,25710],{"class":222,"line":644},[220,25711,16393],{"class":264},[220,25713,25714,25717,25719],{"class":222,"line":650},[220,25715,25716],{"class":264}," shapeSdfUrl: ",[220,25718,25323],{"class":230},[220,25720,1760],{"class":264},[220,25722,25723,25726,25729,25731,25733,25735,25737,25739,25741,25743,25745,25747,25749],{"class":222,"line":656},[220,25724,25725],{"class":264}," shape: { type: ",[220,25727,25728],{"class":230},"'svgExtrude3D'",[220,25730,25519],{"class":264},[220,25732,18220],{"class":420},[220,25734,25524],{"class":264},[220,25736,19684],{"class":420},[220,25738,25529],{"class":264},[220,25740,24334],{"class":420},[220,25742,25534],{"class":264},[220,25744,24010],{"class":420},[220,25746,25539],{"class":264},[220,25748,8673],{"class":420},[220,25750,5671],{"class":264},[220,25752,25753],{"class":222,"line":673},[220,25754,4929],{"class":264},[220,25756,25757],{"class":222,"line":682},[220,25758,4609],{"class":264},[220,25760,25761],{"class":222,"line":691},[220,25762,1787],{"class":264},[220,25764,25765],{"class":222,"line":696},[220,25766,1792],{"class":264},[15,25768,25769,25770,25772,25773,25775],{},"The easiest way to produce a working extruded logo (SDF ",[99,25771,25207],{}," plus the matching ",[99,25774,20988],{}," config) is to set it up visually in the design editor and use the code export.",[1504,25777,14991],{},{"title":178,"searchDepth":179,"depth":179,"links":25779},[25780,25781,25805,25831],{"id":21013,"depth":179,"text":21014},{"id":21679,"depth":179,"text":21680,"children":25782},[25783,25785,25787,25789,25791,25793,25795,25797,25799,25801,25803],{"id":21691,"depth":389,"text":25784},"Circle — circleSDF",{"id":21763,"depth":389,"text":25786},"Ellipse — ellipseSDF",{"id":21887,"depth":389,"text":25788},"Polygon — polygonSDF",{"id":22038,"depth":389,"text":25790},"Star — starSDF",{"id":22189,"depth":389,"text":25792},"Flower — flowerSDF",{"id":22340,"depth":389,"text":25794},"Ring — ringSDF",{"id":22439,"depth":389,"text":25796},"Cross — crossSDF",{"id":22589,"depth":389,"text":25798},"Rounded Rectangle — roundedRectSDF",{"id":22733,"depth":389,"text":25800},"Vesica — vesicaSDF",{"id":22861,"depth":389,"text":25802},"Crescent — crescentSDF",{"id":23008,"depth":389,"text":25804},"Trapezoid — trapezoidSDF",{"id":23156,"depth":179,"text":23157,"children":25806},[25807,25809,25811,25813,25815,25817,25819,25821,25823,25825,25827,25829],{"id":23324,"depth":389,"text":25808},"Sphere — sphere3D",{"id":23442,"depth":389,"text":25810},"Cube — cube3D",{"id":23645,"depth":389,"text":25812},"Torus — torus3D",{"id":23790,"depth":389,"text":25814},"Octahedron — octahedron3D",{"id":23911,"depth":389,"text":25816},"Cylinder — cylinder3D",{"id":24083,"depth":389,"text":25818},"Capsule — capsule3D",{"id":24228,"depth":389,"text":25820},"Cone — cone3D",{"id":24408,"depth":389,"text":25822},"Pyramid — pyramid3D",{"id":24553,"depth":389,"text":25824},"Prism — prism3D",{"id":24699,"depth":389,"text":25826},"Ellipsoid — ellipsoid3D",{"id":24876,"depth":389,"text":25828},"Diamond — diamond3D",{"id":25023,"depth":389,"text":25830},"Link — link3D",{"id":25193,"depth":179,"text":25194,"children":25832},[25833],{"id":25336,"depth":389,"text":25337},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":20964,"description":25834},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":25842,"title":25843,"body":25844,"category":2240,"description":26198,"exclude":190,"extension":191,"forceFramework":190,"icon":26199,"meta":26200,"navigation":194,"path":26201,"seo":26202,"stem":26203,"__hash__":26204},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":25845,"toc":26192},[25846,25849,25852,25856,25863,25866,25870,25873,25879,25889,25894,25955,25958,25962,25965,25970,25986,25992,26146,26150,26156,26162,26177,26183,26189],[11,25847,25843],{"id":25848},"performance",[15,25850,25851],{},"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,25853,25855],{"id":25854},"the-frame-budget","The frame budget",[15,25857,25858,25859,25862],{},"At 60fps, the GPU has ",[159,25860,25861],{},"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,25864,25865],{},"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,25867,25869],{"id":25868},"generator-vs-filter-effects","Generator vs. filter effects",[15,25871,25872],{},"Effects fall into two broad categories with very different cost profiles:",[15,25874,25875,25878],{},[159,25876,25877],{},"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,25880,25881,25884,25885,25888],{},[159,25882,25883],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,25886,25887],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,25890,25891],{},[159,25892,25893],{},"Rough cost categories:",[1794,25895,25896,25909],{},[1797,25897,25898],{},[1800,25899,25900,25903,25906],{},[1803,25901,25902],{},"Category",[1803,25904,25905],{},"Examples",[1803,25907,25908],{},"Relative cost",[1810,25910,25911,25922,25933,25944],{},[1800,25912,25913,25916,25919],{},[1815,25914,25915],{},"Very light",[1815,25917,25918],{},"SolidColor, LinearGradient, RadialGradient",[1815,25920,25921],{},"~0–0.1ms",[1800,25923,25924,25927,25930],{},[1815,25925,25926],{},"Light",[1815,25928,25929],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,25931,25932],{},"~0.1–0.5ms",[1800,25934,25935,25938,25941],{},[1815,25936,25937],{},"Medium",[1815,25939,25940],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,25942,25943],{},"~0.5–2ms",[1800,25945,25946,25949,25952],{},[1815,25947,25948],{},"Heavy",[1815,25950,25951],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,25953,25954],{},"~1-2ms+",[15,25956,25957],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,25959,25961],{"id":25960},"render-to-texture-rtt","Render-to-texture (RTT)",[15,25963,25964],{},"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,25966,25967],{},[159,25968,25969],{},"What triggers RTT:",[34,25971,25972,25975,25983],{},[37,25973,25974],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,25976,1839,25977,15712,25979,25982],{},[99,25978,19414],{},[56,25980,25981],{"href":17272},"Prop Driver"," on any component (the source layer is RTT'd)",[37,25984,25985],{},"The masking system when a layer is used as a mask source",[15,25987,25988,25991],{},[159,25989,25990],{},"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:",[212,25993,25995],{"className":334,"code":25994,"language":336,"meta":178,"style":178},"\u003C!-- Avoid: three RTT passes in series -->\n\u003CShader>\n \u003CLinearGradient \u002F>\n \u003CGlassTiles>\n \u003CGlass>\n \u003CBlur :radius=\"20\">\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n \u003C\u002FGlass>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n\n\u003C!-- Better: fewer RTT boundaries -->\n\u003CShader>\n \u003CLinearGradient \u002F>\n \u003CGlassTiles>\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,25996,25997,26002,26010,26018,26026,26034,26049,26057,26065,26073,26081,26089,26093,26098,26106,26114,26122,26130,26138],{"__ignoreMap":178},[220,25998,25999],{"class":222,"line":223},[220,26000,26001],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,26003,26004,26006,26008],{"class":222,"line":179},[220,26005,343],{"class":264},[220,26007,347],{"class":346},[220,26009,359],{"class":264},[220,26011,26012,26014,26016],{"class":222,"line":389},[220,26013,364],{"class":264},[220,26015,367],{"class":346},[220,26017,386],{"class":264},[220,26019,26020,26022,26024],{"class":222,"line":399},[220,26021,364],{"class":264},[220,26023,6225],{"class":346},[220,26025,359],{"class":264},[220,26027,26028,26030,26032],{"class":222,"line":644},[220,26029,2550],{"class":264},[220,26031,15466],{"class":346},[220,26033,359],{"class":264},[220,26035,26036,26038,26040,26042,26044,26047],{"class":222,"line":650},[220,26037,2813],{"class":264},[220,26039,11769],{"class":346},[220,26041,17328],{"class":226},[220,26043,353],{"class":264},[220,26045,26046],{"class":230},"\"20\"",[220,26048,359],{"class":264},[220,26050,26051,26053,26055],{"class":222,"line":656},[220,26052,10809],{"class":264},[220,26054,2553],{"class":346},[220,26056,386],{"class":264},[220,26058,26059,26061,26063],{"class":222,"line":673},[220,26060,10914],{"class":264},[220,26062,11769],{"class":346},[220,26064,359],{"class":264},[220,26066,26067,26069,26071],{"class":222,"line":682},[220,26068,2828],{"class":264},[220,26070,15466],{"class":346},[220,26072,359],{"class":264},[220,26074,26075,26077,26079],{"class":222,"line":691},[220,26076,2567],{"class":264},[220,26078,6225],{"class":346},[220,26080,359],{"class":264},[220,26082,26083,26085,26087],{"class":222,"line":696},[220,26084,402],{"class":264},[220,26086,347],{"class":346},[220,26088,359],{"class":264},[220,26090,26091],{"class":222,"line":702},[220,26092,647],{"emptyLinePlaceholder":194},[220,26094,26095],{"class":222,"line":718},[220,26096,26097],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,26099,26100,26102,26104],{"class":222,"line":727},[220,26101,343],{"class":264},[220,26103,347],{"class":346},[220,26105,359],{"class":264},[220,26107,26108,26110,26112],{"class":222,"line":2664},[220,26109,364],{"class":264},[220,26111,367],{"class":346},[220,26113,386],{"class":264},[220,26115,26116,26118,26120],{"class":222,"line":3522},[220,26117,364],{"class":264},[220,26119,6225],{"class":346},[220,26121,359],{"class":264},[220,26123,26124,26126,26128],{"class":222,"line":9662},[220,26125,2550],{"class":264},[220,26127,2553],{"class":346},[220,26129,386],{"class":264},[220,26131,26132,26134,26136],{"class":222,"line":9673},[220,26133,2567],{"class":264},[220,26135,6225],{"class":346},[220,26137,359],{"class":264},[220,26139,26140,26142,26144],{"class":222,"line":9678},[220,26141,402],{"class":264},[220,26143,347],{"class":346},[220,26145,359],{"class":264},[23,26147,26149],{"id":26148},"practical-tips","Practical tips",[15,26151,26152,26155],{},[159,26153,26154],{},"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,26157,26158,26161],{},[159,26159,26160],{},"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,26163,26164,26167,26168,26170,26171,26173,26174,26176],{},[159,26165,26166],{},"Invisible layers still cost."," A hidden layer with ",[99,26169,9045],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,26172,8673],{}," still renders the layer. Use ",[99,26175,9045],{}," to truly exclude layers you don't need.",[15,26178,26179,26182],{},[159,26180,26181],{},"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,26184,26185,26188],{},[159,26186,26187],{},"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.",[1504,26190,26191],{},"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":178,"searchDepth":179,"depth":179,"links":26193},[26194,26195,26196,26197],{"id":25854,"depth":179,"text":25855},{"id":25868,"depth":179,"text":25869},{"id":25960,"depth":179,"text":25961},{"id":26148,"depth":179,"text":26149},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":25843,"description":26198},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":26206,"title":201,"body":26207,"category":188,"description":26834,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26835,"navigation":194,"path":26836,"seo":26837,"stem":26838,"__hash__":26839},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":26208,"toc":26824},[26209,26213,26216,26220,26232,26236,26242,26273,26275,26282,26376,26378,26384,26386,26394,26496,26503,26526,26528,26535,26627,26631,26640,26759,26766,26772,26776,26783,26797,26800,26802,26821],[11,26210,26212],{"id":26211},"quickstart-javascript","Quickstart (JavaScript)",[15,26214,26215],{},"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,26217,26219],{"id":26218},"install-the-npm-package","Install the npm package",[212,26221,26222],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26223,26224],{"__ignoreMap":178},[220,26225,26226,26228,26230],{"class":222,"line":223},[220,26227,227],{"class":226},[220,26229,231],{"class":230},[220,26231,234],{"class":230},[23,26233,26235],{"id":26234},"set-up-a-canvas","Set up a canvas",[15,26237,26238,26239,26241],{},"Create a ",[99,26240,586],{}," element in your HTML and give it a size:",[212,26243,26245],{"className":12879,"code":26244,"language":12881,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,26246,26247],{"__ignoreMap":178},[220,26248,26249,26251,26253,26255,26257,26260,26262,26264,26267,26269,26271],{"class":222,"line":223},[220,26250,343],{"class":264},[220,26252,12890],{"class":346},[220,26254,9100],{"class":226},[220,26256,353],{"class":264},[220,26258,26259],{"class":230},"\"my-shader\"",[220,26261,663],{"class":226},[220,26263,353],{"class":264},[220,26265,26266],{"class":230},"\"width: 100%; height: 400px;\"",[220,26268,3804],{"class":264},[220,26270,12890],{"class":346},[220,26272,359],{"class":264},[23,26274,323],{"id":322},[15,26276,26277,26278,26281],{},"Import ",[99,26279,26280],{},"createShader",", pass it the canvas and a list of components:",[212,26283,26285],{"className":251,"code":26284,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,26286,26287,26297,26301,26319,26323,26337,26341,26359,26368,26372],{"__ignoreMap":178},[220,26288,26289,26291,26293,26295],{"class":222,"line":223},[220,26290,261],{"class":260},[220,26292,11512],{"class":264},[220,26294,268],{"class":260},[220,26296,4007],{"class":230},[220,26298,26299],{"class":222,"line":179},[220,26300,647],{"emptyLinePlaceholder":194},[220,26302,26303,26305,26307,26309,26311,26313,26315,26317],{"class":222,"line":389},[220,26304,1735],{"class":260},[220,26306,3133],{"class":420},[220,26308,1741],{"class":260},[220,26310,3138],{"class":264},[220,26312,3141],{"class":226},[220,26314,2626],{"class":264},[220,26316,12525],{"class":230},[220,26318,2632],{"class":264},[220,26320,26321],{"class":222,"line":399},[220,26322,647],{"emptyLinePlaceholder":194},[220,26324,26325,26327,26329,26331,26333,26335],{"class":222,"line":644},[220,26326,1735],{"class":260},[220,26328,1738],{"class":420},[220,26330,1741],{"class":260},[220,26332,1744],{"class":260},[220,26334,1747],{"class":226},[220,26336,1750],{"class":264},[220,26338,26339],{"class":222,"line":650},[220,26340,1765],{"class":264},[220,26342,26343,26345,26347,26349,26352,26354,26357],{"class":222,"line":656},[220,26344,1770],{"class":264},[220,26346,2462],{"class":230},[220,26348,10166],{"class":264},[220,26350,26351],{"class":230},"'#0f172a'",[220,26353,10172],{"class":264},[220,26355,26356],{"class":230},"'#7c3aed'",[220,26358,6571],{"class":264},[220,26360,26361,26363,26366],{"class":222,"line":673},[220,26362,1770],{"class":264},[220,26364,26365],{"class":230},"'CursorTrail'",[220,26367,2465],{"class":264},[220,26369,26370],{"class":222,"line":682},[220,26371,1787],{"class":264},[220,26373,26374],{"class":222,"line":691},[220,26375,1792],{"class":264},[19,26377],{":preset":578},[15,26379,1839,26380,26383],{},[99,26381,26382],{},"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,26385,594],{"id":593},[15,26387,1839,26388,26390,26391,1554],{},[99,26389,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,26392,26393],{},"ResizeObserver",[212,26395,26397],{"className":12879,"code":26396,"language":12881,"meta":178,"style":178},"\u003C!-- Fixed size -->\n\u003Ccanvas id=\"shader\" style=\"width: 600px; height: 400px;\">\u003C\u002Fcanvas>\n\n\u003C!-- Full viewport -->\n\u003Ccanvas id=\"shader\" style=\"width: 100vw; height: 100dvh;\">\u003C\u002Fcanvas>\n\n\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n\u003Ccanvas id=\"shader\" class=\"w-full aspect-video\">\u003C\u002Fcanvas>\n",[99,26398,26399,26404,26429,26433,26438,26463,26467,26472],{"__ignoreMap":178},[220,26400,26401],{"class":222,"line":223},[220,26402,26403],{"class":609},"\u003C!-- Fixed size -->\n",[220,26405,26406,26408,26410,26412,26414,26417,26419,26421,26423,26425,26427],{"class":222,"line":179},[220,26407,343],{"class":264},[220,26409,12890],{"class":346},[220,26411,9100],{"class":226},[220,26413,353],{"class":264},[220,26415,26416],{"class":230},"\"shader\"",[220,26418,663],{"class":226},[220,26420,353],{"class":264},[220,26422,668],{"class":230},[220,26424,3804],{"class":264},[220,26426,12890],{"class":346},[220,26428,359],{"class":264},[220,26430,26431],{"class":222,"line":389},[220,26432,647],{"emptyLinePlaceholder":194},[220,26434,26435],{"class":222,"line":399},[220,26436,26437],{"class":609},"\u003C!-- Full viewport -->\n",[220,26439,26440,26442,26444,26446,26448,26450,26452,26454,26457,26459,26461],{"class":222,"line":644},[220,26441,343],{"class":264},[220,26443,12890],{"class":346},[220,26445,9100],{"class":226},[220,26447,353],{"class":264},[220,26449,26416],{"class":230},[220,26451,663],{"class":226},[220,26453,353],{"class":264},[220,26455,26456],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,26458,3804],{"class":264},[220,26460,12890],{"class":346},[220,26462,359],{"class":264},[220,26464,26465],{"class":222,"line":650},[220,26466,647],{"emptyLinePlaceholder":194},[220,26468,26469],{"class":222,"line":656},[220,26470,26471],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,26473,26474,26476,26478,26480,26482,26484,26486,26488,26490,26492,26494],{"class":222,"line":673},[220,26475,343],{"class":264},[220,26477,12890],{"class":346},[220,26479,9100],{"class":226},[220,26481,353],{"class":264},[220,26483,26416],{"class":230},[220,26485,350],{"class":226},[220,26487,353],{"class":264},[220,26489,713],{"class":230},[220,26491,3804],{"class":264},[220,26493,12890],{"class":346},[220,26495,359],{"class":264},[15,26497,26498,26499,26502],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,26500,26501],{},"shader.resize()"," to sync:",[212,26504,26506],{"className":251,"code":26505,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,26507,26508,26517],{"__ignoreMap":178},[220,26509,26510,26512,26514],{"class":222,"line":223},[220,26511,12542],{"class":264},[220,26513,353],{"class":260},[220,26515,26516],{"class":230}," '600px'\n",[220,26518,26519,26521,26524],{"class":222,"line":179},[220,26520,11602],{"class":264},[220,26522,26523],{"class":226},"resize",[220,26525,4032],{"class":264},[23,26527,1153],{"id":1152},[15,26529,26530,26531,26534],{},"Props are passed in the ",[99,26532,26533],{},"props"," object for each component. All prop names are camelCase:",[212,26536,26538],{"className":251,"code":26537,"language":253,"meta":178,"style":178},"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",[99,26539,26540,26554,26558,26562,26570,26574,26584,26594,26603,26611,26615,26619,26623],{"__ignoreMap":178},[220,26541,26542,26544,26546,26548,26550,26552],{"class":222,"line":223},[220,26543,1735],{"class":260},[220,26545,1738],{"class":420},[220,26547,1741],{"class":260},[220,26549,1744],{"class":260},[220,26551,1747],{"class":226},[220,26553,1750],{"class":264},[220,26555,26556],{"class":222,"line":179},[220,26557,1765],{"class":264},[220,26559,26560],{"class":222,"line":389},[220,26561,16379],{"class":264},[220,26563,26564,26566,26568],{"class":222,"line":399},[220,26565,16384],{"class":264},[220,26567,2462],{"class":230},[220,26569,1760],{"class":264},[220,26571,26572],{"class":222,"line":644},[220,26573,16393],{"class":264},[220,26575,26576,26579,26582],{"class":222,"line":650},[220,26577,26578],{"class":264}," colorA: ",[220,26580,26581],{"class":230},"'#ff6b6b'",[220,26583,1760],{"class":264},[220,26585,26586,26589,26592],{"class":222,"line":656},[220,26587,26588],{"class":264}," colorB: ",[220,26590,26591],{"class":230},"'#4ecdc4'",[220,26593,1760],{"class":264},[220,26595,26596,26599,26601],{"class":222,"line":673},[220,26597,26598],{"class":264}," angle: ",[220,26600,1295],{"class":420},[220,26602,1760],{"class":264},[220,26604,26605,26608],{"class":222,"line":682},[220,26606,26607],{"class":264}," colorSpace: ",[220,26609,26610],{"class":230},"'oklch'\n",[220,26612,26613],{"class":222,"line":691},[220,26614,4929],{"class":264},[220,26616,26617],{"class":222,"line":696},[220,26618,4609],{"class":264},[220,26620,26621],{"class":222,"line":702},[220,26622,1787],{"class":264},[220,26624,26625],{"class":222,"line":718},[220,26626,1792],{"class":264},[23,26628,26630],{"id":26629},"updating-at-runtime","Updating at runtime",[15,26632,26633,26634,26636,26637,26639],{},"Assign an ",[99,26635,9056],{}," to any component, then use ",[99,26638,20796],{}," to change its props at any time:",[212,26641,26643],{"className":251,"code":26642,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', id: 'gradient', props: { colorA: '#0f172a', colorB: '#7c3aed', angle: 0 } }\n ]\n})\n\n\u002F\u002F Hook up a slider\ndocument.querySelector('#angle-slider').addEventListener('input', e => {\n shader.update('gradient', { angle: Number(e.target.value) })\n})\n",[99,26644,26645,26659,26663,26688,26692,26696,26700,26705,26737,26755],{"__ignoreMap":178},[220,26646,26647,26649,26651,26653,26655,26657],{"class":222,"line":223},[220,26648,1735],{"class":260},[220,26650,1738],{"class":420},[220,26652,1741],{"class":260},[220,26654,1744],{"class":260},[220,26656,1747],{"class":226},[220,26658,1750],{"class":264},[220,26660,26661],{"class":222,"line":179},[220,26662,1765],{"class":264},[220,26664,26665,26667,26669,26671,26673,26675,26677,26679,26681,26684,26686],{"class":222,"line":389},[220,26666,1770],{"class":264},[220,26668,2462],{"class":230},[220,26670,3209],{"class":264},[220,26672,11569],{"class":230},[220,26674,10166],{"class":264},[220,26676,26351],{"class":230},[220,26678,10172],{"class":264},[220,26680,26356],{"class":230},[220,26682,26683],{"class":264},", angle: ",[220,26685,8673],{"class":420},[220,26687,1782],{"class":264},[220,26689,26690],{"class":222,"line":399},[220,26691,1787],{"class":264},[220,26693,26694],{"class":222,"line":644},[220,26695,1792],{"class":264},[220,26697,26698],{"class":222,"line":650},[220,26699,647],{"emptyLinePlaceholder":194},[220,26701,26702],{"class":222,"line":656},[220,26703,26704],{"class":609},"\u002F\u002F Hook up a slider\n",[220,26706,26707,26710,26713,26715,26718,26720,26723,26725,26728,26730,26733,26735],{"class":222,"line":673},[220,26708,26709],{"class":264},"document.",[220,26711,26712],{"class":226},"querySelector",[220,26714,2626],{"class":264},[220,26716,26717],{"class":230},"'#angle-slider'",[220,26719,15437],{"class":264},[220,26721,26722],{"class":226},"addEventListener",[220,26724,2626],{"class":264},[220,26726,26727],{"class":230},"'input'",[220,26729,1895],{"class":264},[220,26731,26732],{"class":3621},"e",[220,26734,10830],{"class":260},[220,26736,3241],{"class":264},[220,26738,26739,26741,26743,26745,26747,26749,26752],{"class":222,"line":682},[220,26740,17167],{"class":264},[220,26742,11605],{"class":226},[220,26744,2626],{"class":264},[220,26746,11569],{"class":230},[220,26748,11612],{"class":264},[220,26750,26751],{"class":226},"Number",[220,26753,26754],{"class":264},"(e.target.value) })\n",[220,26756,26757],{"class":222,"line":691},[220,26758,1792],{"class":264},[15,26760,26761,26762,26765],{},"When ",[99,26763,26764],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26767,26768,26769,26771],{},"Browse the ",[56,26770,1160],{"href":1159}," for the full prop reference on every component.",[23,26773,26775],{"id":26774},"cleanup","Cleanup",[15,26777,26778,26779,26782],{},"When you're done, call ",[99,26780,26781],{},"destroy()"," to free GPU resources:",[212,26784,26786],{"className":251,"code":26785,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,26787,26788],{"__ignoreMap":178},[220,26789,26790,26792,26795],{"class":222,"line":223},[220,26791,11602],{"class":264},[220,26793,26794],{"class":226},"destroy",[220,26796,4032],{"class":264},[15,26798,26799],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,26801,1474],{"id":1473},[34,26803,26804,26808,26812,26817],{},[37,26805,26806,1483],{},[56,26807,1482],{"href":1481},[37,26809,26810,1490],{},[56,26811,1489],{"href":1488},[37,26813,26814,26816],{},[56,26815,17298],{"href":17272}," — animate and mouse-track props declaratively",[37,26818,26819,1502],{},[56,26820,1160],{"href":1159},[1504,26822,26823],{},"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":178,"searchDepth":179,"depth":179,"links":26825},[26826,26827,26828,26829,26830,26831,26832,26833],{"id":26218,"depth":179,"text":26219},{"id":26234,"depth":179,"text":26235},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":26629,"depth":179,"text":26630},{"id":26774,"depth":179,"text":26775},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":26834},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":26841,"title":201,"body":26842,"category":188,"description":27476,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":27477,"navigation":194,"path":27478,"seo":27479,"stem":27480,"__hash__":27481},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":26843,"toc":27467},[26844,26848,26852,26854,26866,26870,26884,26886,26889,26943,26945,26952,26954,26967,27101,27115,27117,27120,27192,27199,27427,27432,27436,27440,27448,27450,27464],[11,26845,26847],{"id":26846},"quickstart-react","Quickstart (React)",[26849,26850],"you-tube-embed",{"id":26851},"G7kzM8M7hA4",[23,26853,26219],{"id":26218},[212,26855,26856],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26857,26858],{"__ignoreMap":178},[220,26859,26860,26862,26864],{"class":222,"line":223},[220,26861,227],{"class":226},[220,26863,231],{"class":230},[220,26865,234],{"class":230},[23,26867,26869],{"id":26868},"import-some-components","Import some components",[212,26871,26872],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,26873,26874],{"__ignoreMap":178},[220,26875,26876,26878,26880,26882],{"class":222,"line":223},[220,26877,261],{"class":260},[220,26879,265],{"class":264},[220,26881,268],{"class":260},[220,26883,287],{"class":230},[23,26885,323],{"id":322},[15,26887,26888],{},"Let's create a very simple shader:",[212,26890,26891],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,26892,26893,26907,26927,26935],{"__ignoreMap":178},[220,26894,26895,26897,26899,26901,26903,26905],{"class":222,"line":223},[220,26896,343],{"class":264},[220,26898,347],{"class":420},[220,26900,423],{"class":226},[220,26902,353],{"class":260},[220,26904,356],{"class":230},[220,26906,359],{"class":264},[220,26908,26909,26911,26913,26915,26917,26919,26921,26923,26925],{"class":222,"line":179},[220,26910,364],{"class":264},[220,26912,367],{"class":420},[220,26914,370],{"class":226},[220,26916,353],{"class":260},[220,26918,375],{"class":230},[220,26920,378],{"class":226},[220,26922,353],{"class":260},[220,26924,383],{"class":230},[220,26926,386],{"class":264},[220,26928,26929,26931,26933],{"class":222,"line":389},[220,26930,364],{"class":264},[220,26932,394],{"class":420},[220,26934,386],{"class":264},[220,26936,26937,26939,26941],{"class":222,"line":399},[220,26938,402],{"class":264},[220,26940,347],{"class":420},[220,26942,359],{"class":264},[19,26944],{":preset":578},[15,26946,26947,583,26949,26951],{},[99,26948,101],{},[99,26950,586],{}," 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,26953,594],{"id":593},[15,26955,1839,26956,26958,26959,18745,26962,26964,26965,590],{},[99,26957,586],{}," has no intrinsic size. The ",[99,26960,26961],{},"className",[99,26963,1504],{}," you apply to ",[99,26966,101],{},[212,26968,26970],{"className":409,"code":26969,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fluid with aspect ratio *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,26971,26972,26980,26994,27002,27010,27014,27022,27042,27050,27058,27062,27071,27085,27093],{"__ignoreMap":178},[220,26973,26974,26976,26978],{"class":222,"line":223},[220,26975,743],{"class":264},[220,26977,746],{"class":609},[220,26979,749],{"class":264},[220,26981,26982,26984,26986,26988,26990,26992],{"class":222,"line":179},[220,26983,343],{"class":264},[220,26985,347],{"class":420},[220,26987,423],{"class":226},[220,26989,353],{"class":260},[220,26991,623],{"class":230},[220,26993,359],{"class":264},[220,26995,26996,26998,27000],{"class":222,"line":389},[220,26997,364],{"class":264},[220,26999,367],{"class":420},[220,27001,386],{"class":264},[220,27003,27004,27006,27008],{"class":222,"line":399},[220,27005,402],{"class":264},[220,27007,347],{"class":420},[220,27009,359],{"class":264},[220,27011,27012],{"class":222,"line":644},[220,27013,647],{"emptyLinePlaceholder":194},[220,27015,27016,27018,27020],{"class":222,"line":650},[220,27017,743],{"class":264},[220,27019,790],{"class":609},[220,27021,749],{"class":264},[220,27023,27024,27026,27028,27030,27032,27034,27036,27038,27040],{"class":222,"line":656},[220,27025,343],{"class":264},[220,27027,347],{"class":420},[220,27029,663],{"class":226},[220,27031,353],{"class":260},[220,27033,805],{"class":264},[220,27035,808],{"class":230},[220,27037,811],{"class":264},[220,27039,814],{"class":230},[220,27041,817],{"class":264},[220,27043,27044,27046,27048],{"class":222,"line":673},[220,27045,364],{"class":264},[220,27047,367],{"class":420},[220,27049,386],{"class":264},[220,27051,27052,27054,27056],{"class":222,"line":682},[220,27053,402],{"class":264},[220,27055,347],{"class":420},[220,27057,359],{"class":264},[220,27059,27060],{"class":222,"line":691},[220,27061,647],{"emptyLinePlaceholder":194},[220,27063,27064,27066,27069],{"class":222,"line":696},[220,27065,743],{"class":264},[220,27067,27068],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,27070,749],{"class":264},[220,27072,27073,27075,27077,27079,27081,27083],{"class":222,"line":702},[220,27074,343],{"class":264},[220,27076,347],{"class":420},[220,27078,423],{"class":226},[220,27080,353],{"class":260},[220,27082,713],{"class":230},[220,27084,359],{"class":264},[220,27086,27087,27089,27091],{"class":222,"line":718},[220,27088,364],{"class":264},[220,27090,367],{"class":420},[220,27092,386],{"class":264},[220,27094,27095,27097,27099],{"class":222,"line":727},[220,27096,402],{"class":264},[220,27098,347],{"class":420},[220,27100,359],{"class":264},[15,27102,27103,27104,18745,27106,27108,27109,27111,27112,27114],{},"Applying a ",[99,27105,26961],{},[99,27107,1504],{}," to the ",[99,27110,101],{}," tag is preferred over trying to target the ",[99,27113,586],{}," element directly, as the internal DOM structure may change in the future.",[23,27116,1153],{"id":1152},[15,27118,27119],{},"Pass props directly to configure each component. All props use camelCase:",[212,27121,27122],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,27123,27124,27138,27144,27152,27160,27172,27180,27184],{"__ignoreMap":178},[220,27125,27126,27128,27130,27132,27134,27136],{"class":222,"line":223},[220,27127,343],{"class":264},[220,27129,347],{"class":420},[220,27131,423],{"class":226},[220,27133,353],{"class":260},[220,27135,356],{"class":230},[220,27137,359],{"class":264},[220,27139,27140,27142],{"class":222,"line":179},[220,27141,364],{"class":264},[220,27143,1189],{"class":420},[220,27145,27146,27148,27150],{"class":222,"line":389},[220,27147,1194],{"class":226},[220,27149,353],{"class":260},[220,27151,1199],{"class":230},[220,27153,27154,27156,27158],{"class":222,"line":399},[220,27155,1204],{"class":226},[220,27157,353],{"class":260},[220,27159,1209],{"class":230},[220,27161,27162,27164,27166,27168,27170],{"class":222,"line":644},[220,27163,1288],{"class":226},[220,27165,353],{"class":260},[220,27167,743],{"class":264},[220,27169,1295],{"class":420},[220,27171,749],{"class":264},[220,27173,27174,27176,27178],{"class":222,"line":650},[220,27175,1302],{"class":226},[220,27177,353],{"class":260},[220,27179,1229],{"class":230},[220,27181,27182],{"class":222,"line":656},[220,27183,1234],{"class":264},[220,27185,27186,27188,27190],{"class":222,"line":673},[220,27187,402],{"class":264},[220,27189,347],{"class":420},[220,27191,359],{"class":264},[15,27193,27194,27195,27198],{},"Props also accept state — ",[99,27196,27197],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,27200,27202],{"className":409,"code":27201,"language":411,"meta":178,"style":178},"import { useState } from 'react'\nimport { Shader, LinearGradient } from 'shaders\u002Freact'\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} \u002F>\n \u003C\u002FShader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle}\n onChange={e => setAngle(Number(e.target.value))}\n \u002F>\n \u003C\u002F>\n )\n}\n",[99,27203,27204,27214,27225,27229,27244,27268,27272,27278,27282,27296,27323,27331,27335,27342,27352,27365,27379,27389,27411,27415,27419,27423],{"__ignoreMap":178},[220,27205,27206,27208,27210,27212],{"class":222,"line":223},[220,27207,261],{"class":260},[220,27209,2682],{"class":264},[220,27211,268],{"class":260},[220,27213,2687],{"class":230},[220,27215,27216,27218,27221,27223],{"class":222,"line":179},[220,27217,261],{"class":260},[220,27219,27220],{"class":264}," { Shader, LinearGradient } ",[220,27222,268],{"class":260},[220,27224,287],{"class":230},[220,27226,27227],{"class":222,"line":389},[220,27228,647],{"emptyLinePlaceholder":194},[220,27230,27231,27234,27237,27239,27242],{"class":222,"line":399},[220,27232,27233],{"class":260},"export",[220,27235,27236],{"class":260}," default",[220,27238,11941],{"class":260},[220,27240,27241],{"class":226}," MyShader",[220,27243,2647],{"class":264},[220,27245,27246,27248,27250,27252,27254,27256,27258,27260,27262,27264,27266],{"class":222,"line":644},[220,27247,2705],{"class":260},[220,27249,2708],{"class":264},[220,27251,10764],{"class":420},[220,27253,1895],{"class":264},[220,27255,10769],{"class":420},[220,27257,2719],{"class":264},[220,27259,353],{"class":260},[220,27261,2724],{"class":226},[220,27263,2626],{"class":264},[220,27265,8673],{"class":420},[220,27267,2632],{"class":264},[220,27269,27270],{"class":222,"line":650},[220,27271,647],{"emptyLinePlaceholder":194},[220,27273,27274,27276],{"class":222,"line":656},[220,27275,2739],{"class":260},[220,27277,2742],{"class":264},[220,27279,27280],{"class":222,"line":673},[220,27281,10796],{"class":264},[220,27283,27284,27286,27288,27290,27292,27294],{"class":222,"line":682},[220,27285,2813],{"class":264},[220,27287,347],{"class":420},[220,27289,423],{"class":226},[220,27291,353],{"class":260},[220,27293,356],{"class":230},[220,27295,359],{"class":264},[220,27297,27298,27300,27302,27304,27306,27309,27311,27313,27316,27318,27320],{"class":222,"line":691},[220,27299,10809],{"class":264},[220,27301,367],{"class":420},[220,27303,370],{"class":226},[220,27305,353],{"class":260},[220,27307,27308],{"class":230},"\"#ff6b6b\"",[220,27310,378],{"class":226},[220,27312,353],{"class":260},[220,27314,27315],{"class":230},"\"#4ecdc4\"",[220,27317,10532],{"class":226},[220,27319,353],{"class":260},[220,27321,27322],{"class":264},"{angle} \u002F>\n",[220,27324,27325,27327,27329],{"class":222,"line":696},[220,27326,10914],{"class":264},[220,27328,347],{"class":420},[220,27330,359],{"class":264},[220,27332,27333],{"class":222,"line":702},[220,27334,647],{"emptyLinePlaceholder":194},[220,27336,27337,27339],{"class":222,"line":718},[220,27338,2813],{"class":264},[220,27340,27341],{"class":346},"input\n",[220,27343,27344,27347,27349],{"class":222,"line":727},[220,27345,27346],{"class":226}," type",[220,27348,353],{"class":260},[220,27350,27351],{"class":230},"\"range\"\n",[220,27353,27354,27357,27359,27361,27363],{"class":222,"line":2664},[220,27355,27356],{"class":226}," min",[220,27358,353],{"class":260},[220,27360,743],{"class":264},[220,27362,8673],{"class":420},[220,27364,749],{"class":264},[220,27366,27367,27370,27372,27374,27377],{"class":222,"line":3522},[220,27368,27369],{"class":226}," max",[220,27371,353],{"class":260},[220,27373,743],{"class":264},[220,27375,27376],{"class":420},"360",[220,27378,749],{"class":264},[220,27380,27381,27384,27386],{"class":222,"line":9662},[220,27382,27383],{"class":226}," value",[220,27385,353],{"class":260},[220,27387,27388],{"class":264},"{angle}\n",[220,27390,27391,27394,27396,27398,27400,27402,27404,27406,27408],{"class":222,"line":9673},[220,27392,27393],{"class":226}," onChange",[220,27395,353],{"class":260},[220,27397,743],{"class":264},[220,27399,26732],{"class":3621},[220,27401,10830],{"class":260},[220,27403,10823],{"class":226},[220,27405,2626],{"class":264},[220,27407,26751],{"class":226},[220,27409,27410],{"class":264},"(e.target.value))}\n",[220,27412,27413],{"class":222,"line":9678},[220,27414,17037],{"class":264},[220,27416,27417],{"class":222,"line":10999},[220,27418,10996],{"class":264},[220,27420,27421],{"class":222,"line":11004},[220,27422,2837],{"class":264},[220,27424,27425],{"class":222,"line":12075},[220,27426,749],{"class":264},[15,27428,26761,27429,27431],{},[99,27430,10764],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,27433,26768,27434,26771],{},[56,27435,1160],{"href":1159},[23,27437,27439],{"id":27438},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,27441,27442,27443,27447],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,27444,27446],{"href":27445},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,27449,1474],{"id":1473},[34,27451,27452,27456,27460],{},[37,27453,27454,1483],{},[56,27455,1482],{"href":1481},[37,27457,27458,1490],{},[56,27459,1489],{"href":1488},[37,27461,27462,1502],{},[56,27463,1160],{"href":1159},[1504,27465,27466],{},"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":178,"searchDepth":179,"depth":179,"links":27468},[27469,27470,27471,27472,27473,27474,27475],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":27438,"depth":179,"text":27439},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":27476},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":27483,"title":27446,"body":27484,"category":2240,"description":28373,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":28375,"navigation":194,"path":27445,"seo":28376,"stem":28377,"__hash__":28378},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":27485,"toc":28364},[27486,27490,27493,27500,27503,27612,27615,27705,27710,27720,27726,27851,27854,27858,27864,27982,27986,27989,28096,28187,28191,28194,28361],[11,27487,27489],{"id":27488},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,27491,27492],{},"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,27494,27496,27497],{"id":27495},"app-router-use-client","App Router: ",[99,27498,27499],{},"'use client'",[15,27501,27502],{},"In Next.js App Router, create a client component wrapper:",[212,27504,27506],{"className":409,"code":27505,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FMyShader.jsx\n'use client'\n\nimport { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n\nexport default function MyShader() {\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,27507,27508,27513,27518,27522,27532,27536,27548,27554,27568,27588,27596,27604,27608],{"__ignoreMap":178},[220,27509,27510],{"class":222,"line":223},[220,27511,27512],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,27514,27515],{"class":222,"line":179},[220,27516,27517],{"class":230},"'use client'\n",[220,27519,27520],{"class":222,"line":389},[220,27521,647],{"emptyLinePlaceholder":194},[220,27523,27524,27526,27528,27530],{"class":222,"line":399},[220,27525,261],{"class":260},[220,27527,265],{"class":264},[220,27529,268],{"class":260},[220,27531,287],{"class":230},[220,27533,27534],{"class":222,"line":644},[220,27535,647],{"emptyLinePlaceholder":194},[220,27537,27538,27540,27542,27544,27546],{"class":222,"line":650},[220,27539,27233],{"class":260},[220,27541,27236],{"class":260},[220,27543,11941],{"class":260},[220,27545,27241],{"class":226},[220,27547,2647],{"class":264},[220,27549,27550,27552],{"class":222,"line":656},[220,27551,2739],{"class":260},[220,27553,2742],{"class":264},[220,27555,27556,27558,27560,27562,27564,27566],{"class":222,"line":673},[220,27557,2550],{"class":264},[220,27559,347],{"class":420},[220,27561,423],{"class":226},[220,27563,353],{"class":260},[220,27565,356],{"class":230},[220,27567,359],{"class":264},[220,27569,27570,27572,27574,27576,27578,27580,27582,27584,27586],{"class":222,"line":682},[220,27571,2813],{"class":264},[220,27573,367],{"class":420},[220,27575,370],{"class":226},[220,27577,353],{"class":260},[220,27579,375],{"class":230},[220,27581,378],{"class":226},[220,27583,353],{"class":260},[220,27585,383],{"class":230},[220,27587,386],{"class":264},[220,27589,27590,27592,27594],{"class":222,"line":691},[220,27591,2813],{"class":264},[220,27593,394],{"class":420},[220,27595,386],{"class":264},[220,27597,27598,27600,27602],{"class":222,"line":696},[220,27599,2828],{"class":264},[220,27601,347],{"class":420},[220,27603,359],{"class":264},[220,27605,27606],{"class":222,"line":702},[220,27607,2837],{"class":264},[220,27609,27610],{"class":222,"line":718},[220,27611,749],{"class":264},[15,27613,27614],{},"Then use it in a Server Component:",[212,27616,27618],{"className":409,"code":27617,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Fpage.jsx (Server Component)\nimport MyShader from '@\u002Fcomponents\u002FMyShader'\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003Ch1>Your content\u003C\u002Fh1>\n \u003C\u002Fmain>\n )\n}\n",[99,27619,27620,27625,27637,27641,27654,27660,27668,27677,27689,27697,27701],{"__ignoreMap":178},[220,27621,27622],{"class":222,"line":223},[220,27623,27624],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,27626,27627,27629,27632,27634],{"class":222,"line":179},[220,27628,261],{"class":260},[220,27630,27631],{"class":264}," MyShader ",[220,27633,268],{"class":260},[220,27635,27636],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,27638,27639],{"class":222,"line":389},[220,27640,647],{"emptyLinePlaceholder":194},[220,27642,27643,27645,27647,27649,27652],{"class":222,"line":399},[220,27644,27233],{"class":260},[220,27646,27236],{"class":260},[220,27648,11941],{"class":260},[220,27650,27651],{"class":226}," Page",[220,27653,2647],{"class":264},[220,27655,27656,27658],{"class":222,"line":644},[220,27657,2739],{"class":260},[220,27659,2742],{"class":264},[220,27661,27662,27664,27666],{"class":222,"line":650},[220,27663,2550],{"class":264},[220,27665,12638],{"class":346},[220,27667,359],{"class":264},[220,27669,27670,27672,27675],{"class":222,"line":656},[220,27671,2813],{"class":264},[220,27673,27674],{"class":420},"MyShader",[220,27676,386],{"class":264},[220,27678,27679,27681,27683,27685,27687],{"class":222,"line":673},[220,27680,2813],{"class":264},[220,27682,11],{"class":346},[220,27684,12926],{"class":264},[220,27686,11],{"class":346},[220,27688,359],{"class":264},[220,27690,27691,27693,27695],{"class":222,"line":682},[220,27692,2828],{"class":264},[220,27694,12638],{"class":346},[220,27696,359],{"class":264},[220,27698,27699],{"class":222,"line":691},[220,27700,2837],{"class":264},[220,27702,27703],{"class":222,"line":696},[220,27704,749],{"class":264},[15,27706,1839,27707,27709],{},[99,27708,27499],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,27711,27496,27713,27716,27717],{"id":27712},"app-router-nextdynamic-with-ssr-false",[99,27714,27715],{},"next\u002Fdynamic"," with ",[99,27718,27719],{},"ssr: false",[15,27721,27722,27723,27725],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,27724,27715],{}," to disable SSR:",[212,27727,27729],{"className":409,"code":27728,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Fpage.jsx\nimport dynamic from 'next\u002Fdynamic'\n\nconst MyShader = dynamic(\n () => import('@\u002Fcomponents\u002FMyShader'),\n { ssr: false }\n)\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003C\u002Fmain>\n )\n}\n",[99,27730,27731,27736,27748,27752,27766,27784,27793,27797,27801,27813,27819,27827,27835,27843,27847],{"__ignoreMap":178},[220,27732,27733],{"class":222,"line":223},[220,27734,27735],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,27737,27738,27740,27743,27745],{"class":222,"line":179},[220,27739,261],{"class":260},[220,27741,27742],{"class":264}," dynamic ",[220,27744,268],{"class":260},[220,27746,27747],{"class":230}," 'next\u002Fdynamic'\n",[220,27749,27750],{"class":222,"line":389},[220,27751,647],{"emptyLinePlaceholder":194},[220,27753,27754,27756,27758,27760,27763],{"class":222,"line":399},[220,27755,1735],{"class":260},[220,27757,27241],{"class":420},[220,27759,1741],{"class":260},[220,27761,27762],{"class":226}," dynamic",[220,27764,27765],{"class":264},"(\n",[220,27767,27768,27771,27773,27776,27778,27781],{"class":222,"line":644},[220,27769,27770],{"class":264}," () ",[220,27772,2762],{"class":260},[220,27774,27775],{"class":260}," import",[220,27777,2626],{"class":264},[220,27779,27780],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,27782,27783],{"class":264},"),\n",[220,27785,27786,27789,27791],{"class":222,"line":650},[220,27787,27788],{"class":264}," { ssr: ",[220,27790,2629],{"class":420},[220,27792,5671],{"class":264},[220,27794,27795],{"class":222,"line":656},[220,27796,2632],{"class":264},[220,27798,27799],{"class":222,"line":673},[220,27800,647],{"emptyLinePlaceholder":194},[220,27802,27803,27805,27807,27809,27811],{"class":222,"line":682},[220,27804,27233],{"class":260},[220,27806,27236],{"class":260},[220,27808,11941],{"class":260},[220,27810,27651],{"class":226},[220,27812,2647],{"class":264},[220,27814,27815,27817],{"class":222,"line":691},[220,27816,2739],{"class":260},[220,27818,2742],{"class":264},[220,27820,27821,27823,27825],{"class":222,"line":696},[220,27822,2550],{"class":264},[220,27824,12638],{"class":346},[220,27826,359],{"class":264},[220,27828,27829,27831,27833],{"class":222,"line":702},[220,27830,2813],{"class":264},[220,27832,27674],{"class":420},[220,27834,386],{"class":264},[220,27836,27837,27839,27841],{"class":222,"line":718},[220,27838,2828],{"class":264},[220,27840,12638],{"class":346},[220,27842,359],{"class":264},[220,27844,27845],{"class":222,"line":727},[220,27846,2837],{"class":264},[220,27848,27849],{"class":222,"line":2664},[220,27850,749],{"class":264},[15,27852,27853],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,27855,27857],{"id":27856},"pages-router","Pages Router",[15,27859,27860,27861,27863],{},"In the Pages Router, the same ",[99,27862,27715],{}," approach works:",[212,27865,27867],{"className":409,"code":27866,"language":411,"meta":178,"style":178},"\u002F\u002F pages\u002Findex.jsx\nimport dynamic from 'next\u002Fdynamic'\n\nconst MyShader = dynamic(\n () => import('..\u002Fcomponents\u002FMyShader'),\n { ssr: false }\n)\n\nexport default function Home() {\n return (\n \u003Cdiv>\n \u003CMyShader \u002F>\n \u003C\u002Fdiv>\n )\n}\n",[99,27868,27869,27874,27884,27888,27900,27915,27923,27927,27931,27944,27950,27958,27966,27974,27978],{"__ignoreMap":178},[220,27870,27871],{"class":222,"line":223},[220,27872,27873],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,27875,27876,27878,27880,27882],{"class":222,"line":179},[220,27877,261],{"class":260},[220,27879,27742],{"class":264},[220,27881,268],{"class":260},[220,27883,27747],{"class":230},[220,27885,27886],{"class":222,"line":389},[220,27887,647],{"emptyLinePlaceholder":194},[220,27889,27890,27892,27894,27896,27898],{"class":222,"line":399},[220,27891,1735],{"class":260},[220,27893,27241],{"class":420},[220,27895,1741],{"class":260},[220,27897,27762],{"class":226},[220,27899,27765],{"class":264},[220,27901,27902,27904,27906,27908,27910,27913],{"class":222,"line":644},[220,27903,27770],{"class":264},[220,27905,2762],{"class":260},[220,27907,27775],{"class":260},[220,27909,2626],{"class":264},[220,27911,27912],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,27914,27783],{"class":264},[220,27916,27917,27919,27921],{"class":222,"line":650},[220,27918,27788],{"class":264},[220,27920,2629],{"class":420},[220,27922,5671],{"class":264},[220,27924,27925],{"class":222,"line":656},[220,27926,2632],{"class":264},[220,27928,27929],{"class":222,"line":673},[220,27930,647],{"emptyLinePlaceholder":194},[220,27932,27933,27935,27937,27939,27942],{"class":222,"line":682},[220,27934,27233],{"class":260},[220,27936,27236],{"class":260},[220,27938,11941],{"class":260},[220,27940,27941],{"class":226}," Home",[220,27943,2647],{"class":264},[220,27945,27946,27948],{"class":222,"line":691},[220,27947,2739],{"class":260},[220,27949,2742],{"class":264},[220,27951,27952,27954,27956],{"class":222,"line":696},[220,27953,2550],{"class":264},[220,27955,3398],{"class":346},[220,27957,359],{"class":264},[220,27959,27960,27962,27964],{"class":222,"line":702},[220,27961,2813],{"class":264},[220,27963,27674],{"class":420},[220,27965,386],{"class":264},[220,27967,27968,27970,27972],{"class":222,"line":718},[220,27969,2828],{"class":264},[220,27971,3398],{"class":346},[220,27973,359],{"class":264},[220,27975,27976],{"class":222,"line":727},[220,27977,2837],{"class":264},[220,27979,27980],{"class":222,"line":2664},[220,27981,749],{"class":264},[23,27983,27985],{"id":27984},"in-a-root-layout","In a root layout",[15,27987,27988],{},"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:",[212,27990,27992],{"className":409,"code":27991,"language":411,"meta":178,"style":178},"\u002F\u002F app\u002Flayout.jsx\nimport BackgroundShader from '@\u002Fcomponents\u002FBackgroundShader'\n\nexport default function RootLayout({ children }) {\n return (\n \u003Chtml>\n \u003Cbody>\n \u003CBackgroundShader \u002F>\n {children}\n \u003C\u002Fbody>\n \u003C\u002Fhtml>\n )\n}\n",[99,27993,27994,27999,28011,28015,28035,28041,28049,28058,28067,28072,28080,28088,28092],{"__ignoreMap":178},[220,27995,27996],{"class":222,"line":223},[220,27997,27998],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,28000,28001,28003,28006,28008],{"class":222,"line":179},[220,28002,261],{"class":260},[220,28004,28005],{"class":264}," BackgroundShader ",[220,28007,268],{"class":260},[220,28009,28010],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,28012,28013],{"class":222,"line":389},[220,28014,647],{"emptyLinePlaceholder":194},[220,28016,28017,28019,28021,28023,28026,28029,28032],{"class":222,"line":399},[220,28018,27233],{"class":260},[220,28020,27236],{"class":260},[220,28022,11941],{"class":260},[220,28024,28025],{"class":226}," RootLayout",[220,28027,28028],{"class":264},"({ ",[220,28030,28031],{"class":3621},"children",[220,28033,28034],{"class":264}," }) {\n",[220,28036,28037,28039],{"class":222,"line":644},[220,28038,2739],{"class":260},[220,28040,2742],{"class":264},[220,28042,28043,28045,28047],{"class":222,"line":650},[220,28044,2550],{"class":264},[220,28046,12881],{"class":346},[220,28048,359],{"class":264},[220,28050,28051,28053,28056],{"class":222,"line":656},[220,28052,2813],{"class":264},[220,28054,28055],{"class":346},"body",[220,28057,359],{"class":264},[220,28059,28060,28062,28065],{"class":222,"line":673},[220,28061,10809],{"class":264},[220,28063,28064],{"class":420},"BackgroundShader",[220,28066,386],{"class":264},[220,28068,28069],{"class":222,"line":682},[220,28070,28071],{"class":264}," {children}\n",[220,28073,28074,28076,28078],{"class":222,"line":691},[220,28075,10914],{"class":264},[220,28077,28055],{"class":346},[220,28079,359],{"class":264},[220,28081,28082,28084,28086],{"class":222,"line":696},[220,28083,2828],{"class":264},[220,28085,12881],{"class":346},[220,28087,359],{"class":264},[220,28089,28090],{"class":222,"line":702},[220,28091,2837],{"class":264},[220,28093,28094],{"class":222,"line":718},[220,28095,749],{"class":264},[212,28097,28099],{"className":409,"code":28098,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FBackgroundShader.jsx\n'use client'\n\nimport { Shader, Aurora } from 'shaders\u002Freact'\n\nexport default function BackgroundShader() {\n return (\n \u003CShader className=\"fixed inset-0 -z-10 pointer-events-none\">\n \u003CAurora \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,28100,28101,28106,28110,28114,28125,28129,28142,28148,28163,28171,28179,28183],{"__ignoreMap":178},[220,28102,28103],{"class":222,"line":223},[220,28104,28105],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,28107,28108],{"class":222,"line":179},[220,28109,27517],{"class":230},[220,28111,28112],{"class":222,"line":389},[220,28113,647],{"emptyLinePlaceholder":194},[220,28115,28116,28118,28121,28123],{"class":222,"line":399},[220,28117,261],{"class":260},[220,28119,28120],{"class":264}," { Shader, Aurora } ",[220,28122,268],{"class":260},[220,28124,287],{"class":230},[220,28126,28127],{"class":222,"line":644},[220,28128,647],{"emptyLinePlaceholder":194},[220,28130,28131,28133,28135,28137,28140],{"class":222,"line":650},[220,28132,27233],{"class":260},[220,28134,27236],{"class":260},[220,28136,11941],{"class":260},[220,28138,28139],{"class":226}," BackgroundShader",[220,28141,2647],{"class":264},[220,28143,28144,28146],{"class":222,"line":656},[220,28145,2739],{"class":260},[220,28147,2742],{"class":264},[220,28149,28150,28152,28154,28156,28158,28161],{"class":222,"line":673},[220,28151,2550],{"class":264},[220,28153,347],{"class":420},[220,28155,423],{"class":226},[220,28157,353],{"class":260},[220,28159,28160],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,28162,359],{"class":264},[220,28164,28165,28167,28169],{"class":222,"line":682},[220,28166,2813],{"class":264},[220,28168,12617],{"class":420},[220,28170,386],{"class":264},[220,28172,28173,28175,28177],{"class":222,"line":691},[220,28174,2828],{"class":264},[220,28176,347],{"class":420},[220,28178,359],{"class":264},[220,28180,28181],{"class":222,"line":696},[220,28182,2837],{"class":264},[220,28184,28185],{"class":222,"line":702},[220,28186,749],{"class":264},[23,28188,28190],{"id":28189},"react-without-nextjs","React (without Next.js)",[15,28192,28193],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,28195,28197],{"className":409,"code":28196,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, LinearGradient } from 'shaders\u002Freact'\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 \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,28198,28199,28209,28219,28223,28235,28261,28265,28275,28286,28290,28294,28313,28317,28323,28337,28345,28353,28357],{"__ignoreMap":178},[220,28200,28201,28203,28205,28207],{"class":222,"line":223},[220,28202,261],{"class":260},[220,28204,3540],{"class":264},[220,28206,268],{"class":260},[220,28208,2687],{"class":230},[220,28210,28211,28213,28215,28217],{"class":222,"line":179},[220,28212,261],{"class":260},[220,28214,27220],{"class":264},[220,28216,268],{"class":260},[220,28218,287],{"class":230},[220,28220,28221],{"class":222,"line":389},[220,28222,647],{"emptyLinePlaceholder":194},[220,28224,28225,28227,28229,28231,28233],{"class":222,"line":399},[220,28226,27233],{"class":260},[220,28228,27236],{"class":260},[220,28230,11941],{"class":260},[220,28232,27241],{"class":226},[220,28234,2647],{"class":264},[220,28236,28237,28239,28241,28244,28246,28249,28251,28253,28255,28257,28259],{"class":222,"line":644},[220,28238,2705],{"class":260},[220,28240,2708],{"class":264},[220,28242,28243],{"class":420},"mounted",[220,28245,1895],{"class":264},[220,28247,28248],{"class":420},"setMounted",[220,28250,2719],{"class":264},[220,28252,353],{"class":260},[220,28254,2724],{"class":226},[220,28256,2626],{"class":264},[220,28258,2629],{"class":420},[220,28260,2632],{"class":264},[220,28262,28263],{"class":222,"line":650},[220,28264,647],{"emptyLinePlaceholder":194},[220,28266,28267,28269,28271,28273],{"class":222,"line":656},[220,28268,3597],{"class":226},[220,28270,3600],{"class":264},[220,28272,2762],{"class":260},[220,28274,3241],{"class":264},[220,28276,28277,28280,28282,28284],{"class":222,"line":673},[220,28278,28279],{"class":226}," setMounted",[220,28281,2626],{"class":264},[220,28283,2332],{"class":420},[220,28285,2632],{"class":264},[220,28287,28288],{"class":222,"line":682},[220,28289,3637],{"class":264},[220,28291,28292],{"class":222,"line":691},[220,28293,647],{"emptyLinePlaceholder":194},[220,28295,28296,28299,28301,28304,28307,28310],{"class":222,"line":696},[220,28297,28298],{"class":260}," if",[220,28300,3506],{"class":264},[220,28302,28303],{"class":260},"!",[220,28305,28306],{"class":264},"mounted) ",[220,28308,28309],{"class":260},"return",[220,28311,28312],{"class":420}," null\n",[220,28314,28315],{"class":222,"line":702},[220,28316,647],{"emptyLinePlaceholder":194},[220,28318,28319,28321],{"class":222,"line":718},[220,28320,2739],{"class":260},[220,28322,2742],{"class":264},[220,28324,28325,28327,28329,28331,28333,28335],{"class":222,"line":727},[220,28326,2550],{"class":264},[220,28328,347],{"class":420},[220,28330,423],{"class":226},[220,28332,353],{"class":260},[220,28334,356],{"class":230},[220,28336,359],{"class":264},[220,28338,28339,28341,28343],{"class":222,"line":2664},[220,28340,2813],{"class":264},[220,28342,367],{"class":420},[220,28344,386],{"class":264},[220,28346,28347,28349,28351],{"class":222,"line":3522},[220,28348,2828],{"class":264},[220,28350,347],{"class":420},[220,28352,359],{"class":264},[220,28354,28355],{"class":222,"line":9662},[220,28356,2837],{"class":264},[220,28358,28359],{"class":222,"line":9673},[220,28360,749],{"class":264},[1504,28362,28363],{},"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":178,"searchDepth":179,"depth":179,"links":28365},[28366,28368,28370,28371,28372],{"id":27495,"depth":179,"text":28367},"App Router: 'use client'",{"id":27712,"depth":179,"text":28369},"App Router: next\u002Fdynamic with ssr: false",{"id":27856,"depth":179,"text":27857},{"id":27984,"depth":179,"text":27985},{"id":28189,"depth":179,"text":28190},"Using Shaders in Next.js and React SSR applications","server",{},{"title":27446,"description":28373},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":28380,"title":201,"body":28381,"category":188,"description":28990,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28991,"navigation":194,"path":28992,"seo":28993,"stem":28994,"__hash__":28995},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":28382,"toc":28981},[28383,28387,28389,28401,28403,28417,28419,28421,28475,28477,28483,28485,28496,28629,28639,28641,28644,28716,28723,28946,28949,28953,28957,28963,28965,28979],[11,28384,28386],{"id":28385},"quickstart-solid","Quickstart (Solid)",[23,28388,26219],{"id":26218},[212,28390,28391],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28392,28393],{"__ignoreMap":178},[220,28394,28395,28397,28399],{"class":222,"line":223},[220,28396,227],{"class":226},[220,28398,231],{"class":230},[220,28400,234],{"class":230},[23,28402,26869],{"id":26868},[212,28404,28405],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,28406,28407],{"__ignoreMap":178},[220,28408,28409,28411,28413,28415],{"class":222,"line":223},[220,28410,261],{"class":260},[220,28412,265],{"class":264},[220,28414,268],{"class":260},[220,28416,319],{"class":230},[23,28418,323],{"id":322},[15,28420,26888],{},[212,28422,28423],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,28424,28425,28439,28459,28467],{"__ignoreMap":178},[220,28426,28427,28429,28431,28433,28435,28437],{"class":222,"line":223},[220,28428,343],{"class":264},[220,28430,347],{"class":420},[220,28432,350],{"class":226},[220,28434,353],{"class":260},[220,28436,356],{"class":230},[220,28438,359],{"class":264},[220,28440,28441,28443,28445,28447,28449,28451,28453,28455,28457],{"class":222,"line":179},[220,28442,364],{"class":264},[220,28444,367],{"class":420},[220,28446,370],{"class":226},[220,28448,353],{"class":260},[220,28450,375],{"class":230},[220,28452,378],{"class":226},[220,28454,353],{"class":260},[220,28456,383],{"class":230},[220,28458,386],{"class":264},[220,28460,28461,28463,28465],{"class":222,"line":389},[220,28462,364],{"class":264},[220,28464,394],{"class":420},[220,28466,386],{"class":264},[220,28468,28469,28471,28473],{"class":222,"line":399},[220,28470,402],{"class":264},[220,28472,347],{"class":420},[220,28474,359],{"class":264},[19,28476],{":preset":578},[15,28478,28479,583,28481,26951],{},[99,28480,101],{},[99,28482,586],{},[23,28484,594],{"id":593},[15,28486,1839,28487,26958,28489,18745,28492,26964,28494,590],{},[99,28488,586],{},[99,28490,28491],{},"class",[99,28493,1504],{},[99,28495,101],{},[212,28497,28499],{"className":468,"code":28498,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fluid with aspect ratio *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,28500,28501,28509,28523,28531,28539,28543,28551,28571,28579,28587,28591,28599,28613,28621],{"__ignoreMap":178},[220,28502,28503,28505,28507],{"class":222,"line":223},[220,28504,743],{"class":264},[220,28506,746],{"class":609},[220,28508,749],{"class":264},[220,28510,28511,28513,28515,28517,28519,28521],{"class":222,"line":179},[220,28512,343],{"class":264},[220,28514,347],{"class":420},[220,28516,350],{"class":226},[220,28518,353],{"class":260},[220,28520,623],{"class":230},[220,28522,359],{"class":264},[220,28524,28525,28527,28529],{"class":222,"line":389},[220,28526,364],{"class":264},[220,28528,367],{"class":420},[220,28530,386],{"class":264},[220,28532,28533,28535,28537],{"class":222,"line":399},[220,28534,402],{"class":264},[220,28536,347],{"class":420},[220,28538,359],{"class":264},[220,28540,28541],{"class":222,"line":644},[220,28542,647],{"emptyLinePlaceholder":194},[220,28544,28545,28547,28549],{"class":222,"line":650},[220,28546,743],{"class":264},[220,28548,790],{"class":609},[220,28550,749],{"class":264},[220,28552,28553,28555,28557,28559,28561,28563,28565,28567,28569],{"class":222,"line":656},[220,28554,343],{"class":264},[220,28556,347],{"class":420},[220,28558,663],{"class":226},[220,28560,353],{"class":260},[220,28562,805],{"class":264},[220,28564,808],{"class":230},[220,28566,811],{"class":264},[220,28568,814],{"class":230},[220,28570,817],{"class":264},[220,28572,28573,28575,28577],{"class":222,"line":673},[220,28574,364],{"class":264},[220,28576,367],{"class":420},[220,28578,386],{"class":264},[220,28580,28581,28583,28585],{"class":222,"line":682},[220,28582,402],{"class":264},[220,28584,347],{"class":420},[220,28586,359],{"class":264},[220,28588,28589],{"class":222,"line":691},[220,28590,647],{"emptyLinePlaceholder":194},[220,28592,28593,28595,28597],{"class":222,"line":696},[220,28594,743],{"class":264},[220,28596,27068],{"class":609},[220,28598,749],{"class":264},[220,28600,28601,28603,28605,28607,28609,28611],{"class":222,"line":702},[220,28602,343],{"class":264},[220,28604,347],{"class":420},[220,28606,350],{"class":226},[220,28608,353],{"class":260},[220,28610,713],{"class":230},[220,28612,359],{"class":264},[220,28614,28615,28617,28619],{"class":222,"line":718},[220,28616,364],{"class":264},[220,28618,367],{"class":420},[220,28620,386],{"class":264},[220,28622,28623,28625,28627],{"class":222,"line":727},[220,28624,402],{"class":264},[220,28626,347],{"class":420},[220,28628,359],{"class":264},[15,28630,27103,28631,18745,28633,27108,28635,27111,28637,27114],{},[99,28632,28491],{},[99,28634,1504],{},[99,28636,101],{},[99,28638,586],{},[23,28640,1153],{"id":1152},[15,28642,28643],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,28645,28646],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,28647,28648,28662,28668,28676,28684,28696,28704,28708],{"__ignoreMap":178},[220,28649,28650,28652,28654,28656,28658,28660],{"class":222,"line":223},[220,28651,343],{"class":264},[220,28653,347],{"class":420},[220,28655,350],{"class":226},[220,28657,353],{"class":260},[220,28659,356],{"class":230},[220,28661,359],{"class":264},[220,28663,28664,28666],{"class":222,"line":179},[220,28665,364],{"class":264},[220,28667,1189],{"class":420},[220,28669,28670,28672,28674],{"class":222,"line":389},[220,28671,1194],{"class":226},[220,28673,353],{"class":260},[220,28675,1199],{"class":230},[220,28677,28678,28680,28682],{"class":222,"line":399},[220,28679,1204],{"class":226},[220,28681,353],{"class":260},[220,28683,1209],{"class":230},[220,28685,28686,28688,28690,28692,28694],{"class":222,"line":644},[220,28687,1288],{"class":226},[220,28689,353],{"class":260},[220,28691,743],{"class":264},[220,28693,1295],{"class":420},[220,28695,749],{"class":264},[220,28697,28698,28700,28702],{"class":222,"line":650},[220,28699,1302],{"class":226},[220,28701,353],{"class":260},[220,28703,1229],{"class":230},[220,28705,28706],{"class":222,"line":656},[220,28707,1234],{"class":264},[220,28709,28710,28712,28714],{"class":222,"line":673},[220,28711,402],{"class":264},[220,28713,347],{"class":420},[220,28715,359],{"class":264},[15,28717,28718,28719,28722],{},"Props also accept signals — ",[99,28720,28721],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,28724,28726],{"className":468,"code":28725,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\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()} \u002F>\n \u003C\u002FShader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle()}\n onInput={e => setAngle(Number(e.currentTarget.value))}\n \u002F>\n \u003C\u002F>\n )\n}\n",[99,28727,28728,28738,28748,28752,28764,28788,28792,28798,28802,28816,28845,28853,28857,28863,28871,28883,28895,28908,28930,28934,28938,28942],{"__ignoreMap":178},[220,28729,28730,28732,28734,28736],{"class":222,"line":223},[220,28731,261],{"class":260},[220,28733,2982],{"class":264},[220,28735,268],{"class":260},[220,28737,2987],{"class":230},[220,28739,28740,28742,28744,28746],{"class":222,"line":179},[220,28741,261],{"class":260},[220,28743,27220],{"class":264},[220,28745,268],{"class":260},[220,28747,319],{"class":230},[220,28749,28750],{"class":222,"line":389},[220,28751,647],{"emptyLinePlaceholder":194},[220,28753,28754,28756,28758,28760,28762],{"class":222,"line":399},[220,28755,27233],{"class":260},[220,28757,27236],{"class":260},[220,28759,11941],{"class":260},[220,28761,27241],{"class":226},[220,28763,2647],{"class":264},[220,28765,28766,28768,28770,28772,28774,28776,28778,28780,28782,28784,28786],{"class":222,"line":644},[220,28767,2705],{"class":260},[220,28769,2708],{"class":264},[220,28771,10764],{"class":420},[220,28773,1895],{"class":264},[220,28775,10769],{"class":420},[220,28777,2719],{"class":264},[220,28779,353],{"class":260},[220,28781,3018],{"class":226},[220,28783,2626],{"class":264},[220,28785,8673],{"class":420},[220,28787,2632],{"class":264},[220,28789,28790],{"class":222,"line":650},[220,28791,647],{"emptyLinePlaceholder":194},[220,28793,28794,28796],{"class":222,"line":656},[220,28795,2739],{"class":260},[220,28797,2742],{"class":264},[220,28799,28800],{"class":222,"line":673},[220,28801,10796],{"class":264},[220,28803,28804,28806,28808,28810,28812,28814],{"class":222,"line":682},[220,28805,2813],{"class":264},[220,28807,347],{"class":420},[220,28809,350],{"class":226},[220,28811,353],{"class":260},[220,28813,356],{"class":230},[220,28815,359],{"class":264},[220,28817,28818,28820,28822,28824,28826,28828,28830,28832,28834,28836,28838,28840,28842],{"class":222,"line":691},[220,28819,10809],{"class":264},[220,28821,367],{"class":420},[220,28823,370],{"class":226},[220,28825,353],{"class":260},[220,28827,27308],{"class":230},[220,28829,378],{"class":226},[220,28831,353],{"class":260},[220,28833,27315],{"class":230},[220,28835,10532],{"class":226},[220,28837,353],{"class":260},[220,28839,743],{"class":264},[220,28841,10764],{"class":226},[220,28843,28844],{"class":264},"()} \u002F>\n",[220,28846,28847,28849,28851],{"class":222,"line":696},[220,28848,10914],{"class":264},[220,28850,347],{"class":420},[220,28852,359],{"class":264},[220,28854,28855],{"class":222,"line":702},[220,28856,647],{"emptyLinePlaceholder":194},[220,28858,28859,28861],{"class":222,"line":718},[220,28860,2813],{"class":264},[220,28862,27341],{"class":346},[220,28864,28865,28867,28869],{"class":222,"line":727},[220,28866,27346],{"class":226},[220,28868,353],{"class":260},[220,28870,27351],{"class":230},[220,28872,28873,28875,28877,28879,28881],{"class":222,"line":2664},[220,28874,27356],{"class":226},[220,28876,353],{"class":260},[220,28878,743],{"class":264},[220,28880,8673],{"class":420},[220,28882,749],{"class":264},[220,28884,28885,28887,28889,28891,28893],{"class":222,"line":3522},[220,28886,27369],{"class":226},[220,28888,353],{"class":260},[220,28890,743],{"class":264},[220,28892,27376],{"class":420},[220,28894,749],{"class":264},[220,28896,28897,28899,28901,28903,28905],{"class":222,"line":9662},[220,28898,27383],{"class":226},[220,28900,353],{"class":260},[220,28902,743],{"class":264},[220,28904,10764],{"class":226},[220,28906,28907],{"class":264},"()}\n",[220,28909,28910,28913,28915,28917,28919,28921,28923,28925,28927],{"class":222,"line":9673},[220,28911,28912],{"class":226}," onInput",[220,28914,353],{"class":260},[220,28916,743],{"class":264},[220,28918,26732],{"class":3621},[220,28920,10830],{"class":260},[220,28922,10823],{"class":226},[220,28924,2626],{"class":264},[220,28926,26751],{"class":226},[220,28928,28929],{"class":264},"(e.currentTarget.value))}\n",[220,28931,28932],{"class":222,"line":9678},[220,28933,17037],{"class":264},[220,28935,28936],{"class":222,"line":10999},[220,28937,10996],{"class":264},[220,28939,28940],{"class":222,"line":11004},[220,28941,2837],{"class":264},[220,28943,28944],{"class":222,"line":12075},[220,28945,749],{"class":264},[15,28947,28948],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,28950,26768,28951,26771],{},[56,28952,1160],{"href":1159},[23,28954,28956],{"id":28955},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,28958,27442,28959,27447],{},[56,28960,28962],{"href":28961},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,28964,1474],{"id":1473},[34,28966,28967,28971,28975],{},[37,28968,28969,1483],{},[56,28970,1482],{"href":1481},[37,28972,28973,1490],{},[56,28974,1489],{"href":1488},[37,28976,28977,1502],{},[56,28978,1160],{"href":1159},[1504,28980,27466],{},{"title":178,"searchDepth":179,"depth":179,"links":28982},[28983,28984,28985,28986,28987,28988,28989],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28955,"depth":179,"text":28956},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":28990},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":28997,"title":28962,"body":28998,"category":2240,"description":29569,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":29570,"navigation":194,"path":28961,"seo":29571,"stem":29572,"__hash__":29573},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":28999,"toc":29560},[29000,29004,29007,29014,29020,29111,29227,29239,29246,29255,29357,29363,29369,29547,29551,29557],[11,29001,29003],{"id":29002},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,29005,29006],{},"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,29008,29010,29013],{"id":29009},"clientonly-solidstart",[99,29011,29012],{},"clientOnly"," (SolidStart)",[15,29015,29016,29017,29019],{},"SolidStart provides a ",[99,29018,29012],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,29021,29023],{"className":409,"code":29022,"language":411,"meta":178,"style":178},"\u002F\u002F components\u002FMyShader.jsx\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,29024,29025,29029,29039,29043,29055,29061,29075,29095,29103,29107],{"__ignoreMap":178},[220,29026,29027],{"class":222,"line":223},[220,29028,27512],{"class":609},[220,29030,29031,29033,29035,29037],{"class":222,"line":179},[220,29032,261],{"class":260},[220,29034,27220],{"class":264},[220,29036,268],{"class":260},[220,29038,319],{"class":230},[220,29040,29041],{"class":222,"line":389},[220,29042,647],{"emptyLinePlaceholder":194},[220,29044,29045,29047,29049,29051,29053],{"class":222,"line":399},[220,29046,27233],{"class":260},[220,29048,27236],{"class":260},[220,29050,11941],{"class":260},[220,29052,27241],{"class":226},[220,29054,2647],{"class":264},[220,29056,29057,29059],{"class":222,"line":644},[220,29058,2739],{"class":260},[220,29060,2742],{"class":264},[220,29062,29063,29065,29067,29069,29071,29073],{"class":222,"line":650},[220,29064,2550],{"class":264},[220,29066,347],{"class":420},[220,29068,350],{"class":226},[220,29070,353],{"class":260},[220,29072,356],{"class":230},[220,29074,359],{"class":264},[220,29076,29077,29079,29081,29083,29085,29087,29089,29091,29093],{"class":222,"line":656},[220,29078,2813],{"class":264},[220,29080,367],{"class":420},[220,29082,370],{"class":226},[220,29084,353],{"class":260},[220,29086,375],{"class":230},[220,29088,378],{"class":226},[220,29090,353],{"class":260},[220,29092,383],{"class":230},[220,29094,386],{"class":264},[220,29096,29097,29099,29101],{"class":222,"line":673},[220,29098,2828],{"class":264},[220,29100,347],{"class":420},[220,29102,359],{"class":264},[220,29104,29105],{"class":222,"line":682},[220,29106,2837],{"class":264},[220,29108,29109],{"class":222,"line":691},[220,29110,749],{"class":264},[212,29112,29114],{"className":409,"code":29113,"language":411,"meta":178,"style":178},"\u002F\u002F routes\u002Findex.jsx\nimport { clientOnly } from '@solidjs\u002Fstart'\n\nconst MyShader = clientOnly(() => import('..\u002Fcomponents\u002FMyShader'))\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader \u002F>\n \u003Ch1>Your content\u003C\u002Fh1>\n \u003C\u002Fmain>\n )\n}\n",[99,29115,29116,29121,29133,29137,29161,29165,29177,29183,29191,29199,29211,29219,29223],{"__ignoreMap":178},[220,29117,29118],{"class":222,"line":223},[220,29119,29120],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,29122,29123,29125,29128,29130],{"class":222,"line":179},[220,29124,261],{"class":260},[220,29126,29127],{"class":264}," { clientOnly } ",[220,29129,268],{"class":260},[220,29131,29132],{"class":230}," '@solidjs\u002Fstart'\n",[220,29134,29135],{"class":222,"line":389},[220,29136,647],{"emptyLinePlaceholder":194},[220,29138,29139,29141,29143,29145,29148,29150,29152,29154,29156,29158],{"class":222,"line":399},[220,29140,1735],{"class":260},[220,29142,27241],{"class":420},[220,29144,1741],{"class":260},[220,29146,29147],{"class":226}," clientOnly",[220,29149,3600],{"class":264},[220,29151,2762],{"class":260},[220,29153,27775],{"class":260},[220,29155,2626],{"class":264},[220,29157,27912],{"class":230},[220,29159,29160],{"class":264},"))\n",[220,29162,29163],{"class":222,"line":644},[220,29164,647],{"emptyLinePlaceholder":194},[220,29166,29167,29169,29171,29173,29175],{"class":222,"line":650},[220,29168,27233],{"class":260},[220,29170,27236],{"class":260},[220,29172,11941],{"class":260},[220,29174,27651],{"class":226},[220,29176,2647],{"class":264},[220,29178,29179,29181],{"class":222,"line":656},[220,29180,2739],{"class":260},[220,29182,2742],{"class":264},[220,29184,29185,29187,29189],{"class":222,"line":673},[220,29186,2550],{"class":264},[220,29188,12638],{"class":346},[220,29190,359],{"class":264},[220,29192,29193,29195,29197],{"class":222,"line":682},[220,29194,2813],{"class":264},[220,29196,27674],{"class":420},[220,29198,386],{"class":264},[220,29200,29201,29203,29205,29207,29209],{"class":222,"line":691},[220,29202,2813],{"class":264},[220,29204,11],{"class":346},[220,29206,12926],{"class":264},[220,29208,11],{"class":346},[220,29210,359],{"class":264},[220,29212,29213,29215,29217],{"class":222,"line":696},[220,29214,2828],{"class":264},[220,29216,12638],{"class":346},[220,29218,359],{"class":264},[220,29220,29221],{"class":222,"line":702},[220,29222,2837],{"class":264},[220,29224,29225],{"class":222,"line":718},[220,29226,749],{"class":264},[15,29228,29229,29231,29232,29235,29236,29238],{},[99,29230,29012],{}," wraps the component in a ",[99,29233,29234],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,29237,16822],{}," during SSR.",[23,29240,29242,29245],{"id":29241},"isserver-guard",[99,29243,29244],{},"isServer"," guard",[15,29247,29248,29249,29251,29252,1554],{},"For finer control, check ",[99,29250,29244],{}," from ",[99,29253,29254],{},"solid-js\u002Fweb",[212,29256,29258],{"className":409,"code":29257,"language":411,"meta":178,"style":178},"import { isServer } from 'solid-js\u002Fweb'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function MyShader() {\n if (isServer) return null\n\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,29259,29260,29272,29282,29286,29298,29309,29313,29319,29333,29341,29349,29353],{"__ignoreMap":178},[220,29261,29262,29264,29267,29269],{"class":222,"line":223},[220,29263,261],{"class":260},[220,29265,29266],{"class":264}," { isServer } ",[220,29268,268],{"class":260},[220,29270,29271],{"class":230}," 'solid-js\u002Fweb'\n",[220,29273,29274,29276,29278,29280],{"class":222,"line":179},[220,29275,261],{"class":260},[220,29277,27220],{"class":264},[220,29279,268],{"class":260},[220,29281,319],{"class":230},[220,29283,29284],{"class":222,"line":389},[220,29285,647],{"emptyLinePlaceholder":194},[220,29287,29288,29290,29292,29294,29296],{"class":222,"line":399},[220,29289,27233],{"class":260},[220,29291,27236],{"class":260},[220,29293,11941],{"class":260},[220,29295,27241],{"class":226},[220,29297,2647],{"class":264},[220,29299,29300,29302,29305,29307],{"class":222,"line":644},[220,29301,28298],{"class":260},[220,29303,29304],{"class":264}," (isServer) ",[220,29306,28309],{"class":260},[220,29308,28312],{"class":420},[220,29310,29311],{"class":222,"line":650},[220,29312,647],{"emptyLinePlaceholder":194},[220,29314,29315,29317],{"class":222,"line":656},[220,29316,2739],{"class":260},[220,29318,2742],{"class":264},[220,29320,29321,29323,29325,29327,29329,29331],{"class":222,"line":673},[220,29322,2550],{"class":264},[220,29324,347],{"class":420},[220,29326,350],{"class":226},[220,29328,353],{"class":260},[220,29330,356],{"class":230},[220,29332,359],{"class":264},[220,29334,29335,29337,29339],{"class":222,"line":682},[220,29336,2813],{"class":264},[220,29338,367],{"class":420},[220,29340,386],{"class":264},[220,29342,29343,29345,29347],{"class":222,"line":691},[220,29344,2828],{"class":264},[220,29346,347],{"class":420},[220,29348,359],{"class":264},[220,29350,29351],{"class":222,"line":696},[220,29352,2837],{"class":264},[220,29354,29355],{"class":222,"line":702},[220,29356,749],{"class":264},[23,29358,29360,29245],{"id":29359},"onmount-guard",[99,29361,29362],{},"onMount",[15,29364,29365,29366,29368],{},"Alternatively, use ",[99,29367,29362],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,29370,29372],{"className":409,"code":29371,"language":411,"meta":178,"style":178},"import { createSignal, onMount } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\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 \u002F>\n \u003C\u002FShader>\n )}\n \u003C\u002Fdiv>\n )\n}\n",[99,29373,29374,29385,29395,29399,29411,29435,29439,29456,29460,29466,29480,29494,29508,29517,29526,29531,29539,29543],{"__ignoreMap":178},[220,29375,29376,29378,29381,29383],{"class":222,"line":223},[220,29377,261],{"class":260},[220,29379,29380],{"class":264}," { createSignal, onMount } ",[220,29382,268],{"class":260},[220,29384,2987],{"class":230},[220,29386,29387,29389,29391,29393],{"class":222,"line":179},[220,29388,261],{"class":260},[220,29390,27220],{"class":264},[220,29392,268],{"class":260},[220,29394,319],{"class":230},[220,29396,29397],{"class":222,"line":389},[220,29398,647],{"emptyLinePlaceholder":194},[220,29400,29401,29403,29405,29407,29409],{"class":222,"line":399},[220,29402,27233],{"class":260},[220,29404,27236],{"class":260},[220,29406,11941],{"class":260},[220,29408,27241],{"class":226},[220,29410,2647],{"class":264},[220,29412,29413,29415,29417,29419,29421,29423,29425,29427,29429,29431,29433],{"class":222,"line":644},[220,29414,2705],{"class":260},[220,29416,2708],{"class":264},[220,29418,28243],{"class":420},[220,29420,1895],{"class":264},[220,29422,28248],{"class":420},[220,29424,2719],{"class":264},[220,29426,353],{"class":260},[220,29428,3018],{"class":226},[220,29430,2626],{"class":264},[220,29432,2629],{"class":420},[220,29434,2632],{"class":264},[220,29436,29437],{"class":222,"line":650},[220,29438,647],{"emptyLinePlaceholder":194},[220,29440,29441,29443,29445,29447,29450,29452,29454],{"class":222,"line":656},[220,29442,3884],{"class":226},[220,29444,3600],{"class":264},[220,29446,2762],{"class":260},[220,29448,29449],{"class":226}," setMounted",[220,29451,2626],{"class":264},[220,29453,2332],{"class":420},[220,29455,29160],{"class":264},[220,29457,29458],{"class":222,"line":673},[220,29459,647],{"emptyLinePlaceholder":194},[220,29461,29462,29464],{"class":222,"line":682},[220,29463,2739],{"class":260},[220,29465,2742],{"class":264},[220,29467,29468,29470,29472,29474,29476,29478],{"class":222,"line":691},[220,29469,2550],{"class":264},[220,29471,3398],{"class":346},[220,29473,350],{"class":226},[220,29475,353],{"class":260},[220,29477,356],{"class":230},[220,29479,359],{"class":264},[220,29481,29482,29485,29487,29489,29492],{"class":222,"line":696},[220,29483,29484],{"class":264}," {",[220,29486,28243],{"class":226},[220,29488,3072],{"class":264},[220,29490,29491],{"class":260},"&&",[220,29493,2742],{"class":264},[220,29495,29496,29498,29500,29502,29504,29506],{"class":222,"line":702},[220,29497,10809],{"class":264},[220,29499,347],{"class":420},[220,29501,350],{"class":226},[220,29503,353],{"class":260},[220,29505,356],{"class":230},[220,29507,359],{"class":264},[220,29509,29510,29513,29515],{"class":222,"line":718},[220,29511,29512],{"class":264}," \u003C",[220,29514,367],{"class":420},[220,29516,386],{"class":264},[220,29518,29519,29522,29524],{"class":222,"line":727},[220,29520,29521],{"class":264}," \u003C\u002F",[220,29523,347],{"class":420},[220,29525,359],{"class":264},[220,29527,29528],{"class":222,"line":2664},[220,29529,29530],{"class":264}," )}\n",[220,29532,29533,29535,29537],{"class":222,"line":3522},[220,29534,2828],{"class":264},[220,29536,3398],{"class":346},[220,29538,359],{"class":264},[220,29540,29541],{"class":222,"line":9662},[220,29542,2837],{"class":264},[220,29544,29545],{"class":222,"line":9673},[220,29546,749],{"class":264},[23,29548,29550],{"id":29549},"solid-without-solidstart","Solid (without SolidStart)",[15,29552,29553,29554,29556],{},"In a Solid app without SolidStart, the ",[99,29555,29362],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,29558,29559],{},"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":178,"searchDepth":179,"depth":179,"links":29561},[29562,29564,29566,29568],{"id":29009,"depth":179,"text":29563},"clientOnly (SolidStart)",{"id":29241,"depth":179,"text":29565},"isServer guard",{"id":29359,"depth":179,"text":29567},"onMount guard",{"id":29549,"depth":179,"text":29550},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":28962,"description":29569},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":29575,"title":201,"body":29576,"category":188,"description":30110,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":30111,"navigation":194,"path":30112,"seo":30113,"stem":30114,"__hash__":30115},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":29577,"toc":30101},[29578,29582,29584,29596,29598,29612,29614,29616,29670,29672,29678,29680,29690,29806,29816,29818,29825,29896,29906,30064,30068,30072,30076,30082,30084,30098],[11,29579,29581],{"id":29580},"quickstart-svelte","Quickstart (Svelte)",[23,29583,26219],{"id":26218},[212,29585,29586],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,29587,29588],{"__ignoreMap":178},[220,29589,29590,29592,29594],{"class":222,"line":223},[220,29591,227],{"class":226},[220,29593,231],{"class":230},[220,29595,234],{"class":230},[23,29597,26869],{"id":26868},[212,29599,29600],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,29601,29602],{"__ignoreMap":178},[220,29603,29604,29606,29608,29610],{"class":222,"line":223},[220,29605,261],{"class":260},[220,29607,265],{"class":264},[220,29609,268],{"class":260},[220,29611,303],{"class":230},[23,29613,323],{"id":322},[15,29615,26888],{},[212,29617,29618],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,29619,29620,29634,29654,29662],{"__ignoreMap":178},[220,29621,29622,29624,29626,29628,29630,29632],{"class":222,"line":223},[220,29623,343],{"class":264},[220,29625,347],{"class":420},[220,29627,350],{"class":226},[220,29629,353],{"class":264},[220,29631,356],{"class":230},[220,29633,359],{"class":264},[220,29635,29636,29638,29640,29642,29644,29646,29648,29650,29652],{"class":222,"line":179},[220,29637,364],{"class":264},[220,29639,367],{"class":420},[220,29641,370],{"class":226},[220,29643,353],{"class":264},[220,29645,375],{"class":230},[220,29647,378],{"class":226},[220,29649,353],{"class":264},[220,29651,383],{"class":230},[220,29653,386],{"class":264},[220,29655,29656,29658,29660],{"class":222,"line":389},[220,29657,364],{"class":264},[220,29659,394],{"class":420},[220,29661,386],{"class":264},[220,29663,29664,29666,29668],{"class":222,"line":399},[220,29665,402],{"class":264},[220,29667,347],{"class":420},[220,29669,359],{"class":264},[19,29671],{":preset":578},[15,29673,29674,583,29676,26951],{},[99,29675,101],{},[99,29677,586],{},[23,29679,594],{"id":593},[15,29681,1839,29682,26958,29684,18745,29686,26964,29688,590],{},[99,29683,586],{},[99,29685,28491],{},[99,29687,1504],{},[99,29689,101],{},[212,29691,29693],{"className":2844,"code":29692,"language":2846,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fluid with aspect ratio -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,29694,29695,29699,29713,29721,29729,29733,29737,29751,29759,29767,29771,29776,29790,29798],{"__ignoreMap":178},[220,29696,29697],{"class":222,"line":223},[220,29698,610],{"class":609},[220,29700,29701,29703,29705,29707,29709,29711],{"class":222,"line":179},[220,29702,343],{"class":264},[220,29704,347],{"class":420},[220,29706,350],{"class":226},[220,29708,353],{"class":264},[220,29710,623],{"class":230},[220,29712,359],{"class":264},[220,29714,29715,29717,29719],{"class":222,"line":389},[220,29716,364],{"class":264},[220,29718,367],{"class":420},[220,29720,386],{"class":264},[220,29722,29723,29725,29727],{"class":222,"line":399},[220,29724,402],{"class":264},[220,29726,347],{"class":420},[220,29728,359],{"class":264},[220,29730,29731],{"class":222,"line":644},[220,29732,647],{"emptyLinePlaceholder":194},[220,29734,29735],{"class":222,"line":650},[220,29736,653],{"class":609},[220,29738,29739,29741,29743,29745,29747,29749],{"class":222,"line":656},[220,29740,343],{"class":264},[220,29742,347],{"class":420},[220,29744,663],{"class":226},[220,29746,353],{"class":264},[220,29748,668],{"class":230},[220,29750,359],{"class":264},[220,29752,29753,29755,29757],{"class":222,"line":673},[220,29754,364],{"class":264},[220,29756,367],{"class":420},[220,29758,386],{"class":264},[220,29760,29761,29763,29765],{"class":222,"line":682},[220,29762,402],{"class":264},[220,29764,347],{"class":420},[220,29766,359],{"class":264},[220,29768,29769],{"class":222,"line":691},[220,29770,647],{"emptyLinePlaceholder":194},[220,29772,29773],{"class":222,"line":696},[220,29774,29775],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,29777,29778,29780,29782,29784,29786,29788],{"class":222,"line":702},[220,29779,343],{"class":264},[220,29781,347],{"class":420},[220,29783,350],{"class":226},[220,29785,353],{"class":264},[220,29787,713],{"class":230},[220,29789,359],{"class":264},[220,29791,29792,29794,29796],{"class":222,"line":718},[220,29793,364],{"class":264},[220,29795,367],{"class":420},[220,29797,386],{"class":264},[220,29799,29800,29802,29804],{"class":222,"line":727},[220,29801,402],{"class":264},[220,29803,347],{"class":420},[220,29805,359],{"class":264},[15,29807,27103,29808,18745,29810,27108,29812,27111,29814,27114],{},[99,29809,28491],{},[99,29811,1504],{},[99,29813,101],{},[99,29815,586],{},[23,29817,1153],{"id":1152},[15,29819,29820,29821,29824],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,29822,29823],{},"{expression}"," syntax:",[212,29826,29827],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,29828,29829,29843,29849,29857,29865,29876,29884,29888],{"__ignoreMap":178},[220,29830,29831,29833,29835,29837,29839,29841],{"class":222,"line":223},[220,29832,343],{"class":264},[220,29834,347],{"class":420},[220,29836,350],{"class":226},[220,29838,353],{"class":264},[220,29840,356],{"class":230},[220,29842,359],{"class":264},[220,29844,29845,29847],{"class":222,"line":179},[220,29846,364],{"class":264},[220,29848,1189],{"class":420},[220,29850,29851,29853,29855],{"class":222,"line":389},[220,29852,1194],{"class":226},[220,29854,353],{"class":264},[220,29856,1199],{"class":230},[220,29858,29859,29861,29863],{"class":222,"line":399},[220,29860,1204],{"class":226},[220,29862,353],{"class":264},[220,29864,1209],{"class":230},[220,29866,29867,29869,29872,29874],{"class":222,"line":644},[220,29868,1288],{"class":226},[220,29870,29871],{"class":264},"={",[220,29873,1295],{"class":420},[220,29875,749],{"class":264},[220,29877,29878,29880,29882],{"class":222,"line":650},[220,29879,1302],{"class":226},[220,29881,353],{"class":264},[220,29883,1229],{"class":230},[220,29885,29886],{"class":222,"line":656},[220,29887,1234],{"class":264},[220,29889,29890,29892,29894],{"class":222,"line":673},[220,29891,402],{"class":264},[220,29893,347],{"class":420},[220,29895,359],{"class":264},[15,29897,29898,29899,29902,29903,29905],{},"Props also accept reactive state — Svelte's ",[99,29900,29901],{},"$state"," rune (or ",[99,29904,16551],{}," in Svelte 4) works exactly as you'd expect:",[212,29907,29909],{"className":2844,"code":29908,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\n let angle = $state(0)\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" {angle} \u002F>\n\u003C\u002FShader>\n\n\u003Cinput type=\"range\" min=\"0\" max=\"360\" bind:value={angle} \u002F>\n",[99,29910,29911,29919,29929,29933,29951,29959,29963,29977,30005,30013,30017],{"__ignoreMap":178},[220,29912,29913,29915,29917],{"class":222,"line":223},[220,29914,343],{"class":264},[220,29916,2590],{"class":346},[220,29918,359],{"class":264},[220,29920,29921,29923,29925,29927],{"class":222,"line":179},[220,29922,12955],{"class":260},[220,29924,27220],{"class":264},[220,29926,268],{"class":260},[220,29928,303],{"class":230},[220,29930,29931],{"class":222,"line":389},[220,29932,647],{"emptyLinePlaceholder":194},[220,29934,29935,29937,29939,29941,29943,29945,29947,29949],{"class":222,"line":399},[220,29936,2861],{"class":260},[220,29938,11075],{"class":264},[220,29940,353],{"class":260},[220,29942,2869],{"class":264},[220,29944,2872],{"class":226},[220,29946,2626],{"class":264},[220,29948,8673],{"class":420},[220,29950,2632],{"class":264},[220,29952,29953,29955,29957],{"class":222,"line":644},[220,29954,402],{"class":264},[220,29956,2590],{"class":346},[220,29958,359],{"class":264},[220,29960,29961],{"class":222,"line":650},[220,29962,647],{"emptyLinePlaceholder":194},[220,29964,29965,29967,29969,29971,29973,29975],{"class":222,"line":656},[220,29966,343],{"class":264},[220,29968,347],{"class":420},[220,29970,350],{"class":226},[220,29972,353],{"class":264},[220,29974,356],{"class":230},[220,29976,359],{"class":264},[220,29978,29979,29981,29983,29985,29987,29989,29991,29993,29995,29998,30000,30003],{"class":222,"line":673},[220,29980,364],{"class":264},[220,29982,367],{"class":420},[220,29984,370],{"class":226},[220,29986,353],{"class":264},[220,29988,27308],{"class":230},[220,29990,378],{"class":226},[220,29992,353],{"class":264},[220,29994,27315],{"class":230},[220,29996,29997],{"class":226}," {",[220,29999,10764],{"class":264},[220,30001,30002],{"class":226},"}",[220,30004,386],{"class":264},[220,30006,30007,30009,30011],{"class":222,"line":682},[220,30008,402],{"class":264},[220,30010,347],{"class":420},[220,30012,359],{"class":264},[220,30014,30015],{"class":222,"line":691},[220,30016,647],{"emptyLinePlaceholder":194},[220,30018,30019,30021,30024,30026,30028,30031,30034,30036,30038,30040,30042,30045,30047,30049,30051,30053,30056,30058,30061],{"class":222,"line":696},[220,30020,343],{"class":264},[220,30022,30023],{"class":346},"input",[220,30025,12943],{"class":226},[220,30027,353],{"class":264},[220,30029,30030],{"class":230},"\"range\"",[220,30032,30033],{"class":226}," min",[220,30035,353],{"class":264},[220,30037,11688],{"class":230},[220,30039,8673],{"class":420},[220,30041,11688],{"class":230},[220,30043,30044],{"class":226}," max",[220,30046,353],{"class":264},[220,30048,11688],{"class":230},[220,30050,27376],{"class":420},[220,30052,11688],{"class":230},[220,30054,30055],{"class":260}," bind",[220,30057,1554],{"class":264},[220,30059,30060],{"class":226},"value",[220,30062,30063],{"class":264},"={angle} \u002F>\n",[15,30065,26761,30066,27431],{},[99,30067,10764],{},[15,30069,26768,30070,26771],{},[56,30071,1160],{"href":1159},[23,30073,30075],{"id":30074},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,30077,27442,30078,27447],{},[56,30079,30081],{"href":30080},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,30083,1474],{"id":1473},[34,30085,30086,30090,30094],{},[37,30087,30088,1483],{},[56,30089,1482],{"href":1481},[37,30091,30092,1490],{},[56,30093,1489],{"href":1488},[37,30095,30096,1502],{},[56,30097,1160],{"href":1159},[1504,30099,30100],{},"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":178,"searchDepth":179,"depth":179,"links":30102},[30103,30104,30105,30106,30107,30108,30109],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":30074,"depth":179,"text":30075},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":30110},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":30117,"title":30081,"body":30118,"category":2240,"description":30698,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":30699,"navigation":194,"path":30080,"seo":30700,"stem":30701,"__hash__":30702},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":30119,"toc":30690},[30120,30124,30127,30131,30137,30140,30205,30208,30214,30219,30351,30358,30364,30487,30490,30494,30497,30687],[11,30121,30123],{"id":30122},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,30125,30126],{},"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,30128,30130],{"id":30129},"the-default-behavior","The default behavior",[15,30132,30133,30134,30136],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,30135,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,30138,30139],{},"In many cases, you don't need any special handling:",[212,30141,30143],{"className":2844,"code":30142,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,30144,30145,30153,30163,30171,30175,30189,30197],{"__ignoreMap":178},[220,30146,30147,30149,30151],{"class":222,"line":223},[220,30148,343],{"class":264},[220,30150,2590],{"class":346},[220,30152,359],{"class":264},[220,30154,30155,30157,30159,30161],{"class":222,"line":179},[220,30156,12955],{"class":260},[220,30158,27220],{"class":264},[220,30160,268],{"class":260},[220,30162,303],{"class":230},[220,30164,30165,30167,30169],{"class":222,"line":389},[220,30166,402],{"class":264},[220,30168,2590],{"class":346},[220,30170,359],{"class":264},[220,30172,30173],{"class":222,"line":399},[220,30174,647],{"emptyLinePlaceholder":194},[220,30176,30177,30179,30181,30183,30185,30187],{"class":222,"line":644},[220,30178,343],{"class":264},[220,30180,347],{"class":420},[220,30182,350],{"class":226},[220,30184,353],{"class":264},[220,30186,356],{"class":230},[220,30188,359],{"class":264},[220,30190,30191,30193,30195],{"class":222,"line":650},[220,30192,364],{"class":264},[220,30194,367],{"class":420},[220,30196,386],{"class":264},[220,30198,30199,30201,30203],{"class":222,"line":656},[220,30200,402],{"class":264},[220,30202,347],{"class":420},[220,30204,359],{"class":264},[15,30206,30207],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,30209,30211,30213],{"id":30210},"onmount-for-browser-only-code",[99,30212,29362],{}," for browser-only code",[15,30215,30216,30217,1554],{},"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 ",[99,30218,29362],{},[212,30220,30222],{"className":2844,"code":30221,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { onMount } from 'svelte'\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\n let shaderEl\n\n onMount(() => {\n \u002F\u002F Safe to interact with the DOM and canvas here\n console.log(shaderEl)\n })\n\u003C\u002Fscript>\n\n\u003CShader bind:this={shaderEl} class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,30223,30224,30232,30244,30254,30258,30265,30269,30279,30284,30295,30299,30307,30311,30335,30343],{"__ignoreMap":178},[220,30225,30226,30228,30230],{"class":222,"line":223},[220,30227,343],{"class":264},[220,30229,2590],{"class":346},[220,30231,359],{"class":264},[220,30233,30234,30236,30239,30241],{"class":222,"line":179},[220,30235,12955],{"class":260},[220,30237,30238],{"class":264}," { onMount } ",[220,30240,268],{"class":260},[220,30242,30243],{"class":230}," 'svelte'\n",[220,30245,30246,30248,30250,30252],{"class":222,"line":389},[220,30247,12955],{"class":260},[220,30249,27220],{"class":264},[220,30251,268],{"class":260},[220,30253,303],{"class":230},[220,30255,30256],{"class":222,"line":399},[220,30257,647],{"emptyLinePlaceholder":194},[220,30259,30260,30262],{"class":222,"line":644},[220,30261,2861],{"class":260},[220,30263,30264],{"class":264}," shaderEl\n",[220,30266,30267],{"class":222,"line":650},[220,30268,647],{"emptyLinePlaceholder":194},[220,30270,30271,30273,30275,30277],{"class":222,"line":656},[220,30272,3884],{"class":226},[220,30274,3600],{"class":264},[220,30276,2762],{"class":260},[220,30278,3241],{"class":264},[220,30280,30281],{"class":222,"line":673},[220,30282,30283],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,30285,30286,30289,30292],{"class":222,"line":682},[220,30287,30288],{"class":264}," console.",[220,30290,30291],{"class":226},"log",[220,30293,30294],{"class":264},"(shaderEl)\n",[220,30296,30297],{"class":222,"line":691},[220,30298,13002],{"class":264},[220,30300,30301,30303,30305],{"class":222,"line":696},[220,30302,402],{"class":264},[220,30304,2590],{"class":346},[220,30306,359],{"class":264},[220,30308,30309],{"class":222,"line":702},[220,30310,647],{"emptyLinePlaceholder":194},[220,30312,30313,30315,30317,30319,30321,30324,30327,30329,30331,30333],{"class":222,"line":718},[220,30314,343],{"class":264},[220,30316,347],{"class":420},[220,30318,30055],{"class":260},[220,30320,1554],{"class":264},[220,30322,30323],{"class":420},"this",[220,30325,30326],{"class":264},"={shaderEl} ",[220,30328,28491],{"class":226},[220,30330,353],{"class":264},[220,30332,356],{"class":230},[220,30334,359],{"class":264},[220,30336,30337,30339,30341],{"class":222,"line":727},[220,30338,364],{"class":264},[220,30340,367],{"class":420},[220,30342,386],{"class":264},[220,30344,30345,30347,30349],{"class":222,"line":2664},[220,30346,402],{"class":264},[220,30348,347],{"class":420},[220,30350,359],{"class":264},[23,30352,30354,30355],{"id":30353},"conditional-rendering-with-browser","Conditional rendering with ",[99,30356,30357],{},"browser",[15,30359,30360,30361,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,30362,30363],{},"$app\u002Fenvironment",[212,30365,30367],{"className":2844,"code":30366,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { browser } from '$app\u002Fenvironment'\n import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\u003C\u002Fscript>\n\n{#if browser}\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n{:else}\n \u003C!-- Optional server-rendered placeholder -->\n \u003Cdiv class=\"w-full h-64 bg-gray-900 rounded\" \u002F>\n{\u002Fif}\n",[99,30368,30369,30377,30389,30399,30407,30411,30420,30434,30442,30450,30458,30463,30478],{"__ignoreMap":178},[220,30370,30371,30373,30375],{"class":222,"line":223},[220,30372,343],{"class":264},[220,30374,2590],{"class":346},[220,30376,359],{"class":264},[220,30378,30379,30381,30384,30386],{"class":222,"line":179},[220,30380,12955],{"class":260},[220,30382,30383],{"class":264}," { browser } ",[220,30385,268],{"class":260},[220,30387,30388],{"class":230}," '$app\u002Fenvironment'\n",[220,30390,30391,30393,30395,30397],{"class":222,"line":389},[220,30392,12955],{"class":260},[220,30394,27220],{"class":264},[220,30396,268],{"class":260},[220,30398,303],{"class":230},[220,30400,30401,30403,30405],{"class":222,"line":399},[220,30402,402],{"class":264},[220,30404,2590],{"class":346},[220,30406,359],{"class":264},[220,30408,30409],{"class":222,"line":644},[220,30410,647],{"emptyLinePlaceholder":194},[220,30412,30413,30415,30417],{"class":222,"line":650},[220,30414,3751],{"class":264},[220,30416,3754],{"class":260},[220,30418,30419],{"class":264}," browser}\n",[220,30421,30422,30424,30426,30428,30430,30432],{"class":222,"line":656},[220,30423,364],{"class":264},[220,30425,347],{"class":420},[220,30427,350],{"class":226},[220,30429,353],{"class":264},[220,30431,356],{"class":230},[220,30433,359],{"class":264},[220,30435,30436,30438,30440],{"class":222,"line":673},[220,30437,2550],{"class":264},[220,30439,367],{"class":420},[220,30441,386],{"class":264},[220,30443,30444,30446,30448],{"class":222,"line":682},[220,30445,2567],{"class":264},[220,30447,347],{"class":420},[220,30449,359],{"class":264},[220,30451,30452,30454,30456],{"class":222,"line":691},[220,30453,3784],{"class":264},[220,30455,3787],{"class":260},[220,30457,749],{"class":264},[220,30459,30460],{"class":222,"line":696},[220,30461,30462],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,30464,30465,30467,30469,30471,30473,30476],{"class":222,"line":702},[220,30466,364],{"class":264},[220,30468,3398],{"class":346},[220,30470,350],{"class":226},[220,30472,353],{"class":264},[220,30474,30475],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,30477,386],{"class":264},[220,30479,30480,30483,30485],{"class":222,"line":718},[220,30481,30482],{"class":264},"{\u002F",[220,30484,3754],{"class":260},[220,30486,749],{"class":264},[15,30488,30489],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,30491,30493],{"id":30492},"lazy-loading","Lazy loading",[15,30495,30496],{},"To defer loading the Shaders bundle entirely until client-side:",[212,30498,30500],{"className":2844,"code":30499,"language":2846,"meta":178,"style":178},"\u003Cscript>\n import { onMount } from 'svelte'\n\n let ShaderComponent\n let LinearGradientComponent\n\n onMount(async () => {\n const { Shader, LinearGradient } = await import('shaders\u002Fsvelte')\n ShaderComponent = Shader\n LinearGradientComponent = LinearGradient\n })\n\u003C\u002Fscript>\n\n{#if ShaderComponent}\n \u003Csvelte:component this={ShaderComponent} class=\"w-full h-64\">\n \u003Csvelte:component this={LinearGradientComponent} \u002F>\n \u003C\u002Fsvelte:component>\n{\u002Fif}\n",[99,30501,30502,30510,30520,30524,30531,30538,30542,30556,30583,30593,30603,30607,30615,30619,30628,30652,30667,30679],{"__ignoreMap":178},[220,30503,30504,30506,30508],{"class":222,"line":223},[220,30505,343],{"class":264},[220,30507,2590],{"class":346},[220,30509,359],{"class":264},[220,30511,30512,30514,30516,30518],{"class":222,"line":179},[220,30513,12955],{"class":260},[220,30515,30238],{"class":264},[220,30517,268],{"class":260},[220,30519,30243],{"class":230},[220,30521,30522],{"class":222,"line":389},[220,30523,647],{"emptyLinePlaceholder":194},[220,30525,30526,30528],{"class":222,"line":399},[220,30527,2861],{"class":260},[220,30529,30530],{"class":264}," ShaderComponent\n",[220,30532,30533,30535],{"class":222,"line":644},[220,30534,2861],{"class":260},[220,30536,30537],{"class":264}," LinearGradientComponent\n",[220,30539,30540],{"class":222,"line":650},[220,30541,647],{"emptyLinePlaceholder":194},[220,30543,30544,30546,30548,30550,30552,30554],{"class":222,"line":656},[220,30545,3884],{"class":226},[220,30547,2626],{"class":264},[220,30549,3489],{"class":260},[220,30551,3492],{"class":264},[220,30553,2762],{"class":260},[220,30555,3241],{"class":264},[220,30557,30558,30560,30562,30564,30566,30568,30570,30572,30574,30576,30578,30581],{"class":222,"line":673},[220,30559,16843],{"class":260},[220,30561,4018],{"class":264},[220,30563,347],{"class":420},[220,30565,1895],{"class":264},[220,30567,367],{"class":420},[220,30569,4023],{"class":264},[220,30571,353],{"class":260},[220,30573,1744],{"class":260},[220,30575,27775],{"class":260},[220,30577,2626],{"class":264},[220,30579,30580],{"class":230},"'shaders\u002Fsvelte'",[220,30582,2632],{"class":264},[220,30584,30585,30588,30590],{"class":222,"line":682},[220,30586,30587],{"class":264}," ShaderComponent ",[220,30589,353],{"class":260},[220,30591,30592],{"class":264}," Shader\n",[220,30594,30595,30598,30600],{"class":222,"line":691},[220,30596,30597],{"class":264}," LinearGradientComponent ",[220,30599,353],{"class":260},[220,30601,30602],{"class":264}," LinearGradient\n",[220,30604,30605],{"class":222,"line":696},[220,30606,13002],{"class":264},[220,30608,30609,30611,30613],{"class":222,"line":702},[220,30610,402],{"class":264},[220,30612,2590],{"class":346},[220,30614,359],{"class":264},[220,30616,30617],{"class":222,"line":718},[220,30618,647],{"emptyLinePlaceholder":194},[220,30620,30621,30623,30625],{"class":222,"line":727},[220,30622,3751],{"class":264},[220,30624,3754],{"class":260},[220,30626,30627],{"class":264}," ShaderComponent}\n",[220,30629,30630,30632,30634,30636,30639,30641,30644,30646,30648,30650],{"class":222,"line":2664},[220,30631,364],{"class":264},[220,30633,2846],{"class":260},[220,30635,1554],{"class":264},[220,30637,30638],{"class":346},"component",[220,30640,5345],{"class":226},[220,30642,30643],{"class":264},"={ShaderComponent} ",[220,30645,28491],{"class":226},[220,30647,353],{"class":264},[220,30649,356],{"class":230},[220,30651,359],{"class":264},[220,30653,30654,30656,30658,30660,30662,30664],{"class":222,"line":3522},[220,30655,2550],{"class":264},[220,30657,2846],{"class":260},[220,30659,1554],{"class":264},[220,30661,30638],{"class":346},[220,30663,5345],{"class":226},[220,30665,30666],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,30668,30669,30671,30673,30675,30677],{"class":222,"line":9662},[220,30670,2567],{"class":264},[220,30672,2846],{"class":260},[220,30674,1554],{"class":264},[220,30676,30638],{"class":346},[220,30678,359],{"class":264},[220,30680,30681,30683,30685],{"class":222,"line":9673},[220,30682,30482],{"class":264},[220,30684,3754],{"class":260},[220,30686,749],{"class":264},[1504,30688,30689],{},"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":178,"searchDepth":179,"depth":179,"links":30691},[30692,30693,30695,30697],{"id":30129,"depth":179,"text":30130},{"id":30210,"depth":179,"text":30694},"onMount for browser-only code",{"id":30353,"depth":179,"text":30696},"Conditional rendering with browser",{"id":30492,"depth":179,"text":30493},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":30081,"description":30698},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":30704,"title":201,"body":30705,"category":188,"description":31219,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":31220,"navigation":194,"path":31221,"seo":31222,"stem":31223,"__hash__":31224},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":30706,"toc":31210},[30707,30711,30713,30725,30727,30741,30743,30745,30799,30801,30807,30809,30816,30930,30937,30939,30945,31014,31017,31187,31191,31195,31199,31205,31207],[11,30708,30710],{"id":30709},"quickstart-vue","Quickstart (Vue)",[23,30712,26219],{"id":26218},[212,30714,30715],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,30716,30717],{"__ignoreMap":178},[220,30718,30719,30721,30723],{"class":222,"line":223},[220,30720,227],{"class":226},[220,30722,231],{"class":230},[220,30724,234],{"class":230},[23,30726,26869],{"id":26868},[212,30728,30729],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,30730,30731],{"__ignoreMap":178},[220,30732,30733,30735,30737,30739],{"class":222,"line":223},[220,30734,261],{"class":260},[220,30736,265],{"class":264},[220,30738,268],{"class":260},[220,30740,271],{"class":230},[23,30742,323],{"id":322},[15,30744,26888],{},[212,30746,30747],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,30748,30749,30763,30783,30791],{"__ignoreMap":178},[220,30750,30751,30753,30755,30757,30759,30761],{"class":222,"line":223},[220,30752,343],{"class":264},[220,30754,347],{"class":346},[220,30756,350],{"class":226},[220,30758,353],{"class":264},[220,30760,356],{"class":230},[220,30762,359],{"class":264},[220,30764,30765,30767,30769,30771,30773,30775,30777,30779,30781],{"class":222,"line":179},[220,30766,364],{"class":264},[220,30768,367],{"class":346},[220,30770,370],{"class":226},[220,30772,353],{"class":264},[220,30774,375],{"class":230},[220,30776,378],{"class":226},[220,30778,353],{"class":264},[220,30780,383],{"class":230},[220,30782,386],{"class":264},[220,30784,30785,30787,30789],{"class":222,"line":389},[220,30786,364],{"class":264},[220,30788,394],{"class":346},[220,30790,386],{"class":264},[220,30792,30793,30795,30797],{"class":222,"line":399},[220,30794,402],{"class":264},[220,30796,347],{"class":346},[220,30798,359],{"class":264},[19,30800],{":preset":578},[15,30802,30803,583,30805,26951],{},[99,30804,101],{},[99,30806,586],{},[23,30808,594],{"id":593},[15,30810,1839,30811,30813,30814,590],{},[99,30812,586],{}," has no intrinsic size. The class or style you apply to ",[99,30815,101],{},[212,30817,30818],{"className":334,"code":29692,"language":336,"meta":178,"style":178},[99,30819,30820,30824,30838,30846,30854,30858,30862,30876,30884,30892,30896,30900,30914,30922],{"__ignoreMap":178},[220,30821,30822],{"class":222,"line":223},[220,30823,610],{"class":609},[220,30825,30826,30828,30830,30832,30834,30836],{"class":222,"line":179},[220,30827,343],{"class":264},[220,30829,347],{"class":346},[220,30831,350],{"class":226},[220,30833,353],{"class":264},[220,30835,623],{"class":230},[220,30837,359],{"class":264},[220,30839,30840,30842,30844],{"class":222,"line":389},[220,30841,364],{"class":264},[220,30843,367],{"class":346},[220,30845,386],{"class":264},[220,30847,30848,30850,30852],{"class":222,"line":399},[220,30849,402],{"class":264},[220,30851,347],{"class":346},[220,30853,359],{"class":264},[220,30855,30856],{"class":222,"line":644},[220,30857,647],{"emptyLinePlaceholder":194},[220,30859,30860],{"class":222,"line":650},[220,30861,653],{"class":609},[220,30863,30864,30866,30868,30870,30872,30874],{"class":222,"line":656},[220,30865,343],{"class":264},[220,30867,347],{"class":346},[220,30869,663],{"class":226},[220,30871,353],{"class":264},[220,30873,668],{"class":230},[220,30875,359],{"class":264},[220,30877,30878,30880,30882],{"class":222,"line":673},[220,30879,364],{"class":264},[220,30881,367],{"class":346},[220,30883,386],{"class":264},[220,30885,30886,30888,30890],{"class":222,"line":682},[220,30887,402],{"class":264},[220,30889,347],{"class":346},[220,30891,359],{"class":264},[220,30893,30894],{"class":222,"line":691},[220,30895,647],{"emptyLinePlaceholder":194},[220,30897,30898],{"class":222,"line":696},[220,30899,29775],{"class":609},[220,30901,30902,30904,30906,30908,30910,30912],{"class":222,"line":702},[220,30903,343],{"class":264},[220,30905,347],{"class":346},[220,30907,350],{"class":226},[220,30909,353],{"class":264},[220,30911,713],{"class":230},[220,30913,359],{"class":264},[220,30915,30916,30918,30920],{"class":222,"line":718},[220,30917,364],{"class":264},[220,30919,367],{"class":346},[220,30921,386],{"class":264},[220,30923,30924,30926,30928],{"class":222,"line":727},[220,30925,402],{"class":264},[220,30927,347],{"class":346},[220,30929,359],{"class":264},[15,30931,30932,30933,27111,30935,27114],{},"Applying a class or style to the ",[99,30934,101],{},[99,30936,586],{},[23,30938,1153],{"id":1152},[15,30940,30941,30942,30944],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,30943,1554],{}," binding syntax, strings can be passed plain:",[212,30946,30948],{"className":334,"code":30947,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n color-a=\"#ff6b6b\"\n color-b=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,30949,30950,30964,30970,30978,30986,30994,31002,31006],{"__ignoreMap":178},[220,30951,30952,30954,30956,30958,30960,30962],{"class":222,"line":223},[220,30953,343],{"class":264},[220,30955,347],{"class":346},[220,30957,350],{"class":226},[220,30959,353],{"class":264},[220,30961,356],{"class":230},[220,30963,359],{"class":264},[220,30965,30966,30968],{"class":222,"line":179},[220,30967,364],{"class":264},[220,30969,1189],{"class":346},[220,30971,30972,30974,30976],{"class":222,"line":389},[220,30973,19469],{"class":226},[220,30975,353],{"class":264},[220,30977,1199],{"class":230},[220,30979,30980,30982,30984],{"class":222,"line":399},[220,30981,19479],{"class":226},[220,30983,353],{"class":264},[220,30985,1209],{"class":230},[220,30987,30988,30990,30992],{"class":222,"line":644},[220,30989,1214],{"class":226},[220,30991,353],{"class":264},[220,30993,1219],{"class":230},[220,30995,30996,30998,31000],{"class":222,"line":650},[220,30997,1224],{"class":226},[220,30999,353],{"class":264},[220,31001,1229],{"class":230},[220,31003,31004],{"class":222,"line":656},[220,31005,1234],{"class":264},[220,31007,31008,31010,31012],{"class":222,"line":673},[220,31009,402],{"class":264},[220,31011,347],{"class":346},[220,31013,359],{"class":264},[15,31015,31016],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,31018,31020],{"className":11668,"code":31019,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient } from 'shaders\u002Fvue'\n\nconst angle = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#ff6b6b\" color-b=\"#4ecdc4\" :angle=\"angle\" \u002F>\n \u003C\u002FShader>\n\n \u003Cinput type=\"range\" min=\"0\" max=\"360\" v-model.number=\"angle\" \u002F>\n\u003C\u002Ftemplate>\n",[99,31021,31022,31032,31042,31052,31056,31072,31080,31084,31092,31106,31132,31140,31144,31179],{"__ignoreMap":178},[220,31023,31024,31026,31028,31030],{"class":222,"line":223},[220,31025,343],{"class":264},[220,31027,2590],{"class":346},[220,31029,2593],{"class":226},[220,31031,359],{"class":264},[220,31033,31034,31036,31038,31040],{"class":222,"line":179},[220,31035,261],{"class":260},[220,31037,2602],{"class":264},[220,31039,268],{"class":260},[220,31041,2607],{"class":230},[220,31043,31044,31046,31048,31050],{"class":222,"line":389},[220,31045,261],{"class":260},[220,31047,27220],{"class":264},[220,31049,268],{"class":260},[220,31051,271],{"class":230},[220,31053,31054],{"class":222,"line":399},[220,31055,647],{"emptyLinePlaceholder":194},[220,31057,31058,31060,31062,31064,31066,31068,31070],{"class":222,"line":644},[220,31059,1735],{"class":260},[220,31061,10532],{"class":420},[220,31063,1741],{"class":260},[220,31065,2623],{"class":226},[220,31067,2626],{"class":264},[220,31069,8673],{"class":420},[220,31071,2632],{"class":264},[220,31073,31074,31076,31078],{"class":222,"line":650},[220,31075,402],{"class":264},[220,31077,2590],{"class":346},[220,31079,359],{"class":264},[220,31081,31082],{"class":222,"line":656},[220,31083,647],{"emptyLinePlaceholder":194},[220,31085,31086,31088,31090],{"class":222,"line":673},[220,31087,343],{"class":264},[220,31089,2519],{"class":346},[220,31091,359],{"class":264},[220,31093,31094,31096,31098,31100,31102,31104],{"class":222,"line":682},[220,31095,364],{"class":264},[220,31097,347],{"class":346},[220,31099,350],{"class":226},[220,31101,353],{"class":264},[220,31103,356],{"class":230},[220,31105,359],{"class":264},[220,31107,31108,31110,31112,31114,31116,31118,31120,31122,31124,31126,31128,31130],{"class":222,"line":691},[220,31109,2550],{"class":264},[220,31111,367],{"class":346},[220,31113,20336],{"class":226},[220,31115,353],{"class":264},[220,31117,27308],{"class":230},[220,31119,20343],{"class":226},[220,31121,353],{"class":264},[220,31123,27315],{"class":230},[220,31125,10688],{"class":226},[220,31127,353],{"class":264},[220,31129,10693],{"class":230},[220,31131,386],{"class":264},[220,31133,31134,31136,31138],{"class":222,"line":696},[220,31135,2567],{"class":264},[220,31137,347],{"class":346},[220,31139,359],{"class":264},[220,31141,31142],{"class":222,"line":702},[220,31143,647],{"emptyLinePlaceholder":194},[220,31145,31146,31148,31150,31152,31154,31156,31158,31160,31163,31165,31167,31170,31173,31175,31177],{"class":222,"line":718},[220,31147,364],{"class":264},[220,31149,30023],{"class":346},[220,31151,12943],{"class":226},[220,31153,353],{"class":264},[220,31155,30030],{"class":230},[220,31157,30033],{"class":226},[220,31159,353],{"class":264},[220,31161,31162],{"class":230},"\"0\"",[220,31164,30044],{"class":226},[220,31166,353],{"class":264},[220,31168,31169],{"class":230},"\"360\"",[220,31171,31172],{"class":226}," v-model.number",[220,31174,353],{"class":264},[220,31176,10693],{"class":230},[220,31178,386],{"class":264},[220,31180,31181,31183,31185],{"class":222,"line":727},[220,31182,402],{"class":264},[220,31184,2519],{"class":346},[220,31186,359],{"class":264},[15,31188,26761,31189,27431],{},[99,31190,10764],{},[15,31192,26768,31193,26771],{},[56,31194,1160],{"href":1159},[23,31196,31198],{"id":31197},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,31200,27442,31201,27447],{},[56,31202,31204],{"href":31203},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,31206,1474],{"id":1473},[1504,31208,31209],{},"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":178,"searchDepth":179,"depth":179,"links":31211},[31212,31213,31214,31215,31216,31217,31218],{"id":26218,"depth":179,"text":26219},{"id":26868,"depth":179,"text":26869},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":31197,"depth":179,"text":31198},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":31219},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":31226,"title":31204,"body":31227,"category":2240,"description":31893,"exclude":190,"extension":191,"forceFramework":190,"icon":28374,"meta":31894,"navigation":194,"path":31203,"seo":31895,"stem":31896,"__hash__":31897},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":31228,"toc":31886},[31229,31233,31236,31243,31249,31301,31304,31307,31400,31404,31411,31561,31565,31568,31768,31775,31863,31869,31873,31883],[11,31230,31232],{"id":31231},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,31234,31235],{},"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,31237,31239,31240],{"id":31238},"nuxt-clientonly","Nuxt: ",[99,31241,31242],{},"\u003CClientOnly>",[15,31244,31245,31246,31248],{},"Nuxt provides a built-in ",[99,31247,31242],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,31250,31252],{"className":334,"code":31251,"language":336,"meta":178,"style":178},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\u003C\u002FClientOnly>\n",[99,31253,31254,31263,31277,31285,31293],{"__ignoreMap":178},[220,31255,31256,31258,31261],{"class":222,"line":223},[220,31257,343],{"class":264},[220,31259,31260],{"class":346},"ClientOnly",[220,31262,359],{"class":264},[220,31264,31265,31267,31269,31271,31273,31275],{"class":222,"line":179},[220,31266,364],{"class":264},[220,31268,347],{"class":346},[220,31270,350],{"class":226},[220,31272,353],{"class":264},[220,31274,356],{"class":230},[220,31276,359],{"class":264},[220,31278,31279,31281,31283],{"class":222,"line":389},[220,31280,2550],{"class":264},[220,31282,367],{"class":346},[220,31284,386],{"class":264},[220,31286,31287,31289,31291],{"class":222,"line":399},[220,31288,2567],{"class":264},[220,31290,347],{"class":346},[220,31292,359],{"class":264},[220,31294,31295,31297,31299],{"class":222,"line":644},[220,31296,402],{"class":264},[220,31298,31260],{"class":346},[220,31300,359],{"class":264},[15,31302,31303],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,31305,31306],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,31308,31310],{"className":334,"code":31309,"language":336,"meta":178,"style":178},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\n \u003Ctemplate #fallback>\n \u003Cdiv class=\"w-full h-64 bg-gray-900 animate-pulse rounded\" \u002F>\n \u003C\u002Ftemplate>\n\u003C\u002FClientOnly>\n",[99,31311,31312,31320,31334,31342,31350,31354,31367,31384,31392],{"__ignoreMap":178},[220,31313,31314,31316,31318],{"class":222,"line":223},[220,31315,343],{"class":264},[220,31317,31260],{"class":346},[220,31319,359],{"class":264},[220,31321,31322,31324,31326,31328,31330,31332],{"class":222,"line":179},[220,31323,364],{"class":264},[220,31325,347],{"class":346},[220,31327,350],{"class":226},[220,31329,353],{"class":264},[220,31331,356],{"class":230},[220,31333,359],{"class":264},[220,31335,31336,31338,31340],{"class":222,"line":389},[220,31337,2550],{"class":264},[220,31339,367],{"class":346},[220,31341,386],{"class":264},[220,31343,31344,31346,31348],{"class":222,"line":399},[220,31345,2567],{"class":264},[220,31347,347],{"class":346},[220,31349,359],{"class":264},[220,31351,31352],{"class":222,"line":644},[220,31353,647],{"emptyLinePlaceholder":194},[220,31355,31356,31358,31360,31363,31365],{"class":222,"line":650},[220,31357,364],{"class":264},[220,31359,2519],{"class":346},[220,31361,31362],{"class":264}," #",[220,31364,3936],{"class":226},[220,31366,359],{"class":264},[220,31368,31369,31371,31373,31375,31377,31380,31382],{"class":222,"line":656},[220,31370,2550],{"class":264},[220,31372,3398],{"class":346},[220,31374,350],{"class":226},[220,31376,353],{"class":264},[220,31378,31379],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,31381,3412],{"class":3411},[220,31383,359],{"class":264},[220,31385,31386,31388,31390],{"class":222,"line":673},[220,31387,2567],{"class":264},[220,31389,2519],{"class":346},[220,31391,359],{"class":264},[220,31393,31394,31396,31398],{"class":222,"line":682},[220,31395,402],{"class":264},[220,31397,31260],{"class":346},[220,31399,359],{"class":264},[23,31401,31403],{"id":31402},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,31405,31406,31407,31410],{},"If you're using Vue SSR without Nuxt, use ",[99,31408,31409],{},"v-if"," with a mounted flag:",[212,31412,31414],{"className":11668,"code":31413,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"w-full h-64\">\n \u003CShader v-if=\"isMounted\" class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,31415,31416,31426,31436,31440,31457,31474,31482,31486,31494,31508,31529,31537,31545,31553],{"__ignoreMap":178},[220,31417,31418,31420,31422,31424],{"class":222,"line":223},[220,31419,343],{"class":264},[220,31421,2590],{"class":346},[220,31423,2593],{"class":226},[220,31425,359],{"class":264},[220,31427,31428,31430,31432,31434],{"class":222,"line":179},[220,31429,261],{"class":260},[220,31431,3443],{"class":264},[220,31433,268],{"class":260},[220,31435,2607],{"class":230},[220,31437,31438],{"class":222,"line":389},[220,31439,647],{"emptyLinePlaceholder":194},[220,31441,31442,31444,31447,31449,31451,31453,31455],{"class":222,"line":399},[220,31443,1735],{"class":260},[220,31445,31446],{"class":420}," isMounted",[220,31448,1741],{"class":260},[220,31450,2623],{"class":226},[220,31452,2626],{"class":264},[220,31454,2629],{"class":420},[220,31456,2632],{"class":264},[220,31458,31459,31461,31463,31465,31468,31470,31472],{"class":222,"line":644},[220,31460,3484],{"class":226},[220,31462,3600],{"class":264},[220,31464,2762],{"class":260},[220,31466,31467],{"class":264}," { isMounted.value ",[220,31469,353],{"class":260},[220,31471,2911],{"class":420},[220,31473,11617],{"class":264},[220,31475,31476,31478,31480],{"class":222,"line":650},[220,31477,402],{"class":264},[220,31479,2590],{"class":346},[220,31481,359],{"class":264},[220,31483,31484],{"class":222,"line":656},[220,31485,647],{"emptyLinePlaceholder":194},[220,31487,31488,31490,31492],{"class":222,"line":673},[220,31489,343],{"class":264},[220,31491,2519],{"class":346},[220,31493,359],{"class":264},[220,31495,31496,31498,31500,31502,31504,31506],{"class":222,"line":682},[220,31497,364],{"class":264},[220,31499,3398],{"class":346},[220,31501,350],{"class":226},[220,31503,353],{"class":264},[220,31505,356],{"class":230},[220,31507,359],{"class":264},[220,31509,31510,31512,31514,31516,31518,31521,31523,31525,31527],{"class":222,"line":691},[220,31511,2550],{"class":264},[220,31513,347],{"class":346},[220,31515,3362],{"class":226},[220,31517,353],{"class":264},[220,31519,31520],{"class":230},"\"isMounted\"",[220,31522,350],{"class":226},[220,31524,353],{"class":264},[220,31526,356],{"class":230},[220,31528,359],{"class":264},[220,31530,31531,31533,31535],{"class":222,"line":696},[220,31532,2813],{"class":264},[220,31534,367],{"class":346},[220,31536,386],{"class":264},[220,31538,31539,31541,31543],{"class":222,"line":702},[220,31540,2828],{"class":264},[220,31542,347],{"class":346},[220,31544,359],{"class":264},[220,31546,31547,31549,31551],{"class":222,"line":718},[220,31548,2567],{"class":264},[220,31550,3398],{"class":346},[220,31552,359],{"class":264},[220,31554,31555,31557,31559],{"class":222,"line":727},[220,31556,402],{"class":264},[220,31558,2519],{"class":346},[220,31560,359],{"class":264},[23,31562,31564],{"id":31563},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,31566,31567],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,31569,31571],{"className":11668,"code":31570,"language":11670,"meta":178,"style":178},"\u003Cscript setup>\nimport { defineAsyncComponent, ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\n\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\nconst Shader = defineAsyncComponent(() => import('shaders\u002Fvue').then(m => m.Shader))\nconst LinearGradient = defineAsyncComponent(() => import('shaders\u002Fvue').then(m => m.LinearGradient))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CShader v-if=\"isMounted\">\n \u003CLinearGradient \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,31572,31573,31583,31594,31598,31614,31630,31634,31639,31676,31710,31718,31722,31730,31744,31752,31760],{"__ignoreMap":178},[220,31574,31575,31577,31579,31581],{"class":222,"line":223},[220,31576,343],{"class":264},[220,31578,2590],{"class":346},[220,31580,2593],{"class":226},[220,31582,359],{"class":264},[220,31584,31585,31587,31590,31592],{"class":222,"line":179},[220,31586,261],{"class":260},[220,31588,31589],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,31591,268],{"class":260},[220,31593,2607],{"class":230},[220,31595,31596],{"class":222,"line":389},[220,31597,647],{"emptyLinePlaceholder":194},[220,31599,31600,31602,31604,31606,31608,31610,31612],{"class":222,"line":399},[220,31601,1735],{"class":260},[220,31603,31446],{"class":420},[220,31605,1741],{"class":260},[220,31607,2623],{"class":226},[220,31609,2626],{"class":264},[220,31611,2629],{"class":420},[220,31613,2632],{"class":264},[220,31615,31616,31618,31620,31622,31624,31626,31628],{"class":222,"line":644},[220,31617,3484],{"class":226},[220,31619,3600],{"class":264},[220,31621,2762],{"class":260},[220,31623,31467],{"class":264},[220,31625,353],{"class":260},[220,31627,2911],{"class":420},[220,31629,11617],{"class":264},[220,31631,31632],{"class":222,"line":650},[220,31633,647],{"emptyLinePlaceholder":194},[220,31635,31636],{"class":222,"line":656},[220,31637,31638],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,31640,31641,31643,31646,31648,31651,31653,31655,31657,31659,31662,31664,31666,31668,31671,31673],{"class":222,"line":673},[220,31642,1735],{"class":260},[220,31644,31645],{"class":420}," Shader",[220,31647,1741],{"class":260},[220,31649,31650],{"class":226}," defineAsyncComponent",[220,31652,3600],{"class":264},[220,31654,2762],{"class":260},[220,31656,27775],{"class":260},[220,31658,2626],{"class":264},[220,31660,31661],{"class":230},"'shaders\u002Fvue'",[220,31663,15437],{"class":264},[220,31665,3615],{"class":226},[220,31667,2626],{"class":264},[220,31669,31670],{"class":3621},"m",[220,31672,10830],{"class":260},[220,31674,31675],{"class":264}," m.Shader))\n",[220,31677,31678,31680,31683,31685,31687,31689,31691,31693,31695,31697,31699,31701,31703,31705,31707],{"class":222,"line":682},[220,31679,1735],{"class":260},[220,31681,31682],{"class":420}," LinearGradient",[220,31684,1741],{"class":260},[220,31686,31650],{"class":226},[220,31688,3600],{"class":264},[220,31690,2762],{"class":260},[220,31692,27775],{"class":260},[220,31694,2626],{"class":264},[220,31696,31661],{"class":230},[220,31698,15437],{"class":264},[220,31700,3615],{"class":226},[220,31702,2626],{"class":264},[220,31704,31670],{"class":3621},[220,31706,10830],{"class":260},[220,31708,31709],{"class":264}," m.LinearGradient))\n",[220,31711,31712,31714,31716],{"class":222,"line":691},[220,31713,402],{"class":264},[220,31715,2590],{"class":346},[220,31717,359],{"class":264},[220,31719,31720],{"class":222,"line":696},[220,31721,647],{"emptyLinePlaceholder":194},[220,31723,31724,31726,31728],{"class":222,"line":702},[220,31725,343],{"class":264},[220,31727,2519],{"class":346},[220,31729,359],{"class":264},[220,31731,31732,31734,31736,31738,31740,31742],{"class":222,"line":718},[220,31733,364],{"class":264},[220,31735,347],{"class":346},[220,31737,3362],{"class":226},[220,31739,353],{"class":264},[220,31741,31520],{"class":230},[220,31743,359],{"class":264},[220,31745,31746,31748,31750],{"class":222,"line":727},[220,31747,2550],{"class":264},[220,31749,367],{"class":346},[220,31751,386],{"class":264},[220,31753,31754,31756,31758],{"class":222,"line":2664},[220,31755,2567],{"class":264},[220,31757,347],{"class":346},[220,31759,359],{"class":264},[220,31761,31762,31764,31766],{"class":222,"line":3522},[220,31763,402],{"class":264},[220,31765,2519],{"class":346},[220,31767,359],{"class":264},[15,31769,31770,31771,31774],{},"Or in Nuxt, use ",[99,31772,31773],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,31776,31778],{"className":251,"code":31777,"language":253,"meta":178,"style":178},"\u002F\u002F plugins\u002Fshaders.client.ts\nimport { defineNuxtPlugin } from '#app'\nimport { Shader, LinearGradient } from 'shaders\u002Fvue'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.component('Shader', Shader)\n nuxtApp.vueApp.component('LinearGradient', LinearGradient)\n})\n",[99,31779,31780,31785,31797,31807,31811,31831,31846,31859],{"__ignoreMap":178},[220,31781,31782],{"class":222,"line":223},[220,31783,31784],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,31786,31787,31789,31792,31794],{"class":222,"line":179},[220,31788,261],{"class":260},[220,31790,31791],{"class":264}," { defineNuxtPlugin } ",[220,31793,268],{"class":260},[220,31795,31796],{"class":230}," '#app'\n",[220,31798,31799,31801,31803,31805],{"class":222,"line":389},[220,31800,261],{"class":260},[220,31802,27220],{"class":264},[220,31804,268],{"class":260},[220,31806,271],{"class":230},[220,31808,31809],{"class":222,"line":399},[220,31810,647],{"emptyLinePlaceholder":194},[220,31812,31813,31815,31817,31820,31822,31825,31827,31829],{"class":222,"line":644},[220,31814,27233],{"class":260},[220,31816,27236],{"class":260},[220,31818,31819],{"class":226}," defineNuxtPlugin",[220,31821,3897],{"class":264},[220,31823,31824],{"class":3621},"nuxtApp",[220,31826,4168],{"class":264},[220,31828,2762],{"class":260},[220,31830,3241],{"class":264},[220,31832,31833,31836,31838,31840,31843],{"class":222,"line":650},[220,31834,31835],{"class":264}," nuxtApp.vueApp.",[220,31837,30638],{"class":226},[220,31839,2626],{"class":264},[220,31841,31842],{"class":230},"'Shader'",[220,31844,31845],{"class":264},", Shader)\n",[220,31847,31848,31850,31852,31854,31856],{"class":222,"line":656},[220,31849,31835],{"class":264},[220,31851,30638],{"class":226},[220,31853,2626],{"class":264},[220,31855,2462],{"class":230},[220,31857,31858],{"class":264},", LinearGradient)\n",[220,31860,31861],{"class":222,"line":673},[220,31862,1792],{"class":264},[15,31864,1839,31865,31868],{},[99,31866,31867],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,31870,31872],{"id":31871},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,31874,1839,31875,12250,31877,31879,31880,31882],{},[99,31876,101],{},[99,31878,586],{}," 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 ",[99,31881,31242],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,31884,31885],{},"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":178,"searchDepth":179,"depth":179,"links":31887},[31888,31890,31891,31892],{"id":31238,"depth":179,"text":31889},"Nuxt: \u003CClientOnly>",{"id":31402,"depth":179,"text":31403},{"id":31563,"depth":179,"text":31564},{"id":31871,"depth":179,"text":31872},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":31204,"description":31893},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[31899,32240,32534,32812,33069,33402,33679,33879,34155,34355,34631,34831,35031,35364,35565,35897,36097,36374,36575,36908,37184,37384,37660,37936,38212,38411,38611,38915,39191,39480,39680,39956,40288,40488,40764,41040,41333,41626,41901,42100,42479,42733,43066,43266,43542,43875,44151,44427,44670,45039,45315,45560,45834,46110,46310,46586,46786,47062,47338,47614,47814,48090,48383,48583,48859,49059,49335,49535,49735,49935,50209,50540,50872,51203,51459,51659,51935,52205,52450,52826,53097,53297,53573,53867,54073,54273,54520,54720,54996,55196,55490,55760,56036,56236,56512,56788,57043,57304,57636,57968,58166,58442,58642,59020,59220,59420,59696,59896,60190,60466,60742,61075,61351,61596,61872,62072,62272,62471,62747,63079,63411,63687,63942,64142,64520,64812,65145,65403,65735,65991,66267,66543,66743,67075,67351,67683,67975,68251,68451,68696,69027,69227,69503,69883,70083,70328,70604,70860,71115,71371,71647,71891,72223,72423,72715,73047,73247,73523,73721,73968,74262,74538,74737,75030,75274,75529,75861,76137,76460,76705,76905,77181,77381,77713,77989,78265,78557,78890,79090,79504,79704,79904,80236,80512,80712,80912,81112,81444,81644],{"id":31900,"title":31901,"body":31902,"category":32234,"componentType":25883,"description":31909,"extension":191,"meta":32235,"navigation":194,"path":32236,"requiresChild":194,"seo":32237,"stem":32238,"__hash__":32239},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":31903,"toc":32230},[31904,31907,31910,31913,31916,31920,31924,32228],[11,31905,31901],{"id":31906},"angularblur",[15,31908,31909],{},"Radial motion blur rotating around a center point",[31911,31912],"shader-preview",{"component":31901},[23,31914,31915],{"id":26533},"Props",[31917,31918],"props-table",{":props":31919},"[{\"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,31921,31923],{"id":31922},"usage","Usage",[246,31925,31926,31984,32043,32099,32157],{":tabs":1557},[212,31927,31929],{"className":334,"code":31928,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31930,31931,31939,31946,31955,31960,31968,31976],{"__ignoreMap":178},[220,31932,31933,31935,31937],{"class":222,"line":223},[220,31934,343],{"class":264},[220,31936,347],{"class":346},[220,31938,359],{"class":264},[220,31940,31941,31943],{"class":222,"line":179},[220,31942,364],{"class":264},[220,31944,31945],{"class":346},"AngularBlur\n",[220,31947,31948,31950,31952],{"class":222,"line":389},[220,31949,20371],{"class":226},[220,31951,353],{"class":264},[220,31953,31954],{"class":230},"\"20\"\n",[220,31956,31957],{"class":222,"line":399},[220,31958,31959],{"class":264}," >\n",[220,31961,31962,31964,31966],{"class":222,"line":644},[220,31963,2550],{"class":264},[220,31965,2553],{"class":346},[220,31967,386],{"class":264},[220,31969,31970,31972,31974],{"class":222,"line":650},[220,31971,2567],{"class":264},[220,31973,31901],{"class":346},[220,31975,359],{"class":264},[220,31977,31978,31980,31982],{"class":222,"line":656},[220,31979,402],{"class":264},[220,31981,347],{"class":346},[220,31983,359],{"class":264},[212,31985,31987],{"className":409,"code":31986,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31988,31989,31997,32003,32015,32019,32027,32035],{"__ignoreMap":178},[220,31990,31991,31993,31995],{"class":222,"line":223},[220,31992,343],{"class":264},[220,31994,347],{"class":420},[220,31996,359],{"class":264},[220,31998,31999,32001],{"class":222,"line":179},[220,32000,364],{"class":264},[220,32002,31945],{"class":420},[220,32004,32005,32007,32009,32011,32013],{"class":222,"line":389},[220,32006,20482],{"class":226},[220,32008,353],{"class":260},[220,32010,743],{"class":264},[220,32012,24800],{"class":420},[220,32014,749],{"class":264},[220,32016,32017],{"class":222,"line":399},[220,32018,31959],{"class":264},[220,32020,32021,32023,32025],{"class":222,"line":644},[220,32022,2550],{"class":264},[220,32024,2553],{"class":420},[220,32026,386],{"class":264},[220,32028,32029,32031,32033],{"class":222,"line":650},[220,32030,2567],{"class":264},[220,32032,31901],{"class":420},[220,32034,359],{"class":264},[220,32036,32037,32039,32041],{"class":222,"line":656},[220,32038,402],{"class":264},[220,32040,347],{"class":420},[220,32042,359],{"class":264},[212,32044,32045],{"className":2844,"code":31986,"language":2846,"meta":178,"style":178},[99,32046,32047,32055,32061,32071,32075,32083,32091],{"__ignoreMap":178},[220,32048,32049,32051,32053],{"class":222,"line":223},[220,32050,343],{"class":264},[220,32052,347],{"class":420},[220,32054,359],{"class":264},[220,32056,32057,32059],{"class":222,"line":179},[220,32058,364],{"class":264},[220,32060,31945],{"class":420},[220,32062,32063,32065,32067,32069],{"class":222,"line":389},[220,32064,20482],{"class":226},[220,32066,29871],{"class":264},[220,32068,24800],{"class":420},[220,32070,749],{"class":264},[220,32072,32073],{"class":222,"line":399},[220,32074,31959],{"class":264},[220,32076,32077,32079,32081],{"class":222,"line":644},[220,32078,2550],{"class":264},[220,32080,2553],{"class":420},[220,32082,386],{"class":264},[220,32084,32085,32087,32089],{"class":222,"line":650},[220,32086,2567],{"class":264},[220,32088,31901],{"class":420},[220,32090,359],{"class":264},[220,32092,32093,32095,32097],{"class":222,"line":656},[220,32094,402],{"class":264},[220,32096,347],{"class":420},[220,32098,359],{"class":264},[212,32100,32101],{"className":468,"code":31986,"language":469,"meta":178,"style":178},[99,32102,32103,32111,32117,32129,32133,32141,32149],{"__ignoreMap":178},[220,32104,32105,32107,32109],{"class":222,"line":223},[220,32106,343],{"class":264},[220,32108,347],{"class":420},[220,32110,359],{"class":264},[220,32112,32113,32115],{"class":222,"line":179},[220,32114,364],{"class":264},[220,32116,31945],{"class":420},[220,32118,32119,32121,32123,32125,32127],{"class":222,"line":389},[220,32120,20482],{"class":226},[220,32122,353],{"class":260},[220,32124,743],{"class":264},[220,32126,24800],{"class":420},[220,32128,749],{"class":264},[220,32130,32131],{"class":222,"line":399},[220,32132,31959],{"class":264},[220,32134,32135,32137,32139],{"class":222,"line":644},[220,32136,2550],{"class":264},[220,32138,2553],{"class":420},[220,32140,386],{"class":264},[220,32142,32143,32145,32147],{"class":222,"line":650},[220,32144,2567],{"class":264},[220,32146,31901],{"class":420},[220,32148,359],{"class":264},[220,32150,32151,32153,32155],{"class":222,"line":656},[220,32152,402],{"class":264},[220,32154,347],{"class":420},[220,32156,359],{"class":264},[212,32158,32160],{"className":251,"code":32159,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'AngularBlur', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,32161,32162,32172,32176,32190,32194,32208,32216,32220,32224],{"__ignoreMap":178},[220,32163,32164,32166,32168,32170],{"class":222,"line":223},[220,32165,261],{"class":260},[220,32167,11512],{"class":264},[220,32169,268],{"class":260},[220,32171,4007],{"class":230},[220,32173,32174],{"class":222,"line":179},[220,32175,647],{"emptyLinePlaceholder":194},[220,32177,32178,32180,32182,32184,32186,32188],{"class":222,"line":389},[220,32179,1735],{"class":260},[220,32181,1738],{"class":420},[220,32183,1741],{"class":260},[220,32185,1744],{"class":260},[220,32187,1747],{"class":226},[220,32189,1750],{"class":264},[220,32191,32192],{"class":222,"line":399},[220,32193,1765],{"class":264},[220,32195,32196,32198,32201,32204,32206],{"class":222,"line":644},[220,32197,1770],{"class":264},[220,32199,32200],{"class":230},"'AngularBlur'",[220,32202,32203],{"class":264},", props: { intensity: ",[220,32205,24800],{"class":420},[220,32207,7546],{"class":264},[220,32209,32210,32212,32214],{"class":222,"line":650},[220,32211,7014],{"class":264},[220,32213,3206],{"class":230},[220,32215,2465],{"class":264},[220,32217,32218],{"class":222,"line":656},[220,32219,7031],{"class":264},[220,32221,32222],{"class":222,"line":673},[220,32223,1787],{"class":264},[220,32225,32226],{"class":222,"line":682},[220,32227,1792],{"class":264},[1504,32229,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32231},[32232,32233],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":31901,"description":31909},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":32241,"title":32242,"body":32243,"category":15908,"componentType":25877,"description":32250,"extension":191,"meta":32528,"navigation":194,"path":32529,"requiresChild":32530,"seo":32531,"stem":32532,"__hash__":32533},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":32244,"toc":32524},[32245,32248,32251,32253,32255,32258,32260,32522],[11,32246,32242],{"id":32247},"arc",[15,32249,32250],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[31911,32252],{"component":32242},[23,32254,31915],{"id":26533},[31917,32256],{":props":32257},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the arc\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the arc\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.38\",\"description\":\"Radius of the pie sector\"},{\"name\":\"aperture\",\"type\":\"number\",\"default\":\"270\",\"description\":\"Aperture angle of the wedge in degrees (360 = full 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,32259,31923],{"id":31922},[246,32261,32262,32311,32362,32410,32460],{":tabs":1557},[212,32263,32265],{"className":334,"code":32264,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,32266,32267,32275,32282,32290,32299,32303],{"__ignoreMap":178},[220,32268,32269,32271,32273],{"class":222,"line":223},[220,32270,343],{"class":264},[220,32272,347],{"class":346},[220,32274,359],{"class":264},[220,32276,32277,32279],{"class":222,"line":179},[220,32278,364],{"class":264},[220,32280,32281],{"class":346},"Arc\n",[220,32283,32284,32286,32288],{"class":222,"line":389},[220,32285,9635],{"class":226},[220,32287,353],{"class":264},[220,32289,9591],{"class":230},[220,32291,32292,32294,32296],{"class":222,"line":399},[220,32293,17405],{"class":226},[220,32295,353],{"class":264},[220,32297,32298],{"class":230},"\"0.38\"\n",[220,32300,32301],{"class":222,"line":644},[220,32302,1234],{"class":264},[220,32304,32305,32307,32309],{"class":222,"line":650},[220,32306,402],{"class":264},[220,32308,347],{"class":346},[220,32310,359],{"class":264},[212,32312,32314],{"className":409,"code":32313,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,32315,32316,32324,32330,32338,32350,32354],{"__ignoreMap":178},[220,32317,32318,32320,32322],{"class":222,"line":223},[220,32319,343],{"class":264},[220,32321,347],{"class":420},[220,32323,359],{"class":264},[220,32325,32326,32328],{"class":222,"line":179},[220,32327,364],{"class":264},[220,32329,32281],{"class":420},[220,32331,32332,32334,32336],{"class":222,"line":389},[220,32333,9635],{"class":226},[220,32335,353],{"class":260},[220,32337,9591],{"class":230},[220,32339,32340,32342,32344,32346,32348],{"class":222,"line":399},[220,32341,9645],{"class":226},[220,32343,353],{"class":260},[220,32345,743],{"class":264},[220,32347,24738],{"class":420},[220,32349,749],{"class":264},[220,32351,32352],{"class":222,"line":644},[220,32353,1234],{"class":264},[220,32355,32356,32358,32360],{"class":222,"line":650},[220,32357,402],{"class":264},[220,32359,347],{"class":420},[220,32361,359],{"class":264},[212,32363,32364],{"className":2844,"code":32313,"language":2846,"meta":178,"style":178},[99,32365,32366,32374,32380,32388,32398,32402],{"__ignoreMap":178},[220,32367,32368,32370,32372],{"class":222,"line":223},[220,32369,343],{"class":264},[220,32371,347],{"class":420},[220,32373,359],{"class":264},[220,32375,32376,32378],{"class":222,"line":179},[220,32377,364],{"class":264},[220,32379,32281],{"class":420},[220,32381,32382,32384,32386],{"class":222,"line":389},[220,32383,9635],{"class":226},[220,32385,353],{"class":264},[220,32387,9591],{"class":230},[220,32389,32390,32392,32394,32396],{"class":222,"line":399},[220,32391,9645],{"class":226},[220,32393,29871],{"class":264},[220,32395,24738],{"class":420},[220,32397,749],{"class":264},[220,32399,32400],{"class":222,"line":644},[220,32401,1234],{"class":264},[220,32403,32404,32406,32408],{"class":222,"line":650},[220,32405,402],{"class":264},[220,32407,347],{"class":420},[220,32409,359],{"class":264},[212,32411,32412],{"className":468,"code":32313,"language":469,"meta":178,"style":178},[99,32413,32414,32422,32428,32436,32448,32452],{"__ignoreMap":178},[220,32415,32416,32418,32420],{"class":222,"line":223},[220,32417,343],{"class":264},[220,32419,347],{"class":420},[220,32421,359],{"class":264},[220,32423,32424,32426],{"class":222,"line":179},[220,32425,364],{"class":264},[220,32427,32281],{"class":420},[220,32429,32430,32432,32434],{"class":222,"line":389},[220,32431,9635],{"class":226},[220,32433,353],{"class":260},[220,32435,9591],{"class":230},[220,32437,32438,32440,32442,32444,32446],{"class":222,"line":399},[220,32439,9645],{"class":226},[220,32441,353],{"class":260},[220,32443,743],{"class":264},[220,32445,24738],{"class":420},[220,32447,749],{"class":264},[220,32449,32450],{"class":222,"line":644},[220,32451,1234],{"class":264},[220,32453,32454,32456,32458],{"class":222,"line":650},[220,32455,402],{"class":264},[220,32457,347],{"class":420},[220,32459,359],{"class":264},[212,32461,32463],{"className":251,"code":32462,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Arc', props: { color: '#ffffff', radius: 0.38 } }\n ]\n})\n",[99,32464,32465,32475,32479,32493,32497,32514,32518],{"__ignoreMap":178},[220,32466,32467,32469,32471,32473],{"class":222,"line":223},[220,32468,261],{"class":260},[220,32470,11512],{"class":264},[220,32472,268],{"class":260},[220,32474,4007],{"class":230},[220,32476,32477],{"class":222,"line":179},[220,32478,647],{"emptyLinePlaceholder":194},[220,32480,32481,32483,32485,32487,32489,32491],{"class":222,"line":389},[220,32482,1735],{"class":260},[220,32484,1738],{"class":420},[220,32486,1741],{"class":260},[220,32488,1744],{"class":260},[220,32490,1747],{"class":226},[220,32492,1750],{"class":264},[220,32494,32495],{"class":222,"line":399},[220,32496,1765],{"class":264},[220,32498,32499,32501,32504,32506,32508,32510,32512],{"class":222,"line":644},[220,32500,1770],{"class":264},[220,32502,32503],{"class":230},"'Arc'",[220,32505,1776],{"class":264},[220,32507,10169],{"class":230},[220,32509,6566],{"class":264},[220,32511,24738],{"class":420},[220,32513,1782],{"class":264},[220,32515,32516],{"class":222,"line":650},[220,32517,1787],{"class":264},[220,32519,32520],{"class":222,"line":656},[220,32521,1792],{"class":264},[1504,32523,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32525},[32526,32527],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":32242,"description":32250},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":32535,"title":32536,"body":32537,"category":32806,"componentType":25883,"description":32544,"extension":191,"meta":32807,"navigation":194,"path":32808,"requiresChild":194,"seo":32809,"stem":32810,"__hash__":32811},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":32538,"toc":32802},[32539,32542,32545,32547,32549,32552,32554,32799],[11,32540,32536],{"id":32541},"ascii",[15,32543,32544],{},"Convert imagery to ASCII character art",[31911,32546],{"component":32536},[23,32548,31915],{"id":26533},[31917,32550],{":props":32551},"[{\"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,32553,31923],{"id":31922},[246,32555,32556,32601,32645,32689,32733],{":tabs":1557},[212,32557,32559],{"className":334,"code":32558,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,32560,32561,32569,32577,32585,32593],{"__ignoreMap":178},[220,32562,32563,32565,32567],{"class":222,"line":223},[220,32564,343],{"class":264},[220,32566,347],{"class":346},[220,32568,359],{"class":264},[220,32570,32571,32573,32575],{"class":222,"line":179},[220,32572,364],{"class":264},[220,32574,32536],{"class":346},[220,32576,359],{"class":264},[220,32578,32579,32581,32583],{"class":222,"line":389},[220,32580,2550],{"class":264},[220,32582,2553],{"class":346},[220,32584,386],{"class":264},[220,32586,32587,32589,32591],{"class":222,"line":399},[220,32588,2567],{"class":264},[220,32590,32536],{"class":346},[220,32592,359],{"class":264},[220,32594,32595,32597,32599],{"class":222,"line":644},[220,32596,402],{"class":264},[220,32598,347],{"class":346},[220,32600,359],{"class":264},[212,32602,32603],{"className":409,"code":32558,"language":411,"meta":178,"style":178},[99,32604,32605,32613,32621,32629,32637],{"__ignoreMap":178},[220,32606,32607,32609,32611],{"class":222,"line":223},[220,32608,343],{"class":264},[220,32610,347],{"class":420},[220,32612,359],{"class":264},[220,32614,32615,32617,32619],{"class":222,"line":179},[220,32616,364],{"class":264},[220,32618,32536],{"class":420},[220,32620,359],{"class":264},[220,32622,32623,32625,32627],{"class":222,"line":389},[220,32624,2550],{"class":264},[220,32626,2553],{"class":420},[220,32628,386],{"class":264},[220,32630,32631,32633,32635],{"class":222,"line":399},[220,32632,2567],{"class":264},[220,32634,32536],{"class":420},[220,32636,359],{"class":264},[220,32638,32639,32641,32643],{"class":222,"line":644},[220,32640,402],{"class":264},[220,32642,347],{"class":420},[220,32644,359],{"class":264},[212,32646,32647],{"className":2844,"code":32558,"language":2846,"meta":178,"style":178},[99,32648,32649,32657,32665,32673,32681],{"__ignoreMap":178},[220,32650,32651,32653,32655],{"class":222,"line":223},[220,32652,343],{"class":264},[220,32654,347],{"class":420},[220,32656,359],{"class":264},[220,32658,32659,32661,32663],{"class":222,"line":179},[220,32660,364],{"class":264},[220,32662,32536],{"class":420},[220,32664,359],{"class":264},[220,32666,32667,32669,32671],{"class":222,"line":389},[220,32668,2550],{"class":264},[220,32670,2553],{"class":420},[220,32672,386],{"class":264},[220,32674,32675,32677,32679],{"class":222,"line":399},[220,32676,2567],{"class":264},[220,32678,32536],{"class":420},[220,32680,359],{"class":264},[220,32682,32683,32685,32687],{"class":222,"line":644},[220,32684,402],{"class":264},[220,32686,347],{"class":420},[220,32688,359],{"class":264},[212,32690,32691],{"className":468,"code":32558,"language":469,"meta":178,"style":178},[99,32692,32693,32701,32709,32717,32725],{"__ignoreMap":178},[220,32694,32695,32697,32699],{"class":222,"line":223},[220,32696,343],{"class":264},[220,32698,347],{"class":420},[220,32700,359],{"class":264},[220,32702,32703,32705,32707],{"class":222,"line":179},[220,32704,364],{"class":264},[220,32706,32536],{"class":420},[220,32708,359],{"class":264},[220,32710,32711,32713,32715],{"class":222,"line":389},[220,32712,2550],{"class":264},[220,32714,2553],{"class":420},[220,32716,386],{"class":264},[220,32718,32719,32721,32723],{"class":222,"line":399},[220,32720,2567],{"class":264},[220,32722,32536],{"class":420},[220,32724,359],{"class":264},[220,32726,32727,32729,32731],{"class":222,"line":644},[220,32728,402],{"class":264},[220,32730,347],{"class":420},[220,32732,359],{"class":264},[212,32734,32736],{"className":251,"code":32735,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ascii', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,32737,32738,32748,32752,32766,32770,32779,32787,32791,32795],{"__ignoreMap":178},[220,32739,32740,32742,32744,32746],{"class":222,"line":223},[220,32741,261],{"class":260},[220,32743,11512],{"class":264},[220,32745,268],{"class":260},[220,32747,4007],{"class":230},[220,32749,32750],{"class":222,"line":179},[220,32751,647],{"emptyLinePlaceholder":194},[220,32753,32754,32756,32758,32760,32762,32764],{"class":222,"line":389},[220,32755,1735],{"class":260},[220,32757,1738],{"class":420},[220,32759,1741],{"class":260},[220,32761,1744],{"class":260},[220,32763,1747],{"class":226},[220,32765,1750],{"class":264},[220,32767,32768],{"class":222,"line":399},[220,32769,1765],{"class":264},[220,32771,32772,32774,32777],{"class":222,"line":644},[220,32773,1770],{"class":264},[220,32775,32776],{"class":230},"'Ascii'",[220,32778,7009],{"class":264},[220,32780,32781,32783,32785],{"class":222,"line":650},[220,32782,7014],{"class":264},[220,32784,3206],{"class":230},[220,32786,2465],{"class":264},[220,32788,32789],{"class":222,"line":656},[220,32790,7031],{"class":264},[220,32792,32793],{"class":222,"line":673},[220,32794,1787],{"class":264},[220,32796,32797],{"class":222,"line":682},[220,32798,1792],{"class":264},[1504,32800,32801],{},"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":178,"searchDepth":179,"depth":179,"links":32803},[32804,32805],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":32536,"description":32544},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":32813,"title":12617,"body":32814,"category":33063,"componentType":25877,"description":32821,"extension":191,"meta":33064,"navigation":194,"path":33065,"requiresChild":32530,"seo":33066,"stem":33067,"__hash__":33068},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":32815,"toc":33059},[32816,32819,32822,32824,32826,32829,32831,33057],[11,32817,12617],{"id":32818},"aurora",[15,32820,32821],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[31911,32823],{"component":12617},[23,32825,31915],{"id":26533},[31917,32827],{":props":32828},"[{\"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,32830,31923],{"id":31922},[246,32832,32833,32874,32918,32958,33000],{":tabs":1557},[212,32834,32836],{"className":334,"code":32835,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,32837,32838,32846,32853,32862,32866],{"__ignoreMap":178},[220,32839,32840,32842,32844],{"class":222,"line":223},[220,32841,343],{"class":264},[220,32843,347],{"class":346},[220,32845,359],{"class":264},[220,32847,32848,32850],{"class":222,"line":179},[220,32849,364],{"class":264},[220,32851,32852],{"class":346},"Aurora\n",[220,32854,32855,32857,32859],{"class":222,"line":389},[220,32856,20371],{"class":226},[220,32858,353],{"class":264},[220,32860,32861],{"class":230},"\"80\"\n",[220,32863,32864],{"class":222,"line":399},[220,32865,1234],{"class":264},[220,32867,32868,32870,32872],{"class":222,"line":644},[220,32869,402],{"class":264},[220,32871,347],{"class":346},[220,32873,359],{"class":264},[212,32875,32877],{"className":409,"code":32876,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,32878,32879,32887,32893,32906,32910],{"__ignoreMap":178},[220,32880,32881,32883,32885],{"class":222,"line":223},[220,32882,343],{"class":264},[220,32884,347],{"class":420},[220,32886,359],{"class":264},[220,32888,32889,32891],{"class":222,"line":179},[220,32890,364],{"class":264},[220,32892,32852],{"class":420},[220,32894,32895,32897,32899,32901,32904],{"class":222,"line":389},[220,32896,20482],{"class":226},[220,32898,353],{"class":260},[220,32900,743],{"class":264},[220,32902,32903],{"class":420},"80",[220,32905,749],{"class":264},[220,32907,32908],{"class":222,"line":399},[220,32909,1234],{"class":264},[220,32911,32912,32914,32916],{"class":222,"line":644},[220,32913,402],{"class":264},[220,32915,347],{"class":420},[220,32917,359],{"class":264},[212,32919,32920],{"className":2844,"code":32876,"language":2846,"meta":178,"style":178},[99,32921,32922,32930,32936,32946,32950],{"__ignoreMap":178},[220,32923,32924,32926,32928],{"class":222,"line":223},[220,32925,343],{"class":264},[220,32927,347],{"class":420},[220,32929,359],{"class":264},[220,32931,32932,32934],{"class":222,"line":179},[220,32933,364],{"class":264},[220,32935,32852],{"class":420},[220,32937,32938,32940,32942,32944],{"class":222,"line":389},[220,32939,20482],{"class":226},[220,32941,29871],{"class":264},[220,32943,32903],{"class":420},[220,32945,749],{"class":264},[220,32947,32948],{"class":222,"line":399},[220,32949,1234],{"class":264},[220,32951,32952,32954,32956],{"class":222,"line":644},[220,32953,402],{"class":264},[220,32955,347],{"class":420},[220,32957,359],{"class":264},[212,32959,32960],{"className":468,"code":32876,"language":469,"meta":178,"style":178},[99,32961,32962,32970,32976,32988,32992],{"__ignoreMap":178},[220,32963,32964,32966,32968],{"class":222,"line":223},[220,32965,343],{"class":264},[220,32967,347],{"class":420},[220,32969,359],{"class":264},[220,32971,32972,32974],{"class":222,"line":179},[220,32973,364],{"class":264},[220,32975,32852],{"class":420},[220,32977,32978,32980,32982,32984,32986],{"class":222,"line":389},[220,32979,20482],{"class":226},[220,32981,353],{"class":260},[220,32983,743],{"class":264},[220,32985,32903],{"class":420},[220,32987,749],{"class":264},[220,32989,32990],{"class":222,"line":399},[220,32991,1234],{"class":264},[220,32993,32994,32996,32998],{"class":222,"line":644},[220,32995,402],{"class":264},[220,32997,347],{"class":420},[220,32999,359],{"class":264},[212,33001,33003],{"className":251,"code":33002,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Aurora', props: { intensity: 80 } }\n ]\n})\n",[99,33004,33005,33015,33019,33033,33037,33049,33053],{"__ignoreMap":178},[220,33006,33007,33009,33011,33013],{"class":222,"line":223},[220,33008,261],{"class":260},[220,33010,11512],{"class":264},[220,33012,268],{"class":260},[220,33014,4007],{"class":230},[220,33016,33017],{"class":222,"line":179},[220,33018,647],{"emptyLinePlaceholder":194},[220,33020,33021,33023,33025,33027,33029,33031],{"class":222,"line":389},[220,33022,1735],{"class":260},[220,33024,1738],{"class":420},[220,33026,1741],{"class":260},[220,33028,1744],{"class":260},[220,33030,1747],{"class":226},[220,33032,1750],{"class":264},[220,33034,33035],{"class":222,"line":399},[220,33036,1765],{"class":264},[220,33038,33039,33041,33043,33045,33047],{"class":222,"line":644},[220,33040,1770],{"class":264},[220,33042,12994],{"class":230},[220,33044,32203],{"class":264},[220,33046,32903],{"class":420},[220,33048,1782],{"class":264},[220,33050,33051],{"class":222,"line":650},[220,33052,1787],{"class":264},[220,33054,33055],{"class":222,"line":656},[220,33056,1792],{"class":264},[1504,33058,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33060},[33061,33062],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":12617,"description":32821},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":33070,"title":33071,"body":33072,"category":33396,"componentType":25883,"description":33079,"extension":191,"meta":33397,"navigation":194,"path":33398,"requiresChild":194,"seo":33399,"stem":33400,"__hash__":33401},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":33073,"toc":33392},[33074,33077,33080,33082,33084,33087,33089,33390],[11,33075,33071],{"id":33076},"barshift",[15,33078,33079],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[31911,33081],{"component":33071},[23,33083,31915],{"id":26533},[31917,33085],{":props":33086},"[{\"name\":\"count\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of bars across the longest viewport dimension\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Maximum displacement per bar\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Randomization seed for per-bar offset variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed — each bar drifts at its own rate and direction\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,33088,31923],{"id":31922},[246,33090,33091,33147,33206,33262,33320],{":tabs":1557},[212,33092,33094],{"className":334,"code":33093,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarShift\n :intensity=\"0.15\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBarShift>\n\u003C\u002FShader>\n",[99,33095,33096,33104,33111,33119,33123,33131,33139],{"__ignoreMap":178},[220,33097,33098,33100,33102],{"class":222,"line":223},[220,33099,343],{"class":264},[220,33101,347],{"class":346},[220,33103,359],{"class":264},[220,33105,33106,33108],{"class":222,"line":179},[220,33107,364],{"class":264},[220,33109,33110],{"class":346},"BarShift\n",[220,33112,33113,33115,33117],{"class":222,"line":389},[220,33114,20371],{"class":226},[220,33116,353],{"class":264},[220,33118,18108],{"class":230},[220,33120,33121],{"class":222,"line":399},[220,33122,31959],{"class":264},[220,33124,33125,33127,33129],{"class":222,"line":644},[220,33126,2550],{"class":264},[220,33128,2553],{"class":346},[220,33130,386],{"class":264},[220,33132,33133,33135,33137],{"class":222,"line":650},[220,33134,2567],{"class":264},[220,33136,33071],{"class":346},[220,33138,359],{"class":264},[220,33140,33141,33143,33145],{"class":222,"line":656},[220,33142,402],{"class":264},[220,33144,347],{"class":346},[220,33146,359],{"class":264},[212,33148,33150],{"className":409,"code":33149,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBarShift\n intensity={0.15}\n >\n \u003CCircle \u002F>\n \u003C\u002FBarShift>\n\u003C\u002FShader>\n",[99,33151,33152,33160,33166,33178,33182,33190,33198],{"__ignoreMap":178},[220,33153,33154,33156,33158],{"class":222,"line":223},[220,33155,343],{"class":264},[220,33157,347],{"class":420},[220,33159,359],{"class":264},[220,33161,33162,33164],{"class":222,"line":179},[220,33163,364],{"class":264},[220,33165,33110],{"class":420},[220,33167,33168,33170,33172,33174,33176],{"class":222,"line":389},[220,33169,20482],{"class":226},[220,33171,353],{"class":260},[220,33173,743],{"class":264},[220,33175,18192],{"class":420},[220,33177,749],{"class":264},[220,33179,33180],{"class":222,"line":399},[220,33181,31959],{"class":264},[220,33183,33184,33186,33188],{"class":222,"line":644},[220,33185,2550],{"class":264},[220,33187,2553],{"class":420},[220,33189,386],{"class":264},[220,33191,33192,33194,33196],{"class":222,"line":650},[220,33193,2567],{"class":264},[220,33195,33071],{"class":420},[220,33197,359],{"class":264},[220,33199,33200,33202,33204],{"class":222,"line":656},[220,33201,402],{"class":264},[220,33203,347],{"class":420},[220,33205,359],{"class":264},[212,33207,33208],{"className":2844,"code":33149,"language":2846,"meta":178,"style":178},[99,33209,33210,33218,33224,33234,33238,33246,33254],{"__ignoreMap":178},[220,33211,33212,33214,33216],{"class":222,"line":223},[220,33213,343],{"class":264},[220,33215,347],{"class":420},[220,33217,359],{"class":264},[220,33219,33220,33222],{"class":222,"line":179},[220,33221,364],{"class":264},[220,33223,33110],{"class":420},[220,33225,33226,33228,33230,33232],{"class":222,"line":389},[220,33227,20482],{"class":226},[220,33229,29871],{"class":264},[220,33231,18192],{"class":420},[220,33233,749],{"class":264},[220,33235,33236],{"class":222,"line":399},[220,33237,31959],{"class":264},[220,33239,33240,33242,33244],{"class":222,"line":644},[220,33241,2550],{"class":264},[220,33243,2553],{"class":420},[220,33245,386],{"class":264},[220,33247,33248,33250,33252],{"class":222,"line":650},[220,33249,2567],{"class":264},[220,33251,33071],{"class":420},[220,33253,359],{"class":264},[220,33255,33256,33258,33260],{"class":222,"line":656},[220,33257,402],{"class":264},[220,33259,347],{"class":420},[220,33261,359],{"class":264},[212,33263,33264],{"className":468,"code":33149,"language":469,"meta":178,"style":178},[99,33265,33266,33274,33280,33292,33296,33304,33312],{"__ignoreMap":178},[220,33267,33268,33270,33272],{"class":222,"line":223},[220,33269,343],{"class":264},[220,33271,347],{"class":420},[220,33273,359],{"class":264},[220,33275,33276,33278],{"class":222,"line":179},[220,33277,364],{"class":264},[220,33279,33110],{"class":420},[220,33281,33282,33284,33286,33288,33290],{"class":222,"line":389},[220,33283,20482],{"class":226},[220,33285,353],{"class":260},[220,33287,743],{"class":264},[220,33289,18192],{"class":420},[220,33291,749],{"class":264},[220,33293,33294],{"class":222,"line":399},[220,33295,31959],{"class":264},[220,33297,33298,33300,33302],{"class":222,"line":644},[220,33299,2550],{"class":264},[220,33301,2553],{"class":420},[220,33303,386],{"class":264},[220,33305,33306,33308,33310],{"class":222,"line":650},[220,33307,2567],{"class":264},[220,33309,33071],{"class":420},[220,33311,359],{"class":264},[220,33313,33314,33316,33318],{"class":222,"line":656},[220,33315,402],{"class":264},[220,33317,347],{"class":420},[220,33319,359],{"class":264},[212,33321,33323],{"className":251,"code":33322,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarShift', props: { intensity: 0.15 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33324,33325,33335,33339,33353,33357,33370,33378,33382,33386],{"__ignoreMap":178},[220,33326,33327,33329,33331,33333],{"class":222,"line":223},[220,33328,261],{"class":260},[220,33330,11512],{"class":264},[220,33332,268],{"class":260},[220,33334,4007],{"class":230},[220,33336,33337],{"class":222,"line":179},[220,33338,647],{"emptyLinePlaceholder":194},[220,33340,33341,33343,33345,33347,33349,33351],{"class":222,"line":389},[220,33342,1735],{"class":260},[220,33344,1738],{"class":420},[220,33346,1741],{"class":260},[220,33348,1744],{"class":260},[220,33350,1747],{"class":226},[220,33352,1750],{"class":264},[220,33354,33355],{"class":222,"line":399},[220,33356,1765],{"class":264},[220,33358,33359,33361,33364,33366,33368],{"class":222,"line":644},[220,33360,1770],{"class":264},[220,33362,33363],{"class":230},"'BarShift'",[220,33365,32203],{"class":264},[220,33367,18192],{"class":420},[220,33369,7546],{"class":264},[220,33371,33372,33374,33376],{"class":222,"line":650},[220,33373,7014],{"class":264},[220,33375,3206],{"class":230},[220,33377,2465],{"class":264},[220,33379,33380],{"class":222,"line":656},[220,33381,7031],{"class":264},[220,33383,33384],{"class":222,"line":673},[220,33385,1787],{"class":264},[220,33387,33388],{"class":222,"line":682},[220,33389,1792],{"class":264},[1504,33391,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33393},[33394,33395],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":33071,"description":33079},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":33403,"title":33404,"body":33405,"category":33673,"componentType":25883,"description":33412,"extension":191,"meta":33674,"navigation":194,"path":33675,"requiresChild":194,"seo":33676,"stem":33677,"__hash__":33678},"components\u002Fdocs\u002Fcomponents\u002FBarnDoors.md","BarnDoors",{"type":8,"value":33406,"toc":33669},[33407,33410,33413,33415,33417,33420,33422,33667],[11,33408,33404],{"id":33409},"barndoors",[15,33411,33412],{},"Split the content along a center line and wipe outward in both directions",[31911,33414],{"component":33404},[23,33416,31915],{"id":26533},[31917,33418],{":props":33419},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the doors have opened (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the doors open in degrees (0 = apart horizontally)\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the wipe edges\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Close in from both edges instead of opening from the center\"}]",[23,33421,31923],{"id":31922},[246,33423,33424,33469,33513,33557,33601],{":tabs":1557},[212,33425,33427],{"className":334,"code":33426,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarnDoors>\n \u003CCircle \u002F>\n \u003C\u002FBarnDoors>\n\u003C\u002FShader>\n",[99,33428,33429,33437,33445,33453,33461],{"__ignoreMap":178},[220,33430,33431,33433,33435],{"class":222,"line":223},[220,33432,343],{"class":264},[220,33434,347],{"class":346},[220,33436,359],{"class":264},[220,33438,33439,33441,33443],{"class":222,"line":179},[220,33440,364],{"class":264},[220,33442,33404],{"class":346},[220,33444,359],{"class":264},[220,33446,33447,33449,33451],{"class":222,"line":389},[220,33448,2550],{"class":264},[220,33450,2553],{"class":346},[220,33452,386],{"class":264},[220,33454,33455,33457,33459],{"class":222,"line":399},[220,33456,2567],{"class":264},[220,33458,33404],{"class":346},[220,33460,359],{"class":264},[220,33462,33463,33465,33467],{"class":222,"line":644},[220,33464,402],{"class":264},[220,33466,347],{"class":346},[220,33468,359],{"class":264},[212,33470,33471],{"className":409,"code":33426,"language":411,"meta":178,"style":178},[99,33472,33473,33481,33489,33497,33505],{"__ignoreMap":178},[220,33474,33475,33477,33479],{"class":222,"line":223},[220,33476,343],{"class":264},[220,33478,347],{"class":420},[220,33480,359],{"class":264},[220,33482,33483,33485,33487],{"class":222,"line":179},[220,33484,364],{"class":264},[220,33486,33404],{"class":420},[220,33488,359],{"class":264},[220,33490,33491,33493,33495],{"class":222,"line":389},[220,33492,2550],{"class":264},[220,33494,2553],{"class":420},[220,33496,386],{"class":264},[220,33498,33499,33501,33503],{"class":222,"line":399},[220,33500,2567],{"class":264},[220,33502,33404],{"class":420},[220,33504,359],{"class":264},[220,33506,33507,33509,33511],{"class":222,"line":644},[220,33508,402],{"class":264},[220,33510,347],{"class":420},[220,33512,359],{"class":264},[212,33514,33515],{"className":2844,"code":33426,"language":2846,"meta":178,"style":178},[99,33516,33517,33525,33533,33541,33549],{"__ignoreMap":178},[220,33518,33519,33521,33523],{"class":222,"line":223},[220,33520,343],{"class":264},[220,33522,347],{"class":420},[220,33524,359],{"class":264},[220,33526,33527,33529,33531],{"class":222,"line":179},[220,33528,364],{"class":264},[220,33530,33404],{"class":420},[220,33532,359],{"class":264},[220,33534,33535,33537,33539],{"class":222,"line":389},[220,33536,2550],{"class":264},[220,33538,2553],{"class":420},[220,33540,386],{"class":264},[220,33542,33543,33545,33547],{"class":222,"line":399},[220,33544,2567],{"class":264},[220,33546,33404],{"class":420},[220,33548,359],{"class":264},[220,33550,33551,33553,33555],{"class":222,"line":644},[220,33552,402],{"class":264},[220,33554,347],{"class":420},[220,33556,359],{"class":264},[212,33558,33559],{"className":468,"code":33426,"language":469,"meta":178,"style":178},[99,33560,33561,33569,33577,33585,33593],{"__ignoreMap":178},[220,33562,33563,33565,33567],{"class":222,"line":223},[220,33564,343],{"class":264},[220,33566,347],{"class":420},[220,33568,359],{"class":264},[220,33570,33571,33573,33575],{"class":222,"line":179},[220,33572,364],{"class":264},[220,33574,33404],{"class":420},[220,33576,359],{"class":264},[220,33578,33579,33581,33583],{"class":222,"line":389},[220,33580,2550],{"class":264},[220,33582,2553],{"class":420},[220,33584,386],{"class":264},[220,33586,33587,33589,33591],{"class":222,"line":399},[220,33588,2567],{"class":264},[220,33590,33404],{"class":420},[220,33592,359],{"class":264},[220,33594,33595,33597,33599],{"class":222,"line":644},[220,33596,402],{"class":264},[220,33598,347],{"class":420},[220,33600,359],{"class":264},[212,33602,33604],{"className":251,"code":33603,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarnDoors', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33605,33606,33616,33620,33634,33638,33647,33655,33659,33663],{"__ignoreMap":178},[220,33607,33608,33610,33612,33614],{"class":222,"line":223},[220,33609,261],{"class":260},[220,33611,11512],{"class":264},[220,33613,268],{"class":260},[220,33615,4007],{"class":230},[220,33617,33618],{"class":222,"line":179},[220,33619,647],{"emptyLinePlaceholder":194},[220,33621,33622,33624,33626,33628,33630,33632],{"class":222,"line":389},[220,33623,1735],{"class":260},[220,33625,1738],{"class":420},[220,33627,1741],{"class":260},[220,33629,1744],{"class":260},[220,33631,1747],{"class":226},[220,33633,1750],{"class":264},[220,33635,33636],{"class":222,"line":399},[220,33637,1765],{"class":264},[220,33639,33640,33642,33645],{"class":222,"line":644},[220,33641,1770],{"class":264},[220,33643,33644],{"class":230},"'BarnDoors'",[220,33646,7009],{"class":264},[220,33648,33649,33651,33653],{"class":222,"line":650},[220,33650,7014],{"class":264},[220,33652,3206],{"class":230},[220,33654,2465],{"class":264},[220,33656,33657],{"class":222,"line":656},[220,33658,7031],{"class":264},[220,33660,33661],{"class":222,"line":673},[220,33662,1787],{"class":264},[220,33664,33665],{"class":222,"line":682},[220,33666,1792],{"class":264},[1504,33668,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":33670},[33671,33672],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Transitions",{},"\u002Fdocs\u002Fcomponents\u002Fbarndoors",{"title":33404,"description":33412},"docs\u002Fcomponents\u002FBarnDoors","73aNA7NyczNQKFcurXoO42FtB4UEaUOUGpMTLW3y3js",{"id":33680,"title":33681,"body":33682,"category":33063,"componentType":25877,"description":33689,"extension":191,"meta":33874,"navigation":194,"path":33875,"requiresChild":32530,"seo":33876,"stem":33877,"__hash__":33878},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":33683,"toc":33870},[33684,33687,33690,33692,33694,33697,33699,33868],[11,33685,33681],{"id":33686},"beam",[15,33688,33689],{},"A beam of light from one point to another.",[31911,33691],{"component":33681},[23,33693,31915],{"id":26533},[31917,33695],{":props":33696},"[{\"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,33698,31923],{"id":31922},[246,33700,33701,33730,33758,33786,33814],{":tabs":1557},[212,33702,33704],{"className":334,"code":33703,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,33705,33706,33714,33722],{"__ignoreMap":178},[220,33707,33708,33710,33712],{"class":222,"line":223},[220,33709,343],{"class":264},[220,33711,347],{"class":346},[220,33713,359],{"class":264},[220,33715,33716,33718,33720],{"class":222,"line":179},[220,33717,364],{"class":264},[220,33719,33681],{"class":346},[220,33721,386],{"class":264},[220,33723,33724,33726,33728],{"class":222,"line":389},[220,33725,402],{"class":264},[220,33727,347],{"class":346},[220,33729,359],{"class":264},[212,33731,33732],{"className":409,"code":33703,"language":411,"meta":178,"style":178},[99,33733,33734,33742,33750],{"__ignoreMap":178},[220,33735,33736,33738,33740],{"class":222,"line":223},[220,33737,343],{"class":264},[220,33739,347],{"class":420},[220,33741,359],{"class":264},[220,33743,33744,33746,33748],{"class":222,"line":179},[220,33745,364],{"class":264},[220,33747,33681],{"class":420},[220,33749,386],{"class":264},[220,33751,33752,33754,33756],{"class":222,"line":389},[220,33753,402],{"class":264},[220,33755,347],{"class":420},[220,33757,359],{"class":264},[212,33759,33760],{"className":2844,"code":33703,"language":2846,"meta":178,"style":178},[99,33761,33762,33770,33778],{"__ignoreMap":178},[220,33763,33764,33766,33768],{"class":222,"line":223},[220,33765,343],{"class":264},[220,33767,347],{"class":420},[220,33769,359],{"class":264},[220,33771,33772,33774,33776],{"class":222,"line":179},[220,33773,364],{"class":264},[220,33775,33681],{"class":420},[220,33777,386],{"class":264},[220,33779,33780,33782,33784],{"class":222,"line":389},[220,33781,402],{"class":264},[220,33783,347],{"class":420},[220,33785,359],{"class":264},[212,33787,33788],{"className":468,"code":33703,"language":469,"meta":178,"style":178},[99,33789,33790,33798,33806],{"__ignoreMap":178},[220,33791,33792,33794,33796],{"class":222,"line":223},[220,33793,343],{"class":264},[220,33795,347],{"class":420},[220,33797,359],{"class":264},[220,33799,33800,33802,33804],{"class":222,"line":179},[220,33801,364],{"class":264},[220,33803,33681],{"class":420},[220,33805,386],{"class":264},[220,33807,33808,33810,33812],{"class":222,"line":389},[220,33809,402],{"class":264},[220,33811,347],{"class":420},[220,33813,359],{"class":264},[212,33815,33817],{"className":251,"code":33816,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Beam', props: {} }\n ]\n})\n",[99,33818,33819,33829,33833,33847,33851,33860,33864],{"__ignoreMap":178},[220,33820,33821,33823,33825,33827],{"class":222,"line":223},[220,33822,261],{"class":260},[220,33824,11512],{"class":264},[220,33826,268],{"class":260},[220,33828,4007],{"class":230},[220,33830,33831],{"class":222,"line":179},[220,33832,647],{"emptyLinePlaceholder":194},[220,33834,33835,33837,33839,33841,33843,33845],{"class":222,"line":389},[220,33836,1735],{"class":260},[220,33838,1738],{"class":420},[220,33840,1741],{"class":260},[220,33842,1744],{"class":260},[220,33844,1747],{"class":226},[220,33846,1750],{"class":264},[220,33848,33849],{"class":222,"line":399},[220,33850,1765],{"class":264},[220,33852,33853,33855,33858],{"class":222,"line":644},[220,33854,1770],{"class":264},[220,33856,33857],{"class":230},"'Beam'",[220,33859,2465],{"class":264},[220,33861,33862],{"class":222,"line":650},[220,33863,1787],{"class":264},[220,33865,33866],{"class":222,"line":656},[220,33867,1792],{"class":264},[1504,33869,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":33871},[33872,33873],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":33681,"description":33689},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":33880,"title":33881,"body":33882,"category":33396,"componentType":25883,"description":33889,"extension":191,"meta":34150,"navigation":194,"path":34151,"requiresChild":194,"seo":34152,"stem":34153,"__hash__":34154},"components\u002Fdocs\u002Fcomponents\u002FBend.md","Bend",{"type":8,"value":33883,"toc":34146},[33884,33887,33890,33892,33894,33897,33899,34144],[11,33885,33881],{"id":33886},"bend",[15,33888,33889],{},"Bends the ends of the frame toward you like a curved display — content at the edges swells closer under real perspective, or curls away when the strength goes negative",[31911,33891],{"component":33881},[23,33893,31915],{"id":26533},[31917,33895],{":props":33896},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the bend axis in degrees — 0 bends the left\u002Fright ends, 90 bends the top\u002Fbottom\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges when the bend pulls content away from the frame border\"}]",[23,33898,31923],{"id":31922},[246,33900,33901,33946,33990,34034,34078],{":tabs":1557},[212,33902,33904],{"className":334,"code":33903,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBend>\n \u003CCircle \u002F>\n \u003C\u002FBend>\n\u003C\u002FShader>\n",[99,33905,33906,33914,33922,33930,33938],{"__ignoreMap":178},[220,33907,33908,33910,33912],{"class":222,"line":223},[220,33909,343],{"class":264},[220,33911,347],{"class":346},[220,33913,359],{"class":264},[220,33915,33916,33918,33920],{"class":222,"line":179},[220,33917,364],{"class":264},[220,33919,33881],{"class":346},[220,33921,359],{"class":264},[220,33923,33924,33926,33928],{"class":222,"line":389},[220,33925,2550],{"class":264},[220,33927,2553],{"class":346},[220,33929,386],{"class":264},[220,33931,33932,33934,33936],{"class":222,"line":399},[220,33933,2567],{"class":264},[220,33935,33881],{"class":346},[220,33937,359],{"class":264},[220,33939,33940,33942,33944],{"class":222,"line":644},[220,33941,402],{"class":264},[220,33943,347],{"class":346},[220,33945,359],{"class":264},[212,33947,33948],{"className":409,"code":33903,"language":411,"meta":178,"style":178},[99,33949,33950,33958,33966,33974,33982],{"__ignoreMap":178},[220,33951,33952,33954,33956],{"class":222,"line":223},[220,33953,343],{"class":264},[220,33955,347],{"class":420},[220,33957,359],{"class":264},[220,33959,33960,33962,33964],{"class":222,"line":179},[220,33961,364],{"class":264},[220,33963,33881],{"class":420},[220,33965,359],{"class":264},[220,33967,33968,33970,33972],{"class":222,"line":389},[220,33969,2550],{"class":264},[220,33971,2553],{"class":420},[220,33973,386],{"class":264},[220,33975,33976,33978,33980],{"class":222,"line":399},[220,33977,2567],{"class":264},[220,33979,33881],{"class":420},[220,33981,359],{"class":264},[220,33983,33984,33986,33988],{"class":222,"line":644},[220,33985,402],{"class":264},[220,33987,347],{"class":420},[220,33989,359],{"class":264},[212,33991,33992],{"className":2844,"code":33903,"language":2846,"meta":178,"style":178},[99,33993,33994,34002,34010,34018,34026],{"__ignoreMap":178},[220,33995,33996,33998,34000],{"class":222,"line":223},[220,33997,343],{"class":264},[220,33999,347],{"class":420},[220,34001,359],{"class":264},[220,34003,34004,34006,34008],{"class":222,"line":179},[220,34005,364],{"class":264},[220,34007,33881],{"class":420},[220,34009,359],{"class":264},[220,34011,34012,34014,34016],{"class":222,"line":389},[220,34013,2550],{"class":264},[220,34015,2553],{"class":420},[220,34017,386],{"class":264},[220,34019,34020,34022,34024],{"class":222,"line":399},[220,34021,2567],{"class":264},[220,34023,33881],{"class":420},[220,34025,359],{"class":264},[220,34027,34028,34030,34032],{"class":222,"line":644},[220,34029,402],{"class":264},[220,34031,347],{"class":420},[220,34033,359],{"class":264},[212,34035,34036],{"className":468,"code":33903,"language":469,"meta":178,"style":178},[99,34037,34038,34046,34054,34062,34070],{"__ignoreMap":178},[220,34039,34040,34042,34044],{"class":222,"line":223},[220,34041,343],{"class":264},[220,34043,347],{"class":420},[220,34045,359],{"class":264},[220,34047,34048,34050,34052],{"class":222,"line":179},[220,34049,364],{"class":264},[220,34051,33881],{"class":420},[220,34053,359],{"class":264},[220,34055,34056,34058,34060],{"class":222,"line":389},[220,34057,2550],{"class":264},[220,34059,2553],{"class":420},[220,34061,386],{"class":264},[220,34063,34064,34066,34068],{"class":222,"line":399},[220,34065,2567],{"class":264},[220,34067,33881],{"class":420},[220,34069,359],{"class":264},[220,34071,34072,34074,34076],{"class":222,"line":644},[220,34073,402],{"class":264},[220,34075,347],{"class":420},[220,34077,359],{"class":264},[212,34079,34081],{"className":251,"code":34080,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bend', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,34082,34083,34093,34097,34111,34115,34124,34132,34136,34140],{"__ignoreMap":178},[220,34084,34085,34087,34089,34091],{"class":222,"line":223},[220,34086,261],{"class":260},[220,34088,11512],{"class":264},[220,34090,268],{"class":260},[220,34092,4007],{"class":230},[220,34094,34095],{"class":222,"line":179},[220,34096,647],{"emptyLinePlaceholder":194},[220,34098,34099,34101,34103,34105,34107,34109],{"class":222,"line":389},[220,34100,1735],{"class":260},[220,34102,1738],{"class":420},[220,34104,1741],{"class":260},[220,34106,1744],{"class":260},[220,34108,1747],{"class":226},[220,34110,1750],{"class":264},[220,34112,34113],{"class":222,"line":399},[220,34114,1765],{"class":264},[220,34116,34117,34119,34122],{"class":222,"line":644},[220,34118,1770],{"class":264},[220,34120,34121],{"class":230},"'Bend'",[220,34123,7009],{"class":264},[220,34125,34126,34128,34130],{"class":222,"line":650},[220,34127,7014],{"class":264},[220,34129,3206],{"class":230},[220,34131,2465],{"class":264},[220,34133,34134],{"class":222,"line":656},[220,34135,7031],{"class":264},[220,34137,34138],{"class":222,"line":673},[220,34139,1787],{"class":264},[220,34141,34142],{"class":222,"line":682},[220,34143,1792],{"class":264},[1504,34145,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34147},[34148,34149],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbend",{"title":33881,"description":33889},"docs\u002Fcomponents\u002FBend","yTh745yjRF84KyipDFIzuYlGJcnZKEi8xan5ye79WXk",{"id":34156,"title":34157,"body":34158,"category":33063,"componentType":25877,"description":34165,"extension":191,"meta":34350,"navigation":194,"path":34351,"requiresChild":32530,"seo":34352,"stem":34353,"__hash__":34354},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":34159,"toc":34346},[34160,34163,34166,34168,34170,34173,34175,34344],[11,34161,34157],{"id":34162},"blob",[15,34164,34165],{},"Organic animated blob with 3D lighting and gradients",[31911,34167],{"component":34157},[23,34169,31915],{"id":26533},[31917,34171],{":props":34172},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,34174,31923],{"id":31922},[246,34176,34177,34206,34234,34262,34290],{":tabs":1557},[212,34178,34180],{"className":334,"code":34179,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,34181,34182,34190,34198],{"__ignoreMap":178},[220,34183,34184,34186,34188],{"class":222,"line":223},[220,34185,343],{"class":264},[220,34187,347],{"class":346},[220,34189,359],{"class":264},[220,34191,34192,34194,34196],{"class":222,"line":179},[220,34193,364],{"class":264},[220,34195,34157],{"class":346},[220,34197,386],{"class":264},[220,34199,34200,34202,34204],{"class":222,"line":389},[220,34201,402],{"class":264},[220,34203,347],{"class":346},[220,34205,359],{"class":264},[212,34207,34208],{"className":409,"code":34179,"language":411,"meta":178,"style":178},[99,34209,34210,34218,34226],{"__ignoreMap":178},[220,34211,34212,34214,34216],{"class":222,"line":223},[220,34213,343],{"class":264},[220,34215,347],{"class":420},[220,34217,359],{"class":264},[220,34219,34220,34222,34224],{"class":222,"line":179},[220,34221,364],{"class":264},[220,34223,34157],{"class":420},[220,34225,386],{"class":264},[220,34227,34228,34230,34232],{"class":222,"line":389},[220,34229,402],{"class":264},[220,34231,347],{"class":420},[220,34233,359],{"class":264},[212,34235,34236],{"className":2844,"code":34179,"language":2846,"meta":178,"style":178},[99,34237,34238,34246,34254],{"__ignoreMap":178},[220,34239,34240,34242,34244],{"class":222,"line":223},[220,34241,343],{"class":264},[220,34243,347],{"class":420},[220,34245,359],{"class":264},[220,34247,34248,34250,34252],{"class":222,"line":179},[220,34249,364],{"class":264},[220,34251,34157],{"class":420},[220,34253,386],{"class":264},[220,34255,34256,34258,34260],{"class":222,"line":389},[220,34257,402],{"class":264},[220,34259,347],{"class":420},[220,34261,359],{"class":264},[212,34263,34264],{"className":468,"code":34179,"language":469,"meta":178,"style":178},[99,34265,34266,34274,34282],{"__ignoreMap":178},[220,34267,34268,34270,34272],{"class":222,"line":223},[220,34269,343],{"class":264},[220,34271,347],{"class":420},[220,34273,359],{"class":264},[220,34275,34276,34278,34280],{"class":222,"line":179},[220,34277,364],{"class":264},[220,34279,34157],{"class":420},[220,34281,386],{"class":264},[220,34283,34284,34286,34288],{"class":222,"line":389},[220,34285,402],{"class":264},[220,34287,347],{"class":420},[220,34289,359],{"class":264},[212,34291,34293],{"className":251,"code":34292,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blob', props: {} }\n ]\n})\n",[99,34294,34295,34305,34309,34323,34327,34336,34340],{"__ignoreMap":178},[220,34296,34297,34299,34301,34303],{"class":222,"line":223},[220,34298,261],{"class":260},[220,34300,11512],{"class":264},[220,34302,268],{"class":260},[220,34304,4007],{"class":230},[220,34306,34307],{"class":222,"line":179},[220,34308,647],{"emptyLinePlaceholder":194},[220,34310,34311,34313,34315,34317,34319,34321],{"class":222,"line":389},[220,34312,1735],{"class":260},[220,34314,1738],{"class":420},[220,34316,1741],{"class":260},[220,34318,1744],{"class":260},[220,34320,1747],{"class":226},[220,34322,1750],{"class":264},[220,34324,34325],{"class":222,"line":399},[220,34326,1765],{"class":264},[220,34328,34329,34331,34334],{"class":222,"line":644},[220,34330,1770],{"class":264},[220,34332,34333],{"class":230},"'Blob'",[220,34335,2465],{"class":264},[220,34337,34338],{"class":222,"line":650},[220,34339,1787],{"class":264},[220,34341,34342],{"class":222,"line":656},[220,34343,1792],{"class":264},[1504,34345,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34347},[34348,34349],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":34157,"description":34165},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":34356,"title":34357,"body":34358,"category":33673,"componentType":25883,"description":34365,"extension":191,"meta":34626,"navigation":194,"path":34627,"requiresChild":194,"seo":34628,"stem":34629,"__hash__":34630},"components\u002Fdocs\u002Fcomponents\u002FBlockDissolve.md","BlockDissolve",{"type":8,"value":34359,"toc":34622},[34360,34363,34366,34368,34370,34373,34375,34620],[11,34361,34357],{"id":34362},"blockdissolve",[15,34364,34365],{},"Dissolve the content away as a grid of blocks vanishing in random order",[31911,34367],{"component":34357},[23,34369,31915],{"id":26533},[31917,34371],{":props":34372},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Size of each block as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each block fades out (0 = hard-edged blocks)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order blocks dissolve in\"}]",[23,34374,31923],{"id":31922},[246,34376,34377,34422,34466,34510,34554],{":tabs":1557},[212,34378,34380],{"className":334,"code":34379,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockDissolve>\n \u003CCircle \u002F>\n \u003C\u002FBlockDissolve>\n\u003C\u002FShader>\n",[99,34381,34382,34390,34398,34406,34414],{"__ignoreMap":178},[220,34383,34384,34386,34388],{"class":222,"line":223},[220,34385,343],{"class":264},[220,34387,347],{"class":346},[220,34389,359],{"class":264},[220,34391,34392,34394,34396],{"class":222,"line":179},[220,34393,364],{"class":264},[220,34395,34357],{"class":346},[220,34397,359],{"class":264},[220,34399,34400,34402,34404],{"class":222,"line":389},[220,34401,2550],{"class":264},[220,34403,2553],{"class":346},[220,34405,386],{"class":264},[220,34407,34408,34410,34412],{"class":222,"line":399},[220,34409,2567],{"class":264},[220,34411,34357],{"class":346},[220,34413,359],{"class":264},[220,34415,34416,34418,34420],{"class":222,"line":644},[220,34417,402],{"class":264},[220,34419,347],{"class":346},[220,34421,359],{"class":264},[212,34423,34424],{"className":409,"code":34379,"language":411,"meta":178,"style":178},[99,34425,34426,34434,34442,34450,34458],{"__ignoreMap":178},[220,34427,34428,34430,34432],{"class":222,"line":223},[220,34429,343],{"class":264},[220,34431,347],{"class":420},[220,34433,359],{"class":264},[220,34435,34436,34438,34440],{"class":222,"line":179},[220,34437,364],{"class":264},[220,34439,34357],{"class":420},[220,34441,359],{"class":264},[220,34443,34444,34446,34448],{"class":222,"line":389},[220,34445,2550],{"class":264},[220,34447,2553],{"class":420},[220,34449,386],{"class":264},[220,34451,34452,34454,34456],{"class":222,"line":399},[220,34453,2567],{"class":264},[220,34455,34357],{"class":420},[220,34457,359],{"class":264},[220,34459,34460,34462,34464],{"class":222,"line":644},[220,34461,402],{"class":264},[220,34463,347],{"class":420},[220,34465,359],{"class":264},[212,34467,34468],{"className":2844,"code":34379,"language":2846,"meta":178,"style":178},[99,34469,34470,34478,34486,34494,34502],{"__ignoreMap":178},[220,34471,34472,34474,34476],{"class":222,"line":223},[220,34473,343],{"class":264},[220,34475,347],{"class":420},[220,34477,359],{"class":264},[220,34479,34480,34482,34484],{"class":222,"line":179},[220,34481,364],{"class":264},[220,34483,34357],{"class":420},[220,34485,359],{"class":264},[220,34487,34488,34490,34492],{"class":222,"line":389},[220,34489,2550],{"class":264},[220,34491,2553],{"class":420},[220,34493,386],{"class":264},[220,34495,34496,34498,34500],{"class":222,"line":399},[220,34497,2567],{"class":264},[220,34499,34357],{"class":420},[220,34501,359],{"class":264},[220,34503,34504,34506,34508],{"class":222,"line":644},[220,34505,402],{"class":264},[220,34507,347],{"class":420},[220,34509,359],{"class":264},[212,34511,34512],{"className":468,"code":34379,"language":469,"meta":178,"style":178},[99,34513,34514,34522,34530,34538,34546],{"__ignoreMap":178},[220,34515,34516,34518,34520],{"class":222,"line":223},[220,34517,343],{"class":264},[220,34519,347],{"class":420},[220,34521,359],{"class":264},[220,34523,34524,34526,34528],{"class":222,"line":179},[220,34525,364],{"class":264},[220,34527,34357],{"class":420},[220,34529,359],{"class":264},[220,34531,34532,34534,34536],{"class":222,"line":389},[220,34533,2550],{"class":264},[220,34535,2553],{"class":420},[220,34537,386],{"class":264},[220,34539,34540,34542,34544],{"class":222,"line":399},[220,34541,2567],{"class":264},[220,34543,34357],{"class":420},[220,34545,359],{"class":264},[220,34547,34548,34550,34552],{"class":222,"line":644},[220,34549,402],{"class":264},[220,34551,347],{"class":420},[220,34553,359],{"class":264},[212,34555,34557],{"className":251,"code":34556,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlockDissolve', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,34558,34559,34569,34573,34587,34591,34600,34608,34612,34616],{"__ignoreMap":178},[220,34560,34561,34563,34565,34567],{"class":222,"line":223},[220,34562,261],{"class":260},[220,34564,11512],{"class":264},[220,34566,268],{"class":260},[220,34568,4007],{"class":230},[220,34570,34571],{"class":222,"line":179},[220,34572,647],{"emptyLinePlaceholder":194},[220,34574,34575,34577,34579,34581,34583,34585],{"class":222,"line":389},[220,34576,1735],{"class":260},[220,34578,1738],{"class":420},[220,34580,1741],{"class":260},[220,34582,1744],{"class":260},[220,34584,1747],{"class":226},[220,34586,1750],{"class":264},[220,34588,34589],{"class":222,"line":399},[220,34590,1765],{"class":264},[220,34592,34593,34595,34598],{"class":222,"line":644},[220,34594,1770],{"class":264},[220,34596,34597],{"class":230},"'BlockDissolve'",[220,34599,7009],{"class":264},[220,34601,34602,34604,34606],{"class":222,"line":650},[220,34603,7014],{"class":264},[220,34605,3206],{"class":230},[220,34607,2465],{"class":264},[220,34609,34610],{"class":222,"line":656},[220,34611,7031],{"class":264},[220,34613,34614],{"class":222,"line":673},[220,34615,1787],{"class":264},[220,34617,34618],{"class":222,"line":682},[220,34619,1792],{"class":264},[1504,34621,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34623},[34624,34625],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblockdissolve",{"title":34357,"description":34365},"docs\u002Fcomponents\u002FBlockDissolve","eek109j_YYMANDpv7x-fWVWd060AWX7s6NXkZk6R6zE",{"id":34632,"title":34633,"body":34634,"category":33063,"componentType":25877,"description":34641,"extension":191,"meta":34826,"navigation":194,"path":34827,"requiresChild":32530,"seo":34828,"stem":34829,"__hash__":34830},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":34635,"toc":34822},[34636,34639,34642,34644,34646,34649,34651,34820],[11,34637,34633],{"id":34638},"blocknoise",[15,34640,34641],{},"Blocky value noise with soft cells that morph over time",[31911,34643],{"component":34633},[23,34645,31915],{"id":26533},[31917,34647],{":props":34648},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,34650,31923],{"id":31922},[246,34652,34653,34682,34710,34738,34766],{":tabs":1557},[212,34654,34656],{"className":334,"code":34655,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,34657,34658,34666,34674],{"__ignoreMap":178},[220,34659,34660,34662,34664],{"class":222,"line":223},[220,34661,343],{"class":264},[220,34663,347],{"class":346},[220,34665,359],{"class":264},[220,34667,34668,34670,34672],{"class":222,"line":179},[220,34669,364],{"class":264},[220,34671,34633],{"class":346},[220,34673,386],{"class":264},[220,34675,34676,34678,34680],{"class":222,"line":389},[220,34677,402],{"class":264},[220,34679,347],{"class":346},[220,34681,359],{"class":264},[212,34683,34684],{"className":409,"code":34655,"language":411,"meta":178,"style":178},[99,34685,34686,34694,34702],{"__ignoreMap":178},[220,34687,34688,34690,34692],{"class":222,"line":223},[220,34689,343],{"class":264},[220,34691,347],{"class":420},[220,34693,359],{"class":264},[220,34695,34696,34698,34700],{"class":222,"line":179},[220,34697,364],{"class":264},[220,34699,34633],{"class":420},[220,34701,386],{"class":264},[220,34703,34704,34706,34708],{"class":222,"line":389},[220,34705,402],{"class":264},[220,34707,347],{"class":420},[220,34709,359],{"class":264},[212,34711,34712],{"className":2844,"code":34655,"language":2846,"meta":178,"style":178},[99,34713,34714,34722,34730],{"__ignoreMap":178},[220,34715,34716,34718,34720],{"class":222,"line":223},[220,34717,343],{"class":264},[220,34719,347],{"class":420},[220,34721,359],{"class":264},[220,34723,34724,34726,34728],{"class":222,"line":179},[220,34725,364],{"class":264},[220,34727,34633],{"class":420},[220,34729,386],{"class":264},[220,34731,34732,34734,34736],{"class":222,"line":389},[220,34733,402],{"class":264},[220,34735,347],{"class":420},[220,34737,359],{"class":264},[212,34739,34740],{"className":468,"code":34655,"language":469,"meta":178,"style":178},[99,34741,34742,34750,34758],{"__ignoreMap":178},[220,34743,34744,34746,34748],{"class":222,"line":223},[220,34745,343],{"class":264},[220,34747,347],{"class":420},[220,34749,359],{"class":264},[220,34751,34752,34754,34756],{"class":222,"line":179},[220,34753,364],{"class":264},[220,34755,34633],{"class":420},[220,34757,386],{"class":264},[220,34759,34760,34762,34764],{"class":222,"line":389},[220,34761,402],{"class":264},[220,34763,347],{"class":420},[220,34765,359],{"class":264},[212,34767,34769],{"className":251,"code":34768,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlockNoise', props: {} }\n ]\n})\n",[99,34770,34771,34781,34785,34799,34803,34812,34816],{"__ignoreMap":178},[220,34772,34773,34775,34777,34779],{"class":222,"line":223},[220,34774,261],{"class":260},[220,34776,11512],{"class":264},[220,34778,268],{"class":260},[220,34780,4007],{"class":230},[220,34782,34783],{"class":222,"line":179},[220,34784,647],{"emptyLinePlaceholder":194},[220,34786,34787,34789,34791,34793,34795,34797],{"class":222,"line":389},[220,34788,1735],{"class":260},[220,34790,1738],{"class":420},[220,34792,1741],{"class":260},[220,34794,1744],{"class":260},[220,34796,1747],{"class":226},[220,34798,1750],{"class":264},[220,34800,34801],{"class":222,"line":399},[220,34802,1765],{"class":264},[220,34804,34805,34807,34810],{"class":222,"line":644},[220,34806,1770],{"class":264},[220,34808,34809],{"class":230},"'BlockNoise'",[220,34811,2465],{"class":264},[220,34813,34814],{"class":222,"line":650},[220,34815,1787],{"class":264},[220,34817,34818],{"class":222,"line":656},[220,34819,1792],{"class":264},[1504,34821,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":34823},[34824,34825],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":34633,"description":34641},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":34832,"title":34833,"body":34834,"category":33063,"componentType":25877,"description":34841,"extension":191,"meta":35026,"navigation":194,"path":35027,"requiresChild":32530,"seo":35028,"stem":35029,"__hash__":35030},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":34835,"toc":35022},[34836,34839,34842,34844,34846,34849,34851,35020],[11,34837,34833],{"id":34838},"bluenoise",[15,34840,34841],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[31911,34843],{"component":34833},[23,34845,31915],{"id":26533},[31917,34847],{":props":34848},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Grain size in pixels (1 = per-pixel, higher = chunkier speckle)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[23,34850,31923],{"id":31922},[246,34852,34853,34882,34910,34938,34966],{":tabs":1557},[212,34854,34856],{"className":334,"code":34855,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,34857,34858,34866,34874],{"__ignoreMap":178},[220,34859,34860,34862,34864],{"class":222,"line":223},[220,34861,343],{"class":264},[220,34863,347],{"class":346},[220,34865,359],{"class":264},[220,34867,34868,34870,34872],{"class":222,"line":179},[220,34869,364],{"class":264},[220,34871,34833],{"class":346},[220,34873,386],{"class":264},[220,34875,34876,34878,34880],{"class":222,"line":389},[220,34877,402],{"class":264},[220,34879,347],{"class":346},[220,34881,359],{"class":264},[212,34883,34884],{"className":409,"code":34855,"language":411,"meta":178,"style":178},[99,34885,34886,34894,34902],{"__ignoreMap":178},[220,34887,34888,34890,34892],{"class":222,"line":223},[220,34889,343],{"class":264},[220,34891,347],{"class":420},[220,34893,359],{"class":264},[220,34895,34896,34898,34900],{"class":222,"line":179},[220,34897,364],{"class":264},[220,34899,34833],{"class":420},[220,34901,386],{"class":264},[220,34903,34904,34906,34908],{"class":222,"line":389},[220,34905,402],{"class":264},[220,34907,347],{"class":420},[220,34909,359],{"class":264},[212,34911,34912],{"className":2844,"code":34855,"language":2846,"meta":178,"style":178},[99,34913,34914,34922,34930],{"__ignoreMap":178},[220,34915,34916,34918,34920],{"class":222,"line":223},[220,34917,343],{"class":264},[220,34919,347],{"class":420},[220,34921,359],{"class":264},[220,34923,34924,34926,34928],{"class":222,"line":179},[220,34925,364],{"class":264},[220,34927,34833],{"class":420},[220,34929,386],{"class":264},[220,34931,34932,34934,34936],{"class":222,"line":389},[220,34933,402],{"class":264},[220,34935,347],{"class":420},[220,34937,359],{"class":264},[212,34939,34940],{"className":468,"code":34855,"language":469,"meta":178,"style":178},[99,34941,34942,34950,34958],{"__ignoreMap":178},[220,34943,34944,34946,34948],{"class":222,"line":223},[220,34945,343],{"class":264},[220,34947,347],{"class":420},[220,34949,359],{"class":264},[220,34951,34952,34954,34956],{"class":222,"line":179},[220,34953,364],{"class":264},[220,34955,34833],{"class":420},[220,34957,386],{"class":264},[220,34959,34960,34962,34964],{"class":222,"line":389},[220,34961,402],{"class":264},[220,34963,347],{"class":420},[220,34965,359],{"class":264},[212,34967,34969],{"className":251,"code":34968,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlueNoise', props: {} }\n ]\n})\n",[99,34970,34971,34981,34985,34999,35003,35012,35016],{"__ignoreMap":178},[220,34972,34973,34975,34977,34979],{"class":222,"line":223},[220,34974,261],{"class":260},[220,34976,11512],{"class":264},[220,34978,268],{"class":260},[220,34980,4007],{"class":230},[220,34982,34983],{"class":222,"line":179},[220,34984,647],{"emptyLinePlaceholder":194},[220,34986,34987,34989,34991,34993,34995,34997],{"class":222,"line":389},[220,34988,1735],{"class":260},[220,34990,1738],{"class":420},[220,34992,1741],{"class":260},[220,34994,1744],{"class":260},[220,34996,1747],{"class":226},[220,34998,1750],{"class":264},[220,35000,35001],{"class":222,"line":399},[220,35002,1765],{"class":264},[220,35004,35005,35007,35010],{"class":222,"line":644},[220,35006,1770],{"class":264},[220,35008,35009],{"class":230},"'BlueNoise'",[220,35011,2465],{"class":264},[220,35013,35014],{"class":222,"line":650},[220,35015,1787],{"class":264},[220,35017,35018],{"class":222,"line":656},[220,35019,1792],{"class":264},[1504,35021,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":35023},[35024,35025],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":34833,"description":34841},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":35032,"title":11769,"body":35033,"category":32234,"componentType":25883,"description":35040,"extension":191,"meta":35359,"navigation":194,"path":35360,"requiresChild":194,"seo":35361,"stem":35362,"__hash__":35363},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":35034,"toc":35355},[35035,35038,35041,35043,35045,35048,35050,35353],[11,35036,11769],{"id":35037},"blur",[15,35039,35040],{},"A simple Gaussian blur effect",[31911,35042],{"component":11769},[23,35044,31915],{"id":26533},[31917,35046],{":props":35047},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,35049,31923],{"id":31922},[246,35051,35052,35109,35169,35225,35283],{":tabs":1557},[212,35053,35055],{"className":334,"code":35054,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35056,35057,35065,35072,35081,35085,35093,35101],{"__ignoreMap":178},[220,35058,35059,35061,35063],{"class":222,"line":223},[220,35060,343],{"class":264},[220,35062,347],{"class":346},[220,35064,359],{"class":264},[220,35066,35067,35069],{"class":222,"line":179},[220,35068,364],{"class":264},[220,35070,35071],{"class":346},"Blur\n",[220,35073,35074,35076,35078],{"class":222,"line":389},[220,35075,20371],{"class":226},[220,35077,353],{"class":264},[220,35079,35080],{"class":230},"\"50\"\n",[220,35082,35083],{"class":222,"line":399},[220,35084,31959],{"class":264},[220,35086,35087,35089,35091],{"class":222,"line":644},[220,35088,2550],{"class":264},[220,35090,2553],{"class":346},[220,35092,386],{"class":264},[220,35094,35095,35097,35099],{"class":222,"line":650},[220,35096,2567],{"class":264},[220,35098,11769],{"class":346},[220,35100,359],{"class":264},[220,35102,35103,35105,35107],{"class":222,"line":656},[220,35104,402],{"class":264},[220,35106,347],{"class":346},[220,35108,359],{"class":264},[212,35110,35112],{"className":409,"code":35111,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35113,35114,35122,35128,35141,35145,35153,35161],{"__ignoreMap":178},[220,35115,35116,35118,35120],{"class":222,"line":223},[220,35117,343],{"class":264},[220,35119,347],{"class":420},[220,35121,359],{"class":264},[220,35123,35124,35126],{"class":222,"line":179},[220,35125,364],{"class":264},[220,35127,35071],{"class":420},[220,35129,35130,35132,35134,35136,35139],{"class":222,"line":389},[220,35131,20482],{"class":226},[220,35133,353],{"class":260},[220,35135,743],{"class":264},[220,35137,35138],{"class":420},"50",[220,35140,749],{"class":264},[220,35142,35143],{"class":222,"line":399},[220,35144,31959],{"class":264},[220,35146,35147,35149,35151],{"class":222,"line":644},[220,35148,2550],{"class":264},[220,35150,2553],{"class":420},[220,35152,386],{"class":264},[220,35154,35155,35157,35159],{"class":222,"line":650},[220,35156,2567],{"class":264},[220,35158,11769],{"class":420},[220,35160,359],{"class":264},[220,35162,35163,35165,35167],{"class":222,"line":656},[220,35164,402],{"class":264},[220,35166,347],{"class":420},[220,35168,359],{"class":264},[212,35170,35171],{"className":2844,"code":35111,"language":2846,"meta":178,"style":178},[99,35172,35173,35181,35187,35197,35201,35209,35217],{"__ignoreMap":178},[220,35174,35175,35177,35179],{"class":222,"line":223},[220,35176,343],{"class":264},[220,35178,347],{"class":420},[220,35180,359],{"class":264},[220,35182,35183,35185],{"class":222,"line":179},[220,35184,364],{"class":264},[220,35186,35071],{"class":420},[220,35188,35189,35191,35193,35195],{"class":222,"line":389},[220,35190,20482],{"class":226},[220,35192,29871],{"class":264},[220,35194,35138],{"class":420},[220,35196,749],{"class":264},[220,35198,35199],{"class":222,"line":399},[220,35200,31959],{"class":264},[220,35202,35203,35205,35207],{"class":222,"line":644},[220,35204,2550],{"class":264},[220,35206,2553],{"class":420},[220,35208,386],{"class":264},[220,35210,35211,35213,35215],{"class":222,"line":650},[220,35212,2567],{"class":264},[220,35214,11769],{"class":420},[220,35216,359],{"class":264},[220,35218,35219,35221,35223],{"class":222,"line":656},[220,35220,402],{"class":264},[220,35222,347],{"class":420},[220,35224,359],{"class":264},[212,35226,35227],{"className":468,"code":35111,"language":469,"meta":178,"style":178},[99,35228,35229,35237,35243,35255,35259,35267,35275],{"__ignoreMap":178},[220,35230,35231,35233,35235],{"class":222,"line":223},[220,35232,343],{"class":264},[220,35234,347],{"class":420},[220,35236,359],{"class":264},[220,35238,35239,35241],{"class":222,"line":179},[220,35240,364],{"class":264},[220,35242,35071],{"class":420},[220,35244,35245,35247,35249,35251,35253],{"class":222,"line":389},[220,35246,20482],{"class":226},[220,35248,353],{"class":260},[220,35250,743],{"class":264},[220,35252,35138],{"class":420},[220,35254,749],{"class":264},[220,35256,35257],{"class":222,"line":399},[220,35258,31959],{"class":264},[220,35260,35261,35263,35265],{"class":222,"line":644},[220,35262,2550],{"class":264},[220,35264,2553],{"class":420},[220,35266,386],{"class":264},[220,35268,35269,35271,35273],{"class":222,"line":650},[220,35270,2567],{"class":264},[220,35272,11769],{"class":420},[220,35274,359],{"class":264},[220,35276,35277,35279,35281],{"class":222,"line":656},[220,35278,402],{"class":264},[220,35280,347],{"class":420},[220,35282,359],{"class":264},[212,35284,35286],{"className":251,"code":35285,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,35287,35288,35298,35302,35316,35320,35333,35341,35345,35349],{"__ignoreMap":178},[220,35289,35290,35292,35294,35296],{"class":222,"line":223},[220,35291,261],{"class":260},[220,35293,11512],{"class":264},[220,35295,268],{"class":260},[220,35297,4007],{"class":230},[220,35299,35300],{"class":222,"line":179},[220,35301,647],{"emptyLinePlaceholder":194},[220,35303,35304,35306,35308,35310,35312,35314],{"class":222,"line":389},[220,35305,1735],{"class":260},[220,35307,1738],{"class":420},[220,35309,1741],{"class":260},[220,35311,1744],{"class":260},[220,35313,1747],{"class":226},[220,35315,1750],{"class":264},[220,35317,35318],{"class":222,"line":399},[220,35319,1765],{"class":264},[220,35321,35322,35324,35327,35329,35331],{"class":222,"line":644},[220,35323,1770],{"class":264},[220,35325,35326],{"class":230},"'Blur'",[220,35328,32203],{"class":264},[220,35330,35138],{"class":420},[220,35332,7546],{"class":264},[220,35334,35335,35337,35339],{"class":222,"line":650},[220,35336,7014],{"class":264},[220,35338,3206],{"class":230},[220,35340,2465],{"class":264},[220,35342,35343],{"class":222,"line":656},[220,35344,7031],{"class":264},[220,35346,35347],{"class":222,"line":673},[220,35348,1787],{"class":264},[220,35350,35351],{"class":222,"line":682},[220,35352,1792],{"class":264},[1504,35354,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35356},[35357,35358],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":11769,"description":35040},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":35365,"title":35366,"body":35367,"category":35559,"componentType":25877,"description":35374,"extension":191,"meta":35560,"navigation":194,"path":35561,"requiresChild":32530,"seo":35562,"stem":35563,"__hash__":35564},"components\u002Fdocs\u002Fcomponents\u002FBoids.md","Boids",{"type":8,"value":35368,"toc":35555},[35369,35372,35375,35377,35379,35382,35384,35553],[11,35370,35366],{"id":35371},"boids",[15,35373,35374],{},"A living murmuration of hundreds of flocking agents drawn as crisp arrows, streaks, dots or glowing comets — separation, alignment and cohesion drive fluid, splitting-and-merging ribbons, agents flash toward an excited color when scattered, and the cursor acts as an attractor or a predator",[31911,35376],{"component":35366},[23,35378,31915],{"id":26533},[31917,35380],{":props":35381},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of agents cruising calmly with the flock\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff7ad9\",\"description\":\"Color agents flash toward when agitated — scattering from the predator cursor or banking through a hard turn\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"agentShape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"arrow\",\"description\":\"What each agent is drawn as — a hard-edged arrow, streak or square pointing along its heading, a plain dot, or a soft glowing comet\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"2000\",\"description\":\"Number of flocking agents\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Overall cruising speed of the flock\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Re-rolls the flock's starting formation — each value spawns the murmuration in a different arrangement\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Size of each agent\"},{\"name\":\"trails\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How long each agent's motion trail persists — 0 draws crisp agents, 1 leaves long ribbons\"},{\"name\":\"separation\",\"type\":\"number\",\"default\":\"1.7\",\"description\":\"How strongly agents steer away from crowding their neighbours\"},{\"name\":\"alignment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How strongly agents match their neighbours' heading — the driver of coherent murmuration ribbons\"},{\"name\":\"cohesion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly agents steer toward the local center of the flock\"},{\"name\":\"perception\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"How far each agent can sense its neighbours (in screen heights) — larger sees bigger, smoother flocks\"},{\"name\":\"cursorMode\",\"type\":\"\\\"none\\\" | \\\"attract\\\" | \\\"repel\\\"\",\"default\":\"repel\",\"description\":\"How the flock reacts to the cursor\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the cursor's pull or push on the flock\"}]",[23,35383,31923],{"id":31922},[246,35385,35386,35415,35443,35471,35499],{":tabs":1557},[212,35387,35389],{"className":334,"code":35388,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBoids \u002F>\n\u003C\u002FShader>\n",[99,35390,35391,35399,35407],{"__ignoreMap":178},[220,35392,35393,35395,35397],{"class":222,"line":223},[220,35394,343],{"class":264},[220,35396,347],{"class":346},[220,35398,359],{"class":264},[220,35400,35401,35403,35405],{"class":222,"line":179},[220,35402,364],{"class":264},[220,35404,35366],{"class":346},[220,35406,386],{"class":264},[220,35408,35409,35411,35413],{"class":222,"line":389},[220,35410,402],{"class":264},[220,35412,347],{"class":346},[220,35414,359],{"class":264},[212,35416,35417],{"className":409,"code":35388,"language":411,"meta":178,"style":178},[99,35418,35419,35427,35435],{"__ignoreMap":178},[220,35420,35421,35423,35425],{"class":222,"line":223},[220,35422,343],{"class":264},[220,35424,347],{"class":420},[220,35426,359],{"class":264},[220,35428,35429,35431,35433],{"class":222,"line":179},[220,35430,364],{"class":264},[220,35432,35366],{"class":420},[220,35434,386],{"class":264},[220,35436,35437,35439,35441],{"class":222,"line":389},[220,35438,402],{"class":264},[220,35440,347],{"class":420},[220,35442,359],{"class":264},[212,35444,35445],{"className":2844,"code":35388,"language":2846,"meta":178,"style":178},[99,35446,35447,35455,35463],{"__ignoreMap":178},[220,35448,35449,35451,35453],{"class":222,"line":223},[220,35450,343],{"class":264},[220,35452,347],{"class":420},[220,35454,359],{"class":264},[220,35456,35457,35459,35461],{"class":222,"line":179},[220,35458,364],{"class":264},[220,35460,35366],{"class":420},[220,35462,386],{"class":264},[220,35464,35465,35467,35469],{"class":222,"line":389},[220,35466,402],{"class":264},[220,35468,347],{"class":420},[220,35470,359],{"class":264},[212,35472,35473],{"className":468,"code":35388,"language":469,"meta":178,"style":178},[99,35474,35475,35483,35491],{"__ignoreMap":178},[220,35476,35477,35479,35481],{"class":222,"line":223},[220,35478,343],{"class":264},[220,35480,347],{"class":420},[220,35482,359],{"class":264},[220,35484,35485,35487,35489],{"class":222,"line":179},[220,35486,364],{"class":264},[220,35488,35366],{"class":420},[220,35490,386],{"class":264},[220,35492,35493,35495,35497],{"class":222,"line":389},[220,35494,402],{"class":264},[220,35496,347],{"class":420},[220,35498,359],{"class":264},[212,35500,35502],{"className":251,"code":35501,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Boids', props: {} }\n ]\n})\n",[99,35503,35504,35514,35518,35532,35536,35545,35549],{"__ignoreMap":178},[220,35505,35506,35508,35510,35512],{"class":222,"line":223},[220,35507,261],{"class":260},[220,35509,11512],{"class":264},[220,35511,268],{"class":260},[220,35513,4007],{"class":230},[220,35515,35516],{"class":222,"line":179},[220,35517,647],{"emptyLinePlaceholder":194},[220,35519,35520,35522,35524,35526,35528,35530],{"class":222,"line":389},[220,35521,1735],{"class":260},[220,35523,1738],{"class":420},[220,35525,1741],{"class":260},[220,35527,1744],{"class":260},[220,35529,1747],{"class":226},[220,35531,1750],{"class":264},[220,35533,35534],{"class":222,"line":399},[220,35535,1765],{"class":264},[220,35537,35538,35540,35543],{"class":222,"line":644},[220,35539,1770],{"class":264},[220,35541,35542],{"class":230},"'Boids'",[220,35544,2465],{"class":264},[220,35546,35547],{"class":222,"line":650},[220,35548,1787],{"class":264},[220,35550,35551],{"class":222,"line":656},[220,35552,1792],{"class":264},[1504,35554,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":35556},[35557,35558],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fboids",{"title":35366,"description":35374},"docs\u002Fcomponents\u002FBoids","hdhqsDQg5KnzNA_UfsNUlag4VVQ8bEJ7WQJ5TSK_WTs",{"id":35566,"title":35567,"body":35568,"category":32234,"componentType":25883,"description":35575,"extension":191,"meta":35892,"navigation":194,"path":35893,"requiresChild":194,"seo":35894,"stem":35895,"__hash__":35896},"components\u002Fdocs\u002Fcomponents\u002FBokehBlur.md","BokehBlur",{"type":8,"value":35569,"toc":35888},[35570,35573,35576,35578,35580,35583,35585,35886],[11,35571,35567],{"id":35572},"bokehblur",[15,35574,35575],{},"Photographic lens blur where bright highlights bloom into aperture-shaped discs",[31911,35577],{"component":35567},[23,35579,31915],{"id":26533},[31917,35581],{":props":35582},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Defocus amount — how far the lens blur spreads\"},{\"name\":\"highlightGain\",\"type\":\"number\",\"default\":\"4\",\"description\":\"How strongly bright highlights bloom into discs\"},{\"name\":\"highlightThreshold\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Brightness above which a highlight forms a disc\"},{\"name\":\"bladeShape\",\"type\":\"\\\"blades\\\" | \\\"circle\\\" | \\\"star\\\" | \\\"heart\\\" | \\\"flower\\\" | \\\"cross\\\" | \\\"ring\\\"\",\"default\":\"blades\",\"description\":\"Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)\"},{\"name\":\"bladeCount\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris\"},{\"name\":\"bladeRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the aperture shape (in degrees)\"},{\"name\":\"chromaticFringe\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Lens colour fringing on the disc edges\"}]",[23,35584,31923],{"id":31922},[246,35586,35587,35643,35702,35758,35816],{":tabs":1557},[212,35588,35590],{"className":334,"code":35589,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n :radius=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35591,35592,35600,35607,35615,35619,35627,35635],{"__ignoreMap":178},[220,35593,35594,35596,35598],{"class":222,"line":223},[220,35595,343],{"class":264},[220,35597,347],{"class":346},[220,35599,359],{"class":264},[220,35601,35602,35604],{"class":222,"line":179},[220,35603,364],{"class":264},[220,35605,35606],{"class":346},"BokehBlur\n",[220,35608,35609,35611,35613],{"class":222,"line":389},[220,35610,17405],{"class":226},[220,35612,353],{"class":264},[220,35614,35080],{"class":230},[220,35616,35617],{"class":222,"line":399},[220,35618,31959],{"class":264},[220,35620,35621,35623,35625],{"class":222,"line":644},[220,35622,2550],{"class":264},[220,35624,2553],{"class":346},[220,35626,386],{"class":264},[220,35628,35629,35631,35633],{"class":222,"line":650},[220,35630,2567],{"class":264},[220,35632,35567],{"class":346},[220,35634,359],{"class":264},[220,35636,35637,35639,35641],{"class":222,"line":656},[220,35638,402],{"class":264},[220,35640,347],{"class":346},[220,35642,359],{"class":264},[212,35644,35646],{"className":409,"code":35645,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n radius={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35647,35648,35656,35662,35674,35678,35686,35694],{"__ignoreMap":178},[220,35649,35650,35652,35654],{"class":222,"line":223},[220,35651,343],{"class":264},[220,35653,347],{"class":420},[220,35655,359],{"class":264},[220,35657,35658,35660],{"class":222,"line":179},[220,35659,364],{"class":264},[220,35661,35606],{"class":420},[220,35663,35664,35666,35668,35670,35672],{"class":222,"line":389},[220,35665,9645],{"class":226},[220,35667,353],{"class":260},[220,35669,743],{"class":264},[220,35671,35138],{"class":420},[220,35673,749],{"class":264},[220,35675,35676],{"class":222,"line":399},[220,35677,31959],{"class":264},[220,35679,35680,35682,35684],{"class":222,"line":644},[220,35681,2550],{"class":264},[220,35683,2553],{"class":420},[220,35685,386],{"class":264},[220,35687,35688,35690,35692],{"class":222,"line":650},[220,35689,2567],{"class":264},[220,35691,35567],{"class":420},[220,35693,359],{"class":264},[220,35695,35696,35698,35700],{"class":222,"line":656},[220,35697,402],{"class":264},[220,35699,347],{"class":420},[220,35701,359],{"class":264},[212,35703,35704],{"className":2844,"code":35645,"language":2846,"meta":178,"style":178},[99,35705,35706,35714,35720,35730,35734,35742,35750],{"__ignoreMap":178},[220,35707,35708,35710,35712],{"class":222,"line":223},[220,35709,343],{"class":264},[220,35711,347],{"class":420},[220,35713,359],{"class":264},[220,35715,35716,35718],{"class":222,"line":179},[220,35717,364],{"class":264},[220,35719,35606],{"class":420},[220,35721,35722,35724,35726,35728],{"class":222,"line":389},[220,35723,9645],{"class":226},[220,35725,29871],{"class":264},[220,35727,35138],{"class":420},[220,35729,749],{"class":264},[220,35731,35732],{"class":222,"line":399},[220,35733,31959],{"class":264},[220,35735,35736,35738,35740],{"class":222,"line":644},[220,35737,2550],{"class":264},[220,35739,2553],{"class":420},[220,35741,386],{"class":264},[220,35743,35744,35746,35748],{"class":222,"line":650},[220,35745,2567],{"class":264},[220,35747,35567],{"class":420},[220,35749,359],{"class":264},[220,35751,35752,35754,35756],{"class":222,"line":656},[220,35753,402],{"class":264},[220,35755,347],{"class":420},[220,35757,359],{"class":264},[212,35759,35760],{"className":468,"code":35645,"language":469,"meta":178,"style":178},[99,35761,35762,35770,35776,35788,35792,35800,35808],{"__ignoreMap":178},[220,35763,35764,35766,35768],{"class":222,"line":223},[220,35765,343],{"class":264},[220,35767,347],{"class":420},[220,35769,359],{"class":264},[220,35771,35772,35774],{"class":222,"line":179},[220,35773,364],{"class":264},[220,35775,35606],{"class":420},[220,35777,35778,35780,35782,35784,35786],{"class":222,"line":389},[220,35779,9645],{"class":226},[220,35781,353],{"class":260},[220,35783,743],{"class":264},[220,35785,35138],{"class":420},[220,35787,749],{"class":264},[220,35789,35790],{"class":222,"line":399},[220,35791,31959],{"class":264},[220,35793,35794,35796,35798],{"class":222,"line":644},[220,35795,2550],{"class":264},[220,35797,2553],{"class":420},[220,35799,386],{"class":264},[220,35801,35802,35804,35806],{"class":222,"line":650},[220,35803,2567],{"class":264},[220,35805,35567],{"class":420},[220,35807,359],{"class":264},[220,35809,35810,35812,35814],{"class":222,"line":656},[220,35811,402],{"class":264},[220,35813,347],{"class":420},[220,35815,359],{"class":264},[212,35817,35819],{"className":251,"code":35818,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BokehBlur', props: { radius: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,35820,35821,35831,35835,35849,35853,35866,35874,35878,35882],{"__ignoreMap":178},[220,35822,35823,35825,35827,35829],{"class":222,"line":223},[220,35824,261],{"class":260},[220,35826,11512],{"class":264},[220,35828,268],{"class":260},[220,35830,4007],{"class":230},[220,35832,35833],{"class":222,"line":179},[220,35834,647],{"emptyLinePlaceholder":194},[220,35836,35837,35839,35841,35843,35845,35847],{"class":222,"line":389},[220,35838,1735],{"class":260},[220,35840,1738],{"class":420},[220,35842,1741],{"class":260},[220,35844,1744],{"class":260},[220,35846,1747],{"class":226},[220,35848,1750],{"class":264},[220,35850,35851],{"class":222,"line":399},[220,35852,1765],{"class":264},[220,35854,35855,35857,35860,35862,35864],{"class":222,"line":644},[220,35856,1770],{"class":264},[220,35858,35859],{"class":230},"'BokehBlur'",[220,35861,7541],{"class":264},[220,35863,35138],{"class":420},[220,35865,7546],{"class":264},[220,35867,35868,35870,35872],{"class":222,"line":650},[220,35869,7014],{"class":264},[220,35871,3206],{"class":230},[220,35873,2465],{"class":264},[220,35875,35876],{"class":222,"line":656},[220,35877,7031],{"class":264},[220,35879,35880],{"class":222,"line":673},[220,35881,1787],{"class":264},[220,35883,35884],{"class":222,"line":682},[220,35885,1792],{"class":264},[1504,35887,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35889},[35890,35891],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbokehblur",{"title":35567,"description":35575},"docs\u002Fcomponents\u002FBokehBlur","UvgWoVz1msLk-OLpiNCYNxzzxY6uC56cKmY-6PdjJas",{"id":35898,"title":35899,"body":35900,"category":33063,"componentType":25877,"description":35907,"extension":191,"meta":36092,"navigation":194,"path":36093,"requiresChild":32530,"seo":36094,"stem":36095,"__hash__":36096},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":35901,"toc":36088},[35902,35905,35908,35910,35912,35915,35917,36086],[11,35903,35899],{"id":35904},"brickpattern",[15,35906,35907],{},"Classic brick wall pattern with alternating rows and mortar gaps",[31911,35909],{"component":35899},[23,35911,31915],{"id":26533},[31917,35913],{":props":35914},"[{\"name\":\"colorBrick\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Brick color\"},{\"name\":\"colorMortar\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Mortar \u002F gap color\"},{\"name\":\"cellsX\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of bricks per row\"},{\"name\":\"cellsY\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of brick rows\"},{\"name\":\"mortar\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of mortar gaps — equal pixel thickness in both directions\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the brick edges (0 = crisp, 1 = very soft)\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Per-brick random lightening\u002Fdarkening of the brick color\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the pattern in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Static horizontal offset — shifts the brick pattern without animating\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How much each row's speed varies — at high values rows move at different speeds and directions\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for per-row speed variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,35916,31923],{"id":31922},[246,35918,35919,35948,35976,36004,36032],{":tabs":1557},[212,35920,35922],{"className":334,"code":35921,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,35923,35924,35932,35940],{"__ignoreMap":178},[220,35925,35926,35928,35930],{"class":222,"line":223},[220,35927,343],{"class":264},[220,35929,347],{"class":346},[220,35931,359],{"class":264},[220,35933,35934,35936,35938],{"class":222,"line":179},[220,35935,364],{"class":264},[220,35937,35899],{"class":346},[220,35939,386],{"class":264},[220,35941,35942,35944,35946],{"class":222,"line":389},[220,35943,402],{"class":264},[220,35945,347],{"class":346},[220,35947,359],{"class":264},[212,35949,35950],{"className":409,"code":35921,"language":411,"meta":178,"style":178},[99,35951,35952,35960,35968],{"__ignoreMap":178},[220,35953,35954,35956,35958],{"class":222,"line":223},[220,35955,343],{"class":264},[220,35957,347],{"class":420},[220,35959,359],{"class":264},[220,35961,35962,35964,35966],{"class":222,"line":179},[220,35963,364],{"class":264},[220,35965,35899],{"class":420},[220,35967,386],{"class":264},[220,35969,35970,35972,35974],{"class":222,"line":389},[220,35971,402],{"class":264},[220,35973,347],{"class":420},[220,35975,359],{"class":264},[212,35977,35978],{"className":2844,"code":35921,"language":2846,"meta":178,"style":178},[99,35979,35980,35988,35996],{"__ignoreMap":178},[220,35981,35982,35984,35986],{"class":222,"line":223},[220,35983,343],{"class":264},[220,35985,347],{"class":420},[220,35987,359],{"class":264},[220,35989,35990,35992,35994],{"class":222,"line":179},[220,35991,364],{"class":264},[220,35993,35899],{"class":420},[220,35995,386],{"class":264},[220,35997,35998,36000,36002],{"class":222,"line":389},[220,35999,402],{"class":264},[220,36001,347],{"class":420},[220,36003,359],{"class":264},[212,36005,36006],{"className":468,"code":35921,"language":469,"meta":178,"style":178},[99,36007,36008,36016,36024],{"__ignoreMap":178},[220,36009,36010,36012,36014],{"class":222,"line":223},[220,36011,343],{"class":264},[220,36013,347],{"class":420},[220,36015,359],{"class":264},[220,36017,36018,36020,36022],{"class":222,"line":179},[220,36019,364],{"class":264},[220,36021,35899],{"class":420},[220,36023,386],{"class":264},[220,36025,36026,36028,36030],{"class":222,"line":389},[220,36027,402],{"class":264},[220,36029,347],{"class":420},[220,36031,359],{"class":264},[212,36033,36035],{"className":251,"code":36034,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrickPattern', props: {} }\n ]\n})\n",[99,36036,36037,36047,36051,36065,36069,36078,36082],{"__ignoreMap":178},[220,36038,36039,36041,36043,36045],{"class":222,"line":223},[220,36040,261],{"class":260},[220,36042,11512],{"class":264},[220,36044,268],{"class":260},[220,36046,4007],{"class":230},[220,36048,36049],{"class":222,"line":179},[220,36050,647],{"emptyLinePlaceholder":194},[220,36052,36053,36055,36057,36059,36061,36063],{"class":222,"line":389},[220,36054,1735],{"class":260},[220,36056,1738],{"class":420},[220,36058,1741],{"class":260},[220,36060,1744],{"class":260},[220,36062,1747],{"class":226},[220,36064,1750],{"class":264},[220,36066,36067],{"class":222,"line":399},[220,36068,1765],{"class":264},[220,36070,36071,36073,36076],{"class":222,"line":644},[220,36072,1770],{"class":264},[220,36074,36075],{"class":230},"'BrickPattern'",[220,36077,2465],{"class":264},[220,36079,36080],{"class":222,"line":650},[220,36081,1787],{"class":264},[220,36083,36084],{"class":222,"line":656},[220,36085,1792],{"class":264},[1504,36087,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36089},[36090,36091],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":35899,"description":35907},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":36098,"title":36099,"body":36100,"category":36368,"componentType":25883,"description":36107,"extension":191,"meta":36369,"navigation":194,"path":36370,"requiresChild":194,"seo":36371,"stem":36372,"__hash__":36373},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":36101,"toc":36364},[36102,36105,36108,36110,36112,36115,36117,36362],[11,36103,36099],{"id":36104},"brightnesscontrast",[15,36106,36107],{},"Adjust brightness and contrast of the image",[31911,36109],{"component":36099},[23,36111,31915],{"id":26533},[31917,36113],{":props":36114},"[{\"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,36116,31923],{"id":31922},[246,36118,36119,36164,36208,36252,36296],{":tabs":1557},[212,36120,36122],{"className":334,"code":36121,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,36123,36124,36132,36140,36148,36156],{"__ignoreMap":178},[220,36125,36126,36128,36130],{"class":222,"line":223},[220,36127,343],{"class":264},[220,36129,347],{"class":346},[220,36131,359],{"class":264},[220,36133,36134,36136,36138],{"class":222,"line":179},[220,36135,364],{"class":264},[220,36137,36099],{"class":346},[220,36139,359],{"class":264},[220,36141,36142,36144,36146],{"class":222,"line":389},[220,36143,2550],{"class":264},[220,36145,2553],{"class":346},[220,36147,386],{"class":264},[220,36149,36150,36152,36154],{"class":222,"line":399},[220,36151,2567],{"class":264},[220,36153,36099],{"class":346},[220,36155,359],{"class":264},[220,36157,36158,36160,36162],{"class":222,"line":644},[220,36159,402],{"class":264},[220,36161,347],{"class":346},[220,36163,359],{"class":264},[212,36165,36166],{"className":409,"code":36121,"language":411,"meta":178,"style":178},[99,36167,36168,36176,36184,36192,36200],{"__ignoreMap":178},[220,36169,36170,36172,36174],{"class":222,"line":223},[220,36171,343],{"class":264},[220,36173,347],{"class":420},[220,36175,359],{"class":264},[220,36177,36178,36180,36182],{"class":222,"line":179},[220,36179,364],{"class":264},[220,36181,36099],{"class":420},[220,36183,359],{"class":264},[220,36185,36186,36188,36190],{"class":222,"line":389},[220,36187,2550],{"class":264},[220,36189,2553],{"class":420},[220,36191,386],{"class":264},[220,36193,36194,36196,36198],{"class":222,"line":399},[220,36195,2567],{"class":264},[220,36197,36099],{"class":420},[220,36199,359],{"class":264},[220,36201,36202,36204,36206],{"class":222,"line":644},[220,36203,402],{"class":264},[220,36205,347],{"class":420},[220,36207,359],{"class":264},[212,36209,36210],{"className":2844,"code":36121,"language":2846,"meta":178,"style":178},[99,36211,36212,36220,36228,36236,36244],{"__ignoreMap":178},[220,36213,36214,36216,36218],{"class":222,"line":223},[220,36215,343],{"class":264},[220,36217,347],{"class":420},[220,36219,359],{"class":264},[220,36221,36222,36224,36226],{"class":222,"line":179},[220,36223,364],{"class":264},[220,36225,36099],{"class":420},[220,36227,359],{"class":264},[220,36229,36230,36232,36234],{"class":222,"line":389},[220,36231,2550],{"class":264},[220,36233,2553],{"class":420},[220,36235,386],{"class":264},[220,36237,36238,36240,36242],{"class":222,"line":399},[220,36239,2567],{"class":264},[220,36241,36099],{"class":420},[220,36243,359],{"class":264},[220,36245,36246,36248,36250],{"class":222,"line":644},[220,36247,402],{"class":264},[220,36249,347],{"class":420},[220,36251,359],{"class":264},[212,36253,36254],{"className":468,"code":36121,"language":469,"meta":178,"style":178},[99,36255,36256,36264,36272,36280,36288],{"__ignoreMap":178},[220,36257,36258,36260,36262],{"class":222,"line":223},[220,36259,343],{"class":264},[220,36261,347],{"class":420},[220,36263,359],{"class":264},[220,36265,36266,36268,36270],{"class":222,"line":179},[220,36267,364],{"class":264},[220,36269,36099],{"class":420},[220,36271,359],{"class":264},[220,36273,36274,36276,36278],{"class":222,"line":389},[220,36275,2550],{"class":264},[220,36277,2553],{"class":420},[220,36279,386],{"class":264},[220,36281,36282,36284,36286],{"class":222,"line":399},[220,36283,2567],{"class":264},[220,36285,36099],{"class":420},[220,36287,359],{"class":264},[220,36289,36290,36292,36294],{"class":222,"line":644},[220,36291,402],{"class":264},[220,36293,347],{"class":420},[220,36295,359],{"class":264},[212,36297,36299],{"className":251,"code":36298,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrightnessContrast', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,36300,36301,36311,36315,36329,36333,36342,36350,36354,36358],{"__ignoreMap":178},[220,36302,36303,36305,36307,36309],{"class":222,"line":223},[220,36304,261],{"class":260},[220,36306,11512],{"class":264},[220,36308,268],{"class":260},[220,36310,4007],{"class":230},[220,36312,36313],{"class":222,"line":179},[220,36314,647],{"emptyLinePlaceholder":194},[220,36316,36317,36319,36321,36323,36325,36327],{"class":222,"line":389},[220,36318,1735],{"class":260},[220,36320,1738],{"class":420},[220,36322,1741],{"class":260},[220,36324,1744],{"class":260},[220,36326,1747],{"class":226},[220,36328,1750],{"class":264},[220,36330,36331],{"class":222,"line":399},[220,36332,1765],{"class":264},[220,36334,36335,36337,36340],{"class":222,"line":644},[220,36336,1770],{"class":264},[220,36338,36339],{"class":230},"'BrightnessContrast'",[220,36341,7009],{"class":264},[220,36343,36344,36346,36348],{"class":222,"line":650},[220,36345,7014],{"class":264},[220,36347,3206],{"class":230},[220,36349,2465],{"class":264},[220,36351,36352],{"class":222,"line":656},[220,36353,7031],{"class":264},[220,36355,36356],{"class":222,"line":673},[220,36357,1787],{"class":264},[220,36359,36360],{"class":222,"line":682},[220,36361,1792],{"class":264},[1504,36363,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36365},[36366,36367],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":36099,"description":36107},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":36375,"title":36376,"body":36377,"category":36569,"componentType":25877,"description":36384,"extension":191,"meta":36570,"navigation":194,"path":36571,"requiresChild":32530,"seo":36572,"stem":36573,"__hash__":36574},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":36378,"toc":36565},[36379,36382,36385,36387,36389,36392,36394,36563],[11,36380,36376],{"id":36381},"brushedmetal",[15,36383,36384],{},"Photorealistic brushed metal — a satin anodised surface combed with fine directional grain that smears the reflected studio and key light into the long anisotropic streaks of real brushed aluminium, steel, gold or copper",[31911,36386],{"component":36376},[23,36388,31915],{"id":26533},[31917,36390],{":props":36391},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#e9ebef\",\"description\":\"The bright tone of the polished grain — recolor for gold (#ffe8b0), copper (#ffc8a0) or steel\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#26282d\",\"description\":\"The dark tone the brushed grain falls to in shadow. Tint it warm for gold\u002Fbronze, cool for steel.\"},{\"name\":\"brushAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the surface is brushed, in degrees — the grain and every reflection streak run along this axis\"},{\"name\":\"anisotropy\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How directional the brushing is — 1 = long smeared streaks along the grain, 0 = isotropic satin with no direction\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Depth of the individual brush scratches — the fine satin texture combed into the metal\"},{\"name\":\"grainScale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Density of the brush lines — higher = finer, tighter scratches\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall satin softness — 0 = near-polished with crisp reflections, 1 = soft matte brushed finish\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.4\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen smeared across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the anisotropic specular streak, in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Speed of the slowly drifting reflection — the studio gently orbits the surface. 0 pauses.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,36393,31923],{"id":31922},[246,36395,36396,36425,36453,36481,36509],{":tabs":1557},[212,36397,36399],{"className":334,"code":36398,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,36400,36401,36409,36417],{"__ignoreMap":178},[220,36402,36403,36405,36407],{"class":222,"line":223},[220,36404,343],{"class":264},[220,36406,347],{"class":346},[220,36408,359],{"class":264},[220,36410,36411,36413,36415],{"class":222,"line":179},[220,36412,364],{"class":264},[220,36414,36376],{"class":346},[220,36416,386],{"class":264},[220,36418,36419,36421,36423],{"class":222,"line":389},[220,36420,402],{"class":264},[220,36422,347],{"class":346},[220,36424,359],{"class":264},[212,36426,36427],{"className":409,"code":36398,"language":411,"meta":178,"style":178},[99,36428,36429,36437,36445],{"__ignoreMap":178},[220,36430,36431,36433,36435],{"class":222,"line":223},[220,36432,343],{"class":264},[220,36434,347],{"class":420},[220,36436,359],{"class":264},[220,36438,36439,36441,36443],{"class":222,"line":179},[220,36440,364],{"class":264},[220,36442,36376],{"class":420},[220,36444,386],{"class":264},[220,36446,36447,36449,36451],{"class":222,"line":389},[220,36448,402],{"class":264},[220,36450,347],{"class":420},[220,36452,359],{"class":264},[212,36454,36455],{"className":2844,"code":36398,"language":2846,"meta":178,"style":178},[99,36456,36457,36465,36473],{"__ignoreMap":178},[220,36458,36459,36461,36463],{"class":222,"line":223},[220,36460,343],{"class":264},[220,36462,347],{"class":420},[220,36464,359],{"class":264},[220,36466,36467,36469,36471],{"class":222,"line":179},[220,36468,364],{"class":264},[220,36470,36376],{"class":420},[220,36472,386],{"class":264},[220,36474,36475,36477,36479],{"class":222,"line":389},[220,36476,402],{"class":264},[220,36478,347],{"class":420},[220,36480,359],{"class":264},[212,36482,36483],{"className":468,"code":36398,"language":469,"meta":178,"style":178},[99,36484,36485,36493,36501],{"__ignoreMap":178},[220,36486,36487,36489,36491],{"class":222,"line":223},[220,36488,343],{"class":264},[220,36490,347],{"class":420},[220,36492,359],{"class":264},[220,36494,36495,36497,36499],{"class":222,"line":179},[220,36496,364],{"class":264},[220,36498,36376],{"class":420},[220,36500,386],{"class":264},[220,36502,36503,36505,36507],{"class":222,"line":389},[220,36504,402],{"class":264},[220,36506,347],{"class":420},[220,36508,359],{"class":264},[212,36510,36512],{"className":251,"code":36511,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrushedMetal', props: {} }\n ]\n})\n",[99,36513,36514,36524,36528,36542,36546,36555,36559],{"__ignoreMap":178},[220,36515,36516,36518,36520,36522],{"class":222,"line":223},[220,36517,261],{"class":260},[220,36519,11512],{"class":264},[220,36521,268],{"class":260},[220,36523,4007],{"class":230},[220,36525,36526],{"class":222,"line":179},[220,36527,647],{"emptyLinePlaceholder":194},[220,36529,36530,36532,36534,36536,36538,36540],{"class":222,"line":389},[220,36531,1735],{"class":260},[220,36533,1738],{"class":420},[220,36535,1741],{"class":260},[220,36537,1744],{"class":260},[220,36539,1747],{"class":226},[220,36541,1750],{"class":264},[220,36543,36544],{"class":222,"line":399},[220,36545,1765],{"class":264},[220,36547,36548,36550,36553],{"class":222,"line":644},[220,36549,1770],{"class":264},[220,36551,36552],{"class":230},"'BrushedMetal'",[220,36554,2465],{"class":264},[220,36556,36557],{"class":222,"line":650},[220,36558,1787],{"class":264},[220,36560,36561],{"class":222,"line":656},[220,36562,1792],{"class":264},[1504,36564,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":36566},[36567,36568],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":36376,"description":36384},"docs\u002Fcomponents\u002FBrushedMetal","X6ouSbZ77zKffUpJ7quDAdvuyIaM6zcwqjSynJdeoHc",{"id":36576,"title":36577,"body":36578,"category":33396,"componentType":25883,"description":36585,"extension":191,"meta":36903,"navigation":194,"path":36904,"requiresChild":194,"seo":36905,"stem":36906,"__hash__":36907},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":36579,"toc":36899},[36580,36583,36586,36588,36590,36593,36595,36897],[11,36581,36577],{"id":36582},"bulge",[15,36584,36585],{},"Magnify or pinch content around a center point",[31911,36587],{"component":36577},[23,36589,31915],{"id":26533},[31917,36591],{":props":36592},"[{\"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,36594,31923],{"id":31922},[246,36596,36597,36654,36713,36769,36827],{":tabs":1557},[212,36598,36600],{"className":334,"code":36599,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36601,36602,36610,36617,36626,36630,36638,36646],{"__ignoreMap":178},[220,36603,36604,36606,36608],{"class":222,"line":223},[220,36605,343],{"class":264},[220,36607,347],{"class":346},[220,36609,359],{"class":264},[220,36611,36612,36614],{"class":222,"line":179},[220,36613,364],{"class":264},[220,36615,36616],{"class":346},"Bulge\n",[220,36618,36619,36621,36623],{"class":222,"line":389},[220,36620,17405],{"class":226},[220,36622,353],{"class":264},[220,36624,36625],{"class":230},"\"1\"\n",[220,36627,36628],{"class":222,"line":399},[220,36629,31959],{"class":264},[220,36631,36632,36634,36636],{"class":222,"line":644},[220,36633,2550],{"class":264},[220,36635,2553],{"class":346},[220,36637,386],{"class":264},[220,36639,36640,36642,36644],{"class":222,"line":650},[220,36641,2567],{"class":264},[220,36643,36577],{"class":346},[220,36645,359],{"class":264},[220,36647,36648,36650,36652],{"class":222,"line":656},[220,36649,402],{"class":264},[220,36651,347],{"class":346},[220,36653,359],{"class":264},[212,36655,36657],{"className":409,"code":36656,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36658,36659,36667,36673,36685,36689,36697,36705],{"__ignoreMap":178},[220,36660,36661,36663,36665],{"class":222,"line":223},[220,36662,343],{"class":264},[220,36664,347],{"class":420},[220,36666,359],{"class":264},[220,36668,36669,36671],{"class":222,"line":179},[220,36670,364],{"class":264},[220,36672,36616],{"class":420},[220,36674,36675,36677,36679,36681,36683],{"class":222,"line":389},[220,36676,9645],{"class":226},[220,36678,353],{"class":260},[220,36680,743],{"class":264},[220,36682,8677],{"class":420},[220,36684,749],{"class":264},[220,36686,36687],{"class":222,"line":399},[220,36688,31959],{"class":264},[220,36690,36691,36693,36695],{"class":222,"line":644},[220,36692,2550],{"class":264},[220,36694,2553],{"class":420},[220,36696,386],{"class":264},[220,36698,36699,36701,36703],{"class":222,"line":650},[220,36700,2567],{"class":264},[220,36702,36577],{"class":420},[220,36704,359],{"class":264},[220,36706,36707,36709,36711],{"class":222,"line":656},[220,36708,402],{"class":264},[220,36710,347],{"class":420},[220,36712,359],{"class":264},[212,36714,36715],{"className":2844,"code":36656,"language":2846,"meta":178,"style":178},[99,36716,36717,36725,36731,36741,36745,36753,36761],{"__ignoreMap":178},[220,36718,36719,36721,36723],{"class":222,"line":223},[220,36720,343],{"class":264},[220,36722,347],{"class":420},[220,36724,359],{"class":264},[220,36726,36727,36729],{"class":222,"line":179},[220,36728,364],{"class":264},[220,36730,36616],{"class":420},[220,36732,36733,36735,36737,36739],{"class":222,"line":389},[220,36734,9645],{"class":226},[220,36736,29871],{"class":264},[220,36738,8677],{"class":420},[220,36740,749],{"class":264},[220,36742,36743],{"class":222,"line":399},[220,36744,31959],{"class":264},[220,36746,36747,36749,36751],{"class":222,"line":644},[220,36748,2550],{"class":264},[220,36750,2553],{"class":420},[220,36752,386],{"class":264},[220,36754,36755,36757,36759],{"class":222,"line":650},[220,36756,2567],{"class":264},[220,36758,36577],{"class":420},[220,36760,359],{"class":264},[220,36762,36763,36765,36767],{"class":222,"line":656},[220,36764,402],{"class":264},[220,36766,347],{"class":420},[220,36768,359],{"class":264},[212,36770,36771],{"className":468,"code":36656,"language":469,"meta":178,"style":178},[99,36772,36773,36781,36787,36799,36803,36811,36819],{"__ignoreMap":178},[220,36774,36775,36777,36779],{"class":222,"line":223},[220,36776,343],{"class":264},[220,36778,347],{"class":420},[220,36780,359],{"class":264},[220,36782,36783,36785],{"class":222,"line":179},[220,36784,364],{"class":264},[220,36786,36616],{"class":420},[220,36788,36789,36791,36793,36795,36797],{"class":222,"line":389},[220,36790,9645],{"class":226},[220,36792,353],{"class":260},[220,36794,743],{"class":264},[220,36796,8677],{"class":420},[220,36798,749],{"class":264},[220,36800,36801],{"class":222,"line":399},[220,36802,31959],{"class":264},[220,36804,36805,36807,36809],{"class":222,"line":644},[220,36806,2550],{"class":264},[220,36808,2553],{"class":420},[220,36810,386],{"class":264},[220,36812,36813,36815,36817],{"class":222,"line":650},[220,36814,2567],{"class":264},[220,36816,36577],{"class":420},[220,36818,359],{"class":264},[220,36820,36821,36823,36825],{"class":222,"line":656},[220,36822,402],{"class":264},[220,36824,347],{"class":420},[220,36826,359],{"class":264},[212,36828,36830],{"className":251,"code":36829,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bulge', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,36831,36832,36842,36846,36860,36864,36877,36885,36889,36893],{"__ignoreMap":178},[220,36833,36834,36836,36838,36840],{"class":222,"line":223},[220,36835,261],{"class":260},[220,36837,11512],{"class":264},[220,36839,268],{"class":260},[220,36841,4007],{"class":230},[220,36843,36844],{"class":222,"line":179},[220,36845,647],{"emptyLinePlaceholder":194},[220,36847,36848,36850,36852,36854,36856,36858],{"class":222,"line":389},[220,36849,1735],{"class":260},[220,36851,1738],{"class":420},[220,36853,1741],{"class":260},[220,36855,1744],{"class":260},[220,36857,1747],{"class":226},[220,36859,1750],{"class":264},[220,36861,36862],{"class":222,"line":399},[220,36863,1765],{"class":264},[220,36865,36866,36868,36871,36873,36875],{"class":222,"line":644},[220,36867,1770],{"class":264},[220,36869,36870],{"class":230},"'Bulge'",[220,36872,7541],{"class":264},[220,36874,8677],{"class":420},[220,36876,7546],{"class":264},[220,36878,36879,36881,36883],{"class":222,"line":650},[220,36880,7014],{"class":264},[220,36882,3206],{"class":230},[220,36884,2465],{"class":264},[220,36886,36887],{"class":222,"line":656},[220,36888,7031],{"class":264},[220,36890,36891],{"class":222,"line":673},[220,36892,1787],{"class":264},[220,36894,36895],{"class":222,"line":682},[220,36896,1792],{"class":264},[1504,36898,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36900},[36901,36902],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":36577,"description":36585},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":36909,"title":36910,"body":36911,"category":32806,"componentType":25883,"description":36918,"extension":191,"meta":37179,"navigation":194,"path":37180,"requiresChild":194,"seo":37181,"stem":37182,"__hash__":37183},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":36912,"toc":37175},[36913,36916,36919,36921,36923,36926,36928,37173],[11,36914,36910],{"id":36915},"crtscreen",[15,36917,36918],{},"Retro CRT monitor simulation with scanlines",[31911,36920],{"component":36910},[23,36922,31915],{"id":26533},[31917,36924],{":props":36925},"[{\"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,36927,31923],{"id":31922},[246,36929,36930,36975,37019,37063,37107],{":tabs":1557},[212,36931,36933],{"className":334,"code":36932,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,36934,36935,36943,36951,36959,36967],{"__ignoreMap":178},[220,36936,36937,36939,36941],{"class":222,"line":223},[220,36938,343],{"class":264},[220,36940,347],{"class":346},[220,36942,359],{"class":264},[220,36944,36945,36947,36949],{"class":222,"line":179},[220,36946,364],{"class":264},[220,36948,36910],{"class":346},[220,36950,359],{"class":264},[220,36952,36953,36955,36957],{"class":222,"line":389},[220,36954,2550],{"class":264},[220,36956,2553],{"class":346},[220,36958,386],{"class":264},[220,36960,36961,36963,36965],{"class":222,"line":399},[220,36962,2567],{"class":264},[220,36964,36910],{"class":346},[220,36966,359],{"class":264},[220,36968,36969,36971,36973],{"class":222,"line":644},[220,36970,402],{"class":264},[220,36972,347],{"class":346},[220,36974,359],{"class":264},[212,36976,36977],{"className":409,"code":36932,"language":411,"meta":178,"style":178},[99,36978,36979,36987,36995,37003,37011],{"__ignoreMap":178},[220,36980,36981,36983,36985],{"class":222,"line":223},[220,36982,343],{"class":264},[220,36984,347],{"class":420},[220,36986,359],{"class":264},[220,36988,36989,36991,36993],{"class":222,"line":179},[220,36990,364],{"class":264},[220,36992,36910],{"class":420},[220,36994,359],{"class":264},[220,36996,36997,36999,37001],{"class":222,"line":389},[220,36998,2550],{"class":264},[220,37000,2553],{"class":420},[220,37002,386],{"class":264},[220,37004,37005,37007,37009],{"class":222,"line":399},[220,37006,2567],{"class":264},[220,37008,36910],{"class":420},[220,37010,359],{"class":264},[220,37012,37013,37015,37017],{"class":222,"line":644},[220,37014,402],{"class":264},[220,37016,347],{"class":420},[220,37018,359],{"class":264},[212,37020,37021],{"className":2844,"code":36932,"language":2846,"meta":178,"style":178},[99,37022,37023,37031,37039,37047,37055],{"__ignoreMap":178},[220,37024,37025,37027,37029],{"class":222,"line":223},[220,37026,343],{"class":264},[220,37028,347],{"class":420},[220,37030,359],{"class":264},[220,37032,37033,37035,37037],{"class":222,"line":179},[220,37034,364],{"class":264},[220,37036,36910],{"class":420},[220,37038,359],{"class":264},[220,37040,37041,37043,37045],{"class":222,"line":389},[220,37042,2550],{"class":264},[220,37044,2553],{"class":420},[220,37046,386],{"class":264},[220,37048,37049,37051,37053],{"class":222,"line":399},[220,37050,2567],{"class":264},[220,37052,36910],{"class":420},[220,37054,359],{"class":264},[220,37056,37057,37059,37061],{"class":222,"line":644},[220,37058,402],{"class":264},[220,37060,347],{"class":420},[220,37062,359],{"class":264},[212,37064,37065],{"className":468,"code":36932,"language":469,"meta":178,"style":178},[99,37066,37067,37075,37083,37091,37099],{"__ignoreMap":178},[220,37068,37069,37071,37073],{"class":222,"line":223},[220,37070,343],{"class":264},[220,37072,347],{"class":420},[220,37074,359],{"class":264},[220,37076,37077,37079,37081],{"class":222,"line":179},[220,37078,364],{"class":264},[220,37080,36910],{"class":420},[220,37082,359],{"class":264},[220,37084,37085,37087,37089],{"class":222,"line":389},[220,37086,2550],{"class":264},[220,37088,2553],{"class":420},[220,37090,386],{"class":264},[220,37092,37093,37095,37097],{"class":222,"line":399},[220,37094,2567],{"class":264},[220,37096,36910],{"class":420},[220,37098,359],{"class":264},[220,37100,37101,37103,37105],{"class":222,"line":644},[220,37102,402],{"class":264},[220,37104,347],{"class":420},[220,37106,359],{"class":264},[212,37108,37110],{"className":251,"code":37109,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CRTScreen', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37111,37112,37122,37126,37140,37144,37153,37161,37165,37169],{"__ignoreMap":178},[220,37113,37114,37116,37118,37120],{"class":222,"line":223},[220,37115,261],{"class":260},[220,37117,11512],{"class":264},[220,37119,268],{"class":260},[220,37121,4007],{"class":230},[220,37123,37124],{"class":222,"line":179},[220,37125,647],{"emptyLinePlaceholder":194},[220,37127,37128,37130,37132,37134,37136,37138],{"class":222,"line":389},[220,37129,1735],{"class":260},[220,37131,1738],{"class":420},[220,37133,1741],{"class":260},[220,37135,1744],{"class":260},[220,37137,1747],{"class":226},[220,37139,1750],{"class":264},[220,37141,37142],{"class":222,"line":399},[220,37143,1765],{"class":264},[220,37145,37146,37148,37151],{"class":222,"line":644},[220,37147,1770],{"class":264},[220,37149,37150],{"class":230},"'CRTScreen'",[220,37152,7009],{"class":264},[220,37154,37155,37157,37159],{"class":222,"line":650},[220,37156,7014],{"class":264},[220,37158,3206],{"class":230},[220,37160,2465],{"class":264},[220,37162,37163],{"class":222,"line":656},[220,37164,7031],{"class":264},[220,37166,37167],{"class":222,"line":673},[220,37168,1787],{"class":264},[220,37170,37171],{"class":222,"line":682},[220,37172,1792],{"class":264},[1504,37174,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37176},[37177,37178],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":36910,"description":36918},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":37185,"title":37186,"body":37187,"category":36569,"componentType":25877,"description":37194,"extension":191,"meta":37379,"navigation":194,"path":37380,"requiresChild":32530,"seo":37381,"stem":37382,"__hash__":37383},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":37188,"toc":37375},[37189,37192,37195,37197,37199,37202,37204,37373],[11,37190,37186],{"id":37191},"carbonfiber",[15,37193,37194],{},"Photorealistic woven carbon fibre — interlaced tows whose anisotropic sheen flips ninety degrees cell to cell, raised into a quilted weave and finished with a glossy clearcoat that mirrors the studio. Plain or twill, in any shape.",[31911,37196],{"component":37186},[23,37198,31915],{"id":26533},[31917,37200],{":props":37201},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the carbon shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the carbon shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the carbon shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#b9bdc6\",\"description\":\"The bright tone of the fibre sheen — recolor for forged\u002Fcoloured carbon (red, blue, bronze)\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#0b0c0e\",\"description\":\"The deep resin tone the weave falls to in shadow — near-black for classic carbon\"},{\"name\":\"weaveStyle\",\"type\":\"\\\"twill\\\" | \\\"plain\\\"\",\"default\":\"twill\",\"description\":\"Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave)\"},{\"name\":\"weaveScale\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Number of woven tows across the shape — higher = finer, denser weave\"},{\"name\":\"weaveAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole weave grid in degrees\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between\"},{\"name\":\"fiberSheen\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the anisotropic fibre sheen — the directional satin glint running along each tow\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin\"},{\"name\":\"clearcoat\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the reflected studio lighting seen in the clearcoat\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the fibre sheen, in degrees\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,37203,31923],{"id":31922},[246,37205,37206,37235,37263,37291,37319],{":tabs":1557},[212,37207,37209],{"className":334,"code":37208,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,37210,37211,37219,37227],{"__ignoreMap":178},[220,37212,37213,37215,37217],{"class":222,"line":223},[220,37214,343],{"class":264},[220,37216,347],{"class":346},[220,37218,359],{"class":264},[220,37220,37221,37223,37225],{"class":222,"line":179},[220,37222,364],{"class":264},[220,37224,37186],{"class":346},[220,37226,386],{"class":264},[220,37228,37229,37231,37233],{"class":222,"line":389},[220,37230,402],{"class":264},[220,37232,347],{"class":346},[220,37234,359],{"class":264},[212,37236,37237],{"className":409,"code":37208,"language":411,"meta":178,"style":178},[99,37238,37239,37247,37255],{"__ignoreMap":178},[220,37240,37241,37243,37245],{"class":222,"line":223},[220,37242,343],{"class":264},[220,37244,347],{"class":420},[220,37246,359],{"class":264},[220,37248,37249,37251,37253],{"class":222,"line":179},[220,37250,364],{"class":264},[220,37252,37186],{"class":420},[220,37254,386],{"class":264},[220,37256,37257,37259,37261],{"class":222,"line":389},[220,37258,402],{"class":264},[220,37260,347],{"class":420},[220,37262,359],{"class":264},[212,37264,37265],{"className":2844,"code":37208,"language":2846,"meta":178,"style":178},[99,37266,37267,37275,37283],{"__ignoreMap":178},[220,37268,37269,37271,37273],{"class":222,"line":223},[220,37270,343],{"class":264},[220,37272,347],{"class":420},[220,37274,359],{"class":264},[220,37276,37277,37279,37281],{"class":222,"line":179},[220,37278,364],{"class":264},[220,37280,37186],{"class":420},[220,37282,386],{"class":264},[220,37284,37285,37287,37289],{"class":222,"line":389},[220,37286,402],{"class":264},[220,37288,347],{"class":420},[220,37290,359],{"class":264},[212,37292,37293],{"className":468,"code":37208,"language":469,"meta":178,"style":178},[99,37294,37295,37303,37311],{"__ignoreMap":178},[220,37296,37297,37299,37301],{"class":222,"line":223},[220,37298,343],{"class":264},[220,37300,347],{"class":420},[220,37302,359],{"class":264},[220,37304,37305,37307,37309],{"class":222,"line":179},[220,37306,364],{"class":264},[220,37308,37186],{"class":420},[220,37310,386],{"class":264},[220,37312,37313,37315,37317],{"class":222,"line":389},[220,37314,402],{"class":264},[220,37316,347],{"class":420},[220,37318,359],{"class":264},[212,37320,37322],{"className":251,"code":37321,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CarbonFiber', props: {} }\n ]\n})\n",[99,37323,37324,37334,37338,37352,37356,37365,37369],{"__ignoreMap":178},[220,37325,37326,37328,37330,37332],{"class":222,"line":223},[220,37327,261],{"class":260},[220,37329,11512],{"class":264},[220,37331,268],{"class":260},[220,37333,4007],{"class":230},[220,37335,37336],{"class":222,"line":179},[220,37337,647],{"emptyLinePlaceholder":194},[220,37339,37340,37342,37344,37346,37348,37350],{"class":222,"line":389},[220,37341,1735],{"class":260},[220,37343,1738],{"class":420},[220,37345,1741],{"class":260},[220,37347,1744],{"class":260},[220,37349,1747],{"class":226},[220,37351,1750],{"class":264},[220,37353,37354],{"class":222,"line":399},[220,37355,1765],{"class":264},[220,37357,37358,37360,37363],{"class":222,"line":644},[220,37359,1770],{"class":264},[220,37361,37362],{"class":230},"'CarbonFiber'",[220,37364,2465],{"class":264},[220,37366,37367],{"class":222,"line":650},[220,37368,1787],{"class":264},[220,37370,37371],{"class":222,"line":656},[220,37372,1792],{"class":264},[1504,37374,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37376},[37377,37378],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":37186,"description":37194},"docs\u002Fcomponents\u002FCarbonFiber","Vug8R9Ib1Nal1wvFebaB3aW1EfJ6nVWs50q_JfYhFoA",{"id":37385,"title":37386,"body":37387,"category":32806,"componentType":25883,"description":37394,"extension":191,"meta":37655,"navigation":194,"path":37656,"requiresChild":194,"seo":37657,"stem":37658,"__hash__":37659},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":37388,"toc":37651},[37389,37392,37395,37397,37399,37402,37404,37649],[11,37390,37386],{"id":37391},"chalkboard",[15,37393,37394],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[31911,37396],{"component":37386},[23,37398,31915],{"id":26533},[31917,37400],{":props":37401},"[{\"name\":\"boardColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background board color\"},{\"name\":\"chalkColor\",\"type\":\"string\",\"default\":\"#eceadb\",\"description\":\"Chalk stroke color\"},{\"name\":\"edgeSensitivity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How readily edges are detected and drawn as chalk strokes\"},{\"name\":\"edgeThickness\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Thickness of the chalk outline strokes\"},{\"name\":\"shading\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Amount of cross-hatch shading filling darker regions\"},{\"name\":\"hatchScale\",\"type\":\"number\",\"default\":\"16\",\"description\":\"Spacing of the cross-hatch lines in pixels\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.45\",\"description\":\"Chalk dustiness \u002F grain that breaks up the strokes\"}]",[23,37403,31923],{"id":31922},[246,37405,37406,37451,37495,37539,37583],{":tabs":1557},[212,37407,37409],{"className":334,"code":37408,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,37410,37411,37419,37427,37435,37443],{"__ignoreMap":178},[220,37412,37413,37415,37417],{"class":222,"line":223},[220,37414,343],{"class":264},[220,37416,347],{"class":346},[220,37418,359],{"class":264},[220,37420,37421,37423,37425],{"class":222,"line":179},[220,37422,364],{"class":264},[220,37424,37386],{"class":346},[220,37426,359],{"class":264},[220,37428,37429,37431,37433],{"class":222,"line":389},[220,37430,2550],{"class":264},[220,37432,2553],{"class":346},[220,37434,386],{"class":264},[220,37436,37437,37439,37441],{"class":222,"line":399},[220,37438,2567],{"class":264},[220,37440,37386],{"class":346},[220,37442,359],{"class":264},[220,37444,37445,37447,37449],{"class":222,"line":644},[220,37446,402],{"class":264},[220,37448,347],{"class":346},[220,37450,359],{"class":264},[212,37452,37453],{"className":409,"code":37408,"language":411,"meta":178,"style":178},[99,37454,37455,37463,37471,37479,37487],{"__ignoreMap":178},[220,37456,37457,37459,37461],{"class":222,"line":223},[220,37458,343],{"class":264},[220,37460,347],{"class":420},[220,37462,359],{"class":264},[220,37464,37465,37467,37469],{"class":222,"line":179},[220,37466,364],{"class":264},[220,37468,37386],{"class":420},[220,37470,359],{"class":264},[220,37472,37473,37475,37477],{"class":222,"line":389},[220,37474,2550],{"class":264},[220,37476,2553],{"class":420},[220,37478,386],{"class":264},[220,37480,37481,37483,37485],{"class":222,"line":399},[220,37482,2567],{"class":264},[220,37484,37386],{"class":420},[220,37486,359],{"class":264},[220,37488,37489,37491,37493],{"class":222,"line":644},[220,37490,402],{"class":264},[220,37492,347],{"class":420},[220,37494,359],{"class":264},[212,37496,37497],{"className":2844,"code":37408,"language":2846,"meta":178,"style":178},[99,37498,37499,37507,37515,37523,37531],{"__ignoreMap":178},[220,37500,37501,37503,37505],{"class":222,"line":223},[220,37502,343],{"class":264},[220,37504,347],{"class":420},[220,37506,359],{"class":264},[220,37508,37509,37511,37513],{"class":222,"line":179},[220,37510,364],{"class":264},[220,37512,37386],{"class":420},[220,37514,359],{"class":264},[220,37516,37517,37519,37521],{"class":222,"line":389},[220,37518,2550],{"class":264},[220,37520,2553],{"class":420},[220,37522,386],{"class":264},[220,37524,37525,37527,37529],{"class":222,"line":399},[220,37526,2567],{"class":264},[220,37528,37386],{"class":420},[220,37530,359],{"class":264},[220,37532,37533,37535,37537],{"class":222,"line":644},[220,37534,402],{"class":264},[220,37536,347],{"class":420},[220,37538,359],{"class":264},[212,37540,37541],{"className":468,"code":37408,"language":469,"meta":178,"style":178},[99,37542,37543,37551,37559,37567,37575],{"__ignoreMap":178},[220,37544,37545,37547,37549],{"class":222,"line":223},[220,37546,343],{"class":264},[220,37548,347],{"class":420},[220,37550,359],{"class":264},[220,37552,37553,37555,37557],{"class":222,"line":179},[220,37554,364],{"class":264},[220,37556,37386],{"class":420},[220,37558,359],{"class":264},[220,37560,37561,37563,37565],{"class":222,"line":389},[220,37562,2550],{"class":264},[220,37564,2553],{"class":420},[220,37566,386],{"class":264},[220,37568,37569,37571,37573],{"class":222,"line":399},[220,37570,2567],{"class":264},[220,37572,37386],{"class":420},[220,37574,359],{"class":264},[220,37576,37577,37579,37581],{"class":222,"line":644},[220,37578,402],{"class":264},[220,37580,347],{"class":420},[220,37582,359],{"class":264},[212,37584,37586],{"className":251,"code":37585,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chalkboard', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37587,37588,37598,37602,37616,37620,37629,37637,37641,37645],{"__ignoreMap":178},[220,37589,37590,37592,37594,37596],{"class":222,"line":223},[220,37591,261],{"class":260},[220,37593,11512],{"class":264},[220,37595,268],{"class":260},[220,37597,4007],{"class":230},[220,37599,37600],{"class":222,"line":179},[220,37601,647],{"emptyLinePlaceholder":194},[220,37603,37604,37606,37608,37610,37612,37614],{"class":222,"line":389},[220,37605,1735],{"class":260},[220,37607,1738],{"class":420},[220,37609,1741],{"class":260},[220,37611,1744],{"class":260},[220,37613,1747],{"class":226},[220,37615,1750],{"class":264},[220,37617,37618],{"class":222,"line":399},[220,37619,1765],{"class":264},[220,37621,37622,37624,37627],{"class":222,"line":644},[220,37623,1770],{"class":264},[220,37625,37626],{"class":230},"'Chalkboard'",[220,37628,7009],{"class":264},[220,37630,37631,37633,37635],{"class":222,"line":650},[220,37632,7014],{"class":264},[220,37634,3206],{"class":230},[220,37636,2465],{"class":264},[220,37638,37639],{"class":222,"line":656},[220,37640,7031],{"class":264},[220,37642,37643],{"class":222,"line":673},[220,37644,1787],{"class":264},[220,37646,37647],{"class":222,"line":682},[220,37648,1792],{"class":264},[1504,37650,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37652},[37653,37654],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":37386,"description":37394},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":37661,"title":37662,"body":37663,"category":32234,"componentType":25883,"description":37670,"extension":191,"meta":37931,"navigation":194,"path":37932,"requiresChild":194,"seo":37933,"stem":37934,"__hash__":37935},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":37664,"toc":37927},[37665,37668,37671,37673,37675,37678,37680,37925],[11,37666,37662],{"id":37667},"channelblur",[15,37669,37670],{},"Independent blur for red, green, and blue channels",[31911,37672],{"component":37662},[23,37674,31915],{"id":26533},[31917,37676],{":props":37677},"[{\"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,37679,31923],{"id":31922},[246,37681,37682,37727,37771,37815,37859],{":tabs":1557},[212,37683,37685],{"className":334,"code":37684,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,37686,37687,37695,37703,37711,37719],{"__ignoreMap":178},[220,37688,37689,37691,37693],{"class":222,"line":223},[220,37690,343],{"class":264},[220,37692,347],{"class":346},[220,37694,359],{"class":264},[220,37696,37697,37699,37701],{"class":222,"line":179},[220,37698,364],{"class":264},[220,37700,37662],{"class":346},[220,37702,359],{"class":264},[220,37704,37705,37707,37709],{"class":222,"line":389},[220,37706,2550],{"class":264},[220,37708,2553],{"class":346},[220,37710,386],{"class":264},[220,37712,37713,37715,37717],{"class":222,"line":399},[220,37714,2567],{"class":264},[220,37716,37662],{"class":346},[220,37718,359],{"class":264},[220,37720,37721,37723,37725],{"class":222,"line":644},[220,37722,402],{"class":264},[220,37724,347],{"class":346},[220,37726,359],{"class":264},[212,37728,37729],{"className":409,"code":37684,"language":411,"meta":178,"style":178},[99,37730,37731,37739,37747,37755,37763],{"__ignoreMap":178},[220,37732,37733,37735,37737],{"class":222,"line":223},[220,37734,343],{"class":264},[220,37736,347],{"class":420},[220,37738,359],{"class":264},[220,37740,37741,37743,37745],{"class":222,"line":179},[220,37742,364],{"class":264},[220,37744,37662],{"class":420},[220,37746,359],{"class":264},[220,37748,37749,37751,37753],{"class":222,"line":389},[220,37750,2550],{"class":264},[220,37752,2553],{"class":420},[220,37754,386],{"class":264},[220,37756,37757,37759,37761],{"class":222,"line":399},[220,37758,2567],{"class":264},[220,37760,37662],{"class":420},[220,37762,359],{"class":264},[220,37764,37765,37767,37769],{"class":222,"line":644},[220,37766,402],{"class":264},[220,37768,347],{"class":420},[220,37770,359],{"class":264},[212,37772,37773],{"className":2844,"code":37684,"language":2846,"meta":178,"style":178},[99,37774,37775,37783,37791,37799,37807],{"__ignoreMap":178},[220,37776,37777,37779,37781],{"class":222,"line":223},[220,37778,343],{"class":264},[220,37780,347],{"class":420},[220,37782,359],{"class":264},[220,37784,37785,37787,37789],{"class":222,"line":179},[220,37786,364],{"class":264},[220,37788,37662],{"class":420},[220,37790,359],{"class":264},[220,37792,37793,37795,37797],{"class":222,"line":389},[220,37794,2550],{"class":264},[220,37796,2553],{"class":420},[220,37798,386],{"class":264},[220,37800,37801,37803,37805],{"class":222,"line":399},[220,37802,2567],{"class":264},[220,37804,37662],{"class":420},[220,37806,359],{"class":264},[220,37808,37809,37811,37813],{"class":222,"line":644},[220,37810,402],{"class":264},[220,37812,347],{"class":420},[220,37814,359],{"class":264},[212,37816,37817],{"className":468,"code":37684,"language":469,"meta":178,"style":178},[99,37818,37819,37827,37835,37843,37851],{"__ignoreMap":178},[220,37820,37821,37823,37825],{"class":222,"line":223},[220,37822,343],{"class":264},[220,37824,347],{"class":420},[220,37826,359],{"class":264},[220,37828,37829,37831,37833],{"class":222,"line":179},[220,37830,364],{"class":264},[220,37832,37662],{"class":420},[220,37834,359],{"class":264},[220,37836,37837,37839,37841],{"class":222,"line":389},[220,37838,2550],{"class":264},[220,37840,2553],{"class":420},[220,37842,386],{"class":264},[220,37844,37845,37847,37849],{"class":222,"line":399},[220,37846,2567],{"class":264},[220,37848,37662],{"class":420},[220,37850,359],{"class":264},[220,37852,37853,37855,37857],{"class":222,"line":644},[220,37854,402],{"class":264},[220,37856,347],{"class":420},[220,37858,359],{"class":264},[212,37860,37862],{"className":251,"code":37861,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChannelBlur', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37863,37864,37874,37878,37892,37896,37905,37913,37917,37921],{"__ignoreMap":178},[220,37865,37866,37868,37870,37872],{"class":222,"line":223},[220,37867,261],{"class":260},[220,37869,11512],{"class":264},[220,37871,268],{"class":260},[220,37873,4007],{"class":230},[220,37875,37876],{"class":222,"line":179},[220,37877,647],{"emptyLinePlaceholder":194},[220,37879,37880,37882,37884,37886,37888,37890],{"class":222,"line":389},[220,37881,1735],{"class":260},[220,37883,1738],{"class":420},[220,37885,1741],{"class":260},[220,37887,1744],{"class":260},[220,37889,1747],{"class":226},[220,37891,1750],{"class":264},[220,37893,37894],{"class":222,"line":399},[220,37895,1765],{"class":264},[220,37897,37898,37900,37903],{"class":222,"line":644},[220,37899,1770],{"class":264},[220,37901,37902],{"class":230},"'ChannelBlur'",[220,37904,7009],{"class":264},[220,37906,37907,37909,37911],{"class":222,"line":650},[220,37908,7014],{"class":264},[220,37910,3206],{"class":230},[220,37912,2465],{"class":264},[220,37914,37915],{"class":222,"line":656},[220,37916,7031],{"class":264},[220,37918,37919],{"class":222,"line":673},[220,37920,1787],{"class":264},[220,37922,37923],{"class":222,"line":682},[220,37924,1792],{"class":264},[1504,37926,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":37928},[37929,37930],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":37662,"description":37670},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":37937,"title":37938,"body":37939,"category":33673,"componentType":25883,"description":37946,"extension":191,"meta":38207,"navigation":194,"path":38208,"requiresChild":194,"seo":38209,"stem":38210,"__hash__":38211},"components\u002Fdocs\u002Fcomponents\u002FCheckerWipe.md","CheckerWipe",{"type":8,"value":37940,"toc":38203},[37941,37944,37947,37949,37951,37954,37956,38201],[11,37942,37938],{"id":37943},"checkerwipe",[15,37945,37946],{},"Wipe the content away as a checkerboard of fading squares",[31911,37948],{"component":37938},[23,37950,31915],{"id":26533},[31917,37952],{":props":37953},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Size of each square as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each square fades out (0 = hard-edged squares)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the squares wipe in\"}]",[23,37955,31923],{"id":31922},[246,37957,37958,38003,38047,38091,38135],{":tabs":1557},[212,37959,37961],{"className":334,"code":37960,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerWipe>\n \u003CCircle \u002F>\n \u003C\u002FCheckerWipe>\n\u003C\u002FShader>\n",[99,37962,37963,37971,37979,37987,37995],{"__ignoreMap":178},[220,37964,37965,37967,37969],{"class":222,"line":223},[220,37966,343],{"class":264},[220,37968,347],{"class":346},[220,37970,359],{"class":264},[220,37972,37973,37975,37977],{"class":222,"line":179},[220,37974,364],{"class":264},[220,37976,37938],{"class":346},[220,37978,359],{"class":264},[220,37980,37981,37983,37985],{"class":222,"line":389},[220,37982,2550],{"class":264},[220,37984,2553],{"class":346},[220,37986,386],{"class":264},[220,37988,37989,37991,37993],{"class":222,"line":399},[220,37990,2567],{"class":264},[220,37992,37938],{"class":346},[220,37994,359],{"class":264},[220,37996,37997,37999,38001],{"class":222,"line":644},[220,37998,402],{"class":264},[220,38000,347],{"class":346},[220,38002,359],{"class":264},[212,38004,38005],{"className":409,"code":37960,"language":411,"meta":178,"style":178},[99,38006,38007,38015,38023,38031,38039],{"__ignoreMap":178},[220,38008,38009,38011,38013],{"class":222,"line":223},[220,38010,343],{"class":264},[220,38012,347],{"class":420},[220,38014,359],{"class":264},[220,38016,38017,38019,38021],{"class":222,"line":179},[220,38018,364],{"class":264},[220,38020,37938],{"class":420},[220,38022,359],{"class":264},[220,38024,38025,38027,38029],{"class":222,"line":389},[220,38026,2550],{"class":264},[220,38028,2553],{"class":420},[220,38030,386],{"class":264},[220,38032,38033,38035,38037],{"class":222,"line":399},[220,38034,2567],{"class":264},[220,38036,37938],{"class":420},[220,38038,359],{"class":264},[220,38040,38041,38043,38045],{"class":222,"line":644},[220,38042,402],{"class":264},[220,38044,347],{"class":420},[220,38046,359],{"class":264},[212,38048,38049],{"className":2844,"code":37960,"language":2846,"meta":178,"style":178},[99,38050,38051,38059,38067,38075,38083],{"__ignoreMap":178},[220,38052,38053,38055,38057],{"class":222,"line":223},[220,38054,343],{"class":264},[220,38056,347],{"class":420},[220,38058,359],{"class":264},[220,38060,38061,38063,38065],{"class":222,"line":179},[220,38062,364],{"class":264},[220,38064,37938],{"class":420},[220,38066,359],{"class":264},[220,38068,38069,38071,38073],{"class":222,"line":389},[220,38070,2550],{"class":264},[220,38072,2553],{"class":420},[220,38074,386],{"class":264},[220,38076,38077,38079,38081],{"class":222,"line":399},[220,38078,2567],{"class":264},[220,38080,37938],{"class":420},[220,38082,359],{"class":264},[220,38084,38085,38087,38089],{"class":222,"line":644},[220,38086,402],{"class":264},[220,38088,347],{"class":420},[220,38090,359],{"class":264},[212,38092,38093],{"className":468,"code":37960,"language":469,"meta":178,"style":178},[99,38094,38095,38103,38111,38119,38127],{"__ignoreMap":178},[220,38096,38097,38099,38101],{"class":222,"line":223},[220,38098,343],{"class":264},[220,38100,347],{"class":420},[220,38102,359],{"class":264},[220,38104,38105,38107,38109],{"class":222,"line":179},[220,38106,364],{"class":264},[220,38108,37938],{"class":420},[220,38110,359],{"class":264},[220,38112,38113,38115,38117],{"class":222,"line":389},[220,38114,2550],{"class":264},[220,38116,2553],{"class":420},[220,38118,386],{"class":264},[220,38120,38121,38123,38125],{"class":222,"line":399},[220,38122,2567],{"class":264},[220,38124,37938],{"class":420},[220,38126,359],{"class":264},[220,38128,38129,38131,38133],{"class":222,"line":644},[220,38130,402],{"class":264},[220,38132,347],{"class":420},[220,38134,359],{"class":264},[212,38136,38138],{"className":251,"code":38137,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CheckerWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,38139,38140,38150,38154,38168,38172,38181,38189,38193,38197],{"__ignoreMap":178},[220,38141,38142,38144,38146,38148],{"class":222,"line":223},[220,38143,261],{"class":260},[220,38145,11512],{"class":264},[220,38147,268],{"class":260},[220,38149,4007],{"class":230},[220,38151,38152],{"class":222,"line":179},[220,38153,647],{"emptyLinePlaceholder":194},[220,38155,38156,38158,38160,38162,38164,38166],{"class":222,"line":389},[220,38157,1735],{"class":260},[220,38159,1738],{"class":420},[220,38161,1741],{"class":260},[220,38163,1744],{"class":260},[220,38165,1747],{"class":226},[220,38167,1750],{"class":264},[220,38169,38170],{"class":222,"line":399},[220,38171,1765],{"class":264},[220,38173,38174,38176,38179],{"class":222,"line":644},[220,38175,1770],{"class":264},[220,38177,38178],{"class":230},"'CheckerWipe'",[220,38180,7009],{"class":264},[220,38182,38183,38185,38187],{"class":222,"line":650},[220,38184,7014],{"class":264},[220,38186,3206],{"class":230},[220,38188,2465],{"class":264},[220,38190,38191],{"class":222,"line":656},[220,38192,7031],{"class":264},[220,38194,38195],{"class":222,"line":673},[220,38196,1787],{"class":264},[220,38198,38199],{"class":222,"line":682},[220,38200,1792],{"class":264},[1504,38202,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38204},[38205,38206],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerwipe",{"title":37938,"description":37946},"docs\u002Fcomponents\u002FCheckerWipe","NqeYXHsapZtoyRSSIzfTaKg5Au8v5cKkjvG-ZTxFNu8",{"id":38213,"title":38214,"body":38215,"category":33063,"componentType":25877,"description":38222,"extension":191,"meta":38406,"navigation":194,"path":38407,"requiresChild":32530,"seo":38408,"stem":38409,"__hash__":38410},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":38216,"toc":38402},[38217,38220,38223,38225,38227,38230,38232,38400],[11,38218,38214],{"id":38219},"checkerboard",[15,38221,38222],{},"Classic checkerboard pattern with two alternating colors",[31911,38224],{"component":38214},[23,38226,31915],{"id":26533},[31917,38228],{":props":38229},"[{\"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 canvas height (creates square cells). Switch the unit to px in the editor to set an absolute cell size instead.\"},{\"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,38231,31923],{"id":31922},[246,38233,38234,38263,38291,38319,38347],{":tabs":1557},[212,38235,38237],{"className":334,"code":38236,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,38238,38239,38247,38255],{"__ignoreMap":178},[220,38240,38241,38243,38245],{"class":222,"line":223},[220,38242,343],{"class":264},[220,38244,347],{"class":346},[220,38246,359],{"class":264},[220,38248,38249,38251,38253],{"class":222,"line":179},[220,38250,364],{"class":264},[220,38252,38214],{"class":346},[220,38254,386],{"class":264},[220,38256,38257,38259,38261],{"class":222,"line":389},[220,38258,402],{"class":264},[220,38260,347],{"class":346},[220,38262,359],{"class":264},[212,38264,38265],{"className":409,"code":38236,"language":411,"meta":178,"style":178},[99,38266,38267,38275,38283],{"__ignoreMap":178},[220,38268,38269,38271,38273],{"class":222,"line":223},[220,38270,343],{"class":264},[220,38272,347],{"class":420},[220,38274,359],{"class":264},[220,38276,38277,38279,38281],{"class":222,"line":179},[220,38278,364],{"class":264},[220,38280,38214],{"class":420},[220,38282,386],{"class":264},[220,38284,38285,38287,38289],{"class":222,"line":389},[220,38286,402],{"class":264},[220,38288,347],{"class":420},[220,38290,359],{"class":264},[212,38292,38293],{"className":2844,"code":38236,"language":2846,"meta":178,"style":178},[99,38294,38295,38303,38311],{"__ignoreMap":178},[220,38296,38297,38299,38301],{"class":222,"line":223},[220,38298,343],{"class":264},[220,38300,347],{"class":420},[220,38302,359],{"class":264},[220,38304,38305,38307,38309],{"class":222,"line":179},[220,38306,364],{"class":264},[220,38308,38214],{"class":420},[220,38310,386],{"class":264},[220,38312,38313,38315,38317],{"class":222,"line":389},[220,38314,402],{"class":264},[220,38316,347],{"class":420},[220,38318,359],{"class":264},[212,38320,38321],{"className":468,"code":38236,"language":469,"meta":178,"style":178},[99,38322,38323,38331,38339],{"__ignoreMap":178},[220,38324,38325,38327,38329],{"class":222,"line":223},[220,38326,343],{"class":264},[220,38328,347],{"class":420},[220,38330,359],{"class":264},[220,38332,38333,38335,38337],{"class":222,"line":179},[220,38334,364],{"class":264},[220,38336,38214],{"class":420},[220,38338,386],{"class":264},[220,38340,38341,38343,38345],{"class":222,"line":389},[220,38342,402],{"class":264},[220,38344,347],{"class":420},[220,38346,359],{"class":264},[212,38348,38350],{"className":251,"code":38349,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Checkerboard', props: {} }\n ]\n})\n",[99,38351,38352,38362,38366,38380,38384,38392,38396],{"__ignoreMap":178},[220,38353,38354,38356,38358,38360],{"class":222,"line":223},[220,38355,261],{"class":260},[220,38357,11512],{"class":264},[220,38359,268],{"class":260},[220,38361,4007],{"class":230},[220,38363,38364],{"class":222,"line":179},[220,38365,647],{"emptyLinePlaceholder":194},[220,38367,38368,38370,38372,38374,38376,38378],{"class":222,"line":389},[220,38369,1735],{"class":260},[220,38371,1738],{"class":420},[220,38373,1741],{"class":260},[220,38375,1744],{"class":260},[220,38377,1747],{"class":226},[220,38379,1750],{"class":264},[220,38381,38382],{"class":222,"line":399},[220,38383,1765],{"class":264},[220,38385,38386,38388,38390],{"class":222,"line":644},[220,38387,1770],{"class":264},[220,38389,10158],{"class":230},[220,38391,2465],{"class":264},[220,38393,38394],{"class":222,"line":650},[220,38395,1787],{"class":264},[220,38397,38398],{"class":222,"line":656},[220,38399,1792],{"class":264},[1504,38401,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38403},[38404,38405],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":38214,"description":38222},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":38412,"title":38413,"body":38414,"category":33063,"componentType":25877,"description":38421,"extension":191,"meta":38606,"navigation":194,"path":38607,"requiresChild":32530,"seo":38608,"stem":38609,"__hash__":38610},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":38415,"toc":38602},[38416,38419,38422,38424,38426,38429,38431,38600],[11,38417,38413],{"id":38418},"chevron",[15,38420,38421],{},"Animated chevron \u002F zigzag stripe pattern",[31911,38423],{"component":38413},[23,38425,31915],{"id":26533},[31917,38427],{":props":38428},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second color\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of chevron pairs visible\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle of the chevrons\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Ratio of the two colors\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Phase offset for pattern positioning\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,38430,31923],{"id":31922},[246,38432,38433,38462,38490,38518,38546],{":tabs":1557},[212,38434,38436],{"className":334,"code":38435,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,38437,38438,38446,38454],{"__ignoreMap":178},[220,38439,38440,38442,38444],{"class":222,"line":223},[220,38441,343],{"class":264},[220,38443,347],{"class":346},[220,38445,359],{"class":264},[220,38447,38448,38450,38452],{"class":222,"line":179},[220,38449,364],{"class":264},[220,38451,38413],{"class":346},[220,38453,386],{"class":264},[220,38455,38456,38458,38460],{"class":222,"line":389},[220,38457,402],{"class":264},[220,38459,347],{"class":346},[220,38461,359],{"class":264},[212,38463,38464],{"className":409,"code":38435,"language":411,"meta":178,"style":178},[99,38465,38466,38474,38482],{"__ignoreMap":178},[220,38467,38468,38470,38472],{"class":222,"line":223},[220,38469,343],{"class":264},[220,38471,347],{"class":420},[220,38473,359],{"class":264},[220,38475,38476,38478,38480],{"class":222,"line":179},[220,38477,364],{"class":264},[220,38479,38413],{"class":420},[220,38481,386],{"class":264},[220,38483,38484,38486,38488],{"class":222,"line":389},[220,38485,402],{"class":264},[220,38487,347],{"class":420},[220,38489,359],{"class":264},[212,38491,38492],{"className":2844,"code":38435,"language":2846,"meta":178,"style":178},[99,38493,38494,38502,38510],{"__ignoreMap":178},[220,38495,38496,38498,38500],{"class":222,"line":223},[220,38497,343],{"class":264},[220,38499,347],{"class":420},[220,38501,359],{"class":264},[220,38503,38504,38506,38508],{"class":222,"line":179},[220,38505,364],{"class":264},[220,38507,38413],{"class":420},[220,38509,386],{"class":264},[220,38511,38512,38514,38516],{"class":222,"line":389},[220,38513,402],{"class":264},[220,38515,347],{"class":420},[220,38517,359],{"class":264},[212,38519,38520],{"className":468,"code":38435,"language":469,"meta":178,"style":178},[99,38521,38522,38530,38538],{"__ignoreMap":178},[220,38523,38524,38526,38528],{"class":222,"line":223},[220,38525,343],{"class":264},[220,38527,347],{"class":420},[220,38529,359],{"class":264},[220,38531,38532,38534,38536],{"class":222,"line":179},[220,38533,364],{"class":264},[220,38535,38413],{"class":420},[220,38537,386],{"class":264},[220,38539,38540,38542,38544],{"class":222,"line":389},[220,38541,402],{"class":264},[220,38543,347],{"class":420},[220,38545,359],{"class":264},[212,38547,38549],{"className":251,"code":38548,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chevron', props: {} }\n ]\n})\n",[99,38550,38551,38561,38565,38579,38583,38592,38596],{"__ignoreMap":178},[220,38552,38553,38555,38557,38559],{"class":222,"line":223},[220,38554,261],{"class":260},[220,38556,11512],{"class":264},[220,38558,268],{"class":260},[220,38560,4007],{"class":230},[220,38562,38563],{"class":222,"line":179},[220,38564,647],{"emptyLinePlaceholder":194},[220,38566,38567,38569,38571,38573,38575,38577],{"class":222,"line":389},[220,38568,1735],{"class":260},[220,38570,1738],{"class":420},[220,38572,1741],{"class":260},[220,38574,1744],{"class":260},[220,38576,1747],{"class":226},[220,38578,1750],{"class":264},[220,38580,38581],{"class":222,"line":399},[220,38582,1765],{"class":264},[220,38584,38585,38587,38590],{"class":222,"line":644},[220,38586,1770],{"class":264},[220,38588,38589],{"class":230},"'Chevron'",[220,38591,2465],{"class":264},[220,38593,38594],{"class":222,"line":650},[220,38595,1787],{"class":264},[220,38597,38598],{"class":222,"line":656},[220,38599,1792],{"class":264},[1504,38601,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":38603},[38604,38605],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":38413,"description":38421},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":38612,"title":38613,"body":38614,"category":35559,"componentType":25877,"description":38621,"extension":191,"meta":38910,"navigation":194,"path":38911,"requiresChild":32530,"seo":38912,"stem":38913,"__hash__":38914},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":38615,"toc":38906},[38616,38619,38622,38624,38626,38629,38631,38904],[11,38617,38613],{"id":38618},"chromaflow",[15,38620,38621],{},"Interactive liquid flow effect that follows your cursor",[31911,38623],{"component":38613},[23,38625,31915],{"id":26533},[31917,38627],{":props":38628},"[{\"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,38630,31923],{"id":31922},[246,38632,38633,38682,38738,38788,38842],{":tabs":1557},[212,38634,38636],{"className":334,"code":38635,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,38637,38638,38646,38653,38661,38670,38674],{"__ignoreMap":178},[220,38639,38640,38642,38644],{"class":222,"line":223},[220,38641,343],{"class":264},[220,38643,347],{"class":346},[220,38645,359],{"class":264},[220,38647,38648,38650],{"class":222,"line":179},[220,38649,364],{"class":264},[220,38651,38652],{"class":346},"ChromaFlow\n",[220,38654,38655,38657,38659],{"class":222,"line":389},[220,38656,20371],{"class":226},[220,38658,353],{"class":264},[220,38660,36625],{"class":230},[220,38662,38663,38665,38667],{"class":222,"line":399},[220,38664,17405],{"class":226},[220,38666,353],{"class":264},[220,38668,38669],{"class":230},"\"3\"\n",[220,38671,38672],{"class":222,"line":644},[220,38673,1234],{"class":264},[220,38675,38676,38678,38680],{"class":222,"line":650},[220,38677,402],{"class":264},[220,38679,347],{"class":346},[220,38681,359],{"class":264},[212,38683,38685],{"className":409,"code":38684,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,38686,38687,38695,38701,38713,38726,38730],{"__ignoreMap":178},[220,38688,38689,38691,38693],{"class":222,"line":223},[220,38690,343],{"class":264},[220,38692,347],{"class":420},[220,38694,359],{"class":264},[220,38696,38697,38699],{"class":222,"line":179},[220,38698,364],{"class":264},[220,38700,38652],{"class":420},[220,38702,38703,38705,38707,38709,38711],{"class":222,"line":389},[220,38704,20482],{"class":226},[220,38706,353],{"class":260},[220,38708,743],{"class":264},[220,38710,8677],{"class":420},[220,38712,749],{"class":264},[220,38714,38715,38717,38719,38721,38724],{"class":222,"line":399},[220,38716,9645],{"class":226},[220,38718,353],{"class":260},[220,38720,743],{"class":264},[220,38722,38723],{"class":420},"3",[220,38725,749],{"class":264},[220,38727,38728],{"class":222,"line":644},[220,38729,1234],{"class":264},[220,38731,38732,38734,38736],{"class":222,"line":650},[220,38733,402],{"class":264},[220,38735,347],{"class":420},[220,38737,359],{"class":264},[212,38739,38740],{"className":2844,"code":38684,"language":2846,"meta":178,"style":178},[99,38741,38742,38750,38756,38766,38776,38780],{"__ignoreMap":178},[220,38743,38744,38746,38748],{"class":222,"line":223},[220,38745,343],{"class":264},[220,38747,347],{"class":420},[220,38749,359],{"class":264},[220,38751,38752,38754],{"class":222,"line":179},[220,38753,364],{"class":264},[220,38755,38652],{"class":420},[220,38757,38758,38760,38762,38764],{"class":222,"line":389},[220,38759,20482],{"class":226},[220,38761,29871],{"class":264},[220,38763,8677],{"class":420},[220,38765,749],{"class":264},[220,38767,38768,38770,38772,38774],{"class":222,"line":399},[220,38769,9645],{"class":226},[220,38771,29871],{"class":264},[220,38773,38723],{"class":420},[220,38775,749],{"class":264},[220,38777,38778],{"class":222,"line":644},[220,38779,1234],{"class":264},[220,38781,38782,38784,38786],{"class":222,"line":650},[220,38783,402],{"class":264},[220,38785,347],{"class":420},[220,38787,359],{"class":264},[212,38789,38790],{"className":468,"code":38684,"language":469,"meta":178,"style":178},[99,38791,38792,38800,38806,38818,38830,38834],{"__ignoreMap":178},[220,38793,38794,38796,38798],{"class":222,"line":223},[220,38795,343],{"class":264},[220,38797,347],{"class":420},[220,38799,359],{"class":264},[220,38801,38802,38804],{"class":222,"line":179},[220,38803,364],{"class":264},[220,38805,38652],{"class":420},[220,38807,38808,38810,38812,38814,38816],{"class":222,"line":389},[220,38809,20482],{"class":226},[220,38811,353],{"class":260},[220,38813,743],{"class":264},[220,38815,8677],{"class":420},[220,38817,749],{"class":264},[220,38819,38820,38822,38824,38826,38828],{"class":222,"line":399},[220,38821,9645],{"class":226},[220,38823,353],{"class":260},[220,38825,743],{"class":264},[220,38827,38723],{"class":420},[220,38829,749],{"class":264},[220,38831,38832],{"class":222,"line":644},[220,38833,1234],{"class":264},[220,38835,38836,38838,38840],{"class":222,"line":650},[220,38837,402],{"class":264},[220,38839,347],{"class":420},[220,38841,359],{"class":264},[212,38843,38845],{"className":251,"code":38844,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }\n ]\n})\n",[99,38846,38847,38857,38861,38875,38879,38896,38900],{"__ignoreMap":178},[220,38848,38849,38851,38853,38855],{"class":222,"line":223},[220,38850,261],{"class":260},[220,38852,11512],{"class":264},[220,38854,268],{"class":260},[220,38856,4007],{"class":230},[220,38858,38859],{"class":222,"line":179},[220,38860,647],{"emptyLinePlaceholder":194},[220,38862,38863,38865,38867,38869,38871,38873],{"class":222,"line":389},[220,38864,1735],{"class":260},[220,38866,1738],{"class":420},[220,38868,1741],{"class":260},[220,38870,1744],{"class":260},[220,38872,1747],{"class":226},[220,38874,1750],{"class":264},[220,38876,38877],{"class":222,"line":399},[220,38878,1765],{"class":264},[220,38880,38881,38883,38886,38888,38890,38892,38894],{"class":222,"line":644},[220,38882,1770],{"class":264},[220,38884,38885],{"class":230},"'ChromaFlow'",[220,38887,32203],{"class":264},[220,38889,8677],{"class":420},[220,38891,6566],{"class":264},[220,38893,38723],{"class":420},[220,38895,1782],{"class":264},[220,38897,38898],{"class":222,"line":650},[220,38899,1787],{"class":264},[220,38901,38902],{"class":222,"line":656},[220,38903,1792],{"class":264},[1504,38905,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38907},[38908,38909],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":38613,"description":38621},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":38916,"title":38917,"body":38918,"category":32806,"componentType":25883,"description":38925,"extension":191,"meta":39186,"navigation":194,"path":39187,"requiresChild":194,"seo":39188,"stem":39189,"__hash__":39190},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":38919,"toc":39182},[38920,38923,38926,38928,38930,38933,38935,39180],[11,38921,38917],{"id":38922},"chromaticaberration",[15,38924,38925],{},"Separate RGB channels for a prismatic distortion effect",[31911,38927],{"component":38917},[23,38929,31915],{"id":26533},[31917,38931],{":props":38932},"[{\"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,38934,31923],{"id":31922},[246,38936,38937,38982,39026,39070,39114],{":tabs":1557},[212,38938,38940],{"className":334,"code":38939,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,38941,38942,38950,38958,38966,38974],{"__ignoreMap":178},[220,38943,38944,38946,38948],{"class":222,"line":223},[220,38945,343],{"class":264},[220,38947,347],{"class":346},[220,38949,359],{"class":264},[220,38951,38952,38954,38956],{"class":222,"line":179},[220,38953,364],{"class":264},[220,38955,38917],{"class":346},[220,38957,359],{"class":264},[220,38959,38960,38962,38964],{"class":222,"line":389},[220,38961,2550],{"class":264},[220,38963,2553],{"class":346},[220,38965,386],{"class":264},[220,38967,38968,38970,38972],{"class":222,"line":399},[220,38969,2567],{"class":264},[220,38971,38917],{"class":346},[220,38973,359],{"class":264},[220,38975,38976,38978,38980],{"class":222,"line":644},[220,38977,402],{"class":264},[220,38979,347],{"class":346},[220,38981,359],{"class":264},[212,38983,38984],{"className":409,"code":38939,"language":411,"meta":178,"style":178},[99,38985,38986,38994,39002,39010,39018],{"__ignoreMap":178},[220,38987,38988,38990,38992],{"class":222,"line":223},[220,38989,343],{"class":264},[220,38991,347],{"class":420},[220,38993,359],{"class":264},[220,38995,38996,38998,39000],{"class":222,"line":179},[220,38997,364],{"class":264},[220,38999,38917],{"class":420},[220,39001,359],{"class":264},[220,39003,39004,39006,39008],{"class":222,"line":389},[220,39005,2550],{"class":264},[220,39007,2553],{"class":420},[220,39009,386],{"class":264},[220,39011,39012,39014,39016],{"class":222,"line":399},[220,39013,2567],{"class":264},[220,39015,38917],{"class":420},[220,39017,359],{"class":264},[220,39019,39020,39022,39024],{"class":222,"line":644},[220,39021,402],{"class":264},[220,39023,347],{"class":420},[220,39025,359],{"class":264},[212,39027,39028],{"className":2844,"code":38939,"language":2846,"meta":178,"style":178},[99,39029,39030,39038,39046,39054,39062],{"__ignoreMap":178},[220,39031,39032,39034,39036],{"class":222,"line":223},[220,39033,343],{"class":264},[220,39035,347],{"class":420},[220,39037,359],{"class":264},[220,39039,39040,39042,39044],{"class":222,"line":179},[220,39041,364],{"class":264},[220,39043,38917],{"class":420},[220,39045,359],{"class":264},[220,39047,39048,39050,39052],{"class":222,"line":389},[220,39049,2550],{"class":264},[220,39051,2553],{"class":420},[220,39053,386],{"class":264},[220,39055,39056,39058,39060],{"class":222,"line":399},[220,39057,2567],{"class":264},[220,39059,38917],{"class":420},[220,39061,359],{"class":264},[220,39063,39064,39066,39068],{"class":222,"line":644},[220,39065,402],{"class":264},[220,39067,347],{"class":420},[220,39069,359],{"class":264},[212,39071,39072],{"className":468,"code":38939,"language":469,"meta":178,"style":178},[99,39073,39074,39082,39090,39098,39106],{"__ignoreMap":178},[220,39075,39076,39078,39080],{"class":222,"line":223},[220,39077,343],{"class":264},[220,39079,347],{"class":420},[220,39081,359],{"class":264},[220,39083,39084,39086,39088],{"class":222,"line":179},[220,39085,364],{"class":264},[220,39087,38917],{"class":420},[220,39089,359],{"class":264},[220,39091,39092,39094,39096],{"class":222,"line":389},[220,39093,2550],{"class":264},[220,39095,2553],{"class":420},[220,39097,386],{"class":264},[220,39099,39100,39102,39104],{"class":222,"line":399},[220,39101,2567],{"class":264},[220,39103,38917],{"class":420},[220,39105,359],{"class":264},[220,39107,39108,39110,39112],{"class":222,"line":644},[220,39109,402],{"class":264},[220,39111,347],{"class":420},[220,39113,359],{"class":264},[212,39115,39117],{"className":251,"code":39116,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaticAberration', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,39118,39119,39129,39133,39147,39151,39160,39168,39172,39176],{"__ignoreMap":178},[220,39120,39121,39123,39125,39127],{"class":222,"line":223},[220,39122,261],{"class":260},[220,39124,11512],{"class":264},[220,39126,268],{"class":260},[220,39128,4007],{"class":230},[220,39130,39131],{"class":222,"line":179},[220,39132,647],{"emptyLinePlaceholder":194},[220,39134,39135,39137,39139,39141,39143,39145],{"class":222,"line":389},[220,39136,1735],{"class":260},[220,39138,1738],{"class":420},[220,39140,1741],{"class":260},[220,39142,1744],{"class":260},[220,39144,1747],{"class":226},[220,39146,1750],{"class":264},[220,39148,39149],{"class":222,"line":399},[220,39150,1765],{"class":264},[220,39152,39153,39155,39158],{"class":222,"line":644},[220,39154,1770],{"class":264},[220,39156,39157],{"class":230},"'ChromaticAberration'",[220,39159,7009],{"class":264},[220,39161,39162,39164,39166],{"class":222,"line":650},[220,39163,7014],{"class":264},[220,39165,3206],{"class":230},[220,39167,2465],{"class":264},[220,39169,39170],{"class":222,"line":656},[220,39171,7031],{"class":264},[220,39173,39174],{"class":222,"line":673},[220,39175,1787],{"class":264},[220,39177,39178],{"class":222,"line":682},[220,39179,1792],{"class":264},[1504,39181,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39183},[39184,39185],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":38917,"description":38925},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":39192,"title":2553,"body":39193,"category":15908,"componentType":25877,"description":39200,"extension":191,"meta":39475,"navigation":194,"path":39476,"requiresChild":32530,"seo":39477,"stem":39478,"__hash__":39479},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":39194,"toc":39471},[39195,39198,39201,39203,39205,39208,39210,39469],[11,39196,2553],{"id":39197},"circle",[15,39199,39200],{},"Generate a circle with adjustable size and softness",[31911,39202],{"component":2553},[23,39204,31915],{"id":26533},[31917,39206],{":props":39207},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,39209,31923],{"id":31922},[246,39211,39212,39259,39310,39358,39408],{":tabs":1557},[212,39213,39215],{"className":334,"code":39214,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,39216,39217,39225,39231,39239,39247,39251],{"__ignoreMap":178},[220,39218,39219,39221,39223],{"class":222,"line":223},[220,39220,343],{"class":264},[220,39222,347],{"class":346},[220,39224,359],{"class":264},[220,39226,39227,39229],{"class":222,"line":179},[220,39228,364],{"class":264},[220,39230,9630],{"class":346},[220,39232,39233,39235,39237],{"class":222,"line":389},[220,39234,9635],{"class":226},[220,39236,353],{"class":264},[220,39238,9591],{"class":230},[220,39240,39241,39243,39245],{"class":222,"line":399},[220,39242,17405],{"class":226},[220,39244,353],{"class":264},[220,39246,36625],{"class":230},[220,39248,39249],{"class":222,"line":644},[220,39250,1234],{"class":264},[220,39252,39253,39255,39257],{"class":222,"line":650},[220,39254,402],{"class":264},[220,39256,347],{"class":346},[220,39258,359],{"class":264},[212,39260,39262],{"className":409,"code":39261,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,39263,39264,39272,39278,39286,39298,39302],{"__ignoreMap":178},[220,39265,39266,39268,39270],{"class":222,"line":223},[220,39267,343],{"class":264},[220,39269,347],{"class":420},[220,39271,359],{"class":264},[220,39273,39274,39276],{"class":222,"line":179},[220,39275,364],{"class":264},[220,39277,9630],{"class":420},[220,39279,39280,39282,39284],{"class":222,"line":389},[220,39281,9635],{"class":226},[220,39283,353],{"class":260},[220,39285,9591],{"class":230},[220,39287,39288,39290,39292,39294,39296],{"class":222,"line":399},[220,39289,9645],{"class":226},[220,39291,353],{"class":260},[220,39293,743],{"class":264},[220,39295,8677],{"class":420},[220,39297,749],{"class":264},[220,39299,39300],{"class":222,"line":644},[220,39301,1234],{"class":264},[220,39303,39304,39306,39308],{"class":222,"line":650},[220,39305,402],{"class":264},[220,39307,347],{"class":420},[220,39309,359],{"class":264},[212,39311,39312],{"className":2844,"code":39261,"language":2846,"meta":178,"style":178},[99,39313,39314,39322,39328,39336,39346,39350],{"__ignoreMap":178},[220,39315,39316,39318,39320],{"class":222,"line":223},[220,39317,343],{"class":264},[220,39319,347],{"class":420},[220,39321,359],{"class":264},[220,39323,39324,39326],{"class":222,"line":179},[220,39325,364],{"class":264},[220,39327,9630],{"class":420},[220,39329,39330,39332,39334],{"class":222,"line":389},[220,39331,9635],{"class":226},[220,39333,353],{"class":264},[220,39335,9591],{"class":230},[220,39337,39338,39340,39342,39344],{"class":222,"line":399},[220,39339,9645],{"class":226},[220,39341,29871],{"class":264},[220,39343,8677],{"class":420},[220,39345,749],{"class":264},[220,39347,39348],{"class":222,"line":644},[220,39349,1234],{"class":264},[220,39351,39352,39354,39356],{"class":222,"line":650},[220,39353,402],{"class":264},[220,39355,347],{"class":420},[220,39357,359],{"class":264},[212,39359,39360],{"className":468,"code":39261,"language":469,"meta":178,"style":178},[99,39361,39362,39370,39376,39384,39396,39400],{"__ignoreMap":178},[220,39363,39364,39366,39368],{"class":222,"line":223},[220,39365,343],{"class":264},[220,39367,347],{"class":420},[220,39369,359],{"class":264},[220,39371,39372,39374],{"class":222,"line":179},[220,39373,364],{"class":264},[220,39375,9630],{"class":420},[220,39377,39378,39380,39382],{"class":222,"line":389},[220,39379,9635],{"class":226},[220,39381,353],{"class":260},[220,39383,9591],{"class":230},[220,39385,39386,39388,39390,39392,39394],{"class":222,"line":399},[220,39387,9645],{"class":226},[220,39389,353],{"class":260},[220,39391,743],{"class":264},[220,39393,8677],{"class":420},[220,39395,749],{"class":264},[220,39397,39398],{"class":222,"line":644},[220,39399,1234],{"class":264},[220,39401,39402,39404,39406],{"class":222,"line":650},[220,39403,402],{"class":264},[220,39405,347],{"class":420},[220,39407,359],{"class":264},[212,39409,39411],{"className":251,"code":39410,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ffffff', radius: 1 } }\n ]\n})\n",[99,39412,39413,39423,39427,39441,39445,39461,39465],{"__ignoreMap":178},[220,39414,39415,39417,39419,39421],{"class":222,"line":223},[220,39416,261],{"class":260},[220,39418,11512],{"class":264},[220,39420,268],{"class":260},[220,39422,4007],{"class":230},[220,39424,39425],{"class":222,"line":179},[220,39426,647],{"emptyLinePlaceholder":194},[220,39428,39429,39431,39433,39435,39437,39439],{"class":222,"line":389},[220,39430,1735],{"class":260},[220,39432,1738],{"class":420},[220,39434,1741],{"class":260},[220,39436,1744],{"class":260},[220,39438,1747],{"class":226},[220,39440,1750],{"class":264},[220,39442,39443],{"class":222,"line":399},[220,39444,1765],{"class":264},[220,39446,39447,39449,39451,39453,39455,39457,39459],{"class":222,"line":644},[220,39448,1770],{"class":264},[220,39450,3206],{"class":230},[220,39452,1776],{"class":264},[220,39454,10169],{"class":230},[220,39456,6566],{"class":264},[220,39458,8677],{"class":420},[220,39460,1782],{"class":264},[220,39462,39463],{"class":222,"line":650},[220,39464,1787],{"class":264},[220,39466,39467],{"class":222,"line":656},[220,39468,1792],{"class":264},[1504,39470,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39472},[39473,39474],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":39200},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":39481,"title":39482,"body":39483,"category":33063,"componentType":25877,"description":39490,"extension":191,"meta":39675,"navigation":194,"path":39676,"requiresChild":32530,"seo":39677,"stem":39678,"__hash__":39679},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":39484,"toc":39671},[39485,39488,39491,39493,39495,39498,39500,39669],[11,39486,39482],{"id":39487},"colorwheel",[15,39489,39490],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31911,39492],{"component":39482},[23,39494,31915],{"id":26533},[31917,39496],{":props":39497},"[{\"name\":\"mode\",\"type\":\"\\\"rainbow\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"Rainbow cycles through the full spectrum; Custom loops through your three chosen colors\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"First color in the cycle\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#00ff88\",\"description\":\"Second color in the cycle\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#0066ff\",\"description\":\"Third color in the cycle\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of color cycles across the viewport\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the gradient flows\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Speed at which the gradient cycles\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for blending between custom colors\"}]",[23,39499,31923],{"id":31922},[246,39501,39502,39531,39559,39587,39615],{":tabs":1557},[212,39503,39505],{"className":334,"code":39504,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,39506,39507,39515,39523],{"__ignoreMap":178},[220,39508,39509,39511,39513],{"class":222,"line":223},[220,39510,343],{"class":264},[220,39512,347],{"class":346},[220,39514,359],{"class":264},[220,39516,39517,39519,39521],{"class":222,"line":179},[220,39518,364],{"class":264},[220,39520,39482],{"class":346},[220,39522,386],{"class":264},[220,39524,39525,39527,39529],{"class":222,"line":389},[220,39526,402],{"class":264},[220,39528,347],{"class":346},[220,39530,359],{"class":264},[212,39532,39533],{"className":409,"code":39504,"language":411,"meta":178,"style":178},[99,39534,39535,39543,39551],{"__ignoreMap":178},[220,39536,39537,39539,39541],{"class":222,"line":223},[220,39538,343],{"class":264},[220,39540,347],{"class":420},[220,39542,359],{"class":264},[220,39544,39545,39547,39549],{"class":222,"line":179},[220,39546,364],{"class":264},[220,39548,39482],{"class":420},[220,39550,386],{"class":264},[220,39552,39553,39555,39557],{"class":222,"line":389},[220,39554,402],{"class":264},[220,39556,347],{"class":420},[220,39558,359],{"class":264},[212,39560,39561],{"className":2844,"code":39504,"language":2846,"meta":178,"style":178},[99,39562,39563,39571,39579],{"__ignoreMap":178},[220,39564,39565,39567,39569],{"class":222,"line":223},[220,39566,343],{"class":264},[220,39568,347],{"class":420},[220,39570,359],{"class":264},[220,39572,39573,39575,39577],{"class":222,"line":179},[220,39574,364],{"class":264},[220,39576,39482],{"class":420},[220,39578,386],{"class":264},[220,39580,39581,39583,39585],{"class":222,"line":389},[220,39582,402],{"class":264},[220,39584,347],{"class":420},[220,39586,359],{"class":264},[212,39588,39589],{"className":468,"code":39504,"language":469,"meta":178,"style":178},[99,39590,39591,39599,39607],{"__ignoreMap":178},[220,39592,39593,39595,39597],{"class":222,"line":223},[220,39594,343],{"class":264},[220,39596,347],{"class":420},[220,39598,359],{"class":264},[220,39600,39601,39603,39605],{"class":222,"line":179},[220,39602,364],{"class":264},[220,39604,39482],{"class":420},[220,39606,386],{"class":264},[220,39608,39609,39611,39613],{"class":222,"line":389},[220,39610,402],{"class":264},[220,39612,347],{"class":420},[220,39614,359],{"class":264},[212,39616,39618],{"className":251,"code":39617,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ColorWheel', props: {} }\n ]\n})\n",[99,39619,39620,39630,39634,39648,39652,39661,39665],{"__ignoreMap":178},[220,39621,39622,39624,39626,39628],{"class":222,"line":223},[220,39623,261],{"class":260},[220,39625,11512],{"class":264},[220,39627,268],{"class":260},[220,39629,4007],{"class":230},[220,39631,39632],{"class":222,"line":179},[220,39633,647],{"emptyLinePlaceholder":194},[220,39635,39636,39638,39640,39642,39644,39646],{"class":222,"line":389},[220,39637,1735],{"class":260},[220,39639,1738],{"class":420},[220,39641,1741],{"class":260},[220,39643,1744],{"class":260},[220,39645,1747],{"class":226},[220,39647,1750],{"class":264},[220,39649,39650],{"class":222,"line":399},[220,39651,1765],{"class":264},[220,39653,39654,39656,39659],{"class":222,"line":644},[220,39655,1770],{"class":264},[220,39657,39658],{"class":230},"'ColorWheel'",[220,39660,2465],{"class":264},[220,39662,39663],{"class":222,"line":650},[220,39664,1787],{"class":264},[220,39666,39667],{"class":222,"line":656},[220,39668,1792],{"class":264},[1504,39670,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39672},[39673,39674],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":39482,"description":39490},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39681,"title":39682,"body":39683,"category":32806,"componentType":25883,"description":39690,"extension":191,"meta":39951,"navigation":194,"path":39952,"requiresChild":194,"seo":39953,"stem":39954,"__hash__":39955},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39684,"toc":39947},[39685,39688,39691,39693,39695,39698,39700,39945],[11,39686,39682],{"id":39687},"compressionartifacts",[15,39689,39690],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31911,39692],{"component":39682},[23,39694,31915],{"id":26533},[31917,39696],{":props":39697},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39699,31923],{"id":31922},[246,39701,39702,39747,39791,39835,39879],{":tabs":1557},[212,39703,39705],{"className":334,"code":39704,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39706,39707,39715,39723,39731,39739],{"__ignoreMap":178},[220,39708,39709,39711,39713],{"class":222,"line":223},[220,39710,343],{"class":264},[220,39712,347],{"class":346},[220,39714,359],{"class":264},[220,39716,39717,39719,39721],{"class":222,"line":179},[220,39718,364],{"class":264},[220,39720,39682],{"class":346},[220,39722,359],{"class":264},[220,39724,39725,39727,39729],{"class":222,"line":389},[220,39726,2550],{"class":264},[220,39728,2553],{"class":346},[220,39730,386],{"class":264},[220,39732,39733,39735,39737],{"class":222,"line":399},[220,39734,2567],{"class":264},[220,39736,39682],{"class":346},[220,39738,359],{"class":264},[220,39740,39741,39743,39745],{"class":222,"line":644},[220,39742,402],{"class":264},[220,39744,347],{"class":346},[220,39746,359],{"class":264},[212,39748,39749],{"className":409,"code":39704,"language":411,"meta":178,"style":178},[99,39750,39751,39759,39767,39775,39783],{"__ignoreMap":178},[220,39752,39753,39755,39757],{"class":222,"line":223},[220,39754,343],{"class":264},[220,39756,347],{"class":420},[220,39758,359],{"class":264},[220,39760,39761,39763,39765],{"class":222,"line":179},[220,39762,364],{"class":264},[220,39764,39682],{"class":420},[220,39766,359],{"class":264},[220,39768,39769,39771,39773],{"class":222,"line":389},[220,39770,2550],{"class":264},[220,39772,2553],{"class":420},[220,39774,386],{"class":264},[220,39776,39777,39779,39781],{"class":222,"line":399},[220,39778,2567],{"class":264},[220,39780,39682],{"class":420},[220,39782,359],{"class":264},[220,39784,39785,39787,39789],{"class":222,"line":644},[220,39786,402],{"class":264},[220,39788,347],{"class":420},[220,39790,359],{"class":264},[212,39792,39793],{"className":2844,"code":39704,"language":2846,"meta":178,"style":178},[99,39794,39795,39803,39811,39819,39827],{"__ignoreMap":178},[220,39796,39797,39799,39801],{"class":222,"line":223},[220,39798,343],{"class":264},[220,39800,347],{"class":420},[220,39802,359],{"class":264},[220,39804,39805,39807,39809],{"class":222,"line":179},[220,39806,364],{"class":264},[220,39808,39682],{"class":420},[220,39810,359],{"class":264},[220,39812,39813,39815,39817],{"class":222,"line":389},[220,39814,2550],{"class":264},[220,39816,2553],{"class":420},[220,39818,386],{"class":264},[220,39820,39821,39823,39825],{"class":222,"line":399},[220,39822,2567],{"class":264},[220,39824,39682],{"class":420},[220,39826,359],{"class":264},[220,39828,39829,39831,39833],{"class":222,"line":644},[220,39830,402],{"class":264},[220,39832,347],{"class":420},[220,39834,359],{"class":264},[212,39836,39837],{"className":468,"code":39704,"language":469,"meta":178,"style":178},[99,39838,39839,39847,39855,39863,39871],{"__ignoreMap":178},[220,39840,39841,39843,39845],{"class":222,"line":223},[220,39842,343],{"class":264},[220,39844,347],{"class":420},[220,39846,359],{"class":264},[220,39848,39849,39851,39853],{"class":222,"line":179},[220,39850,364],{"class":264},[220,39852,39682],{"class":420},[220,39854,359],{"class":264},[220,39856,39857,39859,39861],{"class":222,"line":389},[220,39858,2550],{"class":264},[220,39860,2553],{"class":420},[220,39862,386],{"class":264},[220,39864,39865,39867,39869],{"class":222,"line":399},[220,39866,2567],{"class":264},[220,39868,39682],{"class":420},[220,39870,359],{"class":264},[220,39872,39873,39875,39877],{"class":222,"line":644},[220,39874,402],{"class":264},[220,39876,347],{"class":420},[220,39878,359],{"class":264},[212,39880,39882],{"className":251,"code":39881,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CompressionArtifacts', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,39883,39884,39894,39898,39912,39916,39925,39933,39937,39941],{"__ignoreMap":178},[220,39885,39886,39888,39890,39892],{"class":222,"line":223},[220,39887,261],{"class":260},[220,39889,11512],{"class":264},[220,39891,268],{"class":260},[220,39893,4007],{"class":230},[220,39895,39896],{"class":222,"line":179},[220,39897,647],{"emptyLinePlaceholder":194},[220,39899,39900,39902,39904,39906,39908,39910],{"class":222,"line":389},[220,39901,1735],{"class":260},[220,39903,1738],{"class":420},[220,39905,1741],{"class":260},[220,39907,1744],{"class":260},[220,39909,1747],{"class":226},[220,39911,1750],{"class":264},[220,39913,39914],{"class":222,"line":399},[220,39915,1765],{"class":264},[220,39917,39918,39920,39923],{"class":222,"line":644},[220,39919,1770],{"class":264},[220,39921,39922],{"class":230},"'CompressionArtifacts'",[220,39924,7009],{"class":264},[220,39926,39927,39929,39931],{"class":222,"line":650},[220,39928,7014],{"class":264},[220,39930,3206],{"class":230},[220,39932,2465],{"class":264},[220,39934,39935],{"class":222,"line":656},[220,39936,7031],{"class":264},[220,39938,39939],{"class":222,"line":673},[220,39940,1787],{"class":264},[220,39942,39943],{"class":222,"line":682},[220,39944,1792],{"class":264},[1504,39946,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":39948},[39949,39950],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39682,"description":39690},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":39957,"title":39958,"body":39959,"category":33396,"componentType":25883,"description":39966,"extension":191,"meta":40283,"navigation":194,"path":40284,"requiresChild":194,"seo":40285,"stem":40286,"__hash__":40287},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":39960,"toc":40279},[39961,39964,39967,39969,39971,39974,39976,40277],[11,39962,39958],{"id":39963},"concentricspin",[15,39965,39966],{},"Concentric rings that each rotate the underlying image by different amounts",[31911,39968],{"component":39958},[23,39970,31915],{"id":26533},[31917,39972],{":props":39973},"[{\"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,39975,31923],{"id":31922},[246,39977,39978,40034,40093,40149,40207],{":tabs":1557},[212,39979,39981],{"className":334,"code":39980,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,39982,39983,39991,39998,40006,40010,40018,40026],{"__ignoreMap":178},[220,39984,39985,39987,39989],{"class":222,"line":223},[220,39986,343],{"class":264},[220,39988,347],{"class":346},[220,39990,359],{"class":264},[220,39992,39993,39995],{"class":222,"line":179},[220,39994,364],{"class":264},[220,39996,39997],{"class":346},"ConcentricSpin\n",[220,39999,40000,40002,40004],{"class":222,"line":389},[220,40001,20371],{"class":226},[220,40003,353],{"class":264},[220,40005,31954],{"class":230},[220,40007,40008],{"class":222,"line":399},[220,40009,31959],{"class":264},[220,40011,40012,40014,40016],{"class":222,"line":644},[220,40013,2550],{"class":264},[220,40015,2553],{"class":346},[220,40017,386],{"class":264},[220,40019,40020,40022,40024],{"class":222,"line":650},[220,40021,2567],{"class":264},[220,40023,39958],{"class":346},[220,40025,359],{"class":264},[220,40027,40028,40030,40032],{"class":222,"line":656},[220,40029,402],{"class":264},[220,40031,347],{"class":346},[220,40033,359],{"class":264},[212,40035,40037],{"className":409,"code":40036,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40038,40039,40047,40053,40065,40069,40077,40085],{"__ignoreMap":178},[220,40040,40041,40043,40045],{"class":222,"line":223},[220,40042,343],{"class":264},[220,40044,347],{"class":420},[220,40046,359],{"class":264},[220,40048,40049,40051],{"class":222,"line":179},[220,40050,364],{"class":264},[220,40052,39997],{"class":420},[220,40054,40055,40057,40059,40061,40063],{"class":222,"line":389},[220,40056,20482],{"class":226},[220,40058,353],{"class":260},[220,40060,743],{"class":264},[220,40062,24800],{"class":420},[220,40064,749],{"class":264},[220,40066,40067],{"class":222,"line":399},[220,40068,31959],{"class":264},[220,40070,40071,40073,40075],{"class":222,"line":644},[220,40072,2550],{"class":264},[220,40074,2553],{"class":420},[220,40076,386],{"class":264},[220,40078,40079,40081,40083],{"class":222,"line":650},[220,40080,2567],{"class":264},[220,40082,39958],{"class":420},[220,40084,359],{"class":264},[220,40086,40087,40089,40091],{"class":222,"line":656},[220,40088,402],{"class":264},[220,40090,347],{"class":420},[220,40092,359],{"class":264},[212,40094,40095],{"className":2844,"code":40036,"language":2846,"meta":178,"style":178},[99,40096,40097,40105,40111,40121,40125,40133,40141],{"__ignoreMap":178},[220,40098,40099,40101,40103],{"class":222,"line":223},[220,40100,343],{"class":264},[220,40102,347],{"class":420},[220,40104,359],{"class":264},[220,40106,40107,40109],{"class":222,"line":179},[220,40108,364],{"class":264},[220,40110,39997],{"class":420},[220,40112,40113,40115,40117,40119],{"class":222,"line":389},[220,40114,20482],{"class":226},[220,40116,29871],{"class":264},[220,40118,24800],{"class":420},[220,40120,749],{"class":264},[220,40122,40123],{"class":222,"line":399},[220,40124,31959],{"class":264},[220,40126,40127,40129,40131],{"class":222,"line":644},[220,40128,2550],{"class":264},[220,40130,2553],{"class":420},[220,40132,386],{"class":264},[220,40134,40135,40137,40139],{"class":222,"line":650},[220,40136,2567],{"class":264},[220,40138,39958],{"class":420},[220,40140,359],{"class":264},[220,40142,40143,40145,40147],{"class":222,"line":656},[220,40144,402],{"class":264},[220,40146,347],{"class":420},[220,40148,359],{"class":264},[212,40150,40151],{"className":468,"code":40036,"language":469,"meta":178,"style":178},[99,40152,40153,40161,40167,40179,40183,40191,40199],{"__ignoreMap":178},[220,40154,40155,40157,40159],{"class":222,"line":223},[220,40156,343],{"class":264},[220,40158,347],{"class":420},[220,40160,359],{"class":264},[220,40162,40163,40165],{"class":222,"line":179},[220,40164,364],{"class":264},[220,40166,39997],{"class":420},[220,40168,40169,40171,40173,40175,40177],{"class":222,"line":389},[220,40170,20482],{"class":226},[220,40172,353],{"class":260},[220,40174,743],{"class":264},[220,40176,24800],{"class":420},[220,40178,749],{"class":264},[220,40180,40181],{"class":222,"line":399},[220,40182,31959],{"class":264},[220,40184,40185,40187,40189],{"class":222,"line":644},[220,40186,2550],{"class":264},[220,40188,2553],{"class":420},[220,40190,386],{"class":264},[220,40192,40193,40195,40197],{"class":222,"line":650},[220,40194,2567],{"class":264},[220,40196,39958],{"class":420},[220,40198,359],{"class":264},[220,40200,40201,40203,40205],{"class":222,"line":656},[220,40202,402],{"class":264},[220,40204,347],{"class":420},[220,40206,359],{"class":264},[212,40208,40210],{"className":251,"code":40209,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConcentricSpin', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,40211,40212,40222,40226,40240,40244,40257,40265,40269,40273],{"__ignoreMap":178},[220,40213,40214,40216,40218,40220],{"class":222,"line":223},[220,40215,261],{"class":260},[220,40217,11512],{"class":264},[220,40219,268],{"class":260},[220,40221,4007],{"class":230},[220,40223,40224],{"class":222,"line":179},[220,40225,647],{"emptyLinePlaceholder":194},[220,40227,40228,40230,40232,40234,40236,40238],{"class":222,"line":389},[220,40229,1735],{"class":260},[220,40231,1738],{"class":420},[220,40233,1741],{"class":260},[220,40235,1744],{"class":260},[220,40237,1747],{"class":226},[220,40239,1750],{"class":264},[220,40241,40242],{"class":222,"line":399},[220,40243,1765],{"class":264},[220,40245,40246,40248,40251,40253,40255],{"class":222,"line":644},[220,40247,1770],{"class":264},[220,40249,40250],{"class":230},"'ConcentricSpin'",[220,40252,32203],{"class":264},[220,40254,24800],{"class":420},[220,40256,7546],{"class":264},[220,40258,40259,40261,40263],{"class":222,"line":650},[220,40260,7014],{"class":264},[220,40262,3206],{"class":230},[220,40264,2465],{"class":264},[220,40266,40267],{"class":222,"line":656},[220,40268,7031],{"class":264},[220,40270,40271],{"class":222,"line":673},[220,40272,1787],{"class":264},[220,40274,40275],{"class":222,"line":682},[220,40276,1792],{"class":264},[1504,40278,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40280},[40281,40282],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":39958,"description":39966},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":40289,"title":40290,"body":40291,"category":33063,"componentType":25877,"description":40298,"extension":191,"meta":40483,"navigation":194,"path":40484,"requiresChild":32530,"seo":40485,"stem":40486,"__hash__":40487},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":40292,"toc":40479},[40293,40296,40299,40301,40303,40306,40308,40477],[11,40294,40290],{"id":40295},"conicgradient",[15,40297,40298],{},"Colors sweep in a full circle around a center point, like a color wheel",[31911,40300],{"component":40290},[23,40302,31915],{"id":26533},[31917,40304],{":props":40305},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,40307,31923],{"id":31922},[246,40309,40310,40339,40367,40395,40423],{":tabs":1557},[212,40311,40313],{"className":334,"code":40312,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,40314,40315,40323,40331],{"__ignoreMap":178},[220,40316,40317,40319,40321],{"class":222,"line":223},[220,40318,343],{"class":264},[220,40320,347],{"class":346},[220,40322,359],{"class":264},[220,40324,40325,40327,40329],{"class":222,"line":179},[220,40326,364],{"class":264},[220,40328,40290],{"class":346},[220,40330,386],{"class":264},[220,40332,40333,40335,40337],{"class":222,"line":389},[220,40334,402],{"class":264},[220,40336,347],{"class":346},[220,40338,359],{"class":264},[212,40340,40341],{"className":409,"code":40312,"language":411,"meta":178,"style":178},[99,40342,40343,40351,40359],{"__ignoreMap":178},[220,40344,40345,40347,40349],{"class":222,"line":223},[220,40346,343],{"class":264},[220,40348,347],{"class":420},[220,40350,359],{"class":264},[220,40352,40353,40355,40357],{"class":222,"line":179},[220,40354,364],{"class":264},[220,40356,40290],{"class":420},[220,40358,386],{"class":264},[220,40360,40361,40363,40365],{"class":222,"line":389},[220,40362,402],{"class":264},[220,40364,347],{"class":420},[220,40366,359],{"class":264},[212,40368,40369],{"className":2844,"code":40312,"language":2846,"meta":178,"style":178},[99,40370,40371,40379,40387],{"__ignoreMap":178},[220,40372,40373,40375,40377],{"class":222,"line":223},[220,40374,343],{"class":264},[220,40376,347],{"class":420},[220,40378,359],{"class":264},[220,40380,40381,40383,40385],{"class":222,"line":179},[220,40382,364],{"class":264},[220,40384,40290],{"class":420},[220,40386,386],{"class":264},[220,40388,40389,40391,40393],{"class":222,"line":389},[220,40390,402],{"class":264},[220,40392,347],{"class":420},[220,40394,359],{"class":264},[212,40396,40397],{"className":468,"code":40312,"language":469,"meta":178,"style":178},[99,40398,40399,40407,40415],{"__ignoreMap":178},[220,40400,40401,40403,40405],{"class":222,"line":223},[220,40402,343],{"class":264},[220,40404,347],{"class":420},[220,40406,359],{"class":264},[220,40408,40409,40411,40413],{"class":222,"line":179},[220,40410,364],{"class":264},[220,40412,40290],{"class":420},[220,40414,386],{"class":264},[220,40416,40417,40419,40421],{"class":222,"line":389},[220,40418,402],{"class":264},[220,40420,347],{"class":420},[220,40422,359],{"class":264},[212,40424,40426],{"className":251,"code":40425,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConicGradient', props: {} }\n ]\n})\n",[99,40427,40428,40438,40442,40456,40460,40469,40473],{"__ignoreMap":178},[220,40429,40430,40432,40434,40436],{"class":222,"line":223},[220,40431,261],{"class":260},[220,40433,11512],{"class":264},[220,40435,268],{"class":260},[220,40437,4007],{"class":230},[220,40439,40440],{"class":222,"line":179},[220,40441,647],{"emptyLinePlaceholder":194},[220,40443,40444,40446,40448,40450,40452,40454],{"class":222,"line":389},[220,40445,1735],{"class":260},[220,40447,1738],{"class":420},[220,40449,1741],{"class":260},[220,40451,1744],{"class":260},[220,40453,1747],{"class":226},[220,40455,1750],{"class":264},[220,40457,40458],{"class":222,"line":399},[220,40459,1765],{"class":264},[220,40461,40462,40464,40467],{"class":222,"line":644},[220,40463,1770],{"class":264},[220,40465,40466],{"class":230},"'ConicGradient'",[220,40468,2465],{"class":264},[220,40470,40471],{"class":222,"line":650},[220,40472,1787],{"class":264},[220,40474,40475],{"class":222,"line":656},[220,40476,1792],{"class":264},[1504,40478,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40480},[40481,40482],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":40290,"description":40298},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":40489,"title":40490,"body":40491,"category":32806,"componentType":25883,"description":40498,"extension":191,"meta":40759,"navigation":194,"path":40760,"requiresChild":194,"seo":40761,"stem":40762,"__hash__":40763},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":40492,"toc":40755},[40493,40496,40499,40501,40503,40506,40508,40753],[11,40494,40490],{"id":40495},"contourlines",[15,40497,40498],{},"Draw topographical contour lines based on luminance or alpha",[31911,40500],{"component":40490},[23,40502,31915],{"id":26533},[31917,40504],{":props":40505},"[{\"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,40507,31923],{"id":31922},[246,40509,40510,40555,40599,40643,40687],{":tabs":1557},[212,40511,40513],{"className":334,"code":40512,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,40514,40515,40523,40531,40539,40547],{"__ignoreMap":178},[220,40516,40517,40519,40521],{"class":222,"line":223},[220,40518,343],{"class":264},[220,40520,347],{"class":346},[220,40522,359],{"class":264},[220,40524,40525,40527,40529],{"class":222,"line":179},[220,40526,364],{"class":264},[220,40528,40490],{"class":346},[220,40530,359],{"class":264},[220,40532,40533,40535,40537],{"class":222,"line":389},[220,40534,2550],{"class":264},[220,40536,2553],{"class":346},[220,40538,386],{"class":264},[220,40540,40541,40543,40545],{"class":222,"line":399},[220,40542,2567],{"class":264},[220,40544,40490],{"class":346},[220,40546,359],{"class":264},[220,40548,40549,40551,40553],{"class":222,"line":644},[220,40550,402],{"class":264},[220,40552,347],{"class":346},[220,40554,359],{"class":264},[212,40556,40557],{"className":409,"code":40512,"language":411,"meta":178,"style":178},[99,40558,40559,40567,40575,40583,40591],{"__ignoreMap":178},[220,40560,40561,40563,40565],{"class":222,"line":223},[220,40562,343],{"class":264},[220,40564,347],{"class":420},[220,40566,359],{"class":264},[220,40568,40569,40571,40573],{"class":222,"line":179},[220,40570,364],{"class":264},[220,40572,40490],{"class":420},[220,40574,359],{"class":264},[220,40576,40577,40579,40581],{"class":222,"line":389},[220,40578,2550],{"class":264},[220,40580,2553],{"class":420},[220,40582,386],{"class":264},[220,40584,40585,40587,40589],{"class":222,"line":399},[220,40586,2567],{"class":264},[220,40588,40490],{"class":420},[220,40590,359],{"class":264},[220,40592,40593,40595,40597],{"class":222,"line":644},[220,40594,402],{"class":264},[220,40596,347],{"class":420},[220,40598,359],{"class":264},[212,40600,40601],{"className":2844,"code":40512,"language":2846,"meta":178,"style":178},[99,40602,40603,40611,40619,40627,40635],{"__ignoreMap":178},[220,40604,40605,40607,40609],{"class":222,"line":223},[220,40606,343],{"class":264},[220,40608,347],{"class":420},[220,40610,359],{"class":264},[220,40612,40613,40615,40617],{"class":222,"line":179},[220,40614,364],{"class":264},[220,40616,40490],{"class":420},[220,40618,359],{"class":264},[220,40620,40621,40623,40625],{"class":222,"line":389},[220,40622,2550],{"class":264},[220,40624,2553],{"class":420},[220,40626,386],{"class":264},[220,40628,40629,40631,40633],{"class":222,"line":399},[220,40630,2567],{"class":264},[220,40632,40490],{"class":420},[220,40634,359],{"class":264},[220,40636,40637,40639,40641],{"class":222,"line":644},[220,40638,402],{"class":264},[220,40640,347],{"class":420},[220,40642,359],{"class":264},[212,40644,40645],{"className":468,"code":40512,"language":469,"meta":178,"style":178},[99,40646,40647,40655,40663,40671,40679],{"__ignoreMap":178},[220,40648,40649,40651,40653],{"class":222,"line":223},[220,40650,343],{"class":264},[220,40652,347],{"class":420},[220,40654,359],{"class":264},[220,40656,40657,40659,40661],{"class":222,"line":179},[220,40658,364],{"class":264},[220,40660,40490],{"class":420},[220,40662,359],{"class":264},[220,40664,40665,40667,40669],{"class":222,"line":389},[220,40666,2550],{"class":264},[220,40668,2553],{"class":420},[220,40670,386],{"class":264},[220,40672,40673,40675,40677],{"class":222,"line":399},[220,40674,2567],{"class":264},[220,40676,40490],{"class":420},[220,40678,359],{"class":264},[220,40680,40681,40683,40685],{"class":222,"line":644},[220,40682,402],{"class":264},[220,40684,347],{"class":420},[220,40686,359],{"class":264},[212,40688,40690],{"className":251,"code":40689,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ContourLines', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,40691,40692,40702,40706,40720,40724,40733,40741,40745,40749],{"__ignoreMap":178},[220,40693,40694,40696,40698,40700],{"class":222,"line":223},[220,40695,261],{"class":260},[220,40697,11512],{"class":264},[220,40699,268],{"class":260},[220,40701,4007],{"class":230},[220,40703,40704],{"class":222,"line":179},[220,40705,647],{"emptyLinePlaceholder":194},[220,40707,40708,40710,40712,40714,40716,40718],{"class":222,"line":389},[220,40709,1735],{"class":260},[220,40711,1738],{"class":420},[220,40713,1741],{"class":260},[220,40715,1744],{"class":260},[220,40717,1747],{"class":226},[220,40719,1750],{"class":264},[220,40721,40722],{"class":222,"line":399},[220,40723,1765],{"class":264},[220,40725,40726,40728,40731],{"class":222,"line":644},[220,40727,1770],{"class":264},[220,40729,40730],{"class":230},"'ContourLines'",[220,40732,7009],{"class":264},[220,40734,40735,40737,40739],{"class":222,"line":650},[220,40736,7014],{"class":264},[220,40738,3206],{"class":230},[220,40740,2465],{"class":264},[220,40742,40743],{"class":222,"line":656},[220,40744,7031],{"class":264},[220,40746,40747],{"class":222,"line":673},[220,40748,1787],{"class":264},[220,40750,40751],{"class":222,"line":682},[220,40752,1792],{"class":264},[1504,40754,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":40756},[40757,40758],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":40490,"description":40498},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40765,"title":40766,"body":40767,"category":33396,"componentType":25883,"description":40774,"extension":191,"meta":41035,"navigation":194,"path":41036,"requiresChild":194,"seo":41037,"stem":41038,"__hash__":41039},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40768,"toc":41031},[40769,40772,40775,40777,40779,40782,40784,41029],[11,40770,40766],{"id":40771},"cornerpin",[15,40773,40774],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31911,40776],{"component":40766},[23,40778,31915],{"id":26533},[31917,40780],{":props":40781},"[{\"name\":\"topLeft\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0}\",\"description\":\"Position of the top-left corner\"},{\"name\":\"topRight\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":1,\\\"y\\\":0}\",\"description\":\"Position of the top-right corner\"},{\"name\":\"bottomLeft\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":1}\",\"description\":\"Position of the bottom-left corner\"},{\"name\":\"bottomRight\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":1,\\\"y\\\":1}\",\"description\":\"Position of the bottom-right corner\"},{\"name\":\"amount\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blends the warp in and out — 0 returns the content to its original rectangle, 1 fully pins the corners\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle areas outside the pinned quad\"}]",[23,40783,31923],{"id":31922},[246,40785,40786,40831,40875,40919,40963],{":tabs":1557},[212,40787,40789],{"className":334,"code":40788,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40790,40791,40799,40807,40815,40823],{"__ignoreMap":178},[220,40792,40793,40795,40797],{"class":222,"line":223},[220,40794,343],{"class":264},[220,40796,347],{"class":346},[220,40798,359],{"class":264},[220,40800,40801,40803,40805],{"class":222,"line":179},[220,40802,364],{"class":264},[220,40804,40766],{"class":346},[220,40806,359],{"class":264},[220,40808,40809,40811,40813],{"class":222,"line":389},[220,40810,2550],{"class":264},[220,40812,2553],{"class":346},[220,40814,386],{"class":264},[220,40816,40817,40819,40821],{"class":222,"line":399},[220,40818,2567],{"class":264},[220,40820,40766],{"class":346},[220,40822,359],{"class":264},[220,40824,40825,40827,40829],{"class":222,"line":644},[220,40826,402],{"class":264},[220,40828,347],{"class":346},[220,40830,359],{"class":264},[212,40832,40833],{"className":409,"code":40788,"language":411,"meta":178,"style":178},[99,40834,40835,40843,40851,40859,40867],{"__ignoreMap":178},[220,40836,40837,40839,40841],{"class":222,"line":223},[220,40838,343],{"class":264},[220,40840,347],{"class":420},[220,40842,359],{"class":264},[220,40844,40845,40847,40849],{"class":222,"line":179},[220,40846,364],{"class":264},[220,40848,40766],{"class":420},[220,40850,359],{"class":264},[220,40852,40853,40855,40857],{"class":222,"line":389},[220,40854,2550],{"class":264},[220,40856,2553],{"class":420},[220,40858,386],{"class":264},[220,40860,40861,40863,40865],{"class":222,"line":399},[220,40862,2567],{"class":264},[220,40864,40766],{"class":420},[220,40866,359],{"class":264},[220,40868,40869,40871,40873],{"class":222,"line":644},[220,40870,402],{"class":264},[220,40872,347],{"class":420},[220,40874,359],{"class":264},[212,40876,40877],{"className":2844,"code":40788,"language":2846,"meta":178,"style":178},[99,40878,40879,40887,40895,40903,40911],{"__ignoreMap":178},[220,40880,40881,40883,40885],{"class":222,"line":223},[220,40882,343],{"class":264},[220,40884,347],{"class":420},[220,40886,359],{"class":264},[220,40888,40889,40891,40893],{"class":222,"line":179},[220,40890,364],{"class":264},[220,40892,40766],{"class":420},[220,40894,359],{"class":264},[220,40896,40897,40899,40901],{"class":222,"line":389},[220,40898,2550],{"class":264},[220,40900,2553],{"class":420},[220,40902,386],{"class":264},[220,40904,40905,40907,40909],{"class":222,"line":399},[220,40906,2567],{"class":264},[220,40908,40766],{"class":420},[220,40910,359],{"class":264},[220,40912,40913,40915,40917],{"class":222,"line":644},[220,40914,402],{"class":264},[220,40916,347],{"class":420},[220,40918,359],{"class":264},[212,40920,40921],{"className":468,"code":40788,"language":469,"meta":178,"style":178},[99,40922,40923,40931,40939,40947,40955],{"__ignoreMap":178},[220,40924,40925,40927,40929],{"class":222,"line":223},[220,40926,343],{"class":264},[220,40928,347],{"class":420},[220,40930,359],{"class":264},[220,40932,40933,40935,40937],{"class":222,"line":179},[220,40934,364],{"class":264},[220,40936,40766],{"class":420},[220,40938,359],{"class":264},[220,40940,40941,40943,40945],{"class":222,"line":389},[220,40942,2550],{"class":264},[220,40944,2553],{"class":420},[220,40946,386],{"class":264},[220,40948,40949,40951,40953],{"class":222,"line":399},[220,40950,2567],{"class":264},[220,40952,40766],{"class":420},[220,40954,359],{"class":264},[220,40956,40957,40959,40961],{"class":222,"line":644},[220,40958,402],{"class":264},[220,40960,347],{"class":420},[220,40962,359],{"class":264},[212,40964,40966],{"className":251,"code":40965,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CornerPin', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,40967,40968,40978,40982,40996,41000,41009,41017,41021,41025],{"__ignoreMap":178},[220,40969,40970,40972,40974,40976],{"class":222,"line":223},[220,40971,261],{"class":260},[220,40973,11512],{"class":264},[220,40975,268],{"class":260},[220,40977,4007],{"class":230},[220,40979,40980],{"class":222,"line":179},[220,40981,647],{"emptyLinePlaceholder":194},[220,40983,40984,40986,40988,40990,40992,40994],{"class":222,"line":389},[220,40985,1735],{"class":260},[220,40987,1738],{"class":420},[220,40989,1741],{"class":260},[220,40991,1744],{"class":260},[220,40993,1747],{"class":226},[220,40995,1750],{"class":264},[220,40997,40998],{"class":222,"line":399},[220,40999,1765],{"class":264},[220,41001,41002,41004,41007],{"class":222,"line":644},[220,41003,1770],{"class":264},[220,41005,41006],{"class":230},"'CornerPin'",[220,41008,7009],{"class":264},[220,41010,41011,41013,41015],{"class":222,"line":650},[220,41012,7014],{"class":264},[220,41014,3206],{"class":230},[220,41016,2465],{"class":264},[220,41018,41019],{"class":222,"line":656},[220,41020,7031],{"class":264},[220,41022,41023],{"class":222,"line":673},[220,41024,1787],{"class":264},[220,41026,41027],{"class":222,"line":682},[220,41028,1792],{"class":264},[1504,41030,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":41032},[41033,41034],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40766,"description":40774},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":41041,"title":41042,"body":41043,"category":15908,"componentType":25877,"description":41050,"extension":191,"meta":41328,"navigation":194,"path":41329,"requiresChild":32530,"seo":41330,"stem":41331,"__hash__":41332},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":41044,"toc":41324},[41045,41048,41051,41053,41055,41058,41060,41322],[11,41046,41042],{"id":41047},"crescent",[15,41049,41050],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31911,41052],{"component":41042},[23,41054,31915],{"id":26533},[31917,41056],{":props":41057},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,41059,31923],{"id":31922},[246,41061,41062,41111,41162,41210,41260],{":tabs":1557},[212,41063,41065],{"className":334,"code":41064,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,41066,41067,41075,41082,41090,41099,41103],{"__ignoreMap":178},[220,41068,41069,41071,41073],{"class":222,"line":223},[220,41070,343],{"class":264},[220,41072,347],{"class":346},[220,41074,359],{"class":264},[220,41076,41077,41079],{"class":222,"line":179},[220,41078,364],{"class":264},[220,41080,41081],{"class":346},"Crescent\n",[220,41083,41084,41086,41088],{"class":222,"line":389},[220,41085,9635],{"class":226},[220,41087,353],{"class":264},[220,41089,9591],{"class":230},[220,41091,41092,41094,41096],{"class":222,"line":399},[220,41093,17405],{"class":226},[220,41095,353],{"class":264},[220,41097,41098],{"class":230},"\"0.3\"\n",[220,41100,41101],{"class":222,"line":644},[220,41102,1234],{"class":264},[220,41104,41105,41107,41109],{"class":222,"line":650},[220,41106,402],{"class":264},[220,41108,347],{"class":346},[220,41110,359],{"class":264},[212,41112,41114],{"className":409,"code":41113,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,41115,41116,41124,41130,41138,41150,41154],{"__ignoreMap":178},[220,41117,41118,41120,41122],{"class":222,"line":223},[220,41119,343],{"class":264},[220,41121,347],{"class":420},[220,41123,359],{"class":264},[220,41125,41126,41128],{"class":222,"line":179},[220,41127,364],{"class":264},[220,41129,41081],{"class":420},[220,41131,41132,41134,41136],{"class":222,"line":389},[220,41133,9635],{"class":226},[220,41135,353],{"class":260},[220,41137,9591],{"class":230},[220,41139,41140,41142,41144,41146,41148],{"class":222,"line":399},[220,41141,9645],{"class":226},[220,41143,353],{"class":260},[220,41145,743],{"class":264},[220,41147,22004],{"class":420},[220,41149,749],{"class":264},[220,41151,41152],{"class":222,"line":644},[220,41153,1234],{"class":264},[220,41155,41156,41158,41160],{"class":222,"line":650},[220,41157,402],{"class":264},[220,41159,347],{"class":420},[220,41161,359],{"class":264},[212,41163,41164],{"className":2844,"code":41113,"language":2846,"meta":178,"style":178},[99,41165,41166,41174,41180,41188,41198,41202],{"__ignoreMap":178},[220,41167,41168,41170,41172],{"class":222,"line":223},[220,41169,343],{"class":264},[220,41171,347],{"class":420},[220,41173,359],{"class":264},[220,41175,41176,41178],{"class":222,"line":179},[220,41177,364],{"class":264},[220,41179,41081],{"class":420},[220,41181,41182,41184,41186],{"class":222,"line":389},[220,41183,9635],{"class":226},[220,41185,353],{"class":264},[220,41187,9591],{"class":230},[220,41189,41190,41192,41194,41196],{"class":222,"line":399},[220,41191,9645],{"class":226},[220,41193,29871],{"class":264},[220,41195,22004],{"class":420},[220,41197,749],{"class":264},[220,41199,41200],{"class":222,"line":644},[220,41201,1234],{"class":264},[220,41203,41204,41206,41208],{"class":222,"line":650},[220,41205,402],{"class":264},[220,41207,347],{"class":420},[220,41209,359],{"class":264},[212,41211,41212],{"className":468,"code":41113,"language":469,"meta":178,"style":178},[99,41213,41214,41222,41228,41236,41248,41252],{"__ignoreMap":178},[220,41215,41216,41218,41220],{"class":222,"line":223},[220,41217,343],{"class":264},[220,41219,347],{"class":420},[220,41221,359],{"class":264},[220,41223,41224,41226],{"class":222,"line":179},[220,41225,364],{"class":264},[220,41227,41081],{"class":420},[220,41229,41230,41232,41234],{"class":222,"line":389},[220,41231,9635],{"class":226},[220,41233,353],{"class":260},[220,41235,9591],{"class":230},[220,41237,41238,41240,41242,41244,41246],{"class":222,"line":399},[220,41239,9645],{"class":226},[220,41241,353],{"class":260},[220,41243,743],{"class":264},[220,41245,22004],{"class":420},[220,41247,749],{"class":264},[220,41249,41250],{"class":222,"line":644},[220,41251,1234],{"class":264},[220,41253,41254,41256,41258],{"class":222,"line":650},[220,41255,402],{"class":264},[220,41257,347],{"class":420},[220,41259,359],{"class":264},[212,41261,41263],{"className":251,"code":41262,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crescent', props: { color: '#ffffff', radius: 0.3 } }\n ]\n})\n",[99,41264,41265,41275,41279,41293,41297,41314,41318],{"__ignoreMap":178},[220,41266,41267,41269,41271,41273],{"class":222,"line":223},[220,41268,261],{"class":260},[220,41270,11512],{"class":264},[220,41272,268],{"class":260},[220,41274,4007],{"class":230},[220,41276,41277],{"class":222,"line":179},[220,41278,647],{"emptyLinePlaceholder":194},[220,41280,41281,41283,41285,41287,41289,41291],{"class":222,"line":389},[220,41282,1735],{"class":260},[220,41284,1738],{"class":420},[220,41286,1741],{"class":260},[220,41288,1744],{"class":260},[220,41290,1747],{"class":226},[220,41292,1750],{"class":264},[220,41294,41295],{"class":222,"line":399},[220,41296,1765],{"class":264},[220,41298,41299,41301,41304,41306,41308,41310,41312],{"class":222,"line":644},[220,41300,1770],{"class":264},[220,41302,41303],{"class":230},"'Crescent'",[220,41305,1776],{"class":264},[220,41307,10169],{"class":230},[220,41309,6566],{"class":264},[220,41311,22004],{"class":420},[220,41313,1782],{"class":264},[220,41315,41316],{"class":222,"line":650},[220,41317,1787],{"class":264},[220,41319,41320],{"class":222,"line":656},[220,41321,1792],{"class":264},[1504,41323,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41325},[41326,41327],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":41042,"description":41050},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":41334,"title":41335,"body":41336,"category":15908,"componentType":25877,"description":41343,"extension":191,"meta":41621,"navigation":194,"path":41622,"requiresChild":32530,"seo":41623,"stem":41624,"__hash__":41625},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":41337,"toc":41617},[41338,41341,41344,41346,41348,41351,41353,41615],[11,41339,41335],{"id":41340},"cross",[15,41342,41343],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31911,41345],{"component":41335},[23,41347,31915],{"id":26533},[31917,41349],{":props":41350},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,41352,31923],{"id":31922},[246,41354,41355,41404,41455,41503,41553],{":tabs":1557},[212,41356,41358],{"className":334,"code":41357,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,41359,41360,41368,41375,41383,41392,41396],{"__ignoreMap":178},[220,41361,41362,41364,41366],{"class":222,"line":223},[220,41363,343],{"class":264},[220,41365,347],{"class":346},[220,41367,359],{"class":264},[220,41369,41370,41372],{"class":222,"line":179},[220,41371,364],{"class":264},[220,41373,41374],{"class":346},"Cross\n",[220,41376,41377,41379,41381],{"class":222,"line":389},[220,41378,9635],{"class":226},[220,41380,353],{"class":264},[220,41382,9591],{"class":230},[220,41384,41385,41387,41389],{"class":222,"line":399},[220,41386,17405],{"class":226},[220,41388,353],{"class":264},[220,41390,41391],{"class":230},"\"0.35\"\n",[220,41393,41394],{"class":222,"line":644},[220,41395,1234],{"class":264},[220,41397,41398,41400,41402],{"class":222,"line":650},[220,41399,402],{"class":264},[220,41401,347],{"class":346},[220,41403,359],{"class":264},[212,41405,41407],{"className":409,"code":41406,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,41408,41409,41417,41423,41431,41443,41447],{"__ignoreMap":178},[220,41410,41411,41413,41415],{"class":222,"line":223},[220,41412,343],{"class":264},[220,41414,347],{"class":420},[220,41416,359],{"class":264},[220,41418,41419,41421],{"class":222,"line":179},[220,41420,364],{"class":264},[220,41422,41374],{"class":420},[220,41424,41425,41427,41429],{"class":222,"line":389},[220,41426,9635],{"class":226},[220,41428,353],{"class":260},[220,41430,9591],{"class":230},[220,41432,41433,41435,41437,41439,41441],{"class":222,"line":399},[220,41434,9645],{"class":226},[220,41436,353],{"class":260},[220,41438,743],{"class":264},[220,41440,21148],{"class":420},[220,41442,749],{"class":264},[220,41444,41445],{"class":222,"line":644},[220,41446,1234],{"class":264},[220,41448,41449,41451,41453],{"class":222,"line":650},[220,41450,402],{"class":264},[220,41452,347],{"class":420},[220,41454,359],{"class":264},[212,41456,41457],{"className":2844,"code":41406,"language":2846,"meta":178,"style":178},[99,41458,41459,41467,41473,41481,41491,41495],{"__ignoreMap":178},[220,41460,41461,41463,41465],{"class":222,"line":223},[220,41462,343],{"class":264},[220,41464,347],{"class":420},[220,41466,359],{"class":264},[220,41468,41469,41471],{"class":222,"line":179},[220,41470,364],{"class":264},[220,41472,41374],{"class":420},[220,41474,41475,41477,41479],{"class":222,"line":389},[220,41476,9635],{"class":226},[220,41478,353],{"class":264},[220,41480,9591],{"class":230},[220,41482,41483,41485,41487,41489],{"class":222,"line":399},[220,41484,9645],{"class":226},[220,41486,29871],{"class":264},[220,41488,21148],{"class":420},[220,41490,749],{"class":264},[220,41492,41493],{"class":222,"line":644},[220,41494,1234],{"class":264},[220,41496,41497,41499,41501],{"class":222,"line":650},[220,41498,402],{"class":264},[220,41500,347],{"class":420},[220,41502,359],{"class":264},[212,41504,41505],{"className":468,"code":41406,"language":469,"meta":178,"style":178},[99,41506,41507,41515,41521,41529,41541,41545],{"__ignoreMap":178},[220,41508,41509,41511,41513],{"class":222,"line":223},[220,41510,343],{"class":264},[220,41512,347],{"class":420},[220,41514,359],{"class":264},[220,41516,41517,41519],{"class":222,"line":179},[220,41518,364],{"class":264},[220,41520,41374],{"class":420},[220,41522,41523,41525,41527],{"class":222,"line":389},[220,41524,9635],{"class":226},[220,41526,353],{"class":260},[220,41528,9591],{"class":230},[220,41530,41531,41533,41535,41537,41539],{"class":222,"line":399},[220,41532,9645],{"class":226},[220,41534,353],{"class":260},[220,41536,743],{"class":264},[220,41538,21148],{"class":420},[220,41540,749],{"class":264},[220,41542,41543],{"class":222,"line":644},[220,41544,1234],{"class":264},[220,41546,41547,41549,41551],{"class":222,"line":650},[220,41548,402],{"class":264},[220,41550,347],{"class":420},[220,41552,359],{"class":264},[212,41554,41556],{"className":251,"code":41555,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Cross', props: { color: '#ffffff', radius: 0.35 } }\n ]\n})\n",[99,41557,41558,41568,41572,41586,41590,41607,41611],{"__ignoreMap":178},[220,41559,41560,41562,41564,41566],{"class":222,"line":223},[220,41561,261],{"class":260},[220,41563,11512],{"class":264},[220,41565,268],{"class":260},[220,41567,4007],{"class":230},[220,41569,41570],{"class":222,"line":179},[220,41571,647],{"emptyLinePlaceholder":194},[220,41573,41574,41576,41578,41580,41582,41584],{"class":222,"line":389},[220,41575,1735],{"class":260},[220,41577,1738],{"class":420},[220,41579,1741],{"class":260},[220,41581,1744],{"class":260},[220,41583,1747],{"class":226},[220,41585,1750],{"class":264},[220,41587,41588],{"class":222,"line":399},[220,41589,1765],{"class":264},[220,41591,41592,41594,41597,41599,41601,41603,41605],{"class":222,"line":644},[220,41593,1770],{"class":264},[220,41595,41596],{"class":230},"'Cross'",[220,41598,1776],{"class":264},[220,41600,10169],{"class":230},[220,41602,6566],{"class":264},[220,41604,21148],{"class":420},[220,41606,1782],{"class":264},[220,41608,41609],{"class":222,"line":650},[220,41610,1787],{"class":264},[220,41612,41613],{"class":222,"line":656},[220,41614,1792],{"class":264},[1504,41616,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41618},[41619,41620],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":41335,"description":41343},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":41627,"title":23172,"body":41628,"category":36569,"componentType":25883,"description":41635,"extension":191,"meta":41896,"navigation":194,"path":41897,"requiresChild":194,"seo":41898,"stem":41899,"__hash__":41900},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":41629,"toc":41892},[41630,41633,41636,41638,41640,41643,41645,41890],[11,41631,23172],{"id":41632},"crystal",[15,41634,41635],{},"Diamond-like crystal lens with faceted refraction.",[31911,41637],{"component":23172},[23,41639,31915],{"id":26533},[31917,41641],{":props":41642},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the crystal shape in degrees\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,41644,31923],{"id":31922},[246,41646,41647,41692,41736,41780,41824],{":tabs":1557},[212,41648,41650],{"className":334,"code":41649,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41651,41652,41660,41668,41676,41684],{"__ignoreMap":178},[220,41653,41654,41656,41658],{"class":222,"line":223},[220,41655,343],{"class":264},[220,41657,347],{"class":346},[220,41659,359],{"class":264},[220,41661,41662,41664,41666],{"class":222,"line":179},[220,41663,364],{"class":264},[220,41665,23172],{"class":346},[220,41667,359],{"class":264},[220,41669,41670,41672,41674],{"class":222,"line":389},[220,41671,2550],{"class":264},[220,41673,2553],{"class":346},[220,41675,386],{"class":264},[220,41677,41678,41680,41682],{"class":222,"line":399},[220,41679,2567],{"class":264},[220,41681,23172],{"class":346},[220,41683,359],{"class":264},[220,41685,41686,41688,41690],{"class":222,"line":644},[220,41687,402],{"class":264},[220,41689,347],{"class":346},[220,41691,359],{"class":264},[212,41693,41694],{"className":409,"code":41649,"language":411,"meta":178,"style":178},[99,41695,41696,41704,41712,41720,41728],{"__ignoreMap":178},[220,41697,41698,41700,41702],{"class":222,"line":223},[220,41699,343],{"class":264},[220,41701,347],{"class":420},[220,41703,359],{"class":264},[220,41705,41706,41708,41710],{"class":222,"line":179},[220,41707,364],{"class":264},[220,41709,23172],{"class":420},[220,41711,359],{"class":264},[220,41713,41714,41716,41718],{"class":222,"line":389},[220,41715,2550],{"class":264},[220,41717,2553],{"class":420},[220,41719,386],{"class":264},[220,41721,41722,41724,41726],{"class":222,"line":399},[220,41723,2567],{"class":264},[220,41725,23172],{"class":420},[220,41727,359],{"class":264},[220,41729,41730,41732,41734],{"class":222,"line":644},[220,41731,402],{"class":264},[220,41733,347],{"class":420},[220,41735,359],{"class":264},[212,41737,41738],{"className":2844,"code":41649,"language":2846,"meta":178,"style":178},[99,41739,41740,41748,41756,41764,41772],{"__ignoreMap":178},[220,41741,41742,41744,41746],{"class":222,"line":223},[220,41743,343],{"class":264},[220,41745,347],{"class":420},[220,41747,359],{"class":264},[220,41749,41750,41752,41754],{"class":222,"line":179},[220,41751,364],{"class":264},[220,41753,23172],{"class":420},[220,41755,359],{"class":264},[220,41757,41758,41760,41762],{"class":222,"line":389},[220,41759,2550],{"class":264},[220,41761,2553],{"class":420},[220,41763,386],{"class":264},[220,41765,41766,41768,41770],{"class":222,"line":399},[220,41767,2567],{"class":264},[220,41769,23172],{"class":420},[220,41771,359],{"class":264},[220,41773,41774,41776,41778],{"class":222,"line":644},[220,41775,402],{"class":264},[220,41777,347],{"class":420},[220,41779,359],{"class":264},[212,41781,41782],{"className":468,"code":41649,"language":469,"meta":178,"style":178},[99,41783,41784,41792,41800,41808,41816],{"__ignoreMap":178},[220,41785,41786,41788,41790],{"class":222,"line":223},[220,41787,343],{"class":264},[220,41789,347],{"class":420},[220,41791,359],{"class":264},[220,41793,41794,41796,41798],{"class":222,"line":179},[220,41795,364],{"class":264},[220,41797,23172],{"class":420},[220,41799,359],{"class":264},[220,41801,41802,41804,41806],{"class":222,"line":389},[220,41803,2550],{"class":264},[220,41805,2553],{"class":420},[220,41807,386],{"class":264},[220,41809,41810,41812,41814],{"class":222,"line":399},[220,41811,2567],{"class":264},[220,41813,23172],{"class":420},[220,41815,359],{"class":264},[220,41817,41818,41820,41822],{"class":222,"line":644},[220,41819,402],{"class":264},[220,41821,347],{"class":420},[220,41823,359],{"class":264},[212,41825,41827],{"className":251,"code":41826,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crystal', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,41828,41829,41839,41843,41857,41861,41870,41878,41882,41886],{"__ignoreMap":178},[220,41830,41831,41833,41835,41837],{"class":222,"line":223},[220,41832,261],{"class":260},[220,41834,11512],{"class":264},[220,41836,268],{"class":260},[220,41838,4007],{"class":230},[220,41840,41841],{"class":222,"line":179},[220,41842,647],{"emptyLinePlaceholder":194},[220,41844,41845,41847,41849,41851,41853,41855],{"class":222,"line":389},[220,41846,1735],{"class":260},[220,41848,1738],{"class":420},[220,41850,1741],{"class":260},[220,41852,1744],{"class":260},[220,41854,1747],{"class":226},[220,41856,1750],{"class":264},[220,41858,41859],{"class":222,"line":399},[220,41860,1765],{"class":264},[220,41862,41863,41865,41868],{"class":222,"line":644},[220,41864,1770],{"class":264},[220,41866,41867],{"class":230},"'Crystal'",[220,41869,7009],{"class":264},[220,41871,41872,41874,41876],{"class":222,"line":650},[220,41873,7014],{"class":264},[220,41875,3206],{"class":230},[220,41877,2465],{"class":264},[220,41879,41880],{"class":222,"line":656},[220,41881,7031],{"class":264},[220,41883,41884],{"class":222,"line":673},[220,41885,1787],{"class":264},[220,41887,41888],{"class":222,"line":682},[220,41889,1792],{"class":264},[1504,41891,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":41893},[41894,41895],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":23172,"description":41635},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":41902,"title":41903,"body":41904,"category":33063,"componentType":25877,"description":41911,"extension":191,"meta":42095,"navigation":194,"path":42096,"requiresChild":32530,"seo":42097,"stem":42098,"__hash__":42099},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":41905,"toc":42091},[41906,41909,41912,41914,41916,41918,41920,42089],[11,41907,41903],{"id":41908},"curlnoise",[15,41910,41911],{},"Swirling divergence-free flow field that drifts over time",[31911,41913],{"component":41903},[23,41915,31915],{"id":26533},[31917,41917],{":props":34648},[23,41919,31923],{"id":31922},[246,41921,41922,41951,41979,42007,42035],{":tabs":1557},[212,41923,41925],{"className":334,"code":41924,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,41926,41927,41935,41943],{"__ignoreMap":178},[220,41928,41929,41931,41933],{"class":222,"line":223},[220,41930,343],{"class":264},[220,41932,347],{"class":346},[220,41934,359],{"class":264},[220,41936,41937,41939,41941],{"class":222,"line":179},[220,41938,364],{"class":264},[220,41940,41903],{"class":346},[220,41942,386],{"class":264},[220,41944,41945,41947,41949],{"class":222,"line":389},[220,41946,402],{"class":264},[220,41948,347],{"class":346},[220,41950,359],{"class":264},[212,41952,41953],{"className":409,"code":41924,"language":411,"meta":178,"style":178},[99,41954,41955,41963,41971],{"__ignoreMap":178},[220,41956,41957,41959,41961],{"class":222,"line":223},[220,41958,343],{"class":264},[220,41960,347],{"class":420},[220,41962,359],{"class":264},[220,41964,41965,41967,41969],{"class":222,"line":179},[220,41966,364],{"class":264},[220,41968,41903],{"class":420},[220,41970,386],{"class":264},[220,41972,41973,41975,41977],{"class":222,"line":389},[220,41974,402],{"class":264},[220,41976,347],{"class":420},[220,41978,359],{"class":264},[212,41980,41981],{"className":2844,"code":41924,"language":2846,"meta":178,"style":178},[99,41982,41983,41991,41999],{"__ignoreMap":178},[220,41984,41985,41987,41989],{"class":222,"line":223},[220,41986,343],{"class":264},[220,41988,347],{"class":420},[220,41990,359],{"class":264},[220,41992,41993,41995,41997],{"class":222,"line":179},[220,41994,364],{"class":264},[220,41996,41903],{"class":420},[220,41998,386],{"class":264},[220,42000,42001,42003,42005],{"class":222,"line":389},[220,42002,402],{"class":264},[220,42004,347],{"class":420},[220,42006,359],{"class":264},[212,42008,42009],{"className":468,"code":41924,"language":469,"meta":178,"style":178},[99,42010,42011,42019,42027],{"__ignoreMap":178},[220,42012,42013,42015,42017],{"class":222,"line":223},[220,42014,343],{"class":264},[220,42016,347],{"class":420},[220,42018,359],{"class":264},[220,42020,42021,42023,42025],{"class":222,"line":179},[220,42022,364],{"class":264},[220,42024,41903],{"class":420},[220,42026,386],{"class":264},[220,42028,42029,42031,42033],{"class":222,"line":389},[220,42030,402],{"class":264},[220,42032,347],{"class":420},[220,42034,359],{"class":264},[212,42036,42038],{"className":251,"code":42037,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CurlNoise', props: {} }\n ]\n})\n",[99,42039,42040,42050,42054,42068,42072,42081,42085],{"__ignoreMap":178},[220,42041,42042,42044,42046,42048],{"class":222,"line":223},[220,42043,261],{"class":260},[220,42045,11512],{"class":264},[220,42047,268],{"class":260},[220,42049,4007],{"class":230},[220,42051,42052],{"class":222,"line":179},[220,42053,647],{"emptyLinePlaceholder":194},[220,42055,42056,42058,42060,42062,42064,42066],{"class":222,"line":389},[220,42057,1735],{"class":260},[220,42059,1738],{"class":420},[220,42061,1741],{"class":260},[220,42063,1744],{"class":260},[220,42065,1747],{"class":226},[220,42067,1750],{"class":264},[220,42069,42070],{"class":222,"line":399},[220,42071,1765],{"class":264},[220,42073,42074,42076,42079],{"class":222,"line":644},[220,42075,1770],{"class":264},[220,42077,42078],{"class":230},"'CurlNoise'",[220,42080,2465],{"class":264},[220,42082,42083],{"class":222,"line":650},[220,42084,1787],{"class":264},[220,42086,42087],{"class":222,"line":656},[220,42088,1792],{"class":264},[1504,42090,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":42092},[42093,42094],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":41903,"description":41911},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":42101,"title":14426,"body":42102,"category":35559,"componentType":25883,"description":42109,"extension":191,"meta":42474,"navigation":194,"path":42475,"requiresChild":194,"seo":42476,"stem":42477,"__hash__":42478},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":42103,"toc":42470},[42104,42107,42110,42112,42114,42117,42119,42468],[11,42105,14426],{"id":42106},"cursorripples",[15,42108,42109],{},"Fluid-like ripple distortion",[31911,42111],{"component":14426},[23,42113,31915],{"id":26533},[31917,42115],{":props":42116},"[{\"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,42118,31923],{"id":31922},[246,42120,42121,42187,42258,42324,42394],{":tabs":1557},[212,42122,42124],{"className":334,"code":42123,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorRipples\n :intensity=\"10\"\n :radius=\"0.5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FCursorRipples>\n\u003C\u002FShader>\n",[99,42125,42126,42134,42141,42150,42159,42163,42171,42179],{"__ignoreMap":178},[220,42127,42128,42130,42132],{"class":222,"line":223},[220,42129,343],{"class":264},[220,42131,347],{"class":346},[220,42133,359],{"class":264},[220,42135,42136,42138],{"class":222,"line":179},[220,42137,364],{"class":264},[220,42139,42140],{"class":346},"CursorRipples\n",[220,42142,42143,42145,42147],{"class":222,"line":389},[220,42144,20371],{"class":226},[220,42146,353],{"class":264},[220,42148,42149],{"class":230},"\"10\"\n",[220,42151,42152,42154,42156],{"class":222,"line":399},[220,42153,17405],{"class":226},[220,42155,353],{"class":264},[220,42157,42158],{"class":230},"\"0.5\"\n",[220,42160,42161],{"class":222,"line":644},[220,42162,31959],{"class":264},[220,42164,42165,42167,42169],{"class":222,"line":650},[220,42166,2550],{"class":264},[220,42168,2553],{"class":346},[220,42170,386],{"class":264},[220,42172,42173,42175,42177],{"class":222,"line":656},[220,42174,2567],{"class":264},[220,42176,14426],{"class":346},[220,42178,359],{"class":264},[220,42180,42181,42183,42185],{"class":222,"line":673},[220,42182,402],{"class":264},[220,42184,347],{"class":346},[220,42186,359],{"class":264},[212,42188,42190],{"className":409,"code":42189,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorRipples\n intensity={10}\n radius={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FCursorRipples>\n\u003C\u002FShader>\n",[99,42191,42192,42200,42206,42218,42230,42234,42242,42250],{"__ignoreMap":178},[220,42193,42194,42196,42198],{"class":222,"line":223},[220,42195,343],{"class":264},[220,42197,347],{"class":420},[220,42199,359],{"class":264},[220,42201,42202,42204],{"class":222,"line":179},[220,42203,364],{"class":264},[220,42205,42140],{"class":420},[220,42207,42208,42210,42212,42214,42216],{"class":222,"line":389},[220,42209,20482],{"class":226},[220,42211,353],{"class":260},[220,42213,743],{"class":264},[220,42215,23850],{"class":420},[220,42217,749],{"class":264},[220,42219,42220,42222,42224,42226,42228],{"class":222,"line":399},[220,42221,9645],{"class":226},[220,42223,353],{"class":260},[220,42225,743],{"class":264},[220,42227,7754],{"class":420},[220,42229,749],{"class":264},[220,42231,42232],{"class":222,"line":644},[220,42233,31959],{"class":264},[220,42235,42236,42238,42240],{"class":222,"line":650},[220,42237,2550],{"class":264},[220,42239,2553],{"class":420},[220,42241,386],{"class":264},[220,42243,42244,42246,42248],{"class":222,"line":656},[220,42245,2567],{"class":264},[220,42247,14426],{"class":420},[220,42249,359],{"class":264},[220,42251,42252,42254,42256],{"class":222,"line":673},[220,42253,402],{"class":264},[220,42255,347],{"class":420},[220,42257,359],{"class":264},[212,42259,42260],{"className":2844,"code":42189,"language":2846,"meta":178,"style":178},[99,42261,42262,42270,42276,42286,42296,42300,42308,42316],{"__ignoreMap":178},[220,42263,42264,42266,42268],{"class":222,"line":223},[220,42265,343],{"class":264},[220,42267,347],{"class":420},[220,42269,359],{"class":264},[220,42271,42272,42274],{"class":222,"line":179},[220,42273,364],{"class":264},[220,42275,42140],{"class":420},[220,42277,42278,42280,42282,42284],{"class":222,"line":389},[220,42279,20482],{"class":226},[220,42281,29871],{"class":264},[220,42283,23850],{"class":420},[220,42285,749],{"class":264},[220,42287,42288,42290,42292,42294],{"class":222,"line":399},[220,42289,9645],{"class":226},[220,42291,29871],{"class":264},[220,42293,7754],{"class":420},[220,42295,749],{"class":264},[220,42297,42298],{"class":222,"line":644},[220,42299,31959],{"class":264},[220,42301,42302,42304,42306],{"class":222,"line":650},[220,42303,2550],{"class":264},[220,42305,2553],{"class":420},[220,42307,386],{"class":264},[220,42309,42310,42312,42314],{"class":222,"line":656},[220,42311,2567],{"class":264},[220,42313,14426],{"class":420},[220,42315,359],{"class":264},[220,42317,42318,42320,42322],{"class":222,"line":673},[220,42319,402],{"class":264},[220,42321,347],{"class":420},[220,42323,359],{"class":264},[212,42325,42326],{"className":468,"code":42189,"language":469,"meta":178,"style":178},[99,42327,42328,42336,42342,42354,42366,42370,42378,42386],{"__ignoreMap":178},[220,42329,42330,42332,42334],{"class":222,"line":223},[220,42331,343],{"class":264},[220,42333,347],{"class":420},[220,42335,359],{"class":264},[220,42337,42338,42340],{"class":222,"line":179},[220,42339,364],{"class":264},[220,42341,42140],{"class":420},[220,42343,42344,42346,42348,42350,42352],{"class":222,"line":389},[220,42345,20482],{"class":226},[220,42347,353],{"class":260},[220,42349,743],{"class":264},[220,42351,23850],{"class":420},[220,42353,749],{"class":264},[220,42355,42356,42358,42360,42362,42364],{"class":222,"line":399},[220,42357,9645],{"class":226},[220,42359,353],{"class":260},[220,42361,743],{"class":264},[220,42363,7754],{"class":420},[220,42365,749],{"class":264},[220,42367,42368],{"class":222,"line":644},[220,42369,31959],{"class":264},[220,42371,42372,42374,42376],{"class":222,"line":650},[220,42373,2550],{"class":264},[220,42375,2553],{"class":420},[220,42377,386],{"class":264},[220,42379,42380,42382,42384],{"class":222,"line":656},[220,42381,2567],{"class":264},[220,42383,14426],{"class":420},[220,42385,359],{"class":264},[220,42387,42388,42390,42392],{"class":222,"line":673},[220,42389,402],{"class":264},[220,42391,347],{"class":420},[220,42393,359],{"class":264},[212,42395,42397],{"className":251,"code":42396,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,42398,42399,42409,42413,42427,42431,42448,42456,42460,42464],{"__ignoreMap":178},[220,42400,42401,42403,42405,42407],{"class":222,"line":223},[220,42402,261],{"class":260},[220,42404,11512],{"class":264},[220,42406,268],{"class":260},[220,42408,4007],{"class":230},[220,42410,42411],{"class":222,"line":179},[220,42412,647],{"emptyLinePlaceholder":194},[220,42414,42415,42417,42419,42421,42423,42425],{"class":222,"line":389},[220,42416,1735],{"class":260},[220,42418,1738],{"class":420},[220,42420,1741],{"class":260},[220,42422,1744],{"class":260},[220,42424,1747],{"class":226},[220,42426,1750],{"class":264},[220,42428,42429],{"class":222,"line":399},[220,42430,1765],{"class":264},[220,42432,42433,42435,42438,42440,42442,42444,42446],{"class":222,"line":644},[220,42434,1770],{"class":264},[220,42436,42437],{"class":230},"'CursorRipples'",[220,42439,32203],{"class":264},[220,42441,23850],{"class":420},[220,42443,6566],{"class":264},[220,42445,7754],{"class":420},[220,42447,7546],{"class":264},[220,42449,42450,42452,42454],{"class":222,"line":650},[220,42451,7014],{"class":264},[220,42453,3206],{"class":230},[220,42455,2465],{"class":264},[220,42457,42458],{"class":222,"line":656},[220,42459,7031],{"class":264},[220,42461,42462],{"class":222,"line":673},[220,42463,1787],{"class":264},[220,42465,42466],{"class":222,"line":682},[220,42467,1792],{"class":264},[1504,42469,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42471},[42472,42473],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":14426,"description":42109},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":42480,"title":394,"body":42481,"category":35559,"componentType":25877,"description":42488,"extension":191,"meta":42728,"navigation":194,"path":42729,"requiresChild":32530,"seo":42730,"stem":42731,"__hash__":42732},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":42482,"toc":42724},[42483,42486,42489,42491,42493,42496,42498,42722],[11,42484,394],{"id":42485},"cursortrail",[15,42487,42488],{},"Animated trail effect that tracks cursor movement",[31911,42490],{"component":394},[23,42492,31915],{"id":26533},[31917,42494],{":props":42495},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,42497,31923],{"id":31922},[246,42499,42500,42540,42583,42623,42665],{":tabs":1557},[212,42501,42503],{"className":334,"code":42502,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,42504,42505,42513,42520,42528,42532],{"__ignoreMap":178},[220,42506,42507,42509,42511],{"class":222,"line":223},[220,42508,343],{"class":264},[220,42510,347],{"class":346},[220,42512,359],{"class":264},[220,42514,42515,42517],{"class":222,"line":179},[220,42516,364],{"class":264},[220,42518,42519],{"class":346},"CursorTrail\n",[220,42521,42522,42524,42526],{"class":222,"line":389},[220,42523,17405],{"class":226},[220,42525,353],{"class":264},[220,42527,42158],{"class":230},[220,42529,42530],{"class":222,"line":399},[220,42531,1234],{"class":264},[220,42533,42534,42536,42538],{"class":222,"line":644},[220,42535,402],{"class":264},[220,42537,347],{"class":346},[220,42539,359],{"class":264},[212,42541,42543],{"className":409,"code":42542,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,42544,42545,42553,42559,42571,42575],{"__ignoreMap":178},[220,42546,42547,42549,42551],{"class":222,"line":223},[220,42548,343],{"class":264},[220,42550,347],{"class":420},[220,42552,359],{"class":264},[220,42554,42555,42557],{"class":222,"line":179},[220,42556,364],{"class":264},[220,42558,42519],{"class":420},[220,42560,42561,42563,42565,42567,42569],{"class":222,"line":389},[220,42562,9645],{"class":226},[220,42564,353],{"class":260},[220,42566,743],{"class":264},[220,42568,7754],{"class":420},[220,42570,749],{"class":264},[220,42572,42573],{"class":222,"line":399},[220,42574,1234],{"class":264},[220,42576,42577,42579,42581],{"class":222,"line":644},[220,42578,402],{"class":264},[220,42580,347],{"class":420},[220,42582,359],{"class":264},[212,42584,42585],{"className":2844,"code":42542,"language":2846,"meta":178,"style":178},[99,42586,42587,42595,42601,42611,42615],{"__ignoreMap":178},[220,42588,42589,42591,42593],{"class":222,"line":223},[220,42590,343],{"class":264},[220,42592,347],{"class":420},[220,42594,359],{"class":264},[220,42596,42597,42599],{"class":222,"line":179},[220,42598,364],{"class":264},[220,42600,42519],{"class":420},[220,42602,42603,42605,42607,42609],{"class":222,"line":389},[220,42604,9645],{"class":226},[220,42606,29871],{"class":264},[220,42608,7754],{"class":420},[220,42610,749],{"class":264},[220,42612,42613],{"class":222,"line":399},[220,42614,1234],{"class":264},[220,42616,42617,42619,42621],{"class":222,"line":644},[220,42618,402],{"class":264},[220,42620,347],{"class":420},[220,42622,359],{"class":264},[212,42624,42625],{"className":468,"code":42542,"language":469,"meta":178,"style":178},[99,42626,42627,42635,42641,42653,42657],{"__ignoreMap":178},[220,42628,42629,42631,42633],{"class":222,"line":223},[220,42630,343],{"class":264},[220,42632,347],{"class":420},[220,42634,359],{"class":264},[220,42636,42637,42639],{"class":222,"line":179},[220,42638,364],{"class":264},[220,42640,42519],{"class":420},[220,42642,42643,42645,42647,42649,42651],{"class":222,"line":389},[220,42644,9645],{"class":226},[220,42646,353],{"class":260},[220,42648,743],{"class":264},[220,42650,7754],{"class":420},[220,42652,749],{"class":264},[220,42654,42655],{"class":222,"line":399},[220,42656,1234],{"class":264},[220,42658,42659,42661,42663],{"class":222,"line":644},[220,42660,402],{"class":264},[220,42662,347],{"class":420},[220,42664,359],{"class":264},[212,42666,42668],{"className":251,"code":42667,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorTrail', props: { radius: 0.5 } }\n ]\n})\n",[99,42669,42670,42680,42684,42698,42702,42714,42718],{"__ignoreMap":178},[220,42671,42672,42674,42676,42678],{"class":222,"line":223},[220,42673,261],{"class":260},[220,42675,11512],{"class":264},[220,42677,268],{"class":260},[220,42679,4007],{"class":230},[220,42681,42682],{"class":222,"line":179},[220,42683,647],{"emptyLinePlaceholder":194},[220,42685,42686,42688,42690,42692,42694,42696],{"class":222,"line":389},[220,42687,1735],{"class":260},[220,42689,1738],{"class":420},[220,42691,1741],{"class":260},[220,42693,1744],{"class":260},[220,42695,1747],{"class":226},[220,42697,1750],{"class":264},[220,42699,42700],{"class":222,"line":399},[220,42701,1765],{"class":264},[220,42703,42704,42706,42708,42710,42712],{"class":222,"line":644},[220,42705,1770],{"class":264},[220,42707,26365],{"class":230},[220,42709,7541],{"class":264},[220,42711,7754],{"class":420},[220,42713,1782],{"class":264},[220,42715,42716],{"class":222,"line":650},[220,42717,1787],{"class":264},[220,42719,42720],{"class":222,"line":656},[220,42721,1792],{"class":264},[1504,42723,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42725},[42726,42727],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":42488},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42734,"title":42735,"body":42736,"category":32806,"componentType":25883,"description":42743,"extension":191,"meta":43061,"navigation":194,"path":43062,"requiresChild":194,"seo":43063,"stem":43064,"__hash__":43065},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42737,"toc":43057},[42738,42741,42744,42746,42748,42751,42753,43055],[11,42739,42735],{"id":42740},"datamosh",[15,42742,42743],{},"Corrupted-codec motion smearing — macroblocks lock in place and drag their pixels across the frame in liquid trails, each recovering on its own clock, like a video stream that lost its keyframes",[31911,42745],{"component":42735},[23,42747,31915],{"id":26533},[31917,42749],{":props":42750},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"How much of the image locks and smears — the fraction of corrupted macroblocks\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"48\",\"description\":\"Macroblock size — the granularity of the corruption\"},{\"name\":\"drift\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Motion vector strength — how fast corrupted areas drag their pixels away\"},{\"name\":\"churn\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How often each block re-rolls its fate — low values let corrupted regions melt for a long time before recovering\"},{\"name\":\"blend\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blend between the live image and the moshed stream\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Simulation speed. 0 freezes the decay in place.\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for the corruption layout\"}]",[23,42752,31923],{"id":31922},[246,42754,42755,42812,42871,42927,42985],{":tabs":1557},[212,42756,42758],{"className":334,"code":42757,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDataMosh\n :intensity=\"0.7\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDataMosh>\n\u003C\u002FShader>\n",[99,42759,42760,42768,42775,42784,42788,42796,42804],{"__ignoreMap":178},[220,42761,42762,42764,42766],{"class":222,"line":223},[220,42763,343],{"class":264},[220,42765,347],{"class":346},[220,42767,359],{"class":264},[220,42769,42770,42772],{"class":222,"line":179},[220,42771,364],{"class":264},[220,42773,42774],{"class":346},"DataMosh\n",[220,42776,42777,42779,42781],{"class":222,"line":389},[220,42778,20371],{"class":226},[220,42780,353],{"class":264},[220,42782,42783],{"class":230},"\"0.7\"\n",[220,42785,42786],{"class":222,"line":399},[220,42787,31959],{"class":264},[220,42789,42790,42792,42794],{"class":222,"line":644},[220,42791,2550],{"class":264},[220,42793,2553],{"class":346},[220,42795,386],{"class":264},[220,42797,42798,42800,42802],{"class":222,"line":650},[220,42799,2567],{"class":264},[220,42801,42735],{"class":346},[220,42803,359],{"class":264},[220,42805,42806,42808,42810],{"class":222,"line":656},[220,42807,402],{"class":264},[220,42809,347],{"class":346},[220,42811,359],{"class":264},[212,42813,42815],{"className":409,"code":42814,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDataMosh\n intensity={0.7}\n >\n \u003CCircle \u002F>\n \u003C\u002FDataMosh>\n\u003C\u002FShader>\n",[99,42816,42817,42825,42831,42843,42847,42855,42863],{"__ignoreMap":178},[220,42818,42819,42821,42823],{"class":222,"line":223},[220,42820,343],{"class":264},[220,42822,347],{"class":420},[220,42824,359],{"class":264},[220,42826,42827,42829],{"class":222,"line":179},[220,42828,364],{"class":264},[220,42830,42774],{"class":420},[220,42832,42833,42835,42837,42839,42841],{"class":222,"line":389},[220,42834,20482],{"class":226},[220,42836,353],{"class":260},[220,42838,743],{"class":264},[220,42840,18944],{"class":420},[220,42842,749],{"class":264},[220,42844,42845],{"class":222,"line":399},[220,42846,31959],{"class":264},[220,42848,42849,42851,42853],{"class":222,"line":644},[220,42850,2550],{"class":264},[220,42852,2553],{"class":420},[220,42854,386],{"class":264},[220,42856,42857,42859,42861],{"class":222,"line":650},[220,42858,2567],{"class":264},[220,42860,42735],{"class":420},[220,42862,359],{"class":264},[220,42864,42865,42867,42869],{"class":222,"line":656},[220,42866,402],{"class":264},[220,42868,347],{"class":420},[220,42870,359],{"class":264},[212,42872,42873],{"className":2844,"code":42814,"language":2846,"meta":178,"style":178},[99,42874,42875,42883,42889,42899,42903,42911,42919],{"__ignoreMap":178},[220,42876,42877,42879,42881],{"class":222,"line":223},[220,42878,343],{"class":264},[220,42880,347],{"class":420},[220,42882,359],{"class":264},[220,42884,42885,42887],{"class":222,"line":179},[220,42886,364],{"class":264},[220,42888,42774],{"class":420},[220,42890,42891,42893,42895,42897],{"class":222,"line":389},[220,42892,20482],{"class":226},[220,42894,29871],{"class":264},[220,42896,18944],{"class":420},[220,42898,749],{"class":264},[220,42900,42901],{"class":222,"line":399},[220,42902,31959],{"class":264},[220,42904,42905,42907,42909],{"class":222,"line":644},[220,42906,2550],{"class":264},[220,42908,2553],{"class":420},[220,42910,386],{"class":264},[220,42912,42913,42915,42917],{"class":222,"line":650},[220,42914,2567],{"class":264},[220,42916,42735],{"class":420},[220,42918,359],{"class":264},[220,42920,42921,42923,42925],{"class":222,"line":656},[220,42922,402],{"class":264},[220,42924,347],{"class":420},[220,42926,359],{"class":264},[212,42928,42929],{"className":468,"code":42814,"language":469,"meta":178,"style":178},[99,42930,42931,42939,42945,42957,42961,42969,42977],{"__ignoreMap":178},[220,42932,42933,42935,42937],{"class":222,"line":223},[220,42934,343],{"class":264},[220,42936,347],{"class":420},[220,42938,359],{"class":264},[220,42940,42941,42943],{"class":222,"line":179},[220,42942,364],{"class":264},[220,42944,42774],{"class":420},[220,42946,42947,42949,42951,42953,42955],{"class":222,"line":389},[220,42948,20482],{"class":226},[220,42950,353],{"class":260},[220,42952,743],{"class":264},[220,42954,18944],{"class":420},[220,42956,749],{"class":264},[220,42958,42959],{"class":222,"line":399},[220,42960,31959],{"class":264},[220,42962,42963,42965,42967],{"class":222,"line":644},[220,42964,2550],{"class":264},[220,42966,2553],{"class":420},[220,42968,386],{"class":264},[220,42970,42971,42973,42975],{"class":222,"line":650},[220,42972,2567],{"class":264},[220,42974,42735],{"class":420},[220,42976,359],{"class":264},[220,42978,42979,42981,42983],{"class":222,"line":656},[220,42980,402],{"class":264},[220,42982,347],{"class":420},[220,42984,359],{"class":264},[212,42986,42988],{"className":251,"code":42987,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DataMosh', props: { intensity: 0.7 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,42989,42990,43000,43004,43018,43022,43035,43043,43047,43051],{"__ignoreMap":178},[220,42991,42992,42994,42996,42998],{"class":222,"line":223},[220,42993,261],{"class":260},[220,42995,11512],{"class":264},[220,42997,268],{"class":260},[220,42999,4007],{"class":230},[220,43001,43002],{"class":222,"line":179},[220,43003,647],{"emptyLinePlaceholder":194},[220,43005,43006,43008,43010,43012,43014,43016],{"class":222,"line":389},[220,43007,1735],{"class":260},[220,43009,1738],{"class":420},[220,43011,1741],{"class":260},[220,43013,1744],{"class":260},[220,43015,1747],{"class":226},[220,43017,1750],{"class":264},[220,43019,43020],{"class":222,"line":399},[220,43021,1765],{"class":264},[220,43023,43024,43026,43029,43031,43033],{"class":222,"line":644},[220,43025,1770],{"class":264},[220,43027,43028],{"class":230},"'DataMosh'",[220,43030,32203],{"class":264},[220,43032,18944],{"class":420},[220,43034,7546],{"class":264},[220,43036,43037,43039,43041],{"class":222,"line":650},[220,43038,7014],{"class":264},[220,43040,3206],{"class":230},[220,43042,2465],{"class":264},[220,43044,43045],{"class":222,"line":656},[220,43046,7031],{"class":264},[220,43048,43049],{"class":222,"line":673},[220,43050,1787],{"class":264},[220,43052,43053],{"class":222,"line":682},[220,43054,1792],{"class":264},[1504,43056,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43058},[43059,43060],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42735,"description":42743},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":43067,"title":43068,"body":43069,"category":33063,"componentType":25877,"description":43076,"extension":191,"meta":43261,"navigation":194,"path":43262,"requiresChild":32530,"seo":43263,"stem":43264,"__hash__":43265},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":43070,"toc":43257},[43071,43074,43077,43079,43081,43084,43086,43255],[11,43072,43068],{"id":43073},"diamondgradient",[15,43075,43076],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31911,43078],{"component":43068},[23,43080,31915],{"id":26533},[31917,43082],{":props":43083},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,43085,31923],{"id":31922},[246,43087,43088,43117,43145,43173,43201],{":tabs":1557},[212,43089,43091],{"className":334,"code":43090,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,43092,43093,43101,43109],{"__ignoreMap":178},[220,43094,43095,43097,43099],{"class":222,"line":223},[220,43096,343],{"class":264},[220,43098,347],{"class":346},[220,43100,359],{"class":264},[220,43102,43103,43105,43107],{"class":222,"line":179},[220,43104,364],{"class":264},[220,43106,43068],{"class":346},[220,43108,386],{"class":264},[220,43110,43111,43113,43115],{"class":222,"line":389},[220,43112,402],{"class":264},[220,43114,347],{"class":346},[220,43116,359],{"class":264},[212,43118,43119],{"className":409,"code":43090,"language":411,"meta":178,"style":178},[99,43120,43121,43129,43137],{"__ignoreMap":178},[220,43122,43123,43125,43127],{"class":222,"line":223},[220,43124,343],{"class":264},[220,43126,347],{"class":420},[220,43128,359],{"class":264},[220,43130,43131,43133,43135],{"class":222,"line":179},[220,43132,364],{"class":264},[220,43134,43068],{"class":420},[220,43136,386],{"class":264},[220,43138,43139,43141,43143],{"class":222,"line":389},[220,43140,402],{"class":264},[220,43142,347],{"class":420},[220,43144,359],{"class":264},[212,43146,43147],{"className":2844,"code":43090,"language":2846,"meta":178,"style":178},[99,43148,43149,43157,43165],{"__ignoreMap":178},[220,43150,43151,43153,43155],{"class":222,"line":223},[220,43152,343],{"class":264},[220,43154,347],{"class":420},[220,43156,359],{"class":264},[220,43158,43159,43161,43163],{"class":222,"line":179},[220,43160,364],{"class":264},[220,43162,43068],{"class":420},[220,43164,386],{"class":264},[220,43166,43167,43169,43171],{"class":222,"line":389},[220,43168,402],{"class":264},[220,43170,347],{"class":420},[220,43172,359],{"class":264},[212,43174,43175],{"className":468,"code":43090,"language":469,"meta":178,"style":178},[99,43176,43177,43185,43193],{"__ignoreMap":178},[220,43178,43179,43181,43183],{"class":222,"line":223},[220,43180,343],{"class":264},[220,43182,347],{"class":420},[220,43184,359],{"class":264},[220,43186,43187,43189,43191],{"class":222,"line":179},[220,43188,364],{"class":264},[220,43190,43068],{"class":420},[220,43192,386],{"class":264},[220,43194,43195,43197,43199],{"class":222,"line":389},[220,43196,402],{"class":264},[220,43198,347],{"class":420},[220,43200,359],{"class":264},[212,43202,43204],{"className":251,"code":43203,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondGradient', props: {} }\n ]\n})\n",[99,43205,43206,43216,43220,43234,43238,43247,43251],{"__ignoreMap":178},[220,43207,43208,43210,43212,43214],{"class":222,"line":223},[220,43209,261],{"class":260},[220,43211,11512],{"class":264},[220,43213,268],{"class":260},[220,43215,4007],{"class":230},[220,43217,43218],{"class":222,"line":179},[220,43219,647],{"emptyLinePlaceholder":194},[220,43221,43222,43224,43226,43228,43230,43232],{"class":222,"line":389},[220,43223,1735],{"class":260},[220,43225,1738],{"class":420},[220,43227,1741],{"class":260},[220,43229,1744],{"class":260},[220,43231,1747],{"class":226},[220,43233,1750],{"class":264},[220,43235,43236],{"class":222,"line":399},[220,43237,1765],{"class":264},[220,43239,43240,43242,43245],{"class":222,"line":644},[220,43241,1770],{"class":264},[220,43243,43244],{"class":230},"'DiamondGradient'",[220,43246,2465],{"class":264},[220,43248,43249],{"class":222,"line":650},[220,43250,1787],{"class":264},[220,43252,43253],{"class":222,"line":656},[220,43254,1792],{"class":264},[1504,43256,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43258},[43259,43260],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":43068,"description":43076},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":43267,"title":43268,"body":43269,"category":33673,"componentType":25883,"description":43276,"extension":191,"meta":43537,"navigation":194,"path":43538,"requiresChild":194,"seo":43539,"stem":43540,"__hash__":43541},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":43270,"toc":43533},[43271,43274,43277,43279,43281,43284,43286,43531],[11,43272,43268],{"id":43273},"diamondwipe",[15,43275,43276],{},"Wipe the content away through a lattice of growing diamonds",[31911,43278],{"component":43268},[23,43280,31915],{"id":26533},[31917,43282],{":props":43283},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the diamonds have grown (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Size of each diamond cell as a fraction of the frame width\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of each diamond edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the cell corners inward instead\"}]",[23,43285,31923],{"id":31922},[246,43287,43288,43333,43377,43421,43465],{":tabs":1557},[212,43289,43291],{"className":334,"code":43290,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,43292,43293,43301,43309,43317,43325],{"__ignoreMap":178},[220,43294,43295,43297,43299],{"class":222,"line":223},[220,43296,343],{"class":264},[220,43298,347],{"class":346},[220,43300,359],{"class":264},[220,43302,43303,43305,43307],{"class":222,"line":179},[220,43304,364],{"class":264},[220,43306,43268],{"class":346},[220,43308,359],{"class":264},[220,43310,43311,43313,43315],{"class":222,"line":389},[220,43312,2550],{"class":264},[220,43314,2553],{"class":346},[220,43316,386],{"class":264},[220,43318,43319,43321,43323],{"class":222,"line":399},[220,43320,2567],{"class":264},[220,43322,43268],{"class":346},[220,43324,359],{"class":264},[220,43326,43327,43329,43331],{"class":222,"line":644},[220,43328,402],{"class":264},[220,43330,347],{"class":346},[220,43332,359],{"class":264},[212,43334,43335],{"className":409,"code":43290,"language":411,"meta":178,"style":178},[99,43336,43337,43345,43353,43361,43369],{"__ignoreMap":178},[220,43338,43339,43341,43343],{"class":222,"line":223},[220,43340,343],{"class":264},[220,43342,347],{"class":420},[220,43344,359],{"class":264},[220,43346,43347,43349,43351],{"class":222,"line":179},[220,43348,364],{"class":264},[220,43350,43268],{"class":420},[220,43352,359],{"class":264},[220,43354,43355,43357,43359],{"class":222,"line":389},[220,43356,2550],{"class":264},[220,43358,2553],{"class":420},[220,43360,386],{"class":264},[220,43362,43363,43365,43367],{"class":222,"line":399},[220,43364,2567],{"class":264},[220,43366,43268],{"class":420},[220,43368,359],{"class":264},[220,43370,43371,43373,43375],{"class":222,"line":644},[220,43372,402],{"class":264},[220,43374,347],{"class":420},[220,43376,359],{"class":264},[212,43378,43379],{"className":2844,"code":43290,"language":2846,"meta":178,"style":178},[99,43380,43381,43389,43397,43405,43413],{"__ignoreMap":178},[220,43382,43383,43385,43387],{"class":222,"line":223},[220,43384,343],{"class":264},[220,43386,347],{"class":420},[220,43388,359],{"class":264},[220,43390,43391,43393,43395],{"class":222,"line":179},[220,43392,364],{"class":264},[220,43394,43268],{"class":420},[220,43396,359],{"class":264},[220,43398,43399,43401,43403],{"class":222,"line":389},[220,43400,2550],{"class":264},[220,43402,2553],{"class":420},[220,43404,386],{"class":264},[220,43406,43407,43409,43411],{"class":222,"line":399},[220,43408,2567],{"class":264},[220,43410,43268],{"class":420},[220,43412,359],{"class":264},[220,43414,43415,43417,43419],{"class":222,"line":644},[220,43416,402],{"class":264},[220,43418,347],{"class":420},[220,43420,359],{"class":264},[212,43422,43423],{"className":468,"code":43290,"language":469,"meta":178,"style":178},[99,43424,43425,43433,43441,43449,43457],{"__ignoreMap":178},[220,43426,43427,43429,43431],{"class":222,"line":223},[220,43428,343],{"class":264},[220,43430,347],{"class":420},[220,43432,359],{"class":264},[220,43434,43435,43437,43439],{"class":222,"line":179},[220,43436,364],{"class":264},[220,43438,43268],{"class":420},[220,43440,359],{"class":264},[220,43442,43443,43445,43447],{"class":222,"line":389},[220,43444,2550],{"class":264},[220,43446,2553],{"class":420},[220,43448,386],{"class":264},[220,43450,43451,43453,43455],{"class":222,"line":399},[220,43452,2567],{"class":264},[220,43454,43268],{"class":420},[220,43456,359],{"class":264},[220,43458,43459,43461,43463],{"class":222,"line":644},[220,43460,402],{"class":264},[220,43462,347],{"class":420},[220,43464,359],{"class":264},[212,43466,43468],{"className":251,"code":43467,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,43469,43470,43480,43484,43498,43502,43511,43519,43523,43527],{"__ignoreMap":178},[220,43471,43472,43474,43476,43478],{"class":222,"line":223},[220,43473,261],{"class":260},[220,43475,11512],{"class":264},[220,43477,268],{"class":260},[220,43479,4007],{"class":230},[220,43481,43482],{"class":222,"line":179},[220,43483,647],{"emptyLinePlaceholder":194},[220,43485,43486,43488,43490,43492,43494,43496],{"class":222,"line":389},[220,43487,1735],{"class":260},[220,43489,1738],{"class":420},[220,43491,1741],{"class":260},[220,43493,1744],{"class":260},[220,43495,1747],{"class":226},[220,43497,1750],{"class":264},[220,43499,43500],{"class":222,"line":399},[220,43501,1765],{"class":264},[220,43503,43504,43506,43509],{"class":222,"line":644},[220,43505,1770],{"class":264},[220,43507,43508],{"class":230},"'DiamondWipe'",[220,43510,7009],{"class":264},[220,43512,43513,43515,43517],{"class":222,"line":650},[220,43514,7014],{"class":264},[220,43516,3206],{"class":230},[220,43518,2465],{"class":264},[220,43520,43521],{"class":222,"line":656},[220,43522,7031],{"class":264},[220,43524,43525],{"class":222,"line":673},[220,43526,1787],{"class":264},[220,43528,43529],{"class":222,"line":682},[220,43530,1792],{"class":264},[1504,43532,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":43534},[43535,43536],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":43268,"description":43276},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":43543,"title":43544,"body":43545,"category":32234,"componentType":25883,"description":43552,"extension":191,"meta":43870,"navigation":194,"path":43871,"requiresChild":194,"seo":43872,"stem":43873,"__hash__":43874},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":43546,"toc":43866},[43547,43550,43553,43555,43557,43560,43562,43864],[11,43548,43544],{"id":43549},"diffuseblur",[15,43551,43552],{},"Grain-like pixel displacement at random",[31911,43554],{"component":43544},[23,43556,31915],{"id":26533},[31917,43558],{":props":43559},"[{\"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,43561,31923],{"id":31922},[246,43563,43564,43621,43680,43736,43794],{":tabs":1557},[212,43565,43567],{"className":334,"code":43566,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43568,43569,43577,43584,43593,43597,43605,43613],{"__ignoreMap":178},[220,43570,43571,43573,43575],{"class":222,"line":223},[220,43572,343],{"class":264},[220,43574,347],{"class":346},[220,43576,359],{"class":264},[220,43578,43579,43581],{"class":222,"line":179},[220,43580,364],{"class":264},[220,43582,43583],{"class":346},"DiffuseBlur\n",[220,43585,43586,43588,43590],{"class":222,"line":389},[220,43587,20371],{"class":226},[220,43589,353],{"class":264},[220,43591,43592],{"class":230},"\"30\"\n",[220,43594,43595],{"class":222,"line":399},[220,43596,31959],{"class":264},[220,43598,43599,43601,43603],{"class":222,"line":644},[220,43600,2550],{"class":264},[220,43602,2553],{"class":346},[220,43604,386],{"class":264},[220,43606,43607,43609,43611],{"class":222,"line":650},[220,43608,2567],{"class":264},[220,43610,43544],{"class":346},[220,43612,359],{"class":264},[220,43614,43615,43617,43619],{"class":222,"line":656},[220,43616,402],{"class":264},[220,43618,347],{"class":346},[220,43620,359],{"class":264},[212,43622,43624],{"className":409,"code":43623,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43625,43626,43634,43640,43652,43656,43664,43672],{"__ignoreMap":178},[220,43627,43628,43630,43632],{"class":222,"line":223},[220,43629,343],{"class":264},[220,43631,347],{"class":420},[220,43633,359],{"class":264},[220,43635,43636,43638],{"class":222,"line":179},[220,43637,364],{"class":264},[220,43639,43583],{"class":420},[220,43641,43642,43644,43646,43648,43650],{"class":222,"line":389},[220,43643,20482],{"class":226},[220,43645,353],{"class":260},[220,43647,743],{"class":264},[220,43649,24010],{"class":420},[220,43651,749],{"class":264},[220,43653,43654],{"class":222,"line":399},[220,43655,31959],{"class":264},[220,43657,43658,43660,43662],{"class":222,"line":644},[220,43659,2550],{"class":264},[220,43661,2553],{"class":420},[220,43663,386],{"class":264},[220,43665,43666,43668,43670],{"class":222,"line":650},[220,43667,2567],{"class":264},[220,43669,43544],{"class":420},[220,43671,359],{"class":264},[220,43673,43674,43676,43678],{"class":222,"line":656},[220,43675,402],{"class":264},[220,43677,347],{"class":420},[220,43679,359],{"class":264},[212,43681,43682],{"className":2844,"code":43623,"language":2846,"meta":178,"style":178},[99,43683,43684,43692,43698,43708,43712,43720,43728],{"__ignoreMap":178},[220,43685,43686,43688,43690],{"class":222,"line":223},[220,43687,343],{"class":264},[220,43689,347],{"class":420},[220,43691,359],{"class":264},[220,43693,43694,43696],{"class":222,"line":179},[220,43695,364],{"class":264},[220,43697,43583],{"class":420},[220,43699,43700,43702,43704,43706],{"class":222,"line":389},[220,43701,20482],{"class":226},[220,43703,29871],{"class":264},[220,43705,24010],{"class":420},[220,43707,749],{"class":264},[220,43709,43710],{"class":222,"line":399},[220,43711,31959],{"class":264},[220,43713,43714,43716,43718],{"class":222,"line":644},[220,43715,2550],{"class":264},[220,43717,2553],{"class":420},[220,43719,386],{"class":264},[220,43721,43722,43724,43726],{"class":222,"line":650},[220,43723,2567],{"class":264},[220,43725,43544],{"class":420},[220,43727,359],{"class":264},[220,43729,43730,43732,43734],{"class":222,"line":656},[220,43731,402],{"class":264},[220,43733,347],{"class":420},[220,43735,359],{"class":264},[212,43737,43738],{"className":468,"code":43623,"language":469,"meta":178,"style":178},[99,43739,43740,43748,43754,43766,43770,43778,43786],{"__ignoreMap":178},[220,43741,43742,43744,43746],{"class":222,"line":223},[220,43743,343],{"class":264},[220,43745,347],{"class":420},[220,43747,359],{"class":264},[220,43749,43750,43752],{"class":222,"line":179},[220,43751,364],{"class":264},[220,43753,43583],{"class":420},[220,43755,43756,43758,43760,43762,43764],{"class":222,"line":389},[220,43757,20482],{"class":226},[220,43759,353],{"class":260},[220,43761,743],{"class":264},[220,43763,24010],{"class":420},[220,43765,749],{"class":264},[220,43767,43768],{"class":222,"line":399},[220,43769,31959],{"class":264},[220,43771,43772,43774,43776],{"class":222,"line":644},[220,43773,2550],{"class":264},[220,43775,2553],{"class":420},[220,43777,386],{"class":264},[220,43779,43780,43782,43784],{"class":222,"line":650},[220,43781,2567],{"class":264},[220,43783,43544],{"class":420},[220,43785,359],{"class":264},[220,43787,43788,43790,43792],{"class":222,"line":656},[220,43789,402],{"class":264},[220,43791,347],{"class":420},[220,43793,359],{"class":264},[212,43795,43797],{"className":251,"code":43796,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiffuseBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,43798,43799,43809,43813,43827,43831,43844,43852,43856,43860],{"__ignoreMap":178},[220,43800,43801,43803,43805,43807],{"class":222,"line":223},[220,43802,261],{"class":260},[220,43804,11512],{"class":264},[220,43806,268],{"class":260},[220,43808,4007],{"class":230},[220,43810,43811],{"class":222,"line":179},[220,43812,647],{"emptyLinePlaceholder":194},[220,43814,43815,43817,43819,43821,43823,43825],{"class":222,"line":389},[220,43816,1735],{"class":260},[220,43818,1738],{"class":420},[220,43820,1741],{"class":260},[220,43822,1744],{"class":260},[220,43824,1747],{"class":226},[220,43826,1750],{"class":264},[220,43828,43829],{"class":222,"line":399},[220,43830,1765],{"class":264},[220,43832,43833,43835,43838,43840,43842],{"class":222,"line":644},[220,43834,1770],{"class":264},[220,43836,43837],{"class":230},"'DiffuseBlur'",[220,43839,32203],{"class":264},[220,43841,24010],{"class":420},[220,43843,7546],{"class":264},[220,43845,43846,43848,43850],{"class":222,"line":650},[220,43847,7014],{"class":264},[220,43849,3206],{"class":230},[220,43851,2465],{"class":264},[220,43853,43854],{"class":222,"line":656},[220,43855,7031],{"class":264},[220,43857,43858],{"class":222,"line":673},[220,43859,1787],{"class":264},[220,43861,43862],{"class":222,"line":682},[220,43863,1792],{"class":264},[1504,43865,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43867},[43868,43869],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":43544,"description":43552},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":43876,"title":43877,"body":43878,"category":33396,"componentType":25883,"description":43885,"extension":191,"meta":44146,"navigation":194,"path":44147,"requiresChild":194,"seo":44148,"stem":44149,"__hash__":44150},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":43879,"toc":44142},[43880,43883,43886,43888,43890,43893,43895,44140],[11,43881,43877],{"id":43882},"displacementmap",[15,43884,43885],{},"Distorts child content using another layer's pixels as a displacement map",[31911,43887],{"component":43877},[23,43889,31915],{"id":26533},[31917,43891],{":props":43892},"[{\"name\":\"source\",\"type\":\"string\",\"default\":\"\",\"description\":\"The layer whose pixels drive the displacement — its red\u002Fgreen (or luminance) push the content around\"},{\"name\":\"amount\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Overall displacement strength\"},{\"name\":\"channelMode\",\"type\":\"\\\"twoAxis\\\" | \\\"directional\\\"\",\"default\":\"twoAxis\",\"description\":\"How the source drives the push — red→X \u002F green→Y, or luminance along a fixed angle\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Push direction in degrees (used by the Luminance channel mode)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,43894,31923],{"id":31922},[246,43896,43897,43942,43986,44030,44074],{":tabs":1557},[212,43898,43900],{"className":334,"code":43899,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,43901,43902,43910,43918,43926,43934],{"__ignoreMap":178},[220,43903,43904,43906,43908],{"class":222,"line":223},[220,43905,343],{"class":264},[220,43907,347],{"class":346},[220,43909,359],{"class":264},[220,43911,43912,43914,43916],{"class":222,"line":179},[220,43913,364],{"class":264},[220,43915,43877],{"class":346},[220,43917,359],{"class":264},[220,43919,43920,43922,43924],{"class":222,"line":389},[220,43921,2550],{"class":264},[220,43923,2553],{"class":346},[220,43925,386],{"class":264},[220,43927,43928,43930,43932],{"class":222,"line":399},[220,43929,2567],{"class":264},[220,43931,43877],{"class":346},[220,43933,359],{"class":264},[220,43935,43936,43938,43940],{"class":222,"line":644},[220,43937,402],{"class":264},[220,43939,347],{"class":346},[220,43941,359],{"class":264},[212,43943,43944],{"className":409,"code":43899,"language":411,"meta":178,"style":178},[99,43945,43946,43954,43962,43970,43978],{"__ignoreMap":178},[220,43947,43948,43950,43952],{"class":222,"line":223},[220,43949,343],{"class":264},[220,43951,347],{"class":420},[220,43953,359],{"class":264},[220,43955,43956,43958,43960],{"class":222,"line":179},[220,43957,364],{"class":264},[220,43959,43877],{"class":420},[220,43961,359],{"class":264},[220,43963,43964,43966,43968],{"class":222,"line":389},[220,43965,2550],{"class":264},[220,43967,2553],{"class":420},[220,43969,386],{"class":264},[220,43971,43972,43974,43976],{"class":222,"line":399},[220,43973,2567],{"class":264},[220,43975,43877],{"class":420},[220,43977,359],{"class":264},[220,43979,43980,43982,43984],{"class":222,"line":644},[220,43981,402],{"class":264},[220,43983,347],{"class":420},[220,43985,359],{"class":264},[212,43987,43988],{"className":2844,"code":43899,"language":2846,"meta":178,"style":178},[99,43989,43990,43998,44006,44014,44022],{"__ignoreMap":178},[220,43991,43992,43994,43996],{"class":222,"line":223},[220,43993,343],{"class":264},[220,43995,347],{"class":420},[220,43997,359],{"class":264},[220,43999,44000,44002,44004],{"class":222,"line":179},[220,44001,364],{"class":264},[220,44003,43877],{"class":420},[220,44005,359],{"class":264},[220,44007,44008,44010,44012],{"class":222,"line":389},[220,44009,2550],{"class":264},[220,44011,2553],{"class":420},[220,44013,386],{"class":264},[220,44015,44016,44018,44020],{"class":222,"line":399},[220,44017,2567],{"class":264},[220,44019,43877],{"class":420},[220,44021,359],{"class":264},[220,44023,44024,44026,44028],{"class":222,"line":644},[220,44025,402],{"class":264},[220,44027,347],{"class":420},[220,44029,359],{"class":264},[212,44031,44032],{"className":468,"code":43899,"language":469,"meta":178,"style":178},[99,44033,44034,44042,44050,44058,44066],{"__ignoreMap":178},[220,44035,44036,44038,44040],{"class":222,"line":223},[220,44037,343],{"class":264},[220,44039,347],{"class":420},[220,44041,359],{"class":264},[220,44043,44044,44046,44048],{"class":222,"line":179},[220,44045,364],{"class":264},[220,44047,43877],{"class":420},[220,44049,359],{"class":264},[220,44051,44052,44054,44056],{"class":222,"line":389},[220,44053,2550],{"class":264},[220,44055,2553],{"class":420},[220,44057,386],{"class":264},[220,44059,44060,44062,44064],{"class":222,"line":399},[220,44061,2567],{"class":264},[220,44063,43877],{"class":420},[220,44065,359],{"class":264},[220,44067,44068,44070,44072],{"class":222,"line":644},[220,44069,402],{"class":264},[220,44071,347],{"class":420},[220,44073,359],{"class":264},[212,44075,44077],{"className":251,"code":44076,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DisplacementMap', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,44078,44079,44089,44093,44107,44111,44120,44128,44132,44136],{"__ignoreMap":178},[220,44080,44081,44083,44085,44087],{"class":222,"line":223},[220,44082,261],{"class":260},[220,44084,11512],{"class":264},[220,44086,268],{"class":260},[220,44088,4007],{"class":230},[220,44090,44091],{"class":222,"line":179},[220,44092,647],{"emptyLinePlaceholder":194},[220,44094,44095,44097,44099,44101,44103,44105],{"class":222,"line":389},[220,44096,1735],{"class":260},[220,44098,1738],{"class":420},[220,44100,1741],{"class":260},[220,44102,1744],{"class":260},[220,44104,1747],{"class":226},[220,44106,1750],{"class":264},[220,44108,44109],{"class":222,"line":399},[220,44110,1765],{"class":264},[220,44112,44113,44115,44118],{"class":222,"line":644},[220,44114,1770],{"class":264},[220,44116,44117],{"class":230},"'DisplacementMap'",[220,44119,7009],{"class":264},[220,44121,44122,44124,44126],{"class":222,"line":650},[220,44123,7014],{"class":264},[220,44125,3206],{"class":230},[220,44127,2465],{"class":264},[220,44129,44130],{"class":222,"line":656},[220,44131,7031],{"class":264},[220,44133,44134],{"class":222,"line":673},[220,44135,1787],{"class":264},[220,44137,44138],{"class":222,"line":682},[220,44139,1792],{"class":264},[1504,44141,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44143},[44144,44145],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":43877,"description":43885},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":44152,"title":44153,"body":44154,"category":32806,"componentType":25883,"description":44161,"extension":191,"meta":44422,"navigation":194,"path":44423,"requiresChild":194,"seo":44424,"stem":44425,"__hash__":44426},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":44155,"toc":44418},[44156,44159,44162,44164,44166,44169,44171,44416],[11,44157,44153],{"id":44158},"dither",[15,44160,44161],{},"Dithering effect with multiple pattern options",[31911,44163],{"component":44153},[23,44165,31915],{"id":26533},[31917,44167],{":props":44168},"[{\"name\":\"pattern\",\"type\":\"\\\"bayer2\\\" | \\\"bayer4\\\" | \\\"bayer8\\\" | \\\"clusteredDot\\\" | \\\"blueNoise\\\" | \\\"whiteNoise\\\" | \\\"floydSteinberg\\\"\",\"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,44170,31923],{"id":31922},[246,44172,44173,44218,44262,44306,44350],{":tabs":1557},[212,44174,44176],{"className":334,"code":44175,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,44177,44178,44186,44194,44202,44210],{"__ignoreMap":178},[220,44179,44180,44182,44184],{"class":222,"line":223},[220,44181,343],{"class":264},[220,44183,347],{"class":346},[220,44185,359],{"class":264},[220,44187,44188,44190,44192],{"class":222,"line":179},[220,44189,364],{"class":264},[220,44191,44153],{"class":346},[220,44193,359],{"class":264},[220,44195,44196,44198,44200],{"class":222,"line":389},[220,44197,2550],{"class":264},[220,44199,2553],{"class":346},[220,44201,386],{"class":264},[220,44203,44204,44206,44208],{"class":222,"line":399},[220,44205,2567],{"class":264},[220,44207,44153],{"class":346},[220,44209,359],{"class":264},[220,44211,44212,44214,44216],{"class":222,"line":644},[220,44213,402],{"class":264},[220,44215,347],{"class":346},[220,44217,359],{"class":264},[212,44219,44220],{"className":409,"code":44175,"language":411,"meta":178,"style":178},[99,44221,44222,44230,44238,44246,44254],{"__ignoreMap":178},[220,44223,44224,44226,44228],{"class":222,"line":223},[220,44225,343],{"class":264},[220,44227,347],{"class":420},[220,44229,359],{"class":264},[220,44231,44232,44234,44236],{"class":222,"line":179},[220,44233,364],{"class":264},[220,44235,44153],{"class":420},[220,44237,359],{"class":264},[220,44239,44240,44242,44244],{"class":222,"line":389},[220,44241,2550],{"class":264},[220,44243,2553],{"class":420},[220,44245,386],{"class":264},[220,44247,44248,44250,44252],{"class":222,"line":399},[220,44249,2567],{"class":264},[220,44251,44153],{"class":420},[220,44253,359],{"class":264},[220,44255,44256,44258,44260],{"class":222,"line":644},[220,44257,402],{"class":264},[220,44259,347],{"class":420},[220,44261,359],{"class":264},[212,44263,44264],{"className":2844,"code":44175,"language":2846,"meta":178,"style":178},[99,44265,44266,44274,44282,44290,44298],{"__ignoreMap":178},[220,44267,44268,44270,44272],{"class":222,"line":223},[220,44269,343],{"class":264},[220,44271,347],{"class":420},[220,44273,359],{"class":264},[220,44275,44276,44278,44280],{"class":222,"line":179},[220,44277,364],{"class":264},[220,44279,44153],{"class":420},[220,44281,359],{"class":264},[220,44283,44284,44286,44288],{"class":222,"line":389},[220,44285,2550],{"class":264},[220,44287,2553],{"class":420},[220,44289,386],{"class":264},[220,44291,44292,44294,44296],{"class":222,"line":399},[220,44293,2567],{"class":264},[220,44295,44153],{"class":420},[220,44297,359],{"class":264},[220,44299,44300,44302,44304],{"class":222,"line":644},[220,44301,402],{"class":264},[220,44303,347],{"class":420},[220,44305,359],{"class":264},[212,44307,44308],{"className":468,"code":44175,"language":469,"meta":178,"style":178},[99,44309,44310,44318,44326,44334,44342],{"__ignoreMap":178},[220,44311,44312,44314,44316],{"class":222,"line":223},[220,44313,343],{"class":264},[220,44315,347],{"class":420},[220,44317,359],{"class":264},[220,44319,44320,44322,44324],{"class":222,"line":179},[220,44321,364],{"class":264},[220,44323,44153],{"class":420},[220,44325,359],{"class":264},[220,44327,44328,44330,44332],{"class":222,"line":389},[220,44329,2550],{"class":264},[220,44331,2553],{"class":420},[220,44333,386],{"class":264},[220,44335,44336,44338,44340],{"class":222,"line":399},[220,44337,2567],{"class":264},[220,44339,44153],{"class":420},[220,44341,359],{"class":264},[220,44343,44344,44346,44348],{"class":222,"line":644},[220,44345,402],{"class":264},[220,44347,347],{"class":420},[220,44349,359],{"class":264},[212,44351,44353],{"className":251,"code":44352,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Dither', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,44354,44355,44365,44369,44383,44387,44396,44404,44408,44412],{"__ignoreMap":178},[220,44356,44357,44359,44361,44363],{"class":222,"line":223},[220,44358,261],{"class":260},[220,44360,11512],{"class":264},[220,44362,268],{"class":260},[220,44364,4007],{"class":230},[220,44366,44367],{"class":222,"line":179},[220,44368,647],{"emptyLinePlaceholder":194},[220,44370,44371,44373,44375,44377,44379,44381],{"class":222,"line":389},[220,44372,1735],{"class":260},[220,44374,1738],{"class":420},[220,44376,1741],{"class":260},[220,44378,1744],{"class":260},[220,44380,1747],{"class":226},[220,44382,1750],{"class":264},[220,44384,44385],{"class":222,"line":399},[220,44386,1765],{"class":264},[220,44388,44389,44391,44394],{"class":222,"line":644},[220,44390,1770],{"class":264},[220,44392,44393],{"class":230},"'Dither'",[220,44395,7009],{"class":264},[220,44397,44398,44400,44402],{"class":222,"line":650},[220,44399,7014],{"class":264},[220,44401,3206],{"class":230},[220,44403,2465],{"class":264},[220,44405,44406],{"class":222,"line":656},[220,44407,7031],{"class":264},[220,44409,44410],{"class":222,"line":673},[220,44411,1787],{"class":264},[220,44413,44414],{"class":222,"line":682},[220,44415,1792],{"class":264},[1504,44417,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":44419},[44420,44421],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":44153,"description":44161},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":44428,"title":44429,"body":44430,"category":33063,"componentType":25877,"description":44437,"extension":191,"meta":44665,"navigation":194,"path":44666,"requiresChild":32530,"seo":44667,"stem":44668,"__hash__":44669},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":44431,"toc":44661},[44432,44435,44438,44440,44442,44445,44447,44659],[11,44433,44429],{"id":44434},"dotgrid",[15,44436,44437],{},"Grid of dots with optional twinkling animation",[31911,44439],{"component":44429},[23,44441,31915],{"id":26533},[31917,44443],{":props":44444},"[{\"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\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Horizontal stagger of alternating rows (0.5 = classic polka-dot brick offset)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animates the rows drifting horizontally (0 = static)\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-row random speed variance for irregular drifting motion\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"}]",[23,44446,31923],{"id":31922},[246,44448,44449,44488,44526,44564,44602],{":tabs":1557},[212,44450,44452],{"className":334,"code":44451,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44453,44454,44462,44468,44476,44480],{"__ignoreMap":178},[220,44455,44456,44458,44460],{"class":222,"line":223},[220,44457,343],{"class":264},[220,44459,347],{"class":346},[220,44461,359],{"class":264},[220,44463,44464,44466],{"class":222,"line":179},[220,44465,364],{"class":264},[220,44467,19503],{"class":346},[220,44469,44470,44472,44474],{"class":222,"line":389},[220,44471,9635],{"class":226},[220,44473,353],{"class":264},[220,44475,9591],{"class":230},[220,44477,44478],{"class":222,"line":399},[220,44479,1234],{"class":264},[220,44481,44482,44484,44486],{"class":222,"line":644},[220,44483,402],{"class":264},[220,44485,347],{"class":346},[220,44487,359],{"class":264},[212,44489,44490],{"className":409,"code":44451,"language":411,"meta":178,"style":178},[99,44491,44492,44500,44506,44514,44518],{"__ignoreMap":178},[220,44493,44494,44496,44498],{"class":222,"line":223},[220,44495,343],{"class":264},[220,44497,347],{"class":420},[220,44499,359],{"class":264},[220,44501,44502,44504],{"class":222,"line":179},[220,44503,364],{"class":264},[220,44505,19503],{"class":420},[220,44507,44508,44510,44512],{"class":222,"line":389},[220,44509,9635],{"class":226},[220,44511,353],{"class":260},[220,44513,9591],{"class":230},[220,44515,44516],{"class":222,"line":399},[220,44517,1234],{"class":264},[220,44519,44520,44522,44524],{"class":222,"line":644},[220,44521,402],{"class":264},[220,44523,347],{"class":420},[220,44525,359],{"class":264},[212,44527,44528],{"className":2844,"code":44451,"language":2846,"meta":178,"style":178},[99,44529,44530,44538,44544,44552,44556],{"__ignoreMap":178},[220,44531,44532,44534,44536],{"class":222,"line":223},[220,44533,343],{"class":264},[220,44535,347],{"class":420},[220,44537,359],{"class":264},[220,44539,44540,44542],{"class":222,"line":179},[220,44541,364],{"class":264},[220,44543,19503],{"class":420},[220,44545,44546,44548,44550],{"class":222,"line":389},[220,44547,9635],{"class":226},[220,44549,353],{"class":264},[220,44551,9591],{"class":230},[220,44553,44554],{"class":222,"line":399},[220,44555,1234],{"class":264},[220,44557,44558,44560,44562],{"class":222,"line":644},[220,44559,402],{"class":264},[220,44561,347],{"class":420},[220,44563,359],{"class":264},[212,44565,44566],{"className":468,"code":44451,"language":469,"meta":178,"style":178},[99,44567,44568,44576,44582,44590,44594],{"__ignoreMap":178},[220,44569,44570,44572,44574],{"class":222,"line":223},[220,44571,343],{"class":264},[220,44573,347],{"class":420},[220,44575,359],{"class":264},[220,44577,44578,44580],{"class":222,"line":179},[220,44579,364],{"class":264},[220,44581,19503],{"class":420},[220,44583,44584,44586,44588],{"class":222,"line":389},[220,44585,9635],{"class":226},[220,44587,353],{"class":260},[220,44589,9591],{"class":230},[220,44591,44592],{"class":222,"line":399},[220,44593,1234],{"class":264},[220,44595,44596,44598,44600],{"class":222,"line":644},[220,44597,402],{"class":264},[220,44599,347],{"class":420},[220,44601,359],{"class":264},[212,44603,44605],{"className":251,"code":44604,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DotGrid', props: { color: '#ffffff' } }\n ]\n})\n",[99,44606,44607,44617,44621,44635,44639,44651,44655],{"__ignoreMap":178},[220,44608,44609,44611,44613,44615],{"class":222,"line":223},[220,44610,261],{"class":260},[220,44612,11512],{"class":264},[220,44614,268],{"class":260},[220,44616,4007],{"class":230},[220,44618,44619],{"class":222,"line":179},[220,44620,647],{"emptyLinePlaceholder":194},[220,44622,44623,44625,44627,44629,44631,44633],{"class":222,"line":389},[220,44624,1735],{"class":260},[220,44626,1738],{"class":420},[220,44628,1741],{"class":260},[220,44630,1744],{"class":260},[220,44632,1747],{"class":226},[220,44634,1750],{"class":264},[220,44636,44637],{"class":222,"line":399},[220,44638,1765],{"class":264},[220,44640,44641,44643,44645,44647,44649],{"class":222,"line":644},[220,44642,1770],{"class":264},[220,44644,20056],{"class":230},[220,44646,1776],{"class":264},[220,44648,10169],{"class":230},[220,44650,1782],{"class":264},[220,44652,44653],{"class":222,"line":650},[220,44654,1787],{"class":264},[220,44656,44657],{"class":222,"line":656},[220,44658,1792],{"class":264},[1504,44660,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44662},[44663,44664],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":44429,"description":44437},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44671,"title":44672,"body":44673,"category":32806,"componentType":25883,"description":44680,"extension":191,"meta":45034,"navigation":194,"path":45035,"requiresChild":194,"seo":45036,"stem":45037,"__hash__":45038},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44674,"toc":45030},[44675,44678,44681,44683,44685,44688,44690,45028],[11,44676,44672],{"id":44677},"dropshadow",[15,44679,44680],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31911,44682],{"component":44672},[23,44684,31915],{"id":26533},[31917,44686],{":props":44687},"[{\"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\u002Fvisible the shadow is\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Hide the original layer and show only the shadow\"}]",[23,44689,31923],{"id":31922},[246,44691,44692,44756,44823,44887,44953],{":tabs":1557},[212,44693,44695],{"className":334,"code":44694,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n :intensity=\"0.5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDropShadow>\n\u003C\u002FShader>\n",[99,44696,44697,44705,44712,44720,44728,44732,44740,44748],{"__ignoreMap":178},[220,44698,44699,44701,44703],{"class":222,"line":223},[220,44700,343],{"class":264},[220,44702,347],{"class":346},[220,44704,359],{"class":264},[220,44706,44707,44709],{"class":222,"line":179},[220,44708,364],{"class":264},[220,44710,44711],{"class":346},"DropShadow\n",[220,44713,44714,44716,44718],{"class":222,"line":389},[220,44715,9635],{"class":226},[220,44717,353],{"class":264},[220,44719,19474],{"class":230},[220,44721,44722,44724,44726],{"class":222,"line":399},[220,44723,20371],{"class":226},[220,44725,353],{"class":264},[220,44727,42158],{"class":230},[220,44729,44730],{"class":222,"line":644},[220,44731,31959],{"class":264},[220,44733,44734,44736,44738],{"class":222,"line":650},[220,44735,2550],{"class":264},[220,44737,2553],{"class":346},[220,44739,386],{"class":264},[220,44741,44742,44744,44746],{"class":222,"line":656},[220,44743,2567],{"class":264},[220,44745,44672],{"class":346},[220,44747,359],{"class":264},[220,44749,44750,44752,44754],{"class":222,"line":673},[220,44751,402],{"class":264},[220,44753,347],{"class":346},[220,44755,359],{"class":264},[212,44757,44759],{"className":409,"code":44758,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n intensity={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FDropShadow>\n\u003C\u002FShader>\n",[99,44760,44761,44769,44775,44783,44795,44799,44807,44815],{"__ignoreMap":178},[220,44762,44763,44765,44767],{"class":222,"line":223},[220,44764,343],{"class":264},[220,44766,347],{"class":420},[220,44768,359],{"class":264},[220,44770,44771,44773],{"class":222,"line":179},[220,44772,364],{"class":264},[220,44774,44711],{"class":420},[220,44776,44777,44779,44781],{"class":222,"line":389},[220,44778,9635],{"class":226},[220,44780,353],{"class":260},[220,44782,19474],{"class":230},[220,44784,44785,44787,44789,44791,44793],{"class":222,"line":399},[220,44786,20482],{"class":226},[220,44788,353],{"class":260},[220,44790,743],{"class":264},[220,44792,7754],{"class":420},[220,44794,749],{"class":264},[220,44796,44797],{"class":222,"line":644},[220,44798,31959],{"class":264},[220,44800,44801,44803,44805],{"class":222,"line":650},[220,44802,2550],{"class":264},[220,44804,2553],{"class":420},[220,44806,386],{"class":264},[220,44808,44809,44811,44813],{"class":222,"line":656},[220,44810,2567],{"class":264},[220,44812,44672],{"class":420},[220,44814,359],{"class":264},[220,44816,44817,44819,44821],{"class":222,"line":673},[220,44818,402],{"class":264},[220,44820,347],{"class":420},[220,44822,359],{"class":264},[212,44824,44825],{"className":2844,"code":44758,"language":2846,"meta":178,"style":178},[99,44826,44827,44835,44841,44849,44859,44863,44871,44879],{"__ignoreMap":178},[220,44828,44829,44831,44833],{"class":222,"line":223},[220,44830,343],{"class":264},[220,44832,347],{"class":420},[220,44834,359],{"class":264},[220,44836,44837,44839],{"class":222,"line":179},[220,44838,364],{"class":264},[220,44840,44711],{"class":420},[220,44842,44843,44845,44847],{"class":222,"line":389},[220,44844,9635],{"class":226},[220,44846,353],{"class":264},[220,44848,19474],{"class":230},[220,44850,44851,44853,44855,44857],{"class":222,"line":399},[220,44852,20482],{"class":226},[220,44854,29871],{"class":264},[220,44856,7754],{"class":420},[220,44858,749],{"class":264},[220,44860,44861],{"class":222,"line":644},[220,44862,31959],{"class":264},[220,44864,44865,44867,44869],{"class":222,"line":650},[220,44866,2550],{"class":264},[220,44868,2553],{"class":420},[220,44870,386],{"class":264},[220,44872,44873,44875,44877],{"class":222,"line":656},[220,44874,2567],{"class":264},[220,44876,44672],{"class":420},[220,44878,359],{"class":264},[220,44880,44881,44883,44885],{"class":222,"line":673},[220,44882,402],{"class":264},[220,44884,347],{"class":420},[220,44886,359],{"class":264},[212,44888,44889],{"className":468,"code":44758,"language":469,"meta":178,"style":178},[99,44890,44891,44899,44905,44913,44925,44929,44937,44945],{"__ignoreMap":178},[220,44892,44893,44895,44897],{"class":222,"line":223},[220,44894,343],{"class":264},[220,44896,347],{"class":420},[220,44898,359],{"class":264},[220,44900,44901,44903],{"class":222,"line":179},[220,44902,364],{"class":264},[220,44904,44711],{"class":420},[220,44906,44907,44909,44911],{"class":222,"line":389},[220,44908,9635],{"class":226},[220,44910,353],{"class":260},[220,44912,19474],{"class":230},[220,44914,44915,44917,44919,44921,44923],{"class":222,"line":399},[220,44916,20482],{"class":226},[220,44918,353],{"class":260},[220,44920,743],{"class":264},[220,44922,7754],{"class":420},[220,44924,749],{"class":264},[220,44926,44927],{"class":222,"line":644},[220,44928,31959],{"class":264},[220,44930,44931,44933,44935],{"class":222,"line":650},[220,44932,2550],{"class":264},[220,44934,2553],{"class":420},[220,44936,386],{"class":264},[220,44938,44939,44941,44943],{"class":222,"line":656},[220,44940,2567],{"class":264},[220,44942,44672],{"class":420},[220,44944,359],{"class":264},[220,44946,44947,44949,44951],{"class":222,"line":673},[220,44948,402],{"class":264},[220,44950,347],{"class":420},[220,44952,359],{"class":264},[212,44954,44956],{"className":251,"code":44955,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,44957,44958,44968,44972,44986,44990,45008,45016,45020,45024],{"__ignoreMap":178},[220,44959,44960,44962,44964,44966],{"class":222,"line":223},[220,44961,261],{"class":260},[220,44963,11512],{"class":264},[220,44965,268],{"class":260},[220,44967,4007],{"class":230},[220,44969,44970],{"class":222,"line":179},[220,44971,647],{"emptyLinePlaceholder":194},[220,44973,44974,44976,44978,44980,44982,44984],{"class":222,"line":389},[220,44975,1735],{"class":260},[220,44977,1738],{"class":420},[220,44979,1741],{"class":260},[220,44981,1744],{"class":260},[220,44983,1747],{"class":226},[220,44985,1750],{"class":264},[220,44987,44988],{"class":222,"line":399},[220,44989,1765],{"class":264},[220,44991,44992,44994,44997,44999,45001,45004,45006],{"class":222,"line":644},[220,44993,1770],{"class":264},[220,44995,44996],{"class":230},"'DropShadow'",[220,44998,1776],{"class":264},[220,45000,20034],{"class":230},[220,45002,45003],{"class":264},", intensity: ",[220,45005,7754],{"class":420},[220,45007,7546],{"class":264},[220,45009,45010,45012,45014],{"class":222,"line":650},[220,45011,7014],{"class":264},[220,45013,3206],{"class":230},[220,45015,2465],{"class":264},[220,45017,45018],{"class":222,"line":656},[220,45019,7031],{"class":264},[220,45021,45022],{"class":222,"line":673},[220,45023,1787],{"class":264},[220,45025,45026],{"class":222,"line":682},[220,45027,1792],{"class":264},[1504,45029,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45031},[45032,45033],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44672,"description":44680},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":45040,"title":45041,"body":45042,"category":36368,"componentType":25883,"description":45049,"extension":191,"meta":45310,"navigation":194,"path":45311,"requiresChild":194,"seo":45312,"stem":45313,"__hash__":45314},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":45043,"toc":45306},[45044,45047,45050,45052,45054,45057,45059,45304],[11,45045,45041],{"id":45046},"duotone",[15,45048,45049],{},"Map colors to two tones based on luminance",[31911,45051],{"component":45041},[23,45053,31915],{"id":26533},[31917,45055],{":props":45056},"[{\"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,45058,31923],{"id":31922},[246,45060,45061,45106,45150,45194,45238],{":tabs":1557},[212,45062,45064],{"className":334,"code":45063,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,45065,45066,45074,45082,45090,45098],{"__ignoreMap":178},[220,45067,45068,45070,45072],{"class":222,"line":223},[220,45069,343],{"class":264},[220,45071,347],{"class":346},[220,45073,359],{"class":264},[220,45075,45076,45078,45080],{"class":222,"line":179},[220,45077,364],{"class":264},[220,45079,45041],{"class":346},[220,45081,359],{"class":264},[220,45083,45084,45086,45088],{"class":222,"line":389},[220,45085,2550],{"class":264},[220,45087,2553],{"class":346},[220,45089,386],{"class":264},[220,45091,45092,45094,45096],{"class":222,"line":399},[220,45093,2567],{"class":264},[220,45095,45041],{"class":346},[220,45097,359],{"class":264},[220,45099,45100,45102,45104],{"class":222,"line":644},[220,45101,402],{"class":264},[220,45103,347],{"class":346},[220,45105,359],{"class":264},[212,45107,45108],{"className":409,"code":45063,"language":411,"meta":178,"style":178},[99,45109,45110,45118,45126,45134,45142],{"__ignoreMap":178},[220,45111,45112,45114,45116],{"class":222,"line":223},[220,45113,343],{"class":264},[220,45115,347],{"class":420},[220,45117,359],{"class":264},[220,45119,45120,45122,45124],{"class":222,"line":179},[220,45121,364],{"class":264},[220,45123,45041],{"class":420},[220,45125,359],{"class":264},[220,45127,45128,45130,45132],{"class":222,"line":389},[220,45129,2550],{"class":264},[220,45131,2553],{"class":420},[220,45133,386],{"class":264},[220,45135,45136,45138,45140],{"class":222,"line":399},[220,45137,2567],{"class":264},[220,45139,45041],{"class":420},[220,45141,359],{"class":264},[220,45143,45144,45146,45148],{"class":222,"line":644},[220,45145,402],{"class":264},[220,45147,347],{"class":420},[220,45149,359],{"class":264},[212,45151,45152],{"className":2844,"code":45063,"language":2846,"meta":178,"style":178},[99,45153,45154,45162,45170,45178,45186],{"__ignoreMap":178},[220,45155,45156,45158,45160],{"class":222,"line":223},[220,45157,343],{"class":264},[220,45159,347],{"class":420},[220,45161,359],{"class":264},[220,45163,45164,45166,45168],{"class":222,"line":179},[220,45165,364],{"class":264},[220,45167,45041],{"class":420},[220,45169,359],{"class":264},[220,45171,45172,45174,45176],{"class":222,"line":389},[220,45173,2550],{"class":264},[220,45175,2553],{"class":420},[220,45177,386],{"class":264},[220,45179,45180,45182,45184],{"class":222,"line":399},[220,45181,2567],{"class":264},[220,45183,45041],{"class":420},[220,45185,359],{"class":264},[220,45187,45188,45190,45192],{"class":222,"line":644},[220,45189,402],{"class":264},[220,45191,347],{"class":420},[220,45193,359],{"class":264},[212,45195,45196],{"className":468,"code":45063,"language":469,"meta":178,"style":178},[99,45197,45198,45206,45214,45222,45230],{"__ignoreMap":178},[220,45199,45200,45202,45204],{"class":222,"line":223},[220,45201,343],{"class":264},[220,45203,347],{"class":420},[220,45205,359],{"class":264},[220,45207,45208,45210,45212],{"class":222,"line":179},[220,45209,364],{"class":264},[220,45211,45041],{"class":420},[220,45213,359],{"class":264},[220,45215,45216,45218,45220],{"class":222,"line":389},[220,45217,2550],{"class":264},[220,45219,2553],{"class":420},[220,45221,386],{"class":264},[220,45223,45224,45226,45228],{"class":222,"line":399},[220,45225,2567],{"class":264},[220,45227,45041],{"class":420},[220,45229,359],{"class":264},[220,45231,45232,45234,45236],{"class":222,"line":644},[220,45233,402],{"class":264},[220,45235,347],{"class":420},[220,45237,359],{"class":264},[212,45239,45241],{"className":251,"code":45240,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Duotone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,45242,45243,45253,45257,45271,45275,45284,45292,45296,45300],{"__ignoreMap":178},[220,45244,45245,45247,45249,45251],{"class":222,"line":223},[220,45246,261],{"class":260},[220,45248,11512],{"class":264},[220,45250,268],{"class":260},[220,45252,4007],{"class":230},[220,45254,45255],{"class":222,"line":179},[220,45256,647],{"emptyLinePlaceholder":194},[220,45258,45259,45261,45263,45265,45267,45269],{"class":222,"line":389},[220,45260,1735],{"class":260},[220,45262,1738],{"class":420},[220,45264,1741],{"class":260},[220,45266,1744],{"class":260},[220,45268,1747],{"class":226},[220,45270,1750],{"class":264},[220,45272,45273],{"class":222,"line":399},[220,45274,1765],{"class":264},[220,45276,45277,45279,45282],{"class":222,"line":644},[220,45278,1770],{"class":264},[220,45280,45281],{"class":230},"'Duotone'",[220,45283,7009],{"class":264},[220,45285,45286,45288,45290],{"class":222,"line":650},[220,45287,7014],{"class":264},[220,45289,3206],{"class":230},[220,45291,2465],{"class":264},[220,45293,45294],{"class":222,"line":656},[220,45295,7031],{"class":264},[220,45297,45298],{"class":222,"line":673},[220,45299,1787],{"class":264},[220,45301,45302],{"class":222,"line":682},[220,45303,1792],{"class":264},[1504,45305,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":45307},[45308,45309],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":45041,"description":45049},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":45316,"title":45317,"body":45318,"category":15908,"componentType":25877,"description":45325,"extension":191,"meta":45555,"navigation":194,"path":45556,"requiresChild":32530,"seo":45557,"stem":45558,"__hash__":45559},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":45319,"toc":45551},[45320,45323,45326,45328,45330,45333,45335,45549],[11,45321,45317],{"id":45322},"ellipse",[15,45324,45325],{},"Ellipse with independently adjustable horizontal and vertical radii",[31911,45327],{"component":45317},[23,45329,31915],{"id":26533},[31917,45331],{":props":45332},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,45334,31923],{"id":31922},[246,45336,45337,45377,45415,45453,45491],{":tabs":1557},[212,45338,45340],{"className":334,"code":45339,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,45341,45342,45350,45357,45365,45369],{"__ignoreMap":178},[220,45343,45344,45346,45348],{"class":222,"line":223},[220,45345,343],{"class":264},[220,45347,347],{"class":346},[220,45349,359],{"class":264},[220,45351,45352,45354],{"class":222,"line":179},[220,45353,364],{"class":264},[220,45355,45356],{"class":346},"Ellipse\n",[220,45358,45359,45361,45363],{"class":222,"line":389},[220,45360,9635],{"class":226},[220,45362,353],{"class":264},[220,45364,9591],{"class":230},[220,45366,45367],{"class":222,"line":399},[220,45368,1234],{"class":264},[220,45370,45371,45373,45375],{"class":222,"line":644},[220,45372,402],{"class":264},[220,45374,347],{"class":346},[220,45376,359],{"class":264},[212,45378,45379],{"className":409,"code":45339,"language":411,"meta":178,"style":178},[99,45380,45381,45389,45395,45403,45407],{"__ignoreMap":178},[220,45382,45383,45385,45387],{"class":222,"line":223},[220,45384,343],{"class":264},[220,45386,347],{"class":420},[220,45388,359],{"class":264},[220,45390,45391,45393],{"class":222,"line":179},[220,45392,364],{"class":264},[220,45394,45356],{"class":420},[220,45396,45397,45399,45401],{"class":222,"line":389},[220,45398,9635],{"class":226},[220,45400,353],{"class":260},[220,45402,9591],{"class":230},[220,45404,45405],{"class":222,"line":399},[220,45406,1234],{"class":264},[220,45408,45409,45411,45413],{"class":222,"line":644},[220,45410,402],{"class":264},[220,45412,347],{"class":420},[220,45414,359],{"class":264},[212,45416,45417],{"className":2844,"code":45339,"language":2846,"meta":178,"style":178},[99,45418,45419,45427,45433,45441,45445],{"__ignoreMap":178},[220,45420,45421,45423,45425],{"class":222,"line":223},[220,45422,343],{"class":264},[220,45424,347],{"class":420},[220,45426,359],{"class":264},[220,45428,45429,45431],{"class":222,"line":179},[220,45430,364],{"class":264},[220,45432,45356],{"class":420},[220,45434,45435,45437,45439],{"class":222,"line":389},[220,45436,9635],{"class":226},[220,45438,353],{"class":264},[220,45440,9591],{"class":230},[220,45442,45443],{"class":222,"line":399},[220,45444,1234],{"class":264},[220,45446,45447,45449,45451],{"class":222,"line":644},[220,45448,402],{"class":264},[220,45450,347],{"class":420},[220,45452,359],{"class":264},[212,45454,45455],{"className":468,"code":45339,"language":469,"meta":178,"style":178},[99,45456,45457,45465,45471,45479,45483],{"__ignoreMap":178},[220,45458,45459,45461,45463],{"class":222,"line":223},[220,45460,343],{"class":264},[220,45462,347],{"class":420},[220,45464,359],{"class":264},[220,45466,45467,45469],{"class":222,"line":179},[220,45468,364],{"class":264},[220,45470,45356],{"class":420},[220,45472,45473,45475,45477],{"class":222,"line":389},[220,45474,9635],{"class":226},[220,45476,353],{"class":260},[220,45478,9591],{"class":230},[220,45480,45481],{"class":222,"line":399},[220,45482,1234],{"class":264},[220,45484,45485,45487,45489],{"class":222,"line":644},[220,45486,402],{"class":264},[220,45488,347],{"class":420},[220,45490,359],{"class":264},[212,45492,45494],{"className":251,"code":45493,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ellipse', props: { color: '#ffffff' } }\n ]\n})\n",[99,45495,45496,45506,45510,45524,45528,45541,45545],{"__ignoreMap":178},[220,45497,45498,45500,45502,45504],{"class":222,"line":223},[220,45499,261],{"class":260},[220,45501,11512],{"class":264},[220,45503,268],{"class":260},[220,45505,4007],{"class":230},[220,45507,45508],{"class":222,"line":179},[220,45509,647],{"emptyLinePlaceholder":194},[220,45511,45512,45514,45516,45518,45520,45522],{"class":222,"line":389},[220,45513,1735],{"class":260},[220,45515,1738],{"class":420},[220,45517,1741],{"class":260},[220,45519,1744],{"class":260},[220,45521,1747],{"class":226},[220,45523,1750],{"class":264},[220,45525,45526],{"class":222,"line":399},[220,45527,1765],{"class":264},[220,45529,45530,45532,45535,45537,45539],{"class":222,"line":644},[220,45531,1770],{"class":264},[220,45533,45534],{"class":230},"'Ellipse'",[220,45536,1776],{"class":264},[220,45538,10169],{"class":230},[220,45540,1782],{"class":264},[220,45542,45543],{"class":222,"line":650},[220,45544,1787],{"class":264},[220,45546,45547],{"class":222,"line":656},[220,45548,1792],{"class":264},[1504,45550,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45552},[45553,45554],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":45317,"description":45325},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":45561,"title":20984,"body":45562,"category":36569,"componentType":25883,"description":45569,"extension":191,"meta":45829,"navigation":194,"path":45830,"requiresChild":194,"seo":45831,"stem":45832,"__hash__":45833},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":45563,"toc":45825},[45564,45567,45570,45572,45574,45577,45579,45823],[11,45565,20984],{"id":45566},"emboss",[15,45568,45569],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31911,45571],{"component":20984},[23,45573,31915],{"id":26533},[31917,45575],{":props":45576},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the embossed shape in degrees\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,45578,31923],{"id":31922},[246,45580,45581,45626,45670,45714,45758],{":tabs":1557},[212,45582,45584],{"className":334,"code":45583,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,45585,45586,45594,45602,45610,45618],{"__ignoreMap":178},[220,45587,45588,45590,45592],{"class":222,"line":223},[220,45589,343],{"class":264},[220,45591,347],{"class":346},[220,45593,359],{"class":264},[220,45595,45596,45598,45600],{"class":222,"line":179},[220,45597,364],{"class":264},[220,45599,20984],{"class":346},[220,45601,359],{"class":264},[220,45603,45604,45606,45608],{"class":222,"line":389},[220,45605,2550],{"class":264},[220,45607,2553],{"class":346},[220,45609,386],{"class":264},[220,45611,45612,45614,45616],{"class":222,"line":399},[220,45613,2567],{"class":264},[220,45615,20984],{"class":346},[220,45617,359],{"class":264},[220,45619,45620,45622,45624],{"class":222,"line":644},[220,45621,402],{"class":264},[220,45623,347],{"class":346},[220,45625,359],{"class":264},[212,45627,45628],{"className":409,"code":45583,"language":411,"meta":178,"style":178},[99,45629,45630,45638,45646,45654,45662],{"__ignoreMap":178},[220,45631,45632,45634,45636],{"class":222,"line":223},[220,45633,343],{"class":264},[220,45635,347],{"class":420},[220,45637,359],{"class":264},[220,45639,45640,45642,45644],{"class":222,"line":179},[220,45641,364],{"class":264},[220,45643,20984],{"class":420},[220,45645,359],{"class":264},[220,45647,45648,45650,45652],{"class":222,"line":389},[220,45649,2550],{"class":264},[220,45651,2553],{"class":420},[220,45653,386],{"class":264},[220,45655,45656,45658,45660],{"class":222,"line":399},[220,45657,2567],{"class":264},[220,45659,20984],{"class":420},[220,45661,359],{"class":264},[220,45663,45664,45666,45668],{"class":222,"line":644},[220,45665,402],{"class":264},[220,45667,347],{"class":420},[220,45669,359],{"class":264},[212,45671,45672],{"className":2844,"code":45583,"language":2846,"meta":178,"style":178},[99,45673,45674,45682,45690,45698,45706],{"__ignoreMap":178},[220,45675,45676,45678,45680],{"class":222,"line":223},[220,45677,343],{"class":264},[220,45679,347],{"class":420},[220,45681,359],{"class":264},[220,45683,45684,45686,45688],{"class":222,"line":179},[220,45685,364],{"class":264},[220,45687,20984],{"class":420},[220,45689,359],{"class":264},[220,45691,45692,45694,45696],{"class":222,"line":389},[220,45693,2550],{"class":264},[220,45695,2553],{"class":420},[220,45697,386],{"class":264},[220,45699,45700,45702,45704],{"class":222,"line":399},[220,45701,2567],{"class":264},[220,45703,20984],{"class":420},[220,45705,359],{"class":264},[220,45707,45708,45710,45712],{"class":222,"line":644},[220,45709,402],{"class":264},[220,45711,347],{"class":420},[220,45713,359],{"class":264},[212,45715,45716],{"className":468,"code":45583,"language":469,"meta":178,"style":178},[99,45717,45718,45726,45734,45742,45750],{"__ignoreMap":178},[220,45719,45720,45722,45724],{"class":222,"line":223},[220,45721,343],{"class":264},[220,45723,347],{"class":420},[220,45725,359],{"class":264},[220,45727,45728,45730,45732],{"class":222,"line":179},[220,45729,364],{"class":264},[220,45731,20984],{"class":420},[220,45733,359],{"class":264},[220,45735,45736,45738,45740],{"class":222,"line":389},[220,45737,2550],{"class":264},[220,45739,2553],{"class":420},[220,45741,386],{"class":264},[220,45743,45744,45746,45748],{"class":222,"line":399},[220,45745,2567],{"class":264},[220,45747,20984],{"class":420},[220,45749,359],{"class":264},[220,45751,45752,45754,45756],{"class":222,"line":644},[220,45753,402],{"class":264},[220,45755,347],{"class":420},[220,45757,359],{"class":264},[212,45759,45761],{"className":251,"code":45760,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Emboss', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,45762,45763,45773,45777,45791,45795,45803,45811,45815,45819],{"__ignoreMap":178},[220,45764,45765,45767,45769,45771],{"class":222,"line":223},[220,45766,261],{"class":260},[220,45768,11512],{"class":264},[220,45770,268],{"class":260},[220,45772,4007],{"class":230},[220,45774,45775],{"class":222,"line":179},[220,45776,647],{"emptyLinePlaceholder":194},[220,45778,45779,45781,45783,45785,45787,45789],{"class":222,"line":389},[220,45780,1735],{"class":260},[220,45782,1738],{"class":420},[220,45784,1741],{"class":260},[220,45786,1744],{"class":260},[220,45788,1747],{"class":226},[220,45790,1750],{"class":264},[220,45792,45793],{"class":222,"line":399},[220,45794,1765],{"class":264},[220,45796,45797,45799,45801],{"class":222,"line":644},[220,45798,1770],{"class":264},[220,45800,21647],{"class":230},[220,45802,7009],{"class":264},[220,45804,45805,45807,45809],{"class":222,"line":650},[220,45806,7014],{"class":264},[220,45808,3206],{"class":230},[220,45810,2465],{"class":264},[220,45812,45813],{"class":222,"line":656},[220,45814,7031],{"class":264},[220,45816,45817],{"class":222,"line":673},[220,45818,1787],{"class":264},[220,45820,45821],{"class":222,"line":682},[220,45822,1792],{"class":264},[1504,45824,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":45826},[45827,45828],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20984,"description":45569},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":45835,"title":45836,"body":45837,"category":32806,"componentType":25883,"description":45844,"extension":191,"meta":46105,"navigation":194,"path":46106,"requiresChild":194,"seo":46107,"stem":46108,"__hash__":46109},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":45838,"toc":46101},[45839,45842,45845,45847,45849,45852,45854,46099],[11,45840,45836],{"id":45841},"engraving",[15,45843,45844],{},"Copper-plate line engraving — the image is redrawn as flowing line work whose weight swells with darkness, lines displaced by the form like a banknote portrait: a single plate, cross-hatched shadow plates, or one continuous spiral cut",[31911,45846],{"component":45836},[23,45848,31915],{"id":26533},[31917,45850],{":props":45851},"[{\"name\":\"style\",\"type\":\"\\\"line\\\" | \\\"crosshatch\\\" | \\\"spiral\\\"\",\"default\":\"crosshatch\",\"description\":\"The engraving cut: a single line plate, cross-hatched plates building up the shadows, or one continuous spiral\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Line density — how many engraved lines span the height of the canvas\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Direction of the base line work (in degrees)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center the spiral coils outward from\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How strongly the image brightness displaces the lines — the engraved 'lines climb over the form' effect\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Organic meander of the line work, like a hand-pulled burin stroke\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1.15\",\"description\":\"Tonal contrast applied before the lines are cut — higher pushes mid-tones toward pure line or pure paper\"},{\"name\":\"inkColor\",\"type\":\"string\",\"default\":\"#1a1410\",\"description\":\"Color of the engraved ink\"},{\"name\":\"paperColor\",\"type\":\"string\",\"default\":\"#f4eee2\",\"description\":\"Paper color shown between the lines\"}]",[23,45853,31923],{"id":31922},[246,45855,45856,45901,45945,45989,46033],{":tabs":1557},[212,45857,45859],{"className":334,"code":45858,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,45860,45861,45869,45877,45885,45893],{"__ignoreMap":178},[220,45862,45863,45865,45867],{"class":222,"line":223},[220,45864,343],{"class":264},[220,45866,347],{"class":346},[220,45868,359],{"class":264},[220,45870,45871,45873,45875],{"class":222,"line":179},[220,45872,364],{"class":264},[220,45874,45836],{"class":346},[220,45876,359],{"class":264},[220,45878,45879,45881,45883],{"class":222,"line":389},[220,45880,2550],{"class":264},[220,45882,2553],{"class":346},[220,45884,386],{"class":264},[220,45886,45887,45889,45891],{"class":222,"line":399},[220,45888,2567],{"class":264},[220,45890,45836],{"class":346},[220,45892,359],{"class":264},[220,45894,45895,45897,45899],{"class":222,"line":644},[220,45896,402],{"class":264},[220,45898,347],{"class":346},[220,45900,359],{"class":264},[212,45902,45903],{"className":409,"code":45858,"language":411,"meta":178,"style":178},[99,45904,45905,45913,45921,45929,45937],{"__ignoreMap":178},[220,45906,45907,45909,45911],{"class":222,"line":223},[220,45908,343],{"class":264},[220,45910,347],{"class":420},[220,45912,359],{"class":264},[220,45914,45915,45917,45919],{"class":222,"line":179},[220,45916,364],{"class":264},[220,45918,45836],{"class":420},[220,45920,359],{"class":264},[220,45922,45923,45925,45927],{"class":222,"line":389},[220,45924,2550],{"class":264},[220,45926,2553],{"class":420},[220,45928,386],{"class":264},[220,45930,45931,45933,45935],{"class":222,"line":399},[220,45932,2567],{"class":264},[220,45934,45836],{"class":420},[220,45936,359],{"class":264},[220,45938,45939,45941,45943],{"class":222,"line":644},[220,45940,402],{"class":264},[220,45942,347],{"class":420},[220,45944,359],{"class":264},[212,45946,45947],{"className":2844,"code":45858,"language":2846,"meta":178,"style":178},[99,45948,45949,45957,45965,45973,45981],{"__ignoreMap":178},[220,45950,45951,45953,45955],{"class":222,"line":223},[220,45952,343],{"class":264},[220,45954,347],{"class":420},[220,45956,359],{"class":264},[220,45958,45959,45961,45963],{"class":222,"line":179},[220,45960,364],{"class":264},[220,45962,45836],{"class":420},[220,45964,359],{"class":264},[220,45966,45967,45969,45971],{"class":222,"line":389},[220,45968,2550],{"class":264},[220,45970,2553],{"class":420},[220,45972,386],{"class":264},[220,45974,45975,45977,45979],{"class":222,"line":399},[220,45976,2567],{"class":264},[220,45978,45836],{"class":420},[220,45980,359],{"class":264},[220,45982,45983,45985,45987],{"class":222,"line":644},[220,45984,402],{"class":264},[220,45986,347],{"class":420},[220,45988,359],{"class":264},[212,45990,45991],{"className":468,"code":45858,"language":469,"meta":178,"style":178},[99,45992,45993,46001,46009,46017,46025],{"__ignoreMap":178},[220,45994,45995,45997,45999],{"class":222,"line":223},[220,45996,343],{"class":264},[220,45998,347],{"class":420},[220,46000,359],{"class":264},[220,46002,46003,46005,46007],{"class":222,"line":179},[220,46004,364],{"class":264},[220,46006,45836],{"class":420},[220,46008,359],{"class":264},[220,46010,46011,46013,46015],{"class":222,"line":389},[220,46012,2550],{"class":264},[220,46014,2553],{"class":420},[220,46016,386],{"class":264},[220,46018,46019,46021,46023],{"class":222,"line":399},[220,46020,2567],{"class":264},[220,46022,45836],{"class":420},[220,46024,359],{"class":264},[220,46026,46027,46029,46031],{"class":222,"line":644},[220,46028,402],{"class":264},[220,46030,347],{"class":420},[220,46032,359],{"class":264},[212,46034,46036],{"className":251,"code":46035,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Engraving', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,46037,46038,46048,46052,46066,46070,46079,46087,46091,46095],{"__ignoreMap":178},[220,46039,46040,46042,46044,46046],{"class":222,"line":223},[220,46041,261],{"class":260},[220,46043,11512],{"class":264},[220,46045,268],{"class":260},[220,46047,4007],{"class":230},[220,46049,46050],{"class":222,"line":179},[220,46051,647],{"emptyLinePlaceholder":194},[220,46053,46054,46056,46058,46060,46062,46064],{"class":222,"line":389},[220,46055,1735],{"class":260},[220,46057,1738],{"class":420},[220,46059,1741],{"class":260},[220,46061,1744],{"class":260},[220,46063,1747],{"class":226},[220,46065,1750],{"class":264},[220,46067,46068],{"class":222,"line":399},[220,46069,1765],{"class":264},[220,46071,46072,46074,46077],{"class":222,"line":644},[220,46073,1770],{"class":264},[220,46075,46076],{"class":230},"'Engraving'",[220,46078,7009],{"class":264},[220,46080,46081,46083,46085],{"class":222,"line":650},[220,46082,7014],{"class":264},[220,46084,3206],{"class":230},[220,46086,2465],{"class":264},[220,46088,46089],{"class":222,"line":656},[220,46090,7031],{"class":264},[220,46092,46093],{"class":222,"line":673},[220,46094,1787],{"class":264},[220,46096,46097],{"class":222,"line":682},[220,46098,1792],{"class":264},[1504,46100,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46102},[46103,46104],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":45836,"description":45844},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":46111,"title":46112,"body":46113,"category":33063,"componentType":25877,"description":46120,"extension":191,"meta":46305,"navigation":194,"path":46306,"requiresChild":32530,"seo":46307,"stem":46308,"__hash__":46309},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":46114,"toc":46301},[46115,46118,46121,46123,46125,46128,46130,46299],[11,46116,46112],{"id":46117},"erosionnoise",[15,46119,46120],{},"Branching, hydraulic-erosion ridges carved into noise",[31911,46122],{"component":46112},[23,46124,31915],{"id":26533},[31917,46126],{":props":46127},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[23,46129,31923],{"id":31922},[246,46131,46132,46161,46189,46217,46245],{":tabs":1557},[212,46133,46135],{"className":334,"code":46134,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,46136,46137,46145,46153],{"__ignoreMap":178},[220,46138,46139,46141,46143],{"class":222,"line":223},[220,46140,343],{"class":264},[220,46142,347],{"class":346},[220,46144,359],{"class":264},[220,46146,46147,46149,46151],{"class":222,"line":179},[220,46148,364],{"class":264},[220,46150,46112],{"class":346},[220,46152,386],{"class":264},[220,46154,46155,46157,46159],{"class":222,"line":389},[220,46156,402],{"class":264},[220,46158,347],{"class":346},[220,46160,359],{"class":264},[212,46162,46163],{"className":409,"code":46134,"language":411,"meta":178,"style":178},[99,46164,46165,46173,46181],{"__ignoreMap":178},[220,46166,46167,46169,46171],{"class":222,"line":223},[220,46168,343],{"class":264},[220,46170,347],{"class":420},[220,46172,359],{"class":264},[220,46174,46175,46177,46179],{"class":222,"line":179},[220,46176,364],{"class":264},[220,46178,46112],{"class":420},[220,46180,386],{"class":264},[220,46182,46183,46185,46187],{"class":222,"line":389},[220,46184,402],{"class":264},[220,46186,347],{"class":420},[220,46188,359],{"class":264},[212,46190,46191],{"className":2844,"code":46134,"language":2846,"meta":178,"style":178},[99,46192,46193,46201,46209],{"__ignoreMap":178},[220,46194,46195,46197,46199],{"class":222,"line":223},[220,46196,343],{"class":264},[220,46198,347],{"class":420},[220,46200,359],{"class":264},[220,46202,46203,46205,46207],{"class":222,"line":179},[220,46204,364],{"class":264},[220,46206,46112],{"class":420},[220,46208,386],{"class":264},[220,46210,46211,46213,46215],{"class":222,"line":389},[220,46212,402],{"class":264},[220,46214,347],{"class":420},[220,46216,359],{"class":264},[212,46218,46219],{"className":468,"code":46134,"language":469,"meta":178,"style":178},[99,46220,46221,46229,46237],{"__ignoreMap":178},[220,46222,46223,46225,46227],{"class":222,"line":223},[220,46224,343],{"class":264},[220,46226,347],{"class":420},[220,46228,359],{"class":264},[220,46230,46231,46233,46235],{"class":222,"line":179},[220,46232,364],{"class":264},[220,46234,46112],{"class":420},[220,46236,386],{"class":264},[220,46238,46239,46241,46243],{"class":222,"line":389},[220,46240,402],{"class":264},[220,46242,347],{"class":420},[220,46244,359],{"class":264},[212,46246,46248],{"className":251,"code":46247,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ErosionNoise', props: {} }\n ]\n})\n",[99,46249,46250,46260,46264,46278,46282,46291,46295],{"__ignoreMap":178},[220,46251,46252,46254,46256,46258],{"class":222,"line":223},[220,46253,261],{"class":260},[220,46255,11512],{"class":264},[220,46257,268],{"class":260},[220,46259,4007],{"class":230},[220,46261,46262],{"class":222,"line":179},[220,46263,647],{"emptyLinePlaceholder":194},[220,46265,46266,46268,46270,46272,46274,46276],{"class":222,"line":389},[220,46267,1735],{"class":260},[220,46269,1738],{"class":420},[220,46271,1741],{"class":260},[220,46273,1744],{"class":260},[220,46275,1747],{"class":226},[220,46277,1750],{"class":264},[220,46279,46280],{"class":222,"line":399},[220,46281,1765],{"class":264},[220,46283,46284,46286,46289],{"class":222,"line":644},[220,46285,1770],{"class":264},[220,46287,46288],{"class":230},"'ErosionNoise'",[220,46290,2465],{"class":264},[220,46292,46293],{"class":222,"line":650},[220,46294,1787],{"class":264},[220,46296,46297],{"class":222,"line":656},[220,46298,1792],{"class":264},[1504,46300,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46302},[46303,46304],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":46112,"description":46120},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":46311,"title":46312,"body":46313,"category":36368,"componentType":25883,"description":46320,"extension":191,"meta":46581,"navigation":194,"path":46582,"requiresChild":194,"seo":46583,"stem":46584,"__hash__":46585},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":46314,"toc":46577},[46315,46318,46321,46323,46325,46328,46330,46575],[11,46316,46312],{"id":46317},"exposure",[15,46319,46320],{},"Multiplicative exposure (gain) on the child. Unlike additive brightness, it scales values around black — blacks stay black while highlights can be pushed past 1.0 to feed HDR bloom and tone-mapping roll-off. Pointwise, so no extra render pass is needed.",[31911,46322],{"component":46312},[23,46324,31915],{"id":26533},[31917,46326],{":props":46327},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,46329,31923],{"id":31922},[246,46331,46332,46377,46421,46465,46509],{":tabs":1557},[212,46333,46335],{"className":334,"code":46334,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,46336,46337,46345,46353,46361,46369],{"__ignoreMap":178},[220,46338,46339,46341,46343],{"class":222,"line":223},[220,46340,343],{"class":264},[220,46342,347],{"class":346},[220,46344,359],{"class":264},[220,46346,46347,46349,46351],{"class":222,"line":179},[220,46348,364],{"class":264},[220,46350,46312],{"class":346},[220,46352,359],{"class":264},[220,46354,46355,46357,46359],{"class":222,"line":389},[220,46356,2550],{"class":264},[220,46358,2553],{"class":346},[220,46360,386],{"class":264},[220,46362,46363,46365,46367],{"class":222,"line":399},[220,46364,2567],{"class":264},[220,46366,46312],{"class":346},[220,46368,359],{"class":264},[220,46370,46371,46373,46375],{"class":222,"line":644},[220,46372,402],{"class":264},[220,46374,347],{"class":346},[220,46376,359],{"class":264},[212,46378,46379],{"className":409,"code":46334,"language":411,"meta":178,"style":178},[99,46380,46381,46389,46397,46405,46413],{"__ignoreMap":178},[220,46382,46383,46385,46387],{"class":222,"line":223},[220,46384,343],{"class":264},[220,46386,347],{"class":420},[220,46388,359],{"class":264},[220,46390,46391,46393,46395],{"class":222,"line":179},[220,46392,364],{"class":264},[220,46394,46312],{"class":420},[220,46396,359],{"class":264},[220,46398,46399,46401,46403],{"class":222,"line":389},[220,46400,2550],{"class":264},[220,46402,2553],{"class":420},[220,46404,386],{"class":264},[220,46406,46407,46409,46411],{"class":222,"line":399},[220,46408,2567],{"class":264},[220,46410,46312],{"class":420},[220,46412,359],{"class":264},[220,46414,46415,46417,46419],{"class":222,"line":644},[220,46416,402],{"class":264},[220,46418,347],{"class":420},[220,46420,359],{"class":264},[212,46422,46423],{"className":2844,"code":46334,"language":2846,"meta":178,"style":178},[99,46424,46425,46433,46441,46449,46457],{"__ignoreMap":178},[220,46426,46427,46429,46431],{"class":222,"line":223},[220,46428,343],{"class":264},[220,46430,347],{"class":420},[220,46432,359],{"class":264},[220,46434,46435,46437,46439],{"class":222,"line":179},[220,46436,364],{"class":264},[220,46438,46312],{"class":420},[220,46440,359],{"class":264},[220,46442,46443,46445,46447],{"class":222,"line":389},[220,46444,2550],{"class":264},[220,46446,2553],{"class":420},[220,46448,386],{"class":264},[220,46450,46451,46453,46455],{"class":222,"line":399},[220,46452,2567],{"class":264},[220,46454,46312],{"class":420},[220,46456,359],{"class":264},[220,46458,46459,46461,46463],{"class":222,"line":644},[220,46460,402],{"class":264},[220,46462,347],{"class":420},[220,46464,359],{"class":264},[212,46466,46467],{"className":468,"code":46334,"language":469,"meta":178,"style":178},[99,46468,46469,46477,46485,46493,46501],{"__ignoreMap":178},[220,46470,46471,46473,46475],{"class":222,"line":223},[220,46472,343],{"class":264},[220,46474,347],{"class":420},[220,46476,359],{"class":264},[220,46478,46479,46481,46483],{"class":222,"line":179},[220,46480,364],{"class":264},[220,46482,46312],{"class":420},[220,46484,359],{"class":264},[220,46486,46487,46489,46491],{"class":222,"line":389},[220,46488,2550],{"class":264},[220,46490,2553],{"class":420},[220,46492,386],{"class":264},[220,46494,46495,46497,46499],{"class":222,"line":399},[220,46496,2567],{"class":264},[220,46498,46312],{"class":420},[220,46500,359],{"class":264},[220,46502,46503,46505,46507],{"class":222,"line":644},[220,46504,402],{"class":264},[220,46506,347],{"class":420},[220,46508,359],{"class":264},[212,46510,46512],{"className":251,"code":46511,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Exposure', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,46513,46514,46524,46528,46542,46546,46555,46563,46567,46571],{"__ignoreMap":178},[220,46515,46516,46518,46520,46522],{"class":222,"line":223},[220,46517,261],{"class":260},[220,46519,11512],{"class":264},[220,46521,268],{"class":260},[220,46523,4007],{"class":230},[220,46525,46526],{"class":222,"line":179},[220,46527,647],{"emptyLinePlaceholder":194},[220,46529,46530,46532,46534,46536,46538,46540],{"class":222,"line":389},[220,46531,1735],{"class":260},[220,46533,1738],{"class":420},[220,46535,1741],{"class":260},[220,46537,1744],{"class":260},[220,46539,1747],{"class":226},[220,46541,1750],{"class":264},[220,46543,46544],{"class":222,"line":399},[220,46545,1765],{"class":264},[220,46547,46548,46550,46553],{"class":222,"line":644},[220,46549,1770],{"class":264},[220,46551,46552],{"class":230},"'Exposure'",[220,46554,7009],{"class":264},[220,46556,46557,46559,46561],{"class":222,"line":650},[220,46558,7014],{"class":264},[220,46560,3206],{"class":230},[220,46562,2465],{"class":264},[220,46564,46565],{"class":222,"line":656},[220,46566,7031],{"class":264},[220,46568,46569],{"class":222,"line":673},[220,46570,1787],{"class":264},[220,46572,46573],{"class":222,"line":682},[220,46574,1792],{"class":264},[1504,46576,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46578},[46579,46580],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":46312,"description":46320},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":46587,"title":46588,"body":46589,"category":33063,"componentType":25877,"description":46596,"extension":191,"meta":46781,"navigation":194,"path":46782,"requiresChild":32530,"seo":46783,"stem":46784,"__hash__":46785},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":46590,"toc":46777},[46591,46594,46597,46599,46601,46604,46606,46775],[11,46592,46588],{"id":46593},"fallinglines",[15,46595,46596],{},"Directional falling lines with a leading-to-trailing color fade",[31911,46598],{"component":46588},[23,46600,31915],{"id":26533},[31917,46602],{":props":46603},"[{\"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\u002FcolorB, 1=all leading\u002FcolorA)\"},{\"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\u002Fsquare, 1=fully rounded cap)\"}]",[23,46605,31923],{"id":31922},[246,46607,46608,46637,46665,46693,46721],{":tabs":1557},[212,46609,46611],{"className":334,"code":46610,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,46612,46613,46621,46629],{"__ignoreMap":178},[220,46614,46615,46617,46619],{"class":222,"line":223},[220,46616,343],{"class":264},[220,46618,347],{"class":346},[220,46620,359],{"class":264},[220,46622,46623,46625,46627],{"class":222,"line":179},[220,46624,364],{"class":264},[220,46626,46588],{"class":346},[220,46628,386],{"class":264},[220,46630,46631,46633,46635],{"class":222,"line":389},[220,46632,402],{"class":264},[220,46634,347],{"class":346},[220,46636,359],{"class":264},[212,46638,46639],{"className":409,"code":46610,"language":411,"meta":178,"style":178},[99,46640,46641,46649,46657],{"__ignoreMap":178},[220,46642,46643,46645,46647],{"class":222,"line":223},[220,46644,343],{"class":264},[220,46646,347],{"class":420},[220,46648,359],{"class":264},[220,46650,46651,46653,46655],{"class":222,"line":179},[220,46652,364],{"class":264},[220,46654,46588],{"class":420},[220,46656,386],{"class":264},[220,46658,46659,46661,46663],{"class":222,"line":389},[220,46660,402],{"class":264},[220,46662,347],{"class":420},[220,46664,359],{"class":264},[212,46666,46667],{"className":2844,"code":46610,"language":2846,"meta":178,"style":178},[99,46668,46669,46677,46685],{"__ignoreMap":178},[220,46670,46671,46673,46675],{"class":222,"line":223},[220,46672,343],{"class":264},[220,46674,347],{"class":420},[220,46676,359],{"class":264},[220,46678,46679,46681,46683],{"class":222,"line":179},[220,46680,364],{"class":264},[220,46682,46588],{"class":420},[220,46684,386],{"class":264},[220,46686,46687,46689,46691],{"class":222,"line":389},[220,46688,402],{"class":264},[220,46690,347],{"class":420},[220,46692,359],{"class":264},[212,46694,46695],{"className":468,"code":46610,"language":469,"meta":178,"style":178},[99,46696,46697,46705,46713],{"__ignoreMap":178},[220,46698,46699,46701,46703],{"class":222,"line":223},[220,46700,343],{"class":264},[220,46702,347],{"class":420},[220,46704,359],{"class":264},[220,46706,46707,46709,46711],{"class":222,"line":179},[220,46708,364],{"class":264},[220,46710,46588],{"class":420},[220,46712,386],{"class":264},[220,46714,46715,46717,46719],{"class":222,"line":389},[220,46716,402],{"class":264},[220,46718,347],{"class":420},[220,46720,359],{"class":264},[212,46722,46724],{"className":251,"code":46723,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FallingLines', props: {} }\n ]\n})\n",[99,46725,46726,46736,46740,46754,46758,46767,46771],{"__ignoreMap":178},[220,46727,46728,46730,46732,46734],{"class":222,"line":223},[220,46729,261],{"class":260},[220,46731,11512],{"class":264},[220,46733,268],{"class":260},[220,46735,4007],{"class":230},[220,46737,46738],{"class":222,"line":179},[220,46739,647],{"emptyLinePlaceholder":194},[220,46741,46742,46744,46746,46748,46750,46752],{"class":222,"line":389},[220,46743,1735],{"class":260},[220,46745,1738],{"class":420},[220,46747,1741],{"class":260},[220,46749,1744],{"class":260},[220,46751,1747],{"class":226},[220,46753,1750],{"class":264},[220,46755,46756],{"class":222,"line":399},[220,46757,1765],{"class":264},[220,46759,46760,46762,46765],{"class":222,"line":644},[220,46761,1770],{"class":264},[220,46763,46764],{"class":230},"'FallingLines'",[220,46766,2465],{"class":264},[220,46768,46769],{"class":222,"line":650},[220,46770,1787],{"class":264},[220,46772,46773],{"class":222,"line":656},[220,46774,1792],{"class":264},[1504,46776,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":46778},[46779,46780],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":46588,"description":46596},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46787,"title":46788,"body":46789,"category":32806,"componentType":25883,"description":46796,"extension":191,"meta":47057,"navigation":194,"path":47058,"requiresChild":194,"seo":47059,"stem":47060,"__hash__":47061},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46790,"toc":47053},[46791,46794,46797,46799,46801,46804,46806,47051],[11,46792,46788],{"id":46793},"filmgrain",[15,46795,46796],{},"Analog film grain texture overlay, weighted toward darker areas",[31911,46798],{"component":46788},[23,46800,31915],{"id":26533},[31917,46802],{":props":46803},"[{\"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,46805,31923],{"id":31922},[246,46807,46808,46853,46897,46941,46985],{":tabs":1557},[212,46809,46811],{"className":334,"code":46810,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,46812,46813,46821,46829,46837,46845],{"__ignoreMap":178},[220,46814,46815,46817,46819],{"class":222,"line":223},[220,46816,343],{"class":264},[220,46818,347],{"class":346},[220,46820,359],{"class":264},[220,46822,46823,46825,46827],{"class":222,"line":179},[220,46824,364],{"class":264},[220,46826,46788],{"class":346},[220,46828,359],{"class":264},[220,46830,46831,46833,46835],{"class":222,"line":389},[220,46832,2550],{"class":264},[220,46834,2553],{"class":346},[220,46836,386],{"class":264},[220,46838,46839,46841,46843],{"class":222,"line":399},[220,46840,2567],{"class":264},[220,46842,46788],{"class":346},[220,46844,359],{"class":264},[220,46846,46847,46849,46851],{"class":222,"line":644},[220,46848,402],{"class":264},[220,46850,347],{"class":346},[220,46852,359],{"class":264},[212,46854,46855],{"className":409,"code":46810,"language":411,"meta":178,"style":178},[99,46856,46857,46865,46873,46881,46889],{"__ignoreMap":178},[220,46858,46859,46861,46863],{"class":222,"line":223},[220,46860,343],{"class":264},[220,46862,347],{"class":420},[220,46864,359],{"class":264},[220,46866,46867,46869,46871],{"class":222,"line":179},[220,46868,364],{"class":264},[220,46870,46788],{"class":420},[220,46872,359],{"class":264},[220,46874,46875,46877,46879],{"class":222,"line":389},[220,46876,2550],{"class":264},[220,46878,2553],{"class":420},[220,46880,386],{"class":264},[220,46882,46883,46885,46887],{"class":222,"line":399},[220,46884,2567],{"class":264},[220,46886,46788],{"class":420},[220,46888,359],{"class":264},[220,46890,46891,46893,46895],{"class":222,"line":644},[220,46892,402],{"class":264},[220,46894,347],{"class":420},[220,46896,359],{"class":264},[212,46898,46899],{"className":2844,"code":46810,"language":2846,"meta":178,"style":178},[99,46900,46901,46909,46917,46925,46933],{"__ignoreMap":178},[220,46902,46903,46905,46907],{"class":222,"line":223},[220,46904,343],{"class":264},[220,46906,347],{"class":420},[220,46908,359],{"class":264},[220,46910,46911,46913,46915],{"class":222,"line":179},[220,46912,364],{"class":264},[220,46914,46788],{"class":420},[220,46916,359],{"class":264},[220,46918,46919,46921,46923],{"class":222,"line":389},[220,46920,2550],{"class":264},[220,46922,2553],{"class":420},[220,46924,386],{"class":264},[220,46926,46927,46929,46931],{"class":222,"line":399},[220,46928,2567],{"class":264},[220,46930,46788],{"class":420},[220,46932,359],{"class":264},[220,46934,46935,46937,46939],{"class":222,"line":644},[220,46936,402],{"class":264},[220,46938,347],{"class":420},[220,46940,359],{"class":264},[212,46942,46943],{"className":468,"code":46810,"language":469,"meta":178,"style":178},[99,46944,46945,46953,46961,46969,46977],{"__ignoreMap":178},[220,46946,46947,46949,46951],{"class":222,"line":223},[220,46948,343],{"class":264},[220,46950,347],{"class":420},[220,46952,359],{"class":264},[220,46954,46955,46957,46959],{"class":222,"line":179},[220,46956,364],{"class":264},[220,46958,46788],{"class":420},[220,46960,359],{"class":264},[220,46962,46963,46965,46967],{"class":222,"line":389},[220,46964,2550],{"class":264},[220,46966,2553],{"class":420},[220,46968,386],{"class":264},[220,46970,46971,46973,46975],{"class":222,"line":399},[220,46972,2567],{"class":264},[220,46974,46788],{"class":420},[220,46976,359],{"class":264},[220,46978,46979,46981,46983],{"class":222,"line":644},[220,46980,402],{"class":264},[220,46982,347],{"class":420},[220,46984,359],{"class":264},[212,46986,46988],{"className":251,"code":46987,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FilmGrain', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,46989,46990,47000,47004,47018,47022,47031,47039,47043,47047],{"__ignoreMap":178},[220,46991,46992,46994,46996,46998],{"class":222,"line":223},[220,46993,261],{"class":260},[220,46995,11512],{"class":264},[220,46997,268],{"class":260},[220,46999,4007],{"class":230},[220,47001,47002],{"class":222,"line":179},[220,47003,647],{"emptyLinePlaceholder":194},[220,47005,47006,47008,47010,47012,47014,47016],{"class":222,"line":389},[220,47007,1735],{"class":260},[220,47009,1738],{"class":420},[220,47011,1741],{"class":260},[220,47013,1744],{"class":260},[220,47015,1747],{"class":226},[220,47017,1750],{"class":264},[220,47019,47020],{"class":222,"line":399},[220,47021,1765],{"class":264},[220,47023,47024,47026,47029],{"class":222,"line":644},[220,47025,1770],{"class":264},[220,47027,47028],{"class":230},"'FilmGrain'",[220,47030,7009],{"class":264},[220,47032,47033,47035,47037],{"class":222,"line":650},[220,47034,7014],{"class":264},[220,47036,3206],{"class":230},[220,47038,2465],{"class":264},[220,47040,47041],{"class":222,"line":656},[220,47042,7031],{"class":264},[220,47044,47045],{"class":222,"line":673},[220,47046,1787],{"class":264},[220,47048,47049],{"class":222,"line":682},[220,47050,1792],{"class":264},[1504,47052,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47054},[47055,47056],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46788,"description":46796},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":47063,"title":47064,"body":47065,"category":36368,"componentType":25883,"description":47072,"extension":191,"meta":47333,"navigation":194,"path":47334,"requiresChild":194,"seo":47335,"stem":47336,"__hash__":47337},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":47066,"toc":47329},[47067,47070,47073,47075,47077,47080,47082,47327],[11,47068,47064],{"id":47069},"filmstock",[15,47071,47072],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31911,47074],{"component":47064},[23,47076,31915],{"id":26533},[31917,47078],{":props":47079},"[{\"name\":\"stock\",\"type\":\"\\\"portrait400\\\" | \\\"vivid100\\\" | \\\"chrome64\\\" | \\\"slide100\\\" | \\\"velvet50\\\" | \\\"everyday400\\\" | \\\"pastel400\\\" | \\\"warm200\\\" | \\\"instant\\\" | \\\"mono400\\\"\",\"default\":\"portrait400\",\"description\":\"Film stock — each look is a real measured film-emulation color LUT\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly the stock's color grade is applied\"},{\"name\":\"halation\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Strength of the red-orange highlight glow (film emulsion backscatter)\"},{\"name\":\"halationRadius\",\"type\":\"number\",\"default\":\"28\",\"description\":\"Spread of the halation glow in pixels\"},{\"name\":\"weave\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Gate weave — subtle projector-like frame jitter and rotation\"}]",[23,47081,31923],{"id":31922},[246,47083,47084,47129,47173,47217,47261],{":tabs":1557},[212,47085,47087],{"className":334,"code":47086,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,47088,47089,47097,47105,47113,47121],{"__ignoreMap":178},[220,47090,47091,47093,47095],{"class":222,"line":223},[220,47092,343],{"class":264},[220,47094,347],{"class":346},[220,47096,359],{"class":264},[220,47098,47099,47101,47103],{"class":222,"line":179},[220,47100,364],{"class":264},[220,47102,47064],{"class":346},[220,47104,359],{"class":264},[220,47106,47107,47109,47111],{"class":222,"line":389},[220,47108,2550],{"class":264},[220,47110,2553],{"class":346},[220,47112,386],{"class":264},[220,47114,47115,47117,47119],{"class":222,"line":399},[220,47116,2567],{"class":264},[220,47118,47064],{"class":346},[220,47120,359],{"class":264},[220,47122,47123,47125,47127],{"class":222,"line":644},[220,47124,402],{"class":264},[220,47126,347],{"class":346},[220,47128,359],{"class":264},[212,47130,47131],{"className":409,"code":47086,"language":411,"meta":178,"style":178},[99,47132,47133,47141,47149,47157,47165],{"__ignoreMap":178},[220,47134,47135,47137,47139],{"class":222,"line":223},[220,47136,343],{"class":264},[220,47138,347],{"class":420},[220,47140,359],{"class":264},[220,47142,47143,47145,47147],{"class":222,"line":179},[220,47144,364],{"class":264},[220,47146,47064],{"class":420},[220,47148,359],{"class":264},[220,47150,47151,47153,47155],{"class":222,"line":389},[220,47152,2550],{"class":264},[220,47154,2553],{"class":420},[220,47156,386],{"class":264},[220,47158,47159,47161,47163],{"class":222,"line":399},[220,47160,2567],{"class":264},[220,47162,47064],{"class":420},[220,47164,359],{"class":264},[220,47166,47167,47169,47171],{"class":222,"line":644},[220,47168,402],{"class":264},[220,47170,347],{"class":420},[220,47172,359],{"class":264},[212,47174,47175],{"className":2844,"code":47086,"language":2846,"meta":178,"style":178},[99,47176,47177,47185,47193,47201,47209],{"__ignoreMap":178},[220,47178,47179,47181,47183],{"class":222,"line":223},[220,47180,343],{"class":264},[220,47182,347],{"class":420},[220,47184,359],{"class":264},[220,47186,47187,47189,47191],{"class":222,"line":179},[220,47188,364],{"class":264},[220,47190,47064],{"class":420},[220,47192,359],{"class":264},[220,47194,47195,47197,47199],{"class":222,"line":389},[220,47196,2550],{"class":264},[220,47198,2553],{"class":420},[220,47200,386],{"class":264},[220,47202,47203,47205,47207],{"class":222,"line":399},[220,47204,2567],{"class":264},[220,47206,47064],{"class":420},[220,47208,359],{"class":264},[220,47210,47211,47213,47215],{"class":222,"line":644},[220,47212,402],{"class":264},[220,47214,347],{"class":420},[220,47216,359],{"class":264},[212,47218,47219],{"className":468,"code":47086,"language":469,"meta":178,"style":178},[99,47220,47221,47229,47237,47245,47253],{"__ignoreMap":178},[220,47222,47223,47225,47227],{"class":222,"line":223},[220,47224,343],{"class":264},[220,47226,347],{"class":420},[220,47228,359],{"class":264},[220,47230,47231,47233,47235],{"class":222,"line":179},[220,47232,364],{"class":264},[220,47234,47064],{"class":420},[220,47236,359],{"class":264},[220,47238,47239,47241,47243],{"class":222,"line":389},[220,47240,2550],{"class":264},[220,47242,2553],{"class":420},[220,47244,386],{"class":264},[220,47246,47247,47249,47251],{"class":222,"line":399},[220,47248,2567],{"class":264},[220,47250,47064],{"class":420},[220,47252,359],{"class":264},[220,47254,47255,47257,47259],{"class":222,"line":644},[220,47256,402],{"class":264},[220,47258,347],{"class":420},[220,47260,359],{"class":264},[212,47262,47264],{"className":251,"code":47263,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FilmStock', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,47265,47266,47276,47280,47294,47298,47307,47315,47319,47323],{"__ignoreMap":178},[220,47267,47268,47270,47272,47274],{"class":222,"line":223},[220,47269,261],{"class":260},[220,47271,11512],{"class":264},[220,47273,268],{"class":260},[220,47275,4007],{"class":230},[220,47277,47278],{"class":222,"line":179},[220,47279,647],{"emptyLinePlaceholder":194},[220,47281,47282,47284,47286,47288,47290,47292],{"class":222,"line":389},[220,47283,1735],{"class":260},[220,47285,1738],{"class":420},[220,47287,1741],{"class":260},[220,47289,1744],{"class":260},[220,47291,1747],{"class":226},[220,47293,1750],{"class":264},[220,47295,47296],{"class":222,"line":399},[220,47297,1765],{"class":264},[220,47299,47300,47302,47305],{"class":222,"line":644},[220,47301,1770],{"class":264},[220,47303,47304],{"class":230},"'FilmStock'",[220,47306,7009],{"class":264},[220,47308,47309,47311,47313],{"class":222,"line":650},[220,47310,7014],{"class":264},[220,47312,3206],{"class":230},[220,47314,2465],{"class":264},[220,47316,47317],{"class":222,"line":656},[220,47318,7031],{"class":264},[220,47320,47321],{"class":222,"line":673},[220,47322,1787],{"class":264},[220,47324,47325],{"class":222,"line":682},[220,47326,1792],{"class":264},[1504,47328,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47330},[47331,47332],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":47064,"description":47072},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":47339,"title":47340,"body":47341,"category":33396,"componentType":25883,"description":47348,"extension":191,"meta":47609,"navigation":194,"path":47610,"requiresChild":194,"seo":47611,"stem":47612,"__hash__":47613},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":47342,"toc":47605},[47343,47346,47349,47351,47353,47356,47358,47603],[11,47344,47340],{"id":47345},"flip",[15,47347,47348],{},"Mirror content horizontally, vertically, or both",[31911,47350],{"component":47340},[23,47352,31915],{"id":26533},[31917,47354],{":props":47355},"[{\"name\":\"flipX\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Mirror the content horizontally (left ↔ right)\"},{\"name\":\"flipY\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Mirror the content vertically (top ↔ bottom)\"}]",[23,47357,31923],{"id":31922},[246,47359,47360,47405,47449,47493,47537],{":tabs":1557},[212,47361,47363],{"className":334,"code":47362,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,47364,47365,47373,47381,47389,47397],{"__ignoreMap":178},[220,47366,47367,47369,47371],{"class":222,"line":223},[220,47368,343],{"class":264},[220,47370,347],{"class":346},[220,47372,359],{"class":264},[220,47374,47375,47377,47379],{"class":222,"line":179},[220,47376,364],{"class":264},[220,47378,47340],{"class":346},[220,47380,359],{"class":264},[220,47382,47383,47385,47387],{"class":222,"line":389},[220,47384,2550],{"class":264},[220,47386,2553],{"class":346},[220,47388,386],{"class":264},[220,47390,47391,47393,47395],{"class":222,"line":399},[220,47392,2567],{"class":264},[220,47394,47340],{"class":346},[220,47396,359],{"class":264},[220,47398,47399,47401,47403],{"class":222,"line":644},[220,47400,402],{"class":264},[220,47402,347],{"class":346},[220,47404,359],{"class":264},[212,47406,47407],{"className":409,"code":47362,"language":411,"meta":178,"style":178},[99,47408,47409,47417,47425,47433,47441],{"__ignoreMap":178},[220,47410,47411,47413,47415],{"class":222,"line":223},[220,47412,343],{"class":264},[220,47414,347],{"class":420},[220,47416,359],{"class":264},[220,47418,47419,47421,47423],{"class":222,"line":179},[220,47420,364],{"class":264},[220,47422,47340],{"class":420},[220,47424,359],{"class":264},[220,47426,47427,47429,47431],{"class":222,"line":389},[220,47428,2550],{"class":264},[220,47430,2553],{"class":420},[220,47432,386],{"class":264},[220,47434,47435,47437,47439],{"class":222,"line":399},[220,47436,2567],{"class":264},[220,47438,47340],{"class":420},[220,47440,359],{"class":264},[220,47442,47443,47445,47447],{"class":222,"line":644},[220,47444,402],{"class":264},[220,47446,347],{"class":420},[220,47448,359],{"class":264},[212,47450,47451],{"className":2844,"code":47362,"language":2846,"meta":178,"style":178},[99,47452,47453,47461,47469,47477,47485],{"__ignoreMap":178},[220,47454,47455,47457,47459],{"class":222,"line":223},[220,47456,343],{"class":264},[220,47458,347],{"class":420},[220,47460,359],{"class":264},[220,47462,47463,47465,47467],{"class":222,"line":179},[220,47464,364],{"class":264},[220,47466,47340],{"class":420},[220,47468,359],{"class":264},[220,47470,47471,47473,47475],{"class":222,"line":389},[220,47472,2550],{"class":264},[220,47474,2553],{"class":420},[220,47476,386],{"class":264},[220,47478,47479,47481,47483],{"class":222,"line":399},[220,47480,2567],{"class":264},[220,47482,47340],{"class":420},[220,47484,359],{"class":264},[220,47486,47487,47489,47491],{"class":222,"line":644},[220,47488,402],{"class":264},[220,47490,347],{"class":420},[220,47492,359],{"class":264},[212,47494,47495],{"className":468,"code":47362,"language":469,"meta":178,"style":178},[99,47496,47497,47505,47513,47521,47529],{"__ignoreMap":178},[220,47498,47499,47501,47503],{"class":222,"line":223},[220,47500,343],{"class":264},[220,47502,347],{"class":420},[220,47504,359],{"class":264},[220,47506,47507,47509,47511],{"class":222,"line":179},[220,47508,364],{"class":264},[220,47510,47340],{"class":420},[220,47512,359],{"class":264},[220,47514,47515,47517,47519],{"class":222,"line":389},[220,47516,2550],{"class":264},[220,47518,2553],{"class":420},[220,47520,386],{"class":264},[220,47522,47523,47525,47527],{"class":222,"line":399},[220,47524,2567],{"class":264},[220,47526,47340],{"class":420},[220,47528,359],{"class":264},[220,47530,47531,47533,47535],{"class":222,"line":644},[220,47532,402],{"class":264},[220,47534,347],{"class":420},[220,47536,359],{"class":264},[212,47538,47540],{"className":251,"code":47539,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Flip', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,47541,47542,47552,47556,47570,47574,47583,47591,47595,47599],{"__ignoreMap":178},[220,47543,47544,47546,47548,47550],{"class":222,"line":223},[220,47545,261],{"class":260},[220,47547,11512],{"class":264},[220,47549,268],{"class":260},[220,47551,4007],{"class":230},[220,47553,47554],{"class":222,"line":179},[220,47555,647],{"emptyLinePlaceholder":194},[220,47557,47558,47560,47562,47564,47566,47568],{"class":222,"line":389},[220,47559,1735],{"class":260},[220,47561,1738],{"class":420},[220,47563,1741],{"class":260},[220,47565,1744],{"class":260},[220,47567,1747],{"class":226},[220,47569,1750],{"class":264},[220,47571,47572],{"class":222,"line":399},[220,47573,1765],{"class":264},[220,47575,47576,47578,47581],{"class":222,"line":644},[220,47577,1770],{"class":264},[220,47579,47580],{"class":230},"'Flip'",[220,47582,7009],{"class":264},[220,47584,47585,47587,47589],{"class":222,"line":650},[220,47586,7014],{"class":264},[220,47588,3206],{"class":230},[220,47590,2465],{"class":264},[220,47592,47593],{"class":222,"line":656},[220,47594,7031],{"class":264},[220,47596,47597],{"class":222,"line":673},[220,47598,1787],{"class":264},[220,47600,47601],{"class":222,"line":682},[220,47602,1792],{"class":264},[1504,47604,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47606},[47607,47608],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":47340,"description":47348},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":47615,"title":47616,"body":47617,"category":33063,"componentType":25877,"description":47624,"extension":191,"meta":47809,"navigation":194,"path":47810,"requiresChild":32530,"seo":47811,"stem":47812,"__hash__":47813},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":47618,"toc":47805},[47619,47622,47625,47627,47629,47632,47634,47803],[11,47620,47616],{"id":47621},"floatingparticles",[15,47623,47624],{},"Drifting, twinkling motes — thousands of real simulated particles floating in a shared heading with per-particle wander and variance, and a cursor that stirs the field with a gust that settles back into the drift",[31911,47626],{"component":47616},[23,47628,31915],{"id":26533},[31917,47630],{":props":47631},"[{\"name\":\"particleColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the particles\"},{\"name\":\"shape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"1200\",\"description\":\"Number of particles\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Size of the particles (each also varies slightly for depth)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge softness of each particle — 0 is a crisp shape, 1 a soft glow puff\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Speed of the shared drift\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward)\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-particle speed variance around the shared drift (0 = everything moves in lockstep)\"},{\"name\":\"angleVariance\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way)\"},{\"name\":\"randomness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Orbital wander — each particle circles lazily around its drift path instead of gliding straight\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the twinkle (0 = steady, 1 = full shimmer)\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed\"}]",[23,47633,31923],{"id":31922},[246,47635,47636,47665,47693,47721,47749],{":tabs":1557},[212,47637,47639],{"className":334,"code":47638,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47640,47641,47649,47657],{"__ignoreMap":178},[220,47642,47643,47645,47647],{"class":222,"line":223},[220,47644,343],{"class":264},[220,47646,347],{"class":346},[220,47648,359],{"class":264},[220,47650,47651,47653,47655],{"class":222,"line":179},[220,47652,364],{"class":264},[220,47654,47616],{"class":346},[220,47656,386],{"class":264},[220,47658,47659,47661,47663],{"class":222,"line":389},[220,47660,402],{"class":264},[220,47662,347],{"class":346},[220,47664,359],{"class":264},[212,47666,47667],{"className":409,"code":47638,"language":411,"meta":178,"style":178},[99,47668,47669,47677,47685],{"__ignoreMap":178},[220,47670,47671,47673,47675],{"class":222,"line":223},[220,47672,343],{"class":264},[220,47674,347],{"class":420},[220,47676,359],{"class":264},[220,47678,47679,47681,47683],{"class":222,"line":179},[220,47680,364],{"class":264},[220,47682,47616],{"class":420},[220,47684,386],{"class":264},[220,47686,47687,47689,47691],{"class":222,"line":389},[220,47688,402],{"class":264},[220,47690,347],{"class":420},[220,47692,359],{"class":264},[212,47694,47695],{"className":2844,"code":47638,"language":2846,"meta":178,"style":178},[99,47696,47697,47705,47713],{"__ignoreMap":178},[220,47698,47699,47701,47703],{"class":222,"line":223},[220,47700,343],{"class":264},[220,47702,347],{"class":420},[220,47704,359],{"class":264},[220,47706,47707,47709,47711],{"class":222,"line":179},[220,47708,364],{"class":264},[220,47710,47616],{"class":420},[220,47712,386],{"class":264},[220,47714,47715,47717,47719],{"class":222,"line":389},[220,47716,402],{"class":264},[220,47718,347],{"class":420},[220,47720,359],{"class":264},[212,47722,47723],{"className":468,"code":47638,"language":469,"meta":178,"style":178},[99,47724,47725,47733,47741],{"__ignoreMap":178},[220,47726,47727,47729,47731],{"class":222,"line":223},[220,47728,343],{"class":264},[220,47730,347],{"class":420},[220,47732,359],{"class":264},[220,47734,47735,47737,47739],{"class":222,"line":179},[220,47736,364],{"class":264},[220,47738,47616],{"class":420},[220,47740,386],{"class":264},[220,47742,47743,47745,47747],{"class":222,"line":389},[220,47744,402],{"class":264},[220,47746,347],{"class":420},[220,47748,359],{"class":264},[212,47750,47752],{"className":251,"code":47751,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FloatingParticles', props: {} }\n ]\n})\n",[99,47753,47754,47764,47768,47782,47786,47795,47799],{"__ignoreMap":178},[220,47755,47756,47758,47760,47762],{"class":222,"line":223},[220,47757,261],{"class":260},[220,47759,11512],{"class":264},[220,47761,268],{"class":260},[220,47763,4007],{"class":230},[220,47765,47766],{"class":222,"line":179},[220,47767,647],{"emptyLinePlaceholder":194},[220,47769,47770,47772,47774,47776,47778,47780],{"class":222,"line":389},[220,47771,1735],{"class":260},[220,47773,1738],{"class":420},[220,47775,1741],{"class":260},[220,47777,1744],{"class":260},[220,47779,1747],{"class":226},[220,47781,1750],{"class":264},[220,47783,47784],{"class":222,"line":399},[220,47785,1765],{"class":264},[220,47787,47788,47790,47793],{"class":222,"line":644},[220,47789,1770],{"class":264},[220,47791,47792],{"class":230},"'FloatingParticles'",[220,47794,2465],{"class":264},[220,47796,47797],{"class":222,"line":650},[220,47798,1787],{"class":264},[220,47800,47801],{"class":222,"line":656},[220,47802,1792],{"class":264},[1504,47804,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":47806},[47807,47808],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":47616,"description":47624},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":47815,"title":47816,"body":47817,"category":33396,"componentType":25883,"description":47824,"extension":191,"meta":48085,"navigation":194,"path":48086,"requiresChild":194,"seo":48087,"stem":48088,"__hash__":48089},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":47818,"toc":48081},[47819,47822,47825,47827,47829,47832,47834,48079],[11,47820,47816],{"id":47821},"flowfield",[15,47823,47824],{},"Fluid-like distortion with constant smooth motion",[31911,47826],{"component":47816},[23,47828,31915],{"id":26533},[31917,47830],{":props":47831},"[{\"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\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for flow pattern variation\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,47833,31923],{"id":31922},[246,47835,47836,47881,47925,47969,48013],{":tabs":1557},[212,47837,47839],{"className":334,"code":47838,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,47840,47841,47849,47857,47865,47873],{"__ignoreMap":178},[220,47842,47843,47845,47847],{"class":222,"line":223},[220,47844,343],{"class":264},[220,47846,347],{"class":346},[220,47848,359],{"class":264},[220,47850,47851,47853,47855],{"class":222,"line":179},[220,47852,364],{"class":264},[220,47854,47816],{"class":346},[220,47856,359],{"class":264},[220,47858,47859,47861,47863],{"class":222,"line":389},[220,47860,2550],{"class":264},[220,47862,2553],{"class":346},[220,47864,386],{"class":264},[220,47866,47867,47869,47871],{"class":222,"line":399},[220,47868,2567],{"class":264},[220,47870,47816],{"class":346},[220,47872,359],{"class":264},[220,47874,47875,47877,47879],{"class":222,"line":644},[220,47876,402],{"class":264},[220,47878,347],{"class":346},[220,47880,359],{"class":264},[212,47882,47883],{"className":409,"code":47838,"language":411,"meta":178,"style":178},[99,47884,47885,47893,47901,47909,47917],{"__ignoreMap":178},[220,47886,47887,47889,47891],{"class":222,"line":223},[220,47888,343],{"class":264},[220,47890,347],{"class":420},[220,47892,359],{"class":264},[220,47894,47895,47897,47899],{"class":222,"line":179},[220,47896,364],{"class":264},[220,47898,47816],{"class":420},[220,47900,359],{"class":264},[220,47902,47903,47905,47907],{"class":222,"line":389},[220,47904,2550],{"class":264},[220,47906,2553],{"class":420},[220,47908,386],{"class":264},[220,47910,47911,47913,47915],{"class":222,"line":399},[220,47912,2567],{"class":264},[220,47914,47816],{"class":420},[220,47916,359],{"class":264},[220,47918,47919,47921,47923],{"class":222,"line":644},[220,47920,402],{"class":264},[220,47922,347],{"class":420},[220,47924,359],{"class":264},[212,47926,47927],{"className":2844,"code":47838,"language":2846,"meta":178,"style":178},[99,47928,47929,47937,47945,47953,47961],{"__ignoreMap":178},[220,47930,47931,47933,47935],{"class":222,"line":223},[220,47932,343],{"class":264},[220,47934,347],{"class":420},[220,47936,359],{"class":264},[220,47938,47939,47941,47943],{"class":222,"line":179},[220,47940,364],{"class":264},[220,47942,47816],{"class":420},[220,47944,359],{"class":264},[220,47946,47947,47949,47951],{"class":222,"line":389},[220,47948,2550],{"class":264},[220,47950,2553],{"class":420},[220,47952,386],{"class":264},[220,47954,47955,47957,47959],{"class":222,"line":399},[220,47956,2567],{"class":264},[220,47958,47816],{"class":420},[220,47960,359],{"class":264},[220,47962,47963,47965,47967],{"class":222,"line":644},[220,47964,402],{"class":264},[220,47966,347],{"class":420},[220,47968,359],{"class":264},[212,47970,47971],{"className":468,"code":47838,"language":469,"meta":178,"style":178},[99,47972,47973,47981,47989,47997,48005],{"__ignoreMap":178},[220,47974,47975,47977,47979],{"class":222,"line":223},[220,47976,343],{"class":264},[220,47978,347],{"class":420},[220,47980,359],{"class":264},[220,47982,47983,47985,47987],{"class":222,"line":179},[220,47984,364],{"class":264},[220,47986,47816],{"class":420},[220,47988,359],{"class":264},[220,47990,47991,47993,47995],{"class":222,"line":389},[220,47992,2550],{"class":264},[220,47994,2553],{"class":420},[220,47996,386],{"class":264},[220,47998,47999,48001,48003],{"class":222,"line":399},[220,48000,2567],{"class":264},[220,48002,47816],{"class":420},[220,48004,359],{"class":264},[220,48006,48007,48009,48011],{"class":222,"line":644},[220,48008,402],{"class":264},[220,48010,347],{"class":420},[220,48012,359],{"class":264},[212,48014,48016],{"className":251,"code":48015,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowField', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,48017,48018,48028,48032,48046,48050,48059,48067,48071,48075],{"__ignoreMap":178},[220,48019,48020,48022,48024,48026],{"class":222,"line":223},[220,48021,261],{"class":260},[220,48023,11512],{"class":264},[220,48025,268],{"class":260},[220,48027,4007],{"class":230},[220,48029,48030],{"class":222,"line":179},[220,48031,647],{"emptyLinePlaceholder":194},[220,48033,48034,48036,48038,48040,48042,48044],{"class":222,"line":389},[220,48035,1735],{"class":260},[220,48037,1738],{"class":420},[220,48039,1741],{"class":260},[220,48041,1744],{"class":260},[220,48043,1747],{"class":226},[220,48045,1750],{"class":264},[220,48047,48048],{"class":222,"line":399},[220,48049,1765],{"class":264},[220,48051,48052,48054,48057],{"class":222,"line":644},[220,48053,1770],{"class":264},[220,48055,48056],{"class":230},"'FlowField'",[220,48058,7009],{"class":264},[220,48060,48061,48063,48065],{"class":222,"line":650},[220,48062,7014],{"class":264},[220,48064,3206],{"class":230},[220,48066,2465],{"class":264},[220,48068,48069],{"class":222,"line":656},[220,48070,7031],{"class":264},[220,48072,48073],{"class":222,"line":673},[220,48074,1787],{"class":264},[220,48076,48077],{"class":222,"line":682},[220,48078,1792],{"class":264},[1504,48080,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48082},[48083,48084],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":47816,"description":47824},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":48091,"title":48092,"body":48093,"category":15908,"componentType":25877,"description":48100,"extension":191,"meta":48378,"navigation":194,"path":48379,"requiresChild":32530,"seo":48380,"stem":48381,"__hash__":48382},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":48094,"toc":48374},[48095,48098,48101,48103,48105,48108,48110,48372],[11,48096,48092],{"id":48097},"flower",[15,48099,48100],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31911,48102],{"component":48092},[23,48104,31915],{"id":26533},[31917,48106],{":props":48107},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,48109,31923],{"id":31922},[246,48111,48112,48161,48212,48260,48310],{":tabs":1557},[212,48113,48115],{"className":334,"code":48114,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,48116,48117,48125,48132,48140,48149,48153],{"__ignoreMap":178},[220,48118,48119,48121,48123],{"class":222,"line":223},[220,48120,343],{"class":264},[220,48122,347],{"class":346},[220,48124,359],{"class":264},[220,48126,48127,48129],{"class":222,"line":179},[220,48128,364],{"class":264},[220,48130,48131],{"class":346},"Flower\n",[220,48133,48134,48136,48138],{"class":222,"line":389},[220,48135,9635],{"class":226},[220,48137,353],{"class":264},[220,48139,9591],{"class":230},[220,48141,48142,48144,48146],{"class":222,"line":399},[220,48143,17405],{"class":226},[220,48145,353],{"class":264},[220,48147,48148],{"class":230},"\"0.4\"\n",[220,48150,48151],{"class":222,"line":644},[220,48152,1234],{"class":264},[220,48154,48155,48157,48159],{"class":222,"line":650},[220,48156,402],{"class":264},[220,48158,347],{"class":346},[220,48160,359],{"class":264},[212,48162,48164],{"className":409,"code":48163,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,48165,48166,48174,48180,48188,48200,48204],{"__ignoreMap":178},[220,48167,48168,48170,48172],{"class":222,"line":223},[220,48169,343],{"class":264},[220,48171,347],{"class":420},[220,48173,359],{"class":264},[220,48175,48176,48178],{"class":222,"line":179},[220,48177,364],{"class":264},[220,48179,48131],{"class":420},[220,48181,48182,48184,48186],{"class":222,"line":389},[220,48183,9635],{"class":226},[220,48185,353],{"class":260},[220,48187,9591],{"class":230},[220,48189,48190,48192,48194,48196,48198],{"class":222,"line":399},[220,48191,9645],{"class":226},[220,48193,353],{"class":260},[220,48195,743],{"class":264},[220,48197,8249],{"class":420},[220,48199,749],{"class":264},[220,48201,48202],{"class":222,"line":644},[220,48203,1234],{"class":264},[220,48205,48206,48208,48210],{"class":222,"line":650},[220,48207,402],{"class":264},[220,48209,347],{"class":420},[220,48211,359],{"class":264},[212,48213,48214],{"className":2844,"code":48163,"language":2846,"meta":178,"style":178},[99,48215,48216,48224,48230,48238,48248,48252],{"__ignoreMap":178},[220,48217,48218,48220,48222],{"class":222,"line":223},[220,48219,343],{"class":264},[220,48221,347],{"class":420},[220,48223,359],{"class":264},[220,48225,48226,48228],{"class":222,"line":179},[220,48227,364],{"class":264},[220,48229,48131],{"class":420},[220,48231,48232,48234,48236],{"class":222,"line":389},[220,48233,9635],{"class":226},[220,48235,353],{"class":264},[220,48237,9591],{"class":230},[220,48239,48240,48242,48244,48246],{"class":222,"line":399},[220,48241,9645],{"class":226},[220,48243,29871],{"class":264},[220,48245,8249],{"class":420},[220,48247,749],{"class":264},[220,48249,48250],{"class":222,"line":644},[220,48251,1234],{"class":264},[220,48253,48254,48256,48258],{"class":222,"line":650},[220,48255,402],{"class":264},[220,48257,347],{"class":420},[220,48259,359],{"class":264},[212,48261,48262],{"className":468,"code":48163,"language":469,"meta":178,"style":178},[99,48263,48264,48272,48278,48286,48298,48302],{"__ignoreMap":178},[220,48265,48266,48268,48270],{"class":222,"line":223},[220,48267,343],{"class":264},[220,48269,347],{"class":420},[220,48271,359],{"class":264},[220,48273,48274,48276],{"class":222,"line":179},[220,48275,364],{"class":264},[220,48277,48131],{"class":420},[220,48279,48280,48282,48284],{"class":222,"line":389},[220,48281,9635],{"class":226},[220,48283,353],{"class":260},[220,48285,9591],{"class":230},[220,48287,48288,48290,48292,48294,48296],{"class":222,"line":399},[220,48289,9645],{"class":226},[220,48291,353],{"class":260},[220,48293,743],{"class":264},[220,48295,8249],{"class":420},[220,48297,749],{"class":264},[220,48299,48300],{"class":222,"line":644},[220,48301,1234],{"class":264},[220,48303,48304,48306,48308],{"class":222,"line":650},[220,48305,402],{"class":264},[220,48307,347],{"class":420},[220,48309,359],{"class":264},[212,48311,48313],{"className":251,"code":48312,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Flower', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[99,48314,48315,48325,48329,48343,48347,48364,48368],{"__ignoreMap":178},[220,48316,48317,48319,48321,48323],{"class":222,"line":223},[220,48318,261],{"class":260},[220,48320,11512],{"class":264},[220,48322,268],{"class":260},[220,48324,4007],{"class":230},[220,48326,48327],{"class":222,"line":179},[220,48328,647],{"emptyLinePlaceholder":194},[220,48330,48331,48333,48335,48337,48339,48341],{"class":222,"line":389},[220,48332,1735],{"class":260},[220,48334,1738],{"class":420},[220,48336,1741],{"class":260},[220,48338,1744],{"class":260},[220,48340,1747],{"class":226},[220,48342,1750],{"class":264},[220,48344,48345],{"class":222,"line":399},[220,48346,1765],{"class":264},[220,48348,48349,48351,48354,48356,48358,48360,48362],{"class":222,"line":644},[220,48350,1770],{"class":264},[220,48352,48353],{"class":230},"'Flower'",[220,48355,1776],{"class":264},[220,48357,10169],{"class":230},[220,48359,6566],{"class":264},[220,48361,8249],{"class":420},[220,48363,1782],{"class":264},[220,48365,48366],{"class":222,"line":650},[220,48367,1787],{"class":264},[220,48369,48370],{"class":222,"line":656},[220,48371,1792],{"class":264},[1504,48373,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48375},[48376,48377],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":48092,"description":48100},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":48384,"title":48385,"body":48386,"category":33063,"componentType":25877,"description":48393,"extension":191,"meta":48578,"navigation":194,"path":48579,"requiresChild":32530,"seo":48580,"stem":48581,"__hash__":48582},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":48387,"toc":48574},[48388,48391,48394,48396,48398,48401,48403,48572],[11,48389,48385],{"id":48390},"flowinggradient",[15,48392,48393],{},"Liquid silk gradient with organic flowing color bands",[31911,48395],{"component":48385},[23,48397,31915],{"id":26533},[31917,48399],{":props":48400},"[{\"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,48402,31923],{"id":31922},[246,48404,48405,48434,48462,48490,48518],{":tabs":1557},[212,48406,48408],{"className":334,"code":48407,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,48409,48410,48418,48426],{"__ignoreMap":178},[220,48411,48412,48414,48416],{"class":222,"line":223},[220,48413,343],{"class":264},[220,48415,347],{"class":346},[220,48417,359],{"class":264},[220,48419,48420,48422,48424],{"class":222,"line":179},[220,48421,364],{"class":264},[220,48423,48385],{"class":346},[220,48425,386],{"class":264},[220,48427,48428,48430,48432],{"class":222,"line":389},[220,48429,402],{"class":264},[220,48431,347],{"class":346},[220,48433,359],{"class":264},[212,48435,48436],{"className":409,"code":48407,"language":411,"meta":178,"style":178},[99,48437,48438,48446,48454],{"__ignoreMap":178},[220,48439,48440,48442,48444],{"class":222,"line":223},[220,48441,343],{"class":264},[220,48443,347],{"class":420},[220,48445,359],{"class":264},[220,48447,48448,48450,48452],{"class":222,"line":179},[220,48449,364],{"class":264},[220,48451,48385],{"class":420},[220,48453,386],{"class":264},[220,48455,48456,48458,48460],{"class":222,"line":389},[220,48457,402],{"class":264},[220,48459,347],{"class":420},[220,48461,359],{"class":264},[212,48463,48464],{"className":2844,"code":48407,"language":2846,"meta":178,"style":178},[99,48465,48466,48474,48482],{"__ignoreMap":178},[220,48467,48468,48470,48472],{"class":222,"line":223},[220,48469,343],{"class":264},[220,48471,347],{"class":420},[220,48473,359],{"class":264},[220,48475,48476,48478,48480],{"class":222,"line":179},[220,48477,364],{"class":264},[220,48479,48385],{"class":420},[220,48481,386],{"class":264},[220,48483,48484,48486,48488],{"class":222,"line":389},[220,48485,402],{"class":264},[220,48487,347],{"class":420},[220,48489,359],{"class":264},[212,48491,48492],{"className":468,"code":48407,"language":469,"meta":178,"style":178},[99,48493,48494,48502,48510],{"__ignoreMap":178},[220,48495,48496,48498,48500],{"class":222,"line":223},[220,48497,343],{"class":264},[220,48499,347],{"class":420},[220,48501,359],{"class":264},[220,48503,48504,48506,48508],{"class":222,"line":179},[220,48505,364],{"class":264},[220,48507,48385],{"class":420},[220,48509,386],{"class":264},[220,48511,48512,48514,48516],{"class":222,"line":389},[220,48513,402],{"class":264},[220,48515,347],{"class":420},[220,48517,359],{"class":264},[212,48519,48521],{"className":251,"code":48520,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowingGradient', props: {} }\n ]\n})\n",[99,48522,48523,48533,48537,48551,48555,48564,48568],{"__ignoreMap":178},[220,48524,48525,48527,48529,48531],{"class":222,"line":223},[220,48526,261],{"class":260},[220,48528,11512],{"class":264},[220,48530,268],{"class":260},[220,48532,4007],{"class":230},[220,48534,48535],{"class":222,"line":179},[220,48536,647],{"emptyLinePlaceholder":194},[220,48538,48539,48541,48543,48545,48547,48549],{"class":222,"line":389},[220,48540,1735],{"class":260},[220,48542,1738],{"class":420},[220,48544,1741],{"class":260},[220,48546,1744],{"class":260},[220,48548,1747],{"class":226},[220,48550,1750],{"class":264},[220,48552,48553],{"class":222,"line":399},[220,48554,1765],{"class":264},[220,48556,48557,48559,48562],{"class":222,"line":644},[220,48558,1770],{"class":264},[220,48560,48561],{"class":230},"'FlowingGradient'",[220,48563,2465],{"class":264},[220,48565,48566],{"class":222,"line":650},[220,48567,1787],{"class":264},[220,48569,48570],{"class":222,"line":656},[220,48571,1792],{"class":264},[1504,48573,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48575},[48576,48577],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":48385,"description":48393},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":48584,"title":48585,"body":48586,"category":33396,"componentType":25883,"description":48593,"extension":191,"meta":48854,"navigation":194,"path":48855,"requiresChild":194,"seo":48856,"stem":48857,"__hash__":48858},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":48587,"toc":48850},[48588,48591,48594,48596,48598,48601,48603,48848],[11,48589,48585],{"id":48590},"flutedglass",[15,48592,48593],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31911,48595],{"component":48585},[23,48597,31915],{"id":26533},[31917,48599],{":props":48600},"[{\"name\":\"shape\",\"type\":\"\\\"bars\\\" | \\\"rounded\\\" | \\\"waves\\\"\",\"default\":\"bars\",\"description\":\"Cross-section shape of each flute\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the flutes in degrees (0 = vertical bars)\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of flutes across the longest viewport axis\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How smoothly distortion fades from each flute centre to its edge (0 = flat middle \u002F sharp seams, 1 = gentle curve)\"},{\"name\":\"waveAmplitude\",\"type\":\"number\",\"default\":\"0.06\",\"description\":\"How far each flute sways horizontally as it travels (Waves shape only)\"},{\"name\":\"waveFrequency\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How many sways fit along each flute (Waves shape only)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed — drifts the flute pattern over time and flows wave perturbations\"},{\"name\":\"refraction\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How aggressively each flute bends content beneath it\"},{\"name\":\"aberration\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Chromatic aberration — splits RGB along the refraction direction at flute seams\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Direction the light source is coming from (0 = head-on, 90 = grazing)\"},{\"name\":\"highlight\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Strength of the specular reflection on each flute\"},{\"name\":\"highlightSoftness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Spread of the specular peak (0 = pin-tight, 1 = broad sheen)\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the specular highlight\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion samples beyond the canvas\"}]",[23,48602,31923],{"id":31922},[246,48604,48605,48650,48694,48738,48782],{":tabs":1557},[212,48606,48608],{"className":334,"code":48607,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,48609,48610,48618,48626,48634,48642],{"__ignoreMap":178},[220,48611,48612,48614,48616],{"class":222,"line":223},[220,48613,343],{"class":264},[220,48615,347],{"class":346},[220,48617,359],{"class":264},[220,48619,48620,48622,48624],{"class":222,"line":179},[220,48621,364],{"class":264},[220,48623,48585],{"class":346},[220,48625,359],{"class":264},[220,48627,48628,48630,48632],{"class":222,"line":389},[220,48629,2550],{"class":264},[220,48631,2553],{"class":346},[220,48633,386],{"class":264},[220,48635,48636,48638,48640],{"class":222,"line":399},[220,48637,2567],{"class":264},[220,48639,48585],{"class":346},[220,48641,359],{"class":264},[220,48643,48644,48646,48648],{"class":222,"line":644},[220,48645,402],{"class":264},[220,48647,347],{"class":346},[220,48649,359],{"class":264},[212,48651,48652],{"className":409,"code":48607,"language":411,"meta":178,"style":178},[99,48653,48654,48662,48670,48678,48686],{"__ignoreMap":178},[220,48655,48656,48658,48660],{"class":222,"line":223},[220,48657,343],{"class":264},[220,48659,347],{"class":420},[220,48661,359],{"class":264},[220,48663,48664,48666,48668],{"class":222,"line":179},[220,48665,364],{"class":264},[220,48667,48585],{"class":420},[220,48669,359],{"class":264},[220,48671,48672,48674,48676],{"class":222,"line":389},[220,48673,2550],{"class":264},[220,48675,2553],{"class":420},[220,48677,386],{"class":264},[220,48679,48680,48682,48684],{"class":222,"line":399},[220,48681,2567],{"class":264},[220,48683,48585],{"class":420},[220,48685,359],{"class":264},[220,48687,48688,48690,48692],{"class":222,"line":644},[220,48689,402],{"class":264},[220,48691,347],{"class":420},[220,48693,359],{"class":264},[212,48695,48696],{"className":2844,"code":48607,"language":2846,"meta":178,"style":178},[99,48697,48698,48706,48714,48722,48730],{"__ignoreMap":178},[220,48699,48700,48702,48704],{"class":222,"line":223},[220,48701,343],{"class":264},[220,48703,347],{"class":420},[220,48705,359],{"class":264},[220,48707,48708,48710,48712],{"class":222,"line":179},[220,48709,364],{"class":264},[220,48711,48585],{"class":420},[220,48713,359],{"class":264},[220,48715,48716,48718,48720],{"class":222,"line":389},[220,48717,2550],{"class":264},[220,48719,2553],{"class":420},[220,48721,386],{"class":264},[220,48723,48724,48726,48728],{"class":222,"line":399},[220,48725,2567],{"class":264},[220,48727,48585],{"class":420},[220,48729,359],{"class":264},[220,48731,48732,48734,48736],{"class":222,"line":644},[220,48733,402],{"class":264},[220,48735,347],{"class":420},[220,48737,359],{"class":264},[212,48739,48740],{"className":468,"code":48607,"language":469,"meta":178,"style":178},[99,48741,48742,48750,48758,48766,48774],{"__ignoreMap":178},[220,48743,48744,48746,48748],{"class":222,"line":223},[220,48745,343],{"class":264},[220,48747,347],{"class":420},[220,48749,359],{"class":264},[220,48751,48752,48754,48756],{"class":222,"line":179},[220,48753,364],{"class":264},[220,48755,48585],{"class":420},[220,48757,359],{"class":264},[220,48759,48760,48762,48764],{"class":222,"line":389},[220,48761,2550],{"class":264},[220,48763,2553],{"class":420},[220,48765,386],{"class":264},[220,48767,48768,48770,48772],{"class":222,"line":399},[220,48769,2567],{"class":264},[220,48771,48585],{"class":420},[220,48773,359],{"class":264},[220,48775,48776,48778,48780],{"class":222,"line":644},[220,48777,402],{"class":264},[220,48779,347],{"class":420},[220,48781,359],{"class":264},[212,48783,48785],{"className":251,"code":48784,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlutedGlass', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,48786,48787,48797,48801,48815,48819,48828,48836,48840,48844],{"__ignoreMap":178},[220,48788,48789,48791,48793,48795],{"class":222,"line":223},[220,48790,261],{"class":260},[220,48792,11512],{"class":264},[220,48794,268],{"class":260},[220,48796,4007],{"class":230},[220,48798,48799],{"class":222,"line":179},[220,48800,647],{"emptyLinePlaceholder":194},[220,48802,48803,48805,48807,48809,48811,48813],{"class":222,"line":389},[220,48804,1735],{"class":260},[220,48806,1738],{"class":420},[220,48808,1741],{"class":260},[220,48810,1744],{"class":260},[220,48812,1747],{"class":226},[220,48814,1750],{"class":264},[220,48816,48817],{"class":222,"line":399},[220,48818,1765],{"class":264},[220,48820,48821,48823,48826],{"class":222,"line":644},[220,48822,1770],{"class":264},[220,48824,48825],{"class":230},"'FlutedGlass'",[220,48827,7009],{"class":264},[220,48829,48830,48832,48834],{"class":222,"line":650},[220,48831,7014],{"class":264},[220,48833,3206],{"class":230},[220,48835,2465],{"class":264},[220,48837,48838],{"class":222,"line":656},[220,48839,7031],{"class":264},[220,48841,48842],{"class":222,"line":673},[220,48843,1787],{"class":264},[220,48845,48846],{"class":222,"line":682},[220,48847,1792],{"class":264},[1504,48849,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":48851},[48852,48853],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":48585,"description":48593},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":48860,"title":48861,"body":48862,"category":35559,"componentType":25877,"description":48869,"extension":191,"meta":49054,"navigation":194,"path":49055,"requiresChild":32530,"seo":49056,"stem":49057,"__hash__":49058},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":48863,"toc":49050},[48864,48867,48870,48872,48874,48877,48879,49048],[11,48865,48861],{"id":48866},"fog",[15,48868,48869],{},"Fog that fills the screen and interacts with the mouse",[31911,48871],{"component":48861},[23,48873,31915],{"id":26533},[31917,48875],{":props":48876},"[{\"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,48878,31923],{"id":31922},[246,48880,48881,48910,48938,48966,48994],{":tabs":1557},[212,48882,48884],{"className":334,"code":48883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,48885,48886,48894,48902],{"__ignoreMap":178},[220,48887,48888,48890,48892],{"class":222,"line":223},[220,48889,343],{"class":264},[220,48891,347],{"class":346},[220,48893,359],{"class":264},[220,48895,48896,48898,48900],{"class":222,"line":179},[220,48897,364],{"class":264},[220,48899,48861],{"class":346},[220,48901,386],{"class":264},[220,48903,48904,48906,48908],{"class":222,"line":389},[220,48905,402],{"class":264},[220,48907,347],{"class":346},[220,48909,359],{"class":264},[212,48911,48912],{"className":409,"code":48883,"language":411,"meta":178,"style":178},[99,48913,48914,48922,48930],{"__ignoreMap":178},[220,48915,48916,48918,48920],{"class":222,"line":223},[220,48917,343],{"class":264},[220,48919,347],{"class":420},[220,48921,359],{"class":264},[220,48923,48924,48926,48928],{"class":222,"line":179},[220,48925,364],{"class":264},[220,48927,48861],{"class":420},[220,48929,386],{"class":264},[220,48931,48932,48934,48936],{"class":222,"line":389},[220,48933,402],{"class":264},[220,48935,347],{"class":420},[220,48937,359],{"class":264},[212,48939,48940],{"className":2844,"code":48883,"language":2846,"meta":178,"style":178},[99,48941,48942,48950,48958],{"__ignoreMap":178},[220,48943,48944,48946,48948],{"class":222,"line":223},[220,48945,343],{"class":264},[220,48947,347],{"class":420},[220,48949,359],{"class":264},[220,48951,48952,48954,48956],{"class":222,"line":179},[220,48953,364],{"class":264},[220,48955,48861],{"class":420},[220,48957,386],{"class":264},[220,48959,48960,48962,48964],{"class":222,"line":389},[220,48961,402],{"class":264},[220,48963,347],{"class":420},[220,48965,359],{"class":264},[212,48967,48968],{"className":468,"code":48883,"language":469,"meta":178,"style":178},[99,48969,48970,48978,48986],{"__ignoreMap":178},[220,48971,48972,48974,48976],{"class":222,"line":223},[220,48973,343],{"class":264},[220,48975,347],{"class":420},[220,48977,359],{"class":264},[220,48979,48980,48982,48984],{"class":222,"line":179},[220,48981,364],{"class":264},[220,48983,48861],{"class":420},[220,48985,386],{"class":264},[220,48987,48988,48990,48992],{"class":222,"line":389},[220,48989,402],{"class":264},[220,48991,347],{"class":420},[220,48993,359],{"class":264},[212,48995,48997],{"className":251,"code":48996,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Fog', props: {} }\n ]\n})\n",[99,48998,48999,49009,49013,49027,49031,49040,49044],{"__ignoreMap":178},[220,49000,49001,49003,49005,49007],{"class":222,"line":223},[220,49002,261],{"class":260},[220,49004,11512],{"class":264},[220,49006,268],{"class":260},[220,49008,4007],{"class":230},[220,49010,49011],{"class":222,"line":179},[220,49012,647],{"emptyLinePlaceholder":194},[220,49014,49015,49017,49019,49021,49023,49025],{"class":222,"line":389},[220,49016,1735],{"class":260},[220,49018,1738],{"class":420},[220,49020,1741],{"class":260},[220,49022,1744],{"class":260},[220,49024,1747],{"class":226},[220,49026,1750],{"class":264},[220,49028,49029],{"class":222,"line":399},[220,49030,1765],{"class":264},[220,49032,49033,49035,49038],{"class":222,"line":644},[220,49034,1770],{"class":264},[220,49036,49037],{"class":230},"'Fog'",[220,49039,2465],{"class":264},[220,49041,49042],{"class":222,"line":650},[220,49043,1787],{"class":264},[220,49045,49046],{"class":222,"line":656},[220,49047,1792],{"class":264},[1504,49049,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49051},[49052,49053],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":48861,"description":48869},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":49060,"title":49061,"body":49062,"category":33396,"componentType":25883,"description":49069,"extension":191,"meta":49330,"navigation":194,"path":49331,"requiresChild":194,"seo":49332,"stem":49333,"__hash__":49334},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":49063,"toc":49326},[49064,49067,49070,49072,49074,49077,49079,49324],[11,49065,49061],{"id":49066},"form3d",[15,49068,49069],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31911,49071],{"component":49061},[23,49073,31915],{"id":26533},[31917,49075],{":props":49076},"[{\"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,49078,31923],{"id":31922},[246,49080,49081,49126,49170,49214,49258],{":tabs":1557},[212,49082,49084],{"className":334,"code":49083,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,49085,49086,49094,49102,49110,49118],{"__ignoreMap":178},[220,49087,49088,49090,49092],{"class":222,"line":223},[220,49089,343],{"class":264},[220,49091,347],{"class":346},[220,49093,359],{"class":264},[220,49095,49096,49098,49100],{"class":222,"line":179},[220,49097,364],{"class":264},[220,49099,49061],{"class":346},[220,49101,359],{"class":264},[220,49103,49104,49106,49108],{"class":222,"line":389},[220,49105,2550],{"class":264},[220,49107,2553],{"class":346},[220,49109,386],{"class":264},[220,49111,49112,49114,49116],{"class":222,"line":399},[220,49113,2567],{"class":264},[220,49115,49061],{"class":346},[220,49117,359],{"class":264},[220,49119,49120,49122,49124],{"class":222,"line":644},[220,49121,402],{"class":264},[220,49123,347],{"class":346},[220,49125,359],{"class":264},[212,49127,49128],{"className":409,"code":49083,"language":411,"meta":178,"style":178},[99,49129,49130,49138,49146,49154,49162],{"__ignoreMap":178},[220,49131,49132,49134,49136],{"class":222,"line":223},[220,49133,343],{"class":264},[220,49135,347],{"class":420},[220,49137,359],{"class":264},[220,49139,49140,49142,49144],{"class":222,"line":179},[220,49141,364],{"class":264},[220,49143,49061],{"class":420},[220,49145,359],{"class":264},[220,49147,49148,49150,49152],{"class":222,"line":389},[220,49149,2550],{"class":264},[220,49151,2553],{"class":420},[220,49153,386],{"class":264},[220,49155,49156,49158,49160],{"class":222,"line":399},[220,49157,2567],{"class":264},[220,49159,49061],{"class":420},[220,49161,359],{"class":264},[220,49163,49164,49166,49168],{"class":222,"line":644},[220,49165,402],{"class":264},[220,49167,347],{"class":420},[220,49169,359],{"class":264},[212,49171,49172],{"className":2844,"code":49083,"language":2846,"meta":178,"style":178},[99,49173,49174,49182,49190,49198,49206],{"__ignoreMap":178},[220,49175,49176,49178,49180],{"class":222,"line":223},[220,49177,343],{"class":264},[220,49179,347],{"class":420},[220,49181,359],{"class":264},[220,49183,49184,49186,49188],{"class":222,"line":179},[220,49185,364],{"class":264},[220,49187,49061],{"class":420},[220,49189,359],{"class":264},[220,49191,49192,49194,49196],{"class":222,"line":389},[220,49193,2550],{"class":264},[220,49195,2553],{"class":420},[220,49197,386],{"class":264},[220,49199,49200,49202,49204],{"class":222,"line":399},[220,49201,2567],{"class":264},[220,49203,49061],{"class":420},[220,49205,359],{"class":264},[220,49207,49208,49210,49212],{"class":222,"line":644},[220,49209,402],{"class":264},[220,49211,347],{"class":420},[220,49213,359],{"class":264},[212,49215,49216],{"className":468,"code":49083,"language":469,"meta":178,"style":178},[99,49217,49218,49226,49234,49242,49250],{"__ignoreMap":178},[220,49219,49220,49222,49224],{"class":222,"line":223},[220,49221,343],{"class":264},[220,49223,347],{"class":420},[220,49225,359],{"class":264},[220,49227,49228,49230,49232],{"class":222,"line":179},[220,49229,364],{"class":264},[220,49231,49061],{"class":420},[220,49233,359],{"class":264},[220,49235,49236,49238,49240],{"class":222,"line":389},[220,49237,2550],{"class":264},[220,49239,2553],{"class":420},[220,49241,386],{"class":264},[220,49243,49244,49246,49248],{"class":222,"line":399},[220,49245,2567],{"class":264},[220,49247,49061],{"class":420},[220,49249,359],{"class":264},[220,49251,49252,49254,49256],{"class":222,"line":644},[220,49253,402],{"class":264},[220,49255,347],{"class":420},[220,49257,359],{"class":264},[212,49259,49261],{"className":251,"code":49260,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Form3D', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,49262,49263,49273,49277,49291,49295,49304,49312,49316,49320],{"__ignoreMap":178},[220,49264,49265,49267,49269,49271],{"class":222,"line":223},[220,49266,261],{"class":260},[220,49268,11512],{"class":264},[220,49270,268],{"class":260},[220,49272,4007],{"class":230},[220,49274,49275],{"class":222,"line":179},[220,49276,647],{"emptyLinePlaceholder":194},[220,49278,49279,49281,49283,49285,49287,49289],{"class":222,"line":389},[220,49280,1735],{"class":260},[220,49282,1738],{"class":420},[220,49284,1741],{"class":260},[220,49286,1744],{"class":260},[220,49288,1747],{"class":226},[220,49290,1750],{"class":264},[220,49292,49293],{"class":222,"line":399},[220,49294,1765],{"class":264},[220,49296,49297,49299,49302],{"class":222,"line":644},[220,49298,1770],{"class":264},[220,49300,49301],{"class":230},"'Form3D'",[220,49303,7009],{"class":264},[220,49305,49306,49308,49310],{"class":222,"line":650},[220,49307,7014],{"class":264},[220,49309,3206],{"class":230},[220,49311,2465],{"class":264},[220,49313,49314],{"class":222,"line":656},[220,49315,7031],{"class":264},[220,49317,49318],{"class":222,"line":673},[220,49319,1787],{"class":264},[220,49321,49322],{"class":222,"line":682},[220,49323,1792],{"class":264},[1504,49325,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49327},[49328,49329],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":49061,"description":49069},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":49336,"title":49337,"body":49338,"category":33063,"componentType":25877,"description":49345,"extension":191,"meta":49530,"navigation":194,"path":49531,"requiresChild":32530,"seo":49532,"stem":49533,"__hash__":49534},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":49339,"toc":49526},[49340,49343,49346,49348,49350,49353,49355,49524],[11,49341,49337],{"id":49342},"fractalnoise",[15,49344,49345],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31911,49347],{"component":49337},[23,49349,31915],{"id":26533},[31917,49351],{":props":49352},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"octaves\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Number of noise octaves (more = more detail)\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"2\",\"description\":\"How much finer each successive octave becomes\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How strongly finer octaves contribute — higher values create more texture contrast\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Speed at which the noise pattern evolves in place\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle in degrees\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,49354,31923],{"id":31922},[246,49356,49357,49386,49414,49442,49470],{":tabs":1557},[212,49358,49360],{"className":334,"code":49359,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,49361,49362,49370,49378],{"__ignoreMap":178},[220,49363,49364,49366,49368],{"class":222,"line":223},[220,49365,343],{"class":264},[220,49367,347],{"class":346},[220,49369,359],{"class":264},[220,49371,49372,49374,49376],{"class":222,"line":179},[220,49373,364],{"class":264},[220,49375,49337],{"class":346},[220,49377,386],{"class":264},[220,49379,49380,49382,49384],{"class":222,"line":389},[220,49381,402],{"class":264},[220,49383,347],{"class":346},[220,49385,359],{"class":264},[212,49387,49388],{"className":409,"code":49359,"language":411,"meta":178,"style":178},[99,49389,49390,49398,49406],{"__ignoreMap":178},[220,49391,49392,49394,49396],{"class":222,"line":223},[220,49393,343],{"class":264},[220,49395,347],{"class":420},[220,49397,359],{"class":264},[220,49399,49400,49402,49404],{"class":222,"line":179},[220,49401,364],{"class":264},[220,49403,49337],{"class":420},[220,49405,386],{"class":264},[220,49407,49408,49410,49412],{"class":222,"line":389},[220,49409,402],{"class":264},[220,49411,347],{"class":420},[220,49413,359],{"class":264},[212,49415,49416],{"className":2844,"code":49359,"language":2846,"meta":178,"style":178},[99,49417,49418,49426,49434],{"__ignoreMap":178},[220,49419,49420,49422,49424],{"class":222,"line":223},[220,49421,343],{"class":264},[220,49423,347],{"class":420},[220,49425,359],{"class":264},[220,49427,49428,49430,49432],{"class":222,"line":179},[220,49429,364],{"class":264},[220,49431,49337],{"class":420},[220,49433,386],{"class":264},[220,49435,49436,49438,49440],{"class":222,"line":389},[220,49437,402],{"class":264},[220,49439,347],{"class":420},[220,49441,359],{"class":264},[212,49443,49444],{"className":468,"code":49359,"language":469,"meta":178,"style":178},[99,49445,49446,49454,49462],{"__ignoreMap":178},[220,49447,49448,49450,49452],{"class":222,"line":223},[220,49449,343],{"class":264},[220,49451,347],{"class":420},[220,49453,359],{"class":264},[220,49455,49456,49458,49460],{"class":222,"line":179},[220,49457,364],{"class":264},[220,49459,49337],{"class":420},[220,49461,386],{"class":264},[220,49463,49464,49466,49468],{"class":222,"line":389},[220,49465,402],{"class":264},[220,49467,347],{"class":420},[220,49469,359],{"class":264},[212,49471,49473],{"className":251,"code":49472,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FractalNoise', props: {} }\n ]\n})\n",[99,49474,49475,49485,49489,49503,49507,49516,49520],{"__ignoreMap":178},[220,49476,49477,49479,49481,49483],{"class":222,"line":223},[220,49478,261],{"class":260},[220,49480,11512],{"class":264},[220,49482,268],{"class":260},[220,49484,4007],{"class":230},[220,49486,49487],{"class":222,"line":179},[220,49488,647],{"emptyLinePlaceholder":194},[220,49490,49491,49493,49495,49497,49499,49501],{"class":222,"line":389},[220,49492,1735],{"class":260},[220,49494,1738],{"class":420},[220,49496,1741],{"class":260},[220,49498,1744],{"class":260},[220,49500,1747],{"class":226},[220,49502,1750],{"class":264},[220,49504,49505],{"class":222,"line":399},[220,49506,1765],{"class":264},[220,49508,49509,49511,49514],{"class":222,"line":644},[220,49510,1770],{"class":264},[220,49512,49513],{"class":230},"'FractalNoise'",[220,49515,2465],{"class":264},[220,49517,49518],{"class":222,"line":650},[220,49519,1787],{"class":264},[220,49521,49522],{"class":222,"line":656},[220,49523,1792],{"class":264},[1504,49525,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49527},[49528,49529],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":49337,"description":49345},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":49536,"title":49537,"body":49538,"category":36569,"componentType":25877,"description":49545,"extension":191,"meta":49730,"navigation":194,"path":49731,"requiresChild":32530,"seo":49732,"stem":49733,"__hash__":49734},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":49539,"toc":49726},[49540,49543,49546,49548,49550,49553,49555,49724],[11,49541,49537],{"id":49542},"frost",[15,49544,49545],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31911,49547],{"component":49537},[23,49549,31915],{"id":26533},[31917,49551],{":props":49552},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the ice shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the ice shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the ice shape in degrees\"},{\"name\":\"iceColor\",\"type\":\"string\",\"default\":\"#0597fc\",\"description\":\"Ice tint — the colour deep ice saturates toward (thin edges stay near white)\"},{\"name\":\"ambient\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Cool ambient fill so shadowed ice never goes black\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Optical depth multiplier — how thick and deep the ice reads\"},{\"name\":\"absorption\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Beer–Lambert absorption strength — higher drives a deeper blue-teal core\"},{\"name\":\"scatter\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Forward back-lit glow transmitted through thin ice\"},{\"name\":\"frostAmount\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Overall density of the rim frost crystals\"},{\"name\":\"frostDepth\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How far the frost creeps inward from the rim\"},{\"name\":\"frostScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Crystal size — higher = finer, busier frost\"},{\"name\":\"frostRoughness\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Feathery roughness of the frost crystal surface\"},{\"name\":\"sparkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Tiny bright crystal glints catching the light at the rim\"},{\"name\":\"gloss\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Surface sheen — the broad soft icy specular\"},{\"name\":\"fresnel\",\"type\":\"number\",\"default\":\"0.02\",\"description\":\"Cold rim glow on grazing surfaces\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"300\",\"description\":\"Key light direction in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Sparkle twinkle speed. 0 freezes the sparkle.\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,49554,31923],{"id":31922},[246,49556,49557,49586,49614,49642,49670],{":tabs":1557},[212,49558,49560],{"className":334,"code":49559,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,49561,49562,49570,49578],{"__ignoreMap":178},[220,49563,49564,49566,49568],{"class":222,"line":223},[220,49565,343],{"class":264},[220,49567,347],{"class":346},[220,49569,359],{"class":264},[220,49571,49572,49574,49576],{"class":222,"line":179},[220,49573,364],{"class":264},[220,49575,49537],{"class":346},[220,49577,386],{"class":264},[220,49579,49580,49582,49584],{"class":222,"line":389},[220,49581,402],{"class":264},[220,49583,347],{"class":346},[220,49585,359],{"class":264},[212,49587,49588],{"className":409,"code":49559,"language":411,"meta":178,"style":178},[99,49589,49590,49598,49606],{"__ignoreMap":178},[220,49591,49592,49594,49596],{"class":222,"line":223},[220,49593,343],{"class":264},[220,49595,347],{"class":420},[220,49597,359],{"class":264},[220,49599,49600,49602,49604],{"class":222,"line":179},[220,49601,364],{"class":264},[220,49603,49537],{"class":420},[220,49605,386],{"class":264},[220,49607,49608,49610,49612],{"class":222,"line":389},[220,49609,402],{"class":264},[220,49611,347],{"class":420},[220,49613,359],{"class":264},[212,49615,49616],{"className":2844,"code":49559,"language":2846,"meta":178,"style":178},[99,49617,49618,49626,49634],{"__ignoreMap":178},[220,49619,49620,49622,49624],{"class":222,"line":223},[220,49621,343],{"class":264},[220,49623,347],{"class":420},[220,49625,359],{"class":264},[220,49627,49628,49630,49632],{"class":222,"line":179},[220,49629,364],{"class":264},[220,49631,49537],{"class":420},[220,49633,386],{"class":264},[220,49635,49636,49638,49640],{"class":222,"line":389},[220,49637,402],{"class":264},[220,49639,347],{"class":420},[220,49641,359],{"class":264},[212,49643,49644],{"className":468,"code":49559,"language":469,"meta":178,"style":178},[99,49645,49646,49654,49662],{"__ignoreMap":178},[220,49647,49648,49650,49652],{"class":222,"line":223},[220,49649,343],{"class":264},[220,49651,347],{"class":420},[220,49653,359],{"class":264},[220,49655,49656,49658,49660],{"class":222,"line":179},[220,49657,364],{"class":264},[220,49659,49537],{"class":420},[220,49661,386],{"class":264},[220,49663,49664,49666,49668],{"class":222,"line":389},[220,49665,402],{"class":264},[220,49667,347],{"class":420},[220,49669,359],{"class":264},[212,49671,49673],{"className":251,"code":49672,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Frost', props: {} }\n ]\n})\n",[99,49674,49675,49685,49689,49703,49707,49716,49720],{"__ignoreMap":178},[220,49676,49677,49679,49681,49683],{"class":222,"line":223},[220,49678,261],{"class":260},[220,49680,11512],{"class":264},[220,49682,268],{"class":260},[220,49684,4007],{"class":230},[220,49686,49687],{"class":222,"line":179},[220,49688,647],{"emptyLinePlaceholder":194},[220,49690,49691,49693,49695,49697,49699,49701],{"class":222,"line":389},[220,49692,1735],{"class":260},[220,49694,1738],{"class":420},[220,49696,1741],{"class":260},[220,49698,1744],{"class":260},[220,49700,1747],{"class":226},[220,49702,1750],{"class":264},[220,49704,49705],{"class":222,"line":399},[220,49706,1765],{"class":264},[220,49708,49709,49711,49714],{"class":222,"line":644},[220,49710,1770],{"class":264},[220,49712,49713],{"class":230},"'Frost'",[220,49715,2465],{"class":264},[220,49717,49718],{"class":222,"line":650},[220,49719,1787],{"class":264},[220,49721,49722],{"class":222,"line":656},[220,49723,1792],{"class":264},[1504,49725,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49727},[49728,49729],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":49537,"description":49545},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49736,"title":49737,"body":49738,"category":33063,"componentType":25877,"description":49745,"extension":191,"meta":49930,"navigation":194,"path":49931,"requiresChild":32530,"seo":49932,"stem":49933,"__hash__":49934},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49739,"toc":49926},[49740,49743,49746,49748,49750,49753,49755,49924],[11,49741,49737],{"id":49742},"gabornoise",[15,49744,49745],{},"Oriented sine-grain noise with a fingerprint-like flow",[31911,49747],{"component":49737},[23,49749,31915],{"id":26533},[31917,49751],{":props":49752},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Frequency of the oriented waves within each cell\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,49754,31923],{"id":31922},[246,49756,49757,49786,49814,49842,49870],{":tabs":1557},[212,49758,49760],{"className":334,"code":49759,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,49761,49762,49770,49778],{"__ignoreMap":178},[220,49763,49764,49766,49768],{"class":222,"line":223},[220,49765,343],{"class":264},[220,49767,347],{"class":346},[220,49769,359],{"class":264},[220,49771,49772,49774,49776],{"class":222,"line":179},[220,49773,364],{"class":264},[220,49775,49737],{"class":346},[220,49777,386],{"class":264},[220,49779,49780,49782,49784],{"class":222,"line":389},[220,49781,402],{"class":264},[220,49783,347],{"class":346},[220,49785,359],{"class":264},[212,49787,49788],{"className":409,"code":49759,"language":411,"meta":178,"style":178},[99,49789,49790,49798,49806],{"__ignoreMap":178},[220,49791,49792,49794,49796],{"class":222,"line":223},[220,49793,343],{"class":264},[220,49795,347],{"class":420},[220,49797,359],{"class":264},[220,49799,49800,49802,49804],{"class":222,"line":179},[220,49801,364],{"class":264},[220,49803,49737],{"class":420},[220,49805,386],{"class":264},[220,49807,49808,49810,49812],{"class":222,"line":389},[220,49809,402],{"class":264},[220,49811,347],{"class":420},[220,49813,359],{"class":264},[212,49815,49816],{"className":2844,"code":49759,"language":2846,"meta":178,"style":178},[99,49817,49818,49826,49834],{"__ignoreMap":178},[220,49819,49820,49822,49824],{"class":222,"line":223},[220,49821,343],{"class":264},[220,49823,347],{"class":420},[220,49825,359],{"class":264},[220,49827,49828,49830,49832],{"class":222,"line":179},[220,49829,364],{"class":264},[220,49831,49737],{"class":420},[220,49833,386],{"class":264},[220,49835,49836,49838,49840],{"class":222,"line":389},[220,49837,402],{"class":264},[220,49839,347],{"class":420},[220,49841,359],{"class":264},[212,49843,49844],{"className":468,"code":49759,"language":469,"meta":178,"style":178},[99,49845,49846,49854,49862],{"__ignoreMap":178},[220,49847,49848,49850,49852],{"class":222,"line":223},[220,49849,343],{"class":264},[220,49851,347],{"class":420},[220,49853,359],{"class":264},[220,49855,49856,49858,49860],{"class":222,"line":179},[220,49857,364],{"class":264},[220,49859,49737],{"class":420},[220,49861,386],{"class":264},[220,49863,49864,49866,49868],{"class":222,"line":389},[220,49865,402],{"class":264},[220,49867,347],{"class":420},[220,49869,359],{"class":264},[212,49871,49873],{"className":251,"code":49872,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'GaborNoise', props: {} }\n ]\n})\n",[99,49874,49875,49885,49889,49903,49907,49916,49920],{"__ignoreMap":178},[220,49876,49877,49879,49881,49883],{"class":222,"line":223},[220,49878,261],{"class":260},[220,49880,11512],{"class":264},[220,49882,268],{"class":260},[220,49884,4007],{"class":230},[220,49886,49887],{"class":222,"line":179},[220,49888,647],{"emptyLinePlaceholder":194},[220,49890,49891,49893,49895,49897,49899,49901],{"class":222,"line":389},[220,49892,1735],{"class":260},[220,49894,1738],{"class":420},[220,49896,1741],{"class":260},[220,49898,1744],{"class":260},[220,49900,1747],{"class":226},[220,49902,1750],{"class":264},[220,49904,49905],{"class":222,"line":399},[220,49906,1765],{"class":264},[220,49908,49909,49911,49914],{"class":222,"line":644},[220,49910,1770],{"class":264},[220,49912,49913],{"class":230},"'GaborNoise'",[220,49915,2465],{"class":264},[220,49917,49918],{"class":222,"line":650},[220,49919,1787],{"class":264},[220,49921,49922],{"class":222,"line":656},[220,49923,1792],{"class":264},[1504,49925,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":49927},[49928,49929],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":49737,"description":49745},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":49936,"title":15466,"body":49937,"category":36569,"componentType":25883,"description":49944,"extension":191,"meta":50204,"navigation":194,"path":50205,"requiresChild":194,"seo":50206,"stem":50207,"__hash__":50208},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":49938,"toc":50200},[49939,49942,49945,49947,49949,49952,49954,50198],[11,49940,15466],{"id":49941},"glass",[15,49943,49944],{},"Optically realistic glass lens driven in a custom shape",[31911,49946],{"component":15466},[23,49948,31915],{"id":26533},[31917,49950],{":props":49951},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the glass shape in degrees\"},{\"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\u002Fdiffuse\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,49953,31923],{"id":31922},[246,49955,49956,50001,50045,50089,50133],{":tabs":1557},[212,49957,49959],{"className":334,"code":49958,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,49960,49961,49969,49977,49985,49993],{"__ignoreMap":178},[220,49962,49963,49965,49967],{"class":222,"line":223},[220,49964,343],{"class":264},[220,49966,347],{"class":346},[220,49968,359],{"class":264},[220,49970,49971,49973,49975],{"class":222,"line":179},[220,49972,364],{"class":264},[220,49974,15466],{"class":346},[220,49976,359],{"class":264},[220,49978,49979,49981,49983],{"class":222,"line":389},[220,49980,2550],{"class":264},[220,49982,2553],{"class":346},[220,49984,386],{"class":264},[220,49986,49987,49989,49991],{"class":222,"line":399},[220,49988,2567],{"class":264},[220,49990,15466],{"class":346},[220,49992,359],{"class":264},[220,49994,49995,49997,49999],{"class":222,"line":644},[220,49996,402],{"class":264},[220,49998,347],{"class":346},[220,50000,359],{"class":264},[212,50002,50003],{"className":409,"code":49958,"language":411,"meta":178,"style":178},[99,50004,50005,50013,50021,50029,50037],{"__ignoreMap":178},[220,50006,50007,50009,50011],{"class":222,"line":223},[220,50008,343],{"class":264},[220,50010,347],{"class":420},[220,50012,359],{"class":264},[220,50014,50015,50017,50019],{"class":222,"line":179},[220,50016,364],{"class":264},[220,50018,15466],{"class":420},[220,50020,359],{"class":264},[220,50022,50023,50025,50027],{"class":222,"line":389},[220,50024,2550],{"class":264},[220,50026,2553],{"class":420},[220,50028,386],{"class":264},[220,50030,50031,50033,50035],{"class":222,"line":399},[220,50032,2567],{"class":264},[220,50034,15466],{"class":420},[220,50036,359],{"class":264},[220,50038,50039,50041,50043],{"class":222,"line":644},[220,50040,402],{"class":264},[220,50042,347],{"class":420},[220,50044,359],{"class":264},[212,50046,50047],{"className":2844,"code":49958,"language":2846,"meta":178,"style":178},[99,50048,50049,50057,50065,50073,50081],{"__ignoreMap":178},[220,50050,50051,50053,50055],{"class":222,"line":223},[220,50052,343],{"class":264},[220,50054,347],{"class":420},[220,50056,359],{"class":264},[220,50058,50059,50061,50063],{"class":222,"line":179},[220,50060,364],{"class":264},[220,50062,15466],{"class":420},[220,50064,359],{"class":264},[220,50066,50067,50069,50071],{"class":222,"line":389},[220,50068,2550],{"class":264},[220,50070,2553],{"class":420},[220,50072,386],{"class":264},[220,50074,50075,50077,50079],{"class":222,"line":399},[220,50076,2567],{"class":264},[220,50078,15466],{"class":420},[220,50080,359],{"class":264},[220,50082,50083,50085,50087],{"class":222,"line":644},[220,50084,402],{"class":264},[220,50086,347],{"class":420},[220,50088,359],{"class":264},[212,50090,50091],{"className":468,"code":49958,"language":469,"meta":178,"style":178},[99,50092,50093,50101,50109,50117,50125],{"__ignoreMap":178},[220,50094,50095,50097,50099],{"class":222,"line":223},[220,50096,343],{"class":264},[220,50098,347],{"class":420},[220,50100,359],{"class":264},[220,50102,50103,50105,50107],{"class":222,"line":179},[220,50104,364],{"class":264},[220,50106,15466],{"class":420},[220,50108,359],{"class":264},[220,50110,50111,50113,50115],{"class":222,"line":389},[220,50112,2550],{"class":264},[220,50114,2553],{"class":420},[220,50116,386],{"class":264},[220,50118,50119,50121,50123],{"class":222,"line":399},[220,50120,2567],{"class":264},[220,50122,15466],{"class":420},[220,50124,359],{"class":264},[220,50126,50127,50129,50131],{"class":222,"line":644},[220,50128,402],{"class":264},[220,50130,347],{"class":420},[220,50132,359],{"class":264},[212,50134,50136],{"className":251,"code":50135,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,50137,50138,50148,50152,50166,50170,50178,50186,50190,50194],{"__ignoreMap":178},[220,50139,50140,50142,50144,50146],{"class":222,"line":223},[220,50141,261],{"class":260},[220,50143,11512],{"class":264},[220,50145,268],{"class":260},[220,50147,4007],{"class":230},[220,50149,50150],{"class":222,"line":179},[220,50151,647],{"emptyLinePlaceholder":194},[220,50153,50154,50156,50158,50160,50162,50164],{"class":222,"line":389},[220,50155,1735],{"class":260},[220,50157,1738],{"class":420},[220,50159,1741],{"class":260},[220,50161,1744],{"class":260},[220,50163,1747],{"class":226},[220,50165,1750],{"class":264},[220,50167,50168],{"class":222,"line":399},[220,50169,1765],{"class":264},[220,50171,50172,50174,50176],{"class":222,"line":644},[220,50173,1770],{"class":264},[220,50175,21533],{"class":230},[220,50177,7009],{"class":264},[220,50179,50180,50182,50184],{"class":222,"line":650},[220,50181,7014],{"class":264},[220,50183,3206],{"class":230},[220,50185,2465],{"class":264},[220,50187,50188],{"class":222,"line":656},[220,50189,7031],{"class":264},[220,50191,50192],{"class":222,"line":673},[220,50193,1787],{"class":264},[220,50195,50196],{"class":222,"line":682},[220,50197,1792],{"class":264},[1504,50199,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":50201},[50202,50203],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":15466,"description":49944},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":50210,"title":6225,"body":50211,"category":33396,"componentType":25883,"description":50218,"extension":191,"meta":50535,"navigation":194,"path":50536,"requiresChild":194,"seo":50537,"stem":50538,"__hash__":50539},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":50212,"toc":50531},[50213,50216,50219,50221,50223,50226,50228,50529],[11,50214,6225],{"id":50215},"glasstiles",[15,50217,50218],{},"Refraction-like distortion in a tile grid pattern",[31911,50220],{"component":6225},[23,50222,31915],{"id":26533},[31917,50224],{":props":50225},"[{\"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,50227,31923],{"id":31922},[246,50229,50230,50287,50346,50402,50460],{":tabs":1557},[212,50231,50233],{"className":334,"code":50232,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50234,50235,50243,50250,50259,50263,50271,50279],{"__ignoreMap":178},[220,50236,50237,50239,50241],{"class":222,"line":223},[220,50238,343],{"class":264},[220,50240,347],{"class":346},[220,50242,359],{"class":264},[220,50244,50245,50247],{"class":222,"line":179},[220,50246,364],{"class":264},[220,50248,50249],{"class":346},"GlassTiles\n",[220,50251,50252,50254,50256],{"class":222,"line":389},[220,50253,20371],{"class":226},[220,50255,353],{"class":264},[220,50257,50258],{"class":230},"\"2\"\n",[220,50260,50261],{"class":222,"line":399},[220,50262,31959],{"class":264},[220,50264,50265,50267,50269],{"class":222,"line":644},[220,50266,2550],{"class":264},[220,50268,2553],{"class":346},[220,50270,386],{"class":264},[220,50272,50273,50275,50277],{"class":222,"line":650},[220,50274,2567],{"class":264},[220,50276,6225],{"class":346},[220,50278,359],{"class":264},[220,50280,50281,50283,50285],{"class":222,"line":656},[220,50282,402],{"class":264},[220,50284,347],{"class":346},[220,50286,359],{"class":264},[212,50288,50290],{"className":409,"code":50289,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50291,50292,50300,50306,50318,50322,50330,50338],{"__ignoreMap":178},[220,50293,50294,50296,50298],{"class":222,"line":223},[220,50295,343],{"class":264},[220,50297,347],{"class":420},[220,50299,359],{"class":264},[220,50301,50302,50304],{"class":222,"line":179},[220,50303,364],{"class":264},[220,50305,50249],{"class":420},[220,50307,50308,50310,50312,50314,50316],{"class":222,"line":389},[220,50309,20482],{"class":226},[220,50311,353],{"class":260},[220,50313,743],{"class":264},[220,50315,7214],{"class":420},[220,50317,749],{"class":264},[220,50319,50320],{"class":222,"line":399},[220,50321,31959],{"class":264},[220,50323,50324,50326,50328],{"class":222,"line":644},[220,50325,2550],{"class":264},[220,50327,2553],{"class":420},[220,50329,386],{"class":264},[220,50331,50332,50334,50336],{"class":222,"line":650},[220,50333,2567],{"class":264},[220,50335,6225],{"class":420},[220,50337,359],{"class":264},[220,50339,50340,50342,50344],{"class":222,"line":656},[220,50341,402],{"class":264},[220,50343,347],{"class":420},[220,50345,359],{"class":264},[212,50347,50348],{"className":2844,"code":50289,"language":2846,"meta":178,"style":178},[99,50349,50350,50358,50364,50374,50378,50386,50394],{"__ignoreMap":178},[220,50351,50352,50354,50356],{"class":222,"line":223},[220,50353,343],{"class":264},[220,50355,347],{"class":420},[220,50357,359],{"class":264},[220,50359,50360,50362],{"class":222,"line":179},[220,50361,364],{"class":264},[220,50363,50249],{"class":420},[220,50365,50366,50368,50370,50372],{"class":222,"line":389},[220,50367,20482],{"class":226},[220,50369,29871],{"class":264},[220,50371,7214],{"class":420},[220,50373,749],{"class":264},[220,50375,50376],{"class":222,"line":399},[220,50377,31959],{"class":264},[220,50379,50380,50382,50384],{"class":222,"line":644},[220,50381,2550],{"class":264},[220,50383,2553],{"class":420},[220,50385,386],{"class":264},[220,50387,50388,50390,50392],{"class":222,"line":650},[220,50389,2567],{"class":264},[220,50391,6225],{"class":420},[220,50393,359],{"class":264},[220,50395,50396,50398,50400],{"class":222,"line":656},[220,50397,402],{"class":264},[220,50399,347],{"class":420},[220,50401,359],{"class":264},[212,50403,50404],{"className":468,"code":50289,"language":469,"meta":178,"style":178},[99,50405,50406,50414,50420,50432,50436,50444,50452],{"__ignoreMap":178},[220,50407,50408,50410,50412],{"class":222,"line":223},[220,50409,343],{"class":264},[220,50411,347],{"class":420},[220,50413,359],{"class":264},[220,50415,50416,50418],{"class":222,"line":179},[220,50417,364],{"class":264},[220,50419,50249],{"class":420},[220,50421,50422,50424,50426,50428,50430],{"class":222,"line":389},[220,50423,20482],{"class":226},[220,50425,353],{"class":260},[220,50427,743],{"class":264},[220,50429,7214],{"class":420},[220,50431,749],{"class":264},[220,50433,50434],{"class":222,"line":399},[220,50435,31959],{"class":264},[220,50437,50438,50440,50442],{"class":222,"line":644},[220,50439,2550],{"class":264},[220,50441,2553],{"class":420},[220,50443,386],{"class":264},[220,50445,50446,50448,50450],{"class":222,"line":650},[220,50447,2567],{"class":264},[220,50449,6225],{"class":420},[220,50451,359],{"class":264},[220,50453,50454,50456,50458],{"class":222,"line":656},[220,50455,402],{"class":264},[220,50457,347],{"class":420},[220,50459,359],{"class":264},[212,50461,50463],{"className":251,"code":50462,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'GlassTiles', props: { intensity: 2 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,50464,50465,50475,50479,50493,50497,50509,50517,50521,50525],{"__ignoreMap":178},[220,50466,50467,50469,50471,50473],{"class":222,"line":223},[220,50468,261],{"class":260},[220,50470,11512],{"class":264},[220,50472,268],{"class":260},[220,50474,4007],{"class":230},[220,50476,50477],{"class":222,"line":179},[220,50478,647],{"emptyLinePlaceholder":194},[220,50480,50481,50483,50485,50487,50489,50491],{"class":222,"line":389},[220,50482,1735],{"class":260},[220,50484,1738],{"class":420},[220,50486,1741],{"class":260},[220,50488,1744],{"class":260},[220,50490,1747],{"class":226},[220,50492,1750],{"class":264},[220,50494,50495],{"class":222,"line":399},[220,50496,1765],{"class":264},[220,50498,50499,50501,50503,50505,50507],{"class":222,"line":644},[220,50500,1770],{"class":264},[220,50502,6583],{"class":230},[220,50504,32203],{"class":264},[220,50506,7214],{"class":420},[220,50508,7546],{"class":264},[220,50510,50511,50513,50515],{"class":222,"line":650},[220,50512,7014],{"class":264},[220,50514,3206],{"class":230},[220,50516,2465],{"class":264},[220,50518,50519],{"class":222,"line":656},[220,50520,7031],{"class":264},[220,50522,50523],{"class":222,"line":673},[220,50524,1787],{"class":264},[220,50526,50527],{"class":222,"line":682},[220,50528,1792],{"class":264},[1504,50530,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50532},[50533,50534],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":6225,"description":50218},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":50541,"title":50542,"body":50543,"category":32806,"componentType":25883,"description":50550,"extension":191,"meta":50867,"navigation":194,"path":50868,"requiresChild":194,"seo":50869,"stem":50870,"__hash__":50871},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":50544,"toc":50863},[50545,50548,50551,50553,50555,50558,50560,50861],[11,50546,50542],{"id":50547},"glitch",[15,50549,50550],{},"Digital glitch that melts pixels and distorts colors",[31911,50552],{"component":50542},[23,50554,31915],{"id":26533},[31917,50556],{":props":50557},"[{\"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\u002Fflipped content\"},{\"name\":\"scanlineIntensity\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Visibility of CRT-style horizontal scanlines in distorted areas\"}]",[23,50559,31923],{"id":31922},[246,50561,50562,50618,50677,50733,50791],{":tabs":1557},[212,50563,50565],{"className":334,"code":50564,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlitch>\n\u003C\u002FShader>\n",[99,50566,50567,50575,50582,50590,50594,50602,50610],{"__ignoreMap":178},[220,50568,50569,50571,50573],{"class":222,"line":223},[220,50570,343],{"class":264},[220,50572,347],{"class":346},[220,50574,359],{"class":264},[220,50576,50577,50579],{"class":222,"line":179},[220,50578,364],{"class":264},[220,50580,50581],{"class":346},"Glitch\n",[220,50583,50584,50586,50588],{"class":222,"line":389},[220,50585,20371],{"class":226},[220,50587,353],{"class":264},[220,50589,42158],{"class":230},[220,50591,50592],{"class":222,"line":399},[220,50593,31959],{"class":264},[220,50595,50596,50598,50600],{"class":222,"line":644},[220,50597,2550],{"class":264},[220,50599,2553],{"class":346},[220,50601,386],{"class":264},[220,50603,50604,50606,50608],{"class":222,"line":650},[220,50605,2567],{"class":264},[220,50607,50542],{"class":346},[220,50609,359],{"class":264},[220,50611,50612,50614,50616],{"class":222,"line":656},[220,50613,402],{"class":264},[220,50615,347],{"class":346},[220,50617,359],{"class":264},[212,50619,50621],{"className":409,"code":50620,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlitch>\n\u003C\u002FShader>\n",[99,50622,50623,50631,50637,50649,50653,50661,50669],{"__ignoreMap":178},[220,50624,50625,50627,50629],{"class":222,"line":223},[220,50626,343],{"class":264},[220,50628,347],{"class":420},[220,50630,359],{"class":264},[220,50632,50633,50635],{"class":222,"line":179},[220,50634,364],{"class":264},[220,50636,50581],{"class":420},[220,50638,50639,50641,50643,50645,50647],{"class":222,"line":389},[220,50640,20482],{"class":226},[220,50642,353],{"class":260},[220,50644,743],{"class":264},[220,50646,7754],{"class":420},[220,50648,749],{"class":264},[220,50650,50651],{"class":222,"line":399},[220,50652,31959],{"class":264},[220,50654,50655,50657,50659],{"class":222,"line":644},[220,50656,2550],{"class":264},[220,50658,2553],{"class":420},[220,50660,386],{"class":264},[220,50662,50663,50665,50667],{"class":222,"line":650},[220,50664,2567],{"class":264},[220,50666,50542],{"class":420},[220,50668,359],{"class":264},[220,50670,50671,50673,50675],{"class":222,"line":656},[220,50672,402],{"class":264},[220,50674,347],{"class":420},[220,50676,359],{"class":264},[212,50678,50679],{"className":2844,"code":50620,"language":2846,"meta":178,"style":178},[99,50680,50681,50689,50695,50705,50709,50717,50725],{"__ignoreMap":178},[220,50682,50683,50685,50687],{"class":222,"line":223},[220,50684,343],{"class":264},[220,50686,347],{"class":420},[220,50688,359],{"class":264},[220,50690,50691,50693],{"class":222,"line":179},[220,50692,364],{"class":264},[220,50694,50581],{"class":420},[220,50696,50697,50699,50701,50703],{"class":222,"line":389},[220,50698,20482],{"class":226},[220,50700,29871],{"class":264},[220,50702,7754],{"class":420},[220,50704,749],{"class":264},[220,50706,50707],{"class":222,"line":399},[220,50708,31959],{"class":264},[220,50710,50711,50713,50715],{"class":222,"line":644},[220,50712,2550],{"class":264},[220,50714,2553],{"class":420},[220,50716,386],{"class":264},[220,50718,50719,50721,50723],{"class":222,"line":650},[220,50720,2567],{"class":264},[220,50722,50542],{"class":420},[220,50724,359],{"class":264},[220,50726,50727,50729,50731],{"class":222,"line":656},[220,50728,402],{"class":264},[220,50730,347],{"class":420},[220,50732,359],{"class":264},[212,50734,50735],{"className":468,"code":50620,"language":469,"meta":178,"style":178},[99,50736,50737,50745,50751,50763,50767,50775,50783],{"__ignoreMap":178},[220,50738,50739,50741,50743],{"class":222,"line":223},[220,50740,343],{"class":264},[220,50742,347],{"class":420},[220,50744,359],{"class":264},[220,50746,50747,50749],{"class":222,"line":179},[220,50748,364],{"class":264},[220,50750,50581],{"class":420},[220,50752,50753,50755,50757,50759,50761],{"class":222,"line":389},[220,50754,20482],{"class":226},[220,50756,353],{"class":260},[220,50758,743],{"class":264},[220,50760,7754],{"class":420},[220,50762,749],{"class":264},[220,50764,50765],{"class":222,"line":399},[220,50766,31959],{"class":264},[220,50768,50769,50771,50773],{"class":222,"line":644},[220,50770,2550],{"class":264},[220,50772,2553],{"class":420},[220,50774,386],{"class":264},[220,50776,50777,50779,50781],{"class":222,"line":650},[220,50778,2567],{"class":264},[220,50780,50542],{"class":420},[220,50782,359],{"class":264},[220,50784,50785,50787,50789],{"class":222,"line":656},[220,50786,402],{"class":264},[220,50788,347],{"class":420},[220,50790,359],{"class":264},[212,50792,50794],{"className":251,"code":50793,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glitch', props: { intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,50795,50796,50806,50810,50824,50828,50841,50849,50853,50857],{"__ignoreMap":178},[220,50797,50798,50800,50802,50804],{"class":222,"line":223},[220,50799,261],{"class":260},[220,50801,11512],{"class":264},[220,50803,268],{"class":260},[220,50805,4007],{"class":230},[220,50807,50808],{"class":222,"line":179},[220,50809,647],{"emptyLinePlaceholder":194},[220,50811,50812,50814,50816,50818,50820,50822],{"class":222,"line":389},[220,50813,1735],{"class":260},[220,50815,1738],{"class":420},[220,50817,1741],{"class":260},[220,50819,1744],{"class":260},[220,50821,1747],{"class":226},[220,50823,1750],{"class":264},[220,50825,50826],{"class":222,"line":399},[220,50827,1765],{"class":264},[220,50829,50830,50832,50835,50837,50839],{"class":222,"line":644},[220,50831,1770],{"class":264},[220,50833,50834],{"class":230},"'Glitch'",[220,50836,32203],{"class":264},[220,50838,7754],{"class":420},[220,50840,7546],{"class":264},[220,50842,50843,50845,50847],{"class":222,"line":650},[220,50844,7014],{"class":264},[220,50846,3206],{"class":230},[220,50848,2465],{"class":264},[220,50850,50851],{"class":222,"line":656},[220,50852,7031],{"class":264},[220,50854,50855],{"class":222,"line":673},[220,50856,1787],{"class":264},[220,50858,50859],{"class":222,"line":682},[220,50860,1792],{"class":264},[1504,50862,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50864},[50865,50866],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":50542,"description":50550},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":50873,"title":11792,"body":50874,"category":32806,"componentType":25883,"description":50881,"extension":191,"meta":51198,"navigation":194,"path":51199,"requiresChild":194,"seo":51200,"stem":51201,"__hash__":51202},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":50875,"toc":51194},[50876,50879,50882,50884,50886,50889,50891,51192],[11,50877,11792],{"id":50878},"glow",[15,50880,50881],{},"Soft glow effect with adjustable intensity",[31911,50883],{"component":11792},[23,50885,31915],{"id":26533},[31917,50887],{":props":50888},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Glow intensity (brightness of the glow effect)\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness threshold for glow extraction (lower = more glow)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"25\",\"description\":\"Glow spread in pixels (clean up to ~72px, mild banding above)\"}]",[23,50890,31923],{"id":31922},[246,50892,50893,50949,51008,51064,51122],{":tabs":1557},[212,50894,50896],{"className":334,"code":50895,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50897,50898,50906,50913,50921,50925,50933,50941],{"__ignoreMap":178},[220,50899,50900,50902,50904],{"class":222,"line":223},[220,50901,343],{"class":264},[220,50903,347],{"class":346},[220,50905,359],{"class":264},[220,50907,50908,50910],{"class":222,"line":179},[220,50909,364],{"class":264},[220,50911,50912],{"class":346},"Glow\n",[220,50914,50915,50917,50919],{"class":222,"line":389},[220,50916,20371],{"class":226},[220,50918,353],{"class":264},[220,50920,36625],{"class":230},[220,50922,50923],{"class":222,"line":399},[220,50924,31959],{"class":264},[220,50926,50927,50929,50931],{"class":222,"line":644},[220,50928,2550],{"class":264},[220,50930,2553],{"class":346},[220,50932,386],{"class":264},[220,50934,50935,50937,50939],{"class":222,"line":650},[220,50936,2567],{"class":264},[220,50938,11792],{"class":346},[220,50940,359],{"class":264},[220,50942,50943,50945,50947],{"class":222,"line":656},[220,50944,402],{"class":264},[220,50946,347],{"class":346},[220,50948,359],{"class":264},[212,50950,50952],{"className":409,"code":50951,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50953,50954,50962,50968,50980,50984,50992,51000],{"__ignoreMap":178},[220,50955,50956,50958,50960],{"class":222,"line":223},[220,50957,343],{"class":264},[220,50959,347],{"class":420},[220,50961,359],{"class":264},[220,50963,50964,50966],{"class":222,"line":179},[220,50965,364],{"class":264},[220,50967,50912],{"class":420},[220,50969,50970,50972,50974,50976,50978],{"class":222,"line":389},[220,50971,20482],{"class":226},[220,50973,353],{"class":260},[220,50975,743],{"class":264},[220,50977,8677],{"class":420},[220,50979,749],{"class":264},[220,50981,50982],{"class":222,"line":399},[220,50983,31959],{"class":264},[220,50985,50986,50988,50990],{"class":222,"line":644},[220,50987,2550],{"class":264},[220,50989,2553],{"class":420},[220,50991,386],{"class":264},[220,50993,50994,50996,50998],{"class":222,"line":650},[220,50995,2567],{"class":264},[220,50997,11792],{"class":420},[220,50999,359],{"class":264},[220,51001,51002,51004,51006],{"class":222,"line":656},[220,51003,402],{"class":264},[220,51005,347],{"class":420},[220,51007,359],{"class":264},[212,51009,51010],{"className":2844,"code":50951,"language":2846,"meta":178,"style":178},[99,51011,51012,51020,51026,51036,51040,51048,51056],{"__ignoreMap":178},[220,51013,51014,51016,51018],{"class":222,"line":223},[220,51015,343],{"class":264},[220,51017,347],{"class":420},[220,51019,359],{"class":264},[220,51021,51022,51024],{"class":222,"line":179},[220,51023,364],{"class":264},[220,51025,50912],{"class":420},[220,51027,51028,51030,51032,51034],{"class":222,"line":389},[220,51029,20482],{"class":226},[220,51031,29871],{"class":264},[220,51033,8677],{"class":420},[220,51035,749],{"class":264},[220,51037,51038],{"class":222,"line":399},[220,51039,31959],{"class":264},[220,51041,51042,51044,51046],{"class":222,"line":644},[220,51043,2550],{"class":264},[220,51045,2553],{"class":420},[220,51047,386],{"class":264},[220,51049,51050,51052,51054],{"class":222,"line":650},[220,51051,2567],{"class":264},[220,51053,11792],{"class":420},[220,51055,359],{"class":264},[220,51057,51058,51060,51062],{"class":222,"line":656},[220,51059,402],{"class":264},[220,51061,347],{"class":420},[220,51063,359],{"class":264},[212,51065,51066],{"className":468,"code":50951,"language":469,"meta":178,"style":178},[99,51067,51068,51076,51082,51094,51098,51106,51114],{"__ignoreMap":178},[220,51069,51070,51072,51074],{"class":222,"line":223},[220,51071,343],{"class":264},[220,51073,347],{"class":420},[220,51075,359],{"class":264},[220,51077,51078,51080],{"class":222,"line":179},[220,51079,364],{"class":264},[220,51081,50912],{"class":420},[220,51083,51084,51086,51088,51090,51092],{"class":222,"line":389},[220,51085,20482],{"class":226},[220,51087,353],{"class":260},[220,51089,743],{"class":264},[220,51091,8677],{"class":420},[220,51093,749],{"class":264},[220,51095,51096],{"class":222,"line":399},[220,51097,31959],{"class":264},[220,51099,51100,51102,51104],{"class":222,"line":644},[220,51101,2550],{"class":264},[220,51103,2553],{"class":420},[220,51105,386],{"class":264},[220,51107,51108,51110,51112],{"class":222,"line":650},[220,51109,2567],{"class":264},[220,51111,11792],{"class":420},[220,51113,359],{"class":264},[220,51115,51116,51118,51120],{"class":222,"line":656},[220,51117,402],{"class":264},[220,51119,347],{"class":420},[220,51121,359],{"class":264},[212,51123,51125],{"className":251,"code":51124,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glow', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,51126,51127,51137,51141,51155,51159,51172,51180,51184,51188],{"__ignoreMap":178},[220,51128,51129,51131,51133,51135],{"class":222,"line":223},[220,51130,261],{"class":260},[220,51132,11512],{"class":264},[220,51134,268],{"class":260},[220,51136,4007],{"class":230},[220,51138,51139],{"class":222,"line":179},[220,51140,647],{"emptyLinePlaceholder":194},[220,51142,51143,51145,51147,51149,51151,51153],{"class":222,"line":389},[220,51144,1735],{"class":260},[220,51146,1738],{"class":420},[220,51148,1741],{"class":260},[220,51150,1744],{"class":260},[220,51152,1747],{"class":226},[220,51154,1750],{"class":264},[220,51156,51157],{"class":222,"line":399},[220,51158,1765],{"class":264},[220,51160,51161,51163,51166,51168,51170],{"class":222,"line":644},[220,51162,1770],{"class":264},[220,51164,51165],{"class":230},"'Glow'",[220,51167,32203],{"class":264},[220,51169,8677],{"class":420},[220,51171,7546],{"class":264},[220,51173,51174,51176,51178],{"class":222,"line":650},[220,51175,7014],{"class":264},[220,51177,3206],{"class":230},[220,51179,2465],{"class":264},[220,51181,51182],{"class":222,"line":656},[220,51183,7031],{"class":264},[220,51185,51186],{"class":222,"line":673},[220,51187,1787],{"class":264},[220,51189,51190],{"class":222,"line":682},[220,51191,1792],{"class":264},[1504,51193,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51195},[51196,51197],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11792,"description":50881},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":51204,"title":51205,"body":51206,"category":33063,"componentType":25877,"description":51213,"extension":191,"meta":51454,"navigation":194,"path":51455,"requiresChild":32530,"seo":51456,"stem":51457,"__hash__":51458},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":51207,"toc":51450},[51208,51211,51214,51216,51218,51221,51223,51448],[11,51209,51205],{"id":51210},"godrays",[15,51212,51213],{},"Volumetric light rays emanating from a point",[31911,51215],{"component":51205},[23,51217,31915],{"id":26533},[31917,51219],{":props":51220},"[{\"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,51222,31923],{"id":31922},[246,51224,51225,51265,51308,51348,51390],{":tabs":1557},[212,51226,51228],{"className":334,"code":51227,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,51229,51230,51238,51245,51253,51257],{"__ignoreMap":178},[220,51231,51232,51234,51236],{"class":222,"line":223},[220,51233,343],{"class":264},[220,51235,347],{"class":346},[220,51237,359],{"class":264},[220,51239,51240,51242],{"class":222,"line":179},[220,51241,364],{"class":264},[220,51243,51244],{"class":346},"Godrays\n",[220,51246,51247,51249,51251],{"class":222,"line":389},[220,51248,20371],{"class":226},[220,51250,353],{"class":264},[220,51252,9650],{"class":230},[220,51254,51255],{"class":222,"line":399},[220,51256,1234],{"class":264},[220,51258,51259,51261,51263],{"class":222,"line":644},[220,51260,402],{"class":264},[220,51262,347],{"class":346},[220,51264,359],{"class":264},[212,51266,51268],{"className":409,"code":51267,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,51269,51270,51278,51284,51296,51300],{"__ignoreMap":178},[220,51271,51272,51274,51276],{"class":222,"line":223},[220,51273,343],{"class":264},[220,51275,347],{"class":420},[220,51277,359],{"class":264},[220,51279,51280,51282],{"class":222,"line":179},[220,51281,364],{"class":264},[220,51283,51244],{"class":420},[220,51285,51286,51288,51290,51292,51294],{"class":222,"line":389},[220,51287,20482],{"class":226},[220,51289,353],{"class":260},[220,51291,743],{"class":264},[220,51293,6299],{"class":420},[220,51295,749],{"class":264},[220,51297,51298],{"class":222,"line":399},[220,51299,1234],{"class":264},[220,51301,51302,51304,51306],{"class":222,"line":644},[220,51303,402],{"class":264},[220,51305,347],{"class":420},[220,51307,359],{"class":264},[212,51309,51310],{"className":2844,"code":51267,"language":2846,"meta":178,"style":178},[99,51311,51312,51320,51326,51336,51340],{"__ignoreMap":178},[220,51313,51314,51316,51318],{"class":222,"line":223},[220,51315,343],{"class":264},[220,51317,347],{"class":420},[220,51319,359],{"class":264},[220,51321,51322,51324],{"class":222,"line":179},[220,51323,364],{"class":264},[220,51325,51244],{"class":420},[220,51327,51328,51330,51332,51334],{"class":222,"line":389},[220,51329,20482],{"class":226},[220,51331,29871],{"class":264},[220,51333,6299],{"class":420},[220,51335,749],{"class":264},[220,51337,51338],{"class":222,"line":399},[220,51339,1234],{"class":264},[220,51341,51342,51344,51346],{"class":222,"line":644},[220,51343,402],{"class":264},[220,51345,347],{"class":420},[220,51347,359],{"class":264},[212,51349,51350],{"className":468,"code":51267,"language":469,"meta":178,"style":178},[99,51351,51352,51360,51366,51378,51382],{"__ignoreMap":178},[220,51353,51354,51356,51358],{"class":222,"line":223},[220,51355,343],{"class":264},[220,51357,347],{"class":420},[220,51359,359],{"class":264},[220,51361,51362,51364],{"class":222,"line":179},[220,51363,364],{"class":264},[220,51365,51244],{"class":420},[220,51367,51368,51370,51372,51374,51376],{"class":222,"line":389},[220,51369,20482],{"class":226},[220,51371,353],{"class":260},[220,51373,743],{"class":264},[220,51375,6299],{"class":420},[220,51377,749],{"class":264},[220,51379,51380],{"class":222,"line":399},[220,51381,1234],{"class":264},[220,51383,51384,51386,51388],{"class":222,"line":644},[220,51385,402],{"class":264},[220,51387,347],{"class":420},[220,51389,359],{"class":264},[212,51391,51393],{"className":251,"code":51392,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Godrays', props: { intensity: 0.8 } }\n ]\n})\n",[99,51394,51395,51405,51409,51423,51427,51440,51444],{"__ignoreMap":178},[220,51396,51397,51399,51401,51403],{"class":222,"line":223},[220,51398,261],{"class":260},[220,51400,11512],{"class":264},[220,51402,268],{"class":260},[220,51404,4007],{"class":230},[220,51406,51407],{"class":222,"line":179},[220,51408,647],{"emptyLinePlaceholder":194},[220,51410,51411,51413,51415,51417,51419,51421],{"class":222,"line":389},[220,51412,1735],{"class":260},[220,51414,1738],{"class":420},[220,51416,1741],{"class":260},[220,51418,1744],{"class":260},[220,51420,1747],{"class":226},[220,51422,1750],{"class":264},[220,51424,51425],{"class":222,"line":399},[220,51426,1765],{"class":264},[220,51428,51429,51431,51434,51436,51438],{"class":222,"line":644},[220,51430,1770],{"class":264},[220,51432,51433],{"class":230},"'Godrays'",[220,51435,32203],{"class":264},[220,51437,6299],{"class":420},[220,51439,1782],{"class":264},[220,51441,51442],{"class":222,"line":650},[220,51443,1787],{"class":264},[220,51445,51446],{"class":222,"line":656},[220,51447,1792],{"class":264},[1504,51449,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51451},[51452,51453],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":51205,"description":51213},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":51460,"title":51461,"body":51462,"category":36569,"componentType":25877,"description":51469,"extension":191,"meta":51654,"navigation":194,"path":51655,"requiresChild":32530,"seo":51656,"stem":51657,"__hash__":51658},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":51463,"toc":51650},[51464,51467,51470,51472,51474,51477,51479,51648],[11,51465,51461],{"id":51466},"goo",[15,51468,51469],{},"Photoreal wet liquid — animated 3D metaball blobs that merge and bulge to loosely form the shape, with sliding wet highlights, a clearcoat rim and a translucent body",[31911,51471],{"component":51461},[23,51473,31915],{"id":26533},[31917,51475],{":props":51476},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the goo\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the goo (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the goo in degrees\"},{\"name\":\"gooColor\",\"type\":\"string\",\"default\":\"#37c95a\",\"description\":\"Base liquid color (a glossy slime green by default)\"},{\"name\":\"translucency\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Subsurface glow strength — deep lobes transmit more color\"},{\"name\":\"absorb\",\"type\":\"number\",\"default\":\"2\",\"description\":\"How fast thin areas clear and thick areas saturate (Beer–Lambert)\"},{\"name\":\"containment\",\"type\":\"number\",\"default\":\"0.9\",\"description\":\"0 = free blobs that ignore the shape, 1 = goo fills the shape and its surface conforms to the 3D form (highlights track the faces as it rotates)\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.06\",\"description\":\"Softness of the blob coverage edge\"},{\"name\":\"blobScale\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Base radius of each liquid lobe\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How far the lobes scatter across the shape\"},{\"name\":\"merge\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How much the lobes fuse together — low = distinct beads, high = one fused mass\"},{\"name\":\"bulge\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How 3D-rounded each lobe reads — dome height of the wet surface\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Iso-surface level — lower makes fatter, fuller blobs\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"300\",\"description\":\"Light direction in degrees\"},{\"name\":\"wetness\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Master scale on the sharp specular highlight and clearcoat rim\"},{\"name\":\"fresnel\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Clearcoat fresnel rim strength wrapping each lobe\"},{\"name\":\"specColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Highlight \u002F rim color (white reads as a clear wet coat)\"},{\"name\":\"ambient\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Base fill so shadowed goo isn't black\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Drift and breathe speed of the blobs. 0 pauses.\"},{\"name\":\"wobble\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Drift amplitude — how far the lobe centers wander\"},{\"name\":\"breathe\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Radius pulsing amplitude — lobes swell and shrink\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Variation offset — shifts the blob arrangement\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,51478,31923],{"id":31922},[246,51480,51481,51510,51538,51566,51594],{":tabs":1557},[212,51482,51484],{"className":334,"code":51483,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,51485,51486,51494,51502],{"__ignoreMap":178},[220,51487,51488,51490,51492],{"class":222,"line":223},[220,51489,343],{"class":264},[220,51491,347],{"class":346},[220,51493,359],{"class":264},[220,51495,51496,51498,51500],{"class":222,"line":179},[220,51497,364],{"class":264},[220,51499,51461],{"class":346},[220,51501,386],{"class":264},[220,51503,51504,51506,51508],{"class":222,"line":389},[220,51505,402],{"class":264},[220,51507,347],{"class":346},[220,51509,359],{"class":264},[212,51511,51512],{"className":409,"code":51483,"language":411,"meta":178,"style":178},[99,51513,51514,51522,51530],{"__ignoreMap":178},[220,51515,51516,51518,51520],{"class":222,"line":223},[220,51517,343],{"class":264},[220,51519,347],{"class":420},[220,51521,359],{"class":264},[220,51523,51524,51526,51528],{"class":222,"line":179},[220,51525,364],{"class":264},[220,51527,51461],{"class":420},[220,51529,386],{"class":264},[220,51531,51532,51534,51536],{"class":222,"line":389},[220,51533,402],{"class":264},[220,51535,347],{"class":420},[220,51537,359],{"class":264},[212,51539,51540],{"className":2844,"code":51483,"language":2846,"meta":178,"style":178},[99,51541,51542,51550,51558],{"__ignoreMap":178},[220,51543,51544,51546,51548],{"class":222,"line":223},[220,51545,343],{"class":264},[220,51547,347],{"class":420},[220,51549,359],{"class":264},[220,51551,51552,51554,51556],{"class":222,"line":179},[220,51553,364],{"class":264},[220,51555,51461],{"class":420},[220,51557,386],{"class":264},[220,51559,51560,51562,51564],{"class":222,"line":389},[220,51561,402],{"class":264},[220,51563,347],{"class":420},[220,51565,359],{"class":264},[212,51567,51568],{"className":468,"code":51483,"language":469,"meta":178,"style":178},[99,51569,51570,51578,51586],{"__ignoreMap":178},[220,51571,51572,51574,51576],{"class":222,"line":223},[220,51573,343],{"class":264},[220,51575,347],{"class":420},[220,51577,359],{"class":264},[220,51579,51580,51582,51584],{"class":222,"line":179},[220,51581,364],{"class":264},[220,51583,51461],{"class":420},[220,51585,386],{"class":264},[220,51587,51588,51590,51592],{"class":222,"line":389},[220,51589,402],{"class":264},[220,51591,347],{"class":420},[220,51593,359],{"class":264},[212,51595,51597],{"className":251,"code":51596,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Goo', props: {} }\n ]\n})\n",[99,51598,51599,51609,51613,51627,51631,51640,51644],{"__ignoreMap":178},[220,51600,51601,51603,51605,51607],{"class":222,"line":223},[220,51602,261],{"class":260},[220,51604,11512],{"class":264},[220,51606,268],{"class":260},[220,51608,4007],{"class":230},[220,51610,51611],{"class":222,"line":179},[220,51612,647],{"emptyLinePlaceholder":194},[220,51614,51615,51617,51619,51621,51623,51625],{"class":222,"line":389},[220,51616,1735],{"class":260},[220,51618,1738],{"class":420},[220,51620,1741],{"class":260},[220,51622,1744],{"class":260},[220,51624,1747],{"class":226},[220,51626,1750],{"class":264},[220,51628,51629],{"class":222,"line":399},[220,51630,1765],{"class":264},[220,51632,51633,51635,51638],{"class":222,"line":644},[220,51634,1770],{"class":264},[220,51636,51637],{"class":230},"'Goo'",[220,51639,2465],{"class":264},[220,51641,51642],{"class":222,"line":650},[220,51643,1787],{"class":264},[220,51645,51646],{"class":222,"line":656},[220,51647,1792],{"class":264},[1504,51649,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":51651},[51652,51653],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":51461,"description":51469},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51660,"title":51661,"body":51662,"category":32806,"componentType":25883,"description":51669,"extension":191,"meta":51930,"navigation":194,"path":51931,"requiresChild":194,"seo":51932,"stem":51933,"__hash__":51934},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51663,"toc":51926},[51664,51667,51670,51672,51674,51677,51679,51924],[11,51665,51661],{"id":51666},"gradientmap",[15,51668,51669],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31911,51671],{"component":51661},[23,51673,31915],{"id":26533},[31917,51675],{":props":51676},"[{\"name\":\"palette\",\"type\":\"\\\"rainbow\\\" | \\\"sunset\\\" | \\\"ocean\\\" | \\\"fire\\\" | \\\"pastel\\\" | \\\"neon\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"Built-in cosine palette, or Custom Colors to pick your own stops\"},{\"name\":\"colorLow\",\"type\":\"string\",\"default\":\"#1a0b2e\",\"description\":\"Color for the darkest tones\"},{\"name\":\"colorMid\",\"type\":\"string\",\"default\":\"#e94560\",\"description\":\"Color for the midtones\"},{\"name\":\"colorHigh\",\"type\":\"string\",\"default\":\"#f9ed69\",\"description\":\"Color for the brightest tones\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Gradient animation speed (0 = static). The gradient cycles seamlessly.\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Steepness of the luminance-to-gradient mapping\"},{\"name\":\"blackPoint\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Input shadow clip — luminance at\u002Fbelow this maps to the start of the gradient\"},{\"name\":\"whitePoint\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Input highlight clip — luminance at\u002Fabove this maps to the end of the gradient\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blend between the original image (0) and the gradient-mapped result (1)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for interpolating custom colors\"}]",[23,51678,31923],{"id":31922},[246,51680,51681,51726,51770,51814,51858],{":tabs":1557},[212,51682,51684],{"className":334,"code":51683,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51685,51686,51694,51702,51710,51718],{"__ignoreMap":178},[220,51687,51688,51690,51692],{"class":222,"line":223},[220,51689,343],{"class":264},[220,51691,347],{"class":346},[220,51693,359],{"class":264},[220,51695,51696,51698,51700],{"class":222,"line":179},[220,51697,364],{"class":264},[220,51699,51661],{"class":346},[220,51701,359],{"class":264},[220,51703,51704,51706,51708],{"class":222,"line":389},[220,51705,2550],{"class":264},[220,51707,2553],{"class":346},[220,51709,386],{"class":264},[220,51711,51712,51714,51716],{"class":222,"line":399},[220,51713,2567],{"class":264},[220,51715,51661],{"class":346},[220,51717,359],{"class":264},[220,51719,51720,51722,51724],{"class":222,"line":644},[220,51721,402],{"class":264},[220,51723,347],{"class":346},[220,51725,359],{"class":264},[212,51727,51728],{"className":409,"code":51683,"language":411,"meta":178,"style":178},[99,51729,51730,51738,51746,51754,51762],{"__ignoreMap":178},[220,51731,51732,51734,51736],{"class":222,"line":223},[220,51733,343],{"class":264},[220,51735,347],{"class":420},[220,51737,359],{"class":264},[220,51739,51740,51742,51744],{"class":222,"line":179},[220,51741,364],{"class":264},[220,51743,51661],{"class":420},[220,51745,359],{"class":264},[220,51747,51748,51750,51752],{"class":222,"line":389},[220,51749,2550],{"class":264},[220,51751,2553],{"class":420},[220,51753,386],{"class":264},[220,51755,51756,51758,51760],{"class":222,"line":399},[220,51757,2567],{"class":264},[220,51759,51661],{"class":420},[220,51761,359],{"class":264},[220,51763,51764,51766,51768],{"class":222,"line":644},[220,51765,402],{"class":264},[220,51767,347],{"class":420},[220,51769,359],{"class":264},[212,51771,51772],{"className":2844,"code":51683,"language":2846,"meta":178,"style":178},[99,51773,51774,51782,51790,51798,51806],{"__ignoreMap":178},[220,51775,51776,51778,51780],{"class":222,"line":223},[220,51777,343],{"class":264},[220,51779,347],{"class":420},[220,51781,359],{"class":264},[220,51783,51784,51786,51788],{"class":222,"line":179},[220,51785,364],{"class":264},[220,51787,51661],{"class":420},[220,51789,359],{"class":264},[220,51791,51792,51794,51796],{"class":222,"line":389},[220,51793,2550],{"class":264},[220,51795,2553],{"class":420},[220,51797,386],{"class":264},[220,51799,51800,51802,51804],{"class":222,"line":399},[220,51801,2567],{"class":264},[220,51803,51661],{"class":420},[220,51805,359],{"class":264},[220,51807,51808,51810,51812],{"class":222,"line":644},[220,51809,402],{"class":264},[220,51811,347],{"class":420},[220,51813,359],{"class":264},[212,51815,51816],{"className":468,"code":51683,"language":469,"meta":178,"style":178},[99,51817,51818,51826,51834,51842,51850],{"__ignoreMap":178},[220,51819,51820,51822,51824],{"class":222,"line":223},[220,51821,343],{"class":264},[220,51823,347],{"class":420},[220,51825,359],{"class":264},[220,51827,51828,51830,51832],{"class":222,"line":179},[220,51829,364],{"class":264},[220,51831,51661],{"class":420},[220,51833,359],{"class":264},[220,51835,51836,51838,51840],{"class":222,"line":389},[220,51837,2550],{"class":264},[220,51839,2553],{"class":420},[220,51841,386],{"class":264},[220,51843,51844,51846,51848],{"class":222,"line":399},[220,51845,2567],{"class":264},[220,51847,51661],{"class":420},[220,51849,359],{"class":264},[220,51851,51852,51854,51856],{"class":222,"line":644},[220,51853,402],{"class":264},[220,51855,347],{"class":420},[220,51857,359],{"class":264},[212,51859,51861],{"className":251,"code":51860,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'GradientMap', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,51862,51863,51873,51877,51891,51895,51904,51912,51916,51920],{"__ignoreMap":178},[220,51864,51865,51867,51869,51871],{"class":222,"line":223},[220,51866,261],{"class":260},[220,51868,11512],{"class":264},[220,51870,268],{"class":260},[220,51872,4007],{"class":230},[220,51874,51875],{"class":222,"line":179},[220,51876,647],{"emptyLinePlaceholder":194},[220,51878,51879,51881,51883,51885,51887,51889],{"class":222,"line":389},[220,51880,1735],{"class":260},[220,51882,1738],{"class":420},[220,51884,1741],{"class":260},[220,51886,1744],{"class":260},[220,51888,1747],{"class":226},[220,51890,1750],{"class":264},[220,51892,51893],{"class":222,"line":399},[220,51894,1765],{"class":264},[220,51896,51897,51899,51902],{"class":222,"line":644},[220,51898,1770],{"class":264},[220,51900,51901],{"class":230},"'GradientMap'",[220,51903,7009],{"class":264},[220,51905,51906,51908,51910],{"class":222,"line":650},[220,51907,7014],{"class":264},[220,51909,3206],{"class":230},[220,51911,2465],{"class":264},[220,51913,51914],{"class":222,"line":656},[220,51915,7031],{"class":264},[220,51917,51918],{"class":222,"line":673},[220,51919,1787],{"class":264},[220,51921,51922],{"class":222,"line":682},[220,51923,1792],{"class":264},[1504,51925,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":51927},[51928,51929],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51661,"description":51669},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":51936,"title":51937,"body":51938,"category":36368,"componentType":25883,"description":51945,"extension":191,"meta":52200,"navigation":194,"path":52201,"requiresChild":194,"seo":52202,"stem":52203,"__hash__":52204},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":51939,"toc":52197},[51940,51943,51946,51948,51950,52195],[11,51941,51937],{"id":51942},"grayscale",[15,51944,51945],{},"Convert colors to black and white",[31911,51947],{"component":51937},[23,51949,31923],{"id":31922},[246,51951,51952,51997,52041,52085,52129],{":tabs":1557},[212,51953,51955],{"className":334,"code":51954,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,51956,51957,51965,51973,51981,51989],{"__ignoreMap":178},[220,51958,51959,51961,51963],{"class":222,"line":223},[220,51960,343],{"class":264},[220,51962,347],{"class":346},[220,51964,359],{"class":264},[220,51966,51967,51969,51971],{"class":222,"line":179},[220,51968,364],{"class":264},[220,51970,51937],{"class":346},[220,51972,359],{"class":264},[220,51974,51975,51977,51979],{"class":222,"line":389},[220,51976,2550],{"class":264},[220,51978,2553],{"class":346},[220,51980,386],{"class":264},[220,51982,51983,51985,51987],{"class":222,"line":399},[220,51984,2567],{"class":264},[220,51986,51937],{"class":346},[220,51988,359],{"class":264},[220,51990,51991,51993,51995],{"class":222,"line":644},[220,51992,402],{"class":264},[220,51994,347],{"class":346},[220,51996,359],{"class":264},[212,51998,51999],{"className":409,"code":51954,"language":411,"meta":178,"style":178},[99,52000,52001,52009,52017,52025,52033],{"__ignoreMap":178},[220,52002,52003,52005,52007],{"class":222,"line":223},[220,52004,343],{"class":264},[220,52006,347],{"class":420},[220,52008,359],{"class":264},[220,52010,52011,52013,52015],{"class":222,"line":179},[220,52012,364],{"class":264},[220,52014,51937],{"class":420},[220,52016,359],{"class":264},[220,52018,52019,52021,52023],{"class":222,"line":389},[220,52020,2550],{"class":264},[220,52022,2553],{"class":420},[220,52024,386],{"class":264},[220,52026,52027,52029,52031],{"class":222,"line":399},[220,52028,2567],{"class":264},[220,52030,51937],{"class":420},[220,52032,359],{"class":264},[220,52034,52035,52037,52039],{"class":222,"line":644},[220,52036,402],{"class":264},[220,52038,347],{"class":420},[220,52040,359],{"class":264},[212,52042,52043],{"className":2844,"code":51954,"language":2846,"meta":178,"style":178},[99,52044,52045,52053,52061,52069,52077],{"__ignoreMap":178},[220,52046,52047,52049,52051],{"class":222,"line":223},[220,52048,343],{"class":264},[220,52050,347],{"class":420},[220,52052,359],{"class":264},[220,52054,52055,52057,52059],{"class":222,"line":179},[220,52056,364],{"class":264},[220,52058,51937],{"class":420},[220,52060,359],{"class":264},[220,52062,52063,52065,52067],{"class":222,"line":389},[220,52064,2550],{"class":264},[220,52066,2553],{"class":420},[220,52068,386],{"class":264},[220,52070,52071,52073,52075],{"class":222,"line":399},[220,52072,2567],{"class":264},[220,52074,51937],{"class":420},[220,52076,359],{"class":264},[220,52078,52079,52081,52083],{"class":222,"line":644},[220,52080,402],{"class":264},[220,52082,347],{"class":420},[220,52084,359],{"class":264},[212,52086,52087],{"className":468,"code":51954,"language":469,"meta":178,"style":178},[99,52088,52089,52097,52105,52113,52121],{"__ignoreMap":178},[220,52090,52091,52093,52095],{"class":222,"line":223},[220,52092,343],{"class":264},[220,52094,347],{"class":420},[220,52096,359],{"class":264},[220,52098,52099,52101,52103],{"class":222,"line":179},[220,52100,364],{"class":264},[220,52102,51937],{"class":420},[220,52104,359],{"class":264},[220,52106,52107,52109,52111],{"class":222,"line":389},[220,52108,2550],{"class":264},[220,52110,2553],{"class":420},[220,52112,386],{"class":264},[220,52114,52115,52117,52119],{"class":222,"line":399},[220,52116,2567],{"class":264},[220,52118,51937],{"class":420},[220,52120,359],{"class":264},[220,52122,52123,52125,52127],{"class":222,"line":644},[220,52124,402],{"class":264},[220,52126,347],{"class":420},[220,52128,359],{"class":264},[212,52130,52132],{"className":251,"code":52131,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Grayscale', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,52133,52134,52144,52148,52162,52166,52175,52183,52187,52191],{"__ignoreMap":178},[220,52135,52136,52138,52140,52142],{"class":222,"line":223},[220,52137,261],{"class":260},[220,52139,11512],{"class":264},[220,52141,268],{"class":260},[220,52143,4007],{"class":230},[220,52145,52146],{"class":222,"line":179},[220,52147,647],{"emptyLinePlaceholder":194},[220,52149,52150,52152,52154,52156,52158,52160],{"class":222,"line":389},[220,52151,1735],{"class":260},[220,52153,1738],{"class":420},[220,52155,1741],{"class":260},[220,52157,1744],{"class":260},[220,52159,1747],{"class":226},[220,52161,1750],{"class":264},[220,52163,52164],{"class":222,"line":399},[220,52165,1765],{"class":264},[220,52167,52168,52170,52173],{"class":222,"line":644},[220,52169,1770],{"class":264},[220,52171,52172],{"class":230},"'Grayscale'",[220,52174,7009],{"class":264},[220,52176,52177,52179,52181],{"class":222,"line":650},[220,52178,7014],{"class":264},[220,52180,3206],{"class":230},[220,52182,2465],{"class":264},[220,52184,52185],{"class":222,"line":656},[220,52186,7031],{"class":264},[220,52188,52189],{"class":222,"line":673},[220,52190,1787],{"class":264},[220,52192,52193],{"class":222,"line":682},[220,52194,1792],{"class":264},[1504,52196,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":52198},[52199],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":51937,"description":51945},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":52206,"title":52207,"body":52208,"category":33063,"componentType":25877,"description":52215,"extension":191,"meta":52445,"navigation":194,"path":52446,"requiresChild":32530,"seo":52447,"stem":52448,"__hash__":52449},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":52209,"toc":52441},[52210,52213,52216,52218,52220,52223,52225,52439],[11,52211,52207],{"id":52212},"grid",[15,52214,52215],{},"Simple grid lines pattern with adjustable thickness and rotation",[31911,52217],{"component":52207},[23,52219,31915],{"id":26533},[31917,52221],{":props":52222},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the grid lines\"},{\"name\":\"cellColor\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Fill color of the cells (transparent = lines only). Pair with Variation for a tiled look.\"},{\"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\u002Fdiamond pattern.\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the line edges (0 = crisp, 1 = very soft)\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Per-cell random lightening\u002Fdarkening of the cell fill color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,52224,31923],{"id":31922},[246,52226,52227,52267,52305,52343,52381],{":tabs":1557},[212,52228,52230],{"className":334,"code":52229,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,52231,52232,52240,52247,52255,52259],{"__ignoreMap":178},[220,52233,52234,52236,52238],{"class":222,"line":223},[220,52235,343],{"class":264},[220,52237,347],{"class":346},[220,52239,359],{"class":264},[220,52241,52242,52244],{"class":222,"line":179},[220,52243,364],{"class":264},[220,52245,52246],{"class":346},"Grid\n",[220,52248,52249,52251,52253],{"class":222,"line":389},[220,52250,9635],{"class":226},[220,52252,353],{"class":264},[220,52254,9591],{"class":230},[220,52256,52257],{"class":222,"line":399},[220,52258,1234],{"class":264},[220,52260,52261,52263,52265],{"class":222,"line":644},[220,52262,402],{"class":264},[220,52264,347],{"class":346},[220,52266,359],{"class":264},[212,52268,52269],{"className":409,"code":52229,"language":411,"meta":178,"style":178},[99,52270,52271,52279,52285,52293,52297],{"__ignoreMap":178},[220,52272,52273,52275,52277],{"class":222,"line":223},[220,52274,343],{"class":264},[220,52276,347],{"class":420},[220,52278,359],{"class":264},[220,52280,52281,52283],{"class":222,"line":179},[220,52282,364],{"class":264},[220,52284,52246],{"class":420},[220,52286,52287,52289,52291],{"class":222,"line":389},[220,52288,9635],{"class":226},[220,52290,353],{"class":260},[220,52292,9591],{"class":230},[220,52294,52295],{"class":222,"line":399},[220,52296,1234],{"class":264},[220,52298,52299,52301,52303],{"class":222,"line":644},[220,52300,402],{"class":264},[220,52302,347],{"class":420},[220,52304,359],{"class":264},[212,52306,52307],{"className":2844,"code":52229,"language":2846,"meta":178,"style":178},[99,52308,52309,52317,52323,52331,52335],{"__ignoreMap":178},[220,52310,52311,52313,52315],{"class":222,"line":223},[220,52312,343],{"class":264},[220,52314,347],{"class":420},[220,52316,359],{"class":264},[220,52318,52319,52321],{"class":222,"line":179},[220,52320,364],{"class":264},[220,52322,52246],{"class":420},[220,52324,52325,52327,52329],{"class":222,"line":389},[220,52326,9635],{"class":226},[220,52328,353],{"class":264},[220,52330,9591],{"class":230},[220,52332,52333],{"class":222,"line":399},[220,52334,1234],{"class":264},[220,52336,52337,52339,52341],{"class":222,"line":644},[220,52338,402],{"class":264},[220,52340,347],{"class":420},[220,52342,359],{"class":264},[212,52344,52345],{"className":468,"code":52229,"language":469,"meta":178,"style":178},[99,52346,52347,52355,52361,52369,52373],{"__ignoreMap":178},[220,52348,52349,52351,52353],{"class":222,"line":223},[220,52350,343],{"class":264},[220,52352,347],{"class":420},[220,52354,359],{"class":264},[220,52356,52357,52359],{"class":222,"line":179},[220,52358,364],{"class":264},[220,52360,52246],{"class":420},[220,52362,52363,52365,52367],{"class":222,"line":389},[220,52364,9635],{"class":226},[220,52366,353],{"class":260},[220,52368,9591],{"class":230},[220,52370,52371],{"class":222,"line":399},[220,52372,1234],{"class":264},[220,52374,52375,52377,52379],{"class":222,"line":644},[220,52376,402],{"class":264},[220,52378,347],{"class":420},[220,52380,359],{"class":264},[212,52382,52384],{"className":251,"code":52383,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Grid', props: { color: '#ffffff' } }\n ]\n})\n",[99,52385,52386,52396,52400,52414,52418,52431,52435],{"__ignoreMap":178},[220,52387,52388,52390,52392,52394],{"class":222,"line":223},[220,52389,261],{"class":260},[220,52391,11512],{"class":264},[220,52393,268],{"class":260},[220,52395,4007],{"class":230},[220,52397,52398],{"class":222,"line":179},[220,52399,647],{"emptyLinePlaceholder":194},[220,52401,52402,52404,52406,52408,52410,52412],{"class":222,"line":389},[220,52403,1735],{"class":260},[220,52405,1738],{"class":420},[220,52407,1741],{"class":260},[220,52409,1744],{"class":260},[220,52411,1747],{"class":226},[220,52413,1750],{"class":264},[220,52415,52416],{"class":222,"line":399},[220,52417,1765],{"class":264},[220,52419,52420,52422,52425,52427,52429],{"class":222,"line":644},[220,52421,1770],{"class":264},[220,52423,52424],{"class":230},"'Grid'",[220,52426,1776],{"class":264},[220,52428,10169],{"class":230},[220,52430,1782],{"class":264},[220,52432,52433],{"class":222,"line":650},[220,52434,1787],{"class":264},[220,52436,52437],{"class":222,"line":656},[220,52438,1792],{"class":264},[1504,52440,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52442},[52443,52444],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":52207,"description":52215},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":52451,"title":7095,"body":52452,"category":35559,"componentType":25883,"description":52459,"extension":191,"meta":52821,"navigation":194,"path":52822,"requiresChild":194,"seo":52823,"stem":52824,"__hash__":52825},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":52453,"toc":52817},[52454,52457,52460,52462,52464,52467,52469,52815],[11,52455,7095],{"id":52456},"griddistortion",[15,52458,52459],{},"Interactive grid distortion controlled by mouse position",[31911,52461],{"component":7095},[23,52463,31915],{"id":26533},[31917,52465],{":props":52466},"[{\"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,52468,31923],{"id":31922},[246,52470,52471,52535,52606,52672,52742],{":tabs":1557},[212,52472,52474],{"className":334,"code":52473,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGridDistortion\n :intensity=\"1\"\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,52475,52476,52484,52491,52499,52507,52511,52519,52527],{"__ignoreMap":178},[220,52477,52478,52480,52482],{"class":222,"line":223},[220,52479,343],{"class":264},[220,52481,347],{"class":346},[220,52483,359],{"class":264},[220,52485,52486,52488],{"class":222,"line":179},[220,52487,364],{"class":264},[220,52489,52490],{"class":346},"GridDistortion\n",[220,52492,52493,52495,52497],{"class":222,"line":389},[220,52494,20371],{"class":226},[220,52496,353],{"class":264},[220,52498,36625],{"class":230},[220,52500,52501,52503,52505],{"class":222,"line":399},[220,52502,17405],{"class":226},[220,52504,353],{"class":264},[220,52506,36625],{"class":230},[220,52508,52509],{"class":222,"line":644},[220,52510,31959],{"class":264},[220,52512,52513,52515,52517],{"class":222,"line":650},[220,52514,2550],{"class":264},[220,52516,2553],{"class":346},[220,52518,386],{"class":264},[220,52520,52521,52523,52525],{"class":222,"line":656},[220,52522,2567],{"class":264},[220,52524,7095],{"class":346},[220,52526,359],{"class":264},[220,52528,52529,52531,52533],{"class":222,"line":673},[220,52530,402],{"class":264},[220,52532,347],{"class":346},[220,52534,359],{"class":264},[212,52536,52538],{"className":409,"code":52537,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGridDistortion\n intensity={1}\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGridDistortion>\n\u003C\u002FShader>\n",[99,52539,52540,52548,52554,52566,52578,52582,52590,52598],{"__ignoreMap":178},[220,52541,52542,52544,52546],{"class":222,"line":223},[220,52543,343],{"class":264},[220,52545,347],{"class":420},[220,52547,359],{"class":264},[220,52549,52550,52552],{"class":222,"line":179},[220,52551,364],{"class":264},[220,52553,52490],{"class":420},[220,52555,52556,52558,52560,52562,52564],{"class":222,"line":389},[220,52557,20482],{"class":226},[220,52559,353],{"class":260},[220,52561,743],{"class":264},[220,52563,8677],{"class":420},[220,52565,749],{"class":264},[220,52567,52568,52570,52572,52574,52576],{"class":222,"line":399},[220,52569,9645],{"class":226},[220,52571,353],{"class":260},[220,52573,743],{"class":264},[220,52575,8677],{"class":420},[220,52577,749],{"class":264},[220,52579,52580],{"class":222,"line":644},[220,52581,31959],{"class":264},[220,52583,52584,52586,52588],{"class":222,"line":650},[220,52585,2550],{"class":264},[220,52587,2553],{"class":420},[220,52589,386],{"class":264},[220,52591,52592,52594,52596],{"class":222,"line":656},[220,52593,2567],{"class":264},[220,52595,7095],{"class":420},[220,52597,359],{"class":264},[220,52599,52600,52602,52604],{"class":222,"line":673},[220,52601,402],{"class":264},[220,52603,347],{"class":420},[220,52605,359],{"class":264},[212,52607,52608],{"className":2844,"code":52537,"language":2846,"meta":178,"style":178},[99,52609,52610,52618,52624,52634,52644,52648,52656,52664],{"__ignoreMap":178},[220,52611,52612,52614,52616],{"class":222,"line":223},[220,52613,343],{"class":264},[220,52615,347],{"class":420},[220,52617,359],{"class":264},[220,52619,52620,52622],{"class":222,"line":179},[220,52621,364],{"class":264},[220,52623,52490],{"class":420},[220,52625,52626,52628,52630,52632],{"class":222,"line":389},[220,52627,20482],{"class":226},[220,52629,29871],{"class":264},[220,52631,8677],{"class":420},[220,52633,749],{"class":264},[220,52635,52636,52638,52640,52642],{"class":222,"line":399},[220,52637,9645],{"class":226},[220,52639,29871],{"class":264},[220,52641,8677],{"class":420},[220,52643,749],{"class":264},[220,52645,52646],{"class":222,"line":644},[220,52647,31959],{"class":264},[220,52649,52650,52652,52654],{"class":222,"line":650},[220,52651,2550],{"class":264},[220,52653,2553],{"class":420},[220,52655,386],{"class":264},[220,52657,52658,52660,52662],{"class":222,"line":656},[220,52659,2567],{"class":264},[220,52661,7095],{"class":420},[220,52663,359],{"class":264},[220,52665,52666,52668,52670],{"class":222,"line":673},[220,52667,402],{"class":264},[220,52669,347],{"class":420},[220,52671,359],{"class":264},[212,52673,52674],{"className":468,"code":52537,"language":469,"meta":178,"style":178},[99,52675,52676,52684,52690,52702,52714,52718,52726,52734],{"__ignoreMap":178},[220,52677,52678,52680,52682],{"class":222,"line":223},[220,52679,343],{"class":264},[220,52681,347],{"class":420},[220,52683,359],{"class":264},[220,52685,52686,52688],{"class":222,"line":179},[220,52687,364],{"class":264},[220,52689,52490],{"class":420},[220,52691,52692,52694,52696,52698,52700],{"class":222,"line":389},[220,52693,20482],{"class":226},[220,52695,353],{"class":260},[220,52697,743],{"class":264},[220,52699,8677],{"class":420},[220,52701,749],{"class":264},[220,52703,52704,52706,52708,52710,52712],{"class":222,"line":399},[220,52705,9645],{"class":226},[220,52707,353],{"class":260},[220,52709,743],{"class":264},[220,52711,8677],{"class":420},[220,52713,749],{"class":264},[220,52715,52716],{"class":222,"line":644},[220,52717,31959],{"class":264},[220,52719,52720,52722,52724],{"class":222,"line":650},[220,52721,2550],{"class":264},[220,52723,2553],{"class":420},[220,52725,386],{"class":264},[220,52727,52728,52730,52732],{"class":222,"line":656},[220,52729,2567],{"class":264},[220,52731,7095],{"class":420},[220,52733,359],{"class":264},[220,52735,52736,52738,52740],{"class":222,"line":673},[220,52737,402],{"class":264},[220,52739,347],{"class":420},[220,52741,359],{"class":264},[212,52743,52745],{"className":251,"code":52744,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,52746,52747,52757,52761,52775,52779,52795,52803,52807,52811],{"__ignoreMap":178},[220,52748,52749,52751,52753,52755],{"class":222,"line":223},[220,52750,261],{"class":260},[220,52752,11512],{"class":264},[220,52754,268],{"class":260},[220,52756,4007],{"class":230},[220,52758,52759],{"class":222,"line":179},[220,52760,647],{"emptyLinePlaceholder":194},[220,52762,52763,52765,52767,52769,52771,52773],{"class":222,"line":389},[220,52764,1735],{"class":260},[220,52766,1738],{"class":420},[220,52768,1741],{"class":260},[220,52770,1744],{"class":260},[220,52772,1747],{"class":226},[220,52774,1750],{"class":264},[220,52776,52777],{"class":222,"line":399},[220,52778,1765],{"class":264},[220,52780,52781,52783,52785,52787,52789,52791,52793],{"class":222,"line":644},[220,52782,1770],{"class":264},[220,52784,7538],{"class":230},[220,52786,32203],{"class":264},[220,52788,8677],{"class":420},[220,52790,6566],{"class":264},[220,52792,8677],{"class":420},[220,52794,7546],{"class":264},[220,52796,52797,52799,52801],{"class":222,"line":650},[220,52798,7014],{"class":264},[220,52800,3206],{"class":230},[220,52802,2465],{"class":264},[220,52804,52805],{"class":222,"line":656},[220,52806,7031],{"class":264},[220,52808,52809],{"class":222,"line":673},[220,52810,1787],{"class":264},[220,52812,52813],{"class":222,"line":682},[220,52814,1792],{"class":264},[1504,52816,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52818},[52819,52820],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":7095,"description":52459},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":52827,"title":52828,"body":52829,"category":53091,"componentType":25883,"description":52836,"extension":191,"meta":53092,"navigation":194,"path":53093,"requiresChild":194,"seo":53094,"stem":53095,"__hash__":53096},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":52830,"toc":53088},[52831,52834,52837,52839,52841,53086],[11,52832,52828],{"id":52833},"group",[15,52835,52836],{},"Container for organizing and composing child effects — supports flex-like flow layout (column\u002Frow stacking via the flow prop)",[31911,52838],{"component":52828},[23,52840,31923],{"id":31922},[246,52842,52843,52888,52932,52976,53020],{":tabs":1557},[212,52844,52846],{"className":334,"code":52845,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,52847,52848,52856,52864,52872,52880],{"__ignoreMap":178},[220,52849,52850,52852,52854],{"class":222,"line":223},[220,52851,343],{"class":264},[220,52853,347],{"class":346},[220,52855,359],{"class":264},[220,52857,52858,52860,52862],{"class":222,"line":179},[220,52859,364],{"class":264},[220,52861,52828],{"class":346},[220,52863,359],{"class":264},[220,52865,52866,52868,52870],{"class":222,"line":389},[220,52867,2550],{"class":264},[220,52869,2553],{"class":346},[220,52871,386],{"class":264},[220,52873,52874,52876,52878],{"class":222,"line":399},[220,52875,2567],{"class":264},[220,52877,52828],{"class":346},[220,52879,359],{"class":264},[220,52881,52882,52884,52886],{"class":222,"line":644},[220,52883,402],{"class":264},[220,52885,347],{"class":346},[220,52887,359],{"class":264},[212,52889,52890],{"className":409,"code":52845,"language":411,"meta":178,"style":178},[99,52891,52892,52900,52908,52916,52924],{"__ignoreMap":178},[220,52893,52894,52896,52898],{"class":222,"line":223},[220,52895,343],{"class":264},[220,52897,347],{"class":420},[220,52899,359],{"class":264},[220,52901,52902,52904,52906],{"class":222,"line":179},[220,52903,364],{"class":264},[220,52905,52828],{"class":420},[220,52907,359],{"class":264},[220,52909,52910,52912,52914],{"class":222,"line":389},[220,52911,2550],{"class":264},[220,52913,2553],{"class":420},[220,52915,386],{"class":264},[220,52917,52918,52920,52922],{"class":222,"line":399},[220,52919,2567],{"class":264},[220,52921,52828],{"class":420},[220,52923,359],{"class":264},[220,52925,52926,52928,52930],{"class":222,"line":644},[220,52927,402],{"class":264},[220,52929,347],{"class":420},[220,52931,359],{"class":264},[212,52933,52934],{"className":2844,"code":52845,"language":2846,"meta":178,"style":178},[99,52935,52936,52944,52952,52960,52968],{"__ignoreMap":178},[220,52937,52938,52940,52942],{"class":222,"line":223},[220,52939,343],{"class":264},[220,52941,347],{"class":420},[220,52943,359],{"class":264},[220,52945,52946,52948,52950],{"class":222,"line":179},[220,52947,364],{"class":264},[220,52949,52828],{"class":420},[220,52951,359],{"class":264},[220,52953,52954,52956,52958],{"class":222,"line":389},[220,52955,2550],{"class":264},[220,52957,2553],{"class":420},[220,52959,386],{"class":264},[220,52961,52962,52964,52966],{"class":222,"line":399},[220,52963,2567],{"class":264},[220,52965,52828],{"class":420},[220,52967,359],{"class":264},[220,52969,52970,52972,52974],{"class":222,"line":644},[220,52971,402],{"class":264},[220,52973,347],{"class":420},[220,52975,359],{"class":264},[212,52977,52978],{"className":468,"code":52845,"language":469,"meta":178,"style":178},[99,52979,52980,52988,52996,53004,53012],{"__ignoreMap":178},[220,52981,52982,52984,52986],{"class":222,"line":223},[220,52983,343],{"class":264},[220,52985,347],{"class":420},[220,52987,359],{"class":264},[220,52989,52990,52992,52994],{"class":222,"line":179},[220,52991,364],{"class":264},[220,52993,52828],{"class":420},[220,52995,359],{"class":264},[220,52997,52998,53000,53002],{"class":222,"line":389},[220,52999,2550],{"class":264},[220,53001,2553],{"class":420},[220,53003,386],{"class":264},[220,53005,53006,53008,53010],{"class":222,"line":399},[220,53007,2567],{"class":264},[220,53009,52828],{"class":420},[220,53011,359],{"class":264},[220,53013,53014,53016,53018],{"class":222,"line":644},[220,53015,402],{"class":264},[220,53017,347],{"class":420},[220,53019,359],{"class":264},[212,53021,53023],{"className":251,"code":53022,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Group', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,53024,53025,53035,53039,53053,53057,53066,53074,53078,53082],{"__ignoreMap":178},[220,53026,53027,53029,53031,53033],{"class":222,"line":223},[220,53028,261],{"class":260},[220,53030,11512],{"class":264},[220,53032,268],{"class":260},[220,53034,4007],{"class":230},[220,53036,53037],{"class":222,"line":179},[220,53038,647],{"emptyLinePlaceholder":194},[220,53040,53041,53043,53045,53047,53049,53051],{"class":222,"line":389},[220,53042,1735],{"class":260},[220,53044,1738],{"class":420},[220,53046,1741],{"class":260},[220,53048,1744],{"class":260},[220,53050,1747],{"class":226},[220,53052,1750],{"class":264},[220,53054,53055],{"class":222,"line":399},[220,53056,1765],{"class":264},[220,53058,53059,53061,53064],{"class":222,"line":644},[220,53060,1770],{"class":264},[220,53062,53063],{"class":230},"'Group'",[220,53065,7009],{"class":264},[220,53067,53068,53070,53072],{"class":222,"line":650},[220,53069,7014],{"class":264},[220,53071,3206],{"class":230},[220,53073,2465],{"class":264},[220,53075,53076],{"class":222,"line":656},[220,53077,7031],{"class":264},[220,53079,53080],{"class":222,"line":673},[220,53081,1787],{"class":264},[220,53083,53084],{"class":222,"line":682},[220,53085,1792],{"class":264},[1504,53087,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53089},[53090],{"id":31922,"depth":179,"text":31923},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":52828,"description":52836},"docs\u002Fcomponents\u002FGroup","VRm3A9h-85RvRmiecZuaIcK_SKxGDs5Woe18hQVpFfg",{"id":53098,"title":53099,"body":53100,"category":33063,"componentType":25877,"description":53107,"extension":191,"meta":53292,"navigation":194,"path":53293,"requiresChild":32530,"seo":53294,"stem":53295,"__hash__":53296},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":53101,"toc":53289},[53102,53105,53108,53114,53116,53118,53287],[11,53103,53099],{"id":53104},"htmlincanvas",[15,53106,53107],{},"Render live HTML\u002FDOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome:\u002F\u002Fflags\u002F#canvas-draw-element enabled.",[53109,53110],"experimental-warning",{"link-label":53111,"link-url":53112,"message":53113},"View the spec","https:\u002F\u002Fgithub.com\u002FWICG\u002Fhtml-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.",[31911,53115],{"component":53099},[23,53117,31923],{"id":31922},[246,53119,53120,53149,53177,53205,53233],{":tabs":1557},[212,53121,53123],{"className":334,"code":53122,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,53124,53125,53133,53141],{"__ignoreMap":178},[220,53126,53127,53129,53131],{"class":222,"line":223},[220,53128,343],{"class":264},[220,53130,347],{"class":346},[220,53132,359],{"class":264},[220,53134,53135,53137,53139],{"class":222,"line":179},[220,53136,364],{"class":264},[220,53138,53099],{"class":346},[220,53140,386],{"class":264},[220,53142,53143,53145,53147],{"class":222,"line":389},[220,53144,402],{"class":264},[220,53146,347],{"class":346},[220,53148,359],{"class":264},[212,53150,53151],{"className":409,"code":53122,"language":411,"meta":178,"style":178},[99,53152,53153,53161,53169],{"__ignoreMap":178},[220,53154,53155,53157,53159],{"class":222,"line":223},[220,53156,343],{"class":264},[220,53158,347],{"class":420},[220,53160,359],{"class":264},[220,53162,53163,53165,53167],{"class":222,"line":179},[220,53164,364],{"class":264},[220,53166,53099],{"class":420},[220,53168,386],{"class":264},[220,53170,53171,53173,53175],{"class":222,"line":389},[220,53172,402],{"class":264},[220,53174,347],{"class":420},[220,53176,359],{"class":264},[212,53178,53179],{"className":2844,"code":53122,"language":2846,"meta":178,"style":178},[99,53180,53181,53189,53197],{"__ignoreMap":178},[220,53182,53183,53185,53187],{"class":222,"line":223},[220,53184,343],{"class":264},[220,53186,347],{"class":420},[220,53188,359],{"class":264},[220,53190,53191,53193,53195],{"class":222,"line":179},[220,53192,364],{"class":264},[220,53194,53099],{"class":420},[220,53196,386],{"class":264},[220,53198,53199,53201,53203],{"class":222,"line":389},[220,53200,402],{"class":264},[220,53202,347],{"class":420},[220,53204,359],{"class":264},[212,53206,53207],{"className":468,"code":53122,"language":469,"meta":178,"style":178},[99,53208,53209,53217,53225],{"__ignoreMap":178},[220,53210,53211,53213,53215],{"class":222,"line":223},[220,53212,343],{"class":264},[220,53214,347],{"class":420},[220,53216,359],{"class":264},[220,53218,53219,53221,53223],{"class":222,"line":179},[220,53220,364],{"class":264},[220,53222,53099],{"class":420},[220,53224,386],{"class":264},[220,53226,53227,53229,53231],{"class":222,"line":389},[220,53228,402],{"class":264},[220,53230,347],{"class":420},[220,53232,359],{"class":264},[212,53234,53236],{"className":251,"code":53235,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HTMLInCanvas', props: {} }\n ]\n})\n",[99,53237,53238,53248,53252,53266,53270,53279,53283],{"__ignoreMap":178},[220,53239,53240,53242,53244,53246],{"class":222,"line":223},[220,53241,261],{"class":260},[220,53243,11512],{"class":264},[220,53245,268],{"class":260},[220,53247,4007],{"class":230},[220,53249,53250],{"class":222,"line":179},[220,53251,647],{"emptyLinePlaceholder":194},[220,53253,53254,53256,53258,53260,53262,53264],{"class":222,"line":389},[220,53255,1735],{"class":260},[220,53257,1738],{"class":420},[220,53259,1741],{"class":260},[220,53261,1744],{"class":260},[220,53263,1747],{"class":226},[220,53265,1750],{"class":264},[220,53267,53268],{"class":222,"line":399},[220,53269,1765],{"class":264},[220,53271,53272,53274,53277],{"class":222,"line":644},[220,53273,1770],{"class":264},[220,53275,53276],{"class":230},"'HTMLInCanvas'",[220,53278,2465],{"class":264},[220,53280,53281],{"class":222,"line":650},[220,53282,1787],{"class":264},[220,53284,53285],{"class":222,"line":656},[220,53286,1792],{"class":264},[1504,53288,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53290},[53291],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":53099,"description":53107},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":53298,"title":53299,"body":53300,"category":32806,"componentType":25883,"description":53307,"extension":191,"meta":53568,"navigation":194,"path":53569,"requiresChild":194,"seo":53570,"stem":53571,"__hash__":53572},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":53301,"toc":53564},[53302,53305,53308,53310,53312,53315,53317,53562],[11,53303,53299],{"id":53304},"halftone",[15,53306,53307],{},"Halftone dot pattern effect for printing aesthetics",[31911,53309],{"component":53299},[23,53311,31915],{"id":26533},[31917,53313],{":props":53314},"[{\"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\u002Fsubstrate 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,53316,31923],{"id":31922},[246,53318,53319,53364,53408,53452,53496],{":tabs":1557},[212,53320,53322],{"className":334,"code":53321,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,53323,53324,53332,53340,53348,53356],{"__ignoreMap":178},[220,53325,53326,53328,53330],{"class":222,"line":223},[220,53327,343],{"class":264},[220,53329,347],{"class":346},[220,53331,359],{"class":264},[220,53333,53334,53336,53338],{"class":222,"line":179},[220,53335,364],{"class":264},[220,53337,53299],{"class":346},[220,53339,359],{"class":264},[220,53341,53342,53344,53346],{"class":222,"line":389},[220,53343,2550],{"class":264},[220,53345,2553],{"class":346},[220,53347,386],{"class":264},[220,53349,53350,53352,53354],{"class":222,"line":399},[220,53351,2567],{"class":264},[220,53353,53299],{"class":346},[220,53355,359],{"class":264},[220,53357,53358,53360,53362],{"class":222,"line":644},[220,53359,402],{"class":264},[220,53361,347],{"class":346},[220,53363,359],{"class":264},[212,53365,53366],{"className":409,"code":53321,"language":411,"meta":178,"style":178},[99,53367,53368,53376,53384,53392,53400],{"__ignoreMap":178},[220,53369,53370,53372,53374],{"class":222,"line":223},[220,53371,343],{"class":264},[220,53373,347],{"class":420},[220,53375,359],{"class":264},[220,53377,53378,53380,53382],{"class":222,"line":179},[220,53379,364],{"class":264},[220,53381,53299],{"class":420},[220,53383,359],{"class":264},[220,53385,53386,53388,53390],{"class":222,"line":389},[220,53387,2550],{"class":264},[220,53389,2553],{"class":420},[220,53391,386],{"class":264},[220,53393,53394,53396,53398],{"class":222,"line":399},[220,53395,2567],{"class":264},[220,53397,53299],{"class":420},[220,53399,359],{"class":264},[220,53401,53402,53404,53406],{"class":222,"line":644},[220,53403,402],{"class":264},[220,53405,347],{"class":420},[220,53407,359],{"class":264},[212,53409,53410],{"className":2844,"code":53321,"language":2846,"meta":178,"style":178},[99,53411,53412,53420,53428,53436,53444],{"__ignoreMap":178},[220,53413,53414,53416,53418],{"class":222,"line":223},[220,53415,343],{"class":264},[220,53417,347],{"class":420},[220,53419,359],{"class":264},[220,53421,53422,53424,53426],{"class":222,"line":179},[220,53423,364],{"class":264},[220,53425,53299],{"class":420},[220,53427,359],{"class":264},[220,53429,53430,53432,53434],{"class":222,"line":389},[220,53431,2550],{"class":264},[220,53433,2553],{"class":420},[220,53435,386],{"class":264},[220,53437,53438,53440,53442],{"class":222,"line":399},[220,53439,2567],{"class":264},[220,53441,53299],{"class":420},[220,53443,359],{"class":264},[220,53445,53446,53448,53450],{"class":222,"line":644},[220,53447,402],{"class":264},[220,53449,347],{"class":420},[220,53451,359],{"class":264},[212,53453,53454],{"className":468,"code":53321,"language":469,"meta":178,"style":178},[99,53455,53456,53464,53472,53480,53488],{"__ignoreMap":178},[220,53457,53458,53460,53462],{"class":222,"line":223},[220,53459,343],{"class":264},[220,53461,347],{"class":420},[220,53463,359],{"class":264},[220,53465,53466,53468,53470],{"class":222,"line":179},[220,53467,364],{"class":264},[220,53469,53299],{"class":420},[220,53471,359],{"class":264},[220,53473,53474,53476,53478],{"class":222,"line":389},[220,53475,2550],{"class":264},[220,53477,2553],{"class":420},[220,53479,386],{"class":264},[220,53481,53482,53484,53486],{"class":222,"line":399},[220,53483,2567],{"class":264},[220,53485,53299],{"class":420},[220,53487,359],{"class":264},[220,53489,53490,53492,53494],{"class":222,"line":644},[220,53491,402],{"class":264},[220,53493,347],{"class":420},[220,53495,359],{"class":264},[212,53497,53499],{"className":251,"code":53498,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Halftone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,53500,53501,53511,53515,53529,53533,53542,53550,53554,53558],{"__ignoreMap":178},[220,53502,53503,53505,53507,53509],{"class":222,"line":223},[220,53504,261],{"class":260},[220,53506,11512],{"class":264},[220,53508,268],{"class":260},[220,53510,4007],{"class":230},[220,53512,53513],{"class":222,"line":179},[220,53514,647],{"emptyLinePlaceholder":194},[220,53516,53517,53519,53521,53523,53525,53527],{"class":222,"line":389},[220,53518,1735],{"class":260},[220,53520,1738],{"class":420},[220,53522,1741],{"class":260},[220,53524,1744],{"class":260},[220,53526,1747],{"class":226},[220,53528,1750],{"class":264},[220,53530,53531],{"class":222,"line":399},[220,53532,1765],{"class":264},[220,53534,53535,53537,53540],{"class":222,"line":644},[220,53536,1770],{"class":264},[220,53538,53539],{"class":230},"'Halftone'",[220,53541,7009],{"class":264},[220,53543,53544,53546,53548],{"class":222,"line":650},[220,53545,7014],{"class":264},[220,53547,3206],{"class":230},[220,53549,2465],{"class":264},[220,53551,53552],{"class":222,"line":656},[220,53553,7031],{"class":264},[220,53555,53556],{"class":222,"line":673},[220,53557,1787],{"class":264},[220,53559,53560],{"class":222,"line":682},[220,53561,1792],{"class":264},[1504,53563,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":53565},[53566,53567],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":53299,"description":53307},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":53574,"title":53575,"body":53576,"category":15908,"componentType":25877,"description":53583,"extension":191,"meta":53862,"navigation":194,"path":53863,"requiresChild":32530,"seo":53864,"stem":53865,"__hash__":53866},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":53577,"toc":53858},[53578,53581,53584,53586,53588,53591,53593,53856],[11,53579,53575],{"id":53580},"heart",[15,53582,53583],{},"Heart shape with adjustable size",[31911,53585],{"component":53575},[23,53587,31915],{"id":26533},[31917,53589],{":props":53590},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the heart\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the heart\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.32\",\"description\":\"Size of the heart (fit 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,53592,31923],{"id":31922},[246,53594,53595,53644,53696,53744,53794],{":tabs":1557},[212,53596,53598],{"className":334,"code":53597,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,53599,53600,53608,53615,53623,53632,53636],{"__ignoreMap":178},[220,53601,53602,53604,53606],{"class":222,"line":223},[220,53603,343],{"class":264},[220,53605,347],{"class":346},[220,53607,359],{"class":264},[220,53609,53610,53612],{"class":222,"line":179},[220,53611,364],{"class":264},[220,53613,53614],{"class":346},"Heart\n",[220,53616,53617,53619,53621],{"class":222,"line":389},[220,53618,9635],{"class":226},[220,53620,353],{"class":264},[220,53622,9591],{"class":230},[220,53624,53625,53627,53629],{"class":222,"line":399},[220,53626,17405],{"class":226},[220,53628,353],{"class":264},[220,53630,53631],{"class":230},"\"0.32\"\n",[220,53633,53634],{"class":222,"line":644},[220,53635,1234],{"class":264},[220,53637,53638,53640,53642],{"class":222,"line":650},[220,53639,402],{"class":264},[220,53641,347],{"class":346},[220,53643,359],{"class":264},[212,53645,53647],{"className":409,"code":53646,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53648,53649,53657,53663,53671,53684,53688],{"__ignoreMap":178},[220,53650,53651,53653,53655],{"class":222,"line":223},[220,53652,343],{"class":264},[220,53654,347],{"class":420},[220,53656,359],{"class":264},[220,53658,53659,53661],{"class":222,"line":179},[220,53660,364],{"class":264},[220,53662,53614],{"class":420},[220,53664,53665,53667,53669],{"class":222,"line":389},[220,53666,9635],{"class":226},[220,53668,353],{"class":260},[220,53670,9591],{"class":230},[220,53672,53673,53675,53677,53679,53682],{"class":222,"line":399},[220,53674,9645],{"class":226},[220,53676,353],{"class":260},[220,53678,743],{"class":264},[220,53680,53681],{"class":420},"0.32",[220,53683,749],{"class":264},[220,53685,53686],{"class":222,"line":644},[220,53687,1234],{"class":264},[220,53689,53690,53692,53694],{"class":222,"line":650},[220,53691,402],{"class":264},[220,53693,347],{"class":420},[220,53695,359],{"class":264},[212,53697,53698],{"className":2844,"code":53646,"language":2846,"meta":178,"style":178},[99,53699,53700,53708,53714,53722,53732,53736],{"__ignoreMap":178},[220,53701,53702,53704,53706],{"class":222,"line":223},[220,53703,343],{"class":264},[220,53705,347],{"class":420},[220,53707,359],{"class":264},[220,53709,53710,53712],{"class":222,"line":179},[220,53711,364],{"class":264},[220,53713,53614],{"class":420},[220,53715,53716,53718,53720],{"class":222,"line":389},[220,53717,9635],{"class":226},[220,53719,353],{"class":264},[220,53721,9591],{"class":230},[220,53723,53724,53726,53728,53730],{"class":222,"line":399},[220,53725,9645],{"class":226},[220,53727,29871],{"class":264},[220,53729,53681],{"class":420},[220,53731,749],{"class":264},[220,53733,53734],{"class":222,"line":644},[220,53735,1234],{"class":264},[220,53737,53738,53740,53742],{"class":222,"line":650},[220,53739,402],{"class":264},[220,53741,347],{"class":420},[220,53743,359],{"class":264},[212,53745,53746],{"className":468,"code":53646,"language":469,"meta":178,"style":178},[99,53747,53748,53756,53762,53770,53782,53786],{"__ignoreMap":178},[220,53749,53750,53752,53754],{"class":222,"line":223},[220,53751,343],{"class":264},[220,53753,347],{"class":420},[220,53755,359],{"class":264},[220,53757,53758,53760],{"class":222,"line":179},[220,53759,364],{"class":264},[220,53761,53614],{"class":420},[220,53763,53764,53766,53768],{"class":222,"line":389},[220,53765,9635],{"class":226},[220,53767,353],{"class":260},[220,53769,9591],{"class":230},[220,53771,53772,53774,53776,53778,53780],{"class":222,"line":399},[220,53773,9645],{"class":226},[220,53775,353],{"class":260},[220,53777,743],{"class":264},[220,53779,53681],{"class":420},[220,53781,749],{"class":264},[220,53783,53784],{"class":222,"line":644},[220,53785,1234],{"class":264},[220,53787,53788,53790,53792],{"class":222,"line":650},[220,53789,402],{"class":264},[220,53791,347],{"class":420},[220,53793,359],{"class":264},[212,53795,53797],{"className":251,"code":53796,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Heart', props: { color: '#ffffff', radius: 0.32 } }\n ]\n})\n",[99,53798,53799,53809,53813,53827,53831,53848,53852],{"__ignoreMap":178},[220,53800,53801,53803,53805,53807],{"class":222,"line":223},[220,53802,261],{"class":260},[220,53804,11512],{"class":264},[220,53806,268],{"class":260},[220,53808,4007],{"class":230},[220,53810,53811],{"class":222,"line":179},[220,53812,647],{"emptyLinePlaceholder":194},[220,53814,53815,53817,53819,53821,53823,53825],{"class":222,"line":389},[220,53816,1735],{"class":260},[220,53818,1738],{"class":420},[220,53820,1741],{"class":260},[220,53822,1744],{"class":260},[220,53824,1747],{"class":226},[220,53826,1750],{"class":264},[220,53828,53829],{"class":222,"line":399},[220,53830,1765],{"class":264},[220,53832,53833,53835,53838,53840,53842,53844,53846],{"class":222,"line":644},[220,53834,1770],{"class":264},[220,53836,53837],{"class":230},"'Heart'",[220,53839,1776],{"class":264},[220,53841,10169],{"class":230},[220,53843,6566],{"class":264},[220,53845,53681],{"class":420},[220,53847,1782],{"class":264},[220,53849,53850],{"class":222,"line":650},[220,53851,1787],{"class":264},[220,53853,53854],{"class":222,"line":656},[220,53855,1792],{"class":264},[1504,53857,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53859},[53860,53861],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":53575,"description":53583},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":53868,"title":53869,"body":53870,"category":36569,"componentType":25877,"description":54067,"extension":191,"meta":54068,"navigation":194,"path":54069,"requiresChild":32530,"seo":54070,"stem":54071,"__hash__":54072},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":53871,"toc":54063},[53872,53875,53883,53885,53887,53890,53892,54061],[11,53873,53869],{"id":53874},"heatmap",[15,53876,53877,53878,4836],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,53879,53882],{"href":53880,"rel":53881},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31911,53884],{"component":53869},[23,53886,31915],{"id":26533},[31917,53888],{":props":53889},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the heatmap shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the heatmap shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the heatmap shape in degrees\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#02010f\",\"description\":\"Cold color (used when no gradient stops are set)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#f9e25f\",\"description\":\"Hot color (used when no gradient stops are set)\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"[{\\\"color\\\":\\\"#02010f\\\",\\\"position\\\":0},{\\\"color\\\":\\\"#2a0a8a\\\",\\\"position\\\":0.2},{\\\"color\\\":\\\"#a41c9b\\\",\\\"position\\\":0.45},{\\\"color\\\":\\\"#e8632b\\\",\\\"position\\\":0.7},{\\\"color\\\":\\\"#f9e25f\\\",\\\"position\\\":0.9},{\\\"color\\\":\\\"#ffffff\\\",\\\"position\\\":1}]\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the heat ramp interpolation\"},{\"name\":\"innerGlow\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Heat filling the inside of the shape\"},{\"name\":\"outerGlow\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Heat radiating beyond the silhouette\"},{\"name\":\"contour\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Heat concentrated along the shape boundary\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Direction the heat waves travel, in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Speed of the flowing heat. 0 pauses.\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,53891,31923],{"id":31922},[246,53893,53894,53923,53951,53979,54007],{":tabs":1557},[212,53895,53897],{"className":334,"code":53896,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,53898,53899,53907,53915],{"__ignoreMap":178},[220,53900,53901,53903,53905],{"class":222,"line":223},[220,53902,343],{"class":264},[220,53904,347],{"class":346},[220,53906,359],{"class":264},[220,53908,53909,53911,53913],{"class":222,"line":179},[220,53910,364],{"class":264},[220,53912,53869],{"class":346},[220,53914,386],{"class":264},[220,53916,53917,53919,53921],{"class":222,"line":389},[220,53918,402],{"class":264},[220,53920,347],{"class":346},[220,53922,359],{"class":264},[212,53924,53925],{"className":409,"code":53896,"language":411,"meta":178,"style":178},[99,53926,53927,53935,53943],{"__ignoreMap":178},[220,53928,53929,53931,53933],{"class":222,"line":223},[220,53930,343],{"class":264},[220,53932,347],{"class":420},[220,53934,359],{"class":264},[220,53936,53937,53939,53941],{"class":222,"line":179},[220,53938,364],{"class":264},[220,53940,53869],{"class":420},[220,53942,386],{"class":264},[220,53944,53945,53947,53949],{"class":222,"line":389},[220,53946,402],{"class":264},[220,53948,347],{"class":420},[220,53950,359],{"class":264},[212,53952,53953],{"className":2844,"code":53896,"language":2846,"meta":178,"style":178},[99,53954,53955,53963,53971],{"__ignoreMap":178},[220,53956,53957,53959,53961],{"class":222,"line":223},[220,53958,343],{"class":264},[220,53960,347],{"class":420},[220,53962,359],{"class":264},[220,53964,53965,53967,53969],{"class":222,"line":179},[220,53966,364],{"class":264},[220,53968,53869],{"class":420},[220,53970,386],{"class":264},[220,53972,53973,53975,53977],{"class":222,"line":389},[220,53974,402],{"class":264},[220,53976,347],{"class":420},[220,53978,359],{"class":264},[212,53980,53981],{"className":468,"code":53896,"language":469,"meta":178,"style":178},[99,53982,53983,53991,53999],{"__ignoreMap":178},[220,53984,53985,53987,53989],{"class":222,"line":223},[220,53986,343],{"class":264},[220,53988,347],{"class":420},[220,53990,359],{"class":264},[220,53992,53993,53995,53997],{"class":222,"line":179},[220,53994,364],{"class":264},[220,53996,53869],{"class":420},[220,53998,386],{"class":264},[220,54000,54001,54003,54005],{"class":222,"line":389},[220,54002,402],{"class":264},[220,54004,347],{"class":420},[220,54006,359],{"class":264},[212,54008,54010],{"className":251,"code":54009,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Heatmap', props: {} }\n ]\n})\n",[99,54011,54012,54022,54026,54040,54044,54053,54057],{"__ignoreMap":178},[220,54013,54014,54016,54018,54020],{"class":222,"line":223},[220,54015,261],{"class":260},[220,54017,11512],{"class":264},[220,54019,268],{"class":260},[220,54021,4007],{"class":230},[220,54023,54024],{"class":222,"line":179},[220,54025,647],{"emptyLinePlaceholder":194},[220,54027,54028,54030,54032,54034,54036,54038],{"class":222,"line":389},[220,54029,1735],{"class":260},[220,54031,1738],{"class":420},[220,54033,1741],{"class":260},[220,54035,1744],{"class":260},[220,54037,1747],{"class":226},[220,54039,1750],{"class":264},[220,54041,54042],{"class":222,"line":399},[220,54043,1765],{"class":264},[220,54045,54046,54048,54051],{"class":222,"line":644},[220,54047,1770],{"class":264},[220,54049,54050],{"class":230},"'Heatmap'",[220,54052,2465],{"class":264},[220,54054,54055],{"class":222,"line":650},[220,54056,1787],{"class":264},[220,54058,54059],{"class":222,"line":656},[220,54060,1792],{"class":264},[1504,54062,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54064},[54065,54066],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":53869,"description":54067},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":54074,"title":54075,"body":54076,"category":33063,"componentType":25877,"description":54083,"extension":191,"meta":54268,"navigation":194,"path":54269,"requiresChild":32530,"seo":54270,"stem":54271,"__hash__":54272},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":54077,"toc":54264},[54078,54081,54084,54086,54088,54091,54093,54262],[11,54079,54075],{"id":54080},"hexgrid",[15,54082,54083],{},"Honeycomb hexagonal grid pattern",[31911,54085],{"component":54075},[23,54087,31915],{"id":26533},[31917,54089],{":props":54090},"[{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the grid in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the line edges (0 = crisp, 1 = very soft)\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Per-cell random lightening\u002Fdarkening of the cell fill color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,54092,31923],{"id":31922},[246,54094,54095,54124,54152,54180,54208],{":tabs":1557},[212,54096,54098],{"className":334,"code":54097,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,54099,54100,54108,54116],{"__ignoreMap":178},[220,54101,54102,54104,54106],{"class":222,"line":223},[220,54103,343],{"class":264},[220,54105,347],{"class":346},[220,54107,359],{"class":264},[220,54109,54110,54112,54114],{"class":222,"line":179},[220,54111,364],{"class":264},[220,54113,54075],{"class":346},[220,54115,386],{"class":264},[220,54117,54118,54120,54122],{"class":222,"line":389},[220,54119,402],{"class":264},[220,54121,347],{"class":346},[220,54123,359],{"class":264},[212,54125,54126],{"className":409,"code":54097,"language":411,"meta":178,"style":178},[99,54127,54128,54136,54144],{"__ignoreMap":178},[220,54129,54130,54132,54134],{"class":222,"line":223},[220,54131,343],{"class":264},[220,54133,347],{"class":420},[220,54135,359],{"class":264},[220,54137,54138,54140,54142],{"class":222,"line":179},[220,54139,364],{"class":264},[220,54141,54075],{"class":420},[220,54143,386],{"class":264},[220,54145,54146,54148,54150],{"class":222,"line":389},[220,54147,402],{"class":264},[220,54149,347],{"class":420},[220,54151,359],{"class":264},[212,54153,54154],{"className":2844,"code":54097,"language":2846,"meta":178,"style":178},[99,54155,54156,54164,54172],{"__ignoreMap":178},[220,54157,54158,54160,54162],{"class":222,"line":223},[220,54159,343],{"class":264},[220,54161,347],{"class":420},[220,54163,359],{"class":264},[220,54165,54166,54168,54170],{"class":222,"line":179},[220,54167,364],{"class":264},[220,54169,54075],{"class":420},[220,54171,386],{"class":264},[220,54173,54174,54176,54178],{"class":222,"line":389},[220,54175,402],{"class":264},[220,54177,347],{"class":420},[220,54179,359],{"class":264},[212,54181,54182],{"className":468,"code":54097,"language":469,"meta":178,"style":178},[99,54183,54184,54192,54200],{"__ignoreMap":178},[220,54185,54186,54188,54190],{"class":222,"line":223},[220,54187,343],{"class":264},[220,54189,347],{"class":420},[220,54191,359],{"class":264},[220,54193,54194,54196,54198],{"class":222,"line":179},[220,54195,364],{"class":264},[220,54197,54075],{"class":420},[220,54199,386],{"class":264},[220,54201,54202,54204,54206],{"class":222,"line":389},[220,54203,402],{"class":264},[220,54205,347],{"class":420},[220,54207,359],{"class":264},[212,54209,54211],{"className":251,"code":54210,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HexGrid', props: {} }\n ]\n})\n",[99,54212,54213,54223,54227,54241,54245,54254,54258],{"__ignoreMap":178},[220,54214,54215,54217,54219,54221],{"class":222,"line":223},[220,54216,261],{"class":260},[220,54218,11512],{"class":264},[220,54220,268],{"class":260},[220,54222,4007],{"class":230},[220,54224,54225],{"class":222,"line":179},[220,54226,647],{"emptyLinePlaceholder":194},[220,54228,54229,54231,54233,54235,54237,54239],{"class":222,"line":389},[220,54230,1735],{"class":260},[220,54232,1738],{"class":420},[220,54234,1741],{"class":260},[220,54236,1744],{"class":260},[220,54238,1747],{"class":226},[220,54240,1750],{"class":264},[220,54242,54243],{"class":222,"line":399},[220,54244,1765],{"class":264},[220,54246,54247,54249,54252],{"class":222,"line":644},[220,54248,1770],{"class":264},[220,54250,54251],{"class":230},"'HexGrid'",[220,54253,2465],{"class":264},[220,54255,54256],{"class":222,"line":650},[220,54257,1787],{"class":264},[220,54259,54260],{"class":222,"line":656},[220,54261,1792],{"class":264},[1504,54263,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54265},[54266,54267],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":54075,"description":54083},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":54274,"title":54275,"body":54276,"category":36569,"componentType":25877,"description":54283,"extension":191,"meta":54515,"navigation":194,"path":54516,"requiresChild":32530,"seo":54517,"stem":54518,"__hash__":54519},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":54277,"toc":54511},[54278,54281,54284,54286,54288,54291,54293,54509],[11,54279,54275],{"id":54280},"hologram",[15,54282,54283],{},"Volumetric sci-fi hologram — a translucent emissive projection of the shape with fresnel-lit edges, depth scan-lines that wrap 3D forms, CRT scanlines, flicker and beam wobble",[31911,54285],{"component":54275},[23,54287,31915],{"id":26533},[31917,54289],{":props":54290},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the hologram shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the hologram shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the hologram shape in degrees\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5ec8ff\",\"description\":\"Projection tint — the colour the whole hologram emits (classic sci-fi cyan by default)\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"2.5\",\"description\":\"Overall emission gain. Bright edges blow out toward white for a hot, projected look.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.04\",\"description\":\"Softness of the shape boundary edge — keep low for crisp projection edges\"},{\"name\":\"fill\",\"type\":\"number\",\"default\":\"0.45\",\"description\":\"Translucent interior glow. Driven by optical thickness, so thicker parts of a 3D form glow more — the core volumetric cue.\"},{\"name\":\"edgeGlow\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Fresnel rim intensity — bright glowing silhouette and, on 3D shapes, the grazing internal walls of extruded logos\"},{\"name\":\"depthLines\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Iso-depth scan-lines that hug the surface and reveal the 3D form like a volumetric scan. On flat shapes they become concentric contour rings.\"},{\"name\":\"depthScale\",\"type\":\"number\",\"default\":\"26\",\"description\":\"Density of the depth scan-lines — higher packs more contour bands through the volume\"},{\"name\":\"scanlines\",\"type\":\"number\",\"default\":\"0.55\",\"description\":\"CRT scanline contrast — how dark the gaps between horizontal projection lines get\"},{\"name\":\"scanlineScale\",\"type\":\"number\",\"default\":\"130\",\"description\":\"Number of horizontal scanlines across the canvas height\"},{\"name\":\"scanlineSpeed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How fast the scanlines drift upward — 0 holds them static\"},{\"name\":\"sweep\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Brightness of the refresh bar that sweeps vertically through the projection\"},{\"name\":\"flicker\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Unstable-projector flicker — a fast shimmer plus occasional brightness dropouts\"},{\"name\":\"distortion\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Continuous horizontal wobble and chromatic edge fringing — the wavering of an unstable beam\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Fine projection static — animated per-pixel noise over the emission\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Master animation speed for every animated layer. 0 freezes the projection.\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,54292,31923],{"id":31922},[246,54294,54295,54336,54374,54412,54450],{":tabs":1557},[212,54296,54298],{"className":334,"code":54297,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,54299,54300,54308,54315,54324,54328],{"__ignoreMap":178},[220,54301,54302,54304,54306],{"class":222,"line":223},[220,54303,343],{"class":264},[220,54305,347],{"class":346},[220,54307,359],{"class":264},[220,54309,54310,54312],{"class":222,"line":179},[220,54311,364],{"class":264},[220,54313,54314],{"class":346},"Hologram\n",[220,54316,54317,54319,54321],{"class":222,"line":389},[220,54318,9635],{"class":226},[220,54320,353],{"class":264},[220,54322,54323],{"class":230},"\"#5ec8ff\"\n",[220,54325,54326],{"class":222,"line":399},[220,54327,1234],{"class":264},[220,54329,54330,54332,54334],{"class":222,"line":644},[220,54331,402],{"class":264},[220,54333,347],{"class":346},[220,54335,359],{"class":264},[212,54337,54338],{"className":409,"code":54297,"language":411,"meta":178,"style":178},[99,54339,54340,54348,54354,54362,54366],{"__ignoreMap":178},[220,54341,54342,54344,54346],{"class":222,"line":223},[220,54343,343],{"class":264},[220,54345,347],{"class":420},[220,54347,359],{"class":264},[220,54349,54350,54352],{"class":222,"line":179},[220,54351,364],{"class":264},[220,54353,54314],{"class":420},[220,54355,54356,54358,54360],{"class":222,"line":389},[220,54357,9635],{"class":226},[220,54359,353],{"class":260},[220,54361,54323],{"class":230},[220,54363,54364],{"class":222,"line":399},[220,54365,1234],{"class":264},[220,54367,54368,54370,54372],{"class":222,"line":644},[220,54369,402],{"class":264},[220,54371,347],{"class":420},[220,54373,359],{"class":264},[212,54375,54376],{"className":2844,"code":54297,"language":2846,"meta":178,"style":178},[99,54377,54378,54386,54392,54400,54404],{"__ignoreMap":178},[220,54379,54380,54382,54384],{"class":222,"line":223},[220,54381,343],{"class":264},[220,54383,347],{"class":420},[220,54385,359],{"class":264},[220,54387,54388,54390],{"class":222,"line":179},[220,54389,364],{"class":264},[220,54391,54314],{"class":420},[220,54393,54394,54396,54398],{"class":222,"line":389},[220,54395,9635],{"class":226},[220,54397,353],{"class":264},[220,54399,54323],{"class":230},[220,54401,54402],{"class":222,"line":399},[220,54403,1234],{"class":264},[220,54405,54406,54408,54410],{"class":222,"line":644},[220,54407,402],{"class":264},[220,54409,347],{"class":420},[220,54411,359],{"class":264},[212,54413,54414],{"className":468,"code":54297,"language":469,"meta":178,"style":178},[99,54415,54416,54424,54430,54438,54442],{"__ignoreMap":178},[220,54417,54418,54420,54422],{"class":222,"line":223},[220,54419,343],{"class":264},[220,54421,347],{"class":420},[220,54423,359],{"class":264},[220,54425,54426,54428],{"class":222,"line":179},[220,54427,364],{"class":264},[220,54429,54314],{"class":420},[220,54431,54432,54434,54436],{"class":222,"line":389},[220,54433,9635],{"class":226},[220,54435,353],{"class":260},[220,54437,54323],{"class":230},[220,54439,54440],{"class":222,"line":399},[220,54441,1234],{"class":264},[220,54443,54444,54446,54448],{"class":222,"line":644},[220,54445,402],{"class":264},[220,54447,347],{"class":420},[220,54449,359],{"class":264},[212,54451,54453],{"className":251,"code":54452,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Hologram', props: { color: '#5ec8ff' } }\n ]\n})\n",[99,54454,54455,54465,54469,54483,54487,54501,54505],{"__ignoreMap":178},[220,54456,54457,54459,54461,54463],{"class":222,"line":223},[220,54458,261],{"class":260},[220,54460,11512],{"class":264},[220,54462,268],{"class":260},[220,54464,4007],{"class":230},[220,54466,54467],{"class":222,"line":179},[220,54468,647],{"emptyLinePlaceholder":194},[220,54470,54471,54473,54475,54477,54479,54481],{"class":222,"line":389},[220,54472,1735],{"class":260},[220,54474,1738],{"class":420},[220,54476,1741],{"class":260},[220,54478,1744],{"class":260},[220,54480,1747],{"class":226},[220,54482,1750],{"class":264},[220,54484,54485],{"class":222,"line":399},[220,54486,1765],{"class":264},[220,54488,54489,54491,54494,54496,54499],{"class":222,"line":644},[220,54490,1770],{"class":264},[220,54492,54493],{"class":230},"'Hologram'",[220,54495,1776],{"class":264},[220,54497,54498],{"class":230},"'#5ec8ff'",[220,54500,1782],{"class":264},[220,54502,54503],{"class":222,"line":650},[220,54504,1787],{"class":264},[220,54506,54507],{"class":222,"line":656},[220,54508,1792],{"class":264},[1504,54510,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54512},[54513,54514],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":54275,"description":54283},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":54521,"title":54522,"body":54523,"category":36569,"componentType":25877,"description":54530,"extension":191,"meta":54715,"navigation":194,"path":54716,"requiresChild":32530,"seo":54717,"stem":54718,"__hash__":54719},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":54524,"toc":54711},[54525,54528,54531,54533,54535,54538,54540,54709],[11,54526,54522],{"id":54527},"holographic",[15,54529,54530],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31911,54532],{"component":54522},[23,54534,31915],{"id":26533},[31917,54536],{":props":54537},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the foil shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the foil shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the foil shape in degrees\"},{\"name\":\"hueShift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the rainbow spectrum across the foil\"},{\"name\":\"foilScale\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Size of the iridescent color patches — higher = smaller, busier patches\"},{\"name\":\"saturation\",\"type\":\"number\",\"default\":\"0.75\",\"description\":\"Rainbow saturation — 0 = plain silver foil, 1 = fully spectral\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Matte laminate grain — softens the gloss with fine paper-like noise\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed — the spectrum drifts across the foil as if the sticker is tilting in your hand. 0 pauses.\"},{\"name\":\"crinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Laminate wrinkles — perturbs the surface so the sheen and rainbow swirl locally instead of lying flat\"},{\"name\":\"crinkleScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of the laminate wrinkles — higher = smaller, denser wrinkles\"},{\"name\":\"sparkle\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Glitter flakes embedded in the foil — tiny facets that refract a shifted hue and twinkle as the spectrum drifts\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,54539,31923],{"id":31922},[246,54541,54542,54571,54599,54627,54655],{":tabs":1557},[212,54543,54545],{"className":334,"code":54544,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,54546,54547,54555,54563],{"__ignoreMap":178},[220,54548,54549,54551,54553],{"class":222,"line":223},[220,54550,343],{"class":264},[220,54552,347],{"class":346},[220,54554,359],{"class":264},[220,54556,54557,54559,54561],{"class":222,"line":179},[220,54558,364],{"class":264},[220,54560,54522],{"class":346},[220,54562,386],{"class":264},[220,54564,54565,54567,54569],{"class":222,"line":389},[220,54566,402],{"class":264},[220,54568,347],{"class":346},[220,54570,359],{"class":264},[212,54572,54573],{"className":409,"code":54544,"language":411,"meta":178,"style":178},[99,54574,54575,54583,54591],{"__ignoreMap":178},[220,54576,54577,54579,54581],{"class":222,"line":223},[220,54578,343],{"class":264},[220,54580,347],{"class":420},[220,54582,359],{"class":264},[220,54584,54585,54587,54589],{"class":222,"line":179},[220,54586,364],{"class":264},[220,54588,54522],{"class":420},[220,54590,386],{"class":264},[220,54592,54593,54595,54597],{"class":222,"line":389},[220,54594,402],{"class":264},[220,54596,347],{"class":420},[220,54598,359],{"class":264},[212,54600,54601],{"className":2844,"code":54544,"language":2846,"meta":178,"style":178},[99,54602,54603,54611,54619],{"__ignoreMap":178},[220,54604,54605,54607,54609],{"class":222,"line":223},[220,54606,343],{"class":264},[220,54608,347],{"class":420},[220,54610,359],{"class":264},[220,54612,54613,54615,54617],{"class":222,"line":179},[220,54614,364],{"class":264},[220,54616,54522],{"class":420},[220,54618,386],{"class":264},[220,54620,54621,54623,54625],{"class":222,"line":389},[220,54622,402],{"class":264},[220,54624,347],{"class":420},[220,54626,359],{"class":264},[212,54628,54629],{"className":468,"code":54544,"language":469,"meta":178,"style":178},[99,54630,54631,54639,54647],{"__ignoreMap":178},[220,54632,54633,54635,54637],{"class":222,"line":223},[220,54634,343],{"class":264},[220,54636,347],{"class":420},[220,54638,359],{"class":264},[220,54640,54641,54643,54645],{"class":222,"line":179},[220,54642,364],{"class":264},[220,54644,54522],{"class":420},[220,54646,386],{"class":264},[220,54648,54649,54651,54653],{"class":222,"line":389},[220,54650,402],{"class":264},[220,54652,347],{"class":420},[220,54654,359],{"class":264},[212,54656,54658],{"className":251,"code":54657,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Holographic', props: {} }\n ]\n})\n",[99,54659,54660,54670,54674,54688,54692,54701,54705],{"__ignoreMap":178},[220,54661,54662,54664,54666,54668],{"class":222,"line":223},[220,54663,261],{"class":260},[220,54665,11512],{"class":264},[220,54667,268],{"class":260},[220,54669,4007],{"class":230},[220,54671,54672],{"class":222,"line":179},[220,54673,647],{"emptyLinePlaceholder":194},[220,54675,54676,54678,54680,54682,54684,54686],{"class":222,"line":389},[220,54677,1735],{"class":260},[220,54679,1738],{"class":420},[220,54681,1741],{"class":260},[220,54683,1744],{"class":260},[220,54685,1747],{"class":226},[220,54687,1750],{"class":264},[220,54689,54690],{"class":222,"line":399},[220,54691,1765],{"class":264},[220,54693,54694,54696,54699],{"class":222,"line":644},[220,54695,1770],{"class":264},[220,54697,54698],{"class":230},"'Holographic'",[220,54700,2465],{"class":264},[220,54702,54703],{"class":222,"line":650},[220,54704,1787],{"class":264},[220,54706,54707],{"class":222,"line":656},[220,54708,1792],{"class":264},[1504,54710,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54712},[54713,54714],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":54522,"description":54530},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54721,"title":54722,"body":54723,"category":36368,"componentType":25883,"description":54730,"extension":191,"meta":54991,"navigation":194,"path":54992,"requiresChild":194,"seo":54993,"stem":54994,"__hash__":54995},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54724,"toc":54987},[54725,54728,54731,54733,54735,54738,54740,54985],[11,54726,54722],{"id":54727},"hueshift",[15,54729,54730],{},"Rotate hue around the color wheel",[31911,54732],{"component":54722},[23,54734,31915],{"id":26533},[31917,54736],{":props":54737},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54739,31923],{"id":31922},[246,54741,54742,54787,54831,54875,54919],{":tabs":1557},[212,54743,54745],{"className":334,"code":54744,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54746,54747,54755,54763,54771,54779],{"__ignoreMap":178},[220,54748,54749,54751,54753],{"class":222,"line":223},[220,54750,343],{"class":264},[220,54752,347],{"class":346},[220,54754,359],{"class":264},[220,54756,54757,54759,54761],{"class":222,"line":179},[220,54758,364],{"class":264},[220,54760,54722],{"class":346},[220,54762,359],{"class":264},[220,54764,54765,54767,54769],{"class":222,"line":389},[220,54766,2550],{"class":264},[220,54768,2553],{"class":346},[220,54770,386],{"class":264},[220,54772,54773,54775,54777],{"class":222,"line":399},[220,54774,2567],{"class":264},[220,54776,54722],{"class":346},[220,54778,359],{"class":264},[220,54780,54781,54783,54785],{"class":222,"line":644},[220,54782,402],{"class":264},[220,54784,347],{"class":346},[220,54786,359],{"class":264},[212,54788,54789],{"className":409,"code":54744,"language":411,"meta":178,"style":178},[99,54790,54791,54799,54807,54815,54823],{"__ignoreMap":178},[220,54792,54793,54795,54797],{"class":222,"line":223},[220,54794,343],{"class":264},[220,54796,347],{"class":420},[220,54798,359],{"class":264},[220,54800,54801,54803,54805],{"class":222,"line":179},[220,54802,364],{"class":264},[220,54804,54722],{"class":420},[220,54806,359],{"class":264},[220,54808,54809,54811,54813],{"class":222,"line":389},[220,54810,2550],{"class":264},[220,54812,2553],{"class":420},[220,54814,386],{"class":264},[220,54816,54817,54819,54821],{"class":222,"line":399},[220,54818,2567],{"class":264},[220,54820,54722],{"class":420},[220,54822,359],{"class":264},[220,54824,54825,54827,54829],{"class":222,"line":644},[220,54826,402],{"class":264},[220,54828,347],{"class":420},[220,54830,359],{"class":264},[212,54832,54833],{"className":2844,"code":54744,"language":2846,"meta":178,"style":178},[99,54834,54835,54843,54851,54859,54867],{"__ignoreMap":178},[220,54836,54837,54839,54841],{"class":222,"line":223},[220,54838,343],{"class":264},[220,54840,347],{"class":420},[220,54842,359],{"class":264},[220,54844,54845,54847,54849],{"class":222,"line":179},[220,54846,364],{"class":264},[220,54848,54722],{"class":420},[220,54850,359],{"class":264},[220,54852,54853,54855,54857],{"class":222,"line":389},[220,54854,2550],{"class":264},[220,54856,2553],{"class":420},[220,54858,386],{"class":264},[220,54860,54861,54863,54865],{"class":222,"line":399},[220,54862,2567],{"class":264},[220,54864,54722],{"class":420},[220,54866,359],{"class":264},[220,54868,54869,54871,54873],{"class":222,"line":644},[220,54870,402],{"class":264},[220,54872,347],{"class":420},[220,54874,359],{"class":264},[212,54876,54877],{"className":468,"code":54744,"language":469,"meta":178,"style":178},[99,54878,54879,54887,54895,54903,54911],{"__ignoreMap":178},[220,54880,54881,54883,54885],{"class":222,"line":223},[220,54882,343],{"class":264},[220,54884,347],{"class":420},[220,54886,359],{"class":264},[220,54888,54889,54891,54893],{"class":222,"line":179},[220,54890,364],{"class":264},[220,54892,54722],{"class":420},[220,54894,359],{"class":264},[220,54896,54897,54899,54901],{"class":222,"line":389},[220,54898,2550],{"class":264},[220,54900,2553],{"class":420},[220,54902,386],{"class":264},[220,54904,54905,54907,54909],{"class":222,"line":399},[220,54906,2567],{"class":264},[220,54908,54722],{"class":420},[220,54910,359],{"class":264},[220,54912,54913,54915,54917],{"class":222,"line":644},[220,54914,402],{"class":264},[220,54916,347],{"class":420},[220,54918,359],{"class":264},[212,54920,54922],{"className":251,"code":54921,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HueShift', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,54923,54924,54934,54938,54952,54956,54965,54973,54977,54981],{"__ignoreMap":178},[220,54925,54926,54928,54930,54932],{"class":222,"line":223},[220,54927,261],{"class":260},[220,54929,11512],{"class":264},[220,54931,268],{"class":260},[220,54933,4007],{"class":230},[220,54935,54936],{"class":222,"line":179},[220,54937,647],{"emptyLinePlaceholder":194},[220,54939,54940,54942,54944,54946,54948,54950],{"class":222,"line":389},[220,54941,1735],{"class":260},[220,54943,1738],{"class":420},[220,54945,1741],{"class":260},[220,54947,1744],{"class":260},[220,54949,1747],{"class":226},[220,54951,1750],{"class":264},[220,54953,54954],{"class":222,"line":399},[220,54955,1765],{"class":264},[220,54957,54958,54960,54963],{"class":222,"line":644},[220,54959,1770],{"class":264},[220,54961,54962],{"class":230},"'HueShift'",[220,54964,7009],{"class":264},[220,54966,54967,54969,54971],{"class":222,"line":650},[220,54968,7014],{"class":264},[220,54970,3206],{"class":230},[220,54972,2465],{"class":264},[220,54974,54975],{"class":222,"line":656},[220,54976,7031],{"class":264},[220,54978,54979],{"class":222,"line":673},[220,54980,1787],{"class":264},[220,54982,54983],{"class":222,"line":682},[220,54984,1792],{"class":264},[1504,54986,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":54988},[54989,54990],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54722,"description":54730},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":54997,"title":54998,"body":54999,"category":33063,"componentType":25877,"description":55006,"extension":191,"meta":55191,"navigation":194,"path":55192,"requiresChild":32530,"seo":55193,"stem":55194,"__hash__":55195},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":55000,"toc":55187},[55001,55004,55007,55009,55011,55014,55016,55185],[11,55002,54998],{"id":55003},"imagetexture",[15,55005,55006],{},"Display an image with customizable object-fit modes",[31911,55008],{"component":54998},[23,55010,31915],{"id":26533},[31917,55012],{":props":55013},"[{\"name\":\"url\",\"type\":\"string\",\"default\":\"https:\u002F\u002Fshaders.com\u002Fsample.jpg\",\"description\":\"Upload an image or provide a URL\"},{\"name\":\"objectFit\",\"type\":\"\\\"cover\\\" | \\\"contain\\\" | \\\"fill\\\" | \\\"scale-down\\\"\",\"default\":\"fill\",\"description\":\"How the image should be sized within the viewport\"}]",[23,55015,31923],{"id":31922},[246,55017,55018,55047,55075,55103,55131],{":tabs":1557},[212,55019,55021],{"className":334,"code":55020,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,55022,55023,55031,55039],{"__ignoreMap":178},[220,55024,55025,55027,55029],{"class":222,"line":223},[220,55026,343],{"class":264},[220,55028,347],{"class":346},[220,55030,359],{"class":264},[220,55032,55033,55035,55037],{"class":222,"line":179},[220,55034,364],{"class":264},[220,55036,54998],{"class":346},[220,55038,386],{"class":264},[220,55040,55041,55043,55045],{"class":222,"line":389},[220,55042,402],{"class":264},[220,55044,347],{"class":346},[220,55046,359],{"class":264},[212,55048,55049],{"className":409,"code":55020,"language":411,"meta":178,"style":178},[99,55050,55051,55059,55067],{"__ignoreMap":178},[220,55052,55053,55055,55057],{"class":222,"line":223},[220,55054,343],{"class":264},[220,55056,347],{"class":420},[220,55058,359],{"class":264},[220,55060,55061,55063,55065],{"class":222,"line":179},[220,55062,364],{"class":264},[220,55064,54998],{"class":420},[220,55066,386],{"class":264},[220,55068,55069,55071,55073],{"class":222,"line":389},[220,55070,402],{"class":264},[220,55072,347],{"class":420},[220,55074,359],{"class":264},[212,55076,55077],{"className":2844,"code":55020,"language":2846,"meta":178,"style":178},[99,55078,55079,55087,55095],{"__ignoreMap":178},[220,55080,55081,55083,55085],{"class":222,"line":223},[220,55082,343],{"class":264},[220,55084,347],{"class":420},[220,55086,359],{"class":264},[220,55088,55089,55091,55093],{"class":222,"line":179},[220,55090,364],{"class":264},[220,55092,54998],{"class":420},[220,55094,386],{"class":264},[220,55096,55097,55099,55101],{"class":222,"line":389},[220,55098,402],{"class":264},[220,55100,347],{"class":420},[220,55102,359],{"class":264},[212,55104,55105],{"className":468,"code":55020,"language":469,"meta":178,"style":178},[99,55106,55107,55115,55123],{"__ignoreMap":178},[220,55108,55109,55111,55113],{"class":222,"line":223},[220,55110,343],{"class":264},[220,55112,347],{"class":420},[220,55114,359],{"class":264},[220,55116,55117,55119,55121],{"class":222,"line":179},[220,55118,364],{"class":264},[220,55120,54998],{"class":420},[220,55122,386],{"class":264},[220,55124,55125,55127,55129],{"class":222,"line":389},[220,55126,402],{"class":264},[220,55128,347],{"class":420},[220,55130,359],{"class":264},[212,55132,55134],{"className":251,"code":55133,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ImageTexture', props: {} }\n ]\n})\n",[99,55135,55136,55146,55150,55164,55168,55177,55181],{"__ignoreMap":178},[220,55137,55138,55140,55142,55144],{"class":222,"line":223},[220,55139,261],{"class":260},[220,55141,11512],{"class":264},[220,55143,268],{"class":260},[220,55145,4007],{"class":230},[220,55147,55148],{"class":222,"line":179},[220,55149,647],{"emptyLinePlaceholder":194},[220,55151,55152,55154,55156,55158,55160,55162],{"class":222,"line":389},[220,55153,1735],{"class":260},[220,55155,1738],{"class":420},[220,55157,1741],{"class":260},[220,55159,1744],{"class":260},[220,55161,1747],{"class":226},[220,55163,1750],{"class":264},[220,55165,55166],{"class":222,"line":399},[220,55167,1765],{"class":264},[220,55169,55170,55172,55175],{"class":222,"line":644},[220,55171,1770],{"class":264},[220,55173,55174],{"class":230},"'ImageTexture'",[220,55176,2465],{"class":264},[220,55178,55179],{"class":222,"line":650},[220,55180,1787],{"class":264},[220,55182,55183],{"class":222,"line":656},[220,55184,1792],{"class":264},[1504,55186,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55188},[55189,55190],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":54998,"description":55006},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":55197,"title":55198,"body":55199,"category":35559,"componentType":25877,"description":55206,"extension":191,"meta":55485,"navigation":194,"path":55486,"requiresChild":32530,"seo":55487,"stem":55488,"__hash__":55489},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":55200,"toc":55481},[55201,55204,55207,55209,55211,55214,55216,55479],[11,55202,55198],{"id":55203},"inkflow",[15,55205,55206],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31911,55208],{"component":55198},[23,55210,31915],{"id":26533},[31917,55212],{":props":55213},"[{\"name\":\"colorMode\",\"type\":\"\\\"rainbow\\\" | \\\"single\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"How the brush colour is chosen: an ever-cycling rainbow, a single fixed colour, or a custom three-colour cycle\"},{\"name\":\"colorSpeed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How quickly the brush cycles through the rainbow or the custom colours as you paint\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ff2d7e\",\"description\":\"Brush colour used when Color Mode is Single\"},{\"name\":\"color1\",\"type\":\"string\",\"default\":\"#4338ff\",\"description\":\"First colour of the custom brush cycle\"},{\"name\":\"color2\",\"type\":\"string\",\"default\":\"#ff2d7e\",\"description\":\"Second colour of the custom brush cycle\"},{\"name\":\"color3\",\"type\":\"string\",\"default\":\"#19e3ff\",\"description\":\"Third colour of the custom brush cycle\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Colour space the custom colours blend through as the brush cycles between them\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Size of the ink splat painted under the cursor\"},{\"name\":\"force\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls\"},{\"name\":\"curl\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How fast the ink fades away — low values leave long, lingering trails\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on\"}]",[23,55215,31923],{"id":31922},[246,55217,55218,55267,55318,55366,55416],{":tabs":1557},[212,55219,55221],{"className":334,"code":55220,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,55222,55223,55231,55238,55247,55255,55259],{"__ignoreMap":178},[220,55224,55225,55227,55229],{"class":222,"line":223},[220,55226,343],{"class":264},[220,55228,347],{"class":346},[220,55230,359],{"class":264},[220,55232,55233,55235],{"class":222,"line":179},[220,55234,364],{"class":264},[220,55236,55237],{"class":346},"InkFlow\n",[220,55239,55240,55242,55244],{"class":222,"line":389},[220,55241,9635],{"class":226},[220,55243,353],{"class":264},[220,55245,55246],{"class":230},"\"#ff2d7e\"\n",[220,55248,55249,55251,55253],{"class":222,"line":399},[220,55250,17405],{"class":226},[220,55252,353],{"class":264},[220,55254,41098],{"class":230},[220,55256,55257],{"class":222,"line":644},[220,55258,1234],{"class":264},[220,55260,55261,55263,55265],{"class":222,"line":650},[220,55262,402],{"class":264},[220,55264,347],{"class":346},[220,55266,359],{"class":264},[212,55268,55270],{"className":409,"code":55269,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,55271,55272,55280,55286,55294,55306,55310],{"__ignoreMap":178},[220,55273,55274,55276,55278],{"class":222,"line":223},[220,55275,343],{"class":264},[220,55277,347],{"class":420},[220,55279,359],{"class":264},[220,55281,55282,55284],{"class":222,"line":179},[220,55283,364],{"class":264},[220,55285,55237],{"class":420},[220,55287,55288,55290,55292],{"class":222,"line":389},[220,55289,9635],{"class":226},[220,55291,353],{"class":260},[220,55293,55246],{"class":230},[220,55295,55296,55298,55300,55302,55304],{"class":222,"line":399},[220,55297,9645],{"class":226},[220,55299,353],{"class":260},[220,55301,743],{"class":264},[220,55303,22004],{"class":420},[220,55305,749],{"class":264},[220,55307,55308],{"class":222,"line":644},[220,55309,1234],{"class":264},[220,55311,55312,55314,55316],{"class":222,"line":650},[220,55313,402],{"class":264},[220,55315,347],{"class":420},[220,55317,359],{"class":264},[212,55319,55320],{"className":2844,"code":55269,"language":2846,"meta":178,"style":178},[99,55321,55322,55330,55336,55344,55354,55358],{"__ignoreMap":178},[220,55323,55324,55326,55328],{"class":222,"line":223},[220,55325,343],{"class":264},[220,55327,347],{"class":420},[220,55329,359],{"class":264},[220,55331,55332,55334],{"class":222,"line":179},[220,55333,364],{"class":264},[220,55335,55237],{"class":420},[220,55337,55338,55340,55342],{"class":222,"line":389},[220,55339,9635],{"class":226},[220,55341,353],{"class":264},[220,55343,55246],{"class":230},[220,55345,55346,55348,55350,55352],{"class":222,"line":399},[220,55347,9645],{"class":226},[220,55349,29871],{"class":264},[220,55351,22004],{"class":420},[220,55353,749],{"class":264},[220,55355,55356],{"class":222,"line":644},[220,55357,1234],{"class":264},[220,55359,55360,55362,55364],{"class":222,"line":650},[220,55361,402],{"class":264},[220,55363,347],{"class":420},[220,55365,359],{"class":264},[212,55367,55368],{"className":468,"code":55269,"language":469,"meta":178,"style":178},[99,55369,55370,55378,55384,55392,55404,55408],{"__ignoreMap":178},[220,55371,55372,55374,55376],{"class":222,"line":223},[220,55373,343],{"class":264},[220,55375,347],{"class":420},[220,55377,359],{"class":264},[220,55379,55380,55382],{"class":222,"line":179},[220,55381,364],{"class":264},[220,55383,55237],{"class":420},[220,55385,55386,55388,55390],{"class":222,"line":389},[220,55387,9635],{"class":226},[220,55389,353],{"class":260},[220,55391,55246],{"class":230},[220,55393,55394,55396,55398,55400,55402],{"class":222,"line":399},[220,55395,9645],{"class":226},[220,55397,353],{"class":260},[220,55399,743],{"class":264},[220,55401,22004],{"class":420},[220,55403,749],{"class":264},[220,55405,55406],{"class":222,"line":644},[220,55407,1234],{"class":264},[220,55409,55410,55412,55414],{"class":222,"line":650},[220,55411,402],{"class":264},[220,55413,347],{"class":420},[220,55415,359],{"class":264},[212,55417,55419],{"className":251,"code":55418,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'InkFlow', props: { color: '#ff2d7e', radius: 0.3 } }\n ]\n})\n",[99,55420,55421,55431,55435,55449,55453,55471,55475],{"__ignoreMap":178},[220,55422,55423,55425,55427,55429],{"class":222,"line":223},[220,55424,261],{"class":260},[220,55426,11512],{"class":264},[220,55428,268],{"class":260},[220,55430,4007],{"class":230},[220,55432,55433],{"class":222,"line":179},[220,55434,647],{"emptyLinePlaceholder":194},[220,55436,55437,55439,55441,55443,55445,55447],{"class":222,"line":389},[220,55438,1735],{"class":260},[220,55440,1738],{"class":420},[220,55442,1741],{"class":260},[220,55444,1744],{"class":260},[220,55446,1747],{"class":226},[220,55448,1750],{"class":264},[220,55450,55451],{"class":222,"line":399},[220,55452,1765],{"class":264},[220,55454,55455,55457,55460,55462,55465,55467,55469],{"class":222,"line":644},[220,55456,1770],{"class":264},[220,55458,55459],{"class":230},"'InkFlow'",[220,55461,1776],{"class":264},[220,55463,55464],{"class":230},"'#ff2d7e'",[220,55466,6566],{"class":264},[220,55468,22004],{"class":420},[220,55470,1782],{"class":264},[220,55472,55473],{"class":222,"line":650},[220,55474,1787],{"class":264},[220,55476,55477],{"class":222,"line":656},[220,55478,1792],{"class":264},[1504,55480,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55482},[55483,55484],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":55198,"description":55206},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":55491,"title":55492,"body":55493,"category":36368,"componentType":25883,"description":55500,"extension":191,"meta":55755,"navigation":194,"path":55756,"requiresChild":194,"seo":55757,"stem":55758,"__hash__":55759},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":55494,"toc":55752},[55495,55498,55501,55503,55505,55750],[11,55496,55492],{"id":55497},"invert",[15,55499,55500],{},"Invert RGB colors while preserving alpha",[31911,55502],{"component":55492},[23,55504,31923],{"id":31922},[246,55506,55507,55552,55596,55640,55684],{":tabs":1557},[212,55508,55510],{"className":334,"code":55509,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,55511,55512,55520,55528,55536,55544],{"__ignoreMap":178},[220,55513,55514,55516,55518],{"class":222,"line":223},[220,55515,343],{"class":264},[220,55517,347],{"class":346},[220,55519,359],{"class":264},[220,55521,55522,55524,55526],{"class":222,"line":179},[220,55523,364],{"class":264},[220,55525,55492],{"class":346},[220,55527,359],{"class":264},[220,55529,55530,55532,55534],{"class":222,"line":389},[220,55531,2550],{"class":264},[220,55533,2553],{"class":346},[220,55535,386],{"class":264},[220,55537,55538,55540,55542],{"class":222,"line":399},[220,55539,2567],{"class":264},[220,55541,55492],{"class":346},[220,55543,359],{"class":264},[220,55545,55546,55548,55550],{"class":222,"line":644},[220,55547,402],{"class":264},[220,55549,347],{"class":346},[220,55551,359],{"class":264},[212,55553,55554],{"className":409,"code":55509,"language":411,"meta":178,"style":178},[99,55555,55556,55564,55572,55580,55588],{"__ignoreMap":178},[220,55557,55558,55560,55562],{"class":222,"line":223},[220,55559,343],{"class":264},[220,55561,347],{"class":420},[220,55563,359],{"class":264},[220,55565,55566,55568,55570],{"class":222,"line":179},[220,55567,364],{"class":264},[220,55569,55492],{"class":420},[220,55571,359],{"class":264},[220,55573,55574,55576,55578],{"class":222,"line":389},[220,55575,2550],{"class":264},[220,55577,2553],{"class":420},[220,55579,386],{"class":264},[220,55581,55582,55584,55586],{"class":222,"line":399},[220,55583,2567],{"class":264},[220,55585,55492],{"class":420},[220,55587,359],{"class":264},[220,55589,55590,55592,55594],{"class":222,"line":644},[220,55591,402],{"class":264},[220,55593,347],{"class":420},[220,55595,359],{"class":264},[212,55597,55598],{"className":2844,"code":55509,"language":2846,"meta":178,"style":178},[99,55599,55600,55608,55616,55624,55632],{"__ignoreMap":178},[220,55601,55602,55604,55606],{"class":222,"line":223},[220,55603,343],{"class":264},[220,55605,347],{"class":420},[220,55607,359],{"class":264},[220,55609,55610,55612,55614],{"class":222,"line":179},[220,55611,364],{"class":264},[220,55613,55492],{"class":420},[220,55615,359],{"class":264},[220,55617,55618,55620,55622],{"class":222,"line":389},[220,55619,2550],{"class":264},[220,55621,2553],{"class":420},[220,55623,386],{"class":264},[220,55625,55626,55628,55630],{"class":222,"line":399},[220,55627,2567],{"class":264},[220,55629,55492],{"class":420},[220,55631,359],{"class":264},[220,55633,55634,55636,55638],{"class":222,"line":644},[220,55635,402],{"class":264},[220,55637,347],{"class":420},[220,55639,359],{"class":264},[212,55641,55642],{"className":468,"code":55509,"language":469,"meta":178,"style":178},[99,55643,55644,55652,55660,55668,55676],{"__ignoreMap":178},[220,55645,55646,55648,55650],{"class":222,"line":223},[220,55647,343],{"class":264},[220,55649,347],{"class":420},[220,55651,359],{"class":264},[220,55653,55654,55656,55658],{"class":222,"line":179},[220,55655,364],{"class":264},[220,55657,55492],{"class":420},[220,55659,359],{"class":264},[220,55661,55662,55664,55666],{"class":222,"line":389},[220,55663,2550],{"class":264},[220,55665,2553],{"class":420},[220,55667,386],{"class":264},[220,55669,55670,55672,55674],{"class":222,"line":399},[220,55671,2567],{"class":264},[220,55673,55492],{"class":420},[220,55675,359],{"class":264},[220,55677,55678,55680,55682],{"class":222,"line":644},[220,55679,402],{"class":264},[220,55681,347],{"class":420},[220,55683,359],{"class":264},[212,55685,55687],{"className":251,"code":55686,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Invert', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,55688,55689,55699,55703,55717,55721,55730,55738,55742,55746],{"__ignoreMap":178},[220,55690,55691,55693,55695,55697],{"class":222,"line":223},[220,55692,261],{"class":260},[220,55694,11512],{"class":264},[220,55696,268],{"class":260},[220,55698,4007],{"class":230},[220,55700,55701],{"class":222,"line":179},[220,55702,647],{"emptyLinePlaceholder":194},[220,55704,55705,55707,55709,55711,55713,55715],{"class":222,"line":389},[220,55706,1735],{"class":260},[220,55708,1738],{"class":420},[220,55710,1741],{"class":260},[220,55712,1744],{"class":260},[220,55714,1747],{"class":226},[220,55716,1750],{"class":264},[220,55718,55719],{"class":222,"line":399},[220,55720,1765],{"class":264},[220,55722,55723,55725,55728],{"class":222,"line":644},[220,55724,1770],{"class":264},[220,55726,55727],{"class":230},"'Invert'",[220,55729,7009],{"class":264},[220,55731,55732,55734,55736],{"class":222,"line":650},[220,55733,7014],{"class":264},[220,55735,3206],{"class":230},[220,55737,2465],{"class":264},[220,55739,55740],{"class":222,"line":656},[220,55741,7031],{"class":264},[220,55743,55744],{"class":222,"line":673},[220,55745,1787],{"class":264},[220,55747,55748],{"class":222,"line":682},[220,55749,1792],{"class":264},[1504,55751,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":55753},[55754],{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":55492,"description":55500},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55761,"title":55762,"body":55763,"category":33673,"componentType":25883,"description":55770,"extension":191,"meta":56031,"navigation":194,"path":56032,"requiresChild":194,"seo":56033,"stem":56034,"__hash__":56035},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55764,"toc":56027},[55765,55768,55771,55773,55775,55778,55780,56025],[11,55766,55762],{"id":55767},"iriswipe",[15,55769,55770],{},"Reveal through an expanding circle growing from a center point",[31911,55772],{"component":55762},[23,55774,31915],{"id":26533},[31917,55776],{":props":55777},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the iris has expanded (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the iris expands from\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the iris edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the outside inward instead\"}]",[23,55779,31923],{"id":31922},[246,55781,55782,55827,55871,55915,55959],{":tabs":1557},[212,55783,55785],{"className":334,"code":55784,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55786,55787,55795,55803,55811,55819],{"__ignoreMap":178},[220,55788,55789,55791,55793],{"class":222,"line":223},[220,55790,343],{"class":264},[220,55792,347],{"class":346},[220,55794,359],{"class":264},[220,55796,55797,55799,55801],{"class":222,"line":179},[220,55798,364],{"class":264},[220,55800,55762],{"class":346},[220,55802,359],{"class":264},[220,55804,55805,55807,55809],{"class":222,"line":389},[220,55806,2550],{"class":264},[220,55808,2553],{"class":346},[220,55810,386],{"class":264},[220,55812,55813,55815,55817],{"class":222,"line":399},[220,55814,2567],{"class":264},[220,55816,55762],{"class":346},[220,55818,359],{"class":264},[220,55820,55821,55823,55825],{"class":222,"line":644},[220,55822,402],{"class":264},[220,55824,347],{"class":346},[220,55826,359],{"class":264},[212,55828,55829],{"className":409,"code":55784,"language":411,"meta":178,"style":178},[99,55830,55831,55839,55847,55855,55863],{"__ignoreMap":178},[220,55832,55833,55835,55837],{"class":222,"line":223},[220,55834,343],{"class":264},[220,55836,347],{"class":420},[220,55838,359],{"class":264},[220,55840,55841,55843,55845],{"class":222,"line":179},[220,55842,364],{"class":264},[220,55844,55762],{"class":420},[220,55846,359],{"class":264},[220,55848,55849,55851,55853],{"class":222,"line":389},[220,55850,2550],{"class":264},[220,55852,2553],{"class":420},[220,55854,386],{"class":264},[220,55856,55857,55859,55861],{"class":222,"line":399},[220,55858,2567],{"class":264},[220,55860,55762],{"class":420},[220,55862,359],{"class":264},[220,55864,55865,55867,55869],{"class":222,"line":644},[220,55866,402],{"class":264},[220,55868,347],{"class":420},[220,55870,359],{"class":264},[212,55872,55873],{"className":2844,"code":55784,"language":2846,"meta":178,"style":178},[99,55874,55875,55883,55891,55899,55907],{"__ignoreMap":178},[220,55876,55877,55879,55881],{"class":222,"line":223},[220,55878,343],{"class":264},[220,55880,347],{"class":420},[220,55882,359],{"class":264},[220,55884,55885,55887,55889],{"class":222,"line":179},[220,55886,364],{"class":264},[220,55888,55762],{"class":420},[220,55890,359],{"class":264},[220,55892,55893,55895,55897],{"class":222,"line":389},[220,55894,2550],{"class":264},[220,55896,2553],{"class":420},[220,55898,386],{"class":264},[220,55900,55901,55903,55905],{"class":222,"line":399},[220,55902,2567],{"class":264},[220,55904,55762],{"class":420},[220,55906,359],{"class":264},[220,55908,55909,55911,55913],{"class":222,"line":644},[220,55910,402],{"class":264},[220,55912,347],{"class":420},[220,55914,359],{"class":264},[212,55916,55917],{"className":468,"code":55784,"language":469,"meta":178,"style":178},[99,55918,55919,55927,55935,55943,55951],{"__ignoreMap":178},[220,55920,55921,55923,55925],{"class":222,"line":223},[220,55922,343],{"class":264},[220,55924,347],{"class":420},[220,55926,359],{"class":264},[220,55928,55929,55931,55933],{"class":222,"line":179},[220,55930,364],{"class":264},[220,55932,55762],{"class":420},[220,55934,359],{"class":264},[220,55936,55937,55939,55941],{"class":222,"line":389},[220,55938,2550],{"class":264},[220,55940,2553],{"class":420},[220,55942,386],{"class":264},[220,55944,55945,55947,55949],{"class":222,"line":399},[220,55946,2567],{"class":264},[220,55948,55762],{"class":420},[220,55950,359],{"class":264},[220,55952,55953,55955,55957],{"class":222,"line":644},[220,55954,402],{"class":264},[220,55956,347],{"class":420},[220,55958,359],{"class":264},[212,55960,55962],{"className":251,"code":55961,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'IrisWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,55963,55964,55974,55978,55992,55996,56005,56013,56017,56021],{"__ignoreMap":178},[220,55965,55966,55968,55970,55972],{"class":222,"line":223},[220,55967,261],{"class":260},[220,55969,11512],{"class":264},[220,55971,268],{"class":260},[220,55973,4007],{"class":230},[220,55975,55976],{"class":222,"line":179},[220,55977,647],{"emptyLinePlaceholder":194},[220,55979,55980,55982,55984,55986,55988,55990],{"class":222,"line":389},[220,55981,1735],{"class":260},[220,55983,1738],{"class":420},[220,55985,1741],{"class":260},[220,55987,1744],{"class":260},[220,55989,1747],{"class":226},[220,55991,1750],{"class":264},[220,55993,55994],{"class":222,"line":399},[220,55995,1765],{"class":264},[220,55997,55998,56000,56003],{"class":222,"line":644},[220,55999,1770],{"class":264},[220,56001,56002],{"class":230},"'IrisWipe'",[220,56004,7009],{"class":264},[220,56006,56007,56009,56011],{"class":222,"line":650},[220,56008,7014],{"class":264},[220,56010,3206],{"class":230},[220,56012,2465],{"class":264},[220,56014,56015],{"class":222,"line":656},[220,56016,7031],{"class":264},[220,56018,56019],{"class":222,"line":673},[220,56020,1787],{"class":264},[220,56022,56023],{"class":222,"line":682},[220,56024,1792],{"class":264},[1504,56026,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56028},[56029,56030],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55762,"description":55770},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":56037,"title":56038,"body":56039,"category":33063,"componentType":25877,"description":56046,"extension":191,"meta":56231,"navigation":194,"path":56232,"requiresChild":32530,"seo":56233,"stem":56234,"__hash__":56235},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":56040,"toc":56227},[56041,56044,56047,56049,56051,56054,56056,56225],[11,56042,56038],{"id":56043},"isometriccubes",[15,56045,56046],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31911,56048],{"component":56038},[23,56050,31915],{"id":26533},[31917,56052],{":props":56053},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#7c5cff\",\"description\":\"Base cube color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff5c9d\",\"description\":\"Second cube color, mixed in per-cube for variation\"},{\"name\":\"lineColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the cube edge lines\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of cubes across the shortest canvas edge\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of the cube edge lines (0 = no edges)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the tiling in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the edge lines (0 = crisp, 1 = very soft)\"},{\"name\":\"colorVariation\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Per-cube random blend between the two colors (0 = uniform cubes, the clean 3D look)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,56055,31923],{"id":31922},[246,56057,56058,56087,56115,56143,56171],{":tabs":1557},[212,56059,56061],{"className":334,"code":56060,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,56062,56063,56071,56079],{"__ignoreMap":178},[220,56064,56065,56067,56069],{"class":222,"line":223},[220,56066,343],{"class":264},[220,56068,347],{"class":346},[220,56070,359],{"class":264},[220,56072,56073,56075,56077],{"class":222,"line":179},[220,56074,364],{"class":264},[220,56076,56038],{"class":346},[220,56078,386],{"class":264},[220,56080,56081,56083,56085],{"class":222,"line":389},[220,56082,402],{"class":264},[220,56084,347],{"class":346},[220,56086,359],{"class":264},[212,56088,56089],{"className":409,"code":56060,"language":411,"meta":178,"style":178},[99,56090,56091,56099,56107],{"__ignoreMap":178},[220,56092,56093,56095,56097],{"class":222,"line":223},[220,56094,343],{"class":264},[220,56096,347],{"class":420},[220,56098,359],{"class":264},[220,56100,56101,56103,56105],{"class":222,"line":179},[220,56102,364],{"class":264},[220,56104,56038],{"class":420},[220,56106,386],{"class":264},[220,56108,56109,56111,56113],{"class":222,"line":389},[220,56110,402],{"class":264},[220,56112,347],{"class":420},[220,56114,359],{"class":264},[212,56116,56117],{"className":2844,"code":56060,"language":2846,"meta":178,"style":178},[99,56118,56119,56127,56135],{"__ignoreMap":178},[220,56120,56121,56123,56125],{"class":222,"line":223},[220,56122,343],{"class":264},[220,56124,347],{"class":420},[220,56126,359],{"class":264},[220,56128,56129,56131,56133],{"class":222,"line":179},[220,56130,364],{"class":264},[220,56132,56038],{"class":420},[220,56134,386],{"class":264},[220,56136,56137,56139,56141],{"class":222,"line":389},[220,56138,402],{"class":264},[220,56140,347],{"class":420},[220,56142,359],{"class":264},[212,56144,56145],{"className":468,"code":56060,"language":469,"meta":178,"style":178},[99,56146,56147,56155,56163],{"__ignoreMap":178},[220,56148,56149,56151,56153],{"class":222,"line":223},[220,56150,343],{"class":264},[220,56152,347],{"class":420},[220,56154,359],{"class":264},[220,56156,56157,56159,56161],{"class":222,"line":179},[220,56158,364],{"class":264},[220,56160,56038],{"class":420},[220,56162,386],{"class":264},[220,56164,56165,56167,56169],{"class":222,"line":389},[220,56166,402],{"class":264},[220,56168,347],{"class":420},[220,56170,359],{"class":264},[212,56172,56174],{"className":251,"code":56173,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'IsometricCubes', props: {} }\n ]\n})\n",[99,56175,56176,56186,56190,56204,56208,56217,56221],{"__ignoreMap":178},[220,56177,56178,56180,56182,56184],{"class":222,"line":223},[220,56179,261],{"class":260},[220,56181,11512],{"class":264},[220,56183,268],{"class":260},[220,56185,4007],{"class":230},[220,56187,56188],{"class":222,"line":179},[220,56189,647],{"emptyLinePlaceholder":194},[220,56191,56192,56194,56196,56198,56200,56202],{"class":222,"line":389},[220,56193,1735],{"class":260},[220,56195,1738],{"class":420},[220,56197,1741],{"class":260},[220,56199,1744],{"class":260},[220,56201,1747],{"class":226},[220,56203,1750],{"class":264},[220,56205,56206],{"class":222,"line":399},[220,56207,1765],{"class":264},[220,56209,56210,56212,56215],{"class":222,"line":644},[220,56211,1770],{"class":264},[220,56213,56214],{"class":230},"'IsometricCubes'",[220,56216,2465],{"class":264},[220,56218,56219],{"class":222,"line":650},[220,56220,1787],{"class":264},[220,56222,56223],{"class":222,"line":656},[220,56224,1792],{"class":264},[1504,56226,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56228},[56229,56230],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":56038,"description":56046},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":56237,"title":56238,"body":56239,"category":33396,"componentType":25883,"description":56246,"extension":191,"meta":56507,"navigation":194,"path":56508,"requiresChild":194,"seo":56509,"stem":56510,"__hash__":56511},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":56240,"toc":56503},[56241,56244,56247,56249,56251,56254,56256,56501],[11,56242,56238],{"id":56243},"kaleidoscope",[15,56245,56246],{},"Create a kaleidoscope effect with radial mirrored segments",[31911,56248],{"component":56238},[23,56250,31915],{"id":26533},[31917,56252],{":props":56253},"[{\"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,56255,31923],{"id":31922},[246,56257,56258,56303,56347,56391,56435],{":tabs":1557},[212,56259,56261],{"className":334,"code":56260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,56262,56263,56271,56279,56287,56295],{"__ignoreMap":178},[220,56264,56265,56267,56269],{"class":222,"line":223},[220,56266,343],{"class":264},[220,56268,347],{"class":346},[220,56270,359],{"class":264},[220,56272,56273,56275,56277],{"class":222,"line":179},[220,56274,364],{"class":264},[220,56276,56238],{"class":346},[220,56278,359],{"class":264},[220,56280,56281,56283,56285],{"class":222,"line":389},[220,56282,2550],{"class":264},[220,56284,2553],{"class":346},[220,56286,386],{"class":264},[220,56288,56289,56291,56293],{"class":222,"line":399},[220,56290,2567],{"class":264},[220,56292,56238],{"class":346},[220,56294,359],{"class":264},[220,56296,56297,56299,56301],{"class":222,"line":644},[220,56298,402],{"class":264},[220,56300,347],{"class":346},[220,56302,359],{"class":264},[212,56304,56305],{"className":409,"code":56260,"language":411,"meta":178,"style":178},[99,56306,56307,56315,56323,56331,56339],{"__ignoreMap":178},[220,56308,56309,56311,56313],{"class":222,"line":223},[220,56310,343],{"class":264},[220,56312,347],{"class":420},[220,56314,359],{"class":264},[220,56316,56317,56319,56321],{"class":222,"line":179},[220,56318,364],{"class":264},[220,56320,56238],{"class":420},[220,56322,359],{"class":264},[220,56324,56325,56327,56329],{"class":222,"line":389},[220,56326,2550],{"class":264},[220,56328,2553],{"class":420},[220,56330,386],{"class":264},[220,56332,56333,56335,56337],{"class":222,"line":399},[220,56334,2567],{"class":264},[220,56336,56238],{"class":420},[220,56338,359],{"class":264},[220,56340,56341,56343,56345],{"class":222,"line":644},[220,56342,402],{"class":264},[220,56344,347],{"class":420},[220,56346,359],{"class":264},[212,56348,56349],{"className":2844,"code":56260,"language":2846,"meta":178,"style":178},[99,56350,56351,56359,56367,56375,56383],{"__ignoreMap":178},[220,56352,56353,56355,56357],{"class":222,"line":223},[220,56354,343],{"class":264},[220,56356,347],{"class":420},[220,56358,359],{"class":264},[220,56360,56361,56363,56365],{"class":222,"line":179},[220,56362,364],{"class":264},[220,56364,56238],{"class":420},[220,56366,359],{"class":264},[220,56368,56369,56371,56373],{"class":222,"line":389},[220,56370,2550],{"class":264},[220,56372,2553],{"class":420},[220,56374,386],{"class":264},[220,56376,56377,56379,56381],{"class":222,"line":399},[220,56378,2567],{"class":264},[220,56380,56238],{"class":420},[220,56382,359],{"class":264},[220,56384,56385,56387,56389],{"class":222,"line":644},[220,56386,402],{"class":264},[220,56388,347],{"class":420},[220,56390,359],{"class":264},[212,56392,56393],{"className":468,"code":56260,"language":469,"meta":178,"style":178},[99,56394,56395,56403,56411,56419,56427],{"__ignoreMap":178},[220,56396,56397,56399,56401],{"class":222,"line":223},[220,56398,343],{"class":264},[220,56400,347],{"class":420},[220,56402,359],{"class":264},[220,56404,56405,56407,56409],{"class":222,"line":179},[220,56406,364],{"class":264},[220,56408,56238],{"class":420},[220,56410,359],{"class":264},[220,56412,56413,56415,56417],{"class":222,"line":389},[220,56414,2550],{"class":264},[220,56416,2553],{"class":420},[220,56418,386],{"class":264},[220,56420,56421,56423,56425],{"class":222,"line":399},[220,56422,2567],{"class":264},[220,56424,56238],{"class":420},[220,56426,359],{"class":264},[220,56428,56429,56431,56433],{"class":222,"line":644},[220,56430,402],{"class":264},[220,56432,347],{"class":420},[220,56434,359],{"class":264},[212,56436,56438],{"className":251,"code":56437,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Kaleidoscope', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,56439,56440,56450,56454,56468,56472,56481,56489,56493,56497],{"__ignoreMap":178},[220,56441,56442,56444,56446,56448],{"class":222,"line":223},[220,56443,261],{"class":260},[220,56445,11512],{"class":264},[220,56447,268],{"class":260},[220,56449,4007],{"class":230},[220,56451,56452],{"class":222,"line":179},[220,56453,647],{"emptyLinePlaceholder":194},[220,56455,56456,56458,56460,56462,56464,56466],{"class":222,"line":389},[220,56457,1735],{"class":260},[220,56459,1738],{"class":420},[220,56461,1741],{"class":260},[220,56463,1744],{"class":260},[220,56465,1747],{"class":226},[220,56467,1750],{"class":264},[220,56469,56470],{"class":222,"line":399},[220,56471,1765],{"class":264},[220,56473,56474,56476,56479],{"class":222,"line":644},[220,56475,1770],{"class":264},[220,56477,56478],{"class":230},"'Kaleidoscope'",[220,56480,7009],{"class":264},[220,56482,56483,56485,56487],{"class":222,"line":650},[220,56484,7014],{"class":264},[220,56486,3206],{"class":230},[220,56488,2465],{"class":264},[220,56490,56491],{"class":222,"line":656},[220,56492,7031],{"class":264},[220,56494,56495],{"class":222,"line":673},[220,56496,1787],{"class":264},[220,56498,56499],{"class":222,"line":682},[220,56500,1792],{"class":264},[1504,56502,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56504},[56505,56506],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":56238,"description":56246},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":56513,"title":56514,"body":56515,"category":32806,"componentType":25883,"description":56522,"extension":191,"meta":56783,"navigation":194,"path":56784,"requiresChild":194,"seo":56785,"stem":56786,"__hash__":56787},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":56516,"toc":56779},[56517,56520,56523,56525,56527,56530,56532,56777],[11,56518,56514],{"id":56519},"keyframes",[15,56521,56522],{},"Motion-tracking overlay — trackers hunt and follow features in the content, dropping keyframe diamonds behind them along their motion paths, like a compositor mid-track",[31911,56524],{"component":56514},[23,56526,31915],{"id":26533},[31917,56528],{":props":56529},"[{\"name\":\"trackers\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of simultaneous trackers.\"},{\"name\":\"detect\",\"type\":\"\\\"bright\\\" | \\\"dark\\\" | \\\"alpha\\\" | \\\"red\\\" | \\\"green\\\" | \\\"blue\\\"\",\"default\":\"bright\",\"description\":\"What the trackers hunt for.\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Feature floor — content scoring below this doesn't count as trackable at all.\"},{\"name\":\"variance\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Spread of tracker preferences — 0 hunts only the strongest features, 1 distributes trackers across the whole brightness range.\"},{\"name\":\"agility\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How fast trackers travel and how wide they search.\"},{\"name\":\"lifespan\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Seconds a tracker follows its target before retiring and reacquiring elsewhere. 0 = track forever.\"},{\"name\":\"trail\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Visibility of the keyframe trail each tracker leaves behind.\"},{\"name\":\"markerSize\",\"type\":\"number\",\"default\":\"28\",\"description\":\"Tracker gizmo size in pixels.\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Stroke width in pixels.\"},{\"name\":\"markerColor\",\"type\":\"string\",\"default\":\"#54d66b\",\"description\":\"Tracker gizmo color.\"},{\"name\":\"keyframeColor\",\"type\":\"string\",\"default\":\"#ffcf33\",\"description\":\"Keyframe diamond color.\"},{\"name\":\"pathColor\",\"type\":\"string\",\"default\":\"#ffffffb8\",\"description\":\"Motion path color.\"}]",[23,56531,31923],{"id":31922},[246,56533,56534,56579,56623,56667,56711],{":tabs":1557},[212,56535,56537],{"className":334,"code":56536,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,56538,56539,56547,56555,56563,56571],{"__ignoreMap":178},[220,56540,56541,56543,56545],{"class":222,"line":223},[220,56542,343],{"class":264},[220,56544,347],{"class":346},[220,56546,359],{"class":264},[220,56548,56549,56551,56553],{"class":222,"line":179},[220,56550,364],{"class":264},[220,56552,56514],{"class":346},[220,56554,359],{"class":264},[220,56556,56557,56559,56561],{"class":222,"line":389},[220,56558,2550],{"class":264},[220,56560,2553],{"class":346},[220,56562,386],{"class":264},[220,56564,56565,56567,56569],{"class":222,"line":399},[220,56566,2567],{"class":264},[220,56568,56514],{"class":346},[220,56570,359],{"class":264},[220,56572,56573,56575,56577],{"class":222,"line":644},[220,56574,402],{"class":264},[220,56576,347],{"class":346},[220,56578,359],{"class":264},[212,56580,56581],{"className":409,"code":56536,"language":411,"meta":178,"style":178},[99,56582,56583,56591,56599,56607,56615],{"__ignoreMap":178},[220,56584,56585,56587,56589],{"class":222,"line":223},[220,56586,343],{"class":264},[220,56588,347],{"class":420},[220,56590,359],{"class":264},[220,56592,56593,56595,56597],{"class":222,"line":179},[220,56594,364],{"class":264},[220,56596,56514],{"class":420},[220,56598,359],{"class":264},[220,56600,56601,56603,56605],{"class":222,"line":389},[220,56602,2550],{"class":264},[220,56604,2553],{"class":420},[220,56606,386],{"class":264},[220,56608,56609,56611,56613],{"class":222,"line":399},[220,56610,2567],{"class":264},[220,56612,56514],{"class":420},[220,56614,359],{"class":264},[220,56616,56617,56619,56621],{"class":222,"line":644},[220,56618,402],{"class":264},[220,56620,347],{"class":420},[220,56622,359],{"class":264},[212,56624,56625],{"className":2844,"code":56536,"language":2846,"meta":178,"style":178},[99,56626,56627,56635,56643,56651,56659],{"__ignoreMap":178},[220,56628,56629,56631,56633],{"class":222,"line":223},[220,56630,343],{"class":264},[220,56632,347],{"class":420},[220,56634,359],{"class":264},[220,56636,56637,56639,56641],{"class":222,"line":179},[220,56638,364],{"class":264},[220,56640,56514],{"class":420},[220,56642,359],{"class":264},[220,56644,56645,56647,56649],{"class":222,"line":389},[220,56646,2550],{"class":264},[220,56648,2553],{"class":420},[220,56650,386],{"class":264},[220,56652,56653,56655,56657],{"class":222,"line":399},[220,56654,2567],{"class":264},[220,56656,56514],{"class":420},[220,56658,359],{"class":264},[220,56660,56661,56663,56665],{"class":222,"line":644},[220,56662,402],{"class":264},[220,56664,347],{"class":420},[220,56666,359],{"class":264},[212,56668,56669],{"className":468,"code":56536,"language":469,"meta":178,"style":178},[99,56670,56671,56679,56687,56695,56703],{"__ignoreMap":178},[220,56672,56673,56675,56677],{"class":222,"line":223},[220,56674,343],{"class":264},[220,56676,347],{"class":420},[220,56678,359],{"class":264},[220,56680,56681,56683,56685],{"class":222,"line":179},[220,56682,364],{"class":264},[220,56684,56514],{"class":420},[220,56686,359],{"class":264},[220,56688,56689,56691,56693],{"class":222,"line":389},[220,56690,2550],{"class":264},[220,56692,2553],{"class":420},[220,56694,386],{"class":264},[220,56696,56697,56699,56701],{"class":222,"line":399},[220,56698,2567],{"class":264},[220,56700,56514],{"class":420},[220,56702,359],{"class":264},[220,56704,56705,56707,56709],{"class":222,"line":644},[220,56706,402],{"class":264},[220,56708,347],{"class":420},[220,56710,359],{"class":264},[212,56712,56714],{"className":251,"code":56713,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'KeyFrames', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,56715,56716,56726,56730,56744,56748,56757,56765,56769,56773],{"__ignoreMap":178},[220,56717,56718,56720,56722,56724],{"class":222,"line":223},[220,56719,261],{"class":260},[220,56721,11512],{"class":264},[220,56723,268],{"class":260},[220,56725,4007],{"class":230},[220,56727,56728],{"class":222,"line":179},[220,56729,647],{"emptyLinePlaceholder":194},[220,56731,56732,56734,56736,56738,56740,56742],{"class":222,"line":389},[220,56733,1735],{"class":260},[220,56735,1738],{"class":420},[220,56737,1741],{"class":260},[220,56739,1744],{"class":260},[220,56741,1747],{"class":226},[220,56743,1750],{"class":264},[220,56745,56746],{"class":222,"line":399},[220,56747,1765],{"class":264},[220,56749,56750,56752,56755],{"class":222,"line":644},[220,56751,1770],{"class":264},[220,56753,56754],{"class":230},"'KeyFrames'",[220,56756,7009],{"class":264},[220,56758,56759,56761,56763],{"class":222,"line":650},[220,56760,7014],{"class":264},[220,56762,3206],{"class":230},[220,56764,2465],{"class":264},[220,56766,56767],{"class":222,"line":656},[220,56768,7031],{"class":264},[220,56770,56771],{"class":222,"line":673},[220,56772,1787],{"class":264},[220,56774,56775],{"class":222,"line":682},[220,56776,1792],{"class":264},[1504,56778,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":56780},[56781,56782],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":56514,"description":56522},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56789,"title":56790,"body":56791,"category":32806,"componentType":25877,"description":56798,"extension":191,"meta":57038,"navigation":194,"path":57039,"requiresChild":32530,"seo":57040,"stem":57041,"__hash__":57042},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":56792,"toc":57034},[56793,56796,56799,56801,56803,56806,56808,57032],[11,56794,56790],{"id":56795},"lensflare",[15,56797,56798],{},"Realistic camera lens flare with artifacts.",[31911,56800],{"component":56790},[23,56802,31915],{"id":26533},[31917,56804],{":props":56805},"[{\"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,56807,31923],{"id":31922},[246,56809,56810,56849,56892,56932,56974],{":tabs":1557},[212,56811,56813],{"className":334,"code":56812,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,56814,56815,56823,56829,56837,56841],{"__ignoreMap":178},[220,56816,56817,56819,56821],{"class":222,"line":223},[220,56818,343],{"class":264},[220,56820,347],{"class":346},[220,56822,359],{"class":264},[220,56824,56825,56827],{"class":222,"line":179},[220,56826,364],{"class":264},[220,56828,20357],{"class":346},[220,56830,56831,56833,56835],{"class":222,"line":389},[220,56832,20371],{"class":226},[220,56834,353],{"class":264},[220,56836,42158],{"class":230},[220,56838,56839],{"class":222,"line":399},[220,56840,1234],{"class":264},[220,56842,56843,56845,56847],{"class":222,"line":644},[220,56844,402],{"class":264},[220,56846,347],{"class":346},[220,56848,359],{"class":264},[212,56850,56852],{"className":409,"code":56851,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,56853,56854,56862,56868,56880,56884],{"__ignoreMap":178},[220,56855,56856,56858,56860],{"class":222,"line":223},[220,56857,343],{"class":264},[220,56859,347],{"class":420},[220,56861,359],{"class":264},[220,56863,56864,56866],{"class":222,"line":179},[220,56865,364],{"class":264},[220,56867,20357],{"class":420},[220,56869,56870,56872,56874,56876,56878],{"class":222,"line":389},[220,56871,20482],{"class":226},[220,56873,353],{"class":260},[220,56875,743],{"class":264},[220,56877,7754],{"class":420},[220,56879,749],{"class":264},[220,56881,56882],{"class":222,"line":399},[220,56883,1234],{"class":264},[220,56885,56886,56888,56890],{"class":222,"line":644},[220,56887,402],{"class":264},[220,56889,347],{"class":420},[220,56891,359],{"class":264},[212,56893,56894],{"className":2844,"code":56851,"language":2846,"meta":178,"style":178},[99,56895,56896,56904,56910,56920,56924],{"__ignoreMap":178},[220,56897,56898,56900,56902],{"class":222,"line":223},[220,56899,343],{"class":264},[220,56901,347],{"class":420},[220,56903,359],{"class":264},[220,56905,56906,56908],{"class":222,"line":179},[220,56907,364],{"class":264},[220,56909,20357],{"class":420},[220,56911,56912,56914,56916,56918],{"class":222,"line":389},[220,56913,20482],{"class":226},[220,56915,29871],{"class":264},[220,56917,7754],{"class":420},[220,56919,749],{"class":264},[220,56921,56922],{"class":222,"line":399},[220,56923,1234],{"class":264},[220,56925,56926,56928,56930],{"class":222,"line":644},[220,56927,402],{"class":264},[220,56929,347],{"class":420},[220,56931,359],{"class":264},[212,56933,56934],{"className":468,"code":56851,"language":469,"meta":178,"style":178},[99,56935,56936,56944,56950,56962,56966],{"__ignoreMap":178},[220,56937,56938,56940,56942],{"class":222,"line":223},[220,56939,343],{"class":264},[220,56941,347],{"class":420},[220,56943,359],{"class":264},[220,56945,56946,56948],{"class":222,"line":179},[220,56947,364],{"class":264},[220,56949,20357],{"class":420},[220,56951,56952,56954,56956,56958,56960],{"class":222,"line":389},[220,56953,20482],{"class":226},[220,56955,353],{"class":260},[220,56957,743],{"class":264},[220,56959,7754],{"class":420},[220,56961,749],{"class":264},[220,56963,56964],{"class":222,"line":399},[220,56965,1234],{"class":264},[220,56967,56968,56970,56972],{"class":222,"line":644},[220,56969,402],{"class":264},[220,56971,347],{"class":420},[220,56973,359],{"class":264},[212,56975,56977],{"className":251,"code":56976,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LensFlare', props: { intensity: 0.5 } }\n ]\n})\n",[99,56978,56979,56989,56993,57007,57011,57024,57028],{"__ignoreMap":178},[220,56980,56981,56983,56985,56987],{"class":222,"line":223},[220,56982,261],{"class":260},[220,56984,11512],{"class":264},[220,56986,268],{"class":260},[220,56988,4007],{"class":230},[220,56990,56991],{"class":222,"line":179},[220,56992,647],{"emptyLinePlaceholder":194},[220,56994,56995,56997,56999,57001,57003,57005],{"class":222,"line":389},[220,56996,1735],{"class":260},[220,56998,1738],{"class":420},[220,57000,1741],{"class":260},[220,57002,1744],{"class":260},[220,57004,1747],{"class":226},[220,57006,1750],{"class":264},[220,57008,57009],{"class":222,"line":399},[220,57010,1765],{"class":264},[220,57012,57013,57015,57018,57020,57022],{"class":222,"line":644},[220,57014,1770],{"class":264},[220,57016,57017],{"class":230},"'LensFlare'",[220,57019,32203],{"class":264},[220,57021,7754],{"class":420},[220,57023,1782],{"class":264},[220,57025,57026],{"class":222,"line":650},[220,57027,1787],{"class":264},[220,57029,57030],{"class":222,"line":656},[220,57031,1792],{"class":264},[1504,57033,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57035},[57036,57037],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":56790,"description":56798},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":57044,"title":57045,"body":57046,"category":36569,"componentType":25877,"description":57298,"extension":191,"meta":57299,"navigation":194,"path":57300,"requiresChild":32530,"seo":57301,"stem":57302,"__hash__":57303},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":57047,"toc":57294},[57048,57051,57057,57059,57061,57064,57066,57292],[11,57049,57045],{"id":57050},"lightedge",[15,57052,57053,57054,4836],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,57055,53882],{"href":53880,"rel":57056},[167],[31911,57058],{"component":57045},[23,57060,31915],{"id":26533},[31917,57062],{":props":57063},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the shape in degrees\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#7b2ff7\",\"description\":\"First border light color (used when no gradient stops are set)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#00e0ff\",\"description\":\"Second border light color (used when no gradient stops are set)\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"[{\\\"color\\\":\\\"#7b2ff7\\\",\\\"position\\\":0},{\\\"color\\\":\\\"#00e0ff\\\",\\\"position\\\":0.5},{\\\"color\\\":\\\"#ff3d81\\\",\\\"position\\\":1}]\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space overlapping lights blend in\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Width of the border band\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness — 0 = crisp band, 1 = wide smooth gradient\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Brightness of the individual light spots\"},{\"name\":\"bloom\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How additively overlapping lights pile up — high values overdrive to white\"},{\"name\":\"spots\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Number of light spots orbiting per color\"},{\"name\":\"spotSize\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Angular size of each light spot\"},{\"name\":\"pulse\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Heartbeat pulsing — synchronizes the lights to a double-beat rhythm\"},{\"name\":\"smoke\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Noisy luminous smoke drifting along the border\"},{\"name\":\"smokeSize\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Scale of the smoke billows\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed. 0 pauses.\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — re-rolls spot speeds, directions and phases\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,57065,31923],{"id":31922},[246,57067,57068,57109,57152,57192,57234],{":tabs":1557},[212,57069,57071],{"className":334,"code":57070,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,57072,57073,57081,57088,57097,57101],{"__ignoreMap":178},[220,57074,57075,57077,57079],{"class":222,"line":223},[220,57076,343],{"class":264},[220,57078,347],{"class":346},[220,57080,359],{"class":264},[220,57082,57083,57085],{"class":222,"line":179},[220,57084,364],{"class":264},[220,57086,57087],{"class":346},"LightEdge\n",[220,57089,57090,57092,57094],{"class":222,"line":389},[220,57091,20371],{"class":226},[220,57093,353],{"class":264},[220,57095,57096],{"class":230},"\"0.6\"\n",[220,57098,57099],{"class":222,"line":399},[220,57100,1234],{"class":264},[220,57102,57103,57105,57107],{"class":222,"line":644},[220,57104,402],{"class":264},[220,57106,347],{"class":346},[220,57108,359],{"class":264},[212,57110,57112],{"className":409,"code":57111,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,57113,57114,57122,57128,57140,57144],{"__ignoreMap":178},[220,57115,57116,57118,57120],{"class":222,"line":223},[220,57117,343],{"class":264},[220,57119,347],{"class":420},[220,57121,359],{"class":264},[220,57123,57124,57126],{"class":222,"line":179},[220,57125,364],{"class":264},[220,57127,57087],{"class":420},[220,57129,57130,57132,57134,57136,57138],{"class":222,"line":389},[220,57131,20482],{"class":226},[220,57133,353],{"class":260},[220,57135,743],{"class":264},[220,57137,8236],{"class":420},[220,57139,749],{"class":264},[220,57141,57142],{"class":222,"line":399},[220,57143,1234],{"class":264},[220,57145,57146,57148,57150],{"class":222,"line":644},[220,57147,402],{"class":264},[220,57149,347],{"class":420},[220,57151,359],{"class":264},[212,57153,57154],{"className":2844,"code":57111,"language":2846,"meta":178,"style":178},[99,57155,57156,57164,57170,57180,57184],{"__ignoreMap":178},[220,57157,57158,57160,57162],{"class":222,"line":223},[220,57159,343],{"class":264},[220,57161,347],{"class":420},[220,57163,359],{"class":264},[220,57165,57166,57168],{"class":222,"line":179},[220,57167,364],{"class":264},[220,57169,57087],{"class":420},[220,57171,57172,57174,57176,57178],{"class":222,"line":389},[220,57173,20482],{"class":226},[220,57175,29871],{"class":264},[220,57177,8236],{"class":420},[220,57179,749],{"class":264},[220,57181,57182],{"class":222,"line":399},[220,57183,1234],{"class":264},[220,57185,57186,57188,57190],{"class":222,"line":644},[220,57187,402],{"class":264},[220,57189,347],{"class":420},[220,57191,359],{"class":264},[212,57193,57194],{"className":468,"code":57111,"language":469,"meta":178,"style":178},[99,57195,57196,57204,57210,57222,57226],{"__ignoreMap":178},[220,57197,57198,57200,57202],{"class":222,"line":223},[220,57199,343],{"class":264},[220,57201,347],{"class":420},[220,57203,359],{"class":264},[220,57205,57206,57208],{"class":222,"line":179},[220,57207,364],{"class":264},[220,57209,57087],{"class":420},[220,57211,57212,57214,57216,57218,57220],{"class":222,"line":389},[220,57213,20482],{"class":226},[220,57215,353],{"class":260},[220,57217,743],{"class":264},[220,57219,8236],{"class":420},[220,57221,749],{"class":264},[220,57223,57224],{"class":222,"line":399},[220,57225,1234],{"class":264},[220,57227,57228,57230,57232],{"class":222,"line":644},[220,57229,402],{"class":264},[220,57231,347],{"class":420},[220,57233,359],{"class":264},[212,57235,57237],{"className":251,"code":57236,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LightEdge', props: { intensity: 0.6 } }\n ]\n})\n",[99,57238,57239,57249,57253,57267,57271,57284,57288],{"__ignoreMap":178},[220,57240,57241,57243,57245,57247],{"class":222,"line":223},[220,57242,261],{"class":260},[220,57244,11512],{"class":264},[220,57246,268],{"class":260},[220,57248,4007],{"class":230},[220,57250,57251],{"class":222,"line":179},[220,57252,647],{"emptyLinePlaceholder":194},[220,57254,57255,57257,57259,57261,57263,57265],{"class":222,"line":389},[220,57256,1735],{"class":260},[220,57258,1738],{"class":420},[220,57260,1741],{"class":260},[220,57262,1744],{"class":260},[220,57264,1747],{"class":226},[220,57266,1750],{"class":264},[220,57268,57269],{"class":222,"line":399},[220,57270,1765],{"class":264},[220,57272,57273,57275,57278,57280,57282],{"class":222,"line":644},[220,57274,1770],{"class":264},[220,57276,57277],{"class":230},"'LightEdge'",[220,57279,32203],{"class":264},[220,57281,8236],{"class":420},[220,57283,1782],{"class":264},[220,57285,57286],{"class":222,"line":650},[220,57287,1787],{"class":264},[220,57289,57290],{"class":222,"line":656},[220,57291,1792],{"class":264},[1504,57293,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57295},[57296,57297],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":57045,"description":57298},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":57305,"title":57306,"body":57307,"category":32806,"componentType":25883,"description":57314,"extension":191,"meta":57631,"navigation":194,"path":57632,"requiresChild":194,"seo":57633,"stem":57634,"__hash__":57635},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":57308,"toc":57627},[57309,57312,57315,57317,57319,57322,57324,57625],[11,57310,57306],{"id":57311},"lightleak",[15,57313,57314],{},"Photorealistic film light leak — warm overexposed light bleeding in from a draggable anchor point, with streak bands, chromatic fringing, and slow breathing that evolves over time",[31911,57316],{"component":57306},[23,57318,31915],{"id":26533},[31917,57320],{":props":57321},"[{\"name\":\"position\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.95,\\\"y\\\":0.4}\",\"description\":\"Anchor point of the leak — the light beams from here toward the canvas centre\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.55\",\"description\":\"How far the light bleeds into the frame\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Exposure strength of the leak\"},{\"name\":\"streaks\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Strength of the parallel streak bands further into the frame\"},{\"name\":\"colorHot\",\"type\":\"string\",\"default\":\"#fff3c4\",\"description\":\"Core color where the leak is fully overexposed\"},{\"name\":\"colorMid\",\"type\":\"string\",\"default\":\"#ff7a2f\",\"description\":\"Main body color of the leak\"},{\"name\":\"colorFringe\",\"type\":\"string\",\"default\":\"#a63d8f\",\"description\":\"Outer fringe color where the light fades out\"},{\"name\":\"flicker\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Breathing of the leak intensity\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Speed of the breathing, drift and evolution. 0 freezes the leak.\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — re-rolls the drift and breathing pattern\"}]",[23,57323,31923],{"id":31922},[246,57325,57326,57382,57441,57497,57555],{":tabs":1557},[212,57327,57329],{"className":334,"code":57328,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightLeak\n :intensity=\"0.15\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLightLeak>\n\u003C\u002FShader>\n",[99,57330,57331,57339,57346,57354,57358,57366,57374],{"__ignoreMap":178},[220,57332,57333,57335,57337],{"class":222,"line":223},[220,57334,343],{"class":264},[220,57336,347],{"class":346},[220,57338,359],{"class":264},[220,57340,57341,57343],{"class":222,"line":179},[220,57342,364],{"class":264},[220,57344,57345],{"class":346},"LightLeak\n",[220,57347,57348,57350,57352],{"class":222,"line":389},[220,57349,20371],{"class":226},[220,57351,353],{"class":264},[220,57353,18108],{"class":230},[220,57355,57356],{"class":222,"line":399},[220,57357,31959],{"class":264},[220,57359,57360,57362,57364],{"class":222,"line":644},[220,57361,2550],{"class":264},[220,57363,2553],{"class":346},[220,57365,386],{"class":264},[220,57367,57368,57370,57372],{"class":222,"line":650},[220,57369,2567],{"class":264},[220,57371,57306],{"class":346},[220,57373,359],{"class":264},[220,57375,57376,57378,57380],{"class":222,"line":656},[220,57377,402],{"class":264},[220,57379,347],{"class":346},[220,57381,359],{"class":264},[212,57383,57385],{"className":409,"code":57384,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightLeak\n intensity={0.15}\n >\n \u003CCircle \u002F>\n \u003C\u002FLightLeak>\n\u003C\u002FShader>\n",[99,57386,57387,57395,57401,57413,57417,57425,57433],{"__ignoreMap":178},[220,57388,57389,57391,57393],{"class":222,"line":223},[220,57390,343],{"class":264},[220,57392,347],{"class":420},[220,57394,359],{"class":264},[220,57396,57397,57399],{"class":222,"line":179},[220,57398,364],{"class":264},[220,57400,57345],{"class":420},[220,57402,57403,57405,57407,57409,57411],{"class":222,"line":389},[220,57404,20482],{"class":226},[220,57406,353],{"class":260},[220,57408,743],{"class":264},[220,57410,18192],{"class":420},[220,57412,749],{"class":264},[220,57414,57415],{"class":222,"line":399},[220,57416,31959],{"class":264},[220,57418,57419,57421,57423],{"class":222,"line":644},[220,57420,2550],{"class":264},[220,57422,2553],{"class":420},[220,57424,386],{"class":264},[220,57426,57427,57429,57431],{"class":222,"line":650},[220,57428,2567],{"class":264},[220,57430,57306],{"class":420},[220,57432,359],{"class":264},[220,57434,57435,57437,57439],{"class":222,"line":656},[220,57436,402],{"class":264},[220,57438,347],{"class":420},[220,57440,359],{"class":264},[212,57442,57443],{"className":2844,"code":57384,"language":2846,"meta":178,"style":178},[99,57444,57445,57453,57459,57469,57473,57481,57489],{"__ignoreMap":178},[220,57446,57447,57449,57451],{"class":222,"line":223},[220,57448,343],{"class":264},[220,57450,347],{"class":420},[220,57452,359],{"class":264},[220,57454,57455,57457],{"class":222,"line":179},[220,57456,364],{"class":264},[220,57458,57345],{"class":420},[220,57460,57461,57463,57465,57467],{"class":222,"line":389},[220,57462,20482],{"class":226},[220,57464,29871],{"class":264},[220,57466,18192],{"class":420},[220,57468,749],{"class":264},[220,57470,57471],{"class":222,"line":399},[220,57472,31959],{"class":264},[220,57474,57475,57477,57479],{"class":222,"line":644},[220,57476,2550],{"class":264},[220,57478,2553],{"class":420},[220,57480,386],{"class":264},[220,57482,57483,57485,57487],{"class":222,"line":650},[220,57484,2567],{"class":264},[220,57486,57306],{"class":420},[220,57488,359],{"class":264},[220,57490,57491,57493,57495],{"class":222,"line":656},[220,57492,402],{"class":264},[220,57494,347],{"class":420},[220,57496,359],{"class":264},[212,57498,57499],{"className":468,"code":57384,"language":469,"meta":178,"style":178},[99,57500,57501,57509,57515,57527,57531,57539,57547],{"__ignoreMap":178},[220,57502,57503,57505,57507],{"class":222,"line":223},[220,57504,343],{"class":264},[220,57506,347],{"class":420},[220,57508,359],{"class":264},[220,57510,57511,57513],{"class":222,"line":179},[220,57512,364],{"class":264},[220,57514,57345],{"class":420},[220,57516,57517,57519,57521,57523,57525],{"class":222,"line":389},[220,57518,20482],{"class":226},[220,57520,353],{"class":260},[220,57522,743],{"class":264},[220,57524,18192],{"class":420},[220,57526,749],{"class":264},[220,57528,57529],{"class":222,"line":399},[220,57530,31959],{"class":264},[220,57532,57533,57535,57537],{"class":222,"line":644},[220,57534,2550],{"class":264},[220,57536,2553],{"class":420},[220,57538,386],{"class":264},[220,57540,57541,57543,57545],{"class":222,"line":650},[220,57542,2567],{"class":264},[220,57544,57306],{"class":420},[220,57546,359],{"class":264},[220,57548,57549,57551,57553],{"class":222,"line":656},[220,57550,402],{"class":264},[220,57552,347],{"class":420},[220,57554,359],{"class":264},[212,57556,57558],{"className":251,"code":57557,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LightLeak', props: { intensity: 0.15 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,57559,57560,57570,57574,57588,57592,57605,57613,57617,57621],{"__ignoreMap":178},[220,57561,57562,57564,57566,57568],{"class":222,"line":223},[220,57563,261],{"class":260},[220,57565,11512],{"class":264},[220,57567,268],{"class":260},[220,57569,4007],{"class":230},[220,57571,57572],{"class":222,"line":179},[220,57573,647],{"emptyLinePlaceholder":194},[220,57575,57576,57578,57580,57582,57584,57586],{"class":222,"line":389},[220,57577,1735],{"class":260},[220,57579,1738],{"class":420},[220,57581,1741],{"class":260},[220,57583,1744],{"class":260},[220,57585,1747],{"class":226},[220,57587,1750],{"class":264},[220,57589,57590],{"class":222,"line":399},[220,57591,1765],{"class":264},[220,57593,57594,57596,57599,57601,57603],{"class":222,"line":644},[220,57595,1770],{"class":264},[220,57597,57598],{"class":230},"'LightLeak'",[220,57600,32203],{"class":264},[220,57602,18192],{"class":420},[220,57604,7546],{"class":264},[220,57606,57607,57609,57611],{"class":222,"line":650},[220,57608,7014],{"class":264},[220,57610,3206],{"class":230},[220,57612,2465],{"class":264},[220,57614,57615],{"class":222,"line":656},[220,57616,7031],{"class":264},[220,57618,57619],{"class":222,"line":673},[220,57620,1787],{"class":264},[220,57622,57623],{"class":222,"line":682},[220,57624,1792],{"class":264},[1504,57626,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57628},[57629,57630],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":57306,"description":57314},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":57637,"title":57638,"body":57639,"category":32234,"componentType":25883,"description":57646,"extension":191,"meta":57963,"navigation":194,"path":57964,"requiresChild":194,"seo":57965,"stem":57966,"__hash__":57967},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":57640,"toc":57959},[57641,57644,57647,57649,57651,57654,57656,57957],[11,57642,57638],{"id":57643},"linearblur",[15,57645,57646],{},"Directional motion blur in a specific angle",[31911,57648],{"component":57638},[23,57650,31915],{"id":26533},[31917,57652],{":props":57653},"[{\"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,57655,31923],{"id":31922},[246,57657,57658,57714,57773,57829,57887],{":tabs":1557},[212,57659,57661],{"className":334,"code":57660,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57662,57663,57671,57678,57686,57690,57698,57706],{"__ignoreMap":178},[220,57664,57665,57667,57669],{"class":222,"line":223},[220,57666,343],{"class":264},[220,57668,347],{"class":346},[220,57670,359],{"class":264},[220,57672,57673,57675],{"class":222,"line":179},[220,57674,364],{"class":264},[220,57676,57677],{"class":346},"LinearBlur\n",[220,57679,57680,57682,57684],{"class":222,"line":389},[220,57681,20371],{"class":226},[220,57683,353],{"class":264},[220,57685,43592],{"class":230},[220,57687,57688],{"class":222,"line":399},[220,57689,31959],{"class":264},[220,57691,57692,57694,57696],{"class":222,"line":644},[220,57693,2550],{"class":264},[220,57695,2553],{"class":346},[220,57697,386],{"class":264},[220,57699,57700,57702,57704],{"class":222,"line":650},[220,57701,2567],{"class":264},[220,57703,57638],{"class":346},[220,57705,359],{"class":264},[220,57707,57708,57710,57712],{"class":222,"line":656},[220,57709,402],{"class":264},[220,57711,347],{"class":346},[220,57713,359],{"class":264},[212,57715,57717],{"className":409,"code":57716,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57718,57719,57727,57733,57745,57749,57757,57765],{"__ignoreMap":178},[220,57720,57721,57723,57725],{"class":222,"line":223},[220,57722,343],{"class":264},[220,57724,347],{"class":420},[220,57726,359],{"class":264},[220,57728,57729,57731],{"class":222,"line":179},[220,57730,364],{"class":264},[220,57732,57677],{"class":420},[220,57734,57735,57737,57739,57741,57743],{"class":222,"line":389},[220,57736,20482],{"class":226},[220,57738,353],{"class":260},[220,57740,743],{"class":264},[220,57742,24010],{"class":420},[220,57744,749],{"class":264},[220,57746,57747],{"class":222,"line":399},[220,57748,31959],{"class":264},[220,57750,57751,57753,57755],{"class":222,"line":644},[220,57752,2550],{"class":264},[220,57754,2553],{"class":420},[220,57756,386],{"class":264},[220,57758,57759,57761,57763],{"class":222,"line":650},[220,57760,2567],{"class":264},[220,57762,57638],{"class":420},[220,57764,359],{"class":264},[220,57766,57767,57769,57771],{"class":222,"line":656},[220,57768,402],{"class":264},[220,57770,347],{"class":420},[220,57772,359],{"class":264},[212,57774,57775],{"className":2844,"code":57716,"language":2846,"meta":178,"style":178},[99,57776,57777,57785,57791,57801,57805,57813,57821],{"__ignoreMap":178},[220,57778,57779,57781,57783],{"class":222,"line":223},[220,57780,343],{"class":264},[220,57782,347],{"class":420},[220,57784,359],{"class":264},[220,57786,57787,57789],{"class":222,"line":179},[220,57788,364],{"class":264},[220,57790,57677],{"class":420},[220,57792,57793,57795,57797,57799],{"class":222,"line":389},[220,57794,20482],{"class":226},[220,57796,29871],{"class":264},[220,57798,24010],{"class":420},[220,57800,749],{"class":264},[220,57802,57803],{"class":222,"line":399},[220,57804,31959],{"class":264},[220,57806,57807,57809,57811],{"class":222,"line":644},[220,57808,2550],{"class":264},[220,57810,2553],{"class":420},[220,57812,386],{"class":264},[220,57814,57815,57817,57819],{"class":222,"line":650},[220,57816,2567],{"class":264},[220,57818,57638],{"class":420},[220,57820,359],{"class":264},[220,57822,57823,57825,57827],{"class":222,"line":656},[220,57824,402],{"class":264},[220,57826,347],{"class":420},[220,57828,359],{"class":264},[212,57830,57831],{"className":468,"code":57716,"language":469,"meta":178,"style":178},[99,57832,57833,57841,57847,57859,57863,57871,57879],{"__ignoreMap":178},[220,57834,57835,57837,57839],{"class":222,"line":223},[220,57836,343],{"class":264},[220,57838,347],{"class":420},[220,57840,359],{"class":264},[220,57842,57843,57845],{"class":222,"line":179},[220,57844,364],{"class":264},[220,57846,57677],{"class":420},[220,57848,57849,57851,57853,57855,57857],{"class":222,"line":389},[220,57850,20482],{"class":226},[220,57852,353],{"class":260},[220,57854,743],{"class":264},[220,57856,24010],{"class":420},[220,57858,749],{"class":264},[220,57860,57861],{"class":222,"line":399},[220,57862,31959],{"class":264},[220,57864,57865,57867,57869],{"class":222,"line":644},[220,57866,2550],{"class":264},[220,57868,2553],{"class":420},[220,57870,386],{"class":264},[220,57872,57873,57875,57877],{"class":222,"line":650},[220,57874,2567],{"class":264},[220,57876,57638],{"class":420},[220,57878,359],{"class":264},[220,57880,57881,57883,57885],{"class":222,"line":656},[220,57882,402],{"class":264},[220,57884,347],{"class":420},[220,57886,359],{"class":264},[212,57888,57890],{"className":251,"code":57889,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,57891,57892,57902,57906,57920,57924,57937,57945,57949,57953],{"__ignoreMap":178},[220,57893,57894,57896,57898,57900],{"class":222,"line":223},[220,57895,261],{"class":260},[220,57897,11512],{"class":264},[220,57899,268],{"class":260},[220,57901,4007],{"class":230},[220,57903,57904],{"class":222,"line":179},[220,57905,647],{"emptyLinePlaceholder":194},[220,57907,57908,57910,57912,57914,57916,57918],{"class":222,"line":389},[220,57909,1735],{"class":260},[220,57911,1738],{"class":420},[220,57913,1741],{"class":260},[220,57915,1744],{"class":260},[220,57917,1747],{"class":226},[220,57919,1750],{"class":264},[220,57921,57922],{"class":222,"line":399},[220,57923,1765],{"class":264},[220,57925,57926,57928,57931,57933,57935],{"class":222,"line":644},[220,57927,1770],{"class":264},[220,57929,57930],{"class":230},"'LinearBlur'",[220,57932,32203],{"class":264},[220,57934,24010],{"class":420},[220,57936,7546],{"class":264},[220,57938,57939,57941,57943],{"class":222,"line":650},[220,57940,7014],{"class":264},[220,57942,3206],{"class":230},[220,57944,2465],{"class":264},[220,57946,57947],{"class":222,"line":656},[220,57948,7031],{"class":264},[220,57950,57951],{"class":222,"line":673},[220,57952,1787],{"class":264},[220,57954,57955],{"class":222,"line":682},[220,57956,1792],{"class":264},[1504,57958,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57960},[57961,57962],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":57638,"description":57646},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":57969,"title":367,"body":57970,"category":33063,"componentType":25877,"description":57977,"extension":191,"meta":58161,"navigation":194,"path":58162,"requiresChild":32530,"seo":58163,"stem":58164,"__hash__":58165},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":57971,"toc":58157},[57972,57975,57978,57980,57982,57985,57987,58155],[11,57973,367],{"id":57974},"lineargradient",[15,57976,57977],{},"Create smooth linear color gradients",[31911,57979],{"component":367},[23,57981,31915],{"id":26533},[31917,57983],{":props":57984},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,57986,31923],{"id":31922},[246,57988,57989,58018,58046,58074,58102],{":tabs":1557},[212,57990,57992],{"className":334,"code":57991,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,57993,57994,58002,58010],{"__ignoreMap":178},[220,57995,57996,57998,58000],{"class":222,"line":223},[220,57997,343],{"class":264},[220,57999,347],{"class":346},[220,58001,359],{"class":264},[220,58003,58004,58006,58008],{"class":222,"line":179},[220,58005,364],{"class":264},[220,58007,367],{"class":346},[220,58009,386],{"class":264},[220,58011,58012,58014,58016],{"class":222,"line":389},[220,58013,402],{"class":264},[220,58015,347],{"class":346},[220,58017,359],{"class":264},[212,58019,58020],{"className":409,"code":57991,"language":411,"meta":178,"style":178},[99,58021,58022,58030,58038],{"__ignoreMap":178},[220,58023,58024,58026,58028],{"class":222,"line":223},[220,58025,343],{"class":264},[220,58027,347],{"class":420},[220,58029,359],{"class":264},[220,58031,58032,58034,58036],{"class":222,"line":179},[220,58033,364],{"class":264},[220,58035,367],{"class":420},[220,58037,386],{"class":264},[220,58039,58040,58042,58044],{"class":222,"line":389},[220,58041,402],{"class":264},[220,58043,347],{"class":420},[220,58045,359],{"class":264},[212,58047,58048],{"className":2844,"code":57991,"language":2846,"meta":178,"style":178},[99,58049,58050,58058,58066],{"__ignoreMap":178},[220,58051,58052,58054,58056],{"class":222,"line":223},[220,58053,343],{"class":264},[220,58055,347],{"class":420},[220,58057,359],{"class":264},[220,58059,58060,58062,58064],{"class":222,"line":179},[220,58061,364],{"class":264},[220,58063,367],{"class":420},[220,58065,386],{"class":264},[220,58067,58068,58070,58072],{"class":222,"line":389},[220,58069,402],{"class":264},[220,58071,347],{"class":420},[220,58073,359],{"class":264},[212,58075,58076],{"className":468,"code":57991,"language":469,"meta":178,"style":178},[99,58077,58078,58086,58094],{"__ignoreMap":178},[220,58079,58080,58082,58084],{"class":222,"line":223},[220,58081,343],{"class":264},[220,58083,347],{"class":420},[220,58085,359],{"class":264},[220,58087,58088,58090,58092],{"class":222,"line":179},[220,58089,364],{"class":264},[220,58091,367],{"class":420},[220,58093,386],{"class":264},[220,58095,58096,58098,58100],{"class":222,"line":389},[220,58097,402],{"class":264},[220,58099,347],{"class":420},[220,58101,359],{"class":264},[212,58103,58105],{"className":251,"code":58104,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,58106,58107,58117,58121,58135,58139,58147,58151],{"__ignoreMap":178},[220,58108,58109,58111,58113,58115],{"class":222,"line":223},[220,58110,261],{"class":260},[220,58112,11512],{"class":264},[220,58114,268],{"class":260},[220,58116,4007],{"class":230},[220,58118,58119],{"class":222,"line":179},[220,58120,647],{"emptyLinePlaceholder":194},[220,58122,58123,58125,58127,58129,58131,58133],{"class":222,"line":389},[220,58124,1735],{"class":260},[220,58126,1738],{"class":420},[220,58128,1741],{"class":260},[220,58130,1744],{"class":260},[220,58132,1747],{"class":226},[220,58134,1750],{"class":264},[220,58136,58137],{"class":222,"line":399},[220,58138,1765],{"class":264},[220,58140,58141,58143,58145],{"class":222,"line":644},[220,58142,1770],{"class":264},[220,58144,2462],{"class":230},[220,58146,2465],{"class":264},[220,58148,58149],{"class":222,"line":650},[220,58150,1787],{"class":264},[220,58152,58153],{"class":222,"line":656},[220,58154,1792],{"class":264},[1504,58156,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58158},[58159,58160],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":57977},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":58167,"title":58168,"body":58169,"category":33673,"componentType":25883,"description":58176,"extension":191,"meta":58437,"navigation":194,"path":58438,"requiresChild":194,"seo":58439,"stem":58440,"__hash__":58441},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":58170,"toc":58433},[58171,58174,58177,58179,58181,58184,58186,58431],[11,58172,58168],{"id":58173},"linearwipe",[15,58175,58176],{},"Wipe the content away along a straight edge with a soft feathered transition",[31911,58178],{"component":58168},[23,58180,31915],{"id":26533},[31917,58182],{":props":58183},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has travelled (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the wipe in degrees (0 = left to right)\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the wipe edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the direction the wipe travels\"}]",[23,58185,31923],{"id":31922},[246,58187,58188,58233,58277,58321,58365],{":tabs":1557},[212,58189,58191],{"className":334,"code":58190,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,58192,58193,58201,58209,58217,58225],{"__ignoreMap":178},[220,58194,58195,58197,58199],{"class":222,"line":223},[220,58196,343],{"class":264},[220,58198,347],{"class":346},[220,58200,359],{"class":264},[220,58202,58203,58205,58207],{"class":222,"line":179},[220,58204,364],{"class":264},[220,58206,58168],{"class":346},[220,58208,359],{"class":264},[220,58210,58211,58213,58215],{"class":222,"line":389},[220,58212,2550],{"class":264},[220,58214,2553],{"class":346},[220,58216,386],{"class":264},[220,58218,58219,58221,58223],{"class":222,"line":399},[220,58220,2567],{"class":264},[220,58222,58168],{"class":346},[220,58224,359],{"class":264},[220,58226,58227,58229,58231],{"class":222,"line":644},[220,58228,402],{"class":264},[220,58230,347],{"class":346},[220,58232,359],{"class":264},[212,58234,58235],{"className":409,"code":58190,"language":411,"meta":178,"style":178},[99,58236,58237,58245,58253,58261,58269],{"__ignoreMap":178},[220,58238,58239,58241,58243],{"class":222,"line":223},[220,58240,343],{"class":264},[220,58242,347],{"class":420},[220,58244,359],{"class":264},[220,58246,58247,58249,58251],{"class":222,"line":179},[220,58248,364],{"class":264},[220,58250,58168],{"class":420},[220,58252,359],{"class":264},[220,58254,58255,58257,58259],{"class":222,"line":389},[220,58256,2550],{"class":264},[220,58258,2553],{"class":420},[220,58260,386],{"class":264},[220,58262,58263,58265,58267],{"class":222,"line":399},[220,58264,2567],{"class":264},[220,58266,58168],{"class":420},[220,58268,359],{"class":264},[220,58270,58271,58273,58275],{"class":222,"line":644},[220,58272,402],{"class":264},[220,58274,347],{"class":420},[220,58276,359],{"class":264},[212,58278,58279],{"className":2844,"code":58190,"language":2846,"meta":178,"style":178},[99,58280,58281,58289,58297,58305,58313],{"__ignoreMap":178},[220,58282,58283,58285,58287],{"class":222,"line":223},[220,58284,343],{"class":264},[220,58286,347],{"class":420},[220,58288,359],{"class":264},[220,58290,58291,58293,58295],{"class":222,"line":179},[220,58292,364],{"class":264},[220,58294,58168],{"class":420},[220,58296,359],{"class":264},[220,58298,58299,58301,58303],{"class":222,"line":389},[220,58300,2550],{"class":264},[220,58302,2553],{"class":420},[220,58304,386],{"class":264},[220,58306,58307,58309,58311],{"class":222,"line":399},[220,58308,2567],{"class":264},[220,58310,58168],{"class":420},[220,58312,359],{"class":264},[220,58314,58315,58317,58319],{"class":222,"line":644},[220,58316,402],{"class":264},[220,58318,347],{"class":420},[220,58320,359],{"class":264},[212,58322,58323],{"className":468,"code":58190,"language":469,"meta":178,"style":178},[99,58324,58325,58333,58341,58349,58357],{"__ignoreMap":178},[220,58326,58327,58329,58331],{"class":222,"line":223},[220,58328,343],{"class":264},[220,58330,347],{"class":420},[220,58332,359],{"class":264},[220,58334,58335,58337,58339],{"class":222,"line":179},[220,58336,364],{"class":264},[220,58338,58168],{"class":420},[220,58340,359],{"class":264},[220,58342,58343,58345,58347],{"class":222,"line":389},[220,58344,2550],{"class":264},[220,58346,2553],{"class":420},[220,58348,386],{"class":264},[220,58350,58351,58353,58355],{"class":222,"line":399},[220,58352,2567],{"class":264},[220,58354,58168],{"class":420},[220,58356,359],{"class":264},[220,58358,58359,58361,58363],{"class":222,"line":644},[220,58360,402],{"class":264},[220,58362,347],{"class":420},[220,58364,359],{"class":264},[212,58366,58368],{"className":251,"code":58367,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,58369,58370,58380,58384,58398,58402,58411,58419,58423,58427],{"__ignoreMap":178},[220,58371,58372,58374,58376,58378],{"class":222,"line":223},[220,58373,261],{"class":260},[220,58375,11512],{"class":264},[220,58377,268],{"class":260},[220,58379,4007],{"class":230},[220,58381,58382],{"class":222,"line":179},[220,58383,647],{"emptyLinePlaceholder":194},[220,58385,58386,58388,58390,58392,58394,58396],{"class":222,"line":389},[220,58387,1735],{"class":260},[220,58389,1738],{"class":420},[220,58391,1741],{"class":260},[220,58393,1744],{"class":260},[220,58395,1747],{"class":226},[220,58397,1750],{"class":264},[220,58399,58400],{"class":222,"line":399},[220,58401,1765],{"class":264},[220,58403,58404,58406,58409],{"class":222,"line":644},[220,58405,1770],{"class":264},[220,58407,58408],{"class":230},"'LinearWipe'",[220,58410,7009],{"class":264},[220,58412,58413,58415,58417],{"class":222,"line":650},[220,58414,7014],{"class":264},[220,58416,3206],{"class":230},[220,58418,2465],{"class":264},[220,58420,58421],{"class":222,"line":656},[220,58422,7031],{"class":264},[220,58424,58425],{"class":222,"line":673},[220,58426,1787],{"class":264},[220,58428,58429],{"class":222,"line":682},[220,58430,1792],{"class":264},[1504,58432,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58434},[58435,58436],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":58168,"description":58176},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":58443,"title":58444,"body":58445,"category":36569,"componentType":25877,"description":58452,"extension":191,"meta":58637,"navigation":194,"path":58638,"requiresChild":32530,"seo":58639,"stem":58640,"__hash__":58641},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":58446,"toc":58633},[58447,58450,58453,58455,58457,58460,58462,58631],[11,58448,58444],{"id":58449},"liquidmetal",[15,58451,58452],{},"Flowing liquid chrome — a molten reflective surface that wraps the shape, sweeping a procedural studio reflection across animated folds with crisp speculars and prismatic edges",[31911,58454],{"component":58444},[23,58456,31915],{"id":26533},[31917,58458],{":props":58459},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#eef0f6\",\"description\":\"The bright tone of the chrome highlights\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#141414\",\"description\":\"The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How molten the surface is — the depth of the flowing folds that bend the reflection\"},{\"name\":\"ripple\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Scale of the molten folds — higher = smaller, busier ripples\"},{\"name\":\"warp\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Swirl of the flow — domain-warps the folds into liquid curls\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the molten flow and the slowly drifting reflection. 0 pauses.\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Prismatic color fringing along the reflection edges\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"265\",\"description\":\"Direction of the key light for the specular glints, in degrees\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,58461,31923],{"id":31922},[246,58463,58464,58493,58521,58549,58577],{":tabs":1557},[212,58465,58467],{"className":334,"code":58466,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,58468,58469,58477,58485],{"__ignoreMap":178},[220,58470,58471,58473,58475],{"class":222,"line":223},[220,58472,343],{"class":264},[220,58474,347],{"class":346},[220,58476,359],{"class":264},[220,58478,58479,58481,58483],{"class":222,"line":179},[220,58480,364],{"class":264},[220,58482,58444],{"class":346},[220,58484,386],{"class":264},[220,58486,58487,58489,58491],{"class":222,"line":389},[220,58488,402],{"class":264},[220,58490,347],{"class":346},[220,58492,359],{"class":264},[212,58494,58495],{"className":409,"code":58466,"language":411,"meta":178,"style":178},[99,58496,58497,58505,58513],{"__ignoreMap":178},[220,58498,58499,58501,58503],{"class":222,"line":223},[220,58500,343],{"class":264},[220,58502,347],{"class":420},[220,58504,359],{"class":264},[220,58506,58507,58509,58511],{"class":222,"line":179},[220,58508,364],{"class":264},[220,58510,58444],{"class":420},[220,58512,386],{"class":264},[220,58514,58515,58517,58519],{"class":222,"line":389},[220,58516,402],{"class":264},[220,58518,347],{"class":420},[220,58520,359],{"class":264},[212,58522,58523],{"className":2844,"code":58466,"language":2846,"meta":178,"style":178},[99,58524,58525,58533,58541],{"__ignoreMap":178},[220,58526,58527,58529,58531],{"class":222,"line":223},[220,58528,343],{"class":264},[220,58530,347],{"class":420},[220,58532,359],{"class":264},[220,58534,58535,58537,58539],{"class":222,"line":179},[220,58536,364],{"class":264},[220,58538,58444],{"class":420},[220,58540,386],{"class":264},[220,58542,58543,58545,58547],{"class":222,"line":389},[220,58544,402],{"class":264},[220,58546,347],{"class":420},[220,58548,359],{"class":264},[212,58550,58551],{"className":468,"code":58466,"language":469,"meta":178,"style":178},[99,58552,58553,58561,58569],{"__ignoreMap":178},[220,58554,58555,58557,58559],{"class":222,"line":223},[220,58556,343],{"class":264},[220,58558,347],{"class":420},[220,58560,359],{"class":264},[220,58562,58563,58565,58567],{"class":222,"line":179},[220,58564,364],{"class":264},[220,58566,58444],{"class":420},[220,58568,386],{"class":264},[220,58570,58571,58573,58575],{"class":222,"line":389},[220,58572,402],{"class":264},[220,58574,347],{"class":420},[220,58576,359],{"class":264},[212,58578,58580],{"className":251,"code":58579,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LiquidMetal', props: {} }\n ]\n})\n",[99,58581,58582,58592,58596,58610,58614,58623,58627],{"__ignoreMap":178},[220,58583,58584,58586,58588,58590],{"class":222,"line":223},[220,58585,261],{"class":260},[220,58587,11512],{"class":264},[220,58589,268],{"class":260},[220,58591,4007],{"class":230},[220,58593,58594],{"class":222,"line":179},[220,58595,647],{"emptyLinePlaceholder":194},[220,58597,58598,58600,58602,58604,58606,58608],{"class":222,"line":389},[220,58599,1735],{"class":260},[220,58601,1738],{"class":420},[220,58603,1741],{"class":260},[220,58605,1744],{"class":260},[220,58607,1747],{"class":226},[220,58609,1750],{"class":264},[220,58611,58612],{"class":222,"line":399},[220,58613,1765],{"class":264},[220,58615,58616,58618,58621],{"class":222,"line":644},[220,58617,1770],{"class":264},[220,58619,58620],{"class":230},"'LiquidMetal'",[220,58622,2465],{"class":264},[220,58624,58625],{"class":222,"line":650},[220,58626,1787],{"class":264},[220,58628,58629],{"class":222,"line":656},[220,58630,1792],{"class":264},[1504,58632,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":58634},[58635,58636],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":58444,"description":58452},"docs\u002Fcomponents\u002FLiquidMetal","LmQ5r2jwprcNrDO0hQT_86dYHtyOQFU-SFxP_e6xZTM",{"id":58643,"title":58644,"body":58645,"category":35559,"componentType":25883,"description":58652,"extension":191,"meta":59015,"navigation":194,"path":59016,"requiresChild":194,"seo":59017,"stem":59018,"__hash__":59019},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":58646,"toc":59011},[58647,58650,58653,58655,58657,58660,58662,59009],[11,58648,58644],{"id":58649},"liquify",[15,58651,58652],{},"Liquid-like interactive deformation effect",[31911,58654],{"component":58644},[23,58656,31915],{"id":26533},[31917,58658],{":props":58659},"[{\"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,58661,31923],{"id":31922},[246,58663,58664,58728,58799,58865,58935],{":tabs":1557},[212,58665,58667],{"className":334,"code":58666,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquify\n :intensity=\"10\"\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLiquify>\n\u003C\u002FShader>\n",[99,58668,58669,58677,58684,58692,58700,58704,58712,58720],{"__ignoreMap":178},[220,58670,58671,58673,58675],{"class":222,"line":223},[220,58672,343],{"class":264},[220,58674,347],{"class":346},[220,58676,359],{"class":264},[220,58678,58679,58681],{"class":222,"line":179},[220,58680,364],{"class":264},[220,58682,58683],{"class":346},"Liquify\n",[220,58685,58686,58688,58690],{"class":222,"line":389},[220,58687,20371],{"class":226},[220,58689,353],{"class":264},[220,58691,42149],{"class":230},[220,58693,58694,58696,58698],{"class":222,"line":399},[220,58695,17405],{"class":226},[220,58697,353],{"class":264},[220,58699,36625],{"class":230},[220,58701,58702],{"class":222,"line":644},[220,58703,31959],{"class":264},[220,58705,58706,58708,58710],{"class":222,"line":650},[220,58707,2550],{"class":264},[220,58709,2553],{"class":346},[220,58711,386],{"class":264},[220,58713,58714,58716,58718],{"class":222,"line":656},[220,58715,2567],{"class":264},[220,58717,58644],{"class":346},[220,58719,359],{"class":264},[220,58721,58722,58724,58726],{"class":222,"line":673},[220,58723,402],{"class":264},[220,58725,347],{"class":346},[220,58727,359],{"class":264},[212,58729,58731],{"className":409,"code":58730,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLiquify\n intensity={10}\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FLiquify>\n\u003C\u002FShader>\n",[99,58732,58733,58741,58747,58759,58771,58775,58783,58791],{"__ignoreMap":178},[220,58734,58735,58737,58739],{"class":222,"line":223},[220,58736,343],{"class":264},[220,58738,347],{"class":420},[220,58740,359],{"class":264},[220,58742,58743,58745],{"class":222,"line":179},[220,58744,364],{"class":264},[220,58746,58683],{"class":420},[220,58748,58749,58751,58753,58755,58757],{"class":222,"line":389},[220,58750,20482],{"class":226},[220,58752,353],{"class":260},[220,58754,743],{"class":264},[220,58756,23850],{"class":420},[220,58758,749],{"class":264},[220,58760,58761,58763,58765,58767,58769],{"class":222,"line":399},[220,58762,9645],{"class":226},[220,58764,353],{"class":260},[220,58766,743],{"class":264},[220,58768,8677],{"class":420},[220,58770,749],{"class":264},[220,58772,58773],{"class":222,"line":644},[220,58774,31959],{"class":264},[220,58776,58777,58779,58781],{"class":222,"line":650},[220,58778,2550],{"class":264},[220,58780,2553],{"class":420},[220,58782,386],{"class":264},[220,58784,58785,58787,58789],{"class":222,"line":656},[220,58786,2567],{"class":264},[220,58788,58644],{"class":420},[220,58790,359],{"class":264},[220,58792,58793,58795,58797],{"class":222,"line":673},[220,58794,402],{"class":264},[220,58796,347],{"class":420},[220,58798,359],{"class":264},[212,58800,58801],{"className":2844,"code":58730,"language":2846,"meta":178,"style":178},[99,58802,58803,58811,58817,58827,58837,58841,58849,58857],{"__ignoreMap":178},[220,58804,58805,58807,58809],{"class":222,"line":223},[220,58806,343],{"class":264},[220,58808,347],{"class":420},[220,58810,359],{"class":264},[220,58812,58813,58815],{"class":222,"line":179},[220,58814,364],{"class":264},[220,58816,58683],{"class":420},[220,58818,58819,58821,58823,58825],{"class":222,"line":389},[220,58820,20482],{"class":226},[220,58822,29871],{"class":264},[220,58824,23850],{"class":420},[220,58826,749],{"class":264},[220,58828,58829,58831,58833,58835],{"class":222,"line":399},[220,58830,9645],{"class":226},[220,58832,29871],{"class":264},[220,58834,8677],{"class":420},[220,58836,749],{"class":264},[220,58838,58839],{"class":222,"line":644},[220,58840,31959],{"class":264},[220,58842,58843,58845,58847],{"class":222,"line":650},[220,58844,2550],{"class":264},[220,58846,2553],{"class":420},[220,58848,386],{"class":264},[220,58850,58851,58853,58855],{"class":222,"line":656},[220,58852,2567],{"class":264},[220,58854,58644],{"class":420},[220,58856,359],{"class":264},[220,58858,58859,58861,58863],{"class":222,"line":673},[220,58860,402],{"class":264},[220,58862,347],{"class":420},[220,58864,359],{"class":264},[212,58866,58867],{"className":468,"code":58730,"language":469,"meta":178,"style":178},[99,58868,58869,58877,58883,58895,58907,58911,58919,58927],{"__ignoreMap":178},[220,58870,58871,58873,58875],{"class":222,"line":223},[220,58872,343],{"class":264},[220,58874,347],{"class":420},[220,58876,359],{"class":264},[220,58878,58879,58881],{"class":222,"line":179},[220,58880,364],{"class":264},[220,58882,58683],{"class":420},[220,58884,58885,58887,58889,58891,58893],{"class":222,"line":389},[220,58886,20482],{"class":226},[220,58888,353],{"class":260},[220,58890,743],{"class":264},[220,58892,23850],{"class":420},[220,58894,749],{"class":264},[220,58896,58897,58899,58901,58903,58905],{"class":222,"line":399},[220,58898,9645],{"class":226},[220,58900,353],{"class":260},[220,58902,743],{"class":264},[220,58904,8677],{"class":420},[220,58906,749],{"class":264},[220,58908,58909],{"class":222,"line":644},[220,58910,31959],{"class":264},[220,58912,58913,58915,58917],{"class":222,"line":650},[220,58914,2550],{"class":264},[220,58916,2553],{"class":420},[220,58918,386],{"class":264},[220,58920,58921,58923,58925],{"class":222,"line":656},[220,58922,2567],{"class":264},[220,58924,58644],{"class":420},[220,58926,359],{"class":264},[220,58928,58929,58931,58933],{"class":222,"line":673},[220,58930,402],{"class":264},[220,58932,347],{"class":420},[220,58934,359],{"class":264},[212,58936,58938],{"className":251,"code":58937,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,58939,58940,58950,58954,58968,58972,58989,58997,59001,59005],{"__ignoreMap":178},[220,58941,58942,58944,58946,58948],{"class":222,"line":223},[220,58943,261],{"class":260},[220,58945,11512],{"class":264},[220,58947,268],{"class":260},[220,58949,4007],{"class":230},[220,58951,58952],{"class":222,"line":179},[220,58953,647],{"emptyLinePlaceholder":194},[220,58955,58956,58958,58960,58962,58964,58966],{"class":222,"line":389},[220,58957,1735],{"class":260},[220,58959,1738],{"class":420},[220,58961,1741],{"class":260},[220,58963,1744],{"class":260},[220,58965,1747],{"class":226},[220,58967,1750],{"class":264},[220,58969,58970],{"class":222,"line":399},[220,58971,1765],{"class":264},[220,58973,58974,58976,58979,58981,58983,58985,58987],{"class":222,"line":644},[220,58975,1770],{"class":264},[220,58977,58978],{"class":230},"'Liquify'",[220,58980,32203],{"class":264},[220,58982,23850],{"class":420},[220,58984,6566],{"class":264},[220,58986,8677],{"class":420},[220,58988,7546],{"class":264},[220,58990,58991,58993,58995],{"class":222,"line":650},[220,58992,7014],{"class":264},[220,58994,3206],{"class":230},[220,58996,2465],{"class":264},[220,58998,58999],{"class":222,"line":656},[220,59000,7031],{"class":264},[220,59002,59003],{"class":222,"line":673},[220,59004,1787],{"class":264},[220,59006,59007],{"class":222,"line":682},[220,59008,1792],{"class":264},[1504,59010,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59012},[59013,59014],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":58644,"description":58652},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":59021,"title":59022,"body":59023,"category":35559,"componentType":25877,"description":59030,"extension":191,"meta":59215,"navigation":194,"path":59216,"requiresChild":32530,"seo":59217,"stem":59218,"__hash__":59219},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":59024,"toc":59211},[59025,59028,59031,59033,59035,59038,59040,59209],[11,59026,59022],{"id":59027},"magneticfilings",[15,59029,59030],{},"Thousands of tiny iron filings scattered on paper that swing to align with a magnetic field around the cursor, tracing out the field lines — a dipole whose axis follows the cursor's motion draws the classic two-lobed swirl, and every sweep of the magnet sends a glowing wave of filings flipping and settling",[31911,59032],{"component":59022},[23,59034,31915],{"id":26533},[31917,59036],{":props":59037},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#be1ef9\",\"description\":\"Color of filings resting quietly, aligned and still\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#6326ff\",\"description\":\"Color filings flash toward as they swing and settle — a wave of it follows the moving magnet\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"shape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"How each filing is drawn — a slim streak or arrow reads as a compass needle, a box as a chunky filing, a dot or soft glow for a finer grain\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"8000\",\"description\":\"Number of iron filings\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of each filing\"},{\"name\":\"restOrientation\",\"type\":\"\\\"random\\\" | \\\"horizontal\\\" | \\\"vertical\\\"\",\"default\":\"random\",\"description\":\"Which way filings point where the field can't reach them — randomly, all horizontal, or all vertical\"},{\"name\":\"fieldType\",\"type\":\"\\\"dipole\\\" | \\\"radial\\\"\",\"default\":\"dipole\",\"description\":\"The magnetic field the filings reveal — a dipole (bar-magnet lobes that follow the cursor's motion) or a radial monopole (spokes out from the cursor)\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1.7\",\"description\":\"How strongly the magnet grips the filings — higher snaps more of them into sharp alignment\"},{\"name\":\"reach\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once\"},{\"name\":\"response\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly\"}]",[23,59039,31923],{"id":31922},[246,59041,59042,59071,59099,59127,59155],{":tabs":1557},[212,59043,59045],{"className":334,"code":59044,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,59046,59047,59055,59063],{"__ignoreMap":178},[220,59048,59049,59051,59053],{"class":222,"line":223},[220,59050,343],{"class":264},[220,59052,347],{"class":346},[220,59054,359],{"class":264},[220,59056,59057,59059,59061],{"class":222,"line":179},[220,59058,364],{"class":264},[220,59060,59022],{"class":346},[220,59062,386],{"class":264},[220,59064,59065,59067,59069],{"class":222,"line":389},[220,59066,402],{"class":264},[220,59068,347],{"class":346},[220,59070,359],{"class":264},[212,59072,59073],{"className":409,"code":59044,"language":411,"meta":178,"style":178},[99,59074,59075,59083,59091],{"__ignoreMap":178},[220,59076,59077,59079,59081],{"class":222,"line":223},[220,59078,343],{"class":264},[220,59080,347],{"class":420},[220,59082,359],{"class":264},[220,59084,59085,59087,59089],{"class":222,"line":179},[220,59086,364],{"class":264},[220,59088,59022],{"class":420},[220,59090,386],{"class":264},[220,59092,59093,59095,59097],{"class":222,"line":389},[220,59094,402],{"class":264},[220,59096,347],{"class":420},[220,59098,359],{"class":264},[212,59100,59101],{"className":2844,"code":59044,"language":2846,"meta":178,"style":178},[99,59102,59103,59111,59119],{"__ignoreMap":178},[220,59104,59105,59107,59109],{"class":222,"line":223},[220,59106,343],{"class":264},[220,59108,347],{"class":420},[220,59110,359],{"class":264},[220,59112,59113,59115,59117],{"class":222,"line":179},[220,59114,364],{"class":264},[220,59116,59022],{"class":420},[220,59118,386],{"class":264},[220,59120,59121,59123,59125],{"class":222,"line":389},[220,59122,402],{"class":264},[220,59124,347],{"class":420},[220,59126,359],{"class":264},[212,59128,59129],{"className":468,"code":59044,"language":469,"meta":178,"style":178},[99,59130,59131,59139,59147],{"__ignoreMap":178},[220,59132,59133,59135,59137],{"class":222,"line":223},[220,59134,343],{"class":264},[220,59136,347],{"class":420},[220,59138,359],{"class":264},[220,59140,59141,59143,59145],{"class":222,"line":179},[220,59142,364],{"class":264},[220,59144,59022],{"class":420},[220,59146,386],{"class":264},[220,59148,59149,59151,59153],{"class":222,"line":389},[220,59150,402],{"class":264},[220,59152,347],{"class":420},[220,59154,359],{"class":264},[212,59156,59158],{"className":251,"code":59157,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MagneticFilings', props: {} }\n ]\n})\n",[99,59159,59160,59170,59174,59188,59192,59201,59205],{"__ignoreMap":178},[220,59161,59162,59164,59166,59168],{"class":222,"line":223},[220,59163,261],{"class":260},[220,59165,11512],{"class":264},[220,59167,268],{"class":260},[220,59169,4007],{"class":230},[220,59171,59172],{"class":222,"line":179},[220,59173,647],{"emptyLinePlaceholder":194},[220,59175,59176,59178,59180,59182,59184,59186],{"class":222,"line":389},[220,59177,1735],{"class":260},[220,59179,1738],{"class":420},[220,59181,1741],{"class":260},[220,59183,1744],{"class":260},[220,59185,1747],{"class":226},[220,59187,1750],{"class":264},[220,59189,59190],{"class":222,"line":399},[220,59191,1765],{"class":264},[220,59193,59194,59196,59199],{"class":222,"line":644},[220,59195,1770],{"class":264},[220,59197,59198],{"class":230},"'MagneticFilings'",[220,59200,2465],{"class":264},[220,59202,59203],{"class":222,"line":650},[220,59204,1787],{"class":264},[220,59206,59207],{"class":222,"line":656},[220,59208,1792],{"class":264},[1504,59210,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59212},[59213,59214],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":59022,"description":59030},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":59221,"title":59222,"body":59223,"category":33063,"componentType":25877,"description":59230,"extension":191,"meta":59415,"navigation":194,"path":59416,"requiresChild":32530,"seo":59417,"stem":59418,"__hash__":59419},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":59224,"toc":59411},[59225,59228,59231,59233,59235,59238,59240,59409],[11,59226,59222],{"id":59227},"marble",[15,59229,59230],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31911,59232],{"component":59222},[23,59234,31915],{"id":26533},[31917,59236],{":props":59237},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Base background color of the marble\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#3a2d54\",\"description\":\"Secondary marble tone\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#0f0f0f\",\"description\":\"Deepest marble color\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale and density of the marble vein pattern\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Amount of noise-driven distortion applied to the veins\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,59239,31923],{"id":31922},[246,59241,59242,59271,59299,59327,59355],{":tabs":1557},[212,59243,59245],{"className":334,"code":59244,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,59246,59247,59255,59263],{"__ignoreMap":178},[220,59248,59249,59251,59253],{"class":222,"line":223},[220,59250,343],{"class":264},[220,59252,347],{"class":346},[220,59254,359],{"class":264},[220,59256,59257,59259,59261],{"class":222,"line":179},[220,59258,364],{"class":264},[220,59260,59222],{"class":346},[220,59262,386],{"class":264},[220,59264,59265,59267,59269],{"class":222,"line":389},[220,59266,402],{"class":264},[220,59268,347],{"class":346},[220,59270,359],{"class":264},[212,59272,59273],{"className":409,"code":59244,"language":411,"meta":178,"style":178},[99,59274,59275,59283,59291],{"__ignoreMap":178},[220,59276,59277,59279,59281],{"class":222,"line":223},[220,59278,343],{"class":264},[220,59280,347],{"class":420},[220,59282,359],{"class":264},[220,59284,59285,59287,59289],{"class":222,"line":179},[220,59286,364],{"class":264},[220,59288,59222],{"class":420},[220,59290,386],{"class":264},[220,59292,59293,59295,59297],{"class":222,"line":389},[220,59294,402],{"class":264},[220,59296,347],{"class":420},[220,59298,359],{"class":264},[212,59300,59301],{"className":2844,"code":59244,"language":2846,"meta":178,"style":178},[99,59302,59303,59311,59319],{"__ignoreMap":178},[220,59304,59305,59307,59309],{"class":222,"line":223},[220,59306,343],{"class":264},[220,59308,347],{"class":420},[220,59310,359],{"class":264},[220,59312,59313,59315,59317],{"class":222,"line":179},[220,59314,364],{"class":264},[220,59316,59222],{"class":420},[220,59318,386],{"class":264},[220,59320,59321,59323,59325],{"class":222,"line":389},[220,59322,402],{"class":264},[220,59324,347],{"class":420},[220,59326,359],{"class":264},[212,59328,59329],{"className":468,"code":59244,"language":469,"meta":178,"style":178},[99,59330,59331,59339,59347],{"__ignoreMap":178},[220,59332,59333,59335,59337],{"class":222,"line":223},[220,59334,343],{"class":264},[220,59336,347],{"class":420},[220,59338,359],{"class":264},[220,59340,59341,59343,59345],{"class":222,"line":179},[220,59342,364],{"class":264},[220,59344,59222],{"class":420},[220,59346,386],{"class":264},[220,59348,59349,59351,59353],{"class":222,"line":389},[220,59350,402],{"class":264},[220,59352,347],{"class":420},[220,59354,359],{"class":264},[212,59356,59358],{"className":251,"code":59357,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Marble', props: {} }\n ]\n})\n",[99,59359,59360,59370,59374,59388,59392,59401,59405],{"__ignoreMap":178},[220,59361,59362,59364,59366,59368],{"class":222,"line":223},[220,59363,261],{"class":260},[220,59365,11512],{"class":264},[220,59367,268],{"class":260},[220,59369,4007],{"class":230},[220,59371,59372],{"class":222,"line":179},[220,59373,647],{"emptyLinePlaceholder":194},[220,59375,59376,59378,59380,59382,59384,59386],{"class":222,"line":389},[220,59377,1735],{"class":260},[220,59379,1738],{"class":420},[220,59381,1741],{"class":260},[220,59383,1744],{"class":260},[220,59385,1747],{"class":226},[220,59387,1750],{"class":264},[220,59389,59390],{"class":222,"line":399},[220,59391,1765],{"class":264},[220,59393,59394,59396,59399],{"class":222,"line":644},[220,59395,1770],{"class":264},[220,59397,59398],{"class":230},"'Marble'",[220,59400,2465],{"class":264},[220,59402,59403],{"class":222,"line":650},[220,59404,1787],{"class":264},[220,59406,59407],{"class":222,"line":656},[220,59408,1792],{"class":264},[1504,59410,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59412},[59413,59414],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":59222,"description":59230},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":59421,"title":59422,"body":59423,"category":33396,"componentType":25883,"description":59430,"extension":191,"meta":59691,"navigation":194,"path":59692,"requiresChild":194,"seo":59693,"stem":59694,"__hash__":59695},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":59424,"toc":59687},[59425,59428,59431,59433,59435,59438,59440,59685],[11,59426,59422],{"id":59427},"mirror",[15,59429,59430],{},"Mirror content across a line defined by center point and angle",[31911,59432],{"component":59422},[23,59434,31915],{"id":26533},[31917,59436],{":props":59437},"[{\"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,59439,31923],{"id":31922},[246,59441,59442,59487,59531,59575,59619],{":tabs":1557},[212,59443,59445],{"className":334,"code":59444,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,59446,59447,59455,59463,59471,59479],{"__ignoreMap":178},[220,59448,59449,59451,59453],{"class":222,"line":223},[220,59450,343],{"class":264},[220,59452,347],{"class":346},[220,59454,359],{"class":264},[220,59456,59457,59459,59461],{"class":222,"line":179},[220,59458,364],{"class":264},[220,59460,59422],{"class":346},[220,59462,359],{"class":264},[220,59464,59465,59467,59469],{"class":222,"line":389},[220,59466,2550],{"class":264},[220,59468,2553],{"class":346},[220,59470,386],{"class":264},[220,59472,59473,59475,59477],{"class":222,"line":399},[220,59474,2567],{"class":264},[220,59476,59422],{"class":346},[220,59478,359],{"class":264},[220,59480,59481,59483,59485],{"class":222,"line":644},[220,59482,402],{"class":264},[220,59484,347],{"class":346},[220,59486,359],{"class":264},[212,59488,59489],{"className":409,"code":59444,"language":411,"meta":178,"style":178},[99,59490,59491,59499,59507,59515,59523],{"__ignoreMap":178},[220,59492,59493,59495,59497],{"class":222,"line":223},[220,59494,343],{"class":264},[220,59496,347],{"class":420},[220,59498,359],{"class":264},[220,59500,59501,59503,59505],{"class":222,"line":179},[220,59502,364],{"class":264},[220,59504,59422],{"class":420},[220,59506,359],{"class":264},[220,59508,59509,59511,59513],{"class":222,"line":389},[220,59510,2550],{"class":264},[220,59512,2553],{"class":420},[220,59514,386],{"class":264},[220,59516,59517,59519,59521],{"class":222,"line":399},[220,59518,2567],{"class":264},[220,59520,59422],{"class":420},[220,59522,359],{"class":264},[220,59524,59525,59527,59529],{"class":222,"line":644},[220,59526,402],{"class":264},[220,59528,347],{"class":420},[220,59530,359],{"class":264},[212,59532,59533],{"className":2844,"code":59444,"language":2846,"meta":178,"style":178},[99,59534,59535,59543,59551,59559,59567],{"__ignoreMap":178},[220,59536,59537,59539,59541],{"class":222,"line":223},[220,59538,343],{"class":264},[220,59540,347],{"class":420},[220,59542,359],{"class":264},[220,59544,59545,59547,59549],{"class":222,"line":179},[220,59546,364],{"class":264},[220,59548,59422],{"class":420},[220,59550,359],{"class":264},[220,59552,59553,59555,59557],{"class":222,"line":389},[220,59554,2550],{"class":264},[220,59556,2553],{"class":420},[220,59558,386],{"class":264},[220,59560,59561,59563,59565],{"class":222,"line":399},[220,59562,2567],{"class":264},[220,59564,59422],{"class":420},[220,59566,359],{"class":264},[220,59568,59569,59571,59573],{"class":222,"line":644},[220,59570,402],{"class":264},[220,59572,347],{"class":420},[220,59574,359],{"class":264},[212,59576,59577],{"className":468,"code":59444,"language":469,"meta":178,"style":178},[99,59578,59579,59587,59595,59603,59611],{"__ignoreMap":178},[220,59580,59581,59583,59585],{"class":222,"line":223},[220,59582,343],{"class":264},[220,59584,347],{"class":420},[220,59586,359],{"class":264},[220,59588,59589,59591,59593],{"class":222,"line":179},[220,59590,364],{"class":264},[220,59592,59422],{"class":420},[220,59594,359],{"class":264},[220,59596,59597,59599,59601],{"class":222,"line":389},[220,59598,2550],{"class":264},[220,59600,2553],{"class":420},[220,59602,386],{"class":264},[220,59604,59605,59607,59609],{"class":222,"line":399},[220,59606,2567],{"class":264},[220,59608,59422],{"class":420},[220,59610,359],{"class":264},[220,59612,59613,59615,59617],{"class":222,"line":644},[220,59614,402],{"class":264},[220,59616,347],{"class":420},[220,59618,359],{"class":264},[212,59620,59622],{"className":251,"code":59621,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Mirror', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,59623,59624,59634,59638,59652,59656,59665,59673,59677,59681],{"__ignoreMap":178},[220,59625,59626,59628,59630,59632],{"class":222,"line":223},[220,59627,261],{"class":260},[220,59629,11512],{"class":264},[220,59631,268],{"class":260},[220,59633,4007],{"class":230},[220,59635,59636],{"class":222,"line":179},[220,59637,647],{"emptyLinePlaceholder":194},[220,59639,59640,59642,59644,59646,59648,59650],{"class":222,"line":389},[220,59641,1735],{"class":260},[220,59643,1738],{"class":420},[220,59645,1741],{"class":260},[220,59647,1744],{"class":260},[220,59649,1747],{"class":226},[220,59651,1750],{"class":264},[220,59653,59654],{"class":222,"line":399},[220,59655,1765],{"class":264},[220,59657,59658,59660,59663],{"class":222,"line":644},[220,59659,1770],{"class":264},[220,59661,59662],{"class":230},"'Mirror'",[220,59664,7009],{"class":264},[220,59666,59667,59669,59671],{"class":222,"line":650},[220,59668,7014],{"class":264},[220,59670,3206],{"class":230},[220,59672,2465],{"class":264},[220,59674,59675],{"class":222,"line":656},[220,59676,7031],{"class":264},[220,59678,59679],{"class":222,"line":673},[220,59680,1787],{"class":264},[220,59682,59683],{"class":222,"line":682},[220,59684,1792],{"class":264},[1504,59686,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59688},[59689,59690],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":59422,"description":59430},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":59697,"title":59698,"body":59699,"category":33063,"componentType":25877,"description":59706,"extension":191,"meta":59891,"navigation":194,"path":59892,"requiresChild":32530,"seo":59893,"stem":59894,"__hash__":59895},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":59700,"toc":59887},[59701,59704,59707,59709,59711,59714,59716,59885],[11,59702,59698],{"id":59703},"multipointgradient",[15,59705,59706],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31911,59708],{"component":59698},[23,59710,31915],{"id":26533},[31917,59712],{":props":59713},"[{\"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\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Controls how smoothly colors blend.\"}]",[23,59715,31923],{"id":31922},[246,59717,59718,59747,59775,59803,59831],{":tabs":1557},[212,59719,59721],{"className":334,"code":59720,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,59722,59723,59731,59739],{"__ignoreMap":178},[220,59724,59725,59727,59729],{"class":222,"line":223},[220,59726,343],{"class":264},[220,59728,347],{"class":346},[220,59730,359],{"class":264},[220,59732,59733,59735,59737],{"class":222,"line":179},[220,59734,364],{"class":264},[220,59736,59698],{"class":346},[220,59738,386],{"class":264},[220,59740,59741,59743,59745],{"class":222,"line":389},[220,59742,402],{"class":264},[220,59744,347],{"class":346},[220,59746,359],{"class":264},[212,59748,59749],{"className":409,"code":59720,"language":411,"meta":178,"style":178},[99,59750,59751,59759,59767],{"__ignoreMap":178},[220,59752,59753,59755,59757],{"class":222,"line":223},[220,59754,343],{"class":264},[220,59756,347],{"class":420},[220,59758,359],{"class":264},[220,59760,59761,59763,59765],{"class":222,"line":179},[220,59762,364],{"class":264},[220,59764,59698],{"class":420},[220,59766,386],{"class":264},[220,59768,59769,59771,59773],{"class":222,"line":389},[220,59770,402],{"class":264},[220,59772,347],{"class":420},[220,59774,359],{"class":264},[212,59776,59777],{"className":2844,"code":59720,"language":2846,"meta":178,"style":178},[99,59778,59779,59787,59795],{"__ignoreMap":178},[220,59780,59781,59783,59785],{"class":222,"line":223},[220,59782,343],{"class":264},[220,59784,347],{"class":420},[220,59786,359],{"class":264},[220,59788,59789,59791,59793],{"class":222,"line":179},[220,59790,364],{"class":264},[220,59792,59698],{"class":420},[220,59794,386],{"class":264},[220,59796,59797,59799,59801],{"class":222,"line":389},[220,59798,402],{"class":264},[220,59800,347],{"class":420},[220,59802,359],{"class":264},[212,59804,59805],{"className":468,"code":59720,"language":469,"meta":178,"style":178},[99,59806,59807,59815,59823],{"__ignoreMap":178},[220,59808,59809,59811,59813],{"class":222,"line":223},[220,59810,343],{"class":264},[220,59812,347],{"class":420},[220,59814,359],{"class":264},[220,59816,59817,59819,59821],{"class":222,"line":179},[220,59818,364],{"class":264},[220,59820,59698],{"class":420},[220,59822,386],{"class":264},[220,59824,59825,59827,59829],{"class":222,"line":389},[220,59826,402],{"class":264},[220,59828,347],{"class":420},[220,59830,359],{"class":264},[212,59832,59834],{"className":251,"code":59833,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MultiPointGradient', props: {} }\n ]\n})\n",[99,59835,59836,59846,59850,59864,59868,59877,59881],{"__ignoreMap":178},[220,59837,59838,59840,59842,59844],{"class":222,"line":223},[220,59839,261],{"class":260},[220,59841,11512],{"class":264},[220,59843,268],{"class":260},[220,59845,4007],{"class":230},[220,59847,59848],{"class":222,"line":179},[220,59849,647],{"emptyLinePlaceholder":194},[220,59851,59852,59854,59856,59858,59860,59862],{"class":222,"line":389},[220,59853,1735],{"class":260},[220,59855,1738],{"class":420},[220,59857,1741],{"class":260},[220,59859,1744],{"class":260},[220,59861,1747],{"class":226},[220,59863,1750],{"class":264},[220,59865,59866],{"class":222,"line":399},[220,59867,1765],{"class":264},[220,59869,59870,59872,59875],{"class":222,"line":644},[220,59871,1770],{"class":264},[220,59873,59874],{"class":230},"'MultiPointGradient'",[220,59876,2465],{"class":264},[220,59878,59879],{"class":222,"line":650},[220,59880,1787],{"class":264},[220,59882,59883],{"class":222,"line":656},[220,59884,1792],{"class":264},[1504,59886,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":59888},[59889,59890],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":59698,"description":59706},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":59897,"title":20980,"body":59898,"category":36569,"componentType":25877,"description":59905,"extension":191,"meta":60185,"navigation":194,"path":60186,"requiresChild":32530,"seo":60187,"stem":60188,"__hash__":60189},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":59899,"toc":60181},[59900,59903,59906,59908,59910,59913,59915,60179],[11,59901,20980],{"id":59902},"neon",[15,59904,59905],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31911,59907],{"component":20980},[23,59909,31915],{"id":26533},[31917,59911],{":props":59912},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the neon shape in degrees\"},{\"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 \u002F 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 \u002F 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 \u002F 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\u002Foff\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,59914,31923],{"id":31922},[246,59916,59917,59967,60019,60067,60117],{":tabs":1557},[212,59918,59920],{"className":334,"code":59919,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,59921,59922,59930,59937,59946,59955,59959],{"__ignoreMap":178},[220,59923,59924,59926,59928],{"class":222,"line":223},[220,59925,343],{"class":264},[220,59927,347],{"class":346},[220,59929,359],{"class":264},[220,59931,59932,59934],{"class":222,"line":179},[220,59933,364],{"class":264},[220,59935,59936],{"class":346},"Neon\n",[220,59938,59939,59941,59943],{"class":222,"line":389},[220,59940,9635],{"class":226},[220,59942,353],{"class":264},[220,59944,59945],{"class":230},"\"#00ddff\"\n",[220,59947,59948,59950,59952],{"class":222,"line":399},[220,59949,20371],{"class":226},[220,59951,353],{"class":264},[220,59953,59954],{"class":230},"\"1.5\"\n",[220,59956,59957],{"class":222,"line":644},[220,59958,1234],{"class":264},[220,59960,59961,59963,59965],{"class":222,"line":650},[220,59962,402],{"class":264},[220,59964,347],{"class":346},[220,59966,359],{"class":264},[212,59968,59970],{"className":409,"code":59969,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,59971,59972,59980,59986,59994,60007,60011],{"__ignoreMap":178},[220,59973,59974,59976,59978],{"class":222,"line":223},[220,59975,343],{"class":264},[220,59977,347],{"class":420},[220,59979,359],{"class":264},[220,59981,59982,59984],{"class":222,"line":179},[220,59983,364],{"class":264},[220,59985,59936],{"class":420},[220,59987,59988,59990,59992],{"class":222,"line":389},[220,59989,9635],{"class":226},[220,59991,353],{"class":260},[220,59993,59945],{"class":230},[220,59995,59996,59998,60000,60002,60005],{"class":222,"line":399},[220,59997,20482],{"class":226},[220,59999,353],{"class":260},[220,60001,743],{"class":264},[220,60003,60004],{"class":420},"1.5",[220,60006,749],{"class":264},[220,60008,60009],{"class":222,"line":644},[220,60010,1234],{"class":264},[220,60012,60013,60015,60017],{"class":222,"line":650},[220,60014,402],{"class":264},[220,60016,347],{"class":420},[220,60018,359],{"class":264},[212,60020,60021],{"className":2844,"code":59969,"language":2846,"meta":178,"style":178},[99,60022,60023,60031,60037,60045,60055,60059],{"__ignoreMap":178},[220,60024,60025,60027,60029],{"class":222,"line":223},[220,60026,343],{"class":264},[220,60028,347],{"class":420},[220,60030,359],{"class":264},[220,60032,60033,60035],{"class":222,"line":179},[220,60034,364],{"class":264},[220,60036,59936],{"class":420},[220,60038,60039,60041,60043],{"class":222,"line":389},[220,60040,9635],{"class":226},[220,60042,353],{"class":264},[220,60044,59945],{"class":230},[220,60046,60047,60049,60051,60053],{"class":222,"line":399},[220,60048,20482],{"class":226},[220,60050,29871],{"class":264},[220,60052,60004],{"class":420},[220,60054,749],{"class":264},[220,60056,60057],{"class":222,"line":644},[220,60058,1234],{"class":264},[220,60060,60061,60063,60065],{"class":222,"line":650},[220,60062,402],{"class":264},[220,60064,347],{"class":420},[220,60066,359],{"class":264},[212,60068,60069],{"className":468,"code":59969,"language":469,"meta":178,"style":178},[99,60070,60071,60079,60085,60093,60105,60109],{"__ignoreMap":178},[220,60072,60073,60075,60077],{"class":222,"line":223},[220,60074,343],{"class":264},[220,60076,347],{"class":420},[220,60078,359],{"class":264},[220,60080,60081,60083],{"class":222,"line":179},[220,60082,364],{"class":264},[220,60084,59936],{"class":420},[220,60086,60087,60089,60091],{"class":222,"line":389},[220,60088,9635],{"class":226},[220,60090,353],{"class":260},[220,60092,59945],{"class":230},[220,60094,60095,60097,60099,60101,60103],{"class":222,"line":399},[220,60096,20482],{"class":226},[220,60098,353],{"class":260},[220,60100,743],{"class":264},[220,60102,60004],{"class":420},[220,60104,749],{"class":264},[220,60106,60107],{"class":222,"line":644},[220,60108,1234],{"class":264},[220,60110,60111,60113,60115],{"class":222,"line":650},[220,60112,402],{"class":264},[220,60114,347],{"class":420},[220,60116,359],{"class":264},[212,60118,60120],{"className":251,"code":60119,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Neon', props: { color: '#00ddff', intensity: 1.5 } }\n ]\n})\n",[99,60121,60122,60132,60136,60150,60154,60171,60175],{"__ignoreMap":178},[220,60123,60124,60126,60128,60130],{"class":222,"line":223},[220,60125,261],{"class":260},[220,60127,11512],{"class":264},[220,60129,268],{"class":260},[220,60131,4007],{"class":230},[220,60133,60134],{"class":222,"line":179},[220,60135,647],{"emptyLinePlaceholder":194},[220,60137,60138,60140,60142,60144,60146,60148],{"class":222,"line":389},[220,60139,1735],{"class":260},[220,60141,1738],{"class":420},[220,60143,1741],{"class":260},[220,60145,1744],{"class":260},[220,60147,1747],{"class":226},[220,60149,1750],{"class":264},[220,60151,60152],{"class":222,"line":399},[220,60153,1765],{"class":264},[220,60155,60156,60158,60160,60162,60165,60167,60169],{"class":222,"line":644},[220,60157,1770],{"class":264},[220,60159,21587],{"class":230},[220,60161,1776],{"class":264},[220,60163,60164],{"class":230},"'#00ddff'",[220,60166,45003],{"class":264},[220,60168,60004],{"class":420},[220,60170,1782],{"class":264},[220,60172,60173],{"class":222,"line":650},[220,60174,1787],{"class":264},[220,60176,60177],{"class":222,"line":656},[220,60178,1792],{"class":264},[1504,60180,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60182},[60183,60184],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20980,"description":59905},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":60191,"title":60192,"body":60193,"category":33673,"componentType":25883,"description":60200,"extension":191,"meta":60461,"navigation":194,"path":60462,"requiresChild":194,"seo":60463,"stem":60464,"__hash__":60465},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":60194,"toc":60457},[60195,60198,60201,60203,60205,60208,60210,60455],[11,60196,60192],{"id":60197},"noisedissolve",[15,60199,60200],{},"Dissolve the content away through an organic noise pattern",[31911,60202],{"component":60192},[23,60204,31915],{"id":26533},[31917,60206],{":props":60207},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Frequency of the dissolve pattern (higher = smaller blobs)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"How softly the erosion edge fades out (0 = hard-edged blobs)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the pattern dissolves in\"}]",[23,60209,31923],{"id":31922},[246,60211,60212,60257,60301,60345,60389],{":tabs":1557},[212,60213,60215],{"className":334,"code":60214,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,60216,60217,60225,60233,60241,60249],{"__ignoreMap":178},[220,60218,60219,60221,60223],{"class":222,"line":223},[220,60220,343],{"class":264},[220,60222,347],{"class":346},[220,60224,359],{"class":264},[220,60226,60227,60229,60231],{"class":222,"line":179},[220,60228,364],{"class":264},[220,60230,60192],{"class":346},[220,60232,359],{"class":264},[220,60234,60235,60237,60239],{"class":222,"line":389},[220,60236,2550],{"class":264},[220,60238,2553],{"class":346},[220,60240,386],{"class":264},[220,60242,60243,60245,60247],{"class":222,"line":399},[220,60244,2567],{"class":264},[220,60246,60192],{"class":346},[220,60248,359],{"class":264},[220,60250,60251,60253,60255],{"class":222,"line":644},[220,60252,402],{"class":264},[220,60254,347],{"class":346},[220,60256,359],{"class":264},[212,60258,60259],{"className":409,"code":60214,"language":411,"meta":178,"style":178},[99,60260,60261,60269,60277,60285,60293],{"__ignoreMap":178},[220,60262,60263,60265,60267],{"class":222,"line":223},[220,60264,343],{"class":264},[220,60266,347],{"class":420},[220,60268,359],{"class":264},[220,60270,60271,60273,60275],{"class":222,"line":179},[220,60272,364],{"class":264},[220,60274,60192],{"class":420},[220,60276,359],{"class":264},[220,60278,60279,60281,60283],{"class":222,"line":389},[220,60280,2550],{"class":264},[220,60282,2553],{"class":420},[220,60284,386],{"class":264},[220,60286,60287,60289,60291],{"class":222,"line":399},[220,60288,2567],{"class":264},[220,60290,60192],{"class":420},[220,60292,359],{"class":264},[220,60294,60295,60297,60299],{"class":222,"line":644},[220,60296,402],{"class":264},[220,60298,347],{"class":420},[220,60300,359],{"class":264},[212,60302,60303],{"className":2844,"code":60214,"language":2846,"meta":178,"style":178},[99,60304,60305,60313,60321,60329,60337],{"__ignoreMap":178},[220,60306,60307,60309,60311],{"class":222,"line":223},[220,60308,343],{"class":264},[220,60310,347],{"class":420},[220,60312,359],{"class":264},[220,60314,60315,60317,60319],{"class":222,"line":179},[220,60316,364],{"class":264},[220,60318,60192],{"class":420},[220,60320,359],{"class":264},[220,60322,60323,60325,60327],{"class":222,"line":389},[220,60324,2550],{"class":264},[220,60326,2553],{"class":420},[220,60328,386],{"class":264},[220,60330,60331,60333,60335],{"class":222,"line":399},[220,60332,2567],{"class":264},[220,60334,60192],{"class":420},[220,60336,359],{"class":264},[220,60338,60339,60341,60343],{"class":222,"line":644},[220,60340,402],{"class":264},[220,60342,347],{"class":420},[220,60344,359],{"class":264},[212,60346,60347],{"className":468,"code":60214,"language":469,"meta":178,"style":178},[99,60348,60349,60357,60365,60373,60381],{"__ignoreMap":178},[220,60350,60351,60353,60355],{"class":222,"line":223},[220,60352,343],{"class":264},[220,60354,347],{"class":420},[220,60356,359],{"class":264},[220,60358,60359,60361,60363],{"class":222,"line":179},[220,60360,364],{"class":264},[220,60362,60192],{"class":420},[220,60364,359],{"class":264},[220,60366,60367,60369,60371],{"class":222,"line":389},[220,60368,2550],{"class":264},[220,60370,2553],{"class":420},[220,60372,386],{"class":264},[220,60374,60375,60377,60379],{"class":222,"line":399},[220,60376,2567],{"class":264},[220,60378,60192],{"class":420},[220,60380,359],{"class":264},[220,60382,60383,60385,60387],{"class":222,"line":644},[220,60384,402],{"class":264},[220,60386,347],{"class":420},[220,60388,359],{"class":264},[212,60390,60392],{"className":251,"code":60391,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'NoiseDissolve', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,60393,60394,60404,60408,60422,60426,60435,60443,60447,60451],{"__ignoreMap":178},[220,60395,60396,60398,60400,60402],{"class":222,"line":223},[220,60397,261],{"class":260},[220,60399,11512],{"class":264},[220,60401,268],{"class":260},[220,60403,4007],{"class":230},[220,60405,60406],{"class":222,"line":179},[220,60407,647],{"emptyLinePlaceholder":194},[220,60409,60410,60412,60414,60416,60418,60420],{"class":222,"line":389},[220,60411,1735],{"class":260},[220,60413,1738],{"class":420},[220,60415,1741],{"class":260},[220,60417,1744],{"class":260},[220,60419,1747],{"class":226},[220,60421,1750],{"class":264},[220,60423,60424],{"class":222,"line":399},[220,60425,1765],{"class":264},[220,60427,60428,60430,60433],{"class":222,"line":644},[220,60429,1770],{"class":264},[220,60431,60432],{"class":230},"'NoiseDissolve'",[220,60434,7009],{"class":264},[220,60436,60437,60439,60441],{"class":222,"line":650},[220,60438,7014],{"class":264},[220,60440,3206],{"class":230},[220,60442,2465],{"class":264},[220,60444,60445],{"class":222,"line":656},[220,60446,7031],{"class":264},[220,60448,60449],{"class":222,"line":673},[220,60450,1787],{"class":264},[220,60452,60453],{"class":222,"line":682},[220,60454,1792],{"class":264},[1504,60456,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60458},[60459,60460],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":60192,"description":60200},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":60467,"title":60468,"body":60469,"category":32806,"componentType":25883,"description":60476,"extension":191,"meta":60737,"navigation":194,"path":60738,"requiresChild":194,"seo":60739,"stem":60740,"__hash__":60741},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":60470,"toc":60733},[60471,60474,60477,60479,60481,60484,60486,60731],[11,60472,60468],{"id":60473},"objecttracker",[15,60475,60476],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[31911,60478],{"component":60468},[23,60480,31915],{"id":26533},[31917,60482],{":props":60483},"[{\"name\":\"detectionMode\",\"type\":\"\\\"alpha\\\" | \\\"bright\\\" | \\\"dark\\\" | \\\"red\\\" | \\\"green\\\" | \\\"blue\\\"\",\"default\":\"bright\",\"description\":\"What counts as a detectable object.\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Detection cut-off.\"},{\"name\":\"layout\",\"type\":\"\\\"grid\\\" | \\\"quadtree\\\" | \\\"mosaic\\\"\",\"default\":\"mosaic\",\"description\":\"How the canvas is partitioned into detection cells.\"},{\"name\":\"cellSize\",\"type\":\"number\",\"default\":\"400\",\"description\":\"Base cell size in pixels\"},{\"name\":\"maxDepth\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Maximum subdivision levels for Quadtree\u002FMosaic layouts (each level can quarter a cell).\"},{\"name\":\"boxStyle\",\"type\":\"\\\"full\\\" | \\\"corners\\\"\",\"default\":\"corners\",\"description\":\"Bounding box outline style\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Thickness of the box outline in pixels.\"},{\"name\":\"cornerRadius\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Corner radius of the box outline in pixels\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Bounding box outline colour.\"},{\"name\":\"fillColor\",\"type\":\"string\",\"default\":\"#5a79911a\",\"description\":\"Bounding box fill color.\"},{\"name\":\"labelColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Label text color.\"},{\"name\":\"labelBackgroundColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Label pill background color.\"},{\"name\":\"labelMode\",\"type\":\"\\\"none\\\" | \\\"dimensions\\\" | \\\"percentage\\\"\",\"default\":\"none\",\"description\":\"What each label shows.\"},{\"name\":\"labelPosition\",\"type\":\"\\\"bottom-left\\\" | \\\"bottom-right\\\" | \\\"top-left\\\" | \\\"top-right\\\"\",\"default\":\"bottom-right\",\"description\":\"Which corner of the box the label anchors to.\"},{\"name\":\"labelRadius\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Corner radius of the label pill in pixels.\"},{\"name\":\"labelInset\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Place the label inside or outside the box.\"},{\"name\":\"fontFamily\",\"type\":\"string\",\"default\":\"Inter\",\"description\":\"Google Fonts family used for label text.\"},{\"name\":\"fontWeight\",\"type\":\"number\",\"default\":\"500\",\"description\":\"Font weight for label text.\"},{\"name\":\"fontSize\",\"type\":\"number\",\"default\":\"0.015\",\"description\":\"Label text size as a fraction of canvas height.\"},{\"name\":\"letterSpacing\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Letter spacing for label text, in em units.\"}]",[23,60485,31923],{"id":31922},[246,60487,60488,60533,60577,60621,60665],{":tabs":1557},[212,60489,60491],{"className":334,"code":60490,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,60492,60493,60501,60509,60517,60525],{"__ignoreMap":178},[220,60494,60495,60497,60499],{"class":222,"line":223},[220,60496,343],{"class":264},[220,60498,347],{"class":346},[220,60500,359],{"class":264},[220,60502,60503,60505,60507],{"class":222,"line":179},[220,60504,364],{"class":264},[220,60506,60468],{"class":346},[220,60508,359],{"class":264},[220,60510,60511,60513,60515],{"class":222,"line":389},[220,60512,2550],{"class":264},[220,60514,2553],{"class":346},[220,60516,386],{"class":264},[220,60518,60519,60521,60523],{"class":222,"line":399},[220,60520,2567],{"class":264},[220,60522,60468],{"class":346},[220,60524,359],{"class":264},[220,60526,60527,60529,60531],{"class":222,"line":644},[220,60528,402],{"class":264},[220,60530,347],{"class":346},[220,60532,359],{"class":264},[212,60534,60535],{"className":409,"code":60490,"language":411,"meta":178,"style":178},[99,60536,60537,60545,60553,60561,60569],{"__ignoreMap":178},[220,60538,60539,60541,60543],{"class":222,"line":223},[220,60540,343],{"class":264},[220,60542,347],{"class":420},[220,60544,359],{"class":264},[220,60546,60547,60549,60551],{"class":222,"line":179},[220,60548,364],{"class":264},[220,60550,60468],{"class":420},[220,60552,359],{"class":264},[220,60554,60555,60557,60559],{"class":222,"line":389},[220,60556,2550],{"class":264},[220,60558,2553],{"class":420},[220,60560,386],{"class":264},[220,60562,60563,60565,60567],{"class":222,"line":399},[220,60564,2567],{"class":264},[220,60566,60468],{"class":420},[220,60568,359],{"class":264},[220,60570,60571,60573,60575],{"class":222,"line":644},[220,60572,402],{"class":264},[220,60574,347],{"class":420},[220,60576,359],{"class":264},[212,60578,60579],{"className":2844,"code":60490,"language":2846,"meta":178,"style":178},[99,60580,60581,60589,60597,60605,60613],{"__ignoreMap":178},[220,60582,60583,60585,60587],{"class":222,"line":223},[220,60584,343],{"class":264},[220,60586,347],{"class":420},[220,60588,359],{"class":264},[220,60590,60591,60593,60595],{"class":222,"line":179},[220,60592,364],{"class":264},[220,60594,60468],{"class":420},[220,60596,359],{"class":264},[220,60598,60599,60601,60603],{"class":222,"line":389},[220,60600,2550],{"class":264},[220,60602,2553],{"class":420},[220,60604,386],{"class":264},[220,60606,60607,60609,60611],{"class":222,"line":399},[220,60608,2567],{"class":264},[220,60610,60468],{"class":420},[220,60612,359],{"class":264},[220,60614,60615,60617,60619],{"class":222,"line":644},[220,60616,402],{"class":264},[220,60618,347],{"class":420},[220,60620,359],{"class":264},[212,60622,60623],{"className":468,"code":60490,"language":469,"meta":178,"style":178},[99,60624,60625,60633,60641,60649,60657],{"__ignoreMap":178},[220,60626,60627,60629,60631],{"class":222,"line":223},[220,60628,343],{"class":264},[220,60630,347],{"class":420},[220,60632,359],{"class":264},[220,60634,60635,60637,60639],{"class":222,"line":179},[220,60636,364],{"class":264},[220,60638,60468],{"class":420},[220,60640,359],{"class":264},[220,60642,60643,60645,60647],{"class":222,"line":389},[220,60644,2550],{"class":264},[220,60646,2553],{"class":420},[220,60648,386],{"class":264},[220,60650,60651,60653,60655],{"class":222,"line":399},[220,60652,2567],{"class":264},[220,60654,60468],{"class":420},[220,60656,359],{"class":264},[220,60658,60659,60661,60663],{"class":222,"line":644},[220,60660,402],{"class":264},[220,60662,347],{"class":420},[220,60664,359],{"class":264},[212,60666,60668],{"className":251,"code":60667,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ObjectTracker', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,60669,60670,60680,60684,60698,60702,60711,60719,60723,60727],{"__ignoreMap":178},[220,60671,60672,60674,60676,60678],{"class":222,"line":223},[220,60673,261],{"class":260},[220,60675,11512],{"class":264},[220,60677,268],{"class":260},[220,60679,4007],{"class":230},[220,60681,60682],{"class":222,"line":179},[220,60683,647],{"emptyLinePlaceholder":194},[220,60685,60686,60688,60690,60692,60694,60696],{"class":222,"line":389},[220,60687,1735],{"class":260},[220,60689,1738],{"class":420},[220,60691,1741],{"class":260},[220,60693,1744],{"class":260},[220,60695,1747],{"class":226},[220,60697,1750],{"class":264},[220,60699,60700],{"class":222,"line":399},[220,60701,1765],{"class":264},[220,60703,60704,60706,60709],{"class":222,"line":644},[220,60705,1770],{"class":264},[220,60707,60708],{"class":230},"'ObjectTracker'",[220,60710,7009],{"class":264},[220,60712,60713,60715,60717],{"class":222,"line":650},[220,60714,7014],{"class":264},[220,60716,3206],{"class":230},[220,60718,2465],{"class":264},[220,60720,60721],{"class":222,"line":656},[220,60722,7031],{"class":264},[220,60724,60725],{"class":222,"line":673},[220,60726,1787],{"class":264},[220,60728,60729],{"class":222,"line":682},[220,60730,1792],{"class":264},[1504,60732,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":60734},[60735,60736],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":60468,"description":60476},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":60743,"title":60744,"body":60745,"category":33673,"componentType":25883,"description":60752,"extension":191,"meta":61070,"navigation":194,"path":61071,"requiresChild":194,"seo":61072,"stem":61073,"__hash__":61074},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":60746,"toc":61066},[60747,60750,60753,60755,60757,60760,60762,61064],[11,60748,60744],{"id":60749},"pagepeel",[15,60751,60752],{},"Curl the content up from a corner like a peeling page",[31911,60754],{"component":60744},[23,60756,31915],{"id":26533},[31917,60758],{":props":60759},"[{\"name\":\"corner\",\"type\":\"\\\"top-left\\\" | \\\"top-right\\\" | \\\"bottom-left\\\" | \\\"bottom-right\\\"\",\"default\":\"bottom-right\",\"description\":\"Which corner the page peels from\"},{\"name\":\"amount\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How far the peel has progressed across the page (0 = flat, 1 = fully peeled)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Tightness of the curl (fraction of the page diagonal)\"},{\"name\":\"shading\",\"type\":\"number\",\"default\":\"0.55\",\"description\":\"How much the underside of the curl is shaded for depth\"},{\"name\":\"highlight\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Strength of the specular sheen running along the curl\"},{\"name\":\"highlightSoftness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Width of the specular highlight band (low = tight gloss, high = broad satin)\"},{\"name\":\"shadow\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the contact shadow the curl casts on the page\"}]",[23,60761,31923],{"id":31922},[246,60763,60764,60821,60880,60936,60994],{":tabs":1557},[212,60765,60767],{"className":334,"code":60766,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPagePeel\n :radius=\"0.2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPagePeel>\n\u003C\u002FShader>\n",[99,60768,60769,60777,60784,60793,60797,60805,60813],{"__ignoreMap":178},[220,60770,60771,60773,60775],{"class":222,"line":223},[220,60772,343],{"class":264},[220,60774,347],{"class":346},[220,60776,359],{"class":264},[220,60778,60779,60781],{"class":222,"line":179},[220,60780,364],{"class":264},[220,60782,60783],{"class":346},"PagePeel\n",[220,60785,60786,60788,60790],{"class":222,"line":389},[220,60787,17405],{"class":226},[220,60789,353],{"class":264},[220,60791,60792],{"class":230},"\"0.2\"\n",[220,60794,60795],{"class":222,"line":399},[220,60796,31959],{"class":264},[220,60798,60799,60801,60803],{"class":222,"line":644},[220,60800,2550],{"class":264},[220,60802,2553],{"class":346},[220,60804,386],{"class":264},[220,60806,60807,60809,60811],{"class":222,"line":650},[220,60808,2567],{"class":264},[220,60810,60744],{"class":346},[220,60812,359],{"class":264},[220,60814,60815,60817,60819],{"class":222,"line":656},[220,60816,402],{"class":264},[220,60818,347],{"class":346},[220,60820,359],{"class":264},[212,60822,60824],{"className":409,"code":60823,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPagePeel\n radius={0.2}\n >\n \u003CCircle \u002F>\n \u003C\u002FPagePeel>\n\u003C\u002FShader>\n",[99,60825,60826,60834,60840,60852,60856,60864,60872],{"__ignoreMap":178},[220,60827,60828,60830,60832],{"class":222,"line":223},[220,60829,343],{"class":264},[220,60831,347],{"class":420},[220,60833,359],{"class":264},[220,60835,60836,60838],{"class":222,"line":179},[220,60837,364],{"class":264},[220,60839,60783],{"class":420},[220,60841,60842,60844,60846,60848,60850],{"class":222,"line":389},[220,60843,9645],{"class":226},[220,60845,353],{"class":260},[220,60847,743],{"class":264},[220,60849,16976],{"class":420},[220,60851,749],{"class":264},[220,60853,60854],{"class":222,"line":399},[220,60855,31959],{"class":264},[220,60857,60858,60860,60862],{"class":222,"line":644},[220,60859,2550],{"class":264},[220,60861,2553],{"class":420},[220,60863,386],{"class":264},[220,60865,60866,60868,60870],{"class":222,"line":650},[220,60867,2567],{"class":264},[220,60869,60744],{"class":420},[220,60871,359],{"class":264},[220,60873,60874,60876,60878],{"class":222,"line":656},[220,60875,402],{"class":264},[220,60877,347],{"class":420},[220,60879,359],{"class":264},[212,60881,60882],{"className":2844,"code":60823,"language":2846,"meta":178,"style":178},[99,60883,60884,60892,60898,60908,60912,60920,60928],{"__ignoreMap":178},[220,60885,60886,60888,60890],{"class":222,"line":223},[220,60887,343],{"class":264},[220,60889,347],{"class":420},[220,60891,359],{"class":264},[220,60893,60894,60896],{"class":222,"line":179},[220,60895,364],{"class":264},[220,60897,60783],{"class":420},[220,60899,60900,60902,60904,60906],{"class":222,"line":389},[220,60901,9645],{"class":226},[220,60903,29871],{"class":264},[220,60905,16976],{"class":420},[220,60907,749],{"class":264},[220,60909,60910],{"class":222,"line":399},[220,60911,31959],{"class":264},[220,60913,60914,60916,60918],{"class":222,"line":644},[220,60915,2550],{"class":264},[220,60917,2553],{"class":420},[220,60919,386],{"class":264},[220,60921,60922,60924,60926],{"class":222,"line":650},[220,60923,2567],{"class":264},[220,60925,60744],{"class":420},[220,60927,359],{"class":264},[220,60929,60930,60932,60934],{"class":222,"line":656},[220,60931,402],{"class":264},[220,60933,347],{"class":420},[220,60935,359],{"class":264},[212,60937,60938],{"className":468,"code":60823,"language":469,"meta":178,"style":178},[99,60939,60940,60948,60954,60966,60970,60978,60986],{"__ignoreMap":178},[220,60941,60942,60944,60946],{"class":222,"line":223},[220,60943,343],{"class":264},[220,60945,347],{"class":420},[220,60947,359],{"class":264},[220,60949,60950,60952],{"class":222,"line":179},[220,60951,364],{"class":264},[220,60953,60783],{"class":420},[220,60955,60956,60958,60960,60962,60964],{"class":222,"line":389},[220,60957,9645],{"class":226},[220,60959,353],{"class":260},[220,60961,743],{"class":264},[220,60963,16976],{"class":420},[220,60965,749],{"class":264},[220,60967,60968],{"class":222,"line":399},[220,60969,31959],{"class":264},[220,60971,60972,60974,60976],{"class":222,"line":644},[220,60973,2550],{"class":264},[220,60975,2553],{"class":420},[220,60977,386],{"class":264},[220,60979,60980,60982,60984],{"class":222,"line":650},[220,60981,2567],{"class":264},[220,60983,60744],{"class":420},[220,60985,359],{"class":264},[220,60987,60988,60990,60992],{"class":222,"line":656},[220,60989,402],{"class":264},[220,60991,347],{"class":420},[220,60993,359],{"class":264},[212,60995,60997],{"className":251,"code":60996,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'PagePeel', props: { radius: 0.2 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,60998,60999,61009,61013,61027,61031,61044,61052,61056,61060],{"__ignoreMap":178},[220,61000,61001,61003,61005,61007],{"class":222,"line":223},[220,61002,261],{"class":260},[220,61004,11512],{"class":264},[220,61006,268],{"class":260},[220,61008,4007],{"class":230},[220,61010,61011],{"class":222,"line":179},[220,61012,647],{"emptyLinePlaceholder":194},[220,61014,61015,61017,61019,61021,61023,61025],{"class":222,"line":389},[220,61016,1735],{"class":260},[220,61018,1738],{"class":420},[220,61020,1741],{"class":260},[220,61022,1744],{"class":260},[220,61024,1747],{"class":226},[220,61026,1750],{"class":264},[220,61028,61029],{"class":222,"line":399},[220,61030,1765],{"class":264},[220,61032,61033,61035,61038,61040,61042],{"class":222,"line":644},[220,61034,1770],{"class":264},[220,61036,61037],{"class":230},"'PagePeel'",[220,61039,7541],{"class":264},[220,61041,16976],{"class":420},[220,61043,7546],{"class":264},[220,61045,61046,61048,61050],{"class":222,"line":650},[220,61047,7014],{"class":264},[220,61049,3206],{"class":230},[220,61051,2465],{"class":264},[220,61053,61054],{"class":222,"line":656},[220,61055,7031],{"class":264},[220,61057,61058],{"class":222,"line":673},[220,61059,1787],{"class":264},[220,61061,61062],{"class":222,"line":682},[220,61063,1792],{"class":264},[1504,61065,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61067},[61068,61069],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":60744,"description":60752},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":61076,"title":61077,"body":61078,"category":32806,"componentType":25883,"description":61085,"extension":191,"meta":61346,"navigation":194,"path":61347,"requiresChild":194,"seo":61348,"stem":61349,"__hash__":61350},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":61079,"toc":61342},[61080,61083,61086,61088,61090,61093,61095,61340],[11,61081,61077],{"id":61082},"paper",[15,61084,61085],{},"Applies realistic paper grain and surface roughness to child content",[31911,61087],{"component":61077},[23,61089,31915],{"id":26533},[31917,61091],{":props":61092},"[{\"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,61094,31923],{"id":31922},[246,61096,61097,61142,61186,61230,61274],{":tabs":1557},[212,61098,61100],{"className":334,"code":61099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,61101,61102,61110,61118,61126,61134],{"__ignoreMap":178},[220,61103,61104,61106,61108],{"class":222,"line":223},[220,61105,343],{"class":264},[220,61107,347],{"class":346},[220,61109,359],{"class":264},[220,61111,61112,61114,61116],{"class":222,"line":179},[220,61113,364],{"class":264},[220,61115,61077],{"class":346},[220,61117,359],{"class":264},[220,61119,61120,61122,61124],{"class":222,"line":389},[220,61121,2550],{"class":264},[220,61123,2553],{"class":346},[220,61125,386],{"class":264},[220,61127,61128,61130,61132],{"class":222,"line":399},[220,61129,2567],{"class":264},[220,61131,61077],{"class":346},[220,61133,359],{"class":264},[220,61135,61136,61138,61140],{"class":222,"line":644},[220,61137,402],{"class":264},[220,61139,347],{"class":346},[220,61141,359],{"class":264},[212,61143,61144],{"className":409,"code":61099,"language":411,"meta":178,"style":178},[99,61145,61146,61154,61162,61170,61178],{"__ignoreMap":178},[220,61147,61148,61150,61152],{"class":222,"line":223},[220,61149,343],{"class":264},[220,61151,347],{"class":420},[220,61153,359],{"class":264},[220,61155,61156,61158,61160],{"class":222,"line":179},[220,61157,364],{"class":264},[220,61159,61077],{"class":420},[220,61161,359],{"class":264},[220,61163,61164,61166,61168],{"class":222,"line":389},[220,61165,2550],{"class":264},[220,61167,2553],{"class":420},[220,61169,386],{"class":264},[220,61171,61172,61174,61176],{"class":222,"line":399},[220,61173,2567],{"class":264},[220,61175,61077],{"class":420},[220,61177,359],{"class":264},[220,61179,61180,61182,61184],{"class":222,"line":644},[220,61181,402],{"class":264},[220,61183,347],{"class":420},[220,61185,359],{"class":264},[212,61187,61188],{"className":2844,"code":61099,"language":2846,"meta":178,"style":178},[99,61189,61190,61198,61206,61214,61222],{"__ignoreMap":178},[220,61191,61192,61194,61196],{"class":222,"line":223},[220,61193,343],{"class":264},[220,61195,347],{"class":420},[220,61197,359],{"class":264},[220,61199,61200,61202,61204],{"class":222,"line":179},[220,61201,364],{"class":264},[220,61203,61077],{"class":420},[220,61205,359],{"class":264},[220,61207,61208,61210,61212],{"class":222,"line":389},[220,61209,2550],{"class":264},[220,61211,2553],{"class":420},[220,61213,386],{"class":264},[220,61215,61216,61218,61220],{"class":222,"line":399},[220,61217,2567],{"class":264},[220,61219,61077],{"class":420},[220,61221,359],{"class":264},[220,61223,61224,61226,61228],{"class":222,"line":644},[220,61225,402],{"class":264},[220,61227,347],{"class":420},[220,61229,359],{"class":264},[212,61231,61232],{"className":468,"code":61099,"language":469,"meta":178,"style":178},[99,61233,61234,61242,61250,61258,61266],{"__ignoreMap":178},[220,61235,61236,61238,61240],{"class":222,"line":223},[220,61237,343],{"class":264},[220,61239,347],{"class":420},[220,61241,359],{"class":264},[220,61243,61244,61246,61248],{"class":222,"line":179},[220,61245,364],{"class":264},[220,61247,61077],{"class":420},[220,61249,359],{"class":264},[220,61251,61252,61254,61256],{"class":222,"line":389},[220,61253,2550],{"class":264},[220,61255,2553],{"class":420},[220,61257,386],{"class":264},[220,61259,61260,61262,61264],{"class":222,"line":399},[220,61261,2567],{"class":264},[220,61263,61077],{"class":420},[220,61265,359],{"class":264},[220,61267,61268,61270,61272],{"class":222,"line":644},[220,61269,402],{"class":264},[220,61271,347],{"class":420},[220,61273,359],{"class":264},[212,61275,61277],{"className":251,"code":61276,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Paper', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,61278,61279,61289,61293,61307,61311,61320,61328,61332,61336],{"__ignoreMap":178},[220,61280,61281,61283,61285,61287],{"class":222,"line":223},[220,61282,261],{"class":260},[220,61284,11512],{"class":264},[220,61286,268],{"class":260},[220,61288,4007],{"class":230},[220,61290,61291],{"class":222,"line":179},[220,61292,647],{"emptyLinePlaceholder":194},[220,61294,61295,61297,61299,61301,61303,61305],{"class":222,"line":389},[220,61296,1735],{"class":260},[220,61298,1738],{"class":420},[220,61300,1741],{"class":260},[220,61302,1744],{"class":260},[220,61304,1747],{"class":226},[220,61306,1750],{"class":264},[220,61308,61309],{"class":222,"line":399},[220,61310,1765],{"class":264},[220,61312,61313,61315,61318],{"class":222,"line":644},[220,61314,1770],{"class":264},[220,61316,61317],{"class":230},"'Paper'",[220,61319,7009],{"class":264},[220,61321,61322,61324,61326],{"class":222,"line":650},[220,61323,7014],{"class":264},[220,61325,3206],{"class":230},[220,61327,2465],{"class":264},[220,61329,61330],{"class":222,"line":656},[220,61331,7031],{"class":264},[220,61333,61334],{"class":222,"line":673},[220,61335,1787],{"class":264},[220,61337,61338],{"class":222,"line":682},[220,61339,1792],{"class":264},[1504,61341,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61343},[61344,61345],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":61077,"description":61085},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":61352,"title":61353,"body":61354,"category":15908,"componentType":25877,"description":61361,"extension":191,"meta":61591,"navigation":194,"path":61592,"requiresChild":32530,"seo":61593,"stem":61594,"__hash__":61595},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":61355,"toc":61587},[61356,61359,61362,61364,61366,61369,61371,61585],[11,61357,61353],{"id":61358},"parallelogram",[15,61360,61361],{},"Parallelogram with adjustable width, height and skew",[31911,61363],{"component":61353},[23,61365,31915],{"id":26533},[31917,61367],{":props":61368},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the parallelogram\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the parallelogram\"},{\"name\":\"width\",\"type\":\"number\",\"default\":\"0.32\",\"description\":\"Half-width of the parallelogram\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"0.22\",\"description\":\"Half-height of the parallelogram\"},{\"name\":\"skew\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Horizontal skew of the top edge\"},{\"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,61370,31923],{"id":31922},[246,61372,61373,61413,61451,61489,61527],{":tabs":1557},[212,61374,61376],{"className":334,"code":61375,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,61377,61378,61386,61393,61401,61405],{"__ignoreMap":178},[220,61379,61380,61382,61384],{"class":222,"line":223},[220,61381,343],{"class":264},[220,61383,347],{"class":346},[220,61385,359],{"class":264},[220,61387,61388,61390],{"class":222,"line":179},[220,61389,364],{"class":264},[220,61391,61392],{"class":346},"Parallelogram\n",[220,61394,61395,61397,61399],{"class":222,"line":389},[220,61396,9635],{"class":226},[220,61398,353],{"class":264},[220,61400,9591],{"class":230},[220,61402,61403],{"class":222,"line":399},[220,61404,1234],{"class":264},[220,61406,61407,61409,61411],{"class":222,"line":644},[220,61408,402],{"class":264},[220,61410,347],{"class":346},[220,61412,359],{"class":264},[212,61414,61415],{"className":409,"code":61375,"language":411,"meta":178,"style":178},[99,61416,61417,61425,61431,61439,61443],{"__ignoreMap":178},[220,61418,61419,61421,61423],{"class":222,"line":223},[220,61420,343],{"class":264},[220,61422,347],{"class":420},[220,61424,359],{"class":264},[220,61426,61427,61429],{"class":222,"line":179},[220,61428,364],{"class":264},[220,61430,61392],{"class":420},[220,61432,61433,61435,61437],{"class":222,"line":389},[220,61434,9635],{"class":226},[220,61436,353],{"class":260},[220,61438,9591],{"class":230},[220,61440,61441],{"class":222,"line":399},[220,61442,1234],{"class":264},[220,61444,61445,61447,61449],{"class":222,"line":644},[220,61446,402],{"class":264},[220,61448,347],{"class":420},[220,61450,359],{"class":264},[212,61452,61453],{"className":2844,"code":61375,"language":2846,"meta":178,"style":178},[99,61454,61455,61463,61469,61477,61481],{"__ignoreMap":178},[220,61456,61457,61459,61461],{"class":222,"line":223},[220,61458,343],{"class":264},[220,61460,347],{"class":420},[220,61462,359],{"class":264},[220,61464,61465,61467],{"class":222,"line":179},[220,61466,364],{"class":264},[220,61468,61392],{"class":420},[220,61470,61471,61473,61475],{"class":222,"line":389},[220,61472,9635],{"class":226},[220,61474,353],{"class":264},[220,61476,9591],{"class":230},[220,61478,61479],{"class":222,"line":399},[220,61480,1234],{"class":264},[220,61482,61483,61485,61487],{"class":222,"line":644},[220,61484,402],{"class":264},[220,61486,347],{"class":420},[220,61488,359],{"class":264},[212,61490,61491],{"className":468,"code":61375,"language":469,"meta":178,"style":178},[99,61492,61493,61501,61507,61515,61519],{"__ignoreMap":178},[220,61494,61495,61497,61499],{"class":222,"line":223},[220,61496,343],{"class":264},[220,61498,347],{"class":420},[220,61500,359],{"class":264},[220,61502,61503,61505],{"class":222,"line":179},[220,61504,364],{"class":264},[220,61506,61392],{"class":420},[220,61508,61509,61511,61513],{"class":222,"line":389},[220,61510,9635],{"class":226},[220,61512,353],{"class":260},[220,61514,9591],{"class":230},[220,61516,61517],{"class":222,"line":399},[220,61518,1234],{"class":264},[220,61520,61521,61523,61525],{"class":222,"line":644},[220,61522,402],{"class":264},[220,61524,347],{"class":420},[220,61526,359],{"class":264},[212,61528,61530],{"className":251,"code":61529,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Parallelogram', props: { color: '#ffffff' } }\n ]\n})\n",[99,61531,61532,61542,61546,61560,61564,61577,61581],{"__ignoreMap":178},[220,61533,61534,61536,61538,61540],{"class":222,"line":223},[220,61535,261],{"class":260},[220,61537,11512],{"class":264},[220,61539,268],{"class":260},[220,61541,4007],{"class":230},[220,61543,61544],{"class":222,"line":179},[220,61545,647],{"emptyLinePlaceholder":194},[220,61547,61548,61550,61552,61554,61556,61558],{"class":222,"line":389},[220,61549,1735],{"class":260},[220,61551,1738],{"class":420},[220,61553,1741],{"class":260},[220,61555,1744],{"class":260},[220,61557,1747],{"class":226},[220,61559,1750],{"class":264},[220,61561,61562],{"class":222,"line":399},[220,61563,1765],{"class":264},[220,61565,61566,61568,61571,61573,61575],{"class":222,"line":644},[220,61567,1770],{"class":264},[220,61569,61570],{"class":230},"'Parallelogram'",[220,61572,1776],{"class":264},[220,61574,10169],{"class":230},[220,61576,1782],{"class":264},[220,61578,61579],{"class":222,"line":650},[220,61580,1787],{"class":264},[220,61582,61583],{"class":222,"line":656},[220,61584,1792],{"class":264},[1504,61586,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61588},[61589,61590],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":61353,"description":61361},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":61597,"title":61598,"body":61599,"category":32806,"componentType":25883,"description":61606,"extension":191,"meta":61867,"navigation":194,"path":61868,"requiresChild":194,"seo":61869,"stem":61870,"__hash__":61871},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":61600,"toc":61863},[61601,61604,61607,61609,61611,61614,61616,61861],[11,61602,61598],{"id":61603},"particlefield",[15,61605,61606],{},"Explodes the child content into a breathing 3D field of particles — bright areas float toward you and dark areas recede, the whole relief can be orbited with the camera rotations, and the cursor physically throws particles that spring back home",[31911,61608],{"component":61598},[23,61610,31915],{"id":26533},[31917,61612],{":props":61613},"[{\"name\":\"count\",\"type\":\"number\",\"default\":\"15000\",\"description\":\"Number of particles — how finely the child is sampled into the field\"},{\"name\":\"depthSource\",\"type\":\"\\\"luminance\\\" | \\\"luminanceInverted\\\" | \\\"red\\\" | \\\"green\\\" | \\\"blue\\\" | \\\"saturation\\\" | \\\"alpha\\\"\",\"default\":\"luminance\",\"description\":\"Which channel of the child drives each particle's depth toward or away from the camera\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Depth of the relief — how far bright and dark areas rise toward and sink away from the camera\"},{\"name\":\"particleShape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square, or a soft glow puff\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"0.75\",\"description\":\"Size of each particle relative to the grid spacing\"},{\"name\":\"depthShading\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How much far particles dim into the distance — the main cue that sells the 3D relief\"},{\"name\":\"wobble\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Gentle idle drift that keeps the field breathing even on a still image\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Camera distance — dolly the whole field closer or further away\"},{\"name\":\"rotationX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera orbit around the horizontal axis — tilt the relief toward or away from you\"},{\"name\":\"rotationY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera orbit around the vertical axis — view the particle extrusion from the side\"},{\"name\":\"rotationZ\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera roll around the view axis\"},{\"name\":\"offsetX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shift the whole field horizontally across the frame (in screen widths)\"},{\"name\":\"offsetY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shift the whole field vertically across the frame (in screen heights) — tilt it flat, then sink it toward the bottom like a ground plane\"},{\"name\":\"cursorMode\",\"type\":\"\\\"none\\\" | \\\"push\\\" | \\\"pull\\\"\",\"default\":\"push\",\"description\":\"How the cursor disturbs the field — push throws particles away and toward you, pull gathers them in\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Strength of the cursor force — how hard particles get thrown before springing back\"},{\"name\":\"cursorRadius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Reach of the cursor field, in screen units\"}]",[23,61615,31923],{"id":31922},[246,61617,61618,61663,61707,61751,61795],{":tabs":1557},[212,61619,61621],{"className":334,"code":61620,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,61622,61623,61631,61639,61647,61655],{"__ignoreMap":178},[220,61624,61625,61627,61629],{"class":222,"line":223},[220,61626,343],{"class":264},[220,61628,347],{"class":346},[220,61630,359],{"class":264},[220,61632,61633,61635,61637],{"class":222,"line":179},[220,61634,364],{"class":264},[220,61636,61598],{"class":346},[220,61638,359],{"class":264},[220,61640,61641,61643,61645],{"class":222,"line":389},[220,61642,2550],{"class":264},[220,61644,2553],{"class":346},[220,61646,386],{"class":264},[220,61648,61649,61651,61653],{"class":222,"line":399},[220,61650,2567],{"class":264},[220,61652,61598],{"class":346},[220,61654,359],{"class":264},[220,61656,61657,61659,61661],{"class":222,"line":644},[220,61658,402],{"class":264},[220,61660,347],{"class":346},[220,61662,359],{"class":264},[212,61664,61665],{"className":409,"code":61620,"language":411,"meta":178,"style":178},[99,61666,61667,61675,61683,61691,61699],{"__ignoreMap":178},[220,61668,61669,61671,61673],{"class":222,"line":223},[220,61670,343],{"class":264},[220,61672,347],{"class":420},[220,61674,359],{"class":264},[220,61676,61677,61679,61681],{"class":222,"line":179},[220,61678,364],{"class":264},[220,61680,61598],{"class":420},[220,61682,359],{"class":264},[220,61684,61685,61687,61689],{"class":222,"line":389},[220,61686,2550],{"class":264},[220,61688,2553],{"class":420},[220,61690,386],{"class":264},[220,61692,61693,61695,61697],{"class":222,"line":399},[220,61694,2567],{"class":264},[220,61696,61598],{"class":420},[220,61698,359],{"class":264},[220,61700,61701,61703,61705],{"class":222,"line":644},[220,61702,402],{"class":264},[220,61704,347],{"class":420},[220,61706,359],{"class":264},[212,61708,61709],{"className":2844,"code":61620,"language":2846,"meta":178,"style":178},[99,61710,61711,61719,61727,61735,61743],{"__ignoreMap":178},[220,61712,61713,61715,61717],{"class":222,"line":223},[220,61714,343],{"class":264},[220,61716,347],{"class":420},[220,61718,359],{"class":264},[220,61720,61721,61723,61725],{"class":222,"line":179},[220,61722,364],{"class":264},[220,61724,61598],{"class":420},[220,61726,359],{"class":264},[220,61728,61729,61731,61733],{"class":222,"line":389},[220,61730,2550],{"class":264},[220,61732,2553],{"class":420},[220,61734,386],{"class":264},[220,61736,61737,61739,61741],{"class":222,"line":399},[220,61738,2567],{"class":264},[220,61740,61598],{"class":420},[220,61742,359],{"class":264},[220,61744,61745,61747,61749],{"class":222,"line":644},[220,61746,402],{"class":264},[220,61748,347],{"class":420},[220,61750,359],{"class":264},[212,61752,61753],{"className":468,"code":61620,"language":469,"meta":178,"style":178},[99,61754,61755,61763,61771,61779,61787],{"__ignoreMap":178},[220,61756,61757,61759,61761],{"class":222,"line":223},[220,61758,343],{"class":264},[220,61760,347],{"class":420},[220,61762,359],{"class":264},[220,61764,61765,61767,61769],{"class":222,"line":179},[220,61766,364],{"class":264},[220,61768,61598],{"class":420},[220,61770,359],{"class":264},[220,61772,61773,61775,61777],{"class":222,"line":389},[220,61774,2550],{"class":264},[220,61776,2553],{"class":420},[220,61778,386],{"class":264},[220,61780,61781,61783,61785],{"class":222,"line":399},[220,61782,2567],{"class":264},[220,61784,61598],{"class":420},[220,61786,359],{"class":264},[220,61788,61789,61791,61793],{"class":222,"line":644},[220,61790,402],{"class":264},[220,61792,347],{"class":420},[220,61794,359],{"class":264},[212,61796,61798],{"className":251,"code":61797,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ParticleField', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,61799,61800,61810,61814,61828,61832,61841,61849,61853,61857],{"__ignoreMap":178},[220,61801,61802,61804,61806,61808],{"class":222,"line":223},[220,61803,261],{"class":260},[220,61805,11512],{"class":264},[220,61807,268],{"class":260},[220,61809,4007],{"class":230},[220,61811,61812],{"class":222,"line":179},[220,61813,647],{"emptyLinePlaceholder":194},[220,61815,61816,61818,61820,61822,61824,61826],{"class":222,"line":389},[220,61817,1735],{"class":260},[220,61819,1738],{"class":420},[220,61821,1741],{"class":260},[220,61823,1744],{"class":260},[220,61825,1747],{"class":226},[220,61827,1750],{"class":264},[220,61829,61830],{"class":222,"line":399},[220,61831,1765],{"class":264},[220,61833,61834,61836,61839],{"class":222,"line":644},[220,61835,1770],{"class":264},[220,61837,61838],{"class":230},"'ParticleField'",[220,61840,7009],{"class":264},[220,61842,61843,61845,61847],{"class":222,"line":650},[220,61844,7014],{"class":264},[220,61846,3206],{"class":230},[220,61848,2465],{"class":264},[220,61850,61851],{"class":222,"line":656},[220,61852,7031],{"class":264},[220,61854,61855],{"class":222,"line":673},[220,61856,1787],{"class":264},[220,61858,61859],{"class":222,"line":682},[220,61860,1792],{"class":264},[1504,61862,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":61864},[61865,61866],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":61598,"description":61606},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":61873,"title":61874,"body":61875,"category":35559,"componentType":25877,"description":61882,"extension":191,"meta":62067,"navigation":194,"path":62068,"requiresChild":32530,"seo":62069,"stem":62070,"__hash__":62071},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":61876,"toc":62063},[61877,61880,61883,61885,61887,61890,61892,62061],[11,61878,61874],{"id":61879},"particleflow",[15,61881,61882],{},"Thousands of drifting dust particles carried by a real incompressible fluid field the cursor stirs — drag to plow a wake and the particles ride the eddies and vortices it leaves behind, while a gentle ambient breeze keeps the whole scene breathing on its own",[31911,61884],{"component":61874},[23,61886,31915],{"id":26533},[31917,61888],{":props":61889},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of particles drifting slowly with the flow\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffd98e\",\"description\":\"Color particles flash toward as they speed up in the fast jets and wakes\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"shape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"streak\",\"description\":\"What each particle is drawn as — a streak or arrow that stretches along the flow, a plain dot, a square, or a soft glowing comet\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"6000\",\"description\":\"Number of drifting particles\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Size of each particle\"},{\"name\":\"trails\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How long each particle's motion trail persists — 0 draws crisp dust, 1 leaves long flowing ribbons\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly the fluid carries the particles — higher makes the dust ride the flow faster\"},{\"name\":\"force\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How hard the cursor's motion pushes the fluid — higher plows faster, more violent wakes and jets\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"25\",\"description\":\"Vorticity confinement — swirl energy that spins the flow into persistent eddies and vortices the dust orbits\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the fluid keeps flowing after you stop dragging — high momentum lets the eddies carry the dust on and on\"},{\"name\":\"ambient\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"A gentle, ever-evolving breeze that keeps the dust drifting even without the cursor — set to 0 for a field that only moves when you stir it\"}]",[23,61891,31923],{"id":31922},[246,61893,61894,61923,61951,61979,62007],{":tabs":1557},[212,61895,61897],{"className":334,"code":61896,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,61898,61899,61907,61915],{"__ignoreMap":178},[220,61900,61901,61903,61905],{"class":222,"line":223},[220,61902,343],{"class":264},[220,61904,347],{"class":346},[220,61906,359],{"class":264},[220,61908,61909,61911,61913],{"class":222,"line":179},[220,61910,364],{"class":264},[220,61912,61874],{"class":346},[220,61914,386],{"class":264},[220,61916,61917,61919,61921],{"class":222,"line":389},[220,61918,402],{"class":264},[220,61920,347],{"class":346},[220,61922,359],{"class":264},[212,61924,61925],{"className":409,"code":61896,"language":411,"meta":178,"style":178},[99,61926,61927,61935,61943],{"__ignoreMap":178},[220,61928,61929,61931,61933],{"class":222,"line":223},[220,61930,343],{"class":264},[220,61932,347],{"class":420},[220,61934,359],{"class":264},[220,61936,61937,61939,61941],{"class":222,"line":179},[220,61938,364],{"class":264},[220,61940,61874],{"class":420},[220,61942,386],{"class":264},[220,61944,61945,61947,61949],{"class":222,"line":389},[220,61946,402],{"class":264},[220,61948,347],{"class":420},[220,61950,359],{"class":264},[212,61952,61953],{"className":2844,"code":61896,"language":2846,"meta":178,"style":178},[99,61954,61955,61963,61971],{"__ignoreMap":178},[220,61956,61957,61959,61961],{"class":222,"line":223},[220,61958,343],{"class":264},[220,61960,347],{"class":420},[220,61962,359],{"class":264},[220,61964,61965,61967,61969],{"class":222,"line":179},[220,61966,364],{"class":264},[220,61968,61874],{"class":420},[220,61970,386],{"class":264},[220,61972,61973,61975,61977],{"class":222,"line":389},[220,61974,402],{"class":264},[220,61976,347],{"class":420},[220,61978,359],{"class":264},[212,61980,61981],{"className":468,"code":61896,"language":469,"meta":178,"style":178},[99,61982,61983,61991,61999],{"__ignoreMap":178},[220,61984,61985,61987,61989],{"class":222,"line":223},[220,61986,343],{"class":264},[220,61988,347],{"class":420},[220,61990,359],{"class":264},[220,61992,61993,61995,61997],{"class":222,"line":179},[220,61994,364],{"class":264},[220,61996,61874],{"class":420},[220,61998,386],{"class":264},[220,62000,62001,62003,62005],{"class":222,"line":389},[220,62002,402],{"class":264},[220,62004,347],{"class":420},[220,62006,359],{"class":264},[212,62008,62010],{"className":251,"code":62009,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ParticleFlow', props: {} }\n ]\n})\n",[99,62011,62012,62022,62026,62040,62044,62053,62057],{"__ignoreMap":178},[220,62013,62014,62016,62018,62020],{"class":222,"line":223},[220,62015,261],{"class":260},[220,62017,11512],{"class":264},[220,62019,268],{"class":260},[220,62021,4007],{"class":230},[220,62023,62024],{"class":222,"line":179},[220,62025,647],{"emptyLinePlaceholder":194},[220,62027,62028,62030,62032,62034,62036,62038],{"class":222,"line":389},[220,62029,1735],{"class":260},[220,62031,1738],{"class":420},[220,62033,1741],{"class":260},[220,62035,1744],{"class":260},[220,62037,1747],{"class":226},[220,62039,1750],{"class":264},[220,62041,62042],{"class":222,"line":399},[220,62043,1765],{"class":264},[220,62045,62046,62048,62051],{"class":222,"line":644},[220,62047,1770],{"class":264},[220,62049,62050],{"class":230},"'ParticleFlow'",[220,62052,2465],{"class":264},[220,62054,62055],{"class":222,"line":650},[220,62056,1787],{"class":264},[220,62058,62059],{"class":222,"line":656},[220,62060,1792],{"class":264},[1504,62062,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62064},[62065,62066],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":61874,"description":61882},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":62073,"title":62074,"body":62075,"category":36569,"componentType":25877,"description":62082,"extension":191,"meta":62267,"navigation":194,"path":62268,"requiresChild":32530,"seo":62269,"stem":62270,"__hash__":62271},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":62076,"toc":62263},[62077,62080,62083,62085,62087,62090,62092,62261],[11,62078,62074],{"id":62079},"particles",[15,62081,62082],{},"A swarm of simulated particles that settles into the shape, filling it evenly — flat, SVG or true 3D volumes — scattering from the cursor (or chasing it), tumbling when the shape moves, and always drifting back home",[31911,62084],{"component":62074},[23,62086,31915],{"id":26533},[31917,62088],{":props":62089},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the shape in degrees\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of particles at rest\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff7ad9\",\"description\":\"Color particles shift toward when agitated — scattering from the cursor or catching up to a moving shape\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"4000\",\"description\":\"Number of simulated particles\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Base particle size (each particle also varies slightly, and grows as it drifts toward the viewer)\"},{\"name\":\"particleShape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The pressure pushing particles apart — how strongly they insist on even spacing inside the shape\"},{\"name\":\"agitation\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"Idle thermal motion of the swarm — 0 freezes it crystal-still once settled\"},{\"name\":\"damping\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How quickly disturbed particles calm back down and settle into place\"},{\"name\":\"gravity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Downward pull on the swarm — negative floats the particles upward\"},{\"name\":\"mouseInfluence\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the cursor field. Positive scatters particles away; negative pulls the swarm toward the cursor\"},{\"name\":\"mouseRadius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Reach of the cursor field, in shape-local units\"},{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness of the additive particle glow\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge softness of each particle — 0 is a crisp disc, 1 a soft glow puff\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"0.18\",\"description\":\"Thickness of the particle volume behind flat shapes (3D shapes use their own true depth)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,62091,31923],{"id":31922},[246,62093,62094,62123,62151,62179,62207],{":tabs":1557},[212,62095,62097],{"className":334,"code":62096,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,62098,62099,62107,62115],{"__ignoreMap":178},[220,62100,62101,62103,62105],{"class":222,"line":223},[220,62102,343],{"class":264},[220,62104,347],{"class":346},[220,62106,359],{"class":264},[220,62108,62109,62111,62113],{"class":222,"line":179},[220,62110,364],{"class":264},[220,62112,62074],{"class":346},[220,62114,386],{"class":264},[220,62116,62117,62119,62121],{"class":222,"line":389},[220,62118,402],{"class":264},[220,62120,347],{"class":346},[220,62122,359],{"class":264},[212,62124,62125],{"className":409,"code":62096,"language":411,"meta":178,"style":178},[99,62126,62127,62135,62143],{"__ignoreMap":178},[220,62128,62129,62131,62133],{"class":222,"line":223},[220,62130,343],{"class":264},[220,62132,347],{"class":420},[220,62134,359],{"class":264},[220,62136,62137,62139,62141],{"class":222,"line":179},[220,62138,364],{"class":264},[220,62140,62074],{"class":420},[220,62142,386],{"class":264},[220,62144,62145,62147,62149],{"class":222,"line":389},[220,62146,402],{"class":264},[220,62148,347],{"class":420},[220,62150,359],{"class":264},[212,62152,62153],{"className":2844,"code":62096,"language":2846,"meta":178,"style":178},[99,62154,62155,62163,62171],{"__ignoreMap":178},[220,62156,62157,62159,62161],{"class":222,"line":223},[220,62158,343],{"class":264},[220,62160,347],{"class":420},[220,62162,359],{"class":264},[220,62164,62165,62167,62169],{"class":222,"line":179},[220,62166,364],{"class":264},[220,62168,62074],{"class":420},[220,62170,386],{"class":264},[220,62172,62173,62175,62177],{"class":222,"line":389},[220,62174,402],{"class":264},[220,62176,347],{"class":420},[220,62178,359],{"class":264},[212,62180,62181],{"className":468,"code":62096,"language":469,"meta":178,"style":178},[99,62182,62183,62191,62199],{"__ignoreMap":178},[220,62184,62185,62187,62189],{"class":222,"line":223},[220,62186,343],{"class":264},[220,62188,347],{"class":420},[220,62190,359],{"class":264},[220,62192,62193,62195,62197],{"class":222,"line":179},[220,62194,364],{"class":264},[220,62196,62074],{"class":420},[220,62198,386],{"class":264},[220,62200,62201,62203,62205],{"class":222,"line":389},[220,62202,402],{"class":264},[220,62204,347],{"class":420},[220,62206,359],{"class":264},[212,62208,62210],{"className":251,"code":62209,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Particles', props: {} }\n ]\n})\n",[99,62211,62212,62222,62226,62240,62244,62253,62257],{"__ignoreMap":178},[220,62213,62214,62216,62218,62220],{"class":222,"line":223},[220,62215,261],{"class":260},[220,62217,11512],{"class":264},[220,62219,268],{"class":260},[220,62221,4007],{"class":230},[220,62223,62224],{"class":222,"line":179},[220,62225,647],{"emptyLinePlaceholder":194},[220,62227,62228,62230,62232,62234,62236,62238],{"class":222,"line":389},[220,62229,1735],{"class":260},[220,62231,1738],{"class":420},[220,62233,1741],{"class":260},[220,62235,1744],{"class":260},[220,62237,1747],{"class":226},[220,62239,1750],{"class":264},[220,62241,62242],{"class":222,"line":399},[220,62243,1765],{"class":264},[220,62245,62246,62248,62251],{"class":222,"line":644},[220,62247,1770],{"class":264},[220,62249,62250],{"class":230},"'Particles'",[220,62252,2465],{"class":264},[220,62254,62255],{"class":222,"line":650},[220,62256,1787],{"class":264},[220,62258,62259],{"class":222,"line":656},[220,62260,1792],{"class":264},[1504,62262,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62264},[62265,62266],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":62074,"description":62082},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":62273,"title":62274,"body":62275,"category":33063,"componentType":25877,"description":62282,"extension":191,"meta":62466,"navigation":194,"path":62467,"requiresChild":32530,"seo":62468,"stem":62469,"__hash__":62470},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":62276,"toc":62462},[62277,62280,62283,62285,62287,62289,62291,62460],[11,62278,62274],{"id":62279},"perlinnoise",[15,62281,62282],{},"Smooth gradient noise that morphs over time",[31911,62284],{"component":62274},[23,62286,31915],{"id":26533},[31917,62288],{":props":34648},[23,62290,31923],{"id":31922},[246,62292,62293,62322,62350,62378,62406],{":tabs":1557},[212,62294,62296],{"className":334,"code":62295,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,62297,62298,62306,62314],{"__ignoreMap":178},[220,62299,62300,62302,62304],{"class":222,"line":223},[220,62301,343],{"class":264},[220,62303,347],{"class":346},[220,62305,359],{"class":264},[220,62307,62308,62310,62312],{"class":222,"line":179},[220,62309,364],{"class":264},[220,62311,62274],{"class":346},[220,62313,386],{"class":264},[220,62315,62316,62318,62320],{"class":222,"line":389},[220,62317,402],{"class":264},[220,62319,347],{"class":346},[220,62321,359],{"class":264},[212,62323,62324],{"className":409,"code":62295,"language":411,"meta":178,"style":178},[99,62325,62326,62334,62342],{"__ignoreMap":178},[220,62327,62328,62330,62332],{"class":222,"line":223},[220,62329,343],{"class":264},[220,62331,347],{"class":420},[220,62333,359],{"class":264},[220,62335,62336,62338,62340],{"class":222,"line":179},[220,62337,364],{"class":264},[220,62339,62274],{"class":420},[220,62341,386],{"class":264},[220,62343,62344,62346,62348],{"class":222,"line":389},[220,62345,402],{"class":264},[220,62347,347],{"class":420},[220,62349,359],{"class":264},[212,62351,62352],{"className":2844,"code":62295,"language":2846,"meta":178,"style":178},[99,62353,62354,62362,62370],{"__ignoreMap":178},[220,62355,62356,62358,62360],{"class":222,"line":223},[220,62357,343],{"class":264},[220,62359,347],{"class":420},[220,62361,359],{"class":264},[220,62363,62364,62366,62368],{"class":222,"line":179},[220,62365,364],{"class":264},[220,62367,62274],{"class":420},[220,62369,386],{"class":264},[220,62371,62372,62374,62376],{"class":222,"line":389},[220,62373,402],{"class":264},[220,62375,347],{"class":420},[220,62377,359],{"class":264},[212,62379,62380],{"className":468,"code":62295,"language":469,"meta":178,"style":178},[99,62381,62382,62390,62398],{"__ignoreMap":178},[220,62383,62384,62386,62388],{"class":222,"line":223},[220,62385,343],{"class":264},[220,62387,347],{"class":420},[220,62389,359],{"class":264},[220,62391,62392,62394,62396],{"class":222,"line":179},[220,62393,364],{"class":264},[220,62395,62274],{"class":420},[220,62397,386],{"class":264},[220,62399,62400,62402,62404],{"class":222,"line":389},[220,62401,402],{"class":264},[220,62403,347],{"class":420},[220,62405,359],{"class":264},[212,62407,62409],{"className":251,"code":62408,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'PerlinNoise', props: {} }\n ]\n})\n",[99,62410,62411,62421,62425,62439,62443,62452,62456],{"__ignoreMap":178},[220,62412,62413,62415,62417,62419],{"class":222,"line":223},[220,62414,261],{"class":260},[220,62416,11512],{"class":264},[220,62418,268],{"class":260},[220,62420,4007],{"class":230},[220,62422,62423],{"class":222,"line":179},[220,62424,647],{"emptyLinePlaceholder":194},[220,62426,62427,62429,62431,62433,62435,62437],{"class":222,"line":389},[220,62428,1735],{"class":260},[220,62430,1738],{"class":420},[220,62432,1741],{"class":260},[220,62434,1744],{"class":260},[220,62436,1747],{"class":226},[220,62438,1750],{"class":264},[220,62440,62441],{"class":222,"line":399},[220,62442,1765],{"class":264},[220,62444,62445,62447,62450],{"class":222,"line":644},[220,62446,1770],{"class":264},[220,62448,62449],{"class":230},"'PerlinNoise'",[220,62451,2465],{"class":264},[220,62453,62454],{"class":222,"line":650},[220,62455,1787],{"class":264},[220,62457,62458],{"class":222,"line":656},[220,62459,1792],{"class":264},[1504,62461,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62463},[62464,62465],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":62274,"description":62282},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":62472,"title":62473,"body":62474,"category":33396,"componentType":25883,"description":62481,"extension":191,"meta":62742,"navigation":194,"path":62743,"requiresChild":194,"seo":62744,"stem":62745,"__hash__":62746},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":62475,"toc":62738},[62476,62479,62482,62484,62486,62489,62491,62736],[11,62477,62473],{"id":62478},"perspective",[15,62480,62481],{},"Rotate the plane in 3D space with pan and tilt",[31911,62483],{"component":62473},[23,62485,31915],{"id":26533},[31917,62487],{":props":62488},"[{\"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\u002Fright)\"},{\"name\":\"tilt\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vertical rotation (up\u002Fdown)\"},{\"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\u002FY\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges\"}]",[23,62490,31923],{"id":31922},[246,62492,62493,62538,62582,62626,62670],{":tabs":1557},[212,62494,62496],{"className":334,"code":62495,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,62497,62498,62506,62514,62522,62530],{"__ignoreMap":178},[220,62499,62500,62502,62504],{"class":222,"line":223},[220,62501,343],{"class":264},[220,62503,347],{"class":346},[220,62505,359],{"class":264},[220,62507,62508,62510,62512],{"class":222,"line":179},[220,62509,364],{"class":264},[220,62511,62473],{"class":346},[220,62513,359],{"class":264},[220,62515,62516,62518,62520],{"class":222,"line":389},[220,62517,2550],{"class":264},[220,62519,2553],{"class":346},[220,62521,386],{"class":264},[220,62523,62524,62526,62528],{"class":222,"line":399},[220,62525,2567],{"class":264},[220,62527,62473],{"class":346},[220,62529,359],{"class":264},[220,62531,62532,62534,62536],{"class":222,"line":644},[220,62533,402],{"class":264},[220,62535,347],{"class":346},[220,62537,359],{"class":264},[212,62539,62540],{"className":409,"code":62495,"language":411,"meta":178,"style":178},[99,62541,62542,62550,62558,62566,62574],{"__ignoreMap":178},[220,62543,62544,62546,62548],{"class":222,"line":223},[220,62545,343],{"class":264},[220,62547,347],{"class":420},[220,62549,359],{"class":264},[220,62551,62552,62554,62556],{"class":222,"line":179},[220,62553,364],{"class":264},[220,62555,62473],{"class":420},[220,62557,359],{"class":264},[220,62559,62560,62562,62564],{"class":222,"line":389},[220,62561,2550],{"class":264},[220,62563,2553],{"class":420},[220,62565,386],{"class":264},[220,62567,62568,62570,62572],{"class":222,"line":399},[220,62569,2567],{"class":264},[220,62571,62473],{"class":420},[220,62573,359],{"class":264},[220,62575,62576,62578,62580],{"class":222,"line":644},[220,62577,402],{"class":264},[220,62579,347],{"class":420},[220,62581,359],{"class":264},[212,62583,62584],{"className":2844,"code":62495,"language":2846,"meta":178,"style":178},[99,62585,62586,62594,62602,62610,62618],{"__ignoreMap":178},[220,62587,62588,62590,62592],{"class":222,"line":223},[220,62589,343],{"class":264},[220,62591,347],{"class":420},[220,62593,359],{"class":264},[220,62595,62596,62598,62600],{"class":222,"line":179},[220,62597,364],{"class":264},[220,62599,62473],{"class":420},[220,62601,359],{"class":264},[220,62603,62604,62606,62608],{"class":222,"line":389},[220,62605,2550],{"class":264},[220,62607,2553],{"class":420},[220,62609,386],{"class":264},[220,62611,62612,62614,62616],{"class":222,"line":399},[220,62613,2567],{"class":264},[220,62615,62473],{"class":420},[220,62617,359],{"class":264},[220,62619,62620,62622,62624],{"class":222,"line":644},[220,62621,402],{"class":264},[220,62623,347],{"class":420},[220,62625,359],{"class":264},[212,62627,62628],{"className":468,"code":62495,"language":469,"meta":178,"style":178},[99,62629,62630,62638,62646,62654,62662],{"__ignoreMap":178},[220,62631,62632,62634,62636],{"class":222,"line":223},[220,62633,343],{"class":264},[220,62635,347],{"class":420},[220,62637,359],{"class":264},[220,62639,62640,62642,62644],{"class":222,"line":179},[220,62641,364],{"class":264},[220,62643,62473],{"class":420},[220,62645,359],{"class":264},[220,62647,62648,62650,62652],{"class":222,"line":389},[220,62649,2550],{"class":264},[220,62651,2553],{"class":420},[220,62653,386],{"class":264},[220,62655,62656,62658,62660],{"class":222,"line":399},[220,62657,2567],{"class":264},[220,62659,62473],{"class":420},[220,62661,359],{"class":264},[220,62663,62664,62666,62668],{"class":222,"line":644},[220,62665,402],{"class":264},[220,62667,347],{"class":420},[220,62669,359],{"class":264},[212,62671,62673],{"className":251,"code":62672,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Perspective', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,62674,62675,62685,62689,62703,62707,62716,62724,62728,62732],{"__ignoreMap":178},[220,62676,62677,62679,62681,62683],{"class":222,"line":223},[220,62678,261],{"class":260},[220,62680,11512],{"class":264},[220,62682,268],{"class":260},[220,62684,4007],{"class":230},[220,62686,62687],{"class":222,"line":179},[220,62688,647],{"emptyLinePlaceholder":194},[220,62690,62691,62693,62695,62697,62699,62701],{"class":222,"line":389},[220,62692,1735],{"class":260},[220,62694,1738],{"class":420},[220,62696,1741],{"class":260},[220,62698,1744],{"class":260},[220,62700,1747],{"class":226},[220,62702,1750],{"class":264},[220,62704,62705],{"class":222,"line":399},[220,62706,1765],{"class":264},[220,62708,62709,62711,62714],{"class":222,"line":644},[220,62710,1770],{"class":264},[220,62712,62713],{"class":230},"'Perspective'",[220,62715,7009],{"class":264},[220,62717,62718,62720,62722],{"class":222,"line":650},[220,62719,7014],{"class":264},[220,62721,3206],{"class":230},[220,62723,2465],{"class":264},[220,62725,62726],{"class":222,"line":656},[220,62727,7031],{"class":264},[220,62729,62730],{"class":222,"line":673},[220,62731,1787],{"class":264},[220,62733,62734],{"class":222,"line":682},[220,62735,1792],{"class":264},[1504,62737,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":62739},[62740,62741],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":62473,"description":62481},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":62748,"title":62749,"body":62750,"category":35559,"componentType":25883,"description":62757,"extension":191,"meta":63074,"navigation":194,"path":63075,"requiresChild":194,"seo":63076,"stem":63077,"__hash__":63078},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":62751,"toc":63070},[62752,62755,62758,62760,62762,62765,62767,63068],[11,62753,62749],{"id":62754},"pixelsort",[15,62756,62757],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31911,62759],{"component":62749},[23,62761,31915],{"id":26533},[31917,62763],{":props":62764},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Size of the cursor brush that sorts pixels\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Softness of the brush edge (0 = hard circle, 1 = very soft)\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"How fast pixels sort — runs more sorting passes per frame\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"How quickly sorted pixels melt back to their original position (0 = permanent)\"},{\"name\":\"axis\",\"type\":\"\\\"horizontal\\\" | \\\"vertical\\\"\",\"default\":\"vertical\",\"description\":\"Axis pixels are sorted along\"},{\"name\":\"direction\",\"type\":\"\\\"ascending\\\" | \\\"descending\\\"\",\"default\":\"descending\",\"description\":\"Sort order by brightness\"}]",[23,62766,31923],{"id":31922},[246,62768,62769,62825,62884,62940,62998],{":tabs":1557},[212,62770,62772],{"className":334,"code":62771,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelSort\n :radius=\"0.4\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPixelSort>\n\u003C\u002FShader>\n",[99,62773,62774,62782,62789,62797,62801,62809,62817],{"__ignoreMap":178},[220,62775,62776,62778,62780],{"class":222,"line":223},[220,62777,343],{"class":264},[220,62779,347],{"class":346},[220,62781,359],{"class":264},[220,62783,62784,62786],{"class":222,"line":179},[220,62785,364],{"class":264},[220,62787,62788],{"class":346},"PixelSort\n",[220,62790,62791,62793,62795],{"class":222,"line":389},[220,62792,17405],{"class":226},[220,62794,353],{"class":264},[220,62796,48148],{"class":230},[220,62798,62799],{"class":222,"line":399},[220,62800,31959],{"class":264},[220,62802,62803,62805,62807],{"class":222,"line":644},[220,62804,2550],{"class":264},[220,62806,2553],{"class":346},[220,62808,386],{"class":264},[220,62810,62811,62813,62815],{"class":222,"line":650},[220,62812,2567],{"class":264},[220,62814,62749],{"class":346},[220,62816,359],{"class":264},[220,62818,62819,62821,62823],{"class":222,"line":656},[220,62820,402],{"class":264},[220,62822,347],{"class":346},[220,62824,359],{"class":264},[212,62826,62828],{"className":409,"code":62827,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPixelSort\n radius={0.4}\n >\n \u003CCircle \u002F>\n \u003C\u002FPixelSort>\n\u003C\u002FShader>\n",[99,62829,62830,62838,62844,62856,62860,62868,62876],{"__ignoreMap":178},[220,62831,62832,62834,62836],{"class":222,"line":223},[220,62833,343],{"class":264},[220,62835,347],{"class":420},[220,62837,359],{"class":264},[220,62839,62840,62842],{"class":222,"line":179},[220,62841,364],{"class":264},[220,62843,62788],{"class":420},[220,62845,62846,62848,62850,62852,62854],{"class":222,"line":389},[220,62847,9645],{"class":226},[220,62849,353],{"class":260},[220,62851,743],{"class":264},[220,62853,8249],{"class":420},[220,62855,749],{"class":264},[220,62857,62858],{"class":222,"line":399},[220,62859,31959],{"class":264},[220,62861,62862,62864,62866],{"class":222,"line":644},[220,62863,2550],{"class":264},[220,62865,2553],{"class":420},[220,62867,386],{"class":264},[220,62869,62870,62872,62874],{"class":222,"line":650},[220,62871,2567],{"class":264},[220,62873,62749],{"class":420},[220,62875,359],{"class":264},[220,62877,62878,62880,62882],{"class":222,"line":656},[220,62879,402],{"class":264},[220,62881,347],{"class":420},[220,62883,359],{"class":264},[212,62885,62886],{"className":2844,"code":62827,"language":2846,"meta":178,"style":178},[99,62887,62888,62896,62902,62912,62916,62924,62932],{"__ignoreMap":178},[220,62889,62890,62892,62894],{"class":222,"line":223},[220,62891,343],{"class":264},[220,62893,347],{"class":420},[220,62895,359],{"class":264},[220,62897,62898,62900],{"class":222,"line":179},[220,62899,364],{"class":264},[220,62901,62788],{"class":420},[220,62903,62904,62906,62908,62910],{"class":222,"line":389},[220,62905,9645],{"class":226},[220,62907,29871],{"class":264},[220,62909,8249],{"class":420},[220,62911,749],{"class":264},[220,62913,62914],{"class":222,"line":399},[220,62915,31959],{"class":264},[220,62917,62918,62920,62922],{"class":222,"line":644},[220,62919,2550],{"class":264},[220,62921,2553],{"class":420},[220,62923,386],{"class":264},[220,62925,62926,62928,62930],{"class":222,"line":650},[220,62927,2567],{"class":264},[220,62929,62749],{"class":420},[220,62931,359],{"class":264},[220,62933,62934,62936,62938],{"class":222,"line":656},[220,62935,402],{"class":264},[220,62937,347],{"class":420},[220,62939,359],{"class":264},[212,62941,62942],{"className":468,"code":62827,"language":469,"meta":178,"style":178},[99,62943,62944,62952,62958,62970,62974,62982,62990],{"__ignoreMap":178},[220,62945,62946,62948,62950],{"class":222,"line":223},[220,62947,343],{"class":264},[220,62949,347],{"class":420},[220,62951,359],{"class":264},[220,62953,62954,62956],{"class":222,"line":179},[220,62955,364],{"class":264},[220,62957,62788],{"class":420},[220,62959,62960,62962,62964,62966,62968],{"class":222,"line":389},[220,62961,9645],{"class":226},[220,62963,353],{"class":260},[220,62965,743],{"class":264},[220,62967,8249],{"class":420},[220,62969,749],{"class":264},[220,62971,62972],{"class":222,"line":399},[220,62973,31959],{"class":264},[220,62975,62976,62978,62980],{"class":222,"line":644},[220,62977,2550],{"class":264},[220,62979,2553],{"class":420},[220,62981,386],{"class":264},[220,62983,62984,62986,62988],{"class":222,"line":650},[220,62985,2567],{"class":264},[220,62987,62749],{"class":420},[220,62989,359],{"class":264},[220,62991,62992,62994,62996],{"class":222,"line":656},[220,62993,402],{"class":264},[220,62995,347],{"class":420},[220,62997,359],{"class":264},[212,62999,63001],{"className":251,"code":63000,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'PixelSort', props: { radius: 0.4 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,63002,63003,63013,63017,63031,63035,63048,63056,63060,63064],{"__ignoreMap":178},[220,63004,63005,63007,63009,63011],{"class":222,"line":223},[220,63006,261],{"class":260},[220,63008,11512],{"class":264},[220,63010,268],{"class":260},[220,63012,4007],{"class":230},[220,63014,63015],{"class":222,"line":179},[220,63016,647],{"emptyLinePlaceholder":194},[220,63018,63019,63021,63023,63025,63027,63029],{"class":222,"line":389},[220,63020,1735],{"class":260},[220,63022,1738],{"class":420},[220,63024,1741],{"class":260},[220,63026,1744],{"class":260},[220,63028,1747],{"class":226},[220,63030,1750],{"class":264},[220,63032,63033],{"class":222,"line":399},[220,63034,1765],{"class":264},[220,63036,63037,63039,63042,63044,63046],{"class":222,"line":644},[220,63038,1770],{"class":264},[220,63040,63041],{"class":230},"'PixelSort'",[220,63043,7541],{"class":264},[220,63045,8249],{"class":420},[220,63047,7546],{"class":264},[220,63049,63050,63052,63054],{"class":222,"line":650},[220,63051,7014],{"class":264},[220,63053,3206],{"class":230},[220,63055,2465],{"class":264},[220,63057,63058],{"class":222,"line":656},[220,63059,7031],{"class":264},[220,63061,63062],{"class":222,"line":673},[220,63063,1787],{"class":264},[220,63065,63066],{"class":222,"line":682},[220,63067,1792],{"class":264},[1504,63069,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63071},[63072,63073],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":62749,"description":62757},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":63080,"title":63081,"body":63082,"category":35559,"componentType":25883,"description":63089,"extension":191,"meta":63406,"navigation":194,"path":63407,"requiresChild":194,"seo":63408,"stem":63409,"__hash__":63410},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":63083,"toc":63402},[63084,63087,63090,63092,63094,63097,63099,63400],[11,63085,63081],{"id":63086},"pixelthrow",[15,63088,63089],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[31911,63091],{"component":63081},[23,63093,31915],{"id":26533},[31917,63095],{":props":63096},"[{\"name\":\"throwKey\",\"type\":\"\\\"luminance\\\" | \\\"darkness\\\" | \\\"red\\\" | \\\"green\\\" | \\\"blue\\\"\",\"default\":\"luminance\",\"description\":\"Which pixel value decides how far a pixel is thrown\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Maximum distance pixels can be thrown\"},{\"name\":\"keyInfluence\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Size of the cursor's throw brush\"},{\"name\":\"friction\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle pixels thrown beyond the canvas edges\"}]",[23,63098,31923],{"id":31922},[246,63100,63101,63157,63216,63272,63330],{":tabs":1557},[212,63102,63104],{"className":334,"code":63103,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelThrow\n :radius=\"0.2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPixelThrow>\n\u003C\u002FShader>\n",[99,63105,63106,63114,63121,63129,63133,63141,63149],{"__ignoreMap":178},[220,63107,63108,63110,63112],{"class":222,"line":223},[220,63109,343],{"class":264},[220,63111,347],{"class":346},[220,63113,359],{"class":264},[220,63115,63116,63118],{"class":222,"line":179},[220,63117,364],{"class":264},[220,63119,63120],{"class":346},"PixelThrow\n",[220,63122,63123,63125,63127],{"class":222,"line":389},[220,63124,17405],{"class":226},[220,63126,353],{"class":264},[220,63128,60792],{"class":230},[220,63130,63131],{"class":222,"line":399},[220,63132,31959],{"class":264},[220,63134,63135,63137,63139],{"class":222,"line":644},[220,63136,2550],{"class":264},[220,63138,2553],{"class":346},[220,63140,386],{"class":264},[220,63142,63143,63145,63147],{"class":222,"line":650},[220,63144,2567],{"class":264},[220,63146,63081],{"class":346},[220,63148,359],{"class":264},[220,63150,63151,63153,63155],{"class":222,"line":656},[220,63152,402],{"class":264},[220,63154,347],{"class":346},[220,63156,359],{"class":264},[212,63158,63160],{"className":409,"code":63159,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPixelThrow\n radius={0.2}\n >\n \u003CCircle \u002F>\n \u003C\u002FPixelThrow>\n\u003C\u002FShader>\n",[99,63161,63162,63170,63176,63188,63192,63200,63208],{"__ignoreMap":178},[220,63163,63164,63166,63168],{"class":222,"line":223},[220,63165,343],{"class":264},[220,63167,347],{"class":420},[220,63169,359],{"class":264},[220,63171,63172,63174],{"class":222,"line":179},[220,63173,364],{"class":264},[220,63175,63120],{"class":420},[220,63177,63178,63180,63182,63184,63186],{"class":222,"line":389},[220,63179,9645],{"class":226},[220,63181,353],{"class":260},[220,63183,743],{"class":264},[220,63185,16976],{"class":420},[220,63187,749],{"class":264},[220,63189,63190],{"class":222,"line":399},[220,63191,31959],{"class":264},[220,63193,63194,63196,63198],{"class":222,"line":644},[220,63195,2550],{"class":264},[220,63197,2553],{"class":420},[220,63199,386],{"class":264},[220,63201,63202,63204,63206],{"class":222,"line":650},[220,63203,2567],{"class":264},[220,63205,63081],{"class":420},[220,63207,359],{"class":264},[220,63209,63210,63212,63214],{"class":222,"line":656},[220,63211,402],{"class":264},[220,63213,347],{"class":420},[220,63215,359],{"class":264},[212,63217,63218],{"className":2844,"code":63159,"language":2846,"meta":178,"style":178},[99,63219,63220,63228,63234,63244,63248,63256,63264],{"__ignoreMap":178},[220,63221,63222,63224,63226],{"class":222,"line":223},[220,63223,343],{"class":264},[220,63225,347],{"class":420},[220,63227,359],{"class":264},[220,63229,63230,63232],{"class":222,"line":179},[220,63231,364],{"class":264},[220,63233,63120],{"class":420},[220,63235,63236,63238,63240,63242],{"class":222,"line":389},[220,63237,9645],{"class":226},[220,63239,29871],{"class":264},[220,63241,16976],{"class":420},[220,63243,749],{"class":264},[220,63245,63246],{"class":222,"line":399},[220,63247,31959],{"class":264},[220,63249,63250,63252,63254],{"class":222,"line":644},[220,63251,2550],{"class":264},[220,63253,2553],{"class":420},[220,63255,386],{"class":264},[220,63257,63258,63260,63262],{"class":222,"line":650},[220,63259,2567],{"class":264},[220,63261,63081],{"class":420},[220,63263,359],{"class":264},[220,63265,63266,63268,63270],{"class":222,"line":656},[220,63267,402],{"class":264},[220,63269,347],{"class":420},[220,63271,359],{"class":264},[212,63273,63274],{"className":468,"code":63159,"language":469,"meta":178,"style":178},[99,63275,63276,63284,63290,63302,63306,63314,63322],{"__ignoreMap":178},[220,63277,63278,63280,63282],{"class":222,"line":223},[220,63279,343],{"class":264},[220,63281,347],{"class":420},[220,63283,359],{"class":264},[220,63285,63286,63288],{"class":222,"line":179},[220,63287,364],{"class":264},[220,63289,63120],{"class":420},[220,63291,63292,63294,63296,63298,63300],{"class":222,"line":389},[220,63293,9645],{"class":226},[220,63295,353],{"class":260},[220,63297,743],{"class":264},[220,63299,16976],{"class":420},[220,63301,749],{"class":264},[220,63303,63304],{"class":222,"line":399},[220,63305,31959],{"class":264},[220,63307,63308,63310,63312],{"class":222,"line":644},[220,63309,2550],{"class":264},[220,63311,2553],{"class":420},[220,63313,386],{"class":264},[220,63315,63316,63318,63320],{"class":222,"line":650},[220,63317,2567],{"class":264},[220,63319,63081],{"class":420},[220,63321,359],{"class":264},[220,63323,63324,63326,63328],{"class":222,"line":656},[220,63325,402],{"class":264},[220,63327,347],{"class":420},[220,63329,359],{"class":264},[212,63331,63333],{"className":251,"code":63332,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'PixelThrow', props: { radius: 0.2 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,63334,63335,63345,63349,63363,63367,63380,63388,63392,63396],{"__ignoreMap":178},[220,63336,63337,63339,63341,63343],{"class":222,"line":223},[220,63338,261],{"class":260},[220,63340,11512],{"class":264},[220,63342,268],{"class":260},[220,63344,4007],{"class":230},[220,63346,63347],{"class":222,"line":179},[220,63348,647],{"emptyLinePlaceholder":194},[220,63350,63351,63353,63355,63357,63359,63361],{"class":222,"line":389},[220,63352,1735],{"class":260},[220,63354,1738],{"class":420},[220,63356,1741],{"class":260},[220,63358,1744],{"class":260},[220,63360,1747],{"class":226},[220,63362,1750],{"class":264},[220,63364,63365],{"class":222,"line":399},[220,63366,1765],{"class":264},[220,63368,63369,63371,63374,63376,63378],{"class":222,"line":644},[220,63370,1770],{"class":264},[220,63372,63373],{"class":230},"'PixelThrow'",[220,63375,7541],{"class":264},[220,63377,16976],{"class":420},[220,63379,7546],{"class":264},[220,63381,63382,63384,63386],{"class":222,"line":650},[220,63383,7014],{"class":264},[220,63385,3206],{"class":230},[220,63387,2465],{"class":264},[220,63389,63390],{"class":222,"line":656},[220,63391,7031],{"class":264},[220,63393,63394],{"class":222,"line":673},[220,63395,1787],{"class":264},[220,63397,63398],{"class":222,"line":682},[220,63399,1792],{"class":264},[1504,63401,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63403},[63404,63405],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":63081,"description":63089},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":63412,"title":63413,"body":63414,"category":32806,"componentType":25883,"description":63421,"extension":191,"meta":63682,"navigation":194,"path":63683,"requiresChild":194,"seo":63684,"stem":63685,"__hash__":63686},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":63415,"toc":63678},[63416,63419,63422,63424,63426,63429,63431,63676],[11,63417,63413],{"id":63418},"pixelate",[15,63420,63421],{},"Pixelation effect with adjustable cell size",[31911,63423],{"component":63413},[23,63425,31915],{"id":26533},[31917,63427],{":props":63428},"[{\"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,63430,31923],{"id":31922},[246,63432,63433,63478,63522,63566,63610],{":tabs":1557},[212,63434,63436],{"className":334,"code":63435,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,63437,63438,63446,63454,63462,63470],{"__ignoreMap":178},[220,63439,63440,63442,63444],{"class":222,"line":223},[220,63441,343],{"class":264},[220,63443,347],{"class":346},[220,63445,359],{"class":264},[220,63447,63448,63450,63452],{"class":222,"line":179},[220,63449,364],{"class":264},[220,63451,63413],{"class":346},[220,63453,359],{"class":264},[220,63455,63456,63458,63460],{"class":222,"line":389},[220,63457,2550],{"class":264},[220,63459,2553],{"class":346},[220,63461,386],{"class":264},[220,63463,63464,63466,63468],{"class":222,"line":399},[220,63465,2567],{"class":264},[220,63467,63413],{"class":346},[220,63469,359],{"class":264},[220,63471,63472,63474,63476],{"class":222,"line":644},[220,63473,402],{"class":264},[220,63475,347],{"class":346},[220,63477,359],{"class":264},[212,63479,63480],{"className":409,"code":63435,"language":411,"meta":178,"style":178},[99,63481,63482,63490,63498,63506,63514],{"__ignoreMap":178},[220,63483,63484,63486,63488],{"class":222,"line":223},[220,63485,343],{"class":264},[220,63487,347],{"class":420},[220,63489,359],{"class":264},[220,63491,63492,63494,63496],{"class":222,"line":179},[220,63493,364],{"class":264},[220,63495,63413],{"class":420},[220,63497,359],{"class":264},[220,63499,63500,63502,63504],{"class":222,"line":389},[220,63501,2550],{"class":264},[220,63503,2553],{"class":420},[220,63505,386],{"class":264},[220,63507,63508,63510,63512],{"class":222,"line":399},[220,63509,2567],{"class":264},[220,63511,63413],{"class":420},[220,63513,359],{"class":264},[220,63515,63516,63518,63520],{"class":222,"line":644},[220,63517,402],{"class":264},[220,63519,347],{"class":420},[220,63521,359],{"class":264},[212,63523,63524],{"className":2844,"code":63435,"language":2846,"meta":178,"style":178},[99,63525,63526,63534,63542,63550,63558],{"__ignoreMap":178},[220,63527,63528,63530,63532],{"class":222,"line":223},[220,63529,343],{"class":264},[220,63531,347],{"class":420},[220,63533,359],{"class":264},[220,63535,63536,63538,63540],{"class":222,"line":179},[220,63537,364],{"class":264},[220,63539,63413],{"class":420},[220,63541,359],{"class":264},[220,63543,63544,63546,63548],{"class":222,"line":389},[220,63545,2550],{"class":264},[220,63547,2553],{"class":420},[220,63549,386],{"class":264},[220,63551,63552,63554,63556],{"class":222,"line":399},[220,63553,2567],{"class":264},[220,63555,63413],{"class":420},[220,63557,359],{"class":264},[220,63559,63560,63562,63564],{"class":222,"line":644},[220,63561,402],{"class":264},[220,63563,347],{"class":420},[220,63565,359],{"class":264},[212,63567,63568],{"className":468,"code":63435,"language":469,"meta":178,"style":178},[99,63569,63570,63578,63586,63594,63602],{"__ignoreMap":178},[220,63571,63572,63574,63576],{"class":222,"line":223},[220,63573,343],{"class":264},[220,63575,347],{"class":420},[220,63577,359],{"class":264},[220,63579,63580,63582,63584],{"class":222,"line":179},[220,63581,364],{"class":264},[220,63583,63413],{"class":420},[220,63585,359],{"class":264},[220,63587,63588,63590,63592],{"class":222,"line":389},[220,63589,2550],{"class":264},[220,63591,2553],{"class":420},[220,63593,386],{"class":264},[220,63595,63596,63598,63600],{"class":222,"line":399},[220,63597,2567],{"class":264},[220,63599,63413],{"class":420},[220,63601,359],{"class":264},[220,63603,63604,63606,63608],{"class":222,"line":644},[220,63605,402],{"class":264},[220,63607,347],{"class":420},[220,63609,359],{"class":264},[212,63611,63613],{"className":251,"code":63612,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Pixelate', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,63614,63615,63625,63629,63643,63647,63656,63664,63668,63672],{"__ignoreMap":178},[220,63616,63617,63619,63621,63623],{"class":222,"line":223},[220,63618,261],{"class":260},[220,63620,11512],{"class":264},[220,63622,268],{"class":260},[220,63624,4007],{"class":230},[220,63626,63627],{"class":222,"line":179},[220,63628,647],{"emptyLinePlaceholder":194},[220,63630,63631,63633,63635,63637,63639,63641],{"class":222,"line":389},[220,63632,1735],{"class":260},[220,63634,1738],{"class":420},[220,63636,1741],{"class":260},[220,63638,1744],{"class":260},[220,63640,1747],{"class":226},[220,63642,1750],{"class":264},[220,63644,63645],{"class":222,"line":399},[220,63646,1765],{"class":264},[220,63648,63649,63651,63654],{"class":222,"line":644},[220,63650,1770],{"class":264},[220,63652,63653],{"class":230},"'Pixelate'",[220,63655,7009],{"class":264},[220,63657,63658,63660,63662],{"class":222,"line":650},[220,63659,7014],{"class":264},[220,63661,3206],{"class":230},[220,63663,2465],{"class":264},[220,63665,63666],{"class":222,"line":656},[220,63667,7031],{"class":264},[220,63669,63670],{"class":222,"line":673},[220,63671,1787],{"class":264},[220,63673,63674],{"class":222,"line":682},[220,63675,1792],{"class":264},[1504,63677,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":63679},[63680,63681],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":63413,"description":63421},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":63688,"title":13069,"body":63689,"category":33063,"componentType":25877,"description":63696,"extension":191,"meta":63937,"navigation":194,"path":63938,"requiresChild":32530,"seo":63939,"stem":63940,"__hash__":63941},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":63690,"toc":63933},[63691,63694,63697,63699,63701,63704,63706,63931],[11,63692,13069],{"id":63693},"plasma",[15,63695,63696],{},"Animated effect of glowing plasma",[31911,63698],{"component":13069},[23,63700,31915],{"id":26533},[31917,63702],{":props":63703},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,63705,31923],{"id":31922},[246,63707,63708,63748,63791,63831,63873],{":tabs":1557},[212,63709,63711],{"className":334,"code":63710,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,63712,63713,63721,63728,63736,63740],{"__ignoreMap":178},[220,63714,63715,63717,63719],{"class":222,"line":223},[220,63716,343],{"class":264},[220,63718,347],{"class":346},[220,63720,359],{"class":264},[220,63722,63723,63725],{"class":222,"line":179},[220,63724,364],{"class":264},[220,63726,63727],{"class":346},"Plasma\n",[220,63729,63730,63732,63734],{"class":222,"line":389},[220,63731,20371],{"class":226},[220,63733,353],{"class":264},[220,63735,59954],{"class":230},[220,63737,63738],{"class":222,"line":399},[220,63739,1234],{"class":264},[220,63741,63742,63744,63746],{"class":222,"line":644},[220,63743,402],{"class":264},[220,63745,347],{"class":346},[220,63747,359],{"class":264},[212,63749,63751],{"className":409,"code":63750,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,63752,63753,63761,63767,63779,63783],{"__ignoreMap":178},[220,63754,63755,63757,63759],{"class":222,"line":223},[220,63756,343],{"class":264},[220,63758,347],{"class":420},[220,63760,359],{"class":264},[220,63762,63763,63765],{"class":222,"line":179},[220,63764,364],{"class":264},[220,63766,63727],{"class":420},[220,63768,63769,63771,63773,63775,63777],{"class":222,"line":389},[220,63770,20482],{"class":226},[220,63772,353],{"class":260},[220,63774,743],{"class":264},[220,63776,60004],{"class":420},[220,63778,749],{"class":264},[220,63780,63781],{"class":222,"line":399},[220,63782,1234],{"class":264},[220,63784,63785,63787,63789],{"class":222,"line":644},[220,63786,402],{"class":264},[220,63788,347],{"class":420},[220,63790,359],{"class":264},[212,63792,63793],{"className":2844,"code":63750,"language":2846,"meta":178,"style":178},[99,63794,63795,63803,63809,63819,63823],{"__ignoreMap":178},[220,63796,63797,63799,63801],{"class":222,"line":223},[220,63798,343],{"class":264},[220,63800,347],{"class":420},[220,63802,359],{"class":264},[220,63804,63805,63807],{"class":222,"line":179},[220,63806,364],{"class":264},[220,63808,63727],{"class":420},[220,63810,63811,63813,63815,63817],{"class":222,"line":389},[220,63812,20482],{"class":226},[220,63814,29871],{"class":264},[220,63816,60004],{"class":420},[220,63818,749],{"class":264},[220,63820,63821],{"class":222,"line":399},[220,63822,1234],{"class":264},[220,63824,63825,63827,63829],{"class":222,"line":644},[220,63826,402],{"class":264},[220,63828,347],{"class":420},[220,63830,359],{"class":264},[212,63832,63833],{"className":468,"code":63750,"language":469,"meta":178,"style":178},[99,63834,63835,63843,63849,63861,63865],{"__ignoreMap":178},[220,63836,63837,63839,63841],{"class":222,"line":223},[220,63838,343],{"class":264},[220,63840,347],{"class":420},[220,63842,359],{"class":264},[220,63844,63845,63847],{"class":222,"line":179},[220,63846,364],{"class":264},[220,63848,63727],{"class":420},[220,63850,63851,63853,63855,63857,63859],{"class":222,"line":389},[220,63852,20482],{"class":226},[220,63854,353],{"class":260},[220,63856,743],{"class":264},[220,63858,60004],{"class":420},[220,63860,749],{"class":264},[220,63862,63863],{"class":222,"line":399},[220,63864,1234],{"class":264},[220,63866,63867,63869,63871],{"class":222,"line":644},[220,63868,402],{"class":264},[220,63870,347],{"class":420},[220,63872,359],{"class":264},[212,63874,63876],{"className":251,"code":63875,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Plasma', props: { intensity: 1.5 } }\n ]\n})\n",[99,63877,63878,63888,63892,63906,63910,63923,63927],{"__ignoreMap":178},[220,63879,63880,63882,63884,63886],{"class":222,"line":223},[220,63881,261],{"class":260},[220,63883,11512],{"class":264},[220,63885,268],{"class":260},[220,63887,4007],{"class":230},[220,63889,63890],{"class":222,"line":179},[220,63891,647],{"emptyLinePlaceholder":194},[220,63893,63894,63896,63898,63900,63902,63904],{"class":222,"line":389},[220,63895,1735],{"class":260},[220,63897,1738],{"class":420},[220,63899,1741],{"class":260},[220,63901,1744],{"class":260},[220,63903,1747],{"class":226},[220,63905,1750],{"class":264},[220,63907,63908],{"class":222,"line":399},[220,63909,1765],{"class":264},[220,63911,63912,63914,63917,63919,63921],{"class":222,"line":644},[220,63913,1770],{"class":264},[220,63915,63916],{"class":230},"'Plasma'",[220,63918,32203],{"class":264},[220,63920,60004],{"class":420},[220,63922,1782],{"class":264},[220,63924,63925],{"class":222,"line":650},[220,63926,1787],{"class":264},[220,63928,63929],{"class":222,"line":656},[220,63930,1792],{"class":264},[1504,63932,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63934},[63935,63936],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":13069,"description":63696},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":63943,"title":63944,"body":63945,"category":36569,"componentType":25877,"description":63952,"extension":191,"meta":64137,"navigation":194,"path":64138,"requiresChild":32530,"seo":64139,"stem":64140,"__hash__":64141},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":63946,"toc":64133},[63947,63950,63953,63955,63957,63960,63962,64131],[11,63948,63944],{"id":63949},"plastic",[15,63951,63952],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31911,63954],{"component":63944},[23,63956,31915],{"id":26533},[31917,63958],{":props":63959},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the plastic shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the plastic shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the plastic shape in degrees\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#f5f5f7\",\"description\":\"Body color at the start of the gradient\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#d9dade\",\"description\":\"Body color at the end of the gradient\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"gradientAngle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Direction of the body color gradient in degrees\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for gradient color interpolation\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Puffiness — how far the rounded bevel reaches inward from the edge before the surface flattens\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"Surface roughness — 0 = polished gloss with crisp mirror reflections, 1 = matte satin\"},{\"name\":\"reflectivity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the environment reflections and specular highlights\"},{\"name\":\"crumple\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Surface crumple — irregular dents that break reflections into hard organic shapes, like blown or vacuum-formed plastic\"},{\"name\":\"crumpleScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of the crumple dents — higher = smaller, denser dents\"},{\"name\":\"crumpleCoverage\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much of the surface is crumpled — 0 = pristine, 0.5 = patches of crumple, 1 = fully crumpled\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — re-rolls the crumple pattern for reflection variety\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"315\",\"description\":\"Direction the studio key light comes from, in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Speed of the environment drift — the studio reflections slowly orbit the surface. 0 pauses.\"},{\"name\":\"shading\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Diffuse shading contrast — how strongly the body darkens away from the light\"},{\"name\":\"rim\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Fresnel rim light intensity on grazing surfaces\"},{\"name\":\"rimColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the fresnel rim light\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,63961,31923],{"id":31922},[246,63963,63964,63993,64021,64049,64077],{":tabs":1557},[212,63965,63967],{"className":334,"code":63966,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,63968,63969,63977,63985],{"__ignoreMap":178},[220,63970,63971,63973,63975],{"class":222,"line":223},[220,63972,343],{"class":264},[220,63974,347],{"class":346},[220,63976,359],{"class":264},[220,63978,63979,63981,63983],{"class":222,"line":179},[220,63980,364],{"class":264},[220,63982,63944],{"class":346},[220,63984,386],{"class":264},[220,63986,63987,63989,63991],{"class":222,"line":389},[220,63988,402],{"class":264},[220,63990,347],{"class":346},[220,63992,359],{"class":264},[212,63994,63995],{"className":409,"code":63966,"language":411,"meta":178,"style":178},[99,63996,63997,64005,64013],{"__ignoreMap":178},[220,63998,63999,64001,64003],{"class":222,"line":223},[220,64000,343],{"class":264},[220,64002,347],{"class":420},[220,64004,359],{"class":264},[220,64006,64007,64009,64011],{"class":222,"line":179},[220,64008,364],{"class":264},[220,64010,63944],{"class":420},[220,64012,386],{"class":264},[220,64014,64015,64017,64019],{"class":222,"line":389},[220,64016,402],{"class":264},[220,64018,347],{"class":420},[220,64020,359],{"class":264},[212,64022,64023],{"className":2844,"code":63966,"language":2846,"meta":178,"style":178},[99,64024,64025,64033,64041],{"__ignoreMap":178},[220,64026,64027,64029,64031],{"class":222,"line":223},[220,64028,343],{"class":264},[220,64030,347],{"class":420},[220,64032,359],{"class":264},[220,64034,64035,64037,64039],{"class":222,"line":179},[220,64036,364],{"class":264},[220,64038,63944],{"class":420},[220,64040,386],{"class":264},[220,64042,64043,64045,64047],{"class":222,"line":389},[220,64044,402],{"class":264},[220,64046,347],{"class":420},[220,64048,359],{"class":264},[212,64050,64051],{"className":468,"code":63966,"language":469,"meta":178,"style":178},[99,64052,64053,64061,64069],{"__ignoreMap":178},[220,64054,64055,64057,64059],{"class":222,"line":223},[220,64056,343],{"class":264},[220,64058,347],{"class":420},[220,64060,359],{"class":264},[220,64062,64063,64065,64067],{"class":222,"line":179},[220,64064,364],{"class":264},[220,64066,63944],{"class":420},[220,64068,386],{"class":264},[220,64070,64071,64073,64075],{"class":222,"line":389},[220,64072,402],{"class":264},[220,64074,347],{"class":420},[220,64076,359],{"class":264},[212,64078,64080],{"className":251,"code":64079,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Plastic', props: {} }\n ]\n})\n",[99,64081,64082,64092,64096,64110,64114,64123,64127],{"__ignoreMap":178},[220,64083,64084,64086,64088,64090],{"class":222,"line":223},[220,64085,261],{"class":260},[220,64087,11512],{"class":264},[220,64089,268],{"class":260},[220,64091,4007],{"class":230},[220,64093,64094],{"class":222,"line":179},[220,64095,647],{"emptyLinePlaceholder":194},[220,64097,64098,64100,64102,64104,64106,64108],{"class":222,"line":389},[220,64099,1735],{"class":260},[220,64101,1738],{"class":420},[220,64103,1741],{"class":260},[220,64105,1744],{"class":260},[220,64107,1747],{"class":226},[220,64109,1750],{"class":264},[220,64111,64112],{"class":222,"line":399},[220,64113,1765],{"class":264},[220,64115,64116,64118,64121],{"class":222,"line":644},[220,64117,1770],{"class":264},[220,64119,64120],{"class":230},"'Plastic'",[220,64122,2465],{"class":264},[220,64124,64125],{"class":222,"line":650},[220,64126,1787],{"class":264},[220,64128,64129],{"class":222,"line":656},[220,64130,1792],{"class":264},[1504,64132,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":64134},[64135,64136],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":63944,"description":63952},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":64143,"title":64144,"body":64145,"category":33396,"componentType":25883,"description":64152,"extension":191,"meta":64515,"navigation":194,"path":64516,"requiresChild":194,"seo":64517,"stem":64518,"__hash__":64519},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":64146,"toc":64511},[64147,64150,64153,64155,64157,64160,64162,64509],[11,64148,64144],{"id":64149},"polarcoordinates",[15,64151,64152],{},"Convert rectangular coordinates to polar space",[31911,64154],{"component":64144},[23,64156,31915],{"id":26533},[31917,64158],{":props":64159},"[{\"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,64161,31923],{"id":31922},[246,64163,64164,64228,64299,64365,64435],{":tabs":1557},[212,64165,64167],{"className":334,"code":64166,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolarCoordinates\n :radius=\"1\"\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPolarCoordinates>\n\u003C\u002FShader>\n",[99,64168,64169,64177,64184,64192,64200,64204,64212,64220],{"__ignoreMap":178},[220,64170,64171,64173,64175],{"class":222,"line":223},[220,64172,343],{"class":264},[220,64174,347],{"class":346},[220,64176,359],{"class":264},[220,64178,64179,64181],{"class":222,"line":179},[220,64180,364],{"class":264},[220,64182,64183],{"class":346},"PolarCoordinates\n",[220,64185,64186,64188,64190],{"class":222,"line":389},[220,64187,17405],{"class":226},[220,64189,353],{"class":264},[220,64191,36625],{"class":230},[220,64193,64194,64196,64198],{"class":222,"line":399},[220,64195,20371],{"class":226},[220,64197,353],{"class":264},[220,64199,36625],{"class":230},[220,64201,64202],{"class":222,"line":644},[220,64203,31959],{"class":264},[220,64205,64206,64208,64210],{"class":222,"line":650},[220,64207,2550],{"class":264},[220,64209,2553],{"class":346},[220,64211,386],{"class":264},[220,64213,64214,64216,64218],{"class":222,"line":656},[220,64215,2567],{"class":264},[220,64217,64144],{"class":346},[220,64219,359],{"class":264},[220,64221,64222,64224,64226],{"class":222,"line":673},[220,64223,402],{"class":264},[220,64225,347],{"class":346},[220,64227,359],{"class":264},[212,64229,64231],{"className":409,"code":64230,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolarCoordinates\n radius={1}\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FPolarCoordinates>\n\u003C\u002FShader>\n",[99,64232,64233,64241,64247,64259,64271,64275,64283,64291],{"__ignoreMap":178},[220,64234,64235,64237,64239],{"class":222,"line":223},[220,64236,343],{"class":264},[220,64238,347],{"class":420},[220,64240,359],{"class":264},[220,64242,64243,64245],{"class":222,"line":179},[220,64244,364],{"class":264},[220,64246,64183],{"class":420},[220,64248,64249,64251,64253,64255,64257],{"class":222,"line":389},[220,64250,9645],{"class":226},[220,64252,353],{"class":260},[220,64254,743],{"class":264},[220,64256,8677],{"class":420},[220,64258,749],{"class":264},[220,64260,64261,64263,64265,64267,64269],{"class":222,"line":399},[220,64262,20482],{"class":226},[220,64264,353],{"class":260},[220,64266,743],{"class":264},[220,64268,8677],{"class":420},[220,64270,749],{"class":264},[220,64272,64273],{"class":222,"line":644},[220,64274,31959],{"class":264},[220,64276,64277,64279,64281],{"class":222,"line":650},[220,64278,2550],{"class":264},[220,64280,2553],{"class":420},[220,64282,386],{"class":264},[220,64284,64285,64287,64289],{"class":222,"line":656},[220,64286,2567],{"class":264},[220,64288,64144],{"class":420},[220,64290,359],{"class":264},[220,64292,64293,64295,64297],{"class":222,"line":673},[220,64294,402],{"class":264},[220,64296,347],{"class":420},[220,64298,359],{"class":264},[212,64300,64301],{"className":2844,"code":64230,"language":2846,"meta":178,"style":178},[99,64302,64303,64311,64317,64327,64337,64341,64349,64357],{"__ignoreMap":178},[220,64304,64305,64307,64309],{"class":222,"line":223},[220,64306,343],{"class":264},[220,64308,347],{"class":420},[220,64310,359],{"class":264},[220,64312,64313,64315],{"class":222,"line":179},[220,64314,364],{"class":264},[220,64316,64183],{"class":420},[220,64318,64319,64321,64323,64325],{"class":222,"line":389},[220,64320,9645],{"class":226},[220,64322,29871],{"class":264},[220,64324,8677],{"class":420},[220,64326,749],{"class":264},[220,64328,64329,64331,64333,64335],{"class":222,"line":399},[220,64330,20482],{"class":226},[220,64332,29871],{"class":264},[220,64334,8677],{"class":420},[220,64336,749],{"class":264},[220,64338,64339],{"class":222,"line":644},[220,64340,31959],{"class":264},[220,64342,64343,64345,64347],{"class":222,"line":650},[220,64344,2550],{"class":264},[220,64346,2553],{"class":420},[220,64348,386],{"class":264},[220,64350,64351,64353,64355],{"class":222,"line":656},[220,64352,2567],{"class":264},[220,64354,64144],{"class":420},[220,64356,359],{"class":264},[220,64358,64359,64361,64363],{"class":222,"line":673},[220,64360,402],{"class":264},[220,64362,347],{"class":420},[220,64364,359],{"class":264},[212,64366,64367],{"className":468,"code":64230,"language":469,"meta":178,"style":178},[99,64368,64369,64377,64383,64395,64407,64411,64419,64427],{"__ignoreMap":178},[220,64370,64371,64373,64375],{"class":222,"line":223},[220,64372,343],{"class":264},[220,64374,347],{"class":420},[220,64376,359],{"class":264},[220,64378,64379,64381],{"class":222,"line":179},[220,64380,364],{"class":264},[220,64382,64183],{"class":420},[220,64384,64385,64387,64389,64391,64393],{"class":222,"line":389},[220,64386,9645],{"class":226},[220,64388,353],{"class":260},[220,64390,743],{"class":264},[220,64392,8677],{"class":420},[220,64394,749],{"class":264},[220,64396,64397,64399,64401,64403,64405],{"class":222,"line":399},[220,64398,20482],{"class":226},[220,64400,353],{"class":260},[220,64402,743],{"class":264},[220,64404,8677],{"class":420},[220,64406,749],{"class":264},[220,64408,64409],{"class":222,"line":644},[220,64410,31959],{"class":264},[220,64412,64413,64415,64417],{"class":222,"line":650},[220,64414,2550],{"class":264},[220,64416,2553],{"class":420},[220,64418,386],{"class":264},[220,64420,64421,64423,64425],{"class":222,"line":656},[220,64422,2567],{"class":264},[220,64424,64144],{"class":420},[220,64426,359],{"class":264},[220,64428,64429,64431,64433],{"class":222,"line":673},[220,64430,402],{"class":264},[220,64432,347],{"class":420},[220,64434,359],{"class":264},[212,64436,64438],{"className":251,"code":64437,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,64439,64440,64450,64454,64468,64472,64489,64497,64501,64505],{"__ignoreMap":178},[220,64441,64442,64444,64446,64448],{"class":222,"line":223},[220,64443,261],{"class":260},[220,64445,11512],{"class":264},[220,64447,268],{"class":260},[220,64449,4007],{"class":230},[220,64451,64452],{"class":222,"line":179},[220,64453,647],{"emptyLinePlaceholder":194},[220,64455,64456,64458,64460,64462,64464,64466],{"class":222,"line":389},[220,64457,1735],{"class":260},[220,64459,1738],{"class":420},[220,64461,1741],{"class":260},[220,64463,1744],{"class":260},[220,64465,1747],{"class":226},[220,64467,1750],{"class":264},[220,64469,64470],{"class":222,"line":399},[220,64471,1765],{"class":264},[220,64473,64474,64476,64479,64481,64483,64485,64487],{"class":222,"line":644},[220,64475,1770],{"class":264},[220,64477,64478],{"class":230},"'PolarCoordinates'",[220,64480,7541],{"class":264},[220,64482,8677],{"class":420},[220,64484,45003],{"class":264},[220,64486,8677],{"class":420},[220,64488,7546],{"class":264},[220,64490,64491,64493,64495],{"class":222,"line":650},[220,64492,7014],{"class":264},[220,64494,3206],{"class":230},[220,64496,2465],{"class":264},[220,64498,64499],{"class":222,"line":656},[220,64500,7031],{"class":264},[220,64502,64503],{"class":222,"line":673},[220,64504,1787],{"class":264},[220,64506,64507],{"class":222,"line":682},[220,64508,1792],{"class":264},[1504,64510,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64512},[64513,64514],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":64144,"description":64152},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":64521,"title":64522,"body":64523,"category":15908,"componentType":25877,"description":64530,"extension":191,"meta":64807,"navigation":194,"path":64808,"requiresChild":32530,"seo":64809,"stem":64810,"__hash__":64811},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":64524,"toc":64803},[64525,64528,64531,64533,64535,64538,64540,64801],[11,64526,64522],{"id":64527},"polygon",[15,64529,64530],{},"Regular polygon with adjustable sides and corner rounding",[31911,64532],{"component":64522},[23,64534,31915],{"id":26533},[31917,64536],{":props":64537},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,64539,31923],{"id":31922},[246,64541,64542,64590,64641,64689,64739],{":tabs":1557},[212,64543,64545],{"className":334,"code":64544,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,64546,64547,64555,64562,64570,64578,64582],{"__ignoreMap":178},[220,64548,64549,64551,64553],{"class":222,"line":223},[220,64550,343],{"class":264},[220,64552,347],{"class":346},[220,64554,359],{"class":264},[220,64556,64557,64559],{"class":222,"line":179},[220,64558,364],{"class":264},[220,64560,64561],{"class":346},"Polygon\n",[220,64563,64564,64566,64568],{"class":222,"line":389},[220,64565,9635],{"class":226},[220,64567,353],{"class":264},[220,64569,9591],{"class":230},[220,64571,64572,64574,64576],{"class":222,"line":399},[220,64573,17405],{"class":226},[220,64575,353],{"class":264},[220,64577,48148],{"class":230},[220,64579,64580],{"class":222,"line":644},[220,64581,1234],{"class":264},[220,64583,64584,64586,64588],{"class":222,"line":650},[220,64585,402],{"class":264},[220,64587,347],{"class":346},[220,64589,359],{"class":264},[212,64591,64593],{"className":409,"code":64592,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,64594,64595,64603,64609,64617,64629,64633],{"__ignoreMap":178},[220,64596,64597,64599,64601],{"class":222,"line":223},[220,64598,343],{"class":264},[220,64600,347],{"class":420},[220,64602,359],{"class":264},[220,64604,64605,64607],{"class":222,"line":179},[220,64606,364],{"class":264},[220,64608,64561],{"class":420},[220,64610,64611,64613,64615],{"class":222,"line":389},[220,64612,9635],{"class":226},[220,64614,353],{"class":260},[220,64616,9591],{"class":230},[220,64618,64619,64621,64623,64625,64627],{"class":222,"line":399},[220,64620,9645],{"class":226},[220,64622,353],{"class":260},[220,64624,743],{"class":264},[220,64626,8249],{"class":420},[220,64628,749],{"class":264},[220,64630,64631],{"class":222,"line":644},[220,64632,1234],{"class":264},[220,64634,64635,64637,64639],{"class":222,"line":650},[220,64636,402],{"class":264},[220,64638,347],{"class":420},[220,64640,359],{"class":264},[212,64642,64643],{"className":2844,"code":64592,"language":2846,"meta":178,"style":178},[99,64644,64645,64653,64659,64667,64677,64681],{"__ignoreMap":178},[220,64646,64647,64649,64651],{"class":222,"line":223},[220,64648,343],{"class":264},[220,64650,347],{"class":420},[220,64652,359],{"class":264},[220,64654,64655,64657],{"class":222,"line":179},[220,64656,364],{"class":264},[220,64658,64561],{"class":420},[220,64660,64661,64663,64665],{"class":222,"line":389},[220,64662,9635],{"class":226},[220,64664,353],{"class":264},[220,64666,9591],{"class":230},[220,64668,64669,64671,64673,64675],{"class":222,"line":399},[220,64670,9645],{"class":226},[220,64672,29871],{"class":264},[220,64674,8249],{"class":420},[220,64676,749],{"class":264},[220,64678,64679],{"class":222,"line":644},[220,64680,1234],{"class":264},[220,64682,64683,64685,64687],{"class":222,"line":650},[220,64684,402],{"class":264},[220,64686,347],{"class":420},[220,64688,359],{"class":264},[212,64690,64691],{"className":468,"code":64592,"language":469,"meta":178,"style":178},[99,64692,64693,64701,64707,64715,64727,64731],{"__ignoreMap":178},[220,64694,64695,64697,64699],{"class":222,"line":223},[220,64696,343],{"class":264},[220,64698,347],{"class":420},[220,64700,359],{"class":264},[220,64702,64703,64705],{"class":222,"line":179},[220,64704,364],{"class":264},[220,64706,64561],{"class":420},[220,64708,64709,64711,64713],{"class":222,"line":389},[220,64710,9635],{"class":226},[220,64712,353],{"class":260},[220,64714,9591],{"class":230},[220,64716,64717,64719,64721,64723,64725],{"class":222,"line":399},[220,64718,9645],{"class":226},[220,64720,353],{"class":260},[220,64722,743],{"class":264},[220,64724,8249],{"class":420},[220,64726,749],{"class":264},[220,64728,64729],{"class":222,"line":644},[220,64730,1234],{"class":264},[220,64732,64733,64735,64737],{"class":222,"line":650},[220,64734,402],{"class":264},[220,64736,347],{"class":420},[220,64738,359],{"class":264},[212,64740,64742],{"className":251,"code":64741,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Polygon', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[99,64743,64744,64754,64758,64772,64776,64793,64797],{"__ignoreMap":178},[220,64745,64746,64748,64750,64752],{"class":222,"line":223},[220,64747,261],{"class":260},[220,64749,11512],{"class":264},[220,64751,268],{"class":260},[220,64753,4007],{"class":230},[220,64755,64756],{"class":222,"line":179},[220,64757,647],{"emptyLinePlaceholder":194},[220,64759,64760,64762,64764,64766,64768,64770],{"class":222,"line":389},[220,64761,1735],{"class":260},[220,64763,1738],{"class":420},[220,64765,1741],{"class":260},[220,64767,1744],{"class":260},[220,64769,1747],{"class":226},[220,64771,1750],{"class":264},[220,64773,64774],{"class":222,"line":399},[220,64775,1765],{"class":264},[220,64777,64778,64780,64783,64785,64787,64789,64791],{"class":222,"line":644},[220,64779,1770],{"class":264},[220,64781,64782],{"class":230},"'Polygon'",[220,64784,1776],{"class":264},[220,64786,10169],{"class":230},[220,64788,6566],{"class":264},[220,64790,8249],{"class":420},[220,64792,1782],{"class":264},[220,64794,64795],{"class":222,"line":650},[220,64796,1787],{"class":264},[220,64798,64799],{"class":222,"line":656},[220,64800,1792],{"class":264},[1504,64802,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64804},[64805,64806],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":64522,"description":64530},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":64813,"title":64814,"body":64815,"category":36368,"componentType":25883,"description":64822,"extension":191,"meta":65140,"navigation":194,"path":65141,"requiresChild":194,"seo":65142,"stem":65143,"__hash__":65144},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":64816,"toc":65136},[64817,64820,64823,64825,64827,64830,64832,65134],[11,64818,64814],{"id":64819},"posterize",[15,64821,64822],{},"Reduce color depth to create a poster effect",[31911,64824],{"component":64814},[23,64826,31915],{"id":26533},[31917,64828],{":props":64829},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,64831,31923],{"id":31922},[246,64833,64834,64891,64950,65006,65064],{":tabs":1557},[212,64835,64837],{"className":334,"code":64836,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64838,64839,64847,64854,64863,64867,64875,64883],{"__ignoreMap":178},[220,64840,64841,64843,64845],{"class":222,"line":223},[220,64842,343],{"class":264},[220,64844,347],{"class":346},[220,64846,359],{"class":264},[220,64848,64849,64851],{"class":222,"line":179},[220,64850,364],{"class":264},[220,64852,64853],{"class":346},"Posterize\n",[220,64855,64856,64858,64860],{"class":222,"line":389},[220,64857,20371],{"class":226},[220,64859,353],{"class":264},[220,64861,64862],{"class":230},"\"5\"\n",[220,64864,64865],{"class":222,"line":399},[220,64866,31959],{"class":264},[220,64868,64869,64871,64873],{"class":222,"line":644},[220,64870,2550],{"class":264},[220,64872,2553],{"class":346},[220,64874,386],{"class":264},[220,64876,64877,64879,64881],{"class":222,"line":650},[220,64878,2567],{"class":264},[220,64880,64814],{"class":346},[220,64882,359],{"class":264},[220,64884,64885,64887,64889],{"class":222,"line":656},[220,64886,402],{"class":264},[220,64888,347],{"class":346},[220,64890,359],{"class":264},[212,64892,64894],{"className":409,"code":64893,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64895,64896,64904,64910,64922,64926,64934,64942],{"__ignoreMap":178},[220,64897,64898,64900,64902],{"class":222,"line":223},[220,64899,343],{"class":264},[220,64901,347],{"class":420},[220,64903,359],{"class":264},[220,64905,64906,64908],{"class":222,"line":179},[220,64907,364],{"class":264},[220,64909,64853],{"class":420},[220,64911,64912,64914,64916,64918,64920],{"class":222,"line":389},[220,64913,20482],{"class":226},[220,64915,353],{"class":260},[220,64917,743],{"class":264},[220,64919,22093],{"class":420},[220,64921,749],{"class":264},[220,64923,64924],{"class":222,"line":399},[220,64925,31959],{"class":264},[220,64927,64928,64930,64932],{"class":222,"line":644},[220,64929,2550],{"class":264},[220,64931,2553],{"class":420},[220,64933,386],{"class":264},[220,64935,64936,64938,64940],{"class":222,"line":650},[220,64937,2567],{"class":264},[220,64939,64814],{"class":420},[220,64941,359],{"class":264},[220,64943,64944,64946,64948],{"class":222,"line":656},[220,64945,402],{"class":264},[220,64947,347],{"class":420},[220,64949,359],{"class":264},[212,64951,64952],{"className":2844,"code":64893,"language":2846,"meta":178,"style":178},[99,64953,64954,64962,64968,64978,64982,64990,64998],{"__ignoreMap":178},[220,64955,64956,64958,64960],{"class":222,"line":223},[220,64957,343],{"class":264},[220,64959,347],{"class":420},[220,64961,359],{"class":264},[220,64963,64964,64966],{"class":222,"line":179},[220,64965,364],{"class":264},[220,64967,64853],{"class":420},[220,64969,64970,64972,64974,64976],{"class":222,"line":389},[220,64971,20482],{"class":226},[220,64973,29871],{"class":264},[220,64975,22093],{"class":420},[220,64977,749],{"class":264},[220,64979,64980],{"class":222,"line":399},[220,64981,31959],{"class":264},[220,64983,64984,64986,64988],{"class":222,"line":644},[220,64985,2550],{"class":264},[220,64987,2553],{"class":420},[220,64989,386],{"class":264},[220,64991,64992,64994,64996],{"class":222,"line":650},[220,64993,2567],{"class":264},[220,64995,64814],{"class":420},[220,64997,359],{"class":264},[220,64999,65000,65002,65004],{"class":222,"line":656},[220,65001,402],{"class":264},[220,65003,347],{"class":420},[220,65005,359],{"class":264},[212,65007,65008],{"className":468,"code":64893,"language":469,"meta":178,"style":178},[99,65009,65010,65018,65024,65036,65040,65048,65056],{"__ignoreMap":178},[220,65011,65012,65014,65016],{"class":222,"line":223},[220,65013,343],{"class":264},[220,65015,347],{"class":420},[220,65017,359],{"class":264},[220,65019,65020,65022],{"class":222,"line":179},[220,65021,364],{"class":264},[220,65023,64853],{"class":420},[220,65025,65026,65028,65030,65032,65034],{"class":222,"line":389},[220,65027,20482],{"class":226},[220,65029,353],{"class":260},[220,65031,743],{"class":264},[220,65033,22093],{"class":420},[220,65035,749],{"class":264},[220,65037,65038],{"class":222,"line":399},[220,65039,31959],{"class":264},[220,65041,65042,65044,65046],{"class":222,"line":644},[220,65043,2550],{"class":264},[220,65045,2553],{"class":420},[220,65047,386],{"class":264},[220,65049,65050,65052,65054],{"class":222,"line":650},[220,65051,2567],{"class":264},[220,65053,64814],{"class":420},[220,65055,359],{"class":264},[220,65057,65058,65060,65062],{"class":222,"line":656},[220,65059,402],{"class":264},[220,65061,347],{"class":420},[220,65063,359],{"class":264},[212,65065,65067],{"className":251,"code":65066,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Posterize', props: { intensity: 5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,65068,65069,65079,65083,65097,65101,65114,65122,65126,65130],{"__ignoreMap":178},[220,65070,65071,65073,65075,65077],{"class":222,"line":223},[220,65072,261],{"class":260},[220,65074,11512],{"class":264},[220,65076,268],{"class":260},[220,65078,4007],{"class":230},[220,65080,65081],{"class":222,"line":179},[220,65082,647],{"emptyLinePlaceholder":194},[220,65084,65085,65087,65089,65091,65093,65095],{"class":222,"line":389},[220,65086,1735],{"class":260},[220,65088,1738],{"class":420},[220,65090,1741],{"class":260},[220,65092,1744],{"class":260},[220,65094,1747],{"class":226},[220,65096,1750],{"class":264},[220,65098,65099],{"class":222,"line":399},[220,65100,1765],{"class":264},[220,65102,65103,65105,65108,65110,65112],{"class":222,"line":644},[220,65104,1770],{"class":264},[220,65106,65107],{"class":230},"'Posterize'",[220,65109,32203],{"class":264},[220,65111,22093],{"class":420},[220,65113,7546],{"class":264},[220,65115,65116,65118,65120],{"class":222,"line":650},[220,65117,7014],{"class":264},[220,65119,3206],{"class":230},[220,65121,2465],{"class":264},[220,65123,65124],{"class":222,"line":656},[220,65125,7031],{"class":264},[220,65127,65128],{"class":222,"line":673},[220,65129,1787],{"class":264},[220,65131,65132],{"class":222,"line":682},[220,65133,1792],{"class":264},[1504,65135,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65137},[65138,65139],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":64814,"description":64822},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":65146,"title":65147,"body":65148,"category":33063,"componentType":25877,"description":65155,"extension":191,"meta":65398,"navigation":194,"path":65399,"requiresChild":32530,"seo":65400,"stem":65401,"__hash__":65402},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":65149,"toc":65394},[65150,65153,65156,65158,65160,65163,65165,65392],[11,65151,65147],{"id":65152},"prism",[15,65154,65155],{},"A beam of light that fans out and splits into a slowly-rotating rainbow past a controllable point. Transparent background — composite over a dark layer.",[31911,65157],{"component":65147},[23,65159,31915],{"id":26533},[31917,65161],{":props":65162},"[{\"name\":\"position\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.18,\\\"y\\\":0.18}\",\"description\":\"Where the beam originates\"},{\"name\":\"beamWidth\",\"type\":\"number\",\"default\":\"0.04\",\"description\":\"Thickness of the white beam\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1.6\",\"description\":\"Brightness (above 1 blows the core to white)\"},{\"name\":\"beamColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Colour of the beam before it splits\"},{\"name\":\"startFalloff\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly the beam fades in at its source\"},{\"name\":\"endFalloff\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How quickly the rainbow fades out with distance\"},{\"name\":\"splitPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.42}\",\"description\":\"Where the beam starts to fan out and split (projected onto the beam axis)\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"How widely the rainbow diffuses as it travels past the split point\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"How quickly the white beam transitions into the rainbow\"},{\"name\":\"saturation\",\"type\":\"number\",\"default\":\"0.95\",\"description\":\"Rainbow saturation — 0 = white, 1 = full colour\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Speed the hue slowly rotates through the rainbow (0 = static)\"}]",[23,65164,31923],{"id":31922},[246,65166,65167,65208,65252,65292,65334],{":tabs":1557},[212,65168,65170],{"className":334,"code":65169,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,65171,65172,65180,65187,65196,65200],{"__ignoreMap":178},[220,65173,65174,65176,65178],{"class":222,"line":223},[220,65175,343],{"class":264},[220,65177,347],{"class":346},[220,65179,359],{"class":264},[220,65181,65182,65184],{"class":222,"line":179},[220,65183,364],{"class":264},[220,65185,65186],{"class":346},"Prism\n",[220,65188,65189,65191,65193],{"class":222,"line":389},[220,65190,20371],{"class":226},[220,65192,353],{"class":264},[220,65194,65195],{"class":230},"\"1.6\"\n",[220,65197,65198],{"class":222,"line":399},[220,65199,1234],{"class":264},[220,65201,65202,65204,65206],{"class":222,"line":644},[220,65203,402],{"class":264},[220,65205,347],{"class":346},[220,65207,359],{"class":264},[212,65209,65211],{"className":409,"code":65210,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,65212,65213,65221,65227,65240,65244],{"__ignoreMap":178},[220,65214,65215,65217,65219],{"class":222,"line":223},[220,65216,343],{"class":264},[220,65218,347],{"class":420},[220,65220,359],{"class":264},[220,65222,65223,65225],{"class":222,"line":179},[220,65224,364],{"class":264},[220,65226,65186],{"class":420},[220,65228,65229,65231,65233,65235,65238],{"class":222,"line":389},[220,65230,20482],{"class":226},[220,65232,353],{"class":260},[220,65234,743],{"class":264},[220,65236,65237],{"class":420},"1.6",[220,65239,749],{"class":264},[220,65241,65242],{"class":222,"line":399},[220,65243,1234],{"class":264},[220,65245,65246,65248,65250],{"class":222,"line":644},[220,65247,402],{"class":264},[220,65249,347],{"class":420},[220,65251,359],{"class":264},[212,65253,65254],{"className":2844,"code":65210,"language":2846,"meta":178,"style":178},[99,65255,65256,65264,65270,65280,65284],{"__ignoreMap":178},[220,65257,65258,65260,65262],{"class":222,"line":223},[220,65259,343],{"class":264},[220,65261,347],{"class":420},[220,65263,359],{"class":264},[220,65265,65266,65268],{"class":222,"line":179},[220,65267,364],{"class":264},[220,65269,65186],{"class":420},[220,65271,65272,65274,65276,65278],{"class":222,"line":389},[220,65273,20482],{"class":226},[220,65275,29871],{"class":264},[220,65277,65237],{"class":420},[220,65279,749],{"class":264},[220,65281,65282],{"class":222,"line":399},[220,65283,1234],{"class":264},[220,65285,65286,65288,65290],{"class":222,"line":644},[220,65287,402],{"class":264},[220,65289,347],{"class":420},[220,65291,359],{"class":264},[212,65293,65294],{"className":468,"code":65210,"language":469,"meta":178,"style":178},[99,65295,65296,65304,65310,65322,65326],{"__ignoreMap":178},[220,65297,65298,65300,65302],{"class":222,"line":223},[220,65299,343],{"class":264},[220,65301,347],{"class":420},[220,65303,359],{"class":264},[220,65305,65306,65308],{"class":222,"line":179},[220,65307,364],{"class":264},[220,65309,65186],{"class":420},[220,65311,65312,65314,65316,65318,65320],{"class":222,"line":389},[220,65313,20482],{"class":226},[220,65315,353],{"class":260},[220,65317,743],{"class":264},[220,65319,65237],{"class":420},[220,65321,749],{"class":264},[220,65323,65324],{"class":222,"line":399},[220,65325,1234],{"class":264},[220,65327,65328,65330,65332],{"class":222,"line":644},[220,65329,402],{"class":264},[220,65331,347],{"class":420},[220,65333,359],{"class":264},[212,65335,65337],{"className":251,"code":65336,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Prism', props: { intensity: 1.6 } }\n ]\n})\n",[99,65338,65339,65349,65353,65367,65371,65384,65388],{"__ignoreMap":178},[220,65340,65341,65343,65345,65347],{"class":222,"line":223},[220,65342,261],{"class":260},[220,65344,11512],{"class":264},[220,65346,268],{"class":260},[220,65348,4007],{"class":230},[220,65350,65351],{"class":222,"line":179},[220,65352,647],{"emptyLinePlaceholder":194},[220,65354,65355,65357,65359,65361,65363,65365],{"class":222,"line":389},[220,65356,1735],{"class":260},[220,65358,1738],{"class":420},[220,65360,1741],{"class":260},[220,65362,1744],{"class":260},[220,65364,1747],{"class":226},[220,65366,1750],{"class":264},[220,65368,65369],{"class":222,"line":399},[220,65370,1765],{"class":264},[220,65372,65373,65375,65378,65380,65382],{"class":222,"line":644},[220,65374,1770],{"class":264},[220,65376,65377],{"class":230},"'Prism'",[220,65379,32203],{"class":264},[220,65381,65237],{"class":420},[220,65383,1782],{"class":264},[220,65385,65386],{"class":222,"line":650},[220,65387,1787],{"class":264},[220,65389,65390],{"class":222,"line":656},[220,65391,1792],{"class":264},[1504,65393,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65395},[65396,65397],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":65147,"description":65155},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":65404,"title":65405,"body":65406,"category":32234,"componentType":25883,"description":65413,"extension":191,"meta":65730,"navigation":194,"path":65731,"requiresChild":194,"seo":65732,"stem":65733,"__hash__":65734},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":65407,"toc":65726},[65408,65411,65414,65416,65418,65421,65423,65724],[11,65409,65405],{"id":65410},"progressiveblur",[15,65412,65413],{},"Blur that increases progressively in one direction",[31911,65415],{"component":65405},[23,65417,31915],{"id":26533},[31917,65419],{":props":65420},"[{\"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,65422,31923],{"id":31922},[246,65424,65425,65481,65540,65596,65654],{":tabs":1557},[212,65426,65428],{"className":334,"code":65427,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65429,65430,65438,65445,65453,65457,65465,65473],{"__ignoreMap":178},[220,65431,65432,65434,65436],{"class":222,"line":223},[220,65433,343],{"class":264},[220,65435,347],{"class":346},[220,65437,359],{"class":264},[220,65439,65440,65442],{"class":222,"line":179},[220,65441,364],{"class":264},[220,65443,65444],{"class":346},"ProgressiveBlur\n",[220,65446,65447,65449,65451],{"class":222,"line":389},[220,65448,20371],{"class":226},[220,65450,353],{"class":264},[220,65452,35080],{"class":230},[220,65454,65455],{"class":222,"line":399},[220,65456,31959],{"class":264},[220,65458,65459,65461,65463],{"class":222,"line":644},[220,65460,2550],{"class":264},[220,65462,2553],{"class":346},[220,65464,386],{"class":264},[220,65466,65467,65469,65471],{"class":222,"line":650},[220,65468,2567],{"class":264},[220,65470,65405],{"class":346},[220,65472,359],{"class":264},[220,65474,65475,65477,65479],{"class":222,"line":656},[220,65476,402],{"class":264},[220,65478,347],{"class":346},[220,65480,359],{"class":264},[212,65482,65484],{"className":409,"code":65483,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65485,65486,65494,65500,65512,65516,65524,65532],{"__ignoreMap":178},[220,65487,65488,65490,65492],{"class":222,"line":223},[220,65489,343],{"class":264},[220,65491,347],{"class":420},[220,65493,359],{"class":264},[220,65495,65496,65498],{"class":222,"line":179},[220,65497,364],{"class":264},[220,65499,65444],{"class":420},[220,65501,65502,65504,65506,65508,65510],{"class":222,"line":389},[220,65503,20482],{"class":226},[220,65505,353],{"class":260},[220,65507,743],{"class":264},[220,65509,35138],{"class":420},[220,65511,749],{"class":264},[220,65513,65514],{"class":222,"line":399},[220,65515,31959],{"class":264},[220,65517,65518,65520,65522],{"class":222,"line":644},[220,65519,2550],{"class":264},[220,65521,2553],{"class":420},[220,65523,386],{"class":264},[220,65525,65526,65528,65530],{"class":222,"line":650},[220,65527,2567],{"class":264},[220,65529,65405],{"class":420},[220,65531,359],{"class":264},[220,65533,65534,65536,65538],{"class":222,"line":656},[220,65535,402],{"class":264},[220,65537,347],{"class":420},[220,65539,359],{"class":264},[212,65541,65542],{"className":2844,"code":65483,"language":2846,"meta":178,"style":178},[99,65543,65544,65552,65558,65568,65572,65580,65588],{"__ignoreMap":178},[220,65545,65546,65548,65550],{"class":222,"line":223},[220,65547,343],{"class":264},[220,65549,347],{"class":420},[220,65551,359],{"class":264},[220,65553,65554,65556],{"class":222,"line":179},[220,65555,364],{"class":264},[220,65557,65444],{"class":420},[220,65559,65560,65562,65564,65566],{"class":222,"line":389},[220,65561,20482],{"class":226},[220,65563,29871],{"class":264},[220,65565,35138],{"class":420},[220,65567,749],{"class":264},[220,65569,65570],{"class":222,"line":399},[220,65571,31959],{"class":264},[220,65573,65574,65576,65578],{"class":222,"line":644},[220,65575,2550],{"class":264},[220,65577,2553],{"class":420},[220,65579,386],{"class":264},[220,65581,65582,65584,65586],{"class":222,"line":650},[220,65583,2567],{"class":264},[220,65585,65405],{"class":420},[220,65587,359],{"class":264},[220,65589,65590,65592,65594],{"class":222,"line":656},[220,65591,402],{"class":264},[220,65593,347],{"class":420},[220,65595,359],{"class":264},[212,65597,65598],{"className":468,"code":65483,"language":469,"meta":178,"style":178},[99,65599,65600,65608,65614,65626,65630,65638,65646],{"__ignoreMap":178},[220,65601,65602,65604,65606],{"class":222,"line":223},[220,65603,343],{"class":264},[220,65605,347],{"class":420},[220,65607,359],{"class":264},[220,65609,65610,65612],{"class":222,"line":179},[220,65611,364],{"class":264},[220,65613,65444],{"class":420},[220,65615,65616,65618,65620,65622,65624],{"class":222,"line":389},[220,65617,20482],{"class":226},[220,65619,353],{"class":260},[220,65621,743],{"class":264},[220,65623,35138],{"class":420},[220,65625,749],{"class":264},[220,65627,65628],{"class":222,"line":399},[220,65629,31959],{"class":264},[220,65631,65632,65634,65636],{"class":222,"line":644},[220,65633,2550],{"class":264},[220,65635,2553],{"class":420},[220,65637,386],{"class":264},[220,65639,65640,65642,65644],{"class":222,"line":650},[220,65641,2567],{"class":264},[220,65643,65405],{"class":420},[220,65645,359],{"class":264},[220,65647,65648,65650,65652],{"class":222,"line":656},[220,65649,402],{"class":264},[220,65651,347],{"class":420},[220,65653,359],{"class":264},[212,65655,65657],{"className":251,"code":65656,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ProgressiveBlur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,65658,65659,65669,65673,65687,65691,65704,65712,65716,65720],{"__ignoreMap":178},[220,65660,65661,65663,65665,65667],{"class":222,"line":223},[220,65662,261],{"class":260},[220,65664,11512],{"class":264},[220,65666,268],{"class":260},[220,65668,4007],{"class":230},[220,65670,65671],{"class":222,"line":179},[220,65672,647],{"emptyLinePlaceholder":194},[220,65674,65675,65677,65679,65681,65683,65685],{"class":222,"line":389},[220,65676,1735],{"class":260},[220,65678,1738],{"class":420},[220,65680,1741],{"class":260},[220,65682,1744],{"class":260},[220,65684,1747],{"class":226},[220,65686,1750],{"class":264},[220,65688,65689],{"class":222,"line":399},[220,65690,1765],{"class":264},[220,65692,65693,65695,65698,65700,65702],{"class":222,"line":644},[220,65694,1770],{"class":264},[220,65696,65697],{"class":230},"'ProgressiveBlur'",[220,65699,32203],{"class":264},[220,65701,35138],{"class":420},[220,65703,7546],{"class":264},[220,65705,65706,65708,65710],{"class":222,"line":650},[220,65707,7014],{"class":264},[220,65709,3206],{"class":230},[220,65711,2465],{"class":264},[220,65713,65714],{"class":222,"line":656},[220,65715,7031],{"class":264},[220,65717,65718],{"class":222,"line":673},[220,65719,1787],{"class":264},[220,65721,65722],{"class":222,"line":682},[220,65723,1792],{"class":264},[1504,65725,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65727},[65728,65729],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":65405,"description":65413},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":65736,"title":65737,"body":65738,"category":33063,"componentType":25877,"description":65745,"extension":191,"meta":65986,"navigation":194,"path":65987,"requiresChild":32530,"seo":65988,"stem":65989,"__hash__":65990},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":65739,"toc":65982},[65740,65743,65746,65748,65750,65753,65755,65980],[11,65741,65737],{"id":65742},"radialgradient",[15,65744,65745],{},"Radial gradient radiating from a center point",[31911,65747],{"component":65737},[23,65749,31915],{"id":26533},[31917,65751],{":props":65752},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,65754,31923],{"id":31922},[246,65756,65757,65797,65840,65880,65922],{":tabs":1557},[212,65758,65760],{"className":334,"code":65759,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,65761,65762,65770,65777,65785,65789],{"__ignoreMap":178},[220,65763,65764,65766,65768],{"class":222,"line":223},[220,65765,343],{"class":264},[220,65767,347],{"class":346},[220,65769,359],{"class":264},[220,65771,65772,65774],{"class":222,"line":179},[220,65773,364],{"class":264},[220,65775,65776],{"class":346},"RadialGradient\n",[220,65778,65779,65781,65783],{"class":222,"line":389},[220,65780,17405],{"class":226},[220,65782,353],{"class":264},[220,65784,36625],{"class":230},[220,65786,65787],{"class":222,"line":399},[220,65788,1234],{"class":264},[220,65790,65791,65793,65795],{"class":222,"line":644},[220,65792,402],{"class":264},[220,65794,347],{"class":346},[220,65796,359],{"class":264},[212,65798,65800],{"className":409,"code":65799,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,65801,65802,65810,65816,65828,65832],{"__ignoreMap":178},[220,65803,65804,65806,65808],{"class":222,"line":223},[220,65805,343],{"class":264},[220,65807,347],{"class":420},[220,65809,359],{"class":264},[220,65811,65812,65814],{"class":222,"line":179},[220,65813,364],{"class":264},[220,65815,65776],{"class":420},[220,65817,65818,65820,65822,65824,65826],{"class":222,"line":389},[220,65819,9645],{"class":226},[220,65821,353],{"class":260},[220,65823,743],{"class":264},[220,65825,8677],{"class":420},[220,65827,749],{"class":264},[220,65829,65830],{"class":222,"line":399},[220,65831,1234],{"class":264},[220,65833,65834,65836,65838],{"class":222,"line":644},[220,65835,402],{"class":264},[220,65837,347],{"class":420},[220,65839,359],{"class":264},[212,65841,65842],{"className":2844,"code":65799,"language":2846,"meta":178,"style":178},[99,65843,65844,65852,65858,65868,65872],{"__ignoreMap":178},[220,65845,65846,65848,65850],{"class":222,"line":223},[220,65847,343],{"class":264},[220,65849,347],{"class":420},[220,65851,359],{"class":264},[220,65853,65854,65856],{"class":222,"line":179},[220,65855,364],{"class":264},[220,65857,65776],{"class":420},[220,65859,65860,65862,65864,65866],{"class":222,"line":389},[220,65861,9645],{"class":226},[220,65863,29871],{"class":264},[220,65865,8677],{"class":420},[220,65867,749],{"class":264},[220,65869,65870],{"class":222,"line":399},[220,65871,1234],{"class":264},[220,65873,65874,65876,65878],{"class":222,"line":644},[220,65875,402],{"class":264},[220,65877,347],{"class":420},[220,65879,359],{"class":264},[212,65881,65882],{"className":468,"code":65799,"language":469,"meta":178,"style":178},[99,65883,65884,65892,65898,65910,65914],{"__ignoreMap":178},[220,65885,65886,65888,65890],{"class":222,"line":223},[220,65887,343],{"class":264},[220,65889,347],{"class":420},[220,65891,359],{"class":264},[220,65893,65894,65896],{"class":222,"line":179},[220,65895,364],{"class":264},[220,65897,65776],{"class":420},[220,65899,65900,65902,65904,65906,65908],{"class":222,"line":389},[220,65901,9645],{"class":226},[220,65903,353],{"class":260},[220,65905,743],{"class":264},[220,65907,8677],{"class":420},[220,65909,749],{"class":264},[220,65911,65912],{"class":222,"line":399},[220,65913,1234],{"class":264},[220,65915,65916,65918,65920],{"class":222,"line":644},[220,65917,402],{"class":264},[220,65919,347],{"class":420},[220,65921,359],{"class":264},[212,65923,65925],{"className":251,"code":65924,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RadialGradient', props: { radius: 1 } }\n ]\n})\n",[99,65926,65927,65937,65941,65955,65959,65972,65976],{"__ignoreMap":178},[220,65928,65929,65931,65933,65935],{"class":222,"line":223},[220,65930,261],{"class":260},[220,65932,11512],{"class":264},[220,65934,268],{"class":260},[220,65936,4007],{"class":230},[220,65938,65939],{"class":222,"line":179},[220,65940,647],{"emptyLinePlaceholder":194},[220,65942,65943,65945,65947,65949,65951,65953],{"class":222,"line":389},[220,65944,1735],{"class":260},[220,65946,1738],{"class":420},[220,65948,1741],{"class":260},[220,65950,1744],{"class":260},[220,65952,1747],{"class":226},[220,65954,1750],{"class":264},[220,65956,65957],{"class":222,"line":399},[220,65958,1765],{"class":264},[220,65960,65961,65963,65966,65968,65970],{"class":222,"line":644},[220,65962,1770],{"class":264},[220,65964,65965],{"class":230},"'RadialGradient'",[220,65967,7541],{"class":264},[220,65969,8677],{"class":420},[220,65971,1782],{"class":264},[220,65973,65974],{"class":222,"line":650},[220,65975,1787],{"class":264},[220,65977,65978],{"class":222,"line":656},[220,65979,1792],{"class":264},[1504,65981,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65983},[65984,65985],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":65737,"description":65745},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":65992,"title":65993,"body":65994,"category":33673,"componentType":25883,"description":66001,"extension":191,"meta":66262,"navigation":194,"path":66263,"requiresChild":194,"seo":66264,"stem":66265,"__hash__":66266},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":65995,"toc":66258},[65996,65999,66002,66004,66006,66009,66011,66256],[11,65997,65993],{"id":65998},"radialwipe",[15,66000,66001],{},"Sweep the content away in a clock-hand arc around a center point",[31911,66003],{"component":65993},[23,66005,31915],{"id":26533},[31917,66007],{":props":66008},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the sweep has travelled (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"startAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle in degrees where the sweep begins\"},{\"name\":\"direction\",\"type\":\"\\\"cw\\\" | \\\"ccw\\\" | \\\"both\\\"\",\"default\":\"cw\",\"description\":\"Which way the sweep rotates\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the sweep rotates around\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the sweeping edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse which side of the sweep is wiped\"}]",[23,66010,31923],{"id":31922},[246,66012,66013,66058,66102,66146,66190],{":tabs":1557},[212,66014,66016],{"className":334,"code":66015,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,66017,66018,66026,66034,66042,66050],{"__ignoreMap":178},[220,66019,66020,66022,66024],{"class":222,"line":223},[220,66021,343],{"class":264},[220,66023,347],{"class":346},[220,66025,359],{"class":264},[220,66027,66028,66030,66032],{"class":222,"line":179},[220,66029,364],{"class":264},[220,66031,65993],{"class":346},[220,66033,359],{"class":264},[220,66035,66036,66038,66040],{"class":222,"line":389},[220,66037,2550],{"class":264},[220,66039,2553],{"class":346},[220,66041,386],{"class":264},[220,66043,66044,66046,66048],{"class":222,"line":399},[220,66045,2567],{"class":264},[220,66047,65993],{"class":346},[220,66049,359],{"class":264},[220,66051,66052,66054,66056],{"class":222,"line":644},[220,66053,402],{"class":264},[220,66055,347],{"class":346},[220,66057,359],{"class":264},[212,66059,66060],{"className":409,"code":66015,"language":411,"meta":178,"style":178},[99,66061,66062,66070,66078,66086,66094],{"__ignoreMap":178},[220,66063,66064,66066,66068],{"class":222,"line":223},[220,66065,343],{"class":264},[220,66067,347],{"class":420},[220,66069,359],{"class":264},[220,66071,66072,66074,66076],{"class":222,"line":179},[220,66073,364],{"class":264},[220,66075,65993],{"class":420},[220,66077,359],{"class":264},[220,66079,66080,66082,66084],{"class":222,"line":389},[220,66081,2550],{"class":264},[220,66083,2553],{"class":420},[220,66085,386],{"class":264},[220,66087,66088,66090,66092],{"class":222,"line":399},[220,66089,2567],{"class":264},[220,66091,65993],{"class":420},[220,66093,359],{"class":264},[220,66095,66096,66098,66100],{"class":222,"line":644},[220,66097,402],{"class":264},[220,66099,347],{"class":420},[220,66101,359],{"class":264},[212,66103,66104],{"className":2844,"code":66015,"language":2846,"meta":178,"style":178},[99,66105,66106,66114,66122,66130,66138],{"__ignoreMap":178},[220,66107,66108,66110,66112],{"class":222,"line":223},[220,66109,343],{"class":264},[220,66111,347],{"class":420},[220,66113,359],{"class":264},[220,66115,66116,66118,66120],{"class":222,"line":179},[220,66117,364],{"class":264},[220,66119,65993],{"class":420},[220,66121,359],{"class":264},[220,66123,66124,66126,66128],{"class":222,"line":389},[220,66125,2550],{"class":264},[220,66127,2553],{"class":420},[220,66129,386],{"class":264},[220,66131,66132,66134,66136],{"class":222,"line":399},[220,66133,2567],{"class":264},[220,66135,65993],{"class":420},[220,66137,359],{"class":264},[220,66139,66140,66142,66144],{"class":222,"line":644},[220,66141,402],{"class":264},[220,66143,347],{"class":420},[220,66145,359],{"class":264},[212,66147,66148],{"className":468,"code":66015,"language":469,"meta":178,"style":178},[99,66149,66150,66158,66166,66174,66182],{"__ignoreMap":178},[220,66151,66152,66154,66156],{"class":222,"line":223},[220,66153,343],{"class":264},[220,66155,347],{"class":420},[220,66157,359],{"class":264},[220,66159,66160,66162,66164],{"class":222,"line":179},[220,66161,364],{"class":264},[220,66163,65993],{"class":420},[220,66165,359],{"class":264},[220,66167,66168,66170,66172],{"class":222,"line":389},[220,66169,2550],{"class":264},[220,66171,2553],{"class":420},[220,66173,386],{"class":264},[220,66175,66176,66178,66180],{"class":222,"line":399},[220,66177,2567],{"class":264},[220,66179,65993],{"class":420},[220,66181,359],{"class":264},[220,66183,66184,66186,66188],{"class":222,"line":644},[220,66185,402],{"class":264},[220,66187,347],{"class":420},[220,66189,359],{"class":264},[212,66191,66193],{"className":251,"code":66192,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RadialWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,66194,66195,66205,66209,66223,66227,66236,66244,66248,66252],{"__ignoreMap":178},[220,66196,66197,66199,66201,66203],{"class":222,"line":223},[220,66198,261],{"class":260},[220,66200,11512],{"class":264},[220,66202,268],{"class":260},[220,66204,4007],{"class":230},[220,66206,66207],{"class":222,"line":179},[220,66208,647],{"emptyLinePlaceholder":194},[220,66210,66211,66213,66215,66217,66219,66221],{"class":222,"line":389},[220,66212,1735],{"class":260},[220,66214,1738],{"class":420},[220,66216,1741],{"class":260},[220,66218,1744],{"class":260},[220,66220,1747],{"class":226},[220,66222,1750],{"class":264},[220,66224,66225],{"class":222,"line":399},[220,66226,1765],{"class":264},[220,66228,66229,66231,66234],{"class":222,"line":644},[220,66230,1770],{"class":264},[220,66232,66233],{"class":230},"'RadialWipe'",[220,66235,7009],{"class":264},[220,66237,66238,66240,66242],{"class":222,"line":650},[220,66239,7014],{"class":264},[220,66241,3206],{"class":230},[220,66243,2465],{"class":264},[220,66245,66246],{"class":222,"line":656},[220,66247,7031],{"class":264},[220,66249,66250],{"class":222,"line":673},[220,66251,1787],{"class":264},[220,66253,66254],{"class":222,"line":682},[220,66255,1792],{"class":264},[1504,66257,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66259},[66260,66261],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":65993,"description":66001},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":66268,"title":66269,"body":66270,"category":33673,"componentType":25883,"description":66277,"extension":191,"meta":66538,"navigation":194,"path":66539,"requiresChild":194,"seo":66540,"stem":66541,"__hash__":66542},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":66271,"toc":66534},[66272,66275,66278,66280,66282,66285,66287,66532],[11,66273,66269],{"id":66274},"randombars",[15,66276,66277],{},"Wipe the content away as parallel bars vanishing in random order",[31911,66279],{"component":66269},[23,66281,31915],{"id":26533},[31917,66283],{":props":66284},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the bars in degrees (0 = vertical bars)\"},{\"name\":\"barCount\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of bars across the frame\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each bar fades out (0 = hard-edged bars)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the bars vanish in\"}]",[23,66286,31923],{"id":31922},[246,66288,66289,66334,66378,66422,66466],{":tabs":1557},[212,66290,66292],{"className":334,"code":66291,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,66293,66294,66302,66310,66318,66326],{"__ignoreMap":178},[220,66295,66296,66298,66300],{"class":222,"line":223},[220,66297,343],{"class":264},[220,66299,347],{"class":346},[220,66301,359],{"class":264},[220,66303,66304,66306,66308],{"class":222,"line":179},[220,66305,364],{"class":264},[220,66307,66269],{"class":346},[220,66309,359],{"class":264},[220,66311,66312,66314,66316],{"class":222,"line":389},[220,66313,2550],{"class":264},[220,66315,2553],{"class":346},[220,66317,386],{"class":264},[220,66319,66320,66322,66324],{"class":222,"line":399},[220,66321,2567],{"class":264},[220,66323,66269],{"class":346},[220,66325,359],{"class":264},[220,66327,66328,66330,66332],{"class":222,"line":644},[220,66329,402],{"class":264},[220,66331,347],{"class":346},[220,66333,359],{"class":264},[212,66335,66336],{"className":409,"code":66291,"language":411,"meta":178,"style":178},[99,66337,66338,66346,66354,66362,66370],{"__ignoreMap":178},[220,66339,66340,66342,66344],{"class":222,"line":223},[220,66341,343],{"class":264},[220,66343,347],{"class":420},[220,66345,359],{"class":264},[220,66347,66348,66350,66352],{"class":222,"line":179},[220,66349,364],{"class":264},[220,66351,66269],{"class":420},[220,66353,359],{"class":264},[220,66355,66356,66358,66360],{"class":222,"line":389},[220,66357,2550],{"class":264},[220,66359,2553],{"class":420},[220,66361,386],{"class":264},[220,66363,66364,66366,66368],{"class":222,"line":399},[220,66365,2567],{"class":264},[220,66367,66269],{"class":420},[220,66369,359],{"class":264},[220,66371,66372,66374,66376],{"class":222,"line":644},[220,66373,402],{"class":264},[220,66375,347],{"class":420},[220,66377,359],{"class":264},[212,66379,66380],{"className":2844,"code":66291,"language":2846,"meta":178,"style":178},[99,66381,66382,66390,66398,66406,66414],{"__ignoreMap":178},[220,66383,66384,66386,66388],{"class":222,"line":223},[220,66385,343],{"class":264},[220,66387,347],{"class":420},[220,66389,359],{"class":264},[220,66391,66392,66394,66396],{"class":222,"line":179},[220,66393,364],{"class":264},[220,66395,66269],{"class":420},[220,66397,359],{"class":264},[220,66399,66400,66402,66404],{"class":222,"line":389},[220,66401,2550],{"class":264},[220,66403,2553],{"class":420},[220,66405,386],{"class":264},[220,66407,66408,66410,66412],{"class":222,"line":399},[220,66409,2567],{"class":264},[220,66411,66269],{"class":420},[220,66413,359],{"class":264},[220,66415,66416,66418,66420],{"class":222,"line":644},[220,66417,402],{"class":264},[220,66419,347],{"class":420},[220,66421,359],{"class":264},[212,66423,66424],{"className":468,"code":66291,"language":469,"meta":178,"style":178},[99,66425,66426,66434,66442,66450,66458],{"__ignoreMap":178},[220,66427,66428,66430,66432],{"class":222,"line":223},[220,66429,343],{"class":264},[220,66431,347],{"class":420},[220,66433,359],{"class":264},[220,66435,66436,66438,66440],{"class":222,"line":179},[220,66437,364],{"class":264},[220,66439,66269],{"class":420},[220,66441,359],{"class":264},[220,66443,66444,66446,66448],{"class":222,"line":389},[220,66445,2550],{"class":264},[220,66447,2553],{"class":420},[220,66449,386],{"class":264},[220,66451,66452,66454,66456],{"class":222,"line":399},[220,66453,2567],{"class":264},[220,66455,66269],{"class":420},[220,66457,359],{"class":264},[220,66459,66460,66462,66464],{"class":222,"line":644},[220,66461,402],{"class":264},[220,66463,347],{"class":420},[220,66465,359],{"class":264},[212,66467,66469],{"className":251,"code":66468,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RandomBars', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,66470,66471,66481,66485,66499,66503,66512,66520,66524,66528],{"__ignoreMap":178},[220,66472,66473,66475,66477,66479],{"class":222,"line":223},[220,66474,261],{"class":260},[220,66476,11512],{"class":264},[220,66478,268],{"class":260},[220,66480,4007],{"class":230},[220,66482,66483],{"class":222,"line":179},[220,66484,647],{"emptyLinePlaceholder":194},[220,66486,66487,66489,66491,66493,66495,66497],{"class":222,"line":389},[220,66488,1735],{"class":260},[220,66490,1738],{"class":420},[220,66492,1741],{"class":260},[220,66494,1744],{"class":260},[220,66496,1747],{"class":226},[220,66498,1750],{"class":264},[220,66500,66501],{"class":222,"line":399},[220,66502,1765],{"class":264},[220,66504,66505,66507,66510],{"class":222,"line":644},[220,66506,1770],{"class":264},[220,66508,66509],{"class":230},"'RandomBars'",[220,66511,7009],{"class":264},[220,66513,66514,66516,66518],{"class":222,"line":650},[220,66515,7014],{"class":264},[220,66517,3206],{"class":230},[220,66519,2465],{"class":264},[220,66521,66522],{"class":222,"line":656},[220,66523,7031],{"class":264},[220,66525,66526],{"class":222,"line":673},[220,66527,1787],{"class":264},[220,66529,66530],{"class":222,"line":682},[220,66531,1792],{"class":264},[1504,66533,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66535},[66536,66537],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":66269,"description":66277},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":66544,"title":66545,"body":66546,"category":35559,"componentType":25877,"description":66553,"extension":191,"meta":66738,"navigation":194,"path":66739,"requiresChild":32530,"seo":66740,"stem":66741,"__hash__":66742},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":66547,"toc":66734},[66548,66551,66554,66556,66558,66561,66563,66732],[11,66549,66545],{"id":66550},"reactiondiffusion",[15,66552,66553],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31911,66555],{"component":66545},[23,66557,31915],{"id":26533},[31917,66559],{":props":66560},"[{\"name\":\"preset\",\"type\":\"\\\"coral\\\" | \\\"mitosis\\\" | \\\"spots\\\" | \\\"maze\\\" | \\\"worms\\\" | \\\"fingerprints\\\" | \\\"holes\\\" | \\\"solitons\\\" | \\\"bubbles\\\" | \\\"waves\\\" | \\\"flowers\\\" | \\\"custom\\\"\",\"default\":\"coral\",\"description\":\"Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand\"},{\"name\":\"feed\",\"type\":\"number\",\"default\":\"0.0545\",\"description\":\"Feed rate — how fast chemical U is replenished (used when Pattern = Custom)\"},{\"name\":\"kill\",\"type\":\"number\",\"default\":\"0.062\",\"description\":\"Kill rate — how fast chemical V is removed (used when Pattern = Custom)\"},{\"name\":\"diffusionRatio\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)\"},{\"name\":\"featureSize\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Simulation steps per frame — higher evolves the pattern faster\"},{\"name\":\"brushSize\",\"type\":\"number\",\"default\":\"0.04\",\"description\":\"Radius of the cursor brush that seeds new reagent as you drag\"},{\"name\":\"brushStrength\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How much reagent the cursor injects while dragging\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Background color (empty regions between cells)\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#38bdf8\",\"description\":\"Accent color at the cell walls (mid pattern values)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e2f5ff\",\"description\":\"Color of the dense cell interiors (high pattern values)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Sharpness of the cell walls — higher gives crisper, more graphic edges\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.28\",\"description\":\"Pattern level the colors are centered on — shifts the balance of background vs. cells\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"135\",\"description\":\"Direction the surface light comes from, in degrees\"},{\"name\":\"childInfluence\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)\"},{\"name\":\"childContrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading\"},{\"name\":\"childThreshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it\"},{\"name\":\"childInvert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Flip which tones of the child grow the pattern (bright vs. dark areas)\"}]",[23,66562,31923],{"id":31922},[246,66564,66565,66594,66622,66650,66678],{":tabs":1557},[212,66566,66568],{"className":334,"code":66567,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,66569,66570,66578,66586],{"__ignoreMap":178},[220,66571,66572,66574,66576],{"class":222,"line":223},[220,66573,343],{"class":264},[220,66575,347],{"class":346},[220,66577,359],{"class":264},[220,66579,66580,66582,66584],{"class":222,"line":179},[220,66581,364],{"class":264},[220,66583,66545],{"class":346},[220,66585,386],{"class":264},[220,66587,66588,66590,66592],{"class":222,"line":389},[220,66589,402],{"class":264},[220,66591,347],{"class":346},[220,66593,359],{"class":264},[212,66595,66596],{"className":409,"code":66567,"language":411,"meta":178,"style":178},[99,66597,66598,66606,66614],{"__ignoreMap":178},[220,66599,66600,66602,66604],{"class":222,"line":223},[220,66601,343],{"class":264},[220,66603,347],{"class":420},[220,66605,359],{"class":264},[220,66607,66608,66610,66612],{"class":222,"line":179},[220,66609,364],{"class":264},[220,66611,66545],{"class":420},[220,66613,386],{"class":264},[220,66615,66616,66618,66620],{"class":222,"line":389},[220,66617,402],{"class":264},[220,66619,347],{"class":420},[220,66621,359],{"class":264},[212,66623,66624],{"className":2844,"code":66567,"language":2846,"meta":178,"style":178},[99,66625,66626,66634,66642],{"__ignoreMap":178},[220,66627,66628,66630,66632],{"class":222,"line":223},[220,66629,343],{"class":264},[220,66631,347],{"class":420},[220,66633,359],{"class":264},[220,66635,66636,66638,66640],{"class":222,"line":179},[220,66637,364],{"class":264},[220,66639,66545],{"class":420},[220,66641,386],{"class":264},[220,66643,66644,66646,66648],{"class":222,"line":389},[220,66645,402],{"class":264},[220,66647,347],{"class":420},[220,66649,359],{"class":264},[212,66651,66652],{"className":468,"code":66567,"language":469,"meta":178,"style":178},[99,66653,66654,66662,66670],{"__ignoreMap":178},[220,66655,66656,66658,66660],{"class":222,"line":223},[220,66657,343],{"class":264},[220,66659,347],{"class":420},[220,66661,359],{"class":264},[220,66663,66664,66666,66668],{"class":222,"line":179},[220,66665,364],{"class":264},[220,66667,66545],{"class":420},[220,66669,386],{"class":264},[220,66671,66672,66674,66676],{"class":222,"line":389},[220,66673,402],{"class":264},[220,66675,347],{"class":420},[220,66677,359],{"class":264},[212,66679,66681],{"className":251,"code":66680,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ReactionDiffusion', props: {} }\n ]\n})\n",[99,66682,66683,66693,66697,66711,66715,66724,66728],{"__ignoreMap":178},[220,66684,66685,66687,66689,66691],{"class":222,"line":223},[220,66686,261],{"class":260},[220,66688,11512],{"class":264},[220,66690,268],{"class":260},[220,66692,4007],{"class":230},[220,66694,66695],{"class":222,"line":179},[220,66696,647],{"emptyLinePlaceholder":194},[220,66698,66699,66701,66703,66705,66707,66709],{"class":222,"line":389},[220,66700,1735],{"class":260},[220,66702,1738],{"class":420},[220,66704,1741],{"class":260},[220,66706,1744],{"class":260},[220,66708,1747],{"class":226},[220,66710,1750],{"class":264},[220,66712,66713],{"class":222,"line":399},[220,66714,1765],{"class":264},[220,66716,66717,66719,66722],{"class":222,"line":644},[220,66718,1770],{"class":264},[220,66720,66721],{"class":230},"'ReactionDiffusion'",[220,66723,2465],{"class":264},[220,66725,66726],{"class":222,"line":650},[220,66727,1787],{"class":264},[220,66729,66730],{"class":222,"line":656},[220,66731,1792],{"class":264},[1504,66733,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":66735},[66736,66737],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":66545,"description":66553},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":66744,"title":66745,"body":66746,"category":33396,"componentType":25883,"description":66753,"extension":191,"meta":67070,"navigation":194,"path":67071,"requiresChild":194,"seo":67072,"stem":67073,"__hash__":67074},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":66747,"toc":67066},[66748,66751,66754,66756,66758,66761,66763,67064],[11,66749,66745],{"id":66750},"rectangularcoordinates",[15,66752,66753],{},"Convert polar coordinates back to rectangular space",[31911,66755],{"component":66745},[23,66757,31915],{"id":26533},[31917,66759],{":props":66760},"[{\"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,66762,31923],{"id":31922},[246,66764,66765,66821,66880,66936,66994],{":tabs":1557},[212,66766,66768],{"className":334,"code":66767,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66769,66770,66778,66785,66793,66797,66805,66813],{"__ignoreMap":178},[220,66771,66772,66774,66776],{"class":222,"line":223},[220,66773,343],{"class":264},[220,66775,347],{"class":346},[220,66777,359],{"class":264},[220,66779,66780,66782],{"class":222,"line":179},[220,66781,364],{"class":264},[220,66783,66784],{"class":346},"RectangularCoordinates\n",[220,66786,66787,66789,66791],{"class":222,"line":389},[220,66788,20371],{"class":226},[220,66790,353],{"class":264},[220,66792,36625],{"class":230},[220,66794,66795],{"class":222,"line":399},[220,66796,31959],{"class":264},[220,66798,66799,66801,66803],{"class":222,"line":644},[220,66800,2550],{"class":264},[220,66802,2553],{"class":346},[220,66804,386],{"class":264},[220,66806,66807,66809,66811],{"class":222,"line":650},[220,66808,2567],{"class":264},[220,66810,66745],{"class":346},[220,66812,359],{"class":264},[220,66814,66815,66817,66819],{"class":222,"line":656},[220,66816,402],{"class":264},[220,66818,347],{"class":346},[220,66820,359],{"class":264},[212,66822,66824],{"className":409,"code":66823,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66825,66826,66834,66840,66852,66856,66864,66872],{"__ignoreMap":178},[220,66827,66828,66830,66832],{"class":222,"line":223},[220,66829,343],{"class":264},[220,66831,347],{"class":420},[220,66833,359],{"class":264},[220,66835,66836,66838],{"class":222,"line":179},[220,66837,364],{"class":264},[220,66839,66784],{"class":420},[220,66841,66842,66844,66846,66848,66850],{"class":222,"line":389},[220,66843,20482],{"class":226},[220,66845,353],{"class":260},[220,66847,743],{"class":264},[220,66849,8677],{"class":420},[220,66851,749],{"class":264},[220,66853,66854],{"class":222,"line":399},[220,66855,31959],{"class":264},[220,66857,66858,66860,66862],{"class":222,"line":644},[220,66859,2550],{"class":264},[220,66861,2553],{"class":420},[220,66863,386],{"class":264},[220,66865,66866,66868,66870],{"class":222,"line":650},[220,66867,2567],{"class":264},[220,66869,66745],{"class":420},[220,66871,359],{"class":264},[220,66873,66874,66876,66878],{"class":222,"line":656},[220,66875,402],{"class":264},[220,66877,347],{"class":420},[220,66879,359],{"class":264},[212,66881,66882],{"className":2844,"code":66823,"language":2846,"meta":178,"style":178},[99,66883,66884,66892,66898,66908,66912,66920,66928],{"__ignoreMap":178},[220,66885,66886,66888,66890],{"class":222,"line":223},[220,66887,343],{"class":264},[220,66889,347],{"class":420},[220,66891,359],{"class":264},[220,66893,66894,66896],{"class":222,"line":179},[220,66895,364],{"class":264},[220,66897,66784],{"class":420},[220,66899,66900,66902,66904,66906],{"class":222,"line":389},[220,66901,20482],{"class":226},[220,66903,29871],{"class":264},[220,66905,8677],{"class":420},[220,66907,749],{"class":264},[220,66909,66910],{"class":222,"line":399},[220,66911,31959],{"class":264},[220,66913,66914,66916,66918],{"class":222,"line":644},[220,66915,2550],{"class":264},[220,66917,2553],{"class":420},[220,66919,386],{"class":264},[220,66921,66922,66924,66926],{"class":222,"line":650},[220,66923,2567],{"class":264},[220,66925,66745],{"class":420},[220,66927,359],{"class":264},[220,66929,66930,66932,66934],{"class":222,"line":656},[220,66931,402],{"class":264},[220,66933,347],{"class":420},[220,66935,359],{"class":264},[212,66937,66938],{"className":468,"code":66823,"language":469,"meta":178,"style":178},[99,66939,66940,66948,66954,66966,66970,66978,66986],{"__ignoreMap":178},[220,66941,66942,66944,66946],{"class":222,"line":223},[220,66943,343],{"class":264},[220,66945,347],{"class":420},[220,66947,359],{"class":264},[220,66949,66950,66952],{"class":222,"line":179},[220,66951,364],{"class":264},[220,66953,66784],{"class":420},[220,66955,66956,66958,66960,66962,66964],{"class":222,"line":389},[220,66957,20482],{"class":226},[220,66959,353],{"class":260},[220,66961,743],{"class":264},[220,66963,8677],{"class":420},[220,66965,749],{"class":264},[220,66967,66968],{"class":222,"line":399},[220,66969,31959],{"class":264},[220,66971,66972,66974,66976],{"class":222,"line":644},[220,66973,2550],{"class":264},[220,66975,2553],{"class":420},[220,66977,386],{"class":264},[220,66979,66980,66982,66984],{"class":222,"line":650},[220,66981,2567],{"class":264},[220,66983,66745],{"class":420},[220,66985,359],{"class":264},[220,66987,66988,66990,66992],{"class":222,"line":656},[220,66989,402],{"class":264},[220,66991,347],{"class":420},[220,66993,359],{"class":264},[212,66995,66997],{"className":251,"code":66996,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RectangularCoordinates', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,66998,66999,67009,67013,67027,67031,67044,67052,67056,67060],{"__ignoreMap":178},[220,67000,67001,67003,67005,67007],{"class":222,"line":223},[220,67002,261],{"class":260},[220,67004,11512],{"class":264},[220,67006,268],{"class":260},[220,67008,4007],{"class":230},[220,67010,67011],{"class":222,"line":179},[220,67012,647],{"emptyLinePlaceholder":194},[220,67014,67015,67017,67019,67021,67023,67025],{"class":222,"line":389},[220,67016,1735],{"class":260},[220,67018,1738],{"class":420},[220,67020,1741],{"class":260},[220,67022,1744],{"class":260},[220,67024,1747],{"class":226},[220,67026,1750],{"class":264},[220,67028,67029],{"class":222,"line":399},[220,67030,1765],{"class":264},[220,67032,67033,67035,67038,67040,67042],{"class":222,"line":644},[220,67034,1770],{"class":264},[220,67036,67037],{"class":230},"'RectangularCoordinates'",[220,67039,32203],{"class":264},[220,67041,8677],{"class":420},[220,67043,7546],{"class":264},[220,67045,67046,67048,67050],{"class":222,"line":650},[220,67047,7014],{"class":264},[220,67049,3206],{"class":230},[220,67051,2465],{"class":264},[220,67053,67054],{"class":222,"line":656},[220,67055,7031],{"class":264},[220,67057,67058],{"class":222,"line":673},[220,67059,1787],{"class":264},[220,67061,67062],{"class":222,"line":682},[220,67063,1792],{"class":264},[1504,67065,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67067},[67068,67069],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":66745,"description":66753},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":67076,"title":67077,"body":67078,"category":32806,"componentType":25883,"description":67085,"extension":191,"meta":67346,"navigation":194,"path":67347,"requiresChild":194,"seo":67348,"stem":67349,"__hash__":67350},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":67079,"toc":67342},[67080,67083,67086,67088,67090,67093,67095,67340],[11,67081,67077],{"id":67082},"reflectiveplane",[15,67084,67085],{},"Reflective floor that mirrors the content above it",[31911,67087],{"component":67077},[23,67089,31915],{"id":26533},[31917,67091],{":props":67092},"[{\"name\":\"height\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Vertical position of the reflective surface\"},{\"name\":\"distance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far below the floor the reflection remains visible before fully fading to transparent.\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Width of the fade zone, as a fraction of reflection distance.\"},{\"name\":\"blur\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Maximum blur applied to the reflection far from the surface.\"},{\"name\":\"blurDistance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How far below the surface the blur takes to ramp from sharp to maximum.\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle reflected samples that fall outside the source content.\"}]",[23,67094,31923],{"id":31922},[246,67096,67097,67142,67186,67230,67274],{":tabs":1557},[212,67098,67100],{"className":334,"code":67099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,67101,67102,67110,67118,67126,67134],{"__ignoreMap":178},[220,67103,67104,67106,67108],{"class":222,"line":223},[220,67105,343],{"class":264},[220,67107,347],{"class":346},[220,67109,359],{"class":264},[220,67111,67112,67114,67116],{"class":222,"line":179},[220,67113,364],{"class":264},[220,67115,67077],{"class":346},[220,67117,359],{"class":264},[220,67119,67120,67122,67124],{"class":222,"line":389},[220,67121,2550],{"class":264},[220,67123,2553],{"class":346},[220,67125,386],{"class":264},[220,67127,67128,67130,67132],{"class":222,"line":399},[220,67129,2567],{"class":264},[220,67131,67077],{"class":346},[220,67133,359],{"class":264},[220,67135,67136,67138,67140],{"class":222,"line":644},[220,67137,402],{"class":264},[220,67139,347],{"class":346},[220,67141,359],{"class":264},[212,67143,67144],{"className":409,"code":67099,"language":411,"meta":178,"style":178},[99,67145,67146,67154,67162,67170,67178],{"__ignoreMap":178},[220,67147,67148,67150,67152],{"class":222,"line":223},[220,67149,343],{"class":264},[220,67151,347],{"class":420},[220,67153,359],{"class":264},[220,67155,67156,67158,67160],{"class":222,"line":179},[220,67157,364],{"class":264},[220,67159,67077],{"class":420},[220,67161,359],{"class":264},[220,67163,67164,67166,67168],{"class":222,"line":389},[220,67165,2550],{"class":264},[220,67167,2553],{"class":420},[220,67169,386],{"class":264},[220,67171,67172,67174,67176],{"class":222,"line":399},[220,67173,2567],{"class":264},[220,67175,67077],{"class":420},[220,67177,359],{"class":264},[220,67179,67180,67182,67184],{"class":222,"line":644},[220,67181,402],{"class":264},[220,67183,347],{"class":420},[220,67185,359],{"class":264},[212,67187,67188],{"className":2844,"code":67099,"language":2846,"meta":178,"style":178},[99,67189,67190,67198,67206,67214,67222],{"__ignoreMap":178},[220,67191,67192,67194,67196],{"class":222,"line":223},[220,67193,343],{"class":264},[220,67195,347],{"class":420},[220,67197,359],{"class":264},[220,67199,67200,67202,67204],{"class":222,"line":179},[220,67201,364],{"class":264},[220,67203,67077],{"class":420},[220,67205,359],{"class":264},[220,67207,67208,67210,67212],{"class":222,"line":389},[220,67209,2550],{"class":264},[220,67211,2553],{"class":420},[220,67213,386],{"class":264},[220,67215,67216,67218,67220],{"class":222,"line":399},[220,67217,2567],{"class":264},[220,67219,67077],{"class":420},[220,67221,359],{"class":264},[220,67223,67224,67226,67228],{"class":222,"line":644},[220,67225,402],{"class":264},[220,67227,347],{"class":420},[220,67229,359],{"class":264},[212,67231,67232],{"className":468,"code":67099,"language":469,"meta":178,"style":178},[99,67233,67234,67242,67250,67258,67266],{"__ignoreMap":178},[220,67235,67236,67238,67240],{"class":222,"line":223},[220,67237,343],{"class":264},[220,67239,347],{"class":420},[220,67241,359],{"class":264},[220,67243,67244,67246,67248],{"class":222,"line":179},[220,67245,364],{"class":264},[220,67247,67077],{"class":420},[220,67249,359],{"class":264},[220,67251,67252,67254,67256],{"class":222,"line":389},[220,67253,2550],{"class":264},[220,67255,2553],{"class":420},[220,67257,386],{"class":264},[220,67259,67260,67262,67264],{"class":222,"line":399},[220,67261,2567],{"class":264},[220,67263,67077],{"class":420},[220,67265,359],{"class":264},[220,67267,67268,67270,67272],{"class":222,"line":644},[220,67269,402],{"class":264},[220,67271,347],{"class":420},[220,67273,359],{"class":264},[212,67275,67277],{"className":251,"code":67276,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ReflectivePlane', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,67278,67279,67289,67293,67307,67311,67320,67328,67332,67336],{"__ignoreMap":178},[220,67280,67281,67283,67285,67287],{"class":222,"line":223},[220,67282,261],{"class":260},[220,67284,11512],{"class":264},[220,67286,268],{"class":260},[220,67288,4007],{"class":230},[220,67290,67291],{"class":222,"line":179},[220,67292,647],{"emptyLinePlaceholder":194},[220,67294,67295,67297,67299,67301,67303,67305],{"class":222,"line":389},[220,67296,1735],{"class":260},[220,67298,1738],{"class":420},[220,67300,1741],{"class":260},[220,67302,1744],{"class":260},[220,67304,1747],{"class":226},[220,67306,1750],{"class":264},[220,67308,67309],{"class":222,"line":399},[220,67310,1765],{"class":264},[220,67312,67313,67315,67318],{"class":222,"line":644},[220,67314,1770],{"class":264},[220,67316,67317],{"class":230},"'ReflectivePlane'",[220,67319,7009],{"class":264},[220,67321,67322,67324,67326],{"class":222,"line":650},[220,67323,7014],{"class":264},[220,67325,3206],{"class":230},[220,67327,2465],{"class":264},[220,67329,67330],{"class":222,"line":656},[220,67331,7031],{"class":264},[220,67333,67334],{"class":222,"line":673},[220,67335,1787],{"class":264},[220,67337,67338],{"class":222,"line":682},[220,67339,1792],{"class":264},[1504,67341,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":67343},[67344,67345],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":67077,"description":67085},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":67352,"title":67353,"body":67354,"category":33396,"componentType":25883,"description":67361,"extension":191,"meta":67678,"navigation":194,"path":67679,"requiresChild":194,"seo":67680,"stem":67681,"__hash__":67682},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":67355,"toc":67674},[67356,67359,67362,67364,67366,67369,67371,67672],[11,67357,67353],{"id":67358},"repeater",[15,67360,67361],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31911,67363],{"component":67353},[23,67365,31915],{"id":26533},[31917,67367],{":props":67368},"[{\"name\":\"mode\",\"type\":\"\\\"grid\\\" | \\\"radial\\\" | \\\"linear\\\"\",\"default\":\"grid\",\"description\":\"Layout used to place the repeated instances\"},{\"name\":\"cropLeft\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Crop inset from the left edge of the source element (fraction of its width)\"},{\"name\":\"cropRight\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Crop inset from the right edge of the source element (fraction of its width)\"},{\"name\":\"cropTop\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Crop inset from the top edge of the source element (fraction of its height)\"},{\"name\":\"cropBottom\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Crop inset from the bottom edge of the source element (fraction of its height)\"},{\"name\":\"columns\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Number of grid columns\"},{\"name\":\"rows\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Number of grid rows\"},{\"name\":\"gapX\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Horizontal gap between grid cells\"},{\"name\":\"gapY\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Vertical gap between grid cells\"},{\"name\":\"stagger\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Horizontal offset applied to every other row (brick layout)\"},{\"name\":\"flip\",\"type\":\"\\\"none\\\" | \\\"alternate-flip-x\\\" | \\\"alternate-flip-y\\\" | \\\"both\\\"\",\"default\":\"none\",\"description\":\"Mirror alternating columns\u002Frows for seamless tiling patterns\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of repeated instances\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Orbit radius of the radial layout\"},{\"name\":\"startAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle of the first instance on the orbit\"},{\"name\":\"sweep\",\"type\":\"number\",\"default\":\"360\",\"description\":\"Angular span the instances are distributed across\"},{\"name\":\"faceCenter\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Rotate each instance to face the orbit center\"},{\"name\":\"direction\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the linear layout in degrees (0 = rightward)\"},{\"name\":\"spacing\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Distance between consecutive instances\"},{\"name\":\"instanceScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Progressive scale multiplier applied per instance (compounds with each copy)\"},{\"name\":\"instanceRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Additional rotation in degrees applied per instance (accumulates with each copy)\"},{\"name\":\"instanceOpacity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Progressive opacity falloff applied per instance (compounds with each copy)\"},{\"name\":\"hueShift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Hue rotation in degrees added per instance\"},{\"name\":\"phase\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Seamless layout animation phase (0-1 wraps to the identical layout)\"},{\"name\":\"zOrder\",\"type\":\"\\\"forward\\\" | \\\"backward\\\"\",\"default\":\"forward\",\"description\":\"Stacking order of overlapping instances\"},{\"name\":\"jitterPosition\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random per-instance position offset\"},{\"name\":\"jitterRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random per-instance rotation\"},{\"name\":\"jitterScale\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random per-instance scale variation\"},{\"name\":\"jitterOpacity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random per-instance opacity variation\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for the jitter values\"}]",[23,67370,31923],{"id":31922},[246,67372,67373,67429,67488,67544,67602],{":tabs":1557},[212,67374,67376],{"className":334,"code":67375,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRepeater\n :radius=\"0.3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRepeater>\n\u003C\u002FShader>\n",[99,67377,67378,67386,67393,67401,67405,67413,67421],{"__ignoreMap":178},[220,67379,67380,67382,67384],{"class":222,"line":223},[220,67381,343],{"class":264},[220,67383,347],{"class":346},[220,67385,359],{"class":264},[220,67387,67388,67390],{"class":222,"line":179},[220,67389,364],{"class":264},[220,67391,67392],{"class":346},"Repeater\n",[220,67394,67395,67397,67399],{"class":222,"line":389},[220,67396,17405],{"class":226},[220,67398,353],{"class":264},[220,67400,41098],{"class":230},[220,67402,67403],{"class":222,"line":399},[220,67404,31959],{"class":264},[220,67406,67407,67409,67411],{"class":222,"line":644},[220,67408,2550],{"class":264},[220,67410,2553],{"class":346},[220,67412,386],{"class":264},[220,67414,67415,67417,67419],{"class":222,"line":650},[220,67416,2567],{"class":264},[220,67418,67353],{"class":346},[220,67420,359],{"class":264},[220,67422,67423,67425,67427],{"class":222,"line":656},[220,67424,402],{"class":264},[220,67426,347],{"class":346},[220,67428,359],{"class":264},[212,67430,67432],{"className":409,"code":67431,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRepeater\n radius={0.3}\n >\n \u003CCircle \u002F>\n \u003C\u002FRepeater>\n\u003C\u002FShader>\n",[99,67433,67434,67442,67448,67460,67464,67472,67480],{"__ignoreMap":178},[220,67435,67436,67438,67440],{"class":222,"line":223},[220,67437,343],{"class":264},[220,67439,347],{"class":420},[220,67441,359],{"class":264},[220,67443,67444,67446],{"class":222,"line":179},[220,67445,364],{"class":264},[220,67447,67392],{"class":420},[220,67449,67450,67452,67454,67456,67458],{"class":222,"line":389},[220,67451,9645],{"class":226},[220,67453,353],{"class":260},[220,67455,743],{"class":264},[220,67457,22004],{"class":420},[220,67459,749],{"class":264},[220,67461,67462],{"class":222,"line":399},[220,67463,31959],{"class":264},[220,67465,67466,67468,67470],{"class":222,"line":644},[220,67467,2550],{"class":264},[220,67469,2553],{"class":420},[220,67471,386],{"class":264},[220,67473,67474,67476,67478],{"class":222,"line":650},[220,67475,2567],{"class":264},[220,67477,67353],{"class":420},[220,67479,359],{"class":264},[220,67481,67482,67484,67486],{"class":222,"line":656},[220,67483,402],{"class":264},[220,67485,347],{"class":420},[220,67487,359],{"class":264},[212,67489,67490],{"className":2844,"code":67431,"language":2846,"meta":178,"style":178},[99,67491,67492,67500,67506,67516,67520,67528,67536],{"__ignoreMap":178},[220,67493,67494,67496,67498],{"class":222,"line":223},[220,67495,343],{"class":264},[220,67497,347],{"class":420},[220,67499,359],{"class":264},[220,67501,67502,67504],{"class":222,"line":179},[220,67503,364],{"class":264},[220,67505,67392],{"class":420},[220,67507,67508,67510,67512,67514],{"class":222,"line":389},[220,67509,9645],{"class":226},[220,67511,29871],{"class":264},[220,67513,22004],{"class":420},[220,67515,749],{"class":264},[220,67517,67518],{"class":222,"line":399},[220,67519,31959],{"class":264},[220,67521,67522,67524,67526],{"class":222,"line":644},[220,67523,2550],{"class":264},[220,67525,2553],{"class":420},[220,67527,386],{"class":264},[220,67529,67530,67532,67534],{"class":222,"line":650},[220,67531,2567],{"class":264},[220,67533,67353],{"class":420},[220,67535,359],{"class":264},[220,67537,67538,67540,67542],{"class":222,"line":656},[220,67539,402],{"class":264},[220,67541,347],{"class":420},[220,67543,359],{"class":264},[212,67545,67546],{"className":468,"code":67431,"language":469,"meta":178,"style":178},[99,67547,67548,67556,67562,67574,67578,67586,67594],{"__ignoreMap":178},[220,67549,67550,67552,67554],{"class":222,"line":223},[220,67551,343],{"class":264},[220,67553,347],{"class":420},[220,67555,359],{"class":264},[220,67557,67558,67560],{"class":222,"line":179},[220,67559,364],{"class":264},[220,67561,67392],{"class":420},[220,67563,67564,67566,67568,67570,67572],{"class":222,"line":389},[220,67565,9645],{"class":226},[220,67567,353],{"class":260},[220,67569,743],{"class":264},[220,67571,22004],{"class":420},[220,67573,749],{"class":264},[220,67575,67576],{"class":222,"line":399},[220,67577,31959],{"class":264},[220,67579,67580,67582,67584],{"class":222,"line":644},[220,67581,2550],{"class":264},[220,67583,2553],{"class":420},[220,67585,386],{"class":264},[220,67587,67588,67590,67592],{"class":222,"line":650},[220,67589,2567],{"class":264},[220,67591,67353],{"class":420},[220,67593,359],{"class":264},[220,67595,67596,67598,67600],{"class":222,"line":656},[220,67597,402],{"class":264},[220,67599,347],{"class":420},[220,67601,359],{"class":264},[212,67603,67605],{"className":251,"code":67604,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Repeater', props: { radius: 0.3 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,67606,67607,67617,67621,67635,67639,67652,67660,67664,67668],{"__ignoreMap":178},[220,67608,67609,67611,67613,67615],{"class":222,"line":223},[220,67610,261],{"class":260},[220,67612,11512],{"class":264},[220,67614,268],{"class":260},[220,67616,4007],{"class":230},[220,67618,67619],{"class":222,"line":179},[220,67620,647],{"emptyLinePlaceholder":194},[220,67622,67623,67625,67627,67629,67631,67633],{"class":222,"line":389},[220,67624,1735],{"class":260},[220,67626,1738],{"class":420},[220,67628,1741],{"class":260},[220,67630,1744],{"class":260},[220,67632,1747],{"class":226},[220,67634,1750],{"class":264},[220,67636,67637],{"class":222,"line":399},[220,67638,1765],{"class":264},[220,67640,67641,67643,67646,67648,67650],{"class":222,"line":644},[220,67642,1770],{"class":264},[220,67644,67645],{"class":230},"'Repeater'",[220,67647,7541],{"class":264},[220,67649,22004],{"class":420},[220,67651,7546],{"class":264},[220,67653,67654,67656,67658],{"class":222,"line":650},[220,67655,7014],{"class":264},[220,67657,3206],{"class":230},[220,67659,2465],{"class":264},[220,67661,67662],{"class":222,"line":656},[220,67663,7031],{"class":264},[220,67665,67666],{"class":222,"line":673},[220,67667,1787],{"class":264},[220,67669,67670],{"class":222,"line":682},[220,67671,1792],{"class":264},[1504,67673,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67675},[67676,67677],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":67353,"description":67361},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":67684,"title":67685,"body":67686,"category":15908,"componentType":25877,"description":67693,"extension":191,"meta":67970,"navigation":194,"path":67971,"requiresChild":32530,"seo":67972,"stem":67973,"__hash__":67974},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":67687,"toc":67966},[67688,67691,67694,67696,67698,67701,67703,67964],[11,67689,67685],{"id":67690},"ring",[15,67692,67693],{},"Annular ring (donut) with adjustable radius and band thickness",[31911,67695],{"component":67685},[23,67697,31915],{"id":26533},[31917,67699],{":props":67700},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,67702,31923],{"id":31922},[246,67704,67705,67753,67804,67852,67902],{":tabs":1557},[212,67706,67708],{"className":334,"code":67707,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,67709,67710,67718,67725,67733,67741,67745],{"__ignoreMap":178},[220,67711,67712,67714,67716],{"class":222,"line":223},[220,67713,343],{"class":264},[220,67715,347],{"class":346},[220,67717,359],{"class":264},[220,67719,67720,67722],{"class":222,"line":179},[220,67721,364],{"class":264},[220,67723,67724],{"class":346},"Ring\n",[220,67726,67727,67729,67731],{"class":222,"line":389},[220,67728,9635],{"class":226},[220,67730,353],{"class":264},[220,67732,9591],{"class":230},[220,67734,67735,67737,67739],{"class":222,"line":399},[220,67736,17405],{"class":226},[220,67738,353],{"class":264},[220,67740,41098],{"class":230},[220,67742,67743],{"class":222,"line":644},[220,67744,1234],{"class":264},[220,67746,67747,67749,67751],{"class":222,"line":650},[220,67748,402],{"class":264},[220,67750,347],{"class":346},[220,67752,359],{"class":264},[212,67754,67756],{"className":409,"code":67755,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,67757,67758,67766,67772,67780,67792,67796],{"__ignoreMap":178},[220,67759,67760,67762,67764],{"class":222,"line":223},[220,67761,343],{"class":264},[220,67763,347],{"class":420},[220,67765,359],{"class":264},[220,67767,67768,67770],{"class":222,"line":179},[220,67769,364],{"class":264},[220,67771,67724],{"class":420},[220,67773,67774,67776,67778],{"class":222,"line":389},[220,67775,9635],{"class":226},[220,67777,353],{"class":260},[220,67779,9591],{"class":230},[220,67781,67782,67784,67786,67788,67790],{"class":222,"line":399},[220,67783,9645],{"class":226},[220,67785,353],{"class":260},[220,67787,743],{"class":264},[220,67789,22004],{"class":420},[220,67791,749],{"class":264},[220,67793,67794],{"class":222,"line":644},[220,67795,1234],{"class":264},[220,67797,67798,67800,67802],{"class":222,"line":650},[220,67799,402],{"class":264},[220,67801,347],{"class":420},[220,67803,359],{"class":264},[212,67805,67806],{"className":2844,"code":67755,"language":2846,"meta":178,"style":178},[99,67807,67808,67816,67822,67830,67840,67844],{"__ignoreMap":178},[220,67809,67810,67812,67814],{"class":222,"line":223},[220,67811,343],{"class":264},[220,67813,347],{"class":420},[220,67815,359],{"class":264},[220,67817,67818,67820],{"class":222,"line":179},[220,67819,364],{"class":264},[220,67821,67724],{"class":420},[220,67823,67824,67826,67828],{"class":222,"line":389},[220,67825,9635],{"class":226},[220,67827,353],{"class":264},[220,67829,9591],{"class":230},[220,67831,67832,67834,67836,67838],{"class":222,"line":399},[220,67833,9645],{"class":226},[220,67835,29871],{"class":264},[220,67837,22004],{"class":420},[220,67839,749],{"class":264},[220,67841,67842],{"class":222,"line":644},[220,67843,1234],{"class":264},[220,67845,67846,67848,67850],{"class":222,"line":650},[220,67847,402],{"class":264},[220,67849,347],{"class":420},[220,67851,359],{"class":264},[212,67853,67854],{"className":468,"code":67755,"language":469,"meta":178,"style":178},[99,67855,67856,67864,67870,67878,67890,67894],{"__ignoreMap":178},[220,67857,67858,67860,67862],{"class":222,"line":223},[220,67859,343],{"class":264},[220,67861,347],{"class":420},[220,67863,359],{"class":264},[220,67865,67866,67868],{"class":222,"line":179},[220,67867,364],{"class":264},[220,67869,67724],{"class":420},[220,67871,67872,67874,67876],{"class":222,"line":389},[220,67873,9635],{"class":226},[220,67875,353],{"class":260},[220,67877,9591],{"class":230},[220,67879,67880,67882,67884,67886,67888],{"class":222,"line":399},[220,67881,9645],{"class":226},[220,67883,353],{"class":260},[220,67885,743],{"class":264},[220,67887,22004],{"class":420},[220,67889,749],{"class":264},[220,67891,67892],{"class":222,"line":644},[220,67893,1234],{"class":264},[220,67895,67896,67898,67900],{"class":222,"line":650},[220,67897,402],{"class":264},[220,67899,347],{"class":420},[220,67901,359],{"class":264},[212,67903,67905],{"className":251,"code":67904,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ring', props: { color: '#ffffff', radius: 0.3 } }\n ]\n})\n",[99,67906,67907,67917,67921,67935,67939,67956,67960],{"__ignoreMap":178},[220,67908,67909,67911,67913,67915],{"class":222,"line":223},[220,67910,261],{"class":260},[220,67912,11512],{"class":264},[220,67914,268],{"class":260},[220,67916,4007],{"class":230},[220,67918,67919],{"class":222,"line":179},[220,67920,647],{"emptyLinePlaceholder":194},[220,67922,67923,67925,67927,67929,67931,67933],{"class":222,"line":389},[220,67924,1735],{"class":260},[220,67926,1738],{"class":420},[220,67928,1741],{"class":260},[220,67930,1744],{"class":260},[220,67932,1747],{"class":226},[220,67934,1750],{"class":264},[220,67936,67937],{"class":222,"line":399},[220,67938,1765],{"class":264},[220,67940,67941,67943,67946,67948,67950,67952,67954],{"class":222,"line":644},[220,67942,1770],{"class":264},[220,67944,67945],{"class":230},"'Ring'",[220,67947,1776],{"class":264},[220,67949,10169],{"class":230},[220,67951,6566],{"class":264},[220,67953,22004],{"class":420},[220,67955,1782],{"class":264},[220,67957,67958],{"class":222,"line":650},[220,67959,1787],{"class":264},[220,67961,67962],{"class":222,"line":656},[220,67963,1792],{"class":264},[1504,67965,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67967},[67968,67969],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":67685,"description":67693},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":67976,"title":67977,"body":67978,"category":33673,"componentType":25883,"description":67985,"extension":191,"meta":68246,"navigation":194,"path":68247,"requiresChild":194,"seo":68248,"stem":68249,"__hash__":68250},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":67979,"toc":68242},[67980,67983,67986,67988,67990,67993,67995,68240],[11,67981,67977],{"id":67982},"ripplewipe",[15,67984,67985],{},"Wipe the content away in concentric rings pulsing out from a center point",[31911,67987],{"component":67977},[23,67989,31915],{"id":26533},[31917,67991],{":props":67992},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the ripple has expanded (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the rings expand from\"},{\"name\":\"rings\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of concentric rings\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How softly adjacent rings' timing overlaps (0 = discrete ring pops)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the outside inward instead\"}]",[23,67994,31923],{"id":31922},[246,67996,67997,68042,68086,68130,68174],{":tabs":1557},[212,67998,68000],{"className":334,"code":67999,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,68001,68002,68010,68018,68026,68034],{"__ignoreMap":178},[220,68003,68004,68006,68008],{"class":222,"line":223},[220,68005,343],{"class":264},[220,68007,347],{"class":346},[220,68009,359],{"class":264},[220,68011,68012,68014,68016],{"class":222,"line":179},[220,68013,364],{"class":264},[220,68015,67977],{"class":346},[220,68017,359],{"class":264},[220,68019,68020,68022,68024],{"class":222,"line":389},[220,68021,2550],{"class":264},[220,68023,2553],{"class":346},[220,68025,386],{"class":264},[220,68027,68028,68030,68032],{"class":222,"line":399},[220,68029,2567],{"class":264},[220,68031,67977],{"class":346},[220,68033,359],{"class":264},[220,68035,68036,68038,68040],{"class":222,"line":644},[220,68037,402],{"class":264},[220,68039,347],{"class":346},[220,68041,359],{"class":264},[212,68043,68044],{"className":409,"code":67999,"language":411,"meta":178,"style":178},[99,68045,68046,68054,68062,68070,68078],{"__ignoreMap":178},[220,68047,68048,68050,68052],{"class":222,"line":223},[220,68049,343],{"class":264},[220,68051,347],{"class":420},[220,68053,359],{"class":264},[220,68055,68056,68058,68060],{"class":222,"line":179},[220,68057,364],{"class":264},[220,68059,67977],{"class":420},[220,68061,359],{"class":264},[220,68063,68064,68066,68068],{"class":222,"line":389},[220,68065,2550],{"class":264},[220,68067,2553],{"class":420},[220,68069,386],{"class":264},[220,68071,68072,68074,68076],{"class":222,"line":399},[220,68073,2567],{"class":264},[220,68075,67977],{"class":420},[220,68077,359],{"class":264},[220,68079,68080,68082,68084],{"class":222,"line":644},[220,68081,402],{"class":264},[220,68083,347],{"class":420},[220,68085,359],{"class":264},[212,68087,68088],{"className":2844,"code":67999,"language":2846,"meta":178,"style":178},[99,68089,68090,68098,68106,68114,68122],{"__ignoreMap":178},[220,68091,68092,68094,68096],{"class":222,"line":223},[220,68093,343],{"class":264},[220,68095,347],{"class":420},[220,68097,359],{"class":264},[220,68099,68100,68102,68104],{"class":222,"line":179},[220,68101,364],{"class":264},[220,68103,67977],{"class":420},[220,68105,359],{"class":264},[220,68107,68108,68110,68112],{"class":222,"line":389},[220,68109,2550],{"class":264},[220,68111,2553],{"class":420},[220,68113,386],{"class":264},[220,68115,68116,68118,68120],{"class":222,"line":399},[220,68117,2567],{"class":264},[220,68119,67977],{"class":420},[220,68121,359],{"class":264},[220,68123,68124,68126,68128],{"class":222,"line":644},[220,68125,402],{"class":264},[220,68127,347],{"class":420},[220,68129,359],{"class":264},[212,68131,68132],{"className":468,"code":67999,"language":469,"meta":178,"style":178},[99,68133,68134,68142,68150,68158,68166],{"__ignoreMap":178},[220,68135,68136,68138,68140],{"class":222,"line":223},[220,68137,343],{"class":264},[220,68139,347],{"class":420},[220,68141,359],{"class":264},[220,68143,68144,68146,68148],{"class":222,"line":179},[220,68145,364],{"class":264},[220,68147,67977],{"class":420},[220,68149,359],{"class":264},[220,68151,68152,68154,68156],{"class":222,"line":389},[220,68153,2550],{"class":264},[220,68155,2553],{"class":420},[220,68157,386],{"class":264},[220,68159,68160,68162,68164],{"class":222,"line":399},[220,68161,2567],{"class":264},[220,68163,67977],{"class":420},[220,68165,359],{"class":264},[220,68167,68168,68170,68172],{"class":222,"line":644},[220,68169,402],{"class":264},[220,68171,347],{"class":420},[220,68173,359],{"class":264},[212,68175,68177],{"className":251,"code":68176,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RippleWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,68178,68179,68189,68193,68207,68211,68220,68228,68232,68236],{"__ignoreMap":178},[220,68180,68181,68183,68185,68187],{"class":222,"line":223},[220,68182,261],{"class":260},[220,68184,11512],{"class":264},[220,68186,268],{"class":260},[220,68188,4007],{"class":230},[220,68190,68191],{"class":222,"line":179},[220,68192,647],{"emptyLinePlaceholder":194},[220,68194,68195,68197,68199,68201,68203,68205],{"class":222,"line":389},[220,68196,1735],{"class":260},[220,68198,1738],{"class":420},[220,68200,1741],{"class":260},[220,68202,1744],{"class":260},[220,68204,1747],{"class":226},[220,68206,1750],{"class":264},[220,68208,68209],{"class":222,"line":399},[220,68210,1765],{"class":264},[220,68212,68213,68215,68218],{"class":222,"line":644},[220,68214,1770],{"class":264},[220,68216,68217],{"class":230},"'RippleWipe'",[220,68219,7009],{"class":264},[220,68221,68222,68224,68226],{"class":222,"line":650},[220,68223,7014],{"class":264},[220,68225,3206],{"class":230},[220,68227,2465],{"class":264},[220,68229,68230],{"class":222,"line":656},[220,68231,7031],{"class":264},[220,68233,68234],{"class":222,"line":673},[220,68235,1787],{"class":264},[220,68237,68238],{"class":222,"line":682},[220,68239,1792],{"class":264},[1504,68241,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68243},[68244,68245],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":67977,"description":67985},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":68252,"title":68253,"body":68254,"category":33063,"componentType":25877,"description":68261,"extension":191,"meta":68446,"navigation":194,"path":68447,"requiresChild":32530,"seo":68448,"stem":68449,"__hash__":68450},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":68255,"toc":68442},[68256,68259,68262,68264,68266,68269,68271,68440],[11,68257,68253],{"id":68258},"ripples",[15,68260,68261],{},"Concentric animated ripples emanating from a point",[31911,68263],{"component":68253},[23,68265,31915],{"id":26533},[31917,68267],{":props":68268},"[{\"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\u002Fspacing 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,68270,31923],{"id":31922},[246,68272,68273,68302,68330,68358,68386],{":tabs":1557},[212,68274,68276],{"className":334,"code":68275,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,68277,68278,68286,68294],{"__ignoreMap":178},[220,68279,68280,68282,68284],{"class":222,"line":223},[220,68281,343],{"class":264},[220,68283,347],{"class":346},[220,68285,359],{"class":264},[220,68287,68288,68290,68292],{"class":222,"line":179},[220,68289,364],{"class":264},[220,68291,68253],{"class":346},[220,68293,386],{"class":264},[220,68295,68296,68298,68300],{"class":222,"line":389},[220,68297,402],{"class":264},[220,68299,347],{"class":346},[220,68301,359],{"class":264},[212,68303,68304],{"className":409,"code":68275,"language":411,"meta":178,"style":178},[99,68305,68306,68314,68322],{"__ignoreMap":178},[220,68307,68308,68310,68312],{"class":222,"line":223},[220,68309,343],{"class":264},[220,68311,347],{"class":420},[220,68313,359],{"class":264},[220,68315,68316,68318,68320],{"class":222,"line":179},[220,68317,364],{"class":264},[220,68319,68253],{"class":420},[220,68321,386],{"class":264},[220,68323,68324,68326,68328],{"class":222,"line":389},[220,68325,402],{"class":264},[220,68327,347],{"class":420},[220,68329,359],{"class":264},[212,68331,68332],{"className":2844,"code":68275,"language":2846,"meta":178,"style":178},[99,68333,68334,68342,68350],{"__ignoreMap":178},[220,68335,68336,68338,68340],{"class":222,"line":223},[220,68337,343],{"class":264},[220,68339,347],{"class":420},[220,68341,359],{"class":264},[220,68343,68344,68346,68348],{"class":222,"line":179},[220,68345,364],{"class":264},[220,68347,68253],{"class":420},[220,68349,386],{"class":264},[220,68351,68352,68354,68356],{"class":222,"line":389},[220,68353,402],{"class":264},[220,68355,347],{"class":420},[220,68357,359],{"class":264},[212,68359,68360],{"className":468,"code":68275,"language":469,"meta":178,"style":178},[99,68361,68362,68370,68378],{"__ignoreMap":178},[220,68363,68364,68366,68368],{"class":222,"line":223},[220,68365,343],{"class":264},[220,68367,347],{"class":420},[220,68369,359],{"class":264},[220,68371,68372,68374,68376],{"class":222,"line":179},[220,68373,364],{"class":264},[220,68375,68253],{"class":420},[220,68377,386],{"class":264},[220,68379,68380,68382,68384],{"class":222,"line":389},[220,68381,402],{"class":264},[220,68383,347],{"class":420},[220,68385,359],{"class":264},[212,68387,68389],{"className":251,"code":68388,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ripples', props: {} }\n ]\n})\n",[99,68390,68391,68401,68405,68419,68423,68432,68436],{"__ignoreMap":178},[220,68392,68393,68395,68397,68399],{"class":222,"line":223},[220,68394,261],{"class":260},[220,68396,11512],{"class":264},[220,68398,268],{"class":260},[220,68400,4007],{"class":230},[220,68402,68403],{"class":222,"line":179},[220,68404,647],{"emptyLinePlaceholder":194},[220,68406,68407,68409,68411,68413,68415,68417],{"class":222,"line":389},[220,68408,1735],{"class":260},[220,68410,1738],{"class":420},[220,68412,1741],{"class":260},[220,68414,1744],{"class":260},[220,68416,1747],{"class":226},[220,68418,1750],{"class":264},[220,68420,68421],{"class":222,"line":399},[220,68422,1765],{"class":264},[220,68424,68425,68427,68430],{"class":222,"line":644},[220,68426,1770],{"class":264},[220,68428,68429],{"class":230},"'Ripples'",[220,68431,2465],{"class":264},[220,68433,68434],{"class":222,"line":650},[220,68435,1787],{"class":264},[220,68437,68438],{"class":222,"line":656},[220,68439,1792],{"class":264},[1504,68441,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":68443},[68444,68445],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":68253,"description":68261},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":68452,"title":68453,"body":68454,"category":15908,"componentType":25877,"description":68461,"extension":191,"meta":68691,"navigation":194,"path":68692,"requiresChild":32530,"seo":68693,"stem":68694,"__hash__":68695},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":68455,"toc":68687},[68456,68459,68462,68464,68466,68469,68471,68685],[11,68457,68453],{"id":68458},"roundedrect",[15,68460,68461],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31911,68463],{"component":68453},[23,68465,31915],{"id":26533},[31917,68467],{":props":68468},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,68470,31923],{"id":31922},[246,68472,68473,68513,68551,68589,68627],{":tabs":1557},[212,68474,68476],{"className":334,"code":68475,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,68477,68478,68486,68493,68501,68505],{"__ignoreMap":178},[220,68479,68480,68482,68484],{"class":222,"line":223},[220,68481,343],{"class":264},[220,68483,347],{"class":346},[220,68485,359],{"class":264},[220,68487,68488,68490],{"class":222,"line":179},[220,68489,364],{"class":264},[220,68491,68492],{"class":346},"RoundedRect\n",[220,68494,68495,68497,68499],{"class":222,"line":389},[220,68496,9635],{"class":226},[220,68498,353],{"class":264},[220,68500,9591],{"class":230},[220,68502,68503],{"class":222,"line":399},[220,68504,1234],{"class":264},[220,68506,68507,68509,68511],{"class":222,"line":644},[220,68508,402],{"class":264},[220,68510,347],{"class":346},[220,68512,359],{"class":264},[212,68514,68515],{"className":409,"code":68475,"language":411,"meta":178,"style":178},[99,68516,68517,68525,68531,68539,68543],{"__ignoreMap":178},[220,68518,68519,68521,68523],{"class":222,"line":223},[220,68520,343],{"class":264},[220,68522,347],{"class":420},[220,68524,359],{"class":264},[220,68526,68527,68529],{"class":222,"line":179},[220,68528,364],{"class":264},[220,68530,68492],{"class":420},[220,68532,68533,68535,68537],{"class":222,"line":389},[220,68534,9635],{"class":226},[220,68536,353],{"class":260},[220,68538,9591],{"class":230},[220,68540,68541],{"class":222,"line":399},[220,68542,1234],{"class":264},[220,68544,68545,68547,68549],{"class":222,"line":644},[220,68546,402],{"class":264},[220,68548,347],{"class":420},[220,68550,359],{"class":264},[212,68552,68553],{"className":2844,"code":68475,"language":2846,"meta":178,"style":178},[99,68554,68555,68563,68569,68577,68581],{"__ignoreMap":178},[220,68556,68557,68559,68561],{"class":222,"line":223},[220,68558,343],{"class":264},[220,68560,347],{"class":420},[220,68562,359],{"class":264},[220,68564,68565,68567],{"class":222,"line":179},[220,68566,364],{"class":264},[220,68568,68492],{"class":420},[220,68570,68571,68573,68575],{"class":222,"line":389},[220,68572,9635],{"class":226},[220,68574,353],{"class":264},[220,68576,9591],{"class":230},[220,68578,68579],{"class":222,"line":399},[220,68580,1234],{"class":264},[220,68582,68583,68585,68587],{"class":222,"line":644},[220,68584,402],{"class":264},[220,68586,347],{"class":420},[220,68588,359],{"class":264},[212,68590,68591],{"className":468,"code":68475,"language":469,"meta":178,"style":178},[99,68592,68593,68601,68607,68615,68619],{"__ignoreMap":178},[220,68594,68595,68597,68599],{"class":222,"line":223},[220,68596,343],{"class":264},[220,68598,347],{"class":420},[220,68600,359],{"class":264},[220,68602,68603,68605],{"class":222,"line":179},[220,68604,364],{"class":264},[220,68606,68492],{"class":420},[220,68608,68609,68611,68613],{"class":222,"line":389},[220,68610,9635],{"class":226},[220,68612,353],{"class":260},[220,68614,9591],{"class":230},[220,68616,68617],{"class":222,"line":399},[220,68618,1234],{"class":264},[220,68620,68621,68623,68625],{"class":222,"line":644},[220,68622,402],{"class":264},[220,68624,347],{"class":420},[220,68626,359],{"class":264},[212,68628,68630],{"className":251,"code":68629,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RoundedRect', props: { color: '#ffffff' } }\n ]\n})\n",[99,68631,68632,68642,68646,68660,68664,68677,68681],{"__ignoreMap":178},[220,68633,68634,68636,68638,68640],{"class":222,"line":223},[220,68635,261],{"class":260},[220,68637,11512],{"class":264},[220,68639,268],{"class":260},[220,68641,4007],{"class":230},[220,68643,68644],{"class":222,"line":179},[220,68645,647],{"emptyLinePlaceholder":194},[220,68647,68648,68650,68652,68654,68656,68658],{"class":222,"line":389},[220,68649,1735],{"class":260},[220,68651,1738],{"class":420},[220,68653,1741],{"class":260},[220,68655,1744],{"class":260},[220,68657,1747],{"class":226},[220,68659,1750],{"class":264},[220,68661,68662],{"class":222,"line":399},[220,68663,1765],{"class":264},[220,68665,68666,68668,68671,68673,68675],{"class":222,"line":644},[220,68667,1770],{"class":264},[220,68669,68670],{"class":230},"'RoundedRect'",[220,68672,1776],{"class":264},[220,68674,10169],{"class":230},[220,68676,1782],{"class":264},[220,68678,68679],{"class":222,"line":650},[220,68680,1787],{"class":264},[220,68682,68683],{"class":222,"line":656},[220,68684,1792],{"class":264},[1504,68686,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68688},[68689,68690],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":68453,"description":68461},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":68697,"title":68698,"body":68699,"category":36368,"componentType":25883,"description":68705,"extension":191,"meta":69022,"navigation":194,"path":69023,"requiresChild":194,"seo":69024,"stem":69025,"__hash__":69026},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":68700,"toc":69018},[68701,68703,68706,68708,68710,68713,68715,69016],[11,68702,68698],{"id":8059},[15,68704,68705],{},"Adjust color saturation intensity",[31911,68707],{"component":68698},[23,68709,31915],{"id":26533},[31917,68711],{":props":68712},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,68714,31923],{"id":31922},[246,68716,68717,68773,68832,68888,68946],{":tabs":1557},[212,68718,68720],{"className":334,"code":68719,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68721,68722,68730,68737,68745,68749,68757,68765],{"__ignoreMap":178},[220,68723,68724,68726,68728],{"class":222,"line":223},[220,68725,343],{"class":264},[220,68727,347],{"class":346},[220,68729,359],{"class":264},[220,68731,68732,68734],{"class":222,"line":179},[220,68733,364],{"class":264},[220,68735,68736],{"class":346},"Saturation\n",[220,68738,68739,68741,68743],{"class":222,"line":389},[220,68740,20371],{"class":226},[220,68742,353],{"class":264},[220,68744,36625],{"class":230},[220,68746,68747],{"class":222,"line":399},[220,68748,31959],{"class":264},[220,68750,68751,68753,68755],{"class":222,"line":644},[220,68752,2550],{"class":264},[220,68754,2553],{"class":346},[220,68756,386],{"class":264},[220,68758,68759,68761,68763],{"class":222,"line":650},[220,68760,2567],{"class":264},[220,68762,68698],{"class":346},[220,68764,359],{"class":264},[220,68766,68767,68769,68771],{"class":222,"line":656},[220,68768,402],{"class":264},[220,68770,347],{"class":346},[220,68772,359],{"class":264},[212,68774,68776],{"className":409,"code":68775,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68777,68778,68786,68792,68804,68808,68816,68824],{"__ignoreMap":178},[220,68779,68780,68782,68784],{"class":222,"line":223},[220,68781,343],{"class":264},[220,68783,347],{"class":420},[220,68785,359],{"class":264},[220,68787,68788,68790],{"class":222,"line":179},[220,68789,364],{"class":264},[220,68791,68736],{"class":420},[220,68793,68794,68796,68798,68800,68802],{"class":222,"line":389},[220,68795,20482],{"class":226},[220,68797,353],{"class":260},[220,68799,743],{"class":264},[220,68801,8677],{"class":420},[220,68803,749],{"class":264},[220,68805,68806],{"class":222,"line":399},[220,68807,31959],{"class":264},[220,68809,68810,68812,68814],{"class":222,"line":644},[220,68811,2550],{"class":264},[220,68813,2553],{"class":420},[220,68815,386],{"class":264},[220,68817,68818,68820,68822],{"class":222,"line":650},[220,68819,2567],{"class":264},[220,68821,68698],{"class":420},[220,68823,359],{"class":264},[220,68825,68826,68828,68830],{"class":222,"line":656},[220,68827,402],{"class":264},[220,68829,347],{"class":420},[220,68831,359],{"class":264},[212,68833,68834],{"className":2844,"code":68775,"language":2846,"meta":178,"style":178},[99,68835,68836,68844,68850,68860,68864,68872,68880],{"__ignoreMap":178},[220,68837,68838,68840,68842],{"class":222,"line":223},[220,68839,343],{"class":264},[220,68841,347],{"class":420},[220,68843,359],{"class":264},[220,68845,68846,68848],{"class":222,"line":179},[220,68847,364],{"class":264},[220,68849,68736],{"class":420},[220,68851,68852,68854,68856,68858],{"class":222,"line":389},[220,68853,20482],{"class":226},[220,68855,29871],{"class":264},[220,68857,8677],{"class":420},[220,68859,749],{"class":264},[220,68861,68862],{"class":222,"line":399},[220,68863,31959],{"class":264},[220,68865,68866,68868,68870],{"class":222,"line":644},[220,68867,2550],{"class":264},[220,68869,2553],{"class":420},[220,68871,386],{"class":264},[220,68873,68874,68876,68878],{"class":222,"line":650},[220,68875,2567],{"class":264},[220,68877,68698],{"class":420},[220,68879,359],{"class":264},[220,68881,68882,68884,68886],{"class":222,"line":656},[220,68883,402],{"class":264},[220,68885,347],{"class":420},[220,68887,359],{"class":264},[212,68889,68890],{"className":468,"code":68775,"language":469,"meta":178,"style":178},[99,68891,68892,68900,68906,68918,68922,68930,68938],{"__ignoreMap":178},[220,68893,68894,68896,68898],{"class":222,"line":223},[220,68895,343],{"class":264},[220,68897,347],{"class":420},[220,68899,359],{"class":264},[220,68901,68902,68904],{"class":222,"line":179},[220,68903,364],{"class":264},[220,68905,68736],{"class":420},[220,68907,68908,68910,68912,68914,68916],{"class":222,"line":389},[220,68909,20482],{"class":226},[220,68911,353],{"class":260},[220,68913,743],{"class":264},[220,68915,8677],{"class":420},[220,68917,749],{"class":264},[220,68919,68920],{"class":222,"line":399},[220,68921,31959],{"class":264},[220,68923,68924,68926,68928],{"class":222,"line":644},[220,68925,2550],{"class":264},[220,68927,2553],{"class":420},[220,68929,386],{"class":264},[220,68931,68932,68934,68936],{"class":222,"line":650},[220,68933,2567],{"class":264},[220,68935,68698],{"class":420},[220,68937,359],{"class":264},[220,68939,68940,68942,68944],{"class":222,"line":656},[220,68941,402],{"class":264},[220,68943,347],{"class":420},[220,68945,359],{"class":264},[212,68947,68949],{"className":251,"code":68948,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Saturation', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,68950,68951,68961,68965,68979,68983,68996,69004,69008,69012],{"__ignoreMap":178},[220,68952,68953,68955,68957,68959],{"class":222,"line":223},[220,68954,261],{"class":260},[220,68956,11512],{"class":264},[220,68958,268],{"class":260},[220,68960,4007],{"class":230},[220,68962,68963],{"class":222,"line":179},[220,68964,647],{"emptyLinePlaceholder":194},[220,68966,68967,68969,68971,68973,68975,68977],{"class":222,"line":389},[220,68968,1735],{"class":260},[220,68970,1738],{"class":420},[220,68972,1741],{"class":260},[220,68974,1744],{"class":260},[220,68976,1747],{"class":226},[220,68978,1750],{"class":264},[220,68980,68981],{"class":222,"line":399},[220,68982,1765],{"class":264},[220,68984,68985,68987,68990,68992,68994],{"class":222,"line":644},[220,68986,1770],{"class":264},[220,68988,68989],{"class":230},"'Saturation'",[220,68991,32203],{"class":264},[220,68993,8677],{"class":420},[220,68995,7546],{"class":264},[220,68997,68998,69000,69002],{"class":222,"line":650},[220,68999,7014],{"class":264},[220,69001,3206],{"class":230},[220,69003,2465],{"class":264},[220,69005,69006],{"class":222,"line":656},[220,69007,7031],{"class":264},[220,69009,69010],{"class":222,"line":673},[220,69011,1787],{"class":264},[220,69013,69014],{"class":222,"line":682},[220,69015,1792],{"class":264},[1504,69017,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69019},[69020,69021],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":68698,"description":68705},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":69028,"title":69029,"body":69030,"category":33063,"componentType":25877,"description":69037,"extension":191,"meta":69222,"navigation":194,"path":69223,"requiresChild":32530,"seo":69224,"stem":69225,"__hash__":69226},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":69031,"toc":69218},[69032,69035,69038,69040,69042,69045,69047,69216],[11,69033,69029],{"id":69034},"scratches",[15,69036,69037],{},"Fine hairline scratches, like a worn film or scratched surface",[31911,69039],{"component":69029},[23,69041,31915],{"id":26533},[31917,69043],{":props":69044},"[{\"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 = more, finer scratches)\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of the scratches (higher = bolder streaks)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,69046,31923],{"id":31922},[246,69048,69049,69078,69106,69134,69162],{":tabs":1557},[212,69050,69052],{"className":334,"code":69051,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,69053,69054,69062,69070],{"__ignoreMap":178},[220,69055,69056,69058,69060],{"class":222,"line":223},[220,69057,343],{"class":264},[220,69059,347],{"class":346},[220,69061,359],{"class":264},[220,69063,69064,69066,69068],{"class":222,"line":179},[220,69065,364],{"class":264},[220,69067,69029],{"class":346},[220,69069,386],{"class":264},[220,69071,69072,69074,69076],{"class":222,"line":389},[220,69073,402],{"class":264},[220,69075,347],{"class":346},[220,69077,359],{"class":264},[212,69079,69080],{"className":409,"code":69051,"language":411,"meta":178,"style":178},[99,69081,69082,69090,69098],{"__ignoreMap":178},[220,69083,69084,69086,69088],{"class":222,"line":223},[220,69085,343],{"class":264},[220,69087,347],{"class":420},[220,69089,359],{"class":264},[220,69091,69092,69094,69096],{"class":222,"line":179},[220,69093,364],{"class":264},[220,69095,69029],{"class":420},[220,69097,386],{"class":264},[220,69099,69100,69102,69104],{"class":222,"line":389},[220,69101,402],{"class":264},[220,69103,347],{"class":420},[220,69105,359],{"class":264},[212,69107,69108],{"className":2844,"code":69051,"language":2846,"meta":178,"style":178},[99,69109,69110,69118,69126],{"__ignoreMap":178},[220,69111,69112,69114,69116],{"class":222,"line":223},[220,69113,343],{"class":264},[220,69115,347],{"class":420},[220,69117,359],{"class":264},[220,69119,69120,69122,69124],{"class":222,"line":179},[220,69121,364],{"class":264},[220,69123,69029],{"class":420},[220,69125,386],{"class":264},[220,69127,69128,69130,69132],{"class":222,"line":389},[220,69129,402],{"class":264},[220,69131,347],{"class":420},[220,69133,359],{"class":264},[212,69135,69136],{"className":468,"code":69051,"language":469,"meta":178,"style":178},[99,69137,69138,69146,69154],{"__ignoreMap":178},[220,69139,69140,69142,69144],{"class":222,"line":223},[220,69141,343],{"class":264},[220,69143,347],{"class":420},[220,69145,359],{"class":264},[220,69147,69148,69150,69152],{"class":222,"line":179},[220,69149,364],{"class":264},[220,69151,69029],{"class":420},[220,69153,386],{"class":264},[220,69155,69156,69158,69160],{"class":222,"line":389},[220,69157,402],{"class":264},[220,69159,347],{"class":420},[220,69161,359],{"class":264},[212,69163,69165],{"className":251,"code":69164,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Scratches', props: {} }\n ]\n})\n",[99,69166,69167,69177,69181,69195,69199,69208,69212],{"__ignoreMap":178},[220,69168,69169,69171,69173,69175],{"class":222,"line":223},[220,69170,261],{"class":260},[220,69172,11512],{"class":264},[220,69174,268],{"class":260},[220,69176,4007],{"class":230},[220,69178,69179],{"class":222,"line":179},[220,69180,647],{"emptyLinePlaceholder":194},[220,69182,69183,69185,69187,69189,69191,69193],{"class":222,"line":389},[220,69184,1735],{"class":260},[220,69186,1738],{"class":420},[220,69188,1741],{"class":260},[220,69190,1744],{"class":260},[220,69192,1747],{"class":226},[220,69194,1750],{"class":264},[220,69196,69197],{"class":222,"line":399},[220,69198,1765],{"class":264},[220,69200,69201,69203,69206],{"class":222,"line":644},[220,69202,1770],{"class":264},[220,69204,69205],{"class":230},"'Scratches'",[220,69207,2465],{"class":264},[220,69209,69210],{"class":222,"line":650},[220,69211,1787],{"class":264},[220,69213,69214],{"class":222,"line":656},[220,69215,1792],{"class":264},[1504,69217,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69219},[69220,69221],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":69029,"description":69037},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":69228,"title":69229,"body":69230,"category":36368,"componentType":25883,"description":69237,"extension":191,"meta":69498,"navigation":194,"path":69499,"requiresChild":194,"seo":69500,"stem":69501,"__hash__":69502},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":69231,"toc":69494},[69232,69235,69238,69240,69242,69245,69247,69492],[11,69233,69229],{"id":69234},"sharpness",[15,69236,69237],{},"Adjust image sharpness using a convolution kernel",[31911,69239],{"component":69229},[23,69241,31915],{"id":26533},[31917,69243],{":props":69244},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,69246,31923],{"id":31922},[246,69248,69249,69294,69338,69382,69426],{":tabs":1557},[212,69250,69252],{"className":334,"code":69251,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,69253,69254,69262,69270,69278,69286],{"__ignoreMap":178},[220,69255,69256,69258,69260],{"class":222,"line":223},[220,69257,343],{"class":264},[220,69259,347],{"class":346},[220,69261,359],{"class":264},[220,69263,69264,69266,69268],{"class":222,"line":179},[220,69265,364],{"class":264},[220,69267,69229],{"class":346},[220,69269,359],{"class":264},[220,69271,69272,69274,69276],{"class":222,"line":389},[220,69273,2550],{"class":264},[220,69275,2553],{"class":346},[220,69277,386],{"class":264},[220,69279,69280,69282,69284],{"class":222,"line":399},[220,69281,2567],{"class":264},[220,69283,69229],{"class":346},[220,69285,359],{"class":264},[220,69287,69288,69290,69292],{"class":222,"line":644},[220,69289,402],{"class":264},[220,69291,347],{"class":346},[220,69293,359],{"class":264},[212,69295,69296],{"className":409,"code":69251,"language":411,"meta":178,"style":178},[99,69297,69298,69306,69314,69322,69330],{"__ignoreMap":178},[220,69299,69300,69302,69304],{"class":222,"line":223},[220,69301,343],{"class":264},[220,69303,347],{"class":420},[220,69305,359],{"class":264},[220,69307,69308,69310,69312],{"class":222,"line":179},[220,69309,364],{"class":264},[220,69311,69229],{"class":420},[220,69313,359],{"class":264},[220,69315,69316,69318,69320],{"class":222,"line":389},[220,69317,2550],{"class":264},[220,69319,2553],{"class":420},[220,69321,386],{"class":264},[220,69323,69324,69326,69328],{"class":222,"line":399},[220,69325,2567],{"class":264},[220,69327,69229],{"class":420},[220,69329,359],{"class":264},[220,69331,69332,69334,69336],{"class":222,"line":644},[220,69333,402],{"class":264},[220,69335,347],{"class":420},[220,69337,359],{"class":264},[212,69339,69340],{"className":2844,"code":69251,"language":2846,"meta":178,"style":178},[99,69341,69342,69350,69358,69366,69374],{"__ignoreMap":178},[220,69343,69344,69346,69348],{"class":222,"line":223},[220,69345,343],{"class":264},[220,69347,347],{"class":420},[220,69349,359],{"class":264},[220,69351,69352,69354,69356],{"class":222,"line":179},[220,69353,364],{"class":264},[220,69355,69229],{"class":420},[220,69357,359],{"class":264},[220,69359,69360,69362,69364],{"class":222,"line":389},[220,69361,2550],{"class":264},[220,69363,2553],{"class":420},[220,69365,386],{"class":264},[220,69367,69368,69370,69372],{"class":222,"line":399},[220,69369,2567],{"class":264},[220,69371,69229],{"class":420},[220,69373,359],{"class":264},[220,69375,69376,69378,69380],{"class":222,"line":644},[220,69377,402],{"class":264},[220,69379,347],{"class":420},[220,69381,359],{"class":264},[212,69383,69384],{"className":468,"code":69251,"language":469,"meta":178,"style":178},[99,69385,69386,69394,69402,69410,69418],{"__ignoreMap":178},[220,69387,69388,69390,69392],{"class":222,"line":223},[220,69389,343],{"class":264},[220,69391,347],{"class":420},[220,69393,359],{"class":264},[220,69395,69396,69398,69400],{"class":222,"line":179},[220,69397,364],{"class":264},[220,69399,69229],{"class":420},[220,69401,359],{"class":264},[220,69403,69404,69406,69408],{"class":222,"line":389},[220,69405,2550],{"class":264},[220,69407,2553],{"class":420},[220,69409,386],{"class":264},[220,69411,69412,69414,69416],{"class":222,"line":399},[220,69413,2567],{"class":264},[220,69415,69229],{"class":420},[220,69417,359],{"class":264},[220,69419,69420,69422,69424],{"class":222,"line":644},[220,69421,402],{"class":264},[220,69423,347],{"class":420},[220,69425,359],{"class":264},[212,69427,69429],{"className":251,"code":69428,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Sharpness', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,69430,69431,69441,69445,69459,69463,69472,69480,69484,69488],{"__ignoreMap":178},[220,69432,69433,69435,69437,69439],{"class":222,"line":223},[220,69434,261],{"class":260},[220,69436,11512],{"class":264},[220,69438,268],{"class":260},[220,69440,4007],{"class":230},[220,69442,69443],{"class":222,"line":179},[220,69444,647],{"emptyLinePlaceholder":194},[220,69446,69447,69449,69451,69453,69455,69457],{"class":222,"line":389},[220,69448,1735],{"class":260},[220,69450,1738],{"class":420},[220,69452,1741],{"class":260},[220,69454,1744],{"class":260},[220,69456,1747],{"class":226},[220,69458,1750],{"class":264},[220,69460,69461],{"class":222,"line":399},[220,69462,1765],{"class":264},[220,69464,69465,69467,69470],{"class":222,"line":644},[220,69466,1770],{"class":264},[220,69468,69469],{"class":230},"'Sharpness'",[220,69471,7009],{"class":264},[220,69473,69474,69476,69478],{"class":222,"line":650},[220,69475,7014],{"class":264},[220,69477,3206],{"class":230},[220,69479,2465],{"class":264},[220,69481,69482],{"class":222,"line":656},[220,69483,7031],{"class":264},[220,69485,69486],{"class":222,"line":673},[220,69487,1787],{"class":264},[220,69489,69490],{"class":222,"line":682},[220,69491,1792],{"class":264},[1504,69493,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":69495},[69496,69497],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":69229,"description":69237},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":69504,"title":69505,"body":69506,"category":35559,"componentType":25883,"description":69513,"extension":191,"meta":69878,"navigation":194,"path":69879,"requiresChild":194,"seo":69880,"stem":69881,"__hash__":69882},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":69507,"toc":69874},[69508,69511,69514,69516,69518,69521,69523,69872],[11,69509,69505],{"id":69510},"shatter",[15,69512,69513],{},"Broken glass effect with tectonic plate displacement",[31911,69515],{"component":69505},[23,69517,31915],{"id":26533},[31917,69519],{":props":69520},"[{\"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\u002Fdistort 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,69522,31923],{"id":31922},[246,69524,69525,69590,69662,69728,69798],{":tabs":1557},[212,69526,69528],{"className":334,"code":69527,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CShatter\n :intensity=\"4\"\n :radius=\"0.4\"\n >\n \u003CCircle \u002F>\n \u003C\u002FShatter>\n\u003C\u002FShader>\n",[99,69529,69530,69538,69545,69554,69562,69566,69574,69582],{"__ignoreMap":178},[220,69531,69532,69534,69536],{"class":222,"line":223},[220,69533,343],{"class":264},[220,69535,347],{"class":346},[220,69537,359],{"class":264},[220,69539,69540,69542],{"class":222,"line":179},[220,69541,364],{"class":264},[220,69543,69544],{"class":346},"Shatter\n",[220,69546,69547,69549,69551],{"class":222,"line":389},[220,69548,20371],{"class":226},[220,69550,353],{"class":264},[220,69552,69553],{"class":230},"\"4\"\n",[220,69555,69556,69558,69560],{"class":222,"line":399},[220,69557,17405],{"class":226},[220,69559,353],{"class":264},[220,69561,48148],{"class":230},[220,69563,69564],{"class":222,"line":644},[220,69565,31959],{"class":264},[220,69567,69568,69570,69572],{"class":222,"line":650},[220,69569,2550],{"class":264},[220,69571,2553],{"class":346},[220,69573,386],{"class":264},[220,69575,69576,69578,69580],{"class":222,"line":656},[220,69577,2567],{"class":264},[220,69579,69505],{"class":346},[220,69581,359],{"class":264},[220,69583,69584,69586,69588],{"class":222,"line":673},[220,69585,402],{"class":264},[220,69587,347],{"class":346},[220,69589,359],{"class":264},[212,69591,69593],{"className":409,"code":69592,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CShatter\n intensity={4}\n radius={0.4}\n >\n \u003CCircle \u002F>\n \u003C\u002FShatter>\n\u003C\u002FShader>\n",[99,69594,69595,69603,69609,69622,69634,69638,69646,69654],{"__ignoreMap":178},[220,69596,69597,69599,69601],{"class":222,"line":223},[220,69598,343],{"class":264},[220,69600,347],{"class":420},[220,69602,359],{"class":264},[220,69604,69605,69607],{"class":222,"line":179},[220,69606,364],{"class":264},[220,69608,69544],{"class":420},[220,69610,69611,69613,69615,69617,69620],{"class":222,"line":389},[220,69612,20482],{"class":226},[220,69614,353],{"class":260},[220,69616,743],{"class":264},[220,69618,69619],{"class":420},"4",[220,69621,749],{"class":264},[220,69623,69624,69626,69628,69630,69632],{"class":222,"line":399},[220,69625,9645],{"class":226},[220,69627,353],{"class":260},[220,69629,743],{"class":264},[220,69631,8249],{"class":420},[220,69633,749],{"class":264},[220,69635,69636],{"class":222,"line":644},[220,69637,31959],{"class":264},[220,69639,69640,69642,69644],{"class":222,"line":650},[220,69641,2550],{"class":264},[220,69643,2553],{"class":420},[220,69645,386],{"class":264},[220,69647,69648,69650,69652],{"class":222,"line":656},[220,69649,2567],{"class":264},[220,69651,69505],{"class":420},[220,69653,359],{"class":264},[220,69655,69656,69658,69660],{"class":222,"line":673},[220,69657,402],{"class":264},[220,69659,347],{"class":420},[220,69661,359],{"class":264},[212,69663,69664],{"className":2844,"code":69592,"language":2846,"meta":178,"style":178},[99,69665,69666,69674,69680,69690,69700,69704,69712,69720],{"__ignoreMap":178},[220,69667,69668,69670,69672],{"class":222,"line":223},[220,69669,343],{"class":264},[220,69671,347],{"class":420},[220,69673,359],{"class":264},[220,69675,69676,69678],{"class":222,"line":179},[220,69677,364],{"class":264},[220,69679,69544],{"class":420},[220,69681,69682,69684,69686,69688],{"class":222,"line":389},[220,69683,20482],{"class":226},[220,69685,29871],{"class":264},[220,69687,69619],{"class":420},[220,69689,749],{"class":264},[220,69691,69692,69694,69696,69698],{"class":222,"line":399},[220,69693,9645],{"class":226},[220,69695,29871],{"class":264},[220,69697,8249],{"class":420},[220,69699,749],{"class":264},[220,69701,69702],{"class":222,"line":644},[220,69703,31959],{"class":264},[220,69705,69706,69708,69710],{"class":222,"line":650},[220,69707,2550],{"class":264},[220,69709,2553],{"class":420},[220,69711,386],{"class":264},[220,69713,69714,69716,69718],{"class":222,"line":656},[220,69715,2567],{"class":264},[220,69717,69505],{"class":420},[220,69719,359],{"class":264},[220,69721,69722,69724,69726],{"class":222,"line":673},[220,69723,402],{"class":264},[220,69725,347],{"class":420},[220,69727,359],{"class":264},[212,69729,69730],{"className":468,"code":69592,"language":469,"meta":178,"style":178},[99,69731,69732,69740,69746,69758,69770,69774,69782,69790],{"__ignoreMap":178},[220,69733,69734,69736,69738],{"class":222,"line":223},[220,69735,343],{"class":264},[220,69737,347],{"class":420},[220,69739,359],{"class":264},[220,69741,69742,69744],{"class":222,"line":179},[220,69743,364],{"class":264},[220,69745,69544],{"class":420},[220,69747,69748,69750,69752,69754,69756],{"class":222,"line":389},[220,69749,20482],{"class":226},[220,69751,353],{"class":260},[220,69753,743],{"class":264},[220,69755,69619],{"class":420},[220,69757,749],{"class":264},[220,69759,69760,69762,69764,69766,69768],{"class":222,"line":399},[220,69761,9645],{"class":226},[220,69763,353],{"class":260},[220,69765,743],{"class":264},[220,69767,8249],{"class":420},[220,69769,749],{"class":264},[220,69771,69772],{"class":222,"line":644},[220,69773,31959],{"class":264},[220,69775,69776,69778,69780],{"class":222,"line":650},[220,69777,2550],{"class":264},[220,69779,2553],{"class":420},[220,69781,386],{"class":264},[220,69783,69784,69786,69788],{"class":222,"line":656},[220,69785,2567],{"class":264},[220,69787,69505],{"class":420},[220,69789,359],{"class":264},[220,69791,69792,69794,69796],{"class":222,"line":673},[220,69793,402],{"class":264},[220,69795,347],{"class":420},[220,69797,359],{"class":264},[212,69799,69801],{"className":251,"code":69800,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,69802,69803,69813,69817,69831,69835,69852,69860,69864,69868],{"__ignoreMap":178},[220,69804,69805,69807,69809,69811],{"class":222,"line":223},[220,69806,261],{"class":260},[220,69808,11512],{"class":264},[220,69810,268],{"class":260},[220,69812,4007],{"class":230},[220,69814,69815],{"class":222,"line":179},[220,69816,647],{"emptyLinePlaceholder":194},[220,69818,69819,69821,69823,69825,69827,69829],{"class":222,"line":389},[220,69820,1735],{"class":260},[220,69822,1738],{"class":420},[220,69824,1741],{"class":260},[220,69826,1744],{"class":260},[220,69828,1747],{"class":226},[220,69830,1750],{"class":264},[220,69832,69833],{"class":222,"line":399},[220,69834,1765],{"class":264},[220,69836,69837,69839,69842,69844,69846,69848,69850],{"class":222,"line":644},[220,69838,1770],{"class":264},[220,69840,69841],{"class":230},"'Shatter'",[220,69843,32203],{"class":264},[220,69845,69619],{"class":420},[220,69847,6566],{"class":264},[220,69849,8249],{"class":420},[220,69851,7546],{"class":264},[220,69853,69854,69856,69858],{"class":222,"line":650},[220,69855,7014],{"class":264},[220,69857,3206],{"class":230},[220,69859,2465],{"class":264},[220,69861,69862],{"class":222,"line":656},[220,69863,7031],{"class":264},[220,69865,69866],{"class":222,"line":673},[220,69867,1787],{"class":264},[220,69869,69870],{"class":222,"line":682},[220,69871,1792],{"class":264},[1504,69873,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69875},[69876,69877],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":69505,"description":69513},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":69884,"title":69885,"body":69886,"category":33063,"componentType":25877,"description":69893,"extension":191,"meta":70078,"navigation":194,"path":70079,"requiresChild":32530,"seo":70080,"stem":70081,"__hash__":70082},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":69887,"toc":70074},[69888,69891,69894,69896,69898,69901,69903,70072],[11,69889,69885],{"id":69890},"simplexnoise",[15,69892,69893],{},"Organic noise with animated movement",[31911,69895],{"component":69885},[23,69897,31915],{"id":26533},[31917,69899],{":props":69900},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,69902,31923],{"id":31922},[246,69904,69905,69934,69962,69990,70018],{":tabs":1557},[212,69906,69908],{"className":334,"code":69907,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,69909,69910,69918,69926],{"__ignoreMap":178},[220,69911,69912,69914,69916],{"class":222,"line":223},[220,69913,343],{"class":264},[220,69915,347],{"class":346},[220,69917,359],{"class":264},[220,69919,69920,69922,69924],{"class":222,"line":179},[220,69921,364],{"class":264},[220,69923,69885],{"class":346},[220,69925,386],{"class":264},[220,69927,69928,69930,69932],{"class":222,"line":389},[220,69929,402],{"class":264},[220,69931,347],{"class":346},[220,69933,359],{"class":264},[212,69935,69936],{"className":409,"code":69907,"language":411,"meta":178,"style":178},[99,69937,69938,69946,69954],{"__ignoreMap":178},[220,69939,69940,69942,69944],{"class":222,"line":223},[220,69941,343],{"class":264},[220,69943,347],{"class":420},[220,69945,359],{"class":264},[220,69947,69948,69950,69952],{"class":222,"line":179},[220,69949,364],{"class":264},[220,69951,69885],{"class":420},[220,69953,386],{"class":264},[220,69955,69956,69958,69960],{"class":222,"line":389},[220,69957,402],{"class":264},[220,69959,347],{"class":420},[220,69961,359],{"class":264},[212,69963,69964],{"className":2844,"code":69907,"language":2846,"meta":178,"style":178},[99,69965,69966,69974,69982],{"__ignoreMap":178},[220,69967,69968,69970,69972],{"class":222,"line":223},[220,69969,343],{"class":264},[220,69971,347],{"class":420},[220,69973,359],{"class":264},[220,69975,69976,69978,69980],{"class":222,"line":179},[220,69977,364],{"class":264},[220,69979,69885],{"class":420},[220,69981,386],{"class":264},[220,69983,69984,69986,69988],{"class":222,"line":389},[220,69985,402],{"class":264},[220,69987,347],{"class":420},[220,69989,359],{"class":264},[212,69991,69992],{"className":468,"code":69907,"language":469,"meta":178,"style":178},[99,69993,69994,70002,70010],{"__ignoreMap":178},[220,69995,69996,69998,70000],{"class":222,"line":223},[220,69997,343],{"class":264},[220,69999,347],{"class":420},[220,70001,359],{"class":264},[220,70003,70004,70006,70008],{"class":222,"line":179},[220,70005,364],{"class":264},[220,70007,69885],{"class":420},[220,70009,386],{"class":264},[220,70011,70012,70014,70016],{"class":222,"line":389},[220,70013,402],{"class":264},[220,70015,347],{"class":420},[220,70017,359],{"class":264},[212,70019,70021],{"className":251,"code":70020,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SimplexNoise', props: {} }\n ]\n})\n",[99,70022,70023,70033,70037,70051,70055,70064,70068],{"__ignoreMap":178},[220,70024,70025,70027,70029,70031],{"class":222,"line":223},[220,70026,261],{"class":260},[220,70028,11512],{"class":264},[220,70030,268],{"class":260},[220,70032,4007],{"class":230},[220,70034,70035],{"class":222,"line":179},[220,70036,647],{"emptyLinePlaceholder":194},[220,70038,70039,70041,70043,70045,70047,70049],{"class":222,"line":389},[220,70040,1735],{"class":260},[220,70042,1738],{"class":420},[220,70044,1741],{"class":260},[220,70046,1744],{"class":260},[220,70048,1747],{"class":226},[220,70050,1750],{"class":264},[220,70052,70053],{"class":222,"line":399},[220,70054,1765],{"class":264},[220,70056,70057,70059,70062],{"class":222,"line":644},[220,70058,1770],{"class":264},[220,70060,70061],{"class":230},"'SimplexNoise'",[220,70063,2465],{"class":264},[220,70065,70066],{"class":222,"line":650},[220,70067,1787],{"class":264},[220,70069,70070],{"class":222,"line":656},[220,70071,1792],{"class":264},[1504,70073,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70075},[70076,70077],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":69885,"description":69893},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":70084,"title":70085,"body":70086,"category":33063,"componentType":25877,"description":70093,"extension":191,"meta":70323,"navigation":194,"path":70324,"requiresChild":32530,"seo":70325,"stem":70326,"__hash__":70327},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":70087,"toc":70319},[70088,70091,70094,70096,70098,70101,70103,70317],[11,70089,70085],{"id":70090},"sinewave",[15,70092,70093],{},"Animated wave with thickness and softness",[31911,70095],{"component":70085},[23,70097,31915],{"id":26533},[31917,70099],{":props":70100},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the sine wave\"},{\"name\":\"amplitude\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"The height\u002Famplitude of the sine wave\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The frequency\u002Fnumber 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,70102,31923],{"id":31922},[246,70104,70105,70145,70183,70221,70259],{":tabs":1557},[212,70106,70108],{"className":334,"code":70107,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,70109,70110,70118,70125,70133,70137],{"__ignoreMap":178},[220,70111,70112,70114,70116],{"class":222,"line":223},[220,70113,343],{"class":264},[220,70115,347],{"class":346},[220,70117,359],{"class":264},[220,70119,70120,70122],{"class":222,"line":179},[220,70121,364],{"class":264},[220,70123,70124],{"class":346},"SineWave\n",[220,70126,70127,70129,70131],{"class":222,"line":389},[220,70128,9635],{"class":226},[220,70130,353],{"class":264},[220,70132,9591],{"class":230},[220,70134,70135],{"class":222,"line":399},[220,70136,1234],{"class":264},[220,70138,70139,70141,70143],{"class":222,"line":644},[220,70140,402],{"class":264},[220,70142,347],{"class":346},[220,70144,359],{"class":264},[212,70146,70147],{"className":409,"code":70107,"language":411,"meta":178,"style":178},[99,70148,70149,70157,70163,70171,70175],{"__ignoreMap":178},[220,70150,70151,70153,70155],{"class":222,"line":223},[220,70152,343],{"class":264},[220,70154,347],{"class":420},[220,70156,359],{"class":264},[220,70158,70159,70161],{"class":222,"line":179},[220,70160,364],{"class":264},[220,70162,70124],{"class":420},[220,70164,70165,70167,70169],{"class":222,"line":389},[220,70166,9635],{"class":226},[220,70168,353],{"class":260},[220,70170,9591],{"class":230},[220,70172,70173],{"class":222,"line":399},[220,70174,1234],{"class":264},[220,70176,70177,70179,70181],{"class":222,"line":644},[220,70178,402],{"class":264},[220,70180,347],{"class":420},[220,70182,359],{"class":264},[212,70184,70185],{"className":2844,"code":70107,"language":2846,"meta":178,"style":178},[99,70186,70187,70195,70201,70209,70213],{"__ignoreMap":178},[220,70188,70189,70191,70193],{"class":222,"line":223},[220,70190,343],{"class":264},[220,70192,347],{"class":420},[220,70194,359],{"class":264},[220,70196,70197,70199],{"class":222,"line":179},[220,70198,364],{"class":264},[220,70200,70124],{"class":420},[220,70202,70203,70205,70207],{"class":222,"line":389},[220,70204,9635],{"class":226},[220,70206,353],{"class":264},[220,70208,9591],{"class":230},[220,70210,70211],{"class":222,"line":399},[220,70212,1234],{"class":264},[220,70214,70215,70217,70219],{"class":222,"line":644},[220,70216,402],{"class":264},[220,70218,347],{"class":420},[220,70220,359],{"class":264},[212,70222,70223],{"className":468,"code":70107,"language":469,"meta":178,"style":178},[99,70224,70225,70233,70239,70247,70251],{"__ignoreMap":178},[220,70226,70227,70229,70231],{"class":222,"line":223},[220,70228,343],{"class":264},[220,70230,347],{"class":420},[220,70232,359],{"class":264},[220,70234,70235,70237],{"class":222,"line":179},[220,70236,364],{"class":264},[220,70238,70124],{"class":420},[220,70240,70241,70243,70245],{"class":222,"line":389},[220,70242,9635],{"class":226},[220,70244,353],{"class":260},[220,70246,9591],{"class":230},[220,70248,70249],{"class":222,"line":399},[220,70250,1234],{"class":264},[220,70252,70253,70255,70257],{"class":222,"line":644},[220,70254,402],{"class":264},[220,70256,347],{"class":420},[220,70258,359],{"class":264},[212,70260,70262],{"className":251,"code":70261,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SineWave', props: { color: '#ffffff' } }\n ]\n})\n",[99,70263,70264,70274,70278,70292,70296,70309,70313],{"__ignoreMap":178},[220,70265,70266,70268,70270,70272],{"class":222,"line":223},[220,70267,261],{"class":260},[220,70269,11512],{"class":264},[220,70271,268],{"class":260},[220,70273,4007],{"class":230},[220,70275,70276],{"class":222,"line":179},[220,70277,647],{"emptyLinePlaceholder":194},[220,70279,70280,70282,70284,70286,70288,70290],{"class":222,"line":389},[220,70281,1735],{"class":260},[220,70283,1738],{"class":420},[220,70285,1741],{"class":260},[220,70287,1744],{"class":260},[220,70289,1747],{"class":226},[220,70291,1750],{"class":264},[220,70293,70294],{"class":222,"line":399},[220,70295,1765],{"class":264},[220,70297,70298,70300,70303,70305,70307],{"class":222,"line":644},[220,70299,1770],{"class":264},[220,70301,70302],{"class":230},"'SineWave'",[220,70304,1776],{"class":264},[220,70306,10169],{"class":230},[220,70308,1782],{"class":264},[220,70310,70311],{"class":222,"line":650},[220,70312,1787],{"class":264},[220,70314,70315],{"class":222,"line":656},[220,70316,1792],{"class":264},[1504,70318,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70320},[70321,70322],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":70085,"description":70093},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":70329,"title":70330,"body":70331,"category":33673,"componentType":25883,"description":70338,"extension":191,"meta":70599,"navigation":194,"path":70600,"requiresChild":194,"seo":70601,"stem":70602,"__hash__":70603},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":70332,"toc":70595},[70333,70336,70339,70341,70343,70346,70348,70593],[11,70334,70330],{"id":70335},"slicewipe",[15,70337,70338],{},"Slice the content into strips that slide away in alternating directions",[31911,70340],{"component":70330},[23,70342,31915],{"id":26533},[31917,70344],{":props":70345},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the strips have slid (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the strips in degrees (0 = vertical strips sliding up and down)\"},{\"name\":\"sliceCount\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of strips across the frame\"}]",[23,70347,31923],{"id":31922},[246,70349,70350,70395,70439,70483,70527],{":tabs":1557},[212,70351,70353],{"className":334,"code":70352,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,70354,70355,70363,70371,70379,70387],{"__ignoreMap":178},[220,70356,70357,70359,70361],{"class":222,"line":223},[220,70358,343],{"class":264},[220,70360,347],{"class":346},[220,70362,359],{"class":264},[220,70364,70365,70367,70369],{"class":222,"line":179},[220,70366,364],{"class":264},[220,70368,70330],{"class":346},[220,70370,359],{"class":264},[220,70372,70373,70375,70377],{"class":222,"line":389},[220,70374,2550],{"class":264},[220,70376,2553],{"class":346},[220,70378,386],{"class":264},[220,70380,70381,70383,70385],{"class":222,"line":399},[220,70382,2567],{"class":264},[220,70384,70330],{"class":346},[220,70386,359],{"class":264},[220,70388,70389,70391,70393],{"class":222,"line":644},[220,70390,402],{"class":264},[220,70392,347],{"class":346},[220,70394,359],{"class":264},[212,70396,70397],{"className":409,"code":70352,"language":411,"meta":178,"style":178},[99,70398,70399,70407,70415,70423,70431],{"__ignoreMap":178},[220,70400,70401,70403,70405],{"class":222,"line":223},[220,70402,343],{"class":264},[220,70404,347],{"class":420},[220,70406,359],{"class":264},[220,70408,70409,70411,70413],{"class":222,"line":179},[220,70410,364],{"class":264},[220,70412,70330],{"class":420},[220,70414,359],{"class":264},[220,70416,70417,70419,70421],{"class":222,"line":389},[220,70418,2550],{"class":264},[220,70420,2553],{"class":420},[220,70422,386],{"class":264},[220,70424,70425,70427,70429],{"class":222,"line":399},[220,70426,2567],{"class":264},[220,70428,70330],{"class":420},[220,70430,359],{"class":264},[220,70432,70433,70435,70437],{"class":222,"line":644},[220,70434,402],{"class":264},[220,70436,347],{"class":420},[220,70438,359],{"class":264},[212,70440,70441],{"className":2844,"code":70352,"language":2846,"meta":178,"style":178},[99,70442,70443,70451,70459,70467,70475],{"__ignoreMap":178},[220,70444,70445,70447,70449],{"class":222,"line":223},[220,70446,343],{"class":264},[220,70448,347],{"class":420},[220,70450,359],{"class":264},[220,70452,70453,70455,70457],{"class":222,"line":179},[220,70454,364],{"class":264},[220,70456,70330],{"class":420},[220,70458,359],{"class":264},[220,70460,70461,70463,70465],{"class":222,"line":389},[220,70462,2550],{"class":264},[220,70464,2553],{"class":420},[220,70466,386],{"class":264},[220,70468,70469,70471,70473],{"class":222,"line":399},[220,70470,2567],{"class":264},[220,70472,70330],{"class":420},[220,70474,359],{"class":264},[220,70476,70477,70479,70481],{"class":222,"line":644},[220,70478,402],{"class":264},[220,70480,347],{"class":420},[220,70482,359],{"class":264},[212,70484,70485],{"className":468,"code":70352,"language":469,"meta":178,"style":178},[99,70486,70487,70495,70503,70511,70519],{"__ignoreMap":178},[220,70488,70489,70491,70493],{"class":222,"line":223},[220,70490,343],{"class":264},[220,70492,347],{"class":420},[220,70494,359],{"class":264},[220,70496,70497,70499,70501],{"class":222,"line":179},[220,70498,364],{"class":264},[220,70500,70330],{"class":420},[220,70502,359],{"class":264},[220,70504,70505,70507,70509],{"class":222,"line":389},[220,70506,2550],{"class":264},[220,70508,2553],{"class":420},[220,70510,386],{"class":264},[220,70512,70513,70515,70517],{"class":222,"line":399},[220,70514,2567],{"class":264},[220,70516,70330],{"class":420},[220,70518,359],{"class":264},[220,70520,70521,70523,70525],{"class":222,"line":644},[220,70522,402],{"class":264},[220,70524,347],{"class":420},[220,70526,359],{"class":264},[212,70528,70530],{"className":251,"code":70529,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SliceWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,70531,70532,70542,70546,70560,70564,70573,70581,70585,70589],{"__ignoreMap":178},[220,70533,70534,70536,70538,70540],{"class":222,"line":223},[220,70535,261],{"class":260},[220,70537,11512],{"class":264},[220,70539,268],{"class":260},[220,70541,4007],{"class":230},[220,70543,70544],{"class":222,"line":179},[220,70545,647],{"emptyLinePlaceholder":194},[220,70547,70548,70550,70552,70554,70556,70558],{"class":222,"line":389},[220,70549,1735],{"class":260},[220,70551,1738],{"class":420},[220,70553,1741],{"class":260},[220,70555,1744],{"class":260},[220,70557,1747],{"class":226},[220,70559,1750],{"class":264},[220,70561,70562],{"class":222,"line":399},[220,70563,1765],{"class":264},[220,70565,70566,70568,70571],{"class":222,"line":644},[220,70567,1770],{"class":264},[220,70569,70570],{"class":230},"'SliceWipe'",[220,70572,7009],{"class":264},[220,70574,70575,70577,70579],{"class":222,"line":650},[220,70576,7014],{"class":264},[220,70578,3206],{"class":230},[220,70580,2465],{"class":264},[220,70582,70583],{"class":222,"line":656},[220,70584,7031],{"class":264},[220,70586,70587],{"class":222,"line":673},[220,70588,1787],{"class":264},[220,70590,70591],{"class":222,"line":682},[220,70592,1792],{"class":264},[1504,70594,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":70596},[70597,70598],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":70330,"description":70338},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":70605,"title":70606,"body":70607,"category":35559,"componentType":25877,"description":70614,"extension":191,"meta":70855,"navigation":194,"path":70856,"requiresChild":32530,"seo":70857,"stem":70858,"__hash__":70859},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":70608,"toc":70851},[70609,70612,70615,70617,70619,70622,70624,70849],[11,70610,70606],{"id":70611},"smoke",[15,70613,70614],{},"Realistic fluid smoke simulation with vorticity dynamics",[31911,70616],{"component":70606},[23,70618,31915],{"id":26533},[31917,70620],{":props":70621},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,70623,31923],{"id":31922},[246,70625,70626,70666,70709,70749,70791],{":tabs":1557},[212,70627,70629],{"className":334,"code":70628,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70630,70631,70639,70646,70654,70658],{"__ignoreMap":178},[220,70632,70633,70635,70637],{"class":222,"line":223},[220,70634,343],{"class":264},[220,70636,347],{"class":346},[220,70638,359],{"class":264},[220,70640,70641,70643],{"class":222,"line":179},[220,70642,364],{"class":264},[220,70644,70645],{"class":346},"Smoke\n",[220,70647,70648,70650,70652],{"class":222,"line":389},[220,70649,20371],{"class":226},[220,70651,353],{"class":264},[220,70653,36625],{"class":230},[220,70655,70656],{"class":222,"line":399},[220,70657,1234],{"class":264},[220,70659,70660,70662,70664],{"class":222,"line":644},[220,70661,402],{"class":264},[220,70663,347],{"class":346},[220,70665,359],{"class":264},[212,70667,70669],{"className":409,"code":70668,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70670,70671,70679,70685,70697,70701],{"__ignoreMap":178},[220,70672,70673,70675,70677],{"class":222,"line":223},[220,70674,343],{"class":264},[220,70676,347],{"class":420},[220,70678,359],{"class":264},[220,70680,70681,70683],{"class":222,"line":179},[220,70682,364],{"class":264},[220,70684,70645],{"class":420},[220,70686,70687,70689,70691,70693,70695],{"class":222,"line":389},[220,70688,20482],{"class":226},[220,70690,353],{"class":260},[220,70692,743],{"class":264},[220,70694,8677],{"class":420},[220,70696,749],{"class":264},[220,70698,70699],{"class":222,"line":399},[220,70700,1234],{"class":264},[220,70702,70703,70705,70707],{"class":222,"line":644},[220,70704,402],{"class":264},[220,70706,347],{"class":420},[220,70708,359],{"class":264},[212,70710,70711],{"className":2844,"code":70668,"language":2846,"meta":178,"style":178},[99,70712,70713,70721,70727,70737,70741],{"__ignoreMap":178},[220,70714,70715,70717,70719],{"class":222,"line":223},[220,70716,343],{"class":264},[220,70718,347],{"class":420},[220,70720,359],{"class":264},[220,70722,70723,70725],{"class":222,"line":179},[220,70724,364],{"class":264},[220,70726,70645],{"class":420},[220,70728,70729,70731,70733,70735],{"class":222,"line":389},[220,70730,20482],{"class":226},[220,70732,29871],{"class":264},[220,70734,8677],{"class":420},[220,70736,749],{"class":264},[220,70738,70739],{"class":222,"line":399},[220,70740,1234],{"class":264},[220,70742,70743,70745,70747],{"class":222,"line":644},[220,70744,402],{"class":264},[220,70746,347],{"class":420},[220,70748,359],{"class":264},[212,70750,70751],{"className":468,"code":70668,"language":469,"meta":178,"style":178},[99,70752,70753,70761,70767,70779,70783],{"__ignoreMap":178},[220,70754,70755,70757,70759],{"class":222,"line":223},[220,70756,343],{"class":264},[220,70758,347],{"class":420},[220,70760,359],{"class":264},[220,70762,70763,70765],{"class":222,"line":179},[220,70764,364],{"class":264},[220,70766,70645],{"class":420},[220,70768,70769,70771,70773,70775,70777],{"class":222,"line":389},[220,70770,20482],{"class":226},[220,70772,353],{"class":260},[220,70774,743],{"class":264},[220,70776,8677],{"class":420},[220,70778,749],{"class":264},[220,70780,70781],{"class":222,"line":399},[220,70782,1234],{"class":264},[220,70784,70785,70787,70789],{"class":222,"line":644},[220,70786,402],{"class":264},[220,70788,347],{"class":420},[220,70790,359],{"class":264},[212,70792,70794],{"className":251,"code":70793,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Smoke', props: { intensity: 1 } }\n ]\n})\n",[99,70795,70796,70806,70810,70824,70828,70841,70845],{"__ignoreMap":178},[220,70797,70798,70800,70802,70804],{"class":222,"line":223},[220,70799,261],{"class":260},[220,70801,11512],{"class":264},[220,70803,268],{"class":260},[220,70805,4007],{"class":230},[220,70807,70808],{"class":222,"line":179},[220,70809,647],{"emptyLinePlaceholder":194},[220,70811,70812,70814,70816,70818,70820,70822],{"class":222,"line":389},[220,70813,1735],{"class":260},[220,70815,1738],{"class":420},[220,70817,1741],{"class":260},[220,70819,1744],{"class":260},[220,70821,1747],{"class":226},[220,70823,1750],{"class":264},[220,70825,70826],{"class":222,"line":399},[220,70827,1765],{"class":264},[220,70829,70830,70832,70835,70837,70839],{"class":222,"line":644},[220,70831,1770],{"class":264},[220,70833,70834],{"class":230},"'Smoke'",[220,70836,32203],{"class":264},[220,70838,8677],{"class":420},[220,70840,1782],{"class":264},[220,70842,70843],{"class":222,"line":650},[220,70844,1787],{"class":264},[220,70846,70847],{"class":222,"line":656},[220,70848,1792],{"class":264},[1504,70850,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70852},[70853,70854],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":70606,"description":70614},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":70861,"title":23176,"body":70862,"category":36569,"componentType":25877,"description":70869,"extension":191,"meta":71110,"navigation":194,"path":71111,"requiresChild":32530,"seo":71112,"stem":71113,"__hash__":71114},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":70863,"toc":71106},[70864,70867,70870,70872,70874,70877,70879,71104],[11,70865,23176],{"id":70866},"smokefill",[15,70868,70869],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31911,70871],{"component":23176},[23,70873,31915],{"id":26533},[31917,70875],{":props":70876},"[{\"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\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the shape in degrees\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,70878,31923],{"id":31922},[246,70880,70881,70921,70964,71004,71046],{":tabs":1557},[212,70882,70884],{"className":334,"code":70883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70885,70886,70894,70901,70909,70913],{"__ignoreMap":178},[220,70887,70888,70890,70892],{"class":222,"line":223},[220,70889,343],{"class":264},[220,70891,347],{"class":346},[220,70893,359],{"class":264},[220,70895,70896,70898],{"class":222,"line":179},[220,70897,364],{"class":264},[220,70899,70900],{"class":346},"SmokeFill\n",[220,70902,70903,70905,70907],{"class":222,"line":389},[220,70904,20371],{"class":226},[220,70906,353],{"class":264},[220,70908,36625],{"class":230},[220,70910,70911],{"class":222,"line":399},[220,70912,1234],{"class":264},[220,70914,70915,70917,70919],{"class":222,"line":644},[220,70916,402],{"class":264},[220,70918,347],{"class":346},[220,70920,359],{"class":264},[212,70922,70924],{"className":409,"code":70923,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70925,70926,70934,70940,70952,70956],{"__ignoreMap":178},[220,70927,70928,70930,70932],{"class":222,"line":223},[220,70929,343],{"class":264},[220,70931,347],{"class":420},[220,70933,359],{"class":264},[220,70935,70936,70938],{"class":222,"line":179},[220,70937,364],{"class":264},[220,70939,70900],{"class":420},[220,70941,70942,70944,70946,70948,70950],{"class":222,"line":389},[220,70943,20482],{"class":226},[220,70945,353],{"class":260},[220,70947,743],{"class":264},[220,70949,8677],{"class":420},[220,70951,749],{"class":264},[220,70953,70954],{"class":222,"line":399},[220,70955,1234],{"class":264},[220,70957,70958,70960,70962],{"class":222,"line":644},[220,70959,402],{"class":264},[220,70961,347],{"class":420},[220,70963,359],{"class":264},[212,70965,70966],{"className":2844,"code":70923,"language":2846,"meta":178,"style":178},[99,70967,70968,70976,70982,70992,70996],{"__ignoreMap":178},[220,70969,70970,70972,70974],{"class":222,"line":223},[220,70971,343],{"class":264},[220,70973,347],{"class":420},[220,70975,359],{"class":264},[220,70977,70978,70980],{"class":222,"line":179},[220,70979,364],{"class":264},[220,70981,70900],{"class":420},[220,70983,70984,70986,70988,70990],{"class":222,"line":389},[220,70985,20482],{"class":226},[220,70987,29871],{"class":264},[220,70989,8677],{"class":420},[220,70991,749],{"class":264},[220,70993,70994],{"class":222,"line":399},[220,70995,1234],{"class":264},[220,70997,70998,71000,71002],{"class":222,"line":644},[220,70999,402],{"class":264},[220,71001,347],{"class":420},[220,71003,359],{"class":264},[212,71005,71006],{"className":468,"code":70923,"language":469,"meta":178,"style":178},[99,71007,71008,71016,71022,71034,71038],{"__ignoreMap":178},[220,71009,71010,71012,71014],{"class":222,"line":223},[220,71011,343],{"class":264},[220,71013,347],{"class":420},[220,71015,359],{"class":264},[220,71017,71018,71020],{"class":222,"line":179},[220,71019,364],{"class":264},[220,71021,70900],{"class":420},[220,71023,71024,71026,71028,71030,71032],{"class":222,"line":389},[220,71025,20482],{"class":226},[220,71027,353],{"class":260},[220,71029,743],{"class":264},[220,71031,8677],{"class":420},[220,71033,749],{"class":264},[220,71035,71036],{"class":222,"line":399},[220,71037,1234],{"class":264},[220,71039,71040,71042,71044],{"class":222,"line":644},[220,71041,402],{"class":264},[220,71043,347],{"class":420},[220,71045,359],{"class":264},[212,71047,71049],{"className":251,"code":71048,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SmokeFill', props: { intensity: 1 } }\n ]\n})\n",[99,71050,71051,71061,71065,71079,71083,71096,71100],{"__ignoreMap":178},[220,71052,71053,71055,71057,71059],{"class":222,"line":223},[220,71054,261],{"class":260},[220,71056,11512],{"class":264},[220,71058,268],{"class":260},[220,71060,4007],{"class":230},[220,71062,71063],{"class":222,"line":179},[220,71064,647],{"emptyLinePlaceholder":194},[220,71066,71067,71069,71071,71073,71075,71077],{"class":222,"line":389},[220,71068,1735],{"class":260},[220,71070,1738],{"class":420},[220,71072,1741],{"class":260},[220,71074,1744],{"class":260},[220,71076,1747],{"class":226},[220,71078,1750],{"class":264},[220,71080,71081],{"class":222,"line":399},[220,71082,1765],{"class":264},[220,71084,71085,71087,71090,71092,71094],{"class":222,"line":644},[220,71086,1770],{"class":264},[220,71088,71089],{"class":230},"'SmokeFill'",[220,71091,32203],{"class":264},[220,71093,8677],{"class":420},[220,71095,1782],{"class":264},[220,71097,71098],{"class":222,"line":650},[220,71099,1787],{"class":264},[220,71101,71102],{"class":222,"line":656},[220,71103,1792],{"class":264},[1504,71105,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71107},[71108,71109],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":23176,"description":70869},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":71116,"title":71117,"body":71118,"category":35559,"componentType":25877,"description":71125,"extension":191,"meta":71366,"navigation":194,"path":71367,"requiresChild":32530,"seo":71368,"stem":71369,"__hash__":71370},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":71119,"toc":71362},[71120,71123,71126,71128,71130,71133,71135,71360],[11,71121,71117],{"id":71122},"smokeflow",[15,71124,71125],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31911,71127],{"component":71117},[23,71129,31915],{"id":26533},[31917,71131],{":props":71132},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#e29c8b\",\"description\":\"Color of fresh smoke\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#d517f9\",\"description\":\"Color smoke transitions to as it ages\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much smoke is emitted as you move the cursor\"},{\"name\":\"emitRadius\",\"type\":\"number\",\"default\":\"0.07\",\"description\":\"Size of smoke puff emitted at cursor\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"20\",\"description\":\"How much cursor velocity is transferred into the smoke (higher = more directed flow)\"},{\"name\":\"dissipation\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How fast smoke fades over time\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Fine-scale swirling detail driven by vorticity confinement\"},{\"name\":\"gravity\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Vertical drift — negative floats up, positive sinks down\"},{\"name\":\"colorDecay\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How quickly smoke shifts from fresh to aged color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"OKLAB\",\"description\":\"Color space for color interpolation\"}]",[23,71134,31923],{"id":31922},[246,71136,71137,71177,71220,71260,71302],{":tabs":1557},[212,71138,71140],{"className":334,"code":71139,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71141,71142,71150,71157,71165,71169],{"__ignoreMap":178},[220,71143,71144,71146,71148],{"class":222,"line":223},[220,71145,343],{"class":264},[220,71147,347],{"class":346},[220,71149,359],{"class":264},[220,71151,71152,71154],{"class":222,"line":179},[220,71153,364],{"class":264},[220,71155,71156],{"class":346},"SmokeFlow\n",[220,71158,71159,71161,71163],{"class":222,"line":389},[220,71160,20371],{"class":226},[220,71162,353],{"class":264},[220,71164,36625],{"class":230},[220,71166,71167],{"class":222,"line":399},[220,71168,1234],{"class":264},[220,71170,71171,71173,71175],{"class":222,"line":644},[220,71172,402],{"class":264},[220,71174,347],{"class":346},[220,71176,359],{"class":264},[212,71178,71180],{"className":409,"code":71179,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71181,71182,71190,71196,71208,71212],{"__ignoreMap":178},[220,71183,71184,71186,71188],{"class":222,"line":223},[220,71185,343],{"class":264},[220,71187,347],{"class":420},[220,71189,359],{"class":264},[220,71191,71192,71194],{"class":222,"line":179},[220,71193,364],{"class":264},[220,71195,71156],{"class":420},[220,71197,71198,71200,71202,71204,71206],{"class":222,"line":389},[220,71199,20482],{"class":226},[220,71201,353],{"class":260},[220,71203,743],{"class":264},[220,71205,8677],{"class":420},[220,71207,749],{"class":264},[220,71209,71210],{"class":222,"line":399},[220,71211,1234],{"class":264},[220,71213,71214,71216,71218],{"class":222,"line":644},[220,71215,402],{"class":264},[220,71217,347],{"class":420},[220,71219,359],{"class":264},[212,71221,71222],{"className":2844,"code":71179,"language":2846,"meta":178,"style":178},[99,71223,71224,71232,71238,71248,71252],{"__ignoreMap":178},[220,71225,71226,71228,71230],{"class":222,"line":223},[220,71227,343],{"class":264},[220,71229,347],{"class":420},[220,71231,359],{"class":264},[220,71233,71234,71236],{"class":222,"line":179},[220,71235,364],{"class":264},[220,71237,71156],{"class":420},[220,71239,71240,71242,71244,71246],{"class":222,"line":389},[220,71241,20482],{"class":226},[220,71243,29871],{"class":264},[220,71245,8677],{"class":420},[220,71247,749],{"class":264},[220,71249,71250],{"class":222,"line":399},[220,71251,1234],{"class":264},[220,71253,71254,71256,71258],{"class":222,"line":644},[220,71255,402],{"class":264},[220,71257,347],{"class":420},[220,71259,359],{"class":264},[212,71261,71262],{"className":468,"code":71179,"language":469,"meta":178,"style":178},[99,71263,71264,71272,71278,71290,71294],{"__ignoreMap":178},[220,71265,71266,71268,71270],{"class":222,"line":223},[220,71267,343],{"class":264},[220,71269,347],{"class":420},[220,71271,359],{"class":264},[220,71273,71274,71276],{"class":222,"line":179},[220,71275,364],{"class":264},[220,71277,71156],{"class":420},[220,71279,71280,71282,71284,71286,71288],{"class":222,"line":389},[220,71281,20482],{"class":226},[220,71283,353],{"class":260},[220,71285,743],{"class":264},[220,71287,8677],{"class":420},[220,71289,749],{"class":264},[220,71291,71292],{"class":222,"line":399},[220,71293,1234],{"class":264},[220,71295,71296,71298,71300],{"class":222,"line":644},[220,71297,402],{"class":264},[220,71299,347],{"class":420},[220,71301,359],{"class":264},[212,71303,71305],{"className":251,"code":71304,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SmokeFlow', props: { intensity: 1 } }\n ]\n})\n",[99,71306,71307,71317,71321,71335,71339,71352,71356],{"__ignoreMap":178},[220,71308,71309,71311,71313,71315],{"class":222,"line":223},[220,71310,261],{"class":260},[220,71312,11512],{"class":264},[220,71314,268],{"class":260},[220,71316,4007],{"class":230},[220,71318,71319],{"class":222,"line":179},[220,71320,647],{"emptyLinePlaceholder":194},[220,71322,71323,71325,71327,71329,71331,71333],{"class":222,"line":389},[220,71324,1735],{"class":260},[220,71326,1738],{"class":420},[220,71328,1741],{"class":260},[220,71330,1744],{"class":260},[220,71332,1747],{"class":226},[220,71334,1750],{"class":264},[220,71336,71337],{"class":222,"line":399},[220,71338,1765],{"class":264},[220,71340,71341,71343,71346,71348,71350],{"class":222,"line":644},[220,71342,1770],{"class":264},[220,71344,71345],{"class":230},"'SmokeFlow'",[220,71347,32203],{"class":264},[220,71349,8677],{"class":420},[220,71351,1782],{"class":264},[220,71353,71354],{"class":222,"line":650},[220,71355,1787],{"class":264},[220,71357,71358],{"class":222,"line":656},[220,71359,1792],{"class":264},[1504,71361,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71363},[71364,71365],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":71117,"description":71125},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":71372,"title":71373,"body":71374,"category":36368,"componentType":25883,"description":71381,"extension":191,"meta":71642,"navigation":194,"path":71643,"requiresChild":194,"seo":71644,"stem":71645,"__hash__":71646},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":71375,"toc":71638},[71376,71379,71382,71384,71386,71389,71391,71636],[11,71377,71373],{"id":71378},"solarize",[15,71380,71381],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31911,71383],{"component":71373},[23,71385,31915],{"id":26533},[31917,71387],{":props":71388},"[{\"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,71390,31923],{"id":31922},[246,71392,71393,71438,71482,71526,71570],{":tabs":1557},[212,71394,71396],{"className":334,"code":71395,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,71397,71398,71406,71414,71422,71430],{"__ignoreMap":178},[220,71399,71400,71402,71404],{"class":222,"line":223},[220,71401,343],{"class":264},[220,71403,347],{"class":346},[220,71405,359],{"class":264},[220,71407,71408,71410,71412],{"class":222,"line":179},[220,71409,364],{"class":264},[220,71411,71373],{"class":346},[220,71413,359],{"class":264},[220,71415,71416,71418,71420],{"class":222,"line":389},[220,71417,2550],{"class":264},[220,71419,2553],{"class":346},[220,71421,386],{"class":264},[220,71423,71424,71426,71428],{"class":222,"line":399},[220,71425,2567],{"class":264},[220,71427,71373],{"class":346},[220,71429,359],{"class":264},[220,71431,71432,71434,71436],{"class":222,"line":644},[220,71433,402],{"class":264},[220,71435,347],{"class":346},[220,71437,359],{"class":264},[212,71439,71440],{"className":409,"code":71395,"language":411,"meta":178,"style":178},[99,71441,71442,71450,71458,71466,71474],{"__ignoreMap":178},[220,71443,71444,71446,71448],{"class":222,"line":223},[220,71445,343],{"class":264},[220,71447,347],{"class":420},[220,71449,359],{"class":264},[220,71451,71452,71454,71456],{"class":222,"line":179},[220,71453,364],{"class":264},[220,71455,71373],{"class":420},[220,71457,359],{"class":264},[220,71459,71460,71462,71464],{"class":222,"line":389},[220,71461,2550],{"class":264},[220,71463,2553],{"class":420},[220,71465,386],{"class":264},[220,71467,71468,71470,71472],{"class":222,"line":399},[220,71469,2567],{"class":264},[220,71471,71373],{"class":420},[220,71473,359],{"class":264},[220,71475,71476,71478,71480],{"class":222,"line":644},[220,71477,402],{"class":264},[220,71479,347],{"class":420},[220,71481,359],{"class":264},[212,71483,71484],{"className":2844,"code":71395,"language":2846,"meta":178,"style":178},[99,71485,71486,71494,71502,71510,71518],{"__ignoreMap":178},[220,71487,71488,71490,71492],{"class":222,"line":223},[220,71489,343],{"class":264},[220,71491,347],{"class":420},[220,71493,359],{"class":264},[220,71495,71496,71498,71500],{"class":222,"line":179},[220,71497,364],{"class":264},[220,71499,71373],{"class":420},[220,71501,359],{"class":264},[220,71503,71504,71506,71508],{"class":222,"line":389},[220,71505,2550],{"class":264},[220,71507,2553],{"class":420},[220,71509,386],{"class":264},[220,71511,71512,71514,71516],{"class":222,"line":399},[220,71513,2567],{"class":264},[220,71515,71373],{"class":420},[220,71517,359],{"class":264},[220,71519,71520,71522,71524],{"class":222,"line":644},[220,71521,402],{"class":264},[220,71523,347],{"class":420},[220,71525,359],{"class":264},[212,71527,71528],{"className":468,"code":71395,"language":469,"meta":178,"style":178},[99,71529,71530,71538,71546,71554,71562],{"__ignoreMap":178},[220,71531,71532,71534,71536],{"class":222,"line":223},[220,71533,343],{"class":264},[220,71535,347],{"class":420},[220,71537,359],{"class":264},[220,71539,71540,71542,71544],{"class":222,"line":179},[220,71541,364],{"class":264},[220,71543,71373],{"class":420},[220,71545,359],{"class":264},[220,71547,71548,71550,71552],{"class":222,"line":389},[220,71549,2550],{"class":264},[220,71551,2553],{"class":420},[220,71553,386],{"class":264},[220,71555,71556,71558,71560],{"class":222,"line":399},[220,71557,2567],{"class":264},[220,71559,71373],{"class":420},[220,71561,359],{"class":264},[220,71563,71564,71566,71568],{"class":222,"line":644},[220,71565,402],{"class":264},[220,71567,347],{"class":420},[220,71569,359],{"class":264},[212,71571,71573],{"className":251,"code":71572,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Solarize', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,71574,71575,71585,71589,71603,71607,71616,71624,71628,71632],{"__ignoreMap":178},[220,71576,71577,71579,71581,71583],{"class":222,"line":223},[220,71578,261],{"class":260},[220,71580,11512],{"class":264},[220,71582,268],{"class":260},[220,71584,4007],{"class":230},[220,71586,71587],{"class":222,"line":179},[220,71588,647],{"emptyLinePlaceholder":194},[220,71590,71591,71593,71595,71597,71599,71601],{"class":222,"line":389},[220,71592,1735],{"class":260},[220,71594,1738],{"class":420},[220,71596,1741],{"class":260},[220,71598,1744],{"class":260},[220,71600,1747],{"class":226},[220,71602,1750],{"class":264},[220,71604,71605],{"class":222,"line":399},[220,71606,1765],{"class":264},[220,71608,71609,71611,71614],{"class":222,"line":644},[220,71610,1770],{"class":264},[220,71612,71613],{"class":230},"'Solarize'",[220,71615,7009],{"class":264},[220,71617,71618,71620,71622],{"class":222,"line":650},[220,71619,7014],{"class":264},[220,71621,3206],{"class":230},[220,71623,2465],{"class":264},[220,71625,71626],{"class":222,"line":656},[220,71627,7031],{"class":264},[220,71629,71630],{"class":222,"line":673},[220,71631,1787],{"class":264},[220,71633,71634],{"class":222,"line":682},[220,71635,1792],{"class":264},[1504,71637,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":71639},[71640,71641],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":71373,"description":71381},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":71648,"title":1585,"body":71649,"category":33063,"componentType":25877,"description":71656,"extension":191,"meta":71886,"navigation":194,"path":71887,"requiresChild":32530,"seo":71888,"stem":71889,"__hash__":71890},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":71650,"toc":71882},[71651,71654,71657,71659,71661,71664,71666,71880],[11,71652,1585],{"id":71653},"solidcolor",[15,71655,71656],{},"Fill the canvas with a single solid color",[31911,71658],{"component":1585},[23,71660,31915],{"id":26533},[31917,71662],{":props":71663},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,71665,31923],{"id":31922},[246,71667,71668,71709,71747,71785,71823],{":tabs":1557},[212,71669,71671],{"className":334,"code":71670,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,71672,71673,71681,71688,71697,71701],{"__ignoreMap":178},[220,71674,71675,71677,71679],{"class":222,"line":223},[220,71676,343],{"class":264},[220,71678,347],{"class":346},[220,71680,359],{"class":264},[220,71682,71683,71685],{"class":222,"line":179},[220,71684,364],{"class":264},[220,71686,71687],{"class":346},"SolidColor\n",[220,71689,71690,71692,71694],{"class":222,"line":389},[220,71691,9635],{"class":226},[220,71693,353],{"class":264},[220,71695,71696],{"class":230},"\"#5b18ca\"\n",[220,71698,71699],{"class":222,"line":399},[220,71700,1234],{"class":264},[220,71702,71703,71705,71707],{"class":222,"line":644},[220,71704,402],{"class":264},[220,71706,347],{"class":346},[220,71708,359],{"class":264},[212,71710,71711],{"className":409,"code":71670,"language":411,"meta":178,"style":178},[99,71712,71713,71721,71727,71735,71739],{"__ignoreMap":178},[220,71714,71715,71717,71719],{"class":222,"line":223},[220,71716,343],{"class":264},[220,71718,347],{"class":420},[220,71720,359],{"class":264},[220,71722,71723,71725],{"class":222,"line":179},[220,71724,364],{"class":264},[220,71726,71687],{"class":420},[220,71728,71729,71731,71733],{"class":222,"line":389},[220,71730,9635],{"class":226},[220,71732,353],{"class":260},[220,71734,71696],{"class":230},[220,71736,71737],{"class":222,"line":399},[220,71738,1234],{"class":264},[220,71740,71741,71743,71745],{"class":222,"line":644},[220,71742,402],{"class":264},[220,71744,347],{"class":420},[220,71746,359],{"class":264},[212,71748,71749],{"className":2844,"code":71670,"language":2846,"meta":178,"style":178},[99,71750,71751,71759,71765,71773,71777],{"__ignoreMap":178},[220,71752,71753,71755,71757],{"class":222,"line":223},[220,71754,343],{"class":264},[220,71756,347],{"class":420},[220,71758,359],{"class":264},[220,71760,71761,71763],{"class":222,"line":179},[220,71762,364],{"class":264},[220,71764,71687],{"class":420},[220,71766,71767,71769,71771],{"class":222,"line":389},[220,71768,9635],{"class":226},[220,71770,353],{"class":264},[220,71772,71696],{"class":230},[220,71774,71775],{"class":222,"line":399},[220,71776,1234],{"class":264},[220,71778,71779,71781,71783],{"class":222,"line":644},[220,71780,402],{"class":264},[220,71782,347],{"class":420},[220,71784,359],{"class":264},[212,71786,71787],{"className":468,"code":71670,"language":469,"meta":178,"style":178},[99,71788,71789,71797,71803,71811,71815],{"__ignoreMap":178},[220,71790,71791,71793,71795],{"class":222,"line":223},[220,71792,343],{"class":264},[220,71794,347],{"class":420},[220,71796,359],{"class":264},[220,71798,71799,71801],{"class":222,"line":179},[220,71800,364],{"class":264},[220,71802,71687],{"class":420},[220,71804,71805,71807,71809],{"class":222,"line":389},[220,71806,9635],{"class":226},[220,71808,353],{"class":260},[220,71810,71696],{"class":230},[220,71812,71813],{"class":222,"line":399},[220,71814,1234],{"class":264},[220,71816,71817,71819,71821],{"class":222,"line":644},[220,71818,402],{"class":264},[220,71820,347],{"class":420},[220,71822,359],{"class":264},[212,71824,71826],{"className":251,"code":71825,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,71827,71828,71838,71842,71856,71860,71872,71876],{"__ignoreMap":178},[220,71829,71830,71832,71834,71836],{"class":222,"line":223},[220,71831,261],{"class":260},[220,71833,11512],{"class":264},[220,71835,268],{"class":260},[220,71837,4007],{"class":230},[220,71839,71840],{"class":222,"line":179},[220,71841,647],{"emptyLinePlaceholder":194},[220,71843,71844,71846,71848,71850,71852,71854],{"class":222,"line":389},[220,71845,1735],{"class":260},[220,71847,1738],{"class":420},[220,71849,1741],{"class":260},[220,71851,1744],{"class":260},[220,71853,1747],{"class":226},[220,71855,1750],{"class":264},[220,71857,71858],{"class":222,"line":399},[220,71859,1765],{"class":264},[220,71861,71862,71864,71866,71868,71870],{"class":222,"line":644},[220,71863,1770],{"class":264},[220,71865,1773],{"class":230},[220,71867,1776],{"class":264},[220,71869,1779],{"class":230},[220,71871,1782],{"class":264},[220,71873,71874],{"class":222,"line":650},[220,71875,1787],{"class":264},[220,71877,71878],{"class":222,"line":656},[220,71879,1792],{"class":264},[1504,71881,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71883},[71884,71885],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":71656},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":71892,"title":71893,"body":71894,"category":33396,"componentType":25883,"description":71901,"extension":191,"meta":72218,"navigation":194,"path":72219,"requiresChild":194,"seo":72220,"stem":72221,"__hash__":72222},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":71895,"toc":72214},[71896,71899,71902,71904,71906,71909,71911,72212],[11,71897,71893],{"id":71898},"spherize",[15,71900,71901],{},"Map content onto a 3D sphere surface with depth distortion",[31911,71903],{"component":71893},[23,71905,31915],{"id":26533},[31917,71907],{":props":71908},"[{\"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,71910,31923],{"id":31922},[246,71912,71913,71969,72028,72084,72142],{":tabs":1557},[212,71914,71916],{"className":334,"code":71915,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71917,71918,71926,71933,71941,71945,71953,71961],{"__ignoreMap":178},[220,71919,71920,71922,71924],{"class":222,"line":223},[220,71921,343],{"class":264},[220,71923,347],{"class":346},[220,71925,359],{"class":264},[220,71927,71928,71930],{"class":222,"line":179},[220,71929,364],{"class":264},[220,71931,71932],{"class":346},"Spherize\n",[220,71934,71935,71937,71939],{"class":222,"line":389},[220,71936,17405],{"class":226},[220,71938,353],{"class":264},[220,71940,36625],{"class":230},[220,71942,71943],{"class":222,"line":399},[220,71944,31959],{"class":264},[220,71946,71947,71949,71951],{"class":222,"line":644},[220,71948,2550],{"class":264},[220,71950,2553],{"class":346},[220,71952,386],{"class":264},[220,71954,71955,71957,71959],{"class":222,"line":650},[220,71956,2567],{"class":264},[220,71958,71893],{"class":346},[220,71960,359],{"class":264},[220,71962,71963,71965,71967],{"class":222,"line":656},[220,71964,402],{"class":264},[220,71966,347],{"class":346},[220,71968,359],{"class":264},[212,71970,71972],{"className":409,"code":71971,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71973,71974,71982,71988,72000,72004,72012,72020],{"__ignoreMap":178},[220,71975,71976,71978,71980],{"class":222,"line":223},[220,71977,343],{"class":264},[220,71979,347],{"class":420},[220,71981,359],{"class":264},[220,71983,71984,71986],{"class":222,"line":179},[220,71985,364],{"class":264},[220,71987,71932],{"class":420},[220,71989,71990,71992,71994,71996,71998],{"class":222,"line":389},[220,71991,9645],{"class":226},[220,71993,353],{"class":260},[220,71995,743],{"class":264},[220,71997,8677],{"class":420},[220,71999,749],{"class":264},[220,72001,72002],{"class":222,"line":399},[220,72003,31959],{"class":264},[220,72005,72006,72008,72010],{"class":222,"line":644},[220,72007,2550],{"class":264},[220,72009,2553],{"class":420},[220,72011,386],{"class":264},[220,72013,72014,72016,72018],{"class":222,"line":650},[220,72015,2567],{"class":264},[220,72017,71893],{"class":420},[220,72019,359],{"class":264},[220,72021,72022,72024,72026],{"class":222,"line":656},[220,72023,402],{"class":264},[220,72025,347],{"class":420},[220,72027,359],{"class":264},[212,72029,72030],{"className":2844,"code":71971,"language":2846,"meta":178,"style":178},[99,72031,72032,72040,72046,72056,72060,72068,72076],{"__ignoreMap":178},[220,72033,72034,72036,72038],{"class":222,"line":223},[220,72035,343],{"class":264},[220,72037,347],{"class":420},[220,72039,359],{"class":264},[220,72041,72042,72044],{"class":222,"line":179},[220,72043,364],{"class":264},[220,72045,71932],{"class":420},[220,72047,72048,72050,72052,72054],{"class":222,"line":389},[220,72049,9645],{"class":226},[220,72051,29871],{"class":264},[220,72053,8677],{"class":420},[220,72055,749],{"class":264},[220,72057,72058],{"class":222,"line":399},[220,72059,31959],{"class":264},[220,72061,72062,72064,72066],{"class":222,"line":644},[220,72063,2550],{"class":264},[220,72065,2553],{"class":420},[220,72067,386],{"class":264},[220,72069,72070,72072,72074],{"class":222,"line":650},[220,72071,2567],{"class":264},[220,72073,71893],{"class":420},[220,72075,359],{"class":264},[220,72077,72078,72080,72082],{"class":222,"line":656},[220,72079,402],{"class":264},[220,72081,347],{"class":420},[220,72083,359],{"class":264},[212,72085,72086],{"className":468,"code":71971,"language":469,"meta":178,"style":178},[99,72087,72088,72096,72102,72114,72118,72126,72134],{"__ignoreMap":178},[220,72089,72090,72092,72094],{"class":222,"line":223},[220,72091,343],{"class":264},[220,72093,347],{"class":420},[220,72095,359],{"class":264},[220,72097,72098,72100],{"class":222,"line":179},[220,72099,364],{"class":264},[220,72101,71932],{"class":420},[220,72103,72104,72106,72108,72110,72112],{"class":222,"line":389},[220,72105,9645],{"class":226},[220,72107,353],{"class":260},[220,72109,743],{"class":264},[220,72111,8677],{"class":420},[220,72113,749],{"class":264},[220,72115,72116],{"class":222,"line":399},[220,72117,31959],{"class":264},[220,72119,72120,72122,72124],{"class":222,"line":644},[220,72121,2550],{"class":264},[220,72123,2553],{"class":420},[220,72125,386],{"class":264},[220,72127,72128,72130,72132],{"class":222,"line":650},[220,72129,2567],{"class":264},[220,72131,71893],{"class":420},[220,72133,359],{"class":264},[220,72135,72136,72138,72140],{"class":222,"line":656},[220,72137,402],{"class":264},[220,72139,347],{"class":420},[220,72141,359],{"class":264},[212,72143,72145],{"className":251,"code":72144,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spherize', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,72146,72147,72157,72161,72175,72179,72192,72200,72204,72208],{"__ignoreMap":178},[220,72148,72149,72151,72153,72155],{"class":222,"line":223},[220,72150,261],{"class":260},[220,72152,11512],{"class":264},[220,72154,268],{"class":260},[220,72156,4007],{"class":230},[220,72158,72159],{"class":222,"line":179},[220,72160,647],{"emptyLinePlaceholder":194},[220,72162,72163,72165,72167,72169,72171,72173],{"class":222,"line":389},[220,72164,1735],{"class":260},[220,72166,1738],{"class":420},[220,72168,1741],{"class":260},[220,72170,1744],{"class":260},[220,72172,1747],{"class":226},[220,72174,1750],{"class":264},[220,72176,72177],{"class":222,"line":399},[220,72178,1765],{"class":264},[220,72180,72181,72183,72186,72188,72190],{"class":222,"line":644},[220,72182,1770],{"class":264},[220,72184,72185],{"class":230},"'Spherize'",[220,72187,7541],{"class":264},[220,72189,8677],{"class":420},[220,72191,7546],{"class":264},[220,72193,72194,72196,72198],{"class":222,"line":650},[220,72195,7014],{"class":264},[220,72197,3206],{"class":230},[220,72199,2465],{"class":264},[220,72201,72202],{"class":222,"line":656},[220,72203,7031],{"class":264},[220,72205,72206],{"class":222,"line":673},[220,72207,1787],{"class":264},[220,72209,72210],{"class":222,"line":682},[220,72211,1792],{"class":264},[1504,72213,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72215},[72216,72217],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":71893,"description":71901},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":72224,"title":72225,"body":72226,"category":33063,"componentType":25877,"description":72233,"extension":191,"meta":72418,"navigation":194,"path":72419,"requiresChild":32530,"seo":72420,"stem":72421,"__hash__":72422},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":72227,"toc":72414},[72228,72231,72234,72236,72238,72241,72243,72412],[11,72229,72225],{"id":72230},"spiral",[15,72232,72233],{},"Rotating spiral pattern with animated movement",[31911,72235],{"component":72225},[23,72237,31915],{"id":26533},[31917,72239],{":props":72240},"[{\"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,72242,31923],{"id":31922},[246,72244,72245,72274,72302,72330,72358],{":tabs":1557},[212,72246,72248],{"className":334,"code":72247,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,72249,72250,72258,72266],{"__ignoreMap":178},[220,72251,72252,72254,72256],{"class":222,"line":223},[220,72253,343],{"class":264},[220,72255,347],{"class":346},[220,72257,359],{"class":264},[220,72259,72260,72262,72264],{"class":222,"line":179},[220,72261,364],{"class":264},[220,72263,72225],{"class":346},[220,72265,386],{"class":264},[220,72267,72268,72270,72272],{"class":222,"line":389},[220,72269,402],{"class":264},[220,72271,347],{"class":346},[220,72273,359],{"class":264},[212,72275,72276],{"className":409,"code":72247,"language":411,"meta":178,"style":178},[99,72277,72278,72286,72294],{"__ignoreMap":178},[220,72279,72280,72282,72284],{"class":222,"line":223},[220,72281,343],{"class":264},[220,72283,347],{"class":420},[220,72285,359],{"class":264},[220,72287,72288,72290,72292],{"class":222,"line":179},[220,72289,364],{"class":264},[220,72291,72225],{"class":420},[220,72293,386],{"class":264},[220,72295,72296,72298,72300],{"class":222,"line":389},[220,72297,402],{"class":264},[220,72299,347],{"class":420},[220,72301,359],{"class":264},[212,72303,72304],{"className":2844,"code":72247,"language":2846,"meta":178,"style":178},[99,72305,72306,72314,72322],{"__ignoreMap":178},[220,72307,72308,72310,72312],{"class":222,"line":223},[220,72309,343],{"class":264},[220,72311,347],{"class":420},[220,72313,359],{"class":264},[220,72315,72316,72318,72320],{"class":222,"line":179},[220,72317,364],{"class":264},[220,72319,72225],{"class":420},[220,72321,386],{"class":264},[220,72323,72324,72326,72328],{"class":222,"line":389},[220,72325,402],{"class":264},[220,72327,347],{"class":420},[220,72329,359],{"class":264},[212,72331,72332],{"className":468,"code":72247,"language":469,"meta":178,"style":178},[99,72333,72334,72342,72350],{"__ignoreMap":178},[220,72335,72336,72338,72340],{"class":222,"line":223},[220,72337,343],{"class":264},[220,72339,347],{"class":420},[220,72341,359],{"class":264},[220,72343,72344,72346,72348],{"class":222,"line":179},[220,72345,364],{"class":264},[220,72347,72225],{"class":420},[220,72349,386],{"class":264},[220,72351,72352,72354,72356],{"class":222,"line":389},[220,72353,402],{"class":264},[220,72355,347],{"class":420},[220,72357,359],{"class":264},[212,72359,72361],{"className":251,"code":72360,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spiral', props: {} }\n ]\n})\n",[99,72362,72363,72373,72377,72391,72395,72404,72408],{"__ignoreMap":178},[220,72364,72365,72367,72369,72371],{"class":222,"line":223},[220,72366,261],{"class":260},[220,72368,11512],{"class":264},[220,72370,268],{"class":260},[220,72372,4007],{"class":230},[220,72374,72375],{"class":222,"line":179},[220,72376,647],{"emptyLinePlaceholder":194},[220,72378,72379,72381,72383,72385,72387,72389],{"class":222,"line":389},[220,72380,1735],{"class":260},[220,72382,1738],{"class":420},[220,72384,1741],{"class":260},[220,72386,1744],{"class":260},[220,72388,1747],{"class":226},[220,72390,1750],{"class":264},[220,72392,72393],{"class":222,"line":399},[220,72394,1765],{"class":264},[220,72396,72397,72399,72402],{"class":222,"line":644},[220,72398,1770],{"class":264},[220,72400,72401],{"class":230},"'Spiral'",[220,72403,2465],{"class":264},[220,72405,72406],{"class":222,"line":650},[220,72407,1787],{"class":264},[220,72409,72410],{"class":222,"line":656},[220,72411,1792],{"class":264},[1504,72413,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":72415},[72416,72417],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":72225,"description":72233},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":72424,"title":72425,"body":72426,"category":15908,"componentType":25877,"description":72433,"extension":191,"meta":72710,"navigation":194,"path":72711,"requiresChild":32530,"seo":72712,"stem":72713,"__hash__":72714},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":72427,"toc":72706},[72428,72431,72434,72436,72438,72441,72443,72704],[11,72429,72425],{"id":72430},"star",[15,72432,72433],{},"Classic star polygon with straight sides and sharp pointed tips",[31911,72435],{"component":72425},[23,72437,31915],{"id":26533},[31917,72439],{":props":72440},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,72442,31923],{"id":31922},[246,72444,72445,72493,72544,72592,72642],{":tabs":1557},[212,72446,72448],{"className":334,"code":72447,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,72449,72450,72458,72465,72473,72481,72485],{"__ignoreMap":178},[220,72451,72452,72454,72456],{"class":222,"line":223},[220,72453,343],{"class":264},[220,72455,347],{"class":346},[220,72457,359],{"class":264},[220,72459,72460,72462],{"class":222,"line":179},[220,72461,364],{"class":264},[220,72463,72464],{"class":346},"Star\n",[220,72466,72467,72469,72471],{"class":222,"line":389},[220,72468,9635],{"class":226},[220,72470,353],{"class":264},[220,72472,9591],{"class":230},[220,72474,72475,72477,72479],{"class":222,"line":399},[220,72476,17405],{"class":226},[220,72478,353],{"class":264},[220,72480,48148],{"class":230},[220,72482,72483],{"class":222,"line":644},[220,72484,1234],{"class":264},[220,72486,72487,72489,72491],{"class":222,"line":650},[220,72488,402],{"class":264},[220,72490,347],{"class":346},[220,72492,359],{"class":264},[212,72494,72496],{"className":409,"code":72495,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,72497,72498,72506,72512,72520,72532,72536],{"__ignoreMap":178},[220,72499,72500,72502,72504],{"class":222,"line":223},[220,72501,343],{"class":264},[220,72503,347],{"class":420},[220,72505,359],{"class":264},[220,72507,72508,72510],{"class":222,"line":179},[220,72509,364],{"class":264},[220,72511,72464],{"class":420},[220,72513,72514,72516,72518],{"class":222,"line":389},[220,72515,9635],{"class":226},[220,72517,353],{"class":260},[220,72519,9591],{"class":230},[220,72521,72522,72524,72526,72528,72530],{"class":222,"line":399},[220,72523,9645],{"class":226},[220,72525,353],{"class":260},[220,72527,743],{"class":264},[220,72529,8249],{"class":420},[220,72531,749],{"class":264},[220,72533,72534],{"class":222,"line":644},[220,72535,1234],{"class":264},[220,72537,72538,72540,72542],{"class":222,"line":650},[220,72539,402],{"class":264},[220,72541,347],{"class":420},[220,72543,359],{"class":264},[212,72545,72546],{"className":2844,"code":72495,"language":2846,"meta":178,"style":178},[99,72547,72548,72556,72562,72570,72580,72584],{"__ignoreMap":178},[220,72549,72550,72552,72554],{"class":222,"line":223},[220,72551,343],{"class":264},[220,72553,347],{"class":420},[220,72555,359],{"class":264},[220,72557,72558,72560],{"class":222,"line":179},[220,72559,364],{"class":264},[220,72561,72464],{"class":420},[220,72563,72564,72566,72568],{"class":222,"line":389},[220,72565,9635],{"class":226},[220,72567,353],{"class":264},[220,72569,9591],{"class":230},[220,72571,72572,72574,72576,72578],{"class":222,"line":399},[220,72573,9645],{"class":226},[220,72575,29871],{"class":264},[220,72577,8249],{"class":420},[220,72579,749],{"class":264},[220,72581,72582],{"class":222,"line":644},[220,72583,1234],{"class":264},[220,72585,72586,72588,72590],{"class":222,"line":650},[220,72587,402],{"class":264},[220,72589,347],{"class":420},[220,72591,359],{"class":264},[212,72593,72594],{"className":468,"code":72495,"language":469,"meta":178,"style":178},[99,72595,72596,72604,72610,72618,72630,72634],{"__ignoreMap":178},[220,72597,72598,72600,72602],{"class":222,"line":223},[220,72599,343],{"class":264},[220,72601,347],{"class":420},[220,72603,359],{"class":264},[220,72605,72606,72608],{"class":222,"line":179},[220,72607,364],{"class":264},[220,72609,72464],{"class":420},[220,72611,72612,72614,72616],{"class":222,"line":389},[220,72613,9635],{"class":226},[220,72615,353],{"class":260},[220,72617,9591],{"class":230},[220,72619,72620,72622,72624,72626,72628],{"class":222,"line":399},[220,72621,9645],{"class":226},[220,72623,353],{"class":260},[220,72625,743],{"class":264},[220,72627,8249],{"class":420},[220,72629,749],{"class":264},[220,72631,72632],{"class":222,"line":644},[220,72633,1234],{"class":264},[220,72635,72636,72638,72640],{"class":222,"line":650},[220,72637,402],{"class":264},[220,72639,347],{"class":420},[220,72641,359],{"class":264},[212,72643,72645],{"className":251,"code":72644,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Star', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[99,72646,72647,72657,72661,72675,72679,72696,72700],{"__ignoreMap":178},[220,72648,72649,72651,72653,72655],{"class":222,"line":223},[220,72650,261],{"class":260},[220,72652,11512],{"class":264},[220,72654,268],{"class":260},[220,72656,4007],{"class":230},[220,72658,72659],{"class":222,"line":179},[220,72660,647],{"emptyLinePlaceholder":194},[220,72662,72663,72665,72667,72669,72671,72673],{"class":222,"line":389},[220,72664,1735],{"class":260},[220,72666,1738],{"class":420},[220,72668,1741],{"class":260},[220,72670,1744],{"class":260},[220,72672,1747],{"class":226},[220,72674,1750],{"class":264},[220,72676,72677],{"class":222,"line":399},[220,72678,1765],{"class":264},[220,72680,72681,72683,72686,72688,72690,72692,72694],{"class":222,"line":644},[220,72682,1770],{"class":264},[220,72684,72685],{"class":230},"'Star'",[220,72687,1776],{"class":264},[220,72689,10169],{"class":230},[220,72691,6566],{"class":264},[220,72693,8249],{"class":420},[220,72695,1782],{"class":264},[220,72697,72698],{"class":222,"line":650},[220,72699,1787],{"class":264},[220,72701,72702],{"class":222,"line":656},[220,72703,1792],{"class":264},[1504,72705,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72707},[72708,72709],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":72425,"description":72433},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":72716,"title":72717,"body":72718,"category":32806,"componentType":25883,"description":72725,"extension":191,"meta":73042,"navigation":194,"path":73043,"requiresChild":194,"seo":73044,"stem":73045,"__hash__":73046},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":72719,"toc":73038},[72720,72723,72726,72728,72730,72733,72735,73036],[11,72721,72717],{"id":72722},"stone",[15,72724,72725],{},"Applies a marbled stone relief and surface distortion to child content",[31911,72727],{"component":72717},[23,72729,31915],{"id":26533},[31917,72731],{":props":72732},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Strength of the relief shading applied to the child content\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the pattern — lower = larger features, higher = finer grain\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Contrast of the texture — negative flattens it into a subtle overlay\"},{\"name\":\"distortion\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Surface distortion — warps the child along the texture like carved relief\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[23,72734,31923],{"id":31922},[246,72736,72737,72793,72852,72908,72966],{":tabs":1557},[212,72738,72740],{"className":334,"code":72739,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStone\n :intensity=\"0.5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FStone>\n\u003C\u002FShader>\n",[99,72741,72742,72750,72757,72765,72769,72777,72785],{"__ignoreMap":178},[220,72743,72744,72746,72748],{"class":222,"line":223},[220,72745,343],{"class":264},[220,72747,347],{"class":346},[220,72749,359],{"class":264},[220,72751,72752,72754],{"class":222,"line":179},[220,72753,364],{"class":264},[220,72755,72756],{"class":346},"Stone\n",[220,72758,72759,72761,72763],{"class":222,"line":389},[220,72760,20371],{"class":226},[220,72762,353],{"class":264},[220,72764,42158],{"class":230},[220,72766,72767],{"class":222,"line":399},[220,72768,31959],{"class":264},[220,72770,72771,72773,72775],{"class":222,"line":644},[220,72772,2550],{"class":264},[220,72774,2553],{"class":346},[220,72776,386],{"class":264},[220,72778,72779,72781,72783],{"class":222,"line":650},[220,72780,2567],{"class":264},[220,72782,72717],{"class":346},[220,72784,359],{"class":264},[220,72786,72787,72789,72791],{"class":222,"line":656},[220,72788,402],{"class":264},[220,72790,347],{"class":346},[220,72792,359],{"class":264},[212,72794,72796],{"className":409,"code":72795,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStone\n intensity={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FStone>\n\u003C\u002FShader>\n",[99,72797,72798,72806,72812,72824,72828,72836,72844],{"__ignoreMap":178},[220,72799,72800,72802,72804],{"class":222,"line":223},[220,72801,343],{"class":264},[220,72803,347],{"class":420},[220,72805,359],{"class":264},[220,72807,72808,72810],{"class":222,"line":179},[220,72809,364],{"class":264},[220,72811,72756],{"class":420},[220,72813,72814,72816,72818,72820,72822],{"class":222,"line":389},[220,72815,20482],{"class":226},[220,72817,353],{"class":260},[220,72819,743],{"class":264},[220,72821,7754],{"class":420},[220,72823,749],{"class":264},[220,72825,72826],{"class":222,"line":399},[220,72827,31959],{"class":264},[220,72829,72830,72832,72834],{"class":222,"line":644},[220,72831,2550],{"class":264},[220,72833,2553],{"class":420},[220,72835,386],{"class":264},[220,72837,72838,72840,72842],{"class":222,"line":650},[220,72839,2567],{"class":264},[220,72841,72717],{"class":420},[220,72843,359],{"class":264},[220,72845,72846,72848,72850],{"class":222,"line":656},[220,72847,402],{"class":264},[220,72849,347],{"class":420},[220,72851,359],{"class":264},[212,72853,72854],{"className":2844,"code":72795,"language":2846,"meta":178,"style":178},[99,72855,72856,72864,72870,72880,72884,72892,72900],{"__ignoreMap":178},[220,72857,72858,72860,72862],{"class":222,"line":223},[220,72859,343],{"class":264},[220,72861,347],{"class":420},[220,72863,359],{"class":264},[220,72865,72866,72868],{"class":222,"line":179},[220,72867,364],{"class":264},[220,72869,72756],{"class":420},[220,72871,72872,72874,72876,72878],{"class":222,"line":389},[220,72873,20482],{"class":226},[220,72875,29871],{"class":264},[220,72877,7754],{"class":420},[220,72879,749],{"class":264},[220,72881,72882],{"class":222,"line":399},[220,72883,31959],{"class":264},[220,72885,72886,72888,72890],{"class":222,"line":644},[220,72887,2550],{"class":264},[220,72889,2553],{"class":420},[220,72891,386],{"class":264},[220,72893,72894,72896,72898],{"class":222,"line":650},[220,72895,2567],{"class":264},[220,72897,72717],{"class":420},[220,72899,359],{"class":264},[220,72901,72902,72904,72906],{"class":222,"line":656},[220,72903,402],{"class":264},[220,72905,347],{"class":420},[220,72907,359],{"class":264},[212,72909,72910],{"className":468,"code":72795,"language":469,"meta":178,"style":178},[99,72911,72912,72920,72926,72938,72942,72950,72958],{"__ignoreMap":178},[220,72913,72914,72916,72918],{"class":222,"line":223},[220,72915,343],{"class":264},[220,72917,347],{"class":420},[220,72919,359],{"class":264},[220,72921,72922,72924],{"class":222,"line":179},[220,72923,364],{"class":264},[220,72925,72756],{"class":420},[220,72927,72928,72930,72932,72934,72936],{"class":222,"line":389},[220,72929,20482],{"class":226},[220,72931,353],{"class":260},[220,72933,743],{"class":264},[220,72935,7754],{"class":420},[220,72937,749],{"class":264},[220,72939,72940],{"class":222,"line":399},[220,72941,31959],{"class":264},[220,72943,72944,72946,72948],{"class":222,"line":644},[220,72945,2550],{"class":264},[220,72947,2553],{"class":420},[220,72949,386],{"class":264},[220,72951,72952,72954,72956],{"class":222,"line":650},[220,72953,2567],{"class":264},[220,72955,72717],{"class":420},[220,72957,359],{"class":264},[220,72959,72960,72962,72964],{"class":222,"line":656},[220,72961,402],{"class":264},[220,72963,347],{"class":420},[220,72965,359],{"class":264},[212,72967,72969],{"className":251,"code":72968,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stone', props: { intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,72970,72971,72981,72985,72999,73003,73016,73024,73028,73032],{"__ignoreMap":178},[220,72972,72973,72975,72977,72979],{"class":222,"line":223},[220,72974,261],{"class":260},[220,72976,11512],{"class":264},[220,72978,268],{"class":260},[220,72980,4007],{"class":230},[220,72982,72983],{"class":222,"line":179},[220,72984,647],{"emptyLinePlaceholder":194},[220,72986,72987,72989,72991,72993,72995,72997],{"class":222,"line":389},[220,72988,1735],{"class":260},[220,72990,1738],{"class":420},[220,72992,1741],{"class":260},[220,72994,1744],{"class":260},[220,72996,1747],{"class":226},[220,72998,1750],{"class":264},[220,73000,73001],{"class":222,"line":399},[220,73002,1765],{"class":264},[220,73004,73005,73007,73010,73012,73014],{"class":222,"line":644},[220,73006,1770],{"class":264},[220,73008,73009],{"class":230},"'Stone'",[220,73011,32203],{"class":264},[220,73013,7754],{"class":420},[220,73015,7546],{"class":264},[220,73017,73018,73020,73022],{"class":222,"line":650},[220,73019,7014],{"class":264},[220,73021,3206],{"class":230},[220,73023,2465],{"class":264},[220,73025,73026],{"class":222,"line":656},[220,73027,7031],{"class":264},[220,73029,73030],{"class":222,"line":673},[220,73031,1787],{"class":264},[220,73033,73034],{"class":222,"line":682},[220,73035,1792],{"class":264},[1504,73037,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73039},[73040,73041],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":72717,"description":72725},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":73048,"title":73049,"body":73050,"category":33063,"componentType":25877,"description":73057,"extension":191,"meta":73242,"navigation":194,"path":73243,"requiresChild":32530,"seo":73244,"stem":73245,"__hash__":73246},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":73051,"toc":73238},[73052,73055,73058,73060,73062,73065,73067,73236],[11,73053,73049],{"id":73054},"strands",[15,73056,73057],{},"Flowing ribbons of light with a multi-color gradient",[31911,73059],{"component":73049},[23,73061,31915],{"id":26533},[31917,73063],{":props":73064},"[{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall animation speed\"},{\"name\":\"amplitude\",\"type\":\"number\",\"default\":\"2\",\"description\":\"How far the strands wave away from their resting line\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How many waves run along each strand\"},{\"name\":\"lineCount\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of strands\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Thickness of each strand’s solid core\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of each strand’s edge (0 is crisp, higher is feathered)\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How far the strands fan out across the field\"},{\"name\":\"pinEdges\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Pin the strands so they converge to the start and end points\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"[{\\\"color\\\":\\\"#00e5ff\\\",\\\"position\\\":0},{\\\"color\\\":\\\"#5b8cff\\\",\\\"position\\\":0.34},{\\\"color\\\":\\\"#b06bff\\\",\\\"position\\\":0.67},{\\\"color\\\":\\\"#ff5fa2\\\",\\\"position\\\":1}]\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space used to blend the gradient\"},{\"name\":\"colorScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How many times the gradient repeats along the strands\"},{\"name\":\"colorVariance\",\"type\":\"number\",\"default\":\"1\",\"description\":\"At 0 every strand shares the same color; at 1 the strands spread across the full gradient\"},{\"name\":\"colorSpeed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Speed at which the colors flow along the strands (loops)\"},{\"name\":\"start\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0.5}\",\"description\":\"Starting point of the strands\"},{\"name\":\"end\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":1,\\\"y\\\":0.5}\",\"description\":\"Ending point of the strands\"}]",[23,73066,31923],{"id":31922},[246,73068,73069,73098,73126,73154,73182],{":tabs":1557},[212,73070,73072],{"className":334,"code":73071,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,73073,73074,73082,73090],{"__ignoreMap":178},[220,73075,73076,73078,73080],{"class":222,"line":223},[220,73077,343],{"class":264},[220,73079,347],{"class":346},[220,73081,359],{"class":264},[220,73083,73084,73086,73088],{"class":222,"line":179},[220,73085,364],{"class":264},[220,73087,73049],{"class":346},[220,73089,386],{"class":264},[220,73091,73092,73094,73096],{"class":222,"line":389},[220,73093,402],{"class":264},[220,73095,347],{"class":346},[220,73097,359],{"class":264},[212,73099,73100],{"className":409,"code":73071,"language":411,"meta":178,"style":178},[99,73101,73102,73110,73118],{"__ignoreMap":178},[220,73103,73104,73106,73108],{"class":222,"line":223},[220,73105,343],{"class":264},[220,73107,347],{"class":420},[220,73109,359],{"class":264},[220,73111,73112,73114,73116],{"class":222,"line":179},[220,73113,364],{"class":264},[220,73115,73049],{"class":420},[220,73117,386],{"class":264},[220,73119,73120,73122,73124],{"class":222,"line":389},[220,73121,402],{"class":264},[220,73123,347],{"class":420},[220,73125,359],{"class":264},[212,73127,73128],{"className":2844,"code":73071,"language":2846,"meta":178,"style":178},[99,73129,73130,73138,73146],{"__ignoreMap":178},[220,73131,73132,73134,73136],{"class":222,"line":223},[220,73133,343],{"class":264},[220,73135,347],{"class":420},[220,73137,359],{"class":264},[220,73139,73140,73142,73144],{"class":222,"line":179},[220,73141,364],{"class":264},[220,73143,73049],{"class":420},[220,73145,386],{"class":264},[220,73147,73148,73150,73152],{"class":222,"line":389},[220,73149,402],{"class":264},[220,73151,347],{"class":420},[220,73153,359],{"class":264},[212,73155,73156],{"className":468,"code":73071,"language":469,"meta":178,"style":178},[99,73157,73158,73166,73174],{"__ignoreMap":178},[220,73159,73160,73162,73164],{"class":222,"line":223},[220,73161,343],{"class":264},[220,73163,347],{"class":420},[220,73165,359],{"class":264},[220,73167,73168,73170,73172],{"class":222,"line":179},[220,73169,364],{"class":264},[220,73171,73049],{"class":420},[220,73173,386],{"class":264},[220,73175,73176,73178,73180],{"class":222,"line":389},[220,73177,402],{"class":264},[220,73179,347],{"class":420},[220,73181,359],{"class":264},[212,73183,73185],{"className":251,"code":73184,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Strands', props: {} }\n ]\n})\n",[99,73186,73187,73197,73201,73215,73219,73228,73232],{"__ignoreMap":178},[220,73188,73189,73191,73193,73195],{"class":222,"line":223},[220,73190,261],{"class":260},[220,73192,11512],{"class":264},[220,73194,268],{"class":260},[220,73196,4007],{"class":230},[220,73198,73199],{"class":222,"line":179},[220,73200,647],{"emptyLinePlaceholder":194},[220,73202,73203,73205,73207,73209,73211,73213],{"class":222,"line":389},[220,73204,1735],{"class":260},[220,73206,1738],{"class":420},[220,73208,1741],{"class":260},[220,73210,1744],{"class":260},[220,73212,1747],{"class":226},[220,73214,1750],{"class":264},[220,73216,73217],{"class":222,"line":399},[220,73218,1765],{"class":264},[220,73220,73221,73223,73226],{"class":222,"line":644},[220,73222,1770],{"class":264},[220,73224,73225],{"class":230},"'Strands'",[220,73227,2465],{"class":264},[220,73229,73230],{"class":222,"line":650},[220,73231,1787],{"class":264},[220,73233,73234],{"class":222,"line":656},[220,73235,1792],{"class":264},[1504,73237,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73239},[73240,73241],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":73049,"description":73057},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":73248,"title":73249,"body":73250,"category":33396,"componentType":25883,"description":73257,"extension":191,"meta":73518,"navigation":194,"path":73519,"requiresChild":194,"seo":73520,"stem":73521,"__hash__":73522},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":73251,"toc":73514},[73252,73255,73258,73260,73262,73265,73267,73512],[11,73253,73249],{"id":73254},"stretch",[15,73256,73257],{},"Stretch content towards a direction from a center point",[31911,73259],{"component":73249},[23,73261,31915],{"id":26533},[31917,73263],{":props":73264},"[{\"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,73266,31923],{"id":31922},[246,73268,73269,73314,73358,73402,73446],{":tabs":1557},[212,73270,73272],{"className":334,"code":73271,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,73273,73274,73282,73290,73298,73306],{"__ignoreMap":178},[220,73275,73276,73278,73280],{"class":222,"line":223},[220,73277,343],{"class":264},[220,73279,347],{"class":346},[220,73281,359],{"class":264},[220,73283,73284,73286,73288],{"class":222,"line":179},[220,73285,364],{"class":264},[220,73287,73249],{"class":346},[220,73289,359],{"class":264},[220,73291,73292,73294,73296],{"class":222,"line":389},[220,73293,2550],{"class":264},[220,73295,2553],{"class":346},[220,73297,386],{"class":264},[220,73299,73300,73302,73304],{"class":222,"line":399},[220,73301,2567],{"class":264},[220,73303,73249],{"class":346},[220,73305,359],{"class":264},[220,73307,73308,73310,73312],{"class":222,"line":644},[220,73309,402],{"class":264},[220,73311,347],{"class":346},[220,73313,359],{"class":264},[212,73315,73316],{"className":409,"code":73271,"language":411,"meta":178,"style":178},[99,73317,73318,73326,73334,73342,73350],{"__ignoreMap":178},[220,73319,73320,73322,73324],{"class":222,"line":223},[220,73321,343],{"class":264},[220,73323,347],{"class":420},[220,73325,359],{"class":264},[220,73327,73328,73330,73332],{"class":222,"line":179},[220,73329,364],{"class":264},[220,73331,73249],{"class":420},[220,73333,359],{"class":264},[220,73335,73336,73338,73340],{"class":222,"line":389},[220,73337,2550],{"class":264},[220,73339,2553],{"class":420},[220,73341,386],{"class":264},[220,73343,73344,73346,73348],{"class":222,"line":399},[220,73345,2567],{"class":264},[220,73347,73249],{"class":420},[220,73349,359],{"class":264},[220,73351,73352,73354,73356],{"class":222,"line":644},[220,73353,402],{"class":264},[220,73355,347],{"class":420},[220,73357,359],{"class":264},[212,73359,73360],{"className":2844,"code":73271,"language":2846,"meta":178,"style":178},[99,73361,73362,73370,73378,73386,73394],{"__ignoreMap":178},[220,73363,73364,73366,73368],{"class":222,"line":223},[220,73365,343],{"class":264},[220,73367,347],{"class":420},[220,73369,359],{"class":264},[220,73371,73372,73374,73376],{"class":222,"line":179},[220,73373,364],{"class":264},[220,73375,73249],{"class":420},[220,73377,359],{"class":264},[220,73379,73380,73382,73384],{"class":222,"line":389},[220,73381,2550],{"class":264},[220,73383,2553],{"class":420},[220,73385,386],{"class":264},[220,73387,73388,73390,73392],{"class":222,"line":399},[220,73389,2567],{"class":264},[220,73391,73249],{"class":420},[220,73393,359],{"class":264},[220,73395,73396,73398,73400],{"class":222,"line":644},[220,73397,402],{"class":264},[220,73399,347],{"class":420},[220,73401,359],{"class":264},[212,73403,73404],{"className":468,"code":73271,"language":469,"meta":178,"style":178},[99,73405,73406,73414,73422,73430,73438],{"__ignoreMap":178},[220,73407,73408,73410,73412],{"class":222,"line":223},[220,73409,343],{"class":264},[220,73411,347],{"class":420},[220,73413,359],{"class":264},[220,73415,73416,73418,73420],{"class":222,"line":179},[220,73417,364],{"class":264},[220,73419,73249],{"class":420},[220,73421,359],{"class":264},[220,73423,73424,73426,73428],{"class":222,"line":389},[220,73425,2550],{"class":264},[220,73427,2553],{"class":420},[220,73429,386],{"class":264},[220,73431,73432,73434,73436],{"class":222,"line":399},[220,73433,2567],{"class":264},[220,73435,73249],{"class":420},[220,73437,359],{"class":264},[220,73439,73440,73442,73444],{"class":222,"line":644},[220,73441,402],{"class":264},[220,73443,347],{"class":420},[220,73445,359],{"class":264},[212,73447,73449],{"className":251,"code":73448,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stretch', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,73450,73451,73461,73465,73479,73483,73492,73500,73504,73508],{"__ignoreMap":178},[220,73452,73453,73455,73457,73459],{"class":222,"line":223},[220,73454,261],{"class":260},[220,73456,11512],{"class":264},[220,73458,268],{"class":260},[220,73460,4007],{"class":230},[220,73462,73463],{"class":222,"line":179},[220,73464,647],{"emptyLinePlaceholder":194},[220,73466,73467,73469,73471,73473,73475,73477],{"class":222,"line":389},[220,73468,1735],{"class":260},[220,73470,1738],{"class":420},[220,73472,1741],{"class":260},[220,73474,1744],{"class":260},[220,73476,1747],{"class":226},[220,73478,1750],{"class":264},[220,73480,73481],{"class":222,"line":399},[220,73482,1765],{"class":264},[220,73484,73485,73487,73490],{"class":222,"line":644},[220,73486,1770],{"class":264},[220,73488,73489],{"class":230},"'Stretch'",[220,73491,7009],{"class":264},[220,73493,73494,73496,73498],{"class":222,"line":650},[220,73495,7014],{"class":264},[220,73497,3206],{"class":230},[220,73499,2465],{"class":264},[220,73501,73502],{"class":222,"line":656},[220,73503,7031],{"class":264},[220,73505,73506],{"class":222,"line":673},[220,73507,1787],{"class":264},[220,73509,73510],{"class":222,"line":682},[220,73511,1792],{"class":264},[1504,73513,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73515},[73516,73517],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":73249,"description":73257},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":73524,"title":15839,"body":73525,"category":33063,"componentType":25877,"description":73532,"extension":191,"meta":73716,"navigation":194,"path":73717,"requiresChild":32530,"seo":73718,"stem":73719,"__hash__":73720},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":73526,"toc":73712},[73527,73530,73533,73535,73537,73540,73542,73710],[11,73528,15839],{"id":73529},"stripes",[15,73531,73532],{},"Alternating colored stripes with animation",[31911,73534],{"component":15839},[23,73536,31915],{"id":26533},[31917,73538],{":props":73539},"[{\"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,73541,31923],{"id":31922},[246,73543,73544,73573,73601,73629,73657],{":tabs":1557},[212,73545,73547],{"className":334,"code":73546,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,73548,73549,73557,73565],{"__ignoreMap":178},[220,73550,73551,73553,73555],{"class":222,"line":223},[220,73552,343],{"class":264},[220,73554,347],{"class":346},[220,73556,359],{"class":264},[220,73558,73559,73561,73563],{"class":222,"line":179},[220,73560,364],{"class":264},[220,73562,15839],{"class":346},[220,73564,386],{"class":264},[220,73566,73567,73569,73571],{"class":222,"line":389},[220,73568,402],{"class":264},[220,73570,347],{"class":346},[220,73572,359],{"class":264},[212,73574,73575],{"className":409,"code":73546,"language":411,"meta":178,"style":178},[99,73576,73577,73585,73593],{"__ignoreMap":178},[220,73578,73579,73581,73583],{"class":222,"line":223},[220,73580,343],{"class":264},[220,73582,347],{"class":420},[220,73584,359],{"class":264},[220,73586,73587,73589,73591],{"class":222,"line":179},[220,73588,364],{"class":264},[220,73590,15839],{"class":420},[220,73592,386],{"class":264},[220,73594,73595,73597,73599],{"class":222,"line":389},[220,73596,402],{"class":264},[220,73598,347],{"class":420},[220,73600,359],{"class":264},[212,73602,73603],{"className":2844,"code":73546,"language":2846,"meta":178,"style":178},[99,73604,73605,73613,73621],{"__ignoreMap":178},[220,73606,73607,73609,73611],{"class":222,"line":223},[220,73608,343],{"class":264},[220,73610,347],{"class":420},[220,73612,359],{"class":264},[220,73614,73615,73617,73619],{"class":222,"line":179},[220,73616,364],{"class":264},[220,73618,15839],{"class":420},[220,73620,386],{"class":264},[220,73622,73623,73625,73627],{"class":222,"line":389},[220,73624,402],{"class":264},[220,73626,347],{"class":420},[220,73628,359],{"class":264},[212,73630,73631],{"className":468,"code":73546,"language":469,"meta":178,"style":178},[99,73632,73633,73641,73649],{"__ignoreMap":178},[220,73634,73635,73637,73639],{"class":222,"line":223},[220,73636,343],{"class":264},[220,73638,347],{"class":420},[220,73640,359],{"class":264},[220,73642,73643,73645,73647],{"class":222,"line":179},[220,73644,364],{"class":264},[220,73646,15839],{"class":420},[220,73648,386],{"class":264},[220,73650,73651,73653,73655],{"class":222,"line":389},[220,73652,402],{"class":264},[220,73654,347],{"class":420},[220,73656,359],{"class":264},[212,73658,73660],{"className":251,"code":73659,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stripes', props: {} }\n ]\n})\n",[99,73661,73662,73672,73676,73690,73694,73702,73706],{"__ignoreMap":178},[220,73663,73664,73666,73668,73670],{"class":222,"line":223},[220,73665,261],{"class":260},[220,73667,11512],{"class":264},[220,73669,268],{"class":260},[220,73671,4007],{"class":230},[220,73673,73674],{"class":222,"line":179},[220,73675,647],{"emptyLinePlaceholder":194},[220,73677,73678,73680,73682,73684,73686,73688],{"class":222,"line":389},[220,73679,1735],{"class":260},[220,73681,1738],{"class":420},[220,73683,1741],{"class":260},[220,73685,1744],{"class":260},[220,73687,1747],{"class":226},[220,73689,1750],{"class":264},[220,73691,73692],{"class":222,"line":399},[220,73693,1765],{"class":264},[220,73695,73696,73698,73700],{"class":222,"line":644},[220,73697,1770],{"class":264},[220,73699,17097],{"class":230},[220,73701,2465],{"class":264},[220,73703,73704],{"class":222,"line":650},[220,73705,1787],{"class":264},[220,73707,73708],{"class":222,"line":656},[220,73709,1792],{"class":264},[1504,73711,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":73713},[73714,73715],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15839,"description":73532},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":73722,"title":73723,"body":73724,"category":33063,"componentType":25877,"description":73731,"extension":191,"meta":73963,"navigation":194,"path":73964,"requiresChild":32530,"seo":73965,"stem":73966,"__hash__":73967},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":73725,"toc":73959},[73726,73729,73732,73734,73736,73739,73741,73957],[11,73727,73723],{"id":73728},"studiobackground",[15,73730,73731],{},"Multi-light studio background with ambient motion.",[31911,73733],{"component":73723},[23,73735,31915],{"id":26533},[31917,73737],{":props":73738},"[{\"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,73740,31923],{"id":31922},[246,73742,73743,73784,73822,73860,73898],{":tabs":1557},[212,73744,73746],{"className":334,"code":73745,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,73747,73748,73756,73763,73772,73776],{"__ignoreMap":178},[220,73749,73750,73752,73754],{"class":222,"line":223},[220,73751,343],{"class":264},[220,73753,347],{"class":346},[220,73755,359],{"class":264},[220,73757,73758,73760],{"class":222,"line":179},[220,73759,364],{"class":264},[220,73761,73762],{"class":346},"StudioBackground\n",[220,73764,73765,73767,73769],{"class":222,"line":389},[220,73766,9635],{"class":226},[220,73768,353],{"class":264},[220,73770,73771],{"class":230},"\"#d8dbec\"\n",[220,73773,73774],{"class":222,"line":399},[220,73775,1234],{"class":264},[220,73777,73778,73780,73782],{"class":222,"line":644},[220,73779,402],{"class":264},[220,73781,347],{"class":346},[220,73783,359],{"class":264},[212,73785,73786],{"className":409,"code":73745,"language":411,"meta":178,"style":178},[99,73787,73788,73796,73802,73810,73814],{"__ignoreMap":178},[220,73789,73790,73792,73794],{"class":222,"line":223},[220,73791,343],{"class":264},[220,73793,347],{"class":420},[220,73795,359],{"class":264},[220,73797,73798,73800],{"class":222,"line":179},[220,73799,364],{"class":264},[220,73801,73762],{"class":420},[220,73803,73804,73806,73808],{"class":222,"line":389},[220,73805,9635],{"class":226},[220,73807,353],{"class":260},[220,73809,73771],{"class":230},[220,73811,73812],{"class":222,"line":399},[220,73813,1234],{"class":264},[220,73815,73816,73818,73820],{"class":222,"line":644},[220,73817,402],{"class":264},[220,73819,347],{"class":420},[220,73821,359],{"class":264},[212,73823,73824],{"className":2844,"code":73745,"language":2846,"meta":178,"style":178},[99,73825,73826,73834,73840,73848,73852],{"__ignoreMap":178},[220,73827,73828,73830,73832],{"class":222,"line":223},[220,73829,343],{"class":264},[220,73831,347],{"class":420},[220,73833,359],{"class":264},[220,73835,73836,73838],{"class":222,"line":179},[220,73837,364],{"class":264},[220,73839,73762],{"class":420},[220,73841,73842,73844,73846],{"class":222,"line":389},[220,73843,9635],{"class":226},[220,73845,353],{"class":264},[220,73847,73771],{"class":230},[220,73849,73850],{"class":222,"line":399},[220,73851,1234],{"class":264},[220,73853,73854,73856,73858],{"class":222,"line":644},[220,73855,402],{"class":264},[220,73857,347],{"class":420},[220,73859,359],{"class":264},[212,73861,73862],{"className":468,"code":73745,"language":469,"meta":178,"style":178},[99,73863,73864,73872,73878,73886,73890],{"__ignoreMap":178},[220,73865,73866,73868,73870],{"class":222,"line":223},[220,73867,343],{"class":264},[220,73869,347],{"class":420},[220,73871,359],{"class":264},[220,73873,73874,73876],{"class":222,"line":179},[220,73875,364],{"class":264},[220,73877,73762],{"class":420},[220,73879,73880,73882,73884],{"class":222,"line":389},[220,73881,9635],{"class":226},[220,73883,353],{"class":260},[220,73885,73771],{"class":230},[220,73887,73888],{"class":222,"line":399},[220,73889,1234],{"class":264},[220,73891,73892,73894,73896],{"class":222,"line":644},[220,73893,402],{"class":264},[220,73895,347],{"class":420},[220,73897,359],{"class":264},[212,73899,73901],{"className":251,"code":73900,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'StudioBackground', props: { color: '#d8dbec' } }\n ]\n})\n",[99,73902,73903,73913,73917,73931,73935,73949,73953],{"__ignoreMap":178},[220,73904,73905,73907,73909,73911],{"class":222,"line":223},[220,73906,261],{"class":260},[220,73908,11512],{"class":264},[220,73910,268],{"class":260},[220,73912,4007],{"class":230},[220,73914,73915],{"class":222,"line":179},[220,73916,647],{"emptyLinePlaceholder":194},[220,73918,73919,73921,73923,73925,73927,73929],{"class":222,"line":389},[220,73920,1735],{"class":260},[220,73922,1738],{"class":420},[220,73924,1741],{"class":260},[220,73926,1744],{"class":260},[220,73928,1747],{"class":226},[220,73930,1750],{"class":264},[220,73932,73933],{"class":222,"line":399},[220,73934,1765],{"class":264},[220,73936,73937,73939,73942,73944,73947],{"class":222,"line":644},[220,73938,1770],{"class":264},[220,73940,73941],{"class":230},"'StudioBackground'",[220,73943,1776],{"class":264},[220,73945,73946],{"class":230},"'#d8dbec'",[220,73948,1782],{"class":264},[220,73950,73951],{"class":222,"line":650},[220,73952,1787],{"class":264},[220,73954,73955],{"class":222,"line":656},[220,73956,1792],{"class":264},[1504,73958,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73960},[73961,73962],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":73723,"description":73731},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":73969,"title":73970,"body":73971,"category":33063,"componentType":25877,"description":73978,"extension":191,"meta":74257,"navigation":194,"path":74258,"requiresChild":32530,"seo":74259,"stem":74260,"__hash__":74261},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":73972,"toc":74253},[73973,73976,73979,73981,73983,73986,73988,74251],[11,73974,73970],{"id":73975},"sunburst",[15,73977,73978],{},"Radial sunburst rays emanating from a center point",[31911,73980],{"component":73970},[23,73982,31915],{"id":26533},[31917,73984],{":props":73985},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffdd88\",\"description\":\"Ray color\"},{\"name\":\"background\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background color\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the sunburst\"},{\"name\":\"rayCount\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of rays\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Softness of ray edges\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"How far the rays extend from the center\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How gradually the rays fade at their outer edge\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Rotation speed — positive values rotate clockwise\"}]",[23,73987,31923],{"id":31922},[246,73989,73990,74039,74090,74138,74188],{":tabs":1557},[212,73991,73993],{"className":334,"code":73992,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,73994,73995,74003,74010,74019,74027,74031],{"__ignoreMap":178},[220,73996,73997,73999,74001],{"class":222,"line":223},[220,73998,343],{"class":264},[220,74000,347],{"class":346},[220,74002,359],{"class":264},[220,74004,74005,74007],{"class":222,"line":179},[220,74006,364],{"class":264},[220,74008,74009],{"class":346},"SunBurst\n",[220,74011,74012,74014,74016],{"class":222,"line":389},[220,74013,9635],{"class":226},[220,74015,353],{"class":264},[220,74017,74018],{"class":230},"\"#ffdd88\"\n",[220,74020,74021,74023,74025],{"class":222,"line":399},[220,74022,17405],{"class":226},[220,74024,353],{"class":264},[220,74026,9650],{"class":230},[220,74028,74029],{"class":222,"line":644},[220,74030,1234],{"class":264},[220,74032,74033,74035,74037],{"class":222,"line":650},[220,74034,402],{"class":264},[220,74036,347],{"class":346},[220,74038,359],{"class":264},[212,74040,74042],{"className":409,"code":74041,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,74043,74044,74052,74058,74066,74078,74082],{"__ignoreMap":178},[220,74045,74046,74048,74050],{"class":222,"line":223},[220,74047,343],{"class":264},[220,74049,347],{"class":420},[220,74051,359],{"class":264},[220,74053,74054,74056],{"class":222,"line":179},[220,74055,364],{"class":264},[220,74057,74009],{"class":420},[220,74059,74060,74062,74064],{"class":222,"line":389},[220,74061,9635],{"class":226},[220,74063,353],{"class":260},[220,74065,74018],{"class":230},[220,74067,74068,74070,74072,74074,74076],{"class":222,"line":399},[220,74069,9645],{"class":226},[220,74071,353],{"class":260},[220,74073,743],{"class":264},[220,74075,6299],{"class":420},[220,74077,749],{"class":264},[220,74079,74080],{"class":222,"line":644},[220,74081,1234],{"class":264},[220,74083,74084,74086,74088],{"class":222,"line":650},[220,74085,402],{"class":264},[220,74087,347],{"class":420},[220,74089,359],{"class":264},[212,74091,74092],{"className":2844,"code":74041,"language":2846,"meta":178,"style":178},[99,74093,74094,74102,74108,74116,74126,74130],{"__ignoreMap":178},[220,74095,74096,74098,74100],{"class":222,"line":223},[220,74097,343],{"class":264},[220,74099,347],{"class":420},[220,74101,359],{"class":264},[220,74103,74104,74106],{"class":222,"line":179},[220,74105,364],{"class":264},[220,74107,74009],{"class":420},[220,74109,74110,74112,74114],{"class":222,"line":389},[220,74111,9635],{"class":226},[220,74113,353],{"class":264},[220,74115,74018],{"class":230},[220,74117,74118,74120,74122,74124],{"class":222,"line":399},[220,74119,9645],{"class":226},[220,74121,29871],{"class":264},[220,74123,6299],{"class":420},[220,74125,749],{"class":264},[220,74127,74128],{"class":222,"line":644},[220,74129,1234],{"class":264},[220,74131,74132,74134,74136],{"class":222,"line":650},[220,74133,402],{"class":264},[220,74135,347],{"class":420},[220,74137,359],{"class":264},[212,74139,74140],{"className":468,"code":74041,"language":469,"meta":178,"style":178},[99,74141,74142,74150,74156,74164,74176,74180],{"__ignoreMap":178},[220,74143,74144,74146,74148],{"class":222,"line":223},[220,74145,343],{"class":264},[220,74147,347],{"class":420},[220,74149,359],{"class":264},[220,74151,74152,74154],{"class":222,"line":179},[220,74153,364],{"class":264},[220,74155,74009],{"class":420},[220,74157,74158,74160,74162],{"class":222,"line":389},[220,74159,9635],{"class":226},[220,74161,353],{"class":260},[220,74163,74018],{"class":230},[220,74165,74166,74168,74170,74172,74174],{"class":222,"line":399},[220,74167,9645],{"class":226},[220,74169,353],{"class":260},[220,74171,743],{"class":264},[220,74173,6299],{"class":420},[220,74175,749],{"class":264},[220,74177,74178],{"class":222,"line":644},[220,74179,1234],{"class":264},[220,74181,74182,74184,74186],{"class":222,"line":650},[220,74183,402],{"class":264},[220,74185,347],{"class":420},[220,74187,359],{"class":264},[212,74189,74191],{"className":251,"code":74190,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SunBurst', props: { color: '#ffdd88', radius: 0.8 } }\n ]\n})\n",[99,74192,74193,74203,74207,74221,74225,74243,74247],{"__ignoreMap":178},[220,74194,74195,74197,74199,74201],{"class":222,"line":223},[220,74196,261],{"class":260},[220,74198,11512],{"class":264},[220,74200,268],{"class":260},[220,74202,4007],{"class":230},[220,74204,74205],{"class":222,"line":179},[220,74206,647],{"emptyLinePlaceholder":194},[220,74208,74209,74211,74213,74215,74217,74219],{"class":222,"line":389},[220,74210,1735],{"class":260},[220,74212,1738],{"class":420},[220,74214,1741],{"class":260},[220,74216,1744],{"class":260},[220,74218,1747],{"class":226},[220,74220,1750],{"class":264},[220,74222,74223],{"class":222,"line":399},[220,74224,1765],{"class":264},[220,74226,74227,74229,74232,74234,74237,74239,74241],{"class":222,"line":644},[220,74228,1770],{"class":264},[220,74230,74231],{"class":230},"'SunBurst'",[220,74233,1776],{"class":264},[220,74235,74236],{"class":230},"'#ffdd88'",[220,74238,6566],{"class":264},[220,74240,6299],{"class":420},[220,74242,1782],{"class":264},[220,74244,74245],{"class":222,"line":650},[220,74246,1787],{"class":264},[220,74248,74249],{"class":222,"line":656},[220,74250,1792],{"class":264},[1504,74252,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74254},[74255,74256],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":73970,"description":73978},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":74263,"title":74264,"body":74265,"category":33396,"componentType":25883,"description":74272,"extension":191,"meta":74533,"navigation":194,"path":74534,"requiresChild":194,"seo":74535,"stem":74536,"__hash__":74537},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":74266,"toc":74529},[74267,74270,74273,74275,74277,74280,74282,74527],[11,74268,74264],{"id":74269},"surface3d",[15,74271,74272],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31911,74274],{"component":74264},[23,74276,31915],{"id":26533},[31917,74278],{":props":74279},"[{\"name\":\"amplitude\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Wave height\"},{\"name\":\"waveType\",\"type\":\"\\\"fractal\\\" | \\\"sine\\\" | \\\"ridge\\\"\",\"default\":\"fractal\",\"description\":\"Wave pattern type\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Wave frequency\"},{\"name\":\"octaves\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Detail octaves\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed offset\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed\"},{\"name\":\"tilt\",\"type\":\"number\",\"default\":\"35\",\"description\":\"Camera tilt in degrees\"},{\"name\":\"roll\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera roll in degrees\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera height\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Camera zoom\"},{\"name\":\"nearCutoff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Near fade distance\"},{\"name\":\"farCutoff\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Far fade distance\"},{\"name\":\"edgePinning\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Smoothly flatten the surface at its edges (orthogonal to edge mode)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle content beyond the surface bounds\"},{\"name\":\"lighting\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Intensity of lighting and shading\"},{\"name\":\"glossiness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Surface glossiness\"},{\"name\":\"highlights\",\"type\":\"number\",\"default\":\"15\",\"description\":\"Specular highlight intensity\"},{\"name\":\"lightX\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Light direction X\"},{\"name\":\"lightY\",\"type\":\"number\",\"default\":\"-0.6\",\"description\":\"Light direction Y\"},{\"name\":\"lightZ\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Light direction Z\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Light color\"},{\"name\":\"cursorIntensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of cursor ripples\"},{\"name\":\"cursorSpeed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of cursor ripple propagation\"}]",[23,74281,31923],{"id":31922},[246,74283,74284,74329,74373,74417,74461],{":tabs":1557},[212,74285,74287],{"className":334,"code":74286,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,74288,74289,74297,74305,74313,74321],{"__ignoreMap":178},[220,74290,74291,74293,74295],{"class":222,"line":223},[220,74292,343],{"class":264},[220,74294,347],{"class":346},[220,74296,359],{"class":264},[220,74298,74299,74301,74303],{"class":222,"line":179},[220,74300,364],{"class":264},[220,74302,74264],{"class":346},[220,74304,359],{"class":264},[220,74306,74307,74309,74311],{"class":222,"line":389},[220,74308,2550],{"class":264},[220,74310,2553],{"class":346},[220,74312,386],{"class":264},[220,74314,74315,74317,74319],{"class":222,"line":399},[220,74316,2567],{"class":264},[220,74318,74264],{"class":346},[220,74320,359],{"class":264},[220,74322,74323,74325,74327],{"class":222,"line":644},[220,74324,402],{"class":264},[220,74326,347],{"class":346},[220,74328,359],{"class":264},[212,74330,74331],{"className":409,"code":74286,"language":411,"meta":178,"style":178},[99,74332,74333,74341,74349,74357,74365],{"__ignoreMap":178},[220,74334,74335,74337,74339],{"class":222,"line":223},[220,74336,343],{"class":264},[220,74338,347],{"class":420},[220,74340,359],{"class":264},[220,74342,74343,74345,74347],{"class":222,"line":179},[220,74344,364],{"class":264},[220,74346,74264],{"class":420},[220,74348,359],{"class":264},[220,74350,74351,74353,74355],{"class":222,"line":389},[220,74352,2550],{"class":264},[220,74354,2553],{"class":420},[220,74356,386],{"class":264},[220,74358,74359,74361,74363],{"class":222,"line":399},[220,74360,2567],{"class":264},[220,74362,74264],{"class":420},[220,74364,359],{"class":264},[220,74366,74367,74369,74371],{"class":222,"line":644},[220,74368,402],{"class":264},[220,74370,347],{"class":420},[220,74372,359],{"class":264},[212,74374,74375],{"className":2844,"code":74286,"language":2846,"meta":178,"style":178},[99,74376,74377,74385,74393,74401,74409],{"__ignoreMap":178},[220,74378,74379,74381,74383],{"class":222,"line":223},[220,74380,343],{"class":264},[220,74382,347],{"class":420},[220,74384,359],{"class":264},[220,74386,74387,74389,74391],{"class":222,"line":179},[220,74388,364],{"class":264},[220,74390,74264],{"class":420},[220,74392,359],{"class":264},[220,74394,74395,74397,74399],{"class":222,"line":389},[220,74396,2550],{"class":264},[220,74398,2553],{"class":420},[220,74400,386],{"class":264},[220,74402,74403,74405,74407],{"class":222,"line":399},[220,74404,2567],{"class":264},[220,74406,74264],{"class":420},[220,74408,359],{"class":264},[220,74410,74411,74413,74415],{"class":222,"line":644},[220,74412,402],{"class":264},[220,74414,347],{"class":420},[220,74416,359],{"class":264},[212,74418,74419],{"className":468,"code":74286,"language":469,"meta":178,"style":178},[99,74420,74421,74429,74437,74445,74453],{"__ignoreMap":178},[220,74422,74423,74425,74427],{"class":222,"line":223},[220,74424,343],{"class":264},[220,74426,347],{"class":420},[220,74428,359],{"class":264},[220,74430,74431,74433,74435],{"class":222,"line":179},[220,74432,364],{"class":264},[220,74434,74264],{"class":420},[220,74436,359],{"class":264},[220,74438,74439,74441,74443],{"class":222,"line":389},[220,74440,2550],{"class":264},[220,74442,2553],{"class":420},[220,74444,386],{"class":264},[220,74446,74447,74449,74451],{"class":222,"line":399},[220,74448,2567],{"class":264},[220,74450,74264],{"class":420},[220,74452,359],{"class":264},[220,74454,74455,74457,74459],{"class":222,"line":644},[220,74456,402],{"class":264},[220,74458,347],{"class":420},[220,74460,359],{"class":264},[212,74462,74464],{"className":251,"code":74463,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Surface3D', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,74465,74466,74476,74480,74494,74498,74507,74515,74519,74523],{"__ignoreMap":178},[220,74467,74468,74470,74472,74474],{"class":222,"line":223},[220,74469,261],{"class":260},[220,74471,11512],{"class":264},[220,74473,268],{"class":260},[220,74475,4007],{"class":230},[220,74477,74478],{"class":222,"line":179},[220,74479,647],{"emptyLinePlaceholder":194},[220,74481,74482,74484,74486,74488,74490,74492],{"class":222,"line":389},[220,74483,1735],{"class":260},[220,74485,1738],{"class":420},[220,74487,1741],{"class":260},[220,74489,1744],{"class":260},[220,74491,1747],{"class":226},[220,74493,1750],{"class":264},[220,74495,74496],{"class":222,"line":399},[220,74497,1765],{"class":264},[220,74499,74500,74502,74505],{"class":222,"line":644},[220,74501,1770],{"class":264},[220,74503,74504],{"class":230},"'Surface3D'",[220,74506,7009],{"class":264},[220,74508,74509,74511,74513],{"class":222,"line":650},[220,74510,7014],{"class":264},[220,74512,3206],{"class":230},[220,74514,2465],{"class":264},[220,74516,74517],{"class":222,"line":656},[220,74518,7031],{"class":264},[220,74520,74521],{"class":222,"line":673},[220,74522,1787],{"class":264},[220,74524,74525],{"class":222,"line":682},[220,74526,1792],{"class":264},[1504,74528,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":74530},[74531,74532],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":74264,"description":74272},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":74539,"title":14003,"body":74540,"category":33063,"componentType":25877,"description":74547,"extension":191,"meta":74732,"navigation":194,"path":74733,"requiresChild":32530,"seo":74734,"stem":74735,"__hash__":74736},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":74541,"toc":74728},[74542,74545,74548,74550,74552,74555,74557,74726],[11,74543,14003],{"id":74544},"swirl",[15,74546,74547],{},"Flowing swirl pattern with multi-layered noise",[31911,74549],{"component":14003},[23,74551,31915],{"id":26533},[31917,74553],{":props":74554},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#1275d8\",\"description\":\"Primary gradient color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e19136\",\"description\":\"Secondary gradient color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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,74556,31923],{"id":31922},[246,74558,74559,74588,74616,74644,74672],{":tabs":1557},[212,74560,74562],{"className":334,"code":74561,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,74563,74564,74572,74580],{"__ignoreMap":178},[220,74565,74566,74568,74570],{"class":222,"line":223},[220,74567,343],{"class":264},[220,74569,347],{"class":346},[220,74571,359],{"class":264},[220,74573,74574,74576,74578],{"class":222,"line":179},[220,74575,364],{"class":264},[220,74577,14003],{"class":346},[220,74579,386],{"class":264},[220,74581,74582,74584,74586],{"class":222,"line":389},[220,74583,402],{"class":264},[220,74585,347],{"class":346},[220,74587,359],{"class":264},[212,74589,74590],{"className":409,"code":74561,"language":411,"meta":178,"style":178},[99,74591,74592,74600,74608],{"__ignoreMap":178},[220,74593,74594,74596,74598],{"class":222,"line":223},[220,74595,343],{"class":264},[220,74597,347],{"class":420},[220,74599,359],{"class":264},[220,74601,74602,74604,74606],{"class":222,"line":179},[220,74603,364],{"class":264},[220,74605,14003],{"class":420},[220,74607,386],{"class":264},[220,74609,74610,74612,74614],{"class":222,"line":389},[220,74611,402],{"class":264},[220,74613,347],{"class":420},[220,74615,359],{"class":264},[212,74617,74618],{"className":2844,"code":74561,"language":2846,"meta":178,"style":178},[99,74619,74620,74628,74636],{"__ignoreMap":178},[220,74621,74622,74624,74626],{"class":222,"line":223},[220,74623,343],{"class":264},[220,74625,347],{"class":420},[220,74627,359],{"class":264},[220,74629,74630,74632,74634],{"class":222,"line":179},[220,74631,364],{"class":264},[220,74633,14003],{"class":420},[220,74635,386],{"class":264},[220,74637,74638,74640,74642],{"class":222,"line":389},[220,74639,402],{"class":264},[220,74641,347],{"class":420},[220,74643,359],{"class":264},[212,74645,74646],{"className":468,"code":74561,"language":469,"meta":178,"style":178},[99,74647,74648,74656,74664],{"__ignoreMap":178},[220,74649,74650,74652,74654],{"class":222,"line":223},[220,74651,343],{"class":264},[220,74653,347],{"class":420},[220,74655,359],{"class":264},[220,74657,74658,74660,74662],{"class":222,"line":179},[220,74659,364],{"class":264},[220,74661,14003],{"class":420},[220,74663,386],{"class":264},[220,74665,74666,74668,74670],{"class":222,"line":389},[220,74667,402],{"class":264},[220,74669,347],{"class":420},[220,74671,359],{"class":264},[212,74673,74675],{"className":251,"code":74674,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Swirl', props: {} }\n ]\n})\n",[99,74676,74677,74687,74691,74705,74709,74718,74722],{"__ignoreMap":178},[220,74678,74679,74681,74683,74685],{"class":222,"line":223},[220,74680,261],{"class":260},[220,74682,11512],{"class":264},[220,74684,268],{"class":260},[220,74686,4007],{"class":230},[220,74688,74689],{"class":222,"line":179},[220,74690,647],{"emptyLinePlaceholder":194},[220,74692,74693,74695,74697,74699,74701,74703],{"class":222,"line":389},[220,74694,1735],{"class":260},[220,74696,1738],{"class":420},[220,74698,1741],{"class":260},[220,74700,1744],{"class":260},[220,74702,1747],{"class":226},[220,74704,1750],{"class":264},[220,74706,74707],{"class":222,"line":399},[220,74708,1765],{"class":264},[220,74710,74711,74713,74716],{"class":222,"line":644},[220,74712,1770],{"class":264},[220,74714,74715],{"class":230},"'Swirl'",[220,74717,2465],{"class":264},[220,74719,74720],{"class":222,"line":650},[220,74721,1787],{"class":264},[220,74723,74724],{"class":222,"line":656},[220,74725,1792],{"class":264},[1504,74727,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":74729},[74730,74731],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":14003,"description":74547},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":74738,"title":74739,"body":74740,"category":15908,"componentType":25877,"description":74747,"extension":191,"meta":75025,"navigation":194,"path":75026,"requiresChild":32530,"seo":75027,"stem":75028,"__hash__":75029},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":74741,"toc":75021},[74742,74745,74748,74750,74752,74755,74757,75019],[11,74743,74739],{"id":74744},"teardrop",[15,74746,74747],{},"Teardrop — a rounded bulb tapering to a sharp point",[31911,74749],{"component":74739},[23,74751,31915],{"id":26533},[31917,74753],{":props":74754},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the teardrop\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the teardrop\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.22\",\"description\":\"Radius of the rounded bulb\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Length from the bulb to the point\"},{\"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,74756,31923],{"id":31922},[246,74758,74759,74808,74859,74907,74957],{":tabs":1557},[212,74760,74762],{"className":334,"code":74761,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,74763,74764,74772,74779,74787,74796,74800],{"__ignoreMap":178},[220,74765,74766,74768,74770],{"class":222,"line":223},[220,74767,343],{"class":264},[220,74769,347],{"class":346},[220,74771,359],{"class":264},[220,74773,74774,74776],{"class":222,"line":179},[220,74775,364],{"class":264},[220,74777,74778],{"class":346},"Teardrop\n",[220,74780,74781,74783,74785],{"class":222,"line":389},[220,74782,9635],{"class":226},[220,74784,353],{"class":264},[220,74786,9591],{"class":230},[220,74788,74789,74791,74793],{"class":222,"line":399},[220,74790,17405],{"class":226},[220,74792,353],{"class":264},[220,74794,74795],{"class":230},"\"0.22\"\n",[220,74797,74798],{"class":222,"line":644},[220,74799,1234],{"class":264},[220,74801,74802,74804,74806],{"class":222,"line":650},[220,74803,402],{"class":264},[220,74805,347],{"class":346},[220,74807,359],{"class":264},[212,74809,74811],{"className":409,"code":74810,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,74812,74813,74821,74827,74835,74847,74851],{"__ignoreMap":178},[220,74814,74815,74817,74819],{"class":222,"line":223},[220,74816,343],{"class":264},[220,74818,347],{"class":420},[220,74820,359],{"class":264},[220,74822,74823,74825],{"class":222,"line":179},[220,74824,364],{"class":264},[220,74826,74778],{"class":420},[220,74828,74829,74831,74833],{"class":222,"line":389},[220,74830,9635],{"class":226},[220,74832,353],{"class":260},[220,74834,9591],{"class":230},[220,74836,74837,74839,74841,74843,74845],{"class":222,"line":399},[220,74838,9645],{"class":226},[220,74840,353],{"class":260},[220,74842,743],{"class":264},[220,74844,23949],{"class":420},[220,74846,749],{"class":264},[220,74848,74849],{"class":222,"line":644},[220,74850,1234],{"class":264},[220,74852,74853,74855,74857],{"class":222,"line":650},[220,74854,402],{"class":264},[220,74856,347],{"class":420},[220,74858,359],{"class":264},[212,74860,74861],{"className":2844,"code":74810,"language":2846,"meta":178,"style":178},[99,74862,74863,74871,74877,74885,74895,74899],{"__ignoreMap":178},[220,74864,74865,74867,74869],{"class":222,"line":223},[220,74866,343],{"class":264},[220,74868,347],{"class":420},[220,74870,359],{"class":264},[220,74872,74873,74875],{"class":222,"line":179},[220,74874,364],{"class":264},[220,74876,74778],{"class":420},[220,74878,74879,74881,74883],{"class":222,"line":389},[220,74880,9635],{"class":226},[220,74882,353],{"class":264},[220,74884,9591],{"class":230},[220,74886,74887,74889,74891,74893],{"class":222,"line":399},[220,74888,9645],{"class":226},[220,74890,29871],{"class":264},[220,74892,23949],{"class":420},[220,74894,749],{"class":264},[220,74896,74897],{"class":222,"line":644},[220,74898,1234],{"class":264},[220,74900,74901,74903,74905],{"class":222,"line":650},[220,74902,402],{"class":264},[220,74904,347],{"class":420},[220,74906,359],{"class":264},[212,74908,74909],{"className":468,"code":74810,"language":469,"meta":178,"style":178},[99,74910,74911,74919,74925,74933,74945,74949],{"__ignoreMap":178},[220,74912,74913,74915,74917],{"class":222,"line":223},[220,74914,343],{"class":264},[220,74916,347],{"class":420},[220,74918,359],{"class":264},[220,74920,74921,74923],{"class":222,"line":179},[220,74922,364],{"class":264},[220,74924,74778],{"class":420},[220,74926,74927,74929,74931],{"class":222,"line":389},[220,74928,9635],{"class":226},[220,74930,353],{"class":260},[220,74932,9591],{"class":230},[220,74934,74935,74937,74939,74941,74943],{"class":222,"line":399},[220,74936,9645],{"class":226},[220,74938,353],{"class":260},[220,74940,743],{"class":264},[220,74942,23949],{"class":420},[220,74944,749],{"class":264},[220,74946,74947],{"class":222,"line":644},[220,74948,1234],{"class":264},[220,74950,74951,74953,74955],{"class":222,"line":650},[220,74952,402],{"class":264},[220,74954,347],{"class":420},[220,74956,359],{"class":264},[212,74958,74960],{"className":251,"code":74959,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Teardrop', props: { color: '#ffffff', radius: 0.22 } }\n ]\n})\n",[99,74961,74962,74972,74976,74990,74994,75011,75015],{"__ignoreMap":178},[220,74963,74964,74966,74968,74970],{"class":222,"line":223},[220,74965,261],{"class":260},[220,74967,11512],{"class":264},[220,74969,268],{"class":260},[220,74971,4007],{"class":230},[220,74973,74974],{"class":222,"line":179},[220,74975,647],{"emptyLinePlaceholder":194},[220,74977,74978,74980,74982,74984,74986,74988],{"class":222,"line":389},[220,74979,1735],{"class":260},[220,74981,1738],{"class":420},[220,74983,1741],{"class":260},[220,74985,1744],{"class":260},[220,74987,1747],{"class":226},[220,74989,1750],{"class":264},[220,74991,74992],{"class":222,"line":399},[220,74993,1765],{"class":264},[220,74995,74996,74998,75001,75003,75005,75007,75009],{"class":222,"line":644},[220,74997,1770],{"class":264},[220,74999,75000],{"class":230},"'Teardrop'",[220,75002,1776],{"class":264},[220,75004,10169],{"class":230},[220,75006,6566],{"class":264},[220,75008,23949],{"class":420},[220,75010,1782],{"class":264},[220,75012,75013],{"class":222,"line":650},[220,75014,1787],{"class":264},[220,75016,75017],{"class":222,"line":656},[220,75018,1792],{"class":264},[1504,75020,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75022},[75023,75024],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":74739,"description":74747},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":75031,"title":75032,"body":75033,"category":33063,"componentType":25877,"description":75039,"extension":191,"meta":75269,"navigation":194,"path":75270,"requiresChild":32530,"seo":75271,"stem":75272,"__hash__":75273},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":75034,"toc":75265},[75035,75037,75040,75042,75044,75047,75049,75263],[11,75036,75032],{"id":15644},[15,75038,75039],{},"Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture",[31911,75041],{"component":75032},[23,75043,31915],{"id":26533},[31917,75045],{":props":75046},"[{\"name\":\"text\",\"type\":\"string\",\"default\":\"Hello World\",\"description\":\"The text to display (single line)\"},{\"name\":\"fontFamily\",\"type\":\"string\",\"default\":\"Inter\",\"description\":\"Google Fonts family name\"},{\"name\":\"fontWeight\",\"type\":\"number\",\"default\":\"400\",\"description\":\"Font weight (only weights published for the family render true; others are synthesized)\"},{\"name\":\"italic\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Italic style\"},{\"name\":\"textTransform\",\"type\":\"\\\"none\\\" | \\\"uppercase\\\" | \\\"lowercase\\\" | \\\"capitalize\\\"\",\"default\":\"none\",\"description\":\"Case transformation applied to the text\"},{\"name\":\"fontSize\",\"type\":\"number\",\"default\":\"0.07\",\"description\":\"Font size as a fraction of canvas height\"},{\"name\":\"letterSpacing\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Letter spacing in em units\"},{\"name\":\"lineHeight\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Line height as a multiple of font size (multi-line text)\"},{\"name\":\"textAlign\",\"type\":\"\\\"left\\\" | \\\"center\\\" | \\\"right\\\"\",\"default\":\"center\",\"description\":\"Horizontal alignment of lines within the text block\"},{\"name\":\"width\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto\u002FFixed width toggle and the side drag handles, not a slider.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Text color\"},{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the text\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"}]",[23,75048,31923],{"id":31922},[246,75050,75051,75091,75129,75167,75205],{":tabs":1557},[212,75052,75054],{"className":334,"code":75053,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75055,75056,75064,75071,75079,75083],{"__ignoreMap":178},[220,75057,75058,75060,75062],{"class":222,"line":223},[220,75059,343],{"class":264},[220,75061,347],{"class":346},[220,75063,359],{"class":264},[220,75065,75066,75068],{"class":222,"line":179},[220,75067,364],{"class":264},[220,75069,75070],{"class":346},"Text\n",[220,75072,75073,75075,75077],{"class":222,"line":389},[220,75074,9635],{"class":226},[220,75076,353],{"class":264},[220,75078,9591],{"class":230},[220,75080,75081],{"class":222,"line":399},[220,75082,1234],{"class":264},[220,75084,75085,75087,75089],{"class":222,"line":644},[220,75086,402],{"class":264},[220,75088,347],{"class":346},[220,75090,359],{"class":264},[212,75092,75093],{"className":409,"code":75053,"language":411,"meta":178,"style":178},[99,75094,75095,75103,75109,75117,75121],{"__ignoreMap":178},[220,75096,75097,75099,75101],{"class":222,"line":223},[220,75098,343],{"class":264},[220,75100,347],{"class":420},[220,75102,359],{"class":264},[220,75104,75105,75107],{"class":222,"line":179},[220,75106,364],{"class":264},[220,75108,75070],{"class":420},[220,75110,75111,75113,75115],{"class":222,"line":389},[220,75112,9635],{"class":226},[220,75114,353],{"class":260},[220,75116,9591],{"class":230},[220,75118,75119],{"class":222,"line":399},[220,75120,1234],{"class":264},[220,75122,75123,75125,75127],{"class":222,"line":644},[220,75124,402],{"class":264},[220,75126,347],{"class":420},[220,75128,359],{"class":264},[212,75130,75131],{"className":2844,"code":75053,"language":2846,"meta":178,"style":178},[99,75132,75133,75141,75147,75155,75159],{"__ignoreMap":178},[220,75134,75135,75137,75139],{"class":222,"line":223},[220,75136,343],{"class":264},[220,75138,347],{"class":420},[220,75140,359],{"class":264},[220,75142,75143,75145],{"class":222,"line":179},[220,75144,364],{"class":264},[220,75146,75070],{"class":420},[220,75148,75149,75151,75153],{"class":222,"line":389},[220,75150,9635],{"class":226},[220,75152,353],{"class":264},[220,75154,9591],{"class":230},[220,75156,75157],{"class":222,"line":399},[220,75158,1234],{"class":264},[220,75160,75161,75163,75165],{"class":222,"line":644},[220,75162,402],{"class":264},[220,75164,347],{"class":420},[220,75166,359],{"class":264},[212,75168,75169],{"className":468,"code":75053,"language":469,"meta":178,"style":178},[99,75170,75171,75179,75185,75193,75197],{"__ignoreMap":178},[220,75172,75173,75175,75177],{"class":222,"line":223},[220,75174,343],{"class":264},[220,75176,347],{"class":420},[220,75178,359],{"class":264},[220,75180,75181,75183],{"class":222,"line":179},[220,75182,364],{"class":264},[220,75184,75070],{"class":420},[220,75186,75187,75189,75191],{"class":222,"line":389},[220,75188,9635],{"class":226},[220,75190,353],{"class":260},[220,75192,9591],{"class":230},[220,75194,75195],{"class":222,"line":399},[220,75196,1234],{"class":264},[220,75198,75199,75201,75203],{"class":222,"line":644},[220,75200,402],{"class":264},[220,75202,347],{"class":420},[220,75204,359],{"class":264},[212,75206,75208],{"className":251,"code":75207,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Text', props: { color: '#ffffff' } }\n ]\n})\n",[99,75209,75210,75220,75224,75238,75242,75255,75259],{"__ignoreMap":178},[220,75211,75212,75214,75216,75218],{"class":222,"line":223},[220,75213,261],{"class":260},[220,75215,11512],{"class":264},[220,75217,268],{"class":260},[220,75219,4007],{"class":230},[220,75221,75222],{"class":222,"line":179},[220,75223,647],{"emptyLinePlaceholder":194},[220,75225,75226,75228,75230,75232,75234,75236],{"class":222,"line":389},[220,75227,1735],{"class":260},[220,75229,1738],{"class":420},[220,75231,1741],{"class":260},[220,75233,1744],{"class":260},[220,75235,1747],{"class":226},[220,75237,1750],{"class":264},[220,75239,75240],{"class":222,"line":399},[220,75241,1765],{"class":264},[220,75243,75244,75246,75249,75251,75253],{"class":222,"line":644},[220,75245,1770],{"class":264},[220,75247,75248],{"class":230},"'Text'",[220,75250,1776],{"class":264},[220,75252,10169],{"class":230},[220,75254,1782],{"class":264},[220,75256,75257],{"class":222,"line":650},[220,75258,1787],{"class":264},[220,75260,75261],{"class":222,"line":656},[220,75262,1792],{"class":264},[1504,75264,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75266},[75267,75268],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":75032,"description":75039},"docs\u002Fcomponents\u002FText","V5GqEdlu-00Hi0ZR7eKOTsShbIRkhUQooFlrXUwGSSs",{"id":75275,"title":23169,"body":75276,"category":36569,"componentType":25877,"description":75283,"extension":191,"meta":75524,"navigation":194,"path":75525,"requiresChild":32530,"seo":75526,"stem":75527,"__hash__":75528},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":75277,"toc":75520},[75278,75281,75284,75286,75288,75291,75293,75518],[11,75279,23169],{"id":75280},"thinfilm",[15,75282,75283],{},"Iridescent thin-film edge",[31911,75285],{"component":23169},[23,75287,31915],{"id":26533},[31917,75289],{":props":75290},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the shape in degrees\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Rim brightness — values above 1 push the edge past white for HDR bloom\"},{\"name\":\"rimWidth\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How far inward from the edge the iridescence reaches\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Softness of the shape boundary\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Film thickness — higher values pack more spectral bands across the rim\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How strongly colour separates around the perimeter (warm vs cool sides)\"},{\"name\":\"saturation\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Spectral saturation — 0 = white rim, 1 = full iridescence\"},{\"name\":\"hueShift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotate the spectrum to reposition the colours\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"300\",\"description\":\"Light angle in degrees — sets which side of the rim runs warm vs cool\"},{\"name\":\"mode\",\"type\":\"\\\"rainbow\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"Rainbow uses the full iridescent spectrum; Custom cycles through your three chosen colours\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#2b6fff\",\"description\":\"First colour in the rim cycle\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second colour in the rim cycle\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#ff7a21\",\"description\":\"Third colour in the rim cycle\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Colour space used to blend between custom colours\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Speed at which the colours rotate around the rim (0 = static)\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,75292,31923],{"id":31922},[246,75294,75295,75335,75378,75418,75460],{":tabs":1557},[212,75296,75298],{"className":334,"code":75297,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,75299,75300,75308,75315,75323,75327],{"__ignoreMap":178},[220,75301,75302,75304,75306],{"class":222,"line":223},[220,75303,343],{"class":264},[220,75305,347],{"class":346},[220,75307,359],{"class":264},[220,75309,75310,75312],{"class":222,"line":179},[220,75311,364],{"class":264},[220,75313,75314],{"class":346},"ThinFilm\n",[220,75316,75317,75319,75321],{"class":222,"line":389},[220,75318,20371],{"class":226},[220,75320,353],{"class":264},[220,75322,36625],{"class":230},[220,75324,75325],{"class":222,"line":399},[220,75326,1234],{"class":264},[220,75328,75329,75331,75333],{"class":222,"line":644},[220,75330,402],{"class":264},[220,75332,347],{"class":346},[220,75334,359],{"class":264},[212,75336,75338],{"className":409,"code":75337,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,75339,75340,75348,75354,75366,75370],{"__ignoreMap":178},[220,75341,75342,75344,75346],{"class":222,"line":223},[220,75343,343],{"class":264},[220,75345,347],{"class":420},[220,75347,359],{"class":264},[220,75349,75350,75352],{"class":222,"line":179},[220,75351,364],{"class":264},[220,75353,75314],{"class":420},[220,75355,75356,75358,75360,75362,75364],{"class":222,"line":389},[220,75357,20482],{"class":226},[220,75359,353],{"class":260},[220,75361,743],{"class":264},[220,75363,8677],{"class":420},[220,75365,749],{"class":264},[220,75367,75368],{"class":222,"line":399},[220,75369,1234],{"class":264},[220,75371,75372,75374,75376],{"class":222,"line":644},[220,75373,402],{"class":264},[220,75375,347],{"class":420},[220,75377,359],{"class":264},[212,75379,75380],{"className":2844,"code":75337,"language":2846,"meta":178,"style":178},[99,75381,75382,75390,75396,75406,75410],{"__ignoreMap":178},[220,75383,75384,75386,75388],{"class":222,"line":223},[220,75385,343],{"class":264},[220,75387,347],{"class":420},[220,75389,359],{"class":264},[220,75391,75392,75394],{"class":222,"line":179},[220,75393,364],{"class":264},[220,75395,75314],{"class":420},[220,75397,75398,75400,75402,75404],{"class":222,"line":389},[220,75399,20482],{"class":226},[220,75401,29871],{"class":264},[220,75403,8677],{"class":420},[220,75405,749],{"class":264},[220,75407,75408],{"class":222,"line":399},[220,75409,1234],{"class":264},[220,75411,75412,75414,75416],{"class":222,"line":644},[220,75413,402],{"class":264},[220,75415,347],{"class":420},[220,75417,359],{"class":264},[212,75419,75420],{"className":468,"code":75337,"language":469,"meta":178,"style":178},[99,75421,75422,75430,75436,75448,75452],{"__ignoreMap":178},[220,75423,75424,75426,75428],{"class":222,"line":223},[220,75425,343],{"class":264},[220,75427,347],{"class":420},[220,75429,359],{"class":264},[220,75431,75432,75434],{"class":222,"line":179},[220,75433,364],{"class":264},[220,75435,75314],{"class":420},[220,75437,75438,75440,75442,75444,75446],{"class":222,"line":389},[220,75439,20482],{"class":226},[220,75441,353],{"class":260},[220,75443,743],{"class":264},[220,75445,8677],{"class":420},[220,75447,749],{"class":264},[220,75449,75450],{"class":222,"line":399},[220,75451,1234],{"class":264},[220,75453,75454,75456,75458],{"class":222,"line":644},[220,75455,402],{"class":264},[220,75457,347],{"class":420},[220,75459,359],{"class":264},[212,75461,75463],{"className":251,"code":75462,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ThinFilm', props: { intensity: 1 } }\n ]\n})\n",[99,75464,75465,75475,75479,75493,75497,75510,75514],{"__ignoreMap":178},[220,75466,75467,75469,75471,75473],{"class":222,"line":223},[220,75468,261],{"class":260},[220,75470,11512],{"class":264},[220,75472,268],{"class":260},[220,75474,4007],{"class":230},[220,75476,75477],{"class":222,"line":179},[220,75478,647],{"emptyLinePlaceholder":194},[220,75480,75481,75483,75485,75487,75489,75491],{"class":222,"line":389},[220,75482,1735],{"class":260},[220,75484,1738],{"class":420},[220,75486,1741],{"class":260},[220,75488,1744],{"class":260},[220,75490,1747],{"class":226},[220,75492,1750],{"class":264},[220,75494,75495],{"class":222,"line":399},[220,75496,1765],{"class":264},[220,75498,75499,75501,75504,75506,75508],{"class":222,"line":644},[220,75500,1770],{"class":264},[220,75502,75503],{"class":230},"'ThinFilm'",[220,75505,32203],{"class":264},[220,75507,8677],{"class":420},[220,75509,1782],{"class":264},[220,75511,75512],{"class":222,"line":650},[220,75513,1787],{"class":264},[220,75515,75516],{"class":222,"line":656},[220,75517,1792],{"class":264},[1504,75519,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75521},[75522,75523],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":23169,"description":75283},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":75530,"title":75531,"body":75532,"category":32234,"componentType":25883,"description":75539,"extension":191,"meta":75856,"navigation":194,"path":75857,"requiresChild":194,"seo":75858,"stem":75859,"__hash__":75860},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":75533,"toc":75852},[75534,75537,75540,75542,75544,75547,75549,75850],[11,75535,75531],{"id":75536},"tiltshift",[15,75538,75539],{},"Selective focus blur mimicking tilt-shift photography",[31911,75541],{"component":75531},[23,75543,31915],{"id":26533},[31917,75545],{":props":75546},"[{\"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,75548,31923],{"id":31922},[246,75550,75551,75607,75666,75722,75780],{":tabs":1557},[212,75552,75554],{"className":334,"code":75553,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75555,75556,75564,75571,75579,75583,75591,75599],{"__ignoreMap":178},[220,75557,75558,75560,75562],{"class":222,"line":223},[220,75559,343],{"class":264},[220,75561,347],{"class":346},[220,75563,359],{"class":264},[220,75565,75566,75568],{"class":222,"line":179},[220,75567,364],{"class":264},[220,75569,75570],{"class":346},"TiltShift\n",[220,75572,75573,75575,75577],{"class":222,"line":389},[220,75574,20371],{"class":226},[220,75576,353],{"class":264},[220,75578,35080],{"class":230},[220,75580,75581],{"class":222,"line":399},[220,75582,31959],{"class":264},[220,75584,75585,75587,75589],{"class":222,"line":644},[220,75586,2550],{"class":264},[220,75588,2553],{"class":346},[220,75590,386],{"class":264},[220,75592,75593,75595,75597],{"class":222,"line":650},[220,75594,2567],{"class":264},[220,75596,75531],{"class":346},[220,75598,359],{"class":264},[220,75600,75601,75603,75605],{"class":222,"line":656},[220,75602,402],{"class":264},[220,75604,347],{"class":346},[220,75606,359],{"class":264},[212,75608,75610],{"className":409,"code":75609,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75611,75612,75620,75626,75638,75642,75650,75658],{"__ignoreMap":178},[220,75613,75614,75616,75618],{"class":222,"line":223},[220,75615,343],{"class":264},[220,75617,347],{"class":420},[220,75619,359],{"class":264},[220,75621,75622,75624],{"class":222,"line":179},[220,75623,364],{"class":264},[220,75625,75570],{"class":420},[220,75627,75628,75630,75632,75634,75636],{"class":222,"line":389},[220,75629,20482],{"class":226},[220,75631,353],{"class":260},[220,75633,743],{"class":264},[220,75635,35138],{"class":420},[220,75637,749],{"class":264},[220,75639,75640],{"class":222,"line":399},[220,75641,31959],{"class":264},[220,75643,75644,75646,75648],{"class":222,"line":644},[220,75645,2550],{"class":264},[220,75647,2553],{"class":420},[220,75649,386],{"class":264},[220,75651,75652,75654,75656],{"class":222,"line":650},[220,75653,2567],{"class":264},[220,75655,75531],{"class":420},[220,75657,359],{"class":264},[220,75659,75660,75662,75664],{"class":222,"line":656},[220,75661,402],{"class":264},[220,75663,347],{"class":420},[220,75665,359],{"class":264},[212,75667,75668],{"className":2844,"code":75609,"language":2846,"meta":178,"style":178},[99,75669,75670,75678,75684,75694,75698,75706,75714],{"__ignoreMap":178},[220,75671,75672,75674,75676],{"class":222,"line":223},[220,75673,343],{"class":264},[220,75675,347],{"class":420},[220,75677,359],{"class":264},[220,75679,75680,75682],{"class":222,"line":179},[220,75681,364],{"class":264},[220,75683,75570],{"class":420},[220,75685,75686,75688,75690,75692],{"class":222,"line":389},[220,75687,20482],{"class":226},[220,75689,29871],{"class":264},[220,75691,35138],{"class":420},[220,75693,749],{"class":264},[220,75695,75696],{"class":222,"line":399},[220,75697,31959],{"class":264},[220,75699,75700,75702,75704],{"class":222,"line":644},[220,75701,2550],{"class":264},[220,75703,2553],{"class":420},[220,75705,386],{"class":264},[220,75707,75708,75710,75712],{"class":222,"line":650},[220,75709,2567],{"class":264},[220,75711,75531],{"class":420},[220,75713,359],{"class":264},[220,75715,75716,75718,75720],{"class":222,"line":656},[220,75717,402],{"class":264},[220,75719,347],{"class":420},[220,75721,359],{"class":264},[212,75723,75724],{"className":468,"code":75609,"language":469,"meta":178,"style":178},[99,75725,75726,75734,75740,75752,75756,75764,75772],{"__ignoreMap":178},[220,75727,75728,75730,75732],{"class":222,"line":223},[220,75729,343],{"class":264},[220,75731,347],{"class":420},[220,75733,359],{"class":264},[220,75735,75736,75738],{"class":222,"line":179},[220,75737,364],{"class":264},[220,75739,75570],{"class":420},[220,75741,75742,75744,75746,75748,75750],{"class":222,"line":389},[220,75743,20482],{"class":226},[220,75745,353],{"class":260},[220,75747,743],{"class":264},[220,75749,35138],{"class":420},[220,75751,749],{"class":264},[220,75753,75754],{"class":222,"line":399},[220,75755,31959],{"class":264},[220,75757,75758,75760,75762],{"class":222,"line":644},[220,75759,2550],{"class":264},[220,75761,2553],{"class":420},[220,75763,386],{"class":264},[220,75765,75766,75768,75770],{"class":222,"line":650},[220,75767,2567],{"class":264},[220,75769,75531],{"class":420},[220,75771,359],{"class":264},[220,75773,75774,75776,75778],{"class":222,"line":656},[220,75775,402],{"class":264},[220,75777,347],{"class":420},[220,75779,359],{"class":264},[212,75781,75783],{"className":251,"code":75782,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'TiltShift', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,75784,75785,75795,75799,75813,75817,75830,75838,75842,75846],{"__ignoreMap":178},[220,75786,75787,75789,75791,75793],{"class":222,"line":223},[220,75788,261],{"class":260},[220,75790,11512],{"class":264},[220,75792,268],{"class":260},[220,75794,4007],{"class":230},[220,75796,75797],{"class":222,"line":179},[220,75798,647],{"emptyLinePlaceholder":194},[220,75800,75801,75803,75805,75807,75809,75811],{"class":222,"line":389},[220,75802,1735],{"class":260},[220,75804,1738],{"class":420},[220,75806,1741],{"class":260},[220,75808,1744],{"class":260},[220,75810,1747],{"class":226},[220,75812,1750],{"class":264},[220,75814,75815],{"class":222,"line":399},[220,75816,1765],{"class":264},[220,75818,75819,75821,75824,75826,75828],{"class":222,"line":644},[220,75820,1770],{"class":264},[220,75822,75823],{"class":230},"'TiltShift'",[220,75825,32203],{"class":264},[220,75827,35138],{"class":420},[220,75829,7546],{"class":264},[220,75831,75832,75834,75836],{"class":222,"line":650},[220,75833,7014],{"class":264},[220,75835,3206],{"class":230},[220,75837,2465],{"class":264},[220,75839,75840],{"class":222,"line":656},[220,75841,7031],{"class":264},[220,75843,75844],{"class":222,"line":673},[220,75845,1787],{"class":264},[220,75847,75848],{"class":222,"line":682},[220,75849,1792],{"class":264},[1504,75851,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75853},[75854,75855],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":75531,"description":75539},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":75862,"title":75863,"body":75864,"category":32806,"componentType":25883,"description":75871,"extension":191,"meta":76132,"navigation":194,"path":76133,"requiresChild":194,"seo":76134,"stem":76135,"__hash__":76136},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":75865,"toc":76128},[75866,75869,75872,75874,75876,75879,75881,76126],[11,75867,75863],{"id":75868},"timetrail",[15,75870,75871],{},"An Echo-style temporal trail — whatever moves sheds a smooth, decaying long-exposure ghost trail (frame-difference Motion mode works on opaque images and video; Alpha mode trails a shape's coverage), with optional zoom-feedback tunnels and rainbow light-painting",[31911,75873],{"component":75863},[23,75875,31915],{"id":26533},[31917,75877],{":props":75878},"[{\"name\":\"trailSource\",\"type\":\"\\\"motion\\\" | \\\"alpha\\\"\",\"default\":\"motion\",\"description\":\"What sheds the trail — Motion trails whatever changes frame-to-frame (works on opaque images and video), Alpha trails the child's transparency coverage (best for a clean shape over empty canvas)\"},{\"name\":\"motionThreshold\",\"type\":\"number\",\"default\":\"0.06\",\"description\":\"How much a pixel must change between frames to shed a trail (Motion source only) — lower catches subtle movement, higher only fast motion\"},{\"name\":\"trailLength\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the trail lingers, in seconds — the time constant of the fade (the star control)\"},{\"name\":\"diffusion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much the trail smears and softens as it fades — 0 keeps crisp ghost frames, higher melts them together\"},{\"name\":\"trailOpacity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Overall strength of the trail behind the live frame\"},{\"name\":\"trailBlend\",\"type\":\"\\\"normal\\\" | \\\"add\\\" | \\\"screen\\\" | \\\"multiply\\\" | \\\"overlay\\\" | \\\"softLight\\\" | \\\"hardLight\\\" | \\\"darken\\\" | \\\"lighten\\\" | \\\"colorDodge\\\" | \\\"colorBurn\\\" | \\\"linearBurn\\\" | \\\"difference\\\" | \\\"exclusion\\\" | \\\"hue\\\" | \\\"saturation\\\" | \\\"color\\\" | \\\"luminosity\\\"\",\"default\":\"normal\",\"description\":\"How the trail combines with the frame — Add \u002F Screen build glowing light-painting trails, Multiply lays down dark ink ghosts, plus the full standard blend set\"},{\"name\":\"driftX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Sideways drift of the trail per second — smears the trail in a direction\"},{\"name\":\"driftY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vertical drift of the trail per second\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Per-frame zoom of the trail around the centre — above 1 pulls the trail into an outward tunnel, below 1 sucks it inward\"},{\"name\":\"tintMode\",\"type\":\"\\\"none\\\" | \\\"color\\\" | \\\"rainbow\\\"\",\"default\":\"none\",\"description\":\"Colour the trail — Color tints it a single hue, Rainbow cycles hue as the trail ages\"},{\"name\":\"tint\",\"type\":\"string\",\"default\":\"#33aaff\",\"description\":\"Trail tint colour (used in Color mode)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Simulation speed. 0 freezes the trail in place.\"}]",[23,75880,31923],{"id":31922},[246,75882,75883,75928,75972,76016,76060],{":tabs":1557},[212,75884,75886],{"className":334,"code":75885,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,75887,75888,75896,75904,75912,75920],{"__ignoreMap":178},[220,75889,75890,75892,75894],{"class":222,"line":223},[220,75891,343],{"class":264},[220,75893,347],{"class":346},[220,75895,359],{"class":264},[220,75897,75898,75900,75902],{"class":222,"line":179},[220,75899,364],{"class":264},[220,75901,75863],{"class":346},[220,75903,359],{"class":264},[220,75905,75906,75908,75910],{"class":222,"line":389},[220,75907,2550],{"class":264},[220,75909,2553],{"class":346},[220,75911,386],{"class":264},[220,75913,75914,75916,75918],{"class":222,"line":399},[220,75915,2567],{"class":264},[220,75917,75863],{"class":346},[220,75919,359],{"class":264},[220,75921,75922,75924,75926],{"class":222,"line":644},[220,75923,402],{"class":264},[220,75925,347],{"class":346},[220,75927,359],{"class":264},[212,75929,75930],{"className":409,"code":75885,"language":411,"meta":178,"style":178},[99,75931,75932,75940,75948,75956,75964],{"__ignoreMap":178},[220,75933,75934,75936,75938],{"class":222,"line":223},[220,75935,343],{"class":264},[220,75937,347],{"class":420},[220,75939,359],{"class":264},[220,75941,75942,75944,75946],{"class":222,"line":179},[220,75943,364],{"class":264},[220,75945,75863],{"class":420},[220,75947,359],{"class":264},[220,75949,75950,75952,75954],{"class":222,"line":389},[220,75951,2550],{"class":264},[220,75953,2553],{"class":420},[220,75955,386],{"class":264},[220,75957,75958,75960,75962],{"class":222,"line":399},[220,75959,2567],{"class":264},[220,75961,75863],{"class":420},[220,75963,359],{"class":264},[220,75965,75966,75968,75970],{"class":222,"line":644},[220,75967,402],{"class":264},[220,75969,347],{"class":420},[220,75971,359],{"class":264},[212,75973,75974],{"className":2844,"code":75885,"language":2846,"meta":178,"style":178},[99,75975,75976,75984,75992,76000,76008],{"__ignoreMap":178},[220,75977,75978,75980,75982],{"class":222,"line":223},[220,75979,343],{"class":264},[220,75981,347],{"class":420},[220,75983,359],{"class":264},[220,75985,75986,75988,75990],{"class":222,"line":179},[220,75987,364],{"class":264},[220,75989,75863],{"class":420},[220,75991,359],{"class":264},[220,75993,75994,75996,75998],{"class":222,"line":389},[220,75995,2550],{"class":264},[220,75997,2553],{"class":420},[220,75999,386],{"class":264},[220,76001,76002,76004,76006],{"class":222,"line":399},[220,76003,2567],{"class":264},[220,76005,75863],{"class":420},[220,76007,359],{"class":264},[220,76009,76010,76012,76014],{"class":222,"line":644},[220,76011,402],{"class":264},[220,76013,347],{"class":420},[220,76015,359],{"class":264},[212,76017,76018],{"className":468,"code":75885,"language":469,"meta":178,"style":178},[99,76019,76020,76028,76036,76044,76052],{"__ignoreMap":178},[220,76021,76022,76024,76026],{"class":222,"line":223},[220,76023,343],{"class":264},[220,76025,347],{"class":420},[220,76027,359],{"class":264},[220,76029,76030,76032,76034],{"class":222,"line":179},[220,76031,364],{"class":264},[220,76033,75863],{"class":420},[220,76035,359],{"class":264},[220,76037,76038,76040,76042],{"class":222,"line":389},[220,76039,2550],{"class":264},[220,76041,2553],{"class":420},[220,76043,386],{"class":264},[220,76045,76046,76048,76050],{"class":222,"line":399},[220,76047,2567],{"class":264},[220,76049,75863],{"class":420},[220,76051,359],{"class":264},[220,76053,76054,76056,76058],{"class":222,"line":644},[220,76055,402],{"class":264},[220,76057,347],{"class":420},[220,76059,359],{"class":264},[212,76061,76063],{"className":251,"code":76062,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'TimeTrail', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,76064,76065,76075,76079,76093,76097,76106,76114,76118,76122],{"__ignoreMap":178},[220,76066,76067,76069,76071,76073],{"class":222,"line":223},[220,76068,261],{"class":260},[220,76070,11512],{"class":264},[220,76072,268],{"class":260},[220,76074,4007],{"class":230},[220,76076,76077],{"class":222,"line":179},[220,76078,647],{"emptyLinePlaceholder":194},[220,76080,76081,76083,76085,76087,76089,76091],{"class":222,"line":389},[220,76082,1735],{"class":260},[220,76084,1738],{"class":420},[220,76086,1741],{"class":260},[220,76088,1744],{"class":260},[220,76090,1747],{"class":226},[220,76092,1750],{"class":264},[220,76094,76095],{"class":222,"line":399},[220,76096,1765],{"class":264},[220,76098,76099,76101,76104],{"class":222,"line":644},[220,76100,1770],{"class":264},[220,76102,76103],{"class":230},"'TimeTrail'",[220,76105,7009],{"class":264},[220,76107,76108,76110,76112],{"class":222,"line":650},[220,76109,7014],{"class":264},[220,76111,3206],{"class":230},[220,76113,2465],{"class":264},[220,76115,76116],{"class":222,"line":656},[220,76117,7031],{"class":264},[220,76119,76120],{"class":222,"line":673},[220,76121,1787],{"class":264},[220,76123,76124],{"class":222,"line":682},[220,76125,1792],{"class":264},[1504,76127,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":76129},[76130,76131],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":75863,"description":75871},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":76138,"title":76139,"body":76140,"category":36368,"componentType":25883,"description":76147,"extension":191,"meta":76455,"navigation":194,"path":76456,"requiresChild":194,"seo":76457,"stem":76458,"__hash__":76459},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":76141,"toc":76451},[76142,76145,76148,76150,76152,76155,76157,76449],[11,76143,76139],{"id":76144},"tint",[15,76146,76147],{},"Apply a color tint to the image",[31911,76149],{"component":76139},[23,76151,31915],{"id":26533},[31917,76153],{":props":76154},"[{\"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,76156,31923],{"id":31922},[246,76158,76159,76216,76270,76324,76378],{":tabs":1557},[212,76160,76162],{"className":334,"code":76161,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,76163,76164,76172,76179,76188,76192,76200,76208],{"__ignoreMap":178},[220,76165,76166,76168,76170],{"class":222,"line":223},[220,76167,343],{"class":264},[220,76169,347],{"class":346},[220,76171,359],{"class":264},[220,76173,76174,76176],{"class":222,"line":179},[220,76175,364],{"class":264},[220,76177,76178],{"class":346},"Tint\n",[220,76180,76181,76183,76185],{"class":222,"line":389},[220,76182,9635],{"class":226},[220,76184,353],{"class":264},[220,76186,76187],{"class":230},"\"#ff8800\"\n",[220,76189,76190],{"class":222,"line":399},[220,76191,31959],{"class":264},[220,76193,76194,76196,76198],{"class":222,"line":644},[220,76195,2550],{"class":264},[220,76197,2553],{"class":346},[220,76199,386],{"class":264},[220,76201,76202,76204,76206],{"class":222,"line":650},[220,76203,2567],{"class":264},[220,76205,76139],{"class":346},[220,76207,359],{"class":264},[220,76209,76210,76212,76214],{"class":222,"line":656},[220,76211,402],{"class":264},[220,76213,347],{"class":346},[220,76215,359],{"class":264},[212,76217,76218],{"className":409,"code":76161,"language":411,"meta":178,"style":178},[99,76219,76220,76228,76234,76242,76246,76254,76262],{"__ignoreMap":178},[220,76221,76222,76224,76226],{"class":222,"line":223},[220,76223,343],{"class":264},[220,76225,347],{"class":420},[220,76227,359],{"class":264},[220,76229,76230,76232],{"class":222,"line":179},[220,76231,364],{"class":264},[220,76233,76178],{"class":420},[220,76235,76236,76238,76240],{"class":222,"line":389},[220,76237,9635],{"class":226},[220,76239,353],{"class":260},[220,76241,76187],{"class":230},[220,76243,76244],{"class":222,"line":399},[220,76245,31959],{"class":264},[220,76247,76248,76250,76252],{"class":222,"line":644},[220,76249,2550],{"class":264},[220,76251,2553],{"class":420},[220,76253,386],{"class":264},[220,76255,76256,76258,76260],{"class":222,"line":650},[220,76257,2567],{"class":264},[220,76259,76139],{"class":420},[220,76261,359],{"class":264},[220,76263,76264,76266,76268],{"class":222,"line":656},[220,76265,402],{"class":264},[220,76267,347],{"class":420},[220,76269,359],{"class":264},[212,76271,76272],{"className":2844,"code":76161,"language":2846,"meta":178,"style":178},[99,76273,76274,76282,76288,76296,76300,76308,76316],{"__ignoreMap":178},[220,76275,76276,76278,76280],{"class":222,"line":223},[220,76277,343],{"class":264},[220,76279,347],{"class":420},[220,76281,359],{"class":264},[220,76283,76284,76286],{"class":222,"line":179},[220,76285,364],{"class":264},[220,76287,76178],{"class":420},[220,76289,76290,76292,76294],{"class":222,"line":389},[220,76291,9635],{"class":226},[220,76293,353],{"class":264},[220,76295,76187],{"class":230},[220,76297,76298],{"class":222,"line":399},[220,76299,31959],{"class":264},[220,76301,76302,76304,76306],{"class":222,"line":644},[220,76303,2550],{"class":264},[220,76305,2553],{"class":420},[220,76307,386],{"class":264},[220,76309,76310,76312,76314],{"class":222,"line":650},[220,76311,2567],{"class":264},[220,76313,76139],{"class":420},[220,76315,359],{"class":264},[220,76317,76318,76320,76322],{"class":222,"line":656},[220,76319,402],{"class":264},[220,76321,347],{"class":420},[220,76323,359],{"class":264},[212,76325,76326],{"className":468,"code":76161,"language":469,"meta":178,"style":178},[99,76327,76328,76336,76342,76350,76354,76362,76370],{"__ignoreMap":178},[220,76329,76330,76332,76334],{"class":222,"line":223},[220,76331,343],{"class":264},[220,76333,347],{"class":420},[220,76335,359],{"class":264},[220,76337,76338,76340],{"class":222,"line":179},[220,76339,364],{"class":264},[220,76341,76178],{"class":420},[220,76343,76344,76346,76348],{"class":222,"line":389},[220,76345,9635],{"class":226},[220,76347,353],{"class":260},[220,76349,76187],{"class":230},[220,76351,76352],{"class":222,"line":399},[220,76353,31959],{"class":264},[220,76355,76356,76358,76360],{"class":222,"line":644},[220,76357,2550],{"class":264},[220,76359,2553],{"class":420},[220,76361,386],{"class":264},[220,76363,76364,76366,76368],{"class":222,"line":650},[220,76365,2567],{"class":264},[220,76367,76139],{"class":420},[220,76369,359],{"class":264},[220,76371,76372,76374,76376],{"class":222,"line":656},[220,76373,402],{"class":264},[220,76375,347],{"class":420},[220,76377,359],{"class":264},[212,76379,76381],{"className":251,"code":76380,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Tint', props: { color: '#ff8800' }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,76382,76383,76393,76397,76411,76415,76429,76437,76441,76445],{"__ignoreMap":178},[220,76384,76385,76387,76389,76391],{"class":222,"line":223},[220,76386,261],{"class":260},[220,76388,11512],{"class":264},[220,76390,268],{"class":260},[220,76392,4007],{"class":230},[220,76394,76395],{"class":222,"line":179},[220,76396,647],{"emptyLinePlaceholder":194},[220,76398,76399,76401,76403,76405,76407,76409],{"class":222,"line":389},[220,76400,1735],{"class":260},[220,76402,1738],{"class":420},[220,76404,1741],{"class":260},[220,76406,1744],{"class":260},[220,76408,1747],{"class":226},[220,76410,1750],{"class":264},[220,76412,76413],{"class":222,"line":399},[220,76414,1765],{"class":264},[220,76416,76417,76419,76422,76424,76427],{"class":222,"line":644},[220,76418,1770],{"class":264},[220,76420,76421],{"class":230},"'Tint'",[220,76423,1776],{"class":264},[220,76425,76426],{"class":230},"'#ff8800'",[220,76428,7546],{"class":264},[220,76430,76431,76433,76435],{"class":222,"line":650},[220,76432,7014],{"class":264},[220,76434,3206],{"class":230},[220,76436,2465],{"class":264},[220,76438,76439],{"class":222,"line":656},[220,76440,7031],{"class":264},[220,76442,76443],{"class":222,"line":673},[220,76444,1787],{"class":264},[220,76446,76447],{"class":222,"line":682},[220,76448,1792],{"class":264},[1504,76450,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76452},[76453,76454],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":76139,"description":76147},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":76461,"title":76462,"body":76463,"category":15908,"componentType":25877,"description":76470,"extension":191,"meta":76700,"navigation":194,"path":76701,"requiresChild":32530,"seo":76702,"stem":76703,"__hash__":76704},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":76464,"toc":76696},[76465,76468,76471,76473,76475,76478,76480,76694],[11,76466,76462],{"id":76467},"trapezoid",[15,76469,76470],{},"Trapezoid with adjustable top and bottom widths and height",[31911,76472],{"component":76462},[23,76474,31915],{"id":26533},[31917,76476],{":props":76477},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,76479,31923],{"id":31922},[246,76481,76482,76522,76560,76598,76636],{":tabs":1557},[212,76483,76485],{"className":334,"code":76484,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,76486,76487,76495,76502,76510,76514],{"__ignoreMap":178},[220,76488,76489,76491,76493],{"class":222,"line":223},[220,76490,343],{"class":264},[220,76492,347],{"class":346},[220,76494,359],{"class":264},[220,76496,76497,76499],{"class":222,"line":179},[220,76498,364],{"class":264},[220,76500,76501],{"class":346},"Trapezoid\n",[220,76503,76504,76506,76508],{"class":222,"line":389},[220,76505,9635],{"class":226},[220,76507,353],{"class":264},[220,76509,9591],{"class":230},[220,76511,76512],{"class":222,"line":399},[220,76513,1234],{"class":264},[220,76515,76516,76518,76520],{"class":222,"line":644},[220,76517,402],{"class":264},[220,76519,347],{"class":346},[220,76521,359],{"class":264},[212,76523,76524],{"className":409,"code":76484,"language":411,"meta":178,"style":178},[99,76525,76526,76534,76540,76548,76552],{"__ignoreMap":178},[220,76527,76528,76530,76532],{"class":222,"line":223},[220,76529,343],{"class":264},[220,76531,347],{"class":420},[220,76533,359],{"class":264},[220,76535,76536,76538],{"class":222,"line":179},[220,76537,364],{"class":264},[220,76539,76501],{"class":420},[220,76541,76542,76544,76546],{"class":222,"line":389},[220,76543,9635],{"class":226},[220,76545,353],{"class":260},[220,76547,9591],{"class":230},[220,76549,76550],{"class":222,"line":399},[220,76551,1234],{"class":264},[220,76553,76554,76556,76558],{"class":222,"line":644},[220,76555,402],{"class":264},[220,76557,347],{"class":420},[220,76559,359],{"class":264},[212,76561,76562],{"className":2844,"code":76484,"language":2846,"meta":178,"style":178},[99,76563,76564,76572,76578,76586,76590],{"__ignoreMap":178},[220,76565,76566,76568,76570],{"class":222,"line":223},[220,76567,343],{"class":264},[220,76569,347],{"class":420},[220,76571,359],{"class":264},[220,76573,76574,76576],{"class":222,"line":179},[220,76575,364],{"class":264},[220,76577,76501],{"class":420},[220,76579,76580,76582,76584],{"class":222,"line":389},[220,76581,9635],{"class":226},[220,76583,353],{"class":264},[220,76585,9591],{"class":230},[220,76587,76588],{"class":222,"line":399},[220,76589,1234],{"class":264},[220,76591,76592,76594,76596],{"class":222,"line":644},[220,76593,402],{"class":264},[220,76595,347],{"class":420},[220,76597,359],{"class":264},[212,76599,76600],{"className":468,"code":76484,"language":469,"meta":178,"style":178},[99,76601,76602,76610,76616,76624,76628],{"__ignoreMap":178},[220,76603,76604,76606,76608],{"class":222,"line":223},[220,76605,343],{"class":264},[220,76607,347],{"class":420},[220,76609,359],{"class":264},[220,76611,76612,76614],{"class":222,"line":179},[220,76613,364],{"class":264},[220,76615,76501],{"class":420},[220,76617,76618,76620,76622],{"class":222,"line":389},[220,76619,9635],{"class":226},[220,76621,353],{"class":260},[220,76623,9591],{"class":230},[220,76625,76626],{"class":222,"line":399},[220,76627,1234],{"class":264},[220,76629,76630,76632,76634],{"class":222,"line":644},[220,76631,402],{"class":264},[220,76633,347],{"class":420},[220,76635,359],{"class":264},[212,76637,76639],{"className":251,"code":76638,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Trapezoid', props: { color: '#ffffff' } }\n ]\n})\n",[99,76640,76641,76651,76655,76669,76673,76686,76690],{"__ignoreMap":178},[220,76642,76643,76645,76647,76649],{"class":222,"line":223},[220,76644,261],{"class":260},[220,76646,11512],{"class":264},[220,76648,268],{"class":260},[220,76650,4007],{"class":230},[220,76652,76653],{"class":222,"line":179},[220,76654,647],{"emptyLinePlaceholder":194},[220,76656,76657,76659,76661,76663,76665,76667],{"class":222,"line":389},[220,76658,1735],{"class":260},[220,76660,1738],{"class":420},[220,76662,1741],{"class":260},[220,76664,1744],{"class":260},[220,76666,1747],{"class":226},[220,76668,1750],{"class":264},[220,76670,76671],{"class":222,"line":399},[220,76672,1765],{"class":264},[220,76674,76675,76677,76680,76682,76684],{"class":222,"line":644},[220,76676,1770],{"class":264},[220,76678,76679],{"class":230},"'Trapezoid'",[220,76681,1776],{"class":264},[220,76683,10169],{"class":230},[220,76685,1782],{"class":264},[220,76687,76688],{"class":222,"line":650},[220,76689,1787],{"class":264},[220,76691,76692],{"class":222,"line":656},[220,76693,1792],{"class":264},[1504,76695,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76697},[76698,76699],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":76462,"description":76470},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":76706,"title":76707,"body":76708,"category":33063,"componentType":25877,"description":76715,"extension":191,"meta":76900,"navigation":194,"path":76901,"requiresChild":32530,"seo":76902,"stem":76903,"__hash__":76904},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":76709,"toc":76896},[76710,76713,76716,76718,76720,76723,76725,76894],[11,76711,76707],{"id":76712},"triangulargrid",[15,76714,76715],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31911,76717],{"component":76707},[23,76719,31915],{"id":26533},[31917,76721],{":props":76722},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#1a1a1a\",\"description\":\"Triangle fill color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Grid line color\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of triangle rows down the shortest canvas edge\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of the grid lines (0 = no lines)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the grid in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the line edges (0 = crisp, 1 = very soft)\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Per-triangle random lightening\u002Fdarkening of the fill color\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animates the triangle rows drifting horizontally (0 = static)\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-row random speed variance for irregular drifting motion\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,76724,31923],{"id":31922},[246,76726,76727,76756,76784,76812,76840],{":tabs":1557},[212,76728,76730],{"className":334,"code":76729,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,76731,76732,76740,76748],{"__ignoreMap":178},[220,76733,76734,76736,76738],{"class":222,"line":223},[220,76735,343],{"class":264},[220,76737,347],{"class":346},[220,76739,359],{"class":264},[220,76741,76742,76744,76746],{"class":222,"line":179},[220,76743,364],{"class":264},[220,76745,76707],{"class":346},[220,76747,386],{"class":264},[220,76749,76750,76752,76754],{"class":222,"line":389},[220,76751,402],{"class":264},[220,76753,347],{"class":346},[220,76755,359],{"class":264},[212,76757,76758],{"className":409,"code":76729,"language":411,"meta":178,"style":178},[99,76759,76760,76768,76776],{"__ignoreMap":178},[220,76761,76762,76764,76766],{"class":222,"line":223},[220,76763,343],{"class":264},[220,76765,347],{"class":420},[220,76767,359],{"class":264},[220,76769,76770,76772,76774],{"class":222,"line":179},[220,76771,364],{"class":264},[220,76773,76707],{"class":420},[220,76775,386],{"class":264},[220,76777,76778,76780,76782],{"class":222,"line":389},[220,76779,402],{"class":264},[220,76781,347],{"class":420},[220,76783,359],{"class":264},[212,76785,76786],{"className":2844,"code":76729,"language":2846,"meta":178,"style":178},[99,76787,76788,76796,76804],{"__ignoreMap":178},[220,76789,76790,76792,76794],{"class":222,"line":223},[220,76791,343],{"class":264},[220,76793,347],{"class":420},[220,76795,359],{"class":264},[220,76797,76798,76800,76802],{"class":222,"line":179},[220,76799,364],{"class":264},[220,76801,76707],{"class":420},[220,76803,386],{"class":264},[220,76805,76806,76808,76810],{"class":222,"line":389},[220,76807,402],{"class":264},[220,76809,347],{"class":420},[220,76811,359],{"class":264},[212,76813,76814],{"className":468,"code":76729,"language":469,"meta":178,"style":178},[99,76815,76816,76824,76832],{"__ignoreMap":178},[220,76817,76818,76820,76822],{"class":222,"line":223},[220,76819,343],{"class":264},[220,76821,347],{"class":420},[220,76823,359],{"class":264},[220,76825,76826,76828,76830],{"class":222,"line":179},[220,76827,364],{"class":264},[220,76829,76707],{"class":420},[220,76831,386],{"class":264},[220,76833,76834,76836,76838],{"class":222,"line":389},[220,76835,402],{"class":264},[220,76837,347],{"class":420},[220,76839,359],{"class":264},[212,76841,76843],{"className":251,"code":76842,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'TriangularGrid', props: {} }\n ]\n})\n",[99,76844,76845,76855,76859,76873,76877,76886,76890],{"__ignoreMap":178},[220,76846,76847,76849,76851,76853],{"class":222,"line":223},[220,76848,261],{"class":260},[220,76850,11512],{"class":264},[220,76852,268],{"class":260},[220,76854,4007],{"class":230},[220,76856,76857],{"class":222,"line":179},[220,76858,647],{"emptyLinePlaceholder":194},[220,76860,76861,76863,76865,76867,76869,76871],{"class":222,"line":389},[220,76862,1735],{"class":260},[220,76864,1738],{"class":420},[220,76866,1741],{"class":260},[220,76868,1744],{"class":260},[220,76870,1747],{"class":226},[220,76872,1750],{"class":264},[220,76874,76875],{"class":222,"line":399},[220,76876,1765],{"class":264},[220,76878,76879,76881,76884],{"class":222,"line":644},[220,76880,1770],{"class":264},[220,76882,76883],{"class":230},"'TriangularGrid'",[220,76885,2465],{"class":264},[220,76887,76888],{"class":222,"line":650},[220,76889,1787],{"class":264},[220,76891,76892],{"class":222,"line":656},[220,76893,1792],{"class":264},[1504,76895,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":76897},[76898,76899],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":76707,"description":76715},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":76906,"title":76907,"body":76908,"category":36368,"componentType":25883,"description":76915,"extension":191,"meta":77176,"navigation":194,"path":77177,"requiresChild":194,"seo":77178,"stem":77179,"__hash__":77180},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":76909,"toc":77172},[76910,76913,76916,76918,76920,76923,76925,77170],[11,76911,76907],{"id":76912},"tritone",[15,76914,76915],{},"Map colors to three tones: shadows, midtones, highlights",[31911,76917],{"component":76907},[23,76919,31915],{"id":26533},[31917,76921],{":props":76922},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ce1bea\",\"description\":\"First color (used for shadows\u002Fdarkest 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\u002Fbrightest 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,76924,31923],{"id":31922},[246,76926,76927,76972,77016,77060,77104],{":tabs":1557},[212,76928,76930],{"className":334,"code":76929,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,76931,76932,76940,76948,76956,76964],{"__ignoreMap":178},[220,76933,76934,76936,76938],{"class":222,"line":223},[220,76935,343],{"class":264},[220,76937,347],{"class":346},[220,76939,359],{"class":264},[220,76941,76942,76944,76946],{"class":222,"line":179},[220,76943,364],{"class":264},[220,76945,76907],{"class":346},[220,76947,359],{"class":264},[220,76949,76950,76952,76954],{"class":222,"line":389},[220,76951,2550],{"class":264},[220,76953,2553],{"class":346},[220,76955,386],{"class":264},[220,76957,76958,76960,76962],{"class":222,"line":399},[220,76959,2567],{"class":264},[220,76961,76907],{"class":346},[220,76963,359],{"class":264},[220,76965,76966,76968,76970],{"class":222,"line":644},[220,76967,402],{"class":264},[220,76969,347],{"class":346},[220,76971,359],{"class":264},[212,76973,76974],{"className":409,"code":76929,"language":411,"meta":178,"style":178},[99,76975,76976,76984,76992,77000,77008],{"__ignoreMap":178},[220,76977,76978,76980,76982],{"class":222,"line":223},[220,76979,343],{"class":264},[220,76981,347],{"class":420},[220,76983,359],{"class":264},[220,76985,76986,76988,76990],{"class":222,"line":179},[220,76987,364],{"class":264},[220,76989,76907],{"class":420},[220,76991,359],{"class":264},[220,76993,76994,76996,76998],{"class":222,"line":389},[220,76995,2550],{"class":264},[220,76997,2553],{"class":420},[220,76999,386],{"class":264},[220,77001,77002,77004,77006],{"class":222,"line":399},[220,77003,2567],{"class":264},[220,77005,76907],{"class":420},[220,77007,359],{"class":264},[220,77009,77010,77012,77014],{"class":222,"line":644},[220,77011,402],{"class":264},[220,77013,347],{"class":420},[220,77015,359],{"class":264},[212,77017,77018],{"className":2844,"code":76929,"language":2846,"meta":178,"style":178},[99,77019,77020,77028,77036,77044,77052],{"__ignoreMap":178},[220,77021,77022,77024,77026],{"class":222,"line":223},[220,77023,343],{"class":264},[220,77025,347],{"class":420},[220,77027,359],{"class":264},[220,77029,77030,77032,77034],{"class":222,"line":179},[220,77031,364],{"class":264},[220,77033,76907],{"class":420},[220,77035,359],{"class":264},[220,77037,77038,77040,77042],{"class":222,"line":389},[220,77039,2550],{"class":264},[220,77041,2553],{"class":420},[220,77043,386],{"class":264},[220,77045,77046,77048,77050],{"class":222,"line":399},[220,77047,2567],{"class":264},[220,77049,76907],{"class":420},[220,77051,359],{"class":264},[220,77053,77054,77056,77058],{"class":222,"line":644},[220,77055,402],{"class":264},[220,77057,347],{"class":420},[220,77059,359],{"class":264},[212,77061,77062],{"className":468,"code":76929,"language":469,"meta":178,"style":178},[99,77063,77064,77072,77080,77088,77096],{"__ignoreMap":178},[220,77065,77066,77068,77070],{"class":222,"line":223},[220,77067,343],{"class":264},[220,77069,347],{"class":420},[220,77071,359],{"class":264},[220,77073,77074,77076,77078],{"class":222,"line":179},[220,77075,364],{"class":264},[220,77077,76907],{"class":420},[220,77079,359],{"class":264},[220,77081,77082,77084,77086],{"class":222,"line":389},[220,77083,2550],{"class":264},[220,77085,2553],{"class":420},[220,77087,386],{"class":264},[220,77089,77090,77092,77094],{"class":222,"line":399},[220,77091,2567],{"class":264},[220,77093,76907],{"class":420},[220,77095,359],{"class":264},[220,77097,77098,77100,77102],{"class":222,"line":644},[220,77099,402],{"class":264},[220,77101,347],{"class":420},[220,77103,359],{"class":264},[212,77105,77107],{"className":251,"code":77106,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Tritone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,77108,77109,77119,77123,77137,77141,77150,77158,77162,77166],{"__ignoreMap":178},[220,77110,77111,77113,77115,77117],{"class":222,"line":223},[220,77112,261],{"class":260},[220,77114,11512],{"class":264},[220,77116,268],{"class":260},[220,77118,4007],{"class":230},[220,77120,77121],{"class":222,"line":179},[220,77122,647],{"emptyLinePlaceholder":194},[220,77124,77125,77127,77129,77131,77133,77135],{"class":222,"line":389},[220,77126,1735],{"class":260},[220,77128,1738],{"class":420},[220,77130,1741],{"class":260},[220,77132,1744],{"class":260},[220,77134,1747],{"class":226},[220,77136,1750],{"class":264},[220,77138,77139],{"class":222,"line":399},[220,77140,1765],{"class":264},[220,77142,77143,77145,77148],{"class":222,"line":644},[220,77144,1770],{"class":264},[220,77146,77147],{"class":230},"'Tritone'",[220,77149,7009],{"class":264},[220,77151,77152,77154,77156],{"class":222,"line":650},[220,77153,7014],{"class":264},[220,77155,3206],{"class":230},[220,77157,2465],{"class":264},[220,77159,77160],{"class":222,"line":656},[220,77161,7031],{"class":264},[220,77163,77164],{"class":222,"line":673},[220,77165,1787],{"class":264},[220,77167,77168],{"class":222,"line":682},[220,77169,1792],{"class":264},[1504,77171,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77173},[77174,77175],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":76907,"description":76915},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":77182,"title":77183,"body":77184,"category":33063,"componentType":25877,"description":77191,"extension":191,"meta":77376,"navigation":194,"path":77377,"requiresChild":32530,"seo":77378,"stem":77379,"__hash__":77380},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":77185,"toc":77372},[77186,77189,77192,77194,77196,77199,77201,77370],[11,77187,77183],{"id":77188},"truchet",[15,77190,77191],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31911,77193],{"component":77183},[23,77195,31915],{"id":26533},[31917,77197],{":props":77198},"[{\"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\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the tiling in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the arc edges (0 = crisp, 1 = very soft)\"},{\"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,77200,31923],{"id":31922},[246,77202,77203,77232,77260,77288,77316],{":tabs":1557},[212,77204,77206],{"className":334,"code":77205,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,77207,77208,77216,77224],{"__ignoreMap":178},[220,77209,77210,77212,77214],{"class":222,"line":223},[220,77211,343],{"class":264},[220,77213,347],{"class":346},[220,77215,359],{"class":264},[220,77217,77218,77220,77222],{"class":222,"line":179},[220,77219,364],{"class":264},[220,77221,77183],{"class":346},[220,77223,386],{"class":264},[220,77225,77226,77228,77230],{"class":222,"line":389},[220,77227,402],{"class":264},[220,77229,347],{"class":346},[220,77231,359],{"class":264},[212,77233,77234],{"className":409,"code":77205,"language":411,"meta":178,"style":178},[99,77235,77236,77244,77252],{"__ignoreMap":178},[220,77237,77238,77240,77242],{"class":222,"line":223},[220,77239,343],{"class":264},[220,77241,347],{"class":420},[220,77243,359],{"class":264},[220,77245,77246,77248,77250],{"class":222,"line":179},[220,77247,364],{"class":264},[220,77249,77183],{"class":420},[220,77251,386],{"class":264},[220,77253,77254,77256,77258],{"class":222,"line":389},[220,77255,402],{"class":264},[220,77257,347],{"class":420},[220,77259,359],{"class":264},[212,77261,77262],{"className":2844,"code":77205,"language":2846,"meta":178,"style":178},[99,77263,77264,77272,77280],{"__ignoreMap":178},[220,77265,77266,77268,77270],{"class":222,"line":223},[220,77267,343],{"class":264},[220,77269,347],{"class":420},[220,77271,359],{"class":264},[220,77273,77274,77276,77278],{"class":222,"line":179},[220,77275,364],{"class":264},[220,77277,77183],{"class":420},[220,77279,386],{"class":264},[220,77281,77282,77284,77286],{"class":222,"line":389},[220,77283,402],{"class":264},[220,77285,347],{"class":420},[220,77287,359],{"class":264},[212,77289,77290],{"className":468,"code":77205,"language":469,"meta":178,"style":178},[99,77291,77292,77300,77308],{"__ignoreMap":178},[220,77293,77294,77296,77298],{"class":222,"line":223},[220,77295,343],{"class":264},[220,77297,347],{"class":420},[220,77299,359],{"class":264},[220,77301,77302,77304,77306],{"class":222,"line":179},[220,77303,364],{"class":264},[220,77305,77183],{"class":420},[220,77307,386],{"class":264},[220,77309,77310,77312,77314],{"class":222,"line":389},[220,77311,402],{"class":264},[220,77313,347],{"class":420},[220,77315,359],{"class":264},[212,77317,77319],{"className":251,"code":77318,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Truchet', props: {} }\n ]\n})\n",[99,77320,77321,77331,77335,77349,77353,77362,77366],{"__ignoreMap":178},[220,77322,77323,77325,77327,77329],{"class":222,"line":223},[220,77324,261],{"class":260},[220,77326,11512],{"class":264},[220,77328,268],{"class":260},[220,77330,4007],{"class":230},[220,77332,77333],{"class":222,"line":179},[220,77334,647],{"emptyLinePlaceholder":194},[220,77336,77337,77339,77341,77343,77345,77347],{"class":222,"line":389},[220,77338,1735],{"class":260},[220,77340,1738],{"class":420},[220,77342,1741],{"class":260},[220,77344,1744],{"class":260},[220,77346,1747],{"class":226},[220,77348,1750],{"class":264},[220,77350,77351],{"class":222,"line":399},[220,77352,1765],{"class":264},[220,77354,77355,77357,77360],{"class":222,"line":644},[220,77356,1770],{"class":264},[220,77358,77359],{"class":230},"'Truchet'",[220,77361,2465],{"class":264},[220,77363,77364],{"class":222,"line":650},[220,77365,1787],{"class":264},[220,77367,77368],{"class":222,"line":656},[220,77369,1792],{"class":264},[1504,77371,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77373},[77374,77375],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":77183,"description":77191},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":77382,"title":77383,"body":77384,"category":33396,"componentType":25883,"description":77391,"extension":191,"meta":77708,"navigation":194,"path":77709,"requiresChild":194,"seo":77710,"stem":77711,"__hash__":77712},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":77385,"toc":77704},[77386,77389,77392,77394,77396,77399,77401,77702],[11,77387,77383],{"id":77388},"twirl",[15,77390,77391],{},"Rotate and twist content around a center point",[31911,77393],{"component":77383},[23,77395,31915],{"id":26533},[31917,77397],{":props":77398},"[{\"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,77400,31923],{"id":31922},[246,77402,77403,77459,77518,77574,77632],{":tabs":1557},[212,77404,77406],{"className":334,"code":77405,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77407,77408,77416,77423,77431,77435,77443,77451],{"__ignoreMap":178},[220,77409,77410,77412,77414],{"class":222,"line":223},[220,77411,343],{"class":264},[220,77413,347],{"class":346},[220,77415,359],{"class":264},[220,77417,77418,77420],{"class":222,"line":179},[220,77419,364],{"class":264},[220,77421,77422],{"class":346},"Twirl\n",[220,77424,77425,77427,77429],{"class":222,"line":389},[220,77426,20371],{"class":226},[220,77428,353],{"class":264},[220,77430,36625],{"class":230},[220,77432,77433],{"class":222,"line":399},[220,77434,31959],{"class":264},[220,77436,77437,77439,77441],{"class":222,"line":644},[220,77438,2550],{"class":264},[220,77440,2553],{"class":346},[220,77442,386],{"class":264},[220,77444,77445,77447,77449],{"class":222,"line":650},[220,77446,2567],{"class":264},[220,77448,77383],{"class":346},[220,77450,359],{"class":264},[220,77452,77453,77455,77457],{"class":222,"line":656},[220,77454,402],{"class":264},[220,77456,347],{"class":346},[220,77458,359],{"class":264},[212,77460,77462],{"className":409,"code":77461,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77463,77464,77472,77478,77490,77494,77502,77510],{"__ignoreMap":178},[220,77465,77466,77468,77470],{"class":222,"line":223},[220,77467,343],{"class":264},[220,77469,347],{"class":420},[220,77471,359],{"class":264},[220,77473,77474,77476],{"class":222,"line":179},[220,77475,364],{"class":264},[220,77477,77422],{"class":420},[220,77479,77480,77482,77484,77486,77488],{"class":222,"line":389},[220,77481,20482],{"class":226},[220,77483,353],{"class":260},[220,77485,743],{"class":264},[220,77487,8677],{"class":420},[220,77489,749],{"class":264},[220,77491,77492],{"class":222,"line":399},[220,77493,31959],{"class":264},[220,77495,77496,77498,77500],{"class":222,"line":644},[220,77497,2550],{"class":264},[220,77499,2553],{"class":420},[220,77501,386],{"class":264},[220,77503,77504,77506,77508],{"class":222,"line":650},[220,77505,2567],{"class":264},[220,77507,77383],{"class":420},[220,77509,359],{"class":264},[220,77511,77512,77514,77516],{"class":222,"line":656},[220,77513,402],{"class":264},[220,77515,347],{"class":420},[220,77517,359],{"class":264},[212,77519,77520],{"className":2844,"code":77461,"language":2846,"meta":178,"style":178},[99,77521,77522,77530,77536,77546,77550,77558,77566],{"__ignoreMap":178},[220,77523,77524,77526,77528],{"class":222,"line":223},[220,77525,343],{"class":264},[220,77527,347],{"class":420},[220,77529,359],{"class":264},[220,77531,77532,77534],{"class":222,"line":179},[220,77533,364],{"class":264},[220,77535,77422],{"class":420},[220,77537,77538,77540,77542,77544],{"class":222,"line":389},[220,77539,20482],{"class":226},[220,77541,29871],{"class":264},[220,77543,8677],{"class":420},[220,77545,749],{"class":264},[220,77547,77548],{"class":222,"line":399},[220,77549,31959],{"class":264},[220,77551,77552,77554,77556],{"class":222,"line":644},[220,77553,2550],{"class":264},[220,77555,2553],{"class":420},[220,77557,386],{"class":264},[220,77559,77560,77562,77564],{"class":222,"line":650},[220,77561,2567],{"class":264},[220,77563,77383],{"class":420},[220,77565,359],{"class":264},[220,77567,77568,77570,77572],{"class":222,"line":656},[220,77569,402],{"class":264},[220,77571,347],{"class":420},[220,77573,359],{"class":264},[212,77575,77576],{"className":468,"code":77461,"language":469,"meta":178,"style":178},[99,77577,77578,77586,77592,77604,77608,77616,77624],{"__ignoreMap":178},[220,77579,77580,77582,77584],{"class":222,"line":223},[220,77581,343],{"class":264},[220,77583,347],{"class":420},[220,77585,359],{"class":264},[220,77587,77588,77590],{"class":222,"line":179},[220,77589,364],{"class":264},[220,77591,77422],{"class":420},[220,77593,77594,77596,77598,77600,77602],{"class":222,"line":389},[220,77595,20482],{"class":226},[220,77597,353],{"class":260},[220,77599,743],{"class":264},[220,77601,8677],{"class":420},[220,77603,749],{"class":264},[220,77605,77606],{"class":222,"line":399},[220,77607,31959],{"class":264},[220,77609,77610,77612,77614],{"class":222,"line":644},[220,77611,2550],{"class":264},[220,77613,2553],{"class":420},[220,77615,386],{"class":264},[220,77617,77618,77620,77622],{"class":222,"line":650},[220,77619,2567],{"class":264},[220,77621,77383],{"class":420},[220,77623,359],{"class":264},[220,77625,77626,77628,77630],{"class":222,"line":656},[220,77627,402],{"class":264},[220,77629,347],{"class":420},[220,77631,359],{"class":264},[212,77633,77635],{"className":251,"code":77634,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Twirl', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,77636,77637,77647,77651,77665,77669,77682,77690,77694,77698],{"__ignoreMap":178},[220,77638,77639,77641,77643,77645],{"class":222,"line":223},[220,77640,261],{"class":260},[220,77642,11512],{"class":264},[220,77644,268],{"class":260},[220,77646,4007],{"class":230},[220,77648,77649],{"class":222,"line":179},[220,77650,647],{"emptyLinePlaceholder":194},[220,77652,77653,77655,77657,77659,77661,77663],{"class":222,"line":389},[220,77654,1735],{"class":260},[220,77656,1738],{"class":420},[220,77658,1741],{"class":260},[220,77660,1744],{"class":260},[220,77662,1747],{"class":226},[220,77664,1750],{"class":264},[220,77666,77667],{"class":222,"line":399},[220,77668,1765],{"class":264},[220,77670,77671,77673,77676,77678,77680],{"class":222,"line":644},[220,77672,1770],{"class":264},[220,77674,77675],{"class":230},"'Twirl'",[220,77677,32203],{"class":264},[220,77679,8677],{"class":420},[220,77681,7546],{"class":264},[220,77683,77684,77686,77688],{"class":222,"line":650},[220,77685,7014],{"class":264},[220,77687,3206],{"class":230},[220,77689,2465],{"class":264},[220,77691,77692],{"class":222,"line":656},[220,77693,7031],{"class":264},[220,77695,77696],{"class":222,"line":673},[220,77697,1787],{"class":264},[220,77699,77700],{"class":222,"line":682},[220,77701,1792],{"class":264},[1504,77703,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77705},[77706,77707],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":77383,"description":77391},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":77714,"title":77715,"body":77716,"category":32806,"componentType":25883,"description":77723,"extension":191,"meta":77984,"navigation":194,"path":77985,"requiresChild":194,"seo":77986,"stem":77987,"__hash__":77988},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":77717,"toc":77980},[77718,77721,77724,77726,77728,77731,77733,77978],[11,77719,77715],{"id":77720},"vhs",[15,77722,77723],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31911,77725],{"component":77715},[23,77727,31915],{"id":26533},[31917,77729],{":props":77730},"[{\"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\u002Fluma 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,77732,31923],{"id":31922},[246,77734,77735,77780,77824,77868,77912],{":tabs":1557},[212,77736,77738],{"className":334,"code":77737,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,77739,77740,77748,77756,77764,77772],{"__ignoreMap":178},[220,77741,77742,77744,77746],{"class":222,"line":223},[220,77743,343],{"class":264},[220,77745,347],{"class":346},[220,77747,359],{"class":264},[220,77749,77750,77752,77754],{"class":222,"line":179},[220,77751,364],{"class":264},[220,77753,77715],{"class":346},[220,77755,359],{"class":264},[220,77757,77758,77760,77762],{"class":222,"line":389},[220,77759,2550],{"class":264},[220,77761,2553],{"class":346},[220,77763,386],{"class":264},[220,77765,77766,77768,77770],{"class":222,"line":399},[220,77767,2567],{"class":264},[220,77769,77715],{"class":346},[220,77771,359],{"class":264},[220,77773,77774,77776,77778],{"class":222,"line":644},[220,77775,402],{"class":264},[220,77777,347],{"class":346},[220,77779,359],{"class":264},[212,77781,77782],{"className":409,"code":77737,"language":411,"meta":178,"style":178},[99,77783,77784,77792,77800,77808,77816],{"__ignoreMap":178},[220,77785,77786,77788,77790],{"class":222,"line":223},[220,77787,343],{"class":264},[220,77789,347],{"class":420},[220,77791,359],{"class":264},[220,77793,77794,77796,77798],{"class":222,"line":179},[220,77795,364],{"class":264},[220,77797,77715],{"class":420},[220,77799,359],{"class":264},[220,77801,77802,77804,77806],{"class":222,"line":389},[220,77803,2550],{"class":264},[220,77805,2553],{"class":420},[220,77807,386],{"class":264},[220,77809,77810,77812,77814],{"class":222,"line":399},[220,77811,2567],{"class":264},[220,77813,77715],{"class":420},[220,77815,359],{"class":264},[220,77817,77818,77820,77822],{"class":222,"line":644},[220,77819,402],{"class":264},[220,77821,347],{"class":420},[220,77823,359],{"class":264},[212,77825,77826],{"className":2844,"code":77737,"language":2846,"meta":178,"style":178},[99,77827,77828,77836,77844,77852,77860],{"__ignoreMap":178},[220,77829,77830,77832,77834],{"class":222,"line":223},[220,77831,343],{"class":264},[220,77833,347],{"class":420},[220,77835,359],{"class":264},[220,77837,77838,77840,77842],{"class":222,"line":179},[220,77839,364],{"class":264},[220,77841,77715],{"class":420},[220,77843,359],{"class":264},[220,77845,77846,77848,77850],{"class":222,"line":389},[220,77847,2550],{"class":264},[220,77849,2553],{"class":420},[220,77851,386],{"class":264},[220,77853,77854,77856,77858],{"class":222,"line":399},[220,77855,2567],{"class":264},[220,77857,77715],{"class":420},[220,77859,359],{"class":264},[220,77861,77862,77864,77866],{"class":222,"line":644},[220,77863,402],{"class":264},[220,77865,347],{"class":420},[220,77867,359],{"class":264},[212,77869,77870],{"className":468,"code":77737,"language":469,"meta":178,"style":178},[99,77871,77872,77880,77888,77896,77904],{"__ignoreMap":178},[220,77873,77874,77876,77878],{"class":222,"line":223},[220,77875,343],{"class":264},[220,77877,347],{"class":420},[220,77879,359],{"class":264},[220,77881,77882,77884,77886],{"class":222,"line":179},[220,77883,364],{"class":264},[220,77885,77715],{"class":420},[220,77887,359],{"class":264},[220,77889,77890,77892,77894],{"class":222,"line":389},[220,77891,2550],{"class":264},[220,77893,2553],{"class":420},[220,77895,386],{"class":264},[220,77897,77898,77900,77902],{"class":222,"line":399},[220,77899,2567],{"class":264},[220,77901,77715],{"class":420},[220,77903,359],{"class":264},[220,77905,77906,77908,77910],{"class":222,"line":644},[220,77907,402],{"class":264},[220,77909,347],{"class":420},[220,77911,359],{"class":264},[212,77913,77915],{"className":251,"code":77914,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VHS', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,77916,77917,77927,77931,77945,77949,77958,77966,77970,77974],{"__ignoreMap":178},[220,77918,77919,77921,77923,77925],{"class":222,"line":223},[220,77920,261],{"class":260},[220,77922,11512],{"class":264},[220,77924,268],{"class":260},[220,77926,4007],{"class":230},[220,77928,77929],{"class":222,"line":179},[220,77930,647],{"emptyLinePlaceholder":194},[220,77932,77933,77935,77937,77939,77941,77943],{"class":222,"line":389},[220,77934,1735],{"class":260},[220,77936,1738],{"class":420},[220,77938,1741],{"class":260},[220,77940,1744],{"class":260},[220,77942,1747],{"class":226},[220,77944,1750],{"class":264},[220,77946,77947],{"class":222,"line":399},[220,77948,1765],{"class":264},[220,77950,77951,77953,77956],{"class":222,"line":644},[220,77952,1770],{"class":264},[220,77954,77955],{"class":230},"'VHS'",[220,77957,7009],{"class":264},[220,77959,77960,77962,77964],{"class":222,"line":650},[220,77961,7014],{"class":264},[220,77963,3206],{"class":230},[220,77965,2465],{"class":264},[220,77967,77968],{"class":222,"line":656},[220,77969,7031],{"class":264},[220,77971,77972],{"class":222,"line":673},[220,77973,1787],{"class":264},[220,77975,77976],{"class":222,"line":682},[220,77977,1792],{"class":264},[1504,77979,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":77981},[77982,77983],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":77715,"description":77723},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":77990,"title":77991,"body":77992,"category":33673,"componentType":25883,"description":77999,"extension":191,"meta":78260,"navigation":194,"path":78261,"requiresChild":194,"seo":78262,"stem":78263,"__hash__":78264},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":77993,"toc":78256},[77994,77997,78000,78002,78004,78007,78009,78254],[11,77995,77991],{"id":77996},"venetianblinds",[15,77998,77999],{},"Wipe the content away behind a set of parallel closing strips",[31911,78001],{"component":77991},[23,78003,31915],{"id":26533},[31917,78005],{":props":78006},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the blinds have closed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the strips in degrees\"},{\"name\":\"stripCount\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of strips across the frame\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Softness of each closing strip edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Close each strip from the opposite edge\"}]",[23,78008,31923],{"id":31922},[246,78010,78011,78056,78100,78144,78188],{":tabs":1557},[212,78012,78014],{"className":334,"code":78013,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,78015,78016,78024,78032,78040,78048],{"__ignoreMap":178},[220,78017,78018,78020,78022],{"class":222,"line":223},[220,78019,343],{"class":264},[220,78021,347],{"class":346},[220,78023,359],{"class":264},[220,78025,78026,78028,78030],{"class":222,"line":179},[220,78027,364],{"class":264},[220,78029,77991],{"class":346},[220,78031,359],{"class":264},[220,78033,78034,78036,78038],{"class":222,"line":389},[220,78035,2550],{"class":264},[220,78037,2553],{"class":346},[220,78039,386],{"class":264},[220,78041,78042,78044,78046],{"class":222,"line":399},[220,78043,2567],{"class":264},[220,78045,77991],{"class":346},[220,78047,359],{"class":264},[220,78049,78050,78052,78054],{"class":222,"line":644},[220,78051,402],{"class":264},[220,78053,347],{"class":346},[220,78055,359],{"class":264},[212,78057,78058],{"className":409,"code":78013,"language":411,"meta":178,"style":178},[99,78059,78060,78068,78076,78084,78092],{"__ignoreMap":178},[220,78061,78062,78064,78066],{"class":222,"line":223},[220,78063,343],{"class":264},[220,78065,347],{"class":420},[220,78067,359],{"class":264},[220,78069,78070,78072,78074],{"class":222,"line":179},[220,78071,364],{"class":264},[220,78073,77991],{"class":420},[220,78075,359],{"class":264},[220,78077,78078,78080,78082],{"class":222,"line":389},[220,78079,2550],{"class":264},[220,78081,2553],{"class":420},[220,78083,386],{"class":264},[220,78085,78086,78088,78090],{"class":222,"line":399},[220,78087,2567],{"class":264},[220,78089,77991],{"class":420},[220,78091,359],{"class":264},[220,78093,78094,78096,78098],{"class":222,"line":644},[220,78095,402],{"class":264},[220,78097,347],{"class":420},[220,78099,359],{"class":264},[212,78101,78102],{"className":2844,"code":78013,"language":2846,"meta":178,"style":178},[99,78103,78104,78112,78120,78128,78136],{"__ignoreMap":178},[220,78105,78106,78108,78110],{"class":222,"line":223},[220,78107,343],{"class":264},[220,78109,347],{"class":420},[220,78111,359],{"class":264},[220,78113,78114,78116,78118],{"class":222,"line":179},[220,78115,364],{"class":264},[220,78117,77991],{"class":420},[220,78119,359],{"class":264},[220,78121,78122,78124,78126],{"class":222,"line":389},[220,78123,2550],{"class":264},[220,78125,2553],{"class":420},[220,78127,386],{"class":264},[220,78129,78130,78132,78134],{"class":222,"line":399},[220,78131,2567],{"class":264},[220,78133,77991],{"class":420},[220,78135,359],{"class":264},[220,78137,78138,78140,78142],{"class":222,"line":644},[220,78139,402],{"class":264},[220,78141,347],{"class":420},[220,78143,359],{"class":264},[212,78145,78146],{"className":468,"code":78013,"language":469,"meta":178,"style":178},[99,78147,78148,78156,78164,78172,78180],{"__ignoreMap":178},[220,78149,78150,78152,78154],{"class":222,"line":223},[220,78151,343],{"class":264},[220,78153,347],{"class":420},[220,78155,359],{"class":264},[220,78157,78158,78160,78162],{"class":222,"line":179},[220,78159,364],{"class":264},[220,78161,77991],{"class":420},[220,78163,359],{"class":264},[220,78165,78166,78168,78170],{"class":222,"line":389},[220,78167,2550],{"class":264},[220,78169,2553],{"class":420},[220,78171,386],{"class":264},[220,78173,78174,78176,78178],{"class":222,"line":399},[220,78175,2567],{"class":264},[220,78177,77991],{"class":420},[220,78179,359],{"class":264},[220,78181,78182,78184,78186],{"class":222,"line":644},[220,78183,402],{"class":264},[220,78185,347],{"class":420},[220,78187,359],{"class":264},[212,78189,78191],{"className":251,"code":78190,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VenetianBlinds', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,78192,78193,78203,78207,78221,78225,78234,78242,78246,78250],{"__ignoreMap":178},[220,78194,78195,78197,78199,78201],{"class":222,"line":223},[220,78196,261],{"class":260},[220,78198,11512],{"class":264},[220,78200,268],{"class":260},[220,78202,4007],{"class":230},[220,78204,78205],{"class":222,"line":179},[220,78206,647],{"emptyLinePlaceholder":194},[220,78208,78209,78211,78213,78215,78217,78219],{"class":222,"line":389},[220,78210,1735],{"class":260},[220,78212,1738],{"class":420},[220,78214,1741],{"class":260},[220,78216,1744],{"class":260},[220,78218,1747],{"class":226},[220,78220,1750],{"class":264},[220,78222,78223],{"class":222,"line":399},[220,78224,1765],{"class":264},[220,78226,78227,78229,78232],{"class":222,"line":644},[220,78228,1770],{"class":264},[220,78230,78231],{"class":230},"'VenetianBlinds'",[220,78233,7009],{"class":264},[220,78235,78236,78238,78240],{"class":222,"line":650},[220,78237,7014],{"class":264},[220,78239,3206],{"class":230},[220,78241,2465],{"class":264},[220,78243,78244],{"class":222,"line":656},[220,78245,7031],{"class":264},[220,78247,78248],{"class":222,"line":673},[220,78249,1787],{"class":264},[220,78251,78252],{"class":222,"line":682},[220,78253,1792],{"class":264},[1504,78255,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":78257},[78258,78259],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":77991,"description":77999},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":78266,"title":78267,"body":78268,"category":15908,"componentType":25877,"description":78275,"extension":191,"meta":78552,"navigation":194,"path":78553,"requiresChild":32530,"seo":78554,"stem":78555,"__hash__":78556},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":78269,"toc":78548},[78270,78273,78276,78278,78280,78283,78285,78546],[11,78271,78267],{"id":78272},"vesica",[15,78274,78275],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31911,78277],{"component":78267},[23,78279,31915],{"id":26533},[31917,78281],{":props":78282},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"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,78284,31923],{"id":31922},[246,78286,78287,78335,78386,78434,78484],{":tabs":1557},[212,78288,78290],{"className":334,"code":78289,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,78291,78292,78300,78307,78315,78323,78327],{"__ignoreMap":178},[220,78293,78294,78296,78298],{"class":222,"line":223},[220,78295,343],{"class":264},[220,78297,347],{"class":346},[220,78299,359],{"class":264},[220,78301,78302,78304],{"class":222,"line":179},[220,78303,364],{"class":264},[220,78305,78306],{"class":346},"Vesica\n",[220,78308,78309,78311,78313],{"class":222,"line":389},[220,78310,9635],{"class":226},[220,78312,353],{"class":264},[220,78314,9591],{"class":230},[220,78316,78317,78319,78321],{"class":222,"line":399},[220,78318,17405],{"class":226},[220,78320,353],{"class":264},[220,78322,41391],{"class":230},[220,78324,78325],{"class":222,"line":644},[220,78326,1234],{"class":264},[220,78328,78329,78331,78333],{"class":222,"line":650},[220,78330,402],{"class":264},[220,78332,347],{"class":346},[220,78334,359],{"class":264},[212,78336,78338],{"className":409,"code":78337,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,78339,78340,78348,78354,78362,78374,78378],{"__ignoreMap":178},[220,78341,78342,78344,78346],{"class":222,"line":223},[220,78343,343],{"class":264},[220,78345,347],{"class":420},[220,78347,359],{"class":264},[220,78349,78350,78352],{"class":222,"line":179},[220,78351,364],{"class":264},[220,78353,78306],{"class":420},[220,78355,78356,78358,78360],{"class":222,"line":389},[220,78357,9635],{"class":226},[220,78359,353],{"class":260},[220,78361,9591],{"class":230},[220,78363,78364,78366,78368,78370,78372],{"class":222,"line":399},[220,78365,9645],{"class":226},[220,78367,353],{"class":260},[220,78369,743],{"class":264},[220,78371,21148],{"class":420},[220,78373,749],{"class":264},[220,78375,78376],{"class":222,"line":644},[220,78377,1234],{"class":264},[220,78379,78380,78382,78384],{"class":222,"line":650},[220,78381,402],{"class":264},[220,78383,347],{"class":420},[220,78385,359],{"class":264},[212,78387,78388],{"className":2844,"code":78337,"language":2846,"meta":178,"style":178},[99,78389,78390,78398,78404,78412,78422,78426],{"__ignoreMap":178},[220,78391,78392,78394,78396],{"class":222,"line":223},[220,78393,343],{"class":264},[220,78395,347],{"class":420},[220,78397,359],{"class":264},[220,78399,78400,78402],{"class":222,"line":179},[220,78401,364],{"class":264},[220,78403,78306],{"class":420},[220,78405,78406,78408,78410],{"class":222,"line":389},[220,78407,9635],{"class":226},[220,78409,353],{"class":264},[220,78411,9591],{"class":230},[220,78413,78414,78416,78418,78420],{"class":222,"line":399},[220,78415,9645],{"class":226},[220,78417,29871],{"class":264},[220,78419,21148],{"class":420},[220,78421,749],{"class":264},[220,78423,78424],{"class":222,"line":644},[220,78425,1234],{"class":264},[220,78427,78428,78430,78432],{"class":222,"line":650},[220,78429,402],{"class":264},[220,78431,347],{"class":420},[220,78433,359],{"class":264},[212,78435,78436],{"className":468,"code":78337,"language":469,"meta":178,"style":178},[99,78437,78438,78446,78452,78460,78472,78476],{"__ignoreMap":178},[220,78439,78440,78442,78444],{"class":222,"line":223},[220,78441,343],{"class":264},[220,78443,347],{"class":420},[220,78445,359],{"class":264},[220,78447,78448,78450],{"class":222,"line":179},[220,78449,364],{"class":264},[220,78451,78306],{"class":420},[220,78453,78454,78456,78458],{"class":222,"line":389},[220,78455,9635],{"class":226},[220,78457,353],{"class":260},[220,78459,9591],{"class":230},[220,78461,78462,78464,78466,78468,78470],{"class":222,"line":399},[220,78463,9645],{"class":226},[220,78465,353],{"class":260},[220,78467,743],{"class":264},[220,78469,21148],{"class":420},[220,78471,749],{"class":264},[220,78473,78474],{"class":222,"line":644},[220,78475,1234],{"class":264},[220,78477,78478,78480,78482],{"class":222,"line":650},[220,78479,402],{"class":264},[220,78481,347],{"class":420},[220,78483,359],{"class":264},[212,78485,78487],{"className":251,"code":78486,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Vesica', props: { color: '#ffffff', radius: 0.35 } }\n ]\n})\n",[99,78488,78489,78499,78503,78517,78521,78538,78542],{"__ignoreMap":178},[220,78490,78491,78493,78495,78497],{"class":222,"line":223},[220,78492,261],{"class":260},[220,78494,11512],{"class":264},[220,78496,268],{"class":260},[220,78498,4007],{"class":230},[220,78500,78501],{"class":222,"line":179},[220,78502,647],{"emptyLinePlaceholder":194},[220,78504,78505,78507,78509,78511,78513,78515],{"class":222,"line":389},[220,78506,1735],{"class":260},[220,78508,1738],{"class":420},[220,78510,1741],{"class":260},[220,78512,1744],{"class":260},[220,78514,1747],{"class":226},[220,78516,1750],{"class":264},[220,78518,78519],{"class":222,"line":399},[220,78520,1765],{"class":264},[220,78522,78523,78525,78528,78530,78532,78534,78536],{"class":222,"line":644},[220,78524,1770],{"class":264},[220,78526,78527],{"class":230},"'Vesica'",[220,78529,1776],{"class":264},[220,78531,10169],{"class":230},[220,78533,6566],{"class":264},[220,78535,21148],{"class":420},[220,78537,1782],{"class":264},[220,78539,78540],{"class":222,"line":650},[220,78541,1787],{"class":264},[220,78543,78544],{"class":222,"line":656},[220,78545,1792],{"class":264},[1504,78547,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78549},[78550,78551],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":78267,"description":78275},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":78558,"title":78559,"body":78560,"category":36368,"componentType":25883,"description":78567,"extension":191,"meta":78885,"navigation":194,"path":78886,"requiresChild":194,"seo":78887,"stem":78888,"__hash__":78889},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":78561,"toc":78881},[78562,78565,78568,78570,78572,78575,78577,78879],[11,78563,78559],{"id":78564},"vibrance",[15,78566,78567],{},"Selective saturation adjustment protecting skin tones",[31911,78569],{"component":78559},[23,78571,31915],{"id":26533},[31917,78573],{":props":78574},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,78576,31923],{"id":31922},[246,78578,78579,78636,78695,78751,78809],{":tabs":1557},[212,78580,78582],{"className":334,"code":78581,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78583,78584,78592,78599,78608,78612,78620,78628],{"__ignoreMap":178},[220,78585,78586,78588,78590],{"class":222,"line":223},[220,78587,343],{"class":264},[220,78589,347],{"class":346},[220,78591,359],{"class":264},[220,78593,78594,78596],{"class":222,"line":179},[220,78595,364],{"class":264},[220,78597,78598],{"class":346},"Vibrance\n",[220,78600,78601,78603,78605],{"class":222,"line":389},[220,78602,20371],{"class":226},[220,78604,353],{"class":264},[220,78606,78607],{"class":230},"\"0\"\n",[220,78609,78610],{"class":222,"line":399},[220,78611,31959],{"class":264},[220,78613,78614,78616,78618],{"class":222,"line":644},[220,78615,2550],{"class":264},[220,78617,2553],{"class":346},[220,78619,386],{"class":264},[220,78621,78622,78624,78626],{"class":222,"line":650},[220,78623,2567],{"class":264},[220,78625,78559],{"class":346},[220,78627,359],{"class":264},[220,78629,78630,78632,78634],{"class":222,"line":656},[220,78631,402],{"class":264},[220,78633,347],{"class":346},[220,78635,359],{"class":264},[212,78637,78639],{"className":409,"code":78638,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78640,78641,78649,78655,78667,78671,78679,78687],{"__ignoreMap":178},[220,78642,78643,78645,78647],{"class":222,"line":223},[220,78644,343],{"class":264},[220,78646,347],{"class":420},[220,78648,359],{"class":264},[220,78650,78651,78653],{"class":222,"line":179},[220,78652,364],{"class":264},[220,78654,78598],{"class":420},[220,78656,78657,78659,78661,78663,78665],{"class":222,"line":389},[220,78658,20482],{"class":226},[220,78660,353],{"class":260},[220,78662,743],{"class":264},[220,78664,8673],{"class":420},[220,78666,749],{"class":264},[220,78668,78669],{"class":222,"line":399},[220,78670,31959],{"class":264},[220,78672,78673,78675,78677],{"class":222,"line":644},[220,78674,2550],{"class":264},[220,78676,2553],{"class":420},[220,78678,386],{"class":264},[220,78680,78681,78683,78685],{"class":222,"line":650},[220,78682,2567],{"class":264},[220,78684,78559],{"class":420},[220,78686,359],{"class":264},[220,78688,78689,78691,78693],{"class":222,"line":656},[220,78690,402],{"class":264},[220,78692,347],{"class":420},[220,78694,359],{"class":264},[212,78696,78697],{"className":2844,"code":78638,"language":2846,"meta":178,"style":178},[99,78698,78699,78707,78713,78723,78727,78735,78743],{"__ignoreMap":178},[220,78700,78701,78703,78705],{"class":222,"line":223},[220,78702,343],{"class":264},[220,78704,347],{"class":420},[220,78706,359],{"class":264},[220,78708,78709,78711],{"class":222,"line":179},[220,78710,364],{"class":264},[220,78712,78598],{"class":420},[220,78714,78715,78717,78719,78721],{"class":222,"line":389},[220,78716,20482],{"class":226},[220,78718,29871],{"class":264},[220,78720,8673],{"class":420},[220,78722,749],{"class":264},[220,78724,78725],{"class":222,"line":399},[220,78726,31959],{"class":264},[220,78728,78729,78731,78733],{"class":222,"line":644},[220,78730,2550],{"class":264},[220,78732,2553],{"class":420},[220,78734,386],{"class":264},[220,78736,78737,78739,78741],{"class":222,"line":650},[220,78738,2567],{"class":264},[220,78740,78559],{"class":420},[220,78742,359],{"class":264},[220,78744,78745,78747,78749],{"class":222,"line":656},[220,78746,402],{"class":264},[220,78748,347],{"class":420},[220,78750,359],{"class":264},[212,78752,78753],{"className":468,"code":78638,"language":469,"meta":178,"style":178},[99,78754,78755,78763,78769,78781,78785,78793,78801],{"__ignoreMap":178},[220,78756,78757,78759,78761],{"class":222,"line":223},[220,78758,343],{"class":264},[220,78760,347],{"class":420},[220,78762,359],{"class":264},[220,78764,78765,78767],{"class":222,"line":179},[220,78766,364],{"class":264},[220,78768,78598],{"class":420},[220,78770,78771,78773,78775,78777,78779],{"class":222,"line":389},[220,78772,20482],{"class":226},[220,78774,353],{"class":260},[220,78776,743],{"class":264},[220,78778,8673],{"class":420},[220,78780,749],{"class":264},[220,78782,78783],{"class":222,"line":399},[220,78784,31959],{"class":264},[220,78786,78787,78789,78791],{"class":222,"line":644},[220,78788,2550],{"class":264},[220,78790,2553],{"class":420},[220,78792,386],{"class":264},[220,78794,78795,78797,78799],{"class":222,"line":650},[220,78796,2567],{"class":264},[220,78798,78559],{"class":420},[220,78800,359],{"class":264},[220,78802,78803,78805,78807],{"class":222,"line":656},[220,78804,402],{"class":264},[220,78806,347],{"class":420},[220,78808,359],{"class":264},[212,78810,78812],{"className":251,"code":78811,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Vibrance', props: { intensity: 0 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,78813,78814,78824,78828,78842,78846,78859,78867,78871,78875],{"__ignoreMap":178},[220,78815,78816,78818,78820,78822],{"class":222,"line":223},[220,78817,261],{"class":260},[220,78819,11512],{"class":264},[220,78821,268],{"class":260},[220,78823,4007],{"class":230},[220,78825,78826],{"class":222,"line":179},[220,78827,647],{"emptyLinePlaceholder":194},[220,78829,78830,78832,78834,78836,78838,78840],{"class":222,"line":389},[220,78831,1735],{"class":260},[220,78833,1738],{"class":420},[220,78835,1741],{"class":260},[220,78837,1744],{"class":260},[220,78839,1747],{"class":226},[220,78841,1750],{"class":264},[220,78843,78844],{"class":222,"line":399},[220,78845,1765],{"class":264},[220,78847,78848,78850,78853,78855,78857],{"class":222,"line":644},[220,78849,1770],{"class":264},[220,78851,78852],{"class":230},"'Vibrance'",[220,78854,32203],{"class":264},[220,78856,8673],{"class":420},[220,78858,7546],{"class":264},[220,78860,78861,78863,78865],{"class":222,"line":650},[220,78862,7014],{"class":264},[220,78864,3206],{"class":230},[220,78866,2465],{"class":264},[220,78868,78869],{"class":222,"line":656},[220,78870,7031],{"class":264},[220,78872,78873],{"class":222,"line":673},[220,78874,1787],{"class":264},[220,78876,78877],{"class":222,"line":682},[220,78878,1792],{"class":264},[1504,78880,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78882},[78883,78884],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":78559,"description":78567},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":78891,"title":78892,"body":78893,"category":33063,"componentType":25877,"description":78900,"extension":191,"meta":79085,"navigation":194,"path":79086,"requiresChild":32530,"seo":79087,"stem":79088,"__hash__":79089},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":78894,"toc":79081},[78895,78898,78901,78903,78905,78908,78910,79079],[11,78896,78892],{"id":78897},"videotexture",[15,78899,78900],{},"Display a video with customizable playback and object-fit modes",[31911,78902],{"component":78892},[23,78904,31915],{"id":26533},[31917,78906],{":props":78907},"[{\"name\":\"url\",\"type\":\"string\",\"default\":\"https:\u002F\u002Fshaders.com\u002Fsample.mp4\",\"description\":\"Upload a video or provide a URL\"},{\"name\":\"objectFit\",\"type\":\"\\\"cover\\\" | \\\"contain\\\" | \\\"fill\\\" | \\\"scale-down\\\"\",\"default\":\"fill\",\"description\":\"How the video should be sized within the viewport\"},{\"name\":\"loop\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Loop the video playback\"}]",[23,78909,31923],{"id":31922},[246,78911,78912,78941,78969,78997,79025],{":tabs":1557},[212,78913,78915],{"className":334,"code":78914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,78916,78917,78925,78933],{"__ignoreMap":178},[220,78918,78919,78921,78923],{"class":222,"line":223},[220,78920,343],{"class":264},[220,78922,347],{"class":346},[220,78924,359],{"class":264},[220,78926,78927,78929,78931],{"class":222,"line":179},[220,78928,364],{"class":264},[220,78930,78892],{"class":346},[220,78932,386],{"class":264},[220,78934,78935,78937,78939],{"class":222,"line":389},[220,78936,402],{"class":264},[220,78938,347],{"class":346},[220,78940,359],{"class":264},[212,78942,78943],{"className":409,"code":78914,"language":411,"meta":178,"style":178},[99,78944,78945,78953,78961],{"__ignoreMap":178},[220,78946,78947,78949,78951],{"class":222,"line":223},[220,78948,343],{"class":264},[220,78950,347],{"class":420},[220,78952,359],{"class":264},[220,78954,78955,78957,78959],{"class":222,"line":179},[220,78956,364],{"class":264},[220,78958,78892],{"class":420},[220,78960,386],{"class":264},[220,78962,78963,78965,78967],{"class":222,"line":389},[220,78964,402],{"class":264},[220,78966,347],{"class":420},[220,78968,359],{"class":264},[212,78970,78971],{"className":2844,"code":78914,"language":2846,"meta":178,"style":178},[99,78972,78973,78981,78989],{"__ignoreMap":178},[220,78974,78975,78977,78979],{"class":222,"line":223},[220,78976,343],{"class":264},[220,78978,347],{"class":420},[220,78980,359],{"class":264},[220,78982,78983,78985,78987],{"class":222,"line":179},[220,78984,364],{"class":264},[220,78986,78892],{"class":420},[220,78988,386],{"class":264},[220,78990,78991,78993,78995],{"class":222,"line":389},[220,78992,402],{"class":264},[220,78994,347],{"class":420},[220,78996,359],{"class":264},[212,78998,78999],{"className":468,"code":78914,"language":469,"meta":178,"style":178},[99,79000,79001,79009,79017],{"__ignoreMap":178},[220,79002,79003,79005,79007],{"class":222,"line":223},[220,79004,343],{"class":264},[220,79006,347],{"class":420},[220,79008,359],{"class":264},[220,79010,79011,79013,79015],{"class":222,"line":179},[220,79012,364],{"class":264},[220,79014,78892],{"class":420},[220,79016,386],{"class":264},[220,79018,79019,79021,79023],{"class":222,"line":389},[220,79020,402],{"class":264},[220,79022,347],{"class":420},[220,79024,359],{"class":264},[212,79026,79028],{"className":251,"code":79027,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VideoTexture', props: {} }\n ]\n})\n",[99,79029,79030,79040,79044,79058,79062,79071,79075],{"__ignoreMap":178},[220,79031,79032,79034,79036,79038],{"class":222,"line":223},[220,79033,261],{"class":260},[220,79035,11512],{"class":264},[220,79037,268],{"class":260},[220,79039,4007],{"class":230},[220,79041,79042],{"class":222,"line":179},[220,79043,647],{"emptyLinePlaceholder":194},[220,79045,79046,79048,79050,79052,79054,79056],{"class":222,"line":389},[220,79047,1735],{"class":260},[220,79049,1738],{"class":420},[220,79051,1741],{"class":260},[220,79053,1744],{"class":260},[220,79055,1747],{"class":226},[220,79057,1750],{"class":264},[220,79059,79060],{"class":222,"line":399},[220,79061,1765],{"class":264},[220,79063,79064,79066,79069],{"class":222,"line":644},[220,79065,1770],{"class":264},[220,79067,79068],{"class":230},"'VideoTexture'",[220,79070,2465],{"class":264},[220,79072,79073],{"class":222,"line":650},[220,79074,1787],{"class":264},[220,79076,79077],{"class":222,"line":656},[220,79078,1792],{"class":264},[1504,79080,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79082},[79083,79084],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":78892,"description":78900},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":79091,"title":79092,"body":79093,"category":32806,"componentType":25883,"description":79100,"extension":191,"meta":79499,"navigation":194,"path":79500,"requiresChild":194,"seo":79501,"stem":79502,"__hash__":79503},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":79094,"toc":79495},[79095,79098,79101,79103,79105,79108,79110,79493],[11,79096,79092],{"id":79097},"vignette",[15,79099,79100],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31911,79102],{"component":79092},[23,79104,31915],{"id":26533},[31917,79106],{":props":79107},"[{\"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,79109,31923],{"id":31922},[246,79111,79112,79184,79263,79337,79415],{":tabs":1557},[212,79113,79115],{"className":334,"code":79114,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n :radius=\"0.5\"\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVignette>\n\u003C\u002FShader>\n",[99,79116,79117,79125,79132,79140,79148,79156,79160,79168,79176],{"__ignoreMap":178},[220,79118,79119,79121,79123],{"class":222,"line":223},[220,79120,343],{"class":264},[220,79122,347],{"class":346},[220,79124,359],{"class":264},[220,79126,79127,79129],{"class":222,"line":179},[220,79128,364],{"class":264},[220,79130,79131],{"class":346},"Vignette\n",[220,79133,79134,79136,79138],{"class":222,"line":389},[220,79135,9635],{"class":226},[220,79137,353],{"class":264},[220,79139,19474],{"class":230},[220,79141,79142,79144,79146],{"class":222,"line":399},[220,79143,17405],{"class":226},[220,79145,353],{"class":264},[220,79147,42158],{"class":230},[220,79149,79150,79152,79154],{"class":222,"line":644},[220,79151,20371],{"class":226},[220,79153,353],{"class":264},[220,79155,36625],{"class":230},[220,79157,79158],{"class":222,"line":650},[220,79159,31959],{"class":264},[220,79161,79162,79164,79166],{"class":222,"line":656},[220,79163,2550],{"class":264},[220,79165,2553],{"class":346},[220,79167,386],{"class":264},[220,79169,79170,79172,79174],{"class":222,"line":673},[220,79171,2567],{"class":264},[220,79173,79092],{"class":346},[220,79175,359],{"class":264},[220,79177,79178,79180,79182],{"class":222,"line":682},[220,79179,402],{"class":264},[220,79181,347],{"class":346},[220,79183,359],{"class":264},[212,79185,79187],{"className":409,"code":79186,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n radius={0.5}\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FVignette>\n\u003C\u002FShader>\n",[99,79188,79189,79197,79203,79211,79223,79235,79239,79247,79255],{"__ignoreMap":178},[220,79190,79191,79193,79195],{"class":222,"line":223},[220,79192,343],{"class":264},[220,79194,347],{"class":420},[220,79196,359],{"class":264},[220,79198,79199,79201],{"class":222,"line":179},[220,79200,364],{"class":264},[220,79202,79131],{"class":420},[220,79204,79205,79207,79209],{"class":222,"line":389},[220,79206,9635],{"class":226},[220,79208,353],{"class":260},[220,79210,19474],{"class":230},[220,79212,79213,79215,79217,79219,79221],{"class":222,"line":399},[220,79214,9645],{"class":226},[220,79216,353],{"class":260},[220,79218,743],{"class":264},[220,79220,7754],{"class":420},[220,79222,749],{"class":264},[220,79224,79225,79227,79229,79231,79233],{"class":222,"line":644},[220,79226,20482],{"class":226},[220,79228,353],{"class":260},[220,79230,743],{"class":264},[220,79232,8677],{"class":420},[220,79234,749],{"class":264},[220,79236,79237],{"class":222,"line":650},[220,79238,31959],{"class":264},[220,79240,79241,79243,79245],{"class":222,"line":656},[220,79242,2550],{"class":264},[220,79244,2553],{"class":420},[220,79246,386],{"class":264},[220,79248,79249,79251,79253],{"class":222,"line":673},[220,79250,2567],{"class":264},[220,79252,79092],{"class":420},[220,79254,359],{"class":264},[220,79256,79257,79259,79261],{"class":222,"line":682},[220,79258,402],{"class":264},[220,79260,347],{"class":420},[220,79262,359],{"class":264},[212,79264,79265],{"className":2844,"code":79186,"language":2846,"meta":178,"style":178},[99,79266,79267,79275,79281,79289,79299,79309,79313,79321,79329],{"__ignoreMap":178},[220,79268,79269,79271,79273],{"class":222,"line":223},[220,79270,343],{"class":264},[220,79272,347],{"class":420},[220,79274,359],{"class":264},[220,79276,79277,79279],{"class":222,"line":179},[220,79278,364],{"class":264},[220,79280,79131],{"class":420},[220,79282,79283,79285,79287],{"class":222,"line":389},[220,79284,9635],{"class":226},[220,79286,353],{"class":264},[220,79288,19474],{"class":230},[220,79290,79291,79293,79295,79297],{"class":222,"line":399},[220,79292,9645],{"class":226},[220,79294,29871],{"class":264},[220,79296,7754],{"class":420},[220,79298,749],{"class":264},[220,79300,79301,79303,79305,79307],{"class":222,"line":644},[220,79302,20482],{"class":226},[220,79304,29871],{"class":264},[220,79306,8677],{"class":420},[220,79308,749],{"class":264},[220,79310,79311],{"class":222,"line":650},[220,79312,31959],{"class":264},[220,79314,79315,79317,79319],{"class":222,"line":656},[220,79316,2550],{"class":264},[220,79318,2553],{"class":420},[220,79320,386],{"class":264},[220,79322,79323,79325,79327],{"class":222,"line":673},[220,79324,2567],{"class":264},[220,79326,79092],{"class":420},[220,79328,359],{"class":264},[220,79330,79331,79333,79335],{"class":222,"line":682},[220,79332,402],{"class":264},[220,79334,347],{"class":420},[220,79336,359],{"class":264},[212,79338,79339],{"className":468,"code":79186,"language":469,"meta":178,"style":178},[99,79340,79341,79349,79355,79363,79375,79387,79391,79399,79407],{"__ignoreMap":178},[220,79342,79343,79345,79347],{"class":222,"line":223},[220,79344,343],{"class":264},[220,79346,347],{"class":420},[220,79348,359],{"class":264},[220,79350,79351,79353],{"class":222,"line":179},[220,79352,364],{"class":264},[220,79354,79131],{"class":420},[220,79356,79357,79359,79361],{"class":222,"line":389},[220,79358,9635],{"class":226},[220,79360,353],{"class":260},[220,79362,19474],{"class":230},[220,79364,79365,79367,79369,79371,79373],{"class":222,"line":399},[220,79366,9645],{"class":226},[220,79368,353],{"class":260},[220,79370,743],{"class":264},[220,79372,7754],{"class":420},[220,79374,749],{"class":264},[220,79376,79377,79379,79381,79383,79385],{"class":222,"line":644},[220,79378,20482],{"class":226},[220,79380,353],{"class":260},[220,79382,743],{"class":264},[220,79384,8677],{"class":420},[220,79386,749],{"class":264},[220,79388,79389],{"class":222,"line":650},[220,79390,31959],{"class":264},[220,79392,79393,79395,79397],{"class":222,"line":656},[220,79394,2550],{"class":264},[220,79396,2553],{"class":420},[220,79398,386],{"class":264},[220,79400,79401,79403,79405],{"class":222,"line":673},[220,79402,2567],{"class":264},[220,79404,79092],{"class":420},[220,79406,359],{"class":264},[220,79408,79409,79411,79413],{"class":222,"line":682},[220,79410,402],{"class":264},[220,79412,347],{"class":420},[220,79414,359],{"class":264},[212,79416,79418],{"className":251,"code":79417,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\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",[99,79419,79420,79430,79434,79448,79452,79473,79481,79485,79489],{"__ignoreMap":178},[220,79421,79422,79424,79426,79428],{"class":222,"line":223},[220,79423,261],{"class":260},[220,79425,11512],{"class":264},[220,79427,268],{"class":260},[220,79429,4007],{"class":230},[220,79431,79432],{"class":222,"line":179},[220,79433,647],{"emptyLinePlaceholder":194},[220,79435,79436,79438,79440,79442,79444,79446],{"class":222,"line":389},[220,79437,1735],{"class":260},[220,79439,1738],{"class":420},[220,79441,1741],{"class":260},[220,79443,1744],{"class":260},[220,79445,1747],{"class":226},[220,79447,1750],{"class":264},[220,79449,79450],{"class":222,"line":399},[220,79451,1765],{"class":264},[220,79453,79454,79456,79459,79461,79463,79465,79467,79469,79471],{"class":222,"line":644},[220,79455,1770],{"class":264},[220,79457,79458],{"class":230},"'Vignette'",[220,79460,1776],{"class":264},[220,79462,20034],{"class":230},[220,79464,6566],{"class":264},[220,79466,7754],{"class":420},[220,79468,45003],{"class":264},[220,79470,8677],{"class":420},[220,79472,7546],{"class":264},[220,79474,79475,79477,79479],{"class":222,"line":650},[220,79476,7014],{"class":264},[220,79478,3206],{"class":230},[220,79480,2465],{"class":264},[220,79482,79483],{"class":222,"line":656},[220,79484,7031],{"class":264},[220,79486,79487],{"class":222,"line":673},[220,79488,1787],{"class":264},[220,79490,79491],{"class":222,"line":682},[220,79492,1792],{"class":264},[1504,79494,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79496},[79497,79498],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":79092,"description":79100},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":79505,"title":79506,"body":79507,"category":33063,"componentType":25877,"description":79514,"extension":191,"meta":79699,"navigation":194,"path":79700,"requiresChild":32530,"seo":79701,"stem":79702,"__hash__":79703},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":79508,"toc":79695},[79509,79512,79515,79517,79519,79522,79524,79693],[11,79510,79506],{"id":79511},"voronoi",[15,79513,79514],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31911,79516],{"component":79506},[23,79518,31915],{"id":26533},[31917,79520],{":props":79521},"[{\"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\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"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\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,79523,31923],{"id":31922},[246,79525,79526,79555,79583,79611,79639],{":tabs":1557},[212,79527,79529],{"className":334,"code":79528,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,79530,79531,79539,79547],{"__ignoreMap":178},[220,79532,79533,79535,79537],{"class":222,"line":223},[220,79534,343],{"class":264},[220,79536,347],{"class":346},[220,79538,359],{"class":264},[220,79540,79541,79543,79545],{"class":222,"line":179},[220,79542,364],{"class":264},[220,79544,79506],{"class":346},[220,79546,386],{"class":264},[220,79548,79549,79551,79553],{"class":222,"line":389},[220,79550,402],{"class":264},[220,79552,347],{"class":346},[220,79554,359],{"class":264},[212,79556,79557],{"className":409,"code":79528,"language":411,"meta":178,"style":178},[99,79558,79559,79567,79575],{"__ignoreMap":178},[220,79560,79561,79563,79565],{"class":222,"line":223},[220,79562,343],{"class":264},[220,79564,347],{"class":420},[220,79566,359],{"class":264},[220,79568,79569,79571,79573],{"class":222,"line":179},[220,79570,364],{"class":264},[220,79572,79506],{"class":420},[220,79574,386],{"class":264},[220,79576,79577,79579,79581],{"class":222,"line":389},[220,79578,402],{"class":264},[220,79580,347],{"class":420},[220,79582,359],{"class":264},[212,79584,79585],{"className":2844,"code":79528,"language":2846,"meta":178,"style":178},[99,79586,79587,79595,79603],{"__ignoreMap":178},[220,79588,79589,79591,79593],{"class":222,"line":223},[220,79590,343],{"class":264},[220,79592,347],{"class":420},[220,79594,359],{"class":264},[220,79596,79597,79599,79601],{"class":222,"line":179},[220,79598,364],{"class":264},[220,79600,79506],{"class":420},[220,79602,386],{"class":264},[220,79604,79605,79607,79609],{"class":222,"line":389},[220,79606,402],{"class":264},[220,79608,347],{"class":420},[220,79610,359],{"class":264},[212,79612,79613],{"className":468,"code":79528,"language":469,"meta":178,"style":178},[99,79614,79615,79623,79631],{"__ignoreMap":178},[220,79616,79617,79619,79621],{"class":222,"line":223},[220,79618,343],{"class":264},[220,79620,347],{"class":420},[220,79622,359],{"class":264},[220,79624,79625,79627,79629],{"class":222,"line":179},[220,79626,364],{"class":264},[220,79628,79506],{"class":420},[220,79630,386],{"class":264},[220,79632,79633,79635,79637],{"class":222,"line":389},[220,79634,402],{"class":264},[220,79636,347],{"class":420},[220,79638,359],{"class":264},[212,79640,79642],{"className":251,"code":79641,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Voronoi', props: {} }\n ]\n})\n",[99,79643,79644,79654,79658,79672,79676,79685,79689],{"__ignoreMap":178},[220,79645,79646,79648,79650,79652],{"class":222,"line":223},[220,79647,261],{"class":260},[220,79649,11512],{"class":264},[220,79651,268],{"class":260},[220,79653,4007],{"class":230},[220,79655,79656],{"class":222,"line":179},[220,79657,647],{"emptyLinePlaceholder":194},[220,79659,79660,79662,79664,79666,79668,79670],{"class":222,"line":389},[220,79661,1735],{"class":260},[220,79663,1738],{"class":420},[220,79665,1741],{"class":260},[220,79667,1744],{"class":260},[220,79669,1747],{"class":226},[220,79671,1750],{"class":264},[220,79673,79674],{"class":222,"line":399},[220,79675,1765],{"class":264},[220,79677,79678,79680,79683],{"class":222,"line":644},[220,79679,1770],{"class":264},[220,79681,79682],{"class":230},"'Voronoi'",[220,79684,2465],{"class":264},[220,79686,79687],{"class":222,"line":650},[220,79688,1787],{"class":264},[220,79690,79691],{"class":222,"line":656},[220,79692,1792],{"class":264},[1504,79694,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79696},[79697,79698],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":79506,"description":79514},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":79705,"title":79706,"body":79707,"category":36569,"componentType":25877,"description":79714,"extension":191,"meta":79899,"navigation":194,"path":79900,"requiresChild":32530,"seo":79901,"stem":79902,"__hash__":79903},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":79708,"toc":79895},[79709,79712,79715,79717,79719,79722,79724,79893],[11,79710,79706],{"id":79711},"water",[15,79713,79714],{},"Translucent water — a refractive, light-absorbing body that deepens to its colour with thickness, wrapped in a wind-driven wave surface that reflects a procedural sky, with Fresnel-bright grazing edges and foam breaking on the crests and shoreline",[31911,79716],{"component":79706},[23,79718,31915],{"id":26533},[31917,79720],{":props":79721},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the water shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the water shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the water shape in degrees\"},{\"name\":\"waterColor\",\"type\":\"string\",\"default\":\"#00bfeb\",\"description\":\"The colour the water saturates toward with depth\"},{\"name\":\"clarity\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How much of the reflected sky transmits through the body\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"5\",\"description\":\"How quickly the water darkens and saturates toward its colour with thickness\"},{\"name\":\"shallows\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness of the thin shallow water at the edges — high fades the rim to light translucent water, low keeps the edges close to the deep water colour\"},{\"name\":\"caustics\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Intensity of the light caustics bubbling up through the body — bright veins of focused light churning inside the water\"},{\"name\":\"causticScale\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Size of the caustic veins — higher = finer, busier light patterns inside the body\"},{\"name\":\"choppiness\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Height of the wind-driven waves — the depth of the folds that bend the reflection\"},{\"name\":\"waveScale\",\"type\":\"number\",\"default\":\"3.5\",\"description\":\"Scale of the wave fronts — higher = smaller, busier ripples\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Swirl of the flow — domain-warps the wave fronts into curling eddies\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the rolling waves. 0 pauses the surface.\"},{\"name\":\"reflection\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the reflected sky across the surface\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the reflected sky — spins where the bright sky and sun fall\"},{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Tightness of the sun glint and reflected sun\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Direction of the sun, in degrees — drives the glint and where the sun reflects\"},{\"name\":\"foam\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"White foam breaking on the wave crests and along the shoreline edge\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"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](\u002Fdocs\u002Fguide\u002Fshape-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](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,79723,31923],{"id":31922},[246,79725,79726,79755,79783,79811,79839],{":tabs":1557},[212,79727,79729],{"className":334,"code":79728,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,79730,79731,79739,79747],{"__ignoreMap":178},[220,79732,79733,79735,79737],{"class":222,"line":223},[220,79734,343],{"class":264},[220,79736,347],{"class":346},[220,79738,359],{"class":264},[220,79740,79741,79743,79745],{"class":222,"line":179},[220,79742,364],{"class":264},[220,79744,79706],{"class":346},[220,79746,386],{"class":264},[220,79748,79749,79751,79753],{"class":222,"line":389},[220,79750,402],{"class":264},[220,79752,347],{"class":346},[220,79754,359],{"class":264},[212,79756,79757],{"className":409,"code":79728,"language":411,"meta":178,"style":178},[99,79758,79759,79767,79775],{"__ignoreMap":178},[220,79760,79761,79763,79765],{"class":222,"line":223},[220,79762,343],{"class":264},[220,79764,347],{"class":420},[220,79766,359],{"class":264},[220,79768,79769,79771,79773],{"class":222,"line":179},[220,79770,364],{"class":264},[220,79772,79706],{"class":420},[220,79774,386],{"class":264},[220,79776,79777,79779,79781],{"class":222,"line":389},[220,79778,402],{"class":264},[220,79780,347],{"class":420},[220,79782,359],{"class":264},[212,79784,79785],{"className":2844,"code":79728,"language":2846,"meta":178,"style":178},[99,79786,79787,79795,79803],{"__ignoreMap":178},[220,79788,79789,79791,79793],{"class":222,"line":223},[220,79790,343],{"class":264},[220,79792,347],{"class":420},[220,79794,359],{"class":264},[220,79796,79797,79799,79801],{"class":222,"line":179},[220,79798,364],{"class":264},[220,79800,79706],{"class":420},[220,79802,386],{"class":264},[220,79804,79805,79807,79809],{"class":222,"line":389},[220,79806,402],{"class":264},[220,79808,347],{"class":420},[220,79810,359],{"class":264},[212,79812,79813],{"className":468,"code":79728,"language":469,"meta":178,"style":178},[99,79814,79815,79823,79831],{"__ignoreMap":178},[220,79816,79817,79819,79821],{"class":222,"line":223},[220,79818,343],{"class":264},[220,79820,347],{"class":420},[220,79822,359],{"class":264},[220,79824,79825,79827,79829],{"class":222,"line":179},[220,79826,364],{"class":264},[220,79828,79706],{"class":420},[220,79830,386],{"class":264},[220,79832,79833,79835,79837],{"class":222,"line":389},[220,79834,402],{"class":264},[220,79836,347],{"class":420},[220,79838,359],{"class":264},[212,79840,79842],{"className":251,"code":79841,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Water', props: {} }\n ]\n})\n",[99,79843,79844,79854,79858,79872,79876,79885,79889],{"__ignoreMap":178},[220,79845,79846,79848,79850,79852],{"class":222,"line":223},[220,79847,261],{"class":260},[220,79849,11512],{"class":264},[220,79851,268],{"class":260},[220,79853,4007],{"class":230},[220,79855,79856],{"class":222,"line":179},[220,79857,647],{"emptyLinePlaceholder":194},[220,79859,79860,79862,79864,79866,79868,79870],{"class":222,"line":389},[220,79861,1735],{"class":260},[220,79863,1738],{"class":420},[220,79865,1741],{"class":260},[220,79867,1744],{"class":260},[220,79869,1747],{"class":226},[220,79871,1750],{"class":264},[220,79873,79874],{"class":222,"line":399},[220,79875,1765],{"class":264},[220,79877,79878,79880,79883],{"class":222,"line":644},[220,79879,1770],{"class":264},[220,79881,79882],{"class":230},"'Water'",[220,79884,2465],{"class":264},[220,79886,79887],{"class":222,"line":650},[220,79888,1787],{"class":264},[220,79890,79891],{"class":222,"line":656},[220,79892,1792],{"class":264},[1504,79894,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":79896},[79897,79898],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":79706,"description":79714},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":79905,"title":79906,"body":79907,"category":32806,"componentType":25883,"description":79914,"extension":191,"meta":80231,"navigation":194,"path":80232,"requiresChild":194,"seo":80233,"stem":80234,"__hash__":80235},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":79908,"toc":80227},[79909,79912,79915,79917,79919,79922,79924,80225],[11,79910,79906],{"id":79911},"watercolor",[15,79913,79914],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31911,79916],{"component":79906},[23,79918,31915],{"id":26533},[31917,79920],{":props":79921},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Brush size — radius of the painterly flattening\"},{\"name\":\"bleed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Amount the pigment bleeds and wobbles past hard edges\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blend between the original image (0) and the full watercolor effect (1)\"},{\"name\":\"paper\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Strength of the paper grain the pigment settles into\"},{\"name\":\"paperColor\",\"type\":\"string\",\"default\":\"#fbf7ec\",\"description\":\"Tint of the paper grain\"}]",[23,79923,31923],{"id":31922},[246,79925,79926,79982,80041,80097,80155],{":tabs":1557},[212,79927,79929],{"className":334,"code":79928,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79930,79931,79939,79946,79954,79958,79966,79974],{"__ignoreMap":178},[220,79932,79933,79935,79937],{"class":222,"line":223},[220,79934,343],{"class":264},[220,79936,347],{"class":346},[220,79938,359],{"class":264},[220,79940,79941,79943],{"class":222,"line":179},[220,79942,364],{"class":264},[220,79944,79945],{"class":346},"Watercolor\n",[220,79947,79948,79950,79952],{"class":222,"line":389},[220,79949,17405],{"class":226},[220,79951,353],{"class":264},[220,79953,38669],{"class":230},[220,79955,79956],{"class":222,"line":399},[220,79957,31959],{"class":264},[220,79959,79960,79962,79964],{"class":222,"line":644},[220,79961,2550],{"class":264},[220,79963,2553],{"class":346},[220,79965,386],{"class":264},[220,79967,79968,79970,79972],{"class":222,"line":650},[220,79969,2567],{"class":264},[220,79971,79906],{"class":346},[220,79973,359],{"class":264},[220,79975,79976,79978,79980],{"class":222,"line":656},[220,79977,402],{"class":264},[220,79979,347],{"class":346},[220,79981,359],{"class":264},[212,79983,79985],{"className":409,"code":79984,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79986,79987,79995,80001,80013,80017,80025,80033],{"__ignoreMap":178},[220,79988,79989,79991,79993],{"class":222,"line":223},[220,79990,343],{"class":264},[220,79992,347],{"class":420},[220,79994,359],{"class":264},[220,79996,79997,79999],{"class":222,"line":179},[220,79998,364],{"class":264},[220,80000,79945],{"class":420},[220,80002,80003,80005,80007,80009,80011],{"class":222,"line":389},[220,80004,9645],{"class":226},[220,80006,353],{"class":260},[220,80008,743],{"class":264},[220,80010,38723],{"class":420},[220,80012,749],{"class":264},[220,80014,80015],{"class":222,"line":399},[220,80016,31959],{"class":264},[220,80018,80019,80021,80023],{"class":222,"line":644},[220,80020,2550],{"class":264},[220,80022,2553],{"class":420},[220,80024,386],{"class":264},[220,80026,80027,80029,80031],{"class":222,"line":650},[220,80028,2567],{"class":264},[220,80030,79906],{"class":420},[220,80032,359],{"class":264},[220,80034,80035,80037,80039],{"class":222,"line":656},[220,80036,402],{"class":264},[220,80038,347],{"class":420},[220,80040,359],{"class":264},[212,80042,80043],{"className":2844,"code":79984,"language":2846,"meta":178,"style":178},[99,80044,80045,80053,80059,80069,80073,80081,80089],{"__ignoreMap":178},[220,80046,80047,80049,80051],{"class":222,"line":223},[220,80048,343],{"class":264},[220,80050,347],{"class":420},[220,80052,359],{"class":264},[220,80054,80055,80057],{"class":222,"line":179},[220,80056,364],{"class":264},[220,80058,79945],{"class":420},[220,80060,80061,80063,80065,80067],{"class":222,"line":389},[220,80062,9645],{"class":226},[220,80064,29871],{"class":264},[220,80066,38723],{"class":420},[220,80068,749],{"class":264},[220,80070,80071],{"class":222,"line":399},[220,80072,31959],{"class":264},[220,80074,80075,80077,80079],{"class":222,"line":644},[220,80076,2550],{"class":264},[220,80078,2553],{"class":420},[220,80080,386],{"class":264},[220,80082,80083,80085,80087],{"class":222,"line":650},[220,80084,2567],{"class":264},[220,80086,79906],{"class":420},[220,80088,359],{"class":264},[220,80090,80091,80093,80095],{"class":222,"line":656},[220,80092,402],{"class":264},[220,80094,347],{"class":420},[220,80096,359],{"class":264},[212,80098,80099],{"className":468,"code":79984,"language":469,"meta":178,"style":178},[99,80100,80101,80109,80115,80127,80131,80139,80147],{"__ignoreMap":178},[220,80102,80103,80105,80107],{"class":222,"line":223},[220,80104,343],{"class":264},[220,80106,347],{"class":420},[220,80108,359],{"class":264},[220,80110,80111,80113],{"class":222,"line":179},[220,80112,364],{"class":264},[220,80114,79945],{"class":420},[220,80116,80117,80119,80121,80123,80125],{"class":222,"line":389},[220,80118,9645],{"class":226},[220,80120,353],{"class":260},[220,80122,743],{"class":264},[220,80124,38723],{"class":420},[220,80126,749],{"class":264},[220,80128,80129],{"class":222,"line":399},[220,80130,31959],{"class":264},[220,80132,80133,80135,80137],{"class":222,"line":644},[220,80134,2550],{"class":264},[220,80136,2553],{"class":420},[220,80138,386],{"class":264},[220,80140,80141,80143,80145],{"class":222,"line":650},[220,80142,2567],{"class":264},[220,80144,79906],{"class":420},[220,80146,359],{"class":264},[220,80148,80149,80151,80153],{"class":222,"line":656},[220,80150,402],{"class":264},[220,80152,347],{"class":420},[220,80154,359],{"class":264},[212,80156,80158],{"className":251,"code":80157,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Watercolor', props: { radius: 3 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,80159,80160,80170,80174,80188,80192,80205,80213,80217,80221],{"__ignoreMap":178},[220,80161,80162,80164,80166,80168],{"class":222,"line":223},[220,80163,261],{"class":260},[220,80165,11512],{"class":264},[220,80167,268],{"class":260},[220,80169,4007],{"class":230},[220,80171,80172],{"class":222,"line":179},[220,80173,647],{"emptyLinePlaceholder":194},[220,80175,80176,80178,80180,80182,80184,80186],{"class":222,"line":389},[220,80177,1735],{"class":260},[220,80179,1738],{"class":420},[220,80181,1741],{"class":260},[220,80183,1744],{"class":260},[220,80185,1747],{"class":226},[220,80187,1750],{"class":264},[220,80189,80190],{"class":222,"line":399},[220,80191,1765],{"class":264},[220,80193,80194,80196,80199,80201,80203],{"class":222,"line":644},[220,80195,1770],{"class":264},[220,80197,80198],{"class":230},"'Watercolor'",[220,80200,7541],{"class":264},[220,80202,38723],{"class":420},[220,80204,7546],{"class":264},[220,80206,80207,80209,80211],{"class":222,"line":650},[220,80208,7014],{"class":264},[220,80210,3206],{"class":230},[220,80212,2465],{"class":264},[220,80214,80215],{"class":222,"line":656},[220,80216,7031],{"class":264},[220,80218,80219],{"class":222,"line":673},[220,80220,1787],{"class":264},[220,80222,80223],{"class":222,"line":682},[220,80224,1792],{"class":264},[1504,80226,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80228},[80229,80230],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":79906,"description":79914},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":80237,"title":80238,"body":80239,"category":33396,"componentType":25883,"description":80246,"extension":191,"meta":80507,"navigation":194,"path":80508,"requiresChild":194,"seo":80509,"stem":80510,"__hash__":80511},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":80240,"toc":80503},[80241,80244,80247,80249,80251,80254,80256,80501],[11,80242,80238],{"id":80243},"wavedistortion",[15,80245,80246],{},"Wave-based distortion with multiple waveform types",[31911,80248],{"component":80238},[23,80250,31915],{"id":26533},[31917,80252],{":props":80253},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Distortion intensity\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of bends\u002Fwaves\"},{\"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,80255,31923],{"id":31922},[246,80257,80258,80303,80347,80391,80435],{":tabs":1557},[212,80259,80261],{"className":334,"code":80260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,80262,80263,80271,80279,80287,80295],{"__ignoreMap":178},[220,80264,80265,80267,80269],{"class":222,"line":223},[220,80266,343],{"class":264},[220,80268,347],{"class":346},[220,80270,359],{"class":264},[220,80272,80273,80275,80277],{"class":222,"line":179},[220,80274,364],{"class":264},[220,80276,80238],{"class":346},[220,80278,359],{"class":264},[220,80280,80281,80283,80285],{"class":222,"line":389},[220,80282,2550],{"class":264},[220,80284,2553],{"class":346},[220,80286,386],{"class":264},[220,80288,80289,80291,80293],{"class":222,"line":399},[220,80290,2567],{"class":264},[220,80292,80238],{"class":346},[220,80294,359],{"class":264},[220,80296,80297,80299,80301],{"class":222,"line":644},[220,80298,402],{"class":264},[220,80300,347],{"class":346},[220,80302,359],{"class":264},[212,80304,80305],{"className":409,"code":80260,"language":411,"meta":178,"style":178},[99,80306,80307,80315,80323,80331,80339],{"__ignoreMap":178},[220,80308,80309,80311,80313],{"class":222,"line":223},[220,80310,343],{"class":264},[220,80312,347],{"class":420},[220,80314,359],{"class":264},[220,80316,80317,80319,80321],{"class":222,"line":179},[220,80318,364],{"class":264},[220,80320,80238],{"class":420},[220,80322,359],{"class":264},[220,80324,80325,80327,80329],{"class":222,"line":389},[220,80326,2550],{"class":264},[220,80328,2553],{"class":420},[220,80330,386],{"class":264},[220,80332,80333,80335,80337],{"class":222,"line":399},[220,80334,2567],{"class":264},[220,80336,80238],{"class":420},[220,80338,359],{"class":264},[220,80340,80341,80343,80345],{"class":222,"line":644},[220,80342,402],{"class":264},[220,80344,347],{"class":420},[220,80346,359],{"class":264},[212,80348,80349],{"className":2844,"code":80260,"language":2846,"meta":178,"style":178},[99,80350,80351,80359,80367,80375,80383],{"__ignoreMap":178},[220,80352,80353,80355,80357],{"class":222,"line":223},[220,80354,343],{"class":264},[220,80356,347],{"class":420},[220,80358,359],{"class":264},[220,80360,80361,80363,80365],{"class":222,"line":179},[220,80362,364],{"class":264},[220,80364,80238],{"class":420},[220,80366,359],{"class":264},[220,80368,80369,80371,80373],{"class":222,"line":389},[220,80370,2550],{"class":264},[220,80372,2553],{"class":420},[220,80374,386],{"class":264},[220,80376,80377,80379,80381],{"class":222,"line":399},[220,80378,2567],{"class":264},[220,80380,80238],{"class":420},[220,80382,359],{"class":264},[220,80384,80385,80387,80389],{"class":222,"line":644},[220,80386,402],{"class":264},[220,80388,347],{"class":420},[220,80390,359],{"class":264},[212,80392,80393],{"className":468,"code":80260,"language":469,"meta":178,"style":178},[99,80394,80395,80403,80411,80419,80427],{"__ignoreMap":178},[220,80396,80397,80399,80401],{"class":222,"line":223},[220,80398,343],{"class":264},[220,80400,347],{"class":420},[220,80402,359],{"class":264},[220,80404,80405,80407,80409],{"class":222,"line":179},[220,80406,364],{"class":264},[220,80408,80238],{"class":420},[220,80410,359],{"class":264},[220,80412,80413,80415,80417],{"class":222,"line":389},[220,80414,2550],{"class":264},[220,80416,2553],{"class":420},[220,80418,386],{"class":264},[220,80420,80421,80423,80425],{"class":222,"line":399},[220,80422,2567],{"class":264},[220,80424,80238],{"class":420},[220,80426,359],{"class":264},[220,80428,80429,80431,80433],{"class":222,"line":644},[220,80430,402],{"class":264},[220,80432,347],{"class":420},[220,80434,359],{"class":264},[212,80436,80438],{"className":251,"code":80437,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WaveDistortion', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,80439,80440,80450,80454,80468,80472,80481,80489,80493,80497],{"__ignoreMap":178},[220,80441,80442,80444,80446,80448],{"class":222,"line":223},[220,80443,261],{"class":260},[220,80445,11512],{"class":264},[220,80447,268],{"class":260},[220,80449,4007],{"class":230},[220,80451,80452],{"class":222,"line":179},[220,80453,647],{"emptyLinePlaceholder":194},[220,80455,80456,80458,80460,80462,80464,80466],{"class":222,"line":389},[220,80457,1735],{"class":260},[220,80459,1738],{"class":420},[220,80461,1741],{"class":260},[220,80463,1744],{"class":260},[220,80465,1747],{"class":226},[220,80467,1750],{"class":264},[220,80469,80470],{"class":222,"line":399},[220,80471,1765],{"class":264},[220,80473,80474,80476,80479],{"class":222,"line":644},[220,80475,1770],{"class":264},[220,80477,80478],{"class":230},"'WaveDistortion'",[220,80480,7009],{"class":264},[220,80482,80483,80485,80487],{"class":222,"line":650},[220,80484,7014],{"class":264},[220,80486,3206],{"class":230},[220,80488,2465],{"class":264},[220,80490,80491],{"class":222,"line":656},[220,80492,7031],{"class":264},[220,80494,80495],{"class":222,"line":673},[220,80496,1787],{"class":264},[220,80498,80499],{"class":222,"line":682},[220,80500,1792],{"class":264},[1504,80502,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80504},[80505,80506],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":80238,"description":80246},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":80513,"title":80514,"body":80515,"category":33063,"componentType":25877,"description":80522,"extension":191,"meta":80707,"navigation":194,"path":80708,"requiresChild":32530,"seo":80709,"stem":80710,"__hash__":80711},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":80516,"toc":80703},[80517,80520,80523,80525,80527,80530,80532,80701],[11,80518,80514],{"id":80519},"waveletnoise",[15,80521,80522],{},"Rotating banded wavelets that ripple as they animate",[31911,80524],{"component":80514},[23,80526,31915],{"id":26533},[31917,80528],{":props":80529},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"null\",\"description\":\"Multi-stop gradient colors (overrides Color A \u002F Color B when set)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"1.24\",\"description\":\"Per-octave frequency ratio — higher adds finer wavelet detail\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,80531,31923],{"id":31922},[246,80533,80534,80563,80591,80619,80647],{":tabs":1557},[212,80535,80537],{"className":334,"code":80536,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,80538,80539,80547,80555],{"__ignoreMap":178},[220,80540,80541,80543,80545],{"class":222,"line":223},[220,80542,343],{"class":264},[220,80544,347],{"class":346},[220,80546,359],{"class":264},[220,80548,80549,80551,80553],{"class":222,"line":179},[220,80550,364],{"class":264},[220,80552,80514],{"class":346},[220,80554,386],{"class":264},[220,80556,80557,80559,80561],{"class":222,"line":389},[220,80558,402],{"class":264},[220,80560,347],{"class":346},[220,80562,359],{"class":264},[212,80564,80565],{"className":409,"code":80536,"language":411,"meta":178,"style":178},[99,80566,80567,80575,80583],{"__ignoreMap":178},[220,80568,80569,80571,80573],{"class":222,"line":223},[220,80570,343],{"class":264},[220,80572,347],{"class":420},[220,80574,359],{"class":264},[220,80576,80577,80579,80581],{"class":222,"line":179},[220,80578,364],{"class":264},[220,80580,80514],{"class":420},[220,80582,386],{"class":264},[220,80584,80585,80587,80589],{"class":222,"line":389},[220,80586,402],{"class":264},[220,80588,347],{"class":420},[220,80590,359],{"class":264},[212,80592,80593],{"className":2844,"code":80536,"language":2846,"meta":178,"style":178},[99,80594,80595,80603,80611],{"__ignoreMap":178},[220,80596,80597,80599,80601],{"class":222,"line":223},[220,80598,343],{"class":264},[220,80600,347],{"class":420},[220,80602,359],{"class":264},[220,80604,80605,80607,80609],{"class":222,"line":179},[220,80606,364],{"class":264},[220,80608,80514],{"class":420},[220,80610,386],{"class":264},[220,80612,80613,80615,80617],{"class":222,"line":389},[220,80614,402],{"class":264},[220,80616,347],{"class":420},[220,80618,359],{"class":264},[212,80620,80621],{"className":468,"code":80536,"language":469,"meta":178,"style":178},[99,80622,80623,80631,80639],{"__ignoreMap":178},[220,80624,80625,80627,80629],{"class":222,"line":223},[220,80626,343],{"class":264},[220,80628,347],{"class":420},[220,80630,359],{"class":264},[220,80632,80633,80635,80637],{"class":222,"line":179},[220,80634,364],{"class":264},[220,80636,80514],{"class":420},[220,80638,386],{"class":264},[220,80640,80641,80643,80645],{"class":222,"line":389},[220,80642,402],{"class":264},[220,80644,347],{"class":420},[220,80646,359],{"class":264},[212,80648,80650],{"className":251,"code":80649,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WaveletNoise', props: {} }\n ]\n})\n",[99,80651,80652,80662,80666,80680,80684,80693,80697],{"__ignoreMap":178},[220,80653,80654,80656,80658,80660],{"class":222,"line":223},[220,80655,261],{"class":260},[220,80657,11512],{"class":264},[220,80659,268],{"class":260},[220,80661,4007],{"class":230},[220,80663,80664],{"class":222,"line":179},[220,80665,647],{"emptyLinePlaceholder":194},[220,80667,80668,80670,80672,80674,80676,80678],{"class":222,"line":389},[220,80669,1735],{"class":260},[220,80671,1738],{"class":420},[220,80673,1741],{"class":260},[220,80675,1744],{"class":260},[220,80677,1747],{"class":226},[220,80679,1750],{"class":264},[220,80681,80682],{"class":222,"line":399},[220,80683,1765],{"class":264},[220,80685,80686,80688,80691],{"class":222,"line":644},[220,80687,1770],{"class":264},[220,80689,80690],{"class":230},"'WaveletNoise'",[220,80692,2465],{"class":264},[220,80694,80695],{"class":222,"line":650},[220,80696,1787],{"class":264},[220,80698,80699],{"class":222,"line":656},[220,80700,1792],{"class":264},[1504,80702,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80704},[80705,80706],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":80514,"description":80522},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":80713,"title":80714,"body":80715,"category":33063,"componentType":25877,"description":80722,"extension":191,"meta":80907,"navigation":194,"path":80908,"requiresChild":32530,"seo":80909,"stem":80910,"__hash__":80911},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":80716,"toc":80903},[80717,80720,80723,80725,80727,80730,80732,80901],[11,80718,80714],{"id":80719},"weave",[15,80721,80722],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31911,80724],{"component":80714},[23,80726,31915],{"id":26533},[31917,80728],{":props":80729},"[{\"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,80731,31923],{"id":31922},[246,80733,80734,80763,80791,80819,80847],{":tabs":1557},[212,80735,80737],{"className":334,"code":80736,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,80738,80739,80747,80755],{"__ignoreMap":178},[220,80740,80741,80743,80745],{"class":222,"line":223},[220,80742,343],{"class":264},[220,80744,347],{"class":346},[220,80746,359],{"class":264},[220,80748,80749,80751,80753],{"class":222,"line":179},[220,80750,364],{"class":264},[220,80752,80714],{"class":346},[220,80754,386],{"class":264},[220,80756,80757,80759,80761],{"class":222,"line":389},[220,80758,402],{"class":264},[220,80760,347],{"class":346},[220,80762,359],{"class":264},[212,80764,80765],{"className":409,"code":80736,"language":411,"meta":178,"style":178},[99,80766,80767,80775,80783],{"__ignoreMap":178},[220,80768,80769,80771,80773],{"class":222,"line":223},[220,80770,343],{"class":264},[220,80772,347],{"class":420},[220,80774,359],{"class":264},[220,80776,80777,80779,80781],{"class":222,"line":179},[220,80778,364],{"class":264},[220,80780,80714],{"class":420},[220,80782,386],{"class":264},[220,80784,80785,80787,80789],{"class":222,"line":389},[220,80786,402],{"class":264},[220,80788,347],{"class":420},[220,80790,359],{"class":264},[212,80792,80793],{"className":2844,"code":80736,"language":2846,"meta":178,"style":178},[99,80794,80795,80803,80811],{"__ignoreMap":178},[220,80796,80797,80799,80801],{"class":222,"line":223},[220,80798,343],{"class":264},[220,80800,347],{"class":420},[220,80802,359],{"class":264},[220,80804,80805,80807,80809],{"class":222,"line":179},[220,80806,364],{"class":264},[220,80808,80714],{"class":420},[220,80810,386],{"class":264},[220,80812,80813,80815,80817],{"class":222,"line":389},[220,80814,402],{"class":264},[220,80816,347],{"class":420},[220,80818,359],{"class":264},[212,80820,80821],{"className":468,"code":80736,"language":469,"meta":178,"style":178},[99,80822,80823,80831,80839],{"__ignoreMap":178},[220,80824,80825,80827,80829],{"class":222,"line":223},[220,80826,343],{"class":264},[220,80828,347],{"class":420},[220,80830,359],{"class":264},[220,80832,80833,80835,80837],{"class":222,"line":179},[220,80834,364],{"class":264},[220,80836,80714],{"class":420},[220,80838,386],{"class":264},[220,80840,80841,80843,80845],{"class":222,"line":389},[220,80842,402],{"class":264},[220,80844,347],{"class":420},[220,80846,359],{"class":264},[212,80848,80850],{"className":251,"code":80849,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Weave', props: {} }\n ]\n})\n",[99,80851,80852,80862,80866,80880,80884,80893,80897],{"__ignoreMap":178},[220,80853,80854,80856,80858,80860],{"class":222,"line":223},[220,80855,261],{"class":260},[220,80857,11512],{"class":264},[220,80859,268],{"class":260},[220,80861,4007],{"class":230},[220,80863,80864],{"class":222,"line":179},[220,80865,647],{"emptyLinePlaceholder":194},[220,80867,80868,80870,80872,80874,80876,80878],{"class":222,"line":389},[220,80869,1735],{"class":260},[220,80871,1738],{"class":420},[220,80873,1741],{"class":260},[220,80875,1744],{"class":260},[220,80877,1747],{"class":226},[220,80879,1750],{"class":264},[220,80881,80882],{"class":222,"line":399},[220,80883,1765],{"class":264},[220,80885,80886,80888,80891],{"class":222,"line":644},[220,80887,1770],{"class":264},[220,80889,80890],{"class":230},"'Weave'",[220,80892,2465],{"class":264},[220,80894,80895],{"class":222,"line":650},[220,80896,1787],{"class":264},[220,80898,80899],{"class":222,"line":656},[220,80900,1792],{"class":264},[1504,80902,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":80904},[80905,80906],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":80714,"description":80722},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":80913,"title":80914,"body":80915,"category":33063,"componentType":25877,"description":80922,"extension":191,"meta":81107,"navigation":194,"path":81108,"requiresChild":32530,"seo":81109,"stem":81110,"__hash__":81111},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":80916,"toc":81103},[80917,80920,80923,80925,80927,80930,80932,81101],[11,80918,80914],{"id":80919},"webcamtexture",[15,80921,80922],{},"Display a live webcam feed with customizable object-fit modes",[31911,80924],{"component":80914},[23,80926,31915],{"id":26533},[31917,80928],{":props":80929},"[{\"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,80931,31923],{"id":31922},[246,80933,80934,80963,80991,81019,81047],{":tabs":1557},[212,80935,80937],{"className":334,"code":80936,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,80938,80939,80947,80955],{"__ignoreMap":178},[220,80940,80941,80943,80945],{"class":222,"line":223},[220,80942,343],{"class":264},[220,80944,347],{"class":346},[220,80946,359],{"class":264},[220,80948,80949,80951,80953],{"class":222,"line":179},[220,80950,364],{"class":264},[220,80952,80914],{"class":346},[220,80954,386],{"class":264},[220,80956,80957,80959,80961],{"class":222,"line":389},[220,80958,402],{"class":264},[220,80960,347],{"class":346},[220,80962,359],{"class":264},[212,80964,80965],{"className":409,"code":80936,"language":411,"meta":178,"style":178},[99,80966,80967,80975,80983],{"__ignoreMap":178},[220,80968,80969,80971,80973],{"class":222,"line":223},[220,80970,343],{"class":264},[220,80972,347],{"class":420},[220,80974,359],{"class":264},[220,80976,80977,80979,80981],{"class":222,"line":179},[220,80978,364],{"class":264},[220,80980,80914],{"class":420},[220,80982,386],{"class":264},[220,80984,80985,80987,80989],{"class":222,"line":389},[220,80986,402],{"class":264},[220,80988,347],{"class":420},[220,80990,359],{"class":264},[212,80992,80993],{"className":2844,"code":80936,"language":2846,"meta":178,"style":178},[99,80994,80995,81003,81011],{"__ignoreMap":178},[220,80996,80997,80999,81001],{"class":222,"line":223},[220,80998,343],{"class":264},[220,81000,347],{"class":420},[220,81002,359],{"class":264},[220,81004,81005,81007,81009],{"class":222,"line":179},[220,81006,364],{"class":264},[220,81008,80914],{"class":420},[220,81010,386],{"class":264},[220,81012,81013,81015,81017],{"class":222,"line":389},[220,81014,402],{"class":264},[220,81016,347],{"class":420},[220,81018,359],{"class":264},[212,81020,81021],{"className":468,"code":80936,"language":469,"meta":178,"style":178},[99,81022,81023,81031,81039],{"__ignoreMap":178},[220,81024,81025,81027,81029],{"class":222,"line":223},[220,81026,343],{"class":264},[220,81028,347],{"class":420},[220,81030,359],{"class":264},[220,81032,81033,81035,81037],{"class":222,"line":179},[220,81034,364],{"class":264},[220,81036,80914],{"class":420},[220,81038,386],{"class":264},[220,81040,81041,81043,81045],{"class":222,"line":389},[220,81042,402],{"class":264},[220,81044,347],{"class":420},[220,81046,359],{"class":264},[212,81048,81050],{"className":251,"code":81049,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WebcamTexture', props: {} }\n ]\n})\n",[99,81051,81052,81062,81066,81080,81084,81093,81097],{"__ignoreMap":178},[220,81053,81054,81056,81058,81060],{"class":222,"line":223},[220,81055,261],{"class":260},[220,81057,11512],{"class":264},[220,81059,268],{"class":260},[220,81061,4007],{"class":230},[220,81063,81064],{"class":222,"line":179},[220,81065,647],{"emptyLinePlaceholder":194},[220,81067,81068,81070,81072,81074,81076,81078],{"class":222,"line":389},[220,81069,1735],{"class":260},[220,81071,1738],{"class":420},[220,81073,1741],{"class":260},[220,81075,1744],{"class":260},[220,81077,1747],{"class":226},[220,81079,1750],{"class":264},[220,81081,81082],{"class":222,"line":399},[220,81083,1765],{"class":264},[220,81085,81086,81088,81091],{"class":222,"line":644},[220,81087,1770],{"class":264},[220,81089,81090],{"class":230},"'WebcamTexture'",[220,81092,2465],{"class":264},[220,81094,81095],{"class":222,"line":650},[220,81096,1787],{"class":264},[220,81098,81099],{"class":222,"line":656},[220,81100,1792],{"class":264},[1504,81102,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81104},[81105,81106],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":80914,"description":80922},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":81113,"title":81114,"body":81115,"category":32806,"componentType":25883,"description":81122,"extension":191,"meta":81439,"navigation":194,"path":81440,"requiresChild":194,"seo":81441,"stem":81442,"__hash__":81443},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":81116,"toc":81435},[81117,81120,81123,81125,81127,81130,81132,81433],[11,81118,81114],{"id":81119},"wool",[15,81121,81122],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31911,81124],{"component":81114},[23,81126,31915],{"id":26533},[31917,81128],{":props":81129},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Strength of the relief shading applied to the child content\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Scale of the pattern — lower = larger features, higher = finer grain\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"-0.5\",\"description\":\"Contrast of the texture — negative flattens it into a subtle overlay\"},{\"name\":\"distortion\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Surface distortion — warps the child along the texture like carved relief\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[23,81131,31923],{"id":31922},[246,81133,81134,81190,81249,81305,81363],{":tabs":1557},[212,81135,81137],{"className":334,"code":81136,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWool\n :intensity=\"0.5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWool>\n\u003C\u002FShader>\n",[99,81138,81139,81147,81154,81162,81166,81174,81182],{"__ignoreMap":178},[220,81140,81141,81143,81145],{"class":222,"line":223},[220,81142,343],{"class":264},[220,81144,347],{"class":346},[220,81146,359],{"class":264},[220,81148,81149,81151],{"class":222,"line":179},[220,81150,364],{"class":264},[220,81152,81153],{"class":346},"Wool\n",[220,81155,81156,81158,81160],{"class":222,"line":389},[220,81157,20371],{"class":226},[220,81159,353],{"class":264},[220,81161,42158],{"class":230},[220,81163,81164],{"class":222,"line":399},[220,81165,31959],{"class":264},[220,81167,81168,81170,81172],{"class":222,"line":644},[220,81169,2550],{"class":264},[220,81171,2553],{"class":346},[220,81173,386],{"class":264},[220,81175,81176,81178,81180],{"class":222,"line":650},[220,81177,2567],{"class":264},[220,81179,81114],{"class":346},[220,81181,359],{"class":264},[220,81183,81184,81186,81188],{"class":222,"line":656},[220,81185,402],{"class":264},[220,81187,347],{"class":346},[220,81189,359],{"class":264},[212,81191,81193],{"className":409,"code":81192,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWool\n intensity={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FWool>\n\u003C\u002FShader>\n",[99,81194,81195,81203,81209,81221,81225,81233,81241],{"__ignoreMap":178},[220,81196,81197,81199,81201],{"class":222,"line":223},[220,81198,343],{"class":264},[220,81200,347],{"class":420},[220,81202,359],{"class":264},[220,81204,81205,81207],{"class":222,"line":179},[220,81206,364],{"class":264},[220,81208,81153],{"class":420},[220,81210,81211,81213,81215,81217,81219],{"class":222,"line":389},[220,81212,20482],{"class":226},[220,81214,353],{"class":260},[220,81216,743],{"class":264},[220,81218,7754],{"class":420},[220,81220,749],{"class":264},[220,81222,81223],{"class":222,"line":399},[220,81224,31959],{"class":264},[220,81226,81227,81229,81231],{"class":222,"line":644},[220,81228,2550],{"class":264},[220,81230,2553],{"class":420},[220,81232,386],{"class":264},[220,81234,81235,81237,81239],{"class":222,"line":650},[220,81236,2567],{"class":264},[220,81238,81114],{"class":420},[220,81240,359],{"class":264},[220,81242,81243,81245,81247],{"class":222,"line":656},[220,81244,402],{"class":264},[220,81246,347],{"class":420},[220,81248,359],{"class":264},[212,81250,81251],{"className":2844,"code":81192,"language":2846,"meta":178,"style":178},[99,81252,81253,81261,81267,81277,81281,81289,81297],{"__ignoreMap":178},[220,81254,81255,81257,81259],{"class":222,"line":223},[220,81256,343],{"class":264},[220,81258,347],{"class":420},[220,81260,359],{"class":264},[220,81262,81263,81265],{"class":222,"line":179},[220,81264,364],{"class":264},[220,81266,81153],{"class":420},[220,81268,81269,81271,81273,81275],{"class":222,"line":389},[220,81270,20482],{"class":226},[220,81272,29871],{"class":264},[220,81274,7754],{"class":420},[220,81276,749],{"class":264},[220,81278,81279],{"class":222,"line":399},[220,81280,31959],{"class":264},[220,81282,81283,81285,81287],{"class":222,"line":644},[220,81284,2550],{"class":264},[220,81286,2553],{"class":420},[220,81288,386],{"class":264},[220,81290,81291,81293,81295],{"class":222,"line":650},[220,81292,2567],{"class":264},[220,81294,81114],{"class":420},[220,81296,359],{"class":264},[220,81298,81299,81301,81303],{"class":222,"line":656},[220,81300,402],{"class":264},[220,81302,347],{"class":420},[220,81304,359],{"class":264},[212,81306,81307],{"className":468,"code":81192,"language":469,"meta":178,"style":178},[99,81308,81309,81317,81323,81335,81339,81347,81355],{"__ignoreMap":178},[220,81310,81311,81313,81315],{"class":222,"line":223},[220,81312,343],{"class":264},[220,81314,347],{"class":420},[220,81316,359],{"class":264},[220,81318,81319,81321],{"class":222,"line":179},[220,81320,364],{"class":264},[220,81322,81153],{"class":420},[220,81324,81325,81327,81329,81331,81333],{"class":222,"line":389},[220,81326,20482],{"class":226},[220,81328,353],{"class":260},[220,81330,743],{"class":264},[220,81332,7754],{"class":420},[220,81334,749],{"class":264},[220,81336,81337],{"class":222,"line":399},[220,81338,31959],{"class":264},[220,81340,81341,81343,81345],{"class":222,"line":644},[220,81342,2550],{"class":264},[220,81344,2553],{"class":420},[220,81346,386],{"class":264},[220,81348,81349,81351,81353],{"class":222,"line":650},[220,81350,2567],{"class":264},[220,81352,81114],{"class":420},[220,81354,359],{"class":264},[220,81356,81357,81359,81361],{"class":222,"line":656},[220,81358,402],{"class":264},[220,81360,347],{"class":420},[220,81362,359],{"class":264},[212,81364,81366],{"className":251,"code":81365,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Wool', props: { intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,81367,81368,81378,81382,81396,81400,81413,81421,81425,81429],{"__ignoreMap":178},[220,81369,81370,81372,81374,81376],{"class":222,"line":223},[220,81371,261],{"class":260},[220,81373,11512],{"class":264},[220,81375,268],{"class":260},[220,81377,4007],{"class":230},[220,81379,81380],{"class":222,"line":179},[220,81381,647],{"emptyLinePlaceholder":194},[220,81383,81384,81386,81388,81390,81392,81394],{"class":222,"line":389},[220,81385,1735],{"class":260},[220,81387,1738],{"class":420},[220,81389,1741],{"class":260},[220,81391,1744],{"class":260},[220,81393,1747],{"class":226},[220,81395,1750],{"class":264},[220,81397,81398],{"class":222,"line":399},[220,81399,1765],{"class":264},[220,81401,81402,81404,81407,81409,81411],{"class":222,"line":644},[220,81403,1770],{"class":264},[220,81405,81406],{"class":230},"'Wool'",[220,81408,32203],{"class":264},[220,81410,7754],{"class":420},[220,81412,7546],{"class":264},[220,81414,81415,81417,81419],{"class":222,"line":650},[220,81416,7014],{"class":264},[220,81418,3206],{"class":230},[220,81420,2465],{"class":264},[220,81422,81423],{"class":222,"line":656},[220,81424,7031],{"class":264},[220,81426,81427],{"class":222,"line":673},[220,81428,1787],{"class":264},[220,81430,81431],{"class":222,"line":682},[220,81432,1792],{"class":264},[1504,81434,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81436},[81437,81438],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":81114,"description":81122},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":81445,"title":81446,"body":81447,"category":33063,"componentType":25877,"description":81454,"extension":191,"meta":81639,"navigation":194,"path":81640,"requiresChild":32530,"seo":81641,"stem":81642,"__hash__":81643},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":81448,"toc":81635},[81449,81452,81455,81457,81459,81462,81464,81633],[11,81450,81446],{"id":81451},"worleynoise",[15,81453,81454],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31911,81456],{"component":81446},[23,81458,31915],{"id":26533},[31917,81460],{":props":81461},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color where the noise field is low (typically near cell centers)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color where the noise field is high (typically near cell boundaries)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of cells across the canvas at the base octave\"},{\"name\":\"mode\",\"type\":\"\\\"f1\\\" | \\\"f2\\\" | \\\"f2MinusF1\\\" | \\\"f1PlusF2\\\" | \\\"f1TimesF2\\\"\",\"default\":\"f1\",\"description\":\"Field type. F1 = distance to nearest point. F2 = distance to second-nearest. F2 − F1 emphasises cell boundaries.\"},{\"name\":\"distance\",\"type\":\"\\\"euclidean\\\" | \\\"manhattan\\\" | \\\"chebyshev\\\"\",\"default\":\"euclidean\",\"description\":\"Distance metric. Euclidean = round cells. Manhattan = diamond. Chebyshev = square.\"},{\"name\":\"octaves\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of fractal layers stacked at progressively finer scales\"},{\"name\":\"lacunarity\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale multiplier between octaves (only active when Octaves > 1)\"},{\"name\":\"persistence\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Amplitude multiplier between octaves (only active when Octaves > 1)\"},{\"name\":\"jitter\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much each cell's point drifts inside its cell. 0 = rigid grid (banded look), 1 = fully random.\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Steepness of the gradient between low and high regions\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shifts the gradient midpoint. Negative pulls the field toward Color A, positive toward Color B.\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — shifts the cell pattern without changing its overall structure\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed — how fast each cell's point drifts\"}]",[23,81463,31923],{"id":31922},[246,81465,81466,81495,81523,81551,81579],{":tabs":1557},[212,81467,81469],{"className":334,"code":81468,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,81470,81471,81479,81487],{"__ignoreMap":178},[220,81472,81473,81475,81477],{"class":222,"line":223},[220,81474,343],{"class":264},[220,81476,347],{"class":346},[220,81478,359],{"class":264},[220,81480,81481,81483,81485],{"class":222,"line":179},[220,81482,364],{"class":264},[220,81484,81446],{"class":346},[220,81486,386],{"class":264},[220,81488,81489,81491,81493],{"class":222,"line":389},[220,81490,402],{"class":264},[220,81492,347],{"class":346},[220,81494,359],{"class":264},[212,81496,81497],{"className":409,"code":81468,"language":411,"meta":178,"style":178},[99,81498,81499,81507,81515],{"__ignoreMap":178},[220,81500,81501,81503,81505],{"class":222,"line":223},[220,81502,343],{"class":264},[220,81504,347],{"class":420},[220,81506,359],{"class":264},[220,81508,81509,81511,81513],{"class":222,"line":179},[220,81510,364],{"class":264},[220,81512,81446],{"class":420},[220,81514,386],{"class":264},[220,81516,81517,81519,81521],{"class":222,"line":389},[220,81518,402],{"class":264},[220,81520,347],{"class":420},[220,81522,359],{"class":264},[212,81524,81525],{"className":2844,"code":81468,"language":2846,"meta":178,"style":178},[99,81526,81527,81535,81543],{"__ignoreMap":178},[220,81528,81529,81531,81533],{"class":222,"line":223},[220,81530,343],{"class":264},[220,81532,347],{"class":420},[220,81534,359],{"class":264},[220,81536,81537,81539,81541],{"class":222,"line":179},[220,81538,364],{"class":264},[220,81540,81446],{"class":420},[220,81542,386],{"class":264},[220,81544,81545,81547,81549],{"class":222,"line":389},[220,81546,402],{"class":264},[220,81548,347],{"class":420},[220,81550,359],{"class":264},[212,81552,81553],{"className":468,"code":81468,"language":469,"meta":178,"style":178},[99,81554,81555,81563,81571],{"__ignoreMap":178},[220,81556,81557,81559,81561],{"class":222,"line":223},[220,81558,343],{"class":264},[220,81560,347],{"class":420},[220,81562,359],{"class":264},[220,81564,81565,81567,81569],{"class":222,"line":179},[220,81566,364],{"class":264},[220,81568,81446],{"class":420},[220,81570,386],{"class":264},[220,81572,81573,81575,81577],{"class":222,"line":389},[220,81574,402],{"class":264},[220,81576,347],{"class":420},[220,81578,359],{"class":264},[212,81580,81582],{"className":251,"code":81581,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WorleyNoise', props: {} }\n ]\n})\n",[99,81583,81584,81594,81598,81612,81616,81625,81629],{"__ignoreMap":178},[220,81585,81586,81588,81590,81592],{"class":222,"line":223},[220,81587,261],{"class":260},[220,81589,11512],{"class":264},[220,81591,268],{"class":260},[220,81593,4007],{"class":230},[220,81595,81596],{"class":222,"line":179},[220,81597,647],{"emptyLinePlaceholder":194},[220,81599,81600,81602,81604,81606,81608,81610],{"class":222,"line":389},[220,81601,1735],{"class":260},[220,81603,1738],{"class":420},[220,81605,1741],{"class":260},[220,81607,1744],{"class":260},[220,81609,1747],{"class":226},[220,81611,1750],{"class":264},[220,81613,81614],{"class":222,"line":399},[220,81615,1765],{"class":264},[220,81617,81618,81620,81623],{"class":222,"line":644},[220,81619,1770],{"class":264},[220,81621,81622],{"class":230},"'WorleyNoise'",[220,81624,2465],{"class":264},[220,81626,81627],{"class":222,"line":650},[220,81628,1787],{"class":264},[220,81630,81631],{"class":222,"line":656},[220,81632,1792],{"class":264},[1504,81634,32801],{},{"title":178,"searchDepth":179,"depth":179,"links":81636},[81637,81638],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":81446,"description":81454},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":81645,"title":81646,"body":81647,"category":32234,"componentType":25883,"description":81654,"extension":191,"meta":81971,"navigation":194,"path":81972,"requiresChild":194,"seo":81973,"stem":81974,"__hash__":81975},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":81648,"toc":81967},[81649,81652,81655,81657,81659,81662,81664,81965],[11,81650,81646],{"id":81651},"zoomblur",[15,81653,81654],{},"Radial zoom blur expanding from a center point",[31911,81656],{"component":81646},[23,81658,31915],{"id":26533},[31917,81660],{":props":81661},"[{\"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,81663,31923],{"id":31922},[246,81665,81666,81722,81781,81837,81895],{":tabs":1557},[212,81667,81669],{"className":334,"code":81668,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81670,81671,81679,81686,81694,81698,81706,81714],{"__ignoreMap":178},[220,81672,81673,81675,81677],{"class":222,"line":223},[220,81674,343],{"class":264},[220,81676,347],{"class":346},[220,81678,359],{"class":264},[220,81680,81681,81683],{"class":222,"line":179},[220,81682,364],{"class":264},[220,81684,81685],{"class":346},"ZoomBlur\n",[220,81687,81688,81690,81692],{"class":222,"line":389},[220,81689,20371],{"class":226},[220,81691,353],{"class":264},[220,81693,43592],{"class":230},[220,81695,81696],{"class":222,"line":399},[220,81697,31959],{"class":264},[220,81699,81700,81702,81704],{"class":222,"line":644},[220,81701,2550],{"class":264},[220,81703,2553],{"class":346},[220,81705,386],{"class":264},[220,81707,81708,81710,81712],{"class":222,"line":650},[220,81709,2567],{"class":264},[220,81711,81646],{"class":346},[220,81713,359],{"class":264},[220,81715,81716,81718,81720],{"class":222,"line":656},[220,81717,402],{"class":264},[220,81719,347],{"class":346},[220,81721,359],{"class":264},[212,81723,81725],{"className":409,"code":81724,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81726,81727,81735,81741,81753,81757,81765,81773],{"__ignoreMap":178},[220,81728,81729,81731,81733],{"class":222,"line":223},[220,81730,343],{"class":264},[220,81732,347],{"class":420},[220,81734,359],{"class":264},[220,81736,81737,81739],{"class":222,"line":179},[220,81738,364],{"class":264},[220,81740,81685],{"class":420},[220,81742,81743,81745,81747,81749,81751],{"class":222,"line":389},[220,81744,20482],{"class":226},[220,81746,353],{"class":260},[220,81748,743],{"class":264},[220,81750,24010],{"class":420},[220,81752,749],{"class":264},[220,81754,81755],{"class":222,"line":399},[220,81756,31959],{"class":264},[220,81758,81759,81761,81763],{"class":222,"line":644},[220,81760,2550],{"class":264},[220,81762,2553],{"class":420},[220,81764,386],{"class":264},[220,81766,81767,81769,81771],{"class":222,"line":650},[220,81768,2567],{"class":264},[220,81770,81646],{"class":420},[220,81772,359],{"class":264},[220,81774,81775,81777,81779],{"class":222,"line":656},[220,81776,402],{"class":264},[220,81778,347],{"class":420},[220,81780,359],{"class":264},[212,81782,81783],{"className":2844,"code":81724,"language":2846,"meta":178,"style":178},[99,81784,81785,81793,81799,81809,81813,81821,81829],{"__ignoreMap":178},[220,81786,81787,81789,81791],{"class":222,"line":223},[220,81788,343],{"class":264},[220,81790,347],{"class":420},[220,81792,359],{"class":264},[220,81794,81795,81797],{"class":222,"line":179},[220,81796,364],{"class":264},[220,81798,81685],{"class":420},[220,81800,81801,81803,81805,81807],{"class":222,"line":389},[220,81802,20482],{"class":226},[220,81804,29871],{"class":264},[220,81806,24010],{"class":420},[220,81808,749],{"class":264},[220,81810,81811],{"class":222,"line":399},[220,81812,31959],{"class":264},[220,81814,81815,81817,81819],{"class":222,"line":644},[220,81816,2550],{"class":264},[220,81818,2553],{"class":420},[220,81820,386],{"class":264},[220,81822,81823,81825,81827],{"class":222,"line":650},[220,81824,2567],{"class":264},[220,81826,81646],{"class":420},[220,81828,359],{"class":264},[220,81830,81831,81833,81835],{"class":222,"line":656},[220,81832,402],{"class":264},[220,81834,347],{"class":420},[220,81836,359],{"class":264},[212,81838,81839],{"className":468,"code":81724,"language":469,"meta":178,"style":178},[99,81840,81841,81849,81855,81867,81871,81879,81887],{"__ignoreMap":178},[220,81842,81843,81845,81847],{"class":222,"line":223},[220,81844,343],{"class":264},[220,81846,347],{"class":420},[220,81848,359],{"class":264},[220,81850,81851,81853],{"class":222,"line":179},[220,81852,364],{"class":264},[220,81854,81685],{"class":420},[220,81856,81857,81859,81861,81863,81865],{"class":222,"line":389},[220,81858,20482],{"class":226},[220,81860,353],{"class":260},[220,81862,743],{"class":264},[220,81864,24010],{"class":420},[220,81866,749],{"class":264},[220,81868,81869],{"class":222,"line":399},[220,81870,31959],{"class":264},[220,81872,81873,81875,81877],{"class":222,"line":644},[220,81874,2550],{"class":264},[220,81876,2553],{"class":420},[220,81878,386],{"class":264},[220,81880,81881,81883,81885],{"class":222,"line":650},[220,81882,2567],{"class":264},[220,81884,81646],{"class":420},[220,81886,359],{"class":264},[220,81888,81889,81891,81893],{"class":222,"line":656},[220,81890,402],{"class":264},[220,81892,347],{"class":420},[220,81894,359],{"class":264},[212,81896,81898],{"className":251,"code":81897,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ZoomBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,81899,81900,81910,81914,81928,81932,81945,81953,81957,81961],{"__ignoreMap":178},[220,81901,81902,81904,81906,81908],{"class":222,"line":223},[220,81903,261],{"class":260},[220,81905,11512],{"class":264},[220,81907,268],{"class":260},[220,81909,4007],{"class":230},[220,81911,81912],{"class":222,"line":179},[220,81913,647],{"emptyLinePlaceholder":194},[220,81915,81916,81918,81920,81922,81924,81926],{"class":222,"line":389},[220,81917,1735],{"class":260},[220,81919,1738],{"class":420},[220,81921,1741],{"class":260},[220,81923,1744],{"class":260},[220,81925,1747],{"class":226},[220,81927,1750],{"class":264},[220,81929,81930],{"class":222,"line":399},[220,81931,1765],{"class":264},[220,81933,81934,81936,81939,81941,81943],{"class":222,"line":644},[220,81935,1770],{"class":264},[220,81937,81938],{"class":230},"'ZoomBlur'",[220,81940,32203],{"class":264},[220,81942,24010],{"class":420},[220,81944,7546],{"class":264},[220,81946,81947,81949,81951],{"class":222,"line":650},[220,81948,7014],{"class":264},[220,81950,3206],{"class":230},[220,81952,2465],{"class":264},[220,81954,81955],{"class":222,"line":656},[220,81956,7031],{"class":264},[220,81958,81959],{"class":222,"line":673},[220,81960,1787],{"class":264},[220,81962,81963],{"class":222,"line":682},[220,81964,1792],{"class":264},[1504,81966,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81968},[81969,81970],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":81646,"description":81654},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":75275,"title":23169,"body":81977,"category":36569,"componentType":25877,"description":75283,"extension":191,"meta":82217,"navigation":194,"path":75525,"requiresChild":32530,"seo":82218,"stem":75527,"__hash__":75528},{"type":8,"value":81978,"toc":82213},[81979,81981,81983,81985,81987,81989,81991,82211],[11,81980,23169],{"id":75280},[15,81982,75283],{},[31911,81984],{"component":23169},[23,81986,31915],{"id":26533},[31917,81988],{":props":75290},[23,81990,31923],{"id":31922},[246,81992,81993,82031,82073,82113,82155],{":tabs":1557},[212,81994,81995],{"className":334,"code":75297,"language":336,"meta":178,"style":178},[99,81996,81997,82005,82011,82019,82023],{"__ignoreMap":178},[220,81998,81999,82001,82003],{"class":222,"line":223},[220,82000,343],{"class":264},[220,82002,347],{"class":346},[220,82004,359],{"class":264},[220,82006,82007,82009],{"class":222,"line":179},[220,82008,364],{"class":264},[220,82010,75314],{"class":346},[220,82012,82013,82015,82017],{"class":222,"line":389},[220,82014,20371],{"class":226},[220,82016,353],{"class":264},[220,82018,36625],{"class":230},[220,82020,82021],{"class":222,"line":399},[220,82022,1234],{"class":264},[220,82024,82025,82027,82029],{"class":222,"line":644},[220,82026,402],{"class":264},[220,82028,347],{"class":346},[220,82030,359],{"class":264},[212,82032,82033],{"className":409,"code":75337,"language":411,"meta":178,"style":178},[99,82034,82035,82043,82049,82061,82065],{"__ignoreMap":178},[220,82036,82037,82039,82041],{"class":222,"line":223},[220,82038,343],{"class":264},[220,82040,347],{"class":420},[220,82042,359],{"class":264},[220,82044,82045,82047],{"class":222,"line":179},[220,82046,364],{"class":264},[220,82048,75314],{"class":420},[220,82050,82051,82053,82055,82057,82059],{"class":222,"line":389},[220,82052,20482],{"class":226},[220,82054,353],{"class":260},[220,82056,743],{"class":264},[220,82058,8677],{"class":420},[220,82060,749],{"class":264},[220,82062,82063],{"class":222,"line":399},[220,82064,1234],{"class":264},[220,82066,82067,82069,82071],{"class":222,"line":644},[220,82068,402],{"class":264},[220,82070,347],{"class":420},[220,82072,359],{"class":264},[212,82074,82075],{"className":2844,"code":75337,"language":2846,"meta":178,"style":178},[99,82076,82077,82085,82091,82101,82105],{"__ignoreMap":178},[220,82078,82079,82081,82083],{"class":222,"line":223},[220,82080,343],{"class":264},[220,82082,347],{"class":420},[220,82084,359],{"class":264},[220,82086,82087,82089],{"class":222,"line":179},[220,82088,364],{"class":264},[220,82090,75314],{"class":420},[220,82092,82093,82095,82097,82099],{"class":222,"line":389},[220,82094,20482],{"class":226},[220,82096,29871],{"class":264},[220,82098,8677],{"class":420},[220,82100,749],{"class":264},[220,82102,82103],{"class":222,"line":399},[220,82104,1234],{"class":264},[220,82106,82107,82109,82111],{"class":222,"line":644},[220,82108,402],{"class":264},[220,82110,347],{"class":420},[220,82112,359],{"class":264},[212,82114,82115],{"className":468,"code":75337,"language":469,"meta":178,"style":178},[99,82116,82117,82125,82131,82143,82147],{"__ignoreMap":178},[220,82118,82119,82121,82123],{"class":222,"line":223},[220,82120,343],{"class":264},[220,82122,347],{"class":420},[220,82124,359],{"class":264},[220,82126,82127,82129],{"class":222,"line":179},[220,82128,364],{"class":264},[220,82130,75314],{"class":420},[220,82132,82133,82135,82137,82139,82141],{"class":222,"line":389},[220,82134,20482],{"class":226},[220,82136,353],{"class":260},[220,82138,743],{"class":264},[220,82140,8677],{"class":420},[220,82142,749],{"class":264},[220,82144,82145],{"class":222,"line":399},[220,82146,1234],{"class":264},[220,82148,82149,82151,82153],{"class":222,"line":644},[220,82150,402],{"class":264},[220,82152,347],{"class":420},[220,82154,359],{"class":264},[212,82156,82157],{"className":251,"code":75462,"language":253,"meta":178,"style":178},[99,82158,82159,82169,82173,82187,82191,82203,82207],{"__ignoreMap":178},[220,82160,82161,82163,82165,82167],{"class":222,"line":223},[220,82162,261],{"class":260},[220,82164,11512],{"class":264},[220,82166,268],{"class":260},[220,82168,4007],{"class":230},[220,82170,82171],{"class":222,"line":179},[220,82172,647],{"emptyLinePlaceholder":194},[220,82174,82175,82177,82179,82181,82183,82185],{"class":222,"line":389},[220,82176,1735],{"class":260},[220,82178,1738],{"class":420},[220,82180,1741],{"class":260},[220,82182,1744],{"class":260},[220,82184,1747],{"class":226},[220,82186,1750],{"class":264},[220,82188,82189],{"class":222,"line":399},[220,82190,1765],{"class":264},[220,82192,82193,82195,82197,82199,82201],{"class":222,"line":644},[220,82194,1770],{"class":264},[220,82196,75503],{"class":230},[220,82198,32203],{"class":264},[220,82200,8677],{"class":420},[220,82202,1782],{"class":264},[220,82204,82205],{"class":222,"line":650},[220,82206,1787],{"class":264},[220,82208,82209],{"class":222,"line":656},[220,82210,1792],{"class":264},[1504,82212,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82214},[82215,82216],{"id":26533,"depth":179,"text":31915},{"id":31922,"depth":179,"text":31923},{},{"title":23169,"description":75283},[82220,82221],{"title":75032,"path":75270,"stem":75272,"children":-1},{"title":75531,"path":75857,"stem":75859,"children":-1}]