[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":30179,"doc-\u002Fdocs\u002Fcomponents\u002Ferosionnoise":74138,"doc-surr-\u002Fdocs\u002Fcomponents\u002Ferosionnoise":74327},[4,199,1525,2248,2486,3328,4373,5851,8488,10493,13269,15557,19224,24105,24469,25105,25747,26645,27262,27841,28383,28977,29499],{"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":3321,"exclude":190,"extension":191,"forceFramework":190,"icon":3322,"meta":3323,"navigation":194,"path":3324,"seo":3325,"stem":3326,"__hash__":3327},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":3315},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312],[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",[1504,3313,3314],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":3316},[3317],{"id":2499,"depth":179,"text":2500,"children":3318},[3319,3320],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":3321},"docs\u002Fguide\u002F12.hooks-events","WwTtlED5f33p3QSx0rSLDLoHzxiTONCLGChJP4s2VrQ",{"id":3329,"title":3330,"body":3331,"category":2240,"description":4367,"exclude":190,"extension":191,"forceFramework":190,"icon":4368,"meta":4369,"navigation":194,"path":58,"seo":4370,"stem":4371,"__hash__":4372},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP (Pro)",{"type":8,"value":3332,"toc":4357},[3333,3336,3339,3343,3346,3350,3353,3357,3360,3376,3383,3386,3390,3393,3398,3401,3406,3669,3671,3675,3682,3691,3693,3697,3700,3703,4108,4112,4115,4121,4127,4133,4139,4142,4181,4232,4275,4315,4319,4322,4325,4328,4331,4333,4337,4343,4346,4354],[11,3334,3330],{"id":3335},"shaders-mcp-pro",[19,3337],{":preset":3338},"{\"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}}]}",[3340,3341],"pro-callout",{"message":3342},"Shaders MCP requires an active Pro account before you can connect.",[15,3344,3345],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. It can browse your saved shaders, search across the full library of Pro presets, install and modify\u002Fhook up props, all without switching context.",[23,3347,3349],{"id":3348},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,3351,3352],{},"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,3354,3356],{"id":3355},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,3358,3359],{},"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,3361,3363],{"className":214,"code":3362,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,3364,3365],{"__ignoreMap":178},[220,3366,3367,3370,3373],{"class":222,"line":223},[220,3368,3369],{"class":226},"npx",[220,3371,3372],{"class":230}," shaders@latest",[220,3374,3375],{"class":230}," install-mcp\n",[15,3377,3378,3379,3382],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,3380,3381],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[3384,3385],"hr",{},[3262,3387,3389],{"id":3388},"manual-configuration","Manual configuration",[15,3391,3392],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,3394,3395],{},[159,3396,3397],{},"Cursor",[3399,3400],"cursor-install-button",{},[15,3402,3403],{},[159,3404,3405],{},"Other tools",[246,3407,3409,3437,3493,3532,3559,3618],{":tabs":3408},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,3410,3412],{"className":214,"code":3411,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,3413,3414],{"__ignoreMap":178},[220,3415,3416,3419,3422,3425,3428,3431,3434],{"class":222,"line":223},[220,3417,3418],{"class":226},"claude",[220,3420,3421],{"class":230}," mcp",[220,3423,3424],{"class":230}," add",[220,3426,3427],{"class":420}," --transport",[220,3429,3430],{"class":230}," http",[220,3432,3433],{"class":230}," shaders",[220,3435,3436],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,3438,3442],{"className":3439,"code":3440,"language":3441,"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,3443,3444,3449,3454,3462,3469,3480,3485,3489],{"__ignoreMap":178},[220,3445,3446],{"class":222,"line":223},[220,3447,3448],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,3450,3451],{"class":222,"line":179},[220,3452,3453],{"class":264},"{\n",[220,3455,3456,3459],{"class":222,"line":389},[220,3457,3458],{"class":420}," \"mcpServers\"",[220,3460,3461],{"class":264},": {\n",[220,3463,3464,3467],{"class":222,"line":399},[220,3465,3466],{"class":420}," \"shaders\"",[220,3468,3461],{"class":264},[220,3470,3471,3474,3477],{"class":222,"line":644},[220,3472,3473],{"class":420}," \"serverUrl\"",[220,3475,3476],{"class":264},": ",[220,3478,3479],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,3481,3482],{"class":222,"line":650},[220,3483,3484],{"class":264}," }\n",[220,3486,3487],{"class":222,"line":656},[220,3488,3256],{"class":264},[220,3490,3491],{"class":222,"line":673},[220,3492,749],{"class":264},[212,3494,3496],{"className":3439,"code":3495,"language":3441,"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,3497,3498,3503,3507,3519,3528],{"__ignoreMap":178},[220,3499,3500],{"class":222,"line":223},[220,3501,3502],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,3504,3505],{"class":222,"line":179},[220,3506,3453],{"class":264},[220,3508,3509,3512,3514,3517],{"class":222,"line":389},[220,3510,3511],{"class":420}," \"name\"",[220,3513,3476],{"class":264},[220,3515,3516],{"class":230},"\"shaders\"",[220,3518,1760],{"class":264},[220,3520,3521,3524,3526],{"class":222,"line":399},[220,3522,3523],{"class":420}," \"url\"",[220,3525,3476],{"class":264},[220,3527,3479],{"class":230},[220,3529,3530],{"class":222,"line":644},[220,3531,749],{"class":264},[212,3533,3537],{"className":3534,"code":3535,"language":3536,"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,3538,3539,3544,3549,3554],{"__ignoreMap":178},[220,3540,3541],{"class":222,"line":223},[220,3542,3543],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,3545,3546],{"class":222,"line":179},[220,3547,3548],{},"[mcp_servers.shaders]\n",[220,3550,3551],{"class":222,"line":389},[220,3552,3553],{},"enabled = true\n",[220,3555,3556],{"class":222,"line":399},[220,3557,3558],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,3560,3562],{"className":3439,"code":3561,"language":3441,"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,3563,3564,3569,3573,3579,3585,3597,3606,3610,3614],{"__ignoreMap":178},[220,3565,3566],{"class":222,"line":223},[220,3567,3568],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,3570,3571],{"class":222,"line":179},[220,3572,3453],{"class":264},[220,3574,3575,3577],{"class":222,"line":389},[220,3576,3458],{"class":420},[220,3578,3461],{"class":264},[220,3580,3581,3583],{"class":222,"line":399},[220,3582,3466],{"class":420},[220,3584,3461],{"class":264},[220,3586,3587,3590,3592,3595],{"class":222,"line":644},[220,3588,3589],{"class":420}," \"type\"",[220,3591,3476],{"class":264},[220,3593,3594],{"class":230},"\"http\"",[220,3596,1760],{"class":264},[220,3598,3599,3602,3604],{"class":222,"line":650},[220,3600,3601],{"class":420}," \"url\"",[220,3603,3476],{"class":264},[220,3605,3479],{"class":230},[220,3607,3608],{"class":222,"line":656},[220,3609,3484],{"class":264},[220,3611,3612],{"class":222,"line":673},[220,3613,3256],{"class":264},[220,3615,3616],{"class":222,"line":682},[220,3617,749],{"class":264},[212,3619,3621],{"className":3439,"code":3620,"language":3441,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,3622,3623,3627,3633,3639,3649,3657,3661,3665],{"__ignoreMap":178},[220,3624,3625],{"class":222,"line":223},[220,3626,3453],{"class":264},[220,3628,3629,3631],{"class":222,"line":179},[220,3630,3458],{"class":420},[220,3632,3461],{"class":264},[220,3634,3635,3637],{"class":222,"line":389},[220,3636,3466],{"class":420},[220,3638,3461],{"class":264},[220,3640,3641,3643,3645,3647],{"class":222,"line":399},[220,3642,3589],{"class":420},[220,3644,3476],{"class":264},[220,3646,3594],{"class":230},[220,3648,1760],{"class":264},[220,3650,3651,3653,3655],{"class":222,"line":644},[220,3652,3601],{"class":420},[220,3654,3476],{"class":264},[220,3656,3479],{"class":230},[220,3658,3659],{"class":222,"line":650},[220,3660,3484],{"class":264},[220,3662,3663],{"class":222,"line":656},[220,3664,3256],{"class":264},[220,3666,3667],{"class":222,"line":673},[220,3668,749],{"class":264},[3384,3670],{},[23,3672,3674],{"id":3673},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,3676,3677],{},[3678,3679],"img",{"alt":3680,"src":3681},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,3683,3684,3685,3690],{},"Shaders has an official connector on ",[56,3686,3689],{"href":3687,"rel":3688},"https:\u002F\u002Fbolt.new",[167],"bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Pro account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[3384,3692],{},[23,3694,3696],{"id":3695},"using-an-api-key-instead","Using an API key instead",[15,3698,3699],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[3701,3702],"api-keys",{},[246,3704,3706,3734,3805,3870,3927,3962,4037],{":tabs":3705},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,3707,3709],{"className":214,"code":3708,"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,3710,3711],{"__ignoreMap":178},[220,3712,3713,3715,3717,3719,3721,3723,3725,3728,3731],{"class":222,"line":223},[220,3714,3418],{"class":226},[220,3716,3421],{"class":230},[220,3718,3424],{"class":230},[220,3720,3427],{"class":420},[220,3722,3430],{"class":230},[220,3724,3433],{"class":230},[220,3726,3727],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,3729,3730],{"class":420}," --header",[220,3732,3733],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,3735,3737],{"className":3439,"code":3736,"language":3441,"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,3738,3739,3744,3748,3754,3760,3771,3778,3788,3793,3797,3801],{"__ignoreMap":178},[220,3740,3741],{"class":222,"line":223},[220,3742,3743],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,3745,3746],{"class":222,"line":179},[220,3747,3453],{"class":264},[220,3749,3750,3752],{"class":222,"line":389},[220,3751,3458],{"class":420},[220,3753,3461],{"class":264},[220,3755,3756,3758],{"class":222,"line":399},[220,3757,3466],{"class":420},[220,3759,3461],{"class":264},[220,3761,3762,3764,3766,3769],{"class":222,"line":644},[220,3763,3601],{"class":420},[220,3765,3476],{"class":264},[220,3767,3768],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,3770,1760],{"class":264},[220,3772,3773,3776],{"class":222,"line":650},[220,3774,3775],{"class":420}," \"headers\"",[220,3777,3461],{"class":264},[220,3779,3780,3783,3785],{"class":222,"line":656},[220,3781,3782],{"class":420}," \"Authorization\"",[220,3784,3476],{"class":264},[220,3786,3787],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,3789,3790],{"class":222,"line":673},[220,3791,3792],{"class":264}," }\n",[220,3794,3795],{"class":222,"line":682},[220,3796,3484],{"class":264},[220,3798,3799],{"class":222,"line":691},[220,3800,3256],{"class":264},[220,3802,3803],{"class":222,"line":696},[220,3804,749],{"class":264},[212,3806,3808],{"className":3439,"code":3807,"language":3441,"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,3809,3810,3814,3818,3824,3830,3840,3846,3854,3858,3862,3866],{"__ignoreMap":178},[220,3811,3812],{"class":222,"line":223},[220,3813,3448],{"class":609},[220,3815,3816],{"class":222,"line":179},[220,3817,3453],{"class":264},[220,3819,3820,3822],{"class":222,"line":389},[220,3821,3458],{"class":420},[220,3823,3461],{"class":264},[220,3825,3826,3828],{"class":222,"line":399},[220,3827,3466],{"class":420},[220,3829,3461],{"class":264},[220,3831,3832,3834,3836,3838],{"class":222,"line":644},[220,3833,3473],{"class":420},[220,3835,3476],{"class":264},[220,3837,3768],{"class":230},[220,3839,1760],{"class":264},[220,3841,3842,3844],{"class":222,"line":650},[220,3843,3775],{"class":420},[220,3845,3461],{"class":264},[220,3847,3848,3850,3852],{"class":222,"line":656},[220,3849,3782],{"class":420},[220,3851,3476],{"class":264},[220,3853,3787],{"class":230},[220,3855,3856],{"class":222,"line":673},[220,3857,3792],{"class":264},[220,3859,3860],{"class":222,"line":682},[220,3861,3484],{"class":264},[220,3863,3864],{"class":222,"line":691},[220,3865,3256],{"class":264},[220,3867,3868],{"class":222,"line":696},[220,3869,749],{"class":264},[212,3871,3873],{"className":3439,"code":3872,"language":3441,"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,3874,3875,3879,3883,3893,3903,3910,3919,3923],{"__ignoreMap":178},[220,3876,3877],{"class":222,"line":223},[220,3878,3502],{"class":609},[220,3880,3881],{"class":222,"line":179},[220,3882,3453],{"class":264},[220,3884,3885,3887,3889,3891],{"class":222,"line":389},[220,3886,3511],{"class":420},[220,3888,3476],{"class":264},[220,3890,3516],{"class":230},[220,3892,1760],{"class":264},[220,3894,3895,3897,3899,3901],{"class":222,"line":399},[220,3896,3523],{"class":420},[220,3898,3476],{"class":264},[220,3900,3768],{"class":230},[220,3902,1760],{"class":264},[220,3904,3905,3908],{"class":222,"line":644},[220,3906,3907],{"class":420}," \"headers\"",[220,3909,3461],{"class":264},[220,3911,3912,3915,3917],{"class":222,"line":650},[220,3913,3914],{"class":420}," \"Authorization\"",[220,3916,3476],{"class":264},[220,3918,3787],{"class":230},[220,3920,3921],{"class":222,"line":656},[220,3922,3256],{"class":264},[220,3924,3925],{"class":222,"line":673},[220,3926,749],{"class":264},[212,3928,3930],{"className":3534,"code":3929,"language":3536,"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,3931,3932,3936,3940,3944,3948,3952,3957],{"__ignoreMap":178},[220,3933,3934],{"class":222,"line":223},[220,3935,3543],{},[220,3937,3938],{"class":222,"line":179},[220,3939,3548],{},[220,3941,3942],{"class":222,"line":389},[220,3943,3553],{},[220,3945,3946],{"class":222,"line":399},[220,3947,3558],{},[220,3949,3950],{"class":222,"line":644},[220,3951,647],{"emptyLinePlaceholder":194},[220,3953,3954],{"class":222,"line":650},[220,3955,3956],{},"[mcp_servers.shaders.http_headers]\n",[220,3958,3959],{"class":222,"line":656},[220,3960,3961],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,3963,3965],{"className":3439,"code":3964,"language":3441,"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,3966,3967,3971,3975,3981,3987,3997,4007,4013,4021,4025,4029,4033],{"__ignoreMap":178},[220,3968,3969],{"class":222,"line":223},[220,3970,3568],{"class":609},[220,3972,3973],{"class":222,"line":179},[220,3974,3453],{"class":264},[220,3976,3977,3979],{"class":222,"line":389},[220,3978,3458],{"class":420},[220,3980,3461],{"class":264},[220,3982,3983,3985],{"class":222,"line":399},[220,3984,3466],{"class":420},[220,3986,3461],{"class":264},[220,3988,3989,3991,3993,3995],{"class":222,"line":644},[220,3990,3589],{"class":420},[220,3992,3476],{"class":264},[220,3994,3594],{"class":230},[220,3996,1760],{"class":264},[220,3998,3999,4001,4003,4005],{"class":222,"line":650},[220,4000,3601],{"class":420},[220,4002,3476],{"class":264},[220,4004,3768],{"class":230},[220,4006,1760],{"class":264},[220,4008,4009,4011],{"class":222,"line":656},[220,4010,3775],{"class":420},[220,4012,3461],{"class":264},[220,4014,4015,4017,4019],{"class":222,"line":673},[220,4016,3782],{"class":420},[220,4018,3476],{"class":264},[220,4020,3787],{"class":230},[220,4022,4023],{"class":222,"line":682},[220,4024,3792],{"class":264},[220,4026,4027],{"class":222,"line":691},[220,4028,3484],{"class":264},[220,4030,4031],{"class":222,"line":696},[220,4032,3256],{"class":264},[220,4034,4035],{"class":222,"line":702},[220,4036,749],{"class":264},[212,4038,4040],{"className":3439,"code":4039,"language":3441,"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,4041,4042,4046,4052,4058,4068,4078,4084,4092,4096,4100,4104],{"__ignoreMap":178},[220,4043,4044],{"class":222,"line":223},[220,4045,3453],{"class":264},[220,4047,4048,4050],{"class":222,"line":179},[220,4049,3458],{"class":420},[220,4051,3461],{"class":264},[220,4053,4054,4056],{"class":222,"line":389},[220,4055,3466],{"class":420},[220,4057,3461],{"class":264},[220,4059,4060,4062,4064,4066],{"class":222,"line":399},[220,4061,3589],{"class":420},[220,4063,3476],{"class":264},[220,4065,3594],{"class":230},[220,4067,1760],{"class":264},[220,4069,4070,4072,4074,4076],{"class":222,"line":644},[220,4071,3601],{"class":420},[220,4073,3476],{"class":264},[220,4075,3768],{"class":230},[220,4077,1760],{"class":264},[220,4079,4080,4082],{"class":222,"line":650},[220,4081,3775],{"class":420},[220,4083,3461],{"class":264},[220,4085,4086,4088,4090],{"class":222,"line":656},[220,4087,3782],{"class":420},[220,4089,3476],{"class":264},[220,4091,3787],{"class":230},[220,4093,4094],{"class":222,"line":673},[220,4095,3792],{"class":264},[220,4097,4098],{"class":222,"line":682},[220,4099,3484],{"class":264},[220,4101,4102],{"class":222,"line":691},[220,4103,3256],{"class":264},[220,4105,4106],{"class":222,"line":696},[220,4107,749],{"class":264},[23,4109,4111],{"id":4110},"start-prompting","Start prompting",[15,4113,4114],{},"Once connected, your agent gains access to the following capabilities:",[15,4116,4117,4120],{},[159,4118,4119],{},"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,4122,4123,4126],{},[159,4124,4125],{},"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,4128,4129,4132],{},[159,4130,4131],{},"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,4134,4135,4138],{},[159,4136,4137],{},"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,4140,4141],{},"Example prompts to get started:",[212,4143,4145],{"className":214,"code":4144,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,4146,4147],{"__ignoreMap":178},[220,4148,4149,4152,4155,4158,4160,4163,4166,4169,4172,4175,4178],{"class":222,"line":223},[220,4150,4151],{"class":226},"Install",[220,4153,4154],{"class":230}," my",[220,4156,4157],{"class":230}," \"Landing Hero\"",[220,4159,1738],{"class":230},[220,4161,4162],{"class":230}," in",[220,4164,4165],{"class":230}," the",[220,4167,4168],{"class":230}," hero",[220,4170,4171],{"class":230}," section",[220,4173,4174],{"class":230}," as",[220,4176,4177],{"class":230}," a",[220,4179,4180],{"class":230}," background.\n",[212,4182,4184],{"className":214,"code":4183,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,4185,4186],{"__ignoreMap":178},[220,4187,4188,4191,4193,4195,4198,4200,4203,4206,4209,4212,4215,4218,4221,4223,4226,4229],{"class":222,"line":223},[220,4189,4190],{"class":226},"Add",[220,4192,4177],{"class":230},[220,4194,1738],{"class":230},[220,4196,4197],{"class":230}," to",[220,4199,4165],{"class":230},[220,4201,4202],{"class":230}," background",[220,4204,4205],{"class":230}," of",[220,4207,4208],{"class":230}," this",[220,4210,4211],{"class":230}," card,",[220,4213,4214],{"class":230}," something",[220,4216,4217],{"class":230}," blue",[220,4219,4220],{"class":230}," with",[220,4222,4177],{"class":230},[220,4224,4225],{"class":230}," subtle",[220,4227,4228],{"class":230}," flowing",[220,4230,4231],{"class":230}," animation.\n",[212,4233,4235],{"className":214,"code":4234,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,4236,4237],{"__ignoreMap":178},[220,4238,4239,4242,4244,4247,4249,4251,4253,4256,4259,4261,4264,4267,4270,4272],{"class":222,"line":223},[220,4240,4241],{"class":226},"Make",[220,4243,4165],{"class":230},[220,4245,4246],{"class":230}," circle",[220,4248,4162],{"class":230},[220,4250,4208],{"class":230},[220,4252,1738],{"class":230},[220,4254,4255],{"class":230}," get",[220,4257,4258],{"class":230}," bigger",[220,4260,4174],{"class":230},[220,4262,4263],{"class":230}," we",[220,4265,4266],{"class":230}," scroll",[220,4268,4269],{"class":230}," past",[220,4271,4165],{"class":230},[220,4273,4274],{"class":230}," section.\n",[212,4276,4278],{"className":214,"code":4277,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,4279,4280],{"__ignoreMap":178},[220,4281,4282,4284,4286,4289,4291,4293,4296,4299,4302,4305,4308,4310,4312],{"class":222,"line":223},[220,4283,4190],{"class":226},[220,4285,4154],{"class":230},[220,4287,4288],{"class":230}," logo.svg",[220,4290,4174],{"class":230},[220,4292,4177],{"class":230},[220,4294,4295],{"class":230}," liquid",[220,4297,4298],{"class":230}," glass",[220,4300,4301],{"class":230}," effect",[220,4303,4304],{"class":230}," on",[220,4306,4307],{"class":230}," top",[220,4309,4205],{"class":230},[220,4311,4208],{"class":230},[220,4313,4314],{"class":230}," shader.\n",[23,4316,4318],{"id":4317},"pro-knowledge-base","Pro knowledge base",[15,4320,4321],{},"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,4323,4324],{},"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,4326,4327],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[3340,4329],{"message":4330},"Make your agent a shader expert...",[3384,4332],{},[11,4334,4336],{"id":4335},"mcp-for-business","MCP for business",[15,4338,4339],{},[3678,4340],{"alt":4341,"src":4342},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,4344,4345],{},"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,4347,4348,4349,4353],{},"We're open to partnerships and custom integrations. Reach out at ",[56,4350,4352],{"href":4351},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,4355,4356],{},"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":4358},[4359,4363,4364,4365,4366],{"id":3348,"depth":179,"text":3349,"children":4360},[4361,4362],{"id":3355,"depth":389,"text":3356},{"id":3388,"depth":389,"text":3389},{"id":3673,"depth":179,"text":3674},{"id":3695,"depth":179,"text":3696},{"id":4110,"depth":179,"text":4111},{"id":4317,"depth":179,"text":4318},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":3330,"description":4367},"docs\u002Fguide\u002F13.mcp","Z9GnUAMws-GwNlKqbKfikTYIvlVfCwDJ2T_FdlvdZwE",{"id":4374,"title":1482,"body":4375,"category":188,"description":5845,"exclude":190,"extension":191,"forceFramework":190,"icon":5846,"meta":5847,"navigation":194,"path":1481,"seo":5848,"stem":5849,"__hash__":5850},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":4376,"toc":5841},[4377,4380,4386,4390,4397,4840,4843,4847,4864,5286,5289,5298,5835,5838],[11,4378,1482],{"id":4379},"composing-effects",[15,4381,4382,4383,4385],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,4384,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,4387,4389],{"id":4388},"stacking-components","Stacking Components",[15,4391,4392,4393,4396],{},"Components are evaluated ",[159,4394,4395],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,4398,4399,4482,4578,4668,4758],{":tabs":1557},[212,4400,4402],{"className":334,"code":4401,"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,4403,4404,4412,4417,4425,4429,4434,4456,4460,4465,4474],{"__ignoreMap":178},[220,4405,4406,4408,4410],{"class":222,"line":223},[220,4407,343],{"class":264},[220,4409,347],{"class":346},[220,4411,359],{"class":264},[220,4413,4414],{"class":222,"line":179},[220,4415,4416],{"class":609}," \u003C!-- Bottom layer -->\n",[220,4418,4419,4421,4423],{"class":222,"line":389},[220,4420,364],{"class":264},[220,4422,367],{"class":346},[220,4424,386],{"class":264},[220,4426,4427],{"class":222,"line":399},[220,4428,647],{"emptyLinePlaceholder":194},[220,4430,4431],{"class":222,"line":644},[220,4432,4433],{"class":609}," \u003C!-- Middle layer -->\n",[220,4435,4436,4438,4440,4442,4444,4446,4449,4451,4454],{"class":222,"line":650},[220,4437,364],{"class":264},[220,4439,2553],{"class":346},[220,4441,1588],{"class":226},[220,4443,353],{"class":264},[220,4445,2560],{"class":230},[220,4447,4448],{"class":226}," radius",[220,4450,353],{"class":264},[220,4452,4453],{"class":230},"\"0.8\"",[220,4455,386],{"class":264},[220,4457,4458],{"class":222,"line":656},[220,4459,647],{"emptyLinePlaceholder":194},[220,4461,4462],{"class":222,"line":673},[220,4463,4464],{"class":609}," \u003C!-- Top layer -->\n",[220,4466,4467,4469,4472],{"class":222,"line":682},[220,4468,364],{"class":264},[220,4470,4471],{"class":346},"GlassTiles",[220,4473,386],{"class":264},[220,4475,4476,4478,4480],{"class":222,"line":691},[220,4477,402],{"class":264},[220,4479,347],{"class":346},[220,4481,359],{"class":264},[212,4483,4485],{"className":409,"code":4484,"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,4486,4487,4495,4504,4512,4516,4525,4549,4553,4562,4570],{"__ignoreMap":178},[220,4488,4489,4491,4493],{"class":222,"line":223},[220,4490,343],{"class":264},[220,4492,347],{"class":420},[220,4494,359],{"class":264},[220,4496,4497,4499,4502],{"class":222,"line":179},[220,4498,1999],{"class":264},[220,4500,4501],{"class":609},"\u002F* Bottom layer *\u002F",[220,4503,749],{"class":264},[220,4505,4506,4508,4510],{"class":222,"line":389},[220,4507,364],{"class":264},[220,4509,367],{"class":420},[220,4511,386],{"class":264},[220,4513,4514],{"class":222,"line":399},[220,4515,647],{"emptyLinePlaceholder":194},[220,4517,4518,4520,4523],{"class":222,"line":644},[220,4519,1999],{"class":264},[220,4521,4522],{"class":609},"\u002F* Middle layer *\u002F",[220,4524,749],{"class":264},[220,4526,4527,4529,4531,4533,4535,4537,4539,4541,4543,4546],{"class":222,"line":650},[220,4528,364],{"class":264},[220,4530,2553],{"class":420},[220,4532,1588],{"class":226},[220,4534,353],{"class":260},[220,4536,2560],{"class":230},[220,4538,4448],{"class":226},[220,4540,353],{"class":260},[220,4542,743],{"class":264},[220,4544,4545],{"class":420},"0.8",[220,4547,4548],{"class":264},"} \u002F>\n",[220,4550,4551],{"class":222,"line":656},[220,4552,647],{"emptyLinePlaceholder":194},[220,4554,4555,4557,4560],{"class":222,"line":673},[220,4556,1999],{"class":264},[220,4558,4559],{"class":609},"\u002F* Top layer *\u002F",[220,4561,749],{"class":264},[220,4563,4564,4566,4568],{"class":222,"line":682},[220,4565,364],{"class":264},[220,4567,4471],{"class":420},[220,4569,386],{"class":264},[220,4571,4572,4574,4576],{"class":222,"line":691},[220,4573,402],{"class":264},[220,4575,347],{"class":420},[220,4577,359],{"class":264},[212,4579,4580],{"className":468,"code":4484,"language":469,"meta":178,"style":178},[99,4581,4582,4590,4598,4606,4610,4618,4640,4644,4652,4660],{"__ignoreMap":178},[220,4583,4584,4586,4588],{"class":222,"line":223},[220,4585,343],{"class":264},[220,4587,347],{"class":420},[220,4589,359],{"class":264},[220,4591,4592,4594,4596],{"class":222,"line":179},[220,4593,1999],{"class":264},[220,4595,4501],{"class":609},[220,4597,749],{"class":264},[220,4599,4600,4602,4604],{"class":222,"line":389},[220,4601,364],{"class":264},[220,4603,367],{"class":420},[220,4605,386],{"class":264},[220,4607,4608],{"class":222,"line":399},[220,4609,647],{"emptyLinePlaceholder":194},[220,4611,4612,4614,4616],{"class":222,"line":644},[220,4613,1999],{"class":264},[220,4615,4522],{"class":609},[220,4617,749],{"class":264},[220,4619,4620,4622,4624,4626,4628,4630,4632,4634,4636,4638],{"class":222,"line":650},[220,4621,364],{"class":264},[220,4623,2553],{"class":420},[220,4625,1588],{"class":226},[220,4627,353],{"class":260},[220,4629,2560],{"class":230},[220,4631,4448],{"class":226},[220,4633,353],{"class":260},[220,4635,743],{"class":264},[220,4637,4545],{"class":420},[220,4639,4548],{"class":264},[220,4641,4642],{"class":222,"line":656},[220,4643,647],{"emptyLinePlaceholder":194},[220,4645,4646,4648,4650],{"class":222,"line":673},[220,4647,1999],{"class":264},[220,4649,4559],{"class":609},[220,4651,749],{"class":264},[220,4653,4654,4656,4658],{"class":222,"line":682},[220,4655,364],{"class":264},[220,4657,4471],{"class":420},[220,4659,386],{"class":264},[220,4661,4662,4664,4666],{"class":222,"line":691},[220,4663,402],{"class":264},[220,4665,347],{"class":420},[220,4667,359],{"class":264},[212,4669,4670],{"className":468,"code":4484,"language":469,"meta":178,"style":178},[99,4671,4672,4680,4688,4696,4700,4708,4730,4734,4742,4750],{"__ignoreMap":178},[220,4673,4674,4676,4678],{"class":222,"line":223},[220,4675,343],{"class":264},[220,4677,347],{"class":420},[220,4679,359],{"class":264},[220,4681,4682,4684,4686],{"class":222,"line":179},[220,4683,1999],{"class":264},[220,4685,4501],{"class":609},[220,4687,749],{"class":264},[220,4689,4690,4692,4694],{"class":222,"line":389},[220,4691,364],{"class":264},[220,4693,367],{"class":420},[220,4695,386],{"class":264},[220,4697,4698],{"class":222,"line":399},[220,4699,647],{"emptyLinePlaceholder":194},[220,4701,4702,4704,4706],{"class":222,"line":644},[220,4703,1999],{"class":264},[220,4705,4522],{"class":609},[220,4707,749],{"class":264},[220,4709,4710,4712,4714,4716,4718,4720,4722,4724,4726,4728],{"class":222,"line":650},[220,4711,364],{"class":264},[220,4713,2553],{"class":420},[220,4715,1588],{"class":226},[220,4717,353],{"class":260},[220,4719,2560],{"class":230},[220,4721,4448],{"class":226},[220,4723,353],{"class":260},[220,4725,743],{"class":264},[220,4727,4545],{"class":420},[220,4729,4548],{"class":264},[220,4731,4732],{"class":222,"line":656},[220,4733,647],{"emptyLinePlaceholder":194},[220,4735,4736,4738,4740],{"class":222,"line":673},[220,4737,1999],{"class":264},[220,4739,4559],{"class":609},[220,4741,749],{"class":264},[220,4743,4744,4746,4748],{"class":222,"line":682},[220,4745,364],{"class":264},[220,4747,4471],{"class":420},[220,4749,386],{"class":264},[220,4751,4752,4754,4756],{"class":222,"line":691},[220,4753,402],{"class":264},[220,4755,347],{"class":420},[220,4757,359],{"class":264},[212,4759,4761],{"className":251,"code":4760,"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,4762,4763,4777,4781,4786,4795,4800,4818,4823,4832,4836],{"__ignoreMap":178},[220,4764,4765,4767,4769,4771,4773,4775],{"class":222,"line":223},[220,4766,1735],{"class":260},[220,4768,1738],{"class":420},[220,4770,1741],{"class":260},[220,4772,1744],{"class":260},[220,4774,1747],{"class":226},[220,4776,1750],{"class":264},[220,4778,4779],{"class":222,"line":179},[220,4780,1765],{"class":264},[220,4782,4783],{"class":222,"line":389},[220,4784,4785],{"class":609}," \u002F\u002F Bottom layer\n",[220,4787,4788,4790,4792],{"class":222,"line":399},[220,4789,1770],{"class":264},[220,4791,2462],{"class":230},[220,4793,4794],{"class":264},", props: {} },\n",[220,4796,4797],{"class":222,"line":644},[220,4798,4799],{"class":609}," \u002F\u002F Middle layer\n",[220,4801,4802,4804,4806,4808,4810,4813,4815],{"class":222,"line":650},[220,4803,1770],{"class":264},[220,4805,3206],{"class":230},[220,4807,1776],{"class":264},[220,4809,3217],{"class":230},[220,4811,4812],{"class":264},", radius: ",[220,4814,4545],{"class":420},[220,4816,4817],{"class":264}," } },\n",[220,4819,4820],{"class":222,"line":656},[220,4821,4822],{"class":609}," \u002F\u002F Top layer\n",[220,4824,4825,4827,4830],{"class":222,"line":673},[220,4826,1770],{"class":264},[220,4828,4829],{"class":230},"'GlassTiles'",[220,4831,2465],{"class":264},[220,4833,4834],{"class":222,"line":682},[220,4835,1787],{"class":264},[220,4837,4838],{"class":222,"line":691},[220,4839,1792],{"class":264},[19,4841],{":preset":4842},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,4844,4846],{"id":4845},"nesting-components","Nesting Components",[15,4848,4849,4850,4853,4854,4857,4858,4861,4862,1938],{},"Notice how the ",[99,4851,4852],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,4855,4856],{},"only"," apply glass tiles to the ",[99,4859,4860],{},"\u003CCircle>"," component, you can nest it inside the ",[99,4863,4852],{},[246,4865,4866,4945,5034,5120,5206],{":tabs":1557},[212,4867,4869],{"className":334,"code":4868,"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,4870,4871,4879,4884,4892,4896,4901,4909,4929,4937],{"__ignoreMap":178},[220,4872,4873,4875,4877],{"class":222,"line":223},[220,4874,343],{"class":264},[220,4876,347],{"class":346},[220,4878,359],{"class":264},[220,4880,4881],{"class":222,"line":179},[220,4882,4883],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,4885,4886,4888,4890],{"class":222,"line":389},[220,4887,364],{"class":264},[220,4889,367],{"class":346},[220,4891,386],{"class":264},[220,4893,4894],{"class":222,"line":399},[220,4895,647],{"emptyLinePlaceholder":194},[220,4897,4898],{"class":222,"line":644},[220,4899,4900],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,4902,4903,4905,4907],{"class":222,"line":650},[220,4904,364],{"class":264},[220,4906,4471],{"class":346},[220,4908,359],{"class":264},[220,4910,4911,4913,4915,4917,4919,4921,4923,4925,4927],{"class":222,"line":656},[220,4912,2550],{"class":264},[220,4914,2553],{"class":346},[220,4916,1588],{"class":226},[220,4918,353],{"class":264},[220,4920,2560],{"class":230},[220,4922,4448],{"class":226},[220,4924,353],{"class":264},[220,4926,4453],{"class":230},[220,4928,386],{"class":264},[220,4930,4931,4933,4935],{"class":222,"line":673},[220,4932,2567],{"class":264},[220,4934,4471],{"class":346},[220,4936,359],{"class":264},[220,4938,4939,4941,4943],{"class":222,"line":682},[220,4940,402],{"class":264},[220,4942,347],{"class":346},[220,4944,359],{"class":264},[212,4946,4948],{"className":409,"code":4947,"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,4949,4950,4958,4967,4975,4979,4988,4996,5018,5026],{"__ignoreMap":178},[220,4951,4952,4954,4956],{"class":222,"line":223},[220,4953,343],{"class":264},[220,4955,347],{"class":420},[220,4957,359],{"class":264},[220,4959,4960,4962,4965],{"class":222,"line":179},[220,4961,1999],{"class":264},[220,4963,4964],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,4966,749],{"class":264},[220,4968,4969,4971,4973],{"class":222,"line":389},[220,4970,364],{"class":264},[220,4972,367],{"class":420},[220,4974,386],{"class":264},[220,4976,4977],{"class":222,"line":399},[220,4978,647],{"emptyLinePlaceholder":194},[220,4980,4981,4983,4986],{"class":222,"line":644},[220,4982,1999],{"class":264},[220,4984,4985],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,4987,749],{"class":264},[220,4989,4990,4992,4994],{"class":222,"line":650},[220,4991,364],{"class":264},[220,4993,4471],{"class":420},[220,4995,359],{"class":264},[220,4997,4998,5000,5002,5004,5006,5008,5010,5012,5014,5016],{"class":222,"line":656},[220,4999,2550],{"class":264},[220,5001,2553],{"class":420},[220,5003,1588],{"class":226},[220,5005,353],{"class":260},[220,5007,2560],{"class":230},[220,5009,4448],{"class":226},[220,5011,353],{"class":260},[220,5013,743],{"class":264},[220,5015,4545],{"class":420},[220,5017,4548],{"class":264},[220,5019,5020,5022,5024],{"class":222,"line":673},[220,5021,2567],{"class":264},[220,5023,4471],{"class":420},[220,5025,359],{"class":264},[220,5027,5028,5030,5032],{"class":222,"line":682},[220,5029,402],{"class":264},[220,5031,347],{"class":420},[220,5033,359],{"class":264},[212,5035,5036],{"className":468,"code":4947,"language":469,"meta":178,"style":178},[99,5037,5038,5046,5054,5062,5066,5074,5082,5104,5112],{"__ignoreMap":178},[220,5039,5040,5042,5044],{"class":222,"line":223},[220,5041,343],{"class":264},[220,5043,347],{"class":420},[220,5045,359],{"class":264},[220,5047,5048,5050,5052],{"class":222,"line":179},[220,5049,1999],{"class":264},[220,5051,4964],{"class":609},[220,5053,749],{"class":264},[220,5055,5056,5058,5060],{"class":222,"line":389},[220,5057,364],{"class":264},[220,5059,367],{"class":420},[220,5061,386],{"class":264},[220,5063,5064],{"class":222,"line":399},[220,5065,647],{"emptyLinePlaceholder":194},[220,5067,5068,5070,5072],{"class":222,"line":644},[220,5069,1999],{"class":264},[220,5071,4985],{"class":609},[220,5073,749],{"class":264},[220,5075,5076,5078,5080],{"class":222,"line":650},[220,5077,364],{"class":264},[220,5079,4471],{"class":420},[220,5081,359],{"class":264},[220,5083,5084,5086,5088,5090,5092,5094,5096,5098,5100,5102],{"class":222,"line":656},[220,5085,2550],{"class":264},[220,5087,2553],{"class":420},[220,5089,1588],{"class":226},[220,5091,353],{"class":260},[220,5093,2560],{"class":230},[220,5095,4448],{"class":226},[220,5097,353],{"class":260},[220,5099,743],{"class":264},[220,5101,4545],{"class":420},[220,5103,4548],{"class":264},[220,5105,5106,5108,5110],{"class":222,"line":673},[220,5107,2567],{"class":264},[220,5109,4471],{"class":420},[220,5111,359],{"class":264},[220,5113,5114,5116,5118],{"class":222,"line":682},[220,5115,402],{"class":264},[220,5117,347],{"class":420},[220,5119,359],{"class":264},[212,5121,5122],{"className":468,"code":4947,"language":469,"meta":178,"style":178},[99,5123,5124,5132,5140,5148,5152,5160,5168,5190,5198],{"__ignoreMap":178},[220,5125,5126,5128,5130],{"class":222,"line":223},[220,5127,343],{"class":264},[220,5129,347],{"class":420},[220,5131,359],{"class":264},[220,5133,5134,5136,5138],{"class":222,"line":179},[220,5135,1999],{"class":264},[220,5137,4964],{"class":609},[220,5139,749],{"class":264},[220,5141,5142,5144,5146],{"class":222,"line":389},[220,5143,364],{"class":264},[220,5145,367],{"class":420},[220,5147,386],{"class":264},[220,5149,5150],{"class":222,"line":399},[220,5151,647],{"emptyLinePlaceholder":194},[220,5153,5154,5156,5158],{"class":222,"line":644},[220,5155,1999],{"class":264},[220,5157,4985],{"class":609},[220,5159,749],{"class":264},[220,5161,5162,5164,5166],{"class":222,"line":650},[220,5163,364],{"class":264},[220,5165,4471],{"class":420},[220,5167,359],{"class":264},[220,5169,5170,5172,5174,5176,5178,5180,5182,5184,5186,5188],{"class":222,"line":656},[220,5171,2550],{"class":264},[220,5173,2553],{"class":420},[220,5175,1588],{"class":226},[220,5177,353],{"class":260},[220,5179,2560],{"class":230},[220,5181,4448],{"class":226},[220,5183,353],{"class":260},[220,5185,743],{"class":264},[220,5187,4545],{"class":420},[220,5189,4548],{"class":264},[220,5191,5192,5194,5196],{"class":222,"line":673},[220,5193,2567],{"class":264},[220,5195,4471],{"class":420},[220,5197,359],{"class":264},[220,5199,5200,5202,5204],{"class":222,"line":682},[220,5201,402],{"class":264},[220,5203,347],{"class":420},[220,5205,359],{"class":264},[212,5207,5209],{"className":251,"code":5208,"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,5210,5211,5225,5229,5234,5242,5247,5256,5273,5278,5282],{"__ignoreMap":178},[220,5212,5213,5215,5217,5219,5221,5223],{"class":222,"line":223},[220,5214,1735],{"class":260},[220,5216,1738],{"class":420},[220,5218,1741],{"class":260},[220,5220,1744],{"class":260},[220,5222,1747],{"class":226},[220,5224,1750],{"class":264},[220,5226,5227],{"class":222,"line":179},[220,5228,1765],{"class":264},[220,5230,5231],{"class":222,"line":389},[220,5232,5233],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,5235,5236,5238,5240],{"class":222,"line":399},[220,5237,1770],{"class":264},[220,5239,2462],{"class":230},[220,5241,4794],{"class":264},[220,5243,5244],{"class":222,"line":644},[220,5245,5246],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,5248,5249,5251,5253],{"class":222,"line":650},[220,5250,1770],{"class":264},[220,5252,4829],{"class":230},[220,5254,5255],{"class":264},", props: {}, children: [\n",[220,5257,5258,5261,5263,5265,5267,5269,5271],{"class":222,"line":656},[220,5259,5260],{"class":264}," { type: ",[220,5262,3206],{"class":230},[220,5264,1776],{"class":264},[220,5266,3217],{"class":230},[220,5268,4812],{"class":264},[220,5270,4545],{"class":420},[220,5272,1782],{"class":264},[220,5274,5275],{"class":222,"line":673},[220,5276,5277],{"class":264}," ]}\n",[220,5279,5280],{"class":222,"line":682},[220,5281,1787],{"class":264},[220,5283,5284],{"class":222,"line":691},[220,5285,1792],{"class":264},[19,5287],{":preset":5288},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,5290,5291,5292,5294,5295,5297],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,5293,367],{},") don't accept children, whereas components that apply effects (such as ",[99,5296,4471],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,5299,5300,5403,5517,5627,5737],{":tabs":1557},[212,5301,5303],{"className":334,"code":5302,"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,5304,5305,5313,5318,5326,5330,5335,5351,5359,5379,5387,5395],{"__ignoreMap":178},[220,5306,5307,5309,5311],{"class":222,"line":223},[220,5308,343],{"class":264},[220,5310,347],{"class":346},[220,5312,359],{"class":264},[220,5314,5315],{"class":222,"line":179},[220,5316,5317],{"class":609}," \u003C!-- Unaffected -->\n",[220,5319,5320,5322,5324],{"class":222,"line":389},[220,5321,364],{"class":264},[220,5323,367],{"class":346},[220,5325,386],{"class":264},[220,5327,5328],{"class":222,"line":399},[220,5329,647],{"emptyLinePlaceholder":194},[220,5331,5332],{"class":222,"line":644},[220,5333,5334],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,5336,5337,5339,5342,5344,5346,5349],{"class":222,"line":650},[220,5338,364],{"class":264},[220,5340,5341],{"class":346},"GridDistortion",[220,5343,4448],{"class":226},[220,5345,353],{"class":264},[220,5347,5348],{"class":230},"\"2\"",[220,5350,359],{"class":264},[220,5352,5353,5355,5357],{"class":222,"line":656},[220,5354,2550],{"class":264},[220,5356,4471],{"class":346},[220,5358,359],{"class":264},[220,5360,5361,5363,5365,5367,5369,5371,5373,5375,5377],{"class":222,"line":673},[220,5362,2813],{"class":264},[220,5364,2553],{"class":346},[220,5366,1588],{"class":226},[220,5368,353],{"class":264},[220,5370,2560],{"class":230},[220,5372,4448],{"class":226},[220,5374,353],{"class":264},[220,5376,4453],{"class":230},[220,5378,386],{"class":264},[220,5380,5381,5383,5385],{"class":222,"line":682},[220,5382,2828],{"class":264},[220,5384,4471],{"class":346},[220,5386,359],{"class":264},[220,5388,5389,5391,5393],{"class":222,"line":691},[220,5390,2567],{"class":264},[220,5392,5341],{"class":346},[220,5394,359],{"class":264},[220,5396,5397,5399,5401],{"class":222,"line":696},[220,5398,402],{"class":264},[220,5400,347],{"class":346},[220,5402,359],{"class":264},[212,5404,5406],{"className":409,"code":5405,"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,5407,5408,5416,5425,5433,5437,5446,5463,5471,5493,5501,5509],{"__ignoreMap":178},[220,5409,5410,5412,5414],{"class":222,"line":223},[220,5411,343],{"class":264},[220,5413,347],{"class":420},[220,5415,359],{"class":264},[220,5417,5418,5420,5423],{"class":222,"line":179},[220,5419,1999],{"class":264},[220,5421,5422],{"class":609},"\u002F* Unaffected *\u002F",[220,5424,749],{"class":264},[220,5426,5427,5429,5431],{"class":222,"line":389},[220,5428,364],{"class":264},[220,5430,367],{"class":420},[220,5432,386],{"class":264},[220,5434,5435],{"class":222,"line":399},[220,5436,647],{"emptyLinePlaceholder":194},[220,5438,5439,5441,5444],{"class":222,"line":644},[220,5440,1999],{"class":264},[220,5442,5443],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,5445,749],{"class":264},[220,5447,5448,5450,5452,5454,5456,5458,5461],{"class":222,"line":650},[220,5449,364],{"class":264},[220,5451,5341],{"class":420},[220,5453,4448],{"class":226},[220,5455,353],{"class":260},[220,5457,743],{"class":264},[220,5459,5460],{"class":420},"2",[220,5462,2335],{"class":264},[220,5464,5465,5467,5469],{"class":222,"line":656},[220,5466,2550],{"class":264},[220,5468,4471],{"class":420},[220,5470,359],{"class":264},[220,5472,5473,5475,5477,5479,5481,5483,5485,5487,5489,5491],{"class":222,"line":673},[220,5474,2813],{"class":264},[220,5476,2553],{"class":420},[220,5478,1588],{"class":226},[220,5480,353],{"class":260},[220,5482,2560],{"class":230},[220,5484,4448],{"class":226},[220,5486,353],{"class":260},[220,5488,743],{"class":264},[220,5490,4545],{"class":420},[220,5492,4548],{"class":264},[220,5494,5495,5497,5499],{"class":222,"line":682},[220,5496,2828],{"class":264},[220,5498,4471],{"class":420},[220,5500,359],{"class":264},[220,5502,5503,5505,5507],{"class":222,"line":691},[220,5504,2567],{"class":264},[220,5506,5341],{"class":420},[220,5508,359],{"class":264},[220,5510,5511,5513,5515],{"class":222,"line":696},[220,5512,402],{"class":264},[220,5514,347],{"class":420},[220,5516,359],{"class":264},[212,5518,5519],{"className":468,"code":5405,"language":469,"meta":178,"style":178},[99,5520,5521,5529,5537,5545,5549,5557,5573,5581,5603,5611,5619],{"__ignoreMap":178},[220,5522,5523,5525,5527],{"class":222,"line":223},[220,5524,343],{"class":264},[220,5526,347],{"class":420},[220,5528,359],{"class":264},[220,5530,5531,5533,5535],{"class":222,"line":179},[220,5532,1999],{"class":264},[220,5534,5422],{"class":609},[220,5536,749],{"class":264},[220,5538,5539,5541,5543],{"class":222,"line":389},[220,5540,364],{"class":264},[220,5542,367],{"class":420},[220,5544,386],{"class":264},[220,5546,5547],{"class":222,"line":399},[220,5548,647],{"emptyLinePlaceholder":194},[220,5550,5551,5553,5555],{"class":222,"line":644},[220,5552,1999],{"class":264},[220,5554,5443],{"class":609},[220,5556,749],{"class":264},[220,5558,5559,5561,5563,5565,5567,5569,5571],{"class":222,"line":650},[220,5560,364],{"class":264},[220,5562,5341],{"class":420},[220,5564,4448],{"class":226},[220,5566,353],{"class":260},[220,5568,743],{"class":264},[220,5570,5460],{"class":420},[220,5572,2335],{"class":264},[220,5574,5575,5577,5579],{"class":222,"line":656},[220,5576,2550],{"class":264},[220,5578,4471],{"class":420},[220,5580,359],{"class":264},[220,5582,5583,5585,5587,5589,5591,5593,5595,5597,5599,5601],{"class":222,"line":673},[220,5584,2813],{"class":264},[220,5586,2553],{"class":420},[220,5588,1588],{"class":226},[220,5590,353],{"class":260},[220,5592,2560],{"class":230},[220,5594,4448],{"class":226},[220,5596,353],{"class":260},[220,5598,743],{"class":264},[220,5600,4545],{"class":420},[220,5602,4548],{"class":264},[220,5604,5605,5607,5609],{"class":222,"line":682},[220,5606,2828],{"class":264},[220,5608,4471],{"class":420},[220,5610,359],{"class":264},[220,5612,5613,5615,5617],{"class":222,"line":691},[220,5614,2567],{"class":264},[220,5616,5341],{"class":420},[220,5618,359],{"class":264},[220,5620,5621,5623,5625],{"class":222,"line":696},[220,5622,402],{"class":264},[220,5624,347],{"class":420},[220,5626,359],{"class":264},[212,5628,5629],{"className":468,"code":5405,"language":469,"meta":178,"style":178},[99,5630,5631,5639,5647,5655,5659,5667,5683,5691,5713,5721,5729],{"__ignoreMap":178},[220,5632,5633,5635,5637],{"class":222,"line":223},[220,5634,343],{"class":264},[220,5636,347],{"class":420},[220,5638,359],{"class":264},[220,5640,5641,5643,5645],{"class":222,"line":179},[220,5642,1999],{"class":264},[220,5644,5422],{"class":609},[220,5646,749],{"class":264},[220,5648,5649,5651,5653],{"class":222,"line":389},[220,5650,364],{"class":264},[220,5652,367],{"class":420},[220,5654,386],{"class":264},[220,5656,5657],{"class":222,"line":399},[220,5658,647],{"emptyLinePlaceholder":194},[220,5660,5661,5663,5665],{"class":222,"line":644},[220,5662,1999],{"class":264},[220,5664,5443],{"class":609},[220,5666,749],{"class":264},[220,5668,5669,5671,5673,5675,5677,5679,5681],{"class":222,"line":650},[220,5670,364],{"class":264},[220,5672,5341],{"class":420},[220,5674,4448],{"class":226},[220,5676,353],{"class":260},[220,5678,743],{"class":264},[220,5680,5460],{"class":420},[220,5682,2335],{"class":264},[220,5684,5685,5687,5689],{"class":222,"line":656},[220,5686,2550],{"class":264},[220,5688,4471],{"class":420},[220,5690,359],{"class":264},[220,5692,5693,5695,5697,5699,5701,5703,5705,5707,5709,5711],{"class":222,"line":673},[220,5694,2813],{"class":264},[220,5696,2553],{"class":420},[220,5698,1588],{"class":226},[220,5700,353],{"class":260},[220,5702,2560],{"class":230},[220,5704,4448],{"class":226},[220,5706,353],{"class":260},[220,5708,743],{"class":264},[220,5710,4545],{"class":420},[220,5712,4548],{"class":264},[220,5714,5715,5717,5719],{"class":222,"line":682},[220,5716,2828],{"class":264},[220,5718,4471],{"class":420},[220,5720,359],{"class":264},[220,5722,5723,5725,5727],{"class":222,"line":691},[220,5724,2567],{"class":264},[220,5726,5341],{"class":420},[220,5728,359],{"class":264},[220,5730,5731,5733,5735],{"class":222,"line":696},[220,5732,402],{"class":264},[220,5734,347],{"class":420},[220,5736,359],{"class":264},[212,5738,5740],{"className":251,"code":5739,"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,5741,5742,5756,5760,5765,5773,5778,5793,5801,5818,5823,5827,5831],{"__ignoreMap":178},[220,5743,5744,5746,5748,5750,5752,5754],{"class":222,"line":223},[220,5745,1735],{"class":260},[220,5747,1738],{"class":420},[220,5749,1741],{"class":260},[220,5751,1744],{"class":260},[220,5753,1747],{"class":226},[220,5755,1750],{"class":264},[220,5757,5758],{"class":222,"line":179},[220,5759,1765],{"class":264},[220,5761,5762],{"class":222,"line":389},[220,5763,5764],{"class":609}," \u002F\u002F Unaffected\n",[220,5766,5767,5769,5771],{"class":222,"line":399},[220,5768,1770],{"class":264},[220,5770,2462],{"class":230},[220,5772,4794],{"class":264},[220,5774,5775],{"class":222,"line":644},[220,5776,5777],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,5779,5780,5782,5785,5788,5790],{"class":222,"line":650},[220,5781,1770],{"class":264},[220,5783,5784],{"class":230},"'GridDistortion'",[220,5786,5787],{"class":264},", props: { radius: ",[220,5789,5460],{"class":420},[220,5791,5792],{"class":264}," }, children: [\n",[220,5794,5795,5797,5799],{"class":222,"line":656},[220,5796,5260],{"class":264},[220,5798,4829],{"class":230},[220,5800,5255],{"class":264},[220,5802,5803,5806,5808,5810,5812,5814,5816],{"class":222,"line":673},[220,5804,5805],{"class":264}," { type: ",[220,5807,3206],{"class":230},[220,5809,1776],{"class":264},[220,5811,3217],{"class":230},[220,5813,4812],{"class":264},[220,5815,4545],{"class":420},[220,5817,1782],{"class":264},[220,5819,5820],{"class":222,"line":682},[220,5821,5822],{"class":264}," ]}\n",[220,5824,5825],{"class":222,"line":691},[220,5826,5277],{"class":264},[220,5828,5829],{"class":222,"line":696},[220,5830,1787],{"class":264},[220,5832,5833],{"class":222,"line":702},[220,5834,1792],{"class":264},[19,5836],{":preset":5837},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,5839,5840],{},"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":5842},[5843,5844],{"id":4388,"depth":179,"text":4389},{"id":4845,"depth":179,"text":4846},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":5845},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":5852,"title":5853,"body":5854,"category":8480,"description":8481,"exclude":190,"extension":191,"forceFramework":190,"icon":8482,"meta":8483,"navigation":194,"path":8484,"seo":8485,"stem":8486,"__hash__":8487},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":5855,"toc":8470},[5856,5859,5862,5866,5877,6220,6223,6228,6323,6327,6330,6905,6908,6911,6925,7240,7243,7246,7250,7261,7282,7293,7297,7312,7318,7727,7730,7736,7740,7747,7781,8465,8468],[11,5857,5853],{"id":5858},"blending-masking",[15,5860,5861],{},"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,5863,5865],{"id":5864},"blend-modes","Blend Modes",[15,5867,5868,5869,5872,5873,5876],{},"Every component has a ",[99,5870,5871],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,5874,5875],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,5878,5879,5946,6019,6089,6159],{":tabs":1557},[212,5880,5882],{"className":334,"code":5881,"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,5883,5884,5892,5900,5904,5909,5938],{"__ignoreMap":178},[220,5885,5886,5888,5890],{"class":222,"line":223},[220,5887,343],{"class":264},[220,5889,347],{"class":346},[220,5891,359],{"class":264},[220,5893,5894,5896,5898],{"class":222,"line":179},[220,5895,364],{"class":264},[220,5897,367],{"class":346},[220,5899,386],{"class":264},[220,5901,5902],{"class":222,"line":389},[220,5903,647],{"emptyLinePlaceholder":194},[220,5905,5906],{"class":222,"line":399},[220,5907,5908],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,5910,5911,5913,5915,5917,5919,5921,5923,5925,5928,5931,5933,5936],{"class":222,"line":644},[220,5912,364],{"class":264},[220,5914,2553],{"class":346},[220,5916,1588],{"class":226},[220,5918,353],{"class":264},[220,5920,2560],{"class":230},[220,5922,4448],{"class":226},[220,5924,353],{"class":264},[220,5926,5927],{"class":230},"\"0.5\"",[220,5929,5930],{"class":226}," blendMode",[220,5932,353],{"class":264},[220,5934,5935],{"class":230},"\"multiply\"",[220,5937,386],{"class":264},[220,5939,5940,5942,5944],{"class":222,"line":650},[220,5941,402],{"class":264},[220,5943,347],{"class":346},[220,5945,359],{"class":264},[212,5947,5949],{"className":409,"code":5948,"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,5950,5951,5959,5967,5971,5980,6011],{"__ignoreMap":178},[220,5952,5953,5955,5957],{"class":222,"line":223},[220,5954,343],{"class":264},[220,5956,347],{"class":420},[220,5958,359],{"class":264},[220,5960,5961,5963,5965],{"class":222,"line":179},[220,5962,364],{"class":264},[220,5964,367],{"class":420},[220,5966,386],{"class":264},[220,5968,5969],{"class":222,"line":389},[220,5970,647],{"emptyLinePlaceholder":194},[220,5972,5973,5975,5978],{"class":222,"line":399},[220,5974,1999],{"class":264},[220,5976,5977],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,5979,749],{"class":264},[220,5981,5982,5984,5986,5988,5990,5992,5994,5996,5998,6001,6003,6005,6007,6009],{"class":222,"line":644},[220,5983,364],{"class":264},[220,5985,2553],{"class":420},[220,5987,1588],{"class":226},[220,5989,353],{"class":260},[220,5991,2560],{"class":230},[220,5993,4448],{"class":226},[220,5995,353],{"class":260},[220,5997,743],{"class":264},[220,5999,6000],{"class":420},"0.5",[220,6002,2914],{"class":264},[220,6004,5871],{"class":226},[220,6006,353],{"class":260},[220,6008,5935],{"class":230},[220,6010,386],{"class":264},[220,6012,6013,6015,6017],{"class":222,"line":650},[220,6014,402],{"class":264},[220,6016,347],{"class":420},[220,6018,359],{"class":264},[212,6020,6021],{"className":468,"code":5948,"language":469,"meta":178,"style":178},[99,6022,6023,6031,6039,6043,6051,6081],{"__ignoreMap":178},[220,6024,6025,6027,6029],{"class":222,"line":223},[220,6026,343],{"class":264},[220,6028,347],{"class":420},[220,6030,359],{"class":264},[220,6032,6033,6035,6037],{"class":222,"line":179},[220,6034,364],{"class":264},[220,6036,367],{"class":420},[220,6038,386],{"class":264},[220,6040,6041],{"class":222,"line":389},[220,6042,647],{"emptyLinePlaceholder":194},[220,6044,6045,6047,6049],{"class":222,"line":399},[220,6046,1999],{"class":264},[220,6048,5977],{"class":609},[220,6050,749],{"class":264},[220,6052,6053,6055,6057,6059,6061,6063,6065,6067,6069,6071,6073,6075,6077,6079],{"class":222,"line":644},[220,6054,364],{"class":264},[220,6056,2553],{"class":420},[220,6058,1588],{"class":226},[220,6060,353],{"class":260},[220,6062,2560],{"class":230},[220,6064,4448],{"class":226},[220,6066,353],{"class":260},[220,6068,743],{"class":264},[220,6070,6000],{"class":420},[220,6072,2914],{"class":264},[220,6074,5871],{"class":226},[220,6076,353],{"class":260},[220,6078,5935],{"class":230},[220,6080,386],{"class":264},[220,6082,6083,6085,6087],{"class":222,"line":650},[220,6084,402],{"class":264},[220,6086,347],{"class":420},[220,6088,359],{"class":264},[212,6090,6091],{"className":468,"code":5948,"language":469,"meta":178,"style":178},[99,6092,6093,6101,6109,6113,6121,6151],{"__ignoreMap":178},[220,6094,6095,6097,6099],{"class":222,"line":223},[220,6096,343],{"class":264},[220,6098,347],{"class":420},[220,6100,359],{"class":264},[220,6102,6103,6105,6107],{"class":222,"line":179},[220,6104,364],{"class":264},[220,6106,367],{"class":420},[220,6108,386],{"class":264},[220,6110,6111],{"class":222,"line":389},[220,6112,647],{"emptyLinePlaceholder":194},[220,6114,6115,6117,6119],{"class":222,"line":399},[220,6116,1999],{"class":264},[220,6118,5977],{"class":609},[220,6120,749],{"class":264},[220,6122,6123,6125,6127,6129,6131,6133,6135,6137,6139,6141,6143,6145,6147,6149],{"class":222,"line":644},[220,6124,364],{"class":264},[220,6126,2553],{"class":420},[220,6128,1588],{"class":226},[220,6130,353],{"class":260},[220,6132,2560],{"class":230},[220,6134,4448],{"class":226},[220,6136,353],{"class":260},[220,6138,743],{"class":264},[220,6140,6000],{"class":420},[220,6142,2914],{"class":264},[220,6144,5871],{"class":226},[220,6146,353],{"class":260},[220,6148,5935],{"class":230},[220,6150,386],{"class":264},[220,6152,6153,6155,6157],{"class":222,"line":650},[220,6154,402],{"class":264},[220,6156,347],{"class":420},[220,6158,359],{"class":264},[212,6160,6162],{"className":251,"code":6161,"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,6163,6164,6178,6182,6190,6212,6216],{"__ignoreMap":178},[220,6165,6166,6168,6170,6172,6174,6176],{"class":222,"line":223},[220,6167,1735],{"class":260},[220,6169,1738],{"class":420},[220,6171,1741],{"class":260},[220,6173,1744],{"class":260},[220,6175,1747],{"class":226},[220,6177,1750],{"class":264},[220,6179,6180],{"class":222,"line":179},[220,6181,1765],{"class":264},[220,6183,6184,6186,6188],{"class":222,"line":389},[220,6185,1770],{"class":264},[220,6187,2462],{"class":230},[220,6189,4794],{"class":264},[220,6191,6192,6194,6196,6198,6200,6202,6204,6207,6210],{"class":222,"line":399},[220,6193,1770],{"class":264},[220,6195,3206],{"class":230},[220,6197,1776],{"class":264},[220,6199,3217],{"class":230},[220,6201,4812],{"class":264},[220,6203,6000],{"class":420},[220,6205,6206],{"class":264},", blendMode: ",[220,6208,6209],{"class":230},"'multiply'",[220,6211,1782],{"class":264},[220,6213,6214],{"class":222,"line":644},[220,6215,1787],{"class":264},[220,6217,6218],{"class":222,"line":650},[220,6219,1792],{"class":264},[19,6221],{":preset":6222},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,6224,6225],{},[159,6226,6227],{},"Available blend modes:",[34,6229,6230,6237,6254,6270,6284,6295,6312],{},[37,6231,6232,3476,6235],{},[159,6233,6234],{},"Basic",[99,6236,5875],{},[37,6238,6239,3476,6242,1895,6245,1895,6248,1895,6251],{},[159,6240,6241],{},"Darkening",[99,6243,6244],{},"multiply",[99,6246,6247],{},"darken",[99,6249,6250],{},"colorBurn",[99,6252,6253],{},"linearBurn",[37,6255,6256,3476,6259,1895,6262,1895,6265,1895,6268],{},[159,6257,6258],{},"Lightening",[99,6260,6261],{},"screen",[99,6263,6264],{},"lighten",[99,6266,6267],{},"colorDodge",[99,6269,1924],{},[37,6271,6272,3476,6275,1895,6278,1895,6281],{},[159,6273,6274],{},"Contrast",[99,6276,6277],{},"overlay",[99,6279,6280],{},"softLight",[99,6282,6283],{},"hardLight",[37,6285,6286,3476,6289,1895,6292],{},[159,6287,6288],{},"Difference",[99,6290,6291],{},"difference",[99,6293,6294],{},"exclusion",[37,6296,6297,3476,6300,1895,6303,1895,6306,1895,6309],{},[159,6298,6299],{},"Color",[99,6301,6302],{},"hue",[99,6304,6305],{},"saturation",[99,6307,6308],{},"color",[99,6310,6311],{},"luminosity",[37,6313,6314,3476,6317,1895,6320],{},[159,6315,6316],{},"Color Space Blending",[99,6318,6319],{},"normal-oklab",[99,6321,6322],{},"normal-oklch",[3262,6324,6326],{"id":6325},"combining-blend-modes","Combining Blend Modes",[15,6328,6329],{},"Use different blend modes on multiple layers to create complex interactions:",[246,6331,6332,6437,6564,6684,6804],{":tabs":1557},[212,6333,6335],{"className":334,"code":6334,"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,6336,6337,6345,6353,6357,6394,6429],{"__ignoreMap":178},[220,6338,6339,6341,6343],{"class":222,"line":223},[220,6340,343],{"class":264},[220,6342,347],{"class":346},[220,6344,359],{"class":264},[220,6346,6347,6349,6351],{"class":222,"line":179},[220,6348,364],{"class":264},[220,6350,367],{"class":346},[220,6352,386],{"class":264},[220,6354,6355],{"class":222,"line":389},[220,6356,647],{"emptyLinePlaceholder":194},[220,6358,6359,6361,6363,6365,6367,6370,6372,6374,6377,6380,6382,6385,6387,6389,6392],{"class":222,"line":399},[220,6360,364],{"class":264},[220,6362,2553],{"class":346},[220,6364,1588],{"class":226},[220,6366,353],{"class":264},[220,6368,6369],{"class":230},"\"#00ffff\"",[220,6371,4448],{"class":226},[220,6373,353],{"class":264},[220,6375,6376],{"class":230},"\"0.6\"",[220,6378,6379],{"class":226}," :center",[220,6381,353],{"class":264},[220,6383,6384],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,6386,5930],{"class":226},[220,6388,353],{"class":264},[220,6390,6391],{"class":230},"\"screen\"",[220,6393,386],{"class":264},[220,6395,6396,6398,6400,6402,6404,6407,6409,6411,6413,6415,6417,6420,6422,6424,6427],{"class":222,"line":644},[220,6397,364],{"class":264},[220,6399,2553],{"class":346},[220,6401,1588],{"class":226},[220,6403,353],{"class":264},[220,6405,6406],{"class":230},"\"#ff00ff\"",[220,6408,4448],{"class":226},[220,6410,353],{"class":264},[220,6412,6376],{"class":230},[220,6414,6379],{"class":226},[220,6416,353],{"class":264},[220,6418,6419],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,6421,5930],{"class":226},[220,6423,353],{"class":264},[220,6425,6426],{"class":230},"\"difference\"",[220,6428,386],{"class":264},[220,6430,6431,6433,6435],{"class":222,"line":650},[220,6432,402],{"class":264},[220,6434,347],{"class":346},[220,6436,359],{"class":264},[212,6438,6440],{"className":409,"code":6439,"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,6441,6442,6450,6458,6462,6512,6556],{"__ignoreMap":178},[220,6443,6444,6446,6448],{"class":222,"line":223},[220,6445,343],{"class":264},[220,6447,347],{"class":420},[220,6449,359],{"class":264},[220,6451,6452,6454,6456],{"class":222,"line":179},[220,6453,364],{"class":264},[220,6455,367],{"class":420},[220,6457,386],{"class":264},[220,6459,6460],{"class":222,"line":389},[220,6461,647],{"emptyLinePlaceholder":194},[220,6463,6464,6466,6468,6470,6472,6474,6476,6478,6480,6483,6485,6488,6490,6493,6496,6499,6501,6504,6506,6508,6510],{"class":222,"line":399},[220,6465,364],{"class":264},[220,6467,2553],{"class":420},[220,6469,1588],{"class":226},[220,6471,353],{"class":260},[220,6473,6369],{"class":230},[220,6475,4448],{"class":226},[220,6477,353],{"class":260},[220,6479,743],{"class":264},[220,6481,6482],{"class":420},"0.6",[220,6484,2914],{"class":264},[220,6486,6487],{"class":226},"center",[220,6489,353],{"class":260},[220,6491,6492],{"class":264},"{{ x: ",[220,6494,6495],{"class":420},"0.4",[220,6497,6498],{"class":264},", y: ",[220,6500,6000],{"class":420},[220,6502,6503],{"class":264}," }} ",[220,6505,5871],{"class":226},[220,6507,353],{"class":260},[220,6509,6391],{"class":230},[220,6511,386],{"class":264},[220,6513,6514,6516,6518,6520,6522,6524,6526,6528,6530,6532,6534,6536,6538,6540,6542,6544,6546,6548,6550,6552,6554],{"class":222,"line":644},[220,6515,364],{"class":264},[220,6517,2553],{"class":420},[220,6519,1588],{"class":226},[220,6521,353],{"class":260},[220,6523,6406],{"class":230},[220,6525,4448],{"class":226},[220,6527,353],{"class":260},[220,6529,743],{"class":264},[220,6531,6482],{"class":420},[220,6533,2914],{"class":264},[220,6535,6487],{"class":226},[220,6537,353],{"class":260},[220,6539,6492],{"class":264},[220,6541,6482],{"class":420},[220,6543,6498],{"class":264},[220,6545,6000],{"class":420},[220,6547,6503],{"class":264},[220,6549,5871],{"class":226},[220,6551,353],{"class":260},[220,6553,6426],{"class":230},[220,6555,386],{"class":264},[220,6557,6558,6560,6562],{"class":222,"line":650},[220,6559,402],{"class":264},[220,6561,347],{"class":420},[220,6563,359],{"class":264},[212,6565,6566],{"className":468,"code":6439,"language":469,"meta":178,"style":178},[99,6567,6568,6576,6584,6588,6632,6676],{"__ignoreMap":178},[220,6569,6570,6572,6574],{"class":222,"line":223},[220,6571,343],{"class":264},[220,6573,347],{"class":420},[220,6575,359],{"class":264},[220,6577,6578,6580,6582],{"class":222,"line":179},[220,6579,364],{"class":264},[220,6581,367],{"class":420},[220,6583,386],{"class":264},[220,6585,6586],{"class":222,"line":389},[220,6587,647],{"emptyLinePlaceholder":194},[220,6589,6590,6592,6594,6596,6598,6600,6602,6604,6606,6608,6610,6612,6614,6616,6618,6620,6622,6624,6626,6628,6630],{"class":222,"line":399},[220,6591,364],{"class":264},[220,6593,2553],{"class":420},[220,6595,1588],{"class":226},[220,6597,353],{"class":260},[220,6599,6369],{"class":230},[220,6601,4448],{"class":226},[220,6603,353],{"class":260},[220,6605,743],{"class":264},[220,6607,6482],{"class":420},[220,6609,2914],{"class":264},[220,6611,6487],{"class":226},[220,6613,353],{"class":260},[220,6615,6492],{"class":264},[220,6617,6495],{"class":420},[220,6619,6498],{"class":264},[220,6621,6000],{"class":420},[220,6623,6503],{"class":264},[220,6625,5871],{"class":226},[220,6627,353],{"class":260},[220,6629,6391],{"class":230},[220,6631,386],{"class":264},[220,6633,6634,6636,6638,6640,6642,6644,6646,6648,6650,6652,6654,6656,6658,6660,6662,6664,6666,6668,6670,6672,6674],{"class":222,"line":644},[220,6635,364],{"class":264},[220,6637,2553],{"class":420},[220,6639,1588],{"class":226},[220,6641,353],{"class":260},[220,6643,6406],{"class":230},[220,6645,4448],{"class":226},[220,6647,353],{"class":260},[220,6649,743],{"class":264},[220,6651,6482],{"class":420},[220,6653,2914],{"class":264},[220,6655,6487],{"class":226},[220,6657,353],{"class":260},[220,6659,6492],{"class":264},[220,6661,6482],{"class":420},[220,6663,6498],{"class":264},[220,6665,6000],{"class":420},[220,6667,6503],{"class":264},[220,6669,5871],{"class":226},[220,6671,353],{"class":260},[220,6673,6426],{"class":230},[220,6675,386],{"class":264},[220,6677,6678,6680,6682],{"class":222,"line":650},[220,6679,402],{"class":264},[220,6681,347],{"class":420},[220,6683,359],{"class":264},[212,6685,6686],{"className":468,"code":6439,"language":469,"meta":178,"style":178},[99,6687,6688,6696,6704,6708,6752,6796],{"__ignoreMap":178},[220,6689,6690,6692,6694],{"class":222,"line":223},[220,6691,343],{"class":264},[220,6693,347],{"class":420},[220,6695,359],{"class":264},[220,6697,6698,6700,6702],{"class":222,"line":179},[220,6699,364],{"class":264},[220,6701,367],{"class":420},[220,6703,386],{"class":264},[220,6705,6706],{"class":222,"line":389},[220,6707,647],{"emptyLinePlaceholder":194},[220,6709,6710,6712,6714,6716,6718,6720,6722,6724,6726,6728,6730,6732,6734,6736,6738,6740,6742,6744,6746,6748,6750],{"class":222,"line":399},[220,6711,364],{"class":264},[220,6713,2553],{"class":420},[220,6715,1588],{"class":226},[220,6717,353],{"class":260},[220,6719,6369],{"class":230},[220,6721,4448],{"class":226},[220,6723,353],{"class":260},[220,6725,743],{"class":264},[220,6727,6482],{"class":420},[220,6729,2914],{"class":264},[220,6731,6487],{"class":226},[220,6733,353],{"class":260},[220,6735,6492],{"class":264},[220,6737,6495],{"class":420},[220,6739,6498],{"class":264},[220,6741,6000],{"class":420},[220,6743,6503],{"class":264},[220,6745,5871],{"class":226},[220,6747,353],{"class":260},[220,6749,6391],{"class":230},[220,6751,386],{"class":264},[220,6753,6754,6756,6758,6760,6762,6764,6766,6768,6770,6772,6774,6776,6778,6780,6782,6784,6786,6788,6790,6792,6794],{"class":222,"line":644},[220,6755,364],{"class":264},[220,6757,2553],{"class":420},[220,6759,1588],{"class":226},[220,6761,353],{"class":260},[220,6763,6406],{"class":230},[220,6765,4448],{"class":226},[220,6767,353],{"class":260},[220,6769,743],{"class":264},[220,6771,6482],{"class":420},[220,6773,2914],{"class":264},[220,6775,6487],{"class":226},[220,6777,353],{"class":260},[220,6779,6492],{"class":264},[220,6781,6482],{"class":420},[220,6783,6498],{"class":264},[220,6785,6000],{"class":420},[220,6787,6503],{"class":264},[220,6789,5871],{"class":226},[220,6791,353],{"class":260},[220,6793,6426],{"class":230},[220,6795,386],{"class":264},[220,6797,6798,6800,6802],{"class":222,"line":650},[220,6799,402],{"class":264},[220,6801,347],{"class":420},[220,6803,359],{"class":264},[212,6805,6807],{"className":251,"code":6806,"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,6808,6809,6823,6827,6835,6867,6897,6901],{"__ignoreMap":178},[220,6810,6811,6813,6815,6817,6819,6821],{"class":222,"line":223},[220,6812,1735],{"class":260},[220,6814,1738],{"class":420},[220,6816,1741],{"class":260},[220,6818,1744],{"class":260},[220,6820,1747],{"class":226},[220,6822,1750],{"class":264},[220,6824,6825],{"class":222,"line":179},[220,6826,1765],{"class":264},[220,6828,6829,6831,6833],{"class":222,"line":389},[220,6830,1770],{"class":264},[220,6832,2462],{"class":230},[220,6834,4794],{"class":264},[220,6836,6837,6839,6841,6843,6846,6848,6850,6853,6855,6857,6859,6862,6865],{"class":222,"line":399},[220,6838,1770],{"class":264},[220,6840,3206],{"class":230},[220,6842,1776],{"class":264},[220,6844,6845],{"class":230},"'#00ffff'",[220,6847,4812],{"class":264},[220,6849,6482],{"class":420},[220,6851,6852],{"class":264},", center: { x: ",[220,6854,6495],{"class":420},[220,6856,6498],{"class":264},[220,6858,6000],{"class":420},[220,6860,6861],{"class":264}," }, blendMode: ",[220,6863,6864],{"class":230},"'screen'",[220,6866,4817],{"class":264},[220,6868,6869,6871,6873,6875,6878,6880,6882,6884,6886,6888,6890,6892,6895],{"class":222,"line":644},[220,6870,1770],{"class":264},[220,6872,3206],{"class":230},[220,6874,1776],{"class":264},[220,6876,6877],{"class":230},"'#ff00ff'",[220,6879,4812],{"class":264},[220,6881,6482],{"class":420},[220,6883,6852],{"class":264},[220,6885,6482],{"class":420},[220,6887,6498],{"class":264},[220,6889,6000],{"class":420},[220,6891,6861],{"class":264},[220,6893,6894],{"class":230},"'difference'",[220,6896,1782],{"class":264},[220,6898,6899],{"class":222,"line":650},[220,6900,1787],{"class":264},[220,6902,6903],{"class":222,"line":656},[220,6904,1792],{"class":264},[19,6906],{":preset":6907},"{\"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,6909,6910],{"id":2921},"Opacity",[15,6912,6913,6914,6916,6917,6920,6921,6924],{},"Control layer transparency with the ",[99,6915,2921],{}," prop. Values range from ",[99,6918,6919],{},"0"," (fully transparent) to ",[99,6922,6923],{},"1"," (fully opaque):",[246,6926,6927,6987,7052,7116,7180],{":tabs":1557},[212,6928,6930],{"className":334,"code":6929,"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,6931,6932,6940,6948,6952,6979],{"__ignoreMap":178},[220,6933,6934,6936,6938],{"class":222,"line":223},[220,6935,343],{"class":264},[220,6937,347],{"class":346},[220,6939,359],{"class":264},[220,6941,6942,6944,6946],{"class":222,"line":179},[220,6943,364],{"class":264},[220,6945,367],{"class":346},[220,6947,386],{"class":264},[220,6949,6950],{"class":222,"line":389},[220,6951,647],{"emptyLinePlaceholder":194},[220,6953,6954,6956,6958,6960,6962,6964,6966,6968,6970,6973,6975,6977],{"class":222,"line":399},[220,6955,364],{"class":264},[220,6957,2553],{"class":346},[220,6959,1588],{"class":226},[220,6961,353],{"class":264},[220,6963,2560],{"class":230},[220,6965,4448],{"class":226},[220,6967,353],{"class":264},[220,6969,4453],{"class":230},[220,6971,6972],{"class":226}," opacity",[220,6974,353],{"class":264},[220,6976,5927],{"class":230},[220,6978,386],{"class":264},[220,6980,6981,6983,6985],{"class":222,"line":644},[220,6982,402],{"class":264},[220,6984,347],{"class":346},[220,6986,359],{"class":264},[212,6988,6990],{"className":409,"code":6989,"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,6991,6992,7000,7008,7012,7044],{"__ignoreMap":178},[220,6993,6994,6996,6998],{"class":222,"line":223},[220,6995,343],{"class":264},[220,6997,347],{"class":420},[220,6999,359],{"class":264},[220,7001,7002,7004,7006],{"class":222,"line":179},[220,7003,364],{"class":264},[220,7005,367],{"class":420},[220,7007,386],{"class":264},[220,7009,7010],{"class":222,"line":389},[220,7011,647],{"emptyLinePlaceholder":194},[220,7013,7014,7016,7018,7020,7022,7024,7026,7028,7030,7032,7034,7036,7038,7040,7042],{"class":222,"line":399},[220,7015,364],{"class":264},[220,7017,2553],{"class":420},[220,7019,1588],{"class":226},[220,7021,353],{"class":260},[220,7023,2560],{"class":230},[220,7025,4448],{"class":226},[220,7027,353],{"class":260},[220,7029,743],{"class":264},[220,7031,4545],{"class":420},[220,7033,2914],{"class":264},[220,7035,2921],{"class":226},[220,7037,353],{"class":260},[220,7039,743],{"class":264},[220,7041,6000],{"class":420},[220,7043,4548],{"class":264},[220,7045,7046,7048,7050],{"class":222,"line":644},[220,7047,402],{"class":264},[220,7049,347],{"class":420},[220,7051,359],{"class":264},[212,7053,7054],{"className":468,"code":6989,"language":469,"meta":178,"style":178},[99,7055,7056,7064,7072,7076,7108],{"__ignoreMap":178},[220,7057,7058,7060,7062],{"class":222,"line":223},[220,7059,343],{"class":264},[220,7061,347],{"class":420},[220,7063,359],{"class":264},[220,7065,7066,7068,7070],{"class":222,"line":179},[220,7067,364],{"class":264},[220,7069,367],{"class":420},[220,7071,386],{"class":264},[220,7073,7074],{"class":222,"line":389},[220,7075,647],{"emptyLinePlaceholder":194},[220,7077,7078,7080,7082,7084,7086,7088,7090,7092,7094,7096,7098,7100,7102,7104,7106],{"class":222,"line":399},[220,7079,364],{"class":264},[220,7081,2553],{"class":420},[220,7083,1588],{"class":226},[220,7085,353],{"class":260},[220,7087,2560],{"class":230},[220,7089,4448],{"class":226},[220,7091,353],{"class":260},[220,7093,743],{"class":264},[220,7095,4545],{"class":420},[220,7097,2914],{"class":264},[220,7099,2921],{"class":226},[220,7101,353],{"class":260},[220,7103,743],{"class":264},[220,7105,6000],{"class":420},[220,7107,4548],{"class":264},[220,7109,7110,7112,7114],{"class":222,"line":644},[220,7111,402],{"class":264},[220,7113,347],{"class":420},[220,7115,359],{"class":264},[212,7117,7118],{"className":468,"code":6989,"language":469,"meta":178,"style":178},[99,7119,7120,7128,7136,7140,7172],{"__ignoreMap":178},[220,7121,7122,7124,7126],{"class":222,"line":223},[220,7123,343],{"class":264},[220,7125,347],{"class":420},[220,7127,359],{"class":264},[220,7129,7130,7132,7134],{"class":222,"line":179},[220,7131,364],{"class":264},[220,7133,367],{"class":420},[220,7135,386],{"class":264},[220,7137,7138],{"class":222,"line":389},[220,7139,647],{"emptyLinePlaceholder":194},[220,7141,7142,7144,7146,7148,7150,7152,7154,7156,7158,7160,7162,7164,7166,7168,7170],{"class":222,"line":399},[220,7143,364],{"class":264},[220,7145,2553],{"class":420},[220,7147,1588],{"class":226},[220,7149,353],{"class":260},[220,7151,2560],{"class":230},[220,7153,4448],{"class":226},[220,7155,353],{"class":260},[220,7157,743],{"class":264},[220,7159,4545],{"class":420},[220,7161,2914],{"class":264},[220,7163,2921],{"class":226},[220,7165,353],{"class":260},[220,7167,743],{"class":264},[220,7169,6000],{"class":420},[220,7171,4548],{"class":264},[220,7173,7174,7176,7178],{"class":222,"line":644},[220,7175,402],{"class":264},[220,7177,347],{"class":420},[220,7179,359],{"class":264},[212,7181,7183],{"className":251,"code":7182,"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,7184,7185,7199,7203,7211,7232,7236],{"__ignoreMap":178},[220,7186,7187,7189,7191,7193,7195,7197],{"class":222,"line":223},[220,7188,1735],{"class":260},[220,7190,1738],{"class":420},[220,7192,1741],{"class":260},[220,7194,1744],{"class":260},[220,7196,1747],{"class":226},[220,7198,1750],{"class":264},[220,7200,7201],{"class":222,"line":179},[220,7202,1765],{"class":264},[220,7204,7205,7207,7209],{"class":222,"line":389},[220,7206,1770],{"class":264},[220,7208,2462],{"class":230},[220,7210,4794],{"class":264},[220,7212,7213,7215,7217,7219,7221,7223,7225,7228,7230],{"class":222,"line":399},[220,7214,1770],{"class":264},[220,7216,3206],{"class":230},[220,7218,1776],{"class":264},[220,7220,3217],{"class":230},[220,7222,4812],{"class":264},[220,7224,4545],{"class":420},[220,7226,7227],{"class":264},", opacity: ",[220,7229,6000],{"class":420},[220,7231,1782],{"class":264},[220,7233,7234],{"class":222,"line":644},[220,7235,1787],{"class":264},[220,7237,7238],{"class":222,"line":650},[220,7239,1792],{"class":264},[19,7241],{":preset":7242},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,7244,7245],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,7247,7249],{"id":7248},"visibility","Visibility",[15,7251,5868,7252,7254,7255,7257,7258,7260],{},[99,7253,2711],{}," prop that defaults to ",[99,7256,2332],{},". Setting it to ",[99,7259,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,7262,7264],{"className":409,"code":7263,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,7265,7266],{"__ignoreMap":178},[220,7267,7268,7270,7272,7274,7276,7278,7280],{"class":222,"line":223},[220,7269,343],{"class":264},[220,7271,2553],{"class":420},[220,7273,2618],{"class":226},[220,7275,353],{"class":260},[220,7277,743],{"class":264},[220,7279,2629],{"class":420},[220,7281,4548],{"class":264},[15,7283,7284,7285,7288,7289,7292],{},"This is different from ",[99,7286,7287],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,7290,7291],{},"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,7294,7296],{"id":7295},"masking","Masking",[15,7298,7299,7300,7303,7304,7307,7308,7311],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,7301,7302],{},"id"," property (",[99,7305,7306],{},"string",") and then set ",[99,7309,7310],{},"maskSource"," to that ID on another component to use it as a mask.",[15,7313,7314,7315,7317],{},"Masks typically have ",[99,7316,7291],{}," so they don't appear in the final output—they only control visibility of other components:",[246,7319,7320,7400,7489,7575,7661],{":tabs":1557},[212,7321,7323],{"className":334,"code":7322,"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,7324,7325,7333,7338,7368,7372,7377,7392],{"__ignoreMap":178},[220,7326,7327,7329,7331],{"class":222,"line":223},[220,7328,343],{"class":264},[220,7330,347],{"class":346},[220,7332,359],{"class":264},[220,7334,7335],{"class":222,"line":179},[220,7336,7337],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,7339,7340,7342,7344,7347,7349,7352,7354,7356,7358,7361,7363,7366],{"class":222,"line":389},[220,7341,364],{"class":264},[220,7343,2553],{"class":346},[220,7345,7346],{"class":226}," id",[220,7348,353],{"class":264},[220,7350,7351],{"class":230},"\"myMask\"",[220,7353,4448],{"class":226},[220,7355,353],{"class":264},[220,7357,4453],{"class":230},[220,7359,7360],{"class":226}," :visible",[220,7362,353],{"class":264},[220,7364,7365],{"class":230},"\"false\"",[220,7367,386],{"class":264},[220,7369,7370],{"class":222,"line":399},[220,7371,647],{"emptyLinePlaceholder":194},[220,7373,7374],{"class":222,"line":644},[220,7375,7376],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,7378,7379,7381,7383,7386,7388,7390],{"class":222,"line":650},[220,7380,364],{"class":264},[220,7382,367],{"class":346},[220,7384,7385],{"class":226}," maskSource",[220,7387,353],{"class":264},[220,7389,7351],{"class":230},[220,7391,386],{"class":264},[220,7393,7394,7396,7398],{"class":222,"line":656},[220,7395,402],{"class":264},[220,7397,347],{"class":346},[220,7399,359],{"class":264},[212,7401,7403],{"className":409,"code":7402,"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,7404,7405,7413,7422,7454,7458,7467,7481],{"__ignoreMap":178},[220,7406,7407,7409,7411],{"class":222,"line":223},[220,7408,343],{"class":264},[220,7410,347],{"class":420},[220,7412,359],{"class":264},[220,7414,7415,7417,7420],{"class":222,"line":179},[220,7416,1999],{"class":264},[220,7418,7419],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,7421,749],{"class":264},[220,7423,7424,7426,7428,7430,7432,7434,7436,7438,7440,7442,7444,7446,7448,7450,7452],{"class":222,"line":389},[220,7425,364],{"class":264},[220,7427,2553],{"class":420},[220,7429,7346],{"class":226},[220,7431,353],{"class":260},[220,7433,7351],{"class":230},[220,7435,4448],{"class":226},[220,7437,353],{"class":260},[220,7439,743],{"class":264},[220,7441,4545],{"class":420},[220,7443,2914],{"class":264},[220,7445,2711],{"class":226},[220,7447,353],{"class":260},[220,7449,743],{"class":264},[220,7451,2629],{"class":420},[220,7453,4548],{"class":264},[220,7455,7456],{"class":222,"line":399},[220,7457,647],{"emptyLinePlaceholder":194},[220,7459,7460,7462,7465],{"class":222,"line":644},[220,7461,1999],{"class":264},[220,7463,7464],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,7466,749],{"class":264},[220,7468,7469,7471,7473,7475,7477,7479],{"class":222,"line":650},[220,7470,364],{"class":264},[220,7472,367],{"class":420},[220,7474,7385],{"class":226},[220,7476,353],{"class":260},[220,7478,7351],{"class":230},[220,7480,386],{"class":264},[220,7482,7483,7485,7487],{"class":222,"line":656},[220,7484,402],{"class":264},[220,7486,347],{"class":420},[220,7488,359],{"class":264},[212,7490,7491],{"className":468,"code":7402,"language":469,"meta":178,"style":178},[99,7492,7493,7501,7509,7541,7545,7553,7567],{"__ignoreMap":178},[220,7494,7495,7497,7499],{"class":222,"line":223},[220,7496,343],{"class":264},[220,7498,347],{"class":420},[220,7500,359],{"class":264},[220,7502,7503,7505,7507],{"class":222,"line":179},[220,7504,1999],{"class":264},[220,7506,7419],{"class":609},[220,7508,749],{"class":264},[220,7510,7511,7513,7515,7517,7519,7521,7523,7525,7527,7529,7531,7533,7535,7537,7539],{"class":222,"line":389},[220,7512,364],{"class":264},[220,7514,2553],{"class":420},[220,7516,7346],{"class":226},[220,7518,353],{"class":260},[220,7520,7351],{"class":230},[220,7522,4448],{"class":226},[220,7524,353],{"class":260},[220,7526,743],{"class":264},[220,7528,4545],{"class":420},[220,7530,2914],{"class":264},[220,7532,2711],{"class":226},[220,7534,353],{"class":260},[220,7536,743],{"class":264},[220,7538,2629],{"class":420},[220,7540,4548],{"class":264},[220,7542,7543],{"class":222,"line":399},[220,7544,647],{"emptyLinePlaceholder":194},[220,7546,7547,7549,7551],{"class":222,"line":644},[220,7548,1999],{"class":264},[220,7550,7464],{"class":609},[220,7552,749],{"class":264},[220,7554,7555,7557,7559,7561,7563,7565],{"class":222,"line":650},[220,7556,364],{"class":264},[220,7558,367],{"class":420},[220,7560,7385],{"class":226},[220,7562,353],{"class":260},[220,7564,7351],{"class":230},[220,7566,386],{"class":264},[220,7568,7569,7571,7573],{"class":222,"line":656},[220,7570,402],{"class":264},[220,7572,347],{"class":420},[220,7574,359],{"class":264},[212,7576,7577],{"className":468,"code":7402,"language":469,"meta":178,"style":178},[99,7578,7579,7587,7595,7627,7631,7639,7653],{"__ignoreMap":178},[220,7580,7581,7583,7585],{"class":222,"line":223},[220,7582,343],{"class":264},[220,7584,347],{"class":420},[220,7586,359],{"class":264},[220,7588,7589,7591,7593],{"class":222,"line":179},[220,7590,1999],{"class":264},[220,7592,7419],{"class":609},[220,7594,749],{"class":264},[220,7596,7597,7599,7601,7603,7605,7607,7609,7611,7613,7615,7617,7619,7621,7623,7625],{"class":222,"line":389},[220,7598,364],{"class":264},[220,7600,2553],{"class":420},[220,7602,7346],{"class":226},[220,7604,353],{"class":260},[220,7606,7351],{"class":230},[220,7608,4448],{"class":226},[220,7610,353],{"class":260},[220,7612,743],{"class":264},[220,7614,4545],{"class":420},[220,7616,2914],{"class":264},[220,7618,2711],{"class":226},[220,7620,353],{"class":260},[220,7622,743],{"class":264},[220,7624,2629],{"class":420},[220,7626,4548],{"class":264},[220,7628,7629],{"class":222,"line":399},[220,7630,647],{"emptyLinePlaceholder":194},[220,7632,7633,7635,7637],{"class":222,"line":644},[220,7634,1999],{"class":264},[220,7636,7464],{"class":609},[220,7638,749],{"class":264},[220,7640,7641,7643,7645,7647,7649,7651],{"class":222,"line":650},[220,7642,364],{"class":264},[220,7644,367],{"class":420},[220,7646,7385],{"class":226},[220,7648,353],{"class":260},[220,7650,7351],{"class":230},[220,7652,386],{"class":264},[220,7654,7655,7657,7659],{"class":222,"line":656},[220,7656,402],{"class":264},[220,7658,347],{"class":420},[220,7660,359],{"class":264},[212,7662,7664],{"className":251,"code":7663,"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,7665,7666,7680,7684,7706,7719,7723],{"__ignoreMap":178},[220,7667,7668,7670,7672,7674,7676,7678],{"class":222,"line":223},[220,7669,1735],{"class":260},[220,7671,1738],{"class":420},[220,7673,1741],{"class":260},[220,7675,1744],{"class":260},[220,7677,1747],{"class":226},[220,7679,1750],{"class":264},[220,7681,7682],{"class":222,"line":179},[220,7683,1765],{"class":264},[220,7685,7686,7688,7690,7692,7695,7697,7699,7702,7704],{"class":222,"line":389},[220,7687,1770],{"class":264},[220,7689,3206],{"class":230},[220,7691,3209],{"class":264},[220,7693,7694],{"class":230},"'myMask'",[220,7696,5787],{"class":264},[220,7698,4545],{"class":420},[220,7700,7701],{"class":264},", visible: ",[220,7703,2629],{"class":420},[220,7705,4817],{"class":264},[220,7707,7708,7710,7712,7715,7717],{"class":222,"line":399},[220,7709,1770],{"class":264},[220,7711,2462],{"class":230},[220,7713,7714],{"class":264},", props: { maskSource: ",[220,7716,7694],{"class":230},[220,7718,1782],{"class":264},[220,7720,7721],{"class":222,"line":644},[220,7722,1787],{"class":264},[220,7724,7725],{"class":222,"line":650},[220,7726,1792],{"class":264},[19,7728],{":preset":7729},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,7731,7732,7733,7735],{},"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,7734,7291],{},".",[3262,7737,7739],{"id":7738},"mask-types","Mask Types",[15,7741,7742,7743,7746],{},"Control how the mask is interpreted with the ",[99,7744,7745],{},"maskType"," prop:",[34,7748,7749,7757,7765,7773],{},[37,7750,7751,7756],{},[159,7752,7753],{},[99,7754,7755],{},"alpha",": Uses the mask's alpha channel (default)",[37,7758,7759,7764],{},[159,7760,7761],{},[99,7762,7763],{},"alphaInverted",": Uses the inverted alpha channel",[37,7766,7767,7772],{},[159,7768,7769],{},[99,7770,7771],{},"luminance",": Uses the mask's brightness",[37,7774,7775,7780],{},[159,7776,7777],{},[99,7778,7779],{},"luminanceInverted",": Uses the inverted brightness",[246,7782,7783,7933,8081,8225,8369],{":tabs":1557},[212,7784,7786],{"className":334,"code":7785,"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,7787,7788,7796,7804,7808,7813,7820,7830,7839,7848,7858,7862,7866,7871,7878,7888,7898,7908,7919,7924],{"__ignoreMap":178},[220,7789,7790,7792,7794],{"class":222,"line":223},[220,7791,343],{"class":264},[220,7793,347],{"class":346},[220,7795,359],{"class":264},[220,7797,7798,7800,7802],{"class":222,"line":179},[220,7799,364],{"class":264},[220,7801,367],{"class":346},[220,7803,386],{"class":264},[220,7805,7806],{"class":222,"line":389},[220,7807,647],{"emptyLinePlaceholder":194},[220,7809,7810],{"class":222,"line":399},[220,7811,7812],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,7814,7815,7817],{"class":222,"line":644},[220,7816,364],{"class":264},[220,7818,7819],{"class":346},"Checkerboard\n",[220,7821,7822,7825,7827],{"class":222,"line":650},[220,7823,7824],{"class":226}," id",[220,7826,353],{"class":264},[220,7828,7829],{"class":230},"\"mask\"\n",[220,7831,7832,7834,7836],{"class":222,"line":656},[220,7833,1194],{"class":226},[220,7835,353],{"class":264},[220,7837,7838],{"class":230},"\"#ffffff\"\n",[220,7840,7841,7843,7845],{"class":222,"line":673},[220,7842,1204],{"class":226},[220,7844,353],{"class":264},[220,7846,7847],{"class":230},"\"#111111\"\n",[220,7849,7850,7853,7855],{"class":222,"line":682},[220,7851,7852],{"class":226}," :visible",[220,7854,353],{"class":264},[220,7856,7857],{"class":230},"\"false\"\n",[220,7859,7860],{"class":222,"line":691},[220,7861,1234],{"class":264},[220,7863,7864],{"class":222,"line":696},[220,7865,647],{"emptyLinePlaceholder":194},[220,7867,7868],{"class":222,"line":702},[220,7869,7870],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,7872,7873,7875],{"class":222,"line":718},[220,7874,364],{"class":264},[220,7876,7877],{"class":346},"Circle\n",[220,7879,7880,7883,7885],{"class":222,"line":727},[220,7881,7882],{"class":226}," color",[220,7884,353],{"class":264},[220,7886,7887],{"class":230},"\"#ff0088\"\n",[220,7889,7890,7893,7895],{"class":222,"line":2664},[220,7891,7892],{"class":226}," radius",[220,7894,353],{"class":264},[220,7896,7897],{"class":230},"\"0.8\"\n",[220,7899,7901,7904,7906],{"class":222,"line":7900},16,[220,7902,7903],{"class":226}," maskSource",[220,7905,353],{"class":264},[220,7907,7829],{"class":230},[220,7909,7911,7914,7916],{"class":222,"line":7910},17,[220,7912,7913],{"class":226}," maskType",[220,7915,353],{"class":264},[220,7917,7918],{"class":230},"\"luminance\"\n",[220,7920,7922],{"class":222,"line":7921},18,[220,7923,1234],{"class":264},[220,7925,7927,7929,7931],{"class":222,"line":7926},19,[220,7928,402],{"class":264},[220,7930,347],{"class":346},[220,7932,359],{"class":264},[212,7934,7936],{"className":409,"code":7935,"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,7937,7938,7946,7954,7958,7967,7973,7981,7989,7997,8010,8014,8018,8027,8033,8041,8053,8061,8069,8073],{"__ignoreMap":178},[220,7939,7940,7942,7944],{"class":222,"line":223},[220,7941,343],{"class":264},[220,7943,347],{"class":420},[220,7945,359],{"class":264},[220,7947,7948,7950,7952],{"class":222,"line":179},[220,7949,364],{"class":264},[220,7951,367],{"class":420},[220,7953,386],{"class":264},[220,7955,7956],{"class":222,"line":389},[220,7957,647],{"emptyLinePlaceholder":194},[220,7959,7960,7962,7965],{"class":222,"line":399},[220,7961,1999],{"class":264},[220,7963,7964],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,7966,749],{"class":264},[220,7968,7969,7971],{"class":222,"line":644},[220,7970,364],{"class":264},[220,7972,7819],{"class":420},[220,7974,7975,7977,7979],{"class":222,"line":650},[220,7976,7824],{"class":226},[220,7978,353],{"class":260},[220,7980,7829],{"class":230},[220,7982,7983,7985,7987],{"class":222,"line":656},[220,7984,1194],{"class":226},[220,7986,353],{"class":260},[220,7988,7838],{"class":230},[220,7990,7991,7993,7995],{"class":222,"line":673},[220,7992,1204],{"class":226},[220,7994,353],{"class":260},[220,7996,7847],{"class":230},[220,7998,7999,8002,8004,8006,8008],{"class":222,"line":682},[220,8000,8001],{"class":226}," visible",[220,8003,353],{"class":260},[220,8005,743],{"class":264},[220,8007,2629],{"class":420},[220,8009,749],{"class":264},[220,8011,8012],{"class":222,"line":691},[220,8013,1234],{"class":264},[220,8015,8016],{"class":222,"line":696},[220,8017,647],{"emptyLinePlaceholder":194},[220,8019,8020,8022,8025],{"class":222,"line":702},[220,8021,1999],{"class":264},[220,8023,8024],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,8026,749],{"class":264},[220,8028,8029,8031],{"class":222,"line":718},[220,8030,364],{"class":264},[220,8032,7877],{"class":420},[220,8034,8035,8037,8039],{"class":222,"line":727},[220,8036,7882],{"class":226},[220,8038,353],{"class":260},[220,8040,7887],{"class":230},[220,8042,8043,8045,8047,8049,8051],{"class":222,"line":2664},[220,8044,7892],{"class":226},[220,8046,353],{"class":260},[220,8048,743],{"class":264},[220,8050,4545],{"class":420},[220,8052,749],{"class":264},[220,8054,8055,8057,8059],{"class":222,"line":7900},[220,8056,7903],{"class":226},[220,8058,353],{"class":260},[220,8060,7829],{"class":230},[220,8062,8063,8065,8067],{"class":222,"line":7910},[220,8064,7913],{"class":226},[220,8066,353],{"class":260},[220,8068,7918],{"class":230},[220,8070,8071],{"class":222,"line":7921},[220,8072,1234],{"class":264},[220,8074,8075,8077,8079],{"class":222,"line":7926},[220,8076,402],{"class":264},[220,8078,347],{"class":420},[220,8080,359],{"class":264},[212,8082,8083],{"className":468,"code":7935,"language":469,"meta":178,"style":178},[99,8084,8085,8093,8101,8105,8113,8119,8127,8135,8143,8155,8159,8163,8171,8177,8185,8197,8205,8213,8217],{"__ignoreMap":178},[220,8086,8087,8089,8091],{"class":222,"line":223},[220,8088,343],{"class":264},[220,8090,347],{"class":420},[220,8092,359],{"class":264},[220,8094,8095,8097,8099],{"class":222,"line":179},[220,8096,364],{"class":264},[220,8098,367],{"class":420},[220,8100,386],{"class":264},[220,8102,8103],{"class":222,"line":389},[220,8104,647],{"emptyLinePlaceholder":194},[220,8106,8107,8109,8111],{"class":222,"line":399},[220,8108,1999],{"class":264},[220,8110,7964],{"class":609},[220,8112,749],{"class":264},[220,8114,8115,8117],{"class":222,"line":644},[220,8116,364],{"class":264},[220,8118,7819],{"class":420},[220,8120,8121,8123,8125],{"class":222,"line":650},[220,8122,7824],{"class":226},[220,8124,353],{"class":260},[220,8126,7829],{"class":230},[220,8128,8129,8131,8133],{"class":222,"line":656},[220,8130,1194],{"class":226},[220,8132,353],{"class":260},[220,8134,7838],{"class":230},[220,8136,8137,8139,8141],{"class":222,"line":673},[220,8138,1204],{"class":226},[220,8140,353],{"class":260},[220,8142,7847],{"class":230},[220,8144,8145,8147,8149,8151,8153],{"class":222,"line":682},[220,8146,8001],{"class":226},[220,8148,353],{"class":260},[220,8150,743],{"class":264},[220,8152,2629],{"class":420},[220,8154,749],{"class":264},[220,8156,8157],{"class":222,"line":691},[220,8158,1234],{"class":264},[220,8160,8161],{"class":222,"line":696},[220,8162,647],{"emptyLinePlaceholder":194},[220,8164,8165,8167,8169],{"class":222,"line":702},[220,8166,1999],{"class":264},[220,8168,8024],{"class":609},[220,8170,749],{"class":264},[220,8172,8173,8175],{"class":222,"line":718},[220,8174,364],{"class":264},[220,8176,7877],{"class":420},[220,8178,8179,8181,8183],{"class":222,"line":727},[220,8180,7882],{"class":226},[220,8182,353],{"class":260},[220,8184,7887],{"class":230},[220,8186,8187,8189,8191,8193,8195],{"class":222,"line":2664},[220,8188,7892],{"class":226},[220,8190,353],{"class":260},[220,8192,743],{"class":264},[220,8194,4545],{"class":420},[220,8196,749],{"class":264},[220,8198,8199,8201,8203],{"class":222,"line":7900},[220,8200,7903],{"class":226},[220,8202,353],{"class":260},[220,8204,7829],{"class":230},[220,8206,8207,8209,8211],{"class":222,"line":7910},[220,8208,7913],{"class":226},[220,8210,353],{"class":260},[220,8212,7918],{"class":230},[220,8214,8215],{"class":222,"line":7921},[220,8216,1234],{"class":264},[220,8218,8219,8221,8223],{"class":222,"line":7926},[220,8220,402],{"class":264},[220,8222,347],{"class":420},[220,8224,359],{"class":264},[212,8226,8227],{"className":468,"code":7935,"language":469,"meta":178,"style":178},[99,8228,8229,8237,8245,8249,8257,8263,8271,8279,8287,8299,8303,8307,8315,8321,8329,8341,8349,8357,8361],{"__ignoreMap":178},[220,8230,8231,8233,8235],{"class":222,"line":223},[220,8232,343],{"class":264},[220,8234,347],{"class":420},[220,8236,359],{"class":264},[220,8238,8239,8241,8243],{"class":222,"line":179},[220,8240,364],{"class":264},[220,8242,367],{"class":420},[220,8244,386],{"class":264},[220,8246,8247],{"class":222,"line":389},[220,8248,647],{"emptyLinePlaceholder":194},[220,8250,8251,8253,8255],{"class":222,"line":399},[220,8252,1999],{"class":264},[220,8254,7964],{"class":609},[220,8256,749],{"class":264},[220,8258,8259,8261],{"class":222,"line":644},[220,8260,364],{"class":264},[220,8262,7819],{"class":420},[220,8264,8265,8267,8269],{"class":222,"line":650},[220,8266,7824],{"class":226},[220,8268,353],{"class":260},[220,8270,7829],{"class":230},[220,8272,8273,8275,8277],{"class":222,"line":656},[220,8274,1194],{"class":226},[220,8276,353],{"class":260},[220,8278,7838],{"class":230},[220,8280,8281,8283,8285],{"class":222,"line":673},[220,8282,1204],{"class":226},[220,8284,353],{"class":260},[220,8286,7847],{"class":230},[220,8288,8289,8291,8293,8295,8297],{"class":222,"line":682},[220,8290,8001],{"class":226},[220,8292,353],{"class":260},[220,8294,743],{"class":264},[220,8296,2629],{"class":420},[220,8298,749],{"class":264},[220,8300,8301],{"class":222,"line":691},[220,8302,1234],{"class":264},[220,8304,8305],{"class":222,"line":696},[220,8306,647],{"emptyLinePlaceholder":194},[220,8308,8309,8311,8313],{"class":222,"line":702},[220,8310,1999],{"class":264},[220,8312,8024],{"class":609},[220,8314,749],{"class":264},[220,8316,8317,8319],{"class":222,"line":718},[220,8318,364],{"class":264},[220,8320,7877],{"class":420},[220,8322,8323,8325,8327],{"class":222,"line":727},[220,8324,7882],{"class":226},[220,8326,353],{"class":260},[220,8328,7887],{"class":230},[220,8330,8331,8333,8335,8337,8339],{"class":222,"line":2664},[220,8332,7892],{"class":226},[220,8334,353],{"class":260},[220,8336,743],{"class":264},[220,8338,4545],{"class":420},[220,8340,749],{"class":264},[220,8342,8343,8345,8347],{"class":222,"line":7900},[220,8344,7903],{"class":226},[220,8346,353],{"class":260},[220,8348,7829],{"class":230},[220,8350,8351,8353,8355],{"class":222,"line":7910},[220,8352,7913],{"class":226},[220,8354,353],{"class":260},[220,8356,7918],{"class":230},[220,8358,8359],{"class":222,"line":7921},[220,8360,1234],{"class":264},[220,8362,8363,8365,8367],{"class":222,"line":7926},[220,8364,402],{"class":264},[220,8366,347],{"class":420},[220,8368,359],{"class":264},[212,8370,8372],{"className":251,"code":8371,"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,8373,8374,8388,8392,8400,8430,8457,8461],{"__ignoreMap":178},[220,8375,8376,8378,8380,8382,8384,8386],{"class":222,"line":223},[220,8377,1735],{"class":260},[220,8379,1738],{"class":420},[220,8381,1741],{"class":260},[220,8383,1744],{"class":260},[220,8385,1747],{"class":226},[220,8387,1750],{"class":264},[220,8389,8390],{"class":222,"line":179},[220,8391,1765],{"class":264},[220,8393,8394,8396,8398],{"class":222,"line":389},[220,8395,1770],{"class":264},[220,8397,2462],{"class":230},[220,8399,4794],{"class":264},[220,8401,8402,8404,8407,8409,8412,8415,8418,8421,8424,8426,8428],{"class":222,"line":399},[220,8403,1770],{"class":264},[220,8405,8406],{"class":230},"'Checkerboard'",[220,8408,3209],{"class":264},[220,8410,8411],{"class":230},"'mask'",[220,8413,8414],{"class":264},", props: { colorA: ",[220,8416,8417],{"class":230},"'#ffffff'",[220,8419,8420],{"class":264},", colorB: ",[220,8422,8423],{"class":230},"'#111111'",[220,8425,7701],{"class":264},[220,8427,2629],{"class":420},[220,8429,4817],{"class":264},[220,8431,8432,8434,8436,8438,8440,8442,8444,8447,8449,8452,8455],{"class":222,"line":644},[220,8433,1770],{"class":264},[220,8435,3206],{"class":230},[220,8437,1776],{"class":264},[220,8439,3217],{"class":230},[220,8441,4812],{"class":264},[220,8443,4545],{"class":420},[220,8445,8446],{"class":264},", maskSource: ",[220,8448,8411],{"class":230},[220,8450,8451],{"class":264},", maskType: ",[220,8453,8454],{"class":230},"'luminance'",[220,8456,1782],{"class":264},[220,8458,8459],{"class":222,"line":650},[220,8460,1787],{"class":264},[220,8462,8463],{"class":222,"line":656},[220,8464,1792],{"class":264},[19,8466],{":preset":8467},"{\"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,8469,5840],{},{"title":178,"searchDepth":179,"depth":179,"links":8471},[8472,8475,8476,8477],{"id":5864,"depth":179,"text":5865,"children":8473},[8474],{"id":6325,"depth":389,"text":6326},{"id":2921,"depth":179,"text":6910},{"id":7248,"depth":179,"text":7249},{"id":7295,"depth":179,"text":7296,"children":8478},[8479],{"id":7738,"depth":389,"text":7739},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":5853,"description":8481},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":8489,"title":1496,"body":8490,"category":8480,"description":10487,"exclude":190,"extension":191,"forceFramework":190,"icon":10488,"meta":10489,"navigation":194,"path":1495,"seo":10490,"stem":10491,"__hash__":10492},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":8491,"toc":10480},[8492,8495,8498,8502,8505,8722,8725,8729,8732,9895,9898,9903,9906,9910,9913,9918,9961,9966,10005,10010,10061,10066,10092,10095,10099,10102,10108,10440,10444,10447,10451,10454,10474,10477],[11,8493,1496],{"id":8494},"props-reactivity",[15,8496,8497],{},"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,8499,8501],{"id":8500},"basic-props","Basic Props",[15,8503,8504],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,8506,8507,8548,8591,8633,8675],{":tabs":1557},[212,8508,8510],{"className":334,"code":8509,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,8511,8512,8520,8540],{"__ignoreMap":178},[220,8513,8514,8516,8518],{"class":222,"line":223},[220,8515,343],{"class":264},[220,8517,347],{"class":346},[220,8519,359],{"class":264},[220,8521,8522,8524,8526,8528,8530,8532,8534,8536,8538],{"class":222,"line":179},[220,8523,364],{"class":264},[220,8525,2553],{"class":346},[220,8527,1588],{"class":226},[220,8529,353],{"class":264},[220,8531,2560],{"class":230},[220,8533,4448],{"class":226},[220,8535,353],{"class":264},[220,8537,5927],{"class":230},[220,8539,386],{"class":264},[220,8541,8542,8544,8546],{"class":222,"line":389},[220,8543,402],{"class":264},[220,8545,347],{"class":346},[220,8547,359],{"class":264},[212,8549,8551],{"className":409,"code":8550,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,8552,8553,8561,8583],{"__ignoreMap":178},[220,8554,8555,8557,8559],{"class":222,"line":223},[220,8556,343],{"class":264},[220,8558,347],{"class":420},[220,8560,359],{"class":264},[220,8562,8563,8565,8567,8569,8571,8573,8575,8577,8579,8581],{"class":222,"line":179},[220,8564,364],{"class":264},[220,8566,2553],{"class":420},[220,8568,1588],{"class":226},[220,8570,353],{"class":260},[220,8572,2560],{"class":230},[220,8574,4448],{"class":226},[220,8576,353],{"class":260},[220,8578,743],{"class":264},[220,8580,6000],{"class":420},[220,8582,4548],{"class":264},[220,8584,8585,8587,8589],{"class":222,"line":389},[220,8586,402],{"class":264},[220,8588,347],{"class":420},[220,8590,359],{"class":264},[212,8592,8593],{"className":468,"code":8550,"language":469,"meta":178,"style":178},[99,8594,8595,8603,8625],{"__ignoreMap":178},[220,8596,8597,8599,8601],{"class":222,"line":223},[220,8598,343],{"class":264},[220,8600,347],{"class":420},[220,8602,359],{"class":264},[220,8604,8605,8607,8609,8611,8613,8615,8617,8619,8621,8623],{"class":222,"line":179},[220,8606,364],{"class":264},[220,8608,2553],{"class":420},[220,8610,1588],{"class":226},[220,8612,353],{"class":260},[220,8614,2560],{"class":230},[220,8616,4448],{"class":226},[220,8618,353],{"class":260},[220,8620,743],{"class":264},[220,8622,6000],{"class":420},[220,8624,4548],{"class":264},[220,8626,8627,8629,8631],{"class":222,"line":389},[220,8628,402],{"class":264},[220,8630,347],{"class":420},[220,8632,359],{"class":264},[212,8634,8635],{"className":468,"code":8550,"language":469,"meta":178,"style":178},[99,8636,8637,8645,8667],{"__ignoreMap":178},[220,8638,8639,8641,8643],{"class":222,"line":223},[220,8640,343],{"class":264},[220,8642,347],{"class":420},[220,8644,359],{"class":264},[220,8646,8647,8649,8651,8653,8655,8657,8659,8661,8663,8665],{"class":222,"line":179},[220,8648,364],{"class":264},[220,8650,2553],{"class":420},[220,8652,1588],{"class":226},[220,8654,353],{"class":260},[220,8656,2560],{"class":230},[220,8658,4448],{"class":226},[220,8660,353],{"class":260},[220,8662,743],{"class":264},[220,8664,6000],{"class":420},[220,8666,4548],{"class":264},[220,8668,8669,8671,8673],{"class":222,"line":389},[220,8670,402],{"class":264},[220,8672,347],{"class":420},[220,8674,359],{"class":264},[212,8676,8678],{"className":251,"code":8677,"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,8679,8680,8694,8698,8714,8718],{"__ignoreMap":178},[220,8681,8682,8684,8686,8688,8690,8692],{"class":222,"line":223},[220,8683,1735],{"class":260},[220,8685,1738],{"class":420},[220,8687,1741],{"class":260},[220,8689,1744],{"class":260},[220,8691,1747],{"class":226},[220,8693,1750],{"class":264},[220,8695,8696],{"class":222,"line":179},[220,8697,1765],{"class":264},[220,8699,8700,8702,8704,8706,8708,8710,8712],{"class":222,"line":389},[220,8701,1770],{"class":264},[220,8703,3206],{"class":230},[220,8705,1776],{"class":264},[220,8707,3217],{"class":230},[220,8709,4812],{"class":264},[220,8711,6000],{"class":420},[220,8713,1782],{"class":264},[220,8715,8716],{"class":222,"line":399},[220,8717,1787],{"class":264},[220,8719,8720],{"class":222,"line":644},[220,8721,1792],{"class":264},[15,8723,8724],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,8726,8728],{"id":8727},"reactive-props","Reactive Props",[15,8730,8731],{},"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,8733,8734,8967,9257,9478,9752],{":tabs":1557},[212,8735,8737],{"className":334,"code":8736,"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,8738,8739,8749,8759,8770,8774,8791,8799,8803,8811,8820,8842,8862,8882,8890,8894,8902,8929,8951,8959],{"__ignoreMap":178},[220,8740,8741,8743,8745,8747],{"class":222,"line":223},[220,8742,343],{"class":264},[220,8744,2590],{"class":346},[220,8746,2593],{"class":226},[220,8748,359],{"class":264},[220,8750,8751,8753,8755,8757],{"class":222,"line":179},[220,8752,261],{"class":260},[220,8754,2602],{"class":264},[220,8756,268],{"class":260},[220,8758,2607],{"class":230},[220,8760,8761,8763,8766,8768],{"class":222,"line":389},[220,8762,261],{"class":260},[220,8764,8765],{"class":264}," { Shader, LinearGradient, Circle } ",[220,8767,268],{"class":260},[220,8769,271],{"class":230},[220,8771,8772],{"class":222,"line":399},[220,8773,647],{"emptyLinePlaceholder":194},[220,8775,8776,8778,8781,8783,8785,8787,8789],{"class":222,"line":644},[220,8777,1735],{"class":260},[220,8779,8780],{"class":420}," angle",[220,8782,1741],{"class":260},[220,8784,2623],{"class":226},[220,8786,2626],{"class":264},[220,8788,6919],{"class":420},[220,8790,2632],{"class":264},[220,8792,8793,8795,8797],{"class":222,"line":650},[220,8794,402],{"class":264},[220,8796,2590],{"class":346},[220,8798,359],{"class":264},[220,8800,8801],{"class":222,"line":656},[220,8802,647],{"emptyLinePlaceholder":194},[220,8804,8805,8807,8809],{"class":222,"line":673},[220,8806,343],{"class":264},[220,8808,2519],{"class":346},[220,8810,359],{"class":264},[220,8812,8813,8815,8818],{"class":222,"line":682},[220,8814,364],{"class":264},[220,8816,8817],{"class":346},"div",[220,8819,359],{"class":264},[220,8821,8822,8824,8827,8830,8832,8835,8838,8840],{"class":222,"line":691},[220,8823,2550],{"class":264},[220,8825,8826],{"class":346},"button",[220,8828,8829],{"class":226}," @click",[220,8831,353],{"class":264},[220,8833,8834],{"class":230},"\"angle += 45\"",[220,8836,8837],{"class":264},">Rotate +45°\u003C\u002F",[220,8839,8826],{"class":346},[220,8841,359],{"class":264},[220,8843,8844,8846,8848,8850,8852,8855,8858,8860],{"class":222,"line":696},[220,8845,2550],{"class":264},[220,8847,8826],{"class":346},[220,8849,8829],{"class":226},[220,8851,353],{"class":264},[220,8853,8854],{"class":230},"\"angle -= 45\"",[220,8856,8857],{"class":264},">Rotate -45°\u003C\u002F",[220,8859,8826],{"class":346},[220,8861,359],{"class":264},[220,8863,8864,8866,8868,8870,8872,8875,8878,8880],{"class":222,"line":702},[220,8865,2550],{"class":264},[220,8867,8826],{"class":346},[220,8869,8829],{"class":226},[220,8871,353],{"class":264},[220,8873,8874],{"class":230},"\"angle = 0\"",[220,8876,8877],{"class":264},">Reset\u003C\u002F",[220,8879,8826],{"class":346},[220,8881,359],{"class":264},[220,8883,8884,8886,8888],{"class":222,"line":718},[220,8885,2567],{"class":264},[220,8887,8817],{"class":346},[220,8889,359],{"class":264},[220,8891,8892],{"class":222,"line":727},[220,8893,647],{"emptyLinePlaceholder":194},[220,8895,8896,8898,8900],{"class":222,"line":2664},[220,8897,364],{"class":264},[220,8899,347],{"class":346},[220,8901,359],{"class":264},[220,8903,8904,8906,8908,8910,8912,8915,8917,8919,8921,8923,8925,8927],{"class":222,"line":7900},[220,8905,2550],{"class":264},[220,8907,2553],{"class":346},[220,8909,7346],{"class":226},[220,8911,353],{"class":264},[220,8913,8914],{"class":230},"\"mask\"",[220,8916,4448],{"class":226},[220,8918,353],{"class":264},[220,8920,4453],{"class":230},[220,8922,7360],{"class":226},[220,8924,353],{"class":264},[220,8926,7365],{"class":230},[220,8928,386],{"class":264},[220,8930,8931,8933,8935,8938,8940,8943,8945,8947,8949],{"class":222,"line":7910},[220,8932,2550],{"class":264},[220,8934,367],{"class":346},[220,8936,8937],{"class":226}," :angle",[220,8939,353],{"class":264},[220,8941,8942],{"class":230},"\"angle\"",[220,8944,7385],{"class":226},[220,8946,353],{"class":264},[220,8948,8914],{"class":230},[220,8950,386],{"class":264},[220,8952,8953,8955,8957],{"class":222,"line":7921},[220,8954,2567],{"class":264},[220,8956,347],{"class":346},[220,8958,359],{"class":264},[220,8960,8961,8963,8965],{"class":222,"line":7926},[220,8962,402],{"class":264},[220,8964,2519],{"class":346},[220,8966,359],{"class":264},[212,8968,8970],{"className":409,"code":8969,"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,8971,8972,8982,8992,8996,9005,9031,9035,9041,9046,9054,9097,9133,9160,9169,9173,9181,9213,9234,9242,9247,9252],{"__ignoreMap":178},[220,8973,8974,8976,8978,8980],{"class":222,"line":223},[220,8975,261],{"class":260},[220,8977,2682],{"class":264},[220,8979,268],{"class":260},[220,8981,2687],{"class":230},[220,8983,8984,8986,8988,8990],{"class":222,"line":179},[220,8985,261],{"class":260},[220,8987,8765],{"class":264},[220,8989,268],{"class":260},[220,8991,287],{"class":230},[220,8993,8994],{"class":222,"line":389},[220,8995,647],{"emptyLinePlaceholder":194},[220,8997,8998,9000,9003],{"class":222,"line":399},[220,8999,2641],{"class":260},[220,9001,9002],{"class":226}," MyComponent",[220,9004,2647],{"class":264},[220,9006,9007,9009,9011,9014,9016,9019,9021,9023,9025,9027,9029],{"class":222,"line":644},[220,9008,2705],{"class":260},[220,9010,2708],{"class":264},[220,9012,9013],{"class":420},"angle",[220,9015,1895],{"class":264},[220,9017,9018],{"class":420},"setAngle",[220,9020,2719],{"class":264},[220,9022,353],{"class":260},[220,9024,2724],{"class":226},[220,9026,2626],{"class":264},[220,9028,6919],{"class":420},[220,9030,2632],{"class":264},[220,9032,9033],{"class":222,"line":650},[220,9034,647],{"emptyLinePlaceholder":194},[220,9036,9037,9039],{"class":222,"line":656},[220,9038,2739],{"class":260},[220,9040,2742],{"class":264},[220,9042,9043],{"class":222,"line":673},[220,9044,9045],{"class":264}," \u003C>\n",[220,9047,9048,9050,9052],{"class":222,"line":682},[220,9049,2813],{"class":264},[220,9051,8817],{"class":346},[220,9053,359],{"class":264},[220,9055,9056,9059,9061,9064,9066,9068,9070,9073,9075,9078,9081,9084,9087,9090,9093,9095],{"class":222,"line":691},[220,9057,9058],{"class":264}," \u003C",[220,9060,8826],{"class":346},[220,9062,9063],{"class":226}," onClick",[220,9065,353],{"class":260},[220,9067,2759],{"class":264},[220,9069,2762],{"class":260},[220,9071,9072],{"class":226}," setAngle",[220,9074,2626],{"class":264},[220,9076,56],{"class":9077},"s9osk",[220,9079,9080],{"class":260}," =>",[220,9082,9083],{"class":264}," a ",[220,9085,9086],{"class":260},"+",[220,9088,9089],{"class":420}," 45",[220,9091,9092],{"class":264},")}>Rotate +45°\u003C\u002F",[220,9094,8826],{"class":346},[220,9096,359],{"class":264},[220,9098,9099,9101,9103,9105,9107,9109,9111,9113,9115,9117,9119,9121,9124,9126,9129,9131],{"class":222,"line":696},[220,9100,9058],{"class":264},[220,9102,8826],{"class":346},[220,9104,9063],{"class":226},[220,9106,353],{"class":260},[220,9108,2759],{"class":264},[220,9110,2762],{"class":260},[220,9112,9072],{"class":226},[220,9114,2626],{"class":264},[220,9116,56],{"class":9077},[220,9118,9080],{"class":260},[220,9120,9083],{"class":264},[220,9122,9123],{"class":260},"-",[220,9125,9089],{"class":420},[220,9127,9128],{"class":264},")}>Rotate -45°\u003C\u002F",[220,9130,8826],{"class":346},[220,9132,359],{"class":264},[220,9134,9135,9137,9139,9141,9143,9145,9147,9149,9151,9153,9156,9158],{"class":222,"line":702},[220,9136,9058],{"class":264},[220,9138,8826],{"class":346},[220,9140,9063],{"class":226},[220,9142,353],{"class":260},[220,9144,2759],{"class":264},[220,9146,2762],{"class":260},[220,9148,9072],{"class":226},[220,9150,2626],{"class":264},[220,9152,6919],{"class":420},[220,9154,9155],{"class":264},")}>Reset\u003C\u002F",[220,9157,8826],{"class":346},[220,9159,359],{"class":264},[220,9161,9162,9165,9167],{"class":222,"line":718},[220,9163,9164],{"class":264}," \u003C\u002F",[220,9166,8817],{"class":346},[220,9168,359],{"class":264},[220,9170,9171],{"class":222,"line":727},[220,9172,647],{"emptyLinePlaceholder":194},[220,9174,9175,9177,9179],{"class":222,"line":2664},[220,9176,2813],{"class":264},[220,9178,347],{"class":420},[220,9180,359],{"class":264},[220,9182,9183,9185,9187,9189,9191,9193,9195,9197,9199,9201,9203,9205,9207,9209,9211],{"class":222,"line":7900},[220,9184,9058],{"class":264},[220,9186,2553],{"class":420},[220,9188,7346],{"class":226},[220,9190,353],{"class":260},[220,9192,8914],{"class":230},[220,9194,4448],{"class":226},[220,9196,353],{"class":260},[220,9198,743],{"class":264},[220,9200,4545],{"class":420},[220,9202,2914],{"class":264},[220,9204,2711],{"class":226},[220,9206,353],{"class":260},[220,9208,743],{"class":264},[220,9210,2629],{"class":420},[220,9212,4548],{"class":264},[220,9214,9215,9217,9219,9221,9223,9226,9228,9230,9232],{"class":222,"line":7910},[220,9216,9058],{"class":264},[220,9218,367],{"class":420},[220,9220,8780],{"class":226},[220,9222,353],{"class":260},[220,9224,9225],{"class":264},"{angle} ",[220,9227,7310],{"class":226},[220,9229,353],{"class":260},[220,9231,8914],{"class":230},[220,9233,386],{"class":264},[220,9235,9236,9238,9240],{"class":222,"line":7921},[220,9237,9164],{"class":264},[220,9239,347],{"class":420},[220,9241,359],{"class":264},[220,9243,9244],{"class":222,"line":7926},[220,9245,9246],{"class":264}," \u003C\u002F>\n",[220,9248,9250],{"class":222,"line":9249},20,[220,9251,2837],{"class":264},[220,9253,9255],{"class":222,"line":9254},21,[220,9256,749],{"class":264},[212,9258,9260],{"className":468,"code":9259,"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,9261,9262,9270,9275,9279,9284,9292,9296,9304,9338,9370,9401,9409,9413,9421,9453,9470],{"__ignoreMap":178},[220,9263,9264,9266,9268],{"class":222,"line":223},[220,9265,343],{"class":264},[220,9267,2590],{"class":346},[220,9269,359],{"class":264},[220,9271,9272],{"class":222,"line":179},[220,9273,9274],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,9276,9277],{"class":222,"line":389},[220,9278,647],{"emptyLinePlaceholder":194},[220,9280,9281],{"class":222,"line":399},[220,9282,9283],{"class":264}," let angle = 0\n",[220,9285,9286,9288,9290],{"class":222,"line":644},[220,9287,402],{"class":264},[220,9289,2590],{"class":346},[220,9291,359],{"class":264},[220,9293,9294],{"class":222,"line":650},[220,9295,647],{"emptyLinePlaceholder":194},[220,9297,9298,9300,9302],{"class":222,"line":656},[220,9299,343],{"class":264},[220,9301,8817],{"class":346},[220,9303,359],{"class":264},[220,9305,9306,9308,9310,9312,9314,9317,9319,9321,9323,9326,9329,9331,9334,9336],{"class":222,"line":673},[220,9307,364],{"class":264},[220,9309,8826],{"class":346},[220,9311,4304],{"class":226},[220,9313,1554],{"class":264},[220,9315,9316],{"class":226},"click",[220,9318,353],{"class":260},[220,9320,2759],{"class":264},[220,9322,2762],{"class":260},[220,9324,9325],{"class":264}," angle ",[220,9327,9328],{"class":260},"+=",[220,9330,9089],{"class":420},[220,9332,9333],{"class":264},"}>Rotate +45°\u003C\u002F",[220,9335,8826],{"class":346},[220,9337,359],{"class":264},[220,9339,9340,9342,9344,9346,9348,9350,9352,9354,9356,9358,9361,9363,9366,9368],{"class":222,"line":682},[220,9341,364],{"class":264},[220,9343,8826],{"class":346},[220,9345,4304],{"class":226},[220,9347,1554],{"class":264},[220,9349,9316],{"class":226},[220,9351,353],{"class":260},[220,9353,2759],{"class":264},[220,9355,2762],{"class":260},[220,9357,9325],{"class":264},[220,9359,9360],{"class":260},"-=",[220,9362,9089],{"class":420},[220,9364,9365],{"class":264},"}>Rotate -45°\u003C\u002F",[220,9367,8826],{"class":346},[220,9369,359],{"class":264},[220,9371,9372,9374,9376,9378,9380,9382,9384,9386,9388,9390,9392,9394,9397,9399],{"class":222,"line":691},[220,9373,364],{"class":264},[220,9375,8826],{"class":346},[220,9377,4304],{"class":226},[220,9379,1554],{"class":264},[220,9381,9316],{"class":226},[220,9383,353],{"class":260},[220,9385,2759],{"class":264},[220,9387,2762],{"class":260},[220,9389,9325],{"class":264},[220,9391,353],{"class":260},[220,9393,2794],{"class":420},[220,9395,9396],{"class":264},"}>Reset\u003C\u002F",[220,9398,8826],{"class":346},[220,9400,359],{"class":264},[220,9402,9403,9405,9407],{"class":222,"line":696},[220,9404,402],{"class":264},[220,9406,8817],{"class":346},[220,9408,359],{"class":264},[220,9410,9411],{"class":222,"line":702},[220,9412,647],{"emptyLinePlaceholder":194},[220,9414,9415,9417,9419],{"class":222,"line":718},[220,9416,343],{"class":264},[220,9418,347],{"class":420},[220,9420,359],{"class":264},[220,9422,9423,9425,9427,9429,9431,9433,9435,9437,9439,9441,9443,9445,9447,9449,9451],{"class":222,"line":727},[220,9424,364],{"class":264},[220,9426,2553],{"class":420},[220,9428,7346],{"class":226},[220,9430,353],{"class":260},[220,9432,8914],{"class":230},[220,9434,4448],{"class":226},[220,9436,353],{"class":260},[220,9438,743],{"class":264},[220,9440,4545],{"class":420},[220,9442,2914],{"class":264},[220,9444,2711],{"class":226},[220,9446,353],{"class":260},[220,9448,743],{"class":264},[220,9450,2629],{"class":420},[220,9452,4548],{"class":264},[220,9454,9455,9457,9459,9462,9464,9466,9468],{"class":222,"line":2664},[220,9456,364],{"class":264},[220,9458,367],{"class":420},[220,9460,9461],{"class":264}," {angle} ",[220,9463,7310],{"class":226},[220,9465,353],{"class":260},[220,9467,8914],{"class":230},[220,9469,386],{"class":264},[220,9471,9472,9474,9476],{"class":222,"line":7900},[220,9473,402],{"class":264},[220,9475,347],{"class":420},[220,9477,359],{"class":264},[212,9479,9481],{"className":468,"code":9480,"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,9482,9483,9493,9503,9507,9515,9539,9543,9549,9553,9561,9595,9629,9655,9663,9667,9675,9707,9732,9740,9744,9748],{"__ignoreMap":178},[220,9484,9485,9487,9489,9491],{"class":222,"line":223},[220,9486,261],{"class":260},[220,9488,2982],{"class":264},[220,9490,268],{"class":260},[220,9492,2987],{"class":230},[220,9494,9495,9497,9499,9501],{"class":222,"line":179},[220,9496,261],{"class":260},[220,9498,8765],{"class":264},[220,9500,268],{"class":260},[220,9502,319],{"class":230},[220,9504,9505],{"class":222,"line":389},[220,9506,647],{"emptyLinePlaceholder":194},[220,9508,9509,9511,9513],{"class":222,"line":399},[220,9510,2641],{"class":260},[220,9512,9002],{"class":226},[220,9514,2647],{"class":264},[220,9516,9517,9519,9521,9523,9525,9527,9529,9531,9533,9535,9537],{"class":222,"line":644},[220,9518,2705],{"class":260},[220,9520,2708],{"class":264},[220,9522,9013],{"class":420},[220,9524,1895],{"class":264},[220,9526,9018],{"class":420},[220,9528,2719],{"class":264},[220,9530,353],{"class":260},[220,9532,3018],{"class":226},[220,9534,2626],{"class":264},[220,9536,6919],{"class":420},[220,9538,2632],{"class":264},[220,9540,9541],{"class":222,"line":650},[220,9542,647],{"emptyLinePlaceholder":194},[220,9544,9545,9547],{"class":222,"line":656},[220,9546,2739],{"class":260},[220,9548,2742],{"class":264},[220,9550,9551],{"class":222,"line":673},[220,9552,9045],{"class":264},[220,9554,9555,9557,9559],{"class":222,"line":682},[220,9556,2813],{"class":264},[220,9558,8817],{"class":346},[220,9560,359],{"class":264},[220,9562,9563,9565,9567,9569,9571,9573,9575,9577,9579,9581,9583,9585,9587,9589,9591,9593],{"class":222,"line":691},[220,9564,9058],{"class":264},[220,9566,8826],{"class":346},[220,9568,9063],{"class":226},[220,9570,353],{"class":260},[220,9572,2759],{"class":264},[220,9574,2762],{"class":260},[220,9576,9072],{"class":226},[220,9578,2626],{"class":264},[220,9580,56],{"class":9077},[220,9582,9080],{"class":260},[220,9584,9083],{"class":264},[220,9586,9086],{"class":260},[220,9588,9089],{"class":420},[220,9590,9092],{"class":264},[220,9592,8826],{"class":346},[220,9594,359],{"class":264},[220,9596,9597,9599,9601,9603,9605,9607,9609,9611,9613,9615,9617,9619,9621,9623,9625,9627],{"class":222,"line":696},[220,9598,9058],{"class":264},[220,9600,8826],{"class":346},[220,9602,9063],{"class":226},[220,9604,353],{"class":260},[220,9606,2759],{"class":264},[220,9608,2762],{"class":260},[220,9610,9072],{"class":226},[220,9612,2626],{"class":264},[220,9614,56],{"class":9077},[220,9616,9080],{"class":260},[220,9618,9083],{"class":264},[220,9620,9123],{"class":260},[220,9622,9089],{"class":420},[220,9624,9128],{"class":264},[220,9626,8826],{"class":346},[220,9628,359],{"class":264},[220,9630,9631,9633,9635,9637,9639,9641,9643,9645,9647,9649,9651,9653],{"class":222,"line":702},[220,9632,9058],{"class":264},[220,9634,8826],{"class":346},[220,9636,9063],{"class":226},[220,9638,353],{"class":260},[220,9640,2759],{"class":264},[220,9642,2762],{"class":260},[220,9644,9072],{"class":226},[220,9646,2626],{"class":264},[220,9648,6919],{"class":420},[220,9650,9155],{"class":264},[220,9652,8826],{"class":346},[220,9654,359],{"class":264},[220,9656,9657,9659,9661],{"class":222,"line":718},[220,9658,9164],{"class":264},[220,9660,8817],{"class":346},[220,9662,359],{"class":264},[220,9664,9665],{"class":222,"line":727},[220,9666,647],{"emptyLinePlaceholder":194},[220,9668,9669,9671,9673],{"class":222,"line":2664},[220,9670,2813],{"class":264},[220,9672,347],{"class":420},[220,9674,359],{"class":264},[220,9676,9677,9679,9681,9683,9685,9687,9689,9691,9693,9695,9697,9699,9701,9703,9705],{"class":222,"line":7900},[220,9678,9058],{"class":264},[220,9680,2553],{"class":420},[220,9682,7346],{"class":226},[220,9684,353],{"class":260},[220,9686,8914],{"class":230},[220,9688,4448],{"class":226},[220,9690,353],{"class":260},[220,9692,743],{"class":264},[220,9694,4545],{"class":420},[220,9696,2914],{"class":264},[220,9698,2711],{"class":226},[220,9700,353],{"class":260},[220,9702,743],{"class":264},[220,9704,2629],{"class":420},[220,9706,4548],{"class":264},[220,9708,9709,9711,9713,9715,9717,9719,9721,9724,9726,9728,9730],{"class":222,"line":7910},[220,9710,9058],{"class":264},[220,9712,367],{"class":420},[220,9714,8780],{"class":226},[220,9716,353],{"class":260},[220,9718,743],{"class":264},[220,9720,9013],{"class":226},[220,9722,9723],{"class":264},"()} ",[220,9725,7310],{"class":226},[220,9727,353],{"class":260},[220,9729,8914],{"class":230},[220,9731,386],{"class":264},[220,9733,9734,9736,9738],{"class":222,"line":7921},[220,9735,9164],{"class":264},[220,9737,347],{"class":420},[220,9739,359],{"class":264},[220,9741,9742],{"class":222,"line":7926},[220,9743,9246],{"class":264},[220,9745,9746],{"class":222,"line":9249},[220,9747,2837],{"class":264},[220,9749,9750],{"class":222,"line":9254},[220,9751,749],{"class":264},[212,9753,9755],{"className":251,"code":9754,"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,9756,9757,9769,9773,9787,9791,9811,9833,9837,9841,9845,9850,9870,9874,9879],{"__ignoreMap":178},[220,9758,9759,9761,9764,9766],{"class":222,"line":223},[220,9760,261],{"class":260},[220,9762,9763],{"class":264}," { createShader } ",[220,9765,268],{"class":260},[220,9767,9768],{"class":230}," 'shaders\u002Fjs'\n",[220,9770,9771],{"class":222,"line":179},[220,9772,647],{"emptyLinePlaceholder":194},[220,9774,9775,9777,9779,9781,9783,9785],{"class":222,"line":389},[220,9776,1735],{"class":260},[220,9778,1738],{"class":420},[220,9780,1741],{"class":260},[220,9782,1744],{"class":260},[220,9784,1747],{"class":226},[220,9786,1750],{"class":264},[220,9788,9789],{"class":222,"line":399},[220,9790,1765],{"class":264},[220,9792,9793,9795,9797,9799,9801,9803,9805,9807,9809],{"class":222,"line":644},[220,9794,1770],{"class":264},[220,9796,3206],{"class":230},[220,9798,3209],{"class":264},[220,9800,8411],{"class":230},[220,9802,5787],{"class":264},[220,9804,4545],{"class":420},[220,9806,7701],{"class":264},[220,9808,2629],{"class":420},[220,9810,4817],{"class":264},[220,9812,9813,9815,9817,9819,9822,9825,9827,9829,9831],{"class":222,"line":650},[220,9814,1770],{"class":264},[220,9816,2462],{"class":230},[220,9818,3209],{"class":264},[220,9820,9821],{"class":230},"'gradient'",[220,9823,9824],{"class":264},", props: { angle: ",[220,9826,6919],{"class":420},[220,9828,8446],{"class":264},[220,9830,8411],{"class":230},[220,9832,1782],{"class":264},[220,9834,9835],{"class":222,"line":656},[220,9836,1787],{"class":264},[220,9838,9839],{"class":222,"line":673},[220,9840,1792],{"class":264},[220,9842,9843],{"class":222,"line":682},[220,9844,647],{"emptyLinePlaceholder":194},[220,9846,9847],{"class":222,"line":691},[220,9848,9849],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,9851,9852,9855,9858,9860,9862,9865,9867],{"class":222,"line":696},[220,9853,9854],{"class":264},"shader.",[220,9856,9857],{"class":226},"update",[220,9859,2626],{"class":264},[220,9861,9821],{"class":230},[220,9863,9864],{"class":264},", { angle: ",[220,9866,1295],{"class":420},[220,9868,9869],{"class":264}," })\n",[220,9871,9872],{"class":222,"line":702},[220,9873,647],{"emptyLinePlaceholder":194},[220,9875,9876],{"class":222,"line":718},[220,9877,9878],{"class":609},"\u002F\u002F Reset angle\n",[220,9880,9881,9883,9885,9887,9889,9891,9893],{"class":222,"line":727},[220,9882,9854],{"class":264},[220,9884,9857],{"class":226},[220,9886,2626],{"class":264},[220,9888,9821],{"class":230},[220,9890,9864],{"class":264},[220,9892,6919],{"class":420},[220,9894,9869],{"class":264},[15,9896,9897],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[9899,9900],"interactive-shader-demo",{":controls":9901,":preset":9902},"[{\"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,9904,9905],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,9907,9909],{"id":9908},"common-reactive-props","Common Reactive Props",[15,9911,9912],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,9914,9915,1554],{},[159,9916,9917],{},"Position and Size",[212,9919,9923],{"className":9920,"code":9921,"language":9922,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,9924,9925],{"__ignoreMap":178},[220,9926,9927,9929,9931,9933,9936,9938,9941,9944,9946,9948,9950,9952,9954,9957,9959],{"class":222,"line":223},[220,9928,343],{"class":264},[220,9930,2553],{"class":346},[220,9932,2791],{"class":264},[220,9934,9935],{"class":226},"radius",[220,9937,353],{"class":264},[220,9939,9940],{"class":230},"\"",[220,9942,9943],{"class":264},"size",[220,9945,9940],{"class":230},[220,9947,2791],{"class":264},[220,9949,6487],{"class":226},[220,9951,353],{"class":264},[220,9953,9940],{"class":230},[220,9955,9956],{"class":264},"{ x: posX, y: posY }",[220,9958,9940],{"class":230},[220,9960,386],{"class":264},[15,9962,9963,1554],{},[159,9964,9965],{},"Colors",[212,9967,9969],{"className":9920,"code":9968,"language":9922,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,9970,9971],{"__ignoreMap":178},[220,9972,9973,9975,9977,9979,9981,9983,9985,9988,9990,9992,9994,9996,9998,10001,10003],{"class":222,"line":223},[220,9974,343],{"class":264},[220,9976,367],{"class":346},[220,9978,2791],{"class":264},[220,9980,1863],{"class":226},[220,9982,353],{"class":264},[220,9984,9940],{"class":230},[220,9986,9987],{"class":264},"startColor",[220,9989,9940],{"class":230},[220,9991,2791],{"class":264},[220,9993,1867],{"class":226},[220,9995,353],{"class":264},[220,9997,9940],{"class":230},[220,9999,10000],{"class":264},"endColor",[220,10002,9940],{"class":230},[220,10004,386],{"class":264},[15,10006,10007,1554],{},[159,10008,10009],{},"Intensity and Strength",[212,10011,10013],{"className":9920,"code":10012,"language":9922,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,10014,10015,10038],{"__ignoreMap":178},[220,10016,10017,10019,10022,10024,10027,10029,10031,10034,10036],{"class":222,"line":223},[220,10018,343],{"class":264},[220,10020,10021],{"class":346},"Blur",[220,10023,2791],{"class":264},[220,10025,10026],{"class":226},"intensity",[220,10028,353],{"class":264},[220,10030,9940],{"class":230},[220,10032,10033],{"class":264},"blurAmount",[220,10035,9940],{"class":230},[220,10037,386],{"class":264},[220,10039,10040,10042,10045,10047,10050,10052,10054,10057,10059],{"class":222,"line":179},[220,10041,343],{"class":264},[220,10043,10044],{"class":346},"Glow",[220,10046,2791],{"class":264},[220,10048,10049],{"class":226},"strength",[220,10051,353],{"class":264},[220,10053,9940],{"class":230},[220,10055,10056],{"class":264},"glowPower",[220,10058,9940],{"class":230},[220,10060,386],{"class":264},[15,10062,10063,1554],{},[159,10064,10065],{},"Angles and Rotation",[212,10067,10069],{"className":9920,"code":10068,"language":9922,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,10070,10071],{"__ignoreMap":178},[220,10072,10073,10075,10077,10079,10081,10083,10085,10088,10090],{"class":222,"line":223},[220,10074,343],{"class":264},[220,10076,367],{"class":346},[220,10078,2791],{"class":264},[220,10080,9013],{"class":226},[220,10082,353],{"class":264},[220,10084,9940],{"class":230},[220,10086,10087],{"class":264},"rotation",[220,10089,9940],{"class":230},[220,10091,386],{"class":264},[15,10093,10094],{},"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,10096,10098],{"id":10097},"animating-props","Animating Props",[15,10100,10101],{},"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,10103,10104,10107],{},[159,10105,10106],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,10109,10111],{"className":409,"code":10110,"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,10112,10113,10123,10135,10145,10149,10157,10182,10186,10199,10204,10220,10229,10239,10261,10266,10282,10290,10299,10315,10319,10323,10327,10334,10339,10357,10362,10371,10401,10416,10425,10430,10435],{"__ignoreMap":178},[220,10114,10115,10117,10119,10121],{"class":222,"line":223},[220,10116,261],{"class":260},[220,10118,2682],{"class":264},[220,10120,268],{"class":260},[220,10122,2687],{"class":230},[220,10124,10125,10127,10130,10132],{"class":222,"line":179},[220,10126,261],{"class":260},[220,10128,10129],{"class":264}," { animate } ",[220,10131,268],{"class":260},[220,10133,10134],{"class":230}," 'motion'\n",[220,10136,10137,10139,10141,10143],{"class":222,"line":389},[220,10138,261],{"class":260},[220,10140,8765],{"class":264},[220,10142,268],{"class":260},[220,10144,287],{"class":230},[220,10146,10147],{"class":222,"line":399},[220,10148,647],{"emptyLinePlaceholder":194},[220,10150,10151,10153,10155],{"class":222,"line":644},[220,10152,2641],{"class":260},[220,10154,9002],{"class":226},[220,10156,2647],{"class":264},[220,10158,10159,10161,10163,10165,10167,10170,10172,10174,10176,10178,10180],{"class":222,"line":650},[220,10160,2705],{"class":260},[220,10162,2708],{"class":264},[220,10164,9935],{"class":420},[220,10166,1895],{"class":264},[220,10168,10169],{"class":420},"setRadius",[220,10171,2719],{"class":264},[220,10173,353],{"class":260},[220,10175,2724],{"class":226},[220,10177,2626],{"class":264},[220,10179,6482],{"class":420},[220,10181,2632],{"class":264},[220,10183,10184],{"class":222,"line":656},[220,10185,647],{"emptyLinePlaceholder":194},[220,10187,10188,10191,10194,10197],{"class":222,"line":673},[220,10189,10190],{"class":260}," async",[220,10192,10193],{"class":260}," function",[220,10195,10196],{"class":226}," pulse",[220,10198,2647],{"class":264},[220,10200,10201],{"class":222,"line":682},[220,10202,10203],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,10205,10206,10209,10212,10215,10217],{"class":222,"line":691},[220,10207,10208],{"class":260}," await",[220,10210,10211],{"class":226}," animate",[220,10213,10214],{"class":264},"(radius, ",[220,10216,6923],{"class":420},[220,10218,10219],{"class":264},", {\n",[220,10221,10222,10225,10227],{"class":222,"line":696},[220,10223,10224],{"class":264}," duration: ",[220,10226,6000],{"class":420},[220,10228,1760],{"class":264},[220,10230,10231,10234,10237],{"class":222,"line":702},[220,10232,10233],{"class":264}," easing: ",[220,10235,10236],{"class":230},"'ease-out'",[220,10238,1760],{"class":264},[220,10240,10241,10244,10247,10250,10253,10255,10258],{"class":222,"line":718},[220,10242,10243],{"class":226}," onUpdate",[220,10245,10246],{"class":264},": (",[220,10248,10249],{"class":9077},"latest",[220,10251,10252],{"class":264},") ",[220,10254,2762],{"class":260},[220,10256,10257],{"class":226}," setRadius",[220,10259,10260],{"class":264},"(latest)\n",[220,10262,10263],{"class":222,"line":727},[220,10264,10265],{"class":264}," })\n",[220,10267,10268,10270,10272,10274,10276,10278,10280],{"class":222,"line":2664},[220,10269,10208],{"class":260},[220,10271,10211],{"class":226},[220,10273,2626],{"class":264},[220,10275,6923],{"class":420},[220,10277,1895],{"class":264},[220,10279,6482],{"class":420},[220,10281,10219],{"class":264},[220,10283,10284,10286,10288],{"class":222,"line":7900},[220,10285,10224],{"class":264},[220,10287,6000],{"class":420},[220,10289,1760],{"class":264},[220,10291,10292,10294,10297],{"class":222,"line":7910},[220,10293,10233],{"class":264},[220,10295,10296],{"class":230},"'ease-in'",[220,10298,1760],{"class":264},[220,10300,10301,10303,10305,10307,10309,10311,10313],{"class":222,"line":7921},[220,10302,10243],{"class":226},[220,10304,10246],{"class":264},[220,10306,10249],{"class":9077},[220,10308,10252],{"class":264},[220,10310,2762],{"class":260},[220,10312,10257],{"class":226},[220,10314,10260],{"class":264},[220,10316,10317],{"class":222,"line":7926},[220,10318,10265],{"class":264},[220,10320,10321],{"class":222,"line":9249},[220,10322,3256],{"class":264},[220,10324,10325],{"class":222,"line":9254},[220,10326,647],{"emptyLinePlaceholder":194},[220,10328,10330,10332],{"class":222,"line":10329},22,[220,10331,2739],{"class":260},[220,10333,2742],{"class":264},[220,10335,10337],{"class":222,"line":10336},23,[220,10338,9045],{"class":264},[220,10340,10342,10344,10346,10348,10350,10353,10355],{"class":222,"line":10341},24,[220,10343,2813],{"class":264},[220,10345,8826],{"class":346},[220,10347,9063],{"class":226},[220,10349,353],{"class":260},[220,10351,10352],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,10354,8826],{"class":346},[220,10356,359],{"class":264},[220,10358,10360],{"class":222,"line":10359},25,[220,10361,647],{"emptyLinePlaceholder":194},[220,10363,10365,10367,10369],{"class":222,"line":10364},26,[220,10366,2813],{"class":264},[220,10368,347],{"class":420},[220,10370,359],{"class":264},[220,10372,10374,10376,10378,10380,10382,10384,10386,10388,10391,10393,10395,10397,10399],{"class":222,"line":10373},27,[220,10375,9058],{"class":264},[220,10377,2553],{"class":420},[220,10379,7346],{"class":226},[220,10381,353],{"class":260},[220,10383,8914],{"class":230},[220,10385,4448],{"class":226},[220,10387,353],{"class":260},[220,10389,10390],{"class":264},"{radius} ",[220,10392,2711],{"class":226},[220,10394,353],{"class":260},[220,10396,743],{"class":264},[220,10398,2629],{"class":420},[220,10400,4548],{"class":264},[220,10402,10404,10406,10408,10410,10412,10414],{"class":222,"line":10403},28,[220,10405,9058],{"class":264},[220,10407,367],{"class":420},[220,10409,7385],{"class":226},[220,10411,353],{"class":260},[220,10413,8914],{"class":230},[220,10415,386],{"class":264},[220,10417,10419,10421,10423],{"class":222,"line":10418},29,[220,10420,9164],{"class":264},[220,10422,347],{"class":420},[220,10424,359],{"class":264},[220,10426,10428],{"class":222,"line":10427},30,[220,10429,9246],{"class":264},[220,10431,10433],{"class":222,"line":10432},31,[220,10434,2837],{"class":264},[220,10436,10438],{"class":222,"line":10437},32,[220,10439,749],{"class":264},[9899,10441],{":controls":10442,":preset":10443},"[{\"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,10445,10446],{},"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,10448,10450],{"id":10449},"performance-notes","Performance Notes",[15,10452,10453],{},"Reactive props update GPU uniforms directly. This means:",[34,10455,10456,10462,10468],{},[37,10457,10458,10461],{},[159,10459,10460],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,10463,10464,10467],{},[159,10465,10466],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,10469,10470,10473],{},[159,10471,10472],{},"Frame-rate friendly",": Animate as many props as you need",[15,10475,10476],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,10478,10479],{},"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":10481},[10482,10483,10484,10485,10486],{"id":8500,"depth":179,"text":8501},{"id":8727,"depth":179,"text":8728},{"id":9908,"depth":179,"text":9909},{"id":10097,"depth":179,"text":10098},{"id":10449,"depth":179,"text":10450},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":10487},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":10494,"title":1489,"body":10495,"category":188,"description":13263,"exclude":190,"extension":191,"forceFramework":190,"icon":13264,"meta":13265,"navigation":194,"path":1488,"seo":13266,"stem":13267,"__hash__":13268},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":10496,"toc":13247},[10497,10500,10508,10512,10521,10523,10528,10827,10831,10835,10838,11266,11270,11280,11629,11633,11636,12197,12201,12204,12518,12522,12526,12533,12674,12686,12690,12701,12776,12780,12783,13010,13014,13017,13244],[11,10498,1489],{"id":10499},"layout-positioning",[15,10501,1839,10502,10504,10505,10507],{},[99,10503,101],{}," component renders a ",[99,10506,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,10509,10511],{"id":10510},"the-canvas-model","The canvas model",[15,10513,10514,10515,10517,10518,10520],{},"Every ",[99,10516,101],{}," renders exactly one ",[99,10519,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,10522,594],{"id":593},[15,10524,10525,10526,1938],{},"Apply classes or styles directly to the ",[99,10527,101],{},[246,10529,10530,10649,10684,10719,10753],{":tabs":1557},[212,10531,10533],{"className":334,"code":10532,"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,10534,10535,10540,10554,10562,10570,10574,10579,10594,10602,10610,10614,10619,10633,10641],{"__ignoreMap":178},[220,10536,10537],{"class":222,"line":223},[220,10538,10539],{"class":609},"\u003C!-- Tailwind -->\n",[220,10541,10542,10544,10546,10548,10550,10552],{"class":222,"line":179},[220,10543,343],{"class":264},[220,10545,347],{"class":346},[220,10547,350],{"class":226},[220,10549,353],{"class":264},[220,10551,356],{"class":230},[220,10553,359],{"class":264},[220,10555,10556,10558,10560],{"class":222,"line":389},[220,10557,364],{"class":264},[220,10559,367],{"class":346},[220,10561,386],{"class":264},[220,10563,10564,10566,10568],{"class":222,"line":399},[220,10565,402],{"class":264},[220,10567,347],{"class":346},[220,10569,359],{"class":264},[220,10571,10572],{"class":222,"line":644},[220,10573,647],{"emptyLinePlaceholder":194},[220,10575,10576],{"class":222,"line":650},[220,10577,10578],{"class":609},"\u003C!-- CSS class -->\n",[220,10580,10581,10583,10585,10587,10589,10592],{"class":222,"line":656},[220,10582,343],{"class":264},[220,10584,347],{"class":346},[220,10586,350],{"class":226},[220,10588,353],{"class":264},[220,10590,10591],{"class":230},"\"hero-shader\"",[220,10593,359],{"class":264},[220,10595,10596,10598,10600],{"class":222,"line":673},[220,10597,364],{"class":264},[220,10599,367],{"class":346},[220,10601,386],{"class":264},[220,10603,10604,10606,10608],{"class":222,"line":682},[220,10605,402],{"class":264},[220,10607,347],{"class":346},[220,10609,359],{"class":264},[220,10611,10612],{"class":222,"line":691},[220,10613,647],{"emptyLinePlaceholder":194},[220,10615,10616],{"class":222,"line":696},[220,10617,10618],{"class":609},"\u003C!-- Inline -->\n",[220,10620,10621,10623,10625,10627,10629,10631],{"class":222,"line":702},[220,10622,343],{"class":264},[220,10624,347],{"class":346},[220,10626,663],{"class":226},[220,10628,353],{"class":264},[220,10630,668],{"class":230},[220,10632,359],{"class":264},[220,10634,10635,10637,10639],{"class":222,"line":718},[220,10636,364],{"class":264},[220,10638,367],{"class":346},[220,10640,386],{"class":264},[220,10642,10643,10645,10647],{"class":222,"line":727},[220,10644,402],{"class":264},[220,10646,347],{"class":346},[220,10648,359],{"class":264},[212,10650,10652],{"className":409,"code":10651,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,10653,10654,10668,10676],{"__ignoreMap":178},[220,10655,10656,10658,10660,10662,10664,10666],{"class":222,"line":223},[220,10657,343],{"class":264},[220,10659,347],{"class":420},[220,10661,423],{"class":226},[220,10663,353],{"class":260},[220,10665,356],{"class":230},[220,10667,359],{"class":264},[220,10669,10670,10672,10674],{"class":222,"line":179},[220,10671,364],{"class":264},[220,10673,367],{"class":420},[220,10675,386],{"class":264},[220,10677,10678,10680,10682],{"class":222,"line":389},[220,10679,402],{"class":264},[220,10681,347],{"class":420},[220,10683,359],{"class":264},[212,10685,10687],{"className":468,"code":10686,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,10688,10689,10703,10711],{"__ignoreMap":178},[220,10690,10691,10693,10695,10697,10699,10701],{"class":222,"line":223},[220,10692,343],{"class":264},[220,10694,347],{"class":420},[220,10696,350],{"class":226},[220,10698,353],{"class":260},[220,10700,356],{"class":230},[220,10702,359],{"class":264},[220,10704,10705,10707,10709],{"class":222,"line":179},[220,10706,364],{"class":264},[220,10708,367],{"class":420},[220,10710,386],{"class":264},[220,10712,10713,10715,10717],{"class":222,"line":389},[220,10714,402],{"class":264},[220,10716,347],{"class":420},[220,10718,359],{"class":264},[212,10720,10721],{"className":468,"code":10686,"language":469,"meta":178,"style":178},[99,10722,10723,10737,10745],{"__ignoreMap":178},[220,10724,10725,10727,10729,10731,10733,10735],{"class":222,"line":223},[220,10726,343],{"class":264},[220,10728,347],{"class":420},[220,10730,350],{"class":226},[220,10732,353],{"class":260},[220,10734,356],{"class":230},[220,10736,359],{"class":264},[220,10738,10739,10741,10743],{"class":222,"line":179},[220,10740,364],{"class":264},[220,10742,367],{"class":420},[220,10744,386],{"class":264},[220,10746,10747,10749,10751],{"class":222,"line":389},[220,10748,402],{"class":264},[220,10750,347],{"class":420},[220,10752,359],{"class":264},[212,10754,10756],{"className":251,"code":10755,"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,10757,10758,10763,10782,10792,10802,10806],{"__ignoreMap":178},[220,10759,10760],{"class":222,"line":223},[220,10761,10762],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,10764,10765,10767,10769,10771,10773,10775,10777,10780],{"class":222,"line":179},[220,10766,1735],{"class":260},[220,10768,3133],{"class":420},[220,10770,1741],{"class":260},[220,10772,3138],{"class":264},[220,10774,3141],{"class":226},[220,10776,2626],{"class":264},[220,10778,10779],{"class":230},"'my-shader'",[220,10781,2632],{"class":264},[220,10783,10784,10787,10789],{"class":222,"line":389},[220,10785,10786],{"class":264},"canvas.style.width ",[220,10788,353],{"class":260},[220,10790,10791],{"class":230}," '100%'\n",[220,10793,10794,10797,10799],{"class":222,"line":399},[220,10795,10796],{"class":264},"canvas.style.height ",[220,10798,353],{"class":260},[220,10800,10801],{"class":230}," '400px'\n",[220,10803,10804],{"class":222,"line":644},[220,10805,647],{"emptyLinePlaceholder":194},[220,10807,10808,10810,10812,10814,10816,10818,10821,10824],{"class":222,"line":650},[220,10809,1735],{"class":260},[220,10811,1738],{"class":420},[220,10813,1741],{"class":260},[220,10815,1744],{"class":260},[220,10817,1747],{"class":226},[220,10819,10820],{"class":264},"(canvas, { components: [",[220,10822,10823],{"class":260},"...",[220,10825,10826],{"class":264},"] })\n",[23,10828,10830],{"id":10829},"common-layout-patterns","Common layout patterns",[3262,10832,10834],{"id":10833},"full-page-background","Full-page background",[15,10836,10837],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,10839,10840,10915,10992,11058,11131],{":tabs":1557},[212,10841,10843],{"className":334,"code":10842,"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,10844,10845,10850,10865,10874,10882,10886,10902,10907],{"__ignoreMap":178},[220,10846,10847],{"class":222,"line":223},[220,10848,10849],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,10851,10852,10854,10856,10858,10860,10863],{"class":222,"line":179},[220,10853,343],{"class":264},[220,10855,347],{"class":346},[220,10857,350],{"class":226},[220,10859,353],{"class":264},[220,10861,10862],{"class":230},"\"fixed inset-0 -z-10\"",[220,10864,359],{"class":264},[220,10866,10867,10869,10872],{"class":222,"line":389},[220,10868,364],{"class":264},[220,10870,10871],{"class":346},"Aurora",[220,10873,386],{"class":264},[220,10875,10876,10878,10880],{"class":222,"line":399},[220,10877,402],{"class":264},[220,10879,347],{"class":346},[220,10881,359],{"class":264},[220,10883,10884],{"class":222,"line":644},[220,10885,647],{"emptyLinePlaceholder":194},[220,10887,10888,10890,10893,10895,10897,10900],{"class":222,"line":650},[220,10889,343],{"class":264},[220,10891,10892],{"class":346},"main",[220,10894,350],{"class":226},[220,10896,353],{"class":264},[220,10898,10899],{"class":230},"\"relative z-10\"",[220,10901,359],{"class":264},[220,10903,10904],{"class":222,"line":656},[220,10905,10906],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,10908,10909,10911,10913],{"class":222,"line":673},[220,10910,402],{"class":264},[220,10912,10892],{"class":346},[220,10914,359],{"class":264},[212,10916,10918],{"className":409,"code":10917,"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,10919,10920,10925,10939,10947,10955,10969,10979,10987],{"__ignoreMap":178},[220,10921,10922],{"class":222,"line":223},[220,10923,10924],{"class":264},"\u003C>\n",[220,10926,10927,10929,10931,10933,10935,10937],{"class":222,"line":179},[220,10928,364],{"class":264},[220,10930,347],{"class":420},[220,10932,423],{"class":226},[220,10934,353],{"class":260},[220,10936,10862],{"class":230},[220,10938,359],{"class":264},[220,10940,10941,10943,10945],{"class":222,"line":389},[220,10942,2550],{"class":264},[220,10944,10871],{"class":420},[220,10946,386],{"class":264},[220,10948,10949,10951,10953],{"class":222,"line":399},[220,10950,2567],{"class":264},[220,10952,347],{"class":420},[220,10954,359],{"class":264},[220,10956,10957,10959,10961,10963,10965,10967],{"class":222,"line":644},[220,10958,364],{"class":264},[220,10960,10892],{"class":346},[220,10962,423],{"class":226},[220,10964,353],{"class":260},[220,10966,10899],{"class":230},[220,10968,359],{"class":264},[220,10970,10971,10974,10977],{"class":222,"line":650},[220,10972,10973],{"class":264}," {",[220,10975,10976],{"class":609},"\u002F* Your page content *\u002F",[220,10978,749],{"class":264},[220,10980,10981,10983,10985],{"class":222,"line":656},[220,10982,2567],{"class":264},[220,10984,10892],{"class":346},[220,10986,359],{"class":264},[220,10988,10989],{"class":222,"line":673},[220,10990,10991],{"class":264},"\u003C\u002F>\n",[212,10993,10995],{"className":468,"code":10994,"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,10996,10997,11011,11019,11027,11031,11045,11050],{"__ignoreMap":178},[220,10998,10999,11001,11003,11005,11007,11009],{"class":222,"line":223},[220,11000,343],{"class":264},[220,11002,347],{"class":420},[220,11004,350],{"class":226},[220,11006,353],{"class":260},[220,11008,10862],{"class":230},[220,11010,359],{"class":264},[220,11012,11013,11015,11017],{"class":222,"line":179},[220,11014,364],{"class":264},[220,11016,10871],{"class":420},[220,11018,386],{"class":264},[220,11020,11021,11023,11025],{"class":222,"line":389},[220,11022,402],{"class":264},[220,11024,347],{"class":420},[220,11026,359],{"class":264},[220,11028,11029],{"class":222,"line":399},[220,11030,647],{"emptyLinePlaceholder":194},[220,11032,11033,11035,11037,11039,11041,11043],{"class":222,"line":644},[220,11034,343],{"class":264},[220,11036,10892],{"class":346},[220,11038,350],{"class":226},[220,11040,353],{"class":260},[220,11042,10899],{"class":230},[220,11044,359],{"class":264},[220,11046,11047],{"class":222,"line":650},[220,11048,11049],{"class":264}," \u003C!-- Your page content -->\n",[220,11051,11052,11054,11056],{"class":222,"line":656},[220,11053,402],{"class":264},[220,11055,10892],{"class":346},[220,11057,359],{"class":264},[212,11059,11061],{"className":468,"code":11060,"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,11062,11063,11067,11081,11089,11097,11111,11119,11127],{"__ignoreMap":178},[220,11064,11065],{"class":222,"line":223},[220,11066,10924],{"class":264},[220,11068,11069,11071,11073,11075,11077,11079],{"class":222,"line":179},[220,11070,364],{"class":264},[220,11072,347],{"class":420},[220,11074,350],{"class":226},[220,11076,353],{"class":260},[220,11078,10862],{"class":230},[220,11080,359],{"class":264},[220,11082,11083,11085,11087],{"class":222,"line":389},[220,11084,2550],{"class":264},[220,11086,10871],{"class":420},[220,11088,386],{"class":264},[220,11090,11091,11093,11095],{"class":222,"line":399},[220,11092,2567],{"class":264},[220,11094,347],{"class":420},[220,11096,359],{"class":264},[220,11098,11099,11101,11103,11105,11107,11109],{"class":222,"line":644},[220,11100,364],{"class":264},[220,11102,10892],{"class":346},[220,11104,350],{"class":226},[220,11106,353],{"class":260},[220,11108,10899],{"class":230},[220,11110,359],{"class":264},[220,11112,11113,11115,11117],{"class":222,"line":650},[220,11114,10973],{"class":264},[220,11116,10976],{"class":609},[220,11118,749],{"class":264},[220,11120,11121,11123,11125],{"class":222,"line":656},[220,11122,2567],{"class":264},[220,11124,10892],{"class":346},[220,11126,359],{"class":264},[220,11128,11129],{"class":222,"line":673},[220,11130,10991],{"class":264},[212,11132,11136],{"className":11133,"code":11134,"language":11135,"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,11137,11138,11166,11186,11190,11206,11217,11242,11253,11258],{"__ignoreMap":178},[220,11139,11140,11142,11145,11147,11149,11152,11154,11156,11159,11162,11164],{"class":222,"line":223},[220,11141,343],{"class":264},[220,11143,11144],{"class":346},"canvas",[220,11146,7346],{"class":226},[220,11148,353],{"class":264},[220,11150,11151],{"class":230},"\"bg\"",[220,11153,663],{"class":226},[220,11155,353],{"class":264},[220,11157,11158],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,11160,11161],{"class":264},">\u003C\u002F",[220,11163,11144],{"class":346},[220,11165,359],{"class":264},[220,11167,11168,11170,11172,11174,11176,11179,11182,11184],{"class":222,"line":179},[220,11169,343],{"class":264},[220,11171,10892],{"class":346},[220,11173,663],{"class":226},[220,11175,353],{"class":264},[220,11177,11178],{"class":230},"\"position:relative;z-index:10;\"",[220,11180,11181],{"class":264},">Your content\u003C\u002F",[220,11183,10892],{"class":346},[220,11185,359],{"class":264},[220,11187,11188],{"class":222,"line":389},[220,11189,647],{"emptyLinePlaceholder":194},[220,11191,11192,11194,11196,11199,11201,11204],{"class":222,"line":399},[220,11193,343],{"class":264},[220,11195,2590],{"class":346},[220,11197,11198],{"class":226}," type",[220,11200,353],{"class":264},[220,11202,11203],{"class":230},"\"module\"",[220,11205,359],{"class":264},[220,11207,11208,11211,11213,11215],{"class":222,"line":644},[220,11209,11210],{"class":260}," import",[220,11212,9763],{"class":264},[220,11214,268],{"class":260},[220,11216,9768],{"class":230},[220,11218,11219,11221,11223,11225,11227,11229,11232,11234,11236,11239],{"class":222,"line":650},[220,11220,2705],{"class":260},[220,11222,1738],{"class":420},[220,11224,1741],{"class":260},[220,11226,1744],{"class":260},[220,11228,1747],{"class":226},[220,11230,11231],{"class":264},"(document.",[220,11233,3141],{"class":226},[220,11235,2626],{"class":264},[220,11237,11238],{"class":230},"'bg'",[220,11240,11241],{"class":264},"), {\n",[220,11243,11244,11247,11250],{"class":222,"line":656},[220,11245,11246],{"class":264}," components: [{ type: ",[220,11248,11249],{"class":230},"'Aurora'",[220,11251,11252],{"class":264},", props: {} }]\n",[220,11254,11255],{"class":222,"line":673},[220,11256,11257],{"class":264}," })\n",[220,11259,11260,11262,11264],{"class":222,"line":682},[220,11261,402],{"class":264},[220,11263,2590],{"class":346},[220,11265,359],{"class":264},[3262,11267,11269],{"id":11268},"section-background","Section background",[15,11271,11272,11273,1864,11276,11279],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,11274,11275],{},"position: relative",[99,11277,11278],{},"overflow: hidden"," to contain the canvas:",[246,11281,11282,11387,11480,11555],{":tabs":248},[212,11283,11285],{"className":334,"code":11284,"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,11286,11287,11303,11318,11327,11335,11339,11359,11379],{"__ignoreMap":178},[220,11288,11289,11291,11294,11296,11298,11301],{"class":222,"line":223},[220,11290,343],{"class":264},[220,11292,11293],{"class":346},"section",[220,11295,350],{"class":226},[220,11297,353],{"class":264},[220,11299,11300],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,11302,359],{"class":264},[220,11304,11305,11307,11309,11311,11313,11316],{"class":222,"line":179},[220,11306,364],{"class":264},[220,11308,347],{"class":346},[220,11310,350],{"class":226},[220,11312,353],{"class":264},[220,11314,11315],{"class":230},"\"absolute inset-0 -z-10\"",[220,11317,359],{"class":264},[220,11319,11320,11322,11325],{"class":222,"line":389},[220,11321,2550],{"class":264},[220,11323,11324],{"class":346},"Plasma",[220,11326,386],{"class":264},[220,11328,11329,11331,11333],{"class":222,"line":399},[220,11330,2567],{"class":264},[220,11332,347],{"class":346},[220,11334,359],{"class":264},[220,11336,11337],{"class":222,"line":644},[220,11338,647],{"emptyLinePlaceholder":194},[220,11340,11341,11343,11345,11347,11349,11352,11355,11357],{"class":222,"line":650},[220,11342,364],{"class":264},[220,11344,23],{"class":346},[220,11346,350],{"class":226},[220,11348,353],{"class":264},[220,11350,11351],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,11353,11354],{"class":264},">Section Heading\u003C\u002F",[220,11356,23],{"class":346},[220,11358,359],{"class":264},[220,11360,11361,11363,11365,11367,11369,11372,11375,11377],{"class":222,"line":656},[220,11362,364],{"class":264},[220,11364,15],{"class":346},[220,11366,350],{"class":226},[220,11368,353],{"class":264},[220,11370,11371],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,11373,11374],{"class":264},">Content above the shader.\u003C\u002F",[220,11376,15],{"class":346},[220,11378,359],{"class":264},[220,11380,11381,11383,11385],{"class":222,"line":673},[220,11382,402],{"class":264},[220,11384,11293],{"class":346},[220,11386,359],{"class":264},[212,11388,11390],{"className":409,"code":11389,"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,11391,11392,11406,11420,11428,11436,11454,11472],{"__ignoreMap":178},[220,11393,11394,11396,11398,11400,11402,11404],{"class":222,"line":223},[220,11395,343],{"class":264},[220,11397,11293],{"class":346},[220,11399,423],{"class":226},[220,11401,353],{"class":260},[220,11403,11300],{"class":230},[220,11405,359],{"class":264},[220,11407,11408,11410,11412,11414,11416,11418],{"class":222,"line":179},[220,11409,364],{"class":264},[220,11411,347],{"class":420},[220,11413,423],{"class":226},[220,11415,353],{"class":260},[220,11417,11315],{"class":230},[220,11419,359],{"class":264},[220,11421,11422,11424,11426],{"class":222,"line":389},[220,11423,2550],{"class":264},[220,11425,11324],{"class":420},[220,11427,386],{"class":264},[220,11429,11430,11432,11434],{"class":222,"line":399},[220,11431,2567],{"class":264},[220,11433,347],{"class":420},[220,11435,359],{"class":264},[220,11437,11438,11440,11442,11444,11446,11448,11450,11452],{"class":222,"line":644},[220,11439,364],{"class":264},[220,11441,23],{"class":346},[220,11443,423],{"class":226},[220,11445,353],{"class":260},[220,11447,11351],{"class":230},[220,11449,11354],{"class":264},[220,11451,23],{"class":346},[220,11453,359],{"class":264},[220,11455,11456,11458,11460,11462,11464,11466,11468,11470],{"class":222,"line":650},[220,11457,364],{"class":264},[220,11459,15],{"class":346},[220,11461,423],{"class":226},[220,11463,353],{"class":260},[220,11465,11371],{"class":230},[220,11467,11374],{"class":264},[220,11469,15],{"class":346},[220,11471,359],{"class":264},[220,11473,11474,11476,11478],{"class":222,"line":656},[220,11475,402],{"class":264},[220,11477,11293],{"class":346},[220,11479,359],{"class":264},[212,11481,11483],{"className":468,"code":11482,"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,11484,11485,11499,11513,11521,11529,11547],{"__ignoreMap":178},[220,11486,11487,11489,11491,11493,11495,11497],{"class":222,"line":223},[220,11488,343],{"class":264},[220,11490,11293],{"class":346},[220,11492,350],{"class":226},[220,11494,353],{"class":260},[220,11496,11300],{"class":230},[220,11498,359],{"class":264},[220,11500,11501,11503,11505,11507,11509,11511],{"class":222,"line":179},[220,11502,364],{"class":264},[220,11504,347],{"class":420},[220,11506,350],{"class":226},[220,11508,353],{"class":260},[220,11510,11315],{"class":230},[220,11512,359],{"class":264},[220,11514,11515,11517,11519],{"class":222,"line":389},[220,11516,2550],{"class":264},[220,11518,11324],{"class":420},[220,11520,386],{"class":264},[220,11522,11523,11525,11527],{"class":222,"line":399},[220,11524,2567],{"class":264},[220,11526,347],{"class":420},[220,11528,359],{"class":264},[220,11530,11531,11533,11535,11537,11539,11541,11543,11545],{"class":222,"line":644},[220,11532,364],{"class":264},[220,11534,23],{"class":346},[220,11536,350],{"class":226},[220,11538,353],{"class":260},[220,11540,11351],{"class":230},[220,11542,11354],{"class":264},[220,11544,23],{"class":346},[220,11546,359],{"class":264},[220,11548,11549,11551,11553],{"class":222,"line":650},[220,11550,402],{"class":264},[220,11552,11293],{"class":346},[220,11554,359],{"class":264},[212,11556,11557],{"className":468,"code":11482,"language":469,"meta":178,"style":178},[99,11558,11559,11573,11587,11595,11603,11621],{"__ignoreMap":178},[220,11560,11561,11563,11565,11567,11569,11571],{"class":222,"line":223},[220,11562,343],{"class":264},[220,11564,11293],{"class":346},[220,11566,350],{"class":226},[220,11568,353],{"class":260},[220,11570,11300],{"class":230},[220,11572,359],{"class":264},[220,11574,11575,11577,11579,11581,11583,11585],{"class":222,"line":179},[220,11576,364],{"class":264},[220,11578,347],{"class":420},[220,11580,350],{"class":226},[220,11582,353],{"class":260},[220,11584,11315],{"class":230},[220,11586,359],{"class":264},[220,11588,11589,11591,11593],{"class":222,"line":389},[220,11590,2550],{"class":264},[220,11592,11324],{"class":420},[220,11594,386],{"class":264},[220,11596,11597,11599,11601],{"class":222,"line":399},[220,11598,2567],{"class":264},[220,11600,347],{"class":420},[220,11602,359],{"class":264},[220,11604,11605,11607,11609,11611,11613,11615,11617,11619],{"class":222,"line":644},[220,11606,364],{"class":264},[220,11608,23],{"class":346},[220,11610,350],{"class":226},[220,11612,353],{"class":260},[220,11614,11351],{"class":230},[220,11616,11354],{"class":264},[220,11618,23],{"class":346},[220,11620,359],{"class":264},[220,11622,11623,11625,11627],{"class":222,"line":650},[220,11624,402],{"class":264},[220,11626,11293],{"class":346},[220,11628,359],{"class":264},[3262,11630,11632],{"id":11631},"card-with-shader-fill","Card with shader fill",[15,11634,11635],{},"A shader used as the visual background of a card or panel:",[246,11637,11638,11798,11944,12071],{":tabs":248},[212,11639,11641],{"className":334,"code":11640,"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,11642,11643,11658,11673,11688,11711,11719,11723,11728,11742,11762,11782,11790],{"__ignoreMap":178},[220,11644,11645,11647,11649,11651,11653,11656],{"class":222,"line":223},[220,11646,343],{"class":264},[220,11648,8817],{"class":346},[220,11650,350],{"class":226},[220,11652,353],{"class":264},[220,11654,11655],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,11657,359],{"class":264},[220,11659,11660,11662,11664,11666,11668,11671],{"class":222,"line":179},[220,11661,364],{"class":264},[220,11663,347],{"class":346},[220,11665,350],{"class":226},[220,11667,353],{"class":264},[220,11669,11670],{"class":230},"\"absolute inset-0\"",[220,11672,359],{"class":264},[220,11674,11675,11677,11679,11681,11683,11686],{"class":222,"line":389},[220,11676,2550],{"class":264},[220,11678,1585],{"class":346},[220,11680,1588],{"class":226},[220,11682,353],{"class":264},[220,11684,11685],{"class":230},"\"#1e1b4b\"",[220,11687,386],{"class":264},[220,11689,11690,11692,11694,11697,11699,11702,11704,11706,11709],{"class":222,"line":399},[220,11691,2550],{"class":264},[220,11693,10044],{"class":346},[220,11695,11696],{"class":226}," :intensity",[220,11698,353],{"class":264},[220,11700,11701],{"class":230},"\"0.4\"",[220,11703,1588],{"class":226},[220,11705,353],{"class":264},[220,11707,11708],{"class":230},"\"#6366f1\"",[220,11710,386],{"class":264},[220,11712,11713,11715,11717],{"class":222,"line":644},[220,11714,2567],{"class":264},[220,11716,347],{"class":346},[220,11718,359],{"class":264},[220,11720,11721],{"class":222,"line":650},[220,11722,647],{"emptyLinePlaceholder":194},[220,11724,11725],{"class":222,"line":656},[220,11726,11727],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,11729,11730,11732,11734,11736,11738,11740],{"class":222,"line":673},[220,11731,364],{"class":264},[220,11733,8817],{"class":346},[220,11735,350],{"class":226},[220,11737,353],{"class":264},[220,11739,10899],{"class":230},[220,11741,359],{"class":264},[220,11743,11744,11746,11748,11750,11752,11755,11758,11760],{"class":222,"line":682},[220,11745,2550],{"class":264},[220,11747,3262],{"class":346},[220,11749,350],{"class":226},[220,11751,353],{"class":264},[220,11753,11754],{"class":230},"\"text-xl font-semibold\"",[220,11756,11757],{"class":264},">Card Title\u003C\u002F",[220,11759,3262],{"class":346},[220,11761,359],{"class":264},[220,11763,11764,11766,11768,11770,11772,11775,11778,11780],{"class":222,"line":691},[220,11765,2550],{"class":264},[220,11767,15],{"class":346},[220,11769,350],{"class":226},[220,11771,353],{"class":264},[220,11773,11774],{"class":230},"\"text-white\u002F70 mt-2\"",[220,11776,11777],{"class":264},">Card description here.\u003C\u002F",[220,11779,15],{"class":346},[220,11781,359],{"class":264},[220,11783,11784,11786,11788],{"class":222,"line":696},[220,11785,2567],{"class":264},[220,11787,8817],{"class":346},[220,11789,359],{"class":264},[220,11791,11792,11794,11796],{"class":222,"line":702},[220,11793,402],{"class":264},[220,11795,8817],{"class":346},[220,11797,359],{"class":264},[212,11799,11801],{"className":409,"code":11800,"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,11802,11803,11817,11831,11845,11870,11878,11892,11910,11928,11936],{"__ignoreMap":178},[220,11804,11805,11807,11809,11811,11813,11815],{"class":222,"line":223},[220,11806,343],{"class":264},[220,11808,8817],{"class":346},[220,11810,423],{"class":226},[220,11812,353],{"class":260},[220,11814,11655],{"class":230},[220,11816,359],{"class":264},[220,11818,11819,11821,11823,11825,11827,11829],{"class":222,"line":179},[220,11820,364],{"class":264},[220,11822,347],{"class":420},[220,11824,423],{"class":226},[220,11826,353],{"class":260},[220,11828,11670],{"class":230},[220,11830,359],{"class":264},[220,11832,11833,11835,11837,11839,11841,11843],{"class":222,"line":389},[220,11834,2550],{"class":264},[220,11836,1585],{"class":420},[220,11838,1588],{"class":226},[220,11840,353],{"class":260},[220,11842,11685],{"class":230},[220,11844,386],{"class":264},[220,11846,11847,11849,11851,11854,11856,11858,11860,11862,11864,11866,11868],{"class":222,"line":399},[220,11848,2550],{"class":264},[220,11850,10044],{"class":420},[220,11852,11853],{"class":226}," intensity",[220,11855,353],{"class":260},[220,11857,743],{"class":264},[220,11859,6495],{"class":420},[220,11861,2914],{"class":264},[220,11863,6308],{"class":226},[220,11865,353],{"class":260},[220,11867,11708],{"class":230},[220,11869,386],{"class":264},[220,11871,11872,11874,11876],{"class":222,"line":644},[220,11873,2567],{"class":264},[220,11875,347],{"class":420},[220,11877,359],{"class":264},[220,11879,11880,11882,11884,11886,11888,11890],{"class":222,"line":650},[220,11881,364],{"class":264},[220,11883,8817],{"class":346},[220,11885,423],{"class":226},[220,11887,353],{"class":260},[220,11889,10899],{"class":230},[220,11891,359],{"class":264},[220,11893,11894,11896,11898,11900,11902,11904,11906,11908],{"class":222,"line":656},[220,11895,2550],{"class":264},[220,11897,3262],{"class":346},[220,11899,423],{"class":226},[220,11901,353],{"class":260},[220,11903,11754],{"class":230},[220,11905,11757],{"class":264},[220,11907,3262],{"class":346},[220,11909,359],{"class":264},[220,11911,11912,11914,11916,11918,11920,11922,11924,11926],{"class":222,"line":673},[220,11913,2550],{"class":264},[220,11915,15],{"class":346},[220,11917,423],{"class":226},[220,11919,353],{"class":260},[220,11921,11774],{"class":230},[220,11923,11777],{"class":264},[220,11925,15],{"class":346},[220,11927,359],{"class":264},[220,11929,11930,11932,11934],{"class":222,"line":682},[220,11931,2567],{"class":264},[220,11933,8817],{"class":346},[220,11935,359],{"class":264},[220,11937,11938,11940,11942],{"class":222,"line":691},[220,11939,402],{"class":264},[220,11941,8817],{"class":346},[220,11943,359],{"class":264},[212,11945,11947],{"className":468,"code":11946,"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,11948,11949,11963,11977,11991,12015,12023,12037,12055,12063],{"__ignoreMap":178},[220,11950,11951,11953,11955,11957,11959,11961],{"class":222,"line":223},[220,11952,343],{"class":264},[220,11954,8817],{"class":346},[220,11956,350],{"class":226},[220,11958,353],{"class":260},[220,11960,11655],{"class":230},[220,11962,359],{"class":264},[220,11964,11965,11967,11969,11971,11973,11975],{"class":222,"line":179},[220,11966,364],{"class":264},[220,11968,347],{"class":420},[220,11970,350],{"class":226},[220,11972,353],{"class":260},[220,11974,11670],{"class":230},[220,11976,359],{"class":264},[220,11978,11979,11981,11983,11985,11987,11989],{"class":222,"line":389},[220,11980,2550],{"class":264},[220,11982,1585],{"class":420},[220,11984,1588],{"class":226},[220,11986,353],{"class":260},[220,11988,11685],{"class":230},[220,11990,386],{"class":264},[220,11992,11993,11995,11997,11999,12001,12003,12005,12007,12009,12011,12013],{"class":222,"line":399},[220,11994,2550],{"class":264},[220,11996,10044],{"class":420},[220,11998,11853],{"class":226},[220,12000,353],{"class":260},[220,12002,743],{"class":264},[220,12004,6495],{"class":420},[220,12006,2914],{"class":264},[220,12008,6308],{"class":226},[220,12010,353],{"class":260},[220,12012,11708],{"class":230},[220,12014,386],{"class":264},[220,12016,12017,12019,12021],{"class":222,"line":644},[220,12018,2567],{"class":264},[220,12020,347],{"class":420},[220,12022,359],{"class":264},[220,12024,12025,12027,12029,12031,12033,12035],{"class":222,"line":650},[220,12026,364],{"class":264},[220,12028,8817],{"class":346},[220,12030,350],{"class":226},[220,12032,353],{"class":260},[220,12034,10899],{"class":230},[220,12036,359],{"class":264},[220,12038,12039,12041,12043,12045,12047,12049,12051,12053],{"class":222,"line":656},[220,12040,2550],{"class":264},[220,12042,3262],{"class":346},[220,12044,350],{"class":226},[220,12046,353],{"class":260},[220,12048,11754],{"class":230},[220,12050,11757],{"class":264},[220,12052,3262],{"class":346},[220,12054,359],{"class":264},[220,12056,12057,12059,12061],{"class":222,"line":673},[220,12058,2567],{"class":264},[220,12060,8817],{"class":346},[220,12062,359],{"class":264},[220,12064,12065,12067,12069],{"class":222,"line":682},[220,12066,402],{"class":264},[220,12068,8817],{"class":346},[220,12070,359],{"class":264},[212,12072,12073],{"className":468,"code":11946,"language":469,"meta":178,"style":178},[99,12074,12075,12089,12103,12117,12141,12149,12163,12181,12189],{"__ignoreMap":178},[220,12076,12077,12079,12081,12083,12085,12087],{"class":222,"line":223},[220,12078,343],{"class":264},[220,12080,8817],{"class":346},[220,12082,350],{"class":226},[220,12084,353],{"class":260},[220,12086,11655],{"class":230},[220,12088,359],{"class":264},[220,12090,12091,12093,12095,12097,12099,12101],{"class":222,"line":179},[220,12092,364],{"class":264},[220,12094,347],{"class":420},[220,12096,350],{"class":226},[220,12098,353],{"class":260},[220,12100,11670],{"class":230},[220,12102,359],{"class":264},[220,12104,12105,12107,12109,12111,12113,12115],{"class":222,"line":389},[220,12106,2550],{"class":264},[220,12108,1585],{"class":420},[220,12110,1588],{"class":226},[220,12112,353],{"class":260},[220,12114,11685],{"class":230},[220,12116,386],{"class":264},[220,12118,12119,12121,12123,12125,12127,12129,12131,12133,12135,12137,12139],{"class":222,"line":399},[220,12120,2550],{"class":264},[220,12122,10044],{"class":420},[220,12124,11853],{"class":226},[220,12126,353],{"class":260},[220,12128,743],{"class":264},[220,12130,6495],{"class":420},[220,12132,2914],{"class":264},[220,12134,6308],{"class":226},[220,12136,353],{"class":260},[220,12138,11708],{"class":230},[220,12140,386],{"class":264},[220,12142,12143,12145,12147],{"class":222,"line":644},[220,12144,2567],{"class":264},[220,12146,347],{"class":420},[220,12148,359],{"class":264},[220,12150,12151,12153,12155,12157,12159,12161],{"class":222,"line":650},[220,12152,364],{"class":264},[220,12154,8817],{"class":346},[220,12156,350],{"class":226},[220,12158,353],{"class":260},[220,12160,10899],{"class":230},[220,12162,359],{"class":264},[220,12164,12165,12167,12169,12171,12173,12175,12177,12179],{"class":222,"line":656},[220,12166,2550],{"class":264},[220,12168,3262],{"class":346},[220,12170,350],{"class":226},[220,12172,353],{"class":260},[220,12174,11754],{"class":230},[220,12176,11757],{"class":264},[220,12178,3262],{"class":346},[220,12180,359],{"class":264},[220,12182,12183,12185,12187],{"class":222,"line":673},[220,12184,2567],{"class":264},[220,12186,8817],{"class":346},[220,12188,359],{"class":264},[220,12190,12191,12193,12195],{"class":222,"line":682},[220,12192,402],{"class":264},[220,12194,8817],{"class":346},[220,12196,359],{"class":264},[3262,12198,12200],{"id":12199},"inline-content-block","Inline content block",[15,12202,12203],{},"A shader that flows naturally in document layout, like an image or video:",[246,12205,12206,12294,12369,12444],{":tabs":248},[212,12207,12209],{"className":334,"code":12208,"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,12210,12211,12220,12233,12237,12252,12261,12269,12273,12286],{"__ignoreMap":178},[220,12212,12213,12215,12218],{"class":222,"line":223},[220,12214,343],{"class":264},[220,12216,12217],{"class":346},"article",[220,12219,359],{"class":264},[220,12221,12222,12224,12226,12229,12231],{"class":222,"line":179},[220,12223,364],{"class":264},[220,12225,15],{"class":346},[220,12227,12228],{"class":264},">Text before the shader.\u003C\u002F",[220,12230,15],{"class":346},[220,12232,359],{"class":264},[220,12234,12235],{"class":222,"line":389},[220,12236,647],{"emptyLinePlaceholder":194},[220,12238,12239,12241,12243,12245,12247,12250],{"class":222,"line":399},[220,12240,364],{"class":264},[220,12242,347],{"class":346},[220,12244,350],{"class":226},[220,12246,353],{"class":264},[220,12248,12249],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,12251,359],{"class":264},[220,12253,12254,12256,12259],{"class":222,"line":644},[220,12255,2550],{"class":264},[220,12257,12258],{"class":346},"Swirl",[220,12260,386],{"class":264},[220,12262,12263,12265,12267],{"class":222,"line":650},[220,12264,2567],{"class":264},[220,12266,347],{"class":346},[220,12268,359],{"class":264},[220,12270,12271],{"class":222,"line":656},[220,12272,647],{"emptyLinePlaceholder":194},[220,12274,12275,12277,12279,12282,12284],{"class":222,"line":673},[220,12276,364],{"class":264},[220,12278,15],{"class":346},[220,12280,12281],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,12283,15],{"class":346},[220,12285,359],{"class":264},[220,12287,12288,12290,12292],{"class":222,"line":682},[220,12289,402],{"class":264},[220,12291,12217],{"class":346},[220,12293,359],{"class":264},[212,12295,12297],{"className":409,"code":12296,"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,12298,12299,12307,12319,12333,12341,12349,12361],{"__ignoreMap":178},[220,12300,12301,12303,12305],{"class":222,"line":223},[220,12302,343],{"class":264},[220,12304,12217],{"class":346},[220,12306,359],{"class":264},[220,12308,12309,12311,12313,12315,12317],{"class":222,"line":179},[220,12310,364],{"class":264},[220,12312,15],{"class":346},[220,12314,12228],{"class":264},[220,12316,15],{"class":346},[220,12318,359],{"class":264},[220,12320,12321,12323,12325,12327,12329,12331],{"class":222,"line":389},[220,12322,364],{"class":264},[220,12324,347],{"class":420},[220,12326,423],{"class":226},[220,12328,353],{"class":260},[220,12330,12249],{"class":230},[220,12332,359],{"class":264},[220,12334,12335,12337,12339],{"class":222,"line":399},[220,12336,2550],{"class":264},[220,12338,12258],{"class":420},[220,12340,386],{"class":264},[220,12342,12343,12345,12347],{"class":222,"line":644},[220,12344,2567],{"class":264},[220,12346,347],{"class":420},[220,12348,359],{"class":264},[220,12350,12351,12353,12355,12357,12359],{"class":222,"line":650},[220,12352,364],{"class":264},[220,12354,15],{"class":346},[220,12356,12281],{"class":264},[220,12358,15],{"class":346},[220,12360,359],{"class":264},[220,12362,12363,12365,12367],{"class":222,"line":656},[220,12364,402],{"class":264},[220,12366,12217],{"class":346},[220,12368,359],{"class":264},[212,12370,12372],{"className":468,"code":12371,"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,12373,12374,12382,12394,12408,12416,12424,12436],{"__ignoreMap":178},[220,12375,12376,12378,12380],{"class":222,"line":223},[220,12377,343],{"class":264},[220,12379,12217],{"class":346},[220,12381,359],{"class":264},[220,12383,12384,12386,12388,12390,12392],{"class":222,"line":179},[220,12385,364],{"class":264},[220,12387,15],{"class":346},[220,12389,12228],{"class":264},[220,12391,15],{"class":346},[220,12393,359],{"class":264},[220,12395,12396,12398,12400,12402,12404,12406],{"class":222,"line":389},[220,12397,364],{"class":264},[220,12399,347],{"class":420},[220,12401,350],{"class":226},[220,12403,353],{"class":260},[220,12405,12249],{"class":230},[220,12407,359],{"class":264},[220,12409,12410,12412,12414],{"class":222,"line":399},[220,12411,2550],{"class":264},[220,12413,12258],{"class":420},[220,12415,386],{"class":264},[220,12417,12418,12420,12422],{"class":222,"line":644},[220,12419,2567],{"class":264},[220,12421,347],{"class":420},[220,12423,359],{"class":264},[220,12425,12426,12428,12430,12432,12434],{"class":222,"line":650},[220,12427,364],{"class":264},[220,12429,15],{"class":346},[220,12431,12281],{"class":264},[220,12433,15],{"class":346},[220,12435,359],{"class":264},[220,12437,12438,12440,12442],{"class":222,"line":656},[220,12439,402],{"class":264},[220,12441,12217],{"class":346},[220,12443,359],{"class":264},[212,12445,12446],{"className":468,"code":12371,"language":469,"meta":178,"style":178},[99,12447,12448,12456,12468,12482,12490,12498,12510],{"__ignoreMap":178},[220,12449,12450,12452,12454],{"class":222,"line":223},[220,12451,343],{"class":264},[220,12453,12217],{"class":346},[220,12455,359],{"class":264},[220,12457,12458,12460,12462,12464,12466],{"class":222,"line":179},[220,12459,364],{"class":264},[220,12461,15],{"class":346},[220,12463,12228],{"class":264},[220,12465,15],{"class":346},[220,12467,359],{"class":264},[220,12469,12470,12472,12474,12476,12478,12480],{"class":222,"line":389},[220,12471,364],{"class":264},[220,12473,347],{"class":420},[220,12475,350],{"class":226},[220,12477,353],{"class":260},[220,12479,12249],{"class":230},[220,12481,359],{"class":264},[220,12483,12484,12486,12488],{"class":222,"line":399},[220,12485,2550],{"class":264},[220,12487,12258],{"class":420},[220,12489,386],{"class":264},[220,12491,12492,12494,12496],{"class":222,"line":644},[220,12493,2567],{"class":264},[220,12495,347],{"class":420},[220,12497,359],{"class":264},[220,12499,12500,12502,12504,12506,12508],{"class":222,"line":650},[220,12501,364],{"class":264},[220,12503,15],{"class":346},[220,12505,12281],{"class":264},[220,12507,15],{"class":346},[220,12509,359],{"class":264},[220,12511,12512,12514,12516],{"class":222,"line":656},[220,12513,402],{"class":264},[220,12515,12217],{"class":346},[220,12517,359],{"class":264},[23,12519,12521],{"id":12520},"layering-content-over-shaders","Layering content over shaders",[3262,12523,12525],{"id":12524},"pointer-events","Pointer events",[15,12527,12528,12529,12532],{},"Canvases capture all pointer events by default. Add ",[99,12530,12531],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,12534,12535,12571,12606,12640],{":tabs":248},[212,12536,12538],{"className":334,"code":12537,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,12539,12540,12555,12563],{"__ignoreMap":178},[220,12541,12542,12544,12546,12548,12550,12553],{"class":222,"line":223},[220,12543,343],{"class":264},[220,12545,347],{"class":346},[220,12547,350],{"class":226},[220,12549,353],{"class":264},[220,12551,12552],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,12554,359],{"class":264},[220,12556,12557,12559,12561],{"class":222,"line":179},[220,12558,364],{"class":264},[220,12560,10871],{"class":346},[220,12562,386],{"class":264},[220,12564,12565,12567,12569],{"class":222,"line":389},[220,12566,402],{"class":264},[220,12568,347],{"class":346},[220,12570,359],{"class":264},[212,12572,12574],{"className":409,"code":12573,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,12575,12576,12590,12598],{"__ignoreMap":178},[220,12577,12578,12580,12582,12584,12586,12588],{"class":222,"line":223},[220,12579,343],{"class":264},[220,12581,347],{"class":420},[220,12583,423],{"class":226},[220,12585,353],{"class":260},[220,12587,12552],{"class":230},[220,12589,359],{"class":264},[220,12591,12592,12594,12596],{"class":222,"line":179},[220,12593,364],{"class":264},[220,12595,10871],{"class":420},[220,12597,386],{"class":264},[220,12599,12600,12602,12604],{"class":222,"line":389},[220,12601,402],{"class":264},[220,12603,347],{"class":420},[220,12605,359],{"class":264},[212,12607,12608],{"className":468,"code":12537,"language":469,"meta":178,"style":178},[99,12609,12610,12624,12632],{"__ignoreMap":178},[220,12611,12612,12614,12616,12618,12620,12622],{"class":222,"line":223},[220,12613,343],{"class":264},[220,12615,347],{"class":420},[220,12617,350],{"class":226},[220,12619,353],{"class":260},[220,12621,12552],{"class":230},[220,12623,359],{"class":264},[220,12625,12626,12628,12630],{"class":222,"line":179},[220,12627,364],{"class":264},[220,12629,10871],{"class":420},[220,12631,386],{"class":264},[220,12633,12634,12636,12638],{"class":222,"line":389},[220,12635,402],{"class":264},[220,12637,347],{"class":420},[220,12639,359],{"class":264},[212,12641,12642],{"className":468,"code":12537,"language":469,"meta":178,"style":178},[99,12643,12644,12658,12666],{"__ignoreMap":178},[220,12645,12646,12648,12650,12652,12654,12656],{"class":222,"line":223},[220,12647,343],{"class":264},[220,12649,347],{"class":420},[220,12651,350],{"class":226},[220,12653,353],{"class":260},[220,12655,12552],{"class":230},[220,12657,359],{"class":264},[220,12659,12660,12662,12664],{"class":222,"line":179},[220,12661,364],{"class":264},[220,12663,10871],{"class":420},[220,12665,386],{"class":264},[220,12667,12668,12670,12672],{"class":222,"line":389},[220,12669,402],{"class":264},[220,12671,347],{"class":420},[220,12673,359],{"class":264},[15,12675,12676,12677,1864,12679,12682,12683,12685],{},"Interactive effects like ",[99,12678,394],{},[99,12680,12681],{},"CursorRipples"," still track global mouse position even with ",[99,12684,12531],{}," — they listen on the window rather than the canvas element.",[3262,12687,12689],{"id":12688},"stacking-context-and-z-index","Stacking context and z-index",[15,12691,12692,12695,12696,12698,12699,1554],{},[99,12693,12694],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,12697,11275],{}," (or similar) and a higher ",[99,12700,12694],{},[212,12702,12704],{"className":11133,"code":12703,"language":11135,"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,12705,12706,12721,12726,12744,12749,12768],{"__ignoreMap":178},[220,12707,12708,12710,12712,12714,12716,12719],{"class":222,"line":223},[220,12709,343],{"class":264},[220,12711,8817],{"class":346},[220,12713,350],{"class":226},[220,12715,353],{"class":264},[220,12717,12718],{"class":230},"\"relative\"",[220,12720,359],{"class":264},[220,12722,12723],{"class":222,"line":179},[220,12724,12725],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,12727,12728,12730,12732,12734,12736,12738,12740,12742],{"class":222,"line":389},[220,12729,364],{"class":264},[220,12731,11144],{"class":346},[220,12733,350],{"class":226},[220,12735,353],{"class":264},[220,12737,11670],{"class":230},[220,12739,11161],{"class":264},[220,12741,11144],{"class":346},[220,12743,359],{"class":264},[220,12745,12746],{"class":222,"line":399},[220,12747,12748],{"class":609}," \u003C!-- content above canvas -->\n",[220,12750,12751,12753,12755,12757,12759,12761,12764,12766],{"class":222,"line":644},[220,12752,364],{"class":264},[220,12754,8817],{"class":346},[220,12756,350],{"class":226},[220,12758,353],{"class":264},[220,12760,10899],{"class":230},[220,12762,12763],{"class":264},">I appear above the canvas\u003C\u002F",[220,12765,8817],{"class":346},[220,12767,359],{"class":264},[220,12769,12770,12772,12774],{"class":222,"line":650},[220,12771,402],{"class":264},[220,12773,8817],{"class":346},[220,12775,359],{"class":264},[23,12777,12779],{"id":12778},"responsive-sizing","Responsive sizing",[15,12781,12782],{},"Shaders responds to any CSS-based resize:",[246,12784,12785,12906,12941,12976],{":tabs":248},[212,12786,12788],{"className":334,"code":12787,"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,12789,12790,12795,12810,12818,12826,12830,12835,12850,12858,12866,12870,12875,12890,12898],{"__ignoreMap":178},[220,12791,12792],{"class":222,"line":223},[220,12793,12794],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,12796,12797,12799,12801,12803,12805,12808],{"class":222,"line":179},[220,12798,343],{"class":264},[220,12800,347],{"class":346},[220,12802,350],{"class":226},[220,12804,353],{"class":264},[220,12806,12807],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,12809,359],{"class":264},[220,12811,12812,12814,12816],{"class":222,"line":389},[220,12813,364],{"class":264},[220,12815,367],{"class":346},[220,12817,386],{"class":264},[220,12819,12820,12822,12824],{"class":222,"line":399},[220,12821,402],{"class":264},[220,12823,347],{"class":346},[220,12825,359],{"class":264},[220,12827,12828],{"class":222,"line":644},[220,12829,647],{"emptyLinePlaceholder":194},[220,12831,12832],{"class":222,"line":650},[220,12833,12834],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,12836,12837,12839,12841,12843,12845,12848],{"class":222,"line":656},[220,12838,343],{"class":264},[220,12840,347],{"class":346},[220,12842,350],{"class":226},[220,12844,353],{"class":264},[220,12846,12847],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,12849,359],{"class":264},[220,12851,12852,12854,12856],{"class":222,"line":673},[220,12853,364],{"class":264},[220,12855,12258],{"class":346},[220,12857,386],{"class":264},[220,12859,12860,12862,12864],{"class":222,"line":682},[220,12861,402],{"class":264},[220,12863,347],{"class":346},[220,12865,359],{"class":264},[220,12867,12868],{"class":222,"line":691},[220,12869,647],{"emptyLinePlaceholder":194},[220,12871,12872],{"class":222,"line":696},[220,12873,12874],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,12876,12877,12879,12881,12883,12885,12888],{"class":222,"line":702},[220,12878,343],{"class":264},[220,12880,347],{"class":346},[220,12882,350],{"class":226},[220,12884,353],{"class":264},[220,12886,12887],{"class":230},"\"w-full h-[100dvh]\"",[220,12889,359],{"class":264},[220,12891,12892,12894,12896],{"class":222,"line":718},[220,12893,364],{"class":264},[220,12895,10871],{"class":346},[220,12897,386],{"class":264},[220,12899,12900,12902,12904],{"class":222,"line":727},[220,12901,402],{"class":264},[220,12903,347],{"class":346},[220,12905,359],{"class":264},[212,12907,12909],{"className":409,"code":12908,"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,12910,12911,12925,12933],{"__ignoreMap":178},[220,12912,12913,12915,12917,12919,12921,12923],{"class":222,"line":223},[220,12914,343],{"class":264},[220,12916,347],{"class":420},[220,12918,423],{"class":226},[220,12920,353],{"class":260},[220,12922,12807],{"class":230},[220,12924,359],{"class":264},[220,12926,12927,12929,12931],{"class":222,"line":179},[220,12928,364],{"class":264},[220,12930,367],{"class":420},[220,12932,386],{"class":264},[220,12934,12935,12937,12939],{"class":222,"line":389},[220,12936,402],{"class":264},[220,12938,347],{"class":420},[220,12940,359],{"class":264},[212,12942,12944],{"className":468,"code":12943,"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,12945,12946,12960,12968],{"__ignoreMap":178},[220,12947,12948,12950,12952,12954,12956,12958],{"class":222,"line":223},[220,12949,343],{"class":264},[220,12951,347],{"class":420},[220,12953,350],{"class":226},[220,12955,353],{"class":260},[220,12957,12807],{"class":230},[220,12959,359],{"class":264},[220,12961,12962,12964,12966],{"class":222,"line":179},[220,12963,364],{"class":264},[220,12965,367],{"class":420},[220,12967,386],{"class":264},[220,12969,12970,12972,12974],{"class":222,"line":389},[220,12971,402],{"class":264},[220,12973,347],{"class":420},[220,12975,359],{"class":264},[212,12977,12978],{"className":468,"code":12943,"language":469,"meta":178,"style":178},[99,12979,12980,12994,13002],{"__ignoreMap":178},[220,12981,12982,12984,12986,12988,12990,12992],{"class":222,"line":223},[220,12983,343],{"class":264},[220,12985,347],{"class":420},[220,12987,350],{"class":226},[220,12989,353],{"class":260},[220,12991,12807],{"class":230},[220,12993,359],{"class":264},[220,12995,12996,12998,13000],{"class":222,"line":179},[220,12997,364],{"class":264},[220,12999,367],{"class":420},[220,13001,386],{"class":264},[220,13003,13004,13006,13008],{"class":222,"line":389},[220,13005,402],{"class":264},[220,13007,347],{"class":420},[220,13009,359],{"class":264},[23,13011,13013],{"id":13012},"other-css-properties","Other CSS properties",[15,13015,13016],{},"The canvas element is fully styleable with standard CSS:",[246,13018,13019,13140,13175,13210],{":tabs":248},[212,13020,13022],{"className":334,"code":13021,"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,13023,13024,13029,13044,13052,13060,13064,13069,13084,13092,13100,13104,13109,13124,13132],{"__ignoreMap":178},[220,13025,13026],{"class":222,"line":223},[220,13027,13028],{"class":609},"\u003C!-- Rounded with border -->\n",[220,13030,13031,13033,13035,13037,13039,13042],{"class":222,"line":179},[220,13032,343],{"class":264},[220,13034,347],{"class":346},[220,13036,350],{"class":226},[220,13038,353],{"class":264},[220,13040,13041],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,13043,359],{"class":264},[220,13045,13046,13048,13050],{"class":222,"line":389},[220,13047,364],{"class":264},[220,13049,367],{"class":346},[220,13051,386],{"class":264},[220,13053,13054,13056,13058],{"class":222,"line":399},[220,13055,402],{"class":264},[220,13057,347],{"class":346},[220,13059,359],{"class":264},[220,13061,13062],{"class":222,"line":644},[220,13063,647],{"emptyLinePlaceholder":194},[220,13065,13066],{"class":222,"line":650},[220,13067,13068],{"class":609},"\u003C!-- Drop shadow -->\n",[220,13070,13071,13073,13075,13077,13079,13082],{"class":222,"line":656},[220,13072,343],{"class":264},[220,13074,347],{"class":346},[220,13076,350],{"class":226},[220,13078,353],{"class":264},[220,13080,13081],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,13083,359],{"class":264},[220,13085,13086,13088,13090],{"class":222,"line":673},[220,13087,364],{"class":264},[220,13089,11324],{"class":346},[220,13091,386],{"class":264},[220,13093,13094,13096,13098],{"class":222,"line":682},[220,13095,402],{"class":264},[220,13097,347],{"class":346},[220,13099,359],{"class":264},[220,13101,13102],{"class":222,"line":691},[220,13103,647],{"emptyLinePlaceholder":194},[220,13105,13106],{"class":222,"line":696},[220,13107,13108],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,13110,13111,13113,13115,13117,13119,13122],{"class":222,"line":702},[220,13112,343],{"class":264},[220,13114,347],{"class":346},[220,13116,350],{"class":226},[220,13118,353],{"class":264},[220,13120,13121],{"class":230},"\"blur-sm w-full h-32\"",[220,13123,359],{"class":264},[220,13125,13126,13128,13130],{"class":222,"line":718},[220,13127,364],{"class":264},[220,13129,367],{"class":346},[220,13131,386],{"class":264},[220,13133,13134,13136,13138],{"class":222,"line":727},[220,13135,402],{"class":264},[220,13137,347],{"class":346},[220,13139,359],{"class":264},[212,13141,13143],{"className":409,"code":13142,"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,13144,13145,13159,13167],{"__ignoreMap":178},[220,13146,13147,13149,13151,13153,13155,13157],{"class":222,"line":223},[220,13148,343],{"class":264},[220,13150,347],{"class":420},[220,13152,423],{"class":226},[220,13154,353],{"class":260},[220,13156,13041],{"class":230},[220,13158,359],{"class":264},[220,13160,13161,13163,13165],{"class":222,"line":179},[220,13162,364],{"class":264},[220,13164,367],{"class":420},[220,13166,386],{"class":264},[220,13168,13169,13171,13173],{"class":222,"line":389},[220,13170,402],{"class":264},[220,13172,347],{"class":420},[220,13174,359],{"class":264},[212,13176,13178],{"className":468,"code":13177,"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,13179,13180,13194,13202],{"__ignoreMap":178},[220,13181,13182,13184,13186,13188,13190,13192],{"class":222,"line":223},[220,13183,343],{"class":264},[220,13185,347],{"class":420},[220,13187,350],{"class":226},[220,13189,353],{"class":260},[220,13191,13041],{"class":230},[220,13193,359],{"class":264},[220,13195,13196,13198,13200],{"class":222,"line":179},[220,13197,364],{"class":264},[220,13199,367],{"class":420},[220,13201,386],{"class":264},[220,13203,13204,13206,13208],{"class":222,"line":389},[220,13205,402],{"class":264},[220,13207,347],{"class":420},[220,13209,359],{"class":264},[212,13211,13212],{"className":468,"code":13177,"language":469,"meta":178,"style":178},[99,13213,13214,13228,13236],{"__ignoreMap":178},[220,13215,13216,13218,13220,13222,13224,13226],{"class":222,"line":223},[220,13217,343],{"class":264},[220,13219,347],{"class":420},[220,13221,350],{"class":226},[220,13223,353],{"class":260},[220,13225,13041],{"class":230},[220,13227,359],{"class":264},[220,13229,13230,13232,13234],{"class":222,"line":179},[220,13231,364],{"class":264},[220,13233,367],{"class":420},[220,13235,386],{"class":264},[220,13237,13238,13240,13242],{"class":222,"line":389},[220,13239,402],{"class":264},[220,13241,347],{"class":420},[220,13243,359],{"class":264},[1504,13245,13246],{},"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":13248},[13249,13250,13251,13257,13261,13262],{"id":10510,"depth":179,"text":10511},{"id":593,"depth":179,"text":594},{"id":10829,"depth":179,"text":10830,"children":13252},[13253,13254,13255,13256],{"id":10833,"depth":389,"text":10834},{"id":11268,"depth":389,"text":11269},{"id":11631,"depth":389,"text":11632},{"id":12199,"depth":389,"text":12200},{"id":12520,"depth":179,"text":12521,"children":13258},[13259,13260],{"id":12524,"depth":389,"text":12525},{"id":12688,"depth":389,"text":12689},{"id":12778,"depth":179,"text":12779},{"id":13012,"depth":179,"text":13013},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":13263},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":13270,"title":13271,"body":13272,"category":8480,"description":15550,"exclude":190,"extension":191,"forceFramework":190,"icon":15551,"meta":15552,"navigation":194,"path":15553,"seo":15554,"stem":15555,"__hash__":15556},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":13273,"toc":15539},[13274,13278,13285,13292,13398,13405,13431,13598,13620,13626,13637,13640,13706,13821,13824,13875,13877,13895,13903,13930,13987,13990,14060,14076,14079,14084,14137,14141,14148,14179,14182,14186,14744,14748,14753,15528,15536],[11,13275,13277],{"id":13276},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,13279,13280,13281,13284],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,13282,13283],{},"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,13286,13287,13288,13291],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,13289,13290],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,13293,13295],{"className":334,"code":13294,"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,13296,13297,13302,13322,13326,13331,13339,13353,13358,13363,13368,13373,13378,13383,13390],{"__ignoreMap":178},[220,13298,13299],{"class":222,"line":223},[220,13300,13301],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,13303,13304,13306,13308,13310,13312,13315,13318,13320],{"class":222,"line":179},[220,13305,343],{"class":264},[220,13307,347],{"class":346},[220,13309,350],{"class":226},[220,13311,353],{"class":264},[220,13313,13314],{"class":230},"\"-translate-x-4\"",[220,13316,13317],{"class":264},">...\u003C\u002F",[220,13319,347],{"class":346},[220,13321,359],{"class":264},[220,13323,13324],{"class":222,"line":389},[220,13325,647],{"emptyLinePlaceholder":194},[220,13327,13328],{"class":222,"line":399},[220,13329,13330],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,13332,13333,13335,13337],{"class":222,"line":644},[220,13334,343],{"class":264},[220,13336,347],{"class":346},[220,13338,359],{"class":264},[220,13340,13341,13343,13345,13348,13350],{"class":222,"line":650},[220,13342,364],{"class":264},[220,13344,367],{"class":346},[220,13346,13347],{"class":226}," :bounding-box",[220,13349,353],{"class":264},[220,13351,13352],{"class":230},"\"{\n",[220,13354,13355],{"class":222,"line":656},[220,13356,13357],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,13359,13360],{"class":222,"line":673},[220,13361,13362],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,13364,13365],{"class":222,"line":682},[220,13366,13367],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,13369,13370],{"class":222,"line":691},[220,13371,13372],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,13374,13375],{"class":222,"line":696},[220,13376,13377],{"class":230}," origin: 'top-left',\n",[220,13379,13380],{"class":222,"line":702},[220,13381,13382],{"class":230}," rotation: 0\n",[220,13384,13385,13388],{"class":222,"line":718},[220,13386,13387],{"class":230}," }\"",[220,13389,386],{"class":264},[220,13391,13392,13394,13396],{"class":222,"line":727},[220,13393,402],{"class":264},[220,13395,347],{"class":346},[220,13397,359],{"class":264},[23,13399,1839,13401,13404],{"id":13400},"the-boundingbox-prop",[99,13402,13403],{},"boundingBox"," prop",[15,13406,13407,13408,13410,13411,1895,13414,1895,13417,1895,13420,13423,13424,13427,13428,13430],{},"Every renderable component accepts a ",[99,13409,13403],{}," object. It has four required dimensions — ",[99,13412,13413],{},"x",[99,13415,13416],{},"y",[99,13418,13419],{},"width",[99,13421,13422],{},"height"," — plus an optional ",[99,13425,13426],{},"origin",", a ",[99,13429,10087],{},", and a couple of refinements.",[1794,13432,13433,13448],{},[1797,13434,13435],{},[1800,13436,13437,13440,13443,13446],{},[1803,13438,13439],{},"Field",[1803,13441,13442],{},"Type",[1803,13444,13445],{},"Default",[1803,13447,1808],{},[1810,13449,13450,13470,13487,13502,13517,13545,13563,13579],{},[1800,13451,13452,13456,13461,13464],{},[1815,13453,13454],{},[99,13455,13413],{},[1815,13457,13458],{},[99,13459,13460],{},"{ value, unit }",[1815,13462,13463],{},"—",[1815,13465,13466,13467,13469],{},"Horizontal position of the box's anchor corner, measured in the ",[99,13468,13426],{}," frame",[1800,13471,13472,13476,13480,13482],{},[1815,13473,13474],{},[99,13475,13416],{},[1815,13477,13478],{},[99,13479,13460],{},[1815,13481,13463],{},[1815,13483,13484,13485,13469],{},"Vertical position of the box's anchor corner, measured in the ",[99,13486,13426],{},[1800,13488,13489,13493,13497,13499],{},[1815,13490,13491],{},[99,13492,13419],{},[1815,13494,13495],{},[99,13496,13460],{},[1815,13498,13463],{},[1815,13500,13501],{},"Box width",[1800,13503,13504,13508,13512,13514],{},[1815,13505,13506],{},[99,13507,13422],{},[1815,13509,13510],{},[99,13511,13460],{},[1815,13513,13463],{},[1815,13515,13516],{},"Box height",[1800,13518,13519,13523,13527,13532],{},[1815,13520,13521],{},[99,13522,13426],{},[1815,13524,13525],{},[99,13526,7306],{},[1815,13528,13529],{},[99,13530,13531],{},"'top-left'",[1815,13533,13534,13535,13537,13538,13540,13541],{},"Which reference point ",[99,13536,13413],{}," \u002F ",[99,13539,13416],{}," are measured from — see ",[56,13542,13544],{"href":13543},"#origin","Origin",[1800,13546,13547,13551,13556,13560],{},[1815,13548,13549],{},[99,13550,10087],{},[1815,13552,13553],{},[99,13554,13555],{},"number",[1815,13557,13558],{},[99,13559,6919],{},[1815,13561,13562],{},"Rotation in degrees, around the box's geometric center",[1800,13564,13565,13570,13574,13576],{},[1815,13566,13567],{},[99,13568,13569],{},"cornerRadius",[1815,13571,13572],{},[99,13573,13460],{},[1815,13575,13463],{},[1815,13577,13578],{},"Rounds the corners of the clipped region (filter layers only)",[1800,13580,13581,13586,13591,13595],{},[1815,13582,13583],{},[99,13584,13585],{},"lockAspect",[1815,13587,13588],{},[99,13589,13590],{},"boolean",[1815,13592,13593],{},[99,13594,2629],{},[1815,13596,13597],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,13599,13600,13601,1895,13603,1895,13605,1895,13607,13609,13610,13612,13613,13616,13617,13619],{},"Each of ",[99,13602,13413],{},[99,13604,13416],{},[99,13606,13419],{},[99,13608,13422],{}," (and ",[99,13611,13569],{},") is a ",[159,13614,13615],{},"dimensional value"," — a ",[99,13618,13460],{}," pair, so you can mix relative and absolute units on the same layer.",[15,13621,13622,13623,13625],{},"When no ",[99,13624,13403],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,13627,13629,13630,13633,13634],{"id":13628},"units-uv-vs-px","Units: ",[99,13631,13632],{},"uv"," (%) vs ",[99,13635,13636],{},"px",[15,13638,13639],{},"Each dimension carries its own unit:",[1794,13641,13642,13652],{},[1797,13643,13644],{},[1800,13645,13646,13649],{},[1803,13647,13648],{},"Unit",[1803,13650,13651],{},"Meaning",[1810,13653,13654,13694],{},[1800,13655,13656,13660],{},[1815,13657,13658],{},[99,13659,13632],{},[1815,13661,13662,13663,1895,13666,13668,13669,13671,13672,13674,13675,13677,13678,13674,13680,13682,13683,13685,13686,13689,13690,13693],{},"A ",[159,13664,13665],{},"fraction of the canvas",[99,13667,6919],{},"–",[99,13670,6923],{},". ",[99,13673,13413],{},"\u002F",[99,13676,13419],{}," are fractions of the canvas width; ",[99,13679,13416],{},[99,13681,13422],{}," of the canvas height. ",[99,13684,6000],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,13687,13688],{},"percentage"," (",[99,13691,13692],{},"50%",").",[1800,13695,13696,13700],{},[1815,13697,13698],{},[99,13699,13636],{},[1815,13701,13702,13705],{},[159,13703,13704],{},"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,13707,13709],{"className":334,"code":13708,"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,13710,13711,13716,13729,13734,13739,13744,13749,13754,13759,13766,13770,13775,13787,13792,13797,13802,13807,13811,13815],{"__ignoreMap":178},[220,13712,13713],{"class":222,"line":223},[220,13714,13715],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,13717,13718,13720,13723,13725,13727],{"class":222,"line":179},[220,13719,343],{"class":264},[220,13721,13722],{"class":346},"Glass",[220,13724,13347],{"class":226},[220,13726,353],{"class":264},[220,13728,13352],{"class":230},[220,13730,13731],{"class":222,"line":389},[220,13732,13733],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,13735,13736],{"class":222,"line":399},[220,13737,13738],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,13740,13741],{"class":222,"line":644},[220,13742,13743],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,13745,13746],{"class":222,"line":650},[220,13747,13748],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,13750,13751],{"class":222,"line":656},[220,13752,13753],{"class":230}," origin: 'top-left',\n",[220,13755,13756],{"class":222,"line":673},[220,13757,13758],{"class":230}," rotation: 0\n",[220,13760,13761,13764],{"class":222,"line":682},[220,13762,13763],{"class":230},"}\"",[220,13765,386],{"class":264},[220,13767,13768],{"class":222,"line":691},[220,13769,647],{"emptyLinePlaceholder":194},[220,13771,13772],{"class":222,"line":696},[220,13773,13774],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,13776,13777,13779,13781,13783,13785],{"class":222,"line":702},[220,13778,343],{"class":264},[220,13780,13722],{"class":346},[220,13782,13347],{"class":226},[220,13784,353],{"class":264},[220,13786,13352],{"class":230},[220,13788,13789],{"class":222,"line":718},[220,13790,13791],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,13793,13794],{"class":222,"line":727},[220,13795,13796],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,13798,13799],{"class":222,"line":2664},[220,13800,13801],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,13803,13804],{"class":222,"line":7900},[220,13805,13806],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,13808,13809],{"class":222,"line":7910},[220,13810,13753],{"class":230},[220,13812,13813],{"class":222,"line":7921},[220,13814,13758],{"class":230},[220,13816,13817,13819],{"class":222,"line":7926},[220,13818,13763],{"class":230},[220,13820,386],{"class":264},[15,13822,13823],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,13825,13827],{"className":334,"code":13826,"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,13828,13829,13841,13846,13851,13856,13861,13865,13869],{"__ignoreMap":178},[220,13830,13831,13833,13835,13837,13839],{"class":222,"line":223},[220,13832,343],{"class":264},[220,13834,367],{"class":346},[220,13836,13347],{"class":226},[220,13838,353],{"class":264},[220,13840,13352],{"class":230},[220,13842,13843],{"class":222,"line":179},[220,13844,13845],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,13847,13848],{"class":222,"line":389},[220,13849,13850],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,13852,13853],{"class":222,"line":399},[220,13854,13855],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,13857,13858],{"class":222,"line":644},[220,13859,13860],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,13862,13863],{"class":222,"line":650},[220,13864,13753],{"class":230},[220,13866,13867],{"class":222,"line":656},[220,13868,13758],{"class":230},[220,13870,13871,13873],{"class":222,"line":673},[220,13872,13763],{"class":230},[220,13874,386],{"class":264},[23,13876,13544],{"id":13426},[15,13878,1839,13879,13881,13882,13885,13886,1864,13888,13890,13891,13894],{},[99,13880,13426],{}," is the ",[159,13883,13884],{},"reference point"," that ",[99,13887,13413],{},[99,13889,13416],{}," are measured from — the box's anchor corner ",[1847,13892,13893],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,13896,13901],{"className":13897,"code":13899,"language":13900},[13898],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,13902,13899],{"__ignoreMap":178},[15,13904,13905,13906,13909,13910,13913,13914,13916,13917,1895,13920,13923,13924,13926,13927,13929],{},"The two axes are independent. The horizontal part picks the X reference (",[99,13907,13908],{},"left"," → from the left edge, ",[99,13911,13912],{},"right"," → from the right edge, ",[99,13915,6487],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,13918,13919],{},"top",[99,13921,13922],{},"bottom",", or ",[99,13925,6487],{},"). The bare value ",[99,13928,6487],{}," centers both axes.",[34,13931,13932,13942,13958,13973],{},[37,13933,13934,13936,13937,13674,13939,13941],{},[99,13935,13531],{}," (default) — ",[99,13938,13413],{},[99,13940,13416],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,13943,13944,13947,13948,13950,13951,13954,13955,13957],{},[99,13945,13946],{},"'top-right'"," — ",[99,13949,13413],{}," is measured ",[1847,13952,13953],{},"leftward"," from the right edge; ",[99,13956,13416],{}," downward from the top.",[37,13959,13960,13947,13963,13965,13966,13968,13969,13972],{},[99,13961,13962],{},"'bottom-right'",[99,13964,13413],{}," leftward from the right, ",[99,13967,13416],{}," ",[1847,13970,13971],{},"upward"," from the bottom.",[37,13974,13975,13947,13978,13674,13980,13982,13983,13986],{},[99,13976,13977],{},"'center'",[99,13979,13413],{},[99,13981,13416],{}," are signed offsets from the canvas center (",[99,13984,13985],{},"0, 0"," centers the box).",[15,13988,13989],{},"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,13991,13993],{"className":334,"code":13992,"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,13994,13995,14002,14012,14021,14026,14031,14036,14041,14046,14050,14055],{"__ignoreMap":178},[220,13996,13997,13999],{"class":222,"line":223},[220,13998,343],{"class":264},[220,14000,14001],{"class":346},"ImageTexture\n",[220,14003,14004,14007,14009],{"class":222,"line":179},[220,14005,14006],{"class":226}," url",[220,14008,353],{"class":264},[220,14010,14011],{"class":230},"\"\u002Fbadge.svg\"\n",[220,14013,14014,14017,14019],{"class":222,"line":389},[220,14015,14016],{"class":226}," :bounding-box",[220,14018,353],{"class":264},[220,14020,13352],{"class":230},[220,14022,14023],{"class":222,"line":399},[220,14024,14025],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,14027,14028],{"class":222,"line":644},[220,14029,14030],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,14032,14033],{"class":222,"line":650},[220,14034,14035],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,14037,14038],{"class":222,"line":656},[220,14039,14040],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,14042,14043],{"class":222,"line":673},[220,14044,14045],{"class":230}," origin: 'top-right',\n",[220,14047,14048],{"class":222,"line":682},[220,14049,13382],{"class":230},[220,14051,14052],{"class":222,"line":691},[220,14053,14054],{"class":230}," }\"\n",[220,14056,14057],{"class":222,"line":696},[220,14058,14059],{"class":264},"\u002F>\n",[14061,14062,14063],"blockquote",{},[15,14064,14065,13968,14068,14070,14071,13674,14073,14075],{},[159,14066,14067],{},"Origin vs. rotation pivot:",[99,14069,13426],{}," only controls where ",[99,14072,13413],{},[99,14074,13416],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,14077,14078],{"id":10087},"Rotation",[15,14080,14081,14083],{},[99,14082,10087],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,14085,14087],{"className":334,"code":14086,"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,14088,14089,14102,14107,14112,14117,14122,14126,14131],{"__ignoreMap":178},[220,14090,14091,14093,14096,14098,14100],{"class":222,"line":223},[220,14092,343],{"class":264},[220,14094,14095],{"class":346},"Stripes",[220,14097,13347],{"class":226},[220,14099,353],{"class":264},[220,14101,13352],{"class":230},[220,14103,14104],{"class":222,"line":179},[220,14105,14106],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,14108,14109],{"class":222,"line":389},[220,14110,14111],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,14113,14114],{"class":222,"line":399},[220,14115,14116],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,14118,14119],{"class":222,"line":644},[220,14120,14121],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,14123,14124],{"class":222,"line":650},[220,14125,13753],{"class":230},[220,14127,14128],{"class":222,"line":656},[220,14129,14130],{"class":230}," rotation: 30\n",[220,14132,14133,14135],{"class":222,"line":673},[220,14134,13763],{"class":230},[220,14136,386],{"class":264},[23,14138,14140],{"id":14139},"how-different-layers-fill-the-box","How different layers fill the box",[15,14142,14143,14144,14147],{},"The box means \"draw this layer here,\" but exactly ",[1847,14145,14146],{},"how"," a layer fills its box depends on the kind of layer:",[34,14149,14150,14160,14166],{},[37,14151,14152,14155,14156,14159],{},[159,14153,14154],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,14157,14158],{},"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,14161,14162,14165],{},[159,14163,14164],{},"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,14167,14168,14171,14172,14175,14176,14178],{},[159,14169,14170],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,14173,14174],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,14177,13569],{}," applies, rounding the clipped region.",[15,14180,14181],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,14183,14185],{"id":14184},"basic-usage-across-frameworks","Basic usage across frameworks",[246,14187,14188,14262,14387,14498,14608],{":tabs":1557},[212,14189,14191],{"className":334,"code":14190,"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,14192,14193,14207,14219,14224,14229,14234,14239,14243,14248,14254],{"__ignoreMap":178},[220,14194,14195,14197,14199,14201,14203,14205],{"class":222,"line":223},[220,14196,343],{"class":264},[220,14198,347],{"class":346},[220,14200,350],{"class":226},[220,14202,353],{"class":264},[220,14204,356],{"class":230},[220,14206,359],{"class":264},[220,14208,14209,14211,14213,14215,14217],{"class":222,"line":179},[220,14210,364],{"class":264},[220,14212,367],{"class":346},[220,14214,13347],{"class":226},[220,14216,353],{"class":264},[220,14218,13352],{"class":230},[220,14220,14221],{"class":222,"line":389},[220,14222,14223],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,14225,14226],{"class":222,"line":399},[220,14227,14228],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,14230,14231],{"class":222,"line":644},[220,14232,14233],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,14235,14236],{"class":222,"line":650},[220,14237,14238],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,14240,14241],{"class":222,"line":656},[220,14242,13377],{"class":230},[220,14244,14245],{"class":222,"line":673},[220,14246,14247],{"class":230}," rotation: 15\n",[220,14249,14250,14252],{"class":222,"line":682},[220,14251,13387],{"class":230},[220,14253,386],{"class":264},[220,14255,14256,14258,14260],{"class":222,"line":691},[220,14257,402],{"class":264},[220,14259,347],{"class":346},[220,14261,359],{"class":264},[212,14263,14265],{"className":409,"code":14264,"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,14266,14267,14281,14287,14297,14314,14327,14340,14353,14362,14370,14375,14379],{"__ignoreMap":178},[220,14268,14269,14271,14273,14275,14277,14279],{"class":222,"line":223},[220,14270,343],{"class":264},[220,14272,347],{"class":420},[220,14274,423],{"class":226},[220,14276,353],{"class":260},[220,14278,356],{"class":230},[220,14280,359],{"class":264},[220,14282,14283,14285],{"class":222,"line":179},[220,14284,364],{"class":264},[220,14286,1189],{"class":420},[220,14288,14289,14292,14294],{"class":222,"line":389},[220,14290,14291],{"class":226}," boundingBox",[220,14293,353],{"class":260},[220,14295,14296],{"class":264},"{{\n",[220,14298,14299,14302,14305,14308,14311],{"class":222,"line":399},[220,14300,14301],{"class":264}," x: { unit: ",[220,14303,14304],{"class":230},"'uv'",[220,14306,14307],{"class":264},", value: ",[220,14309,14310],{"class":420},"0.1",[220,14312,14313],{"class":264}," },\n",[220,14315,14316,14319,14321,14323,14325],{"class":222,"line":644},[220,14317,14318],{"class":264}," y: { unit: ",[220,14320,14304],{"class":230},[220,14322,14307],{"class":264},[220,14324,14310],{"class":420},[220,14326,14313],{"class":264},[220,14328,14329,14332,14334,14336,14338],{"class":222,"line":650},[220,14330,14331],{"class":264}," width: { unit: ",[220,14333,14304],{"class":230},[220,14335,14307],{"class":264},[220,14337,4545],{"class":420},[220,14339,14313],{"class":264},[220,14341,14342,14345,14347,14349,14351],{"class":222,"line":656},[220,14343,14344],{"class":264}," height: { unit: ",[220,14346,14304],{"class":230},[220,14348,14307],{"class":264},[220,14350,4545],{"class":420},[220,14352,14313],{"class":264},[220,14354,14355,14358,14360],{"class":222,"line":673},[220,14356,14357],{"class":264}," origin: ",[220,14359,13531],{"class":230},[220,14361,1760],{"class":264},[220,14363,14364,14367],{"class":222,"line":682},[220,14365,14366],{"class":264}," rotation: ",[220,14368,14369],{"class":420},"15\n",[220,14371,14372],{"class":222,"line":691},[220,14373,14374],{"class":264}," }}\n",[220,14376,14377],{"class":222,"line":696},[220,14378,1234],{"class":264},[220,14380,14381,14383,14385],{"class":222,"line":702},[220,14382,402],{"class":264},[220,14384,347],{"class":420},[220,14386,359],{"class":264},[212,14388,14390],{"className":468,"code":14389,"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,14391,14392,14406,14412,14420,14432,14444,14456,14468,14476,14482,14486,14490],{"__ignoreMap":178},[220,14393,14394,14396,14398,14400,14402,14404],{"class":222,"line":223},[220,14395,343],{"class":264},[220,14397,347],{"class":420},[220,14399,350],{"class":226},[220,14401,353],{"class":260},[220,14403,356],{"class":230},[220,14405,359],{"class":264},[220,14407,14408,14410],{"class":222,"line":179},[220,14409,364],{"class":264},[220,14411,1189],{"class":420},[220,14413,14414,14416,14418],{"class":222,"line":389},[220,14415,14291],{"class":226},[220,14417,353],{"class":260},[220,14419,14296],{"class":264},[220,14421,14422,14424,14426,14428,14430],{"class":222,"line":399},[220,14423,14301],{"class":264},[220,14425,14304],{"class":230},[220,14427,14307],{"class":264},[220,14429,14310],{"class":420},[220,14431,14313],{"class":264},[220,14433,14434,14436,14438,14440,14442],{"class":222,"line":644},[220,14435,14318],{"class":264},[220,14437,14304],{"class":230},[220,14439,14307],{"class":264},[220,14441,14310],{"class":420},[220,14443,14313],{"class":264},[220,14445,14446,14448,14450,14452,14454],{"class":222,"line":650},[220,14447,14331],{"class":264},[220,14449,14304],{"class":230},[220,14451,14307],{"class":264},[220,14453,4545],{"class":420},[220,14455,14313],{"class":264},[220,14457,14458,14460,14462,14464,14466],{"class":222,"line":656},[220,14459,14344],{"class":264},[220,14461,14304],{"class":230},[220,14463,14307],{"class":264},[220,14465,4545],{"class":420},[220,14467,14313],{"class":264},[220,14469,14470,14472,14474],{"class":222,"line":673},[220,14471,14357],{"class":264},[220,14473,13531],{"class":230},[220,14475,1760],{"class":264},[220,14477,14478,14480],{"class":222,"line":682},[220,14479,14366],{"class":264},[220,14481,14369],{"class":420},[220,14483,14484],{"class":222,"line":691},[220,14485,14374],{"class":264},[220,14487,14488],{"class":222,"line":696},[220,14489,1234],{"class":264},[220,14491,14492,14494,14496],{"class":222,"line":702},[220,14493,402],{"class":264},[220,14495,347],{"class":420},[220,14497,359],{"class":264},[212,14499,14500],{"className":468,"code":14389,"language":469,"meta":178,"style":178},[99,14501,14502,14516,14522,14530,14542,14554,14566,14578,14586,14592,14596,14600],{"__ignoreMap":178},[220,14503,14504,14506,14508,14510,14512,14514],{"class":222,"line":223},[220,14505,343],{"class":264},[220,14507,347],{"class":420},[220,14509,350],{"class":226},[220,14511,353],{"class":260},[220,14513,356],{"class":230},[220,14515,359],{"class":264},[220,14517,14518,14520],{"class":222,"line":179},[220,14519,364],{"class":264},[220,14521,1189],{"class":420},[220,14523,14524,14526,14528],{"class":222,"line":389},[220,14525,14291],{"class":226},[220,14527,353],{"class":260},[220,14529,14296],{"class":264},[220,14531,14532,14534,14536,14538,14540],{"class":222,"line":399},[220,14533,14301],{"class":264},[220,14535,14304],{"class":230},[220,14537,14307],{"class":264},[220,14539,14310],{"class":420},[220,14541,14313],{"class":264},[220,14543,14544,14546,14548,14550,14552],{"class":222,"line":644},[220,14545,14318],{"class":264},[220,14547,14304],{"class":230},[220,14549,14307],{"class":264},[220,14551,14310],{"class":420},[220,14553,14313],{"class":264},[220,14555,14556,14558,14560,14562,14564],{"class":222,"line":650},[220,14557,14331],{"class":264},[220,14559,14304],{"class":230},[220,14561,14307],{"class":264},[220,14563,4545],{"class":420},[220,14565,14313],{"class":264},[220,14567,14568,14570,14572,14574,14576],{"class":222,"line":656},[220,14569,14344],{"class":264},[220,14571,14304],{"class":230},[220,14573,14307],{"class":264},[220,14575,4545],{"class":420},[220,14577,14313],{"class":264},[220,14579,14580,14582,14584],{"class":222,"line":673},[220,14581,14357],{"class":264},[220,14583,13531],{"class":230},[220,14585,1760],{"class":264},[220,14587,14588,14590],{"class":222,"line":682},[220,14589,14366],{"class":264},[220,14591,14369],{"class":420},[220,14593,14594],{"class":222,"line":691},[220,14595,14374],{"class":264},[220,14597,14598],{"class":222,"line":696},[220,14599,1234],{"class":264},[220,14601,14602,14604,14606],{"class":222,"line":702},[220,14603,402],{"class":264},[220,14605,347],{"class":420},[220,14607,359],{"class":264},[212,14609,14611],{"className":251,"code":14610,"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,14612,14613,14627,14631,14636,14645,14650,14655,14668,14681,14694,14707,14716,14723,14728,14732,14736,14740],{"__ignoreMap":178},[220,14614,14615,14617,14619,14621,14623,14625],{"class":222,"line":223},[220,14616,1735],{"class":260},[220,14618,1738],{"class":420},[220,14620,1741],{"class":260},[220,14622,1744],{"class":260},[220,14624,1747],{"class":226},[220,14626,1750],{"class":264},[220,14628,14629],{"class":222,"line":179},[220,14630,1765],{"class":264},[220,14632,14633],{"class":222,"line":389},[220,14634,14635],{"class":264}," {\n",[220,14637,14638,14641,14643],{"class":222,"line":399},[220,14639,14640],{"class":264}," type: ",[220,14642,2462],{"class":230},[220,14644,1760],{"class":264},[220,14646,14647],{"class":222,"line":644},[220,14648,14649],{"class":264}," props: {\n",[220,14651,14652],{"class":222,"line":650},[220,14653,14654],{"class":264}," boundingBox: {\n",[220,14656,14657,14660,14662,14664,14666],{"class":222,"line":656},[220,14658,14659],{"class":264}," x: { unit: ",[220,14661,14304],{"class":230},[220,14663,14307],{"class":264},[220,14665,14310],{"class":420},[220,14667,14313],{"class":264},[220,14669,14670,14673,14675,14677,14679],{"class":222,"line":673},[220,14671,14672],{"class":264}," y: { unit: ",[220,14674,14304],{"class":230},[220,14676,14307],{"class":264},[220,14678,14310],{"class":420},[220,14680,14313],{"class":264},[220,14682,14683,14686,14688,14690,14692],{"class":222,"line":682},[220,14684,14685],{"class":264}," width: { unit: ",[220,14687,14304],{"class":230},[220,14689,14307],{"class":264},[220,14691,4545],{"class":420},[220,14693,14313],{"class":264},[220,14695,14696,14699,14701,14703,14705],{"class":222,"line":691},[220,14697,14698],{"class":264}," height: { unit: ",[220,14700,14304],{"class":230},[220,14702,14307],{"class":264},[220,14704,4545],{"class":420},[220,14706,14313],{"class":264},[220,14708,14709,14712,14714],{"class":222,"line":696},[220,14710,14711],{"class":264}," origin: ",[220,14713,13531],{"class":230},[220,14715,1760],{"class":264},[220,14717,14718,14721],{"class":222,"line":702},[220,14719,14720],{"class":264}," rotation: ",[220,14722,14369],{"class":420},[220,14724,14725],{"class":222,"line":718},[220,14726,14727],{"class":264}," }\n",[220,14729,14730],{"class":222,"line":727},[220,14731,3792],{"class":264},[220,14733,14734],{"class":222,"line":2664},[220,14735,3484],{"class":264},[220,14737,14738],{"class":222,"line":7900},[220,14739,1787],{"class":264},[220,14741,14742],{"class":222,"line":7910},[220,14743,1792],{"class":264},[23,14745,14747],{"id":14746},"animating-a-bounding-box","Animating a bounding box",[15,14749,14750,14752],{},[99,14751,13403],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,14754,14756,15011,15315],{":tabs":14755},"[\"Vue\", \"React\", \"JS\"]",[212,14757,14759],{"className":334,"code":14758,"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,14760,14761,14771,14782,14786,14803,14811,14815,14827,14842,14865,14878,14882,14893,14897,14912,14920,14924,14932,14946,14958,14963,14968,14973,14978,14983,14988,14995,15003],{"__ignoreMap":178},[220,14762,14763,14765,14767,14769],{"class":222,"line":223},[220,14764,343],{"class":264},[220,14766,2590],{"class":346},[220,14768,2593],{"class":226},[220,14770,359],{"class":264},[220,14772,14773,14775,14778,14780],{"class":222,"line":179},[220,14774,261],{"class":260},[220,14776,14777],{"class":264}," { ref, onMounted, onUnmounted } ",[220,14779,268],{"class":260},[220,14781,2607],{"class":230},[220,14783,14784],{"class":222,"line":389},[220,14785,647],{"emptyLinePlaceholder":194},[220,14787,14788,14790,14793,14795,14797,14799,14801],{"class":222,"line":399},[220,14789,1735],{"class":260},[220,14791,14792],{"class":420}," rotation",[220,14794,1741],{"class":260},[220,14796,2623],{"class":226},[220,14798,2626],{"class":264},[220,14800,6919],{"class":420},[220,14802,2632],{"class":264},[220,14804,14805,14808],{"class":222,"line":644},[220,14806,14807],{"class":260},"let",[220,14809,14810],{"class":264}," frame\n",[220,14812,14813],{"class":222,"line":650},[220,14814,647],{"emptyLinePlaceholder":194},[220,14816,14817,14820,14823,14825],{"class":222,"line":656},[220,14818,14819],{"class":226},"onMounted",[220,14821,14822],{"class":264},"(() ",[220,14824,2762],{"class":260},[220,14826,3241],{"class":264},[220,14828,14829,14831,14833,14835,14838,14840],{"class":222,"line":673},[220,14830,2705],{"class":260},[220,14832,10211],{"class":226},[220,14834,1741],{"class":260},[220,14836,14837],{"class":264}," () ",[220,14839,2762],{"class":260},[220,14841,3241],{"class":264},[220,14843,14844,14847,14849,14852,14854,14857,14859,14862],{"class":222,"line":682},[220,14845,14846],{"class":264}," rotation.value ",[220,14848,353],{"class":260},[220,14850,14851],{"class":264}," (rotation.value ",[220,14853,9086],{"class":260},[220,14855,14856],{"class":420}," 0.5",[220,14858,10252],{"class":264},[220,14860,14861],{"class":260},"%",[220,14863,14864],{"class":420}," 360\n",[220,14866,14867,14870,14872,14875],{"class":222,"line":691},[220,14868,14869],{"class":264}," frame ",[220,14871,353],{"class":260},[220,14873,14874],{"class":226}," requestAnimationFrame",[220,14876,14877],{"class":264},"(animate)\n",[220,14879,14880],{"class":222,"line":696},[220,14881,3256],{"class":264},[220,14883,14884,14887,14889,14891],{"class":222,"line":702},[220,14885,14886],{"class":264}," frame ",[220,14888,353],{"class":260},[220,14890,14874],{"class":226},[220,14892,14877],{"class":264},[220,14894,14895],{"class":222,"line":718},[220,14896,1792],{"class":264},[220,14898,14899,14902,14904,14906,14909],{"class":222,"line":727},[220,14900,14901],{"class":226},"onUnmounted",[220,14903,14822],{"class":264},[220,14905,2762],{"class":260},[220,14907,14908],{"class":226}," cancelAnimationFrame",[220,14910,14911],{"class":264},"(frame))\n",[220,14913,14914,14916,14918],{"class":222,"line":2664},[220,14915,402],{"class":264},[220,14917,2590],{"class":346},[220,14919,359],{"class":264},[220,14921,14922],{"class":222,"line":7900},[220,14923,647],{"emptyLinePlaceholder":194},[220,14925,14926,14928,14930],{"class":222,"line":7910},[220,14927,343],{"class":264},[220,14929,2519],{"class":346},[220,14931,359],{"class":264},[220,14933,14934,14936,14938,14940,14942,14944],{"class":222,"line":7921},[220,14935,364],{"class":264},[220,14937,347],{"class":346},[220,14939,350],{"class":226},[220,14941,353],{"class":264},[220,14943,356],{"class":230},[220,14945,359],{"class":264},[220,14947,14948,14950,14952,14954,14956],{"class":222,"line":7926},[220,14949,2550],{"class":264},[220,14951,14095],{"class":346},[220,14953,13347],{"class":226},[220,14955,353],{"class":264},[220,14957,13352],{"class":230},[220,14959,14960],{"class":222,"line":9249},[220,14961,14962],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,14964,14965],{"class":222,"line":9254},[220,14966,14967],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,14969,14970],{"class":222,"line":10329},[220,14971,14972],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,14974,14975],{"class":222,"line":10336},[220,14976,14977],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,14979,14980],{"class":222,"line":10341},[220,14981,14982],{"class":230}," origin: 'top-left',\n",[220,14984,14985],{"class":222,"line":10359},[220,14986,14987],{"class":230}," rotation\n",[220,14989,14990,14993],{"class":222,"line":10364},[220,14991,14992],{"class":230}," }\"",[220,14994,386],{"class":264},[220,14996,14997,14999,15001],{"class":222,"line":10373},[220,14998,2567],{"class":264},[220,15000,347],{"class":346},[220,15002,359],{"class":264},[220,15004,15005,15007,15009],{"class":222,"line":10403},[220,15006,402],{"class":264},[220,15008,2519],{"class":346},[220,15010,359],{"class":264},[212,15012,15014],{"className":409,"code":15013,"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,15015,15016,15027,15031,15040,15065,15084,15088,15099,15114,15142,15153,15157,15168,15182,15187,15191,15197,15211,15218,15227,15240,15252,15264,15276,15284,15289,15294,15299,15307,15311],{"__ignoreMap":178},[220,15017,15018,15020,15023,15025],{"class":222,"line":223},[220,15019,261],{"class":260},[220,15021,15022],{"class":264}," { useState, useEffect, useRef } ",[220,15024,268],{"class":260},[220,15026,2687],{"class":230},[220,15028,15029],{"class":222,"line":179},[220,15030,647],{"emptyLinePlaceholder":194},[220,15032,15033,15035,15038],{"class":222,"line":389},[220,15034,2641],{"class":260},[220,15036,15037],{"class":226}," SpinningBox",[220,15039,2647],{"class":264},[220,15041,15042,15044,15046,15048,15050,15053,15055,15057,15059,15061,15063],{"class":222,"line":399},[220,15043,2705],{"class":260},[220,15045,2708],{"class":264},[220,15047,10087],{"class":420},[220,15049,1895],{"class":264},[220,15051,15052],{"class":420},"setRotation",[220,15054,2719],{"class":264},[220,15056,353],{"class":260},[220,15058,2724],{"class":226},[220,15060,2626],{"class":264},[220,15062,6919],{"class":420},[220,15064,2632],{"class":264},[220,15066,15067,15069,15072,15074,15077,15079,15082],{"class":222,"line":644},[220,15068,2705],{"class":260},[220,15070,15071],{"class":420}," frameRef",[220,15073,1741],{"class":260},[220,15075,15076],{"class":226}," useRef",[220,15078,2626],{"class":264},[220,15080,15081],{"class":420},"null",[220,15083,2632],{"class":264},[220,15085,15086],{"class":222,"line":650},[220,15087,647],{"emptyLinePlaceholder":194},[220,15089,15090,15093,15095,15097],{"class":222,"line":656},[220,15091,15092],{"class":226}," useEffect",[220,15094,14822],{"class":264},[220,15096,2762],{"class":260},[220,15098,3241],{"class":264},[220,15100,15101,15104,15106,15108,15110,15112],{"class":222,"line":673},[220,15102,15103],{"class":260}," const",[220,15105,10211],{"class":226},[220,15107,1741],{"class":260},[220,15109,14837],{"class":264},[220,15111,2762],{"class":260},[220,15113,3241],{"class":264},[220,15115,15116,15119,15121,15124,15126,15129,15131,15133,15135,15137,15140],{"class":222,"line":682},[220,15117,15118],{"class":226}," setRotation",[220,15120,2626],{"class":264},[220,15122,15123],{"class":9077},"r",[220,15125,9080],{"class":260},[220,15127,15128],{"class":264}," (r ",[220,15130,9086],{"class":260},[220,15132,14856],{"class":420},[220,15134,10252],{"class":264},[220,15136,14861],{"class":260},[220,15138,15139],{"class":420}," 360",[220,15141,2632],{"class":264},[220,15143,15144,15147,15149,15151],{"class":222,"line":691},[220,15145,15146],{"class":264}," frameRef.current ",[220,15148,353],{"class":260},[220,15150,14874],{"class":226},[220,15152,14877],{"class":264},[220,15154,15155],{"class":222,"line":696},[220,15156,3484],{"class":264},[220,15158,15159,15162,15164,15166],{"class":222,"line":702},[220,15160,15161],{"class":264}," frameRef.current ",[220,15163,353],{"class":260},[220,15165,14874],{"class":226},[220,15167,14877],{"class":264},[220,15169,15170,15173,15175,15177,15179],{"class":222,"line":718},[220,15171,15172],{"class":260}," return",[220,15174,14837],{"class":264},[220,15176,2762],{"class":260},[220,15178,14908],{"class":226},[220,15180,15181],{"class":264},"(frameRef.current)\n",[220,15183,15184],{"class":222,"line":727},[220,15185,15186],{"class":264}," }, [])\n",[220,15188,15189],{"class":222,"line":2664},[220,15190,647],{"emptyLinePlaceholder":194},[220,15192,15193,15195],{"class":222,"line":7900},[220,15194,2739],{"class":260},[220,15196,2742],{"class":264},[220,15198,15199,15201,15203,15205,15207,15209],{"class":222,"line":7910},[220,15200,2550],{"class":264},[220,15202,347],{"class":420},[220,15204,423],{"class":226},[220,15206,353],{"class":260},[220,15208,356],{"class":230},[220,15210,359],{"class":264},[220,15212,15213,15215],{"class":222,"line":7921},[220,15214,2813],{"class":264},[220,15216,15217],{"class":420},"Stripes\n",[220,15219,15220,15223,15225],{"class":222,"line":7926},[220,15221,15222],{"class":226}," boundingBox",[220,15224,353],{"class":260},[220,15226,14296],{"class":264},[220,15228,15229,15231,15233,15235,15238],{"class":222,"line":9249},[220,15230,14659],{"class":264},[220,15232,14304],{"class":230},[220,15234,14307],{"class":264},[220,15236,15237],{"class":420},"0.2",[220,15239,14313],{"class":264},[220,15241,15242,15244,15246,15248,15250],{"class":222,"line":9254},[220,15243,14672],{"class":264},[220,15245,14304],{"class":230},[220,15247,14307],{"class":264},[220,15249,15237],{"class":420},[220,15251,14313],{"class":264},[220,15253,15254,15256,15258,15260,15262],{"class":222,"line":10329},[220,15255,14685],{"class":264},[220,15257,14304],{"class":230},[220,15259,14307],{"class":264},[220,15261,6482],{"class":420},[220,15263,14313],{"class":264},[220,15265,15266,15268,15270,15272,15274],{"class":222,"line":10336},[220,15267,14698],{"class":264},[220,15269,14304],{"class":230},[220,15271,14307],{"class":264},[220,15273,6482],{"class":420},[220,15275,14313],{"class":264},[220,15277,15278,15280,15282],{"class":222,"line":10341},[220,15279,14711],{"class":264},[220,15281,13531],{"class":230},[220,15283,1760],{"class":264},[220,15285,15286],{"class":222,"line":10359},[220,15287,15288],{"class":264}," rotation\n",[220,15290,15291],{"class":222,"line":10364},[220,15292,15293],{"class":264}," }}\n",[220,15295,15296],{"class":222,"line":10373},[220,15297,15298],{"class":264}," \u002F>\n",[220,15300,15301,15303,15305],{"class":222,"line":10403},[220,15302,2828],{"class":264},[220,15304,347],{"class":420},[220,15306,359],{"class":264},[220,15308,15309],{"class":222,"line":10418},[220,15310,2837],{"class":264},[220,15312,15313],{"class":222,"line":10427},[220,15314,749],{"class":264},[212,15316,15318],{"className":251,"code":15317,"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,15319,15320,15330,15334,15348,15352,15366,15370,15374,15378,15390,15404,15424,15437,15442,15454,15466,15478,15490,15498,15502,15506,15510,15517,15521],{"__ignoreMap":178},[220,15321,15322,15324,15326,15328],{"class":222,"line":223},[220,15323,261],{"class":260},[220,15325,9763],{"class":264},[220,15327,268],{"class":260},[220,15329,9768],{"class":230},[220,15331,15332],{"class":222,"line":179},[220,15333,647],{"emptyLinePlaceholder":194},[220,15335,15336,15338,15340,15342,15344,15346],{"class":222,"line":389},[220,15337,1735],{"class":260},[220,15339,1738],{"class":420},[220,15341,1741],{"class":260},[220,15343,1744],{"class":260},[220,15345,1747],{"class":226},[220,15347,1750],{"class":264},[220,15349,15350],{"class":222,"line":399},[220,15351,1765],{"class":264},[220,15353,15354,15356,15359,15361,15364],{"class":222,"line":644},[220,15355,1770],{"class":264},[220,15357,15358],{"class":230},"'Stripes'",[220,15360,3209],{"class":264},[220,15362,15363],{"class":230},"'bars'",[220,15365,2465],{"class":264},[220,15367,15368],{"class":222,"line":650},[220,15369,1787],{"class":264},[220,15371,15372],{"class":222,"line":656},[220,15373,1792],{"class":264},[220,15375,15376],{"class":222,"line":673},[220,15377,647],{"emptyLinePlaceholder":194},[220,15379,15380,15382,15385,15387],{"class":222,"line":682},[220,15381,14807],{"class":260},[220,15383,15384],{"class":264}," rotation ",[220,15386,353],{"class":260},[220,15388,15389],{"class":420}," 0\n",[220,15391,15392,15394,15396,15398,15400,15402],{"class":222,"line":691},[220,15393,1735],{"class":260},[220,15395,10211],{"class":226},[220,15397,1741],{"class":260},[220,15399,14837],{"class":264},[220,15401,2762],{"class":260},[220,15403,3241],{"class":264},[220,15405,15406,15409,15411,15414,15416,15418,15420,15422],{"class":222,"line":696},[220,15407,15408],{"class":264}," rotation ",[220,15410,353],{"class":260},[220,15412,15413],{"class":264}," (rotation ",[220,15415,9086],{"class":260},[220,15417,14856],{"class":420},[220,15419,10252],{"class":264},[220,15421,14861],{"class":260},[220,15423,14864],{"class":420},[220,15425,15426,15429,15431,15433,15435],{"class":222,"line":702},[220,15427,15428],{"class":264}," shader.",[220,15430,9857],{"class":226},[220,15432,2626],{"class":264},[220,15434,15363],{"class":230},[220,15436,10219],{"class":264},[220,15438,15439],{"class":222,"line":718},[220,15440,15441],{"class":264}," boundingBox: {\n",[220,15443,15444,15446,15448,15450,15452],{"class":222,"line":727},[220,15445,14301],{"class":264},[220,15447,14304],{"class":230},[220,15449,14307],{"class":264},[220,15451,15237],{"class":420},[220,15453,14313],{"class":264},[220,15455,15456,15458,15460,15462,15464],{"class":222,"line":2664},[220,15457,14318],{"class":264},[220,15459,14304],{"class":230},[220,15461,14307],{"class":264},[220,15463,15237],{"class":420},[220,15465,14313],{"class":264},[220,15467,15468,15470,15472,15474,15476],{"class":222,"line":7900},[220,15469,14331],{"class":264},[220,15471,14304],{"class":230},[220,15473,14307],{"class":264},[220,15475,6482],{"class":420},[220,15477,14313],{"class":264},[220,15479,15480,15482,15484,15486,15488],{"class":222,"line":7910},[220,15481,14344],{"class":264},[220,15483,14304],{"class":230},[220,15485,14307],{"class":264},[220,15487,6482],{"class":420},[220,15489,14313],{"class":264},[220,15491,15492,15494,15496],{"class":222,"line":7921},[220,15493,14357],{"class":264},[220,15495,13531],{"class":230},[220,15497,1760],{"class":264},[220,15499,15500],{"class":222,"line":7926},[220,15501,14987],{"class":264},[220,15503,15504],{"class":222,"line":9249},[220,15505,3484],{"class":264},[220,15507,15508],{"class":222,"line":9254},[220,15509,11257],{"class":264},[220,15511,15512,15515],{"class":222,"line":10329},[220,15513,15514],{"class":226}," requestAnimationFrame",[220,15516,14877],{"class":264},[220,15518,15519],{"class":222,"line":10336},[220,15520,749],{"class":264},[220,15522,15523,15526],{"class":222,"line":10341},[220,15524,15525],{"class":226},"requestAnimationFrame",[220,15527,14877],{"class":264},[15,15529,15530,15531,15535],{},"For continuous animation, you can also reach for a ",[56,15532,15534],{"href":15533},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,15537,15538],{},"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":15540},[15541,15543,15545,15546,15547,15548,15549],{"id":13400,"depth":179,"text":15542},"The boundingBox prop",{"id":13628,"depth":179,"text":15544},"Units: uv (%) vs px",{"id":13426,"depth":179,"text":13544},{"id":10087,"depth":179,"text":14078},{"id":14139,"depth":179,"text":14140},{"id":14184,"depth":179,"text":14185},{"id":14746,"depth":179,"text":14747},"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":13271,"description":15550},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":15558,"title":15559,"body":15560,"category":8480,"description":19218,"exclude":190,"extension":191,"forceFramework":190,"icon":19219,"meta":19220,"navigation":194,"path":15533,"seo":19221,"stem":19222,"__hash__":19223},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":15561,"toc":19210},[15562,15565,15568,15571,15620,15623,15626,16159,16162,16167,16296,16308,16311,16326,16794,16797,16801,16998,17010,17042,17045,17048,17530,17533,17537,17668,17673,17676,17679,17685,18409,18412,18416,18557,18562,18566,18569,19049,19053,19060,19208],[11,15563,15559],{"id":15564},"dynamic-props",[15,15566,15567],{},"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,15569,15570],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,15572,15574],{"className":334,"code":15573,"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,15575,15576,15581,15596,15600,15605],{"__ignoreMap":178},[220,15577,15578],{"class":222,"line":223},[220,15579,15580],{"class":609},"\u003C!-- Static value -->\n",[220,15582,15583,15585,15587,15590,15592,15594],{"class":222,"line":179},[220,15584,343],{"class":264},[220,15586,2553],{"class":346},[220,15588,15589],{"class":226}," :radius",[220,15591,353],{"class":264},[220,15593,5927],{"class":230},[220,15595,386],{"class":264},[220,15597,15598],{"class":222,"line":389},[220,15599,647],{"emptyLinePlaceholder":194},[220,15601,15602],{"class":222,"line":399},[220,15603,15604],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,15606,15607,15609,15611,15613,15615,15618],{"class":222,"line":644},[220,15608,343],{"class":264},[220,15610,2553],{"class":346},[220,15612,15589],{"class":226},[220,15614,353],{"class":264},[220,15616,15617],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,15619,386],{"class":264},[23,15621,15622],{"id":15622},"auto-animate",[15,15624,15625],{},"Continuously animates a numeric prop between two values over time.",[246,15627,15628,15718,15828,15931,16033],{":tabs":1557},[212,15629,15631],{"className":334,"code":15630,"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,15632,15633,15647,15653,15662,15671,15676,15681,15686,15691,15696,15701,15706,15710],{"__ignoreMap":178},[220,15634,15635,15637,15639,15641,15643,15645],{"class":222,"line":223},[220,15636,343],{"class":264},[220,15638,347],{"class":346},[220,15640,350],{"class":226},[220,15642,353],{"class":264},[220,15644,356],{"class":230},[220,15646,359],{"class":264},[220,15648,15649,15651],{"class":222,"line":179},[220,15650,364],{"class":264},[220,15652,7877],{"class":346},[220,15654,15655,15657,15659],{"class":222,"line":389},[220,15656,7882],{"class":226},[220,15658,353],{"class":264},[220,15660,15661],{"class":230},"\"#6366f1\"\n",[220,15663,15664,15667,15669],{"class":222,"line":399},[220,15665,15666],{"class":226}," :radius",[220,15668,353],{"class":264},[220,15670,13352],{"class":230},[220,15672,15673],{"class":222,"line":644},[220,15674,15675],{"class":230}," type: 'auto-animate',\n",[220,15677,15678],{"class":222,"line":650},[220,15679,15680],{"class":230}," mode: 'ping-pong',\n",[220,15682,15683],{"class":222,"line":656},[220,15684,15685],{"class":230}," outputMin: 0.2,\n",[220,15687,15688],{"class":222,"line":673},[220,15689,15690],{"class":230}," outputMax: 0.6,\n",[220,15692,15693],{"class":222,"line":682},[220,15694,15695],{"class":230}," speed: 0.8,\n",[220,15697,15698],{"class":222,"line":691},[220,15699,15700],{"class":230}," easing: 'sine'\n",[220,15702,15703],{"class":222,"line":696},[220,15704,15705],{"class":230}," }\"\n",[220,15707,15708],{"class":222,"line":702},[220,15709,1234],{"class":264},[220,15711,15712,15714,15716],{"class":222,"line":718},[220,15713,402],{"class":264},[220,15715,347],{"class":346},[220,15717,359],{"class":264},[212,15719,15721],{"className":409,"code":15720,"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,15722,15723,15737,15743,15751,15759,15768,15778,15787,15796,15805,15812,15816,15820],{"__ignoreMap":178},[220,15724,15725,15727,15729,15731,15733,15735],{"class":222,"line":223},[220,15726,343],{"class":264},[220,15728,347],{"class":420},[220,15730,423],{"class":226},[220,15732,353],{"class":260},[220,15734,356],{"class":230},[220,15736,359],{"class":264},[220,15738,15739,15741],{"class":222,"line":179},[220,15740,364],{"class":264},[220,15742,7877],{"class":420},[220,15744,15745,15747,15749],{"class":222,"line":389},[220,15746,7882],{"class":226},[220,15748,353],{"class":260},[220,15750,15661],{"class":230},[220,15752,15753,15755,15757],{"class":222,"line":399},[220,15754,7892],{"class":226},[220,15756,353],{"class":260},[220,15758,14296],{"class":264},[220,15760,15761,15763,15766],{"class":222,"line":644},[220,15762,14640],{"class":264},[220,15764,15765],{"class":230},"'auto-animate'",[220,15767,1760],{"class":264},[220,15769,15770,15773,15776],{"class":222,"line":650},[220,15771,15772],{"class":264}," mode: ",[220,15774,15775],{"class":230},"'ping-pong'",[220,15777,1760],{"class":264},[220,15779,15780,15783,15785],{"class":222,"line":656},[220,15781,15782],{"class":264}," outputMin: ",[220,15784,15237],{"class":420},[220,15786,1760],{"class":264},[220,15788,15789,15792,15794],{"class":222,"line":673},[220,15790,15791],{"class":264}," outputMax: ",[220,15793,6482],{"class":420},[220,15795,1760],{"class":264},[220,15797,15798,15801,15803],{"class":222,"line":682},[220,15799,15800],{"class":264}," speed: ",[220,15802,4545],{"class":420},[220,15804,1760],{"class":264},[220,15806,15807,15809],{"class":222,"line":691},[220,15808,10233],{"class":264},[220,15810,15811],{"class":230},"'sine'\n",[220,15813,15814],{"class":222,"line":696},[220,15815,14374],{"class":264},[220,15817,15818],{"class":222,"line":702},[220,15819,1234],{"class":264},[220,15821,15822,15824,15826],{"class":222,"line":718},[220,15823,402],{"class":264},[220,15825,347],{"class":420},[220,15827,359],{"class":264},[212,15829,15831],{"className":468,"code":15830,"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,15832,15833,15847,15853,15861,15869,15877,15885,15893,15901,15909,15915,15919,15923],{"__ignoreMap":178},[220,15834,15835,15837,15839,15841,15843,15845],{"class":222,"line":223},[220,15836,343],{"class":264},[220,15838,347],{"class":420},[220,15840,350],{"class":226},[220,15842,353],{"class":260},[220,15844,356],{"class":230},[220,15846,359],{"class":264},[220,15848,15849,15851],{"class":222,"line":179},[220,15850,364],{"class":264},[220,15852,7877],{"class":420},[220,15854,15855,15857,15859],{"class":222,"line":389},[220,15856,7882],{"class":226},[220,15858,353],{"class":260},[220,15860,15661],{"class":230},[220,15862,15863,15865,15867],{"class":222,"line":399},[220,15864,7892],{"class":226},[220,15866,353],{"class":260},[220,15868,14296],{"class":264},[220,15870,15871,15873,15875],{"class":222,"line":644},[220,15872,14640],{"class":264},[220,15874,15765],{"class":230},[220,15876,1760],{"class":264},[220,15878,15879,15881,15883],{"class":222,"line":650},[220,15880,15772],{"class":264},[220,15882,15775],{"class":230},[220,15884,1760],{"class":264},[220,15886,15887,15889,15891],{"class":222,"line":656},[220,15888,15782],{"class":264},[220,15890,15237],{"class":420},[220,15892,1760],{"class":264},[220,15894,15895,15897,15899],{"class":222,"line":673},[220,15896,15791],{"class":264},[220,15898,6482],{"class":420},[220,15900,1760],{"class":264},[220,15902,15903,15905,15907],{"class":222,"line":682},[220,15904,15800],{"class":264},[220,15906,4545],{"class":420},[220,15908,1760],{"class":264},[220,15910,15911,15913],{"class":222,"line":691},[220,15912,10233],{"class":264},[220,15914,15811],{"class":230},[220,15916,15917],{"class":222,"line":696},[220,15918,14374],{"class":264},[220,15920,15921],{"class":222,"line":702},[220,15922,1234],{"class":264},[220,15924,15925,15927,15929],{"class":222,"line":718},[220,15926,402],{"class":264},[220,15928,347],{"class":420},[220,15930,359],{"class":264},[212,15932,15933],{"className":468,"code":15830,"language":469,"meta":178,"style":178},[99,15934,15935,15949,15955,15963,15971,15979,15987,15995,16003,16011,16017,16021,16025],{"__ignoreMap":178},[220,15936,15937,15939,15941,15943,15945,15947],{"class":222,"line":223},[220,15938,343],{"class":264},[220,15940,347],{"class":420},[220,15942,350],{"class":226},[220,15944,353],{"class":260},[220,15946,356],{"class":230},[220,15948,359],{"class":264},[220,15950,15951,15953],{"class":222,"line":179},[220,15952,364],{"class":264},[220,15954,7877],{"class":420},[220,15956,15957,15959,15961],{"class":222,"line":389},[220,15958,7882],{"class":226},[220,15960,353],{"class":260},[220,15962,15661],{"class":230},[220,15964,15965,15967,15969],{"class":222,"line":399},[220,15966,7892],{"class":226},[220,15968,353],{"class":260},[220,15970,14296],{"class":264},[220,15972,15973,15975,15977],{"class":222,"line":644},[220,15974,14640],{"class":264},[220,15976,15765],{"class":230},[220,15978,1760],{"class":264},[220,15980,15981,15983,15985],{"class":222,"line":650},[220,15982,15772],{"class":264},[220,15984,15775],{"class":230},[220,15986,1760],{"class":264},[220,15988,15989,15991,15993],{"class":222,"line":656},[220,15990,15782],{"class":264},[220,15992,15237],{"class":420},[220,15994,1760],{"class":264},[220,15996,15997,15999,16001],{"class":222,"line":673},[220,15998,15791],{"class":264},[220,16000,6482],{"class":420},[220,16002,1760],{"class":264},[220,16004,16005,16007,16009],{"class":222,"line":682},[220,16006,15800],{"class":264},[220,16008,4545],{"class":420},[220,16010,1760],{"class":264},[220,16012,16013,16015],{"class":222,"line":691},[220,16014,10233],{"class":264},[220,16016,15811],{"class":230},[220,16018,16019],{"class":222,"line":696},[220,16020,14374],{"class":264},[220,16022,16023],{"class":222,"line":702},[220,16024,1234],{"class":264},[220,16026,16027,16029,16031],{"class":222,"line":718},[220,16028,402],{"class":264},[220,16030,347],{"class":420},[220,16032,359],{"class":264},[212,16034,16036],{"className":251,"code":16035,"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,16037,16038,16052,16056,16060,16068,16072,16082,16087,16096,16105,16114,16123,16132,16139,16143,16147,16151,16155],{"__ignoreMap":178},[220,16039,16040,16042,16044,16046,16048,16050],{"class":222,"line":223},[220,16041,1735],{"class":260},[220,16043,1738],{"class":420},[220,16045,1741],{"class":260},[220,16047,1744],{"class":260},[220,16049,1747],{"class":226},[220,16051,1750],{"class":264},[220,16053,16054],{"class":222,"line":179},[220,16055,1765],{"class":264},[220,16057,16058],{"class":222,"line":389},[220,16059,14635],{"class":264},[220,16061,16062,16064,16066],{"class":222,"line":399},[220,16063,14640],{"class":264},[220,16065,3206],{"class":230},[220,16067,1760],{"class":264},[220,16069,16070],{"class":222,"line":644},[220,16071,14649],{"class":264},[220,16073,16074,16077,16080],{"class":222,"line":650},[220,16075,16076],{"class":264}," color: ",[220,16078,16079],{"class":230},"'#6366f1'",[220,16081,1760],{"class":264},[220,16083,16084],{"class":222,"line":656},[220,16085,16086],{"class":264}," radius: {\n",[220,16088,16089,16092,16094],{"class":222,"line":673},[220,16090,16091],{"class":264}," type: ",[220,16093,15765],{"class":230},[220,16095,1760],{"class":264},[220,16097,16098,16101,16103],{"class":222,"line":682},[220,16099,16100],{"class":264}," mode: ",[220,16102,15775],{"class":230},[220,16104,1760],{"class":264},[220,16106,16107,16110,16112],{"class":222,"line":691},[220,16108,16109],{"class":264}," outputMin: ",[220,16111,15237],{"class":420},[220,16113,1760],{"class":264},[220,16115,16116,16119,16121],{"class":222,"line":696},[220,16117,16118],{"class":264}," outputMax: ",[220,16120,6482],{"class":420},[220,16122,1760],{"class":264},[220,16124,16125,16128,16130],{"class":222,"line":702},[220,16126,16127],{"class":264}," speed: ",[220,16129,4545],{"class":420},[220,16131,1760],{"class":264},[220,16133,16134,16137],{"class":222,"line":718},[220,16135,16136],{"class":264}," easing: ",[220,16138,15811],{"class":230},[220,16140,16141],{"class":222,"line":727},[220,16142,14727],{"class":264},[220,16144,16145],{"class":222,"line":2664},[220,16146,3792],{"class":264},[220,16148,16149],{"class":222,"line":7900},[220,16150,3484],{"class":264},[220,16152,16153],{"class":222,"line":7910},[220,16154,1787],{"class":264},[220,16156,16157],{"class":222,"line":7921},[220,16158,1792],{"class":264},[19,16160],{":preset":16161},"{\"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,16163,16164],{},[159,16165,16166],{},"Properties:",[1794,16168,16169,16182],{},[1797,16170,16171],{},[1800,16172,16173,16176,16178,16180],{},[1803,16174,16175],{},"Prop",[1803,16177,13442],{},[1803,16179,13445],{},[1803,16181,1808],{},[1810,16183,16184,16209,16225,16241,16260],{},[1800,16185,16186,16191,16196,16199],{},[1815,16187,16188],{},[99,16189,16190],{},"mode",[1815,16192,16193],{},[99,16194,16195],{},"'ping-pong' | 'loop'",[1815,16197,16198],{},"required",[1815,16200,16201,16204,16205,16208],{},[99,16202,16203],{},"ping-pong"," oscillates between min and max. ",[99,16206,16207],{},"loop"," advances from min to max then wraps.",[1800,16210,16211,16216,16220,16222],{},[1815,16212,16213],{},[99,16214,16215],{},"outputMin",[1815,16217,16218],{},[99,16219,13555],{},[1815,16221,16198],{},[1815,16223,16224],{},"Value at the start\u002Fbottom of the range.",[1800,16226,16227,16232,16236,16238],{},[1815,16228,16229],{},[99,16230,16231],{},"outputMax",[1815,16233,16234],{},[99,16235,13555],{},[1815,16237,16198],{},[1815,16239,16240],{},"Value at the end\u002Ftop of the range.",[1800,16242,16243,16248,16252,16257],{},[1815,16244,16245],{},[99,16246,16247],{},"speed",[1815,16249,16250],{},[99,16251,13555],{},[1815,16253,16254],{},[99,16255,16256],{},"1.0",[1815,16258,16259],{},"Cycles per second. Negative values reverse the loop direction.",[1800,16261,16262,16267,16271,16276],{},[1815,16263,16264],{},[99,16265,16266],{},"easing",[1815,16268,16269],{},[99,16270,7306],{},[1815,16272,16273],{},[99,16274,16275],{},"'sine'",[1815,16277,16278,16279,16281,16282,1895,16285,1895,16287,1895,16290,1895,16293,7735],{},"Easing curve for ",[99,16280,16203],{}," mode. Options: ",[99,16283,16284],{},"sine",[99,16286,1894],{},[99,16288,16289],{},"quad",[99,16291,16292],{},"expo",[99,16294,16295],{},"bounce",[15,16297,16298,16301,16302,16304,16305,7735],{},[159,16299,16300],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,16303,16207],{}," mode and ",[99,16306,16307],{},"outputMin: 0, outputMax: 360",[23,16309,16310],{"id":16310},"mouse-position",[15,16312,16313,16314,16317,16318,1895,16320,13923,16323,7735],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,16315,16316],{},"{ x, y }"," coordinates, such as ",[99,16319,6487],{},[99,16321,16322],{},"position",[99,16324,16325],{},"offset",[246,16327,16328,16410,16508,16599,16689],{":tabs":1557},[212,16329,16331],{"className":334,"code":16330,"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,16332,16333,16347,16353,16361,16370,16379,16384,16389,16394,16398,16402],{"__ignoreMap":178},[220,16334,16335,16337,16339,16341,16343,16345],{"class":222,"line":223},[220,16336,343],{"class":264},[220,16338,347],{"class":346},[220,16340,350],{"class":226},[220,16342,353],{"class":264},[220,16344,356],{"class":230},[220,16346,359],{"class":264},[220,16348,16349,16351],{"class":222,"line":179},[220,16350,364],{"class":264},[220,16352,7877],{"class":346},[220,16354,16355,16357,16359],{"class":222,"line":389},[220,16356,7882],{"class":226},[220,16358,353],{"class":264},[220,16360,15661],{"class":230},[220,16362,16363,16365,16367],{"class":222,"line":399},[220,16364,15666],{"class":226},[220,16366,353],{"class":264},[220,16368,16369],{"class":230},"\"0.15\"\n",[220,16371,16372,16375,16377],{"class":222,"line":644},[220,16373,16374],{"class":226}," :center",[220,16376,353],{"class":264},[220,16378,13352],{"class":230},[220,16380,16381],{"class":222,"line":650},[220,16382,16383],{"class":230}," type: 'mouse-position',\n",[220,16385,16386],{"class":222,"line":656},[220,16387,16388],{"class":230}," smoothing: 0.12,\n",[220,16390,16391],{"class":222,"line":673},[220,16392,16393],{"class":230}," momentum: 0.2\n",[220,16395,16396],{"class":222,"line":682},[220,16397,15705],{"class":230},[220,16399,16400],{"class":222,"line":691},[220,16401,1234],{"class":264},[220,16403,16404,16406,16408],{"class":222,"line":696},[220,16405,402],{"class":264},[220,16407,347],{"class":346},[220,16409,359],{"class":264},[212,16411,16413],{"className":409,"code":16412,"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,16414,16415,16429,16435,16443,16456,16465,16474,16484,16492,16496,16500],{"__ignoreMap":178},[220,16416,16417,16419,16421,16423,16425,16427],{"class":222,"line":223},[220,16418,343],{"class":264},[220,16420,347],{"class":420},[220,16422,423],{"class":226},[220,16424,353],{"class":260},[220,16426,356],{"class":230},[220,16428,359],{"class":264},[220,16430,16431,16433],{"class":222,"line":179},[220,16432,364],{"class":264},[220,16434,7877],{"class":420},[220,16436,16437,16439,16441],{"class":222,"line":389},[220,16438,7882],{"class":226},[220,16440,353],{"class":260},[220,16442,15661],{"class":230},[220,16444,16445,16447,16449,16451,16454],{"class":222,"line":399},[220,16446,7892],{"class":226},[220,16448,353],{"class":260},[220,16450,743],{"class":264},[220,16452,16453],{"class":420},"0.15",[220,16455,749],{"class":264},[220,16457,16458,16461,16463],{"class":222,"line":644},[220,16459,16460],{"class":226}," center",[220,16462,353],{"class":260},[220,16464,14296],{"class":264},[220,16466,16467,16469,16472],{"class":222,"line":650},[220,16468,14640],{"class":264},[220,16470,16471],{"class":230},"'mouse-position'",[220,16473,1760],{"class":264},[220,16475,16476,16479,16482],{"class":222,"line":656},[220,16477,16478],{"class":264}," smoothing: ",[220,16480,16481],{"class":420},"0.12",[220,16483,1760],{"class":264},[220,16485,16486,16489],{"class":222,"line":673},[220,16487,16488],{"class":264}," momentum: ",[220,16490,16491],{"class":420},"0.2\n",[220,16493,16494],{"class":222,"line":682},[220,16495,14374],{"class":264},[220,16497,16498],{"class":222,"line":691},[220,16499,1234],{"class":264},[220,16501,16502,16504,16506],{"class":222,"line":696},[220,16503,402],{"class":264},[220,16505,347],{"class":420},[220,16507,359],{"class":264},[212,16509,16511],{"className":468,"code":16510,"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,16512,16513,16527,16533,16541,16553,16561,16569,16577,16583,16587,16591],{"__ignoreMap":178},[220,16514,16515,16517,16519,16521,16523,16525],{"class":222,"line":223},[220,16516,343],{"class":264},[220,16518,347],{"class":420},[220,16520,350],{"class":226},[220,16522,353],{"class":260},[220,16524,356],{"class":230},[220,16526,359],{"class":264},[220,16528,16529,16531],{"class":222,"line":179},[220,16530,364],{"class":264},[220,16532,7877],{"class":420},[220,16534,16535,16537,16539],{"class":222,"line":389},[220,16536,7882],{"class":226},[220,16538,353],{"class":260},[220,16540,15661],{"class":230},[220,16542,16543,16545,16547,16549,16551],{"class":222,"line":399},[220,16544,7892],{"class":226},[220,16546,353],{"class":260},[220,16548,743],{"class":264},[220,16550,16453],{"class":420},[220,16552,749],{"class":264},[220,16554,16555,16557,16559],{"class":222,"line":644},[220,16556,16460],{"class":226},[220,16558,353],{"class":260},[220,16560,14296],{"class":264},[220,16562,16563,16565,16567],{"class":222,"line":650},[220,16564,14640],{"class":264},[220,16566,16471],{"class":230},[220,16568,1760],{"class":264},[220,16570,16571,16573,16575],{"class":222,"line":656},[220,16572,16478],{"class":264},[220,16574,16481],{"class":420},[220,16576,1760],{"class":264},[220,16578,16579,16581],{"class":222,"line":673},[220,16580,16488],{"class":264},[220,16582,16491],{"class":420},[220,16584,16585],{"class":222,"line":682},[220,16586,14374],{"class":264},[220,16588,16589],{"class":222,"line":691},[220,16590,1234],{"class":264},[220,16592,16593,16595,16597],{"class":222,"line":696},[220,16594,402],{"class":264},[220,16596,347],{"class":420},[220,16598,359],{"class":264},[212,16600,16601],{"className":468,"code":16510,"language":469,"meta":178,"style":178},[99,16602,16603,16617,16623,16631,16643,16651,16659,16667,16673,16677,16681],{"__ignoreMap":178},[220,16604,16605,16607,16609,16611,16613,16615],{"class":222,"line":223},[220,16606,343],{"class":264},[220,16608,347],{"class":420},[220,16610,350],{"class":226},[220,16612,353],{"class":260},[220,16614,356],{"class":230},[220,16616,359],{"class":264},[220,16618,16619,16621],{"class":222,"line":179},[220,16620,364],{"class":264},[220,16622,7877],{"class":420},[220,16624,16625,16627,16629],{"class":222,"line":389},[220,16626,7882],{"class":226},[220,16628,353],{"class":260},[220,16630,15661],{"class":230},[220,16632,16633,16635,16637,16639,16641],{"class":222,"line":399},[220,16634,7892],{"class":226},[220,16636,353],{"class":260},[220,16638,743],{"class":264},[220,16640,16453],{"class":420},[220,16642,749],{"class":264},[220,16644,16645,16647,16649],{"class":222,"line":644},[220,16646,16460],{"class":226},[220,16648,353],{"class":260},[220,16650,14296],{"class":264},[220,16652,16653,16655,16657],{"class":222,"line":650},[220,16654,14640],{"class":264},[220,16656,16471],{"class":230},[220,16658,1760],{"class":264},[220,16660,16661,16663,16665],{"class":222,"line":656},[220,16662,16478],{"class":264},[220,16664,16481],{"class":420},[220,16666,1760],{"class":264},[220,16668,16669,16671],{"class":222,"line":673},[220,16670,16488],{"class":264},[220,16672,16491],{"class":420},[220,16674,16675],{"class":222,"line":682},[220,16676,14374],{"class":264},[220,16678,16679],{"class":222,"line":691},[220,16680,1234],{"class":264},[220,16682,16683,16685,16687],{"class":222,"line":696},[220,16684,402],{"class":264},[220,16686,347],{"class":420},[220,16688,359],{"class":264},[212,16690,16692],{"className":251,"code":16691,"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,16693,16694,16708,16712,16716,16724,16728,16736,16745,16750,16758,16767,16774,16778,16782,16786,16790],{"__ignoreMap":178},[220,16695,16696,16698,16700,16702,16704,16706],{"class":222,"line":223},[220,16697,1735],{"class":260},[220,16699,1738],{"class":420},[220,16701,1741],{"class":260},[220,16703,1744],{"class":260},[220,16705,1747],{"class":226},[220,16707,1750],{"class":264},[220,16709,16710],{"class":222,"line":179},[220,16711,1765],{"class":264},[220,16713,16714],{"class":222,"line":389},[220,16715,14635],{"class":264},[220,16717,16718,16720,16722],{"class":222,"line":399},[220,16719,14640],{"class":264},[220,16721,3206],{"class":230},[220,16723,1760],{"class":264},[220,16725,16726],{"class":222,"line":644},[220,16727,14649],{"class":264},[220,16729,16730,16732,16734],{"class":222,"line":650},[220,16731,16076],{"class":264},[220,16733,16079],{"class":230},[220,16735,1760],{"class":264},[220,16737,16738,16741,16743],{"class":222,"line":656},[220,16739,16740],{"class":264}," radius: ",[220,16742,16453],{"class":420},[220,16744,1760],{"class":264},[220,16746,16747],{"class":222,"line":673},[220,16748,16749],{"class":264}," center: {\n",[220,16751,16752,16754,16756],{"class":222,"line":682},[220,16753,16091],{"class":264},[220,16755,16471],{"class":230},[220,16757,1760],{"class":264},[220,16759,16760,16763,16765],{"class":222,"line":691},[220,16761,16762],{"class":264}," smoothing: ",[220,16764,16481],{"class":420},[220,16766,1760],{"class":264},[220,16768,16769,16772],{"class":222,"line":696},[220,16770,16771],{"class":264}," momentum: ",[220,16773,16491],{"class":420},[220,16775,16776],{"class":222,"line":702},[220,16777,14727],{"class":264},[220,16779,16780],{"class":222,"line":718},[220,16781,3792],{"class":264},[220,16783,16784],{"class":222,"line":727},[220,16785,3484],{"class":264},[220,16787,16788],{"class":222,"line":2664},[220,16789,1787],{"class":264},[220,16791,16792],{"class":222,"line":7900},[220,16793,1792],{"class":264},[19,16795],{":preset":16796},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,16798,16799],{},[159,16800,16166],{},[1794,16802,16803,16815],{},[1797,16804,16805],{},[1800,16806,16807,16809,16811,16813],{},[1803,16808,16175],{},[1803,16810,13442],{},[1803,16812,13445],{},[1803,16814,1808],{},[1810,16816,16817,16838,16857,16875,16893,16914,16935,16962,16980],{},[1800,16818,16819,16823,16828,16833],{},[1815,16820,16821],{},[99,16822,13413],{},[1815,16824,16825],{},[99,16826,16827],{},"'mouse' | number",[1815,16829,16830],{},[99,16831,16832],{},"'mouse'",[1815,16834,16835,16837],{},[99,16836,16832],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,16839,16840,16844,16848,16852],{},[1815,16841,16842],{},[99,16843,13416],{},[1815,16845,16846],{},[99,16847,16827],{},[1815,16849,16850],{},[99,16851,16832],{},[1815,16853,16854,16856],{},[99,16855,16832],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,16858,16859,16864,16868,16872],{},[1815,16860,16861],{},[99,16862,16863],{},"invertX",[1815,16865,16866],{},[99,16867,13590],{},[1815,16869,16870],{},[99,16871,2629],{},[1815,16873,16874],{},"Flips the X direction — cursor moving right moves position left.",[1800,16876,16877,16882,16886,16890],{},[1815,16878,16879],{},[99,16880,16881],{},"invertY",[1815,16883,16884],{},[99,16885,13590],{},[1815,16887,16888],{},[99,16889,2629],{},[1815,16891,16892],{},"Flips the Y direction.",[1800,16894,16895,16900,16904,16908],{},[1815,16896,16897],{},[99,16898,16899],{},"smoothing",[1815,16901,16902],{},[99,16903,13555],{},[1815,16905,16906],{},[99,16907,6919],{},[1815,16909,16910,16911,16913],{},"Lag amount (0–1). ",[99,16912,6919],{}," = instant, higher values = sluggish follow.",[1800,16915,16916,16921,16925,16929],{},[1815,16917,16918],{},[99,16919,16920],{},"momentum",[1815,16922,16923],{},[99,16924,13555],{},[1815,16926,16927],{},[99,16928,6919],{},[1815,16930,16931,16932,16934],{},"Spring bounce (0–1). ",[99,16933,6919],{}," = no overshoot, values near 1 = springy.",[1800,16936,16937,16942,16946,16950],{},[1815,16938,16939],{},[99,16940,16941],{},"reach",[1815,16943,16944],{},[99,16945,13555],{},[1815,16947,16948],{},[99,16949,6923],{},[1815,16951,16952,16953,16955,16956,16958,16959,16961],{},"Displacement scale. ",[99,16954,6923],{}," = 1:1 with cursor. ",[99,16957,5460],{}," = twice the displacement. ",[99,16960,6919],{}," = pinned to origin.",[1800,16963,16964,16969,16973,16977],{},[1815,16965,16966],{},[99,16967,16968],{},"originX",[1815,16970,16971],{},[99,16972,13555],{},[1815,16974,16975],{},[99,16976,6000],{},[1815,16978,16979],{},"X coordinate of the origin point that displacement scales from.",[1800,16981,16982,16987,16991,16995],{},[1815,16983,16984],{},[99,16985,16986],{},"originY",[1815,16988,16989],{},[99,16990,13555],{},[1815,16992,16993],{},[99,16994,6000],{},[1815,16996,16997],{},"Y coordinate of the origin point.",[15,16999,17000,17003,17004,17006,17007,17009],{},[159,17001,17002],{},"Pinning one axis:"," Set ",[99,17005,13413],{}," or ",[99,17008,13416],{}," to a number to fix that axis while the other tracks the mouse:",[212,17011,17013],{"className":334,"code":17012,"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,17014,17015,17020],{"__ignoreMap":178},[220,17016,17017],{"class":222,"line":223},[220,17018,17019],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,17021,17022,17024,17026,17028,17030,17033,17035,17037,17040],{"class":222,"line":179},[220,17023,343],{"class":264},[220,17025,2553],{"class":346},[220,17027,15589],{"class":226},[220,17029,353],{"class":264},[220,17031,17032],{"class":230},"\"0.15\"",[220,17034,6379],{"class":226},[220,17036,353],{"class":264},[220,17038,17039],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,17041,386],{"class":264},[23,17043,17044],{"id":17044},"mouse",[15,17046,17047],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,17049,17050,17132,17231,17326,17420],{":tabs":1557},[212,17051,17053],{"className":334,"code":17052,"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,17054,17055,17069,17075,17083,17091,17096,17101,17106,17111,17116,17120,17124],{"__ignoreMap":178},[220,17056,17057,17059,17061,17063,17065,17067],{"class":222,"line":223},[220,17058,343],{"class":264},[220,17060,347],{"class":346},[220,17062,350],{"class":226},[220,17064,353],{"class":264},[220,17066,356],{"class":230},[220,17068,359],{"class":264},[220,17070,17071,17073],{"class":222,"line":179},[220,17072,364],{"class":264},[220,17074,7877],{"class":346},[220,17076,17077,17079,17081],{"class":222,"line":389},[220,17078,7882],{"class":226},[220,17080,353],{"class":264},[220,17082,15661],{"class":230},[220,17084,17085,17087,17089],{"class":222,"line":399},[220,17086,15666],{"class":226},[220,17088,353],{"class":264},[220,17090,13352],{"class":230},[220,17092,17093],{"class":222,"line":644},[220,17094,17095],{"class":230}," type: 'mouse',\n",[220,17097,17098],{"class":222,"line":650},[220,17099,17100],{"class":230}," axis: 'x',\n",[220,17102,17103],{"class":222,"line":656},[220,17104,17105],{"class":230}," outputMin: 0.1,\n",[220,17107,17108],{"class":222,"line":673},[220,17109,17110],{"class":230}," outputMax: 0.7,\n",[220,17112,17113],{"class":222,"line":682},[220,17114,17115],{"class":230}," smoothing: 0.1\n",[220,17117,17118],{"class":222,"line":691},[220,17119,15705],{"class":230},[220,17121,17122],{"class":222,"line":696},[220,17123,1234],{"class":264},[220,17125,17126,17128,17130],{"class":222,"line":702},[220,17127,402],{"class":264},[220,17129,347],{"class":346},[220,17131,359],{"class":264},[212,17133,17135],{"className":409,"code":17134,"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,17136,17137,17151,17157,17165,17173,17181,17191,17199,17208,17215,17219,17223],{"__ignoreMap":178},[220,17138,17139,17141,17143,17145,17147,17149],{"class":222,"line":223},[220,17140,343],{"class":264},[220,17142,347],{"class":420},[220,17144,423],{"class":226},[220,17146,353],{"class":260},[220,17148,356],{"class":230},[220,17150,359],{"class":264},[220,17152,17153,17155],{"class":222,"line":179},[220,17154,364],{"class":264},[220,17156,7877],{"class":420},[220,17158,17159,17161,17163],{"class":222,"line":389},[220,17160,7882],{"class":226},[220,17162,353],{"class":260},[220,17164,15661],{"class":230},[220,17166,17167,17169,17171],{"class":222,"line":399},[220,17168,7892],{"class":226},[220,17170,353],{"class":260},[220,17172,14296],{"class":264},[220,17174,17175,17177,17179],{"class":222,"line":644},[220,17176,14640],{"class":264},[220,17178,16832],{"class":230},[220,17180,1760],{"class":264},[220,17182,17183,17186,17189],{"class":222,"line":650},[220,17184,17185],{"class":264}," axis: ",[220,17187,17188],{"class":230},"'x'",[220,17190,1760],{"class":264},[220,17192,17193,17195,17197],{"class":222,"line":656},[220,17194,15782],{"class":264},[220,17196,14310],{"class":420},[220,17198,1760],{"class":264},[220,17200,17201,17203,17206],{"class":222,"line":673},[220,17202,15791],{"class":264},[220,17204,17205],{"class":420},"0.7",[220,17207,1760],{"class":264},[220,17209,17210,17212],{"class":222,"line":682},[220,17211,16478],{"class":264},[220,17213,17214],{"class":420},"0.1\n",[220,17216,17217],{"class":222,"line":691},[220,17218,14374],{"class":264},[220,17220,17221],{"class":222,"line":696},[220,17222,1234],{"class":264},[220,17224,17225,17227,17229],{"class":222,"line":702},[220,17226,402],{"class":264},[220,17228,347],{"class":420},[220,17230,359],{"class":264},[212,17232,17234],{"className":468,"code":17233,"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,17235,17236,17250,17256,17264,17272,17280,17288,17296,17304,17310,17314,17318],{"__ignoreMap":178},[220,17237,17238,17240,17242,17244,17246,17248],{"class":222,"line":223},[220,17239,343],{"class":264},[220,17241,347],{"class":420},[220,17243,350],{"class":226},[220,17245,353],{"class":260},[220,17247,356],{"class":230},[220,17249,359],{"class":264},[220,17251,17252,17254],{"class":222,"line":179},[220,17253,364],{"class":264},[220,17255,7877],{"class":420},[220,17257,17258,17260,17262],{"class":222,"line":389},[220,17259,7882],{"class":226},[220,17261,353],{"class":260},[220,17263,15661],{"class":230},[220,17265,17266,17268,17270],{"class":222,"line":399},[220,17267,7892],{"class":226},[220,17269,353],{"class":260},[220,17271,14296],{"class":264},[220,17273,17274,17276,17278],{"class":222,"line":644},[220,17275,14640],{"class":264},[220,17277,16832],{"class":230},[220,17279,1760],{"class":264},[220,17281,17282,17284,17286],{"class":222,"line":650},[220,17283,17185],{"class":264},[220,17285,17188],{"class":230},[220,17287,1760],{"class":264},[220,17289,17290,17292,17294],{"class":222,"line":656},[220,17291,15782],{"class":264},[220,17293,14310],{"class":420},[220,17295,1760],{"class":264},[220,17297,17298,17300,17302],{"class":222,"line":673},[220,17299,15791],{"class":264},[220,17301,17205],{"class":420},[220,17303,1760],{"class":264},[220,17305,17306,17308],{"class":222,"line":682},[220,17307,16478],{"class":264},[220,17309,17214],{"class":420},[220,17311,17312],{"class":222,"line":691},[220,17313,14374],{"class":264},[220,17315,17316],{"class":222,"line":696},[220,17317,1234],{"class":264},[220,17319,17320,17322,17324],{"class":222,"line":702},[220,17321,402],{"class":264},[220,17323,347],{"class":420},[220,17325,359],{"class":264},[212,17327,17328],{"className":468,"code":17233,"language":469,"meta":178,"style":178},[99,17329,17330,17344,17350,17358,17366,17374,17382,17390,17398,17404,17408,17412],{"__ignoreMap":178},[220,17331,17332,17334,17336,17338,17340,17342],{"class":222,"line":223},[220,17333,343],{"class":264},[220,17335,347],{"class":420},[220,17337,350],{"class":226},[220,17339,353],{"class":260},[220,17341,356],{"class":230},[220,17343,359],{"class":264},[220,17345,17346,17348],{"class":222,"line":179},[220,17347,364],{"class":264},[220,17349,7877],{"class":420},[220,17351,17352,17354,17356],{"class":222,"line":389},[220,17353,7882],{"class":226},[220,17355,353],{"class":260},[220,17357,15661],{"class":230},[220,17359,17360,17362,17364],{"class":222,"line":399},[220,17361,7892],{"class":226},[220,17363,353],{"class":260},[220,17365,14296],{"class":264},[220,17367,17368,17370,17372],{"class":222,"line":644},[220,17369,14640],{"class":264},[220,17371,16832],{"class":230},[220,17373,1760],{"class":264},[220,17375,17376,17378,17380],{"class":222,"line":650},[220,17377,17185],{"class":264},[220,17379,17188],{"class":230},[220,17381,1760],{"class":264},[220,17383,17384,17386,17388],{"class":222,"line":656},[220,17385,15782],{"class":264},[220,17387,14310],{"class":420},[220,17389,1760],{"class":264},[220,17391,17392,17394,17396],{"class":222,"line":673},[220,17393,15791],{"class":264},[220,17395,17205],{"class":420},[220,17397,1760],{"class":264},[220,17399,17400,17402],{"class":222,"line":682},[220,17401,16478],{"class":264},[220,17403,17214],{"class":420},[220,17405,17406],{"class":222,"line":691},[220,17407,14374],{"class":264},[220,17409,17410],{"class":222,"line":696},[220,17411,1234],{"class":264},[220,17413,17414,17416,17418],{"class":222,"line":702},[220,17415,402],{"class":264},[220,17417,347],{"class":420},[220,17419,359],{"class":264},[212,17421,17423],{"className":251,"code":17422,"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,17424,17425,17439,17443,17447,17455,17459,17467,17471,17479,17488,17496,17504,17510,17514,17518,17522,17526],{"__ignoreMap":178},[220,17426,17427,17429,17431,17433,17435,17437],{"class":222,"line":223},[220,17428,1735],{"class":260},[220,17430,1738],{"class":420},[220,17432,1741],{"class":260},[220,17434,1744],{"class":260},[220,17436,1747],{"class":226},[220,17438,1750],{"class":264},[220,17440,17441],{"class":222,"line":179},[220,17442,1765],{"class":264},[220,17444,17445],{"class":222,"line":389},[220,17446,14635],{"class":264},[220,17448,17449,17451,17453],{"class":222,"line":399},[220,17450,14640],{"class":264},[220,17452,3206],{"class":230},[220,17454,1760],{"class":264},[220,17456,17457],{"class":222,"line":644},[220,17458,14649],{"class":264},[220,17460,17461,17463,17465],{"class":222,"line":650},[220,17462,16076],{"class":264},[220,17464,16079],{"class":230},[220,17466,1760],{"class":264},[220,17468,17469],{"class":222,"line":656},[220,17470,16086],{"class":264},[220,17472,17473,17475,17477],{"class":222,"line":673},[220,17474,16091],{"class":264},[220,17476,16832],{"class":230},[220,17478,1760],{"class":264},[220,17480,17481,17484,17486],{"class":222,"line":682},[220,17482,17483],{"class":264}," axis: ",[220,17485,17188],{"class":230},[220,17487,1760],{"class":264},[220,17489,17490,17492,17494],{"class":222,"line":691},[220,17491,16109],{"class":264},[220,17493,14310],{"class":420},[220,17495,1760],{"class":264},[220,17497,17498,17500,17502],{"class":222,"line":696},[220,17499,16118],{"class":264},[220,17501,17205],{"class":420},[220,17503,1760],{"class":264},[220,17505,17506,17508],{"class":222,"line":702},[220,17507,16762],{"class":264},[220,17509,17214],{"class":420},[220,17511,17512],{"class":222,"line":718},[220,17513,14727],{"class":264},[220,17515,17516],{"class":222,"line":727},[220,17517,3792],{"class":264},[220,17519,17520],{"class":222,"line":2664},[220,17521,3484],{"class":264},[220,17523,17524],{"class":222,"line":7900},[220,17525,1787],{"class":264},[220,17527,17528],{"class":222,"line":7910},[220,17529,1792],{"class":264},[19,17531],{":preset":17532},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,17534,17535],{},[159,17536,16166],{},[1794,17538,17539,17551],{},[1797,17540,17541],{},[1800,17542,17543,17545,17547,17549],{},[1803,17544,16175],{},[1803,17546,13442],{},[1803,17548,13445],{},[1803,17550,1808],{},[1810,17552,17553,17570,17585,17600,17630,17649],{},[1800,17554,17555,17560,17565,17567],{},[1815,17556,17557],{},[99,17558,17559],{},"axis",[1815,17561,17562],{},[99,17563,17564],{},"'x' | 'y'",[1815,17566,16198],{},[1815,17568,17569],{},"Which pointer axis drives this prop.",[1800,17571,17572,17576,17580,17582],{},[1815,17573,17574],{},[99,17575,16215],{},[1815,17577,17578],{},[99,17579,13555],{},[1815,17581,16198],{},[1815,17583,17584],{},"Output value when axis is at 0 (left or top).",[1800,17586,17587,17591,17595,17597],{},[1815,17588,17589],{},[99,17590,16231],{},[1815,17592,17593],{},[99,17594,13555],{},[1815,17596,16198],{},[1815,17598,17599],{},"Output value when axis is at 1 (right or bottom).",[1800,17601,17602,17607,17611,17615],{},[1815,17603,17604],{},[99,17605,17606],{},"curve",[1815,17608,17609],{},[99,17610,13555],{},[1815,17612,17613],{},[99,17614,6919],{},[1815,17616,17617,17618,1550,17621,17624,17625,17627,17628,7735],{},"Power curve: ",[99,17619,17620],{},"-1",[99,17622,17623],{},"+1",". Negative = biased toward ",[99,17626,16215],{},", positive = toward ",[99,17629,16231],{},[1800,17631,17632,17636,17640,17644],{},[1815,17633,17634],{},[99,17635,16899],{},[1815,17637,17638],{},[99,17639,13555],{},[1815,17641,17642],{},[99,17643,6919],{},[1815,17645,17646,17647,7735],{},"Lag (0–1). Same as ",[99,17648,16310],{},[1800,17650,17651,17655,17659,17663],{},[1815,17652,17653],{},[99,17654,16920],{},[1815,17656,17657],{},[99,17658,13555],{},[1815,17660,17661],{},[99,17662,6919],{},[1815,17664,17665,17666,7735],{},"Spring bounce (0–1). Same as ",[99,17667,16310],{},[15,17669,17670,17672],{},[159,17671,16300],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,17674,17675],{"id":17675},"map",[15,17677,17678],{},"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,17680,17681,17682,17684],{},"First, give the source component an ",[99,17683,7302],{},". Then reference that id in the driver:",[246,17686,17687,17825,17971,18108,18244],{":tabs":1557},[212,17688,17690],{"className":334,"code":17689,"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,17691,17692,17706,17711,17717,17726,17736,17745,17749,17753,17758,17765,17774,17779,17784,17789,17794,17799,17804,17809,17813,17817],{"__ignoreMap":178},[220,17693,17694,17696,17698,17700,17702,17704],{"class":222,"line":223},[220,17695,343],{"class":264},[220,17697,347],{"class":346},[220,17699,350],{"class":226},[220,17701,353],{"class":264},[220,17703,356],{"class":230},[220,17705,359],{"class":264},[220,17707,17708],{"class":222,"line":179},[220,17709,17710],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,17712,17713,17715],{"class":222,"line":389},[220,17714,364],{"class":264},[220,17716,1189],{"class":346},[220,17718,17719,17721,17723],{"class":222,"line":399},[220,17720,7824],{"class":226},[220,17722,353],{"class":264},[220,17724,17725],{"class":230},"\"grad\"\n",[220,17727,17728,17731,17733],{"class":222,"line":644},[220,17729,17730],{"class":226}," color-a",[220,17732,353],{"class":264},[220,17734,17735],{"class":230},"\"#000000\"\n",[220,17737,17738,17741,17743],{"class":222,"line":650},[220,17739,17740],{"class":226}," color-b",[220,17742,353],{"class":264},[220,17744,7838],{"class":230},[220,17746,17747],{"class":222,"line":656},[220,17748,1234],{"class":264},[220,17750,17751],{"class":222,"line":673},[220,17752,647],{"emptyLinePlaceholder":194},[220,17754,17755],{"class":222,"line":682},[220,17756,17757],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,17759,17760,17762],{"class":222,"line":691},[220,17761,364],{"class":264},[220,17763,17764],{"class":346},"DotGrid\n",[220,17766,17767,17770,17772],{"class":222,"line":696},[220,17768,17769],{"class":226}," :dot-size",[220,17771,353],{"class":264},[220,17773,13352],{"class":230},[220,17775,17776],{"class":222,"line":702},[220,17777,17778],{"class":230}," type: 'map',\n",[220,17780,17781],{"class":222,"line":718},[220,17782,17783],{"class":230}," source: 'grad',\n",[220,17785,17786],{"class":222,"line":727},[220,17787,17788],{"class":230}," channel: 'luminance',\n",[220,17790,17791],{"class":222,"line":2664},[220,17792,17793],{"class":230}," inputMin: 0,\n",[220,17795,17796],{"class":222,"line":7900},[220,17797,17798],{"class":230}," inputMax: 1,\n",[220,17800,17801],{"class":222,"line":7910},[220,17802,17803],{"class":230}," outputMin: 0.02,\n",[220,17805,17806],{"class":222,"line":7921},[220,17807,17808],{"class":230}," outputMax: 0.12\n",[220,17810,17811],{"class":222,"line":7926},[220,17812,15705],{"class":230},[220,17814,17815],{"class":222,"line":9249},[220,17816,1234],{"class":264},[220,17818,17819,17821,17823],{"class":222,"line":9254},[220,17820,402],{"class":264},[220,17822,347],{"class":346},[220,17824,359],{"class":264},[212,17826,17828],{"className":409,"code":17827,"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,17829,17830,17844,17850,17858,17866,17874,17878,17884,17893,17902,17912,17921,17930,17939,17948,17955,17959,17963],{"__ignoreMap":178},[220,17831,17832,17834,17836,17838,17840,17842],{"class":222,"line":223},[220,17833,343],{"class":264},[220,17835,347],{"class":420},[220,17837,423],{"class":226},[220,17839,353],{"class":260},[220,17841,356],{"class":230},[220,17843,359],{"class":264},[220,17845,17846,17848],{"class":222,"line":179},[220,17847,364],{"class":264},[220,17849,1189],{"class":420},[220,17851,17852,17854,17856],{"class":222,"line":389},[220,17853,7824],{"class":226},[220,17855,353],{"class":260},[220,17857,17725],{"class":230},[220,17859,17860,17862,17864],{"class":222,"line":399},[220,17861,1194],{"class":226},[220,17863,353],{"class":260},[220,17865,17735],{"class":230},[220,17867,17868,17870,17872],{"class":222,"line":644},[220,17869,1204],{"class":226},[220,17871,353],{"class":260},[220,17873,7838],{"class":230},[220,17875,17876],{"class":222,"line":650},[220,17877,1234],{"class":264},[220,17879,17880,17882],{"class":222,"line":656},[220,17881,364],{"class":264},[220,17883,17764],{"class":420},[220,17885,17886,17889,17891],{"class":222,"line":673},[220,17887,17888],{"class":226}," dotSize",[220,17890,353],{"class":260},[220,17892,14296],{"class":264},[220,17894,17895,17897,17900],{"class":222,"line":682},[220,17896,14640],{"class":264},[220,17898,17899],{"class":230},"'map'",[220,17901,1760],{"class":264},[220,17903,17904,17907,17910],{"class":222,"line":691},[220,17905,17906],{"class":264}," source: ",[220,17908,17909],{"class":230},"'grad'",[220,17911,1760],{"class":264},[220,17913,17914,17917,17919],{"class":222,"line":696},[220,17915,17916],{"class":264}," channel: ",[220,17918,8454],{"class":230},[220,17920,1760],{"class":264},[220,17922,17923,17926,17928],{"class":222,"line":702},[220,17924,17925],{"class":264}," inputMin: ",[220,17927,6919],{"class":420},[220,17929,1760],{"class":264},[220,17931,17932,17935,17937],{"class":222,"line":718},[220,17933,17934],{"class":264}," inputMax: ",[220,17936,6923],{"class":420},[220,17938,1760],{"class":264},[220,17940,17941,17943,17946],{"class":222,"line":727},[220,17942,15782],{"class":264},[220,17944,17945],{"class":420},"0.02",[220,17947,1760],{"class":264},[220,17949,17950,17952],{"class":222,"line":2664},[220,17951,15791],{"class":264},[220,17953,17954],{"class":420},"0.12\n",[220,17956,17957],{"class":222,"line":7900},[220,17958,14374],{"class":264},[220,17960,17961],{"class":222,"line":7910},[220,17962,1234],{"class":264},[220,17964,17965,17967,17969],{"class":222,"line":7921},[220,17966,402],{"class":264},[220,17968,347],{"class":420},[220,17970,359],{"class":264},[212,17972,17974],{"className":468,"code":17973,"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,17975,17976,17990,17996,18004,18012,18020,18024,18030,18038,18046,18054,18062,18070,18078,18086,18092,18096,18100],{"__ignoreMap":178},[220,17977,17978,17980,17982,17984,17986,17988],{"class":222,"line":223},[220,17979,343],{"class":264},[220,17981,347],{"class":420},[220,17983,350],{"class":226},[220,17985,353],{"class":260},[220,17987,356],{"class":230},[220,17989,359],{"class":264},[220,17991,17992,17994],{"class":222,"line":179},[220,17993,364],{"class":264},[220,17995,1189],{"class":420},[220,17997,17998,18000,18002],{"class":222,"line":389},[220,17999,7824],{"class":226},[220,18001,353],{"class":260},[220,18003,17725],{"class":230},[220,18005,18006,18008,18010],{"class":222,"line":399},[220,18007,1194],{"class":226},[220,18009,353],{"class":260},[220,18011,17735],{"class":230},[220,18013,18014,18016,18018],{"class":222,"line":644},[220,18015,1204],{"class":226},[220,18017,353],{"class":260},[220,18019,7838],{"class":230},[220,18021,18022],{"class":222,"line":650},[220,18023,1234],{"class":264},[220,18025,18026,18028],{"class":222,"line":656},[220,18027,364],{"class":264},[220,18029,17764],{"class":420},[220,18031,18032,18034,18036],{"class":222,"line":673},[220,18033,17888],{"class":226},[220,18035,353],{"class":260},[220,18037,14296],{"class":264},[220,18039,18040,18042,18044],{"class":222,"line":682},[220,18041,14640],{"class":264},[220,18043,17899],{"class":230},[220,18045,1760],{"class":264},[220,18047,18048,18050,18052],{"class":222,"line":691},[220,18049,17906],{"class":264},[220,18051,17909],{"class":230},[220,18053,1760],{"class":264},[220,18055,18056,18058,18060],{"class":222,"line":696},[220,18057,17916],{"class":264},[220,18059,8454],{"class":230},[220,18061,1760],{"class":264},[220,18063,18064,18066,18068],{"class":222,"line":702},[220,18065,17925],{"class":264},[220,18067,6919],{"class":420},[220,18069,1760],{"class":264},[220,18071,18072,18074,18076],{"class":222,"line":718},[220,18073,17934],{"class":264},[220,18075,6923],{"class":420},[220,18077,1760],{"class":264},[220,18079,18080,18082,18084],{"class":222,"line":727},[220,18081,15782],{"class":264},[220,18083,17945],{"class":420},[220,18085,1760],{"class":264},[220,18087,18088,18090],{"class":222,"line":2664},[220,18089,15791],{"class":264},[220,18091,17954],{"class":420},[220,18093,18094],{"class":222,"line":7900},[220,18095,14374],{"class":264},[220,18097,18098],{"class":222,"line":7910},[220,18099,1234],{"class":264},[220,18101,18102,18104,18106],{"class":222,"line":7921},[220,18103,402],{"class":264},[220,18105,347],{"class":420},[220,18107,359],{"class":264},[212,18109,18110],{"className":468,"code":17973,"language":469,"meta":178,"style":178},[99,18111,18112,18126,18132,18140,18148,18156,18160,18166,18174,18182,18190,18198,18206,18214,18222,18228,18232,18236],{"__ignoreMap":178},[220,18113,18114,18116,18118,18120,18122,18124],{"class":222,"line":223},[220,18115,343],{"class":264},[220,18117,347],{"class":420},[220,18119,350],{"class":226},[220,18121,353],{"class":260},[220,18123,356],{"class":230},[220,18125,359],{"class":264},[220,18127,18128,18130],{"class":222,"line":179},[220,18129,364],{"class":264},[220,18131,1189],{"class":420},[220,18133,18134,18136,18138],{"class":222,"line":389},[220,18135,7824],{"class":226},[220,18137,353],{"class":260},[220,18139,17725],{"class":230},[220,18141,18142,18144,18146],{"class":222,"line":399},[220,18143,1194],{"class":226},[220,18145,353],{"class":260},[220,18147,17735],{"class":230},[220,18149,18150,18152,18154],{"class":222,"line":644},[220,18151,1204],{"class":226},[220,18153,353],{"class":260},[220,18155,7838],{"class":230},[220,18157,18158],{"class":222,"line":650},[220,18159,1234],{"class":264},[220,18161,18162,18164],{"class":222,"line":656},[220,18163,364],{"class":264},[220,18165,17764],{"class":420},[220,18167,18168,18170,18172],{"class":222,"line":673},[220,18169,17888],{"class":226},[220,18171,353],{"class":260},[220,18173,14296],{"class":264},[220,18175,18176,18178,18180],{"class":222,"line":682},[220,18177,14640],{"class":264},[220,18179,17899],{"class":230},[220,18181,1760],{"class":264},[220,18183,18184,18186,18188],{"class":222,"line":691},[220,18185,17906],{"class":264},[220,18187,17909],{"class":230},[220,18189,1760],{"class":264},[220,18191,18192,18194,18196],{"class":222,"line":696},[220,18193,17916],{"class":264},[220,18195,8454],{"class":230},[220,18197,1760],{"class":264},[220,18199,18200,18202,18204],{"class":222,"line":702},[220,18201,17925],{"class":264},[220,18203,6919],{"class":420},[220,18205,1760],{"class":264},[220,18207,18208,18210,18212],{"class":222,"line":718},[220,18209,17934],{"class":264},[220,18211,6923],{"class":420},[220,18213,1760],{"class":264},[220,18215,18216,18218,18220],{"class":222,"line":727},[220,18217,15782],{"class":264},[220,18219,17945],{"class":420},[220,18221,1760],{"class":264},[220,18223,18224,18226],{"class":222,"line":2664},[220,18225,15791],{"class":264},[220,18227,17954],{"class":420},[220,18229,18230],{"class":222,"line":7900},[220,18231,14374],{"class":264},[220,18233,18234],{"class":222,"line":7910},[220,18235,1234],{"class":264},[220,18237,18238,18240,18242],{"class":222,"line":7921},[220,18239,402],{"class":264},[220,18241,347],{"class":420},[220,18243,359],{"class":264},[212,18245,18247],{"className":251,"code":18246,"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,18248,18249,18263,18267,18271,18279,18288,18303,18308,18312,18321,18325,18330,18338,18347,18356,18365,18374,18382,18389,18393,18397,18401,18405],{"__ignoreMap":178},[220,18250,18251,18253,18255,18257,18259,18261],{"class":222,"line":223},[220,18252,1735],{"class":260},[220,18254,1738],{"class":420},[220,18256,1741],{"class":260},[220,18258,1744],{"class":260},[220,18260,1747],{"class":226},[220,18262,1750],{"class":264},[220,18264,18265],{"class":222,"line":179},[220,18266,1765],{"class":264},[220,18268,18269],{"class":222,"line":389},[220,18270,14635],{"class":264},[220,18272,18273,18275,18277],{"class":222,"line":399},[220,18274,14640],{"class":264},[220,18276,2462],{"class":230},[220,18278,1760],{"class":264},[220,18280,18281,18284,18286],{"class":222,"line":644},[220,18282,18283],{"class":264}," id: ",[220,18285,17909],{"class":230},[220,18287,1760],{"class":264},[220,18289,18290,18293,18296,18298,18300],{"class":222,"line":650},[220,18291,18292],{"class":264}," props: { colorA: ",[220,18294,18295],{"class":230},"'#000000'",[220,18297,8420],{"class":264},[220,18299,8417],{"class":230},[220,18301,18302],{"class":264}," }\n",[220,18304,18305],{"class":222,"line":656},[220,18306,18307],{"class":264}," },\n",[220,18309,18310],{"class":222,"line":673},[220,18311,14635],{"class":264},[220,18313,18314,18316,18319],{"class":222,"line":682},[220,18315,14640],{"class":264},[220,18317,18318],{"class":230},"'DotGrid'",[220,18320,1760],{"class":264},[220,18322,18323],{"class":222,"line":691},[220,18324,14649],{"class":264},[220,18326,18327],{"class":222,"line":696},[220,18328,18329],{"class":264}," dotSize: {\n",[220,18331,18332,18334,18336],{"class":222,"line":702},[220,18333,16091],{"class":264},[220,18335,17899],{"class":230},[220,18337,1760],{"class":264},[220,18339,18340,18343,18345],{"class":222,"line":718},[220,18341,18342],{"class":264}," source: ",[220,18344,17909],{"class":230},[220,18346,1760],{"class":264},[220,18348,18349,18352,18354],{"class":222,"line":727},[220,18350,18351],{"class":264}," channel: ",[220,18353,8454],{"class":230},[220,18355,1760],{"class":264},[220,18357,18358,18361,18363],{"class":222,"line":2664},[220,18359,18360],{"class":264}," inputMin: ",[220,18362,6919],{"class":420},[220,18364,1760],{"class":264},[220,18366,18367,18370,18372],{"class":222,"line":7900},[220,18368,18369],{"class":264}," inputMax: ",[220,18371,6923],{"class":420},[220,18373,1760],{"class":264},[220,18375,18376,18378,18380],{"class":222,"line":7910},[220,18377,16109],{"class":264},[220,18379,6919],{"class":420},[220,18381,1760],{"class":264},[220,18383,18384,18386],{"class":222,"line":7921},[220,18385,16118],{"class":264},[220,18387,18388],{"class":420},"1\n",[220,18390,18391],{"class":222,"line":7926},[220,18392,14727],{"class":264},[220,18394,18395],{"class":222,"line":9249},[220,18396,3792],{"class":264},[220,18398,18399],{"class":222,"line":9254},[220,18400,3484],{"class":264},[220,18402,18403],{"class":222,"line":10329},[220,18404,1787],{"class":264},[220,18406,18407],{"class":222,"line":10336},[220,18408,1792],{"class":264},[19,18410],{":preset":18411},"{\"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,18413,18414],{},[159,18415,16166],{},[1794,18417,18418,18430],{},[1797,18419,18420],{},[1800,18421,18422,18424,18426,18428],{},[1803,18423,16175],{},[1803,18425,13442],{},[1803,18427,13445],{},[1803,18429,1808],{},[1810,18431,18432,18450,18474,18490,18506,18521,18536],{},[1800,18433,18434,18439,18443,18445],{},[1815,18435,18436],{},[99,18437,18438],{},"source",[1815,18440,18441],{},[99,18442,7306],{},[1815,18444,16198],{},[1815,18446,1839,18447,18449],{},[99,18448,7302],{}," of the source component to sample from.",[1800,18451,18452,18457,18461,18463],{},[1815,18453,18454],{},[99,18455,18456],{},"channel",[1815,18458,18459],{},[99,18460,7306],{},[1815,18462,16198],{},[1815,18464,18465,18466,1895,18468,1895,18470,1895,18472,7735],{},"Which channel to extract. ",[99,18467,7755],{},[99,18469,7763],{},[99,18471,7771],{},[99,18473,7779],{},[1800,18475,18476,18481,18485,18487],{},[1815,18477,18478],{},[99,18479,18480],{},"inputMin",[1815,18482,18483],{},[99,18484,13555],{},[1815,18486,16198],{},[1815,18488,18489],{},"Source values at or below this are treated as 0.",[1800,18491,18492,18497,18501,18503],{},[1815,18493,18494],{},[99,18495,18496],{},"inputMax",[1815,18498,18499],{},[99,18500,13555],{},[1815,18502,16198],{},[1815,18504,18505],{},"Source values at or above this are treated as 1.",[1800,18507,18508,18512,18516,18518],{},[1815,18509,18510],{},[99,18511,16215],{},[1815,18513,18514],{},[99,18515,13555],{},[1815,18517,16198],{},[1815,18519,18520],{},"Output value when input = 0.",[1800,18522,18523,18527,18531,18533],{},[1815,18524,18525],{},[99,18526,16231],{},[1815,18528,18529],{},[99,18530,13555],{},[1815,18532,16198],{},[1815,18534,18535],{},"Output value when input = 1.",[1800,18537,18538,18542,18546,18550],{},[1815,18539,18540],{},[99,18541,17606],{},[1815,18543,18544],{},[99,18545,13555],{},[1815,18547,18548],{},[99,18549,6919],{},[1815,18551,18552,18553,1550,18555,7735],{},"Power curve applied after normalization. ",[99,18554,17620],{},[99,18556,17623],{},[15,18558,1839,18559,18561],{},[99,18560,17675],{}," 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,18563,18565],{"id":18564},"combining-dynamic-props","Combining dynamic props",[15,18567,18568],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,18570,18571,18677,18804,18927],{":tabs":248},[212,18572,18574],{"className":334,"code":18573,"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,18575,18576,18590,18613,18620,18629,18638,18642,18646,18651,18656,18661,18665,18669],{"__ignoreMap":178},[220,18577,18578,18580,18582,18584,18586,18588],{"class":222,"line":223},[220,18579,343],{"class":264},[220,18581,347],{"class":346},[220,18583,350],{"class":226},[220,18585,353],{"class":264},[220,18587,356],{"class":230},[220,18589,359],{"class":264},[220,18591,18592,18594,18596,18599,18601,18603,18606,18608,18611],{"class":222,"line":179},[220,18593,364],{"class":264},[220,18595,367],{"class":346},[220,18597,18598],{"class":226}," color-a",[220,18600,353],{"class":264},[220,18602,375],{"class":230},[220,18604,18605],{"class":226}," color-b",[220,18607,353],{"class":264},[220,18609,18610],{"class":230},"\"#4f46e5\"",[220,18612,386],{"class":264},[220,18614,18615,18617],{"class":222,"line":389},[220,18616,364],{"class":264},[220,18618,18619],{"class":346},"LensFlare\n",[220,18621,18622,18624,18626],{"class":222,"line":399},[220,18623,16374],{"class":226},[220,18625,353],{"class":264},[220,18627,18628],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,18630,18631,18634,18636],{"class":222,"line":644},[220,18632,18633],{"class":226}," :intensity",[220,18635,353],{"class":264},[220,18637,13352],{"class":230},[220,18639,18640],{"class":222,"line":650},[220,18641,15675],{"class":230},[220,18643,18644],{"class":222,"line":656},[220,18645,15680],{"class":230},[220,18647,18648],{"class":222,"line":673},[220,18649,18650],{"class":230}," outputMin: 0.4,\n",[220,18652,18653],{"class":222,"line":682},[220,18654,18655],{"class":230}," outputMax: 1.0,\n",[220,18657,18658],{"class":222,"line":691},[220,18659,18660],{"class":230}," speed: 0.6\n",[220,18662,18663],{"class":222,"line":696},[220,18664,15705],{"class":230},[220,18666,18667],{"class":222,"line":702},[220,18668,1234],{"class":264},[220,18670,18671,18673,18675],{"class":222,"line":718},[220,18672,402],{"class":264},[220,18674,347],{"class":346},[220,18676,359],{"class":264},[212,18678,18680],{"className":409,"code":18679,"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,18681,18682,18696,18716,18722,18740,18749,18757,18765,18773,18781,18788,18792,18796],{"__ignoreMap":178},[220,18683,18684,18686,18688,18690,18692,18694],{"class":222,"line":223},[220,18685,343],{"class":264},[220,18687,347],{"class":420},[220,18689,423],{"class":226},[220,18691,353],{"class":260},[220,18693,356],{"class":230},[220,18695,359],{"class":264},[220,18697,18698,18700,18702,18704,18706,18708,18710,18712,18714],{"class":222,"line":179},[220,18699,364],{"class":264},[220,18701,367],{"class":420},[220,18703,370],{"class":226},[220,18705,353],{"class":260},[220,18707,375],{"class":230},[220,18709,378],{"class":226},[220,18711,353],{"class":260},[220,18713,18610],{"class":230},[220,18715,386],{"class":264},[220,18717,18718,18720],{"class":222,"line":389},[220,18719,364],{"class":264},[220,18721,18619],{"class":420},[220,18723,18724,18726,18728,18731,18733,18736,18738],{"class":222,"line":399},[220,18725,16460],{"class":226},[220,18727,353],{"class":260},[220,18729,18730],{"class":264},"{{ type: ",[220,18732,16471],{"class":230},[220,18734,18735],{"class":264},", smoothing: ",[220,18737,14310],{"class":420},[220,18739,2803],{"class":264},[220,18741,18742,18745,18747],{"class":222,"line":644},[220,18743,18744],{"class":226}," intensity",[220,18746,353],{"class":260},[220,18748,14296],{"class":264},[220,18750,18751,18753,18755],{"class":222,"line":650},[220,18752,14640],{"class":264},[220,18754,15765],{"class":230},[220,18756,1760],{"class":264},[220,18758,18759,18761,18763],{"class":222,"line":656},[220,18760,15772],{"class":264},[220,18762,15775],{"class":230},[220,18764,1760],{"class":264},[220,18766,18767,18769,18771],{"class":222,"line":673},[220,18768,15782],{"class":264},[220,18770,6495],{"class":420},[220,18772,1760],{"class":264},[220,18774,18775,18777,18779],{"class":222,"line":682},[220,18776,15791],{"class":264},[220,18778,16256],{"class":420},[220,18780,1760],{"class":264},[220,18782,18783,18785],{"class":222,"line":691},[220,18784,15800],{"class":264},[220,18786,18787],{"class":420},"0.6\n",[220,18789,18790],{"class":222,"line":696},[220,18791,14374],{"class":264},[220,18793,18794],{"class":222,"line":702},[220,18795,1234],{"class":264},[220,18797,18798,18800,18802],{"class":222,"line":718},[220,18799,402],{"class":264},[220,18801,347],{"class":420},[220,18803,359],{"class":264},[212,18805,18807],{"className":468,"code":18806,"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,18808,18809,18823,18843,18849,18865,18873,18881,18889,18897,18905,18911,18915,18919],{"__ignoreMap":178},[220,18810,18811,18813,18815,18817,18819,18821],{"class":222,"line":223},[220,18812,343],{"class":264},[220,18814,347],{"class":420},[220,18816,350],{"class":226},[220,18818,353],{"class":260},[220,18820,356],{"class":230},[220,18822,359],{"class":264},[220,18824,18825,18827,18829,18831,18833,18835,18837,18839,18841],{"class":222,"line":179},[220,18826,364],{"class":264},[220,18828,367],{"class":420},[220,18830,370],{"class":226},[220,18832,353],{"class":260},[220,18834,375],{"class":230},[220,18836,378],{"class":226},[220,18838,353],{"class":260},[220,18840,18610],{"class":230},[220,18842,386],{"class":264},[220,18844,18845,18847],{"class":222,"line":389},[220,18846,364],{"class":264},[220,18848,18619],{"class":420},[220,18850,18851,18853,18855,18857,18859,18861,18863],{"class":222,"line":399},[220,18852,16460],{"class":226},[220,18854,353],{"class":260},[220,18856,18730],{"class":264},[220,18858,16471],{"class":230},[220,18860,18735],{"class":264},[220,18862,14310],{"class":420},[220,18864,2803],{"class":264},[220,18866,18867,18869,18871],{"class":222,"line":644},[220,18868,18744],{"class":226},[220,18870,353],{"class":260},[220,18872,14296],{"class":264},[220,18874,18875,18877,18879],{"class":222,"line":650},[220,18876,14640],{"class":264},[220,18878,15765],{"class":230},[220,18880,1760],{"class":264},[220,18882,18883,18885,18887],{"class":222,"line":656},[220,18884,15772],{"class":264},[220,18886,15775],{"class":230},[220,18888,1760],{"class":264},[220,18890,18891,18893,18895],{"class":222,"line":673},[220,18892,15782],{"class":264},[220,18894,6495],{"class":420},[220,18896,1760],{"class":264},[220,18898,18899,18901,18903],{"class":222,"line":682},[220,18900,15791],{"class":264},[220,18902,16256],{"class":420},[220,18904,1760],{"class":264},[220,18906,18907,18909],{"class":222,"line":691},[220,18908,15800],{"class":264},[220,18910,18787],{"class":420},[220,18912,18913],{"class":222,"line":696},[220,18914,14374],{"class":264},[220,18916,18917],{"class":222,"line":702},[220,18918,1234],{"class":264},[220,18920,18921,18923,18925],{"class":222,"line":718},[220,18922,402],{"class":264},[220,18924,347],{"class":420},[220,18926,359],{"class":264},[212,18928,18929],{"className":468,"code":18806,"language":469,"meta":178,"style":178},[99,18930,18931,18945,18965,18971,18987,18995,19003,19011,19019,19027,19033,19037,19041],{"__ignoreMap":178},[220,18932,18933,18935,18937,18939,18941,18943],{"class":222,"line":223},[220,18934,343],{"class":264},[220,18936,347],{"class":420},[220,18938,350],{"class":226},[220,18940,353],{"class":260},[220,18942,356],{"class":230},[220,18944,359],{"class":264},[220,18946,18947,18949,18951,18953,18955,18957,18959,18961,18963],{"class":222,"line":179},[220,18948,364],{"class":264},[220,18950,367],{"class":420},[220,18952,370],{"class":226},[220,18954,353],{"class":260},[220,18956,375],{"class":230},[220,18958,378],{"class":226},[220,18960,353],{"class":260},[220,18962,18610],{"class":230},[220,18964,386],{"class":264},[220,18966,18967,18969],{"class":222,"line":389},[220,18968,364],{"class":264},[220,18970,18619],{"class":420},[220,18972,18973,18975,18977,18979,18981,18983,18985],{"class":222,"line":399},[220,18974,16460],{"class":226},[220,18976,353],{"class":260},[220,18978,18730],{"class":264},[220,18980,16471],{"class":230},[220,18982,18735],{"class":264},[220,18984,14310],{"class":420},[220,18986,2803],{"class":264},[220,18988,18989,18991,18993],{"class":222,"line":644},[220,18990,18744],{"class":226},[220,18992,353],{"class":260},[220,18994,14296],{"class":264},[220,18996,18997,18999,19001],{"class":222,"line":650},[220,18998,14640],{"class":264},[220,19000,15765],{"class":230},[220,19002,1760],{"class":264},[220,19004,19005,19007,19009],{"class":222,"line":656},[220,19006,15772],{"class":264},[220,19008,15775],{"class":230},[220,19010,1760],{"class":264},[220,19012,19013,19015,19017],{"class":222,"line":673},[220,19014,15782],{"class":264},[220,19016,6495],{"class":420},[220,19018,1760],{"class":264},[220,19020,19021,19023,19025],{"class":222,"line":682},[220,19022,15791],{"class":264},[220,19024,16256],{"class":420},[220,19026,1760],{"class":264},[220,19028,19029,19031],{"class":222,"line":691},[220,19030,15800],{"class":264},[220,19032,18787],{"class":420},[220,19034,19035],{"class":222,"line":696},[220,19036,14374],{"class":264},[220,19038,19039],{"class":222,"line":702},[220,19040,1234],{"class":264},[220,19042,19043,19045,19047],{"class":222,"line":718},[220,19044,402],{"class":264},[220,19046,347],{"class":420},[220,19048,359],{"class":264},[23,19050,19052],{"id":19051},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,19054,19055,19056,19059],{},"In the JavaScript API, ",[99,19057,19058],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,19061,19063],{"className":251,"code":19062,"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,19064,19065,19070,19084,19088,19105,19109,19113,19117,19122,19134,19139,19148,19157,19166,19174,19178,19182,19186,19191],{"__ignoreMap":178},[220,19066,19067],{"class":222,"line":223},[220,19068,19069],{"class":609},"\u002F\u002F Start with a static value\n",[220,19071,19072,19074,19076,19078,19080,19082],{"class":222,"line":179},[220,19073,1735],{"class":260},[220,19075,1738],{"class":420},[220,19077,1741],{"class":260},[220,19079,1744],{"class":260},[220,19081,1747],{"class":226},[220,19083,1750],{"class":264},[220,19085,19086],{"class":222,"line":389},[220,19087,1765],{"class":264},[220,19089,19090,19092,19094,19096,19099,19101,19103],{"class":222,"line":399},[220,19091,1770],{"class":264},[220,19093,3206],{"class":230},[220,19095,3209],{"class":264},[220,19097,19098],{"class":230},"'c'",[220,19100,5787],{"class":264},[220,19102,6495],{"class":420},[220,19104,1782],{"class":264},[220,19106,19107],{"class":222,"line":644},[220,19108,1787],{"class":264},[220,19110,19111],{"class":222,"line":650},[220,19112,1792],{"class":264},[220,19114,19115],{"class":222,"line":656},[220,19116,647],{"emptyLinePlaceholder":194},[220,19118,19119],{"class":222,"line":673},[220,19120,19121],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,19123,19124,19126,19128,19130,19132],{"class":222,"line":682},[220,19125,9854],{"class":264},[220,19127,9857],{"class":226},[220,19129,2626],{"class":264},[220,19131,19098],{"class":230},[220,19133,10219],{"class":264},[220,19135,19136],{"class":222,"line":691},[220,19137,19138],{"class":264}," radius: {\n",[220,19140,19141,19144,19146],{"class":222,"line":696},[220,19142,19143],{"class":264}," type: ",[220,19145,15765],{"class":230},[220,19147,1760],{"class":264},[220,19149,19150,19153,19155],{"class":222,"line":702},[220,19151,19152],{"class":264}," mode: ",[220,19154,15775],{"class":230},[220,19156,1760],{"class":264},[220,19158,19159,19162,19164],{"class":222,"line":718},[220,19160,19161],{"class":264}," outputMin: ",[220,19163,15237],{"class":420},[220,19165,1760],{"class":264},[220,19167,19168,19171],{"class":222,"line":727},[220,19169,19170],{"class":264}," outputMax: ",[220,19172,19173],{"class":420},"0.7\n",[220,19175,19176],{"class":222,"line":2664},[220,19177,3256],{"class":264},[220,19179,19180],{"class":222,"line":7900},[220,19181,1792],{"class":264},[220,19183,19184],{"class":222,"line":7910},[220,19185,647],{"emptyLinePlaceholder":194},[220,19187,19188],{"class":222,"line":7921},[220,19189,19190],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,19192,19193,19195,19197,19199,19201,19204,19206],{"class":222,"line":7926},[220,19194,9854],{"class":264},[220,19196,9857],{"class":226},[220,19198,2626],{"class":264},[220,19200,19098],{"class":230},[220,19202,19203],{"class":264},", { radius: ",[220,19205,6495],{"class":420},[220,19207,9869],{"class":264},[1504,19209,13246],{},{"title":178,"searchDepth":179,"depth":179,"links":19211},[19212,19213,19214,19215,19216,19217],{"id":15622,"depth":179,"text":15622},{"id":16310,"depth":179,"text":16310},{"id":17044,"depth":179,"text":17044},{"id":17675,"depth":179,"text":17675},{"id":18564,"depth":179,"text":18565},{"id":19051,"depth":179,"text":19052},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":15559,"description":19218},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":19225,"title":19226,"body":19227,"category":8480,"description":24098,"exclude":190,"extension":191,"forceFramework":190,"icon":24099,"meta":24100,"navigation":194,"path":24101,"seo":24102,"stem":24103,"__hash__":24104},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":19228,"toc":24042},[19229,19232,19235,19255,19258,19273,19277,19293,19937,19939,19943,19951,19957,19960,19993,20021,20023,20030,20033,20100,20145,20147,20154,20157,20242,20296,20298,20305,20308,20397,20447,20449,20456,20459,20548,20598,20600,20607,20610,20662,20697,20699,20706,20709,20796,20847,20849,20856,20859,20942,20991,20993,21000,21003,21076,21119,21121,21128,21131,21215,21266,21268,21275,21278,21362,21414,21416,21420,21440,21453,21474,21585,21591,21594,21648,21701,21703,21710,21713,21827,21904,21906,21913,21916,21992,22049,22051,22058,22061,22120,22170,22172,22179,22182,22276,22342,22344,22351,22354,22429,22487,22489,22496,22506,22600,22667,22669,22676,22679,22754,22812,22814,22821,22824,22900,22958,22960,22967,22970,23066,23135,23137,23144,23150,23224,23282,23284,23291,23294,23385,23452,23454,23458,23461,23479,23598,23602,23617,23693,23702,24031,24040],[11,19230,19226],{"id":19231},"shape-sdf-effects",[19,19233],{":preset":19234,"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,19236,19237,19238,1895,19240,19243,19244,19247,19248,19251,19252,19254],{},"Several components — such as ",[159,19239,13722],{},[159,19241,19242],{},"Neon",", and ",[159,19245,19246],{},"Emboss"," — are driven by a ",[1847,19249,19250],{},"shape",". These effects accept a ",[99,19253,19250],{}," 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,19256,19257],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,19259,19260,19261,19264,19265,19268,19269,19272],{},"Shapes come in two flavours: flat ",[159,19262,19263],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,19266,19267],{},"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,19270,19271],{},"extrude"," your own SVG into a solid 3D slab.",[23,19274,19276],{"id":19275},"configuration","Configuration",[15,19278,1839,19279,19281,19282,19285,19286,17006,19289,19292],{},[99,19280,19250],{}," prop accepts a configuration object. The only required key is ",[99,19283,19284],{},"type",", which selects one of the built-in shapes, like ",[99,19287,19288],{},"circleSDF",[99,19290,19291],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,19294,19295,19369,19514,19638,19762],{":tabs":1557},[212,19296,19298],{"className":334,"code":19297,"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,19299,19300,19305,19321,19325,19330,19345,19349,19354],{"__ignoreMap":178},[220,19301,19302],{"class":222,"line":223},[220,19303,19304],{"class":609},"\u003C!-- Circle (default) -->\n",[220,19306,19307,19309,19311,19314,19316,19319],{"class":222,"line":179},[220,19308,343],{"class":264},[220,19310,13722],{"class":346},[220,19312,19313],{"class":226}," :shape",[220,19315,353],{"class":264},[220,19317,19318],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,19320,386],{"class":264},[220,19322,19323],{"class":222,"line":389},[220,19324,647],{"emptyLinePlaceholder":194},[220,19326,19327],{"class":222,"line":399},[220,19328,19329],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,19331,19332,19334,19336,19338,19340,19343],{"class":222,"line":644},[220,19333,343],{"class":264},[220,19335,19242],{"class":346},[220,19337,19313],{"class":226},[220,19339,353],{"class":264},[220,19341,19342],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,19344,386],{"class":264},[220,19346,19347],{"class":222,"line":650},[220,19348,647],{"emptyLinePlaceholder":194},[220,19350,19351],{"class":222,"line":656},[220,19352,19353],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,19355,19356,19358,19360,19362,19364,19367],{"class":222,"line":673},[220,19357,343],{"class":264},[220,19359,19246],{"class":346},[220,19361,19313],{"class":226},[220,19363,353],{"class":264},[220,19365,19366],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,19368,386],{"class":264},[212,19370,19372],{"className":409,"code":19371,"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,19373,19374,19379,19414,19418,19423,19464,19468,19473],{"__ignoreMap":178},[220,19375,19376],{"class":222,"line":223},[220,19377,19378],{"class":609},"\u002F\u002F Circle (default)\n",[220,19380,19381,19383,19385,19388,19390,19392,19395,19397,19400,19403,19406,19408,19411],{"class":222,"line":179},[220,19382,343],{"class":264},[220,19384,13722],{"class":420},[220,19386,19387],{"class":226}," shape",[220,19389,353],{"class":260},[220,19391,743],{"class":264},[220,19393,19394],{"class":420},"JSON",[220,19396,7735],{"class":264},[220,19398,19399],{"class":226},"stringify",[220,19401,19402],{"class":264},"({ type: ",[220,19404,19405],{"class":230},"\"circleSDF\"",[220,19407,4812],{"class":264},[220,19409,19410],{"class":420},"0.35",[220,19412,19413],{"class":264}," })} \u002F>\n",[220,19415,19416],{"class":222,"line":389},[220,19417,647],{"emptyLinePlaceholder":194},[220,19419,19420],{"class":222,"line":399},[220,19421,19422],{"class":609},"\u002F\u002F Six-pointed star\n",[220,19424,19425,19427,19429,19431,19433,19435,19437,19439,19441,19443,19446,19448,19450,19453,19456,19459,19462],{"class":222,"line":644},[220,19426,343],{"class":264},[220,19428,19242],{"class":420},[220,19430,19387],{"class":226},[220,19432,353],{"class":260},[220,19434,743],{"class":264},[220,19436,19394],{"class":420},[220,19438,7735],{"class":264},[220,19440,19399],{"class":226},[220,19442,19402],{"class":264},[220,19444,19445],{"class":230},"\"starSDF\"",[220,19447,4812],{"class":264},[220,19449,19410],{"class":420},[220,19451,19452],{"class":264},", sides: ",[220,19454,19455],{"class":420},"6",[220,19457,19458],{"class":264},", innerRatio: ",[220,19460,19461],{"class":420},"0.45",[220,19463,19413],{"class":264},[220,19465,19466],{"class":222,"line":650},[220,19467,647],{"emptyLinePlaceholder":194},[220,19469,19470],{"class":222,"line":656},[220,19471,19472],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,19474,19475,19477,19479,19481,19483,19485,19487,19489,19491,19493,19496,19499,19501,19503,19506,19509,19512],{"class":222,"line":673},[220,19476,343],{"class":264},[220,19478,19246],{"class":420},[220,19480,19387],{"class":226},[220,19482,353],{"class":260},[220,19484,743],{"class":264},[220,19486,19394],{"class":420},[220,19488,7735],{"class":264},[220,19490,19399],{"class":226},[220,19492,19402],{"class":264},[220,19494,19495],{"class":230},"\"roundedRectSDF\"",[220,19497,19498],{"class":264},", width: ",[220,19500,6495],{"class":420},[220,19502,811],{"class":264},[220,19504,19505],{"class":420},"0.25",[220,19507,19508],{"class":264},", rounding: ",[220,19510,19511],{"class":420},"0.06",[220,19513,19413],{"class":264},[212,19515,19516],{"className":468,"code":19371,"language":469,"meta":178,"style":178},[99,19517,19518,19522,19550,19554,19558,19594,19598,19602],{"__ignoreMap":178},[220,19519,19520],{"class":222,"line":223},[220,19521,19378],{"class":609},[220,19523,19524,19526,19528,19530,19532,19534,19536,19538,19540,19542,19544,19546,19548],{"class":222,"line":179},[220,19525,343],{"class":264},[220,19527,13722],{"class":420},[220,19529,19387],{"class":226},[220,19531,353],{"class":260},[220,19533,743],{"class":264},[220,19535,19394],{"class":420},[220,19537,7735],{"class":264},[220,19539,19399],{"class":226},[220,19541,19402],{"class":264},[220,19543,19405],{"class":230},[220,19545,4812],{"class":264},[220,19547,19410],{"class":420},[220,19549,19413],{"class":264},[220,19551,19552],{"class":222,"line":389},[220,19553,647],{"emptyLinePlaceholder":194},[220,19555,19556],{"class":222,"line":399},[220,19557,19422],{"class":609},[220,19559,19560,19562,19564,19566,19568,19570,19572,19574,19576,19578,19580,19582,19584,19586,19588,19590,19592],{"class":222,"line":644},[220,19561,343],{"class":264},[220,19563,19242],{"class":420},[220,19565,19387],{"class":226},[220,19567,353],{"class":260},[220,19569,743],{"class":264},[220,19571,19394],{"class":420},[220,19573,7735],{"class":264},[220,19575,19399],{"class":226},[220,19577,19402],{"class":264},[220,19579,19445],{"class":230},[220,19581,4812],{"class":264},[220,19583,19410],{"class":420},[220,19585,19452],{"class":264},[220,19587,19455],{"class":420},[220,19589,19458],{"class":264},[220,19591,19461],{"class":420},[220,19593,19413],{"class":264},[220,19595,19596],{"class":222,"line":650},[220,19597,647],{"emptyLinePlaceholder":194},[220,19599,19600],{"class":222,"line":656},[220,19601,19472],{"class":609},[220,19603,19604,19606,19608,19610,19612,19614,19616,19618,19620,19622,19624,19626,19628,19630,19632,19634,19636],{"class":222,"line":673},[220,19605,343],{"class":264},[220,19607,19246],{"class":420},[220,19609,19387],{"class":226},[220,19611,353],{"class":260},[220,19613,743],{"class":264},[220,19615,19394],{"class":420},[220,19617,7735],{"class":264},[220,19619,19399],{"class":226},[220,19621,19402],{"class":264},[220,19623,19495],{"class":230},[220,19625,19498],{"class":264},[220,19627,6495],{"class":420},[220,19629,811],{"class":264},[220,19631,19505],{"class":420},[220,19633,19508],{"class":264},[220,19635,19511],{"class":420},[220,19637,19413],{"class":264},[212,19639,19640],{"className":468,"code":19371,"language":469,"meta":178,"style":178},[99,19641,19642,19646,19674,19678,19682,19718,19722,19726],{"__ignoreMap":178},[220,19643,19644],{"class":222,"line":223},[220,19645,19378],{"class":609},[220,19647,19648,19650,19652,19654,19656,19658,19660,19662,19664,19666,19668,19670,19672],{"class":222,"line":179},[220,19649,343],{"class":264},[220,19651,13722],{"class":420},[220,19653,19387],{"class":226},[220,19655,353],{"class":260},[220,19657,743],{"class":264},[220,19659,19394],{"class":420},[220,19661,7735],{"class":264},[220,19663,19399],{"class":226},[220,19665,19402],{"class":264},[220,19667,19405],{"class":230},[220,19669,4812],{"class":264},[220,19671,19410],{"class":420},[220,19673,19413],{"class":264},[220,19675,19676],{"class":222,"line":389},[220,19677,647],{"emptyLinePlaceholder":194},[220,19679,19680],{"class":222,"line":399},[220,19681,19422],{"class":609},[220,19683,19684,19686,19688,19690,19692,19694,19696,19698,19700,19702,19704,19706,19708,19710,19712,19714,19716],{"class":222,"line":644},[220,19685,343],{"class":264},[220,19687,19242],{"class":420},[220,19689,19387],{"class":226},[220,19691,353],{"class":260},[220,19693,743],{"class":264},[220,19695,19394],{"class":420},[220,19697,7735],{"class":264},[220,19699,19399],{"class":226},[220,19701,19402],{"class":264},[220,19703,19445],{"class":230},[220,19705,4812],{"class":264},[220,19707,19410],{"class":420},[220,19709,19452],{"class":264},[220,19711,19455],{"class":420},[220,19713,19458],{"class":264},[220,19715,19461],{"class":420},[220,19717,19413],{"class":264},[220,19719,19720],{"class":222,"line":650},[220,19721,647],{"emptyLinePlaceholder":194},[220,19723,19724],{"class":222,"line":656},[220,19725,19472],{"class":609},[220,19727,19728,19730,19732,19734,19736,19738,19740,19742,19744,19746,19748,19750,19752,19754,19756,19758,19760],{"class":222,"line":673},[220,19729,343],{"class":264},[220,19731,19246],{"class":420},[220,19733,19387],{"class":226},[220,19735,353],{"class":260},[220,19737,743],{"class":264},[220,19739,19394],{"class":420},[220,19741,7735],{"class":264},[220,19743,19399],{"class":226},[220,19745,19402],{"class":264},[220,19747,19495],{"class":230},[220,19749,19498],{"class":264},[220,19751,6495],{"class":420},[220,19753,811],{"class":264},[220,19755,19505],{"class":420},[220,19757,19508],{"class":264},[220,19759,19511],{"class":420},[220,19761,19413],{"class":264},[212,19763,19765],{"className":251,"code":19764,"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,19766,19767,19771,19785,19789,19809,19813,19817,19821,19825,19839,19843,19869,19873,19877,19881,19885,19899,19903,19929,19933],{"__ignoreMap":178},[220,19768,19769],{"class":222,"line":223},[220,19770,19378],{"class":609},[220,19772,19773,19775,19777,19779,19781,19783],{"class":222,"line":179},[220,19774,1735],{"class":260},[220,19776,1738],{"class":420},[220,19778,1741],{"class":260},[220,19780,1744],{"class":260},[220,19782,1747],{"class":226},[220,19784,1750],{"class":264},[220,19786,19787],{"class":222,"line":389},[220,19788,1765],{"class":264},[220,19790,19791,19793,19796,19799,19802,19804,19806],{"class":222,"line":399},[220,19792,1770],{"class":264},[220,19794,19795],{"class":230},"'Glass'",[220,19797,19798],{"class":264},", props: { shape: { type: ",[220,19800,19801],{"class":230},"'circleSDF'",[220,19803,4812],{"class":264},[220,19805,19410],{"class":420},[220,19807,19808],{"class":264}," } } }\n",[220,19810,19811],{"class":222,"line":644},[220,19812,1787],{"class":264},[220,19814,19815],{"class":222,"line":650},[220,19816,1792],{"class":264},[220,19818,19819],{"class":222,"line":656},[220,19820,647],{"emptyLinePlaceholder":194},[220,19822,19823],{"class":222,"line":673},[220,19824,19422],{"class":609},[220,19826,19827,19829,19831,19833,19835,19837],{"class":222,"line":682},[220,19828,1735],{"class":260},[220,19830,1738],{"class":420},[220,19832,1741],{"class":260},[220,19834,1744],{"class":260},[220,19836,1747],{"class":226},[220,19838,1750],{"class":264},[220,19840,19841],{"class":222,"line":691},[220,19842,1765],{"class":264},[220,19844,19845,19847,19850,19852,19855,19857,19859,19861,19863,19865,19867],{"class":222,"line":696},[220,19846,1770],{"class":264},[220,19848,19849],{"class":230},"'Neon'",[220,19851,19798],{"class":264},[220,19853,19854],{"class":230},"'starSDF'",[220,19856,4812],{"class":264},[220,19858,19410],{"class":420},[220,19860,19452],{"class":264},[220,19862,19455],{"class":420},[220,19864,19458],{"class":264},[220,19866,19461],{"class":420},[220,19868,19808],{"class":264},[220,19870,19871],{"class":222,"line":702},[220,19872,1787],{"class":264},[220,19874,19875],{"class":222,"line":718},[220,19876,1792],{"class":264},[220,19878,19879],{"class":222,"line":727},[220,19880,647],{"emptyLinePlaceholder":194},[220,19882,19883],{"class":222,"line":2664},[220,19884,19472],{"class":609},[220,19886,19887,19889,19891,19893,19895,19897],{"class":222,"line":7900},[220,19888,1735],{"class":260},[220,19890,1738],{"class":420},[220,19892,1741],{"class":260},[220,19894,1744],{"class":260},[220,19896,1747],{"class":226},[220,19898,1750],{"class":264},[220,19900,19901],{"class":222,"line":7910},[220,19902,1765],{"class":264},[220,19904,19905,19907,19910,19912,19915,19917,19919,19921,19923,19925,19927],{"class":222,"line":7921},[220,19906,1770],{"class":264},[220,19908,19909],{"class":230},"'Emboss'",[220,19911,19798],{"class":264},[220,19913,19914],{"class":230},"'roundedRectSDF'",[220,19916,19498],{"class":264},[220,19918,6495],{"class":420},[220,19920,811],{"class":264},[220,19922,19505],{"class":420},[220,19924,19508],{"class":264},[220,19926,19511],{"class":420},[220,19928,19808],{"class":264},[220,19930,19931],{"class":222,"line":7926},[220,19932,1787],{"class":264},[220,19934,19935],{"class":222,"line":9249},[220,19936,1792],{"class":264},[3384,19938],{},[23,19940,19942],{"id":19941},"_2d-shapes","2D shapes",[15,19944,19945,19946,13668,19948,19950],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,19947,6919],{},[99,19949,6000],{}," from the centre to an edge), and rotations are in degrees.",[3262,19952,19954,19955],{"id":19953},"circle-circlesdf","Circle — ",[99,19956,19288],{},[15,19958,19959],{},"A perfect circle. The default shape for all shape effects.",[1794,19961,19962,19974],{},[1797,19963,19964],{},[1800,19965,19966,19968,19970,19972],{},[1803,19967,16175],{},[1803,19969,13442],{},[1803,19971,13445],{},[1803,19973,1808],{},[1810,19975,19976],{},[1800,19977,19978,19982,19986,19990],{},[1815,19979,19980],{},[99,19981,9935],{},[1815,19983,19984],{},[99,19985,13555],{},[1815,19987,19988],{},[99,19989,19410],{},[1815,19991,19992],{},"Circle radius in UV space",[212,19994,19996],{"className":3439,"code":19995,"language":3441,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,19997,19998],{"__ignoreMap":178},[220,19999,20000,20003,20006,20008,20010,20012,20015,20017,20019],{"class":222,"line":223},[220,20001,20002],{"class":264},"{ ",[220,20004,20005],{"class":420},"\"type\"",[220,20007,3476],{"class":264},[220,20009,19405],{"class":230},[220,20011,1895],{"class":264},[220,20013,20014],{"class":420},"\"radius\"",[220,20016,3476],{"class":264},[220,20018,19410],{"class":420},[220,20020,18302],{"class":264},[3384,20022],{},[3262,20024,20026,20027],{"id":20025},"ellipse-ellipsesdf","Ellipse — ",[99,20028,20029],{},"ellipseSDF",[15,20031,20032],{},"A stretched circle with independent horizontal and vertical radii.",[1794,20034,20035,20047],{},[1797,20036,20037],{},[1800,20038,20039,20041,20043,20045],{},[1803,20040,16175],{},[1803,20042,13442],{},[1803,20044,13445],{},[1803,20046,1808],{},[1810,20048,20049,20066,20083],{},[1800,20050,20051,20055,20059,20063],{},[1815,20052,20053],{},[99,20054,13419],{},[1815,20056,20057],{},[99,20058,13555],{},[1815,20060,20061],{},[99,20062,6495],{},[1815,20064,20065],{},"Horizontal radius (semi-major axis)",[1800,20067,20068,20072,20076,20080],{},[1815,20069,20070],{},[99,20071,13422],{},[1815,20073,20074],{},[99,20075,13555],{},[1815,20077,20078],{},[99,20079,19505],{},[1815,20081,20082],{},"Vertical radius (semi-minor axis)",[1800,20084,20085,20089,20093,20097],{},[1815,20086,20087],{},[99,20088,10087],{},[1815,20090,20091],{},[99,20092,13555],{},[1815,20094,20095],{},[99,20096,6919],{},[1815,20098,20099],{},"Rotation in degrees",[212,20101,20103],{"className":3439,"code":20102,"language":3441,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,20104,20105],{"__ignoreMap":178},[220,20106,20107,20109,20111,20113,20116,20118,20121,20123,20125,20127,20130,20132,20134,20136,20139,20141,20143],{"class":222,"line":223},[220,20108,20002],{"class":264},[220,20110,20005],{"class":420},[220,20112,3476],{"class":264},[220,20114,20115],{"class":230},"\"ellipseSDF\"",[220,20117,1895],{"class":264},[220,20119,20120],{"class":420},"\"width\"",[220,20122,3476],{"class":264},[220,20124,6495],{"class":420},[220,20126,1895],{"class":264},[220,20128,20129],{"class":420},"\"height\"",[220,20131,3476],{"class":264},[220,20133,19505],{"class":420},[220,20135,1895],{"class":264},[220,20137,20138],{"class":420},"\"rotation\"",[220,20140,3476],{"class":264},[220,20142,6919],{"class":420},[220,20144,18302],{"class":264},[3384,20146],{},[3262,20148,20150,20151],{"id":20149},"polygon-polygonsdf","Polygon — ",[99,20152,20153],{},"polygonSDF",[15,20155,20156],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,20158,20159,20171],{},[1797,20160,20161],{},[1800,20162,20163,20165,20167,20169],{},[1803,20164,16175],{},[1803,20166,13442],{},[1803,20168,13445],{},[1803,20170,1808],{},[1810,20172,20173,20190,20208,20226],{},[1800,20174,20175,20179,20183,20187],{},[1815,20176,20177],{},[99,20178,9935],{},[1815,20180,20181],{},[99,20182,13555],{},[1815,20184,20185],{},[99,20186,19410],{},[1815,20188,20189],{},"Distance from center to nearest edge midpoint",[1800,20191,20192,20197,20201,20205],{},[1815,20193,20194],{},[99,20195,20196],{},"sides",[1815,20198,20199],{},[99,20200,13555],{},[1815,20202,20203],{},[99,20204,19455],{},[1815,20206,20207],{},"Number of sides",[1800,20209,20210,20215,20219,20223],{},[1815,20211,20212],{},[99,20213,20214],{},"rounding",[1815,20216,20217],{},[99,20218,13555],{},[1815,20220,20221],{},[99,20222,6919],{},[1815,20224,20225],{},"Corner rounding amount",[1800,20227,20228,20232,20236,20240],{},[1815,20229,20230],{},[99,20231,10087],{},[1815,20233,20234],{},[99,20235,13555],{},[1815,20237,20238],{},[99,20239,6919],{},[1815,20241,20099],{},[212,20243,20245],{"className":3439,"code":20244,"language":3441,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,20246,20247],{"__ignoreMap":178},[220,20248,20249,20251,20253,20255,20258,20260,20262,20264,20267,20269,20272,20274,20276,20278,20281,20283,20286,20288,20290,20292,20294],{"class":222,"line":223},[220,20250,20002],{"class":264},[220,20252,20005],{"class":420},[220,20254,3476],{"class":264},[220,20256,20257],{"class":230},"\"polygonSDF\"",[220,20259,1895],{"class":264},[220,20261,20014],{"class":420},[220,20263,3476],{"class":264},[220,20265,20266],{"class":420},"0.3",[220,20268,1895],{"class":264},[220,20270,20271],{"class":420},"\"sides\"",[220,20273,3476],{"class":264},[220,20275,19455],{"class":420},[220,20277,1895],{"class":264},[220,20279,20280],{"class":420},"\"rounding\"",[220,20282,3476],{"class":264},[220,20284,20285],{"class":420},"0.05",[220,20287,1895],{"class":264},[220,20289,20138],{"class":420},[220,20291,3476],{"class":264},[220,20293,6919],{"class":420},[220,20295,18302],{"class":264},[3384,20297],{},[3262,20299,20301,20302],{"id":20300},"star-starsdf","Star — ",[99,20303,20304],{},"starSDF",[15,20306,20307],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,20309,20310,20322],{},[1797,20311,20312],{},[1800,20313,20314,20316,20318,20320],{},[1803,20315,16175],{},[1803,20317,13442],{},[1803,20319,13445],{},[1803,20321,1808],{},[1810,20323,20324,20341,20359,20381],{},[1800,20325,20326,20330,20334,20338],{},[1815,20327,20328],{},[99,20329,9935],{},[1815,20331,20332],{},[99,20333,13555],{},[1815,20335,20336],{},[99,20337,19410],{},[1815,20339,20340],{},"Outer tip radius",[1800,20342,20343,20347,20351,20356],{},[1815,20344,20345],{},[99,20346,20196],{},[1815,20348,20349],{},[99,20350,13555],{},[1815,20352,20353],{},[99,20354,20355],{},"5",[1815,20357,20358],{},"Number of points",[1800,20360,20361,20366,20370,20375],{},[1815,20362,20363],{},[99,20364,20365],{},"innerRatio",[1815,20367,20368],{},[99,20369,13555],{},[1815,20371,20372],{},[99,20373,20374],{},"0.382",[1815,20376,20377,20378,20380],{},"Inner vertex radius as a fraction of outer radius — ",[99,20379,20374],{}," gives the classic golden-ratio 5-star",[1800,20382,20383,20387,20391,20395],{},[1815,20384,20385],{},[99,20386,10087],{},[1815,20388,20389],{},[99,20390,13555],{},[1815,20392,20393],{},[99,20394,6919],{},[1815,20396,20099],{},[212,20398,20400],{"className":3439,"code":20399,"language":3441,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,20401,20402],{"__ignoreMap":178},[220,20403,20404,20406,20408,20410,20412,20414,20416,20418,20420,20422,20424,20426,20428,20430,20433,20435,20437,20439,20441,20443,20445],{"class":222,"line":223},[220,20405,20002],{"class":264},[220,20407,20005],{"class":420},[220,20409,3476],{"class":264},[220,20411,19445],{"class":230},[220,20413,1895],{"class":264},[220,20415,20014],{"class":420},[220,20417,3476],{"class":264},[220,20419,19410],{"class":420},[220,20421,1895],{"class":264},[220,20423,20271],{"class":420},[220,20425,3476],{"class":264},[220,20427,20355],{"class":420},[220,20429,1895],{"class":264},[220,20431,20432],{"class":420},"\"innerRatio\"",[220,20434,3476],{"class":264},[220,20436,20374],{"class":420},[220,20438,1895],{"class":264},[220,20440,20138],{"class":420},[220,20442,3476],{"class":264},[220,20444,6919],{"class":420},[220,20446,18302],{"class":264},[3384,20448],{},[3262,20450,20452,20453],{"id":20451},"flower-flowersdf","Flower — ",[99,20454,20455],{},"flowerSDF",[15,20457,20458],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,20460,20461,20473],{},[1797,20462,20463],{},[1800,20464,20465,20467,20469,20471],{},[1803,20466,16175],{},[1803,20468,13442],{},[1803,20470,13445],{},[1803,20472,1808],{},[1810,20474,20475,20492,20509,20532],{},[1800,20476,20477,20481,20485,20489],{},[1815,20478,20479],{},[99,20480,9935],{},[1815,20482,20483],{},[99,20484,13555],{},[1815,20486,20487],{},[99,20488,19410],{},[1815,20490,20491],{},"Outer petal tip radius",[1800,20493,20494,20498,20502,20506],{},[1815,20495,20496],{},[99,20497,20196],{},[1815,20499,20500],{},[99,20501,13555],{},[1815,20503,20504],{},[99,20505,19455],{},[1815,20507,20508],{},"Number of petals",[1800,20510,20511,20515,20519,20523],{},[1815,20512,20513],{},[99,20514,20365],{},[1815,20516,20517],{},[99,20518,13555],{},[1815,20520,20521],{},[99,20522,6000],{},[1815,20524,20525,20526,20528,20529,20531],{},"Valley depth — ",[99,20527,15237],{}," = deep narrow valleys, ",[99,20530,4545],{}," = subtle scalloped edge",[1800,20533,20534,20538,20542,20546],{},[1815,20535,20536],{},[99,20537,10087],{},[1815,20539,20540],{},[99,20541,13555],{},[1815,20543,20544],{},[99,20545,6919],{},[1815,20547,20099],{},[212,20549,20551],{"className":3439,"code":20550,"language":3441,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,20552,20553],{"__ignoreMap":178},[220,20554,20555,20557,20559,20561,20564,20566,20568,20570,20572,20574,20576,20578,20580,20582,20584,20586,20588,20590,20592,20594,20596],{"class":222,"line":223},[220,20556,20002],{"class":264},[220,20558,20005],{"class":420},[220,20560,3476],{"class":264},[220,20562,20563],{"class":230},"\"flowerSDF\"",[220,20565,1895],{"class":264},[220,20567,20014],{"class":420},[220,20569,3476],{"class":264},[220,20571,19410],{"class":420},[220,20573,1895],{"class":264},[220,20575,20271],{"class":420},[220,20577,3476],{"class":264},[220,20579,19455],{"class":420},[220,20581,1895],{"class":264},[220,20583,20432],{"class":420},[220,20585,3476],{"class":264},[220,20587,6000],{"class":420},[220,20589,1895],{"class":264},[220,20591,20138],{"class":420},[220,20593,3476],{"class":264},[220,20595,6919],{"class":420},[220,20597,18302],{"class":264},[3384,20599],{},[3262,20601,20603,20604],{"id":20602},"ring-ringsdf","Ring — ",[99,20605,20606],{},"ringSDF",[15,20608,20609],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,20611,20612,20624],{},[1797,20613,20614],{},[1800,20615,20616,20618,20620,20622],{},[1803,20617,16175],{},[1803,20619,13442],{},[1803,20621,13445],{},[1803,20623,1808],{},[1810,20625,20626,20643],{},[1800,20627,20628,20632,20636,20640],{},[1815,20629,20630],{},[99,20631,9935],{},[1815,20633,20634],{},[99,20635,13555],{},[1815,20637,20638],{},[99,20639,20266],{},[1815,20641,20642],{},"Distance from center to the ring centerline",[1800,20644,20645,20650,20654,20659],{},[1815,20646,20647],{},[99,20648,20649],{},"thickness",[1815,20651,20652],{},[99,20653,13555],{},[1815,20655,20656],{},[99,20657,20658],{},"0.08",[1815,20660,20661],{},"Half-width of the ring on each side of the centerline",[212,20663,20665],{"className":3439,"code":20664,"language":3441,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,20666,20667],{"__ignoreMap":178},[220,20668,20669,20671,20673,20675,20678,20680,20682,20684,20686,20688,20691,20693,20695],{"class":222,"line":223},[220,20670,20002],{"class":264},[220,20672,20005],{"class":420},[220,20674,3476],{"class":264},[220,20676,20677],{"class":230},"\"ringSDF\"",[220,20679,1895],{"class":264},[220,20681,20014],{"class":420},[220,20683,3476],{"class":264},[220,20685,20266],{"class":420},[220,20687,1895],{"class":264},[220,20689,20690],{"class":420},"\"thickness\"",[220,20692,3476],{"class":264},[220,20694,20658],{"class":420},[220,20696,18302],{"class":264},[3384,20698],{},[3262,20700,20702,20703],{"id":20701},"cross-crosssdf","Cross — ",[99,20704,20705],{},"crossSDF",[15,20707,20708],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,20710,20711,20723],{},[1797,20712,20713],{},[1800,20714,20715,20717,20719,20721],{},[1803,20716,16175],{},[1803,20718,13442],{},[1803,20720,13445],{},[1803,20722,1808],{},[1810,20724,20725,20742,20759,20776],{},[1800,20726,20727,20731,20735,20739],{},[1815,20728,20729],{},[99,20730,9943],{},[1815,20732,20733],{},[99,20734,13555],{},[1815,20736,20737],{},[99,20738,19505],{},[1815,20740,20741],{},"Arm half-length",[1800,20743,20744,20748,20752,20756],{},[1815,20745,20746],{},[99,20747,20649],{},[1815,20749,20750],{},[99,20751,13555],{},[1815,20753,20754],{},[99,20755,20658],{},[1815,20757,20758],{},"Arm half-width",[1800,20760,20761,20765,20769,20773],{},[1815,20762,20763],{},[99,20764,20214],{},[1815,20766,20767],{},[99,20768,13555],{},[1815,20770,20771],{},[99,20772,17945],{},[1815,20774,20775],{},"Corner rounding at arm ends and intersections",[1800,20777,20778,20782,20786,20790],{},[1815,20779,20780],{},[99,20781,10087],{},[1815,20783,20784],{},[99,20785,13555],{},[1815,20787,20788],{},[99,20789,6919],{},[1815,20791,20792,20793,20795],{},"Rotation in degrees — use ",[99,20794,1295],{}," for an X shape",[212,20797,20799],{"className":3439,"code":20798,"language":3441,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,20800,20801],{"__ignoreMap":178},[220,20802,20803,20805,20807,20809,20812,20814,20817,20819,20821,20823,20825,20827,20829,20831,20833,20835,20837,20839,20841,20843,20845],{"class":222,"line":223},[220,20804,20002],{"class":264},[220,20806,20005],{"class":420},[220,20808,3476],{"class":264},[220,20810,20811],{"class":230},"\"crossSDF\"",[220,20813,1895],{"class":264},[220,20815,20816],{"class":420},"\"size\"",[220,20818,3476],{"class":264},[220,20820,19505],{"class":420},[220,20822,1895],{"class":264},[220,20824,20690],{"class":420},[220,20826,3476],{"class":264},[220,20828,20658],{"class":420},[220,20830,1895],{"class":264},[220,20832,20280],{"class":420},[220,20834,3476],{"class":264},[220,20836,17945],{"class":420},[220,20838,1895],{"class":264},[220,20840,20138],{"class":420},[220,20842,3476],{"class":264},[220,20844,6919],{"class":420},[220,20846,18302],{"class":264},[3384,20848],{},[3262,20850,20852,20853],{"id":20851},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,20854,20855],{},"roundedRectSDF",[15,20857,20858],{},"A rectangle with uniformly rounded corners.",[1794,20860,20861,20873],{},[1797,20862,20863],{},[1800,20864,20865,20867,20869,20871],{},[1803,20866,16175],{},[1803,20868,13442],{},[1803,20870,13445],{},[1803,20872,1808],{},[1810,20874,20875,20892,20909,20926],{},[1800,20876,20877,20881,20885,20889],{},[1815,20878,20879],{},[99,20880,13419],{},[1815,20882,20883],{},[99,20884,13555],{},[1815,20886,20887],{},[99,20888,19410],{},[1815,20890,20891],{},"Half-width",[1800,20893,20894,20898,20902,20906],{},[1815,20895,20896],{},[99,20897,13422],{},[1815,20899,20900],{},[99,20901,13555],{},[1815,20903,20904],{},[99,20905,19505],{},[1815,20907,20908],{},"Half-height",[1800,20910,20911,20915,20919,20923],{},[1815,20912,20913],{},[99,20914,20214],{},[1815,20916,20917],{},[99,20918,13555],{},[1815,20920,20921],{},[99,20922,20285],{},[1815,20924,20925],{},"Corner rounding radius",[1800,20927,20928,20932,20936,20940],{},[1815,20929,20930],{},[99,20931,10087],{},[1815,20933,20934],{},[99,20935,13555],{},[1815,20937,20938],{},[99,20939,6919],{},[1815,20941,20099],{},[212,20943,20945],{"className":3439,"code":20944,"language":3441,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,20946,20947],{"__ignoreMap":178},[220,20948,20949,20951,20953,20955,20957,20959,20961,20963,20965,20967,20969,20971,20973,20975,20977,20979,20981,20983,20985,20987,20989],{"class":222,"line":223},[220,20950,20002],{"class":264},[220,20952,20005],{"class":420},[220,20954,3476],{"class":264},[220,20956,19495],{"class":230},[220,20958,1895],{"class":264},[220,20960,20120],{"class":420},[220,20962,3476],{"class":264},[220,20964,19410],{"class":420},[220,20966,1895],{"class":264},[220,20968,20129],{"class":420},[220,20970,3476],{"class":264},[220,20972,19505],{"class":420},[220,20974,1895],{"class":264},[220,20976,20280],{"class":420},[220,20978,3476],{"class":264},[220,20980,20285],{"class":420},[220,20982,1895],{"class":264},[220,20984,20138],{"class":420},[220,20986,3476],{"class":264},[220,20988,6919],{"class":420},[220,20990,18302],{"class":264},[3384,20992],{},[3262,20994,20996,20997],{"id":20995},"vesica-vesicasdf","Vesica — ",[99,20998,20999],{},"vesicaSDF",[15,21001,21002],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,21004,21005,21017],{},[1797,21006,21007],{},[1800,21008,21009,21011,21013,21015],{},[1803,21010,16175],{},[1803,21012,13442],{},[1803,21014,13445],{},[1803,21016,1808],{},[1810,21018,21019,21036,21060],{},[1800,21020,21021,21025,21029,21033],{},[1815,21022,21023],{},[99,21024,9935],{},[1815,21026,21027],{},[99,21028,13555],{},[1815,21030,21031],{},[99,21032,19410],{},[1815,21034,21035],{},"Radius of each circle",[1800,21037,21038,21043,21047,21051],{},[1815,21039,21040],{},[99,21041,21042],{},"spread",[1815,21044,21045],{},[99,21046,13555],{},[1815,21048,21049],{},[99,21050,6000],{},[1815,21052,21053,21054,21056,21057,21059],{},"Half-distance between circle centers as a fraction of radius — ",[99,21055,6919],{}," = a single circle, ",[99,21058,6923],{}," = an infinitely thin lens",[1800,21061,21062,21066,21070,21074],{},[1815,21063,21064],{},[99,21065,10087],{},[1815,21067,21068],{},[99,21069,13555],{},[1815,21071,21072],{},[99,21073,6919],{},[1815,21075,20099],{},[212,21077,21079],{"className":3439,"code":21078,"language":3441,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,21080,21081],{"__ignoreMap":178},[220,21082,21083,21085,21087,21089,21092,21094,21096,21098,21100,21102,21105,21107,21109,21111,21113,21115,21117],{"class":222,"line":223},[220,21084,20002],{"class":264},[220,21086,20005],{"class":420},[220,21088,3476],{"class":264},[220,21090,21091],{"class":230},"\"vesicaSDF\"",[220,21093,1895],{"class":264},[220,21095,20014],{"class":420},[220,21097,3476],{"class":264},[220,21099,19410],{"class":420},[220,21101,1895],{"class":264},[220,21103,21104],{"class":420},"\"spread\"",[220,21106,3476],{"class":264},[220,21108,6000],{"class":420},[220,21110,1895],{"class":264},[220,21112,20138],{"class":420},[220,21114,3476],{"class":264},[220,21116,6919],{"class":420},[220,21118,18302],{"class":264},[3384,21120],{},[3262,21122,21124,21125],{"id":21123},"crescent-crescentsdf","Crescent — ",[99,21126,21127],{},"crescentSDF",[15,21129,21130],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,21132,21133,21145],{},[1797,21134,21135],{},[1800,21136,21137,21139,21141,21143],{},[1803,21138,16175],{},[1803,21140,13442],{},[1803,21142,13445],{},[1803,21144,1808],{},[1810,21146,21147,21164,21182,21199],{},[1800,21148,21149,21153,21157,21161],{},[1815,21150,21151],{},[99,21152,9935],{},[1815,21154,21155],{},[99,21156,13555],{},[1815,21158,21159],{},[99,21160,19410],{},[1815,21162,21163],{},"Outer circle radius",[1800,21165,21166,21170,21174,21179],{},[1815,21167,21168],{},[99,21169,20365],{},[1815,21171,21172],{},[99,21173,13555],{},[1815,21175,21176],{},[99,21177,21178],{},"0.75",[1815,21180,21181],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,21183,21184,21188,21192,21196],{},[1815,21185,21186],{},[99,21187,16325],{},[1815,21189,21190],{},[99,21191,13555],{},[1815,21193,21194],{},[99,21195,16453],{},[1815,21197,21198],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,21200,21201,21205,21209,21213],{},[1815,21202,21203],{},[99,21204,10087],{},[1815,21206,21207],{},[99,21208,13555],{},[1815,21210,21211],{},[99,21212,6919],{},[1815,21214,20099],{},[212,21216,21218],{"className":3439,"code":21217,"language":3441,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,21219,21220],{"__ignoreMap":178},[220,21221,21222,21224,21226,21228,21231,21233,21235,21237,21239,21241,21243,21245,21247,21249,21252,21254,21256,21258,21260,21262,21264],{"class":222,"line":223},[220,21223,20002],{"class":264},[220,21225,20005],{"class":420},[220,21227,3476],{"class":264},[220,21229,21230],{"class":230},"\"crescentSDF\"",[220,21232,1895],{"class":264},[220,21234,20014],{"class":420},[220,21236,3476],{"class":264},[220,21238,19410],{"class":420},[220,21240,1895],{"class":264},[220,21242,20432],{"class":420},[220,21244,3476],{"class":264},[220,21246,21178],{"class":420},[220,21248,1895],{"class":264},[220,21250,21251],{"class":420},"\"offset\"",[220,21253,3476],{"class":264},[220,21255,16453],{"class":420},[220,21257,1895],{"class":264},[220,21259,20138],{"class":420},[220,21261,3476],{"class":264},[220,21263,6919],{"class":420},[220,21265,18302],{"class":264},[3384,21267],{},[3262,21269,21271,21272],{"id":21270},"trapezoid-trapezoidsdf","Trapezoid — ",[99,21273,21274],{},"trapezoidSDF",[15,21276,21277],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,21279,21280,21292],{},[1797,21281,21282],{},[1800,21283,21284,21286,21288,21290],{},[1803,21285,16175],{},[1803,21287,13442],{},[1803,21289,13445],{},[1803,21291,1808],{},[1810,21293,21294,21312,21330,21346],{},[1800,21295,21296,21301,21305,21309],{},[1815,21297,21298],{},[99,21299,21300],{},"bottomWidth",[1815,21302,21303],{},[99,21304,13555],{},[1815,21306,21307],{},[99,21308,19410],{},[1815,21310,21311],{},"Bottom edge half-width",[1800,21313,21314,21319,21323,21327],{},[1815,21315,21316],{},[99,21317,21318],{},"topWidth",[1815,21320,21321],{},[99,21322,13555],{},[1815,21324,21325],{},[99,21326,15237],{},[1815,21328,21329],{},"Top edge half-width",[1800,21331,21332,21336,21340,21344],{},[1815,21333,21334],{},[99,21335,13422],{},[1815,21337,21338],{},[99,21339,13555],{},[1815,21341,21342],{},[99,21343,19505],{},[1815,21345,20908],{},[1800,21347,21348,21352,21356,21360],{},[1815,21349,21350],{},[99,21351,10087],{},[1815,21353,21354],{},[99,21355,13555],{},[1815,21357,21358],{},[99,21359,6919],{},[1815,21361,20099],{},[212,21363,21365],{"className":3439,"code":21364,"language":3441,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,21366,21367],{"__ignoreMap":178},[220,21368,21369,21371,21373,21375,21378,21380,21383,21385,21387,21389,21392,21394,21396,21398,21400,21402,21404,21406,21408,21410,21412],{"class":222,"line":223},[220,21370,20002],{"class":264},[220,21372,20005],{"class":420},[220,21374,3476],{"class":264},[220,21376,21377],{"class":230},"\"trapezoidSDF\"",[220,21379,1895],{"class":264},[220,21381,21382],{"class":420},"\"bottomWidth\"",[220,21384,3476],{"class":264},[220,21386,19410],{"class":420},[220,21388,1895],{"class":264},[220,21390,21391],{"class":420},"\"topWidth\"",[220,21393,3476],{"class":264},[220,21395,15237],{"class":420},[220,21397,1895],{"class":264},[220,21399,20129],{"class":420},[220,21401,3476],{"class":264},[220,21403,19505],{"class":420},[220,21405,1895],{"class":264},[220,21407,20138],{"class":420},[220,21409,3476],{"class":264},[220,21411,6919],{"class":420},[220,21413,18302],{"class":264},[3384,21415],{},[23,21417,21419],{"id":21418},"_3d-shapes","3D shapes",[15,21421,21422,21423,1895,21425,1895,21427,1895,21429,19243,21432,21435,21436,21439],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,21424,13722],{},[159,21426,19242],{},[159,21428,19246],{},[159,21430,21431],{},"ThinFilm",[159,21433,21434],{},"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,21437,21438],{},"SmokeFill"," treats every shape as a flat fill.)",[15,21441,21442,21443,1895,21446,19243,21449,21452],{},"Every 3D shape is positioned with three independent rotations — ",[99,21444,21445],{},"rotX",[99,21447,21448],{},"rotY",[99,21450,21451],{},"rotZ"," — given in degrees. All sizes are in UV space.",[14061,21454,21455],{},[15,21456,21457,21460,21461,21464,21465,21467,21468,21470,21471,21473],{},[159,21458,21459],{},"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,21462,21463],{},"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,21466,21448],{}," is a turntable spin (left\u002Fright), ",[99,21469,21445],{}," tips the shape toward or away from you, and ",[99,21472,21451],{}," rolls it in the screen plane.",[14061,21475,21476,21496],{},[15,21477,21478,21481,21482,21485,21486,21488,21489,1550,21492,21495],{},[159,21479,21480],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,21483,21484],{"href":15533},"dynamic prop"," instead of a number. Set a rotation to an ",[99,21487,15622],{}," config looping from ",[99,21490,21491],{},"-180",[99,21493,21494],{},"180"," for a continuous spin, with no animation code:",[212,21497,21499],{"className":3439,"code":21498,"language":3441,"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,21500,21501,21531],{"__ignoreMap":178},[220,21502,21503,21505,21507,21509,21512,21514,21516,21518,21520,21522,21525,21527,21529],{"class":222,"line":223},[220,21504,20002],{"class":264},[220,21506,20005],{"class":420},[220,21508,3476],{"class":264},[220,21510,21511],{"class":230},"\"torus3D\"",[220,21513,1895],{"class":264},[220,21515,20014],{"class":420},[220,21517,3476],{"class":264},[220,21519,20266],{"class":420},[220,21521,1895],{"class":264},[220,21523,21524],{"class":420},"\"tube\"",[220,21526,3476],{"class":264},[220,21528,16481],{"class":420},[220,21530,1760],{"class":264},[220,21532,21533,21536,21539,21541,21543,21546,21548,21551,21553,21556,21558,21561,21563,21565,21567,21570,21572,21574,21576,21579,21581,21583],{"class":222,"line":179},[220,21534,21535],{"class":420}," \"rotY\"",[220,21537,21538],{"class":264},": { ",[220,21540,20005],{"class":420},[220,21542,3476],{"class":264},[220,21544,21545],{"class":230},"\"auto-animate\"",[220,21547,1895],{"class":264},[220,21549,21550],{"class":420},"\"mode\"",[220,21552,3476],{"class":264},[220,21554,21555],{"class":230},"\"loop\"",[220,21557,1895],{"class":264},[220,21559,21560],{"class":420},"\"outputMin\"",[220,21562,3476],{"class":264},[220,21564,21491],{"class":420},[220,21566,1895],{"class":264},[220,21568,21569],{"class":420},"\"outputMax\"",[220,21571,3476],{"class":264},[220,21573,21494],{"class":420},[220,21575,1895],{"class":264},[220,21577,21578],{"class":420},"\"speed\"",[220,21580,3476],{"class":264},[220,21582,6000],{"class":420},[220,21584,1782],{"class":264},[3262,21586,21588,21589],{"id":21587},"sphere-sphere3d","Sphere — ",[99,21590,19291],{},[15,21592,21593],{},"A perfect sphere.",[1794,21595,21596,21608],{},[1797,21597,21598],{},[1800,21599,21600,21602,21604,21606],{},[1803,21601,16175],{},[1803,21603,13442],{},[1803,21605,13445],{},[1803,21607,1808],{},[1810,21609,21610,21627],{},[1800,21611,21612,21616,21620,21624],{},[1815,21613,21614],{},[99,21615,9935],{},[1815,21617,21618],{},[99,21619,13555],{},[1815,21621,21622],{},[99,21623,19410],{},[1815,21625,21626],{},"Sphere radius",[1800,21628,21629,21637,21641,21645],{},[1815,21630,21631,13968,21633,13968,21635],{},[99,21632,21445],{},[99,21634,21448],{},[99,21636,21451],{},[1815,21638,21639],{},[99,21640,13555],{},[1815,21642,21643],{},[99,21644,6919],{},[1815,21646,21647],{},"Rotation around each axis, in degrees",[212,21649,21651],{"className":3439,"code":21650,"language":3441,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,21652,21653],{"__ignoreMap":178},[220,21654,21655,21657,21659,21661,21664,21666,21668,21670,21672,21674,21677,21679,21681,21683,21686,21688,21690,21692,21695,21697,21699],{"class":222,"line":223},[220,21656,20002],{"class":264},[220,21658,20005],{"class":420},[220,21660,3476],{"class":264},[220,21662,21663],{"class":230},"\"sphere3D\"",[220,21665,1895],{"class":264},[220,21667,20014],{"class":420},[220,21669,3476],{"class":264},[220,21671,19410],{"class":420},[220,21673,1895],{"class":264},[220,21675,21676],{"class":420},"\"rotX\"",[220,21678,3476],{"class":264},[220,21680,6919],{"class":420},[220,21682,1895],{"class":264},[220,21684,21685],{"class":420},"\"rotY\"",[220,21687,3476],{"class":264},[220,21689,6919],{"class":420},[220,21691,1895],{"class":264},[220,21693,21694],{"class":420},"\"rotZ\"",[220,21696,3476],{"class":264},[220,21698,6919],{"class":420},[220,21700,18302],{"class":264},[3384,21702],{},[3262,21704,21706,21707],{"id":21705},"cube-cube3d","Cube — ",[99,21708,21709],{},"cube3D",[15,21711,21712],{},"A box with independent dimensions and rounded edges.",[1794,21714,21715,21727],{},[1797,21716,21717],{},[1800,21718,21719,21721,21723,21725],{},[1803,21720,16175],{},[1803,21722,13442],{},[1803,21724,13445],{},[1803,21726,1808],{},[1810,21728,21729,21748,21766,21784,21801],{},[1800,21730,21731,21736,21740,21745],{},[1815,21732,21733],{},[99,21734,21735],{},"sizeX",[1815,21737,21738],{},[99,21739,13555],{},[1815,21741,21742],{},[99,21743,21744],{},"0.27",[1815,21746,21747],{},"Half-width (X)",[1800,21749,21750,21755,21759,21763],{},[1815,21751,21752],{},[99,21753,21754],{},"sizeY",[1815,21756,21757],{},[99,21758,13555],{},[1815,21760,21761],{},[99,21762,21744],{},[1815,21764,21765],{},"Half-height (Y)",[1800,21767,21768,21773,21777,21781],{},[1815,21769,21770],{},[99,21771,21772],{},"sizeZ",[1815,21774,21775],{},[99,21776,13555],{},[1815,21778,21779],{},[99,21780,21744],{},[1815,21782,21783],{},"Half-depth (Z)",[1800,21785,21786,21790,21794,21798],{},[1815,21787,21788],{},[99,21789,20214],{},[1815,21791,21792],{},[99,21793,13555],{},[1815,21795,21796],{},[99,21797,17945],{},[1815,21799,21800],{},"Edge\u002Fcorner rounding",[1800,21802,21803,21811,21815,21825],{},[1815,21804,21805,13968,21807,13968,21809],{},[99,21806,21445],{},[99,21808,21448],{},[99,21810,21451],{},[1815,21812,21813],{},[99,21814,13555],{},[1815,21816,21817,13537,21820,13537,21823],{},[99,21818,21819],{},"25",[99,21821,21822],{},"35",[99,21824,6919],{},[1815,21826,21647],{},[212,21828,21830],{"className":3439,"code":21829,"language":3441,"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,21831,21832],{"__ignoreMap":178},[220,21833,21834,21836,21838,21840,21843,21845,21848,21850,21852,21854,21857,21859,21861,21863,21866,21868,21870,21872,21874,21876,21878,21880,21882,21884,21886,21888,21890,21892,21894,21896,21898,21900,21902],{"class":222,"line":223},[220,21835,20002],{"class":264},[220,21837,20005],{"class":420},[220,21839,3476],{"class":264},[220,21841,21842],{"class":230},"\"cube3D\"",[220,21844,1895],{"class":264},[220,21846,21847],{"class":420},"\"sizeX\"",[220,21849,3476],{"class":264},[220,21851,21744],{"class":420},[220,21853,1895],{"class":264},[220,21855,21856],{"class":420},"\"sizeY\"",[220,21858,3476],{"class":264},[220,21860,21744],{"class":420},[220,21862,1895],{"class":264},[220,21864,21865],{"class":420},"\"sizeZ\"",[220,21867,3476],{"class":264},[220,21869,21744],{"class":420},[220,21871,1895],{"class":264},[220,21873,20280],{"class":420},[220,21875,3476],{"class":264},[220,21877,17945],{"class":420},[220,21879,1895],{"class":264},[220,21881,21676],{"class":420},[220,21883,3476],{"class":264},[220,21885,21819],{"class":420},[220,21887,1895],{"class":264},[220,21889,21685],{"class":420},[220,21891,3476],{"class":264},[220,21893,21822],{"class":420},[220,21895,1895],{"class":264},[220,21897,21694],{"class":420},[220,21899,3476],{"class":264},[220,21901,6919],{"class":420},[220,21903,18302],{"class":264},[3384,21905],{},[3262,21907,21909,21910],{"id":21908},"torus-torus3d","Torus — ",[99,21911,21912],{},"torus3D",[15,21914,21915],{},"A doughnut ring.",[1794,21917,21918,21930],{},[1797,21919,21920],{},[1800,21921,21922,21924,21926,21928],{},[1803,21923,16175],{},[1803,21925,13442],{},[1803,21927,13445],{},[1803,21929,1808],{},[1810,21931,21932,21949,21967],{},[1800,21933,21934,21938,21942,21946],{},[1815,21935,21936],{},[99,21937,9935],{},[1815,21939,21940],{},[99,21941,13555],{},[1815,21943,21944],{},[99,21945,20266],{},[1815,21947,21948],{},"Ring radius (centre to tube centreline)",[1800,21950,21951,21956,21960,21964],{},[1815,21952,21953],{},[99,21954,21955],{},"tube",[1815,21957,21958],{},[99,21959,13555],{},[1815,21961,21962],{},[99,21963,16481],{},[1815,21965,21966],{},"Tube radius",[1800,21968,21969,21977,21981,21990],{},[1815,21970,21971,13968,21973,13968,21975],{},[99,21972,21445],{},[99,21974,21448],{},[99,21976,21451],{},[1815,21978,21979],{},[99,21980,13555],{},[1815,21982,21983,13537,21986,13537,21988],{},[99,21984,21985],{},"55",[99,21987,6919],{},[99,21989,6919],{},[1815,21991,21647],{},[212,21993,21995],{"className":3439,"code":21994,"language":3441,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,21996,21997],{"__ignoreMap":178},[220,21998,21999,22001,22003,22005,22007,22009,22011,22013,22015,22017,22019,22021,22023,22025,22027,22029,22031,22033,22035,22037,22039,22041,22043,22045,22047],{"class":222,"line":223},[220,22000,20002],{"class":264},[220,22002,20005],{"class":420},[220,22004,3476],{"class":264},[220,22006,21511],{"class":230},[220,22008,1895],{"class":264},[220,22010,20014],{"class":420},[220,22012,3476],{"class":264},[220,22014,20266],{"class":420},[220,22016,1895],{"class":264},[220,22018,21524],{"class":420},[220,22020,3476],{"class":264},[220,22022,16481],{"class":420},[220,22024,1895],{"class":264},[220,22026,21676],{"class":420},[220,22028,3476],{"class":264},[220,22030,21985],{"class":420},[220,22032,1895],{"class":264},[220,22034,21685],{"class":420},[220,22036,3476],{"class":264},[220,22038,6919],{"class":420},[220,22040,1895],{"class":264},[220,22042,21694],{"class":420},[220,22044,3476],{"class":264},[220,22046,6919],{"class":420},[220,22048,18302],{"class":264},[3384,22050],{},[3262,22052,22054,22055],{"id":22053},"octahedron-octahedron3d","Octahedron — ",[99,22056,22057],{},"octahedron3D",[15,22059,22060],{},"An eight-faced diamond\u002Fbipyramid.",[1794,22062,22063,22075],{},[1797,22064,22065],{},[1800,22066,22067,22069,22071,22073],{},[1803,22068,16175],{},[1803,22070,13442],{},[1803,22072,13445],{},[1803,22074,1808],{},[1810,22076,22077,22095],{},[1800,22078,22079,22083,22087,22092],{},[1815,22080,22081],{},[99,22082,9935],{},[1815,22084,22085],{},[99,22086,13555],{},[1815,22088,22089],{},[99,22090,22091],{},"0.42",[1815,22093,22094],{},"Distance from centre to each vertex",[1800,22096,22097,22105,22109,22118],{},[1815,22098,22099,13968,22101,13968,22103],{},[99,22100,21445],{},[99,22102,21448],{},[99,22104,21451],{},[1815,22106,22107],{},[99,22108,13555],{},[1815,22110,22111,13537,22114,13537,22116],{},[99,22112,22113],{},"10",[99,22115,21819],{},[99,22117,6919],{},[1815,22119,21647],{},[212,22121,22123],{"className":3439,"code":22122,"language":3441,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,22124,22125],{"__ignoreMap":178},[220,22126,22127,22129,22131,22133,22136,22138,22140,22142,22144,22146,22148,22150,22152,22154,22156,22158,22160,22162,22164,22166,22168],{"class":222,"line":223},[220,22128,20002],{"class":264},[220,22130,20005],{"class":420},[220,22132,3476],{"class":264},[220,22134,22135],{"class":230},"\"octahedron3D\"",[220,22137,1895],{"class":264},[220,22139,20014],{"class":420},[220,22141,3476],{"class":264},[220,22143,22091],{"class":420},[220,22145,1895],{"class":264},[220,22147,21676],{"class":420},[220,22149,3476],{"class":264},[220,22151,22113],{"class":420},[220,22153,1895],{"class":264},[220,22155,21685],{"class":420},[220,22157,3476],{"class":264},[220,22159,21819],{"class":420},[220,22161,1895],{"class":264},[220,22163,21694],{"class":420},[220,22165,3476],{"class":264},[220,22167,6919],{"class":420},[220,22169,18302],{"class":264},[3384,22171],{},[3262,22173,22175,22176],{"id":22174},"cylinder-cylinder3d","Cylinder — ",[99,22177,22178],{},"cylinder3D",[15,22180,22181],{},"A capped cylinder with rounded edges.",[1794,22183,22184,22196],{},[1797,22185,22186],{},[1800,22187,22188,22190,22192,22194],{},[1803,22189,16175],{},[1803,22191,13442],{},[1803,22193,13445],{},[1803,22195,1808],{},[1810,22197,22198,22216,22233,22250],{},[1800,22199,22200,22204,22208,22213],{},[1815,22201,22202],{},[99,22203,9935],{},[1815,22205,22206],{},[99,22207,13555],{},[1815,22209,22210],{},[99,22211,22212],{},"0.22",[1815,22214,22215],{},"Cylinder radius",[1800,22217,22218,22222,22226,22231],{},[1815,22219,22220],{},[99,22221,13422],{},[1815,22223,22224],{},[99,22225,13555],{},[1815,22227,22228],{},[99,22229,22230],{},"0.26",[1815,22232,20908],{},[1800,22234,22235,22239,22243,22247],{},[1815,22236,22237],{},[99,22238,20214],{},[1815,22240,22241],{},[99,22242,13555],{},[1815,22244,22245],{},[99,22246,17945],{},[1815,22248,22249],{},"Edge rounding",[1800,22251,22252,22260,22264,22274],{},[1815,22253,22254,13968,22256,13968,22258],{},[99,22255,21445],{},[99,22257,21448],{},[99,22259,21451],{},[1815,22261,22262],{},[99,22263,13555],{},[1815,22265,22266,13537,22269,13537,22271],{},[99,22267,22268],{},"60",[99,22270,6919],{},[99,22272,22273],{},"30",[1815,22275,21647],{},[212,22277,22279],{"className":3439,"code":22278,"language":3441,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,22280,22281],{"__ignoreMap":178},[220,22282,22283,22285,22287,22289,22292,22294,22296,22298,22300,22302,22304,22306,22308,22310,22312,22314,22316,22318,22320,22322,22324,22326,22328,22330,22332,22334,22336,22338,22340],{"class":222,"line":223},[220,22284,20002],{"class":264},[220,22286,20005],{"class":420},[220,22288,3476],{"class":264},[220,22290,22291],{"class":230},"\"cylinder3D\"",[220,22293,1895],{"class":264},[220,22295,20014],{"class":420},[220,22297,3476],{"class":264},[220,22299,22212],{"class":420},[220,22301,1895],{"class":264},[220,22303,20129],{"class":420},[220,22305,3476],{"class":264},[220,22307,22230],{"class":420},[220,22309,1895],{"class":264},[220,22311,20280],{"class":420},[220,22313,3476],{"class":264},[220,22315,17945],{"class":420},[220,22317,1895],{"class":264},[220,22319,21676],{"class":420},[220,22321,3476],{"class":264},[220,22323,22268],{"class":420},[220,22325,1895],{"class":264},[220,22327,21685],{"class":420},[220,22329,3476],{"class":264},[220,22331,6919],{"class":420},[220,22333,1895],{"class":264},[220,22335,21694],{"class":420},[220,22337,3476],{"class":264},[220,22339,22273],{"class":420},[220,22341,18302],{"class":264},[3384,22343],{},[3262,22345,22347,22348],{"id":22346},"capsule-capsule3d","Capsule — ",[99,22349,22350],{},"capsule3D",[15,22352,22353],{},"A cylinder with hemispherical caps (a pill).",[1794,22355,22356,22368],{},[1797,22357,22358],{},[1800,22359,22360,22362,22364,22366],{},[1803,22361,16175],{},[1803,22363,13442],{},[1803,22365,13445],{},[1803,22367,1808],{},[1810,22369,22370,22388,22405],{},[1800,22371,22372,22376,22380,22385],{},[1815,22373,22374],{},[99,22375,9935],{},[1815,22377,22378],{},[99,22379,13555],{},[1815,22381,22382],{},[99,22383,22384],{},"0.16",[1815,22386,22387],{},"Capsule radius",[1800,22389,22390,22394,22398,22402],{},[1815,22391,22392],{},[99,22393,13422],{},[1815,22395,22396],{},[99,22397,13555],{},[1815,22399,22400],{},[99,22401,15237],{},[1815,22403,22404],{},"Half-length of the straight section",[1800,22406,22407,22415,22419,22427],{},[1815,22408,22409,13968,22411,13968,22413],{},[99,22410,21445],{},[99,22412,21448],{},[99,22414,21451],{},[1815,22416,22417],{},[99,22418,13555],{},[1815,22420,22421,13537,22423,13537,22425],{},[99,22422,6919],{},[99,22424,6919],{},[99,22426,21822],{},[1815,22428,21647],{},[212,22430,22432],{"className":3439,"code":22431,"language":3441,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,22433,22434],{"__ignoreMap":178},[220,22435,22436,22438,22440,22442,22445,22447,22449,22451,22453,22455,22457,22459,22461,22463,22465,22467,22469,22471,22473,22475,22477,22479,22481,22483,22485],{"class":222,"line":223},[220,22437,20002],{"class":264},[220,22439,20005],{"class":420},[220,22441,3476],{"class":264},[220,22443,22444],{"class":230},"\"capsule3D\"",[220,22446,1895],{"class":264},[220,22448,20014],{"class":420},[220,22450,3476],{"class":264},[220,22452,22384],{"class":420},[220,22454,1895],{"class":264},[220,22456,20129],{"class":420},[220,22458,3476],{"class":264},[220,22460,15237],{"class":420},[220,22462,1895],{"class":264},[220,22464,21676],{"class":420},[220,22466,3476],{"class":264},[220,22468,6919],{"class":420},[220,22470,1895],{"class":264},[220,22472,21685],{"class":420},[220,22474,3476],{"class":264},[220,22476,6919],{"class":420},[220,22478,1895],{"class":264},[220,22480,21694],{"class":420},[220,22482,3476],{"class":264},[220,22484,21822],{"class":420},[220,22486,18302],{"class":264},[3384,22488],{},[3262,22490,22492,22493],{"id":22491},"cone-cone3d","Cone — ",[99,22494,22495],{},"cone3D",[15,22497,22498,22499,22502,22503,22505],{},"A cone or truncated cone. Set ",[99,22500,22501],{},"topRadius"," above ",[99,22504,6919],{}," to flatten the tip into a frustum.",[1794,22507,22508,22520],{},[1797,22509,22510],{},[1800,22511,22512,22514,22516,22518],{},[1803,22513,16175],{},[1803,22515,13442],{},[1803,22517,13445],{},[1803,22519,1808],{},[1810,22521,22522,22539,22559,22575],{},[1800,22523,22524,22528,22532,22536],{},[1815,22525,22526],{},[99,22527,9935],{},[1815,22529,22530],{},[99,22531,13555],{},[1815,22533,22534],{},[99,22535,20266],{},[1815,22537,22538],{},"Base radius",[1800,22540,22541,22545,22549,22553],{},[1815,22542,22543],{},[99,22544,22501],{},[1815,22546,22547],{},[99,22548,13555],{},[1815,22550,22551],{},[99,22552,17945],{},[1815,22554,22555,22556,22558],{},"Top radius — ",[99,22557,6919],{}," for a sharp point",[1800,22560,22561,22565,22569,22573],{},[1815,22562,22563],{},[99,22564,13422],{},[1815,22566,22567],{},[99,22568,13555],{},[1815,22570,22571],{},[99,22572,20266],{},[1815,22574,20908],{},[1800,22576,22577,22585,22589,22598],{},[1815,22578,22579,13968,22581,13968,22583],{},[99,22580,21445],{},[99,22582,21448],{},[99,22584,21451],{},[1815,22586,22587],{},[99,22588,13555],{},[1815,22590,22591,13537,22593,13537,22595],{},[99,22592,21819],{},[99,22594,6919],{},[99,22596,22597],{},"15",[1815,22599,21647],{},[212,22601,22603],{"className":3439,"code":22602,"language":3441,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,22604,22605],{"__ignoreMap":178},[220,22606,22607,22609,22611,22613,22616,22618,22620,22622,22624,22626,22629,22631,22633,22635,22637,22639,22641,22643,22645,22647,22649,22651,22653,22655,22657,22659,22661,22663,22665],{"class":222,"line":223},[220,22608,20002],{"class":264},[220,22610,20005],{"class":420},[220,22612,3476],{"class":264},[220,22614,22615],{"class":230},"\"cone3D\"",[220,22617,1895],{"class":264},[220,22619,20014],{"class":420},[220,22621,3476],{"class":264},[220,22623,20266],{"class":420},[220,22625,1895],{"class":264},[220,22627,22628],{"class":420},"\"topRadius\"",[220,22630,3476],{"class":264},[220,22632,17945],{"class":420},[220,22634,1895],{"class":264},[220,22636,20129],{"class":420},[220,22638,3476],{"class":264},[220,22640,20266],{"class":420},[220,22642,1895],{"class":264},[220,22644,21676],{"class":420},[220,22646,3476],{"class":264},[220,22648,21819],{"class":420},[220,22650,1895],{"class":264},[220,22652,21685],{"class":420},[220,22654,3476],{"class":264},[220,22656,6919],{"class":420},[220,22658,1895],{"class":264},[220,22660,21694],{"class":420},[220,22662,3476],{"class":264},[220,22664,22597],{"class":420},[220,22666,18302],{"class":264},[3384,22668],{},[3262,22670,22672,22673],{"id":22671},"pyramid-pyramid3d","Pyramid — ",[99,22674,22675],{},"pyramid3D",[15,22677,22678],{},"A square-based pyramid.",[1794,22680,22681,22693],{},[1797,22682,22683],{},[1800,22684,22685,22687,22689,22691],{},[1803,22686,16175],{},[1803,22688,13442],{},[1803,22690,13445],{},[1803,22692,1808],{},[1810,22694,22695,22712,22729],{},[1800,22696,22697,22701,22705,22709],{},[1815,22698,22699],{},[99,22700,9943],{},[1815,22702,22703],{},[99,22704,13555],{},[1815,22706,22707],{},[99,22708,20266],{},[1815,22710,22711],{},"Base half-width",[1800,22713,22714,22718,22722,22726],{},[1815,22715,22716],{},[99,22717,13422],{},[1815,22719,22720],{},[99,22721,13555],{},[1815,22723,22724],{},[99,22725,19461],{},[1815,22727,22728],{},"Apex height",[1800,22730,22731,22739,22743,22752],{},[1815,22732,22733,13968,22735,13968,22737],{},[99,22734,21445],{},[99,22736,21448],{},[99,22738,21451],{},[1815,22740,22741],{},[99,22742,13555],{},[1815,22744,22745,13537,22748,13537,22750],{},[99,22746,22747],{},"-10",[99,22749,22273],{},[99,22751,6919],{},[1815,22753,21647],{},[212,22755,22757],{"className":3439,"code":22756,"language":3441,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,22758,22759],{"__ignoreMap":178},[220,22760,22761,22763,22765,22767,22770,22772,22774,22776,22778,22780,22782,22784,22786,22788,22790,22792,22794,22796,22798,22800,22802,22804,22806,22808,22810],{"class":222,"line":223},[220,22762,20002],{"class":264},[220,22764,20005],{"class":420},[220,22766,3476],{"class":264},[220,22768,22769],{"class":230},"\"pyramid3D\"",[220,22771,1895],{"class":264},[220,22773,20816],{"class":420},[220,22775,3476],{"class":264},[220,22777,20266],{"class":420},[220,22779,1895],{"class":264},[220,22781,20129],{"class":420},[220,22783,3476],{"class":264},[220,22785,19461],{"class":420},[220,22787,1895],{"class":264},[220,22789,21676],{"class":420},[220,22791,3476],{"class":264},[220,22793,22747],{"class":420},[220,22795,1895],{"class":264},[220,22797,21685],{"class":420},[220,22799,3476],{"class":264},[220,22801,22273],{"class":420},[220,22803,1895],{"class":264},[220,22805,21694],{"class":420},[220,22807,3476],{"class":264},[220,22809,6919],{"class":420},[220,22811,18302],{"class":264},[3384,22813],{},[3262,22815,22817,22818],{"id":22816},"prism-prism3d","Prism — ",[99,22819,22820],{},"prism3D",[15,22822,22823],{},"A hexagonal prism.",[1794,22825,22826,22838],{},[1797,22827,22828],{},[1800,22829,22830,22832,22834,22836],{},[1803,22831,16175],{},[1803,22833,13442],{},[1803,22835,13445],{},[1803,22837,1808],{},[1810,22839,22840,22858,22876],{},[1800,22841,22842,22846,22850,22855],{},[1815,22843,22844],{},[99,22845,9935],{},[1815,22847,22848],{},[99,22849,13555],{},[1815,22851,22852],{},[99,22853,22854],{},"0.28",[1815,22856,22857],{},"Hexagon radius",[1800,22859,22860,22864,22868,22873],{},[1815,22861,22862],{},[99,22863,13422],{},[1815,22865,22866],{},[99,22867,13555],{},[1815,22869,22870],{},[99,22871,22872],{},"0.14",[1815,22874,22875],{},"Half-depth of the prism",[1800,22877,22878,22886,22890,22898],{},[1815,22879,22880,13968,22882,13968,22884],{},[99,22881,21445],{},[99,22883,21448],{},[99,22885,21451],{},[1815,22887,22888],{},[99,22889,13555],{},[1815,22891,22892,13537,22894,13537,22896],{},[99,22893,21819],{},[99,22895,22273],{},[99,22897,6919],{},[1815,22899,21647],{},[212,22901,22903],{"className":3439,"code":22902,"language":3441,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,22904,22905],{"__ignoreMap":178},[220,22906,22907,22909,22911,22913,22916,22918,22920,22922,22924,22926,22928,22930,22932,22934,22936,22938,22940,22942,22944,22946,22948,22950,22952,22954,22956],{"class":222,"line":223},[220,22908,20002],{"class":264},[220,22910,20005],{"class":420},[220,22912,3476],{"class":264},[220,22914,22915],{"class":230},"\"prism3D\"",[220,22917,1895],{"class":264},[220,22919,20014],{"class":420},[220,22921,3476],{"class":264},[220,22923,22854],{"class":420},[220,22925,1895],{"class":264},[220,22927,20129],{"class":420},[220,22929,3476],{"class":264},[220,22931,22872],{"class":420},[220,22933,1895],{"class":264},[220,22935,21676],{"class":420},[220,22937,3476],{"class":264},[220,22939,21819],{"class":420},[220,22941,1895],{"class":264},[220,22943,21685],{"class":420},[220,22945,3476],{"class":264},[220,22947,22273],{"class":420},[220,22949,1895],{"class":264},[220,22951,21694],{"class":420},[220,22953,3476],{"class":264},[220,22955,6919],{"class":420},[220,22957,18302],{"class":264},[3384,22959],{},[3262,22961,22963,22964],{"id":22962},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,22965,22966],{},"ellipsoid3D",[15,22968,22969],{},"A sphere with three independent radii.",[1794,22971,22972,22984],{},[1797,22973,22974],{},[1800,22975,22976,22978,22980,22982],{},[1803,22977,16175],{},[1803,22979,13442],{},[1803,22981,13445],{},[1803,22983,1808],{},[1810,22985,22986,23005,23023,23041],{},[1800,22987,22988,22993,22997,23002],{},[1815,22989,22990],{},[99,22991,22992],{},"radiusX",[1815,22994,22995],{},[99,22996,13555],{},[1815,22998,22999],{},[99,23000,23001],{},"0.38",[1815,23003,23004],{},"Radius along X",[1800,23006,23007,23012,23016,23020],{},[1815,23008,23009],{},[99,23010,23011],{},"radiusY",[1815,23013,23014],{},[99,23015,13555],{},[1815,23017,23018],{},[99,23019,22212],{},[1815,23021,23022],{},"Radius along Y",[1800,23024,23025,23030,23034,23038],{},[1815,23026,23027],{},[99,23028,23029],{},"radiusZ",[1815,23031,23032],{},[99,23033,13555],{},[1815,23035,23036],{},[99,23037,20266],{},[1815,23039,23040],{},"Radius along Z",[1800,23042,23043,23051,23055,23064],{},[1815,23044,23045,13968,23047,13968,23049],{},[99,23046,21445],{},[99,23048,21448],{},[99,23050,21451],{},[1815,23052,23053],{},[99,23054,13555],{},[1815,23056,23057,13537,23059,13537,23061],{},[99,23058,6919],{},[99,23060,6919],{},[99,23062,23063],{},"20",[1815,23065,21647],{},[212,23067,23069],{"className":3439,"code":23068,"language":3441,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,23070,23071],{"__ignoreMap":178},[220,23072,23073,23075,23077,23079,23082,23084,23087,23089,23091,23093,23096,23098,23100,23102,23105,23107,23109,23111,23113,23115,23117,23119,23121,23123,23125,23127,23129,23131,23133],{"class":222,"line":223},[220,23074,20002],{"class":264},[220,23076,20005],{"class":420},[220,23078,3476],{"class":264},[220,23080,23081],{"class":230},"\"ellipsoid3D\"",[220,23083,1895],{"class":264},[220,23085,23086],{"class":420},"\"radiusX\"",[220,23088,3476],{"class":264},[220,23090,23001],{"class":420},[220,23092,1895],{"class":264},[220,23094,23095],{"class":420},"\"radiusY\"",[220,23097,3476],{"class":264},[220,23099,22212],{"class":420},[220,23101,1895],{"class":264},[220,23103,23104],{"class":420},"\"radiusZ\"",[220,23106,3476],{"class":264},[220,23108,20266],{"class":420},[220,23110,1895],{"class":264},[220,23112,21676],{"class":420},[220,23114,3476],{"class":264},[220,23116,6919],{"class":420},[220,23118,1895],{"class":264},[220,23120,21685],{"class":420},[220,23122,3476],{"class":264},[220,23124,6919],{"class":420},[220,23126,1895],{"class":264},[220,23128,21694],{"class":420},[220,23130,3476],{"class":264},[220,23132,23063],{"class":420},[220,23134,18302],{"class":264},[3384,23136],{},[3262,23138,23140,23141],{"id":23139},"diamond-diamond3d","Diamond — ",[99,23142,23143],{},"diamond3D",[15,23145,23146,23147,23149],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,23148,21434],{}," effect.",[1794,23151,23152,23164],{},[1797,23153,23154],{},[1800,23155,23156,23158,23160,23162],{},[1803,23157,16175],{},[1803,23159,13442],{},[1803,23161,13445],{},[1803,23163,1808],{},[1810,23165,23166,23183,23200],{},[1800,23167,23168,23172,23176,23180],{},[1815,23169,23170],{},[99,23171,9935],{},[1815,23173,23174],{},[99,23175,13555],{},[1815,23177,23178],{},[99,23179,20266],{},[1815,23181,23182],{},"Girdle radius",[1800,23184,23185,23189,23193,23197],{},[1815,23186,23187],{},[99,23188,13422],{},[1815,23190,23191],{},[99,23192,13555],{},[1815,23194,23195],{},[99,23196,22091],{},[1815,23198,23199],{},"Total height (crown + pavilion)",[1800,23201,23202,23210,23214,23222],{},[1815,23203,23204,13968,23206,13968,23208],{},[99,23205,21445],{},[99,23207,21448],{},[99,23209,21451],{},[1815,23211,23212],{},[99,23213,13555],{},[1815,23215,23216,13537,23218,13537,23220],{},[99,23217,22597],{},[99,23219,6919],{},[99,23221,6919],{},[1815,23223,21647],{},[212,23225,23227],{"className":3439,"code":23226,"language":3441,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23228,23229],{"__ignoreMap":178},[220,23230,23231,23233,23235,23237,23240,23242,23244,23246,23248,23250,23252,23254,23256,23258,23260,23262,23264,23266,23268,23270,23272,23274,23276,23278,23280],{"class":222,"line":223},[220,23232,20002],{"class":264},[220,23234,20005],{"class":420},[220,23236,3476],{"class":264},[220,23238,23239],{"class":230},"\"diamond3D\"",[220,23241,1895],{"class":264},[220,23243,20014],{"class":420},[220,23245,3476],{"class":264},[220,23247,20266],{"class":420},[220,23249,1895],{"class":264},[220,23251,20129],{"class":420},[220,23253,3476],{"class":264},[220,23255,22091],{"class":420},[220,23257,1895],{"class":264},[220,23259,21676],{"class":420},[220,23261,3476],{"class":264},[220,23263,22597],{"class":420},[220,23265,1895],{"class":264},[220,23267,21685],{"class":420},[220,23269,3476],{"class":264},[220,23271,6919],{"class":420},[220,23273,1895],{"class":264},[220,23275,21694],{"class":420},[220,23277,3476],{"class":264},[220,23279,6919],{"class":420},[220,23281,18302],{"class":264},[3384,23283],{},[3262,23285,23287,23288],{"id":23286},"link-link3d","Link — ",[99,23289,23290],{},"link3D",[15,23292,23293],{},"A rounded chain link.",[1794,23295,23296,23308],{},[1797,23297,23298],{},[1800,23299,23300,23302,23304,23306],{},[1803,23301,16175],{},[1803,23303,13442],{},[1803,23305,13445],{},[1803,23307,1808],{},[1810,23309,23310,23328,23345,23361],{},[1800,23311,23312,23316,23320,23325],{},[1815,23313,23314],{},[99,23315,9935],{},[1815,23317,23318],{},[99,23319,13555],{},[1815,23321,23322],{},[99,23323,23324],{},"0.18",[1815,23326,23327],{},"Inner radius of the link's curve",[1800,23329,23330,23335,23339,23343],{},[1815,23331,23332],{},[99,23333,23334],{},"length",[1815,23336,23337],{},[99,23338,13555],{},[1815,23340,23341],{},[99,23342,16453],{},[1815,23344,22404],{},[1800,23346,23347,23351,23355,23359],{},[1815,23348,23349],{},[99,23350,21955],{},[1815,23352,23353],{},[99,23354,13555],{},[1815,23356,23357],{},[99,23358,20658],{},[1815,23360,21966],{},[1800,23362,23363,23371,23375,23383],{},[1815,23364,23365,13968,23367,13968,23369],{},[99,23366,21445],{},[99,23368,21448],{},[99,23370,21451],{},[1815,23372,23373],{},[99,23374,13555],{},[1815,23376,23377,13537,23379,13537,23381],{},[99,23378,23063],{},[99,23380,22273],{},[99,23382,6919],{},[1815,23384,21647],{},[212,23386,23388],{"className":3439,"code":23387,"language":3441,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,23389,23390],{"__ignoreMap":178},[220,23391,23392,23394,23396,23398,23401,23403,23405,23407,23409,23411,23414,23416,23418,23420,23422,23424,23426,23428,23430,23432,23434,23436,23438,23440,23442,23444,23446,23448,23450],{"class":222,"line":223},[220,23393,20002],{"class":264},[220,23395,20005],{"class":420},[220,23397,3476],{"class":264},[220,23399,23400],{"class":230},"\"link3D\"",[220,23402,1895],{"class":264},[220,23404,20014],{"class":420},[220,23406,3476],{"class":264},[220,23408,23324],{"class":420},[220,23410,1895],{"class":264},[220,23412,23413],{"class":420},"\"length\"",[220,23415,3476],{"class":264},[220,23417,16453],{"class":420},[220,23419,1895],{"class":264},[220,23421,21524],{"class":420},[220,23423,3476],{"class":264},[220,23425,20658],{"class":420},[220,23427,1895],{"class":264},[220,23429,21676],{"class":420},[220,23431,3476],{"class":264},[220,23433,23063],{"class":420},[220,23435,1895],{"class":264},[220,23437,21685],{"class":420},[220,23439,3476],{"class":264},[220,23441,22273],{"class":420},[220,23443,1895],{"class":264},[220,23445,21694],{"class":420},[220,23447,3476],{"class":264},[220,23449,6919],{"class":420},[220,23451,18302],{"class":264},[3384,23453],{},[23,23455,23457],{"id":23456},"custom-shapes","Custom shapes",[15,23459,23460],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,23462,23463,23464,23467,23468,23471,23472,23474,23475,23478],{},"To use an SVG shape, set ",[99,23465,23466],{},"shapeSdfUrl"," to the URL of an SDF ",[99,23469,23470],{},".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,23473,23470],{}," URL. If you work with the ",[56,23476,23477],{"href":58},"Shaders MCP",", your agent can also generate an SDF from any SVG in your project.",[246,23480,23481,23502,23521,23537,23553],{":tabs":1557},[212,23482,23484],{"className":334,"code":23483,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,23485,23486],{"__ignoreMap":178},[220,23487,23488,23490,23492,23495,23497,23500],{"class":222,"line":223},[220,23489,343],{"class":264},[220,23491,13722],{"class":346},[220,23493,23494],{"class":226}," :shapeSdfUrl",[220,23496,353],{"class":264},[220,23498,23499],{"class":230},"\"myLogoUrl\"",[220,23501,386],{"class":264},[212,23503,23505],{"className":409,"code":23504,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,23506,23507],{"__ignoreMap":178},[220,23508,23509,23511,23513,23516,23518],{"class":222,"line":223},[220,23510,343],{"class":264},[220,23512,13722],{"class":420},[220,23514,23515],{"class":226}," shapeSdfUrl",[220,23517,353],{"class":260},[220,23519,23520],{"class":264},"{myLogoUrl} \u002F>\n",[212,23522,23523],{"className":468,"code":23504,"language":469,"meta":178,"style":178},[99,23524,23525],{"__ignoreMap":178},[220,23526,23527,23529,23531,23533,23535],{"class":222,"line":223},[220,23528,343],{"class":264},[220,23530,13722],{"class":420},[220,23532,23515],{"class":226},[220,23534,353],{"class":260},[220,23536,23520],{"class":264},[212,23538,23539],{"className":468,"code":23504,"language":469,"meta":178,"style":178},[99,23540,23541],{"__ignoreMap":178},[220,23542,23543,23545,23547,23549,23551],{"class":222,"line":223},[220,23544,343],{"class":264},[220,23546,13722],{"class":420},[220,23548,23515],{"class":226},[220,23550,353],{"class":260},[220,23552,23520],{"class":264},[212,23554,23556],{"className":251,"code":23555,"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,23557,23558,23572,23576,23590,23594],{"__ignoreMap":178},[220,23559,23560,23562,23564,23566,23568,23570],{"class":222,"line":223},[220,23561,1735],{"class":260},[220,23563,1738],{"class":420},[220,23565,1741],{"class":260},[220,23567,1744],{"class":260},[220,23569,1747],{"class":226},[220,23571,1750],{"class":264},[220,23573,23574],{"class":222,"line":179},[220,23575,1765],{"class":264},[220,23577,23578,23580,23582,23585,23588],{"class":222,"line":389},[220,23579,1770],{"class":264},[220,23581,19795],{"class":230},[220,23583,23584],{"class":264},", props: { shapeSdfUrl: ",[220,23586,23587],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,23589,1782],{"class":264},[220,23591,23592],{"class":222,"line":399},[220,23593,1787],{"class":264},[220,23595,23596],{"class":222,"line":644},[220,23597,1792],{"class":264},[3262,23599,23601],{"id":23600},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,23603,23604,23605,23607,23608,23610,23611,1550,23613,23616],{},"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,23606,23466],{},", set the ",[99,23609,19250],{}," config ",[99,23612,19284],{},[99,23614,23615],{},"svgExtrude3D"," and tune the extrusion:",[1794,23618,23619,23631],{},[1797,23620,23621],{},[1800,23622,23623,23625,23627,23629],{},[1803,23624,16175],{},[1803,23626,13442],{},[1803,23628,13445],{},[1803,23630,1808],{},[1810,23632,23633,23651,23669],{},[1800,23634,23635,23640,23644,23648],{},[1815,23636,23637],{},[99,23638,23639],{},"depth",[1815,23641,23642],{},[99,23643,13555],{},[1815,23645,23646],{},[99,23647,16481],{},[1815,23649,23650],{},"Total thickness of the slab along the view axis",[1800,23652,23653,23658,23662,23666],{},[1815,23654,23655],{},[99,23656,23657],{},"bevel",[1815,23659,23660],{},[99,23661,13555],{},[1815,23663,23664],{},[99,23665,17945],{},[1815,23667,23668],{},"Rounded-edge radius on the extruded sides",[1800,23670,23671,23679,23683,23691],{},[1815,23672,23673,13968,23675,13968,23677],{},[99,23674,21445],{},[99,23676,21448],{},[99,23678,21451],{},[1815,23680,23681],{},[99,23682,13555],{},[1815,23684,23685,13537,23687,13537,23689],{},[99,23686,22597],{},[99,23688,22273],{},[99,23690,6919],{},[1815,23692,21647],{},[15,23694,23695,23696,23698,23699,23701],{},"As with the analytic 3D shapes, these sub-props accept ",[56,23697,21484],{"href":15533}," configs (e.g. an ",[99,23700,15622],{}," rotation for a spinning logo).",[246,23703,23704,23740,23813,23875,23937],{":tabs":1557},[212,23705,23707],{"className":334,"code":23706,"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,23708,23709,23716,23726,23736],{"__ignoreMap":178},[220,23710,23711,23713],{"class":222,"line":223},[220,23712,343],{"class":264},[220,23714,23715],{"class":346},"Glass\n",[220,23717,23718,23721,23723],{"class":222,"line":179},[220,23719,23720],{"class":226}," :shapeSdfUrl",[220,23722,353],{"class":264},[220,23724,23725],{"class":230},"\"myLogoUrl\"\n",[220,23727,23728,23731,23733],{"class":222,"line":389},[220,23729,23730],{"class":226}," :shape",[220,23732,353],{"class":264},[220,23734,23735],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,23737,23738],{"class":222,"line":399},[220,23739,14059],{"class":264},[212,23741,23743],{"className":409,"code":23742,"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,23744,23745,23751,23761,23809],{"__ignoreMap":178},[220,23746,23747,23749],{"class":222,"line":223},[220,23748,343],{"class":264},[220,23750,23715],{"class":420},[220,23752,23753,23756,23758],{"class":222,"line":179},[220,23754,23755],{"class":226}," shapeSdfUrl",[220,23757,353],{"class":260},[220,23759,23760],{"class":264},"{myLogoUrl}\n",[220,23762,23763,23766,23768,23770,23772,23774,23776,23778,23781,23784,23786,23789,23791,23794,23796,23799,23801,23804,23806],{"class":222,"line":389},[220,23764,23765],{"class":226}," shape",[220,23767,353],{"class":260},[220,23769,743],{"class":264},[220,23771,19394],{"class":420},[220,23773,7735],{"class":264},[220,23775,19399],{"class":226},[220,23777,19402],{"class":264},[220,23779,23780],{"class":230},"\"svgExtrude3D\"",[220,23782,23783],{"class":264},", depth: ",[220,23785,16481],{"class":420},[220,23787,23788],{"class":264},", bevel: ",[220,23790,17945],{"class":420},[220,23792,23793],{"class":264},", rotX: ",[220,23795,22597],{"class":420},[220,23797,23798],{"class":264},", rotY: ",[220,23800,22273],{"class":420},[220,23802,23803],{"class":264},", rotZ: ",[220,23805,6919],{"class":420},[220,23807,23808],{"class":264}," })}\n",[220,23810,23811],{"class":222,"line":399},[220,23812,14059],{"class":264},[212,23814,23815],{"className":468,"code":23742,"language":469,"meta":178,"style":178},[99,23816,23817,23823,23831,23871],{"__ignoreMap":178},[220,23818,23819,23821],{"class":222,"line":223},[220,23820,343],{"class":264},[220,23822,23715],{"class":420},[220,23824,23825,23827,23829],{"class":222,"line":179},[220,23826,23755],{"class":226},[220,23828,353],{"class":260},[220,23830,23760],{"class":264},[220,23832,23833,23835,23837,23839,23841,23843,23845,23847,23849,23851,23853,23855,23857,23859,23861,23863,23865,23867,23869],{"class":222,"line":389},[220,23834,23765],{"class":226},[220,23836,353],{"class":260},[220,23838,743],{"class":264},[220,23840,19394],{"class":420},[220,23842,7735],{"class":264},[220,23844,19399],{"class":226},[220,23846,19402],{"class":264},[220,23848,23780],{"class":230},[220,23850,23783],{"class":264},[220,23852,16481],{"class":420},[220,23854,23788],{"class":264},[220,23856,17945],{"class":420},[220,23858,23793],{"class":264},[220,23860,22597],{"class":420},[220,23862,23798],{"class":264},[220,23864,22273],{"class":420},[220,23866,23803],{"class":264},[220,23868,6919],{"class":420},[220,23870,23808],{"class":264},[220,23872,23873],{"class":222,"line":399},[220,23874,14059],{"class":264},[212,23876,23877],{"className":468,"code":23742,"language":469,"meta":178,"style":178},[99,23878,23879,23885,23893,23933],{"__ignoreMap":178},[220,23880,23881,23883],{"class":222,"line":223},[220,23882,343],{"class":264},[220,23884,23715],{"class":420},[220,23886,23887,23889,23891],{"class":222,"line":179},[220,23888,23755],{"class":226},[220,23890,353],{"class":260},[220,23892,23760],{"class":264},[220,23894,23895,23897,23899,23901,23903,23905,23907,23909,23911,23913,23915,23917,23919,23921,23923,23925,23927,23929,23931],{"class":222,"line":389},[220,23896,23765],{"class":226},[220,23898,353],{"class":260},[220,23900,743],{"class":264},[220,23902,19394],{"class":420},[220,23904,7735],{"class":264},[220,23906,19399],{"class":226},[220,23908,19402],{"class":264},[220,23910,23780],{"class":230},[220,23912,23783],{"class":264},[220,23914,16481],{"class":420},[220,23916,23788],{"class":264},[220,23918,17945],{"class":420},[220,23920,23793],{"class":264},[220,23922,22597],{"class":420},[220,23924,23798],{"class":264},[220,23926,22273],{"class":420},[220,23928,23803],{"class":264},[220,23930,6919],{"class":420},[220,23932,23808],{"class":264},[220,23934,23935],{"class":222,"line":399},[220,23936,14059],{"class":264},[212,23938,23940],{"className":251,"code":23939,"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,23941,23942,23956,23960,23964,23972,23976,23985,24015,24019,24023,24027],{"__ignoreMap":178},[220,23943,23944,23946,23948,23950,23952,23954],{"class":222,"line":223},[220,23945,1735],{"class":260},[220,23947,1738],{"class":420},[220,23949,1741],{"class":260},[220,23951,1744],{"class":260},[220,23953,1747],{"class":226},[220,23955,1750],{"class":264},[220,23957,23958],{"class":222,"line":179},[220,23959,1765],{"class":264},[220,23961,23962],{"class":222,"line":389},[220,23963,14635],{"class":264},[220,23965,23966,23968,23970],{"class":222,"line":399},[220,23967,14640],{"class":264},[220,23969,19795],{"class":230},[220,23971,1760],{"class":264},[220,23973,23974],{"class":222,"line":644},[220,23975,14649],{"class":264},[220,23977,23978,23981,23983],{"class":222,"line":650},[220,23979,23980],{"class":264}," shapeSdfUrl: ",[220,23982,23587],{"class":230},[220,23984,1760],{"class":264},[220,23986,23987,23990,23993,23995,23997,23999,24001,24003,24005,24007,24009,24011,24013],{"class":222,"line":656},[220,23988,23989],{"class":264}," shape: { type: ",[220,23991,23992],{"class":230},"'svgExtrude3D'",[220,23994,23783],{"class":264},[220,23996,16481],{"class":420},[220,23998,23788],{"class":264},[220,24000,17945],{"class":420},[220,24002,23793],{"class":264},[220,24004,22597],{"class":420},[220,24006,23798],{"class":264},[220,24008,22273],{"class":420},[220,24010,23803],{"class":264},[220,24012,6919],{"class":420},[220,24014,18302],{"class":264},[220,24016,24017],{"class":222,"line":673},[220,24018,3792],{"class":264},[220,24020,24021],{"class":222,"line":682},[220,24022,3484],{"class":264},[220,24024,24025],{"class":222,"line":691},[220,24026,1787],{"class":264},[220,24028,24029],{"class":222,"line":696},[220,24030,1792],{"class":264},[15,24032,24033,24034,24036,24037,24039],{},"The easiest way to produce a working extruded logo (SDF ",[99,24035,23470],{}," plus the matching ",[99,24038,19250],{}," config) is to set it up visually in the design editor and use the code export.",[1504,24041,13246],{},{"title":178,"searchDepth":179,"depth":179,"links":24043},[24044,24045,24069,24095],{"id":19275,"depth":179,"text":19276},{"id":19941,"depth":179,"text":19942,"children":24046},[24047,24049,24051,24053,24055,24057,24059,24061,24063,24065,24067],{"id":19953,"depth":389,"text":24048},"Circle — circleSDF",{"id":20025,"depth":389,"text":24050},"Ellipse — ellipseSDF",{"id":20149,"depth":389,"text":24052},"Polygon — polygonSDF",{"id":20300,"depth":389,"text":24054},"Star — starSDF",{"id":20451,"depth":389,"text":24056},"Flower — flowerSDF",{"id":20602,"depth":389,"text":24058},"Ring — ringSDF",{"id":20701,"depth":389,"text":24060},"Cross — crossSDF",{"id":20851,"depth":389,"text":24062},"Rounded Rectangle — roundedRectSDF",{"id":20995,"depth":389,"text":24064},"Vesica — vesicaSDF",{"id":21123,"depth":389,"text":24066},"Crescent — crescentSDF",{"id":21270,"depth":389,"text":24068},"Trapezoid — trapezoidSDF",{"id":21418,"depth":179,"text":21419,"children":24070},[24071,24073,24075,24077,24079,24081,24083,24085,24087,24089,24091,24093],{"id":21587,"depth":389,"text":24072},"Sphere — sphere3D",{"id":21705,"depth":389,"text":24074},"Cube — cube3D",{"id":21908,"depth":389,"text":24076},"Torus — torus3D",{"id":22053,"depth":389,"text":24078},"Octahedron — octahedron3D",{"id":22174,"depth":389,"text":24080},"Cylinder — cylinder3D",{"id":22346,"depth":389,"text":24082},"Capsule — capsule3D",{"id":22491,"depth":389,"text":24084},"Cone — cone3D",{"id":22671,"depth":389,"text":24086},"Pyramid — pyramid3D",{"id":22816,"depth":389,"text":24088},"Prism — prism3D",{"id":22962,"depth":389,"text":24090},"Ellipsoid — ellipsoid3D",{"id":23139,"depth":389,"text":24092},"Diamond — diamond3D",{"id":23286,"depth":389,"text":24094},"Link — link3D",{"id":23456,"depth":179,"text":23457,"children":24096},[24097],{"id":23600,"depth":389,"text":23601},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":19226,"description":24098},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":24106,"title":24107,"body":24108,"category":2240,"description":24462,"exclude":190,"extension":191,"forceFramework":190,"icon":24463,"meta":24464,"navigation":194,"path":24465,"seo":24466,"stem":24467,"__hash__":24468},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":24109,"toc":24456},[24110,24113,24116,24120,24127,24130,24134,24137,24143,24153,24158,24219,24222,24226,24229,24234,24250,24256,24410,24414,24420,24426,24441,24447,24453],[11,24111,24107],{"id":24112},"performance",[15,24114,24115],{},"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,24117,24119],{"id":24118},"the-frame-budget","The frame budget",[15,24121,24122,24123,24126],{},"At 60fps, the GPU has ",[159,24124,24125],{},"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,24128,24129],{},"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,24131,24133],{"id":24132},"generator-vs-filter-effects","Generator vs. filter effects",[15,24135,24136],{},"Effects fall into two broad categories with very different cost profiles:",[15,24138,24139,24142],{},[159,24140,24141],{},"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,24144,24145,24148,24149,24152],{},[159,24146,24147],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,24150,24151],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,24154,24155],{},[159,24156,24157],{},"Rough cost categories:",[1794,24159,24160,24173],{},[1797,24161,24162],{},[1800,24163,24164,24167,24170],{},[1803,24165,24166],{},"Category",[1803,24168,24169],{},"Examples",[1803,24171,24172],{},"Relative cost",[1810,24174,24175,24186,24197,24208],{},[1800,24176,24177,24180,24183],{},[1815,24178,24179],{},"Very light",[1815,24181,24182],{},"SolidColor, LinearGradient, RadialGradient",[1815,24184,24185],{},"~0–0.1ms",[1800,24187,24188,24191,24194],{},[1815,24189,24190],{},"Light",[1815,24192,24193],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,24195,24196],{},"~0.1–0.5ms",[1800,24198,24199,24202,24205],{},[1815,24200,24201],{},"Medium",[1815,24203,24204],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,24206,24207],{},"~0.5–2ms",[1800,24209,24210,24213,24216],{},[1815,24211,24212],{},"Heavy",[1815,24214,24215],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,24217,24218],{},"~1-2ms+",[15,24220,24221],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,24223,24225],{"id":24224},"render-to-texture-rtt","Render-to-texture (RTT)",[15,24227,24228],{},"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,24230,24231],{},[159,24232,24233],{},"What triggers RTT:",[34,24235,24236,24239,24247],{},[37,24237,24238],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,24240,1839,24241,13968,24243,24246],{},[99,24242,17675],{},[56,24244,24245],{"href":15533},"Prop Driver"," on any component (the source layer is RTT'd)",[37,24248,24249],{},"The masking system when a layer is used as a mask source",[15,24251,24252,24255],{},[159,24253,24254],{},"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,24257,24259],{"className":334,"code":24258,"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,24260,24261,24266,24274,24282,24290,24298,24313,24321,24329,24337,24345,24353,24357,24362,24370,24378,24386,24394,24402],{"__ignoreMap":178},[220,24262,24263],{"class":222,"line":223},[220,24264,24265],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,24267,24268,24270,24272],{"class":222,"line":179},[220,24269,343],{"class":264},[220,24271,347],{"class":346},[220,24273,359],{"class":264},[220,24275,24276,24278,24280],{"class":222,"line":389},[220,24277,364],{"class":264},[220,24279,367],{"class":346},[220,24281,386],{"class":264},[220,24283,24284,24286,24288],{"class":222,"line":399},[220,24285,364],{"class":264},[220,24287,4471],{"class":346},[220,24289,359],{"class":264},[220,24291,24292,24294,24296],{"class":222,"line":644},[220,24293,2550],{"class":264},[220,24295,13722],{"class":346},[220,24297,359],{"class":264},[220,24299,24300,24302,24304,24306,24308,24311],{"class":222,"line":650},[220,24301,2813],{"class":264},[220,24303,10021],{"class":346},[220,24305,15589],{"class":226},[220,24307,353],{"class":264},[220,24309,24310],{"class":230},"\"20\"",[220,24312,359],{"class":264},[220,24314,24315,24317,24319],{"class":222,"line":656},[220,24316,9058],{"class":264},[220,24318,2553],{"class":346},[220,24320,386],{"class":264},[220,24322,24323,24325,24327],{"class":222,"line":673},[220,24324,9164],{"class":264},[220,24326,10021],{"class":346},[220,24328,359],{"class":264},[220,24330,24331,24333,24335],{"class":222,"line":682},[220,24332,2828],{"class":264},[220,24334,13722],{"class":346},[220,24336,359],{"class":264},[220,24338,24339,24341,24343],{"class":222,"line":691},[220,24340,2567],{"class":264},[220,24342,4471],{"class":346},[220,24344,359],{"class":264},[220,24346,24347,24349,24351],{"class":222,"line":696},[220,24348,402],{"class":264},[220,24350,347],{"class":346},[220,24352,359],{"class":264},[220,24354,24355],{"class":222,"line":702},[220,24356,647],{"emptyLinePlaceholder":194},[220,24358,24359],{"class":222,"line":718},[220,24360,24361],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,24363,24364,24366,24368],{"class":222,"line":727},[220,24365,343],{"class":264},[220,24367,347],{"class":346},[220,24369,359],{"class":264},[220,24371,24372,24374,24376],{"class":222,"line":2664},[220,24373,364],{"class":264},[220,24375,367],{"class":346},[220,24377,386],{"class":264},[220,24379,24380,24382,24384],{"class":222,"line":7900},[220,24381,364],{"class":264},[220,24383,4471],{"class":346},[220,24385,359],{"class":264},[220,24387,24388,24390,24392],{"class":222,"line":7910},[220,24389,2550],{"class":264},[220,24391,2553],{"class":346},[220,24393,386],{"class":264},[220,24395,24396,24398,24400],{"class":222,"line":7921},[220,24397,2567],{"class":264},[220,24399,4471],{"class":346},[220,24401,359],{"class":264},[220,24403,24404,24406,24408],{"class":222,"line":7926},[220,24405,402],{"class":264},[220,24407,347],{"class":346},[220,24409,359],{"class":264},[23,24411,24413],{"id":24412},"practical-tips","Practical tips",[15,24415,24416,24419],{},[159,24417,24418],{},"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,24421,24422,24425],{},[159,24423,24424],{},"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,24427,24428,24431,24432,24434,24435,24437,24438,24440],{},[159,24429,24430],{},"Invisible layers still cost."," A hidden layer with ",[99,24433,7291],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,24436,6919],{}," still renders the layer. Use ",[99,24439,7291],{}," to truly exclude layers you don't need.",[15,24442,24443,24446],{},[159,24444,24445],{},"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,24448,24449,24452],{},[159,24450,24451],{},"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,24454,24455],{},"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":24457},[24458,24459,24460,24461],{"id":24118,"depth":179,"text":24119},{"id":24132,"depth":179,"text":24133},{"id":24224,"depth":179,"text":24225},{"id":24412,"depth":179,"text":24413},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":24107,"description":24462},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":24470,"title":201,"body":24471,"category":188,"description":25099,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":25100,"navigation":194,"path":25101,"seo":25102,"stem":25103,"__hash__":25104},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":24472,"toc":25089},[24473,24477,24480,24484,24496,24500,24506,24537,24539,24546,24640,24642,24648,24650,24658,24760,24767,24791,24793,24800,24892,24896,24905,25024,25031,25037,25041,25048,25062,25065,25067,25086],[11,24474,24476],{"id":24475},"quickstart-javascript","Quickstart (JavaScript)",[15,24478,24479],{},"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,24481,24483],{"id":24482},"install-the-npm-package","Install the npm package",[212,24485,24486],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,24487,24488],{"__ignoreMap":178},[220,24489,24490,24492,24494],{"class":222,"line":223},[220,24491,227],{"class":226},[220,24493,231],{"class":230},[220,24495,234],{"class":230},[23,24497,24499],{"id":24498},"set-up-a-canvas","Set up a canvas",[15,24501,24502,24503,24505],{},"Create a ",[99,24504,586],{}," element in your HTML and give it a size:",[212,24507,24509],{"className":11133,"code":24508,"language":11135,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,24510,24511],{"__ignoreMap":178},[220,24512,24513,24515,24517,24519,24521,24524,24526,24528,24531,24533,24535],{"class":222,"line":223},[220,24514,343],{"class":264},[220,24516,11144],{"class":346},[220,24518,7346],{"class":226},[220,24520,353],{"class":264},[220,24522,24523],{"class":230},"\"my-shader\"",[220,24525,663],{"class":226},[220,24527,353],{"class":264},[220,24529,24530],{"class":230},"\"width: 100%; height: 400px;\"",[220,24532,11161],{"class":264},[220,24534,11144],{"class":346},[220,24536,359],{"class":264},[23,24538,323],{"id":322},[15,24540,24541,24542,24545],{},"Import ",[99,24543,24544],{},"createShader",", pass it the canvas and a list of components:",[212,24547,24549],{"className":251,"code":24548,"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,24550,24551,24561,24565,24583,24587,24601,24605,24623,24632,24636],{"__ignoreMap":178},[220,24552,24553,24555,24557,24559],{"class":222,"line":223},[220,24554,261],{"class":260},[220,24556,9763],{"class":264},[220,24558,268],{"class":260},[220,24560,9768],{"class":230},[220,24562,24563],{"class":222,"line":179},[220,24564,647],{"emptyLinePlaceholder":194},[220,24566,24567,24569,24571,24573,24575,24577,24579,24581],{"class":222,"line":389},[220,24568,1735],{"class":260},[220,24570,3133],{"class":420},[220,24572,1741],{"class":260},[220,24574,3138],{"class":264},[220,24576,3141],{"class":226},[220,24578,2626],{"class":264},[220,24580,10779],{"class":230},[220,24582,2632],{"class":264},[220,24584,24585],{"class":222,"line":399},[220,24586,647],{"emptyLinePlaceholder":194},[220,24588,24589,24591,24593,24595,24597,24599],{"class":222,"line":644},[220,24590,1735],{"class":260},[220,24592,1738],{"class":420},[220,24594,1741],{"class":260},[220,24596,1744],{"class":260},[220,24598,1747],{"class":226},[220,24600,1750],{"class":264},[220,24602,24603],{"class":222,"line":650},[220,24604,1765],{"class":264},[220,24606,24607,24609,24611,24613,24616,24618,24621],{"class":222,"line":656},[220,24608,1770],{"class":264},[220,24610,2462],{"class":230},[220,24612,8414],{"class":264},[220,24614,24615],{"class":230},"'#0f172a'",[220,24617,8420],{"class":264},[220,24619,24620],{"class":230},"'#7c3aed'",[220,24622,4817],{"class":264},[220,24624,24625,24627,24630],{"class":222,"line":673},[220,24626,1770],{"class":264},[220,24628,24629],{"class":230},"'CursorTrail'",[220,24631,2465],{"class":264},[220,24633,24634],{"class":222,"line":682},[220,24635,1787],{"class":264},[220,24637,24638],{"class":222,"line":691},[220,24639,1792],{"class":264},[19,24641],{":preset":578},[15,24643,1839,24644,24647],{},[99,24645,24646],{},"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,24649,594],{"id":593},[15,24651,1839,24652,24654,24655,1554],{},[99,24653,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,24656,24657],{},"ResizeObserver",[212,24659,24661],{"className":11133,"code":24660,"language":11135,"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,24662,24663,24668,24693,24697,24702,24727,24731,24736],{"__ignoreMap":178},[220,24664,24665],{"class":222,"line":223},[220,24666,24667],{"class":609},"\u003C!-- Fixed size -->\n",[220,24669,24670,24672,24674,24676,24678,24681,24683,24685,24687,24689,24691],{"class":222,"line":179},[220,24671,343],{"class":264},[220,24673,11144],{"class":346},[220,24675,7346],{"class":226},[220,24677,353],{"class":264},[220,24679,24680],{"class":230},"\"shader\"",[220,24682,663],{"class":226},[220,24684,353],{"class":264},[220,24686,668],{"class":230},[220,24688,11161],{"class":264},[220,24690,11144],{"class":346},[220,24692,359],{"class":264},[220,24694,24695],{"class":222,"line":389},[220,24696,647],{"emptyLinePlaceholder":194},[220,24698,24699],{"class":222,"line":399},[220,24700,24701],{"class":609},"\u003C!-- Full viewport -->\n",[220,24703,24704,24706,24708,24710,24712,24714,24716,24718,24721,24723,24725],{"class":222,"line":644},[220,24705,343],{"class":264},[220,24707,11144],{"class":346},[220,24709,7346],{"class":226},[220,24711,353],{"class":264},[220,24713,24680],{"class":230},[220,24715,663],{"class":226},[220,24717,353],{"class":264},[220,24719,24720],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,24722,11161],{"class":264},[220,24724,11144],{"class":346},[220,24726,359],{"class":264},[220,24728,24729],{"class":222,"line":650},[220,24730,647],{"emptyLinePlaceholder":194},[220,24732,24733],{"class":222,"line":656},[220,24734,24735],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,24737,24738,24740,24742,24744,24746,24748,24750,24752,24754,24756,24758],{"class":222,"line":673},[220,24739,343],{"class":264},[220,24741,11144],{"class":346},[220,24743,7346],{"class":226},[220,24745,353],{"class":264},[220,24747,24680],{"class":230},[220,24749,350],{"class":226},[220,24751,353],{"class":264},[220,24753,713],{"class":230},[220,24755,11161],{"class":264},[220,24757,11144],{"class":346},[220,24759,359],{"class":264},[15,24761,24762,24763,24766],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,24764,24765],{},"shader.resize()"," to sync:",[212,24768,24770],{"className":251,"code":24769,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,24771,24772,24781],{"__ignoreMap":178},[220,24773,24774,24776,24778],{"class":222,"line":223},[220,24775,10796],{"class":264},[220,24777,353],{"class":260},[220,24779,24780],{"class":230}," '600px'\n",[220,24782,24783,24785,24788],{"class":222,"line":179},[220,24784,9854],{"class":264},[220,24786,24787],{"class":226},"resize",[220,24789,24790],{"class":264},"()\n",[23,24792,1153],{"id":1152},[15,24794,24795,24796,24799],{},"Props are passed in the ",[99,24797,24798],{},"props"," object for each component. All prop names are camelCase:",[212,24801,24803],{"className":251,"code":24802,"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,24804,24805,24819,24823,24827,24835,24839,24849,24859,24868,24876,24880,24884,24888],{"__ignoreMap":178},[220,24806,24807,24809,24811,24813,24815,24817],{"class":222,"line":223},[220,24808,1735],{"class":260},[220,24810,1738],{"class":420},[220,24812,1741],{"class":260},[220,24814,1744],{"class":260},[220,24816,1747],{"class":226},[220,24818,1750],{"class":264},[220,24820,24821],{"class":222,"line":179},[220,24822,1765],{"class":264},[220,24824,24825],{"class":222,"line":389},[220,24826,14635],{"class":264},[220,24828,24829,24831,24833],{"class":222,"line":399},[220,24830,14640],{"class":264},[220,24832,2462],{"class":230},[220,24834,1760],{"class":264},[220,24836,24837],{"class":222,"line":644},[220,24838,14649],{"class":264},[220,24840,24841,24844,24847],{"class":222,"line":650},[220,24842,24843],{"class":264}," colorA: ",[220,24845,24846],{"class":230},"'#ff6b6b'",[220,24848,1760],{"class":264},[220,24850,24851,24854,24857],{"class":222,"line":656},[220,24852,24853],{"class":264}," colorB: ",[220,24855,24856],{"class":230},"'#4ecdc4'",[220,24858,1760],{"class":264},[220,24860,24861,24864,24866],{"class":222,"line":673},[220,24862,24863],{"class":264}," angle: ",[220,24865,1295],{"class":420},[220,24867,1760],{"class":264},[220,24869,24870,24873],{"class":222,"line":682},[220,24871,24872],{"class":264}," colorSpace: ",[220,24874,24875],{"class":230},"'oklch'\n",[220,24877,24878],{"class":222,"line":691},[220,24879,3792],{"class":264},[220,24881,24882],{"class":222,"line":696},[220,24883,3484],{"class":264},[220,24885,24886],{"class":222,"line":702},[220,24887,1787],{"class":264},[220,24889,24890],{"class":222,"line":718},[220,24891,1792],{"class":264},[23,24893,24895],{"id":24894},"updating-at-runtime","Updating at runtime",[15,24897,24898,24899,24901,24902,24904],{},"Assign an ",[99,24900,7302],{}," to any component, then use ",[99,24903,19058],{}," to change its props at any time:",[212,24906,24908],{"className":251,"code":24907,"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,24909,24910,24924,24928,24953,24957,24961,24965,24970,25002,25020],{"__ignoreMap":178},[220,24911,24912,24914,24916,24918,24920,24922],{"class":222,"line":223},[220,24913,1735],{"class":260},[220,24915,1738],{"class":420},[220,24917,1741],{"class":260},[220,24919,1744],{"class":260},[220,24921,1747],{"class":226},[220,24923,1750],{"class":264},[220,24925,24926],{"class":222,"line":179},[220,24927,1765],{"class":264},[220,24929,24930,24932,24934,24936,24938,24940,24942,24944,24946,24949,24951],{"class":222,"line":389},[220,24931,1770],{"class":264},[220,24933,2462],{"class":230},[220,24935,3209],{"class":264},[220,24937,9821],{"class":230},[220,24939,8414],{"class":264},[220,24941,24615],{"class":230},[220,24943,8420],{"class":264},[220,24945,24620],{"class":230},[220,24947,24948],{"class":264},", angle: ",[220,24950,6919],{"class":420},[220,24952,1782],{"class":264},[220,24954,24955],{"class":222,"line":399},[220,24956,1787],{"class":264},[220,24958,24959],{"class":222,"line":644},[220,24960,1792],{"class":264},[220,24962,24963],{"class":222,"line":650},[220,24964,647],{"emptyLinePlaceholder":194},[220,24966,24967],{"class":222,"line":656},[220,24968,24969],{"class":609},"\u002F\u002F Hook up a slider\n",[220,24971,24972,24975,24978,24980,24983,24985,24988,24990,24993,24995,24998,25000],{"class":222,"line":673},[220,24973,24974],{"class":264},"document.",[220,24976,24977],{"class":226},"querySelector",[220,24979,2626],{"class":264},[220,24981,24982],{"class":230},"'#angle-slider'",[220,24984,13693],{"class":264},[220,24986,24987],{"class":226},"addEventListener",[220,24989,2626],{"class":264},[220,24991,24992],{"class":230},"'input'",[220,24994,1895],{"class":264},[220,24996,24997],{"class":9077},"e",[220,24999,9080],{"class":260},[220,25001,3241],{"class":264},[220,25003,25004,25006,25008,25010,25012,25014,25017],{"class":222,"line":682},[220,25005,15428],{"class":264},[220,25007,9857],{"class":226},[220,25009,2626],{"class":264},[220,25011,9821],{"class":230},[220,25013,9864],{"class":264},[220,25015,25016],{"class":226},"Number",[220,25018,25019],{"class":264},"(e.target.value) })\n",[220,25021,25022],{"class":222,"line":691},[220,25023,1792],{"class":264},[15,25025,25026,25027,25030],{},"When ",[99,25028,25029],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,25032,25033,25034,25036],{},"Browse the ",[56,25035,1160],{"href":1159}," for the full prop reference on every component.",[23,25038,25040],{"id":25039},"cleanup","Cleanup",[15,25042,25043,25044,25047],{},"When you're done, call ",[99,25045,25046],{},"destroy()"," to free GPU resources:",[212,25049,25051],{"className":251,"code":25050,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,25052,25053],{"__ignoreMap":178},[220,25054,25055,25057,25060],{"class":222,"line":223},[220,25056,9854],{"class":264},[220,25058,25059],{"class":226},"destroy",[220,25061,24790],{"class":264},[15,25063,25064],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,25066,1474],{"id":1473},[34,25068,25069,25073,25077,25082],{},[37,25070,25071,1483],{},[56,25072,1482],{"href":1481},[37,25074,25075,1490],{},[56,25076,1489],{"href":1488},[37,25078,25079,25081],{},[56,25080,15559],{"href":15533}," — animate and mouse-track props declaratively",[37,25083,25084,1502],{},[56,25085,1160],{"href":1159},[1504,25087,25088],{},"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":25090},[25091,25092,25093,25094,25095,25096,25097,25098],{"id":24482,"depth":179,"text":24483},{"id":24498,"depth":179,"text":24499},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":24894,"depth":179,"text":24895},{"id":25039,"depth":179,"text":25040},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":25099},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":25106,"title":201,"body":25107,"category":188,"description":25741,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":25742,"navigation":194,"path":25743,"seo":25744,"stem":25745,"__hash__":25746},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":25108,"toc":25732},[25109,25113,25117,25119,25131,25135,25149,25151,25154,25208,25210,25217,25219,25232,25366,25380,25382,25385,25457,25464,25692,25697,25701,25705,25713,25715,25729],[11,25110,25112],{"id":25111},"quickstart-react","Quickstart (React)",[25114,25115],"you-tube-embed",{"id":25116},"G7kzM8M7hA4",[23,25118,24483],{"id":24482},[212,25120,25121],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,25122,25123],{"__ignoreMap":178},[220,25124,25125,25127,25129],{"class":222,"line":223},[220,25126,227],{"class":226},[220,25128,231],{"class":230},[220,25130,234],{"class":230},[23,25132,25134],{"id":25133},"import-some-components","Import some components",[212,25136,25137],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,25138,25139],{"__ignoreMap":178},[220,25140,25141,25143,25145,25147],{"class":222,"line":223},[220,25142,261],{"class":260},[220,25144,265],{"class":264},[220,25146,268],{"class":260},[220,25148,287],{"class":230},[23,25150,323],{"id":322},[15,25152,25153],{},"Let's create a very simple shader:",[212,25155,25156],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,25157,25158,25172,25192,25200],{"__ignoreMap":178},[220,25159,25160,25162,25164,25166,25168,25170],{"class":222,"line":223},[220,25161,343],{"class":264},[220,25163,347],{"class":420},[220,25165,423],{"class":226},[220,25167,353],{"class":260},[220,25169,356],{"class":230},[220,25171,359],{"class":264},[220,25173,25174,25176,25178,25180,25182,25184,25186,25188,25190],{"class":222,"line":179},[220,25175,364],{"class":264},[220,25177,367],{"class":420},[220,25179,370],{"class":226},[220,25181,353],{"class":260},[220,25183,375],{"class":230},[220,25185,378],{"class":226},[220,25187,353],{"class":260},[220,25189,383],{"class":230},[220,25191,386],{"class":264},[220,25193,25194,25196,25198],{"class":222,"line":389},[220,25195,364],{"class":264},[220,25197,394],{"class":420},[220,25199,386],{"class":264},[220,25201,25202,25204,25206],{"class":222,"line":399},[220,25203,402],{"class":264},[220,25205,347],{"class":420},[220,25207,359],{"class":264},[19,25209],{":preset":578},[15,25211,25212,583,25214,25216],{},[99,25213,101],{},[99,25215,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,25218,594],{"id":593},[15,25220,1839,25221,25223,25224,17006,25227,25229,25230,590],{},[99,25222,586],{}," has no intrinsic size. The ",[99,25225,25226],{},"className",[99,25228,1504],{}," you apply to ",[99,25231,101],{},[212,25233,25235],{"className":409,"code":25234,"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,25236,25237,25245,25259,25267,25275,25279,25287,25307,25315,25323,25327,25336,25350,25358],{"__ignoreMap":178},[220,25238,25239,25241,25243],{"class":222,"line":223},[220,25240,743],{"class":264},[220,25242,746],{"class":609},[220,25244,749],{"class":264},[220,25246,25247,25249,25251,25253,25255,25257],{"class":222,"line":179},[220,25248,343],{"class":264},[220,25250,347],{"class":420},[220,25252,423],{"class":226},[220,25254,353],{"class":260},[220,25256,623],{"class":230},[220,25258,359],{"class":264},[220,25260,25261,25263,25265],{"class":222,"line":389},[220,25262,364],{"class":264},[220,25264,367],{"class":420},[220,25266,386],{"class":264},[220,25268,25269,25271,25273],{"class":222,"line":399},[220,25270,402],{"class":264},[220,25272,347],{"class":420},[220,25274,359],{"class":264},[220,25276,25277],{"class":222,"line":644},[220,25278,647],{"emptyLinePlaceholder":194},[220,25280,25281,25283,25285],{"class":222,"line":650},[220,25282,743],{"class":264},[220,25284,790],{"class":609},[220,25286,749],{"class":264},[220,25288,25289,25291,25293,25295,25297,25299,25301,25303,25305],{"class":222,"line":656},[220,25290,343],{"class":264},[220,25292,347],{"class":420},[220,25294,663],{"class":226},[220,25296,353],{"class":260},[220,25298,805],{"class":264},[220,25300,808],{"class":230},[220,25302,811],{"class":264},[220,25304,814],{"class":230},[220,25306,817],{"class":264},[220,25308,25309,25311,25313],{"class":222,"line":673},[220,25310,364],{"class":264},[220,25312,367],{"class":420},[220,25314,386],{"class":264},[220,25316,25317,25319,25321],{"class":222,"line":682},[220,25318,402],{"class":264},[220,25320,347],{"class":420},[220,25322,359],{"class":264},[220,25324,25325],{"class":222,"line":691},[220,25326,647],{"emptyLinePlaceholder":194},[220,25328,25329,25331,25334],{"class":222,"line":696},[220,25330,743],{"class":264},[220,25332,25333],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,25335,749],{"class":264},[220,25337,25338,25340,25342,25344,25346,25348],{"class":222,"line":702},[220,25339,343],{"class":264},[220,25341,347],{"class":420},[220,25343,423],{"class":226},[220,25345,353],{"class":260},[220,25347,713],{"class":230},[220,25349,359],{"class":264},[220,25351,25352,25354,25356],{"class":222,"line":718},[220,25353,364],{"class":264},[220,25355,367],{"class":420},[220,25357,386],{"class":264},[220,25359,25360,25362,25364],{"class":222,"line":727},[220,25361,402],{"class":264},[220,25363,347],{"class":420},[220,25365,359],{"class":264},[15,25367,25368,25369,17006,25371,25373,25374,25376,25377,25379],{},"Applying a ",[99,25370,25226],{},[99,25372,1504],{}," to the ",[99,25375,101],{}," tag is preferred over trying to target the ",[99,25378,586],{}," element directly, as the internal DOM structure may change in the future.",[23,25381,1153],{"id":1152},[15,25383,25384],{},"Pass props directly to configure each component. All props use camelCase:",[212,25386,25387],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,25388,25389,25403,25409,25417,25425,25437,25445,25449],{"__ignoreMap":178},[220,25390,25391,25393,25395,25397,25399,25401],{"class":222,"line":223},[220,25392,343],{"class":264},[220,25394,347],{"class":420},[220,25396,423],{"class":226},[220,25398,353],{"class":260},[220,25400,356],{"class":230},[220,25402,359],{"class":264},[220,25404,25405,25407],{"class":222,"line":179},[220,25406,364],{"class":264},[220,25408,1189],{"class":420},[220,25410,25411,25413,25415],{"class":222,"line":389},[220,25412,1194],{"class":226},[220,25414,353],{"class":260},[220,25416,1199],{"class":230},[220,25418,25419,25421,25423],{"class":222,"line":399},[220,25420,1204],{"class":226},[220,25422,353],{"class":260},[220,25424,1209],{"class":230},[220,25426,25427,25429,25431,25433,25435],{"class":222,"line":644},[220,25428,1288],{"class":226},[220,25430,353],{"class":260},[220,25432,743],{"class":264},[220,25434,1295],{"class":420},[220,25436,749],{"class":264},[220,25438,25439,25441,25443],{"class":222,"line":650},[220,25440,1302],{"class":226},[220,25442,353],{"class":260},[220,25444,1229],{"class":230},[220,25446,25447],{"class":222,"line":656},[220,25448,1234],{"class":264},[220,25450,25451,25453,25455],{"class":222,"line":673},[220,25452,402],{"class":264},[220,25454,347],{"class":420},[220,25456,359],{"class":264},[15,25458,25459,25460,25463],{},"Props also accept state — ",[99,25461,25462],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,25465,25467],{"className":409,"code":25466,"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,25468,25469,25479,25490,25494,25509,25533,25537,25543,25547,25561,25588,25596,25600,25607,25617,25630,25644,25654,25676,25680,25684,25688],{"__ignoreMap":178},[220,25470,25471,25473,25475,25477],{"class":222,"line":223},[220,25472,261],{"class":260},[220,25474,2682],{"class":264},[220,25476,268],{"class":260},[220,25478,2687],{"class":230},[220,25480,25481,25483,25486,25488],{"class":222,"line":179},[220,25482,261],{"class":260},[220,25484,25485],{"class":264}," { Shader, LinearGradient } ",[220,25487,268],{"class":260},[220,25489,287],{"class":230},[220,25491,25492],{"class":222,"line":389},[220,25493,647],{"emptyLinePlaceholder":194},[220,25495,25496,25499,25502,25504,25507],{"class":222,"line":399},[220,25497,25498],{"class":260},"export",[220,25500,25501],{"class":260}," default",[220,25503,10193],{"class":260},[220,25505,25506],{"class":226}," MyShader",[220,25508,2647],{"class":264},[220,25510,25511,25513,25515,25517,25519,25521,25523,25525,25527,25529,25531],{"class":222,"line":644},[220,25512,2705],{"class":260},[220,25514,2708],{"class":264},[220,25516,9013],{"class":420},[220,25518,1895],{"class":264},[220,25520,9018],{"class":420},[220,25522,2719],{"class":264},[220,25524,353],{"class":260},[220,25526,2724],{"class":226},[220,25528,2626],{"class":264},[220,25530,6919],{"class":420},[220,25532,2632],{"class":264},[220,25534,25535],{"class":222,"line":650},[220,25536,647],{"emptyLinePlaceholder":194},[220,25538,25539,25541],{"class":222,"line":656},[220,25540,2739],{"class":260},[220,25542,2742],{"class":264},[220,25544,25545],{"class":222,"line":673},[220,25546,9045],{"class":264},[220,25548,25549,25551,25553,25555,25557,25559],{"class":222,"line":682},[220,25550,2813],{"class":264},[220,25552,347],{"class":420},[220,25554,423],{"class":226},[220,25556,353],{"class":260},[220,25558,356],{"class":230},[220,25560,359],{"class":264},[220,25562,25563,25565,25567,25569,25571,25574,25576,25578,25581,25583,25585],{"class":222,"line":691},[220,25564,9058],{"class":264},[220,25566,367],{"class":420},[220,25568,370],{"class":226},[220,25570,353],{"class":260},[220,25572,25573],{"class":230},"\"#ff6b6b\"",[220,25575,378],{"class":226},[220,25577,353],{"class":260},[220,25579,25580],{"class":230},"\"#4ecdc4\"",[220,25582,8780],{"class":226},[220,25584,353],{"class":260},[220,25586,25587],{"class":264},"{angle} \u002F>\n",[220,25589,25590,25592,25594],{"class":222,"line":696},[220,25591,9164],{"class":264},[220,25593,347],{"class":420},[220,25595,359],{"class":264},[220,25597,25598],{"class":222,"line":702},[220,25599,647],{"emptyLinePlaceholder":194},[220,25601,25602,25604],{"class":222,"line":718},[220,25603,2813],{"class":264},[220,25605,25606],{"class":346},"input\n",[220,25608,25609,25612,25614],{"class":222,"line":727},[220,25610,25611],{"class":226}," type",[220,25613,353],{"class":260},[220,25615,25616],{"class":230},"\"range\"\n",[220,25618,25619,25622,25624,25626,25628],{"class":222,"line":2664},[220,25620,25621],{"class":226}," min",[220,25623,353],{"class":260},[220,25625,743],{"class":264},[220,25627,6919],{"class":420},[220,25629,749],{"class":264},[220,25631,25632,25635,25637,25639,25642],{"class":222,"line":7900},[220,25633,25634],{"class":226}," max",[220,25636,353],{"class":260},[220,25638,743],{"class":264},[220,25640,25641],{"class":420},"360",[220,25643,749],{"class":264},[220,25645,25646,25649,25651],{"class":222,"line":7910},[220,25647,25648],{"class":226}," value",[220,25650,353],{"class":260},[220,25652,25653],{"class":264},"{angle}\n",[220,25655,25656,25659,25661,25663,25665,25667,25669,25671,25673],{"class":222,"line":7921},[220,25657,25658],{"class":226}," onChange",[220,25660,353],{"class":260},[220,25662,743],{"class":264},[220,25664,24997],{"class":9077},[220,25666,9080],{"class":260},[220,25668,9072],{"class":226},[220,25670,2626],{"class":264},[220,25672,25016],{"class":226},[220,25674,25675],{"class":264},"(e.target.value))}\n",[220,25677,25678],{"class":222,"line":7926},[220,25679,15298],{"class":264},[220,25681,25682],{"class":222,"line":9249},[220,25683,9246],{"class":264},[220,25685,25686],{"class":222,"line":9254},[220,25687,2837],{"class":264},[220,25689,25690],{"class":222,"line":10329},[220,25691,749],{"class":264},[15,25693,25026,25694,25696],{},[99,25695,9013],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,25698,25033,25699,25036],{},[56,25700,1160],{"href":1159},[23,25702,25704],{"id":25703},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,25706,25707,25708,25712],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,25709,25711],{"href":25710},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,25714,1474],{"id":1473},[34,25716,25717,25721,25725],{},[37,25718,25719,1483],{},[56,25720,1482],{"href":1481},[37,25722,25723,1490],{},[56,25724,1489],{"href":1488},[37,25726,25727,1502],{},[56,25728,1160],{"href":1159},[1504,25730,25731],{},"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":25733},[25734,25735,25736,25737,25738,25739,25740],{"id":24482,"depth":179,"text":24483},{"id":25133,"depth":179,"text":25134},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":25703,"depth":179,"text":25704},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":25741},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":25748,"title":25711,"body":25749,"category":2240,"description":26639,"exclude":190,"extension":191,"forceFramework":190,"icon":26640,"meta":26641,"navigation":194,"path":25710,"seo":26642,"stem":26643,"__hash__":26644},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":25750,"toc":26630},[25751,25755,25758,25765,25768,25877,25880,25970,25975,25985,25991,26116,26119,26123,26129,26247,26251,26254,26361,26452,26456,26459,26627],[11,25752,25754],{"id":25753},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,25756,25757],{},"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,25759,25761,25762],{"id":25760},"app-router-use-client","App Router: ",[99,25763,25764],{},"'use client'",[15,25766,25767],{},"In Next.js App Router, create a client component wrapper:",[212,25769,25771],{"className":409,"code":25770,"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,25772,25773,25778,25783,25787,25797,25801,25813,25819,25833,25853,25861,25869,25873],{"__ignoreMap":178},[220,25774,25775],{"class":222,"line":223},[220,25776,25777],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,25779,25780],{"class":222,"line":179},[220,25781,25782],{"class":230},"'use client'\n",[220,25784,25785],{"class":222,"line":389},[220,25786,647],{"emptyLinePlaceholder":194},[220,25788,25789,25791,25793,25795],{"class":222,"line":399},[220,25790,261],{"class":260},[220,25792,265],{"class":264},[220,25794,268],{"class":260},[220,25796,287],{"class":230},[220,25798,25799],{"class":222,"line":644},[220,25800,647],{"emptyLinePlaceholder":194},[220,25802,25803,25805,25807,25809,25811],{"class":222,"line":650},[220,25804,25498],{"class":260},[220,25806,25501],{"class":260},[220,25808,10193],{"class":260},[220,25810,25506],{"class":226},[220,25812,2647],{"class":264},[220,25814,25815,25817],{"class":222,"line":656},[220,25816,2739],{"class":260},[220,25818,2742],{"class":264},[220,25820,25821,25823,25825,25827,25829,25831],{"class":222,"line":673},[220,25822,2550],{"class":264},[220,25824,347],{"class":420},[220,25826,423],{"class":226},[220,25828,353],{"class":260},[220,25830,356],{"class":230},[220,25832,359],{"class":264},[220,25834,25835,25837,25839,25841,25843,25845,25847,25849,25851],{"class":222,"line":682},[220,25836,2813],{"class":264},[220,25838,367],{"class":420},[220,25840,370],{"class":226},[220,25842,353],{"class":260},[220,25844,375],{"class":230},[220,25846,378],{"class":226},[220,25848,353],{"class":260},[220,25850,383],{"class":230},[220,25852,386],{"class":264},[220,25854,25855,25857,25859],{"class":222,"line":691},[220,25856,2813],{"class":264},[220,25858,394],{"class":420},[220,25860,386],{"class":264},[220,25862,25863,25865,25867],{"class":222,"line":696},[220,25864,2828],{"class":264},[220,25866,347],{"class":420},[220,25868,359],{"class":264},[220,25870,25871],{"class":222,"line":702},[220,25872,2837],{"class":264},[220,25874,25875],{"class":222,"line":718},[220,25876,749],{"class":264},[15,25878,25879],{},"Then use it in a Server Component:",[212,25881,25883],{"className":409,"code":25882,"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,25884,25885,25890,25902,25906,25919,25925,25933,25942,25954,25962,25966],{"__ignoreMap":178},[220,25886,25887],{"class":222,"line":223},[220,25888,25889],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,25891,25892,25894,25897,25899],{"class":222,"line":179},[220,25893,261],{"class":260},[220,25895,25896],{"class":264}," MyShader ",[220,25898,268],{"class":260},[220,25900,25901],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,25903,25904],{"class":222,"line":389},[220,25905,647],{"emptyLinePlaceholder":194},[220,25907,25908,25910,25912,25914,25917],{"class":222,"line":399},[220,25909,25498],{"class":260},[220,25911,25501],{"class":260},[220,25913,10193],{"class":260},[220,25915,25916],{"class":226}," Page",[220,25918,2647],{"class":264},[220,25920,25921,25923],{"class":222,"line":644},[220,25922,2739],{"class":260},[220,25924,2742],{"class":264},[220,25926,25927,25929,25931],{"class":222,"line":650},[220,25928,2550],{"class":264},[220,25930,10892],{"class":346},[220,25932,359],{"class":264},[220,25934,25935,25937,25940],{"class":222,"line":656},[220,25936,2813],{"class":264},[220,25938,25939],{"class":420},"MyShader",[220,25941,386],{"class":264},[220,25943,25944,25946,25948,25950,25952],{"class":222,"line":673},[220,25945,2813],{"class":264},[220,25947,11],{"class":346},[220,25949,11181],{"class":264},[220,25951,11],{"class":346},[220,25953,359],{"class":264},[220,25955,25956,25958,25960],{"class":222,"line":682},[220,25957,2828],{"class":264},[220,25959,10892],{"class":346},[220,25961,359],{"class":264},[220,25963,25964],{"class":222,"line":691},[220,25965,2837],{"class":264},[220,25967,25968],{"class":222,"line":696},[220,25969,749],{"class":264},[15,25971,1839,25972,25974],{},[99,25973,25764],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,25976,25761,25978,25981,25982],{"id":25977},"app-router-nextdynamic-with-ssr-false",[99,25979,25980],{},"next\u002Fdynamic"," with ",[99,25983,25984],{},"ssr: false",[15,25986,25987,25988,25990],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,25989,25980],{}," to disable SSR:",[212,25992,25994],{"className":409,"code":25993,"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,25995,25996,26001,26013,26017,26031,26049,26058,26062,26066,26078,26084,26092,26100,26108,26112],{"__ignoreMap":178},[220,25997,25998],{"class":222,"line":223},[220,25999,26000],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,26002,26003,26005,26008,26010],{"class":222,"line":179},[220,26004,261],{"class":260},[220,26006,26007],{"class":264}," dynamic ",[220,26009,268],{"class":260},[220,26011,26012],{"class":230}," 'next\u002Fdynamic'\n",[220,26014,26015],{"class":222,"line":389},[220,26016,647],{"emptyLinePlaceholder":194},[220,26018,26019,26021,26023,26025,26028],{"class":222,"line":399},[220,26020,1735],{"class":260},[220,26022,25506],{"class":420},[220,26024,1741],{"class":260},[220,26026,26027],{"class":226}," dynamic",[220,26029,26030],{"class":264},"(\n",[220,26032,26033,26036,26038,26041,26043,26046],{"class":222,"line":644},[220,26034,26035],{"class":264}," () ",[220,26037,2762],{"class":260},[220,26039,26040],{"class":260}," import",[220,26042,2626],{"class":264},[220,26044,26045],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,26047,26048],{"class":264},"),\n",[220,26050,26051,26054,26056],{"class":222,"line":650},[220,26052,26053],{"class":264}," { ssr: ",[220,26055,2629],{"class":420},[220,26057,18302],{"class":264},[220,26059,26060],{"class":222,"line":656},[220,26061,2632],{"class":264},[220,26063,26064],{"class":222,"line":673},[220,26065,647],{"emptyLinePlaceholder":194},[220,26067,26068,26070,26072,26074,26076],{"class":222,"line":682},[220,26069,25498],{"class":260},[220,26071,25501],{"class":260},[220,26073,10193],{"class":260},[220,26075,25916],{"class":226},[220,26077,2647],{"class":264},[220,26079,26080,26082],{"class":222,"line":691},[220,26081,2739],{"class":260},[220,26083,2742],{"class":264},[220,26085,26086,26088,26090],{"class":222,"line":696},[220,26087,2550],{"class":264},[220,26089,10892],{"class":346},[220,26091,359],{"class":264},[220,26093,26094,26096,26098],{"class":222,"line":702},[220,26095,2813],{"class":264},[220,26097,25939],{"class":420},[220,26099,386],{"class":264},[220,26101,26102,26104,26106],{"class":222,"line":718},[220,26103,2828],{"class":264},[220,26105,10892],{"class":346},[220,26107,359],{"class":264},[220,26109,26110],{"class":222,"line":727},[220,26111,2837],{"class":264},[220,26113,26114],{"class":222,"line":2664},[220,26115,749],{"class":264},[15,26117,26118],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,26120,26122],{"id":26121},"pages-router","Pages Router",[15,26124,26125,26126,26128],{},"In the Pages Router, the same ",[99,26127,25980],{}," approach works:",[212,26130,26132],{"className":409,"code":26131,"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,26133,26134,26139,26149,26153,26165,26180,26188,26192,26196,26209,26215,26223,26231,26239,26243],{"__ignoreMap":178},[220,26135,26136],{"class":222,"line":223},[220,26137,26138],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,26140,26141,26143,26145,26147],{"class":222,"line":179},[220,26142,261],{"class":260},[220,26144,26007],{"class":264},[220,26146,268],{"class":260},[220,26148,26012],{"class":230},[220,26150,26151],{"class":222,"line":389},[220,26152,647],{"emptyLinePlaceholder":194},[220,26154,26155,26157,26159,26161,26163],{"class":222,"line":399},[220,26156,1735],{"class":260},[220,26158,25506],{"class":420},[220,26160,1741],{"class":260},[220,26162,26027],{"class":226},[220,26164,26030],{"class":264},[220,26166,26167,26169,26171,26173,26175,26178],{"class":222,"line":644},[220,26168,26035],{"class":264},[220,26170,2762],{"class":260},[220,26172,26040],{"class":260},[220,26174,2626],{"class":264},[220,26176,26177],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,26179,26048],{"class":264},[220,26181,26182,26184,26186],{"class":222,"line":650},[220,26183,26053],{"class":264},[220,26185,2629],{"class":420},[220,26187,18302],{"class":264},[220,26189,26190],{"class":222,"line":656},[220,26191,2632],{"class":264},[220,26193,26194],{"class":222,"line":673},[220,26195,647],{"emptyLinePlaceholder":194},[220,26197,26198,26200,26202,26204,26207],{"class":222,"line":682},[220,26199,25498],{"class":260},[220,26201,25501],{"class":260},[220,26203,10193],{"class":260},[220,26205,26206],{"class":226}," Home",[220,26208,2647],{"class":264},[220,26210,26211,26213],{"class":222,"line":691},[220,26212,2739],{"class":260},[220,26214,2742],{"class":264},[220,26216,26217,26219,26221],{"class":222,"line":696},[220,26218,2550],{"class":264},[220,26220,8817],{"class":346},[220,26222,359],{"class":264},[220,26224,26225,26227,26229],{"class":222,"line":702},[220,26226,2813],{"class":264},[220,26228,25939],{"class":420},[220,26230,386],{"class":264},[220,26232,26233,26235,26237],{"class":222,"line":718},[220,26234,2828],{"class":264},[220,26236,8817],{"class":346},[220,26238,359],{"class":264},[220,26240,26241],{"class":222,"line":727},[220,26242,2837],{"class":264},[220,26244,26245],{"class":222,"line":2664},[220,26246,749],{"class":264},[23,26248,26250],{"id":26249},"in-a-root-layout","In a root layout",[15,26252,26253],{},"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,26255,26257],{"className":409,"code":26256,"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,26258,26259,26264,26276,26280,26300,26306,26314,26323,26332,26337,26345,26353,26357],{"__ignoreMap":178},[220,26260,26261],{"class":222,"line":223},[220,26262,26263],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,26265,26266,26268,26271,26273],{"class":222,"line":179},[220,26267,261],{"class":260},[220,26269,26270],{"class":264}," BackgroundShader ",[220,26272,268],{"class":260},[220,26274,26275],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,26277,26278],{"class":222,"line":389},[220,26279,647],{"emptyLinePlaceholder":194},[220,26281,26282,26284,26286,26288,26291,26294,26297],{"class":222,"line":399},[220,26283,25498],{"class":260},[220,26285,25501],{"class":260},[220,26287,10193],{"class":260},[220,26289,26290],{"class":226}," RootLayout",[220,26292,26293],{"class":264},"({ ",[220,26295,26296],{"class":9077},"children",[220,26298,26299],{"class":264}," }) {\n",[220,26301,26302,26304],{"class":222,"line":644},[220,26303,2739],{"class":260},[220,26305,2742],{"class":264},[220,26307,26308,26310,26312],{"class":222,"line":650},[220,26309,2550],{"class":264},[220,26311,11135],{"class":346},[220,26313,359],{"class":264},[220,26315,26316,26318,26321],{"class":222,"line":656},[220,26317,2813],{"class":264},[220,26319,26320],{"class":346},"body",[220,26322,359],{"class":264},[220,26324,26325,26327,26330],{"class":222,"line":673},[220,26326,9058],{"class":264},[220,26328,26329],{"class":420},"BackgroundShader",[220,26331,386],{"class":264},[220,26333,26334],{"class":222,"line":682},[220,26335,26336],{"class":264}," {children}\n",[220,26338,26339,26341,26343],{"class":222,"line":691},[220,26340,9164],{"class":264},[220,26342,26320],{"class":346},[220,26344,359],{"class":264},[220,26346,26347,26349,26351],{"class":222,"line":696},[220,26348,2828],{"class":264},[220,26350,11135],{"class":346},[220,26352,359],{"class":264},[220,26354,26355],{"class":222,"line":702},[220,26356,2837],{"class":264},[220,26358,26359],{"class":222,"line":718},[220,26360,749],{"class":264},[212,26362,26364],{"className":409,"code":26363,"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,26365,26366,26371,26375,26379,26390,26394,26407,26413,26428,26436,26444,26448],{"__ignoreMap":178},[220,26367,26368],{"class":222,"line":223},[220,26369,26370],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,26372,26373],{"class":222,"line":179},[220,26374,25782],{"class":230},[220,26376,26377],{"class":222,"line":389},[220,26378,647],{"emptyLinePlaceholder":194},[220,26380,26381,26383,26386,26388],{"class":222,"line":399},[220,26382,261],{"class":260},[220,26384,26385],{"class":264}," { Shader, Aurora } ",[220,26387,268],{"class":260},[220,26389,287],{"class":230},[220,26391,26392],{"class":222,"line":644},[220,26393,647],{"emptyLinePlaceholder":194},[220,26395,26396,26398,26400,26402,26405],{"class":222,"line":650},[220,26397,25498],{"class":260},[220,26399,25501],{"class":260},[220,26401,10193],{"class":260},[220,26403,26404],{"class":226}," BackgroundShader",[220,26406,2647],{"class":264},[220,26408,26409,26411],{"class":222,"line":656},[220,26410,2739],{"class":260},[220,26412,2742],{"class":264},[220,26414,26415,26417,26419,26421,26423,26426],{"class":222,"line":673},[220,26416,2550],{"class":264},[220,26418,347],{"class":420},[220,26420,423],{"class":226},[220,26422,353],{"class":260},[220,26424,26425],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,26427,359],{"class":264},[220,26429,26430,26432,26434],{"class":222,"line":682},[220,26431,2813],{"class":264},[220,26433,10871],{"class":420},[220,26435,386],{"class":264},[220,26437,26438,26440,26442],{"class":222,"line":691},[220,26439,2828],{"class":264},[220,26441,347],{"class":420},[220,26443,359],{"class":264},[220,26445,26446],{"class":222,"line":696},[220,26447,2837],{"class":264},[220,26449,26450],{"class":222,"line":702},[220,26451,749],{"class":264},[23,26453,26455],{"id":26454},"react-without-nextjs","React (without Next.js)",[15,26457,26458],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,26460,26462],{"className":409,"code":26461,"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,26463,26464,26475,26485,26489,26501,26527,26531,26541,26552,26556,26560,26579,26583,26589,26603,26611,26619,26623],{"__ignoreMap":178},[220,26465,26466,26468,26471,26473],{"class":222,"line":223},[220,26467,261],{"class":260},[220,26469,26470],{"class":264}," { useState, useEffect } ",[220,26472,268],{"class":260},[220,26474,2687],{"class":230},[220,26476,26477,26479,26481,26483],{"class":222,"line":179},[220,26478,261],{"class":260},[220,26480,25485],{"class":264},[220,26482,268],{"class":260},[220,26484,287],{"class":230},[220,26486,26487],{"class":222,"line":389},[220,26488,647],{"emptyLinePlaceholder":194},[220,26490,26491,26493,26495,26497,26499],{"class":222,"line":399},[220,26492,25498],{"class":260},[220,26494,25501],{"class":260},[220,26496,10193],{"class":260},[220,26498,25506],{"class":226},[220,26500,2647],{"class":264},[220,26502,26503,26505,26507,26510,26512,26515,26517,26519,26521,26523,26525],{"class":222,"line":644},[220,26504,2705],{"class":260},[220,26506,2708],{"class":264},[220,26508,26509],{"class":420},"mounted",[220,26511,1895],{"class":264},[220,26513,26514],{"class":420},"setMounted",[220,26516,2719],{"class":264},[220,26518,353],{"class":260},[220,26520,2724],{"class":226},[220,26522,2626],{"class":264},[220,26524,2629],{"class":420},[220,26526,2632],{"class":264},[220,26528,26529],{"class":222,"line":650},[220,26530,647],{"emptyLinePlaceholder":194},[220,26532,26533,26535,26537,26539],{"class":222,"line":656},[220,26534,15092],{"class":226},[220,26536,14822],{"class":264},[220,26538,2762],{"class":260},[220,26540,3241],{"class":264},[220,26542,26543,26546,26548,26550],{"class":222,"line":673},[220,26544,26545],{"class":226}," setMounted",[220,26547,2626],{"class":264},[220,26549,2332],{"class":420},[220,26551,2632],{"class":264},[220,26553,26554],{"class":222,"line":682},[220,26555,15186],{"class":264},[220,26557,26558],{"class":222,"line":691},[220,26559,647],{"emptyLinePlaceholder":194},[220,26561,26562,26565,26567,26570,26573,26576],{"class":222,"line":696},[220,26563,26564],{"class":260}," if",[220,26566,13689],{"class":264},[220,26568,26569],{"class":260},"!",[220,26571,26572],{"class":264},"mounted) ",[220,26574,26575],{"class":260},"return",[220,26577,26578],{"class":420}," null\n",[220,26580,26581],{"class":222,"line":702},[220,26582,647],{"emptyLinePlaceholder":194},[220,26584,26585,26587],{"class":222,"line":718},[220,26586,2739],{"class":260},[220,26588,2742],{"class":264},[220,26590,26591,26593,26595,26597,26599,26601],{"class":222,"line":727},[220,26592,2550],{"class":264},[220,26594,347],{"class":420},[220,26596,423],{"class":226},[220,26598,353],{"class":260},[220,26600,356],{"class":230},[220,26602,359],{"class":264},[220,26604,26605,26607,26609],{"class":222,"line":2664},[220,26606,2813],{"class":264},[220,26608,367],{"class":420},[220,26610,386],{"class":264},[220,26612,26613,26615,26617],{"class":222,"line":7900},[220,26614,2828],{"class":264},[220,26616,347],{"class":420},[220,26618,359],{"class":264},[220,26620,26621],{"class":222,"line":7910},[220,26622,2837],{"class":264},[220,26624,26625],{"class":222,"line":7921},[220,26626,749],{"class":264},[1504,26628,26629],{},"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":26631},[26632,26634,26636,26637,26638],{"id":25760,"depth":179,"text":26633},"App Router: 'use client'",{"id":25977,"depth":179,"text":26635},"App Router: next\u002Fdynamic with ssr: false",{"id":26121,"depth":179,"text":26122},{"id":26249,"depth":179,"text":26250},{"id":26454,"depth":179,"text":26455},"Using Shaders in Next.js and React SSR applications","server",{},{"title":25711,"description":26639},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":26646,"title":201,"body":26647,"category":188,"description":27256,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":27257,"navigation":194,"path":27258,"seo":27259,"stem":27260,"__hash__":27261},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":26648,"toc":27247},[26649,26653,26655,26667,26669,26683,26685,26687,26741,26743,26749,26751,26762,26895,26905,26907,26910,26982,26989,27212,27215,27219,27223,27229,27231,27245],[11,26650,26652],{"id":26651},"quickstart-solid","Quickstart (Solid)",[23,26654,24483],{"id":24482},[212,26656,26657],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26658,26659],{"__ignoreMap":178},[220,26660,26661,26663,26665],{"class":222,"line":223},[220,26662,227],{"class":226},[220,26664,231],{"class":230},[220,26666,234],{"class":230},[23,26668,25134],{"id":25133},[212,26670,26671],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,26672,26673],{"__ignoreMap":178},[220,26674,26675,26677,26679,26681],{"class":222,"line":223},[220,26676,261],{"class":260},[220,26678,265],{"class":264},[220,26680,268],{"class":260},[220,26682,319],{"class":230},[23,26684,323],{"id":322},[15,26686,25153],{},[212,26688,26689],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,26690,26691,26705,26725,26733],{"__ignoreMap":178},[220,26692,26693,26695,26697,26699,26701,26703],{"class":222,"line":223},[220,26694,343],{"class":264},[220,26696,347],{"class":420},[220,26698,350],{"class":226},[220,26700,353],{"class":260},[220,26702,356],{"class":230},[220,26704,359],{"class":264},[220,26706,26707,26709,26711,26713,26715,26717,26719,26721,26723],{"class":222,"line":179},[220,26708,364],{"class":264},[220,26710,367],{"class":420},[220,26712,370],{"class":226},[220,26714,353],{"class":260},[220,26716,375],{"class":230},[220,26718,378],{"class":226},[220,26720,353],{"class":260},[220,26722,383],{"class":230},[220,26724,386],{"class":264},[220,26726,26727,26729,26731],{"class":222,"line":389},[220,26728,364],{"class":264},[220,26730,394],{"class":420},[220,26732,386],{"class":264},[220,26734,26735,26737,26739],{"class":222,"line":399},[220,26736,402],{"class":264},[220,26738,347],{"class":420},[220,26740,359],{"class":264},[19,26742],{":preset":578},[15,26744,26745,583,26747,25216],{},[99,26746,101],{},[99,26748,586],{},[23,26750,594],{"id":593},[15,26752,1839,26753,25223,26755,17006,26758,25229,26760,590],{},[99,26754,586],{},[99,26756,26757],{},"class",[99,26759,1504],{},[99,26761,101],{},[212,26763,26765],{"className":468,"code":26764,"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,26766,26767,26775,26789,26797,26805,26809,26817,26837,26845,26853,26857,26865,26879,26887],{"__ignoreMap":178},[220,26768,26769,26771,26773],{"class":222,"line":223},[220,26770,743],{"class":264},[220,26772,746],{"class":609},[220,26774,749],{"class":264},[220,26776,26777,26779,26781,26783,26785,26787],{"class":222,"line":179},[220,26778,343],{"class":264},[220,26780,347],{"class":420},[220,26782,350],{"class":226},[220,26784,353],{"class":260},[220,26786,623],{"class":230},[220,26788,359],{"class":264},[220,26790,26791,26793,26795],{"class":222,"line":389},[220,26792,364],{"class":264},[220,26794,367],{"class":420},[220,26796,386],{"class":264},[220,26798,26799,26801,26803],{"class":222,"line":399},[220,26800,402],{"class":264},[220,26802,347],{"class":420},[220,26804,359],{"class":264},[220,26806,26807],{"class":222,"line":644},[220,26808,647],{"emptyLinePlaceholder":194},[220,26810,26811,26813,26815],{"class":222,"line":650},[220,26812,743],{"class":264},[220,26814,790],{"class":609},[220,26816,749],{"class":264},[220,26818,26819,26821,26823,26825,26827,26829,26831,26833,26835],{"class":222,"line":656},[220,26820,343],{"class":264},[220,26822,347],{"class":420},[220,26824,663],{"class":226},[220,26826,353],{"class":260},[220,26828,805],{"class":264},[220,26830,808],{"class":230},[220,26832,811],{"class":264},[220,26834,814],{"class":230},[220,26836,817],{"class":264},[220,26838,26839,26841,26843],{"class":222,"line":673},[220,26840,364],{"class":264},[220,26842,367],{"class":420},[220,26844,386],{"class":264},[220,26846,26847,26849,26851],{"class":222,"line":682},[220,26848,402],{"class":264},[220,26850,347],{"class":420},[220,26852,359],{"class":264},[220,26854,26855],{"class":222,"line":691},[220,26856,647],{"emptyLinePlaceholder":194},[220,26858,26859,26861,26863],{"class":222,"line":696},[220,26860,743],{"class":264},[220,26862,25333],{"class":609},[220,26864,749],{"class":264},[220,26866,26867,26869,26871,26873,26875,26877],{"class":222,"line":702},[220,26868,343],{"class":264},[220,26870,347],{"class":420},[220,26872,350],{"class":226},[220,26874,353],{"class":260},[220,26876,713],{"class":230},[220,26878,359],{"class":264},[220,26880,26881,26883,26885],{"class":222,"line":718},[220,26882,364],{"class":264},[220,26884,367],{"class":420},[220,26886,386],{"class":264},[220,26888,26889,26891,26893],{"class":222,"line":727},[220,26890,402],{"class":264},[220,26892,347],{"class":420},[220,26894,359],{"class":264},[15,26896,25368,26897,17006,26899,25373,26901,25376,26903,25379],{},[99,26898,26757],{},[99,26900,1504],{},[99,26902,101],{},[99,26904,586],{},[23,26906,1153],{"id":1152},[15,26908,26909],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,26911,26912],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,26913,26914,26928,26934,26942,26950,26962,26970,26974],{"__ignoreMap":178},[220,26915,26916,26918,26920,26922,26924,26926],{"class":222,"line":223},[220,26917,343],{"class":264},[220,26919,347],{"class":420},[220,26921,350],{"class":226},[220,26923,353],{"class":260},[220,26925,356],{"class":230},[220,26927,359],{"class":264},[220,26929,26930,26932],{"class":222,"line":179},[220,26931,364],{"class":264},[220,26933,1189],{"class":420},[220,26935,26936,26938,26940],{"class":222,"line":389},[220,26937,1194],{"class":226},[220,26939,353],{"class":260},[220,26941,1199],{"class":230},[220,26943,26944,26946,26948],{"class":222,"line":399},[220,26945,1204],{"class":226},[220,26947,353],{"class":260},[220,26949,1209],{"class":230},[220,26951,26952,26954,26956,26958,26960],{"class":222,"line":644},[220,26953,1288],{"class":226},[220,26955,353],{"class":260},[220,26957,743],{"class":264},[220,26959,1295],{"class":420},[220,26961,749],{"class":264},[220,26963,26964,26966,26968],{"class":222,"line":650},[220,26965,1302],{"class":226},[220,26967,353],{"class":260},[220,26969,1229],{"class":230},[220,26971,26972],{"class":222,"line":656},[220,26973,1234],{"class":264},[220,26975,26976,26978,26980],{"class":222,"line":673},[220,26977,402],{"class":264},[220,26979,347],{"class":420},[220,26981,359],{"class":264},[15,26983,26984,26985,26988],{},"Props also accept signals — ",[99,26986,26987],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,26990,26992],{"className":468,"code":26991,"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,26993,26994,27004,27014,27018,27030,27054,27058,27064,27068,27082,27111,27119,27123,27129,27137,27149,27161,27174,27196,27200,27204,27208],{"__ignoreMap":178},[220,26995,26996,26998,27000,27002],{"class":222,"line":223},[220,26997,261],{"class":260},[220,26999,2982],{"class":264},[220,27001,268],{"class":260},[220,27003,2987],{"class":230},[220,27005,27006,27008,27010,27012],{"class":222,"line":179},[220,27007,261],{"class":260},[220,27009,25485],{"class":264},[220,27011,268],{"class":260},[220,27013,319],{"class":230},[220,27015,27016],{"class":222,"line":389},[220,27017,647],{"emptyLinePlaceholder":194},[220,27019,27020,27022,27024,27026,27028],{"class":222,"line":399},[220,27021,25498],{"class":260},[220,27023,25501],{"class":260},[220,27025,10193],{"class":260},[220,27027,25506],{"class":226},[220,27029,2647],{"class":264},[220,27031,27032,27034,27036,27038,27040,27042,27044,27046,27048,27050,27052],{"class":222,"line":644},[220,27033,2705],{"class":260},[220,27035,2708],{"class":264},[220,27037,9013],{"class":420},[220,27039,1895],{"class":264},[220,27041,9018],{"class":420},[220,27043,2719],{"class":264},[220,27045,353],{"class":260},[220,27047,3018],{"class":226},[220,27049,2626],{"class":264},[220,27051,6919],{"class":420},[220,27053,2632],{"class":264},[220,27055,27056],{"class":222,"line":650},[220,27057,647],{"emptyLinePlaceholder":194},[220,27059,27060,27062],{"class":222,"line":656},[220,27061,2739],{"class":260},[220,27063,2742],{"class":264},[220,27065,27066],{"class":222,"line":673},[220,27067,9045],{"class":264},[220,27069,27070,27072,27074,27076,27078,27080],{"class":222,"line":682},[220,27071,2813],{"class":264},[220,27073,347],{"class":420},[220,27075,350],{"class":226},[220,27077,353],{"class":260},[220,27079,356],{"class":230},[220,27081,359],{"class":264},[220,27083,27084,27086,27088,27090,27092,27094,27096,27098,27100,27102,27104,27106,27108],{"class":222,"line":691},[220,27085,9058],{"class":264},[220,27087,367],{"class":420},[220,27089,370],{"class":226},[220,27091,353],{"class":260},[220,27093,25573],{"class":230},[220,27095,378],{"class":226},[220,27097,353],{"class":260},[220,27099,25580],{"class":230},[220,27101,8780],{"class":226},[220,27103,353],{"class":260},[220,27105,743],{"class":264},[220,27107,9013],{"class":226},[220,27109,27110],{"class":264},"()} \u002F>\n",[220,27112,27113,27115,27117],{"class":222,"line":696},[220,27114,9164],{"class":264},[220,27116,347],{"class":420},[220,27118,359],{"class":264},[220,27120,27121],{"class":222,"line":702},[220,27122,647],{"emptyLinePlaceholder":194},[220,27124,27125,27127],{"class":222,"line":718},[220,27126,2813],{"class":264},[220,27128,25606],{"class":346},[220,27130,27131,27133,27135],{"class":222,"line":727},[220,27132,25611],{"class":226},[220,27134,353],{"class":260},[220,27136,25616],{"class":230},[220,27138,27139,27141,27143,27145,27147],{"class":222,"line":2664},[220,27140,25621],{"class":226},[220,27142,353],{"class":260},[220,27144,743],{"class":264},[220,27146,6919],{"class":420},[220,27148,749],{"class":264},[220,27150,27151,27153,27155,27157,27159],{"class":222,"line":7900},[220,27152,25634],{"class":226},[220,27154,353],{"class":260},[220,27156,743],{"class":264},[220,27158,25641],{"class":420},[220,27160,749],{"class":264},[220,27162,27163,27165,27167,27169,27171],{"class":222,"line":7910},[220,27164,25648],{"class":226},[220,27166,353],{"class":260},[220,27168,743],{"class":264},[220,27170,9013],{"class":226},[220,27172,27173],{"class":264},"()}\n",[220,27175,27176,27179,27181,27183,27185,27187,27189,27191,27193],{"class":222,"line":7921},[220,27177,27178],{"class":226}," onInput",[220,27180,353],{"class":260},[220,27182,743],{"class":264},[220,27184,24997],{"class":9077},[220,27186,9080],{"class":260},[220,27188,9072],{"class":226},[220,27190,2626],{"class":264},[220,27192,25016],{"class":226},[220,27194,27195],{"class":264},"(e.currentTarget.value))}\n",[220,27197,27198],{"class":222,"line":7926},[220,27199,15298],{"class":264},[220,27201,27202],{"class":222,"line":9249},[220,27203,9246],{"class":264},[220,27205,27206],{"class":222,"line":9254},[220,27207,2837],{"class":264},[220,27209,27210],{"class":222,"line":10329},[220,27211,749],{"class":264},[15,27213,27214],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,27216,25033,27217,25036],{},[56,27218,1160],{"href":1159},[23,27220,27222],{"id":27221},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,27224,25707,27225,25712],{},[56,27226,27228],{"href":27227},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,27230,1474],{"id":1473},[34,27232,27233,27237,27241],{},[37,27234,27235,1483],{},[56,27236,1482],{"href":1481},[37,27238,27239,1490],{},[56,27240,1489],{"href":1488},[37,27242,27243,1502],{},[56,27244,1160],{"href":1159},[1504,27246,25731],{},{"title":178,"searchDepth":179,"depth":179,"links":27248},[27249,27250,27251,27252,27253,27254,27255],{"id":24482,"depth":179,"text":24483},{"id":25133,"depth":179,"text":25134},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":27221,"depth":179,"text":27222},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":27256},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":27263,"title":27228,"body":27264,"category":2240,"description":27836,"exclude":190,"extension":191,"forceFramework":190,"icon":26640,"meta":27837,"navigation":194,"path":27227,"seo":27838,"stem":27839,"__hash__":27840},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":27265,"toc":27827},[27266,27270,27273,27280,27286,27377,27493,27505,27512,27521,27623,27629,27635,27814,27818,27824],[11,27267,27269],{"id":27268},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,27271,27272],{},"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,27274,27276,27279],{"id":27275},"clientonly-solidstart",[99,27277,27278],{},"clientOnly"," (SolidStart)",[15,27281,27282,27283,27285],{},"SolidStart provides a ",[99,27284,27278],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,27287,27289],{"className":409,"code":27288,"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,27290,27291,27295,27305,27309,27321,27327,27341,27361,27369,27373],{"__ignoreMap":178},[220,27292,27293],{"class":222,"line":223},[220,27294,25777],{"class":609},[220,27296,27297,27299,27301,27303],{"class":222,"line":179},[220,27298,261],{"class":260},[220,27300,25485],{"class":264},[220,27302,268],{"class":260},[220,27304,319],{"class":230},[220,27306,27307],{"class":222,"line":389},[220,27308,647],{"emptyLinePlaceholder":194},[220,27310,27311,27313,27315,27317,27319],{"class":222,"line":399},[220,27312,25498],{"class":260},[220,27314,25501],{"class":260},[220,27316,10193],{"class":260},[220,27318,25506],{"class":226},[220,27320,2647],{"class":264},[220,27322,27323,27325],{"class":222,"line":644},[220,27324,2739],{"class":260},[220,27326,2742],{"class":264},[220,27328,27329,27331,27333,27335,27337,27339],{"class":222,"line":650},[220,27330,2550],{"class":264},[220,27332,347],{"class":420},[220,27334,350],{"class":226},[220,27336,353],{"class":260},[220,27338,356],{"class":230},[220,27340,359],{"class":264},[220,27342,27343,27345,27347,27349,27351,27353,27355,27357,27359],{"class":222,"line":656},[220,27344,2813],{"class":264},[220,27346,367],{"class":420},[220,27348,370],{"class":226},[220,27350,353],{"class":260},[220,27352,375],{"class":230},[220,27354,378],{"class":226},[220,27356,353],{"class":260},[220,27358,383],{"class":230},[220,27360,386],{"class":264},[220,27362,27363,27365,27367],{"class":222,"line":673},[220,27364,2828],{"class":264},[220,27366,347],{"class":420},[220,27368,359],{"class":264},[220,27370,27371],{"class":222,"line":682},[220,27372,2837],{"class":264},[220,27374,27375],{"class":222,"line":691},[220,27376,749],{"class":264},[212,27378,27380],{"className":409,"code":27379,"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,27381,27382,27387,27399,27403,27427,27431,27443,27449,27457,27465,27477,27485,27489],{"__ignoreMap":178},[220,27383,27384],{"class":222,"line":223},[220,27385,27386],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,27388,27389,27391,27394,27396],{"class":222,"line":179},[220,27390,261],{"class":260},[220,27392,27393],{"class":264}," { clientOnly } ",[220,27395,268],{"class":260},[220,27397,27398],{"class":230}," '@solidjs\u002Fstart'\n",[220,27400,27401],{"class":222,"line":389},[220,27402,647],{"emptyLinePlaceholder":194},[220,27404,27405,27407,27409,27411,27414,27416,27418,27420,27422,27424],{"class":222,"line":399},[220,27406,1735],{"class":260},[220,27408,25506],{"class":420},[220,27410,1741],{"class":260},[220,27412,27413],{"class":226}," clientOnly",[220,27415,14822],{"class":264},[220,27417,2762],{"class":260},[220,27419,26040],{"class":260},[220,27421,2626],{"class":264},[220,27423,26177],{"class":230},[220,27425,27426],{"class":264},"))\n",[220,27428,27429],{"class":222,"line":644},[220,27430,647],{"emptyLinePlaceholder":194},[220,27432,27433,27435,27437,27439,27441],{"class":222,"line":650},[220,27434,25498],{"class":260},[220,27436,25501],{"class":260},[220,27438,10193],{"class":260},[220,27440,25916],{"class":226},[220,27442,2647],{"class":264},[220,27444,27445,27447],{"class":222,"line":656},[220,27446,2739],{"class":260},[220,27448,2742],{"class":264},[220,27450,27451,27453,27455],{"class":222,"line":673},[220,27452,2550],{"class":264},[220,27454,10892],{"class":346},[220,27456,359],{"class":264},[220,27458,27459,27461,27463],{"class":222,"line":682},[220,27460,2813],{"class":264},[220,27462,25939],{"class":420},[220,27464,386],{"class":264},[220,27466,27467,27469,27471,27473,27475],{"class":222,"line":691},[220,27468,2813],{"class":264},[220,27470,11],{"class":346},[220,27472,11181],{"class":264},[220,27474,11],{"class":346},[220,27476,359],{"class":264},[220,27478,27479,27481,27483],{"class":222,"line":696},[220,27480,2828],{"class":264},[220,27482,10892],{"class":346},[220,27484,359],{"class":264},[220,27486,27487],{"class":222,"line":702},[220,27488,2837],{"class":264},[220,27490,27491],{"class":222,"line":718},[220,27492,749],{"class":264},[15,27494,27495,27497,27498,27501,27502,27504],{},[99,27496,27278],{}," wraps the component in a ",[99,27499,27500],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,27503,15081],{}," during SSR.",[23,27506,27508,27511],{"id":27507},"isserver-guard",[99,27509,27510],{},"isServer"," guard",[15,27513,27514,27515,27517,27518,1554],{},"For finer control, check ",[99,27516,27510],{}," from ",[99,27519,27520],{},"solid-js\u002Fweb",[212,27522,27524],{"className":409,"code":27523,"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,27525,27526,27538,27548,27552,27564,27575,27579,27585,27599,27607,27615,27619],{"__ignoreMap":178},[220,27527,27528,27530,27533,27535],{"class":222,"line":223},[220,27529,261],{"class":260},[220,27531,27532],{"class":264}," { isServer } ",[220,27534,268],{"class":260},[220,27536,27537],{"class":230}," 'solid-js\u002Fweb'\n",[220,27539,27540,27542,27544,27546],{"class":222,"line":179},[220,27541,261],{"class":260},[220,27543,25485],{"class":264},[220,27545,268],{"class":260},[220,27547,319],{"class":230},[220,27549,27550],{"class":222,"line":389},[220,27551,647],{"emptyLinePlaceholder":194},[220,27553,27554,27556,27558,27560,27562],{"class":222,"line":399},[220,27555,25498],{"class":260},[220,27557,25501],{"class":260},[220,27559,10193],{"class":260},[220,27561,25506],{"class":226},[220,27563,2647],{"class":264},[220,27565,27566,27568,27571,27573],{"class":222,"line":644},[220,27567,26564],{"class":260},[220,27569,27570],{"class":264}," (isServer) ",[220,27572,26575],{"class":260},[220,27574,26578],{"class":420},[220,27576,27577],{"class":222,"line":650},[220,27578,647],{"emptyLinePlaceholder":194},[220,27580,27581,27583],{"class":222,"line":656},[220,27582,2739],{"class":260},[220,27584,2742],{"class":264},[220,27586,27587,27589,27591,27593,27595,27597],{"class":222,"line":673},[220,27588,2550],{"class":264},[220,27590,347],{"class":420},[220,27592,350],{"class":226},[220,27594,353],{"class":260},[220,27596,356],{"class":230},[220,27598,359],{"class":264},[220,27600,27601,27603,27605],{"class":222,"line":682},[220,27602,2813],{"class":264},[220,27604,367],{"class":420},[220,27606,386],{"class":264},[220,27608,27609,27611,27613],{"class":222,"line":691},[220,27610,2828],{"class":264},[220,27612,347],{"class":420},[220,27614,359],{"class":264},[220,27616,27617],{"class":222,"line":696},[220,27618,2837],{"class":264},[220,27620,27621],{"class":222,"line":702},[220,27622,749],{"class":264},[23,27624,27626,27511],{"id":27625},"onmount-guard",[99,27627,27628],{},"onMount",[15,27630,27631,27632,27634],{},"Alternatively, use ",[99,27633,27628],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,27636,27638],{"className":409,"code":27637,"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,27639,27640,27651,27661,27665,27677,27701,27705,27723,27727,27733,27747,27761,27775,27784,27793,27798,27806,27810],{"__ignoreMap":178},[220,27641,27642,27644,27647,27649],{"class":222,"line":223},[220,27643,261],{"class":260},[220,27645,27646],{"class":264}," { createSignal, onMount } ",[220,27648,268],{"class":260},[220,27650,2987],{"class":230},[220,27652,27653,27655,27657,27659],{"class":222,"line":179},[220,27654,261],{"class":260},[220,27656,25485],{"class":264},[220,27658,268],{"class":260},[220,27660,319],{"class":230},[220,27662,27663],{"class":222,"line":389},[220,27664,647],{"emptyLinePlaceholder":194},[220,27666,27667,27669,27671,27673,27675],{"class":222,"line":399},[220,27668,25498],{"class":260},[220,27670,25501],{"class":260},[220,27672,10193],{"class":260},[220,27674,25506],{"class":226},[220,27676,2647],{"class":264},[220,27678,27679,27681,27683,27685,27687,27689,27691,27693,27695,27697,27699],{"class":222,"line":644},[220,27680,2705],{"class":260},[220,27682,2708],{"class":264},[220,27684,26509],{"class":420},[220,27686,1895],{"class":264},[220,27688,26514],{"class":420},[220,27690,2719],{"class":264},[220,27692,353],{"class":260},[220,27694,3018],{"class":226},[220,27696,2626],{"class":264},[220,27698,2629],{"class":420},[220,27700,2632],{"class":264},[220,27702,27703],{"class":222,"line":650},[220,27704,647],{"emptyLinePlaceholder":194},[220,27706,27707,27710,27712,27714,27717,27719,27721],{"class":222,"line":656},[220,27708,27709],{"class":226}," onMount",[220,27711,14822],{"class":264},[220,27713,2762],{"class":260},[220,27715,27716],{"class":226}," setMounted",[220,27718,2626],{"class":264},[220,27720,2332],{"class":420},[220,27722,27426],{"class":264},[220,27724,27725],{"class":222,"line":673},[220,27726,647],{"emptyLinePlaceholder":194},[220,27728,27729,27731],{"class":222,"line":682},[220,27730,2739],{"class":260},[220,27732,2742],{"class":264},[220,27734,27735,27737,27739,27741,27743,27745],{"class":222,"line":691},[220,27736,2550],{"class":264},[220,27738,8817],{"class":346},[220,27740,350],{"class":226},[220,27742,353],{"class":260},[220,27744,356],{"class":230},[220,27746,359],{"class":264},[220,27748,27749,27752,27754,27756,27759],{"class":222,"line":696},[220,27750,27751],{"class":264}," {",[220,27753,26509],{"class":226},[220,27755,3072],{"class":264},[220,27757,27758],{"class":260},"&&",[220,27760,2742],{"class":264},[220,27762,27763,27765,27767,27769,27771,27773],{"class":222,"line":702},[220,27764,9058],{"class":264},[220,27766,347],{"class":420},[220,27768,350],{"class":226},[220,27770,353],{"class":260},[220,27772,356],{"class":230},[220,27774,359],{"class":264},[220,27776,27777,27780,27782],{"class":222,"line":718},[220,27778,27779],{"class":264}," \u003C",[220,27781,367],{"class":420},[220,27783,386],{"class":264},[220,27785,27786,27789,27791],{"class":222,"line":727},[220,27787,27788],{"class":264}," \u003C\u002F",[220,27790,347],{"class":420},[220,27792,359],{"class":264},[220,27794,27795],{"class":222,"line":2664},[220,27796,27797],{"class":264}," )}\n",[220,27799,27800,27802,27804],{"class":222,"line":7900},[220,27801,2828],{"class":264},[220,27803,8817],{"class":346},[220,27805,359],{"class":264},[220,27807,27808],{"class":222,"line":7910},[220,27809,2837],{"class":264},[220,27811,27812],{"class":222,"line":7921},[220,27813,749],{"class":264},[23,27815,27817],{"id":27816},"solid-without-solidstart","Solid (without SolidStart)",[15,27819,27820,27821,27823],{},"In a Solid app without SolidStart, the ",[99,27822,27628],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,27825,27826],{},"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":27828},[27829,27831,27833,27835],{"id":27275,"depth":179,"text":27830},"clientOnly (SolidStart)",{"id":27507,"depth":179,"text":27832},"isServer guard",{"id":27625,"depth":179,"text":27834},"onMount guard",{"id":27816,"depth":179,"text":27817},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":27228,"description":27836},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":27842,"title":201,"body":27843,"category":188,"description":28377,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28378,"navigation":194,"path":28379,"seo":28380,"stem":28381,"__hash__":28382},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":27844,"toc":28368},[27845,27849,27851,27863,27865,27879,27881,27883,27937,27939,27945,27947,27957,28073,28083,28085,28092,28163,28173,28331,28335,28339,28343,28349,28351,28365],[11,27846,27848],{"id":27847},"quickstart-svelte","Quickstart (Svelte)",[23,27850,24483],{"id":24482},[212,27852,27853],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,27854,27855],{"__ignoreMap":178},[220,27856,27857,27859,27861],{"class":222,"line":223},[220,27858,227],{"class":226},[220,27860,231],{"class":230},[220,27862,234],{"class":230},[23,27864,25134],{"id":25133},[212,27866,27867],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,27868,27869],{"__ignoreMap":178},[220,27870,27871,27873,27875,27877],{"class":222,"line":223},[220,27872,261],{"class":260},[220,27874,265],{"class":264},[220,27876,268],{"class":260},[220,27878,303],{"class":230},[23,27880,323],{"id":322},[15,27882,25153],{},[212,27884,27885],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,27886,27887,27901,27921,27929],{"__ignoreMap":178},[220,27888,27889,27891,27893,27895,27897,27899],{"class":222,"line":223},[220,27890,343],{"class":264},[220,27892,347],{"class":420},[220,27894,350],{"class":226},[220,27896,353],{"class":264},[220,27898,356],{"class":230},[220,27900,359],{"class":264},[220,27902,27903,27905,27907,27909,27911,27913,27915,27917,27919],{"class":222,"line":179},[220,27904,364],{"class":264},[220,27906,367],{"class":420},[220,27908,370],{"class":226},[220,27910,353],{"class":264},[220,27912,375],{"class":230},[220,27914,378],{"class":226},[220,27916,353],{"class":264},[220,27918,383],{"class":230},[220,27920,386],{"class":264},[220,27922,27923,27925,27927],{"class":222,"line":389},[220,27924,364],{"class":264},[220,27926,394],{"class":420},[220,27928,386],{"class":264},[220,27930,27931,27933,27935],{"class":222,"line":399},[220,27932,402],{"class":264},[220,27934,347],{"class":420},[220,27936,359],{"class":264},[19,27938],{":preset":578},[15,27940,27941,583,27943,25216],{},[99,27942,101],{},[99,27944,586],{},[23,27946,594],{"id":593},[15,27948,1839,27949,25223,27951,17006,27953,25229,27955,590],{},[99,27950,586],{},[99,27952,26757],{},[99,27954,1504],{},[99,27956,101],{},[212,27958,27960],{"className":2844,"code":27959,"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,27961,27962,27966,27980,27988,27996,28000,28004,28018,28026,28034,28038,28043,28057,28065],{"__ignoreMap":178},[220,27963,27964],{"class":222,"line":223},[220,27965,610],{"class":609},[220,27967,27968,27970,27972,27974,27976,27978],{"class":222,"line":179},[220,27969,343],{"class":264},[220,27971,347],{"class":420},[220,27973,350],{"class":226},[220,27975,353],{"class":264},[220,27977,623],{"class":230},[220,27979,359],{"class":264},[220,27981,27982,27984,27986],{"class":222,"line":389},[220,27983,364],{"class":264},[220,27985,367],{"class":420},[220,27987,386],{"class":264},[220,27989,27990,27992,27994],{"class":222,"line":399},[220,27991,402],{"class":264},[220,27993,347],{"class":420},[220,27995,359],{"class":264},[220,27997,27998],{"class":222,"line":644},[220,27999,647],{"emptyLinePlaceholder":194},[220,28001,28002],{"class":222,"line":650},[220,28003,653],{"class":609},[220,28005,28006,28008,28010,28012,28014,28016],{"class":222,"line":656},[220,28007,343],{"class":264},[220,28009,347],{"class":420},[220,28011,663],{"class":226},[220,28013,353],{"class":264},[220,28015,668],{"class":230},[220,28017,359],{"class":264},[220,28019,28020,28022,28024],{"class":222,"line":673},[220,28021,364],{"class":264},[220,28023,367],{"class":420},[220,28025,386],{"class":264},[220,28027,28028,28030,28032],{"class":222,"line":682},[220,28029,402],{"class":264},[220,28031,347],{"class":420},[220,28033,359],{"class":264},[220,28035,28036],{"class":222,"line":691},[220,28037,647],{"emptyLinePlaceholder":194},[220,28039,28040],{"class":222,"line":696},[220,28041,28042],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,28044,28045,28047,28049,28051,28053,28055],{"class":222,"line":702},[220,28046,343],{"class":264},[220,28048,347],{"class":420},[220,28050,350],{"class":226},[220,28052,353],{"class":264},[220,28054,713],{"class":230},[220,28056,359],{"class":264},[220,28058,28059,28061,28063],{"class":222,"line":718},[220,28060,364],{"class":264},[220,28062,367],{"class":420},[220,28064,386],{"class":264},[220,28066,28067,28069,28071],{"class":222,"line":727},[220,28068,402],{"class":264},[220,28070,347],{"class":420},[220,28072,359],{"class":264},[15,28074,25368,28075,17006,28077,25373,28079,25376,28081,25379],{},[99,28076,26757],{},[99,28078,1504],{},[99,28080,101],{},[99,28082,586],{},[23,28084,1153],{"id":1152},[15,28086,28087,28088,28091],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,28089,28090],{},"{expression}"," syntax:",[212,28093,28094],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,28095,28096,28110,28116,28124,28132,28143,28151,28155],{"__ignoreMap":178},[220,28097,28098,28100,28102,28104,28106,28108],{"class":222,"line":223},[220,28099,343],{"class":264},[220,28101,347],{"class":420},[220,28103,350],{"class":226},[220,28105,353],{"class":264},[220,28107,356],{"class":230},[220,28109,359],{"class":264},[220,28111,28112,28114],{"class":222,"line":179},[220,28113,364],{"class":264},[220,28115,1189],{"class":420},[220,28117,28118,28120,28122],{"class":222,"line":389},[220,28119,1194],{"class":226},[220,28121,353],{"class":264},[220,28123,1199],{"class":230},[220,28125,28126,28128,28130],{"class":222,"line":399},[220,28127,1204],{"class":226},[220,28129,353],{"class":264},[220,28131,1209],{"class":230},[220,28133,28134,28136,28139,28141],{"class":222,"line":644},[220,28135,1288],{"class":226},[220,28137,28138],{"class":264},"={",[220,28140,1295],{"class":420},[220,28142,749],{"class":264},[220,28144,28145,28147,28149],{"class":222,"line":650},[220,28146,1302],{"class":226},[220,28148,353],{"class":264},[220,28150,1229],{"class":230},[220,28152,28153],{"class":222,"line":656},[220,28154,1234],{"class":264},[220,28156,28157,28159,28161],{"class":222,"line":673},[220,28158,402],{"class":264},[220,28160,347],{"class":420},[220,28162,359],{"class":264},[15,28164,28165,28166,28169,28170,28172],{},"Props also accept reactive state — Svelte's ",[99,28167,28168],{},"$state"," rune (or ",[99,28171,14807],{}," in Svelte 4) works exactly as you'd expect:",[212,28174,28176],{"className":2844,"code":28175,"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,28177,28178,28186,28196,28200,28218,28226,28230,28244,28272,28280,28284],{"__ignoreMap":178},[220,28179,28180,28182,28184],{"class":222,"line":223},[220,28181,343],{"class":264},[220,28183,2590],{"class":346},[220,28185,359],{"class":264},[220,28187,28188,28190,28192,28194],{"class":222,"line":179},[220,28189,11210],{"class":260},[220,28191,25485],{"class":264},[220,28193,268],{"class":260},[220,28195,303],{"class":230},[220,28197,28198],{"class":222,"line":389},[220,28199,647],{"emptyLinePlaceholder":194},[220,28201,28202,28204,28206,28208,28210,28212,28214,28216],{"class":222,"line":399},[220,28203,2861],{"class":260},[220,28205,9325],{"class":264},[220,28207,353],{"class":260},[220,28209,2869],{"class":264},[220,28211,2872],{"class":226},[220,28213,2626],{"class":264},[220,28215,6919],{"class":420},[220,28217,2632],{"class":264},[220,28219,28220,28222,28224],{"class":222,"line":644},[220,28221,402],{"class":264},[220,28223,2590],{"class":346},[220,28225,359],{"class":264},[220,28227,28228],{"class":222,"line":650},[220,28229,647],{"emptyLinePlaceholder":194},[220,28231,28232,28234,28236,28238,28240,28242],{"class":222,"line":656},[220,28233,343],{"class":264},[220,28235,347],{"class":420},[220,28237,350],{"class":226},[220,28239,353],{"class":264},[220,28241,356],{"class":230},[220,28243,359],{"class":264},[220,28245,28246,28248,28250,28252,28254,28256,28258,28260,28262,28265,28267,28270],{"class":222,"line":673},[220,28247,364],{"class":264},[220,28249,367],{"class":420},[220,28251,370],{"class":226},[220,28253,353],{"class":264},[220,28255,25573],{"class":230},[220,28257,378],{"class":226},[220,28259,353],{"class":264},[220,28261,25580],{"class":230},[220,28263,28264],{"class":226}," {",[220,28266,9013],{"class":264},[220,28268,28269],{"class":226},"}",[220,28271,386],{"class":264},[220,28273,28274,28276,28278],{"class":222,"line":682},[220,28275,402],{"class":264},[220,28277,347],{"class":420},[220,28279,359],{"class":264},[220,28281,28282],{"class":222,"line":691},[220,28283,647],{"emptyLinePlaceholder":194},[220,28285,28286,28288,28291,28293,28295,28298,28301,28303,28305,28307,28309,28312,28314,28316,28318,28320,28323,28325,28328],{"class":222,"line":696},[220,28287,343],{"class":264},[220,28289,28290],{"class":346},"input",[220,28292,11198],{"class":226},[220,28294,353],{"class":264},[220,28296,28297],{"class":230},"\"range\"",[220,28299,28300],{"class":226}," min",[220,28302,353],{"class":264},[220,28304,9940],{"class":230},[220,28306,6919],{"class":420},[220,28308,9940],{"class":230},[220,28310,28311],{"class":226}," max",[220,28313,353],{"class":264},[220,28315,9940],{"class":230},[220,28317,25641],{"class":420},[220,28319,9940],{"class":230},[220,28321,28322],{"class":260}," bind",[220,28324,1554],{"class":264},[220,28326,28327],{"class":226},"value",[220,28329,28330],{"class":264},"={angle} \u002F>\n",[15,28332,25026,28333,25696],{},[99,28334,9013],{},[15,28336,25033,28337,25036],{},[56,28338,1160],{"href":1159},[23,28340,28342],{"id":28341},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,28344,25707,28345,25712],{},[56,28346,28348],{"href":28347},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,28350,1474],{"id":1473},[34,28352,28353,28357,28361],{},[37,28354,28355,1483],{},[56,28356,1482],{"href":1481},[37,28358,28359,1490],{},[56,28360,1489],{"href":1488},[37,28362,28363,1502],{},[56,28364,1160],{"href":1159},[1504,28366,28367],{},"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":28369},[28370,28371,28372,28373,28374,28375,28376],{"id":24482,"depth":179,"text":24483},{"id":25133,"depth":179,"text":25134},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28341,"depth":179,"text":28342},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":28377},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":28384,"title":28348,"body":28385,"category":2240,"description":28972,"exclude":190,"extension":191,"forceFramework":190,"icon":26640,"meta":28973,"navigation":194,"path":28347,"seo":28974,"stem":28975,"__hash__":28976},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":28386,"toc":28964},[28387,28391,28394,28398,28404,28407,28472,28475,28481,28486,28618,28625,28631,28758,28761,28765,28768,28961],[11,28388,28390],{"id":28389},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,28392,28393],{},"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,28395,28397],{"id":28396},"the-default-behavior","The default behavior",[15,28399,28400,28401,28403],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,28402,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,28405,28406],{},"In many cases, you don't need any special handling:",[212,28408,28410],{"className":2844,"code":28409,"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,28411,28412,28420,28430,28438,28442,28456,28464],{"__ignoreMap":178},[220,28413,28414,28416,28418],{"class":222,"line":223},[220,28415,343],{"class":264},[220,28417,2590],{"class":346},[220,28419,359],{"class":264},[220,28421,28422,28424,28426,28428],{"class":222,"line":179},[220,28423,11210],{"class":260},[220,28425,25485],{"class":264},[220,28427,268],{"class":260},[220,28429,303],{"class":230},[220,28431,28432,28434,28436],{"class":222,"line":389},[220,28433,402],{"class":264},[220,28435,2590],{"class":346},[220,28437,359],{"class":264},[220,28439,28440],{"class":222,"line":399},[220,28441,647],{"emptyLinePlaceholder":194},[220,28443,28444,28446,28448,28450,28452,28454],{"class":222,"line":644},[220,28445,343],{"class":264},[220,28447,347],{"class":420},[220,28449,350],{"class":226},[220,28451,353],{"class":264},[220,28453,356],{"class":230},[220,28455,359],{"class":264},[220,28457,28458,28460,28462],{"class":222,"line":650},[220,28459,364],{"class":264},[220,28461,367],{"class":420},[220,28463,386],{"class":264},[220,28465,28466,28468,28470],{"class":222,"line":656},[220,28467,402],{"class":264},[220,28469,347],{"class":420},[220,28471,359],{"class":264},[15,28473,28474],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,28476,28478,28480],{"id":28477},"onmount-for-browser-only-code",[99,28479,27628],{}," for browser-only code",[15,28482,28483,28484,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,28485,27628],{},[212,28487,28489],{"className":2844,"code":28488,"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,28490,28491,28499,28511,28521,28525,28532,28536,28546,28551,28562,28566,28574,28578,28602,28610],{"__ignoreMap":178},[220,28492,28493,28495,28497],{"class":222,"line":223},[220,28494,343],{"class":264},[220,28496,2590],{"class":346},[220,28498,359],{"class":264},[220,28500,28501,28503,28506,28508],{"class":222,"line":179},[220,28502,11210],{"class":260},[220,28504,28505],{"class":264}," { onMount } ",[220,28507,268],{"class":260},[220,28509,28510],{"class":230}," 'svelte'\n",[220,28512,28513,28515,28517,28519],{"class":222,"line":389},[220,28514,11210],{"class":260},[220,28516,25485],{"class":264},[220,28518,268],{"class":260},[220,28520,303],{"class":230},[220,28522,28523],{"class":222,"line":399},[220,28524,647],{"emptyLinePlaceholder":194},[220,28526,28527,28529],{"class":222,"line":644},[220,28528,2861],{"class":260},[220,28530,28531],{"class":264}," shaderEl\n",[220,28533,28534],{"class":222,"line":650},[220,28535,647],{"emptyLinePlaceholder":194},[220,28537,28538,28540,28542,28544],{"class":222,"line":656},[220,28539,27709],{"class":226},[220,28541,14822],{"class":264},[220,28543,2762],{"class":260},[220,28545,3241],{"class":264},[220,28547,28548],{"class":222,"line":673},[220,28549,28550],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,28552,28553,28556,28559],{"class":222,"line":682},[220,28554,28555],{"class":264}," console.",[220,28557,28558],{"class":226},"log",[220,28560,28561],{"class":264},"(shaderEl)\n",[220,28563,28564],{"class":222,"line":691},[220,28565,11257],{"class":264},[220,28567,28568,28570,28572],{"class":222,"line":696},[220,28569,402],{"class":264},[220,28571,2590],{"class":346},[220,28573,359],{"class":264},[220,28575,28576],{"class":222,"line":702},[220,28577,647],{"emptyLinePlaceholder":194},[220,28579,28580,28582,28584,28586,28588,28591,28594,28596,28598,28600],{"class":222,"line":718},[220,28581,343],{"class":264},[220,28583,347],{"class":420},[220,28585,28322],{"class":260},[220,28587,1554],{"class":264},[220,28589,28590],{"class":420},"this",[220,28592,28593],{"class":264},"={shaderEl} ",[220,28595,26757],{"class":226},[220,28597,353],{"class":264},[220,28599,356],{"class":230},[220,28601,359],{"class":264},[220,28603,28604,28606,28608],{"class":222,"line":727},[220,28605,364],{"class":264},[220,28607,367],{"class":420},[220,28609,386],{"class":264},[220,28611,28612,28614,28616],{"class":222,"line":2664},[220,28613,402],{"class":264},[220,28615,347],{"class":420},[220,28617,359],{"class":264},[23,28619,28621,28622],{"id":28620},"conditional-rendering-with-browser","Conditional rendering with ",[99,28623,28624],{},"browser",[15,28626,28627,28628,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,28629,28630],{},"$app\u002Fenvironment",[212,28632,28634],{"className":2844,"code":28633,"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,28635,28636,28644,28656,28666,28674,28678,28689,28703,28711,28719,28729,28734,28749],{"__ignoreMap":178},[220,28637,28638,28640,28642],{"class":222,"line":223},[220,28639,343],{"class":264},[220,28641,2590],{"class":346},[220,28643,359],{"class":264},[220,28645,28646,28648,28651,28653],{"class":222,"line":179},[220,28647,11210],{"class":260},[220,28649,28650],{"class":264}," { browser } ",[220,28652,268],{"class":260},[220,28654,28655],{"class":230}," '$app\u002Fenvironment'\n",[220,28657,28658,28660,28662,28664],{"class":222,"line":389},[220,28659,11210],{"class":260},[220,28661,25485],{"class":264},[220,28663,268],{"class":260},[220,28665,303],{"class":230},[220,28667,28668,28670,28672],{"class":222,"line":399},[220,28669,402],{"class":264},[220,28671,2590],{"class":346},[220,28673,359],{"class":264},[220,28675,28676],{"class":222,"line":644},[220,28677,647],{"emptyLinePlaceholder":194},[220,28679,28680,28683,28686],{"class":222,"line":650},[220,28681,28682],{"class":264},"{#",[220,28684,28685],{"class":260},"if",[220,28687,28688],{"class":264}," browser}\n",[220,28690,28691,28693,28695,28697,28699,28701],{"class":222,"line":656},[220,28692,364],{"class":264},[220,28694,347],{"class":420},[220,28696,350],{"class":226},[220,28698,353],{"class":264},[220,28700,356],{"class":230},[220,28702,359],{"class":264},[220,28704,28705,28707,28709],{"class":222,"line":673},[220,28706,2550],{"class":264},[220,28708,367],{"class":420},[220,28710,386],{"class":264},[220,28712,28713,28715,28717],{"class":222,"line":682},[220,28714,2567],{"class":264},[220,28716,347],{"class":420},[220,28718,359],{"class":264},[220,28720,28721,28724,28727],{"class":222,"line":691},[220,28722,28723],{"class":264},"{:",[220,28725,28726],{"class":260},"else",[220,28728,749],{"class":264},[220,28730,28731],{"class":222,"line":696},[220,28732,28733],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,28735,28736,28738,28740,28742,28744,28747],{"class":222,"line":702},[220,28737,364],{"class":264},[220,28739,8817],{"class":346},[220,28741,350],{"class":226},[220,28743,353],{"class":264},[220,28745,28746],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,28748,386],{"class":264},[220,28750,28751,28754,28756],{"class":222,"line":718},[220,28752,28753],{"class":264},"{\u002F",[220,28755,28685],{"class":260},[220,28757,749],{"class":264},[15,28759,28760],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,28762,28764],{"id":28763},"lazy-loading","Lazy loading",[15,28766,28767],{},"To defer loading the Shaders bundle entirely until client-side:",[212,28769,28771],{"className":2844,"code":28770,"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,28772,28773,28781,28791,28795,28802,28809,28813,28828,28857,28867,28877,28881,28889,28893,28902,28926,28941,28953],{"__ignoreMap":178},[220,28774,28775,28777,28779],{"class":222,"line":223},[220,28776,343],{"class":264},[220,28778,2590],{"class":346},[220,28780,359],{"class":264},[220,28782,28783,28785,28787,28789],{"class":222,"line":179},[220,28784,11210],{"class":260},[220,28786,28505],{"class":264},[220,28788,268],{"class":260},[220,28790,28510],{"class":230},[220,28792,28793],{"class":222,"line":389},[220,28794,647],{"emptyLinePlaceholder":194},[220,28796,28797,28799],{"class":222,"line":399},[220,28798,2861],{"class":260},[220,28800,28801],{"class":264}," ShaderComponent\n",[220,28803,28804,28806],{"class":222,"line":644},[220,28805,2861],{"class":260},[220,28807,28808],{"class":264}," LinearGradientComponent\n",[220,28810,28811],{"class":222,"line":650},[220,28812,647],{"emptyLinePlaceholder":194},[220,28814,28815,28817,28819,28822,28824,28826],{"class":222,"line":656},[220,28816,27709],{"class":226},[220,28818,2626],{"class":264},[220,28820,28821],{"class":260},"async",[220,28823,14837],{"class":264},[220,28825,2762],{"class":260},[220,28827,3241],{"class":264},[220,28829,28830,28832,28835,28837,28839,28841,28844,28846,28848,28850,28852,28855],{"class":222,"line":673},[220,28831,15103],{"class":260},[220,28833,28834],{"class":264}," { ",[220,28836,347],{"class":420},[220,28838,1895],{"class":264},[220,28840,367],{"class":420},[220,28842,28843],{"class":264}," } ",[220,28845,353],{"class":260},[220,28847,1744],{"class":260},[220,28849,26040],{"class":260},[220,28851,2626],{"class":264},[220,28853,28854],{"class":230},"'shaders\u002Fsvelte'",[220,28856,2632],{"class":264},[220,28858,28859,28862,28864],{"class":222,"line":682},[220,28860,28861],{"class":264}," ShaderComponent ",[220,28863,353],{"class":260},[220,28865,28866],{"class":264}," Shader\n",[220,28868,28869,28872,28874],{"class":222,"line":691},[220,28870,28871],{"class":264}," LinearGradientComponent ",[220,28873,353],{"class":260},[220,28875,28876],{"class":264}," LinearGradient\n",[220,28878,28879],{"class":222,"line":696},[220,28880,11257],{"class":264},[220,28882,28883,28885,28887],{"class":222,"line":702},[220,28884,402],{"class":264},[220,28886,2590],{"class":346},[220,28888,359],{"class":264},[220,28890,28891],{"class":222,"line":718},[220,28892,647],{"emptyLinePlaceholder":194},[220,28894,28895,28897,28899],{"class":222,"line":727},[220,28896,28682],{"class":264},[220,28898,28685],{"class":260},[220,28900,28901],{"class":264}," ShaderComponent}\n",[220,28903,28904,28906,28908,28910,28913,28915,28918,28920,28922,28924],{"class":222,"line":2664},[220,28905,364],{"class":264},[220,28907,2846],{"class":260},[220,28909,1554],{"class":264},[220,28911,28912],{"class":346},"component",[220,28914,4208],{"class":226},[220,28916,28917],{"class":264},"={ShaderComponent} ",[220,28919,26757],{"class":226},[220,28921,353],{"class":264},[220,28923,356],{"class":230},[220,28925,359],{"class":264},[220,28927,28928,28930,28932,28934,28936,28938],{"class":222,"line":7900},[220,28929,2550],{"class":264},[220,28931,2846],{"class":260},[220,28933,1554],{"class":264},[220,28935,28912],{"class":346},[220,28937,4208],{"class":226},[220,28939,28940],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,28942,28943,28945,28947,28949,28951],{"class":222,"line":7910},[220,28944,2567],{"class":264},[220,28946,2846],{"class":260},[220,28948,1554],{"class":264},[220,28950,28912],{"class":346},[220,28952,359],{"class":264},[220,28954,28955,28957,28959],{"class":222,"line":7921},[220,28956,28753],{"class":264},[220,28958,28685],{"class":260},[220,28960,749],{"class":264},[1504,28962,28963],{},"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":28965},[28966,28967,28969,28971],{"id":28396,"depth":179,"text":28397},{"id":28477,"depth":179,"text":28968},"onMount for browser-only code",{"id":28620,"depth":179,"text":28970},"Conditional rendering with browser",{"id":28763,"depth":179,"text":28764},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":28348,"description":28972},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":28978,"title":201,"body":28979,"category":188,"description":29493,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":29494,"navigation":194,"path":29495,"seo":29496,"stem":29497,"__hash__":29498},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":28980,"toc":29484},[28981,28985,28987,28999,29001,29015,29017,29019,29073,29075,29081,29083,29090,29204,29211,29213,29219,29288,29291,29461,29465,29469,29473,29479,29481],[11,28982,28984],{"id":28983},"quickstart-vue","Quickstart (Vue)",[23,28986,24483],{"id":24482},[212,28988,28989],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28990,28991],{"__ignoreMap":178},[220,28992,28993,28995,28997],{"class":222,"line":223},[220,28994,227],{"class":226},[220,28996,231],{"class":230},[220,28998,234],{"class":230},[23,29000,25134],{"id":25133},[212,29002,29003],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,29004,29005],{"__ignoreMap":178},[220,29006,29007,29009,29011,29013],{"class":222,"line":223},[220,29008,261],{"class":260},[220,29010,265],{"class":264},[220,29012,268],{"class":260},[220,29014,271],{"class":230},[23,29016,323],{"id":322},[15,29018,25153],{},[212,29020,29021],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,29022,29023,29037,29057,29065],{"__ignoreMap":178},[220,29024,29025,29027,29029,29031,29033,29035],{"class":222,"line":223},[220,29026,343],{"class":264},[220,29028,347],{"class":346},[220,29030,350],{"class":226},[220,29032,353],{"class":264},[220,29034,356],{"class":230},[220,29036,359],{"class":264},[220,29038,29039,29041,29043,29045,29047,29049,29051,29053,29055],{"class":222,"line":179},[220,29040,364],{"class":264},[220,29042,367],{"class":346},[220,29044,370],{"class":226},[220,29046,353],{"class":264},[220,29048,375],{"class":230},[220,29050,378],{"class":226},[220,29052,353],{"class":264},[220,29054,383],{"class":230},[220,29056,386],{"class":264},[220,29058,29059,29061,29063],{"class":222,"line":389},[220,29060,364],{"class":264},[220,29062,394],{"class":346},[220,29064,386],{"class":264},[220,29066,29067,29069,29071],{"class":222,"line":399},[220,29068,402],{"class":264},[220,29070,347],{"class":346},[220,29072,359],{"class":264},[19,29074],{":preset":578},[15,29076,29077,583,29079,25216],{},[99,29078,101],{},[99,29080,586],{},[23,29082,594],{"id":593},[15,29084,1839,29085,29087,29088,590],{},[99,29086,586],{}," has no intrinsic size. The class or style you apply to ",[99,29089,101],{},[212,29091,29092],{"className":334,"code":27959,"language":336,"meta":178,"style":178},[99,29093,29094,29098,29112,29120,29128,29132,29136,29150,29158,29166,29170,29174,29188,29196],{"__ignoreMap":178},[220,29095,29096],{"class":222,"line":223},[220,29097,610],{"class":609},[220,29099,29100,29102,29104,29106,29108,29110],{"class":222,"line":179},[220,29101,343],{"class":264},[220,29103,347],{"class":346},[220,29105,350],{"class":226},[220,29107,353],{"class":264},[220,29109,623],{"class":230},[220,29111,359],{"class":264},[220,29113,29114,29116,29118],{"class":222,"line":389},[220,29115,364],{"class":264},[220,29117,367],{"class":346},[220,29119,386],{"class":264},[220,29121,29122,29124,29126],{"class":222,"line":399},[220,29123,402],{"class":264},[220,29125,347],{"class":346},[220,29127,359],{"class":264},[220,29129,29130],{"class":222,"line":644},[220,29131,647],{"emptyLinePlaceholder":194},[220,29133,29134],{"class":222,"line":650},[220,29135,653],{"class":609},[220,29137,29138,29140,29142,29144,29146,29148],{"class":222,"line":656},[220,29139,343],{"class":264},[220,29141,347],{"class":346},[220,29143,663],{"class":226},[220,29145,353],{"class":264},[220,29147,668],{"class":230},[220,29149,359],{"class":264},[220,29151,29152,29154,29156],{"class":222,"line":673},[220,29153,364],{"class":264},[220,29155,367],{"class":346},[220,29157,386],{"class":264},[220,29159,29160,29162,29164],{"class":222,"line":682},[220,29161,402],{"class":264},[220,29163,347],{"class":346},[220,29165,359],{"class":264},[220,29167,29168],{"class":222,"line":691},[220,29169,647],{"emptyLinePlaceholder":194},[220,29171,29172],{"class":222,"line":696},[220,29173,28042],{"class":609},[220,29175,29176,29178,29180,29182,29184,29186],{"class":222,"line":702},[220,29177,343],{"class":264},[220,29179,347],{"class":346},[220,29181,350],{"class":226},[220,29183,353],{"class":264},[220,29185,713],{"class":230},[220,29187,359],{"class":264},[220,29189,29190,29192,29194],{"class":222,"line":718},[220,29191,364],{"class":264},[220,29193,367],{"class":346},[220,29195,386],{"class":264},[220,29197,29198,29200,29202],{"class":222,"line":727},[220,29199,402],{"class":264},[220,29201,347],{"class":346},[220,29203,359],{"class":264},[15,29205,29206,29207,25376,29209,25379],{},"Applying a class or style to the ",[99,29208,101],{},[99,29210,586],{},[23,29212,1153],{"id":1152},[15,29214,29215,29216,29218],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,29217,1554],{}," binding syntax, strings can be passed plain:",[212,29220,29222],{"className":334,"code":29221,"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,29223,29224,29238,29244,29252,29260,29268,29276,29280],{"__ignoreMap":178},[220,29225,29226,29228,29230,29232,29234,29236],{"class":222,"line":223},[220,29227,343],{"class":264},[220,29229,347],{"class":346},[220,29231,350],{"class":226},[220,29233,353],{"class":264},[220,29235,356],{"class":230},[220,29237,359],{"class":264},[220,29239,29240,29242],{"class":222,"line":179},[220,29241,364],{"class":264},[220,29243,1189],{"class":346},[220,29245,29246,29248,29250],{"class":222,"line":389},[220,29247,17730],{"class":226},[220,29249,353],{"class":264},[220,29251,1199],{"class":230},[220,29253,29254,29256,29258],{"class":222,"line":399},[220,29255,17740],{"class":226},[220,29257,353],{"class":264},[220,29259,1209],{"class":230},[220,29261,29262,29264,29266],{"class":222,"line":644},[220,29263,1214],{"class":226},[220,29265,353],{"class":264},[220,29267,1219],{"class":230},[220,29269,29270,29272,29274],{"class":222,"line":650},[220,29271,1224],{"class":226},[220,29273,353],{"class":264},[220,29275,1229],{"class":230},[220,29277,29278],{"class":222,"line":656},[220,29279,1234],{"class":264},[220,29281,29282,29284,29286],{"class":222,"line":673},[220,29283,402],{"class":264},[220,29285,347],{"class":346},[220,29287,359],{"class":264},[15,29289,29290],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,29292,29294],{"className":9920,"code":29293,"language":9922,"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,29295,29296,29306,29316,29326,29330,29346,29354,29358,29366,29380,29406,29414,29418,29453],{"__ignoreMap":178},[220,29297,29298,29300,29302,29304],{"class":222,"line":223},[220,29299,343],{"class":264},[220,29301,2590],{"class":346},[220,29303,2593],{"class":226},[220,29305,359],{"class":264},[220,29307,29308,29310,29312,29314],{"class":222,"line":179},[220,29309,261],{"class":260},[220,29311,2602],{"class":264},[220,29313,268],{"class":260},[220,29315,2607],{"class":230},[220,29317,29318,29320,29322,29324],{"class":222,"line":389},[220,29319,261],{"class":260},[220,29321,25485],{"class":264},[220,29323,268],{"class":260},[220,29325,271],{"class":230},[220,29327,29328],{"class":222,"line":399},[220,29329,647],{"emptyLinePlaceholder":194},[220,29331,29332,29334,29336,29338,29340,29342,29344],{"class":222,"line":644},[220,29333,1735],{"class":260},[220,29335,8780],{"class":420},[220,29337,1741],{"class":260},[220,29339,2623],{"class":226},[220,29341,2626],{"class":264},[220,29343,6919],{"class":420},[220,29345,2632],{"class":264},[220,29347,29348,29350,29352],{"class":222,"line":650},[220,29349,402],{"class":264},[220,29351,2590],{"class":346},[220,29353,359],{"class":264},[220,29355,29356],{"class":222,"line":656},[220,29357,647],{"emptyLinePlaceholder":194},[220,29359,29360,29362,29364],{"class":222,"line":673},[220,29361,343],{"class":264},[220,29363,2519],{"class":346},[220,29365,359],{"class":264},[220,29367,29368,29370,29372,29374,29376,29378],{"class":222,"line":682},[220,29369,364],{"class":264},[220,29371,347],{"class":346},[220,29373,350],{"class":226},[220,29375,353],{"class":264},[220,29377,356],{"class":230},[220,29379,359],{"class":264},[220,29381,29382,29384,29386,29388,29390,29392,29394,29396,29398,29400,29402,29404],{"class":222,"line":691},[220,29383,2550],{"class":264},[220,29385,367],{"class":346},[220,29387,18598],{"class":226},[220,29389,353],{"class":264},[220,29391,25573],{"class":230},[220,29393,18605],{"class":226},[220,29395,353],{"class":264},[220,29397,25580],{"class":230},[220,29399,8937],{"class":226},[220,29401,353],{"class":264},[220,29403,8942],{"class":230},[220,29405,386],{"class":264},[220,29407,29408,29410,29412],{"class":222,"line":696},[220,29409,2567],{"class":264},[220,29411,347],{"class":346},[220,29413,359],{"class":264},[220,29415,29416],{"class":222,"line":702},[220,29417,647],{"emptyLinePlaceholder":194},[220,29419,29420,29422,29424,29426,29428,29430,29432,29434,29437,29439,29441,29444,29447,29449,29451],{"class":222,"line":718},[220,29421,364],{"class":264},[220,29423,28290],{"class":346},[220,29425,11198],{"class":226},[220,29427,353],{"class":264},[220,29429,28297],{"class":230},[220,29431,28300],{"class":226},[220,29433,353],{"class":264},[220,29435,29436],{"class":230},"\"0\"",[220,29438,28311],{"class":226},[220,29440,353],{"class":264},[220,29442,29443],{"class":230},"\"360\"",[220,29445,29446],{"class":226}," v-model.number",[220,29448,353],{"class":264},[220,29450,8942],{"class":230},[220,29452,386],{"class":264},[220,29454,29455,29457,29459],{"class":222,"line":727},[220,29456,402],{"class":264},[220,29458,2519],{"class":346},[220,29460,359],{"class":264},[15,29462,25026,29463,25696],{},[99,29464,9013],{},[15,29466,25033,29467,25036],{},[56,29468,1160],{"href":1159},[23,29470,29472],{"id":29471},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,29474,25707,29475,25712],{},[56,29476,29478],{"href":29477},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,29480,1474],{"id":1473},[1504,29482,29483],{},"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":29485},[29486,29487,29488,29489,29490,29491,29492],{"id":24482,"depth":179,"text":24483},{"id":25133,"depth":179,"text":25134},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":29471,"depth":179,"text":29472},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":29493},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":29500,"title":29478,"body":29501,"category":2240,"description":30174,"exclude":190,"extension":191,"forceFramework":190,"icon":26640,"meta":30175,"navigation":194,"path":29477,"seo":30176,"stem":30177,"__hash__":30178},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":29502,"toc":30167},[29503,29507,29510,29517,29523,29575,29578,29581,29677,29681,29688,29840,29844,29847,30048,30055,30144,30150,30154,30164],[11,29504,29506],{"id":29505},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,29508,29509],{},"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,29511,29513,29514],{"id":29512},"nuxt-clientonly","Nuxt: ",[99,29515,29516],{},"\u003CClientOnly>",[15,29518,29519,29520,29522],{},"Nuxt provides a built-in ",[99,29521,29516],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,29524,29526],{"className":334,"code":29525,"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,29527,29528,29537,29551,29559,29567],{"__ignoreMap":178},[220,29529,29530,29532,29535],{"class":222,"line":223},[220,29531,343],{"class":264},[220,29533,29534],{"class":346},"ClientOnly",[220,29536,359],{"class":264},[220,29538,29539,29541,29543,29545,29547,29549],{"class":222,"line":179},[220,29540,364],{"class":264},[220,29542,347],{"class":346},[220,29544,350],{"class":226},[220,29546,353],{"class":264},[220,29548,356],{"class":230},[220,29550,359],{"class":264},[220,29552,29553,29555,29557],{"class":222,"line":389},[220,29554,2550],{"class":264},[220,29556,367],{"class":346},[220,29558,386],{"class":264},[220,29560,29561,29563,29565],{"class":222,"line":399},[220,29562,2567],{"class":264},[220,29564,347],{"class":346},[220,29566,359],{"class":264},[220,29568,29569,29571,29573],{"class":222,"line":644},[220,29570,402],{"class":264},[220,29572,29534],{"class":346},[220,29574,359],{"class":264},[15,29576,29577],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,29579,29580],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,29582,29584],{"className":334,"code":29583,"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,29585,29586,29594,29608,29616,29624,29628,29642,29661,29669],{"__ignoreMap":178},[220,29587,29588,29590,29592],{"class":222,"line":223},[220,29589,343],{"class":264},[220,29591,29534],{"class":346},[220,29593,359],{"class":264},[220,29595,29596,29598,29600,29602,29604,29606],{"class":222,"line":179},[220,29597,364],{"class":264},[220,29599,347],{"class":346},[220,29601,350],{"class":226},[220,29603,353],{"class":264},[220,29605,356],{"class":230},[220,29607,359],{"class":264},[220,29609,29610,29612,29614],{"class":222,"line":389},[220,29611,2550],{"class":264},[220,29613,367],{"class":346},[220,29615,386],{"class":264},[220,29617,29618,29620,29622],{"class":222,"line":399},[220,29619,2567],{"class":264},[220,29621,347],{"class":346},[220,29623,359],{"class":264},[220,29625,29626],{"class":222,"line":644},[220,29627,647],{"emptyLinePlaceholder":194},[220,29629,29630,29632,29634,29637,29640],{"class":222,"line":650},[220,29631,364],{"class":264},[220,29633,2519],{"class":346},[220,29635,29636],{"class":264}," #",[220,29638,29639],{"class":226},"fallback",[220,29641,359],{"class":264},[220,29643,29644,29646,29648,29650,29652,29655,29659],{"class":222,"line":656},[220,29645,2550],{"class":264},[220,29647,8817],{"class":346},[220,29649,350],{"class":226},[220,29651,353],{"class":264},[220,29653,29654],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,29656,29658],{"class":29657},"s6RL2"," \u002F",[220,29660,359],{"class":264},[220,29662,29663,29665,29667],{"class":222,"line":673},[220,29664,2567],{"class":264},[220,29666,2519],{"class":346},[220,29668,359],{"class":264},[220,29670,29671,29673,29675],{"class":222,"line":682},[220,29672,402],{"class":264},[220,29674,29534],{"class":346},[220,29676,359],{"class":264},[23,29678,29680],{"id":29679},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,29682,29683,29684,29687],{},"If you're using Vue SSR without Nuxt, use ",[99,29685,29686],{},"v-if"," with a mounted flag:",[212,29689,29691],{"className":9920,"code":29690,"language":9922,"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,29692,29693,29703,29714,29718,29735,29752,29760,29764,29772,29786,29808,29816,29824,29832],{"__ignoreMap":178},[220,29694,29695,29697,29699,29701],{"class":222,"line":223},[220,29696,343],{"class":264},[220,29698,2590],{"class":346},[220,29700,2593],{"class":226},[220,29702,359],{"class":264},[220,29704,29705,29707,29710,29712],{"class":222,"line":179},[220,29706,261],{"class":260},[220,29708,29709],{"class":264}," { ref, onMounted } ",[220,29711,268],{"class":260},[220,29713,2607],{"class":230},[220,29715,29716],{"class":222,"line":389},[220,29717,647],{"emptyLinePlaceholder":194},[220,29719,29720,29722,29725,29727,29729,29731,29733],{"class":222,"line":399},[220,29721,1735],{"class":260},[220,29723,29724],{"class":420}," isMounted",[220,29726,1741],{"class":260},[220,29728,2623],{"class":226},[220,29730,2626],{"class":264},[220,29732,2629],{"class":420},[220,29734,2632],{"class":264},[220,29736,29737,29739,29741,29743,29746,29748,29750],{"class":222,"line":644},[220,29738,14819],{"class":226},[220,29740,14822],{"class":264},[220,29742,2762],{"class":260},[220,29744,29745],{"class":264}," { isMounted.value ",[220,29747,353],{"class":260},[220,29749,2911],{"class":420},[220,29751,9869],{"class":264},[220,29753,29754,29756,29758],{"class":222,"line":650},[220,29755,402],{"class":264},[220,29757,2590],{"class":346},[220,29759,359],{"class":264},[220,29761,29762],{"class":222,"line":656},[220,29763,647],{"emptyLinePlaceholder":194},[220,29765,29766,29768,29770],{"class":222,"line":673},[220,29767,343],{"class":264},[220,29769,2519],{"class":346},[220,29771,359],{"class":264},[220,29773,29774,29776,29778,29780,29782,29784],{"class":222,"line":682},[220,29775,364],{"class":264},[220,29777,8817],{"class":346},[220,29779,350],{"class":226},[220,29781,353],{"class":264},[220,29783,356],{"class":230},[220,29785,359],{"class":264},[220,29787,29788,29790,29792,29795,29797,29800,29802,29804,29806],{"class":222,"line":691},[220,29789,2550],{"class":264},[220,29791,347],{"class":346},[220,29793,29794],{"class":226}," v-if",[220,29796,353],{"class":264},[220,29798,29799],{"class":230},"\"isMounted\"",[220,29801,350],{"class":226},[220,29803,353],{"class":264},[220,29805,356],{"class":230},[220,29807,359],{"class":264},[220,29809,29810,29812,29814],{"class":222,"line":696},[220,29811,2813],{"class":264},[220,29813,367],{"class":346},[220,29815,386],{"class":264},[220,29817,29818,29820,29822],{"class":222,"line":702},[220,29819,2828],{"class":264},[220,29821,347],{"class":346},[220,29823,359],{"class":264},[220,29825,29826,29828,29830],{"class":222,"line":718},[220,29827,2567],{"class":264},[220,29829,8817],{"class":346},[220,29831,359],{"class":264},[220,29833,29834,29836,29838],{"class":222,"line":727},[220,29835,402],{"class":264},[220,29837,2519],{"class":346},[220,29839,359],{"class":264},[23,29841,29843],{"id":29842},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,29845,29846],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,29848,29850],{"className":9920,"code":29849,"language":9922,"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,29851,29852,29862,29873,29877,29893,29909,29913,29918,29956,29990,29998,30002,30010,30024,30032,30040],{"__ignoreMap":178},[220,29853,29854,29856,29858,29860],{"class":222,"line":223},[220,29855,343],{"class":264},[220,29857,2590],{"class":346},[220,29859,2593],{"class":226},[220,29861,359],{"class":264},[220,29863,29864,29866,29869,29871],{"class":222,"line":179},[220,29865,261],{"class":260},[220,29867,29868],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,29870,268],{"class":260},[220,29872,2607],{"class":230},[220,29874,29875],{"class":222,"line":389},[220,29876,647],{"emptyLinePlaceholder":194},[220,29878,29879,29881,29883,29885,29887,29889,29891],{"class":222,"line":399},[220,29880,1735],{"class":260},[220,29882,29724],{"class":420},[220,29884,1741],{"class":260},[220,29886,2623],{"class":226},[220,29888,2626],{"class":264},[220,29890,2629],{"class":420},[220,29892,2632],{"class":264},[220,29894,29895,29897,29899,29901,29903,29905,29907],{"class":222,"line":644},[220,29896,14819],{"class":226},[220,29898,14822],{"class":264},[220,29900,2762],{"class":260},[220,29902,29745],{"class":264},[220,29904,353],{"class":260},[220,29906,2911],{"class":420},[220,29908,9869],{"class":264},[220,29910,29911],{"class":222,"line":650},[220,29912,647],{"emptyLinePlaceholder":194},[220,29914,29915],{"class":222,"line":656},[220,29916,29917],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,29919,29920,29922,29925,29927,29930,29932,29934,29936,29938,29941,29943,29946,29948,29951,29953],{"class":222,"line":673},[220,29921,1735],{"class":260},[220,29923,29924],{"class":420}," Shader",[220,29926,1741],{"class":260},[220,29928,29929],{"class":226}," defineAsyncComponent",[220,29931,14822],{"class":264},[220,29933,2762],{"class":260},[220,29935,26040],{"class":260},[220,29937,2626],{"class":264},[220,29939,29940],{"class":230},"'shaders\u002Fvue'",[220,29942,13693],{"class":264},[220,29944,29945],{"class":226},"then",[220,29947,2626],{"class":264},[220,29949,29950],{"class":9077},"m",[220,29952,9080],{"class":260},[220,29954,29955],{"class":264}," m.Shader))\n",[220,29957,29958,29960,29963,29965,29967,29969,29971,29973,29975,29977,29979,29981,29983,29985,29987],{"class":222,"line":682},[220,29959,1735],{"class":260},[220,29961,29962],{"class":420}," LinearGradient",[220,29964,1741],{"class":260},[220,29966,29929],{"class":226},[220,29968,14822],{"class":264},[220,29970,2762],{"class":260},[220,29972,26040],{"class":260},[220,29974,2626],{"class":264},[220,29976,29940],{"class":230},[220,29978,13693],{"class":264},[220,29980,29945],{"class":226},[220,29982,2626],{"class":264},[220,29984,29950],{"class":9077},[220,29986,9080],{"class":260},[220,29988,29989],{"class":264}," m.LinearGradient))\n",[220,29991,29992,29994,29996],{"class":222,"line":691},[220,29993,402],{"class":264},[220,29995,2590],{"class":346},[220,29997,359],{"class":264},[220,29999,30000],{"class":222,"line":696},[220,30001,647],{"emptyLinePlaceholder":194},[220,30003,30004,30006,30008],{"class":222,"line":702},[220,30005,343],{"class":264},[220,30007,2519],{"class":346},[220,30009,359],{"class":264},[220,30011,30012,30014,30016,30018,30020,30022],{"class":222,"line":718},[220,30013,364],{"class":264},[220,30015,347],{"class":346},[220,30017,29794],{"class":226},[220,30019,353],{"class":264},[220,30021,29799],{"class":230},[220,30023,359],{"class":264},[220,30025,30026,30028,30030],{"class":222,"line":727},[220,30027,2550],{"class":264},[220,30029,367],{"class":346},[220,30031,386],{"class":264},[220,30033,30034,30036,30038],{"class":222,"line":2664},[220,30035,2567],{"class":264},[220,30037,347],{"class":346},[220,30039,359],{"class":264},[220,30041,30042,30044,30046],{"class":222,"line":7900},[220,30043,402],{"class":264},[220,30045,2519],{"class":346},[220,30047,359],{"class":264},[15,30049,30050,30051,30054],{},"Or in Nuxt, use ",[99,30052,30053],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,30056,30058],{"className":251,"code":30057,"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,30059,30060,30065,30077,30087,30091,30112,30127,30140],{"__ignoreMap":178},[220,30061,30062],{"class":222,"line":223},[220,30063,30064],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,30066,30067,30069,30072,30074],{"class":222,"line":179},[220,30068,261],{"class":260},[220,30070,30071],{"class":264}," { defineNuxtPlugin } ",[220,30073,268],{"class":260},[220,30075,30076],{"class":230}," '#app'\n",[220,30078,30079,30081,30083,30085],{"class":222,"line":389},[220,30080,261],{"class":260},[220,30082,25485],{"class":264},[220,30084,268],{"class":260},[220,30086,271],{"class":230},[220,30088,30089],{"class":222,"line":399},[220,30090,647],{"emptyLinePlaceholder":194},[220,30092,30093,30095,30097,30100,30103,30106,30108,30110],{"class":222,"line":644},[220,30094,25498],{"class":260},[220,30096,25501],{"class":260},[220,30098,30099],{"class":226}," defineNuxtPlugin",[220,30101,30102],{"class":264},"((",[220,30104,30105],{"class":9077},"nuxtApp",[220,30107,10252],{"class":264},[220,30109,2762],{"class":260},[220,30111,3241],{"class":264},[220,30113,30114,30117,30119,30121,30124],{"class":222,"line":650},[220,30115,30116],{"class":264}," nuxtApp.vueApp.",[220,30118,28912],{"class":226},[220,30120,2626],{"class":264},[220,30122,30123],{"class":230},"'Shader'",[220,30125,30126],{"class":264},", Shader)\n",[220,30128,30129,30131,30133,30135,30137],{"class":222,"line":656},[220,30130,30116],{"class":264},[220,30132,28912],{"class":226},[220,30134,2626],{"class":264},[220,30136,2462],{"class":230},[220,30138,30139],{"class":264},", LinearGradient)\n",[220,30141,30142],{"class":222,"line":673},[220,30143,1792],{"class":264},[15,30145,1839,30146,30149],{},[99,30147,30148],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,30151,30153],{"id":30152},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,30155,1839,30156,10504,30158,30160,30161,30163],{},[99,30157,101],{},[99,30159,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,30162,29516],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,30165,30166],{},"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":30168},[30169,30171,30172,30173],{"id":29512,"depth":179,"text":30170},"Nuxt: \u003CClientOnly>",{"id":29679,"depth":179,"text":29680},{"id":29842,"depth":179,"text":29843},{"id":30152,"depth":179,"text":30153},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":29478,"description":30174},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[30180,30521,30815,31093,31350,31683,31883,32083,32283,32483,32816,33016,33293,33494,33827,34103,34303,34579,34855,35054,35254,35559,35835,36124,36324,36600,36932,37132,37408,37684,37977,38270,38545,38744,39123,39377,39577,39910,40110,40443,40719,40962,41331,41607,41852,42126,42402,42602,42878,43078,43354,43630,43830,44106,44399,44599,44875,45075,45351,45551,45751,45951,46225,46556,46888,47219,47475,47675,47951,48221,48466,48842,49113,49389,49683,49889,50089,50336,50536,50812,51012,51282,51482,51758,52034,52289,52550,52882,53214,53412,53612,53990,54190,54466,54666,54960,55236,55569,55845,56090,56290,56489,56765,57097,57429,57705,57960,58160,58538,58830,59163,59421,59753,60009,60341,60617,60949,61241,61441,61686,62017,62217,62493,62873,63073,63318,63574,63829,64085,64361,64605,64937,65137,65429,65761,65961,66237,66435,66682,66976,67252,67451,67744,67988,68243,68575,68898,69143,69343,69619,69819,70151,70427,70719,71052,71252,71666,71866,72066,72398,72674,72874,73074,73274,73606,73806],{"id":30181,"title":30182,"body":30183,"category":30515,"componentType":24147,"description":30190,"extension":191,"meta":30516,"navigation":194,"path":30517,"requiresChild":194,"seo":30518,"stem":30519,"__hash__":30520},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":30184,"toc":30511},[30185,30188,30191,30194,30197,30201,30205,30509],[11,30186,30182],{"id":30187},"angularblur",[15,30189,30190],{},"Radial motion blur rotating around a center point",[30192,30193],"shader-preview",{"component":30182},[23,30195,30196],{"id":24798},"Props",[30198,30199],"props-table",{":props":30200},"[{\"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,30202,30204],{"id":30203},"usage","Usage",[246,30206,30207,30265,30324,30380,30438],{":tabs":1557},[212,30208,30210],{"className":334,"code":30209,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,30211,30212,30220,30227,30236,30241,30249,30257],{"__ignoreMap":178},[220,30213,30214,30216,30218],{"class":222,"line":223},[220,30215,343],{"class":264},[220,30217,347],{"class":346},[220,30219,359],{"class":264},[220,30221,30222,30224],{"class":222,"line":179},[220,30223,364],{"class":264},[220,30225,30226],{"class":346},"AngularBlur\n",[220,30228,30229,30231,30233],{"class":222,"line":389},[220,30230,18633],{"class":226},[220,30232,353],{"class":264},[220,30234,30235],{"class":230},"\"20\"\n",[220,30237,30238],{"class":222,"line":399},[220,30239,30240],{"class":264}," >\n",[220,30242,30243,30245,30247],{"class":222,"line":644},[220,30244,2550],{"class":264},[220,30246,2553],{"class":346},[220,30248,386],{"class":264},[220,30250,30251,30253,30255],{"class":222,"line":650},[220,30252,2567],{"class":264},[220,30254,30182],{"class":346},[220,30256,359],{"class":264},[220,30258,30259,30261,30263],{"class":222,"line":656},[220,30260,402],{"class":264},[220,30262,347],{"class":346},[220,30264,359],{"class":264},[212,30266,30268],{"className":409,"code":30267,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,30269,30270,30278,30284,30296,30300,30308,30316],{"__ignoreMap":178},[220,30271,30272,30274,30276],{"class":222,"line":223},[220,30273,343],{"class":264},[220,30275,347],{"class":420},[220,30277,359],{"class":264},[220,30279,30280,30282],{"class":222,"line":179},[220,30281,364],{"class":264},[220,30283,30226],{"class":420},[220,30285,30286,30288,30290,30292,30294],{"class":222,"line":389},[220,30287,18744],{"class":226},[220,30289,353],{"class":260},[220,30291,743],{"class":264},[220,30293,23063],{"class":420},[220,30295,749],{"class":264},[220,30297,30298],{"class":222,"line":399},[220,30299,30240],{"class":264},[220,30301,30302,30304,30306],{"class":222,"line":644},[220,30303,2550],{"class":264},[220,30305,2553],{"class":420},[220,30307,386],{"class":264},[220,30309,30310,30312,30314],{"class":222,"line":650},[220,30311,2567],{"class":264},[220,30313,30182],{"class":420},[220,30315,359],{"class":264},[220,30317,30318,30320,30322],{"class":222,"line":656},[220,30319,402],{"class":264},[220,30321,347],{"class":420},[220,30323,359],{"class":264},[212,30325,30326],{"className":2844,"code":30267,"language":2846,"meta":178,"style":178},[99,30327,30328,30336,30342,30352,30356,30364,30372],{"__ignoreMap":178},[220,30329,30330,30332,30334],{"class":222,"line":223},[220,30331,343],{"class":264},[220,30333,347],{"class":420},[220,30335,359],{"class":264},[220,30337,30338,30340],{"class":222,"line":179},[220,30339,364],{"class":264},[220,30341,30226],{"class":420},[220,30343,30344,30346,30348,30350],{"class":222,"line":389},[220,30345,18744],{"class":226},[220,30347,28138],{"class":264},[220,30349,23063],{"class":420},[220,30351,749],{"class":264},[220,30353,30354],{"class":222,"line":399},[220,30355,30240],{"class":264},[220,30357,30358,30360,30362],{"class":222,"line":644},[220,30359,2550],{"class":264},[220,30361,2553],{"class":420},[220,30363,386],{"class":264},[220,30365,30366,30368,30370],{"class":222,"line":650},[220,30367,2567],{"class":264},[220,30369,30182],{"class":420},[220,30371,359],{"class":264},[220,30373,30374,30376,30378],{"class":222,"line":656},[220,30375,402],{"class":264},[220,30377,347],{"class":420},[220,30379,359],{"class":264},[212,30381,30382],{"className":468,"code":30267,"language":469,"meta":178,"style":178},[99,30383,30384,30392,30398,30410,30414,30422,30430],{"__ignoreMap":178},[220,30385,30386,30388,30390],{"class":222,"line":223},[220,30387,343],{"class":264},[220,30389,347],{"class":420},[220,30391,359],{"class":264},[220,30393,30394,30396],{"class":222,"line":179},[220,30395,364],{"class":264},[220,30397,30226],{"class":420},[220,30399,30400,30402,30404,30406,30408],{"class":222,"line":389},[220,30401,18744],{"class":226},[220,30403,353],{"class":260},[220,30405,743],{"class":264},[220,30407,23063],{"class":420},[220,30409,749],{"class":264},[220,30411,30412],{"class":222,"line":399},[220,30413,30240],{"class":264},[220,30415,30416,30418,30420],{"class":222,"line":644},[220,30417,2550],{"class":264},[220,30419,2553],{"class":420},[220,30421,386],{"class":264},[220,30423,30424,30426,30428],{"class":222,"line":650},[220,30425,2567],{"class":264},[220,30427,30182],{"class":420},[220,30429,359],{"class":264},[220,30431,30432,30434,30436],{"class":222,"line":656},[220,30433,402],{"class":264},[220,30435,347],{"class":420},[220,30437,359],{"class":264},[212,30439,30441],{"className":251,"code":30440,"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,30442,30443,30453,30457,30471,30475,30489,30497,30501,30505],{"__ignoreMap":178},[220,30444,30445,30447,30449,30451],{"class":222,"line":223},[220,30446,261],{"class":260},[220,30448,9763],{"class":264},[220,30450,268],{"class":260},[220,30452,9768],{"class":230},[220,30454,30455],{"class":222,"line":179},[220,30456,647],{"emptyLinePlaceholder":194},[220,30458,30459,30461,30463,30465,30467,30469],{"class":222,"line":389},[220,30460,1735],{"class":260},[220,30462,1738],{"class":420},[220,30464,1741],{"class":260},[220,30466,1744],{"class":260},[220,30468,1747],{"class":226},[220,30470,1750],{"class":264},[220,30472,30473],{"class":222,"line":399},[220,30474,1765],{"class":264},[220,30476,30477,30479,30482,30485,30487],{"class":222,"line":644},[220,30478,1770],{"class":264},[220,30480,30481],{"class":230},"'AngularBlur'",[220,30483,30484],{"class":264},", props: { intensity: ",[220,30486,23063],{"class":420},[220,30488,5792],{"class":264},[220,30490,30491,30493,30495],{"class":222,"line":650},[220,30492,5260],{"class":264},[220,30494,3206],{"class":230},[220,30496,2465],{"class":264},[220,30498,30499],{"class":222,"line":656},[220,30500,5277],{"class":264},[220,30502,30503],{"class":222,"line":673},[220,30504,1787],{"class":264},[220,30506,30507],{"class":222,"line":682},[220,30508,1792],{"class":264},[1504,30510,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":30512},[30513,30514],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":30182,"description":30190},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":30522,"title":30523,"body":30524,"category":14164,"componentType":24141,"description":30531,"extension":191,"meta":30809,"navigation":194,"path":30810,"requiresChild":30811,"seo":30812,"stem":30813,"__hash__":30814},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":30525,"toc":30805},[30526,30529,30532,30534,30536,30539,30541,30803],[11,30527,30523],{"id":30528},"arc",[15,30530,30531],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[30192,30533],{"component":30523},[23,30535,30196],{"id":24798},[30198,30537],{":props":30538},"[{\"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,30540,30204],{"id":30203},[246,30542,30543,30592,30643,30691,30741],{":tabs":1557},[212,30544,30546],{"className":334,"code":30545,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,30547,30548,30556,30563,30571,30580,30584],{"__ignoreMap":178},[220,30549,30550,30552,30554],{"class":222,"line":223},[220,30551,343],{"class":264},[220,30553,347],{"class":346},[220,30555,359],{"class":264},[220,30557,30558,30560],{"class":222,"line":179},[220,30559,364],{"class":264},[220,30561,30562],{"class":346},"Arc\n",[220,30564,30565,30567,30569],{"class":222,"line":389},[220,30566,7882],{"class":226},[220,30568,353],{"class":264},[220,30570,7838],{"class":230},[220,30572,30573,30575,30577],{"class":222,"line":399},[220,30574,15666],{"class":226},[220,30576,353],{"class":264},[220,30578,30579],{"class":230},"\"0.38\"\n",[220,30581,30582],{"class":222,"line":644},[220,30583,1234],{"class":264},[220,30585,30586,30588,30590],{"class":222,"line":650},[220,30587,402],{"class":264},[220,30589,347],{"class":346},[220,30591,359],{"class":264},[212,30593,30595],{"className":409,"code":30594,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,30596,30597,30605,30611,30619,30631,30635],{"__ignoreMap":178},[220,30598,30599,30601,30603],{"class":222,"line":223},[220,30600,343],{"class":264},[220,30602,347],{"class":420},[220,30604,359],{"class":264},[220,30606,30607,30609],{"class":222,"line":179},[220,30608,364],{"class":264},[220,30610,30562],{"class":420},[220,30612,30613,30615,30617],{"class":222,"line":389},[220,30614,7882],{"class":226},[220,30616,353],{"class":260},[220,30618,7838],{"class":230},[220,30620,30621,30623,30625,30627,30629],{"class":222,"line":399},[220,30622,7892],{"class":226},[220,30624,353],{"class":260},[220,30626,743],{"class":264},[220,30628,23001],{"class":420},[220,30630,749],{"class":264},[220,30632,30633],{"class":222,"line":644},[220,30634,1234],{"class":264},[220,30636,30637,30639,30641],{"class":222,"line":650},[220,30638,402],{"class":264},[220,30640,347],{"class":420},[220,30642,359],{"class":264},[212,30644,30645],{"className":2844,"code":30594,"language":2846,"meta":178,"style":178},[99,30646,30647,30655,30661,30669,30679,30683],{"__ignoreMap":178},[220,30648,30649,30651,30653],{"class":222,"line":223},[220,30650,343],{"class":264},[220,30652,347],{"class":420},[220,30654,359],{"class":264},[220,30656,30657,30659],{"class":222,"line":179},[220,30658,364],{"class":264},[220,30660,30562],{"class":420},[220,30662,30663,30665,30667],{"class":222,"line":389},[220,30664,7882],{"class":226},[220,30666,353],{"class":264},[220,30668,7838],{"class":230},[220,30670,30671,30673,30675,30677],{"class":222,"line":399},[220,30672,7892],{"class":226},[220,30674,28138],{"class":264},[220,30676,23001],{"class":420},[220,30678,749],{"class":264},[220,30680,30681],{"class":222,"line":644},[220,30682,1234],{"class":264},[220,30684,30685,30687,30689],{"class":222,"line":650},[220,30686,402],{"class":264},[220,30688,347],{"class":420},[220,30690,359],{"class":264},[212,30692,30693],{"className":468,"code":30594,"language":469,"meta":178,"style":178},[99,30694,30695,30703,30709,30717,30729,30733],{"__ignoreMap":178},[220,30696,30697,30699,30701],{"class":222,"line":223},[220,30698,343],{"class":264},[220,30700,347],{"class":420},[220,30702,359],{"class":264},[220,30704,30705,30707],{"class":222,"line":179},[220,30706,364],{"class":264},[220,30708,30562],{"class":420},[220,30710,30711,30713,30715],{"class":222,"line":389},[220,30712,7882],{"class":226},[220,30714,353],{"class":260},[220,30716,7838],{"class":230},[220,30718,30719,30721,30723,30725,30727],{"class":222,"line":399},[220,30720,7892],{"class":226},[220,30722,353],{"class":260},[220,30724,743],{"class":264},[220,30726,23001],{"class":420},[220,30728,749],{"class":264},[220,30730,30731],{"class":222,"line":644},[220,30732,1234],{"class":264},[220,30734,30735,30737,30739],{"class":222,"line":650},[220,30736,402],{"class":264},[220,30738,347],{"class":420},[220,30740,359],{"class":264},[212,30742,30744],{"className":251,"code":30743,"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,30745,30746,30756,30760,30774,30778,30795,30799],{"__ignoreMap":178},[220,30747,30748,30750,30752,30754],{"class":222,"line":223},[220,30749,261],{"class":260},[220,30751,9763],{"class":264},[220,30753,268],{"class":260},[220,30755,9768],{"class":230},[220,30757,30758],{"class":222,"line":179},[220,30759,647],{"emptyLinePlaceholder":194},[220,30761,30762,30764,30766,30768,30770,30772],{"class":222,"line":389},[220,30763,1735],{"class":260},[220,30765,1738],{"class":420},[220,30767,1741],{"class":260},[220,30769,1744],{"class":260},[220,30771,1747],{"class":226},[220,30773,1750],{"class":264},[220,30775,30776],{"class":222,"line":399},[220,30777,1765],{"class":264},[220,30779,30780,30782,30785,30787,30789,30791,30793],{"class":222,"line":644},[220,30781,1770],{"class":264},[220,30783,30784],{"class":230},"'Arc'",[220,30786,1776],{"class":264},[220,30788,8417],{"class":230},[220,30790,4812],{"class":264},[220,30792,23001],{"class":420},[220,30794,1782],{"class":264},[220,30796,30797],{"class":222,"line":650},[220,30798,1787],{"class":264},[220,30800,30801],{"class":222,"line":656},[220,30802,1792],{"class":264},[1504,30804,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":30806},[30807,30808],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":30523,"description":30531},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":30816,"title":30817,"body":30818,"category":31087,"componentType":24147,"description":30825,"extension":191,"meta":31088,"navigation":194,"path":31089,"requiresChild":194,"seo":31090,"stem":31091,"__hash__":31092},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":30819,"toc":31083},[30820,30823,30826,30828,30830,30833,30835,31080],[11,30821,30817],{"id":30822},"ascii",[15,30824,30825],{},"Convert imagery to ASCII character art",[30192,30827],{"component":30817},[23,30829,30196],{"id":24798},[30198,30831],{":props":30832},"[{\"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,30834,30204],{"id":30203},[246,30836,30837,30882,30926,30970,31014],{":tabs":1557},[212,30838,30840],{"className":334,"code":30839,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,30841,30842,30850,30858,30866,30874],{"__ignoreMap":178},[220,30843,30844,30846,30848],{"class":222,"line":223},[220,30845,343],{"class":264},[220,30847,347],{"class":346},[220,30849,359],{"class":264},[220,30851,30852,30854,30856],{"class":222,"line":179},[220,30853,364],{"class":264},[220,30855,30817],{"class":346},[220,30857,359],{"class":264},[220,30859,30860,30862,30864],{"class":222,"line":389},[220,30861,2550],{"class":264},[220,30863,2553],{"class":346},[220,30865,386],{"class":264},[220,30867,30868,30870,30872],{"class":222,"line":399},[220,30869,2567],{"class":264},[220,30871,30817],{"class":346},[220,30873,359],{"class":264},[220,30875,30876,30878,30880],{"class":222,"line":644},[220,30877,402],{"class":264},[220,30879,347],{"class":346},[220,30881,359],{"class":264},[212,30883,30884],{"className":409,"code":30839,"language":411,"meta":178,"style":178},[99,30885,30886,30894,30902,30910,30918],{"__ignoreMap":178},[220,30887,30888,30890,30892],{"class":222,"line":223},[220,30889,343],{"class":264},[220,30891,347],{"class":420},[220,30893,359],{"class":264},[220,30895,30896,30898,30900],{"class":222,"line":179},[220,30897,364],{"class":264},[220,30899,30817],{"class":420},[220,30901,359],{"class":264},[220,30903,30904,30906,30908],{"class":222,"line":389},[220,30905,2550],{"class":264},[220,30907,2553],{"class":420},[220,30909,386],{"class":264},[220,30911,30912,30914,30916],{"class":222,"line":399},[220,30913,2567],{"class":264},[220,30915,30817],{"class":420},[220,30917,359],{"class":264},[220,30919,30920,30922,30924],{"class":222,"line":644},[220,30921,402],{"class":264},[220,30923,347],{"class":420},[220,30925,359],{"class":264},[212,30927,30928],{"className":2844,"code":30839,"language":2846,"meta":178,"style":178},[99,30929,30930,30938,30946,30954,30962],{"__ignoreMap":178},[220,30931,30932,30934,30936],{"class":222,"line":223},[220,30933,343],{"class":264},[220,30935,347],{"class":420},[220,30937,359],{"class":264},[220,30939,30940,30942,30944],{"class":222,"line":179},[220,30941,364],{"class":264},[220,30943,30817],{"class":420},[220,30945,359],{"class":264},[220,30947,30948,30950,30952],{"class":222,"line":389},[220,30949,2550],{"class":264},[220,30951,2553],{"class":420},[220,30953,386],{"class":264},[220,30955,30956,30958,30960],{"class":222,"line":399},[220,30957,2567],{"class":264},[220,30959,30817],{"class":420},[220,30961,359],{"class":264},[220,30963,30964,30966,30968],{"class":222,"line":644},[220,30965,402],{"class":264},[220,30967,347],{"class":420},[220,30969,359],{"class":264},[212,30971,30972],{"className":468,"code":30839,"language":469,"meta":178,"style":178},[99,30973,30974,30982,30990,30998,31006],{"__ignoreMap":178},[220,30975,30976,30978,30980],{"class":222,"line":223},[220,30977,343],{"class":264},[220,30979,347],{"class":420},[220,30981,359],{"class":264},[220,30983,30984,30986,30988],{"class":222,"line":179},[220,30985,364],{"class":264},[220,30987,30817],{"class":420},[220,30989,359],{"class":264},[220,30991,30992,30994,30996],{"class":222,"line":389},[220,30993,2550],{"class":264},[220,30995,2553],{"class":420},[220,30997,386],{"class":264},[220,30999,31000,31002,31004],{"class":222,"line":399},[220,31001,2567],{"class":264},[220,31003,30817],{"class":420},[220,31005,359],{"class":264},[220,31007,31008,31010,31012],{"class":222,"line":644},[220,31009,402],{"class":264},[220,31011,347],{"class":420},[220,31013,359],{"class":264},[212,31015,31017],{"className":251,"code":31016,"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,31018,31019,31029,31033,31047,31051,31060,31068,31072,31076],{"__ignoreMap":178},[220,31020,31021,31023,31025,31027],{"class":222,"line":223},[220,31022,261],{"class":260},[220,31024,9763],{"class":264},[220,31026,268],{"class":260},[220,31028,9768],{"class":230},[220,31030,31031],{"class":222,"line":179},[220,31032,647],{"emptyLinePlaceholder":194},[220,31034,31035,31037,31039,31041,31043,31045],{"class":222,"line":389},[220,31036,1735],{"class":260},[220,31038,1738],{"class":420},[220,31040,1741],{"class":260},[220,31042,1744],{"class":260},[220,31044,1747],{"class":226},[220,31046,1750],{"class":264},[220,31048,31049],{"class":222,"line":399},[220,31050,1765],{"class":264},[220,31052,31053,31055,31058],{"class":222,"line":644},[220,31054,1770],{"class":264},[220,31056,31057],{"class":230},"'Ascii'",[220,31059,5255],{"class":264},[220,31061,31062,31064,31066],{"class":222,"line":650},[220,31063,5260],{"class":264},[220,31065,3206],{"class":230},[220,31067,2465],{"class":264},[220,31069,31070],{"class":222,"line":656},[220,31071,5277],{"class":264},[220,31073,31074],{"class":222,"line":673},[220,31075,1787],{"class":264},[220,31077,31078],{"class":222,"line":682},[220,31079,1792],{"class":264},[1504,31081,31082],{},"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":31084},[31085,31086],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":30817,"description":30825},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":31094,"title":10871,"body":31095,"category":31344,"componentType":24141,"description":31102,"extension":191,"meta":31345,"navigation":194,"path":31346,"requiresChild":30811,"seo":31347,"stem":31348,"__hash__":31349},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":31096,"toc":31340},[31097,31100,31103,31105,31107,31110,31112,31338],[11,31098,10871],{"id":31099},"aurora",[15,31101,31102],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[30192,31104],{"component":10871},[23,31106,30196],{"id":24798},[30198,31108],{":props":31109},"[{\"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,31111,30204],{"id":30203},[246,31113,31114,31155,31199,31239,31281],{":tabs":1557},[212,31115,31117],{"className":334,"code":31116,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,31118,31119,31127,31134,31143,31147],{"__ignoreMap":178},[220,31120,31121,31123,31125],{"class":222,"line":223},[220,31122,343],{"class":264},[220,31124,347],{"class":346},[220,31126,359],{"class":264},[220,31128,31129,31131],{"class":222,"line":179},[220,31130,364],{"class":264},[220,31132,31133],{"class":346},"Aurora\n",[220,31135,31136,31138,31140],{"class":222,"line":389},[220,31137,18633],{"class":226},[220,31139,353],{"class":264},[220,31141,31142],{"class":230},"\"80\"\n",[220,31144,31145],{"class":222,"line":399},[220,31146,1234],{"class":264},[220,31148,31149,31151,31153],{"class":222,"line":644},[220,31150,402],{"class":264},[220,31152,347],{"class":346},[220,31154,359],{"class":264},[212,31156,31158],{"className":409,"code":31157,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,31159,31160,31168,31174,31187,31191],{"__ignoreMap":178},[220,31161,31162,31164,31166],{"class":222,"line":223},[220,31163,343],{"class":264},[220,31165,347],{"class":420},[220,31167,359],{"class":264},[220,31169,31170,31172],{"class":222,"line":179},[220,31171,364],{"class":264},[220,31173,31133],{"class":420},[220,31175,31176,31178,31180,31182,31185],{"class":222,"line":389},[220,31177,18744],{"class":226},[220,31179,353],{"class":260},[220,31181,743],{"class":264},[220,31183,31184],{"class":420},"80",[220,31186,749],{"class":264},[220,31188,31189],{"class":222,"line":399},[220,31190,1234],{"class":264},[220,31192,31193,31195,31197],{"class":222,"line":644},[220,31194,402],{"class":264},[220,31196,347],{"class":420},[220,31198,359],{"class":264},[212,31200,31201],{"className":2844,"code":31157,"language":2846,"meta":178,"style":178},[99,31202,31203,31211,31217,31227,31231],{"__ignoreMap":178},[220,31204,31205,31207,31209],{"class":222,"line":223},[220,31206,343],{"class":264},[220,31208,347],{"class":420},[220,31210,359],{"class":264},[220,31212,31213,31215],{"class":222,"line":179},[220,31214,364],{"class":264},[220,31216,31133],{"class":420},[220,31218,31219,31221,31223,31225],{"class":222,"line":389},[220,31220,18744],{"class":226},[220,31222,28138],{"class":264},[220,31224,31184],{"class":420},[220,31226,749],{"class":264},[220,31228,31229],{"class":222,"line":399},[220,31230,1234],{"class":264},[220,31232,31233,31235,31237],{"class":222,"line":644},[220,31234,402],{"class":264},[220,31236,347],{"class":420},[220,31238,359],{"class":264},[212,31240,31241],{"className":468,"code":31157,"language":469,"meta":178,"style":178},[99,31242,31243,31251,31257,31269,31273],{"__ignoreMap":178},[220,31244,31245,31247,31249],{"class":222,"line":223},[220,31246,343],{"class":264},[220,31248,347],{"class":420},[220,31250,359],{"class":264},[220,31252,31253,31255],{"class":222,"line":179},[220,31254,364],{"class":264},[220,31256,31133],{"class":420},[220,31258,31259,31261,31263,31265,31267],{"class":222,"line":389},[220,31260,18744],{"class":226},[220,31262,353],{"class":260},[220,31264,743],{"class":264},[220,31266,31184],{"class":420},[220,31268,749],{"class":264},[220,31270,31271],{"class":222,"line":399},[220,31272,1234],{"class":264},[220,31274,31275,31277,31279],{"class":222,"line":644},[220,31276,402],{"class":264},[220,31278,347],{"class":420},[220,31280,359],{"class":264},[212,31282,31284],{"className":251,"code":31283,"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,31285,31286,31296,31300,31314,31318,31330,31334],{"__ignoreMap":178},[220,31287,31288,31290,31292,31294],{"class":222,"line":223},[220,31289,261],{"class":260},[220,31291,9763],{"class":264},[220,31293,268],{"class":260},[220,31295,9768],{"class":230},[220,31297,31298],{"class":222,"line":179},[220,31299,647],{"emptyLinePlaceholder":194},[220,31301,31302,31304,31306,31308,31310,31312],{"class":222,"line":389},[220,31303,1735],{"class":260},[220,31305,1738],{"class":420},[220,31307,1741],{"class":260},[220,31309,1744],{"class":260},[220,31311,1747],{"class":226},[220,31313,1750],{"class":264},[220,31315,31316],{"class":222,"line":399},[220,31317,1765],{"class":264},[220,31319,31320,31322,31324,31326,31328],{"class":222,"line":644},[220,31321,1770],{"class":264},[220,31323,11249],{"class":230},[220,31325,30484],{"class":264},[220,31327,31184],{"class":420},[220,31329,1782],{"class":264},[220,31331,31332],{"class":222,"line":650},[220,31333,1787],{"class":264},[220,31335,31336],{"class":222,"line":656},[220,31337,1792],{"class":264},[1504,31339,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":31341},[31342,31343],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":10871,"description":31102},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":31351,"title":31352,"body":31353,"category":31677,"componentType":24147,"description":31360,"extension":191,"meta":31678,"navigation":194,"path":31679,"requiresChild":194,"seo":31680,"stem":31681,"__hash__":31682},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":31354,"toc":31673},[31355,31358,31361,31363,31365,31368,31370,31671],[11,31356,31352],{"id":31357},"barshift",[15,31359,31360],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[30192,31362],{"component":31352},[23,31364,30196],{"id":24798},[30198,31366],{":props":31367},"[{\"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,31369,30204],{"id":30203},[246,31371,31372,31428,31487,31543,31601],{":tabs":1557},[212,31373,31375],{"className":334,"code":31374,"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,31376,31377,31385,31392,31400,31404,31412,31420],{"__ignoreMap":178},[220,31378,31379,31381,31383],{"class":222,"line":223},[220,31380,343],{"class":264},[220,31382,347],{"class":346},[220,31384,359],{"class":264},[220,31386,31387,31389],{"class":222,"line":179},[220,31388,364],{"class":264},[220,31390,31391],{"class":346},"BarShift\n",[220,31393,31394,31396,31398],{"class":222,"line":389},[220,31395,18633],{"class":226},[220,31397,353],{"class":264},[220,31399,16369],{"class":230},[220,31401,31402],{"class":222,"line":399},[220,31403,30240],{"class":264},[220,31405,31406,31408,31410],{"class":222,"line":644},[220,31407,2550],{"class":264},[220,31409,2553],{"class":346},[220,31411,386],{"class":264},[220,31413,31414,31416,31418],{"class":222,"line":650},[220,31415,2567],{"class":264},[220,31417,31352],{"class":346},[220,31419,359],{"class":264},[220,31421,31422,31424,31426],{"class":222,"line":656},[220,31423,402],{"class":264},[220,31425,347],{"class":346},[220,31427,359],{"class":264},[212,31429,31431],{"className":409,"code":31430,"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,31432,31433,31441,31447,31459,31463,31471,31479],{"__ignoreMap":178},[220,31434,31435,31437,31439],{"class":222,"line":223},[220,31436,343],{"class":264},[220,31438,347],{"class":420},[220,31440,359],{"class":264},[220,31442,31443,31445],{"class":222,"line":179},[220,31444,364],{"class":264},[220,31446,31391],{"class":420},[220,31448,31449,31451,31453,31455,31457],{"class":222,"line":389},[220,31450,18744],{"class":226},[220,31452,353],{"class":260},[220,31454,743],{"class":264},[220,31456,16453],{"class":420},[220,31458,749],{"class":264},[220,31460,31461],{"class":222,"line":399},[220,31462,30240],{"class":264},[220,31464,31465,31467,31469],{"class":222,"line":644},[220,31466,2550],{"class":264},[220,31468,2553],{"class":420},[220,31470,386],{"class":264},[220,31472,31473,31475,31477],{"class":222,"line":650},[220,31474,2567],{"class":264},[220,31476,31352],{"class":420},[220,31478,359],{"class":264},[220,31480,31481,31483,31485],{"class":222,"line":656},[220,31482,402],{"class":264},[220,31484,347],{"class":420},[220,31486,359],{"class":264},[212,31488,31489],{"className":2844,"code":31430,"language":2846,"meta":178,"style":178},[99,31490,31491,31499,31505,31515,31519,31527,31535],{"__ignoreMap":178},[220,31492,31493,31495,31497],{"class":222,"line":223},[220,31494,343],{"class":264},[220,31496,347],{"class":420},[220,31498,359],{"class":264},[220,31500,31501,31503],{"class":222,"line":179},[220,31502,364],{"class":264},[220,31504,31391],{"class":420},[220,31506,31507,31509,31511,31513],{"class":222,"line":389},[220,31508,18744],{"class":226},[220,31510,28138],{"class":264},[220,31512,16453],{"class":420},[220,31514,749],{"class":264},[220,31516,31517],{"class":222,"line":399},[220,31518,30240],{"class":264},[220,31520,31521,31523,31525],{"class":222,"line":644},[220,31522,2550],{"class":264},[220,31524,2553],{"class":420},[220,31526,386],{"class":264},[220,31528,31529,31531,31533],{"class":222,"line":650},[220,31530,2567],{"class":264},[220,31532,31352],{"class":420},[220,31534,359],{"class":264},[220,31536,31537,31539,31541],{"class":222,"line":656},[220,31538,402],{"class":264},[220,31540,347],{"class":420},[220,31542,359],{"class":264},[212,31544,31545],{"className":468,"code":31430,"language":469,"meta":178,"style":178},[99,31546,31547,31555,31561,31573,31577,31585,31593],{"__ignoreMap":178},[220,31548,31549,31551,31553],{"class":222,"line":223},[220,31550,343],{"class":264},[220,31552,347],{"class":420},[220,31554,359],{"class":264},[220,31556,31557,31559],{"class":222,"line":179},[220,31558,364],{"class":264},[220,31560,31391],{"class":420},[220,31562,31563,31565,31567,31569,31571],{"class":222,"line":389},[220,31564,18744],{"class":226},[220,31566,353],{"class":260},[220,31568,743],{"class":264},[220,31570,16453],{"class":420},[220,31572,749],{"class":264},[220,31574,31575],{"class":222,"line":399},[220,31576,30240],{"class":264},[220,31578,31579,31581,31583],{"class":222,"line":644},[220,31580,2550],{"class":264},[220,31582,2553],{"class":420},[220,31584,386],{"class":264},[220,31586,31587,31589,31591],{"class":222,"line":650},[220,31588,2567],{"class":264},[220,31590,31352],{"class":420},[220,31592,359],{"class":264},[220,31594,31595,31597,31599],{"class":222,"line":656},[220,31596,402],{"class":264},[220,31598,347],{"class":420},[220,31600,359],{"class":264},[212,31602,31604],{"className":251,"code":31603,"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,31605,31606,31616,31620,31634,31638,31651,31659,31663,31667],{"__ignoreMap":178},[220,31607,31608,31610,31612,31614],{"class":222,"line":223},[220,31609,261],{"class":260},[220,31611,9763],{"class":264},[220,31613,268],{"class":260},[220,31615,9768],{"class":230},[220,31617,31618],{"class":222,"line":179},[220,31619,647],{"emptyLinePlaceholder":194},[220,31621,31622,31624,31626,31628,31630,31632],{"class":222,"line":389},[220,31623,1735],{"class":260},[220,31625,1738],{"class":420},[220,31627,1741],{"class":260},[220,31629,1744],{"class":260},[220,31631,1747],{"class":226},[220,31633,1750],{"class":264},[220,31635,31636],{"class":222,"line":399},[220,31637,1765],{"class":264},[220,31639,31640,31642,31645,31647,31649],{"class":222,"line":644},[220,31641,1770],{"class":264},[220,31643,31644],{"class":230},"'BarShift'",[220,31646,30484],{"class":264},[220,31648,16453],{"class":420},[220,31650,5792],{"class":264},[220,31652,31653,31655,31657],{"class":222,"line":650},[220,31654,5260],{"class":264},[220,31656,3206],{"class":230},[220,31658,2465],{"class":264},[220,31660,31661],{"class":222,"line":656},[220,31662,5277],{"class":264},[220,31664,31665],{"class":222,"line":673},[220,31666,1787],{"class":264},[220,31668,31669],{"class":222,"line":682},[220,31670,1792],{"class":264},[1504,31672,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":31674},[31675,31676],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":31352,"description":31360},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":31684,"title":31685,"body":31686,"category":31344,"componentType":24141,"description":31693,"extension":191,"meta":31878,"navigation":194,"path":31879,"requiresChild":30811,"seo":31880,"stem":31881,"__hash__":31882},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":31687,"toc":31874},[31688,31691,31694,31696,31698,31701,31703,31872],[11,31689,31685],{"id":31690},"beam",[15,31692,31693],{},"A beam of light from one point to another.",[30192,31695],{"component":31685},[23,31697,30196],{"id":24798},[30198,31699],{":props":31700},"[{\"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,31702,30204],{"id":30203},[246,31704,31705,31734,31762,31790,31818],{":tabs":1557},[212,31706,31708],{"className":334,"code":31707,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,31709,31710,31718,31726],{"__ignoreMap":178},[220,31711,31712,31714,31716],{"class":222,"line":223},[220,31713,343],{"class":264},[220,31715,347],{"class":346},[220,31717,359],{"class":264},[220,31719,31720,31722,31724],{"class":222,"line":179},[220,31721,364],{"class":264},[220,31723,31685],{"class":346},[220,31725,386],{"class":264},[220,31727,31728,31730,31732],{"class":222,"line":389},[220,31729,402],{"class":264},[220,31731,347],{"class":346},[220,31733,359],{"class":264},[212,31735,31736],{"className":409,"code":31707,"language":411,"meta":178,"style":178},[99,31737,31738,31746,31754],{"__ignoreMap":178},[220,31739,31740,31742,31744],{"class":222,"line":223},[220,31741,343],{"class":264},[220,31743,347],{"class":420},[220,31745,359],{"class":264},[220,31747,31748,31750,31752],{"class":222,"line":179},[220,31749,364],{"class":264},[220,31751,31685],{"class":420},[220,31753,386],{"class":264},[220,31755,31756,31758,31760],{"class":222,"line":389},[220,31757,402],{"class":264},[220,31759,347],{"class":420},[220,31761,359],{"class":264},[212,31763,31764],{"className":2844,"code":31707,"language":2846,"meta":178,"style":178},[99,31765,31766,31774,31782],{"__ignoreMap":178},[220,31767,31768,31770,31772],{"class":222,"line":223},[220,31769,343],{"class":264},[220,31771,347],{"class":420},[220,31773,359],{"class":264},[220,31775,31776,31778,31780],{"class":222,"line":179},[220,31777,364],{"class":264},[220,31779,31685],{"class":420},[220,31781,386],{"class":264},[220,31783,31784,31786,31788],{"class":222,"line":389},[220,31785,402],{"class":264},[220,31787,347],{"class":420},[220,31789,359],{"class":264},[212,31791,31792],{"className":468,"code":31707,"language":469,"meta":178,"style":178},[99,31793,31794,31802,31810],{"__ignoreMap":178},[220,31795,31796,31798,31800],{"class":222,"line":223},[220,31797,343],{"class":264},[220,31799,347],{"class":420},[220,31801,359],{"class":264},[220,31803,31804,31806,31808],{"class":222,"line":179},[220,31805,364],{"class":264},[220,31807,31685],{"class":420},[220,31809,386],{"class":264},[220,31811,31812,31814,31816],{"class":222,"line":389},[220,31813,402],{"class":264},[220,31815,347],{"class":420},[220,31817,359],{"class":264},[212,31819,31821],{"className":251,"code":31820,"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,31822,31823,31833,31837,31851,31855,31864,31868],{"__ignoreMap":178},[220,31824,31825,31827,31829,31831],{"class":222,"line":223},[220,31826,261],{"class":260},[220,31828,9763],{"class":264},[220,31830,268],{"class":260},[220,31832,9768],{"class":230},[220,31834,31835],{"class":222,"line":179},[220,31836,647],{"emptyLinePlaceholder":194},[220,31838,31839,31841,31843,31845,31847,31849],{"class":222,"line":389},[220,31840,1735],{"class":260},[220,31842,1738],{"class":420},[220,31844,1741],{"class":260},[220,31846,1744],{"class":260},[220,31848,1747],{"class":226},[220,31850,1750],{"class":264},[220,31852,31853],{"class":222,"line":399},[220,31854,1765],{"class":264},[220,31856,31857,31859,31862],{"class":222,"line":644},[220,31858,1770],{"class":264},[220,31860,31861],{"class":230},"'Beam'",[220,31863,2465],{"class":264},[220,31865,31866],{"class":222,"line":650},[220,31867,1787],{"class":264},[220,31869,31870],{"class":222,"line":656},[220,31871,1792],{"class":264},[1504,31873,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":31875},[31876,31877],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":31685,"description":31693},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":31884,"title":31885,"body":31886,"category":31344,"componentType":24141,"description":31893,"extension":191,"meta":32078,"navigation":194,"path":32079,"requiresChild":30811,"seo":32080,"stem":32081,"__hash__":32082},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":31887,"toc":32074},[31888,31891,31894,31896,31898,31901,31903,32072],[11,31889,31885],{"id":31890},"blob",[15,31892,31893],{},"Organic animated blob with 3D lighting and gradients",[30192,31895],{"component":31885},[23,31897,30196],{"id":24798},[30198,31899],{":props":31900},"[{\"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,31902,30204],{"id":30203},[246,31904,31905,31934,31962,31990,32018],{":tabs":1557},[212,31906,31908],{"className":334,"code":31907,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,31909,31910,31918,31926],{"__ignoreMap":178},[220,31911,31912,31914,31916],{"class":222,"line":223},[220,31913,343],{"class":264},[220,31915,347],{"class":346},[220,31917,359],{"class":264},[220,31919,31920,31922,31924],{"class":222,"line":179},[220,31921,364],{"class":264},[220,31923,31885],{"class":346},[220,31925,386],{"class":264},[220,31927,31928,31930,31932],{"class":222,"line":389},[220,31929,402],{"class":264},[220,31931,347],{"class":346},[220,31933,359],{"class":264},[212,31935,31936],{"className":409,"code":31907,"language":411,"meta":178,"style":178},[99,31937,31938,31946,31954],{"__ignoreMap":178},[220,31939,31940,31942,31944],{"class":222,"line":223},[220,31941,343],{"class":264},[220,31943,347],{"class":420},[220,31945,359],{"class":264},[220,31947,31948,31950,31952],{"class":222,"line":179},[220,31949,364],{"class":264},[220,31951,31885],{"class":420},[220,31953,386],{"class":264},[220,31955,31956,31958,31960],{"class":222,"line":389},[220,31957,402],{"class":264},[220,31959,347],{"class":420},[220,31961,359],{"class":264},[212,31963,31964],{"className":2844,"code":31907,"language":2846,"meta":178,"style":178},[99,31965,31966,31974,31982],{"__ignoreMap":178},[220,31967,31968,31970,31972],{"class":222,"line":223},[220,31969,343],{"class":264},[220,31971,347],{"class":420},[220,31973,359],{"class":264},[220,31975,31976,31978,31980],{"class":222,"line":179},[220,31977,364],{"class":264},[220,31979,31885],{"class":420},[220,31981,386],{"class":264},[220,31983,31984,31986,31988],{"class":222,"line":389},[220,31985,402],{"class":264},[220,31987,347],{"class":420},[220,31989,359],{"class":264},[212,31991,31992],{"className":468,"code":31907,"language":469,"meta":178,"style":178},[99,31993,31994,32002,32010],{"__ignoreMap":178},[220,31995,31996,31998,32000],{"class":222,"line":223},[220,31997,343],{"class":264},[220,31999,347],{"class":420},[220,32001,359],{"class":264},[220,32003,32004,32006,32008],{"class":222,"line":179},[220,32005,364],{"class":264},[220,32007,31885],{"class":420},[220,32009,386],{"class":264},[220,32011,32012,32014,32016],{"class":222,"line":389},[220,32013,402],{"class":264},[220,32015,347],{"class":420},[220,32017,359],{"class":264},[212,32019,32021],{"className":251,"code":32020,"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,32022,32023,32033,32037,32051,32055,32064,32068],{"__ignoreMap":178},[220,32024,32025,32027,32029,32031],{"class":222,"line":223},[220,32026,261],{"class":260},[220,32028,9763],{"class":264},[220,32030,268],{"class":260},[220,32032,9768],{"class":230},[220,32034,32035],{"class":222,"line":179},[220,32036,647],{"emptyLinePlaceholder":194},[220,32038,32039,32041,32043,32045,32047,32049],{"class":222,"line":389},[220,32040,1735],{"class":260},[220,32042,1738],{"class":420},[220,32044,1741],{"class":260},[220,32046,1744],{"class":260},[220,32048,1747],{"class":226},[220,32050,1750],{"class":264},[220,32052,32053],{"class":222,"line":399},[220,32054,1765],{"class":264},[220,32056,32057,32059,32062],{"class":222,"line":644},[220,32058,1770],{"class":264},[220,32060,32061],{"class":230},"'Blob'",[220,32063,2465],{"class":264},[220,32065,32066],{"class":222,"line":650},[220,32067,1787],{"class":264},[220,32069,32070],{"class":222,"line":656},[220,32071,1792],{"class":264},[1504,32073,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":32075},[32076,32077],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":31885,"description":31893},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":32084,"title":32085,"body":32086,"category":31344,"componentType":24141,"description":32093,"extension":191,"meta":32278,"navigation":194,"path":32279,"requiresChild":30811,"seo":32280,"stem":32281,"__hash__":32282},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":32087,"toc":32274},[32088,32091,32094,32096,32098,32101,32103,32272],[11,32089,32085],{"id":32090},"blocknoise",[15,32092,32093],{},"Blocky value noise with soft cells that morph over time",[30192,32095],{"component":32085},[23,32097,30196],{"id":24798},[30198,32099],{":props":32100},"[{\"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,32102,30204],{"id":30203},[246,32104,32105,32134,32162,32190,32218],{":tabs":1557},[212,32106,32108],{"className":334,"code":32107,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,32109,32110,32118,32126],{"__ignoreMap":178},[220,32111,32112,32114,32116],{"class":222,"line":223},[220,32113,343],{"class":264},[220,32115,347],{"class":346},[220,32117,359],{"class":264},[220,32119,32120,32122,32124],{"class":222,"line":179},[220,32121,364],{"class":264},[220,32123,32085],{"class":346},[220,32125,386],{"class":264},[220,32127,32128,32130,32132],{"class":222,"line":389},[220,32129,402],{"class":264},[220,32131,347],{"class":346},[220,32133,359],{"class":264},[212,32135,32136],{"className":409,"code":32107,"language":411,"meta":178,"style":178},[99,32137,32138,32146,32154],{"__ignoreMap":178},[220,32139,32140,32142,32144],{"class":222,"line":223},[220,32141,343],{"class":264},[220,32143,347],{"class":420},[220,32145,359],{"class":264},[220,32147,32148,32150,32152],{"class":222,"line":179},[220,32149,364],{"class":264},[220,32151,32085],{"class":420},[220,32153,386],{"class":264},[220,32155,32156,32158,32160],{"class":222,"line":389},[220,32157,402],{"class":264},[220,32159,347],{"class":420},[220,32161,359],{"class":264},[212,32163,32164],{"className":2844,"code":32107,"language":2846,"meta":178,"style":178},[99,32165,32166,32174,32182],{"__ignoreMap":178},[220,32167,32168,32170,32172],{"class":222,"line":223},[220,32169,343],{"class":264},[220,32171,347],{"class":420},[220,32173,359],{"class":264},[220,32175,32176,32178,32180],{"class":222,"line":179},[220,32177,364],{"class":264},[220,32179,32085],{"class":420},[220,32181,386],{"class":264},[220,32183,32184,32186,32188],{"class":222,"line":389},[220,32185,402],{"class":264},[220,32187,347],{"class":420},[220,32189,359],{"class":264},[212,32191,32192],{"className":468,"code":32107,"language":469,"meta":178,"style":178},[99,32193,32194,32202,32210],{"__ignoreMap":178},[220,32195,32196,32198,32200],{"class":222,"line":223},[220,32197,343],{"class":264},[220,32199,347],{"class":420},[220,32201,359],{"class":264},[220,32203,32204,32206,32208],{"class":222,"line":179},[220,32205,364],{"class":264},[220,32207,32085],{"class":420},[220,32209,386],{"class":264},[220,32211,32212,32214,32216],{"class":222,"line":389},[220,32213,402],{"class":264},[220,32215,347],{"class":420},[220,32217,359],{"class":264},[212,32219,32221],{"className":251,"code":32220,"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,32222,32223,32233,32237,32251,32255,32264,32268],{"__ignoreMap":178},[220,32224,32225,32227,32229,32231],{"class":222,"line":223},[220,32226,261],{"class":260},[220,32228,9763],{"class":264},[220,32230,268],{"class":260},[220,32232,9768],{"class":230},[220,32234,32235],{"class":222,"line":179},[220,32236,647],{"emptyLinePlaceholder":194},[220,32238,32239,32241,32243,32245,32247,32249],{"class":222,"line":389},[220,32240,1735],{"class":260},[220,32242,1738],{"class":420},[220,32244,1741],{"class":260},[220,32246,1744],{"class":260},[220,32248,1747],{"class":226},[220,32250,1750],{"class":264},[220,32252,32253],{"class":222,"line":399},[220,32254,1765],{"class":264},[220,32256,32257,32259,32262],{"class":222,"line":644},[220,32258,1770],{"class":264},[220,32260,32261],{"class":230},"'BlockNoise'",[220,32263,2465],{"class":264},[220,32265,32266],{"class":222,"line":650},[220,32267,1787],{"class":264},[220,32269,32270],{"class":222,"line":656},[220,32271,1792],{"class":264},[1504,32273,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":32275},[32276,32277],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":32085,"description":32093},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":32284,"title":32285,"body":32286,"category":31344,"componentType":24141,"description":32293,"extension":191,"meta":32478,"navigation":194,"path":32479,"requiresChild":30811,"seo":32480,"stem":32481,"__hash__":32482},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":32287,"toc":32474},[32288,32291,32294,32296,32298,32301,32303,32472],[11,32289,32285],{"id":32290},"bluenoise",[15,32292,32293],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[30192,32295],{"component":32285},[23,32297,30196],{"id":24798},[30198,32299],{":props":32300},"[{\"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,32302,30204],{"id":30203},[246,32304,32305,32334,32362,32390,32418],{":tabs":1557},[212,32306,32308],{"className":334,"code":32307,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,32309,32310,32318,32326],{"__ignoreMap":178},[220,32311,32312,32314,32316],{"class":222,"line":223},[220,32313,343],{"class":264},[220,32315,347],{"class":346},[220,32317,359],{"class":264},[220,32319,32320,32322,32324],{"class":222,"line":179},[220,32321,364],{"class":264},[220,32323,32285],{"class":346},[220,32325,386],{"class":264},[220,32327,32328,32330,32332],{"class":222,"line":389},[220,32329,402],{"class":264},[220,32331,347],{"class":346},[220,32333,359],{"class":264},[212,32335,32336],{"className":409,"code":32307,"language":411,"meta":178,"style":178},[99,32337,32338,32346,32354],{"__ignoreMap":178},[220,32339,32340,32342,32344],{"class":222,"line":223},[220,32341,343],{"class":264},[220,32343,347],{"class":420},[220,32345,359],{"class":264},[220,32347,32348,32350,32352],{"class":222,"line":179},[220,32349,364],{"class":264},[220,32351,32285],{"class":420},[220,32353,386],{"class":264},[220,32355,32356,32358,32360],{"class":222,"line":389},[220,32357,402],{"class":264},[220,32359,347],{"class":420},[220,32361,359],{"class":264},[212,32363,32364],{"className":2844,"code":32307,"language":2846,"meta":178,"style":178},[99,32365,32366,32374,32382],{"__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,32380],{"class":222,"line":179},[220,32377,364],{"class":264},[220,32379,32285],{"class":420},[220,32381,386],{"class":264},[220,32383,32384,32386,32388],{"class":222,"line":389},[220,32385,402],{"class":264},[220,32387,347],{"class":420},[220,32389,359],{"class":264},[212,32391,32392],{"className":468,"code":32307,"language":469,"meta":178,"style":178},[99,32393,32394,32402,32410],{"__ignoreMap":178},[220,32395,32396,32398,32400],{"class":222,"line":223},[220,32397,343],{"class":264},[220,32399,347],{"class":420},[220,32401,359],{"class":264},[220,32403,32404,32406,32408],{"class":222,"line":179},[220,32405,364],{"class":264},[220,32407,32285],{"class":420},[220,32409,386],{"class":264},[220,32411,32412,32414,32416],{"class":222,"line":389},[220,32413,402],{"class":264},[220,32415,347],{"class":420},[220,32417,359],{"class":264},[212,32419,32421],{"className":251,"code":32420,"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,32422,32423,32433,32437,32451,32455,32464,32468],{"__ignoreMap":178},[220,32424,32425,32427,32429,32431],{"class":222,"line":223},[220,32426,261],{"class":260},[220,32428,9763],{"class":264},[220,32430,268],{"class":260},[220,32432,9768],{"class":230},[220,32434,32435],{"class":222,"line":179},[220,32436,647],{"emptyLinePlaceholder":194},[220,32438,32439,32441,32443,32445,32447,32449],{"class":222,"line":389},[220,32440,1735],{"class":260},[220,32442,1738],{"class":420},[220,32444,1741],{"class":260},[220,32446,1744],{"class":260},[220,32448,1747],{"class":226},[220,32450,1750],{"class":264},[220,32452,32453],{"class":222,"line":399},[220,32454,1765],{"class":264},[220,32456,32457,32459,32462],{"class":222,"line":644},[220,32458,1770],{"class":264},[220,32460,32461],{"class":230},"'BlueNoise'",[220,32463,2465],{"class":264},[220,32465,32466],{"class":222,"line":650},[220,32467,1787],{"class":264},[220,32469,32470],{"class":222,"line":656},[220,32471,1792],{"class":264},[1504,32473,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":32475},[32476,32477],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":32285,"description":32293},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":32484,"title":10021,"body":32485,"category":30515,"componentType":24147,"description":32492,"extension":191,"meta":32811,"navigation":194,"path":32812,"requiresChild":194,"seo":32813,"stem":32814,"__hash__":32815},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":32486,"toc":32807},[32487,32490,32493,32495,32497,32500,32502,32805],[11,32488,10021],{"id":32489},"blur",[15,32491,32492],{},"A simple Gaussian blur effect",[30192,32494],{"component":10021},[23,32496,30196],{"id":24798},[30198,32498],{":props":32499},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,32501,30204],{"id":30203},[246,32503,32504,32561,32621,32677,32735],{":tabs":1557},[212,32505,32507],{"className":334,"code":32506,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,32508,32509,32517,32524,32533,32537,32545,32553],{"__ignoreMap":178},[220,32510,32511,32513,32515],{"class":222,"line":223},[220,32512,343],{"class":264},[220,32514,347],{"class":346},[220,32516,359],{"class":264},[220,32518,32519,32521],{"class":222,"line":179},[220,32520,364],{"class":264},[220,32522,32523],{"class":346},"Blur\n",[220,32525,32526,32528,32530],{"class":222,"line":389},[220,32527,18633],{"class":226},[220,32529,353],{"class":264},[220,32531,32532],{"class":230},"\"50\"\n",[220,32534,32535],{"class":222,"line":399},[220,32536,30240],{"class":264},[220,32538,32539,32541,32543],{"class":222,"line":644},[220,32540,2550],{"class":264},[220,32542,2553],{"class":346},[220,32544,386],{"class":264},[220,32546,32547,32549,32551],{"class":222,"line":650},[220,32548,2567],{"class":264},[220,32550,10021],{"class":346},[220,32552,359],{"class":264},[220,32554,32555,32557,32559],{"class":222,"line":656},[220,32556,402],{"class":264},[220,32558,347],{"class":346},[220,32560,359],{"class":264},[212,32562,32564],{"className":409,"code":32563,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,32565,32566,32574,32580,32593,32597,32605,32613],{"__ignoreMap":178},[220,32567,32568,32570,32572],{"class":222,"line":223},[220,32569,343],{"class":264},[220,32571,347],{"class":420},[220,32573,359],{"class":264},[220,32575,32576,32578],{"class":222,"line":179},[220,32577,364],{"class":264},[220,32579,32523],{"class":420},[220,32581,32582,32584,32586,32588,32591],{"class":222,"line":389},[220,32583,18744],{"class":226},[220,32585,353],{"class":260},[220,32587,743],{"class":264},[220,32589,32590],{"class":420},"50",[220,32592,749],{"class":264},[220,32594,32595],{"class":222,"line":399},[220,32596,30240],{"class":264},[220,32598,32599,32601,32603],{"class":222,"line":644},[220,32600,2550],{"class":264},[220,32602,2553],{"class":420},[220,32604,386],{"class":264},[220,32606,32607,32609,32611],{"class":222,"line":650},[220,32608,2567],{"class":264},[220,32610,10021],{"class":420},[220,32612,359],{"class":264},[220,32614,32615,32617,32619],{"class":222,"line":656},[220,32616,402],{"class":264},[220,32618,347],{"class":420},[220,32620,359],{"class":264},[212,32622,32623],{"className":2844,"code":32563,"language":2846,"meta":178,"style":178},[99,32624,32625,32633,32639,32649,32653,32661,32669],{"__ignoreMap":178},[220,32626,32627,32629,32631],{"class":222,"line":223},[220,32628,343],{"class":264},[220,32630,347],{"class":420},[220,32632,359],{"class":264},[220,32634,32635,32637],{"class":222,"line":179},[220,32636,364],{"class":264},[220,32638,32523],{"class":420},[220,32640,32641,32643,32645,32647],{"class":222,"line":389},[220,32642,18744],{"class":226},[220,32644,28138],{"class":264},[220,32646,32590],{"class":420},[220,32648,749],{"class":264},[220,32650,32651],{"class":222,"line":399},[220,32652,30240],{"class":264},[220,32654,32655,32657,32659],{"class":222,"line":644},[220,32656,2550],{"class":264},[220,32658,2553],{"class":420},[220,32660,386],{"class":264},[220,32662,32663,32665,32667],{"class":222,"line":650},[220,32664,2567],{"class":264},[220,32666,10021],{"class":420},[220,32668,359],{"class":264},[220,32670,32671,32673,32675],{"class":222,"line":656},[220,32672,402],{"class":264},[220,32674,347],{"class":420},[220,32676,359],{"class":264},[212,32678,32679],{"className":468,"code":32563,"language":469,"meta":178,"style":178},[99,32680,32681,32689,32695,32707,32711,32719,32727],{"__ignoreMap":178},[220,32682,32683,32685,32687],{"class":222,"line":223},[220,32684,343],{"class":264},[220,32686,347],{"class":420},[220,32688,359],{"class":264},[220,32690,32691,32693],{"class":222,"line":179},[220,32692,364],{"class":264},[220,32694,32523],{"class":420},[220,32696,32697,32699,32701,32703,32705],{"class":222,"line":389},[220,32698,18744],{"class":226},[220,32700,353],{"class":260},[220,32702,743],{"class":264},[220,32704,32590],{"class":420},[220,32706,749],{"class":264},[220,32708,32709],{"class":222,"line":399},[220,32710,30240],{"class":264},[220,32712,32713,32715,32717],{"class":222,"line":644},[220,32714,2550],{"class":264},[220,32716,2553],{"class":420},[220,32718,386],{"class":264},[220,32720,32721,32723,32725],{"class":222,"line":650},[220,32722,2567],{"class":264},[220,32724,10021],{"class":420},[220,32726,359],{"class":264},[220,32728,32729,32731,32733],{"class":222,"line":656},[220,32730,402],{"class":264},[220,32732,347],{"class":420},[220,32734,359],{"class":264},[212,32736,32738],{"className":251,"code":32737,"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,32739,32740,32750,32754,32768,32772,32785,32793,32797,32801],{"__ignoreMap":178},[220,32741,32742,32744,32746,32748],{"class":222,"line":223},[220,32743,261],{"class":260},[220,32745,9763],{"class":264},[220,32747,268],{"class":260},[220,32749,9768],{"class":230},[220,32751,32752],{"class":222,"line":179},[220,32753,647],{"emptyLinePlaceholder":194},[220,32755,32756,32758,32760,32762,32764,32766],{"class":222,"line":389},[220,32757,1735],{"class":260},[220,32759,1738],{"class":420},[220,32761,1741],{"class":260},[220,32763,1744],{"class":260},[220,32765,1747],{"class":226},[220,32767,1750],{"class":264},[220,32769,32770],{"class":222,"line":399},[220,32771,1765],{"class":264},[220,32773,32774,32776,32779,32781,32783],{"class":222,"line":644},[220,32775,1770],{"class":264},[220,32777,32778],{"class":230},"'Blur'",[220,32780,30484],{"class":264},[220,32782,32590],{"class":420},[220,32784,5792],{"class":264},[220,32786,32787,32789,32791],{"class":222,"line":650},[220,32788,5260],{"class":264},[220,32790,3206],{"class":230},[220,32792,2465],{"class":264},[220,32794,32795],{"class":222,"line":656},[220,32796,5277],{"class":264},[220,32798,32799],{"class":222,"line":673},[220,32800,1787],{"class":264},[220,32802,32803],{"class":222,"line":682},[220,32804,1792],{"class":264},[1504,32806,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32808},[32809,32810],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":10021,"description":32492},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":32817,"title":32818,"body":32819,"category":31344,"componentType":24141,"description":32826,"extension":191,"meta":33011,"navigation":194,"path":33012,"requiresChild":30811,"seo":33013,"stem":33014,"__hash__":33015},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":32820,"toc":33007},[32821,32824,32827,32829,32831,32834,32836,33005],[11,32822,32818],{"id":32823},"brickpattern",[15,32825,32826],{},"Classic brick wall pattern with alternating rows and mortar gaps",[30192,32828],{"component":32818},[23,32830,30196],{"id":24798},[30198,32832],{":props":32833},"[{\"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,32835,30204],{"id":30203},[246,32837,32838,32867,32895,32923,32951],{":tabs":1557},[212,32839,32841],{"className":334,"code":32840,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,32842,32843,32851,32859],{"__ignoreMap":178},[220,32844,32845,32847,32849],{"class":222,"line":223},[220,32846,343],{"class":264},[220,32848,347],{"class":346},[220,32850,359],{"class":264},[220,32852,32853,32855,32857],{"class":222,"line":179},[220,32854,364],{"class":264},[220,32856,32818],{"class":346},[220,32858,386],{"class":264},[220,32860,32861,32863,32865],{"class":222,"line":389},[220,32862,402],{"class":264},[220,32864,347],{"class":346},[220,32866,359],{"class":264},[212,32868,32869],{"className":409,"code":32840,"language":411,"meta":178,"style":178},[99,32870,32871,32879,32887],{"__ignoreMap":178},[220,32872,32873,32875,32877],{"class":222,"line":223},[220,32874,343],{"class":264},[220,32876,347],{"class":420},[220,32878,359],{"class":264},[220,32880,32881,32883,32885],{"class":222,"line":179},[220,32882,364],{"class":264},[220,32884,32818],{"class":420},[220,32886,386],{"class":264},[220,32888,32889,32891,32893],{"class":222,"line":389},[220,32890,402],{"class":264},[220,32892,347],{"class":420},[220,32894,359],{"class":264},[212,32896,32897],{"className":2844,"code":32840,"language":2846,"meta":178,"style":178},[99,32898,32899,32907,32915],{"__ignoreMap":178},[220,32900,32901,32903,32905],{"class":222,"line":223},[220,32902,343],{"class":264},[220,32904,347],{"class":420},[220,32906,359],{"class":264},[220,32908,32909,32911,32913],{"class":222,"line":179},[220,32910,364],{"class":264},[220,32912,32818],{"class":420},[220,32914,386],{"class":264},[220,32916,32917,32919,32921],{"class":222,"line":389},[220,32918,402],{"class":264},[220,32920,347],{"class":420},[220,32922,359],{"class":264},[212,32924,32925],{"className":468,"code":32840,"language":469,"meta":178,"style":178},[99,32926,32927,32935,32943],{"__ignoreMap":178},[220,32928,32929,32931,32933],{"class":222,"line":223},[220,32930,343],{"class":264},[220,32932,347],{"class":420},[220,32934,359],{"class":264},[220,32936,32937,32939,32941],{"class":222,"line":179},[220,32938,364],{"class":264},[220,32940,32818],{"class":420},[220,32942,386],{"class":264},[220,32944,32945,32947,32949],{"class":222,"line":389},[220,32946,402],{"class":264},[220,32948,347],{"class":420},[220,32950,359],{"class":264},[212,32952,32954],{"className":251,"code":32953,"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,32955,32956,32966,32970,32984,32988,32997,33001],{"__ignoreMap":178},[220,32957,32958,32960,32962,32964],{"class":222,"line":223},[220,32959,261],{"class":260},[220,32961,9763],{"class":264},[220,32963,268],{"class":260},[220,32965,9768],{"class":230},[220,32967,32968],{"class":222,"line":179},[220,32969,647],{"emptyLinePlaceholder":194},[220,32971,32972,32974,32976,32978,32980,32982],{"class":222,"line":389},[220,32973,1735],{"class":260},[220,32975,1738],{"class":420},[220,32977,1741],{"class":260},[220,32979,1744],{"class":260},[220,32981,1747],{"class":226},[220,32983,1750],{"class":264},[220,32985,32986],{"class":222,"line":399},[220,32987,1765],{"class":264},[220,32989,32990,32992,32995],{"class":222,"line":644},[220,32991,1770],{"class":264},[220,32993,32994],{"class":230},"'BrickPattern'",[220,32996,2465],{"class":264},[220,32998,32999],{"class":222,"line":650},[220,33000,1787],{"class":264},[220,33002,33003],{"class":222,"line":656},[220,33004,1792],{"class":264},[1504,33006,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":33008},[33009,33010],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":32818,"description":32826},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":33017,"title":33018,"body":33019,"category":33287,"componentType":24147,"description":33026,"extension":191,"meta":33288,"navigation":194,"path":33289,"requiresChild":194,"seo":33290,"stem":33291,"__hash__":33292},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":33020,"toc":33283},[33021,33024,33027,33029,33031,33034,33036,33281],[11,33022,33018],{"id":33023},"brightnesscontrast",[15,33025,33026],{},"Adjust brightness and contrast of the image",[30192,33028],{"component":33018},[23,33030,30196],{"id":24798},[30198,33032],{":props":33033},"[{\"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,33035,30204],{"id":30203},[246,33037,33038,33083,33127,33171,33215],{":tabs":1557},[212,33039,33041],{"className":334,"code":33040,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,33042,33043,33051,33059,33067,33075],{"__ignoreMap":178},[220,33044,33045,33047,33049],{"class":222,"line":223},[220,33046,343],{"class":264},[220,33048,347],{"class":346},[220,33050,359],{"class":264},[220,33052,33053,33055,33057],{"class":222,"line":179},[220,33054,364],{"class":264},[220,33056,33018],{"class":346},[220,33058,359],{"class":264},[220,33060,33061,33063,33065],{"class":222,"line":389},[220,33062,2550],{"class":264},[220,33064,2553],{"class":346},[220,33066,386],{"class":264},[220,33068,33069,33071,33073],{"class":222,"line":399},[220,33070,2567],{"class":264},[220,33072,33018],{"class":346},[220,33074,359],{"class":264},[220,33076,33077,33079,33081],{"class":222,"line":644},[220,33078,402],{"class":264},[220,33080,347],{"class":346},[220,33082,359],{"class":264},[212,33084,33085],{"className":409,"code":33040,"language":411,"meta":178,"style":178},[99,33086,33087,33095,33103,33111,33119],{"__ignoreMap":178},[220,33088,33089,33091,33093],{"class":222,"line":223},[220,33090,343],{"class":264},[220,33092,347],{"class":420},[220,33094,359],{"class":264},[220,33096,33097,33099,33101],{"class":222,"line":179},[220,33098,364],{"class":264},[220,33100,33018],{"class":420},[220,33102,359],{"class":264},[220,33104,33105,33107,33109],{"class":222,"line":389},[220,33106,2550],{"class":264},[220,33108,2553],{"class":420},[220,33110,386],{"class":264},[220,33112,33113,33115,33117],{"class":222,"line":399},[220,33114,2567],{"class":264},[220,33116,33018],{"class":420},[220,33118,359],{"class":264},[220,33120,33121,33123,33125],{"class":222,"line":644},[220,33122,402],{"class":264},[220,33124,347],{"class":420},[220,33126,359],{"class":264},[212,33128,33129],{"className":2844,"code":33040,"language":2846,"meta":178,"style":178},[99,33130,33131,33139,33147,33155,33163],{"__ignoreMap":178},[220,33132,33133,33135,33137],{"class":222,"line":223},[220,33134,343],{"class":264},[220,33136,347],{"class":420},[220,33138,359],{"class":264},[220,33140,33141,33143,33145],{"class":222,"line":179},[220,33142,364],{"class":264},[220,33144,33018],{"class":420},[220,33146,359],{"class":264},[220,33148,33149,33151,33153],{"class":222,"line":389},[220,33150,2550],{"class":264},[220,33152,2553],{"class":420},[220,33154,386],{"class":264},[220,33156,33157,33159,33161],{"class":222,"line":399},[220,33158,2567],{"class":264},[220,33160,33018],{"class":420},[220,33162,359],{"class":264},[220,33164,33165,33167,33169],{"class":222,"line":644},[220,33166,402],{"class":264},[220,33168,347],{"class":420},[220,33170,359],{"class":264},[212,33172,33173],{"className":468,"code":33040,"language":469,"meta":178,"style":178},[99,33174,33175,33183,33191,33199,33207],{"__ignoreMap":178},[220,33176,33177,33179,33181],{"class":222,"line":223},[220,33178,343],{"class":264},[220,33180,347],{"class":420},[220,33182,359],{"class":264},[220,33184,33185,33187,33189],{"class":222,"line":179},[220,33186,364],{"class":264},[220,33188,33018],{"class":420},[220,33190,359],{"class":264},[220,33192,33193,33195,33197],{"class":222,"line":389},[220,33194,2550],{"class":264},[220,33196,2553],{"class":420},[220,33198,386],{"class":264},[220,33200,33201,33203,33205],{"class":222,"line":399},[220,33202,2567],{"class":264},[220,33204,33018],{"class":420},[220,33206,359],{"class":264},[220,33208,33209,33211,33213],{"class":222,"line":644},[220,33210,402],{"class":264},[220,33212,347],{"class":420},[220,33214,359],{"class":264},[212,33216,33218],{"className":251,"code":33217,"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,33219,33220,33230,33234,33248,33252,33261,33269,33273,33277],{"__ignoreMap":178},[220,33221,33222,33224,33226,33228],{"class":222,"line":223},[220,33223,261],{"class":260},[220,33225,9763],{"class":264},[220,33227,268],{"class":260},[220,33229,9768],{"class":230},[220,33231,33232],{"class":222,"line":179},[220,33233,647],{"emptyLinePlaceholder":194},[220,33235,33236,33238,33240,33242,33244,33246],{"class":222,"line":389},[220,33237,1735],{"class":260},[220,33239,1738],{"class":420},[220,33241,1741],{"class":260},[220,33243,1744],{"class":260},[220,33245,1747],{"class":226},[220,33247,1750],{"class":264},[220,33249,33250],{"class":222,"line":399},[220,33251,1765],{"class":264},[220,33253,33254,33256,33259],{"class":222,"line":644},[220,33255,1770],{"class":264},[220,33257,33258],{"class":230},"'BrightnessContrast'",[220,33260,5255],{"class":264},[220,33262,33263,33265,33267],{"class":222,"line":650},[220,33264,5260],{"class":264},[220,33266,3206],{"class":230},[220,33268,2465],{"class":264},[220,33270,33271],{"class":222,"line":656},[220,33272,5277],{"class":264},[220,33274,33275],{"class":222,"line":673},[220,33276,1787],{"class":264},[220,33278,33279],{"class":222,"line":682},[220,33280,1792],{"class":264},[1504,33282,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":33284},[33285,33286],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":33018,"description":33026},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":33294,"title":33295,"body":33296,"category":33488,"componentType":24141,"description":33303,"extension":191,"meta":33489,"navigation":194,"path":33490,"requiresChild":30811,"seo":33491,"stem":33492,"__hash__":33493},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":33297,"toc":33484},[33298,33301,33304,33306,33308,33311,33313,33482],[11,33299,33295],{"id":33300},"brushedmetal",[15,33302,33303],{},"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",[30192,33305],{"component":33295},[23,33307,30196],{"id":24798},[30198,33309],{":props":33310},"[{\"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,33312,30204],{"id":30203},[246,33314,33315,33344,33372,33400,33428],{":tabs":1557},[212,33316,33318],{"className":334,"code":33317,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,33319,33320,33328,33336],{"__ignoreMap":178},[220,33321,33322,33324,33326],{"class":222,"line":223},[220,33323,343],{"class":264},[220,33325,347],{"class":346},[220,33327,359],{"class":264},[220,33329,33330,33332,33334],{"class":222,"line":179},[220,33331,364],{"class":264},[220,33333,33295],{"class":346},[220,33335,386],{"class":264},[220,33337,33338,33340,33342],{"class":222,"line":389},[220,33339,402],{"class":264},[220,33341,347],{"class":346},[220,33343,359],{"class":264},[212,33345,33346],{"className":409,"code":33317,"language":411,"meta":178,"style":178},[99,33347,33348,33356,33364],{"__ignoreMap":178},[220,33349,33350,33352,33354],{"class":222,"line":223},[220,33351,343],{"class":264},[220,33353,347],{"class":420},[220,33355,359],{"class":264},[220,33357,33358,33360,33362],{"class":222,"line":179},[220,33359,364],{"class":264},[220,33361,33295],{"class":420},[220,33363,386],{"class":264},[220,33365,33366,33368,33370],{"class":222,"line":389},[220,33367,402],{"class":264},[220,33369,347],{"class":420},[220,33371,359],{"class":264},[212,33373,33374],{"className":2844,"code":33317,"language":2846,"meta":178,"style":178},[99,33375,33376,33384,33392],{"__ignoreMap":178},[220,33377,33378,33380,33382],{"class":222,"line":223},[220,33379,343],{"class":264},[220,33381,347],{"class":420},[220,33383,359],{"class":264},[220,33385,33386,33388,33390],{"class":222,"line":179},[220,33387,364],{"class":264},[220,33389,33295],{"class":420},[220,33391,386],{"class":264},[220,33393,33394,33396,33398],{"class":222,"line":389},[220,33395,402],{"class":264},[220,33397,347],{"class":420},[220,33399,359],{"class":264},[212,33401,33402],{"className":468,"code":33317,"language":469,"meta":178,"style":178},[99,33403,33404,33412,33420],{"__ignoreMap":178},[220,33405,33406,33408,33410],{"class":222,"line":223},[220,33407,343],{"class":264},[220,33409,347],{"class":420},[220,33411,359],{"class":264},[220,33413,33414,33416,33418],{"class":222,"line":179},[220,33415,364],{"class":264},[220,33417,33295],{"class":420},[220,33419,386],{"class":264},[220,33421,33422,33424,33426],{"class":222,"line":389},[220,33423,402],{"class":264},[220,33425,347],{"class":420},[220,33427,359],{"class":264},[212,33429,33431],{"className":251,"code":33430,"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,33432,33433,33443,33447,33461,33465,33474,33478],{"__ignoreMap":178},[220,33434,33435,33437,33439,33441],{"class":222,"line":223},[220,33436,261],{"class":260},[220,33438,9763],{"class":264},[220,33440,268],{"class":260},[220,33442,9768],{"class":230},[220,33444,33445],{"class":222,"line":179},[220,33446,647],{"emptyLinePlaceholder":194},[220,33448,33449,33451,33453,33455,33457,33459],{"class":222,"line":389},[220,33450,1735],{"class":260},[220,33452,1738],{"class":420},[220,33454,1741],{"class":260},[220,33456,1744],{"class":260},[220,33458,1747],{"class":226},[220,33460,1750],{"class":264},[220,33462,33463],{"class":222,"line":399},[220,33464,1765],{"class":264},[220,33466,33467,33469,33472],{"class":222,"line":644},[220,33468,1770],{"class":264},[220,33470,33471],{"class":230},"'BrushedMetal'",[220,33473,2465],{"class":264},[220,33475,33476],{"class":222,"line":650},[220,33477,1787],{"class":264},[220,33479,33480],{"class":222,"line":656},[220,33481,1792],{"class":264},[1504,33483,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":33485},[33486,33487],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":33295,"description":33303},"docs\u002Fcomponents\u002FBrushedMetal","X6ouSbZ77zKffUpJ7quDAdvuyIaM6zcwqjSynJdeoHc",{"id":33495,"title":33496,"body":33497,"category":31677,"componentType":24147,"description":33504,"extension":191,"meta":33822,"navigation":194,"path":33823,"requiresChild":194,"seo":33824,"stem":33825,"__hash__":33826},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":33498,"toc":33818},[33499,33502,33505,33507,33509,33512,33514,33816],[11,33500,33496],{"id":33501},"bulge",[15,33503,33504],{},"Magnify or pinch content around a center point",[30192,33506],{"component":33496},[23,33508,30196],{"id":24798},[30198,33510],{":props":33511},"[{\"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,33513,30204],{"id":30203},[246,33515,33516,33573,33632,33688,33746],{":tabs":1557},[212,33517,33519],{"className":334,"code":33518,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,33520,33521,33529,33536,33545,33549,33557,33565],{"__ignoreMap":178},[220,33522,33523,33525,33527],{"class":222,"line":223},[220,33524,343],{"class":264},[220,33526,347],{"class":346},[220,33528,359],{"class":264},[220,33530,33531,33533],{"class":222,"line":179},[220,33532,364],{"class":264},[220,33534,33535],{"class":346},"Bulge\n",[220,33537,33538,33540,33542],{"class":222,"line":389},[220,33539,15666],{"class":226},[220,33541,353],{"class":264},[220,33543,33544],{"class":230},"\"1\"\n",[220,33546,33547],{"class":222,"line":399},[220,33548,30240],{"class":264},[220,33550,33551,33553,33555],{"class":222,"line":644},[220,33552,2550],{"class":264},[220,33554,2553],{"class":346},[220,33556,386],{"class":264},[220,33558,33559,33561,33563],{"class":222,"line":650},[220,33560,2567],{"class":264},[220,33562,33496],{"class":346},[220,33564,359],{"class":264},[220,33566,33567,33569,33571],{"class":222,"line":656},[220,33568,402],{"class":264},[220,33570,347],{"class":346},[220,33572,359],{"class":264},[212,33574,33576],{"className":409,"code":33575,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,33577,33578,33586,33592,33604,33608,33616,33624],{"__ignoreMap":178},[220,33579,33580,33582,33584],{"class":222,"line":223},[220,33581,343],{"class":264},[220,33583,347],{"class":420},[220,33585,359],{"class":264},[220,33587,33588,33590],{"class":222,"line":179},[220,33589,364],{"class":264},[220,33591,33535],{"class":420},[220,33593,33594,33596,33598,33600,33602],{"class":222,"line":389},[220,33595,7892],{"class":226},[220,33597,353],{"class":260},[220,33599,743],{"class":264},[220,33601,6923],{"class":420},[220,33603,749],{"class":264},[220,33605,33606],{"class":222,"line":399},[220,33607,30240],{"class":264},[220,33609,33610,33612,33614],{"class":222,"line":644},[220,33611,2550],{"class":264},[220,33613,2553],{"class":420},[220,33615,386],{"class":264},[220,33617,33618,33620,33622],{"class":222,"line":650},[220,33619,2567],{"class":264},[220,33621,33496],{"class":420},[220,33623,359],{"class":264},[220,33625,33626,33628,33630],{"class":222,"line":656},[220,33627,402],{"class":264},[220,33629,347],{"class":420},[220,33631,359],{"class":264},[212,33633,33634],{"className":2844,"code":33575,"language":2846,"meta":178,"style":178},[99,33635,33636,33644,33650,33660,33664,33672,33680],{"__ignoreMap":178},[220,33637,33638,33640,33642],{"class":222,"line":223},[220,33639,343],{"class":264},[220,33641,347],{"class":420},[220,33643,359],{"class":264},[220,33645,33646,33648],{"class":222,"line":179},[220,33647,364],{"class":264},[220,33649,33535],{"class":420},[220,33651,33652,33654,33656,33658],{"class":222,"line":389},[220,33653,7892],{"class":226},[220,33655,28138],{"class":264},[220,33657,6923],{"class":420},[220,33659,749],{"class":264},[220,33661,33662],{"class":222,"line":399},[220,33663,30240],{"class":264},[220,33665,33666,33668,33670],{"class":222,"line":644},[220,33667,2550],{"class":264},[220,33669,2553],{"class":420},[220,33671,386],{"class":264},[220,33673,33674,33676,33678],{"class":222,"line":650},[220,33675,2567],{"class":264},[220,33677,33496],{"class":420},[220,33679,359],{"class":264},[220,33681,33682,33684,33686],{"class":222,"line":656},[220,33683,402],{"class":264},[220,33685,347],{"class":420},[220,33687,359],{"class":264},[212,33689,33690],{"className":468,"code":33575,"language":469,"meta":178,"style":178},[99,33691,33692,33700,33706,33718,33722,33730,33738],{"__ignoreMap":178},[220,33693,33694,33696,33698],{"class":222,"line":223},[220,33695,343],{"class":264},[220,33697,347],{"class":420},[220,33699,359],{"class":264},[220,33701,33702,33704],{"class":222,"line":179},[220,33703,364],{"class":264},[220,33705,33535],{"class":420},[220,33707,33708,33710,33712,33714,33716],{"class":222,"line":389},[220,33709,7892],{"class":226},[220,33711,353],{"class":260},[220,33713,743],{"class":264},[220,33715,6923],{"class":420},[220,33717,749],{"class":264},[220,33719,33720],{"class":222,"line":399},[220,33721,30240],{"class":264},[220,33723,33724,33726,33728],{"class":222,"line":644},[220,33725,2550],{"class":264},[220,33727,2553],{"class":420},[220,33729,386],{"class":264},[220,33731,33732,33734,33736],{"class":222,"line":650},[220,33733,2567],{"class":264},[220,33735,33496],{"class":420},[220,33737,359],{"class":264},[220,33739,33740,33742,33744],{"class":222,"line":656},[220,33741,402],{"class":264},[220,33743,347],{"class":420},[220,33745,359],{"class":264},[212,33747,33749],{"className":251,"code":33748,"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,33750,33751,33761,33765,33779,33783,33796,33804,33808,33812],{"__ignoreMap":178},[220,33752,33753,33755,33757,33759],{"class":222,"line":223},[220,33754,261],{"class":260},[220,33756,9763],{"class":264},[220,33758,268],{"class":260},[220,33760,9768],{"class":230},[220,33762,33763],{"class":222,"line":179},[220,33764,647],{"emptyLinePlaceholder":194},[220,33766,33767,33769,33771,33773,33775,33777],{"class":222,"line":389},[220,33768,1735],{"class":260},[220,33770,1738],{"class":420},[220,33772,1741],{"class":260},[220,33774,1744],{"class":260},[220,33776,1747],{"class":226},[220,33778,1750],{"class":264},[220,33780,33781],{"class":222,"line":399},[220,33782,1765],{"class":264},[220,33784,33785,33787,33790,33792,33794],{"class":222,"line":644},[220,33786,1770],{"class":264},[220,33788,33789],{"class":230},"'Bulge'",[220,33791,5787],{"class":264},[220,33793,6923],{"class":420},[220,33795,5792],{"class":264},[220,33797,33798,33800,33802],{"class":222,"line":650},[220,33799,5260],{"class":264},[220,33801,3206],{"class":230},[220,33803,2465],{"class":264},[220,33805,33806],{"class":222,"line":656},[220,33807,5277],{"class":264},[220,33809,33810],{"class":222,"line":673},[220,33811,1787],{"class":264},[220,33813,33814],{"class":222,"line":682},[220,33815,1792],{"class":264},[1504,33817,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33819},[33820,33821],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":33496,"description":33504},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":33828,"title":33829,"body":33830,"category":31087,"componentType":24147,"description":33837,"extension":191,"meta":34098,"navigation":194,"path":34099,"requiresChild":194,"seo":34100,"stem":34101,"__hash__":34102},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":33831,"toc":34094},[33832,33835,33838,33840,33842,33845,33847,34092],[11,33833,33829],{"id":33834},"crtscreen",[15,33836,33837],{},"Retro CRT monitor simulation with scanlines",[30192,33839],{"component":33829},[23,33841,30196],{"id":24798},[30198,33843],{":props":33844},"[{\"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,33846,30204],{"id":30203},[246,33848,33849,33894,33938,33982,34026],{":tabs":1557},[212,33850,33852],{"className":334,"code":33851,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,33853,33854,33862,33870,33878,33886],{"__ignoreMap":178},[220,33855,33856,33858,33860],{"class":222,"line":223},[220,33857,343],{"class":264},[220,33859,347],{"class":346},[220,33861,359],{"class":264},[220,33863,33864,33866,33868],{"class":222,"line":179},[220,33865,364],{"class":264},[220,33867,33829],{"class":346},[220,33869,359],{"class":264},[220,33871,33872,33874,33876],{"class":222,"line":389},[220,33873,2550],{"class":264},[220,33875,2553],{"class":346},[220,33877,386],{"class":264},[220,33879,33880,33882,33884],{"class":222,"line":399},[220,33881,2567],{"class":264},[220,33883,33829],{"class":346},[220,33885,359],{"class":264},[220,33887,33888,33890,33892],{"class":222,"line":644},[220,33889,402],{"class":264},[220,33891,347],{"class":346},[220,33893,359],{"class":264},[212,33895,33896],{"className":409,"code":33851,"language":411,"meta":178,"style":178},[99,33897,33898,33906,33914,33922,33930],{"__ignoreMap":178},[220,33899,33900,33902,33904],{"class":222,"line":223},[220,33901,343],{"class":264},[220,33903,347],{"class":420},[220,33905,359],{"class":264},[220,33907,33908,33910,33912],{"class":222,"line":179},[220,33909,364],{"class":264},[220,33911,33829],{"class":420},[220,33913,359],{"class":264},[220,33915,33916,33918,33920],{"class":222,"line":389},[220,33917,2550],{"class":264},[220,33919,2553],{"class":420},[220,33921,386],{"class":264},[220,33923,33924,33926,33928],{"class":222,"line":399},[220,33925,2567],{"class":264},[220,33927,33829],{"class":420},[220,33929,359],{"class":264},[220,33931,33932,33934,33936],{"class":222,"line":644},[220,33933,402],{"class":264},[220,33935,347],{"class":420},[220,33937,359],{"class":264},[212,33939,33940],{"className":2844,"code":33851,"language":2846,"meta":178,"style":178},[99,33941,33942,33950,33958,33966,33974],{"__ignoreMap":178},[220,33943,33944,33946,33948],{"class":222,"line":223},[220,33945,343],{"class":264},[220,33947,347],{"class":420},[220,33949,359],{"class":264},[220,33951,33952,33954,33956],{"class":222,"line":179},[220,33953,364],{"class":264},[220,33955,33829],{"class":420},[220,33957,359],{"class":264},[220,33959,33960,33962,33964],{"class":222,"line":389},[220,33961,2550],{"class":264},[220,33963,2553],{"class":420},[220,33965,386],{"class":264},[220,33967,33968,33970,33972],{"class":222,"line":399},[220,33969,2567],{"class":264},[220,33971,33829],{"class":420},[220,33973,359],{"class":264},[220,33975,33976,33978,33980],{"class":222,"line":644},[220,33977,402],{"class":264},[220,33979,347],{"class":420},[220,33981,359],{"class":264},[212,33983,33984],{"className":468,"code":33851,"language":469,"meta":178,"style":178},[99,33985,33986,33994,34002,34010,34018],{"__ignoreMap":178},[220,33987,33988,33990,33992],{"class":222,"line":223},[220,33989,343],{"class":264},[220,33991,347],{"class":420},[220,33993,359],{"class":264},[220,33995,33996,33998,34000],{"class":222,"line":179},[220,33997,364],{"class":264},[220,33999,33829],{"class":420},[220,34001,359],{"class":264},[220,34003,34004,34006,34008],{"class":222,"line":389},[220,34005,2550],{"class":264},[220,34007,2553],{"class":420},[220,34009,386],{"class":264},[220,34011,34012,34014,34016],{"class":222,"line":399},[220,34013,2567],{"class":264},[220,34015,33829],{"class":420},[220,34017,359],{"class":264},[220,34019,34020,34022,34024],{"class":222,"line":644},[220,34021,402],{"class":264},[220,34023,347],{"class":420},[220,34025,359],{"class":264},[212,34027,34029],{"className":251,"code":34028,"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,34030,34031,34041,34045,34059,34063,34072,34080,34084,34088],{"__ignoreMap":178},[220,34032,34033,34035,34037,34039],{"class":222,"line":223},[220,34034,261],{"class":260},[220,34036,9763],{"class":264},[220,34038,268],{"class":260},[220,34040,9768],{"class":230},[220,34042,34043],{"class":222,"line":179},[220,34044,647],{"emptyLinePlaceholder":194},[220,34046,34047,34049,34051,34053,34055,34057],{"class":222,"line":389},[220,34048,1735],{"class":260},[220,34050,1738],{"class":420},[220,34052,1741],{"class":260},[220,34054,1744],{"class":260},[220,34056,1747],{"class":226},[220,34058,1750],{"class":264},[220,34060,34061],{"class":222,"line":399},[220,34062,1765],{"class":264},[220,34064,34065,34067,34070],{"class":222,"line":644},[220,34066,1770],{"class":264},[220,34068,34069],{"class":230},"'CRTScreen'",[220,34071,5255],{"class":264},[220,34073,34074,34076,34078],{"class":222,"line":650},[220,34075,5260],{"class":264},[220,34077,3206],{"class":230},[220,34079,2465],{"class":264},[220,34081,34082],{"class":222,"line":656},[220,34083,5277],{"class":264},[220,34085,34086],{"class":222,"line":673},[220,34087,1787],{"class":264},[220,34089,34090],{"class":222,"line":682},[220,34091,1792],{"class":264},[1504,34093,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":34095},[34096,34097],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":33829,"description":33837},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":34104,"title":34105,"body":34106,"category":33488,"componentType":24141,"description":34113,"extension":191,"meta":34298,"navigation":194,"path":34299,"requiresChild":30811,"seo":34300,"stem":34301,"__hash__":34302},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":34107,"toc":34294},[34108,34111,34114,34116,34118,34121,34123,34292],[11,34109,34105],{"id":34110},"carbonfiber",[15,34112,34113],{},"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.",[30192,34115],{"component":34105},[23,34117,30196],{"id":24798},[30198,34119],{":props":34120},"[{\"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,34122,30204],{"id":30203},[246,34124,34125,34154,34182,34210,34238],{":tabs":1557},[212,34126,34128],{"className":334,"code":34127,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,34129,34130,34138,34146],{"__ignoreMap":178},[220,34131,34132,34134,34136],{"class":222,"line":223},[220,34133,343],{"class":264},[220,34135,347],{"class":346},[220,34137,359],{"class":264},[220,34139,34140,34142,34144],{"class":222,"line":179},[220,34141,364],{"class":264},[220,34143,34105],{"class":346},[220,34145,386],{"class":264},[220,34147,34148,34150,34152],{"class":222,"line":389},[220,34149,402],{"class":264},[220,34151,347],{"class":346},[220,34153,359],{"class":264},[212,34155,34156],{"className":409,"code":34127,"language":411,"meta":178,"style":178},[99,34157,34158,34166,34174],{"__ignoreMap":178},[220,34159,34160,34162,34164],{"class":222,"line":223},[220,34161,343],{"class":264},[220,34163,347],{"class":420},[220,34165,359],{"class":264},[220,34167,34168,34170,34172],{"class":222,"line":179},[220,34169,364],{"class":264},[220,34171,34105],{"class":420},[220,34173,386],{"class":264},[220,34175,34176,34178,34180],{"class":222,"line":389},[220,34177,402],{"class":264},[220,34179,347],{"class":420},[220,34181,359],{"class":264},[212,34183,34184],{"className":2844,"code":34127,"language":2846,"meta":178,"style":178},[99,34185,34186,34194,34202],{"__ignoreMap":178},[220,34187,34188,34190,34192],{"class":222,"line":223},[220,34189,343],{"class":264},[220,34191,347],{"class":420},[220,34193,359],{"class":264},[220,34195,34196,34198,34200],{"class":222,"line":179},[220,34197,364],{"class":264},[220,34199,34105],{"class":420},[220,34201,386],{"class":264},[220,34203,34204,34206,34208],{"class":222,"line":389},[220,34205,402],{"class":264},[220,34207,347],{"class":420},[220,34209,359],{"class":264},[212,34211,34212],{"className":468,"code":34127,"language":469,"meta":178,"style":178},[99,34213,34214,34222,34230],{"__ignoreMap":178},[220,34215,34216,34218,34220],{"class":222,"line":223},[220,34217,343],{"class":264},[220,34219,347],{"class":420},[220,34221,359],{"class":264},[220,34223,34224,34226,34228],{"class":222,"line":179},[220,34225,364],{"class":264},[220,34227,34105],{"class":420},[220,34229,386],{"class":264},[220,34231,34232,34234,34236],{"class":222,"line":389},[220,34233,402],{"class":264},[220,34235,347],{"class":420},[220,34237,359],{"class":264},[212,34239,34241],{"className":251,"code":34240,"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,34242,34243,34253,34257,34271,34275,34284,34288],{"__ignoreMap":178},[220,34244,34245,34247,34249,34251],{"class":222,"line":223},[220,34246,261],{"class":260},[220,34248,9763],{"class":264},[220,34250,268],{"class":260},[220,34252,9768],{"class":230},[220,34254,34255],{"class":222,"line":179},[220,34256,647],{"emptyLinePlaceholder":194},[220,34258,34259,34261,34263,34265,34267,34269],{"class":222,"line":389},[220,34260,1735],{"class":260},[220,34262,1738],{"class":420},[220,34264,1741],{"class":260},[220,34266,1744],{"class":260},[220,34268,1747],{"class":226},[220,34270,1750],{"class":264},[220,34272,34273],{"class":222,"line":399},[220,34274,1765],{"class":264},[220,34276,34277,34279,34282],{"class":222,"line":644},[220,34278,1770],{"class":264},[220,34280,34281],{"class":230},"'CarbonFiber'",[220,34283,2465],{"class":264},[220,34285,34286],{"class":222,"line":650},[220,34287,1787],{"class":264},[220,34289,34290],{"class":222,"line":656},[220,34291,1792],{"class":264},[1504,34293,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":34295},[34296,34297],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":34105,"description":34113},"docs\u002Fcomponents\u002FCarbonFiber","Vug8R9Ib1Nal1wvFebaB3aW1EfJ6nVWs50q_JfYhFoA",{"id":34304,"title":34305,"body":34306,"category":31087,"componentType":24147,"description":34313,"extension":191,"meta":34574,"navigation":194,"path":34575,"requiresChild":194,"seo":34576,"stem":34577,"__hash__":34578},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":34307,"toc":34570},[34308,34311,34314,34316,34318,34321,34323,34568],[11,34309,34305],{"id":34310},"chalkboard",[15,34312,34313],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[30192,34315],{"component":34305},[23,34317,30196],{"id":24798},[30198,34319],{":props":34320},"[{\"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,34322,30204],{"id":30203},[246,34324,34325,34370,34414,34458,34502],{":tabs":1557},[212,34326,34328],{"className":334,"code":34327,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,34329,34330,34338,34346,34354,34362],{"__ignoreMap":178},[220,34331,34332,34334,34336],{"class":222,"line":223},[220,34333,343],{"class":264},[220,34335,347],{"class":346},[220,34337,359],{"class":264},[220,34339,34340,34342,34344],{"class":222,"line":179},[220,34341,364],{"class":264},[220,34343,34305],{"class":346},[220,34345,359],{"class":264},[220,34347,34348,34350,34352],{"class":222,"line":389},[220,34349,2550],{"class":264},[220,34351,2553],{"class":346},[220,34353,386],{"class":264},[220,34355,34356,34358,34360],{"class":222,"line":399},[220,34357,2567],{"class":264},[220,34359,34305],{"class":346},[220,34361,359],{"class":264},[220,34363,34364,34366,34368],{"class":222,"line":644},[220,34365,402],{"class":264},[220,34367,347],{"class":346},[220,34369,359],{"class":264},[212,34371,34372],{"className":409,"code":34327,"language":411,"meta":178,"style":178},[99,34373,34374,34382,34390,34398,34406],{"__ignoreMap":178},[220,34375,34376,34378,34380],{"class":222,"line":223},[220,34377,343],{"class":264},[220,34379,347],{"class":420},[220,34381,359],{"class":264},[220,34383,34384,34386,34388],{"class":222,"line":179},[220,34385,364],{"class":264},[220,34387,34305],{"class":420},[220,34389,359],{"class":264},[220,34391,34392,34394,34396],{"class":222,"line":389},[220,34393,2550],{"class":264},[220,34395,2553],{"class":420},[220,34397,386],{"class":264},[220,34399,34400,34402,34404],{"class":222,"line":399},[220,34401,2567],{"class":264},[220,34403,34305],{"class":420},[220,34405,359],{"class":264},[220,34407,34408,34410,34412],{"class":222,"line":644},[220,34409,402],{"class":264},[220,34411,347],{"class":420},[220,34413,359],{"class":264},[212,34415,34416],{"className":2844,"code":34327,"language":2846,"meta":178,"style":178},[99,34417,34418,34426,34434,34442,34450],{"__ignoreMap":178},[220,34419,34420,34422,34424],{"class":222,"line":223},[220,34421,343],{"class":264},[220,34423,347],{"class":420},[220,34425,359],{"class":264},[220,34427,34428,34430,34432],{"class":222,"line":179},[220,34429,364],{"class":264},[220,34431,34305],{"class":420},[220,34433,359],{"class":264},[220,34435,34436,34438,34440],{"class":222,"line":389},[220,34437,2550],{"class":264},[220,34439,2553],{"class":420},[220,34441,386],{"class":264},[220,34443,34444,34446,34448],{"class":222,"line":399},[220,34445,2567],{"class":264},[220,34447,34305],{"class":420},[220,34449,359],{"class":264},[220,34451,34452,34454,34456],{"class":222,"line":644},[220,34453,402],{"class":264},[220,34455,347],{"class":420},[220,34457,359],{"class":264},[212,34459,34460],{"className":468,"code":34327,"language":469,"meta":178,"style":178},[99,34461,34462,34470,34478,34486,34494],{"__ignoreMap":178},[220,34463,34464,34466,34468],{"class":222,"line":223},[220,34465,343],{"class":264},[220,34467,347],{"class":420},[220,34469,359],{"class":264},[220,34471,34472,34474,34476],{"class":222,"line":179},[220,34473,364],{"class":264},[220,34475,34305],{"class":420},[220,34477,359],{"class":264},[220,34479,34480,34482,34484],{"class":222,"line":389},[220,34481,2550],{"class":264},[220,34483,2553],{"class":420},[220,34485,386],{"class":264},[220,34487,34488,34490,34492],{"class":222,"line":399},[220,34489,2567],{"class":264},[220,34491,34305],{"class":420},[220,34493,359],{"class":264},[220,34495,34496,34498,34500],{"class":222,"line":644},[220,34497,402],{"class":264},[220,34499,347],{"class":420},[220,34501,359],{"class":264},[212,34503,34505],{"className":251,"code":34504,"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,34506,34507,34517,34521,34535,34539,34548,34556,34560,34564],{"__ignoreMap":178},[220,34508,34509,34511,34513,34515],{"class":222,"line":223},[220,34510,261],{"class":260},[220,34512,9763],{"class":264},[220,34514,268],{"class":260},[220,34516,9768],{"class":230},[220,34518,34519],{"class":222,"line":179},[220,34520,647],{"emptyLinePlaceholder":194},[220,34522,34523,34525,34527,34529,34531,34533],{"class":222,"line":389},[220,34524,1735],{"class":260},[220,34526,1738],{"class":420},[220,34528,1741],{"class":260},[220,34530,1744],{"class":260},[220,34532,1747],{"class":226},[220,34534,1750],{"class":264},[220,34536,34537],{"class":222,"line":399},[220,34538,1765],{"class":264},[220,34540,34541,34543,34546],{"class":222,"line":644},[220,34542,1770],{"class":264},[220,34544,34545],{"class":230},"'Chalkboard'",[220,34547,5255],{"class":264},[220,34549,34550,34552,34554],{"class":222,"line":650},[220,34551,5260],{"class":264},[220,34553,3206],{"class":230},[220,34555,2465],{"class":264},[220,34557,34558],{"class":222,"line":656},[220,34559,5277],{"class":264},[220,34561,34562],{"class":222,"line":673},[220,34563,1787],{"class":264},[220,34565,34566],{"class":222,"line":682},[220,34567,1792],{"class":264},[1504,34569,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":34571},[34572,34573],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":34305,"description":34313},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":34580,"title":34581,"body":34582,"category":30515,"componentType":24147,"description":34589,"extension":191,"meta":34850,"navigation":194,"path":34851,"requiresChild":194,"seo":34852,"stem":34853,"__hash__":34854},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":34583,"toc":34846},[34584,34587,34590,34592,34594,34597,34599,34844],[11,34585,34581],{"id":34586},"channelblur",[15,34588,34589],{},"Independent blur for red, green, and blue channels",[30192,34591],{"component":34581},[23,34593,30196],{"id":24798},[30198,34595],{":props":34596},"[{\"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,34598,30204],{"id":30203},[246,34600,34601,34646,34690,34734,34778],{":tabs":1557},[212,34602,34604],{"className":334,"code":34603,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,34605,34606,34614,34622,34630,34638],{"__ignoreMap":178},[220,34607,34608,34610,34612],{"class":222,"line":223},[220,34609,343],{"class":264},[220,34611,347],{"class":346},[220,34613,359],{"class":264},[220,34615,34616,34618,34620],{"class":222,"line":179},[220,34617,364],{"class":264},[220,34619,34581],{"class":346},[220,34621,359],{"class":264},[220,34623,34624,34626,34628],{"class":222,"line":389},[220,34625,2550],{"class":264},[220,34627,2553],{"class":346},[220,34629,386],{"class":264},[220,34631,34632,34634,34636],{"class":222,"line":399},[220,34633,2567],{"class":264},[220,34635,34581],{"class":346},[220,34637,359],{"class":264},[220,34639,34640,34642,34644],{"class":222,"line":644},[220,34641,402],{"class":264},[220,34643,347],{"class":346},[220,34645,359],{"class":264},[212,34647,34648],{"className":409,"code":34603,"language":411,"meta":178,"style":178},[99,34649,34650,34658,34666,34674,34682],{"__ignoreMap":178},[220,34651,34652,34654,34656],{"class":222,"line":223},[220,34653,343],{"class":264},[220,34655,347],{"class":420},[220,34657,359],{"class":264},[220,34659,34660,34662,34664],{"class":222,"line":179},[220,34661,364],{"class":264},[220,34663,34581],{"class":420},[220,34665,359],{"class":264},[220,34667,34668,34670,34672],{"class":222,"line":389},[220,34669,2550],{"class":264},[220,34671,2553],{"class":420},[220,34673,386],{"class":264},[220,34675,34676,34678,34680],{"class":222,"line":399},[220,34677,2567],{"class":264},[220,34679,34581],{"class":420},[220,34681,359],{"class":264},[220,34683,34684,34686,34688],{"class":222,"line":644},[220,34685,402],{"class":264},[220,34687,347],{"class":420},[220,34689,359],{"class":264},[212,34691,34692],{"className":2844,"code":34603,"language":2846,"meta":178,"style":178},[99,34693,34694,34702,34710,34718,34726],{"__ignoreMap":178},[220,34695,34696,34698,34700],{"class":222,"line":223},[220,34697,343],{"class":264},[220,34699,347],{"class":420},[220,34701,359],{"class":264},[220,34703,34704,34706,34708],{"class":222,"line":179},[220,34705,364],{"class":264},[220,34707,34581],{"class":420},[220,34709,359],{"class":264},[220,34711,34712,34714,34716],{"class":222,"line":389},[220,34713,2550],{"class":264},[220,34715,2553],{"class":420},[220,34717,386],{"class":264},[220,34719,34720,34722,34724],{"class":222,"line":399},[220,34721,2567],{"class":264},[220,34723,34581],{"class":420},[220,34725,359],{"class":264},[220,34727,34728,34730,34732],{"class":222,"line":644},[220,34729,402],{"class":264},[220,34731,347],{"class":420},[220,34733,359],{"class":264},[212,34735,34736],{"className":468,"code":34603,"language":469,"meta":178,"style":178},[99,34737,34738,34746,34754,34762,34770],{"__ignoreMap":178},[220,34739,34740,34742,34744],{"class":222,"line":223},[220,34741,343],{"class":264},[220,34743,347],{"class":420},[220,34745,359],{"class":264},[220,34747,34748,34750,34752],{"class":222,"line":179},[220,34749,364],{"class":264},[220,34751,34581],{"class":420},[220,34753,359],{"class":264},[220,34755,34756,34758,34760],{"class":222,"line":389},[220,34757,2550],{"class":264},[220,34759,2553],{"class":420},[220,34761,386],{"class":264},[220,34763,34764,34766,34768],{"class":222,"line":399},[220,34765,2567],{"class":264},[220,34767,34581],{"class":420},[220,34769,359],{"class":264},[220,34771,34772,34774,34776],{"class":222,"line":644},[220,34773,402],{"class":264},[220,34775,347],{"class":420},[220,34777,359],{"class":264},[212,34779,34781],{"className":251,"code":34780,"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,34782,34783,34793,34797,34811,34815,34824,34832,34836,34840],{"__ignoreMap":178},[220,34784,34785,34787,34789,34791],{"class":222,"line":223},[220,34786,261],{"class":260},[220,34788,9763],{"class":264},[220,34790,268],{"class":260},[220,34792,9768],{"class":230},[220,34794,34795],{"class":222,"line":179},[220,34796,647],{"emptyLinePlaceholder":194},[220,34798,34799,34801,34803,34805,34807,34809],{"class":222,"line":389},[220,34800,1735],{"class":260},[220,34802,1738],{"class":420},[220,34804,1741],{"class":260},[220,34806,1744],{"class":260},[220,34808,1747],{"class":226},[220,34810,1750],{"class":264},[220,34812,34813],{"class":222,"line":399},[220,34814,1765],{"class":264},[220,34816,34817,34819,34822],{"class":222,"line":644},[220,34818,1770],{"class":264},[220,34820,34821],{"class":230},"'ChannelBlur'",[220,34823,5255],{"class":264},[220,34825,34826,34828,34830],{"class":222,"line":650},[220,34827,5260],{"class":264},[220,34829,3206],{"class":230},[220,34831,2465],{"class":264},[220,34833,34834],{"class":222,"line":656},[220,34835,5277],{"class":264},[220,34837,34838],{"class":222,"line":673},[220,34839,1787],{"class":264},[220,34841,34842],{"class":222,"line":682},[220,34843,1792],{"class":264},[1504,34845,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":34847},[34848,34849],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":34581,"description":34589},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":34856,"title":34857,"body":34858,"category":31344,"componentType":24141,"description":34865,"extension":191,"meta":35049,"navigation":194,"path":35050,"requiresChild":30811,"seo":35051,"stem":35052,"__hash__":35053},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":34859,"toc":35045},[34860,34863,34866,34868,34870,34873,34875,35043],[11,34861,34857],{"id":34862},"checkerboard",[15,34864,34865],{},"Classic checkerboard pattern with two alternating colors",[30192,34867],{"component":34857},[23,34869,30196],{"id":24798},[30198,34871],{":props":34872},"[{\"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,34874,30204],{"id":30203},[246,34876,34877,34906,34934,34962,34990],{":tabs":1557},[212,34878,34880],{"className":334,"code":34879,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,34881,34882,34890,34898],{"__ignoreMap":178},[220,34883,34884,34886,34888],{"class":222,"line":223},[220,34885,343],{"class":264},[220,34887,347],{"class":346},[220,34889,359],{"class":264},[220,34891,34892,34894,34896],{"class":222,"line":179},[220,34893,364],{"class":264},[220,34895,34857],{"class":346},[220,34897,386],{"class":264},[220,34899,34900,34902,34904],{"class":222,"line":389},[220,34901,402],{"class":264},[220,34903,347],{"class":346},[220,34905,359],{"class":264},[212,34907,34908],{"className":409,"code":34879,"language":411,"meta":178,"style":178},[99,34909,34910,34918,34926],{"__ignoreMap":178},[220,34911,34912,34914,34916],{"class":222,"line":223},[220,34913,343],{"class":264},[220,34915,347],{"class":420},[220,34917,359],{"class":264},[220,34919,34920,34922,34924],{"class":222,"line":179},[220,34921,364],{"class":264},[220,34923,34857],{"class":420},[220,34925,386],{"class":264},[220,34927,34928,34930,34932],{"class":222,"line":389},[220,34929,402],{"class":264},[220,34931,347],{"class":420},[220,34933,359],{"class":264},[212,34935,34936],{"className":2844,"code":34879,"language":2846,"meta":178,"style":178},[99,34937,34938,34946,34954],{"__ignoreMap":178},[220,34939,34940,34942,34944],{"class":222,"line":223},[220,34941,343],{"class":264},[220,34943,347],{"class":420},[220,34945,359],{"class":264},[220,34947,34948,34950,34952],{"class":222,"line":179},[220,34949,364],{"class":264},[220,34951,34857],{"class":420},[220,34953,386],{"class":264},[220,34955,34956,34958,34960],{"class":222,"line":389},[220,34957,402],{"class":264},[220,34959,347],{"class":420},[220,34961,359],{"class":264},[212,34963,34964],{"className":468,"code":34879,"language":469,"meta":178,"style":178},[99,34965,34966,34974,34982],{"__ignoreMap":178},[220,34967,34968,34970,34972],{"class":222,"line":223},[220,34969,343],{"class":264},[220,34971,347],{"class":420},[220,34973,359],{"class":264},[220,34975,34976,34978,34980],{"class":222,"line":179},[220,34977,364],{"class":264},[220,34979,34857],{"class":420},[220,34981,386],{"class":264},[220,34983,34984,34986,34988],{"class":222,"line":389},[220,34985,402],{"class":264},[220,34987,347],{"class":420},[220,34989,359],{"class":264},[212,34991,34993],{"className":251,"code":34992,"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,34994,34995,35005,35009,35023,35027,35035,35039],{"__ignoreMap":178},[220,34996,34997,34999,35001,35003],{"class":222,"line":223},[220,34998,261],{"class":260},[220,35000,9763],{"class":264},[220,35002,268],{"class":260},[220,35004,9768],{"class":230},[220,35006,35007],{"class":222,"line":179},[220,35008,647],{"emptyLinePlaceholder":194},[220,35010,35011,35013,35015,35017,35019,35021],{"class":222,"line":389},[220,35012,1735],{"class":260},[220,35014,1738],{"class":420},[220,35016,1741],{"class":260},[220,35018,1744],{"class":260},[220,35020,1747],{"class":226},[220,35022,1750],{"class":264},[220,35024,35025],{"class":222,"line":399},[220,35026,1765],{"class":264},[220,35028,35029,35031,35033],{"class":222,"line":644},[220,35030,1770],{"class":264},[220,35032,8406],{"class":230},[220,35034,2465],{"class":264},[220,35036,35037],{"class":222,"line":650},[220,35038,1787],{"class":264},[220,35040,35041],{"class":222,"line":656},[220,35042,1792],{"class":264},[1504,35044,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":35046},[35047,35048],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":34857,"description":34865},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":35055,"title":35056,"body":35057,"category":31344,"componentType":24141,"description":35064,"extension":191,"meta":35249,"navigation":194,"path":35250,"requiresChild":30811,"seo":35251,"stem":35252,"__hash__":35253},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":35058,"toc":35245},[35059,35062,35065,35067,35069,35072,35074,35243],[11,35060,35056],{"id":35061},"chevron",[15,35063,35064],{},"Animated chevron \u002F zigzag stripe pattern",[30192,35066],{"component":35056},[23,35068,30196],{"id":24798},[30198,35070],{":props":35071},"[{\"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,35073,30204],{"id":30203},[246,35075,35076,35105,35133,35161,35189],{":tabs":1557},[212,35077,35079],{"className":334,"code":35078,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,35080,35081,35089,35097],{"__ignoreMap":178},[220,35082,35083,35085,35087],{"class":222,"line":223},[220,35084,343],{"class":264},[220,35086,347],{"class":346},[220,35088,359],{"class":264},[220,35090,35091,35093,35095],{"class":222,"line":179},[220,35092,364],{"class":264},[220,35094,35056],{"class":346},[220,35096,386],{"class":264},[220,35098,35099,35101,35103],{"class":222,"line":389},[220,35100,402],{"class":264},[220,35102,347],{"class":346},[220,35104,359],{"class":264},[212,35106,35107],{"className":409,"code":35078,"language":411,"meta":178,"style":178},[99,35108,35109,35117,35125],{"__ignoreMap":178},[220,35110,35111,35113,35115],{"class":222,"line":223},[220,35112,343],{"class":264},[220,35114,347],{"class":420},[220,35116,359],{"class":264},[220,35118,35119,35121,35123],{"class":222,"line":179},[220,35120,364],{"class":264},[220,35122,35056],{"class":420},[220,35124,386],{"class":264},[220,35126,35127,35129,35131],{"class":222,"line":389},[220,35128,402],{"class":264},[220,35130,347],{"class":420},[220,35132,359],{"class":264},[212,35134,35135],{"className":2844,"code":35078,"language":2846,"meta":178,"style":178},[99,35136,35137,35145,35153],{"__ignoreMap":178},[220,35138,35139,35141,35143],{"class":222,"line":223},[220,35140,343],{"class":264},[220,35142,347],{"class":420},[220,35144,359],{"class":264},[220,35146,35147,35149,35151],{"class":222,"line":179},[220,35148,364],{"class":264},[220,35150,35056],{"class":420},[220,35152,386],{"class":264},[220,35154,35155,35157,35159],{"class":222,"line":389},[220,35156,402],{"class":264},[220,35158,347],{"class":420},[220,35160,359],{"class":264},[212,35162,35163],{"className":468,"code":35078,"language":469,"meta":178,"style":178},[99,35164,35165,35173,35181],{"__ignoreMap":178},[220,35166,35167,35169,35171],{"class":222,"line":223},[220,35168,343],{"class":264},[220,35170,347],{"class":420},[220,35172,359],{"class":264},[220,35174,35175,35177,35179],{"class":222,"line":179},[220,35176,364],{"class":264},[220,35178,35056],{"class":420},[220,35180,386],{"class":264},[220,35182,35183,35185,35187],{"class":222,"line":389},[220,35184,402],{"class":264},[220,35186,347],{"class":420},[220,35188,359],{"class":264},[212,35190,35192],{"className":251,"code":35191,"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,35193,35194,35204,35208,35222,35226,35235,35239],{"__ignoreMap":178},[220,35195,35196,35198,35200,35202],{"class":222,"line":223},[220,35197,261],{"class":260},[220,35199,9763],{"class":264},[220,35201,268],{"class":260},[220,35203,9768],{"class":230},[220,35205,35206],{"class":222,"line":179},[220,35207,647],{"emptyLinePlaceholder":194},[220,35209,35210,35212,35214,35216,35218,35220],{"class":222,"line":389},[220,35211,1735],{"class":260},[220,35213,1738],{"class":420},[220,35215,1741],{"class":260},[220,35217,1744],{"class":260},[220,35219,1747],{"class":226},[220,35221,1750],{"class":264},[220,35223,35224],{"class":222,"line":399},[220,35225,1765],{"class":264},[220,35227,35228,35230,35233],{"class":222,"line":644},[220,35229,1770],{"class":264},[220,35231,35232],{"class":230},"'Chevron'",[220,35234,2465],{"class":264},[220,35236,35237],{"class":222,"line":650},[220,35238,1787],{"class":264},[220,35240,35241],{"class":222,"line":656},[220,35242,1792],{"class":264},[1504,35244,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":35246},[35247,35248],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":35056,"description":35064},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":35255,"title":35256,"body":35257,"category":35553,"componentType":24141,"description":35264,"extension":191,"meta":35554,"navigation":194,"path":35555,"requiresChild":30811,"seo":35556,"stem":35557,"__hash__":35558},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":35258,"toc":35549},[35259,35262,35265,35267,35269,35272,35274,35547],[11,35260,35256],{"id":35261},"chromaflow",[15,35263,35264],{},"Interactive liquid flow effect that follows your cursor",[30192,35266],{"component":35256},[23,35268,30196],{"id":24798},[30198,35270],{":props":35271},"[{\"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,35273,30204],{"id":30203},[246,35275,35276,35325,35381,35431,35485],{":tabs":1557},[212,35277,35279],{"className":334,"code":35278,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,35280,35281,35289,35296,35304,35313,35317],{"__ignoreMap":178},[220,35282,35283,35285,35287],{"class":222,"line":223},[220,35284,343],{"class":264},[220,35286,347],{"class":346},[220,35288,359],{"class":264},[220,35290,35291,35293],{"class":222,"line":179},[220,35292,364],{"class":264},[220,35294,35295],{"class":346},"ChromaFlow\n",[220,35297,35298,35300,35302],{"class":222,"line":389},[220,35299,18633],{"class":226},[220,35301,353],{"class":264},[220,35303,33544],{"class":230},[220,35305,35306,35308,35310],{"class":222,"line":399},[220,35307,15666],{"class":226},[220,35309,353],{"class":264},[220,35311,35312],{"class":230},"\"3\"\n",[220,35314,35315],{"class":222,"line":644},[220,35316,1234],{"class":264},[220,35318,35319,35321,35323],{"class":222,"line":650},[220,35320,402],{"class":264},[220,35322,347],{"class":346},[220,35324,359],{"class":264},[212,35326,35328],{"className":409,"code":35327,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,35329,35330,35338,35344,35356,35369,35373],{"__ignoreMap":178},[220,35331,35332,35334,35336],{"class":222,"line":223},[220,35333,343],{"class":264},[220,35335,347],{"class":420},[220,35337,359],{"class":264},[220,35339,35340,35342],{"class":222,"line":179},[220,35341,364],{"class":264},[220,35343,35295],{"class":420},[220,35345,35346,35348,35350,35352,35354],{"class":222,"line":389},[220,35347,18744],{"class":226},[220,35349,353],{"class":260},[220,35351,743],{"class":264},[220,35353,6923],{"class":420},[220,35355,749],{"class":264},[220,35357,35358,35360,35362,35364,35367],{"class":222,"line":399},[220,35359,7892],{"class":226},[220,35361,353],{"class":260},[220,35363,743],{"class":264},[220,35365,35366],{"class":420},"3",[220,35368,749],{"class":264},[220,35370,35371],{"class":222,"line":644},[220,35372,1234],{"class":264},[220,35374,35375,35377,35379],{"class":222,"line":650},[220,35376,402],{"class":264},[220,35378,347],{"class":420},[220,35380,359],{"class":264},[212,35382,35383],{"className":2844,"code":35327,"language":2846,"meta":178,"style":178},[99,35384,35385,35393,35399,35409,35419,35423],{"__ignoreMap":178},[220,35386,35387,35389,35391],{"class":222,"line":223},[220,35388,343],{"class":264},[220,35390,347],{"class":420},[220,35392,359],{"class":264},[220,35394,35395,35397],{"class":222,"line":179},[220,35396,364],{"class":264},[220,35398,35295],{"class":420},[220,35400,35401,35403,35405,35407],{"class":222,"line":389},[220,35402,18744],{"class":226},[220,35404,28138],{"class":264},[220,35406,6923],{"class":420},[220,35408,749],{"class":264},[220,35410,35411,35413,35415,35417],{"class":222,"line":399},[220,35412,7892],{"class":226},[220,35414,28138],{"class":264},[220,35416,35366],{"class":420},[220,35418,749],{"class":264},[220,35420,35421],{"class":222,"line":644},[220,35422,1234],{"class":264},[220,35424,35425,35427,35429],{"class":222,"line":650},[220,35426,402],{"class":264},[220,35428,347],{"class":420},[220,35430,359],{"class":264},[212,35432,35433],{"className":468,"code":35327,"language":469,"meta":178,"style":178},[99,35434,35435,35443,35449,35461,35473,35477],{"__ignoreMap":178},[220,35436,35437,35439,35441],{"class":222,"line":223},[220,35438,343],{"class":264},[220,35440,347],{"class":420},[220,35442,359],{"class":264},[220,35444,35445,35447],{"class":222,"line":179},[220,35446,364],{"class":264},[220,35448,35295],{"class":420},[220,35450,35451,35453,35455,35457,35459],{"class":222,"line":389},[220,35452,18744],{"class":226},[220,35454,353],{"class":260},[220,35456,743],{"class":264},[220,35458,6923],{"class":420},[220,35460,749],{"class":264},[220,35462,35463,35465,35467,35469,35471],{"class":222,"line":399},[220,35464,7892],{"class":226},[220,35466,353],{"class":260},[220,35468,743],{"class":264},[220,35470,35366],{"class":420},[220,35472,749],{"class":264},[220,35474,35475],{"class":222,"line":644},[220,35476,1234],{"class":264},[220,35478,35479,35481,35483],{"class":222,"line":650},[220,35480,402],{"class":264},[220,35482,347],{"class":420},[220,35484,359],{"class":264},[212,35486,35488],{"className":251,"code":35487,"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,35489,35490,35500,35504,35518,35522,35539,35543],{"__ignoreMap":178},[220,35491,35492,35494,35496,35498],{"class":222,"line":223},[220,35493,261],{"class":260},[220,35495,9763],{"class":264},[220,35497,268],{"class":260},[220,35499,9768],{"class":230},[220,35501,35502],{"class":222,"line":179},[220,35503,647],{"emptyLinePlaceholder":194},[220,35505,35506,35508,35510,35512,35514,35516],{"class":222,"line":389},[220,35507,1735],{"class":260},[220,35509,1738],{"class":420},[220,35511,1741],{"class":260},[220,35513,1744],{"class":260},[220,35515,1747],{"class":226},[220,35517,1750],{"class":264},[220,35519,35520],{"class":222,"line":399},[220,35521,1765],{"class":264},[220,35523,35524,35526,35529,35531,35533,35535,35537],{"class":222,"line":644},[220,35525,1770],{"class":264},[220,35527,35528],{"class":230},"'ChromaFlow'",[220,35530,30484],{"class":264},[220,35532,6923],{"class":420},[220,35534,4812],{"class":264},[220,35536,35366],{"class":420},[220,35538,1782],{"class":264},[220,35540,35541],{"class":222,"line":650},[220,35542,1787],{"class":264},[220,35544,35545],{"class":222,"line":656},[220,35546,1792],{"class":264},[1504,35548,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35550},[35551,35552],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":35256,"description":35264},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":35560,"title":35561,"body":35562,"category":31087,"componentType":24147,"description":35569,"extension":191,"meta":35830,"navigation":194,"path":35831,"requiresChild":194,"seo":35832,"stem":35833,"__hash__":35834},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":35563,"toc":35826},[35564,35567,35570,35572,35574,35577,35579,35824],[11,35565,35561],{"id":35566},"chromaticaberration",[15,35568,35569],{},"Separate RGB channels for a prismatic distortion effect",[30192,35571],{"component":35561},[23,35573,30196],{"id":24798},[30198,35575],{":props":35576},"[{\"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,35578,30204],{"id":30203},[246,35580,35581,35626,35670,35714,35758],{":tabs":1557},[212,35582,35584],{"className":334,"code":35583,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,35585,35586,35594,35602,35610,35618],{"__ignoreMap":178},[220,35587,35588,35590,35592],{"class":222,"line":223},[220,35589,343],{"class":264},[220,35591,347],{"class":346},[220,35593,359],{"class":264},[220,35595,35596,35598,35600],{"class":222,"line":179},[220,35597,364],{"class":264},[220,35599,35561],{"class":346},[220,35601,359],{"class":264},[220,35603,35604,35606,35608],{"class":222,"line":389},[220,35605,2550],{"class":264},[220,35607,2553],{"class":346},[220,35609,386],{"class":264},[220,35611,35612,35614,35616],{"class":222,"line":399},[220,35613,2567],{"class":264},[220,35615,35561],{"class":346},[220,35617,359],{"class":264},[220,35619,35620,35622,35624],{"class":222,"line":644},[220,35621,402],{"class":264},[220,35623,347],{"class":346},[220,35625,359],{"class":264},[212,35627,35628],{"className":409,"code":35583,"language":411,"meta":178,"style":178},[99,35629,35630,35638,35646,35654,35662],{"__ignoreMap":178},[220,35631,35632,35634,35636],{"class":222,"line":223},[220,35633,343],{"class":264},[220,35635,347],{"class":420},[220,35637,359],{"class":264},[220,35639,35640,35642,35644],{"class":222,"line":179},[220,35641,364],{"class":264},[220,35643,35561],{"class":420},[220,35645,359],{"class":264},[220,35647,35648,35650,35652],{"class":222,"line":389},[220,35649,2550],{"class":264},[220,35651,2553],{"class":420},[220,35653,386],{"class":264},[220,35655,35656,35658,35660],{"class":222,"line":399},[220,35657,2567],{"class":264},[220,35659,35561],{"class":420},[220,35661,359],{"class":264},[220,35663,35664,35666,35668],{"class":222,"line":644},[220,35665,402],{"class":264},[220,35667,347],{"class":420},[220,35669,359],{"class":264},[212,35671,35672],{"className":2844,"code":35583,"language":2846,"meta":178,"style":178},[99,35673,35674,35682,35690,35698,35706],{"__ignoreMap":178},[220,35675,35676,35678,35680],{"class":222,"line":223},[220,35677,343],{"class":264},[220,35679,347],{"class":420},[220,35681,359],{"class":264},[220,35683,35684,35686,35688],{"class":222,"line":179},[220,35685,364],{"class":264},[220,35687,35561],{"class":420},[220,35689,359],{"class":264},[220,35691,35692,35694,35696],{"class":222,"line":389},[220,35693,2550],{"class":264},[220,35695,2553],{"class":420},[220,35697,386],{"class":264},[220,35699,35700,35702,35704],{"class":222,"line":399},[220,35701,2567],{"class":264},[220,35703,35561],{"class":420},[220,35705,359],{"class":264},[220,35707,35708,35710,35712],{"class":222,"line":644},[220,35709,402],{"class":264},[220,35711,347],{"class":420},[220,35713,359],{"class":264},[212,35715,35716],{"className":468,"code":35583,"language":469,"meta":178,"style":178},[99,35717,35718,35726,35734,35742,35750],{"__ignoreMap":178},[220,35719,35720,35722,35724],{"class":222,"line":223},[220,35721,343],{"class":264},[220,35723,347],{"class":420},[220,35725,359],{"class":264},[220,35727,35728,35730,35732],{"class":222,"line":179},[220,35729,364],{"class":264},[220,35731,35561],{"class":420},[220,35733,359],{"class":264},[220,35735,35736,35738,35740],{"class":222,"line":389},[220,35737,2550],{"class":264},[220,35739,2553],{"class":420},[220,35741,386],{"class":264},[220,35743,35744,35746,35748],{"class":222,"line":399},[220,35745,2567],{"class":264},[220,35747,35561],{"class":420},[220,35749,359],{"class":264},[220,35751,35752,35754,35756],{"class":222,"line":644},[220,35753,402],{"class":264},[220,35755,347],{"class":420},[220,35757,359],{"class":264},[212,35759,35761],{"className":251,"code":35760,"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,35762,35763,35773,35777,35791,35795,35804,35812,35816,35820],{"__ignoreMap":178},[220,35764,35765,35767,35769,35771],{"class":222,"line":223},[220,35766,261],{"class":260},[220,35768,9763],{"class":264},[220,35770,268],{"class":260},[220,35772,9768],{"class":230},[220,35774,35775],{"class":222,"line":179},[220,35776,647],{"emptyLinePlaceholder":194},[220,35778,35779,35781,35783,35785,35787,35789],{"class":222,"line":389},[220,35780,1735],{"class":260},[220,35782,1738],{"class":420},[220,35784,1741],{"class":260},[220,35786,1744],{"class":260},[220,35788,1747],{"class":226},[220,35790,1750],{"class":264},[220,35792,35793],{"class":222,"line":399},[220,35794,1765],{"class":264},[220,35796,35797,35799,35802],{"class":222,"line":644},[220,35798,1770],{"class":264},[220,35800,35801],{"class":230},"'ChromaticAberration'",[220,35803,5255],{"class":264},[220,35805,35806,35808,35810],{"class":222,"line":650},[220,35807,5260],{"class":264},[220,35809,3206],{"class":230},[220,35811,2465],{"class":264},[220,35813,35814],{"class":222,"line":656},[220,35815,5277],{"class":264},[220,35817,35818],{"class":222,"line":673},[220,35819,1787],{"class":264},[220,35821,35822],{"class":222,"line":682},[220,35823,1792],{"class":264},[1504,35825,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":35827},[35828,35829],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":35561,"description":35569},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":35836,"title":2553,"body":35837,"category":14164,"componentType":24141,"description":35844,"extension":191,"meta":36119,"navigation":194,"path":36120,"requiresChild":30811,"seo":36121,"stem":36122,"__hash__":36123},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":35838,"toc":36115},[35839,35842,35845,35847,35849,35852,35854,36113],[11,35840,2553],{"id":35841},"circle",[15,35843,35844],{},"Generate a circle with adjustable size and softness",[30192,35846],{"component":2553},[23,35848,30196],{"id":24798},[30198,35850],{":props":35851},"[{\"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,35853,30204],{"id":30203},[246,35855,35856,35903,35954,36002,36052],{":tabs":1557},[212,35857,35859],{"className":334,"code":35858,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,35860,35861,35869,35875,35883,35891,35895],{"__ignoreMap":178},[220,35862,35863,35865,35867],{"class":222,"line":223},[220,35864,343],{"class":264},[220,35866,347],{"class":346},[220,35868,359],{"class":264},[220,35870,35871,35873],{"class":222,"line":179},[220,35872,364],{"class":264},[220,35874,7877],{"class":346},[220,35876,35877,35879,35881],{"class":222,"line":389},[220,35878,7882],{"class":226},[220,35880,353],{"class":264},[220,35882,7838],{"class":230},[220,35884,35885,35887,35889],{"class":222,"line":399},[220,35886,15666],{"class":226},[220,35888,353],{"class":264},[220,35890,33544],{"class":230},[220,35892,35893],{"class":222,"line":644},[220,35894,1234],{"class":264},[220,35896,35897,35899,35901],{"class":222,"line":650},[220,35898,402],{"class":264},[220,35900,347],{"class":346},[220,35902,359],{"class":264},[212,35904,35906],{"className":409,"code":35905,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,35907,35908,35916,35922,35930,35942,35946],{"__ignoreMap":178},[220,35909,35910,35912,35914],{"class":222,"line":223},[220,35911,343],{"class":264},[220,35913,347],{"class":420},[220,35915,359],{"class":264},[220,35917,35918,35920],{"class":222,"line":179},[220,35919,364],{"class":264},[220,35921,7877],{"class":420},[220,35923,35924,35926,35928],{"class":222,"line":389},[220,35925,7882],{"class":226},[220,35927,353],{"class":260},[220,35929,7838],{"class":230},[220,35931,35932,35934,35936,35938,35940],{"class":222,"line":399},[220,35933,7892],{"class":226},[220,35935,353],{"class":260},[220,35937,743],{"class":264},[220,35939,6923],{"class":420},[220,35941,749],{"class":264},[220,35943,35944],{"class":222,"line":644},[220,35945,1234],{"class":264},[220,35947,35948,35950,35952],{"class":222,"line":650},[220,35949,402],{"class":264},[220,35951,347],{"class":420},[220,35953,359],{"class":264},[212,35955,35956],{"className":2844,"code":35905,"language":2846,"meta":178,"style":178},[99,35957,35958,35966,35972,35980,35990,35994],{"__ignoreMap":178},[220,35959,35960,35962,35964],{"class":222,"line":223},[220,35961,343],{"class":264},[220,35963,347],{"class":420},[220,35965,359],{"class":264},[220,35967,35968,35970],{"class":222,"line":179},[220,35969,364],{"class":264},[220,35971,7877],{"class":420},[220,35973,35974,35976,35978],{"class":222,"line":389},[220,35975,7882],{"class":226},[220,35977,353],{"class":264},[220,35979,7838],{"class":230},[220,35981,35982,35984,35986,35988],{"class":222,"line":399},[220,35983,7892],{"class":226},[220,35985,28138],{"class":264},[220,35987,6923],{"class":420},[220,35989,749],{"class":264},[220,35991,35992],{"class":222,"line":644},[220,35993,1234],{"class":264},[220,35995,35996,35998,36000],{"class":222,"line":650},[220,35997,402],{"class":264},[220,35999,347],{"class":420},[220,36001,359],{"class":264},[212,36003,36004],{"className":468,"code":35905,"language":469,"meta":178,"style":178},[99,36005,36006,36014,36020,36028,36040,36044],{"__ignoreMap":178},[220,36007,36008,36010,36012],{"class":222,"line":223},[220,36009,343],{"class":264},[220,36011,347],{"class":420},[220,36013,359],{"class":264},[220,36015,36016,36018],{"class":222,"line":179},[220,36017,364],{"class":264},[220,36019,7877],{"class":420},[220,36021,36022,36024,36026],{"class":222,"line":389},[220,36023,7882],{"class":226},[220,36025,353],{"class":260},[220,36027,7838],{"class":230},[220,36029,36030,36032,36034,36036,36038],{"class":222,"line":399},[220,36031,7892],{"class":226},[220,36033,353],{"class":260},[220,36035,743],{"class":264},[220,36037,6923],{"class":420},[220,36039,749],{"class":264},[220,36041,36042],{"class":222,"line":644},[220,36043,1234],{"class":264},[220,36045,36046,36048,36050],{"class":222,"line":650},[220,36047,402],{"class":264},[220,36049,347],{"class":420},[220,36051,359],{"class":264},[212,36053,36055],{"className":251,"code":36054,"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,36056,36057,36067,36071,36085,36089,36105,36109],{"__ignoreMap":178},[220,36058,36059,36061,36063,36065],{"class":222,"line":223},[220,36060,261],{"class":260},[220,36062,9763],{"class":264},[220,36064,268],{"class":260},[220,36066,9768],{"class":230},[220,36068,36069],{"class":222,"line":179},[220,36070,647],{"emptyLinePlaceholder":194},[220,36072,36073,36075,36077,36079,36081,36083],{"class":222,"line":389},[220,36074,1735],{"class":260},[220,36076,1738],{"class":420},[220,36078,1741],{"class":260},[220,36080,1744],{"class":260},[220,36082,1747],{"class":226},[220,36084,1750],{"class":264},[220,36086,36087],{"class":222,"line":399},[220,36088,1765],{"class":264},[220,36090,36091,36093,36095,36097,36099,36101,36103],{"class":222,"line":644},[220,36092,1770],{"class":264},[220,36094,3206],{"class":230},[220,36096,1776],{"class":264},[220,36098,8417],{"class":230},[220,36100,4812],{"class":264},[220,36102,6923],{"class":420},[220,36104,1782],{"class":264},[220,36106,36107],{"class":222,"line":650},[220,36108,1787],{"class":264},[220,36110,36111],{"class":222,"line":656},[220,36112,1792],{"class":264},[1504,36114,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36116},[36117,36118],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":35844},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":36125,"title":36126,"body":36127,"category":31344,"componentType":24141,"description":36134,"extension":191,"meta":36319,"navigation":194,"path":36320,"requiresChild":30811,"seo":36321,"stem":36322,"__hash__":36323},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":36128,"toc":36315},[36129,36132,36135,36137,36139,36142,36144,36313],[11,36130,36126],{"id":36131},"colorwheel",[15,36133,36134],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[30192,36136],{"component":36126},[23,36138,30196],{"id":24798},[30198,36140],{":props":36141},"[{\"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,36143,30204],{"id":30203},[246,36145,36146,36175,36203,36231,36259],{":tabs":1557},[212,36147,36149],{"className":334,"code":36148,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,36150,36151,36159,36167],{"__ignoreMap":178},[220,36152,36153,36155,36157],{"class":222,"line":223},[220,36154,343],{"class":264},[220,36156,347],{"class":346},[220,36158,359],{"class":264},[220,36160,36161,36163,36165],{"class":222,"line":179},[220,36162,364],{"class":264},[220,36164,36126],{"class":346},[220,36166,386],{"class":264},[220,36168,36169,36171,36173],{"class":222,"line":389},[220,36170,402],{"class":264},[220,36172,347],{"class":346},[220,36174,359],{"class":264},[212,36176,36177],{"className":409,"code":36148,"language":411,"meta":178,"style":178},[99,36178,36179,36187,36195],{"__ignoreMap":178},[220,36180,36181,36183,36185],{"class":222,"line":223},[220,36182,343],{"class":264},[220,36184,347],{"class":420},[220,36186,359],{"class":264},[220,36188,36189,36191,36193],{"class":222,"line":179},[220,36190,364],{"class":264},[220,36192,36126],{"class":420},[220,36194,386],{"class":264},[220,36196,36197,36199,36201],{"class":222,"line":389},[220,36198,402],{"class":264},[220,36200,347],{"class":420},[220,36202,359],{"class":264},[212,36204,36205],{"className":2844,"code":36148,"language":2846,"meta":178,"style":178},[99,36206,36207,36215,36223],{"__ignoreMap":178},[220,36208,36209,36211,36213],{"class":222,"line":223},[220,36210,343],{"class":264},[220,36212,347],{"class":420},[220,36214,359],{"class":264},[220,36216,36217,36219,36221],{"class":222,"line":179},[220,36218,364],{"class":264},[220,36220,36126],{"class":420},[220,36222,386],{"class":264},[220,36224,36225,36227,36229],{"class":222,"line":389},[220,36226,402],{"class":264},[220,36228,347],{"class":420},[220,36230,359],{"class":264},[212,36232,36233],{"className":468,"code":36148,"language":469,"meta":178,"style":178},[99,36234,36235,36243,36251],{"__ignoreMap":178},[220,36236,36237,36239,36241],{"class":222,"line":223},[220,36238,343],{"class":264},[220,36240,347],{"class":420},[220,36242,359],{"class":264},[220,36244,36245,36247,36249],{"class":222,"line":179},[220,36246,364],{"class":264},[220,36248,36126],{"class":420},[220,36250,386],{"class":264},[220,36252,36253,36255,36257],{"class":222,"line":389},[220,36254,402],{"class":264},[220,36256,347],{"class":420},[220,36258,359],{"class":264},[212,36260,36262],{"className":251,"code":36261,"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,36263,36264,36274,36278,36292,36296,36305,36309],{"__ignoreMap":178},[220,36265,36266,36268,36270,36272],{"class":222,"line":223},[220,36267,261],{"class":260},[220,36269,9763],{"class":264},[220,36271,268],{"class":260},[220,36273,9768],{"class":230},[220,36275,36276],{"class":222,"line":179},[220,36277,647],{"emptyLinePlaceholder":194},[220,36279,36280,36282,36284,36286,36288,36290],{"class":222,"line":389},[220,36281,1735],{"class":260},[220,36283,1738],{"class":420},[220,36285,1741],{"class":260},[220,36287,1744],{"class":260},[220,36289,1747],{"class":226},[220,36291,1750],{"class":264},[220,36293,36294],{"class":222,"line":399},[220,36295,1765],{"class":264},[220,36297,36298,36300,36303],{"class":222,"line":644},[220,36299,1770],{"class":264},[220,36301,36302],{"class":230},"'ColorWheel'",[220,36304,2465],{"class":264},[220,36306,36307],{"class":222,"line":650},[220,36308,1787],{"class":264},[220,36310,36311],{"class":222,"line":656},[220,36312,1792],{"class":264},[1504,36314,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":36316},[36317,36318],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":36126,"description":36134},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":36325,"title":36326,"body":36327,"category":31087,"componentType":24147,"description":36334,"extension":191,"meta":36595,"navigation":194,"path":36596,"requiresChild":194,"seo":36597,"stem":36598,"__hash__":36599},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":36328,"toc":36591},[36329,36332,36335,36337,36339,36342,36344,36589],[11,36330,36326],{"id":36331},"compressionartifacts",[15,36333,36334],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[30192,36336],{"component":36326},[23,36338,30196],{"id":24798},[30198,36340],{":props":36341},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,36343,30204],{"id":30203},[246,36345,36346,36391,36435,36479,36523],{":tabs":1557},[212,36347,36349],{"className":334,"code":36348,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,36350,36351,36359,36367,36375,36383],{"__ignoreMap":178},[220,36352,36353,36355,36357],{"class":222,"line":223},[220,36354,343],{"class":264},[220,36356,347],{"class":346},[220,36358,359],{"class":264},[220,36360,36361,36363,36365],{"class":222,"line":179},[220,36362,364],{"class":264},[220,36364,36326],{"class":346},[220,36366,359],{"class":264},[220,36368,36369,36371,36373],{"class":222,"line":389},[220,36370,2550],{"class":264},[220,36372,2553],{"class":346},[220,36374,386],{"class":264},[220,36376,36377,36379,36381],{"class":222,"line":399},[220,36378,2567],{"class":264},[220,36380,36326],{"class":346},[220,36382,359],{"class":264},[220,36384,36385,36387,36389],{"class":222,"line":644},[220,36386,402],{"class":264},[220,36388,347],{"class":346},[220,36390,359],{"class":264},[212,36392,36393],{"className":409,"code":36348,"language":411,"meta":178,"style":178},[99,36394,36395,36403,36411,36419,36427],{"__ignoreMap":178},[220,36396,36397,36399,36401],{"class":222,"line":223},[220,36398,343],{"class":264},[220,36400,347],{"class":420},[220,36402,359],{"class":264},[220,36404,36405,36407,36409],{"class":222,"line":179},[220,36406,364],{"class":264},[220,36408,36326],{"class":420},[220,36410,359],{"class":264},[220,36412,36413,36415,36417],{"class":222,"line":389},[220,36414,2550],{"class":264},[220,36416,2553],{"class":420},[220,36418,386],{"class":264},[220,36420,36421,36423,36425],{"class":222,"line":399},[220,36422,2567],{"class":264},[220,36424,36326],{"class":420},[220,36426,359],{"class":264},[220,36428,36429,36431,36433],{"class":222,"line":644},[220,36430,402],{"class":264},[220,36432,347],{"class":420},[220,36434,359],{"class":264},[212,36436,36437],{"className":2844,"code":36348,"language":2846,"meta":178,"style":178},[99,36438,36439,36447,36455,36463,36471],{"__ignoreMap":178},[220,36440,36441,36443,36445],{"class":222,"line":223},[220,36442,343],{"class":264},[220,36444,347],{"class":420},[220,36446,359],{"class":264},[220,36448,36449,36451,36453],{"class":222,"line":179},[220,36450,364],{"class":264},[220,36452,36326],{"class":420},[220,36454,359],{"class":264},[220,36456,36457,36459,36461],{"class":222,"line":389},[220,36458,2550],{"class":264},[220,36460,2553],{"class":420},[220,36462,386],{"class":264},[220,36464,36465,36467,36469],{"class":222,"line":399},[220,36466,2567],{"class":264},[220,36468,36326],{"class":420},[220,36470,359],{"class":264},[220,36472,36473,36475,36477],{"class":222,"line":644},[220,36474,402],{"class":264},[220,36476,347],{"class":420},[220,36478,359],{"class":264},[212,36480,36481],{"className":468,"code":36348,"language":469,"meta":178,"style":178},[99,36482,36483,36491,36499,36507,36515],{"__ignoreMap":178},[220,36484,36485,36487,36489],{"class":222,"line":223},[220,36486,343],{"class":264},[220,36488,347],{"class":420},[220,36490,359],{"class":264},[220,36492,36493,36495,36497],{"class":222,"line":179},[220,36494,364],{"class":264},[220,36496,36326],{"class":420},[220,36498,359],{"class":264},[220,36500,36501,36503,36505],{"class":222,"line":389},[220,36502,2550],{"class":264},[220,36504,2553],{"class":420},[220,36506,386],{"class":264},[220,36508,36509,36511,36513],{"class":222,"line":399},[220,36510,2567],{"class":264},[220,36512,36326],{"class":420},[220,36514,359],{"class":264},[220,36516,36517,36519,36521],{"class":222,"line":644},[220,36518,402],{"class":264},[220,36520,347],{"class":420},[220,36522,359],{"class":264},[212,36524,36526],{"className":251,"code":36525,"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,36527,36528,36538,36542,36556,36560,36569,36577,36581,36585],{"__ignoreMap":178},[220,36529,36530,36532,36534,36536],{"class":222,"line":223},[220,36531,261],{"class":260},[220,36533,9763],{"class":264},[220,36535,268],{"class":260},[220,36537,9768],{"class":230},[220,36539,36540],{"class":222,"line":179},[220,36541,647],{"emptyLinePlaceholder":194},[220,36543,36544,36546,36548,36550,36552,36554],{"class":222,"line":389},[220,36545,1735],{"class":260},[220,36547,1738],{"class":420},[220,36549,1741],{"class":260},[220,36551,1744],{"class":260},[220,36553,1747],{"class":226},[220,36555,1750],{"class":264},[220,36557,36558],{"class":222,"line":399},[220,36559,1765],{"class":264},[220,36561,36562,36564,36567],{"class":222,"line":644},[220,36563,1770],{"class":264},[220,36565,36566],{"class":230},"'CompressionArtifacts'",[220,36568,5255],{"class":264},[220,36570,36571,36573,36575],{"class":222,"line":650},[220,36572,5260],{"class":264},[220,36574,3206],{"class":230},[220,36576,2465],{"class":264},[220,36578,36579],{"class":222,"line":656},[220,36580,5277],{"class":264},[220,36582,36583],{"class":222,"line":673},[220,36584,1787],{"class":264},[220,36586,36587],{"class":222,"line":682},[220,36588,1792],{"class":264},[1504,36590,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":36592},[36593,36594],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":36326,"description":36334},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":36601,"title":36602,"body":36603,"category":31677,"componentType":24147,"description":36610,"extension":191,"meta":36927,"navigation":194,"path":36928,"requiresChild":194,"seo":36929,"stem":36930,"__hash__":36931},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":36604,"toc":36923},[36605,36608,36611,36613,36615,36618,36620,36921],[11,36606,36602],{"id":36607},"concentricspin",[15,36609,36610],{},"Concentric rings that each rotate the underlying image by different amounts",[30192,36612],{"component":36602},[23,36614,30196],{"id":24798},[30198,36616],{":props":36617},"[{\"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,36619,30204],{"id":30203},[246,36621,36622,36678,36737,36793,36851],{":tabs":1557},[212,36623,36625],{"className":334,"code":36624,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,36626,36627,36635,36642,36650,36654,36662,36670],{"__ignoreMap":178},[220,36628,36629,36631,36633],{"class":222,"line":223},[220,36630,343],{"class":264},[220,36632,347],{"class":346},[220,36634,359],{"class":264},[220,36636,36637,36639],{"class":222,"line":179},[220,36638,364],{"class":264},[220,36640,36641],{"class":346},"ConcentricSpin\n",[220,36643,36644,36646,36648],{"class":222,"line":389},[220,36645,18633],{"class":226},[220,36647,353],{"class":264},[220,36649,30235],{"class":230},[220,36651,36652],{"class":222,"line":399},[220,36653,30240],{"class":264},[220,36655,36656,36658,36660],{"class":222,"line":644},[220,36657,2550],{"class":264},[220,36659,2553],{"class":346},[220,36661,386],{"class":264},[220,36663,36664,36666,36668],{"class":222,"line":650},[220,36665,2567],{"class":264},[220,36667,36602],{"class":346},[220,36669,359],{"class":264},[220,36671,36672,36674,36676],{"class":222,"line":656},[220,36673,402],{"class":264},[220,36675,347],{"class":346},[220,36677,359],{"class":264},[212,36679,36681],{"className":409,"code":36680,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,36682,36683,36691,36697,36709,36713,36721,36729],{"__ignoreMap":178},[220,36684,36685,36687,36689],{"class":222,"line":223},[220,36686,343],{"class":264},[220,36688,347],{"class":420},[220,36690,359],{"class":264},[220,36692,36693,36695],{"class":222,"line":179},[220,36694,364],{"class":264},[220,36696,36641],{"class":420},[220,36698,36699,36701,36703,36705,36707],{"class":222,"line":389},[220,36700,18744],{"class":226},[220,36702,353],{"class":260},[220,36704,743],{"class":264},[220,36706,23063],{"class":420},[220,36708,749],{"class":264},[220,36710,36711],{"class":222,"line":399},[220,36712,30240],{"class":264},[220,36714,36715,36717,36719],{"class":222,"line":644},[220,36716,2550],{"class":264},[220,36718,2553],{"class":420},[220,36720,386],{"class":264},[220,36722,36723,36725,36727],{"class":222,"line":650},[220,36724,2567],{"class":264},[220,36726,36602],{"class":420},[220,36728,359],{"class":264},[220,36730,36731,36733,36735],{"class":222,"line":656},[220,36732,402],{"class":264},[220,36734,347],{"class":420},[220,36736,359],{"class":264},[212,36738,36739],{"className":2844,"code":36680,"language":2846,"meta":178,"style":178},[99,36740,36741,36749,36755,36765,36769,36777,36785],{"__ignoreMap":178},[220,36742,36743,36745,36747],{"class":222,"line":223},[220,36744,343],{"class":264},[220,36746,347],{"class":420},[220,36748,359],{"class":264},[220,36750,36751,36753],{"class":222,"line":179},[220,36752,364],{"class":264},[220,36754,36641],{"class":420},[220,36756,36757,36759,36761,36763],{"class":222,"line":389},[220,36758,18744],{"class":226},[220,36760,28138],{"class":264},[220,36762,23063],{"class":420},[220,36764,749],{"class":264},[220,36766,36767],{"class":222,"line":399},[220,36768,30240],{"class":264},[220,36770,36771,36773,36775],{"class":222,"line":644},[220,36772,2550],{"class":264},[220,36774,2553],{"class":420},[220,36776,386],{"class":264},[220,36778,36779,36781,36783],{"class":222,"line":650},[220,36780,2567],{"class":264},[220,36782,36602],{"class":420},[220,36784,359],{"class":264},[220,36786,36787,36789,36791],{"class":222,"line":656},[220,36788,402],{"class":264},[220,36790,347],{"class":420},[220,36792,359],{"class":264},[212,36794,36795],{"className":468,"code":36680,"language":469,"meta":178,"style":178},[99,36796,36797,36805,36811,36823,36827,36835,36843],{"__ignoreMap":178},[220,36798,36799,36801,36803],{"class":222,"line":223},[220,36800,343],{"class":264},[220,36802,347],{"class":420},[220,36804,359],{"class":264},[220,36806,36807,36809],{"class":222,"line":179},[220,36808,364],{"class":264},[220,36810,36641],{"class":420},[220,36812,36813,36815,36817,36819,36821],{"class":222,"line":389},[220,36814,18744],{"class":226},[220,36816,353],{"class":260},[220,36818,743],{"class":264},[220,36820,23063],{"class":420},[220,36822,749],{"class":264},[220,36824,36825],{"class":222,"line":399},[220,36826,30240],{"class":264},[220,36828,36829,36831,36833],{"class":222,"line":644},[220,36830,2550],{"class":264},[220,36832,2553],{"class":420},[220,36834,386],{"class":264},[220,36836,36837,36839,36841],{"class":222,"line":650},[220,36838,2567],{"class":264},[220,36840,36602],{"class":420},[220,36842,359],{"class":264},[220,36844,36845,36847,36849],{"class":222,"line":656},[220,36846,402],{"class":264},[220,36848,347],{"class":420},[220,36850,359],{"class":264},[212,36852,36854],{"className":251,"code":36853,"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,36855,36856,36866,36870,36884,36888,36901,36909,36913,36917],{"__ignoreMap":178},[220,36857,36858,36860,36862,36864],{"class":222,"line":223},[220,36859,261],{"class":260},[220,36861,9763],{"class":264},[220,36863,268],{"class":260},[220,36865,9768],{"class":230},[220,36867,36868],{"class":222,"line":179},[220,36869,647],{"emptyLinePlaceholder":194},[220,36871,36872,36874,36876,36878,36880,36882],{"class":222,"line":389},[220,36873,1735],{"class":260},[220,36875,1738],{"class":420},[220,36877,1741],{"class":260},[220,36879,1744],{"class":260},[220,36881,1747],{"class":226},[220,36883,1750],{"class":264},[220,36885,36886],{"class":222,"line":399},[220,36887,1765],{"class":264},[220,36889,36890,36892,36895,36897,36899],{"class":222,"line":644},[220,36891,1770],{"class":264},[220,36893,36894],{"class":230},"'ConcentricSpin'",[220,36896,30484],{"class":264},[220,36898,23063],{"class":420},[220,36900,5792],{"class":264},[220,36902,36903,36905,36907],{"class":222,"line":650},[220,36904,5260],{"class":264},[220,36906,3206],{"class":230},[220,36908,2465],{"class":264},[220,36910,36911],{"class":222,"line":656},[220,36912,5277],{"class":264},[220,36914,36915],{"class":222,"line":673},[220,36916,1787],{"class":264},[220,36918,36919],{"class":222,"line":682},[220,36920,1792],{"class":264},[1504,36922,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36924},[36925,36926],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":36602,"description":36610},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":36933,"title":36934,"body":36935,"category":31344,"componentType":24141,"description":36942,"extension":191,"meta":37127,"navigation":194,"path":37128,"requiresChild":30811,"seo":37129,"stem":37130,"__hash__":37131},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":36936,"toc":37123},[36937,36940,36943,36945,36947,36950,36952,37121],[11,36938,36934],{"id":36939},"conicgradient",[15,36941,36942],{},"Colors sweep in a full circle around a center point, like a color wheel",[30192,36944],{"component":36934},[23,36946,30196],{"id":24798},[30198,36948],{":props":36949},"[{\"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,36951,30204],{"id":30203},[246,36953,36954,36983,37011,37039,37067],{":tabs":1557},[212,36955,36957],{"className":334,"code":36956,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,36958,36959,36967,36975],{"__ignoreMap":178},[220,36960,36961,36963,36965],{"class":222,"line":223},[220,36962,343],{"class":264},[220,36964,347],{"class":346},[220,36966,359],{"class":264},[220,36968,36969,36971,36973],{"class":222,"line":179},[220,36970,364],{"class":264},[220,36972,36934],{"class":346},[220,36974,386],{"class":264},[220,36976,36977,36979,36981],{"class":222,"line":389},[220,36978,402],{"class":264},[220,36980,347],{"class":346},[220,36982,359],{"class":264},[212,36984,36985],{"className":409,"code":36956,"language":411,"meta":178,"style":178},[99,36986,36987,36995,37003],{"__ignoreMap":178},[220,36988,36989,36991,36993],{"class":222,"line":223},[220,36990,343],{"class":264},[220,36992,347],{"class":420},[220,36994,359],{"class":264},[220,36996,36997,36999,37001],{"class":222,"line":179},[220,36998,364],{"class":264},[220,37000,36934],{"class":420},[220,37002,386],{"class":264},[220,37004,37005,37007,37009],{"class":222,"line":389},[220,37006,402],{"class":264},[220,37008,347],{"class":420},[220,37010,359],{"class":264},[212,37012,37013],{"className":2844,"code":36956,"language":2846,"meta":178,"style":178},[99,37014,37015,37023,37031],{"__ignoreMap":178},[220,37016,37017,37019,37021],{"class":222,"line":223},[220,37018,343],{"class":264},[220,37020,347],{"class":420},[220,37022,359],{"class":264},[220,37024,37025,37027,37029],{"class":222,"line":179},[220,37026,364],{"class":264},[220,37028,36934],{"class":420},[220,37030,386],{"class":264},[220,37032,37033,37035,37037],{"class":222,"line":389},[220,37034,402],{"class":264},[220,37036,347],{"class":420},[220,37038,359],{"class":264},[212,37040,37041],{"className":468,"code":36956,"language":469,"meta":178,"style":178},[99,37042,37043,37051,37059],{"__ignoreMap":178},[220,37044,37045,37047,37049],{"class":222,"line":223},[220,37046,343],{"class":264},[220,37048,347],{"class":420},[220,37050,359],{"class":264},[220,37052,37053,37055,37057],{"class":222,"line":179},[220,37054,364],{"class":264},[220,37056,36934],{"class":420},[220,37058,386],{"class":264},[220,37060,37061,37063,37065],{"class":222,"line":389},[220,37062,402],{"class":264},[220,37064,347],{"class":420},[220,37066,359],{"class":264},[212,37068,37070],{"className":251,"code":37069,"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,37071,37072,37082,37086,37100,37104,37113,37117],{"__ignoreMap":178},[220,37073,37074,37076,37078,37080],{"class":222,"line":223},[220,37075,261],{"class":260},[220,37077,9763],{"class":264},[220,37079,268],{"class":260},[220,37081,9768],{"class":230},[220,37083,37084],{"class":222,"line":179},[220,37085,647],{"emptyLinePlaceholder":194},[220,37087,37088,37090,37092,37094,37096,37098],{"class":222,"line":389},[220,37089,1735],{"class":260},[220,37091,1738],{"class":420},[220,37093,1741],{"class":260},[220,37095,1744],{"class":260},[220,37097,1747],{"class":226},[220,37099,1750],{"class":264},[220,37101,37102],{"class":222,"line":399},[220,37103,1765],{"class":264},[220,37105,37106,37108,37111],{"class":222,"line":644},[220,37107,1770],{"class":264},[220,37109,37110],{"class":230},"'ConicGradient'",[220,37112,2465],{"class":264},[220,37114,37115],{"class":222,"line":650},[220,37116,1787],{"class":264},[220,37118,37119],{"class":222,"line":656},[220,37120,1792],{"class":264},[1504,37122,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":37124},[37125,37126],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":36934,"description":36942},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":37133,"title":37134,"body":37135,"category":31087,"componentType":24147,"description":37142,"extension":191,"meta":37403,"navigation":194,"path":37404,"requiresChild":194,"seo":37405,"stem":37406,"__hash__":37407},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":37136,"toc":37399},[37137,37140,37143,37145,37147,37150,37152,37397],[11,37138,37134],{"id":37139},"contourlines",[15,37141,37142],{},"Draw topographical contour lines based on luminance or alpha",[30192,37144],{"component":37134},[23,37146,30196],{"id":24798},[30198,37148],{":props":37149},"[{\"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,37151,30204],{"id":30203},[246,37153,37154,37199,37243,37287,37331],{":tabs":1557},[212,37155,37157],{"className":334,"code":37156,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,37158,37159,37167,37175,37183,37191],{"__ignoreMap":178},[220,37160,37161,37163,37165],{"class":222,"line":223},[220,37162,343],{"class":264},[220,37164,347],{"class":346},[220,37166,359],{"class":264},[220,37168,37169,37171,37173],{"class":222,"line":179},[220,37170,364],{"class":264},[220,37172,37134],{"class":346},[220,37174,359],{"class":264},[220,37176,37177,37179,37181],{"class":222,"line":389},[220,37178,2550],{"class":264},[220,37180,2553],{"class":346},[220,37182,386],{"class":264},[220,37184,37185,37187,37189],{"class":222,"line":399},[220,37186,2567],{"class":264},[220,37188,37134],{"class":346},[220,37190,359],{"class":264},[220,37192,37193,37195,37197],{"class":222,"line":644},[220,37194,402],{"class":264},[220,37196,347],{"class":346},[220,37198,359],{"class":264},[212,37200,37201],{"className":409,"code":37156,"language":411,"meta":178,"style":178},[99,37202,37203,37211,37219,37227,37235],{"__ignoreMap":178},[220,37204,37205,37207,37209],{"class":222,"line":223},[220,37206,343],{"class":264},[220,37208,347],{"class":420},[220,37210,359],{"class":264},[220,37212,37213,37215,37217],{"class":222,"line":179},[220,37214,364],{"class":264},[220,37216,37134],{"class":420},[220,37218,359],{"class":264},[220,37220,37221,37223,37225],{"class":222,"line":389},[220,37222,2550],{"class":264},[220,37224,2553],{"class":420},[220,37226,386],{"class":264},[220,37228,37229,37231,37233],{"class":222,"line":399},[220,37230,2567],{"class":264},[220,37232,37134],{"class":420},[220,37234,359],{"class":264},[220,37236,37237,37239,37241],{"class":222,"line":644},[220,37238,402],{"class":264},[220,37240,347],{"class":420},[220,37242,359],{"class":264},[212,37244,37245],{"className":2844,"code":37156,"language":2846,"meta":178,"style":178},[99,37246,37247,37255,37263,37271,37279],{"__ignoreMap":178},[220,37248,37249,37251,37253],{"class":222,"line":223},[220,37250,343],{"class":264},[220,37252,347],{"class":420},[220,37254,359],{"class":264},[220,37256,37257,37259,37261],{"class":222,"line":179},[220,37258,364],{"class":264},[220,37260,37134],{"class":420},[220,37262,359],{"class":264},[220,37264,37265,37267,37269],{"class":222,"line":389},[220,37266,2550],{"class":264},[220,37268,2553],{"class":420},[220,37270,386],{"class":264},[220,37272,37273,37275,37277],{"class":222,"line":399},[220,37274,2567],{"class":264},[220,37276,37134],{"class":420},[220,37278,359],{"class":264},[220,37280,37281,37283,37285],{"class":222,"line":644},[220,37282,402],{"class":264},[220,37284,347],{"class":420},[220,37286,359],{"class":264},[212,37288,37289],{"className":468,"code":37156,"language":469,"meta":178,"style":178},[99,37290,37291,37299,37307,37315,37323],{"__ignoreMap":178},[220,37292,37293,37295,37297],{"class":222,"line":223},[220,37294,343],{"class":264},[220,37296,347],{"class":420},[220,37298,359],{"class":264},[220,37300,37301,37303,37305],{"class":222,"line":179},[220,37302,364],{"class":264},[220,37304,37134],{"class":420},[220,37306,359],{"class":264},[220,37308,37309,37311,37313],{"class":222,"line":389},[220,37310,2550],{"class":264},[220,37312,2553],{"class":420},[220,37314,386],{"class":264},[220,37316,37317,37319,37321],{"class":222,"line":399},[220,37318,2567],{"class":264},[220,37320,37134],{"class":420},[220,37322,359],{"class":264},[220,37324,37325,37327,37329],{"class":222,"line":644},[220,37326,402],{"class":264},[220,37328,347],{"class":420},[220,37330,359],{"class":264},[212,37332,37334],{"className":251,"code":37333,"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,37335,37336,37346,37350,37364,37368,37377,37385,37389,37393],{"__ignoreMap":178},[220,37337,37338,37340,37342,37344],{"class":222,"line":223},[220,37339,261],{"class":260},[220,37341,9763],{"class":264},[220,37343,268],{"class":260},[220,37345,9768],{"class":230},[220,37347,37348],{"class":222,"line":179},[220,37349,647],{"emptyLinePlaceholder":194},[220,37351,37352,37354,37356,37358,37360,37362],{"class":222,"line":389},[220,37353,1735],{"class":260},[220,37355,1738],{"class":420},[220,37357,1741],{"class":260},[220,37359,1744],{"class":260},[220,37361,1747],{"class":226},[220,37363,1750],{"class":264},[220,37365,37366],{"class":222,"line":399},[220,37367,1765],{"class":264},[220,37369,37370,37372,37375],{"class":222,"line":644},[220,37371,1770],{"class":264},[220,37373,37374],{"class":230},"'ContourLines'",[220,37376,5255],{"class":264},[220,37378,37379,37381,37383],{"class":222,"line":650},[220,37380,5260],{"class":264},[220,37382,3206],{"class":230},[220,37384,2465],{"class":264},[220,37386,37387],{"class":222,"line":656},[220,37388,5277],{"class":264},[220,37390,37391],{"class":222,"line":673},[220,37392,1787],{"class":264},[220,37394,37395],{"class":222,"line":682},[220,37396,1792],{"class":264},[1504,37398,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":37400},[37401,37402],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":37134,"description":37142},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":37409,"title":37410,"body":37411,"category":31677,"componentType":24147,"description":37418,"extension":191,"meta":37679,"navigation":194,"path":37680,"requiresChild":194,"seo":37681,"stem":37682,"__hash__":37683},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":37412,"toc":37675},[37413,37416,37419,37421,37423,37426,37428,37673],[11,37414,37410],{"id":37415},"cornerpin",[15,37417,37418],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[30192,37420],{"component":37410},[23,37422,30196],{"id":24798},[30198,37424],{":props":37425},"[{\"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,37427,30204],{"id":30203},[246,37429,37430,37475,37519,37563,37607],{":tabs":1557},[212,37431,37433],{"className":334,"code":37432,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,37434,37435,37443,37451,37459,37467],{"__ignoreMap":178},[220,37436,37437,37439,37441],{"class":222,"line":223},[220,37438,343],{"class":264},[220,37440,347],{"class":346},[220,37442,359],{"class":264},[220,37444,37445,37447,37449],{"class":222,"line":179},[220,37446,364],{"class":264},[220,37448,37410],{"class":346},[220,37450,359],{"class":264},[220,37452,37453,37455,37457],{"class":222,"line":389},[220,37454,2550],{"class":264},[220,37456,2553],{"class":346},[220,37458,386],{"class":264},[220,37460,37461,37463,37465],{"class":222,"line":399},[220,37462,2567],{"class":264},[220,37464,37410],{"class":346},[220,37466,359],{"class":264},[220,37468,37469,37471,37473],{"class":222,"line":644},[220,37470,402],{"class":264},[220,37472,347],{"class":346},[220,37474,359],{"class":264},[212,37476,37477],{"className":409,"code":37432,"language":411,"meta":178,"style":178},[99,37478,37479,37487,37495,37503,37511],{"__ignoreMap":178},[220,37480,37481,37483,37485],{"class":222,"line":223},[220,37482,343],{"class":264},[220,37484,347],{"class":420},[220,37486,359],{"class":264},[220,37488,37489,37491,37493],{"class":222,"line":179},[220,37490,364],{"class":264},[220,37492,37410],{"class":420},[220,37494,359],{"class":264},[220,37496,37497,37499,37501],{"class":222,"line":389},[220,37498,2550],{"class":264},[220,37500,2553],{"class":420},[220,37502,386],{"class":264},[220,37504,37505,37507,37509],{"class":222,"line":399},[220,37506,2567],{"class":264},[220,37508,37410],{"class":420},[220,37510,359],{"class":264},[220,37512,37513,37515,37517],{"class":222,"line":644},[220,37514,402],{"class":264},[220,37516,347],{"class":420},[220,37518,359],{"class":264},[212,37520,37521],{"className":2844,"code":37432,"language":2846,"meta":178,"style":178},[99,37522,37523,37531,37539,37547,37555],{"__ignoreMap":178},[220,37524,37525,37527,37529],{"class":222,"line":223},[220,37526,343],{"class":264},[220,37528,347],{"class":420},[220,37530,359],{"class":264},[220,37532,37533,37535,37537],{"class":222,"line":179},[220,37534,364],{"class":264},[220,37536,37410],{"class":420},[220,37538,359],{"class":264},[220,37540,37541,37543,37545],{"class":222,"line":389},[220,37542,2550],{"class":264},[220,37544,2553],{"class":420},[220,37546,386],{"class":264},[220,37548,37549,37551,37553],{"class":222,"line":399},[220,37550,2567],{"class":264},[220,37552,37410],{"class":420},[220,37554,359],{"class":264},[220,37556,37557,37559,37561],{"class":222,"line":644},[220,37558,402],{"class":264},[220,37560,347],{"class":420},[220,37562,359],{"class":264},[212,37564,37565],{"className":468,"code":37432,"language":469,"meta":178,"style":178},[99,37566,37567,37575,37583,37591,37599],{"__ignoreMap":178},[220,37568,37569,37571,37573],{"class":222,"line":223},[220,37570,343],{"class":264},[220,37572,347],{"class":420},[220,37574,359],{"class":264},[220,37576,37577,37579,37581],{"class":222,"line":179},[220,37578,364],{"class":264},[220,37580,37410],{"class":420},[220,37582,359],{"class":264},[220,37584,37585,37587,37589],{"class":222,"line":389},[220,37586,2550],{"class":264},[220,37588,2553],{"class":420},[220,37590,386],{"class":264},[220,37592,37593,37595,37597],{"class":222,"line":399},[220,37594,2567],{"class":264},[220,37596,37410],{"class":420},[220,37598,359],{"class":264},[220,37600,37601,37603,37605],{"class":222,"line":644},[220,37602,402],{"class":264},[220,37604,347],{"class":420},[220,37606,359],{"class":264},[212,37608,37610],{"className":251,"code":37609,"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,37611,37612,37622,37626,37640,37644,37653,37661,37665,37669],{"__ignoreMap":178},[220,37613,37614,37616,37618,37620],{"class":222,"line":223},[220,37615,261],{"class":260},[220,37617,9763],{"class":264},[220,37619,268],{"class":260},[220,37621,9768],{"class":230},[220,37623,37624],{"class":222,"line":179},[220,37625,647],{"emptyLinePlaceholder":194},[220,37627,37628,37630,37632,37634,37636,37638],{"class":222,"line":389},[220,37629,1735],{"class":260},[220,37631,1738],{"class":420},[220,37633,1741],{"class":260},[220,37635,1744],{"class":260},[220,37637,1747],{"class":226},[220,37639,1750],{"class":264},[220,37641,37642],{"class":222,"line":399},[220,37643,1765],{"class":264},[220,37645,37646,37648,37651],{"class":222,"line":644},[220,37647,1770],{"class":264},[220,37649,37650],{"class":230},"'CornerPin'",[220,37652,5255],{"class":264},[220,37654,37655,37657,37659],{"class":222,"line":650},[220,37656,5260],{"class":264},[220,37658,3206],{"class":230},[220,37660,2465],{"class":264},[220,37662,37663],{"class":222,"line":656},[220,37664,5277],{"class":264},[220,37666,37667],{"class":222,"line":673},[220,37668,1787],{"class":264},[220,37670,37671],{"class":222,"line":682},[220,37672,1792],{"class":264},[1504,37674,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":37676},[37677,37678],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":37410,"description":37418},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":37685,"title":37686,"body":37687,"category":14164,"componentType":24141,"description":37694,"extension":191,"meta":37972,"navigation":194,"path":37973,"requiresChild":30811,"seo":37974,"stem":37975,"__hash__":37976},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":37688,"toc":37968},[37689,37692,37695,37697,37699,37702,37704,37966],[11,37690,37686],{"id":37691},"crescent",[15,37693,37694],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[30192,37696],{"component":37686},[23,37698,30196],{"id":24798},[30198,37700],{":props":37701},"[{\"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,37703,30204],{"id":30203},[246,37705,37706,37755,37806,37854,37904],{":tabs":1557},[212,37707,37709],{"className":334,"code":37708,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,37710,37711,37719,37726,37734,37743,37747],{"__ignoreMap":178},[220,37712,37713,37715,37717],{"class":222,"line":223},[220,37714,343],{"class":264},[220,37716,347],{"class":346},[220,37718,359],{"class":264},[220,37720,37721,37723],{"class":222,"line":179},[220,37722,364],{"class":264},[220,37724,37725],{"class":346},"Crescent\n",[220,37727,37728,37730,37732],{"class":222,"line":389},[220,37729,7882],{"class":226},[220,37731,353],{"class":264},[220,37733,7838],{"class":230},[220,37735,37736,37738,37740],{"class":222,"line":399},[220,37737,15666],{"class":226},[220,37739,353],{"class":264},[220,37741,37742],{"class":230},"\"0.3\"\n",[220,37744,37745],{"class":222,"line":644},[220,37746,1234],{"class":264},[220,37748,37749,37751,37753],{"class":222,"line":650},[220,37750,402],{"class":264},[220,37752,347],{"class":346},[220,37754,359],{"class":264},[212,37756,37758],{"className":409,"code":37757,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,37759,37760,37768,37774,37782,37794,37798],{"__ignoreMap":178},[220,37761,37762,37764,37766],{"class":222,"line":223},[220,37763,343],{"class":264},[220,37765,347],{"class":420},[220,37767,359],{"class":264},[220,37769,37770,37772],{"class":222,"line":179},[220,37771,364],{"class":264},[220,37773,37725],{"class":420},[220,37775,37776,37778,37780],{"class":222,"line":389},[220,37777,7882],{"class":226},[220,37779,353],{"class":260},[220,37781,7838],{"class":230},[220,37783,37784,37786,37788,37790,37792],{"class":222,"line":399},[220,37785,7892],{"class":226},[220,37787,353],{"class":260},[220,37789,743],{"class":264},[220,37791,20266],{"class":420},[220,37793,749],{"class":264},[220,37795,37796],{"class":222,"line":644},[220,37797,1234],{"class":264},[220,37799,37800,37802,37804],{"class":222,"line":650},[220,37801,402],{"class":264},[220,37803,347],{"class":420},[220,37805,359],{"class":264},[212,37807,37808],{"className":2844,"code":37757,"language":2846,"meta":178,"style":178},[99,37809,37810,37818,37824,37832,37842,37846],{"__ignoreMap":178},[220,37811,37812,37814,37816],{"class":222,"line":223},[220,37813,343],{"class":264},[220,37815,347],{"class":420},[220,37817,359],{"class":264},[220,37819,37820,37822],{"class":222,"line":179},[220,37821,364],{"class":264},[220,37823,37725],{"class":420},[220,37825,37826,37828,37830],{"class":222,"line":389},[220,37827,7882],{"class":226},[220,37829,353],{"class":264},[220,37831,7838],{"class":230},[220,37833,37834,37836,37838,37840],{"class":222,"line":399},[220,37835,7892],{"class":226},[220,37837,28138],{"class":264},[220,37839,20266],{"class":420},[220,37841,749],{"class":264},[220,37843,37844],{"class":222,"line":644},[220,37845,1234],{"class":264},[220,37847,37848,37850,37852],{"class":222,"line":650},[220,37849,402],{"class":264},[220,37851,347],{"class":420},[220,37853,359],{"class":264},[212,37855,37856],{"className":468,"code":37757,"language":469,"meta":178,"style":178},[99,37857,37858,37866,37872,37880,37892,37896],{"__ignoreMap":178},[220,37859,37860,37862,37864],{"class":222,"line":223},[220,37861,343],{"class":264},[220,37863,347],{"class":420},[220,37865,359],{"class":264},[220,37867,37868,37870],{"class":222,"line":179},[220,37869,364],{"class":264},[220,37871,37725],{"class":420},[220,37873,37874,37876,37878],{"class":222,"line":389},[220,37875,7882],{"class":226},[220,37877,353],{"class":260},[220,37879,7838],{"class":230},[220,37881,37882,37884,37886,37888,37890],{"class":222,"line":399},[220,37883,7892],{"class":226},[220,37885,353],{"class":260},[220,37887,743],{"class":264},[220,37889,20266],{"class":420},[220,37891,749],{"class":264},[220,37893,37894],{"class":222,"line":644},[220,37895,1234],{"class":264},[220,37897,37898,37900,37902],{"class":222,"line":650},[220,37899,402],{"class":264},[220,37901,347],{"class":420},[220,37903,359],{"class":264},[212,37905,37907],{"className":251,"code":37906,"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,37908,37909,37919,37923,37937,37941,37958,37962],{"__ignoreMap":178},[220,37910,37911,37913,37915,37917],{"class":222,"line":223},[220,37912,261],{"class":260},[220,37914,9763],{"class":264},[220,37916,268],{"class":260},[220,37918,9768],{"class":230},[220,37920,37921],{"class":222,"line":179},[220,37922,647],{"emptyLinePlaceholder":194},[220,37924,37925,37927,37929,37931,37933,37935],{"class":222,"line":389},[220,37926,1735],{"class":260},[220,37928,1738],{"class":420},[220,37930,1741],{"class":260},[220,37932,1744],{"class":260},[220,37934,1747],{"class":226},[220,37936,1750],{"class":264},[220,37938,37939],{"class":222,"line":399},[220,37940,1765],{"class":264},[220,37942,37943,37945,37948,37950,37952,37954,37956],{"class":222,"line":644},[220,37944,1770],{"class":264},[220,37946,37947],{"class":230},"'Crescent'",[220,37949,1776],{"class":264},[220,37951,8417],{"class":230},[220,37953,4812],{"class":264},[220,37955,20266],{"class":420},[220,37957,1782],{"class":264},[220,37959,37960],{"class":222,"line":650},[220,37961,1787],{"class":264},[220,37963,37964],{"class":222,"line":656},[220,37965,1792],{"class":264},[1504,37967,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":37969},[37970,37971],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":37686,"description":37694},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":37978,"title":37979,"body":37980,"category":14164,"componentType":24141,"description":37987,"extension":191,"meta":38265,"navigation":194,"path":38266,"requiresChild":30811,"seo":38267,"stem":38268,"__hash__":38269},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":37981,"toc":38261},[37982,37985,37988,37990,37992,37995,37997,38259],[11,37983,37979],{"id":37984},"cross",[15,37986,37987],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[30192,37989],{"component":37979},[23,37991,30196],{"id":24798},[30198,37993],{":props":37994},"[{\"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,37996,30204],{"id":30203},[246,37998,37999,38048,38099,38147,38197],{":tabs":1557},[212,38000,38002],{"className":334,"code":38001,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,38003,38004,38012,38019,38027,38036,38040],{"__ignoreMap":178},[220,38005,38006,38008,38010],{"class":222,"line":223},[220,38007,343],{"class":264},[220,38009,347],{"class":346},[220,38011,359],{"class":264},[220,38013,38014,38016],{"class":222,"line":179},[220,38015,364],{"class":264},[220,38017,38018],{"class":346},"Cross\n",[220,38020,38021,38023,38025],{"class":222,"line":389},[220,38022,7882],{"class":226},[220,38024,353],{"class":264},[220,38026,7838],{"class":230},[220,38028,38029,38031,38033],{"class":222,"line":399},[220,38030,15666],{"class":226},[220,38032,353],{"class":264},[220,38034,38035],{"class":230},"\"0.35\"\n",[220,38037,38038],{"class":222,"line":644},[220,38039,1234],{"class":264},[220,38041,38042,38044,38046],{"class":222,"line":650},[220,38043,402],{"class":264},[220,38045,347],{"class":346},[220,38047,359],{"class":264},[212,38049,38051],{"className":409,"code":38050,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,38052,38053,38061,38067,38075,38087,38091],{"__ignoreMap":178},[220,38054,38055,38057,38059],{"class":222,"line":223},[220,38056,343],{"class":264},[220,38058,347],{"class":420},[220,38060,359],{"class":264},[220,38062,38063,38065],{"class":222,"line":179},[220,38064,364],{"class":264},[220,38066,38018],{"class":420},[220,38068,38069,38071,38073],{"class":222,"line":389},[220,38070,7882],{"class":226},[220,38072,353],{"class":260},[220,38074,7838],{"class":230},[220,38076,38077,38079,38081,38083,38085],{"class":222,"line":399},[220,38078,7892],{"class":226},[220,38080,353],{"class":260},[220,38082,743],{"class":264},[220,38084,19410],{"class":420},[220,38086,749],{"class":264},[220,38088,38089],{"class":222,"line":644},[220,38090,1234],{"class":264},[220,38092,38093,38095,38097],{"class":222,"line":650},[220,38094,402],{"class":264},[220,38096,347],{"class":420},[220,38098,359],{"class":264},[212,38100,38101],{"className":2844,"code":38050,"language":2846,"meta":178,"style":178},[99,38102,38103,38111,38117,38125,38135,38139],{"__ignoreMap":178},[220,38104,38105,38107,38109],{"class":222,"line":223},[220,38106,343],{"class":264},[220,38108,347],{"class":420},[220,38110,359],{"class":264},[220,38112,38113,38115],{"class":222,"line":179},[220,38114,364],{"class":264},[220,38116,38018],{"class":420},[220,38118,38119,38121,38123],{"class":222,"line":389},[220,38120,7882],{"class":226},[220,38122,353],{"class":264},[220,38124,7838],{"class":230},[220,38126,38127,38129,38131,38133],{"class":222,"line":399},[220,38128,7892],{"class":226},[220,38130,28138],{"class":264},[220,38132,19410],{"class":420},[220,38134,749],{"class":264},[220,38136,38137],{"class":222,"line":644},[220,38138,1234],{"class":264},[220,38140,38141,38143,38145],{"class":222,"line":650},[220,38142,402],{"class":264},[220,38144,347],{"class":420},[220,38146,359],{"class":264},[212,38148,38149],{"className":468,"code":38050,"language":469,"meta":178,"style":178},[99,38150,38151,38159,38165,38173,38185,38189],{"__ignoreMap":178},[220,38152,38153,38155,38157],{"class":222,"line":223},[220,38154,343],{"class":264},[220,38156,347],{"class":420},[220,38158,359],{"class":264},[220,38160,38161,38163],{"class":222,"line":179},[220,38162,364],{"class":264},[220,38164,38018],{"class":420},[220,38166,38167,38169,38171],{"class":222,"line":389},[220,38168,7882],{"class":226},[220,38170,353],{"class":260},[220,38172,7838],{"class":230},[220,38174,38175,38177,38179,38181,38183],{"class":222,"line":399},[220,38176,7892],{"class":226},[220,38178,353],{"class":260},[220,38180,743],{"class":264},[220,38182,19410],{"class":420},[220,38184,749],{"class":264},[220,38186,38187],{"class":222,"line":644},[220,38188,1234],{"class":264},[220,38190,38191,38193,38195],{"class":222,"line":650},[220,38192,402],{"class":264},[220,38194,347],{"class":420},[220,38196,359],{"class":264},[212,38198,38200],{"className":251,"code":38199,"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,38201,38202,38212,38216,38230,38234,38251,38255],{"__ignoreMap":178},[220,38203,38204,38206,38208,38210],{"class":222,"line":223},[220,38205,261],{"class":260},[220,38207,9763],{"class":264},[220,38209,268],{"class":260},[220,38211,9768],{"class":230},[220,38213,38214],{"class":222,"line":179},[220,38215,647],{"emptyLinePlaceholder":194},[220,38217,38218,38220,38222,38224,38226,38228],{"class":222,"line":389},[220,38219,1735],{"class":260},[220,38221,1738],{"class":420},[220,38223,1741],{"class":260},[220,38225,1744],{"class":260},[220,38227,1747],{"class":226},[220,38229,1750],{"class":264},[220,38231,38232],{"class":222,"line":399},[220,38233,1765],{"class":264},[220,38235,38236,38238,38241,38243,38245,38247,38249],{"class":222,"line":644},[220,38237,1770],{"class":264},[220,38239,38240],{"class":230},"'Cross'",[220,38242,1776],{"class":264},[220,38244,8417],{"class":230},[220,38246,4812],{"class":264},[220,38248,19410],{"class":420},[220,38250,1782],{"class":264},[220,38252,38253],{"class":222,"line":650},[220,38254,1787],{"class":264},[220,38256,38257],{"class":222,"line":656},[220,38258,1792],{"class":264},[1504,38260,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38262},[38263,38264],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":37979,"description":37987},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":38271,"title":21434,"body":38272,"category":33488,"componentType":24147,"description":38279,"extension":191,"meta":38540,"navigation":194,"path":38541,"requiresChild":194,"seo":38542,"stem":38543,"__hash__":38544},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":38273,"toc":38536},[38274,38277,38280,38282,38284,38287,38289,38534],[11,38275,21434],{"id":38276},"crystal",[15,38278,38279],{},"Diamond-like crystal lens with faceted refraction.",[30192,38281],{"component":21434},[23,38283,30196],{"id":24798},[30198,38285],{":props":38286},"[{\"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,38288,30204],{"id":30203},[246,38290,38291,38336,38380,38424,38468],{":tabs":1557},[212,38292,38294],{"className":334,"code":38293,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,38295,38296,38304,38312,38320,38328],{"__ignoreMap":178},[220,38297,38298,38300,38302],{"class":222,"line":223},[220,38299,343],{"class":264},[220,38301,347],{"class":346},[220,38303,359],{"class":264},[220,38305,38306,38308,38310],{"class":222,"line":179},[220,38307,364],{"class":264},[220,38309,21434],{"class":346},[220,38311,359],{"class":264},[220,38313,38314,38316,38318],{"class":222,"line":389},[220,38315,2550],{"class":264},[220,38317,2553],{"class":346},[220,38319,386],{"class":264},[220,38321,38322,38324,38326],{"class":222,"line":399},[220,38323,2567],{"class":264},[220,38325,21434],{"class":346},[220,38327,359],{"class":264},[220,38329,38330,38332,38334],{"class":222,"line":644},[220,38331,402],{"class":264},[220,38333,347],{"class":346},[220,38335,359],{"class":264},[212,38337,38338],{"className":409,"code":38293,"language":411,"meta":178,"style":178},[99,38339,38340,38348,38356,38364,38372],{"__ignoreMap":178},[220,38341,38342,38344,38346],{"class":222,"line":223},[220,38343,343],{"class":264},[220,38345,347],{"class":420},[220,38347,359],{"class":264},[220,38349,38350,38352,38354],{"class":222,"line":179},[220,38351,364],{"class":264},[220,38353,21434],{"class":420},[220,38355,359],{"class":264},[220,38357,38358,38360,38362],{"class":222,"line":389},[220,38359,2550],{"class":264},[220,38361,2553],{"class":420},[220,38363,386],{"class":264},[220,38365,38366,38368,38370],{"class":222,"line":399},[220,38367,2567],{"class":264},[220,38369,21434],{"class":420},[220,38371,359],{"class":264},[220,38373,38374,38376,38378],{"class":222,"line":644},[220,38375,402],{"class":264},[220,38377,347],{"class":420},[220,38379,359],{"class":264},[212,38381,38382],{"className":2844,"code":38293,"language":2846,"meta":178,"style":178},[99,38383,38384,38392,38400,38408,38416],{"__ignoreMap":178},[220,38385,38386,38388,38390],{"class":222,"line":223},[220,38387,343],{"class":264},[220,38389,347],{"class":420},[220,38391,359],{"class":264},[220,38393,38394,38396,38398],{"class":222,"line":179},[220,38395,364],{"class":264},[220,38397,21434],{"class":420},[220,38399,359],{"class":264},[220,38401,38402,38404,38406],{"class":222,"line":389},[220,38403,2550],{"class":264},[220,38405,2553],{"class":420},[220,38407,386],{"class":264},[220,38409,38410,38412,38414],{"class":222,"line":399},[220,38411,2567],{"class":264},[220,38413,21434],{"class":420},[220,38415,359],{"class":264},[220,38417,38418,38420,38422],{"class":222,"line":644},[220,38419,402],{"class":264},[220,38421,347],{"class":420},[220,38423,359],{"class":264},[212,38425,38426],{"className":468,"code":38293,"language":469,"meta":178,"style":178},[99,38427,38428,38436,38444,38452,38460],{"__ignoreMap":178},[220,38429,38430,38432,38434],{"class":222,"line":223},[220,38431,343],{"class":264},[220,38433,347],{"class":420},[220,38435,359],{"class":264},[220,38437,38438,38440,38442],{"class":222,"line":179},[220,38439,364],{"class":264},[220,38441,21434],{"class":420},[220,38443,359],{"class":264},[220,38445,38446,38448,38450],{"class":222,"line":389},[220,38447,2550],{"class":264},[220,38449,2553],{"class":420},[220,38451,386],{"class":264},[220,38453,38454,38456,38458],{"class":222,"line":399},[220,38455,2567],{"class":264},[220,38457,21434],{"class":420},[220,38459,359],{"class":264},[220,38461,38462,38464,38466],{"class":222,"line":644},[220,38463,402],{"class":264},[220,38465,347],{"class":420},[220,38467,359],{"class":264},[212,38469,38471],{"className":251,"code":38470,"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,38472,38473,38483,38487,38501,38505,38514,38522,38526,38530],{"__ignoreMap":178},[220,38474,38475,38477,38479,38481],{"class":222,"line":223},[220,38476,261],{"class":260},[220,38478,9763],{"class":264},[220,38480,268],{"class":260},[220,38482,9768],{"class":230},[220,38484,38485],{"class":222,"line":179},[220,38486,647],{"emptyLinePlaceholder":194},[220,38488,38489,38491,38493,38495,38497,38499],{"class":222,"line":389},[220,38490,1735],{"class":260},[220,38492,1738],{"class":420},[220,38494,1741],{"class":260},[220,38496,1744],{"class":260},[220,38498,1747],{"class":226},[220,38500,1750],{"class":264},[220,38502,38503],{"class":222,"line":399},[220,38504,1765],{"class":264},[220,38506,38507,38509,38512],{"class":222,"line":644},[220,38508,1770],{"class":264},[220,38510,38511],{"class":230},"'Crystal'",[220,38513,5255],{"class":264},[220,38515,38516,38518,38520],{"class":222,"line":650},[220,38517,5260],{"class":264},[220,38519,3206],{"class":230},[220,38521,2465],{"class":264},[220,38523,38524],{"class":222,"line":656},[220,38525,5277],{"class":264},[220,38527,38528],{"class":222,"line":673},[220,38529,1787],{"class":264},[220,38531,38532],{"class":222,"line":682},[220,38533,1792],{"class":264},[1504,38535,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":38537},[38538,38539],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":21434,"description":38279},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":38546,"title":38547,"body":38548,"category":31344,"componentType":24141,"description":38555,"extension":191,"meta":38739,"navigation":194,"path":38740,"requiresChild":30811,"seo":38741,"stem":38742,"__hash__":38743},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":38549,"toc":38735},[38550,38553,38556,38558,38560,38562,38564,38733],[11,38551,38547],{"id":38552},"curlnoise",[15,38554,38555],{},"Swirling divergence-free flow field that drifts over time",[30192,38557],{"component":38547},[23,38559,30196],{"id":24798},[30198,38561],{":props":32100},[23,38563,30204],{"id":30203},[246,38565,38566,38595,38623,38651,38679],{":tabs":1557},[212,38567,38569],{"className":334,"code":38568,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,38570,38571,38579,38587],{"__ignoreMap":178},[220,38572,38573,38575,38577],{"class":222,"line":223},[220,38574,343],{"class":264},[220,38576,347],{"class":346},[220,38578,359],{"class":264},[220,38580,38581,38583,38585],{"class":222,"line":179},[220,38582,364],{"class":264},[220,38584,38547],{"class":346},[220,38586,386],{"class":264},[220,38588,38589,38591,38593],{"class":222,"line":389},[220,38590,402],{"class":264},[220,38592,347],{"class":346},[220,38594,359],{"class":264},[212,38596,38597],{"className":409,"code":38568,"language":411,"meta":178,"style":178},[99,38598,38599,38607,38615],{"__ignoreMap":178},[220,38600,38601,38603,38605],{"class":222,"line":223},[220,38602,343],{"class":264},[220,38604,347],{"class":420},[220,38606,359],{"class":264},[220,38608,38609,38611,38613],{"class":222,"line":179},[220,38610,364],{"class":264},[220,38612,38547],{"class":420},[220,38614,386],{"class":264},[220,38616,38617,38619,38621],{"class":222,"line":389},[220,38618,402],{"class":264},[220,38620,347],{"class":420},[220,38622,359],{"class":264},[212,38624,38625],{"className":2844,"code":38568,"language":2846,"meta":178,"style":178},[99,38626,38627,38635,38643],{"__ignoreMap":178},[220,38628,38629,38631,38633],{"class":222,"line":223},[220,38630,343],{"class":264},[220,38632,347],{"class":420},[220,38634,359],{"class":264},[220,38636,38637,38639,38641],{"class":222,"line":179},[220,38638,364],{"class":264},[220,38640,38547],{"class":420},[220,38642,386],{"class":264},[220,38644,38645,38647,38649],{"class":222,"line":389},[220,38646,402],{"class":264},[220,38648,347],{"class":420},[220,38650,359],{"class":264},[212,38652,38653],{"className":468,"code":38568,"language":469,"meta":178,"style":178},[99,38654,38655,38663,38671],{"__ignoreMap":178},[220,38656,38657,38659,38661],{"class":222,"line":223},[220,38658,343],{"class":264},[220,38660,347],{"class":420},[220,38662,359],{"class":264},[220,38664,38665,38667,38669],{"class":222,"line":179},[220,38666,364],{"class":264},[220,38668,38547],{"class":420},[220,38670,386],{"class":264},[220,38672,38673,38675,38677],{"class":222,"line":389},[220,38674,402],{"class":264},[220,38676,347],{"class":420},[220,38678,359],{"class":264},[212,38680,38682],{"className":251,"code":38681,"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,38683,38684,38694,38698,38712,38716,38725,38729],{"__ignoreMap":178},[220,38685,38686,38688,38690,38692],{"class":222,"line":223},[220,38687,261],{"class":260},[220,38689,9763],{"class":264},[220,38691,268],{"class":260},[220,38693,9768],{"class":230},[220,38695,38696],{"class":222,"line":179},[220,38697,647],{"emptyLinePlaceholder":194},[220,38699,38700,38702,38704,38706,38708,38710],{"class":222,"line":389},[220,38701,1735],{"class":260},[220,38703,1738],{"class":420},[220,38705,1741],{"class":260},[220,38707,1744],{"class":260},[220,38709,1747],{"class":226},[220,38711,1750],{"class":264},[220,38713,38714],{"class":222,"line":399},[220,38715,1765],{"class":264},[220,38717,38718,38720,38723],{"class":222,"line":644},[220,38719,1770],{"class":264},[220,38721,38722],{"class":230},"'CurlNoise'",[220,38724,2465],{"class":264},[220,38726,38727],{"class":222,"line":650},[220,38728,1787],{"class":264},[220,38730,38731],{"class":222,"line":656},[220,38732,1792],{"class":264},[1504,38734,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":38736},[38737,38738],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":38547,"description":38555},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":38745,"title":12681,"body":38746,"category":35553,"componentType":24147,"description":38753,"extension":191,"meta":39118,"navigation":194,"path":39119,"requiresChild":194,"seo":39120,"stem":39121,"__hash__":39122},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":38747,"toc":39114},[38748,38751,38754,38756,38758,38761,38763,39112],[11,38749,12681],{"id":38750},"cursorripples",[15,38752,38753],{},"Fluid-like ripple distortion",[30192,38755],{"component":12681},[23,38757,30196],{"id":24798},[30198,38759],{":props":38760},"[{\"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,38762,30204],{"id":30203},[246,38764,38765,38831,38902,38968,39038],{":tabs":1557},[212,38766,38768],{"className":334,"code":38767,"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,38769,38770,38778,38785,38794,38803,38807,38815,38823],{"__ignoreMap":178},[220,38771,38772,38774,38776],{"class":222,"line":223},[220,38773,343],{"class":264},[220,38775,347],{"class":346},[220,38777,359],{"class":264},[220,38779,38780,38782],{"class":222,"line":179},[220,38781,364],{"class":264},[220,38783,38784],{"class":346},"CursorRipples\n",[220,38786,38787,38789,38791],{"class":222,"line":389},[220,38788,18633],{"class":226},[220,38790,353],{"class":264},[220,38792,38793],{"class":230},"\"10\"\n",[220,38795,38796,38798,38800],{"class":222,"line":399},[220,38797,15666],{"class":226},[220,38799,353],{"class":264},[220,38801,38802],{"class":230},"\"0.5\"\n",[220,38804,38805],{"class":222,"line":644},[220,38806,30240],{"class":264},[220,38808,38809,38811,38813],{"class":222,"line":650},[220,38810,2550],{"class":264},[220,38812,2553],{"class":346},[220,38814,386],{"class":264},[220,38816,38817,38819,38821],{"class":222,"line":656},[220,38818,2567],{"class":264},[220,38820,12681],{"class":346},[220,38822,359],{"class":264},[220,38824,38825,38827,38829],{"class":222,"line":673},[220,38826,402],{"class":264},[220,38828,347],{"class":346},[220,38830,359],{"class":264},[212,38832,38834],{"className":409,"code":38833,"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,38835,38836,38844,38850,38862,38874,38878,38886,38894],{"__ignoreMap":178},[220,38837,38838,38840,38842],{"class":222,"line":223},[220,38839,343],{"class":264},[220,38841,347],{"class":420},[220,38843,359],{"class":264},[220,38845,38846,38848],{"class":222,"line":179},[220,38847,364],{"class":264},[220,38849,38784],{"class":420},[220,38851,38852,38854,38856,38858,38860],{"class":222,"line":389},[220,38853,18744],{"class":226},[220,38855,353],{"class":260},[220,38857,743],{"class":264},[220,38859,22113],{"class":420},[220,38861,749],{"class":264},[220,38863,38864,38866,38868,38870,38872],{"class":222,"line":399},[220,38865,7892],{"class":226},[220,38867,353],{"class":260},[220,38869,743],{"class":264},[220,38871,6000],{"class":420},[220,38873,749],{"class":264},[220,38875,38876],{"class":222,"line":644},[220,38877,30240],{"class":264},[220,38879,38880,38882,38884],{"class":222,"line":650},[220,38881,2550],{"class":264},[220,38883,2553],{"class":420},[220,38885,386],{"class":264},[220,38887,38888,38890,38892],{"class":222,"line":656},[220,38889,2567],{"class":264},[220,38891,12681],{"class":420},[220,38893,359],{"class":264},[220,38895,38896,38898,38900],{"class":222,"line":673},[220,38897,402],{"class":264},[220,38899,347],{"class":420},[220,38901,359],{"class":264},[212,38903,38904],{"className":2844,"code":38833,"language":2846,"meta":178,"style":178},[99,38905,38906,38914,38920,38930,38940,38944,38952,38960],{"__ignoreMap":178},[220,38907,38908,38910,38912],{"class":222,"line":223},[220,38909,343],{"class":264},[220,38911,347],{"class":420},[220,38913,359],{"class":264},[220,38915,38916,38918],{"class":222,"line":179},[220,38917,364],{"class":264},[220,38919,38784],{"class":420},[220,38921,38922,38924,38926,38928],{"class":222,"line":389},[220,38923,18744],{"class":226},[220,38925,28138],{"class":264},[220,38927,22113],{"class":420},[220,38929,749],{"class":264},[220,38931,38932,38934,38936,38938],{"class":222,"line":399},[220,38933,7892],{"class":226},[220,38935,28138],{"class":264},[220,38937,6000],{"class":420},[220,38939,749],{"class":264},[220,38941,38942],{"class":222,"line":644},[220,38943,30240],{"class":264},[220,38945,38946,38948,38950],{"class":222,"line":650},[220,38947,2550],{"class":264},[220,38949,2553],{"class":420},[220,38951,386],{"class":264},[220,38953,38954,38956,38958],{"class":222,"line":656},[220,38955,2567],{"class":264},[220,38957,12681],{"class":420},[220,38959,359],{"class":264},[220,38961,38962,38964,38966],{"class":222,"line":673},[220,38963,402],{"class":264},[220,38965,347],{"class":420},[220,38967,359],{"class":264},[212,38969,38970],{"className":468,"code":38833,"language":469,"meta":178,"style":178},[99,38971,38972,38980,38986,38998,39010,39014,39022,39030],{"__ignoreMap":178},[220,38973,38974,38976,38978],{"class":222,"line":223},[220,38975,343],{"class":264},[220,38977,347],{"class":420},[220,38979,359],{"class":264},[220,38981,38982,38984],{"class":222,"line":179},[220,38983,364],{"class":264},[220,38985,38784],{"class":420},[220,38987,38988,38990,38992,38994,38996],{"class":222,"line":389},[220,38989,18744],{"class":226},[220,38991,353],{"class":260},[220,38993,743],{"class":264},[220,38995,22113],{"class":420},[220,38997,749],{"class":264},[220,38999,39000,39002,39004,39006,39008],{"class":222,"line":399},[220,39001,7892],{"class":226},[220,39003,353],{"class":260},[220,39005,743],{"class":264},[220,39007,6000],{"class":420},[220,39009,749],{"class":264},[220,39011,39012],{"class":222,"line":644},[220,39013,30240],{"class":264},[220,39015,39016,39018,39020],{"class":222,"line":650},[220,39017,2550],{"class":264},[220,39019,2553],{"class":420},[220,39021,386],{"class":264},[220,39023,39024,39026,39028],{"class":222,"line":656},[220,39025,2567],{"class":264},[220,39027,12681],{"class":420},[220,39029,359],{"class":264},[220,39031,39032,39034,39036],{"class":222,"line":673},[220,39033,402],{"class":264},[220,39035,347],{"class":420},[220,39037,359],{"class":264},[212,39039,39041],{"className":251,"code":39040,"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,39042,39043,39053,39057,39071,39075,39092,39100,39104,39108],{"__ignoreMap":178},[220,39044,39045,39047,39049,39051],{"class":222,"line":223},[220,39046,261],{"class":260},[220,39048,9763],{"class":264},[220,39050,268],{"class":260},[220,39052,9768],{"class":230},[220,39054,39055],{"class":222,"line":179},[220,39056,647],{"emptyLinePlaceholder":194},[220,39058,39059,39061,39063,39065,39067,39069],{"class":222,"line":389},[220,39060,1735],{"class":260},[220,39062,1738],{"class":420},[220,39064,1741],{"class":260},[220,39066,1744],{"class":260},[220,39068,1747],{"class":226},[220,39070,1750],{"class":264},[220,39072,39073],{"class":222,"line":399},[220,39074,1765],{"class":264},[220,39076,39077,39079,39082,39084,39086,39088,39090],{"class":222,"line":644},[220,39078,1770],{"class":264},[220,39080,39081],{"class":230},"'CursorRipples'",[220,39083,30484],{"class":264},[220,39085,22113],{"class":420},[220,39087,4812],{"class":264},[220,39089,6000],{"class":420},[220,39091,5792],{"class":264},[220,39093,39094,39096,39098],{"class":222,"line":650},[220,39095,5260],{"class":264},[220,39097,3206],{"class":230},[220,39099,2465],{"class":264},[220,39101,39102],{"class":222,"line":656},[220,39103,5277],{"class":264},[220,39105,39106],{"class":222,"line":673},[220,39107,1787],{"class":264},[220,39109,39110],{"class":222,"line":682},[220,39111,1792],{"class":264},[1504,39113,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39115},[39116,39117],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":12681,"description":38753},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":39124,"title":394,"body":39125,"category":35553,"componentType":24141,"description":39132,"extension":191,"meta":39372,"navigation":194,"path":39373,"requiresChild":30811,"seo":39374,"stem":39375,"__hash__":39376},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":39126,"toc":39368},[39127,39130,39133,39135,39137,39140,39142,39366],[11,39128,394],{"id":39129},"cursortrail",[15,39131,39132],{},"Animated trail effect that tracks cursor movement",[30192,39134],{"component":394},[23,39136,30196],{"id":24798},[30198,39138],{":props":39139},"[{\"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,39141,30204],{"id":30203},[246,39143,39144,39184,39227,39267,39309],{":tabs":1557},[212,39145,39147],{"className":334,"code":39146,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,39148,39149,39157,39164,39172,39176],{"__ignoreMap":178},[220,39150,39151,39153,39155],{"class":222,"line":223},[220,39152,343],{"class":264},[220,39154,347],{"class":346},[220,39156,359],{"class":264},[220,39158,39159,39161],{"class":222,"line":179},[220,39160,364],{"class":264},[220,39162,39163],{"class":346},"CursorTrail\n",[220,39165,39166,39168,39170],{"class":222,"line":389},[220,39167,15666],{"class":226},[220,39169,353],{"class":264},[220,39171,38802],{"class":230},[220,39173,39174],{"class":222,"line":399},[220,39175,1234],{"class":264},[220,39177,39178,39180,39182],{"class":222,"line":644},[220,39179,402],{"class":264},[220,39181,347],{"class":346},[220,39183,359],{"class":264},[212,39185,39187],{"className":409,"code":39186,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,39188,39189,39197,39203,39215,39219],{"__ignoreMap":178},[220,39190,39191,39193,39195],{"class":222,"line":223},[220,39192,343],{"class":264},[220,39194,347],{"class":420},[220,39196,359],{"class":264},[220,39198,39199,39201],{"class":222,"line":179},[220,39200,364],{"class":264},[220,39202,39163],{"class":420},[220,39204,39205,39207,39209,39211,39213],{"class":222,"line":389},[220,39206,7892],{"class":226},[220,39208,353],{"class":260},[220,39210,743],{"class":264},[220,39212,6000],{"class":420},[220,39214,749],{"class":264},[220,39216,39217],{"class":222,"line":399},[220,39218,1234],{"class":264},[220,39220,39221,39223,39225],{"class":222,"line":644},[220,39222,402],{"class":264},[220,39224,347],{"class":420},[220,39226,359],{"class":264},[212,39228,39229],{"className":2844,"code":39186,"language":2846,"meta":178,"style":178},[99,39230,39231,39239,39245,39255,39259],{"__ignoreMap":178},[220,39232,39233,39235,39237],{"class":222,"line":223},[220,39234,343],{"class":264},[220,39236,347],{"class":420},[220,39238,359],{"class":264},[220,39240,39241,39243],{"class":222,"line":179},[220,39242,364],{"class":264},[220,39244,39163],{"class":420},[220,39246,39247,39249,39251,39253],{"class":222,"line":389},[220,39248,7892],{"class":226},[220,39250,28138],{"class":264},[220,39252,6000],{"class":420},[220,39254,749],{"class":264},[220,39256,39257],{"class":222,"line":399},[220,39258,1234],{"class":264},[220,39260,39261,39263,39265],{"class":222,"line":644},[220,39262,402],{"class":264},[220,39264,347],{"class":420},[220,39266,359],{"class":264},[212,39268,39269],{"className":468,"code":39186,"language":469,"meta":178,"style":178},[99,39270,39271,39279,39285,39297,39301],{"__ignoreMap":178},[220,39272,39273,39275,39277],{"class":222,"line":223},[220,39274,343],{"class":264},[220,39276,347],{"class":420},[220,39278,359],{"class":264},[220,39280,39281,39283],{"class":222,"line":179},[220,39282,364],{"class":264},[220,39284,39163],{"class":420},[220,39286,39287,39289,39291,39293,39295],{"class":222,"line":389},[220,39288,7892],{"class":226},[220,39290,353],{"class":260},[220,39292,743],{"class":264},[220,39294,6000],{"class":420},[220,39296,749],{"class":264},[220,39298,39299],{"class":222,"line":399},[220,39300,1234],{"class":264},[220,39302,39303,39305,39307],{"class":222,"line":644},[220,39304,402],{"class":264},[220,39306,347],{"class":420},[220,39308,359],{"class":264},[212,39310,39312],{"className":251,"code":39311,"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,39313,39314,39324,39328,39342,39346,39358,39362],{"__ignoreMap":178},[220,39315,39316,39318,39320,39322],{"class":222,"line":223},[220,39317,261],{"class":260},[220,39319,9763],{"class":264},[220,39321,268],{"class":260},[220,39323,9768],{"class":230},[220,39325,39326],{"class":222,"line":179},[220,39327,647],{"emptyLinePlaceholder":194},[220,39329,39330,39332,39334,39336,39338,39340],{"class":222,"line":389},[220,39331,1735],{"class":260},[220,39333,1738],{"class":420},[220,39335,1741],{"class":260},[220,39337,1744],{"class":260},[220,39339,1747],{"class":226},[220,39341,1750],{"class":264},[220,39343,39344],{"class":222,"line":399},[220,39345,1765],{"class":264},[220,39347,39348,39350,39352,39354,39356],{"class":222,"line":644},[220,39349,1770],{"class":264},[220,39351,24629],{"class":230},[220,39353,5787],{"class":264},[220,39355,6000],{"class":420},[220,39357,1782],{"class":264},[220,39359,39360],{"class":222,"line":650},[220,39361,1787],{"class":264},[220,39363,39364],{"class":222,"line":656},[220,39365,1792],{"class":264},[1504,39367,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39369},[39370,39371],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":39132},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":39378,"title":39379,"body":39380,"category":31344,"componentType":24141,"description":39387,"extension":191,"meta":39572,"navigation":194,"path":39573,"requiresChild":30811,"seo":39574,"stem":39575,"__hash__":39576},"components\u002Fdocs\u002Fcomponents\u002FDOMTexture.md","DOMTexture",{"type":8,"value":39381,"toc":39569},[39382,39385,39388,39394,39396,39398,39567],[11,39383,39379],{"id":39384},"domtexture",[15,39386,39387],{},"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.",[39389,39390],"experimental-warning",{"link-label":39391,"link-url":39392,"message":39393},"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.",[30192,39395],{"component":39379},[23,39397,30204],{"id":30203},[246,39399,39400,39429,39457,39485,39513],{":tabs":1557},[212,39401,39403],{"className":334,"code":39402,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDOMTexture \u002F>\n\u003C\u002FShader>\n",[99,39404,39405,39413,39421],{"__ignoreMap":178},[220,39406,39407,39409,39411],{"class":222,"line":223},[220,39408,343],{"class":264},[220,39410,347],{"class":346},[220,39412,359],{"class":264},[220,39414,39415,39417,39419],{"class":222,"line":179},[220,39416,364],{"class":264},[220,39418,39379],{"class":346},[220,39420,386],{"class":264},[220,39422,39423,39425,39427],{"class":222,"line":389},[220,39424,402],{"class":264},[220,39426,347],{"class":346},[220,39428,359],{"class":264},[212,39430,39431],{"className":409,"code":39402,"language":411,"meta":178,"style":178},[99,39432,39433,39441,39449],{"__ignoreMap":178},[220,39434,39435,39437,39439],{"class":222,"line":223},[220,39436,343],{"class":264},[220,39438,347],{"class":420},[220,39440,359],{"class":264},[220,39442,39443,39445,39447],{"class":222,"line":179},[220,39444,364],{"class":264},[220,39446,39379],{"class":420},[220,39448,386],{"class":264},[220,39450,39451,39453,39455],{"class":222,"line":389},[220,39452,402],{"class":264},[220,39454,347],{"class":420},[220,39456,359],{"class":264},[212,39458,39459],{"className":2844,"code":39402,"language":2846,"meta":178,"style":178},[99,39460,39461,39469,39477],{"__ignoreMap":178},[220,39462,39463,39465,39467],{"class":222,"line":223},[220,39464,343],{"class":264},[220,39466,347],{"class":420},[220,39468,359],{"class":264},[220,39470,39471,39473,39475],{"class":222,"line":179},[220,39472,364],{"class":264},[220,39474,39379],{"class":420},[220,39476,386],{"class":264},[220,39478,39479,39481,39483],{"class":222,"line":389},[220,39480,402],{"class":264},[220,39482,347],{"class":420},[220,39484,359],{"class":264},[212,39486,39487],{"className":468,"code":39402,"language":469,"meta":178,"style":178},[99,39488,39489,39497,39505],{"__ignoreMap":178},[220,39490,39491,39493,39495],{"class":222,"line":223},[220,39492,343],{"class":264},[220,39494,347],{"class":420},[220,39496,359],{"class":264},[220,39498,39499,39501,39503],{"class":222,"line":179},[220,39500,364],{"class":264},[220,39502,39379],{"class":420},[220,39504,386],{"class":264},[220,39506,39507,39509,39511],{"class":222,"line":389},[220,39508,402],{"class":264},[220,39510,347],{"class":420},[220,39512,359],{"class":264},[212,39514,39516],{"className":251,"code":39515,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DOMTexture', props: {} }\n ]\n})\n",[99,39517,39518,39528,39532,39546,39550,39559,39563],{"__ignoreMap":178},[220,39519,39520,39522,39524,39526],{"class":222,"line":223},[220,39521,261],{"class":260},[220,39523,9763],{"class":264},[220,39525,268],{"class":260},[220,39527,9768],{"class":230},[220,39529,39530],{"class":222,"line":179},[220,39531,647],{"emptyLinePlaceholder":194},[220,39533,39534,39536,39538,39540,39542,39544],{"class":222,"line":389},[220,39535,1735],{"class":260},[220,39537,1738],{"class":420},[220,39539,1741],{"class":260},[220,39541,1744],{"class":260},[220,39543,1747],{"class":226},[220,39545,1750],{"class":264},[220,39547,39548],{"class":222,"line":399},[220,39549,1765],{"class":264},[220,39551,39552,39554,39557],{"class":222,"line":644},[220,39553,1770],{"class":264},[220,39555,39556],{"class":230},"'DOMTexture'",[220,39558,2465],{"class":264},[220,39560,39561],{"class":222,"line":650},[220,39562,1787],{"class":264},[220,39564,39565],{"class":222,"line":656},[220,39566,1792],{"class":264},[1504,39568,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":39570},[39571],{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdomtexture",{"title":39379,"description":39387},"docs\u002Fcomponents\u002FDOMTexture","3Jc9Zpo0-0aIes_naAYdI0ulUDh5gOfInTZsrpDRdHE",{"id":39578,"title":39579,"body":39580,"category":31087,"componentType":24147,"description":39587,"extension":191,"meta":39905,"navigation":194,"path":39906,"requiresChild":194,"seo":39907,"stem":39908,"__hash__":39909},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":39581,"toc":39901},[39582,39585,39588,39590,39592,39595,39597,39899],[11,39583,39579],{"id":39584},"datamosh",[15,39586,39587],{},"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",[30192,39589],{"component":39579},[23,39591,30196],{"id":24798},[30198,39593],{":props":39594},"[{\"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,39596,30204],{"id":30203},[246,39598,39599,39656,39715,39771,39829],{":tabs":1557},[212,39600,39602],{"className":334,"code":39601,"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,39603,39604,39612,39619,39628,39632,39640,39648],{"__ignoreMap":178},[220,39605,39606,39608,39610],{"class":222,"line":223},[220,39607,343],{"class":264},[220,39609,347],{"class":346},[220,39611,359],{"class":264},[220,39613,39614,39616],{"class":222,"line":179},[220,39615,364],{"class":264},[220,39617,39618],{"class":346},"DataMosh\n",[220,39620,39621,39623,39625],{"class":222,"line":389},[220,39622,18633],{"class":226},[220,39624,353],{"class":264},[220,39626,39627],{"class":230},"\"0.7\"\n",[220,39629,39630],{"class":222,"line":399},[220,39631,30240],{"class":264},[220,39633,39634,39636,39638],{"class":222,"line":644},[220,39635,2550],{"class":264},[220,39637,2553],{"class":346},[220,39639,386],{"class":264},[220,39641,39642,39644,39646],{"class":222,"line":650},[220,39643,2567],{"class":264},[220,39645,39579],{"class":346},[220,39647,359],{"class":264},[220,39649,39650,39652,39654],{"class":222,"line":656},[220,39651,402],{"class":264},[220,39653,347],{"class":346},[220,39655,359],{"class":264},[212,39657,39659],{"className":409,"code":39658,"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,39660,39661,39669,39675,39687,39691,39699,39707],{"__ignoreMap":178},[220,39662,39663,39665,39667],{"class":222,"line":223},[220,39664,343],{"class":264},[220,39666,347],{"class":420},[220,39668,359],{"class":264},[220,39670,39671,39673],{"class":222,"line":179},[220,39672,364],{"class":264},[220,39674,39618],{"class":420},[220,39676,39677,39679,39681,39683,39685],{"class":222,"line":389},[220,39678,18744],{"class":226},[220,39680,353],{"class":260},[220,39682,743],{"class":264},[220,39684,17205],{"class":420},[220,39686,749],{"class":264},[220,39688,39689],{"class":222,"line":399},[220,39690,30240],{"class":264},[220,39692,39693,39695,39697],{"class":222,"line":644},[220,39694,2550],{"class":264},[220,39696,2553],{"class":420},[220,39698,386],{"class":264},[220,39700,39701,39703,39705],{"class":222,"line":650},[220,39702,2567],{"class":264},[220,39704,39579],{"class":420},[220,39706,359],{"class":264},[220,39708,39709,39711,39713],{"class":222,"line":656},[220,39710,402],{"class":264},[220,39712,347],{"class":420},[220,39714,359],{"class":264},[212,39716,39717],{"className":2844,"code":39658,"language":2846,"meta":178,"style":178},[99,39718,39719,39727,39733,39743,39747,39755,39763],{"__ignoreMap":178},[220,39720,39721,39723,39725],{"class":222,"line":223},[220,39722,343],{"class":264},[220,39724,347],{"class":420},[220,39726,359],{"class":264},[220,39728,39729,39731],{"class":222,"line":179},[220,39730,364],{"class":264},[220,39732,39618],{"class":420},[220,39734,39735,39737,39739,39741],{"class":222,"line":389},[220,39736,18744],{"class":226},[220,39738,28138],{"class":264},[220,39740,17205],{"class":420},[220,39742,749],{"class":264},[220,39744,39745],{"class":222,"line":399},[220,39746,30240],{"class":264},[220,39748,39749,39751,39753],{"class":222,"line":644},[220,39750,2550],{"class":264},[220,39752,2553],{"class":420},[220,39754,386],{"class":264},[220,39756,39757,39759,39761],{"class":222,"line":650},[220,39758,2567],{"class":264},[220,39760,39579],{"class":420},[220,39762,359],{"class":264},[220,39764,39765,39767,39769],{"class":222,"line":656},[220,39766,402],{"class":264},[220,39768,347],{"class":420},[220,39770,359],{"class":264},[212,39772,39773],{"className":468,"code":39658,"language":469,"meta":178,"style":178},[99,39774,39775,39783,39789,39801,39805,39813,39821],{"__ignoreMap":178},[220,39776,39777,39779,39781],{"class":222,"line":223},[220,39778,343],{"class":264},[220,39780,347],{"class":420},[220,39782,359],{"class":264},[220,39784,39785,39787],{"class":222,"line":179},[220,39786,364],{"class":264},[220,39788,39618],{"class":420},[220,39790,39791,39793,39795,39797,39799],{"class":222,"line":389},[220,39792,18744],{"class":226},[220,39794,353],{"class":260},[220,39796,743],{"class":264},[220,39798,17205],{"class":420},[220,39800,749],{"class":264},[220,39802,39803],{"class":222,"line":399},[220,39804,30240],{"class":264},[220,39806,39807,39809,39811],{"class":222,"line":644},[220,39808,2550],{"class":264},[220,39810,2553],{"class":420},[220,39812,386],{"class":264},[220,39814,39815,39817,39819],{"class":222,"line":650},[220,39816,2567],{"class":264},[220,39818,39579],{"class":420},[220,39820,359],{"class":264},[220,39822,39823,39825,39827],{"class":222,"line":656},[220,39824,402],{"class":264},[220,39826,347],{"class":420},[220,39828,359],{"class":264},[212,39830,39832],{"className":251,"code":39831,"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,39833,39834,39844,39848,39862,39866,39879,39887,39891,39895],{"__ignoreMap":178},[220,39835,39836,39838,39840,39842],{"class":222,"line":223},[220,39837,261],{"class":260},[220,39839,9763],{"class":264},[220,39841,268],{"class":260},[220,39843,9768],{"class":230},[220,39845,39846],{"class":222,"line":179},[220,39847,647],{"emptyLinePlaceholder":194},[220,39849,39850,39852,39854,39856,39858,39860],{"class":222,"line":389},[220,39851,1735],{"class":260},[220,39853,1738],{"class":420},[220,39855,1741],{"class":260},[220,39857,1744],{"class":260},[220,39859,1747],{"class":226},[220,39861,1750],{"class":264},[220,39863,39864],{"class":222,"line":399},[220,39865,1765],{"class":264},[220,39867,39868,39870,39873,39875,39877],{"class":222,"line":644},[220,39869,1770],{"class":264},[220,39871,39872],{"class":230},"'DataMosh'",[220,39874,30484],{"class":264},[220,39876,17205],{"class":420},[220,39878,5792],{"class":264},[220,39880,39881,39883,39885],{"class":222,"line":650},[220,39882,5260],{"class":264},[220,39884,3206],{"class":230},[220,39886,2465],{"class":264},[220,39888,39889],{"class":222,"line":656},[220,39890,5277],{"class":264},[220,39892,39893],{"class":222,"line":673},[220,39894,1787],{"class":264},[220,39896,39897],{"class":222,"line":682},[220,39898,1792],{"class":264},[1504,39900,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39902},[39903,39904],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":39579,"description":39587},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":39911,"title":39912,"body":39913,"category":31344,"componentType":24141,"description":39920,"extension":191,"meta":40105,"navigation":194,"path":40106,"requiresChild":30811,"seo":40107,"stem":40108,"__hash__":40109},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":39914,"toc":40101},[39915,39918,39921,39923,39925,39928,39930,40099],[11,39916,39912],{"id":39917},"diamondgradient",[15,39919,39920],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[30192,39922],{"component":39912},[23,39924,30196],{"id":24798},[30198,39926],{":props":39927},"[{\"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,39929,30204],{"id":30203},[246,39931,39932,39961,39989,40017,40045],{":tabs":1557},[212,39933,39935],{"className":334,"code":39934,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,39936,39937,39945,39953],{"__ignoreMap":178},[220,39938,39939,39941,39943],{"class":222,"line":223},[220,39940,343],{"class":264},[220,39942,347],{"class":346},[220,39944,359],{"class":264},[220,39946,39947,39949,39951],{"class":222,"line":179},[220,39948,364],{"class":264},[220,39950,39912],{"class":346},[220,39952,386],{"class":264},[220,39954,39955,39957,39959],{"class":222,"line":389},[220,39956,402],{"class":264},[220,39958,347],{"class":346},[220,39960,359],{"class":264},[212,39962,39963],{"className":409,"code":39934,"language":411,"meta":178,"style":178},[99,39964,39965,39973,39981],{"__ignoreMap":178},[220,39966,39967,39969,39971],{"class":222,"line":223},[220,39968,343],{"class":264},[220,39970,347],{"class":420},[220,39972,359],{"class":264},[220,39974,39975,39977,39979],{"class":222,"line":179},[220,39976,364],{"class":264},[220,39978,39912],{"class":420},[220,39980,386],{"class":264},[220,39982,39983,39985,39987],{"class":222,"line":389},[220,39984,402],{"class":264},[220,39986,347],{"class":420},[220,39988,359],{"class":264},[212,39990,39991],{"className":2844,"code":39934,"language":2846,"meta":178,"style":178},[99,39992,39993,40001,40009],{"__ignoreMap":178},[220,39994,39995,39997,39999],{"class":222,"line":223},[220,39996,343],{"class":264},[220,39998,347],{"class":420},[220,40000,359],{"class":264},[220,40002,40003,40005,40007],{"class":222,"line":179},[220,40004,364],{"class":264},[220,40006,39912],{"class":420},[220,40008,386],{"class":264},[220,40010,40011,40013,40015],{"class":222,"line":389},[220,40012,402],{"class":264},[220,40014,347],{"class":420},[220,40016,359],{"class":264},[212,40018,40019],{"className":468,"code":39934,"language":469,"meta":178,"style":178},[99,40020,40021,40029,40037],{"__ignoreMap":178},[220,40022,40023,40025,40027],{"class":222,"line":223},[220,40024,343],{"class":264},[220,40026,347],{"class":420},[220,40028,359],{"class":264},[220,40030,40031,40033,40035],{"class":222,"line":179},[220,40032,364],{"class":264},[220,40034,39912],{"class":420},[220,40036,386],{"class":264},[220,40038,40039,40041,40043],{"class":222,"line":389},[220,40040,402],{"class":264},[220,40042,347],{"class":420},[220,40044,359],{"class":264},[212,40046,40048],{"className":251,"code":40047,"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,40049,40050,40060,40064,40078,40082,40091,40095],{"__ignoreMap":178},[220,40051,40052,40054,40056,40058],{"class":222,"line":223},[220,40053,261],{"class":260},[220,40055,9763],{"class":264},[220,40057,268],{"class":260},[220,40059,9768],{"class":230},[220,40061,40062],{"class":222,"line":179},[220,40063,647],{"emptyLinePlaceholder":194},[220,40065,40066,40068,40070,40072,40074,40076],{"class":222,"line":389},[220,40067,1735],{"class":260},[220,40069,1738],{"class":420},[220,40071,1741],{"class":260},[220,40073,1744],{"class":260},[220,40075,1747],{"class":226},[220,40077,1750],{"class":264},[220,40079,40080],{"class":222,"line":399},[220,40081,1765],{"class":264},[220,40083,40084,40086,40089],{"class":222,"line":644},[220,40085,1770],{"class":264},[220,40087,40088],{"class":230},"'DiamondGradient'",[220,40090,2465],{"class":264},[220,40092,40093],{"class":222,"line":650},[220,40094,1787],{"class":264},[220,40096,40097],{"class":222,"line":656},[220,40098,1792],{"class":264},[1504,40100,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":40102},[40103,40104],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":39912,"description":39920},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":40111,"title":40112,"body":40113,"category":30515,"componentType":24147,"description":40120,"extension":191,"meta":40438,"navigation":194,"path":40439,"requiresChild":194,"seo":40440,"stem":40441,"__hash__":40442},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":40114,"toc":40434},[40115,40118,40121,40123,40125,40128,40130,40432],[11,40116,40112],{"id":40117},"diffuseblur",[15,40119,40120],{},"Grain-like pixel displacement at random",[30192,40122],{"component":40112},[23,40124,30196],{"id":24798},[30198,40126],{":props":40127},"[{\"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,40129,30204],{"id":30203},[246,40131,40132,40189,40248,40304,40362],{":tabs":1557},[212,40133,40135],{"className":334,"code":40134,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,40136,40137,40145,40152,40161,40165,40173,40181],{"__ignoreMap":178},[220,40138,40139,40141,40143],{"class":222,"line":223},[220,40140,343],{"class":264},[220,40142,347],{"class":346},[220,40144,359],{"class":264},[220,40146,40147,40149],{"class":222,"line":179},[220,40148,364],{"class":264},[220,40150,40151],{"class":346},"DiffuseBlur\n",[220,40153,40154,40156,40158],{"class":222,"line":389},[220,40155,18633],{"class":226},[220,40157,353],{"class":264},[220,40159,40160],{"class":230},"\"30\"\n",[220,40162,40163],{"class":222,"line":399},[220,40164,30240],{"class":264},[220,40166,40167,40169,40171],{"class":222,"line":644},[220,40168,2550],{"class":264},[220,40170,2553],{"class":346},[220,40172,386],{"class":264},[220,40174,40175,40177,40179],{"class":222,"line":650},[220,40176,2567],{"class":264},[220,40178,40112],{"class":346},[220,40180,359],{"class":264},[220,40182,40183,40185,40187],{"class":222,"line":656},[220,40184,402],{"class":264},[220,40186,347],{"class":346},[220,40188,359],{"class":264},[212,40190,40192],{"className":409,"code":40191,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,40193,40194,40202,40208,40220,40224,40232,40240],{"__ignoreMap":178},[220,40195,40196,40198,40200],{"class":222,"line":223},[220,40197,343],{"class":264},[220,40199,347],{"class":420},[220,40201,359],{"class":264},[220,40203,40204,40206],{"class":222,"line":179},[220,40205,364],{"class":264},[220,40207,40151],{"class":420},[220,40209,40210,40212,40214,40216,40218],{"class":222,"line":389},[220,40211,18744],{"class":226},[220,40213,353],{"class":260},[220,40215,743],{"class":264},[220,40217,22273],{"class":420},[220,40219,749],{"class":264},[220,40221,40222],{"class":222,"line":399},[220,40223,30240],{"class":264},[220,40225,40226,40228,40230],{"class":222,"line":644},[220,40227,2550],{"class":264},[220,40229,2553],{"class":420},[220,40231,386],{"class":264},[220,40233,40234,40236,40238],{"class":222,"line":650},[220,40235,2567],{"class":264},[220,40237,40112],{"class":420},[220,40239,359],{"class":264},[220,40241,40242,40244,40246],{"class":222,"line":656},[220,40243,402],{"class":264},[220,40245,347],{"class":420},[220,40247,359],{"class":264},[212,40249,40250],{"className":2844,"code":40191,"language":2846,"meta":178,"style":178},[99,40251,40252,40260,40266,40276,40280,40288,40296],{"__ignoreMap":178},[220,40253,40254,40256,40258],{"class":222,"line":223},[220,40255,343],{"class":264},[220,40257,347],{"class":420},[220,40259,359],{"class":264},[220,40261,40262,40264],{"class":222,"line":179},[220,40263,364],{"class":264},[220,40265,40151],{"class":420},[220,40267,40268,40270,40272,40274],{"class":222,"line":389},[220,40269,18744],{"class":226},[220,40271,28138],{"class":264},[220,40273,22273],{"class":420},[220,40275,749],{"class":264},[220,40277,40278],{"class":222,"line":399},[220,40279,30240],{"class":264},[220,40281,40282,40284,40286],{"class":222,"line":644},[220,40283,2550],{"class":264},[220,40285,2553],{"class":420},[220,40287,386],{"class":264},[220,40289,40290,40292,40294],{"class":222,"line":650},[220,40291,2567],{"class":264},[220,40293,40112],{"class":420},[220,40295,359],{"class":264},[220,40297,40298,40300,40302],{"class":222,"line":656},[220,40299,402],{"class":264},[220,40301,347],{"class":420},[220,40303,359],{"class":264},[212,40305,40306],{"className":468,"code":40191,"language":469,"meta":178,"style":178},[99,40307,40308,40316,40322,40334,40338,40346,40354],{"__ignoreMap":178},[220,40309,40310,40312,40314],{"class":222,"line":223},[220,40311,343],{"class":264},[220,40313,347],{"class":420},[220,40315,359],{"class":264},[220,40317,40318,40320],{"class":222,"line":179},[220,40319,364],{"class":264},[220,40321,40151],{"class":420},[220,40323,40324,40326,40328,40330,40332],{"class":222,"line":389},[220,40325,18744],{"class":226},[220,40327,353],{"class":260},[220,40329,743],{"class":264},[220,40331,22273],{"class":420},[220,40333,749],{"class":264},[220,40335,40336],{"class":222,"line":399},[220,40337,30240],{"class":264},[220,40339,40340,40342,40344],{"class":222,"line":644},[220,40341,2550],{"class":264},[220,40343,2553],{"class":420},[220,40345,386],{"class":264},[220,40347,40348,40350,40352],{"class":222,"line":650},[220,40349,2567],{"class":264},[220,40351,40112],{"class":420},[220,40353,359],{"class":264},[220,40355,40356,40358,40360],{"class":222,"line":656},[220,40357,402],{"class":264},[220,40359,347],{"class":420},[220,40361,359],{"class":264},[212,40363,40365],{"className":251,"code":40364,"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,40366,40367,40377,40381,40395,40399,40412,40420,40424,40428],{"__ignoreMap":178},[220,40368,40369,40371,40373,40375],{"class":222,"line":223},[220,40370,261],{"class":260},[220,40372,9763],{"class":264},[220,40374,268],{"class":260},[220,40376,9768],{"class":230},[220,40378,40379],{"class":222,"line":179},[220,40380,647],{"emptyLinePlaceholder":194},[220,40382,40383,40385,40387,40389,40391,40393],{"class":222,"line":389},[220,40384,1735],{"class":260},[220,40386,1738],{"class":420},[220,40388,1741],{"class":260},[220,40390,1744],{"class":260},[220,40392,1747],{"class":226},[220,40394,1750],{"class":264},[220,40396,40397],{"class":222,"line":399},[220,40398,1765],{"class":264},[220,40400,40401,40403,40406,40408,40410],{"class":222,"line":644},[220,40402,1770],{"class":264},[220,40404,40405],{"class":230},"'DiffuseBlur'",[220,40407,30484],{"class":264},[220,40409,22273],{"class":420},[220,40411,5792],{"class":264},[220,40413,40414,40416,40418],{"class":222,"line":650},[220,40415,5260],{"class":264},[220,40417,3206],{"class":230},[220,40419,2465],{"class":264},[220,40421,40422],{"class":222,"line":656},[220,40423,5277],{"class":264},[220,40425,40426],{"class":222,"line":673},[220,40427,1787],{"class":264},[220,40429,40430],{"class":222,"line":682},[220,40431,1792],{"class":264},[1504,40433,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40435},[40436,40437],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":40112,"description":40120},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":40444,"title":40445,"body":40446,"category":31087,"componentType":24147,"description":40453,"extension":191,"meta":40714,"navigation":194,"path":40715,"requiresChild":194,"seo":40716,"stem":40717,"__hash__":40718},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":40447,"toc":40710},[40448,40451,40454,40456,40458,40461,40463,40708],[11,40449,40445],{"id":40450},"dither",[15,40452,40453],{},"Dithering effect with multiple pattern options",[30192,40455],{"component":40445},[23,40457,30196],{"id":24798},[30198,40459],{":props":40460},"[{\"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,40462,30204],{"id":30203},[246,40464,40465,40510,40554,40598,40642],{":tabs":1557},[212,40466,40468],{"className":334,"code":40467,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,40469,40470,40478,40486,40494,40502],{"__ignoreMap":178},[220,40471,40472,40474,40476],{"class":222,"line":223},[220,40473,343],{"class":264},[220,40475,347],{"class":346},[220,40477,359],{"class":264},[220,40479,40480,40482,40484],{"class":222,"line":179},[220,40481,364],{"class":264},[220,40483,40445],{"class":346},[220,40485,359],{"class":264},[220,40487,40488,40490,40492],{"class":222,"line":389},[220,40489,2550],{"class":264},[220,40491,2553],{"class":346},[220,40493,386],{"class":264},[220,40495,40496,40498,40500],{"class":222,"line":399},[220,40497,2567],{"class":264},[220,40499,40445],{"class":346},[220,40501,359],{"class":264},[220,40503,40504,40506,40508],{"class":222,"line":644},[220,40505,402],{"class":264},[220,40507,347],{"class":346},[220,40509,359],{"class":264},[212,40511,40512],{"className":409,"code":40467,"language":411,"meta":178,"style":178},[99,40513,40514,40522,40530,40538,40546],{"__ignoreMap":178},[220,40515,40516,40518,40520],{"class":222,"line":223},[220,40517,343],{"class":264},[220,40519,347],{"class":420},[220,40521,359],{"class":264},[220,40523,40524,40526,40528],{"class":222,"line":179},[220,40525,364],{"class":264},[220,40527,40445],{"class":420},[220,40529,359],{"class":264},[220,40531,40532,40534,40536],{"class":222,"line":389},[220,40533,2550],{"class":264},[220,40535,2553],{"class":420},[220,40537,386],{"class":264},[220,40539,40540,40542,40544],{"class":222,"line":399},[220,40541,2567],{"class":264},[220,40543,40445],{"class":420},[220,40545,359],{"class":264},[220,40547,40548,40550,40552],{"class":222,"line":644},[220,40549,402],{"class":264},[220,40551,347],{"class":420},[220,40553,359],{"class":264},[212,40555,40556],{"className":2844,"code":40467,"language":2846,"meta":178,"style":178},[99,40557,40558,40566,40574,40582,40590],{"__ignoreMap":178},[220,40559,40560,40562,40564],{"class":222,"line":223},[220,40561,343],{"class":264},[220,40563,347],{"class":420},[220,40565,359],{"class":264},[220,40567,40568,40570,40572],{"class":222,"line":179},[220,40569,364],{"class":264},[220,40571,40445],{"class":420},[220,40573,359],{"class":264},[220,40575,40576,40578,40580],{"class":222,"line":389},[220,40577,2550],{"class":264},[220,40579,2553],{"class":420},[220,40581,386],{"class":264},[220,40583,40584,40586,40588],{"class":222,"line":399},[220,40585,2567],{"class":264},[220,40587,40445],{"class":420},[220,40589,359],{"class":264},[220,40591,40592,40594,40596],{"class":222,"line":644},[220,40593,402],{"class":264},[220,40595,347],{"class":420},[220,40597,359],{"class":264},[212,40599,40600],{"className":468,"code":40467,"language":469,"meta":178,"style":178},[99,40601,40602,40610,40618,40626,40634],{"__ignoreMap":178},[220,40603,40604,40606,40608],{"class":222,"line":223},[220,40605,343],{"class":264},[220,40607,347],{"class":420},[220,40609,359],{"class":264},[220,40611,40612,40614,40616],{"class":222,"line":179},[220,40613,364],{"class":264},[220,40615,40445],{"class":420},[220,40617,359],{"class":264},[220,40619,40620,40622,40624],{"class":222,"line":389},[220,40621,2550],{"class":264},[220,40623,2553],{"class":420},[220,40625,386],{"class":264},[220,40627,40628,40630,40632],{"class":222,"line":399},[220,40629,2567],{"class":264},[220,40631,40445],{"class":420},[220,40633,359],{"class":264},[220,40635,40636,40638,40640],{"class":222,"line":644},[220,40637,402],{"class":264},[220,40639,347],{"class":420},[220,40641,359],{"class":264},[212,40643,40645],{"className":251,"code":40644,"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,40646,40647,40657,40661,40675,40679,40688,40696,40700,40704],{"__ignoreMap":178},[220,40648,40649,40651,40653,40655],{"class":222,"line":223},[220,40650,261],{"class":260},[220,40652,9763],{"class":264},[220,40654,268],{"class":260},[220,40656,9768],{"class":230},[220,40658,40659],{"class":222,"line":179},[220,40660,647],{"emptyLinePlaceholder":194},[220,40662,40663,40665,40667,40669,40671,40673],{"class":222,"line":389},[220,40664,1735],{"class":260},[220,40666,1738],{"class":420},[220,40668,1741],{"class":260},[220,40670,1744],{"class":260},[220,40672,1747],{"class":226},[220,40674,1750],{"class":264},[220,40676,40677],{"class":222,"line":399},[220,40678,1765],{"class":264},[220,40680,40681,40683,40686],{"class":222,"line":644},[220,40682,1770],{"class":264},[220,40684,40685],{"class":230},"'Dither'",[220,40687,5255],{"class":264},[220,40689,40690,40692,40694],{"class":222,"line":650},[220,40691,5260],{"class":264},[220,40693,3206],{"class":230},[220,40695,2465],{"class":264},[220,40697,40698],{"class":222,"line":656},[220,40699,5277],{"class":264},[220,40701,40702],{"class":222,"line":673},[220,40703,1787],{"class":264},[220,40705,40706],{"class":222,"line":682},[220,40707,1792],{"class":264},[1504,40709,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":40711},[40712,40713],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":40445,"description":40453},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":40720,"title":40721,"body":40722,"category":31344,"componentType":24141,"description":40729,"extension":191,"meta":40957,"navigation":194,"path":40958,"requiresChild":30811,"seo":40959,"stem":40960,"__hash__":40961},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":40723,"toc":40953},[40724,40727,40730,40732,40734,40737,40739,40951],[11,40725,40721],{"id":40726},"dotgrid",[15,40728,40729],{},"Grid of dots with optional twinkling animation",[30192,40731],{"component":40721},[23,40733,30196],{"id":24798},[30198,40735],{":props":40736},"[{\"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,40738,30204],{"id":30203},[246,40740,40741,40780,40818,40856,40894],{":tabs":1557},[212,40742,40744],{"className":334,"code":40743,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,40745,40746,40754,40760,40768,40772],{"__ignoreMap":178},[220,40747,40748,40750,40752],{"class":222,"line":223},[220,40749,343],{"class":264},[220,40751,347],{"class":346},[220,40753,359],{"class":264},[220,40755,40756,40758],{"class":222,"line":179},[220,40757,364],{"class":264},[220,40759,17764],{"class":346},[220,40761,40762,40764,40766],{"class":222,"line":389},[220,40763,7882],{"class":226},[220,40765,353],{"class":264},[220,40767,7838],{"class":230},[220,40769,40770],{"class":222,"line":399},[220,40771,1234],{"class":264},[220,40773,40774,40776,40778],{"class":222,"line":644},[220,40775,402],{"class":264},[220,40777,347],{"class":346},[220,40779,359],{"class":264},[212,40781,40782],{"className":409,"code":40743,"language":411,"meta":178,"style":178},[99,40783,40784,40792,40798,40806,40810],{"__ignoreMap":178},[220,40785,40786,40788,40790],{"class":222,"line":223},[220,40787,343],{"class":264},[220,40789,347],{"class":420},[220,40791,359],{"class":264},[220,40793,40794,40796],{"class":222,"line":179},[220,40795,364],{"class":264},[220,40797,17764],{"class":420},[220,40799,40800,40802,40804],{"class":222,"line":389},[220,40801,7882],{"class":226},[220,40803,353],{"class":260},[220,40805,7838],{"class":230},[220,40807,40808],{"class":222,"line":399},[220,40809,1234],{"class":264},[220,40811,40812,40814,40816],{"class":222,"line":644},[220,40813,402],{"class":264},[220,40815,347],{"class":420},[220,40817,359],{"class":264},[212,40819,40820],{"className":2844,"code":40743,"language":2846,"meta":178,"style":178},[99,40821,40822,40830,40836,40844,40848],{"__ignoreMap":178},[220,40823,40824,40826,40828],{"class":222,"line":223},[220,40825,343],{"class":264},[220,40827,347],{"class":420},[220,40829,359],{"class":264},[220,40831,40832,40834],{"class":222,"line":179},[220,40833,364],{"class":264},[220,40835,17764],{"class":420},[220,40837,40838,40840,40842],{"class":222,"line":389},[220,40839,7882],{"class":226},[220,40841,353],{"class":264},[220,40843,7838],{"class":230},[220,40845,40846],{"class":222,"line":399},[220,40847,1234],{"class":264},[220,40849,40850,40852,40854],{"class":222,"line":644},[220,40851,402],{"class":264},[220,40853,347],{"class":420},[220,40855,359],{"class":264},[212,40857,40858],{"className":468,"code":40743,"language":469,"meta":178,"style":178},[99,40859,40860,40868,40874,40882,40886],{"__ignoreMap":178},[220,40861,40862,40864,40866],{"class":222,"line":223},[220,40863,343],{"class":264},[220,40865,347],{"class":420},[220,40867,359],{"class":264},[220,40869,40870,40872],{"class":222,"line":179},[220,40871,364],{"class":264},[220,40873,17764],{"class":420},[220,40875,40876,40878,40880],{"class":222,"line":389},[220,40877,7882],{"class":226},[220,40879,353],{"class":260},[220,40881,7838],{"class":230},[220,40883,40884],{"class":222,"line":399},[220,40885,1234],{"class":264},[220,40887,40888,40890,40892],{"class":222,"line":644},[220,40889,402],{"class":264},[220,40891,347],{"class":420},[220,40893,359],{"class":264},[212,40895,40897],{"className":251,"code":40896,"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,40898,40899,40909,40913,40927,40931,40943,40947],{"__ignoreMap":178},[220,40900,40901,40903,40905,40907],{"class":222,"line":223},[220,40902,261],{"class":260},[220,40904,9763],{"class":264},[220,40906,268],{"class":260},[220,40908,9768],{"class":230},[220,40910,40911],{"class":222,"line":179},[220,40912,647],{"emptyLinePlaceholder":194},[220,40914,40915,40917,40919,40921,40923,40925],{"class":222,"line":389},[220,40916,1735],{"class":260},[220,40918,1738],{"class":420},[220,40920,1741],{"class":260},[220,40922,1744],{"class":260},[220,40924,1747],{"class":226},[220,40926,1750],{"class":264},[220,40928,40929],{"class":222,"line":399},[220,40930,1765],{"class":264},[220,40932,40933,40935,40937,40939,40941],{"class":222,"line":644},[220,40934,1770],{"class":264},[220,40936,18318],{"class":230},[220,40938,1776],{"class":264},[220,40940,8417],{"class":230},[220,40942,1782],{"class":264},[220,40944,40945],{"class":222,"line":650},[220,40946,1787],{"class":264},[220,40948,40949],{"class":222,"line":656},[220,40950,1792],{"class":264},[1504,40952,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40954},[40955,40956],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":40721,"description":40729},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":40963,"title":40964,"body":40965,"category":31087,"componentType":24147,"description":40972,"extension":191,"meta":41326,"navigation":194,"path":41327,"requiresChild":194,"seo":41328,"stem":41329,"__hash__":41330},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":40966,"toc":41322},[40967,40970,40973,40975,40977,40980,40982,41320],[11,40968,40964],{"id":40969},"dropshadow",[15,40971,40972],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[30192,40974],{"component":40964},[23,40976,30196],{"id":24798},[30198,40978],{":props":40979},"[{\"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,40981,30204],{"id":30203},[246,40983,40984,41048,41115,41179,41245],{":tabs":1557},[212,40985,40987],{"className":334,"code":40986,"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,40988,40989,40997,41004,41012,41020,41024,41032,41040],{"__ignoreMap":178},[220,40990,40991,40993,40995],{"class":222,"line":223},[220,40992,343],{"class":264},[220,40994,347],{"class":346},[220,40996,359],{"class":264},[220,40998,40999,41001],{"class":222,"line":179},[220,41000,364],{"class":264},[220,41002,41003],{"class":346},"DropShadow\n",[220,41005,41006,41008,41010],{"class":222,"line":389},[220,41007,7882],{"class":226},[220,41009,353],{"class":264},[220,41011,17735],{"class":230},[220,41013,41014,41016,41018],{"class":222,"line":399},[220,41015,18633],{"class":226},[220,41017,353],{"class":264},[220,41019,38802],{"class":230},[220,41021,41022],{"class":222,"line":644},[220,41023,30240],{"class":264},[220,41025,41026,41028,41030],{"class":222,"line":650},[220,41027,2550],{"class":264},[220,41029,2553],{"class":346},[220,41031,386],{"class":264},[220,41033,41034,41036,41038],{"class":222,"line":656},[220,41035,2567],{"class":264},[220,41037,40964],{"class":346},[220,41039,359],{"class":264},[220,41041,41042,41044,41046],{"class":222,"line":673},[220,41043,402],{"class":264},[220,41045,347],{"class":346},[220,41047,359],{"class":264},[212,41049,41051],{"className":409,"code":41050,"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,41052,41053,41061,41067,41075,41087,41091,41099,41107],{"__ignoreMap":178},[220,41054,41055,41057,41059],{"class":222,"line":223},[220,41056,343],{"class":264},[220,41058,347],{"class":420},[220,41060,359],{"class":264},[220,41062,41063,41065],{"class":222,"line":179},[220,41064,364],{"class":264},[220,41066,41003],{"class":420},[220,41068,41069,41071,41073],{"class":222,"line":389},[220,41070,7882],{"class":226},[220,41072,353],{"class":260},[220,41074,17735],{"class":230},[220,41076,41077,41079,41081,41083,41085],{"class":222,"line":399},[220,41078,18744],{"class":226},[220,41080,353],{"class":260},[220,41082,743],{"class":264},[220,41084,6000],{"class":420},[220,41086,749],{"class":264},[220,41088,41089],{"class":222,"line":644},[220,41090,30240],{"class":264},[220,41092,41093,41095,41097],{"class":222,"line":650},[220,41094,2550],{"class":264},[220,41096,2553],{"class":420},[220,41098,386],{"class":264},[220,41100,41101,41103,41105],{"class":222,"line":656},[220,41102,2567],{"class":264},[220,41104,40964],{"class":420},[220,41106,359],{"class":264},[220,41108,41109,41111,41113],{"class":222,"line":673},[220,41110,402],{"class":264},[220,41112,347],{"class":420},[220,41114,359],{"class":264},[212,41116,41117],{"className":2844,"code":41050,"language":2846,"meta":178,"style":178},[99,41118,41119,41127,41133,41141,41151,41155,41163,41171],{"__ignoreMap":178},[220,41120,41121,41123,41125],{"class":222,"line":223},[220,41122,343],{"class":264},[220,41124,347],{"class":420},[220,41126,359],{"class":264},[220,41128,41129,41131],{"class":222,"line":179},[220,41130,364],{"class":264},[220,41132,41003],{"class":420},[220,41134,41135,41137,41139],{"class":222,"line":389},[220,41136,7882],{"class":226},[220,41138,353],{"class":264},[220,41140,17735],{"class":230},[220,41142,41143,41145,41147,41149],{"class":222,"line":399},[220,41144,18744],{"class":226},[220,41146,28138],{"class":264},[220,41148,6000],{"class":420},[220,41150,749],{"class":264},[220,41152,41153],{"class":222,"line":644},[220,41154,30240],{"class":264},[220,41156,41157,41159,41161],{"class":222,"line":650},[220,41158,2550],{"class":264},[220,41160,2553],{"class":420},[220,41162,386],{"class":264},[220,41164,41165,41167,41169],{"class":222,"line":656},[220,41166,2567],{"class":264},[220,41168,40964],{"class":420},[220,41170,359],{"class":264},[220,41172,41173,41175,41177],{"class":222,"line":673},[220,41174,402],{"class":264},[220,41176,347],{"class":420},[220,41178,359],{"class":264},[212,41180,41181],{"className":468,"code":41050,"language":469,"meta":178,"style":178},[99,41182,41183,41191,41197,41205,41217,41221,41229,41237],{"__ignoreMap":178},[220,41184,41185,41187,41189],{"class":222,"line":223},[220,41186,343],{"class":264},[220,41188,347],{"class":420},[220,41190,359],{"class":264},[220,41192,41193,41195],{"class":222,"line":179},[220,41194,364],{"class":264},[220,41196,41003],{"class":420},[220,41198,41199,41201,41203],{"class":222,"line":389},[220,41200,7882],{"class":226},[220,41202,353],{"class":260},[220,41204,17735],{"class":230},[220,41206,41207,41209,41211,41213,41215],{"class":222,"line":399},[220,41208,18744],{"class":226},[220,41210,353],{"class":260},[220,41212,743],{"class":264},[220,41214,6000],{"class":420},[220,41216,749],{"class":264},[220,41218,41219],{"class":222,"line":644},[220,41220,30240],{"class":264},[220,41222,41223,41225,41227],{"class":222,"line":650},[220,41224,2550],{"class":264},[220,41226,2553],{"class":420},[220,41228,386],{"class":264},[220,41230,41231,41233,41235],{"class":222,"line":656},[220,41232,2567],{"class":264},[220,41234,40964],{"class":420},[220,41236,359],{"class":264},[220,41238,41239,41241,41243],{"class":222,"line":673},[220,41240,402],{"class":264},[220,41242,347],{"class":420},[220,41244,359],{"class":264},[212,41246,41248],{"className":251,"code":41247,"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,41249,41250,41260,41264,41278,41282,41300,41308,41312,41316],{"__ignoreMap":178},[220,41251,41252,41254,41256,41258],{"class":222,"line":223},[220,41253,261],{"class":260},[220,41255,9763],{"class":264},[220,41257,268],{"class":260},[220,41259,9768],{"class":230},[220,41261,41262],{"class":222,"line":179},[220,41263,647],{"emptyLinePlaceholder":194},[220,41265,41266,41268,41270,41272,41274,41276],{"class":222,"line":389},[220,41267,1735],{"class":260},[220,41269,1738],{"class":420},[220,41271,1741],{"class":260},[220,41273,1744],{"class":260},[220,41275,1747],{"class":226},[220,41277,1750],{"class":264},[220,41279,41280],{"class":222,"line":399},[220,41281,1765],{"class":264},[220,41283,41284,41286,41289,41291,41293,41296,41298],{"class":222,"line":644},[220,41285,1770],{"class":264},[220,41287,41288],{"class":230},"'DropShadow'",[220,41290,1776],{"class":264},[220,41292,18295],{"class":230},[220,41294,41295],{"class":264},", intensity: ",[220,41297,6000],{"class":420},[220,41299,5792],{"class":264},[220,41301,41302,41304,41306],{"class":222,"line":650},[220,41303,5260],{"class":264},[220,41305,3206],{"class":230},[220,41307,2465],{"class":264},[220,41309,41310],{"class":222,"line":656},[220,41311,5277],{"class":264},[220,41313,41314],{"class":222,"line":673},[220,41315,1787],{"class":264},[220,41317,41318],{"class":222,"line":682},[220,41319,1792],{"class":264},[1504,41321,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41323},[41324,41325],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":40964,"description":40972},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":41332,"title":41333,"body":41334,"category":33287,"componentType":24147,"description":41341,"extension":191,"meta":41602,"navigation":194,"path":41603,"requiresChild":194,"seo":41604,"stem":41605,"__hash__":41606},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":41335,"toc":41598},[41336,41339,41342,41344,41346,41349,41351,41596],[11,41337,41333],{"id":41338},"duotone",[15,41340,41341],{},"Map colors to two tones based on luminance",[30192,41343],{"component":41333},[23,41345,30196],{"id":24798},[30198,41347],{":props":41348},"[{\"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,41350,30204],{"id":30203},[246,41352,41353,41398,41442,41486,41530],{":tabs":1557},[212,41354,41356],{"className":334,"code":41355,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,41357,41358,41366,41374,41382,41390],{"__ignoreMap":178},[220,41359,41360,41362,41364],{"class":222,"line":223},[220,41361,343],{"class":264},[220,41363,347],{"class":346},[220,41365,359],{"class":264},[220,41367,41368,41370,41372],{"class":222,"line":179},[220,41369,364],{"class":264},[220,41371,41333],{"class":346},[220,41373,359],{"class":264},[220,41375,41376,41378,41380],{"class":222,"line":389},[220,41377,2550],{"class":264},[220,41379,2553],{"class":346},[220,41381,386],{"class":264},[220,41383,41384,41386,41388],{"class":222,"line":399},[220,41385,2567],{"class":264},[220,41387,41333],{"class":346},[220,41389,359],{"class":264},[220,41391,41392,41394,41396],{"class":222,"line":644},[220,41393,402],{"class":264},[220,41395,347],{"class":346},[220,41397,359],{"class":264},[212,41399,41400],{"className":409,"code":41355,"language":411,"meta":178,"style":178},[99,41401,41402,41410,41418,41426,41434],{"__ignoreMap":178},[220,41403,41404,41406,41408],{"class":222,"line":223},[220,41405,343],{"class":264},[220,41407,347],{"class":420},[220,41409,359],{"class":264},[220,41411,41412,41414,41416],{"class":222,"line":179},[220,41413,364],{"class":264},[220,41415,41333],{"class":420},[220,41417,359],{"class":264},[220,41419,41420,41422,41424],{"class":222,"line":389},[220,41421,2550],{"class":264},[220,41423,2553],{"class":420},[220,41425,386],{"class":264},[220,41427,41428,41430,41432],{"class":222,"line":399},[220,41429,2567],{"class":264},[220,41431,41333],{"class":420},[220,41433,359],{"class":264},[220,41435,41436,41438,41440],{"class":222,"line":644},[220,41437,402],{"class":264},[220,41439,347],{"class":420},[220,41441,359],{"class":264},[212,41443,41444],{"className":2844,"code":41355,"language":2846,"meta":178,"style":178},[99,41445,41446,41454,41462,41470,41478],{"__ignoreMap":178},[220,41447,41448,41450,41452],{"class":222,"line":223},[220,41449,343],{"class":264},[220,41451,347],{"class":420},[220,41453,359],{"class":264},[220,41455,41456,41458,41460],{"class":222,"line":179},[220,41457,364],{"class":264},[220,41459,41333],{"class":420},[220,41461,359],{"class":264},[220,41463,41464,41466,41468],{"class":222,"line":389},[220,41465,2550],{"class":264},[220,41467,2553],{"class":420},[220,41469,386],{"class":264},[220,41471,41472,41474,41476],{"class":222,"line":399},[220,41473,2567],{"class":264},[220,41475,41333],{"class":420},[220,41477,359],{"class":264},[220,41479,41480,41482,41484],{"class":222,"line":644},[220,41481,402],{"class":264},[220,41483,347],{"class":420},[220,41485,359],{"class":264},[212,41487,41488],{"className":468,"code":41355,"language":469,"meta":178,"style":178},[99,41489,41490,41498,41506,41514,41522],{"__ignoreMap":178},[220,41491,41492,41494,41496],{"class":222,"line":223},[220,41493,343],{"class":264},[220,41495,347],{"class":420},[220,41497,359],{"class":264},[220,41499,41500,41502,41504],{"class":222,"line":179},[220,41501,364],{"class":264},[220,41503,41333],{"class":420},[220,41505,359],{"class":264},[220,41507,41508,41510,41512],{"class":222,"line":389},[220,41509,2550],{"class":264},[220,41511,2553],{"class":420},[220,41513,386],{"class":264},[220,41515,41516,41518,41520],{"class":222,"line":399},[220,41517,2567],{"class":264},[220,41519,41333],{"class":420},[220,41521,359],{"class":264},[220,41523,41524,41526,41528],{"class":222,"line":644},[220,41525,402],{"class":264},[220,41527,347],{"class":420},[220,41529,359],{"class":264},[212,41531,41533],{"className":251,"code":41532,"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,41534,41535,41545,41549,41563,41567,41576,41584,41588,41592],{"__ignoreMap":178},[220,41536,41537,41539,41541,41543],{"class":222,"line":223},[220,41538,261],{"class":260},[220,41540,9763],{"class":264},[220,41542,268],{"class":260},[220,41544,9768],{"class":230},[220,41546,41547],{"class":222,"line":179},[220,41548,647],{"emptyLinePlaceholder":194},[220,41550,41551,41553,41555,41557,41559,41561],{"class":222,"line":389},[220,41552,1735],{"class":260},[220,41554,1738],{"class":420},[220,41556,1741],{"class":260},[220,41558,1744],{"class":260},[220,41560,1747],{"class":226},[220,41562,1750],{"class":264},[220,41564,41565],{"class":222,"line":399},[220,41566,1765],{"class":264},[220,41568,41569,41571,41574],{"class":222,"line":644},[220,41570,1770],{"class":264},[220,41572,41573],{"class":230},"'Duotone'",[220,41575,5255],{"class":264},[220,41577,41578,41580,41582],{"class":222,"line":650},[220,41579,5260],{"class":264},[220,41581,3206],{"class":230},[220,41583,2465],{"class":264},[220,41585,41586],{"class":222,"line":656},[220,41587,5277],{"class":264},[220,41589,41590],{"class":222,"line":673},[220,41591,1787],{"class":264},[220,41593,41594],{"class":222,"line":682},[220,41595,1792],{"class":264},[1504,41597,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":41599},[41600,41601],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":41333,"description":41341},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":41608,"title":41609,"body":41610,"category":14164,"componentType":24141,"description":41617,"extension":191,"meta":41847,"navigation":194,"path":41848,"requiresChild":30811,"seo":41849,"stem":41850,"__hash__":41851},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":41611,"toc":41843},[41612,41615,41618,41620,41622,41625,41627,41841],[11,41613,41609],{"id":41614},"ellipse",[15,41616,41617],{},"Ellipse with independently adjustable horizontal and vertical radii",[30192,41619],{"component":41609},[23,41621,30196],{"id":24798},[30198,41623],{":props":41624},"[{\"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,41626,30204],{"id":30203},[246,41628,41629,41669,41707,41745,41783],{":tabs":1557},[212,41630,41632],{"className":334,"code":41631,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,41633,41634,41642,41649,41657,41661],{"__ignoreMap":178},[220,41635,41636,41638,41640],{"class":222,"line":223},[220,41637,343],{"class":264},[220,41639,347],{"class":346},[220,41641,359],{"class":264},[220,41643,41644,41646],{"class":222,"line":179},[220,41645,364],{"class":264},[220,41647,41648],{"class":346},"Ellipse\n",[220,41650,41651,41653,41655],{"class":222,"line":389},[220,41652,7882],{"class":226},[220,41654,353],{"class":264},[220,41656,7838],{"class":230},[220,41658,41659],{"class":222,"line":399},[220,41660,1234],{"class":264},[220,41662,41663,41665,41667],{"class":222,"line":644},[220,41664,402],{"class":264},[220,41666,347],{"class":346},[220,41668,359],{"class":264},[212,41670,41671],{"className":409,"code":41631,"language":411,"meta":178,"style":178},[99,41672,41673,41681,41687,41695,41699],{"__ignoreMap":178},[220,41674,41675,41677,41679],{"class":222,"line":223},[220,41676,343],{"class":264},[220,41678,347],{"class":420},[220,41680,359],{"class":264},[220,41682,41683,41685],{"class":222,"line":179},[220,41684,364],{"class":264},[220,41686,41648],{"class":420},[220,41688,41689,41691,41693],{"class":222,"line":389},[220,41690,7882],{"class":226},[220,41692,353],{"class":260},[220,41694,7838],{"class":230},[220,41696,41697],{"class":222,"line":399},[220,41698,1234],{"class":264},[220,41700,41701,41703,41705],{"class":222,"line":644},[220,41702,402],{"class":264},[220,41704,347],{"class":420},[220,41706,359],{"class":264},[212,41708,41709],{"className":2844,"code":41631,"language":2846,"meta":178,"style":178},[99,41710,41711,41719,41725,41733,41737],{"__ignoreMap":178},[220,41712,41713,41715,41717],{"class":222,"line":223},[220,41714,343],{"class":264},[220,41716,347],{"class":420},[220,41718,359],{"class":264},[220,41720,41721,41723],{"class":222,"line":179},[220,41722,364],{"class":264},[220,41724,41648],{"class":420},[220,41726,41727,41729,41731],{"class":222,"line":389},[220,41728,7882],{"class":226},[220,41730,353],{"class":264},[220,41732,7838],{"class":230},[220,41734,41735],{"class":222,"line":399},[220,41736,1234],{"class":264},[220,41738,41739,41741,41743],{"class":222,"line":644},[220,41740,402],{"class":264},[220,41742,347],{"class":420},[220,41744,359],{"class":264},[212,41746,41747],{"className":468,"code":41631,"language":469,"meta":178,"style":178},[99,41748,41749,41757,41763,41771,41775],{"__ignoreMap":178},[220,41750,41751,41753,41755],{"class":222,"line":223},[220,41752,343],{"class":264},[220,41754,347],{"class":420},[220,41756,359],{"class":264},[220,41758,41759,41761],{"class":222,"line":179},[220,41760,364],{"class":264},[220,41762,41648],{"class":420},[220,41764,41765,41767,41769],{"class":222,"line":389},[220,41766,7882],{"class":226},[220,41768,353],{"class":260},[220,41770,7838],{"class":230},[220,41772,41773],{"class":222,"line":399},[220,41774,1234],{"class":264},[220,41776,41777,41779,41781],{"class":222,"line":644},[220,41778,402],{"class":264},[220,41780,347],{"class":420},[220,41782,359],{"class":264},[212,41784,41786],{"className":251,"code":41785,"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,41787,41788,41798,41802,41816,41820,41833,41837],{"__ignoreMap":178},[220,41789,41790,41792,41794,41796],{"class":222,"line":223},[220,41791,261],{"class":260},[220,41793,9763],{"class":264},[220,41795,268],{"class":260},[220,41797,9768],{"class":230},[220,41799,41800],{"class":222,"line":179},[220,41801,647],{"emptyLinePlaceholder":194},[220,41803,41804,41806,41808,41810,41812,41814],{"class":222,"line":389},[220,41805,1735],{"class":260},[220,41807,1738],{"class":420},[220,41809,1741],{"class":260},[220,41811,1744],{"class":260},[220,41813,1747],{"class":226},[220,41815,1750],{"class":264},[220,41817,41818],{"class":222,"line":399},[220,41819,1765],{"class":264},[220,41821,41822,41824,41827,41829,41831],{"class":222,"line":644},[220,41823,1770],{"class":264},[220,41825,41826],{"class":230},"'Ellipse'",[220,41828,1776],{"class":264},[220,41830,8417],{"class":230},[220,41832,1782],{"class":264},[220,41834,41835],{"class":222,"line":650},[220,41836,1787],{"class":264},[220,41838,41839],{"class":222,"line":656},[220,41840,1792],{"class":264},[1504,41842,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41844},[41845,41846],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":41609,"description":41617},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":41853,"title":19246,"body":41854,"category":33488,"componentType":24147,"description":41861,"extension":191,"meta":42121,"navigation":194,"path":42122,"requiresChild":194,"seo":42123,"stem":42124,"__hash__":42125},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":41855,"toc":42117},[41856,41859,41862,41864,41866,41869,41871,42115],[11,41857,19246],{"id":41858},"emboss",[15,41860,41861],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[30192,41863],{"component":19246},[23,41865,30196],{"id":24798},[30198,41867],{":props":41868},"[{\"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,41870,30204],{"id":30203},[246,41872,41873,41918,41962,42006,42050],{":tabs":1557},[212,41874,41876],{"className":334,"code":41875,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,41877,41878,41886,41894,41902,41910],{"__ignoreMap":178},[220,41879,41880,41882,41884],{"class":222,"line":223},[220,41881,343],{"class":264},[220,41883,347],{"class":346},[220,41885,359],{"class":264},[220,41887,41888,41890,41892],{"class":222,"line":179},[220,41889,364],{"class":264},[220,41891,19246],{"class":346},[220,41893,359],{"class":264},[220,41895,41896,41898,41900],{"class":222,"line":389},[220,41897,2550],{"class":264},[220,41899,2553],{"class":346},[220,41901,386],{"class":264},[220,41903,41904,41906,41908],{"class":222,"line":399},[220,41905,2567],{"class":264},[220,41907,19246],{"class":346},[220,41909,359],{"class":264},[220,41911,41912,41914,41916],{"class":222,"line":644},[220,41913,402],{"class":264},[220,41915,347],{"class":346},[220,41917,359],{"class":264},[212,41919,41920],{"className":409,"code":41875,"language":411,"meta":178,"style":178},[99,41921,41922,41930,41938,41946,41954],{"__ignoreMap":178},[220,41923,41924,41926,41928],{"class":222,"line":223},[220,41925,343],{"class":264},[220,41927,347],{"class":420},[220,41929,359],{"class":264},[220,41931,41932,41934,41936],{"class":222,"line":179},[220,41933,364],{"class":264},[220,41935,19246],{"class":420},[220,41937,359],{"class":264},[220,41939,41940,41942,41944],{"class":222,"line":389},[220,41941,2550],{"class":264},[220,41943,2553],{"class":420},[220,41945,386],{"class":264},[220,41947,41948,41950,41952],{"class":222,"line":399},[220,41949,2567],{"class":264},[220,41951,19246],{"class":420},[220,41953,359],{"class":264},[220,41955,41956,41958,41960],{"class":222,"line":644},[220,41957,402],{"class":264},[220,41959,347],{"class":420},[220,41961,359],{"class":264},[212,41963,41964],{"className":2844,"code":41875,"language":2846,"meta":178,"style":178},[99,41965,41966,41974,41982,41990,41998],{"__ignoreMap":178},[220,41967,41968,41970,41972],{"class":222,"line":223},[220,41969,343],{"class":264},[220,41971,347],{"class":420},[220,41973,359],{"class":264},[220,41975,41976,41978,41980],{"class":222,"line":179},[220,41977,364],{"class":264},[220,41979,19246],{"class":420},[220,41981,359],{"class":264},[220,41983,41984,41986,41988],{"class":222,"line":389},[220,41985,2550],{"class":264},[220,41987,2553],{"class":420},[220,41989,386],{"class":264},[220,41991,41992,41994,41996],{"class":222,"line":399},[220,41993,2567],{"class":264},[220,41995,19246],{"class":420},[220,41997,359],{"class":264},[220,41999,42000,42002,42004],{"class":222,"line":644},[220,42001,402],{"class":264},[220,42003,347],{"class":420},[220,42005,359],{"class":264},[212,42007,42008],{"className":468,"code":41875,"language":469,"meta":178,"style":178},[99,42009,42010,42018,42026,42034,42042],{"__ignoreMap":178},[220,42011,42012,42014,42016],{"class":222,"line":223},[220,42013,343],{"class":264},[220,42015,347],{"class":420},[220,42017,359],{"class":264},[220,42019,42020,42022,42024],{"class":222,"line":179},[220,42021,364],{"class":264},[220,42023,19246],{"class":420},[220,42025,359],{"class":264},[220,42027,42028,42030,42032],{"class":222,"line":389},[220,42029,2550],{"class":264},[220,42031,2553],{"class":420},[220,42033,386],{"class":264},[220,42035,42036,42038,42040],{"class":222,"line":399},[220,42037,2567],{"class":264},[220,42039,19246],{"class":420},[220,42041,359],{"class":264},[220,42043,42044,42046,42048],{"class":222,"line":644},[220,42045,402],{"class":264},[220,42047,347],{"class":420},[220,42049,359],{"class":264},[212,42051,42053],{"className":251,"code":42052,"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,42054,42055,42065,42069,42083,42087,42095,42103,42107,42111],{"__ignoreMap":178},[220,42056,42057,42059,42061,42063],{"class":222,"line":223},[220,42058,261],{"class":260},[220,42060,9763],{"class":264},[220,42062,268],{"class":260},[220,42064,9768],{"class":230},[220,42066,42067],{"class":222,"line":179},[220,42068,647],{"emptyLinePlaceholder":194},[220,42070,42071,42073,42075,42077,42079,42081],{"class":222,"line":389},[220,42072,1735],{"class":260},[220,42074,1738],{"class":420},[220,42076,1741],{"class":260},[220,42078,1744],{"class":260},[220,42080,1747],{"class":226},[220,42082,1750],{"class":264},[220,42084,42085],{"class":222,"line":399},[220,42086,1765],{"class":264},[220,42088,42089,42091,42093],{"class":222,"line":644},[220,42090,1770],{"class":264},[220,42092,19909],{"class":230},[220,42094,5255],{"class":264},[220,42096,42097,42099,42101],{"class":222,"line":650},[220,42098,5260],{"class":264},[220,42100,3206],{"class":230},[220,42102,2465],{"class":264},[220,42104,42105],{"class":222,"line":656},[220,42106,5277],{"class":264},[220,42108,42109],{"class":222,"line":673},[220,42110,1787],{"class":264},[220,42112,42113],{"class":222,"line":682},[220,42114,1792],{"class":264},[1504,42116,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":42118},[42119,42120],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":19246,"description":41861},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":42127,"title":42128,"body":42129,"category":31087,"componentType":24147,"description":42136,"extension":191,"meta":42397,"navigation":194,"path":42398,"requiresChild":194,"seo":42399,"stem":42400,"__hash__":42401},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":42130,"toc":42393},[42131,42134,42137,42139,42141,42144,42146,42391],[11,42132,42128],{"id":42133},"engraving",[15,42135,42136],{},"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",[30192,42138],{"component":42128},[23,42140,30196],{"id":24798},[30198,42142],{":props":42143},"[{\"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,42145,30204],{"id":30203},[246,42147,42148,42193,42237,42281,42325],{":tabs":1557},[212,42149,42151],{"className":334,"code":42150,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,42152,42153,42161,42169,42177,42185],{"__ignoreMap":178},[220,42154,42155,42157,42159],{"class":222,"line":223},[220,42156,343],{"class":264},[220,42158,347],{"class":346},[220,42160,359],{"class":264},[220,42162,42163,42165,42167],{"class":222,"line":179},[220,42164,364],{"class":264},[220,42166,42128],{"class":346},[220,42168,359],{"class":264},[220,42170,42171,42173,42175],{"class":222,"line":389},[220,42172,2550],{"class":264},[220,42174,2553],{"class":346},[220,42176,386],{"class":264},[220,42178,42179,42181,42183],{"class":222,"line":399},[220,42180,2567],{"class":264},[220,42182,42128],{"class":346},[220,42184,359],{"class":264},[220,42186,42187,42189,42191],{"class":222,"line":644},[220,42188,402],{"class":264},[220,42190,347],{"class":346},[220,42192,359],{"class":264},[212,42194,42195],{"className":409,"code":42150,"language":411,"meta":178,"style":178},[99,42196,42197,42205,42213,42221,42229],{"__ignoreMap":178},[220,42198,42199,42201,42203],{"class":222,"line":223},[220,42200,343],{"class":264},[220,42202,347],{"class":420},[220,42204,359],{"class":264},[220,42206,42207,42209,42211],{"class":222,"line":179},[220,42208,364],{"class":264},[220,42210,42128],{"class":420},[220,42212,359],{"class":264},[220,42214,42215,42217,42219],{"class":222,"line":389},[220,42216,2550],{"class":264},[220,42218,2553],{"class":420},[220,42220,386],{"class":264},[220,42222,42223,42225,42227],{"class":222,"line":399},[220,42224,2567],{"class":264},[220,42226,42128],{"class":420},[220,42228,359],{"class":264},[220,42230,42231,42233,42235],{"class":222,"line":644},[220,42232,402],{"class":264},[220,42234,347],{"class":420},[220,42236,359],{"class":264},[212,42238,42239],{"className":2844,"code":42150,"language":2846,"meta":178,"style":178},[99,42240,42241,42249,42257,42265,42273],{"__ignoreMap":178},[220,42242,42243,42245,42247],{"class":222,"line":223},[220,42244,343],{"class":264},[220,42246,347],{"class":420},[220,42248,359],{"class":264},[220,42250,42251,42253,42255],{"class":222,"line":179},[220,42252,364],{"class":264},[220,42254,42128],{"class":420},[220,42256,359],{"class":264},[220,42258,42259,42261,42263],{"class":222,"line":389},[220,42260,2550],{"class":264},[220,42262,2553],{"class":420},[220,42264,386],{"class":264},[220,42266,42267,42269,42271],{"class":222,"line":399},[220,42268,2567],{"class":264},[220,42270,42128],{"class":420},[220,42272,359],{"class":264},[220,42274,42275,42277,42279],{"class":222,"line":644},[220,42276,402],{"class":264},[220,42278,347],{"class":420},[220,42280,359],{"class":264},[212,42282,42283],{"className":468,"code":42150,"language":469,"meta":178,"style":178},[99,42284,42285,42293,42301,42309,42317],{"__ignoreMap":178},[220,42286,42287,42289,42291],{"class":222,"line":223},[220,42288,343],{"class":264},[220,42290,347],{"class":420},[220,42292,359],{"class":264},[220,42294,42295,42297,42299],{"class":222,"line":179},[220,42296,364],{"class":264},[220,42298,42128],{"class":420},[220,42300,359],{"class":264},[220,42302,42303,42305,42307],{"class":222,"line":389},[220,42304,2550],{"class":264},[220,42306,2553],{"class":420},[220,42308,386],{"class":264},[220,42310,42311,42313,42315],{"class":222,"line":399},[220,42312,2567],{"class":264},[220,42314,42128],{"class":420},[220,42316,359],{"class":264},[220,42318,42319,42321,42323],{"class":222,"line":644},[220,42320,402],{"class":264},[220,42322,347],{"class":420},[220,42324,359],{"class":264},[212,42326,42328],{"className":251,"code":42327,"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,42329,42330,42340,42344,42358,42362,42371,42379,42383,42387],{"__ignoreMap":178},[220,42331,42332,42334,42336,42338],{"class":222,"line":223},[220,42333,261],{"class":260},[220,42335,9763],{"class":264},[220,42337,268],{"class":260},[220,42339,9768],{"class":230},[220,42341,42342],{"class":222,"line":179},[220,42343,647],{"emptyLinePlaceholder":194},[220,42345,42346,42348,42350,42352,42354,42356],{"class":222,"line":389},[220,42347,1735],{"class":260},[220,42349,1738],{"class":420},[220,42351,1741],{"class":260},[220,42353,1744],{"class":260},[220,42355,1747],{"class":226},[220,42357,1750],{"class":264},[220,42359,42360],{"class":222,"line":399},[220,42361,1765],{"class":264},[220,42363,42364,42366,42369],{"class":222,"line":644},[220,42365,1770],{"class":264},[220,42367,42368],{"class":230},"'Engraving'",[220,42370,5255],{"class":264},[220,42372,42373,42375,42377],{"class":222,"line":650},[220,42374,5260],{"class":264},[220,42376,3206],{"class":230},[220,42378,2465],{"class":264},[220,42380,42381],{"class":222,"line":656},[220,42382,5277],{"class":264},[220,42384,42385],{"class":222,"line":673},[220,42386,1787],{"class":264},[220,42388,42389],{"class":222,"line":682},[220,42390,1792],{"class":264},[1504,42392,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":42394},[42395,42396],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":42128,"description":42136},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":42403,"title":42404,"body":42405,"category":31344,"componentType":24141,"description":42412,"extension":191,"meta":42597,"navigation":194,"path":42598,"requiresChild":30811,"seo":42599,"stem":42600,"__hash__":42601},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":42406,"toc":42593},[42407,42410,42413,42415,42417,42420,42422,42591],[11,42408,42404],{"id":42409},"erosionnoise",[15,42411,42412],{},"Branching, hydraulic-erosion ridges carved into noise",[30192,42414],{"component":42404},[23,42416,30196],{"id":24798},[30198,42418],{":props":42419},"[{\"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,42421,30204],{"id":30203},[246,42423,42424,42453,42481,42509,42537],{":tabs":1557},[212,42425,42427],{"className":334,"code":42426,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,42428,42429,42437,42445],{"__ignoreMap":178},[220,42430,42431,42433,42435],{"class":222,"line":223},[220,42432,343],{"class":264},[220,42434,347],{"class":346},[220,42436,359],{"class":264},[220,42438,42439,42441,42443],{"class":222,"line":179},[220,42440,364],{"class":264},[220,42442,42404],{"class":346},[220,42444,386],{"class":264},[220,42446,42447,42449,42451],{"class":222,"line":389},[220,42448,402],{"class":264},[220,42450,347],{"class":346},[220,42452,359],{"class":264},[212,42454,42455],{"className":409,"code":42426,"language":411,"meta":178,"style":178},[99,42456,42457,42465,42473],{"__ignoreMap":178},[220,42458,42459,42461,42463],{"class":222,"line":223},[220,42460,343],{"class":264},[220,42462,347],{"class":420},[220,42464,359],{"class":264},[220,42466,42467,42469,42471],{"class":222,"line":179},[220,42468,364],{"class":264},[220,42470,42404],{"class":420},[220,42472,386],{"class":264},[220,42474,42475,42477,42479],{"class":222,"line":389},[220,42476,402],{"class":264},[220,42478,347],{"class":420},[220,42480,359],{"class":264},[212,42482,42483],{"className":2844,"code":42426,"language":2846,"meta":178,"style":178},[99,42484,42485,42493,42501],{"__ignoreMap":178},[220,42486,42487,42489,42491],{"class":222,"line":223},[220,42488,343],{"class":264},[220,42490,347],{"class":420},[220,42492,359],{"class":264},[220,42494,42495,42497,42499],{"class":222,"line":179},[220,42496,364],{"class":264},[220,42498,42404],{"class":420},[220,42500,386],{"class":264},[220,42502,42503,42505,42507],{"class":222,"line":389},[220,42504,402],{"class":264},[220,42506,347],{"class":420},[220,42508,359],{"class":264},[212,42510,42511],{"className":468,"code":42426,"language":469,"meta":178,"style":178},[99,42512,42513,42521,42529],{"__ignoreMap":178},[220,42514,42515,42517,42519],{"class":222,"line":223},[220,42516,343],{"class":264},[220,42518,347],{"class":420},[220,42520,359],{"class":264},[220,42522,42523,42525,42527],{"class":222,"line":179},[220,42524,364],{"class":264},[220,42526,42404],{"class":420},[220,42528,386],{"class":264},[220,42530,42531,42533,42535],{"class":222,"line":389},[220,42532,402],{"class":264},[220,42534,347],{"class":420},[220,42536,359],{"class":264},[212,42538,42540],{"className":251,"code":42539,"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,42541,42542,42552,42556,42570,42574,42583,42587],{"__ignoreMap":178},[220,42543,42544,42546,42548,42550],{"class":222,"line":223},[220,42545,261],{"class":260},[220,42547,9763],{"class":264},[220,42549,268],{"class":260},[220,42551,9768],{"class":230},[220,42553,42554],{"class":222,"line":179},[220,42555,647],{"emptyLinePlaceholder":194},[220,42557,42558,42560,42562,42564,42566,42568],{"class":222,"line":389},[220,42559,1735],{"class":260},[220,42561,1738],{"class":420},[220,42563,1741],{"class":260},[220,42565,1744],{"class":260},[220,42567,1747],{"class":226},[220,42569,1750],{"class":264},[220,42571,42572],{"class":222,"line":399},[220,42573,1765],{"class":264},[220,42575,42576,42578,42581],{"class":222,"line":644},[220,42577,1770],{"class":264},[220,42579,42580],{"class":230},"'ErosionNoise'",[220,42582,2465],{"class":264},[220,42584,42585],{"class":222,"line":650},[220,42586,1787],{"class":264},[220,42588,42589],{"class":222,"line":656},[220,42590,1792],{"class":264},[1504,42592,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":42594},[42595,42596],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":42404,"description":42412},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":42603,"title":42604,"body":42605,"category":33287,"componentType":24147,"description":42612,"extension":191,"meta":42873,"navigation":194,"path":42874,"requiresChild":194,"seo":42875,"stem":42876,"__hash__":42877},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":42606,"toc":42869},[42607,42610,42613,42615,42617,42620,42622,42867],[11,42608,42604],{"id":42609},"exposure",[15,42611,42612],{},"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.",[30192,42614],{"component":42604},[23,42616,30196],{"id":24798},[30198,42618],{":props":42619},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,42621,30204],{"id":30203},[246,42623,42624,42669,42713,42757,42801],{":tabs":1557},[212,42625,42627],{"className":334,"code":42626,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,42628,42629,42637,42645,42653,42661],{"__ignoreMap":178},[220,42630,42631,42633,42635],{"class":222,"line":223},[220,42632,343],{"class":264},[220,42634,347],{"class":346},[220,42636,359],{"class":264},[220,42638,42639,42641,42643],{"class":222,"line":179},[220,42640,364],{"class":264},[220,42642,42604],{"class":346},[220,42644,359],{"class":264},[220,42646,42647,42649,42651],{"class":222,"line":389},[220,42648,2550],{"class":264},[220,42650,2553],{"class":346},[220,42652,386],{"class":264},[220,42654,42655,42657,42659],{"class":222,"line":399},[220,42656,2567],{"class":264},[220,42658,42604],{"class":346},[220,42660,359],{"class":264},[220,42662,42663,42665,42667],{"class":222,"line":644},[220,42664,402],{"class":264},[220,42666,347],{"class":346},[220,42668,359],{"class":264},[212,42670,42671],{"className":409,"code":42626,"language":411,"meta":178,"style":178},[99,42672,42673,42681,42689,42697,42705],{"__ignoreMap":178},[220,42674,42675,42677,42679],{"class":222,"line":223},[220,42676,343],{"class":264},[220,42678,347],{"class":420},[220,42680,359],{"class":264},[220,42682,42683,42685,42687],{"class":222,"line":179},[220,42684,364],{"class":264},[220,42686,42604],{"class":420},[220,42688,359],{"class":264},[220,42690,42691,42693,42695],{"class":222,"line":389},[220,42692,2550],{"class":264},[220,42694,2553],{"class":420},[220,42696,386],{"class":264},[220,42698,42699,42701,42703],{"class":222,"line":399},[220,42700,2567],{"class":264},[220,42702,42604],{"class":420},[220,42704,359],{"class":264},[220,42706,42707,42709,42711],{"class":222,"line":644},[220,42708,402],{"class":264},[220,42710,347],{"class":420},[220,42712,359],{"class":264},[212,42714,42715],{"className":2844,"code":42626,"language":2846,"meta":178,"style":178},[99,42716,42717,42725,42733,42741,42749],{"__ignoreMap":178},[220,42718,42719,42721,42723],{"class":222,"line":223},[220,42720,343],{"class":264},[220,42722,347],{"class":420},[220,42724,359],{"class":264},[220,42726,42727,42729,42731],{"class":222,"line":179},[220,42728,364],{"class":264},[220,42730,42604],{"class":420},[220,42732,359],{"class":264},[220,42734,42735,42737,42739],{"class":222,"line":389},[220,42736,2550],{"class":264},[220,42738,2553],{"class":420},[220,42740,386],{"class":264},[220,42742,42743,42745,42747],{"class":222,"line":399},[220,42744,2567],{"class":264},[220,42746,42604],{"class":420},[220,42748,359],{"class":264},[220,42750,42751,42753,42755],{"class":222,"line":644},[220,42752,402],{"class":264},[220,42754,347],{"class":420},[220,42756,359],{"class":264},[212,42758,42759],{"className":468,"code":42626,"language":469,"meta":178,"style":178},[99,42760,42761,42769,42777,42785,42793],{"__ignoreMap":178},[220,42762,42763,42765,42767],{"class":222,"line":223},[220,42764,343],{"class":264},[220,42766,347],{"class":420},[220,42768,359],{"class":264},[220,42770,42771,42773,42775],{"class":222,"line":179},[220,42772,364],{"class":264},[220,42774,42604],{"class":420},[220,42776,359],{"class":264},[220,42778,42779,42781,42783],{"class":222,"line":389},[220,42780,2550],{"class":264},[220,42782,2553],{"class":420},[220,42784,386],{"class":264},[220,42786,42787,42789,42791],{"class":222,"line":399},[220,42788,2567],{"class":264},[220,42790,42604],{"class":420},[220,42792,359],{"class":264},[220,42794,42795,42797,42799],{"class":222,"line":644},[220,42796,402],{"class":264},[220,42798,347],{"class":420},[220,42800,359],{"class":264},[212,42802,42804],{"className":251,"code":42803,"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,42805,42806,42816,42820,42834,42838,42847,42855,42859,42863],{"__ignoreMap":178},[220,42807,42808,42810,42812,42814],{"class":222,"line":223},[220,42809,261],{"class":260},[220,42811,9763],{"class":264},[220,42813,268],{"class":260},[220,42815,9768],{"class":230},[220,42817,42818],{"class":222,"line":179},[220,42819,647],{"emptyLinePlaceholder":194},[220,42821,42822,42824,42826,42828,42830,42832],{"class":222,"line":389},[220,42823,1735],{"class":260},[220,42825,1738],{"class":420},[220,42827,1741],{"class":260},[220,42829,1744],{"class":260},[220,42831,1747],{"class":226},[220,42833,1750],{"class":264},[220,42835,42836],{"class":222,"line":399},[220,42837,1765],{"class":264},[220,42839,42840,42842,42845],{"class":222,"line":644},[220,42841,1770],{"class":264},[220,42843,42844],{"class":230},"'Exposure'",[220,42846,5255],{"class":264},[220,42848,42849,42851,42853],{"class":222,"line":650},[220,42850,5260],{"class":264},[220,42852,3206],{"class":230},[220,42854,2465],{"class":264},[220,42856,42857],{"class":222,"line":656},[220,42858,5277],{"class":264},[220,42860,42861],{"class":222,"line":673},[220,42862,1787],{"class":264},[220,42864,42865],{"class":222,"line":682},[220,42866,1792],{"class":264},[1504,42868,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":42870},[42871,42872],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":42604,"description":42612},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":42879,"title":42880,"body":42881,"category":31344,"componentType":24141,"description":42888,"extension":191,"meta":43073,"navigation":194,"path":43074,"requiresChild":30811,"seo":43075,"stem":43076,"__hash__":43077},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":42882,"toc":43069},[42883,42886,42889,42891,42893,42896,42898,43067],[11,42884,42880],{"id":42885},"fallinglines",[15,42887,42888],{},"Directional falling lines with a leading-to-trailing color fade",[30192,42890],{"component":42880},[23,42892,30196],{"id":24798},[30198,42894],{":props":42895},"[{\"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,42897,30204],{"id":30203},[246,42899,42900,42929,42957,42985,43013],{":tabs":1557},[212,42901,42903],{"className":334,"code":42902,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,42904,42905,42913,42921],{"__ignoreMap":178},[220,42906,42907,42909,42911],{"class":222,"line":223},[220,42908,343],{"class":264},[220,42910,347],{"class":346},[220,42912,359],{"class":264},[220,42914,42915,42917,42919],{"class":222,"line":179},[220,42916,364],{"class":264},[220,42918,42880],{"class":346},[220,42920,386],{"class":264},[220,42922,42923,42925,42927],{"class":222,"line":389},[220,42924,402],{"class":264},[220,42926,347],{"class":346},[220,42928,359],{"class":264},[212,42930,42931],{"className":409,"code":42902,"language":411,"meta":178,"style":178},[99,42932,42933,42941,42949],{"__ignoreMap":178},[220,42934,42935,42937,42939],{"class":222,"line":223},[220,42936,343],{"class":264},[220,42938,347],{"class":420},[220,42940,359],{"class":264},[220,42942,42943,42945,42947],{"class":222,"line":179},[220,42944,364],{"class":264},[220,42946,42880],{"class":420},[220,42948,386],{"class":264},[220,42950,42951,42953,42955],{"class":222,"line":389},[220,42952,402],{"class":264},[220,42954,347],{"class":420},[220,42956,359],{"class":264},[212,42958,42959],{"className":2844,"code":42902,"language":2846,"meta":178,"style":178},[99,42960,42961,42969,42977],{"__ignoreMap":178},[220,42962,42963,42965,42967],{"class":222,"line":223},[220,42964,343],{"class":264},[220,42966,347],{"class":420},[220,42968,359],{"class":264},[220,42970,42971,42973,42975],{"class":222,"line":179},[220,42972,364],{"class":264},[220,42974,42880],{"class":420},[220,42976,386],{"class":264},[220,42978,42979,42981,42983],{"class":222,"line":389},[220,42980,402],{"class":264},[220,42982,347],{"class":420},[220,42984,359],{"class":264},[212,42986,42987],{"className":468,"code":42902,"language":469,"meta":178,"style":178},[99,42988,42989,42997,43005],{"__ignoreMap":178},[220,42990,42991,42993,42995],{"class":222,"line":223},[220,42992,343],{"class":264},[220,42994,347],{"class":420},[220,42996,359],{"class":264},[220,42998,42999,43001,43003],{"class":222,"line":179},[220,43000,364],{"class":264},[220,43002,42880],{"class":420},[220,43004,386],{"class":264},[220,43006,43007,43009,43011],{"class":222,"line":389},[220,43008,402],{"class":264},[220,43010,347],{"class":420},[220,43012,359],{"class":264},[212,43014,43016],{"className":251,"code":43015,"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,43017,43018,43028,43032,43046,43050,43059,43063],{"__ignoreMap":178},[220,43019,43020,43022,43024,43026],{"class":222,"line":223},[220,43021,261],{"class":260},[220,43023,9763],{"class":264},[220,43025,268],{"class":260},[220,43027,9768],{"class":230},[220,43029,43030],{"class":222,"line":179},[220,43031,647],{"emptyLinePlaceholder":194},[220,43033,43034,43036,43038,43040,43042,43044],{"class":222,"line":389},[220,43035,1735],{"class":260},[220,43037,1738],{"class":420},[220,43039,1741],{"class":260},[220,43041,1744],{"class":260},[220,43043,1747],{"class":226},[220,43045,1750],{"class":264},[220,43047,43048],{"class":222,"line":399},[220,43049,1765],{"class":264},[220,43051,43052,43054,43057],{"class":222,"line":644},[220,43053,1770],{"class":264},[220,43055,43056],{"class":230},"'FallingLines'",[220,43058,2465],{"class":264},[220,43060,43061],{"class":222,"line":650},[220,43062,1787],{"class":264},[220,43064,43065],{"class":222,"line":656},[220,43066,1792],{"class":264},[1504,43068,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":43070},[43071,43072],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":42880,"description":42888},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":43079,"title":43080,"body":43081,"category":31087,"componentType":24147,"description":43088,"extension":191,"meta":43349,"navigation":194,"path":43350,"requiresChild":194,"seo":43351,"stem":43352,"__hash__":43353},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":43082,"toc":43345},[43083,43086,43089,43091,43093,43096,43098,43343],[11,43084,43080],{"id":43085},"filmgrain",[15,43087,43088],{},"Analog film grain texture overlay, weighted toward darker areas",[30192,43090],{"component":43080},[23,43092,30196],{"id":24798},[30198,43094],{":props":43095},"[{\"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,43097,30204],{"id":30203},[246,43099,43100,43145,43189,43233,43277],{":tabs":1557},[212,43101,43103],{"className":334,"code":43102,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,43104,43105,43113,43121,43129,43137],{"__ignoreMap":178},[220,43106,43107,43109,43111],{"class":222,"line":223},[220,43108,343],{"class":264},[220,43110,347],{"class":346},[220,43112,359],{"class":264},[220,43114,43115,43117,43119],{"class":222,"line":179},[220,43116,364],{"class":264},[220,43118,43080],{"class":346},[220,43120,359],{"class":264},[220,43122,43123,43125,43127],{"class":222,"line":389},[220,43124,2550],{"class":264},[220,43126,2553],{"class":346},[220,43128,386],{"class":264},[220,43130,43131,43133,43135],{"class":222,"line":399},[220,43132,2567],{"class":264},[220,43134,43080],{"class":346},[220,43136,359],{"class":264},[220,43138,43139,43141,43143],{"class":222,"line":644},[220,43140,402],{"class":264},[220,43142,347],{"class":346},[220,43144,359],{"class":264},[212,43146,43147],{"className":409,"code":43102,"language":411,"meta":178,"style":178},[99,43148,43149,43157,43165,43173,43181],{"__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,43080],{"class":420},[220,43164,359],{"class":264},[220,43166,43167,43169,43171],{"class":222,"line":389},[220,43168,2550],{"class":264},[220,43170,2553],{"class":420},[220,43172,386],{"class":264},[220,43174,43175,43177,43179],{"class":222,"line":399},[220,43176,2567],{"class":264},[220,43178,43080],{"class":420},[220,43180,359],{"class":264},[220,43182,43183,43185,43187],{"class":222,"line":644},[220,43184,402],{"class":264},[220,43186,347],{"class":420},[220,43188,359],{"class":264},[212,43190,43191],{"className":2844,"code":43102,"language":2846,"meta":178,"style":178},[99,43192,43193,43201,43209,43217,43225],{"__ignoreMap":178},[220,43194,43195,43197,43199],{"class":222,"line":223},[220,43196,343],{"class":264},[220,43198,347],{"class":420},[220,43200,359],{"class":264},[220,43202,43203,43205,43207],{"class":222,"line":179},[220,43204,364],{"class":264},[220,43206,43080],{"class":420},[220,43208,359],{"class":264},[220,43210,43211,43213,43215],{"class":222,"line":389},[220,43212,2550],{"class":264},[220,43214,2553],{"class":420},[220,43216,386],{"class":264},[220,43218,43219,43221,43223],{"class":222,"line":399},[220,43220,2567],{"class":264},[220,43222,43080],{"class":420},[220,43224,359],{"class":264},[220,43226,43227,43229,43231],{"class":222,"line":644},[220,43228,402],{"class":264},[220,43230,347],{"class":420},[220,43232,359],{"class":264},[212,43234,43235],{"className":468,"code":43102,"language":469,"meta":178,"style":178},[99,43236,43237,43245,43253,43261,43269],{"__ignoreMap":178},[220,43238,43239,43241,43243],{"class":222,"line":223},[220,43240,343],{"class":264},[220,43242,347],{"class":420},[220,43244,359],{"class":264},[220,43246,43247,43249,43251],{"class":222,"line":179},[220,43248,364],{"class":264},[220,43250,43080],{"class":420},[220,43252,359],{"class":264},[220,43254,43255,43257,43259],{"class":222,"line":389},[220,43256,2550],{"class":264},[220,43258,2553],{"class":420},[220,43260,386],{"class":264},[220,43262,43263,43265,43267],{"class":222,"line":399},[220,43264,2567],{"class":264},[220,43266,43080],{"class":420},[220,43268,359],{"class":264},[220,43270,43271,43273,43275],{"class":222,"line":644},[220,43272,402],{"class":264},[220,43274,347],{"class":420},[220,43276,359],{"class":264},[212,43278,43280],{"className":251,"code":43279,"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,43281,43282,43292,43296,43310,43314,43323,43331,43335,43339],{"__ignoreMap":178},[220,43283,43284,43286,43288,43290],{"class":222,"line":223},[220,43285,261],{"class":260},[220,43287,9763],{"class":264},[220,43289,268],{"class":260},[220,43291,9768],{"class":230},[220,43293,43294],{"class":222,"line":179},[220,43295,647],{"emptyLinePlaceholder":194},[220,43297,43298,43300,43302,43304,43306,43308],{"class":222,"line":389},[220,43299,1735],{"class":260},[220,43301,1738],{"class":420},[220,43303,1741],{"class":260},[220,43305,1744],{"class":260},[220,43307,1747],{"class":226},[220,43309,1750],{"class":264},[220,43311,43312],{"class":222,"line":399},[220,43313,1765],{"class":264},[220,43315,43316,43318,43321],{"class":222,"line":644},[220,43317,1770],{"class":264},[220,43319,43320],{"class":230},"'FilmGrain'",[220,43322,5255],{"class":264},[220,43324,43325,43327,43329],{"class":222,"line":650},[220,43326,5260],{"class":264},[220,43328,3206],{"class":230},[220,43330,2465],{"class":264},[220,43332,43333],{"class":222,"line":656},[220,43334,5277],{"class":264},[220,43336,43337],{"class":222,"line":673},[220,43338,1787],{"class":264},[220,43340,43341],{"class":222,"line":682},[220,43342,1792],{"class":264},[1504,43344,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":43346},[43347,43348],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":43080,"description":43088},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":43355,"title":43356,"body":43357,"category":31677,"componentType":24147,"description":43364,"extension":191,"meta":43625,"navigation":194,"path":43626,"requiresChild":194,"seo":43627,"stem":43628,"__hash__":43629},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":43358,"toc":43621},[43359,43362,43365,43367,43369,43372,43374,43619],[11,43360,43356],{"id":43361},"flip",[15,43363,43364],{},"Mirror content horizontally, vertically, or both",[30192,43366],{"component":43356},[23,43368,30196],{"id":24798},[30198,43370],{":props":43371},"[{\"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,43373,30204],{"id":30203},[246,43375,43376,43421,43465,43509,43553],{":tabs":1557},[212,43377,43379],{"className":334,"code":43378,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[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":346},[220,43388,359],{"class":264},[220,43390,43391,43393,43395],{"class":222,"line":179},[220,43392,364],{"class":264},[220,43394,43356],{"class":346},[220,43396,359],{"class":264},[220,43398,43399,43401,43403],{"class":222,"line":389},[220,43400,2550],{"class":264},[220,43402,2553],{"class":346},[220,43404,386],{"class":264},[220,43406,43407,43409,43411],{"class":222,"line":399},[220,43408,2567],{"class":264},[220,43410,43356],{"class":346},[220,43412,359],{"class":264},[220,43414,43415,43417,43419],{"class":222,"line":644},[220,43416,402],{"class":264},[220,43418,347],{"class":346},[220,43420,359],{"class":264},[212,43422,43423],{"className":409,"code":43378,"language":411,"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,43356],{"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,43356],{"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,43467],{"className":2844,"code":43378,"language":2846,"meta":178,"style":178},[99,43468,43469,43477,43485,43493,43501],{"__ignoreMap":178},[220,43470,43471,43473,43475],{"class":222,"line":223},[220,43472,343],{"class":264},[220,43474,347],{"class":420},[220,43476,359],{"class":264},[220,43478,43479,43481,43483],{"class":222,"line":179},[220,43480,364],{"class":264},[220,43482,43356],{"class":420},[220,43484,359],{"class":264},[220,43486,43487,43489,43491],{"class":222,"line":389},[220,43488,2550],{"class":264},[220,43490,2553],{"class":420},[220,43492,386],{"class":264},[220,43494,43495,43497,43499],{"class":222,"line":399},[220,43496,2567],{"class":264},[220,43498,43356],{"class":420},[220,43500,359],{"class":264},[220,43502,43503,43505,43507],{"class":222,"line":644},[220,43504,402],{"class":264},[220,43506,347],{"class":420},[220,43508,359],{"class":264},[212,43510,43511],{"className":468,"code":43378,"language":469,"meta":178,"style":178},[99,43512,43513,43521,43529,43537,43545],{"__ignoreMap":178},[220,43514,43515,43517,43519],{"class":222,"line":223},[220,43516,343],{"class":264},[220,43518,347],{"class":420},[220,43520,359],{"class":264},[220,43522,43523,43525,43527],{"class":222,"line":179},[220,43524,364],{"class":264},[220,43526,43356],{"class":420},[220,43528,359],{"class":264},[220,43530,43531,43533,43535],{"class":222,"line":389},[220,43532,2550],{"class":264},[220,43534,2553],{"class":420},[220,43536,386],{"class":264},[220,43538,43539,43541,43543],{"class":222,"line":399},[220,43540,2567],{"class":264},[220,43542,43356],{"class":420},[220,43544,359],{"class":264},[220,43546,43547,43549,43551],{"class":222,"line":644},[220,43548,402],{"class":264},[220,43550,347],{"class":420},[220,43552,359],{"class":264},[212,43554,43556],{"className":251,"code":43555,"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,43557,43558,43568,43572,43586,43590,43599,43607,43611,43615],{"__ignoreMap":178},[220,43559,43560,43562,43564,43566],{"class":222,"line":223},[220,43561,261],{"class":260},[220,43563,9763],{"class":264},[220,43565,268],{"class":260},[220,43567,9768],{"class":230},[220,43569,43570],{"class":222,"line":179},[220,43571,647],{"emptyLinePlaceholder":194},[220,43573,43574,43576,43578,43580,43582,43584],{"class":222,"line":389},[220,43575,1735],{"class":260},[220,43577,1738],{"class":420},[220,43579,1741],{"class":260},[220,43581,1744],{"class":260},[220,43583,1747],{"class":226},[220,43585,1750],{"class":264},[220,43587,43588],{"class":222,"line":399},[220,43589,1765],{"class":264},[220,43591,43592,43594,43597],{"class":222,"line":644},[220,43593,1770],{"class":264},[220,43595,43596],{"class":230},"'Flip'",[220,43598,5255],{"class":264},[220,43600,43601,43603,43605],{"class":222,"line":650},[220,43602,5260],{"class":264},[220,43604,3206],{"class":230},[220,43606,2465],{"class":264},[220,43608,43609],{"class":222,"line":656},[220,43610,5277],{"class":264},[220,43612,43613],{"class":222,"line":673},[220,43614,1787],{"class":264},[220,43616,43617],{"class":222,"line":682},[220,43618,1792],{"class":264},[1504,43620,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":43622},[43623,43624],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":43356,"description":43364},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":43631,"title":43632,"body":43633,"category":31344,"componentType":24141,"description":43640,"extension":191,"meta":43825,"navigation":194,"path":43826,"requiresChild":30811,"seo":43827,"stem":43828,"__hash__":43829},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":43634,"toc":43821},[43635,43638,43641,43643,43645,43648,43650,43819],[11,43636,43632],{"id":43637},"floatingparticles",[15,43639,43640],{},"Animated floating particles with twinkle effects",[30192,43642],{"component":43632},[23,43644,30196],{"id":24798},[30198,43646],{":props":43647},"[{\"name\":\"randomness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Randomness of particle animation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Speed of particle movement\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Movement angle in degrees (0=right, 90=down, 180=left, 270=up)\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Size of particles\"},{\"name\":\"particleSoftness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness of particles (0 = sharp, 1 = very soft)\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of particle layers\"},{\"name\":\"particleColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the particles\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-layer speed variance (0 = all layers same speed, 1 = high variance)\"},{\"name\":\"angleVariance\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Per-layer angle variance in degrees (0 = all layers same angle, 180 = full variance)\"},{\"name\":\"particleDensity\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Particle density (lower = more spread out, higher = more dense)\"}]",[23,43649,30204],{"id":30203},[246,43651,43652,43681,43709,43737,43765],{":tabs":1557},[212,43653,43655],{"className":334,"code":43654,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,43656,43657,43665,43673],{"__ignoreMap":178},[220,43658,43659,43661,43663],{"class":222,"line":223},[220,43660,343],{"class":264},[220,43662,347],{"class":346},[220,43664,359],{"class":264},[220,43666,43667,43669,43671],{"class":222,"line":179},[220,43668,364],{"class":264},[220,43670,43632],{"class":346},[220,43672,386],{"class":264},[220,43674,43675,43677,43679],{"class":222,"line":389},[220,43676,402],{"class":264},[220,43678,347],{"class":346},[220,43680,359],{"class":264},[212,43682,43683],{"className":409,"code":43654,"language":411,"meta":178,"style":178},[99,43684,43685,43693,43701],{"__ignoreMap":178},[220,43686,43687,43689,43691],{"class":222,"line":223},[220,43688,343],{"class":264},[220,43690,347],{"class":420},[220,43692,359],{"class":264},[220,43694,43695,43697,43699],{"class":222,"line":179},[220,43696,364],{"class":264},[220,43698,43632],{"class":420},[220,43700,386],{"class":264},[220,43702,43703,43705,43707],{"class":222,"line":389},[220,43704,402],{"class":264},[220,43706,347],{"class":420},[220,43708,359],{"class":264},[212,43710,43711],{"className":2844,"code":43654,"language":2846,"meta":178,"style":178},[99,43712,43713,43721,43729],{"__ignoreMap":178},[220,43714,43715,43717,43719],{"class":222,"line":223},[220,43716,343],{"class":264},[220,43718,347],{"class":420},[220,43720,359],{"class":264},[220,43722,43723,43725,43727],{"class":222,"line":179},[220,43724,364],{"class":264},[220,43726,43632],{"class":420},[220,43728,386],{"class":264},[220,43730,43731,43733,43735],{"class":222,"line":389},[220,43732,402],{"class":264},[220,43734,347],{"class":420},[220,43736,359],{"class":264},[212,43738,43739],{"className":468,"code":43654,"language":469,"meta":178,"style":178},[99,43740,43741,43749,43757],{"__ignoreMap":178},[220,43742,43743,43745,43747],{"class":222,"line":223},[220,43744,343],{"class":264},[220,43746,347],{"class":420},[220,43748,359],{"class":264},[220,43750,43751,43753,43755],{"class":222,"line":179},[220,43752,364],{"class":264},[220,43754,43632],{"class":420},[220,43756,386],{"class":264},[220,43758,43759,43761,43763],{"class":222,"line":389},[220,43760,402],{"class":264},[220,43762,347],{"class":420},[220,43764,359],{"class":264},[212,43766,43768],{"className":251,"code":43767,"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,43769,43770,43780,43784,43798,43802,43811,43815],{"__ignoreMap":178},[220,43771,43772,43774,43776,43778],{"class":222,"line":223},[220,43773,261],{"class":260},[220,43775,9763],{"class":264},[220,43777,268],{"class":260},[220,43779,9768],{"class":230},[220,43781,43782],{"class":222,"line":179},[220,43783,647],{"emptyLinePlaceholder":194},[220,43785,43786,43788,43790,43792,43794,43796],{"class":222,"line":389},[220,43787,1735],{"class":260},[220,43789,1738],{"class":420},[220,43791,1741],{"class":260},[220,43793,1744],{"class":260},[220,43795,1747],{"class":226},[220,43797,1750],{"class":264},[220,43799,43800],{"class":222,"line":399},[220,43801,1765],{"class":264},[220,43803,43804,43806,43809],{"class":222,"line":644},[220,43805,1770],{"class":264},[220,43807,43808],{"class":230},"'FloatingParticles'",[220,43810,2465],{"class":264},[220,43812,43813],{"class":222,"line":650},[220,43814,1787],{"class":264},[220,43816,43817],{"class":222,"line":656},[220,43818,1792],{"class":264},[1504,43820,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":43822},[43823,43824],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":43632,"description":43640},"docs\u002Fcomponents\u002FFloatingParticles","M7oyLgufyIO8CnijbFxDwXsO_834bSOksTtvYb7mT2s",{"id":43831,"title":43832,"body":43833,"category":31677,"componentType":24147,"description":43840,"extension":191,"meta":44101,"navigation":194,"path":44102,"requiresChild":194,"seo":44103,"stem":44104,"__hash__":44105},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":43834,"toc":44097},[43835,43838,43841,43843,43845,43848,43850,44095],[11,43836,43832],{"id":43837},"flowfield",[15,43839,43840],{},"Fluid-like distortion with constant smooth motion",[30192,43842],{"component":43832},[23,43844,30196],{"id":24798},[30198,43846],{":props":43847},"[{\"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,43849,30204],{"id":30203},[246,43851,43852,43897,43941,43985,44029],{":tabs":1557},[212,43853,43855],{"className":334,"code":43854,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,43856,43857,43865,43873,43881,43889],{"__ignoreMap":178},[220,43858,43859,43861,43863],{"class":222,"line":223},[220,43860,343],{"class":264},[220,43862,347],{"class":346},[220,43864,359],{"class":264},[220,43866,43867,43869,43871],{"class":222,"line":179},[220,43868,364],{"class":264},[220,43870,43832],{"class":346},[220,43872,359],{"class":264},[220,43874,43875,43877,43879],{"class":222,"line":389},[220,43876,2550],{"class":264},[220,43878,2553],{"class":346},[220,43880,386],{"class":264},[220,43882,43883,43885,43887],{"class":222,"line":399},[220,43884,2567],{"class":264},[220,43886,43832],{"class":346},[220,43888,359],{"class":264},[220,43890,43891,43893,43895],{"class":222,"line":644},[220,43892,402],{"class":264},[220,43894,347],{"class":346},[220,43896,359],{"class":264},[212,43898,43899],{"className":409,"code":43854,"language":411,"meta":178,"style":178},[99,43900,43901,43909,43917,43925,43933],{"__ignoreMap":178},[220,43902,43903,43905,43907],{"class":222,"line":223},[220,43904,343],{"class":264},[220,43906,347],{"class":420},[220,43908,359],{"class":264},[220,43910,43911,43913,43915],{"class":222,"line":179},[220,43912,364],{"class":264},[220,43914,43832],{"class":420},[220,43916,359],{"class":264},[220,43918,43919,43921,43923],{"class":222,"line":389},[220,43920,2550],{"class":264},[220,43922,2553],{"class":420},[220,43924,386],{"class":264},[220,43926,43927,43929,43931],{"class":222,"line":399},[220,43928,2567],{"class":264},[220,43930,43832],{"class":420},[220,43932,359],{"class":264},[220,43934,43935,43937,43939],{"class":222,"line":644},[220,43936,402],{"class":264},[220,43938,347],{"class":420},[220,43940,359],{"class":264},[212,43942,43943],{"className":2844,"code":43854,"language":2846,"meta":178,"style":178},[99,43944,43945,43953,43961,43969,43977],{"__ignoreMap":178},[220,43946,43947,43949,43951],{"class":222,"line":223},[220,43948,343],{"class":264},[220,43950,347],{"class":420},[220,43952,359],{"class":264},[220,43954,43955,43957,43959],{"class":222,"line":179},[220,43956,364],{"class":264},[220,43958,43832],{"class":420},[220,43960,359],{"class":264},[220,43962,43963,43965,43967],{"class":222,"line":389},[220,43964,2550],{"class":264},[220,43966,2553],{"class":420},[220,43968,386],{"class":264},[220,43970,43971,43973,43975],{"class":222,"line":399},[220,43972,2567],{"class":264},[220,43974,43832],{"class":420},[220,43976,359],{"class":264},[220,43978,43979,43981,43983],{"class":222,"line":644},[220,43980,402],{"class":264},[220,43982,347],{"class":420},[220,43984,359],{"class":264},[212,43986,43987],{"className":468,"code":43854,"language":469,"meta":178,"style":178},[99,43988,43989,43997,44005,44013,44021],{"__ignoreMap":178},[220,43990,43991,43993,43995],{"class":222,"line":223},[220,43992,343],{"class":264},[220,43994,347],{"class":420},[220,43996,359],{"class":264},[220,43998,43999,44001,44003],{"class":222,"line":179},[220,44000,364],{"class":264},[220,44002,43832],{"class":420},[220,44004,359],{"class":264},[220,44006,44007,44009,44011],{"class":222,"line":389},[220,44008,2550],{"class":264},[220,44010,2553],{"class":420},[220,44012,386],{"class":264},[220,44014,44015,44017,44019],{"class":222,"line":399},[220,44016,2567],{"class":264},[220,44018,43832],{"class":420},[220,44020,359],{"class":264},[220,44022,44023,44025,44027],{"class":222,"line":644},[220,44024,402],{"class":264},[220,44026,347],{"class":420},[220,44028,359],{"class":264},[212,44030,44032],{"className":251,"code":44031,"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,44033,44034,44044,44048,44062,44066,44075,44083,44087,44091],{"__ignoreMap":178},[220,44035,44036,44038,44040,44042],{"class":222,"line":223},[220,44037,261],{"class":260},[220,44039,9763],{"class":264},[220,44041,268],{"class":260},[220,44043,9768],{"class":230},[220,44045,44046],{"class":222,"line":179},[220,44047,647],{"emptyLinePlaceholder":194},[220,44049,44050,44052,44054,44056,44058,44060],{"class":222,"line":389},[220,44051,1735],{"class":260},[220,44053,1738],{"class":420},[220,44055,1741],{"class":260},[220,44057,1744],{"class":260},[220,44059,1747],{"class":226},[220,44061,1750],{"class":264},[220,44063,44064],{"class":222,"line":399},[220,44065,1765],{"class":264},[220,44067,44068,44070,44073],{"class":222,"line":644},[220,44069,1770],{"class":264},[220,44071,44072],{"class":230},"'FlowField'",[220,44074,5255],{"class":264},[220,44076,44077,44079,44081],{"class":222,"line":650},[220,44078,5260],{"class":264},[220,44080,3206],{"class":230},[220,44082,2465],{"class":264},[220,44084,44085],{"class":222,"line":656},[220,44086,5277],{"class":264},[220,44088,44089],{"class":222,"line":673},[220,44090,1787],{"class":264},[220,44092,44093],{"class":222,"line":682},[220,44094,1792],{"class":264},[1504,44096,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":44098},[44099,44100],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":43832,"description":43840},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":44107,"title":44108,"body":44109,"category":14164,"componentType":24141,"description":44116,"extension":191,"meta":44394,"navigation":194,"path":44395,"requiresChild":30811,"seo":44396,"stem":44397,"__hash__":44398},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":44110,"toc":44390},[44111,44114,44117,44119,44121,44124,44126,44388],[11,44112,44108],{"id":44113},"flower",[15,44115,44116],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[30192,44118],{"component":44108},[23,44120,30196],{"id":24798},[30198,44122],{":props":44123},"[{\"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,44125,30204],{"id":30203},[246,44127,44128,44177,44228,44276,44326],{":tabs":1557},[212,44129,44131],{"className":334,"code":44130,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,44132,44133,44141,44148,44156,44165,44169],{"__ignoreMap":178},[220,44134,44135,44137,44139],{"class":222,"line":223},[220,44136,343],{"class":264},[220,44138,347],{"class":346},[220,44140,359],{"class":264},[220,44142,44143,44145],{"class":222,"line":179},[220,44144,364],{"class":264},[220,44146,44147],{"class":346},"Flower\n",[220,44149,44150,44152,44154],{"class":222,"line":389},[220,44151,7882],{"class":226},[220,44153,353],{"class":264},[220,44155,7838],{"class":230},[220,44157,44158,44160,44162],{"class":222,"line":399},[220,44159,15666],{"class":226},[220,44161,353],{"class":264},[220,44163,44164],{"class":230},"\"0.4\"\n",[220,44166,44167],{"class":222,"line":644},[220,44168,1234],{"class":264},[220,44170,44171,44173,44175],{"class":222,"line":650},[220,44172,402],{"class":264},[220,44174,347],{"class":346},[220,44176,359],{"class":264},[212,44178,44180],{"className":409,"code":44179,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,44181,44182,44190,44196,44204,44216,44220],{"__ignoreMap":178},[220,44183,44184,44186,44188],{"class":222,"line":223},[220,44185,343],{"class":264},[220,44187,347],{"class":420},[220,44189,359],{"class":264},[220,44191,44192,44194],{"class":222,"line":179},[220,44193,364],{"class":264},[220,44195,44147],{"class":420},[220,44197,44198,44200,44202],{"class":222,"line":389},[220,44199,7882],{"class":226},[220,44201,353],{"class":260},[220,44203,7838],{"class":230},[220,44205,44206,44208,44210,44212,44214],{"class":222,"line":399},[220,44207,7892],{"class":226},[220,44209,353],{"class":260},[220,44211,743],{"class":264},[220,44213,6495],{"class":420},[220,44215,749],{"class":264},[220,44217,44218],{"class":222,"line":644},[220,44219,1234],{"class":264},[220,44221,44222,44224,44226],{"class":222,"line":650},[220,44223,402],{"class":264},[220,44225,347],{"class":420},[220,44227,359],{"class":264},[212,44229,44230],{"className":2844,"code":44179,"language":2846,"meta":178,"style":178},[99,44231,44232,44240,44246,44254,44264,44268],{"__ignoreMap":178},[220,44233,44234,44236,44238],{"class":222,"line":223},[220,44235,343],{"class":264},[220,44237,347],{"class":420},[220,44239,359],{"class":264},[220,44241,44242,44244],{"class":222,"line":179},[220,44243,364],{"class":264},[220,44245,44147],{"class":420},[220,44247,44248,44250,44252],{"class":222,"line":389},[220,44249,7882],{"class":226},[220,44251,353],{"class":264},[220,44253,7838],{"class":230},[220,44255,44256,44258,44260,44262],{"class":222,"line":399},[220,44257,7892],{"class":226},[220,44259,28138],{"class":264},[220,44261,6495],{"class":420},[220,44263,749],{"class":264},[220,44265,44266],{"class":222,"line":644},[220,44267,1234],{"class":264},[220,44269,44270,44272,44274],{"class":222,"line":650},[220,44271,402],{"class":264},[220,44273,347],{"class":420},[220,44275,359],{"class":264},[212,44277,44278],{"className":468,"code":44179,"language":469,"meta":178,"style":178},[99,44279,44280,44288,44294,44302,44314,44318],{"__ignoreMap":178},[220,44281,44282,44284,44286],{"class":222,"line":223},[220,44283,343],{"class":264},[220,44285,347],{"class":420},[220,44287,359],{"class":264},[220,44289,44290,44292],{"class":222,"line":179},[220,44291,364],{"class":264},[220,44293,44147],{"class":420},[220,44295,44296,44298,44300],{"class":222,"line":389},[220,44297,7882],{"class":226},[220,44299,353],{"class":260},[220,44301,7838],{"class":230},[220,44303,44304,44306,44308,44310,44312],{"class":222,"line":399},[220,44305,7892],{"class":226},[220,44307,353],{"class":260},[220,44309,743],{"class":264},[220,44311,6495],{"class":420},[220,44313,749],{"class":264},[220,44315,44316],{"class":222,"line":644},[220,44317,1234],{"class":264},[220,44319,44320,44322,44324],{"class":222,"line":650},[220,44321,402],{"class":264},[220,44323,347],{"class":420},[220,44325,359],{"class":264},[212,44327,44329],{"className":251,"code":44328,"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,44330,44331,44341,44345,44359,44363,44380,44384],{"__ignoreMap":178},[220,44332,44333,44335,44337,44339],{"class":222,"line":223},[220,44334,261],{"class":260},[220,44336,9763],{"class":264},[220,44338,268],{"class":260},[220,44340,9768],{"class":230},[220,44342,44343],{"class":222,"line":179},[220,44344,647],{"emptyLinePlaceholder":194},[220,44346,44347,44349,44351,44353,44355,44357],{"class":222,"line":389},[220,44348,1735],{"class":260},[220,44350,1738],{"class":420},[220,44352,1741],{"class":260},[220,44354,1744],{"class":260},[220,44356,1747],{"class":226},[220,44358,1750],{"class":264},[220,44360,44361],{"class":222,"line":399},[220,44362,1765],{"class":264},[220,44364,44365,44367,44370,44372,44374,44376,44378],{"class":222,"line":644},[220,44366,1770],{"class":264},[220,44368,44369],{"class":230},"'Flower'",[220,44371,1776],{"class":264},[220,44373,8417],{"class":230},[220,44375,4812],{"class":264},[220,44377,6495],{"class":420},[220,44379,1782],{"class":264},[220,44381,44382],{"class":222,"line":650},[220,44383,1787],{"class":264},[220,44385,44386],{"class":222,"line":656},[220,44387,1792],{"class":264},[1504,44389,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44391},[44392,44393],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":44108,"description":44116},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":44400,"title":44401,"body":44402,"category":31344,"componentType":24141,"description":44409,"extension":191,"meta":44594,"navigation":194,"path":44595,"requiresChild":30811,"seo":44596,"stem":44597,"__hash__":44598},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":44403,"toc":44590},[44404,44407,44410,44412,44414,44417,44419,44588],[11,44405,44401],{"id":44406},"flowinggradient",[15,44408,44409],{},"Liquid silk gradient with organic flowing color bands",[30192,44411],{"component":44401},[23,44413,30196],{"id":24798},[30198,44415],{":props":44416},"[{\"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,44418,30204],{"id":30203},[246,44420,44421,44450,44478,44506,44534],{":tabs":1557},[212,44422,44424],{"className":334,"code":44423,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,44425,44426,44434,44442],{"__ignoreMap":178},[220,44427,44428,44430,44432],{"class":222,"line":223},[220,44429,343],{"class":264},[220,44431,347],{"class":346},[220,44433,359],{"class":264},[220,44435,44436,44438,44440],{"class":222,"line":179},[220,44437,364],{"class":264},[220,44439,44401],{"class":346},[220,44441,386],{"class":264},[220,44443,44444,44446,44448],{"class":222,"line":389},[220,44445,402],{"class":264},[220,44447,347],{"class":346},[220,44449,359],{"class":264},[212,44451,44452],{"className":409,"code":44423,"language":411,"meta":178,"style":178},[99,44453,44454,44462,44470],{"__ignoreMap":178},[220,44455,44456,44458,44460],{"class":222,"line":223},[220,44457,343],{"class":264},[220,44459,347],{"class":420},[220,44461,359],{"class":264},[220,44463,44464,44466,44468],{"class":222,"line":179},[220,44465,364],{"class":264},[220,44467,44401],{"class":420},[220,44469,386],{"class":264},[220,44471,44472,44474,44476],{"class":222,"line":389},[220,44473,402],{"class":264},[220,44475,347],{"class":420},[220,44477,359],{"class":264},[212,44479,44480],{"className":2844,"code":44423,"language":2846,"meta":178,"style":178},[99,44481,44482,44490,44498],{"__ignoreMap":178},[220,44483,44484,44486,44488],{"class":222,"line":223},[220,44485,343],{"class":264},[220,44487,347],{"class":420},[220,44489,359],{"class":264},[220,44491,44492,44494,44496],{"class":222,"line":179},[220,44493,364],{"class":264},[220,44495,44401],{"class":420},[220,44497,386],{"class":264},[220,44499,44500,44502,44504],{"class":222,"line":389},[220,44501,402],{"class":264},[220,44503,347],{"class":420},[220,44505,359],{"class":264},[212,44507,44508],{"className":468,"code":44423,"language":469,"meta":178,"style":178},[99,44509,44510,44518,44526],{"__ignoreMap":178},[220,44511,44512,44514,44516],{"class":222,"line":223},[220,44513,343],{"class":264},[220,44515,347],{"class":420},[220,44517,359],{"class":264},[220,44519,44520,44522,44524],{"class":222,"line":179},[220,44521,364],{"class":264},[220,44523,44401],{"class":420},[220,44525,386],{"class":264},[220,44527,44528,44530,44532],{"class":222,"line":389},[220,44529,402],{"class":264},[220,44531,347],{"class":420},[220,44533,359],{"class":264},[212,44535,44537],{"className":251,"code":44536,"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,44538,44539,44549,44553,44567,44571,44580,44584],{"__ignoreMap":178},[220,44540,44541,44543,44545,44547],{"class":222,"line":223},[220,44542,261],{"class":260},[220,44544,9763],{"class":264},[220,44546,268],{"class":260},[220,44548,9768],{"class":230},[220,44550,44551],{"class":222,"line":179},[220,44552,647],{"emptyLinePlaceholder":194},[220,44554,44555,44557,44559,44561,44563,44565],{"class":222,"line":389},[220,44556,1735],{"class":260},[220,44558,1738],{"class":420},[220,44560,1741],{"class":260},[220,44562,1744],{"class":260},[220,44564,1747],{"class":226},[220,44566,1750],{"class":264},[220,44568,44569],{"class":222,"line":399},[220,44570,1765],{"class":264},[220,44572,44573,44575,44578],{"class":222,"line":644},[220,44574,1770],{"class":264},[220,44576,44577],{"class":230},"'FlowingGradient'",[220,44579,2465],{"class":264},[220,44581,44582],{"class":222,"line":650},[220,44583,1787],{"class":264},[220,44585,44586],{"class":222,"line":656},[220,44587,1792],{"class":264},[1504,44589,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":44591},[44592,44593],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":44401,"description":44409},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":44600,"title":44601,"body":44602,"category":31677,"componentType":24147,"description":44609,"extension":191,"meta":44870,"navigation":194,"path":44871,"requiresChild":194,"seo":44872,"stem":44873,"__hash__":44874},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":44603,"toc":44866},[44604,44607,44610,44612,44614,44617,44619,44864],[11,44605,44601],{"id":44606},"flutedglass",[15,44608,44609],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[30192,44611],{"component":44601},[23,44613,30196],{"id":24798},[30198,44615],{":props":44616},"[{\"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,44618,30204],{"id":30203},[246,44620,44621,44666,44710,44754,44798],{":tabs":1557},[212,44622,44624],{"className":334,"code":44623,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,44625,44626,44634,44642,44650,44658],{"__ignoreMap":178},[220,44627,44628,44630,44632],{"class":222,"line":223},[220,44629,343],{"class":264},[220,44631,347],{"class":346},[220,44633,359],{"class":264},[220,44635,44636,44638,44640],{"class":222,"line":179},[220,44637,364],{"class":264},[220,44639,44601],{"class":346},[220,44641,359],{"class":264},[220,44643,44644,44646,44648],{"class":222,"line":389},[220,44645,2550],{"class":264},[220,44647,2553],{"class":346},[220,44649,386],{"class":264},[220,44651,44652,44654,44656],{"class":222,"line":399},[220,44653,2567],{"class":264},[220,44655,44601],{"class":346},[220,44657,359],{"class":264},[220,44659,44660,44662,44664],{"class":222,"line":644},[220,44661,402],{"class":264},[220,44663,347],{"class":346},[220,44665,359],{"class":264},[212,44667,44668],{"className":409,"code":44623,"language":411,"meta":178,"style":178},[99,44669,44670,44678,44686,44694,44702],{"__ignoreMap":178},[220,44671,44672,44674,44676],{"class":222,"line":223},[220,44673,343],{"class":264},[220,44675,347],{"class":420},[220,44677,359],{"class":264},[220,44679,44680,44682,44684],{"class":222,"line":179},[220,44681,364],{"class":264},[220,44683,44601],{"class":420},[220,44685,359],{"class":264},[220,44687,44688,44690,44692],{"class":222,"line":389},[220,44689,2550],{"class":264},[220,44691,2553],{"class":420},[220,44693,386],{"class":264},[220,44695,44696,44698,44700],{"class":222,"line":399},[220,44697,2567],{"class":264},[220,44699,44601],{"class":420},[220,44701,359],{"class":264},[220,44703,44704,44706,44708],{"class":222,"line":644},[220,44705,402],{"class":264},[220,44707,347],{"class":420},[220,44709,359],{"class":264},[212,44711,44712],{"className":2844,"code":44623,"language":2846,"meta":178,"style":178},[99,44713,44714,44722,44730,44738,44746],{"__ignoreMap":178},[220,44715,44716,44718,44720],{"class":222,"line":223},[220,44717,343],{"class":264},[220,44719,347],{"class":420},[220,44721,359],{"class":264},[220,44723,44724,44726,44728],{"class":222,"line":179},[220,44725,364],{"class":264},[220,44727,44601],{"class":420},[220,44729,359],{"class":264},[220,44731,44732,44734,44736],{"class":222,"line":389},[220,44733,2550],{"class":264},[220,44735,2553],{"class":420},[220,44737,386],{"class":264},[220,44739,44740,44742,44744],{"class":222,"line":399},[220,44741,2567],{"class":264},[220,44743,44601],{"class":420},[220,44745,359],{"class":264},[220,44747,44748,44750,44752],{"class":222,"line":644},[220,44749,402],{"class":264},[220,44751,347],{"class":420},[220,44753,359],{"class":264},[212,44755,44756],{"className":468,"code":44623,"language":469,"meta":178,"style":178},[99,44757,44758,44766,44774,44782,44790],{"__ignoreMap":178},[220,44759,44760,44762,44764],{"class":222,"line":223},[220,44761,343],{"class":264},[220,44763,347],{"class":420},[220,44765,359],{"class":264},[220,44767,44768,44770,44772],{"class":222,"line":179},[220,44769,364],{"class":264},[220,44771,44601],{"class":420},[220,44773,359],{"class":264},[220,44775,44776,44778,44780],{"class":222,"line":389},[220,44777,2550],{"class":264},[220,44779,2553],{"class":420},[220,44781,386],{"class":264},[220,44783,44784,44786,44788],{"class":222,"line":399},[220,44785,2567],{"class":264},[220,44787,44601],{"class":420},[220,44789,359],{"class":264},[220,44791,44792,44794,44796],{"class":222,"line":644},[220,44793,402],{"class":264},[220,44795,347],{"class":420},[220,44797,359],{"class":264},[212,44799,44801],{"className":251,"code":44800,"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,44802,44803,44813,44817,44831,44835,44844,44852,44856,44860],{"__ignoreMap":178},[220,44804,44805,44807,44809,44811],{"class":222,"line":223},[220,44806,261],{"class":260},[220,44808,9763],{"class":264},[220,44810,268],{"class":260},[220,44812,9768],{"class":230},[220,44814,44815],{"class":222,"line":179},[220,44816,647],{"emptyLinePlaceholder":194},[220,44818,44819,44821,44823,44825,44827,44829],{"class":222,"line":389},[220,44820,1735],{"class":260},[220,44822,1738],{"class":420},[220,44824,1741],{"class":260},[220,44826,1744],{"class":260},[220,44828,1747],{"class":226},[220,44830,1750],{"class":264},[220,44832,44833],{"class":222,"line":399},[220,44834,1765],{"class":264},[220,44836,44837,44839,44842],{"class":222,"line":644},[220,44838,1770],{"class":264},[220,44840,44841],{"class":230},"'FlutedGlass'",[220,44843,5255],{"class":264},[220,44845,44846,44848,44850],{"class":222,"line":650},[220,44847,5260],{"class":264},[220,44849,3206],{"class":230},[220,44851,2465],{"class":264},[220,44853,44854],{"class":222,"line":656},[220,44855,5277],{"class":264},[220,44857,44858],{"class":222,"line":673},[220,44859,1787],{"class":264},[220,44861,44862],{"class":222,"line":682},[220,44863,1792],{"class":264},[1504,44865,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":44867},[44868,44869],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":44601,"description":44609},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":44876,"title":44877,"body":44878,"category":35553,"componentType":24141,"description":44885,"extension":191,"meta":45070,"navigation":194,"path":45071,"requiresChild":30811,"seo":45072,"stem":45073,"__hash__":45074},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":44879,"toc":45066},[44880,44883,44886,44888,44890,44893,44895,45064],[11,44881,44877],{"id":44882},"fog",[15,44884,44885],{},"Fog that fills the screen and interacts with the mouse",[30192,44887],{"component":44877},[23,44889,30196],{"id":24798},[30198,44891],{":props":44892},"[{\"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,44894,30204],{"id":30203},[246,44896,44897,44926,44954,44982,45010],{":tabs":1557},[212,44898,44900],{"className":334,"code":44899,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,44901,44902,44910,44918],{"__ignoreMap":178},[220,44903,44904,44906,44908],{"class":222,"line":223},[220,44905,343],{"class":264},[220,44907,347],{"class":346},[220,44909,359],{"class":264},[220,44911,44912,44914,44916],{"class":222,"line":179},[220,44913,364],{"class":264},[220,44915,44877],{"class":346},[220,44917,386],{"class":264},[220,44919,44920,44922,44924],{"class":222,"line":389},[220,44921,402],{"class":264},[220,44923,347],{"class":346},[220,44925,359],{"class":264},[212,44927,44928],{"className":409,"code":44899,"language":411,"meta":178,"style":178},[99,44929,44930,44938,44946],{"__ignoreMap":178},[220,44931,44932,44934,44936],{"class":222,"line":223},[220,44933,343],{"class":264},[220,44935,347],{"class":420},[220,44937,359],{"class":264},[220,44939,44940,44942,44944],{"class":222,"line":179},[220,44941,364],{"class":264},[220,44943,44877],{"class":420},[220,44945,386],{"class":264},[220,44947,44948,44950,44952],{"class":222,"line":389},[220,44949,402],{"class":264},[220,44951,347],{"class":420},[220,44953,359],{"class":264},[212,44955,44956],{"className":2844,"code":44899,"language":2846,"meta":178,"style":178},[99,44957,44958,44966,44974],{"__ignoreMap":178},[220,44959,44960,44962,44964],{"class":222,"line":223},[220,44961,343],{"class":264},[220,44963,347],{"class":420},[220,44965,359],{"class":264},[220,44967,44968,44970,44972],{"class":222,"line":179},[220,44969,364],{"class":264},[220,44971,44877],{"class":420},[220,44973,386],{"class":264},[220,44975,44976,44978,44980],{"class":222,"line":389},[220,44977,402],{"class":264},[220,44979,347],{"class":420},[220,44981,359],{"class":264},[212,44983,44984],{"className":468,"code":44899,"language":469,"meta":178,"style":178},[99,44985,44986,44994,45002],{"__ignoreMap":178},[220,44987,44988,44990,44992],{"class":222,"line":223},[220,44989,343],{"class":264},[220,44991,347],{"class":420},[220,44993,359],{"class":264},[220,44995,44996,44998,45000],{"class":222,"line":179},[220,44997,364],{"class":264},[220,44999,44877],{"class":420},[220,45001,386],{"class":264},[220,45003,45004,45006,45008],{"class":222,"line":389},[220,45005,402],{"class":264},[220,45007,347],{"class":420},[220,45009,359],{"class":264},[212,45011,45013],{"className":251,"code":45012,"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,45014,45015,45025,45029,45043,45047,45056,45060],{"__ignoreMap":178},[220,45016,45017,45019,45021,45023],{"class":222,"line":223},[220,45018,261],{"class":260},[220,45020,9763],{"class":264},[220,45022,268],{"class":260},[220,45024,9768],{"class":230},[220,45026,45027],{"class":222,"line":179},[220,45028,647],{"emptyLinePlaceholder":194},[220,45030,45031,45033,45035,45037,45039,45041],{"class":222,"line":389},[220,45032,1735],{"class":260},[220,45034,1738],{"class":420},[220,45036,1741],{"class":260},[220,45038,1744],{"class":260},[220,45040,1747],{"class":226},[220,45042,1750],{"class":264},[220,45044,45045],{"class":222,"line":399},[220,45046,1765],{"class":264},[220,45048,45049,45051,45054],{"class":222,"line":644},[220,45050,1770],{"class":264},[220,45052,45053],{"class":230},"'Fog'",[220,45055,2465],{"class":264},[220,45057,45058],{"class":222,"line":650},[220,45059,1787],{"class":264},[220,45061,45062],{"class":222,"line":656},[220,45063,1792],{"class":264},[1504,45065,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":45067},[45068,45069],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":44877,"description":44885},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":45076,"title":45077,"body":45078,"category":31677,"componentType":24147,"description":45085,"extension":191,"meta":45346,"navigation":194,"path":45347,"requiresChild":194,"seo":45348,"stem":45349,"__hash__":45350},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":45079,"toc":45342},[45080,45083,45086,45088,45090,45093,45095,45340],[11,45081,45077],{"id":45082},"form3d",[15,45084,45085],{},"Wraps child content onto a 3D raymarched shape with lighting.",[30192,45087],{"component":45077},[23,45089,30196],{"id":24798},[30198,45091],{":props":45092},"[{\"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,45094,30204],{"id":30203},[246,45096,45097,45142,45186,45230,45274],{":tabs":1557},[212,45098,45100],{"className":334,"code":45099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,45101,45102,45110,45118,45126,45134],{"__ignoreMap":178},[220,45103,45104,45106,45108],{"class":222,"line":223},[220,45105,343],{"class":264},[220,45107,347],{"class":346},[220,45109,359],{"class":264},[220,45111,45112,45114,45116],{"class":222,"line":179},[220,45113,364],{"class":264},[220,45115,45077],{"class":346},[220,45117,359],{"class":264},[220,45119,45120,45122,45124],{"class":222,"line":389},[220,45121,2550],{"class":264},[220,45123,2553],{"class":346},[220,45125,386],{"class":264},[220,45127,45128,45130,45132],{"class":222,"line":399},[220,45129,2567],{"class":264},[220,45131,45077],{"class":346},[220,45133,359],{"class":264},[220,45135,45136,45138,45140],{"class":222,"line":644},[220,45137,402],{"class":264},[220,45139,347],{"class":346},[220,45141,359],{"class":264},[212,45143,45144],{"className":409,"code":45099,"language":411,"meta":178,"style":178},[99,45145,45146,45154,45162,45170,45178],{"__ignoreMap":178},[220,45147,45148,45150,45152],{"class":222,"line":223},[220,45149,343],{"class":264},[220,45151,347],{"class":420},[220,45153,359],{"class":264},[220,45155,45156,45158,45160],{"class":222,"line":179},[220,45157,364],{"class":264},[220,45159,45077],{"class":420},[220,45161,359],{"class":264},[220,45163,45164,45166,45168],{"class":222,"line":389},[220,45165,2550],{"class":264},[220,45167,2553],{"class":420},[220,45169,386],{"class":264},[220,45171,45172,45174,45176],{"class":222,"line":399},[220,45173,2567],{"class":264},[220,45175,45077],{"class":420},[220,45177,359],{"class":264},[220,45179,45180,45182,45184],{"class":222,"line":644},[220,45181,402],{"class":264},[220,45183,347],{"class":420},[220,45185,359],{"class":264},[212,45187,45188],{"className":2844,"code":45099,"language":2846,"meta":178,"style":178},[99,45189,45190,45198,45206,45214,45222],{"__ignoreMap":178},[220,45191,45192,45194,45196],{"class":222,"line":223},[220,45193,343],{"class":264},[220,45195,347],{"class":420},[220,45197,359],{"class":264},[220,45199,45200,45202,45204],{"class":222,"line":179},[220,45201,364],{"class":264},[220,45203,45077],{"class":420},[220,45205,359],{"class":264},[220,45207,45208,45210,45212],{"class":222,"line":389},[220,45209,2550],{"class":264},[220,45211,2553],{"class":420},[220,45213,386],{"class":264},[220,45215,45216,45218,45220],{"class":222,"line":399},[220,45217,2567],{"class":264},[220,45219,45077],{"class":420},[220,45221,359],{"class":264},[220,45223,45224,45226,45228],{"class":222,"line":644},[220,45225,402],{"class":264},[220,45227,347],{"class":420},[220,45229,359],{"class":264},[212,45231,45232],{"className":468,"code":45099,"language":469,"meta":178,"style":178},[99,45233,45234,45242,45250,45258,45266],{"__ignoreMap":178},[220,45235,45236,45238,45240],{"class":222,"line":223},[220,45237,343],{"class":264},[220,45239,347],{"class":420},[220,45241,359],{"class":264},[220,45243,45244,45246,45248],{"class":222,"line":179},[220,45245,364],{"class":264},[220,45247,45077],{"class":420},[220,45249,359],{"class":264},[220,45251,45252,45254,45256],{"class":222,"line":389},[220,45253,2550],{"class":264},[220,45255,2553],{"class":420},[220,45257,386],{"class":264},[220,45259,45260,45262,45264],{"class":222,"line":399},[220,45261,2567],{"class":264},[220,45263,45077],{"class":420},[220,45265,359],{"class":264},[220,45267,45268,45270,45272],{"class":222,"line":644},[220,45269,402],{"class":264},[220,45271,347],{"class":420},[220,45273,359],{"class":264},[212,45275,45277],{"className":251,"code":45276,"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,45278,45279,45289,45293,45307,45311,45320,45328,45332,45336],{"__ignoreMap":178},[220,45280,45281,45283,45285,45287],{"class":222,"line":223},[220,45282,261],{"class":260},[220,45284,9763],{"class":264},[220,45286,268],{"class":260},[220,45288,9768],{"class":230},[220,45290,45291],{"class":222,"line":179},[220,45292,647],{"emptyLinePlaceholder":194},[220,45294,45295,45297,45299,45301,45303,45305],{"class":222,"line":389},[220,45296,1735],{"class":260},[220,45298,1738],{"class":420},[220,45300,1741],{"class":260},[220,45302,1744],{"class":260},[220,45304,1747],{"class":226},[220,45306,1750],{"class":264},[220,45308,45309],{"class":222,"line":399},[220,45310,1765],{"class":264},[220,45312,45313,45315,45318],{"class":222,"line":644},[220,45314,1770],{"class":264},[220,45316,45317],{"class":230},"'Form3D'",[220,45319,5255],{"class":264},[220,45321,45322,45324,45326],{"class":222,"line":650},[220,45323,5260],{"class":264},[220,45325,3206],{"class":230},[220,45327,2465],{"class":264},[220,45329,45330],{"class":222,"line":656},[220,45331,5277],{"class":264},[220,45333,45334],{"class":222,"line":673},[220,45335,1787],{"class":264},[220,45337,45338],{"class":222,"line":682},[220,45339,1792],{"class":264},[1504,45341,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":45343},[45344,45345],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":45077,"description":45085},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":45352,"title":45353,"body":45354,"category":31344,"componentType":24141,"description":45361,"extension":191,"meta":45546,"navigation":194,"path":45547,"requiresChild":30811,"seo":45548,"stem":45549,"__hash__":45550},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":45355,"toc":45542},[45356,45359,45362,45364,45366,45369,45371,45540],[11,45357,45353],{"id":45358},"fractalnoise",[15,45360,45361],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[30192,45363],{"component":45353},[23,45365,30196],{"id":24798},[30198,45367],{":props":45368},"[{\"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,45370,30204],{"id":30203},[246,45372,45373,45402,45430,45458,45486],{":tabs":1557},[212,45374,45376],{"className":334,"code":45375,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,45377,45378,45386,45394],{"__ignoreMap":178},[220,45379,45380,45382,45384],{"class":222,"line":223},[220,45381,343],{"class":264},[220,45383,347],{"class":346},[220,45385,359],{"class":264},[220,45387,45388,45390,45392],{"class":222,"line":179},[220,45389,364],{"class":264},[220,45391,45353],{"class":346},[220,45393,386],{"class":264},[220,45395,45396,45398,45400],{"class":222,"line":389},[220,45397,402],{"class":264},[220,45399,347],{"class":346},[220,45401,359],{"class":264},[212,45403,45404],{"className":409,"code":45375,"language":411,"meta":178,"style":178},[99,45405,45406,45414,45422],{"__ignoreMap":178},[220,45407,45408,45410,45412],{"class":222,"line":223},[220,45409,343],{"class":264},[220,45411,347],{"class":420},[220,45413,359],{"class":264},[220,45415,45416,45418,45420],{"class":222,"line":179},[220,45417,364],{"class":264},[220,45419,45353],{"class":420},[220,45421,386],{"class":264},[220,45423,45424,45426,45428],{"class":222,"line":389},[220,45425,402],{"class":264},[220,45427,347],{"class":420},[220,45429,359],{"class":264},[212,45431,45432],{"className":2844,"code":45375,"language":2846,"meta":178,"style":178},[99,45433,45434,45442,45450],{"__ignoreMap":178},[220,45435,45436,45438,45440],{"class":222,"line":223},[220,45437,343],{"class":264},[220,45439,347],{"class":420},[220,45441,359],{"class":264},[220,45443,45444,45446,45448],{"class":222,"line":179},[220,45445,364],{"class":264},[220,45447,45353],{"class":420},[220,45449,386],{"class":264},[220,45451,45452,45454,45456],{"class":222,"line":389},[220,45453,402],{"class":264},[220,45455,347],{"class":420},[220,45457,359],{"class":264},[212,45459,45460],{"className":468,"code":45375,"language":469,"meta":178,"style":178},[99,45461,45462,45470,45478],{"__ignoreMap":178},[220,45463,45464,45466,45468],{"class":222,"line":223},[220,45465,343],{"class":264},[220,45467,347],{"class":420},[220,45469,359],{"class":264},[220,45471,45472,45474,45476],{"class":222,"line":179},[220,45473,364],{"class":264},[220,45475,45353],{"class":420},[220,45477,386],{"class":264},[220,45479,45480,45482,45484],{"class":222,"line":389},[220,45481,402],{"class":264},[220,45483,347],{"class":420},[220,45485,359],{"class":264},[212,45487,45489],{"className":251,"code":45488,"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,45490,45491,45501,45505,45519,45523,45532,45536],{"__ignoreMap":178},[220,45492,45493,45495,45497,45499],{"class":222,"line":223},[220,45494,261],{"class":260},[220,45496,9763],{"class":264},[220,45498,268],{"class":260},[220,45500,9768],{"class":230},[220,45502,45503],{"class":222,"line":179},[220,45504,647],{"emptyLinePlaceholder":194},[220,45506,45507,45509,45511,45513,45515,45517],{"class":222,"line":389},[220,45508,1735],{"class":260},[220,45510,1738],{"class":420},[220,45512,1741],{"class":260},[220,45514,1744],{"class":260},[220,45516,1747],{"class":226},[220,45518,1750],{"class":264},[220,45520,45521],{"class":222,"line":399},[220,45522,1765],{"class":264},[220,45524,45525,45527,45530],{"class":222,"line":644},[220,45526,1770],{"class":264},[220,45528,45529],{"class":230},"'FractalNoise'",[220,45531,2465],{"class":264},[220,45533,45534],{"class":222,"line":650},[220,45535,1787],{"class":264},[220,45537,45538],{"class":222,"line":656},[220,45539,1792],{"class":264},[1504,45541,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":45543},[45544,45545],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":45353,"description":45361},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":45552,"title":45553,"body":45554,"category":33488,"componentType":24141,"description":45561,"extension":191,"meta":45746,"navigation":194,"path":45747,"requiresChild":30811,"seo":45748,"stem":45749,"__hash__":45750},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":45555,"toc":45742},[45556,45559,45562,45564,45566,45569,45571,45740],[11,45557,45553],{"id":45558},"frost",[15,45560,45561],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[30192,45563],{"component":45553},[23,45565,30196],{"id":24798},[30198,45567],{":props":45568},"[{\"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,45570,30204],{"id":30203},[246,45572,45573,45602,45630,45658,45686],{":tabs":1557},[212,45574,45576],{"className":334,"code":45575,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,45577,45578,45586,45594],{"__ignoreMap":178},[220,45579,45580,45582,45584],{"class":222,"line":223},[220,45581,343],{"class":264},[220,45583,347],{"class":346},[220,45585,359],{"class":264},[220,45587,45588,45590,45592],{"class":222,"line":179},[220,45589,364],{"class":264},[220,45591,45553],{"class":346},[220,45593,386],{"class":264},[220,45595,45596,45598,45600],{"class":222,"line":389},[220,45597,402],{"class":264},[220,45599,347],{"class":346},[220,45601,359],{"class":264},[212,45603,45604],{"className":409,"code":45575,"language":411,"meta":178,"style":178},[99,45605,45606,45614,45622],{"__ignoreMap":178},[220,45607,45608,45610,45612],{"class":222,"line":223},[220,45609,343],{"class":264},[220,45611,347],{"class":420},[220,45613,359],{"class":264},[220,45615,45616,45618,45620],{"class":222,"line":179},[220,45617,364],{"class":264},[220,45619,45553],{"class":420},[220,45621,386],{"class":264},[220,45623,45624,45626,45628],{"class":222,"line":389},[220,45625,402],{"class":264},[220,45627,347],{"class":420},[220,45629,359],{"class":264},[212,45631,45632],{"className":2844,"code":45575,"language":2846,"meta":178,"style":178},[99,45633,45634,45642,45650],{"__ignoreMap":178},[220,45635,45636,45638,45640],{"class":222,"line":223},[220,45637,343],{"class":264},[220,45639,347],{"class":420},[220,45641,359],{"class":264},[220,45643,45644,45646,45648],{"class":222,"line":179},[220,45645,364],{"class":264},[220,45647,45553],{"class":420},[220,45649,386],{"class":264},[220,45651,45652,45654,45656],{"class":222,"line":389},[220,45653,402],{"class":264},[220,45655,347],{"class":420},[220,45657,359],{"class":264},[212,45659,45660],{"className":468,"code":45575,"language":469,"meta":178,"style":178},[99,45661,45662,45670,45678],{"__ignoreMap":178},[220,45663,45664,45666,45668],{"class":222,"line":223},[220,45665,343],{"class":264},[220,45667,347],{"class":420},[220,45669,359],{"class":264},[220,45671,45672,45674,45676],{"class":222,"line":179},[220,45673,364],{"class":264},[220,45675,45553],{"class":420},[220,45677,386],{"class":264},[220,45679,45680,45682,45684],{"class":222,"line":389},[220,45681,402],{"class":264},[220,45683,347],{"class":420},[220,45685,359],{"class":264},[212,45687,45689],{"className":251,"code":45688,"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,45690,45691,45701,45705,45719,45723,45732,45736],{"__ignoreMap":178},[220,45692,45693,45695,45697,45699],{"class":222,"line":223},[220,45694,261],{"class":260},[220,45696,9763],{"class":264},[220,45698,268],{"class":260},[220,45700,9768],{"class":230},[220,45702,45703],{"class":222,"line":179},[220,45704,647],{"emptyLinePlaceholder":194},[220,45706,45707,45709,45711,45713,45715,45717],{"class":222,"line":389},[220,45708,1735],{"class":260},[220,45710,1738],{"class":420},[220,45712,1741],{"class":260},[220,45714,1744],{"class":260},[220,45716,1747],{"class":226},[220,45718,1750],{"class":264},[220,45720,45721],{"class":222,"line":399},[220,45722,1765],{"class":264},[220,45724,45725,45727,45730],{"class":222,"line":644},[220,45726,1770],{"class":264},[220,45728,45729],{"class":230},"'Frost'",[220,45731,2465],{"class":264},[220,45733,45734],{"class":222,"line":650},[220,45735,1787],{"class":264},[220,45737,45738],{"class":222,"line":656},[220,45739,1792],{"class":264},[1504,45741,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":45743},[45744,45745],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":45553,"description":45561},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":45752,"title":45753,"body":45754,"category":31344,"componentType":24141,"description":45761,"extension":191,"meta":45946,"navigation":194,"path":45947,"requiresChild":30811,"seo":45948,"stem":45949,"__hash__":45950},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":45755,"toc":45942},[45756,45759,45762,45764,45766,45769,45771,45940],[11,45757,45753],{"id":45758},"gabornoise",[15,45760,45761],{},"Oriented sine-grain noise with a fingerprint-like flow",[30192,45763],{"component":45753},[23,45765,30196],{"id":24798},[30198,45767],{":props":45768},"[{\"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,45770,30204],{"id":30203},[246,45772,45773,45802,45830,45858,45886],{":tabs":1557},[212,45774,45776],{"className":334,"code":45775,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,45777,45778,45786,45794],{"__ignoreMap":178},[220,45779,45780,45782,45784],{"class":222,"line":223},[220,45781,343],{"class":264},[220,45783,347],{"class":346},[220,45785,359],{"class":264},[220,45787,45788,45790,45792],{"class":222,"line":179},[220,45789,364],{"class":264},[220,45791,45753],{"class":346},[220,45793,386],{"class":264},[220,45795,45796,45798,45800],{"class":222,"line":389},[220,45797,402],{"class":264},[220,45799,347],{"class":346},[220,45801,359],{"class":264},[212,45803,45804],{"className":409,"code":45775,"language":411,"meta":178,"style":178},[99,45805,45806,45814,45822],{"__ignoreMap":178},[220,45807,45808,45810,45812],{"class":222,"line":223},[220,45809,343],{"class":264},[220,45811,347],{"class":420},[220,45813,359],{"class":264},[220,45815,45816,45818,45820],{"class":222,"line":179},[220,45817,364],{"class":264},[220,45819,45753],{"class":420},[220,45821,386],{"class":264},[220,45823,45824,45826,45828],{"class":222,"line":389},[220,45825,402],{"class":264},[220,45827,347],{"class":420},[220,45829,359],{"class":264},[212,45831,45832],{"className":2844,"code":45775,"language":2846,"meta":178,"style":178},[99,45833,45834,45842,45850],{"__ignoreMap":178},[220,45835,45836,45838,45840],{"class":222,"line":223},[220,45837,343],{"class":264},[220,45839,347],{"class":420},[220,45841,359],{"class":264},[220,45843,45844,45846,45848],{"class":222,"line":179},[220,45845,364],{"class":264},[220,45847,45753],{"class":420},[220,45849,386],{"class":264},[220,45851,45852,45854,45856],{"class":222,"line":389},[220,45853,402],{"class":264},[220,45855,347],{"class":420},[220,45857,359],{"class":264},[212,45859,45860],{"className":468,"code":45775,"language":469,"meta":178,"style":178},[99,45861,45862,45870,45878],{"__ignoreMap":178},[220,45863,45864,45866,45868],{"class":222,"line":223},[220,45865,343],{"class":264},[220,45867,347],{"class":420},[220,45869,359],{"class":264},[220,45871,45872,45874,45876],{"class":222,"line":179},[220,45873,364],{"class":264},[220,45875,45753],{"class":420},[220,45877,386],{"class":264},[220,45879,45880,45882,45884],{"class":222,"line":389},[220,45881,402],{"class":264},[220,45883,347],{"class":420},[220,45885,359],{"class":264},[212,45887,45889],{"className":251,"code":45888,"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,45890,45891,45901,45905,45919,45923,45932,45936],{"__ignoreMap":178},[220,45892,45893,45895,45897,45899],{"class":222,"line":223},[220,45894,261],{"class":260},[220,45896,9763],{"class":264},[220,45898,268],{"class":260},[220,45900,9768],{"class":230},[220,45902,45903],{"class":222,"line":179},[220,45904,647],{"emptyLinePlaceholder":194},[220,45906,45907,45909,45911,45913,45915,45917],{"class":222,"line":389},[220,45908,1735],{"class":260},[220,45910,1738],{"class":420},[220,45912,1741],{"class":260},[220,45914,1744],{"class":260},[220,45916,1747],{"class":226},[220,45918,1750],{"class":264},[220,45920,45921],{"class":222,"line":399},[220,45922,1765],{"class":264},[220,45924,45925,45927,45930],{"class":222,"line":644},[220,45926,1770],{"class":264},[220,45928,45929],{"class":230},"'GaborNoise'",[220,45931,2465],{"class":264},[220,45933,45934],{"class":222,"line":650},[220,45935,1787],{"class":264},[220,45937,45938],{"class":222,"line":656},[220,45939,1792],{"class":264},[1504,45941,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":45943},[45944,45945],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":45753,"description":45761},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":45952,"title":13722,"body":45953,"category":33488,"componentType":24147,"description":45960,"extension":191,"meta":46220,"navigation":194,"path":46221,"requiresChild":194,"seo":46222,"stem":46223,"__hash__":46224},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":45954,"toc":46216},[45955,45958,45961,45963,45965,45968,45970,46214],[11,45956,13722],{"id":45957},"glass",[15,45959,45960],{},"Optically realistic glass lens driven in a custom shape",[30192,45962],{"component":13722},[23,45964,30196],{"id":24798},[30198,45966],{":props":45967},"[{\"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,45969,30204],{"id":30203},[246,45971,45972,46017,46061,46105,46149],{":tabs":1557},[212,45973,45975],{"className":334,"code":45974,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,45976,45977,45985,45993,46001,46009],{"__ignoreMap":178},[220,45978,45979,45981,45983],{"class":222,"line":223},[220,45980,343],{"class":264},[220,45982,347],{"class":346},[220,45984,359],{"class":264},[220,45986,45987,45989,45991],{"class":222,"line":179},[220,45988,364],{"class":264},[220,45990,13722],{"class":346},[220,45992,359],{"class":264},[220,45994,45995,45997,45999],{"class":222,"line":389},[220,45996,2550],{"class":264},[220,45998,2553],{"class":346},[220,46000,386],{"class":264},[220,46002,46003,46005,46007],{"class":222,"line":399},[220,46004,2567],{"class":264},[220,46006,13722],{"class":346},[220,46008,359],{"class":264},[220,46010,46011,46013,46015],{"class":222,"line":644},[220,46012,402],{"class":264},[220,46014,347],{"class":346},[220,46016,359],{"class":264},[212,46018,46019],{"className":409,"code":45974,"language":411,"meta":178,"style":178},[99,46020,46021,46029,46037,46045,46053],{"__ignoreMap":178},[220,46022,46023,46025,46027],{"class":222,"line":223},[220,46024,343],{"class":264},[220,46026,347],{"class":420},[220,46028,359],{"class":264},[220,46030,46031,46033,46035],{"class":222,"line":179},[220,46032,364],{"class":264},[220,46034,13722],{"class":420},[220,46036,359],{"class":264},[220,46038,46039,46041,46043],{"class":222,"line":389},[220,46040,2550],{"class":264},[220,46042,2553],{"class":420},[220,46044,386],{"class":264},[220,46046,46047,46049,46051],{"class":222,"line":399},[220,46048,2567],{"class":264},[220,46050,13722],{"class":420},[220,46052,359],{"class":264},[220,46054,46055,46057,46059],{"class":222,"line":644},[220,46056,402],{"class":264},[220,46058,347],{"class":420},[220,46060,359],{"class":264},[212,46062,46063],{"className":2844,"code":45974,"language":2846,"meta":178,"style":178},[99,46064,46065,46073,46081,46089,46097],{"__ignoreMap":178},[220,46066,46067,46069,46071],{"class":222,"line":223},[220,46068,343],{"class":264},[220,46070,347],{"class":420},[220,46072,359],{"class":264},[220,46074,46075,46077,46079],{"class":222,"line":179},[220,46076,364],{"class":264},[220,46078,13722],{"class":420},[220,46080,359],{"class":264},[220,46082,46083,46085,46087],{"class":222,"line":389},[220,46084,2550],{"class":264},[220,46086,2553],{"class":420},[220,46088,386],{"class":264},[220,46090,46091,46093,46095],{"class":222,"line":399},[220,46092,2567],{"class":264},[220,46094,13722],{"class":420},[220,46096,359],{"class":264},[220,46098,46099,46101,46103],{"class":222,"line":644},[220,46100,402],{"class":264},[220,46102,347],{"class":420},[220,46104,359],{"class":264},[212,46106,46107],{"className":468,"code":45974,"language":469,"meta":178,"style":178},[99,46108,46109,46117,46125,46133,46141],{"__ignoreMap":178},[220,46110,46111,46113,46115],{"class":222,"line":223},[220,46112,343],{"class":264},[220,46114,347],{"class":420},[220,46116,359],{"class":264},[220,46118,46119,46121,46123],{"class":222,"line":179},[220,46120,364],{"class":264},[220,46122,13722],{"class":420},[220,46124,359],{"class":264},[220,46126,46127,46129,46131],{"class":222,"line":389},[220,46128,2550],{"class":264},[220,46130,2553],{"class":420},[220,46132,386],{"class":264},[220,46134,46135,46137,46139],{"class":222,"line":399},[220,46136,2567],{"class":264},[220,46138,13722],{"class":420},[220,46140,359],{"class":264},[220,46142,46143,46145,46147],{"class":222,"line":644},[220,46144,402],{"class":264},[220,46146,347],{"class":420},[220,46148,359],{"class":264},[212,46150,46152],{"className":251,"code":46151,"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,46153,46154,46164,46168,46182,46186,46194,46202,46206,46210],{"__ignoreMap":178},[220,46155,46156,46158,46160,46162],{"class":222,"line":223},[220,46157,261],{"class":260},[220,46159,9763],{"class":264},[220,46161,268],{"class":260},[220,46163,9768],{"class":230},[220,46165,46166],{"class":222,"line":179},[220,46167,647],{"emptyLinePlaceholder":194},[220,46169,46170,46172,46174,46176,46178,46180],{"class":222,"line":389},[220,46171,1735],{"class":260},[220,46173,1738],{"class":420},[220,46175,1741],{"class":260},[220,46177,1744],{"class":260},[220,46179,1747],{"class":226},[220,46181,1750],{"class":264},[220,46183,46184],{"class":222,"line":399},[220,46185,1765],{"class":264},[220,46187,46188,46190,46192],{"class":222,"line":644},[220,46189,1770],{"class":264},[220,46191,19795],{"class":230},[220,46193,5255],{"class":264},[220,46195,46196,46198,46200],{"class":222,"line":650},[220,46197,5260],{"class":264},[220,46199,3206],{"class":230},[220,46201,2465],{"class":264},[220,46203,46204],{"class":222,"line":656},[220,46205,5277],{"class":264},[220,46207,46208],{"class":222,"line":673},[220,46209,1787],{"class":264},[220,46211,46212],{"class":222,"line":682},[220,46213,1792],{"class":264},[1504,46215,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":46217},[46218,46219],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":13722,"description":45960},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":46226,"title":4471,"body":46227,"category":31677,"componentType":24147,"description":46234,"extension":191,"meta":46551,"navigation":194,"path":46552,"requiresChild":194,"seo":46553,"stem":46554,"__hash__":46555},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":46228,"toc":46547},[46229,46232,46235,46237,46239,46242,46244,46545],[11,46230,4471],{"id":46231},"glasstiles",[15,46233,46234],{},"Refraction-like distortion in a tile grid pattern",[30192,46236],{"component":4471},[23,46238,30196],{"id":24798},[30198,46240],{":props":46241},"[{\"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,46243,30204],{"id":30203},[246,46245,46246,46303,46362,46418,46476],{":tabs":1557},[212,46247,46249],{"className":334,"code":46248,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,46250,46251,46259,46266,46275,46279,46287,46295],{"__ignoreMap":178},[220,46252,46253,46255,46257],{"class":222,"line":223},[220,46254,343],{"class":264},[220,46256,347],{"class":346},[220,46258,359],{"class":264},[220,46260,46261,46263],{"class":222,"line":179},[220,46262,364],{"class":264},[220,46264,46265],{"class":346},"GlassTiles\n",[220,46267,46268,46270,46272],{"class":222,"line":389},[220,46269,18633],{"class":226},[220,46271,353],{"class":264},[220,46273,46274],{"class":230},"\"2\"\n",[220,46276,46277],{"class":222,"line":399},[220,46278,30240],{"class":264},[220,46280,46281,46283,46285],{"class":222,"line":644},[220,46282,2550],{"class":264},[220,46284,2553],{"class":346},[220,46286,386],{"class":264},[220,46288,46289,46291,46293],{"class":222,"line":650},[220,46290,2567],{"class":264},[220,46292,4471],{"class":346},[220,46294,359],{"class":264},[220,46296,46297,46299,46301],{"class":222,"line":656},[220,46298,402],{"class":264},[220,46300,347],{"class":346},[220,46302,359],{"class":264},[212,46304,46306],{"className":409,"code":46305,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,46307,46308,46316,46322,46334,46338,46346,46354],{"__ignoreMap":178},[220,46309,46310,46312,46314],{"class":222,"line":223},[220,46311,343],{"class":264},[220,46313,347],{"class":420},[220,46315,359],{"class":264},[220,46317,46318,46320],{"class":222,"line":179},[220,46319,364],{"class":264},[220,46321,46265],{"class":420},[220,46323,46324,46326,46328,46330,46332],{"class":222,"line":389},[220,46325,18744],{"class":226},[220,46327,353],{"class":260},[220,46329,743],{"class":264},[220,46331,5460],{"class":420},[220,46333,749],{"class":264},[220,46335,46336],{"class":222,"line":399},[220,46337,30240],{"class":264},[220,46339,46340,46342,46344],{"class":222,"line":644},[220,46341,2550],{"class":264},[220,46343,2553],{"class":420},[220,46345,386],{"class":264},[220,46347,46348,46350,46352],{"class":222,"line":650},[220,46349,2567],{"class":264},[220,46351,4471],{"class":420},[220,46353,359],{"class":264},[220,46355,46356,46358,46360],{"class":222,"line":656},[220,46357,402],{"class":264},[220,46359,347],{"class":420},[220,46361,359],{"class":264},[212,46363,46364],{"className":2844,"code":46305,"language":2846,"meta":178,"style":178},[99,46365,46366,46374,46380,46390,46394,46402,46410],{"__ignoreMap":178},[220,46367,46368,46370,46372],{"class":222,"line":223},[220,46369,343],{"class":264},[220,46371,347],{"class":420},[220,46373,359],{"class":264},[220,46375,46376,46378],{"class":222,"line":179},[220,46377,364],{"class":264},[220,46379,46265],{"class":420},[220,46381,46382,46384,46386,46388],{"class":222,"line":389},[220,46383,18744],{"class":226},[220,46385,28138],{"class":264},[220,46387,5460],{"class":420},[220,46389,749],{"class":264},[220,46391,46392],{"class":222,"line":399},[220,46393,30240],{"class":264},[220,46395,46396,46398,46400],{"class":222,"line":644},[220,46397,2550],{"class":264},[220,46399,2553],{"class":420},[220,46401,386],{"class":264},[220,46403,46404,46406,46408],{"class":222,"line":650},[220,46405,2567],{"class":264},[220,46407,4471],{"class":420},[220,46409,359],{"class":264},[220,46411,46412,46414,46416],{"class":222,"line":656},[220,46413,402],{"class":264},[220,46415,347],{"class":420},[220,46417,359],{"class":264},[212,46419,46420],{"className":468,"code":46305,"language":469,"meta":178,"style":178},[99,46421,46422,46430,46436,46448,46452,46460,46468],{"__ignoreMap":178},[220,46423,46424,46426,46428],{"class":222,"line":223},[220,46425,343],{"class":264},[220,46427,347],{"class":420},[220,46429,359],{"class":264},[220,46431,46432,46434],{"class":222,"line":179},[220,46433,364],{"class":264},[220,46435,46265],{"class":420},[220,46437,46438,46440,46442,46444,46446],{"class":222,"line":389},[220,46439,18744],{"class":226},[220,46441,353],{"class":260},[220,46443,743],{"class":264},[220,46445,5460],{"class":420},[220,46447,749],{"class":264},[220,46449,46450],{"class":222,"line":399},[220,46451,30240],{"class":264},[220,46453,46454,46456,46458],{"class":222,"line":644},[220,46455,2550],{"class":264},[220,46457,2553],{"class":420},[220,46459,386],{"class":264},[220,46461,46462,46464,46466],{"class":222,"line":650},[220,46463,2567],{"class":264},[220,46465,4471],{"class":420},[220,46467,359],{"class":264},[220,46469,46470,46472,46474],{"class":222,"line":656},[220,46471,402],{"class":264},[220,46473,347],{"class":420},[220,46475,359],{"class":264},[212,46477,46479],{"className":251,"code":46478,"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,46480,46481,46491,46495,46509,46513,46525,46533,46537,46541],{"__ignoreMap":178},[220,46482,46483,46485,46487,46489],{"class":222,"line":223},[220,46484,261],{"class":260},[220,46486,9763],{"class":264},[220,46488,268],{"class":260},[220,46490,9768],{"class":230},[220,46492,46493],{"class":222,"line":179},[220,46494,647],{"emptyLinePlaceholder":194},[220,46496,46497,46499,46501,46503,46505,46507],{"class":222,"line":389},[220,46498,1735],{"class":260},[220,46500,1738],{"class":420},[220,46502,1741],{"class":260},[220,46504,1744],{"class":260},[220,46506,1747],{"class":226},[220,46508,1750],{"class":264},[220,46510,46511],{"class":222,"line":399},[220,46512,1765],{"class":264},[220,46514,46515,46517,46519,46521,46523],{"class":222,"line":644},[220,46516,1770],{"class":264},[220,46518,4829],{"class":230},[220,46520,30484],{"class":264},[220,46522,5460],{"class":420},[220,46524,5792],{"class":264},[220,46526,46527,46529,46531],{"class":222,"line":650},[220,46528,5260],{"class":264},[220,46530,3206],{"class":230},[220,46532,2465],{"class":264},[220,46534,46535],{"class":222,"line":656},[220,46536,5277],{"class":264},[220,46538,46539],{"class":222,"line":673},[220,46540,1787],{"class":264},[220,46542,46543],{"class":222,"line":682},[220,46544,1792],{"class":264},[1504,46546,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":46548},[46549,46550],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":4471,"description":46234},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":46557,"title":46558,"body":46559,"category":31087,"componentType":24147,"description":46566,"extension":191,"meta":46883,"navigation":194,"path":46884,"requiresChild":194,"seo":46885,"stem":46886,"__hash__":46887},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":46560,"toc":46879},[46561,46564,46567,46569,46571,46574,46576,46877],[11,46562,46558],{"id":46563},"glitch",[15,46565,46566],{},"Digital glitch that melts pixels and distorts colors",[30192,46568],{"component":46558},[23,46570,30196],{"id":24798},[30198,46572],{":props":46573},"[{\"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,46575,30204],{"id":30203},[246,46577,46578,46634,46693,46749,46807],{":tabs":1557},[212,46579,46581],{"className":334,"code":46580,"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,46582,46583,46591,46598,46606,46610,46618,46626],{"__ignoreMap":178},[220,46584,46585,46587,46589],{"class":222,"line":223},[220,46586,343],{"class":264},[220,46588,347],{"class":346},[220,46590,359],{"class":264},[220,46592,46593,46595],{"class":222,"line":179},[220,46594,364],{"class":264},[220,46596,46597],{"class":346},"Glitch\n",[220,46599,46600,46602,46604],{"class":222,"line":389},[220,46601,18633],{"class":226},[220,46603,353],{"class":264},[220,46605,38802],{"class":230},[220,46607,46608],{"class":222,"line":399},[220,46609,30240],{"class":264},[220,46611,46612,46614,46616],{"class":222,"line":644},[220,46613,2550],{"class":264},[220,46615,2553],{"class":346},[220,46617,386],{"class":264},[220,46619,46620,46622,46624],{"class":222,"line":650},[220,46621,2567],{"class":264},[220,46623,46558],{"class":346},[220,46625,359],{"class":264},[220,46627,46628,46630,46632],{"class":222,"line":656},[220,46629,402],{"class":264},[220,46631,347],{"class":346},[220,46633,359],{"class":264},[212,46635,46637],{"className":409,"code":46636,"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,46638,46639,46647,46653,46665,46669,46677,46685],{"__ignoreMap":178},[220,46640,46641,46643,46645],{"class":222,"line":223},[220,46642,343],{"class":264},[220,46644,347],{"class":420},[220,46646,359],{"class":264},[220,46648,46649,46651],{"class":222,"line":179},[220,46650,364],{"class":264},[220,46652,46597],{"class":420},[220,46654,46655,46657,46659,46661,46663],{"class":222,"line":389},[220,46656,18744],{"class":226},[220,46658,353],{"class":260},[220,46660,743],{"class":264},[220,46662,6000],{"class":420},[220,46664,749],{"class":264},[220,46666,46667],{"class":222,"line":399},[220,46668,30240],{"class":264},[220,46670,46671,46673,46675],{"class":222,"line":644},[220,46672,2550],{"class":264},[220,46674,2553],{"class":420},[220,46676,386],{"class":264},[220,46678,46679,46681,46683],{"class":222,"line":650},[220,46680,2567],{"class":264},[220,46682,46558],{"class":420},[220,46684,359],{"class":264},[220,46686,46687,46689,46691],{"class":222,"line":656},[220,46688,402],{"class":264},[220,46690,347],{"class":420},[220,46692,359],{"class":264},[212,46694,46695],{"className":2844,"code":46636,"language":2846,"meta":178,"style":178},[99,46696,46697,46705,46711,46721,46725,46733,46741],{"__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],{"class":222,"line":179},[220,46708,364],{"class":264},[220,46710,46597],{"class":420},[220,46712,46713,46715,46717,46719],{"class":222,"line":389},[220,46714,18744],{"class":226},[220,46716,28138],{"class":264},[220,46718,6000],{"class":420},[220,46720,749],{"class":264},[220,46722,46723],{"class":222,"line":399},[220,46724,30240],{"class":264},[220,46726,46727,46729,46731],{"class":222,"line":644},[220,46728,2550],{"class":264},[220,46730,2553],{"class":420},[220,46732,386],{"class":264},[220,46734,46735,46737,46739],{"class":222,"line":650},[220,46736,2567],{"class":264},[220,46738,46558],{"class":420},[220,46740,359],{"class":264},[220,46742,46743,46745,46747],{"class":222,"line":656},[220,46744,402],{"class":264},[220,46746,347],{"class":420},[220,46748,359],{"class":264},[212,46750,46751],{"className":468,"code":46636,"language":469,"meta":178,"style":178},[99,46752,46753,46761,46767,46779,46783,46791,46799],{"__ignoreMap":178},[220,46754,46755,46757,46759],{"class":222,"line":223},[220,46756,343],{"class":264},[220,46758,347],{"class":420},[220,46760,359],{"class":264},[220,46762,46763,46765],{"class":222,"line":179},[220,46764,364],{"class":264},[220,46766,46597],{"class":420},[220,46768,46769,46771,46773,46775,46777],{"class":222,"line":389},[220,46770,18744],{"class":226},[220,46772,353],{"class":260},[220,46774,743],{"class":264},[220,46776,6000],{"class":420},[220,46778,749],{"class":264},[220,46780,46781],{"class":222,"line":399},[220,46782,30240],{"class":264},[220,46784,46785,46787,46789],{"class":222,"line":644},[220,46786,2550],{"class":264},[220,46788,2553],{"class":420},[220,46790,386],{"class":264},[220,46792,46793,46795,46797],{"class":222,"line":650},[220,46794,2567],{"class":264},[220,46796,46558],{"class":420},[220,46798,359],{"class":264},[220,46800,46801,46803,46805],{"class":222,"line":656},[220,46802,402],{"class":264},[220,46804,347],{"class":420},[220,46806,359],{"class":264},[212,46808,46810],{"className":251,"code":46809,"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,46811,46812,46822,46826,46840,46844,46857,46865,46869,46873],{"__ignoreMap":178},[220,46813,46814,46816,46818,46820],{"class":222,"line":223},[220,46815,261],{"class":260},[220,46817,9763],{"class":264},[220,46819,268],{"class":260},[220,46821,9768],{"class":230},[220,46823,46824],{"class":222,"line":179},[220,46825,647],{"emptyLinePlaceholder":194},[220,46827,46828,46830,46832,46834,46836,46838],{"class":222,"line":389},[220,46829,1735],{"class":260},[220,46831,1738],{"class":420},[220,46833,1741],{"class":260},[220,46835,1744],{"class":260},[220,46837,1747],{"class":226},[220,46839,1750],{"class":264},[220,46841,46842],{"class":222,"line":399},[220,46843,1765],{"class":264},[220,46845,46846,46848,46851,46853,46855],{"class":222,"line":644},[220,46847,1770],{"class":264},[220,46849,46850],{"class":230},"'Glitch'",[220,46852,30484],{"class":264},[220,46854,6000],{"class":420},[220,46856,5792],{"class":264},[220,46858,46859,46861,46863],{"class":222,"line":650},[220,46860,5260],{"class":264},[220,46862,3206],{"class":230},[220,46864,2465],{"class":264},[220,46866,46867],{"class":222,"line":656},[220,46868,5277],{"class":264},[220,46870,46871],{"class":222,"line":673},[220,46872,1787],{"class":264},[220,46874,46875],{"class":222,"line":682},[220,46876,1792],{"class":264},[1504,46878,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":46880},[46881,46882],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":46558,"description":46566},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":46889,"title":10044,"body":46890,"category":31087,"componentType":24147,"description":46897,"extension":191,"meta":47214,"navigation":194,"path":47215,"requiresChild":194,"seo":47216,"stem":47217,"__hash__":47218},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":46891,"toc":47210},[46892,46895,46898,46900,46902,46905,46907,47208],[11,46893,10044],{"id":46894},"glow",[15,46896,46897],{},"Soft glow effect with adjustable intensity",[30192,46899],{"component":10044},[23,46901,30196],{"id":24798},[30198,46903],{":props":46904},"[{\"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,46906,30204],{"id":30203},[246,46908,46909,46965,47024,47080,47138],{":tabs":1557},[212,46910,46912],{"className":334,"code":46911,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,46913,46914,46922,46929,46937,46941,46949,46957],{"__ignoreMap":178},[220,46915,46916,46918,46920],{"class":222,"line":223},[220,46917,343],{"class":264},[220,46919,347],{"class":346},[220,46921,359],{"class":264},[220,46923,46924,46926],{"class":222,"line":179},[220,46925,364],{"class":264},[220,46927,46928],{"class":346},"Glow\n",[220,46930,46931,46933,46935],{"class":222,"line":389},[220,46932,18633],{"class":226},[220,46934,353],{"class":264},[220,46936,33544],{"class":230},[220,46938,46939],{"class":222,"line":399},[220,46940,30240],{"class":264},[220,46942,46943,46945,46947],{"class":222,"line":644},[220,46944,2550],{"class":264},[220,46946,2553],{"class":346},[220,46948,386],{"class":264},[220,46950,46951,46953,46955],{"class":222,"line":650},[220,46952,2567],{"class":264},[220,46954,10044],{"class":346},[220,46956,359],{"class":264},[220,46958,46959,46961,46963],{"class":222,"line":656},[220,46960,402],{"class":264},[220,46962,347],{"class":346},[220,46964,359],{"class":264},[212,46966,46968],{"className":409,"code":46967,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,46969,46970,46978,46984,46996,47000,47008,47016],{"__ignoreMap":178},[220,46971,46972,46974,46976],{"class":222,"line":223},[220,46973,343],{"class":264},[220,46975,347],{"class":420},[220,46977,359],{"class":264},[220,46979,46980,46982],{"class":222,"line":179},[220,46981,364],{"class":264},[220,46983,46928],{"class":420},[220,46985,46986,46988,46990,46992,46994],{"class":222,"line":389},[220,46987,18744],{"class":226},[220,46989,353],{"class":260},[220,46991,743],{"class":264},[220,46993,6923],{"class":420},[220,46995,749],{"class":264},[220,46997,46998],{"class":222,"line":399},[220,46999,30240],{"class":264},[220,47001,47002,47004,47006],{"class":222,"line":644},[220,47003,2550],{"class":264},[220,47005,2553],{"class":420},[220,47007,386],{"class":264},[220,47009,47010,47012,47014],{"class":222,"line":650},[220,47011,2567],{"class":264},[220,47013,10044],{"class":420},[220,47015,359],{"class":264},[220,47017,47018,47020,47022],{"class":222,"line":656},[220,47019,402],{"class":264},[220,47021,347],{"class":420},[220,47023,359],{"class":264},[212,47025,47026],{"className":2844,"code":46967,"language":2846,"meta":178,"style":178},[99,47027,47028,47036,47042,47052,47056,47064,47072],{"__ignoreMap":178},[220,47029,47030,47032,47034],{"class":222,"line":223},[220,47031,343],{"class":264},[220,47033,347],{"class":420},[220,47035,359],{"class":264},[220,47037,47038,47040],{"class":222,"line":179},[220,47039,364],{"class":264},[220,47041,46928],{"class":420},[220,47043,47044,47046,47048,47050],{"class":222,"line":389},[220,47045,18744],{"class":226},[220,47047,28138],{"class":264},[220,47049,6923],{"class":420},[220,47051,749],{"class":264},[220,47053,47054],{"class":222,"line":399},[220,47055,30240],{"class":264},[220,47057,47058,47060,47062],{"class":222,"line":644},[220,47059,2550],{"class":264},[220,47061,2553],{"class":420},[220,47063,386],{"class":264},[220,47065,47066,47068,47070],{"class":222,"line":650},[220,47067,2567],{"class":264},[220,47069,10044],{"class":420},[220,47071,359],{"class":264},[220,47073,47074,47076,47078],{"class":222,"line":656},[220,47075,402],{"class":264},[220,47077,347],{"class":420},[220,47079,359],{"class":264},[212,47081,47082],{"className":468,"code":46967,"language":469,"meta":178,"style":178},[99,47083,47084,47092,47098,47110,47114,47122,47130],{"__ignoreMap":178},[220,47085,47086,47088,47090],{"class":222,"line":223},[220,47087,343],{"class":264},[220,47089,347],{"class":420},[220,47091,359],{"class":264},[220,47093,47094,47096],{"class":222,"line":179},[220,47095,364],{"class":264},[220,47097,46928],{"class":420},[220,47099,47100,47102,47104,47106,47108],{"class":222,"line":389},[220,47101,18744],{"class":226},[220,47103,353],{"class":260},[220,47105,743],{"class":264},[220,47107,6923],{"class":420},[220,47109,749],{"class":264},[220,47111,47112],{"class":222,"line":399},[220,47113,30240],{"class":264},[220,47115,47116,47118,47120],{"class":222,"line":644},[220,47117,2550],{"class":264},[220,47119,2553],{"class":420},[220,47121,386],{"class":264},[220,47123,47124,47126,47128],{"class":222,"line":650},[220,47125,2567],{"class":264},[220,47127,10044],{"class":420},[220,47129,359],{"class":264},[220,47131,47132,47134,47136],{"class":222,"line":656},[220,47133,402],{"class":264},[220,47135,347],{"class":420},[220,47137,359],{"class":264},[212,47139,47141],{"className":251,"code":47140,"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,47142,47143,47153,47157,47171,47175,47188,47196,47200,47204],{"__ignoreMap":178},[220,47144,47145,47147,47149,47151],{"class":222,"line":223},[220,47146,261],{"class":260},[220,47148,9763],{"class":264},[220,47150,268],{"class":260},[220,47152,9768],{"class":230},[220,47154,47155],{"class":222,"line":179},[220,47156,647],{"emptyLinePlaceholder":194},[220,47158,47159,47161,47163,47165,47167,47169],{"class":222,"line":389},[220,47160,1735],{"class":260},[220,47162,1738],{"class":420},[220,47164,1741],{"class":260},[220,47166,1744],{"class":260},[220,47168,1747],{"class":226},[220,47170,1750],{"class":264},[220,47172,47173],{"class":222,"line":399},[220,47174,1765],{"class":264},[220,47176,47177,47179,47182,47184,47186],{"class":222,"line":644},[220,47178,1770],{"class":264},[220,47180,47181],{"class":230},"'Glow'",[220,47183,30484],{"class":264},[220,47185,6923],{"class":420},[220,47187,5792],{"class":264},[220,47189,47190,47192,47194],{"class":222,"line":650},[220,47191,5260],{"class":264},[220,47193,3206],{"class":230},[220,47195,2465],{"class":264},[220,47197,47198],{"class":222,"line":656},[220,47199,5277],{"class":264},[220,47201,47202],{"class":222,"line":673},[220,47203,1787],{"class":264},[220,47205,47206],{"class":222,"line":682},[220,47207,1792],{"class":264},[1504,47209,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":47211},[47212,47213],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":10044,"description":46897},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":47220,"title":47221,"body":47222,"category":31344,"componentType":24141,"description":47229,"extension":191,"meta":47470,"navigation":194,"path":47471,"requiresChild":30811,"seo":47472,"stem":47473,"__hash__":47474},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":47223,"toc":47466},[47224,47227,47230,47232,47234,47237,47239,47464],[11,47225,47221],{"id":47226},"godrays",[15,47228,47229],{},"Volumetric light rays emanating from a point",[30192,47231],{"component":47221},[23,47233,30196],{"id":24798},[30198,47235],{":props":47236},"[{\"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,47238,30204],{"id":30203},[246,47240,47241,47281,47324,47364,47406],{":tabs":1557},[212,47242,47244],{"className":334,"code":47243,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,47245,47246,47254,47261,47269,47273],{"__ignoreMap":178},[220,47247,47248,47250,47252],{"class":222,"line":223},[220,47249,343],{"class":264},[220,47251,347],{"class":346},[220,47253,359],{"class":264},[220,47255,47256,47258],{"class":222,"line":179},[220,47257,364],{"class":264},[220,47259,47260],{"class":346},"Godrays\n",[220,47262,47263,47265,47267],{"class":222,"line":389},[220,47264,18633],{"class":226},[220,47266,353],{"class":264},[220,47268,7897],{"class":230},[220,47270,47271],{"class":222,"line":399},[220,47272,1234],{"class":264},[220,47274,47275,47277,47279],{"class":222,"line":644},[220,47276,402],{"class":264},[220,47278,347],{"class":346},[220,47280,359],{"class":264},[212,47282,47284],{"className":409,"code":47283,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,47285,47286,47294,47300,47312,47316],{"__ignoreMap":178},[220,47287,47288,47290,47292],{"class":222,"line":223},[220,47289,343],{"class":264},[220,47291,347],{"class":420},[220,47293,359],{"class":264},[220,47295,47296,47298],{"class":222,"line":179},[220,47297,364],{"class":264},[220,47299,47260],{"class":420},[220,47301,47302,47304,47306,47308,47310],{"class":222,"line":389},[220,47303,18744],{"class":226},[220,47305,353],{"class":260},[220,47307,743],{"class":264},[220,47309,4545],{"class":420},[220,47311,749],{"class":264},[220,47313,47314],{"class":222,"line":399},[220,47315,1234],{"class":264},[220,47317,47318,47320,47322],{"class":222,"line":644},[220,47319,402],{"class":264},[220,47321,347],{"class":420},[220,47323,359],{"class":264},[212,47325,47326],{"className":2844,"code":47283,"language":2846,"meta":178,"style":178},[99,47327,47328,47336,47342,47352,47356],{"__ignoreMap":178},[220,47329,47330,47332,47334],{"class":222,"line":223},[220,47331,343],{"class":264},[220,47333,347],{"class":420},[220,47335,359],{"class":264},[220,47337,47338,47340],{"class":222,"line":179},[220,47339,364],{"class":264},[220,47341,47260],{"class":420},[220,47343,47344,47346,47348,47350],{"class":222,"line":389},[220,47345,18744],{"class":226},[220,47347,28138],{"class":264},[220,47349,4545],{"class":420},[220,47351,749],{"class":264},[220,47353,47354],{"class":222,"line":399},[220,47355,1234],{"class":264},[220,47357,47358,47360,47362],{"class":222,"line":644},[220,47359,402],{"class":264},[220,47361,347],{"class":420},[220,47363,359],{"class":264},[212,47365,47366],{"className":468,"code":47283,"language":469,"meta":178,"style":178},[99,47367,47368,47376,47382,47394,47398],{"__ignoreMap":178},[220,47369,47370,47372,47374],{"class":222,"line":223},[220,47371,343],{"class":264},[220,47373,347],{"class":420},[220,47375,359],{"class":264},[220,47377,47378,47380],{"class":222,"line":179},[220,47379,364],{"class":264},[220,47381,47260],{"class":420},[220,47383,47384,47386,47388,47390,47392],{"class":222,"line":389},[220,47385,18744],{"class":226},[220,47387,353],{"class":260},[220,47389,743],{"class":264},[220,47391,4545],{"class":420},[220,47393,749],{"class":264},[220,47395,47396],{"class":222,"line":399},[220,47397,1234],{"class":264},[220,47399,47400,47402,47404],{"class":222,"line":644},[220,47401,402],{"class":264},[220,47403,347],{"class":420},[220,47405,359],{"class":264},[212,47407,47409],{"className":251,"code":47408,"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,47410,47411,47421,47425,47439,47443,47456,47460],{"__ignoreMap":178},[220,47412,47413,47415,47417,47419],{"class":222,"line":223},[220,47414,261],{"class":260},[220,47416,9763],{"class":264},[220,47418,268],{"class":260},[220,47420,9768],{"class":230},[220,47422,47423],{"class":222,"line":179},[220,47424,647],{"emptyLinePlaceholder":194},[220,47426,47427,47429,47431,47433,47435,47437],{"class":222,"line":389},[220,47428,1735],{"class":260},[220,47430,1738],{"class":420},[220,47432,1741],{"class":260},[220,47434,1744],{"class":260},[220,47436,1747],{"class":226},[220,47438,1750],{"class":264},[220,47440,47441],{"class":222,"line":399},[220,47442,1765],{"class":264},[220,47444,47445,47447,47450,47452,47454],{"class":222,"line":644},[220,47446,1770],{"class":264},[220,47448,47449],{"class":230},"'Godrays'",[220,47451,30484],{"class":264},[220,47453,4545],{"class":420},[220,47455,1782],{"class":264},[220,47457,47458],{"class":222,"line":650},[220,47459,1787],{"class":264},[220,47461,47462],{"class":222,"line":656},[220,47463,1792],{"class":264},[1504,47465,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":47467},[47468,47469],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":47221,"description":47229},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":47476,"title":47477,"body":47478,"category":33488,"componentType":24141,"description":47485,"extension":191,"meta":47670,"navigation":194,"path":47671,"requiresChild":30811,"seo":47672,"stem":47673,"__hash__":47674},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":47479,"toc":47666},[47480,47483,47486,47488,47490,47493,47495,47664],[11,47481,47477],{"id":47482},"goo",[15,47484,47485],{},"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",[30192,47487],{"component":47477},[23,47489,30196],{"id":24798},[30198,47491],{":props":47492},"[{\"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,47494,30204],{"id":30203},[246,47496,47497,47526,47554,47582,47610],{":tabs":1557},[212,47498,47500],{"className":334,"code":47499,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,47501,47502,47510,47518],{"__ignoreMap":178},[220,47503,47504,47506,47508],{"class":222,"line":223},[220,47505,343],{"class":264},[220,47507,347],{"class":346},[220,47509,359],{"class":264},[220,47511,47512,47514,47516],{"class":222,"line":179},[220,47513,364],{"class":264},[220,47515,47477],{"class":346},[220,47517,386],{"class":264},[220,47519,47520,47522,47524],{"class":222,"line":389},[220,47521,402],{"class":264},[220,47523,347],{"class":346},[220,47525,359],{"class":264},[212,47527,47528],{"className":409,"code":47499,"language":411,"meta":178,"style":178},[99,47529,47530,47538,47546],{"__ignoreMap":178},[220,47531,47532,47534,47536],{"class":222,"line":223},[220,47533,343],{"class":264},[220,47535,347],{"class":420},[220,47537,359],{"class":264},[220,47539,47540,47542,47544],{"class":222,"line":179},[220,47541,364],{"class":264},[220,47543,47477],{"class":420},[220,47545,386],{"class":264},[220,47547,47548,47550,47552],{"class":222,"line":389},[220,47549,402],{"class":264},[220,47551,347],{"class":420},[220,47553,359],{"class":264},[212,47555,47556],{"className":2844,"code":47499,"language":2846,"meta":178,"style":178},[99,47557,47558,47566,47574],{"__ignoreMap":178},[220,47559,47560,47562,47564],{"class":222,"line":223},[220,47561,343],{"class":264},[220,47563,347],{"class":420},[220,47565,359],{"class":264},[220,47567,47568,47570,47572],{"class":222,"line":179},[220,47569,364],{"class":264},[220,47571,47477],{"class":420},[220,47573,386],{"class":264},[220,47575,47576,47578,47580],{"class":222,"line":389},[220,47577,402],{"class":264},[220,47579,347],{"class":420},[220,47581,359],{"class":264},[212,47583,47584],{"className":468,"code":47499,"language":469,"meta":178,"style":178},[99,47585,47586,47594,47602],{"__ignoreMap":178},[220,47587,47588,47590,47592],{"class":222,"line":223},[220,47589,343],{"class":264},[220,47591,347],{"class":420},[220,47593,359],{"class":264},[220,47595,47596,47598,47600],{"class":222,"line":179},[220,47597,364],{"class":264},[220,47599,47477],{"class":420},[220,47601,386],{"class":264},[220,47603,47604,47606,47608],{"class":222,"line":389},[220,47605,402],{"class":264},[220,47607,347],{"class":420},[220,47609,359],{"class":264},[212,47611,47613],{"className":251,"code":47612,"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,47614,47615,47625,47629,47643,47647,47656,47660],{"__ignoreMap":178},[220,47616,47617,47619,47621,47623],{"class":222,"line":223},[220,47618,261],{"class":260},[220,47620,9763],{"class":264},[220,47622,268],{"class":260},[220,47624,9768],{"class":230},[220,47626,47627],{"class":222,"line":179},[220,47628,647],{"emptyLinePlaceholder":194},[220,47630,47631,47633,47635,47637,47639,47641],{"class":222,"line":389},[220,47632,1735],{"class":260},[220,47634,1738],{"class":420},[220,47636,1741],{"class":260},[220,47638,1744],{"class":260},[220,47640,1747],{"class":226},[220,47642,1750],{"class":264},[220,47644,47645],{"class":222,"line":399},[220,47646,1765],{"class":264},[220,47648,47649,47651,47654],{"class":222,"line":644},[220,47650,1770],{"class":264},[220,47652,47653],{"class":230},"'Goo'",[220,47655,2465],{"class":264},[220,47657,47658],{"class":222,"line":650},[220,47659,1787],{"class":264},[220,47661,47662],{"class":222,"line":656},[220,47663,1792],{"class":264},[1504,47665,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":47667},[47668,47669],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":47477,"description":47485},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":47676,"title":47677,"body":47678,"category":31087,"componentType":24147,"description":47685,"extension":191,"meta":47946,"navigation":194,"path":47947,"requiresChild":194,"seo":47948,"stem":47949,"__hash__":47950},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":47679,"toc":47942},[47680,47683,47686,47688,47690,47693,47695,47940],[11,47681,47677],{"id":47682},"gradientmap",[15,47684,47685],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[30192,47687],{"component":47677},[23,47689,30196],{"id":24798},[30198,47691],{":props":47692},"[{\"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,47694,30204],{"id":30203},[246,47696,47697,47742,47786,47830,47874],{":tabs":1557},[212,47698,47700],{"className":334,"code":47699,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,47701,47702,47710,47718,47726,47734],{"__ignoreMap":178},[220,47703,47704,47706,47708],{"class":222,"line":223},[220,47705,343],{"class":264},[220,47707,347],{"class":346},[220,47709,359],{"class":264},[220,47711,47712,47714,47716],{"class":222,"line":179},[220,47713,364],{"class":264},[220,47715,47677],{"class":346},[220,47717,359],{"class":264},[220,47719,47720,47722,47724],{"class":222,"line":389},[220,47721,2550],{"class":264},[220,47723,2553],{"class":346},[220,47725,386],{"class":264},[220,47727,47728,47730,47732],{"class":222,"line":399},[220,47729,2567],{"class":264},[220,47731,47677],{"class":346},[220,47733,359],{"class":264},[220,47735,47736,47738,47740],{"class":222,"line":644},[220,47737,402],{"class":264},[220,47739,347],{"class":346},[220,47741,359],{"class":264},[212,47743,47744],{"className":409,"code":47699,"language":411,"meta":178,"style":178},[99,47745,47746,47754,47762,47770,47778],{"__ignoreMap":178},[220,47747,47748,47750,47752],{"class":222,"line":223},[220,47749,343],{"class":264},[220,47751,347],{"class":420},[220,47753,359],{"class":264},[220,47755,47756,47758,47760],{"class":222,"line":179},[220,47757,364],{"class":264},[220,47759,47677],{"class":420},[220,47761,359],{"class":264},[220,47763,47764,47766,47768],{"class":222,"line":389},[220,47765,2550],{"class":264},[220,47767,2553],{"class":420},[220,47769,386],{"class":264},[220,47771,47772,47774,47776],{"class":222,"line":399},[220,47773,2567],{"class":264},[220,47775,47677],{"class":420},[220,47777,359],{"class":264},[220,47779,47780,47782,47784],{"class":222,"line":644},[220,47781,402],{"class":264},[220,47783,347],{"class":420},[220,47785,359],{"class":264},[212,47787,47788],{"className":2844,"code":47699,"language":2846,"meta":178,"style":178},[99,47789,47790,47798,47806,47814,47822],{"__ignoreMap":178},[220,47791,47792,47794,47796],{"class":222,"line":223},[220,47793,343],{"class":264},[220,47795,347],{"class":420},[220,47797,359],{"class":264},[220,47799,47800,47802,47804],{"class":222,"line":179},[220,47801,364],{"class":264},[220,47803,47677],{"class":420},[220,47805,359],{"class":264},[220,47807,47808,47810,47812],{"class":222,"line":389},[220,47809,2550],{"class":264},[220,47811,2553],{"class":420},[220,47813,386],{"class":264},[220,47815,47816,47818,47820],{"class":222,"line":399},[220,47817,2567],{"class":264},[220,47819,47677],{"class":420},[220,47821,359],{"class":264},[220,47823,47824,47826,47828],{"class":222,"line":644},[220,47825,402],{"class":264},[220,47827,347],{"class":420},[220,47829,359],{"class":264},[212,47831,47832],{"className":468,"code":47699,"language":469,"meta":178,"style":178},[99,47833,47834,47842,47850,47858,47866],{"__ignoreMap":178},[220,47835,47836,47838,47840],{"class":222,"line":223},[220,47837,343],{"class":264},[220,47839,347],{"class":420},[220,47841,359],{"class":264},[220,47843,47844,47846,47848],{"class":222,"line":179},[220,47845,364],{"class":264},[220,47847,47677],{"class":420},[220,47849,359],{"class":264},[220,47851,47852,47854,47856],{"class":222,"line":389},[220,47853,2550],{"class":264},[220,47855,2553],{"class":420},[220,47857,386],{"class":264},[220,47859,47860,47862,47864],{"class":222,"line":399},[220,47861,2567],{"class":264},[220,47863,47677],{"class":420},[220,47865,359],{"class":264},[220,47867,47868,47870,47872],{"class":222,"line":644},[220,47869,402],{"class":264},[220,47871,347],{"class":420},[220,47873,359],{"class":264},[212,47875,47877],{"className":251,"code":47876,"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,47878,47879,47889,47893,47907,47911,47920,47928,47932,47936],{"__ignoreMap":178},[220,47880,47881,47883,47885,47887],{"class":222,"line":223},[220,47882,261],{"class":260},[220,47884,9763],{"class":264},[220,47886,268],{"class":260},[220,47888,9768],{"class":230},[220,47890,47891],{"class":222,"line":179},[220,47892,647],{"emptyLinePlaceholder":194},[220,47894,47895,47897,47899,47901,47903,47905],{"class":222,"line":389},[220,47896,1735],{"class":260},[220,47898,1738],{"class":420},[220,47900,1741],{"class":260},[220,47902,1744],{"class":260},[220,47904,1747],{"class":226},[220,47906,1750],{"class":264},[220,47908,47909],{"class":222,"line":399},[220,47910,1765],{"class":264},[220,47912,47913,47915,47918],{"class":222,"line":644},[220,47914,1770],{"class":264},[220,47916,47917],{"class":230},"'GradientMap'",[220,47919,5255],{"class":264},[220,47921,47922,47924,47926],{"class":222,"line":650},[220,47923,5260],{"class":264},[220,47925,3206],{"class":230},[220,47927,2465],{"class":264},[220,47929,47930],{"class":222,"line":656},[220,47931,5277],{"class":264},[220,47933,47934],{"class":222,"line":673},[220,47935,1787],{"class":264},[220,47937,47938],{"class":222,"line":682},[220,47939,1792],{"class":264},[1504,47941,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":47943},[47944,47945],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":47677,"description":47685},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":47952,"title":47953,"body":47954,"category":33287,"componentType":24147,"description":47961,"extension":191,"meta":48216,"navigation":194,"path":48217,"requiresChild":194,"seo":48218,"stem":48219,"__hash__":48220},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":47955,"toc":48213},[47956,47959,47962,47964,47966,48211],[11,47957,47953],{"id":47958},"grayscale",[15,47960,47961],{},"Convert colors to black and white",[30192,47963],{"component":47953},[23,47965,30204],{"id":30203},[246,47967,47968,48013,48057,48101,48145],{":tabs":1557},[212,47969,47971],{"className":334,"code":47970,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[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":346},[220,47980,359],{"class":264},[220,47982,47983,47985,47987],{"class":222,"line":179},[220,47984,364],{"class":264},[220,47986,47953],{"class":346},[220,47988,359],{"class":264},[220,47990,47991,47993,47995],{"class":222,"line":389},[220,47992,2550],{"class":264},[220,47994,2553],{"class":346},[220,47996,386],{"class":264},[220,47998,47999,48001,48003],{"class":222,"line":399},[220,48000,2567],{"class":264},[220,48002,47953],{"class":346},[220,48004,359],{"class":264},[220,48006,48007,48009,48011],{"class":222,"line":644},[220,48008,402],{"class":264},[220,48010,347],{"class":346},[220,48012,359],{"class":264},[212,48014,48015],{"className":409,"code":47970,"language":411,"meta":178,"style":178},[99,48016,48017,48025,48033,48041,48049],{"__ignoreMap":178},[220,48018,48019,48021,48023],{"class":222,"line":223},[220,48020,343],{"class":264},[220,48022,347],{"class":420},[220,48024,359],{"class":264},[220,48026,48027,48029,48031],{"class":222,"line":179},[220,48028,364],{"class":264},[220,48030,47953],{"class":420},[220,48032,359],{"class":264},[220,48034,48035,48037,48039],{"class":222,"line":389},[220,48036,2550],{"class":264},[220,48038,2553],{"class":420},[220,48040,386],{"class":264},[220,48042,48043,48045,48047],{"class":222,"line":399},[220,48044,2567],{"class":264},[220,48046,47953],{"class":420},[220,48048,359],{"class":264},[220,48050,48051,48053,48055],{"class":222,"line":644},[220,48052,402],{"class":264},[220,48054,347],{"class":420},[220,48056,359],{"class":264},[212,48058,48059],{"className":2844,"code":47970,"language":2846,"meta":178,"style":178},[99,48060,48061,48069,48077,48085,48093],{"__ignoreMap":178},[220,48062,48063,48065,48067],{"class":222,"line":223},[220,48064,343],{"class":264},[220,48066,347],{"class":420},[220,48068,359],{"class":264},[220,48070,48071,48073,48075],{"class":222,"line":179},[220,48072,364],{"class":264},[220,48074,47953],{"class":420},[220,48076,359],{"class":264},[220,48078,48079,48081,48083],{"class":222,"line":389},[220,48080,2550],{"class":264},[220,48082,2553],{"class":420},[220,48084,386],{"class":264},[220,48086,48087,48089,48091],{"class":222,"line":399},[220,48088,2567],{"class":264},[220,48090,47953],{"class":420},[220,48092,359],{"class":264},[220,48094,48095,48097,48099],{"class":222,"line":644},[220,48096,402],{"class":264},[220,48098,347],{"class":420},[220,48100,359],{"class":264},[212,48102,48103],{"className":468,"code":47970,"language":469,"meta":178,"style":178},[99,48104,48105,48113,48121,48129,48137],{"__ignoreMap":178},[220,48106,48107,48109,48111],{"class":222,"line":223},[220,48108,343],{"class":264},[220,48110,347],{"class":420},[220,48112,359],{"class":264},[220,48114,48115,48117,48119],{"class":222,"line":179},[220,48116,364],{"class":264},[220,48118,47953],{"class":420},[220,48120,359],{"class":264},[220,48122,48123,48125,48127],{"class":222,"line":389},[220,48124,2550],{"class":264},[220,48126,2553],{"class":420},[220,48128,386],{"class":264},[220,48130,48131,48133,48135],{"class":222,"line":399},[220,48132,2567],{"class":264},[220,48134,47953],{"class":420},[220,48136,359],{"class":264},[220,48138,48139,48141,48143],{"class":222,"line":644},[220,48140,402],{"class":264},[220,48142,347],{"class":420},[220,48144,359],{"class":264},[212,48146,48148],{"className":251,"code":48147,"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,48149,48150,48160,48164,48178,48182,48191,48199,48203,48207],{"__ignoreMap":178},[220,48151,48152,48154,48156,48158],{"class":222,"line":223},[220,48153,261],{"class":260},[220,48155,9763],{"class":264},[220,48157,268],{"class":260},[220,48159,9768],{"class":230},[220,48161,48162],{"class":222,"line":179},[220,48163,647],{"emptyLinePlaceholder":194},[220,48165,48166,48168,48170,48172,48174,48176],{"class":222,"line":389},[220,48167,1735],{"class":260},[220,48169,1738],{"class":420},[220,48171,1741],{"class":260},[220,48173,1744],{"class":260},[220,48175,1747],{"class":226},[220,48177,1750],{"class":264},[220,48179,48180],{"class":222,"line":399},[220,48181,1765],{"class":264},[220,48183,48184,48186,48189],{"class":222,"line":644},[220,48185,1770],{"class":264},[220,48187,48188],{"class":230},"'Grayscale'",[220,48190,5255],{"class":264},[220,48192,48193,48195,48197],{"class":222,"line":650},[220,48194,5260],{"class":264},[220,48196,3206],{"class":230},[220,48198,2465],{"class":264},[220,48200,48201],{"class":222,"line":656},[220,48202,5277],{"class":264},[220,48204,48205],{"class":222,"line":673},[220,48206,1787],{"class":264},[220,48208,48209],{"class":222,"line":682},[220,48210,1792],{"class":264},[1504,48212,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":48214},[48215],{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":47953,"description":47961},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":48222,"title":48223,"body":48224,"category":31344,"componentType":24141,"description":48231,"extension":191,"meta":48461,"navigation":194,"path":48462,"requiresChild":30811,"seo":48463,"stem":48464,"__hash__":48465},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":48225,"toc":48457},[48226,48229,48232,48234,48236,48239,48241,48455],[11,48227,48223],{"id":48228},"grid",[15,48230,48231],{},"Simple grid lines pattern with adjustable thickness and rotation",[30192,48233],{"component":48223},[23,48235,30196],{"id":24798},[30198,48237],{":props":48238},"[{\"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,48240,30204],{"id":30203},[246,48242,48243,48283,48321,48359,48397],{":tabs":1557},[212,48244,48246],{"className":334,"code":48245,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,48247,48248,48256,48263,48271,48275],{"__ignoreMap":178},[220,48249,48250,48252,48254],{"class":222,"line":223},[220,48251,343],{"class":264},[220,48253,347],{"class":346},[220,48255,359],{"class":264},[220,48257,48258,48260],{"class":222,"line":179},[220,48259,364],{"class":264},[220,48261,48262],{"class":346},"Grid\n",[220,48264,48265,48267,48269],{"class":222,"line":389},[220,48266,7882],{"class":226},[220,48268,353],{"class":264},[220,48270,7838],{"class":230},[220,48272,48273],{"class":222,"line":399},[220,48274,1234],{"class":264},[220,48276,48277,48279,48281],{"class":222,"line":644},[220,48278,402],{"class":264},[220,48280,347],{"class":346},[220,48282,359],{"class":264},[212,48284,48285],{"className":409,"code":48245,"language":411,"meta":178,"style":178},[99,48286,48287,48295,48301,48309,48313],{"__ignoreMap":178},[220,48288,48289,48291,48293],{"class":222,"line":223},[220,48290,343],{"class":264},[220,48292,347],{"class":420},[220,48294,359],{"class":264},[220,48296,48297,48299],{"class":222,"line":179},[220,48298,364],{"class":264},[220,48300,48262],{"class":420},[220,48302,48303,48305,48307],{"class":222,"line":389},[220,48304,7882],{"class":226},[220,48306,353],{"class":260},[220,48308,7838],{"class":230},[220,48310,48311],{"class":222,"line":399},[220,48312,1234],{"class":264},[220,48314,48315,48317,48319],{"class":222,"line":644},[220,48316,402],{"class":264},[220,48318,347],{"class":420},[220,48320,359],{"class":264},[212,48322,48323],{"className":2844,"code":48245,"language":2846,"meta":178,"style":178},[99,48324,48325,48333,48339,48347,48351],{"__ignoreMap":178},[220,48326,48327,48329,48331],{"class":222,"line":223},[220,48328,343],{"class":264},[220,48330,347],{"class":420},[220,48332,359],{"class":264},[220,48334,48335,48337],{"class":222,"line":179},[220,48336,364],{"class":264},[220,48338,48262],{"class":420},[220,48340,48341,48343,48345],{"class":222,"line":389},[220,48342,7882],{"class":226},[220,48344,353],{"class":264},[220,48346,7838],{"class":230},[220,48348,48349],{"class":222,"line":399},[220,48350,1234],{"class":264},[220,48352,48353,48355,48357],{"class":222,"line":644},[220,48354,402],{"class":264},[220,48356,347],{"class":420},[220,48358,359],{"class":264},[212,48360,48361],{"className":468,"code":48245,"language":469,"meta":178,"style":178},[99,48362,48363,48371,48377,48385,48389],{"__ignoreMap":178},[220,48364,48365,48367,48369],{"class":222,"line":223},[220,48366,343],{"class":264},[220,48368,347],{"class":420},[220,48370,359],{"class":264},[220,48372,48373,48375],{"class":222,"line":179},[220,48374,364],{"class":264},[220,48376,48262],{"class":420},[220,48378,48379,48381,48383],{"class":222,"line":389},[220,48380,7882],{"class":226},[220,48382,353],{"class":260},[220,48384,7838],{"class":230},[220,48386,48387],{"class":222,"line":399},[220,48388,1234],{"class":264},[220,48390,48391,48393,48395],{"class":222,"line":644},[220,48392,402],{"class":264},[220,48394,347],{"class":420},[220,48396,359],{"class":264},[212,48398,48400],{"className":251,"code":48399,"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,48401,48402,48412,48416,48430,48434,48447,48451],{"__ignoreMap":178},[220,48403,48404,48406,48408,48410],{"class":222,"line":223},[220,48405,261],{"class":260},[220,48407,9763],{"class":264},[220,48409,268],{"class":260},[220,48411,9768],{"class":230},[220,48413,48414],{"class":222,"line":179},[220,48415,647],{"emptyLinePlaceholder":194},[220,48417,48418,48420,48422,48424,48426,48428],{"class":222,"line":389},[220,48419,1735],{"class":260},[220,48421,1738],{"class":420},[220,48423,1741],{"class":260},[220,48425,1744],{"class":260},[220,48427,1747],{"class":226},[220,48429,1750],{"class":264},[220,48431,48432],{"class":222,"line":399},[220,48433,1765],{"class":264},[220,48435,48436,48438,48441,48443,48445],{"class":222,"line":644},[220,48437,1770],{"class":264},[220,48439,48440],{"class":230},"'Grid'",[220,48442,1776],{"class":264},[220,48444,8417],{"class":230},[220,48446,1782],{"class":264},[220,48448,48449],{"class":222,"line":650},[220,48450,1787],{"class":264},[220,48452,48453],{"class":222,"line":656},[220,48454,1792],{"class":264},[1504,48456,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48458},[48459,48460],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":48223,"description":48231},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":48467,"title":5341,"body":48468,"category":35553,"componentType":24147,"description":48475,"extension":191,"meta":48837,"navigation":194,"path":48838,"requiresChild":194,"seo":48839,"stem":48840,"__hash__":48841},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":48469,"toc":48833},[48470,48473,48476,48478,48480,48483,48485,48831],[11,48471,5341],{"id":48472},"griddistortion",[15,48474,48475],{},"Interactive grid distortion controlled by mouse position",[30192,48477],{"component":5341},[23,48479,30196],{"id":24798},[30198,48481],{":props":48482},"[{\"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,48484,30204],{"id":30203},[246,48486,48487,48551,48622,48688,48758],{":tabs":1557},[212,48488,48490],{"className":334,"code":48489,"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,48491,48492,48500,48507,48515,48523,48527,48535,48543],{"__ignoreMap":178},[220,48493,48494,48496,48498],{"class":222,"line":223},[220,48495,343],{"class":264},[220,48497,347],{"class":346},[220,48499,359],{"class":264},[220,48501,48502,48504],{"class":222,"line":179},[220,48503,364],{"class":264},[220,48505,48506],{"class":346},"GridDistortion\n",[220,48508,48509,48511,48513],{"class":222,"line":389},[220,48510,18633],{"class":226},[220,48512,353],{"class":264},[220,48514,33544],{"class":230},[220,48516,48517,48519,48521],{"class":222,"line":399},[220,48518,15666],{"class":226},[220,48520,353],{"class":264},[220,48522,33544],{"class":230},[220,48524,48525],{"class":222,"line":644},[220,48526,30240],{"class":264},[220,48528,48529,48531,48533],{"class":222,"line":650},[220,48530,2550],{"class":264},[220,48532,2553],{"class":346},[220,48534,386],{"class":264},[220,48536,48537,48539,48541],{"class":222,"line":656},[220,48538,2567],{"class":264},[220,48540,5341],{"class":346},[220,48542,359],{"class":264},[220,48544,48545,48547,48549],{"class":222,"line":673},[220,48546,402],{"class":264},[220,48548,347],{"class":346},[220,48550,359],{"class":264},[212,48552,48554],{"className":409,"code":48553,"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,48555,48556,48564,48570,48582,48594,48598,48606,48614],{"__ignoreMap":178},[220,48557,48558,48560,48562],{"class":222,"line":223},[220,48559,343],{"class":264},[220,48561,347],{"class":420},[220,48563,359],{"class":264},[220,48565,48566,48568],{"class":222,"line":179},[220,48567,364],{"class":264},[220,48569,48506],{"class":420},[220,48571,48572,48574,48576,48578,48580],{"class":222,"line":389},[220,48573,18744],{"class":226},[220,48575,353],{"class":260},[220,48577,743],{"class":264},[220,48579,6923],{"class":420},[220,48581,749],{"class":264},[220,48583,48584,48586,48588,48590,48592],{"class":222,"line":399},[220,48585,7892],{"class":226},[220,48587,353],{"class":260},[220,48589,743],{"class":264},[220,48591,6923],{"class":420},[220,48593,749],{"class":264},[220,48595,48596],{"class":222,"line":644},[220,48597,30240],{"class":264},[220,48599,48600,48602,48604],{"class":222,"line":650},[220,48601,2550],{"class":264},[220,48603,2553],{"class":420},[220,48605,386],{"class":264},[220,48607,48608,48610,48612],{"class":222,"line":656},[220,48609,2567],{"class":264},[220,48611,5341],{"class":420},[220,48613,359],{"class":264},[220,48615,48616,48618,48620],{"class":222,"line":673},[220,48617,402],{"class":264},[220,48619,347],{"class":420},[220,48621,359],{"class":264},[212,48623,48624],{"className":2844,"code":48553,"language":2846,"meta":178,"style":178},[99,48625,48626,48634,48640,48650,48660,48664,48672,48680],{"__ignoreMap":178},[220,48627,48628,48630,48632],{"class":222,"line":223},[220,48629,343],{"class":264},[220,48631,347],{"class":420},[220,48633,359],{"class":264},[220,48635,48636,48638],{"class":222,"line":179},[220,48637,364],{"class":264},[220,48639,48506],{"class":420},[220,48641,48642,48644,48646,48648],{"class":222,"line":389},[220,48643,18744],{"class":226},[220,48645,28138],{"class":264},[220,48647,6923],{"class":420},[220,48649,749],{"class":264},[220,48651,48652,48654,48656,48658],{"class":222,"line":399},[220,48653,7892],{"class":226},[220,48655,28138],{"class":264},[220,48657,6923],{"class":420},[220,48659,749],{"class":264},[220,48661,48662],{"class":222,"line":644},[220,48663,30240],{"class":264},[220,48665,48666,48668,48670],{"class":222,"line":650},[220,48667,2550],{"class":264},[220,48669,2553],{"class":420},[220,48671,386],{"class":264},[220,48673,48674,48676,48678],{"class":222,"line":656},[220,48675,2567],{"class":264},[220,48677,5341],{"class":420},[220,48679,359],{"class":264},[220,48681,48682,48684,48686],{"class":222,"line":673},[220,48683,402],{"class":264},[220,48685,347],{"class":420},[220,48687,359],{"class":264},[212,48689,48690],{"className":468,"code":48553,"language":469,"meta":178,"style":178},[99,48691,48692,48700,48706,48718,48730,48734,48742,48750],{"__ignoreMap":178},[220,48693,48694,48696,48698],{"class":222,"line":223},[220,48695,343],{"class":264},[220,48697,347],{"class":420},[220,48699,359],{"class":264},[220,48701,48702,48704],{"class":222,"line":179},[220,48703,364],{"class":264},[220,48705,48506],{"class":420},[220,48707,48708,48710,48712,48714,48716],{"class":222,"line":389},[220,48709,18744],{"class":226},[220,48711,353],{"class":260},[220,48713,743],{"class":264},[220,48715,6923],{"class":420},[220,48717,749],{"class":264},[220,48719,48720,48722,48724,48726,48728],{"class":222,"line":399},[220,48721,7892],{"class":226},[220,48723,353],{"class":260},[220,48725,743],{"class":264},[220,48727,6923],{"class":420},[220,48729,749],{"class":264},[220,48731,48732],{"class":222,"line":644},[220,48733,30240],{"class":264},[220,48735,48736,48738,48740],{"class":222,"line":650},[220,48737,2550],{"class":264},[220,48739,2553],{"class":420},[220,48741,386],{"class":264},[220,48743,48744,48746,48748],{"class":222,"line":656},[220,48745,2567],{"class":264},[220,48747,5341],{"class":420},[220,48749,359],{"class":264},[220,48751,48752,48754,48756],{"class":222,"line":673},[220,48753,402],{"class":264},[220,48755,347],{"class":420},[220,48757,359],{"class":264},[212,48759,48761],{"className":251,"code":48760,"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,48762,48763,48773,48777,48791,48795,48811,48819,48823,48827],{"__ignoreMap":178},[220,48764,48765,48767,48769,48771],{"class":222,"line":223},[220,48766,261],{"class":260},[220,48768,9763],{"class":264},[220,48770,268],{"class":260},[220,48772,9768],{"class":230},[220,48774,48775],{"class":222,"line":179},[220,48776,647],{"emptyLinePlaceholder":194},[220,48778,48779,48781,48783,48785,48787,48789],{"class":222,"line":389},[220,48780,1735],{"class":260},[220,48782,1738],{"class":420},[220,48784,1741],{"class":260},[220,48786,1744],{"class":260},[220,48788,1747],{"class":226},[220,48790,1750],{"class":264},[220,48792,48793],{"class":222,"line":399},[220,48794,1765],{"class":264},[220,48796,48797,48799,48801,48803,48805,48807,48809],{"class":222,"line":644},[220,48798,1770],{"class":264},[220,48800,5784],{"class":230},[220,48802,30484],{"class":264},[220,48804,6923],{"class":420},[220,48806,4812],{"class":264},[220,48808,6923],{"class":420},[220,48810,5792],{"class":264},[220,48812,48813,48815,48817],{"class":222,"line":650},[220,48814,5260],{"class":264},[220,48816,3206],{"class":230},[220,48818,2465],{"class":264},[220,48820,48821],{"class":222,"line":656},[220,48822,5277],{"class":264},[220,48824,48825],{"class":222,"line":673},[220,48826,1787],{"class":264},[220,48828,48829],{"class":222,"line":682},[220,48830,1792],{"class":264},[1504,48832,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48834},[48835,48836],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":5341,"description":48475},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":48843,"title":48844,"body":48845,"category":49107,"componentType":24147,"description":48852,"extension":191,"meta":49108,"navigation":194,"path":49109,"requiresChild":194,"seo":49110,"stem":49111,"__hash__":49112},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":48846,"toc":49104},[48847,48850,48853,48855,48857,49102],[11,48848,48844],{"id":48849},"group",[15,48851,48852],{},"Container for organizing and composing child effects",[30192,48854],{"component":48844},[23,48856,30204],{"id":30203},[246,48858,48859,48904,48948,48992,49036],{":tabs":1557},[212,48860,48862],{"className":334,"code":48861,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,48863,48864,48872,48880,48888,48896],{"__ignoreMap":178},[220,48865,48866,48868,48870],{"class":222,"line":223},[220,48867,343],{"class":264},[220,48869,347],{"class":346},[220,48871,359],{"class":264},[220,48873,48874,48876,48878],{"class":222,"line":179},[220,48875,364],{"class":264},[220,48877,48844],{"class":346},[220,48879,359],{"class":264},[220,48881,48882,48884,48886],{"class":222,"line":389},[220,48883,2550],{"class":264},[220,48885,2553],{"class":346},[220,48887,386],{"class":264},[220,48889,48890,48892,48894],{"class":222,"line":399},[220,48891,2567],{"class":264},[220,48893,48844],{"class":346},[220,48895,359],{"class":264},[220,48897,48898,48900,48902],{"class":222,"line":644},[220,48899,402],{"class":264},[220,48901,347],{"class":346},[220,48903,359],{"class":264},[212,48905,48906],{"className":409,"code":48861,"language":411,"meta":178,"style":178},[99,48907,48908,48916,48924,48932,48940],{"__ignoreMap":178},[220,48909,48910,48912,48914],{"class":222,"line":223},[220,48911,343],{"class":264},[220,48913,347],{"class":420},[220,48915,359],{"class":264},[220,48917,48918,48920,48922],{"class":222,"line":179},[220,48919,364],{"class":264},[220,48921,48844],{"class":420},[220,48923,359],{"class":264},[220,48925,48926,48928,48930],{"class":222,"line":389},[220,48927,2550],{"class":264},[220,48929,2553],{"class":420},[220,48931,386],{"class":264},[220,48933,48934,48936,48938],{"class":222,"line":399},[220,48935,2567],{"class":264},[220,48937,48844],{"class":420},[220,48939,359],{"class":264},[220,48941,48942,48944,48946],{"class":222,"line":644},[220,48943,402],{"class":264},[220,48945,347],{"class":420},[220,48947,359],{"class":264},[212,48949,48950],{"className":2844,"code":48861,"language":2846,"meta":178,"style":178},[99,48951,48952,48960,48968,48976,48984],{"__ignoreMap":178},[220,48953,48954,48956,48958],{"class":222,"line":223},[220,48955,343],{"class":264},[220,48957,347],{"class":420},[220,48959,359],{"class":264},[220,48961,48962,48964,48966],{"class":222,"line":179},[220,48963,364],{"class":264},[220,48965,48844],{"class":420},[220,48967,359],{"class":264},[220,48969,48970,48972,48974],{"class":222,"line":389},[220,48971,2550],{"class":264},[220,48973,2553],{"class":420},[220,48975,386],{"class":264},[220,48977,48978,48980,48982],{"class":222,"line":399},[220,48979,2567],{"class":264},[220,48981,48844],{"class":420},[220,48983,359],{"class":264},[220,48985,48986,48988,48990],{"class":222,"line":644},[220,48987,402],{"class":264},[220,48989,347],{"class":420},[220,48991,359],{"class":264},[212,48993,48994],{"className":468,"code":48861,"language":469,"meta":178,"style":178},[99,48995,48996,49004,49012,49020,49028],{"__ignoreMap":178},[220,48997,48998,49000,49002],{"class":222,"line":223},[220,48999,343],{"class":264},[220,49001,347],{"class":420},[220,49003,359],{"class":264},[220,49005,49006,49008,49010],{"class":222,"line":179},[220,49007,364],{"class":264},[220,49009,48844],{"class":420},[220,49011,359],{"class":264},[220,49013,49014,49016,49018],{"class":222,"line":389},[220,49015,2550],{"class":264},[220,49017,2553],{"class":420},[220,49019,386],{"class":264},[220,49021,49022,49024,49026],{"class":222,"line":399},[220,49023,2567],{"class":264},[220,49025,48844],{"class":420},[220,49027,359],{"class":264},[220,49029,49030,49032,49034],{"class":222,"line":644},[220,49031,402],{"class":264},[220,49033,347],{"class":420},[220,49035,359],{"class":264},[212,49037,49039],{"className":251,"code":49038,"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,49040,49041,49051,49055,49069,49073,49082,49090,49094,49098],{"__ignoreMap":178},[220,49042,49043,49045,49047,49049],{"class":222,"line":223},[220,49044,261],{"class":260},[220,49046,9763],{"class":264},[220,49048,268],{"class":260},[220,49050,9768],{"class":230},[220,49052,49053],{"class":222,"line":179},[220,49054,647],{"emptyLinePlaceholder":194},[220,49056,49057,49059,49061,49063,49065,49067],{"class":222,"line":389},[220,49058,1735],{"class":260},[220,49060,1738],{"class":420},[220,49062,1741],{"class":260},[220,49064,1744],{"class":260},[220,49066,1747],{"class":226},[220,49068,1750],{"class":264},[220,49070,49071],{"class":222,"line":399},[220,49072,1765],{"class":264},[220,49074,49075,49077,49080],{"class":222,"line":644},[220,49076,1770],{"class":264},[220,49078,49079],{"class":230},"'Group'",[220,49081,5255],{"class":264},[220,49083,49084,49086,49088],{"class":222,"line":650},[220,49085,5260],{"class":264},[220,49087,3206],{"class":230},[220,49089,2465],{"class":264},[220,49091,49092],{"class":222,"line":656},[220,49093,5277],{"class":264},[220,49095,49096],{"class":222,"line":673},[220,49097,1787],{"class":264},[220,49099,49100],{"class":222,"line":682},[220,49101,1792],{"class":264},[1504,49103,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":49105},[49106],{"id":30203,"depth":179,"text":30204},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":48844,"description":48852},"docs\u002Fcomponents\u002FGroup","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":49114,"title":49115,"body":49116,"category":31087,"componentType":24147,"description":49123,"extension":191,"meta":49384,"navigation":194,"path":49385,"requiresChild":194,"seo":49386,"stem":49387,"__hash__":49388},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":49117,"toc":49380},[49118,49121,49124,49126,49128,49131,49133,49378],[11,49119,49115],{"id":49120},"halftone",[15,49122,49123],{},"Halftone dot pattern effect for printing aesthetics",[30192,49125],{"component":49115},[23,49127,30196],{"id":24798},[30198,49129],{":props":49130},"[{\"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,49132,30204],{"id":30203},[246,49134,49135,49180,49224,49268,49312],{":tabs":1557},[212,49136,49138],{"className":334,"code":49137,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,49139,49140,49148,49156,49164,49172],{"__ignoreMap":178},[220,49141,49142,49144,49146],{"class":222,"line":223},[220,49143,343],{"class":264},[220,49145,347],{"class":346},[220,49147,359],{"class":264},[220,49149,49150,49152,49154],{"class":222,"line":179},[220,49151,364],{"class":264},[220,49153,49115],{"class":346},[220,49155,359],{"class":264},[220,49157,49158,49160,49162],{"class":222,"line":389},[220,49159,2550],{"class":264},[220,49161,2553],{"class":346},[220,49163,386],{"class":264},[220,49165,49166,49168,49170],{"class":222,"line":399},[220,49167,2567],{"class":264},[220,49169,49115],{"class":346},[220,49171,359],{"class":264},[220,49173,49174,49176,49178],{"class":222,"line":644},[220,49175,402],{"class":264},[220,49177,347],{"class":346},[220,49179,359],{"class":264},[212,49181,49182],{"className":409,"code":49137,"language":411,"meta":178,"style":178},[99,49183,49184,49192,49200,49208,49216],{"__ignoreMap":178},[220,49185,49186,49188,49190],{"class":222,"line":223},[220,49187,343],{"class":264},[220,49189,347],{"class":420},[220,49191,359],{"class":264},[220,49193,49194,49196,49198],{"class":222,"line":179},[220,49195,364],{"class":264},[220,49197,49115],{"class":420},[220,49199,359],{"class":264},[220,49201,49202,49204,49206],{"class":222,"line":389},[220,49203,2550],{"class":264},[220,49205,2553],{"class":420},[220,49207,386],{"class":264},[220,49209,49210,49212,49214],{"class":222,"line":399},[220,49211,2567],{"class":264},[220,49213,49115],{"class":420},[220,49215,359],{"class":264},[220,49217,49218,49220,49222],{"class":222,"line":644},[220,49219,402],{"class":264},[220,49221,347],{"class":420},[220,49223,359],{"class":264},[212,49225,49226],{"className":2844,"code":49137,"language":2846,"meta":178,"style":178},[99,49227,49228,49236,49244,49252,49260],{"__ignoreMap":178},[220,49229,49230,49232,49234],{"class":222,"line":223},[220,49231,343],{"class":264},[220,49233,347],{"class":420},[220,49235,359],{"class":264},[220,49237,49238,49240,49242],{"class":222,"line":179},[220,49239,364],{"class":264},[220,49241,49115],{"class":420},[220,49243,359],{"class":264},[220,49245,49246,49248,49250],{"class":222,"line":389},[220,49247,2550],{"class":264},[220,49249,2553],{"class":420},[220,49251,386],{"class":264},[220,49253,49254,49256,49258],{"class":222,"line":399},[220,49255,2567],{"class":264},[220,49257,49115],{"class":420},[220,49259,359],{"class":264},[220,49261,49262,49264,49266],{"class":222,"line":644},[220,49263,402],{"class":264},[220,49265,347],{"class":420},[220,49267,359],{"class":264},[212,49269,49270],{"className":468,"code":49137,"language":469,"meta":178,"style":178},[99,49271,49272,49280,49288,49296,49304],{"__ignoreMap":178},[220,49273,49274,49276,49278],{"class":222,"line":223},[220,49275,343],{"class":264},[220,49277,347],{"class":420},[220,49279,359],{"class":264},[220,49281,49282,49284,49286],{"class":222,"line":179},[220,49283,364],{"class":264},[220,49285,49115],{"class":420},[220,49287,359],{"class":264},[220,49289,49290,49292,49294],{"class":222,"line":389},[220,49291,2550],{"class":264},[220,49293,2553],{"class":420},[220,49295,386],{"class":264},[220,49297,49298,49300,49302],{"class":222,"line":399},[220,49299,2567],{"class":264},[220,49301,49115],{"class":420},[220,49303,359],{"class":264},[220,49305,49306,49308,49310],{"class":222,"line":644},[220,49307,402],{"class":264},[220,49309,347],{"class":420},[220,49311,359],{"class":264},[212,49313,49315],{"className":251,"code":49314,"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,49316,49317,49327,49331,49345,49349,49358,49366,49370,49374],{"__ignoreMap":178},[220,49318,49319,49321,49323,49325],{"class":222,"line":223},[220,49320,261],{"class":260},[220,49322,9763],{"class":264},[220,49324,268],{"class":260},[220,49326,9768],{"class":230},[220,49328,49329],{"class":222,"line":179},[220,49330,647],{"emptyLinePlaceholder":194},[220,49332,49333,49335,49337,49339,49341,49343],{"class":222,"line":389},[220,49334,1735],{"class":260},[220,49336,1738],{"class":420},[220,49338,1741],{"class":260},[220,49340,1744],{"class":260},[220,49342,1747],{"class":226},[220,49344,1750],{"class":264},[220,49346,49347],{"class":222,"line":399},[220,49348,1765],{"class":264},[220,49350,49351,49353,49356],{"class":222,"line":644},[220,49352,1770],{"class":264},[220,49354,49355],{"class":230},"'Halftone'",[220,49357,5255],{"class":264},[220,49359,49360,49362,49364],{"class":222,"line":650},[220,49361,5260],{"class":264},[220,49363,3206],{"class":230},[220,49365,2465],{"class":264},[220,49367,49368],{"class":222,"line":656},[220,49369,5277],{"class":264},[220,49371,49372],{"class":222,"line":673},[220,49373,1787],{"class":264},[220,49375,49376],{"class":222,"line":682},[220,49377,1792],{"class":264},[1504,49379,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":49381},[49382,49383],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":49115,"description":49123},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":49390,"title":49391,"body":49392,"category":14164,"componentType":24141,"description":49399,"extension":191,"meta":49678,"navigation":194,"path":49679,"requiresChild":30811,"seo":49680,"stem":49681,"__hash__":49682},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":49393,"toc":49674},[49394,49397,49400,49402,49404,49407,49409,49672],[11,49395,49391],{"id":49396},"heart",[15,49398,49399],{},"Heart shape with adjustable size",[30192,49401],{"component":49391},[23,49403,30196],{"id":24798},[30198,49405],{":props":49406},"[{\"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,49408,30204],{"id":30203},[246,49410,49411,49460,49512,49560,49610],{":tabs":1557},[212,49412,49414],{"className":334,"code":49413,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,49415,49416,49424,49431,49439,49448,49452],{"__ignoreMap":178},[220,49417,49418,49420,49422],{"class":222,"line":223},[220,49419,343],{"class":264},[220,49421,347],{"class":346},[220,49423,359],{"class":264},[220,49425,49426,49428],{"class":222,"line":179},[220,49427,364],{"class":264},[220,49429,49430],{"class":346},"Heart\n",[220,49432,49433,49435,49437],{"class":222,"line":389},[220,49434,7882],{"class":226},[220,49436,353],{"class":264},[220,49438,7838],{"class":230},[220,49440,49441,49443,49445],{"class":222,"line":399},[220,49442,15666],{"class":226},[220,49444,353],{"class":264},[220,49446,49447],{"class":230},"\"0.32\"\n",[220,49449,49450],{"class":222,"line":644},[220,49451,1234],{"class":264},[220,49453,49454,49456,49458],{"class":222,"line":650},[220,49455,402],{"class":264},[220,49457,347],{"class":346},[220,49459,359],{"class":264},[212,49461,49463],{"className":409,"code":49462,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,49464,49465,49473,49479,49487,49500,49504],{"__ignoreMap":178},[220,49466,49467,49469,49471],{"class":222,"line":223},[220,49468,343],{"class":264},[220,49470,347],{"class":420},[220,49472,359],{"class":264},[220,49474,49475,49477],{"class":222,"line":179},[220,49476,364],{"class":264},[220,49478,49430],{"class":420},[220,49480,49481,49483,49485],{"class":222,"line":389},[220,49482,7882],{"class":226},[220,49484,353],{"class":260},[220,49486,7838],{"class":230},[220,49488,49489,49491,49493,49495,49498],{"class":222,"line":399},[220,49490,7892],{"class":226},[220,49492,353],{"class":260},[220,49494,743],{"class":264},[220,49496,49497],{"class":420},"0.32",[220,49499,749],{"class":264},[220,49501,49502],{"class":222,"line":644},[220,49503,1234],{"class":264},[220,49505,49506,49508,49510],{"class":222,"line":650},[220,49507,402],{"class":264},[220,49509,347],{"class":420},[220,49511,359],{"class":264},[212,49513,49514],{"className":2844,"code":49462,"language":2846,"meta":178,"style":178},[99,49515,49516,49524,49530,49538,49548,49552],{"__ignoreMap":178},[220,49517,49518,49520,49522],{"class":222,"line":223},[220,49519,343],{"class":264},[220,49521,347],{"class":420},[220,49523,359],{"class":264},[220,49525,49526,49528],{"class":222,"line":179},[220,49527,364],{"class":264},[220,49529,49430],{"class":420},[220,49531,49532,49534,49536],{"class":222,"line":389},[220,49533,7882],{"class":226},[220,49535,353],{"class":264},[220,49537,7838],{"class":230},[220,49539,49540,49542,49544,49546],{"class":222,"line":399},[220,49541,7892],{"class":226},[220,49543,28138],{"class":264},[220,49545,49497],{"class":420},[220,49547,749],{"class":264},[220,49549,49550],{"class":222,"line":644},[220,49551,1234],{"class":264},[220,49553,49554,49556,49558],{"class":222,"line":650},[220,49555,402],{"class":264},[220,49557,347],{"class":420},[220,49559,359],{"class":264},[212,49561,49562],{"className":468,"code":49462,"language":469,"meta":178,"style":178},[99,49563,49564,49572,49578,49586,49598,49602],{"__ignoreMap":178},[220,49565,49566,49568,49570],{"class":222,"line":223},[220,49567,343],{"class":264},[220,49569,347],{"class":420},[220,49571,359],{"class":264},[220,49573,49574,49576],{"class":222,"line":179},[220,49575,364],{"class":264},[220,49577,49430],{"class":420},[220,49579,49580,49582,49584],{"class":222,"line":389},[220,49581,7882],{"class":226},[220,49583,353],{"class":260},[220,49585,7838],{"class":230},[220,49587,49588,49590,49592,49594,49596],{"class":222,"line":399},[220,49589,7892],{"class":226},[220,49591,353],{"class":260},[220,49593,743],{"class":264},[220,49595,49497],{"class":420},[220,49597,749],{"class":264},[220,49599,49600],{"class":222,"line":644},[220,49601,1234],{"class":264},[220,49603,49604,49606,49608],{"class":222,"line":650},[220,49605,402],{"class":264},[220,49607,347],{"class":420},[220,49609,359],{"class":264},[212,49611,49613],{"className":251,"code":49612,"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,49614,49615,49625,49629,49643,49647,49664,49668],{"__ignoreMap":178},[220,49616,49617,49619,49621,49623],{"class":222,"line":223},[220,49618,261],{"class":260},[220,49620,9763],{"class":264},[220,49622,268],{"class":260},[220,49624,9768],{"class":230},[220,49626,49627],{"class":222,"line":179},[220,49628,647],{"emptyLinePlaceholder":194},[220,49630,49631,49633,49635,49637,49639,49641],{"class":222,"line":389},[220,49632,1735],{"class":260},[220,49634,1738],{"class":420},[220,49636,1741],{"class":260},[220,49638,1744],{"class":260},[220,49640,1747],{"class":226},[220,49642,1750],{"class":264},[220,49644,49645],{"class":222,"line":399},[220,49646,1765],{"class":264},[220,49648,49649,49651,49654,49656,49658,49660,49662],{"class":222,"line":644},[220,49650,1770],{"class":264},[220,49652,49653],{"class":230},"'Heart'",[220,49655,1776],{"class":264},[220,49657,8417],{"class":230},[220,49659,4812],{"class":264},[220,49661,49497],{"class":420},[220,49663,1782],{"class":264},[220,49665,49666],{"class":222,"line":650},[220,49667,1787],{"class":264},[220,49669,49670],{"class":222,"line":656},[220,49671,1792],{"class":264},[1504,49673,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":49675},[49676,49677],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":49391,"description":49399},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":49684,"title":49685,"body":49686,"category":33488,"componentType":24141,"description":49883,"extension":191,"meta":49884,"navigation":194,"path":49885,"requiresChild":30811,"seo":49886,"stem":49887,"__hash__":49888},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":49687,"toc":49879},[49688,49691,49699,49701,49703,49706,49708,49877],[11,49689,49685],{"id":49690},"heatmap",[15,49692,49693,49694,7735],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,49695,49698],{"href":49696,"rel":49697},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[30192,49700],{"component":49685},[23,49702,30196],{"id":24798},[30198,49704],{":props":49705},"[{\"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,49707,30204],{"id":30203},[246,49709,49710,49739,49767,49795,49823],{":tabs":1557},[212,49711,49713],{"className":334,"code":49712,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,49714,49715,49723,49731],{"__ignoreMap":178},[220,49716,49717,49719,49721],{"class":222,"line":223},[220,49718,343],{"class":264},[220,49720,347],{"class":346},[220,49722,359],{"class":264},[220,49724,49725,49727,49729],{"class":222,"line":179},[220,49726,364],{"class":264},[220,49728,49685],{"class":346},[220,49730,386],{"class":264},[220,49732,49733,49735,49737],{"class":222,"line":389},[220,49734,402],{"class":264},[220,49736,347],{"class":346},[220,49738,359],{"class":264},[212,49740,49741],{"className":409,"code":49712,"language":411,"meta":178,"style":178},[99,49742,49743,49751,49759],{"__ignoreMap":178},[220,49744,49745,49747,49749],{"class":222,"line":223},[220,49746,343],{"class":264},[220,49748,347],{"class":420},[220,49750,359],{"class":264},[220,49752,49753,49755,49757],{"class":222,"line":179},[220,49754,364],{"class":264},[220,49756,49685],{"class":420},[220,49758,386],{"class":264},[220,49760,49761,49763,49765],{"class":222,"line":389},[220,49762,402],{"class":264},[220,49764,347],{"class":420},[220,49766,359],{"class":264},[212,49768,49769],{"className":2844,"code":49712,"language":2846,"meta":178,"style":178},[99,49770,49771,49779,49787],{"__ignoreMap":178},[220,49772,49773,49775,49777],{"class":222,"line":223},[220,49774,343],{"class":264},[220,49776,347],{"class":420},[220,49778,359],{"class":264},[220,49780,49781,49783,49785],{"class":222,"line":179},[220,49782,364],{"class":264},[220,49784,49685],{"class":420},[220,49786,386],{"class":264},[220,49788,49789,49791,49793],{"class":222,"line":389},[220,49790,402],{"class":264},[220,49792,347],{"class":420},[220,49794,359],{"class":264},[212,49796,49797],{"className":468,"code":49712,"language":469,"meta":178,"style":178},[99,49798,49799,49807,49815],{"__ignoreMap":178},[220,49800,49801,49803,49805],{"class":222,"line":223},[220,49802,343],{"class":264},[220,49804,347],{"class":420},[220,49806,359],{"class":264},[220,49808,49809,49811,49813],{"class":222,"line":179},[220,49810,364],{"class":264},[220,49812,49685],{"class":420},[220,49814,386],{"class":264},[220,49816,49817,49819,49821],{"class":222,"line":389},[220,49818,402],{"class":264},[220,49820,347],{"class":420},[220,49822,359],{"class":264},[212,49824,49826],{"className":251,"code":49825,"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,49827,49828,49838,49842,49856,49860,49869,49873],{"__ignoreMap":178},[220,49829,49830,49832,49834,49836],{"class":222,"line":223},[220,49831,261],{"class":260},[220,49833,9763],{"class":264},[220,49835,268],{"class":260},[220,49837,9768],{"class":230},[220,49839,49840],{"class":222,"line":179},[220,49841,647],{"emptyLinePlaceholder":194},[220,49843,49844,49846,49848,49850,49852,49854],{"class":222,"line":389},[220,49845,1735],{"class":260},[220,49847,1738],{"class":420},[220,49849,1741],{"class":260},[220,49851,1744],{"class":260},[220,49853,1747],{"class":226},[220,49855,1750],{"class":264},[220,49857,49858],{"class":222,"line":399},[220,49859,1765],{"class":264},[220,49861,49862,49864,49867],{"class":222,"line":644},[220,49863,1770],{"class":264},[220,49865,49866],{"class":230},"'Heatmap'",[220,49868,2465],{"class":264},[220,49870,49871],{"class":222,"line":650},[220,49872,1787],{"class":264},[220,49874,49875],{"class":222,"line":656},[220,49876,1792],{"class":264},[1504,49878,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":49880},[49881,49882],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":49685,"description":49883},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":49890,"title":49891,"body":49892,"category":31344,"componentType":24141,"description":49899,"extension":191,"meta":50084,"navigation":194,"path":50085,"requiresChild":30811,"seo":50086,"stem":50087,"__hash__":50088},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":49893,"toc":50080},[49894,49897,49900,49902,49904,49907,49909,50078],[11,49895,49891],{"id":49896},"hexgrid",[15,49898,49899],{},"Honeycomb hexagonal grid pattern",[30192,49901],{"component":49891},[23,49903,30196],{"id":24798},[30198,49905],{":props":49906},"[{\"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,49908,30204],{"id":30203},[246,49910,49911,49940,49968,49996,50024],{":tabs":1557},[212,49912,49914],{"className":334,"code":49913,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,49915,49916,49924,49932],{"__ignoreMap":178},[220,49917,49918,49920,49922],{"class":222,"line":223},[220,49919,343],{"class":264},[220,49921,347],{"class":346},[220,49923,359],{"class":264},[220,49925,49926,49928,49930],{"class":222,"line":179},[220,49927,364],{"class":264},[220,49929,49891],{"class":346},[220,49931,386],{"class":264},[220,49933,49934,49936,49938],{"class":222,"line":389},[220,49935,402],{"class":264},[220,49937,347],{"class":346},[220,49939,359],{"class":264},[212,49941,49942],{"className":409,"code":49913,"language":411,"meta":178,"style":178},[99,49943,49944,49952,49960],{"__ignoreMap":178},[220,49945,49946,49948,49950],{"class":222,"line":223},[220,49947,343],{"class":264},[220,49949,347],{"class":420},[220,49951,359],{"class":264},[220,49953,49954,49956,49958],{"class":222,"line":179},[220,49955,364],{"class":264},[220,49957,49891],{"class":420},[220,49959,386],{"class":264},[220,49961,49962,49964,49966],{"class":222,"line":389},[220,49963,402],{"class":264},[220,49965,347],{"class":420},[220,49967,359],{"class":264},[212,49969,49970],{"className":2844,"code":49913,"language":2846,"meta":178,"style":178},[99,49971,49972,49980,49988],{"__ignoreMap":178},[220,49973,49974,49976,49978],{"class":222,"line":223},[220,49975,343],{"class":264},[220,49977,347],{"class":420},[220,49979,359],{"class":264},[220,49981,49982,49984,49986],{"class":222,"line":179},[220,49983,364],{"class":264},[220,49985,49891],{"class":420},[220,49987,386],{"class":264},[220,49989,49990,49992,49994],{"class":222,"line":389},[220,49991,402],{"class":264},[220,49993,347],{"class":420},[220,49995,359],{"class":264},[212,49997,49998],{"className":468,"code":49913,"language":469,"meta":178,"style":178},[99,49999,50000,50008,50016],{"__ignoreMap":178},[220,50001,50002,50004,50006],{"class":222,"line":223},[220,50003,343],{"class":264},[220,50005,347],{"class":420},[220,50007,359],{"class":264},[220,50009,50010,50012,50014],{"class":222,"line":179},[220,50011,364],{"class":264},[220,50013,49891],{"class":420},[220,50015,386],{"class":264},[220,50017,50018,50020,50022],{"class":222,"line":389},[220,50019,402],{"class":264},[220,50021,347],{"class":420},[220,50023,359],{"class":264},[212,50025,50027],{"className":251,"code":50026,"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,50028,50029,50039,50043,50057,50061,50070,50074],{"__ignoreMap":178},[220,50030,50031,50033,50035,50037],{"class":222,"line":223},[220,50032,261],{"class":260},[220,50034,9763],{"class":264},[220,50036,268],{"class":260},[220,50038,9768],{"class":230},[220,50040,50041],{"class":222,"line":179},[220,50042,647],{"emptyLinePlaceholder":194},[220,50044,50045,50047,50049,50051,50053,50055],{"class":222,"line":389},[220,50046,1735],{"class":260},[220,50048,1738],{"class":420},[220,50050,1741],{"class":260},[220,50052,1744],{"class":260},[220,50054,1747],{"class":226},[220,50056,1750],{"class":264},[220,50058,50059],{"class":222,"line":399},[220,50060,1765],{"class":264},[220,50062,50063,50065,50068],{"class":222,"line":644},[220,50064,1770],{"class":264},[220,50066,50067],{"class":230},"'HexGrid'",[220,50069,2465],{"class":264},[220,50071,50072],{"class":222,"line":650},[220,50073,1787],{"class":264},[220,50075,50076],{"class":222,"line":656},[220,50077,1792],{"class":264},[1504,50079,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":50081},[50082,50083],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":49891,"description":49899},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":50090,"title":50091,"body":50092,"category":33488,"componentType":24141,"description":50099,"extension":191,"meta":50331,"navigation":194,"path":50332,"requiresChild":30811,"seo":50333,"stem":50334,"__hash__":50335},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":50093,"toc":50327},[50094,50097,50100,50102,50104,50107,50109,50325],[11,50095,50091],{"id":50096},"hologram",[15,50098,50099],{},"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",[30192,50101],{"component":50091},[23,50103,30196],{"id":24798},[30198,50105],{":props":50106},"[{\"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,50108,30204],{"id":30203},[246,50110,50111,50152,50190,50228,50266],{":tabs":1557},[212,50112,50114],{"className":334,"code":50113,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,50115,50116,50124,50131,50140,50144],{"__ignoreMap":178},[220,50117,50118,50120,50122],{"class":222,"line":223},[220,50119,343],{"class":264},[220,50121,347],{"class":346},[220,50123,359],{"class":264},[220,50125,50126,50128],{"class":222,"line":179},[220,50127,364],{"class":264},[220,50129,50130],{"class":346},"Hologram\n",[220,50132,50133,50135,50137],{"class":222,"line":389},[220,50134,7882],{"class":226},[220,50136,353],{"class":264},[220,50138,50139],{"class":230},"\"#5ec8ff\"\n",[220,50141,50142],{"class":222,"line":399},[220,50143,1234],{"class":264},[220,50145,50146,50148,50150],{"class":222,"line":644},[220,50147,402],{"class":264},[220,50149,347],{"class":346},[220,50151,359],{"class":264},[212,50153,50154],{"className":409,"code":50113,"language":411,"meta":178,"style":178},[99,50155,50156,50164,50170,50178,50182],{"__ignoreMap":178},[220,50157,50158,50160,50162],{"class":222,"line":223},[220,50159,343],{"class":264},[220,50161,347],{"class":420},[220,50163,359],{"class":264},[220,50165,50166,50168],{"class":222,"line":179},[220,50167,364],{"class":264},[220,50169,50130],{"class":420},[220,50171,50172,50174,50176],{"class":222,"line":389},[220,50173,7882],{"class":226},[220,50175,353],{"class":260},[220,50177,50139],{"class":230},[220,50179,50180],{"class":222,"line":399},[220,50181,1234],{"class":264},[220,50183,50184,50186,50188],{"class":222,"line":644},[220,50185,402],{"class":264},[220,50187,347],{"class":420},[220,50189,359],{"class":264},[212,50191,50192],{"className":2844,"code":50113,"language":2846,"meta":178,"style":178},[99,50193,50194,50202,50208,50216,50220],{"__ignoreMap":178},[220,50195,50196,50198,50200],{"class":222,"line":223},[220,50197,343],{"class":264},[220,50199,347],{"class":420},[220,50201,359],{"class":264},[220,50203,50204,50206],{"class":222,"line":179},[220,50205,364],{"class":264},[220,50207,50130],{"class":420},[220,50209,50210,50212,50214],{"class":222,"line":389},[220,50211,7882],{"class":226},[220,50213,353],{"class":264},[220,50215,50139],{"class":230},[220,50217,50218],{"class":222,"line":399},[220,50219,1234],{"class":264},[220,50221,50222,50224,50226],{"class":222,"line":644},[220,50223,402],{"class":264},[220,50225,347],{"class":420},[220,50227,359],{"class":264},[212,50229,50230],{"className":468,"code":50113,"language":469,"meta":178,"style":178},[99,50231,50232,50240,50246,50254,50258],{"__ignoreMap":178},[220,50233,50234,50236,50238],{"class":222,"line":223},[220,50235,343],{"class":264},[220,50237,347],{"class":420},[220,50239,359],{"class":264},[220,50241,50242,50244],{"class":222,"line":179},[220,50243,364],{"class":264},[220,50245,50130],{"class":420},[220,50247,50248,50250,50252],{"class":222,"line":389},[220,50249,7882],{"class":226},[220,50251,353],{"class":260},[220,50253,50139],{"class":230},[220,50255,50256],{"class":222,"line":399},[220,50257,1234],{"class":264},[220,50259,50260,50262,50264],{"class":222,"line":644},[220,50261,402],{"class":264},[220,50263,347],{"class":420},[220,50265,359],{"class":264},[212,50267,50269],{"className":251,"code":50268,"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,50270,50271,50281,50285,50299,50303,50317,50321],{"__ignoreMap":178},[220,50272,50273,50275,50277,50279],{"class":222,"line":223},[220,50274,261],{"class":260},[220,50276,9763],{"class":264},[220,50278,268],{"class":260},[220,50280,9768],{"class":230},[220,50282,50283],{"class":222,"line":179},[220,50284,647],{"emptyLinePlaceholder":194},[220,50286,50287,50289,50291,50293,50295,50297],{"class":222,"line":389},[220,50288,1735],{"class":260},[220,50290,1738],{"class":420},[220,50292,1741],{"class":260},[220,50294,1744],{"class":260},[220,50296,1747],{"class":226},[220,50298,1750],{"class":264},[220,50300,50301],{"class":222,"line":399},[220,50302,1765],{"class":264},[220,50304,50305,50307,50310,50312,50315],{"class":222,"line":644},[220,50306,1770],{"class":264},[220,50308,50309],{"class":230},"'Hologram'",[220,50311,1776],{"class":264},[220,50313,50314],{"class":230},"'#5ec8ff'",[220,50316,1782],{"class":264},[220,50318,50319],{"class":222,"line":650},[220,50320,1787],{"class":264},[220,50322,50323],{"class":222,"line":656},[220,50324,1792],{"class":264},[1504,50326,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50328},[50329,50330],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":50091,"description":50099},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":50337,"title":50338,"body":50339,"category":33488,"componentType":24141,"description":50346,"extension":191,"meta":50531,"navigation":194,"path":50532,"requiresChild":30811,"seo":50533,"stem":50534,"__hash__":50535},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":50340,"toc":50527},[50341,50344,50347,50349,50351,50354,50356,50525],[11,50342,50338],{"id":50343},"holographic",[15,50345,50346],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[30192,50348],{"component":50338},[23,50350,30196],{"id":24798},[30198,50352],{":props":50353},"[{\"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,50355,30204],{"id":30203},[246,50357,50358,50387,50415,50443,50471],{":tabs":1557},[212,50359,50361],{"className":334,"code":50360,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,50362,50363,50371,50379],{"__ignoreMap":178},[220,50364,50365,50367,50369],{"class":222,"line":223},[220,50366,343],{"class":264},[220,50368,347],{"class":346},[220,50370,359],{"class":264},[220,50372,50373,50375,50377],{"class":222,"line":179},[220,50374,364],{"class":264},[220,50376,50338],{"class":346},[220,50378,386],{"class":264},[220,50380,50381,50383,50385],{"class":222,"line":389},[220,50382,402],{"class":264},[220,50384,347],{"class":346},[220,50386,359],{"class":264},[212,50388,50389],{"className":409,"code":50360,"language":411,"meta":178,"style":178},[99,50390,50391,50399,50407],{"__ignoreMap":178},[220,50392,50393,50395,50397],{"class":222,"line":223},[220,50394,343],{"class":264},[220,50396,347],{"class":420},[220,50398,359],{"class":264},[220,50400,50401,50403,50405],{"class":222,"line":179},[220,50402,364],{"class":264},[220,50404,50338],{"class":420},[220,50406,386],{"class":264},[220,50408,50409,50411,50413],{"class":222,"line":389},[220,50410,402],{"class":264},[220,50412,347],{"class":420},[220,50414,359],{"class":264},[212,50416,50417],{"className":2844,"code":50360,"language":2846,"meta":178,"style":178},[99,50418,50419,50427,50435],{"__ignoreMap":178},[220,50420,50421,50423,50425],{"class":222,"line":223},[220,50422,343],{"class":264},[220,50424,347],{"class":420},[220,50426,359],{"class":264},[220,50428,50429,50431,50433],{"class":222,"line":179},[220,50430,364],{"class":264},[220,50432,50338],{"class":420},[220,50434,386],{"class":264},[220,50436,50437,50439,50441],{"class":222,"line":389},[220,50438,402],{"class":264},[220,50440,347],{"class":420},[220,50442,359],{"class":264},[212,50444,50445],{"className":468,"code":50360,"language":469,"meta":178,"style":178},[99,50446,50447,50455,50463],{"__ignoreMap":178},[220,50448,50449,50451,50453],{"class":222,"line":223},[220,50450,343],{"class":264},[220,50452,347],{"class":420},[220,50454,359],{"class":264},[220,50456,50457,50459,50461],{"class":222,"line":179},[220,50458,364],{"class":264},[220,50460,50338],{"class":420},[220,50462,386],{"class":264},[220,50464,50465,50467,50469],{"class":222,"line":389},[220,50466,402],{"class":264},[220,50468,347],{"class":420},[220,50470,359],{"class":264},[212,50472,50474],{"className":251,"code":50473,"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,50475,50476,50486,50490,50504,50508,50517,50521],{"__ignoreMap":178},[220,50477,50478,50480,50482,50484],{"class":222,"line":223},[220,50479,261],{"class":260},[220,50481,9763],{"class":264},[220,50483,268],{"class":260},[220,50485,9768],{"class":230},[220,50487,50488],{"class":222,"line":179},[220,50489,647],{"emptyLinePlaceholder":194},[220,50491,50492,50494,50496,50498,50500,50502],{"class":222,"line":389},[220,50493,1735],{"class":260},[220,50495,1738],{"class":420},[220,50497,1741],{"class":260},[220,50499,1744],{"class":260},[220,50501,1747],{"class":226},[220,50503,1750],{"class":264},[220,50505,50506],{"class":222,"line":399},[220,50507,1765],{"class":264},[220,50509,50510,50512,50515],{"class":222,"line":644},[220,50511,1770],{"class":264},[220,50513,50514],{"class":230},"'Holographic'",[220,50516,2465],{"class":264},[220,50518,50519],{"class":222,"line":650},[220,50520,1787],{"class":264},[220,50522,50523],{"class":222,"line":656},[220,50524,1792],{"class":264},[1504,50526,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":50528},[50529,50530],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":50338,"description":50346},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":50537,"title":50538,"body":50539,"category":33287,"componentType":24147,"description":50546,"extension":191,"meta":50807,"navigation":194,"path":50808,"requiresChild":194,"seo":50809,"stem":50810,"__hash__":50811},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":50540,"toc":50803},[50541,50544,50547,50549,50551,50554,50556,50801],[11,50542,50538],{"id":50543},"hueshift",[15,50545,50546],{},"Rotate hue around the color wheel",[30192,50548],{"component":50538},[23,50550,30196],{"id":24798},[30198,50552],{":props":50553},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,50555,30204],{"id":30203},[246,50557,50558,50603,50647,50691,50735],{":tabs":1557},[212,50559,50561],{"className":334,"code":50560,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,50562,50563,50571,50579,50587,50595],{"__ignoreMap":178},[220,50564,50565,50567,50569],{"class":222,"line":223},[220,50566,343],{"class":264},[220,50568,347],{"class":346},[220,50570,359],{"class":264},[220,50572,50573,50575,50577],{"class":222,"line":179},[220,50574,364],{"class":264},[220,50576,50538],{"class":346},[220,50578,359],{"class":264},[220,50580,50581,50583,50585],{"class":222,"line":389},[220,50582,2550],{"class":264},[220,50584,2553],{"class":346},[220,50586,386],{"class":264},[220,50588,50589,50591,50593],{"class":222,"line":399},[220,50590,2567],{"class":264},[220,50592,50538],{"class":346},[220,50594,359],{"class":264},[220,50596,50597,50599,50601],{"class":222,"line":644},[220,50598,402],{"class":264},[220,50600,347],{"class":346},[220,50602,359],{"class":264},[212,50604,50605],{"className":409,"code":50560,"language":411,"meta":178,"style":178},[99,50606,50607,50615,50623,50631,50639],{"__ignoreMap":178},[220,50608,50609,50611,50613],{"class":222,"line":223},[220,50610,343],{"class":264},[220,50612,347],{"class":420},[220,50614,359],{"class":264},[220,50616,50617,50619,50621],{"class":222,"line":179},[220,50618,364],{"class":264},[220,50620,50538],{"class":420},[220,50622,359],{"class":264},[220,50624,50625,50627,50629],{"class":222,"line":389},[220,50626,2550],{"class":264},[220,50628,2553],{"class":420},[220,50630,386],{"class":264},[220,50632,50633,50635,50637],{"class":222,"line":399},[220,50634,2567],{"class":264},[220,50636,50538],{"class":420},[220,50638,359],{"class":264},[220,50640,50641,50643,50645],{"class":222,"line":644},[220,50642,402],{"class":264},[220,50644,347],{"class":420},[220,50646,359],{"class":264},[212,50648,50649],{"className":2844,"code":50560,"language":2846,"meta":178,"style":178},[99,50650,50651,50659,50667,50675,50683],{"__ignoreMap":178},[220,50652,50653,50655,50657],{"class":222,"line":223},[220,50654,343],{"class":264},[220,50656,347],{"class":420},[220,50658,359],{"class":264},[220,50660,50661,50663,50665],{"class":222,"line":179},[220,50662,364],{"class":264},[220,50664,50538],{"class":420},[220,50666,359],{"class":264},[220,50668,50669,50671,50673],{"class":222,"line":389},[220,50670,2550],{"class":264},[220,50672,2553],{"class":420},[220,50674,386],{"class":264},[220,50676,50677,50679,50681],{"class":222,"line":399},[220,50678,2567],{"class":264},[220,50680,50538],{"class":420},[220,50682,359],{"class":264},[220,50684,50685,50687,50689],{"class":222,"line":644},[220,50686,402],{"class":264},[220,50688,347],{"class":420},[220,50690,359],{"class":264},[212,50692,50693],{"className":468,"code":50560,"language":469,"meta":178,"style":178},[99,50694,50695,50703,50711,50719,50727],{"__ignoreMap":178},[220,50696,50697,50699,50701],{"class":222,"line":223},[220,50698,343],{"class":264},[220,50700,347],{"class":420},[220,50702,359],{"class":264},[220,50704,50705,50707,50709],{"class":222,"line":179},[220,50706,364],{"class":264},[220,50708,50538],{"class":420},[220,50710,359],{"class":264},[220,50712,50713,50715,50717],{"class":222,"line":389},[220,50714,2550],{"class":264},[220,50716,2553],{"class":420},[220,50718,386],{"class":264},[220,50720,50721,50723,50725],{"class":222,"line":399},[220,50722,2567],{"class":264},[220,50724,50538],{"class":420},[220,50726,359],{"class":264},[220,50728,50729,50731,50733],{"class":222,"line":644},[220,50730,402],{"class":264},[220,50732,347],{"class":420},[220,50734,359],{"class":264},[212,50736,50738],{"className":251,"code":50737,"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,50739,50740,50750,50754,50768,50772,50781,50789,50793,50797],{"__ignoreMap":178},[220,50741,50742,50744,50746,50748],{"class":222,"line":223},[220,50743,261],{"class":260},[220,50745,9763],{"class":264},[220,50747,268],{"class":260},[220,50749,9768],{"class":230},[220,50751,50752],{"class":222,"line":179},[220,50753,647],{"emptyLinePlaceholder":194},[220,50755,50756,50758,50760,50762,50764,50766],{"class":222,"line":389},[220,50757,1735],{"class":260},[220,50759,1738],{"class":420},[220,50761,1741],{"class":260},[220,50763,1744],{"class":260},[220,50765,1747],{"class":226},[220,50767,1750],{"class":264},[220,50769,50770],{"class":222,"line":399},[220,50771,1765],{"class":264},[220,50773,50774,50776,50779],{"class":222,"line":644},[220,50775,1770],{"class":264},[220,50777,50778],{"class":230},"'HueShift'",[220,50780,5255],{"class":264},[220,50782,50783,50785,50787],{"class":222,"line":650},[220,50784,5260],{"class":264},[220,50786,3206],{"class":230},[220,50788,2465],{"class":264},[220,50790,50791],{"class":222,"line":656},[220,50792,5277],{"class":264},[220,50794,50795],{"class":222,"line":673},[220,50796,1787],{"class":264},[220,50798,50799],{"class":222,"line":682},[220,50800,1792],{"class":264},[1504,50802,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":50804},[50805,50806],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":50538,"description":50546},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":50813,"title":50814,"body":50815,"category":31344,"componentType":24141,"description":50822,"extension":191,"meta":51007,"navigation":194,"path":51008,"requiresChild":30811,"seo":51009,"stem":51010,"__hash__":51011},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":50816,"toc":51003},[50817,50820,50823,50825,50827,50830,50832,51001],[11,50818,50814],{"id":50819},"imagetexture",[15,50821,50822],{},"Display an image with customizable object-fit modes",[30192,50824],{"component":50814},[23,50826,30196],{"id":24798},[30198,50828],{":props":50829},"[{\"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,50831,30204],{"id":30203},[246,50833,50834,50863,50891,50919,50947],{":tabs":1557},[212,50835,50837],{"className":334,"code":50836,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,50838,50839,50847,50855],{"__ignoreMap":178},[220,50840,50841,50843,50845],{"class":222,"line":223},[220,50842,343],{"class":264},[220,50844,347],{"class":346},[220,50846,359],{"class":264},[220,50848,50849,50851,50853],{"class":222,"line":179},[220,50850,364],{"class":264},[220,50852,50814],{"class":346},[220,50854,386],{"class":264},[220,50856,50857,50859,50861],{"class":222,"line":389},[220,50858,402],{"class":264},[220,50860,347],{"class":346},[220,50862,359],{"class":264},[212,50864,50865],{"className":409,"code":50836,"language":411,"meta":178,"style":178},[99,50866,50867,50875,50883],{"__ignoreMap":178},[220,50868,50869,50871,50873],{"class":222,"line":223},[220,50870,343],{"class":264},[220,50872,347],{"class":420},[220,50874,359],{"class":264},[220,50876,50877,50879,50881],{"class":222,"line":179},[220,50878,364],{"class":264},[220,50880,50814],{"class":420},[220,50882,386],{"class":264},[220,50884,50885,50887,50889],{"class":222,"line":389},[220,50886,402],{"class":264},[220,50888,347],{"class":420},[220,50890,359],{"class":264},[212,50892,50893],{"className":2844,"code":50836,"language":2846,"meta":178,"style":178},[99,50894,50895,50903,50911],{"__ignoreMap":178},[220,50896,50897,50899,50901],{"class":222,"line":223},[220,50898,343],{"class":264},[220,50900,347],{"class":420},[220,50902,359],{"class":264},[220,50904,50905,50907,50909],{"class":222,"line":179},[220,50906,364],{"class":264},[220,50908,50814],{"class":420},[220,50910,386],{"class":264},[220,50912,50913,50915,50917],{"class":222,"line":389},[220,50914,402],{"class":264},[220,50916,347],{"class":420},[220,50918,359],{"class":264},[212,50920,50921],{"className":468,"code":50836,"language":469,"meta":178,"style":178},[99,50922,50923,50931,50939],{"__ignoreMap":178},[220,50924,50925,50927,50929],{"class":222,"line":223},[220,50926,343],{"class":264},[220,50928,347],{"class":420},[220,50930,359],{"class":264},[220,50932,50933,50935,50937],{"class":222,"line":179},[220,50934,364],{"class":264},[220,50936,50814],{"class":420},[220,50938,386],{"class":264},[220,50940,50941,50943,50945],{"class":222,"line":389},[220,50942,402],{"class":264},[220,50944,347],{"class":420},[220,50946,359],{"class":264},[212,50948,50950],{"className":251,"code":50949,"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,50951,50952,50962,50966,50980,50984,50993,50997],{"__ignoreMap":178},[220,50953,50954,50956,50958,50960],{"class":222,"line":223},[220,50955,261],{"class":260},[220,50957,9763],{"class":264},[220,50959,268],{"class":260},[220,50961,9768],{"class":230},[220,50963,50964],{"class":222,"line":179},[220,50965,647],{"emptyLinePlaceholder":194},[220,50967,50968,50970,50972,50974,50976,50978],{"class":222,"line":389},[220,50969,1735],{"class":260},[220,50971,1738],{"class":420},[220,50973,1741],{"class":260},[220,50975,1744],{"class":260},[220,50977,1747],{"class":226},[220,50979,1750],{"class":264},[220,50981,50982],{"class":222,"line":399},[220,50983,1765],{"class":264},[220,50985,50986,50988,50991],{"class":222,"line":644},[220,50987,1770],{"class":264},[220,50989,50990],{"class":230},"'ImageTexture'",[220,50992,2465],{"class":264},[220,50994,50995],{"class":222,"line":650},[220,50996,1787],{"class":264},[220,50998,50999],{"class":222,"line":656},[220,51000,1792],{"class":264},[1504,51002,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":51004},[51005,51006],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":50814,"description":50822},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":51013,"title":51014,"body":51015,"category":33287,"componentType":24147,"description":51022,"extension":191,"meta":51277,"navigation":194,"path":51278,"requiresChild":194,"seo":51279,"stem":51280,"__hash__":51281},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":51016,"toc":51274},[51017,51020,51023,51025,51027,51272],[11,51018,51014],{"id":51019},"invert",[15,51021,51022],{},"Invert RGB colors while preserving alpha",[30192,51024],{"component":51014},[23,51026,30204],{"id":30203},[246,51028,51029,51074,51118,51162,51206],{":tabs":1557},[212,51030,51032],{"className":334,"code":51031,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,51033,51034,51042,51050,51058,51066],{"__ignoreMap":178},[220,51035,51036,51038,51040],{"class":222,"line":223},[220,51037,343],{"class":264},[220,51039,347],{"class":346},[220,51041,359],{"class":264},[220,51043,51044,51046,51048],{"class":222,"line":179},[220,51045,364],{"class":264},[220,51047,51014],{"class":346},[220,51049,359],{"class":264},[220,51051,51052,51054,51056],{"class":222,"line":389},[220,51053,2550],{"class":264},[220,51055,2553],{"class":346},[220,51057,386],{"class":264},[220,51059,51060,51062,51064],{"class":222,"line":399},[220,51061,2567],{"class":264},[220,51063,51014],{"class":346},[220,51065,359],{"class":264},[220,51067,51068,51070,51072],{"class":222,"line":644},[220,51069,402],{"class":264},[220,51071,347],{"class":346},[220,51073,359],{"class":264},[212,51075,51076],{"className":409,"code":51031,"language":411,"meta":178,"style":178},[99,51077,51078,51086,51094,51102,51110],{"__ignoreMap":178},[220,51079,51080,51082,51084],{"class":222,"line":223},[220,51081,343],{"class":264},[220,51083,347],{"class":420},[220,51085,359],{"class":264},[220,51087,51088,51090,51092],{"class":222,"line":179},[220,51089,364],{"class":264},[220,51091,51014],{"class":420},[220,51093,359],{"class":264},[220,51095,51096,51098,51100],{"class":222,"line":389},[220,51097,2550],{"class":264},[220,51099,2553],{"class":420},[220,51101,386],{"class":264},[220,51103,51104,51106,51108],{"class":222,"line":399},[220,51105,2567],{"class":264},[220,51107,51014],{"class":420},[220,51109,359],{"class":264},[220,51111,51112,51114,51116],{"class":222,"line":644},[220,51113,402],{"class":264},[220,51115,347],{"class":420},[220,51117,359],{"class":264},[212,51119,51120],{"className":2844,"code":51031,"language":2846,"meta":178,"style":178},[99,51121,51122,51130,51138,51146,51154],{"__ignoreMap":178},[220,51123,51124,51126,51128],{"class":222,"line":223},[220,51125,343],{"class":264},[220,51127,347],{"class":420},[220,51129,359],{"class":264},[220,51131,51132,51134,51136],{"class":222,"line":179},[220,51133,364],{"class":264},[220,51135,51014],{"class":420},[220,51137,359],{"class":264},[220,51139,51140,51142,51144],{"class":222,"line":389},[220,51141,2550],{"class":264},[220,51143,2553],{"class":420},[220,51145,386],{"class":264},[220,51147,51148,51150,51152],{"class":222,"line":399},[220,51149,2567],{"class":264},[220,51151,51014],{"class":420},[220,51153,359],{"class":264},[220,51155,51156,51158,51160],{"class":222,"line":644},[220,51157,402],{"class":264},[220,51159,347],{"class":420},[220,51161,359],{"class":264},[212,51163,51164],{"className":468,"code":51031,"language":469,"meta":178,"style":178},[99,51165,51166,51174,51182,51190,51198],{"__ignoreMap":178},[220,51167,51168,51170,51172],{"class":222,"line":223},[220,51169,343],{"class":264},[220,51171,347],{"class":420},[220,51173,359],{"class":264},[220,51175,51176,51178,51180],{"class":222,"line":179},[220,51177,364],{"class":264},[220,51179,51014],{"class":420},[220,51181,359],{"class":264},[220,51183,51184,51186,51188],{"class":222,"line":389},[220,51185,2550],{"class":264},[220,51187,2553],{"class":420},[220,51189,386],{"class":264},[220,51191,51192,51194,51196],{"class":222,"line":399},[220,51193,2567],{"class":264},[220,51195,51014],{"class":420},[220,51197,359],{"class":264},[220,51199,51200,51202,51204],{"class":222,"line":644},[220,51201,402],{"class":264},[220,51203,347],{"class":420},[220,51205,359],{"class":264},[212,51207,51209],{"className":251,"code":51208,"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,51210,51211,51221,51225,51239,51243,51252,51260,51264,51268],{"__ignoreMap":178},[220,51212,51213,51215,51217,51219],{"class":222,"line":223},[220,51214,261],{"class":260},[220,51216,9763],{"class":264},[220,51218,268],{"class":260},[220,51220,9768],{"class":230},[220,51222,51223],{"class":222,"line":179},[220,51224,647],{"emptyLinePlaceholder":194},[220,51226,51227,51229,51231,51233,51235,51237],{"class":222,"line":389},[220,51228,1735],{"class":260},[220,51230,1738],{"class":420},[220,51232,1741],{"class":260},[220,51234,1744],{"class":260},[220,51236,1747],{"class":226},[220,51238,1750],{"class":264},[220,51240,51241],{"class":222,"line":399},[220,51242,1765],{"class":264},[220,51244,51245,51247,51250],{"class":222,"line":644},[220,51246,1770],{"class":264},[220,51248,51249],{"class":230},"'Invert'",[220,51251,5255],{"class":264},[220,51253,51254,51256,51258],{"class":222,"line":650},[220,51255,5260],{"class":264},[220,51257,3206],{"class":230},[220,51259,2465],{"class":264},[220,51261,51262],{"class":222,"line":656},[220,51263,5277],{"class":264},[220,51265,51266],{"class":222,"line":673},[220,51267,1787],{"class":264},[220,51269,51270],{"class":222,"line":682},[220,51271,1792],{"class":264},[1504,51273,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":51275},[51276],{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":51014,"description":51022},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":51283,"title":51284,"body":51285,"category":31344,"componentType":24141,"description":51292,"extension":191,"meta":51477,"navigation":194,"path":51478,"requiresChild":30811,"seo":51479,"stem":51480,"__hash__":51481},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":51286,"toc":51473},[51287,51290,51293,51295,51297,51300,51302,51471],[11,51288,51284],{"id":51289},"isometriccubes",[15,51291,51292],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[30192,51294],{"component":51284},[23,51296,30196],{"id":24798},[30198,51298],{":props":51299},"[{\"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,51301,30204],{"id":30203},[246,51303,51304,51333,51361,51389,51417],{":tabs":1557},[212,51305,51307],{"className":334,"code":51306,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,51308,51309,51317,51325],{"__ignoreMap":178},[220,51310,51311,51313,51315],{"class":222,"line":223},[220,51312,343],{"class":264},[220,51314,347],{"class":346},[220,51316,359],{"class":264},[220,51318,51319,51321,51323],{"class":222,"line":179},[220,51320,364],{"class":264},[220,51322,51284],{"class":346},[220,51324,386],{"class":264},[220,51326,51327,51329,51331],{"class":222,"line":389},[220,51328,402],{"class":264},[220,51330,347],{"class":346},[220,51332,359],{"class":264},[212,51334,51335],{"className":409,"code":51306,"language":411,"meta":178,"style":178},[99,51336,51337,51345,51353],{"__ignoreMap":178},[220,51338,51339,51341,51343],{"class":222,"line":223},[220,51340,343],{"class":264},[220,51342,347],{"class":420},[220,51344,359],{"class":264},[220,51346,51347,51349,51351],{"class":222,"line":179},[220,51348,364],{"class":264},[220,51350,51284],{"class":420},[220,51352,386],{"class":264},[220,51354,51355,51357,51359],{"class":222,"line":389},[220,51356,402],{"class":264},[220,51358,347],{"class":420},[220,51360,359],{"class":264},[212,51362,51363],{"className":2844,"code":51306,"language":2846,"meta":178,"style":178},[99,51364,51365,51373,51381],{"__ignoreMap":178},[220,51366,51367,51369,51371],{"class":222,"line":223},[220,51368,343],{"class":264},[220,51370,347],{"class":420},[220,51372,359],{"class":264},[220,51374,51375,51377,51379],{"class":222,"line":179},[220,51376,364],{"class":264},[220,51378,51284],{"class":420},[220,51380,386],{"class":264},[220,51382,51383,51385,51387],{"class":222,"line":389},[220,51384,402],{"class":264},[220,51386,347],{"class":420},[220,51388,359],{"class":264},[212,51390,51391],{"className":468,"code":51306,"language":469,"meta":178,"style":178},[99,51392,51393,51401,51409],{"__ignoreMap":178},[220,51394,51395,51397,51399],{"class":222,"line":223},[220,51396,343],{"class":264},[220,51398,347],{"class":420},[220,51400,359],{"class":264},[220,51402,51403,51405,51407],{"class":222,"line":179},[220,51404,364],{"class":264},[220,51406,51284],{"class":420},[220,51408,386],{"class":264},[220,51410,51411,51413,51415],{"class":222,"line":389},[220,51412,402],{"class":264},[220,51414,347],{"class":420},[220,51416,359],{"class":264},[212,51418,51420],{"className":251,"code":51419,"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,51421,51422,51432,51436,51450,51454,51463,51467],{"__ignoreMap":178},[220,51423,51424,51426,51428,51430],{"class":222,"line":223},[220,51425,261],{"class":260},[220,51427,9763],{"class":264},[220,51429,268],{"class":260},[220,51431,9768],{"class":230},[220,51433,51434],{"class":222,"line":179},[220,51435,647],{"emptyLinePlaceholder":194},[220,51437,51438,51440,51442,51444,51446,51448],{"class":222,"line":389},[220,51439,1735],{"class":260},[220,51441,1738],{"class":420},[220,51443,1741],{"class":260},[220,51445,1744],{"class":260},[220,51447,1747],{"class":226},[220,51449,1750],{"class":264},[220,51451,51452],{"class":222,"line":399},[220,51453,1765],{"class":264},[220,51455,51456,51458,51461],{"class":222,"line":644},[220,51457,1770],{"class":264},[220,51459,51460],{"class":230},"'IsometricCubes'",[220,51462,2465],{"class":264},[220,51464,51465],{"class":222,"line":650},[220,51466,1787],{"class":264},[220,51468,51469],{"class":222,"line":656},[220,51470,1792],{"class":264},[1504,51472,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":51474},[51475,51476],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":51284,"description":51292},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":51483,"title":51484,"body":51485,"category":31677,"componentType":24147,"description":51492,"extension":191,"meta":51753,"navigation":194,"path":51754,"requiresChild":194,"seo":51755,"stem":51756,"__hash__":51757},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":51486,"toc":51749},[51487,51490,51493,51495,51497,51500,51502,51747],[11,51488,51484],{"id":51489},"kaleidoscope",[15,51491,51492],{},"Create a kaleidoscope effect with radial mirrored segments",[30192,51494],{"component":51484},[23,51496,30196],{"id":24798},[30198,51498],{":props":51499},"[{\"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,51501,30204],{"id":30203},[246,51503,51504,51549,51593,51637,51681],{":tabs":1557},[212,51505,51507],{"className":334,"code":51506,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,51508,51509,51517,51525,51533,51541],{"__ignoreMap":178},[220,51510,51511,51513,51515],{"class":222,"line":223},[220,51512,343],{"class":264},[220,51514,347],{"class":346},[220,51516,359],{"class":264},[220,51518,51519,51521,51523],{"class":222,"line":179},[220,51520,364],{"class":264},[220,51522,51484],{"class":346},[220,51524,359],{"class":264},[220,51526,51527,51529,51531],{"class":222,"line":389},[220,51528,2550],{"class":264},[220,51530,2553],{"class":346},[220,51532,386],{"class":264},[220,51534,51535,51537,51539],{"class":222,"line":399},[220,51536,2567],{"class":264},[220,51538,51484],{"class":346},[220,51540,359],{"class":264},[220,51542,51543,51545,51547],{"class":222,"line":644},[220,51544,402],{"class":264},[220,51546,347],{"class":346},[220,51548,359],{"class":264},[212,51550,51551],{"className":409,"code":51506,"language":411,"meta":178,"style":178},[99,51552,51553,51561,51569,51577,51585],{"__ignoreMap":178},[220,51554,51555,51557,51559],{"class":222,"line":223},[220,51556,343],{"class":264},[220,51558,347],{"class":420},[220,51560,359],{"class":264},[220,51562,51563,51565,51567],{"class":222,"line":179},[220,51564,364],{"class":264},[220,51566,51484],{"class":420},[220,51568,359],{"class":264},[220,51570,51571,51573,51575],{"class":222,"line":389},[220,51572,2550],{"class":264},[220,51574,2553],{"class":420},[220,51576,386],{"class":264},[220,51578,51579,51581,51583],{"class":222,"line":399},[220,51580,2567],{"class":264},[220,51582,51484],{"class":420},[220,51584,359],{"class":264},[220,51586,51587,51589,51591],{"class":222,"line":644},[220,51588,402],{"class":264},[220,51590,347],{"class":420},[220,51592,359],{"class":264},[212,51594,51595],{"className":2844,"code":51506,"language":2846,"meta":178,"style":178},[99,51596,51597,51605,51613,51621,51629],{"__ignoreMap":178},[220,51598,51599,51601,51603],{"class":222,"line":223},[220,51600,343],{"class":264},[220,51602,347],{"class":420},[220,51604,359],{"class":264},[220,51606,51607,51609,51611],{"class":222,"line":179},[220,51608,364],{"class":264},[220,51610,51484],{"class":420},[220,51612,359],{"class":264},[220,51614,51615,51617,51619],{"class":222,"line":389},[220,51616,2550],{"class":264},[220,51618,2553],{"class":420},[220,51620,386],{"class":264},[220,51622,51623,51625,51627],{"class":222,"line":399},[220,51624,2567],{"class":264},[220,51626,51484],{"class":420},[220,51628,359],{"class":264},[220,51630,51631,51633,51635],{"class":222,"line":644},[220,51632,402],{"class":264},[220,51634,347],{"class":420},[220,51636,359],{"class":264},[212,51638,51639],{"className":468,"code":51506,"language":469,"meta":178,"style":178},[99,51640,51641,51649,51657,51665,51673],{"__ignoreMap":178},[220,51642,51643,51645,51647],{"class":222,"line":223},[220,51644,343],{"class":264},[220,51646,347],{"class":420},[220,51648,359],{"class":264},[220,51650,51651,51653,51655],{"class":222,"line":179},[220,51652,364],{"class":264},[220,51654,51484],{"class":420},[220,51656,359],{"class":264},[220,51658,51659,51661,51663],{"class":222,"line":389},[220,51660,2550],{"class":264},[220,51662,2553],{"class":420},[220,51664,386],{"class":264},[220,51666,51667,51669,51671],{"class":222,"line":399},[220,51668,2567],{"class":264},[220,51670,51484],{"class":420},[220,51672,359],{"class":264},[220,51674,51675,51677,51679],{"class":222,"line":644},[220,51676,402],{"class":264},[220,51678,347],{"class":420},[220,51680,359],{"class":264},[212,51682,51684],{"className":251,"code":51683,"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,51685,51686,51696,51700,51714,51718,51727,51735,51739,51743],{"__ignoreMap":178},[220,51687,51688,51690,51692,51694],{"class":222,"line":223},[220,51689,261],{"class":260},[220,51691,9763],{"class":264},[220,51693,268],{"class":260},[220,51695,9768],{"class":230},[220,51697,51698],{"class":222,"line":179},[220,51699,647],{"emptyLinePlaceholder":194},[220,51701,51702,51704,51706,51708,51710,51712],{"class":222,"line":389},[220,51703,1735],{"class":260},[220,51705,1738],{"class":420},[220,51707,1741],{"class":260},[220,51709,1744],{"class":260},[220,51711,1747],{"class":226},[220,51713,1750],{"class":264},[220,51715,51716],{"class":222,"line":399},[220,51717,1765],{"class":264},[220,51719,51720,51722,51725],{"class":222,"line":644},[220,51721,1770],{"class":264},[220,51723,51724],{"class":230},"'Kaleidoscope'",[220,51726,5255],{"class":264},[220,51728,51729,51731,51733],{"class":222,"line":650},[220,51730,5260],{"class":264},[220,51732,3206],{"class":230},[220,51734,2465],{"class":264},[220,51736,51737],{"class":222,"line":656},[220,51738,5277],{"class":264},[220,51740,51741],{"class":222,"line":673},[220,51742,1787],{"class":264},[220,51744,51745],{"class":222,"line":682},[220,51746,1792],{"class":264},[1504,51748,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":51750},[51751,51752],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":51484,"description":51492},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":51759,"title":51760,"body":51761,"category":31087,"componentType":24147,"description":51768,"extension":191,"meta":52029,"navigation":194,"path":52030,"requiresChild":194,"seo":52031,"stem":52032,"__hash__":52033},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":51762,"toc":52025},[51763,51766,51769,51771,51773,51776,51778,52023],[11,51764,51760],{"id":51765},"keyframes",[15,51767,51768],{},"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",[30192,51770],{"component":51760},[23,51772,30196],{"id":24798},[30198,51774],{":props":51775},"[{\"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,51777,30204],{"id":30203},[246,51779,51780,51825,51869,51913,51957],{":tabs":1557},[212,51781,51783],{"className":334,"code":51782,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,51784,51785,51793,51801,51809,51817],{"__ignoreMap":178},[220,51786,51787,51789,51791],{"class":222,"line":223},[220,51788,343],{"class":264},[220,51790,347],{"class":346},[220,51792,359],{"class":264},[220,51794,51795,51797,51799],{"class":222,"line":179},[220,51796,364],{"class":264},[220,51798,51760],{"class":346},[220,51800,359],{"class":264},[220,51802,51803,51805,51807],{"class":222,"line":389},[220,51804,2550],{"class":264},[220,51806,2553],{"class":346},[220,51808,386],{"class":264},[220,51810,51811,51813,51815],{"class":222,"line":399},[220,51812,2567],{"class":264},[220,51814,51760],{"class":346},[220,51816,359],{"class":264},[220,51818,51819,51821,51823],{"class":222,"line":644},[220,51820,402],{"class":264},[220,51822,347],{"class":346},[220,51824,359],{"class":264},[212,51826,51827],{"className":409,"code":51782,"language":411,"meta":178,"style":178},[99,51828,51829,51837,51845,51853,51861],{"__ignoreMap":178},[220,51830,51831,51833,51835],{"class":222,"line":223},[220,51832,343],{"class":264},[220,51834,347],{"class":420},[220,51836,359],{"class":264},[220,51838,51839,51841,51843],{"class":222,"line":179},[220,51840,364],{"class":264},[220,51842,51760],{"class":420},[220,51844,359],{"class":264},[220,51846,51847,51849,51851],{"class":222,"line":389},[220,51848,2550],{"class":264},[220,51850,2553],{"class":420},[220,51852,386],{"class":264},[220,51854,51855,51857,51859],{"class":222,"line":399},[220,51856,2567],{"class":264},[220,51858,51760],{"class":420},[220,51860,359],{"class":264},[220,51862,51863,51865,51867],{"class":222,"line":644},[220,51864,402],{"class":264},[220,51866,347],{"class":420},[220,51868,359],{"class":264},[212,51870,51871],{"className":2844,"code":51782,"language":2846,"meta":178,"style":178},[99,51872,51873,51881,51889,51897,51905],{"__ignoreMap":178},[220,51874,51875,51877,51879],{"class":222,"line":223},[220,51876,343],{"class":264},[220,51878,347],{"class":420},[220,51880,359],{"class":264},[220,51882,51883,51885,51887],{"class":222,"line":179},[220,51884,364],{"class":264},[220,51886,51760],{"class":420},[220,51888,359],{"class":264},[220,51890,51891,51893,51895],{"class":222,"line":389},[220,51892,2550],{"class":264},[220,51894,2553],{"class":420},[220,51896,386],{"class":264},[220,51898,51899,51901,51903],{"class":222,"line":399},[220,51900,2567],{"class":264},[220,51902,51760],{"class":420},[220,51904,359],{"class":264},[220,51906,51907,51909,51911],{"class":222,"line":644},[220,51908,402],{"class":264},[220,51910,347],{"class":420},[220,51912,359],{"class":264},[212,51914,51915],{"className":468,"code":51782,"language":469,"meta":178,"style":178},[99,51916,51917,51925,51933,51941,51949],{"__ignoreMap":178},[220,51918,51919,51921,51923],{"class":222,"line":223},[220,51920,343],{"class":264},[220,51922,347],{"class":420},[220,51924,359],{"class":264},[220,51926,51927,51929,51931],{"class":222,"line":179},[220,51928,364],{"class":264},[220,51930,51760],{"class":420},[220,51932,359],{"class":264},[220,51934,51935,51937,51939],{"class":222,"line":389},[220,51936,2550],{"class":264},[220,51938,2553],{"class":420},[220,51940,386],{"class":264},[220,51942,51943,51945,51947],{"class":222,"line":399},[220,51944,2567],{"class":264},[220,51946,51760],{"class":420},[220,51948,359],{"class":264},[220,51950,51951,51953,51955],{"class":222,"line":644},[220,51952,402],{"class":264},[220,51954,347],{"class":420},[220,51956,359],{"class":264},[212,51958,51960],{"className":251,"code":51959,"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,51961,51962,51972,51976,51990,51994,52003,52011,52015,52019],{"__ignoreMap":178},[220,51963,51964,51966,51968,51970],{"class":222,"line":223},[220,51965,261],{"class":260},[220,51967,9763],{"class":264},[220,51969,268],{"class":260},[220,51971,9768],{"class":230},[220,51973,51974],{"class":222,"line":179},[220,51975,647],{"emptyLinePlaceholder":194},[220,51977,51978,51980,51982,51984,51986,51988],{"class":222,"line":389},[220,51979,1735],{"class":260},[220,51981,1738],{"class":420},[220,51983,1741],{"class":260},[220,51985,1744],{"class":260},[220,51987,1747],{"class":226},[220,51989,1750],{"class":264},[220,51991,51992],{"class":222,"line":399},[220,51993,1765],{"class":264},[220,51995,51996,51998,52001],{"class":222,"line":644},[220,51997,1770],{"class":264},[220,51999,52000],{"class":230},"'KeyFrames'",[220,52002,5255],{"class":264},[220,52004,52005,52007,52009],{"class":222,"line":650},[220,52006,5260],{"class":264},[220,52008,3206],{"class":230},[220,52010,2465],{"class":264},[220,52012,52013],{"class":222,"line":656},[220,52014,5277],{"class":264},[220,52016,52017],{"class":222,"line":673},[220,52018,1787],{"class":264},[220,52020,52021],{"class":222,"line":682},[220,52022,1792],{"class":264},[1504,52024,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":52026},[52027,52028],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":51760,"description":51768},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":52035,"title":52036,"body":52037,"category":31087,"componentType":24141,"description":52044,"extension":191,"meta":52284,"navigation":194,"path":52285,"requiresChild":30811,"seo":52286,"stem":52287,"__hash__":52288},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":52038,"toc":52280},[52039,52042,52045,52047,52049,52052,52054,52278],[11,52040,52036],{"id":52041},"lensflare",[15,52043,52044],{},"Realistic camera lens flare with artifacts.",[30192,52046],{"component":52036},[23,52048,30196],{"id":24798},[30198,52050],{":props":52051},"[{\"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,52053,30204],{"id":30203},[246,52055,52056,52095,52138,52178,52220],{":tabs":1557},[212,52057,52059],{"className":334,"code":52058,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,52060,52061,52069,52075,52083,52087],{"__ignoreMap":178},[220,52062,52063,52065,52067],{"class":222,"line":223},[220,52064,343],{"class":264},[220,52066,347],{"class":346},[220,52068,359],{"class":264},[220,52070,52071,52073],{"class":222,"line":179},[220,52072,364],{"class":264},[220,52074,18619],{"class":346},[220,52076,52077,52079,52081],{"class":222,"line":389},[220,52078,18633],{"class":226},[220,52080,353],{"class":264},[220,52082,38802],{"class":230},[220,52084,52085],{"class":222,"line":399},[220,52086,1234],{"class":264},[220,52088,52089,52091,52093],{"class":222,"line":644},[220,52090,402],{"class":264},[220,52092,347],{"class":346},[220,52094,359],{"class":264},[212,52096,52098],{"className":409,"code":52097,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,52099,52100,52108,52114,52126,52130],{"__ignoreMap":178},[220,52101,52102,52104,52106],{"class":222,"line":223},[220,52103,343],{"class":264},[220,52105,347],{"class":420},[220,52107,359],{"class":264},[220,52109,52110,52112],{"class":222,"line":179},[220,52111,364],{"class":264},[220,52113,18619],{"class":420},[220,52115,52116,52118,52120,52122,52124],{"class":222,"line":389},[220,52117,18744],{"class":226},[220,52119,353],{"class":260},[220,52121,743],{"class":264},[220,52123,6000],{"class":420},[220,52125,749],{"class":264},[220,52127,52128],{"class":222,"line":399},[220,52129,1234],{"class":264},[220,52131,52132,52134,52136],{"class":222,"line":644},[220,52133,402],{"class":264},[220,52135,347],{"class":420},[220,52137,359],{"class":264},[212,52139,52140],{"className":2844,"code":52097,"language":2846,"meta":178,"style":178},[99,52141,52142,52150,52156,52166,52170],{"__ignoreMap":178},[220,52143,52144,52146,52148],{"class":222,"line":223},[220,52145,343],{"class":264},[220,52147,347],{"class":420},[220,52149,359],{"class":264},[220,52151,52152,52154],{"class":222,"line":179},[220,52153,364],{"class":264},[220,52155,18619],{"class":420},[220,52157,52158,52160,52162,52164],{"class":222,"line":389},[220,52159,18744],{"class":226},[220,52161,28138],{"class":264},[220,52163,6000],{"class":420},[220,52165,749],{"class":264},[220,52167,52168],{"class":222,"line":399},[220,52169,1234],{"class":264},[220,52171,52172,52174,52176],{"class":222,"line":644},[220,52173,402],{"class":264},[220,52175,347],{"class":420},[220,52177,359],{"class":264},[212,52179,52180],{"className":468,"code":52097,"language":469,"meta":178,"style":178},[99,52181,52182,52190,52196,52208,52212],{"__ignoreMap":178},[220,52183,52184,52186,52188],{"class":222,"line":223},[220,52185,343],{"class":264},[220,52187,347],{"class":420},[220,52189,359],{"class":264},[220,52191,52192,52194],{"class":222,"line":179},[220,52193,364],{"class":264},[220,52195,18619],{"class":420},[220,52197,52198,52200,52202,52204,52206],{"class":222,"line":389},[220,52199,18744],{"class":226},[220,52201,353],{"class":260},[220,52203,743],{"class":264},[220,52205,6000],{"class":420},[220,52207,749],{"class":264},[220,52209,52210],{"class":222,"line":399},[220,52211,1234],{"class":264},[220,52213,52214,52216,52218],{"class":222,"line":644},[220,52215,402],{"class":264},[220,52217,347],{"class":420},[220,52219,359],{"class":264},[212,52221,52223],{"className":251,"code":52222,"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,52224,52225,52235,52239,52253,52257,52270,52274],{"__ignoreMap":178},[220,52226,52227,52229,52231,52233],{"class":222,"line":223},[220,52228,261],{"class":260},[220,52230,9763],{"class":264},[220,52232,268],{"class":260},[220,52234,9768],{"class":230},[220,52236,52237],{"class":222,"line":179},[220,52238,647],{"emptyLinePlaceholder":194},[220,52240,52241,52243,52245,52247,52249,52251],{"class":222,"line":389},[220,52242,1735],{"class":260},[220,52244,1738],{"class":420},[220,52246,1741],{"class":260},[220,52248,1744],{"class":260},[220,52250,1747],{"class":226},[220,52252,1750],{"class":264},[220,52254,52255],{"class":222,"line":399},[220,52256,1765],{"class":264},[220,52258,52259,52261,52264,52266,52268],{"class":222,"line":644},[220,52260,1770],{"class":264},[220,52262,52263],{"class":230},"'LensFlare'",[220,52265,30484],{"class":264},[220,52267,6000],{"class":420},[220,52269,1782],{"class":264},[220,52271,52272],{"class":222,"line":650},[220,52273,1787],{"class":264},[220,52275,52276],{"class":222,"line":656},[220,52277,1792],{"class":264},[1504,52279,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52281},[52282,52283],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":52036,"description":52044},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":52290,"title":52291,"body":52292,"category":33488,"componentType":24141,"description":52544,"extension":191,"meta":52545,"navigation":194,"path":52546,"requiresChild":30811,"seo":52547,"stem":52548,"__hash__":52549},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":52293,"toc":52540},[52294,52297,52303,52305,52307,52310,52312,52538],[11,52295,52291],{"id":52296},"lightedge",[15,52298,52299,52300,7735],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,52301,49698],{"href":49696,"rel":52302},[167],[30192,52304],{"component":52291},[23,52306,30196],{"id":24798},[30198,52308],{":props":52309},"[{\"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,52311,30204],{"id":30203},[246,52313,52314,52355,52398,52438,52480],{":tabs":1557},[212,52315,52317],{"className":334,"code":52316,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,52318,52319,52327,52334,52343,52347],{"__ignoreMap":178},[220,52320,52321,52323,52325],{"class":222,"line":223},[220,52322,343],{"class":264},[220,52324,347],{"class":346},[220,52326,359],{"class":264},[220,52328,52329,52331],{"class":222,"line":179},[220,52330,364],{"class":264},[220,52332,52333],{"class":346},"LightEdge\n",[220,52335,52336,52338,52340],{"class":222,"line":389},[220,52337,18633],{"class":226},[220,52339,353],{"class":264},[220,52341,52342],{"class":230},"\"0.6\"\n",[220,52344,52345],{"class":222,"line":399},[220,52346,1234],{"class":264},[220,52348,52349,52351,52353],{"class":222,"line":644},[220,52350,402],{"class":264},[220,52352,347],{"class":346},[220,52354,359],{"class":264},[212,52356,52358],{"className":409,"code":52357,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,52359,52360,52368,52374,52386,52390],{"__ignoreMap":178},[220,52361,52362,52364,52366],{"class":222,"line":223},[220,52363,343],{"class":264},[220,52365,347],{"class":420},[220,52367,359],{"class":264},[220,52369,52370,52372],{"class":222,"line":179},[220,52371,364],{"class":264},[220,52373,52333],{"class":420},[220,52375,52376,52378,52380,52382,52384],{"class":222,"line":389},[220,52377,18744],{"class":226},[220,52379,353],{"class":260},[220,52381,743],{"class":264},[220,52383,6482],{"class":420},[220,52385,749],{"class":264},[220,52387,52388],{"class":222,"line":399},[220,52389,1234],{"class":264},[220,52391,52392,52394,52396],{"class":222,"line":644},[220,52393,402],{"class":264},[220,52395,347],{"class":420},[220,52397,359],{"class":264},[212,52399,52400],{"className":2844,"code":52357,"language":2846,"meta":178,"style":178},[99,52401,52402,52410,52416,52426,52430],{"__ignoreMap":178},[220,52403,52404,52406,52408],{"class":222,"line":223},[220,52405,343],{"class":264},[220,52407,347],{"class":420},[220,52409,359],{"class":264},[220,52411,52412,52414],{"class":222,"line":179},[220,52413,364],{"class":264},[220,52415,52333],{"class":420},[220,52417,52418,52420,52422,52424],{"class":222,"line":389},[220,52419,18744],{"class":226},[220,52421,28138],{"class":264},[220,52423,6482],{"class":420},[220,52425,749],{"class":264},[220,52427,52428],{"class":222,"line":399},[220,52429,1234],{"class":264},[220,52431,52432,52434,52436],{"class":222,"line":644},[220,52433,402],{"class":264},[220,52435,347],{"class":420},[220,52437,359],{"class":264},[212,52439,52440],{"className":468,"code":52357,"language":469,"meta":178,"style":178},[99,52441,52442,52450,52456,52468,52472],{"__ignoreMap":178},[220,52443,52444,52446,52448],{"class":222,"line":223},[220,52445,343],{"class":264},[220,52447,347],{"class":420},[220,52449,359],{"class":264},[220,52451,52452,52454],{"class":222,"line":179},[220,52453,364],{"class":264},[220,52455,52333],{"class":420},[220,52457,52458,52460,52462,52464,52466],{"class":222,"line":389},[220,52459,18744],{"class":226},[220,52461,353],{"class":260},[220,52463,743],{"class":264},[220,52465,6482],{"class":420},[220,52467,749],{"class":264},[220,52469,52470],{"class":222,"line":399},[220,52471,1234],{"class":264},[220,52473,52474,52476,52478],{"class":222,"line":644},[220,52475,402],{"class":264},[220,52477,347],{"class":420},[220,52479,359],{"class":264},[212,52481,52483],{"className":251,"code":52482,"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,52484,52485,52495,52499,52513,52517,52530,52534],{"__ignoreMap":178},[220,52486,52487,52489,52491,52493],{"class":222,"line":223},[220,52488,261],{"class":260},[220,52490,9763],{"class":264},[220,52492,268],{"class":260},[220,52494,9768],{"class":230},[220,52496,52497],{"class":222,"line":179},[220,52498,647],{"emptyLinePlaceholder":194},[220,52500,52501,52503,52505,52507,52509,52511],{"class":222,"line":389},[220,52502,1735],{"class":260},[220,52504,1738],{"class":420},[220,52506,1741],{"class":260},[220,52508,1744],{"class":260},[220,52510,1747],{"class":226},[220,52512,1750],{"class":264},[220,52514,52515],{"class":222,"line":399},[220,52516,1765],{"class":264},[220,52518,52519,52521,52524,52526,52528],{"class":222,"line":644},[220,52520,1770],{"class":264},[220,52522,52523],{"class":230},"'LightEdge'",[220,52525,30484],{"class":264},[220,52527,6482],{"class":420},[220,52529,1782],{"class":264},[220,52531,52532],{"class":222,"line":650},[220,52533,1787],{"class":264},[220,52535,52536],{"class":222,"line":656},[220,52537,1792],{"class":264},[1504,52539,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52541},[52542,52543],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":52291,"description":52544},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":52551,"title":52552,"body":52553,"category":31087,"componentType":24147,"description":52560,"extension":191,"meta":52877,"navigation":194,"path":52878,"requiresChild":194,"seo":52879,"stem":52880,"__hash__":52881},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":52554,"toc":52873},[52555,52558,52561,52563,52565,52568,52570,52871],[11,52556,52552],{"id":52557},"lightleak",[15,52559,52560],{},"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",[30192,52562],{"component":52552},[23,52564,30196],{"id":24798},[30198,52566],{":props":52567},"[{\"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,52569,30204],{"id":30203},[246,52571,52572,52628,52687,52743,52801],{":tabs":1557},[212,52573,52575],{"className":334,"code":52574,"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,52576,52577,52585,52592,52600,52604,52612,52620],{"__ignoreMap":178},[220,52578,52579,52581,52583],{"class":222,"line":223},[220,52580,343],{"class":264},[220,52582,347],{"class":346},[220,52584,359],{"class":264},[220,52586,52587,52589],{"class":222,"line":179},[220,52588,364],{"class":264},[220,52590,52591],{"class":346},"LightLeak\n",[220,52593,52594,52596,52598],{"class":222,"line":389},[220,52595,18633],{"class":226},[220,52597,353],{"class":264},[220,52599,16369],{"class":230},[220,52601,52602],{"class":222,"line":399},[220,52603,30240],{"class":264},[220,52605,52606,52608,52610],{"class":222,"line":644},[220,52607,2550],{"class":264},[220,52609,2553],{"class":346},[220,52611,386],{"class":264},[220,52613,52614,52616,52618],{"class":222,"line":650},[220,52615,2567],{"class":264},[220,52617,52552],{"class":346},[220,52619,359],{"class":264},[220,52621,52622,52624,52626],{"class":222,"line":656},[220,52623,402],{"class":264},[220,52625,347],{"class":346},[220,52627,359],{"class":264},[212,52629,52631],{"className":409,"code":52630,"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,52632,52633,52641,52647,52659,52663,52671,52679],{"__ignoreMap":178},[220,52634,52635,52637,52639],{"class":222,"line":223},[220,52636,343],{"class":264},[220,52638,347],{"class":420},[220,52640,359],{"class":264},[220,52642,52643,52645],{"class":222,"line":179},[220,52644,364],{"class":264},[220,52646,52591],{"class":420},[220,52648,52649,52651,52653,52655,52657],{"class":222,"line":389},[220,52650,18744],{"class":226},[220,52652,353],{"class":260},[220,52654,743],{"class":264},[220,52656,16453],{"class":420},[220,52658,749],{"class":264},[220,52660,52661],{"class":222,"line":399},[220,52662,30240],{"class":264},[220,52664,52665,52667,52669],{"class":222,"line":644},[220,52666,2550],{"class":264},[220,52668,2553],{"class":420},[220,52670,386],{"class":264},[220,52672,52673,52675,52677],{"class":222,"line":650},[220,52674,2567],{"class":264},[220,52676,52552],{"class":420},[220,52678,359],{"class":264},[220,52680,52681,52683,52685],{"class":222,"line":656},[220,52682,402],{"class":264},[220,52684,347],{"class":420},[220,52686,359],{"class":264},[212,52688,52689],{"className":2844,"code":52630,"language":2846,"meta":178,"style":178},[99,52690,52691,52699,52705,52715,52719,52727,52735],{"__ignoreMap":178},[220,52692,52693,52695,52697],{"class":222,"line":223},[220,52694,343],{"class":264},[220,52696,347],{"class":420},[220,52698,359],{"class":264},[220,52700,52701,52703],{"class":222,"line":179},[220,52702,364],{"class":264},[220,52704,52591],{"class":420},[220,52706,52707,52709,52711,52713],{"class":222,"line":389},[220,52708,18744],{"class":226},[220,52710,28138],{"class":264},[220,52712,16453],{"class":420},[220,52714,749],{"class":264},[220,52716,52717],{"class":222,"line":399},[220,52718,30240],{"class":264},[220,52720,52721,52723,52725],{"class":222,"line":644},[220,52722,2550],{"class":264},[220,52724,2553],{"class":420},[220,52726,386],{"class":264},[220,52728,52729,52731,52733],{"class":222,"line":650},[220,52730,2567],{"class":264},[220,52732,52552],{"class":420},[220,52734,359],{"class":264},[220,52736,52737,52739,52741],{"class":222,"line":656},[220,52738,402],{"class":264},[220,52740,347],{"class":420},[220,52742,359],{"class":264},[212,52744,52745],{"className":468,"code":52630,"language":469,"meta":178,"style":178},[99,52746,52747,52755,52761,52773,52777,52785,52793],{"__ignoreMap":178},[220,52748,52749,52751,52753],{"class":222,"line":223},[220,52750,343],{"class":264},[220,52752,347],{"class":420},[220,52754,359],{"class":264},[220,52756,52757,52759],{"class":222,"line":179},[220,52758,364],{"class":264},[220,52760,52591],{"class":420},[220,52762,52763,52765,52767,52769,52771],{"class":222,"line":389},[220,52764,18744],{"class":226},[220,52766,353],{"class":260},[220,52768,743],{"class":264},[220,52770,16453],{"class":420},[220,52772,749],{"class":264},[220,52774,52775],{"class":222,"line":399},[220,52776,30240],{"class":264},[220,52778,52779,52781,52783],{"class":222,"line":644},[220,52780,2550],{"class":264},[220,52782,2553],{"class":420},[220,52784,386],{"class":264},[220,52786,52787,52789,52791],{"class":222,"line":650},[220,52788,2567],{"class":264},[220,52790,52552],{"class":420},[220,52792,359],{"class":264},[220,52794,52795,52797,52799],{"class":222,"line":656},[220,52796,402],{"class":264},[220,52798,347],{"class":420},[220,52800,359],{"class":264},[212,52802,52804],{"className":251,"code":52803,"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,52805,52806,52816,52820,52834,52838,52851,52859,52863,52867],{"__ignoreMap":178},[220,52807,52808,52810,52812,52814],{"class":222,"line":223},[220,52809,261],{"class":260},[220,52811,9763],{"class":264},[220,52813,268],{"class":260},[220,52815,9768],{"class":230},[220,52817,52818],{"class":222,"line":179},[220,52819,647],{"emptyLinePlaceholder":194},[220,52821,52822,52824,52826,52828,52830,52832],{"class":222,"line":389},[220,52823,1735],{"class":260},[220,52825,1738],{"class":420},[220,52827,1741],{"class":260},[220,52829,1744],{"class":260},[220,52831,1747],{"class":226},[220,52833,1750],{"class":264},[220,52835,52836],{"class":222,"line":399},[220,52837,1765],{"class":264},[220,52839,52840,52842,52845,52847,52849],{"class":222,"line":644},[220,52841,1770],{"class":264},[220,52843,52844],{"class":230},"'LightLeak'",[220,52846,30484],{"class":264},[220,52848,16453],{"class":420},[220,52850,5792],{"class":264},[220,52852,52853,52855,52857],{"class":222,"line":650},[220,52854,5260],{"class":264},[220,52856,3206],{"class":230},[220,52858,2465],{"class":264},[220,52860,52861],{"class":222,"line":656},[220,52862,5277],{"class":264},[220,52864,52865],{"class":222,"line":673},[220,52866,1787],{"class":264},[220,52868,52869],{"class":222,"line":682},[220,52870,1792],{"class":264},[1504,52872,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52874},[52875,52876],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":52552,"description":52560},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":52883,"title":52884,"body":52885,"category":30515,"componentType":24147,"description":52892,"extension":191,"meta":53209,"navigation":194,"path":53210,"requiresChild":194,"seo":53211,"stem":53212,"__hash__":53213},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":52886,"toc":53205},[52887,52890,52893,52895,52897,52900,52902,53203],[11,52888,52884],{"id":52889},"linearblur",[15,52891,52892],{},"Directional motion blur in a specific angle",[30192,52894],{"component":52884},[23,52896,30196],{"id":24798},[30198,52898],{":props":52899},"[{\"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,52901,30204],{"id":30203},[246,52903,52904,52960,53019,53075,53133],{":tabs":1557},[212,52905,52907],{"className":334,"code":52906,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,52908,52909,52917,52924,52932,52936,52944,52952],{"__ignoreMap":178},[220,52910,52911,52913,52915],{"class":222,"line":223},[220,52912,343],{"class":264},[220,52914,347],{"class":346},[220,52916,359],{"class":264},[220,52918,52919,52921],{"class":222,"line":179},[220,52920,364],{"class":264},[220,52922,52923],{"class":346},"LinearBlur\n",[220,52925,52926,52928,52930],{"class":222,"line":389},[220,52927,18633],{"class":226},[220,52929,353],{"class":264},[220,52931,40160],{"class":230},[220,52933,52934],{"class":222,"line":399},[220,52935,30240],{"class":264},[220,52937,52938,52940,52942],{"class":222,"line":644},[220,52939,2550],{"class":264},[220,52941,2553],{"class":346},[220,52943,386],{"class":264},[220,52945,52946,52948,52950],{"class":222,"line":650},[220,52947,2567],{"class":264},[220,52949,52884],{"class":346},[220,52951,359],{"class":264},[220,52953,52954,52956,52958],{"class":222,"line":656},[220,52955,402],{"class":264},[220,52957,347],{"class":346},[220,52959,359],{"class":264},[212,52961,52963],{"className":409,"code":52962,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,52964,52965,52973,52979,52991,52995,53003,53011],{"__ignoreMap":178},[220,52966,52967,52969,52971],{"class":222,"line":223},[220,52968,343],{"class":264},[220,52970,347],{"class":420},[220,52972,359],{"class":264},[220,52974,52975,52977],{"class":222,"line":179},[220,52976,364],{"class":264},[220,52978,52923],{"class":420},[220,52980,52981,52983,52985,52987,52989],{"class":222,"line":389},[220,52982,18744],{"class":226},[220,52984,353],{"class":260},[220,52986,743],{"class":264},[220,52988,22273],{"class":420},[220,52990,749],{"class":264},[220,52992,52993],{"class":222,"line":399},[220,52994,30240],{"class":264},[220,52996,52997,52999,53001],{"class":222,"line":644},[220,52998,2550],{"class":264},[220,53000,2553],{"class":420},[220,53002,386],{"class":264},[220,53004,53005,53007,53009],{"class":222,"line":650},[220,53006,2567],{"class":264},[220,53008,52884],{"class":420},[220,53010,359],{"class":264},[220,53012,53013,53015,53017],{"class":222,"line":656},[220,53014,402],{"class":264},[220,53016,347],{"class":420},[220,53018,359],{"class":264},[212,53020,53021],{"className":2844,"code":52962,"language":2846,"meta":178,"style":178},[99,53022,53023,53031,53037,53047,53051,53059,53067],{"__ignoreMap":178},[220,53024,53025,53027,53029],{"class":222,"line":223},[220,53026,343],{"class":264},[220,53028,347],{"class":420},[220,53030,359],{"class":264},[220,53032,53033,53035],{"class":222,"line":179},[220,53034,364],{"class":264},[220,53036,52923],{"class":420},[220,53038,53039,53041,53043,53045],{"class":222,"line":389},[220,53040,18744],{"class":226},[220,53042,28138],{"class":264},[220,53044,22273],{"class":420},[220,53046,749],{"class":264},[220,53048,53049],{"class":222,"line":399},[220,53050,30240],{"class":264},[220,53052,53053,53055,53057],{"class":222,"line":644},[220,53054,2550],{"class":264},[220,53056,2553],{"class":420},[220,53058,386],{"class":264},[220,53060,53061,53063,53065],{"class":222,"line":650},[220,53062,2567],{"class":264},[220,53064,52884],{"class":420},[220,53066,359],{"class":264},[220,53068,53069,53071,53073],{"class":222,"line":656},[220,53070,402],{"class":264},[220,53072,347],{"class":420},[220,53074,359],{"class":264},[212,53076,53077],{"className":468,"code":52962,"language":469,"meta":178,"style":178},[99,53078,53079,53087,53093,53105,53109,53117,53125],{"__ignoreMap":178},[220,53080,53081,53083,53085],{"class":222,"line":223},[220,53082,343],{"class":264},[220,53084,347],{"class":420},[220,53086,359],{"class":264},[220,53088,53089,53091],{"class":222,"line":179},[220,53090,364],{"class":264},[220,53092,52923],{"class":420},[220,53094,53095,53097,53099,53101,53103],{"class":222,"line":389},[220,53096,18744],{"class":226},[220,53098,353],{"class":260},[220,53100,743],{"class":264},[220,53102,22273],{"class":420},[220,53104,749],{"class":264},[220,53106,53107],{"class":222,"line":399},[220,53108,30240],{"class":264},[220,53110,53111,53113,53115],{"class":222,"line":644},[220,53112,2550],{"class":264},[220,53114,2553],{"class":420},[220,53116,386],{"class":264},[220,53118,53119,53121,53123],{"class":222,"line":650},[220,53120,2567],{"class":264},[220,53122,52884],{"class":420},[220,53124,359],{"class":264},[220,53126,53127,53129,53131],{"class":222,"line":656},[220,53128,402],{"class":264},[220,53130,347],{"class":420},[220,53132,359],{"class":264},[212,53134,53136],{"className":251,"code":53135,"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,53137,53138,53148,53152,53166,53170,53183,53191,53195,53199],{"__ignoreMap":178},[220,53139,53140,53142,53144,53146],{"class":222,"line":223},[220,53141,261],{"class":260},[220,53143,9763],{"class":264},[220,53145,268],{"class":260},[220,53147,9768],{"class":230},[220,53149,53150],{"class":222,"line":179},[220,53151,647],{"emptyLinePlaceholder":194},[220,53153,53154,53156,53158,53160,53162,53164],{"class":222,"line":389},[220,53155,1735],{"class":260},[220,53157,1738],{"class":420},[220,53159,1741],{"class":260},[220,53161,1744],{"class":260},[220,53163,1747],{"class":226},[220,53165,1750],{"class":264},[220,53167,53168],{"class":222,"line":399},[220,53169,1765],{"class":264},[220,53171,53172,53174,53177,53179,53181],{"class":222,"line":644},[220,53173,1770],{"class":264},[220,53175,53176],{"class":230},"'LinearBlur'",[220,53178,30484],{"class":264},[220,53180,22273],{"class":420},[220,53182,5792],{"class":264},[220,53184,53185,53187,53189],{"class":222,"line":650},[220,53186,5260],{"class":264},[220,53188,3206],{"class":230},[220,53190,2465],{"class":264},[220,53192,53193],{"class":222,"line":656},[220,53194,5277],{"class":264},[220,53196,53197],{"class":222,"line":673},[220,53198,1787],{"class":264},[220,53200,53201],{"class":222,"line":682},[220,53202,1792],{"class":264},[1504,53204,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53206},[53207,53208],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":52884,"description":52892},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":53215,"title":367,"body":53216,"category":31344,"componentType":24141,"description":53223,"extension":191,"meta":53407,"navigation":194,"path":53408,"requiresChild":30811,"seo":53409,"stem":53410,"__hash__":53411},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":53217,"toc":53403},[53218,53221,53224,53226,53228,53231,53233,53401],[11,53219,367],{"id":53220},"lineargradient",[15,53222,53223],{},"Create smooth linear color gradients",[30192,53225],{"component":367},[23,53227,30196],{"id":24798},[30198,53229],{":props":53230},"[{\"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,53232,30204],{"id":30203},[246,53234,53235,53264,53292,53320,53348],{":tabs":1557},[212,53236,53238],{"className":334,"code":53237,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,53239,53240,53248,53256],{"__ignoreMap":178},[220,53241,53242,53244,53246],{"class":222,"line":223},[220,53243,343],{"class":264},[220,53245,347],{"class":346},[220,53247,359],{"class":264},[220,53249,53250,53252,53254],{"class":222,"line":179},[220,53251,364],{"class":264},[220,53253,367],{"class":346},[220,53255,386],{"class":264},[220,53257,53258,53260,53262],{"class":222,"line":389},[220,53259,402],{"class":264},[220,53261,347],{"class":346},[220,53263,359],{"class":264},[212,53265,53266],{"className":409,"code":53237,"language":411,"meta":178,"style":178},[99,53267,53268,53276,53284],{"__ignoreMap":178},[220,53269,53270,53272,53274],{"class":222,"line":223},[220,53271,343],{"class":264},[220,53273,347],{"class":420},[220,53275,359],{"class":264},[220,53277,53278,53280,53282],{"class":222,"line":179},[220,53279,364],{"class":264},[220,53281,367],{"class":420},[220,53283,386],{"class":264},[220,53285,53286,53288,53290],{"class":222,"line":389},[220,53287,402],{"class":264},[220,53289,347],{"class":420},[220,53291,359],{"class":264},[212,53293,53294],{"className":2844,"code":53237,"language":2846,"meta":178,"style":178},[99,53295,53296,53304,53312],{"__ignoreMap":178},[220,53297,53298,53300,53302],{"class":222,"line":223},[220,53299,343],{"class":264},[220,53301,347],{"class":420},[220,53303,359],{"class":264},[220,53305,53306,53308,53310],{"class":222,"line":179},[220,53307,364],{"class":264},[220,53309,367],{"class":420},[220,53311,386],{"class":264},[220,53313,53314,53316,53318],{"class":222,"line":389},[220,53315,402],{"class":264},[220,53317,347],{"class":420},[220,53319,359],{"class":264},[212,53321,53322],{"className":468,"code":53237,"language":469,"meta":178,"style":178},[99,53323,53324,53332,53340],{"__ignoreMap":178},[220,53325,53326,53328,53330],{"class":222,"line":223},[220,53327,343],{"class":264},[220,53329,347],{"class":420},[220,53331,359],{"class":264},[220,53333,53334,53336,53338],{"class":222,"line":179},[220,53335,364],{"class":264},[220,53337,367],{"class":420},[220,53339,386],{"class":264},[220,53341,53342,53344,53346],{"class":222,"line":389},[220,53343,402],{"class":264},[220,53345,347],{"class":420},[220,53347,359],{"class":264},[212,53349,53351],{"className":251,"code":53350,"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,53352,53353,53363,53367,53381,53385,53393,53397],{"__ignoreMap":178},[220,53354,53355,53357,53359,53361],{"class":222,"line":223},[220,53356,261],{"class":260},[220,53358,9763],{"class":264},[220,53360,268],{"class":260},[220,53362,9768],{"class":230},[220,53364,53365],{"class":222,"line":179},[220,53366,647],{"emptyLinePlaceholder":194},[220,53368,53369,53371,53373,53375,53377,53379],{"class":222,"line":389},[220,53370,1735],{"class":260},[220,53372,1738],{"class":420},[220,53374,1741],{"class":260},[220,53376,1744],{"class":260},[220,53378,1747],{"class":226},[220,53380,1750],{"class":264},[220,53382,53383],{"class":222,"line":399},[220,53384,1765],{"class":264},[220,53386,53387,53389,53391],{"class":222,"line":644},[220,53388,1770],{"class":264},[220,53390,2462],{"class":230},[220,53392,2465],{"class":264},[220,53394,53395],{"class":222,"line":650},[220,53396,1787],{"class":264},[220,53398,53399],{"class":222,"line":656},[220,53400,1792],{"class":264},[1504,53402,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":53404},[53405,53406],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":53223},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":53413,"title":53414,"body":53415,"category":33488,"componentType":24141,"description":53422,"extension":191,"meta":53607,"navigation":194,"path":53608,"requiresChild":30811,"seo":53609,"stem":53610,"__hash__":53611},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":53416,"toc":53603},[53417,53420,53423,53425,53427,53430,53432,53601],[11,53418,53414],{"id":53419},"liquidmetal",[15,53421,53422],{},"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",[30192,53424],{"component":53414},[23,53426,30196],{"id":24798},[30198,53428],{":props":53429},"[{\"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,53431,30204],{"id":30203},[246,53433,53434,53463,53491,53519,53547],{":tabs":1557},[212,53435,53437],{"className":334,"code":53436,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,53438,53439,53447,53455],{"__ignoreMap":178},[220,53440,53441,53443,53445],{"class":222,"line":223},[220,53442,343],{"class":264},[220,53444,347],{"class":346},[220,53446,359],{"class":264},[220,53448,53449,53451,53453],{"class":222,"line":179},[220,53450,364],{"class":264},[220,53452,53414],{"class":346},[220,53454,386],{"class":264},[220,53456,53457,53459,53461],{"class":222,"line":389},[220,53458,402],{"class":264},[220,53460,347],{"class":346},[220,53462,359],{"class":264},[212,53464,53465],{"className":409,"code":53436,"language":411,"meta":178,"style":178},[99,53466,53467,53475,53483],{"__ignoreMap":178},[220,53468,53469,53471,53473],{"class":222,"line":223},[220,53470,343],{"class":264},[220,53472,347],{"class":420},[220,53474,359],{"class":264},[220,53476,53477,53479,53481],{"class":222,"line":179},[220,53478,364],{"class":264},[220,53480,53414],{"class":420},[220,53482,386],{"class":264},[220,53484,53485,53487,53489],{"class":222,"line":389},[220,53486,402],{"class":264},[220,53488,347],{"class":420},[220,53490,359],{"class":264},[212,53492,53493],{"className":2844,"code":53436,"language":2846,"meta":178,"style":178},[99,53494,53495,53503,53511],{"__ignoreMap":178},[220,53496,53497,53499,53501],{"class":222,"line":223},[220,53498,343],{"class":264},[220,53500,347],{"class":420},[220,53502,359],{"class":264},[220,53504,53505,53507,53509],{"class":222,"line":179},[220,53506,364],{"class":264},[220,53508,53414],{"class":420},[220,53510,386],{"class":264},[220,53512,53513,53515,53517],{"class":222,"line":389},[220,53514,402],{"class":264},[220,53516,347],{"class":420},[220,53518,359],{"class":264},[212,53520,53521],{"className":468,"code":53436,"language":469,"meta":178,"style":178},[99,53522,53523,53531,53539],{"__ignoreMap":178},[220,53524,53525,53527,53529],{"class":222,"line":223},[220,53526,343],{"class":264},[220,53528,347],{"class":420},[220,53530,359],{"class":264},[220,53532,53533,53535,53537],{"class":222,"line":179},[220,53534,364],{"class":264},[220,53536,53414],{"class":420},[220,53538,386],{"class":264},[220,53540,53541,53543,53545],{"class":222,"line":389},[220,53542,402],{"class":264},[220,53544,347],{"class":420},[220,53546,359],{"class":264},[212,53548,53550],{"className":251,"code":53549,"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,53551,53552,53562,53566,53580,53584,53593,53597],{"__ignoreMap":178},[220,53553,53554,53556,53558,53560],{"class":222,"line":223},[220,53555,261],{"class":260},[220,53557,9763],{"class":264},[220,53559,268],{"class":260},[220,53561,9768],{"class":230},[220,53563,53564],{"class":222,"line":179},[220,53565,647],{"emptyLinePlaceholder":194},[220,53567,53568,53570,53572,53574,53576,53578],{"class":222,"line":389},[220,53569,1735],{"class":260},[220,53571,1738],{"class":420},[220,53573,1741],{"class":260},[220,53575,1744],{"class":260},[220,53577,1747],{"class":226},[220,53579,1750],{"class":264},[220,53581,53582],{"class":222,"line":399},[220,53583,1765],{"class":264},[220,53585,53586,53588,53591],{"class":222,"line":644},[220,53587,1770],{"class":264},[220,53589,53590],{"class":230},"'LiquidMetal'",[220,53592,2465],{"class":264},[220,53594,53595],{"class":222,"line":650},[220,53596,1787],{"class":264},[220,53598,53599],{"class":222,"line":656},[220,53600,1792],{"class":264},[1504,53602,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":53604},[53605,53606],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":53414,"description":53422},"docs\u002Fcomponents\u002FLiquidMetal","LmQ5r2jwprcNrDO0hQT_86dYHtyOQFU-SFxP_e6xZTM",{"id":53613,"title":53614,"body":53615,"category":35553,"componentType":24147,"description":53622,"extension":191,"meta":53985,"navigation":194,"path":53986,"requiresChild":194,"seo":53987,"stem":53988,"__hash__":53989},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":53616,"toc":53981},[53617,53620,53623,53625,53627,53630,53632,53979],[11,53618,53614],{"id":53619},"liquify",[15,53621,53622],{},"Liquid-like interactive deformation effect",[30192,53624],{"component":53614},[23,53626,30196],{"id":24798},[30198,53628],{":props":53629},"[{\"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,53631,30204],{"id":30203},[246,53633,53634,53698,53769,53835,53905],{":tabs":1557},[212,53635,53637],{"className":334,"code":53636,"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,53638,53639,53647,53654,53662,53670,53674,53682,53690],{"__ignoreMap":178},[220,53640,53641,53643,53645],{"class":222,"line":223},[220,53642,343],{"class":264},[220,53644,347],{"class":346},[220,53646,359],{"class":264},[220,53648,53649,53651],{"class":222,"line":179},[220,53650,364],{"class":264},[220,53652,53653],{"class":346},"Liquify\n",[220,53655,53656,53658,53660],{"class":222,"line":389},[220,53657,18633],{"class":226},[220,53659,353],{"class":264},[220,53661,38793],{"class":230},[220,53663,53664,53666,53668],{"class":222,"line":399},[220,53665,15666],{"class":226},[220,53667,353],{"class":264},[220,53669,33544],{"class":230},[220,53671,53672],{"class":222,"line":644},[220,53673,30240],{"class":264},[220,53675,53676,53678,53680],{"class":222,"line":650},[220,53677,2550],{"class":264},[220,53679,2553],{"class":346},[220,53681,386],{"class":264},[220,53683,53684,53686,53688],{"class":222,"line":656},[220,53685,2567],{"class":264},[220,53687,53614],{"class":346},[220,53689,359],{"class":264},[220,53691,53692,53694,53696],{"class":222,"line":673},[220,53693,402],{"class":264},[220,53695,347],{"class":346},[220,53697,359],{"class":264},[212,53699,53701],{"className":409,"code":53700,"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,53702,53703,53711,53717,53729,53741,53745,53753,53761],{"__ignoreMap":178},[220,53704,53705,53707,53709],{"class":222,"line":223},[220,53706,343],{"class":264},[220,53708,347],{"class":420},[220,53710,359],{"class":264},[220,53712,53713,53715],{"class":222,"line":179},[220,53714,364],{"class":264},[220,53716,53653],{"class":420},[220,53718,53719,53721,53723,53725,53727],{"class":222,"line":389},[220,53720,18744],{"class":226},[220,53722,353],{"class":260},[220,53724,743],{"class":264},[220,53726,22113],{"class":420},[220,53728,749],{"class":264},[220,53730,53731,53733,53735,53737,53739],{"class":222,"line":399},[220,53732,7892],{"class":226},[220,53734,353],{"class":260},[220,53736,743],{"class":264},[220,53738,6923],{"class":420},[220,53740,749],{"class":264},[220,53742,53743],{"class":222,"line":644},[220,53744,30240],{"class":264},[220,53746,53747,53749,53751],{"class":222,"line":650},[220,53748,2550],{"class":264},[220,53750,2553],{"class":420},[220,53752,386],{"class":264},[220,53754,53755,53757,53759],{"class":222,"line":656},[220,53756,2567],{"class":264},[220,53758,53614],{"class":420},[220,53760,359],{"class":264},[220,53762,53763,53765,53767],{"class":222,"line":673},[220,53764,402],{"class":264},[220,53766,347],{"class":420},[220,53768,359],{"class":264},[212,53770,53771],{"className":2844,"code":53700,"language":2846,"meta":178,"style":178},[99,53772,53773,53781,53787,53797,53807,53811,53819,53827],{"__ignoreMap":178},[220,53774,53775,53777,53779],{"class":222,"line":223},[220,53776,343],{"class":264},[220,53778,347],{"class":420},[220,53780,359],{"class":264},[220,53782,53783,53785],{"class":222,"line":179},[220,53784,364],{"class":264},[220,53786,53653],{"class":420},[220,53788,53789,53791,53793,53795],{"class":222,"line":389},[220,53790,18744],{"class":226},[220,53792,28138],{"class":264},[220,53794,22113],{"class":420},[220,53796,749],{"class":264},[220,53798,53799,53801,53803,53805],{"class":222,"line":399},[220,53800,7892],{"class":226},[220,53802,28138],{"class":264},[220,53804,6923],{"class":420},[220,53806,749],{"class":264},[220,53808,53809],{"class":222,"line":644},[220,53810,30240],{"class":264},[220,53812,53813,53815,53817],{"class":222,"line":650},[220,53814,2550],{"class":264},[220,53816,2553],{"class":420},[220,53818,386],{"class":264},[220,53820,53821,53823,53825],{"class":222,"line":656},[220,53822,2567],{"class":264},[220,53824,53614],{"class":420},[220,53826,359],{"class":264},[220,53828,53829,53831,53833],{"class":222,"line":673},[220,53830,402],{"class":264},[220,53832,347],{"class":420},[220,53834,359],{"class":264},[212,53836,53837],{"className":468,"code":53700,"language":469,"meta":178,"style":178},[99,53838,53839,53847,53853,53865,53877,53881,53889,53897],{"__ignoreMap":178},[220,53840,53841,53843,53845],{"class":222,"line":223},[220,53842,343],{"class":264},[220,53844,347],{"class":420},[220,53846,359],{"class":264},[220,53848,53849,53851],{"class":222,"line":179},[220,53850,364],{"class":264},[220,53852,53653],{"class":420},[220,53854,53855,53857,53859,53861,53863],{"class":222,"line":389},[220,53856,18744],{"class":226},[220,53858,353],{"class":260},[220,53860,743],{"class":264},[220,53862,22113],{"class":420},[220,53864,749],{"class":264},[220,53866,53867,53869,53871,53873,53875],{"class":222,"line":399},[220,53868,7892],{"class":226},[220,53870,353],{"class":260},[220,53872,743],{"class":264},[220,53874,6923],{"class":420},[220,53876,749],{"class":264},[220,53878,53879],{"class":222,"line":644},[220,53880,30240],{"class":264},[220,53882,53883,53885,53887],{"class":222,"line":650},[220,53884,2550],{"class":264},[220,53886,2553],{"class":420},[220,53888,386],{"class":264},[220,53890,53891,53893,53895],{"class":222,"line":656},[220,53892,2567],{"class":264},[220,53894,53614],{"class":420},[220,53896,359],{"class":264},[220,53898,53899,53901,53903],{"class":222,"line":673},[220,53900,402],{"class":264},[220,53902,347],{"class":420},[220,53904,359],{"class":264},[212,53906,53908],{"className":251,"code":53907,"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,53909,53910,53920,53924,53938,53942,53959,53967,53971,53975],{"__ignoreMap":178},[220,53911,53912,53914,53916,53918],{"class":222,"line":223},[220,53913,261],{"class":260},[220,53915,9763],{"class":264},[220,53917,268],{"class":260},[220,53919,9768],{"class":230},[220,53921,53922],{"class":222,"line":179},[220,53923,647],{"emptyLinePlaceholder":194},[220,53925,53926,53928,53930,53932,53934,53936],{"class":222,"line":389},[220,53927,1735],{"class":260},[220,53929,1738],{"class":420},[220,53931,1741],{"class":260},[220,53933,1744],{"class":260},[220,53935,1747],{"class":226},[220,53937,1750],{"class":264},[220,53939,53940],{"class":222,"line":399},[220,53941,1765],{"class":264},[220,53943,53944,53946,53949,53951,53953,53955,53957],{"class":222,"line":644},[220,53945,1770],{"class":264},[220,53947,53948],{"class":230},"'Liquify'",[220,53950,30484],{"class":264},[220,53952,22113],{"class":420},[220,53954,4812],{"class":264},[220,53956,6923],{"class":420},[220,53958,5792],{"class":264},[220,53960,53961,53963,53965],{"class":222,"line":650},[220,53962,5260],{"class":264},[220,53964,3206],{"class":230},[220,53966,2465],{"class":264},[220,53968,53969],{"class":222,"line":656},[220,53970,5277],{"class":264},[220,53972,53973],{"class":222,"line":673},[220,53974,1787],{"class":264},[220,53976,53977],{"class":222,"line":682},[220,53978,1792],{"class":264},[1504,53980,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53982},[53983,53984],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":53614,"description":53622},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":53991,"title":53992,"body":53993,"category":31344,"componentType":24141,"description":54000,"extension":191,"meta":54185,"navigation":194,"path":54186,"requiresChild":30811,"seo":54187,"stem":54188,"__hash__":54189},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":53994,"toc":54181},[53995,53998,54001,54003,54005,54008,54010,54179],[11,53996,53992],{"id":53997},"marble",[15,53999,54000],{},"Classic marble swirl and vein texture using noise-warped sine waves",[30192,54002],{"component":53992},[23,54004,30196],{"id":24798},[30198,54006],{":props":54007},"[{\"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,54009,30204],{"id":30203},[246,54011,54012,54041,54069,54097,54125],{":tabs":1557},[212,54013,54015],{"className":334,"code":54014,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,54016,54017,54025,54033],{"__ignoreMap":178},[220,54018,54019,54021,54023],{"class":222,"line":223},[220,54020,343],{"class":264},[220,54022,347],{"class":346},[220,54024,359],{"class":264},[220,54026,54027,54029,54031],{"class":222,"line":179},[220,54028,364],{"class":264},[220,54030,53992],{"class":346},[220,54032,386],{"class":264},[220,54034,54035,54037,54039],{"class":222,"line":389},[220,54036,402],{"class":264},[220,54038,347],{"class":346},[220,54040,359],{"class":264},[212,54042,54043],{"className":409,"code":54014,"language":411,"meta":178,"style":178},[99,54044,54045,54053,54061],{"__ignoreMap":178},[220,54046,54047,54049,54051],{"class":222,"line":223},[220,54048,343],{"class":264},[220,54050,347],{"class":420},[220,54052,359],{"class":264},[220,54054,54055,54057,54059],{"class":222,"line":179},[220,54056,364],{"class":264},[220,54058,53992],{"class":420},[220,54060,386],{"class":264},[220,54062,54063,54065,54067],{"class":222,"line":389},[220,54064,402],{"class":264},[220,54066,347],{"class":420},[220,54068,359],{"class":264},[212,54070,54071],{"className":2844,"code":54014,"language":2846,"meta":178,"style":178},[99,54072,54073,54081,54089],{"__ignoreMap":178},[220,54074,54075,54077,54079],{"class":222,"line":223},[220,54076,343],{"class":264},[220,54078,347],{"class":420},[220,54080,359],{"class":264},[220,54082,54083,54085,54087],{"class":222,"line":179},[220,54084,364],{"class":264},[220,54086,53992],{"class":420},[220,54088,386],{"class":264},[220,54090,54091,54093,54095],{"class":222,"line":389},[220,54092,402],{"class":264},[220,54094,347],{"class":420},[220,54096,359],{"class":264},[212,54098,54099],{"className":468,"code":54014,"language":469,"meta":178,"style":178},[99,54100,54101,54109,54117],{"__ignoreMap":178},[220,54102,54103,54105,54107],{"class":222,"line":223},[220,54104,343],{"class":264},[220,54106,347],{"class":420},[220,54108,359],{"class":264},[220,54110,54111,54113,54115],{"class":222,"line":179},[220,54112,364],{"class":264},[220,54114,53992],{"class":420},[220,54116,386],{"class":264},[220,54118,54119,54121,54123],{"class":222,"line":389},[220,54120,402],{"class":264},[220,54122,347],{"class":420},[220,54124,359],{"class":264},[212,54126,54128],{"className":251,"code":54127,"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,54129,54130,54140,54144,54158,54162,54171,54175],{"__ignoreMap":178},[220,54131,54132,54134,54136,54138],{"class":222,"line":223},[220,54133,261],{"class":260},[220,54135,9763],{"class":264},[220,54137,268],{"class":260},[220,54139,9768],{"class":230},[220,54141,54142],{"class":222,"line":179},[220,54143,647],{"emptyLinePlaceholder":194},[220,54145,54146,54148,54150,54152,54154,54156],{"class":222,"line":389},[220,54147,1735],{"class":260},[220,54149,1738],{"class":420},[220,54151,1741],{"class":260},[220,54153,1744],{"class":260},[220,54155,1747],{"class":226},[220,54157,1750],{"class":264},[220,54159,54160],{"class":222,"line":399},[220,54161,1765],{"class":264},[220,54163,54164,54166,54169],{"class":222,"line":644},[220,54165,1770],{"class":264},[220,54167,54168],{"class":230},"'Marble'",[220,54170,2465],{"class":264},[220,54172,54173],{"class":222,"line":650},[220,54174,1787],{"class":264},[220,54176,54177],{"class":222,"line":656},[220,54178,1792],{"class":264},[1504,54180,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":54182},[54183,54184],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":53992,"description":54000},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":54191,"title":54192,"body":54193,"category":31677,"componentType":24147,"description":54200,"extension":191,"meta":54461,"navigation":194,"path":54462,"requiresChild":194,"seo":54463,"stem":54464,"__hash__":54465},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":54194,"toc":54457},[54195,54198,54201,54203,54205,54208,54210,54455],[11,54196,54192],{"id":54197},"mirror",[15,54199,54200],{},"Mirror content across a line defined by center point and angle",[30192,54202],{"component":54192},[23,54204,30196],{"id":24798},[30198,54206],{":props":54207},"[{\"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,54209,30204],{"id":30203},[246,54211,54212,54257,54301,54345,54389],{":tabs":1557},[212,54213,54215],{"className":334,"code":54214,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,54216,54217,54225,54233,54241,54249],{"__ignoreMap":178},[220,54218,54219,54221,54223],{"class":222,"line":223},[220,54220,343],{"class":264},[220,54222,347],{"class":346},[220,54224,359],{"class":264},[220,54226,54227,54229,54231],{"class":222,"line":179},[220,54228,364],{"class":264},[220,54230,54192],{"class":346},[220,54232,359],{"class":264},[220,54234,54235,54237,54239],{"class":222,"line":389},[220,54236,2550],{"class":264},[220,54238,2553],{"class":346},[220,54240,386],{"class":264},[220,54242,54243,54245,54247],{"class":222,"line":399},[220,54244,2567],{"class":264},[220,54246,54192],{"class":346},[220,54248,359],{"class":264},[220,54250,54251,54253,54255],{"class":222,"line":644},[220,54252,402],{"class":264},[220,54254,347],{"class":346},[220,54256,359],{"class":264},[212,54258,54259],{"className":409,"code":54214,"language":411,"meta":178,"style":178},[99,54260,54261,54269,54277,54285,54293],{"__ignoreMap":178},[220,54262,54263,54265,54267],{"class":222,"line":223},[220,54264,343],{"class":264},[220,54266,347],{"class":420},[220,54268,359],{"class":264},[220,54270,54271,54273,54275],{"class":222,"line":179},[220,54272,364],{"class":264},[220,54274,54192],{"class":420},[220,54276,359],{"class":264},[220,54278,54279,54281,54283],{"class":222,"line":389},[220,54280,2550],{"class":264},[220,54282,2553],{"class":420},[220,54284,386],{"class":264},[220,54286,54287,54289,54291],{"class":222,"line":399},[220,54288,2567],{"class":264},[220,54290,54192],{"class":420},[220,54292,359],{"class":264},[220,54294,54295,54297,54299],{"class":222,"line":644},[220,54296,402],{"class":264},[220,54298,347],{"class":420},[220,54300,359],{"class":264},[212,54302,54303],{"className":2844,"code":54214,"language":2846,"meta":178,"style":178},[99,54304,54305,54313,54321,54329,54337],{"__ignoreMap":178},[220,54306,54307,54309,54311],{"class":222,"line":223},[220,54308,343],{"class":264},[220,54310,347],{"class":420},[220,54312,359],{"class":264},[220,54314,54315,54317,54319],{"class":222,"line":179},[220,54316,364],{"class":264},[220,54318,54192],{"class":420},[220,54320,359],{"class":264},[220,54322,54323,54325,54327],{"class":222,"line":389},[220,54324,2550],{"class":264},[220,54326,2553],{"class":420},[220,54328,386],{"class":264},[220,54330,54331,54333,54335],{"class":222,"line":399},[220,54332,2567],{"class":264},[220,54334,54192],{"class":420},[220,54336,359],{"class":264},[220,54338,54339,54341,54343],{"class":222,"line":644},[220,54340,402],{"class":264},[220,54342,347],{"class":420},[220,54344,359],{"class":264},[212,54346,54347],{"className":468,"code":54214,"language":469,"meta":178,"style":178},[99,54348,54349,54357,54365,54373,54381],{"__ignoreMap":178},[220,54350,54351,54353,54355],{"class":222,"line":223},[220,54352,343],{"class":264},[220,54354,347],{"class":420},[220,54356,359],{"class":264},[220,54358,54359,54361,54363],{"class":222,"line":179},[220,54360,364],{"class":264},[220,54362,54192],{"class":420},[220,54364,359],{"class":264},[220,54366,54367,54369,54371],{"class":222,"line":389},[220,54368,2550],{"class":264},[220,54370,2553],{"class":420},[220,54372,386],{"class":264},[220,54374,54375,54377,54379],{"class":222,"line":399},[220,54376,2567],{"class":264},[220,54378,54192],{"class":420},[220,54380,359],{"class":264},[220,54382,54383,54385,54387],{"class":222,"line":644},[220,54384,402],{"class":264},[220,54386,347],{"class":420},[220,54388,359],{"class":264},[212,54390,54392],{"className":251,"code":54391,"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,54393,54394,54404,54408,54422,54426,54435,54443,54447,54451],{"__ignoreMap":178},[220,54395,54396,54398,54400,54402],{"class":222,"line":223},[220,54397,261],{"class":260},[220,54399,9763],{"class":264},[220,54401,268],{"class":260},[220,54403,9768],{"class":230},[220,54405,54406],{"class":222,"line":179},[220,54407,647],{"emptyLinePlaceholder":194},[220,54409,54410,54412,54414,54416,54418,54420],{"class":222,"line":389},[220,54411,1735],{"class":260},[220,54413,1738],{"class":420},[220,54415,1741],{"class":260},[220,54417,1744],{"class":260},[220,54419,1747],{"class":226},[220,54421,1750],{"class":264},[220,54423,54424],{"class":222,"line":399},[220,54425,1765],{"class":264},[220,54427,54428,54430,54433],{"class":222,"line":644},[220,54429,1770],{"class":264},[220,54431,54432],{"class":230},"'Mirror'",[220,54434,5255],{"class":264},[220,54436,54437,54439,54441],{"class":222,"line":650},[220,54438,5260],{"class":264},[220,54440,3206],{"class":230},[220,54442,2465],{"class":264},[220,54444,54445],{"class":222,"line":656},[220,54446,5277],{"class":264},[220,54448,54449],{"class":222,"line":673},[220,54450,1787],{"class":264},[220,54452,54453],{"class":222,"line":682},[220,54454,1792],{"class":264},[1504,54456,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":54458},[54459,54460],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":54192,"description":54200},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":54467,"title":54468,"body":54469,"category":31344,"componentType":24141,"description":54476,"extension":191,"meta":54661,"navigation":194,"path":54662,"requiresChild":30811,"seo":54663,"stem":54664,"__hash__":54665},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":54470,"toc":54657},[54471,54474,54477,54479,54481,54484,54486,54655],[11,54472,54468],{"id":54473},"multipointgradient",[15,54475,54476],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[30192,54478],{"component":54468},[23,54480,30196],{"id":24798},[30198,54482],{":props":54483},"[{\"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,54485,30204],{"id":30203},[246,54487,54488,54517,54545,54573,54601],{":tabs":1557},[212,54489,54491],{"className":334,"code":54490,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,54492,54493,54501,54509],{"__ignoreMap":178},[220,54494,54495,54497,54499],{"class":222,"line":223},[220,54496,343],{"class":264},[220,54498,347],{"class":346},[220,54500,359],{"class":264},[220,54502,54503,54505,54507],{"class":222,"line":179},[220,54504,364],{"class":264},[220,54506,54468],{"class":346},[220,54508,386],{"class":264},[220,54510,54511,54513,54515],{"class":222,"line":389},[220,54512,402],{"class":264},[220,54514,347],{"class":346},[220,54516,359],{"class":264},[212,54518,54519],{"className":409,"code":54490,"language":411,"meta":178,"style":178},[99,54520,54521,54529,54537],{"__ignoreMap":178},[220,54522,54523,54525,54527],{"class":222,"line":223},[220,54524,343],{"class":264},[220,54526,347],{"class":420},[220,54528,359],{"class":264},[220,54530,54531,54533,54535],{"class":222,"line":179},[220,54532,364],{"class":264},[220,54534,54468],{"class":420},[220,54536,386],{"class":264},[220,54538,54539,54541,54543],{"class":222,"line":389},[220,54540,402],{"class":264},[220,54542,347],{"class":420},[220,54544,359],{"class":264},[212,54546,54547],{"className":2844,"code":54490,"language":2846,"meta":178,"style":178},[99,54548,54549,54557,54565],{"__ignoreMap":178},[220,54550,54551,54553,54555],{"class":222,"line":223},[220,54552,343],{"class":264},[220,54554,347],{"class":420},[220,54556,359],{"class":264},[220,54558,54559,54561,54563],{"class":222,"line":179},[220,54560,364],{"class":264},[220,54562,54468],{"class":420},[220,54564,386],{"class":264},[220,54566,54567,54569,54571],{"class":222,"line":389},[220,54568,402],{"class":264},[220,54570,347],{"class":420},[220,54572,359],{"class":264},[212,54574,54575],{"className":468,"code":54490,"language":469,"meta":178,"style":178},[99,54576,54577,54585,54593],{"__ignoreMap":178},[220,54578,54579,54581,54583],{"class":222,"line":223},[220,54580,343],{"class":264},[220,54582,347],{"class":420},[220,54584,359],{"class":264},[220,54586,54587,54589,54591],{"class":222,"line":179},[220,54588,364],{"class":264},[220,54590,54468],{"class":420},[220,54592,386],{"class":264},[220,54594,54595,54597,54599],{"class":222,"line":389},[220,54596,402],{"class":264},[220,54598,347],{"class":420},[220,54600,359],{"class":264},[212,54602,54604],{"className":251,"code":54603,"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,54605,54606,54616,54620,54634,54638,54647,54651],{"__ignoreMap":178},[220,54607,54608,54610,54612,54614],{"class":222,"line":223},[220,54609,261],{"class":260},[220,54611,9763],{"class":264},[220,54613,268],{"class":260},[220,54615,9768],{"class":230},[220,54617,54618],{"class":222,"line":179},[220,54619,647],{"emptyLinePlaceholder":194},[220,54621,54622,54624,54626,54628,54630,54632],{"class":222,"line":389},[220,54623,1735],{"class":260},[220,54625,1738],{"class":420},[220,54627,1741],{"class":260},[220,54629,1744],{"class":260},[220,54631,1747],{"class":226},[220,54633,1750],{"class":264},[220,54635,54636],{"class":222,"line":399},[220,54637,1765],{"class":264},[220,54639,54640,54642,54645],{"class":222,"line":644},[220,54641,1770],{"class":264},[220,54643,54644],{"class":230},"'MultiPointGradient'",[220,54646,2465],{"class":264},[220,54648,54649],{"class":222,"line":650},[220,54650,1787],{"class":264},[220,54652,54653],{"class":222,"line":656},[220,54654,1792],{"class":264},[1504,54656,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":54658},[54659,54660],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":54468,"description":54476},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":54667,"title":19242,"body":54668,"category":33488,"componentType":24141,"description":54675,"extension":191,"meta":54955,"navigation":194,"path":54956,"requiresChild":30811,"seo":54957,"stem":54958,"__hash__":54959},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":54669,"toc":54951},[54670,54673,54676,54678,54680,54683,54685,54949],[11,54671,19242],{"id":54672},"neon",[15,54674,54675],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[30192,54677],{"component":19242},[23,54679,30196],{"id":24798},[30198,54681],{":props":54682},"[{\"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,54684,30204],{"id":30203},[246,54686,54687,54737,54789,54837,54887],{":tabs":1557},[212,54688,54690],{"className":334,"code":54689,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,54691,54692,54700,54707,54716,54725,54729],{"__ignoreMap":178},[220,54693,54694,54696,54698],{"class":222,"line":223},[220,54695,343],{"class":264},[220,54697,347],{"class":346},[220,54699,359],{"class":264},[220,54701,54702,54704],{"class":222,"line":179},[220,54703,364],{"class":264},[220,54705,54706],{"class":346},"Neon\n",[220,54708,54709,54711,54713],{"class":222,"line":389},[220,54710,7882],{"class":226},[220,54712,353],{"class":264},[220,54714,54715],{"class":230},"\"#00ddff\"\n",[220,54717,54718,54720,54722],{"class":222,"line":399},[220,54719,18633],{"class":226},[220,54721,353],{"class":264},[220,54723,54724],{"class":230},"\"1.5\"\n",[220,54726,54727],{"class":222,"line":644},[220,54728,1234],{"class":264},[220,54730,54731,54733,54735],{"class":222,"line":650},[220,54732,402],{"class":264},[220,54734,347],{"class":346},[220,54736,359],{"class":264},[212,54738,54740],{"className":409,"code":54739,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,54741,54742,54750,54756,54764,54777,54781],{"__ignoreMap":178},[220,54743,54744,54746,54748],{"class":222,"line":223},[220,54745,343],{"class":264},[220,54747,347],{"class":420},[220,54749,359],{"class":264},[220,54751,54752,54754],{"class":222,"line":179},[220,54753,364],{"class":264},[220,54755,54706],{"class":420},[220,54757,54758,54760,54762],{"class":222,"line":389},[220,54759,7882],{"class":226},[220,54761,353],{"class":260},[220,54763,54715],{"class":230},[220,54765,54766,54768,54770,54772,54775],{"class":222,"line":399},[220,54767,18744],{"class":226},[220,54769,353],{"class":260},[220,54771,743],{"class":264},[220,54773,54774],{"class":420},"1.5",[220,54776,749],{"class":264},[220,54778,54779],{"class":222,"line":644},[220,54780,1234],{"class":264},[220,54782,54783,54785,54787],{"class":222,"line":650},[220,54784,402],{"class":264},[220,54786,347],{"class":420},[220,54788,359],{"class":264},[212,54790,54791],{"className":2844,"code":54739,"language":2846,"meta":178,"style":178},[99,54792,54793,54801,54807,54815,54825,54829],{"__ignoreMap":178},[220,54794,54795,54797,54799],{"class":222,"line":223},[220,54796,343],{"class":264},[220,54798,347],{"class":420},[220,54800,359],{"class":264},[220,54802,54803,54805],{"class":222,"line":179},[220,54804,364],{"class":264},[220,54806,54706],{"class":420},[220,54808,54809,54811,54813],{"class":222,"line":389},[220,54810,7882],{"class":226},[220,54812,353],{"class":264},[220,54814,54715],{"class":230},[220,54816,54817,54819,54821,54823],{"class":222,"line":399},[220,54818,18744],{"class":226},[220,54820,28138],{"class":264},[220,54822,54774],{"class":420},[220,54824,749],{"class":264},[220,54826,54827],{"class":222,"line":644},[220,54828,1234],{"class":264},[220,54830,54831,54833,54835],{"class":222,"line":650},[220,54832,402],{"class":264},[220,54834,347],{"class":420},[220,54836,359],{"class":264},[212,54838,54839],{"className":468,"code":54739,"language":469,"meta":178,"style":178},[99,54840,54841,54849,54855,54863,54875,54879],{"__ignoreMap":178},[220,54842,54843,54845,54847],{"class":222,"line":223},[220,54844,343],{"class":264},[220,54846,347],{"class":420},[220,54848,359],{"class":264},[220,54850,54851,54853],{"class":222,"line":179},[220,54852,364],{"class":264},[220,54854,54706],{"class":420},[220,54856,54857,54859,54861],{"class":222,"line":389},[220,54858,7882],{"class":226},[220,54860,353],{"class":260},[220,54862,54715],{"class":230},[220,54864,54865,54867,54869,54871,54873],{"class":222,"line":399},[220,54866,18744],{"class":226},[220,54868,353],{"class":260},[220,54870,743],{"class":264},[220,54872,54774],{"class":420},[220,54874,749],{"class":264},[220,54876,54877],{"class":222,"line":644},[220,54878,1234],{"class":264},[220,54880,54881,54883,54885],{"class":222,"line":650},[220,54882,402],{"class":264},[220,54884,347],{"class":420},[220,54886,359],{"class":264},[212,54888,54890],{"className":251,"code":54889,"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,54891,54892,54902,54906,54920,54924,54941,54945],{"__ignoreMap":178},[220,54893,54894,54896,54898,54900],{"class":222,"line":223},[220,54895,261],{"class":260},[220,54897,9763],{"class":264},[220,54899,268],{"class":260},[220,54901,9768],{"class":230},[220,54903,54904],{"class":222,"line":179},[220,54905,647],{"emptyLinePlaceholder":194},[220,54907,54908,54910,54912,54914,54916,54918],{"class":222,"line":389},[220,54909,1735],{"class":260},[220,54911,1738],{"class":420},[220,54913,1741],{"class":260},[220,54915,1744],{"class":260},[220,54917,1747],{"class":226},[220,54919,1750],{"class":264},[220,54921,54922],{"class":222,"line":399},[220,54923,1765],{"class":264},[220,54925,54926,54928,54930,54932,54935,54937,54939],{"class":222,"line":644},[220,54927,1770],{"class":264},[220,54929,19849],{"class":230},[220,54931,1776],{"class":264},[220,54933,54934],{"class":230},"'#00ddff'",[220,54936,41295],{"class":264},[220,54938,54774],{"class":420},[220,54940,1782],{"class":264},[220,54942,54943],{"class":222,"line":650},[220,54944,1787],{"class":264},[220,54946,54947],{"class":222,"line":656},[220,54948,1792],{"class":264},[1504,54950,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54952},[54953,54954],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":19242,"description":54675},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":54961,"title":54962,"body":54963,"category":31087,"componentType":24147,"description":54970,"extension":191,"meta":55231,"navigation":194,"path":55232,"requiresChild":194,"seo":55233,"stem":55234,"__hash__":55235},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":54964,"toc":55227},[54965,54968,54971,54973,54975,54978,54980,55225],[11,54966,54962],{"id":54967},"objecttracker",[15,54969,54970],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[30192,54972],{"component":54962},[23,54974,30196],{"id":24798},[30198,54976],{":props":54977},"[{\"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,54979,30204],{"id":30203},[246,54981,54982,55027,55071,55115,55159],{":tabs":1557},[212,54983,54985],{"className":334,"code":54984,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,54986,54987,54995,55003,55011,55019],{"__ignoreMap":178},[220,54988,54989,54991,54993],{"class":222,"line":223},[220,54990,343],{"class":264},[220,54992,347],{"class":346},[220,54994,359],{"class":264},[220,54996,54997,54999,55001],{"class":222,"line":179},[220,54998,364],{"class":264},[220,55000,54962],{"class":346},[220,55002,359],{"class":264},[220,55004,55005,55007,55009],{"class":222,"line":389},[220,55006,2550],{"class":264},[220,55008,2553],{"class":346},[220,55010,386],{"class":264},[220,55012,55013,55015,55017],{"class":222,"line":399},[220,55014,2567],{"class":264},[220,55016,54962],{"class":346},[220,55018,359],{"class":264},[220,55020,55021,55023,55025],{"class":222,"line":644},[220,55022,402],{"class":264},[220,55024,347],{"class":346},[220,55026,359],{"class":264},[212,55028,55029],{"className":409,"code":54984,"language":411,"meta":178,"style":178},[99,55030,55031,55039,55047,55055,55063],{"__ignoreMap":178},[220,55032,55033,55035,55037],{"class":222,"line":223},[220,55034,343],{"class":264},[220,55036,347],{"class":420},[220,55038,359],{"class":264},[220,55040,55041,55043,55045],{"class":222,"line":179},[220,55042,364],{"class":264},[220,55044,54962],{"class":420},[220,55046,359],{"class":264},[220,55048,55049,55051,55053],{"class":222,"line":389},[220,55050,2550],{"class":264},[220,55052,2553],{"class":420},[220,55054,386],{"class":264},[220,55056,55057,55059,55061],{"class":222,"line":399},[220,55058,2567],{"class":264},[220,55060,54962],{"class":420},[220,55062,359],{"class":264},[220,55064,55065,55067,55069],{"class":222,"line":644},[220,55066,402],{"class":264},[220,55068,347],{"class":420},[220,55070,359],{"class":264},[212,55072,55073],{"className":2844,"code":54984,"language":2846,"meta":178,"style":178},[99,55074,55075,55083,55091,55099,55107],{"__ignoreMap":178},[220,55076,55077,55079,55081],{"class":222,"line":223},[220,55078,343],{"class":264},[220,55080,347],{"class":420},[220,55082,359],{"class":264},[220,55084,55085,55087,55089],{"class":222,"line":179},[220,55086,364],{"class":264},[220,55088,54962],{"class":420},[220,55090,359],{"class":264},[220,55092,55093,55095,55097],{"class":222,"line":389},[220,55094,2550],{"class":264},[220,55096,2553],{"class":420},[220,55098,386],{"class":264},[220,55100,55101,55103,55105],{"class":222,"line":399},[220,55102,2567],{"class":264},[220,55104,54962],{"class":420},[220,55106,359],{"class":264},[220,55108,55109,55111,55113],{"class":222,"line":644},[220,55110,402],{"class":264},[220,55112,347],{"class":420},[220,55114,359],{"class":264},[212,55116,55117],{"className":468,"code":54984,"language":469,"meta":178,"style":178},[99,55118,55119,55127,55135,55143,55151],{"__ignoreMap":178},[220,55120,55121,55123,55125],{"class":222,"line":223},[220,55122,343],{"class":264},[220,55124,347],{"class":420},[220,55126,359],{"class":264},[220,55128,55129,55131,55133],{"class":222,"line":179},[220,55130,364],{"class":264},[220,55132,54962],{"class":420},[220,55134,359],{"class":264},[220,55136,55137,55139,55141],{"class":222,"line":389},[220,55138,2550],{"class":264},[220,55140,2553],{"class":420},[220,55142,386],{"class":264},[220,55144,55145,55147,55149],{"class":222,"line":399},[220,55146,2567],{"class":264},[220,55148,54962],{"class":420},[220,55150,359],{"class":264},[220,55152,55153,55155,55157],{"class":222,"line":644},[220,55154,402],{"class":264},[220,55156,347],{"class":420},[220,55158,359],{"class":264},[212,55160,55162],{"className":251,"code":55161,"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,55163,55164,55174,55178,55192,55196,55205,55213,55217,55221],{"__ignoreMap":178},[220,55165,55166,55168,55170,55172],{"class":222,"line":223},[220,55167,261],{"class":260},[220,55169,9763],{"class":264},[220,55171,268],{"class":260},[220,55173,9768],{"class":230},[220,55175,55176],{"class":222,"line":179},[220,55177,647],{"emptyLinePlaceholder":194},[220,55179,55180,55182,55184,55186,55188,55190],{"class":222,"line":389},[220,55181,1735],{"class":260},[220,55183,1738],{"class":420},[220,55185,1741],{"class":260},[220,55187,1744],{"class":260},[220,55189,1747],{"class":226},[220,55191,1750],{"class":264},[220,55193,55194],{"class":222,"line":399},[220,55195,1765],{"class":264},[220,55197,55198,55200,55203],{"class":222,"line":644},[220,55199,1770],{"class":264},[220,55201,55202],{"class":230},"'ObjectTracker'",[220,55204,5255],{"class":264},[220,55206,55207,55209,55211],{"class":222,"line":650},[220,55208,5260],{"class":264},[220,55210,3206],{"class":230},[220,55212,2465],{"class":264},[220,55214,55215],{"class":222,"line":656},[220,55216,5277],{"class":264},[220,55218,55219],{"class":222,"line":673},[220,55220,1787],{"class":264},[220,55222,55223],{"class":222,"line":682},[220,55224,1792],{"class":264},[1504,55226,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":55228},[55229,55230],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":54962,"description":54970},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":55237,"title":55238,"body":55239,"category":31677,"componentType":24147,"description":55246,"extension":191,"meta":55564,"navigation":194,"path":55565,"requiresChild":194,"seo":55566,"stem":55567,"__hash__":55568},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":55240,"toc":55560},[55241,55244,55247,55249,55251,55254,55256,55558],[11,55242,55238],{"id":55243},"pagepeel",[15,55245,55246],{},"Curl the content up from a corner like a peeling page",[30192,55248],{"component":55238},[23,55250,30196],{"id":24798},[30198,55252],{":props":55253},"[{\"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,55255,30204],{"id":30203},[246,55257,55258,55315,55374,55430,55488],{":tabs":1557},[212,55259,55261],{"className":334,"code":55260,"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,55262,55263,55271,55278,55287,55291,55299,55307],{"__ignoreMap":178},[220,55264,55265,55267,55269],{"class":222,"line":223},[220,55266,343],{"class":264},[220,55268,347],{"class":346},[220,55270,359],{"class":264},[220,55272,55273,55275],{"class":222,"line":179},[220,55274,364],{"class":264},[220,55276,55277],{"class":346},"PagePeel\n",[220,55279,55280,55282,55284],{"class":222,"line":389},[220,55281,15666],{"class":226},[220,55283,353],{"class":264},[220,55285,55286],{"class":230},"\"0.2\"\n",[220,55288,55289],{"class":222,"line":399},[220,55290,30240],{"class":264},[220,55292,55293,55295,55297],{"class":222,"line":644},[220,55294,2550],{"class":264},[220,55296,2553],{"class":346},[220,55298,386],{"class":264},[220,55300,55301,55303,55305],{"class":222,"line":650},[220,55302,2567],{"class":264},[220,55304,55238],{"class":346},[220,55306,359],{"class":264},[220,55308,55309,55311,55313],{"class":222,"line":656},[220,55310,402],{"class":264},[220,55312,347],{"class":346},[220,55314,359],{"class":264},[212,55316,55318],{"className":409,"code":55317,"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,55319,55320,55328,55334,55346,55350,55358,55366],{"__ignoreMap":178},[220,55321,55322,55324,55326],{"class":222,"line":223},[220,55323,343],{"class":264},[220,55325,347],{"class":420},[220,55327,359],{"class":264},[220,55329,55330,55332],{"class":222,"line":179},[220,55331,364],{"class":264},[220,55333,55277],{"class":420},[220,55335,55336,55338,55340,55342,55344],{"class":222,"line":389},[220,55337,7892],{"class":226},[220,55339,353],{"class":260},[220,55341,743],{"class":264},[220,55343,15237],{"class":420},[220,55345,749],{"class":264},[220,55347,55348],{"class":222,"line":399},[220,55349,30240],{"class":264},[220,55351,55352,55354,55356],{"class":222,"line":644},[220,55353,2550],{"class":264},[220,55355,2553],{"class":420},[220,55357,386],{"class":264},[220,55359,55360,55362,55364],{"class":222,"line":650},[220,55361,2567],{"class":264},[220,55363,55238],{"class":420},[220,55365,359],{"class":264},[220,55367,55368,55370,55372],{"class":222,"line":656},[220,55369,402],{"class":264},[220,55371,347],{"class":420},[220,55373,359],{"class":264},[212,55375,55376],{"className":2844,"code":55317,"language":2846,"meta":178,"style":178},[99,55377,55378,55386,55392,55402,55406,55414,55422],{"__ignoreMap":178},[220,55379,55380,55382,55384],{"class":222,"line":223},[220,55381,343],{"class":264},[220,55383,347],{"class":420},[220,55385,359],{"class":264},[220,55387,55388,55390],{"class":222,"line":179},[220,55389,364],{"class":264},[220,55391,55277],{"class":420},[220,55393,55394,55396,55398,55400],{"class":222,"line":389},[220,55395,7892],{"class":226},[220,55397,28138],{"class":264},[220,55399,15237],{"class":420},[220,55401,749],{"class":264},[220,55403,55404],{"class":222,"line":399},[220,55405,30240],{"class":264},[220,55407,55408,55410,55412],{"class":222,"line":644},[220,55409,2550],{"class":264},[220,55411,2553],{"class":420},[220,55413,386],{"class":264},[220,55415,55416,55418,55420],{"class":222,"line":650},[220,55417,2567],{"class":264},[220,55419,55238],{"class":420},[220,55421,359],{"class":264},[220,55423,55424,55426,55428],{"class":222,"line":656},[220,55425,402],{"class":264},[220,55427,347],{"class":420},[220,55429,359],{"class":264},[212,55431,55432],{"className":468,"code":55317,"language":469,"meta":178,"style":178},[99,55433,55434,55442,55448,55460,55464,55472,55480],{"__ignoreMap":178},[220,55435,55436,55438,55440],{"class":222,"line":223},[220,55437,343],{"class":264},[220,55439,347],{"class":420},[220,55441,359],{"class":264},[220,55443,55444,55446],{"class":222,"line":179},[220,55445,364],{"class":264},[220,55447,55277],{"class":420},[220,55449,55450,55452,55454,55456,55458],{"class":222,"line":389},[220,55451,7892],{"class":226},[220,55453,353],{"class":260},[220,55455,743],{"class":264},[220,55457,15237],{"class":420},[220,55459,749],{"class":264},[220,55461,55462],{"class":222,"line":399},[220,55463,30240],{"class":264},[220,55465,55466,55468,55470],{"class":222,"line":644},[220,55467,2550],{"class":264},[220,55469,2553],{"class":420},[220,55471,386],{"class":264},[220,55473,55474,55476,55478],{"class":222,"line":650},[220,55475,2567],{"class":264},[220,55477,55238],{"class":420},[220,55479,359],{"class":264},[220,55481,55482,55484,55486],{"class":222,"line":656},[220,55483,402],{"class":264},[220,55485,347],{"class":420},[220,55487,359],{"class":264},[212,55489,55491],{"className":251,"code":55490,"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,55492,55493,55503,55507,55521,55525,55538,55546,55550,55554],{"__ignoreMap":178},[220,55494,55495,55497,55499,55501],{"class":222,"line":223},[220,55496,261],{"class":260},[220,55498,9763],{"class":264},[220,55500,268],{"class":260},[220,55502,9768],{"class":230},[220,55504,55505],{"class":222,"line":179},[220,55506,647],{"emptyLinePlaceholder":194},[220,55508,55509,55511,55513,55515,55517,55519],{"class":222,"line":389},[220,55510,1735],{"class":260},[220,55512,1738],{"class":420},[220,55514,1741],{"class":260},[220,55516,1744],{"class":260},[220,55518,1747],{"class":226},[220,55520,1750],{"class":264},[220,55522,55523],{"class":222,"line":399},[220,55524,1765],{"class":264},[220,55526,55527,55529,55532,55534,55536],{"class":222,"line":644},[220,55528,1770],{"class":264},[220,55530,55531],{"class":230},"'PagePeel'",[220,55533,5787],{"class":264},[220,55535,15237],{"class":420},[220,55537,5792],{"class":264},[220,55539,55540,55542,55544],{"class":222,"line":650},[220,55541,5260],{"class":264},[220,55543,3206],{"class":230},[220,55545,2465],{"class":264},[220,55547,55548],{"class":222,"line":656},[220,55549,5277],{"class":264},[220,55551,55552],{"class":222,"line":673},[220,55553,1787],{"class":264},[220,55555,55556],{"class":222,"line":682},[220,55557,1792],{"class":264},[1504,55559,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55561},[55562,55563],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":55238,"description":55246},"docs\u002Fcomponents\u002FPagePeel","UOYevp0VwwoWymyMiaREJeBO9rLYcze87ULd33OAAQs",{"id":55570,"title":55571,"body":55572,"category":31087,"componentType":24147,"description":55579,"extension":191,"meta":55840,"navigation":194,"path":55841,"requiresChild":194,"seo":55842,"stem":55843,"__hash__":55844},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":55573,"toc":55836},[55574,55577,55580,55582,55584,55587,55589,55834],[11,55575,55571],{"id":55576},"paper",[15,55578,55579],{},"Applies realistic paper grain and surface roughness to child content",[30192,55581],{"component":55571},[23,55583,30196],{"id":24798},[30198,55585],{":props":55586},"[{\"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,55588,30204],{"id":30203},[246,55590,55591,55636,55680,55724,55768],{":tabs":1557},[212,55592,55594],{"className":334,"code":55593,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,55595,55596,55604,55612,55620,55628],{"__ignoreMap":178},[220,55597,55598,55600,55602],{"class":222,"line":223},[220,55599,343],{"class":264},[220,55601,347],{"class":346},[220,55603,359],{"class":264},[220,55605,55606,55608,55610],{"class":222,"line":179},[220,55607,364],{"class":264},[220,55609,55571],{"class":346},[220,55611,359],{"class":264},[220,55613,55614,55616,55618],{"class":222,"line":389},[220,55615,2550],{"class":264},[220,55617,2553],{"class":346},[220,55619,386],{"class":264},[220,55621,55622,55624,55626],{"class":222,"line":399},[220,55623,2567],{"class":264},[220,55625,55571],{"class":346},[220,55627,359],{"class":264},[220,55629,55630,55632,55634],{"class":222,"line":644},[220,55631,402],{"class":264},[220,55633,347],{"class":346},[220,55635,359],{"class":264},[212,55637,55638],{"className":409,"code":55593,"language":411,"meta":178,"style":178},[99,55639,55640,55648,55656,55664,55672],{"__ignoreMap":178},[220,55641,55642,55644,55646],{"class":222,"line":223},[220,55643,343],{"class":264},[220,55645,347],{"class":420},[220,55647,359],{"class":264},[220,55649,55650,55652,55654],{"class":222,"line":179},[220,55651,364],{"class":264},[220,55653,55571],{"class":420},[220,55655,359],{"class":264},[220,55657,55658,55660,55662],{"class":222,"line":389},[220,55659,2550],{"class":264},[220,55661,2553],{"class":420},[220,55663,386],{"class":264},[220,55665,55666,55668,55670],{"class":222,"line":399},[220,55667,2567],{"class":264},[220,55669,55571],{"class":420},[220,55671,359],{"class":264},[220,55673,55674,55676,55678],{"class":222,"line":644},[220,55675,402],{"class":264},[220,55677,347],{"class":420},[220,55679,359],{"class":264},[212,55681,55682],{"className":2844,"code":55593,"language":2846,"meta":178,"style":178},[99,55683,55684,55692,55700,55708,55716],{"__ignoreMap":178},[220,55685,55686,55688,55690],{"class":222,"line":223},[220,55687,343],{"class":264},[220,55689,347],{"class":420},[220,55691,359],{"class":264},[220,55693,55694,55696,55698],{"class":222,"line":179},[220,55695,364],{"class":264},[220,55697,55571],{"class":420},[220,55699,359],{"class":264},[220,55701,55702,55704,55706],{"class":222,"line":389},[220,55703,2550],{"class":264},[220,55705,2553],{"class":420},[220,55707,386],{"class":264},[220,55709,55710,55712,55714],{"class":222,"line":399},[220,55711,2567],{"class":264},[220,55713,55571],{"class":420},[220,55715,359],{"class":264},[220,55717,55718,55720,55722],{"class":222,"line":644},[220,55719,402],{"class":264},[220,55721,347],{"class":420},[220,55723,359],{"class":264},[212,55725,55726],{"className":468,"code":55593,"language":469,"meta":178,"style":178},[99,55727,55728,55736,55744,55752,55760],{"__ignoreMap":178},[220,55729,55730,55732,55734],{"class":222,"line":223},[220,55731,343],{"class":264},[220,55733,347],{"class":420},[220,55735,359],{"class":264},[220,55737,55738,55740,55742],{"class":222,"line":179},[220,55739,364],{"class":264},[220,55741,55571],{"class":420},[220,55743,359],{"class":264},[220,55745,55746,55748,55750],{"class":222,"line":389},[220,55747,2550],{"class":264},[220,55749,2553],{"class":420},[220,55751,386],{"class":264},[220,55753,55754,55756,55758],{"class":222,"line":399},[220,55755,2567],{"class":264},[220,55757,55571],{"class":420},[220,55759,359],{"class":264},[220,55761,55762,55764,55766],{"class":222,"line":644},[220,55763,402],{"class":264},[220,55765,347],{"class":420},[220,55767,359],{"class":264},[212,55769,55771],{"className":251,"code":55770,"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,55772,55773,55783,55787,55801,55805,55814,55822,55826,55830],{"__ignoreMap":178},[220,55774,55775,55777,55779,55781],{"class":222,"line":223},[220,55776,261],{"class":260},[220,55778,9763],{"class":264},[220,55780,268],{"class":260},[220,55782,9768],{"class":230},[220,55784,55785],{"class":222,"line":179},[220,55786,647],{"emptyLinePlaceholder":194},[220,55788,55789,55791,55793,55795,55797,55799],{"class":222,"line":389},[220,55790,1735],{"class":260},[220,55792,1738],{"class":420},[220,55794,1741],{"class":260},[220,55796,1744],{"class":260},[220,55798,1747],{"class":226},[220,55800,1750],{"class":264},[220,55802,55803],{"class":222,"line":399},[220,55804,1765],{"class":264},[220,55806,55807,55809,55812],{"class":222,"line":644},[220,55808,1770],{"class":264},[220,55810,55811],{"class":230},"'Paper'",[220,55813,5255],{"class":264},[220,55815,55816,55818,55820],{"class":222,"line":650},[220,55817,5260],{"class":264},[220,55819,3206],{"class":230},[220,55821,2465],{"class":264},[220,55823,55824],{"class":222,"line":656},[220,55825,5277],{"class":264},[220,55827,55828],{"class":222,"line":673},[220,55829,1787],{"class":264},[220,55831,55832],{"class":222,"line":682},[220,55833,1792],{"class":264},[1504,55835,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":55837},[55838,55839],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":55571,"description":55579},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":55846,"title":55847,"body":55848,"category":14164,"componentType":24141,"description":55855,"extension":191,"meta":56085,"navigation":194,"path":56086,"requiresChild":30811,"seo":56087,"stem":56088,"__hash__":56089},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":55849,"toc":56081},[55850,55853,55856,55858,55860,55863,55865,56079],[11,55851,55847],{"id":55852},"parallelogram",[15,55854,55855],{},"Parallelogram with adjustable width, height and skew",[30192,55857],{"component":55847},[23,55859,30196],{"id":24798},[30198,55861],{":props":55862},"[{\"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,55864,30204],{"id":30203},[246,55866,55867,55907,55945,55983,56021],{":tabs":1557},[212,55868,55870],{"className":334,"code":55869,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,55871,55872,55880,55887,55895,55899],{"__ignoreMap":178},[220,55873,55874,55876,55878],{"class":222,"line":223},[220,55875,343],{"class":264},[220,55877,347],{"class":346},[220,55879,359],{"class":264},[220,55881,55882,55884],{"class":222,"line":179},[220,55883,364],{"class":264},[220,55885,55886],{"class":346},"Parallelogram\n",[220,55888,55889,55891,55893],{"class":222,"line":389},[220,55890,7882],{"class":226},[220,55892,353],{"class":264},[220,55894,7838],{"class":230},[220,55896,55897],{"class":222,"line":399},[220,55898,1234],{"class":264},[220,55900,55901,55903,55905],{"class":222,"line":644},[220,55902,402],{"class":264},[220,55904,347],{"class":346},[220,55906,359],{"class":264},[212,55908,55909],{"className":409,"code":55869,"language":411,"meta":178,"style":178},[99,55910,55911,55919,55925,55933,55937],{"__ignoreMap":178},[220,55912,55913,55915,55917],{"class":222,"line":223},[220,55914,343],{"class":264},[220,55916,347],{"class":420},[220,55918,359],{"class":264},[220,55920,55921,55923],{"class":222,"line":179},[220,55922,364],{"class":264},[220,55924,55886],{"class":420},[220,55926,55927,55929,55931],{"class":222,"line":389},[220,55928,7882],{"class":226},[220,55930,353],{"class":260},[220,55932,7838],{"class":230},[220,55934,55935],{"class":222,"line":399},[220,55936,1234],{"class":264},[220,55938,55939,55941,55943],{"class":222,"line":644},[220,55940,402],{"class":264},[220,55942,347],{"class":420},[220,55944,359],{"class":264},[212,55946,55947],{"className":2844,"code":55869,"language":2846,"meta":178,"style":178},[99,55948,55949,55957,55963,55971,55975],{"__ignoreMap":178},[220,55950,55951,55953,55955],{"class":222,"line":223},[220,55952,343],{"class":264},[220,55954,347],{"class":420},[220,55956,359],{"class":264},[220,55958,55959,55961],{"class":222,"line":179},[220,55960,364],{"class":264},[220,55962,55886],{"class":420},[220,55964,55965,55967,55969],{"class":222,"line":389},[220,55966,7882],{"class":226},[220,55968,353],{"class":264},[220,55970,7838],{"class":230},[220,55972,55973],{"class":222,"line":399},[220,55974,1234],{"class":264},[220,55976,55977,55979,55981],{"class":222,"line":644},[220,55978,402],{"class":264},[220,55980,347],{"class":420},[220,55982,359],{"class":264},[212,55984,55985],{"className":468,"code":55869,"language":469,"meta":178,"style":178},[99,55986,55987,55995,56001,56009,56013],{"__ignoreMap":178},[220,55988,55989,55991,55993],{"class":222,"line":223},[220,55990,343],{"class":264},[220,55992,347],{"class":420},[220,55994,359],{"class":264},[220,55996,55997,55999],{"class":222,"line":179},[220,55998,364],{"class":264},[220,56000,55886],{"class":420},[220,56002,56003,56005,56007],{"class":222,"line":389},[220,56004,7882],{"class":226},[220,56006,353],{"class":260},[220,56008,7838],{"class":230},[220,56010,56011],{"class":222,"line":399},[220,56012,1234],{"class":264},[220,56014,56015,56017,56019],{"class":222,"line":644},[220,56016,402],{"class":264},[220,56018,347],{"class":420},[220,56020,359],{"class":264},[212,56022,56024],{"className":251,"code":56023,"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,56025,56026,56036,56040,56054,56058,56071,56075],{"__ignoreMap":178},[220,56027,56028,56030,56032,56034],{"class":222,"line":223},[220,56029,261],{"class":260},[220,56031,9763],{"class":264},[220,56033,268],{"class":260},[220,56035,9768],{"class":230},[220,56037,56038],{"class":222,"line":179},[220,56039,647],{"emptyLinePlaceholder":194},[220,56041,56042,56044,56046,56048,56050,56052],{"class":222,"line":389},[220,56043,1735],{"class":260},[220,56045,1738],{"class":420},[220,56047,1741],{"class":260},[220,56049,1744],{"class":260},[220,56051,1747],{"class":226},[220,56053,1750],{"class":264},[220,56055,56056],{"class":222,"line":399},[220,56057,1765],{"class":264},[220,56059,56060,56062,56065,56067,56069],{"class":222,"line":644},[220,56061,1770],{"class":264},[220,56063,56064],{"class":230},"'Parallelogram'",[220,56066,1776],{"class":264},[220,56068,8417],{"class":230},[220,56070,1782],{"class":264},[220,56072,56073],{"class":222,"line":650},[220,56074,1787],{"class":264},[220,56076,56077],{"class":222,"line":656},[220,56078,1792],{"class":264},[1504,56080,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":56082},[56083,56084],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":55847,"description":55855},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":56091,"title":56092,"body":56093,"category":33488,"componentType":24141,"description":56100,"extension":191,"meta":56285,"navigation":194,"path":56286,"requiresChild":30811,"seo":56287,"stem":56288,"__hash__":56289},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":56094,"toc":56281},[56095,56098,56101,56103,56105,56108,56110,56279],[11,56096,56092],{"id":56097},"particles",[15,56099,56100],{},"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",[30192,56102],{"component":56092},[23,56104,30196],{"id":24798},[30198,56106],{":props":56107},"[{\"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\":\"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,56109,30204],{"id":30203},[246,56111,56112,56141,56169,56197,56225],{":tabs":1557},[212,56113,56115],{"className":334,"code":56114,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,56116,56117,56125,56133],{"__ignoreMap":178},[220,56118,56119,56121,56123],{"class":222,"line":223},[220,56120,343],{"class":264},[220,56122,347],{"class":346},[220,56124,359],{"class":264},[220,56126,56127,56129,56131],{"class":222,"line":179},[220,56128,364],{"class":264},[220,56130,56092],{"class":346},[220,56132,386],{"class":264},[220,56134,56135,56137,56139],{"class":222,"line":389},[220,56136,402],{"class":264},[220,56138,347],{"class":346},[220,56140,359],{"class":264},[212,56142,56143],{"className":409,"code":56114,"language":411,"meta":178,"style":178},[99,56144,56145,56153,56161],{"__ignoreMap":178},[220,56146,56147,56149,56151],{"class":222,"line":223},[220,56148,343],{"class":264},[220,56150,347],{"class":420},[220,56152,359],{"class":264},[220,56154,56155,56157,56159],{"class":222,"line":179},[220,56156,364],{"class":264},[220,56158,56092],{"class":420},[220,56160,386],{"class":264},[220,56162,56163,56165,56167],{"class":222,"line":389},[220,56164,402],{"class":264},[220,56166,347],{"class":420},[220,56168,359],{"class":264},[212,56170,56171],{"className":2844,"code":56114,"language":2846,"meta":178,"style":178},[99,56172,56173,56181,56189],{"__ignoreMap":178},[220,56174,56175,56177,56179],{"class":222,"line":223},[220,56176,343],{"class":264},[220,56178,347],{"class":420},[220,56180,359],{"class":264},[220,56182,56183,56185,56187],{"class":222,"line":179},[220,56184,364],{"class":264},[220,56186,56092],{"class":420},[220,56188,386],{"class":264},[220,56190,56191,56193,56195],{"class":222,"line":389},[220,56192,402],{"class":264},[220,56194,347],{"class":420},[220,56196,359],{"class":264},[212,56198,56199],{"className":468,"code":56114,"language":469,"meta":178,"style":178},[99,56200,56201,56209,56217],{"__ignoreMap":178},[220,56202,56203,56205,56207],{"class":222,"line":223},[220,56204,343],{"class":264},[220,56206,347],{"class":420},[220,56208,359],{"class":264},[220,56210,56211,56213,56215],{"class":222,"line":179},[220,56212,364],{"class":264},[220,56214,56092],{"class":420},[220,56216,386],{"class":264},[220,56218,56219,56221,56223],{"class":222,"line":389},[220,56220,402],{"class":264},[220,56222,347],{"class":420},[220,56224,359],{"class":264},[212,56226,56228],{"className":251,"code":56227,"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,56229,56230,56240,56244,56258,56262,56271,56275],{"__ignoreMap":178},[220,56231,56232,56234,56236,56238],{"class":222,"line":223},[220,56233,261],{"class":260},[220,56235,9763],{"class":264},[220,56237,268],{"class":260},[220,56239,9768],{"class":230},[220,56241,56242],{"class":222,"line":179},[220,56243,647],{"emptyLinePlaceholder":194},[220,56245,56246,56248,56250,56252,56254,56256],{"class":222,"line":389},[220,56247,1735],{"class":260},[220,56249,1738],{"class":420},[220,56251,1741],{"class":260},[220,56253,1744],{"class":260},[220,56255,1747],{"class":226},[220,56257,1750],{"class":264},[220,56259,56260],{"class":222,"line":399},[220,56261,1765],{"class":264},[220,56263,56264,56266,56269],{"class":222,"line":644},[220,56265,1770],{"class":264},[220,56267,56268],{"class":230},"'Particles'",[220,56270,2465],{"class":264},[220,56272,56273],{"class":222,"line":650},[220,56274,1787],{"class":264},[220,56276,56277],{"class":222,"line":656},[220,56278,1792],{"class":264},[1504,56280,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":56282},[56283,56284],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":56092,"description":56100},"docs\u002Fcomponents\u002FParticles","kHQD59tPZmPZ7bum2kztS4fhnL-gTfmizDRhPlvTWpM",{"id":56291,"title":56292,"body":56293,"category":31344,"componentType":24141,"description":56300,"extension":191,"meta":56484,"navigation":194,"path":56485,"requiresChild":30811,"seo":56486,"stem":56487,"__hash__":56488},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":56294,"toc":56480},[56295,56298,56301,56303,56305,56307,56309,56478],[11,56296,56292],{"id":56297},"perlinnoise",[15,56299,56300],{},"Smooth gradient noise that morphs over time",[30192,56302],{"component":56292},[23,56304,30196],{"id":24798},[30198,56306],{":props":32100},[23,56308,30204],{"id":30203},[246,56310,56311,56340,56368,56396,56424],{":tabs":1557},[212,56312,56314],{"className":334,"code":56313,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,56315,56316,56324,56332],{"__ignoreMap":178},[220,56317,56318,56320,56322],{"class":222,"line":223},[220,56319,343],{"class":264},[220,56321,347],{"class":346},[220,56323,359],{"class":264},[220,56325,56326,56328,56330],{"class":222,"line":179},[220,56327,364],{"class":264},[220,56329,56292],{"class":346},[220,56331,386],{"class":264},[220,56333,56334,56336,56338],{"class":222,"line":389},[220,56335,402],{"class":264},[220,56337,347],{"class":346},[220,56339,359],{"class":264},[212,56341,56342],{"className":409,"code":56313,"language":411,"meta":178,"style":178},[99,56343,56344,56352,56360],{"__ignoreMap":178},[220,56345,56346,56348,56350],{"class":222,"line":223},[220,56347,343],{"class":264},[220,56349,347],{"class":420},[220,56351,359],{"class":264},[220,56353,56354,56356,56358],{"class":222,"line":179},[220,56355,364],{"class":264},[220,56357,56292],{"class":420},[220,56359,386],{"class":264},[220,56361,56362,56364,56366],{"class":222,"line":389},[220,56363,402],{"class":264},[220,56365,347],{"class":420},[220,56367,359],{"class":264},[212,56369,56370],{"className":2844,"code":56313,"language":2846,"meta":178,"style":178},[99,56371,56372,56380,56388],{"__ignoreMap":178},[220,56373,56374,56376,56378],{"class":222,"line":223},[220,56375,343],{"class":264},[220,56377,347],{"class":420},[220,56379,359],{"class":264},[220,56381,56382,56384,56386],{"class":222,"line":179},[220,56383,364],{"class":264},[220,56385,56292],{"class":420},[220,56387,386],{"class":264},[220,56389,56390,56392,56394],{"class":222,"line":389},[220,56391,402],{"class":264},[220,56393,347],{"class":420},[220,56395,359],{"class":264},[212,56397,56398],{"className":468,"code":56313,"language":469,"meta":178,"style":178},[99,56399,56400,56408,56416],{"__ignoreMap":178},[220,56401,56402,56404,56406],{"class":222,"line":223},[220,56403,343],{"class":264},[220,56405,347],{"class":420},[220,56407,359],{"class":264},[220,56409,56410,56412,56414],{"class":222,"line":179},[220,56411,364],{"class":264},[220,56413,56292],{"class":420},[220,56415,386],{"class":264},[220,56417,56418,56420,56422],{"class":222,"line":389},[220,56419,402],{"class":264},[220,56421,347],{"class":420},[220,56423,359],{"class":264},[212,56425,56427],{"className":251,"code":56426,"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,56428,56429,56439,56443,56457,56461,56470,56474],{"__ignoreMap":178},[220,56430,56431,56433,56435,56437],{"class":222,"line":223},[220,56432,261],{"class":260},[220,56434,9763],{"class":264},[220,56436,268],{"class":260},[220,56438,9768],{"class":230},[220,56440,56441],{"class":222,"line":179},[220,56442,647],{"emptyLinePlaceholder":194},[220,56444,56445,56447,56449,56451,56453,56455],{"class":222,"line":389},[220,56446,1735],{"class":260},[220,56448,1738],{"class":420},[220,56450,1741],{"class":260},[220,56452,1744],{"class":260},[220,56454,1747],{"class":226},[220,56456,1750],{"class":264},[220,56458,56459],{"class":222,"line":399},[220,56460,1765],{"class":264},[220,56462,56463,56465,56468],{"class":222,"line":644},[220,56464,1770],{"class":264},[220,56466,56467],{"class":230},"'PerlinNoise'",[220,56469,2465],{"class":264},[220,56471,56472],{"class":222,"line":650},[220,56473,1787],{"class":264},[220,56475,56476],{"class":222,"line":656},[220,56477,1792],{"class":264},[1504,56479,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":56481},[56482,56483],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":56292,"description":56300},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":56490,"title":56491,"body":56492,"category":31677,"componentType":24147,"description":56499,"extension":191,"meta":56760,"navigation":194,"path":56761,"requiresChild":194,"seo":56762,"stem":56763,"__hash__":56764},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":56493,"toc":56756},[56494,56497,56500,56502,56504,56507,56509,56754],[11,56495,56491],{"id":56496},"perspective",[15,56498,56499],{},"Rotate the plane in 3D space with pan and tilt",[30192,56501],{"component":56491},[23,56503,30196],{"id":24798},[30198,56505],{":props":56506},"[{\"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,56508,30204],{"id":30203},[246,56510,56511,56556,56600,56644,56688],{":tabs":1557},[212,56512,56514],{"className":334,"code":56513,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,56515,56516,56524,56532,56540,56548],{"__ignoreMap":178},[220,56517,56518,56520,56522],{"class":222,"line":223},[220,56519,343],{"class":264},[220,56521,347],{"class":346},[220,56523,359],{"class":264},[220,56525,56526,56528,56530],{"class":222,"line":179},[220,56527,364],{"class":264},[220,56529,56491],{"class":346},[220,56531,359],{"class":264},[220,56533,56534,56536,56538],{"class":222,"line":389},[220,56535,2550],{"class":264},[220,56537,2553],{"class":346},[220,56539,386],{"class":264},[220,56541,56542,56544,56546],{"class":222,"line":399},[220,56543,2567],{"class":264},[220,56545,56491],{"class":346},[220,56547,359],{"class":264},[220,56549,56550,56552,56554],{"class":222,"line":644},[220,56551,402],{"class":264},[220,56553,347],{"class":346},[220,56555,359],{"class":264},[212,56557,56558],{"className":409,"code":56513,"language":411,"meta":178,"style":178},[99,56559,56560,56568,56576,56584,56592],{"__ignoreMap":178},[220,56561,56562,56564,56566],{"class":222,"line":223},[220,56563,343],{"class":264},[220,56565,347],{"class":420},[220,56567,359],{"class":264},[220,56569,56570,56572,56574],{"class":222,"line":179},[220,56571,364],{"class":264},[220,56573,56491],{"class":420},[220,56575,359],{"class":264},[220,56577,56578,56580,56582],{"class":222,"line":389},[220,56579,2550],{"class":264},[220,56581,2553],{"class":420},[220,56583,386],{"class":264},[220,56585,56586,56588,56590],{"class":222,"line":399},[220,56587,2567],{"class":264},[220,56589,56491],{"class":420},[220,56591,359],{"class":264},[220,56593,56594,56596,56598],{"class":222,"line":644},[220,56595,402],{"class":264},[220,56597,347],{"class":420},[220,56599,359],{"class":264},[212,56601,56602],{"className":2844,"code":56513,"language":2846,"meta":178,"style":178},[99,56603,56604,56612,56620,56628,56636],{"__ignoreMap":178},[220,56605,56606,56608,56610],{"class":222,"line":223},[220,56607,343],{"class":264},[220,56609,347],{"class":420},[220,56611,359],{"class":264},[220,56613,56614,56616,56618],{"class":222,"line":179},[220,56615,364],{"class":264},[220,56617,56491],{"class":420},[220,56619,359],{"class":264},[220,56621,56622,56624,56626],{"class":222,"line":389},[220,56623,2550],{"class":264},[220,56625,2553],{"class":420},[220,56627,386],{"class":264},[220,56629,56630,56632,56634],{"class":222,"line":399},[220,56631,2567],{"class":264},[220,56633,56491],{"class":420},[220,56635,359],{"class":264},[220,56637,56638,56640,56642],{"class":222,"line":644},[220,56639,402],{"class":264},[220,56641,347],{"class":420},[220,56643,359],{"class":264},[212,56645,56646],{"className":468,"code":56513,"language":469,"meta":178,"style":178},[99,56647,56648,56656,56664,56672,56680],{"__ignoreMap":178},[220,56649,56650,56652,56654],{"class":222,"line":223},[220,56651,343],{"class":264},[220,56653,347],{"class":420},[220,56655,359],{"class":264},[220,56657,56658,56660,56662],{"class":222,"line":179},[220,56659,364],{"class":264},[220,56661,56491],{"class":420},[220,56663,359],{"class":264},[220,56665,56666,56668,56670],{"class":222,"line":389},[220,56667,2550],{"class":264},[220,56669,2553],{"class":420},[220,56671,386],{"class":264},[220,56673,56674,56676,56678],{"class":222,"line":399},[220,56675,2567],{"class":264},[220,56677,56491],{"class":420},[220,56679,359],{"class":264},[220,56681,56682,56684,56686],{"class":222,"line":644},[220,56683,402],{"class":264},[220,56685,347],{"class":420},[220,56687,359],{"class":264},[212,56689,56691],{"className":251,"code":56690,"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,56692,56693,56703,56707,56721,56725,56734,56742,56746,56750],{"__ignoreMap":178},[220,56694,56695,56697,56699,56701],{"class":222,"line":223},[220,56696,261],{"class":260},[220,56698,9763],{"class":264},[220,56700,268],{"class":260},[220,56702,9768],{"class":230},[220,56704,56705],{"class":222,"line":179},[220,56706,647],{"emptyLinePlaceholder":194},[220,56708,56709,56711,56713,56715,56717,56719],{"class":222,"line":389},[220,56710,1735],{"class":260},[220,56712,1738],{"class":420},[220,56714,1741],{"class":260},[220,56716,1744],{"class":260},[220,56718,1747],{"class":226},[220,56720,1750],{"class":264},[220,56722,56723],{"class":222,"line":399},[220,56724,1765],{"class":264},[220,56726,56727,56729,56732],{"class":222,"line":644},[220,56728,1770],{"class":264},[220,56730,56731],{"class":230},"'Perspective'",[220,56733,5255],{"class":264},[220,56735,56736,56738,56740],{"class":222,"line":650},[220,56737,5260],{"class":264},[220,56739,3206],{"class":230},[220,56741,2465],{"class":264},[220,56743,56744],{"class":222,"line":656},[220,56745,5277],{"class":264},[220,56747,56748],{"class":222,"line":673},[220,56749,1787],{"class":264},[220,56751,56752],{"class":222,"line":682},[220,56753,1792],{"class":264},[1504,56755,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":56757},[56758,56759],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":56491,"description":56499},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":56766,"title":56767,"body":56768,"category":35553,"componentType":24147,"description":56775,"extension":191,"meta":57092,"navigation":194,"path":57093,"requiresChild":194,"seo":57094,"stem":57095,"__hash__":57096},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":56769,"toc":57088},[56770,56773,56776,56778,56780,56783,56785,57086],[11,56771,56767],{"id":56772},"pixelsort",[15,56774,56775],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[30192,56777],{"component":56767},[23,56779,30196],{"id":24798},[30198,56781],{":props":56782},"[{\"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,56784,30204],{"id":30203},[246,56786,56787,56843,56902,56958,57016],{":tabs":1557},[212,56788,56790],{"className":334,"code":56789,"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,56791,56792,56800,56807,56815,56819,56827,56835],{"__ignoreMap":178},[220,56793,56794,56796,56798],{"class":222,"line":223},[220,56795,343],{"class":264},[220,56797,347],{"class":346},[220,56799,359],{"class":264},[220,56801,56802,56804],{"class":222,"line":179},[220,56803,364],{"class":264},[220,56805,56806],{"class":346},"PixelSort\n",[220,56808,56809,56811,56813],{"class":222,"line":389},[220,56810,15666],{"class":226},[220,56812,353],{"class":264},[220,56814,44164],{"class":230},[220,56816,56817],{"class":222,"line":399},[220,56818,30240],{"class":264},[220,56820,56821,56823,56825],{"class":222,"line":644},[220,56822,2550],{"class":264},[220,56824,2553],{"class":346},[220,56826,386],{"class":264},[220,56828,56829,56831,56833],{"class":222,"line":650},[220,56830,2567],{"class":264},[220,56832,56767],{"class":346},[220,56834,359],{"class":264},[220,56836,56837,56839,56841],{"class":222,"line":656},[220,56838,402],{"class":264},[220,56840,347],{"class":346},[220,56842,359],{"class":264},[212,56844,56846],{"className":409,"code":56845,"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,56847,56848,56856,56862,56874,56878,56886,56894],{"__ignoreMap":178},[220,56849,56850,56852,56854],{"class":222,"line":223},[220,56851,343],{"class":264},[220,56853,347],{"class":420},[220,56855,359],{"class":264},[220,56857,56858,56860],{"class":222,"line":179},[220,56859,364],{"class":264},[220,56861,56806],{"class":420},[220,56863,56864,56866,56868,56870,56872],{"class":222,"line":389},[220,56865,7892],{"class":226},[220,56867,353],{"class":260},[220,56869,743],{"class":264},[220,56871,6495],{"class":420},[220,56873,749],{"class":264},[220,56875,56876],{"class":222,"line":399},[220,56877,30240],{"class":264},[220,56879,56880,56882,56884],{"class":222,"line":644},[220,56881,2550],{"class":264},[220,56883,2553],{"class":420},[220,56885,386],{"class":264},[220,56887,56888,56890,56892],{"class":222,"line":650},[220,56889,2567],{"class":264},[220,56891,56767],{"class":420},[220,56893,359],{"class":264},[220,56895,56896,56898,56900],{"class":222,"line":656},[220,56897,402],{"class":264},[220,56899,347],{"class":420},[220,56901,359],{"class":264},[212,56903,56904],{"className":2844,"code":56845,"language":2846,"meta":178,"style":178},[99,56905,56906,56914,56920,56930,56934,56942,56950],{"__ignoreMap":178},[220,56907,56908,56910,56912],{"class":222,"line":223},[220,56909,343],{"class":264},[220,56911,347],{"class":420},[220,56913,359],{"class":264},[220,56915,56916,56918],{"class":222,"line":179},[220,56917,364],{"class":264},[220,56919,56806],{"class":420},[220,56921,56922,56924,56926,56928],{"class":222,"line":389},[220,56923,7892],{"class":226},[220,56925,28138],{"class":264},[220,56927,6495],{"class":420},[220,56929,749],{"class":264},[220,56931,56932],{"class":222,"line":399},[220,56933,30240],{"class":264},[220,56935,56936,56938,56940],{"class":222,"line":644},[220,56937,2550],{"class":264},[220,56939,2553],{"class":420},[220,56941,386],{"class":264},[220,56943,56944,56946,56948],{"class":222,"line":650},[220,56945,2567],{"class":264},[220,56947,56767],{"class":420},[220,56949,359],{"class":264},[220,56951,56952,56954,56956],{"class":222,"line":656},[220,56953,402],{"class":264},[220,56955,347],{"class":420},[220,56957,359],{"class":264},[212,56959,56960],{"className":468,"code":56845,"language":469,"meta":178,"style":178},[99,56961,56962,56970,56976,56988,56992,57000,57008],{"__ignoreMap":178},[220,56963,56964,56966,56968],{"class":222,"line":223},[220,56965,343],{"class":264},[220,56967,347],{"class":420},[220,56969,359],{"class":264},[220,56971,56972,56974],{"class":222,"line":179},[220,56973,364],{"class":264},[220,56975,56806],{"class":420},[220,56977,56978,56980,56982,56984,56986],{"class":222,"line":389},[220,56979,7892],{"class":226},[220,56981,353],{"class":260},[220,56983,743],{"class":264},[220,56985,6495],{"class":420},[220,56987,749],{"class":264},[220,56989,56990],{"class":222,"line":399},[220,56991,30240],{"class":264},[220,56993,56994,56996,56998],{"class":222,"line":644},[220,56995,2550],{"class":264},[220,56997,2553],{"class":420},[220,56999,386],{"class":264},[220,57001,57002,57004,57006],{"class":222,"line":650},[220,57003,2567],{"class":264},[220,57005,56767],{"class":420},[220,57007,359],{"class":264},[220,57009,57010,57012,57014],{"class":222,"line":656},[220,57011,402],{"class":264},[220,57013,347],{"class":420},[220,57015,359],{"class":264},[212,57017,57019],{"className":251,"code":57018,"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,57020,57021,57031,57035,57049,57053,57066,57074,57078,57082],{"__ignoreMap":178},[220,57022,57023,57025,57027,57029],{"class":222,"line":223},[220,57024,261],{"class":260},[220,57026,9763],{"class":264},[220,57028,268],{"class":260},[220,57030,9768],{"class":230},[220,57032,57033],{"class":222,"line":179},[220,57034,647],{"emptyLinePlaceholder":194},[220,57036,57037,57039,57041,57043,57045,57047],{"class":222,"line":389},[220,57038,1735],{"class":260},[220,57040,1738],{"class":420},[220,57042,1741],{"class":260},[220,57044,1744],{"class":260},[220,57046,1747],{"class":226},[220,57048,1750],{"class":264},[220,57050,57051],{"class":222,"line":399},[220,57052,1765],{"class":264},[220,57054,57055,57057,57060,57062,57064],{"class":222,"line":644},[220,57056,1770],{"class":264},[220,57058,57059],{"class":230},"'PixelSort'",[220,57061,5787],{"class":264},[220,57063,6495],{"class":420},[220,57065,5792],{"class":264},[220,57067,57068,57070,57072],{"class":222,"line":650},[220,57069,5260],{"class":264},[220,57071,3206],{"class":230},[220,57073,2465],{"class":264},[220,57075,57076],{"class":222,"line":656},[220,57077,5277],{"class":264},[220,57079,57080],{"class":222,"line":673},[220,57081,1787],{"class":264},[220,57083,57084],{"class":222,"line":682},[220,57085,1792],{"class":264},[1504,57087,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57089},[57090,57091],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":56767,"description":56775},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":57098,"title":57099,"body":57100,"category":35553,"componentType":24147,"description":57107,"extension":191,"meta":57424,"navigation":194,"path":57425,"requiresChild":194,"seo":57426,"stem":57427,"__hash__":57428},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":57101,"toc":57420},[57102,57105,57108,57110,57112,57115,57117,57418],[11,57103,57099],{"id":57104},"pixelthrow",[15,57106,57107],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[30192,57109],{"component":57099},[23,57111,30196],{"id":24798},[30198,57113],{":props":57114},"[{\"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,57116,30204],{"id":30203},[246,57118,57119,57175,57234,57290,57348],{":tabs":1557},[212,57120,57122],{"className":334,"code":57121,"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,57123,57124,57132,57139,57147,57151,57159,57167],{"__ignoreMap":178},[220,57125,57126,57128,57130],{"class":222,"line":223},[220,57127,343],{"class":264},[220,57129,347],{"class":346},[220,57131,359],{"class":264},[220,57133,57134,57136],{"class":222,"line":179},[220,57135,364],{"class":264},[220,57137,57138],{"class":346},"PixelThrow\n",[220,57140,57141,57143,57145],{"class":222,"line":389},[220,57142,15666],{"class":226},[220,57144,353],{"class":264},[220,57146,55286],{"class":230},[220,57148,57149],{"class":222,"line":399},[220,57150,30240],{"class":264},[220,57152,57153,57155,57157],{"class":222,"line":644},[220,57154,2550],{"class":264},[220,57156,2553],{"class":346},[220,57158,386],{"class":264},[220,57160,57161,57163,57165],{"class":222,"line":650},[220,57162,2567],{"class":264},[220,57164,57099],{"class":346},[220,57166,359],{"class":264},[220,57168,57169,57171,57173],{"class":222,"line":656},[220,57170,402],{"class":264},[220,57172,347],{"class":346},[220,57174,359],{"class":264},[212,57176,57178],{"className":409,"code":57177,"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,57179,57180,57188,57194,57206,57210,57218,57226],{"__ignoreMap":178},[220,57181,57182,57184,57186],{"class":222,"line":223},[220,57183,343],{"class":264},[220,57185,347],{"class":420},[220,57187,359],{"class":264},[220,57189,57190,57192],{"class":222,"line":179},[220,57191,364],{"class":264},[220,57193,57138],{"class":420},[220,57195,57196,57198,57200,57202,57204],{"class":222,"line":389},[220,57197,7892],{"class":226},[220,57199,353],{"class":260},[220,57201,743],{"class":264},[220,57203,15237],{"class":420},[220,57205,749],{"class":264},[220,57207,57208],{"class":222,"line":399},[220,57209,30240],{"class":264},[220,57211,57212,57214,57216],{"class":222,"line":644},[220,57213,2550],{"class":264},[220,57215,2553],{"class":420},[220,57217,386],{"class":264},[220,57219,57220,57222,57224],{"class":222,"line":650},[220,57221,2567],{"class":264},[220,57223,57099],{"class":420},[220,57225,359],{"class":264},[220,57227,57228,57230,57232],{"class":222,"line":656},[220,57229,402],{"class":264},[220,57231,347],{"class":420},[220,57233,359],{"class":264},[212,57235,57236],{"className":2844,"code":57177,"language":2846,"meta":178,"style":178},[99,57237,57238,57246,57252,57262,57266,57274,57282],{"__ignoreMap":178},[220,57239,57240,57242,57244],{"class":222,"line":223},[220,57241,343],{"class":264},[220,57243,347],{"class":420},[220,57245,359],{"class":264},[220,57247,57248,57250],{"class":222,"line":179},[220,57249,364],{"class":264},[220,57251,57138],{"class":420},[220,57253,57254,57256,57258,57260],{"class":222,"line":389},[220,57255,7892],{"class":226},[220,57257,28138],{"class":264},[220,57259,15237],{"class":420},[220,57261,749],{"class":264},[220,57263,57264],{"class":222,"line":399},[220,57265,30240],{"class":264},[220,57267,57268,57270,57272],{"class":222,"line":644},[220,57269,2550],{"class":264},[220,57271,2553],{"class":420},[220,57273,386],{"class":264},[220,57275,57276,57278,57280],{"class":222,"line":650},[220,57277,2567],{"class":264},[220,57279,57099],{"class":420},[220,57281,359],{"class":264},[220,57283,57284,57286,57288],{"class":222,"line":656},[220,57285,402],{"class":264},[220,57287,347],{"class":420},[220,57289,359],{"class":264},[212,57291,57292],{"className":468,"code":57177,"language":469,"meta":178,"style":178},[99,57293,57294,57302,57308,57320,57324,57332,57340],{"__ignoreMap":178},[220,57295,57296,57298,57300],{"class":222,"line":223},[220,57297,343],{"class":264},[220,57299,347],{"class":420},[220,57301,359],{"class":264},[220,57303,57304,57306],{"class":222,"line":179},[220,57305,364],{"class":264},[220,57307,57138],{"class":420},[220,57309,57310,57312,57314,57316,57318],{"class":222,"line":389},[220,57311,7892],{"class":226},[220,57313,353],{"class":260},[220,57315,743],{"class":264},[220,57317,15237],{"class":420},[220,57319,749],{"class":264},[220,57321,57322],{"class":222,"line":399},[220,57323,30240],{"class":264},[220,57325,57326,57328,57330],{"class":222,"line":644},[220,57327,2550],{"class":264},[220,57329,2553],{"class":420},[220,57331,386],{"class":264},[220,57333,57334,57336,57338],{"class":222,"line":650},[220,57335,2567],{"class":264},[220,57337,57099],{"class":420},[220,57339,359],{"class":264},[220,57341,57342,57344,57346],{"class":222,"line":656},[220,57343,402],{"class":264},[220,57345,347],{"class":420},[220,57347,359],{"class":264},[212,57349,57351],{"className":251,"code":57350,"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,57352,57353,57363,57367,57381,57385,57398,57406,57410,57414],{"__ignoreMap":178},[220,57354,57355,57357,57359,57361],{"class":222,"line":223},[220,57356,261],{"class":260},[220,57358,9763],{"class":264},[220,57360,268],{"class":260},[220,57362,9768],{"class":230},[220,57364,57365],{"class":222,"line":179},[220,57366,647],{"emptyLinePlaceholder":194},[220,57368,57369,57371,57373,57375,57377,57379],{"class":222,"line":389},[220,57370,1735],{"class":260},[220,57372,1738],{"class":420},[220,57374,1741],{"class":260},[220,57376,1744],{"class":260},[220,57378,1747],{"class":226},[220,57380,1750],{"class":264},[220,57382,57383],{"class":222,"line":399},[220,57384,1765],{"class":264},[220,57386,57387,57389,57392,57394,57396],{"class":222,"line":644},[220,57388,1770],{"class":264},[220,57390,57391],{"class":230},"'PixelThrow'",[220,57393,5787],{"class":264},[220,57395,15237],{"class":420},[220,57397,5792],{"class":264},[220,57399,57400,57402,57404],{"class":222,"line":650},[220,57401,5260],{"class":264},[220,57403,3206],{"class":230},[220,57405,2465],{"class":264},[220,57407,57408],{"class":222,"line":656},[220,57409,5277],{"class":264},[220,57411,57412],{"class":222,"line":673},[220,57413,1787],{"class":264},[220,57415,57416],{"class":222,"line":682},[220,57417,1792],{"class":264},[1504,57419,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57421},[57422,57423],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":57099,"description":57107},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":57430,"title":57431,"body":57432,"category":31087,"componentType":24147,"description":57439,"extension":191,"meta":57700,"navigation":194,"path":57701,"requiresChild":194,"seo":57702,"stem":57703,"__hash__":57704},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":57433,"toc":57696},[57434,57437,57440,57442,57444,57447,57449,57694],[11,57435,57431],{"id":57436},"pixelate",[15,57438,57439],{},"Pixelation effect with adjustable cell size",[30192,57441],{"component":57431},[23,57443,30196],{"id":24798},[30198,57445],{":props":57446},"[{\"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,57448,30204],{"id":30203},[246,57450,57451,57496,57540,57584,57628],{":tabs":1557},[212,57452,57454],{"className":334,"code":57453,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,57455,57456,57464,57472,57480,57488],{"__ignoreMap":178},[220,57457,57458,57460,57462],{"class":222,"line":223},[220,57459,343],{"class":264},[220,57461,347],{"class":346},[220,57463,359],{"class":264},[220,57465,57466,57468,57470],{"class":222,"line":179},[220,57467,364],{"class":264},[220,57469,57431],{"class":346},[220,57471,359],{"class":264},[220,57473,57474,57476,57478],{"class":222,"line":389},[220,57475,2550],{"class":264},[220,57477,2553],{"class":346},[220,57479,386],{"class":264},[220,57481,57482,57484,57486],{"class":222,"line":399},[220,57483,2567],{"class":264},[220,57485,57431],{"class":346},[220,57487,359],{"class":264},[220,57489,57490,57492,57494],{"class":222,"line":644},[220,57491,402],{"class":264},[220,57493,347],{"class":346},[220,57495,359],{"class":264},[212,57497,57498],{"className":409,"code":57453,"language":411,"meta":178,"style":178},[99,57499,57500,57508,57516,57524,57532],{"__ignoreMap":178},[220,57501,57502,57504,57506],{"class":222,"line":223},[220,57503,343],{"class":264},[220,57505,347],{"class":420},[220,57507,359],{"class":264},[220,57509,57510,57512,57514],{"class":222,"line":179},[220,57511,364],{"class":264},[220,57513,57431],{"class":420},[220,57515,359],{"class":264},[220,57517,57518,57520,57522],{"class":222,"line":389},[220,57519,2550],{"class":264},[220,57521,2553],{"class":420},[220,57523,386],{"class":264},[220,57525,57526,57528,57530],{"class":222,"line":399},[220,57527,2567],{"class":264},[220,57529,57431],{"class":420},[220,57531,359],{"class":264},[220,57533,57534,57536,57538],{"class":222,"line":644},[220,57535,402],{"class":264},[220,57537,347],{"class":420},[220,57539,359],{"class":264},[212,57541,57542],{"className":2844,"code":57453,"language":2846,"meta":178,"style":178},[99,57543,57544,57552,57560,57568,57576],{"__ignoreMap":178},[220,57545,57546,57548,57550],{"class":222,"line":223},[220,57547,343],{"class":264},[220,57549,347],{"class":420},[220,57551,359],{"class":264},[220,57553,57554,57556,57558],{"class":222,"line":179},[220,57555,364],{"class":264},[220,57557,57431],{"class":420},[220,57559,359],{"class":264},[220,57561,57562,57564,57566],{"class":222,"line":389},[220,57563,2550],{"class":264},[220,57565,2553],{"class":420},[220,57567,386],{"class":264},[220,57569,57570,57572,57574],{"class":222,"line":399},[220,57571,2567],{"class":264},[220,57573,57431],{"class":420},[220,57575,359],{"class":264},[220,57577,57578,57580,57582],{"class":222,"line":644},[220,57579,402],{"class":264},[220,57581,347],{"class":420},[220,57583,359],{"class":264},[212,57585,57586],{"className":468,"code":57453,"language":469,"meta":178,"style":178},[99,57587,57588,57596,57604,57612,57620],{"__ignoreMap":178},[220,57589,57590,57592,57594],{"class":222,"line":223},[220,57591,343],{"class":264},[220,57593,347],{"class":420},[220,57595,359],{"class":264},[220,57597,57598,57600,57602],{"class":222,"line":179},[220,57599,364],{"class":264},[220,57601,57431],{"class":420},[220,57603,359],{"class":264},[220,57605,57606,57608,57610],{"class":222,"line":389},[220,57607,2550],{"class":264},[220,57609,2553],{"class":420},[220,57611,386],{"class":264},[220,57613,57614,57616,57618],{"class":222,"line":399},[220,57615,2567],{"class":264},[220,57617,57431],{"class":420},[220,57619,359],{"class":264},[220,57621,57622,57624,57626],{"class":222,"line":644},[220,57623,402],{"class":264},[220,57625,347],{"class":420},[220,57627,359],{"class":264},[212,57629,57631],{"className":251,"code":57630,"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,57632,57633,57643,57647,57661,57665,57674,57682,57686,57690],{"__ignoreMap":178},[220,57634,57635,57637,57639,57641],{"class":222,"line":223},[220,57636,261],{"class":260},[220,57638,9763],{"class":264},[220,57640,268],{"class":260},[220,57642,9768],{"class":230},[220,57644,57645],{"class":222,"line":179},[220,57646,647],{"emptyLinePlaceholder":194},[220,57648,57649,57651,57653,57655,57657,57659],{"class":222,"line":389},[220,57650,1735],{"class":260},[220,57652,1738],{"class":420},[220,57654,1741],{"class":260},[220,57656,1744],{"class":260},[220,57658,1747],{"class":226},[220,57660,1750],{"class":264},[220,57662,57663],{"class":222,"line":399},[220,57664,1765],{"class":264},[220,57666,57667,57669,57672],{"class":222,"line":644},[220,57668,1770],{"class":264},[220,57670,57671],{"class":230},"'Pixelate'",[220,57673,5255],{"class":264},[220,57675,57676,57678,57680],{"class":222,"line":650},[220,57677,5260],{"class":264},[220,57679,3206],{"class":230},[220,57681,2465],{"class":264},[220,57683,57684],{"class":222,"line":656},[220,57685,5277],{"class":264},[220,57687,57688],{"class":222,"line":673},[220,57689,1787],{"class":264},[220,57691,57692],{"class":222,"line":682},[220,57693,1792],{"class":264},[1504,57695,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":57697},[57698,57699],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":57431,"description":57439},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":57706,"title":11324,"body":57707,"category":31344,"componentType":24141,"description":57714,"extension":191,"meta":57955,"navigation":194,"path":57956,"requiresChild":30811,"seo":57957,"stem":57958,"__hash__":57959},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":57708,"toc":57951},[57709,57712,57715,57717,57719,57722,57724,57949],[11,57710,11324],{"id":57711},"plasma",[15,57713,57714],{},"Animated effect of glowing plasma",[30192,57716],{"component":11324},[23,57718,30196],{"id":24798},[30198,57720],{":props":57721},"[{\"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,57723,30204],{"id":30203},[246,57725,57726,57766,57809,57849,57891],{":tabs":1557},[212,57727,57729],{"className":334,"code":57728,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,57730,57731,57739,57746,57754,57758],{"__ignoreMap":178},[220,57732,57733,57735,57737],{"class":222,"line":223},[220,57734,343],{"class":264},[220,57736,347],{"class":346},[220,57738,359],{"class":264},[220,57740,57741,57743],{"class":222,"line":179},[220,57742,364],{"class":264},[220,57744,57745],{"class":346},"Plasma\n",[220,57747,57748,57750,57752],{"class":222,"line":389},[220,57749,18633],{"class":226},[220,57751,353],{"class":264},[220,57753,54724],{"class":230},[220,57755,57756],{"class":222,"line":399},[220,57757,1234],{"class":264},[220,57759,57760,57762,57764],{"class":222,"line":644},[220,57761,402],{"class":264},[220,57763,347],{"class":346},[220,57765,359],{"class":264},[212,57767,57769],{"className":409,"code":57768,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,57770,57771,57779,57785,57797,57801],{"__ignoreMap":178},[220,57772,57773,57775,57777],{"class":222,"line":223},[220,57774,343],{"class":264},[220,57776,347],{"class":420},[220,57778,359],{"class":264},[220,57780,57781,57783],{"class":222,"line":179},[220,57782,364],{"class":264},[220,57784,57745],{"class":420},[220,57786,57787,57789,57791,57793,57795],{"class":222,"line":389},[220,57788,18744],{"class":226},[220,57790,353],{"class":260},[220,57792,743],{"class":264},[220,57794,54774],{"class":420},[220,57796,749],{"class":264},[220,57798,57799],{"class":222,"line":399},[220,57800,1234],{"class":264},[220,57802,57803,57805,57807],{"class":222,"line":644},[220,57804,402],{"class":264},[220,57806,347],{"class":420},[220,57808,359],{"class":264},[212,57810,57811],{"className":2844,"code":57768,"language":2846,"meta":178,"style":178},[99,57812,57813,57821,57827,57837,57841],{"__ignoreMap":178},[220,57814,57815,57817,57819],{"class":222,"line":223},[220,57816,343],{"class":264},[220,57818,347],{"class":420},[220,57820,359],{"class":264},[220,57822,57823,57825],{"class":222,"line":179},[220,57824,364],{"class":264},[220,57826,57745],{"class":420},[220,57828,57829,57831,57833,57835],{"class":222,"line":389},[220,57830,18744],{"class":226},[220,57832,28138],{"class":264},[220,57834,54774],{"class":420},[220,57836,749],{"class":264},[220,57838,57839],{"class":222,"line":399},[220,57840,1234],{"class":264},[220,57842,57843,57845,57847],{"class":222,"line":644},[220,57844,402],{"class":264},[220,57846,347],{"class":420},[220,57848,359],{"class":264},[212,57850,57851],{"className":468,"code":57768,"language":469,"meta":178,"style":178},[99,57852,57853,57861,57867,57879,57883],{"__ignoreMap":178},[220,57854,57855,57857,57859],{"class":222,"line":223},[220,57856,343],{"class":264},[220,57858,347],{"class":420},[220,57860,359],{"class":264},[220,57862,57863,57865],{"class":222,"line":179},[220,57864,364],{"class":264},[220,57866,57745],{"class":420},[220,57868,57869,57871,57873,57875,57877],{"class":222,"line":389},[220,57870,18744],{"class":226},[220,57872,353],{"class":260},[220,57874,743],{"class":264},[220,57876,54774],{"class":420},[220,57878,749],{"class":264},[220,57880,57881],{"class":222,"line":399},[220,57882,1234],{"class":264},[220,57884,57885,57887,57889],{"class":222,"line":644},[220,57886,402],{"class":264},[220,57888,347],{"class":420},[220,57890,359],{"class":264},[212,57892,57894],{"className":251,"code":57893,"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,57895,57896,57906,57910,57924,57928,57941,57945],{"__ignoreMap":178},[220,57897,57898,57900,57902,57904],{"class":222,"line":223},[220,57899,261],{"class":260},[220,57901,9763],{"class":264},[220,57903,268],{"class":260},[220,57905,9768],{"class":230},[220,57907,57908],{"class":222,"line":179},[220,57909,647],{"emptyLinePlaceholder":194},[220,57911,57912,57914,57916,57918,57920,57922],{"class":222,"line":389},[220,57913,1735],{"class":260},[220,57915,1738],{"class":420},[220,57917,1741],{"class":260},[220,57919,1744],{"class":260},[220,57921,1747],{"class":226},[220,57923,1750],{"class":264},[220,57925,57926],{"class":222,"line":399},[220,57927,1765],{"class":264},[220,57929,57930,57932,57935,57937,57939],{"class":222,"line":644},[220,57931,1770],{"class":264},[220,57933,57934],{"class":230},"'Plasma'",[220,57936,30484],{"class":264},[220,57938,54774],{"class":420},[220,57940,1782],{"class":264},[220,57942,57943],{"class":222,"line":650},[220,57944,1787],{"class":264},[220,57946,57947],{"class":222,"line":656},[220,57948,1792],{"class":264},[1504,57950,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57952},[57953,57954],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":11324,"description":57714},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":57961,"title":57962,"body":57963,"category":33488,"componentType":24141,"description":57970,"extension":191,"meta":58155,"navigation":194,"path":58156,"requiresChild":30811,"seo":58157,"stem":58158,"__hash__":58159},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":57964,"toc":58151},[57965,57968,57971,57973,57975,57978,57980,58149],[11,57966,57962],{"id":57967},"plastic",[15,57969,57970],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[30192,57972],{"component":57962},[23,57974,30196],{"id":24798},[30198,57976],{":props":57977},"[{\"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,57979,30204],{"id":30203},[246,57981,57982,58011,58039,58067,58095],{":tabs":1557},[212,57983,57985],{"className":334,"code":57984,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,57986,57987,57995,58003],{"__ignoreMap":178},[220,57988,57989,57991,57993],{"class":222,"line":223},[220,57990,343],{"class":264},[220,57992,347],{"class":346},[220,57994,359],{"class":264},[220,57996,57997,57999,58001],{"class":222,"line":179},[220,57998,364],{"class":264},[220,58000,57962],{"class":346},[220,58002,386],{"class":264},[220,58004,58005,58007,58009],{"class":222,"line":389},[220,58006,402],{"class":264},[220,58008,347],{"class":346},[220,58010,359],{"class":264},[212,58012,58013],{"className":409,"code":57984,"language":411,"meta":178,"style":178},[99,58014,58015,58023,58031],{"__ignoreMap":178},[220,58016,58017,58019,58021],{"class":222,"line":223},[220,58018,343],{"class":264},[220,58020,347],{"class":420},[220,58022,359],{"class":264},[220,58024,58025,58027,58029],{"class":222,"line":179},[220,58026,364],{"class":264},[220,58028,57962],{"class":420},[220,58030,386],{"class":264},[220,58032,58033,58035,58037],{"class":222,"line":389},[220,58034,402],{"class":264},[220,58036,347],{"class":420},[220,58038,359],{"class":264},[212,58040,58041],{"className":2844,"code":57984,"language":2846,"meta":178,"style":178},[99,58042,58043,58051,58059],{"__ignoreMap":178},[220,58044,58045,58047,58049],{"class":222,"line":223},[220,58046,343],{"class":264},[220,58048,347],{"class":420},[220,58050,359],{"class":264},[220,58052,58053,58055,58057],{"class":222,"line":179},[220,58054,364],{"class":264},[220,58056,57962],{"class":420},[220,58058,386],{"class":264},[220,58060,58061,58063,58065],{"class":222,"line":389},[220,58062,402],{"class":264},[220,58064,347],{"class":420},[220,58066,359],{"class":264},[212,58068,58069],{"className":468,"code":57984,"language":469,"meta":178,"style":178},[99,58070,58071,58079,58087],{"__ignoreMap":178},[220,58072,58073,58075,58077],{"class":222,"line":223},[220,58074,343],{"class":264},[220,58076,347],{"class":420},[220,58078,359],{"class":264},[220,58080,58081,58083,58085],{"class":222,"line":179},[220,58082,364],{"class":264},[220,58084,57962],{"class":420},[220,58086,386],{"class":264},[220,58088,58089,58091,58093],{"class":222,"line":389},[220,58090,402],{"class":264},[220,58092,347],{"class":420},[220,58094,359],{"class":264},[212,58096,58098],{"className":251,"code":58097,"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,58099,58100,58110,58114,58128,58132,58141,58145],{"__ignoreMap":178},[220,58101,58102,58104,58106,58108],{"class":222,"line":223},[220,58103,261],{"class":260},[220,58105,9763],{"class":264},[220,58107,268],{"class":260},[220,58109,9768],{"class":230},[220,58111,58112],{"class":222,"line":179},[220,58113,647],{"emptyLinePlaceholder":194},[220,58115,58116,58118,58120,58122,58124,58126],{"class":222,"line":389},[220,58117,1735],{"class":260},[220,58119,1738],{"class":420},[220,58121,1741],{"class":260},[220,58123,1744],{"class":260},[220,58125,1747],{"class":226},[220,58127,1750],{"class":264},[220,58129,58130],{"class":222,"line":399},[220,58131,1765],{"class":264},[220,58133,58134,58136,58139],{"class":222,"line":644},[220,58135,1770],{"class":264},[220,58137,58138],{"class":230},"'Plastic'",[220,58140,2465],{"class":264},[220,58142,58143],{"class":222,"line":650},[220,58144,1787],{"class":264},[220,58146,58147],{"class":222,"line":656},[220,58148,1792],{"class":264},[1504,58150,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":58152},[58153,58154],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":57962,"description":57970},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":58161,"title":58162,"body":58163,"category":31677,"componentType":24147,"description":58170,"extension":191,"meta":58533,"navigation":194,"path":58534,"requiresChild":194,"seo":58535,"stem":58536,"__hash__":58537},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":58164,"toc":58529},[58165,58168,58171,58173,58175,58178,58180,58527],[11,58166,58162],{"id":58167},"polarcoordinates",[15,58169,58170],{},"Convert rectangular coordinates to polar space",[30192,58172],{"component":58162},[23,58174,30196],{"id":24798},[30198,58176],{":props":58177},"[{\"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,58179,30204],{"id":30203},[246,58181,58182,58246,58317,58383,58453],{":tabs":1557},[212,58183,58185],{"className":334,"code":58184,"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,58186,58187,58195,58202,58210,58218,58222,58230,58238],{"__ignoreMap":178},[220,58188,58189,58191,58193],{"class":222,"line":223},[220,58190,343],{"class":264},[220,58192,347],{"class":346},[220,58194,359],{"class":264},[220,58196,58197,58199],{"class":222,"line":179},[220,58198,364],{"class":264},[220,58200,58201],{"class":346},"PolarCoordinates\n",[220,58203,58204,58206,58208],{"class":222,"line":389},[220,58205,15666],{"class":226},[220,58207,353],{"class":264},[220,58209,33544],{"class":230},[220,58211,58212,58214,58216],{"class":222,"line":399},[220,58213,18633],{"class":226},[220,58215,353],{"class":264},[220,58217,33544],{"class":230},[220,58219,58220],{"class":222,"line":644},[220,58221,30240],{"class":264},[220,58223,58224,58226,58228],{"class":222,"line":650},[220,58225,2550],{"class":264},[220,58227,2553],{"class":346},[220,58229,386],{"class":264},[220,58231,58232,58234,58236],{"class":222,"line":656},[220,58233,2567],{"class":264},[220,58235,58162],{"class":346},[220,58237,359],{"class":264},[220,58239,58240,58242,58244],{"class":222,"line":673},[220,58241,402],{"class":264},[220,58243,347],{"class":346},[220,58245,359],{"class":264},[212,58247,58249],{"className":409,"code":58248,"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,58250,58251,58259,58265,58277,58289,58293,58301,58309],{"__ignoreMap":178},[220,58252,58253,58255,58257],{"class":222,"line":223},[220,58254,343],{"class":264},[220,58256,347],{"class":420},[220,58258,359],{"class":264},[220,58260,58261,58263],{"class":222,"line":179},[220,58262,364],{"class":264},[220,58264,58201],{"class":420},[220,58266,58267,58269,58271,58273,58275],{"class":222,"line":389},[220,58268,7892],{"class":226},[220,58270,353],{"class":260},[220,58272,743],{"class":264},[220,58274,6923],{"class":420},[220,58276,749],{"class":264},[220,58278,58279,58281,58283,58285,58287],{"class":222,"line":399},[220,58280,18744],{"class":226},[220,58282,353],{"class":260},[220,58284,743],{"class":264},[220,58286,6923],{"class":420},[220,58288,749],{"class":264},[220,58290,58291],{"class":222,"line":644},[220,58292,30240],{"class":264},[220,58294,58295,58297,58299],{"class":222,"line":650},[220,58296,2550],{"class":264},[220,58298,2553],{"class":420},[220,58300,386],{"class":264},[220,58302,58303,58305,58307],{"class":222,"line":656},[220,58304,2567],{"class":264},[220,58306,58162],{"class":420},[220,58308,359],{"class":264},[220,58310,58311,58313,58315],{"class":222,"line":673},[220,58312,402],{"class":264},[220,58314,347],{"class":420},[220,58316,359],{"class":264},[212,58318,58319],{"className":2844,"code":58248,"language":2846,"meta":178,"style":178},[99,58320,58321,58329,58335,58345,58355,58359,58367,58375],{"__ignoreMap":178},[220,58322,58323,58325,58327],{"class":222,"line":223},[220,58324,343],{"class":264},[220,58326,347],{"class":420},[220,58328,359],{"class":264},[220,58330,58331,58333],{"class":222,"line":179},[220,58332,364],{"class":264},[220,58334,58201],{"class":420},[220,58336,58337,58339,58341,58343],{"class":222,"line":389},[220,58338,7892],{"class":226},[220,58340,28138],{"class":264},[220,58342,6923],{"class":420},[220,58344,749],{"class":264},[220,58346,58347,58349,58351,58353],{"class":222,"line":399},[220,58348,18744],{"class":226},[220,58350,28138],{"class":264},[220,58352,6923],{"class":420},[220,58354,749],{"class":264},[220,58356,58357],{"class":222,"line":644},[220,58358,30240],{"class":264},[220,58360,58361,58363,58365],{"class":222,"line":650},[220,58362,2550],{"class":264},[220,58364,2553],{"class":420},[220,58366,386],{"class":264},[220,58368,58369,58371,58373],{"class":222,"line":656},[220,58370,2567],{"class":264},[220,58372,58162],{"class":420},[220,58374,359],{"class":264},[220,58376,58377,58379,58381],{"class":222,"line":673},[220,58378,402],{"class":264},[220,58380,347],{"class":420},[220,58382,359],{"class":264},[212,58384,58385],{"className":468,"code":58248,"language":469,"meta":178,"style":178},[99,58386,58387,58395,58401,58413,58425,58429,58437,58445],{"__ignoreMap":178},[220,58388,58389,58391,58393],{"class":222,"line":223},[220,58390,343],{"class":264},[220,58392,347],{"class":420},[220,58394,359],{"class":264},[220,58396,58397,58399],{"class":222,"line":179},[220,58398,364],{"class":264},[220,58400,58201],{"class":420},[220,58402,58403,58405,58407,58409,58411],{"class":222,"line":389},[220,58404,7892],{"class":226},[220,58406,353],{"class":260},[220,58408,743],{"class":264},[220,58410,6923],{"class":420},[220,58412,749],{"class":264},[220,58414,58415,58417,58419,58421,58423],{"class":222,"line":399},[220,58416,18744],{"class":226},[220,58418,353],{"class":260},[220,58420,743],{"class":264},[220,58422,6923],{"class":420},[220,58424,749],{"class":264},[220,58426,58427],{"class":222,"line":644},[220,58428,30240],{"class":264},[220,58430,58431,58433,58435],{"class":222,"line":650},[220,58432,2550],{"class":264},[220,58434,2553],{"class":420},[220,58436,386],{"class":264},[220,58438,58439,58441,58443],{"class":222,"line":656},[220,58440,2567],{"class":264},[220,58442,58162],{"class":420},[220,58444,359],{"class":264},[220,58446,58447,58449,58451],{"class":222,"line":673},[220,58448,402],{"class":264},[220,58450,347],{"class":420},[220,58452,359],{"class":264},[212,58454,58456],{"className":251,"code":58455,"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,58457,58458,58468,58472,58486,58490,58507,58515,58519,58523],{"__ignoreMap":178},[220,58459,58460,58462,58464,58466],{"class":222,"line":223},[220,58461,261],{"class":260},[220,58463,9763],{"class":264},[220,58465,268],{"class":260},[220,58467,9768],{"class":230},[220,58469,58470],{"class":222,"line":179},[220,58471,647],{"emptyLinePlaceholder":194},[220,58473,58474,58476,58478,58480,58482,58484],{"class":222,"line":389},[220,58475,1735],{"class":260},[220,58477,1738],{"class":420},[220,58479,1741],{"class":260},[220,58481,1744],{"class":260},[220,58483,1747],{"class":226},[220,58485,1750],{"class":264},[220,58487,58488],{"class":222,"line":399},[220,58489,1765],{"class":264},[220,58491,58492,58494,58497,58499,58501,58503,58505],{"class":222,"line":644},[220,58493,1770],{"class":264},[220,58495,58496],{"class":230},"'PolarCoordinates'",[220,58498,5787],{"class":264},[220,58500,6923],{"class":420},[220,58502,41295],{"class":264},[220,58504,6923],{"class":420},[220,58506,5792],{"class":264},[220,58508,58509,58511,58513],{"class":222,"line":650},[220,58510,5260],{"class":264},[220,58512,3206],{"class":230},[220,58514,2465],{"class":264},[220,58516,58517],{"class":222,"line":656},[220,58518,5277],{"class":264},[220,58520,58521],{"class":222,"line":673},[220,58522,1787],{"class":264},[220,58524,58525],{"class":222,"line":682},[220,58526,1792],{"class":264},[1504,58528,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58530},[58531,58532],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":58162,"description":58170},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":58539,"title":58540,"body":58541,"category":14164,"componentType":24141,"description":58548,"extension":191,"meta":58825,"navigation":194,"path":58826,"requiresChild":30811,"seo":58827,"stem":58828,"__hash__":58829},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":58542,"toc":58821},[58543,58546,58549,58551,58553,58556,58558,58819],[11,58544,58540],{"id":58545},"polygon",[15,58547,58548],{},"Regular polygon with adjustable sides and corner rounding",[30192,58550],{"component":58540},[23,58552,30196],{"id":24798},[30198,58554],{":props":58555},"[{\"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,58557,30204],{"id":30203},[246,58559,58560,58608,58659,58707,58757],{":tabs":1557},[212,58561,58563],{"className":334,"code":58562,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,58564,58565,58573,58580,58588,58596,58600],{"__ignoreMap":178},[220,58566,58567,58569,58571],{"class":222,"line":223},[220,58568,343],{"class":264},[220,58570,347],{"class":346},[220,58572,359],{"class":264},[220,58574,58575,58577],{"class":222,"line":179},[220,58576,364],{"class":264},[220,58578,58579],{"class":346},"Polygon\n",[220,58581,58582,58584,58586],{"class":222,"line":389},[220,58583,7882],{"class":226},[220,58585,353],{"class":264},[220,58587,7838],{"class":230},[220,58589,58590,58592,58594],{"class":222,"line":399},[220,58591,15666],{"class":226},[220,58593,353],{"class":264},[220,58595,44164],{"class":230},[220,58597,58598],{"class":222,"line":644},[220,58599,1234],{"class":264},[220,58601,58602,58604,58606],{"class":222,"line":650},[220,58603,402],{"class":264},[220,58605,347],{"class":346},[220,58607,359],{"class":264},[212,58609,58611],{"className":409,"code":58610,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,58612,58613,58621,58627,58635,58647,58651],{"__ignoreMap":178},[220,58614,58615,58617,58619],{"class":222,"line":223},[220,58616,343],{"class":264},[220,58618,347],{"class":420},[220,58620,359],{"class":264},[220,58622,58623,58625],{"class":222,"line":179},[220,58624,364],{"class":264},[220,58626,58579],{"class":420},[220,58628,58629,58631,58633],{"class":222,"line":389},[220,58630,7882],{"class":226},[220,58632,353],{"class":260},[220,58634,7838],{"class":230},[220,58636,58637,58639,58641,58643,58645],{"class":222,"line":399},[220,58638,7892],{"class":226},[220,58640,353],{"class":260},[220,58642,743],{"class":264},[220,58644,6495],{"class":420},[220,58646,749],{"class":264},[220,58648,58649],{"class":222,"line":644},[220,58650,1234],{"class":264},[220,58652,58653,58655,58657],{"class":222,"line":650},[220,58654,402],{"class":264},[220,58656,347],{"class":420},[220,58658,359],{"class":264},[212,58660,58661],{"className":2844,"code":58610,"language":2846,"meta":178,"style":178},[99,58662,58663,58671,58677,58685,58695,58699],{"__ignoreMap":178},[220,58664,58665,58667,58669],{"class":222,"line":223},[220,58666,343],{"class":264},[220,58668,347],{"class":420},[220,58670,359],{"class":264},[220,58672,58673,58675],{"class":222,"line":179},[220,58674,364],{"class":264},[220,58676,58579],{"class":420},[220,58678,58679,58681,58683],{"class":222,"line":389},[220,58680,7882],{"class":226},[220,58682,353],{"class":264},[220,58684,7838],{"class":230},[220,58686,58687,58689,58691,58693],{"class":222,"line":399},[220,58688,7892],{"class":226},[220,58690,28138],{"class":264},[220,58692,6495],{"class":420},[220,58694,749],{"class":264},[220,58696,58697],{"class":222,"line":644},[220,58698,1234],{"class":264},[220,58700,58701,58703,58705],{"class":222,"line":650},[220,58702,402],{"class":264},[220,58704,347],{"class":420},[220,58706,359],{"class":264},[212,58708,58709],{"className":468,"code":58610,"language":469,"meta":178,"style":178},[99,58710,58711,58719,58725,58733,58745,58749],{"__ignoreMap":178},[220,58712,58713,58715,58717],{"class":222,"line":223},[220,58714,343],{"class":264},[220,58716,347],{"class":420},[220,58718,359],{"class":264},[220,58720,58721,58723],{"class":222,"line":179},[220,58722,364],{"class":264},[220,58724,58579],{"class":420},[220,58726,58727,58729,58731],{"class":222,"line":389},[220,58728,7882],{"class":226},[220,58730,353],{"class":260},[220,58732,7838],{"class":230},[220,58734,58735,58737,58739,58741,58743],{"class":222,"line":399},[220,58736,7892],{"class":226},[220,58738,353],{"class":260},[220,58740,743],{"class":264},[220,58742,6495],{"class":420},[220,58744,749],{"class":264},[220,58746,58747],{"class":222,"line":644},[220,58748,1234],{"class":264},[220,58750,58751,58753,58755],{"class":222,"line":650},[220,58752,402],{"class":264},[220,58754,347],{"class":420},[220,58756,359],{"class":264},[212,58758,58760],{"className":251,"code":58759,"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,58761,58762,58772,58776,58790,58794,58811,58815],{"__ignoreMap":178},[220,58763,58764,58766,58768,58770],{"class":222,"line":223},[220,58765,261],{"class":260},[220,58767,9763],{"class":264},[220,58769,268],{"class":260},[220,58771,9768],{"class":230},[220,58773,58774],{"class":222,"line":179},[220,58775,647],{"emptyLinePlaceholder":194},[220,58777,58778,58780,58782,58784,58786,58788],{"class":222,"line":389},[220,58779,1735],{"class":260},[220,58781,1738],{"class":420},[220,58783,1741],{"class":260},[220,58785,1744],{"class":260},[220,58787,1747],{"class":226},[220,58789,1750],{"class":264},[220,58791,58792],{"class":222,"line":399},[220,58793,1765],{"class":264},[220,58795,58796,58798,58801,58803,58805,58807,58809],{"class":222,"line":644},[220,58797,1770],{"class":264},[220,58799,58800],{"class":230},"'Polygon'",[220,58802,1776],{"class":264},[220,58804,8417],{"class":230},[220,58806,4812],{"class":264},[220,58808,6495],{"class":420},[220,58810,1782],{"class":264},[220,58812,58813],{"class":222,"line":650},[220,58814,1787],{"class":264},[220,58816,58817],{"class":222,"line":656},[220,58818,1792],{"class":264},[1504,58820,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58822},[58823,58824],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":58540,"description":58548},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":58831,"title":58832,"body":58833,"category":33287,"componentType":24147,"description":58840,"extension":191,"meta":59158,"navigation":194,"path":59159,"requiresChild":194,"seo":59160,"stem":59161,"__hash__":59162},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":58834,"toc":59154},[58835,58838,58841,58843,58845,58848,58850,59152],[11,58836,58832],{"id":58837},"posterize",[15,58839,58840],{},"Reduce color depth to create a poster effect",[30192,58842],{"component":58832},[23,58844,30196],{"id":24798},[30198,58846],{":props":58847},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,58849,30204],{"id":30203},[246,58851,58852,58909,58968,59024,59082],{":tabs":1557},[212,58853,58855],{"className":334,"code":58854,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,58856,58857,58865,58872,58881,58885,58893,58901],{"__ignoreMap":178},[220,58858,58859,58861,58863],{"class":222,"line":223},[220,58860,343],{"class":264},[220,58862,347],{"class":346},[220,58864,359],{"class":264},[220,58866,58867,58869],{"class":222,"line":179},[220,58868,364],{"class":264},[220,58870,58871],{"class":346},"Posterize\n",[220,58873,58874,58876,58878],{"class":222,"line":389},[220,58875,18633],{"class":226},[220,58877,353],{"class":264},[220,58879,58880],{"class":230},"\"5\"\n",[220,58882,58883],{"class":222,"line":399},[220,58884,30240],{"class":264},[220,58886,58887,58889,58891],{"class":222,"line":644},[220,58888,2550],{"class":264},[220,58890,2553],{"class":346},[220,58892,386],{"class":264},[220,58894,58895,58897,58899],{"class":222,"line":650},[220,58896,2567],{"class":264},[220,58898,58832],{"class":346},[220,58900,359],{"class":264},[220,58902,58903,58905,58907],{"class":222,"line":656},[220,58904,402],{"class":264},[220,58906,347],{"class":346},[220,58908,359],{"class":264},[212,58910,58912],{"className":409,"code":58911,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,58913,58914,58922,58928,58940,58944,58952,58960],{"__ignoreMap":178},[220,58915,58916,58918,58920],{"class":222,"line":223},[220,58917,343],{"class":264},[220,58919,347],{"class":420},[220,58921,359],{"class":264},[220,58923,58924,58926],{"class":222,"line":179},[220,58925,364],{"class":264},[220,58927,58871],{"class":420},[220,58929,58930,58932,58934,58936,58938],{"class":222,"line":389},[220,58931,18744],{"class":226},[220,58933,353],{"class":260},[220,58935,743],{"class":264},[220,58937,20355],{"class":420},[220,58939,749],{"class":264},[220,58941,58942],{"class":222,"line":399},[220,58943,30240],{"class":264},[220,58945,58946,58948,58950],{"class":222,"line":644},[220,58947,2550],{"class":264},[220,58949,2553],{"class":420},[220,58951,386],{"class":264},[220,58953,58954,58956,58958],{"class":222,"line":650},[220,58955,2567],{"class":264},[220,58957,58832],{"class":420},[220,58959,359],{"class":264},[220,58961,58962,58964,58966],{"class":222,"line":656},[220,58963,402],{"class":264},[220,58965,347],{"class":420},[220,58967,359],{"class":264},[212,58969,58970],{"className":2844,"code":58911,"language":2846,"meta":178,"style":178},[99,58971,58972,58980,58986,58996,59000,59008,59016],{"__ignoreMap":178},[220,58973,58974,58976,58978],{"class":222,"line":223},[220,58975,343],{"class":264},[220,58977,347],{"class":420},[220,58979,359],{"class":264},[220,58981,58982,58984],{"class":222,"line":179},[220,58983,364],{"class":264},[220,58985,58871],{"class":420},[220,58987,58988,58990,58992,58994],{"class":222,"line":389},[220,58989,18744],{"class":226},[220,58991,28138],{"class":264},[220,58993,20355],{"class":420},[220,58995,749],{"class":264},[220,58997,58998],{"class":222,"line":399},[220,58999,30240],{"class":264},[220,59001,59002,59004,59006],{"class":222,"line":644},[220,59003,2550],{"class":264},[220,59005,2553],{"class":420},[220,59007,386],{"class":264},[220,59009,59010,59012,59014],{"class":222,"line":650},[220,59011,2567],{"class":264},[220,59013,58832],{"class":420},[220,59015,359],{"class":264},[220,59017,59018,59020,59022],{"class":222,"line":656},[220,59019,402],{"class":264},[220,59021,347],{"class":420},[220,59023,359],{"class":264},[212,59025,59026],{"className":468,"code":58911,"language":469,"meta":178,"style":178},[99,59027,59028,59036,59042,59054,59058,59066,59074],{"__ignoreMap":178},[220,59029,59030,59032,59034],{"class":222,"line":223},[220,59031,343],{"class":264},[220,59033,347],{"class":420},[220,59035,359],{"class":264},[220,59037,59038,59040],{"class":222,"line":179},[220,59039,364],{"class":264},[220,59041,58871],{"class":420},[220,59043,59044,59046,59048,59050,59052],{"class":222,"line":389},[220,59045,18744],{"class":226},[220,59047,353],{"class":260},[220,59049,743],{"class":264},[220,59051,20355],{"class":420},[220,59053,749],{"class":264},[220,59055,59056],{"class":222,"line":399},[220,59057,30240],{"class":264},[220,59059,59060,59062,59064],{"class":222,"line":644},[220,59061,2550],{"class":264},[220,59063,2553],{"class":420},[220,59065,386],{"class":264},[220,59067,59068,59070,59072],{"class":222,"line":650},[220,59069,2567],{"class":264},[220,59071,58832],{"class":420},[220,59073,359],{"class":264},[220,59075,59076,59078,59080],{"class":222,"line":656},[220,59077,402],{"class":264},[220,59079,347],{"class":420},[220,59081,359],{"class":264},[212,59083,59085],{"className":251,"code":59084,"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,59086,59087,59097,59101,59115,59119,59132,59140,59144,59148],{"__ignoreMap":178},[220,59088,59089,59091,59093,59095],{"class":222,"line":223},[220,59090,261],{"class":260},[220,59092,9763],{"class":264},[220,59094,268],{"class":260},[220,59096,9768],{"class":230},[220,59098,59099],{"class":222,"line":179},[220,59100,647],{"emptyLinePlaceholder":194},[220,59102,59103,59105,59107,59109,59111,59113],{"class":222,"line":389},[220,59104,1735],{"class":260},[220,59106,1738],{"class":420},[220,59108,1741],{"class":260},[220,59110,1744],{"class":260},[220,59112,1747],{"class":226},[220,59114,1750],{"class":264},[220,59116,59117],{"class":222,"line":399},[220,59118,1765],{"class":264},[220,59120,59121,59123,59126,59128,59130],{"class":222,"line":644},[220,59122,1770],{"class":264},[220,59124,59125],{"class":230},"'Posterize'",[220,59127,30484],{"class":264},[220,59129,20355],{"class":420},[220,59131,5792],{"class":264},[220,59133,59134,59136,59138],{"class":222,"line":650},[220,59135,5260],{"class":264},[220,59137,3206],{"class":230},[220,59139,2465],{"class":264},[220,59141,59142],{"class":222,"line":656},[220,59143,5277],{"class":264},[220,59145,59146],{"class":222,"line":673},[220,59147,1787],{"class":264},[220,59149,59150],{"class":222,"line":682},[220,59151,1792],{"class":264},[1504,59153,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59155},[59156,59157],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":58832,"description":58840},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":59164,"title":59165,"body":59166,"category":31344,"componentType":24141,"description":59173,"extension":191,"meta":59416,"navigation":194,"path":59417,"requiresChild":30811,"seo":59418,"stem":59419,"__hash__":59420},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":59167,"toc":59412},[59168,59171,59174,59176,59178,59181,59183,59410],[11,59169,59165],{"id":59170},"prism",[15,59172,59173],{},"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.",[30192,59175],{"component":59165},[23,59177,30196],{"id":24798},[30198,59179],{":props":59180},"[{\"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,59182,30204],{"id":30203},[246,59184,59185,59226,59270,59310,59352],{":tabs":1557},[212,59186,59188],{"className":334,"code":59187,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,59189,59190,59198,59205,59214,59218],{"__ignoreMap":178},[220,59191,59192,59194,59196],{"class":222,"line":223},[220,59193,343],{"class":264},[220,59195,347],{"class":346},[220,59197,359],{"class":264},[220,59199,59200,59202],{"class":222,"line":179},[220,59201,364],{"class":264},[220,59203,59204],{"class":346},"Prism\n",[220,59206,59207,59209,59211],{"class":222,"line":389},[220,59208,18633],{"class":226},[220,59210,353],{"class":264},[220,59212,59213],{"class":230},"\"1.6\"\n",[220,59215,59216],{"class":222,"line":399},[220,59217,1234],{"class":264},[220,59219,59220,59222,59224],{"class":222,"line":644},[220,59221,402],{"class":264},[220,59223,347],{"class":346},[220,59225,359],{"class":264},[212,59227,59229],{"className":409,"code":59228,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,59230,59231,59239,59245,59258,59262],{"__ignoreMap":178},[220,59232,59233,59235,59237],{"class":222,"line":223},[220,59234,343],{"class":264},[220,59236,347],{"class":420},[220,59238,359],{"class":264},[220,59240,59241,59243],{"class":222,"line":179},[220,59242,364],{"class":264},[220,59244,59204],{"class":420},[220,59246,59247,59249,59251,59253,59256],{"class":222,"line":389},[220,59248,18744],{"class":226},[220,59250,353],{"class":260},[220,59252,743],{"class":264},[220,59254,59255],{"class":420},"1.6",[220,59257,749],{"class":264},[220,59259,59260],{"class":222,"line":399},[220,59261,1234],{"class":264},[220,59263,59264,59266,59268],{"class":222,"line":644},[220,59265,402],{"class":264},[220,59267,347],{"class":420},[220,59269,359],{"class":264},[212,59271,59272],{"className":2844,"code":59228,"language":2846,"meta":178,"style":178},[99,59273,59274,59282,59288,59298,59302],{"__ignoreMap":178},[220,59275,59276,59278,59280],{"class":222,"line":223},[220,59277,343],{"class":264},[220,59279,347],{"class":420},[220,59281,359],{"class":264},[220,59283,59284,59286],{"class":222,"line":179},[220,59285,364],{"class":264},[220,59287,59204],{"class":420},[220,59289,59290,59292,59294,59296],{"class":222,"line":389},[220,59291,18744],{"class":226},[220,59293,28138],{"class":264},[220,59295,59255],{"class":420},[220,59297,749],{"class":264},[220,59299,59300],{"class":222,"line":399},[220,59301,1234],{"class":264},[220,59303,59304,59306,59308],{"class":222,"line":644},[220,59305,402],{"class":264},[220,59307,347],{"class":420},[220,59309,359],{"class":264},[212,59311,59312],{"className":468,"code":59228,"language":469,"meta":178,"style":178},[99,59313,59314,59322,59328,59340,59344],{"__ignoreMap":178},[220,59315,59316,59318,59320],{"class":222,"line":223},[220,59317,343],{"class":264},[220,59319,347],{"class":420},[220,59321,359],{"class":264},[220,59323,59324,59326],{"class":222,"line":179},[220,59325,364],{"class":264},[220,59327,59204],{"class":420},[220,59329,59330,59332,59334,59336,59338],{"class":222,"line":389},[220,59331,18744],{"class":226},[220,59333,353],{"class":260},[220,59335,743],{"class":264},[220,59337,59255],{"class":420},[220,59339,749],{"class":264},[220,59341,59342],{"class":222,"line":399},[220,59343,1234],{"class":264},[220,59345,59346,59348,59350],{"class":222,"line":644},[220,59347,402],{"class":264},[220,59349,347],{"class":420},[220,59351,359],{"class":264},[212,59353,59355],{"className":251,"code":59354,"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,59356,59357,59367,59371,59385,59389,59402,59406],{"__ignoreMap":178},[220,59358,59359,59361,59363,59365],{"class":222,"line":223},[220,59360,261],{"class":260},[220,59362,9763],{"class":264},[220,59364,268],{"class":260},[220,59366,9768],{"class":230},[220,59368,59369],{"class":222,"line":179},[220,59370,647],{"emptyLinePlaceholder":194},[220,59372,59373,59375,59377,59379,59381,59383],{"class":222,"line":389},[220,59374,1735],{"class":260},[220,59376,1738],{"class":420},[220,59378,1741],{"class":260},[220,59380,1744],{"class":260},[220,59382,1747],{"class":226},[220,59384,1750],{"class":264},[220,59386,59387],{"class":222,"line":399},[220,59388,1765],{"class":264},[220,59390,59391,59393,59396,59398,59400],{"class":222,"line":644},[220,59392,1770],{"class":264},[220,59394,59395],{"class":230},"'Prism'",[220,59397,30484],{"class":264},[220,59399,59255],{"class":420},[220,59401,1782],{"class":264},[220,59403,59404],{"class":222,"line":650},[220,59405,1787],{"class":264},[220,59407,59408],{"class":222,"line":656},[220,59409,1792],{"class":264},[1504,59411,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59413},[59414,59415],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":59165,"description":59173},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":59422,"title":59423,"body":59424,"category":30515,"componentType":24147,"description":59431,"extension":191,"meta":59748,"navigation":194,"path":59749,"requiresChild":194,"seo":59750,"stem":59751,"__hash__":59752},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":59425,"toc":59744},[59426,59429,59432,59434,59436,59439,59441,59742],[11,59427,59423],{"id":59428},"progressiveblur",[15,59430,59431],{},"Blur that increases progressively in one direction",[30192,59433],{"component":59423},[23,59435,30196],{"id":24798},[30198,59437],{":props":59438},"[{\"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,59440,30204],{"id":30203},[246,59442,59443,59499,59558,59614,59672],{":tabs":1557},[212,59444,59446],{"className":334,"code":59445,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,59447,59448,59456,59463,59471,59475,59483,59491],{"__ignoreMap":178},[220,59449,59450,59452,59454],{"class":222,"line":223},[220,59451,343],{"class":264},[220,59453,347],{"class":346},[220,59455,359],{"class":264},[220,59457,59458,59460],{"class":222,"line":179},[220,59459,364],{"class":264},[220,59461,59462],{"class":346},"ProgressiveBlur\n",[220,59464,59465,59467,59469],{"class":222,"line":389},[220,59466,18633],{"class":226},[220,59468,353],{"class":264},[220,59470,32532],{"class":230},[220,59472,59473],{"class":222,"line":399},[220,59474,30240],{"class":264},[220,59476,59477,59479,59481],{"class":222,"line":644},[220,59478,2550],{"class":264},[220,59480,2553],{"class":346},[220,59482,386],{"class":264},[220,59484,59485,59487,59489],{"class":222,"line":650},[220,59486,2567],{"class":264},[220,59488,59423],{"class":346},[220,59490,359],{"class":264},[220,59492,59493,59495,59497],{"class":222,"line":656},[220,59494,402],{"class":264},[220,59496,347],{"class":346},[220,59498,359],{"class":264},[212,59500,59502],{"className":409,"code":59501,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,59503,59504,59512,59518,59530,59534,59542,59550],{"__ignoreMap":178},[220,59505,59506,59508,59510],{"class":222,"line":223},[220,59507,343],{"class":264},[220,59509,347],{"class":420},[220,59511,359],{"class":264},[220,59513,59514,59516],{"class":222,"line":179},[220,59515,364],{"class":264},[220,59517,59462],{"class":420},[220,59519,59520,59522,59524,59526,59528],{"class":222,"line":389},[220,59521,18744],{"class":226},[220,59523,353],{"class":260},[220,59525,743],{"class":264},[220,59527,32590],{"class":420},[220,59529,749],{"class":264},[220,59531,59532],{"class":222,"line":399},[220,59533,30240],{"class":264},[220,59535,59536,59538,59540],{"class":222,"line":644},[220,59537,2550],{"class":264},[220,59539,2553],{"class":420},[220,59541,386],{"class":264},[220,59543,59544,59546,59548],{"class":222,"line":650},[220,59545,2567],{"class":264},[220,59547,59423],{"class":420},[220,59549,359],{"class":264},[220,59551,59552,59554,59556],{"class":222,"line":656},[220,59553,402],{"class":264},[220,59555,347],{"class":420},[220,59557,359],{"class":264},[212,59559,59560],{"className":2844,"code":59501,"language":2846,"meta":178,"style":178},[99,59561,59562,59570,59576,59586,59590,59598,59606],{"__ignoreMap":178},[220,59563,59564,59566,59568],{"class":222,"line":223},[220,59565,343],{"class":264},[220,59567,347],{"class":420},[220,59569,359],{"class":264},[220,59571,59572,59574],{"class":222,"line":179},[220,59573,364],{"class":264},[220,59575,59462],{"class":420},[220,59577,59578,59580,59582,59584],{"class":222,"line":389},[220,59579,18744],{"class":226},[220,59581,28138],{"class":264},[220,59583,32590],{"class":420},[220,59585,749],{"class":264},[220,59587,59588],{"class":222,"line":399},[220,59589,30240],{"class":264},[220,59591,59592,59594,59596],{"class":222,"line":644},[220,59593,2550],{"class":264},[220,59595,2553],{"class":420},[220,59597,386],{"class":264},[220,59599,59600,59602,59604],{"class":222,"line":650},[220,59601,2567],{"class":264},[220,59603,59423],{"class":420},[220,59605,359],{"class":264},[220,59607,59608,59610,59612],{"class":222,"line":656},[220,59609,402],{"class":264},[220,59611,347],{"class":420},[220,59613,359],{"class":264},[212,59615,59616],{"className":468,"code":59501,"language":469,"meta":178,"style":178},[99,59617,59618,59626,59632,59644,59648,59656,59664],{"__ignoreMap":178},[220,59619,59620,59622,59624],{"class":222,"line":223},[220,59621,343],{"class":264},[220,59623,347],{"class":420},[220,59625,359],{"class":264},[220,59627,59628,59630],{"class":222,"line":179},[220,59629,364],{"class":264},[220,59631,59462],{"class":420},[220,59633,59634,59636,59638,59640,59642],{"class":222,"line":389},[220,59635,18744],{"class":226},[220,59637,353],{"class":260},[220,59639,743],{"class":264},[220,59641,32590],{"class":420},[220,59643,749],{"class":264},[220,59645,59646],{"class":222,"line":399},[220,59647,30240],{"class":264},[220,59649,59650,59652,59654],{"class":222,"line":644},[220,59651,2550],{"class":264},[220,59653,2553],{"class":420},[220,59655,386],{"class":264},[220,59657,59658,59660,59662],{"class":222,"line":650},[220,59659,2567],{"class":264},[220,59661,59423],{"class":420},[220,59663,359],{"class":264},[220,59665,59666,59668,59670],{"class":222,"line":656},[220,59667,402],{"class":264},[220,59669,347],{"class":420},[220,59671,359],{"class":264},[212,59673,59675],{"className":251,"code":59674,"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,59676,59677,59687,59691,59705,59709,59722,59730,59734,59738],{"__ignoreMap":178},[220,59678,59679,59681,59683,59685],{"class":222,"line":223},[220,59680,261],{"class":260},[220,59682,9763],{"class":264},[220,59684,268],{"class":260},[220,59686,9768],{"class":230},[220,59688,59689],{"class":222,"line":179},[220,59690,647],{"emptyLinePlaceholder":194},[220,59692,59693,59695,59697,59699,59701,59703],{"class":222,"line":389},[220,59694,1735],{"class":260},[220,59696,1738],{"class":420},[220,59698,1741],{"class":260},[220,59700,1744],{"class":260},[220,59702,1747],{"class":226},[220,59704,1750],{"class":264},[220,59706,59707],{"class":222,"line":399},[220,59708,1765],{"class":264},[220,59710,59711,59713,59716,59718,59720],{"class":222,"line":644},[220,59712,1770],{"class":264},[220,59714,59715],{"class":230},"'ProgressiveBlur'",[220,59717,30484],{"class":264},[220,59719,32590],{"class":420},[220,59721,5792],{"class":264},[220,59723,59724,59726,59728],{"class":222,"line":650},[220,59725,5260],{"class":264},[220,59727,3206],{"class":230},[220,59729,2465],{"class":264},[220,59731,59732],{"class":222,"line":656},[220,59733,5277],{"class":264},[220,59735,59736],{"class":222,"line":673},[220,59737,1787],{"class":264},[220,59739,59740],{"class":222,"line":682},[220,59741,1792],{"class":264},[1504,59743,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59745},[59746,59747],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":59423,"description":59431},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":59754,"title":59755,"body":59756,"category":31344,"componentType":24141,"description":59763,"extension":191,"meta":60004,"navigation":194,"path":60005,"requiresChild":30811,"seo":60006,"stem":60007,"__hash__":60008},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":59757,"toc":60000},[59758,59761,59764,59766,59768,59771,59773,59998],[11,59759,59755],{"id":59760},"radialgradient",[15,59762,59763],{},"Radial gradient radiating from a center point",[30192,59765],{"component":59755},[23,59767,30196],{"id":24798},[30198,59769],{":props":59770},"[{\"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,59772,30204],{"id":30203},[246,59774,59775,59815,59858,59898,59940],{":tabs":1557},[212,59776,59778],{"className":334,"code":59777,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,59779,59780,59788,59795,59803,59807],{"__ignoreMap":178},[220,59781,59782,59784,59786],{"class":222,"line":223},[220,59783,343],{"class":264},[220,59785,347],{"class":346},[220,59787,359],{"class":264},[220,59789,59790,59792],{"class":222,"line":179},[220,59791,364],{"class":264},[220,59793,59794],{"class":346},"RadialGradient\n",[220,59796,59797,59799,59801],{"class":222,"line":389},[220,59798,15666],{"class":226},[220,59800,353],{"class":264},[220,59802,33544],{"class":230},[220,59804,59805],{"class":222,"line":399},[220,59806,1234],{"class":264},[220,59808,59809,59811,59813],{"class":222,"line":644},[220,59810,402],{"class":264},[220,59812,347],{"class":346},[220,59814,359],{"class":264},[212,59816,59818],{"className":409,"code":59817,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,59819,59820,59828,59834,59846,59850],{"__ignoreMap":178},[220,59821,59822,59824,59826],{"class":222,"line":223},[220,59823,343],{"class":264},[220,59825,347],{"class":420},[220,59827,359],{"class":264},[220,59829,59830,59832],{"class":222,"line":179},[220,59831,364],{"class":264},[220,59833,59794],{"class":420},[220,59835,59836,59838,59840,59842,59844],{"class":222,"line":389},[220,59837,7892],{"class":226},[220,59839,353],{"class":260},[220,59841,743],{"class":264},[220,59843,6923],{"class":420},[220,59845,749],{"class":264},[220,59847,59848],{"class":222,"line":399},[220,59849,1234],{"class":264},[220,59851,59852,59854,59856],{"class":222,"line":644},[220,59853,402],{"class":264},[220,59855,347],{"class":420},[220,59857,359],{"class":264},[212,59859,59860],{"className":2844,"code":59817,"language":2846,"meta":178,"style":178},[99,59861,59862,59870,59876,59886,59890],{"__ignoreMap":178},[220,59863,59864,59866,59868],{"class":222,"line":223},[220,59865,343],{"class":264},[220,59867,347],{"class":420},[220,59869,359],{"class":264},[220,59871,59872,59874],{"class":222,"line":179},[220,59873,364],{"class":264},[220,59875,59794],{"class":420},[220,59877,59878,59880,59882,59884],{"class":222,"line":389},[220,59879,7892],{"class":226},[220,59881,28138],{"class":264},[220,59883,6923],{"class":420},[220,59885,749],{"class":264},[220,59887,59888],{"class":222,"line":399},[220,59889,1234],{"class":264},[220,59891,59892,59894,59896],{"class":222,"line":644},[220,59893,402],{"class":264},[220,59895,347],{"class":420},[220,59897,359],{"class":264},[212,59899,59900],{"className":468,"code":59817,"language":469,"meta":178,"style":178},[99,59901,59902,59910,59916,59928,59932],{"__ignoreMap":178},[220,59903,59904,59906,59908],{"class":222,"line":223},[220,59905,343],{"class":264},[220,59907,347],{"class":420},[220,59909,359],{"class":264},[220,59911,59912,59914],{"class":222,"line":179},[220,59913,364],{"class":264},[220,59915,59794],{"class":420},[220,59917,59918,59920,59922,59924,59926],{"class":222,"line":389},[220,59919,7892],{"class":226},[220,59921,353],{"class":260},[220,59923,743],{"class":264},[220,59925,6923],{"class":420},[220,59927,749],{"class":264},[220,59929,59930],{"class":222,"line":399},[220,59931,1234],{"class":264},[220,59933,59934,59936,59938],{"class":222,"line":644},[220,59935,402],{"class":264},[220,59937,347],{"class":420},[220,59939,359],{"class":264},[212,59941,59943],{"className":251,"code":59942,"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,59944,59945,59955,59959,59973,59977,59990,59994],{"__ignoreMap":178},[220,59946,59947,59949,59951,59953],{"class":222,"line":223},[220,59948,261],{"class":260},[220,59950,9763],{"class":264},[220,59952,268],{"class":260},[220,59954,9768],{"class":230},[220,59956,59957],{"class":222,"line":179},[220,59958,647],{"emptyLinePlaceholder":194},[220,59960,59961,59963,59965,59967,59969,59971],{"class":222,"line":389},[220,59962,1735],{"class":260},[220,59964,1738],{"class":420},[220,59966,1741],{"class":260},[220,59968,1744],{"class":260},[220,59970,1747],{"class":226},[220,59972,1750],{"class":264},[220,59974,59975],{"class":222,"line":399},[220,59976,1765],{"class":264},[220,59978,59979,59981,59984,59986,59988],{"class":222,"line":644},[220,59980,1770],{"class":264},[220,59982,59983],{"class":230},"'RadialGradient'",[220,59985,5787],{"class":264},[220,59987,6923],{"class":420},[220,59989,1782],{"class":264},[220,59991,59992],{"class":222,"line":650},[220,59993,1787],{"class":264},[220,59995,59996],{"class":222,"line":656},[220,59997,1792],{"class":264},[1504,59999,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60001},[60002,60003],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":59755,"description":59763},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":60010,"title":60011,"body":60012,"category":31677,"componentType":24147,"description":60019,"extension":191,"meta":60336,"navigation":194,"path":60337,"requiresChild":194,"seo":60338,"stem":60339,"__hash__":60340},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":60013,"toc":60332},[60014,60017,60020,60022,60024,60027,60029,60330],[11,60015,60011],{"id":60016},"rectangularcoordinates",[15,60018,60019],{},"Convert polar coordinates back to rectangular space",[30192,60021],{"component":60011},[23,60023,30196],{"id":24798},[30198,60025],{":props":60026},"[{\"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,60028,30204],{"id":30203},[246,60030,60031,60087,60146,60202,60260],{":tabs":1557},[212,60032,60034],{"className":334,"code":60033,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,60035,60036,60044,60051,60059,60063,60071,60079],{"__ignoreMap":178},[220,60037,60038,60040,60042],{"class":222,"line":223},[220,60039,343],{"class":264},[220,60041,347],{"class":346},[220,60043,359],{"class":264},[220,60045,60046,60048],{"class":222,"line":179},[220,60047,364],{"class":264},[220,60049,60050],{"class":346},"RectangularCoordinates\n",[220,60052,60053,60055,60057],{"class":222,"line":389},[220,60054,18633],{"class":226},[220,60056,353],{"class":264},[220,60058,33544],{"class":230},[220,60060,60061],{"class":222,"line":399},[220,60062,30240],{"class":264},[220,60064,60065,60067,60069],{"class":222,"line":644},[220,60066,2550],{"class":264},[220,60068,2553],{"class":346},[220,60070,386],{"class":264},[220,60072,60073,60075,60077],{"class":222,"line":650},[220,60074,2567],{"class":264},[220,60076,60011],{"class":346},[220,60078,359],{"class":264},[220,60080,60081,60083,60085],{"class":222,"line":656},[220,60082,402],{"class":264},[220,60084,347],{"class":346},[220,60086,359],{"class":264},[212,60088,60090],{"className":409,"code":60089,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,60091,60092,60100,60106,60118,60122,60130,60138],{"__ignoreMap":178},[220,60093,60094,60096,60098],{"class":222,"line":223},[220,60095,343],{"class":264},[220,60097,347],{"class":420},[220,60099,359],{"class":264},[220,60101,60102,60104],{"class":222,"line":179},[220,60103,364],{"class":264},[220,60105,60050],{"class":420},[220,60107,60108,60110,60112,60114,60116],{"class":222,"line":389},[220,60109,18744],{"class":226},[220,60111,353],{"class":260},[220,60113,743],{"class":264},[220,60115,6923],{"class":420},[220,60117,749],{"class":264},[220,60119,60120],{"class":222,"line":399},[220,60121,30240],{"class":264},[220,60123,60124,60126,60128],{"class":222,"line":644},[220,60125,2550],{"class":264},[220,60127,2553],{"class":420},[220,60129,386],{"class":264},[220,60131,60132,60134,60136],{"class":222,"line":650},[220,60133,2567],{"class":264},[220,60135,60011],{"class":420},[220,60137,359],{"class":264},[220,60139,60140,60142,60144],{"class":222,"line":656},[220,60141,402],{"class":264},[220,60143,347],{"class":420},[220,60145,359],{"class":264},[212,60147,60148],{"className":2844,"code":60089,"language":2846,"meta":178,"style":178},[99,60149,60150,60158,60164,60174,60178,60186,60194],{"__ignoreMap":178},[220,60151,60152,60154,60156],{"class":222,"line":223},[220,60153,343],{"class":264},[220,60155,347],{"class":420},[220,60157,359],{"class":264},[220,60159,60160,60162],{"class":222,"line":179},[220,60161,364],{"class":264},[220,60163,60050],{"class":420},[220,60165,60166,60168,60170,60172],{"class":222,"line":389},[220,60167,18744],{"class":226},[220,60169,28138],{"class":264},[220,60171,6923],{"class":420},[220,60173,749],{"class":264},[220,60175,60176],{"class":222,"line":399},[220,60177,30240],{"class":264},[220,60179,60180,60182,60184],{"class":222,"line":644},[220,60181,2550],{"class":264},[220,60183,2553],{"class":420},[220,60185,386],{"class":264},[220,60187,60188,60190,60192],{"class":222,"line":650},[220,60189,2567],{"class":264},[220,60191,60011],{"class":420},[220,60193,359],{"class":264},[220,60195,60196,60198,60200],{"class":222,"line":656},[220,60197,402],{"class":264},[220,60199,347],{"class":420},[220,60201,359],{"class":264},[212,60203,60204],{"className":468,"code":60089,"language":469,"meta":178,"style":178},[99,60205,60206,60214,60220,60232,60236,60244,60252],{"__ignoreMap":178},[220,60207,60208,60210,60212],{"class":222,"line":223},[220,60209,343],{"class":264},[220,60211,347],{"class":420},[220,60213,359],{"class":264},[220,60215,60216,60218],{"class":222,"line":179},[220,60217,364],{"class":264},[220,60219,60050],{"class":420},[220,60221,60222,60224,60226,60228,60230],{"class":222,"line":389},[220,60223,18744],{"class":226},[220,60225,353],{"class":260},[220,60227,743],{"class":264},[220,60229,6923],{"class":420},[220,60231,749],{"class":264},[220,60233,60234],{"class":222,"line":399},[220,60235,30240],{"class":264},[220,60237,60238,60240,60242],{"class":222,"line":644},[220,60239,2550],{"class":264},[220,60241,2553],{"class":420},[220,60243,386],{"class":264},[220,60245,60246,60248,60250],{"class":222,"line":650},[220,60247,2567],{"class":264},[220,60249,60011],{"class":420},[220,60251,359],{"class":264},[220,60253,60254,60256,60258],{"class":222,"line":656},[220,60255,402],{"class":264},[220,60257,347],{"class":420},[220,60259,359],{"class":264},[212,60261,60263],{"className":251,"code":60262,"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,60264,60265,60275,60279,60293,60297,60310,60318,60322,60326],{"__ignoreMap":178},[220,60266,60267,60269,60271,60273],{"class":222,"line":223},[220,60268,261],{"class":260},[220,60270,9763],{"class":264},[220,60272,268],{"class":260},[220,60274,9768],{"class":230},[220,60276,60277],{"class":222,"line":179},[220,60278,647],{"emptyLinePlaceholder":194},[220,60280,60281,60283,60285,60287,60289,60291],{"class":222,"line":389},[220,60282,1735],{"class":260},[220,60284,1738],{"class":420},[220,60286,1741],{"class":260},[220,60288,1744],{"class":260},[220,60290,1747],{"class":226},[220,60292,1750],{"class":264},[220,60294,60295],{"class":222,"line":399},[220,60296,1765],{"class":264},[220,60298,60299,60301,60304,60306,60308],{"class":222,"line":644},[220,60300,1770],{"class":264},[220,60302,60303],{"class":230},"'RectangularCoordinates'",[220,60305,30484],{"class":264},[220,60307,6923],{"class":420},[220,60309,5792],{"class":264},[220,60311,60312,60314,60316],{"class":222,"line":650},[220,60313,5260],{"class":264},[220,60315,3206],{"class":230},[220,60317,2465],{"class":264},[220,60319,60320],{"class":222,"line":656},[220,60321,5277],{"class":264},[220,60323,60324],{"class":222,"line":673},[220,60325,1787],{"class":264},[220,60327,60328],{"class":222,"line":682},[220,60329,1792],{"class":264},[1504,60331,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60333},[60334,60335],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":60011,"description":60019},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":60342,"title":60343,"body":60344,"category":31087,"componentType":24147,"description":60351,"extension":191,"meta":60612,"navigation":194,"path":60613,"requiresChild":194,"seo":60614,"stem":60615,"__hash__":60616},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":60345,"toc":60608},[60346,60349,60352,60354,60356,60359,60361,60606],[11,60347,60343],{"id":60348},"reflectiveplane",[15,60350,60351],{},"Reflective floor that mirrors the content above it",[30192,60353],{"component":60343},[23,60355,30196],{"id":24798},[30198,60357],{":props":60358},"[{\"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,60360,30204],{"id":30203},[246,60362,60363,60408,60452,60496,60540],{":tabs":1557},[212,60364,60366],{"className":334,"code":60365,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,60367,60368,60376,60384,60392,60400],{"__ignoreMap":178},[220,60369,60370,60372,60374],{"class":222,"line":223},[220,60371,343],{"class":264},[220,60373,347],{"class":346},[220,60375,359],{"class":264},[220,60377,60378,60380,60382],{"class":222,"line":179},[220,60379,364],{"class":264},[220,60381,60343],{"class":346},[220,60383,359],{"class":264},[220,60385,60386,60388,60390],{"class":222,"line":389},[220,60387,2550],{"class":264},[220,60389,2553],{"class":346},[220,60391,386],{"class":264},[220,60393,60394,60396,60398],{"class":222,"line":399},[220,60395,2567],{"class":264},[220,60397,60343],{"class":346},[220,60399,359],{"class":264},[220,60401,60402,60404,60406],{"class":222,"line":644},[220,60403,402],{"class":264},[220,60405,347],{"class":346},[220,60407,359],{"class":264},[212,60409,60410],{"className":409,"code":60365,"language":411,"meta":178,"style":178},[99,60411,60412,60420,60428,60436,60444],{"__ignoreMap":178},[220,60413,60414,60416,60418],{"class":222,"line":223},[220,60415,343],{"class":264},[220,60417,347],{"class":420},[220,60419,359],{"class":264},[220,60421,60422,60424,60426],{"class":222,"line":179},[220,60423,364],{"class":264},[220,60425,60343],{"class":420},[220,60427,359],{"class":264},[220,60429,60430,60432,60434],{"class":222,"line":389},[220,60431,2550],{"class":264},[220,60433,2553],{"class":420},[220,60435,386],{"class":264},[220,60437,60438,60440,60442],{"class":222,"line":399},[220,60439,2567],{"class":264},[220,60441,60343],{"class":420},[220,60443,359],{"class":264},[220,60445,60446,60448,60450],{"class":222,"line":644},[220,60447,402],{"class":264},[220,60449,347],{"class":420},[220,60451,359],{"class":264},[212,60453,60454],{"className":2844,"code":60365,"language":2846,"meta":178,"style":178},[99,60455,60456,60464,60472,60480,60488],{"__ignoreMap":178},[220,60457,60458,60460,60462],{"class":222,"line":223},[220,60459,343],{"class":264},[220,60461,347],{"class":420},[220,60463,359],{"class":264},[220,60465,60466,60468,60470],{"class":222,"line":179},[220,60467,364],{"class":264},[220,60469,60343],{"class":420},[220,60471,359],{"class":264},[220,60473,60474,60476,60478],{"class":222,"line":389},[220,60475,2550],{"class":264},[220,60477,2553],{"class":420},[220,60479,386],{"class":264},[220,60481,60482,60484,60486],{"class":222,"line":399},[220,60483,2567],{"class":264},[220,60485,60343],{"class":420},[220,60487,359],{"class":264},[220,60489,60490,60492,60494],{"class":222,"line":644},[220,60491,402],{"class":264},[220,60493,347],{"class":420},[220,60495,359],{"class":264},[212,60497,60498],{"className":468,"code":60365,"language":469,"meta":178,"style":178},[99,60499,60500,60508,60516,60524,60532],{"__ignoreMap":178},[220,60501,60502,60504,60506],{"class":222,"line":223},[220,60503,343],{"class":264},[220,60505,347],{"class":420},[220,60507,359],{"class":264},[220,60509,60510,60512,60514],{"class":222,"line":179},[220,60511,364],{"class":264},[220,60513,60343],{"class":420},[220,60515,359],{"class":264},[220,60517,60518,60520,60522],{"class":222,"line":389},[220,60519,2550],{"class":264},[220,60521,2553],{"class":420},[220,60523,386],{"class":264},[220,60525,60526,60528,60530],{"class":222,"line":399},[220,60527,2567],{"class":264},[220,60529,60343],{"class":420},[220,60531,359],{"class":264},[220,60533,60534,60536,60538],{"class":222,"line":644},[220,60535,402],{"class":264},[220,60537,347],{"class":420},[220,60539,359],{"class":264},[212,60541,60543],{"className":251,"code":60542,"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,60544,60545,60555,60559,60573,60577,60586,60594,60598,60602],{"__ignoreMap":178},[220,60546,60547,60549,60551,60553],{"class":222,"line":223},[220,60548,261],{"class":260},[220,60550,9763],{"class":264},[220,60552,268],{"class":260},[220,60554,9768],{"class":230},[220,60556,60557],{"class":222,"line":179},[220,60558,647],{"emptyLinePlaceholder":194},[220,60560,60561,60563,60565,60567,60569,60571],{"class":222,"line":389},[220,60562,1735],{"class":260},[220,60564,1738],{"class":420},[220,60566,1741],{"class":260},[220,60568,1744],{"class":260},[220,60570,1747],{"class":226},[220,60572,1750],{"class":264},[220,60574,60575],{"class":222,"line":399},[220,60576,1765],{"class":264},[220,60578,60579,60581,60584],{"class":222,"line":644},[220,60580,1770],{"class":264},[220,60582,60583],{"class":230},"'ReflectivePlane'",[220,60585,5255],{"class":264},[220,60587,60588,60590,60592],{"class":222,"line":650},[220,60589,5260],{"class":264},[220,60591,3206],{"class":230},[220,60593,2465],{"class":264},[220,60595,60596],{"class":222,"line":656},[220,60597,5277],{"class":264},[220,60599,60600],{"class":222,"line":673},[220,60601,1787],{"class":264},[220,60603,60604],{"class":222,"line":682},[220,60605,1792],{"class":264},[1504,60607,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":60609},[60610,60611],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":60343,"description":60351},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":60618,"title":60619,"body":60620,"category":31677,"componentType":24147,"description":60627,"extension":191,"meta":60944,"navigation":194,"path":60945,"requiresChild":194,"seo":60946,"stem":60947,"__hash__":60948},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":60621,"toc":60940},[60622,60625,60628,60630,60632,60635,60637,60938],[11,60623,60619],{"id":60624},"repeater",[15,60626,60627],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[30192,60629],{"component":60619},[23,60631,30196],{"id":24798},[30198,60633],{":props":60634},"[{\"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,60636,30204],{"id":30203},[246,60638,60639,60695,60754,60810,60868],{":tabs":1557},[212,60640,60642],{"className":334,"code":60641,"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,60643,60644,60652,60659,60667,60671,60679,60687],{"__ignoreMap":178},[220,60645,60646,60648,60650],{"class":222,"line":223},[220,60647,343],{"class":264},[220,60649,347],{"class":346},[220,60651,359],{"class":264},[220,60653,60654,60656],{"class":222,"line":179},[220,60655,364],{"class":264},[220,60657,60658],{"class":346},"Repeater\n",[220,60660,60661,60663,60665],{"class":222,"line":389},[220,60662,15666],{"class":226},[220,60664,353],{"class":264},[220,60666,37742],{"class":230},[220,60668,60669],{"class":222,"line":399},[220,60670,30240],{"class":264},[220,60672,60673,60675,60677],{"class":222,"line":644},[220,60674,2550],{"class":264},[220,60676,2553],{"class":346},[220,60678,386],{"class":264},[220,60680,60681,60683,60685],{"class":222,"line":650},[220,60682,2567],{"class":264},[220,60684,60619],{"class":346},[220,60686,359],{"class":264},[220,60688,60689,60691,60693],{"class":222,"line":656},[220,60690,402],{"class":264},[220,60692,347],{"class":346},[220,60694,359],{"class":264},[212,60696,60698],{"className":409,"code":60697,"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,60699,60700,60708,60714,60726,60730,60738,60746],{"__ignoreMap":178},[220,60701,60702,60704,60706],{"class":222,"line":223},[220,60703,343],{"class":264},[220,60705,347],{"class":420},[220,60707,359],{"class":264},[220,60709,60710,60712],{"class":222,"line":179},[220,60711,364],{"class":264},[220,60713,60658],{"class":420},[220,60715,60716,60718,60720,60722,60724],{"class":222,"line":389},[220,60717,7892],{"class":226},[220,60719,353],{"class":260},[220,60721,743],{"class":264},[220,60723,20266],{"class":420},[220,60725,749],{"class":264},[220,60727,60728],{"class":222,"line":399},[220,60729,30240],{"class":264},[220,60731,60732,60734,60736],{"class":222,"line":644},[220,60733,2550],{"class":264},[220,60735,2553],{"class":420},[220,60737,386],{"class":264},[220,60739,60740,60742,60744],{"class":222,"line":650},[220,60741,2567],{"class":264},[220,60743,60619],{"class":420},[220,60745,359],{"class":264},[220,60747,60748,60750,60752],{"class":222,"line":656},[220,60749,402],{"class":264},[220,60751,347],{"class":420},[220,60753,359],{"class":264},[212,60755,60756],{"className":2844,"code":60697,"language":2846,"meta":178,"style":178},[99,60757,60758,60766,60772,60782,60786,60794,60802],{"__ignoreMap":178},[220,60759,60760,60762,60764],{"class":222,"line":223},[220,60761,343],{"class":264},[220,60763,347],{"class":420},[220,60765,359],{"class":264},[220,60767,60768,60770],{"class":222,"line":179},[220,60769,364],{"class":264},[220,60771,60658],{"class":420},[220,60773,60774,60776,60778,60780],{"class":222,"line":389},[220,60775,7892],{"class":226},[220,60777,28138],{"class":264},[220,60779,20266],{"class":420},[220,60781,749],{"class":264},[220,60783,60784],{"class":222,"line":399},[220,60785,30240],{"class":264},[220,60787,60788,60790,60792],{"class":222,"line":644},[220,60789,2550],{"class":264},[220,60791,2553],{"class":420},[220,60793,386],{"class":264},[220,60795,60796,60798,60800],{"class":222,"line":650},[220,60797,2567],{"class":264},[220,60799,60619],{"class":420},[220,60801,359],{"class":264},[220,60803,60804,60806,60808],{"class":222,"line":656},[220,60805,402],{"class":264},[220,60807,347],{"class":420},[220,60809,359],{"class":264},[212,60811,60812],{"className":468,"code":60697,"language":469,"meta":178,"style":178},[99,60813,60814,60822,60828,60840,60844,60852,60860],{"__ignoreMap":178},[220,60815,60816,60818,60820],{"class":222,"line":223},[220,60817,343],{"class":264},[220,60819,347],{"class":420},[220,60821,359],{"class":264},[220,60823,60824,60826],{"class":222,"line":179},[220,60825,364],{"class":264},[220,60827,60658],{"class":420},[220,60829,60830,60832,60834,60836,60838],{"class":222,"line":389},[220,60831,7892],{"class":226},[220,60833,353],{"class":260},[220,60835,743],{"class":264},[220,60837,20266],{"class":420},[220,60839,749],{"class":264},[220,60841,60842],{"class":222,"line":399},[220,60843,30240],{"class":264},[220,60845,60846,60848,60850],{"class":222,"line":644},[220,60847,2550],{"class":264},[220,60849,2553],{"class":420},[220,60851,386],{"class":264},[220,60853,60854,60856,60858],{"class":222,"line":650},[220,60855,2567],{"class":264},[220,60857,60619],{"class":420},[220,60859,359],{"class":264},[220,60861,60862,60864,60866],{"class":222,"line":656},[220,60863,402],{"class":264},[220,60865,347],{"class":420},[220,60867,359],{"class":264},[212,60869,60871],{"className":251,"code":60870,"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,60872,60873,60883,60887,60901,60905,60918,60926,60930,60934],{"__ignoreMap":178},[220,60874,60875,60877,60879,60881],{"class":222,"line":223},[220,60876,261],{"class":260},[220,60878,9763],{"class":264},[220,60880,268],{"class":260},[220,60882,9768],{"class":230},[220,60884,60885],{"class":222,"line":179},[220,60886,647],{"emptyLinePlaceholder":194},[220,60888,60889,60891,60893,60895,60897,60899],{"class":222,"line":389},[220,60890,1735],{"class":260},[220,60892,1738],{"class":420},[220,60894,1741],{"class":260},[220,60896,1744],{"class":260},[220,60898,1747],{"class":226},[220,60900,1750],{"class":264},[220,60902,60903],{"class":222,"line":399},[220,60904,1765],{"class":264},[220,60906,60907,60909,60912,60914,60916],{"class":222,"line":644},[220,60908,1770],{"class":264},[220,60910,60911],{"class":230},"'Repeater'",[220,60913,5787],{"class":264},[220,60915,20266],{"class":420},[220,60917,5792],{"class":264},[220,60919,60920,60922,60924],{"class":222,"line":650},[220,60921,5260],{"class":264},[220,60923,3206],{"class":230},[220,60925,2465],{"class":264},[220,60927,60928],{"class":222,"line":656},[220,60929,5277],{"class":264},[220,60931,60932],{"class":222,"line":673},[220,60933,1787],{"class":264},[220,60935,60936],{"class":222,"line":682},[220,60937,1792],{"class":264},[1504,60939,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60941},[60942,60943],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":60619,"description":60627},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":60950,"title":60951,"body":60952,"category":14164,"componentType":24141,"description":60959,"extension":191,"meta":61236,"navigation":194,"path":61237,"requiresChild":30811,"seo":61238,"stem":61239,"__hash__":61240},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":60953,"toc":61232},[60954,60957,60960,60962,60964,60967,60969,61230],[11,60955,60951],{"id":60956},"ring",[15,60958,60959],{},"Annular ring (donut) with adjustable radius and band thickness",[30192,60961],{"component":60951},[23,60963,30196],{"id":24798},[30198,60965],{":props":60966},"[{\"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,60968,30204],{"id":30203},[246,60970,60971,61019,61070,61118,61168],{":tabs":1557},[212,60972,60974],{"className":334,"code":60973,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,60975,60976,60984,60991,60999,61007,61011],{"__ignoreMap":178},[220,60977,60978,60980,60982],{"class":222,"line":223},[220,60979,343],{"class":264},[220,60981,347],{"class":346},[220,60983,359],{"class":264},[220,60985,60986,60988],{"class":222,"line":179},[220,60987,364],{"class":264},[220,60989,60990],{"class":346},"Ring\n",[220,60992,60993,60995,60997],{"class":222,"line":389},[220,60994,7882],{"class":226},[220,60996,353],{"class":264},[220,60998,7838],{"class":230},[220,61000,61001,61003,61005],{"class":222,"line":399},[220,61002,15666],{"class":226},[220,61004,353],{"class":264},[220,61006,37742],{"class":230},[220,61008,61009],{"class":222,"line":644},[220,61010,1234],{"class":264},[220,61012,61013,61015,61017],{"class":222,"line":650},[220,61014,402],{"class":264},[220,61016,347],{"class":346},[220,61018,359],{"class":264},[212,61020,61022],{"className":409,"code":61021,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,61023,61024,61032,61038,61046,61058,61062],{"__ignoreMap":178},[220,61025,61026,61028,61030],{"class":222,"line":223},[220,61027,343],{"class":264},[220,61029,347],{"class":420},[220,61031,359],{"class":264},[220,61033,61034,61036],{"class":222,"line":179},[220,61035,364],{"class":264},[220,61037,60990],{"class":420},[220,61039,61040,61042,61044],{"class":222,"line":389},[220,61041,7882],{"class":226},[220,61043,353],{"class":260},[220,61045,7838],{"class":230},[220,61047,61048,61050,61052,61054,61056],{"class":222,"line":399},[220,61049,7892],{"class":226},[220,61051,353],{"class":260},[220,61053,743],{"class":264},[220,61055,20266],{"class":420},[220,61057,749],{"class":264},[220,61059,61060],{"class":222,"line":644},[220,61061,1234],{"class":264},[220,61063,61064,61066,61068],{"class":222,"line":650},[220,61065,402],{"class":264},[220,61067,347],{"class":420},[220,61069,359],{"class":264},[212,61071,61072],{"className":2844,"code":61021,"language":2846,"meta":178,"style":178},[99,61073,61074,61082,61088,61096,61106,61110],{"__ignoreMap":178},[220,61075,61076,61078,61080],{"class":222,"line":223},[220,61077,343],{"class":264},[220,61079,347],{"class":420},[220,61081,359],{"class":264},[220,61083,61084,61086],{"class":222,"line":179},[220,61085,364],{"class":264},[220,61087,60990],{"class":420},[220,61089,61090,61092,61094],{"class":222,"line":389},[220,61091,7882],{"class":226},[220,61093,353],{"class":264},[220,61095,7838],{"class":230},[220,61097,61098,61100,61102,61104],{"class":222,"line":399},[220,61099,7892],{"class":226},[220,61101,28138],{"class":264},[220,61103,20266],{"class":420},[220,61105,749],{"class":264},[220,61107,61108],{"class":222,"line":644},[220,61109,1234],{"class":264},[220,61111,61112,61114,61116],{"class":222,"line":650},[220,61113,402],{"class":264},[220,61115,347],{"class":420},[220,61117,359],{"class":264},[212,61119,61120],{"className":468,"code":61021,"language":469,"meta":178,"style":178},[99,61121,61122,61130,61136,61144,61156,61160],{"__ignoreMap":178},[220,61123,61124,61126,61128],{"class":222,"line":223},[220,61125,343],{"class":264},[220,61127,347],{"class":420},[220,61129,359],{"class":264},[220,61131,61132,61134],{"class":222,"line":179},[220,61133,364],{"class":264},[220,61135,60990],{"class":420},[220,61137,61138,61140,61142],{"class":222,"line":389},[220,61139,7882],{"class":226},[220,61141,353],{"class":260},[220,61143,7838],{"class":230},[220,61145,61146,61148,61150,61152,61154],{"class":222,"line":399},[220,61147,7892],{"class":226},[220,61149,353],{"class":260},[220,61151,743],{"class":264},[220,61153,20266],{"class":420},[220,61155,749],{"class":264},[220,61157,61158],{"class":222,"line":644},[220,61159,1234],{"class":264},[220,61161,61162,61164,61166],{"class":222,"line":650},[220,61163,402],{"class":264},[220,61165,347],{"class":420},[220,61167,359],{"class":264},[212,61169,61171],{"className":251,"code":61170,"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,61172,61173,61183,61187,61201,61205,61222,61226],{"__ignoreMap":178},[220,61174,61175,61177,61179,61181],{"class":222,"line":223},[220,61176,261],{"class":260},[220,61178,9763],{"class":264},[220,61180,268],{"class":260},[220,61182,9768],{"class":230},[220,61184,61185],{"class":222,"line":179},[220,61186,647],{"emptyLinePlaceholder":194},[220,61188,61189,61191,61193,61195,61197,61199],{"class":222,"line":389},[220,61190,1735],{"class":260},[220,61192,1738],{"class":420},[220,61194,1741],{"class":260},[220,61196,1744],{"class":260},[220,61198,1747],{"class":226},[220,61200,1750],{"class":264},[220,61202,61203],{"class":222,"line":399},[220,61204,1765],{"class":264},[220,61206,61207,61209,61212,61214,61216,61218,61220],{"class":222,"line":644},[220,61208,1770],{"class":264},[220,61210,61211],{"class":230},"'Ring'",[220,61213,1776],{"class":264},[220,61215,8417],{"class":230},[220,61217,4812],{"class":264},[220,61219,20266],{"class":420},[220,61221,1782],{"class":264},[220,61223,61224],{"class":222,"line":650},[220,61225,1787],{"class":264},[220,61227,61228],{"class":222,"line":656},[220,61229,1792],{"class":264},[1504,61231,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61233},[61234,61235],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":60951,"description":60959},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":61242,"title":61243,"body":61244,"category":31344,"componentType":24141,"description":61251,"extension":191,"meta":61436,"navigation":194,"path":61437,"requiresChild":30811,"seo":61438,"stem":61439,"__hash__":61440},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":61245,"toc":61432},[61246,61249,61252,61254,61256,61259,61261,61430],[11,61247,61243],{"id":61248},"ripples",[15,61250,61251],{},"Concentric animated ripples emanating from a point",[30192,61253],{"component":61243},[23,61255,30196],{"id":24798},[30198,61257],{":props":61258},"[{\"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,61260,30204],{"id":30203},[246,61262,61263,61292,61320,61348,61376],{":tabs":1557},[212,61264,61266],{"className":334,"code":61265,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,61267,61268,61276,61284],{"__ignoreMap":178},[220,61269,61270,61272,61274],{"class":222,"line":223},[220,61271,343],{"class":264},[220,61273,347],{"class":346},[220,61275,359],{"class":264},[220,61277,61278,61280,61282],{"class":222,"line":179},[220,61279,364],{"class":264},[220,61281,61243],{"class":346},[220,61283,386],{"class":264},[220,61285,61286,61288,61290],{"class":222,"line":389},[220,61287,402],{"class":264},[220,61289,347],{"class":346},[220,61291,359],{"class":264},[212,61293,61294],{"className":409,"code":61265,"language":411,"meta":178,"style":178},[99,61295,61296,61304,61312],{"__ignoreMap":178},[220,61297,61298,61300,61302],{"class":222,"line":223},[220,61299,343],{"class":264},[220,61301,347],{"class":420},[220,61303,359],{"class":264},[220,61305,61306,61308,61310],{"class":222,"line":179},[220,61307,364],{"class":264},[220,61309,61243],{"class":420},[220,61311,386],{"class":264},[220,61313,61314,61316,61318],{"class":222,"line":389},[220,61315,402],{"class":264},[220,61317,347],{"class":420},[220,61319,359],{"class":264},[212,61321,61322],{"className":2844,"code":61265,"language":2846,"meta":178,"style":178},[99,61323,61324,61332,61340],{"__ignoreMap":178},[220,61325,61326,61328,61330],{"class":222,"line":223},[220,61327,343],{"class":264},[220,61329,347],{"class":420},[220,61331,359],{"class":264},[220,61333,61334,61336,61338],{"class":222,"line":179},[220,61335,364],{"class":264},[220,61337,61243],{"class":420},[220,61339,386],{"class":264},[220,61341,61342,61344,61346],{"class":222,"line":389},[220,61343,402],{"class":264},[220,61345,347],{"class":420},[220,61347,359],{"class":264},[212,61349,61350],{"className":468,"code":61265,"language":469,"meta":178,"style":178},[99,61351,61352,61360,61368],{"__ignoreMap":178},[220,61353,61354,61356,61358],{"class":222,"line":223},[220,61355,343],{"class":264},[220,61357,347],{"class":420},[220,61359,359],{"class":264},[220,61361,61362,61364,61366],{"class":222,"line":179},[220,61363,364],{"class":264},[220,61365,61243],{"class":420},[220,61367,386],{"class":264},[220,61369,61370,61372,61374],{"class":222,"line":389},[220,61371,402],{"class":264},[220,61373,347],{"class":420},[220,61375,359],{"class":264},[212,61377,61379],{"className":251,"code":61378,"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,61380,61381,61391,61395,61409,61413,61422,61426],{"__ignoreMap":178},[220,61382,61383,61385,61387,61389],{"class":222,"line":223},[220,61384,261],{"class":260},[220,61386,9763],{"class":264},[220,61388,268],{"class":260},[220,61390,9768],{"class":230},[220,61392,61393],{"class":222,"line":179},[220,61394,647],{"emptyLinePlaceholder":194},[220,61396,61397,61399,61401,61403,61405,61407],{"class":222,"line":389},[220,61398,1735],{"class":260},[220,61400,1738],{"class":420},[220,61402,1741],{"class":260},[220,61404,1744],{"class":260},[220,61406,1747],{"class":226},[220,61408,1750],{"class":264},[220,61410,61411],{"class":222,"line":399},[220,61412,1765],{"class":264},[220,61414,61415,61417,61420],{"class":222,"line":644},[220,61416,1770],{"class":264},[220,61418,61419],{"class":230},"'Ripples'",[220,61421,2465],{"class":264},[220,61423,61424],{"class":222,"line":650},[220,61425,1787],{"class":264},[220,61427,61428],{"class":222,"line":656},[220,61429,1792],{"class":264},[1504,61431,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":61433},[61434,61435],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":61243,"description":61251},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":61442,"title":61443,"body":61444,"category":14164,"componentType":24141,"description":61451,"extension":191,"meta":61681,"navigation":194,"path":61682,"requiresChild":30811,"seo":61683,"stem":61684,"__hash__":61685},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":61445,"toc":61677},[61446,61449,61452,61454,61456,61459,61461,61675],[11,61447,61443],{"id":61448},"roundedrect",[15,61450,61451],{},"Rounded rectangle with adjustable width, height, and corner rounding",[30192,61453],{"component":61443},[23,61455,30196],{"id":24798},[30198,61457],{":props":61458},"[{\"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,61460,30204],{"id":30203},[246,61462,61463,61503,61541,61579,61617],{":tabs":1557},[212,61464,61466],{"className":334,"code":61465,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,61467,61468,61476,61483,61491,61495],{"__ignoreMap":178},[220,61469,61470,61472,61474],{"class":222,"line":223},[220,61471,343],{"class":264},[220,61473,347],{"class":346},[220,61475,359],{"class":264},[220,61477,61478,61480],{"class":222,"line":179},[220,61479,364],{"class":264},[220,61481,61482],{"class":346},"RoundedRect\n",[220,61484,61485,61487,61489],{"class":222,"line":389},[220,61486,7882],{"class":226},[220,61488,353],{"class":264},[220,61490,7838],{"class":230},[220,61492,61493],{"class":222,"line":399},[220,61494,1234],{"class":264},[220,61496,61497,61499,61501],{"class":222,"line":644},[220,61498,402],{"class":264},[220,61500,347],{"class":346},[220,61502,359],{"class":264},[212,61504,61505],{"className":409,"code":61465,"language":411,"meta":178,"style":178},[99,61506,61507,61515,61521,61529,61533],{"__ignoreMap":178},[220,61508,61509,61511,61513],{"class":222,"line":223},[220,61510,343],{"class":264},[220,61512,347],{"class":420},[220,61514,359],{"class":264},[220,61516,61517,61519],{"class":222,"line":179},[220,61518,364],{"class":264},[220,61520,61482],{"class":420},[220,61522,61523,61525,61527],{"class":222,"line":389},[220,61524,7882],{"class":226},[220,61526,353],{"class":260},[220,61528,7838],{"class":230},[220,61530,61531],{"class":222,"line":399},[220,61532,1234],{"class":264},[220,61534,61535,61537,61539],{"class":222,"line":644},[220,61536,402],{"class":264},[220,61538,347],{"class":420},[220,61540,359],{"class":264},[212,61542,61543],{"className":2844,"code":61465,"language":2846,"meta":178,"style":178},[99,61544,61545,61553,61559,61567,61571],{"__ignoreMap":178},[220,61546,61547,61549,61551],{"class":222,"line":223},[220,61548,343],{"class":264},[220,61550,347],{"class":420},[220,61552,359],{"class":264},[220,61554,61555,61557],{"class":222,"line":179},[220,61556,364],{"class":264},[220,61558,61482],{"class":420},[220,61560,61561,61563,61565],{"class":222,"line":389},[220,61562,7882],{"class":226},[220,61564,353],{"class":264},[220,61566,7838],{"class":230},[220,61568,61569],{"class":222,"line":399},[220,61570,1234],{"class":264},[220,61572,61573,61575,61577],{"class":222,"line":644},[220,61574,402],{"class":264},[220,61576,347],{"class":420},[220,61578,359],{"class":264},[212,61580,61581],{"className":468,"code":61465,"language":469,"meta":178,"style":178},[99,61582,61583,61591,61597,61605,61609],{"__ignoreMap":178},[220,61584,61585,61587,61589],{"class":222,"line":223},[220,61586,343],{"class":264},[220,61588,347],{"class":420},[220,61590,359],{"class":264},[220,61592,61593,61595],{"class":222,"line":179},[220,61594,364],{"class":264},[220,61596,61482],{"class":420},[220,61598,61599,61601,61603],{"class":222,"line":389},[220,61600,7882],{"class":226},[220,61602,353],{"class":260},[220,61604,7838],{"class":230},[220,61606,61607],{"class":222,"line":399},[220,61608,1234],{"class":264},[220,61610,61611,61613,61615],{"class":222,"line":644},[220,61612,402],{"class":264},[220,61614,347],{"class":420},[220,61616,359],{"class":264},[212,61618,61620],{"className":251,"code":61619,"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,61621,61622,61632,61636,61650,61654,61667,61671],{"__ignoreMap":178},[220,61623,61624,61626,61628,61630],{"class":222,"line":223},[220,61625,261],{"class":260},[220,61627,9763],{"class":264},[220,61629,268],{"class":260},[220,61631,9768],{"class":230},[220,61633,61634],{"class":222,"line":179},[220,61635,647],{"emptyLinePlaceholder":194},[220,61637,61638,61640,61642,61644,61646,61648],{"class":222,"line":389},[220,61639,1735],{"class":260},[220,61641,1738],{"class":420},[220,61643,1741],{"class":260},[220,61645,1744],{"class":260},[220,61647,1747],{"class":226},[220,61649,1750],{"class":264},[220,61651,61652],{"class":222,"line":399},[220,61653,1765],{"class":264},[220,61655,61656,61658,61661,61663,61665],{"class":222,"line":644},[220,61657,1770],{"class":264},[220,61659,61660],{"class":230},"'RoundedRect'",[220,61662,1776],{"class":264},[220,61664,8417],{"class":230},[220,61666,1782],{"class":264},[220,61668,61669],{"class":222,"line":650},[220,61670,1787],{"class":264},[220,61672,61673],{"class":222,"line":656},[220,61674,1792],{"class":264},[1504,61676,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61678},[61679,61680],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":61443,"description":61451},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":61687,"title":61688,"body":61689,"category":33287,"componentType":24147,"description":61695,"extension":191,"meta":62012,"navigation":194,"path":62013,"requiresChild":194,"seo":62014,"stem":62015,"__hash__":62016},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":61690,"toc":62008},[61691,61693,61696,61698,61700,61703,61705,62006],[11,61692,61688],{"id":6305},[15,61694,61695],{},"Adjust color saturation intensity",[30192,61697],{"component":61688},[23,61699,30196],{"id":24798},[30198,61701],{":props":61702},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,61704,30204],{"id":30203},[246,61706,61707,61763,61822,61878,61936],{":tabs":1557},[212,61708,61710],{"className":334,"code":61709,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,61711,61712,61720,61727,61735,61739,61747,61755],{"__ignoreMap":178},[220,61713,61714,61716,61718],{"class":222,"line":223},[220,61715,343],{"class":264},[220,61717,347],{"class":346},[220,61719,359],{"class":264},[220,61721,61722,61724],{"class":222,"line":179},[220,61723,364],{"class":264},[220,61725,61726],{"class":346},"Saturation\n",[220,61728,61729,61731,61733],{"class":222,"line":389},[220,61730,18633],{"class":226},[220,61732,353],{"class":264},[220,61734,33544],{"class":230},[220,61736,61737],{"class":222,"line":399},[220,61738,30240],{"class":264},[220,61740,61741,61743,61745],{"class":222,"line":644},[220,61742,2550],{"class":264},[220,61744,2553],{"class":346},[220,61746,386],{"class":264},[220,61748,61749,61751,61753],{"class":222,"line":650},[220,61750,2567],{"class":264},[220,61752,61688],{"class":346},[220,61754,359],{"class":264},[220,61756,61757,61759,61761],{"class":222,"line":656},[220,61758,402],{"class":264},[220,61760,347],{"class":346},[220,61762,359],{"class":264},[212,61764,61766],{"className":409,"code":61765,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,61767,61768,61776,61782,61794,61798,61806,61814],{"__ignoreMap":178},[220,61769,61770,61772,61774],{"class":222,"line":223},[220,61771,343],{"class":264},[220,61773,347],{"class":420},[220,61775,359],{"class":264},[220,61777,61778,61780],{"class":222,"line":179},[220,61779,364],{"class":264},[220,61781,61726],{"class":420},[220,61783,61784,61786,61788,61790,61792],{"class":222,"line":389},[220,61785,18744],{"class":226},[220,61787,353],{"class":260},[220,61789,743],{"class":264},[220,61791,6923],{"class":420},[220,61793,749],{"class":264},[220,61795,61796],{"class":222,"line":399},[220,61797,30240],{"class":264},[220,61799,61800,61802,61804],{"class":222,"line":644},[220,61801,2550],{"class":264},[220,61803,2553],{"class":420},[220,61805,386],{"class":264},[220,61807,61808,61810,61812],{"class":222,"line":650},[220,61809,2567],{"class":264},[220,61811,61688],{"class":420},[220,61813,359],{"class":264},[220,61815,61816,61818,61820],{"class":222,"line":656},[220,61817,402],{"class":264},[220,61819,347],{"class":420},[220,61821,359],{"class":264},[212,61823,61824],{"className":2844,"code":61765,"language":2846,"meta":178,"style":178},[99,61825,61826,61834,61840,61850,61854,61862,61870],{"__ignoreMap":178},[220,61827,61828,61830,61832],{"class":222,"line":223},[220,61829,343],{"class":264},[220,61831,347],{"class":420},[220,61833,359],{"class":264},[220,61835,61836,61838],{"class":222,"line":179},[220,61837,364],{"class":264},[220,61839,61726],{"class":420},[220,61841,61842,61844,61846,61848],{"class":222,"line":389},[220,61843,18744],{"class":226},[220,61845,28138],{"class":264},[220,61847,6923],{"class":420},[220,61849,749],{"class":264},[220,61851,61852],{"class":222,"line":399},[220,61853,30240],{"class":264},[220,61855,61856,61858,61860],{"class":222,"line":644},[220,61857,2550],{"class":264},[220,61859,2553],{"class":420},[220,61861,386],{"class":264},[220,61863,61864,61866,61868],{"class":222,"line":650},[220,61865,2567],{"class":264},[220,61867,61688],{"class":420},[220,61869,359],{"class":264},[220,61871,61872,61874,61876],{"class":222,"line":656},[220,61873,402],{"class":264},[220,61875,347],{"class":420},[220,61877,359],{"class":264},[212,61879,61880],{"className":468,"code":61765,"language":469,"meta":178,"style":178},[99,61881,61882,61890,61896,61908,61912,61920,61928],{"__ignoreMap":178},[220,61883,61884,61886,61888],{"class":222,"line":223},[220,61885,343],{"class":264},[220,61887,347],{"class":420},[220,61889,359],{"class":264},[220,61891,61892,61894],{"class":222,"line":179},[220,61893,364],{"class":264},[220,61895,61726],{"class":420},[220,61897,61898,61900,61902,61904,61906],{"class":222,"line":389},[220,61899,18744],{"class":226},[220,61901,353],{"class":260},[220,61903,743],{"class":264},[220,61905,6923],{"class":420},[220,61907,749],{"class":264},[220,61909,61910],{"class":222,"line":399},[220,61911,30240],{"class":264},[220,61913,61914,61916,61918],{"class":222,"line":644},[220,61915,2550],{"class":264},[220,61917,2553],{"class":420},[220,61919,386],{"class":264},[220,61921,61922,61924,61926],{"class":222,"line":650},[220,61923,2567],{"class":264},[220,61925,61688],{"class":420},[220,61927,359],{"class":264},[220,61929,61930,61932,61934],{"class":222,"line":656},[220,61931,402],{"class":264},[220,61933,347],{"class":420},[220,61935,359],{"class":264},[212,61937,61939],{"className":251,"code":61938,"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,61940,61941,61951,61955,61969,61973,61986,61994,61998,62002],{"__ignoreMap":178},[220,61942,61943,61945,61947,61949],{"class":222,"line":223},[220,61944,261],{"class":260},[220,61946,9763],{"class":264},[220,61948,268],{"class":260},[220,61950,9768],{"class":230},[220,61952,61953],{"class":222,"line":179},[220,61954,647],{"emptyLinePlaceholder":194},[220,61956,61957,61959,61961,61963,61965,61967],{"class":222,"line":389},[220,61958,1735],{"class":260},[220,61960,1738],{"class":420},[220,61962,1741],{"class":260},[220,61964,1744],{"class":260},[220,61966,1747],{"class":226},[220,61968,1750],{"class":264},[220,61970,61971],{"class":222,"line":399},[220,61972,1765],{"class":264},[220,61974,61975,61977,61980,61982,61984],{"class":222,"line":644},[220,61976,1770],{"class":264},[220,61978,61979],{"class":230},"'Saturation'",[220,61981,30484],{"class":264},[220,61983,6923],{"class":420},[220,61985,5792],{"class":264},[220,61987,61988,61990,61992],{"class":222,"line":650},[220,61989,5260],{"class":264},[220,61991,3206],{"class":230},[220,61993,2465],{"class":264},[220,61995,61996],{"class":222,"line":656},[220,61997,5277],{"class":264},[220,61999,62000],{"class":222,"line":673},[220,62001,1787],{"class":264},[220,62003,62004],{"class":222,"line":682},[220,62005,1792],{"class":264},[1504,62007,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62009},[62010,62011],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":61688,"description":61695},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":62018,"title":62019,"body":62020,"category":31344,"componentType":24141,"description":62027,"extension":191,"meta":62212,"navigation":194,"path":62213,"requiresChild":30811,"seo":62214,"stem":62215,"__hash__":62216},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":62021,"toc":62208},[62022,62025,62028,62030,62032,62035,62037,62206],[11,62023,62019],{"id":62024},"scratches",[15,62026,62027],{},"Fine hairline scratches, like a worn film or scratched surface",[30192,62029],{"component":62019},[23,62031,30196],{"id":24798},[30198,62033],{":props":62034},"[{\"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,62036,30204],{"id":30203},[246,62038,62039,62068,62096,62124,62152],{":tabs":1557},[212,62040,62042],{"className":334,"code":62041,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,62043,62044,62052,62060],{"__ignoreMap":178},[220,62045,62046,62048,62050],{"class":222,"line":223},[220,62047,343],{"class":264},[220,62049,347],{"class":346},[220,62051,359],{"class":264},[220,62053,62054,62056,62058],{"class":222,"line":179},[220,62055,364],{"class":264},[220,62057,62019],{"class":346},[220,62059,386],{"class":264},[220,62061,62062,62064,62066],{"class":222,"line":389},[220,62063,402],{"class":264},[220,62065,347],{"class":346},[220,62067,359],{"class":264},[212,62069,62070],{"className":409,"code":62041,"language":411,"meta":178,"style":178},[99,62071,62072,62080,62088],{"__ignoreMap":178},[220,62073,62074,62076,62078],{"class":222,"line":223},[220,62075,343],{"class":264},[220,62077,347],{"class":420},[220,62079,359],{"class":264},[220,62081,62082,62084,62086],{"class":222,"line":179},[220,62083,364],{"class":264},[220,62085,62019],{"class":420},[220,62087,386],{"class":264},[220,62089,62090,62092,62094],{"class":222,"line":389},[220,62091,402],{"class":264},[220,62093,347],{"class":420},[220,62095,359],{"class":264},[212,62097,62098],{"className":2844,"code":62041,"language":2846,"meta":178,"style":178},[99,62099,62100,62108,62116],{"__ignoreMap":178},[220,62101,62102,62104,62106],{"class":222,"line":223},[220,62103,343],{"class":264},[220,62105,347],{"class":420},[220,62107,359],{"class":264},[220,62109,62110,62112,62114],{"class":222,"line":179},[220,62111,364],{"class":264},[220,62113,62019],{"class":420},[220,62115,386],{"class":264},[220,62117,62118,62120,62122],{"class":222,"line":389},[220,62119,402],{"class":264},[220,62121,347],{"class":420},[220,62123,359],{"class":264},[212,62125,62126],{"className":468,"code":62041,"language":469,"meta":178,"style":178},[99,62127,62128,62136,62144],{"__ignoreMap":178},[220,62129,62130,62132,62134],{"class":222,"line":223},[220,62131,343],{"class":264},[220,62133,347],{"class":420},[220,62135,359],{"class":264},[220,62137,62138,62140,62142],{"class":222,"line":179},[220,62139,364],{"class":264},[220,62141,62019],{"class":420},[220,62143,386],{"class":264},[220,62145,62146,62148,62150],{"class":222,"line":389},[220,62147,402],{"class":264},[220,62149,347],{"class":420},[220,62151,359],{"class":264},[212,62153,62155],{"className":251,"code":62154,"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,62156,62157,62167,62171,62185,62189,62198,62202],{"__ignoreMap":178},[220,62158,62159,62161,62163,62165],{"class":222,"line":223},[220,62160,261],{"class":260},[220,62162,9763],{"class":264},[220,62164,268],{"class":260},[220,62166,9768],{"class":230},[220,62168,62169],{"class":222,"line":179},[220,62170,647],{"emptyLinePlaceholder":194},[220,62172,62173,62175,62177,62179,62181,62183],{"class":222,"line":389},[220,62174,1735],{"class":260},[220,62176,1738],{"class":420},[220,62178,1741],{"class":260},[220,62180,1744],{"class":260},[220,62182,1747],{"class":226},[220,62184,1750],{"class":264},[220,62186,62187],{"class":222,"line":399},[220,62188,1765],{"class":264},[220,62190,62191,62193,62196],{"class":222,"line":644},[220,62192,1770],{"class":264},[220,62194,62195],{"class":230},"'Scratches'",[220,62197,2465],{"class":264},[220,62199,62200],{"class":222,"line":650},[220,62201,1787],{"class":264},[220,62203,62204],{"class":222,"line":656},[220,62205,1792],{"class":264},[1504,62207,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":62209},[62210,62211],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":62019,"description":62027},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":62218,"title":62219,"body":62220,"category":33287,"componentType":24147,"description":62227,"extension":191,"meta":62488,"navigation":194,"path":62489,"requiresChild":194,"seo":62490,"stem":62491,"__hash__":62492},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":62221,"toc":62484},[62222,62225,62228,62230,62232,62235,62237,62482],[11,62223,62219],{"id":62224},"sharpness",[15,62226,62227],{},"Adjust image sharpness using a convolution kernel",[30192,62229],{"component":62219},[23,62231,30196],{"id":24798},[30198,62233],{":props":62234},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,62236,30204],{"id":30203},[246,62238,62239,62284,62328,62372,62416],{":tabs":1557},[212,62240,62242],{"className":334,"code":62241,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,62243,62244,62252,62260,62268,62276],{"__ignoreMap":178},[220,62245,62246,62248,62250],{"class":222,"line":223},[220,62247,343],{"class":264},[220,62249,347],{"class":346},[220,62251,359],{"class":264},[220,62253,62254,62256,62258],{"class":222,"line":179},[220,62255,364],{"class":264},[220,62257,62219],{"class":346},[220,62259,359],{"class":264},[220,62261,62262,62264,62266],{"class":222,"line":389},[220,62263,2550],{"class":264},[220,62265,2553],{"class":346},[220,62267,386],{"class":264},[220,62269,62270,62272,62274],{"class":222,"line":399},[220,62271,2567],{"class":264},[220,62273,62219],{"class":346},[220,62275,359],{"class":264},[220,62277,62278,62280,62282],{"class":222,"line":644},[220,62279,402],{"class":264},[220,62281,347],{"class":346},[220,62283,359],{"class":264},[212,62285,62286],{"className":409,"code":62241,"language":411,"meta":178,"style":178},[99,62287,62288,62296,62304,62312,62320],{"__ignoreMap":178},[220,62289,62290,62292,62294],{"class":222,"line":223},[220,62291,343],{"class":264},[220,62293,347],{"class":420},[220,62295,359],{"class":264},[220,62297,62298,62300,62302],{"class":222,"line":179},[220,62299,364],{"class":264},[220,62301,62219],{"class":420},[220,62303,359],{"class":264},[220,62305,62306,62308,62310],{"class":222,"line":389},[220,62307,2550],{"class":264},[220,62309,2553],{"class":420},[220,62311,386],{"class":264},[220,62313,62314,62316,62318],{"class":222,"line":399},[220,62315,2567],{"class":264},[220,62317,62219],{"class":420},[220,62319,359],{"class":264},[220,62321,62322,62324,62326],{"class":222,"line":644},[220,62323,402],{"class":264},[220,62325,347],{"class":420},[220,62327,359],{"class":264},[212,62329,62330],{"className":2844,"code":62241,"language":2846,"meta":178,"style":178},[99,62331,62332,62340,62348,62356,62364],{"__ignoreMap":178},[220,62333,62334,62336,62338],{"class":222,"line":223},[220,62335,343],{"class":264},[220,62337,347],{"class":420},[220,62339,359],{"class":264},[220,62341,62342,62344,62346],{"class":222,"line":179},[220,62343,364],{"class":264},[220,62345,62219],{"class":420},[220,62347,359],{"class":264},[220,62349,62350,62352,62354],{"class":222,"line":389},[220,62351,2550],{"class":264},[220,62353,2553],{"class":420},[220,62355,386],{"class":264},[220,62357,62358,62360,62362],{"class":222,"line":399},[220,62359,2567],{"class":264},[220,62361,62219],{"class":420},[220,62363,359],{"class":264},[220,62365,62366,62368,62370],{"class":222,"line":644},[220,62367,402],{"class":264},[220,62369,347],{"class":420},[220,62371,359],{"class":264},[212,62373,62374],{"className":468,"code":62241,"language":469,"meta":178,"style":178},[99,62375,62376,62384,62392,62400,62408],{"__ignoreMap":178},[220,62377,62378,62380,62382],{"class":222,"line":223},[220,62379,343],{"class":264},[220,62381,347],{"class":420},[220,62383,359],{"class":264},[220,62385,62386,62388,62390],{"class":222,"line":179},[220,62387,364],{"class":264},[220,62389,62219],{"class":420},[220,62391,359],{"class":264},[220,62393,62394,62396,62398],{"class":222,"line":389},[220,62395,2550],{"class":264},[220,62397,2553],{"class":420},[220,62399,386],{"class":264},[220,62401,62402,62404,62406],{"class":222,"line":399},[220,62403,2567],{"class":264},[220,62405,62219],{"class":420},[220,62407,359],{"class":264},[220,62409,62410,62412,62414],{"class":222,"line":644},[220,62411,402],{"class":264},[220,62413,347],{"class":420},[220,62415,359],{"class":264},[212,62417,62419],{"className":251,"code":62418,"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,62420,62421,62431,62435,62449,62453,62462,62470,62474,62478],{"__ignoreMap":178},[220,62422,62423,62425,62427,62429],{"class":222,"line":223},[220,62424,261],{"class":260},[220,62426,9763],{"class":264},[220,62428,268],{"class":260},[220,62430,9768],{"class":230},[220,62432,62433],{"class":222,"line":179},[220,62434,647],{"emptyLinePlaceholder":194},[220,62436,62437,62439,62441,62443,62445,62447],{"class":222,"line":389},[220,62438,1735],{"class":260},[220,62440,1738],{"class":420},[220,62442,1741],{"class":260},[220,62444,1744],{"class":260},[220,62446,1747],{"class":226},[220,62448,1750],{"class":264},[220,62450,62451],{"class":222,"line":399},[220,62452,1765],{"class":264},[220,62454,62455,62457,62460],{"class":222,"line":644},[220,62456,1770],{"class":264},[220,62458,62459],{"class":230},"'Sharpness'",[220,62461,5255],{"class":264},[220,62463,62464,62466,62468],{"class":222,"line":650},[220,62465,5260],{"class":264},[220,62467,3206],{"class":230},[220,62469,2465],{"class":264},[220,62471,62472],{"class":222,"line":656},[220,62473,5277],{"class":264},[220,62475,62476],{"class":222,"line":673},[220,62477,1787],{"class":264},[220,62479,62480],{"class":222,"line":682},[220,62481,1792],{"class":264},[1504,62483,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":62485},[62486,62487],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":62219,"description":62227},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":62494,"title":62495,"body":62496,"category":35553,"componentType":24147,"description":62503,"extension":191,"meta":62868,"navigation":194,"path":62869,"requiresChild":194,"seo":62870,"stem":62871,"__hash__":62872},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":62497,"toc":62864},[62498,62501,62504,62506,62508,62511,62513,62862],[11,62499,62495],{"id":62500},"shatter",[15,62502,62503],{},"Broken glass effect with tectonic plate displacement",[30192,62505],{"component":62495},[23,62507,30196],{"id":24798},[30198,62509],{":props":62510},"[{\"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,62512,30204],{"id":30203},[246,62514,62515,62580,62652,62718,62788],{":tabs":1557},[212,62516,62518],{"className":334,"code":62517,"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,62519,62520,62528,62535,62544,62552,62556,62564,62572],{"__ignoreMap":178},[220,62521,62522,62524,62526],{"class":222,"line":223},[220,62523,343],{"class":264},[220,62525,347],{"class":346},[220,62527,359],{"class":264},[220,62529,62530,62532],{"class":222,"line":179},[220,62531,364],{"class":264},[220,62533,62534],{"class":346},"Shatter\n",[220,62536,62537,62539,62541],{"class":222,"line":389},[220,62538,18633],{"class":226},[220,62540,353],{"class":264},[220,62542,62543],{"class":230},"\"4\"\n",[220,62545,62546,62548,62550],{"class":222,"line":399},[220,62547,15666],{"class":226},[220,62549,353],{"class":264},[220,62551,44164],{"class":230},[220,62553,62554],{"class":222,"line":644},[220,62555,30240],{"class":264},[220,62557,62558,62560,62562],{"class":222,"line":650},[220,62559,2550],{"class":264},[220,62561,2553],{"class":346},[220,62563,386],{"class":264},[220,62565,62566,62568,62570],{"class":222,"line":656},[220,62567,2567],{"class":264},[220,62569,62495],{"class":346},[220,62571,359],{"class":264},[220,62573,62574,62576,62578],{"class":222,"line":673},[220,62575,402],{"class":264},[220,62577,347],{"class":346},[220,62579,359],{"class":264},[212,62581,62583],{"className":409,"code":62582,"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,62584,62585,62593,62599,62612,62624,62628,62636,62644],{"__ignoreMap":178},[220,62586,62587,62589,62591],{"class":222,"line":223},[220,62588,343],{"class":264},[220,62590,347],{"class":420},[220,62592,359],{"class":264},[220,62594,62595,62597],{"class":222,"line":179},[220,62596,364],{"class":264},[220,62598,62534],{"class":420},[220,62600,62601,62603,62605,62607,62610],{"class":222,"line":389},[220,62602,18744],{"class":226},[220,62604,353],{"class":260},[220,62606,743],{"class":264},[220,62608,62609],{"class":420},"4",[220,62611,749],{"class":264},[220,62613,62614,62616,62618,62620,62622],{"class":222,"line":399},[220,62615,7892],{"class":226},[220,62617,353],{"class":260},[220,62619,743],{"class":264},[220,62621,6495],{"class":420},[220,62623,749],{"class":264},[220,62625,62626],{"class":222,"line":644},[220,62627,30240],{"class":264},[220,62629,62630,62632,62634],{"class":222,"line":650},[220,62631,2550],{"class":264},[220,62633,2553],{"class":420},[220,62635,386],{"class":264},[220,62637,62638,62640,62642],{"class":222,"line":656},[220,62639,2567],{"class":264},[220,62641,62495],{"class":420},[220,62643,359],{"class":264},[220,62645,62646,62648,62650],{"class":222,"line":673},[220,62647,402],{"class":264},[220,62649,347],{"class":420},[220,62651,359],{"class":264},[212,62653,62654],{"className":2844,"code":62582,"language":2846,"meta":178,"style":178},[99,62655,62656,62664,62670,62680,62690,62694,62702,62710],{"__ignoreMap":178},[220,62657,62658,62660,62662],{"class":222,"line":223},[220,62659,343],{"class":264},[220,62661,347],{"class":420},[220,62663,359],{"class":264},[220,62665,62666,62668],{"class":222,"line":179},[220,62667,364],{"class":264},[220,62669,62534],{"class":420},[220,62671,62672,62674,62676,62678],{"class":222,"line":389},[220,62673,18744],{"class":226},[220,62675,28138],{"class":264},[220,62677,62609],{"class":420},[220,62679,749],{"class":264},[220,62681,62682,62684,62686,62688],{"class":222,"line":399},[220,62683,7892],{"class":226},[220,62685,28138],{"class":264},[220,62687,6495],{"class":420},[220,62689,749],{"class":264},[220,62691,62692],{"class":222,"line":644},[220,62693,30240],{"class":264},[220,62695,62696,62698,62700],{"class":222,"line":650},[220,62697,2550],{"class":264},[220,62699,2553],{"class":420},[220,62701,386],{"class":264},[220,62703,62704,62706,62708],{"class":222,"line":656},[220,62705,2567],{"class":264},[220,62707,62495],{"class":420},[220,62709,359],{"class":264},[220,62711,62712,62714,62716],{"class":222,"line":673},[220,62713,402],{"class":264},[220,62715,347],{"class":420},[220,62717,359],{"class":264},[212,62719,62720],{"className":468,"code":62582,"language":469,"meta":178,"style":178},[99,62721,62722,62730,62736,62748,62760,62764,62772,62780],{"__ignoreMap":178},[220,62723,62724,62726,62728],{"class":222,"line":223},[220,62725,343],{"class":264},[220,62727,347],{"class":420},[220,62729,359],{"class":264},[220,62731,62732,62734],{"class":222,"line":179},[220,62733,364],{"class":264},[220,62735,62534],{"class":420},[220,62737,62738,62740,62742,62744,62746],{"class":222,"line":389},[220,62739,18744],{"class":226},[220,62741,353],{"class":260},[220,62743,743],{"class":264},[220,62745,62609],{"class":420},[220,62747,749],{"class":264},[220,62749,62750,62752,62754,62756,62758],{"class":222,"line":399},[220,62751,7892],{"class":226},[220,62753,353],{"class":260},[220,62755,743],{"class":264},[220,62757,6495],{"class":420},[220,62759,749],{"class":264},[220,62761,62762],{"class":222,"line":644},[220,62763,30240],{"class":264},[220,62765,62766,62768,62770],{"class":222,"line":650},[220,62767,2550],{"class":264},[220,62769,2553],{"class":420},[220,62771,386],{"class":264},[220,62773,62774,62776,62778],{"class":222,"line":656},[220,62775,2567],{"class":264},[220,62777,62495],{"class":420},[220,62779,359],{"class":264},[220,62781,62782,62784,62786],{"class":222,"line":673},[220,62783,402],{"class":264},[220,62785,347],{"class":420},[220,62787,359],{"class":264},[212,62789,62791],{"className":251,"code":62790,"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,62792,62793,62803,62807,62821,62825,62842,62850,62854,62858],{"__ignoreMap":178},[220,62794,62795,62797,62799,62801],{"class":222,"line":223},[220,62796,261],{"class":260},[220,62798,9763],{"class":264},[220,62800,268],{"class":260},[220,62802,9768],{"class":230},[220,62804,62805],{"class":222,"line":179},[220,62806,647],{"emptyLinePlaceholder":194},[220,62808,62809,62811,62813,62815,62817,62819],{"class":222,"line":389},[220,62810,1735],{"class":260},[220,62812,1738],{"class":420},[220,62814,1741],{"class":260},[220,62816,1744],{"class":260},[220,62818,1747],{"class":226},[220,62820,1750],{"class":264},[220,62822,62823],{"class":222,"line":399},[220,62824,1765],{"class":264},[220,62826,62827,62829,62832,62834,62836,62838,62840],{"class":222,"line":644},[220,62828,1770],{"class":264},[220,62830,62831],{"class":230},"'Shatter'",[220,62833,30484],{"class":264},[220,62835,62609],{"class":420},[220,62837,4812],{"class":264},[220,62839,6495],{"class":420},[220,62841,5792],{"class":264},[220,62843,62844,62846,62848],{"class":222,"line":650},[220,62845,5260],{"class":264},[220,62847,3206],{"class":230},[220,62849,2465],{"class":264},[220,62851,62852],{"class":222,"line":656},[220,62853,5277],{"class":264},[220,62855,62856],{"class":222,"line":673},[220,62857,1787],{"class":264},[220,62859,62860],{"class":222,"line":682},[220,62861,1792],{"class":264},[1504,62863,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62865},[62866,62867],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":62495,"description":62503},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":62874,"title":62875,"body":62876,"category":31344,"componentType":24141,"description":62883,"extension":191,"meta":63068,"navigation":194,"path":63069,"requiresChild":30811,"seo":63070,"stem":63071,"__hash__":63072},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":62877,"toc":63064},[62878,62881,62884,62886,62888,62891,62893,63062],[11,62879,62875],{"id":62880},"simplexnoise",[15,62882,62883],{},"Organic noise with animated movement",[30192,62885],{"component":62875},[23,62887,30196],{"id":24798},[30198,62889],{":props":62890},"[{\"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,62892,30204],{"id":30203},[246,62894,62895,62924,62952,62980,63008],{":tabs":1557},[212,62896,62898],{"className":334,"code":62897,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,62899,62900,62908,62916],{"__ignoreMap":178},[220,62901,62902,62904,62906],{"class":222,"line":223},[220,62903,343],{"class":264},[220,62905,347],{"class":346},[220,62907,359],{"class":264},[220,62909,62910,62912,62914],{"class":222,"line":179},[220,62911,364],{"class":264},[220,62913,62875],{"class":346},[220,62915,386],{"class":264},[220,62917,62918,62920,62922],{"class":222,"line":389},[220,62919,402],{"class":264},[220,62921,347],{"class":346},[220,62923,359],{"class":264},[212,62925,62926],{"className":409,"code":62897,"language":411,"meta":178,"style":178},[99,62927,62928,62936,62944],{"__ignoreMap":178},[220,62929,62930,62932,62934],{"class":222,"line":223},[220,62931,343],{"class":264},[220,62933,347],{"class":420},[220,62935,359],{"class":264},[220,62937,62938,62940,62942],{"class":222,"line":179},[220,62939,364],{"class":264},[220,62941,62875],{"class":420},[220,62943,386],{"class":264},[220,62945,62946,62948,62950],{"class":222,"line":389},[220,62947,402],{"class":264},[220,62949,347],{"class":420},[220,62951,359],{"class":264},[212,62953,62954],{"className":2844,"code":62897,"language":2846,"meta":178,"style":178},[99,62955,62956,62964,62972],{"__ignoreMap":178},[220,62957,62958,62960,62962],{"class":222,"line":223},[220,62959,343],{"class":264},[220,62961,347],{"class":420},[220,62963,359],{"class":264},[220,62965,62966,62968,62970],{"class":222,"line":179},[220,62967,364],{"class":264},[220,62969,62875],{"class":420},[220,62971,386],{"class":264},[220,62973,62974,62976,62978],{"class":222,"line":389},[220,62975,402],{"class":264},[220,62977,347],{"class":420},[220,62979,359],{"class":264},[212,62981,62982],{"className":468,"code":62897,"language":469,"meta":178,"style":178},[99,62983,62984,62992,63000],{"__ignoreMap":178},[220,62985,62986,62988,62990],{"class":222,"line":223},[220,62987,343],{"class":264},[220,62989,347],{"class":420},[220,62991,359],{"class":264},[220,62993,62994,62996,62998],{"class":222,"line":179},[220,62995,364],{"class":264},[220,62997,62875],{"class":420},[220,62999,386],{"class":264},[220,63001,63002,63004,63006],{"class":222,"line":389},[220,63003,402],{"class":264},[220,63005,347],{"class":420},[220,63007,359],{"class":264},[212,63009,63011],{"className":251,"code":63010,"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,63012,63013,63023,63027,63041,63045,63054,63058],{"__ignoreMap":178},[220,63014,63015,63017,63019,63021],{"class":222,"line":223},[220,63016,261],{"class":260},[220,63018,9763],{"class":264},[220,63020,268],{"class":260},[220,63022,9768],{"class":230},[220,63024,63025],{"class":222,"line":179},[220,63026,647],{"emptyLinePlaceholder":194},[220,63028,63029,63031,63033,63035,63037,63039],{"class":222,"line":389},[220,63030,1735],{"class":260},[220,63032,1738],{"class":420},[220,63034,1741],{"class":260},[220,63036,1744],{"class":260},[220,63038,1747],{"class":226},[220,63040,1750],{"class":264},[220,63042,63043],{"class":222,"line":399},[220,63044,1765],{"class":264},[220,63046,63047,63049,63052],{"class":222,"line":644},[220,63048,1770],{"class":264},[220,63050,63051],{"class":230},"'SimplexNoise'",[220,63053,2465],{"class":264},[220,63055,63056],{"class":222,"line":650},[220,63057,1787],{"class":264},[220,63059,63060],{"class":222,"line":656},[220,63061,1792],{"class":264},[1504,63063,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":63065},[63066,63067],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":62875,"description":62883},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":63074,"title":63075,"body":63076,"category":31344,"componentType":24141,"description":63083,"extension":191,"meta":63313,"navigation":194,"path":63314,"requiresChild":30811,"seo":63315,"stem":63316,"__hash__":63317},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":63077,"toc":63309},[63078,63081,63084,63086,63088,63091,63093,63307],[11,63079,63075],{"id":63080},"sinewave",[15,63082,63083],{},"Animated wave with thickness and softness",[30192,63085],{"component":63075},[23,63087,30196],{"id":24798},[30198,63089],{":props":63090},"[{\"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,63092,30204],{"id":30203},[246,63094,63095,63135,63173,63211,63249],{":tabs":1557},[212,63096,63098],{"className":334,"code":63097,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,63099,63100,63108,63115,63123,63127],{"__ignoreMap":178},[220,63101,63102,63104,63106],{"class":222,"line":223},[220,63103,343],{"class":264},[220,63105,347],{"class":346},[220,63107,359],{"class":264},[220,63109,63110,63112],{"class":222,"line":179},[220,63111,364],{"class":264},[220,63113,63114],{"class":346},"SineWave\n",[220,63116,63117,63119,63121],{"class":222,"line":389},[220,63118,7882],{"class":226},[220,63120,353],{"class":264},[220,63122,7838],{"class":230},[220,63124,63125],{"class":222,"line":399},[220,63126,1234],{"class":264},[220,63128,63129,63131,63133],{"class":222,"line":644},[220,63130,402],{"class":264},[220,63132,347],{"class":346},[220,63134,359],{"class":264},[212,63136,63137],{"className":409,"code":63097,"language":411,"meta":178,"style":178},[99,63138,63139,63147,63153,63161,63165],{"__ignoreMap":178},[220,63140,63141,63143,63145],{"class":222,"line":223},[220,63142,343],{"class":264},[220,63144,347],{"class":420},[220,63146,359],{"class":264},[220,63148,63149,63151],{"class":222,"line":179},[220,63150,364],{"class":264},[220,63152,63114],{"class":420},[220,63154,63155,63157,63159],{"class":222,"line":389},[220,63156,7882],{"class":226},[220,63158,353],{"class":260},[220,63160,7838],{"class":230},[220,63162,63163],{"class":222,"line":399},[220,63164,1234],{"class":264},[220,63166,63167,63169,63171],{"class":222,"line":644},[220,63168,402],{"class":264},[220,63170,347],{"class":420},[220,63172,359],{"class":264},[212,63174,63175],{"className":2844,"code":63097,"language":2846,"meta":178,"style":178},[99,63176,63177,63185,63191,63199,63203],{"__ignoreMap":178},[220,63178,63179,63181,63183],{"class":222,"line":223},[220,63180,343],{"class":264},[220,63182,347],{"class":420},[220,63184,359],{"class":264},[220,63186,63187,63189],{"class":222,"line":179},[220,63188,364],{"class":264},[220,63190,63114],{"class":420},[220,63192,63193,63195,63197],{"class":222,"line":389},[220,63194,7882],{"class":226},[220,63196,353],{"class":264},[220,63198,7838],{"class":230},[220,63200,63201],{"class":222,"line":399},[220,63202,1234],{"class":264},[220,63204,63205,63207,63209],{"class":222,"line":644},[220,63206,402],{"class":264},[220,63208,347],{"class":420},[220,63210,359],{"class":264},[212,63212,63213],{"className":468,"code":63097,"language":469,"meta":178,"style":178},[99,63214,63215,63223,63229,63237,63241],{"__ignoreMap":178},[220,63216,63217,63219,63221],{"class":222,"line":223},[220,63218,343],{"class":264},[220,63220,347],{"class":420},[220,63222,359],{"class":264},[220,63224,63225,63227],{"class":222,"line":179},[220,63226,364],{"class":264},[220,63228,63114],{"class":420},[220,63230,63231,63233,63235],{"class":222,"line":389},[220,63232,7882],{"class":226},[220,63234,353],{"class":260},[220,63236,7838],{"class":230},[220,63238,63239],{"class":222,"line":399},[220,63240,1234],{"class":264},[220,63242,63243,63245,63247],{"class":222,"line":644},[220,63244,402],{"class":264},[220,63246,347],{"class":420},[220,63248,359],{"class":264},[212,63250,63252],{"className":251,"code":63251,"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,63253,63254,63264,63268,63282,63286,63299,63303],{"__ignoreMap":178},[220,63255,63256,63258,63260,63262],{"class":222,"line":223},[220,63257,261],{"class":260},[220,63259,9763],{"class":264},[220,63261,268],{"class":260},[220,63263,9768],{"class":230},[220,63265,63266],{"class":222,"line":179},[220,63267,647],{"emptyLinePlaceholder":194},[220,63269,63270,63272,63274,63276,63278,63280],{"class":222,"line":389},[220,63271,1735],{"class":260},[220,63273,1738],{"class":420},[220,63275,1741],{"class":260},[220,63277,1744],{"class":260},[220,63279,1747],{"class":226},[220,63281,1750],{"class":264},[220,63283,63284],{"class":222,"line":399},[220,63285,1765],{"class":264},[220,63287,63288,63290,63293,63295,63297],{"class":222,"line":644},[220,63289,1770],{"class":264},[220,63291,63292],{"class":230},"'SineWave'",[220,63294,1776],{"class":264},[220,63296,8417],{"class":230},[220,63298,1782],{"class":264},[220,63300,63301],{"class":222,"line":650},[220,63302,1787],{"class":264},[220,63304,63305],{"class":222,"line":656},[220,63306,1792],{"class":264},[1504,63308,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63310},[63311,63312],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":63075,"description":63083},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":63319,"title":63320,"body":63321,"category":35553,"componentType":24141,"description":63328,"extension":191,"meta":63569,"navigation":194,"path":63570,"requiresChild":30811,"seo":63571,"stem":63572,"__hash__":63573},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":63322,"toc":63565},[63323,63326,63329,63331,63333,63336,63338,63563],[11,63324,63320],{"id":63325},"smoke",[15,63327,63328],{},"Realistic fluid smoke simulation with vorticity dynamics",[30192,63330],{"component":63320},[23,63332,30196],{"id":24798},[30198,63334],{":props":63335},"[{\"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,63337,30204],{"id":30203},[246,63339,63340,63380,63423,63463,63505],{":tabs":1557},[212,63341,63343],{"className":334,"code":63342,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,63344,63345,63353,63360,63368,63372],{"__ignoreMap":178},[220,63346,63347,63349,63351],{"class":222,"line":223},[220,63348,343],{"class":264},[220,63350,347],{"class":346},[220,63352,359],{"class":264},[220,63354,63355,63357],{"class":222,"line":179},[220,63356,364],{"class":264},[220,63358,63359],{"class":346},"Smoke\n",[220,63361,63362,63364,63366],{"class":222,"line":389},[220,63363,18633],{"class":226},[220,63365,353],{"class":264},[220,63367,33544],{"class":230},[220,63369,63370],{"class":222,"line":399},[220,63371,1234],{"class":264},[220,63373,63374,63376,63378],{"class":222,"line":644},[220,63375,402],{"class":264},[220,63377,347],{"class":346},[220,63379,359],{"class":264},[212,63381,63383],{"className":409,"code":63382,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,63384,63385,63393,63399,63411,63415],{"__ignoreMap":178},[220,63386,63387,63389,63391],{"class":222,"line":223},[220,63388,343],{"class":264},[220,63390,347],{"class":420},[220,63392,359],{"class":264},[220,63394,63395,63397],{"class":222,"line":179},[220,63396,364],{"class":264},[220,63398,63359],{"class":420},[220,63400,63401,63403,63405,63407,63409],{"class":222,"line":389},[220,63402,18744],{"class":226},[220,63404,353],{"class":260},[220,63406,743],{"class":264},[220,63408,6923],{"class":420},[220,63410,749],{"class":264},[220,63412,63413],{"class":222,"line":399},[220,63414,1234],{"class":264},[220,63416,63417,63419,63421],{"class":222,"line":644},[220,63418,402],{"class":264},[220,63420,347],{"class":420},[220,63422,359],{"class":264},[212,63424,63425],{"className":2844,"code":63382,"language":2846,"meta":178,"style":178},[99,63426,63427,63435,63441,63451,63455],{"__ignoreMap":178},[220,63428,63429,63431,63433],{"class":222,"line":223},[220,63430,343],{"class":264},[220,63432,347],{"class":420},[220,63434,359],{"class":264},[220,63436,63437,63439],{"class":222,"line":179},[220,63438,364],{"class":264},[220,63440,63359],{"class":420},[220,63442,63443,63445,63447,63449],{"class":222,"line":389},[220,63444,18744],{"class":226},[220,63446,28138],{"class":264},[220,63448,6923],{"class":420},[220,63450,749],{"class":264},[220,63452,63453],{"class":222,"line":399},[220,63454,1234],{"class":264},[220,63456,63457,63459,63461],{"class":222,"line":644},[220,63458,402],{"class":264},[220,63460,347],{"class":420},[220,63462,359],{"class":264},[212,63464,63465],{"className":468,"code":63382,"language":469,"meta":178,"style":178},[99,63466,63467,63475,63481,63493,63497],{"__ignoreMap":178},[220,63468,63469,63471,63473],{"class":222,"line":223},[220,63470,343],{"class":264},[220,63472,347],{"class":420},[220,63474,359],{"class":264},[220,63476,63477,63479],{"class":222,"line":179},[220,63478,364],{"class":264},[220,63480,63359],{"class":420},[220,63482,63483,63485,63487,63489,63491],{"class":222,"line":389},[220,63484,18744],{"class":226},[220,63486,353],{"class":260},[220,63488,743],{"class":264},[220,63490,6923],{"class":420},[220,63492,749],{"class":264},[220,63494,63495],{"class":222,"line":399},[220,63496,1234],{"class":264},[220,63498,63499,63501,63503],{"class":222,"line":644},[220,63500,402],{"class":264},[220,63502,347],{"class":420},[220,63504,359],{"class":264},[212,63506,63508],{"className":251,"code":63507,"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,63509,63510,63520,63524,63538,63542,63555,63559],{"__ignoreMap":178},[220,63511,63512,63514,63516,63518],{"class":222,"line":223},[220,63513,261],{"class":260},[220,63515,9763],{"class":264},[220,63517,268],{"class":260},[220,63519,9768],{"class":230},[220,63521,63522],{"class":222,"line":179},[220,63523,647],{"emptyLinePlaceholder":194},[220,63525,63526,63528,63530,63532,63534,63536],{"class":222,"line":389},[220,63527,1735],{"class":260},[220,63529,1738],{"class":420},[220,63531,1741],{"class":260},[220,63533,1744],{"class":260},[220,63535,1747],{"class":226},[220,63537,1750],{"class":264},[220,63539,63540],{"class":222,"line":399},[220,63541,1765],{"class":264},[220,63543,63544,63546,63549,63551,63553],{"class":222,"line":644},[220,63545,1770],{"class":264},[220,63547,63548],{"class":230},"'Smoke'",[220,63550,30484],{"class":264},[220,63552,6923],{"class":420},[220,63554,1782],{"class":264},[220,63556,63557],{"class":222,"line":650},[220,63558,1787],{"class":264},[220,63560,63561],{"class":222,"line":656},[220,63562,1792],{"class":264},[1504,63564,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63566},[63567,63568],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":63320,"description":63328},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":63575,"title":21438,"body":63576,"category":33488,"componentType":24141,"description":63583,"extension":191,"meta":63824,"navigation":194,"path":63825,"requiresChild":30811,"seo":63826,"stem":63827,"__hash__":63828},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":63577,"toc":63820},[63578,63581,63584,63586,63588,63591,63593,63818],[11,63579,21438],{"id":63580},"smokefill",[15,63582,63583],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[30192,63585],{"component":21438},[23,63587,30196],{"id":24798},[30198,63589],{":props":63590},"[{\"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,63592,30204],{"id":30203},[246,63594,63595,63635,63678,63718,63760],{":tabs":1557},[212,63596,63598],{"className":334,"code":63597,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,63599,63600,63608,63615,63623,63627],{"__ignoreMap":178},[220,63601,63602,63604,63606],{"class":222,"line":223},[220,63603,343],{"class":264},[220,63605,347],{"class":346},[220,63607,359],{"class":264},[220,63609,63610,63612],{"class":222,"line":179},[220,63611,364],{"class":264},[220,63613,63614],{"class":346},"SmokeFill\n",[220,63616,63617,63619,63621],{"class":222,"line":389},[220,63618,18633],{"class":226},[220,63620,353],{"class":264},[220,63622,33544],{"class":230},[220,63624,63625],{"class":222,"line":399},[220,63626,1234],{"class":264},[220,63628,63629,63631,63633],{"class":222,"line":644},[220,63630,402],{"class":264},[220,63632,347],{"class":346},[220,63634,359],{"class":264},[212,63636,63638],{"className":409,"code":63637,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,63639,63640,63648,63654,63666,63670],{"__ignoreMap":178},[220,63641,63642,63644,63646],{"class":222,"line":223},[220,63643,343],{"class":264},[220,63645,347],{"class":420},[220,63647,359],{"class":264},[220,63649,63650,63652],{"class":222,"line":179},[220,63651,364],{"class":264},[220,63653,63614],{"class":420},[220,63655,63656,63658,63660,63662,63664],{"class":222,"line":389},[220,63657,18744],{"class":226},[220,63659,353],{"class":260},[220,63661,743],{"class":264},[220,63663,6923],{"class":420},[220,63665,749],{"class":264},[220,63667,63668],{"class":222,"line":399},[220,63669,1234],{"class":264},[220,63671,63672,63674,63676],{"class":222,"line":644},[220,63673,402],{"class":264},[220,63675,347],{"class":420},[220,63677,359],{"class":264},[212,63679,63680],{"className":2844,"code":63637,"language":2846,"meta":178,"style":178},[99,63681,63682,63690,63696,63706,63710],{"__ignoreMap":178},[220,63683,63684,63686,63688],{"class":222,"line":223},[220,63685,343],{"class":264},[220,63687,347],{"class":420},[220,63689,359],{"class":264},[220,63691,63692,63694],{"class":222,"line":179},[220,63693,364],{"class":264},[220,63695,63614],{"class":420},[220,63697,63698,63700,63702,63704],{"class":222,"line":389},[220,63699,18744],{"class":226},[220,63701,28138],{"class":264},[220,63703,6923],{"class":420},[220,63705,749],{"class":264},[220,63707,63708],{"class":222,"line":399},[220,63709,1234],{"class":264},[220,63711,63712,63714,63716],{"class":222,"line":644},[220,63713,402],{"class":264},[220,63715,347],{"class":420},[220,63717,359],{"class":264},[212,63719,63720],{"className":468,"code":63637,"language":469,"meta":178,"style":178},[99,63721,63722,63730,63736,63748,63752],{"__ignoreMap":178},[220,63723,63724,63726,63728],{"class":222,"line":223},[220,63725,343],{"class":264},[220,63727,347],{"class":420},[220,63729,359],{"class":264},[220,63731,63732,63734],{"class":222,"line":179},[220,63733,364],{"class":264},[220,63735,63614],{"class":420},[220,63737,63738,63740,63742,63744,63746],{"class":222,"line":389},[220,63739,18744],{"class":226},[220,63741,353],{"class":260},[220,63743,743],{"class":264},[220,63745,6923],{"class":420},[220,63747,749],{"class":264},[220,63749,63750],{"class":222,"line":399},[220,63751,1234],{"class":264},[220,63753,63754,63756,63758],{"class":222,"line":644},[220,63755,402],{"class":264},[220,63757,347],{"class":420},[220,63759,359],{"class":264},[212,63761,63763],{"className":251,"code":63762,"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,63764,63765,63775,63779,63793,63797,63810,63814],{"__ignoreMap":178},[220,63766,63767,63769,63771,63773],{"class":222,"line":223},[220,63768,261],{"class":260},[220,63770,9763],{"class":264},[220,63772,268],{"class":260},[220,63774,9768],{"class":230},[220,63776,63777],{"class":222,"line":179},[220,63778,647],{"emptyLinePlaceholder":194},[220,63780,63781,63783,63785,63787,63789,63791],{"class":222,"line":389},[220,63782,1735],{"class":260},[220,63784,1738],{"class":420},[220,63786,1741],{"class":260},[220,63788,1744],{"class":260},[220,63790,1747],{"class":226},[220,63792,1750],{"class":264},[220,63794,63795],{"class":222,"line":399},[220,63796,1765],{"class":264},[220,63798,63799,63801,63804,63806,63808],{"class":222,"line":644},[220,63800,1770],{"class":264},[220,63802,63803],{"class":230},"'SmokeFill'",[220,63805,30484],{"class":264},[220,63807,6923],{"class":420},[220,63809,1782],{"class":264},[220,63811,63812],{"class":222,"line":650},[220,63813,1787],{"class":264},[220,63815,63816],{"class":222,"line":656},[220,63817,1792],{"class":264},[1504,63819,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63821},[63822,63823],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":21438,"description":63583},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":63830,"title":63831,"body":63832,"category":35553,"componentType":24141,"description":63839,"extension":191,"meta":64080,"navigation":194,"path":64081,"requiresChild":30811,"seo":64082,"stem":64083,"__hash__":64084},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":63833,"toc":64076},[63834,63837,63840,63842,63844,63847,63849,64074],[11,63835,63831],{"id":63836},"smokeflow",[15,63838,63839],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[30192,63841],{"component":63831},[23,63843,30196],{"id":24798},[30198,63845],{":props":63846},"[{\"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,63848,30204],{"id":30203},[246,63850,63851,63891,63934,63974,64016],{":tabs":1557},[212,63852,63854],{"className":334,"code":63853,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,63855,63856,63864,63871,63879,63883],{"__ignoreMap":178},[220,63857,63858,63860,63862],{"class":222,"line":223},[220,63859,343],{"class":264},[220,63861,347],{"class":346},[220,63863,359],{"class":264},[220,63865,63866,63868],{"class":222,"line":179},[220,63867,364],{"class":264},[220,63869,63870],{"class":346},"SmokeFlow\n",[220,63872,63873,63875,63877],{"class":222,"line":389},[220,63874,18633],{"class":226},[220,63876,353],{"class":264},[220,63878,33544],{"class":230},[220,63880,63881],{"class":222,"line":399},[220,63882,1234],{"class":264},[220,63884,63885,63887,63889],{"class":222,"line":644},[220,63886,402],{"class":264},[220,63888,347],{"class":346},[220,63890,359],{"class":264},[212,63892,63894],{"className":409,"code":63893,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,63895,63896,63904,63910,63922,63926],{"__ignoreMap":178},[220,63897,63898,63900,63902],{"class":222,"line":223},[220,63899,343],{"class":264},[220,63901,347],{"class":420},[220,63903,359],{"class":264},[220,63905,63906,63908],{"class":222,"line":179},[220,63907,364],{"class":264},[220,63909,63870],{"class":420},[220,63911,63912,63914,63916,63918,63920],{"class":222,"line":389},[220,63913,18744],{"class":226},[220,63915,353],{"class":260},[220,63917,743],{"class":264},[220,63919,6923],{"class":420},[220,63921,749],{"class":264},[220,63923,63924],{"class":222,"line":399},[220,63925,1234],{"class":264},[220,63927,63928,63930,63932],{"class":222,"line":644},[220,63929,402],{"class":264},[220,63931,347],{"class":420},[220,63933,359],{"class":264},[212,63935,63936],{"className":2844,"code":63893,"language":2846,"meta":178,"style":178},[99,63937,63938,63946,63952,63962,63966],{"__ignoreMap":178},[220,63939,63940,63942,63944],{"class":222,"line":223},[220,63941,343],{"class":264},[220,63943,347],{"class":420},[220,63945,359],{"class":264},[220,63947,63948,63950],{"class":222,"line":179},[220,63949,364],{"class":264},[220,63951,63870],{"class":420},[220,63953,63954,63956,63958,63960],{"class":222,"line":389},[220,63955,18744],{"class":226},[220,63957,28138],{"class":264},[220,63959,6923],{"class":420},[220,63961,749],{"class":264},[220,63963,63964],{"class":222,"line":399},[220,63965,1234],{"class":264},[220,63967,63968,63970,63972],{"class":222,"line":644},[220,63969,402],{"class":264},[220,63971,347],{"class":420},[220,63973,359],{"class":264},[212,63975,63976],{"className":468,"code":63893,"language":469,"meta":178,"style":178},[99,63977,63978,63986,63992,64004,64008],{"__ignoreMap":178},[220,63979,63980,63982,63984],{"class":222,"line":223},[220,63981,343],{"class":264},[220,63983,347],{"class":420},[220,63985,359],{"class":264},[220,63987,63988,63990],{"class":222,"line":179},[220,63989,364],{"class":264},[220,63991,63870],{"class":420},[220,63993,63994,63996,63998,64000,64002],{"class":222,"line":389},[220,63995,18744],{"class":226},[220,63997,353],{"class":260},[220,63999,743],{"class":264},[220,64001,6923],{"class":420},[220,64003,749],{"class":264},[220,64005,64006],{"class":222,"line":399},[220,64007,1234],{"class":264},[220,64009,64010,64012,64014],{"class":222,"line":644},[220,64011,402],{"class":264},[220,64013,347],{"class":420},[220,64015,359],{"class":264},[212,64017,64019],{"className":251,"code":64018,"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,64020,64021,64031,64035,64049,64053,64066,64070],{"__ignoreMap":178},[220,64022,64023,64025,64027,64029],{"class":222,"line":223},[220,64024,261],{"class":260},[220,64026,9763],{"class":264},[220,64028,268],{"class":260},[220,64030,9768],{"class":230},[220,64032,64033],{"class":222,"line":179},[220,64034,647],{"emptyLinePlaceholder":194},[220,64036,64037,64039,64041,64043,64045,64047],{"class":222,"line":389},[220,64038,1735],{"class":260},[220,64040,1738],{"class":420},[220,64042,1741],{"class":260},[220,64044,1744],{"class":260},[220,64046,1747],{"class":226},[220,64048,1750],{"class":264},[220,64050,64051],{"class":222,"line":399},[220,64052,1765],{"class":264},[220,64054,64055,64057,64060,64062,64064],{"class":222,"line":644},[220,64056,1770],{"class":264},[220,64058,64059],{"class":230},"'SmokeFlow'",[220,64061,30484],{"class":264},[220,64063,6923],{"class":420},[220,64065,1782],{"class":264},[220,64067,64068],{"class":222,"line":650},[220,64069,1787],{"class":264},[220,64071,64072],{"class":222,"line":656},[220,64073,1792],{"class":264},[1504,64075,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64077},[64078,64079],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":63831,"description":63839},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":64086,"title":64087,"body":64088,"category":33287,"componentType":24147,"description":64095,"extension":191,"meta":64356,"navigation":194,"path":64357,"requiresChild":194,"seo":64358,"stem":64359,"__hash__":64360},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":64089,"toc":64352},[64090,64093,64096,64098,64100,64103,64105,64350],[11,64091,64087],{"id":64092},"solarize",[15,64094,64095],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[30192,64097],{"component":64087},[23,64099,30196],{"id":24798},[30198,64101],{":props":64102},"[{\"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,64104,30204],{"id":30203},[246,64106,64107,64152,64196,64240,64284],{":tabs":1557},[212,64108,64110],{"className":334,"code":64109,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,64111,64112,64120,64128,64136,64144],{"__ignoreMap":178},[220,64113,64114,64116,64118],{"class":222,"line":223},[220,64115,343],{"class":264},[220,64117,347],{"class":346},[220,64119,359],{"class":264},[220,64121,64122,64124,64126],{"class":222,"line":179},[220,64123,364],{"class":264},[220,64125,64087],{"class":346},[220,64127,359],{"class":264},[220,64129,64130,64132,64134],{"class":222,"line":389},[220,64131,2550],{"class":264},[220,64133,2553],{"class":346},[220,64135,386],{"class":264},[220,64137,64138,64140,64142],{"class":222,"line":399},[220,64139,2567],{"class":264},[220,64141,64087],{"class":346},[220,64143,359],{"class":264},[220,64145,64146,64148,64150],{"class":222,"line":644},[220,64147,402],{"class":264},[220,64149,347],{"class":346},[220,64151,359],{"class":264},[212,64153,64154],{"className":409,"code":64109,"language":411,"meta":178,"style":178},[99,64155,64156,64164,64172,64180,64188],{"__ignoreMap":178},[220,64157,64158,64160,64162],{"class":222,"line":223},[220,64159,343],{"class":264},[220,64161,347],{"class":420},[220,64163,359],{"class":264},[220,64165,64166,64168,64170],{"class":222,"line":179},[220,64167,364],{"class":264},[220,64169,64087],{"class":420},[220,64171,359],{"class":264},[220,64173,64174,64176,64178],{"class":222,"line":389},[220,64175,2550],{"class":264},[220,64177,2553],{"class":420},[220,64179,386],{"class":264},[220,64181,64182,64184,64186],{"class":222,"line":399},[220,64183,2567],{"class":264},[220,64185,64087],{"class":420},[220,64187,359],{"class":264},[220,64189,64190,64192,64194],{"class":222,"line":644},[220,64191,402],{"class":264},[220,64193,347],{"class":420},[220,64195,359],{"class":264},[212,64197,64198],{"className":2844,"code":64109,"language":2846,"meta":178,"style":178},[99,64199,64200,64208,64216,64224,64232],{"__ignoreMap":178},[220,64201,64202,64204,64206],{"class":222,"line":223},[220,64203,343],{"class":264},[220,64205,347],{"class":420},[220,64207,359],{"class":264},[220,64209,64210,64212,64214],{"class":222,"line":179},[220,64211,364],{"class":264},[220,64213,64087],{"class":420},[220,64215,359],{"class":264},[220,64217,64218,64220,64222],{"class":222,"line":389},[220,64219,2550],{"class":264},[220,64221,2553],{"class":420},[220,64223,386],{"class":264},[220,64225,64226,64228,64230],{"class":222,"line":399},[220,64227,2567],{"class":264},[220,64229,64087],{"class":420},[220,64231,359],{"class":264},[220,64233,64234,64236,64238],{"class":222,"line":644},[220,64235,402],{"class":264},[220,64237,347],{"class":420},[220,64239,359],{"class":264},[212,64241,64242],{"className":468,"code":64109,"language":469,"meta":178,"style":178},[99,64243,64244,64252,64260,64268,64276],{"__ignoreMap":178},[220,64245,64246,64248,64250],{"class":222,"line":223},[220,64247,343],{"class":264},[220,64249,347],{"class":420},[220,64251,359],{"class":264},[220,64253,64254,64256,64258],{"class":222,"line":179},[220,64255,364],{"class":264},[220,64257,64087],{"class":420},[220,64259,359],{"class":264},[220,64261,64262,64264,64266],{"class":222,"line":389},[220,64263,2550],{"class":264},[220,64265,2553],{"class":420},[220,64267,386],{"class":264},[220,64269,64270,64272,64274],{"class":222,"line":399},[220,64271,2567],{"class":264},[220,64273,64087],{"class":420},[220,64275,359],{"class":264},[220,64277,64278,64280,64282],{"class":222,"line":644},[220,64279,402],{"class":264},[220,64281,347],{"class":420},[220,64283,359],{"class":264},[212,64285,64287],{"className":251,"code":64286,"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,64288,64289,64299,64303,64317,64321,64330,64338,64342,64346],{"__ignoreMap":178},[220,64290,64291,64293,64295,64297],{"class":222,"line":223},[220,64292,261],{"class":260},[220,64294,9763],{"class":264},[220,64296,268],{"class":260},[220,64298,9768],{"class":230},[220,64300,64301],{"class":222,"line":179},[220,64302,647],{"emptyLinePlaceholder":194},[220,64304,64305,64307,64309,64311,64313,64315],{"class":222,"line":389},[220,64306,1735],{"class":260},[220,64308,1738],{"class":420},[220,64310,1741],{"class":260},[220,64312,1744],{"class":260},[220,64314,1747],{"class":226},[220,64316,1750],{"class":264},[220,64318,64319],{"class":222,"line":399},[220,64320,1765],{"class":264},[220,64322,64323,64325,64328],{"class":222,"line":644},[220,64324,1770],{"class":264},[220,64326,64327],{"class":230},"'Solarize'",[220,64329,5255],{"class":264},[220,64331,64332,64334,64336],{"class":222,"line":650},[220,64333,5260],{"class":264},[220,64335,3206],{"class":230},[220,64337,2465],{"class":264},[220,64339,64340],{"class":222,"line":656},[220,64341,5277],{"class":264},[220,64343,64344],{"class":222,"line":673},[220,64345,1787],{"class":264},[220,64347,64348],{"class":222,"line":682},[220,64349,1792],{"class":264},[1504,64351,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":64353},[64354,64355],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":64087,"description":64095},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":64362,"title":1585,"body":64363,"category":31344,"componentType":24141,"description":64370,"extension":191,"meta":64600,"navigation":194,"path":64601,"requiresChild":30811,"seo":64602,"stem":64603,"__hash__":64604},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":64364,"toc":64596},[64365,64368,64371,64373,64375,64378,64380,64594],[11,64366,1585],{"id":64367},"solidcolor",[15,64369,64370],{},"Fill the canvas with a single solid color",[30192,64372],{"component":1585},[23,64374,30196],{"id":24798},[30198,64376],{":props":64377},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,64379,30204],{"id":30203},[246,64381,64382,64423,64461,64499,64537],{":tabs":1557},[212,64383,64385],{"className":334,"code":64384,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,64386,64387,64395,64402,64411,64415],{"__ignoreMap":178},[220,64388,64389,64391,64393],{"class":222,"line":223},[220,64390,343],{"class":264},[220,64392,347],{"class":346},[220,64394,359],{"class":264},[220,64396,64397,64399],{"class":222,"line":179},[220,64398,364],{"class":264},[220,64400,64401],{"class":346},"SolidColor\n",[220,64403,64404,64406,64408],{"class":222,"line":389},[220,64405,7882],{"class":226},[220,64407,353],{"class":264},[220,64409,64410],{"class":230},"\"#5b18ca\"\n",[220,64412,64413],{"class":222,"line":399},[220,64414,1234],{"class":264},[220,64416,64417,64419,64421],{"class":222,"line":644},[220,64418,402],{"class":264},[220,64420,347],{"class":346},[220,64422,359],{"class":264},[212,64424,64425],{"className":409,"code":64384,"language":411,"meta":178,"style":178},[99,64426,64427,64435,64441,64449,64453],{"__ignoreMap":178},[220,64428,64429,64431,64433],{"class":222,"line":223},[220,64430,343],{"class":264},[220,64432,347],{"class":420},[220,64434,359],{"class":264},[220,64436,64437,64439],{"class":222,"line":179},[220,64438,364],{"class":264},[220,64440,64401],{"class":420},[220,64442,64443,64445,64447],{"class":222,"line":389},[220,64444,7882],{"class":226},[220,64446,353],{"class":260},[220,64448,64410],{"class":230},[220,64450,64451],{"class":222,"line":399},[220,64452,1234],{"class":264},[220,64454,64455,64457,64459],{"class":222,"line":644},[220,64456,402],{"class":264},[220,64458,347],{"class":420},[220,64460,359],{"class":264},[212,64462,64463],{"className":2844,"code":64384,"language":2846,"meta":178,"style":178},[99,64464,64465,64473,64479,64487,64491],{"__ignoreMap":178},[220,64466,64467,64469,64471],{"class":222,"line":223},[220,64468,343],{"class":264},[220,64470,347],{"class":420},[220,64472,359],{"class":264},[220,64474,64475,64477],{"class":222,"line":179},[220,64476,364],{"class":264},[220,64478,64401],{"class":420},[220,64480,64481,64483,64485],{"class":222,"line":389},[220,64482,7882],{"class":226},[220,64484,353],{"class":264},[220,64486,64410],{"class":230},[220,64488,64489],{"class":222,"line":399},[220,64490,1234],{"class":264},[220,64492,64493,64495,64497],{"class":222,"line":644},[220,64494,402],{"class":264},[220,64496,347],{"class":420},[220,64498,359],{"class":264},[212,64500,64501],{"className":468,"code":64384,"language":469,"meta":178,"style":178},[99,64502,64503,64511,64517,64525,64529],{"__ignoreMap":178},[220,64504,64505,64507,64509],{"class":222,"line":223},[220,64506,343],{"class":264},[220,64508,347],{"class":420},[220,64510,359],{"class":264},[220,64512,64513,64515],{"class":222,"line":179},[220,64514,364],{"class":264},[220,64516,64401],{"class":420},[220,64518,64519,64521,64523],{"class":222,"line":389},[220,64520,7882],{"class":226},[220,64522,353],{"class":260},[220,64524,64410],{"class":230},[220,64526,64527],{"class":222,"line":399},[220,64528,1234],{"class":264},[220,64530,64531,64533,64535],{"class":222,"line":644},[220,64532,402],{"class":264},[220,64534,347],{"class":420},[220,64536,359],{"class":264},[212,64538,64540],{"className":251,"code":64539,"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,64541,64542,64552,64556,64570,64574,64586,64590],{"__ignoreMap":178},[220,64543,64544,64546,64548,64550],{"class":222,"line":223},[220,64545,261],{"class":260},[220,64547,9763],{"class":264},[220,64549,268],{"class":260},[220,64551,9768],{"class":230},[220,64553,64554],{"class":222,"line":179},[220,64555,647],{"emptyLinePlaceholder":194},[220,64557,64558,64560,64562,64564,64566,64568],{"class":222,"line":389},[220,64559,1735],{"class":260},[220,64561,1738],{"class":420},[220,64563,1741],{"class":260},[220,64565,1744],{"class":260},[220,64567,1747],{"class":226},[220,64569,1750],{"class":264},[220,64571,64572],{"class":222,"line":399},[220,64573,1765],{"class":264},[220,64575,64576,64578,64580,64582,64584],{"class":222,"line":644},[220,64577,1770],{"class":264},[220,64579,1773],{"class":230},[220,64581,1776],{"class":264},[220,64583,1779],{"class":230},[220,64585,1782],{"class":264},[220,64587,64588],{"class":222,"line":650},[220,64589,1787],{"class":264},[220,64591,64592],{"class":222,"line":656},[220,64593,1792],{"class":264},[1504,64595,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64597},[64598,64599],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":64370},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":64606,"title":64607,"body":64608,"category":31677,"componentType":24147,"description":64615,"extension":191,"meta":64932,"navigation":194,"path":64933,"requiresChild":194,"seo":64934,"stem":64935,"__hash__":64936},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":64609,"toc":64928},[64610,64613,64616,64618,64620,64623,64625,64926],[11,64611,64607],{"id":64612},"spherize",[15,64614,64615],{},"Map content onto a 3D sphere surface with depth distortion",[30192,64617],{"component":64607},[23,64619,30196],{"id":24798},[30198,64621],{":props":64622},"[{\"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,64624,30204],{"id":30203},[246,64626,64627,64683,64742,64798,64856],{":tabs":1557},[212,64628,64630],{"className":334,"code":64629,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,64631,64632,64640,64647,64655,64659,64667,64675],{"__ignoreMap":178},[220,64633,64634,64636,64638],{"class":222,"line":223},[220,64635,343],{"class":264},[220,64637,347],{"class":346},[220,64639,359],{"class":264},[220,64641,64642,64644],{"class":222,"line":179},[220,64643,364],{"class":264},[220,64645,64646],{"class":346},"Spherize\n",[220,64648,64649,64651,64653],{"class":222,"line":389},[220,64650,15666],{"class":226},[220,64652,353],{"class":264},[220,64654,33544],{"class":230},[220,64656,64657],{"class":222,"line":399},[220,64658,30240],{"class":264},[220,64660,64661,64663,64665],{"class":222,"line":644},[220,64662,2550],{"class":264},[220,64664,2553],{"class":346},[220,64666,386],{"class":264},[220,64668,64669,64671,64673],{"class":222,"line":650},[220,64670,2567],{"class":264},[220,64672,64607],{"class":346},[220,64674,359],{"class":264},[220,64676,64677,64679,64681],{"class":222,"line":656},[220,64678,402],{"class":264},[220,64680,347],{"class":346},[220,64682,359],{"class":264},[212,64684,64686],{"className":409,"code":64685,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,64687,64688,64696,64702,64714,64718,64726,64734],{"__ignoreMap":178},[220,64689,64690,64692,64694],{"class":222,"line":223},[220,64691,343],{"class":264},[220,64693,347],{"class":420},[220,64695,359],{"class":264},[220,64697,64698,64700],{"class":222,"line":179},[220,64699,364],{"class":264},[220,64701,64646],{"class":420},[220,64703,64704,64706,64708,64710,64712],{"class":222,"line":389},[220,64705,7892],{"class":226},[220,64707,353],{"class":260},[220,64709,743],{"class":264},[220,64711,6923],{"class":420},[220,64713,749],{"class":264},[220,64715,64716],{"class":222,"line":399},[220,64717,30240],{"class":264},[220,64719,64720,64722,64724],{"class":222,"line":644},[220,64721,2550],{"class":264},[220,64723,2553],{"class":420},[220,64725,386],{"class":264},[220,64727,64728,64730,64732],{"class":222,"line":650},[220,64729,2567],{"class":264},[220,64731,64607],{"class":420},[220,64733,359],{"class":264},[220,64735,64736,64738,64740],{"class":222,"line":656},[220,64737,402],{"class":264},[220,64739,347],{"class":420},[220,64741,359],{"class":264},[212,64743,64744],{"className":2844,"code":64685,"language":2846,"meta":178,"style":178},[99,64745,64746,64754,64760,64770,64774,64782,64790],{"__ignoreMap":178},[220,64747,64748,64750,64752],{"class":222,"line":223},[220,64749,343],{"class":264},[220,64751,347],{"class":420},[220,64753,359],{"class":264},[220,64755,64756,64758],{"class":222,"line":179},[220,64757,364],{"class":264},[220,64759,64646],{"class":420},[220,64761,64762,64764,64766,64768],{"class":222,"line":389},[220,64763,7892],{"class":226},[220,64765,28138],{"class":264},[220,64767,6923],{"class":420},[220,64769,749],{"class":264},[220,64771,64772],{"class":222,"line":399},[220,64773,30240],{"class":264},[220,64775,64776,64778,64780],{"class":222,"line":644},[220,64777,2550],{"class":264},[220,64779,2553],{"class":420},[220,64781,386],{"class":264},[220,64783,64784,64786,64788],{"class":222,"line":650},[220,64785,2567],{"class":264},[220,64787,64607],{"class":420},[220,64789,359],{"class":264},[220,64791,64792,64794,64796],{"class":222,"line":656},[220,64793,402],{"class":264},[220,64795,347],{"class":420},[220,64797,359],{"class":264},[212,64799,64800],{"className":468,"code":64685,"language":469,"meta":178,"style":178},[99,64801,64802,64810,64816,64828,64832,64840,64848],{"__ignoreMap":178},[220,64803,64804,64806,64808],{"class":222,"line":223},[220,64805,343],{"class":264},[220,64807,347],{"class":420},[220,64809,359],{"class":264},[220,64811,64812,64814],{"class":222,"line":179},[220,64813,364],{"class":264},[220,64815,64646],{"class":420},[220,64817,64818,64820,64822,64824,64826],{"class":222,"line":389},[220,64819,7892],{"class":226},[220,64821,353],{"class":260},[220,64823,743],{"class":264},[220,64825,6923],{"class":420},[220,64827,749],{"class":264},[220,64829,64830],{"class":222,"line":399},[220,64831,30240],{"class":264},[220,64833,64834,64836,64838],{"class":222,"line":644},[220,64835,2550],{"class":264},[220,64837,2553],{"class":420},[220,64839,386],{"class":264},[220,64841,64842,64844,64846],{"class":222,"line":650},[220,64843,2567],{"class":264},[220,64845,64607],{"class":420},[220,64847,359],{"class":264},[220,64849,64850,64852,64854],{"class":222,"line":656},[220,64851,402],{"class":264},[220,64853,347],{"class":420},[220,64855,359],{"class":264},[212,64857,64859],{"className":251,"code":64858,"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,64860,64861,64871,64875,64889,64893,64906,64914,64918,64922],{"__ignoreMap":178},[220,64862,64863,64865,64867,64869],{"class":222,"line":223},[220,64864,261],{"class":260},[220,64866,9763],{"class":264},[220,64868,268],{"class":260},[220,64870,9768],{"class":230},[220,64872,64873],{"class":222,"line":179},[220,64874,647],{"emptyLinePlaceholder":194},[220,64876,64877,64879,64881,64883,64885,64887],{"class":222,"line":389},[220,64878,1735],{"class":260},[220,64880,1738],{"class":420},[220,64882,1741],{"class":260},[220,64884,1744],{"class":260},[220,64886,1747],{"class":226},[220,64888,1750],{"class":264},[220,64890,64891],{"class":222,"line":399},[220,64892,1765],{"class":264},[220,64894,64895,64897,64900,64902,64904],{"class":222,"line":644},[220,64896,1770],{"class":264},[220,64898,64899],{"class":230},"'Spherize'",[220,64901,5787],{"class":264},[220,64903,6923],{"class":420},[220,64905,5792],{"class":264},[220,64907,64908,64910,64912],{"class":222,"line":650},[220,64909,5260],{"class":264},[220,64911,3206],{"class":230},[220,64913,2465],{"class":264},[220,64915,64916],{"class":222,"line":656},[220,64917,5277],{"class":264},[220,64919,64920],{"class":222,"line":673},[220,64921,1787],{"class":264},[220,64923,64924],{"class":222,"line":682},[220,64925,1792],{"class":264},[1504,64927,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64929},[64930,64931],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":64607,"description":64615},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":64938,"title":64939,"body":64940,"category":31344,"componentType":24141,"description":64947,"extension":191,"meta":65132,"navigation":194,"path":65133,"requiresChild":30811,"seo":65134,"stem":65135,"__hash__":65136},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":64941,"toc":65128},[64942,64945,64948,64950,64952,64955,64957,65126],[11,64943,64939],{"id":64944},"spiral",[15,64946,64947],{},"Rotating spiral pattern with animated movement",[30192,64949],{"component":64939},[23,64951,30196],{"id":24798},[30198,64953],{":props":64954},"[{\"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,64956,30204],{"id":30203},[246,64958,64959,64988,65016,65044,65072],{":tabs":1557},[212,64960,64962],{"className":334,"code":64961,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,64963,64964,64972,64980],{"__ignoreMap":178},[220,64965,64966,64968,64970],{"class":222,"line":223},[220,64967,343],{"class":264},[220,64969,347],{"class":346},[220,64971,359],{"class":264},[220,64973,64974,64976,64978],{"class":222,"line":179},[220,64975,364],{"class":264},[220,64977,64939],{"class":346},[220,64979,386],{"class":264},[220,64981,64982,64984,64986],{"class":222,"line":389},[220,64983,402],{"class":264},[220,64985,347],{"class":346},[220,64987,359],{"class":264},[212,64989,64990],{"className":409,"code":64961,"language":411,"meta":178,"style":178},[99,64991,64992,65000,65008],{"__ignoreMap":178},[220,64993,64994,64996,64998],{"class":222,"line":223},[220,64995,343],{"class":264},[220,64997,347],{"class":420},[220,64999,359],{"class":264},[220,65001,65002,65004,65006],{"class":222,"line":179},[220,65003,364],{"class":264},[220,65005,64939],{"class":420},[220,65007,386],{"class":264},[220,65009,65010,65012,65014],{"class":222,"line":389},[220,65011,402],{"class":264},[220,65013,347],{"class":420},[220,65015,359],{"class":264},[212,65017,65018],{"className":2844,"code":64961,"language":2846,"meta":178,"style":178},[99,65019,65020,65028,65036],{"__ignoreMap":178},[220,65021,65022,65024,65026],{"class":222,"line":223},[220,65023,343],{"class":264},[220,65025,347],{"class":420},[220,65027,359],{"class":264},[220,65029,65030,65032,65034],{"class":222,"line":179},[220,65031,364],{"class":264},[220,65033,64939],{"class":420},[220,65035,386],{"class":264},[220,65037,65038,65040,65042],{"class":222,"line":389},[220,65039,402],{"class":264},[220,65041,347],{"class":420},[220,65043,359],{"class":264},[212,65045,65046],{"className":468,"code":64961,"language":469,"meta":178,"style":178},[99,65047,65048,65056,65064],{"__ignoreMap":178},[220,65049,65050,65052,65054],{"class":222,"line":223},[220,65051,343],{"class":264},[220,65053,347],{"class":420},[220,65055,359],{"class":264},[220,65057,65058,65060,65062],{"class":222,"line":179},[220,65059,364],{"class":264},[220,65061,64939],{"class":420},[220,65063,386],{"class":264},[220,65065,65066,65068,65070],{"class":222,"line":389},[220,65067,402],{"class":264},[220,65069,347],{"class":420},[220,65071,359],{"class":264},[212,65073,65075],{"className":251,"code":65074,"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,65076,65077,65087,65091,65105,65109,65118,65122],{"__ignoreMap":178},[220,65078,65079,65081,65083,65085],{"class":222,"line":223},[220,65080,261],{"class":260},[220,65082,9763],{"class":264},[220,65084,268],{"class":260},[220,65086,9768],{"class":230},[220,65088,65089],{"class":222,"line":179},[220,65090,647],{"emptyLinePlaceholder":194},[220,65092,65093,65095,65097,65099,65101,65103],{"class":222,"line":389},[220,65094,1735],{"class":260},[220,65096,1738],{"class":420},[220,65098,1741],{"class":260},[220,65100,1744],{"class":260},[220,65102,1747],{"class":226},[220,65104,1750],{"class":264},[220,65106,65107],{"class":222,"line":399},[220,65108,1765],{"class":264},[220,65110,65111,65113,65116],{"class":222,"line":644},[220,65112,1770],{"class":264},[220,65114,65115],{"class":230},"'Spiral'",[220,65117,2465],{"class":264},[220,65119,65120],{"class":222,"line":650},[220,65121,1787],{"class":264},[220,65123,65124],{"class":222,"line":656},[220,65125,1792],{"class":264},[1504,65127,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":65129},[65130,65131],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":64939,"description":64947},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":65138,"title":65139,"body":65140,"category":14164,"componentType":24141,"description":65147,"extension":191,"meta":65424,"navigation":194,"path":65425,"requiresChild":30811,"seo":65426,"stem":65427,"__hash__":65428},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":65141,"toc":65420},[65142,65145,65148,65150,65152,65155,65157,65418],[11,65143,65139],{"id":65144},"star",[15,65146,65147],{},"Classic star polygon with straight sides and sharp pointed tips",[30192,65149],{"component":65139},[23,65151,30196],{"id":24798},[30198,65153],{":props":65154},"[{\"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,65156,30204],{"id":30203},[246,65158,65159,65207,65258,65306,65356],{":tabs":1557},[212,65160,65162],{"className":334,"code":65161,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,65163,65164,65172,65179,65187,65195,65199],{"__ignoreMap":178},[220,65165,65166,65168,65170],{"class":222,"line":223},[220,65167,343],{"class":264},[220,65169,347],{"class":346},[220,65171,359],{"class":264},[220,65173,65174,65176],{"class":222,"line":179},[220,65175,364],{"class":264},[220,65177,65178],{"class":346},"Star\n",[220,65180,65181,65183,65185],{"class":222,"line":389},[220,65182,7882],{"class":226},[220,65184,353],{"class":264},[220,65186,7838],{"class":230},[220,65188,65189,65191,65193],{"class":222,"line":399},[220,65190,15666],{"class":226},[220,65192,353],{"class":264},[220,65194,44164],{"class":230},[220,65196,65197],{"class":222,"line":644},[220,65198,1234],{"class":264},[220,65200,65201,65203,65205],{"class":222,"line":650},[220,65202,402],{"class":264},[220,65204,347],{"class":346},[220,65206,359],{"class":264},[212,65208,65210],{"className":409,"code":65209,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,65211,65212,65220,65226,65234,65246,65250],{"__ignoreMap":178},[220,65213,65214,65216,65218],{"class":222,"line":223},[220,65215,343],{"class":264},[220,65217,347],{"class":420},[220,65219,359],{"class":264},[220,65221,65222,65224],{"class":222,"line":179},[220,65223,364],{"class":264},[220,65225,65178],{"class":420},[220,65227,65228,65230,65232],{"class":222,"line":389},[220,65229,7882],{"class":226},[220,65231,353],{"class":260},[220,65233,7838],{"class":230},[220,65235,65236,65238,65240,65242,65244],{"class":222,"line":399},[220,65237,7892],{"class":226},[220,65239,353],{"class":260},[220,65241,743],{"class":264},[220,65243,6495],{"class":420},[220,65245,749],{"class":264},[220,65247,65248],{"class":222,"line":644},[220,65249,1234],{"class":264},[220,65251,65252,65254,65256],{"class":222,"line":650},[220,65253,402],{"class":264},[220,65255,347],{"class":420},[220,65257,359],{"class":264},[212,65259,65260],{"className":2844,"code":65209,"language":2846,"meta":178,"style":178},[99,65261,65262,65270,65276,65284,65294,65298],{"__ignoreMap":178},[220,65263,65264,65266,65268],{"class":222,"line":223},[220,65265,343],{"class":264},[220,65267,347],{"class":420},[220,65269,359],{"class":264},[220,65271,65272,65274],{"class":222,"line":179},[220,65273,364],{"class":264},[220,65275,65178],{"class":420},[220,65277,65278,65280,65282],{"class":222,"line":389},[220,65279,7882],{"class":226},[220,65281,353],{"class":264},[220,65283,7838],{"class":230},[220,65285,65286,65288,65290,65292],{"class":222,"line":399},[220,65287,7892],{"class":226},[220,65289,28138],{"class":264},[220,65291,6495],{"class":420},[220,65293,749],{"class":264},[220,65295,65296],{"class":222,"line":644},[220,65297,1234],{"class":264},[220,65299,65300,65302,65304],{"class":222,"line":650},[220,65301,402],{"class":264},[220,65303,347],{"class":420},[220,65305,359],{"class":264},[212,65307,65308],{"className":468,"code":65209,"language":469,"meta":178,"style":178},[99,65309,65310,65318,65324,65332,65344,65348],{"__ignoreMap":178},[220,65311,65312,65314,65316],{"class":222,"line":223},[220,65313,343],{"class":264},[220,65315,347],{"class":420},[220,65317,359],{"class":264},[220,65319,65320,65322],{"class":222,"line":179},[220,65321,364],{"class":264},[220,65323,65178],{"class":420},[220,65325,65326,65328,65330],{"class":222,"line":389},[220,65327,7882],{"class":226},[220,65329,353],{"class":260},[220,65331,7838],{"class":230},[220,65333,65334,65336,65338,65340,65342],{"class":222,"line":399},[220,65335,7892],{"class":226},[220,65337,353],{"class":260},[220,65339,743],{"class":264},[220,65341,6495],{"class":420},[220,65343,749],{"class":264},[220,65345,65346],{"class":222,"line":644},[220,65347,1234],{"class":264},[220,65349,65350,65352,65354],{"class":222,"line":650},[220,65351,402],{"class":264},[220,65353,347],{"class":420},[220,65355,359],{"class":264},[212,65357,65359],{"className":251,"code":65358,"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,65360,65361,65371,65375,65389,65393,65410,65414],{"__ignoreMap":178},[220,65362,65363,65365,65367,65369],{"class":222,"line":223},[220,65364,261],{"class":260},[220,65366,9763],{"class":264},[220,65368,268],{"class":260},[220,65370,9768],{"class":230},[220,65372,65373],{"class":222,"line":179},[220,65374,647],{"emptyLinePlaceholder":194},[220,65376,65377,65379,65381,65383,65385,65387],{"class":222,"line":389},[220,65378,1735],{"class":260},[220,65380,1738],{"class":420},[220,65382,1741],{"class":260},[220,65384,1744],{"class":260},[220,65386,1747],{"class":226},[220,65388,1750],{"class":264},[220,65390,65391],{"class":222,"line":399},[220,65392,1765],{"class":264},[220,65394,65395,65397,65400,65402,65404,65406,65408],{"class":222,"line":644},[220,65396,1770],{"class":264},[220,65398,65399],{"class":230},"'Star'",[220,65401,1776],{"class":264},[220,65403,8417],{"class":230},[220,65405,4812],{"class":264},[220,65407,6495],{"class":420},[220,65409,1782],{"class":264},[220,65411,65412],{"class":222,"line":650},[220,65413,1787],{"class":264},[220,65415,65416],{"class":222,"line":656},[220,65417,1792],{"class":264},[1504,65419,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65421},[65422,65423],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":65139,"description":65147},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":65430,"title":65431,"body":65432,"category":31087,"componentType":24147,"description":65439,"extension":191,"meta":65756,"navigation":194,"path":65757,"requiresChild":194,"seo":65758,"stem":65759,"__hash__":65760},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":65433,"toc":65752},[65434,65437,65440,65442,65444,65447,65449,65750],[11,65435,65431],{"id":65436},"stone",[15,65438,65439],{},"Applies a marbled stone relief and surface distortion to child content",[30192,65441],{"component":65431},[23,65443,30196],{"id":24798},[30198,65445],{":props":65446},"[{\"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,65448,30204],{"id":30203},[246,65450,65451,65507,65566,65622,65680],{":tabs":1557},[212,65452,65454],{"className":334,"code":65453,"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,65455,65456,65464,65471,65479,65483,65491,65499],{"__ignoreMap":178},[220,65457,65458,65460,65462],{"class":222,"line":223},[220,65459,343],{"class":264},[220,65461,347],{"class":346},[220,65463,359],{"class":264},[220,65465,65466,65468],{"class":222,"line":179},[220,65467,364],{"class":264},[220,65469,65470],{"class":346},"Stone\n",[220,65472,65473,65475,65477],{"class":222,"line":389},[220,65474,18633],{"class":226},[220,65476,353],{"class":264},[220,65478,38802],{"class":230},[220,65480,65481],{"class":222,"line":399},[220,65482,30240],{"class":264},[220,65484,65485,65487,65489],{"class":222,"line":644},[220,65486,2550],{"class":264},[220,65488,2553],{"class":346},[220,65490,386],{"class":264},[220,65492,65493,65495,65497],{"class":222,"line":650},[220,65494,2567],{"class":264},[220,65496,65431],{"class":346},[220,65498,359],{"class":264},[220,65500,65501,65503,65505],{"class":222,"line":656},[220,65502,402],{"class":264},[220,65504,347],{"class":346},[220,65506,359],{"class":264},[212,65508,65510],{"className":409,"code":65509,"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,65511,65512,65520,65526,65538,65542,65550,65558],{"__ignoreMap":178},[220,65513,65514,65516,65518],{"class":222,"line":223},[220,65515,343],{"class":264},[220,65517,347],{"class":420},[220,65519,359],{"class":264},[220,65521,65522,65524],{"class":222,"line":179},[220,65523,364],{"class":264},[220,65525,65470],{"class":420},[220,65527,65528,65530,65532,65534,65536],{"class":222,"line":389},[220,65529,18744],{"class":226},[220,65531,353],{"class":260},[220,65533,743],{"class":264},[220,65535,6000],{"class":420},[220,65537,749],{"class":264},[220,65539,65540],{"class":222,"line":399},[220,65541,30240],{"class":264},[220,65543,65544,65546,65548],{"class":222,"line":644},[220,65545,2550],{"class":264},[220,65547,2553],{"class":420},[220,65549,386],{"class":264},[220,65551,65552,65554,65556],{"class":222,"line":650},[220,65553,2567],{"class":264},[220,65555,65431],{"class":420},[220,65557,359],{"class":264},[220,65559,65560,65562,65564],{"class":222,"line":656},[220,65561,402],{"class":264},[220,65563,347],{"class":420},[220,65565,359],{"class":264},[212,65567,65568],{"className":2844,"code":65509,"language":2846,"meta":178,"style":178},[99,65569,65570,65578,65584,65594,65598,65606,65614],{"__ignoreMap":178},[220,65571,65572,65574,65576],{"class":222,"line":223},[220,65573,343],{"class":264},[220,65575,347],{"class":420},[220,65577,359],{"class":264},[220,65579,65580,65582],{"class":222,"line":179},[220,65581,364],{"class":264},[220,65583,65470],{"class":420},[220,65585,65586,65588,65590,65592],{"class":222,"line":389},[220,65587,18744],{"class":226},[220,65589,28138],{"class":264},[220,65591,6000],{"class":420},[220,65593,749],{"class":264},[220,65595,65596],{"class":222,"line":399},[220,65597,30240],{"class":264},[220,65599,65600,65602,65604],{"class":222,"line":644},[220,65601,2550],{"class":264},[220,65603,2553],{"class":420},[220,65605,386],{"class":264},[220,65607,65608,65610,65612],{"class":222,"line":650},[220,65609,2567],{"class":264},[220,65611,65431],{"class":420},[220,65613,359],{"class":264},[220,65615,65616,65618,65620],{"class":222,"line":656},[220,65617,402],{"class":264},[220,65619,347],{"class":420},[220,65621,359],{"class":264},[212,65623,65624],{"className":468,"code":65509,"language":469,"meta":178,"style":178},[99,65625,65626,65634,65640,65652,65656,65664,65672],{"__ignoreMap":178},[220,65627,65628,65630,65632],{"class":222,"line":223},[220,65629,343],{"class":264},[220,65631,347],{"class":420},[220,65633,359],{"class":264},[220,65635,65636,65638],{"class":222,"line":179},[220,65637,364],{"class":264},[220,65639,65470],{"class":420},[220,65641,65642,65644,65646,65648,65650],{"class":222,"line":389},[220,65643,18744],{"class":226},[220,65645,353],{"class":260},[220,65647,743],{"class":264},[220,65649,6000],{"class":420},[220,65651,749],{"class":264},[220,65653,65654],{"class":222,"line":399},[220,65655,30240],{"class":264},[220,65657,65658,65660,65662],{"class":222,"line":644},[220,65659,2550],{"class":264},[220,65661,2553],{"class":420},[220,65663,386],{"class":264},[220,65665,65666,65668,65670],{"class":222,"line":650},[220,65667,2567],{"class":264},[220,65669,65431],{"class":420},[220,65671,359],{"class":264},[220,65673,65674,65676,65678],{"class":222,"line":656},[220,65675,402],{"class":264},[220,65677,347],{"class":420},[220,65679,359],{"class":264},[212,65681,65683],{"className":251,"code":65682,"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,65684,65685,65695,65699,65713,65717,65730,65738,65742,65746],{"__ignoreMap":178},[220,65686,65687,65689,65691,65693],{"class":222,"line":223},[220,65688,261],{"class":260},[220,65690,9763],{"class":264},[220,65692,268],{"class":260},[220,65694,9768],{"class":230},[220,65696,65697],{"class":222,"line":179},[220,65698,647],{"emptyLinePlaceholder":194},[220,65700,65701,65703,65705,65707,65709,65711],{"class":222,"line":389},[220,65702,1735],{"class":260},[220,65704,1738],{"class":420},[220,65706,1741],{"class":260},[220,65708,1744],{"class":260},[220,65710,1747],{"class":226},[220,65712,1750],{"class":264},[220,65714,65715],{"class":222,"line":399},[220,65716,1765],{"class":264},[220,65718,65719,65721,65724,65726,65728],{"class":222,"line":644},[220,65720,1770],{"class":264},[220,65722,65723],{"class":230},"'Stone'",[220,65725,30484],{"class":264},[220,65727,6000],{"class":420},[220,65729,5792],{"class":264},[220,65731,65732,65734,65736],{"class":222,"line":650},[220,65733,5260],{"class":264},[220,65735,3206],{"class":230},[220,65737,2465],{"class":264},[220,65739,65740],{"class":222,"line":656},[220,65741,5277],{"class":264},[220,65743,65744],{"class":222,"line":673},[220,65745,1787],{"class":264},[220,65747,65748],{"class":222,"line":682},[220,65749,1792],{"class":264},[1504,65751,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65753},[65754,65755],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":65431,"description":65439},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":65762,"title":65763,"body":65764,"category":31344,"componentType":24141,"description":65771,"extension":191,"meta":65956,"navigation":194,"path":65957,"requiresChild":30811,"seo":65958,"stem":65959,"__hash__":65960},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":65765,"toc":65952},[65766,65769,65772,65774,65776,65779,65781,65950],[11,65767,65763],{"id":65768},"strands",[15,65770,65771],{},"Flowing ribbons of light with a multi-color gradient",[30192,65773],{"component":65763},[23,65775,30196],{"id":24798},[30198,65777],{":props":65778},"[{\"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,65780,30204],{"id":30203},[246,65782,65783,65812,65840,65868,65896],{":tabs":1557},[212,65784,65786],{"className":334,"code":65785,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,65787,65788,65796,65804],{"__ignoreMap":178},[220,65789,65790,65792,65794],{"class":222,"line":223},[220,65791,343],{"class":264},[220,65793,347],{"class":346},[220,65795,359],{"class":264},[220,65797,65798,65800,65802],{"class":222,"line":179},[220,65799,364],{"class":264},[220,65801,65763],{"class":346},[220,65803,386],{"class":264},[220,65805,65806,65808,65810],{"class":222,"line":389},[220,65807,402],{"class":264},[220,65809,347],{"class":346},[220,65811,359],{"class":264},[212,65813,65814],{"className":409,"code":65785,"language":411,"meta":178,"style":178},[99,65815,65816,65824,65832],{"__ignoreMap":178},[220,65817,65818,65820,65822],{"class":222,"line":223},[220,65819,343],{"class":264},[220,65821,347],{"class":420},[220,65823,359],{"class":264},[220,65825,65826,65828,65830],{"class":222,"line":179},[220,65827,364],{"class":264},[220,65829,65763],{"class":420},[220,65831,386],{"class":264},[220,65833,65834,65836,65838],{"class":222,"line":389},[220,65835,402],{"class":264},[220,65837,347],{"class":420},[220,65839,359],{"class":264},[212,65841,65842],{"className":2844,"code":65785,"language":2846,"meta":178,"style":178},[99,65843,65844,65852,65860],{"__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,65858],{"class":222,"line":179},[220,65855,364],{"class":264},[220,65857,65763],{"class":420},[220,65859,386],{"class":264},[220,65861,65862,65864,65866],{"class":222,"line":389},[220,65863,402],{"class":264},[220,65865,347],{"class":420},[220,65867,359],{"class":264},[212,65869,65870],{"className":468,"code":65785,"language":469,"meta":178,"style":178},[99,65871,65872,65880,65888],{"__ignoreMap":178},[220,65873,65874,65876,65878],{"class":222,"line":223},[220,65875,343],{"class":264},[220,65877,347],{"class":420},[220,65879,359],{"class":264},[220,65881,65882,65884,65886],{"class":222,"line":179},[220,65883,364],{"class":264},[220,65885,65763],{"class":420},[220,65887,386],{"class":264},[220,65889,65890,65892,65894],{"class":222,"line":389},[220,65891,402],{"class":264},[220,65893,347],{"class":420},[220,65895,359],{"class":264},[212,65897,65899],{"className":251,"code":65898,"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,65900,65901,65911,65915,65929,65933,65942,65946],{"__ignoreMap":178},[220,65902,65903,65905,65907,65909],{"class":222,"line":223},[220,65904,261],{"class":260},[220,65906,9763],{"class":264},[220,65908,268],{"class":260},[220,65910,9768],{"class":230},[220,65912,65913],{"class":222,"line":179},[220,65914,647],{"emptyLinePlaceholder":194},[220,65916,65917,65919,65921,65923,65925,65927],{"class":222,"line":389},[220,65918,1735],{"class":260},[220,65920,1738],{"class":420},[220,65922,1741],{"class":260},[220,65924,1744],{"class":260},[220,65926,1747],{"class":226},[220,65928,1750],{"class":264},[220,65930,65931],{"class":222,"line":399},[220,65932,1765],{"class":264},[220,65934,65935,65937,65940],{"class":222,"line":644},[220,65936,1770],{"class":264},[220,65938,65939],{"class":230},"'Strands'",[220,65941,2465],{"class":264},[220,65943,65944],{"class":222,"line":650},[220,65945,1787],{"class":264},[220,65947,65948],{"class":222,"line":656},[220,65949,1792],{"class":264},[1504,65951,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":65953},[65954,65955],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":65763,"description":65771},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":65962,"title":65963,"body":65964,"category":31677,"componentType":24147,"description":65971,"extension":191,"meta":66232,"navigation":194,"path":66233,"requiresChild":194,"seo":66234,"stem":66235,"__hash__":66236},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":65965,"toc":66228},[65966,65969,65972,65974,65976,65979,65981,66226],[11,65967,65963],{"id":65968},"stretch",[15,65970,65971],{},"Stretch content towards a direction from a center point",[30192,65973],{"component":65963},[23,65975,30196],{"id":24798},[30198,65977],{":props":65978},"[{\"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,65980,30204],{"id":30203},[246,65982,65983,66028,66072,66116,66160],{":tabs":1557},[212,65984,65986],{"className":334,"code":65985,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,65987,65988,65996,66004,66012,66020],{"__ignoreMap":178},[220,65989,65990,65992,65994],{"class":222,"line":223},[220,65991,343],{"class":264},[220,65993,347],{"class":346},[220,65995,359],{"class":264},[220,65997,65998,66000,66002],{"class":222,"line":179},[220,65999,364],{"class":264},[220,66001,65963],{"class":346},[220,66003,359],{"class":264},[220,66005,66006,66008,66010],{"class":222,"line":389},[220,66007,2550],{"class":264},[220,66009,2553],{"class":346},[220,66011,386],{"class":264},[220,66013,66014,66016,66018],{"class":222,"line":399},[220,66015,2567],{"class":264},[220,66017,65963],{"class":346},[220,66019,359],{"class":264},[220,66021,66022,66024,66026],{"class":222,"line":644},[220,66023,402],{"class":264},[220,66025,347],{"class":346},[220,66027,359],{"class":264},[212,66029,66030],{"className":409,"code":65985,"language":411,"meta":178,"style":178},[99,66031,66032,66040,66048,66056,66064],{"__ignoreMap":178},[220,66033,66034,66036,66038],{"class":222,"line":223},[220,66035,343],{"class":264},[220,66037,347],{"class":420},[220,66039,359],{"class":264},[220,66041,66042,66044,66046],{"class":222,"line":179},[220,66043,364],{"class":264},[220,66045,65963],{"class":420},[220,66047,359],{"class":264},[220,66049,66050,66052,66054],{"class":222,"line":389},[220,66051,2550],{"class":264},[220,66053,2553],{"class":420},[220,66055,386],{"class":264},[220,66057,66058,66060,66062],{"class":222,"line":399},[220,66059,2567],{"class":264},[220,66061,65963],{"class":420},[220,66063,359],{"class":264},[220,66065,66066,66068,66070],{"class":222,"line":644},[220,66067,402],{"class":264},[220,66069,347],{"class":420},[220,66071,359],{"class":264},[212,66073,66074],{"className":2844,"code":65985,"language":2846,"meta":178,"style":178},[99,66075,66076,66084,66092,66100,66108],{"__ignoreMap":178},[220,66077,66078,66080,66082],{"class":222,"line":223},[220,66079,343],{"class":264},[220,66081,347],{"class":420},[220,66083,359],{"class":264},[220,66085,66086,66088,66090],{"class":222,"line":179},[220,66087,364],{"class":264},[220,66089,65963],{"class":420},[220,66091,359],{"class":264},[220,66093,66094,66096,66098],{"class":222,"line":389},[220,66095,2550],{"class":264},[220,66097,2553],{"class":420},[220,66099,386],{"class":264},[220,66101,66102,66104,66106],{"class":222,"line":399},[220,66103,2567],{"class":264},[220,66105,65963],{"class":420},[220,66107,359],{"class":264},[220,66109,66110,66112,66114],{"class":222,"line":644},[220,66111,402],{"class":264},[220,66113,347],{"class":420},[220,66115,359],{"class":264},[212,66117,66118],{"className":468,"code":65985,"language":469,"meta":178,"style":178},[99,66119,66120,66128,66136,66144,66152],{"__ignoreMap":178},[220,66121,66122,66124,66126],{"class":222,"line":223},[220,66123,343],{"class":264},[220,66125,347],{"class":420},[220,66127,359],{"class":264},[220,66129,66130,66132,66134],{"class":222,"line":179},[220,66131,364],{"class":264},[220,66133,65963],{"class":420},[220,66135,359],{"class":264},[220,66137,66138,66140,66142],{"class":222,"line":389},[220,66139,2550],{"class":264},[220,66141,2553],{"class":420},[220,66143,386],{"class":264},[220,66145,66146,66148,66150],{"class":222,"line":399},[220,66147,2567],{"class":264},[220,66149,65963],{"class":420},[220,66151,359],{"class":264},[220,66153,66154,66156,66158],{"class":222,"line":644},[220,66155,402],{"class":264},[220,66157,347],{"class":420},[220,66159,359],{"class":264},[212,66161,66163],{"className":251,"code":66162,"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,66164,66165,66175,66179,66193,66197,66206,66214,66218,66222],{"__ignoreMap":178},[220,66166,66167,66169,66171,66173],{"class":222,"line":223},[220,66168,261],{"class":260},[220,66170,9763],{"class":264},[220,66172,268],{"class":260},[220,66174,9768],{"class":230},[220,66176,66177],{"class":222,"line":179},[220,66178,647],{"emptyLinePlaceholder":194},[220,66180,66181,66183,66185,66187,66189,66191],{"class":222,"line":389},[220,66182,1735],{"class":260},[220,66184,1738],{"class":420},[220,66186,1741],{"class":260},[220,66188,1744],{"class":260},[220,66190,1747],{"class":226},[220,66192,1750],{"class":264},[220,66194,66195],{"class":222,"line":399},[220,66196,1765],{"class":264},[220,66198,66199,66201,66204],{"class":222,"line":644},[220,66200,1770],{"class":264},[220,66202,66203],{"class":230},"'Stretch'",[220,66205,5255],{"class":264},[220,66207,66208,66210,66212],{"class":222,"line":650},[220,66209,5260],{"class":264},[220,66211,3206],{"class":230},[220,66213,2465],{"class":264},[220,66215,66216],{"class":222,"line":656},[220,66217,5277],{"class":264},[220,66219,66220],{"class":222,"line":673},[220,66221,1787],{"class":264},[220,66223,66224],{"class":222,"line":682},[220,66225,1792],{"class":264},[1504,66227,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":66229},[66230,66231],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":65963,"description":65971},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":66238,"title":14095,"body":66239,"category":31344,"componentType":24141,"description":66246,"extension":191,"meta":66430,"navigation":194,"path":66431,"requiresChild":30811,"seo":66432,"stem":66433,"__hash__":66434},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":66240,"toc":66426},[66241,66244,66247,66249,66251,66254,66256,66424],[11,66242,14095],{"id":66243},"stripes",[15,66245,66246],{},"Alternating colored stripes with animation",[30192,66248],{"component":14095},[23,66250,30196],{"id":24798},[30198,66252],{":props":66253},"[{\"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,66255,30204],{"id":30203},[246,66257,66258,66287,66315,66343,66371],{":tabs":1557},[212,66259,66261],{"className":334,"code":66260,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,66262,66263,66271,66279],{"__ignoreMap":178},[220,66264,66265,66267,66269],{"class":222,"line":223},[220,66266,343],{"class":264},[220,66268,347],{"class":346},[220,66270,359],{"class":264},[220,66272,66273,66275,66277],{"class":222,"line":179},[220,66274,364],{"class":264},[220,66276,14095],{"class":346},[220,66278,386],{"class":264},[220,66280,66281,66283,66285],{"class":222,"line":389},[220,66282,402],{"class":264},[220,66284,347],{"class":346},[220,66286,359],{"class":264},[212,66288,66289],{"className":409,"code":66260,"language":411,"meta":178,"style":178},[99,66290,66291,66299,66307],{"__ignoreMap":178},[220,66292,66293,66295,66297],{"class":222,"line":223},[220,66294,343],{"class":264},[220,66296,347],{"class":420},[220,66298,359],{"class":264},[220,66300,66301,66303,66305],{"class":222,"line":179},[220,66302,364],{"class":264},[220,66304,14095],{"class":420},[220,66306,386],{"class":264},[220,66308,66309,66311,66313],{"class":222,"line":389},[220,66310,402],{"class":264},[220,66312,347],{"class":420},[220,66314,359],{"class":264},[212,66316,66317],{"className":2844,"code":66260,"language":2846,"meta":178,"style":178},[99,66318,66319,66327,66335],{"__ignoreMap":178},[220,66320,66321,66323,66325],{"class":222,"line":223},[220,66322,343],{"class":264},[220,66324,347],{"class":420},[220,66326,359],{"class":264},[220,66328,66329,66331,66333],{"class":222,"line":179},[220,66330,364],{"class":264},[220,66332,14095],{"class":420},[220,66334,386],{"class":264},[220,66336,66337,66339,66341],{"class":222,"line":389},[220,66338,402],{"class":264},[220,66340,347],{"class":420},[220,66342,359],{"class":264},[212,66344,66345],{"className":468,"code":66260,"language":469,"meta":178,"style":178},[99,66346,66347,66355,66363],{"__ignoreMap":178},[220,66348,66349,66351,66353],{"class":222,"line":223},[220,66350,343],{"class":264},[220,66352,347],{"class":420},[220,66354,359],{"class":264},[220,66356,66357,66359,66361],{"class":222,"line":179},[220,66358,364],{"class":264},[220,66360,14095],{"class":420},[220,66362,386],{"class":264},[220,66364,66365,66367,66369],{"class":222,"line":389},[220,66366,402],{"class":264},[220,66368,347],{"class":420},[220,66370,359],{"class":264},[212,66372,66374],{"className":251,"code":66373,"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,66375,66376,66386,66390,66404,66408,66416,66420],{"__ignoreMap":178},[220,66377,66378,66380,66382,66384],{"class":222,"line":223},[220,66379,261],{"class":260},[220,66381,9763],{"class":264},[220,66383,268],{"class":260},[220,66385,9768],{"class":230},[220,66387,66388],{"class":222,"line":179},[220,66389,647],{"emptyLinePlaceholder":194},[220,66391,66392,66394,66396,66398,66400,66402],{"class":222,"line":389},[220,66393,1735],{"class":260},[220,66395,1738],{"class":420},[220,66397,1741],{"class":260},[220,66399,1744],{"class":260},[220,66401,1747],{"class":226},[220,66403,1750],{"class":264},[220,66405,66406],{"class":222,"line":399},[220,66407,1765],{"class":264},[220,66409,66410,66412,66414],{"class":222,"line":644},[220,66411,1770],{"class":264},[220,66413,15358],{"class":230},[220,66415,2465],{"class":264},[220,66417,66418],{"class":222,"line":650},[220,66419,1787],{"class":264},[220,66421,66422],{"class":222,"line":656},[220,66423,1792],{"class":264},[1504,66425,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":66427},[66428,66429],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":14095,"description":66246},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":66436,"title":66437,"body":66438,"category":31344,"componentType":24141,"description":66445,"extension":191,"meta":66677,"navigation":194,"path":66678,"requiresChild":30811,"seo":66679,"stem":66680,"__hash__":66681},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":66439,"toc":66673},[66440,66443,66446,66448,66450,66453,66455,66671],[11,66441,66437],{"id":66442},"studiobackground",[15,66444,66445],{},"Multi-light studio background with ambient motion.",[30192,66447],{"component":66437},[23,66449,30196],{"id":24798},[30198,66451],{":props":66452},"[{\"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,66454,30204],{"id":30203},[246,66456,66457,66498,66536,66574,66612],{":tabs":1557},[212,66458,66460],{"className":334,"code":66459,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,66461,66462,66470,66477,66486,66490],{"__ignoreMap":178},[220,66463,66464,66466,66468],{"class":222,"line":223},[220,66465,343],{"class":264},[220,66467,347],{"class":346},[220,66469,359],{"class":264},[220,66471,66472,66474],{"class":222,"line":179},[220,66473,364],{"class":264},[220,66475,66476],{"class":346},"StudioBackground\n",[220,66478,66479,66481,66483],{"class":222,"line":389},[220,66480,7882],{"class":226},[220,66482,353],{"class":264},[220,66484,66485],{"class":230},"\"#d8dbec\"\n",[220,66487,66488],{"class":222,"line":399},[220,66489,1234],{"class":264},[220,66491,66492,66494,66496],{"class":222,"line":644},[220,66493,402],{"class":264},[220,66495,347],{"class":346},[220,66497,359],{"class":264},[212,66499,66500],{"className":409,"code":66459,"language":411,"meta":178,"style":178},[99,66501,66502,66510,66516,66524,66528],{"__ignoreMap":178},[220,66503,66504,66506,66508],{"class":222,"line":223},[220,66505,343],{"class":264},[220,66507,347],{"class":420},[220,66509,359],{"class":264},[220,66511,66512,66514],{"class":222,"line":179},[220,66513,364],{"class":264},[220,66515,66476],{"class":420},[220,66517,66518,66520,66522],{"class":222,"line":389},[220,66519,7882],{"class":226},[220,66521,353],{"class":260},[220,66523,66485],{"class":230},[220,66525,66526],{"class":222,"line":399},[220,66527,1234],{"class":264},[220,66529,66530,66532,66534],{"class":222,"line":644},[220,66531,402],{"class":264},[220,66533,347],{"class":420},[220,66535,359],{"class":264},[212,66537,66538],{"className":2844,"code":66459,"language":2846,"meta":178,"style":178},[99,66539,66540,66548,66554,66562,66566],{"__ignoreMap":178},[220,66541,66542,66544,66546],{"class":222,"line":223},[220,66543,343],{"class":264},[220,66545,347],{"class":420},[220,66547,359],{"class":264},[220,66549,66550,66552],{"class":222,"line":179},[220,66551,364],{"class":264},[220,66553,66476],{"class":420},[220,66555,66556,66558,66560],{"class":222,"line":389},[220,66557,7882],{"class":226},[220,66559,353],{"class":264},[220,66561,66485],{"class":230},[220,66563,66564],{"class":222,"line":399},[220,66565,1234],{"class":264},[220,66567,66568,66570,66572],{"class":222,"line":644},[220,66569,402],{"class":264},[220,66571,347],{"class":420},[220,66573,359],{"class":264},[212,66575,66576],{"className":468,"code":66459,"language":469,"meta":178,"style":178},[99,66577,66578,66586,66592,66600,66604],{"__ignoreMap":178},[220,66579,66580,66582,66584],{"class":222,"line":223},[220,66581,343],{"class":264},[220,66583,347],{"class":420},[220,66585,359],{"class":264},[220,66587,66588,66590],{"class":222,"line":179},[220,66589,364],{"class":264},[220,66591,66476],{"class":420},[220,66593,66594,66596,66598],{"class":222,"line":389},[220,66595,7882],{"class":226},[220,66597,353],{"class":260},[220,66599,66485],{"class":230},[220,66601,66602],{"class":222,"line":399},[220,66603,1234],{"class":264},[220,66605,66606,66608,66610],{"class":222,"line":644},[220,66607,402],{"class":264},[220,66609,347],{"class":420},[220,66611,359],{"class":264},[212,66613,66615],{"className":251,"code":66614,"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,66616,66617,66627,66631,66645,66649,66663,66667],{"__ignoreMap":178},[220,66618,66619,66621,66623,66625],{"class":222,"line":223},[220,66620,261],{"class":260},[220,66622,9763],{"class":264},[220,66624,268],{"class":260},[220,66626,9768],{"class":230},[220,66628,66629],{"class":222,"line":179},[220,66630,647],{"emptyLinePlaceholder":194},[220,66632,66633,66635,66637,66639,66641,66643],{"class":222,"line":389},[220,66634,1735],{"class":260},[220,66636,1738],{"class":420},[220,66638,1741],{"class":260},[220,66640,1744],{"class":260},[220,66642,1747],{"class":226},[220,66644,1750],{"class":264},[220,66646,66647],{"class":222,"line":399},[220,66648,1765],{"class":264},[220,66650,66651,66653,66656,66658,66661],{"class":222,"line":644},[220,66652,1770],{"class":264},[220,66654,66655],{"class":230},"'StudioBackground'",[220,66657,1776],{"class":264},[220,66659,66660],{"class":230},"'#d8dbec'",[220,66662,1782],{"class":264},[220,66664,66665],{"class":222,"line":650},[220,66666,1787],{"class":264},[220,66668,66669],{"class":222,"line":656},[220,66670,1792],{"class":264},[1504,66672,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66674},[66675,66676],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":66437,"description":66445},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":66683,"title":66684,"body":66685,"category":31344,"componentType":24141,"description":66692,"extension":191,"meta":66971,"navigation":194,"path":66972,"requiresChild":30811,"seo":66973,"stem":66974,"__hash__":66975},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":66686,"toc":66967},[66687,66690,66693,66695,66697,66700,66702,66965],[11,66688,66684],{"id":66689},"sunburst",[15,66691,66692],{},"Radial sunburst rays emanating from a center point",[30192,66694],{"component":66684},[23,66696,30196],{"id":24798},[30198,66698],{":props":66699},"[{\"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,66701,30204],{"id":30203},[246,66703,66704,66753,66804,66852,66902],{":tabs":1557},[212,66705,66707],{"className":334,"code":66706,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,66708,66709,66717,66724,66733,66741,66745],{"__ignoreMap":178},[220,66710,66711,66713,66715],{"class":222,"line":223},[220,66712,343],{"class":264},[220,66714,347],{"class":346},[220,66716,359],{"class":264},[220,66718,66719,66721],{"class":222,"line":179},[220,66720,364],{"class":264},[220,66722,66723],{"class":346},"SunBurst\n",[220,66725,66726,66728,66730],{"class":222,"line":389},[220,66727,7882],{"class":226},[220,66729,353],{"class":264},[220,66731,66732],{"class":230},"\"#ffdd88\"\n",[220,66734,66735,66737,66739],{"class":222,"line":399},[220,66736,15666],{"class":226},[220,66738,353],{"class":264},[220,66740,7897],{"class":230},[220,66742,66743],{"class":222,"line":644},[220,66744,1234],{"class":264},[220,66746,66747,66749,66751],{"class":222,"line":650},[220,66748,402],{"class":264},[220,66750,347],{"class":346},[220,66752,359],{"class":264},[212,66754,66756],{"className":409,"code":66755,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,66757,66758,66766,66772,66780,66792,66796],{"__ignoreMap":178},[220,66759,66760,66762,66764],{"class":222,"line":223},[220,66761,343],{"class":264},[220,66763,347],{"class":420},[220,66765,359],{"class":264},[220,66767,66768,66770],{"class":222,"line":179},[220,66769,364],{"class":264},[220,66771,66723],{"class":420},[220,66773,66774,66776,66778],{"class":222,"line":389},[220,66775,7882],{"class":226},[220,66777,353],{"class":260},[220,66779,66732],{"class":230},[220,66781,66782,66784,66786,66788,66790],{"class":222,"line":399},[220,66783,7892],{"class":226},[220,66785,353],{"class":260},[220,66787,743],{"class":264},[220,66789,4545],{"class":420},[220,66791,749],{"class":264},[220,66793,66794],{"class":222,"line":644},[220,66795,1234],{"class":264},[220,66797,66798,66800,66802],{"class":222,"line":650},[220,66799,402],{"class":264},[220,66801,347],{"class":420},[220,66803,359],{"class":264},[212,66805,66806],{"className":2844,"code":66755,"language":2846,"meta":178,"style":178},[99,66807,66808,66816,66822,66830,66840,66844],{"__ignoreMap":178},[220,66809,66810,66812,66814],{"class":222,"line":223},[220,66811,343],{"class":264},[220,66813,347],{"class":420},[220,66815,359],{"class":264},[220,66817,66818,66820],{"class":222,"line":179},[220,66819,364],{"class":264},[220,66821,66723],{"class":420},[220,66823,66824,66826,66828],{"class":222,"line":389},[220,66825,7882],{"class":226},[220,66827,353],{"class":264},[220,66829,66732],{"class":230},[220,66831,66832,66834,66836,66838],{"class":222,"line":399},[220,66833,7892],{"class":226},[220,66835,28138],{"class":264},[220,66837,4545],{"class":420},[220,66839,749],{"class":264},[220,66841,66842],{"class":222,"line":644},[220,66843,1234],{"class":264},[220,66845,66846,66848,66850],{"class":222,"line":650},[220,66847,402],{"class":264},[220,66849,347],{"class":420},[220,66851,359],{"class":264},[212,66853,66854],{"className":468,"code":66755,"language":469,"meta":178,"style":178},[99,66855,66856,66864,66870,66878,66890,66894],{"__ignoreMap":178},[220,66857,66858,66860,66862],{"class":222,"line":223},[220,66859,343],{"class":264},[220,66861,347],{"class":420},[220,66863,359],{"class":264},[220,66865,66866,66868],{"class":222,"line":179},[220,66867,364],{"class":264},[220,66869,66723],{"class":420},[220,66871,66872,66874,66876],{"class":222,"line":389},[220,66873,7882],{"class":226},[220,66875,353],{"class":260},[220,66877,66732],{"class":230},[220,66879,66880,66882,66884,66886,66888],{"class":222,"line":399},[220,66881,7892],{"class":226},[220,66883,353],{"class":260},[220,66885,743],{"class":264},[220,66887,4545],{"class":420},[220,66889,749],{"class":264},[220,66891,66892],{"class":222,"line":644},[220,66893,1234],{"class":264},[220,66895,66896,66898,66900],{"class":222,"line":650},[220,66897,402],{"class":264},[220,66899,347],{"class":420},[220,66901,359],{"class":264},[212,66903,66905],{"className":251,"code":66904,"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,66906,66907,66917,66921,66935,66939,66957,66961],{"__ignoreMap":178},[220,66908,66909,66911,66913,66915],{"class":222,"line":223},[220,66910,261],{"class":260},[220,66912,9763],{"class":264},[220,66914,268],{"class":260},[220,66916,9768],{"class":230},[220,66918,66919],{"class":222,"line":179},[220,66920,647],{"emptyLinePlaceholder":194},[220,66922,66923,66925,66927,66929,66931,66933],{"class":222,"line":389},[220,66924,1735],{"class":260},[220,66926,1738],{"class":420},[220,66928,1741],{"class":260},[220,66930,1744],{"class":260},[220,66932,1747],{"class":226},[220,66934,1750],{"class":264},[220,66936,66937],{"class":222,"line":399},[220,66938,1765],{"class":264},[220,66940,66941,66943,66946,66948,66951,66953,66955],{"class":222,"line":644},[220,66942,1770],{"class":264},[220,66944,66945],{"class":230},"'SunBurst'",[220,66947,1776],{"class":264},[220,66949,66950],{"class":230},"'#ffdd88'",[220,66952,4812],{"class":264},[220,66954,4545],{"class":420},[220,66956,1782],{"class":264},[220,66958,66959],{"class":222,"line":650},[220,66960,1787],{"class":264},[220,66962,66963],{"class":222,"line":656},[220,66964,1792],{"class":264},[1504,66966,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66968},[66969,66970],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":66684,"description":66692},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":66977,"title":66978,"body":66979,"category":31677,"componentType":24147,"description":66986,"extension":191,"meta":67247,"navigation":194,"path":67248,"requiresChild":194,"seo":67249,"stem":67250,"__hash__":67251},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":66980,"toc":67243},[66981,66984,66987,66989,66991,66994,66996,67241],[11,66982,66978],{"id":66983},"surface3d",[15,66985,66986],{},"Drapes child content over a 3D wave surface with perspective and lighting",[30192,66988],{"component":66978},[23,66990,30196],{"id":24798},[30198,66992],{":props":66993},"[{\"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,66995,30204],{"id":30203},[246,66997,66998,67043,67087,67131,67175],{":tabs":1557},[212,66999,67001],{"className":334,"code":67000,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,67002,67003,67011,67019,67027,67035],{"__ignoreMap":178},[220,67004,67005,67007,67009],{"class":222,"line":223},[220,67006,343],{"class":264},[220,67008,347],{"class":346},[220,67010,359],{"class":264},[220,67012,67013,67015,67017],{"class":222,"line":179},[220,67014,364],{"class":264},[220,67016,66978],{"class":346},[220,67018,359],{"class":264},[220,67020,67021,67023,67025],{"class":222,"line":389},[220,67022,2550],{"class":264},[220,67024,2553],{"class":346},[220,67026,386],{"class":264},[220,67028,67029,67031,67033],{"class":222,"line":399},[220,67030,2567],{"class":264},[220,67032,66978],{"class":346},[220,67034,359],{"class":264},[220,67036,67037,67039,67041],{"class":222,"line":644},[220,67038,402],{"class":264},[220,67040,347],{"class":346},[220,67042,359],{"class":264},[212,67044,67045],{"className":409,"code":67000,"language":411,"meta":178,"style":178},[99,67046,67047,67055,67063,67071,67079],{"__ignoreMap":178},[220,67048,67049,67051,67053],{"class":222,"line":223},[220,67050,343],{"class":264},[220,67052,347],{"class":420},[220,67054,359],{"class":264},[220,67056,67057,67059,67061],{"class":222,"line":179},[220,67058,364],{"class":264},[220,67060,66978],{"class":420},[220,67062,359],{"class":264},[220,67064,67065,67067,67069],{"class":222,"line":389},[220,67066,2550],{"class":264},[220,67068,2553],{"class":420},[220,67070,386],{"class":264},[220,67072,67073,67075,67077],{"class":222,"line":399},[220,67074,2567],{"class":264},[220,67076,66978],{"class":420},[220,67078,359],{"class":264},[220,67080,67081,67083,67085],{"class":222,"line":644},[220,67082,402],{"class":264},[220,67084,347],{"class":420},[220,67086,359],{"class":264},[212,67088,67089],{"className":2844,"code":67000,"language":2846,"meta":178,"style":178},[99,67090,67091,67099,67107,67115,67123],{"__ignoreMap":178},[220,67092,67093,67095,67097],{"class":222,"line":223},[220,67094,343],{"class":264},[220,67096,347],{"class":420},[220,67098,359],{"class":264},[220,67100,67101,67103,67105],{"class":222,"line":179},[220,67102,364],{"class":264},[220,67104,66978],{"class":420},[220,67106,359],{"class":264},[220,67108,67109,67111,67113],{"class":222,"line":389},[220,67110,2550],{"class":264},[220,67112,2553],{"class":420},[220,67114,386],{"class":264},[220,67116,67117,67119,67121],{"class":222,"line":399},[220,67118,2567],{"class":264},[220,67120,66978],{"class":420},[220,67122,359],{"class":264},[220,67124,67125,67127,67129],{"class":222,"line":644},[220,67126,402],{"class":264},[220,67128,347],{"class":420},[220,67130,359],{"class":264},[212,67132,67133],{"className":468,"code":67000,"language":469,"meta":178,"style":178},[99,67134,67135,67143,67151,67159,67167],{"__ignoreMap":178},[220,67136,67137,67139,67141],{"class":222,"line":223},[220,67138,343],{"class":264},[220,67140,347],{"class":420},[220,67142,359],{"class":264},[220,67144,67145,67147,67149],{"class":222,"line":179},[220,67146,364],{"class":264},[220,67148,66978],{"class":420},[220,67150,359],{"class":264},[220,67152,67153,67155,67157],{"class":222,"line":389},[220,67154,2550],{"class":264},[220,67156,2553],{"class":420},[220,67158,386],{"class":264},[220,67160,67161,67163,67165],{"class":222,"line":399},[220,67162,2567],{"class":264},[220,67164,66978],{"class":420},[220,67166,359],{"class":264},[220,67168,67169,67171,67173],{"class":222,"line":644},[220,67170,402],{"class":264},[220,67172,347],{"class":420},[220,67174,359],{"class":264},[212,67176,67178],{"className":251,"code":67177,"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,67179,67180,67190,67194,67208,67212,67221,67229,67233,67237],{"__ignoreMap":178},[220,67181,67182,67184,67186,67188],{"class":222,"line":223},[220,67183,261],{"class":260},[220,67185,9763],{"class":264},[220,67187,268],{"class":260},[220,67189,9768],{"class":230},[220,67191,67192],{"class":222,"line":179},[220,67193,647],{"emptyLinePlaceholder":194},[220,67195,67196,67198,67200,67202,67204,67206],{"class":222,"line":389},[220,67197,1735],{"class":260},[220,67199,1738],{"class":420},[220,67201,1741],{"class":260},[220,67203,1744],{"class":260},[220,67205,1747],{"class":226},[220,67207,1750],{"class":264},[220,67209,67210],{"class":222,"line":399},[220,67211,1765],{"class":264},[220,67213,67214,67216,67219],{"class":222,"line":644},[220,67215,1770],{"class":264},[220,67217,67218],{"class":230},"'Surface3D'",[220,67220,5255],{"class":264},[220,67222,67223,67225,67227],{"class":222,"line":650},[220,67224,5260],{"class":264},[220,67226,3206],{"class":230},[220,67228,2465],{"class":264},[220,67230,67231],{"class":222,"line":656},[220,67232,5277],{"class":264},[220,67234,67235],{"class":222,"line":673},[220,67236,1787],{"class":264},[220,67238,67239],{"class":222,"line":682},[220,67240,1792],{"class":264},[1504,67242,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":67244},[67245,67246],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":66978,"description":66986},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":67253,"title":12258,"body":67254,"category":31344,"componentType":24141,"description":67261,"extension":191,"meta":67446,"navigation":194,"path":67447,"requiresChild":30811,"seo":67448,"stem":67449,"__hash__":67450},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":67255,"toc":67442},[67256,67259,67262,67264,67266,67269,67271,67440],[11,67257,12258],{"id":67258},"swirl",[15,67260,67261],{},"Flowing swirl pattern with multi-layered noise",[30192,67263],{"component":12258},[23,67265,30196],{"id":24798},[30198,67267],{":props":67268},"[{\"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,67270,30204],{"id":30203},[246,67272,67273,67302,67330,67358,67386],{":tabs":1557},[212,67274,67276],{"className":334,"code":67275,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,67277,67278,67286,67294],{"__ignoreMap":178},[220,67279,67280,67282,67284],{"class":222,"line":223},[220,67281,343],{"class":264},[220,67283,347],{"class":346},[220,67285,359],{"class":264},[220,67287,67288,67290,67292],{"class":222,"line":179},[220,67289,364],{"class":264},[220,67291,12258],{"class":346},[220,67293,386],{"class":264},[220,67295,67296,67298,67300],{"class":222,"line":389},[220,67297,402],{"class":264},[220,67299,347],{"class":346},[220,67301,359],{"class":264},[212,67303,67304],{"className":409,"code":67275,"language":411,"meta":178,"style":178},[99,67305,67306,67314,67322],{"__ignoreMap":178},[220,67307,67308,67310,67312],{"class":222,"line":223},[220,67309,343],{"class":264},[220,67311,347],{"class":420},[220,67313,359],{"class":264},[220,67315,67316,67318,67320],{"class":222,"line":179},[220,67317,364],{"class":264},[220,67319,12258],{"class":420},[220,67321,386],{"class":264},[220,67323,67324,67326,67328],{"class":222,"line":389},[220,67325,402],{"class":264},[220,67327,347],{"class":420},[220,67329,359],{"class":264},[212,67331,67332],{"className":2844,"code":67275,"language":2846,"meta":178,"style":178},[99,67333,67334,67342,67350],{"__ignoreMap":178},[220,67335,67336,67338,67340],{"class":222,"line":223},[220,67337,343],{"class":264},[220,67339,347],{"class":420},[220,67341,359],{"class":264},[220,67343,67344,67346,67348],{"class":222,"line":179},[220,67345,364],{"class":264},[220,67347,12258],{"class":420},[220,67349,386],{"class":264},[220,67351,67352,67354,67356],{"class":222,"line":389},[220,67353,402],{"class":264},[220,67355,347],{"class":420},[220,67357,359],{"class":264},[212,67359,67360],{"className":468,"code":67275,"language":469,"meta":178,"style":178},[99,67361,67362,67370,67378],{"__ignoreMap":178},[220,67363,67364,67366,67368],{"class":222,"line":223},[220,67365,343],{"class":264},[220,67367,347],{"class":420},[220,67369,359],{"class":264},[220,67371,67372,67374,67376],{"class":222,"line":179},[220,67373,364],{"class":264},[220,67375,12258],{"class":420},[220,67377,386],{"class":264},[220,67379,67380,67382,67384],{"class":222,"line":389},[220,67381,402],{"class":264},[220,67383,347],{"class":420},[220,67385,359],{"class":264},[212,67387,67389],{"className":251,"code":67388,"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,67390,67391,67401,67405,67419,67423,67432,67436],{"__ignoreMap":178},[220,67392,67393,67395,67397,67399],{"class":222,"line":223},[220,67394,261],{"class":260},[220,67396,9763],{"class":264},[220,67398,268],{"class":260},[220,67400,9768],{"class":230},[220,67402,67403],{"class":222,"line":179},[220,67404,647],{"emptyLinePlaceholder":194},[220,67406,67407,67409,67411,67413,67415,67417],{"class":222,"line":389},[220,67408,1735],{"class":260},[220,67410,1738],{"class":420},[220,67412,1741],{"class":260},[220,67414,1744],{"class":260},[220,67416,1747],{"class":226},[220,67418,1750],{"class":264},[220,67420,67421],{"class":222,"line":399},[220,67422,1765],{"class":264},[220,67424,67425,67427,67430],{"class":222,"line":644},[220,67426,1770],{"class":264},[220,67428,67429],{"class":230},"'Swirl'",[220,67431,2465],{"class":264},[220,67433,67434],{"class":222,"line":650},[220,67435,1787],{"class":264},[220,67437,67438],{"class":222,"line":656},[220,67439,1792],{"class":264},[1504,67441,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":67443},[67444,67445],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":12258,"description":67261},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":67452,"title":67453,"body":67454,"category":14164,"componentType":24141,"description":67461,"extension":191,"meta":67739,"navigation":194,"path":67740,"requiresChild":30811,"seo":67741,"stem":67742,"__hash__":67743},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":67455,"toc":67735},[67456,67459,67462,67464,67466,67469,67471,67733],[11,67457,67453],{"id":67458},"teardrop",[15,67460,67461],{},"Teardrop — a rounded bulb tapering to a sharp point",[30192,67463],{"component":67453},[23,67465,30196],{"id":24798},[30198,67467],{":props":67468},"[{\"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,67470,30204],{"id":30203},[246,67472,67473,67522,67573,67621,67671],{":tabs":1557},[212,67474,67476],{"className":334,"code":67475,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,67477,67478,67486,67493,67501,67510,67514],{"__ignoreMap":178},[220,67479,67480,67482,67484],{"class":222,"line":223},[220,67481,343],{"class":264},[220,67483,347],{"class":346},[220,67485,359],{"class":264},[220,67487,67488,67490],{"class":222,"line":179},[220,67489,364],{"class":264},[220,67491,67492],{"class":346},"Teardrop\n",[220,67494,67495,67497,67499],{"class":222,"line":389},[220,67496,7882],{"class":226},[220,67498,353],{"class":264},[220,67500,7838],{"class":230},[220,67502,67503,67505,67507],{"class":222,"line":399},[220,67504,15666],{"class":226},[220,67506,353],{"class":264},[220,67508,67509],{"class":230},"\"0.22\"\n",[220,67511,67512],{"class":222,"line":644},[220,67513,1234],{"class":264},[220,67515,67516,67518,67520],{"class":222,"line":650},[220,67517,402],{"class":264},[220,67519,347],{"class":346},[220,67521,359],{"class":264},[212,67523,67525],{"className":409,"code":67524,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,67526,67527,67535,67541,67549,67561,67565],{"__ignoreMap":178},[220,67528,67529,67531,67533],{"class":222,"line":223},[220,67530,343],{"class":264},[220,67532,347],{"class":420},[220,67534,359],{"class":264},[220,67536,67537,67539],{"class":222,"line":179},[220,67538,364],{"class":264},[220,67540,67492],{"class":420},[220,67542,67543,67545,67547],{"class":222,"line":389},[220,67544,7882],{"class":226},[220,67546,353],{"class":260},[220,67548,7838],{"class":230},[220,67550,67551,67553,67555,67557,67559],{"class":222,"line":399},[220,67552,7892],{"class":226},[220,67554,353],{"class":260},[220,67556,743],{"class":264},[220,67558,22212],{"class":420},[220,67560,749],{"class":264},[220,67562,67563],{"class":222,"line":644},[220,67564,1234],{"class":264},[220,67566,67567,67569,67571],{"class":222,"line":650},[220,67568,402],{"class":264},[220,67570,347],{"class":420},[220,67572,359],{"class":264},[212,67574,67575],{"className":2844,"code":67524,"language":2846,"meta":178,"style":178},[99,67576,67577,67585,67591,67599,67609,67613],{"__ignoreMap":178},[220,67578,67579,67581,67583],{"class":222,"line":223},[220,67580,343],{"class":264},[220,67582,347],{"class":420},[220,67584,359],{"class":264},[220,67586,67587,67589],{"class":222,"line":179},[220,67588,364],{"class":264},[220,67590,67492],{"class":420},[220,67592,67593,67595,67597],{"class":222,"line":389},[220,67594,7882],{"class":226},[220,67596,353],{"class":264},[220,67598,7838],{"class":230},[220,67600,67601,67603,67605,67607],{"class":222,"line":399},[220,67602,7892],{"class":226},[220,67604,28138],{"class":264},[220,67606,22212],{"class":420},[220,67608,749],{"class":264},[220,67610,67611],{"class":222,"line":644},[220,67612,1234],{"class":264},[220,67614,67615,67617,67619],{"class":222,"line":650},[220,67616,402],{"class":264},[220,67618,347],{"class":420},[220,67620,359],{"class":264},[212,67622,67623],{"className":468,"code":67524,"language":469,"meta":178,"style":178},[99,67624,67625,67633,67639,67647,67659,67663],{"__ignoreMap":178},[220,67626,67627,67629,67631],{"class":222,"line":223},[220,67628,343],{"class":264},[220,67630,347],{"class":420},[220,67632,359],{"class":264},[220,67634,67635,67637],{"class":222,"line":179},[220,67636,364],{"class":264},[220,67638,67492],{"class":420},[220,67640,67641,67643,67645],{"class":222,"line":389},[220,67642,7882],{"class":226},[220,67644,353],{"class":260},[220,67646,7838],{"class":230},[220,67648,67649,67651,67653,67655,67657],{"class":222,"line":399},[220,67650,7892],{"class":226},[220,67652,353],{"class":260},[220,67654,743],{"class":264},[220,67656,22212],{"class":420},[220,67658,749],{"class":264},[220,67660,67661],{"class":222,"line":644},[220,67662,1234],{"class":264},[220,67664,67665,67667,67669],{"class":222,"line":650},[220,67666,402],{"class":264},[220,67668,347],{"class":420},[220,67670,359],{"class":264},[212,67672,67674],{"className":251,"code":67673,"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,67675,67676,67686,67690,67704,67708,67725,67729],{"__ignoreMap":178},[220,67677,67678,67680,67682,67684],{"class":222,"line":223},[220,67679,261],{"class":260},[220,67681,9763],{"class":264},[220,67683,268],{"class":260},[220,67685,9768],{"class":230},[220,67687,67688],{"class":222,"line":179},[220,67689,647],{"emptyLinePlaceholder":194},[220,67691,67692,67694,67696,67698,67700,67702],{"class":222,"line":389},[220,67693,1735],{"class":260},[220,67695,1738],{"class":420},[220,67697,1741],{"class":260},[220,67699,1744],{"class":260},[220,67701,1747],{"class":226},[220,67703,1750],{"class":264},[220,67705,67706],{"class":222,"line":399},[220,67707,1765],{"class":264},[220,67709,67710,67712,67715,67717,67719,67721,67723],{"class":222,"line":644},[220,67711,1770],{"class":264},[220,67713,67714],{"class":230},"'Teardrop'",[220,67716,1776],{"class":264},[220,67718,8417],{"class":230},[220,67720,4812],{"class":264},[220,67722,22212],{"class":420},[220,67724,1782],{"class":264},[220,67726,67727],{"class":222,"line":650},[220,67728,1787],{"class":264},[220,67730,67731],{"class":222,"line":656},[220,67732,1792],{"class":264},[1504,67734,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67736},[67737,67738],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":67453,"description":67461},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":67745,"title":67746,"body":67747,"category":31344,"componentType":24141,"description":67753,"extension":191,"meta":67983,"navigation":194,"path":67984,"requiresChild":30811,"seo":67985,"stem":67986,"__hash__":67987},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":67748,"toc":67979},[67749,67751,67754,67756,67758,67761,67763,67977],[11,67750,67746],{"id":13900},[15,67752,67753],{},"Single-line text with any Google font, rendered crisp via a glyph texture",[30192,67755],{"component":67746},[23,67757,30196],{"id":24798},[30198,67759],{":props":67760},"[{\"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\":\"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,67762,30204],{"id":30203},[246,67764,67765,67805,67843,67881,67919],{":tabs":1557},[212,67766,67768],{"className":334,"code":67767,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,67769,67770,67778,67785,67793,67797],{"__ignoreMap":178},[220,67771,67772,67774,67776],{"class":222,"line":223},[220,67773,343],{"class":264},[220,67775,347],{"class":346},[220,67777,359],{"class":264},[220,67779,67780,67782],{"class":222,"line":179},[220,67781,364],{"class":264},[220,67783,67784],{"class":346},"Text\n",[220,67786,67787,67789,67791],{"class":222,"line":389},[220,67788,7882],{"class":226},[220,67790,353],{"class":264},[220,67792,7838],{"class":230},[220,67794,67795],{"class":222,"line":399},[220,67796,1234],{"class":264},[220,67798,67799,67801,67803],{"class":222,"line":644},[220,67800,402],{"class":264},[220,67802,347],{"class":346},[220,67804,359],{"class":264},[212,67806,67807],{"className":409,"code":67767,"language":411,"meta":178,"style":178},[99,67808,67809,67817,67823,67831,67835],{"__ignoreMap":178},[220,67810,67811,67813,67815],{"class":222,"line":223},[220,67812,343],{"class":264},[220,67814,347],{"class":420},[220,67816,359],{"class":264},[220,67818,67819,67821],{"class":222,"line":179},[220,67820,364],{"class":264},[220,67822,67784],{"class":420},[220,67824,67825,67827,67829],{"class":222,"line":389},[220,67826,7882],{"class":226},[220,67828,353],{"class":260},[220,67830,7838],{"class":230},[220,67832,67833],{"class":222,"line":399},[220,67834,1234],{"class":264},[220,67836,67837,67839,67841],{"class":222,"line":644},[220,67838,402],{"class":264},[220,67840,347],{"class":420},[220,67842,359],{"class":264},[212,67844,67845],{"className":2844,"code":67767,"language":2846,"meta":178,"style":178},[99,67846,67847,67855,67861,67869,67873],{"__ignoreMap":178},[220,67848,67849,67851,67853],{"class":222,"line":223},[220,67850,343],{"class":264},[220,67852,347],{"class":420},[220,67854,359],{"class":264},[220,67856,67857,67859],{"class":222,"line":179},[220,67858,364],{"class":264},[220,67860,67784],{"class":420},[220,67862,67863,67865,67867],{"class":222,"line":389},[220,67864,7882],{"class":226},[220,67866,353],{"class":264},[220,67868,7838],{"class":230},[220,67870,67871],{"class":222,"line":399},[220,67872,1234],{"class":264},[220,67874,67875,67877,67879],{"class":222,"line":644},[220,67876,402],{"class":264},[220,67878,347],{"class":420},[220,67880,359],{"class":264},[212,67882,67883],{"className":468,"code":67767,"language":469,"meta":178,"style":178},[99,67884,67885,67893,67899,67907,67911],{"__ignoreMap":178},[220,67886,67887,67889,67891],{"class":222,"line":223},[220,67888,343],{"class":264},[220,67890,347],{"class":420},[220,67892,359],{"class":264},[220,67894,67895,67897],{"class":222,"line":179},[220,67896,364],{"class":264},[220,67898,67784],{"class":420},[220,67900,67901,67903,67905],{"class":222,"line":389},[220,67902,7882],{"class":226},[220,67904,353],{"class":260},[220,67906,7838],{"class":230},[220,67908,67909],{"class":222,"line":399},[220,67910,1234],{"class":264},[220,67912,67913,67915,67917],{"class":222,"line":644},[220,67914,402],{"class":264},[220,67916,347],{"class":420},[220,67918,359],{"class":264},[212,67920,67922],{"className":251,"code":67921,"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,67923,67924,67934,67938,67952,67956,67969,67973],{"__ignoreMap":178},[220,67925,67926,67928,67930,67932],{"class":222,"line":223},[220,67927,261],{"class":260},[220,67929,9763],{"class":264},[220,67931,268],{"class":260},[220,67933,9768],{"class":230},[220,67935,67936],{"class":222,"line":179},[220,67937,647],{"emptyLinePlaceholder":194},[220,67939,67940,67942,67944,67946,67948,67950],{"class":222,"line":389},[220,67941,1735],{"class":260},[220,67943,1738],{"class":420},[220,67945,1741],{"class":260},[220,67947,1744],{"class":260},[220,67949,1747],{"class":226},[220,67951,1750],{"class":264},[220,67953,67954],{"class":222,"line":399},[220,67955,1765],{"class":264},[220,67957,67958,67960,67963,67965,67967],{"class":222,"line":644},[220,67959,1770],{"class":264},[220,67961,67962],{"class":230},"'Text'",[220,67964,1776],{"class":264},[220,67966,8417],{"class":230},[220,67968,1782],{"class":264},[220,67970,67971],{"class":222,"line":650},[220,67972,1787],{"class":264},[220,67974,67975],{"class":222,"line":656},[220,67976,1792],{"class":264},[1504,67978,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67980},[67981,67982],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":67746,"description":67753},"docs\u002Fcomponents\u002FText","XVakxHcsnsleR-OPeuBjXXWqbtjRLBHmrZn_iCmGLSo",{"id":67989,"title":21431,"body":67990,"category":33488,"componentType":24141,"description":67997,"extension":191,"meta":68238,"navigation":194,"path":68239,"requiresChild":30811,"seo":68240,"stem":68241,"__hash__":68242},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":67991,"toc":68234},[67992,67995,67998,68000,68002,68005,68007,68232],[11,67993,21431],{"id":67994},"thinfilm",[15,67996,67997],{},"Iridescent thin-film edge",[30192,67999],{"component":21431},[23,68001,30196],{"id":24798},[30198,68003],{":props":68004},"[{\"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,68006,30204],{"id":30203},[246,68008,68009,68049,68092,68132,68174],{":tabs":1557},[212,68010,68012],{"className":334,"code":68011,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,68013,68014,68022,68029,68037,68041],{"__ignoreMap":178},[220,68015,68016,68018,68020],{"class":222,"line":223},[220,68017,343],{"class":264},[220,68019,347],{"class":346},[220,68021,359],{"class":264},[220,68023,68024,68026],{"class":222,"line":179},[220,68025,364],{"class":264},[220,68027,68028],{"class":346},"ThinFilm\n",[220,68030,68031,68033,68035],{"class":222,"line":389},[220,68032,18633],{"class":226},[220,68034,353],{"class":264},[220,68036,33544],{"class":230},[220,68038,68039],{"class":222,"line":399},[220,68040,1234],{"class":264},[220,68042,68043,68045,68047],{"class":222,"line":644},[220,68044,402],{"class":264},[220,68046,347],{"class":346},[220,68048,359],{"class":264},[212,68050,68052],{"className":409,"code":68051,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,68053,68054,68062,68068,68080,68084],{"__ignoreMap":178},[220,68055,68056,68058,68060],{"class":222,"line":223},[220,68057,343],{"class":264},[220,68059,347],{"class":420},[220,68061,359],{"class":264},[220,68063,68064,68066],{"class":222,"line":179},[220,68065,364],{"class":264},[220,68067,68028],{"class":420},[220,68069,68070,68072,68074,68076,68078],{"class":222,"line":389},[220,68071,18744],{"class":226},[220,68073,353],{"class":260},[220,68075,743],{"class":264},[220,68077,6923],{"class":420},[220,68079,749],{"class":264},[220,68081,68082],{"class":222,"line":399},[220,68083,1234],{"class":264},[220,68085,68086,68088,68090],{"class":222,"line":644},[220,68087,402],{"class":264},[220,68089,347],{"class":420},[220,68091,359],{"class":264},[212,68093,68094],{"className":2844,"code":68051,"language":2846,"meta":178,"style":178},[99,68095,68096,68104,68110,68120,68124],{"__ignoreMap":178},[220,68097,68098,68100,68102],{"class":222,"line":223},[220,68099,343],{"class":264},[220,68101,347],{"class":420},[220,68103,359],{"class":264},[220,68105,68106,68108],{"class":222,"line":179},[220,68107,364],{"class":264},[220,68109,68028],{"class":420},[220,68111,68112,68114,68116,68118],{"class":222,"line":389},[220,68113,18744],{"class":226},[220,68115,28138],{"class":264},[220,68117,6923],{"class":420},[220,68119,749],{"class":264},[220,68121,68122],{"class":222,"line":399},[220,68123,1234],{"class":264},[220,68125,68126,68128,68130],{"class":222,"line":644},[220,68127,402],{"class":264},[220,68129,347],{"class":420},[220,68131,359],{"class":264},[212,68133,68134],{"className":468,"code":68051,"language":469,"meta":178,"style":178},[99,68135,68136,68144,68150,68162,68166],{"__ignoreMap":178},[220,68137,68138,68140,68142],{"class":222,"line":223},[220,68139,343],{"class":264},[220,68141,347],{"class":420},[220,68143,359],{"class":264},[220,68145,68146,68148],{"class":222,"line":179},[220,68147,364],{"class":264},[220,68149,68028],{"class":420},[220,68151,68152,68154,68156,68158,68160],{"class":222,"line":389},[220,68153,18744],{"class":226},[220,68155,353],{"class":260},[220,68157,743],{"class":264},[220,68159,6923],{"class":420},[220,68161,749],{"class":264},[220,68163,68164],{"class":222,"line":399},[220,68165,1234],{"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: 'ThinFilm', props: { intensity: 1 } }\n ]\n})\n",[99,68178,68179,68189,68193,68207,68211,68224,68228],{"__ignoreMap":178},[220,68180,68181,68183,68185,68187],{"class":222,"line":223},[220,68182,261],{"class":260},[220,68184,9763],{"class":264},[220,68186,268],{"class":260},[220,68188,9768],{"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,68220,68222],{"class":222,"line":644},[220,68214,1770],{"class":264},[220,68216,68217],{"class":230},"'ThinFilm'",[220,68219,30484],{"class":264},[220,68221,6923],{"class":420},[220,68223,1782],{"class":264},[220,68225,68226],{"class":222,"line":650},[220,68227,1787],{"class":264},[220,68229,68230],{"class":222,"line":656},[220,68231,1792],{"class":264},[1504,68233,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68235},[68236,68237],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":21431,"description":67997},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":68244,"title":68245,"body":68246,"category":30515,"componentType":24147,"description":68253,"extension":191,"meta":68570,"navigation":194,"path":68571,"requiresChild":194,"seo":68572,"stem":68573,"__hash__":68574},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":68247,"toc":68566},[68248,68251,68254,68256,68258,68261,68263,68564],[11,68249,68245],{"id":68250},"tiltshift",[15,68252,68253],{},"Selective focus blur mimicking tilt-shift photography",[30192,68255],{"component":68245},[23,68257,30196],{"id":24798},[30198,68259],{":props":68260},"[{\"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,68262,30204],{"id":30203},[246,68264,68265,68321,68380,68436,68494],{":tabs":1557},[212,68266,68268],{"className":334,"code":68267,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,68269,68270,68278,68285,68293,68297,68305,68313],{"__ignoreMap":178},[220,68271,68272,68274,68276],{"class":222,"line":223},[220,68273,343],{"class":264},[220,68275,347],{"class":346},[220,68277,359],{"class":264},[220,68279,68280,68282],{"class":222,"line":179},[220,68281,364],{"class":264},[220,68283,68284],{"class":346},"TiltShift\n",[220,68286,68287,68289,68291],{"class":222,"line":389},[220,68288,18633],{"class":226},[220,68290,353],{"class":264},[220,68292,32532],{"class":230},[220,68294,68295],{"class":222,"line":399},[220,68296,30240],{"class":264},[220,68298,68299,68301,68303],{"class":222,"line":644},[220,68300,2550],{"class":264},[220,68302,2553],{"class":346},[220,68304,386],{"class":264},[220,68306,68307,68309,68311],{"class":222,"line":650},[220,68308,2567],{"class":264},[220,68310,68245],{"class":346},[220,68312,359],{"class":264},[220,68314,68315,68317,68319],{"class":222,"line":656},[220,68316,402],{"class":264},[220,68318,347],{"class":346},[220,68320,359],{"class":264},[212,68322,68324],{"className":409,"code":68323,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,68325,68326,68334,68340,68352,68356,68364,68372],{"__ignoreMap":178},[220,68327,68328,68330,68332],{"class":222,"line":223},[220,68329,343],{"class":264},[220,68331,347],{"class":420},[220,68333,359],{"class":264},[220,68335,68336,68338],{"class":222,"line":179},[220,68337,364],{"class":264},[220,68339,68284],{"class":420},[220,68341,68342,68344,68346,68348,68350],{"class":222,"line":389},[220,68343,18744],{"class":226},[220,68345,353],{"class":260},[220,68347,743],{"class":264},[220,68349,32590],{"class":420},[220,68351,749],{"class":264},[220,68353,68354],{"class":222,"line":399},[220,68355,30240],{"class":264},[220,68357,68358,68360,68362],{"class":222,"line":644},[220,68359,2550],{"class":264},[220,68361,2553],{"class":420},[220,68363,386],{"class":264},[220,68365,68366,68368,68370],{"class":222,"line":650},[220,68367,2567],{"class":264},[220,68369,68245],{"class":420},[220,68371,359],{"class":264},[220,68373,68374,68376,68378],{"class":222,"line":656},[220,68375,402],{"class":264},[220,68377,347],{"class":420},[220,68379,359],{"class":264},[212,68381,68382],{"className":2844,"code":68323,"language":2846,"meta":178,"style":178},[99,68383,68384,68392,68398,68408,68412,68420,68428],{"__ignoreMap":178},[220,68385,68386,68388,68390],{"class":222,"line":223},[220,68387,343],{"class":264},[220,68389,347],{"class":420},[220,68391,359],{"class":264},[220,68393,68394,68396],{"class":222,"line":179},[220,68395,364],{"class":264},[220,68397,68284],{"class":420},[220,68399,68400,68402,68404,68406],{"class":222,"line":389},[220,68401,18744],{"class":226},[220,68403,28138],{"class":264},[220,68405,32590],{"class":420},[220,68407,749],{"class":264},[220,68409,68410],{"class":222,"line":399},[220,68411,30240],{"class":264},[220,68413,68414,68416,68418],{"class":222,"line":644},[220,68415,2550],{"class":264},[220,68417,2553],{"class":420},[220,68419,386],{"class":264},[220,68421,68422,68424,68426],{"class":222,"line":650},[220,68423,2567],{"class":264},[220,68425,68245],{"class":420},[220,68427,359],{"class":264},[220,68429,68430,68432,68434],{"class":222,"line":656},[220,68431,402],{"class":264},[220,68433,347],{"class":420},[220,68435,359],{"class":264},[212,68437,68438],{"className":468,"code":68323,"language":469,"meta":178,"style":178},[99,68439,68440,68448,68454,68466,68470,68478,68486],{"__ignoreMap":178},[220,68441,68442,68444,68446],{"class":222,"line":223},[220,68443,343],{"class":264},[220,68445,347],{"class":420},[220,68447,359],{"class":264},[220,68449,68450,68452],{"class":222,"line":179},[220,68451,364],{"class":264},[220,68453,68284],{"class":420},[220,68455,68456,68458,68460,68462,68464],{"class":222,"line":389},[220,68457,18744],{"class":226},[220,68459,353],{"class":260},[220,68461,743],{"class":264},[220,68463,32590],{"class":420},[220,68465,749],{"class":264},[220,68467,68468],{"class":222,"line":399},[220,68469,30240],{"class":264},[220,68471,68472,68474,68476],{"class":222,"line":644},[220,68473,2550],{"class":264},[220,68475,2553],{"class":420},[220,68477,386],{"class":264},[220,68479,68480,68482,68484],{"class":222,"line":650},[220,68481,2567],{"class":264},[220,68483,68245],{"class":420},[220,68485,359],{"class":264},[220,68487,68488,68490,68492],{"class":222,"line":656},[220,68489,402],{"class":264},[220,68491,347],{"class":420},[220,68493,359],{"class":264},[212,68495,68497],{"className":251,"code":68496,"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,68498,68499,68509,68513,68527,68531,68544,68552,68556,68560],{"__ignoreMap":178},[220,68500,68501,68503,68505,68507],{"class":222,"line":223},[220,68502,261],{"class":260},[220,68504,9763],{"class":264},[220,68506,268],{"class":260},[220,68508,9768],{"class":230},[220,68510,68511],{"class":222,"line":179},[220,68512,647],{"emptyLinePlaceholder":194},[220,68514,68515,68517,68519,68521,68523,68525],{"class":222,"line":389},[220,68516,1735],{"class":260},[220,68518,1738],{"class":420},[220,68520,1741],{"class":260},[220,68522,1744],{"class":260},[220,68524,1747],{"class":226},[220,68526,1750],{"class":264},[220,68528,68529],{"class":222,"line":399},[220,68530,1765],{"class":264},[220,68532,68533,68535,68538,68540,68542],{"class":222,"line":644},[220,68534,1770],{"class":264},[220,68536,68537],{"class":230},"'TiltShift'",[220,68539,30484],{"class":264},[220,68541,32590],{"class":420},[220,68543,5792],{"class":264},[220,68545,68546,68548,68550],{"class":222,"line":650},[220,68547,5260],{"class":264},[220,68549,3206],{"class":230},[220,68551,2465],{"class":264},[220,68553,68554],{"class":222,"line":656},[220,68555,5277],{"class":264},[220,68557,68558],{"class":222,"line":673},[220,68559,1787],{"class":264},[220,68561,68562],{"class":222,"line":682},[220,68563,1792],{"class":264},[1504,68565,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68567},[68568,68569],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":68245,"description":68253},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":68576,"title":68577,"body":68578,"category":33287,"componentType":24147,"description":68585,"extension":191,"meta":68893,"navigation":194,"path":68894,"requiresChild":194,"seo":68895,"stem":68896,"__hash__":68897},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":68579,"toc":68889},[68580,68583,68586,68588,68590,68593,68595,68887],[11,68581,68577],{"id":68582},"tint",[15,68584,68585],{},"Apply a color tint to the image",[30192,68587],{"component":68577},[23,68589,30196],{"id":24798},[30198,68591],{":props":68592},"[{\"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,68594,30204],{"id":30203},[246,68596,68597,68654,68708,68762,68816],{":tabs":1557},[212,68598,68600],{"className":334,"code":68599,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,68601,68602,68610,68617,68626,68630,68638,68646],{"__ignoreMap":178},[220,68603,68604,68606,68608],{"class":222,"line":223},[220,68605,343],{"class":264},[220,68607,347],{"class":346},[220,68609,359],{"class":264},[220,68611,68612,68614],{"class":222,"line":179},[220,68613,364],{"class":264},[220,68615,68616],{"class":346},"Tint\n",[220,68618,68619,68621,68623],{"class":222,"line":389},[220,68620,7882],{"class":226},[220,68622,353],{"class":264},[220,68624,68625],{"class":230},"\"#ff8800\"\n",[220,68627,68628],{"class":222,"line":399},[220,68629,30240],{"class":264},[220,68631,68632,68634,68636],{"class":222,"line":644},[220,68633,2550],{"class":264},[220,68635,2553],{"class":346},[220,68637,386],{"class":264},[220,68639,68640,68642,68644],{"class":222,"line":650},[220,68641,2567],{"class":264},[220,68643,68577],{"class":346},[220,68645,359],{"class":264},[220,68647,68648,68650,68652],{"class":222,"line":656},[220,68649,402],{"class":264},[220,68651,347],{"class":346},[220,68653,359],{"class":264},[212,68655,68656],{"className":409,"code":68599,"language":411,"meta":178,"style":178},[99,68657,68658,68666,68672,68680,68684,68692,68700],{"__ignoreMap":178},[220,68659,68660,68662,68664],{"class":222,"line":223},[220,68661,343],{"class":264},[220,68663,347],{"class":420},[220,68665,359],{"class":264},[220,68667,68668,68670],{"class":222,"line":179},[220,68669,364],{"class":264},[220,68671,68616],{"class":420},[220,68673,68674,68676,68678],{"class":222,"line":389},[220,68675,7882],{"class":226},[220,68677,353],{"class":260},[220,68679,68625],{"class":230},[220,68681,68682],{"class":222,"line":399},[220,68683,30240],{"class":264},[220,68685,68686,68688,68690],{"class":222,"line":644},[220,68687,2550],{"class":264},[220,68689,2553],{"class":420},[220,68691,386],{"class":264},[220,68693,68694,68696,68698],{"class":222,"line":650},[220,68695,2567],{"class":264},[220,68697,68577],{"class":420},[220,68699,359],{"class":264},[220,68701,68702,68704,68706],{"class":222,"line":656},[220,68703,402],{"class":264},[220,68705,347],{"class":420},[220,68707,359],{"class":264},[212,68709,68710],{"className":2844,"code":68599,"language":2846,"meta":178,"style":178},[99,68711,68712,68720,68726,68734,68738,68746,68754],{"__ignoreMap":178},[220,68713,68714,68716,68718],{"class":222,"line":223},[220,68715,343],{"class":264},[220,68717,347],{"class":420},[220,68719,359],{"class":264},[220,68721,68722,68724],{"class":222,"line":179},[220,68723,364],{"class":264},[220,68725,68616],{"class":420},[220,68727,68728,68730,68732],{"class":222,"line":389},[220,68729,7882],{"class":226},[220,68731,353],{"class":264},[220,68733,68625],{"class":230},[220,68735,68736],{"class":222,"line":399},[220,68737,30240],{"class":264},[220,68739,68740,68742,68744],{"class":222,"line":644},[220,68741,2550],{"class":264},[220,68743,2553],{"class":420},[220,68745,386],{"class":264},[220,68747,68748,68750,68752],{"class":222,"line":650},[220,68749,2567],{"class":264},[220,68751,68577],{"class":420},[220,68753,359],{"class":264},[220,68755,68756,68758,68760],{"class":222,"line":656},[220,68757,402],{"class":264},[220,68759,347],{"class":420},[220,68761,359],{"class":264},[212,68763,68764],{"className":468,"code":68599,"language":469,"meta":178,"style":178},[99,68765,68766,68774,68780,68788,68792,68800,68808],{"__ignoreMap":178},[220,68767,68768,68770,68772],{"class":222,"line":223},[220,68769,343],{"class":264},[220,68771,347],{"class":420},[220,68773,359],{"class":264},[220,68775,68776,68778],{"class":222,"line":179},[220,68777,364],{"class":264},[220,68779,68616],{"class":420},[220,68781,68782,68784,68786],{"class":222,"line":389},[220,68783,7882],{"class":226},[220,68785,353],{"class":260},[220,68787,68625],{"class":230},[220,68789,68790],{"class":222,"line":399},[220,68791,30240],{"class":264},[220,68793,68794,68796,68798],{"class":222,"line":644},[220,68795,2550],{"class":264},[220,68797,2553],{"class":420},[220,68799,386],{"class":264},[220,68801,68802,68804,68806],{"class":222,"line":650},[220,68803,2567],{"class":264},[220,68805,68577],{"class":420},[220,68807,359],{"class":264},[220,68809,68810,68812,68814],{"class":222,"line":656},[220,68811,402],{"class":264},[220,68813,347],{"class":420},[220,68815,359],{"class":264},[212,68817,68819],{"className":251,"code":68818,"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,68820,68821,68831,68835,68849,68853,68867,68875,68879,68883],{"__ignoreMap":178},[220,68822,68823,68825,68827,68829],{"class":222,"line":223},[220,68824,261],{"class":260},[220,68826,9763],{"class":264},[220,68828,268],{"class":260},[220,68830,9768],{"class":230},[220,68832,68833],{"class":222,"line":179},[220,68834,647],{"emptyLinePlaceholder":194},[220,68836,68837,68839,68841,68843,68845,68847],{"class":222,"line":389},[220,68838,1735],{"class":260},[220,68840,1738],{"class":420},[220,68842,1741],{"class":260},[220,68844,1744],{"class":260},[220,68846,1747],{"class":226},[220,68848,1750],{"class":264},[220,68850,68851],{"class":222,"line":399},[220,68852,1765],{"class":264},[220,68854,68855,68857,68860,68862,68865],{"class":222,"line":644},[220,68856,1770],{"class":264},[220,68858,68859],{"class":230},"'Tint'",[220,68861,1776],{"class":264},[220,68863,68864],{"class":230},"'#ff8800'",[220,68866,5792],{"class":264},[220,68868,68869,68871,68873],{"class":222,"line":650},[220,68870,5260],{"class":264},[220,68872,3206],{"class":230},[220,68874,2465],{"class":264},[220,68876,68877],{"class":222,"line":656},[220,68878,5277],{"class":264},[220,68880,68881],{"class":222,"line":673},[220,68882,1787],{"class":264},[220,68884,68885],{"class":222,"line":682},[220,68886,1792],{"class":264},[1504,68888,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68890},[68891,68892],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":68577,"description":68585},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":68899,"title":68900,"body":68901,"category":14164,"componentType":24141,"description":68908,"extension":191,"meta":69138,"navigation":194,"path":69139,"requiresChild":30811,"seo":69140,"stem":69141,"__hash__":69142},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":68902,"toc":69134},[68903,68906,68909,68911,68913,68916,68918,69132],[11,68904,68900],{"id":68905},"trapezoid",[15,68907,68908],{},"Trapezoid with adjustable top and bottom widths and height",[30192,68910],{"component":68900},[23,68912,30196],{"id":24798},[30198,68914],{":props":68915},"[{\"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,68917,30204],{"id":30203},[246,68919,68920,68960,68998,69036,69074],{":tabs":1557},[212,68921,68923],{"className":334,"code":68922,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,68924,68925,68933,68940,68948,68952],{"__ignoreMap":178},[220,68926,68927,68929,68931],{"class":222,"line":223},[220,68928,343],{"class":264},[220,68930,347],{"class":346},[220,68932,359],{"class":264},[220,68934,68935,68937],{"class":222,"line":179},[220,68936,364],{"class":264},[220,68938,68939],{"class":346},"Trapezoid\n",[220,68941,68942,68944,68946],{"class":222,"line":389},[220,68943,7882],{"class":226},[220,68945,353],{"class":264},[220,68947,7838],{"class":230},[220,68949,68950],{"class":222,"line":399},[220,68951,1234],{"class":264},[220,68953,68954,68956,68958],{"class":222,"line":644},[220,68955,402],{"class":264},[220,68957,347],{"class":346},[220,68959,359],{"class":264},[212,68961,68962],{"className":409,"code":68922,"language":411,"meta":178,"style":178},[99,68963,68964,68972,68978,68986,68990],{"__ignoreMap":178},[220,68965,68966,68968,68970],{"class":222,"line":223},[220,68967,343],{"class":264},[220,68969,347],{"class":420},[220,68971,359],{"class":264},[220,68973,68974,68976],{"class":222,"line":179},[220,68975,364],{"class":264},[220,68977,68939],{"class":420},[220,68979,68980,68982,68984],{"class":222,"line":389},[220,68981,7882],{"class":226},[220,68983,353],{"class":260},[220,68985,7838],{"class":230},[220,68987,68988],{"class":222,"line":399},[220,68989,1234],{"class":264},[220,68991,68992,68994,68996],{"class":222,"line":644},[220,68993,402],{"class":264},[220,68995,347],{"class":420},[220,68997,359],{"class":264},[212,68999,69000],{"className":2844,"code":68922,"language":2846,"meta":178,"style":178},[99,69001,69002,69010,69016,69024,69028],{"__ignoreMap":178},[220,69003,69004,69006,69008],{"class":222,"line":223},[220,69005,343],{"class":264},[220,69007,347],{"class":420},[220,69009,359],{"class":264},[220,69011,69012,69014],{"class":222,"line":179},[220,69013,364],{"class":264},[220,69015,68939],{"class":420},[220,69017,69018,69020,69022],{"class":222,"line":389},[220,69019,7882],{"class":226},[220,69021,353],{"class":264},[220,69023,7838],{"class":230},[220,69025,69026],{"class":222,"line":399},[220,69027,1234],{"class":264},[220,69029,69030,69032,69034],{"class":222,"line":644},[220,69031,402],{"class":264},[220,69033,347],{"class":420},[220,69035,359],{"class":264},[212,69037,69038],{"className":468,"code":68922,"language":469,"meta":178,"style":178},[99,69039,69040,69048,69054,69062,69066],{"__ignoreMap":178},[220,69041,69042,69044,69046],{"class":222,"line":223},[220,69043,343],{"class":264},[220,69045,347],{"class":420},[220,69047,359],{"class":264},[220,69049,69050,69052],{"class":222,"line":179},[220,69051,364],{"class":264},[220,69053,68939],{"class":420},[220,69055,69056,69058,69060],{"class":222,"line":389},[220,69057,7882],{"class":226},[220,69059,353],{"class":260},[220,69061,7838],{"class":230},[220,69063,69064],{"class":222,"line":399},[220,69065,1234],{"class":264},[220,69067,69068,69070,69072],{"class":222,"line":644},[220,69069,402],{"class":264},[220,69071,347],{"class":420},[220,69073,359],{"class":264},[212,69075,69077],{"className":251,"code":69076,"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,69078,69079,69089,69093,69107,69111,69124,69128],{"__ignoreMap":178},[220,69080,69081,69083,69085,69087],{"class":222,"line":223},[220,69082,261],{"class":260},[220,69084,9763],{"class":264},[220,69086,268],{"class":260},[220,69088,9768],{"class":230},[220,69090,69091],{"class":222,"line":179},[220,69092,647],{"emptyLinePlaceholder":194},[220,69094,69095,69097,69099,69101,69103,69105],{"class":222,"line":389},[220,69096,1735],{"class":260},[220,69098,1738],{"class":420},[220,69100,1741],{"class":260},[220,69102,1744],{"class":260},[220,69104,1747],{"class":226},[220,69106,1750],{"class":264},[220,69108,69109],{"class":222,"line":399},[220,69110,1765],{"class":264},[220,69112,69113,69115,69118,69120,69122],{"class":222,"line":644},[220,69114,1770],{"class":264},[220,69116,69117],{"class":230},"'Trapezoid'",[220,69119,1776],{"class":264},[220,69121,8417],{"class":230},[220,69123,1782],{"class":264},[220,69125,69126],{"class":222,"line":650},[220,69127,1787],{"class":264},[220,69129,69130],{"class":222,"line":656},[220,69131,1792],{"class":264},[1504,69133,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69135},[69136,69137],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":68900,"description":68908},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":69144,"title":69145,"body":69146,"category":31344,"componentType":24141,"description":69153,"extension":191,"meta":69338,"navigation":194,"path":69339,"requiresChild":30811,"seo":69340,"stem":69341,"__hash__":69342},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":69147,"toc":69334},[69148,69151,69154,69156,69158,69161,69163,69332],[11,69149,69145],{"id":69150},"triangulargrid",[15,69152,69153],{},"Tiling grid of equilateral triangles with optional animated row offsets",[30192,69155],{"component":69145},[23,69157,30196],{"id":24798},[30198,69159],{":props":69160},"[{\"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,69162,30204],{"id":30203},[246,69164,69165,69194,69222,69250,69278],{":tabs":1557},[212,69166,69168],{"className":334,"code":69167,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,69169,69170,69178,69186],{"__ignoreMap":178},[220,69171,69172,69174,69176],{"class":222,"line":223},[220,69173,343],{"class":264},[220,69175,347],{"class":346},[220,69177,359],{"class":264},[220,69179,69180,69182,69184],{"class":222,"line":179},[220,69181,364],{"class":264},[220,69183,69145],{"class":346},[220,69185,386],{"class":264},[220,69187,69188,69190,69192],{"class":222,"line":389},[220,69189,402],{"class":264},[220,69191,347],{"class":346},[220,69193,359],{"class":264},[212,69195,69196],{"className":409,"code":69167,"language":411,"meta":178,"style":178},[99,69197,69198,69206,69214],{"__ignoreMap":178},[220,69199,69200,69202,69204],{"class":222,"line":223},[220,69201,343],{"class":264},[220,69203,347],{"class":420},[220,69205,359],{"class":264},[220,69207,69208,69210,69212],{"class":222,"line":179},[220,69209,364],{"class":264},[220,69211,69145],{"class":420},[220,69213,386],{"class":264},[220,69215,69216,69218,69220],{"class":222,"line":389},[220,69217,402],{"class":264},[220,69219,347],{"class":420},[220,69221,359],{"class":264},[212,69223,69224],{"className":2844,"code":69167,"language":2846,"meta":178,"style":178},[99,69225,69226,69234,69242],{"__ignoreMap":178},[220,69227,69228,69230,69232],{"class":222,"line":223},[220,69229,343],{"class":264},[220,69231,347],{"class":420},[220,69233,359],{"class":264},[220,69235,69236,69238,69240],{"class":222,"line":179},[220,69237,364],{"class":264},[220,69239,69145],{"class":420},[220,69241,386],{"class":264},[220,69243,69244,69246,69248],{"class":222,"line":389},[220,69245,402],{"class":264},[220,69247,347],{"class":420},[220,69249,359],{"class":264},[212,69251,69252],{"className":468,"code":69167,"language":469,"meta":178,"style":178},[99,69253,69254,69262,69270],{"__ignoreMap":178},[220,69255,69256,69258,69260],{"class":222,"line":223},[220,69257,343],{"class":264},[220,69259,347],{"class":420},[220,69261,359],{"class":264},[220,69263,69264,69266,69268],{"class":222,"line":179},[220,69265,364],{"class":264},[220,69267,69145],{"class":420},[220,69269,386],{"class":264},[220,69271,69272,69274,69276],{"class":222,"line":389},[220,69273,402],{"class":264},[220,69275,347],{"class":420},[220,69277,359],{"class":264},[212,69279,69281],{"className":251,"code":69280,"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,69282,69283,69293,69297,69311,69315,69324,69328],{"__ignoreMap":178},[220,69284,69285,69287,69289,69291],{"class":222,"line":223},[220,69286,261],{"class":260},[220,69288,9763],{"class":264},[220,69290,268],{"class":260},[220,69292,9768],{"class":230},[220,69294,69295],{"class":222,"line":179},[220,69296,647],{"emptyLinePlaceholder":194},[220,69298,69299,69301,69303,69305,69307,69309],{"class":222,"line":389},[220,69300,1735],{"class":260},[220,69302,1738],{"class":420},[220,69304,1741],{"class":260},[220,69306,1744],{"class":260},[220,69308,1747],{"class":226},[220,69310,1750],{"class":264},[220,69312,69313],{"class":222,"line":399},[220,69314,1765],{"class":264},[220,69316,69317,69319,69322],{"class":222,"line":644},[220,69318,1770],{"class":264},[220,69320,69321],{"class":230},"'TriangularGrid'",[220,69323,2465],{"class":264},[220,69325,69326],{"class":222,"line":650},[220,69327,1787],{"class":264},[220,69329,69330],{"class":222,"line":656},[220,69331,1792],{"class":264},[1504,69333,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":69335},[69336,69337],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":69145,"description":69153},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":69344,"title":69345,"body":69346,"category":33287,"componentType":24147,"description":69353,"extension":191,"meta":69614,"navigation":194,"path":69615,"requiresChild":194,"seo":69616,"stem":69617,"__hash__":69618},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":69347,"toc":69610},[69348,69351,69354,69356,69358,69361,69363,69608],[11,69349,69345],{"id":69350},"tritone",[15,69352,69353],{},"Map colors to three tones: shadows, midtones, highlights",[30192,69355],{"component":69345},[23,69357,30196],{"id":24798},[30198,69359],{":props":69360},"[{\"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,69362,30204],{"id":30203},[246,69364,69365,69410,69454,69498,69542],{":tabs":1557},[212,69366,69368],{"className":334,"code":69367,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,69369,69370,69378,69386,69394,69402],{"__ignoreMap":178},[220,69371,69372,69374,69376],{"class":222,"line":223},[220,69373,343],{"class":264},[220,69375,347],{"class":346},[220,69377,359],{"class":264},[220,69379,69380,69382,69384],{"class":222,"line":179},[220,69381,364],{"class":264},[220,69383,69345],{"class":346},[220,69385,359],{"class":264},[220,69387,69388,69390,69392],{"class":222,"line":389},[220,69389,2550],{"class":264},[220,69391,2553],{"class":346},[220,69393,386],{"class":264},[220,69395,69396,69398,69400],{"class":222,"line":399},[220,69397,2567],{"class":264},[220,69399,69345],{"class":346},[220,69401,359],{"class":264},[220,69403,69404,69406,69408],{"class":222,"line":644},[220,69405,402],{"class":264},[220,69407,347],{"class":346},[220,69409,359],{"class":264},[212,69411,69412],{"className":409,"code":69367,"language":411,"meta":178,"style":178},[99,69413,69414,69422,69430,69438,69446],{"__ignoreMap":178},[220,69415,69416,69418,69420],{"class":222,"line":223},[220,69417,343],{"class":264},[220,69419,347],{"class":420},[220,69421,359],{"class":264},[220,69423,69424,69426,69428],{"class":222,"line":179},[220,69425,364],{"class":264},[220,69427,69345],{"class":420},[220,69429,359],{"class":264},[220,69431,69432,69434,69436],{"class":222,"line":389},[220,69433,2550],{"class":264},[220,69435,2553],{"class":420},[220,69437,386],{"class":264},[220,69439,69440,69442,69444],{"class":222,"line":399},[220,69441,2567],{"class":264},[220,69443,69345],{"class":420},[220,69445,359],{"class":264},[220,69447,69448,69450,69452],{"class":222,"line":644},[220,69449,402],{"class":264},[220,69451,347],{"class":420},[220,69453,359],{"class":264},[212,69455,69456],{"className":2844,"code":69367,"language":2846,"meta":178,"style":178},[99,69457,69458,69466,69474,69482,69490],{"__ignoreMap":178},[220,69459,69460,69462,69464],{"class":222,"line":223},[220,69461,343],{"class":264},[220,69463,347],{"class":420},[220,69465,359],{"class":264},[220,69467,69468,69470,69472],{"class":222,"line":179},[220,69469,364],{"class":264},[220,69471,69345],{"class":420},[220,69473,359],{"class":264},[220,69475,69476,69478,69480],{"class":222,"line":389},[220,69477,2550],{"class":264},[220,69479,2553],{"class":420},[220,69481,386],{"class":264},[220,69483,69484,69486,69488],{"class":222,"line":399},[220,69485,2567],{"class":264},[220,69487,69345],{"class":420},[220,69489,359],{"class":264},[220,69491,69492,69494,69496],{"class":222,"line":644},[220,69493,402],{"class":264},[220,69495,347],{"class":420},[220,69497,359],{"class":264},[212,69499,69500],{"className":468,"code":69367,"language":469,"meta":178,"style":178},[99,69501,69502,69510,69518,69526,69534],{"__ignoreMap":178},[220,69503,69504,69506,69508],{"class":222,"line":223},[220,69505,343],{"class":264},[220,69507,347],{"class":420},[220,69509,359],{"class":264},[220,69511,69512,69514,69516],{"class":222,"line":179},[220,69513,364],{"class":264},[220,69515,69345],{"class":420},[220,69517,359],{"class":264},[220,69519,69520,69522,69524],{"class":222,"line":389},[220,69521,2550],{"class":264},[220,69523,2553],{"class":420},[220,69525,386],{"class":264},[220,69527,69528,69530,69532],{"class":222,"line":399},[220,69529,2567],{"class":264},[220,69531,69345],{"class":420},[220,69533,359],{"class":264},[220,69535,69536,69538,69540],{"class":222,"line":644},[220,69537,402],{"class":264},[220,69539,347],{"class":420},[220,69541,359],{"class":264},[212,69543,69545],{"className":251,"code":69544,"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,69546,69547,69557,69561,69575,69579,69588,69596,69600,69604],{"__ignoreMap":178},[220,69548,69549,69551,69553,69555],{"class":222,"line":223},[220,69550,261],{"class":260},[220,69552,9763],{"class":264},[220,69554,268],{"class":260},[220,69556,9768],{"class":230},[220,69558,69559],{"class":222,"line":179},[220,69560,647],{"emptyLinePlaceholder":194},[220,69562,69563,69565,69567,69569,69571,69573],{"class":222,"line":389},[220,69564,1735],{"class":260},[220,69566,1738],{"class":420},[220,69568,1741],{"class":260},[220,69570,1744],{"class":260},[220,69572,1747],{"class":226},[220,69574,1750],{"class":264},[220,69576,69577],{"class":222,"line":399},[220,69578,1765],{"class":264},[220,69580,69581,69583,69586],{"class":222,"line":644},[220,69582,1770],{"class":264},[220,69584,69585],{"class":230},"'Tritone'",[220,69587,5255],{"class":264},[220,69589,69590,69592,69594],{"class":222,"line":650},[220,69591,5260],{"class":264},[220,69593,3206],{"class":230},[220,69595,2465],{"class":264},[220,69597,69598],{"class":222,"line":656},[220,69599,5277],{"class":264},[220,69601,69602],{"class":222,"line":673},[220,69603,1787],{"class":264},[220,69605,69606],{"class":222,"line":682},[220,69607,1792],{"class":264},[1504,69609,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":69611},[69612,69613],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":69345,"description":69353},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":69620,"title":69621,"body":69622,"category":31344,"componentType":24141,"description":69629,"extension":191,"meta":69814,"navigation":194,"path":69815,"requiresChild":30811,"seo":69816,"stem":69817,"__hash__":69818},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":69623,"toc":69810},[69624,69627,69630,69632,69634,69637,69639,69808],[11,69625,69621],{"id":69626},"truchet",[15,69628,69629],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[30192,69631],{"component":69621},[23,69633,30196],{"id":24798},[30198,69635],{":props":69636},"[{\"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,69638,30204],{"id":30203},[246,69640,69641,69670,69698,69726,69754],{":tabs":1557},[212,69642,69644],{"className":334,"code":69643,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,69645,69646,69654,69662],{"__ignoreMap":178},[220,69647,69648,69650,69652],{"class":222,"line":223},[220,69649,343],{"class":264},[220,69651,347],{"class":346},[220,69653,359],{"class":264},[220,69655,69656,69658,69660],{"class":222,"line":179},[220,69657,364],{"class":264},[220,69659,69621],{"class":346},[220,69661,386],{"class":264},[220,69663,69664,69666,69668],{"class":222,"line":389},[220,69665,402],{"class":264},[220,69667,347],{"class":346},[220,69669,359],{"class":264},[212,69671,69672],{"className":409,"code":69643,"language":411,"meta":178,"style":178},[99,69673,69674,69682,69690],{"__ignoreMap":178},[220,69675,69676,69678,69680],{"class":222,"line":223},[220,69677,343],{"class":264},[220,69679,347],{"class":420},[220,69681,359],{"class":264},[220,69683,69684,69686,69688],{"class":222,"line":179},[220,69685,364],{"class":264},[220,69687,69621],{"class":420},[220,69689,386],{"class":264},[220,69691,69692,69694,69696],{"class":222,"line":389},[220,69693,402],{"class":264},[220,69695,347],{"class":420},[220,69697,359],{"class":264},[212,69699,69700],{"className":2844,"code":69643,"language":2846,"meta":178,"style":178},[99,69701,69702,69710,69718],{"__ignoreMap":178},[220,69703,69704,69706,69708],{"class":222,"line":223},[220,69705,343],{"class":264},[220,69707,347],{"class":420},[220,69709,359],{"class":264},[220,69711,69712,69714,69716],{"class":222,"line":179},[220,69713,364],{"class":264},[220,69715,69621],{"class":420},[220,69717,386],{"class":264},[220,69719,69720,69722,69724],{"class":222,"line":389},[220,69721,402],{"class":264},[220,69723,347],{"class":420},[220,69725,359],{"class":264},[212,69727,69728],{"className":468,"code":69643,"language":469,"meta":178,"style":178},[99,69729,69730,69738,69746],{"__ignoreMap":178},[220,69731,69732,69734,69736],{"class":222,"line":223},[220,69733,343],{"class":264},[220,69735,347],{"class":420},[220,69737,359],{"class":264},[220,69739,69740,69742,69744],{"class":222,"line":179},[220,69741,364],{"class":264},[220,69743,69621],{"class":420},[220,69745,386],{"class":264},[220,69747,69748,69750,69752],{"class":222,"line":389},[220,69749,402],{"class":264},[220,69751,347],{"class":420},[220,69753,359],{"class":264},[212,69755,69757],{"className":251,"code":69756,"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,69758,69759,69769,69773,69787,69791,69800,69804],{"__ignoreMap":178},[220,69760,69761,69763,69765,69767],{"class":222,"line":223},[220,69762,261],{"class":260},[220,69764,9763],{"class":264},[220,69766,268],{"class":260},[220,69768,9768],{"class":230},[220,69770,69771],{"class":222,"line":179},[220,69772,647],{"emptyLinePlaceholder":194},[220,69774,69775,69777,69779,69781,69783,69785],{"class":222,"line":389},[220,69776,1735],{"class":260},[220,69778,1738],{"class":420},[220,69780,1741],{"class":260},[220,69782,1744],{"class":260},[220,69784,1747],{"class":226},[220,69786,1750],{"class":264},[220,69788,69789],{"class":222,"line":399},[220,69790,1765],{"class":264},[220,69792,69793,69795,69798],{"class":222,"line":644},[220,69794,1770],{"class":264},[220,69796,69797],{"class":230},"'Truchet'",[220,69799,2465],{"class":264},[220,69801,69802],{"class":222,"line":650},[220,69803,1787],{"class":264},[220,69805,69806],{"class":222,"line":656},[220,69807,1792],{"class":264},[1504,69809,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":69811},[69812,69813],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":69621,"description":69629},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":69820,"title":69821,"body":69822,"category":31677,"componentType":24147,"description":69829,"extension":191,"meta":70146,"navigation":194,"path":70147,"requiresChild":194,"seo":70148,"stem":70149,"__hash__":70150},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":69823,"toc":70142},[69824,69827,69830,69832,69834,69837,69839,70140],[11,69825,69821],{"id":69826},"twirl",[15,69828,69829],{},"Rotate and twist content around a center point",[30192,69831],{"component":69821},[23,69833,30196],{"id":24798},[30198,69835],{":props":69836},"[{\"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,69838,30204],{"id":30203},[246,69840,69841,69897,69956,70012,70070],{":tabs":1557},[212,69842,69844],{"className":334,"code":69843,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,69845,69846,69854,69861,69869,69873,69881,69889],{"__ignoreMap":178},[220,69847,69848,69850,69852],{"class":222,"line":223},[220,69849,343],{"class":264},[220,69851,347],{"class":346},[220,69853,359],{"class":264},[220,69855,69856,69858],{"class":222,"line":179},[220,69857,364],{"class":264},[220,69859,69860],{"class":346},"Twirl\n",[220,69862,69863,69865,69867],{"class":222,"line":389},[220,69864,18633],{"class":226},[220,69866,353],{"class":264},[220,69868,33544],{"class":230},[220,69870,69871],{"class":222,"line":399},[220,69872,30240],{"class":264},[220,69874,69875,69877,69879],{"class":222,"line":644},[220,69876,2550],{"class":264},[220,69878,2553],{"class":346},[220,69880,386],{"class":264},[220,69882,69883,69885,69887],{"class":222,"line":650},[220,69884,2567],{"class":264},[220,69886,69821],{"class":346},[220,69888,359],{"class":264},[220,69890,69891,69893,69895],{"class":222,"line":656},[220,69892,402],{"class":264},[220,69894,347],{"class":346},[220,69896,359],{"class":264},[212,69898,69900],{"className":409,"code":69899,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,69901,69902,69910,69916,69928,69932,69940,69948],{"__ignoreMap":178},[220,69903,69904,69906,69908],{"class":222,"line":223},[220,69905,343],{"class":264},[220,69907,347],{"class":420},[220,69909,359],{"class":264},[220,69911,69912,69914],{"class":222,"line":179},[220,69913,364],{"class":264},[220,69915,69860],{"class":420},[220,69917,69918,69920,69922,69924,69926],{"class":222,"line":389},[220,69919,18744],{"class":226},[220,69921,353],{"class":260},[220,69923,743],{"class":264},[220,69925,6923],{"class":420},[220,69927,749],{"class":264},[220,69929,69930],{"class":222,"line":399},[220,69931,30240],{"class":264},[220,69933,69934,69936,69938],{"class":222,"line":644},[220,69935,2550],{"class":264},[220,69937,2553],{"class":420},[220,69939,386],{"class":264},[220,69941,69942,69944,69946],{"class":222,"line":650},[220,69943,2567],{"class":264},[220,69945,69821],{"class":420},[220,69947,359],{"class":264},[220,69949,69950,69952,69954],{"class":222,"line":656},[220,69951,402],{"class":264},[220,69953,347],{"class":420},[220,69955,359],{"class":264},[212,69957,69958],{"className":2844,"code":69899,"language":2846,"meta":178,"style":178},[99,69959,69960,69968,69974,69984,69988,69996,70004],{"__ignoreMap":178},[220,69961,69962,69964,69966],{"class":222,"line":223},[220,69963,343],{"class":264},[220,69965,347],{"class":420},[220,69967,359],{"class":264},[220,69969,69970,69972],{"class":222,"line":179},[220,69971,364],{"class":264},[220,69973,69860],{"class":420},[220,69975,69976,69978,69980,69982],{"class":222,"line":389},[220,69977,18744],{"class":226},[220,69979,28138],{"class":264},[220,69981,6923],{"class":420},[220,69983,749],{"class":264},[220,69985,69986],{"class":222,"line":399},[220,69987,30240],{"class":264},[220,69989,69990,69992,69994],{"class":222,"line":644},[220,69991,2550],{"class":264},[220,69993,2553],{"class":420},[220,69995,386],{"class":264},[220,69997,69998,70000,70002],{"class":222,"line":650},[220,69999,2567],{"class":264},[220,70001,69821],{"class":420},[220,70003,359],{"class":264},[220,70005,70006,70008,70010],{"class":222,"line":656},[220,70007,402],{"class":264},[220,70009,347],{"class":420},[220,70011,359],{"class":264},[212,70013,70014],{"className":468,"code":69899,"language":469,"meta":178,"style":178},[99,70015,70016,70024,70030,70042,70046,70054,70062],{"__ignoreMap":178},[220,70017,70018,70020,70022],{"class":222,"line":223},[220,70019,343],{"class":264},[220,70021,347],{"class":420},[220,70023,359],{"class":264},[220,70025,70026,70028],{"class":222,"line":179},[220,70027,364],{"class":264},[220,70029,69860],{"class":420},[220,70031,70032,70034,70036,70038,70040],{"class":222,"line":389},[220,70033,18744],{"class":226},[220,70035,353],{"class":260},[220,70037,743],{"class":264},[220,70039,6923],{"class":420},[220,70041,749],{"class":264},[220,70043,70044],{"class":222,"line":399},[220,70045,30240],{"class":264},[220,70047,70048,70050,70052],{"class":222,"line":644},[220,70049,2550],{"class":264},[220,70051,2553],{"class":420},[220,70053,386],{"class":264},[220,70055,70056,70058,70060],{"class":222,"line":650},[220,70057,2567],{"class":264},[220,70059,69821],{"class":420},[220,70061,359],{"class":264},[220,70063,70064,70066,70068],{"class":222,"line":656},[220,70065,402],{"class":264},[220,70067,347],{"class":420},[220,70069,359],{"class":264},[212,70071,70073],{"className":251,"code":70072,"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,70074,70075,70085,70089,70103,70107,70120,70128,70132,70136],{"__ignoreMap":178},[220,70076,70077,70079,70081,70083],{"class":222,"line":223},[220,70078,261],{"class":260},[220,70080,9763],{"class":264},[220,70082,268],{"class":260},[220,70084,9768],{"class":230},[220,70086,70087],{"class":222,"line":179},[220,70088,647],{"emptyLinePlaceholder":194},[220,70090,70091,70093,70095,70097,70099,70101],{"class":222,"line":389},[220,70092,1735],{"class":260},[220,70094,1738],{"class":420},[220,70096,1741],{"class":260},[220,70098,1744],{"class":260},[220,70100,1747],{"class":226},[220,70102,1750],{"class":264},[220,70104,70105],{"class":222,"line":399},[220,70106,1765],{"class":264},[220,70108,70109,70111,70114,70116,70118],{"class":222,"line":644},[220,70110,1770],{"class":264},[220,70112,70113],{"class":230},"'Twirl'",[220,70115,30484],{"class":264},[220,70117,6923],{"class":420},[220,70119,5792],{"class":264},[220,70121,70122,70124,70126],{"class":222,"line":650},[220,70123,5260],{"class":264},[220,70125,3206],{"class":230},[220,70127,2465],{"class":264},[220,70129,70130],{"class":222,"line":656},[220,70131,5277],{"class":264},[220,70133,70134],{"class":222,"line":673},[220,70135,1787],{"class":264},[220,70137,70138],{"class":222,"line":682},[220,70139,1792],{"class":264},[1504,70141,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70143},[70144,70145],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":69821,"description":69829},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":70152,"title":70153,"body":70154,"category":31087,"componentType":24147,"description":70161,"extension":191,"meta":70422,"navigation":194,"path":70423,"requiresChild":194,"seo":70424,"stem":70425,"__hash__":70426},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":70155,"toc":70418},[70156,70159,70162,70164,70166,70169,70171,70416],[11,70157,70153],{"id":70158},"vhs",[15,70160,70161],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[30192,70163],{"component":70153},[23,70165,30196],{"id":24798},[30198,70167],{":props":70168},"[{\"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,70170,30204],{"id":30203},[246,70172,70173,70218,70262,70306,70350],{":tabs":1557},[212,70174,70176],{"className":334,"code":70175,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,70177,70178,70186,70194,70202,70210],{"__ignoreMap":178},[220,70179,70180,70182,70184],{"class":222,"line":223},[220,70181,343],{"class":264},[220,70183,347],{"class":346},[220,70185,359],{"class":264},[220,70187,70188,70190,70192],{"class":222,"line":179},[220,70189,364],{"class":264},[220,70191,70153],{"class":346},[220,70193,359],{"class":264},[220,70195,70196,70198,70200],{"class":222,"line":389},[220,70197,2550],{"class":264},[220,70199,2553],{"class":346},[220,70201,386],{"class":264},[220,70203,70204,70206,70208],{"class":222,"line":399},[220,70205,2567],{"class":264},[220,70207,70153],{"class":346},[220,70209,359],{"class":264},[220,70211,70212,70214,70216],{"class":222,"line":644},[220,70213,402],{"class":264},[220,70215,347],{"class":346},[220,70217,359],{"class":264},[212,70219,70220],{"className":409,"code":70175,"language":411,"meta":178,"style":178},[99,70221,70222,70230,70238,70246,70254],{"__ignoreMap":178},[220,70223,70224,70226,70228],{"class":222,"line":223},[220,70225,343],{"class":264},[220,70227,347],{"class":420},[220,70229,359],{"class":264},[220,70231,70232,70234,70236],{"class":222,"line":179},[220,70233,364],{"class":264},[220,70235,70153],{"class":420},[220,70237,359],{"class":264},[220,70239,70240,70242,70244],{"class":222,"line":389},[220,70241,2550],{"class":264},[220,70243,2553],{"class":420},[220,70245,386],{"class":264},[220,70247,70248,70250,70252],{"class":222,"line":399},[220,70249,2567],{"class":264},[220,70251,70153],{"class":420},[220,70253,359],{"class":264},[220,70255,70256,70258,70260],{"class":222,"line":644},[220,70257,402],{"class":264},[220,70259,347],{"class":420},[220,70261,359],{"class":264},[212,70263,70264],{"className":2844,"code":70175,"language":2846,"meta":178,"style":178},[99,70265,70266,70274,70282,70290,70298],{"__ignoreMap":178},[220,70267,70268,70270,70272],{"class":222,"line":223},[220,70269,343],{"class":264},[220,70271,347],{"class":420},[220,70273,359],{"class":264},[220,70275,70276,70278,70280],{"class":222,"line":179},[220,70277,364],{"class":264},[220,70279,70153],{"class":420},[220,70281,359],{"class":264},[220,70283,70284,70286,70288],{"class":222,"line":389},[220,70285,2550],{"class":264},[220,70287,2553],{"class":420},[220,70289,386],{"class":264},[220,70291,70292,70294,70296],{"class":222,"line":399},[220,70293,2567],{"class":264},[220,70295,70153],{"class":420},[220,70297,359],{"class":264},[220,70299,70300,70302,70304],{"class":222,"line":644},[220,70301,402],{"class":264},[220,70303,347],{"class":420},[220,70305,359],{"class":264},[212,70307,70308],{"className":468,"code":70175,"language":469,"meta":178,"style":178},[99,70309,70310,70318,70326,70334,70342],{"__ignoreMap":178},[220,70311,70312,70314,70316],{"class":222,"line":223},[220,70313,343],{"class":264},[220,70315,347],{"class":420},[220,70317,359],{"class":264},[220,70319,70320,70322,70324],{"class":222,"line":179},[220,70321,364],{"class":264},[220,70323,70153],{"class":420},[220,70325,359],{"class":264},[220,70327,70328,70330,70332],{"class":222,"line":389},[220,70329,2550],{"class":264},[220,70331,2553],{"class":420},[220,70333,386],{"class":264},[220,70335,70336,70338,70340],{"class":222,"line":399},[220,70337,2567],{"class":264},[220,70339,70153],{"class":420},[220,70341,359],{"class":264},[220,70343,70344,70346,70348],{"class":222,"line":644},[220,70345,402],{"class":264},[220,70347,347],{"class":420},[220,70349,359],{"class":264},[212,70351,70353],{"className":251,"code":70352,"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,70354,70355,70365,70369,70383,70387,70396,70404,70408,70412],{"__ignoreMap":178},[220,70356,70357,70359,70361,70363],{"class":222,"line":223},[220,70358,261],{"class":260},[220,70360,9763],{"class":264},[220,70362,268],{"class":260},[220,70364,9768],{"class":230},[220,70366,70367],{"class":222,"line":179},[220,70368,647],{"emptyLinePlaceholder":194},[220,70370,70371,70373,70375,70377,70379,70381],{"class":222,"line":389},[220,70372,1735],{"class":260},[220,70374,1738],{"class":420},[220,70376,1741],{"class":260},[220,70378,1744],{"class":260},[220,70380,1747],{"class":226},[220,70382,1750],{"class":264},[220,70384,70385],{"class":222,"line":399},[220,70386,1765],{"class":264},[220,70388,70389,70391,70394],{"class":222,"line":644},[220,70390,1770],{"class":264},[220,70392,70393],{"class":230},"'VHS'",[220,70395,5255],{"class":264},[220,70397,70398,70400,70402],{"class":222,"line":650},[220,70399,5260],{"class":264},[220,70401,3206],{"class":230},[220,70403,2465],{"class":264},[220,70405,70406],{"class":222,"line":656},[220,70407,5277],{"class":264},[220,70409,70410],{"class":222,"line":673},[220,70411,1787],{"class":264},[220,70413,70414],{"class":222,"line":682},[220,70415,1792],{"class":264},[1504,70417,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":70419},[70420,70421],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":70153,"description":70161},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":70428,"title":70429,"body":70430,"category":14164,"componentType":24141,"description":70437,"extension":191,"meta":70714,"navigation":194,"path":70715,"requiresChild":30811,"seo":70716,"stem":70717,"__hash__":70718},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":70431,"toc":70710},[70432,70435,70438,70440,70442,70445,70447,70708],[11,70433,70429],{"id":70434},"vesica",[15,70436,70437],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[30192,70439],{"component":70429},[23,70441,30196],{"id":24798},[30198,70443],{":props":70444},"[{\"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,70446,30204],{"id":30203},[246,70448,70449,70497,70548,70596,70646],{":tabs":1557},[212,70450,70452],{"className":334,"code":70451,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,70453,70454,70462,70469,70477,70485,70489],{"__ignoreMap":178},[220,70455,70456,70458,70460],{"class":222,"line":223},[220,70457,343],{"class":264},[220,70459,347],{"class":346},[220,70461,359],{"class":264},[220,70463,70464,70466],{"class":222,"line":179},[220,70465,364],{"class":264},[220,70467,70468],{"class":346},"Vesica\n",[220,70470,70471,70473,70475],{"class":222,"line":389},[220,70472,7882],{"class":226},[220,70474,353],{"class":264},[220,70476,7838],{"class":230},[220,70478,70479,70481,70483],{"class":222,"line":399},[220,70480,15666],{"class":226},[220,70482,353],{"class":264},[220,70484,38035],{"class":230},[220,70486,70487],{"class":222,"line":644},[220,70488,1234],{"class":264},[220,70490,70491,70493,70495],{"class":222,"line":650},[220,70492,402],{"class":264},[220,70494,347],{"class":346},[220,70496,359],{"class":264},[212,70498,70500],{"className":409,"code":70499,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,70501,70502,70510,70516,70524,70536,70540],{"__ignoreMap":178},[220,70503,70504,70506,70508],{"class":222,"line":223},[220,70505,343],{"class":264},[220,70507,347],{"class":420},[220,70509,359],{"class":264},[220,70511,70512,70514],{"class":222,"line":179},[220,70513,364],{"class":264},[220,70515,70468],{"class":420},[220,70517,70518,70520,70522],{"class":222,"line":389},[220,70519,7882],{"class":226},[220,70521,353],{"class":260},[220,70523,7838],{"class":230},[220,70525,70526,70528,70530,70532,70534],{"class":222,"line":399},[220,70527,7892],{"class":226},[220,70529,353],{"class":260},[220,70531,743],{"class":264},[220,70533,19410],{"class":420},[220,70535,749],{"class":264},[220,70537,70538],{"class":222,"line":644},[220,70539,1234],{"class":264},[220,70541,70542,70544,70546],{"class":222,"line":650},[220,70543,402],{"class":264},[220,70545,347],{"class":420},[220,70547,359],{"class":264},[212,70549,70550],{"className":2844,"code":70499,"language":2846,"meta":178,"style":178},[99,70551,70552,70560,70566,70574,70584,70588],{"__ignoreMap":178},[220,70553,70554,70556,70558],{"class":222,"line":223},[220,70555,343],{"class":264},[220,70557,347],{"class":420},[220,70559,359],{"class":264},[220,70561,70562,70564],{"class":222,"line":179},[220,70563,364],{"class":264},[220,70565,70468],{"class":420},[220,70567,70568,70570,70572],{"class":222,"line":389},[220,70569,7882],{"class":226},[220,70571,353],{"class":264},[220,70573,7838],{"class":230},[220,70575,70576,70578,70580,70582],{"class":222,"line":399},[220,70577,7892],{"class":226},[220,70579,28138],{"class":264},[220,70581,19410],{"class":420},[220,70583,749],{"class":264},[220,70585,70586],{"class":222,"line":644},[220,70587,1234],{"class":264},[220,70589,70590,70592,70594],{"class":222,"line":650},[220,70591,402],{"class":264},[220,70593,347],{"class":420},[220,70595,359],{"class":264},[212,70597,70598],{"className":468,"code":70499,"language":469,"meta":178,"style":178},[99,70599,70600,70608,70614,70622,70634,70638],{"__ignoreMap":178},[220,70601,70602,70604,70606],{"class":222,"line":223},[220,70603,343],{"class":264},[220,70605,347],{"class":420},[220,70607,359],{"class":264},[220,70609,70610,70612],{"class":222,"line":179},[220,70611,364],{"class":264},[220,70613,70468],{"class":420},[220,70615,70616,70618,70620],{"class":222,"line":389},[220,70617,7882],{"class":226},[220,70619,353],{"class":260},[220,70621,7838],{"class":230},[220,70623,70624,70626,70628,70630,70632],{"class":222,"line":399},[220,70625,7892],{"class":226},[220,70627,353],{"class":260},[220,70629,743],{"class":264},[220,70631,19410],{"class":420},[220,70633,749],{"class":264},[220,70635,70636],{"class":222,"line":644},[220,70637,1234],{"class":264},[220,70639,70640,70642,70644],{"class":222,"line":650},[220,70641,402],{"class":264},[220,70643,347],{"class":420},[220,70645,359],{"class":264},[212,70647,70649],{"className":251,"code":70648,"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,70650,70651,70661,70665,70679,70683,70700,70704],{"__ignoreMap":178},[220,70652,70653,70655,70657,70659],{"class":222,"line":223},[220,70654,261],{"class":260},[220,70656,9763],{"class":264},[220,70658,268],{"class":260},[220,70660,9768],{"class":230},[220,70662,70663],{"class":222,"line":179},[220,70664,647],{"emptyLinePlaceholder":194},[220,70666,70667,70669,70671,70673,70675,70677],{"class":222,"line":389},[220,70668,1735],{"class":260},[220,70670,1738],{"class":420},[220,70672,1741],{"class":260},[220,70674,1744],{"class":260},[220,70676,1747],{"class":226},[220,70678,1750],{"class":264},[220,70680,70681],{"class":222,"line":399},[220,70682,1765],{"class":264},[220,70684,70685,70687,70690,70692,70694,70696,70698],{"class":222,"line":644},[220,70686,1770],{"class":264},[220,70688,70689],{"class":230},"'Vesica'",[220,70691,1776],{"class":264},[220,70693,8417],{"class":230},[220,70695,4812],{"class":264},[220,70697,19410],{"class":420},[220,70699,1782],{"class":264},[220,70701,70702],{"class":222,"line":650},[220,70703,1787],{"class":264},[220,70705,70706],{"class":222,"line":656},[220,70707,1792],{"class":264},[1504,70709,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70711},[70712,70713],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":70429,"description":70437},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":70720,"title":70721,"body":70722,"category":33287,"componentType":24147,"description":70729,"extension":191,"meta":71047,"navigation":194,"path":71048,"requiresChild":194,"seo":71049,"stem":71050,"__hash__":71051},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":70723,"toc":71043},[70724,70727,70730,70732,70734,70737,70739,71041],[11,70725,70721],{"id":70726},"vibrance",[15,70728,70729],{},"Selective saturation adjustment protecting skin tones",[30192,70731],{"component":70721},[23,70733,30196],{"id":24798},[30198,70735],{":props":70736},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,70738,30204],{"id":30203},[246,70740,70741,70798,70857,70913,70971],{":tabs":1557},[212,70742,70744],{"className":334,"code":70743,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,70745,70746,70754,70761,70770,70774,70782,70790],{"__ignoreMap":178},[220,70747,70748,70750,70752],{"class":222,"line":223},[220,70749,343],{"class":264},[220,70751,347],{"class":346},[220,70753,359],{"class":264},[220,70755,70756,70758],{"class":222,"line":179},[220,70757,364],{"class":264},[220,70759,70760],{"class":346},"Vibrance\n",[220,70762,70763,70765,70767],{"class":222,"line":389},[220,70764,18633],{"class":226},[220,70766,353],{"class":264},[220,70768,70769],{"class":230},"\"0\"\n",[220,70771,70772],{"class":222,"line":399},[220,70773,30240],{"class":264},[220,70775,70776,70778,70780],{"class":222,"line":644},[220,70777,2550],{"class":264},[220,70779,2553],{"class":346},[220,70781,386],{"class":264},[220,70783,70784,70786,70788],{"class":222,"line":650},[220,70785,2567],{"class":264},[220,70787,70721],{"class":346},[220,70789,359],{"class":264},[220,70791,70792,70794,70796],{"class":222,"line":656},[220,70793,402],{"class":264},[220,70795,347],{"class":346},[220,70797,359],{"class":264},[212,70799,70801],{"className":409,"code":70800,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,70802,70803,70811,70817,70829,70833,70841,70849],{"__ignoreMap":178},[220,70804,70805,70807,70809],{"class":222,"line":223},[220,70806,343],{"class":264},[220,70808,347],{"class":420},[220,70810,359],{"class":264},[220,70812,70813,70815],{"class":222,"line":179},[220,70814,364],{"class":264},[220,70816,70760],{"class":420},[220,70818,70819,70821,70823,70825,70827],{"class":222,"line":389},[220,70820,18744],{"class":226},[220,70822,353],{"class":260},[220,70824,743],{"class":264},[220,70826,6919],{"class":420},[220,70828,749],{"class":264},[220,70830,70831],{"class":222,"line":399},[220,70832,30240],{"class":264},[220,70834,70835,70837,70839],{"class":222,"line":644},[220,70836,2550],{"class":264},[220,70838,2553],{"class":420},[220,70840,386],{"class":264},[220,70842,70843,70845,70847],{"class":222,"line":650},[220,70844,2567],{"class":264},[220,70846,70721],{"class":420},[220,70848,359],{"class":264},[220,70850,70851,70853,70855],{"class":222,"line":656},[220,70852,402],{"class":264},[220,70854,347],{"class":420},[220,70856,359],{"class":264},[212,70858,70859],{"className":2844,"code":70800,"language":2846,"meta":178,"style":178},[99,70860,70861,70869,70875,70885,70889,70897,70905],{"__ignoreMap":178},[220,70862,70863,70865,70867],{"class":222,"line":223},[220,70864,343],{"class":264},[220,70866,347],{"class":420},[220,70868,359],{"class":264},[220,70870,70871,70873],{"class":222,"line":179},[220,70872,364],{"class":264},[220,70874,70760],{"class":420},[220,70876,70877,70879,70881,70883],{"class":222,"line":389},[220,70878,18744],{"class":226},[220,70880,28138],{"class":264},[220,70882,6919],{"class":420},[220,70884,749],{"class":264},[220,70886,70887],{"class":222,"line":399},[220,70888,30240],{"class":264},[220,70890,70891,70893,70895],{"class":222,"line":644},[220,70892,2550],{"class":264},[220,70894,2553],{"class":420},[220,70896,386],{"class":264},[220,70898,70899,70901,70903],{"class":222,"line":650},[220,70900,2567],{"class":264},[220,70902,70721],{"class":420},[220,70904,359],{"class":264},[220,70906,70907,70909,70911],{"class":222,"line":656},[220,70908,402],{"class":264},[220,70910,347],{"class":420},[220,70912,359],{"class":264},[212,70914,70915],{"className":468,"code":70800,"language":469,"meta":178,"style":178},[99,70916,70917,70925,70931,70943,70947,70955,70963],{"__ignoreMap":178},[220,70918,70919,70921,70923],{"class":222,"line":223},[220,70920,343],{"class":264},[220,70922,347],{"class":420},[220,70924,359],{"class":264},[220,70926,70927,70929],{"class":222,"line":179},[220,70928,364],{"class":264},[220,70930,70760],{"class":420},[220,70932,70933,70935,70937,70939,70941],{"class":222,"line":389},[220,70934,18744],{"class":226},[220,70936,353],{"class":260},[220,70938,743],{"class":264},[220,70940,6919],{"class":420},[220,70942,749],{"class":264},[220,70944,70945],{"class":222,"line":399},[220,70946,30240],{"class":264},[220,70948,70949,70951,70953],{"class":222,"line":644},[220,70950,2550],{"class":264},[220,70952,2553],{"class":420},[220,70954,386],{"class":264},[220,70956,70957,70959,70961],{"class":222,"line":650},[220,70958,2567],{"class":264},[220,70960,70721],{"class":420},[220,70962,359],{"class":264},[220,70964,70965,70967,70969],{"class":222,"line":656},[220,70966,402],{"class":264},[220,70968,347],{"class":420},[220,70970,359],{"class":264},[212,70972,70974],{"className":251,"code":70973,"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,70975,70976,70986,70990,71004,71008,71021,71029,71033,71037],{"__ignoreMap":178},[220,70977,70978,70980,70982,70984],{"class":222,"line":223},[220,70979,261],{"class":260},[220,70981,9763],{"class":264},[220,70983,268],{"class":260},[220,70985,9768],{"class":230},[220,70987,70988],{"class":222,"line":179},[220,70989,647],{"emptyLinePlaceholder":194},[220,70991,70992,70994,70996,70998,71000,71002],{"class":222,"line":389},[220,70993,1735],{"class":260},[220,70995,1738],{"class":420},[220,70997,1741],{"class":260},[220,70999,1744],{"class":260},[220,71001,1747],{"class":226},[220,71003,1750],{"class":264},[220,71005,71006],{"class":222,"line":399},[220,71007,1765],{"class":264},[220,71009,71010,71012,71015,71017,71019],{"class":222,"line":644},[220,71011,1770],{"class":264},[220,71013,71014],{"class":230},"'Vibrance'",[220,71016,30484],{"class":264},[220,71018,6919],{"class":420},[220,71020,5792],{"class":264},[220,71022,71023,71025,71027],{"class":222,"line":650},[220,71024,5260],{"class":264},[220,71026,3206],{"class":230},[220,71028,2465],{"class":264},[220,71030,71031],{"class":222,"line":656},[220,71032,5277],{"class":264},[220,71034,71035],{"class":222,"line":673},[220,71036,1787],{"class":264},[220,71038,71039],{"class":222,"line":682},[220,71040,1792],{"class":264},[1504,71042,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71044},[71045,71046],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":70721,"description":70729},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":71053,"title":71054,"body":71055,"category":31344,"componentType":24141,"description":71062,"extension":191,"meta":71247,"navigation":194,"path":71248,"requiresChild":30811,"seo":71249,"stem":71250,"__hash__":71251},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":71056,"toc":71243},[71057,71060,71063,71065,71067,71070,71072,71241],[11,71058,71054],{"id":71059},"videotexture",[15,71061,71062],{},"Display a video with customizable playback and object-fit modes",[30192,71064],{"component":71054},[23,71066,30196],{"id":24798},[30198,71068],{":props":71069},"[{\"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,71071,30204],{"id":30203},[246,71073,71074,71103,71131,71159,71187],{":tabs":1557},[212,71075,71077],{"className":334,"code":71076,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,71078,71079,71087,71095],{"__ignoreMap":178},[220,71080,71081,71083,71085],{"class":222,"line":223},[220,71082,343],{"class":264},[220,71084,347],{"class":346},[220,71086,359],{"class":264},[220,71088,71089,71091,71093],{"class":222,"line":179},[220,71090,364],{"class":264},[220,71092,71054],{"class":346},[220,71094,386],{"class":264},[220,71096,71097,71099,71101],{"class":222,"line":389},[220,71098,402],{"class":264},[220,71100,347],{"class":346},[220,71102,359],{"class":264},[212,71104,71105],{"className":409,"code":71076,"language":411,"meta":178,"style":178},[99,71106,71107,71115,71123],{"__ignoreMap":178},[220,71108,71109,71111,71113],{"class":222,"line":223},[220,71110,343],{"class":264},[220,71112,347],{"class":420},[220,71114,359],{"class":264},[220,71116,71117,71119,71121],{"class":222,"line":179},[220,71118,364],{"class":264},[220,71120,71054],{"class":420},[220,71122,386],{"class":264},[220,71124,71125,71127,71129],{"class":222,"line":389},[220,71126,402],{"class":264},[220,71128,347],{"class":420},[220,71130,359],{"class":264},[212,71132,71133],{"className":2844,"code":71076,"language":2846,"meta":178,"style":178},[99,71134,71135,71143,71151],{"__ignoreMap":178},[220,71136,71137,71139,71141],{"class":222,"line":223},[220,71138,343],{"class":264},[220,71140,347],{"class":420},[220,71142,359],{"class":264},[220,71144,71145,71147,71149],{"class":222,"line":179},[220,71146,364],{"class":264},[220,71148,71054],{"class":420},[220,71150,386],{"class":264},[220,71152,71153,71155,71157],{"class":222,"line":389},[220,71154,402],{"class":264},[220,71156,347],{"class":420},[220,71158,359],{"class":264},[212,71160,71161],{"className":468,"code":71076,"language":469,"meta":178,"style":178},[99,71162,71163,71171,71179],{"__ignoreMap":178},[220,71164,71165,71167,71169],{"class":222,"line":223},[220,71166,343],{"class":264},[220,71168,347],{"class":420},[220,71170,359],{"class":264},[220,71172,71173,71175,71177],{"class":222,"line":179},[220,71174,364],{"class":264},[220,71176,71054],{"class":420},[220,71178,386],{"class":264},[220,71180,71181,71183,71185],{"class":222,"line":389},[220,71182,402],{"class":264},[220,71184,347],{"class":420},[220,71186,359],{"class":264},[212,71188,71190],{"className":251,"code":71189,"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,71191,71192,71202,71206,71220,71224,71233,71237],{"__ignoreMap":178},[220,71193,71194,71196,71198,71200],{"class":222,"line":223},[220,71195,261],{"class":260},[220,71197,9763],{"class":264},[220,71199,268],{"class":260},[220,71201,9768],{"class":230},[220,71203,71204],{"class":222,"line":179},[220,71205,647],{"emptyLinePlaceholder":194},[220,71207,71208,71210,71212,71214,71216,71218],{"class":222,"line":389},[220,71209,1735],{"class":260},[220,71211,1738],{"class":420},[220,71213,1741],{"class":260},[220,71215,1744],{"class":260},[220,71217,1747],{"class":226},[220,71219,1750],{"class":264},[220,71221,71222],{"class":222,"line":399},[220,71223,1765],{"class":264},[220,71225,71226,71228,71231],{"class":222,"line":644},[220,71227,1770],{"class":264},[220,71229,71230],{"class":230},"'VideoTexture'",[220,71232,2465],{"class":264},[220,71234,71235],{"class":222,"line":650},[220,71236,1787],{"class":264},[220,71238,71239],{"class":222,"line":656},[220,71240,1792],{"class":264},[1504,71242,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":71244},[71245,71246],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":71054,"description":71062},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":71253,"title":71254,"body":71255,"category":31087,"componentType":24147,"description":71262,"extension":191,"meta":71661,"navigation":194,"path":71662,"requiresChild":194,"seo":71663,"stem":71664,"__hash__":71665},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":71256,"toc":71657},[71257,71260,71263,71265,71267,71270,71272,71655],[11,71258,71254],{"id":71259},"vignette",[15,71261,71262],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[30192,71264],{"component":71254},[23,71266,30196],{"id":24798},[30198,71268],{":props":71269},"[{\"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,71271,30204],{"id":30203},[246,71273,71274,71346,71425,71499,71577],{":tabs":1557},[212,71275,71277],{"className":334,"code":71276,"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,71278,71279,71287,71294,71302,71310,71318,71322,71330,71338],{"__ignoreMap":178},[220,71280,71281,71283,71285],{"class":222,"line":223},[220,71282,343],{"class":264},[220,71284,347],{"class":346},[220,71286,359],{"class":264},[220,71288,71289,71291],{"class":222,"line":179},[220,71290,364],{"class":264},[220,71292,71293],{"class":346},"Vignette\n",[220,71295,71296,71298,71300],{"class":222,"line":389},[220,71297,7882],{"class":226},[220,71299,353],{"class":264},[220,71301,17735],{"class":230},[220,71303,71304,71306,71308],{"class":222,"line":399},[220,71305,15666],{"class":226},[220,71307,353],{"class":264},[220,71309,38802],{"class":230},[220,71311,71312,71314,71316],{"class":222,"line":644},[220,71313,18633],{"class":226},[220,71315,353],{"class":264},[220,71317,33544],{"class":230},[220,71319,71320],{"class":222,"line":650},[220,71321,30240],{"class":264},[220,71323,71324,71326,71328],{"class":222,"line":656},[220,71325,2550],{"class":264},[220,71327,2553],{"class":346},[220,71329,386],{"class":264},[220,71331,71332,71334,71336],{"class":222,"line":673},[220,71333,2567],{"class":264},[220,71335,71254],{"class":346},[220,71337,359],{"class":264},[220,71339,71340,71342,71344],{"class":222,"line":682},[220,71341,402],{"class":264},[220,71343,347],{"class":346},[220,71345,359],{"class":264},[212,71347,71349],{"className":409,"code":71348,"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,71350,71351,71359,71365,71373,71385,71397,71401,71409,71417],{"__ignoreMap":178},[220,71352,71353,71355,71357],{"class":222,"line":223},[220,71354,343],{"class":264},[220,71356,347],{"class":420},[220,71358,359],{"class":264},[220,71360,71361,71363],{"class":222,"line":179},[220,71362,364],{"class":264},[220,71364,71293],{"class":420},[220,71366,71367,71369,71371],{"class":222,"line":389},[220,71368,7882],{"class":226},[220,71370,353],{"class":260},[220,71372,17735],{"class":230},[220,71374,71375,71377,71379,71381,71383],{"class":222,"line":399},[220,71376,7892],{"class":226},[220,71378,353],{"class":260},[220,71380,743],{"class":264},[220,71382,6000],{"class":420},[220,71384,749],{"class":264},[220,71386,71387,71389,71391,71393,71395],{"class":222,"line":644},[220,71388,18744],{"class":226},[220,71390,353],{"class":260},[220,71392,743],{"class":264},[220,71394,6923],{"class":420},[220,71396,749],{"class":264},[220,71398,71399],{"class":222,"line":650},[220,71400,30240],{"class":264},[220,71402,71403,71405,71407],{"class":222,"line":656},[220,71404,2550],{"class":264},[220,71406,2553],{"class":420},[220,71408,386],{"class":264},[220,71410,71411,71413,71415],{"class":222,"line":673},[220,71412,2567],{"class":264},[220,71414,71254],{"class":420},[220,71416,359],{"class":264},[220,71418,71419,71421,71423],{"class":222,"line":682},[220,71420,402],{"class":264},[220,71422,347],{"class":420},[220,71424,359],{"class":264},[212,71426,71427],{"className":2844,"code":71348,"language":2846,"meta":178,"style":178},[99,71428,71429,71437,71443,71451,71461,71471,71475,71483,71491],{"__ignoreMap":178},[220,71430,71431,71433,71435],{"class":222,"line":223},[220,71432,343],{"class":264},[220,71434,347],{"class":420},[220,71436,359],{"class":264},[220,71438,71439,71441],{"class":222,"line":179},[220,71440,364],{"class":264},[220,71442,71293],{"class":420},[220,71444,71445,71447,71449],{"class":222,"line":389},[220,71446,7882],{"class":226},[220,71448,353],{"class":264},[220,71450,17735],{"class":230},[220,71452,71453,71455,71457,71459],{"class":222,"line":399},[220,71454,7892],{"class":226},[220,71456,28138],{"class":264},[220,71458,6000],{"class":420},[220,71460,749],{"class":264},[220,71462,71463,71465,71467,71469],{"class":222,"line":644},[220,71464,18744],{"class":226},[220,71466,28138],{"class":264},[220,71468,6923],{"class":420},[220,71470,749],{"class":264},[220,71472,71473],{"class":222,"line":650},[220,71474,30240],{"class":264},[220,71476,71477,71479,71481],{"class":222,"line":656},[220,71478,2550],{"class":264},[220,71480,2553],{"class":420},[220,71482,386],{"class":264},[220,71484,71485,71487,71489],{"class":222,"line":673},[220,71486,2567],{"class":264},[220,71488,71254],{"class":420},[220,71490,359],{"class":264},[220,71492,71493,71495,71497],{"class":222,"line":682},[220,71494,402],{"class":264},[220,71496,347],{"class":420},[220,71498,359],{"class":264},[212,71500,71501],{"className":468,"code":71348,"language":469,"meta":178,"style":178},[99,71502,71503,71511,71517,71525,71537,71549,71553,71561,71569],{"__ignoreMap":178},[220,71504,71505,71507,71509],{"class":222,"line":223},[220,71506,343],{"class":264},[220,71508,347],{"class":420},[220,71510,359],{"class":264},[220,71512,71513,71515],{"class":222,"line":179},[220,71514,364],{"class":264},[220,71516,71293],{"class":420},[220,71518,71519,71521,71523],{"class":222,"line":389},[220,71520,7882],{"class":226},[220,71522,353],{"class":260},[220,71524,17735],{"class":230},[220,71526,71527,71529,71531,71533,71535],{"class":222,"line":399},[220,71528,7892],{"class":226},[220,71530,353],{"class":260},[220,71532,743],{"class":264},[220,71534,6000],{"class":420},[220,71536,749],{"class":264},[220,71538,71539,71541,71543,71545,71547],{"class":222,"line":644},[220,71540,18744],{"class":226},[220,71542,353],{"class":260},[220,71544,743],{"class":264},[220,71546,6923],{"class":420},[220,71548,749],{"class":264},[220,71550,71551],{"class":222,"line":650},[220,71552,30240],{"class":264},[220,71554,71555,71557,71559],{"class":222,"line":656},[220,71556,2550],{"class":264},[220,71558,2553],{"class":420},[220,71560,386],{"class":264},[220,71562,71563,71565,71567],{"class":222,"line":673},[220,71564,2567],{"class":264},[220,71566,71254],{"class":420},[220,71568,359],{"class":264},[220,71570,71571,71573,71575],{"class":222,"line":682},[220,71572,402],{"class":264},[220,71574,347],{"class":420},[220,71576,359],{"class":264},[212,71578,71580],{"className":251,"code":71579,"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,71581,71582,71592,71596,71610,71614,71635,71643,71647,71651],{"__ignoreMap":178},[220,71583,71584,71586,71588,71590],{"class":222,"line":223},[220,71585,261],{"class":260},[220,71587,9763],{"class":264},[220,71589,268],{"class":260},[220,71591,9768],{"class":230},[220,71593,71594],{"class":222,"line":179},[220,71595,647],{"emptyLinePlaceholder":194},[220,71597,71598,71600,71602,71604,71606,71608],{"class":222,"line":389},[220,71599,1735],{"class":260},[220,71601,1738],{"class":420},[220,71603,1741],{"class":260},[220,71605,1744],{"class":260},[220,71607,1747],{"class":226},[220,71609,1750],{"class":264},[220,71611,71612],{"class":222,"line":399},[220,71613,1765],{"class":264},[220,71615,71616,71618,71621,71623,71625,71627,71629,71631,71633],{"class":222,"line":644},[220,71617,1770],{"class":264},[220,71619,71620],{"class":230},"'Vignette'",[220,71622,1776],{"class":264},[220,71624,18295],{"class":230},[220,71626,4812],{"class":264},[220,71628,6000],{"class":420},[220,71630,41295],{"class":264},[220,71632,6923],{"class":420},[220,71634,5792],{"class":264},[220,71636,71637,71639,71641],{"class":222,"line":650},[220,71638,5260],{"class":264},[220,71640,3206],{"class":230},[220,71642,2465],{"class":264},[220,71644,71645],{"class":222,"line":656},[220,71646,5277],{"class":264},[220,71648,71649],{"class":222,"line":673},[220,71650,1787],{"class":264},[220,71652,71653],{"class":222,"line":682},[220,71654,1792],{"class":264},[1504,71656,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71658},[71659,71660],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":71254,"description":71262},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":71667,"title":71668,"body":71669,"category":31344,"componentType":24141,"description":71676,"extension":191,"meta":71861,"navigation":194,"path":71862,"requiresChild":30811,"seo":71863,"stem":71864,"__hash__":71865},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":71670,"toc":71857},[71671,71674,71677,71679,71681,71684,71686,71855],[11,71672,71668],{"id":71673},"voronoi",[15,71675,71676],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[30192,71678],{"component":71668},[23,71680,30196],{"id":24798},[30198,71682],{":props":71683},"[{\"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,71685,30204],{"id":30203},[246,71687,71688,71717,71745,71773,71801],{":tabs":1557},[212,71689,71691],{"className":334,"code":71690,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,71692,71693,71701,71709],{"__ignoreMap":178},[220,71694,71695,71697,71699],{"class":222,"line":223},[220,71696,343],{"class":264},[220,71698,347],{"class":346},[220,71700,359],{"class":264},[220,71702,71703,71705,71707],{"class":222,"line":179},[220,71704,364],{"class":264},[220,71706,71668],{"class":346},[220,71708,386],{"class":264},[220,71710,71711,71713,71715],{"class":222,"line":389},[220,71712,402],{"class":264},[220,71714,347],{"class":346},[220,71716,359],{"class":264},[212,71718,71719],{"className":409,"code":71690,"language":411,"meta":178,"style":178},[99,71720,71721,71729,71737],{"__ignoreMap":178},[220,71722,71723,71725,71727],{"class":222,"line":223},[220,71724,343],{"class":264},[220,71726,347],{"class":420},[220,71728,359],{"class":264},[220,71730,71731,71733,71735],{"class":222,"line":179},[220,71732,364],{"class":264},[220,71734,71668],{"class":420},[220,71736,386],{"class":264},[220,71738,71739,71741,71743],{"class":222,"line":389},[220,71740,402],{"class":264},[220,71742,347],{"class":420},[220,71744,359],{"class":264},[212,71746,71747],{"className":2844,"code":71690,"language":2846,"meta":178,"style":178},[99,71748,71749,71757,71765],{"__ignoreMap":178},[220,71750,71751,71753,71755],{"class":222,"line":223},[220,71752,343],{"class":264},[220,71754,347],{"class":420},[220,71756,359],{"class":264},[220,71758,71759,71761,71763],{"class":222,"line":179},[220,71760,364],{"class":264},[220,71762,71668],{"class":420},[220,71764,386],{"class":264},[220,71766,71767,71769,71771],{"class":222,"line":389},[220,71768,402],{"class":264},[220,71770,347],{"class":420},[220,71772,359],{"class":264},[212,71774,71775],{"className":468,"code":71690,"language":469,"meta":178,"style":178},[99,71776,71777,71785,71793],{"__ignoreMap":178},[220,71778,71779,71781,71783],{"class":222,"line":223},[220,71780,343],{"class":264},[220,71782,347],{"class":420},[220,71784,359],{"class":264},[220,71786,71787,71789,71791],{"class":222,"line":179},[220,71788,364],{"class":264},[220,71790,71668],{"class":420},[220,71792,386],{"class":264},[220,71794,71795,71797,71799],{"class":222,"line":389},[220,71796,402],{"class":264},[220,71798,347],{"class":420},[220,71800,359],{"class":264},[212,71802,71804],{"className":251,"code":71803,"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,71805,71806,71816,71820,71834,71838,71847,71851],{"__ignoreMap":178},[220,71807,71808,71810,71812,71814],{"class":222,"line":223},[220,71809,261],{"class":260},[220,71811,9763],{"class":264},[220,71813,268],{"class":260},[220,71815,9768],{"class":230},[220,71817,71818],{"class":222,"line":179},[220,71819,647],{"emptyLinePlaceholder":194},[220,71821,71822,71824,71826,71828,71830,71832],{"class":222,"line":389},[220,71823,1735],{"class":260},[220,71825,1738],{"class":420},[220,71827,1741],{"class":260},[220,71829,1744],{"class":260},[220,71831,1747],{"class":226},[220,71833,1750],{"class":264},[220,71835,71836],{"class":222,"line":399},[220,71837,1765],{"class":264},[220,71839,71840,71842,71845],{"class":222,"line":644},[220,71841,1770],{"class":264},[220,71843,71844],{"class":230},"'Voronoi'",[220,71846,2465],{"class":264},[220,71848,71849],{"class":222,"line":650},[220,71850,1787],{"class":264},[220,71852,71853],{"class":222,"line":656},[220,71854,1792],{"class":264},[1504,71856,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":71858},[71859,71860],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":71668,"description":71676},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":71867,"title":71868,"body":71869,"category":33488,"componentType":24141,"description":71876,"extension":191,"meta":72061,"navigation":194,"path":72062,"requiresChild":30811,"seo":72063,"stem":72064,"__hash__":72065},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":71870,"toc":72057},[71871,71874,71877,71879,71881,71884,71886,72055],[11,71872,71868],{"id":71873},"water",[15,71875,71876],{},"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",[30192,71878],{"component":71868},[23,71880,30196],{"id":24798},[30198,71882],{":props":71883},"[{\"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,71885,30204],{"id":30203},[246,71887,71888,71917,71945,71973,72001],{":tabs":1557},[212,71889,71891],{"className":334,"code":71890,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,71892,71893,71901,71909],{"__ignoreMap":178},[220,71894,71895,71897,71899],{"class":222,"line":223},[220,71896,343],{"class":264},[220,71898,347],{"class":346},[220,71900,359],{"class":264},[220,71902,71903,71905,71907],{"class":222,"line":179},[220,71904,364],{"class":264},[220,71906,71868],{"class":346},[220,71908,386],{"class":264},[220,71910,71911,71913,71915],{"class":222,"line":389},[220,71912,402],{"class":264},[220,71914,347],{"class":346},[220,71916,359],{"class":264},[212,71918,71919],{"className":409,"code":71890,"language":411,"meta":178,"style":178},[99,71920,71921,71929,71937],{"__ignoreMap":178},[220,71922,71923,71925,71927],{"class":222,"line":223},[220,71924,343],{"class":264},[220,71926,347],{"class":420},[220,71928,359],{"class":264},[220,71930,71931,71933,71935],{"class":222,"line":179},[220,71932,364],{"class":264},[220,71934,71868],{"class":420},[220,71936,386],{"class":264},[220,71938,71939,71941,71943],{"class":222,"line":389},[220,71940,402],{"class":264},[220,71942,347],{"class":420},[220,71944,359],{"class":264},[212,71946,71947],{"className":2844,"code":71890,"language":2846,"meta":178,"style":178},[99,71948,71949,71957,71965],{"__ignoreMap":178},[220,71950,71951,71953,71955],{"class":222,"line":223},[220,71952,343],{"class":264},[220,71954,347],{"class":420},[220,71956,359],{"class":264},[220,71958,71959,71961,71963],{"class":222,"line":179},[220,71960,364],{"class":264},[220,71962,71868],{"class":420},[220,71964,386],{"class":264},[220,71966,71967,71969,71971],{"class":222,"line":389},[220,71968,402],{"class":264},[220,71970,347],{"class":420},[220,71972,359],{"class":264},[212,71974,71975],{"className":468,"code":71890,"language":469,"meta":178,"style":178},[99,71976,71977,71985,71993],{"__ignoreMap":178},[220,71978,71979,71981,71983],{"class":222,"line":223},[220,71980,343],{"class":264},[220,71982,347],{"class":420},[220,71984,359],{"class":264},[220,71986,71987,71989,71991],{"class":222,"line":179},[220,71988,364],{"class":264},[220,71990,71868],{"class":420},[220,71992,386],{"class":264},[220,71994,71995,71997,71999],{"class":222,"line":389},[220,71996,402],{"class":264},[220,71998,347],{"class":420},[220,72000,359],{"class":264},[212,72002,72004],{"className":251,"code":72003,"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,72005,72006,72016,72020,72034,72038,72047,72051],{"__ignoreMap":178},[220,72007,72008,72010,72012,72014],{"class":222,"line":223},[220,72009,261],{"class":260},[220,72011,9763],{"class":264},[220,72013,268],{"class":260},[220,72015,9768],{"class":230},[220,72017,72018],{"class":222,"line":179},[220,72019,647],{"emptyLinePlaceholder":194},[220,72021,72022,72024,72026,72028,72030,72032],{"class":222,"line":389},[220,72023,1735],{"class":260},[220,72025,1738],{"class":420},[220,72027,1741],{"class":260},[220,72029,1744],{"class":260},[220,72031,1747],{"class":226},[220,72033,1750],{"class":264},[220,72035,72036],{"class":222,"line":399},[220,72037,1765],{"class":264},[220,72039,72040,72042,72045],{"class":222,"line":644},[220,72041,1770],{"class":264},[220,72043,72044],{"class":230},"'Water'",[220,72046,2465],{"class":264},[220,72048,72049],{"class":222,"line":650},[220,72050,1787],{"class":264},[220,72052,72053],{"class":222,"line":656},[220,72054,1792],{"class":264},[1504,72056,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":72058},[72059,72060],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":71868,"description":71876},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":72067,"title":72068,"body":72069,"category":31087,"componentType":24147,"description":72076,"extension":191,"meta":72393,"navigation":194,"path":72394,"requiresChild":194,"seo":72395,"stem":72396,"__hash__":72397},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":72070,"toc":72389},[72071,72074,72077,72079,72081,72084,72086,72387],[11,72072,72068],{"id":72073},"watercolor",[15,72075,72076],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[30192,72078],{"component":72068},[23,72080,30196],{"id":24798},[30198,72082],{":props":72083},"[{\"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,72085,30204],{"id":30203},[246,72087,72088,72144,72203,72259,72317],{":tabs":1557},[212,72089,72091],{"className":334,"code":72090,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,72092,72093,72101,72108,72116,72120,72128,72136],{"__ignoreMap":178},[220,72094,72095,72097,72099],{"class":222,"line":223},[220,72096,343],{"class":264},[220,72098,347],{"class":346},[220,72100,359],{"class":264},[220,72102,72103,72105],{"class":222,"line":179},[220,72104,364],{"class":264},[220,72106,72107],{"class":346},"Watercolor\n",[220,72109,72110,72112,72114],{"class":222,"line":389},[220,72111,15666],{"class":226},[220,72113,353],{"class":264},[220,72115,35312],{"class":230},[220,72117,72118],{"class":222,"line":399},[220,72119,30240],{"class":264},[220,72121,72122,72124,72126],{"class":222,"line":644},[220,72123,2550],{"class":264},[220,72125,2553],{"class":346},[220,72127,386],{"class":264},[220,72129,72130,72132,72134],{"class":222,"line":650},[220,72131,2567],{"class":264},[220,72133,72068],{"class":346},[220,72135,359],{"class":264},[220,72137,72138,72140,72142],{"class":222,"line":656},[220,72139,402],{"class":264},[220,72141,347],{"class":346},[220,72143,359],{"class":264},[212,72145,72147],{"className":409,"code":72146,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,72148,72149,72157,72163,72175,72179,72187,72195],{"__ignoreMap":178},[220,72150,72151,72153,72155],{"class":222,"line":223},[220,72152,343],{"class":264},[220,72154,347],{"class":420},[220,72156,359],{"class":264},[220,72158,72159,72161],{"class":222,"line":179},[220,72160,364],{"class":264},[220,72162,72107],{"class":420},[220,72164,72165,72167,72169,72171,72173],{"class":222,"line":389},[220,72166,7892],{"class":226},[220,72168,353],{"class":260},[220,72170,743],{"class":264},[220,72172,35366],{"class":420},[220,72174,749],{"class":264},[220,72176,72177],{"class":222,"line":399},[220,72178,30240],{"class":264},[220,72180,72181,72183,72185],{"class":222,"line":644},[220,72182,2550],{"class":264},[220,72184,2553],{"class":420},[220,72186,386],{"class":264},[220,72188,72189,72191,72193],{"class":222,"line":650},[220,72190,2567],{"class":264},[220,72192,72068],{"class":420},[220,72194,359],{"class":264},[220,72196,72197,72199,72201],{"class":222,"line":656},[220,72198,402],{"class":264},[220,72200,347],{"class":420},[220,72202,359],{"class":264},[212,72204,72205],{"className":2844,"code":72146,"language":2846,"meta":178,"style":178},[99,72206,72207,72215,72221,72231,72235,72243,72251],{"__ignoreMap":178},[220,72208,72209,72211,72213],{"class":222,"line":223},[220,72210,343],{"class":264},[220,72212,347],{"class":420},[220,72214,359],{"class":264},[220,72216,72217,72219],{"class":222,"line":179},[220,72218,364],{"class":264},[220,72220,72107],{"class":420},[220,72222,72223,72225,72227,72229],{"class":222,"line":389},[220,72224,7892],{"class":226},[220,72226,28138],{"class":264},[220,72228,35366],{"class":420},[220,72230,749],{"class":264},[220,72232,72233],{"class":222,"line":399},[220,72234,30240],{"class":264},[220,72236,72237,72239,72241],{"class":222,"line":644},[220,72238,2550],{"class":264},[220,72240,2553],{"class":420},[220,72242,386],{"class":264},[220,72244,72245,72247,72249],{"class":222,"line":650},[220,72246,2567],{"class":264},[220,72248,72068],{"class":420},[220,72250,359],{"class":264},[220,72252,72253,72255,72257],{"class":222,"line":656},[220,72254,402],{"class":264},[220,72256,347],{"class":420},[220,72258,359],{"class":264},[212,72260,72261],{"className":468,"code":72146,"language":469,"meta":178,"style":178},[99,72262,72263,72271,72277,72289,72293,72301,72309],{"__ignoreMap":178},[220,72264,72265,72267,72269],{"class":222,"line":223},[220,72266,343],{"class":264},[220,72268,347],{"class":420},[220,72270,359],{"class":264},[220,72272,72273,72275],{"class":222,"line":179},[220,72274,364],{"class":264},[220,72276,72107],{"class":420},[220,72278,72279,72281,72283,72285,72287],{"class":222,"line":389},[220,72280,7892],{"class":226},[220,72282,353],{"class":260},[220,72284,743],{"class":264},[220,72286,35366],{"class":420},[220,72288,749],{"class":264},[220,72290,72291],{"class":222,"line":399},[220,72292,30240],{"class":264},[220,72294,72295,72297,72299],{"class":222,"line":644},[220,72296,2550],{"class":264},[220,72298,2553],{"class":420},[220,72300,386],{"class":264},[220,72302,72303,72305,72307],{"class":222,"line":650},[220,72304,2567],{"class":264},[220,72306,72068],{"class":420},[220,72308,359],{"class":264},[220,72310,72311,72313,72315],{"class":222,"line":656},[220,72312,402],{"class":264},[220,72314,347],{"class":420},[220,72316,359],{"class":264},[212,72318,72320],{"className":251,"code":72319,"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,72321,72322,72332,72336,72350,72354,72367,72375,72379,72383],{"__ignoreMap":178},[220,72323,72324,72326,72328,72330],{"class":222,"line":223},[220,72325,261],{"class":260},[220,72327,9763],{"class":264},[220,72329,268],{"class":260},[220,72331,9768],{"class":230},[220,72333,72334],{"class":222,"line":179},[220,72335,647],{"emptyLinePlaceholder":194},[220,72337,72338,72340,72342,72344,72346,72348],{"class":222,"line":389},[220,72339,1735],{"class":260},[220,72341,1738],{"class":420},[220,72343,1741],{"class":260},[220,72345,1744],{"class":260},[220,72347,1747],{"class":226},[220,72349,1750],{"class":264},[220,72351,72352],{"class":222,"line":399},[220,72353,1765],{"class":264},[220,72355,72356,72358,72361,72363,72365],{"class":222,"line":644},[220,72357,1770],{"class":264},[220,72359,72360],{"class":230},"'Watercolor'",[220,72362,5787],{"class":264},[220,72364,35366],{"class":420},[220,72366,5792],{"class":264},[220,72368,72369,72371,72373],{"class":222,"line":650},[220,72370,5260],{"class":264},[220,72372,3206],{"class":230},[220,72374,2465],{"class":264},[220,72376,72377],{"class":222,"line":656},[220,72378,5277],{"class":264},[220,72380,72381],{"class":222,"line":673},[220,72382,1787],{"class":264},[220,72384,72385],{"class":222,"line":682},[220,72386,1792],{"class":264},[1504,72388,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72390},[72391,72392],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":72068,"description":72076},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":72399,"title":72400,"body":72401,"category":31677,"componentType":24147,"description":72408,"extension":191,"meta":72669,"navigation":194,"path":72670,"requiresChild":194,"seo":72671,"stem":72672,"__hash__":72673},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":72402,"toc":72665},[72403,72406,72409,72411,72413,72416,72418,72663],[11,72404,72400],{"id":72405},"wavedistortion",[15,72407,72408],{},"Wave-based distortion with multiple waveform types",[30192,72410],{"component":72400},[23,72412,30196],{"id":24798},[30198,72414],{":props":72415},"[{\"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,72417,30204],{"id":30203},[246,72419,72420,72465,72509,72553,72597],{":tabs":1557},[212,72421,72423],{"className":334,"code":72422,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,72424,72425,72433,72441,72449,72457],{"__ignoreMap":178},[220,72426,72427,72429,72431],{"class":222,"line":223},[220,72428,343],{"class":264},[220,72430,347],{"class":346},[220,72432,359],{"class":264},[220,72434,72435,72437,72439],{"class":222,"line":179},[220,72436,364],{"class":264},[220,72438,72400],{"class":346},[220,72440,359],{"class":264},[220,72442,72443,72445,72447],{"class":222,"line":389},[220,72444,2550],{"class":264},[220,72446,2553],{"class":346},[220,72448,386],{"class":264},[220,72450,72451,72453,72455],{"class":222,"line":399},[220,72452,2567],{"class":264},[220,72454,72400],{"class":346},[220,72456,359],{"class":264},[220,72458,72459,72461,72463],{"class":222,"line":644},[220,72460,402],{"class":264},[220,72462,347],{"class":346},[220,72464,359],{"class":264},[212,72466,72467],{"className":409,"code":72422,"language":411,"meta":178,"style":178},[99,72468,72469,72477,72485,72493,72501],{"__ignoreMap":178},[220,72470,72471,72473,72475],{"class":222,"line":223},[220,72472,343],{"class":264},[220,72474,347],{"class":420},[220,72476,359],{"class":264},[220,72478,72479,72481,72483],{"class":222,"line":179},[220,72480,364],{"class":264},[220,72482,72400],{"class":420},[220,72484,359],{"class":264},[220,72486,72487,72489,72491],{"class":222,"line":389},[220,72488,2550],{"class":264},[220,72490,2553],{"class":420},[220,72492,386],{"class":264},[220,72494,72495,72497,72499],{"class":222,"line":399},[220,72496,2567],{"class":264},[220,72498,72400],{"class":420},[220,72500,359],{"class":264},[220,72502,72503,72505,72507],{"class":222,"line":644},[220,72504,402],{"class":264},[220,72506,347],{"class":420},[220,72508,359],{"class":264},[212,72510,72511],{"className":2844,"code":72422,"language":2846,"meta":178,"style":178},[99,72512,72513,72521,72529,72537,72545],{"__ignoreMap":178},[220,72514,72515,72517,72519],{"class":222,"line":223},[220,72516,343],{"class":264},[220,72518,347],{"class":420},[220,72520,359],{"class":264},[220,72522,72523,72525,72527],{"class":222,"line":179},[220,72524,364],{"class":264},[220,72526,72400],{"class":420},[220,72528,359],{"class":264},[220,72530,72531,72533,72535],{"class":222,"line":389},[220,72532,2550],{"class":264},[220,72534,2553],{"class":420},[220,72536,386],{"class":264},[220,72538,72539,72541,72543],{"class":222,"line":399},[220,72540,2567],{"class":264},[220,72542,72400],{"class":420},[220,72544,359],{"class":264},[220,72546,72547,72549,72551],{"class":222,"line":644},[220,72548,402],{"class":264},[220,72550,347],{"class":420},[220,72552,359],{"class":264},[212,72554,72555],{"className":468,"code":72422,"language":469,"meta":178,"style":178},[99,72556,72557,72565,72573,72581,72589],{"__ignoreMap":178},[220,72558,72559,72561,72563],{"class":222,"line":223},[220,72560,343],{"class":264},[220,72562,347],{"class":420},[220,72564,359],{"class":264},[220,72566,72567,72569,72571],{"class":222,"line":179},[220,72568,364],{"class":264},[220,72570,72400],{"class":420},[220,72572,359],{"class":264},[220,72574,72575,72577,72579],{"class":222,"line":389},[220,72576,2550],{"class":264},[220,72578,2553],{"class":420},[220,72580,386],{"class":264},[220,72582,72583,72585,72587],{"class":222,"line":399},[220,72584,2567],{"class":264},[220,72586,72400],{"class":420},[220,72588,359],{"class":264},[220,72590,72591,72593,72595],{"class":222,"line":644},[220,72592,402],{"class":264},[220,72594,347],{"class":420},[220,72596,359],{"class":264},[212,72598,72600],{"className":251,"code":72599,"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,72601,72602,72612,72616,72630,72634,72643,72651,72655,72659],{"__ignoreMap":178},[220,72603,72604,72606,72608,72610],{"class":222,"line":223},[220,72605,261],{"class":260},[220,72607,9763],{"class":264},[220,72609,268],{"class":260},[220,72611,9768],{"class":230},[220,72613,72614],{"class":222,"line":179},[220,72615,647],{"emptyLinePlaceholder":194},[220,72617,72618,72620,72622,72624,72626,72628],{"class":222,"line":389},[220,72619,1735],{"class":260},[220,72621,1738],{"class":420},[220,72623,1741],{"class":260},[220,72625,1744],{"class":260},[220,72627,1747],{"class":226},[220,72629,1750],{"class":264},[220,72631,72632],{"class":222,"line":399},[220,72633,1765],{"class":264},[220,72635,72636,72638,72641],{"class":222,"line":644},[220,72637,1770],{"class":264},[220,72639,72640],{"class":230},"'WaveDistortion'",[220,72642,5255],{"class":264},[220,72644,72645,72647,72649],{"class":222,"line":650},[220,72646,5260],{"class":264},[220,72648,3206],{"class":230},[220,72650,2465],{"class":264},[220,72652,72653],{"class":222,"line":656},[220,72654,5277],{"class":264},[220,72656,72657],{"class":222,"line":673},[220,72658,1787],{"class":264},[220,72660,72661],{"class":222,"line":682},[220,72662,1792],{"class":264},[1504,72664,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":72666},[72667,72668],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":72400,"description":72408},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":72675,"title":72676,"body":72677,"category":31344,"componentType":24141,"description":72684,"extension":191,"meta":72869,"navigation":194,"path":72870,"requiresChild":30811,"seo":72871,"stem":72872,"__hash__":72873},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":72678,"toc":72865},[72679,72682,72685,72687,72689,72692,72694,72863],[11,72680,72676],{"id":72681},"waveletnoise",[15,72683,72684],{},"Rotating banded wavelets that ripple as they animate",[30192,72686],{"component":72676},[23,72688,30196],{"id":24798},[30198,72690],{":props":72691},"[{\"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,72693,30204],{"id":30203},[246,72695,72696,72725,72753,72781,72809],{":tabs":1557},[212,72697,72699],{"className":334,"code":72698,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,72700,72701,72709,72717],{"__ignoreMap":178},[220,72702,72703,72705,72707],{"class":222,"line":223},[220,72704,343],{"class":264},[220,72706,347],{"class":346},[220,72708,359],{"class":264},[220,72710,72711,72713,72715],{"class":222,"line":179},[220,72712,364],{"class":264},[220,72714,72676],{"class":346},[220,72716,386],{"class":264},[220,72718,72719,72721,72723],{"class":222,"line":389},[220,72720,402],{"class":264},[220,72722,347],{"class":346},[220,72724,359],{"class":264},[212,72726,72727],{"className":409,"code":72698,"language":411,"meta":178,"style":178},[99,72728,72729,72737,72745],{"__ignoreMap":178},[220,72730,72731,72733,72735],{"class":222,"line":223},[220,72732,343],{"class":264},[220,72734,347],{"class":420},[220,72736,359],{"class":264},[220,72738,72739,72741,72743],{"class":222,"line":179},[220,72740,364],{"class":264},[220,72742,72676],{"class":420},[220,72744,386],{"class":264},[220,72746,72747,72749,72751],{"class":222,"line":389},[220,72748,402],{"class":264},[220,72750,347],{"class":420},[220,72752,359],{"class":264},[212,72754,72755],{"className":2844,"code":72698,"language":2846,"meta":178,"style":178},[99,72756,72757,72765,72773],{"__ignoreMap":178},[220,72758,72759,72761,72763],{"class":222,"line":223},[220,72760,343],{"class":264},[220,72762,347],{"class":420},[220,72764,359],{"class":264},[220,72766,72767,72769,72771],{"class":222,"line":179},[220,72768,364],{"class":264},[220,72770,72676],{"class":420},[220,72772,386],{"class":264},[220,72774,72775,72777,72779],{"class":222,"line":389},[220,72776,402],{"class":264},[220,72778,347],{"class":420},[220,72780,359],{"class":264},[212,72782,72783],{"className":468,"code":72698,"language":469,"meta":178,"style":178},[99,72784,72785,72793,72801],{"__ignoreMap":178},[220,72786,72787,72789,72791],{"class":222,"line":223},[220,72788,343],{"class":264},[220,72790,347],{"class":420},[220,72792,359],{"class":264},[220,72794,72795,72797,72799],{"class":222,"line":179},[220,72796,364],{"class":264},[220,72798,72676],{"class":420},[220,72800,386],{"class":264},[220,72802,72803,72805,72807],{"class":222,"line":389},[220,72804,402],{"class":264},[220,72806,347],{"class":420},[220,72808,359],{"class":264},[212,72810,72812],{"className":251,"code":72811,"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,72813,72814,72824,72828,72842,72846,72855,72859],{"__ignoreMap":178},[220,72815,72816,72818,72820,72822],{"class":222,"line":223},[220,72817,261],{"class":260},[220,72819,9763],{"class":264},[220,72821,268],{"class":260},[220,72823,9768],{"class":230},[220,72825,72826],{"class":222,"line":179},[220,72827,647],{"emptyLinePlaceholder":194},[220,72829,72830,72832,72834,72836,72838,72840],{"class":222,"line":389},[220,72831,1735],{"class":260},[220,72833,1738],{"class":420},[220,72835,1741],{"class":260},[220,72837,1744],{"class":260},[220,72839,1747],{"class":226},[220,72841,1750],{"class":264},[220,72843,72844],{"class":222,"line":399},[220,72845,1765],{"class":264},[220,72847,72848,72850,72853],{"class":222,"line":644},[220,72849,1770],{"class":264},[220,72851,72852],{"class":230},"'WaveletNoise'",[220,72854,2465],{"class":264},[220,72856,72857],{"class":222,"line":650},[220,72858,1787],{"class":264},[220,72860,72861],{"class":222,"line":656},[220,72862,1792],{"class":264},[1504,72864,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":72866},[72867,72868],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":72676,"description":72684},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":72875,"title":72876,"body":72877,"category":31344,"componentType":24141,"description":72884,"extension":191,"meta":73069,"navigation":194,"path":73070,"requiresChild":30811,"seo":73071,"stem":73072,"__hash__":73073},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":72878,"toc":73065},[72879,72882,72885,72887,72889,72892,72894,73063],[11,72880,72876],{"id":72881},"weave",[15,72883,72884],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[30192,72886],{"component":72876},[23,72888,30196],{"id":24798},[30198,72890],{":props":72891},"[{\"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,72893,30204],{"id":30203},[246,72895,72896,72925,72953,72981,73009],{":tabs":1557},[212,72897,72899],{"className":334,"code":72898,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,72900,72901,72909,72917],{"__ignoreMap":178},[220,72902,72903,72905,72907],{"class":222,"line":223},[220,72904,343],{"class":264},[220,72906,347],{"class":346},[220,72908,359],{"class":264},[220,72910,72911,72913,72915],{"class":222,"line":179},[220,72912,364],{"class":264},[220,72914,72876],{"class":346},[220,72916,386],{"class":264},[220,72918,72919,72921,72923],{"class":222,"line":389},[220,72920,402],{"class":264},[220,72922,347],{"class":346},[220,72924,359],{"class":264},[212,72926,72927],{"className":409,"code":72898,"language":411,"meta":178,"style":178},[99,72928,72929,72937,72945],{"__ignoreMap":178},[220,72930,72931,72933,72935],{"class":222,"line":223},[220,72932,343],{"class":264},[220,72934,347],{"class":420},[220,72936,359],{"class":264},[220,72938,72939,72941,72943],{"class":222,"line":179},[220,72940,364],{"class":264},[220,72942,72876],{"class":420},[220,72944,386],{"class":264},[220,72946,72947,72949,72951],{"class":222,"line":389},[220,72948,402],{"class":264},[220,72950,347],{"class":420},[220,72952,359],{"class":264},[212,72954,72955],{"className":2844,"code":72898,"language":2846,"meta":178,"style":178},[99,72956,72957,72965,72973],{"__ignoreMap":178},[220,72958,72959,72961,72963],{"class":222,"line":223},[220,72960,343],{"class":264},[220,72962,347],{"class":420},[220,72964,359],{"class":264},[220,72966,72967,72969,72971],{"class":222,"line":179},[220,72968,364],{"class":264},[220,72970,72876],{"class":420},[220,72972,386],{"class":264},[220,72974,72975,72977,72979],{"class":222,"line":389},[220,72976,402],{"class":264},[220,72978,347],{"class":420},[220,72980,359],{"class":264},[212,72982,72983],{"className":468,"code":72898,"language":469,"meta":178,"style":178},[99,72984,72985,72993,73001],{"__ignoreMap":178},[220,72986,72987,72989,72991],{"class":222,"line":223},[220,72988,343],{"class":264},[220,72990,347],{"class":420},[220,72992,359],{"class":264},[220,72994,72995,72997,72999],{"class":222,"line":179},[220,72996,364],{"class":264},[220,72998,72876],{"class":420},[220,73000,386],{"class":264},[220,73002,73003,73005,73007],{"class":222,"line":389},[220,73004,402],{"class":264},[220,73006,347],{"class":420},[220,73008,359],{"class":264},[212,73010,73012],{"className":251,"code":73011,"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,73013,73014,73024,73028,73042,73046,73055,73059],{"__ignoreMap":178},[220,73015,73016,73018,73020,73022],{"class":222,"line":223},[220,73017,261],{"class":260},[220,73019,9763],{"class":264},[220,73021,268],{"class":260},[220,73023,9768],{"class":230},[220,73025,73026],{"class":222,"line":179},[220,73027,647],{"emptyLinePlaceholder":194},[220,73029,73030,73032,73034,73036,73038,73040],{"class":222,"line":389},[220,73031,1735],{"class":260},[220,73033,1738],{"class":420},[220,73035,1741],{"class":260},[220,73037,1744],{"class":260},[220,73039,1747],{"class":226},[220,73041,1750],{"class":264},[220,73043,73044],{"class":222,"line":399},[220,73045,1765],{"class":264},[220,73047,73048,73050,73053],{"class":222,"line":644},[220,73049,1770],{"class":264},[220,73051,73052],{"class":230},"'Weave'",[220,73054,2465],{"class":264},[220,73056,73057],{"class":222,"line":650},[220,73058,1787],{"class":264},[220,73060,73061],{"class":222,"line":656},[220,73062,1792],{"class":264},[1504,73064,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":73066},[73067,73068],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":72876,"description":72884},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":73075,"title":73076,"body":73077,"category":31344,"componentType":24141,"description":73084,"extension":191,"meta":73269,"navigation":194,"path":73270,"requiresChild":30811,"seo":73271,"stem":73272,"__hash__":73273},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":73078,"toc":73265},[73079,73082,73085,73087,73089,73092,73094,73263],[11,73080,73076],{"id":73081},"webcamtexture",[15,73083,73084],{},"Display a live webcam feed with customizable object-fit modes",[30192,73086],{"component":73076},[23,73088,30196],{"id":24798},[30198,73090],{":props":73091},"[{\"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,73093,30204],{"id":30203},[246,73095,73096,73125,73153,73181,73209],{":tabs":1557},[212,73097,73099],{"className":334,"code":73098,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,73100,73101,73109,73117],{"__ignoreMap":178},[220,73102,73103,73105,73107],{"class":222,"line":223},[220,73104,343],{"class":264},[220,73106,347],{"class":346},[220,73108,359],{"class":264},[220,73110,73111,73113,73115],{"class":222,"line":179},[220,73112,364],{"class":264},[220,73114,73076],{"class":346},[220,73116,386],{"class":264},[220,73118,73119,73121,73123],{"class":222,"line":389},[220,73120,402],{"class":264},[220,73122,347],{"class":346},[220,73124,359],{"class":264},[212,73126,73127],{"className":409,"code":73098,"language":411,"meta":178,"style":178},[99,73128,73129,73137,73145],{"__ignoreMap":178},[220,73130,73131,73133,73135],{"class":222,"line":223},[220,73132,343],{"class":264},[220,73134,347],{"class":420},[220,73136,359],{"class":264},[220,73138,73139,73141,73143],{"class":222,"line":179},[220,73140,364],{"class":264},[220,73142,73076],{"class":420},[220,73144,386],{"class":264},[220,73146,73147,73149,73151],{"class":222,"line":389},[220,73148,402],{"class":264},[220,73150,347],{"class":420},[220,73152,359],{"class":264},[212,73154,73155],{"className":2844,"code":73098,"language":2846,"meta":178,"style":178},[99,73156,73157,73165,73173],{"__ignoreMap":178},[220,73158,73159,73161,73163],{"class":222,"line":223},[220,73160,343],{"class":264},[220,73162,347],{"class":420},[220,73164,359],{"class":264},[220,73166,73167,73169,73171],{"class":222,"line":179},[220,73168,364],{"class":264},[220,73170,73076],{"class":420},[220,73172,386],{"class":264},[220,73174,73175,73177,73179],{"class":222,"line":389},[220,73176,402],{"class":264},[220,73178,347],{"class":420},[220,73180,359],{"class":264},[212,73182,73183],{"className":468,"code":73098,"language":469,"meta":178,"style":178},[99,73184,73185,73193,73201],{"__ignoreMap":178},[220,73186,73187,73189,73191],{"class":222,"line":223},[220,73188,343],{"class":264},[220,73190,347],{"class":420},[220,73192,359],{"class":264},[220,73194,73195,73197,73199],{"class":222,"line":179},[220,73196,364],{"class":264},[220,73198,73076],{"class":420},[220,73200,386],{"class":264},[220,73202,73203,73205,73207],{"class":222,"line":389},[220,73204,402],{"class":264},[220,73206,347],{"class":420},[220,73208,359],{"class":264},[212,73210,73212],{"className":251,"code":73211,"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,73213,73214,73224,73228,73242,73246,73255,73259],{"__ignoreMap":178},[220,73215,73216,73218,73220,73222],{"class":222,"line":223},[220,73217,261],{"class":260},[220,73219,9763],{"class":264},[220,73221,268],{"class":260},[220,73223,9768],{"class":230},[220,73225,73226],{"class":222,"line":179},[220,73227,647],{"emptyLinePlaceholder":194},[220,73229,73230,73232,73234,73236,73238,73240],{"class":222,"line":389},[220,73231,1735],{"class":260},[220,73233,1738],{"class":420},[220,73235,1741],{"class":260},[220,73237,1744],{"class":260},[220,73239,1747],{"class":226},[220,73241,1750],{"class":264},[220,73243,73244],{"class":222,"line":399},[220,73245,1765],{"class":264},[220,73247,73248,73250,73253],{"class":222,"line":644},[220,73249,1770],{"class":264},[220,73251,73252],{"class":230},"'WebcamTexture'",[220,73254,2465],{"class":264},[220,73256,73257],{"class":222,"line":650},[220,73258,1787],{"class":264},[220,73260,73261],{"class":222,"line":656},[220,73262,1792],{"class":264},[1504,73264,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":73266},[73267,73268],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":73076,"description":73084},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":73275,"title":73276,"body":73277,"category":31087,"componentType":24147,"description":73284,"extension":191,"meta":73601,"navigation":194,"path":73602,"requiresChild":194,"seo":73603,"stem":73604,"__hash__":73605},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":73278,"toc":73597},[73279,73282,73285,73287,73289,73292,73294,73595],[11,73280,73276],{"id":73281},"wool",[15,73283,73284],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[30192,73286],{"component":73276},[23,73288,30196],{"id":24798},[30198,73290],{":props":73291},"[{\"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,73293,30204],{"id":30203},[246,73295,73296,73352,73411,73467,73525],{":tabs":1557},[212,73297,73299],{"className":334,"code":73298,"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,73300,73301,73309,73316,73324,73328,73336,73344],{"__ignoreMap":178},[220,73302,73303,73305,73307],{"class":222,"line":223},[220,73304,343],{"class":264},[220,73306,347],{"class":346},[220,73308,359],{"class":264},[220,73310,73311,73313],{"class":222,"line":179},[220,73312,364],{"class":264},[220,73314,73315],{"class":346},"Wool\n",[220,73317,73318,73320,73322],{"class":222,"line":389},[220,73319,18633],{"class":226},[220,73321,353],{"class":264},[220,73323,38802],{"class":230},[220,73325,73326],{"class":222,"line":399},[220,73327,30240],{"class":264},[220,73329,73330,73332,73334],{"class":222,"line":644},[220,73331,2550],{"class":264},[220,73333,2553],{"class":346},[220,73335,386],{"class":264},[220,73337,73338,73340,73342],{"class":222,"line":650},[220,73339,2567],{"class":264},[220,73341,73276],{"class":346},[220,73343,359],{"class":264},[220,73345,73346,73348,73350],{"class":222,"line":656},[220,73347,402],{"class":264},[220,73349,347],{"class":346},[220,73351,359],{"class":264},[212,73353,73355],{"className":409,"code":73354,"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,73356,73357,73365,73371,73383,73387,73395,73403],{"__ignoreMap":178},[220,73358,73359,73361,73363],{"class":222,"line":223},[220,73360,343],{"class":264},[220,73362,347],{"class":420},[220,73364,359],{"class":264},[220,73366,73367,73369],{"class":222,"line":179},[220,73368,364],{"class":264},[220,73370,73315],{"class":420},[220,73372,73373,73375,73377,73379,73381],{"class":222,"line":389},[220,73374,18744],{"class":226},[220,73376,353],{"class":260},[220,73378,743],{"class":264},[220,73380,6000],{"class":420},[220,73382,749],{"class":264},[220,73384,73385],{"class":222,"line":399},[220,73386,30240],{"class":264},[220,73388,73389,73391,73393],{"class":222,"line":644},[220,73390,2550],{"class":264},[220,73392,2553],{"class":420},[220,73394,386],{"class":264},[220,73396,73397,73399,73401],{"class":222,"line":650},[220,73398,2567],{"class":264},[220,73400,73276],{"class":420},[220,73402,359],{"class":264},[220,73404,73405,73407,73409],{"class":222,"line":656},[220,73406,402],{"class":264},[220,73408,347],{"class":420},[220,73410,359],{"class":264},[212,73412,73413],{"className":2844,"code":73354,"language":2846,"meta":178,"style":178},[99,73414,73415,73423,73429,73439,73443,73451,73459],{"__ignoreMap":178},[220,73416,73417,73419,73421],{"class":222,"line":223},[220,73418,343],{"class":264},[220,73420,347],{"class":420},[220,73422,359],{"class":264},[220,73424,73425,73427],{"class":222,"line":179},[220,73426,364],{"class":264},[220,73428,73315],{"class":420},[220,73430,73431,73433,73435,73437],{"class":222,"line":389},[220,73432,18744],{"class":226},[220,73434,28138],{"class":264},[220,73436,6000],{"class":420},[220,73438,749],{"class":264},[220,73440,73441],{"class":222,"line":399},[220,73442,30240],{"class":264},[220,73444,73445,73447,73449],{"class":222,"line":644},[220,73446,2550],{"class":264},[220,73448,2553],{"class":420},[220,73450,386],{"class":264},[220,73452,73453,73455,73457],{"class":222,"line":650},[220,73454,2567],{"class":264},[220,73456,73276],{"class":420},[220,73458,359],{"class":264},[220,73460,73461,73463,73465],{"class":222,"line":656},[220,73462,402],{"class":264},[220,73464,347],{"class":420},[220,73466,359],{"class":264},[212,73468,73469],{"className":468,"code":73354,"language":469,"meta":178,"style":178},[99,73470,73471,73479,73485,73497,73501,73509,73517],{"__ignoreMap":178},[220,73472,73473,73475,73477],{"class":222,"line":223},[220,73474,343],{"class":264},[220,73476,347],{"class":420},[220,73478,359],{"class":264},[220,73480,73481,73483],{"class":222,"line":179},[220,73482,364],{"class":264},[220,73484,73315],{"class":420},[220,73486,73487,73489,73491,73493,73495],{"class":222,"line":389},[220,73488,18744],{"class":226},[220,73490,353],{"class":260},[220,73492,743],{"class":264},[220,73494,6000],{"class":420},[220,73496,749],{"class":264},[220,73498,73499],{"class":222,"line":399},[220,73500,30240],{"class":264},[220,73502,73503,73505,73507],{"class":222,"line":644},[220,73504,2550],{"class":264},[220,73506,2553],{"class":420},[220,73508,386],{"class":264},[220,73510,73511,73513,73515],{"class":222,"line":650},[220,73512,2567],{"class":264},[220,73514,73276],{"class":420},[220,73516,359],{"class":264},[220,73518,73519,73521,73523],{"class":222,"line":656},[220,73520,402],{"class":264},[220,73522,347],{"class":420},[220,73524,359],{"class":264},[212,73526,73528],{"className":251,"code":73527,"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,73529,73530,73540,73544,73558,73562,73575,73583,73587,73591],{"__ignoreMap":178},[220,73531,73532,73534,73536,73538],{"class":222,"line":223},[220,73533,261],{"class":260},[220,73535,9763],{"class":264},[220,73537,268],{"class":260},[220,73539,9768],{"class":230},[220,73541,73542],{"class":222,"line":179},[220,73543,647],{"emptyLinePlaceholder":194},[220,73545,73546,73548,73550,73552,73554,73556],{"class":222,"line":389},[220,73547,1735],{"class":260},[220,73549,1738],{"class":420},[220,73551,1741],{"class":260},[220,73553,1744],{"class":260},[220,73555,1747],{"class":226},[220,73557,1750],{"class":264},[220,73559,73560],{"class":222,"line":399},[220,73561,1765],{"class":264},[220,73563,73564,73566,73569,73571,73573],{"class":222,"line":644},[220,73565,1770],{"class":264},[220,73567,73568],{"class":230},"'Wool'",[220,73570,30484],{"class":264},[220,73572,6000],{"class":420},[220,73574,5792],{"class":264},[220,73576,73577,73579,73581],{"class":222,"line":650},[220,73578,5260],{"class":264},[220,73580,3206],{"class":230},[220,73582,2465],{"class":264},[220,73584,73585],{"class":222,"line":656},[220,73586,5277],{"class":264},[220,73588,73589],{"class":222,"line":673},[220,73590,1787],{"class":264},[220,73592,73593],{"class":222,"line":682},[220,73594,1792],{"class":264},[1504,73596,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73598},[73599,73600],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":73276,"description":73284},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":73607,"title":73608,"body":73609,"category":31344,"componentType":24141,"description":73616,"extension":191,"meta":73801,"navigation":194,"path":73802,"requiresChild":30811,"seo":73803,"stem":73804,"__hash__":73805},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":73610,"toc":73797},[73611,73614,73617,73619,73621,73624,73626,73795],[11,73612,73608],{"id":73613},"worleynoise",[15,73615,73616],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[30192,73618],{"component":73608},[23,73620,30196],{"id":24798},[30198,73622],{":props":73623},"[{\"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,73625,30204],{"id":30203},[246,73627,73628,73657,73685,73713,73741],{":tabs":1557},[212,73629,73631],{"className":334,"code":73630,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[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":346},[220,73640,359],{"class":264},[220,73642,73643,73645,73647],{"class":222,"line":179},[220,73644,364],{"class":264},[220,73646,73608],{"class":346},[220,73648,386],{"class":264},[220,73650,73651,73653,73655],{"class":222,"line":389},[220,73652,402],{"class":264},[220,73654,347],{"class":346},[220,73656,359],{"class":264},[212,73658,73659],{"className":409,"code":73630,"language":411,"meta":178,"style":178},[99,73660,73661,73669,73677],{"__ignoreMap":178},[220,73662,73663,73665,73667],{"class":222,"line":223},[220,73664,343],{"class":264},[220,73666,347],{"class":420},[220,73668,359],{"class":264},[220,73670,73671,73673,73675],{"class":222,"line":179},[220,73672,364],{"class":264},[220,73674,73608],{"class":420},[220,73676,386],{"class":264},[220,73678,73679,73681,73683],{"class":222,"line":389},[220,73680,402],{"class":264},[220,73682,347],{"class":420},[220,73684,359],{"class":264},[212,73686,73687],{"className":2844,"code":73630,"language":2846,"meta":178,"style":178},[99,73688,73689,73697,73705],{"__ignoreMap":178},[220,73690,73691,73693,73695],{"class":222,"line":223},[220,73692,343],{"class":264},[220,73694,347],{"class":420},[220,73696,359],{"class":264},[220,73698,73699,73701,73703],{"class":222,"line":179},[220,73700,364],{"class":264},[220,73702,73608],{"class":420},[220,73704,386],{"class":264},[220,73706,73707,73709,73711],{"class":222,"line":389},[220,73708,402],{"class":264},[220,73710,347],{"class":420},[220,73712,359],{"class":264},[212,73714,73715],{"className":468,"code":73630,"language":469,"meta":178,"style":178},[99,73716,73717,73725,73733],{"__ignoreMap":178},[220,73718,73719,73721,73723],{"class":222,"line":223},[220,73720,343],{"class":264},[220,73722,347],{"class":420},[220,73724,359],{"class":264},[220,73726,73727,73729,73731],{"class":222,"line":179},[220,73728,364],{"class":264},[220,73730,73608],{"class":420},[220,73732,386],{"class":264},[220,73734,73735,73737,73739],{"class":222,"line":389},[220,73736,402],{"class":264},[220,73738,347],{"class":420},[220,73740,359],{"class":264},[212,73742,73744],{"className":251,"code":73743,"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,73745,73746,73756,73760,73774,73778,73787,73791],{"__ignoreMap":178},[220,73747,73748,73750,73752,73754],{"class":222,"line":223},[220,73749,261],{"class":260},[220,73751,9763],{"class":264},[220,73753,268],{"class":260},[220,73755,9768],{"class":230},[220,73757,73758],{"class":222,"line":179},[220,73759,647],{"emptyLinePlaceholder":194},[220,73761,73762,73764,73766,73768,73770,73772],{"class":222,"line":389},[220,73763,1735],{"class":260},[220,73765,1738],{"class":420},[220,73767,1741],{"class":260},[220,73769,1744],{"class":260},[220,73771,1747],{"class":226},[220,73773,1750],{"class":264},[220,73775,73776],{"class":222,"line":399},[220,73777,1765],{"class":264},[220,73779,73780,73782,73785],{"class":222,"line":644},[220,73781,1770],{"class":264},[220,73783,73784],{"class":230},"'WorleyNoise'",[220,73786,2465],{"class":264},[220,73788,73789],{"class":222,"line":650},[220,73790,1787],{"class":264},[220,73792,73793],{"class":222,"line":656},[220,73794,1792],{"class":264},[1504,73796,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":73798},[73799,73800],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":73608,"description":73616},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":73807,"title":73808,"body":73809,"category":30515,"componentType":24147,"description":73816,"extension":191,"meta":74133,"navigation":194,"path":74134,"requiresChild":194,"seo":74135,"stem":74136,"__hash__":74137},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":73810,"toc":74129},[73811,73814,73817,73819,73821,73824,73826,74127],[11,73812,73808],{"id":73813},"zoomblur",[15,73815,73816],{},"Radial zoom blur expanding from a center point",[30192,73818],{"component":73808},[23,73820,30196],{"id":24798},[30198,73822],{":props":73823},"[{\"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,73825,30204],{"id":30203},[246,73827,73828,73884,73943,73999,74057],{":tabs":1557},[212,73829,73831],{"className":334,"code":73830,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,73832,73833,73841,73848,73856,73860,73868,73876],{"__ignoreMap":178},[220,73834,73835,73837,73839],{"class":222,"line":223},[220,73836,343],{"class":264},[220,73838,347],{"class":346},[220,73840,359],{"class":264},[220,73842,73843,73845],{"class":222,"line":179},[220,73844,364],{"class":264},[220,73846,73847],{"class":346},"ZoomBlur\n",[220,73849,73850,73852,73854],{"class":222,"line":389},[220,73851,18633],{"class":226},[220,73853,353],{"class":264},[220,73855,40160],{"class":230},[220,73857,73858],{"class":222,"line":399},[220,73859,30240],{"class":264},[220,73861,73862,73864,73866],{"class":222,"line":644},[220,73863,2550],{"class":264},[220,73865,2553],{"class":346},[220,73867,386],{"class":264},[220,73869,73870,73872,73874],{"class":222,"line":650},[220,73871,2567],{"class":264},[220,73873,73808],{"class":346},[220,73875,359],{"class":264},[220,73877,73878,73880,73882],{"class":222,"line":656},[220,73879,402],{"class":264},[220,73881,347],{"class":346},[220,73883,359],{"class":264},[212,73885,73887],{"className":409,"code":73886,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,73888,73889,73897,73903,73915,73919,73927,73935],{"__ignoreMap":178},[220,73890,73891,73893,73895],{"class":222,"line":223},[220,73892,343],{"class":264},[220,73894,347],{"class":420},[220,73896,359],{"class":264},[220,73898,73899,73901],{"class":222,"line":179},[220,73900,364],{"class":264},[220,73902,73847],{"class":420},[220,73904,73905,73907,73909,73911,73913],{"class":222,"line":389},[220,73906,18744],{"class":226},[220,73908,353],{"class":260},[220,73910,743],{"class":264},[220,73912,22273],{"class":420},[220,73914,749],{"class":264},[220,73916,73917],{"class":222,"line":399},[220,73918,30240],{"class":264},[220,73920,73921,73923,73925],{"class":222,"line":644},[220,73922,2550],{"class":264},[220,73924,2553],{"class":420},[220,73926,386],{"class":264},[220,73928,73929,73931,73933],{"class":222,"line":650},[220,73930,2567],{"class":264},[220,73932,73808],{"class":420},[220,73934,359],{"class":264},[220,73936,73937,73939,73941],{"class":222,"line":656},[220,73938,402],{"class":264},[220,73940,347],{"class":420},[220,73942,359],{"class":264},[212,73944,73945],{"className":2844,"code":73886,"language":2846,"meta":178,"style":178},[99,73946,73947,73955,73961,73971,73975,73983,73991],{"__ignoreMap":178},[220,73948,73949,73951,73953],{"class":222,"line":223},[220,73950,343],{"class":264},[220,73952,347],{"class":420},[220,73954,359],{"class":264},[220,73956,73957,73959],{"class":222,"line":179},[220,73958,364],{"class":264},[220,73960,73847],{"class":420},[220,73962,73963,73965,73967,73969],{"class":222,"line":389},[220,73964,18744],{"class":226},[220,73966,28138],{"class":264},[220,73968,22273],{"class":420},[220,73970,749],{"class":264},[220,73972,73973],{"class":222,"line":399},[220,73974,30240],{"class":264},[220,73976,73977,73979,73981],{"class":222,"line":644},[220,73978,2550],{"class":264},[220,73980,2553],{"class":420},[220,73982,386],{"class":264},[220,73984,73985,73987,73989],{"class":222,"line":650},[220,73986,2567],{"class":264},[220,73988,73808],{"class":420},[220,73990,359],{"class":264},[220,73992,73993,73995,73997],{"class":222,"line":656},[220,73994,402],{"class":264},[220,73996,347],{"class":420},[220,73998,359],{"class":264},[212,74000,74001],{"className":468,"code":73886,"language":469,"meta":178,"style":178},[99,74002,74003,74011,74017,74029,74033,74041,74049],{"__ignoreMap":178},[220,74004,74005,74007,74009],{"class":222,"line":223},[220,74006,343],{"class":264},[220,74008,347],{"class":420},[220,74010,359],{"class":264},[220,74012,74013,74015],{"class":222,"line":179},[220,74014,364],{"class":264},[220,74016,73847],{"class":420},[220,74018,74019,74021,74023,74025,74027],{"class":222,"line":389},[220,74020,18744],{"class":226},[220,74022,353],{"class":260},[220,74024,743],{"class":264},[220,74026,22273],{"class":420},[220,74028,749],{"class":264},[220,74030,74031],{"class":222,"line":399},[220,74032,30240],{"class":264},[220,74034,74035,74037,74039],{"class":222,"line":644},[220,74036,2550],{"class":264},[220,74038,2553],{"class":420},[220,74040,386],{"class":264},[220,74042,74043,74045,74047],{"class":222,"line":650},[220,74044,2567],{"class":264},[220,74046,73808],{"class":420},[220,74048,359],{"class":264},[220,74050,74051,74053,74055],{"class":222,"line":656},[220,74052,402],{"class":264},[220,74054,347],{"class":420},[220,74056,359],{"class":264},[212,74058,74060],{"className":251,"code":74059,"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,74061,74062,74072,74076,74090,74094,74107,74115,74119,74123],{"__ignoreMap":178},[220,74063,74064,74066,74068,74070],{"class":222,"line":223},[220,74065,261],{"class":260},[220,74067,9763],{"class":264},[220,74069,268],{"class":260},[220,74071,9768],{"class":230},[220,74073,74074],{"class":222,"line":179},[220,74075,647],{"emptyLinePlaceholder":194},[220,74077,74078,74080,74082,74084,74086,74088],{"class":222,"line":389},[220,74079,1735],{"class":260},[220,74081,1738],{"class":420},[220,74083,1741],{"class":260},[220,74085,1744],{"class":260},[220,74087,1747],{"class":226},[220,74089,1750],{"class":264},[220,74091,74092],{"class":222,"line":399},[220,74093,1765],{"class":264},[220,74095,74096,74098,74101,74103,74105],{"class":222,"line":644},[220,74097,1770],{"class":264},[220,74099,74100],{"class":230},"'ZoomBlur'",[220,74102,30484],{"class":264},[220,74104,22273],{"class":420},[220,74106,5792],{"class":264},[220,74108,74109,74111,74113],{"class":222,"line":650},[220,74110,5260],{"class":264},[220,74112,3206],{"class":230},[220,74114,2465],{"class":264},[220,74116,74117],{"class":222,"line":656},[220,74118,5277],{"class":264},[220,74120,74121],{"class":222,"line":673},[220,74122,1787],{"class":264},[220,74124,74125],{"class":222,"line":682},[220,74126,1792],{"class":264},[1504,74128,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74130},[74131,74132],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":73808,"description":73816},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":42403,"title":42404,"body":74139,"category":31344,"componentType":24141,"description":42412,"extension":191,"meta":74325,"navigation":194,"path":42598,"requiresChild":30811,"seo":74326,"stem":42600,"__hash__":42601},{"type":8,"value":74140,"toc":74321},[74141,74143,74145,74147,74149,74151,74153,74319],[11,74142,42404],{"id":42409},[15,74144,42412],{},[30192,74146],{"component":42404},[23,74148,30196],{"id":24798},[30198,74150],{":props":42419},[23,74152,30204],{"id":30203},[246,74154,74155,74183,74211,74239,74267],{":tabs":1557},[212,74156,74157],{"className":334,"code":42426,"language":336,"meta":178,"style":178},[99,74158,74159,74167,74175],{"__ignoreMap":178},[220,74160,74161,74163,74165],{"class":222,"line":223},[220,74162,343],{"class":264},[220,74164,347],{"class":346},[220,74166,359],{"class":264},[220,74168,74169,74171,74173],{"class":222,"line":179},[220,74170,364],{"class":264},[220,74172,42404],{"class":346},[220,74174,386],{"class":264},[220,74176,74177,74179,74181],{"class":222,"line":389},[220,74178,402],{"class":264},[220,74180,347],{"class":346},[220,74182,359],{"class":264},[212,74184,74185],{"className":409,"code":42426,"language":411,"meta":178,"style":178},[99,74186,74187,74195,74203],{"__ignoreMap":178},[220,74188,74189,74191,74193],{"class":222,"line":223},[220,74190,343],{"class":264},[220,74192,347],{"class":420},[220,74194,359],{"class":264},[220,74196,74197,74199,74201],{"class":222,"line":179},[220,74198,364],{"class":264},[220,74200,42404],{"class":420},[220,74202,386],{"class":264},[220,74204,74205,74207,74209],{"class":222,"line":389},[220,74206,402],{"class":264},[220,74208,347],{"class":420},[220,74210,359],{"class":264},[212,74212,74213],{"className":2844,"code":42426,"language":2846,"meta":178,"style":178},[99,74214,74215,74223,74231],{"__ignoreMap":178},[220,74216,74217,74219,74221],{"class":222,"line":223},[220,74218,343],{"class":264},[220,74220,347],{"class":420},[220,74222,359],{"class":264},[220,74224,74225,74227,74229],{"class":222,"line":179},[220,74226,364],{"class":264},[220,74228,42404],{"class":420},[220,74230,386],{"class":264},[220,74232,74233,74235,74237],{"class":222,"line":389},[220,74234,402],{"class":264},[220,74236,347],{"class":420},[220,74238,359],{"class":264},[212,74240,74241],{"className":468,"code":42426,"language":469,"meta":178,"style":178},[99,74242,74243,74251,74259],{"__ignoreMap":178},[220,74244,74245,74247,74249],{"class":222,"line":223},[220,74246,343],{"class":264},[220,74248,347],{"class":420},[220,74250,359],{"class":264},[220,74252,74253,74255,74257],{"class":222,"line":179},[220,74254,364],{"class":264},[220,74256,42404],{"class":420},[220,74258,386],{"class":264},[220,74260,74261,74263,74265],{"class":222,"line":389},[220,74262,402],{"class":264},[220,74264,347],{"class":420},[220,74266,359],{"class":264},[212,74268,74269],{"className":251,"code":42539,"language":253,"meta":178,"style":178},[99,74270,74271,74281,74285,74299,74303,74311,74315],{"__ignoreMap":178},[220,74272,74273,74275,74277,74279],{"class":222,"line":223},[220,74274,261],{"class":260},[220,74276,9763],{"class":264},[220,74278,268],{"class":260},[220,74280,9768],{"class":230},[220,74282,74283],{"class":222,"line":179},[220,74284,647],{"emptyLinePlaceholder":194},[220,74286,74287,74289,74291,74293,74295,74297],{"class":222,"line":389},[220,74288,1735],{"class":260},[220,74290,1738],{"class":420},[220,74292,1741],{"class":260},[220,74294,1744],{"class":260},[220,74296,1747],{"class":226},[220,74298,1750],{"class":264},[220,74300,74301],{"class":222,"line":399},[220,74302,1765],{"class":264},[220,74304,74305,74307,74309],{"class":222,"line":644},[220,74306,1770],{"class":264},[220,74308,42580],{"class":230},[220,74310,2465],{"class":264},[220,74312,74313],{"class":222,"line":650},[220,74314,1787],{"class":264},[220,74316,74317],{"class":222,"line":656},[220,74318,1792],{"class":264},[1504,74320,31082],{},{"title":178,"searchDepth":179,"depth":179,"links":74322},[74323,74324],{"id":24798,"depth":179,"text":30196},{"id":30203,"depth":179,"text":30204},{},{"title":42404,"description":42412},[74328,74329],{"title":42128,"path":42398,"stem":42400,"children":-1},{"title":42604,"path":42874,"stem":42876,"children":-1}]