[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31268,"doc-\u002Fdocs\u002Fcomponents\u002Flinearwipe":81346,"doc-surr-\u002Fdocs\u002Fcomponents\u002Flinearwipe":81611},[4,199,1525,2248,2486,4448,5493,6971,9607,11606,14381,16663,20330,25211,25575,26210,26852,27749,28366,28944,29486,30073,30595],{"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 .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .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","RLtYLVxbyz880RPys2dp6cNKLwK4NqJJSna_QbNEVBQ",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4441,"exclude":190,"extension":191,"forceFramework":190,"icon":4442,"meta":4443,"navigation":194,"path":4444,"seo":4445,"stem":4446,"__hash__":4447},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4430},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312,3316,3322,3325,3329,3339,4073,4077,4083,4364,4368,4371,4427],[11,2492,2488],{"id":2493},"hooks-events",[15,2495,2496],{},"Shaders provides lifecycle hooks that let you respond to key moments in the rendering pipeline. This is useful for orchestrating UI transitions, hiding loading states, or triggering animations once the shader is ready.",[23,2498,2500],{"id":2499},"onready","onReady",[15,2502,1839,2503,2505],{},[99,2504,2500],{}," hook fires once after the GPU has compiled the shader and the first frame is ready to render. This is the ideal moment to fade in the shader, remove a loading skeleton, or start a dependent animation.",[246,2507,2508,2671,2842,2971,3121],{":tabs":1557},[212,2509,2511],{"className":334,"code":2510,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C\u002Fscript>\n",[99,2512,2513,2522,2546,2563,2572,2580,2584,2596,2608,2612,2633,2637,2648,2658,2662],{"__ignoreMap":178},[220,2514,2515,2517,2520],{"class":222,"line":223},[220,2516,343],{"class":264},[220,2518,2519],{"class":346},"template",[220,2521,359],{"class":264},[220,2523,2524,2526,2528,2531,2533,2536,2539,2541,2544],{"class":222,"line":179},[220,2525,364],{"class":264},[220,2527,347],{"class":346},[220,2529,2530],{"class":226}," @ready",[220,2532,353],{"class":264},[220,2534,2535],{"class":230},"\"onShaderReady\"",[220,2537,2538],{"class":226}," :style",[220,2540,353],{"class":264},[220,2542,2543],{"class":230},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[220,2545,359],{"class":264},[220,2547,2548,2551,2554,2556,2558,2561],{"class":222,"line":389},[220,2549,2550],{"class":264}," \u003C",[220,2552,2553],{"class":346},"Circle",[220,2555,1588],{"class":226},[220,2557,353],{"class":264},[220,2559,2560],{"class":230},"\"#ff0088\"",[220,2562,386],{"class":264},[220,2564,2565,2568,2570],{"class":222,"line":399},[220,2566,2567],{"class":264}," \u003C\u002F",[220,2569,347],{"class":346},[220,2571,359],{"class":264},[220,2573,2574,2576,2578],{"class":222,"line":644},[220,2575,402],{"class":264},[220,2577,2519],{"class":346},[220,2579,359],{"class":264},[220,2581,2582],{"class":222,"line":650},[220,2583,647],{"emptyLinePlaceholder":194},[220,2585,2586,2588,2591,2594],{"class":222,"line":656},[220,2587,343],{"class":264},[220,2589,2590],{"class":346},"script",[220,2592,2593],{"class":226}," setup",[220,2595,359],{"class":264},[220,2597,2598,2600,2603,2605],{"class":222,"line":673},[220,2599,261],{"class":260},[220,2601,2602],{"class":264}," { ref } ",[220,2604,268],{"class":260},[220,2606,2607],{"class":230}," 'vue'\n",[220,2609,2610],{"class":222,"line":682},[220,2611,647],{"emptyLinePlaceholder":194},[220,2613,2614,2616,2619,2621,2624,2627,2630],{"class":222,"line":691},[220,2615,1735],{"class":260},[220,2617,2618],{"class":420}," visible",[220,2620,1741],{"class":260},[220,2622,2623],{"class":226}," ref",[220,2625,2626],{"class":264},"(",[220,2628,2629],{"class":420},"false",[220,2631,2632],{"class":264},")\n",[220,2634,2635],{"class":222,"line":696},[220,2636,647],{"emptyLinePlaceholder":194},[220,2638,2639,2642,2645],{"class":222,"line":702},[220,2640,2641],{"class":260},"function",[220,2643,2644],{"class":226}," onShaderReady",[220,2646,2647],{"class":264},"() {\n",[220,2649,2650,2653,2655],{"class":222,"line":718},[220,2651,2652],{"class":264}," visible.value ",[220,2654,353],{"class":260},[220,2656,2657],{"class":420}," true\n",[220,2659,2660],{"class":222,"line":727},[220,2661,749],{"class":264},[220,2663,2665,2667,2669],{"class":222,"line":2664},15,[220,2666,402],{"class":264},[220,2668,2590],{"class":346},[220,2670,359],{"class":264},[212,2672,2674],{"className":409,"code":2673,"language":411,"meta":178,"style":178},"import { useState } from 'react'\n\nfunction App() {\n const [visible, setVisible] = useState(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2675,2676,2688,2692,2701,2731,2735,2743,2750,2773,2804,2809,2824,2833,2838],{"__ignoreMap":178},[220,2677,2678,2680,2683,2685],{"class":222,"line":223},[220,2679,261],{"class":260},[220,2681,2682],{"class":264}," { useState } ",[220,2684,268],{"class":260},[220,2686,2687],{"class":230}," 'react'\n",[220,2689,2690],{"class":222,"line":179},[220,2691,647],{"emptyLinePlaceholder":194},[220,2693,2694,2696,2699],{"class":222,"line":389},[220,2695,2641],{"class":260},[220,2697,2698],{"class":226}," App",[220,2700,2647],{"class":264},[220,2702,2703,2706,2709,2712,2714,2717,2720,2722,2725,2727,2729],{"class":222,"line":399},[220,2704,2705],{"class":260}," const",[220,2707,2708],{"class":264}," [",[220,2710,2711],{"class":420},"visible",[220,2713,1895],{"class":264},[220,2715,2716],{"class":420},"setVisible",[220,2718,2719],{"class":264},"] ",[220,2721,353],{"class":260},[220,2723,2724],{"class":226}," useState",[220,2726,2626],{"class":264},[220,2728,2629],{"class":420},[220,2730,2632],{"class":264},[220,2732,2733],{"class":222,"line":644},[220,2734,647],{"emptyLinePlaceholder":194},[220,2736,2737,2740],{"class":222,"line":650},[220,2738,2739],{"class":260}," return",[220,2741,2742],{"class":264}," (\n",[220,2744,2745,2747],{"class":222,"line":656},[220,2746,2550],{"class":264},[220,2748,2749],{"class":420},"Shader\n",[220,2751,2752,2755,2757,2760,2763,2766,2768,2770],{"class":222,"line":673},[220,2753,2754],{"class":226}," onReady",[220,2756,353],{"class":260},[220,2758,2759],{"class":264},"{() ",[220,2761,2762],{"class":260},"=>",[220,2764,2765],{"class":226}," setVisible",[220,2767,2626],{"class":264},[220,2769,2332],{"class":420},[220,2771,2772],{"class":264},")}\n",[220,2774,2775,2778,2780,2783,2786,2789,2792,2795,2798,2801],{"class":222,"line":682},[220,2776,2777],{"class":226}," style",[220,2779,353],{"class":260},[220,2781,2782],{"class":264},"{{ opacity: visible ",[220,2784,2785],{"class":260},"?",[220,2787,2788],{"class":420}," 1",[220,2790,2791],{"class":260}," :",[220,2793,2794],{"class":420}," 0",[220,2796,2797],{"class":264},", transition: ",[220,2799,2800],{"class":230},"'opacity 0.5s'",[220,2802,2803],{"class":264}," }}\n",[220,2805,2806],{"class":222,"line":691},[220,2807,2808],{"class":264}," >\n",[220,2810,2811,2814,2816,2818,2820,2822],{"class":222,"line":696},[220,2812,2813],{"class":264}," \u003C",[220,2815,2553],{"class":420},[220,2817,1588],{"class":226},[220,2819,353],{"class":260},[220,2821,2560],{"class":230},[220,2823,386],{"class":264},[220,2825,2826,2829,2831],{"class":222,"line":702},[220,2827,2828],{"class":264}," \u003C\u002F",[220,2830,347],{"class":420},[220,2832,359],{"class":264},[220,2834,2835],{"class":222,"line":718},[220,2836,2837],{"class":264}," )\n",[220,2839,2840],{"class":222,"line":727},[220,2841,749],{"class":264},[212,2843,2847],{"className":2844,"code":2845,"language":2846,"meta":178,"style":178},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C\u002Fscript>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n","svelte",[99,2848,2849,2857,2879,2887,2891,2949,2963],{"__ignoreMap":178},[220,2850,2851,2853,2855],{"class":222,"line":223},[220,2852,343],{"class":264},[220,2854,2590],{"class":346},[220,2856,359],{"class":264},[220,2858,2859,2862,2865,2867,2870,2873,2875,2877],{"class":222,"line":179},[220,2860,2861],{"class":260}," let",[220,2863,2864],{"class":264}," visible ",[220,2866,353],{"class":260},[220,2868,2869],{"class":264}," $",[220,2871,2872],{"class":226},"state",[220,2874,2626],{"class":264},[220,2876,2629],{"class":420},[220,2878,2632],{"class":264},[220,2880,2881,2883,2885],{"class":222,"line":389},[220,2882,402],{"class":264},[220,2884,2590],{"class":346},[220,2886,359],{"class":264},[220,2888,2889],{"class":222,"line":399},[220,2890,647],{"emptyLinePlaceholder":194},[220,2892,2893,2895,2897,2900,2903,2905,2907,2909,2912,2915,2917,2919,2922,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944,2947],{"class":222,"line":644},[220,2894,343],{"class":264},[220,2896,347],{"class":420},[220,2898,2899],{"class":226}," onready",[220,2901,2902],{"class":264},"={() ",[220,2904,2762],{"class":260},[220,2906,2864],{"class":264},[220,2908,353],{"class":260},[220,2910,2911],{"class":420}," true",[220,2913,2914],{"class":264},"} ",[220,2916,1504],{"class":226},[220,2918,1554],{"class":264},[220,2920,2921],{"class":420},"opacity",[220,2923,2924],{"class":264},"={visible ",[220,2926,2785],{"class":260},[220,2928,2788],{"class":420},[220,2930,2791],{"class":260},[220,2932,2794],{"class":420},[220,2934,2914],{"class":264},[220,2936,1504],{"class":226},[220,2938,1554],{"class":264},[220,2940,2941],{"class":420},"transition",[220,2943,353],{"class":264},[220,2945,2946],{"class":230},"\"opacity 0.5s\"",[220,2948,359],{"class":264},[220,2950,2951,2953,2955,2957,2959,2961],{"class":222,"line":650},[220,2952,364],{"class":264},[220,2954,2553],{"class":420},[220,2956,1588],{"class":226},[220,2958,353],{"class":264},[220,2960,2560],{"class":230},[220,2962,386],{"class":264},[220,2964,2965,2967,2969],{"class":222,"line":656},[220,2966,402],{"class":264},[220,2968,347],{"class":420},[220,2970,359],{"class":264},[212,2972,2974],{"className":468,"code":2973,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\n\nfunction App() {\n const [visible, setVisible] = createSignal(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2975,2976,2988,2992,3000,3025,3029,3035,3041,3059,3087,3091,3105,3113,3117],{"__ignoreMap":178},[220,2977,2978,2980,2983,2985],{"class":222,"line":223},[220,2979,261],{"class":260},[220,2981,2982],{"class":264}," { createSignal } ",[220,2984,268],{"class":260},[220,2986,2987],{"class":230}," 'solid-js'\n",[220,2989,2990],{"class":222,"line":179},[220,2991,647],{"emptyLinePlaceholder":194},[220,2993,2994,2996,2998],{"class":222,"line":389},[220,2995,2641],{"class":260},[220,2997,2698],{"class":226},[220,2999,2647],{"class":264},[220,3001,3002,3004,3006,3008,3010,3012,3014,3016,3019,3021,3023],{"class":222,"line":399},[220,3003,2705],{"class":260},[220,3005,2708],{"class":264},[220,3007,2711],{"class":420},[220,3009,1895],{"class":264},[220,3011,2716],{"class":420},[220,3013,2719],{"class":264},[220,3015,353],{"class":260},[220,3017,3018],{"class":226}," createSignal",[220,3020,2626],{"class":264},[220,3022,2629],{"class":420},[220,3024,2632],{"class":264},[220,3026,3027],{"class":222,"line":644},[220,3028,647],{"emptyLinePlaceholder":194},[220,3030,3031,3033],{"class":222,"line":650},[220,3032,2739],{"class":260},[220,3034,2742],{"class":264},[220,3036,3037,3039],{"class":222,"line":656},[220,3038,2550],{"class":264},[220,3040,2749],{"class":420},[220,3042,3043,3045,3047,3049,3051,3053,3055,3057],{"class":222,"line":673},[220,3044,2754],{"class":226},[220,3046,353],{"class":260},[220,3048,2759],{"class":264},[220,3050,2762],{"class":260},[220,3052,2765],{"class":226},[220,3054,2626],{"class":264},[220,3056,2332],{"class":420},[220,3058,2772],{"class":264},[220,3060,3061,3063,3065,3068,3070,3073,3075,3077,3079,3081,3083,3085],{"class":222,"line":682},[220,3062,2777],{"class":226},[220,3064,353],{"class":260},[220,3066,3067],{"class":264},"{{ opacity: ",[220,3069,2711],{"class":226},[220,3071,3072],{"class":264},"() ",[220,3074,2785],{"class":260},[220,3076,2788],{"class":420},[220,3078,2791],{"class":260},[220,3080,2794],{"class":420},[220,3082,2797],{"class":264},[220,3084,2800],{"class":230},[220,3086,2803],{"class":264},[220,3088,3089],{"class":222,"line":691},[220,3090,2808],{"class":264},[220,3092,3093,3095,3097,3099,3101,3103],{"class":222,"line":696},[220,3094,2813],{"class":264},[220,3096,2553],{"class":420},[220,3098,1588],{"class":226},[220,3100,353],{"class":260},[220,3102,2560],{"class":230},[220,3104,386],{"class":264},[220,3106,3107,3109,3111],{"class":222,"line":702},[220,3108,2828],{"class":264},[220,3110,347],{"class":420},[220,3112,359],{"class":264},[220,3114,3115],{"class":222,"line":718},[220,3116,2837],{"class":264},[220,3118,3119],{"class":222,"line":727},[220,3120,749],{"class":264},[212,3122,3125],{"className":3123,"code":3124,"language":1518,"meta":178,"style":178},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n\u002F\u002F Start hidden\ncanvas.style.opacity = '0'\ncanvas.style.transition = 'opacity 0.5s'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n ]\n}, {\n onReady: () => {\n canvas.style.opacity = '1'\n }\n})\n",[99,3126,3127,3149,3153,3158,3168,3178,3182,3196,3200,3220,3224,3229,3242,3252,3257],{"__ignoreMap":178},[220,3128,3129,3131,3134,3136,3139,3142,3144,3147],{"class":222,"line":223},[220,3130,1735],{"class":260},[220,3132,3133],{"class":420}," canvas",[220,3135,1741],{"class":260},[220,3137,3138],{"class":264}," document.",[220,3140,3141],{"class":226},"getElementById",[220,3143,2626],{"class":264},[220,3145,3146],{"class":230},"'my-canvas'",[220,3148,2632],{"class":264},[220,3150,3151],{"class":222,"line":179},[220,3152,647],{"emptyLinePlaceholder":194},[220,3154,3155],{"class":222,"line":389},[220,3156,3157],{"class":609},"\u002F\u002F Start hidden\n",[220,3159,3160,3163,3165],{"class":222,"line":399},[220,3161,3162],{"class":264},"canvas.style.opacity ",[220,3164,353],{"class":260},[220,3166,3167],{"class":230}," '0'\n",[220,3169,3170,3173,3175],{"class":222,"line":644},[220,3171,3172],{"class":264},"canvas.style.transition ",[220,3174,353],{"class":260},[220,3176,3177],{"class":230}," 'opacity 0.5s'\n",[220,3179,3180],{"class":222,"line":650},[220,3181,647],{"emptyLinePlaceholder":194},[220,3183,3184,3186,3188,3190,3192,3194],{"class":222,"line":656},[220,3185,1735],{"class":260},[220,3187,1738],{"class":420},[220,3189,1741],{"class":260},[220,3191,1744],{"class":260},[220,3193,1747],{"class":226},[220,3195,1750],{"class":264},[220,3197,3198],{"class":222,"line":673},[220,3199,1765],{"class":264},[220,3201,3202,3204,3207,3210,3213,3215,3218],{"class":222,"line":682},[220,3203,1770],{"class":264},[220,3205,3206],{"class":230},"'Circle'",[220,3208,3209],{"class":264},", id: ",[220,3211,3212],{"class":230},"'c1'",[220,3214,1776],{"class":264},[220,3216,3217],{"class":230},"'#ff0088'",[220,3219,1782],{"class":264},[220,3221,3222],{"class":222,"line":691},[220,3223,1787],{"class":264},[220,3225,3226],{"class":222,"line":696},[220,3227,3228],{"class":264},"}, {\n",[220,3230,3231,3234,3237,3239],{"class":222,"line":702},[220,3232,3233],{"class":226}," onReady",[220,3235,3236],{"class":264},": () ",[220,3238,2762],{"class":260},[220,3240,3241],{"class":264}," {\n",[220,3243,3244,3247,3249],{"class":222,"line":718},[220,3245,3246],{"class":264}," canvas.style.opacity ",[220,3248,353],{"class":260},[220,3250,3251],{"class":230}," '1'\n",[220,3253,3254],{"class":222,"line":727},[220,3255,3256],{"class":264}," }\n",[220,3258,3259],{"class":222,"line":2664},[220,3260,1792],{"class":264},[3262,3263,3265],"h3",{"id":3264},"timing","Timing",[15,3267,3268,3270],{},[99,3269,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3272,3273,3276,3279,3282],{},[37,3274,3275],{},"The WebGPU renderer is initialized",[37,3277,3278],{},"All child shader components have registered",[37,3280,3281],{},"The composed shader pipeline has been compiled",[37,3283,3284],{},"The first frame is ready to display",[15,3286,3287,3288,3291],{},"The callback fires ",[159,3289,3290],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3262,3293,3295],{"id":3294},"notes","Notes",[34,3297,3298,3303],{},[37,3299,3300,3302],{},[99,3301,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3304,3305,3306,3308,3309,3311],{},"If the ",[99,3307,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3310,2500],{}," fires after that deferred initialization completes",[23,3313,3315],{"id":3314},"unsupported-browsers","Unsupported browsers",[15,3317,3318,3319,3321],{},"Shaders is WebGPU-only. On a browser or driver that can't provide a working GPU device — an\nolder Safari, Firefox with WebGPU still behind a flag, a blocklisted or exhausted driver — the\ncanvas simply stays transparent. ",[99,3320,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3323,3324],{},"If you want to render your own fallback instead of empty space, you have two options.",[3262,3326,3328],{"id":3327},"check-before-you-mount","Check before you mount",[15,3330,3331,3334,3335,3338],{},[99,3332,3333],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3336,3337],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3340,3341,3529,3698,3818,3991],{":tabs":1557},[212,3342,3344],{"className":334,"code":3343,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader v-if=\"supported\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv v-else class=\"fallback\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fvue'\n\nconst supported = ref(false)\nonMounted(async () => {\n supported.value = (await getWebGPUSupport()).supported\n})\n\u003C\u002Fscript>\n",[99,3345,3346,3354,3370,3384,3392,3415,3423,3427,3437,3448,3459,3463,3480,3497,3516,3520],{"__ignoreMap":178},[220,3347,3348,3350,3352],{"class":222,"line":223},[220,3349,343],{"class":264},[220,3351,2519],{"class":346},[220,3353,359],{"class":264},[220,3355,3356,3358,3360,3363,3365,3368],{"class":222,"line":179},[220,3357,364],{"class":264},[220,3359,347],{"class":346},[220,3361,3362],{"class":226}," v-if",[220,3364,353],{"class":264},[220,3366,3367],{"class":230},"\"supported\"",[220,3369,359],{"class":264},[220,3371,3372,3374,3376,3378,3380,3382],{"class":222,"line":389},[220,3373,2550],{"class":264},[220,3375,2553],{"class":346},[220,3377,1588],{"class":226},[220,3379,353],{"class":264},[220,3381,2560],{"class":230},[220,3383,386],{"class":264},[220,3385,3386,3388,3390],{"class":222,"line":399},[220,3387,2567],{"class":264},[220,3389,347],{"class":346},[220,3391,359],{"class":264},[220,3393,3394,3396,3399,3402,3404,3406,3409,3413],{"class":222,"line":644},[220,3395,364],{"class":264},[220,3397,3398],{"class":346},"div",[220,3400,3401],{"class":226}," v-else",[220,3403,350],{"class":226},[220,3405,353],{"class":264},[220,3407,3408],{"class":230},"\"fallback\"",[220,3410,3412],{"class":3411},"s6RL2"," \u002F",[220,3414,359],{"class":264},[220,3416,3417,3419,3421],{"class":222,"line":650},[220,3418,402],{"class":264},[220,3420,2519],{"class":346},[220,3422,359],{"class":264},[220,3424,3425],{"class":222,"line":656},[220,3426,647],{"emptyLinePlaceholder":194},[220,3428,3429,3431,3433,3435],{"class":222,"line":673},[220,3430,343],{"class":264},[220,3432,2590],{"class":346},[220,3434,2593],{"class":226},[220,3436,359],{"class":264},[220,3438,3439,3441,3444,3446],{"class":222,"line":682},[220,3440,261],{"class":260},[220,3442,3443],{"class":264}," { ref, onMounted } ",[220,3445,268],{"class":260},[220,3447,2607],{"class":230},[220,3449,3450,3452,3455,3457],{"class":222,"line":691},[220,3451,261],{"class":260},[220,3453,3454],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3456,268],{"class":260},[220,3458,271],{"class":230},[220,3460,3461],{"class":222,"line":696},[220,3462,647],{"emptyLinePlaceholder":194},[220,3464,3465,3467,3470,3472,3474,3476,3478],{"class":222,"line":702},[220,3466,1735],{"class":260},[220,3468,3469],{"class":420}," supported",[220,3471,1741],{"class":260},[220,3473,2623],{"class":226},[220,3475,2626],{"class":264},[220,3477,2629],{"class":420},[220,3479,2632],{"class":264},[220,3481,3482,3485,3487,3490,3493,3495],{"class":222,"line":718},[220,3483,3484],{"class":226},"onMounted",[220,3486,2626],{"class":264},[220,3488,3489],{"class":260},"async",[220,3491,3492],{"class":264}," () ",[220,3494,2762],{"class":260},[220,3496,3241],{"class":264},[220,3498,3499,3502,3504,3507,3510,3513],{"class":222,"line":727},[220,3500,3501],{"class":264}," supported.value ",[220,3503,353],{"class":260},[220,3505,3506],{"class":264}," (",[220,3508,3509],{"class":260},"await",[220,3511,3512],{"class":226}," getWebGPUSupport",[220,3514,3515],{"class":264},"()).supported\n",[220,3517,3518],{"class":222,"line":2664},[220,3519,1792],{"class":264},[220,3521,3523,3525,3527],{"class":222,"line":3522},16,[220,3524,402],{"class":264},[220,3526,2590],{"class":346},[220,3528,359],{"class":264},[212,3530,3532],{"className":409,"code":3531,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Freact'\n\nfunction App() {\n const [supported, setSupported] = useState(false)\n useEffect(() => {\n getWebGPUSupport().then(({ supported }) => setSupported(supported))\n }, [])\n\n return supported\n ? \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n : \u003Cdiv className=\"fallback\" \u002F>\n}\n",[99,3533,3534,3545,3555,3559,3567,3593,3605,3633,3638,3642,3649,3677,3694],{"__ignoreMap":178},[220,3535,3536,3538,3541,3543],{"class":222,"line":223},[220,3537,261],{"class":260},[220,3539,3540],{"class":264}," { useState, useEffect } ",[220,3542,268],{"class":260},[220,3544,2687],{"class":230},[220,3546,3547,3549,3551,3553],{"class":222,"line":179},[220,3548,261],{"class":260},[220,3550,3454],{"class":264},[220,3552,268],{"class":260},[220,3554,287],{"class":230},[220,3556,3557],{"class":222,"line":389},[220,3558,647],{"emptyLinePlaceholder":194},[220,3560,3561,3563,3565],{"class":222,"line":399},[220,3562,2641],{"class":260},[220,3564,2698],{"class":226},[220,3566,2647],{"class":264},[220,3568,3569,3571,3573,3576,3578,3581,3583,3585,3587,3589,3591],{"class":222,"line":644},[220,3570,2705],{"class":260},[220,3572,2708],{"class":264},[220,3574,3575],{"class":420},"supported",[220,3577,1895],{"class":264},[220,3579,3580],{"class":420},"setSupported",[220,3582,2719],{"class":264},[220,3584,353],{"class":260},[220,3586,2724],{"class":226},[220,3588,2626],{"class":264},[220,3590,2629],{"class":420},[220,3592,2632],{"class":264},[220,3594,3595,3598,3601,3603],{"class":222,"line":650},[220,3596,3597],{"class":226}," useEffect",[220,3599,3600],{"class":264},"(() ",[220,3602,2762],{"class":260},[220,3604,3241],{"class":264},[220,3606,3607,3610,3613,3616,3619,3622,3625,3627,3630],{"class":222,"line":656},[220,3608,3609],{"class":226}," getWebGPUSupport",[220,3611,3612],{"class":264},"().",[220,3614,3615],{"class":226},"then",[220,3617,3618],{"class":264},"(({ ",[220,3620,3575],{"class":3621},"s9osk",[220,3623,3624],{"class":264}," }) ",[220,3626,2762],{"class":260},[220,3628,3629],{"class":226}," setSupported",[220,3631,3632],{"class":264},"(supported))\n",[220,3634,3635],{"class":222,"line":673},[220,3636,3637],{"class":264}," }, [])\n",[220,3639,3640],{"class":222,"line":682},[220,3641,647],{"emptyLinePlaceholder":194},[220,3643,3644,3646],{"class":222,"line":691},[220,3645,2739],{"class":260},[220,3647,3648],{"class":264}," supported\n",[220,3650,3651,3654,3657,3659,3662,3664,3666,3668,3670,3673,3675],{"class":222,"line":696},[220,3652,3653],{"class":260}," ?",[220,3655,3656],{"class":264}," \u003C",[220,3658,347],{"class":420},[220,3660,3661],{"class":264},">\u003C",[220,3663,2553],{"class":420},[220,3665,1588],{"class":226},[220,3667,353],{"class":260},[220,3669,2560],{"class":230},[220,3671,3672],{"class":264}," \u002F>\u003C\u002F",[220,3674,347],{"class":420},[220,3676,359],{"class":264},[220,3678,3679,3682,3684,3686,3688,3690,3692],{"class":222,"line":702},[220,3680,3681],{"class":260}," :",[220,3683,3656],{"class":264},[220,3685,3398],{"class":346},[220,3687,423],{"class":226},[220,3689,353],{"class":260},[220,3691,3408],{"class":230},[220,3693,386],{"class":264},[220,3695,3696],{"class":222,"line":718},[220,3697,749],{"class":264},[212,3699,3701],{"className":468,"code":3700,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n\n let supported = $state(false)\n getWebGPUSupport().then((info) => { supported = info.supported })\n\u003C\u002Fscript>\n\n{#if supported}\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n{:else}\n \u003Cdiv class=\"fallback\">\u003C\u002Fdiv>\n{\u002Fif}\n",[99,3702,3703,3711,3716,3720,3725,3735,3743,3747,3758,3780,3790,3809],{"__ignoreMap":178},[220,3704,3705,3707,3709],{"class":222,"line":223},[220,3706,343],{"class":264},[220,3708,2590],{"class":346},[220,3710,359],{"class":264},[220,3712,3713],{"class":222,"line":179},[220,3714,3715],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3717,3718],{"class":222,"line":389},[220,3719,647],{"emptyLinePlaceholder":194},[220,3721,3722],{"class":222,"line":399},[220,3723,3724],{"class":264}," let supported = $state(false)\n",[220,3726,3727,3730,3732],{"class":222,"line":644},[220,3728,3729],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3731,353],{"class":260},[220,3733,3734],{"class":264}," info.supported })\n",[220,3736,3737,3739,3741],{"class":222,"line":650},[220,3738,402],{"class":264},[220,3740,2590],{"class":346},[220,3742,359],{"class":264},[220,3744,3745],{"class":222,"line":656},[220,3746,647],{"emptyLinePlaceholder":194},[220,3748,3749,3752,3755],{"class":222,"line":673},[220,3750,3751],{"class":264},"{#",[220,3753,3754],{"class":260},"if",[220,3756,3757],{"class":264}," supported}\n",[220,3759,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":222,"line":682},[220,3761,364],{"class":264},[220,3763,347],{"class":420},[220,3765,3661],{"class":264},[220,3767,2553],{"class":420},[220,3769,1588],{"class":226},[220,3771,353],{"class":260},[220,3773,2560],{"class":230},[220,3775,3672],{"class":264},[220,3777,347],{"class":420},[220,3779,359],{"class":264},[220,3781,3782,3785,3788],{"class":222,"line":691},[220,3783,3784],{"class":264},"{:",[220,3786,3787],{"class":260},"else",[220,3789,749],{"class":264},[220,3791,3792,3794,3796,3798,3800,3802,3805,3807],{"class":222,"line":696},[220,3793,364],{"class":264},[220,3795,3398],{"class":346},[220,3797,350],{"class":226},[220,3799,353],{"class":260},[220,3801,3408],{"class":230},[220,3803,3804],{"class":264},">\u003C\u002F",[220,3806,3398],{"class":346},[220,3808,359],{"class":264},[220,3810,3811,3813,3816],{"class":222,"line":702},[220,3812,743],{"class":264},[220,3814,3815],{"class":260},"\u002Fif",[220,3817,749],{"class":264},[212,3819,3821],{"className":409,"code":3820,"language":411,"meta":178,"style":178},"import { createSignal, onMount, Show } from 'solid-js'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsolid'\n\nfunction App() {\n const [supported, setSupported] = createSignal(false)\n onMount(async () => setSupported((await getWebGPUSupport()).supported))\n\n return (\n \u003CShow when={supported()} fallback={\u003Cdiv class=\"fallback\" \u002F>}>\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n \u003C\u002FShow>\n )\n}\n",[99,3822,3823,3834,3844,3848,3856,3880,3905,3909,3915,3953,3975,3983,3987],{"__ignoreMap":178},[220,3824,3825,3827,3830,3832],{"class":222,"line":223},[220,3826,261],{"class":260},[220,3828,3829],{"class":264}," { createSignal, onMount, Show } ",[220,3831,268],{"class":260},[220,3833,2987],{"class":230},[220,3835,3836,3838,3840,3842],{"class":222,"line":179},[220,3837,261],{"class":260},[220,3839,3454],{"class":264},[220,3841,268],{"class":260},[220,3843,319],{"class":230},[220,3845,3846],{"class":222,"line":389},[220,3847,647],{"emptyLinePlaceholder":194},[220,3849,3850,3852,3854],{"class":222,"line":399},[220,3851,2641],{"class":260},[220,3853,2698],{"class":226},[220,3855,2647],{"class":264},[220,3857,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":222,"line":644},[220,3859,2705],{"class":260},[220,3861,2708],{"class":264},[220,3863,3575],{"class":420},[220,3865,1895],{"class":264},[220,3867,3580],{"class":420},[220,3869,2719],{"class":264},[220,3871,353],{"class":260},[220,3873,3018],{"class":226},[220,3875,2626],{"class":264},[220,3877,2629],{"class":420},[220,3879,2632],{"class":264},[220,3881,3882,3885,3887,3889,3891,3893,3895,3898,3900,3902],{"class":222,"line":650},[220,3883,3884],{"class":226}," onMount",[220,3886,2626],{"class":264},[220,3888,3489],{"class":260},[220,3890,3492],{"class":264},[220,3892,2762],{"class":260},[220,3894,3629],{"class":226},[220,3896,3897],{"class":264},"((",[220,3899,3509],{"class":260},[220,3901,3512],{"class":226},[220,3903,3904],{"class":264},"()).supported))\n",[220,3906,3907],{"class":222,"line":656},[220,3908,647],{"emptyLinePlaceholder":194},[220,3910,3911,3913],{"class":222,"line":673},[220,3912,2739],{"class":260},[220,3914,2742],{"class":264},[220,3916,3917,3919,3922,3925,3927,3929,3931,3934,3937,3939,3942,3944,3946,3948,3950],{"class":222,"line":682},[220,3918,2550],{"class":264},[220,3920,3921],{"class":420},"Show",[220,3923,3924],{"class":226}," when",[220,3926,353],{"class":260},[220,3928,743],{"class":264},[220,3930,3575],{"class":226},[220,3932,3933],{"class":264},"()} ",[220,3935,3936],{"class":226},"fallback",[220,3938,353],{"class":260},[220,3940,3941],{"class":264},"{\u003C",[220,3943,3398],{"class":346},[220,3945,350],{"class":226},[220,3947,353],{"class":260},[220,3949,3408],{"class":230},[220,3951,3952],{"class":264}," \u002F>}>\n",[220,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973],{"class":222,"line":691},[220,3956,2813],{"class":264},[220,3958,347],{"class":420},[220,3960,3661],{"class":264},[220,3962,2553],{"class":420},[220,3964,1588],{"class":226},[220,3966,353],{"class":260},[220,3968,2560],{"class":230},[220,3970,3672],{"class":264},[220,3972,347],{"class":420},[220,3974,359],{"class":264},[220,3976,3977,3979,3981],{"class":222,"line":696},[220,3978,2828],{"class":264},[220,3980,3921],{"class":420},[220,3982,359],{"class":264},[220,3984,3985],{"class":222,"line":702},[220,3986,2837],{"class":264},[220,3988,3989],{"class":222,"line":718},[220,3990,749],{"class":264},[212,3992,3994],{"className":3123,"code":3993,"language":1518,"meta":178,"style":178},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n\nconst { supported } = await getWebGPUSupport()\nif (supported) {\n await createShader(canvas, preset)\n} else {\n canvas.replaceWith(fallbackElement)\n}\n",[99,3995,3996,4008,4012,4033,4040,4050,4058,4069],{"__ignoreMap":178},[220,3997,3998,4000,4003,4005],{"class":222,"line":223},[220,3999,261],{"class":260},[220,4001,4002],{"class":264}," { createShader, getWebGPUSupport } ",[220,4004,268],{"class":260},[220,4006,4007],{"class":230}," 'shaders\u002Fjs'\n",[220,4009,4010],{"class":222,"line":179},[220,4011,647],{"emptyLinePlaceholder":194},[220,4013,4014,4016,4019,4021,4024,4026,4028,4030],{"class":222,"line":389},[220,4015,1735],{"class":260},[220,4017,4018],{"class":264}," { ",[220,4020,3575],{"class":420},[220,4022,4023],{"class":264}," } ",[220,4025,353],{"class":260},[220,4027,1744],{"class":260},[220,4029,3512],{"class":226},[220,4031,4032],{"class":264},"()\n",[220,4034,4035,4037],{"class":222,"line":399},[220,4036,3754],{"class":260},[220,4038,4039],{"class":264}," (supported) {\n",[220,4041,4042,4045,4047],{"class":222,"line":644},[220,4043,4044],{"class":260}," await",[220,4046,1747],{"class":226},[220,4048,4049],{"class":264},"(canvas, preset)\n",[220,4051,4052,4054,4056],{"class":222,"line":650},[220,4053,2914],{"class":264},[220,4055,3787],{"class":260},[220,4057,3241],{"class":264},[220,4059,4060,4063,4066],{"class":222,"line":656},[220,4061,4062],{"class":264}," canvas.",[220,4064,4065],{"class":226},"replaceWith",[220,4067,4068],{"class":264},"(fallbackElement)\n",[220,4070,4071],{"class":222,"line":673},[220,4072,749],{"class":264},[3262,4074,4076],{"id":4075},"react-to-it-after-the-fact","React to it after the fact",[15,4078,1839,4079,4082],{},[99,4080,4081],{},"unavailable"," event fires at most once if the GPU can't be used — either because it was\nnever available, or because it became unusable later (device loss with no recovery, an\nout-of-memory refusal, a driver that can't run the compiled pipeline). By the time it fires the\ncanvas has already been cleared and every GPU resource released.",[246,4084,4085,4144,4203,4254,4303],{":tabs":1557},[212,4086,4088],{"className":334,"code":4087,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @unavailable=\"showFallback = true\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,4089,4090,4098,4114,4128,4136],{"__ignoreMap":178},[220,4091,4092,4094,4096],{"class":222,"line":223},[220,4093,343],{"class":264},[220,4095,2519],{"class":346},[220,4097,359],{"class":264},[220,4099,4100,4102,4104,4107,4109,4112],{"class":222,"line":179},[220,4101,364],{"class":264},[220,4103,347],{"class":346},[220,4105,4106],{"class":226}," @unavailable",[220,4108,353],{"class":264},[220,4110,4111],{"class":230},"\"showFallback = true\"",[220,4113,359],{"class":264},[220,4115,4116,4118,4120,4122,4124,4126],{"class":222,"line":389},[220,4117,2550],{"class":264},[220,4119,2553],{"class":346},[220,4121,1588],{"class":226},[220,4123,353],{"class":264},[220,4125,2560],{"class":230},[220,4127,386],{"class":264},[220,4129,4130,4132,4134],{"class":222,"line":399},[220,4131,2567],{"class":264},[220,4133,347],{"class":346},[220,4135,359],{"class":264},[220,4137,4138,4140,4142],{"class":222,"line":644},[220,4139,402],{"class":264},[220,4141,2519],{"class":346},[220,4143,359],{"class":264},[212,4145,4147],{"className":409,"code":4146,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4148,4149,4181,4195],{"__ignoreMap":178},[220,4150,4151,4153,4155,4158,4160,4163,4166,4169,4171,4174,4176,4178],{"class":222,"line":223},[220,4152,343],{"class":264},[220,4154,347],{"class":420},[220,4156,4157],{"class":226}," onUnavailable",[220,4159,353],{"class":260},[220,4161,4162],{"class":264},"{(",[220,4164,4165],{"class":3621},"reason",[220,4167,4168],{"class":264},") ",[220,4170,2762],{"class":260},[220,4172,4173],{"class":226}," setShowFallback",[220,4175,2626],{"class":264},[220,4177,2332],{"class":420},[220,4179,4180],{"class":264},")}>\n",[220,4182,4183,4185,4187,4189,4191,4193],{"class":222,"line":179},[220,4184,364],{"class":264},[220,4186,2553],{"class":420},[220,4188,1588],{"class":226},[220,4190,353],{"class":260},[220,4192,2560],{"class":230},[220,4194,386],{"class":264},[220,4196,4197,4199,4201],{"class":222,"line":389},[220,4198,402],{"class":264},[220,4200,347],{"class":420},[220,4202,359],{"class":264},[212,4204,4206],{"className":468,"code":4205,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4207,4208,4232,4246],{"__ignoreMap":178},[220,4209,4210,4212,4214,4217,4219,4221,4223,4226,4228,4230],{"class":222,"line":223},[220,4211,343],{"class":264},[220,4213,347],{"class":420},[220,4215,4216],{"class":226}," onunavailable",[220,4218,353],{"class":260},[220,4220,2759],{"class":264},[220,4222,2762],{"class":260},[220,4224,4225],{"class":264}," (showFallback ",[220,4227,353],{"class":260},[220,4229,2911],{"class":420},[220,4231,4180],{"class":264},[220,4233,4234,4236,4238,4240,4242,4244],{"class":222,"line":179},[220,4235,364],{"class":264},[220,4237,2553],{"class":420},[220,4239,1588],{"class":226},[220,4241,353],{"class":260},[220,4243,2560],{"class":230},[220,4245,386],{"class":264},[220,4247,4248,4250,4252],{"class":222,"line":389},[220,4249,402],{"class":264},[220,4251,347],{"class":420},[220,4253,359],{"class":264},[212,4255,4257],{"className":409,"code":4256,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4258,4259,4281,4295],{"__ignoreMap":178},[220,4260,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":222,"line":223},[220,4262,343],{"class":264},[220,4264,347],{"class":420},[220,4266,4157],{"class":226},[220,4268,353],{"class":260},[220,4270,2759],{"class":264},[220,4272,2762],{"class":260},[220,4274,4173],{"class":226},[220,4276,2626],{"class":264},[220,4278,2332],{"class":420},[220,4280,4180],{"class":264},[220,4282,4283,4285,4287,4289,4291,4293],{"class":222,"line":179},[220,4284,364],{"class":264},[220,4286,2553],{"class":420},[220,4288,1588],{"class":226},[220,4290,353],{"class":260},[220,4292,2560],{"class":230},[220,4294,386],{"class":264},[220,4296,4297,4299,4301],{"class":222,"line":389},[220,4298,402],{"class":264},[220,4300,347],{"class":420},[220,4302,359],{"class":264},[212,4304,4306],{"className":3123,"code":4305,"language":1518,"meta":178,"style":178},"await createShader(canvas, preset, {\n onError: (reason) => {\n \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n showFallback(reason)\n }\n})\n",[99,4307,4308,4317,4333,4338,4343,4348,4356,4360],{"__ignoreMap":178},[220,4309,4310,4312,4314],{"class":222,"line":223},[220,4311,3509],{"class":260},[220,4313,1747],{"class":226},[220,4315,4316],{"class":264},"(canvas, preset, {\n",[220,4318,4319,4322,4325,4327,4329,4331],{"class":222,"line":179},[220,4320,4321],{"class":226}," onError",[220,4323,4324],{"class":264},": (",[220,4326,4165],{"class":3621},[220,4328,4168],{"class":264},[220,4330,2762],{"class":260},[220,4332,3241],{"class":264},[220,4334,4335],{"class":222,"line":389},[220,4336,4337],{"class":609}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4339,4340],{"class":222,"line":399},[220,4341,4342],{"class":609}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4344,4345],{"class":222,"line":644},[220,4346,4347],{"class":609}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4349,4350,4353],{"class":222,"line":650},[220,4351,4352],{"class":226}," showFallback",[220,4354,4355],{"class":264},"(reason)\n",[220,4357,4358],{"class":222,"line":656},[220,4359,3256],{"class":264},[220,4361,4362],{"class":222,"line":673},[220,4363,1792],{"class":264},[3262,4365,4367],{"id":4366},"debugging","Debugging",[15,4369,4370],{},"Shaders keeps quiet in production on purpose — an embedded background effect must never fill\na host page's console with errors the visitor can do nothing about. When you need to see what\nthe renderer is actually doing, switch diagnostics on:",[212,4372,4374],{"className":3123,"code":4373,"language":1518,"meta":178,"style":178},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n\u002F\u002F or, in code:\nimport { setShadersDebug } from 'shaders\u002Fvue'\nsetShadersDebug(true)\n",[99,4375,4376,4400,4405,4416],{"__ignoreMap":178},[220,4377,4378,4381,4384,4386,4389,4391,4394,4397],{"class":222,"line":223},[220,4379,4380],{"class":264},"localStorage.",[220,4382,4383],{"class":226},"setItem",[220,4385,2626],{"class":264},[220,4387,4388],{"class":230},"'shaders:debug'",[220,4390,1895],{"class":264},[220,4392,4393],{"class":230},"'1'",[220,4395,4396],{"class":264},") ",[220,4398,4399],{"class":609},"\u002F\u002F persists for the origin\n",[220,4401,4402],{"class":222,"line":179},[220,4403,4404],{"class":609},"\u002F\u002F or, in code:\n",[220,4406,4407,4409,4412,4414],{"class":222,"line":389},[220,4408,261],{"class":260},[220,4410,4411],{"class":264}," { setShadersDebug } ",[220,4413,268],{"class":260},[220,4415,271],{"class":230},[220,4417,4418,4421,4423,4425],{"class":222,"line":399},[220,4419,4420],{"class":226},"setShadersDebug",[220,4422,2626],{"class":264},[220,4424,2332],{"class":420},[220,4426,2632],{"class":264},[1504,4428,4429],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":4431},[4432,4436],{"id":2499,"depth":179,"text":2500,"children":4433},[4434,4435],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},{"id":3314,"depth":179,"text":3315,"children":4437},[4438,4439,4440],{"id":3327,"depth":389,"text":3328},{"id":4075,"depth":389,"text":4076},{"id":4366,"depth":389,"text":4367},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4441},"docs\u002Fguide\u002F12.hooks-events","5swX9Xt3mdKh2Ke08B_93ih7fjlcaeZgbTwEfxtu2To",{"id":4449,"title":4450,"body":4451,"category":2240,"description":5487,"exclude":190,"extension":191,"forceFramework":190,"icon":5488,"meta":5489,"navigation":194,"path":58,"seo":5490,"stem":5491,"__hash__":5492},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP (Pro)",{"type":8,"value":4452,"toc":5477},[4453,4456,4459,4463,4466,4470,4473,4477,4480,4496,4503,4506,4510,4513,4518,4521,4526,4789,4791,4795,4802,4811,4813,4817,4820,4823,5228,5232,5235,5241,5247,5253,5259,5262,5301,5352,5395,5435,5439,5442,5445,5448,5451,5453,5457,5463,5466,5474],[11,4454,4450],{"id":4455},"shaders-mcp-pro",[19,4457],{":preset":4458},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002F0oExGojy9aDN.png\"}},{\"type\":\"Glass\",\"props\":{\"aberration\":0.63,\"center\":{\"type\":\"mouse-position\",\"originX\":0.5,\"originY\":0.5,\"reach\":0.6,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":1.5,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.5},\"thickness\":1}},{\"type\":\"Sharpness\",\"props\":{\"sharpness\":0.5}}]}",[4460,4461],"pro-callout",{"message":4462},"Shaders MCP requires an active Pro account before you can connect.",[15,4464,4465],{},"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,4467,4469],{"id":4468},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,4471,4472],{},"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,4474,4476],{"id":4475},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,4478,4479],{},"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,4481,4483],{"className":214,"code":4482,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,4484,4485],{"__ignoreMap":178},[220,4486,4487,4490,4493],{"class":222,"line":223},[220,4488,4489],{"class":226},"npx",[220,4491,4492],{"class":230}," shaders@latest",[220,4494,4495],{"class":230}," install-mcp\n",[15,4497,4498,4499,4502],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,4500,4501],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[4504,4505],"hr",{},[3262,4507,4509],{"id":4508},"manual-configuration","Manual configuration",[15,4511,4512],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,4514,4515],{},[159,4516,4517],{},"Cursor",[4519,4520],"cursor-install-button",{},[15,4522,4523],{},[159,4524,4525],{},"Other tools",[246,4527,4529,4557,4613,4652,4679,4738],{":tabs":4528},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4530,4532],{"className":214,"code":4531,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,4533,4534],{"__ignoreMap":178},[220,4535,4536,4539,4542,4545,4548,4551,4554],{"class":222,"line":223},[220,4537,4538],{"class":226},"claude",[220,4540,4541],{"class":230}," mcp",[220,4543,4544],{"class":230}," add",[220,4546,4547],{"class":420}," --transport",[220,4549,4550],{"class":230}," http",[220,4552,4553],{"class":230}," shaders",[220,4555,4556],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,4558,4562],{"className":4559,"code":4560,"language":4561,"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,4563,4564,4569,4574,4582,4589,4600,4605,4609],{"__ignoreMap":178},[220,4565,4566],{"class":222,"line":223},[220,4567,4568],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,4570,4571],{"class":222,"line":179},[220,4572,4573],{"class":264},"{\n",[220,4575,4576,4579],{"class":222,"line":389},[220,4577,4578],{"class":420}," \"mcpServers\"",[220,4580,4581],{"class":264},": {\n",[220,4583,4584,4587],{"class":222,"line":399},[220,4585,4586],{"class":420}," \"shaders\"",[220,4588,4581],{"class":264},[220,4590,4591,4594,4597],{"class":222,"line":644},[220,4592,4593],{"class":420}," \"serverUrl\"",[220,4595,4596],{"class":264},": ",[220,4598,4599],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,4601,4602],{"class":222,"line":650},[220,4603,4604],{"class":264}," }\n",[220,4606,4607],{"class":222,"line":656},[220,4608,3256],{"class":264},[220,4610,4611],{"class":222,"line":673},[220,4612,749],{"class":264},[212,4614,4616],{"className":4559,"code":4615,"language":4561,"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,4617,4618,4623,4627,4639,4648],{"__ignoreMap":178},[220,4619,4620],{"class":222,"line":223},[220,4621,4622],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,4624,4625],{"class":222,"line":179},[220,4626,4573],{"class":264},[220,4628,4629,4632,4634,4637],{"class":222,"line":389},[220,4630,4631],{"class":420}," \"name\"",[220,4633,4596],{"class":264},[220,4635,4636],{"class":230},"\"shaders\"",[220,4638,1760],{"class":264},[220,4640,4641,4644,4646],{"class":222,"line":399},[220,4642,4643],{"class":420}," \"url\"",[220,4645,4596],{"class":264},[220,4647,4599],{"class":230},[220,4649,4650],{"class":222,"line":644},[220,4651,749],{"class":264},[212,4653,4657],{"className":4654,"code":4655,"language":4656,"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,4658,4659,4664,4669,4674],{"__ignoreMap":178},[220,4660,4661],{"class":222,"line":223},[220,4662,4663],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,4665,4666],{"class":222,"line":179},[220,4667,4668],{},"[mcp_servers.shaders]\n",[220,4670,4671],{"class":222,"line":389},[220,4672,4673],{},"enabled = true\n",[220,4675,4676],{"class":222,"line":399},[220,4677,4678],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,4680,4682],{"className":4559,"code":4681,"language":4561,"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,4683,4684,4689,4693,4699,4705,4717,4726,4730,4734],{"__ignoreMap":178},[220,4685,4686],{"class":222,"line":223},[220,4687,4688],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,4690,4691],{"class":222,"line":179},[220,4692,4573],{"class":264},[220,4694,4695,4697],{"class":222,"line":389},[220,4696,4578],{"class":420},[220,4698,4581],{"class":264},[220,4700,4701,4703],{"class":222,"line":399},[220,4702,4586],{"class":420},[220,4704,4581],{"class":264},[220,4706,4707,4710,4712,4715],{"class":222,"line":644},[220,4708,4709],{"class":420}," \"type\"",[220,4711,4596],{"class":264},[220,4713,4714],{"class":230},"\"http\"",[220,4716,1760],{"class":264},[220,4718,4719,4722,4724],{"class":222,"line":650},[220,4720,4721],{"class":420}," \"url\"",[220,4723,4596],{"class":264},[220,4725,4599],{"class":230},[220,4727,4728],{"class":222,"line":656},[220,4729,4604],{"class":264},[220,4731,4732],{"class":222,"line":673},[220,4733,3256],{"class":264},[220,4735,4736],{"class":222,"line":682},[220,4737,749],{"class":264},[212,4739,4741],{"className":4559,"code":4740,"language":4561,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4742,4743,4747,4753,4759,4769,4777,4781,4785],{"__ignoreMap":178},[220,4744,4745],{"class":222,"line":223},[220,4746,4573],{"class":264},[220,4748,4749,4751],{"class":222,"line":179},[220,4750,4578],{"class":420},[220,4752,4581],{"class":264},[220,4754,4755,4757],{"class":222,"line":389},[220,4756,4586],{"class":420},[220,4758,4581],{"class":264},[220,4760,4761,4763,4765,4767],{"class":222,"line":399},[220,4762,4709],{"class":420},[220,4764,4596],{"class":264},[220,4766,4714],{"class":230},[220,4768,1760],{"class":264},[220,4770,4771,4773,4775],{"class":222,"line":644},[220,4772,4721],{"class":420},[220,4774,4596],{"class":264},[220,4776,4599],{"class":230},[220,4778,4779],{"class":222,"line":650},[220,4780,4604],{"class":264},[220,4782,4783],{"class":222,"line":656},[220,4784,3256],{"class":264},[220,4786,4787],{"class":222,"line":673},[220,4788,749],{"class":264},[4504,4790],{},[23,4792,4794],{"id":4793},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,4796,4797],{},[4798,4799],"img",{"alt":4800,"src":4801},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,4803,4804,4805,4810],{},"Shaders has an official connector on ",[56,4806,4809],{"href":4807,"rel":4808},"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.",[4504,4812],{},[23,4814,4816],{"id":4815},"using-an-api-key-instead","Using an API key instead",[15,4818,4819],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[4821,4822],"api-keys",{},[246,4824,4826,4854,4925,4990,5047,5082,5157],{":tabs":4825},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4827,4829],{"className":214,"code":4828,"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,4830,4831],{"__ignoreMap":178},[220,4832,4833,4835,4837,4839,4841,4843,4845,4848,4851],{"class":222,"line":223},[220,4834,4538],{"class":226},[220,4836,4541],{"class":230},[220,4838,4544],{"class":230},[220,4840,4547],{"class":420},[220,4842,4550],{"class":230},[220,4844,4553],{"class":230},[220,4846,4847],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,4849,4850],{"class":420}," --header",[220,4852,4853],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,4855,4857],{"className":4559,"code":4856,"language":4561,"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,4858,4859,4864,4868,4874,4880,4891,4898,4908,4913,4917,4921],{"__ignoreMap":178},[220,4860,4861],{"class":222,"line":223},[220,4862,4863],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,4865,4866],{"class":222,"line":179},[220,4867,4573],{"class":264},[220,4869,4870,4872],{"class":222,"line":389},[220,4871,4578],{"class":420},[220,4873,4581],{"class":264},[220,4875,4876,4878],{"class":222,"line":399},[220,4877,4586],{"class":420},[220,4879,4581],{"class":264},[220,4881,4882,4884,4886,4889],{"class":222,"line":644},[220,4883,4721],{"class":420},[220,4885,4596],{"class":264},[220,4887,4888],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,4890,1760],{"class":264},[220,4892,4893,4896],{"class":222,"line":650},[220,4894,4895],{"class":420}," \"headers\"",[220,4897,4581],{"class":264},[220,4899,4900,4903,4905],{"class":222,"line":656},[220,4901,4902],{"class":420}," \"Authorization\"",[220,4904,4596],{"class":264},[220,4906,4907],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,4909,4910],{"class":222,"line":673},[220,4911,4912],{"class":264}," }\n",[220,4914,4915],{"class":222,"line":682},[220,4916,4604],{"class":264},[220,4918,4919],{"class":222,"line":691},[220,4920,3256],{"class":264},[220,4922,4923],{"class":222,"line":696},[220,4924,749],{"class":264},[212,4926,4928],{"className":4559,"code":4927,"language":4561,"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,4929,4930,4934,4938,4944,4950,4960,4966,4974,4978,4982,4986],{"__ignoreMap":178},[220,4931,4932],{"class":222,"line":223},[220,4933,4568],{"class":609},[220,4935,4936],{"class":222,"line":179},[220,4937,4573],{"class":264},[220,4939,4940,4942],{"class":222,"line":389},[220,4941,4578],{"class":420},[220,4943,4581],{"class":264},[220,4945,4946,4948],{"class":222,"line":399},[220,4947,4586],{"class":420},[220,4949,4581],{"class":264},[220,4951,4952,4954,4956,4958],{"class":222,"line":644},[220,4953,4593],{"class":420},[220,4955,4596],{"class":264},[220,4957,4888],{"class":230},[220,4959,1760],{"class":264},[220,4961,4962,4964],{"class":222,"line":650},[220,4963,4895],{"class":420},[220,4965,4581],{"class":264},[220,4967,4968,4970,4972],{"class":222,"line":656},[220,4969,4902],{"class":420},[220,4971,4596],{"class":264},[220,4973,4907],{"class":230},[220,4975,4976],{"class":222,"line":673},[220,4977,4912],{"class":264},[220,4979,4980],{"class":222,"line":682},[220,4981,4604],{"class":264},[220,4983,4984],{"class":222,"line":691},[220,4985,3256],{"class":264},[220,4987,4988],{"class":222,"line":696},[220,4989,749],{"class":264},[212,4991,4993],{"className":4559,"code":4992,"language":4561,"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,4994,4995,4999,5003,5013,5023,5030,5039,5043],{"__ignoreMap":178},[220,4996,4997],{"class":222,"line":223},[220,4998,4622],{"class":609},[220,5000,5001],{"class":222,"line":179},[220,5002,4573],{"class":264},[220,5004,5005,5007,5009,5011],{"class":222,"line":389},[220,5006,4631],{"class":420},[220,5008,4596],{"class":264},[220,5010,4636],{"class":230},[220,5012,1760],{"class":264},[220,5014,5015,5017,5019,5021],{"class":222,"line":399},[220,5016,4643],{"class":420},[220,5018,4596],{"class":264},[220,5020,4888],{"class":230},[220,5022,1760],{"class":264},[220,5024,5025,5028],{"class":222,"line":644},[220,5026,5027],{"class":420}," \"headers\"",[220,5029,4581],{"class":264},[220,5031,5032,5035,5037],{"class":222,"line":650},[220,5033,5034],{"class":420}," \"Authorization\"",[220,5036,4596],{"class":264},[220,5038,4907],{"class":230},[220,5040,5041],{"class":222,"line":656},[220,5042,3256],{"class":264},[220,5044,5045],{"class":222,"line":673},[220,5046,749],{"class":264},[212,5048,5050],{"className":4654,"code":5049,"language":4656,"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,5051,5052,5056,5060,5064,5068,5072,5077],{"__ignoreMap":178},[220,5053,5054],{"class":222,"line":223},[220,5055,4663],{},[220,5057,5058],{"class":222,"line":179},[220,5059,4668],{},[220,5061,5062],{"class":222,"line":389},[220,5063,4673],{},[220,5065,5066],{"class":222,"line":399},[220,5067,4678],{},[220,5069,5070],{"class":222,"line":644},[220,5071,647],{"emptyLinePlaceholder":194},[220,5073,5074],{"class":222,"line":650},[220,5075,5076],{},"[mcp_servers.shaders.http_headers]\n",[220,5078,5079],{"class":222,"line":656},[220,5080,5081],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,5083,5085],{"className":4559,"code":5084,"language":4561,"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,5086,5087,5091,5095,5101,5107,5117,5127,5133,5141,5145,5149,5153],{"__ignoreMap":178},[220,5088,5089],{"class":222,"line":223},[220,5090,4688],{"class":609},[220,5092,5093],{"class":222,"line":179},[220,5094,4573],{"class":264},[220,5096,5097,5099],{"class":222,"line":389},[220,5098,4578],{"class":420},[220,5100,4581],{"class":264},[220,5102,5103,5105],{"class":222,"line":399},[220,5104,4586],{"class":420},[220,5106,4581],{"class":264},[220,5108,5109,5111,5113,5115],{"class":222,"line":644},[220,5110,4709],{"class":420},[220,5112,4596],{"class":264},[220,5114,4714],{"class":230},[220,5116,1760],{"class":264},[220,5118,5119,5121,5123,5125],{"class":222,"line":650},[220,5120,4721],{"class":420},[220,5122,4596],{"class":264},[220,5124,4888],{"class":230},[220,5126,1760],{"class":264},[220,5128,5129,5131],{"class":222,"line":656},[220,5130,4895],{"class":420},[220,5132,4581],{"class":264},[220,5134,5135,5137,5139],{"class":222,"line":673},[220,5136,4902],{"class":420},[220,5138,4596],{"class":264},[220,5140,4907],{"class":230},[220,5142,5143],{"class":222,"line":682},[220,5144,4912],{"class":264},[220,5146,5147],{"class":222,"line":691},[220,5148,4604],{"class":264},[220,5150,5151],{"class":222,"line":696},[220,5152,3256],{"class":264},[220,5154,5155],{"class":222,"line":702},[220,5156,749],{"class":264},[212,5158,5160],{"className":4559,"code":5159,"language":4561,"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,5161,5162,5166,5172,5178,5188,5198,5204,5212,5216,5220,5224],{"__ignoreMap":178},[220,5163,5164],{"class":222,"line":223},[220,5165,4573],{"class":264},[220,5167,5168,5170],{"class":222,"line":179},[220,5169,4578],{"class":420},[220,5171,4581],{"class":264},[220,5173,5174,5176],{"class":222,"line":389},[220,5175,4586],{"class":420},[220,5177,4581],{"class":264},[220,5179,5180,5182,5184,5186],{"class":222,"line":399},[220,5181,4709],{"class":420},[220,5183,4596],{"class":264},[220,5185,4714],{"class":230},[220,5187,1760],{"class":264},[220,5189,5190,5192,5194,5196],{"class":222,"line":644},[220,5191,4721],{"class":420},[220,5193,4596],{"class":264},[220,5195,4888],{"class":230},[220,5197,1760],{"class":264},[220,5199,5200,5202],{"class":222,"line":650},[220,5201,4895],{"class":420},[220,5203,4581],{"class":264},[220,5205,5206,5208,5210],{"class":222,"line":656},[220,5207,4902],{"class":420},[220,5209,4596],{"class":264},[220,5211,4907],{"class":230},[220,5213,5214],{"class":222,"line":673},[220,5215,4912],{"class":264},[220,5217,5218],{"class":222,"line":682},[220,5219,4604],{"class":264},[220,5221,5222],{"class":222,"line":691},[220,5223,3256],{"class":264},[220,5225,5226],{"class":222,"line":696},[220,5227,749],{"class":264},[23,5229,5231],{"id":5230},"start-prompting","Start prompting",[15,5233,5234],{},"Once connected, your agent gains access to the following capabilities:",[15,5236,5237,5240],{},[159,5238,5239],{},"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,5242,5243,5246],{},[159,5244,5245],{},"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,5248,5249,5252],{},[159,5250,5251],{},"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,5254,5255,5258],{},[159,5256,5257],{},"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,5260,5261],{},"Example prompts to get started:",[212,5263,5265],{"className":214,"code":5264,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,5266,5267],{"__ignoreMap":178},[220,5268,5269,5272,5275,5278,5280,5283,5286,5289,5292,5295,5298],{"class":222,"line":223},[220,5270,5271],{"class":226},"Install",[220,5273,5274],{"class":230}," my",[220,5276,5277],{"class":230}," \"Landing Hero\"",[220,5279,1738],{"class":230},[220,5281,5282],{"class":230}," in",[220,5284,5285],{"class":230}," the",[220,5287,5288],{"class":230}," hero",[220,5290,5291],{"class":230}," section",[220,5293,5294],{"class":230}," as",[220,5296,5297],{"class":230}," a",[220,5299,5300],{"class":230}," background.\n",[212,5302,5304],{"className":214,"code":5303,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,5305,5306],{"__ignoreMap":178},[220,5307,5308,5311,5313,5315,5318,5320,5323,5326,5329,5332,5335,5338,5341,5343,5346,5349],{"class":222,"line":223},[220,5309,5310],{"class":226},"Add",[220,5312,5297],{"class":230},[220,5314,1738],{"class":230},[220,5316,5317],{"class":230}," to",[220,5319,5285],{"class":230},[220,5321,5322],{"class":230}," background",[220,5324,5325],{"class":230}," of",[220,5327,5328],{"class":230}," this",[220,5330,5331],{"class":230}," card,",[220,5333,5334],{"class":230}," something",[220,5336,5337],{"class":230}," blue",[220,5339,5340],{"class":230}," with",[220,5342,5297],{"class":230},[220,5344,5345],{"class":230}," subtle",[220,5347,5348],{"class":230}," flowing",[220,5350,5351],{"class":230}," animation.\n",[212,5353,5355],{"className":214,"code":5354,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,5356,5357],{"__ignoreMap":178},[220,5358,5359,5362,5364,5367,5369,5371,5373,5376,5379,5381,5384,5387,5390,5392],{"class":222,"line":223},[220,5360,5361],{"class":226},"Make",[220,5363,5285],{"class":230},[220,5365,5366],{"class":230}," circle",[220,5368,5282],{"class":230},[220,5370,5328],{"class":230},[220,5372,1738],{"class":230},[220,5374,5375],{"class":230}," get",[220,5377,5378],{"class":230}," bigger",[220,5380,5294],{"class":230},[220,5382,5383],{"class":230}," we",[220,5385,5386],{"class":230}," scroll",[220,5388,5389],{"class":230}," past",[220,5391,5285],{"class":230},[220,5393,5394],{"class":230}," section.\n",[212,5396,5398],{"className":214,"code":5397,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,5399,5400],{"__ignoreMap":178},[220,5401,5402,5404,5406,5409,5411,5413,5416,5419,5422,5425,5428,5430,5432],{"class":222,"line":223},[220,5403,5310],{"class":226},[220,5405,5274],{"class":230},[220,5407,5408],{"class":230}," logo.svg",[220,5410,5294],{"class":230},[220,5412,5297],{"class":230},[220,5414,5415],{"class":230}," liquid",[220,5417,5418],{"class":230}," glass",[220,5420,5421],{"class":230}," effect",[220,5423,5424],{"class":230}," on",[220,5426,5427],{"class":230}," top",[220,5429,5325],{"class":230},[220,5431,5328],{"class":230},[220,5433,5434],{"class":230}," shader.\n",[23,5436,5438],{"id":5437},"pro-knowledge-base","Pro knowledge base",[15,5440,5441],{},"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,5443,5444],{},"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,5446,5447],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[4460,5449],{"message":5450},"Make your agent a shader expert...",[4504,5452],{},[11,5454,5456],{"id":5455},"mcp-for-business","MCP for business",[15,5458,5459],{},[4798,5460],{"alt":5461,"src":5462},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,5464,5465],{},"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,5467,5468,5469,5473],{},"We're open to partnerships and custom integrations. Reach out at ",[56,5470,5472],{"href":5471},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,5475,5476],{},"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":5478},[5479,5483,5484,5485,5486],{"id":4468,"depth":179,"text":4469,"children":5480},[5481,5482],{"id":4475,"depth":389,"text":4476},{"id":4508,"depth":389,"text":4509},{"id":4793,"depth":179,"text":4794},{"id":4815,"depth":179,"text":4816},{"id":5230,"depth":179,"text":5231},{"id":5437,"depth":179,"text":5438},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":4450,"description":5487},"docs\u002Fguide\u002F13.mcp","Z9GnUAMws-GwNlKqbKfikTYIvlVfCwDJ2T_FdlvdZwE",{"id":5494,"title":1482,"body":5495,"category":188,"description":6965,"exclude":190,"extension":191,"forceFramework":190,"icon":6966,"meta":6967,"navigation":194,"path":1481,"seo":6968,"stem":6969,"__hash__":6970},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":5496,"toc":6961},[5497,5500,5506,5510,5517,5960,5963,5967,5984,6406,6409,6418,6955,6958],[11,5498,1482],{"id":5499},"composing-effects",[15,5501,5502,5503,5505],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,5504,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,5507,5509],{"id":5508},"stacking-components","Stacking Components",[15,5511,5512,5513,5516],{},"Components are evaluated ",[159,5514,5515],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,5518,5519,5602,5698,5788,5878],{":tabs":1557},[212,5520,5522],{"className":334,"code":5521,"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,5523,5524,5532,5537,5545,5549,5554,5576,5580,5585,5594],{"__ignoreMap":178},[220,5525,5526,5528,5530],{"class":222,"line":223},[220,5527,343],{"class":264},[220,5529,347],{"class":346},[220,5531,359],{"class":264},[220,5533,5534],{"class":222,"line":179},[220,5535,5536],{"class":609}," \u003C!-- Bottom layer -->\n",[220,5538,5539,5541,5543],{"class":222,"line":389},[220,5540,364],{"class":264},[220,5542,367],{"class":346},[220,5544,386],{"class":264},[220,5546,5547],{"class":222,"line":399},[220,5548,647],{"emptyLinePlaceholder":194},[220,5550,5551],{"class":222,"line":644},[220,5552,5553],{"class":609}," \u003C!-- Middle layer -->\n",[220,5555,5556,5558,5560,5562,5564,5566,5569,5571,5574],{"class":222,"line":650},[220,5557,364],{"class":264},[220,5559,2553],{"class":346},[220,5561,1588],{"class":226},[220,5563,353],{"class":264},[220,5565,2560],{"class":230},[220,5567,5568],{"class":226}," radius",[220,5570,353],{"class":264},[220,5572,5573],{"class":230},"\"0.8\"",[220,5575,386],{"class":264},[220,5577,5578],{"class":222,"line":656},[220,5579,647],{"emptyLinePlaceholder":194},[220,5581,5582],{"class":222,"line":673},[220,5583,5584],{"class":609}," \u003C!-- Top layer -->\n",[220,5586,5587,5589,5592],{"class":222,"line":682},[220,5588,364],{"class":264},[220,5590,5591],{"class":346},"GlassTiles",[220,5593,386],{"class":264},[220,5595,5596,5598,5600],{"class":222,"line":691},[220,5597,402],{"class":264},[220,5599,347],{"class":346},[220,5601,359],{"class":264},[212,5603,5605],{"className":409,"code":5604,"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,5606,5607,5615,5624,5632,5636,5645,5669,5673,5682,5690],{"__ignoreMap":178},[220,5608,5609,5611,5613],{"class":222,"line":223},[220,5610,343],{"class":264},[220,5612,347],{"class":420},[220,5614,359],{"class":264},[220,5616,5617,5619,5622],{"class":222,"line":179},[220,5618,1999],{"class":264},[220,5620,5621],{"class":609},"\u002F* Bottom layer *\u002F",[220,5623,749],{"class":264},[220,5625,5626,5628,5630],{"class":222,"line":389},[220,5627,364],{"class":264},[220,5629,367],{"class":420},[220,5631,386],{"class":264},[220,5633,5634],{"class":222,"line":399},[220,5635,647],{"emptyLinePlaceholder":194},[220,5637,5638,5640,5643],{"class":222,"line":644},[220,5639,1999],{"class":264},[220,5641,5642],{"class":609},"\u002F* Middle layer *\u002F",[220,5644,749],{"class":264},[220,5646,5647,5649,5651,5653,5655,5657,5659,5661,5663,5666],{"class":222,"line":650},[220,5648,364],{"class":264},[220,5650,2553],{"class":420},[220,5652,1588],{"class":226},[220,5654,353],{"class":260},[220,5656,2560],{"class":230},[220,5658,5568],{"class":226},[220,5660,353],{"class":260},[220,5662,743],{"class":264},[220,5664,5665],{"class":420},"0.8",[220,5667,5668],{"class":264},"} \u002F>\n",[220,5670,5671],{"class":222,"line":656},[220,5672,647],{"emptyLinePlaceholder":194},[220,5674,5675,5677,5680],{"class":222,"line":673},[220,5676,1999],{"class":264},[220,5678,5679],{"class":609},"\u002F* Top layer *\u002F",[220,5681,749],{"class":264},[220,5683,5684,5686,5688],{"class":222,"line":682},[220,5685,364],{"class":264},[220,5687,5591],{"class":420},[220,5689,386],{"class":264},[220,5691,5692,5694,5696],{"class":222,"line":691},[220,5693,402],{"class":264},[220,5695,347],{"class":420},[220,5697,359],{"class":264},[212,5699,5700],{"className":468,"code":5604,"language":469,"meta":178,"style":178},[99,5701,5702,5710,5718,5726,5730,5738,5760,5764,5772,5780],{"__ignoreMap":178},[220,5703,5704,5706,5708],{"class":222,"line":223},[220,5705,343],{"class":264},[220,5707,347],{"class":420},[220,5709,359],{"class":264},[220,5711,5712,5714,5716],{"class":222,"line":179},[220,5713,1999],{"class":264},[220,5715,5621],{"class":609},[220,5717,749],{"class":264},[220,5719,5720,5722,5724],{"class":222,"line":389},[220,5721,364],{"class":264},[220,5723,367],{"class":420},[220,5725,386],{"class":264},[220,5727,5728],{"class":222,"line":399},[220,5729,647],{"emptyLinePlaceholder":194},[220,5731,5732,5734,5736],{"class":222,"line":644},[220,5733,1999],{"class":264},[220,5735,5642],{"class":609},[220,5737,749],{"class":264},[220,5739,5740,5742,5744,5746,5748,5750,5752,5754,5756,5758],{"class":222,"line":650},[220,5741,364],{"class":264},[220,5743,2553],{"class":420},[220,5745,1588],{"class":226},[220,5747,353],{"class":260},[220,5749,2560],{"class":230},[220,5751,5568],{"class":226},[220,5753,353],{"class":260},[220,5755,743],{"class":264},[220,5757,5665],{"class":420},[220,5759,5668],{"class":264},[220,5761,5762],{"class":222,"line":656},[220,5763,647],{"emptyLinePlaceholder":194},[220,5765,5766,5768,5770],{"class":222,"line":673},[220,5767,1999],{"class":264},[220,5769,5679],{"class":609},[220,5771,749],{"class":264},[220,5773,5774,5776,5778],{"class":222,"line":682},[220,5775,364],{"class":264},[220,5777,5591],{"class":420},[220,5779,386],{"class":264},[220,5781,5782,5784,5786],{"class":222,"line":691},[220,5783,402],{"class":264},[220,5785,347],{"class":420},[220,5787,359],{"class":264},[212,5789,5790],{"className":468,"code":5604,"language":469,"meta":178,"style":178},[99,5791,5792,5800,5808,5816,5820,5828,5850,5854,5862,5870],{"__ignoreMap":178},[220,5793,5794,5796,5798],{"class":222,"line":223},[220,5795,343],{"class":264},[220,5797,347],{"class":420},[220,5799,359],{"class":264},[220,5801,5802,5804,5806],{"class":222,"line":179},[220,5803,1999],{"class":264},[220,5805,5621],{"class":609},[220,5807,749],{"class":264},[220,5809,5810,5812,5814],{"class":222,"line":389},[220,5811,364],{"class":264},[220,5813,367],{"class":420},[220,5815,386],{"class":264},[220,5817,5818],{"class":222,"line":399},[220,5819,647],{"emptyLinePlaceholder":194},[220,5821,5822,5824,5826],{"class":222,"line":644},[220,5823,1999],{"class":264},[220,5825,5642],{"class":609},[220,5827,749],{"class":264},[220,5829,5830,5832,5834,5836,5838,5840,5842,5844,5846,5848],{"class":222,"line":650},[220,5831,364],{"class":264},[220,5833,2553],{"class":420},[220,5835,1588],{"class":226},[220,5837,353],{"class":260},[220,5839,2560],{"class":230},[220,5841,5568],{"class":226},[220,5843,353],{"class":260},[220,5845,743],{"class":264},[220,5847,5665],{"class":420},[220,5849,5668],{"class":264},[220,5851,5852],{"class":222,"line":656},[220,5853,647],{"emptyLinePlaceholder":194},[220,5855,5856,5858,5860],{"class":222,"line":673},[220,5857,1999],{"class":264},[220,5859,5679],{"class":609},[220,5861,749],{"class":264},[220,5863,5864,5866,5868],{"class":222,"line":682},[220,5865,364],{"class":264},[220,5867,5591],{"class":420},[220,5869,386],{"class":264},[220,5871,5872,5874,5876],{"class":222,"line":691},[220,5873,402],{"class":264},[220,5875,347],{"class":420},[220,5877,359],{"class":264},[212,5879,5881],{"className":251,"code":5880,"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,5882,5883,5897,5901,5906,5915,5920,5938,5943,5952,5956],{"__ignoreMap":178},[220,5884,5885,5887,5889,5891,5893,5895],{"class":222,"line":223},[220,5886,1735],{"class":260},[220,5888,1738],{"class":420},[220,5890,1741],{"class":260},[220,5892,1744],{"class":260},[220,5894,1747],{"class":226},[220,5896,1750],{"class":264},[220,5898,5899],{"class":222,"line":179},[220,5900,1765],{"class":264},[220,5902,5903],{"class":222,"line":389},[220,5904,5905],{"class":609}," \u002F\u002F Bottom layer\n",[220,5907,5908,5910,5912],{"class":222,"line":399},[220,5909,1770],{"class":264},[220,5911,2462],{"class":230},[220,5913,5914],{"class":264},", props: {} },\n",[220,5916,5917],{"class":222,"line":644},[220,5918,5919],{"class":609}," \u002F\u002F Middle layer\n",[220,5921,5922,5924,5926,5928,5930,5933,5935],{"class":222,"line":650},[220,5923,1770],{"class":264},[220,5925,3206],{"class":230},[220,5927,1776],{"class":264},[220,5929,3217],{"class":230},[220,5931,5932],{"class":264},", radius: ",[220,5934,5665],{"class":420},[220,5936,5937],{"class":264}," } },\n",[220,5939,5940],{"class":222,"line":656},[220,5941,5942],{"class":609}," \u002F\u002F Top layer\n",[220,5944,5945,5947,5950],{"class":222,"line":673},[220,5946,1770],{"class":264},[220,5948,5949],{"class":230},"'GlassTiles'",[220,5951,2465],{"class":264},[220,5953,5954],{"class":222,"line":682},[220,5955,1787],{"class":264},[220,5957,5958],{"class":222,"line":691},[220,5959,1792],{"class":264},[19,5961],{":preset":5962},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,5964,5966],{"id":5965},"nesting-components","Nesting Components",[15,5968,5969,5970,5973,5974,5977,5978,5981,5982,1938],{},"Notice how the ",[99,5971,5972],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,5975,5976],{},"only"," apply glass tiles to the ",[99,5979,5980],{},"\u003CCircle>"," component, you can nest it inside the ",[99,5983,5972],{},[246,5985,5986,6065,6154,6240,6326],{":tabs":1557},[212,5987,5989],{"className":334,"code":5988,"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,5990,5991,5999,6004,6012,6016,6021,6029,6049,6057],{"__ignoreMap":178},[220,5992,5993,5995,5997],{"class":222,"line":223},[220,5994,343],{"class":264},[220,5996,347],{"class":346},[220,5998,359],{"class":264},[220,6000,6001],{"class":222,"line":179},[220,6002,6003],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,6005,6006,6008,6010],{"class":222,"line":389},[220,6007,364],{"class":264},[220,6009,367],{"class":346},[220,6011,386],{"class":264},[220,6013,6014],{"class":222,"line":399},[220,6015,647],{"emptyLinePlaceholder":194},[220,6017,6018],{"class":222,"line":644},[220,6019,6020],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,6022,6023,6025,6027],{"class":222,"line":650},[220,6024,364],{"class":264},[220,6026,5591],{"class":346},[220,6028,359],{"class":264},[220,6030,6031,6033,6035,6037,6039,6041,6043,6045,6047],{"class":222,"line":656},[220,6032,2550],{"class":264},[220,6034,2553],{"class":346},[220,6036,1588],{"class":226},[220,6038,353],{"class":264},[220,6040,2560],{"class":230},[220,6042,5568],{"class":226},[220,6044,353],{"class":264},[220,6046,5573],{"class":230},[220,6048,386],{"class":264},[220,6050,6051,6053,6055],{"class":222,"line":673},[220,6052,2567],{"class":264},[220,6054,5591],{"class":346},[220,6056,359],{"class":264},[220,6058,6059,6061,6063],{"class":222,"line":682},[220,6060,402],{"class":264},[220,6062,347],{"class":346},[220,6064,359],{"class":264},[212,6066,6068],{"className":409,"code":6067,"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,6069,6070,6078,6087,6095,6099,6108,6116,6138,6146],{"__ignoreMap":178},[220,6071,6072,6074,6076],{"class":222,"line":223},[220,6073,343],{"class":264},[220,6075,347],{"class":420},[220,6077,359],{"class":264},[220,6079,6080,6082,6085],{"class":222,"line":179},[220,6081,1999],{"class":264},[220,6083,6084],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,6086,749],{"class":264},[220,6088,6089,6091,6093],{"class":222,"line":389},[220,6090,364],{"class":264},[220,6092,367],{"class":420},[220,6094,386],{"class":264},[220,6096,6097],{"class":222,"line":399},[220,6098,647],{"emptyLinePlaceholder":194},[220,6100,6101,6103,6106],{"class":222,"line":644},[220,6102,1999],{"class":264},[220,6104,6105],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,6107,749],{"class":264},[220,6109,6110,6112,6114],{"class":222,"line":650},[220,6111,364],{"class":264},[220,6113,5591],{"class":420},[220,6115,359],{"class":264},[220,6117,6118,6120,6122,6124,6126,6128,6130,6132,6134,6136],{"class":222,"line":656},[220,6119,2550],{"class":264},[220,6121,2553],{"class":420},[220,6123,1588],{"class":226},[220,6125,353],{"class":260},[220,6127,2560],{"class":230},[220,6129,5568],{"class":226},[220,6131,353],{"class":260},[220,6133,743],{"class":264},[220,6135,5665],{"class":420},[220,6137,5668],{"class":264},[220,6139,6140,6142,6144],{"class":222,"line":673},[220,6141,2567],{"class":264},[220,6143,5591],{"class":420},[220,6145,359],{"class":264},[220,6147,6148,6150,6152],{"class":222,"line":682},[220,6149,402],{"class":264},[220,6151,347],{"class":420},[220,6153,359],{"class":264},[212,6155,6156],{"className":468,"code":6067,"language":469,"meta":178,"style":178},[99,6157,6158,6166,6174,6182,6186,6194,6202,6224,6232],{"__ignoreMap":178},[220,6159,6160,6162,6164],{"class":222,"line":223},[220,6161,343],{"class":264},[220,6163,347],{"class":420},[220,6165,359],{"class":264},[220,6167,6168,6170,6172],{"class":222,"line":179},[220,6169,1999],{"class":264},[220,6171,6084],{"class":609},[220,6173,749],{"class":264},[220,6175,6176,6178,6180],{"class":222,"line":389},[220,6177,364],{"class":264},[220,6179,367],{"class":420},[220,6181,386],{"class":264},[220,6183,6184],{"class":222,"line":399},[220,6185,647],{"emptyLinePlaceholder":194},[220,6187,6188,6190,6192],{"class":222,"line":644},[220,6189,1999],{"class":264},[220,6191,6105],{"class":609},[220,6193,749],{"class":264},[220,6195,6196,6198,6200],{"class":222,"line":650},[220,6197,364],{"class":264},[220,6199,5591],{"class":420},[220,6201,359],{"class":264},[220,6203,6204,6206,6208,6210,6212,6214,6216,6218,6220,6222],{"class":222,"line":656},[220,6205,2550],{"class":264},[220,6207,2553],{"class":420},[220,6209,1588],{"class":226},[220,6211,353],{"class":260},[220,6213,2560],{"class":230},[220,6215,5568],{"class":226},[220,6217,353],{"class":260},[220,6219,743],{"class":264},[220,6221,5665],{"class":420},[220,6223,5668],{"class":264},[220,6225,6226,6228,6230],{"class":222,"line":673},[220,6227,2567],{"class":264},[220,6229,5591],{"class":420},[220,6231,359],{"class":264},[220,6233,6234,6236,6238],{"class":222,"line":682},[220,6235,402],{"class":264},[220,6237,347],{"class":420},[220,6239,359],{"class":264},[212,6241,6242],{"className":468,"code":6067,"language":469,"meta":178,"style":178},[99,6243,6244,6252,6260,6268,6272,6280,6288,6310,6318],{"__ignoreMap":178},[220,6245,6246,6248,6250],{"class":222,"line":223},[220,6247,343],{"class":264},[220,6249,347],{"class":420},[220,6251,359],{"class":264},[220,6253,6254,6256,6258],{"class":222,"line":179},[220,6255,1999],{"class":264},[220,6257,6084],{"class":609},[220,6259,749],{"class":264},[220,6261,6262,6264,6266],{"class":222,"line":389},[220,6263,364],{"class":264},[220,6265,367],{"class":420},[220,6267,386],{"class":264},[220,6269,6270],{"class":222,"line":399},[220,6271,647],{"emptyLinePlaceholder":194},[220,6273,6274,6276,6278],{"class":222,"line":644},[220,6275,1999],{"class":264},[220,6277,6105],{"class":609},[220,6279,749],{"class":264},[220,6281,6282,6284,6286],{"class":222,"line":650},[220,6283,364],{"class":264},[220,6285,5591],{"class":420},[220,6287,359],{"class":264},[220,6289,6290,6292,6294,6296,6298,6300,6302,6304,6306,6308],{"class":222,"line":656},[220,6291,2550],{"class":264},[220,6293,2553],{"class":420},[220,6295,1588],{"class":226},[220,6297,353],{"class":260},[220,6299,2560],{"class":230},[220,6301,5568],{"class":226},[220,6303,353],{"class":260},[220,6305,743],{"class":264},[220,6307,5665],{"class":420},[220,6309,5668],{"class":264},[220,6311,6312,6314,6316],{"class":222,"line":673},[220,6313,2567],{"class":264},[220,6315,5591],{"class":420},[220,6317,359],{"class":264},[220,6319,6320,6322,6324],{"class":222,"line":682},[220,6321,402],{"class":264},[220,6323,347],{"class":420},[220,6325,359],{"class":264},[212,6327,6329],{"className":251,"code":6328,"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,6330,6331,6345,6349,6354,6362,6367,6376,6393,6398,6402],{"__ignoreMap":178},[220,6332,6333,6335,6337,6339,6341,6343],{"class":222,"line":223},[220,6334,1735],{"class":260},[220,6336,1738],{"class":420},[220,6338,1741],{"class":260},[220,6340,1744],{"class":260},[220,6342,1747],{"class":226},[220,6344,1750],{"class":264},[220,6346,6347],{"class":222,"line":179},[220,6348,1765],{"class":264},[220,6350,6351],{"class":222,"line":389},[220,6352,6353],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,6355,6356,6358,6360],{"class":222,"line":399},[220,6357,1770],{"class":264},[220,6359,2462],{"class":230},[220,6361,5914],{"class":264},[220,6363,6364],{"class":222,"line":644},[220,6365,6366],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,6368,6369,6371,6373],{"class":222,"line":650},[220,6370,1770],{"class":264},[220,6372,5949],{"class":230},[220,6374,6375],{"class":264},", props: {}, children: [\n",[220,6377,6378,6381,6383,6385,6387,6389,6391],{"class":222,"line":656},[220,6379,6380],{"class":264}," { type: ",[220,6382,3206],{"class":230},[220,6384,1776],{"class":264},[220,6386,3217],{"class":230},[220,6388,5932],{"class":264},[220,6390,5665],{"class":420},[220,6392,1782],{"class":264},[220,6394,6395],{"class":222,"line":673},[220,6396,6397],{"class":264}," ]}\n",[220,6399,6400],{"class":222,"line":682},[220,6401,1787],{"class":264},[220,6403,6404],{"class":222,"line":691},[220,6405,1792],{"class":264},[19,6407],{":preset":6408},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,6410,6411,6412,6414,6415,6417],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,6413,367],{},") don't accept children, whereas components that apply effects (such as ",[99,6416,5591],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,6419,6420,6523,6637,6747,6857],{":tabs":1557},[212,6421,6423],{"className":334,"code":6422,"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,6424,6425,6433,6438,6446,6450,6455,6471,6479,6499,6507,6515],{"__ignoreMap":178},[220,6426,6427,6429,6431],{"class":222,"line":223},[220,6428,343],{"class":264},[220,6430,347],{"class":346},[220,6432,359],{"class":264},[220,6434,6435],{"class":222,"line":179},[220,6436,6437],{"class":609}," \u003C!-- Unaffected -->\n",[220,6439,6440,6442,6444],{"class":222,"line":389},[220,6441,364],{"class":264},[220,6443,367],{"class":346},[220,6445,386],{"class":264},[220,6447,6448],{"class":222,"line":399},[220,6449,647],{"emptyLinePlaceholder":194},[220,6451,6452],{"class":222,"line":644},[220,6453,6454],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,6456,6457,6459,6462,6464,6466,6469],{"class":222,"line":650},[220,6458,364],{"class":264},[220,6460,6461],{"class":346},"GridDistortion",[220,6463,5568],{"class":226},[220,6465,353],{"class":264},[220,6467,6468],{"class":230},"\"2\"",[220,6470,359],{"class":264},[220,6472,6473,6475,6477],{"class":222,"line":656},[220,6474,2550],{"class":264},[220,6476,5591],{"class":346},[220,6478,359],{"class":264},[220,6480,6481,6483,6485,6487,6489,6491,6493,6495,6497],{"class":222,"line":673},[220,6482,2813],{"class":264},[220,6484,2553],{"class":346},[220,6486,1588],{"class":226},[220,6488,353],{"class":264},[220,6490,2560],{"class":230},[220,6492,5568],{"class":226},[220,6494,353],{"class":264},[220,6496,5573],{"class":230},[220,6498,386],{"class":264},[220,6500,6501,6503,6505],{"class":222,"line":682},[220,6502,2828],{"class":264},[220,6504,5591],{"class":346},[220,6506,359],{"class":264},[220,6508,6509,6511,6513],{"class":222,"line":691},[220,6510,2567],{"class":264},[220,6512,6461],{"class":346},[220,6514,359],{"class":264},[220,6516,6517,6519,6521],{"class":222,"line":696},[220,6518,402],{"class":264},[220,6520,347],{"class":346},[220,6522,359],{"class":264},[212,6524,6526],{"className":409,"code":6525,"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,6527,6528,6536,6545,6553,6557,6566,6583,6591,6613,6621,6629],{"__ignoreMap":178},[220,6529,6530,6532,6534],{"class":222,"line":223},[220,6531,343],{"class":264},[220,6533,347],{"class":420},[220,6535,359],{"class":264},[220,6537,6538,6540,6543],{"class":222,"line":179},[220,6539,1999],{"class":264},[220,6541,6542],{"class":609},"\u002F* Unaffected *\u002F",[220,6544,749],{"class":264},[220,6546,6547,6549,6551],{"class":222,"line":389},[220,6548,364],{"class":264},[220,6550,367],{"class":420},[220,6552,386],{"class":264},[220,6554,6555],{"class":222,"line":399},[220,6556,647],{"emptyLinePlaceholder":194},[220,6558,6559,6561,6564],{"class":222,"line":644},[220,6560,1999],{"class":264},[220,6562,6563],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,6565,749],{"class":264},[220,6567,6568,6570,6572,6574,6576,6578,6581],{"class":222,"line":650},[220,6569,364],{"class":264},[220,6571,6461],{"class":420},[220,6573,5568],{"class":226},[220,6575,353],{"class":260},[220,6577,743],{"class":264},[220,6579,6580],{"class":420},"2",[220,6582,2335],{"class":264},[220,6584,6585,6587,6589],{"class":222,"line":656},[220,6586,2550],{"class":264},[220,6588,5591],{"class":420},[220,6590,359],{"class":264},[220,6592,6593,6595,6597,6599,6601,6603,6605,6607,6609,6611],{"class":222,"line":673},[220,6594,2813],{"class":264},[220,6596,2553],{"class":420},[220,6598,1588],{"class":226},[220,6600,353],{"class":260},[220,6602,2560],{"class":230},[220,6604,5568],{"class":226},[220,6606,353],{"class":260},[220,6608,743],{"class":264},[220,6610,5665],{"class":420},[220,6612,5668],{"class":264},[220,6614,6615,6617,6619],{"class":222,"line":682},[220,6616,2828],{"class":264},[220,6618,5591],{"class":420},[220,6620,359],{"class":264},[220,6622,6623,6625,6627],{"class":222,"line":691},[220,6624,2567],{"class":264},[220,6626,6461],{"class":420},[220,6628,359],{"class":264},[220,6630,6631,6633,6635],{"class":222,"line":696},[220,6632,402],{"class":264},[220,6634,347],{"class":420},[220,6636,359],{"class":264},[212,6638,6639],{"className":468,"code":6525,"language":469,"meta":178,"style":178},[99,6640,6641,6649,6657,6665,6669,6677,6693,6701,6723,6731,6739],{"__ignoreMap":178},[220,6642,6643,6645,6647],{"class":222,"line":223},[220,6644,343],{"class":264},[220,6646,347],{"class":420},[220,6648,359],{"class":264},[220,6650,6651,6653,6655],{"class":222,"line":179},[220,6652,1999],{"class":264},[220,6654,6542],{"class":609},[220,6656,749],{"class":264},[220,6658,6659,6661,6663],{"class":222,"line":389},[220,6660,364],{"class":264},[220,6662,367],{"class":420},[220,6664,386],{"class":264},[220,6666,6667],{"class":222,"line":399},[220,6668,647],{"emptyLinePlaceholder":194},[220,6670,6671,6673,6675],{"class":222,"line":644},[220,6672,1999],{"class":264},[220,6674,6563],{"class":609},[220,6676,749],{"class":264},[220,6678,6679,6681,6683,6685,6687,6689,6691],{"class":222,"line":650},[220,6680,364],{"class":264},[220,6682,6461],{"class":420},[220,6684,5568],{"class":226},[220,6686,353],{"class":260},[220,6688,743],{"class":264},[220,6690,6580],{"class":420},[220,6692,2335],{"class":264},[220,6694,6695,6697,6699],{"class":222,"line":656},[220,6696,2550],{"class":264},[220,6698,5591],{"class":420},[220,6700,359],{"class":264},[220,6702,6703,6705,6707,6709,6711,6713,6715,6717,6719,6721],{"class":222,"line":673},[220,6704,2813],{"class":264},[220,6706,2553],{"class":420},[220,6708,1588],{"class":226},[220,6710,353],{"class":260},[220,6712,2560],{"class":230},[220,6714,5568],{"class":226},[220,6716,353],{"class":260},[220,6718,743],{"class":264},[220,6720,5665],{"class":420},[220,6722,5668],{"class":264},[220,6724,6725,6727,6729],{"class":222,"line":682},[220,6726,2828],{"class":264},[220,6728,5591],{"class":420},[220,6730,359],{"class":264},[220,6732,6733,6735,6737],{"class":222,"line":691},[220,6734,2567],{"class":264},[220,6736,6461],{"class":420},[220,6738,359],{"class":264},[220,6740,6741,6743,6745],{"class":222,"line":696},[220,6742,402],{"class":264},[220,6744,347],{"class":420},[220,6746,359],{"class":264},[212,6748,6749],{"className":468,"code":6525,"language":469,"meta":178,"style":178},[99,6750,6751,6759,6767,6775,6779,6787,6803,6811,6833,6841,6849],{"__ignoreMap":178},[220,6752,6753,6755,6757],{"class":222,"line":223},[220,6754,343],{"class":264},[220,6756,347],{"class":420},[220,6758,359],{"class":264},[220,6760,6761,6763,6765],{"class":222,"line":179},[220,6762,1999],{"class":264},[220,6764,6542],{"class":609},[220,6766,749],{"class":264},[220,6768,6769,6771,6773],{"class":222,"line":389},[220,6770,364],{"class":264},[220,6772,367],{"class":420},[220,6774,386],{"class":264},[220,6776,6777],{"class":222,"line":399},[220,6778,647],{"emptyLinePlaceholder":194},[220,6780,6781,6783,6785],{"class":222,"line":644},[220,6782,1999],{"class":264},[220,6784,6563],{"class":609},[220,6786,749],{"class":264},[220,6788,6789,6791,6793,6795,6797,6799,6801],{"class":222,"line":650},[220,6790,364],{"class":264},[220,6792,6461],{"class":420},[220,6794,5568],{"class":226},[220,6796,353],{"class":260},[220,6798,743],{"class":264},[220,6800,6580],{"class":420},[220,6802,2335],{"class":264},[220,6804,6805,6807,6809],{"class":222,"line":656},[220,6806,2550],{"class":264},[220,6808,5591],{"class":420},[220,6810,359],{"class":264},[220,6812,6813,6815,6817,6819,6821,6823,6825,6827,6829,6831],{"class":222,"line":673},[220,6814,2813],{"class":264},[220,6816,2553],{"class":420},[220,6818,1588],{"class":226},[220,6820,353],{"class":260},[220,6822,2560],{"class":230},[220,6824,5568],{"class":226},[220,6826,353],{"class":260},[220,6828,743],{"class":264},[220,6830,5665],{"class":420},[220,6832,5668],{"class":264},[220,6834,6835,6837,6839],{"class":222,"line":682},[220,6836,2828],{"class":264},[220,6838,5591],{"class":420},[220,6840,359],{"class":264},[220,6842,6843,6845,6847],{"class":222,"line":691},[220,6844,2567],{"class":264},[220,6846,6461],{"class":420},[220,6848,359],{"class":264},[220,6850,6851,6853,6855],{"class":222,"line":696},[220,6852,402],{"class":264},[220,6854,347],{"class":420},[220,6856,359],{"class":264},[212,6858,6860],{"className":251,"code":6859,"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,6861,6862,6876,6880,6885,6893,6898,6913,6921,6938,6943,6947,6951],{"__ignoreMap":178},[220,6863,6864,6866,6868,6870,6872,6874],{"class":222,"line":223},[220,6865,1735],{"class":260},[220,6867,1738],{"class":420},[220,6869,1741],{"class":260},[220,6871,1744],{"class":260},[220,6873,1747],{"class":226},[220,6875,1750],{"class":264},[220,6877,6878],{"class":222,"line":179},[220,6879,1765],{"class":264},[220,6881,6882],{"class":222,"line":389},[220,6883,6884],{"class":609}," \u002F\u002F Unaffected\n",[220,6886,6887,6889,6891],{"class":222,"line":399},[220,6888,1770],{"class":264},[220,6890,2462],{"class":230},[220,6892,5914],{"class":264},[220,6894,6895],{"class":222,"line":644},[220,6896,6897],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,6899,6900,6902,6905,6908,6910],{"class":222,"line":650},[220,6901,1770],{"class":264},[220,6903,6904],{"class":230},"'GridDistortion'",[220,6906,6907],{"class":264},", props: { radius: ",[220,6909,6580],{"class":420},[220,6911,6912],{"class":264}," }, children: [\n",[220,6914,6915,6917,6919],{"class":222,"line":656},[220,6916,6380],{"class":264},[220,6918,5949],{"class":230},[220,6920,6375],{"class":264},[220,6922,6923,6926,6928,6930,6932,6934,6936],{"class":222,"line":673},[220,6924,6925],{"class":264}," { type: ",[220,6927,3206],{"class":230},[220,6929,1776],{"class":264},[220,6931,3217],{"class":230},[220,6933,5932],{"class":264},[220,6935,5665],{"class":420},[220,6937,1782],{"class":264},[220,6939,6940],{"class":222,"line":682},[220,6941,6942],{"class":264}," ]}\n",[220,6944,6945],{"class":222,"line":691},[220,6946,6397],{"class":264},[220,6948,6949],{"class":222,"line":696},[220,6950,1787],{"class":264},[220,6952,6953],{"class":222,"line":702},[220,6954,1792],{"class":264},[19,6956],{":preset":6957},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,6959,6960],{},"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":6962},[6963,6964],{"id":5508,"depth":179,"text":5509},{"id":5965,"depth":179,"text":5966},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":6965},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":6972,"title":6973,"body":6974,"category":9599,"description":9600,"exclude":190,"extension":191,"forceFramework":190,"icon":9601,"meta":9602,"navigation":194,"path":9603,"seo":9604,"stem":9605,"__hash__":9606},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":6975,"toc":9589},[6976,6979,6982,6986,6997,7340,7343,7348,7443,7447,7450,8025,8028,8031,8045,8360,8363,8366,8370,8381,8402,8413,8417,8432,8438,8847,8850,8856,8860,8867,8901,9584,9587],[11,6977,6973],{"id":6978},"blending-masking",[15,6980,6981],{},"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,6983,6985],{"id":6984},"blend-modes","Blend Modes",[15,6987,6988,6989,6992,6993,6996],{},"Every component has a ",[99,6990,6991],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,6994,6995],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,6998,6999,7066,7139,7209,7279],{":tabs":1557},[212,7000,7002],{"className":334,"code":7001,"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,7003,7004,7012,7020,7024,7029,7058],{"__ignoreMap":178},[220,7005,7006,7008,7010],{"class":222,"line":223},[220,7007,343],{"class":264},[220,7009,347],{"class":346},[220,7011,359],{"class":264},[220,7013,7014,7016,7018],{"class":222,"line":179},[220,7015,364],{"class":264},[220,7017,367],{"class":346},[220,7019,386],{"class":264},[220,7021,7022],{"class":222,"line":389},[220,7023,647],{"emptyLinePlaceholder":194},[220,7025,7026],{"class":222,"line":399},[220,7027,7028],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,7030,7031,7033,7035,7037,7039,7041,7043,7045,7048,7051,7053,7056],{"class":222,"line":644},[220,7032,364],{"class":264},[220,7034,2553],{"class":346},[220,7036,1588],{"class":226},[220,7038,353],{"class":264},[220,7040,2560],{"class":230},[220,7042,5568],{"class":226},[220,7044,353],{"class":264},[220,7046,7047],{"class":230},"\"0.5\"",[220,7049,7050],{"class":226}," blendMode",[220,7052,353],{"class":264},[220,7054,7055],{"class":230},"\"multiply\"",[220,7057,386],{"class":264},[220,7059,7060,7062,7064],{"class":222,"line":650},[220,7061,402],{"class":264},[220,7063,347],{"class":346},[220,7065,359],{"class":264},[212,7067,7069],{"className":409,"code":7068,"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,7070,7071,7079,7087,7091,7100,7131],{"__ignoreMap":178},[220,7072,7073,7075,7077],{"class":222,"line":223},[220,7074,343],{"class":264},[220,7076,347],{"class":420},[220,7078,359],{"class":264},[220,7080,7081,7083,7085],{"class":222,"line":179},[220,7082,364],{"class":264},[220,7084,367],{"class":420},[220,7086,386],{"class":264},[220,7088,7089],{"class":222,"line":389},[220,7090,647],{"emptyLinePlaceholder":194},[220,7092,7093,7095,7098],{"class":222,"line":399},[220,7094,1999],{"class":264},[220,7096,7097],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,7099,749],{"class":264},[220,7101,7102,7104,7106,7108,7110,7112,7114,7116,7118,7121,7123,7125,7127,7129],{"class":222,"line":644},[220,7103,364],{"class":264},[220,7105,2553],{"class":420},[220,7107,1588],{"class":226},[220,7109,353],{"class":260},[220,7111,2560],{"class":230},[220,7113,5568],{"class":226},[220,7115,353],{"class":260},[220,7117,743],{"class":264},[220,7119,7120],{"class":420},"0.5",[220,7122,2914],{"class":264},[220,7124,6991],{"class":226},[220,7126,353],{"class":260},[220,7128,7055],{"class":230},[220,7130,386],{"class":264},[220,7132,7133,7135,7137],{"class":222,"line":650},[220,7134,402],{"class":264},[220,7136,347],{"class":420},[220,7138,359],{"class":264},[212,7140,7141],{"className":468,"code":7068,"language":469,"meta":178,"style":178},[99,7142,7143,7151,7159,7163,7171,7201],{"__ignoreMap":178},[220,7144,7145,7147,7149],{"class":222,"line":223},[220,7146,343],{"class":264},[220,7148,347],{"class":420},[220,7150,359],{"class":264},[220,7152,7153,7155,7157],{"class":222,"line":179},[220,7154,364],{"class":264},[220,7156,367],{"class":420},[220,7158,386],{"class":264},[220,7160,7161],{"class":222,"line":389},[220,7162,647],{"emptyLinePlaceholder":194},[220,7164,7165,7167,7169],{"class":222,"line":399},[220,7166,1999],{"class":264},[220,7168,7097],{"class":609},[220,7170,749],{"class":264},[220,7172,7173,7175,7177,7179,7181,7183,7185,7187,7189,7191,7193,7195,7197,7199],{"class":222,"line":644},[220,7174,364],{"class":264},[220,7176,2553],{"class":420},[220,7178,1588],{"class":226},[220,7180,353],{"class":260},[220,7182,2560],{"class":230},[220,7184,5568],{"class":226},[220,7186,353],{"class":260},[220,7188,743],{"class":264},[220,7190,7120],{"class":420},[220,7192,2914],{"class":264},[220,7194,6991],{"class":226},[220,7196,353],{"class":260},[220,7198,7055],{"class":230},[220,7200,386],{"class":264},[220,7202,7203,7205,7207],{"class":222,"line":650},[220,7204,402],{"class":264},[220,7206,347],{"class":420},[220,7208,359],{"class":264},[212,7210,7211],{"className":468,"code":7068,"language":469,"meta":178,"style":178},[99,7212,7213,7221,7229,7233,7241,7271],{"__ignoreMap":178},[220,7214,7215,7217,7219],{"class":222,"line":223},[220,7216,343],{"class":264},[220,7218,347],{"class":420},[220,7220,359],{"class":264},[220,7222,7223,7225,7227],{"class":222,"line":179},[220,7224,364],{"class":264},[220,7226,367],{"class":420},[220,7228,386],{"class":264},[220,7230,7231],{"class":222,"line":389},[220,7232,647],{"emptyLinePlaceholder":194},[220,7234,7235,7237,7239],{"class":222,"line":399},[220,7236,1999],{"class":264},[220,7238,7097],{"class":609},[220,7240,749],{"class":264},[220,7242,7243,7245,7247,7249,7251,7253,7255,7257,7259,7261,7263,7265,7267,7269],{"class":222,"line":644},[220,7244,364],{"class":264},[220,7246,2553],{"class":420},[220,7248,1588],{"class":226},[220,7250,353],{"class":260},[220,7252,2560],{"class":230},[220,7254,5568],{"class":226},[220,7256,353],{"class":260},[220,7258,743],{"class":264},[220,7260,7120],{"class":420},[220,7262,2914],{"class":264},[220,7264,6991],{"class":226},[220,7266,353],{"class":260},[220,7268,7055],{"class":230},[220,7270,386],{"class":264},[220,7272,7273,7275,7277],{"class":222,"line":650},[220,7274,402],{"class":264},[220,7276,347],{"class":420},[220,7278,359],{"class":264},[212,7280,7282],{"className":251,"code":7281,"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,7283,7284,7298,7302,7310,7332,7336],{"__ignoreMap":178},[220,7285,7286,7288,7290,7292,7294,7296],{"class":222,"line":223},[220,7287,1735],{"class":260},[220,7289,1738],{"class":420},[220,7291,1741],{"class":260},[220,7293,1744],{"class":260},[220,7295,1747],{"class":226},[220,7297,1750],{"class":264},[220,7299,7300],{"class":222,"line":179},[220,7301,1765],{"class":264},[220,7303,7304,7306,7308],{"class":222,"line":389},[220,7305,1770],{"class":264},[220,7307,2462],{"class":230},[220,7309,5914],{"class":264},[220,7311,7312,7314,7316,7318,7320,7322,7324,7327,7330],{"class":222,"line":399},[220,7313,1770],{"class":264},[220,7315,3206],{"class":230},[220,7317,1776],{"class":264},[220,7319,3217],{"class":230},[220,7321,5932],{"class":264},[220,7323,7120],{"class":420},[220,7325,7326],{"class":264},", blendMode: ",[220,7328,7329],{"class":230},"'multiply'",[220,7331,1782],{"class":264},[220,7333,7334],{"class":222,"line":644},[220,7335,1787],{"class":264},[220,7337,7338],{"class":222,"line":650},[220,7339,1792],{"class":264},[19,7341],{":preset":7342},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,7344,7345],{},[159,7346,7347],{},"Available blend modes:",[34,7349,7350,7357,7374,7390,7404,7415,7432],{},[37,7351,7352,4596,7355],{},[159,7353,7354],{},"Basic",[99,7356,6995],{},[37,7358,7359,4596,7362,1895,7365,1895,7368,1895,7371],{},[159,7360,7361],{},"Darkening",[99,7363,7364],{},"multiply",[99,7366,7367],{},"darken",[99,7369,7370],{},"colorBurn",[99,7372,7373],{},"linearBurn",[37,7375,7376,4596,7379,1895,7382,1895,7385,1895,7388],{},[159,7377,7378],{},"Lightening",[99,7380,7381],{},"screen",[99,7383,7384],{},"lighten",[99,7386,7387],{},"colorDodge",[99,7389,1924],{},[37,7391,7392,4596,7395,1895,7398,1895,7401],{},[159,7393,7394],{},"Contrast",[99,7396,7397],{},"overlay",[99,7399,7400],{},"softLight",[99,7402,7403],{},"hardLight",[37,7405,7406,4596,7409,1895,7412],{},[159,7407,7408],{},"Difference",[99,7410,7411],{},"difference",[99,7413,7414],{},"exclusion",[37,7416,7417,4596,7420,1895,7423,1895,7426,1895,7429],{},[159,7418,7419],{},"Color",[99,7421,7422],{},"hue",[99,7424,7425],{},"saturation",[99,7427,7428],{},"color",[99,7430,7431],{},"luminosity",[37,7433,7434,4596,7437,1895,7440],{},[159,7435,7436],{},"Color Space Blending",[99,7438,7439],{},"normal-oklab",[99,7441,7442],{},"normal-oklch",[3262,7444,7446],{"id":7445},"combining-blend-modes","Combining Blend Modes",[15,7448,7449],{},"Use different blend modes on multiple layers to create complex interactions:",[246,7451,7452,7557,7684,7804,7924],{":tabs":1557},[212,7453,7455],{"className":334,"code":7454,"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,7456,7457,7465,7473,7477,7514,7549],{"__ignoreMap":178},[220,7458,7459,7461,7463],{"class":222,"line":223},[220,7460,343],{"class":264},[220,7462,347],{"class":346},[220,7464,359],{"class":264},[220,7466,7467,7469,7471],{"class":222,"line":179},[220,7468,364],{"class":264},[220,7470,367],{"class":346},[220,7472,386],{"class":264},[220,7474,7475],{"class":222,"line":389},[220,7476,647],{"emptyLinePlaceholder":194},[220,7478,7479,7481,7483,7485,7487,7490,7492,7494,7497,7500,7502,7505,7507,7509,7512],{"class":222,"line":399},[220,7480,364],{"class":264},[220,7482,2553],{"class":346},[220,7484,1588],{"class":226},[220,7486,353],{"class":264},[220,7488,7489],{"class":230},"\"#00ffff\"",[220,7491,5568],{"class":226},[220,7493,353],{"class":264},[220,7495,7496],{"class":230},"\"0.6\"",[220,7498,7499],{"class":226}," :center",[220,7501,353],{"class":264},[220,7503,7504],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,7506,7050],{"class":226},[220,7508,353],{"class":264},[220,7510,7511],{"class":230},"\"screen\"",[220,7513,386],{"class":264},[220,7515,7516,7518,7520,7522,7524,7527,7529,7531,7533,7535,7537,7540,7542,7544,7547],{"class":222,"line":644},[220,7517,364],{"class":264},[220,7519,2553],{"class":346},[220,7521,1588],{"class":226},[220,7523,353],{"class":264},[220,7525,7526],{"class":230},"\"#ff00ff\"",[220,7528,5568],{"class":226},[220,7530,353],{"class":264},[220,7532,7496],{"class":230},[220,7534,7499],{"class":226},[220,7536,353],{"class":264},[220,7538,7539],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,7541,7050],{"class":226},[220,7543,353],{"class":264},[220,7545,7546],{"class":230},"\"difference\"",[220,7548,386],{"class":264},[220,7550,7551,7553,7555],{"class":222,"line":650},[220,7552,402],{"class":264},[220,7554,347],{"class":346},[220,7556,359],{"class":264},[212,7558,7560],{"className":409,"code":7559,"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,7561,7562,7570,7578,7582,7632,7676],{"__ignoreMap":178},[220,7563,7564,7566,7568],{"class":222,"line":223},[220,7565,343],{"class":264},[220,7567,347],{"class":420},[220,7569,359],{"class":264},[220,7571,7572,7574,7576],{"class":222,"line":179},[220,7573,364],{"class":264},[220,7575,367],{"class":420},[220,7577,386],{"class":264},[220,7579,7580],{"class":222,"line":389},[220,7581,647],{"emptyLinePlaceholder":194},[220,7583,7584,7586,7588,7590,7592,7594,7596,7598,7600,7603,7605,7608,7610,7613,7616,7619,7621,7624,7626,7628,7630],{"class":222,"line":399},[220,7585,364],{"class":264},[220,7587,2553],{"class":420},[220,7589,1588],{"class":226},[220,7591,353],{"class":260},[220,7593,7489],{"class":230},[220,7595,5568],{"class":226},[220,7597,353],{"class":260},[220,7599,743],{"class":264},[220,7601,7602],{"class":420},"0.6",[220,7604,2914],{"class":264},[220,7606,7607],{"class":226},"center",[220,7609,353],{"class":260},[220,7611,7612],{"class":264},"{{ x: ",[220,7614,7615],{"class":420},"0.4",[220,7617,7618],{"class":264},", y: ",[220,7620,7120],{"class":420},[220,7622,7623],{"class":264}," }} ",[220,7625,6991],{"class":226},[220,7627,353],{"class":260},[220,7629,7511],{"class":230},[220,7631,386],{"class":264},[220,7633,7634,7636,7638,7640,7642,7644,7646,7648,7650,7652,7654,7656,7658,7660,7662,7664,7666,7668,7670,7672,7674],{"class":222,"line":644},[220,7635,364],{"class":264},[220,7637,2553],{"class":420},[220,7639,1588],{"class":226},[220,7641,353],{"class":260},[220,7643,7526],{"class":230},[220,7645,5568],{"class":226},[220,7647,353],{"class":260},[220,7649,743],{"class":264},[220,7651,7602],{"class":420},[220,7653,2914],{"class":264},[220,7655,7607],{"class":226},[220,7657,353],{"class":260},[220,7659,7612],{"class":264},[220,7661,7602],{"class":420},[220,7663,7618],{"class":264},[220,7665,7120],{"class":420},[220,7667,7623],{"class":264},[220,7669,6991],{"class":226},[220,7671,353],{"class":260},[220,7673,7546],{"class":230},[220,7675,386],{"class":264},[220,7677,7678,7680,7682],{"class":222,"line":650},[220,7679,402],{"class":264},[220,7681,347],{"class":420},[220,7683,359],{"class":264},[212,7685,7686],{"className":468,"code":7559,"language":469,"meta":178,"style":178},[99,7687,7688,7696,7704,7708,7752,7796],{"__ignoreMap":178},[220,7689,7690,7692,7694],{"class":222,"line":223},[220,7691,343],{"class":264},[220,7693,347],{"class":420},[220,7695,359],{"class":264},[220,7697,7698,7700,7702],{"class":222,"line":179},[220,7699,364],{"class":264},[220,7701,367],{"class":420},[220,7703,386],{"class":264},[220,7705,7706],{"class":222,"line":389},[220,7707,647],{"emptyLinePlaceholder":194},[220,7709,7710,7712,7714,7716,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750],{"class":222,"line":399},[220,7711,364],{"class":264},[220,7713,2553],{"class":420},[220,7715,1588],{"class":226},[220,7717,353],{"class":260},[220,7719,7489],{"class":230},[220,7721,5568],{"class":226},[220,7723,353],{"class":260},[220,7725,743],{"class":264},[220,7727,7602],{"class":420},[220,7729,2914],{"class":264},[220,7731,7607],{"class":226},[220,7733,353],{"class":260},[220,7735,7612],{"class":264},[220,7737,7615],{"class":420},[220,7739,7618],{"class":264},[220,7741,7120],{"class":420},[220,7743,7623],{"class":264},[220,7745,6991],{"class":226},[220,7747,353],{"class":260},[220,7749,7511],{"class":230},[220,7751,386],{"class":264},[220,7753,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792,7794],{"class":222,"line":644},[220,7755,364],{"class":264},[220,7757,2553],{"class":420},[220,7759,1588],{"class":226},[220,7761,353],{"class":260},[220,7763,7526],{"class":230},[220,7765,5568],{"class":226},[220,7767,353],{"class":260},[220,7769,743],{"class":264},[220,7771,7602],{"class":420},[220,7773,2914],{"class":264},[220,7775,7607],{"class":226},[220,7777,353],{"class":260},[220,7779,7612],{"class":264},[220,7781,7602],{"class":420},[220,7783,7618],{"class":264},[220,7785,7120],{"class":420},[220,7787,7623],{"class":264},[220,7789,6991],{"class":226},[220,7791,353],{"class":260},[220,7793,7546],{"class":230},[220,7795,386],{"class":264},[220,7797,7798,7800,7802],{"class":222,"line":650},[220,7799,402],{"class":264},[220,7801,347],{"class":420},[220,7803,359],{"class":264},[212,7805,7806],{"className":468,"code":7559,"language":469,"meta":178,"style":178},[99,7807,7808,7816,7824,7828,7872,7916],{"__ignoreMap":178},[220,7809,7810,7812,7814],{"class":222,"line":223},[220,7811,343],{"class":264},[220,7813,347],{"class":420},[220,7815,359],{"class":264},[220,7817,7818,7820,7822],{"class":222,"line":179},[220,7819,364],{"class":264},[220,7821,367],{"class":420},[220,7823,386],{"class":264},[220,7825,7826],{"class":222,"line":389},[220,7827,647],{"emptyLinePlaceholder":194},[220,7829,7830,7832,7834,7836,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870],{"class":222,"line":399},[220,7831,364],{"class":264},[220,7833,2553],{"class":420},[220,7835,1588],{"class":226},[220,7837,353],{"class":260},[220,7839,7489],{"class":230},[220,7841,5568],{"class":226},[220,7843,353],{"class":260},[220,7845,743],{"class":264},[220,7847,7602],{"class":420},[220,7849,2914],{"class":264},[220,7851,7607],{"class":226},[220,7853,353],{"class":260},[220,7855,7612],{"class":264},[220,7857,7615],{"class":420},[220,7859,7618],{"class":264},[220,7861,7120],{"class":420},[220,7863,7623],{"class":264},[220,7865,6991],{"class":226},[220,7867,353],{"class":260},[220,7869,7511],{"class":230},[220,7871,386],{"class":264},[220,7873,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914],{"class":222,"line":644},[220,7875,364],{"class":264},[220,7877,2553],{"class":420},[220,7879,1588],{"class":226},[220,7881,353],{"class":260},[220,7883,7526],{"class":230},[220,7885,5568],{"class":226},[220,7887,353],{"class":260},[220,7889,743],{"class":264},[220,7891,7602],{"class":420},[220,7893,2914],{"class":264},[220,7895,7607],{"class":226},[220,7897,353],{"class":260},[220,7899,7612],{"class":264},[220,7901,7602],{"class":420},[220,7903,7618],{"class":264},[220,7905,7120],{"class":420},[220,7907,7623],{"class":264},[220,7909,6991],{"class":226},[220,7911,353],{"class":260},[220,7913,7546],{"class":230},[220,7915,386],{"class":264},[220,7917,7918,7920,7922],{"class":222,"line":650},[220,7919,402],{"class":264},[220,7921,347],{"class":420},[220,7923,359],{"class":264},[212,7925,7927],{"className":251,"code":7926,"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,7928,7929,7943,7947,7955,7987,8017,8021],{"__ignoreMap":178},[220,7930,7931,7933,7935,7937,7939,7941],{"class":222,"line":223},[220,7932,1735],{"class":260},[220,7934,1738],{"class":420},[220,7936,1741],{"class":260},[220,7938,1744],{"class":260},[220,7940,1747],{"class":226},[220,7942,1750],{"class":264},[220,7944,7945],{"class":222,"line":179},[220,7946,1765],{"class":264},[220,7948,7949,7951,7953],{"class":222,"line":389},[220,7950,1770],{"class":264},[220,7952,2462],{"class":230},[220,7954,5914],{"class":264},[220,7956,7957,7959,7961,7963,7966,7968,7970,7973,7975,7977,7979,7982,7985],{"class":222,"line":399},[220,7958,1770],{"class":264},[220,7960,3206],{"class":230},[220,7962,1776],{"class":264},[220,7964,7965],{"class":230},"'#00ffff'",[220,7967,5932],{"class":264},[220,7969,7602],{"class":420},[220,7971,7972],{"class":264},", center: { x: ",[220,7974,7615],{"class":420},[220,7976,7618],{"class":264},[220,7978,7120],{"class":420},[220,7980,7981],{"class":264}," }, blendMode: ",[220,7983,7984],{"class":230},"'screen'",[220,7986,5937],{"class":264},[220,7988,7989,7991,7993,7995,7998,8000,8002,8004,8006,8008,8010,8012,8015],{"class":222,"line":644},[220,7990,1770],{"class":264},[220,7992,3206],{"class":230},[220,7994,1776],{"class":264},[220,7996,7997],{"class":230},"'#ff00ff'",[220,7999,5932],{"class":264},[220,8001,7602],{"class":420},[220,8003,7972],{"class":264},[220,8005,7602],{"class":420},[220,8007,7618],{"class":264},[220,8009,7120],{"class":420},[220,8011,7981],{"class":264},[220,8013,8014],{"class":230},"'difference'",[220,8016,1782],{"class":264},[220,8018,8019],{"class":222,"line":650},[220,8020,1787],{"class":264},[220,8022,8023],{"class":222,"line":656},[220,8024,1792],{"class":264},[19,8026],{":preset":8027},"{\"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,8029,8030],{"id":2921},"Opacity",[15,8032,8033,8034,8036,8037,8040,8041,8044],{},"Control layer transparency with the ",[99,8035,2921],{}," prop. Values range from ",[99,8038,8039],{},"0"," (fully transparent) to ",[99,8042,8043],{},"1"," (fully opaque):",[246,8046,8047,8107,8172,8236,8300],{":tabs":1557},[212,8048,8050],{"className":334,"code":8049,"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,8051,8052,8060,8068,8072,8099],{"__ignoreMap":178},[220,8053,8054,8056,8058],{"class":222,"line":223},[220,8055,343],{"class":264},[220,8057,347],{"class":346},[220,8059,359],{"class":264},[220,8061,8062,8064,8066],{"class":222,"line":179},[220,8063,364],{"class":264},[220,8065,367],{"class":346},[220,8067,386],{"class":264},[220,8069,8070],{"class":222,"line":389},[220,8071,647],{"emptyLinePlaceholder":194},[220,8073,8074,8076,8078,8080,8082,8084,8086,8088,8090,8093,8095,8097],{"class":222,"line":399},[220,8075,364],{"class":264},[220,8077,2553],{"class":346},[220,8079,1588],{"class":226},[220,8081,353],{"class":264},[220,8083,2560],{"class":230},[220,8085,5568],{"class":226},[220,8087,353],{"class":264},[220,8089,5573],{"class":230},[220,8091,8092],{"class":226}," opacity",[220,8094,353],{"class":264},[220,8096,7047],{"class":230},[220,8098,386],{"class":264},[220,8100,8101,8103,8105],{"class":222,"line":644},[220,8102,402],{"class":264},[220,8104,347],{"class":346},[220,8106,359],{"class":264},[212,8108,8110],{"className":409,"code":8109,"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,8111,8112,8120,8128,8132,8164],{"__ignoreMap":178},[220,8113,8114,8116,8118],{"class":222,"line":223},[220,8115,343],{"class":264},[220,8117,347],{"class":420},[220,8119,359],{"class":264},[220,8121,8122,8124,8126],{"class":222,"line":179},[220,8123,364],{"class":264},[220,8125,367],{"class":420},[220,8127,386],{"class":264},[220,8129,8130],{"class":222,"line":389},[220,8131,647],{"emptyLinePlaceholder":194},[220,8133,8134,8136,8138,8140,8142,8144,8146,8148,8150,8152,8154,8156,8158,8160,8162],{"class":222,"line":399},[220,8135,364],{"class":264},[220,8137,2553],{"class":420},[220,8139,1588],{"class":226},[220,8141,353],{"class":260},[220,8143,2560],{"class":230},[220,8145,5568],{"class":226},[220,8147,353],{"class":260},[220,8149,743],{"class":264},[220,8151,5665],{"class":420},[220,8153,2914],{"class":264},[220,8155,2921],{"class":226},[220,8157,353],{"class":260},[220,8159,743],{"class":264},[220,8161,7120],{"class":420},[220,8163,5668],{"class":264},[220,8165,8166,8168,8170],{"class":222,"line":644},[220,8167,402],{"class":264},[220,8169,347],{"class":420},[220,8171,359],{"class":264},[212,8173,8174],{"className":468,"code":8109,"language":469,"meta":178,"style":178},[99,8175,8176,8184,8192,8196,8228],{"__ignoreMap":178},[220,8177,8178,8180,8182],{"class":222,"line":223},[220,8179,343],{"class":264},[220,8181,347],{"class":420},[220,8183,359],{"class":264},[220,8185,8186,8188,8190],{"class":222,"line":179},[220,8187,364],{"class":264},[220,8189,367],{"class":420},[220,8191,386],{"class":264},[220,8193,8194],{"class":222,"line":389},[220,8195,647],{"emptyLinePlaceholder":194},[220,8197,8198,8200,8202,8204,8206,8208,8210,8212,8214,8216,8218,8220,8222,8224,8226],{"class":222,"line":399},[220,8199,364],{"class":264},[220,8201,2553],{"class":420},[220,8203,1588],{"class":226},[220,8205,353],{"class":260},[220,8207,2560],{"class":230},[220,8209,5568],{"class":226},[220,8211,353],{"class":260},[220,8213,743],{"class":264},[220,8215,5665],{"class":420},[220,8217,2914],{"class":264},[220,8219,2921],{"class":226},[220,8221,353],{"class":260},[220,8223,743],{"class":264},[220,8225,7120],{"class":420},[220,8227,5668],{"class":264},[220,8229,8230,8232,8234],{"class":222,"line":644},[220,8231,402],{"class":264},[220,8233,347],{"class":420},[220,8235,359],{"class":264},[212,8237,8238],{"className":468,"code":8109,"language":469,"meta":178,"style":178},[99,8239,8240,8248,8256,8260,8292],{"__ignoreMap":178},[220,8241,8242,8244,8246],{"class":222,"line":223},[220,8243,343],{"class":264},[220,8245,347],{"class":420},[220,8247,359],{"class":264},[220,8249,8250,8252,8254],{"class":222,"line":179},[220,8251,364],{"class":264},[220,8253,367],{"class":420},[220,8255,386],{"class":264},[220,8257,8258],{"class":222,"line":389},[220,8259,647],{"emptyLinePlaceholder":194},[220,8261,8262,8264,8266,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290],{"class":222,"line":399},[220,8263,364],{"class":264},[220,8265,2553],{"class":420},[220,8267,1588],{"class":226},[220,8269,353],{"class":260},[220,8271,2560],{"class":230},[220,8273,5568],{"class":226},[220,8275,353],{"class":260},[220,8277,743],{"class":264},[220,8279,5665],{"class":420},[220,8281,2914],{"class":264},[220,8283,2921],{"class":226},[220,8285,353],{"class":260},[220,8287,743],{"class":264},[220,8289,7120],{"class":420},[220,8291,5668],{"class":264},[220,8293,8294,8296,8298],{"class":222,"line":644},[220,8295,402],{"class":264},[220,8297,347],{"class":420},[220,8299,359],{"class":264},[212,8301,8303],{"className":251,"code":8302,"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,8304,8305,8319,8323,8331,8352,8356],{"__ignoreMap":178},[220,8306,8307,8309,8311,8313,8315,8317],{"class":222,"line":223},[220,8308,1735],{"class":260},[220,8310,1738],{"class":420},[220,8312,1741],{"class":260},[220,8314,1744],{"class":260},[220,8316,1747],{"class":226},[220,8318,1750],{"class":264},[220,8320,8321],{"class":222,"line":179},[220,8322,1765],{"class":264},[220,8324,8325,8327,8329],{"class":222,"line":389},[220,8326,1770],{"class":264},[220,8328,2462],{"class":230},[220,8330,5914],{"class":264},[220,8332,8333,8335,8337,8339,8341,8343,8345,8348,8350],{"class":222,"line":399},[220,8334,1770],{"class":264},[220,8336,3206],{"class":230},[220,8338,1776],{"class":264},[220,8340,3217],{"class":230},[220,8342,5932],{"class":264},[220,8344,5665],{"class":420},[220,8346,8347],{"class":264},", opacity: ",[220,8349,7120],{"class":420},[220,8351,1782],{"class":264},[220,8353,8354],{"class":222,"line":644},[220,8355,1787],{"class":264},[220,8357,8358],{"class":222,"line":650},[220,8359,1792],{"class":264},[19,8361],{":preset":8362},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,8364,8365],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,8367,8369],{"id":8368},"visibility","Visibility",[15,8371,6988,8372,8374,8375,8377,8378,8380],{},[99,8373,2711],{}," prop that defaults to ",[99,8376,2332],{},". Setting it to ",[99,8379,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,8382,8384],{"className":409,"code":8383,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,8385,8386],{"__ignoreMap":178},[220,8387,8388,8390,8392,8394,8396,8398,8400],{"class":222,"line":223},[220,8389,343],{"class":264},[220,8391,2553],{"class":420},[220,8393,2618],{"class":226},[220,8395,353],{"class":260},[220,8397,743],{"class":264},[220,8399,2629],{"class":420},[220,8401,5668],{"class":264},[15,8403,8404,8405,8408,8409,8412],{},"This is different from ",[99,8406,8407],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,8410,8411],{},"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,8414,8416],{"id":8415},"masking","Masking",[15,8418,8419,8420,8423,8424,8427,8428,8431],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,8421,8422],{},"id"," property (",[99,8425,8426],{},"string",") and then set ",[99,8429,8430],{},"maskSource"," to that ID on another component to use it as a mask.",[15,8433,8434,8435,8437],{},"Masks typically have ",[99,8436,8411],{}," so they don't appear in the final output—they only control visibility of other components:",[246,8439,8440,8520,8609,8695,8781],{":tabs":1557},[212,8441,8443],{"className":334,"code":8442,"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,8444,8445,8453,8458,8488,8492,8497,8512],{"__ignoreMap":178},[220,8446,8447,8449,8451],{"class":222,"line":223},[220,8448,343],{"class":264},[220,8450,347],{"class":346},[220,8452,359],{"class":264},[220,8454,8455],{"class":222,"line":179},[220,8456,8457],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,8459,8460,8462,8464,8467,8469,8472,8474,8476,8478,8481,8483,8486],{"class":222,"line":389},[220,8461,364],{"class":264},[220,8463,2553],{"class":346},[220,8465,8466],{"class":226}," id",[220,8468,353],{"class":264},[220,8470,8471],{"class":230},"\"myMask\"",[220,8473,5568],{"class":226},[220,8475,353],{"class":264},[220,8477,5573],{"class":230},[220,8479,8480],{"class":226}," :visible",[220,8482,353],{"class":264},[220,8484,8485],{"class":230},"\"false\"",[220,8487,386],{"class":264},[220,8489,8490],{"class":222,"line":399},[220,8491,647],{"emptyLinePlaceholder":194},[220,8493,8494],{"class":222,"line":644},[220,8495,8496],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,8498,8499,8501,8503,8506,8508,8510],{"class":222,"line":650},[220,8500,364],{"class":264},[220,8502,367],{"class":346},[220,8504,8505],{"class":226}," maskSource",[220,8507,353],{"class":264},[220,8509,8471],{"class":230},[220,8511,386],{"class":264},[220,8513,8514,8516,8518],{"class":222,"line":656},[220,8515,402],{"class":264},[220,8517,347],{"class":346},[220,8519,359],{"class":264},[212,8521,8523],{"className":409,"code":8522,"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,8524,8525,8533,8542,8574,8578,8587,8601],{"__ignoreMap":178},[220,8526,8527,8529,8531],{"class":222,"line":223},[220,8528,343],{"class":264},[220,8530,347],{"class":420},[220,8532,359],{"class":264},[220,8534,8535,8537,8540],{"class":222,"line":179},[220,8536,1999],{"class":264},[220,8538,8539],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,8541,749],{"class":264},[220,8543,8544,8546,8548,8550,8552,8554,8556,8558,8560,8562,8564,8566,8568,8570,8572],{"class":222,"line":389},[220,8545,364],{"class":264},[220,8547,2553],{"class":420},[220,8549,8466],{"class":226},[220,8551,353],{"class":260},[220,8553,8471],{"class":230},[220,8555,5568],{"class":226},[220,8557,353],{"class":260},[220,8559,743],{"class":264},[220,8561,5665],{"class":420},[220,8563,2914],{"class":264},[220,8565,2711],{"class":226},[220,8567,353],{"class":260},[220,8569,743],{"class":264},[220,8571,2629],{"class":420},[220,8573,5668],{"class":264},[220,8575,8576],{"class":222,"line":399},[220,8577,647],{"emptyLinePlaceholder":194},[220,8579,8580,8582,8585],{"class":222,"line":644},[220,8581,1999],{"class":264},[220,8583,8584],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,8586,749],{"class":264},[220,8588,8589,8591,8593,8595,8597,8599],{"class":222,"line":650},[220,8590,364],{"class":264},[220,8592,367],{"class":420},[220,8594,8505],{"class":226},[220,8596,353],{"class":260},[220,8598,8471],{"class":230},[220,8600,386],{"class":264},[220,8602,8603,8605,8607],{"class":222,"line":656},[220,8604,402],{"class":264},[220,8606,347],{"class":420},[220,8608,359],{"class":264},[212,8610,8611],{"className":468,"code":8522,"language":469,"meta":178,"style":178},[99,8612,8613,8621,8629,8661,8665,8673,8687],{"__ignoreMap":178},[220,8614,8615,8617,8619],{"class":222,"line":223},[220,8616,343],{"class":264},[220,8618,347],{"class":420},[220,8620,359],{"class":264},[220,8622,8623,8625,8627],{"class":222,"line":179},[220,8624,1999],{"class":264},[220,8626,8539],{"class":609},[220,8628,749],{"class":264},[220,8630,8631,8633,8635,8637,8639,8641,8643,8645,8647,8649,8651,8653,8655,8657,8659],{"class":222,"line":389},[220,8632,364],{"class":264},[220,8634,2553],{"class":420},[220,8636,8466],{"class":226},[220,8638,353],{"class":260},[220,8640,8471],{"class":230},[220,8642,5568],{"class":226},[220,8644,353],{"class":260},[220,8646,743],{"class":264},[220,8648,5665],{"class":420},[220,8650,2914],{"class":264},[220,8652,2711],{"class":226},[220,8654,353],{"class":260},[220,8656,743],{"class":264},[220,8658,2629],{"class":420},[220,8660,5668],{"class":264},[220,8662,8663],{"class":222,"line":399},[220,8664,647],{"emptyLinePlaceholder":194},[220,8666,8667,8669,8671],{"class":222,"line":644},[220,8668,1999],{"class":264},[220,8670,8584],{"class":609},[220,8672,749],{"class":264},[220,8674,8675,8677,8679,8681,8683,8685],{"class":222,"line":650},[220,8676,364],{"class":264},[220,8678,367],{"class":420},[220,8680,8505],{"class":226},[220,8682,353],{"class":260},[220,8684,8471],{"class":230},[220,8686,386],{"class":264},[220,8688,8689,8691,8693],{"class":222,"line":656},[220,8690,402],{"class":264},[220,8692,347],{"class":420},[220,8694,359],{"class":264},[212,8696,8697],{"className":468,"code":8522,"language":469,"meta":178,"style":178},[99,8698,8699,8707,8715,8747,8751,8759,8773],{"__ignoreMap":178},[220,8700,8701,8703,8705],{"class":222,"line":223},[220,8702,343],{"class":264},[220,8704,347],{"class":420},[220,8706,359],{"class":264},[220,8708,8709,8711,8713],{"class":222,"line":179},[220,8710,1999],{"class":264},[220,8712,8539],{"class":609},[220,8714,749],{"class":264},[220,8716,8717,8719,8721,8723,8725,8727,8729,8731,8733,8735,8737,8739,8741,8743,8745],{"class":222,"line":389},[220,8718,364],{"class":264},[220,8720,2553],{"class":420},[220,8722,8466],{"class":226},[220,8724,353],{"class":260},[220,8726,8471],{"class":230},[220,8728,5568],{"class":226},[220,8730,353],{"class":260},[220,8732,743],{"class":264},[220,8734,5665],{"class":420},[220,8736,2914],{"class":264},[220,8738,2711],{"class":226},[220,8740,353],{"class":260},[220,8742,743],{"class":264},[220,8744,2629],{"class":420},[220,8746,5668],{"class":264},[220,8748,8749],{"class":222,"line":399},[220,8750,647],{"emptyLinePlaceholder":194},[220,8752,8753,8755,8757],{"class":222,"line":644},[220,8754,1999],{"class":264},[220,8756,8584],{"class":609},[220,8758,749],{"class":264},[220,8760,8761,8763,8765,8767,8769,8771],{"class":222,"line":650},[220,8762,364],{"class":264},[220,8764,367],{"class":420},[220,8766,8505],{"class":226},[220,8768,353],{"class":260},[220,8770,8471],{"class":230},[220,8772,386],{"class":264},[220,8774,8775,8777,8779],{"class":222,"line":656},[220,8776,402],{"class":264},[220,8778,347],{"class":420},[220,8780,359],{"class":264},[212,8782,8784],{"className":251,"code":8783,"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,8785,8786,8800,8804,8826,8839,8843],{"__ignoreMap":178},[220,8787,8788,8790,8792,8794,8796,8798],{"class":222,"line":223},[220,8789,1735],{"class":260},[220,8791,1738],{"class":420},[220,8793,1741],{"class":260},[220,8795,1744],{"class":260},[220,8797,1747],{"class":226},[220,8799,1750],{"class":264},[220,8801,8802],{"class":222,"line":179},[220,8803,1765],{"class":264},[220,8805,8806,8808,8810,8812,8815,8817,8819,8822,8824],{"class":222,"line":389},[220,8807,1770],{"class":264},[220,8809,3206],{"class":230},[220,8811,3209],{"class":264},[220,8813,8814],{"class":230},"'myMask'",[220,8816,6907],{"class":264},[220,8818,5665],{"class":420},[220,8820,8821],{"class":264},", visible: ",[220,8823,2629],{"class":420},[220,8825,5937],{"class":264},[220,8827,8828,8830,8832,8835,8837],{"class":222,"line":399},[220,8829,1770],{"class":264},[220,8831,2462],{"class":230},[220,8833,8834],{"class":264},", props: { maskSource: ",[220,8836,8814],{"class":230},[220,8838,1782],{"class":264},[220,8840,8841],{"class":222,"line":644},[220,8842,1787],{"class":264},[220,8844,8845],{"class":222,"line":650},[220,8846,1792],{"class":264},[19,8848],{":preset":8849},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,8851,8852,8853,8855],{},"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,8854,8411],{},".",[3262,8857,8859],{"id":8858},"mask-types","Mask Types",[15,8861,8862,8863,8866],{},"Control how the mask is interpreted with the ",[99,8864,8865],{},"maskType"," prop:",[34,8868,8869,8877,8885,8893],{},[37,8870,8871,8876],{},[159,8872,8873],{},[99,8874,8875],{},"alpha",": Uses the mask's alpha channel (default)",[37,8878,8879,8884],{},[159,8880,8881],{},[99,8882,8883],{},"alphaInverted",": Uses the inverted alpha channel",[37,8886,8887,8892],{},[159,8888,8889],{},[99,8890,8891],{},"luminance",": Uses the mask's brightness",[37,8894,8895,8900],{},[159,8896,8897],{},[99,8898,8899],{},"luminanceInverted",": Uses the inverted brightness",[246,8902,8903,9052,9200,9344,9488],{":tabs":1557},[212,8904,8906],{"className":334,"code":8905,"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,8907,8908,8916,8924,8928,8933,8940,8950,8959,8968,8978,8982,8986,8991,8998,9008,9018,9027,9038,9043],{"__ignoreMap":178},[220,8909,8910,8912,8914],{"class":222,"line":223},[220,8911,343],{"class":264},[220,8913,347],{"class":346},[220,8915,359],{"class":264},[220,8917,8918,8920,8922],{"class":222,"line":179},[220,8919,364],{"class":264},[220,8921,367],{"class":346},[220,8923,386],{"class":264},[220,8925,8926],{"class":222,"line":389},[220,8927,647],{"emptyLinePlaceholder":194},[220,8929,8930],{"class":222,"line":399},[220,8931,8932],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,8934,8935,8937],{"class":222,"line":644},[220,8936,364],{"class":264},[220,8938,8939],{"class":346},"Checkerboard\n",[220,8941,8942,8945,8947],{"class":222,"line":650},[220,8943,8944],{"class":226}," id",[220,8946,353],{"class":264},[220,8948,8949],{"class":230},"\"mask\"\n",[220,8951,8952,8954,8956],{"class":222,"line":656},[220,8953,1194],{"class":226},[220,8955,353],{"class":264},[220,8957,8958],{"class":230},"\"#ffffff\"\n",[220,8960,8961,8963,8965],{"class":222,"line":673},[220,8962,1204],{"class":226},[220,8964,353],{"class":264},[220,8966,8967],{"class":230},"\"#111111\"\n",[220,8969,8970,8973,8975],{"class":222,"line":682},[220,8971,8972],{"class":226}," :visible",[220,8974,353],{"class":264},[220,8976,8977],{"class":230},"\"false\"\n",[220,8979,8980],{"class":222,"line":691},[220,8981,1234],{"class":264},[220,8983,8984],{"class":222,"line":696},[220,8985,647],{"emptyLinePlaceholder":194},[220,8987,8988],{"class":222,"line":702},[220,8989,8990],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,8992,8993,8995],{"class":222,"line":718},[220,8994,364],{"class":264},[220,8996,8997],{"class":346},"Circle\n",[220,8999,9000,9003,9005],{"class":222,"line":727},[220,9001,9002],{"class":226}," color",[220,9004,353],{"class":264},[220,9006,9007],{"class":230},"\"#ff0088\"\n",[220,9009,9010,9013,9015],{"class":222,"line":2664},[220,9011,9012],{"class":226}," radius",[220,9014,353],{"class":264},[220,9016,9017],{"class":230},"\"0.8\"\n",[220,9019,9020,9023,9025],{"class":222,"line":3522},[220,9021,9022],{"class":226}," maskSource",[220,9024,353],{"class":264},[220,9026,8949],{"class":230},[220,9028,9030,9033,9035],{"class":222,"line":9029},17,[220,9031,9032],{"class":226}," maskType",[220,9034,353],{"class":264},[220,9036,9037],{"class":230},"\"luminance\"\n",[220,9039,9041],{"class":222,"line":9040},18,[220,9042,1234],{"class":264},[220,9044,9046,9048,9050],{"class":222,"line":9045},19,[220,9047,402],{"class":264},[220,9049,347],{"class":346},[220,9051,359],{"class":264},[212,9053,9055],{"className":409,"code":9054,"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,9056,9057,9065,9073,9077,9086,9092,9100,9108,9116,9129,9133,9137,9146,9152,9160,9172,9180,9188,9192],{"__ignoreMap":178},[220,9058,9059,9061,9063],{"class":222,"line":223},[220,9060,343],{"class":264},[220,9062,347],{"class":420},[220,9064,359],{"class":264},[220,9066,9067,9069,9071],{"class":222,"line":179},[220,9068,364],{"class":264},[220,9070,367],{"class":420},[220,9072,386],{"class":264},[220,9074,9075],{"class":222,"line":389},[220,9076,647],{"emptyLinePlaceholder":194},[220,9078,9079,9081,9084],{"class":222,"line":399},[220,9080,1999],{"class":264},[220,9082,9083],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,9085,749],{"class":264},[220,9087,9088,9090],{"class":222,"line":644},[220,9089,364],{"class":264},[220,9091,8939],{"class":420},[220,9093,9094,9096,9098],{"class":222,"line":650},[220,9095,8944],{"class":226},[220,9097,353],{"class":260},[220,9099,8949],{"class":230},[220,9101,9102,9104,9106],{"class":222,"line":656},[220,9103,1194],{"class":226},[220,9105,353],{"class":260},[220,9107,8958],{"class":230},[220,9109,9110,9112,9114],{"class":222,"line":673},[220,9111,1204],{"class":226},[220,9113,353],{"class":260},[220,9115,8967],{"class":230},[220,9117,9118,9121,9123,9125,9127],{"class":222,"line":682},[220,9119,9120],{"class":226}," visible",[220,9122,353],{"class":260},[220,9124,743],{"class":264},[220,9126,2629],{"class":420},[220,9128,749],{"class":264},[220,9130,9131],{"class":222,"line":691},[220,9132,1234],{"class":264},[220,9134,9135],{"class":222,"line":696},[220,9136,647],{"emptyLinePlaceholder":194},[220,9138,9139,9141,9144],{"class":222,"line":702},[220,9140,1999],{"class":264},[220,9142,9143],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,9145,749],{"class":264},[220,9147,9148,9150],{"class":222,"line":718},[220,9149,364],{"class":264},[220,9151,8997],{"class":420},[220,9153,9154,9156,9158],{"class":222,"line":727},[220,9155,9002],{"class":226},[220,9157,353],{"class":260},[220,9159,9007],{"class":230},[220,9161,9162,9164,9166,9168,9170],{"class":222,"line":2664},[220,9163,9012],{"class":226},[220,9165,353],{"class":260},[220,9167,743],{"class":264},[220,9169,5665],{"class":420},[220,9171,749],{"class":264},[220,9173,9174,9176,9178],{"class":222,"line":3522},[220,9175,9022],{"class":226},[220,9177,353],{"class":260},[220,9179,8949],{"class":230},[220,9181,9182,9184,9186],{"class":222,"line":9029},[220,9183,9032],{"class":226},[220,9185,353],{"class":260},[220,9187,9037],{"class":230},[220,9189,9190],{"class":222,"line":9040},[220,9191,1234],{"class":264},[220,9193,9194,9196,9198],{"class":222,"line":9045},[220,9195,402],{"class":264},[220,9197,347],{"class":420},[220,9199,359],{"class":264},[212,9201,9202],{"className":468,"code":9054,"language":469,"meta":178,"style":178},[99,9203,9204,9212,9220,9224,9232,9238,9246,9254,9262,9274,9278,9282,9290,9296,9304,9316,9324,9332,9336],{"__ignoreMap":178},[220,9205,9206,9208,9210],{"class":222,"line":223},[220,9207,343],{"class":264},[220,9209,347],{"class":420},[220,9211,359],{"class":264},[220,9213,9214,9216,9218],{"class":222,"line":179},[220,9215,364],{"class":264},[220,9217,367],{"class":420},[220,9219,386],{"class":264},[220,9221,9222],{"class":222,"line":389},[220,9223,647],{"emptyLinePlaceholder":194},[220,9225,9226,9228,9230],{"class":222,"line":399},[220,9227,1999],{"class":264},[220,9229,9083],{"class":609},[220,9231,749],{"class":264},[220,9233,9234,9236],{"class":222,"line":644},[220,9235,364],{"class":264},[220,9237,8939],{"class":420},[220,9239,9240,9242,9244],{"class":222,"line":650},[220,9241,8944],{"class":226},[220,9243,353],{"class":260},[220,9245,8949],{"class":230},[220,9247,9248,9250,9252],{"class":222,"line":656},[220,9249,1194],{"class":226},[220,9251,353],{"class":260},[220,9253,8958],{"class":230},[220,9255,9256,9258,9260],{"class":222,"line":673},[220,9257,1204],{"class":226},[220,9259,353],{"class":260},[220,9261,8967],{"class":230},[220,9263,9264,9266,9268,9270,9272],{"class":222,"line":682},[220,9265,9120],{"class":226},[220,9267,353],{"class":260},[220,9269,743],{"class":264},[220,9271,2629],{"class":420},[220,9273,749],{"class":264},[220,9275,9276],{"class":222,"line":691},[220,9277,1234],{"class":264},[220,9279,9280],{"class":222,"line":696},[220,9281,647],{"emptyLinePlaceholder":194},[220,9283,9284,9286,9288],{"class":222,"line":702},[220,9285,1999],{"class":264},[220,9287,9143],{"class":609},[220,9289,749],{"class":264},[220,9291,9292,9294],{"class":222,"line":718},[220,9293,364],{"class":264},[220,9295,8997],{"class":420},[220,9297,9298,9300,9302],{"class":222,"line":727},[220,9299,9002],{"class":226},[220,9301,353],{"class":260},[220,9303,9007],{"class":230},[220,9305,9306,9308,9310,9312,9314],{"class":222,"line":2664},[220,9307,9012],{"class":226},[220,9309,353],{"class":260},[220,9311,743],{"class":264},[220,9313,5665],{"class":420},[220,9315,749],{"class":264},[220,9317,9318,9320,9322],{"class":222,"line":3522},[220,9319,9022],{"class":226},[220,9321,353],{"class":260},[220,9323,8949],{"class":230},[220,9325,9326,9328,9330],{"class":222,"line":9029},[220,9327,9032],{"class":226},[220,9329,353],{"class":260},[220,9331,9037],{"class":230},[220,9333,9334],{"class":222,"line":9040},[220,9335,1234],{"class":264},[220,9337,9338,9340,9342],{"class":222,"line":9045},[220,9339,402],{"class":264},[220,9341,347],{"class":420},[220,9343,359],{"class":264},[212,9345,9346],{"className":468,"code":9054,"language":469,"meta":178,"style":178},[99,9347,9348,9356,9364,9368,9376,9382,9390,9398,9406,9418,9422,9426,9434,9440,9448,9460,9468,9476,9480],{"__ignoreMap":178},[220,9349,9350,9352,9354],{"class":222,"line":223},[220,9351,343],{"class":264},[220,9353,347],{"class":420},[220,9355,359],{"class":264},[220,9357,9358,9360,9362],{"class":222,"line":179},[220,9359,364],{"class":264},[220,9361,367],{"class":420},[220,9363,386],{"class":264},[220,9365,9366],{"class":222,"line":389},[220,9367,647],{"emptyLinePlaceholder":194},[220,9369,9370,9372,9374],{"class":222,"line":399},[220,9371,1999],{"class":264},[220,9373,9083],{"class":609},[220,9375,749],{"class":264},[220,9377,9378,9380],{"class":222,"line":644},[220,9379,364],{"class":264},[220,9381,8939],{"class":420},[220,9383,9384,9386,9388],{"class":222,"line":650},[220,9385,8944],{"class":226},[220,9387,353],{"class":260},[220,9389,8949],{"class":230},[220,9391,9392,9394,9396],{"class":222,"line":656},[220,9393,1194],{"class":226},[220,9395,353],{"class":260},[220,9397,8958],{"class":230},[220,9399,9400,9402,9404],{"class":222,"line":673},[220,9401,1204],{"class":226},[220,9403,353],{"class":260},[220,9405,8967],{"class":230},[220,9407,9408,9410,9412,9414,9416],{"class":222,"line":682},[220,9409,9120],{"class":226},[220,9411,353],{"class":260},[220,9413,743],{"class":264},[220,9415,2629],{"class":420},[220,9417,749],{"class":264},[220,9419,9420],{"class":222,"line":691},[220,9421,1234],{"class":264},[220,9423,9424],{"class":222,"line":696},[220,9425,647],{"emptyLinePlaceholder":194},[220,9427,9428,9430,9432],{"class":222,"line":702},[220,9429,1999],{"class":264},[220,9431,9143],{"class":609},[220,9433,749],{"class":264},[220,9435,9436,9438],{"class":222,"line":718},[220,9437,364],{"class":264},[220,9439,8997],{"class":420},[220,9441,9442,9444,9446],{"class":222,"line":727},[220,9443,9002],{"class":226},[220,9445,353],{"class":260},[220,9447,9007],{"class":230},[220,9449,9450,9452,9454,9456,9458],{"class":222,"line":2664},[220,9451,9012],{"class":226},[220,9453,353],{"class":260},[220,9455,743],{"class":264},[220,9457,5665],{"class":420},[220,9459,749],{"class":264},[220,9461,9462,9464,9466],{"class":222,"line":3522},[220,9463,9022],{"class":226},[220,9465,353],{"class":260},[220,9467,8949],{"class":230},[220,9469,9470,9472,9474],{"class":222,"line":9029},[220,9471,9032],{"class":226},[220,9473,353],{"class":260},[220,9475,9037],{"class":230},[220,9477,9478],{"class":222,"line":9040},[220,9479,1234],{"class":264},[220,9481,9482,9484,9486],{"class":222,"line":9045},[220,9483,402],{"class":264},[220,9485,347],{"class":420},[220,9487,359],{"class":264},[212,9489,9491],{"className":251,"code":9490,"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,9492,9493,9507,9511,9519,9549,9576,9580],{"__ignoreMap":178},[220,9494,9495,9497,9499,9501,9503,9505],{"class":222,"line":223},[220,9496,1735],{"class":260},[220,9498,1738],{"class":420},[220,9500,1741],{"class":260},[220,9502,1744],{"class":260},[220,9504,1747],{"class":226},[220,9506,1750],{"class":264},[220,9508,9509],{"class":222,"line":179},[220,9510,1765],{"class":264},[220,9512,9513,9515,9517],{"class":222,"line":389},[220,9514,1770],{"class":264},[220,9516,2462],{"class":230},[220,9518,5914],{"class":264},[220,9520,9521,9523,9526,9528,9531,9534,9537,9540,9543,9545,9547],{"class":222,"line":399},[220,9522,1770],{"class":264},[220,9524,9525],{"class":230},"'Checkerboard'",[220,9527,3209],{"class":264},[220,9529,9530],{"class":230},"'mask'",[220,9532,9533],{"class":264},", props: { colorA: ",[220,9535,9536],{"class":230},"'#ffffff'",[220,9538,9539],{"class":264},", colorB: ",[220,9541,9542],{"class":230},"'#111111'",[220,9544,8821],{"class":264},[220,9546,2629],{"class":420},[220,9548,5937],{"class":264},[220,9550,9551,9553,9555,9557,9559,9561,9563,9566,9568,9571,9574],{"class":222,"line":644},[220,9552,1770],{"class":264},[220,9554,3206],{"class":230},[220,9556,1776],{"class":264},[220,9558,3217],{"class":230},[220,9560,5932],{"class":264},[220,9562,5665],{"class":420},[220,9564,9565],{"class":264},", maskSource: ",[220,9567,9530],{"class":230},[220,9569,9570],{"class":264},", maskType: ",[220,9572,9573],{"class":230},"'luminance'",[220,9575,1782],{"class":264},[220,9577,9578],{"class":222,"line":650},[220,9579,1787],{"class":264},[220,9581,9582],{"class":222,"line":656},[220,9583,1792],{"class":264},[19,9585],{":preset":9586},"{\"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,9588,6960],{},{"title":178,"searchDepth":179,"depth":179,"links":9590},[9591,9594,9595,9596],{"id":6984,"depth":179,"text":6985,"children":9592},[9593],{"id":7445,"depth":389,"text":7446},{"id":2921,"depth":179,"text":8030},{"id":8368,"depth":179,"text":8369},{"id":8415,"depth":179,"text":8416,"children":9597},[9598],{"id":8858,"depth":389,"text":8859},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":6973,"description":9600},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":9608,"title":1496,"body":9609,"category":9599,"description":11600,"exclude":190,"extension":191,"forceFramework":190,"icon":11601,"meta":11602,"navigation":194,"path":1495,"seo":11603,"stem":11604,"__hash__":11605},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":9610,"toc":11593},[9611,9614,9617,9621,9624,9841,9844,9848,9851,11010,11013,11018,11021,11025,11028,11033,11076,11081,11120,11125,11176,11181,11207,11210,11214,11217,11223,11553,11557,11560,11564,11567,11587,11590],[11,9612,1496],{"id":9613},"props-reactivity",[15,9615,9616],{},"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,9618,9620],{"id":9619},"basic-props","Basic Props",[15,9622,9623],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,9625,9626,9667,9710,9752,9794],{":tabs":1557},[212,9627,9629],{"className":334,"code":9628,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,9630,9631,9639,9659],{"__ignoreMap":178},[220,9632,9633,9635,9637],{"class":222,"line":223},[220,9634,343],{"class":264},[220,9636,347],{"class":346},[220,9638,359],{"class":264},[220,9640,9641,9643,9645,9647,9649,9651,9653,9655,9657],{"class":222,"line":179},[220,9642,364],{"class":264},[220,9644,2553],{"class":346},[220,9646,1588],{"class":226},[220,9648,353],{"class":264},[220,9650,2560],{"class":230},[220,9652,5568],{"class":226},[220,9654,353],{"class":264},[220,9656,7047],{"class":230},[220,9658,386],{"class":264},[220,9660,9661,9663,9665],{"class":222,"line":389},[220,9662,402],{"class":264},[220,9664,347],{"class":346},[220,9666,359],{"class":264},[212,9668,9670],{"className":409,"code":9669,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,9671,9672,9680,9702],{"__ignoreMap":178},[220,9673,9674,9676,9678],{"class":222,"line":223},[220,9675,343],{"class":264},[220,9677,347],{"class":420},[220,9679,359],{"class":264},[220,9681,9682,9684,9686,9688,9690,9692,9694,9696,9698,9700],{"class":222,"line":179},[220,9683,364],{"class":264},[220,9685,2553],{"class":420},[220,9687,1588],{"class":226},[220,9689,353],{"class":260},[220,9691,2560],{"class":230},[220,9693,5568],{"class":226},[220,9695,353],{"class":260},[220,9697,743],{"class":264},[220,9699,7120],{"class":420},[220,9701,5668],{"class":264},[220,9703,9704,9706,9708],{"class":222,"line":389},[220,9705,402],{"class":264},[220,9707,347],{"class":420},[220,9709,359],{"class":264},[212,9711,9712],{"className":468,"code":9669,"language":469,"meta":178,"style":178},[99,9713,9714,9722,9744],{"__ignoreMap":178},[220,9715,9716,9718,9720],{"class":222,"line":223},[220,9717,343],{"class":264},[220,9719,347],{"class":420},[220,9721,359],{"class":264},[220,9723,9724,9726,9728,9730,9732,9734,9736,9738,9740,9742],{"class":222,"line":179},[220,9725,364],{"class":264},[220,9727,2553],{"class":420},[220,9729,1588],{"class":226},[220,9731,353],{"class":260},[220,9733,2560],{"class":230},[220,9735,5568],{"class":226},[220,9737,353],{"class":260},[220,9739,743],{"class":264},[220,9741,7120],{"class":420},[220,9743,5668],{"class":264},[220,9745,9746,9748,9750],{"class":222,"line":389},[220,9747,402],{"class":264},[220,9749,347],{"class":420},[220,9751,359],{"class":264},[212,9753,9754],{"className":468,"code":9669,"language":469,"meta":178,"style":178},[99,9755,9756,9764,9786],{"__ignoreMap":178},[220,9757,9758,9760,9762],{"class":222,"line":223},[220,9759,343],{"class":264},[220,9761,347],{"class":420},[220,9763,359],{"class":264},[220,9765,9766,9768,9770,9772,9774,9776,9778,9780,9782,9784],{"class":222,"line":179},[220,9767,364],{"class":264},[220,9769,2553],{"class":420},[220,9771,1588],{"class":226},[220,9773,353],{"class":260},[220,9775,2560],{"class":230},[220,9777,5568],{"class":226},[220,9779,353],{"class":260},[220,9781,743],{"class":264},[220,9783,7120],{"class":420},[220,9785,5668],{"class":264},[220,9787,9788,9790,9792],{"class":222,"line":389},[220,9789,402],{"class":264},[220,9791,347],{"class":420},[220,9793,359],{"class":264},[212,9795,9797],{"className":251,"code":9796,"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,9798,9799,9813,9817,9833,9837],{"__ignoreMap":178},[220,9800,9801,9803,9805,9807,9809,9811],{"class":222,"line":223},[220,9802,1735],{"class":260},[220,9804,1738],{"class":420},[220,9806,1741],{"class":260},[220,9808,1744],{"class":260},[220,9810,1747],{"class":226},[220,9812,1750],{"class":264},[220,9814,9815],{"class":222,"line":179},[220,9816,1765],{"class":264},[220,9818,9819,9821,9823,9825,9827,9829,9831],{"class":222,"line":389},[220,9820,1770],{"class":264},[220,9822,3206],{"class":230},[220,9824,1776],{"class":264},[220,9826,3217],{"class":230},[220,9828,5932],{"class":264},[220,9830,7120],{"class":420},[220,9832,1782],{"class":264},[220,9834,9835],{"class":222,"line":399},[220,9836,1787],{"class":264},[220,9838,9839],{"class":222,"line":644},[220,9840,1792],{"class":264},[15,9842,9843],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,9845,9847],{"id":9846},"reactive-props","Reactive Props",[15,9849,9850],{},"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,9852,9853,10085,10374,10595,10868],{":tabs":1557},[212,9854,9856],{"className":334,"code":9855,"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,9857,9858,9868,9878,9889,9893,9910,9918,9922,9930,9938,9960,9980,10000,10008,10012,10020,10047,10069,10077],{"__ignoreMap":178},[220,9859,9860,9862,9864,9866],{"class":222,"line":223},[220,9861,343],{"class":264},[220,9863,2590],{"class":346},[220,9865,2593],{"class":226},[220,9867,359],{"class":264},[220,9869,9870,9872,9874,9876],{"class":222,"line":179},[220,9871,261],{"class":260},[220,9873,2602],{"class":264},[220,9875,268],{"class":260},[220,9877,2607],{"class":230},[220,9879,9880,9882,9885,9887],{"class":222,"line":389},[220,9881,261],{"class":260},[220,9883,9884],{"class":264}," { Shader, LinearGradient, Circle } ",[220,9886,268],{"class":260},[220,9888,271],{"class":230},[220,9890,9891],{"class":222,"line":399},[220,9892,647],{"emptyLinePlaceholder":194},[220,9894,9895,9897,9900,9902,9904,9906,9908],{"class":222,"line":644},[220,9896,1735],{"class":260},[220,9898,9899],{"class":420}," angle",[220,9901,1741],{"class":260},[220,9903,2623],{"class":226},[220,9905,2626],{"class":264},[220,9907,8039],{"class":420},[220,9909,2632],{"class":264},[220,9911,9912,9914,9916],{"class":222,"line":650},[220,9913,402],{"class":264},[220,9915,2590],{"class":346},[220,9917,359],{"class":264},[220,9919,9920],{"class":222,"line":656},[220,9921,647],{"emptyLinePlaceholder":194},[220,9923,9924,9926,9928],{"class":222,"line":673},[220,9925,343],{"class":264},[220,9927,2519],{"class":346},[220,9929,359],{"class":264},[220,9931,9932,9934,9936],{"class":222,"line":682},[220,9933,364],{"class":264},[220,9935,3398],{"class":346},[220,9937,359],{"class":264},[220,9939,9940,9942,9945,9948,9950,9953,9956,9958],{"class":222,"line":691},[220,9941,2550],{"class":264},[220,9943,9944],{"class":346},"button",[220,9946,9947],{"class":226}," @click",[220,9949,353],{"class":264},[220,9951,9952],{"class":230},"\"angle += 45\"",[220,9954,9955],{"class":264},">Rotate +45°\u003C\u002F",[220,9957,9944],{"class":346},[220,9959,359],{"class":264},[220,9961,9962,9964,9966,9968,9970,9973,9976,9978],{"class":222,"line":696},[220,9963,2550],{"class":264},[220,9965,9944],{"class":346},[220,9967,9947],{"class":226},[220,9969,353],{"class":264},[220,9971,9972],{"class":230},"\"angle -= 45\"",[220,9974,9975],{"class":264},">Rotate -45°\u003C\u002F",[220,9977,9944],{"class":346},[220,9979,359],{"class":264},[220,9981,9982,9984,9986,9988,9990,9993,9996,9998],{"class":222,"line":702},[220,9983,2550],{"class":264},[220,9985,9944],{"class":346},[220,9987,9947],{"class":226},[220,9989,353],{"class":264},[220,9991,9992],{"class":230},"\"angle = 0\"",[220,9994,9995],{"class":264},">Reset\u003C\u002F",[220,9997,9944],{"class":346},[220,9999,359],{"class":264},[220,10001,10002,10004,10006],{"class":222,"line":718},[220,10003,2567],{"class":264},[220,10005,3398],{"class":346},[220,10007,359],{"class":264},[220,10009,10010],{"class":222,"line":727},[220,10011,647],{"emptyLinePlaceholder":194},[220,10013,10014,10016,10018],{"class":222,"line":2664},[220,10015,364],{"class":264},[220,10017,347],{"class":346},[220,10019,359],{"class":264},[220,10021,10022,10024,10026,10028,10030,10033,10035,10037,10039,10041,10043,10045],{"class":222,"line":3522},[220,10023,2550],{"class":264},[220,10025,2553],{"class":346},[220,10027,8466],{"class":226},[220,10029,353],{"class":264},[220,10031,10032],{"class":230},"\"mask\"",[220,10034,5568],{"class":226},[220,10036,353],{"class":264},[220,10038,5573],{"class":230},[220,10040,8480],{"class":226},[220,10042,353],{"class":264},[220,10044,8485],{"class":230},[220,10046,386],{"class":264},[220,10048,10049,10051,10053,10056,10058,10061,10063,10065,10067],{"class":222,"line":9029},[220,10050,2550],{"class":264},[220,10052,367],{"class":346},[220,10054,10055],{"class":226}," :angle",[220,10057,353],{"class":264},[220,10059,10060],{"class":230},"\"angle\"",[220,10062,8505],{"class":226},[220,10064,353],{"class":264},[220,10066,10032],{"class":230},[220,10068,386],{"class":264},[220,10070,10071,10073,10075],{"class":222,"line":9040},[220,10072,2567],{"class":264},[220,10074,347],{"class":346},[220,10076,359],{"class":264},[220,10078,10079,10081,10083],{"class":222,"line":9045},[220,10080,402],{"class":264},[220,10082,2519],{"class":346},[220,10084,359],{"class":264},[212,10086,10088],{"className":409,"code":10087,"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,10089,10090,10100,10110,10114,10123,10149,10153,10159,10164,10172,10214,10250,10277,10286,10290,10298,10330,10351,10359,10364,10369],{"__ignoreMap":178},[220,10091,10092,10094,10096,10098],{"class":222,"line":223},[220,10093,261],{"class":260},[220,10095,2682],{"class":264},[220,10097,268],{"class":260},[220,10099,2687],{"class":230},[220,10101,10102,10104,10106,10108],{"class":222,"line":179},[220,10103,261],{"class":260},[220,10105,9884],{"class":264},[220,10107,268],{"class":260},[220,10109,287],{"class":230},[220,10111,10112],{"class":222,"line":389},[220,10113,647],{"emptyLinePlaceholder":194},[220,10115,10116,10118,10121],{"class":222,"line":399},[220,10117,2641],{"class":260},[220,10119,10120],{"class":226}," MyComponent",[220,10122,2647],{"class":264},[220,10124,10125,10127,10129,10132,10134,10137,10139,10141,10143,10145,10147],{"class":222,"line":644},[220,10126,2705],{"class":260},[220,10128,2708],{"class":264},[220,10130,10131],{"class":420},"angle",[220,10133,1895],{"class":264},[220,10135,10136],{"class":420},"setAngle",[220,10138,2719],{"class":264},[220,10140,353],{"class":260},[220,10142,2724],{"class":226},[220,10144,2626],{"class":264},[220,10146,8039],{"class":420},[220,10148,2632],{"class":264},[220,10150,10151],{"class":222,"line":650},[220,10152,647],{"emptyLinePlaceholder":194},[220,10154,10155,10157],{"class":222,"line":656},[220,10156,2739],{"class":260},[220,10158,2742],{"class":264},[220,10160,10161],{"class":222,"line":673},[220,10162,10163],{"class":264}," \u003C>\n",[220,10165,10166,10168,10170],{"class":222,"line":682},[220,10167,2813],{"class":264},[220,10169,3398],{"class":346},[220,10171,359],{"class":264},[220,10173,10174,10177,10179,10182,10184,10186,10188,10191,10193,10195,10198,10201,10204,10207,10210,10212],{"class":222,"line":691},[220,10175,10176],{"class":264}," \u003C",[220,10178,9944],{"class":346},[220,10180,10181],{"class":226}," onClick",[220,10183,353],{"class":260},[220,10185,2759],{"class":264},[220,10187,2762],{"class":260},[220,10189,10190],{"class":226}," setAngle",[220,10192,2626],{"class":264},[220,10194,56],{"class":3621},[220,10196,10197],{"class":260}," =>",[220,10199,10200],{"class":264}," a ",[220,10202,10203],{"class":260},"+",[220,10205,10206],{"class":420}," 45",[220,10208,10209],{"class":264},")}>Rotate +45°\u003C\u002F",[220,10211,9944],{"class":346},[220,10213,359],{"class":264},[220,10215,10216,10218,10220,10222,10224,10226,10228,10230,10232,10234,10236,10238,10241,10243,10246,10248],{"class":222,"line":696},[220,10217,10176],{"class":264},[220,10219,9944],{"class":346},[220,10221,10181],{"class":226},[220,10223,353],{"class":260},[220,10225,2759],{"class":264},[220,10227,2762],{"class":260},[220,10229,10190],{"class":226},[220,10231,2626],{"class":264},[220,10233,56],{"class":3621},[220,10235,10197],{"class":260},[220,10237,10200],{"class":264},[220,10239,10240],{"class":260},"-",[220,10242,10206],{"class":420},[220,10244,10245],{"class":264},")}>Rotate -45°\u003C\u002F",[220,10247,9944],{"class":346},[220,10249,359],{"class":264},[220,10251,10252,10254,10256,10258,10260,10262,10264,10266,10268,10270,10273,10275],{"class":222,"line":702},[220,10253,10176],{"class":264},[220,10255,9944],{"class":346},[220,10257,10181],{"class":226},[220,10259,353],{"class":260},[220,10261,2759],{"class":264},[220,10263,2762],{"class":260},[220,10265,10190],{"class":226},[220,10267,2626],{"class":264},[220,10269,8039],{"class":420},[220,10271,10272],{"class":264},")}>Reset\u003C\u002F",[220,10274,9944],{"class":346},[220,10276,359],{"class":264},[220,10278,10279,10282,10284],{"class":222,"line":718},[220,10280,10281],{"class":264}," \u003C\u002F",[220,10283,3398],{"class":346},[220,10285,359],{"class":264},[220,10287,10288],{"class":222,"line":727},[220,10289,647],{"emptyLinePlaceholder":194},[220,10291,10292,10294,10296],{"class":222,"line":2664},[220,10293,2813],{"class":264},[220,10295,347],{"class":420},[220,10297,359],{"class":264},[220,10299,10300,10302,10304,10306,10308,10310,10312,10314,10316,10318,10320,10322,10324,10326,10328],{"class":222,"line":3522},[220,10301,10176],{"class":264},[220,10303,2553],{"class":420},[220,10305,8466],{"class":226},[220,10307,353],{"class":260},[220,10309,10032],{"class":230},[220,10311,5568],{"class":226},[220,10313,353],{"class":260},[220,10315,743],{"class":264},[220,10317,5665],{"class":420},[220,10319,2914],{"class":264},[220,10321,2711],{"class":226},[220,10323,353],{"class":260},[220,10325,743],{"class":264},[220,10327,2629],{"class":420},[220,10329,5668],{"class":264},[220,10331,10332,10334,10336,10338,10340,10343,10345,10347,10349],{"class":222,"line":9029},[220,10333,10176],{"class":264},[220,10335,367],{"class":420},[220,10337,9899],{"class":226},[220,10339,353],{"class":260},[220,10341,10342],{"class":264},"{angle} ",[220,10344,8430],{"class":226},[220,10346,353],{"class":260},[220,10348,10032],{"class":230},[220,10350,386],{"class":264},[220,10352,10353,10355,10357],{"class":222,"line":9040},[220,10354,10281],{"class":264},[220,10356,347],{"class":420},[220,10358,359],{"class":264},[220,10360,10361],{"class":222,"line":9045},[220,10362,10363],{"class":264}," \u003C\u002F>\n",[220,10365,10367],{"class":222,"line":10366},20,[220,10368,2837],{"class":264},[220,10370,10372],{"class":222,"line":10371},21,[220,10373,749],{"class":264},[212,10375,10377],{"className":468,"code":10376,"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,10378,10379,10387,10392,10396,10401,10409,10413,10421,10455,10487,10518,10526,10530,10538,10570,10587],{"__ignoreMap":178},[220,10380,10381,10383,10385],{"class":222,"line":223},[220,10382,343],{"class":264},[220,10384,2590],{"class":346},[220,10386,359],{"class":264},[220,10388,10389],{"class":222,"line":179},[220,10390,10391],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,10393,10394],{"class":222,"line":389},[220,10395,647],{"emptyLinePlaceholder":194},[220,10397,10398],{"class":222,"line":399},[220,10399,10400],{"class":264}," let angle = 0\n",[220,10402,10403,10405,10407],{"class":222,"line":644},[220,10404,402],{"class":264},[220,10406,2590],{"class":346},[220,10408,359],{"class":264},[220,10410,10411],{"class":222,"line":650},[220,10412,647],{"emptyLinePlaceholder":194},[220,10414,10415,10417,10419],{"class":222,"line":656},[220,10416,343],{"class":264},[220,10418,3398],{"class":346},[220,10420,359],{"class":264},[220,10422,10423,10425,10427,10429,10431,10434,10436,10438,10440,10443,10446,10448,10451,10453],{"class":222,"line":673},[220,10424,364],{"class":264},[220,10426,9944],{"class":346},[220,10428,5424],{"class":226},[220,10430,1554],{"class":264},[220,10432,10433],{"class":226},"click",[220,10435,353],{"class":260},[220,10437,2759],{"class":264},[220,10439,2762],{"class":260},[220,10441,10442],{"class":264}," angle ",[220,10444,10445],{"class":260},"+=",[220,10447,10206],{"class":420},[220,10449,10450],{"class":264},"}>Rotate +45°\u003C\u002F",[220,10452,9944],{"class":346},[220,10454,359],{"class":264},[220,10456,10457,10459,10461,10463,10465,10467,10469,10471,10473,10475,10478,10480,10483,10485],{"class":222,"line":682},[220,10458,364],{"class":264},[220,10460,9944],{"class":346},[220,10462,5424],{"class":226},[220,10464,1554],{"class":264},[220,10466,10433],{"class":226},[220,10468,353],{"class":260},[220,10470,2759],{"class":264},[220,10472,2762],{"class":260},[220,10474,10442],{"class":264},[220,10476,10477],{"class":260},"-=",[220,10479,10206],{"class":420},[220,10481,10482],{"class":264},"}>Rotate -45°\u003C\u002F",[220,10484,9944],{"class":346},[220,10486,359],{"class":264},[220,10488,10489,10491,10493,10495,10497,10499,10501,10503,10505,10507,10509,10511,10514,10516],{"class":222,"line":691},[220,10490,364],{"class":264},[220,10492,9944],{"class":346},[220,10494,5424],{"class":226},[220,10496,1554],{"class":264},[220,10498,10433],{"class":226},[220,10500,353],{"class":260},[220,10502,2759],{"class":264},[220,10504,2762],{"class":260},[220,10506,10442],{"class":264},[220,10508,353],{"class":260},[220,10510,2794],{"class":420},[220,10512,10513],{"class":264},"}>Reset\u003C\u002F",[220,10515,9944],{"class":346},[220,10517,359],{"class":264},[220,10519,10520,10522,10524],{"class":222,"line":696},[220,10521,402],{"class":264},[220,10523,3398],{"class":346},[220,10525,359],{"class":264},[220,10527,10528],{"class":222,"line":702},[220,10529,647],{"emptyLinePlaceholder":194},[220,10531,10532,10534,10536],{"class":222,"line":718},[220,10533,343],{"class":264},[220,10535,347],{"class":420},[220,10537,359],{"class":264},[220,10539,10540,10542,10544,10546,10548,10550,10552,10554,10556,10558,10560,10562,10564,10566,10568],{"class":222,"line":727},[220,10541,364],{"class":264},[220,10543,2553],{"class":420},[220,10545,8466],{"class":226},[220,10547,353],{"class":260},[220,10549,10032],{"class":230},[220,10551,5568],{"class":226},[220,10553,353],{"class":260},[220,10555,743],{"class":264},[220,10557,5665],{"class":420},[220,10559,2914],{"class":264},[220,10561,2711],{"class":226},[220,10563,353],{"class":260},[220,10565,743],{"class":264},[220,10567,2629],{"class":420},[220,10569,5668],{"class":264},[220,10571,10572,10574,10576,10579,10581,10583,10585],{"class":222,"line":2664},[220,10573,364],{"class":264},[220,10575,367],{"class":420},[220,10577,10578],{"class":264}," {angle} ",[220,10580,8430],{"class":226},[220,10582,353],{"class":260},[220,10584,10032],{"class":230},[220,10586,386],{"class":264},[220,10588,10589,10591,10593],{"class":222,"line":3522},[220,10590,402],{"class":264},[220,10592,347],{"class":420},[220,10594,359],{"class":264},[212,10596,10598],{"className":468,"code":10597,"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,10599,10600,10610,10620,10624,10632,10656,10660,10666,10670,10678,10712,10746,10772,10780,10784,10792,10824,10848,10856,10860,10864],{"__ignoreMap":178},[220,10601,10602,10604,10606,10608],{"class":222,"line":223},[220,10603,261],{"class":260},[220,10605,2982],{"class":264},[220,10607,268],{"class":260},[220,10609,2987],{"class":230},[220,10611,10612,10614,10616,10618],{"class":222,"line":179},[220,10613,261],{"class":260},[220,10615,9884],{"class":264},[220,10617,268],{"class":260},[220,10619,319],{"class":230},[220,10621,10622],{"class":222,"line":389},[220,10623,647],{"emptyLinePlaceholder":194},[220,10625,10626,10628,10630],{"class":222,"line":399},[220,10627,2641],{"class":260},[220,10629,10120],{"class":226},[220,10631,2647],{"class":264},[220,10633,10634,10636,10638,10640,10642,10644,10646,10648,10650,10652,10654],{"class":222,"line":644},[220,10635,2705],{"class":260},[220,10637,2708],{"class":264},[220,10639,10131],{"class":420},[220,10641,1895],{"class":264},[220,10643,10136],{"class":420},[220,10645,2719],{"class":264},[220,10647,353],{"class":260},[220,10649,3018],{"class":226},[220,10651,2626],{"class":264},[220,10653,8039],{"class":420},[220,10655,2632],{"class":264},[220,10657,10658],{"class":222,"line":650},[220,10659,647],{"emptyLinePlaceholder":194},[220,10661,10662,10664],{"class":222,"line":656},[220,10663,2739],{"class":260},[220,10665,2742],{"class":264},[220,10667,10668],{"class":222,"line":673},[220,10669,10163],{"class":264},[220,10671,10672,10674,10676],{"class":222,"line":682},[220,10673,2813],{"class":264},[220,10675,3398],{"class":346},[220,10677,359],{"class":264},[220,10679,10680,10682,10684,10686,10688,10690,10692,10694,10696,10698,10700,10702,10704,10706,10708,10710],{"class":222,"line":691},[220,10681,10176],{"class":264},[220,10683,9944],{"class":346},[220,10685,10181],{"class":226},[220,10687,353],{"class":260},[220,10689,2759],{"class":264},[220,10691,2762],{"class":260},[220,10693,10190],{"class":226},[220,10695,2626],{"class":264},[220,10697,56],{"class":3621},[220,10699,10197],{"class":260},[220,10701,10200],{"class":264},[220,10703,10203],{"class":260},[220,10705,10206],{"class":420},[220,10707,10209],{"class":264},[220,10709,9944],{"class":346},[220,10711,359],{"class":264},[220,10713,10714,10716,10718,10720,10722,10724,10726,10728,10730,10732,10734,10736,10738,10740,10742,10744],{"class":222,"line":696},[220,10715,10176],{"class":264},[220,10717,9944],{"class":346},[220,10719,10181],{"class":226},[220,10721,353],{"class":260},[220,10723,2759],{"class":264},[220,10725,2762],{"class":260},[220,10727,10190],{"class":226},[220,10729,2626],{"class":264},[220,10731,56],{"class":3621},[220,10733,10197],{"class":260},[220,10735,10200],{"class":264},[220,10737,10240],{"class":260},[220,10739,10206],{"class":420},[220,10741,10245],{"class":264},[220,10743,9944],{"class":346},[220,10745,359],{"class":264},[220,10747,10748,10750,10752,10754,10756,10758,10760,10762,10764,10766,10768,10770],{"class":222,"line":702},[220,10749,10176],{"class":264},[220,10751,9944],{"class":346},[220,10753,10181],{"class":226},[220,10755,353],{"class":260},[220,10757,2759],{"class":264},[220,10759,2762],{"class":260},[220,10761,10190],{"class":226},[220,10763,2626],{"class":264},[220,10765,8039],{"class":420},[220,10767,10272],{"class":264},[220,10769,9944],{"class":346},[220,10771,359],{"class":264},[220,10773,10774,10776,10778],{"class":222,"line":718},[220,10775,10281],{"class":264},[220,10777,3398],{"class":346},[220,10779,359],{"class":264},[220,10781,10782],{"class":222,"line":727},[220,10783,647],{"emptyLinePlaceholder":194},[220,10785,10786,10788,10790],{"class":222,"line":2664},[220,10787,2813],{"class":264},[220,10789,347],{"class":420},[220,10791,359],{"class":264},[220,10793,10794,10796,10798,10800,10802,10804,10806,10808,10810,10812,10814,10816,10818,10820,10822],{"class":222,"line":3522},[220,10795,10176],{"class":264},[220,10797,2553],{"class":420},[220,10799,8466],{"class":226},[220,10801,353],{"class":260},[220,10803,10032],{"class":230},[220,10805,5568],{"class":226},[220,10807,353],{"class":260},[220,10809,743],{"class":264},[220,10811,5665],{"class":420},[220,10813,2914],{"class":264},[220,10815,2711],{"class":226},[220,10817,353],{"class":260},[220,10819,743],{"class":264},[220,10821,2629],{"class":420},[220,10823,5668],{"class":264},[220,10825,10826,10828,10830,10832,10834,10836,10838,10840,10842,10844,10846],{"class":222,"line":9029},[220,10827,10176],{"class":264},[220,10829,367],{"class":420},[220,10831,9899],{"class":226},[220,10833,353],{"class":260},[220,10835,743],{"class":264},[220,10837,10131],{"class":226},[220,10839,3933],{"class":264},[220,10841,8430],{"class":226},[220,10843,353],{"class":260},[220,10845,10032],{"class":230},[220,10847,386],{"class":264},[220,10849,10850,10852,10854],{"class":222,"line":9040},[220,10851,10281],{"class":264},[220,10853,347],{"class":420},[220,10855,359],{"class":264},[220,10857,10858],{"class":222,"line":9045},[220,10859,10363],{"class":264},[220,10861,10862],{"class":222,"line":10366},[220,10863,2837],{"class":264},[220,10865,10866],{"class":222,"line":10371},[220,10867,749],{"class":264},[212,10869,10871],{"className":251,"code":10870,"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,10872,10873,10884,10888,10902,10906,10926,10948,10952,10956,10960,10965,10985,10989,10994],{"__ignoreMap":178},[220,10874,10875,10877,10880,10882],{"class":222,"line":223},[220,10876,261],{"class":260},[220,10878,10879],{"class":264}," { createShader } ",[220,10881,268],{"class":260},[220,10883,4007],{"class":230},[220,10885,10886],{"class":222,"line":179},[220,10887,647],{"emptyLinePlaceholder":194},[220,10889,10890,10892,10894,10896,10898,10900],{"class":222,"line":389},[220,10891,1735],{"class":260},[220,10893,1738],{"class":420},[220,10895,1741],{"class":260},[220,10897,1744],{"class":260},[220,10899,1747],{"class":226},[220,10901,1750],{"class":264},[220,10903,10904],{"class":222,"line":399},[220,10905,1765],{"class":264},[220,10907,10908,10910,10912,10914,10916,10918,10920,10922,10924],{"class":222,"line":644},[220,10909,1770],{"class":264},[220,10911,3206],{"class":230},[220,10913,3209],{"class":264},[220,10915,9530],{"class":230},[220,10917,6907],{"class":264},[220,10919,5665],{"class":420},[220,10921,8821],{"class":264},[220,10923,2629],{"class":420},[220,10925,5937],{"class":264},[220,10927,10928,10930,10932,10934,10937,10940,10942,10944,10946],{"class":222,"line":650},[220,10929,1770],{"class":264},[220,10931,2462],{"class":230},[220,10933,3209],{"class":264},[220,10935,10936],{"class":230},"'gradient'",[220,10938,10939],{"class":264},", props: { angle: ",[220,10941,8039],{"class":420},[220,10943,9565],{"class":264},[220,10945,9530],{"class":230},[220,10947,1782],{"class":264},[220,10949,10950],{"class":222,"line":656},[220,10951,1787],{"class":264},[220,10953,10954],{"class":222,"line":673},[220,10955,1792],{"class":264},[220,10957,10958],{"class":222,"line":682},[220,10959,647],{"emptyLinePlaceholder":194},[220,10961,10962],{"class":222,"line":691},[220,10963,10964],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,10966,10967,10970,10973,10975,10977,10980,10982],{"class":222,"line":696},[220,10968,10969],{"class":264},"shader.",[220,10971,10972],{"class":226},"update",[220,10974,2626],{"class":264},[220,10976,10936],{"class":230},[220,10978,10979],{"class":264},", { angle: ",[220,10981,1295],{"class":420},[220,10983,10984],{"class":264}," })\n",[220,10986,10987],{"class":222,"line":702},[220,10988,647],{"emptyLinePlaceholder":194},[220,10990,10991],{"class":222,"line":718},[220,10992,10993],{"class":609},"\u002F\u002F Reset angle\n",[220,10995,10996,10998,11000,11002,11004,11006,11008],{"class":222,"line":727},[220,10997,10969],{"class":264},[220,10999,10972],{"class":226},[220,11001,2626],{"class":264},[220,11003,10936],{"class":230},[220,11005,10979],{"class":264},[220,11007,8039],{"class":420},[220,11009,10984],{"class":264},[15,11011,11012],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[11014,11015],"interactive-shader-demo",{":controls":11016,":preset":11017},"[{\"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,11019,11020],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,11022,11024],{"id":11023},"common-reactive-props","Common Reactive Props",[15,11026,11027],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,11029,11030,1554],{},[159,11031,11032],{},"Position and Size",[212,11034,11038],{"className":11035,"code":11036,"language":11037,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,11039,11040],{"__ignoreMap":178},[220,11041,11042,11044,11046,11048,11051,11053,11056,11059,11061,11063,11065,11067,11069,11072,11074],{"class":222,"line":223},[220,11043,343],{"class":264},[220,11045,2553],{"class":346},[220,11047,2791],{"class":264},[220,11049,11050],{"class":226},"radius",[220,11052,353],{"class":264},[220,11054,11055],{"class":230},"\"",[220,11057,11058],{"class":264},"size",[220,11060,11055],{"class":230},[220,11062,2791],{"class":264},[220,11064,7607],{"class":226},[220,11066,353],{"class":264},[220,11068,11055],{"class":230},[220,11070,11071],{"class":264},"{ x: posX, y: posY }",[220,11073,11055],{"class":230},[220,11075,386],{"class":264},[15,11077,11078,1554],{},[159,11079,11080],{},"Colors",[212,11082,11084],{"className":11035,"code":11083,"language":11037,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,11085,11086],{"__ignoreMap":178},[220,11087,11088,11090,11092,11094,11096,11098,11100,11103,11105,11107,11109,11111,11113,11116,11118],{"class":222,"line":223},[220,11089,343],{"class":264},[220,11091,367],{"class":346},[220,11093,2791],{"class":264},[220,11095,1863],{"class":226},[220,11097,353],{"class":264},[220,11099,11055],{"class":230},[220,11101,11102],{"class":264},"startColor",[220,11104,11055],{"class":230},[220,11106,2791],{"class":264},[220,11108,1867],{"class":226},[220,11110,353],{"class":264},[220,11112,11055],{"class":230},[220,11114,11115],{"class":264},"endColor",[220,11117,11055],{"class":230},[220,11119,386],{"class":264},[15,11121,11122,1554],{},[159,11123,11124],{},"Intensity and Strength",[212,11126,11128],{"className":11035,"code":11127,"language":11037,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,11129,11130,11153],{"__ignoreMap":178},[220,11131,11132,11134,11137,11139,11142,11144,11146,11149,11151],{"class":222,"line":223},[220,11133,343],{"class":264},[220,11135,11136],{"class":346},"Blur",[220,11138,2791],{"class":264},[220,11140,11141],{"class":226},"intensity",[220,11143,353],{"class":264},[220,11145,11055],{"class":230},[220,11147,11148],{"class":264},"blurAmount",[220,11150,11055],{"class":230},[220,11152,386],{"class":264},[220,11154,11155,11157,11160,11162,11165,11167,11169,11172,11174],{"class":222,"line":179},[220,11156,343],{"class":264},[220,11158,11159],{"class":346},"Glow",[220,11161,2791],{"class":264},[220,11163,11164],{"class":226},"strength",[220,11166,353],{"class":264},[220,11168,11055],{"class":230},[220,11170,11171],{"class":264},"glowPower",[220,11173,11055],{"class":230},[220,11175,386],{"class":264},[15,11177,11178,1554],{},[159,11179,11180],{},"Angles and Rotation",[212,11182,11184],{"className":11035,"code":11183,"language":11037,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,11185,11186],{"__ignoreMap":178},[220,11187,11188,11190,11192,11194,11196,11198,11200,11203,11205],{"class":222,"line":223},[220,11189,343],{"class":264},[220,11191,367],{"class":346},[220,11193,2791],{"class":264},[220,11195,10131],{"class":226},[220,11197,353],{"class":264},[220,11199,11055],{"class":230},[220,11201,11202],{"class":264},"rotation",[220,11204,11055],{"class":230},[220,11206,386],{"class":264},[15,11208,11209],{},"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,11211,11213],{"id":11212},"animating-props","Animating Props",[15,11215,11216],{},"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,11218,11219,11222],{},[159,11220,11221],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,11224,11226],{"className":409,"code":11225,"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,11227,11228,11238,11250,11260,11264,11272,11297,11301,11314,11319,11335,11344,11354,11374,11379,11395,11403,11412,11428,11432,11436,11440,11447,11452,11470,11475,11484,11514,11529,11538,11543,11548],{"__ignoreMap":178},[220,11229,11230,11232,11234,11236],{"class":222,"line":223},[220,11231,261],{"class":260},[220,11233,2682],{"class":264},[220,11235,268],{"class":260},[220,11237,2687],{"class":230},[220,11239,11240,11242,11245,11247],{"class":222,"line":179},[220,11241,261],{"class":260},[220,11243,11244],{"class":264}," { animate } ",[220,11246,268],{"class":260},[220,11248,11249],{"class":230}," 'motion'\n",[220,11251,11252,11254,11256,11258],{"class":222,"line":389},[220,11253,261],{"class":260},[220,11255,9884],{"class":264},[220,11257,268],{"class":260},[220,11259,287],{"class":230},[220,11261,11262],{"class":222,"line":399},[220,11263,647],{"emptyLinePlaceholder":194},[220,11265,11266,11268,11270],{"class":222,"line":644},[220,11267,2641],{"class":260},[220,11269,10120],{"class":226},[220,11271,2647],{"class":264},[220,11273,11274,11276,11278,11280,11282,11285,11287,11289,11291,11293,11295],{"class":222,"line":650},[220,11275,2705],{"class":260},[220,11277,2708],{"class":264},[220,11279,11050],{"class":420},[220,11281,1895],{"class":264},[220,11283,11284],{"class":420},"setRadius",[220,11286,2719],{"class":264},[220,11288,353],{"class":260},[220,11290,2724],{"class":226},[220,11292,2626],{"class":264},[220,11294,7602],{"class":420},[220,11296,2632],{"class":264},[220,11298,11299],{"class":222,"line":656},[220,11300,647],{"emptyLinePlaceholder":194},[220,11302,11303,11306,11309,11312],{"class":222,"line":673},[220,11304,11305],{"class":260}," async",[220,11307,11308],{"class":260}," function",[220,11310,11311],{"class":226}," pulse",[220,11313,2647],{"class":264},[220,11315,11316],{"class":222,"line":682},[220,11317,11318],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,11320,11321,11324,11327,11330,11332],{"class":222,"line":691},[220,11322,11323],{"class":260}," await",[220,11325,11326],{"class":226}," animate",[220,11328,11329],{"class":264},"(radius, ",[220,11331,8043],{"class":420},[220,11333,11334],{"class":264},", {\n",[220,11336,11337,11340,11342],{"class":222,"line":696},[220,11338,11339],{"class":264}," duration: ",[220,11341,7120],{"class":420},[220,11343,1760],{"class":264},[220,11345,11346,11349,11352],{"class":222,"line":702},[220,11347,11348],{"class":264}," easing: ",[220,11350,11351],{"class":230},"'ease-out'",[220,11353,1760],{"class":264},[220,11355,11356,11359,11361,11364,11366,11368,11371],{"class":222,"line":718},[220,11357,11358],{"class":226}," onUpdate",[220,11360,4324],{"class":264},[220,11362,11363],{"class":3621},"latest",[220,11365,4168],{"class":264},[220,11367,2762],{"class":260},[220,11369,11370],{"class":226}," setRadius",[220,11372,11373],{"class":264},"(latest)\n",[220,11375,11376],{"class":222,"line":727},[220,11377,11378],{"class":264}," })\n",[220,11380,11381,11383,11385,11387,11389,11391,11393],{"class":222,"line":2664},[220,11382,11323],{"class":260},[220,11384,11326],{"class":226},[220,11386,2626],{"class":264},[220,11388,8043],{"class":420},[220,11390,1895],{"class":264},[220,11392,7602],{"class":420},[220,11394,11334],{"class":264},[220,11396,11397,11399,11401],{"class":222,"line":3522},[220,11398,11339],{"class":264},[220,11400,7120],{"class":420},[220,11402,1760],{"class":264},[220,11404,11405,11407,11410],{"class":222,"line":9029},[220,11406,11348],{"class":264},[220,11408,11409],{"class":230},"'ease-in'",[220,11411,1760],{"class":264},[220,11413,11414,11416,11418,11420,11422,11424,11426],{"class":222,"line":9040},[220,11415,11358],{"class":226},[220,11417,4324],{"class":264},[220,11419,11363],{"class":3621},[220,11421,4168],{"class":264},[220,11423,2762],{"class":260},[220,11425,11370],{"class":226},[220,11427,11373],{"class":264},[220,11429,11430],{"class":222,"line":9045},[220,11431,11378],{"class":264},[220,11433,11434],{"class":222,"line":10366},[220,11435,3256],{"class":264},[220,11437,11438],{"class":222,"line":10371},[220,11439,647],{"emptyLinePlaceholder":194},[220,11441,11443,11445],{"class":222,"line":11442},22,[220,11444,2739],{"class":260},[220,11446,2742],{"class":264},[220,11448,11450],{"class":222,"line":11449},23,[220,11451,10163],{"class":264},[220,11453,11455,11457,11459,11461,11463,11466,11468],{"class":222,"line":11454},24,[220,11456,2813],{"class":264},[220,11458,9944],{"class":346},[220,11460,10181],{"class":226},[220,11462,353],{"class":260},[220,11464,11465],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,11467,9944],{"class":346},[220,11469,359],{"class":264},[220,11471,11473],{"class":222,"line":11472},25,[220,11474,647],{"emptyLinePlaceholder":194},[220,11476,11478,11480,11482],{"class":222,"line":11477},26,[220,11479,2813],{"class":264},[220,11481,347],{"class":420},[220,11483,359],{"class":264},[220,11485,11487,11489,11491,11493,11495,11497,11499,11501,11504,11506,11508,11510,11512],{"class":222,"line":11486},27,[220,11488,10176],{"class":264},[220,11490,2553],{"class":420},[220,11492,8466],{"class":226},[220,11494,353],{"class":260},[220,11496,10032],{"class":230},[220,11498,5568],{"class":226},[220,11500,353],{"class":260},[220,11502,11503],{"class":264},"{radius} ",[220,11505,2711],{"class":226},[220,11507,353],{"class":260},[220,11509,743],{"class":264},[220,11511,2629],{"class":420},[220,11513,5668],{"class":264},[220,11515,11517,11519,11521,11523,11525,11527],{"class":222,"line":11516},28,[220,11518,10176],{"class":264},[220,11520,367],{"class":420},[220,11522,8505],{"class":226},[220,11524,353],{"class":260},[220,11526,10032],{"class":230},[220,11528,386],{"class":264},[220,11530,11532,11534,11536],{"class":222,"line":11531},29,[220,11533,10281],{"class":264},[220,11535,347],{"class":420},[220,11537,359],{"class":264},[220,11539,11541],{"class":222,"line":11540},30,[220,11542,10363],{"class":264},[220,11544,11546],{"class":222,"line":11545},31,[220,11547,2837],{"class":264},[220,11549,11551],{"class":222,"line":11550},32,[220,11552,749],{"class":264},[11014,11554],{":controls":11555,":preset":11556},"[{\"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,11558,11559],{},"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,11561,11563],{"id":11562},"performance-notes","Performance Notes",[15,11565,11566],{},"Reactive props update GPU uniforms directly. This means:",[34,11568,11569,11575,11581],{},[37,11570,11571,11574],{},[159,11572,11573],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,11576,11577,11580],{},[159,11578,11579],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,11582,11583,11586],{},[159,11584,11585],{},"Frame-rate friendly",": Animate as many props as you need",[15,11588,11589],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,11591,11592],{},"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":11594},[11595,11596,11597,11598,11599],{"id":9619,"depth":179,"text":9620},{"id":9846,"depth":179,"text":9847},{"id":11023,"depth":179,"text":11024},{"id":11212,"depth":179,"text":11213},{"id":11562,"depth":179,"text":11563},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":11600},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":11607,"title":1489,"body":11608,"category":188,"description":14375,"exclude":190,"extension":191,"forceFramework":190,"icon":14376,"meta":14377,"navigation":194,"path":1488,"seo":14378,"stem":14379,"__hash__":14380},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":11609,"toc":14359},[11610,11613,11621,11625,11634,11636,11641,11940,11944,11948,11951,12378,12382,12392,12741,12745,12748,13309,13313,13316,13630,13634,13638,13645,13786,13798,13802,13813,13888,13892,13895,14122,14126,14129,14356],[11,11611,1489],{"id":11612},"layout-positioning",[15,11614,1839,11615,11617,11618,11620],{},[99,11616,101],{}," component renders a ",[99,11619,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,11622,11624],{"id":11623},"the-canvas-model","The canvas model",[15,11626,11627,11628,11630,11631,11633],{},"Every ",[99,11629,101],{}," renders exactly one ",[99,11632,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,11635,594],{"id":593},[15,11637,11638,11639,1938],{},"Apply classes or styles directly to the ",[99,11640,101],{},[246,11642,11643,11762,11797,11832,11866],{":tabs":1557},[212,11644,11646],{"className":334,"code":11645,"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,11647,11648,11653,11667,11675,11683,11687,11692,11707,11715,11723,11727,11732,11746,11754],{"__ignoreMap":178},[220,11649,11650],{"class":222,"line":223},[220,11651,11652],{"class":609},"\u003C!-- Tailwind -->\n",[220,11654,11655,11657,11659,11661,11663,11665],{"class":222,"line":179},[220,11656,343],{"class":264},[220,11658,347],{"class":346},[220,11660,350],{"class":226},[220,11662,353],{"class":264},[220,11664,356],{"class":230},[220,11666,359],{"class":264},[220,11668,11669,11671,11673],{"class":222,"line":389},[220,11670,364],{"class":264},[220,11672,367],{"class":346},[220,11674,386],{"class":264},[220,11676,11677,11679,11681],{"class":222,"line":399},[220,11678,402],{"class":264},[220,11680,347],{"class":346},[220,11682,359],{"class":264},[220,11684,11685],{"class":222,"line":644},[220,11686,647],{"emptyLinePlaceholder":194},[220,11688,11689],{"class":222,"line":650},[220,11690,11691],{"class":609},"\u003C!-- CSS class -->\n",[220,11693,11694,11696,11698,11700,11702,11705],{"class":222,"line":656},[220,11695,343],{"class":264},[220,11697,347],{"class":346},[220,11699,350],{"class":226},[220,11701,353],{"class":264},[220,11703,11704],{"class":230},"\"hero-shader\"",[220,11706,359],{"class":264},[220,11708,11709,11711,11713],{"class":222,"line":673},[220,11710,364],{"class":264},[220,11712,367],{"class":346},[220,11714,386],{"class":264},[220,11716,11717,11719,11721],{"class":222,"line":682},[220,11718,402],{"class":264},[220,11720,347],{"class":346},[220,11722,359],{"class":264},[220,11724,11725],{"class":222,"line":691},[220,11726,647],{"emptyLinePlaceholder":194},[220,11728,11729],{"class":222,"line":696},[220,11730,11731],{"class":609},"\u003C!-- Inline -->\n",[220,11733,11734,11736,11738,11740,11742,11744],{"class":222,"line":702},[220,11735,343],{"class":264},[220,11737,347],{"class":346},[220,11739,663],{"class":226},[220,11741,353],{"class":264},[220,11743,668],{"class":230},[220,11745,359],{"class":264},[220,11747,11748,11750,11752],{"class":222,"line":718},[220,11749,364],{"class":264},[220,11751,367],{"class":346},[220,11753,386],{"class":264},[220,11755,11756,11758,11760],{"class":222,"line":727},[220,11757,402],{"class":264},[220,11759,347],{"class":346},[220,11761,359],{"class":264},[212,11763,11765],{"className":409,"code":11764,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,11766,11767,11781,11789],{"__ignoreMap":178},[220,11768,11769,11771,11773,11775,11777,11779],{"class":222,"line":223},[220,11770,343],{"class":264},[220,11772,347],{"class":420},[220,11774,423],{"class":226},[220,11776,353],{"class":260},[220,11778,356],{"class":230},[220,11780,359],{"class":264},[220,11782,11783,11785,11787],{"class":222,"line":179},[220,11784,364],{"class":264},[220,11786,367],{"class":420},[220,11788,386],{"class":264},[220,11790,11791,11793,11795],{"class":222,"line":389},[220,11792,402],{"class":264},[220,11794,347],{"class":420},[220,11796,359],{"class":264},[212,11798,11800],{"className":468,"code":11799,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,11801,11802,11816,11824],{"__ignoreMap":178},[220,11803,11804,11806,11808,11810,11812,11814],{"class":222,"line":223},[220,11805,343],{"class":264},[220,11807,347],{"class":420},[220,11809,350],{"class":226},[220,11811,353],{"class":260},[220,11813,356],{"class":230},[220,11815,359],{"class":264},[220,11817,11818,11820,11822],{"class":222,"line":179},[220,11819,364],{"class":264},[220,11821,367],{"class":420},[220,11823,386],{"class":264},[220,11825,11826,11828,11830],{"class":222,"line":389},[220,11827,402],{"class":264},[220,11829,347],{"class":420},[220,11831,359],{"class":264},[212,11833,11834],{"className":468,"code":11799,"language":469,"meta":178,"style":178},[99,11835,11836,11850,11858],{"__ignoreMap":178},[220,11837,11838,11840,11842,11844,11846,11848],{"class":222,"line":223},[220,11839,343],{"class":264},[220,11841,347],{"class":420},[220,11843,350],{"class":226},[220,11845,353],{"class":260},[220,11847,356],{"class":230},[220,11849,359],{"class":264},[220,11851,11852,11854,11856],{"class":222,"line":179},[220,11853,364],{"class":264},[220,11855,367],{"class":420},[220,11857,386],{"class":264},[220,11859,11860,11862,11864],{"class":222,"line":389},[220,11861,402],{"class":264},[220,11863,347],{"class":420},[220,11865,359],{"class":264},[212,11867,11869],{"className":251,"code":11868,"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,11870,11871,11876,11895,11905,11915,11919],{"__ignoreMap":178},[220,11872,11873],{"class":222,"line":223},[220,11874,11875],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,11877,11878,11880,11882,11884,11886,11888,11890,11893],{"class":222,"line":179},[220,11879,1735],{"class":260},[220,11881,3133],{"class":420},[220,11883,1741],{"class":260},[220,11885,3138],{"class":264},[220,11887,3141],{"class":226},[220,11889,2626],{"class":264},[220,11891,11892],{"class":230},"'my-shader'",[220,11894,2632],{"class":264},[220,11896,11897,11900,11902],{"class":222,"line":389},[220,11898,11899],{"class":264},"canvas.style.width ",[220,11901,353],{"class":260},[220,11903,11904],{"class":230}," '100%'\n",[220,11906,11907,11910,11912],{"class":222,"line":399},[220,11908,11909],{"class":264},"canvas.style.height ",[220,11911,353],{"class":260},[220,11913,11914],{"class":230}," '400px'\n",[220,11916,11917],{"class":222,"line":644},[220,11918,647],{"emptyLinePlaceholder":194},[220,11920,11921,11923,11925,11927,11929,11931,11934,11937],{"class":222,"line":650},[220,11922,1735],{"class":260},[220,11924,1738],{"class":420},[220,11926,1741],{"class":260},[220,11928,1744],{"class":260},[220,11930,1747],{"class":226},[220,11932,11933],{"class":264},"(canvas, { components: [",[220,11935,11936],{"class":260},"...",[220,11938,11939],{"class":264},"] })\n",[23,11941,11943],{"id":11942},"common-layout-patterns","Common layout patterns",[3262,11945,11947],{"id":11946},"full-page-background","Full-page background",[15,11949,11950],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,11952,11953,12028,12105,12171,12244],{":tabs":1557},[212,11954,11956],{"className":334,"code":11955,"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,11957,11958,11963,11978,11987,11995,11999,12015,12020],{"__ignoreMap":178},[220,11959,11960],{"class":222,"line":223},[220,11961,11962],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,11964,11965,11967,11969,11971,11973,11976],{"class":222,"line":179},[220,11966,343],{"class":264},[220,11968,347],{"class":346},[220,11970,350],{"class":226},[220,11972,353],{"class":264},[220,11974,11975],{"class":230},"\"fixed inset-0 -z-10\"",[220,11977,359],{"class":264},[220,11979,11980,11982,11985],{"class":222,"line":389},[220,11981,364],{"class":264},[220,11983,11984],{"class":346},"Aurora",[220,11986,386],{"class":264},[220,11988,11989,11991,11993],{"class":222,"line":399},[220,11990,402],{"class":264},[220,11992,347],{"class":346},[220,11994,359],{"class":264},[220,11996,11997],{"class":222,"line":644},[220,11998,647],{"emptyLinePlaceholder":194},[220,12000,12001,12003,12006,12008,12010,12013],{"class":222,"line":650},[220,12002,343],{"class":264},[220,12004,12005],{"class":346},"main",[220,12007,350],{"class":226},[220,12009,353],{"class":264},[220,12011,12012],{"class":230},"\"relative z-10\"",[220,12014,359],{"class":264},[220,12016,12017],{"class":222,"line":656},[220,12018,12019],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,12021,12022,12024,12026],{"class":222,"line":673},[220,12023,402],{"class":264},[220,12025,12005],{"class":346},[220,12027,359],{"class":264},[212,12029,12031],{"className":409,"code":12030,"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,12032,12033,12038,12052,12060,12068,12082,12092,12100],{"__ignoreMap":178},[220,12034,12035],{"class":222,"line":223},[220,12036,12037],{"class":264},"\u003C>\n",[220,12039,12040,12042,12044,12046,12048,12050],{"class":222,"line":179},[220,12041,364],{"class":264},[220,12043,347],{"class":420},[220,12045,423],{"class":226},[220,12047,353],{"class":260},[220,12049,11975],{"class":230},[220,12051,359],{"class":264},[220,12053,12054,12056,12058],{"class":222,"line":389},[220,12055,2550],{"class":264},[220,12057,11984],{"class":420},[220,12059,386],{"class":264},[220,12061,12062,12064,12066],{"class":222,"line":399},[220,12063,2567],{"class":264},[220,12065,347],{"class":420},[220,12067,359],{"class":264},[220,12069,12070,12072,12074,12076,12078,12080],{"class":222,"line":644},[220,12071,364],{"class":264},[220,12073,12005],{"class":346},[220,12075,423],{"class":226},[220,12077,353],{"class":260},[220,12079,12012],{"class":230},[220,12081,359],{"class":264},[220,12083,12084,12087,12090],{"class":222,"line":650},[220,12085,12086],{"class":264}," {",[220,12088,12089],{"class":609},"\u002F* Your page content *\u002F",[220,12091,749],{"class":264},[220,12093,12094,12096,12098],{"class":222,"line":656},[220,12095,2567],{"class":264},[220,12097,12005],{"class":346},[220,12099,359],{"class":264},[220,12101,12102],{"class":222,"line":673},[220,12103,12104],{"class":264},"\u003C\u002F>\n",[212,12106,12108],{"className":468,"code":12107,"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,12109,12110,12124,12132,12140,12144,12158,12163],{"__ignoreMap":178},[220,12111,12112,12114,12116,12118,12120,12122],{"class":222,"line":223},[220,12113,343],{"class":264},[220,12115,347],{"class":420},[220,12117,350],{"class":226},[220,12119,353],{"class":260},[220,12121,11975],{"class":230},[220,12123,359],{"class":264},[220,12125,12126,12128,12130],{"class":222,"line":179},[220,12127,364],{"class":264},[220,12129,11984],{"class":420},[220,12131,386],{"class":264},[220,12133,12134,12136,12138],{"class":222,"line":389},[220,12135,402],{"class":264},[220,12137,347],{"class":420},[220,12139,359],{"class":264},[220,12141,12142],{"class":222,"line":399},[220,12143,647],{"emptyLinePlaceholder":194},[220,12145,12146,12148,12150,12152,12154,12156],{"class":222,"line":644},[220,12147,343],{"class":264},[220,12149,12005],{"class":346},[220,12151,350],{"class":226},[220,12153,353],{"class":260},[220,12155,12012],{"class":230},[220,12157,359],{"class":264},[220,12159,12160],{"class":222,"line":650},[220,12161,12162],{"class":264}," \u003C!-- Your page content -->\n",[220,12164,12165,12167,12169],{"class":222,"line":656},[220,12166,402],{"class":264},[220,12168,12005],{"class":346},[220,12170,359],{"class":264},[212,12172,12174],{"className":468,"code":12173,"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,12175,12176,12180,12194,12202,12210,12224,12232,12240],{"__ignoreMap":178},[220,12177,12178],{"class":222,"line":223},[220,12179,12037],{"class":264},[220,12181,12182,12184,12186,12188,12190,12192],{"class":222,"line":179},[220,12183,364],{"class":264},[220,12185,347],{"class":420},[220,12187,350],{"class":226},[220,12189,353],{"class":260},[220,12191,11975],{"class":230},[220,12193,359],{"class":264},[220,12195,12196,12198,12200],{"class":222,"line":389},[220,12197,2550],{"class":264},[220,12199,11984],{"class":420},[220,12201,386],{"class":264},[220,12203,12204,12206,12208],{"class":222,"line":399},[220,12205,2567],{"class":264},[220,12207,347],{"class":420},[220,12209,359],{"class":264},[220,12211,12212,12214,12216,12218,12220,12222],{"class":222,"line":644},[220,12213,364],{"class":264},[220,12215,12005],{"class":346},[220,12217,350],{"class":226},[220,12219,353],{"class":260},[220,12221,12012],{"class":230},[220,12223,359],{"class":264},[220,12225,12226,12228,12230],{"class":222,"line":650},[220,12227,12086],{"class":264},[220,12229,12089],{"class":609},[220,12231,749],{"class":264},[220,12233,12234,12236,12238],{"class":222,"line":656},[220,12235,2567],{"class":264},[220,12237,12005],{"class":346},[220,12239,359],{"class":264},[220,12241,12242],{"class":222,"line":673},[220,12243,12104],{"class":264},[212,12245,12249],{"className":12246,"code":12247,"language":12248,"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,12250,12251,12278,12298,12302,12318,12329,12354,12365,12370],{"__ignoreMap":178},[220,12252,12253,12255,12258,12260,12262,12265,12267,12269,12272,12274,12276],{"class":222,"line":223},[220,12254,343],{"class":264},[220,12256,12257],{"class":346},"canvas",[220,12259,8466],{"class":226},[220,12261,353],{"class":264},[220,12263,12264],{"class":230},"\"bg\"",[220,12266,663],{"class":226},[220,12268,353],{"class":264},[220,12270,12271],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,12273,3804],{"class":264},[220,12275,12257],{"class":346},[220,12277,359],{"class":264},[220,12279,12280,12282,12284,12286,12288,12291,12294,12296],{"class":222,"line":179},[220,12281,343],{"class":264},[220,12283,12005],{"class":346},[220,12285,663],{"class":226},[220,12287,353],{"class":264},[220,12289,12290],{"class":230},"\"position:relative;z-index:10;\"",[220,12292,12293],{"class":264},">Your content\u003C\u002F",[220,12295,12005],{"class":346},[220,12297,359],{"class":264},[220,12299,12300],{"class":222,"line":389},[220,12301,647],{"emptyLinePlaceholder":194},[220,12303,12304,12306,12308,12311,12313,12316],{"class":222,"line":399},[220,12305,343],{"class":264},[220,12307,2590],{"class":346},[220,12309,12310],{"class":226}," type",[220,12312,353],{"class":264},[220,12314,12315],{"class":230},"\"module\"",[220,12317,359],{"class":264},[220,12319,12320,12323,12325,12327],{"class":222,"line":644},[220,12321,12322],{"class":260}," import",[220,12324,10879],{"class":264},[220,12326,268],{"class":260},[220,12328,4007],{"class":230},[220,12330,12331,12333,12335,12337,12339,12341,12344,12346,12348,12351],{"class":222,"line":650},[220,12332,2705],{"class":260},[220,12334,1738],{"class":420},[220,12336,1741],{"class":260},[220,12338,1744],{"class":260},[220,12340,1747],{"class":226},[220,12342,12343],{"class":264},"(document.",[220,12345,3141],{"class":226},[220,12347,2626],{"class":264},[220,12349,12350],{"class":230},"'bg'",[220,12352,12353],{"class":264},"), {\n",[220,12355,12356,12359,12362],{"class":222,"line":656},[220,12357,12358],{"class":264}," components: [{ type: ",[220,12360,12361],{"class":230},"'Aurora'",[220,12363,12364],{"class":264},", props: {} }]\n",[220,12366,12367],{"class":222,"line":673},[220,12368,12369],{"class":264}," })\n",[220,12371,12372,12374,12376],{"class":222,"line":682},[220,12373,402],{"class":264},[220,12375,2590],{"class":346},[220,12377,359],{"class":264},[3262,12379,12381],{"id":12380},"section-background","Section background",[15,12383,12384,12385,1864,12388,12391],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,12386,12387],{},"position: relative",[99,12389,12390],{},"overflow: hidden"," to contain the canvas:",[246,12393,12394,12499,12592,12667],{":tabs":248},[212,12395,12397],{"className":334,"code":12396,"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,12398,12399,12415,12430,12439,12447,12451,12471,12491],{"__ignoreMap":178},[220,12400,12401,12403,12406,12408,12410,12413],{"class":222,"line":223},[220,12402,343],{"class":264},[220,12404,12405],{"class":346},"section",[220,12407,350],{"class":226},[220,12409,353],{"class":264},[220,12411,12412],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,12414,359],{"class":264},[220,12416,12417,12419,12421,12423,12425,12428],{"class":222,"line":179},[220,12418,364],{"class":264},[220,12420,347],{"class":346},[220,12422,350],{"class":226},[220,12424,353],{"class":264},[220,12426,12427],{"class":230},"\"absolute inset-0 -z-10\"",[220,12429,359],{"class":264},[220,12431,12432,12434,12437],{"class":222,"line":389},[220,12433,2550],{"class":264},[220,12435,12436],{"class":346},"Plasma",[220,12438,386],{"class":264},[220,12440,12441,12443,12445],{"class":222,"line":399},[220,12442,2567],{"class":264},[220,12444,347],{"class":346},[220,12446,359],{"class":264},[220,12448,12449],{"class":222,"line":644},[220,12450,647],{"emptyLinePlaceholder":194},[220,12452,12453,12455,12457,12459,12461,12464,12467,12469],{"class":222,"line":650},[220,12454,364],{"class":264},[220,12456,23],{"class":346},[220,12458,350],{"class":226},[220,12460,353],{"class":264},[220,12462,12463],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,12465,12466],{"class":264},">Section Heading\u003C\u002F",[220,12468,23],{"class":346},[220,12470,359],{"class":264},[220,12472,12473,12475,12477,12479,12481,12484,12487,12489],{"class":222,"line":656},[220,12474,364],{"class":264},[220,12476,15],{"class":346},[220,12478,350],{"class":226},[220,12480,353],{"class":264},[220,12482,12483],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,12485,12486],{"class":264},">Content above the shader.\u003C\u002F",[220,12488,15],{"class":346},[220,12490,359],{"class":264},[220,12492,12493,12495,12497],{"class":222,"line":673},[220,12494,402],{"class":264},[220,12496,12405],{"class":346},[220,12498,359],{"class":264},[212,12500,12502],{"className":409,"code":12501,"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,12503,12504,12518,12532,12540,12548,12566,12584],{"__ignoreMap":178},[220,12505,12506,12508,12510,12512,12514,12516],{"class":222,"line":223},[220,12507,343],{"class":264},[220,12509,12405],{"class":346},[220,12511,423],{"class":226},[220,12513,353],{"class":260},[220,12515,12412],{"class":230},[220,12517,359],{"class":264},[220,12519,12520,12522,12524,12526,12528,12530],{"class":222,"line":179},[220,12521,364],{"class":264},[220,12523,347],{"class":420},[220,12525,423],{"class":226},[220,12527,353],{"class":260},[220,12529,12427],{"class":230},[220,12531,359],{"class":264},[220,12533,12534,12536,12538],{"class":222,"line":389},[220,12535,2550],{"class":264},[220,12537,12436],{"class":420},[220,12539,386],{"class":264},[220,12541,12542,12544,12546],{"class":222,"line":399},[220,12543,2567],{"class":264},[220,12545,347],{"class":420},[220,12547,359],{"class":264},[220,12549,12550,12552,12554,12556,12558,12560,12562,12564],{"class":222,"line":644},[220,12551,364],{"class":264},[220,12553,23],{"class":346},[220,12555,423],{"class":226},[220,12557,353],{"class":260},[220,12559,12463],{"class":230},[220,12561,12466],{"class":264},[220,12563,23],{"class":346},[220,12565,359],{"class":264},[220,12567,12568,12570,12572,12574,12576,12578,12580,12582],{"class":222,"line":650},[220,12569,364],{"class":264},[220,12571,15],{"class":346},[220,12573,423],{"class":226},[220,12575,353],{"class":260},[220,12577,12483],{"class":230},[220,12579,12486],{"class":264},[220,12581,15],{"class":346},[220,12583,359],{"class":264},[220,12585,12586,12588,12590],{"class":222,"line":656},[220,12587,402],{"class":264},[220,12589,12405],{"class":346},[220,12591,359],{"class":264},[212,12593,12595],{"className":468,"code":12594,"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,12596,12597,12611,12625,12633,12641,12659],{"__ignoreMap":178},[220,12598,12599,12601,12603,12605,12607,12609],{"class":222,"line":223},[220,12600,343],{"class":264},[220,12602,12405],{"class":346},[220,12604,350],{"class":226},[220,12606,353],{"class":260},[220,12608,12412],{"class":230},[220,12610,359],{"class":264},[220,12612,12613,12615,12617,12619,12621,12623],{"class":222,"line":179},[220,12614,364],{"class":264},[220,12616,347],{"class":420},[220,12618,350],{"class":226},[220,12620,353],{"class":260},[220,12622,12427],{"class":230},[220,12624,359],{"class":264},[220,12626,12627,12629,12631],{"class":222,"line":389},[220,12628,2550],{"class":264},[220,12630,12436],{"class":420},[220,12632,386],{"class":264},[220,12634,12635,12637,12639],{"class":222,"line":399},[220,12636,2567],{"class":264},[220,12638,347],{"class":420},[220,12640,359],{"class":264},[220,12642,12643,12645,12647,12649,12651,12653,12655,12657],{"class":222,"line":644},[220,12644,364],{"class":264},[220,12646,23],{"class":346},[220,12648,350],{"class":226},[220,12650,353],{"class":260},[220,12652,12463],{"class":230},[220,12654,12466],{"class":264},[220,12656,23],{"class":346},[220,12658,359],{"class":264},[220,12660,12661,12663,12665],{"class":222,"line":650},[220,12662,402],{"class":264},[220,12664,12405],{"class":346},[220,12666,359],{"class":264},[212,12668,12669],{"className":468,"code":12594,"language":469,"meta":178,"style":178},[99,12670,12671,12685,12699,12707,12715,12733],{"__ignoreMap":178},[220,12672,12673,12675,12677,12679,12681,12683],{"class":222,"line":223},[220,12674,343],{"class":264},[220,12676,12405],{"class":346},[220,12678,350],{"class":226},[220,12680,353],{"class":260},[220,12682,12412],{"class":230},[220,12684,359],{"class":264},[220,12686,12687,12689,12691,12693,12695,12697],{"class":222,"line":179},[220,12688,364],{"class":264},[220,12690,347],{"class":420},[220,12692,350],{"class":226},[220,12694,353],{"class":260},[220,12696,12427],{"class":230},[220,12698,359],{"class":264},[220,12700,12701,12703,12705],{"class":222,"line":389},[220,12702,2550],{"class":264},[220,12704,12436],{"class":420},[220,12706,386],{"class":264},[220,12708,12709,12711,12713],{"class":222,"line":399},[220,12710,2567],{"class":264},[220,12712,347],{"class":420},[220,12714,359],{"class":264},[220,12716,12717,12719,12721,12723,12725,12727,12729,12731],{"class":222,"line":644},[220,12718,364],{"class":264},[220,12720,23],{"class":346},[220,12722,350],{"class":226},[220,12724,353],{"class":260},[220,12726,12463],{"class":230},[220,12728,12466],{"class":264},[220,12730,23],{"class":346},[220,12732,359],{"class":264},[220,12734,12735,12737,12739],{"class":222,"line":650},[220,12736,402],{"class":264},[220,12738,12405],{"class":346},[220,12740,359],{"class":264},[3262,12742,12744],{"id":12743},"card-with-shader-fill","Card with shader fill",[15,12746,12747],{},"A shader used as the visual background of a card or panel:",[246,12749,12750,12910,13056,13183],{":tabs":248},[212,12751,12753],{"className":334,"code":12752,"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,12754,12755,12770,12785,12800,12823,12831,12835,12840,12854,12874,12894,12902],{"__ignoreMap":178},[220,12756,12757,12759,12761,12763,12765,12768],{"class":222,"line":223},[220,12758,343],{"class":264},[220,12760,3398],{"class":346},[220,12762,350],{"class":226},[220,12764,353],{"class":264},[220,12766,12767],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,12769,359],{"class":264},[220,12771,12772,12774,12776,12778,12780,12783],{"class":222,"line":179},[220,12773,364],{"class":264},[220,12775,347],{"class":346},[220,12777,350],{"class":226},[220,12779,353],{"class":264},[220,12781,12782],{"class":230},"\"absolute inset-0\"",[220,12784,359],{"class":264},[220,12786,12787,12789,12791,12793,12795,12798],{"class":222,"line":389},[220,12788,2550],{"class":264},[220,12790,1585],{"class":346},[220,12792,1588],{"class":226},[220,12794,353],{"class":264},[220,12796,12797],{"class":230},"\"#1e1b4b\"",[220,12799,386],{"class":264},[220,12801,12802,12804,12806,12809,12811,12814,12816,12818,12821],{"class":222,"line":399},[220,12803,2550],{"class":264},[220,12805,11159],{"class":346},[220,12807,12808],{"class":226}," :intensity",[220,12810,353],{"class":264},[220,12812,12813],{"class":230},"\"0.4\"",[220,12815,1588],{"class":226},[220,12817,353],{"class":264},[220,12819,12820],{"class":230},"\"#6366f1\"",[220,12822,386],{"class":264},[220,12824,12825,12827,12829],{"class":222,"line":644},[220,12826,2567],{"class":264},[220,12828,347],{"class":346},[220,12830,359],{"class":264},[220,12832,12833],{"class":222,"line":650},[220,12834,647],{"emptyLinePlaceholder":194},[220,12836,12837],{"class":222,"line":656},[220,12838,12839],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,12841,12842,12844,12846,12848,12850,12852],{"class":222,"line":673},[220,12843,364],{"class":264},[220,12845,3398],{"class":346},[220,12847,350],{"class":226},[220,12849,353],{"class":264},[220,12851,12012],{"class":230},[220,12853,359],{"class":264},[220,12855,12856,12858,12860,12862,12864,12867,12870,12872],{"class":222,"line":682},[220,12857,2550],{"class":264},[220,12859,3262],{"class":346},[220,12861,350],{"class":226},[220,12863,353],{"class":264},[220,12865,12866],{"class":230},"\"text-xl font-semibold\"",[220,12868,12869],{"class":264},">Card Title\u003C\u002F",[220,12871,3262],{"class":346},[220,12873,359],{"class":264},[220,12875,12876,12878,12880,12882,12884,12887,12890,12892],{"class":222,"line":691},[220,12877,2550],{"class":264},[220,12879,15],{"class":346},[220,12881,350],{"class":226},[220,12883,353],{"class":264},[220,12885,12886],{"class":230},"\"text-white\u002F70 mt-2\"",[220,12888,12889],{"class":264},">Card description here.\u003C\u002F",[220,12891,15],{"class":346},[220,12893,359],{"class":264},[220,12895,12896,12898,12900],{"class":222,"line":696},[220,12897,2567],{"class":264},[220,12899,3398],{"class":346},[220,12901,359],{"class":264},[220,12903,12904,12906,12908],{"class":222,"line":702},[220,12905,402],{"class":264},[220,12907,3398],{"class":346},[220,12909,359],{"class":264},[212,12911,12913],{"className":409,"code":12912,"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,12914,12915,12929,12943,12957,12982,12990,13004,13022,13040,13048],{"__ignoreMap":178},[220,12916,12917,12919,12921,12923,12925,12927],{"class":222,"line":223},[220,12918,343],{"class":264},[220,12920,3398],{"class":346},[220,12922,423],{"class":226},[220,12924,353],{"class":260},[220,12926,12767],{"class":230},[220,12928,359],{"class":264},[220,12930,12931,12933,12935,12937,12939,12941],{"class":222,"line":179},[220,12932,364],{"class":264},[220,12934,347],{"class":420},[220,12936,423],{"class":226},[220,12938,353],{"class":260},[220,12940,12782],{"class":230},[220,12942,359],{"class":264},[220,12944,12945,12947,12949,12951,12953,12955],{"class":222,"line":389},[220,12946,2550],{"class":264},[220,12948,1585],{"class":420},[220,12950,1588],{"class":226},[220,12952,353],{"class":260},[220,12954,12797],{"class":230},[220,12956,386],{"class":264},[220,12958,12959,12961,12963,12966,12968,12970,12972,12974,12976,12978,12980],{"class":222,"line":399},[220,12960,2550],{"class":264},[220,12962,11159],{"class":420},[220,12964,12965],{"class":226}," intensity",[220,12967,353],{"class":260},[220,12969,743],{"class":264},[220,12971,7615],{"class":420},[220,12973,2914],{"class":264},[220,12975,7428],{"class":226},[220,12977,353],{"class":260},[220,12979,12820],{"class":230},[220,12981,386],{"class":264},[220,12983,12984,12986,12988],{"class":222,"line":644},[220,12985,2567],{"class":264},[220,12987,347],{"class":420},[220,12989,359],{"class":264},[220,12991,12992,12994,12996,12998,13000,13002],{"class":222,"line":650},[220,12993,364],{"class":264},[220,12995,3398],{"class":346},[220,12997,423],{"class":226},[220,12999,353],{"class":260},[220,13001,12012],{"class":230},[220,13003,359],{"class":264},[220,13005,13006,13008,13010,13012,13014,13016,13018,13020],{"class":222,"line":656},[220,13007,2550],{"class":264},[220,13009,3262],{"class":346},[220,13011,423],{"class":226},[220,13013,353],{"class":260},[220,13015,12866],{"class":230},[220,13017,12869],{"class":264},[220,13019,3262],{"class":346},[220,13021,359],{"class":264},[220,13023,13024,13026,13028,13030,13032,13034,13036,13038],{"class":222,"line":673},[220,13025,2550],{"class":264},[220,13027,15],{"class":346},[220,13029,423],{"class":226},[220,13031,353],{"class":260},[220,13033,12886],{"class":230},[220,13035,12889],{"class":264},[220,13037,15],{"class":346},[220,13039,359],{"class":264},[220,13041,13042,13044,13046],{"class":222,"line":682},[220,13043,2567],{"class":264},[220,13045,3398],{"class":346},[220,13047,359],{"class":264},[220,13049,13050,13052,13054],{"class":222,"line":691},[220,13051,402],{"class":264},[220,13053,3398],{"class":346},[220,13055,359],{"class":264},[212,13057,13059],{"className":468,"code":13058,"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,13060,13061,13075,13089,13103,13127,13135,13149,13167,13175],{"__ignoreMap":178},[220,13062,13063,13065,13067,13069,13071,13073],{"class":222,"line":223},[220,13064,343],{"class":264},[220,13066,3398],{"class":346},[220,13068,350],{"class":226},[220,13070,353],{"class":260},[220,13072,12767],{"class":230},[220,13074,359],{"class":264},[220,13076,13077,13079,13081,13083,13085,13087],{"class":222,"line":179},[220,13078,364],{"class":264},[220,13080,347],{"class":420},[220,13082,350],{"class":226},[220,13084,353],{"class":260},[220,13086,12782],{"class":230},[220,13088,359],{"class":264},[220,13090,13091,13093,13095,13097,13099,13101],{"class":222,"line":389},[220,13092,2550],{"class":264},[220,13094,1585],{"class":420},[220,13096,1588],{"class":226},[220,13098,353],{"class":260},[220,13100,12797],{"class":230},[220,13102,386],{"class":264},[220,13104,13105,13107,13109,13111,13113,13115,13117,13119,13121,13123,13125],{"class":222,"line":399},[220,13106,2550],{"class":264},[220,13108,11159],{"class":420},[220,13110,12965],{"class":226},[220,13112,353],{"class":260},[220,13114,743],{"class":264},[220,13116,7615],{"class":420},[220,13118,2914],{"class":264},[220,13120,7428],{"class":226},[220,13122,353],{"class":260},[220,13124,12820],{"class":230},[220,13126,386],{"class":264},[220,13128,13129,13131,13133],{"class":222,"line":644},[220,13130,2567],{"class":264},[220,13132,347],{"class":420},[220,13134,359],{"class":264},[220,13136,13137,13139,13141,13143,13145,13147],{"class":222,"line":650},[220,13138,364],{"class":264},[220,13140,3398],{"class":346},[220,13142,350],{"class":226},[220,13144,353],{"class":260},[220,13146,12012],{"class":230},[220,13148,359],{"class":264},[220,13150,13151,13153,13155,13157,13159,13161,13163,13165],{"class":222,"line":656},[220,13152,2550],{"class":264},[220,13154,3262],{"class":346},[220,13156,350],{"class":226},[220,13158,353],{"class":260},[220,13160,12866],{"class":230},[220,13162,12869],{"class":264},[220,13164,3262],{"class":346},[220,13166,359],{"class":264},[220,13168,13169,13171,13173],{"class":222,"line":673},[220,13170,2567],{"class":264},[220,13172,3398],{"class":346},[220,13174,359],{"class":264},[220,13176,13177,13179,13181],{"class":222,"line":682},[220,13178,402],{"class":264},[220,13180,3398],{"class":346},[220,13182,359],{"class":264},[212,13184,13185],{"className":468,"code":13058,"language":469,"meta":178,"style":178},[99,13186,13187,13201,13215,13229,13253,13261,13275,13293,13301],{"__ignoreMap":178},[220,13188,13189,13191,13193,13195,13197,13199],{"class":222,"line":223},[220,13190,343],{"class":264},[220,13192,3398],{"class":346},[220,13194,350],{"class":226},[220,13196,353],{"class":260},[220,13198,12767],{"class":230},[220,13200,359],{"class":264},[220,13202,13203,13205,13207,13209,13211,13213],{"class":222,"line":179},[220,13204,364],{"class":264},[220,13206,347],{"class":420},[220,13208,350],{"class":226},[220,13210,353],{"class":260},[220,13212,12782],{"class":230},[220,13214,359],{"class":264},[220,13216,13217,13219,13221,13223,13225,13227],{"class":222,"line":389},[220,13218,2550],{"class":264},[220,13220,1585],{"class":420},[220,13222,1588],{"class":226},[220,13224,353],{"class":260},[220,13226,12797],{"class":230},[220,13228,386],{"class":264},[220,13230,13231,13233,13235,13237,13239,13241,13243,13245,13247,13249,13251],{"class":222,"line":399},[220,13232,2550],{"class":264},[220,13234,11159],{"class":420},[220,13236,12965],{"class":226},[220,13238,353],{"class":260},[220,13240,743],{"class":264},[220,13242,7615],{"class":420},[220,13244,2914],{"class":264},[220,13246,7428],{"class":226},[220,13248,353],{"class":260},[220,13250,12820],{"class":230},[220,13252,386],{"class":264},[220,13254,13255,13257,13259],{"class":222,"line":644},[220,13256,2567],{"class":264},[220,13258,347],{"class":420},[220,13260,359],{"class":264},[220,13262,13263,13265,13267,13269,13271,13273],{"class":222,"line":650},[220,13264,364],{"class":264},[220,13266,3398],{"class":346},[220,13268,350],{"class":226},[220,13270,353],{"class":260},[220,13272,12012],{"class":230},[220,13274,359],{"class":264},[220,13276,13277,13279,13281,13283,13285,13287,13289,13291],{"class":222,"line":656},[220,13278,2550],{"class":264},[220,13280,3262],{"class":346},[220,13282,350],{"class":226},[220,13284,353],{"class":260},[220,13286,12866],{"class":230},[220,13288,12869],{"class":264},[220,13290,3262],{"class":346},[220,13292,359],{"class":264},[220,13294,13295,13297,13299],{"class":222,"line":673},[220,13296,2567],{"class":264},[220,13298,3398],{"class":346},[220,13300,359],{"class":264},[220,13302,13303,13305,13307],{"class":222,"line":682},[220,13304,402],{"class":264},[220,13306,3398],{"class":346},[220,13308,359],{"class":264},[3262,13310,13312],{"id":13311},"inline-content-block","Inline content block",[15,13314,13315],{},"A shader that flows naturally in document layout, like an image or video:",[246,13317,13318,13406,13481,13556],{":tabs":248},[212,13319,13321],{"className":334,"code":13320,"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,13322,13323,13332,13345,13349,13364,13373,13381,13385,13398],{"__ignoreMap":178},[220,13324,13325,13327,13330],{"class":222,"line":223},[220,13326,343],{"class":264},[220,13328,13329],{"class":346},"article",[220,13331,359],{"class":264},[220,13333,13334,13336,13338,13341,13343],{"class":222,"line":179},[220,13335,364],{"class":264},[220,13337,15],{"class":346},[220,13339,13340],{"class":264},">Text before the shader.\u003C\u002F",[220,13342,15],{"class":346},[220,13344,359],{"class":264},[220,13346,13347],{"class":222,"line":389},[220,13348,647],{"emptyLinePlaceholder":194},[220,13350,13351,13353,13355,13357,13359,13362],{"class":222,"line":399},[220,13352,364],{"class":264},[220,13354,347],{"class":346},[220,13356,350],{"class":226},[220,13358,353],{"class":264},[220,13360,13361],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,13363,359],{"class":264},[220,13365,13366,13368,13371],{"class":222,"line":644},[220,13367,2550],{"class":264},[220,13369,13370],{"class":346},"Swirl",[220,13372,386],{"class":264},[220,13374,13375,13377,13379],{"class":222,"line":650},[220,13376,2567],{"class":264},[220,13378,347],{"class":346},[220,13380,359],{"class":264},[220,13382,13383],{"class":222,"line":656},[220,13384,647],{"emptyLinePlaceholder":194},[220,13386,13387,13389,13391,13394,13396],{"class":222,"line":673},[220,13388,364],{"class":264},[220,13390,15],{"class":346},[220,13392,13393],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,13395,15],{"class":346},[220,13397,359],{"class":264},[220,13399,13400,13402,13404],{"class":222,"line":682},[220,13401,402],{"class":264},[220,13403,13329],{"class":346},[220,13405,359],{"class":264},[212,13407,13409],{"className":409,"code":13408,"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,13410,13411,13419,13431,13445,13453,13461,13473],{"__ignoreMap":178},[220,13412,13413,13415,13417],{"class":222,"line":223},[220,13414,343],{"class":264},[220,13416,13329],{"class":346},[220,13418,359],{"class":264},[220,13420,13421,13423,13425,13427,13429],{"class":222,"line":179},[220,13422,364],{"class":264},[220,13424,15],{"class":346},[220,13426,13340],{"class":264},[220,13428,15],{"class":346},[220,13430,359],{"class":264},[220,13432,13433,13435,13437,13439,13441,13443],{"class":222,"line":389},[220,13434,364],{"class":264},[220,13436,347],{"class":420},[220,13438,423],{"class":226},[220,13440,353],{"class":260},[220,13442,13361],{"class":230},[220,13444,359],{"class":264},[220,13446,13447,13449,13451],{"class":222,"line":399},[220,13448,2550],{"class":264},[220,13450,13370],{"class":420},[220,13452,386],{"class":264},[220,13454,13455,13457,13459],{"class":222,"line":644},[220,13456,2567],{"class":264},[220,13458,347],{"class":420},[220,13460,359],{"class":264},[220,13462,13463,13465,13467,13469,13471],{"class":222,"line":650},[220,13464,364],{"class":264},[220,13466,15],{"class":346},[220,13468,13393],{"class":264},[220,13470,15],{"class":346},[220,13472,359],{"class":264},[220,13474,13475,13477,13479],{"class":222,"line":656},[220,13476,402],{"class":264},[220,13478,13329],{"class":346},[220,13480,359],{"class":264},[212,13482,13484],{"className":468,"code":13483,"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,13485,13486,13494,13506,13520,13528,13536,13548],{"__ignoreMap":178},[220,13487,13488,13490,13492],{"class":222,"line":223},[220,13489,343],{"class":264},[220,13491,13329],{"class":346},[220,13493,359],{"class":264},[220,13495,13496,13498,13500,13502,13504],{"class":222,"line":179},[220,13497,364],{"class":264},[220,13499,15],{"class":346},[220,13501,13340],{"class":264},[220,13503,15],{"class":346},[220,13505,359],{"class":264},[220,13507,13508,13510,13512,13514,13516,13518],{"class":222,"line":389},[220,13509,364],{"class":264},[220,13511,347],{"class":420},[220,13513,350],{"class":226},[220,13515,353],{"class":260},[220,13517,13361],{"class":230},[220,13519,359],{"class":264},[220,13521,13522,13524,13526],{"class":222,"line":399},[220,13523,2550],{"class":264},[220,13525,13370],{"class":420},[220,13527,386],{"class":264},[220,13529,13530,13532,13534],{"class":222,"line":644},[220,13531,2567],{"class":264},[220,13533,347],{"class":420},[220,13535,359],{"class":264},[220,13537,13538,13540,13542,13544,13546],{"class":222,"line":650},[220,13539,364],{"class":264},[220,13541,15],{"class":346},[220,13543,13393],{"class":264},[220,13545,15],{"class":346},[220,13547,359],{"class":264},[220,13549,13550,13552,13554],{"class":222,"line":656},[220,13551,402],{"class":264},[220,13553,13329],{"class":346},[220,13555,359],{"class":264},[212,13557,13558],{"className":468,"code":13483,"language":469,"meta":178,"style":178},[99,13559,13560,13568,13580,13594,13602,13610,13622],{"__ignoreMap":178},[220,13561,13562,13564,13566],{"class":222,"line":223},[220,13563,343],{"class":264},[220,13565,13329],{"class":346},[220,13567,359],{"class":264},[220,13569,13570,13572,13574,13576,13578],{"class":222,"line":179},[220,13571,364],{"class":264},[220,13573,15],{"class":346},[220,13575,13340],{"class":264},[220,13577,15],{"class":346},[220,13579,359],{"class":264},[220,13581,13582,13584,13586,13588,13590,13592],{"class":222,"line":389},[220,13583,364],{"class":264},[220,13585,347],{"class":420},[220,13587,350],{"class":226},[220,13589,353],{"class":260},[220,13591,13361],{"class":230},[220,13593,359],{"class":264},[220,13595,13596,13598,13600],{"class":222,"line":399},[220,13597,2550],{"class":264},[220,13599,13370],{"class":420},[220,13601,386],{"class":264},[220,13603,13604,13606,13608],{"class":222,"line":644},[220,13605,2567],{"class":264},[220,13607,347],{"class":420},[220,13609,359],{"class":264},[220,13611,13612,13614,13616,13618,13620],{"class":222,"line":650},[220,13613,364],{"class":264},[220,13615,15],{"class":346},[220,13617,13393],{"class":264},[220,13619,15],{"class":346},[220,13621,359],{"class":264},[220,13623,13624,13626,13628],{"class":222,"line":656},[220,13625,402],{"class":264},[220,13627,13329],{"class":346},[220,13629,359],{"class":264},[23,13631,13633],{"id":13632},"layering-content-over-shaders","Layering content over shaders",[3262,13635,13637],{"id":13636},"pointer-events","Pointer events",[15,13639,13640,13641,13644],{},"Canvases capture all pointer events by default. Add ",[99,13642,13643],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,13646,13647,13683,13718,13752],{":tabs":248},[212,13648,13650],{"className":334,"code":13649,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,13651,13652,13667,13675],{"__ignoreMap":178},[220,13653,13654,13656,13658,13660,13662,13665],{"class":222,"line":223},[220,13655,343],{"class":264},[220,13657,347],{"class":346},[220,13659,350],{"class":226},[220,13661,353],{"class":264},[220,13663,13664],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,13666,359],{"class":264},[220,13668,13669,13671,13673],{"class":222,"line":179},[220,13670,364],{"class":264},[220,13672,11984],{"class":346},[220,13674,386],{"class":264},[220,13676,13677,13679,13681],{"class":222,"line":389},[220,13678,402],{"class":264},[220,13680,347],{"class":346},[220,13682,359],{"class":264},[212,13684,13686],{"className":409,"code":13685,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,13687,13688,13702,13710],{"__ignoreMap":178},[220,13689,13690,13692,13694,13696,13698,13700],{"class":222,"line":223},[220,13691,343],{"class":264},[220,13693,347],{"class":420},[220,13695,423],{"class":226},[220,13697,353],{"class":260},[220,13699,13664],{"class":230},[220,13701,359],{"class":264},[220,13703,13704,13706,13708],{"class":222,"line":179},[220,13705,364],{"class":264},[220,13707,11984],{"class":420},[220,13709,386],{"class":264},[220,13711,13712,13714,13716],{"class":222,"line":389},[220,13713,402],{"class":264},[220,13715,347],{"class":420},[220,13717,359],{"class":264},[212,13719,13720],{"className":468,"code":13649,"language":469,"meta":178,"style":178},[99,13721,13722,13736,13744],{"__ignoreMap":178},[220,13723,13724,13726,13728,13730,13732,13734],{"class":222,"line":223},[220,13725,343],{"class":264},[220,13727,347],{"class":420},[220,13729,350],{"class":226},[220,13731,353],{"class":260},[220,13733,13664],{"class":230},[220,13735,359],{"class":264},[220,13737,13738,13740,13742],{"class":222,"line":179},[220,13739,364],{"class":264},[220,13741,11984],{"class":420},[220,13743,386],{"class":264},[220,13745,13746,13748,13750],{"class":222,"line":389},[220,13747,402],{"class":264},[220,13749,347],{"class":420},[220,13751,359],{"class":264},[212,13753,13754],{"className":468,"code":13649,"language":469,"meta":178,"style":178},[99,13755,13756,13770,13778],{"__ignoreMap":178},[220,13757,13758,13760,13762,13764,13766,13768],{"class":222,"line":223},[220,13759,343],{"class":264},[220,13761,347],{"class":420},[220,13763,350],{"class":226},[220,13765,353],{"class":260},[220,13767,13664],{"class":230},[220,13769,359],{"class":264},[220,13771,13772,13774,13776],{"class":222,"line":179},[220,13773,364],{"class":264},[220,13775,11984],{"class":420},[220,13777,386],{"class":264},[220,13779,13780,13782,13784],{"class":222,"line":389},[220,13781,402],{"class":264},[220,13783,347],{"class":420},[220,13785,359],{"class":264},[15,13787,13788,13789,1864,13791,13794,13795,13797],{},"Interactive effects like ",[99,13790,394],{},[99,13792,13793],{},"CursorRipples"," still track global mouse position even with ",[99,13796,13643],{}," — they listen on the window rather than the canvas element.",[3262,13799,13801],{"id":13800},"stacking-context-and-z-index","Stacking context and z-index",[15,13803,13804,13807,13808,13810,13811,1554],{},[99,13805,13806],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,13809,12387],{}," (or similar) and a higher ",[99,13812,13806],{},[212,13814,13816],{"className":12246,"code":13815,"language":12248,"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,13817,13818,13833,13838,13856,13861,13880],{"__ignoreMap":178},[220,13819,13820,13822,13824,13826,13828,13831],{"class":222,"line":223},[220,13821,343],{"class":264},[220,13823,3398],{"class":346},[220,13825,350],{"class":226},[220,13827,353],{"class":264},[220,13829,13830],{"class":230},"\"relative\"",[220,13832,359],{"class":264},[220,13834,13835],{"class":222,"line":179},[220,13836,13837],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,13839,13840,13842,13844,13846,13848,13850,13852,13854],{"class":222,"line":389},[220,13841,364],{"class":264},[220,13843,12257],{"class":346},[220,13845,350],{"class":226},[220,13847,353],{"class":264},[220,13849,12782],{"class":230},[220,13851,3804],{"class":264},[220,13853,12257],{"class":346},[220,13855,359],{"class":264},[220,13857,13858],{"class":222,"line":399},[220,13859,13860],{"class":609}," \u003C!-- content above canvas -->\n",[220,13862,13863,13865,13867,13869,13871,13873,13876,13878],{"class":222,"line":644},[220,13864,364],{"class":264},[220,13866,3398],{"class":346},[220,13868,350],{"class":226},[220,13870,353],{"class":264},[220,13872,12012],{"class":230},[220,13874,13875],{"class":264},">I appear above the canvas\u003C\u002F",[220,13877,3398],{"class":346},[220,13879,359],{"class":264},[220,13881,13882,13884,13886],{"class":222,"line":650},[220,13883,402],{"class":264},[220,13885,3398],{"class":346},[220,13887,359],{"class":264},[23,13889,13891],{"id":13890},"responsive-sizing","Responsive sizing",[15,13893,13894],{},"Shaders responds to any CSS-based resize:",[246,13896,13897,14018,14053,14088],{":tabs":248},[212,13898,13900],{"className":334,"code":13899,"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,13901,13902,13907,13922,13930,13938,13942,13947,13962,13970,13978,13982,13987,14002,14010],{"__ignoreMap":178},[220,13903,13904],{"class":222,"line":223},[220,13905,13906],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,13908,13909,13911,13913,13915,13917,13920],{"class":222,"line":179},[220,13910,343],{"class":264},[220,13912,347],{"class":346},[220,13914,350],{"class":226},[220,13916,353],{"class":264},[220,13918,13919],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,13921,359],{"class":264},[220,13923,13924,13926,13928],{"class":222,"line":389},[220,13925,364],{"class":264},[220,13927,367],{"class":346},[220,13929,386],{"class":264},[220,13931,13932,13934,13936],{"class":222,"line":399},[220,13933,402],{"class":264},[220,13935,347],{"class":346},[220,13937,359],{"class":264},[220,13939,13940],{"class":222,"line":644},[220,13941,647],{"emptyLinePlaceholder":194},[220,13943,13944],{"class":222,"line":650},[220,13945,13946],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,13948,13949,13951,13953,13955,13957,13960],{"class":222,"line":656},[220,13950,343],{"class":264},[220,13952,347],{"class":346},[220,13954,350],{"class":226},[220,13956,353],{"class":264},[220,13958,13959],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,13961,359],{"class":264},[220,13963,13964,13966,13968],{"class":222,"line":673},[220,13965,364],{"class":264},[220,13967,13370],{"class":346},[220,13969,386],{"class":264},[220,13971,13972,13974,13976],{"class":222,"line":682},[220,13973,402],{"class":264},[220,13975,347],{"class":346},[220,13977,359],{"class":264},[220,13979,13980],{"class":222,"line":691},[220,13981,647],{"emptyLinePlaceholder":194},[220,13983,13984],{"class":222,"line":696},[220,13985,13986],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,13988,13989,13991,13993,13995,13997,14000],{"class":222,"line":702},[220,13990,343],{"class":264},[220,13992,347],{"class":346},[220,13994,350],{"class":226},[220,13996,353],{"class":264},[220,13998,13999],{"class":230},"\"w-full h-[100dvh]\"",[220,14001,359],{"class":264},[220,14003,14004,14006,14008],{"class":222,"line":718},[220,14005,364],{"class":264},[220,14007,11984],{"class":346},[220,14009,386],{"class":264},[220,14011,14012,14014,14016],{"class":222,"line":727},[220,14013,402],{"class":264},[220,14015,347],{"class":346},[220,14017,359],{"class":264},[212,14019,14021],{"className":409,"code":14020,"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,14022,14023,14037,14045],{"__ignoreMap":178},[220,14024,14025,14027,14029,14031,14033,14035],{"class":222,"line":223},[220,14026,343],{"class":264},[220,14028,347],{"class":420},[220,14030,423],{"class":226},[220,14032,353],{"class":260},[220,14034,13919],{"class":230},[220,14036,359],{"class":264},[220,14038,14039,14041,14043],{"class":222,"line":179},[220,14040,364],{"class":264},[220,14042,367],{"class":420},[220,14044,386],{"class":264},[220,14046,14047,14049,14051],{"class":222,"line":389},[220,14048,402],{"class":264},[220,14050,347],{"class":420},[220,14052,359],{"class":264},[212,14054,14056],{"className":468,"code":14055,"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,14057,14058,14072,14080],{"__ignoreMap":178},[220,14059,14060,14062,14064,14066,14068,14070],{"class":222,"line":223},[220,14061,343],{"class":264},[220,14063,347],{"class":420},[220,14065,350],{"class":226},[220,14067,353],{"class":260},[220,14069,13919],{"class":230},[220,14071,359],{"class":264},[220,14073,14074,14076,14078],{"class":222,"line":179},[220,14075,364],{"class":264},[220,14077,367],{"class":420},[220,14079,386],{"class":264},[220,14081,14082,14084,14086],{"class":222,"line":389},[220,14083,402],{"class":264},[220,14085,347],{"class":420},[220,14087,359],{"class":264},[212,14089,14090],{"className":468,"code":14055,"language":469,"meta":178,"style":178},[99,14091,14092,14106,14114],{"__ignoreMap":178},[220,14093,14094,14096,14098,14100,14102,14104],{"class":222,"line":223},[220,14095,343],{"class":264},[220,14097,347],{"class":420},[220,14099,350],{"class":226},[220,14101,353],{"class":260},[220,14103,13919],{"class":230},[220,14105,359],{"class":264},[220,14107,14108,14110,14112],{"class":222,"line":179},[220,14109,364],{"class":264},[220,14111,367],{"class":420},[220,14113,386],{"class":264},[220,14115,14116,14118,14120],{"class":222,"line":389},[220,14117,402],{"class":264},[220,14119,347],{"class":420},[220,14121,359],{"class":264},[23,14123,14125],{"id":14124},"other-css-properties","Other CSS properties",[15,14127,14128],{},"The canvas element is fully styleable with standard CSS:",[246,14130,14131,14252,14287,14322],{":tabs":248},[212,14132,14134],{"className":334,"code":14133,"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,14135,14136,14141,14156,14164,14172,14176,14181,14196,14204,14212,14216,14221,14236,14244],{"__ignoreMap":178},[220,14137,14138],{"class":222,"line":223},[220,14139,14140],{"class":609},"\u003C!-- Rounded with border -->\n",[220,14142,14143,14145,14147,14149,14151,14154],{"class":222,"line":179},[220,14144,343],{"class":264},[220,14146,347],{"class":346},[220,14148,350],{"class":226},[220,14150,353],{"class":264},[220,14152,14153],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,14155,359],{"class":264},[220,14157,14158,14160,14162],{"class":222,"line":389},[220,14159,364],{"class":264},[220,14161,367],{"class":346},[220,14163,386],{"class":264},[220,14165,14166,14168,14170],{"class":222,"line":399},[220,14167,402],{"class":264},[220,14169,347],{"class":346},[220,14171,359],{"class":264},[220,14173,14174],{"class":222,"line":644},[220,14175,647],{"emptyLinePlaceholder":194},[220,14177,14178],{"class":222,"line":650},[220,14179,14180],{"class":609},"\u003C!-- Drop shadow -->\n",[220,14182,14183,14185,14187,14189,14191,14194],{"class":222,"line":656},[220,14184,343],{"class":264},[220,14186,347],{"class":346},[220,14188,350],{"class":226},[220,14190,353],{"class":264},[220,14192,14193],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,14195,359],{"class":264},[220,14197,14198,14200,14202],{"class":222,"line":673},[220,14199,364],{"class":264},[220,14201,12436],{"class":346},[220,14203,386],{"class":264},[220,14205,14206,14208,14210],{"class":222,"line":682},[220,14207,402],{"class":264},[220,14209,347],{"class":346},[220,14211,359],{"class":264},[220,14213,14214],{"class":222,"line":691},[220,14215,647],{"emptyLinePlaceholder":194},[220,14217,14218],{"class":222,"line":696},[220,14219,14220],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,14222,14223,14225,14227,14229,14231,14234],{"class":222,"line":702},[220,14224,343],{"class":264},[220,14226,347],{"class":346},[220,14228,350],{"class":226},[220,14230,353],{"class":264},[220,14232,14233],{"class":230},"\"blur-sm w-full h-32\"",[220,14235,359],{"class":264},[220,14237,14238,14240,14242],{"class":222,"line":718},[220,14239,364],{"class":264},[220,14241,367],{"class":346},[220,14243,386],{"class":264},[220,14245,14246,14248,14250],{"class":222,"line":727},[220,14247,402],{"class":264},[220,14249,347],{"class":346},[220,14251,359],{"class":264},[212,14253,14255],{"className":409,"code":14254,"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,14256,14257,14271,14279],{"__ignoreMap":178},[220,14258,14259,14261,14263,14265,14267,14269],{"class":222,"line":223},[220,14260,343],{"class":264},[220,14262,347],{"class":420},[220,14264,423],{"class":226},[220,14266,353],{"class":260},[220,14268,14153],{"class":230},[220,14270,359],{"class":264},[220,14272,14273,14275,14277],{"class":222,"line":179},[220,14274,364],{"class":264},[220,14276,367],{"class":420},[220,14278,386],{"class":264},[220,14280,14281,14283,14285],{"class":222,"line":389},[220,14282,402],{"class":264},[220,14284,347],{"class":420},[220,14286,359],{"class":264},[212,14288,14290],{"className":468,"code":14289,"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,14291,14292,14306,14314],{"__ignoreMap":178},[220,14293,14294,14296,14298,14300,14302,14304],{"class":222,"line":223},[220,14295,343],{"class":264},[220,14297,347],{"class":420},[220,14299,350],{"class":226},[220,14301,353],{"class":260},[220,14303,14153],{"class":230},[220,14305,359],{"class":264},[220,14307,14308,14310,14312],{"class":222,"line":179},[220,14309,364],{"class":264},[220,14311,367],{"class":420},[220,14313,386],{"class":264},[220,14315,14316,14318,14320],{"class":222,"line":389},[220,14317,402],{"class":264},[220,14319,347],{"class":420},[220,14321,359],{"class":264},[212,14323,14324],{"className":468,"code":14289,"language":469,"meta":178,"style":178},[99,14325,14326,14340,14348],{"__ignoreMap":178},[220,14327,14328,14330,14332,14334,14336,14338],{"class":222,"line":223},[220,14329,343],{"class":264},[220,14331,347],{"class":420},[220,14333,350],{"class":226},[220,14335,353],{"class":260},[220,14337,14153],{"class":230},[220,14339,359],{"class":264},[220,14341,14342,14344,14346],{"class":222,"line":179},[220,14343,364],{"class":264},[220,14345,367],{"class":420},[220,14347,386],{"class":264},[220,14349,14350,14352,14354],{"class":222,"line":389},[220,14351,402],{"class":264},[220,14353,347],{"class":420},[220,14355,359],{"class":264},[1504,14357,14358],{},"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":14360},[14361,14362,14363,14369,14373,14374],{"id":11623,"depth":179,"text":11624},{"id":593,"depth":179,"text":594},{"id":11942,"depth":179,"text":11943,"children":14364},[14365,14366,14367,14368],{"id":11946,"depth":389,"text":11947},{"id":12380,"depth":389,"text":12381},{"id":12743,"depth":389,"text":12744},{"id":13311,"depth":389,"text":13312},{"id":13632,"depth":179,"text":13633,"children":14370},[14371,14372],{"id":13636,"depth":389,"text":13637},{"id":13800,"depth":389,"text":13801},{"id":13890,"depth":179,"text":13891},{"id":14124,"depth":179,"text":14125},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":14375},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":14382,"title":14383,"body":14384,"category":9599,"description":16656,"exclude":190,"extension":191,"forceFramework":190,"icon":16657,"meta":16658,"navigation":194,"path":16659,"seo":16660,"stem":16661,"__hash__":16662},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":14385,"toc":16645},[14386,14390,14397,14404,14510,14517,14543,14710,14732,14738,14749,14752,14817,14932,14935,14986,14988,15006,15014,15041,15098,15101,15171,15187,15190,15195,15248,15252,15259,15290,15293,15297,15855,15859,15864,16634,16642],[11,14387,14389],{"id":14388},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,14391,14392,14393,14396],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,14394,14395],{},"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,14398,14399,14400,14403],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,14401,14402],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,14405,14407],{"className":334,"code":14406,"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,14408,14409,14414,14434,14438,14443,14451,14465,14470,14475,14480,14485,14490,14495,14502],{"__ignoreMap":178},[220,14410,14411],{"class":222,"line":223},[220,14412,14413],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,14415,14416,14418,14420,14422,14424,14427,14430,14432],{"class":222,"line":179},[220,14417,343],{"class":264},[220,14419,347],{"class":346},[220,14421,350],{"class":226},[220,14423,353],{"class":264},[220,14425,14426],{"class":230},"\"-translate-x-4\"",[220,14428,14429],{"class":264},">...\u003C\u002F",[220,14431,347],{"class":346},[220,14433,359],{"class":264},[220,14435,14436],{"class":222,"line":389},[220,14437,647],{"emptyLinePlaceholder":194},[220,14439,14440],{"class":222,"line":399},[220,14441,14442],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,14444,14445,14447,14449],{"class":222,"line":644},[220,14446,343],{"class":264},[220,14448,347],{"class":346},[220,14450,359],{"class":264},[220,14452,14453,14455,14457,14460,14462],{"class":222,"line":650},[220,14454,364],{"class":264},[220,14456,367],{"class":346},[220,14458,14459],{"class":226}," :bounding-box",[220,14461,353],{"class":264},[220,14463,14464],{"class":230},"\"{\n",[220,14466,14467],{"class":222,"line":656},[220,14468,14469],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,14471,14472],{"class":222,"line":673},[220,14473,14474],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,14476,14477],{"class":222,"line":682},[220,14478,14479],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,14481,14482],{"class":222,"line":691},[220,14483,14484],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,14486,14487],{"class":222,"line":696},[220,14488,14489],{"class":230}," origin: 'top-left',\n",[220,14491,14492],{"class":222,"line":702},[220,14493,14494],{"class":230}," rotation: 0\n",[220,14496,14497,14500],{"class":222,"line":718},[220,14498,14499],{"class":230}," }\"",[220,14501,386],{"class":264},[220,14503,14504,14506,14508],{"class":222,"line":727},[220,14505,402],{"class":264},[220,14507,347],{"class":346},[220,14509,359],{"class":264},[23,14511,1839,14513,14516],{"id":14512},"the-boundingbox-prop",[99,14514,14515],{},"boundingBox"," prop",[15,14518,14519,14520,14522,14523,1895,14526,1895,14529,1895,14532,14535,14536,14539,14540,14542],{},"Every renderable component accepts a ",[99,14521,14515],{}," object. It has four required dimensions — ",[99,14524,14525],{},"x",[99,14527,14528],{},"y",[99,14530,14531],{},"width",[99,14533,14534],{},"height"," — plus an optional ",[99,14537,14538],{},"origin",", a ",[99,14541,11202],{},", and a couple of refinements.",[1794,14544,14545,14560],{},[1797,14546,14547],{},[1800,14548,14549,14552,14555,14558],{},[1803,14550,14551],{},"Field",[1803,14553,14554],{},"Type",[1803,14556,14557],{},"Default",[1803,14559,1808],{},[1810,14561,14562,14582,14599,14614,14629,14657,14675,14691],{},[1800,14563,14564,14568,14573,14576],{},[1815,14565,14566],{},[99,14567,14525],{},[1815,14569,14570],{},[99,14571,14572],{},"{ value, unit }",[1815,14574,14575],{},"—",[1815,14577,14578,14579,14581],{},"Horizontal position of the box's anchor corner, measured in the ",[99,14580,14538],{}," frame",[1800,14583,14584,14588,14592,14594],{},[1815,14585,14586],{},[99,14587,14528],{},[1815,14589,14590],{},[99,14591,14572],{},[1815,14593,14575],{},[1815,14595,14596,14597,14581],{},"Vertical position of the box's anchor corner, measured in the ",[99,14598,14538],{},[1800,14600,14601,14605,14609,14611],{},[1815,14602,14603],{},[99,14604,14531],{},[1815,14606,14607],{},[99,14608,14572],{},[1815,14610,14575],{},[1815,14612,14613],{},"Box width",[1800,14615,14616,14620,14624,14626],{},[1815,14617,14618],{},[99,14619,14534],{},[1815,14621,14622],{},[99,14623,14572],{},[1815,14625,14575],{},[1815,14627,14628],{},"Box height",[1800,14630,14631,14635,14639,14644],{},[1815,14632,14633],{},[99,14634,14538],{},[1815,14636,14637],{},[99,14638,8426],{},[1815,14640,14641],{},[99,14642,14643],{},"'top-left'",[1815,14645,14646,14647,14649,14650,14652,14653],{},"Which reference point ",[99,14648,14525],{}," \u002F ",[99,14651,14528],{}," are measured from — see ",[56,14654,14656],{"href":14655},"#origin","Origin",[1800,14658,14659,14663,14668,14672],{},[1815,14660,14661],{},[99,14662,11202],{},[1815,14664,14665],{},[99,14666,14667],{},"number",[1815,14669,14670],{},[99,14671,8039],{},[1815,14673,14674],{},"Rotation in degrees, around the box's geometric center",[1800,14676,14677,14682,14686,14688],{},[1815,14678,14679],{},[99,14680,14681],{},"cornerRadius",[1815,14683,14684],{},[99,14685,14572],{},[1815,14687,14575],{},[1815,14689,14690],{},"Rounds the corners of the clipped region (filter layers only)",[1800,14692,14693,14698,14703,14707],{},[1815,14694,14695],{},[99,14696,14697],{},"lockAspect",[1815,14699,14700],{},[99,14701,14702],{},"boolean",[1815,14704,14705],{},[99,14706,2629],{},[1815,14708,14709],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,14711,14712,14713,1895,14715,1895,14717,1895,14719,14721,14722,14724,14725,14728,14729,14731],{},"Each of ",[99,14714,14525],{},[99,14716,14528],{},[99,14718,14531],{},[99,14720,14534],{}," (and ",[99,14723,14681],{},") is a ",[159,14726,14727],{},"dimensional value"," — a ",[99,14730,14572],{}," pair, so you can mix relative and absolute units on the same layer.",[15,14733,14734,14735,14737],{},"When no ",[99,14736,14515],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,14739,14741,14742,14745,14746],{"id":14740},"units-uv-vs-px","Units: ",[99,14743,14744],{},"uv"," (%) vs ",[99,14747,14748],{},"px",[15,14750,14751],{},"Each dimension carries its own unit:",[1794,14753,14754,14764],{},[1797,14755,14756],{},[1800,14757,14758,14761],{},[1803,14759,14760],{},"Unit",[1803,14762,14763],{},"Meaning",[1810,14765,14766,14805],{},[1800,14767,14768,14772],{},[1815,14769,14770],{},[99,14771,14744],{},[1815,14773,14774,14775,1895,14778,14780,14781,14783,14784,14786,14787,14789,14790,14786,14792,14794,14795,14797,14798,3506,14801,14804],{},"A ",[159,14776,14777],{},"fraction of the canvas",[99,14779,8039],{},"–",[99,14782,8043],{},". ",[99,14785,14525],{},"\u002F",[99,14788,14531],{}," are fractions of the canvas width; ",[99,14791,14528],{},[99,14793,14534],{}," of the canvas height. ",[99,14796,7120],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,14799,14800],{},"percentage",[99,14802,14803],{},"50%",").",[1800,14806,14807,14811],{},[1815,14808,14809],{},[99,14810,14748],{},[1815,14812,14813,14816],{},[159,14814,14815],{},"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,14818,14820],{"className":334,"code":14819,"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,14821,14822,14827,14840,14845,14850,14855,14860,14865,14870,14877,14881,14886,14898,14903,14908,14913,14918,14922,14926],{"__ignoreMap":178},[220,14823,14824],{"class":222,"line":223},[220,14825,14826],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,14828,14829,14831,14834,14836,14838],{"class":222,"line":179},[220,14830,343],{"class":264},[220,14832,14833],{"class":346},"Glass",[220,14835,14459],{"class":226},[220,14837,353],{"class":264},[220,14839,14464],{"class":230},[220,14841,14842],{"class":222,"line":389},[220,14843,14844],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,14846,14847],{"class":222,"line":399},[220,14848,14849],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,14851,14852],{"class":222,"line":644},[220,14853,14854],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,14856,14857],{"class":222,"line":650},[220,14858,14859],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,14861,14862],{"class":222,"line":656},[220,14863,14864],{"class":230}," origin: 'top-left',\n",[220,14866,14867],{"class":222,"line":673},[220,14868,14869],{"class":230}," rotation: 0\n",[220,14871,14872,14875],{"class":222,"line":682},[220,14873,14874],{"class":230},"}\"",[220,14876,386],{"class":264},[220,14878,14879],{"class":222,"line":691},[220,14880,647],{"emptyLinePlaceholder":194},[220,14882,14883],{"class":222,"line":696},[220,14884,14885],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,14887,14888,14890,14892,14894,14896],{"class":222,"line":702},[220,14889,343],{"class":264},[220,14891,14833],{"class":346},[220,14893,14459],{"class":226},[220,14895,353],{"class":264},[220,14897,14464],{"class":230},[220,14899,14900],{"class":222,"line":718},[220,14901,14902],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,14904,14905],{"class":222,"line":727},[220,14906,14907],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,14909,14910],{"class":222,"line":2664},[220,14911,14912],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,14914,14915],{"class":222,"line":3522},[220,14916,14917],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,14919,14920],{"class":222,"line":9029},[220,14921,14864],{"class":230},[220,14923,14924],{"class":222,"line":9040},[220,14925,14869],{"class":230},[220,14927,14928,14930],{"class":222,"line":9045},[220,14929,14874],{"class":230},[220,14931,386],{"class":264},[15,14933,14934],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,14936,14938],{"className":334,"code":14937,"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,14939,14940,14952,14957,14962,14967,14972,14976,14980],{"__ignoreMap":178},[220,14941,14942,14944,14946,14948,14950],{"class":222,"line":223},[220,14943,343],{"class":264},[220,14945,367],{"class":346},[220,14947,14459],{"class":226},[220,14949,353],{"class":264},[220,14951,14464],{"class":230},[220,14953,14954],{"class":222,"line":179},[220,14955,14956],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,14958,14959],{"class":222,"line":389},[220,14960,14961],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,14963,14964],{"class":222,"line":399},[220,14965,14966],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,14968,14969],{"class":222,"line":644},[220,14970,14971],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,14973,14974],{"class":222,"line":650},[220,14975,14864],{"class":230},[220,14977,14978],{"class":222,"line":656},[220,14979,14869],{"class":230},[220,14981,14982,14984],{"class":222,"line":673},[220,14983,14874],{"class":230},[220,14985,386],{"class":264},[23,14987,14656],{"id":14538},[15,14989,1839,14990,14992,14993,14996,14997,1864,14999,15001,15002,15005],{},[99,14991,14538],{}," is the ",[159,14994,14995],{},"reference point"," that ",[99,14998,14525],{},[99,15000,14528],{}," are measured from — the box's anchor corner ",[1847,15003,15004],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,15007,15012],{"className":15008,"code":15010,"language":15011},[15009],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,15013,15010],{"__ignoreMap":178},[15,15015,15016,15017,15020,15021,15024,15025,15027,15028,1895,15031,15034,15035,15037,15038,15040],{},"The two axes are independent. The horizontal part picks the X reference (",[99,15018,15019],{},"left"," → from the left edge, ",[99,15022,15023],{},"right"," → from the right edge, ",[99,15026,7607],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,15029,15030],{},"top",[99,15032,15033],{},"bottom",", or ",[99,15036,7607],{},"). The bare value ",[99,15039,7607],{}," centers both axes.",[34,15042,15043,15053,15069,15084],{},[37,15044,15045,15047,15048,14786,15050,15052],{},[99,15046,14643],{}," (default) — ",[99,15049,14525],{},[99,15051,14528],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,15054,15055,15058,15059,15061,15062,15065,15066,15068],{},[99,15056,15057],{},"'top-right'"," — ",[99,15060,14525],{}," is measured ",[1847,15063,15064],{},"leftward"," from the right edge; ",[99,15067,14528],{}," downward from the top.",[37,15070,15071,15058,15074,15076,15077,15079,15080,15083],{},[99,15072,15073],{},"'bottom-right'",[99,15075,14525],{}," leftward from the right, ",[99,15078,14528],{}," ",[1847,15081,15082],{},"upward"," from the bottom.",[37,15085,15086,15058,15089,14786,15091,15093,15094,15097],{},[99,15087,15088],{},"'center'",[99,15090,14525],{},[99,15092,14528],{}," are signed offsets from the canvas center (",[99,15095,15096],{},"0, 0"," centers the box).",[15,15099,15100],{},"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,15102,15104],{"className":334,"code":15103,"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,15105,15106,15113,15123,15132,15137,15142,15147,15152,15157,15161,15166],{"__ignoreMap":178},[220,15107,15108,15110],{"class":222,"line":223},[220,15109,343],{"class":264},[220,15111,15112],{"class":346},"ImageTexture\n",[220,15114,15115,15118,15120],{"class":222,"line":179},[220,15116,15117],{"class":226}," url",[220,15119,353],{"class":264},[220,15121,15122],{"class":230},"\"\u002Fbadge.svg\"\n",[220,15124,15125,15128,15130],{"class":222,"line":389},[220,15126,15127],{"class":226}," :bounding-box",[220,15129,353],{"class":264},[220,15131,14464],{"class":230},[220,15133,15134],{"class":222,"line":399},[220,15135,15136],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15138,15139],{"class":222,"line":644},[220,15140,15141],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15143,15144],{"class":222,"line":650},[220,15145,15146],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,15148,15149],{"class":222,"line":656},[220,15150,15151],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,15153,15154],{"class":222,"line":673},[220,15155,15156],{"class":230}," origin: 'top-right',\n",[220,15158,15159],{"class":222,"line":682},[220,15160,14494],{"class":230},[220,15162,15163],{"class":222,"line":691},[220,15164,15165],{"class":230}," }\"\n",[220,15167,15168],{"class":222,"line":696},[220,15169,15170],{"class":264},"\u002F>\n",[15172,15173,15174],"blockquote",{},[15,15175,15176,15079,15179,15181,15182,14786,15184,15186],{},[159,15177,15178],{},"Origin vs. rotation pivot:",[99,15180,14538],{}," only controls where ",[99,15183,14525],{},[99,15185,14528],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,15188,15189],{"id":11202},"Rotation",[15,15191,15192,15194],{},[99,15193,11202],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,15196,15198],{"className":334,"code":15197,"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,15199,15200,15213,15218,15223,15228,15233,15237,15242],{"__ignoreMap":178},[220,15201,15202,15204,15207,15209,15211],{"class":222,"line":223},[220,15203,343],{"class":264},[220,15205,15206],{"class":346},"Stripes",[220,15208,14459],{"class":226},[220,15210,353],{"class":264},[220,15212,14464],{"class":230},[220,15214,15215],{"class":222,"line":179},[220,15216,15217],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,15219,15220],{"class":222,"line":389},[220,15221,15222],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,15224,15225],{"class":222,"line":399},[220,15226,15227],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,15229,15230],{"class":222,"line":644},[220,15231,15232],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,15234,15235],{"class":222,"line":650},[220,15236,14864],{"class":230},[220,15238,15239],{"class":222,"line":656},[220,15240,15241],{"class":230}," rotation: 30\n",[220,15243,15244,15246],{"class":222,"line":673},[220,15245,14874],{"class":230},[220,15247,386],{"class":264},[23,15249,15251],{"id":15250},"how-different-layers-fill-the-box","How different layers fill the box",[15,15253,15254,15255,15258],{},"The box means \"draw this layer here,\" but exactly ",[1847,15256,15257],{},"how"," a layer fills its box depends on the kind of layer:",[34,15260,15261,15271,15277],{},[37,15262,15263,15266,15267,15270],{},[159,15264,15265],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,15268,15269],{},"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,15272,15273,15276],{},[159,15274,15275],{},"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,15278,15279,15282,15283,15286,15287,15289],{},[159,15280,15281],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,15284,15285],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,15288,14681],{}," applies, rounding the clipped region.",[15,15291,15292],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,15294,15296],{"id":15295},"basic-usage-across-frameworks","Basic usage across frameworks",[246,15298,15299,15373,15498,15609,15719],{":tabs":1557},[212,15300,15302],{"className":334,"code":15301,"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,15303,15304,15318,15330,15335,15340,15345,15350,15354,15359,15365],{"__ignoreMap":178},[220,15305,15306,15308,15310,15312,15314,15316],{"class":222,"line":223},[220,15307,343],{"class":264},[220,15309,347],{"class":346},[220,15311,350],{"class":226},[220,15313,353],{"class":264},[220,15315,356],{"class":230},[220,15317,359],{"class":264},[220,15319,15320,15322,15324,15326,15328],{"class":222,"line":179},[220,15321,364],{"class":264},[220,15323,367],{"class":346},[220,15325,14459],{"class":226},[220,15327,353],{"class":264},[220,15329,14464],{"class":230},[220,15331,15332],{"class":222,"line":389},[220,15333,15334],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,15336,15337],{"class":222,"line":399},[220,15338,15339],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,15341,15342],{"class":222,"line":644},[220,15343,15344],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,15346,15347],{"class":222,"line":650},[220,15348,15349],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,15351,15352],{"class":222,"line":656},[220,15353,14489],{"class":230},[220,15355,15356],{"class":222,"line":673},[220,15357,15358],{"class":230}," rotation: 15\n",[220,15360,15361,15363],{"class":222,"line":682},[220,15362,14499],{"class":230},[220,15364,386],{"class":264},[220,15366,15367,15369,15371],{"class":222,"line":691},[220,15368,402],{"class":264},[220,15370,347],{"class":346},[220,15372,359],{"class":264},[212,15374,15376],{"className":409,"code":15375,"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,15377,15378,15392,15398,15408,15425,15438,15451,15464,15473,15481,15486,15490],{"__ignoreMap":178},[220,15379,15380,15382,15384,15386,15388,15390],{"class":222,"line":223},[220,15381,343],{"class":264},[220,15383,347],{"class":420},[220,15385,423],{"class":226},[220,15387,353],{"class":260},[220,15389,356],{"class":230},[220,15391,359],{"class":264},[220,15393,15394,15396],{"class":222,"line":179},[220,15395,364],{"class":264},[220,15397,1189],{"class":420},[220,15399,15400,15403,15405],{"class":222,"line":389},[220,15401,15402],{"class":226}," boundingBox",[220,15404,353],{"class":260},[220,15406,15407],{"class":264},"{{\n",[220,15409,15410,15413,15416,15419,15422],{"class":222,"line":399},[220,15411,15412],{"class":264}," x: { unit: ",[220,15414,15415],{"class":230},"'uv'",[220,15417,15418],{"class":264},", value: ",[220,15420,15421],{"class":420},"0.1",[220,15423,15424],{"class":264}," },\n",[220,15426,15427,15430,15432,15434,15436],{"class":222,"line":644},[220,15428,15429],{"class":264}," y: { unit: ",[220,15431,15415],{"class":230},[220,15433,15418],{"class":264},[220,15435,15421],{"class":420},[220,15437,15424],{"class":264},[220,15439,15440,15443,15445,15447,15449],{"class":222,"line":650},[220,15441,15442],{"class":264}," width: { unit: ",[220,15444,15415],{"class":230},[220,15446,15418],{"class":264},[220,15448,5665],{"class":420},[220,15450,15424],{"class":264},[220,15452,15453,15456,15458,15460,15462],{"class":222,"line":656},[220,15454,15455],{"class":264}," height: { unit: ",[220,15457,15415],{"class":230},[220,15459,15418],{"class":264},[220,15461,5665],{"class":420},[220,15463,15424],{"class":264},[220,15465,15466,15469,15471],{"class":222,"line":673},[220,15467,15468],{"class":264}," origin: ",[220,15470,14643],{"class":230},[220,15472,1760],{"class":264},[220,15474,15475,15478],{"class":222,"line":682},[220,15476,15477],{"class":264}," rotation: ",[220,15479,15480],{"class":420},"15\n",[220,15482,15483],{"class":222,"line":691},[220,15484,15485],{"class":264}," }}\n",[220,15487,15488],{"class":222,"line":696},[220,15489,1234],{"class":264},[220,15491,15492,15494,15496],{"class":222,"line":702},[220,15493,402],{"class":264},[220,15495,347],{"class":420},[220,15497,359],{"class":264},[212,15499,15501],{"className":468,"code":15500,"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,15502,15503,15517,15523,15531,15543,15555,15567,15579,15587,15593,15597,15601],{"__ignoreMap":178},[220,15504,15505,15507,15509,15511,15513,15515],{"class":222,"line":223},[220,15506,343],{"class":264},[220,15508,347],{"class":420},[220,15510,350],{"class":226},[220,15512,353],{"class":260},[220,15514,356],{"class":230},[220,15516,359],{"class":264},[220,15518,15519,15521],{"class":222,"line":179},[220,15520,364],{"class":264},[220,15522,1189],{"class":420},[220,15524,15525,15527,15529],{"class":222,"line":389},[220,15526,15402],{"class":226},[220,15528,353],{"class":260},[220,15530,15407],{"class":264},[220,15532,15533,15535,15537,15539,15541],{"class":222,"line":399},[220,15534,15412],{"class":264},[220,15536,15415],{"class":230},[220,15538,15418],{"class":264},[220,15540,15421],{"class":420},[220,15542,15424],{"class":264},[220,15544,15545,15547,15549,15551,15553],{"class":222,"line":644},[220,15546,15429],{"class":264},[220,15548,15415],{"class":230},[220,15550,15418],{"class":264},[220,15552,15421],{"class":420},[220,15554,15424],{"class":264},[220,15556,15557,15559,15561,15563,15565],{"class":222,"line":650},[220,15558,15442],{"class":264},[220,15560,15415],{"class":230},[220,15562,15418],{"class":264},[220,15564,5665],{"class":420},[220,15566,15424],{"class":264},[220,15568,15569,15571,15573,15575,15577],{"class":222,"line":656},[220,15570,15455],{"class":264},[220,15572,15415],{"class":230},[220,15574,15418],{"class":264},[220,15576,5665],{"class":420},[220,15578,15424],{"class":264},[220,15580,15581,15583,15585],{"class":222,"line":673},[220,15582,15468],{"class":264},[220,15584,14643],{"class":230},[220,15586,1760],{"class":264},[220,15588,15589,15591],{"class":222,"line":682},[220,15590,15477],{"class":264},[220,15592,15480],{"class":420},[220,15594,15595],{"class":222,"line":691},[220,15596,15485],{"class":264},[220,15598,15599],{"class":222,"line":696},[220,15600,1234],{"class":264},[220,15602,15603,15605,15607],{"class":222,"line":702},[220,15604,402],{"class":264},[220,15606,347],{"class":420},[220,15608,359],{"class":264},[212,15610,15611],{"className":468,"code":15500,"language":469,"meta":178,"style":178},[99,15612,15613,15627,15633,15641,15653,15665,15677,15689,15697,15703,15707,15711],{"__ignoreMap":178},[220,15614,15615,15617,15619,15621,15623,15625],{"class":222,"line":223},[220,15616,343],{"class":264},[220,15618,347],{"class":420},[220,15620,350],{"class":226},[220,15622,353],{"class":260},[220,15624,356],{"class":230},[220,15626,359],{"class":264},[220,15628,15629,15631],{"class":222,"line":179},[220,15630,364],{"class":264},[220,15632,1189],{"class":420},[220,15634,15635,15637,15639],{"class":222,"line":389},[220,15636,15402],{"class":226},[220,15638,353],{"class":260},[220,15640,15407],{"class":264},[220,15642,15643,15645,15647,15649,15651],{"class":222,"line":399},[220,15644,15412],{"class":264},[220,15646,15415],{"class":230},[220,15648,15418],{"class":264},[220,15650,15421],{"class":420},[220,15652,15424],{"class":264},[220,15654,15655,15657,15659,15661,15663],{"class":222,"line":644},[220,15656,15429],{"class":264},[220,15658,15415],{"class":230},[220,15660,15418],{"class":264},[220,15662,15421],{"class":420},[220,15664,15424],{"class":264},[220,15666,15667,15669,15671,15673,15675],{"class":222,"line":650},[220,15668,15442],{"class":264},[220,15670,15415],{"class":230},[220,15672,15418],{"class":264},[220,15674,5665],{"class":420},[220,15676,15424],{"class":264},[220,15678,15679,15681,15683,15685,15687],{"class":222,"line":656},[220,15680,15455],{"class":264},[220,15682,15415],{"class":230},[220,15684,15418],{"class":264},[220,15686,5665],{"class":420},[220,15688,15424],{"class":264},[220,15690,15691,15693,15695],{"class":222,"line":673},[220,15692,15468],{"class":264},[220,15694,14643],{"class":230},[220,15696,1760],{"class":264},[220,15698,15699,15701],{"class":222,"line":682},[220,15700,15477],{"class":264},[220,15702,15480],{"class":420},[220,15704,15705],{"class":222,"line":691},[220,15706,15485],{"class":264},[220,15708,15709],{"class":222,"line":696},[220,15710,1234],{"class":264},[220,15712,15713,15715,15717],{"class":222,"line":702},[220,15714,402],{"class":264},[220,15716,347],{"class":420},[220,15718,359],{"class":264},[212,15720,15722],{"className":251,"code":15721,"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,15723,15724,15738,15742,15747,15756,15761,15766,15779,15792,15805,15818,15827,15834,15839,15843,15847,15851],{"__ignoreMap":178},[220,15725,15726,15728,15730,15732,15734,15736],{"class":222,"line":223},[220,15727,1735],{"class":260},[220,15729,1738],{"class":420},[220,15731,1741],{"class":260},[220,15733,1744],{"class":260},[220,15735,1747],{"class":226},[220,15737,1750],{"class":264},[220,15739,15740],{"class":222,"line":179},[220,15741,1765],{"class":264},[220,15743,15744],{"class":222,"line":389},[220,15745,15746],{"class":264}," {\n",[220,15748,15749,15752,15754],{"class":222,"line":399},[220,15750,15751],{"class":264}," type: ",[220,15753,2462],{"class":230},[220,15755,1760],{"class":264},[220,15757,15758],{"class":222,"line":644},[220,15759,15760],{"class":264}," props: {\n",[220,15762,15763],{"class":222,"line":650},[220,15764,15765],{"class":264}," boundingBox: {\n",[220,15767,15768,15771,15773,15775,15777],{"class":222,"line":656},[220,15769,15770],{"class":264}," x: { unit: ",[220,15772,15415],{"class":230},[220,15774,15418],{"class":264},[220,15776,15421],{"class":420},[220,15778,15424],{"class":264},[220,15780,15781,15784,15786,15788,15790],{"class":222,"line":673},[220,15782,15783],{"class":264}," y: { unit: ",[220,15785,15415],{"class":230},[220,15787,15418],{"class":264},[220,15789,15421],{"class":420},[220,15791,15424],{"class":264},[220,15793,15794,15797,15799,15801,15803],{"class":222,"line":682},[220,15795,15796],{"class":264}," width: { unit: ",[220,15798,15415],{"class":230},[220,15800,15418],{"class":264},[220,15802,5665],{"class":420},[220,15804,15424],{"class":264},[220,15806,15807,15810,15812,15814,15816],{"class":222,"line":691},[220,15808,15809],{"class":264}," height: { unit: ",[220,15811,15415],{"class":230},[220,15813,15418],{"class":264},[220,15815,5665],{"class":420},[220,15817,15424],{"class":264},[220,15819,15820,15823,15825],{"class":222,"line":696},[220,15821,15822],{"class":264}," origin: ",[220,15824,14643],{"class":230},[220,15826,1760],{"class":264},[220,15828,15829,15832],{"class":222,"line":702},[220,15830,15831],{"class":264}," rotation: ",[220,15833,15480],{"class":420},[220,15835,15836],{"class":222,"line":718},[220,15837,15838],{"class":264}," }\n",[220,15840,15841],{"class":222,"line":727},[220,15842,4912],{"class":264},[220,15844,15845],{"class":222,"line":2664},[220,15846,4604],{"class":264},[220,15848,15849],{"class":222,"line":3522},[220,15850,1787],{"class":264},[220,15852,15853],{"class":222,"line":9029},[220,15854,1792],{"class":264},[23,15856,15858],{"id":15857},"animating-a-bounding-box","Animating a bounding box",[15,15860,15861,15863],{},[99,15862,14515],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,15865,15867,16119,16421],{":tabs":15866},"[\"Vue\", \"React\", \"JS\"]",[212,15868,15870],{"className":334,"code":15869,"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,15871,15872,15882,15893,15897,15914,15922,15926,15936,15950,15973,15986,15990,16001,16005,16020,16028,16032,16040,16054,16066,16071,16076,16081,16086,16091,16096,16103,16111],{"__ignoreMap":178},[220,15873,15874,15876,15878,15880],{"class":222,"line":223},[220,15875,343],{"class":264},[220,15877,2590],{"class":346},[220,15879,2593],{"class":226},[220,15881,359],{"class":264},[220,15883,15884,15886,15889,15891],{"class":222,"line":179},[220,15885,261],{"class":260},[220,15887,15888],{"class":264}," { ref, onMounted, onUnmounted } ",[220,15890,268],{"class":260},[220,15892,2607],{"class":230},[220,15894,15895],{"class":222,"line":389},[220,15896,647],{"emptyLinePlaceholder":194},[220,15898,15899,15901,15904,15906,15908,15910,15912],{"class":222,"line":399},[220,15900,1735],{"class":260},[220,15902,15903],{"class":420}," rotation",[220,15905,1741],{"class":260},[220,15907,2623],{"class":226},[220,15909,2626],{"class":264},[220,15911,8039],{"class":420},[220,15913,2632],{"class":264},[220,15915,15916,15919],{"class":222,"line":644},[220,15917,15918],{"class":260},"let",[220,15920,15921],{"class":264}," frame\n",[220,15923,15924],{"class":222,"line":650},[220,15925,647],{"emptyLinePlaceholder":194},[220,15927,15928,15930,15932,15934],{"class":222,"line":656},[220,15929,3484],{"class":226},[220,15931,3600],{"class":264},[220,15933,2762],{"class":260},[220,15935,3241],{"class":264},[220,15937,15938,15940,15942,15944,15946,15948],{"class":222,"line":673},[220,15939,2705],{"class":260},[220,15941,11326],{"class":226},[220,15943,1741],{"class":260},[220,15945,3492],{"class":264},[220,15947,2762],{"class":260},[220,15949,3241],{"class":264},[220,15951,15952,15955,15957,15960,15962,15965,15967,15970],{"class":222,"line":682},[220,15953,15954],{"class":264}," rotation.value ",[220,15956,353],{"class":260},[220,15958,15959],{"class":264}," (rotation.value ",[220,15961,10203],{"class":260},[220,15963,15964],{"class":420}," 0.5",[220,15966,4168],{"class":264},[220,15968,15969],{"class":260},"%",[220,15971,15972],{"class":420}," 360\n",[220,15974,15975,15978,15980,15983],{"class":222,"line":691},[220,15976,15977],{"class":264}," frame ",[220,15979,353],{"class":260},[220,15981,15982],{"class":226}," requestAnimationFrame",[220,15984,15985],{"class":264},"(animate)\n",[220,15987,15988],{"class":222,"line":696},[220,15989,3256],{"class":264},[220,15991,15992,15995,15997,15999],{"class":222,"line":702},[220,15993,15994],{"class":264}," frame ",[220,15996,353],{"class":260},[220,15998,15982],{"class":226},[220,16000,15985],{"class":264},[220,16002,16003],{"class":222,"line":718},[220,16004,1792],{"class":264},[220,16006,16007,16010,16012,16014,16017],{"class":222,"line":727},[220,16008,16009],{"class":226},"onUnmounted",[220,16011,3600],{"class":264},[220,16013,2762],{"class":260},[220,16015,16016],{"class":226}," cancelAnimationFrame",[220,16018,16019],{"class":264},"(frame))\n",[220,16021,16022,16024,16026],{"class":222,"line":2664},[220,16023,402],{"class":264},[220,16025,2590],{"class":346},[220,16027,359],{"class":264},[220,16029,16030],{"class":222,"line":3522},[220,16031,647],{"emptyLinePlaceholder":194},[220,16033,16034,16036,16038],{"class":222,"line":9029},[220,16035,343],{"class":264},[220,16037,2519],{"class":346},[220,16039,359],{"class":264},[220,16041,16042,16044,16046,16048,16050,16052],{"class":222,"line":9040},[220,16043,364],{"class":264},[220,16045,347],{"class":346},[220,16047,350],{"class":226},[220,16049,353],{"class":264},[220,16051,356],{"class":230},[220,16053,359],{"class":264},[220,16055,16056,16058,16060,16062,16064],{"class":222,"line":9045},[220,16057,2550],{"class":264},[220,16059,15206],{"class":346},[220,16061,14459],{"class":226},[220,16063,353],{"class":264},[220,16065,14464],{"class":230},[220,16067,16068],{"class":222,"line":10366},[220,16069,16070],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,16072,16073],{"class":222,"line":10371},[220,16074,16075],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,16077,16078],{"class":222,"line":11442},[220,16079,16080],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,16082,16083],{"class":222,"line":11449},[220,16084,16085],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,16087,16088],{"class":222,"line":11454},[220,16089,16090],{"class":230}," origin: 'top-left',\n",[220,16092,16093],{"class":222,"line":11472},[220,16094,16095],{"class":230}," rotation\n",[220,16097,16098,16101],{"class":222,"line":11477},[220,16099,16100],{"class":230}," }\"",[220,16102,386],{"class":264},[220,16104,16105,16107,16109],{"class":222,"line":11486},[220,16106,2567],{"class":264},[220,16108,347],{"class":346},[220,16110,359],{"class":264},[220,16112,16113,16115,16117],{"class":222,"line":11516},[220,16114,402],{"class":264},[220,16116,2519],{"class":346},[220,16118,359],{"class":264},[212,16120,16122],{"className":409,"code":16121,"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,16123,16124,16135,16139,16148,16173,16192,16196,16206,16221,16249,16260,16264,16275,16289,16293,16297,16303,16317,16324,16333,16346,16358,16370,16382,16390,16395,16400,16405,16413,16417],{"__ignoreMap":178},[220,16125,16126,16128,16131,16133],{"class":222,"line":223},[220,16127,261],{"class":260},[220,16129,16130],{"class":264}," { useState, useEffect, useRef } ",[220,16132,268],{"class":260},[220,16134,2687],{"class":230},[220,16136,16137],{"class":222,"line":179},[220,16138,647],{"emptyLinePlaceholder":194},[220,16140,16141,16143,16146],{"class":222,"line":389},[220,16142,2641],{"class":260},[220,16144,16145],{"class":226}," SpinningBox",[220,16147,2647],{"class":264},[220,16149,16150,16152,16154,16156,16158,16161,16163,16165,16167,16169,16171],{"class":222,"line":399},[220,16151,2705],{"class":260},[220,16153,2708],{"class":264},[220,16155,11202],{"class":420},[220,16157,1895],{"class":264},[220,16159,16160],{"class":420},"setRotation",[220,16162,2719],{"class":264},[220,16164,353],{"class":260},[220,16166,2724],{"class":226},[220,16168,2626],{"class":264},[220,16170,8039],{"class":420},[220,16172,2632],{"class":264},[220,16174,16175,16177,16180,16182,16185,16187,16190],{"class":222,"line":644},[220,16176,2705],{"class":260},[220,16178,16179],{"class":420}," frameRef",[220,16181,1741],{"class":260},[220,16183,16184],{"class":226}," useRef",[220,16186,2626],{"class":264},[220,16188,16189],{"class":420},"null",[220,16191,2632],{"class":264},[220,16193,16194],{"class":222,"line":650},[220,16195,647],{"emptyLinePlaceholder":194},[220,16197,16198,16200,16202,16204],{"class":222,"line":656},[220,16199,3597],{"class":226},[220,16201,3600],{"class":264},[220,16203,2762],{"class":260},[220,16205,3241],{"class":264},[220,16207,16208,16211,16213,16215,16217,16219],{"class":222,"line":673},[220,16209,16210],{"class":260}," const",[220,16212,11326],{"class":226},[220,16214,1741],{"class":260},[220,16216,3492],{"class":264},[220,16218,2762],{"class":260},[220,16220,3241],{"class":264},[220,16222,16223,16226,16228,16231,16233,16236,16238,16240,16242,16244,16247],{"class":222,"line":682},[220,16224,16225],{"class":226}," setRotation",[220,16227,2626],{"class":264},[220,16229,16230],{"class":3621},"r",[220,16232,10197],{"class":260},[220,16234,16235],{"class":264}," (r ",[220,16237,10203],{"class":260},[220,16239,15964],{"class":420},[220,16241,4168],{"class":264},[220,16243,15969],{"class":260},[220,16245,16246],{"class":420}," 360",[220,16248,2632],{"class":264},[220,16250,16251,16254,16256,16258],{"class":222,"line":691},[220,16252,16253],{"class":264}," frameRef.current ",[220,16255,353],{"class":260},[220,16257,15982],{"class":226},[220,16259,15985],{"class":264},[220,16261,16262],{"class":222,"line":696},[220,16263,4604],{"class":264},[220,16265,16266,16269,16271,16273],{"class":222,"line":702},[220,16267,16268],{"class":264}," frameRef.current ",[220,16270,353],{"class":260},[220,16272,15982],{"class":226},[220,16274,15985],{"class":264},[220,16276,16277,16280,16282,16284,16286],{"class":222,"line":718},[220,16278,16279],{"class":260}," return",[220,16281,3492],{"class":264},[220,16283,2762],{"class":260},[220,16285,16016],{"class":226},[220,16287,16288],{"class":264},"(frameRef.current)\n",[220,16290,16291],{"class":222,"line":727},[220,16292,3637],{"class":264},[220,16294,16295],{"class":222,"line":2664},[220,16296,647],{"emptyLinePlaceholder":194},[220,16298,16299,16301],{"class":222,"line":3522},[220,16300,2739],{"class":260},[220,16302,2742],{"class":264},[220,16304,16305,16307,16309,16311,16313,16315],{"class":222,"line":9029},[220,16306,2550],{"class":264},[220,16308,347],{"class":420},[220,16310,423],{"class":226},[220,16312,353],{"class":260},[220,16314,356],{"class":230},[220,16316,359],{"class":264},[220,16318,16319,16321],{"class":222,"line":9040},[220,16320,2813],{"class":264},[220,16322,16323],{"class":420},"Stripes\n",[220,16325,16326,16329,16331],{"class":222,"line":9045},[220,16327,16328],{"class":226}," boundingBox",[220,16330,353],{"class":260},[220,16332,15407],{"class":264},[220,16334,16335,16337,16339,16341,16344],{"class":222,"line":10366},[220,16336,15770],{"class":264},[220,16338,15415],{"class":230},[220,16340,15418],{"class":264},[220,16342,16343],{"class":420},"0.2",[220,16345,15424],{"class":264},[220,16347,16348,16350,16352,16354,16356],{"class":222,"line":10371},[220,16349,15783],{"class":264},[220,16351,15415],{"class":230},[220,16353,15418],{"class":264},[220,16355,16343],{"class":420},[220,16357,15424],{"class":264},[220,16359,16360,16362,16364,16366,16368],{"class":222,"line":11442},[220,16361,15796],{"class":264},[220,16363,15415],{"class":230},[220,16365,15418],{"class":264},[220,16367,7602],{"class":420},[220,16369,15424],{"class":264},[220,16371,16372,16374,16376,16378,16380],{"class":222,"line":11449},[220,16373,15809],{"class":264},[220,16375,15415],{"class":230},[220,16377,15418],{"class":264},[220,16379,7602],{"class":420},[220,16381,15424],{"class":264},[220,16383,16384,16386,16388],{"class":222,"line":11454},[220,16385,15822],{"class":264},[220,16387,14643],{"class":230},[220,16389,1760],{"class":264},[220,16391,16392],{"class":222,"line":11472},[220,16393,16394],{"class":264}," rotation\n",[220,16396,16397],{"class":222,"line":11477},[220,16398,16399],{"class":264}," }}\n",[220,16401,16402],{"class":222,"line":11486},[220,16403,16404],{"class":264}," \u002F>\n",[220,16406,16407,16409,16411],{"class":222,"line":11516},[220,16408,2828],{"class":264},[220,16410,347],{"class":420},[220,16412,359],{"class":264},[220,16414,16415],{"class":222,"line":11531},[220,16416,2837],{"class":264},[220,16418,16419],{"class":222,"line":11540},[220,16420,749],{"class":264},[212,16422,16424],{"className":251,"code":16423,"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,16425,16426,16436,16440,16454,16458,16472,16476,16480,16484,16496,16510,16530,16543,16548,16560,16572,16584,16596,16604,16608,16612,16616,16623,16627],{"__ignoreMap":178},[220,16427,16428,16430,16432,16434],{"class":222,"line":223},[220,16429,261],{"class":260},[220,16431,10879],{"class":264},[220,16433,268],{"class":260},[220,16435,4007],{"class":230},[220,16437,16438],{"class":222,"line":179},[220,16439,647],{"emptyLinePlaceholder":194},[220,16441,16442,16444,16446,16448,16450,16452],{"class":222,"line":389},[220,16443,1735],{"class":260},[220,16445,1738],{"class":420},[220,16447,1741],{"class":260},[220,16449,1744],{"class":260},[220,16451,1747],{"class":226},[220,16453,1750],{"class":264},[220,16455,16456],{"class":222,"line":399},[220,16457,1765],{"class":264},[220,16459,16460,16462,16465,16467,16470],{"class":222,"line":644},[220,16461,1770],{"class":264},[220,16463,16464],{"class":230},"'Stripes'",[220,16466,3209],{"class":264},[220,16468,16469],{"class":230},"'bars'",[220,16471,2465],{"class":264},[220,16473,16474],{"class":222,"line":650},[220,16475,1787],{"class":264},[220,16477,16478],{"class":222,"line":656},[220,16479,1792],{"class":264},[220,16481,16482],{"class":222,"line":673},[220,16483,647],{"emptyLinePlaceholder":194},[220,16485,16486,16488,16491,16493],{"class":222,"line":682},[220,16487,15918],{"class":260},[220,16489,16490],{"class":264}," rotation ",[220,16492,353],{"class":260},[220,16494,16495],{"class":420}," 0\n",[220,16497,16498,16500,16502,16504,16506,16508],{"class":222,"line":691},[220,16499,1735],{"class":260},[220,16501,11326],{"class":226},[220,16503,1741],{"class":260},[220,16505,3492],{"class":264},[220,16507,2762],{"class":260},[220,16509,3241],{"class":264},[220,16511,16512,16515,16517,16520,16522,16524,16526,16528],{"class":222,"line":696},[220,16513,16514],{"class":264}," rotation ",[220,16516,353],{"class":260},[220,16518,16519],{"class":264}," (rotation ",[220,16521,10203],{"class":260},[220,16523,15964],{"class":420},[220,16525,4168],{"class":264},[220,16527,15969],{"class":260},[220,16529,15972],{"class":420},[220,16531,16532,16535,16537,16539,16541],{"class":222,"line":702},[220,16533,16534],{"class":264}," shader.",[220,16536,10972],{"class":226},[220,16538,2626],{"class":264},[220,16540,16469],{"class":230},[220,16542,11334],{"class":264},[220,16544,16545],{"class":222,"line":718},[220,16546,16547],{"class":264}," boundingBox: {\n",[220,16549,16550,16552,16554,16556,16558],{"class":222,"line":727},[220,16551,15412],{"class":264},[220,16553,15415],{"class":230},[220,16555,15418],{"class":264},[220,16557,16343],{"class":420},[220,16559,15424],{"class":264},[220,16561,16562,16564,16566,16568,16570],{"class":222,"line":2664},[220,16563,15429],{"class":264},[220,16565,15415],{"class":230},[220,16567,15418],{"class":264},[220,16569,16343],{"class":420},[220,16571,15424],{"class":264},[220,16573,16574,16576,16578,16580,16582],{"class":222,"line":3522},[220,16575,15442],{"class":264},[220,16577,15415],{"class":230},[220,16579,15418],{"class":264},[220,16581,7602],{"class":420},[220,16583,15424],{"class":264},[220,16585,16586,16588,16590,16592,16594],{"class":222,"line":9029},[220,16587,15455],{"class":264},[220,16589,15415],{"class":230},[220,16591,15418],{"class":264},[220,16593,7602],{"class":420},[220,16595,15424],{"class":264},[220,16597,16598,16600,16602],{"class":222,"line":9040},[220,16599,15468],{"class":264},[220,16601,14643],{"class":230},[220,16603,1760],{"class":264},[220,16605,16606],{"class":222,"line":9045},[220,16607,16095],{"class":264},[220,16609,16610],{"class":222,"line":10366},[220,16611,4604],{"class":264},[220,16613,16614],{"class":222,"line":10371},[220,16615,12369],{"class":264},[220,16617,16618,16621],{"class":222,"line":11442},[220,16619,16620],{"class":226}," requestAnimationFrame",[220,16622,15985],{"class":264},[220,16624,16625],{"class":222,"line":11449},[220,16626,749],{"class":264},[220,16628,16629,16632],{"class":222,"line":11454},[220,16630,16631],{"class":226},"requestAnimationFrame",[220,16633,15985],{"class":264},[15,16635,16636,16637,16641],{},"For continuous animation, you can also reach for a ",[56,16638,16640],{"href":16639},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,16643,16644],{},"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":16646},[16647,16649,16651,16652,16653,16654,16655],{"id":14512,"depth":179,"text":16648},"The boundingBox prop",{"id":14740,"depth":179,"text":16650},"Units: uv (%) vs px",{"id":14538,"depth":179,"text":14656},{"id":11202,"depth":179,"text":15189},{"id":15250,"depth":179,"text":15251},{"id":15295,"depth":179,"text":15296},{"id":15857,"depth":179,"text":15858},"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":14383,"description":16656},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":16664,"title":16665,"body":16666,"category":9599,"description":20324,"exclude":190,"extension":191,"forceFramework":190,"icon":20325,"meta":20326,"navigation":194,"path":16639,"seo":20327,"stem":20328,"__hash__":20329},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":16667,"toc":20316},[16668,16671,16674,16677,16726,16729,16732,17265,17268,17273,17402,17414,17417,17432,17900,17903,17907,18104,18116,18148,18151,18154,18636,18639,18643,18774,18779,18782,18785,18791,19515,19518,19522,19663,19668,19672,19675,20155,20159,20166,20314],[11,16669,16665],{"id":16670},"dynamic-props",[15,16672,16673],{},"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,16675,16676],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,16678,16680],{"className":334,"code":16679,"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,16681,16682,16687,16702,16706,16711],{"__ignoreMap":178},[220,16683,16684],{"class":222,"line":223},[220,16685,16686],{"class":609},"\u003C!-- Static value -->\n",[220,16688,16689,16691,16693,16696,16698,16700],{"class":222,"line":179},[220,16690,343],{"class":264},[220,16692,2553],{"class":346},[220,16694,16695],{"class":226}," :radius",[220,16697,353],{"class":264},[220,16699,7047],{"class":230},[220,16701,386],{"class":264},[220,16703,16704],{"class":222,"line":389},[220,16705,647],{"emptyLinePlaceholder":194},[220,16707,16708],{"class":222,"line":399},[220,16709,16710],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,16712,16713,16715,16717,16719,16721,16724],{"class":222,"line":644},[220,16714,343],{"class":264},[220,16716,2553],{"class":346},[220,16718,16695],{"class":226},[220,16720,353],{"class":264},[220,16722,16723],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,16725,386],{"class":264},[23,16727,16728],{"id":16728},"auto-animate",[15,16730,16731],{},"Continuously animates a numeric prop between two values over time.",[246,16733,16734,16824,16934,17037,17139],{":tabs":1557},[212,16735,16737],{"className":334,"code":16736,"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,16738,16739,16753,16759,16768,16777,16782,16787,16792,16797,16802,16807,16812,16816],{"__ignoreMap":178},[220,16740,16741,16743,16745,16747,16749,16751],{"class":222,"line":223},[220,16742,343],{"class":264},[220,16744,347],{"class":346},[220,16746,350],{"class":226},[220,16748,353],{"class":264},[220,16750,356],{"class":230},[220,16752,359],{"class":264},[220,16754,16755,16757],{"class":222,"line":179},[220,16756,364],{"class":264},[220,16758,8997],{"class":346},[220,16760,16761,16763,16765],{"class":222,"line":389},[220,16762,9002],{"class":226},[220,16764,353],{"class":264},[220,16766,16767],{"class":230},"\"#6366f1\"\n",[220,16769,16770,16773,16775],{"class":222,"line":399},[220,16771,16772],{"class":226}," :radius",[220,16774,353],{"class":264},[220,16776,14464],{"class":230},[220,16778,16779],{"class":222,"line":644},[220,16780,16781],{"class":230}," type: 'auto-animate',\n",[220,16783,16784],{"class":222,"line":650},[220,16785,16786],{"class":230}," mode: 'ping-pong',\n",[220,16788,16789],{"class":222,"line":656},[220,16790,16791],{"class":230}," outputMin: 0.2,\n",[220,16793,16794],{"class":222,"line":673},[220,16795,16796],{"class":230}," outputMax: 0.6,\n",[220,16798,16799],{"class":222,"line":682},[220,16800,16801],{"class":230}," speed: 0.8,\n",[220,16803,16804],{"class":222,"line":691},[220,16805,16806],{"class":230}," easing: 'sine'\n",[220,16808,16809],{"class":222,"line":696},[220,16810,16811],{"class":230}," }\"\n",[220,16813,16814],{"class":222,"line":702},[220,16815,1234],{"class":264},[220,16817,16818,16820,16822],{"class":222,"line":718},[220,16819,402],{"class":264},[220,16821,347],{"class":346},[220,16823,359],{"class":264},[212,16825,16827],{"className":409,"code":16826,"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,16828,16829,16843,16849,16857,16865,16874,16884,16893,16902,16911,16918,16922,16926],{"__ignoreMap":178},[220,16830,16831,16833,16835,16837,16839,16841],{"class":222,"line":223},[220,16832,343],{"class":264},[220,16834,347],{"class":420},[220,16836,423],{"class":226},[220,16838,353],{"class":260},[220,16840,356],{"class":230},[220,16842,359],{"class":264},[220,16844,16845,16847],{"class":222,"line":179},[220,16846,364],{"class":264},[220,16848,8997],{"class":420},[220,16850,16851,16853,16855],{"class":222,"line":389},[220,16852,9002],{"class":226},[220,16854,353],{"class":260},[220,16856,16767],{"class":230},[220,16858,16859,16861,16863],{"class":222,"line":399},[220,16860,9012],{"class":226},[220,16862,353],{"class":260},[220,16864,15407],{"class":264},[220,16866,16867,16869,16872],{"class":222,"line":644},[220,16868,15751],{"class":264},[220,16870,16871],{"class":230},"'auto-animate'",[220,16873,1760],{"class":264},[220,16875,16876,16879,16882],{"class":222,"line":650},[220,16877,16878],{"class":264}," mode: ",[220,16880,16881],{"class":230},"'ping-pong'",[220,16883,1760],{"class":264},[220,16885,16886,16889,16891],{"class":222,"line":656},[220,16887,16888],{"class":264}," outputMin: ",[220,16890,16343],{"class":420},[220,16892,1760],{"class":264},[220,16894,16895,16898,16900],{"class":222,"line":673},[220,16896,16897],{"class":264}," outputMax: ",[220,16899,7602],{"class":420},[220,16901,1760],{"class":264},[220,16903,16904,16907,16909],{"class":222,"line":682},[220,16905,16906],{"class":264}," speed: ",[220,16908,5665],{"class":420},[220,16910,1760],{"class":264},[220,16912,16913,16915],{"class":222,"line":691},[220,16914,11348],{"class":264},[220,16916,16917],{"class":230},"'sine'\n",[220,16919,16920],{"class":222,"line":696},[220,16921,15485],{"class":264},[220,16923,16924],{"class":222,"line":702},[220,16925,1234],{"class":264},[220,16927,16928,16930,16932],{"class":222,"line":718},[220,16929,402],{"class":264},[220,16931,347],{"class":420},[220,16933,359],{"class":264},[212,16935,16937],{"className":468,"code":16936,"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,16938,16939,16953,16959,16967,16975,16983,16991,16999,17007,17015,17021,17025,17029],{"__ignoreMap":178},[220,16940,16941,16943,16945,16947,16949,16951],{"class":222,"line":223},[220,16942,343],{"class":264},[220,16944,347],{"class":420},[220,16946,350],{"class":226},[220,16948,353],{"class":260},[220,16950,356],{"class":230},[220,16952,359],{"class":264},[220,16954,16955,16957],{"class":222,"line":179},[220,16956,364],{"class":264},[220,16958,8997],{"class":420},[220,16960,16961,16963,16965],{"class":222,"line":389},[220,16962,9002],{"class":226},[220,16964,353],{"class":260},[220,16966,16767],{"class":230},[220,16968,16969,16971,16973],{"class":222,"line":399},[220,16970,9012],{"class":226},[220,16972,353],{"class":260},[220,16974,15407],{"class":264},[220,16976,16977,16979,16981],{"class":222,"line":644},[220,16978,15751],{"class":264},[220,16980,16871],{"class":230},[220,16982,1760],{"class":264},[220,16984,16985,16987,16989],{"class":222,"line":650},[220,16986,16878],{"class":264},[220,16988,16881],{"class":230},[220,16990,1760],{"class":264},[220,16992,16993,16995,16997],{"class":222,"line":656},[220,16994,16888],{"class":264},[220,16996,16343],{"class":420},[220,16998,1760],{"class":264},[220,17000,17001,17003,17005],{"class":222,"line":673},[220,17002,16897],{"class":264},[220,17004,7602],{"class":420},[220,17006,1760],{"class":264},[220,17008,17009,17011,17013],{"class":222,"line":682},[220,17010,16906],{"class":264},[220,17012,5665],{"class":420},[220,17014,1760],{"class":264},[220,17016,17017,17019],{"class":222,"line":691},[220,17018,11348],{"class":264},[220,17020,16917],{"class":230},[220,17022,17023],{"class":222,"line":696},[220,17024,15485],{"class":264},[220,17026,17027],{"class":222,"line":702},[220,17028,1234],{"class":264},[220,17030,17031,17033,17035],{"class":222,"line":718},[220,17032,402],{"class":264},[220,17034,347],{"class":420},[220,17036,359],{"class":264},[212,17038,17039],{"className":468,"code":16936,"language":469,"meta":178,"style":178},[99,17040,17041,17055,17061,17069,17077,17085,17093,17101,17109,17117,17123,17127,17131],{"__ignoreMap":178},[220,17042,17043,17045,17047,17049,17051,17053],{"class":222,"line":223},[220,17044,343],{"class":264},[220,17046,347],{"class":420},[220,17048,350],{"class":226},[220,17050,353],{"class":260},[220,17052,356],{"class":230},[220,17054,359],{"class":264},[220,17056,17057,17059],{"class":222,"line":179},[220,17058,364],{"class":264},[220,17060,8997],{"class":420},[220,17062,17063,17065,17067],{"class":222,"line":389},[220,17064,9002],{"class":226},[220,17066,353],{"class":260},[220,17068,16767],{"class":230},[220,17070,17071,17073,17075],{"class":222,"line":399},[220,17072,9012],{"class":226},[220,17074,353],{"class":260},[220,17076,15407],{"class":264},[220,17078,17079,17081,17083],{"class":222,"line":644},[220,17080,15751],{"class":264},[220,17082,16871],{"class":230},[220,17084,1760],{"class":264},[220,17086,17087,17089,17091],{"class":222,"line":650},[220,17088,16878],{"class":264},[220,17090,16881],{"class":230},[220,17092,1760],{"class":264},[220,17094,17095,17097,17099],{"class":222,"line":656},[220,17096,16888],{"class":264},[220,17098,16343],{"class":420},[220,17100,1760],{"class":264},[220,17102,17103,17105,17107],{"class":222,"line":673},[220,17104,16897],{"class":264},[220,17106,7602],{"class":420},[220,17108,1760],{"class":264},[220,17110,17111,17113,17115],{"class":222,"line":682},[220,17112,16906],{"class":264},[220,17114,5665],{"class":420},[220,17116,1760],{"class":264},[220,17118,17119,17121],{"class":222,"line":691},[220,17120,11348],{"class":264},[220,17122,16917],{"class":230},[220,17124,17125],{"class":222,"line":696},[220,17126,15485],{"class":264},[220,17128,17129],{"class":222,"line":702},[220,17130,1234],{"class":264},[220,17132,17133,17135,17137],{"class":222,"line":718},[220,17134,402],{"class":264},[220,17136,347],{"class":420},[220,17138,359],{"class":264},[212,17140,17142],{"className":251,"code":17141,"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,17143,17144,17158,17162,17166,17174,17178,17188,17193,17202,17211,17220,17229,17238,17245,17249,17253,17257,17261],{"__ignoreMap":178},[220,17145,17146,17148,17150,17152,17154,17156],{"class":222,"line":223},[220,17147,1735],{"class":260},[220,17149,1738],{"class":420},[220,17151,1741],{"class":260},[220,17153,1744],{"class":260},[220,17155,1747],{"class":226},[220,17157,1750],{"class":264},[220,17159,17160],{"class":222,"line":179},[220,17161,1765],{"class":264},[220,17163,17164],{"class":222,"line":389},[220,17165,15746],{"class":264},[220,17167,17168,17170,17172],{"class":222,"line":399},[220,17169,15751],{"class":264},[220,17171,3206],{"class":230},[220,17173,1760],{"class":264},[220,17175,17176],{"class":222,"line":644},[220,17177,15760],{"class":264},[220,17179,17180,17183,17186],{"class":222,"line":650},[220,17181,17182],{"class":264}," color: ",[220,17184,17185],{"class":230},"'#6366f1'",[220,17187,1760],{"class":264},[220,17189,17190],{"class":222,"line":656},[220,17191,17192],{"class":264}," radius: {\n",[220,17194,17195,17198,17200],{"class":222,"line":673},[220,17196,17197],{"class":264}," type: ",[220,17199,16871],{"class":230},[220,17201,1760],{"class":264},[220,17203,17204,17207,17209],{"class":222,"line":682},[220,17205,17206],{"class":264}," mode: ",[220,17208,16881],{"class":230},[220,17210,1760],{"class":264},[220,17212,17213,17216,17218],{"class":222,"line":691},[220,17214,17215],{"class":264}," outputMin: ",[220,17217,16343],{"class":420},[220,17219,1760],{"class":264},[220,17221,17222,17225,17227],{"class":222,"line":696},[220,17223,17224],{"class":264}," outputMax: ",[220,17226,7602],{"class":420},[220,17228,1760],{"class":264},[220,17230,17231,17234,17236],{"class":222,"line":702},[220,17232,17233],{"class":264}," speed: ",[220,17235,5665],{"class":420},[220,17237,1760],{"class":264},[220,17239,17240,17243],{"class":222,"line":718},[220,17241,17242],{"class":264}," easing: ",[220,17244,16917],{"class":230},[220,17246,17247],{"class":222,"line":727},[220,17248,15838],{"class":264},[220,17250,17251],{"class":222,"line":2664},[220,17252,4912],{"class":264},[220,17254,17255],{"class":222,"line":3522},[220,17256,4604],{"class":264},[220,17258,17259],{"class":222,"line":9029},[220,17260,1787],{"class":264},[220,17262,17263],{"class":222,"line":9040},[220,17264,1792],{"class":264},[19,17266],{":preset":17267},"{\"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,17269,17270],{},[159,17271,17272],{},"Properties:",[1794,17274,17275,17288],{},[1797,17276,17277],{},[1800,17278,17279,17282,17284,17286],{},[1803,17280,17281],{},"Prop",[1803,17283,14554],{},[1803,17285,14557],{},[1803,17287,1808],{},[1810,17289,17290,17315,17331,17347,17366],{},[1800,17291,17292,17297,17302,17305],{},[1815,17293,17294],{},[99,17295,17296],{},"mode",[1815,17298,17299],{},[99,17300,17301],{},"'ping-pong' | 'loop'",[1815,17303,17304],{},"required",[1815,17306,17307,17310,17311,17314],{},[99,17308,17309],{},"ping-pong"," oscillates between min and max. ",[99,17312,17313],{},"loop"," advances from min to max then wraps.",[1800,17316,17317,17322,17326,17328],{},[1815,17318,17319],{},[99,17320,17321],{},"outputMin",[1815,17323,17324],{},[99,17325,14667],{},[1815,17327,17304],{},[1815,17329,17330],{},"Value at the start\u002Fbottom of the range.",[1800,17332,17333,17338,17342,17344],{},[1815,17334,17335],{},[99,17336,17337],{},"outputMax",[1815,17339,17340],{},[99,17341,14667],{},[1815,17343,17304],{},[1815,17345,17346],{},"Value at the end\u002Ftop of the range.",[1800,17348,17349,17354,17358,17363],{},[1815,17350,17351],{},[99,17352,17353],{},"speed",[1815,17355,17356],{},[99,17357,14667],{},[1815,17359,17360],{},[99,17361,17362],{},"1.0",[1815,17364,17365],{},"Cycles per second. Negative values reverse the loop direction.",[1800,17367,17368,17373,17377,17382],{},[1815,17369,17370],{},[99,17371,17372],{},"easing",[1815,17374,17375],{},[99,17376,8426],{},[1815,17378,17379],{},[99,17380,17381],{},"'sine'",[1815,17383,17384,17385,17387,17388,1895,17391,1895,17393,1895,17396,1895,17399,8855],{},"Easing curve for ",[99,17386,17309],{}," mode. Options: ",[99,17389,17390],{},"sine",[99,17392,1894],{},[99,17394,17395],{},"quad",[99,17397,17398],{},"expo",[99,17400,17401],{},"bounce",[15,17403,17404,17407,17408,17410,17411,8855],{},[159,17405,17406],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,17409,17313],{}," mode and ",[99,17412,17413],{},"outputMin: 0, outputMax: 360",[23,17415,17416],{"id":17416},"mouse-position",[15,17418,17419,17420,17423,17424,1895,17426,15034,17429,8855],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,17421,17422],{},"{ x, y }"," coordinates, such as ",[99,17425,7607],{},[99,17427,17428],{},"position",[99,17430,17431],{},"offset",[246,17433,17434,17516,17614,17705,17795],{":tabs":1557},[212,17435,17437],{"className":334,"code":17436,"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,17438,17439,17453,17459,17467,17476,17485,17490,17495,17500,17504,17508],{"__ignoreMap":178},[220,17440,17441,17443,17445,17447,17449,17451],{"class":222,"line":223},[220,17442,343],{"class":264},[220,17444,347],{"class":346},[220,17446,350],{"class":226},[220,17448,353],{"class":264},[220,17450,356],{"class":230},[220,17452,359],{"class":264},[220,17454,17455,17457],{"class":222,"line":179},[220,17456,364],{"class":264},[220,17458,8997],{"class":346},[220,17460,17461,17463,17465],{"class":222,"line":389},[220,17462,9002],{"class":226},[220,17464,353],{"class":264},[220,17466,16767],{"class":230},[220,17468,17469,17471,17473],{"class":222,"line":399},[220,17470,16772],{"class":226},[220,17472,353],{"class":264},[220,17474,17475],{"class":230},"\"0.15\"\n",[220,17477,17478,17481,17483],{"class":222,"line":644},[220,17479,17480],{"class":226}," :center",[220,17482,353],{"class":264},[220,17484,14464],{"class":230},[220,17486,17487],{"class":222,"line":650},[220,17488,17489],{"class":230}," type: 'mouse-position',\n",[220,17491,17492],{"class":222,"line":656},[220,17493,17494],{"class":230}," smoothing: 0.12,\n",[220,17496,17497],{"class":222,"line":673},[220,17498,17499],{"class":230}," momentum: 0.2\n",[220,17501,17502],{"class":222,"line":682},[220,17503,16811],{"class":230},[220,17505,17506],{"class":222,"line":691},[220,17507,1234],{"class":264},[220,17509,17510,17512,17514],{"class":222,"line":696},[220,17511,402],{"class":264},[220,17513,347],{"class":346},[220,17515,359],{"class":264},[212,17517,17519],{"className":409,"code":17518,"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,17520,17521,17535,17541,17549,17562,17571,17580,17590,17598,17602,17606],{"__ignoreMap":178},[220,17522,17523,17525,17527,17529,17531,17533],{"class":222,"line":223},[220,17524,343],{"class":264},[220,17526,347],{"class":420},[220,17528,423],{"class":226},[220,17530,353],{"class":260},[220,17532,356],{"class":230},[220,17534,359],{"class":264},[220,17536,17537,17539],{"class":222,"line":179},[220,17538,364],{"class":264},[220,17540,8997],{"class":420},[220,17542,17543,17545,17547],{"class":222,"line":389},[220,17544,9002],{"class":226},[220,17546,353],{"class":260},[220,17548,16767],{"class":230},[220,17550,17551,17553,17555,17557,17560],{"class":222,"line":399},[220,17552,9012],{"class":226},[220,17554,353],{"class":260},[220,17556,743],{"class":264},[220,17558,17559],{"class":420},"0.15",[220,17561,749],{"class":264},[220,17563,17564,17567,17569],{"class":222,"line":644},[220,17565,17566],{"class":226}," center",[220,17568,353],{"class":260},[220,17570,15407],{"class":264},[220,17572,17573,17575,17578],{"class":222,"line":650},[220,17574,15751],{"class":264},[220,17576,17577],{"class":230},"'mouse-position'",[220,17579,1760],{"class":264},[220,17581,17582,17585,17588],{"class":222,"line":656},[220,17583,17584],{"class":264}," smoothing: ",[220,17586,17587],{"class":420},"0.12",[220,17589,1760],{"class":264},[220,17591,17592,17595],{"class":222,"line":673},[220,17593,17594],{"class":264}," momentum: ",[220,17596,17597],{"class":420},"0.2\n",[220,17599,17600],{"class":222,"line":682},[220,17601,15485],{"class":264},[220,17603,17604],{"class":222,"line":691},[220,17605,1234],{"class":264},[220,17607,17608,17610,17612],{"class":222,"line":696},[220,17609,402],{"class":264},[220,17611,347],{"class":420},[220,17613,359],{"class":264},[212,17615,17617],{"className":468,"code":17616,"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,17618,17619,17633,17639,17647,17659,17667,17675,17683,17689,17693,17697],{"__ignoreMap":178},[220,17620,17621,17623,17625,17627,17629,17631],{"class":222,"line":223},[220,17622,343],{"class":264},[220,17624,347],{"class":420},[220,17626,350],{"class":226},[220,17628,353],{"class":260},[220,17630,356],{"class":230},[220,17632,359],{"class":264},[220,17634,17635,17637],{"class":222,"line":179},[220,17636,364],{"class":264},[220,17638,8997],{"class":420},[220,17640,17641,17643,17645],{"class":222,"line":389},[220,17642,9002],{"class":226},[220,17644,353],{"class":260},[220,17646,16767],{"class":230},[220,17648,17649,17651,17653,17655,17657],{"class":222,"line":399},[220,17650,9012],{"class":226},[220,17652,353],{"class":260},[220,17654,743],{"class":264},[220,17656,17559],{"class":420},[220,17658,749],{"class":264},[220,17660,17661,17663,17665],{"class":222,"line":644},[220,17662,17566],{"class":226},[220,17664,353],{"class":260},[220,17666,15407],{"class":264},[220,17668,17669,17671,17673],{"class":222,"line":650},[220,17670,15751],{"class":264},[220,17672,17577],{"class":230},[220,17674,1760],{"class":264},[220,17676,17677,17679,17681],{"class":222,"line":656},[220,17678,17584],{"class":264},[220,17680,17587],{"class":420},[220,17682,1760],{"class":264},[220,17684,17685,17687],{"class":222,"line":673},[220,17686,17594],{"class":264},[220,17688,17597],{"class":420},[220,17690,17691],{"class":222,"line":682},[220,17692,15485],{"class":264},[220,17694,17695],{"class":222,"line":691},[220,17696,1234],{"class":264},[220,17698,17699,17701,17703],{"class":222,"line":696},[220,17700,402],{"class":264},[220,17702,347],{"class":420},[220,17704,359],{"class":264},[212,17706,17707],{"className":468,"code":17616,"language":469,"meta":178,"style":178},[99,17708,17709,17723,17729,17737,17749,17757,17765,17773,17779,17783,17787],{"__ignoreMap":178},[220,17710,17711,17713,17715,17717,17719,17721],{"class":222,"line":223},[220,17712,343],{"class":264},[220,17714,347],{"class":420},[220,17716,350],{"class":226},[220,17718,353],{"class":260},[220,17720,356],{"class":230},[220,17722,359],{"class":264},[220,17724,17725,17727],{"class":222,"line":179},[220,17726,364],{"class":264},[220,17728,8997],{"class":420},[220,17730,17731,17733,17735],{"class":222,"line":389},[220,17732,9002],{"class":226},[220,17734,353],{"class":260},[220,17736,16767],{"class":230},[220,17738,17739,17741,17743,17745,17747],{"class":222,"line":399},[220,17740,9012],{"class":226},[220,17742,353],{"class":260},[220,17744,743],{"class":264},[220,17746,17559],{"class":420},[220,17748,749],{"class":264},[220,17750,17751,17753,17755],{"class":222,"line":644},[220,17752,17566],{"class":226},[220,17754,353],{"class":260},[220,17756,15407],{"class":264},[220,17758,17759,17761,17763],{"class":222,"line":650},[220,17760,15751],{"class":264},[220,17762,17577],{"class":230},[220,17764,1760],{"class":264},[220,17766,17767,17769,17771],{"class":222,"line":656},[220,17768,17584],{"class":264},[220,17770,17587],{"class":420},[220,17772,1760],{"class":264},[220,17774,17775,17777],{"class":222,"line":673},[220,17776,17594],{"class":264},[220,17778,17597],{"class":420},[220,17780,17781],{"class":222,"line":682},[220,17782,15485],{"class":264},[220,17784,17785],{"class":222,"line":691},[220,17786,1234],{"class":264},[220,17788,17789,17791,17793],{"class":222,"line":696},[220,17790,402],{"class":264},[220,17792,347],{"class":420},[220,17794,359],{"class":264},[212,17796,17798],{"className":251,"code":17797,"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,17799,17800,17814,17818,17822,17830,17834,17842,17851,17856,17864,17873,17880,17884,17888,17892,17896],{"__ignoreMap":178},[220,17801,17802,17804,17806,17808,17810,17812],{"class":222,"line":223},[220,17803,1735],{"class":260},[220,17805,1738],{"class":420},[220,17807,1741],{"class":260},[220,17809,1744],{"class":260},[220,17811,1747],{"class":226},[220,17813,1750],{"class":264},[220,17815,17816],{"class":222,"line":179},[220,17817,1765],{"class":264},[220,17819,17820],{"class":222,"line":389},[220,17821,15746],{"class":264},[220,17823,17824,17826,17828],{"class":222,"line":399},[220,17825,15751],{"class":264},[220,17827,3206],{"class":230},[220,17829,1760],{"class":264},[220,17831,17832],{"class":222,"line":644},[220,17833,15760],{"class":264},[220,17835,17836,17838,17840],{"class":222,"line":650},[220,17837,17182],{"class":264},[220,17839,17185],{"class":230},[220,17841,1760],{"class":264},[220,17843,17844,17847,17849],{"class":222,"line":656},[220,17845,17846],{"class":264}," radius: ",[220,17848,17559],{"class":420},[220,17850,1760],{"class":264},[220,17852,17853],{"class":222,"line":673},[220,17854,17855],{"class":264}," center: {\n",[220,17857,17858,17860,17862],{"class":222,"line":682},[220,17859,17197],{"class":264},[220,17861,17577],{"class":230},[220,17863,1760],{"class":264},[220,17865,17866,17869,17871],{"class":222,"line":691},[220,17867,17868],{"class":264}," smoothing: ",[220,17870,17587],{"class":420},[220,17872,1760],{"class":264},[220,17874,17875,17878],{"class":222,"line":696},[220,17876,17877],{"class":264}," momentum: ",[220,17879,17597],{"class":420},[220,17881,17882],{"class":222,"line":702},[220,17883,15838],{"class":264},[220,17885,17886],{"class":222,"line":718},[220,17887,4912],{"class":264},[220,17889,17890],{"class":222,"line":727},[220,17891,4604],{"class":264},[220,17893,17894],{"class":222,"line":2664},[220,17895,1787],{"class":264},[220,17897,17898],{"class":222,"line":3522},[220,17899,1792],{"class":264},[19,17901],{":preset":17902},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,17904,17905],{},[159,17906,17272],{},[1794,17908,17909,17921],{},[1797,17910,17911],{},[1800,17912,17913,17915,17917,17919],{},[1803,17914,17281],{},[1803,17916,14554],{},[1803,17918,14557],{},[1803,17920,1808],{},[1810,17922,17923,17944,17963,17981,17999,18020,18041,18068,18086],{},[1800,17924,17925,17929,17934,17939],{},[1815,17926,17927],{},[99,17928,14525],{},[1815,17930,17931],{},[99,17932,17933],{},"'mouse' | number",[1815,17935,17936],{},[99,17937,17938],{},"'mouse'",[1815,17940,17941,17943],{},[99,17942,17938],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,17945,17946,17950,17954,17958],{},[1815,17947,17948],{},[99,17949,14528],{},[1815,17951,17952],{},[99,17953,17933],{},[1815,17955,17956],{},[99,17957,17938],{},[1815,17959,17960,17962],{},[99,17961,17938],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,17964,17965,17970,17974,17978],{},[1815,17966,17967],{},[99,17968,17969],{},"invertX",[1815,17971,17972],{},[99,17973,14702],{},[1815,17975,17976],{},[99,17977,2629],{},[1815,17979,17980],{},"Flips the X direction — cursor moving right moves position left.",[1800,17982,17983,17988,17992,17996],{},[1815,17984,17985],{},[99,17986,17987],{},"invertY",[1815,17989,17990],{},[99,17991,14702],{},[1815,17993,17994],{},[99,17995,2629],{},[1815,17997,17998],{},"Flips the Y direction.",[1800,18000,18001,18006,18010,18014],{},[1815,18002,18003],{},[99,18004,18005],{},"smoothing",[1815,18007,18008],{},[99,18009,14667],{},[1815,18011,18012],{},[99,18013,8039],{},[1815,18015,18016,18017,18019],{},"Lag amount (0–1). ",[99,18018,8039],{}," = instant, higher values = sluggish follow.",[1800,18021,18022,18027,18031,18035],{},[1815,18023,18024],{},[99,18025,18026],{},"momentum",[1815,18028,18029],{},[99,18030,14667],{},[1815,18032,18033],{},[99,18034,8039],{},[1815,18036,18037,18038,18040],{},"Spring bounce (0–1). ",[99,18039,8039],{}," = no overshoot, values near 1 = springy.",[1800,18042,18043,18048,18052,18056],{},[1815,18044,18045],{},[99,18046,18047],{},"reach",[1815,18049,18050],{},[99,18051,14667],{},[1815,18053,18054],{},[99,18055,8043],{},[1815,18057,18058,18059,18061,18062,18064,18065,18067],{},"Displacement scale. ",[99,18060,8043],{}," = 1:1 with cursor. ",[99,18063,6580],{}," = twice the displacement. ",[99,18066,8039],{}," = pinned to origin.",[1800,18069,18070,18075,18079,18083],{},[1815,18071,18072],{},[99,18073,18074],{},"originX",[1815,18076,18077],{},[99,18078,14667],{},[1815,18080,18081],{},[99,18082,7120],{},[1815,18084,18085],{},"X coordinate of the origin point that displacement scales from.",[1800,18087,18088,18093,18097,18101],{},[1815,18089,18090],{},[99,18091,18092],{},"originY",[1815,18094,18095],{},[99,18096,14667],{},[1815,18098,18099],{},[99,18100,7120],{},[1815,18102,18103],{},"Y coordinate of the origin point.",[15,18105,18106,18109,18110,18112,18113,18115],{},[159,18107,18108],{},"Pinning one axis:"," Set ",[99,18111,14525],{}," or ",[99,18114,14528],{}," to a number to fix that axis while the other tracks the mouse:",[212,18117,18119],{"className":334,"code":18118,"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,18120,18121,18126],{"__ignoreMap":178},[220,18122,18123],{"class":222,"line":223},[220,18124,18125],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,18127,18128,18130,18132,18134,18136,18139,18141,18143,18146],{"class":222,"line":179},[220,18129,343],{"class":264},[220,18131,2553],{"class":346},[220,18133,16695],{"class":226},[220,18135,353],{"class":264},[220,18137,18138],{"class":230},"\"0.15\"",[220,18140,7499],{"class":226},[220,18142,353],{"class":264},[220,18144,18145],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,18147,386],{"class":264},[23,18149,18150],{"id":18150},"mouse",[15,18152,18153],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,18155,18156,18238,18337,18432,18526],{":tabs":1557},[212,18157,18159],{"className":334,"code":18158,"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,18160,18161,18175,18181,18189,18197,18202,18207,18212,18217,18222,18226,18230],{"__ignoreMap":178},[220,18162,18163,18165,18167,18169,18171,18173],{"class":222,"line":223},[220,18164,343],{"class":264},[220,18166,347],{"class":346},[220,18168,350],{"class":226},[220,18170,353],{"class":264},[220,18172,356],{"class":230},[220,18174,359],{"class":264},[220,18176,18177,18179],{"class":222,"line":179},[220,18178,364],{"class":264},[220,18180,8997],{"class":346},[220,18182,18183,18185,18187],{"class":222,"line":389},[220,18184,9002],{"class":226},[220,18186,353],{"class":264},[220,18188,16767],{"class":230},[220,18190,18191,18193,18195],{"class":222,"line":399},[220,18192,16772],{"class":226},[220,18194,353],{"class":264},[220,18196,14464],{"class":230},[220,18198,18199],{"class":222,"line":644},[220,18200,18201],{"class":230}," type: 'mouse',\n",[220,18203,18204],{"class":222,"line":650},[220,18205,18206],{"class":230}," axis: 'x',\n",[220,18208,18209],{"class":222,"line":656},[220,18210,18211],{"class":230}," outputMin: 0.1,\n",[220,18213,18214],{"class":222,"line":673},[220,18215,18216],{"class":230}," outputMax: 0.7,\n",[220,18218,18219],{"class":222,"line":682},[220,18220,18221],{"class":230}," smoothing: 0.1\n",[220,18223,18224],{"class":222,"line":691},[220,18225,16811],{"class":230},[220,18227,18228],{"class":222,"line":696},[220,18229,1234],{"class":264},[220,18231,18232,18234,18236],{"class":222,"line":702},[220,18233,402],{"class":264},[220,18235,347],{"class":346},[220,18237,359],{"class":264},[212,18239,18241],{"className":409,"code":18240,"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,18242,18243,18257,18263,18271,18279,18287,18297,18305,18314,18321,18325,18329],{"__ignoreMap":178},[220,18244,18245,18247,18249,18251,18253,18255],{"class":222,"line":223},[220,18246,343],{"class":264},[220,18248,347],{"class":420},[220,18250,423],{"class":226},[220,18252,353],{"class":260},[220,18254,356],{"class":230},[220,18256,359],{"class":264},[220,18258,18259,18261],{"class":222,"line":179},[220,18260,364],{"class":264},[220,18262,8997],{"class":420},[220,18264,18265,18267,18269],{"class":222,"line":389},[220,18266,9002],{"class":226},[220,18268,353],{"class":260},[220,18270,16767],{"class":230},[220,18272,18273,18275,18277],{"class":222,"line":399},[220,18274,9012],{"class":226},[220,18276,353],{"class":260},[220,18278,15407],{"class":264},[220,18280,18281,18283,18285],{"class":222,"line":644},[220,18282,15751],{"class":264},[220,18284,17938],{"class":230},[220,18286,1760],{"class":264},[220,18288,18289,18292,18295],{"class":222,"line":650},[220,18290,18291],{"class":264}," axis: ",[220,18293,18294],{"class":230},"'x'",[220,18296,1760],{"class":264},[220,18298,18299,18301,18303],{"class":222,"line":656},[220,18300,16888],{"class":264},[220,18302,15421],{"class":420},[220,18304,1760],{"class":264},[220,18306,18307,18309,18312],{"class":222,"line":673},[220,18308,16897],{"class":264},[220,18310,18311],{"class":420},"0.7",[220,18313,1760],{"class":264},[220,18315,18316,18318],{"class":222,"line":682},[220,18317,17584],{"class":264},[220,18319,18320],{"class":420},"0.1\n",[220,18322,18323],{"class":222,"line":691},[220,18324,15485],{"class":264},[220,18326,18327],{"class":222,"line":696},[220,18328,1234],{"class":264},[220,18330,18331,18333,18335],{"class":222,"line":702},[220,18332,402],{"class":264},[220,18334,347],{"class":420},[220,18336,359],{"class":264},[212,18338,18340],{"className":468,"code":18339,"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,18341,18342,18356,18362,18370,18378,18386,18394,18402,18410,18416,18420,18424],{"__ignoreMap":178},[220,18343,18344,18346,18348,18350,18352,18354],{"class":222,"line":223},[220,18345,343],{"class":264},[220,18347,347],{"class":420},[220,18349,350],{"class":226},[220,18351,353],{"class":260},[220,18353,356],{"class":230},[220,18355,359],{"class":264},[220,18357,18358,18360],{"class":222,"line":179},[220,18359,364],{"class":264},[220,18361,8997],{"class":420},[220,18363,18364,18366,18368],{"class":222,"line":389},[220,18365,9002],{"class":226},[220,18367,353],{"class":260},[220,18369,16767],{"class":230},[220,18371,18372,18374,18376],{"class":222,"line":399},[220,18373,9012],{"class":226},[220,18375,353],{"class":260},[220,18377,15407],{"class":264},[220,18379,18380,18382,18384],{"class":222,"line":644},[220,18381,15751],{"class":264},[220,18383,17938],{"class":230},[220,18385,1760],{"class":264},[220,18387,18388,18390,18392],{"class":222,"line":650},[220,18389,18291],{"class":264},[220,18391,18294],{"class":230},[220,18393,1760],{"class":264},[220,18395,18396,18398,18400],{"class":222,"line":656},[220,18397,16888],{"class":264},[220,18399,15421],{"class":420},[220,18401,1760],{"class":264},[220,18403,18404,18406,18408],{"class":222,"line":673},[220,18405,16897],{"class":264},[220,18407,18311],{"class":420},[220,18409,1760],{"class":264},[220,18411,18412,18414],{"class":222,"line":682},[220,18413,17584],{"class":264},[220,18415,18320],{"class":420},[220,18417,18418],{"class":222,"line":691},[220,18419,15485],{"class":264},[220,18421,18422],{"class":222,"line":696},[220,18423,1234],{"class":264},[220,18425,18426,18428,18430],{"class":222,"line":702},[220,18427,402],{"class":264},[220,18429,347],{"class":420},[220,18431,359],{"class":264},[212,18433,18434],{"className":468,"code":18339,"language":469,"meta":178,"style":178},[99,18435,18436,18450,18456,18464,18472,18480,18488,18496,18504,18510,18514,18518],{"__ignoreMap":178},[220,18437,18438,18440,18442,18444,18446,18448],{"class":222,"line":223},[220,18439,343],{"class":264},[220,18441,347],{"class":420},[220,18443,350],{"class":226},[220,18445,353],{"class":260},[220,18447,356],{"class":230},[220,18449,359],{"class":264},[220,18451,18452,18454],{"class":222,"line":179},[220,18453,364],{"class":264},[220,18455,8997],{"class":420},[220,18457,18458,18460,18462],{"class":222,"line":389},[220,18459,9002],{"class":226},[220,18461,353],{"class":260},[220,18463,16767],{"class":230},[220,18465,18466,18468,18470],{"class":222,"line":399},[220,18467,9012],{"class":226},[220,18469,353],{"class":260},[220,18471,15407],{"class":264},[220,18473,18474,18476,18478],{"class":222,"line":644},[220,18475,15751],{"class":264},[220,18477,17938],{"class":230},[220,18479,1760],{"class":264},[220,18481,18482,18484,18486],{"class":222,"line":650},[220,18483,18291],{"class":264},[220,18485,18294],{"class":230},[220,18487,1760],{"class":264},[220,18489,18490,18492,18494],{"class":222,"line":656},[220,18491,16888],{"class":264},[220,18493,15421],{"class":420},[220,18495,1760],{"class":264},[220,18497,18498,18500,18502],{"class":222,"line":673},[220,18499,16897],{"class":264},[220,18501,18311],{"class":420},[220,18503,1760],{"class":264},[220,18505,18506,18508],{"class":222,"line":682},[220,18507,17584],{"class":264},[220,18509,18320],{"class":420},[220,18511,18512],{"class":222,"line":691},[220,18513,15485],{"class":264},[220,18515,18516],{"class":222,"line":696},[220,18517,1234],{"class":264},[220,18519,18520,18522,18524],{"class":222,"line":702},[220,18521,402],{"class":264},[220,18523,347],{"class":420},[220,18525,359],{"class":264},[212,18527,18529],{"className":251,"code":18528,"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,18530,18531,18545,18549,18553,18561,18565,18573,18577,18585,18594,18602,18610,18616,18620,18624,18628,18632],{"__ignoreMap":178},[220,18532,18533,18535,18537,18539,18541,18543],{"class":222,"line":223},[220,18534,1735],{"class":260},[220,18536,1738],{"class":420},[220,18538,1741],{"class":260},[220,18540,1744],{"class":260},[220,18542,1747],{"class":226},[220,18544,1750],{"class":264},[220,18546,18547],{"class":222,"line":179},[220,18548,1765],{"class":264},[220,18550,18551],{"class":222,"line":389},[220,18552,15746],{"class":264},[220,18554,18555,18557,18559],{"class":222,"line":399},[220,18556,15751],{"class":264},[220,18558,3206],{"class":230},[220,18560,1760],{"class":264},[220,18562,18563],{"class":222,"line":644},[220,18564,15760],{"class":264},[220,18566,18567,18569,18571],{"class":222,"line":650},[220,18568,17182],{"class":264},[220,18570,17185],{"class":230},[220,18572,1760],{"class":264},[220,18574,18575],{"class":222,"line":656},[220,18576,17192],{"class":264},[220,18578,18579,18581,18583],{"class":222,"line":673},[220,18580,17197],{"class":264},[220,18582,17938],{"class":230},[220,18584,1760],{"class":264},[220,18586,18587,18590,18592],{"class":222,"line":682},[220,18588,18589],{"class":264}," axis: ",[220,18591,18294],{"class":230},[220,18593,1760],{"class":264},[220,18595,18596,18598,18600],{"class":222,"line":691},[220,18597,17215],{"class":264},[220,18599,15421],{"class":420},[220,18601,1760],{"class":264},[220,18603,18604,18606,18608],{"class":222,"line":696},[220,18605,17224],{"class":264},[220,18607,18311],{"class":420},[220,18609,1760],{"class":264},[220,18611,18612,18614],{"class":222,"line":702},[220,18613,17868],{"class":264},[220,18615,18320],{"class":420},[220,18617,18618],{"class":222,"line":718},[220,18619,15838],{"class":264},[220,18621,18622],{"class":222,"line":727},[220,18623,4912],{"class":264},[220,18625,18626],{"class":222,"line":2664},[220,18627,4604],{"class":264},[220,18629,18630],{"class":222,"line":3522},[220,18631,1787],{"class":264},[220,18633,18634],{"class":222,"line":9029},[220,18635,1792],{"class":264},[19,18637],{":preset":18638},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,18640,18641],{},[159,18642,17272],{},[1794,18644,18645,18657],{},[1797,18646,18647],{},[1800,18648,18649,18651,18653,18655],{},[1803,18650,17281],{},[1803,18652,14554],{},[1803,18654,14557],{},[1803,18656,1808],{},[1810,18658,18659,18676,18691,18706,18736,18755],{},[1800,18660,18661,18666,18671,18673],{},[1815,18662,18663],{},[99,18664,18665],{},"axis",[1815,18667,18668],{},[99,18669,18670],{},"'x' | 'y'",[1815,18672,17304],{},[1815,18674,18675],{},"Which pointer axis drives this prop.",[1800,18677,18678,18682,18686,18688],{},[1815,18679,18680],{},[99,18681,17321],{},[1815,18683,18684],{},[99,18685,14667],{},[1815,18687,17304],{},[1815,18689,18690],{},"Output value when axis is at 0 (left or top).",[1800,18692,18693,18697,18701,18703],{},[1815,18694,18695],{},[99,18696,17337],{},[1815,18698,18699],{},[99,18700,14667],{},[1815,18702,17304],{},[1815,18704,18705],{},"Output value when axis is at 1 (right or bottom).",[1800,18707,18708,18713,18717,18721],{},[1815,18709,18710],{},[99,18711,18712],{},"curve",[1815,18714,18715],{},[99,18716,14667],{},[1815,18718,18719],{},[99,18720,8039],{},[1815,18722,18723,18724,1550,18727,18730,18731,18733,18734,8855],{},"Power curve: ",[99,18725,18726],{},"-1",[99,18728,18729],{},"+1",". Negative = biased toward ",[99,18732,17321],{},", positive = toward ",[99,18735,17337],{},[1800,18737,18738,18742,18746,18750],{},[1815,18739,18740],{},[99,18741,18005],{},[1815,18743,18744],{},[99,18745,14667],{},[1815,18747,18748],{},[99,18749,8039],{},[1815,18751,18752,18753,8855],{},"Lag (0–1). Same as ",[99,18754,17416],{},[1800,18756,18757,18761,18765,18769],{},[1815,18758,18759],{},[99,18760,18026],{},[1815,18762,18763],{},[99,18764,14667],{},[1815,18766,18767],{},[99,18768,8039],{},[1815,18770,18771,18772,8855],{},"Spring bounce (0–1). Same as ",[99,18773,17416],{},[15,18775,18776,18778],{},[159,18777,17406],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,18780,18781],{"id":18781},"map",[15,18783,18784],{},"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,18786,18787,18788,18790],{},"First, give the source component an ",[99,18789,8422],{},". Then reference that id in the driver:",[246,18792,18793,18931,19077,19214,19350],{":tabs":1557},[212,18794,18796],{"className":334,"code":18795,"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,18797,18798,18812,18817,18823,18832,18842,18851,18855,18859,18864,18871,18880,18885,18890,18895,18900,18905,18910,18915,18919,18923],{"__ignoreMap":178},[220,18799,18800,18802,18804,18806,18808,18810],{"class":222,"line":223},[220,18801,343],{"class":264},[220,18803,347],{"class":346},[220,18805,350],{"class":226},[220,18807,353],{"class":264},[220,18809,356],{"class":230},[220,18811,359],{"class":264},[220,18813,18814],{"class":222,"line":179},[220,18815,18816],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,18818,18819,18821],{"class":222,"line":389},[220,18820,364],{"class":264},[220,18822,1189],{"class":346},[220,18824,18825,18827,18829],{"class":222,"line":399},[220,18826,8944],{"class":226},[220,18828,353],{"class":264},[220,18830,18831],{"class":230},"\"grad\"\n",[220,18833,18834,18837,18839],{"class":222,"line":644},[220,18835,18836],{"class":226}," color-a",[220,18838,353],{"class":264},[220,18840,18841],{"class":230},"\"#000000\"\n",[220,18843,18844,18847,18849],{"class":222,"line":650},[220,18845,18846],{"class":226}," color-b",[220,18848,353],{"class":264},[220,18850,8958],{"class":230},[220,18852,18853],{"class":222,"line":656},[220,18854,1234],{"class":264},[220,18856,18857],{"class":222,"line":673},[220,18858,647],{"emptyLinePlaceholder":194},[220,18860,18861],{"class":222,"line":682},[220,18862,18863],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,18865,18866,18868],{"class":222,"line":691},[220,18867,364],{"class":264},[220,18869,18870],{"class":346},"DotGrid\n",[220,18872,18873,18876,18878],{"class":222,"line":696},[220,18874,18875],{"class":226}," :dot-size",[220,18877,353],{"class":264},[220,18879,14464],{"class":230},[220,18881,18882],{"class":222,"line":702},[220,18883,18884],{"class":230}," type: 'map',\n",[220,18886,18887],{"class":222,"line":718},[220,18888,18889],{"class":230}," source: 'grad',\n",[220,18891,18892],{"class":222,"line":727},[220,18893,18894],{"class":230}," channel: 'luminance',\n",[220,18896,18897],{"class":222,"line":2664},[220,18898,18899],{"class":230}," inputMin: 0,\n",[220,18901,18902],{"class":222,"line":3522},[220,18903,18904],{"class":230}," inputMax: 1,\n",[220,18906,18907],{"class":222,"line":9029},[220,18908,18909],{"class":230}," outputMin: 0.02,\n",[220,18911,18912],{"class":222,"line":9040},[220,18913,18914],{"class":230}," outputMax: 0.12\n",[220,18916,18917],{"class":222,"line":9045},[220,18918,16811],{"class":230},[220,18920,18921],{"class":222,"line":10366},[220,18922,1234],{"class":264},[220,18924,18925,18927,18929],{"class":222,"line":10371},[220,18926,402],{"class":264},[220,18928,347],{"class":346},[220,18930,359],{"class":264},[212,18932,18934],{"className":409,"code":18933,"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,18935,18936,18950,18956,18964,18972,18980,18984,18990,18999,19008,19018,19027,19036,19045,19054,19061,19065,19069],{"__ignoreMap":178},[220,18937,18938,18940,18942,18944,18946,18948],{"class":222,"line":223},[220,18939,343],{"class":264},[220,18941,347],{"class":420},[220,18943,423],{"class":226},[220,18945,353],{"class":260},[220,18947,356],{"class":230},[220,18949,359],{"class":264},[220,18951,18952,18954],{"class":222,"line":179},[220,18953,364],{"class":264},[220,18955,1189],{"class":420},[220,18957,18958,18960,18962],{"class":222,"line":389},[220,18959,8944],{"class":226},[220,18961,353],{"class":260},[220,18963,18831],{"class":230},[220,18965,18966,18968,18970],{"class":222,"line":399},[220,18967,1194],{"class":226},[220,18969,353],{"class":260},[220,18971,18841],{"class":230},[220,18973,18974,18976,18978],{"class":222,"line":644},[220,18975,1204],{"class":226},[220,18977,353],{"class":260},[220,18979,8958],{"class":230},[220,18981,18982],{"class":222,"line":650},[220,18983,1234],{"class":264},[220,18985,18986,18988],{"class":222,"line":656},[220,18987,364],{"class":264},[220,18989,18870],{"class":420},[220,18991,18992,18995,18997],{"class":222,"line":673},[220,18993,18994],{"class":226}," dotSize",[220,18996,353],{"class":260},[220,18998,15407],{"class":264},[220,19000,19001,19003,19006],{"class":222,"line":682},[220,19002,15751],{"class":264},[220,19004,19005],{"class":230},"'map'",[220,19007,1760],{"class":264},[220,19009,19010,19013,19016],{"class":222,"line":691},[220,19011,19012],{"class":264}," source: ",[220,19014,19015],{"class":230},"'grad'",[220,19017,1760],{"class":264},[220,19019,19020,19023,19025],{"class":222,"line":696},[220,19021,19022],{"class":264}," channel: ",[220,19024,9573],{"class":230},[220,19026,1760],{"class":264},[220,19028,19029,19032,19034],{"class":222,"line":702},[220,19030,19031],{"class":264}," inputMin: ",[220,19033,8039],{"class":420},[220,19035,1760],{"class":264},[220,19037,19038,19041,19043],{"class":222,"line":718},[220,19039,19040],{"class":264}," inputMax: ",[220,19042,8043],{"class":420},[220,19044,1760],{"class":264},[220,19046,19047,19049,19052],{"class":222,"line":727},[220,19048,16888],{"class":264},[220,19050,19051],{"class":420},"0.02",[220,19053,1760],{"class":264},[220,19055,19056,19058],{"class":222,"line":2664},[220,19057,16897],{"class":264},[220,19059,19060],{"class":420},"0.12\n",[220,19062,19063],{"class":222,"line":3522},[220,19064,15485],{"class":264},[220,19066,19067],{"class":222,"line":9029},[220,19068,1234],{"class":264},[220,19070,19071,19073,19075],{"class":222,"line":9040},[220,19072,402],{"class":264},[220,19074,347],{"class":420},[220,19076,359],{"class":264},[212,19078,19080],{"className":468,"code":19079,"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,19081,19082,19096,19102,19110,19118,19126,19130,19136,19144,19152,19160,19168,19176,19184,19192,19198,19202,19206],{"__ignoreMap":178},[220,19083,19084,19086,19088,19090,19092,19094],{"class":222,"line":223},[220,19085,343],{"class":264},[220,19087,347],{"class":420},[220,19089,350],{"class":226},[220,19091,353],{"class":260},[220,19093,356],{"class":230},[220,19095,359],{"class":264},[220,19097,19098,19100],{"class":222,"line":179},[220,19099,364],{"class":264},[220,19101,1189],{"class":420},[220,19103,19104,19106,19108],{"class":222,"line":389},[220,19105,8944],{"class":226},[220,19107,353],{"class":260},[220,19109,18831],{"class":230},[220,19111,19112,19114,19116],{"class":222,"line":399},[220,19113,1194],{"class":226},[220,19115,353],{"class":260},[220,19117,18841],{"class":230},[220,19119,19120,19122,19124],{"class":222,"line":644},[220,19121,1204],{"class":226},[220,19123,353],{"class":260},[220,19125,8958],{"class":230},[220,19127,19128],{"class":222,"line":650},[220,19129,1234],{"class":264},[220,19131,19132,19134],{"class":222,"line":656},[220,19133,364],{"class":264},[220,19135,18870],{"class":420},[220,19137,19138,19140,19142],{"class":222,"line":673},[220,19139,18994],{"class":226},[220,19141,353],{"class":260},[220,19143,15407],{"class":264},[220,19145,19146,19148,19150],{"class":222,"line":682},[220,19147,15751],{"class":264},[220,19149,19005],{"class":230},[220,19151,1760],{"class":264},[220,19153,19154,19156,19158],{"class":222,"line":691},[220,19155,19012],{"class":264},[220,19157,19015],{"class":230},[220,19159,1760],{"class":264},[220,19161,19162,19164,19166],{"class":222,"line":696},[220,19163,19022],{"class":264},[220,19165,9573],{"class":230},[220,19167,1760],{"class":264},[220,19169,19170,19172,19174],{"class":222,"line":702},[220,19171,19031],{"class":264},[220,19173,8039],{"class":420},[220,19175,1760],{"class":264},[220,19177,19178,19180,19182],{"class":222,"line":718},[220,19179,19040],{"class":264},[220,19181,8043],{"class":420},[220,19183,1760],{"class":264},[220,19185,19186,19188,19190],{"class":222,"line":727},[220,19187,16888],{"class":264},[220,19189,19051],{"class":420},[220,19191,1760],{"class":264},[220,19193,19194,19196],{"class":222,"line":2664},[220,19195,16897],{"class":264},[220,19197,19060],{"class":420},[220,19199,19200],{"class":222,"line":3522},[220,19201,15485],{"class":264},[220,19203,19204],{"class":222,"line":9029},[220,19205,1234],{"class":264},[220,19207,19208,19210,19212],{"class":222,"line":9040},[220,19209,402],{"class":264},[220,19211,347],{"class":420},[220,19213,359],{"class":264},[212,19215,19216],{"className":468,"code":19079,"language":469,"meta":178,"style":178},[99,19217,19218,19232,19238,19246,19254,19262,19266,19272,19280,19288,19296,19304,19312,19320,19328,19334,19338,19342],{"__ignoreMap":178},[220,19219,19220,19222,19224,19226,19228,19230],{"class":222,"line":223},[220,19221,343],{"class":264},[220,19223,347],{"class":420},[220,19225,350],{"class":226},[220,19227,353],{"class":260},[220,19229,356],{"class":230},[220,19231,359],{"class":264},[220,19233,19234,19236],{"class":222,"line":179},[220,19235,364],{"class":264},[220,19237,1189],{"class":420},[220,19239,19240,19242,19244],{"class":222,"line":389},[220,19241,8944],{"class":226},[220,19243,353],{"class":260},[220,19245,18831],{"class":230},[220,19247,19248,19250,19252],{"class":222,"line":399},[220,19249,1194],{"class":226},[220,19251,353],{"class":260},[220,19253,18841],{"class":230},[220,19255,19256,19258,19260],{"class":222,"line":644},[220,19257,1204],{"class":226},[220,19259,353],{"class":260},[220,19261,8958],{"class":230},[220,19263,19264],{"class":222,"line":650},[220,19265,1234],{"class":264},[220,19267,19268,19270],{"class":222,"line":656},[220,19269,364],{"class":264},[220,19271,18870],{"class":420},[220,19273,19274,19276,19278],{"class":222,"line":673},[220,19275,18994],{"class":226},[220,19277,353],{"class":260},[220,19279,15407],{"class":264},[220,19281,19282,19284,19286],{"class":222,"line":682},[220,19283,15751],{"class":264},[220,19285,19005],{"class":230},[220,19287,1760],{"class":264},[220,19289,19290,19292,19294],{"class":222,"line":691},[220,19291,19012],{"class":264},[220,19293,19015],{"class":230},[220,19295,1760],{"class":264},[220,19297,19298,19300,19302],{"class":222,"line":696},[220,19299,19022],{"class":264},[220,19301,9573],{"class":230},[220,19303,1760],{"class":264},[220,19305,19306,19308,19310],{"class":222,"line":702},[220,19307,19031],{"class":264},[220,19309,8039],{"class":420},[220,19311,1760],{"class":264},[220,19313,19314,19316,19318],{"class":222,"line":718},[220,19315,19040],{"class":264},[220,19317,8043],{"class":420},[220,19319,1760],{"class":264},[220,19321,19322,19324,19326],{"class":222,"line":727},[220,19323,16888],{"class":264},[220,19325,19051],{"class":420},[220,19327,1760],{"class":264},[220,19329,19330,19332],{"class":222,"line":2664},[220,19331,16897],{"class":264},[220,19333,19060],{"class":420},[220,19335,19336],{"class":222,"line":3522},[220,19337,15485],{"class":264},[220,19339,19340],{"class":222,"line":9029},[220,19341,1234],{"class":264},[220,19343,19344,19346,19348],{"class":222,"line":9040},[220,19345,402],{"class":264},[220,19347,347],{"class":420},[220,19349,359],{"class":264},[212,19351,19353],{"className":251,"code":19352,"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,19354,19355,19369,19373,19377,19385,19394,19409,19414,19418,19427,19431,19436,19444,19453,19462,19471,19480,19488,19495,19499,19503,19507,19511],{"__ignoreMap":178},[220,19356,19357,19359,19361,19363,19365,19367],{"class":222,"line":223},[220,19358,1735],{"class":260},[220,19360,1738],{"class":420},[220,19362,1741],{"class":260},[220,19364,1744],{"class":260},[220,19366,1747],{"class":226},[220,19368,1750],{"class":264},[220,19370,19371],{"class":222,"line":179},[220,19372,1765],{"class":264},[220,19374,19375],{"class":222,"line":389},[220,19376,15746],{"class":264},[220,19378,19379,19381,19383],{"class":222,"line":399},[220,19380,15751],{"class":264},[220,19382,2462],{"class":230},[220,19384,1760],{"class":264},[220,19386,19387,19390,19392],{"class":222,"line":644},[220,19388,19389],{"class":264}," id: ",[220,19391,19015],{"class":230},[220,19393,1760],{"class":264},[220,19395,19396,19399,19402,19404,19406],{"class":222,"line":650},[220,19397,19398],{"class":264}," props: { colorA: ",[220,19400,19401],{"class":230},"'#000000'",[220,19403,9539],{"class":264},[220,19405,9536],{"class":230},[220,19407,19408],{"class":264}," }\n",[220,19410,19411],{"class":222,"line":656},[220,19412,19413],{"class":264}," },\n",[220,19415,19416],{"class":222,"line":673},[220,19417,15746],{"class":264},[220,19419,19420,19422,19425],{"class":222,"line":682},[220,19421,15751],{"class":264},[220,19423,19424],{"class":230},"'DotGrid'",[220,19426,1760],{"class":264},[220,19428,19429],{"class":222,"line":691},[220,19430,15760],{"class":264},[220,19432,19433],{"class":222,"line":696},[220,19434,19435],{"class":264}," dotSize: {\n",[220,19437,19438,19440,19442],{"class":222,"line":702},[220,19439,17197],{"class":264},[220,19441,19005],{"class":230},[220,19443,1760],{"class":264},[220,19445,19446,19449,19451],{"class":222,"line":718},[220,19447,19448],{"class":264}," source: ",[220,19450,19015],{"class":230},[220,19452,1760],{"class":264},[220,19454,19455,19458,19460],{"class":222,"line":727},[220,19456,19457],{"class":264}," channel: ",[220,19459,9573],{"class":230},[220,19461,1760],{"class":264},[220,19463,19464,19467,19469],{"class":222,"line":2664},[220,19465,19466],{"class":264}," inputMin: ",[220,19468,8039],{"class":420},[220,19470,1760],{"class":264},[220,19472,19473,19476,19478],{"class":222,"line":3522},[220,19474,19475],{"class":264}," inputMax: ",[220,19477,8043],{"class":420},[220,19479,1760],{"class":264},[220,19481,19482,19484,19486],{"class":222,"line":9029},[220,19483,17215],{"class":264},[220,19485,8039],{"class":420},[220,19487,1760],{"class":264},[220,19489,19490,19492],{"class":222,"line":9040},[220,19491,17224],{"class":264},[220,19493,19494],{"class":420},"1\n",[220,19496,19497],{"class":222,"line":9045},[220,19498,15838],{"class":264},[220,19500,19501],{"class":222,"line":10366},[220,19502,4912],{"class":264},[220,19504,19505],{"class":222,"line":10371},[220,19506,4604],{"class":264},[220,19508,19509],{"class":222,"line":11442},[220,19510,1787],{"class":264},[220,19512,19513],{"class":222,"line":11449},[220,19514,1792],{"class":264},[19,19516],{":preset":19517},"{\"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,19519,19520],{},[159,19521,17272],{},[1794,19523,19524,19536],{},[1797,19525,19526],{},[1800,19527,19528,19530,19532,19534],{},[1803,19529,17281],{},[1803,19531,14554],{},[1803,19533,14557],{},[1803,19535,1808],{},[1810,19537,19538,19556,19580,19596,19612,19627,19642],{},[1800,19539,19540,19545,19549,19551],{},[1815,19541,19542],{},[99,19543,19544],{},"source",[1815,19546,19547],{},[99,19548,8426],{},[1815,19550,17304],{},[1815,19552,1839,19553,19555],{},[99,19554,8422],{}," of the source component to sample from.",[1800,19557,19558,19563,19567,19569],{},[1815,19559,19560],{},[99,19561,19562],{},"channel",[1815,19564,19565],{},[99,19566,8426],{},[1815,19568,17304],{},[1815,19570,19571,19572,1895,19574,1895,19576,1895,19578,8855],{},"Which channel to extract. ",[99,19573,8875],{},[99,19575,8883],{},[99,19577,8891],{},[99,19579,8899],{},[1800,19581,19582,19587,19591,19593],{},[1815,19583,19584],{},[99,19585,19586],{},"inputMin",[1815,19588,19589],{},[99,19590,14667],{},[1815,19592,17304],{},[1815,19594,19595],{},"Source values at or below this are treated as 0.",[1800,19597,19598,19603,19607,19609],{},[1815,19599,19600],{},[99,19601,19602],{},"inputMax",[1815,19604,19605],{},[99,19606,14667],{},[1815,19608,17304],{},[1815,19610,19611],{},"Source values at or above this are treated as 1.",[1800,19613,19614,19618,19622,19624],{},[1815,19615,19616],{},[99,19617,17321],{},[1815,19619,19620],{},[99,19621,14667],{},[1815,19623,17304],{},[1815,19625,19626],{},"Output value when input = 0.",[1800,19628,19629,19633,19637,19639],{},[1815,19630,19631],{},[99,19632,17337],{},[1815,19634,19635],{},[99,19636,14667],{},[1815,19638,17304],{},[1815,19640,19641],{},"Output value when input = 1.",[1800,19643,19644,19648,19652,19656],{},[1815,19645,19646],{},[99,19647,18712],{},[1815,19649,19650],{},[99,19651,14667],{},[1815,19653,19654],{},[99,19655,8039],{},[1815,19657,19658,19659,1550,19661,8855],{},"Power curve applied after normalization. ",[99,19660,18726],{},[99,19662,18729],{},[15,19664,1839,19665,19667],{},[99,19666,18781],{}," 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,19669,19671],{"id":19670},"combining-dynamic-props","Combining dynamic props",[15,19673,19674],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,19676,19677,19783,19910,20033],{":tabs":248},[212,19678,19680],{"className":334,"code":19679,"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,19681,19682,19696,19719,19726,19735,19744,19748,19752,19757,19762,19767,19771,19775],{"__ignoreMap":178},[220,19683,19684,19686,19688,19690,19692,19694],{"class":222,"line":223},[220,19685,343],{"class":264},[220,19687,347],{"class":346},[220,19689,350],{"class":226},[220,19691,353],{"class":264},[220,19693,356],{"class":230},[220,19695,359],{"class":264},[220,19697,19698,19700,19702,19705,19707,19709,19712,19714,19717],{"class":222,"line":179},[220,19699,364],{"class":264},[220,19701,367],{"class":346},[220,19703,19704],{"class":226}," color-a",[220,19706,353],{"class":264},[220,19708,375],{"class":230},[220,19710,19711],{"class":226}," color-b",[220,19713,353],{"class":264},[220,19715,19716],{"class":230},"\"#4f46e5\"",[220,19718,386],{"class":264},[220,19720,19721,19723],{"class":222,"line":389},[220,19722,364],{"class":264},[220,19724,19725],{"class":346},"LensFlare\n",[220,19727,19728,19730,19732],{"class":222,"line":399},[220,19729,17480],{"class":226},[220,19731,353],{"class":264},[220,19733,19734],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,19736,19737,19740,19742],{"class":222,"line":644},[220,19738,19739],{"class":226}," :intensity",[220,19741,353],{"class":264},[220,19743,14464],{"class":230},[220,19745,19746],{"class":222,"line":650},[220,19747,16781],{"class":230},[220,19749,19750],{"class":222,"line":656},[220,19751,16786],{"class":230},[220,19753,19754],{"class":222,"line":673},[220,19755,19756],{"class":230}," outputMin: 0.4,\n",[220,19758,19759],{"class":222,"line":682},[220,19760,19761],{"class":230}," outputMax: 1.0,\n",[220,19763,19764],{"class":222,"line":691},[220,19765,19766],{"class":230}," speed: 0.6\n",[220,19768,19769],{"class":222,"line":696},[220,19770,16811],{"class":230},[220,19772,19773],{"class":222,"line":702},[220,19774,1234],{"class":264},[220,19776,19777,19779,19781],{"class":222,"line":718},[220,19778,402],{"class":264},[220,19780,347],{"class":346},[220,19782,359],{"class":264},[212,19784,19786],{"className":409,"code":19785,"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,19787,19788,19802,19822,19828,19846,19855,19863,19871,19879,19887,19894,19898,19902],{"__ignoreMap":178},[220,19789,19790,19792,19794,19796,19798,19800],{"class":222,"line":223},[220,19791,343],{"class":264},[220,19793,347],{"class":420},[220,19795,423],{"class":226},[220,19797,353],{"class":260},[220,19799,356],{"class":230},[220,19801,359],{"class":264},[220,19803,19804,19806,19808,19810,19812,19814,19816,19818,19820],{"class":222,"line":179},[220,19805,364],{"class":264},[220,19807,367],{"class":420},[220,19809,370],{"class":226},[220,19811,353],{"class":260},[220,19813,375],{"class":230},[220,19815,378],{"class":226},[220,19817,353],{"class":260},[220,19819,19716],{"class":230},[220,19821,386],{"class":264},[220,19823,19824,19826],{"class":222,"line":389},[220,19825,364],{"class":264},[220,19827,19725],{"class":420},[220,19829,19830,19832,19834,19837,19839,19842,19844],{"class":222,"line":399},[220,19831,17566],{"class":226},[220,19833,353],{"class":260},[220,19835,19836],{"class":264},"{{ type: ",[220,19838,17577],{"class":230},[220,19840,19841],{"class":264},", smoothing: ",[220,19843,15421],{"class":420},[220,19845,2803],{"class":264},[220,19847,19848,19851,19853],{"class":222,"line":644},[220,19849,19850],{"class":226}," intensity",[220,19852,353],{"class":260},[220,19854,15407],{"class":264},[220,19856,19857,19859,19861],{"class":222,"line":650},[220,19858,15751],{"class":264},[220,19860,16871],{"class":230},[220,19862,1760],{"class":264},[220,19864,19865,19867,19869],{"class":222,"line":656},[220,19866,16878],{"class":264},[220,19868,16881],{"class":230},[220,19870,1760],{"class":264},[220,19872,19873,19875,19877],{"class":222,"line":673},[220,19874,16888],{"class":264},[220,19876,7615],{"class":420},[220,19878,1760],{"class":264},[220,19880,19881,19883,19885],{"class":222,"line":682},[220,19882,16897],{"class":264},[220,19884,17362],{"class":420},[220,19886,1760],{"class":264},[220,19888,19889,19891],{"class":222,"line":691},[220,19890,16906],{"class":264},[220,19892,19893],{"class":420},"0.6\n",[220,19895,19896],{"class":222,"line":696},[220,19897,15485],{"class":264},[220,19899,19900],{"class":222,"line":702},[220,19901,1234],{"class":264},[220,19903,19904,19906,19908],{"class":222,"line":718},[220,19905,402],{"class":264},[220,19907,347],{"class":420},[220,19909,359],{"class":264},[212,19911,19913],{"className":468,"code":19912,"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,19914,19915,19929,19949,19955,19971,19979,19987,19995,20003,20011,20017,20021,20025],{"__ignoreMap":178},[220,19916,19917,19919,19921,19923,19925,19927],{"class":222,"line":223},[220,19918,343],{"class":264},[220,19920,347],{"class":420},[220,19922,350],{"class":226},[220,19924,353],{"class":260},[220,19926,356],{"class":230},[220,19928,359],{"class":264},[220,19930,19931,19933,19935,19937,19939,19941,19943,19945,19947],{"class":222,"line":179},[220,19932,364],{"class":264},[220,19934,367],{"class":420},[220,19936,370],{"class":226},[220,19938,353],{"class":260},[220,19940,375],{"class":230},[220,19942,378],{"class":226},[220,19944,353],{"class":260},[220,19946,19716],{"class":230},[220,19948,386],{"class":264},[220,19950,19951,19953],{"class":222,"line":389},[220,19952,364],{"class":264},[220,19954,19725],{"class":420},[220,19956,19957,19959,19961,19963,19965,19967,19969],{"class":222,"line":399},[220,19958,17566],{"class":226},[220,19960,353],{"class":260},[220,19962,19836],{"class":264},[220,19964,17577],{"class":230},[220,19966,19841],{"class":264},[220,19968,15421],{"class":420},[220,19970,2803],{"class":264},[220,19972,19973,19975,19977],{"class":222,"line":644},[220,19974,19850],{"class":226},[220,19976,353],{"class":260},[220,19978,15407],{"class":264},[220,19980,19981,19983,19985],{"class":222,"line":650},[220,19982,15751],{"class":264},[220,19984,16871],{"class":230},[220,19986,1760],{"class":264},[220,19988,19989,19991,19993],{"class":222,"line":656},[220,19990,16878],{"class":264},[220,19992,16881],{"class":230},[220,19994,1760],{"class":264},[220,19996,19997,19999,20001],{"class":222,"line":673},[220,19998,16888],{"class":264},[220,20000,7615],{"class":420},[220,20002,1760],{"class":264},[220,20004,20005,20007,20009],{"class":222,"line":682},[220,20006,16897],{"class":264},[220,20008,17362],{"class":420},[220,20010,1760],{"class":264},[220,20012,20013,20015],{"class":222,"line":691},[220,20014,16906],{"class":264},[220,20016,19893],{"class":420},[220,20018,20019],{"class":222,"line":696},[220,20020,15485],{"class":264},[220,20022,20023],{"class":222,"line":702},[220,20024,1234],{"class":264},[220,20026,20027,20029,20031],{"class":222,"line":718},[220,20028,402],{"class":264},[220,20030,347],{"class":420},[220,20032,359],{"class":264},[212,20034,20035],{"className":468,"code":19912,"language":469,"meta":178,"style":178},[99,20036,20037,20051,20071,20077,20093,20101,20109,20117,20125,20133,20139,20143,20147],{"__ignoreMap":178},[220,20038,20039,20041,20043,20045,20047,20049],{"class":222,"line":223},[220,20040,343],{"class":264},[220,20042,347],{"class":420},[220,20044,350],{"class":226},[220,20046,353],{"class":260},[220,20048,356],{"class":230},[220,20050,359],{"class":264},[220,20052,20053,20055,20057,20059,20061,20063,20065,20067,20069],{"class":222,"line":179},[220,20054,364],{"class":264},[220,20056,367],{"class":420},[220,20058,370],{"class":226},[220,20060,353],{"class":260},[220,20062,375],{"class":230},[220,20064,378],{"class":226},[220,20066,353],{"class":260},[220,20068,19716],{"class":230},[220,20070,386],{"class":264},[220,20072,20073,20075],{"class":222,"line":389},[220,20074,364],{"class":264},[220,20076,19725],{"class":420},[220,20078,20079,20081,20083,20085,20087,20089,20091],{"class":222,"line":399},[220,20080,17566],{"class":226},[220,20082,353],{"class":260},[220,20084,19836],{"class":264},[220,20086,17577],{"class":230},[220,20088,19841],{"class":264},[220,20090,15421],{"class":420},[220,20092,2803],{"class":264},[220,20094,20095,20097,20099],{"class":222,"line":644},[220,20096,19850],{"class":226},[220,20098,353],{"class":260},[220,20100,15407],{"class":264},[220,20102,20103,20105,20107],{"class":222,"line":650},[220,20104,15751],{"class":264},[220,20106,16871],{"class":230},[220,20108,1760],{"class":264},[220,20110,20111,20113,20115],{"class":222,"line":656},[220,20112,16878],{"class":264},[220,20114,16881],{"class":230},[220,20116,1760],{"class":264},[220,20118,20119,20121,20123],{"class":222,"line":673},[220,20120,16888],{"class":264},[220,20122,7615],{"class":420},[220,20124,1760],{"class":264},[220,20126,20127,20129,20131],{"class":222,"line":682},[220,20128,16897],{"class":264},[220,20130,17362],{"class":420},[220,20132,1760],{"class":264},[220,20134,20135,20137],{"class":222,"line":691},[220,20136,16906],{"class":264},[220,20138,19893],{"class":420},[220,20140,20141],{"class":222,"line":696},[220,20142,15485],{"class":264},[220,20144,20145],{"class":222,"line":702},[220,20146,1234],{"class":264},[220,20148,20149,20151,20153],{"class":222,"line":718},[220,20150,402],{"class":264},[220,20152,347],{"class":420},[220,20154,359],{"class":264},[23,20156,20158],{"id":20157},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,20160,20161,20162,20165],{},"In the JavaScript API, ",[99,20163,20164],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,20167,20169],{"className":251,"code":20168,"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,20170,20171,20176,20190,20194,20211,20215,20219,20223,20228,20240,20245,20254,20263,20272,20280,20284,20288,20292,20297],{"__ignoreMap":178},[220,20172,20173],{"class":222,"line":223},[220,20174,20175],{"class":609},"\u002F\u002F Start with a static value\n",[220,20177,20178,20180,20182,20184,20186,20188],{"class":222,"line":179},[220,20179,1735],{"class":260},[220,20181,1738],{"class":420},[220,20183,1741],{"class":260},[220,20185,1744],{"class":260},[220,20187,1747],{"class":226},[220,20189,1750],{"class":264},[220,20191,20192],{"class":222,"line":389},[220,20193,1765],{"class":264},[220,20195,20196,20198,20200,20202,20205,20207,20209],{"class":222,"line":399},[220,20197,1770],{"class":264},[220,20199,3206],{"class":230},[220,20201,3209],{"class":264},[220,20203,20204],{"class":230},"'c'",[220,20206,6907],{"class":264},[220,20208,7615],{"class":420},[220,20210,1782],{"class":264},[220,20212,20213],{"class":222,"line":644},[220,20214,1787],{"class":264},[220,20216,20217],{"class":222,"line":650},[220,20218,1792],{"class":264},[220,20220,20221],{"class":222,"line":656},[220,20222,647],{"emptyLinePlaceholder":194},[220,20224,20225],{"class":222,"line":673},[220,20226,20227],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,20229,20230,20232,20234,20236,20238],{"class":222,"line":682},[220,20231,10969],{"class":264},[220,20233,10972],{"class":226},[220,20235,2626],{"class":264},[220,20237,20204],{"class":230},[220,20239,11334],{"class":264},[220,20241,20242],{"class":222,"line":691},[220,20243,20244],{"class":264}," radius: {\n",[220,20246,20247,20250,20252],{"class":222,"line":696},[220,20248,20249],{"class":264}," type: ",[220,20251,16871],{"class":230},[220,20253,1760],{"class":264},[220,20255,20256,20259,20261],{"class":222,"line":702},[220,20257,20258],{"class":264}," mode: ",[220,20260,16881],{"class":230},[220,20262,1760],{"class":264},[220,20264,20265,20268,20270],{"class":222,"line":718},[220,20266,20267],{"class":264}," outputMin: ",[220,20269,16343],{"class":420},[220,20271,1760],{"class":264},[220,20273,20274,20277],{"class":222,"line":727},[220,20275,20276],{"class":264}," outputMax: ",[220,20278,20279],{"class":420},"0.7\n",[220,20281,20282],{"class":222,"line":2664},[220,20283,3256],{"class":264},[220,20285,20286],{"class":222,"line":3522},[220,20287,1792],{"class":264},[220,20289,20290],{"class":222,"line":9029},[220,20291,647],{"emptyLinePlaceholder":194},[220,20293,20294],{"class":222,"line":9040},[220,20295,20296],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,20298,20299,20301,20303,20305,20307,20310,20312],{"class":222,"line":9045},[220,20300,10969],{"class":264},[220,20302,10972],{"class":226},[220,20304,2626],{"class":264},[220,20306,20204],{"class":230},[220,20308,20309],{"class":264},", { radius: ",[220,20311,7615],{"class":420},[220,20313,10984],{"class":264},[1504,20315,14358],{},{"title":178,"searchDepth":179,"depth":179,"links":20317},[20318,20319,20320,20321,20322,20323],{"id":16728,"depth":179,"text":16728},{"id":17416,"depth":179,"text":17416},{"id":18150,"depth":179,"text":18150},{"id":18781,"depth":179,"text":18781},{"id":19670,"depth":179,"text":19671},{"id":20157,"depth":179,"text":20158},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":16665,"description":20324},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":20331,"title":20332,"body":20333,"category":9599,"description":25204,"exclude":190,"extension":191,"forceFramework":190,"icon":25205,"meta":25206,"navigation":194,"path":25207,"seo":25208,"stem":25209,"__hash__":25210},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":20334,"toc":25148},[20335,20338,20341,20361,20364,20379,20383,20399,21043,21045,21049,21057,21063,21066,21099,21127,21129,21136,21139,21206,21251,21253,21260,21263,21348,21402,21404,21411,21414,21503,21553,21555,21562,21565,21654,21704,21706,21713,21716,21768,21803,21805,21812,21815,21902,21953,21955,21962,21965,22048,22097,22099,22106,22109,22182,22225,22227,22234,22237,22321,22372,22374,22381,22384,22468,22520,22522,22526,22546,22559,22580,22691,22697,22700,22754,22807,22809,22816,22819,22933,23010,23012,23019,23022,23098,23155,23157,23164,23167,23226,23276,23278,23285,23288,23382,23448,23450,23457,23460,23535,23593,23595,23602,23612,23706,23773,23775,23782,23785,23860,23918,23920,23927,23930,24006,24064,24066,24073,24076,24172,24241,24243,24250,24256,24330,24388,24390,24397,24400,24491,24558,24560,24564,24567,24585,24704,24708,24723,24799,24808,25137,25146],[11,20336,20332],{"id":20337},"shape-sdf-effects",[19,20339],{":preset":20340,"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,20342,20343,20344,1895,20346,20349,20350,20353,20354,20357,20358,20360],{},"Several components — such as ",[159,20345,14833],{},[159,20347,20348],{},"Neon",", and ",[159,20351,20352],{},"Emboss"," — are driven by a ",[1847,20355,20356],{},"shape",". These effects accept a ",[99,20359,20356],{}," 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,20362,20363],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,20365,20366,20367,20370,20371,20374,20375,20378],{},"Shapes come in two flavours: flat ",[159,20368,20369],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,20372,20373],{},"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,20376,20377],{},"extrude"," your own SVG into a solid 3D slab.",[23,20380,20382],{"id":20381},"configuration","Configuration",[15,20384,1839,20385,20387,20388,20391,20392,18112,20395,20398],{},[99,20386,20356],{}," prop accepts a configuration object. The only required key is ",[99,20389,20390],{},"type",", which selects one of the built-in shapes, like ",[99,20393,20394],{},"circleSDF",[99,20396,20397],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,20400,20401,20475,20620,20744,20868],{":tabs":1557},[212,20402,20404],{"className":334,"code":20403,"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,20405,20406,20411,20427,20431,20436,20451,20455,20460],{"__ignoreMap":178},[220,20407,20408],{"class":222,"line":223},[220,20409,20410],{"class":609},"\u003C!-- Circle (default) -->\n",[220,20412,20413,20415,20417,20420,20422,20425],{"class":222,"line":179},[220,20414,343],{"class":264},[220,20416,14833],{"class":346},[220,20418,20419],{"class":226}," :shape",[220,20421,353],{"class":264},[220,20423,20424],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,20426,386],{"class":264},[220,20428,20429],{"class":222,"line":389},[220,20430,647],{"emptyLinePlaceholder":194},[220,20432,20433],{"class":222,"line":399},[220,20434,20435],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,20437,20438,20440,20442,20444,20446,20449],{"class":222,"line":644},[220,20439,343],{"class":264},[220,20441,20348],{"class":346},[220,20443,20419],{"class":226},[220,20445,353],{"class":264},[220,20447,20448],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,20450,386],{"class":264},[220,20452,20453],{"class":222,"line":650},[220,20454,647],{"emptyLinePlaceholder":194},[220,20456,20457],{"class":222,"line":656},[220,20458,20459],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,20461,20462,20464,20466,20468,20470,20473],{"class":222,"line":673},[220,20463,343],{"class":264},[220,20465,20352],{"class":346},[220,20467,20419],{"class":226},[220,20469,353],{"class":264},[220,20471,20472],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,20474,386],{"class":264},[212,20476,20478],{"className":409,"code":20477,"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,20479,20480,20485,20520,20524,20529,20570,20574,20579],{"__ignoreMap":178},[220,20481,20482],{"class":222,"line":223},[220,20483,20484],{"class":609},"\u002F\u002F Circle (default)\n",[220,20486,20487,20489,20491,20494,20496,20498,20501,20503,20506,20509,20512,20514,20517],{"class":222,"line":179},[220,20488,343],{"class":264},[220,20490,14833],{"class":420},[220,20492,20493],{"class":226}," shape",[220,20495,353],{"class":260},[220,20497,743],{"class":264},[220,20499,20500],{"class":420},"JSON",[220,20502,8855],{"class":264},[220,20504,20505],{"class":226},"stringify",[220,20507,20508],{"class":264},"({ type: ",[220,20510,20511],{"class":230},"\"circleSDF\"",[220,20513,5932],{"class":264},[220,20515,20516],{"class":420},"0.35",[220,20518,20519],{"class":264}," })} \u002F>\n",[220,20521,20522],{"class":222,"line":389},[220,20523,647],{"emptyLinePlaceholder":194},[220,20525,20526],{"class":222,"line":399},[220,20527,20528],{"class":609},"\u002F\u002F Six-pointed star\n",[220,20530,20531,20533,20535,20537,20539,20541,20543,20545,20547,20549,20552,20554,20556,20559,20562,20565,20568],{"class":222,"line":644},[220,20532,343],{"class":264},[220,20534,20348],{"class":420},[220,20536,20493],{"class":226},[220,20538,353],{"class":260},[220,20540,743],{"class":264},[220,20542,20500],{"class":420},[220,20544,8855],{"class":264},[220,20546,20505],{"class":226},[220,20548,20508],{"class":264},[220,20550,20551],{"class":230},"\"starSDF\"",[220,20553,5932],{"class":264},[220,20555,20516],{"class":420},[220,20557,20558],{"class":264},", sides: ",[220,20560,20561],{"class":420},"6",[220,20563,20564],{"class":264},", innerRatio: ",[220,20566,20567],{"class":420},"0.45",[220,20569,20519],{"class":264},[220,20571,20572],{"class":222,"line":650},[220,20573,647],{"emptyLinePlaceholder":194},[220,20575,20576],{"class":222,"line":656},[220,20577,20578],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,20580,20581,20583,20585,20587,20589,20591,20593,20595,20597,20599,20602,20605,20607,20609,20612,20615,20618],{"class":222,"line":673},[220,20582,343],{"class":264},[220,20584,20352],{"class":420},[220,20586,20493],{"class":226},[220,20588,353],{"class":260},[220,20590,743],{"class":264},[220,20592,20500],{"class":420},[220,20594,8855],{"class":264},[220,20596,20505],{"class":226},[220,20598,20508],{"class":264},[220,20600,20601],{"class":230},"\"roundedRectSDF\"",[220,20603,20604],{"class":264},", width: ",[220,20606,7615],{"class":420},[220,20608,811],{"class":264},[220,20610,20611],{"class":420},"0.25",[220,20613,20614],{"class":264},", rounding: ",[220,20616,20617],{"class":420},"0.06",[220,20619,20519],{"class":264},[212,20621,20622],{"className":468,"code":20477,"language":469,"meta":178,"style":178},[99,20623,20624,20628,20656,20660,20664,20700,20704,20708],{"__ignoreMap":178},[220,20625,20626],{"class":222,"line":223},[220,20627,20484],{"class":609},[220,20629,20630,20632,20634,20636,20638,20640,20642,20644,20646,20648,20650,20652,20654],{"class":222,"line":179},[220,20631,343],{"class":264},[220,20633,14833],{"class":420},[220,20635,20493],{"class":226},[220,20637,353],{"class":260},[220,20639,743],{"class":264},[220,20641,20500],{"class":420},[220,20643,8855],{"class":264},[220,20645,20505],{"class":226},[220,20647,20508],{"class":264},[220,20649,20511],{"class":230},[220,20651,5932],{"class":264},[220,20653,20516],{"class":420},[220,20655,20519],{"class":264},[220,20657,20658],{"class":222,"line":389},[220,20659,647],{"emptyLinePlaceholder":194},[220,20661,20662],{"class":222,"line":399},[220,20663,20528],{"class":609},[220,20665,20666,20668,20670,20672,20674,20676,20678,20680,20682,20684,20686,20688,20690,20692,20694,20696,20698],{"class":222,"line":644},[220,20667,343],{"class":264},[220,20669,20348],{"class":420},[220,20671,20493],{"class":226},[220,20673,353],{"class":260},[220,20675,743],{"class":264},[220,20677,20500],{"class":420},[220,20679,8855],{"class":264},[220,20681,20505],{"class":226},[220,20683,20508],{"class":264},[220,20685,20551],{"class":230},[220,20687,5932],{"class":264},[220,20689,20516],{"class":420},[220,20691,20558],{"class":264},[220,20693,20561],{"class":420},[220,20695,20564],{"class":264},[220,20697,20567],{"class":420},[220,20699,20519],{"class":264},[220,20701,20702],{"class":222,"line":650},[220,20703,647],{"emptyLinePlaceholder":194},[220,20705,20706],{"class":222,"line":656},[220,20707,20578],{"class":609},[220,20709,20710,20712,20714,20716,20718,20720,20722,20724,20726,20728,20730,20732,20734,20736,20738,20740,20742],{"class":222,"line":673},[220,20711,343],{"class":264},[220,20713,20352],{"class":420},[220,20715,20493],{"class":226},[220,20717,353],{"class":260},[220,20719,743],{"class":264},[220,20721,20500],{"class":420},[220,20723,8855],{"class":264},[220,20725,20505],{"class":226},[220,20727,20508],{"class":264},[220,20729,20601],{"class":230},[220,20731,20604],{"class":264},[220,20733,7615],{"class":420},[220,20735,811],{"class":264},[220,20737,20611],{"class":420},[220,20739,20614],{"class":264},[220,20741,20617],{"class":420},[220,20743,20519],{"class":264},[212,20745,20746],{"className":468,"code":20477,"language":469,"meta":178,"style":178},[99,20747,20748,20752,20780,20784,20788,20824,20828,20832],{"__ignoreMap":178},[220,20749,20750],{"class":222,"line":223},[220,20751,20484],{"class":609},[220,20753,20754,20756,20758,20760,20762,20764,20766,20768,20770,20772,20774,20776,20778],{"class":222,"line":179},[220,20755,343],{"class":264},[220,20757,14833],{"class":420},[220,20759,20493],{"class":226},[220,20761,353],{"class":260},[220,20763,743],{"class":264},[220,20765,20500],{"class":420},[220,20767,8855],{"class":264},[220,20769,20505],{"class":226},[220,20771,20508],{"class":264},[220,20773,20511],{"class":230},[220,20775,5932],{"class":264},[220,20777,20516],{"class":420},[220,20779,20519],{"class":264},[220,20781,20782],{"class":222,"line":389},[220,20783,647],{"emptyLinePlaceholder":194},[220,20785,20786],{"class":222,"line":399},[220,20787,20528],{"class":609},[220,20789,20790,20792,20794,20796,20798,20800,20802,20804,20806,20808,20810,20812,20814,20816,20818,20820,20822],{"class":222,"line":644},[220,20791,343],{"class":264},[220,20793,20348],{"class":420},[220,20795,20493],{"class":226},[220,20797,353],{"class":260},[220,20799,743],{"class":264},[220,20801,20500],{"class":420},[220,20803,8855],{"class":264},[220,20805,20505],{"class":226},[220,20807,20508],{"class":264},[220,20809,20551],{"class":230},[220,20811,5932],{"class":264},[220,20813,20516],{"class":420},[220,20815,20558],{"class":264},[220,20817,20561],{"class":420},[220,20819,20564],{"class":264},[220,20821,20567],{"class":420},[220,20823,20519],{"class":264},[220,20825,20826],{"class":222,"line":650},[220,20827,647],{"emptyLinePlaceholder":194},[220,20829,20830],{"class":222,"line":656},[220,20831,20578],{"class":609},[220,20833,20834,20836,20838,20840,20842,20844,20846,20848,20850,20852,20854,20856,20858,20860,20862,20864,20866],{"class":222,"line":673},[220,20835,343],{"class":264},[220,20837,20352],{"class":420},[220,20839,20493],{"class":226},[220,20841,353],{"class":260},[220,20843,743],{"class":264},[220,20845,20500],{"class":420},[220,20847,8855],{"class":264},[220,20849,20505],{"class":226},[220,20851,20508],{"class":264},[220,20853,20601],{"class":230},[220,20855,20604],{"class":264},[220,20857,7615],{"class":420},[220,20859,811],{"class":264},[220,20861,20611],{"class":420},[220,20863,20614],{"class":264},[220,20865,20617],{"class":420},[220,20867,20519],{"class":264},[212,20869,20871],{"className":251,"code":20870,"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,20872,20873,20877,20891,20895,20915,20919,20923,20927,20931,20945,20949,20975,20979,20983,20987,20991,21005,21009,21035,21039],{"__ignoreMap":178},[220,20874,20875],{"class":222,"line":223},[220,20876,20484],{"class":609},[220,20878,20879,20881,20883,20885,20887,20889],{"class":222,"line":179},[220,20880,1735],{"class":260},[220,20882,1738],{"class":420},[220,20884,1741],{"class":260},[220,20886,1744],{"class":260},[220,20888,1747],{"class":226},[220,20890,1750],{"class":264},[220,20892,20893],{"class":222,"line":389},[220,20894,1765],{"class":264},[220,20896,20897,20899,20902,20905,20908,20910,20912],{"class":222,"line":399},[220,20898,1770],{"class":264},[220,20900,20901],{"class":230},"'Glass'",[220,20903,20904],{"class":264},", props: { shape: { type: ",[220,20906,20907],{"class":230},"'circleSDF'",[220,20909,5932],{"class":264},[220,20911,20516],{"class":420},[220,20913,20914],{"class":264}," } } }\n",[220,20916,20917],{"class":222,"line":644},[220,20918,1787],{"class":264},[220,20920,20921],{"class":222,"line":650},[220,20922,1792],{"class":264},[220,20924,20925],{"class":222,"line":656},[220,20926,647],{"emptyLinePlaceholder":194},[220,20928,20929],{"class":222,"line":673},[220,20930,20528],{"class":609},[220,20932,20933,20935,20937,20939,20941,20943],{"class":222,"line":682},[220,20934,1735],{"class":260},[220,20936,1738],{"class":420},[220,20938,1741],{"class":260},[220,20940,1744],{"class":260},[220,20942,1747],{"class":226},[220,20944,1750],{"class":264},[220,20946,20947],{"class":222,"line":691},[220,20948,1765],{"class":264},[220,20950,20951,20953,20956,20958,20961,20963,20965,20967,20969,20971,20973],{"class":222,"line":696},[220,20952,1770],{"class":264},[220,20954,20955],{"class":230},"'Neon'",[220,20957,20904],{"class":264},[220,20959,20960],{"class":230},"'starSDF'",[220,20962,5932],{"class":264},[220,20964,20516],{"class":420},[220,20966,20558],{"class":264},[220,20968,20561],{"class":420},[220,20970,20564],{"class":264},[220,20972,20567],{"class":420},[220,20974,20914],{"class":264},[220,20976,20977],{"class":222,"line":702},[220,20978,1787],{"class":264},[220,20980,20981],{"class":222,"line":718},[220,20982,1792],{"class":264},[220,20984,20985],{"class":222,"line":727},[220,20986,647],{"emptyLinePlaceholder":194},[220,20988,20989],{"class":222,"line":2664},[220,20990,20578],{"class":609},[220,20992,20993,20995,20997,20999,21001,21003],{"class":222,"line":3522},[220,20994,1735],{"class":260},[220,20996,1738],{"class":420},[220,20998,1741],{"class":260},[220,21000,1744],{"class":260},[220,21002,1747],{"class":226},[220,21004,1750],{"class":264},[220,21006,21007],{"class":222,"line":9029},[220,21008,1765],{"class":264},[220,21010,21011,21013,21016,21018,21021,21023,21025,21027,21029,21031,21033],{"class":222,"line":9040},[220,21012,1770],{"class":264},[220,21014,21015],{"class":230},"'Emboss'",[220,21017,20904],{"class":264},[220,21019,21020],{"class":230},"'roundedRectSDF'",[220,21022,20604],{"class":264},[220,21024,7615],{"class":420},[220,21026,811],{"class":264},[220,21028,20611],{"class":420},[220,21030,20614],{"class":264},[220,21032,20617],{"class":420},[220,21034,20914],{"class":264},[220,21036,21037],{"class":222,"line":9045},[220,21038,1787],{"class":264},[220,21040,21041],{"class":222,"line":10366},[220,21042,1792],{"class":264},[4504,21044],{},[23,21046,21048],{"id":21047},"_2d-shapes","2D shapes",[15,21050,21051,21052,14780,21054,21056],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,21053,8039],{},[99,21055,7120],{}," from the centre to an edge), and rotations are in degrees.",[3262,21058,21060,21061],{"id":21059},"circle-circlesdf","Circle — ",[99,21062,20394],{},[15,21064,21065],{},"A perfect circle. The default shape for all shape effects.",[1794,21067,21068,21080],{},[1797,21069,21070],{},[1800,21071,21072,21074,21076,21078],{},[1803,21073,17281],{},[1803,21075,14554],{},[1803,21077,14557],{},[1803,21079,1808],{},[1810,21081,21082],{},[1800,21083,21084,21088,21092,21096],{},[1815,21085,21086],{},[99,21087,11050],{},[1815,21089,21090],{},[99,21091,14667],{},[1815,21093,21094],{},[99,21095,20516],{},[1815,21097,21098],{},"Circle radius in UV space",[212,21100,21102],{"className":4559,"code":21101,"language":4561,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,21103,21104],{"__ignoreMap":178},[220,21105,21106,21109,21112,21114,21116,21118,21121,21123,21125],{"class":222,"line":223},[220,21107,21108],{"class":264},"{ ",[220,21110,21111],{"class":420},"\"type\"",[220,21113,4596],{"class":264},[220,21115,20511],{"class":230},[220,21117,1895],{"class":264},[220,21119,21120],{"class":420},"\"radius\"",[220,21122,4596],{"class":264},[220,21124,20516],{"class":420},[220,21126,19408],{"class":264},[4504,21128],{},[3262,21130,21132,21133],{"id":21131},"ellipse-ellipsesdf","Ellipse — ",[99,21134,21135],{},"ellipseSDF",[15,21137,21138],{},"A stretched circle with independent horizontal and vertical radii.",[1794,21140,21141,21153],{},[1797,21142,21143],{},[1800,21144,21145,21147,21149,21151],{},[1803,21146,17281],{},[1803,21148,14554],{},[1803,21150,14557],{},[1803,21152,1808],{},[1810,21154,21155,21172,21189],{},[1800,21156,21157,21161,21165,21169],{},[1815,21158,21159],{},[99,21160,14531],{},[1815,21162,21163],{},[99,21164,14667],{},[1815,21166,21167],{},[99,21168,7615],{},[1815,21170,21171],{},"Horizontal radius (semi-major axis)",[1800,21173,21174,21178,21182,21186],{},[1815,21175,21176],{},[99,21177,14534],{},[1815,21179,21180],{},[99,21181,14667],{},[1815,21183,21184],{},[99,21185,20611],{},[1815,21187,21188],{},"Vertical radius (semi-minor axis)",[1800,21190,21191,21195,21199,21203],{},[1815,21192,21193],{},[99,21194,11202],{},[1815,21196,21197],{},[99,21198,14667],{},[1815,21200,21201],{},[99,21202,8039],{},[1815,21204,21205],{},"Rotation in degrees",[212,21207,21209],{"className":4559,"code":21208,"language":4561,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,21210,21211],{"__ignoreMap":178},[220,21212,21213,21215,21217,21219,21222,21224,21227,21229,21231,21233,21236,21238,21240,21242,21245,21247,21249],{"class":222,"line":223},[220,21214,21108],{"class":264},[220,21216,21111],{"class":420},[220,21218,4596],{"class":264},[220,21220,21221],{"class":230},"\"ellipseSDF\"",[220,21223,1895],{"class":264},[220,21225,21226],{"class":420},"\"width\"",[220,21228,4596],{"class":264},[220,21230,7615],{"class":420},[220,21232,1895],{"class":264},[220,21234,21235],{"class":420},"\"height\"",[220,21237,4596],{"class":264},[220,21239,20611],{"class":420},[220,21241,1895],{"class":264},[220,21243,21244],{"class":420},"\"rotation\"",[220,21246,4596],{"class":264},[220,21248,8039],{"class":420},[220,21250,19408],{"class":264},[4504,21252],{},[3262,21254,21256,21257],{"id":21255},"polygon-polygonsdf","Polygon — ",[99,21258,21259],{},"polygonSDF",[15,21261,21262],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,21264,21265,21277],{},[1797,21266,21267],{},[1800,21268,21269,21271,21273,21275],{},[1803,21270,17281],{},[1803,21272,14554],{},[1803,21274,14557],{},[1803,21276,1808],{},[1810,21278,21279,21296,21314,21332],{},[1800,21280,21281,21285,21289,21293],{},[1815,21282,21283],{},[99,21284,11050],{},[1815,21286,21287],{},[99,21288,14667],{},[1815,21290,21291],{},[99,21292,20516],{},[1815,21294,21295],{},"Distance from center to nearest edge midpoint",[1800,21297,21298,21303,21307,21311],{},[1815,21299,21300],{},[99,21301,21302],{},"sides",[1815,21304,21305],{},[99,21306,14667],{},[1815,21308,21309],{},[99,21310,20561],{},[1815,21312,21313],{},"Number of sides",[1800,21315,21316,21321,21325,21329],{},[1815,21317,21318],{},[99,21319,21320],{},"rounding",[1815,21322,21323],{},[99,21324,14667],{},[1815,21326,21327],{},[99,21328,8039],{},[1815,21330,21331],{},"Corner rounding amount",[1800,21333,21334,21338,21342,21346],{},[1815,21335,21336],{},[99,21337,11202],{},[1815,21339,21340],{},[99,21341,14667],{},[1815,21343,21344],{},[99,21345,8039],{},[1815,21347,21205],{},[212,21349,21351],{"className":4559,"code":21350,"language":4561,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,21352,21353],{"__ignoreMap":178},[220,21354,21355,21357,21359,21361,21364,21366,21368,21370,21373,21375,21378,21380,21382,21384,21387,21389,21392,21394,21396,21398,21400],{"class":222,"line":223},[220,21356,21108],{"class":264},[220,21358,21111],{"class":420},[220,21360,4596],{"class":264},[220,21362,21363],{"class":230},"\"polygonSDF\"",[220,21365,1895],{"class":264},[220,21367,21120],{"class":420},[220,21369,4596],{"class":264},[220,21371,21372],{"class":420},"0.3",[220,21374,1895],{"class":264},[220,21376,21377],{"class":420},"\"sides\"",[220,21379,4596],{"class":264},[220,21381,20561],{"class":420},[220,21383,1895],{"class":264},[220,21385,21386],{"class":420},"\"rounding\"",[220,21388,4596],{"class":264},[220,21390,21391],{"class":420},"0.05",[220,21393,1895],{"class":264},[220,21395,21244],{"class":420},[220,21397,4596],{"class":264},[220,21399,8039],{"class":420},[220,21401,19408],{"class":264},[4504,21403],{},[3262,21405,21407,21408],{"id":21406},"star-starsdf","Star — ",[99,21409,21410],{},"starSDF",[15,21412,21413],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,21415,21416,21428],{},[1797,21417,21418],{},[1800,21419,21420,21422,21424,21426],{},[1803,21421,17281],{},[1803,21423,14554],{},[1803,21425,14557],{},[1803,21427,1808],{},[1810,21429,21430,21447,21465,21487],{},[1800,21431,21432,21436,21440,21444],{},[1815,21433,21434],{},[99,21435,11050],{},[1815,21437,21438],{},[99,21439,14667],{},[1815,21441,21442],{},[99,21443,20516],{},[1815,21445,21446],{},"Outer tip radius",[1800,21448,21449,21453,21457,21462],{},[1815,21450,21451],{},[99,21452,21302],{},[1815,21454,21455],{},[99,21456,14667],{},[1815,21458,21459],{},[99,21460,21461],{},"5",[1815,21463,21464],{},"Number of points",[1800,21466,21467,21472,21476,21481],{},[1815,21468,21469],{},[99,21470,21471],{},"innerRatio",[1815,21473,21474],{},[99,21475,14667],{},[1815,21477,21478],{},[99,21479,21480],{},"0.382",[1815,21482,21483,21484,21486],{},"Inner vertex radius as a fraction of outer radius — ",[99,21485,21480],{}," gives the classic golden-ratio 5-star",[1800,21488,21489,21493,21497,21501],{},[1815,21490,21491],{},[99,21492,11202],{},[1815,21494,21495],{},[99,21496,14667],{},[1815,21498,21499],{},[99,21500,8039],{},[1815,21502,21205],{},[212,21504,21506],{"className":4559,"code":21505,"language":4561,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,21507,21508],{"__ignoreMap":178},[220,21509,21510,21512,21514,21516,21518,21520,21522,21524,21526,21528,21530,21532,21534,21536,21539,21541,21543,21545,21547,21549,21551],{"class":222,"line":223},[220,21511,21108],{"class":264},[220,21513,21111],{"class":420},[220,21515,4596],{"class":264},[220,21517,20551],{"class":230},[220,21519,1895],{"class":264},[220,21521,21120],{"class":420},[220,21523,4596],{"class":264},[220,21525,20516],{"class":420},[220,21527,1895],{"class":264},[220,21529,21377],{"class":420},[220,21531,4596],{"class":264},[220,21533,21461],{"class":420},[220,21535,1895],{"class":264},[220,21537,21538],{"class":420},"\"innerRatio\"",[220,21540,4596],{"class":264},[220,21542,21480],{"class":420},[220,21544,1895],{"class":264},[220,21546,21244],{"class":420},[220,21548,4596],{"class":264},[220,21550,8039],{"class":420},[220,21552,19408],{"class":264},[4504,21554],{},[3262,21556,21558,21559],{"id":21557},"flower-flowersdf","Flower — ",[99,21560,21561],{},"flowerSDF",[15,21563,21564],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,21566,21567,21579],{},[1797,21568,21569],{},[1800,21570,21571,21573,21575,21577],{},[1803,21572,17281],{},[1803,21574,14554],{},[1803,21576,14557],{},[1803,21578,1808],{},[1810,21580,21581,21598,21615,21638],{},[1800,21582,21583,21587,21591,21595],{},[1815,21584,21585],{},[99,21586,11050],{},[1815,21588,21589],{},[99,21590,14667],{},[1815,21592,21593],{},[99,21594,20516],{},[1815,21596,21597],{},"Outer petal tip radius",[1800,21599,21600,21604,21608,21612],{},[1815,21601,21602],{},[99,21603,21302],{},[1815,21605,21606],{},[99,21607,14667],{},[1815,21609,21610],{},[99,21611,20561],{},[1815,21613,21614],{},"Number of petals",[1800,21616,21617,21621,21625,21629],{},[1815,21618,21619],{},[99,21620,21471],{},[1815,21622,21623],{},[99,21624,14667],{},[1815,21626,21627],{},[99,21628,7120],{},[1815,21630,21631,21632,21634,21635,21637],{},"Valley depth — ",[99,21633,16343],{}," = deep narrow valleys, ",[99,21636,5665],{}," = subtle scalloped edge",[1800,21639,21640,21644,21648,21652],{},[1815,21641,21642],{},[99,21643,11202],{},[1815,21645,21646],{},[99,21647,14667],{},[1815,21649,21650],{},[99,21651,8039],{},[1815,21653,21205],{},[212,21655,21657],{"className":4559,"code":21656,"language":4561,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,21658,21659],{"__ignoreMap":178},[220,21660,21661,21663,21665,21667,21670,21672,21674,21676,21678,21680,21682,21684,21686,21688,21690,21692,21694,21696,21698,21700,21702],{"class":222,"line":223},[220,21662,21108],{"class":264},[220,21664,21111],{"class":420},[220,21666,4596],{"class":264},[220,21668,21669],{"class":230},"\"flowerSDF\"",[220,21671,1895],{"class":264},[220,21673,21120],{"class":420},[220,21675,4596],{"class":264},[220,21677,20516],{"class":420},[220,21679,1895],{"class":264},[220,21681,21377],{"class":420},[220,21683,4596],{"class":264},[220,21685,20561],{"class":420},[220,21687,1895],{"class":264},[220,21689,21538],{"class":420},[220,21691,4596],{"class":264},[220,21693,7120],{"class":420},[220,21695,1895],{"class":264},[220,21697,21244],{"class":420},[220,21699,4596],{"class":264},[220,21701,8039],{"class":420},[220,21703,19408],{"class":264},[4504,21705],{},[3262,21707,21709,21710],{"id":21708},"ring-ringsdf","Ring — ",[99,21711,21712],{},"ringSDF",[15,21714,21715],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,21717,21718,21730],{},[1797,21719,21720],{},[1800,21721,21722,21724,21726,21728],{},[1803,21723,17281],{},[1803,21725,14554],{},[1803,21727,14557],{},[1803,21729,1808],{},[1810,21731,21732,21749],{},[1800,21733,21734,21738,21742,21746],{},[1815,21735,21736],{},[99,21737,11050],{},[1815,21739,21740],{},[99,21741,14667],{},[1815,21743,21744],{},[99,21745,21372],{},[1815,21747,21748],{},"Distance from center to the ring centerline",[1800,21750,21751,21756,21760,21765],{},[1815,21752,21753],{},[99,21754,21755],{},"thickness",[1815,21757,21758],{},[99,21759,14667],{},[1815,21761,21762],{},[99,21763,21764],{},"0.08",[1815,21766,21767],{},"Half-width of the ring on each side of the centerline",[212,21769,21771],{"className":4559,"code":21770,"language":4561,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,21772,21773],{"__ignoreMap":178},[220,21774,21775,21777,21779,21781,21784,21786,21788,21790,21792,21794,21797,21799,21801],{"class":222,"line":223},[220,21776,21108],{"class":264},[220,21778,21111],{"class":420},[220,21780,4596],{"class":264},[220,21782,21783],{"class":230},"\"ringSDF\"",[220,21785,1895],{"class":264},[220,21787,21120],{"class":420},[220,21789,4596],{"class":264},[220,21791,21372],{"class":420},[220,21793,1895],{"class":264},[220,21795,21796],{"class":420},"\"thickness\"",[220,21798,4596],{"class":264},[220,21800,21764],{"class":420},[220,21802,19408],{"class":264},[4504,21804],{},[3262,21806,21808,21809],{"id":21807},"cross-crosssdf","Cross — ",[99,21810,21811],{},"crossSDF",[15,21813,21814],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,21816,21817,21829],{},[1797,21818,21819],{},[1800,21820,21821,21823,21825,21827],{},[1803,21822,17281],{},[1803,21824,14554],{},[1803,21826,14557],{},[1803,21828,1808],{},[1810,21830,21831,21848,21865,21882],{},[1800,21832,21833,21837,21841,21845],{},[1815,21834,21835],{},[99,21836,11058],{},[1815,21838,21839],{},[99,21840,14667],{},[1815,21842,21843],{},[99,21844,20611],{},[1815,21846,21847],{},"Arm half-length",[1800,21849,21850,21854,21858,21862],{},[1815,21851,21852],{},[99,21853,21755],{},[1815,21855,21856],{},[99,21857,14667],{},[1815,21859,21860],{},[99,21861,21764],{},[1815,21863,21864],{},"Arm half-width",[1800,21866,21867,21871,21875,21879],{},[1815,21868,21869],{},[99,21870,21320],{},[1815,21872,21873],{},[99,21874,14667],{},[1815,21876,21877],{},[99,21878,19051],{},[1815,21880,21881],{},"Corner rounding at arm ends and intersections",[1800,21883,21884,21888,21892,21896],{},[1815,21885,21886],{},[99,21887,11202],{},[1815,21889,21890],{},[99,21891,14667],{},[1815,21893,21894],{},[99,21895,8039],{},[1815,21897,21898,21899,21901],{},"Rotation in degrees — use ",[99,21900,1295],{}," for an X shape",[212,21903,21905],{"className":4559,"code":21904,"language":4561,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,21906,21907],{"__ignoreMap":178},[220,21908,21909,21911,21913,21915,21918,21920,21923,21925,21927,21929,21931,21933,21935,21937,21939,21941,21943,21945,21947,21949,21951],{"class":222,"line":223},[220,21910,21108],{"class":264},[220,21912,21111],{"class":420},[220,21914,4596],{"class":264},[220,21916,21917],{"class":230},"\"crossSDF\"",[220,21919,1895],{"class":264},[220,21921,21922],{"class":420},"\"size\"",[220,21924,4596],{"class":264},[220,21926,20611],{"class":420},[220,21928,1895],{"class":264},[220,21930,21796],{"class":420},[220,21932,4596],{"class":264},[220,21934,21764],{"class":420},[220,21936,1895],{"class":264},[220,21938,21386],{"class":420},[220,21940,4596],{"class":264},[220,21942,19051],{"class":420},[220,21944,1895],{"class":264},[220,21946,21244],{"class":420},[220,21948,4596],{"class":264},[220,21950,8039],{"class":420},[220,21952,19408],{"class":264},[4504,21954],{},[3262,21956,21958,21959],{"id":21957},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,21960,21961],{},"roundedRectSDF",[15,21963,21964],{},"A rectangle with uniformly rounded corners.",[1794,21966,21967,21979],{},[1797,21968,21969],{},[1800,21970,21971,21973,21975,21977],{},[1803,21972,17281],{},[1803,21974,14554],{},[1803,21976,14557],{},[1803,21978,1808],{},[1810,21980,21981,21998,22015,22032],{},[1800,21982,21983,21987,21991,21995],{},[1815,21984,21985],{},[99,21986,14531],{},[1815,21988,21989],{},[99,21990,14667],{},[1815,21992,21993],{},[99,21994,20516],{},[1815,21996,21997],{},"Half-width",[1800,21999,22000,22004,22008,22012],{},[1815,22001,22002],{},[99,22003,14534],{},[1815,22005,22006],{},[99,22007,14667],{},[1815,22009,22010],{},[99,22011,20611],{},[1815,22013,22014],{},"Half-height",[1800,22016,22017,22021,22025,22029],{},[1815,22018,22019],{},[99,22020,21320],{},[1815,22022,22023],{},[99,22024,14667],{},[1815,22026,22027],{},[99,22028,21391],{},[1815,22030,22031],{},"Corner rounding radius",[1800,22033,22034,22038,22042,22046],{},[1815,22035,22036],{},[99,22037,11202],{},[1815,22039,22040],{},[99,22041,14667],{},[1815,22043,22044],{},[99,22045,8039],{},[1815,22047,21205],{},[212,22049,22051],{"className":4559,"code":22050,"language":4561,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,22052,22053],{"__ignoreMap":178},[220,22054,22055,22057,22059,22061,22063,22065,22067,22069,22071,22073,22075,22077,22079,22081,22083,22085,22087,22089,22091,22093,22095],{"class":222,"line":223},[220,22056,21108],{"class":264},[220,22058,21111],{"class":420},[220,22060,4596],{"class":264},[220,22062,20601],{"class":230},[220,22064,1895],{"class":264},[220,22066,21226],{"class":420},[220,22068,4596],{"class":264},[220,22070,20516],{"class":420},[220,22072,1895],{"class":264},[220,22074,21235],{"class":420},[220,22076,4596],{"class":264},[220,22078,20611],{"class":420},[220,22080,1895],{"class":264},[220,22082,21386],{"class":420},[220,22084,4596],{"class":264},[220,22086,21391],{"class":420},[220,22088,1895],{"class":264},[220,22090,21244],{"class":420},[220,22092,4596],{"class":264},[220,22094,8039],{"class":420},[220,22096,19408],{"class":264},[4504,22098],{},[3262,22100,22102,22103],{"id":22101},"vesica-vesicasdf","Vesica — ",[99,22104,22105],{},"vesicaSDF",[15,22107,22108],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,22110,22111,22123],{},[1797,22112,22113],{},[1800,22114,22115,22117,22119,22121],{},[1803,22116,17281],{},[1803,22118,14554],{},[1803,22120,14557],{},[1803,22122,1808],{},[1810,22124,22125,22142,22166],{},[1800,22126,22127,22131,22135,22139],{},[1815,22128,22129],{},[99,22130,11050],{},[1815,22132,22133],{},[99,22134,14667],{},[1815,22136,22137],{},[99,22138,20516],{},[1815,22140,22141],{},"Radius of each circle",[1800,22143,22144,22149,22153,22157],{},[1815,22145,22146],{},[99,22147,22148],{},"spread",[1815,22150,22151],{},[99,22152,14667],{},[1815,22154,22155],{},[99,22156,7120],{},[1815,22158,22159,22160,22162,22163,22165],{},"Half-distance between circle centers as a fraction of radius — ",[99,22161,8039],{}," = a single circle, ",[99,22164,8043],{}," = an infinitely thin lens",[1800,22167,22168,22172,22176,22180],{},[1815,22169,22170],{},[99,22171,11202],{},[1815,22173,22174],{},[99,22175,14667],{},[1815,22177,22178],{},[99,22179,8039],{},[1815,22181,21205],{},[212,22183,22185],{"className":4559,"code":22184,"language":4561,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,22186,22187],{"__ignoreMap":178},[220,22188,22189,22191,22193,22195,22198,22200,22202,22204,22206,22208,22211,22213,22215,22217,22219,22221,22223],{"class":222,"line":223},[220,22190,21108],{"class":264},[220,22192,21111],{"class":420},[220,22194,4596],{"class":264},[220,22196,22197],{"class":230},"\"vesicaSDF\"",[220,22199,1895],{"class":264},[220,22201,21120],{"class":420},[220,22203,4596],{"class":264},[220,22205,20516],{"class":420},[220,22207,1895],{"class":264},[220,22209,22210],{"class":420},"\"spread\"",[220,22212,4596],{"class":264},[220,22214,7120],{"class":420},[220,22216,1895],{"class":264},[220,22218,21244],{"class":420},[220,22220,4596],{"class":264},[220,22222,8039],{"class":420},[220,22224,19408],{"class":264},[4504,22226],{},[3262,22228,22230,22231],{"id":22229},"crescent-crescentsdf","Crescent — ",[99,22232,22233],{},"crescentSDF",[15,22235,22236],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,22238,22239,22251],{},[1797,22240,22241],{},[1800,22242,22243,22245,22247,22249],{},[1803,22244,17281],{},[1803,22246,14554],{},[1803,22248,14557],{},[1803,22250,1808],{},[1810,22252,22253,22270,22288,22305],{},[1800,22254,22255,22259,22263,22267],{},[1815,22256,22257],{},[99,22258,11050],{},[1815,22260,22261],{},[99,22262,14667],{},[1815,22264,22265],{},[99,22266,20516],{},[1815,22268,22269],{},"Outer circle radius",[1800,22271,22272,22276,22280,22285],{},[1815,22273,22274],{},[99,22275,21471],{},[1815,22277,22278],{},[99,22279,14667],{},[1815,22281,22282],{},[99,22283,22284],{},"0.75",[1815,22286,22287],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,22289,22290,22294,22298,22302],{},[1815,22291,22292],{},[99,22293,17431],{},[1815,22295,22296],{},[99,22297,14667],{},[1815,22299,22300],{},[99,22301,17559],{},[1815,22303,22304],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,22306,22307,22311,22315,22319],{},[1815,22308,22309],{},[99,22310,11202],{},[1815,22312,22313],{},[99,22314,14667],{},[1815,22316,22317],{},[99,22318,8039],{},[1815,22320,21205],{},[212,22322,22324],{"className":4559,"code":22323,"language":4561,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,22325,22326],{"__ignoreMap":178},[220,22327,22328,22330,22332,22334,22337,22339,22341,22343,22345,22347,22349,22351,22353,22355,22358,22360,22362,22364,22366,22368,22370],{"class":222,"line":223},[220,22329,21108],{"class":264},[220,22331,21111],{"class":420},[220,22333,4596],{"class":264},[220,22335,22336],{"class":230},"\"crescentSDF\"",[220,22338,1895],{"class":264},[220,22340,21120],{"class":420},[220,22342,4596],{"class":264},[220,22344,20516],{"class":420},[220,22346,1895],{"class":264},[220,22348,21538],{"class":420},[220,22350,4596],{"class":264},[220,22352,22284],{"class":420},[220,22354,1895],{"class":264},[220,22356,22357],{"class":420},"\"offset\"",[220,22359,4596],{"class":264},[220,22361,17559],{"class":420},[220,22363,1895],{"class":264},[220,22365,21244],{"class":420},[220,22367,4596],{"class":264},[220,22369,8039],{"class":420},[220,22371,19408],{"class":264},[4504,22373],{},[3262,22375,22377,22378],{"id":22376},"trapezoid-trapezoidsdf","Trapezoid — ",[99,22379,22380],{},"trapezoidSDF",[15,22382,22383],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,22385,22386,22398],{},[1797,22387,22388],{},[1800,22389,22390,22392,22394,22396],{},[1803,22391,17281],{},[1803,22393,14554],{},[1803,22395,14557],{},[1803,22397,1808],{},[1810,22399,22400,22418,22436,22452],{},[1800,22401,22402,22407,22411,22415],{},[1815,22403,22404],{},[99,22405,22406],{},"bottomWidth",[1815,22408,22409],{},[99,22410,14667],{},[1815,22412,22413],{},[99,22414,20516],{},[1815,22416,22417],{},"Bottom edge half-width",[1800,22419,22420,22425,22429,22433],{},[1815,22421,22422],{},[99,22423,22424],{},"topWidth",[1815,22426,22427],{},[99,22428,14667],{},[1815,22430,22431],{},[99,22432,16343],{},[1815,22434,22435],{},"Top edge half-width",[1800,22437,22438,22442,22446,22450],{},[1815,22439,22440],{},[99,22441,14534],{},[1815,22443,22444],{},[99,22445,14667],{},[1815,22447,22448],{},[99,22449,20611],{},[1815,22451,22014],{},[1800,22453,22454,22458,22462,22466],{},[1815,22455,22456],{},[99,22457,11202],{},[1815,22459,22460],{},[99,22461,14667],{},[1815,22463,22464],{},[99,22465,8039],{},[1815,22467,21205],{},[212,22469,22471],{"className":4559,"code":22470,"language":4561,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,22472,22473],{"__ignoreMap":178},[220,22474,22475,22477,22479,22481,22484,22486,22489,22491,22493,22495,22498,22500,22502,22504,22506,22508,22510,22512,22514,22516,22518],{"class":222,"line":223},[220,22476,21108],{"class":264},[220,22478,21111],{"class":420},[220,22480,4596],{"class":264},[220,22482,22483],{"class":230},"\"trapezoidSDF\"",[220,22485,1895],{"class":264},[220,22487,22488],{"class":420},"\"bottomWidth\"",[220,22490,4596],{"class":264},[220,22492,20516],{"class":420},[220,22494,1895],{"class":264},[220,22496,22497],{"class":420},"\"topWidth\"",[220,22499,4596],{"class":264},[220,22501,16343],{"class":420},[220,22503,1895],{"class":264},[220,22505,21235],{"class":420},[220,22507,4596],{"class":264},[220,22509,20611],{"class":420},[220,22511,1895],{"class":264},[220,22513,21244],{"class":420},[220,22515,4596],{"class":264},[220,22517,8039],{"class":420},[220,22519,19408],{"class":264},[4504,22521],{},[23,22523,22525],{"id":22524},"_3d-shapes","3D shapes",[15,22527,22528,22529,1895,22531,1895,22533,1895,22535,20349,22538,22541,22542,22545],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,22530,14833],{},[159,22532,20348],{},[159,22534,20352],{},[159,22536,22537],{},"ThinFilm",[159,22539,22540],{},"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,22543,22544],{},"SmokeFill"," treats every shape as a flat fill.)",[15,22547,22548,22549,1895,22552,20349,22555,22558],{},"Every 3D shape is positioned with three independent rotations — ",[99,22550,22551],{},"rotX",[99,22553,22554],{},"rotY",[99,22556,22557],{},"rotZ"," — given in degrees. All sizes are in UV space.",[15172,22560,22561],{},[15,22562,22563,22566,22567,22570,22571,22573,22574,22576,22577,22579],{},[159,22564,22565],{},"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,22568,22569],{},"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,22572,22554],{}," is a turntable spin (left\u002Fright), ",[99,22575,22551],{}," tips the shape toward or away from you, and ",[99,22578,22557],{}," rolls it in the screen plane.",[15172,22581,22582,22602],{},[15,22583,22584,22587,22588,22591,22592,22594,22595,1550,22598,22601],{},[159,22585,22586],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,22589,22590],{"href":16639},"dynamic prop"," instead of a number. Set a rotation to an ",[99,22593,16728],{}," config looping from ",[99,22596,22597],{},"-180",[99,22599,22600],{},"180"," for a continuous spin, with no animation code:",[212,22603,22605],{"className":4559,"code":22604,"language":4561,"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,22606,22607,22637],{"__ignoreMap":178},[220,22608,22609,22611,22613,22615,22618,22620,22622,22624,22626,22628,22631,22633,22635],{"class":222,"line":223},[220,22610,21108],{"class":264},[220,22612,21111],{"class":420},[220,22614,4596],{"class":264},[220,22616,22617],{"class":230},"\"torus3D\"",[220,22619,1895],{"class":264},[220,22621,21120],{"class":420},[220,22623,4596],{"class":264},[220,22625,21372],{"class":420},[220,22627,1895],{"class":264},[220,22629,22630],{"class":420},"\"tube\"",[220,22632,4596],{"class":264},[220,22634,17587],{"class":420},[220,22636,1760],{"class":264},[220,22638,22639,22642,22645,22647,22649,22652,22654,22657,22659,22662,22664,22667,22669,22671,22673,22676,22678,22680,22682,22685,22687,22689],{"class":222,"line":179},[220,22640,22641],{"class":420}," \"rotY\"",[220,22643,22644],{"class":264},": { ",[220,22646,21111],{"class":420},[220,22648,4596],{"class":264},[220,22650,22651],{"class":230},"\"auto-animate\"",[220,22653,1895],{"class":264},[220,22655,22656],{"class":420},"\"mode\"",[220,22658,4596],{"class":264},[220,22660,22661],{"class":230},"\"loop\"",[220,22663,1895],{"class":264},[220,22665,22666],{"class":420},"\"outputMin\"",[220,22668,4596],{"class":264},[220,22670,22597],{"class":420},[220,22672,1895],{"class":264},[220,22674,22675],{"class":420},"\"outputMax\"",[220,22677,4596],{"class":264},[220,22679,22600],{"class":420},[220,22681,1895],{"class":264},[220,22683,22684],{"class":420},"\"speed\"",[220,22686,4596],{"class":264},[220,22688,7120],{"class":420},[220,22690,1782],{"class":264},[3262,22692,22694,22695],{"id":22693},"sphere-sphere3d","Sphere — ",[99,22696,20397],{},[15,22698,22699],{},"A perfect sphere.",[1794,22701,22702,22714],{},[1797,22703,22704],{},[1800,22705,22706,22708,22710,22712],{},[1803,22707,17281],{},[1803,22709,14554],{},[1803,22711,14557],{},[1803,22713,1808],{},[1810,22715,22716,22733],{},[1800,22717,22718,22722,22726,22730],{},[1815,22719,22720],{},[99,22721,11050],{},[1815,22723,22724],{},[99,22725,14667],{},[1815,22727,22728],{},[99,22729,20516],{},[1815,22731,22732],{},"Sphere radius",[1800,22734,22735,22743,22747,22751],{},[1815,22736,22737,15079,22739,15079,22741],{},[99,22738,22551],{},[99,22740,22554],{},[99,22742,22557],{},[1815,22744,22745],{},[99,22746,14667],{},[1815,22748,22749],{},[99,22750,8039],{},[1815,22752,22753],{},"Rotation around each axis, in degrees",[212,22755,22757],{"className":4559,"code":22756,"language":4561,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,22758,22759],{"__ignoreMap":178},[220,22760,22761,22763,22765,22767,22770,22772,22774,22776,22778,22780,22783,22785,22787,22789,22792,22794,22796,22798,22801,22803,22805],{"class":222,"line":223},[220,22762,21108],{"class":264},[220,22764,21111],{"class":420},[220,22766,4596],{"class":264},[220,22768,22769],{"class":230},"\"sphere3D\"",[220,22771,1895],{"class":264},[220,22773,21120],{"class":420},[220,22775,4596],{"class":264},[220,22777,20516],{"class":420},[220,22779,1895],{"class":264},[220,22781,22782],{"class":420},"\"rotX\"",[220,22784,4596],{"class":264},[220,22786,8039],{"class":420},[220,22788,1895],{"class":264},[220,22790,22791],{"class":420},"\"rotY\"",[220,22793,4596],{"class":264},[220,22795,8039],{"class":420},[220,22797,1895],{"class":264},[220,22799,22800],{"class":420},"\"rotZ\"",[220,22802,4596],{"class":264},[220,22804,8039],{"class":420},[220,22806,19408],{"class":264},[4504,22808],{},[3262,22810,22812,22813],{"id":22811},"cube-cube3d","Cube — ",[99,22814,22815],{},"cube3D",[15,22817,22818],{},"A box with independent dimensions and rounded edges.",[1794,22820,22821,22833],{},[1797,22822,22823],{},[1800,22824,22825,22827,22829,22831],{},[1803,22826,17281],{},[1803,22828,14554],{},[1803,22830,14557],{},[1803,22832,1808],{},[1810,22834,22835,22854,22872,22890,22907],{},[1800,22836,22837,22842,22846,22851],{},[1815,22838,22839],{},[99,22840,22841],{},"sizeX",[1815,22843,22844],{},[99,22845,14667],{},[1815,22847,22848],{},[99,22849,22850],{},"0.27",[1815,22852,22853],{},"Half-width (X)",[1800,22855,22856,22861,22865,22869],{},[1815,22857,22858],{},[99,22859,22860],{},"sizeY",[1815,22862,22863],{},[99,22864,14667],{},[1815,22866,22867],{},[99,22868,22850],{},[1815,22870,22871],{},"Half-height (Y)",[1800,22873,22874,22879,22883,22887],{},[1815,22875,22876],{},[99,22877,22878],{},"sizeZ",[1815,22880,22881],{},[99,22882,14667],{},[1815,22884,22885],{},[99,22886,22850],{},[1815,22888,22889],{},"Half-depth (Z)",[1800,22891,22892,22896,22900,22904],{},[1815,22893,22894],{},[99,22895,21320],{},[1815,22897,22898],{},[99,22899,14667],{},[1815,22901,22902],{},[99,22903,19051],{},[1815,22905,22906],{},"Edge\u002Fcorner rounding",[1800,22908,22909,22917,22921,22931],{},[1815,22910,22911,15079,22913,15079,22915],{},[99,22912,22551],{},[99,22914,22554],{},[99,22916,22557],{},[1815,22918,22919],{},[99,22920,14667],{},[1815,22922,22923,14649,22926,14649,22929],{},[99,22924,22925],{},"25",[99,22927,22928],{},"35",[99,22930,8039],{},[1815,22932,22753],{},[212,22934,22936],{"className":4559,"code":22935,"language":4561,"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,22937,22938],{"__ignoreMap":178},[220,22939,22940,22942,22944,22946,22949,22951,22954,22956,22958,22960,22963,22965,22967,22969,22972,22974,22976,22978,22980,22982,22984,22986,22988,22990,22992,22994,22996,22998,23000,23002,23004,23006,23008],{"class":222,"line":223},[220,22941,21108],{"class":264},[220,22943,21111],{"class":420},[220,22945,4596],{"class":264},[220,22947,22948],{"class":230},"\"cube3D\"",[220,22950,1895],{"class":264},[220,22952,22953],{"class":420},"\"sizeX\"",[220,22955,4596],{"class":264},[220,22957,22850],{"class":420},[220,22959,1895],{"class":264},[220,22961,22962],{"class":420},"\"sizeY\"",[220,22964,4596],{"class":264},[220,22966,22850],{"class":420},[220,22968,1895],{"class":264},[220,22970,22971],{"class":420},"\"sizeZ\"",[220,22973,4596],{"class":264},[220,22975,22850],{"class":420},[220,22977,1895],{"class":264},[220,22979,21386],{"class":420},[220,22981,4596],{"class":264},[220,22983,19051],{"class":420},[220,22985,1895],{"class":264},[220,22987,22782],{"class":420},[220,22989,4596],{"class":264},[220,22991,22925],{"class":420},[220,22993,1895],{"class":264},[220,22995,22791],{"class":420},[220,22997,4596],{"class":264},[220,22999,22928],{"class":420},[220,23001,1895],{"class":264},[220,23003,22800],{"class":420},[220,23005,4596],{"class":264},[220,23007,8039],{"class":420},[220,23009,19408],{"class":264},[4504,23011],{},[3262,23013,23015,23016],{"id":23014},"torus-torus3d","Torus — ",[99,23017,23018],{},"torus3D",[15,23020,23021],{},"A doughnut ring.",[1794,23023,23024,23036],{},[1797,23025,23026],{},[1800,23027,23028,23030,23032,23034],{},[1803,23029,17281],{},[1803,23031,14554],{},[1803,23033,14557],{},[1803,23035,1808],{},[1810,23037,23038,23055,23073],{},[1800,23039,23040,23044,23048,23052],{},[1815,23041,23042],{},[99,23043,11050],{},[1815,23045,23046],{},[99,23047,14667],{},[1815,23049,23050],{},[99,23051,21372],{},[1815,23053,23054],{},"Ring radius (centre to tube centreline)",[1800,23056,23057,23062,23066,23070],{},[1815,23058,23059],{},[99,23060,23061],{},"tube",[1815,23063,23064],{},[99,23065,14667],{},[1815,23067,23068],{},[99,23069,17587],{},[1815,23071,23072],{},"Tube radius",[1800,23074,23075,23083,23087,23096],{},[1815,23076,23077,15079,23079,15079,23081],{},[99,23078,22551],{},[99,23080,22554],{},[99,23082,22557],{},[1815,23084,23085],{},[99,23086,14667],{},[1815,23088,23089,14649,23092,14649,23094],{},[99,23090,23091],{},"55",[99,23093,8039],{},[99,23095,8039],{},[1815,23097,22753],{},[212,23099,23101],{"className":4559,"code":23100,"language":4561,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23102,23103],{"__ignoreMap":178},[220,23104,23105,23107,23109,23111,23113,23115,23117,23119,23121,23123,23125,23127,23129,23131,23133,23135,23137,23139,23141,23143,23145,23147,23149,23151,23153],{"class":222,"line":223},[220,23106,21108],{"class":264},[220,23108,21111],{"class":420},[220,23110,4596],{"class":264},[220,23112,22617],{"class":230},[220,23114,1895],{"class":264},[220,23116,21120],{"class":420},[220,23118,4596],{"class":264},[220,23120,21372],{"class":420},[220,23122,1895],{"class":264},[220,23124,22630],{"class":420},[220,23126,4596],{"class":264},[220,23128,17587],{"class":420},[220,23130,1895],{"class":264},[220,23132,22782],{"class":420},[220,23134,4596],{"class":264},[220,23136,23091],{"class":420},[220,23138,1895],{"class":264},[220,23140,22791],{"class":420},[220,23142,4596],{"class":264},[220,23144,8039],{"class":420},[220,23146,1895],{"class":264},[220,23148,22800],{"class":420},[220,23150,4596],{"class":264},[220,23152,8039],{"class":420},[220,23154,19408],{"class":264},[4504,23156],{},[3262,23158,23160,23161],{"id":23159},"octahedron-octahedron3d","Octahedron — ",[99,23162,23163],{},"octahedron3D",[15,23165,23166],{},"An eight-faced diamond\u002Fbipyramid.",[1794,23168,23169,23181],{},[1797,23170,23171],{},[1800,23172,23173,23175,23177,23179],{},[1803,23174,17281],{},[1803,23176,14554],{},[1803,23178,14557],{},[1803,23180,1808],{},[1810,23182,23183,23201],{},[1800,23184,23185,23189,23193,23198],{},[1815,23186,23187],{},[99,23188,11050],{},[1815,23190,23191],{},[99,23192,14667],{},[1815,23194,23195],{},[99,23196,23197],{},"0.42",[1815,23199,23200],{},"Distance from centre to each vertex",[1800,23202,23203,23211,23215,23224],{},[1815,23204,23205,15079,23207,15079,23209],{},[99,23206,22551],{},[99,23208,22554],{},[99,23210,22557],{},[1815,23212,23213],{},[99,23214,14667],{},[1815,23216,23217,14649,23220,14649,23222],{},[99,23218,23219],{},"10",[99,23221,22925],{},[99,23223,8039],{},[1815,23225,22753],{},[212,23227,23229],{"className":4559,"code":23228,"language":4561,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,23230,23231],{"__ignoreMap":178},[220,23232,23233,23235,23237,23239,23242,23244,23246,23248,23250,23252,23254,23256,23258,23260,23262,23264,23266,23268,23270,23272,23274],{"class":222,"line":223},[220,23234,21108],{"class":264},[220,23236,21111],{"class":420},[220,23238,4596],{"class":264},[220,23240,23241],{"class":230},"\"octahedron3D\"",[220,23243,1895],{"class":264},[220,23245,21120],{"class":420},[220,23247,4596],{"class":264},[220,23249,23197],{"class":420},[220,23251,1895],{"class":264},[220,23253,22782],{"class":420},[220,23255,4596],{"class":264},[220,23257,23219],{"class":420},[220,23259,1895],{"class":264},[220,23261,22791],{"class":420},[220,23263,4596],{"class":264},[220,23265,22925],{"class":420},[220,23267,1895],{"class":264},[220,23269,22800],{"class":420},[220,23271,4596],{"class":264},[220,23273,8039],{"class":420},[220,23275,19408],{"class":264},[4504,23277],{},[3262,23279,23281,23282],{"id":23280},"cylinder-cylinder3d","Cylinder — ",[99,23283,23284],{},"cylinder3D",[15,23286,23287],{},"A capped cylinder with rounded edges.",[1794,23289,23290,23302],{},[1797,23291,23292],{},[1800,23293,23294,23296,23298,23300],{},[1803,23295,17281],{},[1803,23297,14554],{},[1803,23299,14557],{},[1803,23301,1808],{},[1810,23303,23304,23322,23339,23356],{},[1800,23305,23306,23310,23314,23319],{},[1815,23307,23308],{},[99,23309,11050],{},[1815,23311,23312],{},[99,23313,14667],{},[1815,23315,23316],{},[99,23317,23318],{},"0.22",[1815,23320,23321],{},"Cylinder radius",[1800,23323,23324,23328,23332,23337],{},[1815,23325,23326],{},[99,23327,14534],{},[1815,23329,23330],{},[99,23331,14667],{},[1815,23333,23334],{},[99,23335,23336],{},"0.26",[1815,23338,22014],{},[1800,23340,23341,23345,23349,23353],{},[1815,23342,23343],{},[99,23344,21320],{},[1815,23346,23347],{},[99,23348,14667],{},[1815,23350,23351],{},[99,23352,19051],{},[1815,23354,23355],{},"Edge rounding",[1800,23357,23358,23366,23370,23380],{},[1815,23359,23360,15079,23362,15079,23364],{},[99,23361,22551],{},[99,23363,22554],{},[99,23365,22557],{},[1815,23367,23368],{},[99,23369,14667],{},[1815,23371,23372,14649,23375,14649,23377],{},[99,23373,23374],{},"60",[99,23376,8039],{},[99,23378,23379],{},"30",[1815,23381,22753],{},[212,23383,23385],{"className":4559,"code":23384,"language":4561,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,23386,23387],{"__ignoreMap":178},[220,23388,23389,23391,23393,23395,23398,23400,23402,23404,23406,23408,23410,23412,23414,23416,23418,23420,23422,23424,23426,23428,23430,23432,23434,23436,23438,23440,23442,23444,23446],{"class":222,"line":223},[220,23390,21108],{"class":264},[220,23392,21111],{"class":420},[220,23394,4596],{"class":264},[220,23396,23397],{"class":230},"\"cylinder3D\"",[220,23399,1895],{"class":264},[220,23401,21120],{"class":420},[220,23403,4596],{"class":264},[220,23405,23318],{"class":420},[220,23407,1895],{"class":264},[220,23409,21235],{"class":420},[220,23411,4596],{"class":264},[220,23413,23336],{"class":420},[220,23415,1895],{"class":264},[220,23417,21386],{"class":420},[220,23419,4596],{"class":264},[220,23421,19051],{"class":420},[220,23423,1895],{"class":264},[220,23425,22782],{"class":420},[220,23427,4596],{"class":264},[220,23429,23374],{"class":420},[220,23431,1895],{"class":264},[220,23433,22791],{"class":420},[220,23435,4596],{"class":264},[220,23437,8039],{"class":420},[220,23439,1895],{"class":264},[220,23441,22800],{"class":420},[220,23443,4596],{"class":264},[220,23445,23379],{"class":420},[220,23447,19408],{"class":264},[4504,23449],{},[3262,23451,23453,23454],{"id":23452},"capsule-capsule3d","Capsule — ",[99,23455,23456],{},"capsule3D",[15,23458,23459],{},"A cylinder with hemispherical caps (a pill).",[1794,23461,23462,23474],{},[1797,23463,23464],{},[1800,23465,23466,23468,23470,23472],{},[1803,23467,17281],{},[1803,23469,14554],{},[1803,23471,14557],{},[1803,23473,1808],{},[1810,23475,23476,23494,23511],{},[1800,23477,23478,23482,23486,23491],{},[1815,23479,23480],{},[99,23481,11050],{},[1815,23483,23484],{},[99,23485,14667],{},[1815,23487,23488],{},[99,23489,23490],{},"0.16",[1815,23492,23493],{},"Capsule radius",[1800,23495,23496,23500,23504,23508],{},[1815,23497,23498],{},[99,23499,14534],{},[1815,23501,23502],{},[99,23503,14667],{},[1815,23505,23506],{},[99,23507,16343],{},[1815,23509,23510],{},"Half-length of the straight section",[1800,23512,23513,23521,23525,23533],{},[1815,23514,23515,15079,23517,15079,23519],{},[99,23516,22551],{},[99,23518,22554],{},[99,23520,22557],{},[1815,23522,23523],{},[99,23524,14667],{},[1815,23526,23527,14649,23529,14649,23531],{},[99,23528,8039],{},[99,23530,8039],{},[99,23532,22928],{},[1815,23534,22753],{},[212,23536,23538],{"className":4559,"code":23537,"language":4561,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,23539,23540],{"__ignoreMap":178},[220,23541,23542,23544,23546,23548,23551,23553,23555,23557,23559,23561,23563,23565,23567,23569,23571,23573,23575,23577,23579,23581,23583,23585,23587,23589,23591],{"class":222,"line":223},[220,23543,21108],{"class":264},[220,23545,21111],{"class":420},[220,23547,4596],{"class":264},[220,23549,23550],{"class":230},"\"capsule3D\"",[220,23552,1895],{"class":264},[220,23554,21120],{"class":420},[220,23556,4596],{"class":264},[220,23558,23490],{"class":420},[220,23560,1895],{"class":264},[220,23562,21235],{"class":420},[220,23564,4596],{"class":264},[220,23566,16343],{"class":420},[220,23568,1895],{"class":264},[220,23570,22782],{"class":420},[220,23572,4596],{"class":264},[220,23574,8039],{"class":420},[220,23576,1895],{"class":264},[220,23578,22791],{"class":420},[220,23580,4596],{"class":264},[220,23582,8039],{"class":420},[220,23584,1895],{"class":264},[220,23586,22800],{"class":420},[220,23588,4596],{"class":264},[220,23590,22928],{"class":420},[220,23592,19408],{"class":264},[4504,23594],{},[3262,23596,23598,23599],{"id":23597},"cone-cone3d","Cone — ",[99,23600,23601],{},"cone3D",[15,23603,23604,23605,23608,23609,23611],{},"A cone or truncated cone. Set ",[99,23606,23607],{},"topRadius"," above ",[99,23610,8039],{}," to flatten the tip into a frustum.",[1794,23613,23614,23626],{},[1797,23615,23616],{},[1800,23617,23618,23620,23622,23624],{},[1803,23619,17281],{},[1803,23621,14554],{},[1803,23623,14557],{},[1803,23625,1808],{},[1810,23627,23628,23645,23665,23681],{},[1800,23629,23630,23634,23638,23642],{},[1815,23631,23632],{},[99,23633,11050],{},[1815,23635,23636],{},[99,23637,14667],{},[1815,23639,23640],{},[99,23641,21372],{},[1815,23643,23644],{},"Base radius",[1800,23646,23647,23651,23655,23659],{},[1815,23648,23649],{},[99,23650,23607],{},[1815,23652,23653],{},[99,23654,14667],{},[1815,23656,23657],{},[99,23658,19051],{},[1815,23660,23661,23662,23664],{},"Top radius — ",[99,23663,8039],{}," for a sharp point",[1800,23666,23667,23671,23675,23679],{},[1815,23668,23669],{},[99,23670,14534],{},[1815,23672,23673],{},[99,23674,14667],{},[1815,23676,23677],{},[99,23678,21372],{},[1815,23680,22014],{},[1800,23682,23683,23691,23695,23704],{},[1815,23684,23685,15079,23687,15079,23689],{},[99,23686,22551],{},[99,23688,22554],{},[99,23690,22557],{},[1815,23692,23693],{},[99,23694,14667],{},[1815,23696,23697,14649,23699,14649,23701],{},[99,23698,22925],{},[99,23700,8039],{},[99,23702,23703],{},"15",[1815,23705,22753],{},[212,23707,23709],{"className":4559,"code":23708,"language":4561,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,23710,23711],{"__ignoreMap":178},[220,23712,23713,23715,23717,23719,23722,23724,23726,23728,23730,23732,23735,23737,23739,23741,23743,23745,23747,23749,23751,23753,23755,23757,23759,23761,23763,23765,23767,23769,23771],{"class":222,"line":223},[220,23714,21108],{"class":264},[220,23716,21111],{"class":420},[220,23718,4596],{"class":264},[220,23720,23721],{"class":230},"\"cone3D\"",[220,23723,1895],{"class":264},[220,23725,21120],{"class":420},[220,23727,4596],{"class":264},[220,23729,21372],{"class":420},[220,23731,1895],{"class":264},[220,23733,23734],{"class":420},"\"topRadius\"",[220,23736,4596],{"class":264},[220,23738,19051],{"class":420},[220,23740,1895],{"class":264},[220,23742,21235],{"class":420},[220,23744,4596],{"class":264},[220,23746,21372],{"class":420},[220,23748,1895],{"class":264},[220,23750,22782],{"class":420},[220,23752,4596],{"class":264},[220,23754,22925],{"class":420},[220,23756,1895],{"class":264},[220,23758,22791],{"class":420},[220,23760,4596],{"class":264},[220,23762,8039],{"class":420},[220,23764,1895],{"class":264},[220,23766,22800],{"class":420},[220,23768,4596],{"class":264},[220,23770,23703],{"class":420},[220,23772,19408],{"class":264},[4504,23774],{},[3262,23776,23778,23779],{"id":23777},"pyramid-pyramid3d","Pyramid — ",[99,23780,23781],{},"pyramid3D",[15,23783,23784],{},"A square-based pyramid.",[1794,23786,23787,23799],{},[1797,23788,23789],{},[1800,23790,23791,23793,23795,23797],{},[1803,23792,17281],{},[1803,23794,14554],{},[1803,23796,14557],{},[1803,23798,1808],{},[1810,23800,23801,23818,23835],{},[1800,23802,23803,23807,23811,23815],{},[1815,23804,23805],{},[99,23806,11058],{},[1815,23808,23809],{},[99,23810,14667],{},[1815,23812,23813],{},[99,23814,21372],{},[1815,23816,23817],{},"Base half-width",[1800,23819,23820,23824,23828,23832],{},[1815,23821,23822],{},[99,23823,14534],{},[1815,23825,23826],{},[99,23827,14667],{},[1815,23829,23830],{},[99,23831,20567],{},[1815,23833,23834],{},"Apex height",[1800,23836,23837,23845,23849,23858],{},[1815,23838,23839,15079,23841,15079,23843],{},[99,23840,22551],{},[99,23842,22554],{},[99,23844,22557],{},[1815,23846,23847],{},[99,23848,14667],{},[1815,23850,23851,14649,23854,14649,23856],{},[99,23852,23853],{},"-10",[99,23855,23379],{},[99,23857,8039],{},[1815,23859,22753],{},[212,23861,23863],{"className":4559,"code":23862,"language":4561,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,23864,23865],{"__ignoreMap":178},[220,23866,23867,23869,23871,23873,23876,23878,23880,23882,23884,23886,23888,23890,23892,23894,23896,23898,23900,23902,23904,23906,23908,23910,23912,23914,23916],{"class":222,"line":223},[220,23868,21108],{"class":264},[220,23870,21111],{"class":420},[220,23872,4596],{"class":264},[220,23874,23875],{"class":230},"\"pyramid3D\"",[220,23877,1895],{"class":264},[220,23879,21922],{"class":420},[220,23881,4596],{"class":264},[220,23883,21372],{"class":420},[220,23885,1895],{"class":264},[220,23887,21235],{"class":420},[220,23889,4596],{"class":264},[220,23891,20567],{"class":420},[220,23893,1895],{"class":264},[220,23895,22782],{"class":420},[220,23897,4596],{"class":264},[220,23899,23853],{"class":420},[220,23901,1895],{"class":264},[220,23903,22791],{"class":420},[220,23905,4596],{"class":264},[220,23907,23379],{"class":420},[220,23909,1895],{"class":264},[220,23911,22800],{"class":420},[220,23913,4596],{"class":264},[220,23915,8039],{"class":420},[220,23917,19408],{"class":264},[4504,23919],{},[3262,23921,23923,23924],{"id":23922},"prism-prism3d","Prism — ",[99,23925,23926],{},"prism3D",[15,23928,23929],{},"A hexagonal prism.",[1794,23931,23932,23944],{},[1797,23933,23934],{},[1800,23935,23936,23938,23940,23942],{},[1803,23937,17281],{},[1803,23939,14554],{},[1803,23941,14557],{},[1803,23943,1808],{},[1810,23945,23946,23964,23982],{},[1800,23947,23948,23952,23956,23961],{},[1815,23949,23950],{},[99,23951,11050],{},[1815,23953,23954],{},[99,23955,14667],{},[1815,23957,23958],{},[99,23959,23960],{},"0.28",[1815,23962,23963],{},"Hexagon radius",[1800,23965,23966,23970,23974,23979],{},[1815,23967,23968],{},[99,23969,14534],{},[1815,23971,23972],{},[99,23973,14667],{},[1815,23975,23976],{},[99,23977,23978],{},"0.14",[1815,23980,23981],{},"Half-depth of the prism",[1800,23983,23984,23992,23996,24004],{},[1815,23985,23986,15079,23988,15079,23990],{},[99,23987,22551],{},[99,23989,22554],{},[99,23991,22557],{},[1815,23993,23994],{},[99,23995,14667],{},[1815,23997,23998,14649,24000,14649,24002],{},[99,23999,22925],{},[99,24001,23379],{},[99,24003,8039],{},[1815,24005,22753],{},[212,24007,24009],{"className":4559,"code":24008,"language":4561,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24010,24011],{"__ignoreMap":178},[220,24012,24013,24015,24017,24019,24022,24024,24026,24028,24030,24032,24034,24036,24038,24040,24042,24044,24046,24048,24050,24052,24054,24056,24058,24060,24062],{"class":222,"line":223},[220,24014,21108],{"class":264},[220,24016,21111],{"class":420},[220,24018,4596],{"class":264},[220,24020,24021],{"class":230},"\"prism3D\"",[220,24023,1895],{"class":264},[220,24025,21120],{"class":420},[220,24027,4596],{"class":264},[220,24029,23960],{"class":420},[220,24031,1895],{"class":264},[220,24033,21235],{"class":420},[220,24035,4596],{"class":264},[220,24037,23978],{"class":420},[220,24039,1895],{"class":264},[220,24041,22782],{"class":420},[220,24043,4596],{"class":264},[220,24045,22925],{"class":420},[220,24047,1895],{"class":264},[220,24049,22791],{"class":420},[220,24051,4596],{"class":264},[220,24053,23379],{"class":420},[220,24055,1895],{"class":264},[220,24057,22800],{"class":420},[220,24059,4596],{"class":264},[220,24061,8039],{"class":420},[220,24063,19408],{"class":264},[4504,24065],{},[3262,24067,24069,24070],{"id":24068},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,24071,24072],{},"ellipsoid3D",[15,24074,24075],{},"A sphere with three independent radii.",[1794,24077,24078,24090],{},[1797,24079,24080],{},[1800,24081,24082,24084,24086,24088],{},[1803,24083,17281],{},[1803,24085,14554],{},[1803,24087,14557],{},[1803,24089,1808],{},[1810,24091,24092,24111,24129,24147],{},[1800,24093,24094,24099,24103,24108],{},[1815,24095,24096],{},[99,24097,24098],{},"radiusX",[1815,24100,24101],{},[99,24102,14667],{},[1815,24104,24105],{},[99,24106,24107],{},"0.38",[1815,24109,24110],{},"Radius along X",[1800,24112,24113,24118,24122,24126],{},[1815,24114,24115],{},[99,24116,24117],{},"radiusY",[1815,24119,24120],{},[99,24121,14667],{},[1815,24123,24124],{},[99,24125,23318],{},[1815,24127,24128],{},"Radius along Y",[1800,24130,24131,24136,24140,24144],{},[1815,24132,24133],{},[99,24134,24135],{},"radiusZ",[1815,24137,24138],{},[99,24139,14667],{},[1815,24141,24142],{},[99,24143,21372],{},[1815,24145,24146],{},"Radius along Z",[1800,24148,24149,24157,24161,24170],{},[1815,24150,24151,15079,24153,15079,24155],{},[99,24152,22551],{},[99,24154,22554],{},[99,24156,22557],{},[1815,24158,24159],{},[99,24160,14667],{},[1815,24162,24163,14649,24165,14649,24167],{},[99,24164,8039],{},[99,24166,8039],{},[99,24168,24169],{},"20",[1815,24171,22753],{},[212,24173,24175],{"className":4559,"code":24174,"language":4561,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,24176,24177],{"__ignoreMap":178},[220,24178,24179,24181,24183,24185,24188,24190,24193,24195,24197,24199,24202,24204,24206,24208,24211,24213,24215,24217,24219,24221,24223,24225,24227,24229,24231,24233,24235,24237,24239],{"class":222,"line":223},[220,24180,21108],{"class":264},[220,24182,21111],{"class":420},[220,24184,4596],{"class":264},[220,24186,24187],{"class":230},"\"ellipsoid3D\"",[220,24189,1895],{"class":264},[220,24191,24192],{"class":420},"\"radiusX\"",[220,24194,4596],{"class":264},[220,24196,24107],{"class":420},[220,24198,1895],{"class":264},[220,24200,24201],{"class":420},"\"radiusY\"",[220,24203,4596],{"class":264},[220,24205,23318],{"class":420},[220,24207,1895],{"class":264},[220,24209,24210],{"class":420},"\"radiusZ\"",[220,24212,4596],{"class":264},[220,24214,21372],{"class":420},[220,24216,1895],{"class":264},[220,24218,22782],{"class":420},[220,24220,4596],{"class":264},[220,24222,8039],{"class":420},[220,24224,1895],{"class":264},[220,24226,22791],{"class":420},[220,24228,4596],{"class":264},[220,24230,8039],{"class":420},[220,24232,1895],{"class":264},[220,24234,22800],{"class":420},[220,24236,4596],{"class":264},[220,24238,24169],{"class":420},[220,24240,19408],{"class":264},[4504,24242],{},[3262,24244,24246,24247],{"id":24245},"diamond-diamond3d","Diamond — ",[99,24248,24249],{},"diamond3D",[15,24251,24252,24253,24255],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,24254,22540],{}," effect.",[1794,24257,24258,24270],{},[1797,24259,24260],{},[1800,24261,24262,24264,24266,24268],{},[1803,24263,17281],{},[1803,24265,14554],{},[1803,24267,14557],{},[1803,24269,1808],{},[1810,24271,24272,24289,24306],{},[1800,24273,24274,24278,24282,24286],{},[1815,24275,24276],{},[99,24277,11050],{},[1815,24279,24280],{},[99,24281,14667],{},[1815,24283,24284],{},[99,24285,21372],{},[1815,24287,24288],{},"Girdle radius",[1800,24290,24291,24295,24299,24303],{},[1815,24292,24293],{},[99,24294,14534],{},[1815,24296,24297],{},[99,24298,14667],{},[1815,24300,24301],{},[99,24302,23197],{},[1815,24304,24305],{},"Total height (crown + pavilion)",[1800,24307,24308,24316,24320,24328],{},[1815,24309,24310,15079,24312,15079,24314],{},[99,24311,22551],{},[99,24313,22554],{},[99,24315,22557],{},[1815,24317,24318],{},[99,24319,14667],{},[1815,24321,24322,14649,24324,14649,24326],{},[99,24323,23703],{},[99,24325,8039],{},[99,24327,8039],{},[1815,24329,22753],{},[212,24331,24333],{"className":4559,"code":24332,"language":4561,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,24334,24335],{"__ignoreMap":178},[220,24336,24337,24339,24341,24343,24346,24348,24350,24352,24354,24356,24358,24360,24362,24364,24366,24368,24370,24372,24374,24376,24378,24380,24382,24384,24386],{"class":222,"line":223},[220,24338,21108],{"class":264},[220,24340,21111],{"class":420},[220,24342,4596],{"class":264},[220,24344,24345],{"class":230},"\"diamond3D\"",[220,24347,1895],{"class":264},[220,24349,21120],{"class":420},[220,24351,4596],{"class":264},[220,24353,21372],{"class":420},[220,24355,1895],{"class":264},[220,24357,21235],{"class":420},[220,24359,4596],{"class":264},[220,24361,23197],{"class":420},[220,24363,1895],{"class":264},[220,24365,22782],{"class":420},[220,24367,4596],{"class":264},[220,24369,23703],{"class":420},[220,24371,1895],{"class":264},[220,24373,22791],{"class":420},[220,24375,4596],{"class":264},[220,24377,8039],{"class":420},[220,24379,1895],{"class":264},[220,24381,22800],{"class":420},[220,24383,4596],{"class":264},[220,24385,8039],{"class":420},[220,24387,19408],{"class":264},[4504,24389],{},[3262,24391,24393,24394],{"id":24392},"link-link3d","Link — ",[99,24395,24396],{},"link3D",[15,24398,24399],{},"A rounded chain link.",[1794,24401,24402,24414],{},[1797,24403,24404],{},[1800,24405,24406,24408,24410,24412],{},[1803,24407,17281],{},[1803,24409,14554],{},[1803,24411,14557],{},[1803,24413,1808],{},[1810,24415,24416,24434,24451,24467],{},[1800,24417,24418,24422,24426,24431],{},[1815,24419,24420],{},[99,24421,11050],{},[1815,24423,24424],{},[99,24425,14667],{},[1815,24427,24428],{},[99,24429,24430],{},"0.18",[1815,24432,24433],{},"Inner radius of the link's curve",[1800,24435,24436,24441,24445,24449],{},[1815,24437,24438],{},[99,24439,24440],{},"length",[1815,24442,24443],{},[99,24444,14667],{},[1815,24446,24447],{},[99,24448,17559],{},[1815,24450,23510],{},[1800,24452,24453,24457,24461,24465],{},[1815,24454,24455],{},[99,24456,23061],{},[1815,24458,24459],{},[99,24460,14667],{},[1815,24462,24463],{},[99,24464,21764],{},[1815,24466,23072],{},[1800,24468,24469,24477,24481,24489],{},[1815,24470,24471,15079,24473,15079,24475],{},[99,24472,22551],{},[99,24474,22554],{},[99,24476,22557],{},[1815,24478,24479],{},[99,24480,14667],{},[1815,24482,24483,14649,24485,14649,24487],{},[99,24484,24169],{},[99,24486,23379],{},[99,24488,8039],{},[1815,24490,22753],{},[212,24492,24494],{"className":4559,"code":24493,"language":4561,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24495,24496],{"__ignoreMap":178},[220,24497,24498,24500,24502,24504,24507,24509,24511,24513,24515,24517,24520,24522,24524,24526,24528,24530,24532,24534,24536,24538,24540,24542,24544,24546,24548,24550,24552,24554,24556],{"class":222,"line":223},[220,24499,21108],{"class":264},[220,24501,21111],{"class":420},[220,24503,4596],{"class":264},[220,24505,24506],{"class":230},"\"link3D\"",[220,24508,1895],{"class":264},[220,24510,21120],{"class":420},[220,24512,4596],{"class":264},[220,24514,24430],{"class":420},[220,24516,1895],{"class":264},[220,24518,24519],{"class":420},"\"length\"",[220,24521,4596],{"class":264},[220,24523,17559],{"class":420},[220,24525,1895],{"class":264},[220,24527,22630],{"class":420},[220,24529,4596],{"class":264},[220,24531,21764],{"class":420},[220,24533,1895],{"class":264},[220,24535,22782],{"class":420},[220,24537,4596],{"class":264},[220,24539,24169],{"class":420},[220,24541,1895],{"class":264},[220,24543,22791],{"class":420},[220,24545,4596],{"class":264},[220,24547,23379],{"class":420},[220,24549,1895],{"class":264},[220,24551,22800],{"class":420},[220,24553,4596],{"class":264},[220,24555,8039],{"class":420},[220,24557,19408],{"class":264},[4504,24559],{},[23,24561,24563],{"id":24562},"custom-shapes","Custom shapes",[15,24565,24566],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,24568,24569,24570,24573,24574,24577,24578,24580,24581,24584],{},"To use an SVG shape, set ",[99,24571,24572],{},"shapeSdfUrl"," to the URL of an SDF ",[99,24575,24576],{},".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,24579,24576],{}," URL. If you work with the ",[56,24582,24583],{"href":58},"Shaders MCP",", your agent can also generate an SDF from any SVG in your project.",[246,24586,24587,24608,24627,24643,24659],{":tabs":1557},[212,24588,24590],{"className":334,"code":24589,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,24591,24592],{"__ignoreMap":178},[220,24593,24594,24596,24598,24601,24603,24606],{"class":222,"line":223},[220,24595,343],{"class":264},[220,24597,14833],{"class":346},[220,24599,24600],{"class":226}," :shapeSdfUrl",[220,24602,353],{"class":264},[220,24604,24605],{"class":230},"\"myLogoUrl\"",[220,24607,386],{"class":264},[212,24609,24611],{"className":409,"code":24610,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,24612,24613],{"__ignoreMap":178},[220,24614,24615,24617,24619,24622,24624],{"class":222,"line":223},[220,24616,343],{"class":264},[220,24618,14833],{"class":420},[220,24620,24621],{"class":226}," shapeSdfUrl",[220,24623,353],{"class":260},[220,24625,24626],{"class":264},"{myLogoUrl} \u002F>\n",[212,24628,24629],{"className":468,"code":24610,"language":469,"meta":178,"style":178},[99,24630,24631],{"__ignoreMap":178},[220,24632,24633,24635,24637,24639,24641],{"class":222,"line":223},[220,24634,343],{"class":264},[220,24636,14833],{"class":420},[220,24638,24621],{"class":226},[220,24640,353],{"class":260},[220,24642,24626],{"class":264},[212,24644,24645],{"className":468,"code":24610,"language":469,"meta":178,"style":178},[99,24646,24647],{"__ignoreMap":178},[220,24648,24649,24651,24653,24655,24657],{"class":222,"line":223},[220,24650,343],{"class":264},[220,24652,14833],{"class":420},[220,24654,24621],{"class":226},[220,24656,353],{"class":260},[220,24658,24626],{"class":264},[212,24660,24662],{"className":251,"code":24661,"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,24663,24664,24678,24682,24696,24700],{"__ignoreMap":178},[220,24665,24666,24668,24670,24672,24674,24676],{"class":222,"line":223},[220,24667,1735],{"class":260},[220,24669,1738],{"class":420},[220,24671,1741],{"class":260},[220,24673,1744],{"class":260},[220,24675,1747],{"class":226},[220,24677,1750],{"class":264},[220,24679,24680],{"class":222,"line":179},[220,24681,1765],{"class":264},[220,24683,24684,24686,24688,24691,24694],{"class":222,"line":389},[220,24685,1770],{"class":264},[220,24687,20901],{"class":230},[220,24689,24690],{"class":264},", props: { shapeSdfUrl: ",[220,24692,24693],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,24695,1782],{"class":264},[220,24697,24698],{"class":222,"line":399},[220,24699,1787],{"class":264},[220,24701,24702],{"class":222,"line":644},[220,24703,1792],{"class":264},[3262,24705,24707],{"id":24706},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,24709,24710,24711,24713,24714,24716,24717,1550,24719,24722],{},"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,24712,24572],{},", set the ",[99,24715,20356],{}," config ",[99,24718,20390],{},[99,24720,24721],{},"svgExtrude3D"," and tune the extrusion:",[1794,24724,24725,24737],{},[1797,24726,24727],{},[1800,24728,24729,24731,24733,24735],{},[1803,24730,17281],{},[1803,24732,14554],{},[1803,24734,14557],{},[1803,24736,1808],{},[1810,24738,24739,24757,24775],{},[1800,24740,24741,24746,24750,24754],{},[1815,24742,24743],{},[99,24744,24745],{},"depth",[1815,24747,24748],{},[99,24749,14667],{},[1815,24751,24752],{},[99,24753,17587],{},[1815,24755,24756],{},"Total thickness of the slab along the view axis",[1800,24758,24759,24764,24768,24772],{},[1815,24760,24761],{},[99,24762,24763],{},"bevel",[1815,24765,24766],{},[99,24767,14667],{},[1815,24769,24770],{},[99,24771,19051],{},[1815,24773,24774],{},"Rounded-edge radius on the extruded sides",[1800,24776,24777,24785,24789,24797],{},[1815,24778,24779,15079,24781,15079,24783],{},[99,24780,22551],{},[99,24782,22554],{},[99,24784,22557],{},[1815,24786,24787],{},[99,24788,14667],{},[1815,24790,24791,14649,24793,14649,24795],{},[99,24792,23703],{},[99,24794,23379],{},[99,24796,8039],{},[1815,24798,22753],{},[15,24800,24801,24802,24804,24805,24807],{},"As with the analytic 3D shapes, these sub-props accept ",[56,24803,22590],{"href":16639}," configs (e.g. an ",[99,24806,16728],{}," rotation for a spinning logo).",[246,24809,24810,24846,24919,24981,25043],{":tabs":1557},[212,24811,24813],{"className":334,"code":24812,"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,24814,24815,24822,24832,24842],{"__ignoreMap":178},[220,24816,24817,24819],{"class":222,"line":223},[220,24818,343],{"class":264},[220,24820,24821],{"class":346},"Glass\n",[220,24823,24824,24827,24829],{"class":222,"line":179},[220,24825,24826],{"class":226}," :shapeSdfUrl",[220,24828,353],{"class":264},[220,24830,24831],{"class":230},"\"myLogoUrl\"\n",[220,24833,24834,24837,24839],{"class":222,"line":389},[220,24835,24836],{"class":226}," :shape",[220,24838,353],{"class":264},[220,24840,24841],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,24843,24844],{"class":222,"line":399},[220,24845,15170],{"class":264},[212,24847,24849],{"className":409,"code":24848,"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,24850,24851,24857,24867,24915],{"__ignoreMap":178},[220,24852,24853,24855],{"class":222,"line":223},[220,24854,343],{"class":264},[220,24856,24821],{"class":420},[220,24858,24859,24862,24864],{"class":222,"line":179},[220,24860,24861],{"class":226}," shapeSdfUrl",[220,24863,353],{"class":260},[220,24865,24866],{"class":264},"{myLogoUrl}\n",[220,24868,24869,24872,24874,24876,24878,24880,24882,24884,24887,24890,24892,24895,24897,24900,24902,24905,24907,24910,24912],{"class":222,"line":389},[220,24870,24871],{"class":226}," shape",[220,24873,353],{"class":260},[220,24875,743],{"class":264},[220,24877,20500],{"class":420},[220,24879,8855],{"class":264},[220,24881,20505],{"class":226},[220,24883,20508],{"class":264},[220,24885,24886],{"class":230},"\"svgExtrude3D\"",[220,24888,24889],{"class":264},", depth: ",[220,24891,17587],{"class":420},[220,24893,24894],{"class":264},", bevel: ",[220,24896,19051],{"class":420},[220,24898,24899],{"class":264},", rotX: ",[220,24901,23703],{"class":420},[220,24903,24904],{"class":264},", rotY: ",[220,24906,23379],{"class":420},[220,24908,24909],{"class":264},", rotZ: ",[220,24911,8039],{"class":420},[220,24913,24914],{"class":264}," })}\n",[220,24916,24917],{"class":222,"line":399},[220,24918,15170],{"class":264},[212,24920,24921],{"className":468,"code":24848,"language":469,"meta":178,"style":178},[99,24922,24923,24929,24937,24977],{"__ignoreMap":178},[220,24924,24925,24927],{"class":222,"line":223},[220,24926,343],{"class":264},[220,24928,24821],{"class":420},[220,24930,24931,24933,24935],{"class":222,"line":179},[220,24932,24861],{"class":226},[220,24934,353],{"class":260},[220,24936,24866],{"class":264},[220,24938,24939,24941,24943,24945,24947,24949,24951,24953,24955,24957,24959,24961,24963,24965,24967,24969,24971,24973,24975],{"class":222,"line":389},[220,24940,24871],{"class":226},[220,24942,353],{"class":260},[220,24944,743],{"class":264},[220,24946,20500],{"class":420},[220,24948,8855],{"class":264},[220,24950,20505],{"class":226},[220,24952,20508],{"class":264},[220,24954,24886],{"class":230},[220,24956,24889],{"class":264},[220,24958,17587],{"class":420},[220,24960,24894],{"class":264},[220,24962,19051],{"class":420},[220,24964,24899],{"class":264},[220,24966,23703],{"class":420},[220,24968,24904],{"class":264},[220,24970,23379],{"class":420},[220,24972,24909],{"class":264},[220,24974,8039],{"class":420},[220,24976,24914],{"class":264},[220,24978,24979],{"class":222,"line":399},[220,24980,15170],{"class":264},[212,24982,24983],{"className":468,"code":24848,"language":469,"meta":178,"style":178},[99,24984,24985,24991,24999,25039],{"__ignoreMap":178},[220,24986,24987,24989],{"class":222,"line":223},[220,24988,343],{"class":264},[220,24990,24821],{"class":420},[220,24992,24993,24995,24997],{"class":222,"line":179},[220,24994,24861],{"class":226},[220,24996,353],{"class":260},[220,24998,24866],{"class":264},[220,25000,25001,25003,25005,25007,25009,25011,25013,25015,25017,25019,25021,25023,25025,25027,25029,25031,25033,25035,25037],{"class":222,"line":389},[220,25002,24871],{"class":226},[220,25004,353],{"class":260},[220,25006,743],{"class":264},[220,25008,20500],{"class":420},[220,25010,8855],{"class":264},[220,25012,20505],{"class":226},[220,25014,20508],{"class":264},[220,25016,24886],{"class":230},[220,25018,24889],{"class":264},[220,25020,17587],{"class":420},[220,25022,24894],{"class":264},[220,25024,19051],{"class":420},[220,25026,24899],{"class":264},[220,25028,23703],{"class":420},[220,25030,24904],{"class":264},[220,25032,23379],{"class":420},[220,25034,24909],{"class":264},[220,25036,8039],{"class":420},[220,25038,24914],{"class":264},[220,25040,25041],{"class":222,"line":399},[220,25042,15170],{"class":264},[212,25044,25046],{"className":251,"code":25045,"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,25047,25048,25062,25066,25070,25078,25082,25091,25121,25125,25129,25133],{"__ignoreMap":178},[220,25049,25050,25052,25054,25056,25058,25060],{"class":222,"line":223},[220,25051,1735],{"class":260},[220,25053,1738],{"class":420},[220,25055,1741],{"class":260},[220,25057,1744],{"class":260},[220,25059,1747],{"class":226},[220,25061,1750],{"class":264},[220,25063,25064],{"class":222,"line":179},[220,25065,1765],{"class":264},[220,25067,25068],{"class":222,"line":389},[220,25069,15746],{"class":264},[220,25071,25072,25074,25076],{"class":222,"line":399},[220,25073,15751],{"class":264},[220,25075,20901],{"class":230},[220,25077,1760],{"class":264},[220,25079,25080],{"class":222,"line":644},[220,25081,15760],{"class":264},[220,25083,25084,25087,25089],{"class":222,"line":650},[220,25085,25086],{"class":264}," shapeSdfUrl: ",[220,25088,24693],{"class":230},[220,25090,1760],{"class":264},[220,25092,25093,25096,25099,25101,25103,25105,25107,25109,25111,25113,25115,25117,25119],{"class":222,"line":656},[220,25094,25095],{"class":264}," shape: { type: ",[220,25097,25098],{"class":230},"'svgExtrude3D'",[220,25100,24889],{"class":264},[220,25102,17587],{"class":420},[220,25104,24894],{"class":264},[220,25106,19051],{"class":420},[220,25108,24899],{"class":264},[220,25110,23703],{"class":420},[220,25112,24904],{"class":264},[220,25114,23379],{"class":420},[220,25116,24909],{"class":264},[220,25118,8039],{"class":420},[220,25120,19408],{"class":264},[220,25122,25123],{"class":222,"line":673},[220,25124,4912],{"class":264},[220,25126,25127],{"class":222,"line":682},[220,25128,4604],{"class":264},[220,25130,25131],{"class":222,"line":691},[220,25132,1787],{"class":264},[220,25134,25135],{"class":222,"line":696},[220,25136,1792],{"class":264},[15,25138,25139,25140,25142,25143,25145],{},"The easiest way to produce a working extruded logo (SDF ",[99,25141,24576],{}," plus the matching ",[99,25144,20356],{}," config) is to set it up visually in the design editor and use the code export.",[1504,25147,14358],{},{"title":178,"searchDepth":179,"depth":179,"links":25149},[25150,25151,25175,25201],{"id":20381,"depth":179,"text":20382},{"id":21047,"depth":179,"text":21048,"children":25152},[25153,25155,25157,25159,25161,25163,25165,25167,25169,25171,25173],{"id":21059,"depth":389,"text":25154},"Circle — circleSDF",{"id":21131,"depth":389,"text":25156},"Ellipse — ellipseSDF",{"id":21255,"depth":389,"text":25158},"Polygon — polygonSDF",{"id":21406,"depth":389,"text":25160},"Star — starSDF",{"id":21557,"depth":389,"text":25162},"Flower — flowerSDF",{"id":21708,"depth":389,"text":25164},"Ring — ringSDF",{"id":21807,"depth":389,"text":25166},"Cross — crossSDF",{"id":21957,"depth":389,"text":25168},"Rounded Rectangle — roundedRectSDF",{"id":22101,"depth":389,"text":25170},"Vesica — vesicaSDF",{"id":22229,"depth":389,"text":25172},"Crescent — crescentSDF",{"id":22376,"depth":389,"text":25174},"Trapezoid — trapezoidSDF",{"id":22524,"depth":179,"text":22525,"children":25176},[25177,25179,25181,25183,25185,25187,25189,25191,25193,25195,25197,25199],{"id":22693,"depth":389,"text":25178},"Sphere — sphere3D",{"id":22811,"depth":389,"text":25180},"Cube — cube3D",{"id":23014,"depth":389,"text":25182},"Torus — torus3D",{"id":23159,"depth":389,"text":25184},"Octahedron — octahedron3D",{"id":23280,"depth":389,"text":25186},"Cylinder — cylinder3D",{"id":23452,"depth":389,"text":25188},"Capsule — capsule3D",{"id":23597,"depth":389,"text":25190},"Cone — cone3D",{"id":23777,"depth":389,"text":25192},"Pyramid — pyramid3D",{"id":23922,"depth":389,"text":25194},"Prism — prism3D",{"id":24068,"depth":389,"text":25196},"Ellipsoid — ellipsoid3D",{"id":24245,"depth":389,"text":25198},"Diamond — diamond3D",{"id":24392,"depth":389,"text":25200},"Link — link3D",{"id":24562,"depth":179,"text":24563,"children":25202},[25203],{"id":24706,"depth":389,"text":24707},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":20332,"description":25204},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":25212,"title":25213,"body":25214,"category":2240,"description":25568,"exclude":190,"extension":191,"forceFramework":190,"icon":25569,"meta":25570,"navigation":194,"path":25571,"seo":25572,"stem":25573,"__hash__":25574},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":25215,"toc":25562},[25216,25219,25222,25226,25233,25236,25240,25243,25249,25259,25264,25325,25328,25332,25335,25340,25356,25362,25516,25520,25526,25532,25547,25553,25559],[11,25217,25213],{"id":25218},"performance",[15,25220,25221],{},"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,25223,25225],{"id":25224},"the-frame-budget","The frame budget",[15,25227,25228,25229,25232],{},"At 60fps, the GPU has ",[159,25230,25231],{},"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,25234,25235],{},"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,25237,25239],{"id":25238},"generator-vs-filter-effects","Generator vs. filter effects",[15,25241,25242],{},"Effects fall into two broad categories with very different cost profiles:",[15,25244,25245,25248],{},[159,25246,25247],{},"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,25250,25251,25254,25255,25258],{},[159,25252,25253],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,25256,25257],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,25260,25261],{},[159,25262,25263],{},"Rough cost categories:",[1794,25265,25266,25279],{},[1797,25267,25268],{},[1800,25269,25270,25273,25276],{},[1803,25271,25272],{},"Category",[1803,25274,25275],{},"Examples",[1803,25277,25278],{},"Relative cost",[1810,25280,25281,25292,25303,25314],{},[1800,25282,25283,25286,25289],{},[1815,25284,25285],{},"Very light",[1815,25287,25288],{},"SolidColor, LinearGradient, RadialGradient",[1815,25290,25291],{},"~0–0.1ms",[1800,25293,25294,25297,25300],{},[1815,25295,25296],{},"Light",[1815,25298,25299],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,25301,25302],{},"~0.1–0.5ms",[1800,25304,25305,25308,25311],{},[1815,25306,25307],{},"Medium",[1815,25309,25310],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,25312,25313],{},"~0.5–2ms",[1800,25315,25316,25319,25322],{},[1815,25317,25318],{},"Heavy",[1815,25320,25321],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,25323,25324],{},"~1-2ms+",[15,25326,25327],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,25329,25331],{"id":25330},"render-to-texture-rtt","Render-to-texture (RTT)",[15,25333,25334],{},"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,25336,25337],{},[159,25338,25339],{},"What triggers RTT:",[34,25341,25342,25345,25353],{},[37,25343,25344],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,25346,1839,25347,15079,25349,25352],{},[99,25348,18781],{},[56,25350,25351],{"href":16639},"Prop Driver"," on any component (the source layer is RTT'd)",[37,25354,25355],{},"The masking system when a layer is used as a mask source",[15,25357,25358,25361],{},[159,25359,25360],{},"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,25363,25365],{"className":334,"code":25364,"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,25366,25367,25372,25380,25388,25396,25404,25419,25427,25435,25443,25451,25459,25463,25468,25476,25484,25492,25500,25508],{"__ignoreMap":178},[220,25368,25369],{"class":222,"line":223},[220,25370,25371],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,25373,25374,25376,25378],{"class":222,"line":179},[220,25375,343],{"class":264},[220,25377,347],{"class":346},[220,25379,359],{"class":264},[220,25381,25382,25384,25386],{"class":222,"line":389},[220,25383,364],{"class":264},[220,25385,367],{"class":346},[220,25387,386],{"class":264},[220,25389,25390,25392,25394],{"class":222,"line":399},[220,25391,364],{"class":264},[220,25393,5591],{"class":346},[220,25395,359],{"class":264},[220,25397,25398,25400,25402],{"class":222,"line":644},[220,25399,2550],{"class":264},[220,25401,14833],{"class":346},[220,25403,359],{"class":264},[220,25405,25406,25408,25410,25412,25414,25417],{"class":222,"line":650},[220,25407,2813],{"class":264},[220,25409,11136],{"class":346},[220,25411,16695],{"class":226},[220,25413,353],{"class":264},[220,25415,25416],{"class":230},"\"20\"",[220,25418,359],{"class":264},[220,25420,25421,25423,25425],{"class":222,"line":656},[220,25422,10176],{"class":264},[220,25424,2553],{"class":346},[220,25426,386],{"class":264},[220,25428,25429,25431,25433],{"class":222,"line":673},[220,25430,10281],{"class":264},[220,25432,11136],{"class":346},[220,25434,359],{"class":264},[220,25436,25437,25439,25441],{"class":222,"line":682},[220,25438,2828],{"class":264},[220,25440,14833],{"class":346},[220,25442,359],{"class":264},[220,25444,25445,25447,25449],{"class":222,"line":691},[220,25446,2567],{"class":264},[220,25448,5591],{"class":346},[220,25450,359],{"class":264},[220,25452,25453,25455,25457],{"class":222,"line":696},[220,25454,402],{"class":264},[220,25456,347],{"class":346},[220,25458,359],{"class":264},[220,25460,25461],{"class":222,"line":702},[220,25462,647],{"emptyLinePlaceholder":194},[220,25464,25465],{"class":222,"line":718},[220,25466,25467],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,25469,25470,25472,25474],{"class":222,"line":727},[220,25471,343],{"class":264},[220,25473,347],{"class":346},[220,25475,359],{"class":264},[220,25477,25478,25480,25482],{"class":222,"line":2664},[220,25479,364],{"class":264},[220,25481,367],{"class":346},[220,25483,386],{"class":264},[220,25485,25486,25488,25490],{"class":222,"line":3522},[220,25487,364],{"class":264},[220,25489,5591],{"class":346},[220,25491,359],{"class":264},[220,25493,25494,25496,25498],{"class":222,"line":9029},[220,25495,2550],{"class":264},[220,25497,2553],{"class":346},[220,25499,386],{"class":264},[220,25501,25502,25504,25506],{"class":222,"line":9040},[220,25503,2567],{"class":264},[220,25505,5591],{"class":346},[220,25507,359],{"class":264},[220,25509,25510,25512,25514],{"class":222,"line":9045},[220,25511,402],{"class":264},[220,25513,347],{"class":346},[220,25515,359],{"class":264},[23,25517,25519],{"id":25518},"practical-tips","Practical tips",[15,25521,25522,25525],{},[159,25523,25524],{},"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,25527,25528,25531],{},[159,25529,25530],{},"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,25533,25534,25537,25538,25540,25541,25543,25544,25546],{},[159,25535,25536],{},"Invisible layers still cost."," A hidden layer with ",[99,25539,8411],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,25542,8039],{}," still renders the layer. Use ",[99,25545,8411],{}," to truly exclude layers you don't need.",[15,25548,25549,25552],{},[159,25550,25551],{},"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,25554,25555,25558],{},[159,25556,25557],{},"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,25560,25561],{},"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":25563},[25564,25565,25566,25567],{"id":25224,"depth":179,"text":25225},{"id":25238,"depth":179,"text":25239},{"id":25330,"depth":179,"text":25331},{"id":25518,"depth":179,"text":25519},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":25213,"description":25568},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":25576,"title":201,"body":25577,"category":188,"description":26204,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26205,"navigation":194,"path":26206,"seo":26207,"stem":26208,"__hash__":26209},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":25578,"toc":26194},[25579,25583,25586,25590,25602,25606,25612,25643,25645,25652,25746,25748,25754,25756,25764,25866,25873,25896,25898,25905,25997,26001,26010,26129,26136,26142,26146,26153,26167,26170,26172,26191],[11,25580,25582],{"id":25581},"quickstart-javascript","Quickstart (JavaScript)",[15,25584,25585],{},"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,25587,25589],{"id":25588},"install-the-npm-package","Install the npm package",[212,25591,25592],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,25593,25594],{"__ignoreMap":178},[220,25595,25596,25598,25600],{"class":222,"line":223},[220,25597,227],{"class":226},[220,25599,231],{"class":230},[220,25601,234],{"class":230},[23,25603,25605],{"id":25604},"set-up-a-canvas","Set up a canvas",[15,25607,25608,25609,25611],{},"Create a ",[99,25610,586],{}," element in your HTML and give it a size:",[212,25613,25615],{"className":12246,"code":25614,"language":12248,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,25616,25617],{"__ignoreMap":178},[220,25618,25619,25621,25623,25625,25627,25630,25632,25634,25637,25639,25641],{"class":222,"line":223},[220,25620,343],{"class":264},[220,25622,12257],{"class":346},[220,25624,8466],{"class":226},[220,25626,353],{"class":264},[220,25628,25629],{"class":230},"\"my-shader\"",[220,25631,663],{"class":226},[220,25633,353],{"class":264},[220,25635,25636],{"class":230},"\"width: 100%; height: 400px;\"",[220,25638,3804],{"class":264},[220,25640,12257],{"class":346},[220,25642,359],{"class":264},[23,25644,323],{"id":322},[15,25646,25647,25648,25651],{},"Import ",[99,25649,25650],{},"createShader",", pass it the canvas and a list of components:",[212,25653,25655],{"className":251,"code":25654,"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,25656,25657,25667,25671,25689,25693,25707,25711,25729,25738,25742],{"__ignoreMap":178},[220,25658,25659,25661,25663,25665],{"class":222,"line":223},[220,25660,261],{"class":260},[220,25662,10879],{"class":264},[220,25664,268],{"class":260},[220,25666,4007],{"class":230},[220,25668,25669],{"class":222,"line":179},[220,25670,647],{"emptyLinePlaceholder":194},[220,25672,25673,25675,25677,25679,25681,25683,25685,25687],{"class":222,"line":389},[220,25674,1735],{"class":260},[220,25676,3133],{"class":420},[220,25678,1741],{"class":260},[220,25680,3138],{"class":264},[220,25682,3141],{"class":226},[220,25684,2626],{"class":264},[220,25686,11892],{"class":230},[220,25688,2632],{"class":264},[220,25690,25691],{"class":222,"line":399},[220,25692,647],{"emptyLinePlaceholder":194},[220,25694,25695,25697,25699,25701,25703,25705],{"class":222,"line":644},[220,25696,1735],{"class":260},[220,25698,1738],{"class":420},[220,25700,1741],{"class":260},[220,25702,1744],{"class":260},[220,25704,1747],{"class":226},[220,25706,1750],{"class":264},[220,25708,25709],{"class":222,"line":650},[220,25710,1765],{"class":264},[220,25712,25713,25715,25717,25719,25722,25724,25727],{"class":222,"line":656},[220,25714,1770],{"class":264},[220,25716,2462],{"class":230},[220,25718,9533],{"class":264},[220,25720,25721],{"class":230},"'#0f172a'",[220,25723,9539],{"class":264},[220,25725,25726],{"class":230},"'#7c3aed'",[220,25728,5937],{"class":264},[220,25730,25731,25733,25736],{"class":222,"line":673},[220,25732,1770],{"class":264},[220,25734,25735],{"class":230},"'CursorTrail'",[220,25737,2465],{"class":264},[220,25739,25740],{"class":222,"line":682},[220,25741,1787],{"class":264},[220,25743,25744],{"class":222,"line":691},[220,25745,1792],{"class":264},[19,25747],{":preset":578},[15,25749,1839,25750,25753],{},[99,25751,25752],{},"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,25755,594],{"id":593},[15,25757,1839,25758,25760,25761,1554],{},[99,25759,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,25762,25763],{},"ResizeObserver",[212,25765,25767],{"className":12246,"code":25766,"language":12248,"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,25768,25769,25774,25799,25803,25808,25833,25837,25842],{"__ignoreMap":178},[220,25770,25771],{"class":222,"line":223},[220,25772,25773],{"class":609},"\u003C!-- Fixed size -->\n",[220,25775,25776,25778,25780,25782,25784,25787,25789,25791,25793,25795,25797],{"class":222,"line":179},[220,25777,343],{"class":264},[220,25779,12257],{"class":346},[220,25781,8466],{"class":226},[220,25783,353],{"class":264},[220,25785,25786],{"class":230},"\"shader\"",[220,25788,663],{"class":226},[220,25790,353],{"class":264},[220,25792,668],{"class":230},[220,25794,3804],{"class":264},[220,25796,12257],{"class":346},[220,25798,359],{"class":264},[220,25800,25801],{"class":222,"line":389},[220,25802,647],{"emptyLinePlaceholder":194},[220,25804,25805],{"class":222,"line":399},[220,25806,25807],{"class":609},"\u003C!-- Full viewport -->\n",[220,25809,25810,25812,25814,25816,25818,25820,25822,25824,25827,25829,25831],{"class":222,"line":644},[220,25811,343],{"class":264},[220,25813,12257],{"class":346},[220,25815,8466],{"class":226},[220,25817,353],{"class":264},[220,25819,25786],{"class":230},[220,25821,663],{"class":226},[220,25823,353],{"class":264},[220,25825,25826],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,25828,3804],{"class":264},[220,25830,12257],{"class":346},[220,25832,359],{"class":264},[220,25834,25835],{"class":222,"line":650},[220,25836,647],{"emptyLinePlaceholder":194},[220,25838,25839],{"class":222,"line":656},[220,25840,25841],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,25843,25844,25846,25848,25850,25852,25854,25856,25858,25860,25862,25864],{"class":222,"line":673},[220,25845,343],{"class":264},[220,25847,12257],{"class":346},[220,25849,8466],{"class":226},[220,25851,353],{"class":264},[220,25853,25786],{"class":230},[220,25855,350],{"class":226},[220,25857,353],{"class":264},[220,25859,713],{"class":230},[220,25861,3804],{"class":264},[220,25863,12257],{"class":346},[220,25865,359],{"class":264},[15,25867,25868,25869,25872],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,25870,25871],{},"shader.resize()"," to sync:",[212,25874,25876],{"className":251,"code":25875,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,25877,25878,25887],{"__ignoreMap":178},[220,25879,25880,25882,25884],{"class":222,"line":223},[220,25881,11909],{"class":264},[220,25883,353],{"class":260},[220,25885,25886],{"class":230}," '600px'\n",[220,25888,25889,25891,25894],{"class":222,"line":179},[220,25890,10969],{"class":264},[220,25892,25893],{"class":226},"resize",[220,25895,4032],{"class":264},[23,25897,1153],{"id":1152},[15,25899,25900,25901,25904],{},"Props are passed in the ",[99,25902,25903],{},"props"," object for each component. All prop names are camelCase:",[212,25906,25908],{"className":251,"code":25907,"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,25909,25910,25924,25928,25932,25940,25944,25954,25964,25973,25981,25985,25989,25993],{"__ignoreMap":178},[220,25911,25912,25914,25916,25918,25920,25922],{"class":222,"line":223},[220,25913,1735],{"class":260},[220,25915,1738],{"class":420},[220,25917,1741],{"class":260},[220,25919,1744],{"class":260},[220,25921,1747],{"class":226},[220,25923,1750],{"class":264},[220,25925,25926],{"class":222,"line":179},[220,25927,1765],{"class":264},[220,25929,25930],{"class":222,"line":389},[220,25931,15746],{"class":264},[220,25933,25934,25936,25938],{"class":222,"line":399},[220,25935,15751],{"class":264},[220,25937,2462],{"class":230},[220,25939,1760],{"class":264},[220,25941,25942],{"class":222,"line":644},[220,25943,15760],{"class":264},[220,25945,25946,25949,25952],{"class":222,"line":650},[220,25947,25948],{"class":264}," colorA: ",[220,25950,25951],{"class":230},"'#ff6b6b'",[220,25953,1760],{"class":264},[220,25955,25956,25959,25962],{"class":222,"line":656},[220,25957,25958],{"class":264}," colorB: ",[220,25960,25961],{"class":230},"'#4ecdc4'",[220,25963,1760],{"class":264},[220,25965,25966,25969,25971],{"class":222,"line":673},[220,25967,25968],{"class":264}," angle: ",[220,25970,1295],{"class":420},[220,25972,1760],{"class":264},[220,25974,25975,25978],{"class":222,"line":682},[220,25976,25977],{"class":264}," colorSpace: ",[220,25979,25980],{"class":230},"'oklch'\n",[220,25982,25983],{"class":222,"line":691},[220,25984,4912],{"class":264},[220,25986,25987],{"class":222,"line":696},[220,25988,4604],{"class":264},[220,25990,25991],{"class":222,"line":702},[220,25992,1787],{"class":264},[220,25994,25995],{"class":222,"line":718},[220,25996,1792],{"class":264},[23,25998,26000],{"id":25999},"updating-at-runtime","Updating at runtime",[15,26002,26003,26004,26006,26007,26009],{},"Assign an ",[99,26005,8422],{}," to any component, then use ",[99,26008,20164],{}," to change its props at any time:",[212,26011,26013],{"className":251,"code":26012,"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,26014,26015,26029,26033,26058,26062,26066,26070,26075,26107,26125],{"__ignoreMap":178},[220,26016,26017,26019,26021,26023,26025,26027],{"class":222,"line":223},[220,26018,1735],{"class":260},[220,26020,1738],{"class":420},[220,26022,1741],{"class":260},[220,26024,1744],{"class":260},[220,26026,1747],{"class":226},[220,26028,1750],{"class":264},[220,26030,26031],{"class":222,"line":179},[220,26032,1765],{"class":264},[220,26034,26035,26037,26039,26041,26043,26045,26047,26049,26051,26054,26056],{"class":222,"line":389},[220,26036,1770],{"class":264},[220,26038,2462],{"class":230},[220,26040,3209],{"class":264},[220,26042,10936],{"class":230},[220,26044,9533],{"class":264},[220,26046,25721],{"class":230},[220,26048,9539],{"class":264},[220,26050,25726],{"class":230},[220,26052,26053],{"class":264},", angle: ",[220,26055,8039],{"class":420},[220,26057,1782],{"class":264},[220,26059,26060],{"class":222,"line":399},[220,26061,1787],{"class":264},[220,26063,26064],{"class":222,"line":644},[220,26065,1792],{"class":264},[220,26067,26068],{"class":222,"line":650},[220,26069,647],{"emptyLinePlaceholder":194},[220,26071,26072],{"class":222,"line":656},[220,26073,26074],{"class":609},"\u002F\u002F Hook up a slider\n",[220,26076,26077,26080,26083,26085,26088,26090,26093,26095,26098,26100,26103,26105],{"class":222,"line":673},[220,26078,26079],{"class":264},"document.",[220,26081,26082],{"class":226},"querySelector",[220,26084,2626],{"class":264},[220,26086,26087],{"class":230},"'#angle-slider'",[220,26089,14804],{"class":264},[220,26091,26092],{"class":226},"addEventListener",[220,26094,2626],{"class":264},[220,26096,26097],{"class":230},"'input'",[220,26099,1895],{"class":264},[220,26101,26102],{"class":3621},"e",[220,26104,10197],{"class":260},[220,26106,3241],{"class":264},[220,26108,26109,26111,26113,26115,26117,26119,26122],{"class":222,"line":682},[220,26110,16534],{"class":264},[220,26112,10972],{"class":226},[220,26114,2626],{"class":264},[220,26116,10936],{"class":230},[220,26118,10979],{"class":264},[220,26120,26121],{"class":226},"Number",[220,26123,26124],{"class":264},"(e.target.value) })\n",[220,26126,26127],{"class":222,"line":691},[220,26128,1792],{"class":264},[15,26130,26131,26132,26135],{},"When ",[99,26133,26134],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26137,26138,26139,26141],{},"Browse the ",[56,26140,1160],{"href":1159}," for the full prop reference on every component.",[23,26143,26145],{"id":26144},"cleanup","Cleanup",[15,26147,26148,26149,26152],{},"When you're done, call ",[99,26150,26151],{},"destroy()"," to free GPU resources:",[212,26154,26156],{"className":251,"code":26155,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,26157,26158],{"__ignoreMap":178},[220,26159,26160,26162,26165],{"class":222,"line":223},[220,26161,10969],{"class":264},[220,26163,26164],{"class":226},"destroy",[220,26166,4032],{"class":264},[15,26168,26169],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,26171,1474],{"id":1473},[34,26173,26174,26178,26182,26187],{},[37,26175,26176,1483],{},[56,26177,1482],{"href":1481},[37,26179,26180,1490],{},[56,26181,1489],{"href":1488},[37,26183,26184,26186],{},[56,26185,16665],{"href":16639}," — animate and mouse-track props declaratively",[37,26188,26189,1502],{},[56,26190,1160],{"href":1159},[1504,26192,26193],{},"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":26195},[26196,26197,26198,26199,26200,26201,26202,26203],{"id":25588,"depth":179,"text":25589},{"id":25604,"depth":179,"text":25605},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":25999,"depth":179,"text":26000},{"id":26144,"depth":179,"text":26145},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":26204},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":26211,"title":201,"body":26212,"category":188,"description":26846,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26847,"navigation":194,"path":26848,"seo":26849,"stem":26850,"__hash__":26851},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":26213,"toc":26837},[26214,26218,26222,26224,26236,26240,26254,26256,26259,26313,26315,26322,26324,26337,26471,26485,26487,26490,26562,26569,26797,26802,26806,26810,26818,26820,26834],[11,26215,26217],{"id":26216},"quickstart-react","Quickstart (React)",[26219,26220],"you-tube-embed",{"id":26221},"G7kzM8M7hA4",[23,26223,25589],{"id":25588},[212,26225,26226],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26227,26228],{"__ignoreMap":178},[220,26229,26230,26232,26234],{"class":222,"line":223},[220,26231,227],{"class":226},[220,26233,231],{"class":230},[220,26235,234],{"class":230},[23,26237,26239],{"id":26238},"import-some-components","Import some components",[212,26241,26242],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,26243,26244],{"__ignoreMap":178},[220,26245,26246,26248,26250,26252],{"class":222,"line":223},[220,26247,261],{"class":260},[220,26249,265],{"class":264},[220,26251,268],{"class":260},[220,26253,287],{"class":230},[23,26255,323],{"id":322},[15,26257,26258],{},"Let's create a very simple shader:",[212,26260,26261],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,26262,26263,26277,26297,26305],{"__ignoreMap":178},[220,26264,26265,26267,26269,26271,26273,26275],{"class":222,"line":223},[220,26266,343],{"class":264},[220,26268,347],{"class":420},[220,26270,423],{"class":226},[220,26272,353],{"class":260},[220,26274,356],{"class":230},[220,26276,359],{"class":264},[220,26278,26279,26281,26283,26285,26287,26289,26291,26293,26295],{"class":222,"line":179},[220,26280,364],{"class":264},[220,26282,367],{"class":420},[220,26284,370],{"class":226},[220,26286,353],{"class":260},[220,26288,375],{"class":230},[220,26290,378],{"class":226},[220,26292,353],{"class":260},[220,26294,383],{"class":230},[220,26296,386],{"class":264},[220,26298,26299,26301,26303],{"class":222,"line":389},[220,26300,364],{"class":264},[220,26302,394],{"class":420},[220,26304,386],{"class":264},[220,26306,26307,26309,26311],{"class":222,"line":399},[220,26308,402],{"class":264},[220,26310,347],{"class":420},[220,26312,359],{"class":264},[19,26314],{":preset":578},[15,26316,26317,583,26319,26321],{},[99,26318,101],{},[99,26320,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,26323,594],{"id":593},[15,26325,1839,26326,26328,26329,18112,26332,26334,26335,590],{},[99,26327,586],{}," has no intrinsic size. The ",[99,26330,26331],{},"className",[99,26333,1504],{}," you apply to ",[99,26336,101],{},[212,26338,26340],{"className":409,"code":26339,"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,26341,26342,26350,26364,26372,26380,26384,26392,26412,26420,26428,26432,26441,26455,26463],{"__ignoreMap":178},[220,26343,26344,26346,26348],{"class":222,"line":223},[220,26345,743],{"class":264},[220,26347,746],{"class":609},[220,26349,749],{"class":264},[220,26351,26352,26354,26356,26358,26360,26362],{"class":222,"line":179},[220,26353,343],{"class":264},[220,26355,347],{"class":420},[220,26357,423],{"class":226},[220,26359,353],{"class":260},[220,26361,623],{"class":230},[220,26363,359],{"class":264},[220,26365,26366,26368,26370],{"class":222,"line":389},[220,26367,364],{"class":264},[220,26369,367],{"class":420},[220,26371,386],{"class":264},[220,26373,26374,26376,26378],{"class":222,"line":399},[220,26375,402],{"class":264},[220,26377,347],{"class":420},[220,26379,359],{"class":264},[220,26381,26382],{"class":222,"line":644},[220,26383,647],{"emptyLinePlaceholder":194},[220,26385,26386,26388,26390],{"class":222,"line":650},[220,26387,743],{"class":264},[220,26389,790],{"class":609},[220,26391,749],{"class":264},[220,26393,26394,26396,26398,26400,26402,26404,26406,26408,26410],{"class":222,"line":656},[220,26395,343],{"class":264},[220,26397,347],{"class":420},[220,26399,663],{"class":226},[220,26401,353],{"class":260},[220,26403,805],{"class":264},[220,26405,808],{"class":230},[220,26407,811],{"class":264},[220,26409,814],{"class":230},[220,26411,817],{"class":264},[220,26413,26414,26416,26418],{"class":222,"line":673},[220,26415,364],{"class":264},[220,26417,367],{"class":420},[220,26419,386],{"class":264},[220,26421,26422,26424,26426],{"class":222,"line":682},[220,26423,402],{"class":264},[220,26425,347],{"class":420},[220,26427,359],{"class":264},[220,26429,26430],{"class":222,"line":691},[220,26431,647],{"emptyLinePlaceholder":194},[220,26433,26434,26436,26439],{"class":222,"line":696},[220,26435,743],{"class":264},[220,26437,26438],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,26440,749],{"class":264},[220,26442,26443,26445,26447,26449,26451,26453],{"class":222,"line":702},[220,26444,343],{"class":264},[220,26446,347],{"class":420},[220,26448,423],{"class":226},[220,26450,353],{"class":260},[220,26452,713],{"class":230},[220,26454,359],{"class":264},[220,26456,26457,26459,26461],{"class":222,"line":718},[220,26458,364],{"class":264},[220,26460,367],{"class":420},[220,26462,386],{"class":264},[220,26464,26465,26467,26469],{"class":222,"line":727},[220,26466,402],{"class":264},[220,26468,347],{"class":420},[220,26470,359],{"class":264},[15,26472,26473,26474,18112,26476,26478,26479,26481,26482,26484],{},"Applying a ",[99,26475,26331],{},[99,26477,1504],{}," to the ",[99,26480,101],{}," tag is preferred over trying to target the ",[99,26483,586],{}," element directly, as the internal DOM structure may change in the future.",[23,26486,1153],{"id":1152},[15,26488,26489],{},"Pass props directly to configure each component. All props use camelCase:",[212,26491,26492],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,26493,26494,26508,26514,26522,26530,26542,26550,26554],{"__ignoreMap":178},[220,26495,26496,26498,26500,26502,26504,26506],{"class":222,"line":223},[220,26497,343],{"class":264},[220,26499,347],{"class":420},[220,26501,423],{"class":226},[220,26503,353],{"class":260},[220,26505,356],{"class":230},[220,26507,359],{"class":264},[220,26509,26510,26512],{"class":222,"line":179},[220,26511,364],{"class":264},[220,26513,1189],{"class":420},[220,26515,26516,26518,26520],{"class":222,"line":389},[220,26517,1194],{"class":226},[220,26519,353],{"class":260},[220,26521,1199],{"class":230},[220,26523,26524,26526,26528],{"class":222,"line":399},[220,26525,1204],{"class":226},[220,26527,353],{"class":260},[220,26529,1209],{"class":230},[220,26531,26532,26534,26536,26538,26540],{"class":222,"line":644},[220,26533,1288],{"class":226},[220,26535,353],{"class":260},[220,26537,743],{"class":264},[220,26539,1295],{"class":420},[220,26541,749],{"class":264},[220,26543,26544,26546,26548],{"class":222,"line":650},[220,26545,1302],{"class":226},[220,26547,353],{"class":260},[220,26549,1229],{"class":230},[220,26551,26552],{"class":222,"line":656},[220,26553,1234],{"class":264},[220,26555,26556,26558,26560],{"class":222,"line":673},[220,26557,402],{"class":264},[220,26559,347],{"class":420},[220,26561,359],{"class":264},[15,26563,26564,26565,26568],{},"Props also accept state — ",[99,26566,26567],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,26570,26572],{"className":409,"code":26571,"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,26573,26574,26584,26595,26599,26614,26638,26642,26648,26652,26666,26693,26701,26705,26712,26722,26735,26749,26759,26781,26785,26789,26793],{"__ignoreMap":178},[220,26575,26576,26578,26580,26582],{"class":222,"line":223},[220,26577,261],{"class":260},[220,26579,2682],{"class":264},[220,26581,268],{"class":260},[220,26583,2687],{"class":230},[220,26585,26586,26588,26591,26593],{"class":222,"line":179},[220,26587,261],{"class":260},[220,26589,26590],{"class":264}," { Shader, LinearGradient } ",[220,26592,268],{"class":260},[220,26594,287],{"class":230},[220,26596,26597],{"class":222,"line":389},[220,26598,647],{"emptyLinePlaceholder":194},[220,26600,26601,26604,26607,26609,26612],{"class":222,"line":399},[220,26602,26603],{"class":260},"export",[220,26605,26606],{"class":260}," default",[220,26608,11308],{"class":260},[220,26610,26611],{"class":226}," MyShader",[220,26613,2647],{"class":264},[220,26615,26616,26618,26620,26622,26624,26626,26628,26630,26632,26634,26636],{"class":222,"line":644},[220,26617,2705],{"class":260},[220,26619,2708],{"class":264},[220,26621,10131],{"class":420},[220,26623,1895],{"class":264},[220,26625,10136],{"class":420},[220,26627,2719],{"class":264},[220,26629,353],{"class":260},[220,26631,2724],{"class":226},[220,26633,2626],{"class":264},[220,26635,8039],{"class":420},[220,26637,2632],{"class":264},[220,26639,26640],{"class":222,"line":650},[220,26641,647],{"emptyLinePlaceholder":194},[220,26643,26644,26646],{"class":222,"line":656},[220,26645,2739],{"class":260},[220,26647,2742],{"class":264},[220,26649,26650],{"class":222,"line":673},[220,26651,10163],{"class":264},[220,26653,26654,26656,26658,26660,26662,26664],{"class":222,"line":682},[220,26655,2813],{"class":264},[220,26657,347],{"class":420},[220,26659,423],{"class":226},[220,26661,353],{"class":260},[220,26663,356],{"class":230},[220,26665,359],{"class":264},[220,26667,26668,26670,26672,26674,26676,26679,26681,26683,26686,26688,26690],{"class":222,"line":691},[220,26669,10176],{"class":264},[220,26671,367],{"class":420},[220,26673,370],{"class":226},[220,26675,353],{"class":260},[220,26677,26678],{"class":230},"\"#ff6b6b\"",[220,26680,378],{"class":226},[220,26682,353],{"class":260},[220,26684,26685],{"class":230},"\"#4ecdc4\"",[220,26687,9899],{"class":226},[220,26689,353],{"class":260},[220,26691,26692],{"class":264},"{angle} \u002F>\n",[220,26694,26695,26697,26699],{"class":222,"line":696},[220,26696,10281],{"class":264},[220,26698,347],{"class":420},[220,26700,359],{"class":264},[220,26702,26703],{"class":222,"line":702},[220,26704,647],{"emptyLinePlaceholder":194},[220,26706,26707,26709],{"class":222,"line":718},[220,26708,2813],{"class":264},[220,26710,26711],{"class":346},"input\n",[220,26713,26714,26717,26719],{"class":222,"line":727},[220,26715,26716],{"class":226}," type",[220,26718,353],{"class":260},[220,26720,26721],{"class":230},"\"range\"\n",[220,26723,26724,26727,26729,26731,26733],{"class":222,"line":2664},[220,26725,26726],{"class":226}," min",[220,26728,353],{"class":260},[220,26730,743],{"class":264},[220,26732,8039],{"class":420},[220,26734,749],{"class":264},[220,26736,26737,26740,26742,26744,26747],{"class":222,"line":3522},[220,26738,26739],{"class":226}," max",[220,26741,353],{"class":260},[220,26743,743],{"class":264},[220,26745,26746],{"class":420},"360",[220,26748,749],{"class":264},[220,26750,26751,26754,26756],{"class":222,"line":9029},[220,26752,26753],{"class":226}," value",[220,26755,353],{"class":260},[220,26757,26758],{"class":264},"{angle}\n",[220,26760,26761,26764,26766,26768,26770,26772,26774,26776,26778],{"class":222,"line":9040},[220,26762,26763],{"class":226}," onChange",[220,26765,353],{"class":260},[220,26767,743],{"class":264},[220,26769,26102],{"class":3621},[220,26771,10197],{"class":260},[220,26773,10190],{"class":226},[220,26775,2626],{"class":264},[220,26777,26121],{"class":226},[220,26779,26780],{"class":264},"(e.target.value))}\n",[220,26782,26783],{"class":222,"line":9045},[220,26784,16404],{"class":264},[220,26786,26787],{"class":222,"line":10366},[220,26788,10363],{"class":264},[220,26790,26791],{"class":222,"line":10371},[220,26792,2837],{"class":264},[220,26794,26795],{"class":222,"line":11442},[220,26796,749],{"class":264},[15,26798,26131,26799,26801],{},[99,26800,10131],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26803,26138,26804,26141],{},[56,26805,1160],{"href":1159},[23,26807,26809],{"id":26808},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,26811,26812,26813,26817],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,26814,26816],{"href":26815},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,26819,1474],{"id":1473},[34,26821,26822,26826,26830],{},[37,26823,26824,1483],{},[56,26825,1482],{"href":1481},[37,26827,26828,1490],{},[56,26829,1489],{"href":1488},[37,26831,26832,1502],{},[56,26833,1160],{"href":1159},[1504,26835,26836],{},"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":26838},[26839,26840,26841,26842,26843,26844,26845],{"id":25588,"depth":179,"text":25589},{"id":26238,"depth":179,"text":26239},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":26808,"depth":179,"text":26809},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":26846},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":26853,"title":26816,"body":26854,"category":2240,"description":27743,"exclude":190,"extension":191,"forceFramework":190,"icon":27744,"meta":27745,"navigation":194,"path":26815,"seo":27746,"stem":27747,"__hash__":27748},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":26855,"toc":27734},[26856,26860,26863,26870,26873,26982,26985,27075,27080,27090,27096,27221,27224,27228,27234,27352,27356,27359,27466,27557,27561,27564,27731],[11,26857,26859],{"id":26858},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,26861,26862],{},"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,26864,26866,26867],{"id":26865},"app-router-use-client","App Router: ",[99,26868,26869],{},"'use client'",[15,26871,26872],{},"In Next.js App Router, create a client component wrapper:",[212,26874,26876],{"className":409,"code":26875,"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,26877,26878,26883,26888,26892,26902,26906,26918,26924,26938,26958,26966,26974,26978],{"__ignoreMap":178},[220,26879,26880],{"class":222,"line":223},[220,26881,26882],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,26884,26885],{"class":222,"line":179},[220,26886,26887],{"class":230},"'use client'\n",[220,26889,26890],{"class":222,"line":389},[220,26891,647],{"emptyLinePlaceholder":194},[220,26893,26894,26896,26898,26900],{"class":222,"line":399},[220,26895,261],{"class":260},[220,26897,265],{"class":264},[220,26899,268],{"class":260},[220,26901,287],{"class":230},[220,26903,26904],{"class":222,"line":644},[220,26905,647],{"emptyLinePlaceholder":194},[220,26907,26908,26910,26912,26914,26916],{"class":222,"line":650},[220,26909,26603],{"class":260},[220,26911,26606],{"class":260},[220,26913,11308],{"class":260},[220,26915,26611],{"class":226},[220,26917,2647],{"class":264},[220,26919,26920,26922],{"class":222,"line":656},[220,26921,2739],{"class":260},[220,26923,2742],{"class":264},[220,26925,26926,26928,26930,26932,26934,26936],{"class":222,"line":673},[220,26927,2550],{"class":264},[220,26929,347],{"class":420},[220,26931,423],{"class":226},[220,26933,353],{"class":260},[220,26935,356],{"class":230},[220,26937,359],{"class":264},[220,26939,26940,26942,26944,26946,26948,26950,26952,26954,26956],{"class":222,"line":682},[220,26941,2813],{"class":264},[220,26943,367],{"class":420},[220,26945,370],{"class":226},[220,26947,353],{"class":260},[220,26949,375],{"class":230},[220,26951,378],{"class":226},[220,26953,353],{"class":260},[220,26955,383],{"class":230},[220,26957,386],{"class":264},[220,26959,26960,26962,26964],{"class":222,"line":691},[220,26961,2813],{"class":264},[220,26963,394],{"class":420},[220,26965,386],{"class":264},[220,26967,26968,26970,26972],{"class":222,"line":696},[220,26969,2828],{"class":264},[220,26971,347],{"class":420},[220,26973,359],{"class":264},[220,26975,26976],{"class":222,"line":702},[220,26977,2837],{"class":264},[220,26979,26980],{"class":222,"line":718},[220,26981,749],{"class":264},[15,26983,26984],{},"Then use it in a Server Component:",[212,26986,26988],{"className":409,"code":26987,"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,26989,26990,26995,27007,27011,27024,27030,27038,27047,27059,27067,27071],{"__ignoreMap":178},[220,26991,26992],{"class":222,"line":223},[220,26993,26994],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,26996,26997,26999,27002,27004],{"class":222,"line":179},[220,26998,261],{"class":260},[220,27000,27001],{"class":264}," MyShader ",[220,27003,268],{"class":260},[220,27005,27006],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,27008,27009],{"class":222,"line":389},[220,27010,647],{"emptyLinePlaceholder":194},[220,27012,27013,27015,27017,27019,27022],{"class":222,"line":399},[220,27014,26603],{"class":260},[220,27016,26606],{"class":260},[220,27018,11308],{"class":260},[220,27020,27021],{"class":226}," Page",[220,27023,2647],{"class":264},[220,27025,27026,27028],{"class":222,"line":644},[220,27027,2739],{"class":260},[220,27029,2742],{"class":264},[220,27031,27032,27034,27036],{"class":222,"line":650},[220,27033,2550],{"class":264},[220,27035,12005],{"class":346},[220,27037,359],{"class":264},[220,27039,27040,27042,27045],{"class":222,"line":656},[220,27041,2813],{"class":264},[220,27043,27044],{"class":420},"MyShader",[220,27046,386],{"class":264},[220,27048,27049,27051,27053,27055,27057],{"class":222,"line":673},[220,27050,2813],{"class":264},[220,27052,11],{"class":346},[220,27054,12293],{"class":264},[220,27056,11],{"class":346},[220,27058,359],{"class":264},[220,27060,27061,27063,27065],{"class":222,"line":682},[220,27062,2828],{"class":264},[220,27064,12005],{"class":346},[220,27066,359],{"class":264},[220,27068,27069],{"class":222,"line":691},[220,27070,2837],{"class":264},[220,27072,27073],{"class":222,"line":696},[220,27074,749],{"class":264},[15,27076,1839,27077,27079],{},[99,27078,26869],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,27081,26866,27083,27086,27087],{"id":27082},"app-router-nextdynamic-with-ssr-false",[99,27084,27085],{},"next\u002Fdynamic"," with ",[99,27088,27089],{},"ssr: false",[15,27091,27092,27093,27095],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,27094,27085],{}," to disable SSR:",[212,27097,27099],{"className":409,"code":27098,"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,27100,27101,27106,27118,27122,27136,27154,27163,27167,27171,27183,27189,27197,27205,27213,27217],{"__ignoreMap":178},[220,27102,27103],{"class":222,"line":223},[220,27104,27105],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,27107,27108,27110,27113,27115],{"class":222,"line":179},[220,27109,261],{"class":260},[220,27111,27112],{"class":264}," dynamic ",[220,27114,268],{"class":260},[220,27116,27117],{"class":230}," 'next\u002Fdynamic'\n",[220,27119,27120],{"class":222,"line":389},[220,27121,647],{"emptyLinePlaceholder":194},[220,27123,27124,27126,27128,27130,27133],{"class":222,"line":399},[220,27125,1735],{"class":260},[220,27127,26611],{"class":420},[220,27129,1741],{"class":260},[220,27131,27132],{"class":226}," dynamic",[220,27134,27135],{"class":264},"(\n",[220,27137,27138,27141,27143,27146,27148,27151],{"class":222,"line":644},[220,27139,27140],{"class":264}," () ",[220,27142,2762],{"class":260},[220,27144,27145],{"class":260}," import",[220,27147,2626],{"class":264},[220,27149,27150],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,27152,27153],{"class":264},"),\n",[220,27155,27156,27159,27161],{"class":222,"line":650},[220,27157,27158],{"class":264}," { ssr: ",[220,27160,2629],{"class":420},[220,27162,19408],{"class":264},[220,27164,27165],{"class":222,"line":656},[220,27166,2632],{"class":264},[220,27168,27169],{"class":222,"line":673},[220,27170,647],{"emptyLinePlaceholder":194},[220,27172,27173,27175,27177,27179,27181],{"class":222,"line":682},[220,27174,26603],{"class":260},[220,27176,26606],{"class":260},[220,27178,11308],{"class":260},[220,27180,27021],{"class":226},[220,27182,2647],{"class":264},[220,27184,27185,27187],{"class":222,"line":691},[220,27186,2739],{"class":260},[220,27188,2742],{"class":264},[220,27190,27191,27193,27195],{"class":222,"line":696},[220,27192,2550],{"class":264},[220,27194,12005],{"class":346},[220,27196,359],{"class":264},[220,27198,27199,27201,27203],{"class":222,"line":702},[220,27200,2813],{"class":264},[220,27202,27044],{"class":420},[220,27204,386],{"class":264},[220,27206,27207,27209,27211],{"class":222,"line":718},[220,27208,2828],{"class":264},[220,27210,12005],{"class":346},[220,27212,359],{"class":264},[220,27214,27215],{"class":222,"line":727},[220,27216,2837],{"class":264},[220,27218,27219],{"class":222,"line":2664},[220,27220,749],{"class":264},[15,27222,27223],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,27225,27227],{"id":27226},"pages-router","Pages Router",[15,27229,27230,27231,27233],{},"In the Pages Router, the same ",[99,27232,27085],{}," approach works:",[212,27235,27237],{"className":409,"code":27236,"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,27238,27239,27244,27254,27258,27270,27285,27293,27297,27301,27314,27320,27328,27336,27344,27348],{"__ignoreMap":178},[220,27240,27241],{"class":222,"line":223},[220,27242,27243],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,27245,27246,27248,27250,27252],{"class":222,"line":179},[220,27247,261],{"class":260},[220,27249,27112],{"class":264},[220,27251,268],{"class":260},[220,27253,27117],{"class":230},[220,27255,27256],{"class":222,"line":389},[220,27257,647],{"emptyLinePlaceholder":194},[220,27259,27260,27262,27264,27266,27268],{"class":222,"line":399},[220,27261,1735],{"class":260},[220,27263,26611],{"class":420},[220,27265,1741],{"class":260},[220,27267,27132],{"class":226},[220,27269,27135],{"class":264},[220,27271,27272,27274,27276,27278,27280,27283],{"class":222,"line":644},[220,27273,27140],{"class":264},[220,27275,2762],{"class":260},[220,27277,27145],{"class":260},[220,27279,2626],{"class":264},[220,27281,27282],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,27284,27153],{"class":264},[220,27286,27287,27289,27291],{"class":222,"line":650},[220,27288,27158],{"class":264},[220,27290,2629],{"class":420},[220,27292,19408],{"class":264},[220,27294,27295],{"class":222,"line":656},[220,27296,2632],{"class":264},[220,27298,27299],{"class":222,"line":673},[220,27300,647],{"emptyLinePlaceholder":194},[220,27302,27303,27305,27307,27309,27312],{"class":222,"line":682},[220,27304,26603],{"class":260},[220,27306,26606],{"class":260},[220,27308,11308],{"class":260},[220,27310,27311],{"class":226}," Home",[220,27313,2647],{"class":264},[220,27315,27316,27318],{"class":222,"line":691},[220,27317,2739],{"class":260},[220,27319,2742],{"class":264},[220,27321,27322,27324,27326],{"class":222,"line":696},[220,27323,2550],{"class":264},[220,27325,3398],{"class":346},[220,27327,359],{"class":264},[220,27329,27330,27332,27334],{"class":222,"line":702},[220,27331,2813],{"class":264},[220,27333,27044],{"class":420},[220,27335,386],{"class":264},[220,27337,27338,27340,27342],{"class":222,"line":718},[220,27339,2828],{"class":264},[220,27341,3398],{"class":346},[220,27343,359],{"class":264},[220,27345,27346],{"class":222,"line":727},[220,27347,2837],{"class":264},[220,27349,27350],{"class":222,"line":2664},[220,27351,749],{"class":264},[23,27353,27355],{"id":27354},"in-a-root-layout","In a root layout",[15,27357,27358],{},"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,27360,27362],{"className":409,"code":27361,"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,27363,27364,27369,27381,27385,27405,27411,27419,27428,27437,27442,27450,27458,27462],{"__ignoreMap":178},[220,27365,27366],{"class":222,"line":223},[220,27367,27368],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,27370,27371,27373,27376,27378],{"class":222,"line":179},[220,27372,261],{"class":260},[220,27374,27375],{"class":264}," BackgroundShader ",[220,27377,268],{"class":260},[220,27379,27380],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,27382,27383],{"class":222,"line":389},[220,27384,647],{"emptyLinePlaceholder":194},[220,27386,27387,27389,27391,27393,27396,27399,27402],{"class":222,"line":399},[220,27388,26603],{"class":260},[220,27390,26606],{"class":260},[220,27392,11308],{"class":260},[220,27394,27395],{"class":226}," RootLayout",[220,27397,27398],{"class":264},"({ ",[220,27400,27401],{"class":3621},"children",[220,27403,27404],{"class":264}," }) {\n",[220,27406,27407,27409],{"class":222,"line":644},[220,27408,2739],{"class":260},[220,27410,2742],{"class":264},[220,27412,27413,27415,27417],{"class":222,"line":650},[220,27414,2550],{"class":264},[220,27416,12248],{"class":346},[220,27418,359],{"class":264},[220,27420,27421,27423,27426],{"class":222,"line":656},[220,27422,2813],{"class":264},[220,27424,27425],{"class":346},"body",[220,27427,359],{"class":264},[220,27429,27430,27432,27435],{"class":222,"line":673},[220,27431,10176],{"class":264},[220,27433,27434],{"class":420},"BackgroundShader",[220,27436,386],{"class":264},[220,27438,27439],{"class":222,"line":682},[220,27440,27441],{"class":264}," {children}\n",[220,27443,27444,27446,27448],{"class":222,"line":691},[220,27445,10281],{"class":264},[220,27447,27425],{"class":346},[220,27449,359],{"class":264},[220,27451,27452,27454,27456],{"class":222,"line":696},[220,27453,2828],{"class":264},[220,27455,12248],{"class":346},[220,27457,359],{"class":264},[220,27459,27460],{"class":222,"line":702},[220,27461,2837],{"class":264},[220,27463,27464],{"class":222,"line":718},[220,27465,749],{"class":264},[212,27467,27469],{"className":409,"code":27468,"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,27470,27471,27476,27480,27484,27495,27499,27512,27518,27533,27541,27549,27553],{"__ignoreMap":178},[220,27472,27473],{"class":222,"line":223},[220,27474,27475],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,27477,27478],{"class":222,"line":179},[220,27479,26887],{"class":230},[220,27481,27482],{"class":222,"line":389},[220,27483,647],{"emptyLinePlaceholder":194},[220,27485,27486,27488,27491,27493],{"class":222,"line":399},[220,27487,261],{"class":260},[220,27489,27490],{"class":264}," { Shader, Aurora } ",[220,27492,268],{"class":260},[220,27494,287],{"class":230},[220,27496,27497],{"class":222,"line":644},[220,27498,647],{"emptyLinePlaceholder":194},[220,27500,27501,27503,27505,27507,27510],{"class":222,"line":650},[220,27502,26603],{"class":260},[220,27504,26606],{"class":260},[220,27506,11308],{"class":260},[220,27508,27509],{"class":226}," BackgroundShader",[220,27511,2647],{"class":264},[220,27513,27514,27516],{"class":222,"line":656},[220,27515,2739],{"class":260},[220,27517,2742],{"class":264},[220,27519,27520,27522,27524,27526,27528,27531],{"class":222,"line":673},[220,27521,2550],{"class":264},[220,27523,347],{"class":420},[220,27525,423],{"class":226},[220,27527,353],{"class":260},[220,27529,27530],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,27532,359],{"class":264},[220,27534,27535,27537,27539],{"class":222,"line":682},[220,27536,2813],{"class":264},[220,27538,11984],{"class":420},[220,27540,386],{"class":264},[220,27542,27543,27545,27547],{"class":222,"line":691},[220,27544,2828],{"class":264},[220,27546,347],{"class":420},[220,27548,359],{"class":264},[220,27550,27551],{"class":222,"line":696},[220,27552,2837],{"class":264},[220,27554,27555],{"class":222,"line":702},[220,27556,749],{"class":264},[23,27558,27560],{"id":27559},"react-without-nextjs","React (without Next.js)",[15,27562,27563],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,27565,27567],{"className":409,"code":27566,"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,27568,27569,27579,27589,27593,27605,27631,27635,27645,27656,27660,27664,27683,27687,27693,27707,27715,27723,27727],{"__ignoreMap":178},[220,27570,27571,27573,27575,27577],{"class":222,"line":223},[220,27572,261],{"class":260},[220,27574,3540],{"class":264},[220,27576,268],{"class":260},[220,27578,2687],{"class":230},[220,27580,27581,27583,27585,27587],{"class":222,"line":179},[220,27582,261],{"class":260},[220,27584,26590],{"class":264},[220,27586,268],{"class":260},[220,27588,287],{"class":230},[220,27590,27591],{"class":222,"line":389},[220,27592,647],{"emptyLinePlaceholder":194},[220,27594,27595,27597,27599,27601,27603],{"class":222,"line":399},[220,27596,26603],{"class":260},[220,27598,26606],{"class":260},[220,27600,11308],{"class":260},[220,27602,26611],{"class":226},[220,27604,2647],{"class":264},[220,27606,27607,27609,27611,27614,27616,27619,27621,27623,27625,27627,27629],{"class":222,"line":644},[220,27608,2705],{"class":260},[220,27610,2708],{"class":264},[220,27612,27613],{"class":420},"mounted",[220,27615,1895],{"class":264},[220,27617,27618],{"class":420},"setMounted",[220,27620,2719],{"class":264},[220,27622,353],{"class":260},[220,27624,2724],{"class":226},[220,27626,2626],{"class":264},[220,27628,2629],{"class":420},[220,27630,2632],{"class":264},[220,27632,27633],{"class":222,"line":650},[220,27634,647],{"emptyLinePlaceholder":194},[220,27636,27637,27639,27641,27643],{"class":222,"line":656},[220,27638,3597],{"class":226},[220,27640,3600],{"class":264},[220,27642,2762],{"class":260},[220,27644,3241],{"class":264},[220,27646,27647,27650,27652,27654],{"class":222,"line":673},[220,27648,27649],{"class":226}," setMounted",[220,27651,2626],{"class":264},[220,27653,2332],{"class":420},[220,27655,2632],{"class":264},[220,27657,27658],{"class":222,"line":682},[220,27659,3637],{"class":264},[220,27661,27662],{"class":222,"line":691},[220,27663,647],{"emptyLinePlaceholder":194},[220,27665,27666,27669,27671,27674,27677,27680],{"class":222,"line":696},[220,27667,27668],{"class":260}," if",[220,27670,3506],{"class":264},[220,27672,27673],{"class":260},"!",[220,27675,27676],{"class":264},"mounted) ",[220,27678,27679],{"class":260},"return",[220,27681,27682],{"class":420}," null\n",[220,27684,27685],{"class":222,"line":702},[220,27686,647],{"emptyLinePlaceholder":194},[220,27688,27689,27691],{"class":222,"line":718},[220,27690,2739],{"class":260},[220,27692,2742],{"class":264},[220,27694,27695,27697,27699,27701,27703,27705],{"class":222,"line":727},[220,27696,2550],{"class":264},[220,27698,347],{"class":420},[220,27700,423],{"class":226},[220,27702,353],{"class":260},[220,27704,356],{"class":230},[220,27706,359],{"class":264},[220,27708,27709,27711,27713],{"class":222,"line":2664},[220,27710,2813],{"class":264},[220,27712,367],{"class":420},[220,27714,386],{"class":264},[220,27716,27717,27719,27721],{"class":222,"line":3522},[220,27718,2828],{"class":264},[220,27720,347],{"class":420},[220,27722,359],{"class":264},[220,27724,27725],{"class":222,"line":9029},[220,27726,2837],{"class":264},[220,27728,27729],{"class":222,"line":9040},[220,27730,749],{"class":264},[1504,27732,27733],{},"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":27735},[27736,27738,27740,27741,27742],{"id":26865,"depth":179,"text":27737},"App Router: 'use client'",{"id":27082,"depth":179,"text":27739},"App Router: next\u002Fdynamic with ssr: false",{"id":27226,"depth":179,"text":27227},{"id":27354,"depth":179,"text":27355},{"id":27559,"depth":179,"text":27560},"Using Shaders in Next.js and React SSR applications","server",{},{"title":26816,"description":27743},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":27750,"title":201,"body":27751,"category":188,"description":28360,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28361,"navigation":194,"path":28362,"seo":28363,"stem":28364,"__hash__":28365},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":27752,"toc":28351},[27753,27757,27759,27771,27773,27787,27789,27791,27845,27847,27853,27855,27866,27999,28009,28011,28014,28086,28093,28316,28319,28323,28327,28333,28335,28349],[11,27754,27756],{"id":27755},"quickstart-solid","Quickstart (Solid)",[23,27758,25589],{"id":25588},[212,27760,27761],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,27762,27763],{"__ignoreMap":178},[220,27764,27765,27767,27769],{"class":222,"line":223},[220,27766,227],{"class":226},[220,27768,231],{"class":230},[220,27770,234],{"class":230},[23,27772,26239],{"id":26238},[212,27774,27775],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,27776,27777],{"__ignoreMap":178},[220,27778,27779,27781,27783,27785],{"class":222,"line":223},[220,27780,261],{"class":260},[220,27782,265],{"class":264},[220,27784,268],{"class":260},[220,27786,319],{"class":230},[23,27788,323],{"id":322},[15,27790,26258],{},[212,27792,27793],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,27794,27795,27809,27829,27837],{"__ignoreMap":178},[220,27796,27797,27799,27801,27803,27805,27807],{"class":222,"line":223},[220,27798,343],{"class":264},[220,27800,347],{"class":420},[220,27802,350],{"class":226},[220,27804,353],{"class":260},[220,27806,356],{"class":230},[220,27808,359],{"class":264},[220,27810,27811,27813,27815,27817,27819,27821,27823,27825,27827],{"class":222,"line":179},[220,27812,364],{"class":264},[220,27814,367],{"class":420},[220,27816,370],{"class":226},[220,27818,353],{"class":260},[220,27820,375],{"class":230},[220,27822,378],{"class":226},[220,27824,353],{"class":260},[220,27826,383],{"class":230},[220,27828,386],{"class":264},[220,27830,27831,27833,27835],{"class":222,"line":389},[220,27832,364],{"class":264},[220,27834,394],{"class":420},[220,27836,386],{"class":264},[220,27838,27839,27841,27843],{"class":222,"line":399},[220,27840,402],{"class":264},[220,27842,347],{"class":420},[220,27844,359],{"class":264},[19,27846],{":preset":578},[15,27848,27849,583,27851,26321],{},[99,27850,101],{},[99,27852,586],{},[23,27854,594],{"id":593},[15,27856,1839,27857,26328,27859,18112,27862,26334,27864,590],{},[99,27858,586],{},[99,27860,27861],{},"class",[99,27863,1504],{},[99,27865,101],{},[212,27867,27869],{"className":468,"code":27868,"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,27870,27871,27879,27893,27901,27909,27913,27921,27941,27949,27957,27961,27969,27983,27991],{"__ignoreMap":178},[220,27872,27873,27875,27877],{"class":222,"line":223},[220,27874,743],{"class":264},[220,27876,746],{"class":609},[220,27878,749],{"class":264},[220,27880,27881,27883,27885,27887,27889,27891],{"class":222,"line":179},[220,27882,343],{"class":264},[220,27884,347],{"class":420},[220,27886,350],{"class":226},[220,27888,353],{"class":260},[220,27890,623],{"class":230},[220,27892,359],{"class":264},[220,27894,27895,27897,27899],{"class":222,"line":389},[220,27896,364],{"class":264},[220,27898,367],{"class":420},[220,27900,386],{"class":264},[220,27902,27903,27905,27907],{"class":222,"line":399},[220,27904,402],{"class":264},[220,27906,347],{"class":420},[220,27908,359],{"class":264},[220,27910,27911],{"class":222,"line":644},[220,27912,647],{"emptyLinePlaceholder":194},[220,27914,27915,27917,27919],{"class":222,"line":650},[220,27916,743],{"class":264},[220,27918,790],{"class":609},[220,27920,749],{"class":264},[220,27922,27923,27925,27927,27929,27931,27933,27935,27937,27939],{"class":222,"line":656},[220,27924,343],{"class":264},[220,27926,347],{"class":420},[220,27928,663],{"class":226},[220,27930,353],{"class":260},[220,27932,805],{"class":264},[220,27934,808],{"class":230},[220,27936,811],{"class":264},[220,27938,814],{"class":230},[220,27940,817],{"class":264},[220,27942,27943,27945,27947],{"class":222,"line":673},[220,27944,364],{"class":264},[220,27946,367],{"class":420},[220,27948,386],{"class":264},[220,27950,27951,27953,27955],{"class":222,"line":682},[220,27952,402],{"class":264},[220,27954,347],{"class":420},[220,27956,359],{"class":264},[220,27958,27959],{"class":222,"line":691},[220,27960,647],{"emptyLinePlaceholder":194},[220,27962,27963,27965,27967],{"class":222,"line":696},[220,27964,743],{"class":264},[220,27966,26438],{"class":609},[220,27968,749],{"class":264},[220,27970,27971,27973,27975,27977,27979,27981],{"class":222,"line":702},[220,27972,343],{"class":264},[220,27974,347],{"class":420},[220,27976,350],{"class":226},[220,27978,353],{"class":260},[220,27980,713],{"class":230},[220,27982,359],{"class":264},[220,27984,27985,27987,27989],{"class":222,"line":718},[220,27986,364],{"class":264},[220,27988,367],{"class":420},[220,27990,386],{"class":264},[220,27992,27993,27995,27997],{"class":222,"line":727},[220,27994,402],{"class":264},[220,27996,347],{"class":420},[220,27998,359],{"class":264},[15,28000,26473,28001,18112,28003,26478,28005,26481,28007,26484],{},[99,28002,27861],{},[99,28004,1504],{},[99,28006,101],{},[99,28008,586],{},[23,28010,1153],{"id":1152},[15,28012,28013],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,28015,28016],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,28017,28018,28032,28038,28046,28054,28066,28074,28078],{"__ignoreMap":178},[220,28019,28020,28022,28024,28026,28028,28030],{"class":222,"line":223},[220,28021,343],{"class":264},[220,28023,347],{"class":420},[220,28025,350],{"class":226},[220,28027,353],{"class":260},[220,28029,356],{"class":230},[220,28031,359],{"class":264},[220,28033,28034,28036],{"class":222,"line":179},[220,28035,364],{"class":264},[220,28037,1189],{"class":420},[220,28039,28040,28042,28044],{"class":222,"line":389},[220,28041,1194],{"class":226},[220,28043,353],{"class":260},[220,28045,1199],{"class":230},[220,28047,28048,28050,28052],{"class":222,"line":399},[220,28049,1204],{"class":226},[220,28051,353],{"class":260},[220,28053,1209],{"class":230},[220,28055,28056,28058,28060,28062,28064],{"class":222,"line":644},[220,28057,1288],{"class":226},[220,28059,353],{"class":260},[220,28061,743],{"class":264},[220,28063,1295],{"class":420},[220,28065,749],{"class":264},[220,28067,28068,28070,28072],{"class":222,"line":650},[220,28069,1302],{"class":226},[220,28071,353],{"class":260},[220,28073,1229],{"class":230},[220,28075,28076],{"class":222,"line":656},[220,28077,1234],{"class":264},[220,28079,28080,28082,28084],{"class":222,"line":673},[220,28081,402],{"class":264},[220,28083,347],{"class":420},[220,28085,359],{"class":264},[15,28087,28088,28089,28092],{},"Props also accept signals — ",[99,28090,28091],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,28094,28096],{"className":468,"code":28095,"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,28097,28098,28108,28118,28122,28134,28158,28162,28168,28172,28186,28215,28223,28227,28233,28241,28253,28265,28278,28300,28304,28308,28312],{"__ignoreMap":178},[220,28099,28100,28102,28104,28106],{"class":222,"line":223},[220,28101,261],{"class":260},[220,28103,2982],{"class":264},[220,28105,268],{"class":260},[220,28107,2987],{"class":230},[220,28109,28110,28112,28114,28116],{"class":222,"line":179},[220,28111,261],{"class":260},[220,28113,26590],{"class":264},[220,28115,268],{"class":260},[220,28117,319],{"class":230},[220,28119,28120],{"class":222,"line":389},[220,28121,647],{"emptyLinePlaceholder":194},[220,28123,28124,28126,28128,28130,28132],{"class":222,"line":399},[220,28125,26603],{"class":260},[220,28127,26606],{"class":260},[220,28129,11308],{"class":260},[220,28131,26611],{"class":226},[220,28133,2647],{"class":264},[220,28135,28136,28138,28140,28142,28144,28146,28148,28150,28152,28154,28156],{"class":222,"line":644},[220,28137,2705],{"class":260},[220,28139,2708],{"class":264},[220,28141,10131],{"class":420},[220,28143,1895],{"class":264},[220,28145,10136],{"class":420},[220,28147,2719],{"class":264},[220,28149,353],{"class":260},[220,28151,3018],{"class":226},[220,28153,2626],{"class":264},[220,28155,8039],{"class":420},[220,28157,2632],{"class":264},[220,28159,28160],{"class":222,"line":650},[220,28161,647],{"emptyLinePlaceholder":194},[220,28163,28164,28166],{"class":222,"line":656},[220,28165,2739],{"class":260},[220,28167,2742],{"class":264},[220,28169,28170],{"class":222,"line":673},[220,28171,10163],{"class":264},[220,28173,28174,28176,28178,28180,28182,28184],{"class":222,"line":682},[220,28175,2813],{"class":264},[220,28177,347],{"class":420},[220,28179,350],{"class":226},[220,28181,353],{"class":260},[220,28183,356],{"class":230},[220,28185,359],{"class":264},[220,28187,28188,28190,28192,28194,28196,28198,28200,28202,28204,28206,28208,28210,28212],{"class":222,"line":691},[220,28189,10176],{"class":264},[220,28191,367],{"class":420},[220,28193,370],{"class":226},[220,28195,353],{"class":260},[220,28197,26678],{"class":230},[220,28199,378],{"class":226},[220,28201,353],{"class":260},[220,28203,26685],{"class":230},[220,28205,9899],{"class":226},[220,28207,353],{"class":260},[220,28209,743],{"class":264},[220,28211,10131],{"class":226},[220,28213,28214],{"class":264},"()} \u002F>\n",[220,28216,28217,28219,28221],{"class":222,"line":696},[220,28218,10281],{"class":264},[220,28220,347],{"class":420},[220,28222,359],{"class":264},[220,28224,28225],{"class":222,"line":702},[220,28226,647],{"emptyLinePlaceholder":194},[220,28228,28229,28231],{"class":222,"line":718},[220,28230,2813],{"class":264},[220,28232,26711],{"class":346},[220,28234,28235,28237,28239],{"class":222,"line":727},[220,28236,26716],{"class":226},[220,28238,353],{"class":260},[220,28240,26721],{"class":230},[220,28242,28243,28245,28247,28249,28251],{"class":222,"line":2664},[220,28244,26726],{"class":226},[220,28246,353],{"class":260},[220,28248,743],{"class":264},[220,28250,8039],{"class":420},[220,28252,749],{"class":264},[220,28254,28255,28257,28259,28261,28263],{"class":222,"line":3522},[220,28256,26739],{"class":226},[220,28258,353],{"class":260},[220,28260,743],{"class":264},[220,28262,26746],{"class":420},[220,28264,749],{"class":264},[220,28266,28267,28269,28271,28273,28275],{"class":222,"line":9029},[220,28268,26753],{"class":226},[220,28270,353],{"class":260},[220,28272,743],{"class":264},[220,28274,10131],{"class":226},[220,28276,28277],{"class":264},"()}\n",[220,28279,28280,28283,28285,28287,28289,28291,28293,28295,28297],{"class":222,"line":9040},[220,28281,28282],{"class":226}," onInput",[220,28284,353],{"class":260},[220,28286,743],{"class":264},[220,28288,26102],{"class":3621},[220,28290,10197],{"class":260},[220,28292,10190],{"class":226},[220,28294,2626],{"class":264},[220,28296,26121],{"class":226},[220,28298,28299],{"class":264},"(e.currentTarget.value))}\n",[220,28301,28302],{"class":222,"line":9045},[220,28303,16404],{"class":264},[220,28305,28306],{"class":222,"line":10366},[220,28307,10363],{"class":264},[220,28309,28310],{"class":222,"line":10371},[220,28311,2837],{"class":264},[220,28313,28314],{"class":222,"line":11442},[220,28315,749],{"class":264},[15,28317,28318],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,28320,26138,28321,26141],{},[56,28322,1160],{"href":1159},[23,28324,28326],{"id":28325},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,28328,26812,28329,26817],{},[56,28330,28332],{"href":28331},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,28334,1474],{"id":1473},[34,28336,28337,28341,28345],{},[37,28338,28339,1483],{},[56,28340,1482],{"href":1481},[37,28342,28343,1490],{},[56,28344,1489],{"href":1488},[37,28346,28347,1502],{},[56,28348,1160],{"href":1159},[1504,28350,26836],{},{"title":178,"searchDepth":179,"depth":179,"links":28352},[28353,28354,28355,28356,28357,28358,28359],{"id":25588,"depth":179,"text":25589},{"id":26238,"depth":179,"text":26239},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28325,"depth":179,"text":28326},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":28360},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":28367,"title":28332,"body":28368,"category":2240,"description":28939,"exclude":190,"extension":191,"forceFramework":190,"icon":27744,"meta":28940,"navigation":194,"path":28331,"seo":28941,"stem":28942,"__hash__":28943},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":28369,"toc":28930},[28370,28374,28377,28384,28390,28481,28597,28609,28616,28625,28727,28733,28739,28917,28921,28927],[11,28371,28373],{"id":28372},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,28375,28376],{},"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,28378,28380,28383],{"id":28379},"clientonly-solidstart",[99,28381,28382],{},"clientOnly"," (SolidStart)",[15,28385,28386,28387,28389],{},"SolidStart provides a ",[99,28388,28382],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,28391,28393],{"className":409,"code":28392,"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,28394,28395,28399,28409,28413,28425,28431,28445,28465,28473,28477],{"__ignoreMap":178},[220,28396,28397],{"class":222,"line":223},[220,28398,26882],{"class":609},[220,28400,28401,28403,28405,28407],{"class":222,"line":179},[220,28402,261],{"class":260},[220,28404,26590],{"class":264},[220,28406,268],{"class":260},[220,28408,319],{"class":230},[220,28410,28411],{"class":222,"line":389},[220,28412,647],{"emptyLinePlaceholder":194},[220,28414,28415,28417,28419,28421,28423],{"class":222,"line":399},[220,28416,26603],{"class":260},[220,28418,26606],{"class":260},[220,28420,11308],{"class":260},[220,28422,26611],{"class":226},[220,28424,2647],{"class":264},[220,28426,28427,28429],{"class":222,"line":644},[220,28428,2739],{"class":260},[220,28430,2742],{"class":264},[220,28432,28433,28435,28437,28439,28441,28443],{"class":222,"line":650},[220,28434,2550],{"class":264},[220,28436,347],{"class":420},[220,28438,350],{"class":226},[220,28440,353],{"class":260},[220,28442,356],{"class":230},[220,28444,359],{"class":264},[220,28446,28447,28449,28451,28453,28455,28457,28459,28461,28463],{"class":222,"line":656},[220,28448,2813],{"class":264},[220,28450,367],{"class":420},[220,28452,370],{"class":226},[220,28454,353],{"class":260},[220,28456,375],{"class":230},[220,28458,378],{"class":226},[220,28460,353],{"class":260},[220,28462,383],{"class":230},[220,28464,386],{"class":264},[220,28466,28467,28469,28471],{"class":222,"line":673},[220,28468,2828],{"class":264},[220,28470,347],{"class":420},[220,28472,359],{"class":264},[220,28474,28475],{"class":222,"line":682},[220,28476,2837],{"class":264},[220,28478,28479],{"class":222,"line":691},[220,28480,749],{"class":264},[212,28482,28484],{"className":409,"code":28483,"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,28485,28486,28491,28503,28507,28531,28535,28547,28553,28561,28569,28581,28589,28593],{"__ignoreMap":178},[220,28487,28488],{"class":222,"line":223},[220,28489,28490],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,28492,28493,28495,28498,28500],{"class":222,"line":179},[220,28494,261],{"class":260},[220,28496,28497],{"class":264}," { clientOnly } ",[220,28499,268],{"class":260},[220,28501,28502],{"class":230}," '@solidjs\u002Fstart'\n",[220,28504,28505],{"class":222,"line":389},[220,28506,647],{"emptyLinePlaceholder":194},[220,28508,28509,28511,28513,28515,28518,28520,28522,28524,28526,28528],{"class":222,"line":399},[220,28510,1735],{"class":260},[220,28512,26611],{"class":420},[220,28514,1741],{"class":260},[220,28516,28517],{"class":226}," clientOnly",[220,28519,3600],{"class":264},[220,28521,2762],{"class":260},[220,28523,27145],{"class":260},[220,28525,2626],{"class":264},[220,28527,27282],{"class":230},[220,28529,28530],{"class":264},"))\n",[220,28532,28533],{"class":222,"line":644},[220,28534,647],{"emptyLinePlaceholder":194},[220,28536,28537,28539,28541,28543,28545],{"class":222,"line":650},[220,28538,26603],{"class":260},[220,28540,26606],{"class":260},[220,28542,11308],{"class":260},[220,28544,27021],{"class":226},[220,28546,2647],{"class":264},[220,28548,28549,28551],{"class":222,"line":656},[220,28550,2739],{"class":260},[220,28552,2742],{"class":264},[220,28554,28555,28557,28559],{"class":222,"line":673},[220,28556,2550],{"class":264},[220,28558,12005],{"class":346},[220,28560,359],{"class":264},[220,28562,28563,28565,28567],{"class":222,"line":682},[220,28564,2813],{"class":264},[220,28566,27044],{"class":420},[220,28568,386],{"class":264},[220,28570,28571,28573,28575,28577,28579],{"class":222,"line":691},[220,28572,2813],{"class":264},[220,28574,11],{"class":346},[220,28576,12293],{"class":264},[220,28578,11],{"class":346},[220,28580,359],{"class":264},[220,28582,28583,28585,28587],{"class":222,"line":696},[220,28584,2828],{"class":264},[220,28586,12005],{"class":346},[220,28588,359],{"class":264},[220,28590,28591],{"class":222,"line":702},[220,28592,2837],{"class":264},[220,28594,28595],{"class":222,"line":718},[220,28596,749],{"class":264},[15,28598,28599,28601,28602,28605,28606,28608],{},[99,28600,28382],{}," wraps the component in a ",[99,28603,28604],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,28607,16189],{}," during SSR.",[23,28610,28612,28615],{"id":28611},"isserver-guard",[99,28613,28614],{},"isServer"," guard",[15,28617,28618,28619,28621,28622,1554],{},"For finer control, check ",[99,28620,28614],{}," from ",[99,28623,28624],{},"solid-js\u002Fweb",[212,28626,28628],{"className":409,"code":28627,"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,28629,28630,28642,28652,28656,28668,28679,28683,28689,28703,28711,28719,28723],{"__ignoreMap":178},[220,28631,28632,28634,28637,28639],{"class":222,"line":223},[220,28633,261],{"class":260},[220,28635,28636],{"class":264}," { isServer } ",[220,28638,268],{"class":260},[220,28640,28641],{"class":230}," 'solid-js\u002Fweb'\n",[220,28643,28644,28646,28648,28650],{"class":222,"line":179},[220,28645,261],{"class":260},[220,28647,26590],{"class":264},[220,28649,268],{"class":260},[220,28651,319],{"class":230},[220,28653,28654],{"class":222,"line":389},[220,28655,647],{"emptyLinePlaceholder":194},[220,28657,28658,28660,28662,28664,28666],{"class":222,"line":399},[220,28659,26603],{"class":260},[220,28661,26606],{"class":260},[220,28663,11308],{"class":260},[220,28665,26611],{"class":226},[220,28667,2647],{"class":264},[220,28669,28670,28672,28675,28677],{"class":222,"line":644},[220,28671,27668],{"class":260},[220,28673,28674],{"class":264}," (isServer) ",[220,28676,27679],{"class":260},[220,28678,27682],{"class":420},[220,28680,28681],{"class":222,"line":650},[220,28682,647],{"emptyLinePlaceholder":194},[220,28684,28685,28687],{"class":222,"line":656},[220,28686,2739],{"class":260},[220,28688,2742],{"class":264},[220,28690,28691,28693,28695,28697,28699,28701],{"class":222,"line":673},[220,28692,2550],{"class":264},[220,28694,347],{"class":420},[220,28696,350],{"class":226},[220,28698,353],{"class":260},[220,28700,356],{"class":230},[220,28702,359],{"class":264},[220,28704,28705,28707,28709],{"class":222,"line":682},[220,28706,2813],{"class":264},[220,28708,367],{"class":420},[220,28710,386],{"class":264},[220,28712,28713,28715,28717],{"class":222,"line":691},[220,28714,2828],{"class":264},[220,28716,347],{"class":420},[220,28718,359],{"class":264},[220,28720,28721],{"class":222,"line":696},[220,28722,2837],{"class":264},[220,28724,28725],{"class":222,"line":702},[220,28726,749],{"class":264},[23,28728,28730,28615],{"id":28729},"onmount-guard",[99,28731,28732],{},"onMount",[15,28734,28735,28736,28738],{},"Alternatively, use ",[99,28737,28732],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,28740,28742],{"className":409,"code":28741,"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,28743,28744,28755,28765,28769,28781,28805,28809,28826,28830,28836,28850,28864,28878,28887,28896,28901,28909,28913],{"__ignoreMap":178},[220,28745,28746,28748,28751,28753],{"class":222,"line":223},[220,28747,261],{"class":260},[220,28749,28750],{"class":264}," { createSignal, onMount } ",[220,28752,268],{"class":260},[220,28754,2987],{"class":230},[220,28756,28757,28759,28761,28763],{"class":222,"line":179},[220,28758,261],{"class":260},[220,28760,26590],{"class":264},[220,28762,268],{"class":260},[220,28764,319],{"class":230},[220,28766,28767],{"class":222,"line":389},[220,28768,647],{"emptyLinePlaceholder":194},[220,28770,28771,28773,28775,28777,28779],{"class":222,"line":399},[220,28772,26603],{"class":260},[220,28774,26606],{"class":260},[220,28776,11308],{"class":260},[220,28778,26611],{"class":226},[220,28780,2647],{"class":264},[220,28782,28783,28785,28787,28789,28791,28793,28795,28797,28799,28801,28803],{"class":222,"line":644},[220,28784,2705],{"class":260},[220,28786,2708],{"class":264},[220,28788,27613],{"class":420},[220,28790,1895],{"class":264},[220,28792,27618],{"class":420},[220,28794,2719],{"class":264},[220,28796,353],{"class":260},[220,28798,3018],{"class":226},[220,28800,2626],{"class":264},[220,28802,2629],{"class":420},[220,28804,2632],{"class":264},[220,28806,28807],{"class":222,"line":650},[220,28808,647],{"emptyLinePlaceholder":194},[220,28810,28811,28813,28815,28817,28820,28822,28824],{"class":222,"line":656},[220,28812,3884],{"class":226},[220,28814,3600],{"class":264},[220,28816,2762],{"class":260},[220,28818,28819],{"class":226}," setMounted",[220,28821,2626],{"class":264},[220,28823,2332],{"class":420},[220,28825,28530],{"class":264},[220,28827,28828],{"class":222,"line":673},[220,28829,647],{"emptyLinePlaceholder":194},[220,28831,28832,28834],{"class":222,"line":682},[220,28833,2739],{"class":260},[220,28835,2742],{"class":264},[220,28837,28838,28840,28842,28844,28846,28848],{"class":222,"line":691},[220,28839,2550],{"class":264},[220,28841,3398],{"class":346},[220,28843,350],{"class":226},[220,28845,353],{"class":260},[220,28847,356],{"class":230},[220,28849,359],{"class":264},[220,28851,28852,28855,28857,28859,28862],{"class":222,"line":696},[220,28853,28854],{"class":264}," {",[220,28856,27613],{"class":226},[220,28858,3072],{"class":264},[220,28860,28861],{"class":260},"&&",[220,28863,2742],{"class":264},[220,28865,28866,28868,28870,28872,28874,28876],{"class":222,"line":702},[220,28867,10176],{"class":264},[220,28869,347],{"class":420},[220,28871,350],{"class":226},[220,28873,353],{"class":260},[220,28875,356],{"class":230},[220,28877,359],{"class":264},[220,28879,28880,28883,28885],{"class":222,"line":718},[220,28881,28882],{"class":264}," \u003C",[220,28884,367],{"class":420},[220,28886,386],{"class":264},[220,28888,28889,28892,28894],{"class":222,"line":727},[220,28890,28891],{"class":264}," \u003C\u002F",[220,28893,347],{"class":420},[220,28895,359],{"class":264},[220,28897,28898],{"class":222,"line":2664},[220,28899,28900],{"class":264}," )}\n",[220,28902,28903,28905,28907],{"class":222,"line":3522},[220,28904,2828],{"class":264},[220,28906,3398],{"class":346},[220,28908,359],{"class":264},[220,28910,28911],{"class":222,"line":9029},[220,28912,2837],{"class":264},[220,28914,28915],{"class":222,"line":9040},[220,28916,749],{"class":264},[23,28918,28920],{"id":28919},"solid-without-solidstart","Solid (without SolidStart)",[15,28922,28923,28924,28926],{},"In a Solid app without SolidStart, the ",[99,28925,28732],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,28928,28929],{},"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":28931},[28932,28934,28936,28938],{"id":28379,"depth":179,"text":28933},"clientOnly (SolidStart)",{"id":28611,"depth":179,"text":28935},"isServer guard",{"id":28729,"depth":179,"text":28937},"onMount guard",{"id":28919,"depth":179,"text":28920},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":28332,"description":28939},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":28945,"title":201,"body":28946,"category":188,"description":29480,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":29481,"navigation":194,"path":29482,"seo":29483,"stem":29484,"__hash__":29485},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":28947,"toc":29471},[28948,28952,28954,28966,28968,28982,28984,28986,29040,29042,29048,29050,29060,29176,29186,29188,29195,29266,29276,29434,29438,29442,29446,29452,29454,29468],[11,28949,28951],{"id":28950},"quickstart-svelte","Quickstart (Svelte)",[23,28953,25589],{"id":25588},[212,28955,28956],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28957,28958],{"__ignoreMap":178},[220,28959,28960,28962,28964],{"class":222,"line":223},[220,28961,227],{"class":226},[220,28963,231],{"class":230},[220,28965,234],{"class":230},[23,28967,26239],{"id":26238},[212,28969,28970],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,28971,28972],{"__ignoreMap":178},[220,28973,28974,28976,28978,28980],{"class":222,"line":223},[220,28975,261],{"class":260},[220,28977,265],{"class":264},[220,28979,268],{"class":260},[220,28981,303],{"class":230},[23,28983,323],{"id":322},[15,28985,26258],{},[212,28987,28988],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,28989,28990,29004,29024,29032],{"__ignoreMap":178},[220,28991,28992,28994,28996,28998,29000,29002],{"class":222,"line":223},[220,28993,343],{"class":264},[220,28995,347],{"class":420},[220,28997,350],{"class":226},[220,28999,353],{"class":264},[220,29001,356],{"class":230},[220,29003,359],{"class":264},[220,29005,29006,29008,29010,29012,29014,29016,29018,29020,29022],{"class":222,"line":179},[220,29007,364],{"class":264},[220,29009,367],{"class":420},[220,29011,370],{"class":226},[220,29013,353],{"class":264},[220,29015,375],{"class":230},[220,29017,378],{"class":226},[220,29019,353],{"class":264},[220,29021,383],{"class":230},[220,29023,386],{"class":264},[220,29025,29026,29028,29030],{"class":222,"line":389},[220,29027,364],{"class":264},[220,29029,394],{"class":420},[220,29031,386],{"class":264},[220,29033,29034,29036,29038],{"class":222,"line":399},[220,29035,402],{"class":264},[220,29037,347],{"class":420},[220,29039,359],{"class":264},[19,29041],{":preset":578},[15,29043,29044,583,29046,26321],{},[99,29045,101],{},[99,29047,586],{},[23,29049,594],{"id":593},[15,29051,1839,29052,26328,29054,18112,29056,26334,29058,590],{},[99,29053,586],{},[99,29055,27861],{},[99,29057,1504],{},[99,29059,101],{},[212,29061,29063],{"className":2844,"code":29062,"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,29064,29065,29069,29083,29091,29099,29103,29107,29121,29129,29137,29141,29146,29160,29168],{"__ignoreMap":178},[220,29066,29067],{"class":222,"line":223},[220,29068,610],{"class":609},[220,29070,29071,29073,29075,29077,29079,29081],{"class":222,"line":179},[220,29072,343],{"class":264},[220,29074,347],{"class":420},[220,29076,350],{"class":226},[220,29078,353],{"class":264},[220,29080,623],{"class":230},[220,29082,359],{"class":264},[220,29084,29085,29087,29089],{"class":222,"line":389},[220,29086,364],{"class":264},[220,29088,367],{"class":420},[220,29090,386],{"class":264},[220,29092,29093,29095,29097],{"class":222,"line":399},[220,29094,402],{"class":264},[220,29096,347],{"class":420},[220,29098,359],{"class":264},[220,29100,29101],{"class":222,"line":644},[220,29102,647],{"emptyLinePlaceholder":194},[220,29104,29105],{"class":222,"line":650},[220,29106,653],{"class":609},[220,29108,29109,29111,29113,29115,29117,29119],{"class":222,"line":656},[220,29110,343],{"class":264},[220,29112,347],{"class":420},[220,29114,663],{"class":226},[220,29116,353],{"class":264},[220,29118,668],{"class":230},[220,29120,359],{"class":264},[220,29122,29123,29125,29127],{"class":222,"line":673},[220,29124,364],{"class":264},[220,29126,367],{"class":420},[220,29128,386],{"class":264},[220,29130,29131,29133,29135],{"class":222,"line":682},[220,29132,402],{"class":264},[220,29134,347],{"class":420},[220,29136,359],{"class":264},[220,29138,29139],{"class":222,"line":691},[220,29140,647],{"emptyLinePlaceholder":194},[220,29142,29143],{"class":222,"line":696},[220,29144,29145],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,29147,29148,29150,29152,29154,29156,29158],{"class":222,"line":702},[220,29149,343],{"class":264},[220,29151,347],{"class":420},[220,29153,350],{"class":226},[220,29155,353],{"class":264},[220,29157,713],{"class":230},[220,29159,359],{"class":264},[220,29161,29162,29164,29166],{"class":222,"line":718},[220,29163,364],{"class":264},[220,29165,367],{"class":420},[220,29167,386],{"class":264},[220,29169,29170,29172,29174],{"class":222,"line":727},[220,29171,402],{"class":264},[220,29173,347],{"class":420},[220,29175,359],{"class":264},[15,29177,26473,29178,18112,29180,26478,29182,26481,29184,26484],{},[99,29179,27861],{},[99,29181,1504],{},[99,29183,101],{},[99,29185,586],{},[23,29187,1153],{"id":1152},[15,29189,29190,29191,29194],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,29192,29193],{},"{expression}"," syntax:",[212,29196,29197],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,29198,29199,29213,29219,29227,29235,29246,29254,29258],{"__ignoreMap":178},[220,29200,29201,29203,29205,29207,29209,29211],{"class":222,"line":223},[220,29202,343],{"class":264},[220,29204,347],{"class":420},[220,29206,350],{"class":226},[220,29208,353],{"class":264},[220,29210,356],{"class":230},[220,29212,359],{"class":264},[220,29214,29215,29217],{"class":222,"line":179},[220,29216,364],{"class":264},[220,29218,1189],{"class":420},[220,29220,29221,29223,29225],{"class":222,"line":389},[220,29222,1194],{"class":226},[220,29224,353],{"class":264},[220,29226,1199],{"class":230},[220,29228,29229,29231,29233],{"class":222,"line":399},[220,29230,1204],{"class":226},[220,29232,353],{"class":264},[220,29234,1209],{"class":230},[220,29236,29237,29239,29242,29244],{"class":222,"line":644},[220,29238,1288],{"class":226},[220,29240,29241],{"class":264},"={",[220,29243,1295],{"class":420},[220,29245,749],{"class":264},[220,29247,29248,29250,29252],{"class":222,"line":650},[220,29249,1302],{"class":226},[220,29251,353],{"class":264},[220,29253,1229],{"class":230},[220,29255,29256],{"class":222,"line":656},[220,29257,1234],{"class":264},[220,29259,29260,29262,29264],{"class":222,"line":673},[220,29261,402],{"class":264},[220,29263,347],{"class":420},[220,29265,359],{"class":264},[15,29267,29268,29269,29272,29273,29275],{},"Props also accept reactive state — Svelte's ",[99,29270,29271],{},"$state"," rune (or ",[99,29274,15918],{}," in Svelte 4) works exactly as you'd expect:",[212,29277,29279],{"className":2844,"code":29278,"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,29280,29281,29289,29299,29303,29321,29329,29333,29347,29375,29383,29387],{"__ignoreMap":178},[220,29282,29283,29285,29287],{"class":222,"line":223},[220,29284,343],{"class":264},[220,29286,2590],{"class":346},[220,29288,359],{"class":264},[220,29290,29291,29293,29295,29297],{"class":222,"line":179},[220,29292,12322],{"class":260},[220,29294,26590],{"class":264},[220,29296,268],{"class":260},[220,29298,303],{"class":230},[220,29300,29301],{"class":222,"line":389},[220,29302,647],{"emptyLinePlaceholder":194},[220,29304,29305,29307,29309,29311,29313,29315,29317,29319],{"class":222,"line":399},[220,29306,2861],{"class":260},[220,29308,10442],{"class":264},[220,29310,353],{"class":260},[220,29312,2869],{"class":264},[220,29314,2872],{"class":226},[220,29316,2626],{"class":264},[220,29318,8039],{"class":420},[220,29320,2632],{"class":264},[220,29322,29323,29325,29327],{"class":222,"line":644},[220,29324,402],{"class":264},[220,29326,2590],{"class":346},[220,29328,359],{"class":264},[220,29330,29331],{"class":222,"line":650},[220,29332,647],{"emptyLinePlaceholder":194},[220,29334,29335,29337,29339,29341,29343,29345],{"class":222,"line":656},[220,29336,343],{"class":264},[220,29338,347],{"class":420},[220,29340,350],{"class":226},[220,29342,353],{"class":264},[220,29344,356],{"class":230},[220,29346,359],{"class":264},[220,29348,29349,29351,29353,29355,29357,29359,29361,29363,29365,29368,29370,29373],{"class":222,"line":673},[220,29350,364],{"class":264},[220,29352,367],{"class":420},[220,29354,370],{"class":226},[220,29356,353],{"class":264},[220,29358,26678],{"class":230},[220,29360,378],{"class":226},[220,29362,353],{"class":264},[220,29364,26685],{"class":230},[220,29366,29367],{"class":226}," {",[220,29369,10131],{"class":264},[220,29371,29372],{"class":226},"}",[220,29374,386],{"class":264},[220,29376,29377,29379,29381],{"class":222,"line":682},[220,29378,402],{"class":264},[220,29380,347],{"class":420},[220,29382,359],{"class":264},[220,29384,29385],{"class":222,"line":691},[220,29386,647],{"emptyLinePlaceholder":194},[220,29388,29389,29391,29394,29396,29398,29401,29404,29406,29408,29410,29412,29415,29417,29419,29421,29423,29426,29428,29431],{"class":222,"line":696},[220,29390,343],{"class":264},[220,29392,29393],{"class":346},"input",[220,29395,12310],{"class":226},[220,29397,353],{"class":264},[220,29399,29400],{"class":230},"\"range\"",[220,29402,29403],{"class":226}," min",[220,29405,353],{"class":264},[220,29407,11055],{"class":230},[220,29409,8039],{"class":420},[220,29411,11055],{"class":230},[220,29413,29414],{"class":226}," max",[220,29416,353],{"class":264},[220,29418,11055],{"class":230},[220,29420,26746],{"class":420},[220,29422,11055],{"class":230},[220,29424,29425],{"class":260}," bind",[220,29427,1554],{"class":264},[220,29429,29430],{"class":226},"value",[220,29432,29433],{"class":264},"={angle} \u002F>\n",[15,29435,26131,29436,26801],{},[99,29437,10131],{},[15,29439,26138,29440,26141],{},[56,29441,1160],{"href":1159},[23,29443,29445],{"id":29444},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,29447,26812,29448,26817],{},[56,29449,29451],{"href":29450},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,29453,1474],{"id":1473},[34,29455,29456,29460,29464],{},[37,29457,29458,1483],{},[56,29459,1482],{"href":1481},[37,29461,29462,1490],{},[56,29463,1489],{"href":1488},[37,29465,29466,1502],{},[56,29467,1160],{"href":1159},[1504,29469,29470],{},"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":29472},[29473,29474,29475,29476,29477,29478,29479],{"id":25588,"depth":179,"text":25589},{"id":26238,"depth":179,"text":26239},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":29444,"depth":179,"text":29445},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":29480},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":29487,"title":29451,"body":29488,"category":2240,"description":30068,"exclude":190,"extension":191,"forceFramework":190,"icon":27744,"meta":30069,"navigation":194,"path":29450,"seo":30070,"stem":30071,"__hash__":30072},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":29489,"toc":30060},[29490,29494,29497,29501,29507,29510,29575,29578,29584,29589,29721,29728,29734,29857,29860,29864,29867,30057],[11,29491,29493],{"id":29492},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,29495,29496],{},"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,29498,29500],{"id":29499},"the-default-behavior","The default behavior",[15,29502,29503,29504,29506],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,29505,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,29508,29509],{},"In many cases, you don't need any special handling:",[212,29511,29513],{"className":2844,"code":29512,"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,29514,29515,29523,29533,29541,29545,29559,29567],{"__ignoreMap":178},[220,29516,29517,29519,29521],{"class":222,"line":223},[220,29518,343],{"class":264},[220,29520,2590],{"class":346},[220,29522,359],{"class":264},[220,29524,29525,29527,29529,29531],{"class":222,"line":179},[220,29526,12322],{"class":260},[220,29528,26590],{"class":264},[220,29530,268],{"class":260},[220,29532,303],{"class":230},[220,29534,29535,29537,29539],{"class":222,"line":389},[220,29536,402],{"class":264},[220,29538,2590],{"class":346},[220,29540,359],{"class":264},[220,29542,29543],{"class":222,"line":399},[220,29544,647],{"emptyLinePlaceholder":194},[220,29546,29547,29549,29551,29553,29555,29557],{"class":222,"line":644},[220,29548,343],{"class":264},[220,29550,347],{"class":420},[220,29552,350],{"class":226},[220,29554,353],{"class":264},[220,29556,356],{"class":230},[220,29558,359],{"class":264},[220,29560,29561,29563,29565],{"class":222,"line":650},[220,29562,364],{"class":264},[220,29564,367],{"class":420},[220,29566,386],{"class":264},[220,29568,29569,29571,29573],{"class":222,"line":656},[220,29570,402],{"class":264},[220,29572,347],{"class":420},[220,29574,359],{"class":264},[15,29576,29577],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,29579,29581,29583],{"id":29580},"onmount-for-browser-only-code",[99,29582,28732],{}," for browser-only code",[15,29585,29586,29587,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,29588,28732],{},[212,29590,29592],{"className":2844,"code":29591,"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,29593,29594,29602,29614,29624,29628,29635,29639,29649,29654,29665,29669,29677,29681,29705,29713],{"__ignoreMap":178},[220,29595,29596,29598,29600],{"class":222,"line":223},[220,29597,343],{"class":264},[220,29599,2590],{"class":346},[220,29601,359],{"class":264},[220,29603,29604,29606,29609,29611],{"class":222,"line":179},[220,29605,12322],{"class":260},[220,29607,29608],{"class":264}," { onMount } ",[220,29610,268],{"class":260},[220,29612,29613],{"class":230}," 'svelte'\n",[220,29615,29616,29618,29620,29622],{"class":222,"line":389},[220,29617,12322],{"class":260},[220,29619,26590],{"class":264},[220,29621,268],{"class":260},[220,29623,303],{"class":230},[220,29625,29626],{"class":222,"line":399},[220,29627,647],{"emptyLinePlaceholder":194},[220,29629,29630,29632],{"class":222,"line":644},[220,29631,2861],{"class":260},[220,29633,29634],{"class":264}," shaderEl\n",[220,29636,29637],{"class":222,"line":650},[220,29638,647],{"emptyLinePlaceholder":194},[220,29640,29641,29643,29645,29647],{"class":222,"line":656},[220,29642,3884],{"class":226},[220,29644,3600],{"class":264},[220,29646,2762],{"class":260},[220,29648,3241],{"class":264},[220,29650,29651],{"class":222,"line":673},[220,29652,29653],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,29655,29656,29659,29662],{"class":222,"line":682},[220,29657,29658],{"class":264}," console.",[220,29660,29661],{"class":226},"log",[220,29663,29664],{"class":264},"(shaderEl)\n",[220,29666,29667],{"class":222,"line":691},[220,29668,12369],{"class":264},[220,29670,29671,29673,29675],{"class":222,"line":696},[220,29672,402],{"class":264},[220,29674,2590],{"class":346},[220,29676,359],{"class":264},[220,29678,29679],{"class":222,"line":702},[220,29680,647],{"emptyLinePlaceholder":194},[220,29682,29683,29685,29687,29689,29691,29694,29697,29699,29701,29703],{"class":222,"line":718},[220,29684,343],{"class":264},[220,29686,347],{"class":420},[220,29688,29425],{"class":260},[220,29690,1554],{"class":264},[220,29692,29693],{"class":420},"this",[220,29695,29696],{"class":264},"={shaderEl} ",[220,29698,27861],{"class":226},[220,29700,353],{"class":264},[220,29702,356],{"class":230},[220,29704,359],{"class":264},[220,29706,29707,29709,29711],{"class":222,"line":727},[220,29708,364],{"class":264},[220,29710,367],{"class":420},[220,29712,386],{"class":264},[220,29714,29715,29717,29719],{"class":222,"line":2664},[220,29716,402],{"class":264},[220,29718,347],{"class":420},[220,29720,359],{"class":264},[23,29722,29724,29725],{"id":29723},"conditional-rendering-with-browser","Conditional rendering with ",[99,29726,29727],{},"browser",[15,29729,29730,29731,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,29732,29733],{},"$app\u002Fenvironment",[212,29735,29737],{"className":2844,"code":29736,"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,29738,29739,29747,29759,29769,29777,29781,29790,29804,29812,29820,29828,29833,29848],{"__ignoreMap":178},[220,29740,29741,29743,29745],{"class":222,"line":223},[220,29742,343],{"class":264},[220,29744,2590],{"class":346},[220,29746,359],{"class":264},[220,29748,29749,29751,29754,29756],{"class":222,"line":179},[220,29750,12322],{"class":260},[220,29752,29753],{"class":264}," { browser } ",[220,29755,268],{"class":260},[220,29757,29758],{"class":230}," '$app\u002Fenvironment'\n",[220,29760,29761,29763,29765,29767],{"class":222,"line":389},[220,29762,12322],{"class":260},[220,29764,26590],{"class":264},[220,29766,268],{"class":260},[220,29768,303],{"class":230},[220,29770,29771,29773,29775],{"class":222,"line":399},[220,29772,402],{"class":264},[220,29774,2590],{"class":346},[220,29776,359],{"class":264},[220,29778,29779],{"class":222,"line":644},[220,29780,647],{"emptyLinePlaceholder":194},[220,29782,29783,29785,29787],{"class":222,"line":650},[220,29784,3751],{"class":264},[220,29786,3754],{"class":260},[220,29788,29789],{"class":264}," browser}\n",[220,29791,29792,29794,29796,29798,29800,29802],{"class":222,"line":656},[220,29793,364],{"class":264},[220,29795,347],{"class":420},[220,29797,350],{"class":226},[220,29799,353],{"class":264},[220,29801,356],{"class":230},[220,29803,359],{"class":264},[220,29805,29806,29808,29810],{"class":222,"line":673},[220,29807,2550],{"class":264},[220,29809,367],{"class":420},[220,29811,386],{"class":264},[220,29813,29814,29816,29818],{"class":222,"line":682},[220,29815,2567],{"class":264},[220,29817,347],{"class":420},[220,29819,359],{"class":264},[220,29821,29822,29824,29826],{"class":222,"line":691},[220,29823,3784],{"class":264},[220,29825,3787],{"class":260},[220,29827,749],{"class":264},[220,29829,29830],{"class":222,"line":696},[220,29831,29832],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,29834,29835,29837,29839,29841,29843,29846],{"class":222,"line":702},[220,29836,364],{"class":264},[220,29838,3398],{"class":346},[220,29840,350],{"class":226},[220,29842,353],{"class":264},[220,29844,29845],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,29847,386],{"class":264},[220,29849,29850,29853,29855],{"class":222,"line":718},[220,29851,29852],{"class":264},"{\u002F",[220,29854,3754],{"class":260},[220,29856,749],{"class":264},[15,29858,29859],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,29861,29863],{"id":29862},"lazy-loading","Lazy loading",[15,29865,29866],{},"To defer loading the Shaders bundle entirely until client-side:",[212,29868,29870],{"className":2844,"code":29869,"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,29871,29872,29880,29890,29894,29901,29908,29912,29926,29953,29963,29973,29977,29985,29989,29998,30022,30037,30049],{"__ignoreMap":178},[220,29873,29874,29876,29878],{"class":222,"line":223},[220,29875,343],{"class":264},[220,29877,2590],{"class":346},[220,29879,359],{"class":264},[220,29881,29882,29884,29886,29888],{"class":222,"line":179},[220,29883,12322],{"class":260},[220,29885,29608],{"class":264},[220,29887,268],{"class":260},[220,29889,29613],{"class":230},[220,29891,29892],{"class":222,"line":389},[220,29893,647],{"emptyLinePlaceholder":194},[220,29895,29896,29898],{"class":222,"line":399},[220,29897,2861],{"class":260},[220,29899,29900],{"class":264}," ShaderComponent\n",[220,29902,29903,29905],{"class":222,"line":644},[220,29904,2861],{"class":260},[220,29906,29907],{"class":264}," LinearGradientComponent\n",[220,29909,29910],{"class":222,"line":650},[220,29911,647],{"emptyLinePlaceholder":194},[220,29913,29914,29916,29918,29920,29922,29924],{"class":222,"line":656},[220,29915,3884],{"class":226},[220,29917,2626],{"class":264},[220,29919,3489],{"class":260},[220,29921,3492],{"class":264},[220,29923,2762],{"class":260},[220,29925,3241],{"class":264},[220,29927,29928,29930,29932,29934,29936,29938,29940,29942,29944,29946,29948,29951],{"class":222,"line":673},[220,29929,16210],{"class":260},[220,29931,4018],{"class":264},[220,29933,347],{"class":420},[220,29935,1895],{"class":264},[220,29937,367],{"class":420},[220,29939,4023],{"class":264},[220,29941,353],{"class":260},[220,29943,1744],{"class":260},[220,29945,27145],{"class":260},[220,29947,2626],{"class":264},[220,29949,29950],{"class":230},"'shaders\u002Fsvelte'",[220,29952,2632],{"class":264},[220,29954,29955,29958,29960],{"class":222,"line":682},[220,29956,29957],{"class":264}," ShaderComponent ",[220,29959,353],{"class":260},[220,29961,29962],{"class":264}," Shader\n",[220,29964,29965,29968,29970],{"class":222,"line":691},[220,29966,29967],{"class":264}," LinearGradientComponent ",[220,29969,353],{"class":260},[220,29971,29972],{"class":264}," LinearGradient\n",[220,29974,29975],{"class":222,"line":696},[220,29976,12369],{"class":264},[220,29978,29979,29981,29983],{"class":222,"line":702},[220,29980,402],{"class":264},[220,29982,2590],{"class":346},[220,29984,359],{"class":264},[220,29986,29987],{"class":222,"line":718},[220,29988,647],{"emptyLinePlaceholder":194},[220,29990,29991,29993,29995],{"class":222,"line":727},[220,29992,3751],{"class":264},[220,29994,3754],{"class":260},[220,29996,29997],{"class":264}," ShaderComponent}\n",[220,29999,30000,30002,30004,30006,30009,30011,30014,30016,30018,30020],{"class":222,"line":2664},[220,30001,364],{"class":264},[220,30003,2846],{"class":260},[220,30005,1554],{"class":264},[220,30007,30008],{"class":346},"component",[220,30010,5328],{"class":226},[220,30012,30013],{"class":264},"={ShaderComponent} ",[220,30015,27861],{"class":226},[220,30017,353],{"class":264},[220,30019,356],{"class":230},[220,30021,359],{"class":264},[220,30023,30024,30026,30028,30030,30032,30034],{"class":222,"line":3522},[220,30025,2550],{"class":264},[220,30027,2846],{"class":260},[220,30029,1554],{"class":264},[220,30031,30008],{"class":346},[220,30033,5328],{"class":226},[220,30035,30036],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,30038,30039,30041,30043,30045,30047],{"class":222,"line":9029},[220,30040,2567],{"class":264},[220,30042,2846],{"class":260},[220,30044,1554],{"class":264},[220,30046,30008],{"class":346},[220,30048,359],{"class":264},[220,30050,30051,30053,30055],{"class":222,"line":9040},[220,30052,29852],{"class":264},[220,30054,3754],{"class":260},[220,30056,749],{"class":264},[1504,30058,30059],{},"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":30061},[30062,30063,30065,30067],{"id":29499,"depth":179,"text":29500},{"id":29580,"depth":179,"text":30064},"onMount for browser-only code",{"id":29723,"depth":179,"text":30066},"Conditional rendering with browser",{"id":29862,"depth":179,"text":29863},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":29451,"description":30068},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":30074,"title":201,"body":30075,"category":188,"description":30589,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":30590,"navigation":194,"path":30591,"seo":30592,"stem":30593,"__hash__":30594},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":30076,"toc":30580},[30077,30081,30083,30095,30097,30111,30113,30115,30169,30171,30177,30179,30186,30300,30307,30309,30315,30384,30387,30557,30561,30565,30569,30575,30577],[11,30078,30080],{"id":30079},"quickstart-vue","Quickstart (Vue)",[23,30082,25589],{"id":25588},[212,30084,30085],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,30086,30087],{"__ignoreMap":178},[220,30088,30089,30091,30093],{"class":222,"line":223},[220,30090,227],{"class":226},[220,30092,231],{"class":230},[220,30094,234],{"class":230},[23,30096,26239],{"id":26238},[212,30098,30099],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,30100,30101],{"__ignoreMap":178},[220,30102,30103,30105,30107,30109],{"class":222,"line":223},[220,30104,261],{"class":260},[220,30106,265],{"class":264},[220,30108,268],{"class":260},[220,30110,271],{"class":230},[23,30112,323],{"id":322},[15,30114,26258],{},[212,30116,30117],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,30118,30119,30133,30153,30161],{"__ignoreMap":178},[220,30120,30121,30123,30125,30127,30129,30131],{"class":222,"line":223},[220,30122,343],{"class":264},[220,30124,347],{"class":346},[220,30126,350],{"class":226},[220,30128,353],{"class":264},[220,30130,356],{"class":230},[220,30132,359],{"class":264},[220,30134,30135,30137,30139,30141,30143,30145,30147,30149,30151],{"class":222,"line":179},[220,30136,364],{"class":264},[220,30138,367],{"class":346},[220,30140,370],{"class":226},[220,30142,353],{"class":264},[220,30144,375],{"class":230},[220,30146,378],{"class":226},[220,30148,353],{"class":264},[220,30150,383],{"class":230},[220,30152,386],{"class":264},[220,30154,30155,30157,30159],{"class":222,"line":389},[220,30156,364],{"class":264},[220,30158,394],{"class":346},[220,30160,386],{"class":264},[220,30162,30163,30165,30167],{"class":222,"line":399},[220,30164,402],{"class":264},[220,30166,347],{"class":346},[220,30168,359],{"class":264},[19,30170],{":preset":578},[15,30172,30173,583,30175,26321],{},[99,30174,101],{},[99,30176,586],{},[23,30178,594],{"id":593},[15,30180,1839,30181,30183,30184,590],{},[99,30182,586],{}," has no intrinsic size. The class or style you apply to ",[99,30185,101],{},[212,30187,30188],{"className":334,"code":29062,"language":336,"meta":178,"style":178},[99,30189,30190,30194,30208,30216,30224,30228,30232,30246,30254,30262,30266,30270,30284,30292],{"__ignoreMap":178},[220,30191,30192],{"class":222,"line":223},[220,30193,610],{"class":609},[220,30195,30196,30198,30200,30202,30204,30206],{"class":222,"line":179},[220,30197,343],{"class":264},[220,30199,347],{"class":346},[220,30201,350],{"class":226},[220,30203,353],{"class":264},[220,30205,623],{"class":230},[220,30207,359],{"class":264},[220,30209,30210,30212,30214],{"class":222,"line":389},[220,30211,364],{"class":264},[220,30213,367],{"class":346},[220,30215,386],{"class":264},[220,30217,30218,30220,30222],{"class":222,"line":399},[220,30219,402],{"class":264},[220,30221,347],{"class":346},[220,30223,359],{"class":264},[220,30225,30226],{"class":222,"line":644},[220,30227,647],{"emptyLinePlaceholder":194},[220,30229,30230],{"class":222,"line":650},[220,30231,653],{"class":609},[220,30233,30234,30236,30238,30240,30242,30244],{"class":222,"line":656},[220,30235,343],{"class":264},[220,30237,347],{"class":346},[220,30239,663],{"class":226},[220,30241,353],{"class":264},[220,30243,668],{"class":230},[220,30245,359],{"class":264},[220,30247,30248,30250,30252],{"class":222,"line":673},[220,30249,364],{"class":264},[220,30251,367],{"class":346},[220,30253,386],{"class":264},[220,30255,30256,30258,30260],{"class":222,"line":682},[220,30257,402],{"class":264},[220,30259,347],{"class":346},[220,30261,359],{"class":264},[220,30263,30264],{"class":222,"line":691},[220,30265,647],{"emptyLinePlaceholder":194},[220,30267,30268],{"class":222,"line":696},[220,30269,29145],{"class":609},[220,30271,30272,30274,30276,30278,30280,30282],{"class":222,"line":702},[220,30273,343],{"class":264},[220,30275,347],{"class":346},[220,30277,350],{"class":226},[220,30279,353],{"class":264},[220,30281,713],{"class":230},[220,30283,359],{"class":264},[220,30285,30286,30288,30290],{"class":222,"line":718},[220,30287,364],{"class":264},[220,30289,367],{"class":346},[220,30291,386],{"class":264},[220,30293,30294,30296,30298],{"class":222,"line":727},[220,30295,402],{"class":264},[220,30297,347],{"class":346},[220,30299,359],{"class":264},[15,30301,30302,30303,26481,30305,26484],{},"Applying a class or style to the ",[99,30304,101],{},[99,30306,586],{},[23,30308,1153],{"id":1152},[15,30310,30311,30312,30314],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,30313,1554],{}," binding syntax, strings can be passed plain:",[212,30316,30318],{"className":334,"code":30317,"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,30319,30320,30334,30340,30348,30356,30364,30372,30376],{"__ignoreMap":178},[220,30321,30322,30324,30326,30328,30330,30332],{"class":222,"line":223},[220,30323,343],{"class":264},[220,30325,347],{"class":346},[220,30327,350],{"class":226},[220,30329,353],{"class":264},[220,30331,356],{"class":230},[220,30333,359],{"class":264},[220,30335,30336,30338],{"class":222,"line":179},[220,30337,364],{"class":264},[220,30339,1189],{"class":346},[220,30341,30342,30344,30346],{"class":222,"line":389},[220,30343,18836],{"class":226},[220,30345,353],{"class":264},[220,30347,1199],{"class":230},[220,30349,30350,30352,30354],{"class":222,"line":399},[220,30351,18846],{"class":226},[220,30353,353],{"class":264},[220,30355,1209],{"class":230},[220,30357,30358,30360,30362],{"class":222,"line":644},[220,30359,1214],{"class":226},[220,30361,353],{"class":264},[220,30363,1219],{"class":230},[220,30365,30366,30368,30370],{"class":222,"line":650},[220,30367,1224],{"class":226},[220,30369,353],{"class":264},[220,30371,1229],{"class":230},[220,30373,30374],{"class":222,"line":656},[220,30375,1234],{"class":264},[220,30377,30378,30380,30382],{"class":222,"line":673},[220,30379,402],{"class":264},[220,30381,347],{"class":346},[220,30383,359],{"class":264},[15,30385,30386],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,30388,30390],{"className":11035,"code":30389,"language":11037,"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,30391,30392,30402,30412,30422,30426,30442,30450,30454,30462,30476,30502,30510,30514,30549],{"__ignoreMap":178},[220,30393,30394,30396,30398,30400],{"class":222,"line":223},[220,30395,343],{"class":264},[220,30397,2590],{"class":346},[220,30399,2593],{"class":226},[220,30401,359],{"class":264},[220,30403,30404,30406,30408,30410],{"class":222,"line":179},[220,30405,261],{"class":260},[220,30407,2602],{"class":264},[220,30409,268],{"class":260},[220,30411,2607],{"class":230},[220,30413,30414,30416,30418,30420],{"class":222,"line":389},[220,30415,261],{"class":260},[220,30417,26590],{"class":264},[220,30419,268],{"class":260},[220,30421,271],{"class":230},[220,30423,30424],{"class":222,"line":399},[220,30425,647],{"emptyLinePlaceholder":194},[220,30427,30428,30430,30432,30434,30436,30438,30440],{"class":222,"line":644},[220,30429,1735],{"class":260},[220,30431,9899],{"class":420},[220,30433,1741],{"class":260},[220,30435,2623],{"class":226},[220,30437,2626],{"class":264},[220,30439,8039],{"class":420},[220,30441,2632],{"class":264},[220,30443,30444,30446,30448],{"class":222,"line":650},[220,30445,402],{"class":264},[220,30447,2590],{"class":346},[220,30449,359],{"class":264},[220,30451,30452],{"class":222,"line":656},[220,30453,647],{"emptyLinePlaceholder":194},[220,30455,30456,30458,30460],{"class":222,"line":673},[220,30457,343],{"class":264},[220,30459,2519],{"class":346},[220,30461,359],{"class":264},[220,30463,30464,30466,30468,30470,30472,30474],{"class":222,"line":682},[220,30465,364],{"class":264},[220,30467,347],{"class":346},[220,30469,350],{"class":226},[220,30471,353],{"class":264},[220,30473,356],{"class":230},[220,30475,359],{"class":264},[220,30477,30478,30480,30482,30484,30486,30488,30490,30492,30494,30496,30498,30500],{"class":222,"line":691},[220,30479,2550],{"class":264},[220,30481,367],{"class":346},[220,30483,19704],{"class":226},[220,30485,353],{"class":264},[220,30487,26678],{"class":230},[220,30489,19711],{"class":226},[220,30491,353],{"class":264},[220,30493,26685],{"class":230},[220,30495,10055],{"class":226},[220,30497,353],{"class":264},[220,30499,10060],{"class":230},[220,30501,386],{"class":264},[220,30503,30504,30506,30508],{"class":222,"line":696},[220,30505,2567],{"class":264},[220,30507,347],{"class":346},[220,30509,359],{"class":264},[220,30511,30512],{"class":222,"line":702},[220,30513,647],{"emptyLinePlaceholder":194},[220,30515,30516,30518,30520,30522,30524,30526,30528,30530,30533,30535,30537,30540,30543,30545,30547],{"class":222,"line":718},[220,30517,364],{"class":264},[220,30519,29393],{"class":346},[220,30521,12310],{"class":226},[220,30523,353],{"class":264},[220,30525,29400],{"class":230},[220,30527,29403],{"class":226},[220,30529,353],{"class":264},[220,30531,30532],{"class":230},"\"0\"",[220,30534,29414],{"class":226},[220,30536,353],{"class":264},[220,30538,30539],{"class":230},"\"360\"",[220,30541,30542],{"class":226}," v-model.number",[220,30544,353],{"class":264},[220,30546,10060],{"class":230},[220,30548,386],{"class":264},[220,30550,30551,30553,30555],{"class":222,"line":727},[220,30552,402],{"class":264},[220,30554,2519],{"class":346},[220,30556,359],{"class":264},[15,30558,26131,30559,26801],{},[99,30560,10131],{},[15,30562,26138,30563,26141],{},[56,30564,1160],{"href":1159},[23,30566,30568],{"id":30567},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,30570,26812,30571,26817],{},[56,30572,30574],{"href":30573},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,30576,1474],{"id":1473},[1504,30578,30579],{},"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":30581},[30582,30583,30584,30585,30586,30587,30588],{"id":25588,"depth":179,"text":25589},{"id":26238,"depth":179,"text":26239},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":30567,"depth":179,"text":30568},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":30589},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":30596,"title":30574,"body":30597,"category":2240,"description":31263,"exclude":190,"extension":191,"forceFramework":190,"icon":27744,"meta":31264,"navigation":194,"path":30573,"seo":31265,"stem":31266,"__hash__":31267},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":30598,"toc":31256},[30599,30603,30606,30613,30619,30671,30674,30677,30770,30774,30781,30931,30935,30938,31138,31145,31233,31239,31243,31253],[11,30600,30602],{"id":30601},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,30604,30605],{},"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,30607,30609,30610],{"id":30608},"nuxt-clientonly","Nuxt: ",[99,30611,30612],{},"\u003CClientOnly>",[15,30614,30615,30616,30618],{},"Nuxt provides a built-in ",[99,30617,30612],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,30620,30622],{"className":334,"code":30621,"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,30623,30624,30633,30647,30655,30663],{"__ignoreMap":178},[220,30625,30626,30628,30631],{"class":222,"line":223},[220,30627,343],{"class":264},[220,30629,30630],{"class":346},"ClientOnly",[220,30632,359],{"class":264},[220,30634,30635,30637,30639,30641,30643,30645],{"class":222,"line":179},[220,30636,364],{"class":264},[220,30638,347],{"class":346},[220,30640,350],{"class":226},[220,30642,353],{"class":264},[220,30644,356],{"class":230},[220,30646,359],{"class":264},[220,30648,30649,30651,30653],{"class":222,"line":389},[220,30650,2550],{"class":264},[220,30652,367],{"class":346},[220,30654,386],{"class":264},[220,30656,30657,30659,30661],{"class":222,"line":399},[220,30658,2567],{"class":264},[220,30660,347],{"class":346},[220,30662,359],{"class":264},[220,30664,30665,30667,30669],{"class":222,"line":644},[220,30666,402],{"class":264},[220,30668,30630],{"class":346},[220,30670,359],{"class":264},[15,30672,30673],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,30675,30676],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,30678,30680],{"className":334,"code":30679,"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,30681,30682,30690,30704,30712,30720,30724,30737,30754,30762],{"__ignoreMap":178},[220,30683,30684,30686,30688],{"class":222,"line":223},[220,30685,343],{"class":264},[220,30687,30630],{"class":346},[220,30689,359],{"class":264},[220,30691,30692,30694,30696,30698,30700,30702],{"class":222,"line":179},[220,30693,364],{"class":264},[220,30695,347],{"class":346},[220,30697,350],{"class":226},[220,30699,353],{"class":264},[220,30701,356],{"class":230},[220,30703,359],{"class":264},[220,30705,30706,30708,30710],{"class":222,"line":389},[220,30707,2550],{"class":264},[220,30709,367],{"class":346},[220,30711,386],{"class":264},[220,30713,30714,30716,30718],{"class":222,"line":399},[220,30715,2567],{"class":264},[220,30717,347],{"class":346},[220,30719,359],{"class":264},[220,30721,30722],{"class":222,"line":644},[220,30723,647],{"emptyLinePlaceholder":194},[220,30725,30726,30728,30730,30733,30735],{"class":222,"line":650},[220,30727,364],{"class":264},[220,30729,2519],{"class":346},[220,30731,30732],{"class":264}," #",[220,30734,3936],{"class":226},[220,30736,359],{"class":264},[220,30738,30739,30741,30743,30745,30747,30750,30752],{"class":222,"line":656},[220,30740,2550],{"class":264},[220,30742,3398],{"class":346},[220,30744,350],{"class":226},[220,30746,353],{"class":264},[220,30748,30749],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,30751,3412],{"class":3411},[220,30753,359],{"class":264},[220,30755,30756,30758,30760],{"class":222,"line":673},[220,30757,2567],{"class":264},[220,30759,2519],{"class":346},[220,30761,359],{"class":264},[220,30763,30764,30766,30768],{"class":222,"line":682},[220,30765,402],{"class":264},[220,30767,30630],{"class":346},[220,30769,359],{"class":264},[23,30771,30773],{"id":30772},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,30775,30776,30777,30780],{},"If you're using Vue SSR without Nuxt, use ",[99,30778,30779],{},"v-if"," with a mounted flag:",[212,30782,30784],{"className":11035,"code":30783,"language":11037,"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,30785,30786,30796,30806,30810,30827,30844,30852,30856,30864,30878,30899,30907,30915,30923],{"__ignoreMap":178},[220,30787,30788,30790,30792,30794],{"class":222,"line":223},[220,30789,343],{"class":264},[220,30791,2590],{"class":346},[220,30793,2593],{"class":226},[220,30795,359],{"class":264},[220,30797,30798,30800,30802,30804],{"class":222,"line":179},[220,30799,261],{"class":260},[220,30801,3443],{"class":264},[220,30803,268],{"class":260},[220,30805,2607],{"class":230},[220,30807,30808],{"class":222,"line":389},[220,30809,647],{"emptyLinePlaceholder":194},[220,30811,30812,30814,30817,30819,30821,30823,30825],{"class":222,"line":399},[220,30813,1735],{"class":260},[220,30815,30816],{"class":420}," isMounted",[220,30818,1741],{"class":260},[220,30820,2623],{"class":226},[220,30822,2626],{"class":264},[220,30824,2629],{"class":420},[220,30826,2632],{"class":264},[220,30828,30829,30831,30833,30835,30838,30840,30842],{"class":222,"line":644},[220,30830,3484],{"class":226},[220,30832,3600],{"class":264},[220,30834,2762],{"class":260},[220,30836,30837],{"class":264}," { isMounted.value ",[220,30839,353],{"class":260},[220,30841,2911],{"class":420},[220,30843,10984],{"class":264},[220,30845,30846,30848,30850],{"class":222,"line":650},[220,30847,402],{"class":264},[220,30849,2590],{"class":346},[220,30851,359],{"class":264},[220,30853,30854],{"class":222,"line":656},[220,30855,647],{"emptyLinePlaceholder":194},[220,30857,30858,30860,30862],{"class":222,"line":673},[220,30859,343],{"class":264},[220,30861,2519],{"class":346},[220,30863,359],{"class":264},[220,30865,30866,30868,30870,30872,30874,30876],{"class":222,"line":682},[220,30867,364],{"class":264},[220,30869,3398],{"class":346},[220,30871,350],{"class":226},[220,30873,353],{"class":264},[220,30875,356],{"class":230},[220,30877,359],{"class":264},[220,30879,30880,30882,30884,30886,30888,30891,30893,30895,30897],{"class":222,"line":691},[220,30881,2550],{"class":264},[220,30883,347],{"class":346},[220,30885,3362],{"class":226},[220,30887,353],{"class":264},[220,30889,30890],{"class":230},"\"isMounted\"",[220,30892,350],{"class":226},[220,30894,353],{"class":264},[220,30896,356],{"class":230},[220,30898,359],{"class":264},[220,30900,30901,30903,30905],{"class":222,"line":696},[220,30902,2813],{"class":264},[220,30904,367],{"class":346},[220,30906,386],{"class":264},[220,30908,30909,30911,30913],{"class":222,"line":702},[220,30910,2828],{"class":264},[220,30912,347],{"class":346},[220,30914,359],{"class":264},[220,30916,30917,30919,30921],{"class":222,"line":718},[220,30918,2567],{"class":264},[220,30920,3398],{"class":346},[220,30922,359],{"class":264},[220,30924,30925,30927,30929],{"class":222,"line":727},[220,30926,402],{"class":264},[220,30928,2519],{"class":346},[220,30930,359],{"class":264},[23,30932,30934],{"id":30933},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,30936,30937],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,30939,30941],{"className":11035,"code":30940,"language":11037,"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,30942,30943,30953,30964,30968,30984,31000,31004,31009,31046,31080,31088,31092,31100,31114,31122,31130],{"__ignoreMap":178},[220,30944,30945,30947,30949,30951],{"class":222,"line":223},[220,30946,343],{"class":264},[220,30948,2590],{"class":346},[220,30950,2593],{"class":226},[220,30952,359],{"class":264},[220,30954,30955,30957,30960,30962],{"class":222,"line":179},[220,30956,261],{"class":260},[220,30958,30959],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,30961,268],{"class":260},[220,30963,2607],{"class":230},[220,30965,30966],{"class":222,"line":389},[220,30967,647],{"emptyLinePlaceholder":194},[220,30969,30970,30972,30974,30976,30978,30980,30982],{"class":222,"line":399},[220,30971,1735],{"class":260},[220,30973,30816],{"class":420},[220,30975,1741],{"class":260},[220,30977,2623],{"class":226},[220,30979,2626],{"class":264},[220,30981,2629],{"class":420},[220,30983,2632],{"class":264},[220,30985,30986,30988,30990,30992,30994,30996,30998],{"class":222,"line":644},[220,30987,3484],{"class":226},[220,30989,3600],{"class":264},[220,30991,2762],{"class":260},[220,30993,30837],{"class":264},[220,30995,353],{"class":260},[220,30997,2911],{"class":420},[220,30999,10984],{"class":264},[220,31001,31002],{"class":222,"line":650},[220,31003,647],{"emptyLinePlaceholder":194},[220,31005,31006],{"class":222,"line":656},[220,31007,31008],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,31010,31011,31013,31016,31018,31021,31023,31025,31027,31029,31032,31034,31036,31038,31041,31043],{"class":222,"line":673},[220,31012,1735],{"class":260},[220,31014,31015],{"class":420}," Shader",[220,31017,1741],{"class":260},[220,31019,31020],{"class":226}," defineAsyncComponent",[220,31022,3600],{"class":264},[220,31024,2762],{"class":260},[220,31026,27145],{"class":260},[220,31028,2626],{"class":264},[220,31030,31031],{"class":230},"'shaders\u002Fvue'",[220,31033,14804],{"class":264},[220,31035,3615],{"class":226},[220,31037,2626],{"class":264},[220,31039,31040],{"class":3621},"m",[220,31042,10197],{"class":260},[220,31044,31045],{"class":264}," m.Shader))\n",[220,31047,31048,31050,31053,31055,31057,31059,31061,31063,31065,31067,31069,31071,31073,31075,31077],{"class":222,"line":682},[220,31049,1735],{"class":260},[220,31051,31052],{"class":420}," LinearGradient",[220,31054,1741],{"class":260},[220,31056,31020],{"class":226},[220,31058,3600],{"class":264},[220,31060,2762],{"class":260},[220,31062,27145],{"class":260},[220,31064,2626],{"class":264},[220,31066,31031],{"class":230},[220,31068,14804],{"class":264},[220,31070,3615],{"class":226},[220,31072,2626],{"class":264},[220,31074,31040],{"class":3621},[220,31076,10197],{"class":260},[220,31078,31079],{"class":264}," m.LinearGradient))\n",[220,31081,31082,31084,31086],{"class":222,"line":691},[220,31083,402],{"class":264},[220,31085,2590],{"class":346},[220,31087,359],{"class":264},[220,31089,31090],{"class":222,"line":696},[220,31091,647],{"emptyLinePlaceholder":194},[220,31093,31094,31096,31098],{"class":222,"line":702},[220,31095,343],{"class":264},[220,31097,2519],{"class":346},[220,31099,359],{"class":264},[220,31101,31102,31104,31106,31108,31110,31112],{"class":222,"line":718},[220,31103,364],{"class":264},[220,31105,347],{"class":346},[220,31107,3362],{"class":226},[220,31109,353],{"class":264},[220,31111,30890],{"class":230},[220,31113,359],{"class":264},[220,31115,31116,31118,31120],{"class":222,"line":727},[220,31117,2550],{"class":264},[220,31119,367],{"class":346},[220,31121,386],{"class":264},[220,31123,31124,31126,31128],{"class":222,"line":2664},[220,31125,2567],{"class":264},[220,31127,347],{"class":346},[220,31129,359],{"class":264},[220,31131,31132,31134,31136],{"class":222,"line":3522},[220,31133,402],{"class":264},[220,31135,2519],{"class":346},[220,31137,359],{"class":264},[15,31139,31140,31141,31144],{},"Or in Nuxt, use ",[99,31142,31143],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,31146,31148],{"className":251,"code":31147,"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,31149,31150,31155,31167,31177,31181,31201,31216,31229],{"__ignoreMap":178},[220,31151,31152],{"class":222,"line":223},[220,31153,31154],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,31156,31157,31159,31162,31164],{"class":222,"line":179},[220,31158,261],{"class":260},[220,31160,31161],{"class":264}," { defineNuxtPlugin } ",[220,31163,268],{"class":260},[220,31165,31166],{"class":230}," '#app'\n",[220,31168,31169,31171,31173,31175],{"class":222,"line":389},[220,31170,261],{"class":260},[220,31172,26590],{"class":264},[220,31174,268],{"class":260},[220,31176,271],{"class":230},[220,31178,31179],{"class":222,"line":399},[220,31180,647],{"emptyLinePlaceholder":194},[220,31182,31183,31185,31187,31190,31192,31195,31197,31199],{"class":222,"line":644},[220,31184,26603],{"class":260},[220,31186,26606],{"class":260},[220,31188,31189],{"class":226}," defineNuxtPlugin",[220,31191,3897],{"class":264},[220,31193,31194],{"class":3621},"nuxtApp",[220,31196,4168],{"class":264},[220,31198,2762],{"class":260},[220,31200,3241],{"class":264},[220,31202,31203,31206,31208,31210,31213],{"class":222,"line":650},[220,31204,31205],{"class":264}," nuxtApp.vueApp.",[220,31207,30008],{"class":226},[220,31209,2626],{"class":264},[220,31211,31212],{"class":230},"'Shader'",[220,31214,31215],{"class":264},", Shader)\n",[220,31217,31218,31220,31222,31224,31226],{"class":222,"line":656},[220,31219,31205],{"class":264},[220,31221,30008],{"class":226},[220,31223,2626],{"class":264},[220,31225,2462],{"class":230},[220,31227,31228],{"class":264},", LinearGradient)\n",[220,31230,31231],{"class":222,"line":673},[220,31232,1792],{"class":264},[15,31234,1839,31235,31238],{},[99,31236,31237],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,31240,31242],{"id":31241},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,31244,1839,31245,11617,31247,31249,31250,31252],{},[99,31246,101],{},[99,31248,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,31251,30612],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,31254,31255],{},"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":31257},[31258,31260,31261,31262],{"id":30608,"depth":179,"text":31259},"Nuxt: \u003CClientOnly>",{"id":30772,"depth":179,"text":30773},{"id":30933,"depth":179,"text":30934},{"id":31241,"depth":179,"text":31242},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":30574,"description":31263},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[31269,31610,31904,32182,32439,32772,33049,33249,33525,33725,34001,34201,34401,34734,34935,35267,35467,35744,35945,36278,36554,36754,37030,37306,37582,37781,37981,38285,38561,38850,39050,39326,39658,39858,40134,40410,40703,40996,41271,41470,41849,42103,42436,42636,42912,43245,43521,43797,44040,44409,44685,44930,45204,45480,45680,45956,46156,46432,46708,46984,47184,47460,47753,47953,48229,48429,48705,48905,49105,49305,49579,49910,50242,50573,50829,51029,51305,51575,51820,52196,52467,52667,52943,53237,53443,53643,53890,54090,54366,54566,54860,55130,55406,55606,55882,56158,56413,56674,57006,57338,57536,57812,58012,58390,58590,58790,59066,59266,59560,59836,60112,60445,60721,60966,61242,61442,61642,61841,62117,62449,62781,63057,63312,63512,63890,64182,64515,64773,65105,65361,65637,65913,66113,66445,66721,67053,67345,67621,67821,68066,68397,68597,68873,69253,69453,69698,69974,70230,70485,70741,71017,71261,71593,71793,72085,72417,72617,72893,73091,73338,73632,73908,74107,74400,74644,74899,75231,75507,75830,76075,76275,76551,76751,77083,77359,77635,77927,78260,78460,78874,79074,79274,79606,79882,80082,80282,80482,80814,81014],{"id":31270,"title":31271,"body":31272,"category":31604,"componentType":25253,"description":31279,"extension":191,"meta":31605,"navigation":194,"path":31606,"requiresChild":194,"seo":31607,"stem":31608,"__hash__":31609},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":31273,"toc":31600},[31274,31277,31280,31283,31286,31290,31294,31598],[11,31275,31271],{"id":31276},"angularblur",[15,31278,31279],{},"Radial motion blur rotating around a center point",[31281,31282],"shader-preview",{"component":31271},[23,31284,31285],{"id":25903},"Props",[31287,31288],"props-table",{":props":31289},"[{\"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,31291,31293],{"id":31292},"usage","Usage",[246,31295,31296,31354,31413,31469,31527],{":tabs":1557},[212,31297,31299],{"className":334,"code":31298,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31300,31301,31309,31316,31325,31330,31338,31346],{"__ignoreMap":178},[220,31302,31303,31305,31307],{"class":222,"line":223},[220,31304,343],{"class":264},[220,31306,347],{"class":346},[220,31308,359],{"class":264},[220,31310,31311,31313],{"class":222,"line":179},[220,31312,364],{"class":264},[220,31314,31315],{"class":346},"AngularBlur\n",[220,31317,31318,31320,31322],{"class":222,"line":389},[220,31319,19739],{"class":226},[220,31321,353],{"class":264},[220,31323,31324],{"class":230},"\"20\"\n",[220,31326,31327],{"class":222,"line":399},[220,31328,31329],{"class":264}," >\n",[220,31331,31332,31334,31336],{"class":222,"line":644},[220,31333,2550],{"class":264},[220,31335,2553],{"class":346},[220,31337,386],{"class":264},[220,31339,31340,31342,31344],{"class":222,"line":650},[220,31341,2567],{"class":264},[220,31343,31271],{"class":346},[220,31345,359],{"class":264},[220,31347,31348,31350,31352],{"class":222,"line":656},[220,31349,402],{"class":264},[220,31351,347],{"class":346},[220,31353,359],{"class":264},[212,31355,31357],{"className":409,"code":31356,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31358,31359,31367,31373,31385,31389,31397,31405],{"__ignoreMap":178},[220,31360,31361,31363,31365],{"class":222,"line":223},[220,31362,343],{"class":264},[220,31364,347],{"class":420},[220,31366,359],{"class":264},[220,31368,31369,31371],{"class":222,"line":179},[220,31370,364],{"class":264},[220,31372,31315],{"class":420},[220,31374,31375,31377,31379,31381,31383],{"class":222,"line":389},[220,31376,19850],{"class":226},[220,31378,353],{"class":260},[220,31380,743],{"class":264},[220,31382,24169],{"class":420},[220,31384,749],{"class":264},[220,31386,31387],{"class":222,"line":399},[220,31388,31329],{"class":264},[220,31390,31391,31393,31395],{"class":222,"line":644},[220,31392,2550],{"class":264},[220,31394,2553],{"class":420},[220,31396,386],{"class":264},[220,31398,31399,31401,31403],{"class":222,"line":650},[220,31400,2567],{"class":264},[220,31402,31271],{"class":420},[220,31404,359],{"class":264},[220,31406,31407,31409,31411],{"class":222,"line":656},[220,31408,402],{"class":264},[220,31410,347],{"class":420},[220,31412,359],{"class":264},[212,31414,31415],{"className":2844,"code":31356,"language":2846,"meta":178,"style":178},[99,31416,31417,31425,31431,31441,31445,31453,31461],{"__ignoreMap":178},[220,31418,31419,31421,31423],{"class":222,"line":223},[220,31420,343],{"class":264},[220,31422,347],{"class":420},[220,31424,359],{"class":264},[220,31426,31427,31429],{"class":222,"line":179},[220,31428,364],{"class":264},[220,31430,31315],{"class":420},[220,31432,31433,31435,31437,31439],{"class":222,"line":389},[220,31434,19850],{"class":226},[220,31436,29241],{"class":264},[220,31438,24169],{"class":420},[220,31440,749],{"class":264},[220,31442,31443],{"class":222,"line":399},[220,31444,31329],{"class":264},[220,31446,31447,31449,31451],{"class":222,"line":644},[220,31448,2550],{"class":264},[220,31450,2553],{"class":420},[220,31452,386],{"class":264},[220,31454,31455,31457,31459],{"class":222,"line":650},[220,31456,2567],{"class":264},[220,31458,31271],{"class":420},[220,31460,359],{"class":264},[220,31462,31463,31465,31467],{"class":222,"line":656},[220,31464,402],{"class":264},[220,31466,347],{"class":420},[220,31468,359],{"class":264},[212,31470,31471],{"className":468,"code":31356,"language":469,"meta":178,"style":178},[99,31472,31473,31481,31487,31499,31503,31511,31519],{"__ignoreMap":178},[220,31474,31475,31477,31479],{"class":222,"line":223},[220,31476,343],{"class":264},[220,31478,347],{"class":420},[220,31480,359],{"class":264},[220,31482,31483,31485],{"class":222,"line":179},[220,31484,364],{"class":264},[220,31486,31315],{"class":420},[220,31488,31489,31491,31493,31495,31497],{"class":222,"line":389},[220,31490,19850],{"class":226},[220,31492,353],{"class":260},[220,31494,743],{"class":264},[220,31496,24169],{"class":420},[220,31498,749],{"class":264},[220,31500,31501],{"class":222,"line":399},[220,31502,31329],{"class":264},[220,31504,31505,31507,31509],{"class":222,"line":644},[220,31506,2550],{"class":264},[220,31508,2553],{"class":420},[220,31510,386],{"class":264},[220,31512,31513,31515,31517],{"class":222,"line":650},[220,31514,2567],{"class":264},[220,31516,31271],{"class":420},[220,31518,359],{"class":264},[220,31520,31521,31523,31525],{"class":222,"line":656},[220,31522,402],{"class":264},[220,31524,347],{"class":420},[220,31526,359],{"class":264},[212,31528,31530],{"className":251,"code":31529,"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,31531,31532,31542,31546,31560,31564,31578,31586,31590,31594],{"__ignoreMap":178},[220,31533,31534,31536,31538,31540],{"class":222,"line":223},[220,31535,261],{"class":260},[220,31537,10879],{"class":264},[220,31539,268],{"class":260},[220,31541,4007],{"class":230},[220,31543,31544],{"class":222,"line":179},[220,31545,647],{"emptyLinePlaceholder":194},[220,31547,31548,31550,31552,31554,31556,31558],{"class":222,"line":389},[220,31549,1735],{"class":260},[220,31551,1738],{"class":420},[220,31553,1741],{"class":260},[220,31555,1744],{"class":260},[220,31557,1747],{"class":226},[220,31559,1750],{"class":264},[220,31561,31562],{"class":222,"line":399},[220,31563,1765],{"class":264},[220,31565,31566,31568,31571,31574,31576],{"class":222,"line":644},[220,31567,1770],{"class":264},[220,31569,31570],{"class":230},"'AngularBlur'",[220,31572,31573],{"class":264},", props: { intensity: ",[220,31575,24169],{"class":420},[220,31577,6912],{"class":264},[220,31579,31580,31582,31584],{"class":222,"line":650},[220,31581,6380],{"class":264},[220,31583,3206],{"class":230},[220,31585,2465],{"class":264},[220,31587,31588],{"class":222,"line":656},[220,31589,6397],{"class":264},[220,31591,31592],{"class":222,"line":673},[220,31593,1787],{"class":264},[220,31595,31596],{"class":222,"line":682},[220,31597,1792],{"class":264},[1504,31599,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":31601},[31602,31603],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":31271,"description":31279},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":31611,"title":31612,"body":31613,"category":15275,"componentType":25247,"description":31620,"extension":191,"meta":31898,"navigation":194,"path":31899,"requiresChild":31900,"seo":31901,"stem":31902,"__hash__":31903},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":31614,"toc":31894},[31615,31618,31621,31623,31625,31628,31630,31892],[11,31616,31612],{"id":31617},"arc",[15,31619,31620],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[31281,31622],{"component":31612},[23,31624,31285],{"id":25903},[31287,31626],{":props":31627},"[{\"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,31629,31293],{"id":31292},[246,31631,31632,31681,31732,31780,31830],{":tabs":1557},[212,31633,31635],{"className":334,"code":31634,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,31636,31637,31645,31652,31660,31669,31673],{"__ignoreMap":178},[220,31638,31639,31641,31643],{"class":222,"line":223},[220,31640,343],{"class":264},[220,31642,347],{"class":346},[220,31644,359],{"class":264},[220,31646,31647,31649],{"class":222,"line":179},[220,31648,364],{"class":264},[220,31650,31651],{"class":346},"Arc\n",[220,31653,31654,31656,31658],{"class":222,"line":389},[220,31655,9002],{"class":226},[220,31657,353],{"class":264},[220,31659,8958],{"class":230},[220,31661,31662,31664,31666],{"class":222,"line":399},[220,31663,16772],{"class":226},[220,31665,353],{"class":264},[220,31667,31668],{"class":230},"\"0.38\"\n",[220,31670,31671],{"class":222,"line":644},[220,31672,1234],{"class":264},[220,31674,31675,31677,31679],{"class":222,"line":650},[220,31676,402],{"class":264},[220,31678,347],{"class":346},[220,31680,359],{"class":264},[212,31682,31684],{"className":409,"code":31683,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,31685,31686,31694,31700,31708,31720,31724],{"__ignoreMap":178},[220,31687,31688,31690,31692],{"class":222,"line":223},[220,31689,343],{"class":264},[220,31691,347],{"class":420},[220,31693,359],{"class":264},[220,31695,31696,31698],{"class":222,"line":179},[220,31697,364],{"class":264},[220,31699,31651],{"class":420},[220,31701,31702,31704,31706],{"class":222,"line":389},[220,31703,9002],{"class":226},[220,31705,353],{"class":260},[220,31707,8958],{"class":230},[220,31709,31710,31712,31714,31716,31718],{"class":222,"line":399},[220,31711,9012],{"class":226},[220,31713,353],{"class":260},[220,31715,743],{"class":264},[220,31717,24107],{"class":420},[220,31719,749],{"class":264},[220,31721,31722],{"class":222,"line":644},[220,31723,1234],{"class":264},[220,31725,31726,31728,31730],{"class":222,"line":650},[220,31727,402],{"class":264},[220,31729,347],{"class":420},[220,31731,359],{"class":264},[212,31733,31734],{"className":2844,"code":31683,"language":2846,"meta":178,"style":178},[99,31735,31736,31744,31750,31758,31768,31772],{"__ignoreMap":178},[220,31737,31738,31740,31742],{"class":222,"line":223},[220,31739,343],{"class":264},[220,31741,347],{"class":420},[220,31743,359],{"class":264},[220,31745,31746,31748],{"class":222,"line":179},[220,31747,364],{"class":264},[220,31749,31651],{"class":420},[220,31751,31752,31754,31756],{"class":222,"line":389},[220,31753,9002],{"class":226},[220,31755,353],{"class":264},[220,31757,8958],{"class":230},[220,31759,31760,31762,31764,31766],{"class":222,"line":399},[220,31761,9012],{"class":226},[220,31763,29241],{"class":264},[220,31765,24107],{"class":420},[220,31767,749],{"class":264},[220,31769,31770],{"class":222,"line":644},[220,31771,1234],{"class":264},[220,31773,31774,31776,31778],{"class":222,"line":650},[220,31775,402],{"class":264},[220,31777,347],{"class":420},[220,31779,359],{"class":264},[212,31781,31782],{"className":468,"code":31683,"language":469,"meta":178,"style":178},[99,31783,31784,31792,31798,31806,31818,31822],{"__ignoreMap":178},[220,31785,31786,31788,31790],{"class":222,"line":223},[220,31787,343],{"class":264},[220,31789,347],{"class":420},[220,31791,359],{"class":264},[220,31793,31794,31796],{"class":222,"line":179},[220,31795,364],{"class":264},[220,31797,31651],{"class":420},[220,31799,31800,31802,31804],{"class":222,"line":389},[220,31801,9002],{"class":226},[220,31803,353],{"class":260},[220,31805,8958],{"class":230},[220,31807,31808,31810,31812,31814,31816],{"class":222,"line":399},[220,31809,9012],{"class":226},[220,31811,353],{"class":260},[220,31813,743],{"class":264},[220,31815,24107],{"class":420},[220,31817,749],{"class":264},[220,31819,31820],{"class":222,"line":644},[220,31821,1234],{"class":264},[220,31823,31824,31826,31828],{"class":222,"line":650},[220,31825,402],{"class":264},[220,31827,347],{"class":420},[220,31829,359],{"class":264},[212,31831,31833],{"className":251,"code":31832,"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,31834,31835,31845,31849,31863,31867,31884,31888],{"__ignoreMap":178},[220,31836,31837,31839,31841,31843],{"class":222,"line":223},[220,31838,261],{"class":260},[220,31840,10879],{"class":264},[220,31842,268],{"class":260},[220,31844,4007],{"class":230},[220,31846,31847],{"class":222,"line":179},[220,31848,647],{"emptyLinePlaceholder":194},[220,31850,31851,31853,31855,31857,31859,31861],{"class":222,"line":389},[220,31852,1735],{"class":260},[220,31854,1738],{"class":420},[220,31856,1741],{"class":260},[220,31858,1744],{"class":260},[220,31860,1747],{"class":226},[220,31862,1750],{"class":264},[220,31864,31865],{"class":222,"line":399},[220,31866,1765],{"class":264},[220,31868,31869,31871,31874,31876,31878,31880,31882],{"class":222,"line":644},[220,31870,1770],{"class":264},[220,31872,31873],{"class":230},"'Arc'",[220,31875,1776],{"class":264},[220,31877,9536],{"class":230},[220,31879,5932],{"class":264},[220,31881,24107],{"class":420},[220,31883,1782],{"class":264},[220,31885,31886],{"class":222,"line":650},[220,31887,1787],{"class":264},[220,31889,31890],{"class":222,"line":656},[220,31891,1792],{"class":264},[1504,31893,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":31895},[31896,31897],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":31612,"description":31620},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":31905,"title":31906,"body":31907,"category":32176,"componentType":25253,"description":31914,"extension":191,"meta":32177,"navigation":194,"path":32178,"requiresChild":194,"seo":32179,"stem":32180,"__hash__":32181},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":31908,"toc":32172},[31909,31912,31915,31917,31919,31922,31924,32169],[11,31910,31906],{"id":31911},"ascii",[15,31913,31914],{},"Convert imagery to ASCII character art",[31281,31916],{"component":31906},[23,31918,31285],{"id":25903},[31287,31920],{":props":31921},"[{\"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,31923,31293],{"id":31292},[246,31925,31926,31971,32015,32059,32103],{":tabs":1557},[212,31927,31929],{"className":334,"code":31928,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,31930,31931,31939,31947,31955,31963],{"__ignoreMap":178},[220,31932,31933,31935,31937],{"class":222,"line":223},[220,31934,343],{"class":264},[220,31936,347],{"class":346},[220,31938,359],{"class":264},[220,31940,31941,31943,31945],{"class":222,"line":179},[220,31942,364],{"class":264},[220,31944,31906],{"class":346},[220,31946,359],{"class":264},[220,31948,31949,31951,31953],{"class":222,"line":389},[220,31950,2550],{"class":264},[220,31952,2553],{"class":346},[220,31954,386],{"class":264},[220,31956,31957,31959,31961],{"class":222,"line":399},[220,31958,2567],{"class":264},[220,31960,31906],{"class":346},[220,31962,359],{"class":264},[220,31964,31965,31967,31969],{"class":222,"line":644},[220,31966,402],{"class":264},[220,31968,347],{"class":346},[220,31970,359],{"class":264},[212,31972,31973],{"className":409,"code":31928,"language":411,"meta":178,"style":178},[99,31974,31975,31983,31991,31999,32007],{"__ignoreMap":178},[220,31976,31977,31979,31981],{"class":222,"line":223},[220,31978,343],{"class":264},[220,31980,347],{"class":420},[220,31982,359],{"class":264},[220,31984,31985,31987,31989],{"class":222,"line":179},[220,31986,364],{"class":264},[220,31988,31906],{"class":420},[220,31990,359],{"class":264},[220,31992,31993,31995,31997],{"class":222,"line":389},[220,31994,2550],{"class":264},[220,31996,2553],{"class":420},[220,31998,386],{"class":264},[220,32000,32001,32003,32005],{"class":222,"line":399},[220,32002,2567],{"class":264},[220,32004,31906],{"class":420},[220,32006,359],{"class":264},[220,32008,32009,32011,32013],{"class":222,"line":644},[220,32010,402],{"class":264},[220,32012,347],{"class":420},[220,32014,359],{"class":264},[212,32016,32017],{"className":2844,"code":31928,"language":2846,"meta":178,"style":178},[99,32018,32019,32027,32035,32043,32051],{"__ignoreMap":178},[220,32020,32021,32023,32025],{"class":222,"line":223},[220,32022,343],{"class":264},[220,32024,347],{"class":420},[220,32026,359],{"class":264},[220,32028,32029,32031,32033],{"class":222,"line":179},[220,32030,364],{"class":264},[220,32032,31906],{"class":420},[220,32034,359],{"class":264},[220,32036,32037,32039,32041],{"class":222,"line":389},[220,32038,2550],{"class":264},[220,32040,2553],{"class":420},[220,32042,386],{"class":264},[220,32044,32045,32047,32049],{"class":222,"line":399},[220,32046,2567],{"class":264},[220,32048,31906],{"class":420},[220,32050,359],{"class":264},[220,32052,32053,32055,32057],{"class":222,"line":644},[220,32054,402],{"class":264},[220,32056,347],{"class":420},[220,32058,359],{"class":264},[212,32060,32061],{"className":468,"code":31928,"language":469,"meta":178,"style":178},[99,32062,32063,32071,32079,32087,32095],{"__ignoreMap":178},[220,32064,32065,32067,32069],{"class":222,"line":223},[220,32066,343],{"class":264},[220,32068,347],{"class":420},[220,32070,359],{"class":264},[220,32072,32073,32075,32077],{"class":222,"line":179},[220,32074,364],{"class":264},[220,32076,31906],{"class":420},[220,32078,359],{"class":264},[220,32080,32081,32083,32085],{"class":222,"line":389},[220,32082,2550],{"class":264},[220,32084,2553],{"class":420},[220,32086,386],{"class":264},[220,32088,32089,32091,32093],{"class":222,"line":399},[220,32090,2567],{"class":264},[220,32092,31906],{"class":420},[220,32094,359],{"class":264},[220,32096,32097,32099,32101],{"class":222,"line":644},[220,32098,402],{"class":264},[220,32100,347],{"class":420},[220,32102,359],{"class":264},[212,32104,32106],{"className":251,"code":32105,"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,32107,32108,32118,32122,32136,32140,32149,32157,32161,32165],{"__ignoreMap":178},[220,32109,32110,32112,32114,32116],{"class":222,"line":223},[220,32111,261],{"class":260},[220,32113,10879],{"class":264},[220,32115,268],{"class":260},[220,32117,4007],{"class":230},[220,32119,32120],{"class":222,"line":179},[220,32121,647],{"emptyLinePlaceholder":194},[220,32123,32124,32126,32128,32130,32132,32134],{"class":222,"line":389},[220,32125,1735],{"class":260},[220,32127,1738],{"class":420},[220,32129,1741],{"class":260},[220,32131,1744],{"class":260},[220,32133,1747],{"class":226},[220,32135,1750],{"class":264},[220,32137,32138],{"class":222,"line":399},[220,32139,1765],{"class":264},[220,32141,32142,32144,32147],{"class":222,"line":644},[220,32143,1770],{"class":264},[220,32145,32146],{"class":230},"'Ascii'",[220,32148,6375],{"class":264},[220,32150,32151,32153,32155],{"class":222,"line":650},[220,32152,6380],{"class":264},[220,32154,3206],{"class":230},[220,32156,2465],{"class":264},[220,32158,32159],{"class":222,"line":656},[220,32160,6397],{"class":264},[220,32162,32163],{"class":222,"line":673},[220,32164,1787],{"class":264},[220,32166,32167],{"class":222,"line":682},[220,32168,1792],{"class":264},[1504,32170,32171],{},"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":32173},[32174,32175],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":31906,"description":31914},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":32183,"title":11984,"body":32184,"category":32433,"componentType":25247,"description":32191,"extension":191,"meta":32434,"navigation":194,"path":32435,"requiresChild":31900,"seo":32436,"stem":32437,"__hash__":32438},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":32185,"toc":32429},[32186,32189,32192,32194,32196,32199,32201,32427],[11,32187,11984],{"id":32188},"aurora",[15,32190,32191],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[31281,32193],{"component":11984},[23,32195,31285],{"id":25903},[31287,32197],{":props":32198},"[{\"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,32200,31293],{"id":31292},[246,32202,32203,32244,32288,32328,32370],{":tabs":1557},[212,32204,32206],{"className":334,"code":32205,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,32207,32208,32216,32223,32232,32236],{"__ignoreMap":178},[220,32209,32210,32212,32214],{"class":222,"line":223},[220,32211,343],{"class":264},[220,32213,347],{"class":346},[220,32215,359],{"class":264},[220,32217,32218,32220],{"class":222,"line":179},[220,32219,364],{"class":264},[220,32221,32222],{"class":346},"Aurora\n",[220,32224,32225,32227,32229],{"class":222,"line":389},[220,32226,19739],{"class":226},[220,32228,353],{"class":264},[220,32230,32231],{"class":230},"\"80\"\n",[220,32233,32234],{"class":222,"line":399},[220,32235,1234],{"class":264},[220,32237,32238,32240,32242],{"class":222,"line":644},[220,32239,402],{"class":264},[220,32241,347],{"class":346},[220,32243,359],{"class":264},[212,32245,32247],{"className":409,"code":32246,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,32248,32249,32257,32263,32276,32280],{"__ignoreMap":178},[220,32250,32251,32253,32255],{"class":222,"line":223},[220,32252,343],{"class":264},[220,32254,347],{"class":420},[220,32256,359],{"class":264},[220,32258,32259,32261],{"class":222,"line":179},[220,32260,364],{"class":264},[220,32262,32222],{"class":420},[220,32264,32265,32267,32269,32271,32274],{"class":222,"line":389},[220,32266,19850],{"class":226},[220,32268,353],{"class":260},[220,32270,743],{"class":264},[220,32272,32273],{"class":420},"80",[220,32275,749],{"class":264},[220,32277,32278],{"class":222,"line":399},[220,32279,1234],{"class":264},[220,32281,32282,32284,32286],{"class":222,"line":644},[220,32283,402],{"class":264},[220,32285,347],{"class":420},[220,32287,359],{"class":264},[212,32289,32290],{"className":2844,"code":32246,"language":2846,"meta":178,"style":178},[99,32291,32292,32300,32306,32316,32320],{"__ignoreMap":178},[220,32293,32294,32296,32298],{"class":222,"line":223},[220,32295,343],{"class":264},[220,32297,347],{"class":420},[220,32299,359],{"class":264},[220,32301,32302,32304],{"class":222,"line":179},[220,32303,364],{"class":264},[220,32305,32222],{"class":420},[220,32307,32308,32310,32312,32314],{"class":222,"line":389},[220,32309,19850],{"class":226},[220,32311,29241],{"class":264},[220,32313,32273],{"class":420},[220,32315,749],{"class":264},[220,32317,32318],{"class":222,"line":399},[220,32319,1234],{"class":264},[220,32321,32322,32324,32326],{"class":222,"line":644},[220,32323,402],{"class":264},[220,32325,347],{"class":420},[220,32327,359],{"class":264},[212,32329,32330],{"className":468,"code":32246,"language":469,"meta":178,"style":178},[99,32331,32332,32340,32346,32358,32362],{"__ignoreMap":178},[220,32333,32334,32336,32338],{"class":222,"line":223},[220,32335,343],{"class":264},[220,32337,347],{"class":420},[220,32339,359],{"class":264},[220,32341,32342,32344],{"class":222,"line":179},[220,32343,364],{"class":264},[220,32345,32222],{"class":420},[220,32347,32348,32350,32352,32354,32356],{"class":222,"line":389},[220,32349,19850],{"class":226},[220,32351,353],{"class":260},[220,32353,743],{"class":264},[220,32355,32273],{"class":420},[220,32357,749],{"class":264},[220,32359,32360],{"class":222,"line":399},[220,32361,1234],{"class":264},[220,32363,32364,32366,32368],{"class":222,"line":644},[220,32365,402],{"class":264},[220,32367,347],{"class":420},[220,32369,359],{"class":264},[212,32371,32373],{"className":251,"code":32372,"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,32374,32375,32385,32389,32403,32407,32419,32423],{"__ignoreMap":178},[220,32376,32377,32379,32381,32383],{"class":222,"line":223},[220,32378,261],{"class":260},[220,32380,10879],{"class":264},[220,32382,268],{"class":260},[220,32384,4007],{"class":230},[220,32386,32387],{"class":222,"line":179},[220,32388,647],{"emptyLinePlaceholder":194},[220,32390,32391,32393,32395,32397,32399,32401],{"class":222,"line":389},[220,32392,1735],{"class":260},[220,32394,1738],{"class":420},[220,32396,1741],{"class":260},[220,32398,1744],{"class":260},[220,32400,1747],{"class":226},[220,32402,1750],{"class":264},[220,32404,32405],{"class":222,"line":399},[220,32406,1765],{"class":264},[220,32408,32409,32411,32413,32415,32417],{"class":222,"line":644},[220,32410,1770],{"class":264},[220,32412,12361],{"class":230},[220,32414,31573],{"class":264},[220,32416,32273],{"class":420},[220,32418,1782],{"class":264},[220,32420,32421],{"class":222,"line":650},[220,32422,1787],{"class":264},[220,32424,32425],{"class":222,"line":656},[220,32426,1792],{"class":264},[1504,32428,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32430},[32431,32432],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":11984,"description":32191},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":32440,"title":32441,"body":32442,"category":32766,"componentType":25253,"description":32449,"extension":191,"meta":32767,"navigation":194,"path":32768,"requiresChild":194,"seo":32769,"stem":32770,"__hash__":32771},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":32443,"toc":32762},[32444,32447,32450,32452,32454,32457,32459,32760],[11,32445,32441],{"id":32446},"barshift",[15,32448,32449],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[31281,32451],{"component":32441},[23,32453,31285],{"id":25903},[31287,32455],{":props":32456},"[{\"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,32458,31293],{"id":31292},[246,32460,32461,32517,32576,32632,32690],{":tabs":1557},[212,32462,32464],{"className":334,"code":32463,"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,32465,32466,32474,32481,32489,32493,32501,32509],{"__ignoreMap":178},[220,32467,32468,32470,32472],{"class":222,"line":223},[220,32469,343],{"class":264},[220,32471,347],{"class":346},[220,32473,359],{"class":264},[220,32475,32476,32478],{"class":222,"line":179},[220,32477,364],{"class":264},[220,32479,32480],{"class":346},"BarShift\n",[220,32482,32483,32485,32487],{"class":222,"line":389},[220,32484,19739],{"class":226},[220,32486,353],{"class":264},[220,32488,17475],{"class":230},[220,32490,32491],{"class":222,"line":399},[220,32492,31329],{"class":264},[220,32494,32495,32497,32499],{"class":222,"line":644},[220,32496,2550],{"class":264},[220,32498,2553],{"class":346},[220,32500,386],{"class":264},[220,32502,32503,32505,32507],{"class":222,"line":650},[220,32504,2567],{"class":264},[220,32506,32441],{"class":346},[220,32508,359],{"class":264},[220,32510,32511,32513,32515],{"class":222,"line":656},[220,32512,402],{"class":264},[220,32514,347],{"class":346},[220,32516,359],{"class":264},[212,32518,32520],{"className":409,"code":32519,"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,32521,32522,32530,32536,32548,32552,32560,32568],{"__ignoreMap":178},[220,32523,32524,32526,32528],{"class":222,"line":223},[220,32525,343],{"class":264},[220,32527,347],{"class":420},[220,32529,359],{"class":264},[220,32531,32532,32534],{"class":222,"line":179},[220,32533,364],{"class":264},[220,32535,32480],{"class":420},[220,32537,32538,32540,32542,32544,32546],{"class":222,"line":389},[220,32539,19850],{"class":226},[220,32541,353],{"class":260},[220,32543,743],{"class":264},[220,32545,17559],{"class":420},[220,32547,749],{"class":264},[220,32549,32550],{"class":222,"line":399},[220,32551,31329],{"class":264},[220,32553,32554,32556,32558],{"class":222,"line":644},[220,32555,2550],{"class":264},[220,32557,2553],{"class":420},[220,32559,386],{"class":264},[220,32561,32562,32564,32566],{"class":222,"line":650},[220,32563,2567],{"class":264},[220,32565,32441],{"class":420},[220,32567,359],{"class":264},[220,32569,32570,32572,32574],{"class":222,"line":656},[220,32571,402],{"class":264},[220,32573,347],{"class":420},[220,32575,359],{"class":264},[212,32577,32578],{"className":2844,"code":32519,"language":2846,"meta":178,"style":178},[99,32579,32580,32588,32594,32604,32608,32616,32624],{"__ignoreMap":178},[220,32581,32582,32584,32586],{"class":222,"line":223},[220,32583,343],{"class":264},[220,32585,347],{"class":420},[220,32587,359],{"class":264},[220,32589,32590,32592],{"class":222,"line":179},[220,32591,364],{"class":264},[220,32593,32480],{"class":420},[220,32595,32596,32598,32600,32602],{"class":222,"line":389},[220,32597,19850],{"class":226},[220,32599,29241],{"class":264},[220,32601,17559],{"class":420},[220,32603,749],{"class":264},[220,32605,32606],{"class":222,"line":399},[220,32607,31329],{"class":264},[220,32609,32610,32612,32614],{"class":222,"line":644},[220,32611,2550],{"class":264},[220,32613,2553],{"class":420},[220,32615,386],{"class":264},[220,32617,32618,32620,32622],{"class":222,"line":650},[220,32619,2567],{"class":264},[220,32621,32441],{"class":420},[220,32623,359],{"class":264},[220,32625,32626,32628,32630],{"class":222,"line":656},[220,32627,402],{"class":264},[220,32629,347],{"class":420},[220,32631,359],{"class":264},[212,32633,32634],{"className":468,"code":32519,"language":469,"meta":178,"style":178},[99,32635,32636,32644,32650,32662,32666,32674,32682],{"__ignoreMap":178},[220,32637,32638,32640,32642],{"class":222,"line":223},[220,32639,343],{"class":264},[220,32641,347],{"class":420},[220,32643,359],{"class":264},[220,32645,32646,32648],{"class":222,"line":179},[220,32647,364],{"class":264},[220,32649,32480],{"class":420},[220,32651,32652,32654,32656,32658,32660],{"class":222,"line":389},[220,32653,19850],{"class":226},[220,32655,353],{"class":260},[220,32657,743],{"class":264},[220,32659,17559],{"class":420},[220,32661,749],{"class":264},[220,32663,32664],{"class":222,"line":399},[220,32665,31329],{"class":264},[220,32667,32668,32670,32672],{"class":222,"line":644},[220,32669,2550],{"class":264},[220,32671,2553],{"class":420},[220,32673,386],{"class":264},[220,32675,32676,32678,32680],{"class":222,"line":650},[220,32677,2567],{"class":264},[220,32679,32441],{"class":420},[220,32681,359],{"class":264},[220,32683,32684,32686,32688],{"class":222,"line":656},[220,32685,402],{"class":264},[220,32687,347],{"class":420},[220,32689,359],{"class":264},[212,32691,32693],{"className":251,"code":32692,"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,32694,32695,32705,32709,32723,32727,32740,32748,32752,32756],{"__ignoreMap":178},[220,32696,32697,32699,32701,32703],{"class":222,"line":223},[220,32698,261],{"class":260},[220,32700,10879],{"class":264},[220,32702,268],{"class":260},[220,32704,4007],{"class":230},[220,32706,32707],{"class":222,"line":179},[220,32708,647],{"emptyLinePlaceholder":194},[220,32710,32711,32713,32715,32717,32719,32721],{"class":222,"line":389},[220,32712,1735],{"class":260},[220,32714,1738],{"class":420},[220,32716,1741],{"class":260},[220,32718,1744],{"class":260},[220,32720,1747],{"class":226},[220,32722,1750],{"class":264},[220,32724,32725],{"class":222,"line":399},[220,32726,1765],{"class":264},[220,32728,32729,32731,32734,32736,32738],{"class":222,"line":644},[220,32730,1770],{"class":264},[220,32732,32733],{"class":230},"'BarShift'",[220,32735,31573],{"class":264},[220,32737,17559],{"class":420},[220,32739,6912],{"class":264},[220,32741,32742,32744,32746],{"class":222,"line":650},[220,32743,6380],{"class":264},[220,32745,3206],{"class":230},[220,32747,2465],{"class":264},[220,32749,32750],{"class":222,"line":656},[220,32751,6397],{"class":264},[220,32753,32754],{"class":222,"line":673},[220,32755,1787],{"class":264},[220,32757,32758],{"class":222,"line":682},[220,32759,1792],{"class":264},[1504,32761,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32763},[32764,32765],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":32441,"description":32449},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":32773,"title":32774,"body":32775,"category":33043,"componentType":25253,"description":32782,"extension":191,"meta":33044,"navigation":194,"path":33045,"requiresChild":194,"seo":33046,"stem":33047,"__hash__":33048},"components\u002Fdocs\u002Fcomponents\u002FBarnDoors.md","BarnDoors",{"type":8,"value":32776,"toc":33039},[32777,32780,32783,32785,32787,32790,32792,33037],[11,32778,32774],{"id":32779},"barndoors",[15,32781,32782],{},"Split the content along a center line and wipe outward in both directions",[31281,32784],{"component":32774},[23,32786,31285],{"id":25903},[31287,32788],{":props":32789},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the doors have opened (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the doors open in degrees (0 = apart horizontally)\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the wipe edges\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Close in from both edges instead of opening from the center\"}]",[23,32791,31293],{"id":31292},[246,32793,32794,32839,32883,32927,32971],{":tabs":1557},[212,32795,32797],{"className":334,"code":32796,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarnDoors>\n \u003CCircle \u002F>\n \u003C\u002FBarnDoors>\n\u003C\u002FShader>\n",[99,32798,32799,32807,32815,32823,32831],{"__ignoreMap":178},[220,32800,32801,32803,32805],{"class":222,"line":223},[220,32802,343],{"class":264},[220,32804,347],{"class":346},[220,32806,359],{"class":264},[220,32808,32809,32811,32813],{"class":222,"line":179},[220,32810,364],{"class":264},[220,32812,32774],{"class":346},[220,32814,359],{"class":264},[220,32816,32817,32819,32821],{"class":222,"line":389},[220,32818,2550],{"class":264},[220,32820,2553],{"class":346},[220,32822,386],{"class":264},[220,32824,32825,32827,32829],{"class":222,"line":399},[220,32826,2567],{"class":264},[220,32828,32774],{"class":346},[220,32830,359],{"class":264},[220,32832,32833,32835,32837],{"class":222,"line":644},[220,32834,402],{"class":264},[220,32836,347],{"class":346},[220,32838,359],{"class":264},[212,32840,32841],{"className":409,"code":32796,"language":411,"meta":178,"style":178},[99,32842,32843,32851,32859,32867,32875],{"__ignoreMap":178},[220,32844,32845,32847,32849],{"class":222,"line":223},[220,32846,343],{"class":264},[220,32848,347],{"class":420},[220,32850,359],{"class":264},[220,32852,32853,32855,32857],{"class":222,"line":179},[220,32854,364],{"class":264},[220,32856,32774],{"class":420},[220,32858,359],{"class":264},[220,32860,32861,32863,32865],{"class":222,"line":389},[220,32862,2550],{"class":264},[220,32864,2553],{"class":420},[220,32866,386],{"class":264},[220,32868,32869,32871,32873],{"class":222,"line":399},[220,32870,2567],{"class":264},[220,32872,32774],{"class":420},[220,32874,359],{"class":264},[220,32876,32877,32879,32881],{"class":222,"line":644},[220,32878,402],{"class":264},[220,32880,347],{"class":420},[220,32882,359],{"class":264},[212,32884,32885],{"className":2844,"code":32796,"language":2846,"meta":178,"style":178},[99,32886,32887,32895,32903,32911,32919],{"__ignoreMap":178},[220,32888,32889,32891,32893],{"class":222,"line":223},[220,32890,343],{"class":264},[220,32892,347],{"class":420},[220,32894,359],{"class":264},[220,32896,32897,32899,32901],{"class":222,"line":179},[220,32898,364],{"class":264},[220,32900,32774],{"class":420},[220,32902,359],{"class":264},[220,32904,32905,32907,32909],{"class":222,"line":389},[220,32906,2550],{"class":264},[220,32908,2553],{"class":420},[220,32910,386],{"class":264},[220,32912,32913,32915,32917],{"class":222,"line":399},[220,32914,2567],{"class":264},[220,32916,32774],{"class":420},[220,32918,359],{"class":264},[220,32920,32921,32923,32925],{"class":222,"line":644},[220,32922,402],{"class":264},[220,32924,347],{"class":420},[220,32926,359],{"class":264},[212,32928,32929],{"className":468,"code":32796,"language":469,"meta":178,"style":178},[99,32930,32931,32939,32947,32955,32963],{"__ignoreMap":178},[220,32932,32933,32935,32937],{"class":222,"line":223},[220,32934,343],{"class":264},[220,32936,347],{"class":420},[220,32938,359],{"class":264},[220,32940,32941,32943,32945],{"class":222,"line":179},[220,32942,364],{"class":264},[220,32944,32774],{"class":420},[220,32946,359],{"class":264},[220,32948,32949,32951,32953],{"class":222,"line":389},[220,32950,2550],{"class":264},[220,32952,2553],{"class":420},[220,32954,386],{"class":264},[220,32956,32957,32959,32961],{"class":222,"line":399},[220,32958,2567],{"class":264},[220,32960,32774],{"class":420},[220,32962,359],{"class":264},[220,32964,32965,32967,32969],{"class":222,"line":644},[220,32966,402],{"class":264},[220,32968,347],{"class":420},[220,32970,359],{"class":264},[212,32972,32974],{"className":251,"code":32973,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarnDoors', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,32975,32976,32986,32990,33004,33008,33017,33025,33029,33033],{"__ignoreMap":178},[220,32977,32978,32980,32982,32984],{"class":222,"line":223},[220,32979,261],{"class":260},[220,32981,10879],{"class":264},[220,32983,268],{"class":260},[220,32985,4007],{"class":230},[220,32987,32988],{"class":222,"line":179},[220,32989,647],{"emptyLinePlaceholder":194},[220,32991,32992,32994,32996,32998,33000,33002],{"class":222,"line":389},[220,32993,1735],{"class":260},[220,32995,1738],{"class":420},[220,32997,1741],{"class":260},[220,32999,1744],{"class":260},[220,33001,1747],{"class":226},[220,33003,1750],{"class":264},[220,33005,33006],{"class":222,"line":399},[220,33007,1765],{"class":264},[220,33009,33010,33012,33015],{"class":222,"line":644},[220,33011,1770],{"class":264},[220,33013,33014],{"class":230},"'BarnDoors'",[220,33016,6375],{"class":264},[220,33018,33019,33021,33023],{"class":222,"line":650},[220,33020,6380],{"class":264},[220,33022,3206],{"class":230},[220,33024,2465],{"class":264},[220,33026,33027],{"class":222,"line":656},[220,33028,6397],{"class":264},[220,33030,33031],{"class":222,"line":673},[220,33032,1787],{"class":264},[220,33034,33035],{"class":222,"line":682},[220,33036,1792],{"class":264},[1504,33038,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":33040},[33041,33042],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Transitions",{},"\u002Fdocs\u002Fcomponents\u002Fbarndoors",{"title":32774,"description":32782},"docs\u002Fcomponents\u002FBarnDoors","73aNA7NyczNQKFcurXoO42FtB4UEaUOUGpMTLW3y3js",{"id":33050,"title":33051,"body":33052,"category":32433,"componentType":25247,"description":33059,"extension":191,"meta":33244,"navigation":194,"path":33245,"requiresChild":31900,"seo":33246,"stem":33247,"__hash__":33248},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":33053,"toc":33240},[33054,33057,33060,33062,33064,33067,33069,33238],[11,33055,33051],{"id":33056},"beam",[15,33058,33059],{},"A beam of light from one point to another.",[31281,33061],{"component":33051},[23,33063,31285],{"id":25903},[31287,33065],{":props":33066},"[{\"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,33068,31293],{"id":31292},[246,33070,33071,33100,33128,33156,33184],{":tabs":1557},[212,33072,33074],{"className":334,"code":33073,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,33075,33076,33084,33092],{"__ignoreMap":178},[220,33077,33078,33080,33082],{"class":222,"line":223},[220,33079,343],{"class":264},[220,33081,347],{"class":346},[220,33083,359],{"class":264},[220,33085,33086,33088,33090],{"class":222,"line":179},[220,33087,364],{"class":264},[220,33089,33051],{"class":346},[220,33091,386],{"class":264},[220,33093,33094,33096,33098],{"class":222,"line":389},[220,33095,402],{"class":264},[220,33097,347],{"class":346},[220,33099,359],{"class":264},[212,33101,33102],{"className":409,"code":33073,"language":411,"meta":178,"style":178},[99,33103,33104,33112,33120],{"__ignoreMap":178},[220,33105,33106,33108,33110],{"class":222,"line":223},[220,33107,343],{"class":264},[220,33109,347],{"class":420},[220,33111,359],{"class":264},[220,33113,33114,33116,33118],{"class":222,"line":179},[220,33115,364],{"class":264},[220,33117,33051],{"class":420},[220,33119,386],{"class":264},[220,33121,33122,33124,33126],{"class":222,"line":389},[220,33123,402],{"class":264},[220,33125,347],{"class":420},[220,33127,359],{"class":264},[212,33129,33130],{"className":2844,"code":33073,"language":2846,"meta":178,"style":178},[99,33131,33132,33140,33148],{"__ignoreMap":178},[220,33133,33134,33136,33138],{"class":222,"line":223},[220,33135,343],{"class":264},[220,33137,347],{"class":420},[220,33139,359],{"class":264},[220,33141,33142,33144,33146],{"class":222,"line":179},[220,33143,364],{"class":264},[220,33145,33051],{"class":420},[220,33147,386],{"class":264},[220,33149,33150,33152,33154],{"class":222,"line":389},[220,33151,402],{"class":264},[220,33153,347],{"class":420},[220,33155,359],{"class":264},[212,33157,33158],{"className":468,"code":33073,"language":469,"meta":178,"style":178},[99,33159,33160,33168,33176],{"__ignoreMap":178},[220,33161,33162,33164,33166],{"class":222,"line":223},[220,33163,343],{"class":264},[220,33165,347],{"class":420},[220,33167,359],{"class":264},[220,33169,33170,33172,33174],{"class":222,"line":179},[220,33171,364],{"class":264},[220,33173,33051],{"class":420},[220,33175,386],{"class":264},[220,33177,33178,33180,33182],{"class":222,"line":389},[220,33179,402],{"class":264},[220,33181,347],{"class":420},[220,33183,359],{"class":264},[212,33185,33187],{"className":251,"code":33186,"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,33188,33189,33199,33203,33217,33221,33230,33234],{"__ignoreMap":178},[220,33190,33191,33193,33195,33197],{"class":222,"line":223},[220,33192,261],{"class":260},[220,33194,10879],{"class":264},[220,33196,268],{"class":260},[220,33198,4007],{"class":230},[220,33200,33201],{"class":222,"line":179},[220,33202,647],{"emptyLinePlaceholder":194},[220,33204,33205,33207,33209,33211,33213,33215],{"class":222,"line":389},[220,33206,1735],{"class":260},[220,33208,1738],{"class":420},[220,33210,1741],{"class":260},[220,33212,1744],{"class":260},[220,33214,1747],{"class":226},[220,33216,1750],{"class":264},[220,33218,33219],{"class":222,"line":399},[220,33220,1765],{"class":264},[220,33222,33223,33225,33228],{"class":222,"line":644},[220,33224,1770],{"class":264},[220,33226,33227],{"class":230},"'Beam'",[220,33229,2465],{"class":264},[220,33231,33232],{"class":222,"line":650},[220,33233,1787],{"class":264},[220,33235,33236],{"class":222,"line":656},[220,33237,1792],{"class":264},[1504,33239,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":33241},[33242,33243],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":33051,"description":33059},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":33250,"title":33251,"body":33252,"category":32766,"componentType":25253,"description":33259,"extension":191,"meta":33520,"navigation":194,"path":33521,"requiresChild":194,"seo":33522,"stem":33523,"__hash__":33524},"components\u002Fdocs\u002Fcomponents\u002FBend.md","Bend",{"type":8,"value":33253,"toc":33516},[33254,33257,33260,33262,33264,33267,33269,33514],[11,33255,33251],{"id":33256},"bend",[15,33258,33259],{},"Bends the ends of the frame toward you like a curved display — content at the edges swells closer under real perspective, or curls away when the strength goes negative",[31281,33261],{"component":33251},[23,33263,31285],{"id":25903},[31287,33265],{":props":33266},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the bend axis in degrees — 0 bends the left\u002Fright ends, 90 bends the top\u002Fbottom\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges when the bend pulls content away from the frame border\"}]",[23,33268,31293],{"id":31292},[246,33270,33271,33316,33360,33404,33448],{":tabs":1557},[212,33272,33274],{"className":334,"code":33273,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBend>\n \u003CCircle \u002F>\n \u003C\u002FBend>\n\u003C\u002FShader>\n",[99,33275,33276,33284,33292,33300,33308],{"__ignoreMap":178},[220,33277,33278,33280,33282],{"class":222,"line":223},[220,33279,343],{"class":264},[220,33281,347],{"class":346},[220,33283,359],{"class":264},[220,33285,33286,33288,33290],{"class":222,"line":179},[220,33287,364],{"class":264},[220,33289,33251],{"class":346},[220,33291,359],{"class":264},[220,33293,33294,33296,33298],{"class":222,"line":389},[220,33295,2550],{"class":264},[220,33297,2553],{"class":346},[220,33299,386],{"class":264},[220,33301,33302,33304,33306],{"class":222,"line":399},[220,33303,2567],{"class":264},[220,33305,33251],{"class":346},[220,33307,359],{"class":264},[220,33309,33310,33312,33314],{"class":222,"line":644},[220,33311,402],{"class":264},[220,33313,347],{"class":346},[220,33315,359],{"class":264},[212,33317,33318],{"className":409,"code":33273,"language":411,"meta":178,"style":178},[99,33319,33320,33328,33336,33344,33352],{"__ignoreMap":178},[220,33321,33322,33324,33326],{"class":222,"line":223},[220,33323,343],{"class":264},[220,33325,347],{"class":420},[220,33327,359],{"class":264},[220,33329,33330,33332,33334],{"class":222,"line":179},[220,33331,364],{"class":264},[220,33333,33251],{"class":420},[220,33335,359],{"class":264},[220,33337,33338,33340,33342],{"class":222,"line":389},[220,33339,2550],{"class":264},[220,33341,2553],{"class":420},[220,33343,386],{"class":264},[220,33345,33346,33348,33350],{"class":222,"line":399},[220,33347,2567],{"class":264},[220,33349,33251],{"class":420},[220,33351,359],{"class":264},[220,33353,33354,33356,33358],{"class":222,"line":644},[220,33355,402],{"class":264},[220,33357,347],{"class":420},[220,33359,359],{"class":264},[212,33361,33362],{"className":2844,"code":33273,"language":2846,"meta":178,"style":178},[99,33363,33364,33372,33380,33388,33396],{"__ignoreMap":178},[220,33365,33366,33368,33370],{"class":222,"line":223},[220,33367,343],{"class":264},[220,33369,347],{"class":420},[220,33371,359],{"class":264},[220,33373,33374,33376,33378],{"class":222,"line":179},[220,33375,364],{"class":264},[220,33377,33251],{"class":420},[220,33379,359],{"class":264},[220,33381,33382,33384,33386],{"class":222,"line":389},[220,33383,2550],{"class":264},[220,33385,2553],{"class":420},[220,33387,386],{"class":264},[220,33389,33390,33392,33394],{"class":222,"line":399},[220,33391,2567],{"class":264},[220,33393,33251],{"class":420},[220,33395,359],{"class":264},[220,33397,33398,33400,33402],{"class":222,"line":644},[220,33399,402],{"class":264},[220,33401,347],{"class":420},[220,33403,359],{"class":264},[212,33405,33406],{"className":468,"code":33273,"language":469,"meta":178,"style":178},[99,33407,33408,33416,33424,33432,33440],{"__ignoreMap":178},[220,33409,33410,33412,33414],{"class":222,"line":223},[220,33411,343],{"class":264},[220,33413,347],{"class":420},[220,33415,359],{"class":264},[220,33417,33418,33420,33422],{"class":222,"line":179},[220,33419,364],{"class":264},[220,33421,33251],{"class":420},[220,33423,359],{"class":264},[220,33425,33426,33428,33430],{"class":222,"line":389},[220,33427,2550],{"class":264},[220,33429,2553],{"class":420},[220,33431,386],{"class":264},[220,33433,33434,33436,33438],{"class":222,"line":399},[220,33435,2567],{"class":264},[220,33437,33251],{"class":420},[220,33439,359],{"class":264},[220,33441,33442,33444,33446],{"class":222,"line":644},[220,33443,402],{"class":264},[220,33445,347],{"class":420},[220,33447,359],{"class":264},[212,33449,33451],{"className":251,"code":33450,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bend', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33452,33453,33463,33467,33481,33485,33494,33502,33506,33510],{"__ignoreMap":178},[220,33454,33455,33457,33459,33461],{"class":222,"line":223},[220,33456,261],{"class":260},[220,33458,10879],{"class":264},[220,33460,268],{"class":260},[220,33462,4007],{"class":230},[220,33464,33465],{"class":222,"line":179},[220,33466,647],{"emptyLinePlaceholder":194},[220,33468,33469,33471,33473,33475,33477,33479],{"class":222,"line":389},[220,33470,1735],{"class":260},[220,33472,1738],{"class":420},[220,33474,1741],{"class":260},[220,33476,1744],{"class":260},[220,33478,1747],{"class":226},[220,33480,1750],{"class":264},[220,33482,33483],{"class":222,"line":399},[220,33484,1765],{"class":264},[220,33486,33487,33489,33492],{"class":222,"line":644},[220,33488,1770],{"class":264},[220,33490,33491],{"class":230},"'Bend'",[220,33493,6375],{"class":264},[220,33495,33496,33498,33500],{"class":222,"line":650},[220,33497,6380],{"class":264},[220,33499,3206],{"class":230},[220,33501,2465],{"class":264},[220,33503,33504],{"class":222,"line":656},[220,33505,6397],{"class":264},[220,33507,33508],{"class":222,"line":673},[220,33509,1787],{"class":264},[220,33511,33512],{"class":222,"line":682},[220,33513,1792],{"class":264},[1504,33515,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":33517},[33518,33519],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbend",{"title":33251,"description":33259},"docs\u002Fcomponents\u002FBend","yTh745yjRF84KyipDFIzuYlGJcnZKEi8xan5ye79WXk",{"id":33526,"title":33527,"body":33528,"category":32433,"componentType":25247,"description":33535,"extension":191,"meta":33720,"navigation":194,"path":33721,"requiresChild":31900,"seo":33722,"stem":33723,"__hash__":33724},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":33529,"toc":33716},[33530,33533,33536,33538,33540,33543,33545,33714],[11,33531,33527],{"id":33532},"blob",[15,33534,33535],{},"Organic animated blob with 3D lighting and gradients",[31281,33537],{"component":33527},[23,33539,31285],{"id":25903},[31287,33541],{":props":33542},"[{\"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,33544,31293],{"id":31292},[246,33546,33547,33576,33604,33632,33660],{":tabs":1557},[212,33548,33550],{"className":334,"code":33549,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,33551,33552,33560,33568],{"__ignoreMap":178},[220,33553,33554,33556,33558],{"class":222,"line":223},[220,33555,343],{"class":264},[220,33557,347],{"class":346},[220,33559,359],{"class":264},[220,33561,33562,33564,33566],{"class":222,"line":179},[220,33563,364],{"class":264},[220,33565,33527],{"class":346},[220,33567,386],{"class":264},[220,33569,33570,33572,33574],{"class":222,"line":389},[220,33571,402],{"class":264},[220,33573,347],{"class":346},[220,33575,359],{"class":264},[212,33577,33578],{"className":409,"code":33549,"language":411,"meta":178,"style":178},[99,33579,33580,33588,33596],{"__ignoreMap":178},[220,33581,33582,33584,33586],{"class":222,"line":223},[220,33583,343],{"class":264},[220,33585,347],{"class":420},[220,33587,359],{"class":264},[220,33589,33590,33592,33594],{"class":222,"line":179},[220,33591,364],{"class":264},[220,33593,33527],{"class":420},[220,33595,386],{"class":264},[220,33597,33598,33600,33602],{"class":222,"line":389},[220,33599,402],{"class":264},[220,33601,347],{"class":420},[220,33603,359],{"class":264},[212,33605,33606],{"className":2844,"code":33549,"language":2846,"meta":178,"style":178},[99,33607,33608,33616,33624],{"__ignoreMap":178},[220,33609,33610,33612,33614],{"class":222,"line":223},[220,33611,343],{"class":264},[220,33613,347],{"class":420},[220,33615,359],{"class":264},[220,33617,33618,33620,33622],{"class":222,"line":179},[220,33619,364],{"class":264},[220,33621,33527],{"class":420},[220,33623,386],{"class":264},[220,33625,33626,33628,33630],{"class":222,"line":389},[220,33627,402],{"class":264},[220,33629,347],{"class":420},[220,33631,359],{"class":264},[212,33633,33634],{"className":468,"code":33549,"language":469,"meta":178,"style":178},[99,33635,33636,33644,33652],{"__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,33650],{"class":222,"line":179},[220,33647,364],{"class":264},[220,33649,33527],{"class":420},[220,33651,386],{"class":264},[220,33653,33654,33656,33658],{"class":222,"line":389},[220,33655,402],{"class":264},[220,33657,347],{"class":420},[220,33659,359],{"class":264},[212,33661,33663],{"className":251,"code":33662,"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,33664,33665,33675,33679,33693,33697,33706,33710],{"__ignoreMap":178},[220,33666,33667,33669,33671,33673],{"class":222,"line":223},[220,33668,261],{"class":260},[220,33670,10879],{"class":264},[220,33672,268],{"class":260},[220,33674,4007],{"class":230},[220,33676,33677],{"class":222,"line":179},[220,33678,647],{"emptyLinePlaceholder":194},[220,33680,33681,33683,33685,33687,33689,33691],{"class":222,"line":389},[220,33682,1735],{"class":260},[220,33684,1738],{"class":420},[220,33686,1741],{"class":260},[220,33688,1744],{"class":260},[220,33690,1747],{"class":226},[220,33692,1750],{"class":264},[220,33694,33695],{"class":222,"line":399},[220,33696,1765],{"class":264},[220,33698,33699,33701,33704],{"class":222,"line":644},[220,33700,1770],{"class":264},[220,33702,33703],{"class":230},"'Blob'",[220,33705,2465],{"class":264},[220,33707,33708],{"class":222,"line":650},[220,33709,1787],{"class":264},[220,33711,33712],{"class":222,"line":656},[220,33713,1792],{"class":264},[1504,33715,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":33717},[33718,33719],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":33527,"description":33535},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":33726,"title":33727,"body":33728,"category":33043,"componentType":25253,"description":33735,"extension":191,"meta":33996,"navigation":194,"path":33997,"requiresChild":194,"seo":33998,"stem":33999,"__hash__":34000},"components\u002Fdocs\u002Fcomponents\u002FBlockDissolve.md","BlockDissolve",{"type":8,"value":33729,"toc":33992},[33730,33733,33736,33738,33740,33743,33745,33990],[11,33731,33727],{"id":33732},"blockdissolve",[15,33734,33735],{},"Dissolve the content away as a grid of blocks vanishing in random order",[31281,33737],{"component":33727},[23,33739,31285],{"id":25903},[31287,33741],{":props":33742},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Size of each block as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each block fades out (0 = hard-edged blocks)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order blocks dissolve in\"}]",[23,33744,31293],{"id":31292},[246,33746,33747,33792,33836,33880,33924],{":tabs":1557},[212,33748,33750],{"className":334,"code":33749,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockDissolve>\n \u003CCircle \u002F>\n \u003C\u002FBlockDissolve>\n\u003C\u002FShader>\n",[99,33751,33752,33760,33768,33776,33784],{"__ignoreMap":178},[220,33753,33754,33756,33758],{"class":222,"line":223},[220,33755,343],{"class":264},[220,33757,347],{"class":346},[220,33759,359],{"class":264},[220,33761,33762,33764,33766],{"class":222,"line":179},[220,33763,364],{"class":264},[220,33765,33727],{"class":346},[220,33767,359],{"class":264},[220,33769,33770,33772,33774],{"class":222,"line":389},[220,33771,2550],{"class":264},[220,33773,2553],{"class":346},[220,33775,386],{"class":264},[220,33777,33778,33780,33782],{"class":222,"line":399},[220,33779,2567],{"class":264},[220,33781,33727],{"class":346},[220,33783,359],{"class":264},[220,33785,33786,33788,33790],{"class":222,"line":644},[220,33787,402],{"class":264},[220,33789,347],{"class":346},[220,33791,359],{"class":264},[212,33793,33794],{"className":409,"code":33749,"language":411,"meta":178,"style":178},[99,33795,33796,33804,33812,33820,33828],{"__ignoreMap":178},[220,33797,33798,33800,33802],{"class":222,"line":223},[220,33799,343],{"class":264},[220,33801,347],{"class":420},[220,33803,359],{"class":264},[220,33805,33806,33808,33810],{"class":222,"line":179},[220,33807,364],{"class":264},[220,33809,33727],{"class":420},[220,33811,359],{"class":264},[220,33813,33814,33816,33818],{"class":222,"line":389},[220,33815,2550],{"class":264},[220,33817,2553],{"class":420},[220,33819,386],{"class":264},[220,33821,33822,33824,33826],{"class":222,"line":399},[220,33823,2567],{"class":264},[220,33825,33727],{"class":420},[220,33827,359],{"class":264},[220,33829,33830,33832,33834],{"class":222,"line":644},[220,33831,402],{"class":264},[220,33833,347],{"class":420},[220,33835,359],{"class":264},[212,33837,33838],{"className":2844,"code":33749,"language":2846,"meta":178,"style":178},[99,33839,33840,33848,33856,33864,33872],{"__ignoreMap":178},[220,33841,33842,33844,33846],{"class":222,"line":223},[220,33843,343],{"class":264},[220,33845,347],{"class":420},[220,33847,359],{"class":264},[220,33849,33850,33852,33854],{"class":222,"line":179},[220,33851,364],{"class":264},[220,33853,33727],{"class":420},[220,33855,359],{"class":264},[220,33857,33858,33860,33862],{"class":222,"line":389},[220,33859,2550],{"class":264},[220,33861,2553],{"class":420},[220,33863,386],{"class":264},[220,33865,33866,33868,33870],{"class":222,"line":399},[220,33867,2567],{"class":264},[220,33869,33727],{"class":420},[220,33871,359],{"class":264},[220,33873,33874,33876,33878],{"class":222,"line":644},[220,33875,402],{"class":264},[220,33877,347],{"class":420},[220,33879,359],{"class":264},[212,33881,33882],{"className":468,"code":33749,"language":469,"meta":178,"style":178},[99,33883,33884,33892,33900,33908,33916],{"__ignoreMap":178},[220,33885,33886,33888,33890],{"class":222,"line":223},[220,33887,343],{"class":264},[220,33889,347],{"class":420},[220,33891,359],{"class":264},[220,33893,33894,33896,33898],{"class":222,"line":179},[220,33895,364],{"class":264},[220,33897,33727],{"class":420},[220,33899,359],{"class":264},[220,33901,33902,33904,33906],{"class":222,"line":389},[220,33903,2550],{"class":264},[220,33905,2553],{"class":420},[220,33907,386],{"class":264},[220,33909,33910,33912,33914],{"class":222,"line":399},[220,33911,2567],{"class":264},[220,33913,33727],{"class":420},[220,33915,359],{"class":264},[220,33917,33918,33920,33922],{"class":222,"line":644},[220,33919,402],{"class":264},[220,33921,347],{"class":420},[220,33923,359],{"class":264},[212,33925,33927],{"className":251,"code":33926,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BlockDissolve', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,33928,33929,33939,33943,33957,33961,33970,33978,33982,33986],{"__ignoreMap":178},[220,33930,33931,33933,33935,33937],{"class":222,"line":223},[220,33932,261],{"class":260},[220,33934,10879],{"class":264},[220,33936,268],{"class":260},[220,33938,4007],{"class":230},[220,33940,33941],{"class":222,"line":179},[220,33942,647],{"emptyLinePlaceholder":194},[220,33944,33945,33947,33949,33951,33953,33955],{"class":222,"line":389},[220,33946,1735],{"class":260},[220,33948,1738],{"class":420},[220,33950,1741],{"class":260},[220,33952,1744],{"class":260},[220,33954,1747],{"class":226},[220,33956,1750],{"class":264},[220,33958,33959],{"class":222,"line":399},[220,33960,1765],{"class":264},[220,33962,33963,33965,33968],{"class":222,"line":644},[220,33964,1770],{"class":264},[220,33966,33967],{"class":230},"'BlockDissolve'",[220,33969,6375],{"class":264},[220,33971,33972,33974,33976],{"class":222,"line":650},[220,33973,6380],{"class":264},[220,33975,3206],{"class":230},[220,33977,2465],{"class":264},[220,33979,33980],{"class":222,"line":656},[220,33981,6397],{"class":264},[220,33983,33984],{"class":222,"line":673},[220,33985,1787],{"class":264},[220,33987,33988],{"class":222,"line":682},[220,33989,1792],{"class":264},[1504,33991,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":33993},[33994,33995],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fblockdissolve",{"title":33727,"description":33735},"docs\u002Fcomponents\u002FBlockDissolve","eek109j_YYMANDpv7x-fWVWd060AWX7s6NXkZk6R6zE",{"id":34002,"title":34003,"body":34004,"category":32433,"componentType":25247,"description":34011,"extension":191,"meta":34196,"navigation":194,"path":34197,"requiresChild":31900,"seo":34198,"stem":34199,"__hash__":34200},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":34005,"toc":34192},[34006,34009,34012,34014,34016,34019,34021,34190],[11,34007,34003],{"id":34008},"blocknoise",[15,34010,34011],{},"Blocky value noise with soft cells that morph over time",[31281,34013],{"component":34003},[23,34015,31285],{"id":25903},[31287,34017],{":props":34018},"[{\"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,34020,31293],{"id":31292},[246,34022,34023,34052,34080,34108,34136],{":tabs":1557},[212,34024,34026],{"className":334,"code":34025,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,34027,34028,34036,34044],{"__ignoreMap":178},[220,34029,34030,34032,34034],{"class":222,"line":223},[220,34031,343],{"class":264},[220,34033,347],{"class":346},[220,34035,359],{"class":264},[220,34037,34038,34040,34042],{"class":222,"line":179},[220,34039,364],{"class":264},[220,34041,34003],{"class":346},[220,34043,386],{"class":264},[220,34045,34046,34048,34050],{"class":222,"line":389},[220,34047,402],{"class":264},[220,34049,347],{"class":346},[220,34051,359],{"class":264},[212,34053,34054],{"className":409,"code":34025,"language":411,"meta":178,"style":178},[99,34055,34056,34064,34072],{"__ignoreMap":178},[220,34057,34058,34060,34062],{"class":222,"line":223},[220,34059,343],{"class":264},[220,34061,347],{"class":420},[220,34063,359],{"class":264},[220,34065,34066,34068,34070],{"class":222,"line":179},[220,34067,364],{"class":264},[220,34069,34003],{"class":420},[220,34071,386],{"class":264},[220,34073,34074,34076,34078],{"class":222,"line":389},[220,34075,402],{"class":264},[220,34077,347],{"class":420},[220,34079,359],{"class":264},[212,34081,34082],{"className":2844,"code":34025,"language":2846,"meta":178,"style":178},[99,34083,34084,34092,34100],{"__ignoreMap":178},[220,34085,34086,34088,34090],{"class":222,"line":223},[220,34087,343],{"class":264},[220,34089,347],{"class":420},[220,34091,359],{"class":264},[220,34093,34094,34096,34098],{"class":222,"line":179},[220,34095,364],{"class":264},[220,34097,34003],{"class":420},[220,34099,386],{"class":264},[220,34101,34102,34104,34106],{"class":222,"line":389},[220,34103,402],{"class":264},[220,34105,347],{"class":420},[220,34107,359],{"class":264},[212,34109,34110],{"className":468,"code":34025,"language":469,"meta":178,"style":178},[99,34111,34112,34120,34128],{"__ignoreMap":178},[220,34113,34114,34116,34118],{"class":222,"line":223},[220,34115,343],{"class":264},[220,34117,347],{"class":420},[220,34119,359],{"class":264},[220,34121,34122,34124,34126],{"class":222,"line":179},[220,34123,364],{"class":264},[220,34125,34003],{"class":420},[220,34127,386],{"class":264},[220,34129,34130,34132,34134],{"class":222,"line":389},[220,34131,402],{"class":264},[220,34133,347],{"class":420},[220,34135,359],{"class":264},[212,34137,34139],{"className":251,"code":34138,"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,34140,34141,34151,34155,34169,34173,34182,34186],{"__ignoreMap":178},[220,34142,34143,34145,34147,34149],{"class":222,"line":223},[220,34144,261],{"class":260},[220,34146,10879],{"class":264},[220,34148,268],{"class":260},[220,34150,4007],{"class":230},[220,34152,34153],{"class":222,"line":179},[220,34154,647],{"emptyLinePlaceholder":194},[220,34156,34157,34159,34161,34163,34165,34167],{"class":222,"line":389},[220,34158,1735],{"class":260},[220,34160,1738],{"class":420},[220,34162,1741],{"class":260},[220,34164,1744],{"class":260},[220,34166,1747],{"class":226},[220,34168,1750],{"class":264},[220,34170,34171],{"class":222,"line":399},[220,34172,1765],{"class":264},[220,34174,34175,34177,34180],{"class":222,"line":644},[220,34176,1770],{"class":264},[220,34178,34179],{"class":230},"'BlockNoise'",[220,34181,2465],{"class":264},[220,34183,34184],{"class":222,"line":650},[220,34185,1787],{"class":264},[220,34187,34188],{"class":222,"line":656},[220,34189,1792],{"class":264},[1504,34191,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":34193},[34194,34195],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":34003,"description":34011},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":34202,"title":34203,"body":34204,"category":32433,"componentType":25247,"description":34211,"extension":191,"meta":34396,"navigation":194,"path":34397,"requiresChild":31900,"seo":34398,"stem":34399,"__hash__":34400},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":34205,"toc":34392},[34206,34209,34212,34214,34216,34219,34221,34390],[11,34207,34203],{"id":34208},"bluenoise",[15,34210,34211],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[31281,34213],{"component":34203},[23,34215,31285],{"id":25903},[31287,34217],{":props":34218},"[{\"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,34220,31293],{"id":31292},[246,34222,34223,34252,34280,34308,34336],{":tabs":1557},[212,34224,34226],{"className":334,"code":34225,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,34227,34228,34236,34244],{"__ignoreMap":178},[220,34229,34230,34232,34234],{"class":222,"line":223},[220,34231,343],{"class":264},[220,34233,347],{"class":346},[220,34235,359],{"class":264},[220,34237,34238,34240,34242],{"class":222,"line":179},[220,34239,364],{"class":264},[220,34241,34203],{"class":346},[220,34243,386],{"class":264},[220,34245,34246,34248,34250],{"class":222,"line":389},[220,34247,402],{"class":264},[220,34249,347],{"class":346},[220,34251,359],{"class":264},[212,34253,34254],{"className":409,"code":34225,"language":411,"meta":178,"style":178},[99,34255,34256,34264,34272],{"__ignoreMap":178},[220,34257,34258,34260,34262],{"class":222,"line":223},[220,34259,343],{"class":264},[220,34261,347],{"class":420},[220,34263,359],{"class":264},[220,34265,34266,34268,34270],{"class":222,"line":179},[220,34267,364],{"class":264},[220,34269,34203],{"class":420},[220,34271,386],{"class":264},[220,34273,34274,34276,34278],{"class":222,"line":389},[220,34275,402],{"class":264},[220,34277,347],{"class":420},[220,34279,359],{"class":264},[212,34281,34282],{"className":2844,"code":34225,"language":2846,"meta":178,"style":178},[99,34283,34284,34292,34300],{"__ignoreMap":178},[220,34285,34286,34288,34290],{"class":222,"line":223},[220,34287,343],{"class":264},[220,34289,347],{"class":420},[220,34291,359],{"class":264},[220,34293,34294,34296,34298],{"class":222,"line":179},[220,34295,364],{"class":264},[220,34297,34203],{"class":420},[220,34299,386],{"class":264},[220,34301,34302,34304,34306],{"class":222,"line":389},[220,34303,402],{"class":264},[220,34305,347],{"class":420},[220,34307,359],{"class":264},[212,34309,34310],{"className":468,"code":34225,"language":469,"meta":178,"style":178},[99,34311,34312,34320,34328],{"__ignoreMap":178},[220,34313,34314,34316,34318],{"class":222,"line":223},[220,34315,343],{"class":264},[220,34317,347],{"class":420},[220,34319,359],{"class":264},[220,34321,34322,34324,34326],{"class":222,"line":179},[220,34323,364],{"class":264},[220,34325,34203],{"class":420},[220,34327,386],{"class":264},[220,34329,34330,34332,34334],{"class":222,"line":389},[220,34331,402],{"class":264},[220,34333,347],{"class":420},[220,34335,359],{"class":264},[212,34337,34339],{"className":251,"code":34338,"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,34340,34341,34351,34355,34369,34373,34382,34386],{"__ignoreMap":178},[220,34342,34343,34345,34347,34349],{"class":222,"line":223},[220,34344,261],{"class":260},[220,34346,10879],{"class":264},[220,34348,268],{"class":260},[220,34350,4007],{"class":230},[220,34352,34353],{"class":222,"line":179},[220,34354,647],{"emptyLinePlaceholder":194},[220,34356,34357,34359,34361,34363,34365,34367],{"class":222,"line":389},[220,34358,1735],{"class":260},[220,34360,1738],{"class":420},[220,34362,1741],{"class":260},[220,34364,1744],{"class":260},[220,34366,1747],{"class":226},[220,34368,1750],{"class":264},[220,34370,34371],{"class":222,"line":399},[220,34372,1765],{"class":264},[220,34374,34375,34377,34380],{"class":222,"line":644},[220,34376,1770],{"class":264},[220,34378,34379],{"class":230},"'BlueNoise'",[220,34381,2465],{"class":264},[220,34383,34384],{"class":222,"line":650},[220,34385,1787],{"class":264},[220,34387,34388],{"class":222,"line":656},[220,34389,1792],{"class":264},[1504,34391,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":34393},[34394,34395],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":34203,"description":34211},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":34402,"title":11136,"body":34403,"category":31604,"componentType":25253,"description":34410,"extension":191,"meta":34729,"navigation":194,"path":34730,"requiresChild":194,"seo":34731,"stem":34732,"__hash__":34733},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":34404,"toc":34725},[34405,34408,34411,34413,34415,34418,34420,34723],[11,34406,11136],{"id":34407},"blur",[15,34409,34410],{},"A simple Gaussian blur effect",[31281,34412],{"component":11136},[23,34414,31285],{"id":25903},[31287,34416],{":props":34417},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,34419,31293],{"id":31292},[246,34421,34422,34479,34539,34595,34653],{":tabs":1557},[212,34423,34425],{"className":334,"code":34424,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,34426,34427,34435,34442,34451,34455,34463,34471],{"__ignoreMap":178},[220,34428,34429,34431,34433],{"class":222,"line":223},[220,34430,343],{"class":264},[220,34432,347],{"class":346},[220,34434,359],{"class":264},[220,34436,34437,34439],{"class":222,"line":179},[220,34438,364],{"class":264},[220,34440,34441],{"class":346},"Blur\n",[220,34443,34444,34446,34448],{"class":222,"line":389},[220,34445,19739],{"class":226},[220,34447,353],{"class":264},[220,34449,34450],{"class":230},"\"50\"\n",[220,34452,34453],{"class":222,"line":399},[220,34454,31329],{"class":264},[220,34456,34457,34459,34461],{"class":222,"line":644},[220,34458,2550],{"class":264},[220,34460,2553],{"class":346},[220,34462,386],{"class":264},[220,34464,34465,34467,34469],{"class":222,"line":650},[220,34466,2567],{"class":264},[220,34468,11136],{"class":346},[220,34470,359],{"class":264},[220,34472,34473,34475,34477],{"class":222,"line":656},[220,34474,402],{"class":264},[220,34476,347],{"class":346},[220,34478,359],{"class":264},[212,34480,34482],{"className":409,"code":34481,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,34483,34484,34492,34498,34511,34515,34523,34531],{"__ignoreMap":178},[220,34485,34486,34488,34490],{"class":222,"line":223},[220,34487,343],{"class":264},[220,34489,347],{"class":420},[220,34491,359],{"class":264},[220,34493,34494,34496],{"class":222,"line":179},[220,34495,364],{"class":264},[220,34497,34441],{"class":420},[220,34499,34500,34502,34504,34506,34509],{"class":222,"line":389},[220,34501,19850],{"class":226},[220,34503,353],{"class":260},[220,34505,743],{"class":264},[220,34507,34508],{"class":420},"50",[220,34510,749],{"class":264},[220,34512,34513],{"class":222,"line":399},[220,34514,31329],{"class":264},[220,34516,34517,34519,34521],{"class":222,"line":644},[220,34518,2550],{"class":264},[220,34520,2553],{"class":420},[220,34522,386],{"class":264},[220,34524,34525,34527,34529],{"class":222,"line":650},[220,34526,2567],{"class":264},[220,34528,11136],{"class":420},[220,34530,359],{"class":264},[220,34532,34533,34535,34537],{"class":222,"line":656},[220,34534,402],{"class":264},[220,34536,347],{"class":420},[220,34538,359],{"class":264},[212,34540,34541],{"className":2844,"code":34481,"language":2846,"meta":178,"style":178},[99,34542,34543,34551,34557,34567,34571,34579,34587],{"__ignoreMap":178},[220,34544,34545,34547,34549],{"class":222,"line":223},[220,34546,343],{"class":264},[220,34548,347],{"class":420},[220,34550,359],{"class":264},[220,34552,34553,34555],{"class":222,"line":179},[220,34554,364],{"class":264},[220,34556,34441],{"class":420},[220,34558,34559,34561,34563,34565],{"class":222,"line":389},[220,34560,19850],{"class":226},[220,34562,29241],{"class":264},[220,34564,34508],{"class":420},[220,34566,749],{"class":264},[220,34568,34569],{"class":222,"line":399},[220,34570,31329],{"class":264},[220,34572,34573,34575,34577],{"class":222,"line":644},[220,34574,2550],{"class":264},[220,34576,2553],{"class":420},[220,34578,386],{"class":264},[220,34580,34581,34583,34585],{"class":222,"line":650},[220,34582,2567],{"class":264},[220,34584,11136],{"class":420},[220,34586,359],{"class":264},[220,34588,34589,34591,34593],{"class":222,"line":656},[220,34590,402],{"class":264},[220,34592,347],{"class":420},[220,34594,359],{"class":264},[212,34596,34597],{"className":468,"code":34481,"language":469,"meta":178,"style":178},[99,34598,34599,34607,34613,34625,34629,34637,34645],{"__ignoreMap":178},[220,34600,34601,34603,34605],{"class":222,"line":223},[220,34602,343],{"class":264},[220,34604,347],{"class":420},[220,34606,359],{"class":264},[220,34608,34609,34611],{"class":222,"line":179},[220,34610,364],{"class":264},[220,34612,34441],{"class":420},[220,34614,34615,34617,34619,34621,34623],{"class":222,"line":389},[220,34616,19850],{"class":226},[220,34618,353],{"class":260},[220,34620,743],{"class":264},[220,34622,34508],{"class":420},[220,34624,749],{"class":264},[220,34626,34627],{"class":222,"line":399},[220,34628,31329],{"class":264},[220,34630,34631,34633,34635],{"class":222,"line":644},[220,34632,2550],{"class":264},[220,34634,2553],{"class":420},[220,34636,386],{"class":264},[220,34638,34639,34641,34643],{"class":222,"line":650},[220,34640,2567],{"class":264},[220,34642,11136],{"class":420},[220,34644,359],{"class":264},[220,34646,34647,34649,34651],{"class":222,"line":656},[220,34648,402],{"class":264},[220,34650,347],{"class":420},[220,34652,359],{"class":264},[212,34654,34656],{"className":251,"code":34655,"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,34657,34658,34668,34672,34686,34690,34703,34711,34715,34719],{"__ignoreMap":178},[220,34659,34660,34662,34664,34666],{"class":222,"line":223},[220,34661,261],{"class":260},[220,34663,10879],{"class":264},[220,34665,268],{"class":260},[220,34667,4007],{"class":230},[220,34669,34670],{"class":222,"line":179},[220,34671,647],{"emptyLinePlaceholder":194},[220,34673,34674,34676,34678,34680,34682,34684],{"class":222,"line":389},[220,34675,1735],{"class":260},[220,34677,1738],{"class":420},[220,34679,1741],{"class":260},[220,34681,1744],{"class":260},[220,34683,1747],{"class":226},[220,34685,1750],{"class":264},[220,34687,34688],{"class":222,"line":399},[220,34689,1765],{"class":264},[220,34691,34692,34694,34697,34699,34701],{"class":222,"line":644},[220,34693,1770],{"class":264},[220,34695,34696],{"class":230},"'Blur'",[220,34698,31573],{"class":264},[220,34700,34508],{"class":420},[220,34702,6912],{"class":264},[220,34704,34705,34707,34709],{"class":222,"line":650},[220,34706,6380],{"class":264},[220,34708,3206],{"class":230},[220,34710,2465],{"class":264},[220,34712,34713],{"class":222,"line":656},[220,34714,6397],{"class":264},[220,34716,34717],{"class":222,"line":673},[220,34718,1787],{"class":264},[220,34720,34721],{"class":222,"line":682},[220,34722,1792],{"class":264},[1504,34724,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":34726},[34727,34728],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":11136,"description":34410},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":34735,"title":34736,"body":34737,"category":34929,"componentType":25247,"description":34744,"extension":191,"meta":34930,"navigation":194,"path":34931,"requiresChild":31900,"seo":34932,"stem":34933,"__hash__":34934},"components\u002Fdocs\u002Fcomponents\u002FBoids.md","Boids",{"type":8,"value":34738,"toc":34925},[34739,34742,34745,34747,34749,34752,34754,34923],[11,34740,34736],{"id":34741},"boids",[15,34743,34744],{},"A living murmuration of hundreds of flocking agents drawn as crisp arrows, streaks, dots or glowing comets — separation, alignment and cohesion drive fluid, splitting-and-merging ribbons, agents flash toward an excited color when scattered, and the cursor acts as an attractor or a predator",[31281,34746],{"component":34736},[23,34748,31285],{"id":25903},[31287,34750],{":props":34751},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of agents cruising calmly with the flock\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff7ad9\",\"description\":\"Color agents flash toward when agitated — scattering from the predator cursor or banking through a hard turn\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"agentShape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"arrow\",\"description\":\"What each agent is drawn as — a hard-edged arrow, streak or square pointing along its heading, a plain dot, or a soft glowing comet\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"2000\",\"description\":\"Number of flocking agents\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Overall cruising speed of the flock\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Re-rolls the flock's starting formation — each value spawns the murmuration in a different arrangement\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Size of each agent\"},{\"name\":\"trails\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How long each agent's motion trail persists — 0 draws crisp agents, 1 leaves long ribbons\"},{\"name\":\"separation\",\"type\":\"number\",\"default\":\"1.7\",\"description\":\"How strongly agents steer away from crowding their neighbours\"},{\"name\":\"alignment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How strongly agents match their neighbours' heading — the driver of coherent murmuration ribbons\"},{\"name\":\"cohesion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly agents steer toward the local center of the flock\"},{\"name\":\"perception\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"How far each agent can sense its neighbours (in screen heights) — larger sees bigger, smoother flocks\"},{\"name\":\"cursorMode\",\"type\":\"\\\"none\\\" | \\\"attract\\\" | \\\"repel\\\"\",\"default\":\"repel\",\"description\":\"How the flock reacts to the cursor\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the cursor's pull or push on the flock\"}]",[23,34753,31293],{"id":31292},[246,34755,34756,34785,34813,34841,34869],{":tabs":1557},[212,34757,34759],{"className":334,"code":34758,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBoids \u002F>\n\u003C\u002FShader>\n",[99,34760,34761,34769,34777],{"__ignoreMap":178},[220,34762,34763,34765,34767],{"class":222,"line":223},[220,34764,343],{"class":264},[220,34766,347],{"class":346},[220,34768,359],{"class":264},[220,34770,34771,34773,34775],{"class":222,"line":179},[220,34772,364],{"class":264},[220,34774,34736],{"class":346},[220,34776,386],{"class":264},[220,34778,34779,34781,34783],{"class":222,"line":389},[220,34780,402],{"class":264},[220,34782,347],{"class":346},[220,34784,359],{"class":264},[212,34786,34787],{"className":409,"code":34758,"language":411,"meta":178,"style":178},[99,34788,34789,34797,34805],{"__ignoreMap":178},[220,34790,34791,34793,34795],{"class":222,"line":223},[220,34792,343],{"class":264},[220,34794,347],{"class":420},[220,34796,359],{"class":264},[220,34798,34799,34801,34803],{"class":222,"line":179},[220,34800,364],{"class":264},[220,34802,34736],{"class":420},[220,34804,386],{"class":264},[220,34806,34807,34809,34811],{"class":222,"line":389},[220,34808,402],{"class":264},[220,34810,347],{"class":420},[220,34812,359],{"class":264},[212,34814,34815],{"className":2844,"code":34758,"language":2846,"meta":178,"style":178},[99,34816,34817,34825,34833],{"__ignoreMap":178},[220,34818,34819,34821,34823],{"class":222,"line":223},[220,34820,343],{"class":264},[220,34822,347],{"class":420},[220,34824,359],{"class":264},[220,34826,34827,34829,34831],{"class":222,"line":179},[220,34828,364],{"class":264},[220,34830,34736],{"class":420},[220,34832,386],{"class":264},[220,34834,34835,34837,34839],{"class":222,"line":389},[220,34836,402],{"class":264},[220,34838,347],{"class":420},[220,34840,359],{"class":264},[212,34842,34843],{"className":468,"code":34758,"language":469,"meta":178,"style":178},[99,34844,34845,34853,34861],{"__ignoreMap":178},[220,34846,34847,34849,34851],{"class":222,"line":223},[220,34848,343],{"class":264},[220,34850,347],{"class":420},[220,34852,359],{"class":264},[220,34854,34855,34857,34859],{"class":222,"line":179},[220,34856,364],{"class":264},[220,34858,34736],{"class":420},[220,34860,386],{"class":264},[220,34862,34863,34865,34867],{"class":222,"line":389},[220,34864,402],{"class":264},[220,34866,347],{"class":420},[220,34868,359],{"class":264},[212,34870,34872],{"className":251,"code":34871,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Boids', props: {} }\n ]\n})\n",[99,34873,34874,34884,34888,34902,34906,34915,34919],{"__ignoreMap":178},[220,34875,34876,34878,34880,34882],{"class":222,"line":223},[220,34877,261],{"class":260},[220,34879,10879],{"class":264},[220,34881,268],{"class":260},[220,34883,4007],{"class":230},[220,34885,34886],{"class":222,"line":179},[220,34887,647],{"emptyLinePlaceholder":194},[220,34889,34890,34892,34894,34896,34898,34900],{"class":222,"line":389},[220,34891,1735],{"class":260},[220,34893,1738],{"class":420},[220,34895,1741],{"class":260},[220,34897,1744],{"class":260},[220,34899,1747],{"class":226},[220,34901,1750],{"class":264},[220,34903,34904],{"class":222,"line":399},[220,34905,1765],{"class":264},[220,34907,34908,34910,34913],{"class":222,"line":644},[220,34909,1770],{"class":264},[220,34911,34912],{"class":230},"'Boids'",[220,34914,2465],{"class":264},[220,34916,34917],{"class":222,"line":650},[220,34918,1787],{"class":264},[220,34920,34921],{"class":222,"line":656},[220,34922,1792],{"class":264},[1504,34924,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":34926},[34927,34928],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fboids",{"title":34736,"description":34744},"docs\u002Fcomponents\u002FBoids","hdhqsDQg5KnzNA_UfsNUlag4VVQ8bEJ7WQJ5TSK_WTs",{"id":34936,"title":34937,"body":34938,"category":31604,"componentType":25253,"description":34945,"extension":191,"meta":35262,"navigation":194,"path":35263,"requiresChild":194,"seo":35264,"stem":35265,"__hash__":35266},"components\u002Fdocs\u002Fcomponents\u002FBokehBlur.md","BokehBlur",{"type":8,"value":34939,"toc":35258},[34940,34943,34946,34948,34950,34953,34955,35256],[11,34941,34937],{"id":34942},"bokehblur",[15,34944,34945],{},"Photographic lens blur where bright highlights bloom into aperture-shaped discs",[31281,34947],{"component":34937},[23,34949,31285],{"id":25903},[31287,34951],{":props":34952},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Defocus amount — how far the lens blur spreads\"},{\"name\":\"highlightGain\",\"type\":\"number\",\"default\":\"4\",\"description\":\"How strongly bright highlights bloom into discs\"},{\"name\":\"highlightThreshold\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Brightness above which a highlight forms a disc\"},{\"name\":\"bladeShape\",\"type\":\"\\\"blades\\\" | \\\"circle\\\" | \\\"star\\\" | \\\"heart\\\" | \\\"flower\\\" | \\\"cross\\\" | \\\"ring\\\"\",\"default\":\"blades\",\"description\":\"Aperture shape the highlights bloom into — bladed iris or a novelty cut-out (heart, star, …)\"},{\"name\":\"bladeCount\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Blade or point count for the Blades, Star and Flower shapes — 0–2 blades is a circular iris\"},{\"name\":\"bladeRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the aperture shape (in degrees)\"},{\"name\":\"chromaticFringe\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Lens colour fringing on the disc edges\"}]",[23,34954,31293],{"id":31292},[246,34956,34957,35013,35072,35128,35186],{":tabs":1557},[212,34958,34960],{"className":334,"code":34959,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n :radius=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,34961,34962,34970,34977,34985,34989,34997,35005],{"__ignoreMap":178},[220,34963,34964,34966,34968],{"class":222,"line":223},[220,34965,343],{"class":264},[220,34967,347],{"class":346},[220,34969,359],{"class":264},[220,34971,34972,34974],{"class":222,"line":179},[220,34973,364],{"class":264},[220,34975,34976],{"class":346},"BokehBlur\n",[220,34978,34979,34981,34983],{"class":222,"line":389},[220,34980,16772],{"class":226},[220,34982,353],{"class":264},[220,34984,34450],{"class":230},[220,34986,34987],{"class":222,"line":399},[220,34988,31329],{"class":264},[220,34990,34991,34993,34995],{"class":222,"line":644},[220,34992,2550],{"class":264},[220,34994,2553],{"class":346},[220,34996,386],{"class":264},[220,34998,34999,35001,35003],{"class":222,"line":650},[220,35000,2567],{"class":264},[220,35002,34937],{"class":346},[220,35004,359],{"class":264},[220,35006,35007,35009,35011],{"class":222,"line":656},[220,35008,402],{"class":264},[220,35010,347],{"class":346},[220,35012,359],{"class":264},[212,35014,35016],{"className":409,"code":35015,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n radius={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35017,35018,35026,35032,35044,35048,35056,35064],{"__ignoreMap":178},[220,35019,35020,35022,35024],{"class":222,"line":223},[220,35021,343],{"class":264},[220,35023,347],{"class":420},[220,35025,359],{"class":264},[220,35027,35028,35030],{"class":222,"line":179},[220,35029,364],{"class":264},[220,35031,34976],{"class":420},[220,35033,35034,35036,35038,35040,35042],{"class":222,"line":389},[220,35035,9012],{"class":226},[220,35037,353],{"class":260},[220,35039,743],{"class":264},[220,35041,34508],{"class":420},[220,35043,749],{"class":264},[220,35045,35046],{"class":222,"line":399},[220,35047,31329],{"class":264},[220,35049,35050,35052,35054],{"class":222,"line":644},[220,35051,2550],{"class":264},[220,35053,2553],{"class":420},[220,35055,386],{"class":264},[220,35057,35058,35060,35062],{"class":222,"line":650},[220,35059,2567],{"class":264},[220,35061,34937],{"class":420},[220,35063,359],{"class":264},[220,35065,35066,35068,35070],{"class":222,"line":656},[220,35067,402],{"class":264},[220,35069,347],{"class":420},[220,35071,359],{"class":264},[212,35073,35074],{"className":2844,"code":35015,"language":2846,"meta":178,"style":178},[99,35075,35076,35084,35090,35100,35104,35112,35120],{"__ignoreMap":178},[220,35077,35078,35080,35082],{"class":222,"line":223},[220,35079,343],{"class":264},[220,35081,347],{"class":420},[220,35083,359],{"class":264},[220,35085,35086,35088],{"class":222,"line":179},[220,35087,364],{"class":264},[220,35089,34976],{"class":420},[220,35091,35092,35094,35096,35098],{"class":222,"line":389},[220,35093,9012],{"class":226},[220,35095,29241],{"class":264},[220,35097,34508],{"class":420},[220,35099,749],{"class":264},[220,35101,35102],{"class":222,"line":399},[220,35103,31329],{"class":264},[220,35105,35106,35108,35110],{"class":222,"line":644},[220,35107,2550],{"class":264},[220,35109,2553],{"class":420},[220,35111,386],{"class":264},[220,35113,35114,35116,35118],{"class":222,"line":650},[220,35115,2567],{"class":264},[220,35117,34937],{"class":420},[220,35119,359],{"class":264},[220,35121,35122,35124,35126],{"class":222,"line":656},[220,35123,402],{"class":264},[220,35125,347],{"class":420},[220,35127,359],{"class":264},[212,35129,35130],{"className":468,"code":35015,"language":469,"meta":178,"style":178},[99,35131,35132,35140,35146,35158,35162,35170,35178],{"__ignoreMap":178},[220,35133,35134,35136,35138],{"class":222,"line":223},[220,35135,343],{"class":264},[220,35137,347],{"class":420},[220,35139,359],{"class":264},[220,35141,35142,35144],{"class":222,"line":179},[220,35143,364],{"class":264},[220,35145,34976],{"class":420},[220,35147,35148,35150,35152,35154,35156],{"class":222,"line":389},[220,35149,9012],{"class":226},[220,35151,353],{"class":260},[220,35153,743],{"class":264},[220,35155,34508],{"class":420},[220,35157,749],{"class":264},[220,35159,35160],{"class":222,"line":399},[220,35161,31329],{"class":264},[220,35163,35164,35166,35168],{"class":222,"line":644},[220,35165,2550],{"class":264},[220,35167,2553],{"class":420},[220,35169,386],{"class":264},[220,35171,35172,35174,35176],{"class":222,"line":650},[220,35173,2567],{"class":264},[220,35175,34937],{"class":420},[220,35177,359],{"class":264},[220,35179,35180,35182,35184],{"class":222,"line":656},[220,35181,402],{"class":264},[220,35183,347],{"class":420},[220,35185,359],{"class":264},[212,35187,35189],{"className":251,"code":35188,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BokehBlur', props: { radius: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,35190,35191,35201,35205,35219,35223,35236,35244,35248,35252],{"__ignoreMap":178},[220,35192,35193,35195,35197,35199],{"class":222,"line":223},[220,35194,261],{"class":260},[220,35196,10879],{"class":264},[220,35198,268],{"class":260},[220,35200,4007],{"class":230},[220,35202,35203],{"class":222,"line":179},[220,35204,647],{"emptyLinePlaceholder":194},[220,35206,35207,35209,35211,35213,35215,35217],{"class":222,"line":389},[220,35208,1735],{"class":260},[220,35210,1738],{"class":420},[220,35212,1741],{"class":260},[220,35214,1744],{"class":260},[220,35216,1747],{"class":226},[220,35218,1750],{"class":264},[220,35220,35221],{"class":222,"line":399},[220,35222,1765],{"class":264},[220,35224,35225,35227,35230,35232,35234],{"class":222,"line":644},[220,35226,1770],{"class":264},[220,35228,35229],{"class":230},"'BokehBlur'",[220,35231,6907],{"class":264},[220,35233,34508],{"class":420},[220,35235,6912],{"class":264},[220,35237,35238,35240,35242],{"class":222,"line":650},[220,35239,6380],{"class":264},[220,35241,3206],{"class":230},[220,35243,2465],{"class":264},[220,35245,35246],{"class":222,"line":656},[220,35247,6397],{"class":264},[220,35249,35250],{"class":222,"line":673},[220,35251,1787],{"class":264},[220,35253,35254],{"class":222,"line":682},[220,35255,1792],{"class":264},[1504,35257,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35259},[35260,35261],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbokehblur",{"title":34937,"description":34945},"docs\u002Fcomponents\u002FBokehBlur","UvgWoVz1msLk-OLpiNCYNxzzxY6uC56cKmY-6PdjJas",{"id":35268,"title":35269,"body":35270,"category":32433,"componentType":25247,"description":35277,"extension":191,"meta":35462,"navigation":194,"path":35463,"requiresChild":31900,"seo":35464,"stem":35465,"__hash__":35466},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":35271,"toc":35458},[35272,35275,35278,35280,35282,35285,35287,35456],[11,35273,35269],{"id":35274},"brickpattern",[15,35276,35277],{},"Classic brick wall pattern with alternating rows and mortar gaps",[31281,35279],{"component":35269},[23,35281,31285],{"id":25903},[31287,35283],{":props":35284},"[{\"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,35286,31293],{"id":31292},[246,35288,35289,35318,35346,35374,35402],{":tabs":1557},[212,35290,35292],{"className":334,"code":35291,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,35293,35294,35302,35310],{"__ignoreMap":178},[220,35295,35296,35298,35300],{"class":222,"line":223},[220,35297,343],{"class":264},[220,35299,347],{"class":346},[220,35301,359],{"class":264},[220,35303,35304,35306,35308],{"class":222,"line":179},[220,35305,364],{"class":264},[220,35307,35269],{"class":346},[220,35309,386],{"class":264},[220,35311,35312,35314,35316],{"class":222,"line":389},[220,35313,402],{"class":264},[220,35315,347],{"class":346},[220,35317,359],{"class":264},[212,35319,35320],{"className":409,"code":35291,"language":411,"meta":178,"style":178},[99,35321,35322,35330,35338],{"__ignoreMap":178},[220,35323,35324,35326,35328],{"class":222,"line":223},[220,35325,343],{"class":264},[220,35327,347],{"class":420},[220,35329,359],{"class":264},[220,35331,35332,35334,35336],{"class":222,"line":179},[220,35333,364],{"class":264},[220,35335,35269],{"class":420},[220,35337,386],{"class":264},[220,35339,35340,35342,35344],{"class":222,"line":389},[220,35341,402],{"class":264},[220,35343,347],{"class":420},[220,35345,359],{"class":264},[212,35347,35348],{"className":2844,"code":35291,"language":2846,"meta":178,"style":178},[99,35349,35350,35358,35366],{"__ignoreMap":178},[220,35351,35352,35354,35356],{"class":222,"line":223},[220,35353,343],{"class":264},[220,35355,347],{"class":420},[220,35357,359],{"class":264},[220,35359,35360,35362,35364],{"class":222,"line":179},[220,35361,364],{"class":264},[220,35363,35269],{"class":420},[220,35365,386],{"class":264},[220,35367,35368,35370,35372],{"class":222,"line":389},[220,35369,402],{"class":264},[220,35371,347],{"class":420},[220,35373,359],{"class":264},[212,35375,35376],{"className":468,"code":35291,"language":469,"meta":178,"style":178},[99,35377,35378,35386,35394],{"__ignoreMap":178},[220,35379,35380,35382,35384],{"class":222,"line":223},[220,35381,343],{"class":264},[220,35383,347],{"class":420},[220,35385,359],{"class":264},[220,35387,35388,35390,35392],{"class":222,"line":179},[220,35389,364],{"class":264},[220,35391,35269],{"class":420},[220,35393,386],{"class":264},[220,35395,35396,35398,35400],{"class":222,"line":389},[220,35397,402],{"class":264},[220,35399,347],{"class":420},[220,35401,359],{"class":264},[212,35403,35405],{"className":251,"code":35404,"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,35406,35407,35417,35421,35435,35439,35448,35452],{"__ignoreMap":178},[220,35408,35409,35411,35413,35415],{"class":222,"line":223},[220,35410,261],{"class":260},[220,35412,10879],{"class":264},[220,35414,268],{"class":260},[220,35416,4007],{"class":230},[220,35418,35419],{"class":222,"line":179},[220,35420,647],{"emptyLinePlaceholder":194},[220,35422,35423,35425,35427,35429,35431,35433],{"class":222,"line":389},[220,35424,1735],{"class":260},[220,35426,1738],{"class":420},[220,35428,1741],{"class":260},[220,35430,1744],{"class":260},[220,35432,1747],{"class":226},[220,35434,1750],{"class":264},[220,35436,35437],{"class":222,"line":399},[220,35438,1765],{"class":264},[220,35440,35441,35443,35446],{"class":222,"line":644},[220,35442,1770],{"class":264},[220,35444,35445],{"class":230},"'BrickPattern'",[220,35447,2465],{"class":264},[220,35449,35450],{"class":222,"line":650},[220,35451,1787],{"class":264},[220,35453,35454],{"class":222,"line":656},[220,35455,1792],{"class":264},[1504,35457,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":35459},[35460,35461],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":35269,"description":35277},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":35468,"title":35469,"body":35470,"category":35738,"componentType":25253,"description":35477,"extension":191,"meta":35739,"navigation":194,"path":35740,"requiresChild":194,"seo":35741,"stem":35742,"__hash__":35743},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":35471,"toc":35734},[35472,35475,35478,35480,35482,35485,35487,35732],[11,35473,35469],{"id":35474},"brightnesscontrast",[15,35476,35477],{},"Adjust brightness and contrast of the image",[31281,35479],{"component":35469},[23,35481,31285],{"id":25903},[31287,35483],{":props":35484},"[{\"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,35486,31293],{"id":31292},[246,35488,35489,35534,35578,35622,35666],{":tabs":1557},[212,35490,35492],{"className":334,"code":35491,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,35493,35494,35502,35510,35518,35526],{"__ignoreMap":178},[220,35495,35496,35498,35500],{"class":222,"line":223},[220,35497,343],{"class":264},[220,35499,347],{"class":346},[220,35501,359],{"class":264},[220,35503,35504,35506,35508],{"class":222,"line":179},[220,35505,364],{"class":264},[220,35507,35469],{"class":346},[220,35509,359],{"class":264},[220,35511,35512,35514,35516],{"class":222,"line":389},[220,35513,2550],{"class":264},[220,35515,2553],{"class":346},[220,35517,386],{"class":264},[220,35519,35520,35522,35524],{"class":222,"line":399},[220,35521,2567],{"class":264},[220,35523,35469],{"class":346},[220,35525,359],{"class":264},[220,35527,35528,35530,35532],{"class":222,"line":644},[220,35529,402],{"class":264},[220,35531,347],{"class":346},[220,35533,359],{"class":264},[212,35535,35536],{"className":409,"code":35491,"language":411,"meta":178,"style":178},[99,35537,35538,35546,35554,35562,35570],{"__ignoreMap":178},[220,35539,35540,35542,35544],{"class":222,"line":223},[220,35541,343],{"class":264},[220,35543,347],{"class":420},[220,35545,359],{"class":264},[220,35547,35548,35550,35552],{"class":222,"line":179},[220,35549,364],{"class":264},[220,35551,35469],{"class":420},[220,35553,359],{"class":264},[220,35555,35556,35558,35560],{"class":222,"line":389},[220,35557,2550],{"class":264},[220,35559,2553],{"class":420},[220,35561,386],{"class":264},[220,35563,35564,35566,35568],{"class":222,"line":399},[220,35565,2567],{"class":264},[220,35567,35469],{"class":420},[220,35569,359],{"class":264},[220,35571,35572,35574,35576],{"class":222,"line":644},[220,35573,402],{"class":264},[220,35575,347],{"class":420},[220,35577,359],{"class":264},[212,35579,35580],{"className":2844,"code":35491,"language":2846,"meta":178,"style":178},[99,35581,35582,35590,35598,35606,35614],{"__ignoreMap":178},[220,35583,35584,35586,35588],{"class":222,"line":223},[220,35585,343],{"class":264},[220,35587,347],{"class":420},[220,35589,359],{"class":264},[220,35591,35592,35594,35596],{"class":222,"line":179},[220,35593,364],{"class":264},[220,35595,35469],{"class":420},[220,35597,359],{"class":264},[220,35599,35600,35602,35604],{"class":222,"line":389},[220,35601,2550],{"class":264},[220,35603,2553],{"class":420},[220,35605,386],{"class":264},[220,35607,35608,35610,35612],{"class":222,"line":399},[220,35609,2567],{"class":264},[220,35611,35469],{"class":420},[220,35613,359],{"class":264},[220,35615,35616,35618,35620],{"class":222,"line":644},[220,35617,402],{"class":264},[220,35619,347],{"class":420},[220,35621,359],{"class":264},[212,35623,35624],{"className":468,"code":35491,"language":469,"meta":178,"style":178},[99,35625,35626,35634,35642,35650,35658],{"__ignoreMap":178},[220,35627,35628,35630,35632],{"class":222,"line":223},[220,35629,343],{"class":264},[220,35631,347],{"class":420},[220,35633,359],{"class":264},[220,35635,35636,35638,35640],{"class":222,"line":179},[220,35637,364],{"class":264},[220,35639,35469],{"class":420},[220,35641,359],{"class":264},[220,35643,35644,35646,35648],{"class":222,"line":389},[220,35645,2550],{"class":264},[220,35647,2553],{"class":420},[220,35649,386],{"class":264},[220,35651,35652,35654,35656],{"class":222,"line":399},[220,35653,2567],{"class":264},[220,35655,35469],{"class":420},[220,35657,359],{"class":264},[220,35659,35660,35662,35664],{"class":222,"line":644},[220,35661,402],{"class":264},[220,35663,347],{"class":420},[220,35665,359],{"class":264},[212,35667,35669],{"className":251,"code":35668,"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,35670,35671,35681,35685,35699,35703,35712,35720,35724,35728],{"__ignoreMap":178},[220,35672,35673,35675,35677,35679],{"class":222,"line":223},[220,35674,261],{"class":260},[220,35676,10879],{"class":264},[220,35678,268],{"class":260},[220,35680,4007],{"class":230},[220,35682,35683],{"class":222,"line":179},[220,35684,647],{"emptyLinePlaceholder":194},[220,35686,35687,35689,35691,35693,35695,35697],{"class":222,"line":389},[220,35688,1735],{"class":260},[220,35690,1738],{"class":420},[220,35692,1741],{"class":260},[220,35694,1744],{"class":260},[220,35696,1747],{"class":226},[220,35698,1750],{"class":264},[220,35700,35701],{"class":222,"line":399},[220,35702,1765],{"class":264},[220,35704,35705,35707,35710],{"class":222,"line":644},[220,35706,1770],{"class":264},[220,35708,35709],{"class":230},"'BrightnessContrast'",[220,35711,6375],{"class":264},[220,35713,35714,35716,35718],{"class":222,"line":650},[220,35715,6380],{"class":264},[220,35717,3206],{"class":230},[220,35719,2465],{"class":264},[220,35721,35722],{"class":222,"line":656},[220,35723,6397],{"class":264},[220,35725,35726],{"class":222,"line":673},[220,35727,1787],{"class":264},[220,35729,35730],{"class":222,"line":682},[220,35731,1792],{"class":264},[1504,35733,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":35735},[35736,35737],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":35469,"description":35477},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":35745,"title":35746,"body":35747,"category":35939,"componentType":25247,"description":35754,"extension":191,"meta":35940,"navigation":194,"path":35941,"requiresChild":31900,"seo":35942,"stem":35943,"__hash__":35944},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":35748,"toc":35935},[35749,35752,35755,35757,35759,35762,35764,35933],[11,35750,35746],{"id":35751},"brushedmetal",[15,35753,35754],{},"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",[31281,35756],{"component":35746},[23,35758,31285],{"id":25903},[31287,35760],{":props":35761},"[{\"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,35763,31293],{"id":31292},[246,35765,35766,35795,35823,35851,35879],{":tabs":1557},[212,35767,35769],{"className":334,"code":35768,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,35770,35771,35779,35787],{"__ignoreMap":178},[220,35772,35773,35775,35777],{"class":222,"line":223},[220,35774,343],{"class":264},[220,35776,347],{"class":346},[220,35778,359],{"class":264},[220,35780,35781,35783,35785],{"class":222,"line":179},[220,35782,364],{"class":264},[220,35784,35746],{"class":346},[220,35786,386],{"class":264},[220,35788,35789,35791,35793],{"class":222,"line":389},[220,35790,402],{"class":264},[220,35792,347],{"class":346},[220,35794,359],{"class":264},[212,35796,35797],{"className":409,"code":35768,"language":411,"meta":178,"style":178},[99,35798,35799,35807,35815],{"__ignoreMap":178},[220,35800,35801,35803,35805],{"class":222,"line":223},[220,35802,343],{"class":264},[220,35804,347],{"class":420},[220,35806,359],{"class":264},[220,35808,35809,35811,35813],{"class":222,"line":179},[220,35810,364],{"class":264},[220,35812,35746],{"class":420},[220,35814,386],{"class":264},[220,35816,35817,35819,35821],{"class":222,"line":389},[220,35818,402],{"class":264},[220,35820,347],{"class":420},[220,35822,359],{"class":264},[212,35824,35825],{"className":2844,"code":35768,"language":2846,"meta":178,"style":178},[99,35826,35827,35835,35843],{"__ignoreMap":178},[220,35828,35829,35831,35833],{"class":222,"line":223},[220,35830,343],{"class":264},[220,35832,347],{"class":420},[220,35834,359],{"class":264},[220,35836,35837,35839,35841],{"class":222,"line":179},[220,35838,364],{"class":264},[220,35840,35746],{"class":420},[220,35842,386],{"class":264},[220,35844,35845,35847,35849],{"class":222,"line":389},[220,35846,402],{"class":264},[220,35848,347],{"class":420},[220,35850,359],{"class":264},[212,35852,35853],{"className":468,"code":35768,"language":469,"meta":178,"style":178},[99,35854,35855,35863,35871],{"__ignoreMap":178},[220,35856,35857,35859,35861],{"class":222,"line":223},[220,35858,343],{"class":264},[220,35860,347],{"class":420},[220,35862,359],{"class":264},[220,35864,35865,35867,35869],{"class":222,"line":179},[220,35866,364],{"class":264},[220,35868,35746],{"class":420},[220,35870,386],{"class":264},[220,35872,35873,35875,35877],{"class":222,"line":389},[220,35874,402],{"class":264},[220,35876,347],{"class":420},[220,35878,359],{"class":264},[212,35880,35882],{"className":251,"code":35881,"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,35883,35884,35894,35898,35912,35916,35925,35929],{"__ignoreMap":178},[220,35885,35886,35888,35890,35892],{"class":222,"line":223},[220,35887,261],{"class":260},[220,35889,10879],{"class":264},[220,35891,268],{"class":260},[220,35893,4007],{"class":230},[220,35895,35896],{"class":222,"line":179},[220,35897,647],{"emptyLinePlaceholder":194},[220,35899,35900,35902,35904,35906,35908,35910],{"class":222,"line":389},[220,35901,1735],{"class":260},[220,35903,1738],{"class":420},[220,35905,1741],{"class":260},[220,35907,1744],{"class":260},[220,35909,1747],{"class":226},[220,35911,1750],{"class":264},[220,35913,35914],{"class":222,"line":399},[220,35915,1765],{"class":264},[220,35917,35918,35920,35923],{"class":222,"line":644},[220,35919,1770],{"class":264},[220,35921,35922],{"class":230},"'BrushedMetal'",[220,35924,2465],{"class":264},[220,35926,35927],{"class":222,"line":650},[220,35928,1787],{"class":264},[220,35930,35931],{"class":222,"line":656},[220,35932,1792],{"class":264},[1504,35934,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":35936},[35937,35938],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":35746,"description":35754},"docs\u002Fcomponents\u002FBrushedMetal","X6ouSbZ77zKffUpJ7quDAdvuyIaM6zcwqjSynJdeoHc",{"id":35946,"title":35947,"body":35948,"category":32766,"componentType":25253,"description":35955,"extension":191,"meta":36273,"navigation":194,"path":36274,"requiresChild":194,"seo":36275,"stem":36276,"__hash__":36277},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":35949,"toc":36269},[35950,35953,35956,35958,35960,35963,35965,36267],[11,35951,35947],{"id":35952},"bulge",[15,35954,35955],{},"Magnify or pinch content around a center point",[31281,35957],{"component":35947},[23,35959,31285],{"id":25903},[31287,35961],{":props":35962},"[{\"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,35964,31293],{"id":31292},[246,35966,35967,36024,36083,36139,36197],{":tabs":1557},[212,35968,35970],{"className":334,"code":35969,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,35971,35972,35980,35987,35996,36000,36008,36016],{"__ignoreMap":178},[220,35973,35974,35976,35978],{"class":222,"line":223},[220,35975,343],{"class":264},[220,35977,347],{"class":346},[220,35979,359],{"class":264},[220,35981,35982,35984],{"class":222,"line":179},[220,35983,364],{"class":264},[220,35985,35986],{"class":346},"Bulge\n",[220,35988,35989,35991,35993],{"class":222,"line":389},[220,35990,16772],{"class":226},[220,35992,353],{"class":264},[220,35994,35995],{"class":230},"\"1\"\n",[220,35997,35998],{"class":222,"line":399},[220,35999,31329],{"class":264},[220,36001,36002,36004,36006],{"class":222,"line":644},[220,36003,2550],{"class":264},[220,36005,2553],{"class":346},[220,36007,386],{"class":264},[220,36009,36010,36012,36014],{"class":222,"line":650},[220,36011,2567],{"class":264},[220,36013,35947],{"class":346},[220,36015,359],{"class":264},[220,36017,36018,36020,36022],{"class":222,"line":656},[220,36019,402],{"class":264},[220,36021,347],{"class":346},[220,36023,359],{"class":264},[212,36025,36027],{"className":409,"code":36026,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36028,36029,36037,36043,36055,36059,36067,36075],{"__ignoreMap":178},[220,36030,36031,36033,36035],{"class":222,"line":223},[220,36032,343],{"class":264},[220,36034,347],{"class":420},[220,36036,359],{"class":264},[220,36038,36039,36041],{"class":222,"line":179},[220,36040,364],{"class":264},[220,36042,35986],{"class":420},[220,36044,36045,36047,36049,36051,36053],{"class":222,"line":389},[220,36046,9012],{"class":226},[220,36048,353],{"class":260},[220,36050,743],{"class":264},[220,36052,8043],{"class":420},[220,36054,749],{"class":264},[220,36056,36057],{"class":222,"line":399},[220,36058,31329],{"class":264},[220,36060,36061,36063,36065],{"class":222,"line":644},[220,36062,2550],{"class":264},[220,36064,2553],{"class":420},[220,36066,386],{"class":264},[220,36068,36069,36071,36073],{"class":222,"line":650},[220,36070,2567],{"class":264},[220,36072,35947],{"class":420},[220,36074,359],{"class":264},[220,36076,36077,36079,36081],{"class":222,"line":656},[220,36078,402],{"class":264},[220,36080,347],{"class":420},[220,36082,359],{"class":264},[212,36084,36085],{"className":2844,"code":36026,"language":2846,"meta":178,"style":178},[99,36086,36087,36095,36101,36111,36115,36123,36131],{"__ignoreMap":178},[220,36088,36089,36091,36093],{"class":222,"line":223},[220,36090,343],{"class":264},[220,36092,347],{"class":420},[220,36094,359],{"class":264},[220,36096,36097,36099],{"class":222,"line":179},[220,36098,364],{"class":264},[220,36100,35986],{"class":420},[220,36102,36103,36105,36107,36109],{"class":222,"line":389},[220,36104,9012],{"class":226},[220,36106,29241],{"class":264},[220,36108,8043],{"class":420},[220,36110,749],{"class":264},[220,36112,36113],{"class":222,"line":399},[220,36114,31329],{"class":264},[220,36116,36117,36119,36121],{"class":222,"line":644},[220,36118,2550],{"class":264},[220,36120,2553],{"class":420},[220,36122,386],{"class":264},[220,36124,36125,36127,36129],{"class":222,"line":650},[220,36126,2567],{"class":264},[220,36128,35947],{"class":420},[220,36130,359],{"class":264},[220,36132,36133,36135,36137],{"class":222,"line":656},[220,36134,402],{"class":264},[220,36136,347],{"class":420},[220,36138,359],{"class":264},[212,36140,36141],{"className":468,"code":36026,"language":469,"meta":178,"style":178},[99,36142,36143,36151,36157,36169,36173,36181,36189],{"__ignoreMap":178},[220,36144,36145,36147,36149],{"class":222,"line":223},[220,36146,343],{"class":264},[220,36148,347],{"class":420},[220,36150,359],{"class":264},[220,36152,36153,36155],{"class":222,"line":179},[220,36154,364],{"class":264},[220,36156,35986],{"class":420},[220,36158,36159,36161,36163,36165,36167],{"class":222,"line":389},[220,36160,9012],{"class":226},[220,36162,353],{"class":260},[220,36164,743],{"class":264},[220,36166,8043],{"class":420},[220,36168,749],{"class":264},[220,36170,36171],{"class":222,"line":399},[220,36172,31329],{"class":264},[220,36174,36175,36177,36179],{"class":222,"line":644},[220,36176,2550],{"class":264},[220,36178,2553],{"class":420},[220,36180,386],{"class":264},[220,36182,36183,36185,36187],{"class":222,"line":650},[220,36184,2567],{"class":264},[220,36186,35947],{"class":420},[220,36188,359],{"class":264},[220,36190,36191,36193,36195],{"class":222,"line":656},[220,36192,402],{"class":264},[220,36194,347],{"class":420},[220,36196,359],{"class":264},[212,36198,36200],{"className":251,"code":36199,"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,36201,36202,36212,36216,36230,36234,36247,36255,36259,36263],{"__ignoreMap":178},[220,36203,36204,36206,36208,36210],{"class":222,"line":223},[220,36205,261],{"class":260},[220,36207,10879],{"class":264},[220,36209,268],{"class":260},[220,36211,4007],{"class":230},[220,36213,36214],{"class":222,"line":179},[220,36215,647],{"emptyLinePlaceholder":194},[220,36217,36218,36220,36222,36224,36226,36228],{"class":222,"line":389},[220,36219,1735],{"class":260},[220,36221,1738],{"class":420},[220,36223,1741],{"class":260},[220,36225,1744],{"class":260},[220,36227,1747],{"class":226},[220,36229,1750],{"class":264},[220,36231,36232],{"class":222,"line":399},[220,36233,1765],{"class":264},[220,36235,36236,36238,36241,36243,36245],{"class":222,"line":644},[220,36237,1770],{"class":264},[220,36239,36240],{"class":230},"'Bulge'",[220,36242,6907],{"class":264},[220,36244,8043],{"class":420},[220,36246,6912],{"class":264},[220,36248,36249,36251,36253],{"class":222,"line":650},[220,36250,6380],{"class":264},[220,36252,3206],{"class":230},[220,36254,2465],{"class":264},[220,36256,36257],{"class":222,"line":656},[220,36258,6397],{"class":264},[220,36260,36261],{"class":222,"line":673},[220,36262,1787],{"class":264},[220,36264,36265],{"class":222,"line":682},[220,36266,1792],{"class":264},[1504,36268,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36270},[36271,36272],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":35947,"description":35955},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":36279,"title":36280,"body":36281,"category":32176,"componentType":25253,"description":36288,"extension":191,"meta":36549,"navigation":194,"path":36550,"requiresChild":194,"seo":36551,"stem":36552,"__hash__":36553},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":36282,"toc":36545},[36283,36286,36289,36291,36293,36296,36298,36543],[11,36284,36280],{"id":36285},"crtscreen",[15,36287,36288],{},"Retro CRT monitor simulation with scanlines",[31281,36290],{"component":36280},[23,36292,31285],{"id":25903},[31287,36294],{":props":36295},"[{\"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,36297,31293],{"id":31292},[246,36299,36300,36345,36389,36433,36477],{":tabs":1557},[212,36301,36303],{"className":334,"code":36302,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,36304,36305,36313,36321,36329,36337],{"__ignoreMap":178},[220,36306,36307,36309,36311],{"class":222,"line":223},[220,36308,343],{"class":264},[220,36310,347],{"class":346},[220,36312,359],{"class":264},[220,36314,36315,36317,36319],{"class":222,"line":179},[220,36316,364],{"class":264},[220,36318,36280],{"class":346},[220,36320,359],{"class":264},[220,36322,36323,36325,36327],{"class":222,"line":389},[220,36324,2550],{"class":264},[220,36326,2553],{"class":346},[220,36328,386],{"class":264},[220,36330,36331,36333,36335],{"class":222,"line":399},[220,36332,2567],{"class":264},[220,36334,36280],{"class":346},[220,36336,359],{"class":264},[220,36338,36339,36341,36343],{"class":222,"line":644},[220,36340,402],{"class":264},[220,36342,347],{"class":346},[220,36344,359],{"class":264},[212,36346,36347],{"className":409,"code":36302,"language":411,"meta":178,"style":178},[99,36348,36349,36357,36365,36373,36381],{"__ignoreMap":178},[220,36350,36351,36353,36355],{"class":222,"line":223},[220,36352,343],{"class":264},[220,36354,347],{"class":420},[220,36356,359],{"class":264},[220,36358,36359,36361,36363],{"class":222,"line":179},[220,36360,364],{"class":264},[220,36362,36280],{"class":420},[220,36364,359],{"class":264},[220,36366,36367,36369,36371],{"class":222,"line":389},[220,36368,2550],{"class":264},[220,36370,2553],{"class":420},[220,36372,386],{"class":264},[220,36374,36375,36377,36379],{"class":222,"line":399},[220,36376,2567],{"class":264},[220,36378,36280],{"class":420},[220,36380,359],{"class":264},[220,36382,36383,36385,36387],{"class":222,"line":644},[220,36384,402],{"class":264},[220,36386,347],{"class":420},[220,36388,359],{"class":264},[212,36390,36391],{"className":2844,"code":36302,"language":2846,"meta":178,"style":178},[99,36392,36393,36401,36409,36417,36425],{"__ignoreMap":178},[220,36394,36395,36397,36399],{"class":222,"line":223},[220,36396,343],{"class":264},[220,36398,347],{"class":420},[220,36400,359],{"class":264},[220,36402,36403,36405,36407],{"class":222,"line":179},[220,36404,364],{"class":264},[220,36406,36280],{"class":420},[220,36408,359],{"class":264},[220,36410,36411,36413,36415],{"class":222,"line":389},[220,36412,2550],{"class":264},[220,36414,2553],{"class":420},[220,36416,386],{"class":264},[220,36418,36419,36421,36423],{"class":222,"line":399},[220,36420,2567],{"class":264},[220,36422,36280],{"class":420},[220,36424,359],{"class":264},[220,36426,36427,36429,36431],{"class":222,"line":644},[220,36428,402],{"class":264},[220,36430,347],{"class":420},[220,36432,359],{"class":264},[212,36434,36435],{"className":468,"code":36302,"language":469,"meta":178,"style":178},[99,36436,36437,36445,36453,36461,36469],{"__ignoreMap":178},[220,36438,36439,36441,36443],{"class":222,"line":223},[220,36440,343],{"class":264},[220,36442,347],{"class":420},[220,36444,359],{"class":264},[220,36446,36447,36449,36451],{"class":222,"line":179},[220,36448,364],{"class":264},[220,36450,36280],{"class":420},[220,36452,359],{"class":264},[220,36454,36455,36457,36459],{"class":222,"line":389},[220,36456,2550],{"class":264},[220,36458,2553],{"class":420},[220,36460,386],{"class":264},[220,36462,36463,36465,36467],{"class":222,"line":399},[220,36464,2567],{"class":264},[220,36466,36280],{"class":420},[220,36468,359],{"class":264},[220,36470,36471,36473,36475],{"class":222,"line":644},[220,36472,402],{"class":264},[220,36474,347],{"class":420},[220,36476,359],{"class":264},[212,36478,36480],{"className":251,"code":36479,"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,36481,36482,36492,36496,36510,36514,36523,36531,36535,36539],{"__ignoreMap":178},[220,36483,36484,36486,36488,36490],{"class":222,"line":223},[220,36485,261],{"class":260},[220,36487,10879],{"class":264},[220,36489,268],{"class":260},[220,36491,4007],{"class":230},[220,36493,36494],{"class":222,"line":179},[220,36495,647],{"emptyLinePlaceholder":194},[220,36497,36498,36500,36502,36504,36506,36508],{"class":222,"line":389},[220,36499,1735],{"class":260},[220,36501,1738],{"class":420},[220,36503,1741],{"class":260},[220,36505,1744],{"class":260},[220,36507,1747],{"class":226},[220,36509,1750],{"class":264},[220,36511,36512],{"class":222,"line":399},[220,36513,1765],{"class":264},[220,36515,36516,36518,36521],{"class":222,"line":644},[220,36517,1770],{"class":264},[220,36519,36520],{"class":230},"'CRTScreen'",[220,36522,6375],{"class":264},[220,36524,36525,36527,36529],{"class":222,"line":650},[220,36526,6380],{"class":264},[220,36528,3206],{"class":230},[220,36530,2465],{"class":264},[220,36532,36533],{"class":222,"line":656},[220,36534,6397],{"class":264},[220,36536,36537],{"class":222,"line":673},[220,36538,1787],{"class":264},[220,36540,36541],{"class":222,"line":682},[220,36542,1792],{"class":264},[1504,36544,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":36546},[36547,36548],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":36280,"description":36288},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":36555,"title":36556,"body":36557,"category":35939,"componentType":25247,"description":36564,"extension":191,"meta":36749,"navigation":194,"path":36750,"requiresChild":31900,"seo":36751,"stem":36752,"__hash__":36753},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":36558,"toc":36745},[36559,36562,36565,36567,36569,36572,36574,36743],[11,36560,36556],{"id":36561},"carbonfiber",[15,36563,36564],{},"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.",[31281,36566],{"component":36556},[23,36568,31285],{"id":25903},[31287,36570],{":props":36571},"[{\"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,36573,31293],{"id":31292},[246,36575,36576,36605,36633,36661,36689],{":tabs":1557},[212,36577,36579],{"className":334,"code":36578,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,36580,36581,36589,36597],{"__ignoreMap":178},[220,36582,36583,36585,36587],{"class":222,"line":223},[220,36584,343],{"class":264},[220,36586,347],{"class":346},[220,36588,359],{"class":264},[220,36590,36591,36593,36595],{"class":222,"line":179},[220,36592,364],{"class":264},[220,36594,36556],{"class":346},[220,36596,386],{"class":264},[220,36598,36599,36601,36603],{"class":222,"line":389},[220,36600,402],{"class":264},[220,36602,347],{"class":346},[220,36604,359],{"class":264},[212,36606,36607],{"className":409,"code":36578,"language":411,"meta":178,"style":178},[99,36608,36609,36617,36625],{"__ignoreMap":178},[220,36610,36611,36613,36615],{"class":222,"line":223},[220,36612,343],{"class":264},[220,36614,347],{"class":420},[220,36616,359],{"class":264},[220,36618,36619,36621,36623],{"class":222,"line":179},[220,36620,364],{"class":264},[220,36622,36556],{"class":420},[220,36624,386],{"class":264},[220,36626,36627,36629,36631],{"class":222,"line":389},[220,36628,402],{"class":264},[220,36630,347],{"class":420},[220,36632,359],{"class":264},[212,36634,36635],{"className":2844,"code":36578,"language":2846,"meta":178,"style":178},[99,36636,36637,36645,36653],{"__ignoreMap":178},[220,36638,36639,36641,36643],{"class":222,"line":223},[220,36640,343],{"class":264},[220,36642,347],{"class":420},[220,36644,359],{"class":264},[220,36646,36647,36649,36651],{"class":222,"line":179},[220,36648,364],{"class":264},[220,36650,36556],{"class":420},[220,36652,386],{"class":264},[220,36654,36655,36657,36659],{"class":222,"line":389},[220,36656,402],{"class":264},[220,36658,347],{"class":420},[220,36660,359],{"class":264},[212,36662,36663],{"className":468,"code":36578,"language":469,"meta":178,"style":178},[99,36664,36665,36673,36681],{"__ignoreMap":178},[220,36666,36667,36669,36671],{"class":222,"line":223},[220,36668,343],{"class":264},[220,36670,347],{"class":420},[220,36672,359],{"class":264},[220,36674,36675,36677,36679],{"class":222,"line":179},[220,36676,364],{"class":264},[220,36678,36556],{"class":420},[220,36680,386],{"class":264},[220,36682,36683,36685,36687],{"class":222,"line":389},[220,36684,402],{"class":264},[220,36686,347],{"class":420},[220,36688,359],{"class":264},[212,36690,36692],{"className":251,"code":36691,"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,36693,36694,36704,36708,36722,36726,36735,36739],{"__ignoreMap":178},[220,36695,36696,36698,36700,36702],{"class":222,"line":223},[220,36697,261],{"class":260},[220,36699,10879],{"class":264},[220,36701,268],{"class":260},[220,36703,4007],{"class":230},[220,36705,36706],{"class":222,"line":179},[220,36707,647],{"emptyLinePlaceholder":194},[220,36709,36710,36712,36714,36716,36718,36720],{"class":222,"line":389},[220,36711,1735],{"class":260},[220,36713,1738],{"class":420},[220,36715,1741],{"class":260},[220,36717,1744],{"class":260},[220,36719,1747],{"class":226},[220,36721,1750],{"class":264},[220,36723,36724],{"class":222,"line":399},[220,36725,1765],{"class":264},[220,36727,36728,36730,36733],{"class":222,"line":644},[220,36729,1770],{"class":264},[220,36731,36732],{"class":230},"'CarbonFiber'",[220,36734,2465],{"class":264},[220,36736,36737],{"class":222,"line":650},[220,36738,1787],{"class":264},[220,36740,36741],{"class":222,"line":656},[220,36742,1792],{"class":264},[1504,36744,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":36746},[36747,36748],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":36556,"description":36564},"docs\u002Fcomponents\u002FCarbonFiber","Vug8R9Ib1Nal1wvFebaB3aW1EfJ6nVWs50q_JfYhFoA",{"id":36755,"title":36756,"body":36757,"category":32176,"componentType":25253,"description":36764,"extension":191,"meta":37025,"navigation":194,"path":37026,"requiresChild":194,"seo":37027,"stem":37028,"__hash__":37029},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":36758,"toc":37021},[36759,36762,36765,36767,36769,36772,36774,37019],[11,36760,36756],{"id":36761},"chalkboard",[15,36763,36764],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[31281,36766],{"component":36756},[23,36768,31285],{"id":25903},[31287,36770],{":props":36771},"[{\"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,36773,31293],{"id":31292},[246,36775,36776,36821,36865,36909,36953],{":tabs":1557},[212,36777,36779],{"className":334,"code":36778,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,36780,36781,36789,36797,36805,36813],{"__ignoreMap":178},[220,36782,36783,36785,36787],{"class":222,"line":223},[220,36784,343],{"class":264},[220,36786,347],{"class":346},[220,36788,359],{"class":264},[220,36790,36791,36793,36795],{"class":222,"line":179},[220,36792,364],{"class":264},[220,36794,36756],{"class":346},[220,36796,359],{"class":264},[220,36798,36799,36801,36803],{"class":222,"line":389},[220,36800,2550],{"class":264},[220,36802,2553],{"class":346},[220,36804,386],{"class":264},[220,36806,36807,36809,36811],{"class":222,"line":399},[220,36808,2567],{"class":264},[220,36810,36756],{"class":346},[220,36812,359],{"class":264},[220,36814,36815,36817,36819],{"class":222,"line":644},[220,36816,402],{"class":264},[220,36818,347],{"class":346},[220,36820,359],{"class":264},[212,36822,36823],{"className":409,"code":36778,"language":411,"meta":178,"style":178},[99,36824,36825,36833,36841,36849,36857],{"__ignoreMap":178},[220,36826,36827,36829,36831],{"class":222,"line":223},[220,36828,343],{"class":264},[220,36830,347],{"class":420},[220,36832,359],{"class":264},[220,36834,36835,36837,36839],{"class":222,"line":179},[220,36836,364],{"class":264},[220,36838,36756],{"class":420},[220,36840,359],{"class":264},[220,36842,36843,36845,36847],{"class":222,"line":389},[220,36844,2550],{"class":264},[220,36846,2553],{"class":420},[220,36848,386],{"class":264},[220,36850,36851,36853,36855],{"class":222,"line":399},[220,36852,2567],{"class":264},[220,36854,36756],{"class":420},[220,36856,359],{"class":264},[220,36858,36859,36861,36863],{"class":222,"line":644},[220,36860,402],{"class":264},[220,36862,347],{"class":420},[220,36864,359],{"class":264},[212,36866,36867],{"className":2844,"code":36778,"language":2846,"meta":178,"style":178},[99,36868,36869,36877,36885,36893,36901],{"__ignoreMap":178},[220,36870,36871,36873,36875],{"class":222,"line":223},[220,36872,343],{"class":264},[220,36874,347],{"class":420},[220,36876,359],{"class":264},[220,36878,36879,36881,36883],{"class":222,"line":179},[220,36880,364],{"class":264},[220,36882,36756],{"class":420},[220,36884,359],{"class":264},[220,36886,36887,36889,36891],{"class":222,"line":389},[220,36888,2550],{"class":264},[220,36890,2553],{"class":420},[220,36892,386],{"class":264},[220,36894,36895,36897,36899],{"class":222,"line":399},[220,36896,2567],{"class":264},[220,36898,36756],{"class":420},[220,36900,359],{"class":264},[220,36902,36903,36905,36907],{"class":222,"line":644},[220,36904,402],{"class":264},[220,36906,347],{"class":420},[220,36908,359],{"class":264},[212,36910,36911],{"className":468,"code":36778,"language":469,"meta":178,"style":178},[99,36912,36913,36921,36929,36937,36945],{"__ignoreMap":178},[220,36914,36915,36917,36919],{"class":222,"line":223},[220,36916,343],{"class":264},[220,36918,347],{"class":420},[220,36920,359],{"class":264},[220,36922,36923,36925,36927],{"class":222,"line":179},[220,36924,364],{"class":264},[220,36926,36756],{"class":420},[220,36928,359],{"class":264},[220,36930,36931,36933,36935],{"class":222,"line":389},[220,36932,2550],{"class":264},[220,36934,2553],{"class":420},[220,36936,386],{"class":264},[220,36938,36939,36941,36943],{"class":222,"line":399},[220,36940,2567],{"class":264},[220,36942,36756],{"class":420},[220,36944,359],{"class":264},[220,36946,36947,36949,36951],{"class":222,"line":644},[220,36948,402],{"class":264},[220,36950,347],{"class":420},[220,36952,359],{"class":264},[212,36954,36956],{"className":251,"code":36955,"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,36957,36958,36968,36972,36986,36990,36999,37007,37011,37015],{"__ignoreMap":178},[220,36959,36960,36962,36964,36966],{"class":222,"line":223},[220,36961,261],{"class":260},[220,36963,10879],{"class":264},[220,36965,268],{"class":260},[220,36967,4007],{"class":230},[220,36969,36970],{"class":222,"line":179},[220,36971,647],{"emptyLinePlaceholder":194},[220,36973,36974,36976,36978,36980,36982,36984],{"class":222,"line":389},[220,36975,1735],{"class":260},[220,36977,1738],{"class":420},[220,36979,1741],{"class":260},[220,36981,1744],{"class":260},[220,36983,1747],{"class":226},[220,36985,1750],{"class":264},[220,36987,36988],{"class":222,"line":399},[220,36989,1765],{"class":264},[220,36991,36992,36994,36997],{"class":222,"line":644},[220,36993,1770],{"class":264},[220,36995,36996],{"class":230},"'Chalkboard'",[220,36998,6375],{"class":264},[220,37000,37001,37003,37005],{"class":222,"line":650},[220,37002,6380],{"class":264},[220,37004,3206],{"class":230},[220,37006,2465],{"class":264},[220,37008,37009],{"class":222,"line":656},[220,37010,6397],{"class":264},[220,37012,37013],{"class":222,"line":673},[220,37014,1787],{"class":264},[220,37016,37017],{"class":222,"line":682},[220,37018,1792],{"class":264},[1504,37020,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":37022},[37023,37024],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":36756,"description":36764},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":37031,"title":37032,"body":37033,"category":31604,"componentType":25253,"description":37040,"extension":191,"meta":37301,"navigation":194,"path":37302,"requiresChild":194,"seo":37303,"stem":37304,"__hash__":37305},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":37034,"toc":37297},[37035,37038,37041,37043,37045,37048,37050,37295],[11,37036,37032],{"id":37037},"channelblur",[15,37039,37040],{},"Independent blur for red, green, and blue channels",[31281,37042],{"component":37032},[23,37044,31285],{"id":25903},[31287,37046],{":props":37047},"[{\"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,37049,31293],{"id":31292},[246,37051,37052,37097,37141,37185,37229],{":tabs":1557},[212,37053,37055],{"className":334,"code":37054,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,37056,37057,37065,37073,37081,37089],{"__ignoreMap":178},[220,37058,37059,37061,37063],{"class":222,"line":223},[220,37060,343],{"class":264},[220,37062,347],{"class":346},[220,37064,359],{"class":264},[220,37066,37067,37069,37071],{"class":222,"line":179},[220,37068,364],{"class":264},[220,37070,37032],{"class":346},[220,37072,359],{"class":264},[220,37074,37075,37077,37079],{"class":222,"line":389},[220,37076,2550],{"class":264},[220,37078,2553],{"class":346},[220,37080,386],{"class":264},[220,37082,37083,37085,37087],{"class":222,"line":399},[220,37084,2567],{"class":264},[220,37086,37032],{"class":346},[220,37088,359],{"class":264},[220,37090,37091,37093,37095],{"class":222,"line":644},[220,37092,402],{"class":264},[220,37094,347],{"class":346},[220,37096,359],{"class":264},[212,37098,37099],{"className":409,"code":37054,"language":411,"meta":178,"style":178},[99,37100,37101,37109,37117,37125,37133],{"__ignoreMap":178},[220,37102,37103,37105,37107],{"class":222,"line":223},[220,37104,343],{"class":264},[220,37106,347],{"class":420},[220,37108,359],{"class":264},[220,37110,37111,37113,37115],{"class":222,"line":179},[220,37112,364],{"class":264},[220,37114,37032],{"class":420},[220,37116,359],{"class":264},[220,37118,37119,37121,37123],{"class":222,"line":389},[220,37120,2550],{"class":264},[220,37122,2553],{"class":420},[220,37124,386],{"class":264},[220,37126,37127,37129,37131],{"class":222,"line":399},[220,37128,2567],{"class":264},[220,37130,37032],{"class":420},[220,37132,359],{"class":264},[220,37134,37135,37137,37139],{"class":222,"line":644},[220,37136,402],{"class":264},[220,37138,347],{"class":420},[220,37140,359],{"class":264},[212,37142,37143],{"className":2844,"code":37054,"language":2846,"meta":178,"style":178},[99,37144,37145,37153,37161,37169,37177],{"__ignoreMap":178},[220,37146,37147,37149,37151],{"class":222,"line":223},[220,37148,343],{"class":264},[220,37150,347],{"class":420},[220,37152,359],{"class":264},[220,37154,37155,37157,37159],{"class":222,"line":179},[220,37156,364],{"class":264},[220,37158,37032],{"class":420},[220,37160,359],{"class":264},[220,37162,37163,37165,37167],{"class":222,"line":389},[220,37164,2550],{"class":264},[220,37166,2553],{"class":420},[220,37168,386],{"class":264},[220,37170,37171,37173,37175],{"class":222,"line":399},[220,37172,2567],{"class":264},[220,37174,37032],{"class":420},[220,37176,359],{"class":264},[220,37178,37179,37181,37183],{"class":222,"line":644},[220,37180,402],{"class":264},[220,37182,347],{"class":420},[220,37184,359],{"class":264},[212,37186,37187],{"className":468,"code":37054,"language":469,"meta":178,"style":178},[99,37188,37189,37197,37205,37213,37221],{"__ignoreMap":178},[220,37190,37191,37193,37195],{"class":222,"line":223},[220,37192,343],{"class":264},[220,37194,347],{"class":420},[220,37196,359],{"class":264},[220,37198,37199,37201,37203],{"class":222,"line":179},[220,37200,364],{"class":264},[220,37202,37032],{"class":420},[220,37204,359],{"class":264},[220,37206,37207,37209,37211],{"class":222,"line":389},[220,37208,2550],{"class":264},[220,37210,2553],{"class":420},[220,37212,386],{"class":264},[220,37214,37215,37217,37219],{"class":222,"line":399},[220,37216,2567],{"class":264},[220,37218,37032],{"class":420},[220,37220,359],{"class":264},[220,37222,37223,37225,37227],{"class":222,"line":644},[220,37224,402],{"class":264},[220,37226,347],{"class":420},[220,37228,359],{"class":264},[212,37230,37232],{"className":251,"code":37231,"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,37233,37234,37244,37248,37262,37266,37275,37283,37287,37291],{"__ignoreMap":178},[220,37235,37236,37238,37240,37242],{"class":222,"line":223},[220,37237,261],{"class":260},[220,37239,10879],{"class":264},[220,37241,268],{"class":260},[220,37243,4007],{"class":230},[220,37245,37246],{"class":222,"line":179},[220,37247,647],{"emptyLinePlaceholder":194},[220,37249,37250,37252,37254,37256,37258,37260],{"class":222,"line":389},[220,37251,1735],{"class":260},[220,37253,1738],{"class":420},[220,37255,1741],{"class":260},[220,37257,1744],{"class":260},[220,37259,1747],{"class":226},[220,37261,1750],{"class":264},[220,37263,37264],{"class":222,"line":399},[220,37265,1765],{"class":264},[220,37267,37268,37270,37273],{"class":222,"line":644},[220,37269,1770],{"class":264},[220,37271,37272],{"class":230},"'ChannelBlur'",[220,37274,6375],{"class":264},[220,37276,37277,37279,37281],{"class":222,"line":650},[220,37278,6380],{"class":264},[220,37280,3206],{"class":230},[220,37282,2465],{"class":264},[220,37284,37285],{"class":222,"line":656},[220,37286,6397],{"class":264},[220,37288,37289],{"class":222,"line":673},[220,37290,1787],{"class":264},[220,37292,37293],{"class":222,"line":682},[220,37294,1792],{"class":264},[1504,37296,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":37298},[37299,37300],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":37032,"description":37040},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":37307,"title":37308,"body":37309,"category":33043,"componentType":25253,"description":37316,"extension":191,"meta":37577,"navigation":194,"path":37578,"requiresChild":194,"seo":37579,"stem":37580,"__hash__":37581},"components\u002Fdocs\u002Fcomponents\u002FCheckerWipe.md","CheckerWipe",{"type":8,"value":37310,"toc":37573},[37311,37314,37317,37319,37321,37324,37326,37571],[11,37312,37308],{"id":37313},"checkerwipe",[15,37315,37316],{},"Wipe the content away as a checkerboard of fading squares",[31281,37318],{"component":37308},[23,37320,31285],{"id":25903},[31287,37322],{":props":37323},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"blockSize\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Size of each square as a fraction of the frame width\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each square fades out (0 = hard-edged squares)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the squares wipe in\"}]",[23,37325,31293],{"id":31292},[246,37327,37328,37373,37417,37461,37505],{":tabs":1557},[212,37329,37331],{"className":334,"code":37330,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerWipe>\n \u003CCircle \u002F>\n \u003C\u002FCheckerWipe>\n\u003C\u002FShader>\n",[99,37332,37333,37341,37349,37357,37365],{"__ignoreMap":178},[220,37334,37335,37337,37339],{"class":222,"line":223},[220,37336,343],{"class":264},[220,37338,347],{"class":346},[220,37340,359],{"class":264},[220,37342,37343,37345,37347],{"class":222,"line":179},[220,37344,364],{"class":264},[220,37346,37308],{"class":346},[220,37348,359],{"class":264},[220,37350,37351,37353,37355],{"class":222,"line":389},[220,37352,2550],{"class":264},[220,37354,2553],{"class":346},[220,37356,386],{"class":264},[220,37358,37359,37361,37363],{"class":222,"line":399},[220,37360,2567],{"class":264},[220,37362,37308],{"class":346},[220,37364,359],{"class":264},[220,37366,37367,37369,37371],{"class":222,"line":644},[220,37368,402],{"class":264},[220,37370,347],{"class":346},[220,37372,359],{"class":264},[212,37374,37375],{"className":409,"code":37330,"language":411,"meta":178,"style":178},[99,37376,37377,37385,37393,37401,37409],{"__ignoreMap":178},[220,37378,37379,37381,37383],{"class":222,"line":223},[220,37380,343],{"class":264},[220,37382,347],{"class":420},[220,37384,359],{"class":264},[220,37386,37387,37389,37391],{"class":222,"line":179},[220,37388,364],{"class":264},[220,37390,37308],{"class":420},[220,37392,359],{"class":264},[220,37394,37395,37397,37399],{"class":222,"line":389},[220,37396,2550],{"class":264},[220,37398,2553],{"class":420},[220,37400,386],{"class":264},[220,37402,37403,37405,37407],{"class":222,"line":399},[220,37404,2567],{"class":264},[220,37406,37308],{"class":420},[220,37408,359],{"class":264},[220,37410,37411,37413,37415],{"class":222,"line":644},[220,37412,402],{"class":264},[220,37414,347],{"class":420},[220,37416,359],{"class":264},[212,37418,37419],{"className":2844,"code":37330,"language":2846,"meta":178,"style":178},[99,37420,37421,37429,37437,37445,37453],{"__ignoreMap":178},[220,37422,37423,37425,37427],{"class":222,"line":223},[220,37424,343],{"class":264},[220,37426,347],{"class":420},[220,37428,359],{"class":264},[220,37430,37431,37433,37435],{"class":222,"line":179},[220,37432,364],{"class":264},[220,37434,37308],{"class":420},[220,37436,359],{"class":264},[220,37438,37439,37441,37443],{"class":222,"line":389},[220,37440,2550],{"class":264},[220,37442,2553],{"class":420},[220,37444,386],{"class":264},[220,37446,37447,37449,37451],{"class":222,"line":399},[220,37448,2567],{"class":264},[220,37450,37308],{"class":420},[220,37452,359],{"class":264},[220,37454,37455,37457,37459],{"class":222,"line":644},[220,37456,402],{"class":264},[220,37458,347],{"class":420},[220,37460,359],{"class":264},[212,37462,37463],{"className":468,"code":37330,"language":469,"meta":178,"style":178},[99,37464,37465,37473,37481,37489,37497],{"__ignoreMap":178},[220,37466,37467,37469,37471],{"class":222,"line":223},[220,37468,343],{"class":264},[220,37470,347],{"class":420},[220,37472,359],{"class":264},[220,37474,37475,37477,37479],{"class":222,"line":179},[220,37476,364],{"class":264},[220,37478,37308],{"class":420},[220,37480,359],{"class":264},[220,37482,37483,37485,37487],{"class":222,"line":389},[220,37484,2550],{"class":264},[220,37486,2553],{"class":420},[220,37488,386],{"class":264},[220,37490,37491,37493,37495],{"class":222,"line":399},[220,37492,2567],{"class":264},[220,37494,37308],{"class":420},[220,37496,359],{"class":264},[220,37498,37499,37501,37503],{"class":222,"line":644},[220,37500,402],{"class":264},[220,37502,347],{"class":420},[220,37504,359],{"class":264},[212,37506,37508],{"className":251,"code":37507,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CheckerWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,37509,37510,37520,37524,37538,37542,37551,37559,37563,37567],{"__ignoreMap":178},[220,37511,37512,37514,37516,37518],{"class":222,"line":223},[220,37513,261],{"class":260},[220,37515,10879],{"class":264},[220,37517,268],{"class":260},[220,37519,4007],{"class":230},[220,37521,37522],{"class":222,"line":179},[220,37523,647],{"emptyLinePlaceholder":194},[220,37525,37526,37528,37530,37532,37534,37536],{"class":222,"line":389},[220,37527,1735],{"class":260},[220,37529,1738],{"class":420},[220,37531,1741],{"class":260},[220,37533,1744],{"class":260},[220,37535,1747],{"class":226},[220,37537,1750],{"class":264},[220,37539,37540],{"class":222,"line":399},[220,37541,1765],{"class":264},[220,37543,37544,37546,37549],{"class":222,"line":644},[220,37545,1770],{"class":264},[220,37547,37548],{"class":230},"'CheckerWipe'",[220,37550,6375],{"class":264},[220,37552,37553,37555,37557],{"class":222,"line":650},[220,37554,6380],{"class":264},[220,37556,3206],{"class":230},[220,37558,2465],{"class":264},[220,37560,37561],{"class":222,"line":656},[220,37562,6397],{"class":264},[220,37564,37565],{"class":222,"line":673},[220,37566,1787],{"class":264},[220,37568,37569],{"class":222,"line":682},[220,37570,1792],{"class":264},[1504,37572,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":37574},[37575,37576],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerwipe",{"title":37308,"description":37316},"docs\u002Fcomponents\u002FCheckerWipe","NqeYXHsapZtoyRSSIzfTaKg5Au8v5cKkjvG-ZTxFNu8",{"id":37583,"title":37584,"body":37585,"category":32433,"componentType":25247,"description":37592,"extension":191,"meta":37776,"navigation":194,"path":37777,"requiresChild":31900,"seo":37778,"stem":37779,"__hash__":37780},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":37586,"toc":37772},[37587,37590,37593,37595,37597,37600,37602,37770],[11,37588,37584],{"id":37589},"checkerboard",[15,37591,37592],{},"Classic checkerboard pattern with two alternating colors",[31281,37594],{"component":37584},[23,37596,31285],{"id":25903},[31287,37598],{":props":37599},"[{\"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,37601,31293],{"id":31292},[246,37603,37604,37633,37661,37689,37717],{":tabs":1557},[212,37605,37607],{"className":334,"code":37606,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,37608,37609,37617,37625],{"__ignoreMap":178},[220,37610,37611,37613,37615],{"class":222,"line":223},[220,37612,343],{"class":264},[220,37614,347],{"class":346},[220,37616,359],{"class":264},[220,37618,37619,37621,37623],{"class":222,"line":179},[220,37620,364],{"class":264},[220,37622,37584],{"class":346},[220,37624,386],{"class":264},[220,37626,37627,37629,37631],{"class":222,"line":389},[220,37628,402],{"class":264},[220,37630,347],{"class":346},[220,37632,359],{"class":264},[212,37634,37635],{"className":409,"code":37606,"language":411,"meta":178,"style":178},[99,37636,37637,37645,37653],{"__ignoreMap":178},[220,37638,37639,37641,37643],{"class":222,"line":223},[220,37640,343],{"class":264},[220,37642,347],{"class":420},[220,37644,359],{"class":264},[220,37646,37647,37649,37651],{"class":222,"line":179},[220,37648,364],{"class":264},[220,37650,37584],{"class":420},[220,37652,386],{"class":264},[220,37654,37655,37657,37659],{"class":222,"line":389},[220,37656,402],{"class":264},[220,37658,347],{"class":420},[220,37660,359],{"class":264},[212,37662,37663],{"className":2844,"code":37606,"language":2846,"meta":178,"style":178},[99,37664,37665,37673,37681],{"__ignoreMap":178},[220,37666,37667,37669,37671],{"class":222,"line":223},[220,37668,343],{"class":264},[220,37670,347],{"class":420},[220,37672,359],{"class":264},[220,37674,37675,37677,37679],{"class":222,"line":179},[220,37676,364],{"class":264},[220,37678,37584],{"class":420},[220,37680,386],{"class":264},[220,37682,37683,37685,37687],{"class":222,"line":389},[220,37684,402],{"class":264},[220,37686,347],{"class":420},[220,37688,359],{"class":264},[212,37690,37691],{"className":468,"code":37606,"language":469,"meta":178,"style":178},[99,37692,37693,37701,37709],{"__ignoreMap":178},[220,37694,37695,37697,37699],{"class":222,"line":223},[220,37696,343],{"class":264},[220,37698,347],{"class":420},[220,37700,359],{"class":264},[220,37702,37703,37705,37707],{"class":222,"line":179},[220,37704,364],{"class":264},[220,37706,37584],{"class":420},[220,37708,386],{"class":264},[220,37710,37711,37713,37715],{"class":222,"line":389},[220,37712,402],{"class":264},[220,37714,347],{"class":420},[220,37716,359],{"class":264},[212,37718,37720],{"className":251,"code":37719,"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,37721,37722,37732,37736,37750,37754,37762,37766],{"__ignoreMap":178},[220,37723,37724,37726,37728,37730],{"class":222,"line":223},[220,37725,261],{"class":260},[220,37727,10879],{"class":264},[220,37729,268],{"class":260},[220,37731,4007],{"class":230},[220,37733,37734],{"class":222,"line":179},[220,37735,647],{"emptyLinePlaceholder":194},[220,37737,37738,37740,37742,37744,37746,37748],{"class":222,"line":389},[220,37739,1735],{"class":260},[220,37741,1738],{"class":420},[220,37743,1741],{"class":260},[220,37745,1744],{"class":260},[220,37747,1747],{"class":226},[220,37749,1750],{"class":264},[220,37751,37752],{"class":222,"line":399},[220,37753,1765],{"class":264},[220,37755,37756,37758,37760],{"class":222,"line":644},[220,37757,1770],{"class":264},[220,37759,9525],{"class":230},[220,37761,2465],{"class":264},[220,37763,37764],{"class":222,"line":650},[220,37765,1787],{"class":264},[220,37767,37768],{"class":222,"line":656},[220,37769,1792],{"class":264},[1504,37771,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":37773},[37774,37775],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":37584,"description":37592},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":37782,"title":37783,"body":37784,"category":32433,"componentType":25247,"description":37791,"extension":191,"meta":37976,"navigation":194,"path":37977,"requiresChild":31900,"seo":37978,"stem":37979,"__hash__":37980},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":37785,"toc":37972},[37786,37789,37792,37794,37796,37799,37801,37970],[11,37787,37783],{"id":37788},"chevron",[15,37790,37791],{},"Animated chevron \u002F zigzag stripe pattern",[31281,37793],{"component":37783},[23,37795,31285],{"id":25903},[31287,37797],{":props":37798},"[{\"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,37800,31293],{"id":31292},[246,37802,37803,37832,37860,37888,37916],{":tabs":1557},[212,37804,37806],{"className":334,"code":37805,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,37807,37808,37816,37824],{"__ignoreMap":178},[220,37809,37810,37812,37814],{"class":222,"line":223},[220,37811,343],{"class":264},[220,37813,347],{"class":346},[220,37815,359],{"class":264},[220,37817,37818,37820,37822],{"class":222,"line":179},[220,37819,364],{"class":264},[220,37821,37783],{"class":346},[220,37823,386],{"class":264},[220,37825,37826,37828,37830],{"class":222,"line":389},[220,37827,402],{"class":264},[220,37829,347],{"class":346},[220,37831,359],{"class":264},[212,37833,37834],{"className":409,"code":37805,"language":411,"meta":178,"style":178},[99,37835,37836,37844,37852],{"__ignoreMap":178},[220,37837,37838,37840,37842],{"class":222,"line":223},[220,37839,343],{"class":264},[220,37841,347],{"class":420},[220,37843,359],{"class":264},[220,37845,37846,37848,37850],{"class":222,"line":179},[220,37847,364],{"class":264},[220,37849,37783],{"class":420},[220,37851,386],{"class":264},[220,37853,37854,37856,37858],{"class":222,"line":389},[220,37855,402],{"class":264},[220,37857,347],{"class":420},[220,37859,359],{"class":264},[212,37861,37862],{"className":2844,"code":37805,"language":2846,"meta":178,"style":178},[99,37863,37864,37872,37880],{"__ignoreMap":178},[220,37865,37866,37868,37870],{"class":222,"line":223},[220,37867,343],{"class":264},[220,37869,347],{"class":420},[220,37871,359],{"class":264},[220,37873,37874,37876,37878],{"class":222,"line":179},[220,37875,364],{"class":264},[220,37877,37783],{"class":420},[220,37879,386],{"class":264},[220,37881,37882,37884,37886],{"class":222,"line":389},[220,37883,402],{"class":264},[220,37885,347],{"class":420},[220,37887,359],{"class":264},[212,37889,37890],{"className":468,"code":37805,"language":469,"meta":178,"style":178},[99,37891,37892,37900,37908],{"__ignoreMap":178},[220,37893,37894,37896,37898],{"class":222,"line":223},[220,37895,343],{"class":264},[220,37897,347],{"class":420},[220,37899,359],{"class":264},[220,37901,37902,37904,37906],{"class":222,"line":179},[220,37903,364],{"class":264},[220,37905,37783],{"class":420},[220,37907,386],{"class":264},[220,37909,37910,37912,37914],{"class":222,"line":389},[220,37911,402],{"class":264},[220,37913,347],{"class":420},[220,37915,359],{"class":264},[212,37917,37919],{"className":251,"code":37918,"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,37920,37921,37931,37935,37949,37953,37962,37966],{"__ignoreMap":178},[220,37922,37923,37925,37927,37929],{"class":222,"line":223},[220,37924,261],{"class":260},[220,37926,10879],{"class":264},[220,37928,268],{"class":260},[220,37930,4007],{"class":230},[220,37932,37933],{"class":222,"line":179},[220,37934,647],{"emptyLinePlaceholder":194},[220,37936,37937,37939,37941,37943,37945,37947],{"class":222,"line":389},[220,37938,1735],{"class":260},[220,37940,1738],{"class":420},[220,37942,1741],{"class":260},[220,37944,1744],{"class":260},[220,37946,1747],{"class":226},[220,37948,1750],{"class":264},[220,37950,37951],{"class":222,"line":399},[220,37952,1765],{"class":264},[220,37954,37955,37957,37960],{"class":222,"line":644},[220,37956,1770],{"class":264},[220,37958,37959],{"class":230},"'Chevron'",[220,37961,2465],{"class":264},[220,37963,37964],{"class":222,"line":650},[220,37965,1787],{"class":264},[220,37967,37968],{"class":222,"line":656},[220,37969,1792],{"class":264},[1504,37971,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":37973},[37974,37975],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":37783,"description":37791},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":37982,"title":37983,"body":37984,"category":34929,"componentType":25247,"description":37991,"extension":191,"meta":38280,"navigation":194,"path":38281,"requiresChild":31900,"seo":38282,"stem":38283,"__hash__":38284},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":37985,"toc":38276},[37986,37989,37992,37994,37996,37999,38001,38274],[11,37987,37983],{"id":37988},"chromaflow",[15,37990,37991],{},"Interactive liquid flow effect that follows your cursor",[31281,37993],{"component":37983},[23,37995,31285],{"id":25903},[31287,37997],{":props":37998},"[{\"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,38000,31293],{"id":31292},[246,38002,38003,38052,38108,38158,38212],{":tabs":1557},[212,38004,38006],{"className":334,"code":38005,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,38007,38008,38016,38023,38031,38040,38044],{"__ignoreMap":178},[220,38009,38010,38012,38014],{"class":222,"line":223},[220,38011,343],{"class":264},[220,38013,347],{"class":346},[220,38015,359],{"class":264},[220,38017,38018,38020],{"class":222,"line":179},[220,38019,364],{"class":264},[220,38021,38022],{"class":346},"ChromaFlow\n",[220,38024,38025,38027,38029],{"class":222,"line":389},[220,38026,19739],{"class":226},[220,38028,353],{"class":264},[220,38030,35995],{"class":230},[220,38032,38033,38035,38037],{"class":222,"line":399},[220,38034,16772],{"class":226},[220,38036,353],{"class":264},[220,38038,38039],{"class":230},"\"3\"\n",[220,38041,38042],{"class":222,"line":644},[220,38043,1234],{"class":264},[220,38045,38046,38048,38050],{"class":222,"line":650},[220,38047,402],{"class":264},[220,38049,347],{"class":346},[220,38051,359],{"class":264},[212,38053,38055],{"className":409,"code":38054,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,38056,38057,38065,38071,38083,38096,38100],{"__ignoreMap":178},[220,38058,38059,38061,38063],{"class":222,"line":223},[220,38060,343],{"class":264},[220,38062,347],{"class":420},[220,38064,359],{"class":264},[220,38066,38067,38069],{"class":222,"line":179},[220,38068,364],{"class":264},[220,38070,38022],{"class":420},[220,38072,38073,38075,38077,38079,38081],{"class":222,"line":389},[220,38074,19850],{"class":226},[220,38076,353],{"class":260},[220,38078,743],{"class":264},[220,38080,8043],{"class":420},[220,38082,749],{"class":264},[220,38084,38085,38087,38089,38091,38094],{"class":222,"line":399},[220,38086,9012],{"class":226},[220,38088,353],{"class":260},[220,38090,743],{"class":264},[220,38092,38093],{"class":420},"3",[220,38095,749],{"class":264},[220,38097,38098],{"class":222,"line":644},[220,38099,1234],{"class":264},[220,38101,38102,38104,38106],{"class":222,"line":650},[220,38103,402],{"class":264},[220,38105,347],{"class":420},[220,38107,359],{"class":264},[212,38109,38110],{"className":2844,"code":38054,"language":2846,"meta":178,"style":178},[99,38111,38112,38120,38126,38136,38146,38150],{"__ignoreMap":178},[220,38113,38114,38116,38118],{"class":222,"line":223},[220,38115,343],{"class":264},[220,38117,347],{"class":420},[220,38119,359],{"class":264},[220,38121,38122,38124],{"class":222,"line":179},[220,38123,364],{"class":264},[220,38125,38022],{"class":420},[220,38127,38128,38130,38132,38134],{"class":222,"line":389},[220,38129,19850],{"class":226},[220,38131,29241],{"class":264},[220,38133,8043],{"class":420},[220,38135,749],{"class":264},[220,38137,38138,38140,38142,38144],{"class":222,"line":399},[220,38139,9012],{"class":226},[220,38141,29241],{"class":264},[220,38143,38093],{"class":420},[220,38145,749],{"class":264},[220,38147,38148],{"class":222,"line":644},[220,38149,1234],{"class":264},[220,38151,38152,38154,38156],{"class":222,"line":650},[220,38153,402],{"class":264},[220,38155,347],{"class":420},[220,38157,359],{"class":264},[212,38159,38160],{"className":468,"code":38054,"language":469,"meta":178,"style":178},[99,38161,38162,38170,38176,38188,38200,38204],{"__ignoreMap":178},[220,38163,38164,38166,38168],{"class":222,"line":223},[220,38165,343],{"class":264},[220,38167,347],{"class":420},[220,38169,359],{"class":264},[220,38171,38172,38174],{"class":222,"line":179},[220,38173,364],{"class":264},[220,38175,38022],{"class":420},[220,38177,38178,38180,38182,38184,38186],{"class":222,"line":389},[220,38179,19850],{"class":226},[220,38181,353],{"class":260},[220,38183,743],{"class":264},[220,38185,8043],{"class":420},[220,38187,749],{"class":264},[220,38189,38190,38192,38194,38196,38198],{"class":222,"line":399},[220,38191,9012],{"class":226},[220,38193,353],{"class":260},[220,38195,743],{"class":264},[220,38197,38093],{"class":420},[220,38199,749],{"class":264},[220,38201,38202],{"class":222,"line":644},[220,38203,1234],{"class":264},[220,38205,38206,38208,38210],{"class":222,"line":650},[220,38207,402],{"class":264},[220,38209,347],{"class":420},[220,38211,359],{"class":264},[212,38213,38215],{"className":251,"code":38214,"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,38216,38217,38227,38231,38245,38249,38266,38270],{"__ignoreMap":178},[220,38218,38219,38221,38223,38225],{"class":222,"line":223},[220,38220,261],{"class":260},[220,38222,10879],{"class":264},[220,38224,268],{"class":260},[220,38226,4007],{"class":230},[220,38228,38229],{"class":222,"line":179},[220,38230,647],{"emptyLinePlaceholder":194},[220,38232,38233,38235,38237,38239,38241,38243],{"class":222,"line":389},[220,38234,1735],{"class":260},[220,38236,1738],{"class":420},[220,38238,1741],{"class":260},[220,38240,1744],{"class":260},[220,38242,1747],{"class":226},[220,38244,1750],{"class":264},[220,38246,38247],{"class":222,"line":399},[220,38248,1765],{"class":264},[220,38250,38251,38253,38256,38258,38260,38262,38264],{"class":222,"line":644},[220,38252,1770],{"class":264},[220,38254,38255],{"class":230},"'ChromaFlow'",[220,38257,31573],{"class":264},[220,38259,8043],{"class":420},[220,38261,5932],{"class":264},[220,38263,38093],{"class":420},[220,38265,1782],{"class":264},[220,38267,38268],{"class":222,"line":650},[220,38269,1787],{"class":264},[220,38271,38272],{"class":222,"line":656},[220,38273,1792],{"class":264},[1504,38275,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38277},[38278,38279],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":37983,"description":37991},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":38286,"title":38287,"body":38288,"category":32176,"componentType":25253,"description":38295,"extension":191,"meta":38556,"navigation":194,"path":38557,"requiresChild":194,"seo":38558,"stem":38559,"__hash__":38560},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":38289,"toc":38552},[38290,38293,38296,38298,38300,38303,38305,38550],[11,38291,38287],{"id":38292},"chromaticaberration",[15,38294,38295],{},"Separate RGB channels for a prismatic distortion effect",[31281,38297],{"component":38287},[23,38299,31285],{"id":25903},[31287,38301],{":props":38302},"[{\"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,38304,31293],{"id":31292},[246,38306,38307,38352,38396,38440,38484],{":tabs":1557},[212,38308,38310],{"className":334,"code":38309,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,38311,38312,38320,38328,38336,38344],{"__ignoreMap":178},[220,38313,38314,38316,38318],{"class":222,"line":223},[220,38315,343],{"class":264},[220,38317,347],{"class":346},[220,38319,359],{"class":264},[220,38321,38322,38324,38326],{"class":222,"line":179},[220,38323,364],{"class":264},[220,38325,38287],{"class":346},[220,38327,359],{"class":264},[220,38329,38330,38332,38334],{"class":222,"line":389},[220,38331,2550],{"class":264},[220,38333,2553],{"class":346},[220,38335,386],{"class":264},[220,38337,38338,38340,38342],{"class":222,"line":399},[220,38339,2567],{"class":264},[220,38341,38287],{"class":346},[220,38343,359],{"class":264},[220,38345,38346,38348,38350],{"class":222,"line":644},[220,38347,402],{"class":264},[220,38349,347],{"class":346},[220,38351,359],{"class":264},[212,38353,38354],{"className":409,"code":38309,"language":411,"meta":178,"style":178},[99,38355,38356,38364,38372,38380,38388],{"__ignoreMap":178},[220,38357,38358,38360,38362],{"class":222,"line":223},[220,38359,343],{"class":264},[220,38361,347],{"class":420},[220,38363,359],{"class":264},[220,38365,38366,38368,38370],{"class":222,"line":179},[220,38367,364],{"class":264},[220,38369,38287],{"class":420},[220,38371,359],{"class":264},[220,38373,38374,38376,38378],{"class":222,"line":389},[220,38375,2550],{"class":264},[220,38377,2553],{"class":420},[220,38379,386],{"class":264},[220,38381,38382,38384,38386],{"class":222,"line":399},[220,38383,2567],{"class":264},[220,38385,38287],{"class":420},[220,38387,359],{"class":264},[220,38389,38390,38392,38394],{"class":222,"line":644},[220,38391,402],{"class":264},[220,38393,347],{"class":420},[220,38395,359],{"class":264},[212,38397,38398],{"className":2844,"code":38309,"language":2846,"meta":178,"style":178},[99,38399,38400,38408,38416,38424,38432],{"__ignoreMap":178},[220,38401,38402,38404,38406],{"class":222,"line":223},[220,38403,343],{"class":264},[220,38405,347],{"class":420},[220,38407,359],{"class":264},[220,38409,38410,38412,38414],{"class":222,"line":179},[220,38411,364],{"class":264},[220,38413,38287],{"class":420},[220,38415,359],{"class":264},[220,38417,38418,38420,38422],{"class":222,"line":389},[220,38419,2550],{"class":264},[220,38421,2553],{"class":420},[220,38423,386],{"class":264},[220,38425,38426,38428,38430],{"class":222,"line":399},[220,38427,2567],{"class":264},[220,38429,38287],{"class":420},[220,38431,359],{"class":264},[220,38433,38434,38436,38438],{"class":222,"line":644},[220,38435,402],{"class":264},[220,38437,347],{"class":420},[220,38439,359],{"class":264},[212,38441,38442],{"className":468,"code":38309,"language":469,"meta":178,"style":178},[99,38443,38444,38452,38460,38468,38476],{"__ignoreMap":178},[220,38445,38446,38448,38450],{"class":222,"line":223},[220,38447,343],{"class":264},[220,38449,347],{"class":420},[220,38451,359],{"class":264},[220,38453,38454,38456,38458],{"class":222,"line":179},[220,38455,364],{"class":264},[220,38457,38287],{"class":420},[220,38459,359],{"class":264},[220,38461,38462,38464,38466],{"class":222,"line":389},[220,38463,2550],{"class":264},[220,38465,2553],{"class":420},[220,38467,386],{"class":264},[220,38469,38470,38472,38474],{"class":222,"line":399},[220,38471,2567],{"class":264},[220,38473,38287],{"class":420},[220,38475,359],{"class":264},[220,38477,38478,38480,38482],{"class":222,"line":644},[220,38479,402],{"class":264},[220,38481,347],{"class":420},[220,38483,359],{"class":264},[212,38485,38487],{"className":251,"code":38486,"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,38488,38489,38499,38503,38517,38521,38530,38538,38542,38546],{"__ignoreMap":178},[220,38490,38491,38493,38495,38497],{"class":222,"line":223},[220,38492,261],{"class":260},[220,38494,10879],{"class":264},[220,38496,268],{"class":260},[220,38498,4007],{"class":230},[220,38500,38501],{"class":222,"line":179},[220,38502,647],{"emptyLinePlaceholder":194},[220,38504,38505,38507,38509,38511,38513,38515],{"class":222,"line":389},[220,38506,1735],{"class":260},[220,38508,1738],{"class":420},[220,38510,1741],{"class":260},[220,38512,1744],{"class":260},[220,38514,1747],{"class":226},[220,38516,1750],{"class":264},[220,38518,38519],{"class":222,"line":399},[220,38520,1765],{"class":264},[220,38522,38523,38525,38528],{"class":222,"line":644},[220,38524,1770],{"class":264},[220,38526,38527],{"class":230},"'ChromaticAberration'",[220,38529,6375],{"class":264},[220,38531,38532,38534,38536],{"class":222,"line":650},[220,38533,6380],{"class":264},[220,38535,3206],{"class":230},[220,38537,2465],{"class":264},[220,38539,38540],{"class":222,"line":656},[220,38541,6397],{"class":264},[220,38543,38544],{"class":222,"line":673},[220,38545,1787],{"class":264},[220,38547,38548],{"class":222,"line":682},[220,38549,1792],{"class":264},[1504,38551,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":38553},[38554,38555],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":38287,"description":38295},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":38562,"title":2553,"body":38563,"category":15275,"componentType":25247,"description":38570,"extension":191,"meta":38845,"navigation":194,"path":38846,"requiresChild":31900,"seo":38847,"stem":38848,"__hash__":38849},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":38564,"toc":38841},[38565,38568,38571,38573,38575,38578,38580,38839],[11,38566,2553],{"id":38567},"circle",[15,38569,38570],{},"Generate a circle with adjustable size and softness",[31281,38572],{"component":2553},[23,38574,31285],{"id":25903},[31287,38576],{":props":38577},"[{\"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,38579,31293],{"id":31292},[246,38581,38582,38629,38680,38728,38778],{":tabs":1557},[212,38583,38585],{"className":334,"code":38584,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,38586,38587,38595,38601,38609,38617,38621],{"__ignoreMap":178},[220,38588,38589,38591,38593],{"class":222,"line":223},[220,38590,343],{"class":264},[220,38592,347],{"class":346},[220,38594,359],{"class":264},[220,38596,38597,38599],{"class":222,"line":179},[220,38598,364],{"class":264},[220,38600,8997],{"class":346},[220,38602,38603,38605,38607],{"class":222,"line":389},[220,38604,9002],{"class":226},[220,38606,353],{"class":264},[220,38608,8958],{"class":230},[220,38610,38611,38613,38615],{"class":222,"line":399},[220,38612,16772],{"class":226},[220,38614,353],{"class":264},[220,38616,35995],{"class":230},[220,38618,38619],{"class":222,"line":644},[220,38620,1234],{"class":264},[220,38622,38623,38625,38627],{"class":222,"line":650},[220,38624,402],{"class":264},[220,38626,347],{"class":346},[220,38628,359],{"class":264},[212,38630,38632],{"className":409,"code":38631,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,38633,38634,38642,38648,38656,38668,38672],{"__ignoreMap":178},[220,38635,38636,38638,38640],{"class":222,"line":223},[220,38637,343],{"class":264},[220,38639,347],{"class":420},[220,38641,359],{"class":264},[220,38643,38644,38646],{"class":222,"line":179},[220,38645,364],{"class":264},[220,38647,8997],{"class":420},[220,38649,38650,38652,38654],{"class":222,"line":389},[220,38651,9002],{"class":226},[220,38653,353],{"class":260},[220,38655,8958],{"class":230},[220,38657,38658,38660,38662,38664,38666],{"class":222,"line":399},[220,38659,9012],{"class":226},[220,38661,353],{"class":260},[220,38663,743],{"class":264},[220,38665,8043],{"class":420},[220,38667,749],{"class":264},[220,38669,38670],{"class":222,"line":644},[220,38671,1234],{"class":264},[220,38673,38674,38676,38678],{"class":222,"line":650},[220,38675,402],{"class":264},[220,38677,347],{"class":420},[220,38679,359],{"class":264},[212,38681,38682],{"className":2844,"code":38631,"language":2846,"meta":178,"style":178},[99,38683,38684,38692,38698,38706,38716,38720],{"__ignoreMap":178},[220,38685,38686,38688,38690],{"class":222,"line":223},[220,38687,343],{"class":264},[220,38689,347],{"class":420},[220,38691,359],{"class":264},[220,38693,38694,38696],{"class":222,"line":179},[220,38695,364],{"class":264},[220,38697,8997],{"class":420},[220,38699,38700,38702,38704],{"class":222,"line":389},[220,38701,9002],{"class":226},[220,38703,353],{"class":264},[220,38705,8958],{"class":230},[220,38707,38708,38710,38712,38714],{"class":222,"line":399},[220,38709,9012],{"class":226},[220,38711,29241],{"class":264},[220,38713,8043],{"class":420},[220,38715,749],{"class":264},[220,38717,38718],{"class":222,"line":644},[220,38719,1234],{"class":264},[220,38721,38722,38724,38726],{"class":222,"line":650},[220,38723,402],{"class":264},[220,38725,347],{"class":420},[220,38727,359],{"class":264},[212,38729,38730],{"className":468,"code":38631,"language":469,"meta":178,"style":178},[99,38731,38732,38740,38746,38754,38766,38770],{"__ignoreMap":178},[220,38733,38734,38736,38738],{"class":222,"line":223},[220,38735,343],{"class":264},[220,38737,347],{"class":420},[220,38739,359],{"class":264},[220,38741,38742,38744],{"class":222,"line":179},[220,38743,364],{"class":264},[220,38745,8997],{"class":420},[220,38747,38748,38750,38752],{"class":222,"line":389},[220,38749,9002],{"class":226},[220,38751,353],{"class":260},[220,38753,8958],{"class":230},[220,38755,38756,38758,38760,38762,38764],{"class":222,"line":399},[220,38757,9012],{"class":226},[220,38759,353],{"class":260},[220,38761,743],{"class":264},[220,38763,8043],{"class":420},[220,38765,749],{"class":264},[220,38767,38768],{"class":222,"line":644},[220,38769,1234],{"class":264},[220,38771,38772,38774,38776],{"class":222,"line":650},[220,38773,402],{"class":264},[220,38775,347],{"class":420},[220,38777,359],{"class":264},[212,38779,38781],{"className":251,"code":38780,"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,38782,38783,38793,38797,38811,38815,38831,38835],{"__ignoreMap":178},[220,38784,38785,38787,38789,38791],{"class":222,"line":223},[220,38786,261],{"class":260},[220,38788,10879],{"class":264},[220,38790,268],{"class":260},[220,38792,4007],{"class":230},[220,38794,38795],{"class":222,"line":179},[220,38796,647],{"emptyLinePlaceholder":194},[220,38798,38799,38801,38803,38805,38807,38809],{"class":222,"line":389},[220,38800,1735],{"class":260},[220,38802,1738],{"class":420},[220,38804,1741],{"class":260},[220,38806,1744],{"class":260},[220,38808,1747],{"class":226},[220,38810,1750],{"class":264},[220,38812,38813],{"class":222,"line":399},[220,38814,1765],{"class":264},[220,38816,38817,38819,38821,38823,38825,38827,38829],{"class":222,"line":644},[220,38818,1770],{"class":264},[220,38820,3206],{"class":230},[220,38822,1776],{"class":264},[220,38824,9536],{"class":230},[220,38826,5932],{"class":264},[220,38828,8043],{"class":420},[220,38830,1782],{"class":264},[220,38832,38833],{"class":222,"line":650},[220,38834,1787],{"class":264},[220,38836,38837],{"class":222,"line":656},[220,38838,1792],{"class":264},[1504,38840,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38842},[38843,38844],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":38570},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":38851,"title":38852,"body":38853,"category":32433,"componentType":25247,"description":38860,"extension":191,"meta":39045,"navigation":194,"path":39046,"requiresChild":31900,"seo":39047,"stem":39048,"__hash__":39049},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":38854,"toc":39041},[38855,38858,38861,38863,38865,38868,38870,39039],[11,38856,38852],{"id":38857},"colorwheel",[15,38859,38860],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31281,38862],{"component":38852},[23,38864,31285],{"id":25903},[31287,38866],{":props":38867},"[{\"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,38869,31293],{"id":31292},[246,38871,38872,38901,38929,38957,38985],{":tabs":1557},[212,38873,38875],{"className":334,"code":38874,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,38876,38877,38885,38893],{"__ignoreMap":178},[220,38878,38879,38881,38883],{"class":222,"line":223},[220,38880,343],{"class":264},[220,38882,347],{"class":346},[220,38884,359],{"class":264},[220,38886,38887,38889,38891],{"class":222,"line":179},[220,38888,364],{"class":264},[220,38890,38852],{"class":346},[220,38892,386],{"class":264},[220,38894,38895,38897,38899],{"class":222,"line":389},[220,38896,402],{"class":264},[220,38898,347],{"class":346},[220,38900,359],{"class":264},[212,38902,38903],{"className":409,"code":38874,"language":411,"meta":178,"style":178},[99,38904,38905,38913,38921],{"__ignoreMap":178},[220,38906,38907,38909,38911],{"class":222,"line":223},[220,38908,343],{"class":264},[220,38910,347],{"class":420},[220,38912,359],{"class":264},[220,38914,38915,38917,38919],{"class":222,"line":179},[220,38916,364],{"class":264},[220,38918,38852],{"class":420},[220,38920,386],{"class":264},[220,38922,38923,38925,38927],{"class":222,"line":389},[220,38924,402],{"class":264},[220,38926,347],{"class":420},[220,38928,359],{"class":264},[212,38930,38931],{"className":2844,"code":38874,"language":2846,"meta":178,"style":178},[99,38932,38933,38941,38949],{"__ignoreMap":178},[220,38934,38935,38937,38939],{"class":222,"line":223},[220,38936,343],{"class":264},[220,38938,347],{"class":420},[220,38940,359],{"class":264},[220,38942,38943,38945,38947],{"class":222,"line":179},[220,38944,364],{"class":264},[220,38946,38852],{"class":420},[220,38948,386],{"class":264},[220,38950,38951,38953,38955],{"class":222,"line":389},[220,38952,402],{"class":264},[220,38954,347],{"class":420},[220,38956,359],{"class":264},[212,38958,38959],{"className":468,"code":38874,"language":469,"meta":178,"style":178},[99,38960,38961,38969,38977],{"__ignoreMap":178},[220,38962,38963,38965,38967],{"class":222,"line":223},[220,38964,343],{"class":264},[220,38966,347],{"class":420},[220,38968,359],{"class":264},[220,38970,38971,38973,38975],{"class":222,"line":179},[220,38972,364],{"class":264},[220,38974,38852],{"class":420},[220,38976,386],{"class":264},[220,38978,38979,38981,38983],{"class":222,"line":389},[220,38980,402],{"class":264},[220,38982,347],{"class":420},[220,38984,359],{"class":264},[212,38986,38988],{"className":251,"code":38987,"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,38989,38990,39000,39004,39018,39022,39031,39035],{"__ignoreMap":178},[220,38991,38992,38994,38996,38998],{"class":222,"line":223},[220,38993,261],{"class":260},[220,38995,10879],{"class":264},[220,38997,268],{"class":260},[220,38999,4007],{"class":230},[220,39001,39002],{"class":222,"line":179},[220,39003,647],{"emptyLinePlaceholder":194},[220,39005,39006,39008,39010,39012,39014,39016],{"class":222,"line":389},[220,39007,1735],{"class":260},[220,39009,1738],{"class":420},[220,39011,1741],{"class":260},[220,39013,1744],{"class":260},[220,39015,1747],{"class":226},[220,39017,1750],{"class":264},[220,39019,39020],{"class":222,"line":399},[220,39021,1765],{"class":264},[220,39023,39024,39026,39029],{"class":222,"line":644},[220,39025,1770],{"class":264},[220,39027,39028],{"class":230},"'ColorWheel'",[220,39030,2465],{"class":264},[220,39032,39033],{"class":222,"line":650},[220,39034,1787],{"class":264},[220,39036,39037],{"class":222,"line":656},[220,39038,1792],{"class":264},[1504,39040,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":39042},[39043,39044],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":38852,"description":38860},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39051,"title":39052,"body":39053,"category":32176,"componentType":25253,"description":39060,"extension":191,"meta":39321,"navigation":194,"path":39322,"requiresChild":194,"seo":39323,"stem":39324,"__hash__":39325},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39054,"toc":39317},[39055,39058,39061,39063,39065,39068,39070,39315],[11,39056,39052],{"id":39057},"compressionartifacts",[15,39059,39060],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31281,39062],{"component":39052},[23,39064,31285],{"id":25903},[31287,39066],{":props":39067},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39069,31293],{"id":31292},[246,39071,39072,39117,39161,39205,39249],{":tabs":1557},[212,39073,39075],{"className":334,"code":39074,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39076,39077,39085,39093,39101,39109],{"__ignoreMap":178},[220,39078,39079,39081,39083],{"class":222,"line":223},[220,39080,343],{"class":264},[220,39082,347],{"class":346},[220,39084,359],{"class":264},[220,39086,39087,39089,39091],{"class":222,"line":179},[220,39088,364],{"class":264},[220,39090,39052],{"class":346},[220,39092,359],{"class":264},[220,39094,39095,39097,39099],{"class":222,"line":389},[220,39096,2550],{"class":264},[220,39098,2553],{"class":346},[220,39100,386],{"class":264},[220,39102,39103,39105,39107],{"class":222,"line":399},[220,39104,2567],{"class":264},[220,39106,39052],{"class":346},[220,39108,359],{"class":264},[220,39110,39111,39113,39115],{"class":222,"line":644},[220,39112,402],{"class":264},[220,39114,347],{"class":346},[220,39116,359],{"class":264},[212,39118,39119],{"className":409,"code":39074,"language":411,"meta":178,"style":178},[99,39120,39121,39129,39137,39145,39153],{"__ignoreMap":178},[220,39122,39123,39125,39127],{"class":222,"line":223},[220,39124,343],{"class":264},[220,39126,347],{"class":420},[220,39128,359],{"class":264},[220,39130,39131,39133,39135],{"class":222,"line":179},[220,39132,364],{"class":264},[220,39134,39052],{"class":420},[220,39136,359],{"class":264},[220,39138,39139,39141,39143],{"class":222,"line":389},[220,39140,2550],{"class":264},[220,39142,2553],{"class":420},[220,39144,386],{"class":264},[220,39146,39147,39149,39151],{"class":222,"line":399},[220,39148,2567],{"class":264},[220,39150,39052],{"class":420},[220,39152,359],{"class":264},[220,39154,39155,39157,39159],{"class":222,"line":644},[220,39156,402],{"class":264},[220,39158,347],{"class":420},[220,39160,359],{"class":264},[212,39162,39163],{"className":2844,"code":39074,"language":2846,"meta":178,"style":178},[99,39164,39165,39173,39181,39189,39197],{"__ignoreMap":178},[220,39166,39167,39169,39171],{"class":222,"line":223},[220,39168,343],{"class":264},[220,39170,347],{"class":420},[220,39172,359],{"class":264},[220,39174,39175,39177,39179],{"class":222,"line":179},[220,39176,364],{"class":264},[220,39178,39052],{"class":420},[220,39180,359],{"class":264},[220,39182,39183,39185,39187],{"class":222,"line":389},[220,39184,2550],{"class":264},[220,39186,2553],{"class":420},[220,39188,386],{"class":264},[220,39190,39191,39193,39195],{"class":222,"line":399},[220,39192,2567],{"class":264},[220,39194,39052],{"class":420},[220,39196,359],{"class":264},[220,39198,39199,39201,39203],{"class":222,"line":644},[220,39200,402],{"class":264},[220,39202,347],{"class":420},[220,39204,359],{"class":264},[212,39206,39207],{"className":468,"code":39074,"language":469,"meta":178,"style":178},[99,39208,39209,39217,39225,39233,39241],{"__ignoreMap":178},[220,39210,39211,39213,39215],{"class":222,"line":223},[220,39212,343],{"class":264},[220,39214,347],{"class":420},[220,39216,359],{"class":264},[220,39218,39219,39221,39223],{"class":222,"line":179},[220,39220,364],{"class":264},[220,39222,39052],{"class":420},[220,39224,359],{"class":264},[220,39226,39227,39229,39231],{"class":222,"line":389},[220,39228,2550],{"class":264},[220,39230,2553],{"class":420},[220,39232,386],{"class":264},[220,39234,39235,39237,39239],{"class":222,"line":399},[220,39236,2567],{"class":264},[220,39238,39052],{"class":420},[220,39240,359],{"class":264},[220,39242,39243,39245,39247],{"class":222,"line":644},[220,39244,402],{"class":264},[220,39246,347],{"class":420},[220,39248,359],{"class":264},[212,39250,39252],{"className":251,"code":39251,"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,39253,39254,39264,39268,39282,39286,39295,39303,39307,39311],{"__ignoreMap":178},[220,39255,39256,39258,39260,39262],{"class":222,"line":223},[220,39257,261],{"class":260},[220,39259,10879],{"class":264},[220,39261,268],{"class":260},[220,39263,4007],{"class":230},[220,39265,39266],{"class":222,"line":179},[220,39267,647],{"emptyLinePlaceholder":194},[220,39269,39270,39272,39274,39276,39278,39280],{"class":222,"line":389},[220,39271,1735],{"class":260},[220,39273,1738],{"class":420},[220,39275,1741],{"class":260},[220,39277,1744],{"class":260},[220,39279,1747],{"class":226},[220,39281,1750],{"class":264},[220,39283,39284],{"class":222,"line":399},[220,39285,1765],{"class":264},[220,39287,39288,39290,39293],{"class":222,"line":644},[220,39289,1770],{"class":264},[220,39291,39292],{"class":230},"'CompressionArtifacts'",[220,39294,6375],{"class":264},[220,39296,39297,39299,39301],{"class":222,"line":650},[220,39298,6380],{"class":264},[220,39300,3206],{"class":230},[220,39302,2465],{"class":264},[220,39304,39305],{"class":222,"line":656},[220,39306,6397],{"class":264},[220,39308,39309],{"class":222,"line":673},[220,39310,1787],{"class":264},[220,39312,39313],{"class":222,"line":682},[220,39314,1792],{"class":264},[1504,39316,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":39318},[39319,39320],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39052,"description":39060},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":39327,"title":39328,"body":39329,"category":32766,"componentType":25253,"description":39336,"extension":191,"meta":39653,"navigation":194,"path":39654,"requiresChild":194,"seo":39655,"stem":39656,"__hash__":39657},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":39330,"toc":39649},[39331,39334,39337,39339,39341,39344,39346,39647],[11,39332,39328],{"id":39333},"concentricspin",[15,39335,39336],{},"Concentric rings that each rotate the underlying image by different amounts",[31281,39338],{"component":39328},[23,39340,31285],{"id":25903},[31287,39342],{":props":39343},"[{\"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,39345,31293],{"id":31292},[246,39347,39348,39404,39463,39519,39577],{":tabs":1557},[212,39349,39351],{"className":334,"code":39350,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,39352,39353,39361,39368,39376,39380,39388,39396],{"__ignoreMap":178},[220,39354,39355,39357,39359],{"class":222,"line":223},[220,39356,343],{"class":264},[220,39358,347],{"class":346},[220,39360,359],{"class":264},[220,39362,39363,39365],{"class":222,"line":179},[220,39364,364],{"class":264},[220,39366,39367],{"class":346},"ConcentricSpin\n",[220,39369,39370,39372,39374],{"class":222,"line":389},[220,39371,19739],{"class":226},[220,39373,353],{"class":264},[220,39375,31324],{"class":230},[220,39377,39378],{"class":222,"line":399},[220,39379,31329],{"class":264},[220,39381,39382,39384,39386],{"class":222,"line":644},[220,39383,2550],{"class":264},[220,39385,2553],{"class":346},[220,39387,386],{"class":264},[220,39389,39390,39392,39394],{"class":222,"line":650},[220,39391,2567],{"class":264},[220,39393,39328],{"class":346},[220,39395,359],{"class":264},[220,39397,39398,39400,39402],{"class":222,"line":656},[220,39399,402],{"class":264},[220,39401,347],{"class":346},[220,39403,359],{"class":264},[212,39405,39407],{"className":409,"code":39406,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,39408,39409,39417,39423,39435,39439,39447,39455],{"__ignoreMap":178},[220,39410,39411,39413,39415],{"class":222,"line":223},[220,39412,343],{"class":264},[220,39414,347],{"class":420},[220,39416,359],{"class":264},[220,39418,39419,39421],{"class":222,"line":179},[220,39420,364],{"class":264},[220,39422,39367],{"class":420},[220,39424,39425,39427,39429,39431,39433],{"class":222,"line":389},[220,39426,19850],{"class":226},[220,39428,353],{"class":260},[220,39430,743],{"class":264},[220,39432,24169],{"class":420},[220,39434,749],{"class":264},[220,39436,39437],{"class":222,"line":399},[220,39438,31329],{"class":264},[220,39440,39441,39443,39445],{"class":222,"line":644},[220,39442,2550],{"class":264},[220,39444,2553],{"class":420},[220,39446,386],{"class":264},[220,39448,39449,39451,39453],{"class":222,"line":650},[220,39450,2567],{"class":264},[220,39452,39328],{"class":420},[220,39454,359],{"class":264},[220,39456,39457,39459,39461],{"class":222,"line":656},[220,39458,402],{"class":264},[220,39460,347],{"class":420},[220,39462,359],{"class":264},[212,39464,39465],{"className":2844,"code":39406,"language":2846,"meta":178,"style":178},[99,39466,39467,39475,39481,39491,39495,39503,39511],{"__ignoreMap":178},[220,39468,39469,39471,39473],{"class":222,"line":223},[220,39470,343],{"class":264},[220,39472,347],{"class":420},[220,39474,359],{"class":264},[220,39476,39477,39479],{"class":222,"line":179},[220,39478,364],{"class":264},[220,39480,39367],{"class":420},[220,39482,39483,39485,39487,39489],{"class":222,"line":389},[220,39484,19850],{"class":226},[220,39486,29241],{"class":264},[220,39488,24169],{"class":420},[220,39490,749],{"class":264},[220,39492,39493],{"class":222,"line":399},[220,39494,31329],{"class":264},[220,39496,39497,39499,39501],{"class":222,"line":644},[220,39498,2550],{"class":264},[220,39500,2553],{"class":420},[220,39502,386],{"class":264},[220,39504,39505,39507,39509],{"class":222,"line":650},[220,39506,2567],{"class":264},[220,39508,39328],{"class":420},[220,39510,359],{"class":264},[220,39512,39513,39515,39517],{"class":222,"line":656},[220,39514,402],{"class":264},[220,39516,347],{"class":420},[220,39518,359],{"class":264},[212,39520,39521],{"className":468,"code":39406,"language":469,"meta":178,"style":178},[99,39522,39523,39531,39537,39549,39553,39561,39569],{"__ignoreMap":178},[220,39524,39525,39527,39529],{"class":222,"line":223},[220,39526,343],{"class":264},[220,39528,347],{"class":420},[220,39530,359],{"class":264},[220,39532,39533,39535],{"class":222,"line":179},[220,39534,364],{"class":264},[220,39536,39367],{"class":420},[220,39538,39539,39541,39543,39545,39547],{"class":222,"line":389},[220,39540,19850],{"class":226},[220,39542,353],{"class":260},[220,39544,743],{"class":264},[220,39546,24169],{"class":420},[220,39548,749],{"class":264},[220,39550,39551],{"class":222,"line":399},[220,39552,31329],{"class":264},[220,39554,39555,39557,39559],{"class":222,"line":644},[220,39556,2550],{"class":264},[220,39558,2553],{"class":420},[220,39560,386],{"class":264},[220,39562,39563,39565,39567],{"class":222,"line":650},[220,39564,2567],{"class":264},[220,39566,39328],{"class":420},[220,39568,359],{"class":264},[220,39570,39571,39573,39575],{"class":222,"line":656},[220,39572,402],{"class":264},[220,39574,347],{"class":420},[220,39576,359],{"class":264},[212,39578,39580],{"className":251,"code":39579,"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,39581,39582,39592,39596,39610,39614,39627,39635,39639,39643],{"__ignoreMap":178},[220,39583,39584,39586,39588,39590],{"class":222,"line":223},[220,39585,261],{"class":260},[220,39587,10879],{"class":264},[220,39589,268],{"class":260},[220,39591,4007],{"class":230},[220,39593,39594],{"class":222,"line":179},[220,39595,647],{"emptyLinePlaceholder":194},[220,39597,39598,39600,39602,39604,39606,39608],{"class":222,"line":389},[220,39599,1735],{"class":260},[220,39601,1738],{"class":420},[220,39603,1741],{"class":260},[220,39605,1744],{"class":260},[220,39607,1747],{"class":226},[220,39609,1750],{"class":264},[220,39611,39612],{"class":222,"line":399},[220,39613,1765],{"class":264},[220,39615,39616,39618,39621,39623,39625],{"class":222,"line":644},[220,39617,1770],{"class":264},[220,39619,39620],{"class":230},"'ConcentricSpin'",[220,39622,31573],{"class":264},[220,39624,24169],{"class":420},[220,39626,6912],{"class":264},[220,39628,39629,39631,39633],{"class":222,"line":650},[220,39630,6380],{"class":264},[220,39632,3206],{"class":230},[220,39634,2465],{"class":264},[220,39636,39637],{"class":222,"line":656},[220,39638,6397],{"class":264},[220,39640,39641],{"class":222,"line":673},[220,39642,1787],{"class":264},[220,39644,39645],{"class":222,"line":682},[220,39646,1792],{"class":264},[1504,39648,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39650},[39651,39652],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":39328,"description":39336},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":39659,"title":39660,"body":39661,"category":32433,"componentType":25247,"description":39668,"extension":191,"meta":39853,"navigation":194,"path":39854,"requiresChild":31900,"seo":39855,"stem":39856,"__hash__":39857},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":39662,"toc":39849},[39663,39666,39669,39671,39673,39676,39678,39847],[11,39664,39660],{"id":39665},"conicgradient",[15,39667,39668],{},"Colors sweep in a full circle around a center point, like a color wheel",[31281,39670],{"component":39660},[23,39672,31285],{"id":25903},[31287,39674],{":props":39675},"[{\"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,39677,31293],{"id":31292},[246,39679,39680,39709,39737,39765,39793],{":tabs":1557},[212,39681,39683],{"className":334,"code":39682,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,39684,39685,39693,39701],{"__ignoreMap":178},[220,39686,39687,39689,39691],{"class":222,"line":223},[220,39688,343],{"class":264},[220,39690,347],{"class":346},[220,39692,359],{"class":264},[220,39694,39695,39697,39699],{"class":222,"line":179},[220,39696,364],{"class":264},[220,39698,39660],{"class":346},[220,39700,386],{"class":264},[220,39702,39703,39705,39707],{"class":222,"line":389},[220,39704,402],{"class":264},[220,39706,347],{"class":346},[220,39708,359],{"class":264},[212,39710,39711],{"className":409,"code":39682,"language":411,"meta":178,"style":178},[99,39712,39713,39721,39729],{"__ignoreMap":178},[220,39714,39715,39717,39719],{"class":222,"line":223},[220,39716,343],{"class":264},[220,39718,347],{"class":420},[220,39720,359],{"class":264},[220,39722,39723,39725,39727],{"class":222,"line":179},[220,39724,364],{"class":264},[220,39726,39660],{"class":420},[220,39728,386],{"class":264},[220,39730,39731,39733,39735],{"class":222,"line":389},[220,39732,402],{"class":264},[220,39734,347],{"class":420},[220,39736,359],{"class":264},[212,39738,39739],{"className":2844,"code":39682,"language":2846,"meta":178,"style":178},[99,39740,39741,39749,39757],{"__ignoreMap":178},[220,39742,39743,39745,39747],{"class":222,"line":223},[220,39744,343],{"class":264},[220,39746,347],{"class":420},[220,39748,359],{"class":264},[220,39750,39751,39753,39755],{"class":222,"line":179},[220,39752,364],{"class":264},[220,39754,39660],{"class":420},[220,39756,386],{"class":264},[220,39758,39759,39761,39763],{"class":222,"line":389},[220,39760,402],{"class":264},[220,39762,347],{"class":420},[220,39764,359],{"class":264},[212,39766,39767],{"className":468,"code":39682,"language":469,"meta":178,"style":178},[99,39768,39769,39777,39785],{"__ignoreMap":178},[220,39770,39771,39773,39775],{"class":222,"line":223},[220,39772,343],{"class":264},[220,39774,347],{"class":420},[220,39776,359],{"class":264},[220,39778,39779,39781,39783],{"class":222,"line":179},[220,39780,364],{"class":264},[220,39782,39660],{"class":420},[220,39784,386],{"class":264},[220,39786,39787,39789,39791],{"class":222,"line":389},[220,39788,402],{"class":264},[220,39790,347],{"class":420},[220,39792,359],{"class":264},[212,39794,39796],{"className":251,"code":39795,"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,39797,39798,39808,39812,39826,39830,39839,39843],{"__ignoreMap":178},[220,39799,39800,39802,39804,39806],{"class":222,"line":223},[220,39801,261],{"class":260},[220,39803,10879],{"class":264},[220,39805,268],{"class":260},[220,39807,4007],{"class":230},[220,39809,39810],{"class":222,"line":179},[220,39811,647],{"emptyLinePlaceholder":194},[220,39813,39814,39816,39818,39820,39822,39824],{"class":222,"line":389},[220,39815,1735],{"class":260},[220,39817,1738],{"class":420},[220,39819,1741],{"class":260},[220,39821,1744],{"class":260},[220,39823,1747],{"class":226},[220,39825,1750],{"class":264},[220,39827,39828],{"class":222,"line":399},[220,39829,1765],{"class":264},[220,39831,39832,39834,39837],{"class":222,"line":644},[220,39833,1770],{"class":264},[220,39835,39836],{"class":230},"'ConicGradient'",[220,39838,2465],{"class":264},[220,39840,39841],{"class":222,"line":650},[220,39842,1787],{"class":264},[220,39844,39845],{"class":222,"line":656},[220,39846,1792],{"class":264},[1504,39848,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":39850},[39851,39852],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":39660,"description":39668},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":39859,"title":39860,"body":39861,"category":32176,"componentType":25253,"description":39868,"extension":191,"meta":40129,"navigation":194,"path":40130,"requiresChild":194,"seo":40131,"stem":40132,"__hash__":40133},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":39862,"toc":40125},[39863,39866,39869,39871,39873,39876,39878,40123],[11,39864,39860],{"id":39865},"contourlines",[15,39867,39868],{},"Draw topographical contour lines based on luminance or alpha",[31281,39870],{"component":39860},[23,39872,31285],{"id":25903},[31287,39874],{":props":39875},"[{\"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,39877,31293],{"id":31292},[246,39879,39880,39925,39969,40013,40057],{":tabs":1557},[212,39881,39883],{"className":334,"code":39882,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,39884,39885,39893,39901,39909,39917],{"__ignoreMap":178},[220,39886,39887,39889,39891],{"class":222,"line":223},[220,39888,343],{"class":264},[220,39890,347],{"class":346},[220,39892,359],{"class":264},[220,39894,39895,39897,39899],{"class":222,"line":179},[220,39896,364],{"class":264},[220,39898,39860],{"class":346},[220,39900,359],{"class":264},[220,39902,39903,39905,39907],{"class":222,"line":389},[220,39904,2550],{"class":264},[220,39906,2553],{"class":346},[220,39908,386],{"class":264},[220,39910,39911,39913,39915],{"class":222,"line":399},[220,39912,2567],{"class":264},[220,39914,39860],{"class":346},[220,39916,359],{"class":264},[220,39918,39919,39921,39923],{"class":222,"line":644},[220,39920,402],{"class":264},[220,39922,347],{"class":346},[220,39924,359],{"class":264},[212,39926,39927],{"className":409,"code":39882,"language":411,"meta":178,"style":178},[99,39928,39929,39937,39945,39953,39961],{"__ignoreMap":178},[220,39930,39931,39933,39935],{"class":222,"line":223},[220,39932,343],{"class":264},[220,39934,347],{"class":420},[220,39936,359],{"class":264},[220,39938,39939,39941,39943],{"class":222,"line":179},[220,39940,364],{"class":264},[220,39942,39860],{"class":420},[220,39944,359],{"class":264},[220,39946,39947,39949,39951],{"class":222,"line":389},[220,39948,2550],{"class":264},[220,39950,2553],{"class":420},[220,39952,386],{"class":264},[220,39954,39955,39957,39959],{"class":222,"line":399},[220,39956,2567],{"class":264},[220,39958,39860],{"class":420},[220,39960,359],{"class":264},[220,39962,39963,39965,39967],{"class":222,"line":644},[220,39964,402],{"class":264},[220,39966,347],{"class":420},[220,39968,359],{"class":264},[212,39970,39971],{"className":2844,"code":39882,"language":2846,"meta":178,"style":178},[99,39972,39973,39981,39989,39997,40005],{"__ignoreMap":178},[220,39974,39975,39977,39979],{"class":222,"line":223},[220,39976,343],{"class":264},[220,39978,347],{"class":420},[220,39980,359],{"class":264},[220,39982,39983,39985,39987],{"class":222,"line":179},[220,39984,364],{"class":264},[220,39986,39860],{"class":420},[220,39988,359],{"class":264},[220,39990,39991,39993,39995],{"class":222,"line":389},[220,39992,2550],{"class":264},[220,39994,2553],{"class":420},[220,39996,386],{"class":264},[220,39998,39999,40001,40003],{"class":222,"line":399},[220,40000,2567],{"class":264},[220,40002,39860],{"class":420},[220,40004,359],{"class":264},[220,40006,40007,40009,40011],{"class":222,"line":644},[220,40008,402],{"class":264},[220,40010,347],{"class":420},[220,40012,359],{"class":264},[212,40014,40015],{"className":468,"code":39882,"language":469,"meta":178,"style":178},[99,40016,40017,40025,40033,40041,40049],{"__ignoreMap":178},[220,40018,40019,40021,40023],{"class":222,"line":223},[220,40020,343],{"class":264},[220,40022,347],{"class":420},[220,40024,359],{"class":264},[220,40026,40027,40029,40031],{"class":222,"line":179},[220,40028,364],{"class":264},[220,40030,39860],{"class":420},[220,40032,359],{"class":264},[220,40034,40035,40037,40039],{"class":222,"line":389},[220,40036,2550],{"class":264},[220,40038,2553],{"class":420},[220,40040,386],{"class":264},[220,40042,40043,40045,40047],{"class":222,"line":399},[220,40044,2567],{"class":264},[220,40046,39860],{"class":420},[220,40048,359],{"class":264},[220,40050,40051,40053,40055],{"class":222,"line":644},[220,40052,402],{"class":264},[220,40054,347],{"class":420},[220,40056,359],{"class":264},[212,40058,40060],{"className":251,"code":40059,"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,40061,40062,40072,40076,40090,40094,40103,40111,40115,40119],{"__ignoreMap":178},[220,40063,40064,40066,40068,40070],{"class":222,"line":223},[220,40065,261],{"class":260},[220,40067,10879],{"class":264},[220,40069,268],{"class":260},[220,40071,4007],{"class":230},[220,40073,40074],{"class":222,"line":179},[220,40075,647],{"emptyLinePlaceholder":194},[220,40077,40078,40080,40082,40084,40086,40088],{"class":222,"line":389},[220,40079,1735],{"class":260},[220,40081,1738],{"class":420},[220,40083,1741],{"class":260},[220,40085,1744],{"class":260},[220,40087,1747],{"class":226},[220,40089,1750],{"class":264},[220,40091,40092],{"class":222,"line":399},[220,40093,1765],{"class":264},[220,40095,40096,40098,40101],{"class":222,"line":644},[220,40097,1770],{"class":264},[220,40099,40100],{"class":230},"'ContourLines'",[220,40102,6375],{"class":264},[220,40104,40105,40107,40109],{"class":222,"line":650},[220,40106,6380],{"class":264},[220,40108,3206],{"class":230},[220,40110,2465],{"class":264},[220,40112,40113],{"class":222,"line":656},[220,40114,6397],{"class":264},[220,40116,40117],{"class":222,"line":673},[220,40118,1787],{"class":264},[220,40120,40121],{"class":222,"line":682},[220,40122,1792],{"class":264},[1504,40124,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":40126},[40127,40128],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":39860,"description":39868},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40135,"title":40136,"body":40137,"category":32766,"componentType":25253,"description":40144,"extension":191,"meta":40405,"navigation":194,"path":40406,"requiresChild":194,"seo":40407,"stem":40408,"__hash__":40409},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40138,"toc":40401},[40139,40142,40145,40147,40149,40152,40154,40399],[11,40140,40136],{"id":40141},"cornerpin",[15,40143,40144],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31281,40146],{"component":40136},[23,40148,31285],{"id":25903},[31287,40150],{":props":40151},"[{\"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,40153,31293],{"id":31292},[246,40155,40156,40201,40245,40289,40333],{":tabs":1557},[212,40157,40159],{"className":334,"code":40158,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40160,40161,40169,40177,40185,40193],{"__ignoreMap":178},[220,40162,40163,40165,40167],{"class":222,"line":223},[220,40164,343],{"class":264},[220,40166,347],{"class":346},[220,40168,359],{"class":264},[220,40170,40171,40173,40175],{"class":222,"line":179},[220,40172,364],{"class":264},[220,40174,40136],{"class":346},[220,40176,359],{"class":264},[220,40178,40179,40181,40183],{"class":222,"line":389},[220,40180,2550],{"class":264},[220,40182,2553],{"class":346},[220,40184,386],{"class":264},[220,40186,40187,40189,40191],{"class":222,"line":399},[220,40188,2567],{"class":264},[220,40190,40136],{"class":346},[220,40192,359],{"class":264},[220,40194,40195,40197,40199],{"class":222,"line":644},[220,40196,402],{"class":264},[220,40198,347],{"class":346},[220,40200,359],{"class":264},[212,40202,40203],{"className":409,"code":40158,"language":411,"meta":178,"style":178},[99,40204,40205,40213,40221,40229,40237],{"__ignoreMap":178},[220,40206,40207,40209,40211],{"class":222,"line":223},[220,40208,343],{"class":264},[220,40210,347],{"class":420},[220,40212,359],{"class":264},[220,40214,40215,40217,40219],{"class":222,"line":179},[220,40216,364],{"class":264},[220,40218,40136],{"class":420},[220,40220,359],{"class":264},[220,40222,40223,40225,40227],{"class":222,"line":389},[220,40224,2550],{"class":264},[220,40226,2553],{"class":420},[220,40228,386],{"class":264},[220,40230,40231,40233,40235],{"class":222,"line":399},[220,40232,2567],{"class":264},[220,40234,40136],{"class":420},[220,40236,359],{"class":264},[220,40238,40239,40241,40243],{"class":222,"line":644},[220,40240,402],{"class":264},[220,40242,347],{"class":420},[220,40244,359],{"class":264},[212,40246,40247],{"className":2844,"code":40158,"language":2846,"meta":178,"style":178},[99,40248,40249,40257,40265,40273,40281],{"__ignoreMap":178},[220,40250,40251,40253,40255],{"class":222,"line":223},[220,40252,343],{"class":264},[220,40254,347],{"class":420},[220,40256,359],{"class":264},[220,40258,40259,40261,40263],{"class":222,"line":179},[220,40260,364],{"class":264},[220,40262,40136],{"class":420},[220,40264,359],{"class":264},[220,40266,40267,40269,40271],{"class":222,"line":389},[220,40268,2550],{"class":264},[220,40270,2553],{"class":420},[220,40272,386],{"class":264},[220,40274,40275,40277,40279],{"class":222,"line":399},[220,40276,2567],{"class":264},[220,40278,40136],{"class":420},[220,40280,359],{"class":264},[220,40282,40283,40285,40287],{"class":222,"line":644},[220,40284,402],{"class":264},[220,40286,347],{"class":420},[220,40288,359],{"class":264},[212,40290,40291],{"className":468,"code":40158,"language":469,"meta":178,"style":178},[99,40292,40293,40301,40309,40317,40325],{"__ignoreMap":178},[220,40294,40295,40297,40299],{"class":222,"line":223},[220,40296,343],{"class":264},[220,40298,347],{"class":420},[220,40300,359],{"class":264},[220,40302,40303,40305,40307],{"class":222,"line":179},[220,40304,364],{"class":264},[220,40306,40136],{"class":420},[220,40308,359],{"class":264},[220,40310,40311,40313,40315],{"class":222,"line":389},[220,40312,2550],{"class":264},[220,40314,2553],{"class":420},[220,40316,386],{"class":264},[220,40318,40319,40321,40323],{"class":222,"line":399},[220,40320,2567],{"class":264},[220,40322,40136],{"class":420},[220,40324,359],{"class":264},[220,40326,40327,40329,40331],{"class":222,"line":644},[220,40328,402],{"class":264},[220,40330,347],{"class":420},[220,40332,359],{"class":264},[212,40334,40336],{"className":251,"code":40335,"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,40337,40338,40348,40352,40366,40370,40379,40387,40391,40395],{"__ignoreMap":178},[220,40339,40340,40342,40344,40346],{"class":222,"line":223},[220,40341,261],{"class":260},[220,40343,10879],{"class":264},[220,40345,268],{"class":260},[220,40347,4007],{"class":230},[220,40349,40350],{"class":222,"line":179},[220,40351,647],{"emptyLinePlaceholder":194},[220,40353,40354,40356,40358,40360,40362,40364],{"class":222,"line":389},[220,40355,1735],{"class":260},[220,40357,1738],{"class":420},[220,40359,1741],{"class":260},[220,40361,1744],{"class":260},[220,40363,1747],{"class":226},[220,40365,1750],{"class":264},[220,40367,40368],{"class":222,"line":399},[220,40369,1765],{"class":264},[220,40371,40372,40374,40377],{"class":222,"line":644},[220,40373,1770],{"class":264},[220,40375,40376],{"class":230},"'CornerPin'",[220,40378,6375],{"class":264},[220,40380,40381,40383,40385],{"class":222,"line":650},[220,40382,6380],{"class":264},[220,40384,3206],{"class":230},[220,40386,2465],{"class":264},[220,40388,40389],{"class":222,"line":656},[220,40390,6397],{"class":264},[220,40392,40393],{"class":222,"line":673},[220,40394,1787],{"class":264},[220,40396,40397],{"class":222,"line":682},[220,40398,1792],{"class":264},[1504,40400,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":40402},[40403,40404],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40136,"description":40144},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":40411,"title":40412,"body":40413,"category":15275,"componentType":25247,"description":40420,"extension":191,"meta":40698,"navigation":194,"path":40699,"requiresChild":31900,"seo":40700,"stem":40701,"__hash__":40702},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":40414,"toc":40694},[40415,40418,40421,40423,40425,40428,40430,40692],[11,40416,40412],{"id":40417},"crescent",[15,40419,40420],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31281,40422],{"component":40412},[23,40424,31285],{"id":25903},[31287,40426],{":props":40427},"[{\"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,40429,31293],{"id":31292},[246,40431,40432,40481,40532,40580,40630],{":tabs":1557},[212,40433,40435],{"className":334,"code":40434,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,40436,40437,40445,40452,40460,40469,40473],{"__ignoreMap":178},[220,40438,40439,40441,40443],{"class":222,"line":223},[220,40440,343],{"class":264},[220,40442,347],{"class":346},[220,40444,359],{"class":264},[220,40446,40447,40449],{"class":222,"line":179},[220,40448,364],{"class":264},[220,40450,40451],{"class":346},"Crescent\n",[220,40453,40454,40456,40458],{"class":222,"line":389},[220,40455,9002],{"class":226},[220,40457,353],{"class":264},[220,40459,8958],{"class":230},[220,40461,40462,40464,40466],{"class":222,"line":399},[220,40463,16772],{"class":226},[220,40465,353],{"class":264},[220,40467,40468],{"class":230},"\"0.3\"\n",[220,40470,40471],{"class":222,"line":644},[220,40472,1234],{"class":264},[220,40474,40475,40477,40479],{"class":222,"line":650},[220,40476,402],{"class":264},[220,40478,347],{"class":346},[220,40480,359],{"class":264},[212,40482,40484],{"className":409,"code":40483,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,40485,40486,40494,40500,40508,40520,40524],{"__ignoreMap":178},[220,40487,40488,40490,40492],{"class":222,"line":223},[220,40489,343],{"class":264},[220,40491,347],{"class":420},[220,40493,359],{"class":264},[220,40495,40496,40498],{"class":222,"line":179},[220,40497,364],{"class":264},[220,40499,40451],{"class":420},[220,40501,40502,40504,40506],{"class":222,"line":389},[220,40503,9002],{"class":226},[220,40505,353],{"class":260},[220,40507,8958],{"class":230},[220,40509,40510,40512,40514,40516,40518],{"class":222,"line":399},[220,40511,9012],{"class":226},[220,40513,353],{"class":260},[220,40515,743],{"class":264},[220,40517,21372],{"class":420},[220,40519,749],{"class":264},[220,40521,40522],{"class":222,"line":644},[220,40523,1234],{"class":264},[220,40525,40526,40528,40530],{"class":222,"line":650},[220,40527,402],{"class":264},[220,40529,347],{"class":420},[220,40531,359],{"class":264},[212,40533,40534],{"className":2844,"code":40483,"language":2846,"meta":178,"style":178},[99,40535,40536,40544,40550,40558,40568,40572],{"__ignoreMap":178},[220,40537,40538,40540,40542],{"class":222,"line":223},[220,40539,343],{"class":264},[220,40541,347],{"class":420},[220,40543,359],{"class":264},[220,40545,40546,40548],{"class":222,"line":179},[220,40547,364],{"class":264},[220,40549,40451],{"class":420},[220,40551,40552,40554,40556],{"class":222,"line":389},[220,40553,9002],{"class":226},[220,40555,353],{"class":264},[220,40557,8958],{"class":230},[220,40559,40560,40562,40564,40566],{"class":222,"line":399},[220,40561,9012],{"class":226},[220,40563,29241],{"class":264},[220,40565,21372],{"class":420},[220,40567,749],{"class":264},[220,40569,40570],{"class":222,"line":644},[220,40571,1234],{"class":264},[220,40573,40574,40576,40578],{"class":222,"line":650},[220,40575,402],{"class":264},[220,40577,347],{"class":420},[220,40579,359],{"class":264},[212,40581,40582],{"className":468,"code":40483,"language":469,"meta":178,"style":178},[99,40583,40584,40592,40598,40606,40618,40622],{"__ignoreMap":178},[220,40585,40586,40588,40590],{"class":222,"line":223},[220,40587,343],{"class":264},[220,40589,347],{"class":420},[220,40591,359],{"class":264},[220,40593,40594,40596],{"class":222,"line":179},[220,40595,364],{"class":264},[220,40597,40451],{"class":420},[220,40599,40600,40602,40604],{"class":222,"line":389},[220,40601,9002],{"class":226},[220,40603,353],{"class":260},[220,40605,8958],{"class":230},[220,40607,40608,40610,40612,40614,40616],{"class":222,"line":399},[220,40609,9012],{"class":226},[220,40611,353],{"class":260},[220,40613,743],{"class":264},[220,40615,21372],{"class":420},[220,40617,749],{"class":264},[220,40619,40620],{"class":222,"line":644},[220,40621,1234],{"class":264},[220,40623,40624,40626,40628],{"class":222,"line":650},[220,40625,402],{"class":264},[220,40627,347],{"class":420},[220,40629,359],{"class":264},[212,40631,40633],{"className":251,"code":40632,"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,40634,40635,40645,40649,40663,40667,40684,40688],{"__ignoreMap":178},[220,40636,40637,40639,40641,40643],{"class":222,"line":223},[220,40638,261],{"class":260},[220,40640,10879],{"class":264},[220,40642,268],{"class":260},[220,40644,4007],{"class":230},[220,40646,40647],{"class":222,"line":179},[220,40648,647],{"emptyLinePlaceholder":194},[220,40650,40651,40653,40655,40657,40659,40661],{"class":222,"line":389},[220,40652,1735],{"class":260},[220,40654,1738],{"class":420},[220,40656,1741],{"class":260},[220,40658,1744],{"class":260},[220,40660,1747],{"class":226},[220,40662,1750],{"class":264},[220,40664,40665],{"class":222,"line":399},[220,40666,1765],{"class":264},[220,40668,40669,40671,40674,40676,40678,40680,40682],{"class":222,"line":644},[220,40670,1770],{"class":264},[220,40672,40673],{"class":230},"'Crescent'",[220,40675,1776],{"class":264},[220,40677,9536],{"class":230},[220,40679,5932],{"class":264},[220,40681,21372],{"class":420},[220,40683,1782],{"class":264},[220,40685,40686],{"class":222,"line":650},[220,40687,1787],{"class":264},[220,40689,40690],{"class":222,"line":656},[220,40691,1792],{"class":264},[1504,40693,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40695},[40696,40697],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":40412,"description":40420},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":40704,"title":40705,"body":40706,"category":15275,"componentType":25247,"description":40713,"extension":191,"meta":40991,"navigation":194,"path":40992,"requiresChild":31900,"seo":40993,"stem":40994,"__hash__":40995},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":40707,"toc":40987},[40708,40711,40714,40716,40718,40721,40723,40985],[11,40709,40705],{"id":40710},"cross",[15,40712,40713],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31281,40715],{"component":40705},[23,40717,31285],{"id":25903},[31287,40719],{":props":40720},"[{\"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,40722,31293],{"id":31292},[246,40724,40725,40774,40825,40873,40923],{":tabs":1557},[212,40726,40728],{"className":334,"code":40727,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,40729,40730,40738,40745,40753,40762,40766],{"__ignoreMap":178},[220,40731,40732,40734,40736],{"class":222,"line":223},[220,40733,343],{"class":264},[220,40735,347],{"class":346},[220,40737,359],{"class":264},[220,40739,40740,40742],{"class":222,"line":179},[220,40741,364],{"class":264},[220,40743,40744],{"class":346},"Cross\n",[220,40746,40747,40749,40751],{"class":222,"line":389},[220,40748,9002],{"class":226},[220,40750,353],{"class":264},[220,40752,8958],{"class":230},[220,40754,40755,40757,40759],{"class":222,"line":399},[220,40756,16772],{"class":226},[220,40758,353],{"class":264},[220,40760,40761],{"class":230},"\"0.35\"\n",[220,40763,40764],{"class":222,"line":644},[220,40765,1234],{"class":264},[220,40767,40768,40770,40772],{"class":222,"line":650},[220,40769,402],{"class":264},[220,40771,347],{"class":346},[220,40773,359],{"class":264},[212,40775,40777],{"className":409,"code":40776,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,40778,40779,40787,40793,40801,40813,40817],{"__ignoreMap":178},[220,40780,40781,40783,40785],{"class":222,"line":223},[220,40782,343],{"class":264},[220,40784,347],{"class":420},[220,40786,359],{"class":264},[220,40788,40789,40791],{"class":222,"line":179},[220,40790,364],{"class":264},[220,40792,40744],{"class":420},[220,40794,40795,40797,40799],{"class":222,"line":389},[220,40796,9002],{"class":226},[220,40798,353],{"class":260},[220,40800,8958],{"class":230},[220,40802,40803,40805,40807,40809,40811],{"class":222,"line":399},[220,40804,9012],{"class":226},[220,40806,353],{"class":260},[220,40808,743],{"class":264},[220,40810,20516],{"class":420},[220,40812,749],{"class":264},[220,40814,40815],{"class":222,"line":644},[220,40816,1234],{"class":264},[220,40818,40819,40821,40823],{"class":222,"line":650},[220,40820,402],{"class":264},[220,40822,347],{"class":420},[220,40824,359],{"class":264},[212,40826,40827],{"className":2844,"code":40776,"language":2846,"meta":178,"style":178},[99,40828,40829,40837,40843,40851,40861,40865],{"__ignoreMap":178},[220,40830,40831,40833,40835],{"class":222,"line":223},[220,40832,343],{"class":264},[220,40834,347],{"class":420},[220,40836,359],{"class":264},[220,40838,40839,40841],{"class":222,"line":179},[220,40840,364],{"class":264},[220,40842,40744],{"class":420},[220,40844,40845,40847,40849],{"class":222,"line":389},[220,40846,9002],{"class":226},[220,40848,353],{"class":264},[220,40850,8958],{"class":230},[220,40852,40853,40855,40857,40859],{"class":222,"line":399},[220,40854,9012],{"class":226},[220,40856,29241],{"class":264},[220,40858,20516],{"class":420},[220,40860,749],{"class":264},[220,40862,40863],{"class":222,"line":644},[220,40864,1234],{"class":264},[220,40866,40867,40869,40871],{"class":222,"line":650},[220,40868,402],{"class":264},[220,40870,347],{"class":420},[220,40872,359],{"class":264},[212,40874,40875],{"className":468,"code":40776,"language":469,"meta":178,"style":178},[99,40876,40877,40885,40891,40899,40911,40915],{"__ignoreMap":178},[220,40878,40879,40881,40883],{"class":222,"line":223},[220,40880,343],{"class":264},[220,40882,347],{"class":420},[220,40884,359],{"class":264},[220,40886,40887,40889],{"class":222,"line":179},[220,40888,364],{"class":264},[220,40890,40744],{"class":420},[220,40892,40893,40895,40897],{"class":222,"line":389},[220,40894,9002],{"class":226},[220,40896,353],{"class":260},[220,40898,8958],{"class":230},[220,40900,40901,40903,40905,40907,40909],{"class":222,"line":399},[220,40902,9012],{"class":226},[220,40904,353],{"class":260},[220,40906,743],{"class":264},[220,40908,20516],{"class":420},[220,40910,749],{"class":264},[220,40912,40913],{"class":222,"line":644},[220,40914,1234],{"class":264},[220,40916,40917,40919,40921],{"class":222,"line":650},[220,40918,402],{"class":264},[220,40920,347],{"class":420},[220,40922,359],{"class":264},[212,40924,40926],{"className":251,"code":40925,"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,40927,40928,40938,40942,40956,40960,40977,40981],{"__ignoreMap":178},[220,40929,40930,40932,40934,40936],{"class":222,"line":223},[220,40931,261],{"class":260},[220,40933,10879],{"class":264},[220,40935,268],{"class":260},[220,40937,4007],{"class":230},[220,40939,40940],{"class":222,"line":179},[220,40941,647],{"emptyLinePlaceholder":194},[220,40943,40944,40946,40948,40950,40952,40954],{"class":222,"line":389},[220,40945,1735],{"class":260},[220,40947,1738],{"class":420},[220,40949,1741],{"class":260},[220,40951,1744],{"class":260},[220,40953,1747],{"class":226},[220,40955,1750],{"class":264},[220,40957,40958],{"class":222,"line":399},[220,40959,1765],{"class":264},[220,40961,40962,40964,40967,40969,40971,40973,40975],{"class":222,"line":644},[220,40963,1770],{"class":264},[220,40965,40966],{"class":230},"'Cross'",[220,40968,1776],{"class":264},[220,40970,9536],{"class":230},[220,40972,5932],{"class":264},[220,40974,20516],{"class":420},[220,40976,1782],{"class":264},[220,40978,40979],{"class":222,"line":650},[220,40980,1787],{"class":264},[220,40982,40983],{"class":222,"line":656},[220,40984,1792],{"class":264},[1504,40986,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40988},[40989,40990],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":40705,"description":40713},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":40997,"title":22540,"body":40998,"category":35939,"componentType":25253,"description":41005,"extension":191,"meta":41266,"navigation":194,"path":41267,"requiresChild":194,"seo":41268,"stem":41269,"__hash__":41270},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":40999,"toc":41262},[41000,41003,41006,41008,41010,41013,41015,41260],[11,41001,22540],{"id":41002},"crystal",[15,41004,41005],{},"Diamond-like crystal lens with faceted refraction.",[31281,41007],{"component":22540},[23,41009,31285],{"id":25903},[31287,41011],{":props":41012},"[{\"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,41014,31293],{"id":31292},[246,41016,41017,41062,41106,41150,41194],{":tabs":1557},[212,41018,41020],{"className":334,"code":41019,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41021,41022,41030,41038,41046,41054],{"__ignoreMap":178},[220,41023,41024,41026,41028],{"class":222,"line":223},[220,41025,343],{"class":264},[220,41027,347],{"class":346},[220,41029,359],{"class":264},[220,41031,41032,41034,41036],{"class":222,"line":179},[220,41033,364],{"class":264},[220,41035,22540],{"class":346},[220,41037,359],{"class":264},[220,41039,41040,41042,41044],{"class":222,"line":389},[220,41041,2550],{"class":264},[220,41043,2553],{"class":346},[220,41045,386],{"class":264},[220,41047,41048,41050,41052],{"class":222,"line":399},[220,41049,2567],{"class":264},[220,41051,22540],{"class":346},[220,41053,359],{"class":264},[220,41055,41056,41058,41060],{"class":222,"line":644},[220,41057,402],{"class":264},[220,41059,347],{"class":346},[220,41061,359],{"class":264},[212,41063,41064],{"className":409,"code":41019,"language":411,"meta":178,"style":178},[99,41065,41066,41074,41082,41090,41098],{"__ignoreMap":178},[220,41067,41068,41070,41072],{"class":222,"line":223},[220,41069,343],{"class":264},[220,41071,347],{"class":420},[220,41073,359],{"class":264},[220,41075,41076,41078,41080],{"class":222,"line":179},[220,41077,364],{"class":264},[220,41079,22540],{"class":420},[220,41081,359],{"class":264},[220,41083,41084,41086,41088],{"class":222,"line":389},[220,41085,2550],{"class":264},[220,41087,2553],{"class":420},[220,41089,386],{"class":264},[220,41091,41092,41094,41096],{"class":222,"line":399},[220,41093,2567],{"class":264},[220,41095,22540],{"class":420},[220,41097,359],{"class":264},[220,41099,41100,41102,41104],{"class":222,"line":644},[220,41101,402],{"class":264},[220,41103,347],{"class":420},[220,41105,359],{"class":264},[212,41107,41108],{"className":2844,"code":41019,"language":2846,"meta":178,"style":178},[99,41109,41110,41118,41126,41134,41142],{"__ignoreMap":178},[220,41111,41112,41114,41116],{"class":222,"line":223},[220,41113,343],{"class":264},[220,41115,347],{"class":420},[220,41117,359],{"class":264},[220,41119,41120,41122,41124],{"class":222,"line":179},[220,41121,364],{"class":264},[220,41123,22540],{"class":420},[220,41125,359],{"class":264},[220,41127,41128,41130,41132],{"class":222,"line":389},[220,41129,2550],{"class":264},[220,41131,2553],{"class":420},[220,41133,386],{"class":264},[220,41135,41136,41138,41140],{"class":222,"line":399},[220,41137,2567],{"class":264},[220,41139,22540],{"class":420},[220,41141,359],{"class":264},[220,41143,41144,41146,41148],{"class":222,"line":644},[220,41145,402],{"class":264},[220,41147,347],{"class":420},[220,41149,359],{"class":264},[212,41151,41152],{"className":468,"code":41019,"language":469,"meta":178,"style":178},[99,41153,41154,41162,41170,41178,41186],{"__ignoreMap":178},[220,41155,41156,41158,41160],{"class":222,"line":223},[220,41157,343],{"class":264},[220,41159,347],{"class":420},[220,41161,359],{"class":264},[220,41163,41164,41166,41168],{"class":222,"line":179},[220,41165,364],{"class":264},[220,41167,22540],{"class":420},[220,41169,359],{"class":264},[220,41171,41172,41174,41176],{"class":222,"line":389},[220,41173,2550],{"class":264},[220,41175,2553],{"class":420},[220,41177,386],{"class":264},[220,41179,41180,41182,41184],{"class":222,"line":399},[220,41181,2567],{"class":264},[220,41183,22540],{"class":420},[220,41185,359],{"class":264},[220,41187,41188,41190,41192],{"class":222,"line":644},[220,41189,402],{"class":264},[220,41191,347],{"class":420},[220,41193,359],{"class":264},[212,41195,41197],{"className":251,"code":41196,"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,41198,41199,41209,41213,41227,41231,41240,41248,41252,41256],{"__ignoreMap":178},[220,41200,41201,41203,41205,41207],{"class":222,"line":223},[220,41202,261],{"class":260},[220,41204,10879],{"class":264},[220,41206,268],{"class":260},[220,41208,4007],{"class":230},[220,41210,41211],{"class":222,"line":179},[220,41212,647],{"emptyLinePlaceholder":194},[220,41214,41215,41217,41219,41221,41223,41225],{"class":222,"line":389},[220,41216,1735],{"class":260},[220,41218,1738],{"class":420},[220,41220,1741],{"class":260},[220,41222,1744],{"class":260},[220,41224,1747],{"class":226},[220,41226,1750],{"class":264},[220,41228,41229],{"class":222,"line":399},[220,41230,1765],{"class":264},[220,41232,41233,41235,41238],{"class":222,"line":644},[220,41234,1770],{"class":264},[220,41236,41237],{"class":230},"'Crystal'",[220,41239,6375],{"class":264},[220,41241,41242,41244,41246],{"class":222,"line":650},[220,41243,6380],{"class":264},[220,41245,3206],{"class":230},[220,41247,2465],{"class":264},[220,41249,41250],{"class":222,"line":656},[220,41251,6397],{"class":264},[220,41253,41254],{"class":222,"line":673},[220,41255,1787],{"class":264},[220,41257,41258],{"class":222,"line":682},[220,41259,1792],{"class":264},[1504,41261,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":41263},[41264,41265],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":22540,"description":41005},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":41272,"title":41273,"body":41274,"category":32433,"componentType":25247,"description":41281,"extension":191,"meta":41465,"navigation":194,"path":41466,"requiresChild":31900,"seo":41467,"stem":41468,"__hash__":41469},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":41275,"toc":41461},[41276,41279,41282,41284,41286,41288,41290,41459],[11,41277,41273],{"id":41278},"curlnoise",[15,41280,41281],{},"Swirling divergence-free flow field that drifts over time",[31281,41283],{"component":41273},[23,41285,31285],{"id":25903},[31287,41287],{":props":34018},[23,41289,31293],{"id":31292},[246,41291,41292,41321,41349,41377,41405],{":tabs":1557},[212,41293,41295],{"className":334,"code":41294,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,41296,41297,41305,41313],{"__ignoreMap":178},[220,41298,41299,41301,41303],{"class":222,"line":223},[220,41300,343],{"class":264},[220,41302,347],{"class":346},[220,41304,359],{"class":264},[220,41306,41307,41309,41311],{"class":222,"line":179},[220,41308,364],{"class":264},[220,41310,41273],{"class":346},[220,41312,386],{"class":264},[220,41314,41315,41317,41319],{"class":222,"line":389},[220,41316,402],{"class":264},[220,41318,347],{"class":346},[220,41320,359],{"class":264},[212,41322,41323],{"className":409,"code":41294,"language":411,"meta":178,"style":178},[99,41324,41325,41333,41341],{"__ignoreMap":178},[220,41326,41327,41329,41331],{"class":222,"line":223},[220,41328,343],{"class":264},[220,41330,347],{"class":420},[220,41332,359],{"class":264},[220,41334,41335,41337,41339],{"class":222,"line":179},[220,41336,364],{"class":264},[220,41338,41273],{"class":420},[220,41340,386],{"class":264},[220,41342,41343,41345,41347],{"class":222,"line":389},[220,41344,402],{"class":264},[220,41346,347],{"class":420},[220,41348,359],{"class":264},[212,41350,41351],{"className":2844,"code":41294,"language":2846,"meta":178,"style":178},[99,41352,41353,41361,41369],{"__ignoreMap":178},[220,41354,41355,41357,41359],{"class":222,"line":223},[220,41356,343],{"class":264},[220,41358,347],{"class":420},[220,41360,359],{"class":264},[220,41362,41363,41365,41367],{"class":222,"line":179},[220,41364,364],{"class":264},[220,41366,41273],{"class":420},[220,41368,386],{"class":264},[220,41370,41371,41373,41375],{"class":222,"line":389},[220,41372,402],{"class":264},[220,41374,347],{"class":420},[220,41376,359],{"class":264},[212,41378,41379],{"className":468,"code":41294,"language":469,"meta":178,"style":178},[99,41380,41381,41389,41397],{"__ignoreMap":178},[220,41382,41383,41385,41387],{"class":222,"line":223},[220,41384,343],{"class":264},[220,41386,347],{"class":420},[220,41388,359],{"class":264},[220,41390,41391,41393,41395],{"class":222,"line":179},[220,41392,364],{"class":264},[220,41394,41273],{"class":420},[220,41396,386],{"class":264},[220,41398,41399,41401,41403],{"class":222,"line":389},[220,41400,402],{"class":264},[220,41402,347],{"class":420},[220,41404,359],{"class":264},[212,41406,41408],{"className":251,"code":41407,"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,41409,41410,41420,41424,41438,41442,41451,41455],{"__ignoreMap":178},[220,41411,41412,41414,41416,41418],{"class":222,"line":223},[220,41413,261],{"class":260},[220,41415,10879],{"class":264},[220,41417,268],{"class":260},[220,41419,4007],{"class":230},[220,41421,41422],{"class":222,"line":179},[220,41423,647],{"emptyLinePlaceholder":194},[220,41425,41426,41428,41430,41432,41434,41436],{"class":222,"line":389},[220,41427,1735],{"class":260},[220,41429,1738],{"class":420},[220,41431,1741],{"class":260},[220,41433,1744],{"class":260},[220,41435,1747],{"class":226},[220,41437,1750],{"class":264},[220,41439,41440],{"class":222,"line":399},[220,41441,1765],{"class":264},[220,41443,41444,41446,41449],{"class":222,"line":644},[220,41445,1770],{"class":264},[220,41447,41448],{"class":230},"'CurlNoise'",[220,41450,2465],{"class":264},[220,41452,41453],{"class":222,"line":650},[220,41454,1787],{"class":264},[220,41456,41457],{"class":222,"line":656},[220,41458,1792],{"class":264},[1504,41460,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":41462},[41463,41464],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":41273,"description":41281},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":41471,"title":13793,"body":41472,"category":34929,"componentType":25253,"description":41479,"extension":191,"meta":41844,"navigation":194,"path":41845,"requiresChild":194,"seo":41846,"stem":41847,"__hash__":41848},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":41473,"toc":41840},[41474,41477,41480,41482,41484,41487,41489,41838],[11,41475,13793],{"id":41476},"cursorripples",[15,41478,41479],{},"Fluid-like ripple distortion",[31281,41481],{"component":13793},[23,41483,31285],{"id":25903},[31287,41485],{":props":41486},"[{\"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,41488,31293],{"id":31292},[246,41490,41491,41557,41628,41694,41764],{":tabs":1557},[212,41492,41494],{"className":334,"code":41493,"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,41495,41496,41504,41511,41520,41529,41533,41541,41549],{"__ignoreMap":178},[220,41497,41498,41500,41502],{"class":222,"line":223},[220,41499,343],{"class":264},[220,41501,347],{"class":346},[220,41503,359],{"class":264},[220,41505,41506,41508],{"class":222,"line":179},[220,41507,364],{"class":264},[220,41509,41510],{"class":346},"CursorRipples\n",[220,41512,41513,41515,41517],{"class":222,"line":389},[220,41514,19739],{"class":226},[220,41516,353],{"class":264},[220,41518,41519],{"class":230},"\"10\"\n",[220,41521,41522,41524,41526],{"class":222,"line":399},[220,41523,16772],{"class":226},[220,41525,353],{"class":264},[220,41527,41528],{"class":230},"\"0.5\"\n",[220,41530,41531],{"class":222,"line":644},[220,41532,31329],{"class":264},[220,41534,41535,41537,41539],{"class":222,"line":650},[220,41536,2550],{"class":264},[220,41538,2553],{"class":346},[220,41540,386],{"class":264},[220,41542,41543,41545,41547],{"class":222,"line":656},[220,41544,2567],{"class":264},[220,41546,13793],{"class":346},[220,41548,359],{"class":264},[220,41550,41551,41553,41555],{"class":222,"line":673},[220,41552,402],{"class":264},[220,41554,347],{"class":346},[220,41556,359],{"class":264},[212,41558,41560],{"className":409,"code":41559,"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,41561,41562,41570,41576,41588,41600,41604,41612,41620],{"__ignoreMap":178},[220,41563,41564,41566,41568],{"class":222,"line":223},[220,41565,343],{"class":264},[220,41567,347],{"class":420},[220,41569,359],{"class":264},[220,41571,41572,41574],{"class":222,"line":179},[220,41573,364],{"class":264},[220,41575,41510],{"class":420},[220,41577,41578,41580,41582,41584,41586],{"class":222,"line":389},[220,41579,19850],{"class":226},[220,41581,353],{"class":260},[220,41583,743],{"class":264},[220,41585,23219],{"class":420},[220,41587,749],{"class":264},[220,41589,41590,41592,41594,41596,41598],{"class":222,"line":399},[220,41591,9012],{"class":226},[220,41593,353],{"class":260},[220,41595,743],{"class":264},[220,41597,7120],{"class":420},[220,41599,749],{"class":264},[220,41601,41602],{"class":222,"line":644},[220,41603,31329],{"class":264},[220,41605,41606,41608,41610],{"class":222,"line":650},[220,41607,2550],{"class":264},[220,41609,2553],{"class":420},[220,41611,386],{"class":264},[220,41613,41614,41616,41618],{"class":222,"line":656},[220,41615,2567],{"class":264},[220,41617,13793],{"class":420},[220,41619,359],{"class":264},[220,41621,41622,41624,41626],{"class":222,"line":673},[220,41623,402],{"class":264},[220,41625,347],{"class":420},[220,41627,359],{"class":264},[212,41629,41630],{"className":2844,"code":41559,"language":2846,"meta":178,"style":178},[99,41631,41632,41640,41646,41656,41666,41670,41678,41686],{"__ignoreMap":178},[220,41633,41634,41636,41638],{"class":222,"line":223},[220,41635,343],{"class":264},[220,41637,347],{"class":420},[220,41639,359],{"class":264},[220,41641,41642,41644],{"class":222,"line":179},[220,41643,364],{"class":264},[220,41645,41510],{"class":420},[220,41647,41648,41650,41652,41654],{"class":222,"line":389},[220,41649,19850],{"class":226},[220,41651,29241],{"class":264},[220,41653,23219],{"class":420},[220,41655,749],{"class":264},[220,41657,41658,41660,41662,41664],{"class":222,"line":399},[220,41659,9012],{"class":226},[220,41661,29241],{"class":264},[220,41663,7120],{"class":420},[220,41665,749],{"class":264},[220,41667,41668],{"class":222,"line":644},[220,41669,31329],{"class":264},[220,41671,41672,41674,41676],{"class":222,"line":650},[220,41673,2550],{"class":264},[220,41675,2553],{"class":420},[220,41677,386],{"class":264},[220,41679,41680,41682,41684],{"class":222,"line":656},[220,41681,2567],{"class":264},[220,41683,13793],{"class":420},[220,41685,359],{"class":264},[220,41687,41688,41690,41692],{"class":222,"line":673},[220,41689,402],{"class":264},[220,41691,347],{"class":420},[220,41693,359],{"class":264},[212,41695,41696],{"className":468,"code":41559,"language":469,"meta":178,"style":178},[99,41697,41698,41706,41712,41724,41736,41740,41748,41756],{"__ignoreMap":178},[220,41699,41700,41702,41704],{"class":222,"line":223},[220,41701,343],{"class":264},[220,41703,347],{"class":420},[220,41705,359],{"class":264},[220,41707,41708,41710],{"class":222,"line":179},[220,41709,364],{"class":264},[220,41711,41510],{"class":420},[220,41713,41714,41716,41718,41720,41722],{"class":222,"line":389},[220,41715,19850],{"class":226},[220,41717,353],{"class":260},[220,41719,743],{"class":264},[220,41721,23219],{"class":420},[220,41723,749],{"class":264},[220,41725,41726,41728,41730,41732,41734],{"class":222,"line":399},[220,41727,9012],{"class":226},[220,41729,353],{"class":260},[220,41731,743],{"class":264},[220,41733,7120],{"class":420},[220,41735,749],{"class":264},[220,41737,41738],{"class":222,"line":644},[220,41739,31329],{"class":264},[220,41741,41742,41744,41746],{"class":222,"line":650},[220,41743,2550],{"class":264},[220,41745,2553],{"class":420},[220,41747,386],{"class":264},[220,41749,41750,41752,41754],{"class":222,"line":656},[220,41751,2567],{"class":264},[220,41753,13793],{"class":420},[220,41755,359],{"class":264},[220,41757,41758,41760,41762],{"class":222,"line":673},[220,41759,402],{"class":264},[220,41761,347],{"class":420},[220,41763,359],{"class":264},[212,41765,41767],{"className":251,"code":41766,"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,41768,41769,41779,41783,41797,41801,41818,41826,41830,41834],{"__ignoreMap":178},[220,41770,41771,41773,41775,41777],{"class":222,"line":223},[220,41772,261],{"class":260},[220,41774,10879],{"class":264},[220,41776,268],{"class":260},[220,41778,4007],{"class":230},[220,41780,41781],{"class":222,"line":179},[220,41782,647],{"emptyLinePlaceholder":194},[220,41784,41785,41787,41789,41791,41793,41795],{"class":222,"line":389},[220,41786,1735],{"class":260},[220,41788,1738],{"class":420},[220,41790,1741],{"class":260},[220,41792,1744],{"class":260},[220,41794,1747],{"class":226},[220,41796,1750],{"class":264},[220,41798,41799],{"class":222,"line":399},[220,41800,1765],{"class":264},[220,41802,41803,41805,41808,41810,41812,41814,41816],{"class":222,"line":644},[220,41804,1770],{"class":264},[220,41806,41807],{"class":230},"'CursorRipples'",[220,41809,31573],{"class":264},[220,41811,23219],{"class":420},[220,41813,5932],{"class":264},[220,41815,7120],{"class":420},[220,41817,6912],{"class":264},[220,41819,41820,41822,41824],{"class":222,"line":650},[220,41821,6380],{"class":264},[220,41823,3206],{"class":230},[220,41825,2465],{"class":264},[220,41827,41828],{"class":222,"line":656},[220,41829,6397],{"class":264},[220,41831,41832],{"class":222,"line":673},[220,41833,1787],{"class":264},[220,41835,41836],{"class":222,"line":682},[220,41837,1792],{"class":264},[1504,41839,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41841},[41842,41843],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":13793,"description":41479},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":41850,"title":394,"body":41851,"category":34929,"componentType":25247,"description":41858,"extension":191,"meta":42098,"navigation":194,"path":42099,"requiresChild":31900,"seo":42100,"stem":42101,"__hash__":42102},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":41852,"toc":42094},[41853,41856,41859,41861,41863,41866,41868,42092],[11,41854,394],{"id":41855},"cursortrail",[15,41857,41858],{},"Animated trail effect that tracks cursor movement",[31281,41860],{"component":394},[23,41862,31285],{"id":25903},[31287,41864],{":props":41865},"[{\"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,41867,31293],{"id":31292},[246,41869,41870,41910,41953,41993,42035],{":tabs":1557},[212,41871,41873],{"className":334,"code":41872,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,41874,41875,41883,41890,41898,41902],{"__ignoreMap":178},[220,41876,41877,41879,41881],{"class":222,"line":223},[220,41878,343],{"class":264},[220,41880,347],{"class":346},[220,41882,359],{"class":264},[220,41884,41885,41887],{"class":222,"line":179},[220,41886,364],{"class":264},[220,41888,41889],{"class":346},"CursorTrail\n",[220,41891,41892,41894,41896],{"class":222,"line":389},[220,41893,16772],{"class":226},[220,41895,353],{"class":264},[220,41897,41528],{"class":230},[220,41899,41900],{"class":222,"line":399},[220,41901,1234],{"class":264},[220,41903,41904,41906,41908],{"class":222,"line":644},[220,41905,402],{"class":264},[220,41907,347],{"class":346},[220,41909,359],{"class":264},[212,41911,41913],{"className":409,"code":41912,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,41914,41915,41923,41929,41941,41945],{"__ignoreMap":178},[220,41916,41917,41919,41921],{"class":222,"line":223},[220,41918,343],{"class":264},[220,41920,347],{"class":420},[220,41922,359],{"class":264},[220,41924,41925,41927],{"class":222,"line":179},[220,41926,364],{"class":264},[220,41928,41889],{"class":420},[220,41930,41931,41933,41935,41937,41939],{"class":222,"line":389},[220,41932,9012],{"class":226},[220,41934,353],{"class":260},[220,41936,743],{"class":264},[220,41938,7120],{"class":420},[220,41940,749],{"class":264},[220,41942,41943],{"class":222,"line":399},[220,41944,1234],{"class":264},[220,41946,41947,41949,41951],{"class":222,"line":644},[220,41948,402],{"class":264},[220,41950,347],{"class":420},[220,41952,359],{"class":264},[212,41954,41955],{"className":2844,"code":41912,"language":2846,"meta":178,"style":178},[99,41956,41957,41965,41971,41981,41985],{"__ignoreMap":178},[220,41958,41959,41961,41963],{"class":222,"line":223},[220,41960,343],{"class":264},[220,41962,347],{"class":420},[220,41964,359],{"class":264},[220,41966,41967,41969],{"class":222,"line":179},[220,41968,364],{"class":264},[220,41970,41889],{"class":420},[220,41972,41973,41975,41977,41979],{"class":222,"line":389},[220,41974,9012],{"class":226},[220,41976,29241],{"class":264},[220,41978,7120],{"class":420},[220,41980,749],{"class":264},[220,41982,41983],{"class":222,"line":399},[220,41984,1234],{"class":264},[220,41986,41987,41989,41991],{"class":222,"line":644},[220,41988,402],{"class":264},[220,41990,347],{"class":420},[220,41992,359],{"class":264},[212,41994,41995],{"className":468,"code":41912,"language":469,"meta":178,"style":178},[99,41996,41997,42005,42011,42023,42027],{"__ignoreMap":178},[220,41998,41999,42001,42003],{"class":222,"line":223},[220,42000,343],{"class":264},[220,42002,347],{"class":420},[220,42004,359],{"class":264},[220,42006,42007,42009],{"class":222,"line":179},[220,42008,364],{"class":264},[220,42010,41889],{"class":420},[220,42012,42013,42015,42017,42019,42021],{"class":222,"line":389},[220,42014,9012],{"class":226},[220,42016,353],{"class":260},[220,42018,743],{"class":264},[220,42020,7120],{"class":420},[220,42022,749],{"class":264},[220,42024,42025],{"class":222,"line":399},[220,42026,1234],{"class":264},[220,42028,42029,42031,42033],{"class":222,"line":644},[220,42030,402],{"class":264},[220,42032,347],{"class":420},[220,42034,359],{"class":264},[212,42036,42038],{"className":251,"code":42037,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorTrail', props: { radius: 0.5 } }\n ]\n})\n",[99,42039,42040,42050,42054,42068,42072,42084,42088],{"__ignoreMap":178},[220,42041,42042,42044,42046,42048],{"class":222,"line":223},[220,42043,261],{"class":260},[220,42045,10879],{"class":264},[220,42047,268],{"class":260},[220,42049,4007],{"class":230},[220,42051,42052],{"class":222,"line":179},[220,42053,647],{"emptyLinePlaceholder":194},[220,42055,42056,42058,42060,42062,42064,42066],{"class":222,"line":389},[220,42057,1735],{"class":260},[220,42059,1738],{"class":420},[220,42061,1741],{"class":260},[220,42063,1744],{"class":260},[220,42065,1747],{"class":226},[220,42067,1750],{"class":264},[220,42069,42070],{"class":222,"line":399},[220,42071,1765],{"class":264},[220,42073,42074,42076,42078,42080,42082],{"class":222,"line":644},[220,42075,1770],{"class":264},[220,42077,25735],{"class":230},[220,42079,6907],{"class":264},[220,42081,7120],{"class":420},[220,42083,1782],{"class":264},[220,42085,42086],{"class":222,"line":650},[220,42087,1787],{"class":264},[220,42089,42090],{"class":222,"line":656},[220,42091,1792],{"class":264},[1504,42093,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42095},[42096,42097],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":41858},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42104,"title":42105,"body":42106,"category":32176,"componentType":25253,"description":42113,"extension":191,"meta":42431,"navigation":194,"path":42432,"requiresChild":194,"seo":42433,"stem":42434,"__hash__":42435},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42107,"toc":42427},[42108,42111,42114,42116,42118,42121,42123,42425],[11,42109,42105],{"id":42110},"datamosh",[15,42112,42113],{},"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",[31281,42115],{"component":42105},[23,42117,31285],{"id":25903},[31287,42119],{":props":42120},"[{\"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,42122,31293],{"id":31292},[246,42124,42125,42182,42241,42297,42355],{":tabs":1557},[212,42126,42128],{"className":334,"code":42127,"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,42129,42130,42138,42145,42154,42158,42166,42174],{"__ignoreMap":178},[220,42131,42132,42134,42136],{"class":222,"line":223},[220,42133,343],{"class":264},[220,42135,347],{"class":346},[220,42137,359],{"class":264},[220,42139,42140,42142],{"class":222,"line":179},[220,42141,364],{"class":264},[220,42143,42144],{"class":346},"DataMosh\n",[220,42146,42147,42149,42151],{"class":222,"line":389},[220,42148,19739],{"class":226},[220,42150,353],{"class":264},[220,42152,42153],{"class":230},"\"0.7\"\n",[220,42155,42156],{"class":222,"line":399},[220,42157,31329],{"class":264},[220,42159,42160,42162,42164],{"class":222,"line":644},[220,42161,2550],{"class":264},[220,42163,2553],{"class":346},[220,42165,386],{"class":264},[220,42167,42168,42170,42172],{"class":222,"line":650},[220,42169,2567],{"class":264},[220,42171,42105],{"class":346},[220,42173,359],{"class":264},[220,42175,42176,42178,42180],{"class":222,"line":656},[220,42177,402],{"class":264},[220,42179,347],{"class":346},[220,42181,359],{"class":264},[212,42183,42185],{"className":409,"code":42184,"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,42186,42187,42195,42201,42213,42217,42225,42233],{"__ignoreMap":178},[220,42188,42189,42191,42193],{"class":222,"line":223},[220,42190,343],{"class":264},[220,42192,347],{"class":420},[220,42194,359],{"class":264},[220,42196,42197,42199],{"class":222,"line":179},[220,42198,364],{"class":264},[220,42200,42144],{"class":420},[220,42202,42203,42205,42207,42209,42211],{"class":222,"line":389},[220,42204,19850],{"class":226},[220,42206,353],{"class":260},[220,42208,743],{"class":264},[220,42210,18311],{"class":420},[220,42212,749],{"class":264},[220,42214,42215],{"class":222,"line":399},[220,42216,31329],{"class":264},[220,42218,42219,42221,42223],{"class":222,"line":644},[220,42220,2550],{"class":264},[220,42222,2553],{"class":420},[220,42224,386],{"class":264},[220,42226,42227,42229,42231],{"class":222,"line":650},[220,42228,2567],{"class":264},[220,42230,42105],{"class":420},[220,42232,359],{"class":264},[220,42234,42235,42237,42239],{"class":222,"line":656},[220,42236,402],{"class":264},[220,42238,347],{"class":420},[220,42240,359],{"class":264},[212,42242,42243],{"className":2844,"code":42184,"language":2846,"meta":178,"style":178},[99,42244,42245,42253,42259,42269,42273,42281,42289],{"__ignoreMap":178},[220,42246,42247,42249,42251],{"class":222,"line":223},[220,42248,343],{"class":264},[220,42250,347],{"class":420},[220,42252,359],{"class":264},[220,42254,42255,42257],{"class":222,"line":179},[220,42256,364],{"class":264},[220,42258,42144],{"class":420},[220,42260,42261,42263,42265,42267],{"class":222,"line":389},[220,42262,19850],{"class":226},[220,42264,29241],{"class":264},[220,42266,18311],{"class":420},[220,42268,749],{"class":264},[220,42270,42271],{"class":222,"line":399},[220,42272,31329],{"class":264},[220,42274,42275,42277,42279],{"class":222,"line":644},[220,42276,2550],{"class":264},[220,42278,2553],{"class":420},[220,42280,386],{"class":264},[220,42282,42283,42285,42287],{"class":222,"line":650},[220,42284,2567],{"class":264},[220,42286,42105],{"class":420},[220,42288,359],{"class":264},[220,42290,42291,42293,42295],{"class":222,"line":656},[220,42292,402],{"class":264},[220,42294,347],{"class":420},[220,42296,359],{"class":264},[212,42298,42299],{"className":468,"code":42184,"language":469,"meta":178,"style":178},[99,42300,42301,42309,42315,42327,42331,42339,42347],{"__ignoreMap":178},[220,42302,42303,42305,42307],{"class":222,"line":223},[220,42304,343],{"class":264},[220,42306,347],{"class":420},[220,42308,359],{"class":264},[220,42310,42311,42313],{"class":222,"line":179},[220,42312,364],{"class":264},[220,42314,42144],{"class":420},[220,42316,42317,42319,42321,42323,42325],{"class":222,"line":389},[220,42318,19850],{"class":226},[220,42320,353],{"class":260},[220,42322,743],{"class":264},[220,42324,18311],{"class":420},[220,42326,749],{"class":264},[220,42328,42329],{"class":222,"line":399},[220,42330,31329],{"class":264},[220,42332,42333,42335,42337],{"class":222,"line":644},[220,42334,2550],{"class":264},[220,42336,2553],{"class":420},[220,42338,386],{"class":264},[220,42340,42341,42343,42345],{"class":222,"line":650},[220,42342,2567],{"class":264},[220,42344,42105],{"class":420},[220,42346,359],{"class":264},[220,42348,42349,42351,42353],{"class":222,"line":656},[220,42350,402],{"class":264},[220,42352,347],{"class":420},[220,42354,359],{"class":264},[212,42356,42358],{"className":251,"code":42357,"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,42359,42360,42370,42374,42388,42392,42405,42413,42417,42421],{"__ignoreMap":178},[220,42361,42362,42364,42366,42368],{"class":222,"line":223},[220,42363,261],{"class":260},[220,42365,10879],{"class":264},[220,42367,268],{"class":260},[220,42369,4007],{"class":230},[220,42371,42372],{"class":222,"line":179},[220,42373,647],{"emptyLinePlaceholder":194},[220,42375,42376,42378,42380,42382,42384,42386],{"class":222,"line":389},[220,42377,1735],{"class":260},[220,42379,1738],{"class":420},[220,42381,1741],{"class":260},[220,42383,1744],{"class":260},[220,42385,1747],{"class":226},[220,42387,1750],{"class":264},[220,42389,42390],{"class":222,"line":399},[220,42391,1765],{"class":264},[220,42393,42394,42396,42399,42401,42403],{"class":222,"line":644},[220,42395,1770],{"class":264},[220,42397,42398],{"class":230},"'DataMosh'",[220,42400,31573],{"class":264},[220,42402,18311],{"class":420},[220,42404,6912],{"class":264},[220,42406,42407,42409,42411],{"class":222,"line":650},[220,42408,6380],{"class":264},[220,42410,3206],{"class":230},[220,42412,2465],{"class":264},[220,42414,42415],{"class":222,"line":656},[220,42416,6397],{"class":264},[220,42418,42419],{"class":222,"line":673},[220,42420,1787],{"class":264},[220,42422,42423],{"class":222,"line":682},[220,42424,1792],{"class":264},[1504,42426,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42428},[42429,42430],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42105,"description":42113},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":42437,"title":42438,"body":42439,"category":32433,"componentType":25247,"description":42446,"extension":191,"meta":42631,"navigation":194,"path":42632,"requiresChild":31900,"seo":42633,"stem":42634,"__hash__":42635},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":42440,"toc":42627},[42441,42444,42447,42449,42451,42454,42456,42625],[11,42442,42438],{"id":42443},"diamondgradient",[15,42445,42446],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31281,42448],{"component":42438},[23,42450,31285],{"id":25903},[31287,42452],{":props":42453},"[{\"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,42455,31293],{"id":31292},[246,42457,42458,42487,42515,42543,42571],{":tabs":1557},[212,42459,42461],{"className":334,"code":42460,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,42462,42463,42471,42479],{"__ignoreMap":178},[220,42464,42465,42467,42469],{"class":222,"line":223},[220,42466,343],{"class":264},[220,42468,347],{"class":346},[220,42470,359],{"class":264},[220,42472,42473,42475,42477],{"class":222,"line":179},[220,42474,364],{"class":264},[220,42476,42438],{"class":346},[220,42478,386],{"class":264},[220,42480,42481,42483,42485],{"class":222,"line":389},[220,42482,402],{"class":264},[220,42484,347],{"class":346},[220,42486,359],{"class":264},[212,42488,42489],{"className":409,"code":42460,"language":411,"meta":178,"style":178},[99,42490,42491,42499,42507],{"__ignoreMap":178},[220,42492,42493,42495,42497],{"class":222,"line":223},[220,42494,343],{"class":264},[220,42496,347],{"class":420},[220,42498,359],{"class":264},[220,42500,42501,42503,42505],{"class":222,"line":179},[220,42502,364],{"class":264},[220,42504,42438],{"class":420},[220,42506,386],{"class":264},[220,42508,42509,42511,42513],{"class":222,"line":389},[220,42510,402],{"class":264},[220,42512,347],{"class":420},[220,42514,359],{"class":264},[212,42516,42517],{"className":2844,"code":42460,"language":2846,"meta":178,"style":178},[99,42518,42519,42527,42535],{"__ignoreMap":178},[220,42520,42521,42523,42525],{"class":222,"line":223},[220,42522,343],{"class":264},[220,42524,347],{"class":420},[220,42526,359],{"class":264},[220,42528,42529,42531,42533],{"class":222,"line":179},[220,42530,364],{"class":264},[220,42532,42438],{"class":420},[220,42534,386],{"class":264},[220,42536,42537,42539,42541],{"class":222,"line":389},[220,42538,402],{"class":264},[220,42540,347],{"class":420},[220,42542,359],{"class":264},[212,42544,42545],{"className":468,"code":42460,"language":469,"meta":178,"style":178},[99,42546,42547,42555,42563],{"__ignoreMap":178},[220,42548,42549,42551,42553],{"class":222,"line":223},[220,42550,343],{"class":264},[220,42552,347],{"class":420},[220,42554,359],{"class":264},[220,42556,42557,42559,42561],{"class":222,"line":179},[220,42558,364],{"class":264},[220,42560,42438],{"class":420},[220,42562,386],{"class":264},[220,42564,42565,42567,42569],{"class":222,"line":389},[220,42566,402],{"class":264},[220,42568,347],{"class":420},[220,42570,359],{"class":264},[212,42572,42574],{"className":251,"code":42573,"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,42575,42576,42586,42590,42604,42608,42617,42621],{"__ignoreMap":178},[220,42577,42578,42580,42582,42584],{"class":222,"line":223},[220,42579,261],{"class":260},[220,42581,10879],{"class":264},[220,42583,268],{"class":260},[220,42585,4007],{"class":230},[220,42587,42588],{"class":222,"line":179},[220,42589,647],{"emptyLinePlaceholder":194},[220,42591,42592,42594,42596,42598,42600,42602],{"class":222,"line":389},[220,42593,1735],{"class":260},[220,42595,1738],{"class":420},[220,42597,1741],{"class":260},[220,42599,1744],{"class":260},[220,42601,1747],{"class":226},[220,42603,1750],{"class":264},[220,42605,42606],{"class":222,"line":399},[220,42607,1765],{"class":264},[220,42609,42610,42612,42615],{"class":222,"line":644},[220,42611,1770],{"class":264},[220,42613,42614],{"class":230},"'DiamondGradient'",[220,42616,2465],{"class":264},[220,42618,42619],{"class":222,"line":650},[220,42620,1787],{"class":264},[220,42622,42623],{"class":222,"line":656},[220,42624,1792],{"class":264},[1504,42626,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":42628},[42629,42630],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":42438,"description":42446},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":42637,"title":42638,"body":42639,"category":33043,"componentType":25253,"description":42646,"extension":191,"meta":42907,"navigation":194,"path":42908,"requiresChild":194,"seo":42909,"stem":42910,"__hash__":42911},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":42640,"toc":42903},[42641,42644,42647,42649,42651,42654,42656,42901],[11,42642,42638],{"id":42643},"diamondwipe",[15,42645,42646],{},"Wipe the content away through a lattice of growing diamonds",[31281,42648],{"component":42638},[23,42650,31285],{"id":25903},[31287,42652],{":props":42653},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the diamonds have grown (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Size of each diamond cell as a fraction of the frame width\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of each diamond edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the cell corners inward instead\"}]",[23,42655,31293],{"id":31292},[246,42657,42658,42703,42747,42791,42835],{":tabs":1557},[212,42659,42661],{"className":334,"code":42660,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,42662,42663,42671,42679,42687,42695],{"__ignoreMap":178},[220,42664,42665,42667,42669],{"class":222,"line":223},[220,42666,343],{"class":264},[220,42668,347],{"class":346},[220,42670,359],{"class":264},[220,42672,42673,42675,42677],{"class":222,"line":179},[220,42674,364],{"class":264},[220,42676,42638],{"class":346},[220,42678,359],{"class":264},[220,42680,42681,42683,42685],{"class":222,"line":389},[220,42682,2550],{"class":264},[220,42684,2553],{"class":346},[220,42686,386],{"class":264},[220,42688,42689,42691,42693],{"class":222,"line":399},[220,42690,2567],{"class":264},[220,42692,42638],{"class":346},[220,42694,359],{"class":264},[220,42696,42697,42699,42701],{"class":222,"line":644},[220,42698,402],{"class":264},[220,42700,347],{"class":346},[220,42702,359],{"class":264},[212,42704,42705],{"className":409,"code":42660,"language":411,"meta":178,"style":178},[99,42706,42707,42715,42723,42731,42739],{"__ignoreMap":178},[220,42708,42709,42711,42713],{"class":222,"line":223},[220,42710,343],{"class":264},[220,42712,347],{"class":420},[220,42714,359],{"class":264},[220,42716,42717,42719,42721],{"class":222,"line":179},[220,42718,364],{"class":264},[220,42720,42638],{"class":420},[220,42722,359],{"class":264},[220,42724,42725,42727,42729],{"class":222,"line":389},[220,42726,2550],{"class":264},[220,42728,2553],{"class":420},[220,42730,386],{"class":264},[220,42732,42733,42735,42737],{"class":222,"line":399},[220,42734,2567],{"class":264},[220,42736,42638],{"class":420},[220,42738,359],{"class":264},[220,42740,42741,42743,42745],{"class":222,"line":644},[220,42742,402],{"class":264},[220,42744,347],{"class":420},[220,42746,359],{"class":264},[212,42748,42749],{"className":2844,"code":42660,"language":2846,"meta":178,"style":178},[99,42750,42751,42759,42767,42775,42783],{"__ignoreMap":178},[220,42752,42753,42755,42757],{"class":222,"line":223},[220,42754,343],{"class":264},[220,42756,347],{"class":420},[220,42758,359],{"class":264},[220,42760,42761,42763,42765],{"class":222,"line":179},[220,42762,364],{"class":264},[220,42764,42638],{"class":420},[220,42766,359],{"class":264},[220,42768,42769,42771,42773],{"class":222,"line":389},[220,42770,2550],{"class":264},[220,42772,2553],{"class":420},[220,42774,386],{"class":264},[220,42776,42777,42779,42781],{"class":222,"line":399},[220,42778,2567],{"class":264},[220,42780,42638],{"class":420},[220,42782,359],{"class":264},[220,42784,42785,42787,42789],{"class":222,"line":644},[220,42786,402],{"class":264},[220,42788,347],{"class":420},[220,42790,359],{"class":264},[212,42792,42793],{"className":468,"code":42660,"language":469,"meta":178,"style":178},[99,42794,42795,42803,42811,42819,42827],{"__ignoreMap":178},[220,42796,42797,42799,42801],{"class":222,"line":223},[220,42798,343],{"class":264},[220,42800,347],{"class":420},[220,42802,359],{"class":264},[220,42804,42805,42807,42809],{"class":222,"line":179},[220,42806,364],{"class":264},[220,42808,42638],{"class":420},[220,42810,359],{"class":264},[220,42812,42813,42815,42817],{"class":222,"line":389},[220,42814,2550],{"class":264},[220,42816,2553],{"class":420},[220,42818,386],{"class":264},[220,42820,42821,42823,42825],{"class":222,"line":399},[220,42822,2567],{"class":264},[220,42824,42638],{"class":420},[220,42826,359],{"class":264},[220,42828,42829,42831,42833],{"class":222,"line":644},[220,42830,402],{"class":264},[220,42832,347],{"class":420},[220,42834,359],{"class":264},[212,42836,42838],{"className":251,"code":42837,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,42839,42840,42850,42854,42868,42872,42881,42889,42893,42897],{"__ignoreMap":178},[220,42841,42842,42844,42846,42848],{"class":222,"line":223},[220,42843,261],{"class":260},[220,42845,10879],{"class":264},[220,42847,268],{"class":260},[220,42849,4007],{"class":230},[220,42851,42852],{"class":222,"line":179},[220,42853,647],{"emptyLinePlaceholder":194},[220,42855,42856,42858,42860,42862,42864,42866],{"class":222,"line":389},[220,42857,1735],{"class":260},[220,42859,1738],{"class":420},[220,42861,1741],{"class":260},[220,42863,1744],{"class":260},[220,42865,1747],{"class":226},[220,42867,1750],{"class":264},[220,42869,42870],{"class":222,"line":399},[220,42871,1765],{"class":264},[220,42873,42874,42876,42879],{"class":222,"line":644},[220,42875,1770],{"class":264},[220,42877,42878],{"class":230},"'DiamondWipe'",[220,42880,6375],{"class":264},[220,42882,42883,42885,42887],{"class":222,"line":650},[220,42884,6380],{"class":264},[220,42886,3206],{"class":230},[220,42888,2465],{"class":264},[220,42890,42891],{"class":222,"line":656},[220,42892,6397],{"class":264},[220,42894,42895],{"class":222,"line":673},[220,42896,1787],{"class":264},[220,42898,42899],{"class":222,"line":682},[220,42900,1792],{"class":264},[1504,42902,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":42904},[42905,42906],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":42638,"description":42646},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":42913,"title":42914,"body":42915,"category":31604,"componentType":25253,"description":42922,"extension":191,"meta":43240,"navigation":194,"path":43241,"requiresChild":194,"seo":43242,"stem":43243,"__hash__":43244},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":42916,"toc":43236},[42917,42920,42923,42925,42927,42930,42932,43234],[11,42918,42914],{"id":42919},"diffuseblur",[15,42921,42922],{},"Grain-like pixel displacement at random",[31281,42924],{"component":42914},[23,42926,31285],{"id":25903},[31287,42928],{":props":42929},"[{\"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,42931,31293],{"id":31292},[246,42933,42934,42991,43050,43106,43164],{":tabs":1557},[212,42935,42937],{"className":334,"code":42936,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,42938,42939,42947,42954,42963,42967,42975,42983],{"__ignoreMap":178},[220,42940,42941,42943,42945],{"class":222,"line":223},[220,42942,343],{"class":264},[220,42944,347],{"class":346},[220,42946,359],{"class":264},[220,42948,42949,42951],{"class":222,"line":179},[220,42950,364],{"class":264},[220,42952,42953],{"class":346},"DiffuseBlur\n",[220,42955,42956,42958,42960],{"class":222,"line":389},[220,42957,19739],{"class":226},[220,42959,353],{"class":264},[220,42961,42962],{"class":230},"\"30\"\n",[220,42964,42965],{"class":222,"line":399},[220,42966,31329],{"class":264},[220,42968,42969,42971,42973],{"class":222,"line":644},[220,42970,2550],{"class":264},[220,42972,2553],{"class":346},[220,42974,386],{"class":264},[220,42976,42977,42979,42981],{"class":222,"line":650},[220,42978,2567],{"class":264},[220,42980,42914],{"class":346},[220,42982,359],{"class":264},[220,42984,42985,42987,42989],{"class":222,"line":656},[220,42986,402],{"class":264},[220,42988,347],{"class":346},[220,42990,359],{"class":264},[212,42992,42994],{"className":409,"code":42993,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,42995,42996,43004,43010,43022,43026,43034,43042],{"__ignoreMap":178},[220,42997,42998,43000,43002],{"class":222,"line":223},[220,42999,343],{"class":264},[220,43001,347],{"class":420},[220,43003,359],{"class":264},[220,43005,43006,43008],{"class":222,"line":179},[220,43007,364],{"class":264},[220,43009,42953],{"class":420},[220,43011,43012,43014,43016,43018,43020],{"class":222,"line":389},[220,43013,19850],{"class":226},[220,43015,353],{"class":260},[220,43017,743],{"class":264},[220,43019,23379],{"class":420},[220,43021,749],{"class":264},[220,43023,43024],{"class":222,"line":399},[220,43025,31329],{"class":264},[220,43027,43028,43030,43032],{"class":222,"line":644},[220,43029,2550],{"class":264},[220,43031,2553],{"class":420},[220,43033,386],{"class":264},[220,43035,43036,43038,43040],{"class":222,"line":650},[220,43037,2567],{"class":264},[220,43039,42914],{"class":420},[220,43041,359],{"class":264},[220,43043,43044,43046,43048],{"class":222,"line":656},[220,43045,402],{"class":264},[220,43047,347],{"class":420},[220,43049,359],{"class":264},[212,43051,43052],{"className":2844,"code":42993,"language":2846,"meta":178,"style":178},[99,43053,43054,43062,43068,43078,43082,43090,43098],{"__ignoreMap":178},[220,43055,43056,43058,43060],{"class":222,"line":223},[220,43057,343],{"class":264},[220,43059,347],{"class":420},[220,43061,359],{"class":264},[220,43063,43064,43066],{"class":222,"line":179},[220,43065,364],{"class":264},[220,43067,42953],{"class":420},[220,43069,43070,43072,43074,43076],{"class":222,"line":389},[220,43071,19850],{"class":226},[220,43073,29241],{"class":264},[220,43075,23379],{"class":420},[220,43077,749],{"class":264},[220,43079,43080],{"class":222,"line":399},[220,43081,31329],{"class":264},[220,43083,43084,43086,43088],{"class":222,"line":644},[220,43085,2550],{"class":264},[220,43087,2553],{"class":420},[220,43089,386],{"class":264},[220,43091,43092,43094,43096],{"class":222,"line":650},[220,43093,2567],{"class":264},[220,43095,42914],{"class":420},[220,43097,359],{"class":264},[220,43099,43100,43102,43104],{"class":222,"line":656},[220,43101,402],{"class":264},[220,43103,347],{"class":420},[220,43105,359],{"class":264},[212,43107,43108],{"className":468,"code":42993,"language":469,"meta":178,"style":178},[99,43109,43110,43118,43124,43136,43140,43148,43156],{"__ignoreMap":178},[220,43111,43112,43114,43116],{"class":222,"line":223},[220,43113,343],{"class":264},[220,43115,347],{"class":420},[220,43117,359],{"class":264},[220,43119,43120,43122],{"class":222,"line":179},[220,43121,364],{"class":264},[220,43123,42953],{"class":420},[220,43125,43126,43128,43130,43132,43134],{"class":222,"line":389},[220,43127,19850],{"class":226},[220,43129,353],{"class":260},[220,43131,743],{"class":264},[220,43133,23379],{"class":420},[220,43135,749],{"class":264},[220,43137,43138],{"class":222,"line":399},[220,43139,31329],{"class":264},[220,43141,43142,43144,43146],{"class":222,"line":644},[220,43143,2550],{"class":264},[220,43145,2553],{"class":420},[220,43147,386],{"class":264},[220,43149,43150,43152,43154],{"class":222,"line":650},[220,43151,2567],{"class":264},[220,43153,42914],{"class":420},[220,43155,359],{"class":264},[220,43157,43158,43160,43162],{"class":222,"line":656},[220,43159,402],{"class":264},[220,43161,347],{"class":420},[220,43163,359],{"class":264},[212,43165,43167],{"className":251,"code":43166,"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,43168,43169,43179,43183,43197,43201,43214,43222,43226,43230],{"__ignoreMap":178},[220,43170,43171,43173,43175,43177],{"class":222,"line":223},[220,43172,261],{"class":260},[220,43174,10879],{"class":264},[220,43176,268],{"class":260},[220,43178,4007],{"class":230},[220,43180,43181],{"class":222,"line":179},[220,43182,647],{"emptyLinePlaceholder":194},[220,43184,43185,43187,43189,43191,43193,43195],{"class":222,"line":389},[220,43186,1735],{"class":260},[220,43188,1738],{"class":420},[220,43190,1741],{"class":260},[220,43192,1744],{"class":260},[220,43194,1747],{"class":226},[220,43196,1750],{"class":264},[220,43198,43199],{"class":222,"line":399},[220,43200,1765],{"class":264},[220,43202,43203,43205,43208,43210,43212],{"class":222,"line":644},[220,43204,1770],{"class":264},[220,43206,43207],{"class":230},"'DiffuseBlur'",[220,43209,31573],{"class":264},[220,43211,23379],{"class":420},[220,43213,6912],{"class":264},[220,43215,43216,43218,43220],{"class":222,"line":650},[220,43217,6380],{"class":264},[220,43219,3206],{"class":230},[220,43221,2465],{"class":264},[220,43223,43224],{"class":222,"line":656},[220,43225,6397],{"class":264},[220,43227,43228],{"class":222,"line":673},[220,43229,1787],{"class":264},[220,43231,43232],{"class":222,"line":682},[220,43233,1792],{"class":264},[1504,43235,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43237},[43238,43239],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":42914,"description":42922},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":43246,"title":43247,"body":43248,"category":32766,"componentType":25253,"description":43255,"extension":191,"meta":43516,"navigation":194,"path":43517,"requiresChild":194,"seo":43518,"stem":43519,"__hash__":43520},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":43249,"toc":43512},[43250,43253,43256,43258,43260,43263,43265,43510],[11,43251,43247],{"id":43252},"displacementmap",[15,43254,43255],{},"Distorts child content using another layer's pixels as a displacement map",[31281,43257],{"component":43247},[23,43259,31285],{"id":25903},[31287,43261],{":props":43262},"[{\"name\":\"source\",\"type\":\"string\",\"default\":\"\",\"description\":\"The layer whose pixels drive the displacement — its red\u002Fgreen (or luminance) push the content around\"},{\"name\":\"amount\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Overall displacement strength\"},{\"name\":\"channelMode\",\"type\":\"\\\"twoAxis\\\" | \\\"directional\\\"\",\"default\":\"twoAxis\",\"description\":\"How the source drives the push — red→X \u002F green→Y, or luminance along a fixed angle\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Push direction in degrees (used by the Luminance channel mode)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,43264,31293],{"id":31292},[246,43266,43267,43312,43356,43400,43444],{":tabs":1557},[212,43268,43270],{"className":334,"code":43269,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,43271,43272,43280,43288,43296,43304],{"__ignoreMap":178},[220,43273,43274,43276,43278],{"class":222,"line":223},[220,43275,343],{"class":264},[220,43277,347],{"class":346},[220,43279,359],{"class":264},[220,43281,43282,43284,43286],{"class":222,"line":179},[220,43283,364],{"class":264},[220,43285,43247],{"class":346},[220,43287,359],{"class":264},[220,43289,43290,43292,43294],{"class":222,"line":389},[220,43291,2550],{"class":264},[220,43293,2553],{"class":346},[220,43295,386],{"class":264},[220,43297,43298,43300,43302],{"class":222,"line":399},[220,43299,2567],{"class":264},[220,43301,43247],{"class":346},[220,43303,359],{"class":264},[220,43305,43306,43308,43310],{"class":222,"line":644},[220,43307,402],{"class":264},[220,43309,347],{"class":346},[220,43311,359],{"class":264},[212,43313,43314],{"className":409,"code":43269,"language":411,"meta":178,"style":178},[99,43315,43316,43324,43332,43340,43348],{"__ignoreMap":178},[220,43317,43318,43320,43322],{"class":222,"line":223},[220,43319,343],{"class":264},[220,43321,347],{"class":420},[220,43323,359],{"class":264},[220,43325,43326,43328,43330],{"class":222,"line":179},[220,43327,364],{"class":264},[220,43329,43247],{"class":420},[220,43331,359],{"class":264},[220,43333,43334,43336,43338],{"class":222,"line":389},[220,43335,2550],{"class":264},[220,43337,2553],{"class":420},[220,43339,386],{"class":264},[220,43341,43342,43344,43346],{"class":222,"line":399},[220,43343,2567],{"class":264},[220,43345,43247],{"class":420},[220,43347,359],{"class":264},[220,43349,43350,43352,43354],{"class":222,"line":644},[220,43351,402],{"class":264},[220,43353,347],{"class":420},[220,43355,359],{"class":264},[212,43357,43358],{"className":2844,"code":43269,"language":2846,"meta":178,"style":178},[99,43359,43360,43368,43376,43384,43392],{"__ignoreMap":178},[220,43361,43362,43364,43366],{"class":222,"line":223},[220,43363,343],{"class":264},[220,43365,347],{"class":420},[220,43367,359],{"class":264},[220,43369,43370,43372,43374],{"class":222,"line":179},[220,43371,364],{"class":264},[220,43373,43247],{"class":420},[220,43375,359],{"class":264},[220,43377,43378,43380,43382],{"class":222,"line":389},[220,43379,2550],{"class":264},[220,43381,2553],{"class":420},[220,43383,386],{"class":264},[220,43385,43386,43388,43390],{"class":222,"line":399},[220,43387,2567],{"class":264},[220,43389,43247],{"class":420},[220,43391,359],{"class":264},[220,43393,43394,43396,43398],{"class":222,"line":644},[220,43395,402],{"class":264},[220,43397,347],{"class":420},[220,43399,359],{"class":264},[212,43401,43402],{"className":468,"code":43269,"language":469,"meta":178,"style":178},[99,43403,43404,43412,43420,43428,43436],{"__ignoreMap":178},[220,43405,43406,43408,43410],{"class":222,"line":223},[220,43407,343],{"class":264},[220,43409,347],{"class":420},[220,43411,359],{"class":264},[220,43413,43414,43416,43418],{"class":222,"line":179},[220,43415,364],{"class":264},[220,43417,43247],{"class":420},[220,43419,359],{"class":264},[220,43421,43422,43424,43426],{"class":222,"line":389},[220,43423,2550],{"class":264},[220,43425,2553],{"class":420},[220,43427,386],{"class":264},[220,43429,43430,43432,43434],{"class":222,"line":399},[220,43431,2567],{"class":264},[220,43433,43247],{"class":420},[220,43435,359],{"class":264},[220,43437,43438,43440,43442],{"class":222,"line":644},[220,43439,402],{"class":264},[220,43441,347],{"class":420},[220,43443,359],{"class":264},[212,43445,43447],{"className":251,"code":43446,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DisplacementMap', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,43448,43449,43459,43463,43477,43481,43490,43498,43502,43506],{"__ignoreMap":178},[220,43450,43451,43453,43455,43457],{"class":222,"line":223},[220,43452,261],{"class":260},[220,43454,10879],{"class":264},[220,43456,268],{"class":260},[220,43458,4007],{"class":230},[220,43460,43461],{"class":222,"line":179},[220,43462,647],{"emptyLinePlaceholder":194},[220,43464,43465,43467,43469,43471,43473,43475],{"class":222,"line":389},[220,43466,1735],{"class":260},[220,43468,1738],{"class":420},[220,43470,1741],{"class":260},[220,43472,1744],{"class":260},[220,43474,1747],{"class":226},[220,43476,1750],{"class":264},[220,43478,43479],{"class":222,"line":399},[220,43480,1765],{"class":264},[220,43482,43483,43485,43488],{"class":222,"line":644},[220,43484,1770],{"class":264},[220,43486,43487],{"class":230},"'DisplacementMap'",[220,43489,6375],{"class":264},[220,43491,43492,43494,43496],{"class":222,"line":650},[220,43493,6380],{"class":264},[220,43495,3206],{"class":230},[220,43497,2465],{"class":264},[220,43499,43500],{"class":222,"line":656},[220,43501,6397],{"class":264},[220,43503,43504],{"class":222,"line":673},[220,43505,1787],{"class":264},[220,43507,43508],{"class":222,"line":682},[220,43509,1792],{"class":264},[1504,43511,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":43513},[43514,43515],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":43247,"description":43255},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":43522,"title":43523,"body":43524,"category":32176,"componentType":25253,"description":43531,"extension":191,"meta":43792,"navigation":194,"path":43793,"requiresChild":194,"seo":43794,"stem":43795,"__hash__":43796},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":43525,"toc":43788},[43526,43529,43532,43534,43536,43539,43541,43786],[11,43527,43523],{"id":43528},"dither",[15,43530,43531],{},"Dithering effect with multiple pattern options",[31281,43533],{"component":43523},[23,43535,31285],{"id":25903},[31287,43537],{":props":43538},"[{\"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,43540,31293],{"id":31292},[246,43542,43543,43588,43632,43676,43720],{":tabs":1557},[212,43544,43546],{"className":334,"code":43545,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,43547,43548,43556,43564,43572,43580],{"__ignoreMap":178},[220,43549,43550,43552,43554],{"class":222,"line":223},[220,43551,343],{"class":264},[220,43553,347],{"class":346},[220,43555,359],{"class":264},[220,43557,43558,43560,43562],{"class":222,"line":179},[220,43559,364],{"class":264},[220,43561,43523],{"class":346},[220,43563,359],{"class":264},[220,43565,43566,43568,43570],{"class":222,"line":389},[220,43567,2550],{"class":264},[220,43569,2553],{"class":346},[220,43571,386],{"class":264},[220,43573,43574,43576,43578],{"class":222,"line":399},[220,43575,2567],{"class":264},[220,43577,43523],{"class":346},[220,43579,359],{"class":264},[220,43581,43582,43584,43586],{"class":222,"line":644},[220,43583,402],{"class":264},[220,43585,347],{"class":346},[220,43587,359],{"class":264},[212,43589,43590],{"className":409,"code":43545,"language":411,"meta":178,"style":178},[99,43591,43592,43600,43608,43616,43624],{"__ignoreMap":178},[220,43593,43594,43596,43598],{"class":222,"line":223},[220,43595,343],{"class":264},[220,43597,347],{"class":420},[220,43599,359],{"class":264},[220,43601,43602,43604,43606],{"class":222,"line":179},[220,43603,364],{"class":264},[220,43605,43523],{"class":420},[220,43607,359],{"class":264},[220,43609,43610,43612,43614],{"class":222,"line":389},[220,43611,2550],{"class":264},[220,43613,2553],{"class":420},[220,43615,386],{"class":264},[220,43617,43618,43620,43622],{"class":222,"line":399},[220,43619,2567],{"class":264},[220,43621,43523],{"class":420},[220,43623,359],{"class":264},[220,43625,43626,43628,43630],{"class":222,"line":644},[220,43627,402],{"class":264},[220,43629,347],{"class":420},[220,43631,359],{"class":264},[212,43633,43634],{"className":2844,"code":43545,"language":2846,"meta":178,"style":178},[99,43635,43636,43644,43652,43660,43668],{"__ignoreMap":178},[220,43637,43638,43640,43642],{"class":222,"line":223},[220,43639,343],{"class":264},[220,43641,347],{"class":420},[220,43643,359],{"class":264},[220,43645,43646,43648,43650],{"class":222,"line":179},[220,43647,364],{"class":264},[220,43649,43523],{"class":420},[220,43651,359],{"class":264},[220,43653,43654,43656,43658],{"class":222,"line":389},[220,43655,2550],{"class":264},[220,43657,2553],{"class":420},[220,43659,386],{"class":264},[220,43661,43662,43664,43666],{"class":222,"line":399},[220,43663,2567],{"class":264},[220,43665,43523],{"class":420},[220,43667,359],{"class":264},[220,43669,43670,43672,43674],{"class":222,"line":644},[220,43671,402],{"class":264},[220,43673,347],{"class":420},[220,43675,359],{"class":264},[212,43677,43678],{"className":468,"code":43545,"language":469,"meta":178,"style":178},[99,43679,43680,43688,43696,43704,43712],{"__ignoreMap":178},[220,43681,43682,43684,43686],{"class":222,"line":223},[220,43683,343],{"class":264},[220,43685,347],{"class":420},[220,43687,359],{"class":264},[220,43689,43690,43692,43694],{"class":222,"line":179},[220,43691,364],{"class":264},[220,43693,43523],{"class":420},[220,43695,359],{"class":264},[220,43697,43698,43700,43702],{"class":222,"line":389},[220,43699,2550],{"class":264},[220,43701,2553],{"class":420},[220,43703,386],{"class":264},[220,43705,43706,43708,43710],{"class":222,"line":399},[220,43707,2567],{"class":264},[220,43709,43523],{"class":420},[220,43711,359],{"class":264},[220,43713,43714,43716,43718],{"class":222,"line":644},[220,43715,402],{"class":264},[220,43717,347],{"class":420},[220,43719,359],{"class":264},[212,43721,43723],{"className":251,"code":43722,"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,43724,43725,43735,43739,43753,43757,43766,43774,43778,43782],{"__ignoreMap":178},[220,43726,43727,43729,43731,43733],{"class":222,"line":223},[220,43728,261],{"class":260},[220,43730,10879],{"class":264},[220,43732,268],{"class":260},[220,43734,4007],{"class":230},[220,43736,43737],{"class":222,"line":179},[220,43738,647],{"emptyLinePlaceholder":194},[220,43740,43741,43743,43745,43747,43749,43751],{"class":222,"line":389},[220,43742,1735],{"class":260},[220,43744,1738],{"class":420},[220,43746,1741],{"class":260},[220,43748,1744],{"class":260},[220,43750,1747],{"class":226},[220,43752,1750],{"class":264},[220,43754,43755],{"class":222,"line":399},[220,43756,1765],{"class":264},[220,43758,43759,43761,43764],{"class":222,"line":644},[220,43760,1770],{"class":264},[220,43762,43763],{"class":230},"'Dither'",[220,43765,6375],{"class":264},[220,43767,43768,43770,43772],{"class":222,"line":650},[220,43769,6380],{"class":264},[220,43771,3206],{"class":230},[220,43773,2465],{"class":264},[220,43775,43776],{"class":222,"line":656},[220,43777,6397],{"class":264},[220,43779,43780],{"class":222,"line":673},[220,43781,1787],{"class":264},[220,43783,43784],{"class":222,"line":682},[220,43785,1792],{"class":264},[1504,43787,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":43789},[43790,43791],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":43523,"description":43531},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":43798,"title":43799,"body":43800,"category":32433,"componentType":25247,"description":43807,"extension":191,"meta":44035,"navigation":194,"path":44036,"requiresChild":31900,"seo":44037,"stem":44038,"__hash__":44039},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":43801,"toc":44031},[43802,43805,43808,43810,43812,43815,43817,44029],[11,43803,43799],{"id":43804},"dotgrid",[15,43806,43807],{},"Grid of dots with optional twinkling animation",[31281,43809],{"component":43799},[23,43811,31285],{"id":25903},[31287,43813],{":props":43814},"[{\"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,43816,31293],{"id":31292},[246,43818,43819,43858,43896,43934,43972],{":tabs":1557},[212,43820,43822],{"className":334,"code":43821,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,43823,43824,43832,43838,43846,43850],{"__ignoreMap":178},[220,43825,43826,43828,43830],{"class":222,"line":223},[220,43827,343],{"class":264},[220,43829,347],{"class":346},[220,43831,359],{"class":264},[220,43833,43834,43836],{"class":222,"line":179},[220,43835,364],{"class":264},[220,43837,18870],{"class":346},[220,43839,43840,43842,43844],{"class":222,"line":389},[220,43841,9002],{"class":226},[220,43843,353],{"class":264},[220,43845,8958],{"class":230},[220,43847,43848],{"class":222,"line":399},[220,43849,1234],{"class":264},[220,43851,43852,43854,43856],{"class":222,"line":644},[220,43853,402],{"class":264},[220,43855,347],{"class":346},[220,43857,359],{"class":264},[212,43859,43860],{"className":409,"code":43821,"language":411,"meta":178,"style":178},[99,43861,43862,43870,43876,43884,43888],{"__ignoreMap":178},[220,43863,43864,43866,43868],{"class":222,"line":223},[220,43865,343],{"class":264},[220,43867,347],{"class":420},[220,43869,359],{"class":264},[220,43871,43872,43874],{"class":222,"line":179},[220,43873,364],{"class":264},[220,43875,18870],{"class":420},[220,43877,43878,43880,43882],{"class":222,"line":389},[220,43879,9002],{"class":226},[220,43881,353],{"class":260},[220,43883,8958],{"class":230},[220,43885,43886],{"class":222,"line":399},[220,43887,1234],{"class":264},[220,43889,43890,43892,43894],{"class":222,"line":644},[220,43891,402],{"class":264},[220,43893,347],{"class":420},[220,43895,359],{"class":264},[212,43897,43898],{"className":2844,"code":43821,"language":2846,"meta":178,"style":178},[99,43899,43900,43908,43914,43922,43926],{"__ignoreMap":178},[220,43901,43902,43904,43906],{"class":222,"line":223},[220,43903,343],{"class":264},[220,43905,347],{"class":420},[220,43907,359],{"class":264},[220,43909,43910,43912],{"class":222,"line":179},[220,43911,364],{"class":264},[220,43913,18870],{"class":420},[220,43915,43916,43918,43920],{"class":222,"line":389},[220,43917,9002],{"class":226},[220,43919,353],{"class":264},[220,43921,8958],{"class":230},[220,43923,43924],{"class":222,"line":399},[220,43925,1234],{"class":264},[220,43927,43928,43930,43932],{"class":222,"line":644},[220,43929,402],{"class":264},[220,43931,347],{"class":420},[220,43933,359],{"class":264},[212,43935,43936],{"className":468,"code":43821,"language":469,"meta":178,"style":178},[99,43937,43938,43946,43952,43960,43964],{"__ignoreMap":178},[220,43939,43940,43942,43944],{"class":222,"line":223},[220,43941,343],{"class":264},[220,43943,347],{"class":420},[220,43945,359],{"class":264},[220,43947,43948,43950],{"class":222,"line":179},[220,43949,364],{"class":264},[220,43951,18870],{"class":420},[220,43953,43954,43956,43958],{"class":222,"line":389},[220,43955,9002],{"class":226},[220,43957,353],{"class":260},[220,43959,8958],{"class":230},[220,43961,43962],{"class":222,"line":399},[220,43963,1234],{"class":264},[220,43965,43966,43968,43970],{"class":222,"line":644},[220,43967,402],{"class":264},[220,43969,347],{"class":420},[220,43971,359],{"class":264},[212,43973,43975],{"className":251,"code":43974,"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,43976,43977,43987,43991,44005,44009,44021,44025],{"__ignoreMap":178},[220,43978,43979,43981,43983,43985],{"class":222,"line":223},[220,43980,261],{"class":260},[220,43982,10879],{"class":264},[220,43984,268],{"class":260},[220,43986,4007],{"class":230},[220,43988,43989],{"class":222,"line":179},[220,43990,647],{"emptyLinePlaceholder":194},[220,43992,43993,43995,43997,43999,44001,44003],{"class":222,"line":389},[220,43994,1735],{"class":260},[220,43996,1738],{"class":420},[220,43998,1741],{"class":260},[220,44000,1744],{"class":260},[220,44002,1747],{"class":226},[220,44004,1750],{"class":264},[220,44006,44007],{"class":222,"line":399},[220,44008,1765],{"class":264},[220,44010,44011,44013,44015,44017,44019],{"class":222,"line":644},[220,44012,1770],{"class":264},[220,44014,19424],{"class":230},[220,44016,1776],{"class":264},[220,44018,9536],{"class":230},[220,44020,1782],{"class":264},[220,44022,44023],{"class":222,"line":650},[220,44024,1787],{"class":264},[220,44026,44027],{"class":222,"line":656},[220,44028,1792],{"class":264},[1504,44030,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44032},[44033,44034],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":43799,"description":43807},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44041,"title":44042,"body":44043,"category":32176,"componentType":25253,"description":44050,"extension":191,"meta":44404,"navigation":194,"path":44405,"requiresChild":194,"seo":44406,"stem":44407,"__hash__":44408},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44044,"toc":44400},[44045,44048,44051,44053,44055,44058,44060,44398],[11,44046,44042],{"id":44047},"dropshadow",[15,44049,44050],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31281,44052],{"component":44042},[23,44054,31285],{"id":25903},[31287,44056],{":props":44057},"[{\"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,44059,31293],{"id":31292},[246,44061,44062,44126,44193,44257,44323],{":tabs":1557},[212,44063,44065],{"className":334,"code":44064,"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,44066,44067,44075,44082,44090,44098,44102,44110,44118],{"__ignoreMap":178},[220,44068,44069,44071,44073],{"class":222,"line":223},[220,44070,343],{"class":264},[220,44072,347],{"class":346},[220,44074,359],{"class":264},[220,44076,44077,44079],{"class":222,"line":179},[220,44078,364],{"class":264},[220,44080,44081],{"class":346},"DropShadow\n",[220,44083,44084,44086,44088],{"class":222,"line":389},[220,44085,9002],{"class":226},[220,44087,353],{"class":264},[220,44089,18841],{"class":230},[220,44091,44092,44094,44096],{"class":222,"line":399},[220,44093,19739],{"class":226},[220,44095,353],{"class":264},[220,44097,41528],{"class":230},[220,44099,44100],{"class":222,"line":644},[220,44101,31329],{"class":264},[220,44103,44104,44106,44108],{"class":222,"line":650},[220,44105,2550],{"class":264},[220,44107,2553],{"class":346},[220,44109,386],{"class":264},[220,44111,44112,44114,44116],{"class":222,"line":656},[220,44113,2567],{"class":264},[220,44115,44042],{"class":346},[220,44117,359],{"class":264},[220,44119,44120,44122,44124],{"class":222,"line":673},[220,44121,402],{"class":264},[220,44123,347],{"class":346},[220,44125,359],{"class":264},[212,44127,44129],{"className":409,"code":44128,"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,44130,44131,44139,44145,44153,44165,44169,44177,44185],{"__ignoreMap":178},[220,44132,44133,44135,44137],{"class":222,"line":223},[220,44134,343],{"class":264},[220,44136,347],{"class":420},[220,44138,359],{"class":264},[220,44140,44141,44143],{"class":222,"line":179},[220,44142,364],{"class":264},[220,44144,44081],{"class":420},[220,44146,44147,44149,44151],{"class":222,"line":389},[220,44148,9002],{"class":226},[220,44150,353],{"class":260},[220,44152,18841],{"class":230},[220,44154,44155,44157,44159,44161,44163],{"class":222,"line":399},[220,44156,19850],{"class":226},[220,44158,353],{"class":260},[220,44160,743],{"class":264},[220,44162,7120],{"class":420},[220,44164,749],{"class":264},[220,44166,44167],{"class":222,"line":644},[220,44168,31329],{"class":264},[220,44170,44171,44173,44175],{"class":222,"line":650},[220,44172,2550],{"class":264},[220,44174,2553],{"class":420},[220,44176,386],{"class":264},[220,44178,44179,44181,44183],{"class":222,"line":656},[220,44180,2567],{"class":264},[220,44182,44042],{"class":420},[220,44184,359],{"class":264},[220,44186,44187,44189,44191],{"class":222,"line":673},[220,44188,402],{"class":264},[220,44190,347],{"class":420},[220,44192,359],{"class":264},[212,44194,44195],{"className":2844,"code":44128,"language":2846,"meta":178,"style":178},[99,44196,44197,44205,44211,44219,44229,44233,44241,44249],{"__ignoreMap":178},[220,44198,44199,44201,44203],{"class":222,"line":223},[220,44200,343],{"class":264},[220,44202,347],{"class":420},[220,44204,359],{"class":264},[220,44206,44207,44209],{"class":222,"line":179},[220,44208,364],{"class":264},[220,44210,44081],{"class":420},[220,44212,44213,44215,44217],{"class":222,"line":389},[220,44214,9002],{"class":226},[220,44216,353],{"class":264},[220,44218,18841],{"class":230},[220,44220,44221,44223,44225,44227],{"class":222,"line":399},[220,44222,19850],{"class":226},[220,44224,29241],{"class":264},[220,44226,7120],{"class":420},[220,44228,749],{"class":264},[220,44230,44231],{"class":222,"line":644},[220,44232,31329],{"class":264},[220,44234,44235,44237,44239],{"class":222,"line":650},[220,44236,2550],{"class":264},[220,44238,2553],{"class":420},[220,44240,386],{"class":264},[220,44242,44243,44245,44247],{"class":222,"line":656},[220,44244,2567],{"class":264},[220,44246,44042],{"class":420},[220,44248,359],{"class":264},[220,44250,44251,44253,44255],{"class":222,"line":673},[220,44252,402],{"class":264},[220,44254,347],{"class":420},[220,44256,359],{"class":264},[212,44258,44259],{"className":468,"code":44128,"language":469,"meta":178,"style":178},[99,44260,44261,44269,44275,44283,44295,44299,44307,44315],{"__ignoreMap":178},[220,44262,44263,44265,44267],{"class":222,"line":223},[220,44264,343],{"class":264},[220,44266,347],{"class":420},[220,44268,359],{"class":264},[220,44270,44271,44273],{"class":222,"line":179},[220,44272,364],{"class":264},[220,44274,44081],{"class":420},[220,44276,44277,44279,44281],{"class":222,"line":389},[220,44278,9002],{"class":226},[220,44280,353],{"class":260},[220,44282,18841],{"class":230},[220,44284,44285,44287,44289,44291,44293],{"class":222,"line":399},[220,44286,19850],{"class":226},[220,44288,353],{"class":260},[220,44290,743],{"class":264},[220,44292,7120],{"class":420},[220,44294,749],{"class":264},[220,44296,44297],{"class":222,"line":644},[220,44298,31329],{"class":264},[220,44300,44301,44303,44305],{"class":222,"line":650},[220,44302,2550],{"class":264},[220,44304,2553],{"class":420},[220,44306,386],{"class":264},[220,44308,44309,44311,44313],{"class":222,"line":656},[220,44310,2567],{"class":264},[220,44312,44042],{"class":420},[220,44314,359],{"class":264},[220,44316,44317,44319,44321],{"class":222,"line":673},[220,44318,402],{"class":264},[220,44320,347],{"class":420},[220,44322,359],{"class":264},[212,44324,44326],{"className":251,"code":44325,"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,44327,44328,44338,44342,44356,44360,44378,44386,44390,44394],{"__ignoreMap":178},[220,44329,44330,44332,44334,44336],{"class":222,"line":223},[220,44331,261],{"class":260},[220,44333,10879],{"class":264},[220,44335,268],{"class":260},[220,44337,4007],{"class":230},[220,44339,44340],{"class":222,"line":179},[220,44341,647],{"emptyLinePlaceholder":194},[220,44343,44344,44346,44348,44350,44352,44354],{"class":222,"line":389},[220,44345,1735],{"class":260},[220,44347,1738],{"class":420},[220,44349,1741],{"class":260},[220,44351,1744],{"class":260},[220,44353,1747],{"class":226},[220,44355,1750],{"class":264},[220,44357,44358],{"class":222,"line":399},[220,44359,1765],{"class":264},[220,44361,44362,44364,44367,44369,44371,44374,44376],{"class":222,"line":644},[220,44363,1770],{"class":264},[220,44365,44366],{"class":230},"'DropShadow'",[220,44368,1776],{"class":264},[220,44370,19401],{"class":230},[220,44372,44373],{"class":264},", intensity: ",[220,44375,7120],{"class":420},[220,44377,6912],{"class":264},[220,44379,44380,44382,44384],{"class":222,"line":650},[220,44381,6380],{"class":264},[220,44383,3206],{"class":230},[220,44385,2465],{"class":264},[220,44387,44388],{"class":222,"line":656},[220,44389,6397],{"class":264},[220,44391,44392],{"class":222,"line":673},[220,44393,1787],{"class":264},[220,44395,44396],{"class":222,"line":682},[220,44397,1792],{"class":264},[1504,44399,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44401},[44402,44403],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44042,"description":44050},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":44410,"title":44411,"body":44412,"category":35738,"componentType":25253,"description":44419,"extension":191,"meta":44680,"navigation":194,"path":44681,"requiresChild":194,"seo":44682,"stem":44683,"__hash__":44684},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":44413,"toc":44676},[44414,44417,44420,44422,44424,44427,44429,44674],[11,44415,44411],{"id":44416},"duotone",[15,44418,44419],{},"Map colors to two tones based on luminance",[31281,44421],{"component":44411},[23,44423,31285],{"id":25903},[31287,44425],{":props":44426},"[{\"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,44428,31293],{"id":31292},[246,44430,44431,44476,44520,44564,44608],{":tabs":1557},[212,44432,44434],{"className":334,"code":44433,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,44435,44436,44444,44452,44460,44468],{"__ignoreMap":178},[220,44437,44438,44440,44442],{"class":222,"line":223},[220,44439,343],{"class":264},[220,44441,347],{"class":346},[220,44443,359],{"class":264},[220,44445,44446,44448,44450],{"class":222,"line":179},[220,44447,364],{"class":264},[220,44449,44411],{"class":346},[220,44451,359],{"class":264},[220,44453,44454,44456,44458],{"class":222,"line":389},[220,44455,2550],{"class":264},[220,44457,2553],{"class":346},[220,44459,386],{"class":264},[220,44461,44462,44464,44466],{"class":222,"line":399},[220,44463,2567],{"class":264},[220,44465,44411],{"class":346},[220,44467,359],{"class":264},[220,44469,44470,44472,44474],{"class":222,"line":644},[220,44471,402],{"class":264},[220,44473,347],{"class":346},[220,44475,359],{"class":264},[212,44477,44478],{"className":409,"code":44433,"language":411,"meta":178,"style":178},[99,44479,44480,44488,44496,44504,44512],{"__ignoreMap":178},[220,44481,44482,44484,44486],{"class":222,"line":223},[220,44483,343],{"class":264},[220,44485,347],{"class":420},[220,44487,359],{"class":264},[220,44489,44490,44492,44494],{"class":222,"line":179},[220,44491,364],{"class":264},[220,44493,44411],{"class":420},[220,44495,359],{"class":264},[220,44497,44498,44500,44502],{"class":222,"line":389},[220,44499,2550],{"class":264},[220,44501,2553],{"class":420},[220,44503,386],{"class":264},[220,44505,44506,44508,44510],{"class":222,"line":399},[220,44507,2567],{"class":264},[220,44509,44411],{"class":420},[220,44511,359],{"class":264},[220,44513,44514,44516,44518],{"class":222,"line":644},[220,44515,402],{"class":264},[220,44517,347],{"class":420},[220,44519,359],{"class":264},[212,44521,44522],{"className":2844,"code":44433,"language":2846,"meta":178,"style":178},[99,44523,44524,44532,44540,44548,44556],{"__ignoreMap":178},[220,44525,44526,44528,44530],{"class":222,"line":223},[220,44527,343],{"class":264},[220,44529,347],{"class":420},[220,44531,359],{"class":264},[220,44533,44534,44536,44538],{"class":222,"line":179},[220,44535,364],{"class":264},[220,44537,44411],{"class":420},[220,44539,359],{"class":264},[220,44541,44542,44544,44546],{"class":222,"line":389},[220,44543,2550],{"class":264},[220,44545,2553],{"class":420},[220,44547,386],{"class":264},[220,44549,44550,44552,44554],{"class":222,"line":399},[220,44551,2567],{"class":264},[220,44553,44411],{"class":420},[220,44555,359],{"class":264},[220,44557,44558,44560,44562],{"class":222,"line":644},[220,44559,402],{"class":264},[220,44561,347],{"class":420},[220,44563,359],{"class":264},[212,44565,44566],{"className":468,"code":44433,"language":469,"meta":178,"style":178},[99,44567,44568,44576,44584,44592,44600],{"__ignoreMap":178},[220,44569,44570,44572,44574],{"class":222,"line":223},[220,44571,343],{"class":264},[220,44573,347],{"class":420},[220,44575,359],{"class":264},[220,44577,44578,44580,44582],{"class":222,"line":179},[220,44579,364],{"class":264},[220,44581,44411],{"class":420},[220,44583,359],{"class":264},[220,44585,44586,44588,44590],{"class":222,"line":389},[220,44587,2550],{"class":264},[220,44589,2553],{"class":420},[220,44591,386],{"class":264},[220,44593,44594,44596,44598],{"class":222,"line":399},[220,44595,2567],{"class":264},[220,44597,44411],{"class":420},[220,44599,359],{"class":264},[220,44601,44602,44604,44606],{"class":222,"line":644},[220,44603,402],{"class":264},[220,44605,347],{"class":420},[220,44607,359],{"class":264},[212,44609,44611],{"className":251,"code":44610,"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,44612,44613,44623,44627,44641,44645,44654,44662,44666,44670],{"__ignoreMap":178},[220,44614,44615,44617,44619,44621],{"class":222,"line":223},[220,44616,261],{"class":260},[220,44618,10879],{"class":264},[220,44620,268],{"class":260},[220,44622,4007],{"class":230},[220,44624,44625],{"class":222,"line":179},[220,44626,647],{"emptyLinePlaceholder":194},[220,44628,44629,44631,44633,44635,44637,44639],{"class":222,"line":389},[220,44630,1735],{"class":260},[220,44632,1738],{"class":420},[220,44634,1741],{"class":260},[220,44636,1744],{"class":260},[220,44638,1747],{"class":226},[220,44640,1750],{"class":264},[220,44642,44643],{"class":222,"line":399},[220,44644,1765],{"class":264},[220,44646,44647,44649,44652],{"class":222,"line":644},[220,44648,1770],{"class":264},[220,44650,44651],{"class":230},"'Duotone'",[220,44653,6375],{"class":264},[220,44655,44656,44658,44660],{"class":222,"line":650},[220,44657,6380],{"class":264},[220,44659,3206],{"class":230},[220,44661,2465],{"class":264},[220,44663,44664],{"class":222,"line":656},[220,44665,6397],{"class":264},[220,44667,44668],{"class":222,"line":673},[220,44669,1787],{"class":264},[220,44671,44672],{"class":222,"line":682},[220,44673,1792],{"class":264},[1504,44675,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":44677},[44678,44679],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":44411,"description":44419},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":44686,"title":44687,"body":44688,"category":15275,"componentType":25247,"description":44695,"extension":191,"meta":44925,"navigation":194,"path":44926,"requiresChild":31900,"seo":44927,"stem":44928,"__hash__":44929},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":44689,"toc":44921},[44690,44693,44696,44698,44700,44703,44705,44919],[11,44691,44687],{"id":44692},"ellipse",[15,44694,44695],{},"Ellipse with independently adjustable horizontal and vertical radii",[31281,44697],{"component":44687},[23,44699,31285],{"id":25903},[31287,44701],{":props":44702},"[{\"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,44704,31293],{"id":31292},[246,44706,44707,44747,44785,44823,44861],{":tabs":1557},[212,44708,44710],{"className":334,"code":44709,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44711,44712,44720,44727,44735,44739],{"__ignoreMap":178},[220,44713,44714,44716,44718],{"class":222,"line":223},[220,44715,343],{"class":264},[220,44717,347],{"class":346},[220,44719,359],{"class":264},[220,44721,44722,44724],{"class":222,"line":179},[220,44723,364],{"class":264},[220,44725,44726],{"class":346},"Ellipse\n",[220,44728,44729,44731,44733],{"class":222,"line":389},[220,44730,9002],{"class":226},[220,44732,353],{"class":264},[220,44734,8958],{"class":230},[220,44736,44737],{"class":222,"line":399},[220,44738,1234],{"class":264},[220,44740,44741,44743,44745],{"class":222,"line":644},[220,44742,402],{"class":264},[220,44744,347],{"class":346},[220,44746,359],{"class":264},[212,44748,44749],{"className":409,"code":44709,"language":411,"meta":178,"style":178},[99,44750,44751,44759,44765,44773,44777],{"__ignoreMap":178},[220,44752,44753,44755,44757],{"class":222,"line":223},[220,44754,343],{"class":264},[220,44756,347],{"class":420},[220,44758,359],{"class":264},[220,44760,44761,44763],{"class":222,"line":179},[220,44762,364],{"class":264},[220,44764,44726],{"class":420},[220,44766,44767,44769,44771],{"class":222,"line":389},[220,44768,9002],{"class":226},[220,44770,353],{"class":260},[220,44772,8958],{"class":230},[220,44774,44775],{"class":222,"line":399},[220,44776,1234],{"class":264},[220,44778,44779,44781,44783],{"class":222,"line":644},[220,44780,402],{"class":264},[220,44782,347],{"class":420},[220,44784,359],{"class":264},[212,44786,44787],{"className":2844,"code":44709,"language":2846,"meta":178,"style":178},[99,44788,44789,44797,44803,44811,44815],{"__ignoreMap":178},[220,44790,44791,44793,44795],{"class":222,"line":223},[220,44792,343],{"class":264},[220,44794,347],{"class":420},[220,44796,359],{"class":264},[220,44798,44799,44801],{"class":222,"line":179},[220,44800,364],{"class":264},[220,44802,44726],{"class":420},[220,44804,44805,44807,44809],{"class":222,"line":389},[220,44806,9002],{"class":226},[220,44808,353],{"class":264},[220,44810,8958],{"class":230},[220,44812,44813],{"class":222,"line":399},[220,44814,1234],{"class":264},[220,44816,44817,44819,44821],{"class":222,"line":644},[220,44818,402],{"class":264},[220,44820,347],{"class":420},[220,44822,359],{"class":264},[212,44824,44825],{"className":468,"code":44709,"language":469,"meta":178,"style":178},[99,44826,44827,44835,44841,44849,44853],{"__ignoreMap":178},[220,44828,44829,44831,44833],{"class":222,"line":223},[220,44830,343],{"class":264},[220,44832,347],{"class":420},[220,44834,359],{"class":264},[220,44836,44837,44839],{"class":222,"line":179},[220,44838,364],{"class":264},[220,44840,44726],{"class":420},[220,44842,44843,44845,44847],{"class":222,"line":389},[220,44844,9002],{"class":226},[220,44846,353],{"class":260},[220,44848,8958],{"class":230},[220,44850,44851],{"class":222,"line":399},[220,44852,1234],{"class":264},[220,44854,44855,44857,44859],{"class":222,"line":644},[220,44856,402],{"class":264},[220,44858,347],{"class":420},[220,44860,359],{"class":264},[212,44862,44864],{"className":251,"code":44863,"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,44865,44866,44876,44880,44894,44898,44911,44915],{"__ignoreMap":178},[220,44867,44868,44870,44872,44874],{"class":222,"line":223},[220,44869,261],{"class":260},[220,44871,10879],{"class":264},[220,44873,268],{"class":260},[220,44875,4007],{"class":230},[220,44877,44878],{"class":222,"line":179},[220,44879,647],{"emptyLinePlaceholder":194},[220,44881,44882,44884,44886,44888,44890,44892],{"class":222,"line":389},[220,44883,1735],{"class":260},[220,44885,1738],{"class":420},[220,44887,1741],{"class":260},[220,44889,1744],{"class":260},[220,44891,1747],{"class":226},[220,44893,1750],{"class":264},[220,44895,44896],{"class":222,"line":399},[220,44897,1765],{"class":264},[220,44899,44900,44902,44905,44907,44909],{"class":222,"line":644},[220,44901,1770],{"class":264},[220,44903,44904],{"class":230},"'Ellipse'",[220,44906,1776],{"class":264},[220,44908,9536],{"class":230},[220,44910,1782],{"class":264},[220,44912,44913],{"class":222,"line":650},[220,44914,1787],{"class":264},[220,44916,44917],{"class":222,"line":656},[220,44918,1792],{"class":264},[1504,44920,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44922},[44923,44924],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":44687,"description":44695},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":44931,"title":20352,"body":44932,"category":35939,"componentType":25253,"description":44939,"extension":191,"meta":45199,"navigation":194,"path":45200,"requiresChild":194,"seo":45201,"stem":45202,"__hash__":45203},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":44933,"toc":45195},[44934,44937,44940,44942,44944,44947,44949,45193],[11,44935,20352],{"id":44936},"emboss",[15,44938,44939],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31281,44941],{"component":20352},[23,44943,31285],{"id":25903},[31287,44945],{":props":44946},"[{\"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,44948,31293],{"id":31292},[246,44950,44951,44996,45040,45084,45128],{":tabs":1557},[212,44952,44954],{"className":334,"code":44953,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,44955,44956,44964,44972,44980,44988],{"__ignoreMap":178},[220,44957,44958,44960,44962],{"class":222,"line":223},[220,44959,343],{"class":264},[220,44961,347],{"class":346},[220,44963,359],{"class":264},[220,44965,44966,44968,44970],{"class":222,"line":179},[220,44967,364],{"class":264},[220,44969,20352],{"class":346},[220,44971,359],{"class":264},[220,44973,44974,44976,44978],{"class":222,"line":389},[220,44975,2550],{"class":264},[220,44977,2553],{"class":346},[220,44979,386],{"class":264},[220,44981,44982,44984,44986],{"class":222,"line":399},[220,44983,2567],{"class":264},[220,44985,20352],{"class":346},[220,44987,359],{"class":264},[220,44989,44990,44992,44994],{"class":222,"line":644},[220,44991,402],{"class":264},[220,44993,347],{"class":346},[220,44995,359],{"class":264},[212,44997,44998],{"className":409,"code":44953,"language":411,"meta":178,"style":178},[99,44999,45000,45008,45016,45024,45032],{"__ignoreMap":178},[220,45001,45002,45004,45006],{"class":222,"line":223},[220,45003,343],{"class":264},[220,45005,347],{"class":420},[220,45007,359],{"class":264},[220,45009,45010,45012,45014],{"class":222,"line":179},[220,45011,364],{"class":264},[220,45013,20352],{"class":420},[220,45015,359],{"class":264},[220,45017,45018,45020,45022],{"class":222,"line":389},[220,45019,2550],{"class":264},[220,45021,2553],{"class":420},[220,45023,386],{"class":264},[220,45025,45026,45028,45030],{"class":222,"line":399},[220,45027,2567],{"class":264},[220,45029,20352],{"class":420},[220,45031,359],{"class":264},[220,45033,45034,45036,45038],{"class":222,"line":644},[220,45035,402],{"class":264},[220,45037,347],{"class":420},[220,45039,359],{"class":264},[212,45041,45042],{"className":2844,"code":44953,"language":2846,"meta":178,"style":178},[99,45043,45044,45052,45060,45068,45076],{"__ignoreMap":178},[220,45045,45046,45048,45050],{"class":222,"line":223},[220,45047,343],{"class":264},[220,45049,347],{"class":420},[220,45051,359],{"class":264},[220,45053,45054,45056,45058],{"class":222,"line":179},[220,45055,364],{"class":264},[220,45057,20352],{"class":420},[220,45059,359],{"class":264},[220,45061,45062,45064,45066],{"class":222,"line":389},[220,45063,2550],{"class":264},[220,45065,2553],{"class":420},[220,45067,386],{"class":264},[220,45069,45070,45072,45074],{"class":222,"line":399},[220,45071,2567],{"class":264},[220,45073,20352],{"class":420},[220,45075,359],{"class":264},[220,45077,45078,45080,45082],{"class":222,"line":644},[220,45079,402],{"class":264},[220,45081,347],{"class":420},[220,45083,359],{"class":264},[212,45085,45086],{"className":468,"code":44953,"language":469,"meta":178,"style":178},[99,45087,45088,45096,45104,45112,45120],{"__ignoreMap":178},[220,45089,45090,45092,45094],{"class":222,"line":223},[220,45091,343],{"class":264},[220,45093,347],{"class":420},[220,45095,359],{"class":264},[220,45097,45098,45100,45102],{"class":222,"line":179},[220,45099,364],{"class":264},[220,45101,20352],{"class":420},[220,45103,359],{"class":264},[220,45105,45106,45108,45110],{"class":222,"line":389},[220,45107,2550],{"class":264},[220,45109,2553],{"class":420},[220,45111,386],{"class":264},[220,45113,45114,45116,45118],{"class":222,"line":399},[220,45115,2567],{"class":264},[220,45117,20352],{"class":420},[220,45119,359],{"class":264},[220,45121,45122,45124,45126],{"class":222,"line":644},[220,45123,402],{"class":264},[220,45125,347],{"class":420},[220,45127,359],{"class":264},[212,45129,45131],{"className":251,"code":45130,"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,45132,45133,45143,45147,45161,45165,45173,45181,45185,45189],{"__ignoreMap":178},[220,45134,45135,45137,45139,45141],{"class":222,"line":223},[220,45136,261],{"class":260},[220,45138,10879],{"class":264},[220,45140,268],{"class":260},[220,45142,4007],{"class":230},[220,45144,45145],{"class":222,"line":179},[220,45146,647],{"emptyLinePlaceholder":194},[220,45148,45149,45151,45153,45155,45157,45159],{"class":222,"line":389},[220,45150,1735],{"class":260},[220,45152,1738],{"class":420},[220,45154,1741],{"class":260},[220,45156,1744],{"class":260},[220,45158,1747],{"class":226},[220,45160,1750],{"class":264},[220,45162,45163],{"class":222,"line":399},[220,45164,1765],{"class":264},[220,45166,45167,45169,45171],{"class":222,"line":644},[220,45168,1770],{"class":264},[220,45170,21015],{"class":230},[220,45172,6375],{"class":264},[220,45174,45175,45177,45179],{"class":222,"line":650},[220,45176,6380],{"class":264},[220,45178,3206],{"class":230},[220,45180,2465],{"class":264},[220,45182,45183],{"class":222,"line":656},[220,45184,6397],{"class":264},[220,45186,45187],{"class":222,"line":673},[220,45188,1787],{"class":264},[220,45190,45191],{"class":222,"line":682},[220,45192,1792],{"class":264},[1504,45194,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":45196},[45197,45198],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20352,"description":44939},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":45205,"title":45206,"body":45207,"category":32176,"componentType":25253,"description":45214,"extension":191,"meta":45475,"navigation":194,"path":45476,"requiresChild":194,"seo":45477,"stem":45478,"__hash__":45479},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":45208,"toc":45471},[45209,45212,45215,45217,45219,45222,45224,45469],[11,45210,45206],{"id":45211},"engraving",[15,45213,45214],{},"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",[31281,45216],{"component":45206},[23,45218,31285],{"id":25903},[31287,45220],{":props":45221},"[{\"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,45223,31293],{"id":31292},[246,45225,45226,45271,45315,45359,45403],{":tabs":1557},[212,45227,45229],{"className":334,"code":45228,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,45230,45231,45239,45247,45255,45263],{"__ignoreMap":178},[220,45232,45233,45235,45237],{"class":222,"line":223},[220,45234,343],{"class":264},[220,45236,347],{"class":346},[220,45238,359],{"class":264},[220,45240,45241,45243,45245],{"class":222,"line":179},[220,45242,364],{"class":264},[220,45244,45206],{"class":346},[220,45246,359],{"class":264},[220,45248,45249,45251,45253],{"class":222,"line":389},[220,45250,2550],{"class":264},[220,45252,2553],{"class":346},[220,45254,386],{"class":264},[220,45256,45257,45259,45261],{"class":222,"line":399},[220,45258,2567],{"class":264},[220,45260,45206],{"class":346},[220,45262,359],{"class":264},[220,45264,45265,45267,45269],{"class":222,"line":644},[220,45266,402],{"class":264},[220,45268,347],{"class":346},[220,45270,359],{"class":264},[212,45272,45273],{"className":409,"code":45228,"language":411,"meta":178,"style":178},[99,45274,45275,45283,45291,45299,45307],{"__ignoreMap":178},[220,45276,45277,45279,45281],{"class":222,"line":223},[220,45278,343],{"class":264},[220,45280,347],{"class":420},[220,45282,359],{"class":264},[220,45284,45285,45287,45289],{"class":222,"line":179},[220,45286,364],{"class":264},[220,45288,45206],{"class":420},[220,45290,359],{"class":264},[220,45292,45293,45295,45297],{"class":222,"line":389},[220,45294,2550],{"class":264},[220,45296,2553],{"class":420},[220,45298,386],{"class":264},[220,45300,45301,45303,45305],{"class":222,"line":399},[220,45302,2567],{"class":264},[220,45304,45206],{"class":420},[220,45306,359],{"class":264},[220,45308,45309,45311,45313],{"class":222,"line":644},[220,45310,402],{"class":264},[220,45312,347],{"class":420},[220,45314,359],{"class":264},[212,45316,45317],{"className":2844,"code":45228,"language":2846,"meta":178,"style":178},[99,45318,45319,45327,45335,45343,45351],{"__ignoreMap":178},[220,45320,45321,45323,45325],{"class":222,"line":223},[220,45322,343],{"class":264},[220,45324,347],{"class":420},[220,45326,359],{"class":264},[220,45328,45329,45331,45333],{"class":222,"line":179},[220,45330,364],{"class":264},[220,45332,45206],{"class":420},[220,45334,359],{"class":264},[220,45336,45337,45339,45341],{"class":222,"line":389},[220,45338,2550],{"class":264},[220,45340,2553],{"class":420},[220,45342,386],{"class":264},[220,45344,45345,45347,45349],{"class":222,"line":399},[220,45346,2567],{"class":264},[220,45348,45206],{"class":420},[220,45350,359],{"class":264},[220,45352,45353,45355,45357],{"class":222,"line":644},[220,45354,402],{"class":264},[220,45356,347],{"class":420},[220,45358,359],{"class":264},[212,45360,45361],{"className":468,"code":45228,"language":469,"meta":178,"style":178},[99,45362,45363,45371,45379,45387,45395],{"__ignoreMap":178},[220,45364,45365,45367,45369],{"class":222,"line":223},[220,45366,343],{"class":264},[220,45368,347],{"class":420},[220,45370,359],{"class":264},[220,45372,45373,45375,45377],{"class":222,"line":179},[220,45374,364],{"class":264},[220,45376,45206],{"class":420},[220,45378,359],{"class":264},[220,45380,45381,45383,45385],{"class":222,"line":389},[220,45382,2550],{"class":264},[220,45384,2553],{"class":420},[220,45386,386],{"class":264},[220,45388,45389,45391,45393],{"class":222,"line":399},[220,45390,2567],{"class":264},[220,45392,45206],{"class":420},[220,45394,359],{"class":264},[220,45396,45397,45399,45401],{"class":222,"line":644},[220,45398,402],{"class":264},[220,45400,347],{"class":420},[220,45402,359],{"class":264},[212,45404,45406],{"className":251,"code":45405,"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,45407,45408,45418,45422,45436,45440,45449,45457,45461,45465],{"__ignoreMap":178},[220,45409,45410,45412,45414,45416],{"class":222,"line":223},[220,45411,261],{"class":260},[220,45413,10879],{"class":264},[220,45415,268],{"class":260},[220,45417,4007],{"class":230},[220,45419,45420],{"class":222,"line":179},[220,45421,647],{"emptyLinePlaceholder":194},[220,45423,45424,45426,45428,45430,45432,45434],{"class":222,"line":389},[220,45425,1735],{"class":260},[220,45427,1738],{"class":420},[220,45429,1741],{"class":260},[220,45431,1744],{"class":260},[220,45433,1747],{"class":226},[220,45435,1750],{"class":264},[220,45437,45438],{"class":222,"line":399},[220,45439,1765],{"class":264},[220,45441,45442,45444,45447],{"class":222,"line":644},[220,45443,1770],{"class":264},[220,45445,45446],{"class":230},"'Engraving'",[220,45448,6375],{"class":264},[220,45450,45451,45453,45455],{"class":222,"line":650},[220,45452,6380],{"class":264},[220,45454,3206],{"class":230},[220,45456,2465],{"class":264},[220,45458,45459],{"class":222,"line":656},[220,45460,6397],{"class":264},[220,45462,45463],{"class":222,"line":673},[220,45464,1787],{"class":264},[220,45466,45467],{"class":222,"line":682},[220,45468,1792],{"class":264},[1504,45470,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":45472},[45473,45474],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":45206,"description":45214},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":45481,"title":45482,"body":45483,"category":32433,"componentType":25247,"description":45490,"extension":191,"meta":45675,"navigation":194,"path":45676,"requiresChild":31900,"seo":45677,"stem":45678,"__hash__":45679},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":45484,"toc":45671},[45485,45488,45491,45493,45495,45498,45500,45669],[11,45486,45482],{"id":45487},"erosionnoise",[15,45489,45490],{},"Branching, hydraulic-erosion ridges carved into noise",[31281,45492],{"component":45482},[23,45494,31285],{"id":25903},[31287,45496],{":props":45497},"[{\"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,45499,31293],{"id":31292},[246,45501,45502,45531,45559,45587,45615],{":tabs":1557},[212,45503,45505],{"className":334,"code":45504,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,45506,45507,45515,45523],{"__ignoreMap":178},[220,45508,45509,45511,45513],{"class":222,"line":223},[220,45510,343],{"class":264},[220,45512,347],{"class":346},[220,45514,359],{"class":264},[220,45516,45517,45519,45521],{"class":222,"line":179},[220,45518,364],{"class":264},[220,45520,45482],{"class":346},[220,45522,386],{"class":264},[220,45524,45525,45527,45529],{"class":222,"line":389},[220,45526,402],{"class":264},[220,45528,347],{"class":346},[220,45530,359],{"class":264},[212,45532,45533],{"className":409,"code":45504,"language":411,"meta":178,"style":178},[99,45534,45535,45543,45551],{"__ignoreMap":178},[220,45536,45537,45539,45541],{"class":222,"line":223},[220,45538,343],{"class":264},[220,45540,347],{"class":420},[220,45542,359],{"class":264},[220,45544,45545,45547,45549],{"class":222,"line":179},[220,45546,364],{"class":264},[220,45548,45482],{"class":420},[220,45550,386],{"class":264},[220,45552,45553,45555,45557],{"class":222,"line":389},[220,45554,402],{"class":264},[220,45556,347],{"class":420},[220,45558,359],{"class":264},[212,45560,45561],{"className":2844,"code":45504,"language":2846,"meta":178,"style":178},[99,45562,45563,45571,45579],{"__ignoreMap":178},[220,45564,45565,45567,45569],{"class":222,"line":223},[220,45566,343],{"class":264},[220,45568,347],{"class":420},[220,45570,359],{"class":264},[220,45572,45573,45575,45577],{"class":222,"line":179},[220,45574,364],{"class":264},[220,45576,45482],{"class":420},[220,45578,386],{"class":264},[220,45580,45581,45583,45585],{"class":222,"line":389},[220,45582,402],{"class":264},[220,45584,347],{"class":420},[220,45586,359],{"class":264},[212,45588,45589],{"className":468,"code":45504,"language":469,"meta":178,"style":178},[99,45590,45591,45599,45607],{"__ignoreMap":178},[220,45592,45593,45595,45597],{"class":222,"line":223},[220,45594,343],{"class":264},[220,45596,347],{"class":420},[220,45598,359],{"class":264},[220,45600,45601,45603,45605],{"class":222,"line":179},[220,45602,364],{"class":264},[220,45604,45482],{"class":420},[220,45606,386],{"class":264},[220,45608,45609,45611,45613],{"class":222,"line":389},[220,45610,402],{"class":264},[220,45612,347],{"class":420},[220,45614,359],{"class":264},[212,45616,45618],{"className":251,"code":45617,"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,45619,45620,45630,45634,45648,45652,45661,45665],{"__ignoreMap":178},[220,45621,45622,45624,45626,45628],{"class":222,"line":223},[220,45623,261],{"class":260},[220,45625,10879],{"class":264},[220,45627,268],{"class":260},[220,45629,4007],{"class":230},[220,45631,45632],{"class":222,"line":179},[220,45633,647],{"emptyLinePlaceholder":194},[220,45635,45636,45638,45640,45642,45644,45646],{"class":222,"line":389},[220,45637,1735],{"class":260},[220,45639,1738],{"class":420},[220,45641,1741],{"class":260},[220,45643,1744],{"class":260},[220,45645,1747],{"class":226},[220,45647,1750],{"class":264},[220,45649,45650],{"class":222,"line":399},[220,45651,1765],{"class":264},[220,45653,45654,45656,45659],{"class":222,"line":644},[220,45655,1770],{"class":264},[220,45657,45658],{"class":230},"'ErosionNoise'",[220,45660,2465],{"class":264},[220,45662,45663],{"class":222,"line":650},[220,45664,1787],{"class":264},[220,45666,45667],{"class":222,"line":656},[220,45668,1792],{"class":264},[1504,45670,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":45672},[45673,45674],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":45482,"description":45490},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":45681,"title":45682,"body":45683,"category":35738,"componentType":25253,"description":45690,"extension":191,"meta":45951,"navigation":194,"path":45952,"requiresChild":194,"seo":45953,"stem":45954,"__hash__":45955},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":45684,"toc":45947},[45685,45688,45691,45693,45695,45698,45700,45945],[11,45686,45682],{"id":45687},"exposure",[15,45689,45690],{},"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.",[31281,45692],{"component":45682},[23,45694,31285],{"id":25903},[31287,45696],{":props":45697},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,45699,31293],{"id":31292},[246,45701,45702,45747,45791,45835,45879],{":tabs":1557},[212,45703,45705],{"className":334,"code":45704,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,45706,45707,45715,45723,45731,45739],{"__ignoreMap":178},[220,45708,45709,45711,45713],{"class":222,"line":223},[220,45710,343],{"class":264},[220,45712,347],{"class":346},[220,45714,359],{"class":264},[220,45716,45717,45719,45721],{"class":222,"line":179},[220,45718,364],{"class":264},[220,45720,45682],{"class":346},[220,45722,359],{"class":264},[220,45724,45725,45727,45729],{"class":222,"line":389},[220,45726,2550],{"class":264},[220,45728,2553],{"class":346},[220,45730,386],{"class":264},[220,45732,45733,45735,45737],{"class":222,"line":399},[220,45734,2567],{"class":264},[220,45736,45682],{"class":346},[220,45738,359],{"class":264},[220,45740,45741,45743,45745],{"class":222,"line":644},[220,45742,402],{"class":264},[220,45744,347],{"class":346},[220,45746,359],{"class":264},[212,45748,45749],{"className":409,"code":45704,"language":411,"meta":178,"style":178},[99,45750,45751,45759,45767,45775,45783],{"__ignoreMap":178},[220,45752,45753,45755,45757],{"class":222,"line":223},[220,45754,343],{"class":264},[220,45756,347],{"class":420},[220,45758,359],{"class":264},[220,45760,45761,45763,45765],{"class":222,"line":179},[220,45762,364],{"class":264},[220,45764,45682],{"class":420},[220,45766,359],{"class":264},[220,45768,45769,45771,45773],{"class":222,"line":389},[220,45770,2550],{"class":264},[220,45772,2553],{"class":420},[220,45774,386],{"class":264},[220,45776,45777,45779,45781],{"class":222,"line":399},[220,45778,2567],{"class":264},[220,45780,45682],{"class":420},[220,45782,359],{"class":264},[220,45784,45785,45787,45789],{"class":222,"line":644},[220,45786,402],{"class":264},[220,45788,347],{"class":420},[220,45790,359],{"class":264},[212,45792,45793],{"className":2844,"code":45704,"language":2846,"meta":178,"style":178},[99,45794,45795,45803,45811,45819,45827],{"__ignoreMap":178},[220,45796,45797,45799,45801],{"class":222,"line":223},[220,45798,343],{"class":264},[220,45800,347],{"class":420},[220,45802,359],{"class":264},[220,45804,45805,45807,45809],{"class":222,"line":179},[220,45806,364],{"class":264},[220,45808,45682],{"class":420},[220,45810,359],{"class":264},[220,45812,45813,45815,45817],{"class":222,"line":389},[220,45814,2550],{"class":264},[220,45816,2553],{"class":420},[220,45818,386],{"class":264},[220,45820,45821,45823,45825],{"class":222,"line":399},[220,45822,2567],{"class":264},[220,45824,45682],{"class":420},[220,45826,359],{"class":264},[220,45828,45829,45831,45833],{"class":222,"line":644},[220,45830,402],{"class":264},[220,45832,347],{"class":420},[220,45834,359],{"class":264},[212,45836,45837],{"className":468,"code":45704,"language":469,"meta":178,"style":178},[99,45838,45839,45847,45855,45863,45871],{"__ignoreMap":178},[220,45840,45841,45843,45845],{"class":222,"line":223},[220,45842,343],{"class":264},[220,45844,347],{"class":420},[220,45846,359],{"class":264},[220,45848,45849,45851,45853],{"class":222,"line":179},[220,45850,364],{"class":264},[220,45852,45682],{"class":420},[220,45854,359],{"class":264},[220,45856,45857,45859,45861],{"class":222,"line":389},[220,45858,2550],{"class":264},[220,45860,2553],{"class":420},[220,45862,386],{"class":264},[220,45864,45865,45867,45869],{"class":222,"line":399},[220,45866,2567],{"class":264},[220,45868,45682],{"class":420},[220,45870,359],{"class":264},[220,45872,45873,45875,45877],{"class":222,"line":644},[220,45874,402],{"class":264},[220,45876,347],{"class":420},[220,45878,359],{"class":264},[212,45880,45882],{"className":251,"code":45881,"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,45883,45884,45894,45898,45912,45916,45925,45933,45937,45941],{"__ignoreMap":178},[220,45885,45886,45888,45890,45892],{"class":222,"line":223},[220,45887,261],{"class":260},[220,45889,10879],{"class":264},[220,45891,268],{"class":260},[220,45893,4007],{"class":230},[220,45895,45896],{"class":222,"line":179},[220,45897,647],{"emptyLinePlaceholder":194},[220,45899,45900,45902,45904,45906,45908,45910],{"class":222,"line":389},[220,45901,1735],{"class":260},[220,45903,1738],{"class":420},[220,45905,1741],{"class":260},[220,45907,1744],{"class":260},[220,45909,1747],{"class":226},[220,45911,1750],{"class":264},[220,45913,45914],{"class":222,"line":399},[220,45915,1765],{"class":264},[220,45917,45918,45920,45923],{"class":222,"line":644},[220,45919,1770],{"class":264},[220,45921,45922],{"class":230},"'Exposure'",[220,45924,6375],{"class":264},[220,45926,45927,45929,45931],{"class":222,"line":650},[220,45928,6380],{"class":264},[220,45930,3206],{"class":230},[220,45932,2465],{"class":264},[220,45934,45935],{"class":222,"line":656},[220,45936,6397],{"class":264},[220,45938,45939],{"class":222,"line":673},[220,45940,1787],{"class":264},[220,45942,45943],{"class":222,"line":682},[220,45944,1792],{"class":264},[1504,45946,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":45948},[45949,45950],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":45682,"description":45690},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":45957,"title":45958,"body":45959,"category":32433,"componentType":25247,"description":45966,"extension":191,"meta":46151,"navigation":194,"path":46152,"requiresChild":31900,"seo":46153,"stem":46154,"__hash__":46155},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":45960,"toc":46147},[45961,45964,45967,45969,45971,45974,45976,46145],[11,45962,45958],{"id":45963},"fallinglines",[15,45965,45966],{},"Directional falling lines with a leading-to-trailing color fade",[31281,45968],{"component":45958},[23,45970,31285],{"id":25903},[31287,45972],{":props":45973},"[{\"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,45975,31293],{"id":31292},[246,45977,45978,46007,46035,46063,46091],{":tabs":1557},[212,45979,45981],{"className":334,"code":45980,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,45982,45983,45991,45999],{"__ignoreMap":178},[220,45984,45985,45987,45989],{"class":222,"line":223},[220,45986,343],{"class":264},[220,45988,347],{"class":346},[220,45990,359],{"class":264},[220,45992,45993,45995,45997],{"class":222,"line":179},[220,45994,364],{"class":264},[220,45996,45958],{"class":346},[220,45998,386],{"class":264},[220,46000,46001,46003,46005],{"class":222,"line":389},[220,46002,402],{"class":264},[220,46004,347],{"class":346},[220,46006,359],{"class":264},[212,46008,46009],{"className":409,"code":45980,"language":411,"meta":178,"style":178},[99,46010,46011,46019,46027],{"__ignoreMap":178},[220,46012,46013,46015,46017],{"class":222,"line":223},[220,46014,343],{"class":264},[220,46016,347],{"class":420},[220,46018,359],{"class":264},[220,46020,46021,46023,46025],{"class":222,"line":179},[220,46022,364],{"class":264},[220,46024,45958],{"class":420},[220,46026,386],{"class":264},[220,46028,46029,46031,46033],{"class":222,"line":389},[220,46030,402],{"class":264},[220,46032,347],{"class":420},[220,46034,359],{"class":264},[212,46036,46037],{"className":2844,"code":45980,"language":2846,"meta":178,"style":178},[99,46038,46039,46047,46055],{"__ignoreMap":178},[220,46040,46041,46043,46045],{"class":222,"line":223},[220,46042,343],{"class":264},[220,46044,347],{"class":420},[220,46046,359],{"class":264},[220,46048,46049,46051,46053],{"class":222,"line":179},[220,46050,364],{"class":264},[220,46052,45958],{"class":420},[220,46054,386],{"class":264},[220,46056,46057,46059,46061],{"class":222,"line":389},[220,46058,402],{"class":264},[220,46060,347],{"class":420},[220,46062,359],{"class":264},[212,46064,46065],{"className":468,"code":45980,"language":469,"meta":178,"style":178},[99,46066,46067,46075,46083],{"__ignoreMap":178},[220,46068,46069,46071,46073],{"class":222,"line":223},[220,46070,343],{"class":264},[220,46072,347],{"class":420},[220,46074,359],{"class":264},[220,46076,46077,46079,46081],{"class":222,"line":179},[220,46078,364],{"class":264},[220,46080,45958],{"class":420},[220,46082,386],{"class":264},[220,46084,46085,46087,46089],{"class":222,"line":389},[220,46086,402],{"class":264},[220,46088,347],{"class":420},[220,46090,359],{"class":264},[212,46092,46094],{"className":251,"code":46093,"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,46095,46096,46106,46110,46124,46128,46137,46141],{"__ignoreMap":178},[220,46097,46098,46100,46102,46104],{"class":222,"line":223},[220,46099,261],{"class":260},[220,46101,10879],{"class":264},[220,46103,268],{"class":260},[220,46105,4007],{"class":230},[220,46107,46108],{"class":222,"line":179},[220,46109,647],{"emptyLinePlaceholder":194},[220,46111,46112,46114,46116,46118,46120,46122],{"class":222,"line":389},[220,46113,1735],{"class":260},[220,46115,1738],{"class":420},[220,46117,1741],{"class":260},[220,46119,1744],{"class":260},[220,46121,1747],{"class":226},[220,46123,1750],{"class":264},[220,46125,46126],{"class":222,"line":399},[220,46127,1765],{"class":264},[220,46129,46130,46132,46135],{"class":222,"line":644},[220,46131,1770],{"class":264},[220,46133,46134],{"class":230},"'FallingLines'",[220,46136,2465],{"class":264},[220,46138,46139],{"class":222,"line":650},[220,46140,1787],{"class":264},[220,46142,46143],{"class":222,"line":656},[220,46144,1792],{"class":264},[1504,46146,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":46148},[46149,46150],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":45958,"description":45966},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46157,"title":46158,"body":46159,"category":32176,"componentType":25253,"description":46166,"extension":191,"meta":46427,"navigation":194,"path":46428,"requiresChild":194,"seo":46429,"stem":46430,"__hash__":46431},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46160,"toc":46423},[46161,46164,46167,46169,46171,46174,46176,46421],[11,46162,46158],{"id":46163},"filmgrain",[15,46165,46166],{},"Analog film grain texture overlay, weighted toward darker areas",[31281,46168],{"component":46158},[23,46170,31285],{"id":25903},[31287,46172],{":props":46173},"[{\"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,46175,31293],{"id":31292},[246,46177,46178,46223,46267,46311,46355],{":tabs":1557},[212,46179,46181],{"className":334,"code":46180,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,46182,46183,46191,46199,46207,46215],{"__ignoreMap":178},[220,46184,46185,46187,46189],{"class":222,"line":223},[220,46186,343],{"class":264},[220,46188,347],{"class":346},[220,46190,359],{"class":264},[220,46192,46193,46195,46197],{"class":222,"line":179},[220,46194,364],{"class":264},[220,46196,46158],{"class":346},[220,46198,359],{"class":264},[220,46200,46201,46203,46205],{"class":222,"line":389},[220,46202,2550],{"class":264},[220,46204,2553],{"class":346},[220,46206,386],{"class":264},[220,46208,46209,46211,46213],{"class":222,"line":399},[220,46210,2567],{"class":264},[220,46212,46158],{"class":346},[220,46214,359],{"class":264},[220,46216,46217,46219,46221],{"class":222,"line":644},[220,46218,402],{"class":264},[220,46220,347],{"class":346},[220,46222,359],{"class":264},[212,46224,46225],{"className":409,"code":46180,"language":411,"meta":178,"style":178},[99,46226,46227,46235,46243,46251,46259],{"__ignoreMap":178},[220,46228,46229,46231,46233],{"class":222,"line":223},[220,46230,343],{"class":264},[220,46232,347],{"class":420},[220,46234,359],{"class":264},[220,46236,46237,46239,46241],{"class":222,"line":179},[220,46238,364],{"class":264},[220,46240,46158],{"class":420},[220,46242,359],{"class":264},[220,46244,46245,46247,46249],{"class":222,"line":389},[220,46246,2550],{"class":264},[220,46248,2553],{"class":420},[220,46250,386],{"class":264},[220,46252,46253,46255,46257],{"class":222,"line":399},[220,46254,2567],{"class":264},[220,46256,46158],{"class":420},[220,46258,359],{"class":264},[220,46260,46261,46263,46265],{"class":222,"line":644},[220,46262,402],{"class":264},[220,46264,347],{"class":420},[220,46266,359],{"class":264},[212,46268,46269],{"className":2844,"code":46180,"language":2846,"meta":178,"style":178},[99,46270,46271,46279,46287,46295,46303],{"__ignoreMap":178},[220,46272,46273,46275,46277],{"class":222,"line":223},[220,46274,343],{"class":264},[220,46276,347],{"class":420},[220,46278,359],{"class":264},[220,46280,46281,46283,46285],{"class":222,"line":179},[220,46282,364],{"class":264},[220,46284,46158],{"class":420},[220,46286,359],{"class":264},[220,46288,46289,46291,46293],{"class":222,"line":389},[220,46290,2550],{"class":264},[220,46292,2553],{"class":420},[220,46294,386],{"class":264},[220,46296,46297,46299,46301],{"class":222,"line":399},[220,46298,2567],{"class":264},[220,46300,46158],{"class":420},[220,46302,359],{"class":264},[220,46304,46305,46307,46309],{"class":222,"line":644},[220,46306,402],{"class":264},[220,46308,347],{"class":420},[220,46310,359],{"class":264},[212,46312,46313],{"className":468,"code":46180,"language":469,"meta":178,"style":178},[99,46314,46315,46323,46331,46339,46347],{"__ignoreMap":178},[220,46316,46317,46319,46321],{"class":222,"line":223},[220,46318,343],{"class":264},[220,46320,347],{"class":420},[220,46322,359],{"class":264},[220,46324,46325,46327,46329],{"class":222,"line":179},[220,46326,364],{"class":264},[220,46328,46158],{"class":420},[220,46330,359],{"class":264},[220,46332,46333,46335,46337],{"class":222,"line":389},[220,46334,2550],{"class":264},[220,46336,2553],{"class":420},[220,46338,386],{"class":264},[220,46340,46341,46343,46345],{"class":222,"line":399},[220,46342,2567],{"class":264},[220,46344,46158],{"class":420},[220,46346,359],{"class":264},[220,46348,46349,46351,46353],{"class":222,"line":644},[220,46350,402],{"class":264},[220,46352,347],{"class":420},[220,46354,359],{"class":264},[212,46356,46358],{"className":251,"code":46357,"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,46359,46360,46370,46374,46388,46392,46401,46409,46413,46417],{"__ignoreMap":178},[220,46361,46362,46364,46366,46368],{"class":222,"line":223},[220,46363,261],{"class":260},[220,46365,10879],{"class":264},[220,46367,268],{"class":260},[220,46369,4007],{"class":230},[220,46371,46372],{"class":222,"line":179},[220,46373,647],{"emptyLinePlaceholder":194},[220,46375,46376,46378,46380,46382,46384,46386],{"class":222,"line":389},[220,46377,1735],{"class":260},[220,46379,1738],{"class":420},[220,46381,1741],{"class":260},[220,46383,1744],{"class":260},[220,46385,1747],{"class":226},[220,46387,1750],{"class":264},[220,46389,46390],{"class":222,"line":399},[220,46391,1765],{"class":264},[220,46393,46394,46396,46399],{"class":222,"line":644},[220,46395,1770],{"class":264},[220,46397,46398],{"class":230},"'FilmGrain'",[220,46400,6375],{"class":264},[220,46402,46403,46405,46407],{"class":222,"line":650},[220,46404,6380],{"class":264},[220,46406,3206],{"class":230},[220,46408,2465],{"class":264},[220,46410,46411],{"class":222,"line":656},[220,46412,6397],{"class":264},[220,46414,46415],{"class":222,"line":673},[220,46416,1787],{"class":264},[220,46418,46419],{"class":222,"line":682},[220,46420,1792],{"class":264},[1504,46422,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":46424},[46425,46426],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46158,"description":46166},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":46433,"title":46434,"body":46435,"category":35738,"componentType":25253,"description":46442,"extension":191,"meta":46703,"navigation":194,"path":46704,"requiresChild":194,"seo":46705,"stem":46706,"__hash__":46707},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":46436,"toc":46699},[46437,46440,46443,46445,46447,46450,46452,46697],[11,46438,46434],{"id":46439},"filmstock",[15,46441,46442],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31281,46444],{"component":46434},[23,46446,31285],{"id":25903},[31287,46448],{":props":46449},"[{\"name\":\"stock\",\"type\":\"\\\"portrait400\\\" | \\\"vivid100\\\" | \\\"chrome64\\\" | \\\"slide100\\\" | \\\"velvet50\\\" | \\\"everyday400\\\" | \\\"pastel400\\\" | \\\"warm200\\\" | \\\"instant\\\" | \\\"mono400\\\"\",\"default\":\"portrait400\",\"description\":\"Film stock — each look is a real measured film-emulation color LUT\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly the stock's color grade is applied\"},{\"name\":\"halation\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Strength of the red-orange highlight glow (film emulsion backscatter)\"},{\"name\":\"halationRadius\",\"type\":\"number\",\"default\":\"28\",\"description\":\"Spread of the halation glow in pixels\"},{\"name\":\"weave\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Gate weave — subtle projector-like frame jitter and rotation\"}]",[23,46451,31293],{"id":31292},[246,46453,46454,46499,46543,46587,46631],{":tabs":1557},[212,46455,46457],{"className":334,"code":46456,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,46458,46459,46467,46475,46483,46491],{"__ignoreMap":178},[220,46460,46461,46463,46465],{"class":222,"line":223},[220,46462,343],{"class":264},[220,46464,347],{"class":346},[220,46466,359],{"class":264},[220,46468,46469,46471,46473],{"class":222,"line":179},[220,46470,364],{"class":264},[220,46472,46434],{"class":346},[220,46474,359],{"class":264},[220,46476,46477,46479,46481],{"class":222,"line":389},[220,46478,2550],{"class":264},[220,46480,2553],{"class":346},[220,46482,386],{"class":264},[220,46484,46485,46487,46489],{"class":222,"line":399},[220,46486,2567],{"class":264},[220,46488,46434],{"class":346},[220,46490,359],{"class":264},[220,46492,46493,46495,46497],{"class":222,"line":644},[220,46494,402],{"class":264},[220,46496,347],{"class":346},[220,46498,359],{"class":264},[212,46500,46501],{"className":409,"code":46456,"language":411,"meta":178,"style":178},[99,46502,46503,46511,46519,46527,46535],{"__ignoreMap":178},[220,46504,46505,46507,46509],{"class":222,"line":223},[220,46506,343],{"class":264},[220,46508,347],{"class":420},[220,46510,359],{"class":264},[220,46512,46513,46515,46517],{"class":222,"line":179},[220,46514,364],{"class":264},[220,46516,46434],{"class":420},[220,46518,359],{"class":264},[220,46520,46521,46523,46525],{"class":222,"line":389},[220,46522,2550],{"class":264},[220,46524,2553],{"class":420},[220,46526,386],{"class":264},[220,46528,46529,46531,46533],{"class":222,"line":399},[220,46530,2567],{"class":264},[220,46532,46434],{"class":420},[220,46534,359],{"class":264},[220,46536,46537,46539,46541],{"class":222,"line":644},[220,46538,402],{"class":264},[220,46540,347],{"class":420},[220,46542,359],{"class":264},[212,46544,46545],{"className":2844,"code":46456,"language":2846,"meta":178,"style":178},[99,46546,46547,46555,46563,46571,46579],{"__ignoreMap":178},[220,46548,46549,46551,46553],{"class":222,"line":223},[220,46550,343],{"class":264},[220,46552,347],{"class":420},[220,46554,359],{"class":264},[220,46556,46557,46559,46561],{"class":222,"line":179},[220,46558,364],{"class":264},[220,46560,46434],{"class":420},[220,46562,359],{"class":264},[220,46564,46565,46567,46569],{"class":222,"line":389},[220,46566,2550],{"class":264},[220,46568,2553],{"class":420},[220,46570,386],{"class":264},[220,46572,46573,46575,46577],{"class":222,"line":399},[220,46574,2567],{"class":264},[220,46576,46434],{"class":420},[220,46578,359],{"class":264},[220,46580,46581,46583,46585],{"class":222,"line":644},[220,46582,402],{"class":264},[220,46584,347],{"class":420},[220,46586,359],{"class":264},[212,46588,46589],{"className":468,"code":46456,"language":469,"meta":178,"style":178},[99,46590,46591,46599,46607,46615,46623],{"__ignoreMap":178},[220,46592,46593,46595,46597],{"class":222,"line":223},[220,46594,343],{"class":264},[220,46596,347],{"class":420},[220,46598,359],{"class":264},[220,46600,46601,46603,46605],{"class":222,"line":179},[220,46602,364],{"class":264},[220,46604,46434],{"class":420},[220,46606,359],{"class":264},[220,46608,46609,46611,46613],{"class":222,"line":389},[220,46610,2550],{"class":264},[220,46612,2553],{"class":420},[220,46614,386],{"class":264},[220,46616,46617,46619,46621],{"class":222,"line":399},[220,46618,2567],{"class":264},[220,46620,46434],{"class":420},[220,46622,359],{"class":264},[220,46624,46625,46627,46629],{"class":222,"line":644},[220,46626,402],{"class":264},[220,46628,347],{"class":420},[220,46630,359],{"class":264},[212,46632,46634],{"className":251,"code":46633,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FilmStock', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,46635,46636,46646,46650,46664,46668,46677,46685,46689,46693],{"__ignoreMap":178},[220,46637,46638,46640,46642,46644],{"class":222,"line":223},[220,46639,261],{"class":260},[220,46641,10879],{"class":264},[220,46643,268],{"class":260},[220,46645,4007],{"class":230},[220,46647,46648],{"class":222,"line":179},[220,46649,647],{"emptyLinePlaceholder":194},[220,46651,46652,46654,46656,46658,46660,46662],{"class":222,"line":389},[220,46653,1735],{"class":260},[220,46655,1738],{"class":420},[220,46657,1741],{"class":260},[220,46659,1744],{"class":260},[220,46661,1747],{"class":226},[220,46663,1750],{"class":264},[220,46665,46666],{"class":222,"line":399},[220,46667,1765],{"class":264},[220,46669,46670,46672,46675],{"class":222,"line":644},[220,46671,1770],{"class":264},[220,46673,46674],{"class":230},"'FilmStock'",[220,46676,6375],{"class":264},[220,46678,46679,46681,46683],{"class":222,"line":650},[220,46680,6380],{"class":264},[220,46682,3206],{"class":230},[220,46684,2465],{"class":264},[220,46686,46687],{"class":222,"line":656},[220,46688,6397],{"class":264},[220,46690,46691],{"class":222,"line":673},[220,46692,1787],{"class":264},[220,46694,46695],{"class":222,"line":682},[220,46696,1792],{"class":264},[1504,46698,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":46700},[46701,46702],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":46434,"description":46442},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":46709,"title":46710,"body":46711,"category":32766,"componentType":25253,"description":46718,"extension":191,"meta":46979,"navigation":194,"path":46980,"requiresChild":194,"seo":46981,"stem":46982,"__hash__":46983},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":46712,"toc":46975},[46713,46716,46719,46721,46723,46726,46728,46973],[11,46714,46710],{"id":46715},"flip",[15,46717,46718],{},"Mirror content horizontally, vertically, or both",[31281,46720],{"component":46710},[23,46722,31285],{"id":25903},[31287,46724],{":props":46725},"[{\"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,46727,31293],{"id":31292},[246,46729,46730,46775,46819,46863,46907],{":tabs":1557},[212,46731,46733],{"className":334,"code":46732,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,46734,46735,46743,46751,46759,46767],{"__ignoreMap":178},[220,46736,46737,46739,46741],{"class":222,"line":223},[220,46738,343],{"class":264},[220,46740,347],{"class":346},[220,46742,359],{"class":264},[220,46744,46745,46747,46749],{"class":222,"line":179},[220,46746,364],{"class":264},[220,46748,46710],{"class":346},[220,46750,359],{"class":264},[220,46752,46753,46755,46757],{"class":222,"line":389},[220,46754,2550],{"class":264},[220,46756,2553],{"class":346},[220,46758,386],{"class":264},[220,46760,46761,46763,46765],{"class":222,"line":399},[220,46762,2567],{"class":264},[220,46764,46710],{"class":346},[220,46766,359],{"class":264},[220,46768,46769,46771,46773],{"class":222,"line":644},[220,46770,402],{"class":264},[220,46772,347],{"class":346},[220,46774,359],{"class":264},[212,46776,46777],{"className":409,"code":46732,"language":411,"meta":178,"style":178},[99,46778,46779,46787,46795,46803,46811],{"__ignoreMap":178},[220,46780,46781,46783,46785],{"class":222,"line":223},[220,46782,343],{"class":264},[220,46784,347],{"class":420},[220,46786,359],{"class":264},[220,46788,46789,46791,46793],{"class":222,"line":179},[220,46790,364],{"class":264},[220,46792,46710],{"class":420},[220,46794,359],{"class":264},[220,46796,46797,46799,46801],{"class":222,"line":389},[220,46798,2550],{"class":264},[220,46800,2553],{"class":420},[220,46802,386],{"class":264},[220,46804,46805,46807,46809],{"class":222,"line":399},[220,46806,2567],{"class":264},[220,46808,46710],{"class":420},[220,46810,359],{"class":264},[220,46812,46813,46815,46817],{"class":222,"line":644},[220,46814,402],{"class":264},[220,46816,347],{"class":420},[220,46818,359],{"class":264},[212,46820,46821],{"className":2844,"code":46732,"language":2846,"meta":178,"style":178},[99,46822,46823,46831,46839,46847,46855],{"__ignoreMap":178},[220,46824,46825,46827,46829],{"class":222,"line":223},[220,46826,343],{"class":264},[220,46828,347],{"class":420},[220,46830,359],{"class":264},[220,46832,46833,46835,46837],{"class":222,"line":179},[220,46834,364],{"class":264},[220,46836,46710],{"class":420},[220,46838,359],{"class":264},[220,46840,46841,46843,46845],{"class":222,"line":389},[220,46842,2550],{"class":264},[220,46844,2553],{"class":420},[220,46846,386],{"class":264},[220,46848,46849,46851,46853],{"class":222,"line":399},[220,46850,2567],{"class":264},[220,46852,46710],{"class":420},[220,46854,359],{"class":264},[220,46856,46857,46859,46861],{"class":222,"line":644},[220,46858,402],{"class":264},[220,46860,347],{"class":420},[220,46862,359],{"class":264},[212,46864,46865],{"className":468,"code":46732,"language":469,"meta":178,"style":178},[99,46866,46867,46875,46883,46891,46899],{"__ignoreMap":178},[220,46868,46869,46871,46873],{"class":222,"line":223},[220,46870,343],{"class":264},[220,46872,347],{"class":420},[220,46874,359],{"class":264},[220,46876,46877,46879,46881],{"class":222,"line":179},[220,46878,364],{"class":264},[220,46880,46710],{"class":420},[220,46882,359],{"class":264},[220,46884,46885,46887,46889],{"class":222,"line":389},[220,46886,2550],{"class":264},[220,46888,2553],{"class":420},[220,46890,386],{"class":264},[220,46892,46893,46895,46897],{"class":222,"line":399},[220,46894,2567],{"class":264},[220,46896,46710],{"class":420},[220,46898,359],{"class":264},[220,46900,46901,46903,46905],{"class":222,"line":644},[220,46902,402],{"class":264},[220,46904,347],{"class":420},[220,46906,359],{"class":264},[212,46908,46910],{"className":251,"code":46909,"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,46911,46912,46922,46926,46940,46944,46953,46961,46965,46969],{"__ignoreMap":178},[220,46913,46914,46916,46918,46920],{"class":222,"line":223},[220,46915,261],{"class":260},[220,46917,10879],{"class":264},[220,46919,268],{"class":260},[220,46921,4007],{"class":230},[220,46923,46924],{"class":222,"line":179},[220,46925,647],{"emptyLinePlaceholder":194},[220,46927,46928,46930,46932,46934,46936,46938],{"class":222,"line":389},[220,46929,1735],{"class":260},[220,46931,1738],{"class":420},[220,46933,1741],{"class":260},[220,46935,1744],{"class":260},[220,46937,1747],{"class":226},[220,46939,1750],{"class":264},[220,46941,46942],{"class":222,"line":399},[220,46943,1765],{"class":264},[220,46945,46946,46948,46951],{"class":222,"line":644},[220,46947,1770],{"class":264},[220,46949,46950],{"class":230},"'Flip'",[220,46952,6375],{"class":264},[220,46954,46955,46957,46959],{"class":222,"line":650},[220,46956,6380],{"class":264},[220,46958,3206],{"class":230},[220,46960,2465],{"class":264},[220,46962,46963],{"class":222,"line":656},[220,46964,6397],{"class":264},[220,46966,46967],{"class":222,"line":673},[220,46968,1787],{"class":264},[220,46970,46971],{"class":222,"line":682},[220,46972,1792],{"class":264},[1504,46974,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":46976},[46977,46978],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":46710,"description":46718},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":46985,"title":46986,"body":46987,"category":32433,"componentType":25247,"description":46994,"extension":191,"meta":47179,"navigation":194,"path":47180,"requiresChild":31900,"seo":47181,"stem":47182,"__hash__":47183},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":46988,"toc":47175},[46989,46992,46995,46997,46999,47002,47004,47173],[11,46990,46986],{"id":46991},"floatingparticles",[15,46993,46994],{},"Drifting, twinkling motes — thousands of real simulated particles floating in a shared heading with per-particle wander and variance, and a cursor that stirs the field with a gust that settles back into the drift",[31281,46996],{"component":46986},[23,46998,31285],{"id":25903},[31287,47000],{":props":47001},"[{\"name\":\"particleColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the particles\"},{\"name\":\"shape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"1200\",\"description\":\"Number of particles\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Size of the particles (each also varies slightly for depth)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge softness of each particle — 0 is a crisp shape, 1 a soft glow puff\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Speed of the shared drift\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward)\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-particle speed variance around the shared drift (0 = everything moves in lockstep)\"},{\"name\":\"angleVariance\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way)\"},{\"name\":\"randomness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Orbital wander — each particle circles lazily around its drift path instead of gliding straight\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the twinkle (0 = steady, 1 = full shimmer)\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed\"}]",[23,47003,31293],{"id":31292},[246,47005,47006,47035,47063,47091,47119],{":tabs":1557},[212,47007,47009],{"className":334,"code":47008,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47010,47011,47019,47027],{"__ignoreMap":178},[220,47012,47013,47015,47017],{"class":222,"line":223},[220,47014,343],{"class":264},[220,47016,347],{"class":346},[220,47018,359],{"class":264},[220,47020,47021,47023,47025],{"class":222,"line":179},[220,47022,364],{"class":264},[220,47024,46986],{"class":346},[220,47026,386],{"class":264},[220,47028,47029,47031,47033],{"class":222,"line":389},[220,47030,402],{"class":264},[220,47032,347],{"class":346},[220,47034,359],{"class":264},[212,47036,47037],{"className":409,"code":47008,"language":411,"meta":178,"style":178},[99,47038,47039,47047,47055],{"__ignoreMap":178},[220,47040,47041,47043,47045],{"class":222,"line":223},[220,47042,343],{"class":264},[220,47044,347],{"class":420},[220,47046,359],{"class":264},[220,47048,47049,47051,47053],{"class":222,"line":179},[220,47050,364],{"class":264},[220,47052,46986],{"class":420},[220,47054,386],{"class":264},[220,47056,47057,47059,47061],{"class":222,"line":389},[220,47058,402],{"class":264},[220,47060,347],{"class":420},[220,47062,359],{"class":264},[212,47064,47065],{"className":2844,"code":47008,"language":2846,"meta":178,"style":178},[99,47066,47067,47075,47083],{"__ignoreMap":178},[220,47068,47069,47071,47073],{"class":222,"line":223},[220,47070,343],{"class":264},[220,47072,347],{"class":420},[220,47074,359],{"class":264},[220,47076,47077,47079,47081],{"class":222,"line":179},[220,47078,364],{"class":264},[220,47080,46986],{"class":420},[220,47082,386],{"class":264},[220,47084,47085,47087,47089],{"class":222,"line":389},[220,47086,402],{"class":264},[220,47088,347],{"class":420},[220,47090,359],{"class":264},[212,47092,47093],{"className":468,"code":47008,"language":469,"meta":178,"style":178},[99,47094,47095,47103,47111],{"__ignoreMap":178},[220,47096,47097,47099,47101],{"class":222,"line":223},[220,47098,343],{"class":264},[220,47100,347],{"class":420},[220,47102,359],{"class":264},[220,47104,47105,47107,47109],{"class":222,"line":179},[220,47106,364],{"class":264},[220,47108,46986],{"class":420},[220,47110,386],{"class":264},[220,47112,47113,47115,47117],{"class":222,"line":389},[220,47114,402],{"class":264},[220,47116,347],{"class":420},[220,47118,359],{"class":264},[212,47120,47122],{"className":251,"code":47121,"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,47123,47124,47134,47138,47152,47156,47165,47169],{"__ignoreMap":178},[220,47125,47126,47128,47130,47132],{"class":222,"line":223},[220,47127,261],{"class":260},[220,47129,10879],{"class":264},[220,47131,268],{"class":260},[220,47133,4007],{"class":230},[220,47135,47136],{"class":222,"line":179},[220,47137,647],{"emptyLinePlaceholder":194},[220,47139,47140,47142,47144,47146,47148,47150],{"class":222,"line":389},[220,47141,1735],{"class":260},[220,47143,1738],{"class":420},[220,47145,1741],{"class":260},[220,47147,1744],{"class":260},[220,47149,1747],{"class":226},[220,47151,1750],{"class":264},[220,47153,47154],{"class":222,"line":399},[220,47155,1765],{"class":264},[220,47157,47158,47160,47163],{"class":222,"line":644},[220,47159,1770],{"class":264},[220,47161,47162],{"class":230},"'FloatingParticles'",[220,47164,2465],{"class":264},[220,47166,47167],{"class":222,"line":650},[220,47168,1787],{"class":264},[220,47170,47171],{"class":222,"line":656},[220,47172,1792],{"class":264},[1504,47174,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":47176},[47177,47178],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":46986,"description":46994},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":47185,"title":47186,"body":47187,"category":32766,"componentType":25253,"description":47194,"extension":191,"meta":47455,"navigation":194,"path":47456,"requiresChild":194,"seo":47457,"stem":47458,"__hash__":47459},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":47188,"toc":47451},[47189,47192,47195,47197,47199,47202,47204,47449],[11,47190,47186],{"id":47191},"flowfield",[15,47193,47194],{},"Fluid-like distortion with constant smooth motion",[31281,47196],{"component":47186},[23,47198,31285],{"id":25903},[31287,47200],{":props":47201},"[{\"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,47203,31293],{"id":31292},[246,47205,47206,47251,47295,47339,47383],{":tabs":1557},[212,47207,47209],{"className":334,"code":47208,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,47210,47211,47219,47227,47235,47243],{"__ignoreMap":178},[220,47212,47213,47215,47217],{"class":222,"line":223},[220,47214,343],{"class":264},[220,47216,347],{"class":346},[220,47218,359],{"class":264},[220,47220,47221,47223,47225],{"class":222,"line":179},[220,47222,364],{"class":264},[220,47224,47186],{"class":346},[220,47226,359],{"class":264},[220,47228,47229,47231,47233],{"class":222,"line":389},[220,47230,2550],{"class":264},[220,47232,2553],{"class":346},[220,47234,386],{"class":264},[220,47236,47237,47239,47241],{"class":222,"line":399},[220,47238,2567],{"class":264},[220,47240,47186],{"class":346},[220,47242,359],{"class":264},[220,47244,47245,47247,47249],{"class":222,"line":644},[220,47246,402],{"class":264},[220,47248,347],{"class":346},[220,47250,359],{"class":264},[212,47252,47253],{"className":409,"code":47208,"language":411,"meta":178,"style":178},[99,47254,47255,47263,47271,47279,47287],{"__ignoreMap":178},[220,47256,47257,47259,47261],{"class":222,"line":223},[220,47258,343],{"class":264},[220,47260,347],{"class":420},[220,47262,359],{"class":264},[220,47264,47265,47267,47269],{"class":222,"line":179},[220,47266,364],{"class":264},[220,47268,47186],{"class":420},[220,47270,359],{"class":264},[220,47272,47273,47275,47277],{"class":222,"line":389},[220,47274,2550],{"class":264},[220,47276,2553],{"class":420},[220,47278,386],{"class":264},[220,47280,47281,47283,47285],{"class":222,"line":399},[220,47282,2567],{"class":264},[220,47284,47186],{"class":420},[220,47286,359],{"class":264},[220,47288,47289,47291,47293],{"class":222,"line":644},[220,47290,402],{"class":264},[220,47292,347],{"class":420},[220,47294,359],{"class":264},[212,47296,47297],{"className":2844,"code":47208,"language":2846,"meta":178,"style":178},[99,47298,47299,47307,47315,47323,47331],{"__ignoreMap":178},[220,47300,47301,47303,47305],{"class":222,"line":223},[220,47302,343],{"class":264},[220,47304,347],{"class":420},[220,47306,359],{"class":264},[220,47308,47309,47311,47313],{"class":222,"line":179},[220,47310,364],{"class":264},[220,47312,47186],{"class":420},[220,47314,359],{"class":264},[220,47316,47317,47319,47321],{"class":222,"line":389},[220,47318,2550],{"class":264},[220,47320,2553],{"class":420},[220,47322,386],{"class":264},[220,47324,47325,47327,47329],{"class":222,"line":399},[220,47326,2567],{"class":264},[220,47328,47186],{"class":420},[220,47330,359],{"class":264},[220,47332,47333,47335,47337],{"class":222,"line":644},[220,47334,402],{"class":264},[220,47336,347],{"class":420},[220,47338,359],{"class":264},[212,47340,47341],{"className":468,"code":47208,"language":469,"meta":178,"style":178},[99,47342,47343,47351,47359,47367,47375],{"__ignoreMap":178},[220,47344,47345,47347,47349],{"class":222,"line":223},[220,47346,343],{"class":264},[220,47348,347],{"class":420},[220,47350,359],{"class":264},[220,47352,47353,47355,47357],{"class":222,"line":179},[220,47354,364],{"class":264},[220,47356,47186],{"class":420},[220,47358,359],{"class":264},[220,47360,47361,47363,47365],{"class":222,"line":389},[220,47362,2550],{"class":264},[220,47364,2553],{"class":420},[220,47366,386],{"class":264},[220,47368,47369,47371,47373],{"class":222,"line":399},[220,47370,2567],{"class":264},[220,47372,47186],{"class":420},[220,47374,359],{"class":264},[220,47376,47377,47379,47381],{"class":222,"line":644},[220,47378,402],{"class":264},[220,47380,347],{"class":420},[220,47382,359],{"class":264},[212,47384,47386],{"className":251,"code":47385,"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,47387,47388,47398,47402,47416,47420,47429,47437,47441,47445],{"__ignoreMap":178},[220,47389,47390,47392,47394,47396],{"class":222,"line":223},[220,47391,261],{"class":260},[220,47393,10879],{"class":264},[220,47395,268],{"class":260},[220,47397,4007],{"class":230},[220,47399,47400],{"class":222,"line":179},[220,47401,647],{"emptyLinePlaceholder":194},[220,47403,47404,47406,47408,47410,47412,47414],{"class":222,"line":389},[220,47405,1735],{"class":260},[220,47407,1738],{"class":420},[220,47409,1741],{"class":260},[220,47411,1744],{"class":260},[220,47413,1747],{"class":226},[220,47415,1750],{"class":264},[220,47417,47418],{"class":222,"line":399},[220,47419,1765],{"class":264},[220,47421,47422,47424,47427],{"class":222,"line":644},[220,47423,1770],{"class":264},[220,47425,47426],{"class":230},"'FlowField'",[220,47428,6375],{"class":264},[220,47430,47431,47433,47435],{"class":222,"line":650},[220,47432,6380],{"class":264},[220,47434,3206],{"class":230},[220,47436,2465],{"class":264},[220,47438,47439],{"class":222,"line":656},[220,47440,6397],{"class":264},[220,47442,47443],{"class":222,"line":673},[220,47444,1787],{"class":264},[220,47446,47447],{"class":222,"line":682},[220,47448,1792],{"class":264},[1504,47450,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":47452},[47453,47454],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":47186,"description":47194},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":47461,"title":47462,"body":47463,"category":15275,"componentType":25247,"description":47470,"extension":191,"meta":47748,"navigation":194,"path":47749,"requiresChild":31900,"seo":47750,"stem":47751,"__hash__":47752},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":47464,"toc":47744},[47465,47468,47471,47473,47475,47478,47480,47742],[11,47466,47462],{"id":47467},"flower",[15,47469,47470],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31281,47472],{"component":47462},[23,47474,31285],{"id":25903},[31287,47476],{":props":47477},"[{\"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,47479,31293],{"id":31292},[246,47481,47482,47531,47582,47630,47680],{":tabs":1557},[212,47483,47485],{"className":334,"code":47484,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,47486,47487,47495,47502,47510,47519,47523],{"__ignoreMap":178},[220,47488,47489,47491,47493],{"class":222,"line":223},[220,47490,343],{"class":264},[220,47492,347],{"class":346},[220,47494,359],{"class":264},[220,47496,47497,47499],{"class":222,"line":179},[220,47498,364],{"class":264},[220,47500,47501],{"class":346},"Flower\n",[220,47503,47504,47506,47508],{"class":222,"line":389},[220,47505,9002],{"class":226},[220,47507,353],{"class":264},[220,47509,8958],{"class":230},[220,47511,47512,47514,47516],{"class":222,"line":399},[220,47513,16772],{"class":226},[220,47515,353],{"class":264},[220,47517,47518],{"class":230},"\"0.4\"\n",[220,47520,47521],{"class":222,"line":644},[220,47522,1234],{"class":264},[220,47524,47525,47527,47529],{"class":222,"line":650},[220,47526,402],{"class":264},[220,47528,347],{"class":346},[220,47530,359],{"class":264},[212,47532,47534],{"className":409,"code":47533,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,47535,47536,47544,47550,47558,47570,47574],{"__ignoreMap":178},[220,47537,47538,47540,47542],{"class":222,"line":223},[220,47539,343],{"class":264},[220,47541,347],{"class":420},[220,47543,359],{"class":264},[220,47545,47546,47548],{"class":222,"line":179},[220,47547,364],{"class":264},[220,47549,47501],{"class":420},[220,47551,47552,47554,47556],{"class":222,"line":389},[220,47553,9002],{"class":226},[220,47555,353],{"class":260},[220,47557,8958],{"class":230},[220,47559,47560,47562,47564,47566,47568],{"class":222,"line":399},[220,47561,9012],{"class":226},[220,47563,353],{"class":260},[220,47565,743],{"class":264},[220,47567,7615],{"class":420},[220,47569,749],{"class":264},[220,47571,47572],{"class":222,"line":644},[220,47573,1234],{"class":264},[220,47575,47576,47578,47580],{"class":222,"line":650},[220,47577,402],{"class":264},[220,47579,347],{"class":420},[220,47581,359],{"class":264},[212,47583,47584],{"className":2844,"code":47533,"language":2846,"meta":178,"style":178},[99,47585,47586,47594,47600,47608,47618,47622],{"__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],{"class":222,"line":179},[220,47597,364],{"class":264},[220,47599,47501],{"class":420},[220,47601,47602,47604,47606],{"class":222,"line":389},[220,47603,9002],{"class":226},[220,47605,353],{"class":264},[220,47607,8958],{"class":230},[220,47609,47610,47612,47614,47616],{"class":222,"line":399},[220,47611,9012],{"class":226},[220,47613,29241],{"class":264},[220,47615,7615],{"class":420},[220,47617,749],{"class":264},[220,47619,47620],{"class":222,"line":644},[220,47621,1234],{"class":264},[220,47623,47624,47626,47628],{"class":222,"line":650},[220,47625,402],{"class":264},[220,47627,347],{"class":420},[220,47629,359],{"class":264},[212,47631,47632],{"className":468,"code":47533,"language":469,"meta":178,"style":178},[99,47633,47634,47642,47648,47656,47668,47672],{"__ignoreMap":178},[220,47635,47636,47638,47640],{"class":222,"line":223},[220,47637,343],{"class":264},[220,47639,347],{"class":420},[220,47641,359],{"class":264},[220,47643,47644,47646],{"class":222,"line":179},[220,47645,364],{"class":264},[220,47647,47501],{"class":420},[220,47649,47650,47652,47654],{"class":222,"line":389},[220,47651,9002],{"class":226},[220,47653,353],{"class":260},[220,47655,8958],{"class":230},[220,47657,47658,47660,47662,47664,47666],{"class":222,"line":399},[220,47659,9012],{"class":226},[220,47661,353],{"class":260},[220,47663,743],{"class":264},[220,47665,7615],{"class":420},[220,47667,749],{"class":264},[220,47669,47670],{"class":222,"line":644},[220,47671,1234],{"class":264},[220,47673,47674,47676,47678],{"class":222,"line":650},[220,47675,402],{"class":264},[220,47677,347],{"class":420},[220,47679,359],{"class":264},[212,47681,47683],{"className":251,"code":47682,"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,47684,47685,47695,47699,47713,47717,47734,47738],{"__ignoreMap":178},[220,47686,47687,47689,47691,47693],{"class":222,"line":223},[220,47688,261],{"class":260},[220,47690,10879],{"class":264},[220,47692,268],{"class":260},[220,47694,4007],{"class":230},[220,47696,47697],{"class":222,"line":179},[220,47698,647],{"emptyLinePlaceholder":194},[220,47700,47701,47703,47705,47707,47709,47711],{"class":222,"line":389},[220,47702,1735],{"class":260},[220,47704,1738],{"class":420},[220,47706,1741],{"class":260},[220,47708,1744],{"class":260},[220,47710,1747],{"class":226},[220,47712,1750],{"class":264},[220,47714,47715],{"class":222,"line":399},[220,47716,1765],{"class":264},[220,47718,47719,47721,47724,47726,47728,47730,47732],{"class":222,"line":644},[220,47720,1770],{"class":264},[220,47722,47723],{"class":230},"'Flower'",[220,47725,1776],{"class":264},[220,47727,9536],{"class":230},[220,47729,5932],{"class":264},[220,47731,7615],{"class":420},[220,47733,1782],{"class":264},[220,47735,47736],{"class":222,"line":650},[220,47737,1787],{"class":264},[220,47739,47740],{"class":222,"line":656},[220,47741,1792],{"class":264},[1504,47743,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":47745},[47746,47747],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":47462,"description":47470},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":47754,"title":47755,"body":47756,"category":32433,"componentType":25247,"description":47763,"extension":191,"meta":47948,"navigation":194,"path":47949,"requiresChild":31900,"seo":47950,"stem":47951,"__hash__":47952},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":47757,"toc":47944},[47758,47761,47764,47766,47768,47771,47773,47942],[11,47759,47755],{"id":47760},"flowinggradient",[15,47762,47763],{},"Liquid silk gradient with organic flowing color bands",[31281,47765],{"component":47755},[23,47767,31285],{"id":25903},[31287,47769],{":props":47770},"[{\"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,47772,31293],{"id":31292},[246,47774,47775,47804,47832,47860,47888],{":tabs":1557},[212,47776,47778],{"className":334,"code":47777,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,47779,47780,47788,47796],{"__ignoreMap":178},[220,47781,47782,47784,47786],{"class":222,"line":223},[220,47783,343],{"class":264},[220,47785,347],{"class":346},[220,47787,359],{"class":264},[220,47789,47790,47792,47794],{"class":222,"line":179},[220,47791,364],{"class":264},[220,47793,47755],{"class":346},[220,47795,386],{"class":264},[220,47797,47798,47800,47802],{"class":222,"line":389},[220,47799,402],{"class":264},[220,47801,347],{"class":346},[220,47803,359],{"class":264},[212,47805,47806],{"className":409,"code":47777,"language":411,"meta":178,"style":178},[99,47807,47808,47816,47824],{"__ignoreMap":178},[220,47809,47810,47812,47814],{"class":222,"line":223},[220,47811,343],{"class":264},[220,47813,347],{"class":420},[220,47815,359],{"class":264},[220,47817,47818,47820,47822],{"class":222,"line":179},[220,47819,364],{"class":264},[220,47821,47755],{"class":420},[220,47823,386],{"class":264},[220,47825,47826,47828,47830],{"class":222,"line":389},[220,47827,402],{"class":264},[220,47829,347],{"class":420},[220,47831,359],{"class":264},[212,47833,47834],{"className":2844,"code":47777,"language":2846,"meta":178,"style":178},[99,47835,47836,47844,47852],{"__ignoreMap":178},[220,47837,47838,47840,47842],{"class":222,"line":223},[220,47839,343],{"class":264},[220,47841,347],{"class":420},[220,47843,359],{"class":264},[220,47845,47846,47848,47850],{"class":222,"line":179},[220,47847,364],{"class":264},[220,47849,47755],{"class":420},[220,47851,386],{"class":264},[220,47853,47854,47856,47858],{"class":222,"line":389},[220,47855,402],{"class":264},[220,47857,347],{"class":420},[220,47859,359],{"class":264},[212,47861,47862],{"className":468,"code":47777,"language":469,"meta":178,"style":178},[99,47863,47864,47872,47880],{"__ignoreMap":178},[220,47865,47866,47868,47870],{"class":222,"line":223},[220,47867,343],{"class":264},[220,47869,347],{"class":420},[220,47871,359],{"class":264},[220,47873,47874,47876,47878],{"class":222,"line":179},[220,47875,364],{"class":264},[220,47877,47755],{"class":420},[220,47879,386],{"class":264},[220,47881,47882,47884,47886],{"class":222,"line":389},[220,47883,402],{"class":264},[220,47885,347],{"class":420},[220,47887,359],{"class":264},[212,47889,47891],{"className":251,"code":47890,"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,47892,47893,47903,47907,47921,47925,47934,47938],{"__ignoreMap":178},[220,47894,47895,47897,47899,47901],{"class":222,"line":223},[220,47896,261],{"class":260},[220,47898,10879],{"class":264},[220,47900,268],{"class":260},[220,47902,4007],{"class":230},[220,47904,47905],{"class":222,"line":179},[220,47906,647],{"emptyLinePlaceholder":194},[220,47908,47909,47911,47913,47915,47917,47919],{"class":222,"line":389},[220,47910,1735],{"class":260},[220,47912,1738],{"class":420},[220,47914,1741],{"class":260},[220,47916,1744],{"class":260},[220,47918,1747],{"class":226},[220,47920,1750],{"class":264},[220,47922,47923],{"class":222,"line":399},[220,47924,1765],{"class":264},[220,47926,47927,47929,47932],{"class":222,"line":644},[220,47928,1770],{"class":264},[220,47930,47931],{"class":230},"'FlowingGradient'",[220,47933,2465],{"class":264},[220,47935,47936],{"class":222,"line":650},[220,47937,1787],{"class":264},[220,47939,47940],{"class":222,"line":656},[220,47941,1792],{"class":264},[1504,47943,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":47945},[47946,47947],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":47755,"description":47763},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":47954,"title":47955,"body":47956,"category":32766,"componentType":25253,"description":47963,"extension":191,"meta":48224,"navigation":194,"path":48225,"requiresChild":194,"seo":48226,"stem":48227,"__hash__":48228},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":47957,"toc":48220},[47958,47961,47964,47966,47968,47971,47973,48218],[11,47959,47955],{"id":47960},"flutedglass",[15,47962,47963],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31281,47965],{"component":47955},[23,47967,31285],{"id":25903},[31287,47969],{":props":47970},"[{\"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,47972,31293],{"id":31292},[246,47974,47975,48020,48064,48108,48152],{":tabs":1557},[212,47976,47978],{"className":334,"code":47977,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,47979,47980,47988,47996,48004,48012],{"__ignoreMap":178},[220,47981,47982,47984,47986],{"class":222,"line":223},[220,47983,343],{"class":264},[220,47985,347],{"class":346},[220,47987,359],{"class":264},[220,47989,47990,47992,47994],{"class":222,"line":179},[220,47991,364],{"class":264},[220,47993,47955],{"class":346},[220,47995,359],{"class":264},[220,47997,47998,48000,48002],{"class":222,"line":389},[220,47999,2550],{"class":264},[220,48001,2553],{"class":346},[220,48003,386],{"class":264},[220,48005,48006,48008,48010],{"class":222,"line":399},[220,48007,2567],{"class":264},[220,48009,47955],{"class":346},[220,48011,359],{"class":264},[220,48013,48014,48016,48018],{"class":222,"line":644},[220,48015,402],{"class":264},[220,48017,347],{"class":346},[220,48019,359],{"class":264},[212,48021,48022],{"className":409,"code":47977,"language":411,"meta":178,"style":178},[99,48023,48024,48032,48040,48048,48056],{"__ignoreMap":178},[220,48025,48026,48028,48030],{"class":222,"line":223},[220,48027,343],{"class":264},[220,48029,347],{"class":420},[220,48031,359],{"class":264},[220,48033,48034,48036,48038],{"class":222,"line":179},[220,48035,364],{"class":264},[220,48037,47955],{"class":420},[220,48039,359],{"class":264},[220,48041,48042,48044,48046],{"class":222,"line":389},[220,48043,2550],{"class":264},[220,48045,2553],{"class":420},[220,48047,386],{"class":264},[220,48049,48050,48052,48054],{"class":222,"line":399},[220,48051,2567],{"class":264},[220,48053,47955],{"class":420},[220,48055,359],{"class":264},[220,48057,48058,48060,48062],{"class":222,"line":644},[220,48059,402],{"class":264},[220,48061,347],{"class":420},[220,48063,359],{"class":264},[212,48065,48066],{"className":2844,"code":47977,"language":2846,"meta":178,"style":178},[99,48067,48068,48076,48084,48092,48100],{"__ignoreMap":178},[220,48069,48070,48072,48074],{"class":222,"line":223},[220,48071,343],{"class":264},[220,48073,347],{"class":420},[220,48075,359],{"class":264},[220,48077,48078,48080,48082],{"class":222,"line":179},[220,48079,364],{"class":264},[220,48081,47955],{"class":420},[220,48083,359],{"class":264},[220,48085,48086,48088,48090],{"class":222,"line":389},[220,48087,2550],{"class":264},[220,48089,2553],{"class":420},[220,48091,386],{"class":264},[220,48093,48094,48096,48098],{"class":222,"line":399},[220,48095,2567],{"class":264},[220,48097,47955],{"class":420},[220,48099,359],{"class":264},[220,48101,48102,48104,48106],{"class":222,"line":644},[220,48103,402],{"class":264},[220,48105,347],{"class":420},[220,48107,359],{"class":264},[212,48109,48110],{"className":468,"code":47977,"language":469,"meta":178,"style":178},[99,48111,48112,48120,48128,48136,48144],{"__ignoreMap":178},[220,48113,48114,48116,48118],{"class":222,"line":223},[220,48115,343],{"class":264},[220,48117,347],{"class":420},[220,48119,359],{"class":264},[220,48121,48122,48124,48126],{"class":222,"line":179},[220,48123,364],{"class":264},[220,48125,47955],{"class":420},[220,48127,359],{"class":264},[220,48129,48130,48132,48134],{"class":222,"line":389},[220,48131,2550],{"class":264},[220,48133,2553],{"class":420},[220,48135,386],{"class":264},[220,48137,48138,48140,48142],{"class":222,"line":399},[220,48139,2567],{"class":264},[220,48141,47955],{"class":420},[220,48143,359],{"class":264},[220,48145,48146,48148,48150],{"class":222,"line":644},[220,48147,402],{"class":264},[220,48149,347],{"class":420},[220,48151,359],{"class":264},[212,48153,48155],{"className":251,"code":48154,"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,48156,48157,48167,48171,48185,48189,48198,48206,48210,48214],{"__ignoreMap":178},[220,48158,48159,48161,48163,48165],{"class":222,"line":223},[220,48160,261],{"class":260},[220,48162,10879],{"class":264},[220,48164,268],{"class":260},[220,48166,4007],{"class":230},[220,48168,48169],{"class":222,"line":179},[220,48170,647],{"emptyLinePlaceholder":194},[220,48172,48173,48175,48177,48179,48181,48183],{"class":222,"line":389},[220,48174,1735],{"class":260},[220,48176,1738],{"class":420},[220,48178,1741],{"class":260},[220,48180,1744],{"class":260},[220,48182,1747],{"class":226},[220,48184,1750],{"class":264},[220,48186,48187],{"class":222,"line":399},[220,48188,1765],{"class":264},[220,48190,48191,48193,48196],{"class":222,"line":644},[220,48192,1770],{"class":264},[220,48194,48195],{"class":230},"'FlutedGlass'",[220,48197,6375],{"class":264},[220,48199,48200,48202,48204],{"class":222,"line":650},[220,48201,6380],{"class":264},[220,48203,3206],{"class":230},[220,48205,2465],{"class":264},[220,48207,48208],{"class":222,"line":656},[220,48209,6397],{"class":264},[220,48211,48212],{"class":222,"line":673},[220,48213,1787],{"class":264},[220,48215,48216],{"class":222,"line":682},[220,48217,1792],{"class":264},[1504,48219,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":48221},[48222,48223],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":47955,"description":47963},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":48230,"title":48231,"body":48232,"category":34929,"componentType":25247,"description":48239,"extension":191,"meta":48424,"navigation":194,"path":48425,"requiresChild":31900,"seo":48426,"stem":48427,"__hash__":48428},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":48233,"toc":48420},[48234,48237,48240,48242,48244,48247,48249,48418],[11,48235,48231],{"id":48236},"fog",[15,48238,48239],{},"Fog that fills the screen and interacts with the mouse",[31281,48241],{"component":48231},[23,48243,31285],{"id":25903},[31287,48245],{":props":48246},"[{\"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,48248,31293],{"id":31292},[246,48250,48251,48280,48308,48336,48364],{":tabs":1557},[212,48252,48254],{"className":334,"code":48253,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,48255,48256,48264,48272],{"__ignoreMap":178},[220,48257,48258,48260,48262],{"class":222,"line":223},[220,48259,343],{"class":264},[220,48261,347],{"class":346},[220,48263,359],{"class":264},[220,48265,48266,48268,48270],{"class":222,"line":179},[220,48267,364],{"class":264},[220,48269,48231],{"class":346},[220,48271,386],{"class":264},[220,48273,48274,48276,48278],{"class":222,"line":389},[220,48275,402],{"class":264},[220,48277,347],{"class":346},[220,48279,359],{"class":264},[212,48281,48282],{"className":409,"code":48253,"language":411,"meta":178,"style":178},[99,48283,48284,48292,48300],{"__ignoreMap":178},[220,48285,48286,48288,48290],{"class":222,"line":223},[220,48287,343],{"class":264},[220,48289,347],{"class":420},[220,48291,359],{"class":264},[220,48293,48294,48296,48298],{"class":222,"line":179},[220,48295,364],{"class":264},[220,48297,48231],{"class":420},[220,48299,386],{"class":264},[220,48301,48302,48304,48306],{"class":222,"line":389},[220,48303,402],{"class":264},[220,48305,347],{"class":420},[220,48307,359],{"class":264},[212,48309,48310],{"className":2844,"code":48253,"language":2846,"meta":178,"style":178},[99,48311,48312,48320,48328],{"__ignoreMap":178},[220,48313,48314,48316,48318],{"class":222,"line":223},[220,48315,343],{"class":264},[220,48317,347],{"class":420},[220,48319,359],{"class":264},[220,48321,48322,48324,48326],{"class":222,"line":179},[220,48323,364],{"class":264},[220,48325,48231],{"class":420},[220,48327,386],{"class":264},[220,48329,48330,48332,48334],{"class":222,"line":389},[220,48331,402],{"class":264},[220,48333,347],{"class":420},[220,48335,359],{"class":264},[212,48337,48338],{"className":468,"code":48253,"language":469,"meta":178,"style":178},[99,48339,48340,48348,48356],{"__ignoreMap":178},[220,48341,48342,48344,48346],{"class":222,"line":223},[220,48343,343],{"class":264},[220,48345,347],{"class":420},[220,48347,359],{"class":264},[220,48349,48350,48352,48354],{"class":222,"line":179},[220,48351,364],{"class":264},[220,48353,48231],{"class":420},[220,48355,386],{"class":264},[220,48357,48358,48360,48362],{"class":222,"line":389},[220,48359,402],{"class":264},[220,48361,347],{"class":420},[220,48363,359],{"class":264},[212,48365,48367],{"className":251,"code":48366,"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,48368,48369,48379,48383,48397,48401,48410,48414],{"__ignoreMap":178},[220,48370,48371,48373,48375,48377],{"class":222,"line":223},[220,48372,261],{"class":260},[220,48374,10879],{"class":264},[220,48376,268],{"class":260},[220,48378,4007],{"class":230},[220,48380,48381],{"class":222,"line":179},[220,48382,647],{"emptyLinePlaceholder":194},[220,48384,48385,48387,48389,48391,48393,48395],{"class":222,"line":389},[220,48386,1735],{"class":260},[220,48388,1738],{"class":420},[220,48390,1741],{"class":260},[220,48392,1744],{"class":260},[220,48394,1747],{"class":226},[220,48396,1750],{"class":264},[220,48398,48399],{"class":222,"line":399},[220,48400,1765],{"class":264},[220,48402,48403,48405,48408],{"class":222,"line":644},[220,48404,1770],{"class":264},[220,48406,48407],{"class":230},"'Fog'",[220,48409,2465],{"class":264},[220,48411,48412],{"class":222,"line":650},[220,48413,1787],{"class":264},[220,48415,48416],{"class":222,"line":656},[220,48417,1792],{"class":264},[1504,48419,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":48421},[48422,48423],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":48231,"description":48239},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":48430,"title":48431,"body":48432,"category":32766,"componentType":25253,"description":48439,"extension":191,"meta":48700,"navigation":194,"path":48701,"requiresChild":194,"seo":48702,"stem":48703,"__hash__":48704},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":48433,"toc":48696},[48434,48437,48440,48442,48444,48447,48449,48694],[11,48435,48431],{"id":48436},"form3d",[15,48438,48439],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31281,48441],{"component":48431},[23,48443,31285],{"id":25903},[31287,48445],{":props":48446},"[{\"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,48448,31293],{"id":31292},[246,48450,48451,48496,48540,48584,48628],{":tabs":1557},[212,48452,48454],{"className":334,"code":48453,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,48455,48456,48464,48472,48480,48488],{"__ignoreMap":178},[220,48457,48458,48460,48462],{"class":222,"line":223},[220,48459,343],{"class":264},[220,48461,347],{"class":346},[220,48463,359],{"class":264},[220,48465,48466,48468,48470],{"class":222,"line":179},[220,48467,364],{"class":264},[220,48469,48431],{"class":346},[220,48471,359],{"class":264},[220,48473,48474,48476,48478],{"class":222,"line":389},[220,48475,2550],{"class":264},[220,48477,2553],{"class":346},[220,48479,386],{"class":264},[220,48481,48482,48484,48486],{"class":222,"line":399},[220,48483,2567],{"class":264},[220,48485,48431],{"class":346},[220,48487,359],{"class":264},[220,48489,48490,48492,48494],{"class":222,"line":644},[220,48491,402],{"class":264},[220,48493,347],{"class":346},[220,48495,359],{"class":264},[212,48497,48498],{"className":409,"code":48453,"language":411,"meta":178,"style":178},[99,48499,48500,48508,48516,48524,48532],{"__ignoreMap":178},[220,48501,48502,48504,48506],{"class":222,"line":223},[220,48503,343],{"class":264},[220,48505,347],{"class":420},[220,48507,359],{"class":264},[220,48509,48510,48512,48514],{"class":222,"line":179},[220,48511,364],{"class":264},[220,48513,48431],{"class":420},[220,48515,359],{"class":264},[220,48517,48518,48520,48522],{"class":222,"line":389},[220,48519,2550],{"class":264},[220,48521,2553],{"class":420},[220,48523,386],{"class":264},[220,48525,48526,48528,48530],{"class":222,"line":399},[220,48527,2567],{"class":264},[220,48529,48431],{"class":420},[220,48531,359],{"class":264},[220,48533,48534,48536,48538],{"class":222,"line":644},[220,48535,402],{"class":264},[220,48537,347],{"class":420},[220,48539,359],{"class":264},[212,48541,48542],{"className":2844,"code":48453,"language":2846,"meta":178,"style":178},[99,48543,48544,48552,48560,48568,48576],{"__ignoreMap":178},[220,48545,48546,48548,48550],{"class":222,"line":223},[220,48547,343],{"class":264},[220,48549,347],{"class":420},[220,48551,359],{"class":264},[220,48553,48554,48556,48558],{"class":222,"line":179},[220,48555,364],{"class":264},[220,48557,48431],{"class":420},[220,48559,359],{"class":264},[220,48561,48562,48564,48566],{"class":222,"line":389},[220,48563,2550],{"class":264},[220,48565,2553],{"class":420},[220,48567,386],{"class":264},[220,48569,48570,48572,48574],{"class":222,"line":399},[220,48571,2567],{"class":264},[220,48573,48431],{"class":420},[220,48575,359],{"class":264},[220,48577,48578,48580,48582],{"class":222,"line":644},[220,48579,402],{"class":264},[220,48581,347],{"class":420},[220,48583,359],{"class":264},[212,48585,48586],{"className":468,"code":48453,"language":469,"meta":178,"style":178},[99,48587,48588,48596,48604,48612,48620],{"__ignoreMap":178},[220,48589,48590,48592,48594],{"class":222,"line":223},[220,48591,343],{"class":264},[220,48593,347],{"class":420},[220,48595,359],{"class":264},[220,48597,48598,48600,48602],{"class":222,"line":179},[220,48599,364],{"class":264},[220,48601,48431],{"class":420},[220,48603,359],{"class":264},[220,48605,48606,48608,48610],{"class":222,"line":389},[220,48607,2550],{"class":264},[220,48609,2553],{"class":420},[220,48611,386],{"class":264},[220,48613,48614,48616,48618],{"class":222,"line":399},[220,48615,2567],{"class":264},[220,48617,48431],{"class":420},[220,48619,359],{"class":264},[220,48621,48622,48624,48626],{"class":222,"line":644},[220,48623,402],{"class":264},[220,48625,347],{"class":420},[220,48627,359],{"class":264},[212,48629,48631],{"className":251,"code":48630,"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,48632,48633,48643,48647,48661,48665,48674,48682,48686,48690],{"__ignoreMap":178},[220,48634,48635,48637,48639,48641],{"class":222,"line":223},[220,48636,261],{"class":260},[220,48638,10879],{"class":264},[220,48640,268],{"class":260},[220,48642,4007],{"class":230},[220,48644,48645],{"class":222,"line":179},[220,48646,647],{"emptyLinePlaceholder":194},[220,48648,48649,48651,48653,48655,48657,48659],{"class":222,"line":389},[220,48650,1735],{"class":260},[220,48652,1738],{"class":420},[220,48654,1741],{"class":260},[220,48656,1744],{"class":260},[220,48658,1747],{"class":226},[220,48660,1750],{"class":264},[220,48662,48663],{"class":222,"line":399},[220,48664,1765],{"class":264},[220,48666,48667,48669,48672],{"class":222,"line":644},[220,48668,1770],{"class":264},[220,48670,48671],{"class":230},"'Form3D'",[220,48673,6375],{"class":264},[220,48675,48676,48678,48680],{"class":222,"line":650},[220,48677,6380],{"class":264},[220,48679,3206],{"class":230},[220,48681,2465],{"class":264},[220,48683,48684],{"class":222,"line":656},[220,48685,6397],{"class":264},[220,48687,48688],{"class":222,"line":673},[220,48689,1787],{"class":264},[220,48691,48692],{"class":222,"line":682},[220,48693,1792],{"class":264},[1504,48695,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":48697},[48698,48699],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":48431,"description":48439},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":48706,"title":48707,"body":48708,"category":32433,"componentType":25247,"description":48715,"extension":191,"meta":48900,"navigation":194,"path":48901,"requiresChild":31900,"seo":48902,"stem":48903,"__hash__":48904},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":48709,"toc":48896},[48710,48713,48716,48718,48720,48723,48725,48894],[11,48711,48707],{"id":48712},"fractalnoise",[15,48714,48715],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31281,48717],{"component":48707},[23,48719,31285],{"id":25903},[31287,48721],{":props":48722},"[{\"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,48724,31293],{"id":31292},[246,48726,48727,48756,48784,48812,48840],{":tabs":1557},[212,48728,48730],{"className":334,"code":48729,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,48731,48732,48740,48748],{"__ignoreMap":178},[220,48733,48734,48736,48738],{"class":222,"line":223},[220,48735,343],{"class":264},[220,48737,347],{"class":346},[220,48739,359],{"class":264},[220,48741,48742,48744,48746],{"class":222,"line":179},[220,48743,364],{"class":264},[220,48745,48707],{"class":346},[220,48747,386],{"class":264},[220,48749,48750,48752,48754],{"class":222,"line":389},[220,48751,402],{"class":264},[220,48753,347],{"class":346},[220,48755,359],{"class":264},[212,48757,48758],{"className":409,"code":48729,"language":411,"meta":178,"style":178},[99,48759,48760,48768,48776],{"__ignoreMap":178},[220,48761,48762,48764,48766],{"class":222,"line":223},[220,48763,343],{"class":264},[220,48765,347],{"class":420},[220,48767,359],{"class":264},[220,48769,48770,48772,48774],{"class":222,"line":179},[220,48771,364],{"class":264},[220,48773,48707],{"class":420},[220,48775,386],{"class":264},[220,48777,48778,48780,48782],{"class":222,"line":389},[220,48779,402],{"class":264},[220,48781,347],{"class":420},[220,48783,359],{"class":264},[212,48785,48786],{"className":2844,"code":48729,"language":2846,"meta":178,"style":178},[99,48787,48788,48796,48804],{"__ignoreMap":178},[220,48789,48790,48792,48794],{"class":222,"line":223},[220,48791,343],{"class":264},[220,48793,347],{"class":420},[220,48795,359],{"class":264},[220,48797,48798,48800,48802],{"class":222,"line":179},[220,48799,364],{"class":264},[220,48801,48707],{"class":420},[220,48803,386],{"class":264},[220,48805,48806,48808,48810],{"class":222,"line":389},[220,48807,402],{"class":264},[220,48809,347],{"class":420},[220,48811,359],{"class":264},[212,48813,48814],{"className":468,"code":48729,"language":469,"meta":178,"style":178},[99,48815,48816,48824,48832],{"__ignoreMap":178},[220,48817,48818,48820,48822],{"class":222,"line":223},[220,48819,343],{"class":264},[220,48821,347],{"class":420},[220,48823,359],{"class":264},[220,48825,48826,48828,48830],{"class":222,"line":179},[220,48827,364],{"class":264},[220,48829,48707],{"class":420},[220,48831,386],{"class":264},[220,48833,48834,48836,48838],{"class":222,"line":389},[220,48835,402],{"class":264},[220,48837,347],{"class":420},[220,48839,359],{"class":264},[212,48841,48843],{"className":251,"code":48842,"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,48844,48845,48855,48859,48873,48877,48886,48890],{"__ignoreMap":178},[220,48846,48847,48849,48851,48853],{"class":222,"line":223},[220,48848,261],{"class":260},[220,48850,10879],{"class":264},[220,48852,268],{"class":260},[220,48854,4007],{"class":230},[220,48856,48857],{"class":222,"line":179},[220,48858,647],{"emptyLinePlaceholder":194},[220,48860,48861,48863,48865,48867,48869,48871],{"class":222,"line":389},[220,48862,1735],{"class":260},[220,48864,1738],{"class":420},[220,48866,1741],{"class":260},[220,48868,1744],{"class":260},[220,48870,1747],{"class":226},[220,48872,1750],{"class":264},[220,48874,48875],{"class":222,"line":399},[220,48876,1765],{"class":264},[220,48878,48879,48881,48884],{"class":222,"line":644},[220,48880,1770],{"class":264},[220,48882,48883],{"class":230},"'FractalNoise'",[220,48885,2465],{"class":264},[220,48887,48888],{"class":222,"line":650},[220,48889,1787],{"class":264},[220,48891,48892],{"class":222,"line":656},[220,48893,1792],{"class":264},[1504,48895,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":48897},[48898,48899],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":48707,"description":48715},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":48906,"title":48907,"body":48908,"category":35939,"componentType":25247,"description":48915,"extension":191,"meta":49100,"navigation":194,"path":49101,"requiresChild":31900,"seo":49102,"stem":49103,"__hash__":49104},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":48909,"toc":49096},[48910,48913,48916,48918,48920,48923,48925,49094],[11,48911,48907],{"id":48912},"frost",[15,48914,48915],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31281,48917],{"component":48907},[23,48919,31285],{"id":25903},[31287,48921],{":props":48922},"[{\"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,48924,31293],{"id":31292},[246,48926,48927,48956,48984,49012,49040],{":tabs":1557},[212,48928,48930],{"className":334,"code":48929,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,48931,48932,48940,48948],{"__ignoreMap":178},[220,48933,48934,48936,48938],{"class":222,"line":223},[220,48935,343],{"class":264},[220,48937,347],{"class":346},[220,48939,359],{"class":264},[220,48941,48942,48944,48946],{"class":222,"line":179},[220,48943,364],{"class":264},[220,48945,48907],{"class":346},[220,48947,386],{"class":264},[220,48949,48950,48952,48954],{"class":222,"line":389},[220,48951,402],{"class":264},[220,48953,347],{"class":346},[220,48955,359],{"class":264},[212,48957,48958],{"className":409,"code":48929,"language":411,"meta":178,"style":178},[99,48959,48960,48968,48976],{"__ignoreMap":178},[220,48961,48962,48964,48966],{"class":222,"line":223},[220,48963,343],{"class":264},[220,48965,347],{"class":420},[220,48967,359],{"class":264},[220,48969,48970,48972,48974],{"class":222,"line":179},[220,48971,364],{"class":264},[220,48973,48907],{"class":420},[220,48975,386],{"class":264},[220,48977,48978,48980,48982],{"class":222,"line":389},[220,48979,402],{"class":264},[220,48981,347],{"class":420},[220,48983,359],{"class":264},[212,48985,48986],{"className":2844,"code":48929,"language":2846,"meta":178,"style":178},[99,48987,48988,48996,49004],{"__ignoreMap":178},[220,48989,48990,48992,48994],{"class":222,"line":223},[220,48991,343],{"class":264},[220,48993,347],{"class":420},[220,48995,359],{"class":264},[220,48997,48998,49000,49002],{"class":222,"line":179},[220,48999,364],{"class":264},[220,49001,48907],{"class":420},[220,49003,386],{"class":264},[220,49005,49006,49008,49010],{"class":222,"line":389},[220,49007,402],{"class":264},[220,49009,347],{"class":420},[220,49011,359],{"class":264},[212,49013,49014],{"className":468,"code":48929,"language":469,"meta":178,"style":178},[99,49015,49016,49024,49032],{"__ignoreMap":178},[220,49017,49018,49020,49022],{"class":222,"line":223},[220,49019,343],{"class":264},[220,49021,347],{"class":420},[220,49023,359],{"class":264},[220,49025,49026,49028,49030],{"class":222,"line":179},[220,49027,364],{"class":264},[220,49029,48907],{"class":420},[220,49031,386],{"class":264},[220,49033,49034,49036,49038],{"class":222,"line":389},[220,49035,402],{"class":264},[220,49037,347],{"class":420},[220,49039,359],{"class":264},[212,49041,49043],{"className":251,"code":49042,"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,49044,49045,49055,49059,49073,49077,49086,49090],{"__ignoreMap":178},[220,49046,49047,49049,49051,49053],{"class":222,"line":223},[220,49048,261],{"class":260},[220,49050,10879],{"class":264},[220,49052,268],{"class":260},[220,49054,4007],{"class":230},[220,49056,49057],{"class":222,"line":179},[220,49058,647],{"emptyLinePlaceholder":194},[220,49060,49061,49063,49065,49067,49069,49071],{"class":222,"line":389},[220,49062,1735],{"class":260},[220,49064,1738],{"class":420},[220,49066,1741],{"class":260},[220,49068,1744],{"class":260},[220,49070,1747],{"class":226},[220,49072,1750],{"class":264},[220,49074,49075],{"class":222,"line":399},[220,49076,1765],{"class":264},[220,49078,49079,49081,49084],{"class":222,"line":644},[220,49080,1770],{"class":264},[220,49082,49083],{"class":230},"'Frost'",[220,49085,2465],{"class":264},[220,49087,49088],{"class":222,"line":650},[220,49089,1787],{"class":264},[220,49091,49092],{"class":222,"line":656},[220,49093,1792],{"class":264},[1504,49095,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":49097},[49098,49099],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":48907,"description":48915},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49106,"title":49107,"body":49108,"category":32433,"componentType":25247,"description":49115,"extension":191,"meta":49300,"navigation":194,"path":49301,"requiresChild":31900,"seo":49302,"stem":49303,"__hash__":49304},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49109,"toc":49296},[49110,49113,49116,49118,49120,49123,49125,49294],[11,49111,49107],{"id":49112},"gabornoise",[15,49114,49115],{},"Oriented sine-grain noise with a fingerprint-like flow",[31281,49117],{"component":49107},[23,49119,31285],{"id":25903},[31287,49121],{":props":49122},"[{\"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,49124,31293],{"id":31292},[246,49126,49127,49156,49184,49212,49240],{":tabs":1557},[212,49128,49130],{"className":334,"code":49129,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,49131,49132,49140,49148],{"__ignoreMap":178},[220,49133,49134,49136,49138],{"class":222,"line":223},[220,49135,343],{"class":264},[220,49137,347],{"class":346},[220,49139,359],{"class":264},[220,49141,49142,49144,49146],{"class":222,"line":179},[220,49143,364],{"class":264},[220,49145,49107],{"class":346},[220,49147,386],{"class":264},[220,49149,49150,49152,49154],{"class":222,"line":389},[220,49151,402],{"class":264},[220,49153,347],{"class":346},[220,49155,359],{"class":264},[212,49157,49158],{"className":409,"code":49129,"language":411,"meta":178,"style":178},[99,49159,49160,49168,49176],{"__ignoreMap":178},[220,49161,49162,49164,49166],{"class":222,"line":223},[220,49163,343],{"class":264},[220,49165,347],{"class":420},[220,49167,359],{"class":264},[220,49169,49170,49172,49174],{"class":222,"line":179},[220,49171,364],{"class":264},[220,49173,49107],{"class":420},[220,49175,386],{"class":264},[220,49177,49178,49180,49182],{"class":222,"line":389},[220,49179,402],{"class":264},[220,49181,347],{"class":420},[220,49183,359],{"class":264},[212,49185,49186],{"className":2844,"code":49129,"language":2846,"meta":178,"style":178},[99,49187,49188,49196,49204],{"__ignoreMap":178},[220,49189,49190,49192,49194],{"class":222,"line":223},[220,49191,343],{"class":264},[220,49193,347],{"class":420},[220,49195,359],{"class":264},[220,49197,49198,49200,49202],{"class":222,"line":179},[220,49199,364],{"class":264},[220,49201,49107],{"class":420},[220,49203,386],{"class":264},[220,49205,49206,49208,49210],{"class":222,"line":389},[220,49207,402],{"class":264},[220,49209,347],{"class":420},[220,49211,359],{"class":264},[212,49213,49214],{"className":468,"code":49129,"language":469,"meta":178,"style":178},[99,49215,49216,49224,49232],{"__ignoreMap":178},[220,49217,49218,49220,49222],{"class":222,"line":223},[220,49219,343],{"class":264},[220,49221,347],{"class":420},[220,49223,359],{"class":264},[220,49225,49226,49228,49230],{"class":222,"line":179},[220,49227,364],{"class":264},[220,49229,49107],{"class":420},[220,49231,386],{"class":264},[220,49233,49234,49236,49238],{"class":222,"line":389},[220,49235,402],{"class":264},[220,49237,347],{"class":420},[220,49239,359],{"class":264},[212,49241,49243],{"className":251,"code":49242,"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,49244,49245,49255,49259,49273,49277,49286,49290],{"__ignoreMap":178},[220,49246,49247,49249,49251,49253],{"class":222,"line":223},[220,49248,261],{"class":260},[220,49250,10879],{"class":264},[220,49252,268],{"class":260},[220,49254,4007],{"class":230},[220,49256,49257],{"class":222,"line":179},[220,49258,647],{"emptyLinePlaceholder":194},[220,49260,49261,49263,49265,49267,49269,49271],{"class":222,"line":389},[220,49262,1735],{"class":260},[220,49264,1738],{"class":420},[220,49266,1741],{"class":260},[220,49268,1744],{"class":260},[220,49270,1747],{"class":226},[220,49272,1750],{"class":264},[220,49274,49275],{"class":222,"line":399},[220,49276,1765],{"class":264},[220,49278,49279,49281,49284],{"class":222,"line":644},[220,49280,1770],{"class":264},[220,49282,49283],{"class":230},"'GaborNoise'",[220,49285,2465],{"class":264},[220,49287,49288],{"class":222,"line":650},[220,49289,1787],{"class":264},[220,49291,49292],{"class":222,"line":656},[220,49293,1792],{"class":264},[1504,49295,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":49297},[49298,49299],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":49107,"description":49115},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":49306,"title":14833,"body":49307,"category":35939,"componentType":25253,"description":49314,"extension":191,"meta":49574,"navigation":194,"path":49575,"requiresChild":194,"seo":49576,"stem":49577,"__hash__":49578},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":49308,"toc":49570},[49309,49312,49315,49317,49319,49322,49324,49568],[11,49310,14833],{"id":49311},"glass",[15,49313,49314],{},"Optically realistic glass lens driven in a custom shape",[31281,49316],{"component":14833},[23,49318,31285],{"id":25903},[31287,49320],{":props":49321},"[{\"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,49323,31293],{"id":31292},[246,49325,49326,49371,49415,49459,49503],{":tabs":1557},[212,49327,49329],{"className":334,"code":49328,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,49330,49331,49339,49347,49355,49363],{"__ignoreMap":178},[220,49332,49333,49335,49337],{"class":222,"line":223},[220,49334,343],{"class":264},[220,49336,347],{"class":346},[220,49338,359],{"class":264},[220,49340,49341,49343,49345],{"class":222,"line":179},[220,49342,364],{"class":264},[220,49344,14833],{"class":346},[220,49346,359],{"class":264},[220,49348,49349,49351,49353],{"class":222,"line":389},[220,49350,2550],{"class":264},[220,49352,2553],{"class":346},[220,49354,386],{"class":264},[220,49356,49357,49359,49361],{"class":222,"line":399},[220,49358,2567],{"class":264},[220,49360,14833],{"class":346},[220,49362,359],{"class":264},[220,49364,49365,49367,49369],{"class":222,"line":644},[220,49366,402],{"class":264},[220,49368,347],{"class":346},[220,49370,359],{"class":264},[212,49372,49373],{"className":409,"code":49328,"language":411,"meta":178,"style":178},[99,49374,49375,49383,49391,49399,49407],{"__ignoreMap":178},[220,49376,49377,49379,49381],{"class":222,"line":223},[220,49378,343],{"class":264},[220,49380,347],{"class":420},[220,49382,359],{"class":264},[220,49384,49385,49387,49389],{"class":222,"line":179},[220,49386,364],{"class":264},[220,49388,14833],{"class":420},[220,49390,359],{"class":264},[220,49392,49393,49395,49397],{"class":222,"line":389},[220,49394,2550],{"class":264},[220,49396,2553],{"class":420},[220,49398,386],{"class":264},[220,49400,49401,49403,49405],{"class":222,"line":399},[220,49402,2567],{"class":264},[220,49404,14833],{"class":420},[220,49406,359],{"class":264},[220,49408,49409,49411,49413],{"class":222,"line":644},[220,49410,402],{"class":264},[220,49412,347],{"class":420},[220,49414,359],{"class":264},[212,49416,49417],{"className":2844,"code":49328,"language":2846,"meta":178,"style":178},[99,49418,49419,49427,49435,49443,49451],{"__ignoreMap":178},[220,49420,49421,49423,49425],{"class":222,"line":223},[220,49422,343],{"class":264},[220,49424,347],{"class":420},[220,49426,359],{"class":264},[220,49428,49429,49431,49433],{"class":222,"line":179},[220,49430,364],{"class":264},[220,49432,14833],{"class":420},[220,49434,359],{"class":264},[220,49436,49437,49439,49441],{"class":222,"line":389},[220,49438,2550],{"class":264},[220,49440,2553],{"class":420},[220,49442,386],{"class":264},[220,49444,49445,49447,49449],{"class":222,"line":399},[220,49446,2567],{"class":264},[220,49448,14833],{"class":420},[220,49450,359],{"class":264},[220,49452,49453,49455,49457],{"class":222,"line":644},[220,49454,402],{"class":264},[220,49456,347],{"class":420},[220,49458,359],{"class":264},[212,49460,49461],{"className":468,"code":49328,"language":469,"meta":178,"style":178},[99,49462,49463,49471,49479,49487,49495],{"__ignoreMap":178},[220,49464,49465,49467,49469],{"class":222,"line":223},[220,49466,343],{"class":264},[220,49468,347],{"class":420},[220,49470,359],{"class":264},[220,49472,49473,49475,49477],{"class":222,"line":179},[220,49474,364],{"class":264},[220,49476,14833],{"class":420},[220,49478,359],{"class":264},[220,49480,49481,49483,49485],{"class":222,"line":389},[220,49482,2550],{"class":264},[220,49484,2553],{"class":420},[220,49486,386],{"class":264},[220,49488,49489,49491,49493],{"class":222,"line":399},[220,49490,2567],{"class":264},[220,49492,14833],{"class":420},[220,49494,359],{"class":264},[220,49496,49497,49499,49501],{"class":222,"line":644},[220,49498,402],{"class":264},[220,49500,347],{"class":420},[220,49502,359],{"class":264},[212,49504,49506],{"className":251,"code":49505,"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,49507,49508,49518,49522,49536,49540,49548,49556,49560,49564],{"__ignoreMap":178},[220,49509,49510,49512,49514,49516],{"class":222,"line":223},[220,49511,261],{"class":260},[220,49513,10879],{"class":264},[220,49515,268],{"class":260},[220,49517,4007],{"class":230},[220,49519,49520],{"class":222,"line":179},[220,49521,647],{"emptyLinePlaceholder":194},[220,49523,49524,49526,49528,49530,49532,49534],{"class":222,"line":389},[220,49525,1735],{"class":260},[220,49527,1738],{"class":420},[220,49529,1741],{"class":260},[220,49531,1744],{"class":260},[220,49533,1747],{"class":226},[220,49535,1750],{"class":264},[220,49537,49538],{"class":222,"line":399},[220,49539,1765],{"class":264},[220,49541,49542,49544,49546],{"class":222,"line":644},[220,49543,1770],{"class":264},[220,49545,20901],{"class":230},[220,49547,6375],{"class":264},[220,49549,49550,49552,49554],{"class":222,"line":650},[220,49551,6380],{"class":264},[220,49553,3206],{"class":230},[220,49555,2465],{"class":264},[220,49557,49558],{"class":222,"line":656},[220,49559,6397],{"class":264},[220,49561,49562],{"class":222,"line":673},[220,49563,1787],{"class":264},[220,49565,49566],{"class":222,"line":682},[220,49567,1792],{"class":264},[1504,49569,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":49571},[49572,49573],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":14833,"description":49314},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":49580,"title":5591,"body":49581,"category":32766,"componentType":25253,"description":49588,"extension":191,"meta":49905,"navigation":194,"path":49906,"requiresChild":194,"seo":49907,"stem":49908,"__hash__":49909},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":49582,"toc":49901},[49583,49586,49589,49591,49593,49596,49598,49899],[11,49584,5591],{"id":49585},"glasstiles",[15,49587,49588],{},"Refraction-like distortion in a tile grid pattern",[31281,49590],{"component":5591},[23,49592,31285],{"id":25903},[31287,49594],{":props":49595},"[{\"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,49597,31293],{"id":31292},[246,49599,49600,49657,49716,49772,49830],{":tabs":1557},[212,49601,49603],{"className":334,"code":49602,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,49604,49605,49613,49620,49629,49633,49641,49649],{"__ignoreMap":178},[220,49606,49607,49609,49611],{"class":222,"line":223},[220,49608,343],{"class":264},[220,49610,347],{"class":346},[220,49612,359],{"class":264},[220,49614,49615,49617],{"class":222,"line":179},[220,49616,364],{"class":264},[220,49618,49619],{"class":346},"GlassTiles\n",[220,49621,49622,49624,49626],{"class":222,"line":389},[220,49623,19739],{"class":226},[220,49625,353],{"class":264},[220,49627,49628],{"class":230},"\"2\"\n",[220,49630,49631],{"class":222,"line":399},[220,49632,31329],{"class":264},[220,49634,49635,49637,49639],{"class":222,"line":644},[220,49636,2550],{"class":264},[220,49638,2553],{"class":346},[220,49640,386],{"class":264},[220,49642,49643,49645,49647],{"class":222,"line":650},[220,49644,2567],{"class":264},[220,49646,5591],{"class":346},[220,49648,359],{"class":264},[220,49650,49651,49653,49655],{"class":222,"line":656},[220,49652,402],{"class":264},[220,49654,347],{"class":346},[220,49656,359],{"class":264},[212,49658,49660],{"className":409,"code":49659,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,49661,49662,49670,49676,49688,49692,49700,49708],{"__ignoreMap":178},[220,49663,49664,49666,49668],{"class":222,"line":223},[220,49665,343],{"class":264},[220,49667,347],{"class":420},[220,49669,359],{"class":264},[220,49671,49672,49674],{"class":222,"line":179},[220,49673,364],{"class":264},[220,49675,49619],{"class":420},[220,49677,49678,49680,49682,49684,49686],{"class":222,"line":389},[220,49679,19850],{"class":226},[220,49681,353],{"class":260},[220,49683,743],{"class":264},[220,49685,6580],{"class":420},[220,49687,749],{"class":264},[220,49689,49690],{"class":222,"line":399},[220,49691,31329],{"class":264},[220,49693,49694,49696,49698],{"class":222,"line":644},[220,49695,2550],{"class":264},[220,49697,2553],{"class":420},[220,49699,386],{"class":264},[220,49701,49702,49704,49706],{"class":222,"line":650},[220,49703,2567],{"class":264},[220,49705,5591],{"class":420},[220,49707,359],{"class":264},[220,49709,49710,49712,49714],{"class":222,"line":656},[220,49711,402],{"class":264},[220,49713,347],{"class":420},[220,49715,359],{"class":264},[212,49717,49718],{"className":2844,"code":49659,"language":2846,"meta":178,"style":178},[99,49719,49720,49728,49734,49744,49748,49756,49764],{"__ignoreMap":178},[220,49721,49722,49724,49726],{"class":222,"line":223},[220,49723,343],{"class":264},[220,49725,347],{"class":420},[220,49727,359],{"class":264},[220,49729,49730,49732],{"class":222,"line":179},[220,49731,364],{"class":264},[220,49733,49619],{"class":420},[220,49735,49736,49738,49740,49742],{"class":222,"line":389},[220,49737,19850],{"class":226},[220,49739,29241],{"class":264},[220,49741,6580],{"class":420},[220,49743,749],{"class":264},[220,49745,49746],{"class":222,"line":399},[220,49747,31329],{"class":264},[220,49749,49750,49752,49754],{"class":222,"line":644},[220,49751,2550],{"class":264},[220,49753,2553],{"class":420},[220,49755,386],{"class":264},[220,49757,49758,49760,49762],{"class":222,"line":650},[220,49759,2567],{"class":264},[220,49761,5591],{"class":420},[220,49763,359],{"class":264},[220,49765,49766,49768,49770],{"class":222,"line":656},[220,49767,402],{"class":264},[220,49769,347],{"class":420},[220,49771,359],{"class":264},[212,49773,49774],{"className":468,"code":49659,"language":469,"meta":178,"style":178},[99,49775,49776,49784,49790,49802,49806,49814,49822],{"__ignoreMap":178},[220,49777,49778,49780,49782],{"class":222,"line":223},[220,49779,343],{"class":264},[220,49781,347],{"class":420},[220,49783,359],{"class":264},[220,49785,49786,49788],{"class":222,"line":179},[220,49787,364],{"class":264},[220,49789,49619],{"class":420},[220,49791,49792,49794,49796,49798,49800],{"class":222,"line":389},[220,49793,19850],{"class":226},[220,49795,353],{"class":260},[220,49797,743],{"class":264},[220,49799,6580],{"class":420},[220,49801,749],{"class":264},[220,49803,49804],{"class":222,"line":399},[220,49805,31329],{"class":264},[220,49807,49808,49810,49812],{"class":222,"line":644},[220,49809,2550],{"class":264},[220,49811,2553],{"class":420},[220,49813,386],{"class":264},[220,49815,49816,49818,49820],{"class":222,"line":650},[220,49817,2567],{"class":264},[220,49819,5591],{"class":420},[220,49821,359],{"class":264},[220,49823,49824,49826,49828],{"class":222,"line":656},[220,49825,402],{"class":264},[220,49827,347],{"class":420},[220,49829,359],{"class":264},[212,49831,49833],{"className":251,"code":49832,"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,49834,49835,49845,49849,49863,49867,49879,49887,49891,49895],{"__ignoreMap":178},[220,49836,49837,49839,49841,49843],{"class":222,"line":223},[220,49838,261],{"class":260},[220,49840,10879],{"class":264},[220,49842,268],{"class":260},[220,49844,4007],{"class":230},[220,49846,49847],{"class":222,"line":179},[220,49848,647],{"emptyLinePlaceholder":194},[220,49850,49851,49853,49855,49857,49859,49861],{"class":222,"line":389},[220,49852,1735],{"class":260},[220,49854,1738],{"class":420},[220,49856,1741],{"class":260},[220,49858,1744],{"class":260},[220,49860,1747],{"class":226},[220,49862,1750],{"class":264},[220,49864,49865],{"class":222,"line":399},[220,49866,1765],{"class":264},[220,49868,49869,49871,49873,49875,49877],{"class":222,"line":644},[220,49870,1770],{"class":264},[220,49872,5949],{"class":230},[220,49874,31573],{"class":264},[220,49876,6580],{"class":420},[220,49878,6912],{"class":264},[220,49880,49881,49883,49885],{"class":222,"line":650},[220,49882,6380],{"class":264},[220,49884,3206],{"class":230},[220,49886,2465],{"class":264},[220,49888,49889],{"class":222,"line":656},[220,49890,6397],{"class":264},[220,49892,49893],{"class":222,"line":673},[220,49894,1787],{"class":264},[220,49896,49897],{"class":222,"line":682},[220,49898,1792],{"class":264},[1504,49900,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":49902},[49903,49904],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":5591,"description":49588},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":49911,"title":49912,"body":49913,"category":32176,"componentType":25253,"description":49920,"extension":191,"meta":50237,"navigation":194,"path":50238,"requiresChild":194,"seo":50239,"stem":50240,"__hash__":50241},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":49914,"toc":50233},[49915,49918,49921,49923,49925,49928,49930,50231],[11,49916,49912],{"id":49917},"glitch",[15,49919,49920],{},"Digital glitch that melts pixels and distorts colors",[31281,49922],{"component":49912},[23,49924,31285],{"id":25903},[31287,49926],{":props":49927},"[{\"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,49929,31293],{"id":31292},[246,49931,49932,49988,50047,50103,50161],{":tabs":1557},[212,49933,49935],{"className":334,"code":49934,"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,49936,49937,49945,49952,49960,49964,49972,49980],{"__ignoreMap":178},[220,49938,49939,49941,49943],{"class":222,"line":223},[220,49940,343],{"class":264},[220,49942,347],{"class":346},[220,49944,359],{"class":264},[220,49946,49947,49949],{"class":222,"line":179},[220,49948,364],{"class":264},[220,49950,49951],{"class":346},"Glitch\n",[220,49953,49954,49956,49958],{"class":222,"line":389},[220,49955,19739],{"class":226},[220,49957,353],{"class":264},[220,49959,41528],{"class":230},[220,49961,49962],{"class":222,"line":399},[220,49963,31329],{"class":264},[220,49965,49966,49968,49970],{"class":222,"line":644},[220,49967,2550],{"class":264},[220,49969,2553],{"class":346},[220,49971,386],{"class":264},[220,49973,49974,49976,49978],{"class":222,"line":650},[220,49975,2567],{"class":264},[220,49977,49912],{"class":346},[220,49979,359],{"class":264},[220,49981,49982,49984,49986],{"class":222,"line":656},[220,49983,402],{"class":264},[220,49985,347],{"class":346},[220,49987,359],{"class":264},[212,49989,49991],{"className":409,"code":49990,"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,49992,49993,50001,50007,50019,50023,50031,50039],{"__ignoreMap":178},[220,49994,49995,49997,49999],{"class":222,"line":223},[220,49996,343],{"class":264},[220,49998,347],{"class":420},[220,50000,359],{"class":264},[220,50002,50003,50005],{"class":222,"line":179},[220,50004,364],{"class":264},[220,50006,49951],{"class":420},[220,50008,50009,50011,50013,50015,50017],{"class":222,"line":389},[220,50010,19850],{"class":226},[220,50012,353],{"class":260},[220,50014,743],{"class":264},[220,50016,7120],{"class":420},[220,50018,749],{"class":264},[220,50020,50021],{"class":222,"line":399},[220,50022,31329],{"class":264},[220,50024,50025,50027,50029],{"class":222,"line":644},[220,50026,2550],{"class":264},[220,50028,2553],{"class":420},[220,50030,386],{"class":264},[220,50032,50033,50035,50037],{"class":222,"line":650},[220,50034,2567],{"class":264},[220,50036,49912],{"class":420},[220,50038,359],{"class":264},[220,50040,50041,50043,50045],{"class":222,"line":656},[220,50042,402],{"class":264},[220,50044,347],{"class":420},[220,50046,359],{"class":264},[212,50048,50049],{"className":2844,"code":49990,"language":2846,"meta":178,"style":178},[99,50050,50051,50059,50065,50075,50079,50087,50095],{"__ignoreMap":178},[220,50052,50053,50055,50057],{"class":222,"line":223},[220,50054,343],{"class":264},[220,50056,347],{"class":420},[220,50058,359],{"class":264},[220,50060,50061,50063],{"class":222,"line":179},[220,50062,364],{"class":264},[220,50064,49951],{"class":420},[220,50066,50067,50069,50071,50073],{"class":222,"line":389},[220,50068,19850],{"class":226},[220,50070,29241],{"class":264},[220,50072,7120],{"class":420},[220,50074,749],{"class":264},[220,50076,50077],{"class":222,"line":399},[220,50078,31329],{"class":264},[220,50080,50081,50083,50085],{"class":222,"line":644},[220,50082,2550],{"class":264},[220,50084,2553],{"class":420},[220,50086,386],{"class":264},[220,50088,50089,50091,50093],{"class":222,"line":650},[220,50090,2567],{"class":264},[220,50092,49912],{"class":420},[220,50094,359],{"class":264},[220,50096,50097,50099,50101],{"class":222,"line":656},[220,50098,402],{"class":264},[220,50100,347],{"class":420},[220,50102,359],{"class":264},[212,50104,50105],{"className":468,"code":49990,"language":469,"meta":178,"style":178},[99,50106,50107,50115,50121,50133,50137,50145,50153],{"__ignoreMap":178},[220,50108,50109,50111,50113],{"class":222,"line":223},[220,50110,343],{"class":264},[220,50112,347],{"class":420},[220,50114,359],{"class":264},[220,50116,50117,50119],{"class":222,"line":179},[220,50118,364],{"class":264},[220,50120,49951],{"class":420},[220,50122,50123,50125,50127,50129,50131],{"class":222,"line":389},[220,50124,19850],{"class":226},[220,50126,353],{"class":260},[220,50128,743],{"class":264},[220,50130,7120],{"class":420},[220,50132,749],{"class":264},[220,50134,50135],{"class":222,"line":399},[220,50136,31329],{"class":264},[220,50138,50139,50141,50143],{"class":222,"line":644},[220,50140,2550],{"class":264},[220,50142,2553],{"class":420},[220,50144,386],{"class":264},[220,50146,50147,50149,50151],{"class":222,"line":650},[220,50148,2567],{"class":264},[220,50150,49912],{"class":420},[220,50152,359],{"class":264},[220,50154,50155,50157,50159],{"class":222,"line":656},[220,50156,402],{"class":264},[220,50158,347],{"class":420},[220,50160,359],{"class":264},[212,50162,50164],{"className":251,"code":50163,"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,50165,50166,50176,50180,50194,50198,50211,50219,50223,50227],{"__ignoreMap":178},[220,50167,50168,50170,50172,50174],{"class":222,"line":223},[220,50169,261],{"class":260},[220,50171,10879],{"class":264},[220,50173,268],{"class":260},[220,50175,4007],{"class":230},[220,50177,50178],{"class":222,"line":179},[220,50179,647],{"emptyLinePlaceholder":194},[220,50181,50182,50184,50186,50188,50190,50192],{"class":222,"line":389},[220,50183,1735],{"class":260},[220,50185,1738],{"class":420},[220,50187,1741],{"class":260},[220,50189,1744],{"class":260},[220,50191,1747],{"class":226},[220,50193,1750],{"class":264},[220,50195,50196],{"class":222,"line":399},[220,50197,1765],{"class":264},[220,50199,50200,50202,50205,50207,50209],{"class":222,"line":644},[220,50201,1770],{"class":264},[220,50203,50204],{"class":230},"'Glitch'",[220,50206,31573],{"class":264},[220,50208,7120],{"class":420},[220,50210,6912],{"class":264},[220,50212,50213,50215,50217],{"class":222,"line":650},[220,50214,6380],{"class":264},[220,50216,3206],{"class":230},[220,50218,2465],{"class":264},[220,50220,50221],{"class":222,"line":656},[220,50222,6397],{"class":264},[220,50224,50225],{"class":222,"line":673},[220,50226,1787],{"class":264},[220,50228,50229],{"class":222,"line":682},[220,50230,1792],{"class":264},[1504,50232,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50234},[50235,50236],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":49912,"description":49920},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":50243,"title":11159,"body":50244,"category":32176,"componentType":25253,"description":50251,"extension":191,"meta":50568,"navigation":194,"path":50569,"requiresChild":194,"seo":50570,"stem":50571,"__hash__":50572},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":50245,"toc":50564},[50246,50249,50252,50254,50256,50259,50261,50562],[11,50247,11159],{"id":50248},"glow",[15,50250,50251],{},"Soft glow effect with adjustable intensity",[31281,50253],{"component":11159},[23,50255,31285],{"id":25903},[31287,50257],{":props":50258},"[{\"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,50260,31293],{"id":31292},[246,50262,50263,50319,50378,50434,50492],{":tabs":1557},[212,50264,50266],{"className":334,"code":50265,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50267,50268,50276,50283,50291,50295,50303,50311],{"__ignoreMap":178},[220,50269,50270,50272,50274],{"class":222,"line":223},[220,50271,343],{"class":264},[220,50273,347],{"class":346},[220,50275,359],{"class":264},[220,50277,50278,50280],{"class":222,"line":179},[220,50279,364],{"class":264},[220,50281,50282],{"class":346},"Glow\n",[220,50284,50285,50287,50289],{"class":222,"line":389},[220,50286,19739],{"class":226},[220,50288,353],{"class":264},[220,50290,35995],{"class":230},[220,50292,50293],{"class":222,"line":399},[220,50294,31329],{"class":264},[220,50296,50297,50299,50301],{"class":222,"line":644},[220,50298,2550],{"class":264},[220,50300,2553],{"class":346},[220,50302,386],{"class":264},[220,50304,50305,50307,50309],{"class":222,"line":650},[220,50306,2567],{"class":264},[220,50308,11159],{"class":346},[220,50310,359],{"class":264},[220,50312,50313,50315,50317],{"class":222,"line":656},[220,50314,402],{"class":264},[220,50316,347],{"class":346},[220,50318,359],{"class":264},[212,50320,50322],{"className":409,"code":50321,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50323,50324,50332,50338,50350,50354,50362,50370],{"__ignoreMap":178},[220,50325,50326,50328,50330],{"class":222,"line":223},[220,50327,343],{"class":264},[220,50329,347],{"class":420},[220,50331,359],{"class":264},[220,50333,50334,50336],{"class":222,"line":179},[220,50335,364],{"class":264},[220,50337,50282],{"class":420},[220,50339,50340,50342,50344,50346,50348],{"class":222,"line":389},[220,50341,19850],{"class":226},[220,50343,353],{"class":260},[220,50345,743],{"class":264},[220,50347,8043],{"class":420},[220,50349,749],{"class":264},[220,50351,50352],{"class":222,"line":399},[220,50353,31329],{"class":264},[220,50355,50356,50358,50360],{"class":222,"line":644},[220,50357,2550],{"class":264},[220,50359,2553],{"class":420},[220,50361,386],{"class":264},[220,50363,50364,50366,50368],{"class":222,"line":650},[220,50365,2567],{"class":264},[220,50367,11159],{"class":420},[220,50369,359],{"class":264},[220,50371,50372,50374,50376],{"class":222,"line":656},[220,50373,402],{"class":264},[220,50375,347],{"class":420},[220,50377,359],{"class":264},[212,50379,50380],{"className":2844,"code":50321,"language":2846,"meta":178,"style":178},[99,50381,50382,50390,50396,50406,50410,50418,50426],{"__ignoreMap":178},[220,50383,50384,50386,50388],{"class":222,"line":223},[220,50385,343],{"class":264},[220,50387,347],{"class":420},[220,50389,359],{"class":264},[220,50391,50392,50394],{"class":222,"line":179},[220,50393,364],{"class":264},[220,50395,50282],{"class":420},[220,50397,50398,50400,50402,50404],{"class":222,"line":389},[220,50399,19850],{"class":226},[220,50401,29241],{"class":264},[220,50403,8043],{"class":420},[220,50405,749],{"class":264},[220,50407,50408],{"class":222,"line":399},[220,50409,31329],{"class":264},[220,50411,50412,50414,50416],{"class":222,"line":644},[220,50413,2550],{"class":264},[220,50415,2553],{"class":420},[220,50417,386],{"class":264},[220,50419,50420,50422,50424],{"class":222,"line":650},[220,50421,2567],{"class":264},[220,50423,11159],{"class":420},[220,50425,359],{"class":264},[220,50427,50428,50430,50432],{"class":222,"line":656},[220,50429,402],{"class":264},[220,50431,347],{"class":420},[220,50433,359],{"class":264},[212,50435,50436],{"className":468,"code":50321,"language":469,"meta":178,"style":178},[99,50437,50438,50446,50452,50464,50468,50476,50484],{"__ignoreMap":178},[220,50439,50440,50442,50444],{"class":222,"line":223},[220,50441,343],{"class":264},[220,50443,347],{"class":420},[220,50445,359],{"class":264},[220,50447,50448,50450],{"class":222,"line":179},[220,50449,364],{"class":264},[220,50451,50282],{"class":420},[220,50453,50454,50456,50458,50460,50462],{"class":222,"line":389},[220,50455,19850],{"class":226},[220,50457,353],{"class":260},[220,50459,743],{"class":264},[220,50461,8043],{"class":420},[220,50463,749],{"class":264},[220,50465,50466],{"class":222,"line":399},[220,50467,31329],{"class":264},[220,50469,50470,50472,50474],{"class":222,"line":644},[220,50471,2550],{"class":264},[220,50473,2553],{"class":420},[220,50475,386],{"class":264},[220,50477,50478,50480,50482],{"class":222,"line":650},[220,50479,2567],{"class":264},[220,50481,11159],{"class":420},[220,50483,359],{"class":264},[220,50485,50486,50488,50490],{"class":222,"line":656},[220,50487,402],{"class":264},[220,50489,347],{"class":420},[220,50491,359],{"class":264},[212,50493,50495],{"className":251,"code":50494,"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,50496,50497,50507,50511,50525,50529,50542,50550,50554,50558],{"__ignoreMap":178},[220,50498,50499,50501,50503,50505],{"class":222,"line":223},[220,50500,261],{"class":260},[220,50502,10879],{"class":264},[220,50504,268],{"class":260},[220,50506,4007],{"class":230},[220,50508,50509],{"class":222,"line":179},[220,50510,647],{"emptyLinePlaceholder":194},[220,50512,50513,50515,50517,50519,50521,50523],{"class":222,"line":389},[220,50514,1735],{"class":260},[220,50516,1738],{"class":420},[220,50518,1741],{"class":260},[220,50520,1744],{"class":260},[220,50522,1747],{"class":226},[220,50524,1750],{"class":264},[220,50526,50527],{"class":222,"line":399},[220,50528,1765],{"class":264},[220,50530,50531,50533,50536,50538,50540],{"class":222,"line":644},[220,50532,1770],{"class":264},[220,50534,50535],{"class":230},"'Glow'",[220,50537,31573],{"class":264},[220,50539,8043],{"class":420},[220,50541,6912],{"class":264},[220,50543,50544,50546,50548],{"class":222,"line":650},[220,50545,6380],{"class":264},[220,50547,3206],{"class":230},[220,50549,2465],{"class":264},[220,50551,50552],{"class":222,"line":656},[220,50553,6397],{"class":264},[220,50555,50556],{"class":222,"line":673},[220,50557,1787],{"class":264},[220,50559,50560],{"class":222,"line":682},[220,50561,1792],{"class":264},[1504,50563,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50565},[50566,50567],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11159,"description":50251},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":50574,"title":50575,"body":50576,"category":32433,"componentType":25247,"description":50583,"extension":191,"meta":50824,"navigation":194,"path":50825,"requiresChild":31900,"seo":50826,"stem":50827,"__hash__":50828},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":50577,"toc":50820},[50578,50581,50584,50586,50588,50591,50593,50818],[11,50579,50575],{"id":50580},"godrays",[15,50582,50583],{},"Volumetric light rays emanating from a point",[31281,50585],{"component":50575},[23,50587,31285],{"id":25903},[31287,50589],{":props":50590},"[{\"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,50592,31293],{"id":31292},[246,50594,50595,50635,50678,50718,50760],{":tabs":1557},[212,50596,50598],{"className":334,"code":50597,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,50599,50600,50608,50615,50623,50627],{"__ignoreMap":178},[220,50601,50602,50604,50606],{"class":222,"line":223},[220,50603,343],{"class":264},[220,50605,347],{"class":346},[220,50607,359],{"class":264},[220,50609,50610,50612],{"class":222,"line":179},[220,50611,364],{"class":264},[220,50613,50614],{"class":346},"Godrays\n",[220,50616,50617,50619,50621],{"class":222,"line":389},[220,50618,19739],{"class":226},[220,50620,353],{"class":264},[220,50622,9017],{"class":230},[220,50624,50625],{"class":222,"line":399},[220,50626,1234],{"class":264},[220,50628,50629,50631,50633],{"class":222,"line":644},[220,50630,402],{"class":264},[220,50632,347],{"class":346},[220,50634,359],{"class":264},[212,50636,50638],{"className":409,"code":50637,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,50639,50640,50648,50654,50666,50670],{"__ignoreMap":178},[220,50641,50642,50644,50646],{"class":222,"line":223},[220,50643,343],{"class":264},[220,50645,347],{"class":420},[220,50647,359],{"class":264},[220,50649,50650,50652],{"class":222,"line":179},[220,50651,364],{"class":264},[220,50653,50614],{"class":420},[220,50655,50656,50658,50660,50662,50664],{"class":222,"line":389},[220,50657,19850],{"class":226},[220,50659,353],{"class":260},[220,50661,743],{"class":264},[220,50663,5665],{"class":420},[220,50665,749],{"class":264},[220,50667,50668],{"class":222,"line":399},[220,50669,1234],{"class":264},[220,50671,50672,50674,50676],{"class":222,"line":644},[220,50673,402],{"class":264},[220,50675,347],{"class":420},[220,50677,359],{"class":264},[212,50679,50680],{"className":2844,"code":50637,"language":2846,"meta":178,"style":178},[99,50681,50682,50690,50696,50706,50710],{"__ignoreMap":178},[220,50683,50684,50686,50688],{"class":222,"line":223},[220,50685,343],{"class":264},[220,50687,347],{"class":420},[220,50689,359],{"class":264},[220,50691,50692,50694],{"class":222,"line":179},[220,50693,364],{"class":264},[220,50695,50614],{"class":420},[220,50697,50698,50700,50702,50704],{"class":222,"line":389},[220,50699,19850],{"class":226},[220,50701,29241],{"class":264},[220,50703,5665],{"class":420},[220,50705,749],{"class":264},[220,50707,50708],{"class":222,"line":399},[220,50709,1234],{"class":264},[220,50711,50712,50714,50716],{"class":222,"line":644},[220,50713,402],{"class":264},[220,50715,347],{"class":420},[220,50717,359],{"class":264},[212,50719,50720],{"className":468,"code":50637,"language":469,"meta":178,"style":178},[99,50721,50722,50730,50736,50748,50752],{"__ignoreMap":178},[220,50723,50724,50726,50728],{"class":222,"line":223},[220,50725,343],{"class":264},[220,50727,347],{"class":420},[220,50729,359],{"class":264},[220,50731,50732,50734],{"class":222,"line":179},[220,50733,364],{"class":264},[220,50735,50614],{"class":420},[220,50737,50738,50740,50742,50744,50746],{"class":222,"line":389},[220,50739,19850],{"class":226},[220,50741,353],{"class":260},[220,50743,743],{"class":264},[220,50745,5665],{"class":420},[220,50747,749],{"class":264},[220,50749,50750],{"class":222,"line":399},[220,50751,1234],{"class":264},[220,50753,50754,50756,50758],{"class":222,"line":644},[220,50755,402],{"class":264},[220,50757,347],{"class":420},[220,50759,359],{"class":264},[212,50761,50763],{"className":251,"code":50762,"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,50764,50765,50775,50779,50793,50797,50810,50814],{"__ignoreMap":178},[220,50766,50767,50769,50771,50773],{"class":222,"line":223},[220,50768,261],{"class":260},[220,50770,10879],{"class":264},[220,50772,268],{"class":260},[220,50774,4007],{"class":230},[220,50776,50777],{"class":222,"line":179},[220,50778,647],{"emptyLinePlaceholder":194},[220,50780,50781,50783,50785,50787,50789,50791],{"class":222,"line":389},[220,50782,1735],{"class":260},[220,50784,1738],{"class":420},[220,50786,1741],{"class":260},[220,50788,1744],{"class":260},[220,50790,1747],{"class":226},[220,50792,1750],{"class":264},[220,50794,50795],{"class":222,"line":399},[220,50796,1765],{"class":264},[220,50798,50799,50801,50804,50806,50808],{"class":222,"line":644},[220,50800,1770],{"class":264},[220,50802,50803],{"class":230},"'Godrays'",[220,50805,31573],{"class":264},[220,50807,5665],{"class":420},[220,50809,1782],{"class":264},[220,50811,50812],{"class":222,"line":650},[220,50813,1787],{"class":264},[220,50815,50816],{"class":222,"line":656},[220,50817,1792],{"class":264},[1504,50819,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50821},[50822,50823],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":50575,"description":50583},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":50830,"title":50831,"body":50832,"category":35939,"componentType":25247,"description":50839,"extension":191,"meta":51024,"navigation":194,"path":51025,"requiresChild":31900,"seo":51026,"stem":51027,"__hash__":51028},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":50833,"toc":51020},[50834,50837,50840,50842,50844,50847,50849,51018],[11,50835,50831],{"id":50836},"goo",[15,50838,50839],{},"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",[31281,50841],{"component":50831},[23,50843,31285],{"id":25903},[31287,50845],{":props":50846},"[{\"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,50848,31293],{"id":31292},[246,50850,50851,50880,50908,50936,50964],{":tabs":1557},[212,50852,50854],{"className":334,"code":50853,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,50855,50856,50864,50872],{"__ignoreMap":178},[220,50857,50858,50860,50862],{"class":222,"line":223},[220,50859,343],{"class":264},[220,50861,347],{"class":346},[220,50863,359],{"class":264},[220,50865,50866,50868,50870],{"class":222,"line":179},[220,50867,364],{"class":264},[220,50869,50831],{"class":346},[220,50871,386],{"class":264},[220,50873,50874,50876,50878],{"class":222,"line":389},[220,50875,402],{"class":264},[220,50877,347],{"class":346},[220,50879,359],{"class":264},[212,50881,50882],{"className":409,"code":50853,"language":411,"meta":178,"style":178},[99,50883,50884,50892,50900],{"__ignoreMap":178},[220,50885,50886,50888,50890],{"class":222,"line":223},[220,50887,343],{"class":264},[220,50889,347],{"class":420},[220,50891,359],{"class":264},[220,50893,50894,50896,50898],{"class":222,"line":179},[220,50895,364],{"class":264},[220,50897,50831],{"class":420},[220,50899,386],{"class":264},[220,50901,50902,50904,50906],{"class":222,"line":389},[220,50903,402],{"class":264},[220,50905,347],{"class":420},[220,50907,359],{"class":264},[212,50909,50910],{"className":2844,"code":50853,"language":2846,"meta":178,"style":178},[99,50911,50912,50920,50928],{"__ignoreMap":178},[220,50913,50914,50916,50918],{"class":222,"line":223},[220,50915,343],{"class":264},[220,50917,347],{"class":420},[220,50919,359],{"class":264},[220,50921,50922,50924,50926],{"class":222,"line":179},[220,50923,364],{"class":264},[220,50925,50831],{"class":420},[220,50927,386],{"class":264},[220,50929,50930,50932,50934],{"class":222,"line":389},[220,50931,402],{"class":264},[220,50933,347],{"class":420},[220,50935,359],{"class":264},[212,50937,50938],{"className":468,"code":50853,"language":469,"meta":178,"style":178},[99,50939,50940,50948,50956],{"__ignoreMap":178},[220,50941,50942,50944,50946],{"class":222,"line":223},[220,50943,343],{"class":264},[220,50945,347],{"class":420},[220,50947,359],{"class":264},[220,50949,50950,50952,50954],{"class":222,"line":179},[220,50951,364],{"class":264},[220,50953,50831],{"class":420},[220,50955,386],{"class":264},[220,50957,50958,50960,50962],{"class":222,"line":389},[220,50959,402],{"class":264},[220,50961,347],{"class":420},[220,50963,359],{"class":264},[212,50965,50967],{"className":251,"code":50966,"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,50968,50969,50979,50983,50997,51001,51010,51014],{"__ignoreMap":178},[220,50970,50971,50973,50975,50977],{"class":222,"line":223},[220,50972,261],{"class":260},[220,50974,10879],{"class":264},[220,50976,268],{"class":260},[220,50978,4007],{"class":230},[220,50980,50981],{"class":222,"line":179},[220,50982,647],{"emptyLinePlaceholder":194},[220,50984,50985,50987,50989,50991,50993,50995],{"class":222,"line":389},[220,50986,1735],{"class":260},[220,50988,1738],{"class":420},[220,50990,1741],{"class":260},[220,50992,1744],{"class":260},[220,50994,1747],{"class":226},[220,50996,1750],{"class":264},[220,50998,50999],{"class":222,"line":399},[220,51000,1765],{"class":264},[220,51002,51003,51005,51008],{"class":222,"line":644},[220,51004,1770],{"class":264},[220,51006,51007],{"class":230},"'Goo'",[220,51009,2465],{"class":264},[220,51011,51012],{"class":222,"line":650},[220,51013,1787],{"class":264},[220,51015,51016],{"class":222,"line":656},[220,51017,1792],{"class":264},[1504,51019,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":51021},[51022,51023],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":50831,"description":50839},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51030,"title":51031,"body":51032,"category":32176,"componentType":25253,"description":51039,"extension":191,"meta":51300,"navigation":194,"path":51301,"requiresChild":194,"seo":51302,"stem":51303,"__hash__":51304},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51033,"toc":51296},[51034,51037,51040,51042,51044,51047,51049,51294],[11,51035,51031],{"id":51036},"gradientmap",[15,51038,51039],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31281,51041],{"component":51031},[23,51043,31285],{"id":25903},[31287,51045],{":props":51046},"[{\"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,51048,31293],{"id":31292},[246,51050,51051,51096,51140,51184,51228],{":tabs":1557},[212,51052,51054],{"className":334,"code":51053,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51055,51056,51064,51072,51080,51088],{"__ignoreMap":178},[220,51057,51058,51060,51062],{"class":222,"line":223},[220,51059,343],{"class":264},[220,51061,347],{"class":346},[220,51063,359],{"class":264},[220,51065,51066,51068,51070],{"class":222,"line":179},[220,51067,364],{"class":264},[220,51069,51031],{"class":346},[220,51071,359],{"class":264},[220,51073,51074,51076,51078],{"class":222,"line":389},[220,51075,2550],{"class":264},[220,51077,2553],{"class":346},[220,51079,386],{"class":264},[220,51081,51082,51084,51086],{"class":222,"line":399},[220,51083,2567],{"class":264},[220,51085,51031],{"class":346},[220,51087,359],{"class":264},[220,51089,51090,51092,51094],{"class":222,"line":644},[220,51091,402],{"class":264},[220,51093,347],{"class":346},[220,51095,359],{"class":264},[212,51097,51098],{"className":409,"code":51053,"language":411,"meta":178,"style":178},[99,51099,51100,51108,51116,51124,51132],{"__ignoreMap":178},[220,51101,51102,51104,51106],{"class":222,"line":223},[220,51103,343],{"class":264},[220,51105,347],{"class":420},[220,51107,359],{"class":264},[220,51109,51110,51112,51114],{"class":222,"line":179},[220,51111,364],{"class":264},[220,51113,51031],{"class":420},[220,51115,359],{"class":264},[220,51117,51118,51120,51122],{"class":222,"line":389},[220,51119,2550],{"class":264},[220,51121,2553],{"class":420},[220,51123,386],{"class":264},[220,51125,51126,51128,51130],{"class":222,"line":399},[220,51127,2567],{"class":264},[220,51129,51031],{"class":420},[220,51131,359],{"class":264},[220,51133,51134,51136,51138],{"class":222,"line":644},[220,51135,402],{"class":264},[220,51137,347],{"class":420},[220,51139,359],{"class":264},[212,51141,51142],{"className":2844,"code":51053,"language":2846,"meta":178,"style":178},[99,51143,51144,51152,51160,51168,51176],{"__ignoreMap":178},[220,51145,51146,51148,51150],{"class":222,"line":223},[220,51147,343],{"class":264},[220,51149,347],{"class":420},[220,51151,359],{"class":264},[220,51153,51154,51156,51158],{"class":222,"line":179},[220,51155,364],{"class":264},[220,51157,51031],{"class":420},[220,51159,359],{"class":264},[220,51161,51162,51164,51166],{"class":222,"line":389},[220,51163,2550],{"class":264},[220,51165,2553],{"class":420},[220,51167,386],{"class":264},[220,51169,51170,51172,51174],{"class":222,"line":399},[220,51171,2567],{"class":264},[220,51173,51031],{"class":420},[220,51175,359],{"class":264},[220,51177,51178,51180,51182],{"class":222,"line":644},[220,51179,402],{"class":264},[220,51181,347],{"class":420},[220,51183,359],{"class":264},[212,51185,51186],{"className":468,"code":51053,"language":469,"meta":178,"style":178},[99,51187,51188,51196,51204,51212,51220],{"__ignoreMap":178},[220,51189,51190,51192,51194],{"class":222,"line":223},[220,51191,343],{"class":264},[220,51193,347],{"class":420},[220,51195,359],{"class":264},[220,51197,51198,51200,51202],{"class":222,"line":179},[220,51199,364],{"class":264},[220,51201,51031],{"class":420},[220,51203,359],{"class":264},[220,51205,51206,51208,51210],{"class":222,"line":389},[220,51207,2550],{"class":264},[220,51209,2553],{"class":420},[220,51211,386],{"class":264},[220,51213,51214,51216,51218],{"class":222,"line":399},[220,51215,2567],{"class":264},[220,51217,51031],{"class":420},[220,51219,359],{"class":264},[220,51221,51222,51224,51226],{"class":222,"line":644},[220,51223,402],{"class":264},[220,51225,347],{"class":420},[220,51227,359],{"class":264},[212,51229,51231],{"className":251,"code":51230,"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,51232,51233,51243,51247,51261,51265,51274,51282,51286,51290],{"__ignoreMap":178},[220,51234,51235,51237,51239,51241],{"class":222,"line":223},[220,51236,261],{"class":260},[220,51238,10879],{"class":264},[220,51240,268],{"class":260},[220,51242,4007],{"class":230},[220,51244,51245],{"class":222,"line":179},[220,51246,647],{"emptyLinePlaceholder":194},[220,51248,51249,51251,51253,51255,51257,51259],{"class":222,"line":389},[220,51250,1735],{"class":260},[220,51252,1738],{"class":420},[220,51254,1741],{"class":260},[220,51256,1744],{"class":260},[220,51258,1747],{"class":226},[220,51260,1750],{"class":264},[220,51262,51263],{"class":222,"line":399},[220,51264,1765],{"class":264},[220,51266,51267,51269,51272],{"class":222,"line":644},[220,51268,1770],{"class":264},[220,51270,51271],{"class":230},"'GradientMap'",[220,51273,6375],{"class":264},[220,51275,51276,51278,51280],{"class":222,"line":650},[220,51277,6380],{"class":264},[220,51279,3206],{"class":230},[220,51281,2465],{"class":264},[220,51283,51284],{"class":222,"line":656},[220,51285,6397],{"class":264},[220,51287,51288],{"class":222,"line":673},[220,51289,1787],{"class":264},[220,51291,51292],{"class":222,"line":682},[220,51293,1792],{"class":264},[1504,51295,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":51297},[51298,51299],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51031,"description":51039},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":51306,"title":51307,"body":51308,"category":35738,"componentType":25253,"description":51315,"extension":191,"meta":51570,"navigation":194,"path":51571,"requiresChild":194,"seo":51572,"stem":51573,"__hash__":51574},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":51309,"toc":51567},[51310,51313,51316,51318,51320,51565],[11,51311,51307],{"id":51312},"grayscale",[15,51314,51315],{},"Convert colors to black and white",[31281,51317],{"component":51307},[23,51319,31293],{"id":31292},[246,51321,51322,51367,51411,51455,51499],{":tabs":1557},[212,51323,51325],{"className":334,"code":51324,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,51326,51327,51335,51343,51351,51359],{"__ignoreMap":178},[220,51328,51329,51331,51333],{"class":222,"line":223},[220,51330,343],{"class":264},[220,51332,347],{"class":346},[220,51334,359],{"class":264},[220,51336,51337,51339,51341],{"class":222,"line":179},[220,51338,364],{"class":264},[220,51340,51307],{"class":346},[220,51342,359],{"class":264},[220,51344,51345,51347,51349],{"class":222,"line":389},[220,51346,2550],{"class":264},[220,51348,2553],{"class":346},[220,51350,386],{"class":264},[220,51352,51353,51355,51357],{"class":222,"line":399},[220,51354,2567],{"class":264},[220,51356,51307],{"class":346},[220,51358,359],{"class":264},[220,51360,51361,51363,51365],{"class":222,"line":644},[220,51362,402],{"class":264},[220,51364,347],{"class":346},[220,51366,359],{"class":264},[212,51368,51369],{"className":409,"code":51324,"language":411,"meta":178,"style":178},[99,51370,51371,51379,51387,51395,51403],{"__ignoreMap":178},[220,51372,51373,51375,51377],{"class":222,"line":223},[220,51374,343],{"class":264},[220,51376,347],{"class":420},[220,51378,359],{"class":264},[220,51380,51381,51383,51385],{"class":222,"line":179},[220,51382,364],{"class":264},[220,51384,51307],{"class":420},[220,51386,359],{"class":264},[220,51388,51389,51391,51393],{"class":222,"line":389},[220,51390,2550],{"class":264},[220,51392,2553],{"class":420},[220,51394,386],{"class":264},[220,51396,51397,51399,51401],{"class":222,"line":399},[220,51398,2567],{"class":264},[220,51400,51307],{"class":420},[220,51402,359],{"class":264},[220,51404,51405,51407,51409],{"class":222,"line":644},[220,51406,402],{"class":264},[220,51408,347],{"class":420},[220,51410,359],{"class":264},[212,51412,51413],{"className":2844,"code":51324,"language":2846,"meta":178,"style":178},[99,51414,51415,51423,51431,51439,51447],{"__ignoreMap":178},[220,51416,51417,51419,51421],{"class":222,"line":223},[220,51418,343],{"class":264},[220,51420,347],{"class":420},[220,51422,359],{"class":264},[220,51424,51425,51427,51429],{"class":222,"line":179},[220,51426,364],{"class":264},[220,51428,51307],{"class":420},[220,51430,359],{"class":264},[220,51432,51433,51435,51437],{"class":222,"line":389},[220,51434,2550],{"class":264},[220,51436,2553],{"class":420},[220,51438,386],{"class":264},[220,51440,51441,51443,51445],{"class":222,"line":399},[220,51442,2567],{"class":264},[220,51444,51307],{"class":420},[220,51446,359],{"class":264},[220,51448,51449,51451,51453],{"class":222,"line":644},[220,51450,402],{"class":264},[220,51452,347],{"class":420},[220,51454,359],{"class":264},[212,51456,51457],{"className":468,"code":51324,"language":469,"meta":178,"style":178},[99,51458,51459,51467,51475,51483,51491],{"__ignoreMap":178},[220,51460,51461,51463,51465],{"class":222,"line":223},[220,51462,343],{"class":264},[220,51464,347],{"class":420},[220,51466,359],{"class":264},[220,51468,51469,51471,51473],{"class":222,"line":179},[220,51470,364],{"class":264},[220,51472,51307],{"class":420},[220,51474,359],{"class":264},[220,51476,51477,51479,51481],{"class":222,"line":389},[220,51478,2550],{"class":264},[220,51480,2553],{"class":420},[220,51482,386],{"class":264},[220,51484,51485,51487,51489],{"class":222,"line":399},[220,51486,2567],{"class":264},[220,51488,51307],{"class":420},[220,51490,359],{"class":264},[220,51492,51493,51495,51497],{"class":222,"line":644},[220,51494,402],{"class":264},[220,51496,347],{"class":420},[220,51498,359],{"class":264},[212,51500,51502],{"className":251,"code":51501,"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,51503,51504,51514,51518,51532,51536,51545,51553,51557,51561],{"__ignoreMap":178},[220,51505,51506,51508,51510,51512],{"class":222,"line":223},[220,51507,261],{"class":260},[220,51509,10879],{"class":264},[220,51511,268],{"class":260},[220,51513,4007],{"class":230},[220,51515,51516],{"class":222,"line":179},[220,51517,647],{"emptyLinePlaceholder":194},[220,51519,51520,51522,51524,51526,51528,51530],{"class":222,"line":389},[220,51521,1735],{"class":260},[220,51523,1738],{"class":420},[220,51525,1741],{"class":260},[220,51527,1744],{"class":260},[220,51529,1747],{"class":226},[220,51531,1750],{"class":264},[220,51533,51534],{"class":222,"line":399},[220,51535,1765],{"class":264},[220,51537,51538,51540,51543],{"class":222,"line":644},[220,51539,1770],{"class":264},[220,51541,51542],{"class":230},"'Grayscale'",[220,51544,6375],{"class":264},[220,51546,51547,51549,51551],{"class":222,"line":650},[220,51548,6380],{"class":264},[220,51550,3206],{"class":230},[220,51552,2465],{"class":264},[220,51554,51555],{"class":222,"line":656},[220,51556,6397],{"class":264},[220,51558,51559],{"class":222,"line":673},[220,51560,1787],{"class":264},[220,51562,51563],{"class":222,"line":682},[220,51564,1792],{"class":264},[1504,51566,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":51568},[51569],{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":51307,"description":51315},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":51576,"title":51577,"body":51578,"category":32433,"componentType":25247,"description":51585,"extension":191,"meta":51815,"navigation":194,"path":51816,"requiresChild":31900,"seo":51817,"stem":51818,"__hash__":51819},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":51579,"toc":51811},[51580,51583,51586,51588,51590,51593,51595,51809],[11,51581,51577],{"id":51582},"grid",[15,51584,51585],{},"Simple grid lines pattern with adjustable thickness and rotation",[31281,51587],{"component":51577},[23,51589,31285],{"id":25903},[31287,51591],{":props":51592},"[{\"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,51594,31293],{"id":31292},[246,51596,51597,51637,51675,51713,51751],{":tabs":1557},[212,51598,51600],{"className":334,"code":51599,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,51601,51602,51610,51617,51625,51629],{"__ignoreMap":178},[220,51603,51604,51606,51608],{"class":222,"line":223},[220,51605,343],{"class":264},[220,51607,347],{"class":346},[220,51609,359],{"class":264},[220,51611,51612,51614],{"class":222,"line":179},[220,51613,364],{"class":264},[220,51615,51616],{"class":346},"Grid\n",[220,51618,51619,51621,51623],{"class":222,"line":389},[220,51620,9002],{"class":226},[220,51622,353],{"class":264},[220,51624,8958],{"class":230},[220,51626,51627],{"class":222,"line":399},[220,51628,1234],{"class":264},[220,51630,51631,51633,51635],{"class":222,"line":644},[220,51632,402],{"class":264},[220,51634,347],{"class":346},[220,51636,359],{"class":264},[212,51638,51639],{"className":409,"code":51599,"language":411,"meta":178,"style":178},[99,51640,51641,51649,51655,51663,51667],{"__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],{"class":222,"line":179},[220,51652,364],{"class":264},[220,51654,51616],{"class":420},[220,51656,51657,51659,51661],{"class":222,"line":389},[220,51658,9002],{"class":226},[220,51660,353],{"class":260},[220,51662,8958],{"class":230},[220,51664,51665],{"class":222,"line":399},[220,51666,1234],{"class":264},[220,51668,51669,51671,51673],{"class":222,"line":644},[220,51670,402],{"class":264},[220,51672,347],{"class":420},[220,51674,359],{"class":264},[212,51676,51677],{"className":2844,"code":51599,"language":2846,"meta":178,"style":178},[99,51678,51679,51687,51693,51701,51705],{"__ignoreMap":178},[220,51680,51681,51683,51685],{"class":222,"line":223},[220,51682,343],{"class":264},[220,51684,347],{"class":420},[220,51686,359],{"class":264},[220,51688,51689,51691],{"class":222,"line":179},[220,51690,364],{"class":264},[220,51692,51616],{"class":420},[220,51694,51695,51697,51699],{"class":222,"line":389},[220,51696,9002],{"class":226},[220,51698,353],{"class":264},[220,51700,8958],{"class":230},[220,51702,51703],{"class":222,"line":399},[220,51704,1234],{"class":264},[220,51706,51707,51709,51711],{"class":222,"line":644},[220,51708,402],{"class":264},[220,51710,347],{"class":420},[220,51712,359],{"class":264},[212,51714,51715],{"className":468,"code":51599,"language":469,"meta":178,"style":178},[99,51716,51717,51725,51731,51739,51743],{"__ignoreMap":178},[220,51718,51719,51721,51723],{"class":222,"line":223},[220,51720,343],{"class":264},[220,51722,347],{"class":420},[220,51724,359],{"class":264},[220,51726,51727,51729],{"class":222,"line":179},[220,51728,364],{"class":264},[220,51730,51616],{"class":420},[220,51732,51733,51735,51737],{"class":222,"line":389},[220,51734,9002],{"class":226},[220,51736,353],{"class":260},[220,51738,8958],{"class":230},[220,51740,51741],{"class":222,"line":399},[220,51742,1234],{"class":264},[220,51744,51745,51747,51749],{"class":222,"line":644},[220,51746,402],{"class":264},[220,51748,347],{"class":420},[220,51750,359],{"class":264},[212,51752,51754],{"className":251,"code":51753,"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,51755,51756,51766,51770,51784,51788,51801,51805],{"__ignoreMap":178},[220,51757,51758,51760,51762,51764],{"class":222,"line":223},[220,51759,261],{"class":260},[220,51761,10879],{"class":264},[220,51763,268],{"class":260},[220,51765,4007],{"class":230},[220,51767,51768],{"class":222,"line":179},[220,51769,647],{"emptyLinePlaceholder":194},[220,51771,51772,51774,51776,51778,51780,51782],{"class":222,"line":389},[220,51773,1735],{"class":260},[220,51775,1738],{"class":420},[220,51777,1741],{"class":260},[220,51779,1744],{"class":260},[220,51781,1747],{"class":226},[220,51783,1750],{"class":264},[220,51785,51786],{"class":222,"line":399},[220,51787,1765],{"class":264},[220,51789,51790,51792,51795,51797,51799],{"class":222,"line":644},[220,51791,1770],{"class":264},[220,51793,51794],{"class":230},"'Grid'",[220,51796,1776],{"class":264},[220,51798,9536],{"class":230},[220,51800,1782],{"class":264},[220,51802,51803],{"class":222,"line":650},[220,51804,1787],{"class":264},[220,51806,51807],{"class":222,"line":656},[220,51808,1792],{"class":264},[1504,51810,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51812},[51813,51814],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":51577,"description":51585},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":51821,"title":6461,"body":51822,"category":34929,"componentType":25253,"description":51829,"extension":191,"meta":52191,"navigation":194,"path":52192,"requiresChild":194,"seo":52193,"stem":52194,"__hash__":52195},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":51823,"toc":52187},[51824,51827,51830,51832,51834,51837,51839,52185],[11,51825,6461],{"id":51826},"griddistortion",[15,51828,51829],{},"Interactive grid distortion controlled by mouse position",[31281,51831],{"component":6461},[23,51833,31285],{"id":25903},[31287,51835],{":props":51836},"[{\"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,51838,31293],{"id":31292},[246,51840,51841,51905,51976,52042,52112],{":tabs":1557},[212,51842,51844],{"className":334,"code":51843,"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,51845,51846,51854,51861,51869,51877,51881,51889,51897],{"__ignoreMap":178},[220,51847,51848,51850,51852],{"class":222,"line":223},[220,51849,343],{"class":264},[220,51851,347],{"class":346},[220,51853,359],{"class":264},[220,51855,51856,51858],{"class":222,"line":179},[220,51857,364],{"class":264},[220,51859,51860],{"class":346},"GridDistortion\n",[220,51862,51863,51865,51867],{"class":222,"line":389},[220,51864,19739],{"class":226},[220,51866,353],{"class":264},[220,51868,35995],{"class":230},[220,51870,51871,51873,51875],{"class":222,"line":399},[220,51872,16772],{"class":226},[220,51874,353],{"class":264},[220,51876,35995],{"class":230},[220,51878,51879],{"class":222,"line":644},[220,51880,31329],{"class":264},[220,51882,51883,51885,51887],{"class":222,"line":650},[220,51884,2550],{"class":264},[220,51886,2553],{"class":346},[220,51888,386],{"class":264},[220,51890,51891,51893,51895],{"class":222,"line":656},[220,51892,2567],{"class":264},[220,51894,6461],{"class":346},[220,51896,359],{"class":264},[220,51898,51899,51901,51903],{"class":222,"line":673},[220,51900,402],{"class":264},[220,51902,347],{"class":346},[220,51904,359],{"class":264},[212,51906,51908],{"className":409,"code":51907,"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,51909,51910,51918,51924,51936,51948,51952,51960,51968],{"__ignoreMap":178},[220,51911,51912,51914,51916],{"class":222,"line":223},[220,51913,343],{"class":264},[220,51915,347],{"class":420},[220,51917,359],{"class":264},[220,51919,51920,51922],{"class":222,"line":179},[220,51921,364],{"class":264},[220,51923,51860],{"class":420},[220,51925,51926,51928,51930,51932,51934],{"class":222,"line":389},[220,51927,19850],{"class":226},[220,51929,353],{"class":260},[220,51931,743],{"class":264},[220,51933,8043],{"class":420},[220,51935,749],{"class":264},[220,51937,51938,51940,51942,51944,51946],{"class":222,"line":399},[220,51939,9012],{"class":226},[220,51941,353],{"class":260},[220,51943,743],{"class":264},[220,51945,8043],{"class":420},[220,51947,749],{"class":264},[220,51949,51950],{"class":222,"line":644},[220,51951,31329],{"class":264},[220,51953,51954,51956,51958],{"class":222,"line":650},[220,51955,2550],{"class":264},[220,51957,2553],{"class":420},[220,51959,386],{"class":264},[220,51961,51962,51964,51966],{"class":222,"line":656},[220,51963,2567],{"class":264},[220,51965,6461],{"class":420},[220,51967,359],{"class":264},[220,51969,51970,51972,51974],{"class":222,"line":673},[220,51971,402],{"class":264},[220,51973,347],{"class":420},[220,51975,359],{"class":264},[212,51977,51978],{"className":2844,"code":51907,"language":2846,"meta":178,"style":178},[99,51979,51980,51988,51994,52004,52014,52018,52026,52034],{"__ignoreMap":178},[220,51981,51982,51984,51986],{"class":222,"line":223},[220,51983,343],{"class":264},[220,51985,347],{"class":420},[220,51987,359],{"class":264},[220,51989,51990,51992],{"class":222,"line":179},[220,51991,364],{"class":264},[220,51993,51860],{"class":420},[220,51995,51996,51998,52000,52002],{"class":222,"line":389},[220,51997,19850],{"class":226},[220,51999,29241],{"class":264},[220,52001,8043],{"class":420},[220,52003,749],{"class":264},[220,52005,52006,52008,52010,52012],{"class":222,"line":399},[220,52007,9012],{"class":226},[220,52009,29241],{"class":264},[220,52011,8043],{"class":420},[220,52013,749],{"class":264},[220,52015,52016],{"class":222,"line":644},[220,52017,31329],{"class":264},[220,52019,52020,52022,52024],{"class":222,"line":650},[220,52021,2550],{"class":264},[220,52023,2553],{"class":420},[220,52025,386],{"class":264},[220,52027,52028,52030,52032],{"class":222,"line":656},[220,52029,2567],{"class":264},[220,52031,6461],{"class":420},[220,52033,359],{"class":264},[220,52035,52036,52038,52040],{"class":222,"line":673},[220,52037,402],{"class":264},[220,52039,347],{"class":420},[220,52041,359],{"class":264},[212,52043,52044],{"className":468,"code":51907,"language":469,"meta":178,"style":178},[99,52045,52046,52054,52060,52072,52084,52088,52096,52104],{"__ignoreMap":178},[220,52047,52048,52050,52052],{"class":222,"line":223},[220,52049,343],{"class":264},[220,52051,347],{"class":420},[220,52053,359],{"class":264},[220,52055,52056,52058],{"class":222,"line":179},[220,52057,364],{"class":264},[220,52059,51860],{"class":420},[220,52061,52062,52064,52066,52068,52070],{"class":222,"line":389},[220,52063,19850],{"class":226},[220,52065,353],{"class":260},[220,52067,743],{"class":264},[220,52069,8043],{"class":420},[220,52071,749],{"class":264},[220,52073,52074,52076,52078,52080,52082],{"class":222,"line":399},[220,52075,9012],{"class":226},[220,52077,353],{"class":260},[220,52079,743],{"class":264},[220,52081,8043],{"class":420},[220,52083,749],{"class":264},[220,52085,52086],{"class":222,"line":644},[220,52087,31329],{"class":264},[220,52089,52090,52092,52094],{"class":222,"line":650},[220,52091,2550],{"class":264},[220,52093,2553],{"class":420},[220,52095,386],{"class":264},[220,52097,52098,52100,52102],{"class":222,"line":656},[220,52099,2567],{"class":264},[220,52101,6461],{"class":420},[220,52103,359],{"class":264},[220,52105,52106,52108,52110],{"class":222,"line":673},[220,52107,402],{"class":264},[220,52109,347],{"class":420},[220,52111,359],{"class":264},[212,52113,52115],{"className":251,"code":52114,"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,52116,52117,52127,52131,52145,52149,52165,52173,52177,52181],{"__ignoreMap":178},[220,52118,52119,52121,52123,52125],{"class":222,"line":223},[220,52120,261],{"class":260},[220,52122,10879],{"class":264},[220,52124,268],{"class":260},[220,52126,4007],{"class":230},[220,52128,52129],{"class":222,"line":179},[220,52130,647],{"emptyLinePlaceholder":194},[220,52132,52133,52135,52137,52139,52141,52143],{"class":222,"line":389},[220,52134,1735],{"class":260},[220,52136,1738],{"class":420},[220,52138,1741],{"class":260},[220,52140,1744],{"class":260},[220,52142,1747],{"class":226},[220,52144,1750],{"class":264},[220,52146,52147],{"class":222,"line":399},[220,52148,1765],{"class":264},[220,52150,52151,52153,52155,52157,52159,52161,52163],{"class":222,"line":644},[220,52152,1770],{"class":264},[220,52154,6904],{"class":230},[220,52156,31573],{"class":264},[220,52158,8043],{"class":420},[220,52160,5932],{"class":264},[220,52162,8043],{"class":420},[220,52164,6912],{"class":264},[220,52166,52167,52169,52171],{"class":222,"line":650},[220,52168,6380],{"class":264},[220,52170,3206],{"class":230},[220,52172,2465],{"class":264},[220,52174,52175],{"class":222,"line":656},[220,52176,6397],{"class":264},[220,52178,52179],{"class":222,"line":673},[220,52180,1787],{"class":264},[220,52182,52183],{"class":222,"line":682},[220,52184,1792],{"class":264},[1504,52186,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52188},[52189,52190],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":6461,"description":51829},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":52197,"title":52198,"body":52199,"category":52461,"componentType":25253,"description":52206,"extension":191,"meta":52462,"navigation":194,"path":52463,"requiresChild":194,"seo":52464,"stem":52465,"__hash__":52466},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":52200,"toc":52458},[52201,52204,52207,52209,52211,52456],[11,52202,52198],{"id":52203},"group",[15,52205,52206],{},"Container for organizing and composing child effects",[31281,52208],{"component":52198},[23,52210,31293],{"id":31292},[246,52212,52213,52258,52302,52346,52390],{":tabs":1557},[212,52214,52216],{"className":334,"code":52215,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,52217,52218,52226,52234,52242,52250],{"__ignoreMap":178},[220,52219,52220,52222,52224],{"class":222,"line":223},[220,52221,343],{"class":264},[220,52223,347],{"class":346},[220,52225,359],{"class":264},[220,52227,52228,52230,52232],{"class":222,"line":179},[220,52229,364],{"class":264},[220,52231,52198],{"class":346},[220,52233,359],{"class":264},[220,52235,52236,52238,52240],{"class":222,"line":389},[220,52237,2550],{"class":264},[220,52239,2553],{"class":346},[220,52241,386],{"class":264},[220,52243,52244,52246,52248],{"class":222,"line":399},[220,52245,2567],{"class":264},[220,52247,52198],{"class":346},[220,52249,359],{"class":264},[220,52251,52252,52254,52256],{"class":222,"line":644},[220,52253,402],{"class":264},[220,52255,347],{"class":346},[220,52257,359],{"class":264},[212,52259,52260],{"className":409,"code":52215,"language":411,"meta":178,"style":178},[99,52261,52262,52270,52278,52286,52294],{"__ignoreMap":178},[220,52263,52264,52266,52268],{"class":222,"line":223},[220,52265,343],{"class":264},[220,52267,347],{"class":420},[220,52269,359],{"class":264},[220,52271,52272,52274,52276],{"class":222,"line":179},[220,52273,364],{"class":264},[220,52275,52198],{"class":420},[220,52277,359],{"class":264},[220,52279,52280,52282,52284],{"class":222,"line":389},[220,52281,2550],{"class":264},[220,52283,2553],{"class":420},[220,52285,386],{"class":264},[220,52287,52288,52290,52292],{"class":222,"line":399},[220,52289,2567],{"class":264},[220,52291,52198],{"class":420},[220,52293,359],{"class":264},[220,52295,52296,52298,52300],{"class":222,"line":644},[220,52297,402],{"class":264},[220,52299,347],{"class":420},[220,52301,359],{"class":264},[212,52303,52304],{"className":2844,"code":52215,"language":2846,"meta":178,"style":178},[99,52305,52306,52314,52322,52330,52338],{"__ignoreMap":178},[220,52307,52308,52310,52312],{"class":222,"line":223},[220,52309,343],{"class":264},[220,52311,347],{"class":420},[220,52313,359],{"class":264},[220,52315,52316,52318,52320],{"class":222,"line":179},[220,52317,364],{"class":264},[220,52319,52198],{"class":420},[220,52321,359],{"class":264},[220,52323,52324,52326,52328],{"class":222,"line":389},[220,52325,2550],{"class":264},[220,52327,2553],{"class":420},[220,52329,386],{"class":264},[220,52331,52332,52334,52336],{"class":222,"line":399},[220,52333,2567],{"class":264},[220,52335,52198],{"class":420},[220,52337,359],{"class":264},[220,52339,52340,52342,52344],{"class":222,"line":644},[220,52341,402],{"class":264},[220,52343,347],{"class":420},[220,52345,359],{"class":264},[212,52347,52348],{"className":468,"code":52215,"language":469,"meta":178,"style":178},[99,52349,52350,52358,52366,52374,52382],{"__ignoreMap":178},[220,52351,52352,52354,52356],{"class":222,"line":223},[220,52353,343],{"class":264},[220,52355,347],{"class":420},[220,52357,359],{"class":264},[220,52359,52360,52362,52364],{"class":222,"line":179},[220,52361,364],{"class":264},[220,52363,52198],{"class":420},[220,52365,359],{"class":264},[220,52367,52368,52370,52372],{"class":222,"line":389},[220,52369,2550],{"class":264},[220,52371,2553],{"class":420},[220,52373,386],{"class":264},[220,52375,52376,52378,52380],{"class":222,"line":399},[220,52377,2567],{"class":264},[220,52379,52198],{"class":420},[220,52381,359],{"class":264},[220,52383,52384,52386,52388],{"class":222,"line":644},[220,52385,402],{"class":264},[220,52387,347],{"class":420},[220,52389,359],{"class":264},[212,52391,52393],{"className":251,"code":52392,"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,52394,52395,52405,52409,52423,52427,52436,52444,52448,52452],{"__ignoreMap":178},[220,52396,52397,52399,52401,52403],{"class":222,"line":223},[220,52398,261],{"class":260},[220,52400,10879],{"class":264},[220,52402,268],{"class":260},[220,52404,4007],{"class":230},[220,52406,52407],{"class":222,"line":179},[220,52408,647],{"emptyLinePlaceholder":194},[220,52410,52411,52413,52415,52417,52419,52421],{"class":222,"line":389},[220,52412,1735],{"class":260},[220,52414,1738],{"class":420},[220,52416,1741],{"class":260},[220,52418,1744],{"class":260},[220,52420,1747],{"class":226},[220,52422,1750],{"class":264},[220,52424,52425],{"class":222,"line":399},[220,52426,1765],{"class":264},[220,52428,52429,52431,52434],{"class":222,"line":644},[220,52430,1770],{"class":264},[220,52432,52433],{"class":230},"'Group'",[220,52435,6375],{"class":264},[220,52437,52438,52440,52442],{"class":222,"line":650},[220,52439,6380],{"class":264},[220,52441,3206],{"class":230},[220,52443,2465],{"class":264},[220,52445,52446],{"class":222,"line":656},[220,52447,6397],{"class":264},[220,52449,52450],{"class":222,"line":673},[220,52451,1787],{"class":264},[220,52453,52454],{"class":222,"line":682},[220,52455,1792],{"class":264},[1504,52457,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":52459},[52460],{"id":31292,"depth":179,"text":31293},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":52198,"description":52206},"docs\u002Fcomponents\u002FGroup","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":52468,"title":52469,"body":52470,"category":32433,"componentType":25247,"description":52477,"extension":191,"meta":52662,"navigation":194,"path":52663,"requiresChild":31900,"seo":52664,"stem":52665,"__hash__":52666},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":52471,"toc":52659},[52472,52475,52478,52484,52486,52488,52657],[11,52473,52469],{"id":52474},"htmlincanvas",[15,52476,52477],{},"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.",[52479,52480],"experimental-warning",{"link-label":52481,"link-url":52482,"message":52483},"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.",[31281,52485],{"component":52469},[23,52487,31293],{"id":31292},[246,52489,52490,52519,52547,52575,52603],{":tabs":1557},[212,52491,52493],{"className":334,"code":52492,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,52494,52495,52503,52511],{"__ignoreMap":178},[220,52496,52497,52499,52501],{"class":222,"line":223},[220,52498,343],{"class":264},[220,52500,347],{"class":346},[220,52502,359],{"class":264},[220,52504,52505,52507,52509],{"class":222,"line":179},[220,52506,364],{"class":264},[220,52508,52469],{"class":346},[220,52510,386],{"class":264},[220,52512,52513,52515,52517],{"class":222,"line":389},[220,52514,402],{"class":264},[220,52516,347],{"class":346},[220,52518,359],{"class":264},[212,52520,52521],{"className":409,"code":52492,"language":411,"meta":178,"style":178},[99,52522,52523,52531,52539],{"__ignoreMap":178},[220,52524,52525,52527,52529],{"class":222,"line":223},[220,52526,343],{"class":264},[220,52528,347],{"class":420},[220,52530,359],{"class":264},[220,52532,52533,52535,52537],{"class":222,"line":179},[220,52534,364],{"class":264},[220,52536,52469],{"class":420},[220,52538,386],{"class":264},[220,52540,52541,52543,52545],{"class":222,"line":389},[220,52542,402],{"class":264},[220,52544,347],{"class":420},[220,52546,359],{"class":264},[212,52548,52549],{"className":2844,"code":52492,"language":2846,"meta":178,"style":178},[99,52550,52551,52559,52567],{"__ignoreMap":178},[220,52552,52553,52555,52557],{"class":222,"line":223},[220,52554,343],{"class":264},[220,52556,347],{"class":420},[220,52558,359],{"class":264},[220,52560,52561,52563,52565],{"class":222,"line":179},[220,52562,364],{"class":264},[220,52564,52469],{"class":420},[220,52566,386],{"class":264},[220,52568,52569,52571,52573],{"class":222,"line":389},[220,52570,402],{"class":264},[220,52572,347],{"class":420},[220,52574,359],{"class":264},[212,52576,52577],{"className":468,"code":52492,"language":469,"meta":178,"style":178},[99,52578,52579,52587,52595],{"__ignoreMap":178},[220,52580,52581,52583,52585],{"class":222,"line":223},[220,52582,343],{"class":264},[220,52584,347],{"class":420},[220,52586,359],{"class":264},[220,52588,52589,52591,52593],{"class":222,"line":179},[220,52590,364],{"class":264},[220,52592,52469],{"class":420},[220,52594,386],{"class":264},[220,52596,52597,52599,52601],{"class":222,"line":389},[220,52598,402],{"class":264},[220,52600,347],{"class":420},[220,52602,359],{"class":264},[212,52604,52606],{"className":251,"code":52605,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HTMLInCanvas', props: {} }\n ]\n})\n",[99,52607,52608,52618,52622,52636,52640,52649,52653],{"__ignoreMap":178},[220,52609,52610,52612,52614,52616],{"class":222,"line":223},[220,52611,261],{"class":260},[220,52613,10879],{"class":264},[220,52615,268],{"class":260},[220,52617,4007],{"class":230},[220,52619,52620],{"class":222,"line":179},[220,52621,647],{"emptyLinePlaceholder":194},[220,52623,52624,52626,52628,52630,52632,52634],{"class":222,"line":389},[220,52625,1735],{"class":260},[220,52627,1738],{"class":420},[220,52629,1741],{"class":260},[220,52631,1744],{"class":260},[220,52633,1747],{"class":226},[220,52635,1750],{"class":264},[220,52637,52638],{"class":222,"line":399},[220,52639,1765],{"class":264},[220,52641,52642,52644,52647],{"class":222,"line":644},[220,52643,1770],{"class":264},[220,52645,52646],{"class":230},"'HTMLInCanvas'",[220,52648,2465],{"class":264},[220,52650,52651],{"class":222,"line":650},[220,52652,1787],{"class":264},[220,52654,52655],{"class":222,"line":656},[220,52656,1792],{"class":264},[1504,52658,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":52660},[52661],{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":52469,"description":52477},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":52668,"title":52669,"body":52670,"category":32176,"componentType":25253,"description":52677,"extension":191,"meta":52938,"navigation":194,"path":52939,"requiresChild":194,"seo":52940,"stem":52941,"__hash__":52942},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":52671,"toc":52934},[52672,52675,52678,52680,52682,52685,52687,52932],[11,52673,52669],{"id":52674},"halftone",[15,52676,52677],{},"Halftone dot pattern effect for printing aesthetics",[31281,52679],{"component":52669},[23,52681,31285],{"id":25903},[31287,52683],{":props":52684},"[{\"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,52686,31293],{"id":31292},[246,52688,52689,52734,52778,52822,52866],{":tabs":1557},[212,52690,52692],{"className":334,"code":52691,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,52693,52694,52702,52710,52718,52726],{"__ignoreMap":178},[220,52695,52696,52698,52700],{"class":222,"line":223},[220,52697,343],{"class":264},[220,52699,347],{"class":346},[220,52701,359],{"class":264},[220,52703,52704,52706,52708],{"class":222,"line":179},[220,52705,364],{"class":264},[220,52707,52669],{"class":346},[220,52709,359],{"class":264},[220,52711,52712,52714,52716],{"class":222,"line":389},[220,52713,2550],{"class":264},[220,52715,2553],{"class":346},[220,52717,386],{"class":264},[220,52719,52720,52722,52724],{"class":222,"line":399},[220,52721,2567],{"class":264},[220,52723,52669],{"class":346},[220,52725,359],{"class":264},[220,52727,52728,52730,52732],{"class":222,"line":644},[220,52729,402],{"class":264},[220,52731,347],{"class":346},[220,52733,359],{"class":264},[212,52735,52736],{"className":409,"code":52691,"language":411,"meta":178,"style":178},[99,52737,52738,52746,52754,52762,52770],{"__ignoreMap":178},[220,52739,52740,52742,52744],{"class":222,"line":223},[220,52741,343],{"class":264},[220,52743,347],{"class":420},[220,52745,359],{"class":264},[220,52747,52748,52750,52752],{"class":222,"line":179},[220,52749,364],{"class":264},[220,52751,52669],{"class":420},[220,52753,359],{"class":264},[220,52755,52756,52758,52760],{"class":222,"line":389},[220,52757,2550],{"class":264},[220,52759,2553],{"class":420},[220,52761,386],{"class":264},[220,52763,52764,52766,52768],{"class":222,"line":399},[220,52765,2567],{"class":264},[220,52767,52669],{"class":420},[220,52769,359],{"class":264},[220,52771,52772,52774,52776],{"class":222,"line":644},[220,52773,402],{"class":264},[220,52775,347],{"class":420},[220,52777,359],{"class":264},[212,52779,52780],{"className":2844,"code":52691,"language":2846,"meta":178,"style":178},[99,52781,52782,52790,52798,52806,52814],{"__ignoreMap":178},[220,52783,52784,52786,52788],{"class":222,"line":223},[220,52785,343],{"class":264},[220,52787,347],{"class":420},[220,52789,359],{"class":264},[220,52791,52792,52794,52796],{"class":222,"line":179},[220,52793,364],{"class":264},[220,52795,52669],{"class":420},[220,52797,359],{"class":264},[220,52799,52800,52802,52804],{"class":222,"line":389},[220,52801,2550],{"class":264},[220,52803,2553],{"class":420},[220,52805,386],{"class":264},[220,52807,52808,52810,52812],{"class":222,"line":399},[220,52809,2567],{"class":264},[220,52811,52669],{"class":420},[220,52813,359],{"class":264},[220,52815,52816,52818,52820],{"class":222,"line":644},[220,52817,402],{"class":264},[220,52819,347],{"class":420},[220,52821,359],{"class":264},[212,52823,52824],{"className":468,"code":52691,"language":469,"meta":178,"style":178},[99,52825,52826,52834,52842,52850,52858],{"__ignoreMap":178},[220,52827,52828,52830,52832],{"class":222,"line":223},[220,52829,343],{"class":264},[220,52831,347],{"class":420},[220,52833,359],{"class":264},[220,52835,52836,52838,52840],{"class":222,"line":179},[220,52837,364],{"class":264},[220,52839,52669],{"class":420},[220,52841,359],{"class":264},[220,52843,52844,52846,52848],{"class":222,"line":389},[220,52845,2550],{"class":264},[220,52847,2553],{"class":420},[220,52849,386],{"class":264},[220,52851,52852,52854,52856],{"class":222,"line":399},[220,52853,2567],{"class":264},[220,52855,52669],{"class":420},[220,52857,359],{"class":264},[220,52859,52860,52862,52864],{"class":222,"line":644},[220,52861,402],{"class":264},[220,52863,347],{"class":420},[220,52865,359],{"class":264},[212,52867,52869],{"className":251,"code":52868,"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,52870,52871,52881,52885,52899,52903,52912,52920,52924,52928],{"__ignoreMap":178},[220,52872,52873,52875,52877,52879],{"class":222,"line":223},[220,52874,261],{"class":260},[220,52876,10879],{"class":264},[220,52878,268],{"class":260},[220,52880,4007],{"class":230},[220,52882,52883],{"class":222,"line":179},[220,52884,647],{"emptyLinePlaceholder":194},[220,52886,52887,52889,52891,52893,52895,52897],{"class":222,"line":389},[220,52888,1735],{"class":260},[220,52890,1738],{"class":420},[220,52892,1741],{"class":260},[220,52894,1744],{"class":260},[220,52896,1747],{"class":226},[220,52898,1750],{"class":264},[220,52900,52901],{"class":222,"line":399},[220,52902,1765],{"class":264},[220,52904,52905,52907,52910],{"class":222,"line":644},[220,52906,1770],{"class":264},[220,52908,52909],{"class":230},"'Halftone'",[220,52911,6375],{"class":264},[220,52913,52914,52916,52918],{"class":222,"line":650},[220,52915,6380],{"class":264},[220,52917,3206],{"class":230},[220,52919,2465],{"class":264},[220,52921,52922],{"class":222,"line":656},[220,52923,6397],{"class":264},[220,52925,52926],{"class":222,"line":673},[220,52927,1787],{"class":264},[220,52929,52930],{"class":222,"line":682},[220,52931,1792],{"class":264},[1504,52933,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":52935},[52936,52937],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":52669,"description":52677},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":52944,"title":52945,"body":52946,"category":15275,"componentType":25247,"description":52953,"extension":191,"meta":53232,"navigation":194,"path":53233,"requiresChild":31900,"seo":53234,"stem":53235,"__hash__":53236},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":52947,"toc":53228},[52948,52951,52954,52956,52958,52961,52963,53226],[11,52949,52945],{"id":52950},"heart",[15,52952,52953],{},"Heart shape with adjustable size",[31281,52955],{"component":52945},[23,52957,31285],{"id":25903},[31287,52959],{":props":52960},"[{\"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,52962,31293],{"id":31292},[246,52964,52965,53014,53066,53114,53164],{":tabs":1557},[212,52966,52968],{"className":334,"code":52967,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,52969,52970,52978,52985,52993,53002,53006],{"__ignoreMap":178},[220,52971,52972,52974,52976],{"class":222,"line":223},[220,52973,343],{"class":264},[220,52975,347],{"class":346},[220,52977,359],{"class":264},[220,52979,52980,52982],{"class":222,"line":179},[220,52981,364],{"class":264},[220,52983,52984],{"class":346},"Heart\n",[220,52986,52987,52989,52991],{"class":222,"line":389},[220,52988,9002],{"class":226},[220,52990,353],{"class":264},[220,52992,8958],{"class":230},[220,52994,52995,52997,52999],{"class":222,"line":399},[220,52996,16772],{"class":226},[220,52998,353],{"class":264},[220,53000,53001],{"class":230},"\"0.32\"\n",[220,53003,53004],{"class":222,"line":644},[220,53005,1234],{"class":264},[220,53007,53008,53010,53012],{"class":222,"line":650},[220,53009,402],{"class":264},[220,53011,347],{"class":346},[220,53013,359],{"class":264},[212,53015,53017],{"className":409,"code":53016,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53018,53019,53027,53033,53041,53054,53058],{"__ignoreMap":178},[220,53020,53021,53023,53025],{"class":222,"line":223},[220,53022,343],{"class":264},[220,53024,347],{"class":420},[220,53026,359],{"class":264},[220,53028,53029,53031],{"class":222,"line":179},[220,53030,364],{"class":264},[220,53032,52984],{"class":420},[220,53034,53035,53037,53039],{"class":222,"line":389},[220,53036,9002],{"class":226},[220,53038,353],{"class":260},[220,53040,8958],{"class":230},[220,53042,53043,53045,53047,53049,53052],{"class":222,"line":399},[220,53044,9012],{"class":226},[220,53046,353],{"class":260},[220,53048,743],{"class":264},[220,53050,53051],{"class":420},"0.32",[220,53053,749],{"class":264},[220,53055,53056],{"class":222,"line":644},[220,53057,1234],{"class":264},[220,53059,53060,53062,53064],{"class":222,"line":650},[220,53061,402],{"class":264},[220,53063,347],{"class":420},[220,53065,359],{"class":264},[212,53067,53068],{"className":2844,"code":53016,"language":2846,"meta":178,"style":178},[99,53069,53070,53078,53084,53092,53102,53106],{"__ignoreMap":178},[220,53071,53072,53074,53076],{"class":222,"line":223},[220,53073,343],{"class":264},[220,53075,347],{"class":420},[220,53077,359],{"class":264},[220,53079,53080,53082],{"class":222,"line":179},[220,53081,364],{"class":264},[220,53083,52984],{"class":420},[220,53085,53086,53088,53090],{"class":222,"line":389},[220,53087,9002],{"class":226},[220,53089,353],{"class":264},[220,53091,8958],{"class":230},[220,53093,53094,53096,53098,53100],{"class":222,"line":399},[220,53095,9012],{"class":226},[220,53097,29241],{"class":264},[220,53099,53051],{"class":420},[220,53101,749],{"class":264},[220,53103,53104],{"class":222,"line":644},[220,53105,1234],{"class":264},[220,53107,53108,53110,53112],{"class":222,"line":650},[220,53109,402],{"class":264},[220,53111,347],{"class":420},[220,53113,359],{"class":264},[212,53115,53116],{"className":468,"code":53016,"language":469,"meta":178,"style":178},[99,53117,53118,53126,53132,53140,53152,53156],{"__ignoreMap":178},[220,53119,53120,53122,53124],{"class":222,"line":223},[220,53121,343],{"class":264},[220,53123,347],{"class":420},[220,53125,359],{"class":264},[220,53127,53128,53130],{"class":222,"line":179},[220,53129,364],{"class":264},[220,53131,52984],{"class":420},[220,53133,53134,53136,53138],{"class":222,"line":389},[220,53135,9002],{"class":226},[220,53137,353],{"class":260},[220,53139,8958],{"class":230},[220,53141,53142,53144,53146,53148,53150],{"class":222,"line":399},[220,53143,9012],{"class":226},[220,53145,353],{"class":260},[220,53147,743],{"class":264},[220,53149,53051],{"class":420},[220,53151,749],{"class":264},[220,53153,53154],{"class":222,"line":644},[220,53155,1234],{"class":264},[220,53157,53158,53160,53162],{"class":222,"line":650},[220,53159,402],{"class":264},[220,53161,347],{"class":420},[220,53163,359],{"class":264},[212,53165,53167],{"className":251,"code":53166,"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,53168,53169,53179,53183,53197,53201,53218,53222],{"__ignoreMap":178},[220,53170,53171,53173,53175,53177],{"class":222,"line":223},[220,53172,261],{"class":260},[220,53174,10879],{"class":264},[220,53176,268],{"class":260},[220,53178,4007],{"class":230},[220,53180,53181],{"class":222,"line":179},[220,53182,647],{"emptyLinePlaceholder":194},[220,53184,53185,53187,53189,53191,53193,53195],{"class":222,"line":389},[220,53186,1735],{"class":260},[220,53188,1738],{"class":420},[220,53190,1741],{"class":260},[220,53192,1744],{"class":260},[220,53194,1747],{"class":226},[220,53196,1750],{"class":264},[220,53198,53199],{"class":222,"line":399},[220,53200,1765],{"class":264},[220,53202,53203,53205,53208,53210,53212,53214,53216],{"class":222,"line":644},[220,53204,1770],{"class":264},[220,53206,53207],{"class":230},"'Heart'",[220,53209,1776],{"class":264},[220,53211,9536],{"class":230},[220,53213,5932],{"class":264},[220,53215,53051],{"class":420},[220,53217,1782],{"class":264},[220,53219,53220],{"class":222,"line":650},[220,53221,1787],{"class":264},[220,53223,53224],{"class":222,"line":656},[220,53225,1792],{"class":264},[1504,53227,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53229},[53230,53231],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":52945,"description":52953},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":53238,"title":53239,"body":53240,"category":35939,"componentType":25247,"description":53437,"extension":191,"meta":53438,"navigation":194,"path":53439,"requiresChild":31900,"seo":53440,"stem":53441,"__hash__":53442},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":53241,"toc":53433},[53242,53245,53253,53255,53257,53260,53262,53431],[11,53243,53239],{"id":53244},"heatmap",[15,53246,53247,53248,8855],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,53249,53252],{"href":53250,"rel":53251},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31281,53254],{"component":53239},[23,53256,31285],{"id":25903},[31287,53258],{":props":53259},"[{\"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,53261,31293],{"id":31292},[246,53263,53264,53293,53321,53349,53377],{":tabs":1557},[212,53265,53267],{"className":334,"code":53266,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,53268,53269,53277,53285],{"__ignoreMap":178},[220,53270,53271,53273,53275],{"class":222,"line":223},[220,53272,343],{"class":264},[220,53274,347],{"class":346},[220,53276,359],{"class":264},[220,53278,53279,53281,53283],{"class":222,"line":179},[220,53280,364],{"class":264},[220,53282,53239],{"class":346},[220,53284,386],{"class":264},[220,53286,53287,53289,53291],{"class":222,"line":389},[220,53288,402],{"class":264},[220,53290,347],{"class":346},[220,53292,359],{"class":264},[212,53294,53295],{"className":409,"code":53266,"language":411,"meta":178,"style":178},[99,53296,53297,53305,53313],{"__ignoreMap":178},[220,53298,53299,53301,53303],{"class":222,"line":223},[220,53300,343],{"class":264},[220,53302,347],{"class":420},[220,53304,359],{"class":264},[220,53306,53307,53309,53311],{"class":222,"line":179},[220,53308,364],{"class":264},[220,53310,53239],{"class":420},[220,53312,386],{"class":264},[220,53314,53315,53317,53319],{"class":222,"line":389},[220,53316,402],{"class":264},[220,53318,347],{"class":420},[220,53320,359],{"class":264},[212,53322,53323],{"className":2844,"code":53266,"language":2846,"meta":178,"style":178},[99,53324,53325,53333,53341],{"__ignoreMap":178},[220,53326,53327,53329,53331],{"class":222,"line":223},[220,53328,343],{"class":264},[220,53330,347],{"class":420},[220,53332,359],{"class":264},[220,53334,53335,53337,53339],{"class":222,"line":179},[220,53336,364],{"class":264},[220,53338,53239],{"class":420},[220,53340,386],{"class":264},[220,53342,53343,53345,53347],{"class":222,"line":389},[220,53344,402],{"class":264},[220,53346,347],{"class":420},[220,53348,359],{"class":264},[212,53350,53351],{"className":468,"code":53266,"language":469,"meta":178,"style":178},[99,53352,53353,53361,53369],{"__ignoreMap":178},[220,53354,53355,53357,53359],{"class":222,"line":223},[220,53356,343],{"class":264},[220,53358,347],{"class":420},[220,53360,359],{"class":264},[220,53362,53363,53365,53367],{"class":222,"line":179},[220,53364,364],{"class":264},[220,53366,53239],{"class":420},[220,53368,386],{"class":264},[220,53370,53371,53373,53375],{"class":222,"line":389},[220,53372,402],{"class":264},[220,53374,347],{"class":420},[220,53376,359],{"class":264},[212,53378,53380],{"className":251,"code":53379,"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,53381,53382,53392,53396,53410,53414,53423,53427],{"__ignoreMap":178},[220,53383,53384,53386,53388,53390],{"class":222,"line":223},[220,53385,261],{"class":260},[220,53387,10879],{"class":264},[220,53389,268],{"class":260},[220,53391,4007],{"class":230},[220,53393,53394],{"class":222,"line":179},[220,53395,647],{"emptyLinePlaceholder":194},[220,53397,53398,53400,53402,53404,53406,53408],{"class":222,"line":389},[220,53399,1735],{"class":260},[220,53401,1738],{"class":420},[220,53403,1741],{"class":260},[220,53405,1744],{"class":260},[220,53407,1747],{"class":226},[220,53409,1750],{"class":264},[220,53411,53412],{"class":222,"line":399},[220,53413,1765],{"class":264},[220,53415,53416,53418,53421],{"class":222,"line":644},[220,53417,1770],{"class":264},[220,53419,53420],{"class":230},"'Heatmap'",[220,53422,2465],{"class":264},[220,53424,53425],{"class":222,"line":650},[220,53426,1787],{"class":264},[220,53428,53429],{"class":222,"line":656},[220,53430,1792],{"class":264},[1504,53432,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":53434},[53435,53436],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":53239,"description":53437},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":53444,"title":53445,"body":53446,"category":32433,"componentType":25247,"description":53453,"extension":191,"meta":53638,"navigation":194,"path":53639,"requiresChild":31900,"seo":53640,"stem":53641,"__hash__":53642},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":53447,"toc":53634},[53448,53451,53454,53456,53458,53461,53463,53632],[11,53449,53445],{"id":53450},"hexgrid",[15,53452,53453],{},"Honeycomb hexagonal grid pattern",[31281,53455],{"component":53445},[23,53457,31285],{"id":25903},[31287,53459],{":props":53460},"[{\"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,53462,31293],{"id":31292},[246,53464,53465,53494,53522,53550,53578],{":tabs":1557},[212,53466,53468],{"className":334,"code":53467,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,53469,53470,53478,53486],{"__ignoreMap":178},[220,53471,53472,53474,53476],{"class":222,"line":223},[220,53473,343],{"class":264},[220,53475,347],{"class":346},[220,53477,359],{"class":264},[220,53479,53480,53482,53484],{"class":222,"line":179},[220,53481,364],{"class":264},[220,53483,53445],{"class":346},[220,53485,386],{"class":264},[220,53487,53488,53490,53492],{"class":222,"line":389},[220,53489,402],{"class":264},[220,53491,347],{"class":346},[220,53493,359],{"class":264},[212,53495,53496],{"className":409,"code":53467,"language":411,"meta":178,"style":178},[99,53497,53498,53506,53514],{"__ignoreMap":178},[220,53499,53500,53502,53504],{"class":222,"line":223},[220,53501,343],{"class":264},[220,53503,347],{"class":420},[220,53505,359],{"class":264},[220,53507,53508,53510,53512],{"class":222,"line":179},[220,53509,364],{"class":264},[220,53511,53445],{"class":420},[220,53513,386],{"class":264},[220,53515,53516,53518,53520],{"class":222,"line":389},[220,53517,402],{"class":264},[220,53519,347],{"class":420},[220,53521,359],{"class":264},[212,53523,53524],{"className":2844,"code":53467,"language":2846,"meta":178,"style":178},[99,53525,53526,53534,53542],{"__ignoreMap":178},[220,53527,53528,53530,53532],{"class":222,"line":223},[220,53529,343],{"class":264},[220,53531,347],{"class":420},[220,53533,359],{"class":264},[220,53535,53536,53538,53540],{"class":222,"line":179},[220,53537,364],{"class":264},[220,53539,53445],{"class":420},[220,53541,386],{"class":264},[220,53543,53544,53546,53548],{"class":222,"line":389},[220,53545,402],{"class":264},[220,53547,347],{"class":420},[220,53549,359],{"class":264},[212,53551,53552],{"className":468,"code":53467,"language":469,"meta":178,"style":178},[99,53553,53554,53562,53570],{"__ignoreMap":178},[220,53555,53556,53558,53560],{"class":222,"line":223},[220,53557,343],{"class":264},[220,53559,347],{"class":420},[220,53561,359],{"class":264},[220,53563,53564,53566,53568],{"class":222,"line":179},[220,53565,364],{"class":264},[220,53567,53445],{"class":420},[220,53569,386],{"class":264},[220,53571,53572,53574,53576],{"class":222,"line":389},[220,53573,402],{"class":264},[220,53575,347],{"class":420},[220,53577,359],{"class":264},[212,53579,53581],{"className":251,"code":53580,"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,53582,53583,53593,53597,53611,53615,53624,53628],{"__ignoreMap":178},[220,53584,53585,53587,53589,53591],{"class":222,"line":223},[220,53586,261],{"class":260},[220,53588,10879],{"class":264},[220,53590,268],{"class":260},[220,53592,4007],{"class":230},[220,53594,53595],{"class":222,"line":179},[220,53596,647],{"emptyLinePlaceholder":194},[220,53598,53599,53601,53603,53605,53607,53609],{"class":222,"line":389},[220,53600,1735],{"class":260},[220,53602,1738],{"class":420},[220,53604,1741],{"class":260},[220,53606,1744],{"class":260},[220,53608,1747],{"class":226},[220,53610,1750],{"class":264},[220,53612,53613],{"class":222,"line":399},[220,53614,1765],{"class":264},[220,53616,53617,53619,53622],{"class":222,"line":644},[220,53618,1770],{"class":264},[220,53620,53621],{"class":230},"'HexGrid'",[220,53623,2465],{"class":264},[220,53625,53626],{"class":222,"line":650},[220,53627,1787],{"class":264},[220,53629,53630],{"class":222,"line":656},[220,53631,1792],{"class":264},[1504,53633,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":53635},[53636,53637],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":53445,"description":53453},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":53644,"title":53645,"body":53646,"category":35939,"componentType":25247,"description":53653,"extension":191,"meta":53885,"navigation":194,"path":53886,"requiresChild":31900,"seo":53887,"stem":53888,"__hash__":53889},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":53647,"toc":53881},[53648,53651,53654,53656,53658,53661,53663,53879],[11,53649,53645],{"id":53650},"hologram",[15,53652,53653],{},"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",[31281,53655],{"component":53645},[23,53657,31285],{"id":25903},[31287,53659],{":props":53660},"[{\"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,53662,31293],{"id":31292},[246,53664,53665,53706,53744,53782,53820],{":tabs":1557},[212,53666,53668],{"className":334,"code":53667,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,53669,53670,53678,53685,53694,53698],{"__ignoreMap":178},[220,53671,53672,53674,53676],{"class":222,"line":223},[220,53673,343],{"class":264},[220,53675,347],{"class":346},[220,53677,359],{"class":264},[220,53679,53680,53682],{"class":222,"line":179},[220,53681,364],{"class":264},[220,53683,53684],{"class":346},"Hologram\n",[220,53686,53687,53689,53691],{"class":222,"line":389},[220,53688,9002],{"class":226},[220,53690,353],{"class":264},[220,53692,53693],{"class":230},"\"#5ec8ff\"\n",[220,53695,53696],{"class":222,"line":399},[220,53697,1234],{"class":264},[220,53699,53700,53702,53704],{"class":222,"line":644},[220,53701,402],{"class":264},[220,53703,347],{"class":346},[220,53705,359],{"class":264},[212,53707,53708],{"className":409,"code":53667,"language":411,"meta":178,"style":178},[99,53709,53710,53718,53724,53732,53736],{"__ignoreMap":178},[220,53711,53712,53714,53716],{"class":222,"line":223},[220,53713,343],{"class":264},[220,53715,347],{"class":420},[220,53717,359],{"class":264},[220,53719,53720,53722],{"class":222,"line":179},[220,53721,364],{"class":264},[220,53723,53684],{"class":420},[220,53725,53726,53728,53730],{"class":222,"line":389},[220,53727,9002],{"class":226},[220,53729,353],{"class":260},[220,53731,53693],{"class":230},[220,53733,53734],{"class":222,"line":399},[220,53735,1234],{"class":264},[220,53737,53738,53740,53742],{"class":222,"line":644},[220,53739,402],{"class":264},[220,53741,347],{"class":420},[220,53743,359],{"class":264},[212,53745,53746],{"className":2844,"code":53667,"language":2846,"meta":178,"style":178},[99,53747,53748,53756,53762,53770,53774],{"__ignoreMap":178},[220,53749,53750,53752,53754],{"class":222,"line":223},[220,53751,343],{"class":264},[220,53753,347],{"class":420},[220,53755,359],{"class":264},[220,53757,53758,53760],{"class":222,"line":179},[220,53759,364],{"class":264},[220,53761,53684],{"class":420},[220,53763,53764,53766,53768],{"class":222,"line":389},[220,53765,9002],{"class":226},[220,53767,353],{"class":264},[220,53769,53693],{"class":230},[220,53771,53772],{"class":222,"line":399},[220,53773,1234],{"class":264},[220,53775,53776,53778,53780],{"class":222,"line":644},[220,53777,402],{"class":264},[220,53779,347],{"class":420},[220,53781,359],{"class":264},[212,53783,53784],{"className":468,"code":53667,"language":469,"meta":178,"style":178},[99,53785,53786,53794,53800,53808,53812],{"__ignoreMap":178},[220,53787,53788,53790,53792],{"class":222,"line":223},[220,53789,343],{"class":264},[220,53791,347],{"class":420},[220,53793,359],{"class":264},[220,53795,53796,53798],{"class":222,"line":179},[220,53797,364],{"class":264},[220,53799,53684],{"class":420},[220,53801,53802,53804,53806],{"class":222,"line":389},[220,53803,9002],{"class":226},[220,53805,353],{"class":260},[220,53807,53693],{"class":230},[220,53809,53810],{"class":222,"line":399},[220,53811,1234],{"class":264},[220,53813,53814,53816,53818],{"class":222,"line":644},[220,53815,402],{"class":264},[220,53817,347],{"class":420},[220,53819,359],{"class":264},[212,53821,53823],{"className":251,"code":53822,"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,53824,53825,53835,53839,53853,53857,53871,53875],{"__ignoreMap":178},[220,53826,53827,53829,53831,53833],{"class":222,"line":223},[220,53828,261],{"class":260},[220,53830,10879],{"class":264},[220,53832,268],{"class":260},[220,53834,4007],{"class":230},[220,53836,53837],{"class":222,"line":179},[220,53838,647],{"emptyLinePlaceholder":194},[220,53840,53841,53843,53845,53847,53849,53851],{"class":222,"line":389},[220,53842,1735],{"class":260},[220,53844,1738],{"class":420},[220,53846,1741],{"class":260},[220,53848,1744],{"class":260},[220,53850,1747],{"class":226},[220,53852,1750],{"class":264},[220,53854,53855],{"class":222,"line":399},[220,53856,1765],{"class":264},[220,53858,53859,53861,53864,53866,53869],{"class":222,"line":644},[220,53860,1770],{"class":264},[220,53862,53863],{"class":230},"'Hologram'",[220,53865,1776],{"class":264},[220,53867,53868],{"class":230},"'#5ec8ff'",[220,53870,1782],{"class":264},[220,53872,53873],{"class":222,"line":650},[220,53874,1787],{"class":264},[220,53876,53877],{"class":222,"line":656},[220,53878,1792],{"class":264},[1504,53880,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53882},[53883,53884],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":53645,"description":53653},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":53891,"title":53892,"body":53893,"category":35939,"componentType":25247,"description":53900,"extension":191,"meta":54085,"navigation":194,"path":54086,"requiresChild":31900,"seo":54087,"stem":54088,"__hash__":54089},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":53894,"toc":54081},[53895,53898,53901,53903,53905,53908,53910,54079],[11,53896,53892],{"id":53897},"holographic",[15,53899,53900],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31281,53902],{"component":53892},[23,53904,31285],{"id":25903},[31287,53906],{":props":53907},"[{\"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,53909,31293],{"id":31292},[246,53911,53912,53941,53969,53997,54025],{":tabs":1557},[212,53913,53915],{"className":334,"code":53914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,53916,53917,53925,53933],{"__ignoreMap":178},[220,53918,53919,53921,53923],{"class":222,"line":223},[220,53920,343],{"class":264},[220,53922,347],{"class":346},[220,53924,359],{"class":264},[220,53926,53927,53929,53931],{"class":222,"line":179},[220,53928,364],{"class":264},[220,53930,53892],{"class":346},[220,53932,386],{"class":264},[220,53934,53935,53937,53939],{"class":222,"line":389},[220,53936,402],{"class":264},[220,53938,347],{"class":346},[220,53940,359],{"class":264},[212,53942,53943],{"className":409,"code":53914,"language":411,"meta":178,"style":178},[99,53944,53945,53953,53961],{"__ignoreMap":178},[220,53946,53947,53949,53951],{"class":222,"line":223},[220,53948,343],{"class":264},[220,53950,347],{"class":420},[220,53952,359],{"class":264},[220,53954,53955,53957,53959],{"class":222,"line":179},[220,53956,364],{"class":264},[220,53958,53892],{"class":420},[220,53960,386],{"class":264},[220,53962,53963,53965,53967],{"class":222,"line":389},[220,53964,402],{"class":264},[220,53966,347],{"class":420},[220,53968,359],{"class":264},[212,53970,53971],{"className":2844,"code":53914,"language":2846,"meta":178,"style":178},[99,53972,53973,53981,53989],{"__ignoreMap":178},[220,53974,53975,53977,53979],{"class":222,"line":223},[220,53976,343],{"class":264},[220,53978,347],{"class":420},[220,53980,359],{"class":264},[220,53982,53983,53985,53987],{"class":222,"line":179},[220,53984,364],{"class":264},[220,53986,53892],{"class":420},[220,53988,386],{"class":264},[220,53990,53991,53993,53995],{"class":222,"line":389},[220,53992,402],{"class":264},[220,53994,347],{"class":420},[220,53996,359],{"class":264},[212,53998,53999],{"className":468,"code":53914,"language":469,"meta":178,"style":178},[99,54000,54001,54009,54017],{"__ignoreMap":178},[220,54002,54003,54005,54007],{"class":222,"line":223},[220,54004,343],{"class":264},[220,54006,347],{"class":420},[220,54008,359],{"class":264},[220,54010,54011,54013,54015],{"class":222,"line":179},[220,54012,364],{"class":264},[220,54014,53892],{"class":420},[220,54016,386],{"class":264},[220,54018,54019,54021,54023],{"class":222,"line":389},[220,54020,402],{"class":264},[220,54022,347],{"class":420},[220,54024,359],{"class":264},[212,54026,54028],{"className":251,"code":54027,"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,54029,54030,54040,54044,54058,54062,54071,54075],{"__ignoreMap":178},[220,54031,54032,54034,54036,54038],{"class":222,"line":223},[220,54033,261],{"class":260},[220,54035,10879],{"class":264},[220,54037,268],{"class":260},[220,54039,4007],{"class":230},[220,54041,54042],{"class":222,"line":179},[220,54043,647],{"emptyLinePlaceholder":194},[220,54045,54046,54048,54050,54052,54054,54056],{"class":222,"line":389},[220,54047,1735],{"class":260},[220,54049,1738],{"class":420},[220,54051,1741],{"class":260},[220,54053,1744],{"class":260},[220,54055,1747],{"class":226},[220,54057,1750],{"class":264},[220,54059,54060],{"class":222,"line":399},[220,54061,1765],{"class":264},[220,54063,54064,54066,54069],{"class":222,"line":644},[220,54065,1770],{"class":264},[220,54067,54068],{"class":230},"'Holographic'",[220,54070,2465],{"class":264},[220,54072,54073],{"class":222,"line":650},[220,54074,1787],{"class":264},[220,54076,54077],{"class":222,"line":656},[220,54078,1792],{"class":264},[1504,54080,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":54082},[54083,54084],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":53892,"description":53900},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54091,"title":54092,"body":54093,"category":35738,"componentType":25253,"description":54100,"extension":191,"meta":54361,"navigation":194,"path":54362,"requiresChild":194,"seo":54363,"stem":54364,"__hash__":54365},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54094,"toc":54357},[54095,54098,54101,54103,54105,54108,54110,54355],[11,54096,54092],{"id":54097},"hueshift",[15,54099,54100],{},"Rotate hue around the color wheel",[31281,54102],{"component":54092},[23,54104,31285],{"id":25903},[31287,54106],{":props":54107},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54109,31293],{"id":31292},[246,54111,54112,54157,54201,54245,54289],{":tabs":1557},[212,54113,54115],{"className":334,"code":54114,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54116,54117,54125,54133,54141,54149],{"__ignoreMap":178},[220,54118,54119,54121,54123],{"class":222,"line":223},[220,54120,343],{"class":264},[220,54122,347],{"class":346},[220,54124,359],{"class":264},[220,54126,54127,54129,54131],{"class":222,"line":179},[220,54128,364],{"class":264},[220,54130,54092],{"class":346},[220,54132,359],{"class":264},[220,54134,54135,54137,54139],{"class":222,"line":389},[220,54136,2550],{"class":264},[220,54138,2553],{"class":346},[220,54140,386],{"class":264},[220,54142,54143,54145,54147],{"class":222,"line":399},[220,54144,2567],{"class":264},[220,54146,54092],{"class":346},[220,54148,359],{"class":264},[220,54150,54151,54153,54155],{"class":222,"line":644},[220,54152,402],{"class":264},[220,54154,347],{"class":346},[220,54156,359],{"class":264},[212,54158,54159],{"className":409,"code":54114,"language":411,"meta":178,"style":178},[99,54160,54161,54169,54177,54185,54193],{"__ignoreMap":178},[220,54162,54163,54165,54167],{"class":222,"line":223},[220,54164,343],{"class":264},[220,54166,347],{"class":420},[220,54168,359],{"class":264},[220,54170,54171,54173,54175],{"class":222,"line":179},[220,54172,364],{"class":264},[220,54174,54092],{"class":420},[220,54176,359],{"class":264},[220,54178,54179,54181,54183],{"class":222,"line":389},[220,54180,2550],{"class":264},[220,54182,2553],{"class":420},[220,54184,386],{"class":264},[220,54186,54187,54189,54191],{"class":222,"line":399},[220,54188,2567],{"class":264},[220,54190,54092],{"class":420},[220,54192,359],{"class":264},[220,54194,54195,54197,54199],{"class":222,"line":644},[220,54196,402],{"class":264},[220,54198,347],{"class":420},[220,54200,359],{"class":264},[212,54202,54203],{"className":2844,"code":54114,"language":2846,"meta":178,"style":178},[99,54204,54205,54213,54221,54229,54237],{"__ignoreMap":178},[220,54206,54207,54209,54211],{"class":222,"line":223},[220,54208,343],{"class":264},[220,54210,347],{"class":420},[220,54212,359],{"class":264},[220,54214,54215,54217,54219],{"class":222,"line":179},[220,54216,364],{"class":264},[220,54218,54092],{"class":420},[220,54220,359],{"class":264},[220,54222,54223,54225,54227],{"class":222,"line":389},[220,54224,2550],{"class":264},[220,54226,2553],{"class":420},[220,54228,386],{"class":264},[220,54230,54231,54233,54235],{"class":222,"line":399},[220,54232,2567],{"class":264},[220,54234,54092],{"class":420},[220,54236,359],{"class":264},[220,54238,54239,54241,54243],{"class":222,"line":644},[220,54240,402],{"class":264},[220,54242,347],{"class":420},[220,54244,359],{"class":264},[212,54246,54247],{"className":468,"code":54114,"language":469,"meta":178,"style":178},[99,54248,54249,54257,54265,54273,54281],{"__ignoreMap":178},[220,54250,54251,54253,54255],{"class":222,"line":223},[220,54252,343],{"class":264},[220,54254,347],{"class":420},[220,54256,359],{"class":264},[220,54258,54259,54261,54263],{"class":222,"line":179},[220,54260,364],{"class":264},[220,54262,54092],{"class":420},[220,54264,359],{"class":264},[220,54266,54267,54269,54271],{"class":222,"line":389},[220,54268,2550],{"class":264},[220,54270,2553],{"class":420},[220,54272,386],{"class":264},[220,54274,54275,54277,54279],{"class":222,"line":399},[220,54276,2567],{"class":264},[220,54278,54092],{"class":420},[220,54280,359],{"class":264},[220,54282,54283,54285,54287],{"class":222,"line":644},[220,54284,402],{"class":264},[220,54286,347],{"class":420},[220,54288,359],{"class":264},[212,54290,54292],{"className":251,"code":54291,"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,54293,54294,54304,54308,54322,54326,54335,54343,54347,54351],{"__ignoreMap":178},[220,54295,54296,54298,54300,54302],{"class":222,"line":223},[220,54297,261],{"class":260},[220,54299,10879],{"class":264},[220,54301,268],{"class":260},[220,54303,4007],{"class":230},[220,54305,54306],{"class":222,"line":179},[220,54307,647],{"emptyLinePlaceholder":194},[220,54309,54310,54312,54314,54316,54318,54320],{"class":222,"line":389},[220,54311,1735],{"class":260},[220,54313,1738],{"class":420},[220,54315,1741],{"class":260},[220,54317,1744],{"class":260},[220,54319,1747],{"class":226},[220,54321,1750],{"class":264},[220,54323,54324],{"class":222,"line":399},[220,54325,1765],{"class":264},[220,54327,54328,54330,54333],{"class":222,"line":644},[220,54329,1770],{"class":264},[220,54331,54332],{"class":230},"'HueShift'",[220,54334,6375],{"class":264},[220,54336,54337,54339,54341],{"class":222,"line":650},[220,54338,6380],{"class":264},[220,54340,3206],{"class":230},[220,54342,2465],{"class":264},[220,54344,54345],{"class":222,"line":656},[220,54346,6397],{"class":264},[220,54348,54349],{"class":222,"line":673},[220,54350,1787],{"class":264},[220,54352,54353],{"class":222,"line":682},[220,54354,1792],{"class":264},[1504,54356,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":54358},[54359,54360],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54092,"description":54100},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":54367,"title":54368,"body":54369,"category":32433,"componentType":25247,"description":54376,"extension":191,"meta":54561,"navigation":194,"path":54562,"requiresChild":31900,"seo":54563,"stem":54564,"__hash__":54565},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":54370,"toc":54557},[54371,54374,54377,54379,54381,54384,54386,54555],[11,54372,54368],{"id":54373},"imagetexture",[15,54375,54376],{},"Display an image with customizable object-fit modes",[31281,54378],{"component":54368},[23,54380,31285],{"id":25903},[31287,54382],{":props":54383},"[{\"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,54385,31293],{"id":31292},[246,54387,54388,54417,54445,54473,54501],{":tabs":1557},[212,54389,54391],{"className":334,"code":54390,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,54392,54393,54401,54409],{"__ignoreMap":178},[220,54394,54395,54397,54399],{"class":222,"line":223},[220,54396,343],{"class":264},[220,54398,347],{"class":346},[220,54400,359],{"class":264},[220,54402,54403,54405,54407],{"class":222,"line":179},[220,54404,364],{"class":264},[220,54406,54368],{"class":346},[220,54408,386],{"class":264},[220,54410,54411,54413,54415],{"class":222,"line":389},[220,54412,402],{"class":264},[220,54414,347],{"class":346},[220,54416,359],{"class":264},[212,54418,54419],{"className":409,"code":54390,"language":411,"meta":178,"style":178},[99,54420,54421,54429,54437],{"__ignoreMap":178},[220,54422,54423,54425,54427],{"class":222,"line":223},[220,54424,343],{"class":264},[220,54426,347],{"class":420},[220,54428,359],{"class":264},[220,54430,54431,54433,54435],{"class":222,"line":179},[220,54432,364],{"class":264},[220,54434,54368],{"class":420},[220,54436,386],{"class":264},[220,54438,54439,54441,54443],{"class":222,"line":389},[220,54440,402],{"class":264},[220,54442,347],{"class":420},[220,54444,359],{"class":264},[212,54446,54447],{"className":2844,"code":54390,"language":2846,"meta":178,"style":178},[99,54448,54449,54457,54465],{"__ignoreMap":178},[220,54450,54451,54453,54455],{"class":222,"line":223},[220,54452,343],{"class":264},[220,54454,347],{"class":420},[220,54456,359],{"class":264},[220,54458,54459,54461,54463],{"class":222,"line":179},[220,54460,364],{"class":264},[220,54462,54368],{"class":420},[220,54464,386],{"class":264},[220,54466,54467,54469,54471],{"class":222,"line":389},[220,54468,402],{"class":264},[220,54470,347],{"class":420},[220,54472,359],{"class":264},[212,54474,54475],{"className":468,"code":54390,"language":469,"meta":178,"style":178},[99,54476,54477,54485,54493],{"__ignoreMap":178},[220,54478,54479,54481,54483],{"class":222,"line":223},[220,54480,343],{"class":264},[220,54482,347],{"class":420},[220,54484,359],{"class":264},[220,54486,54487,54489,54491],{"class":222,"line":179},[220,54488,364],{"class":264},[220,54490,54368],{"class":420},[220,54492,386],{"class":264},[220,54494,54495,54497,54499],{"class":222,"line":389},[220,54496,402],{"class":264},[220,54498,347],{"class":420},[220,54500,359],{"class":264},[212,54502,54504],{"className":251,"code":54503,"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,54505,54506,54516,54520,54534,54538,54547,54551],{"__ignoreMap":178},[220,54507,54508,54510,54512,54514],{"class":222,"line":223},[220,54509,261],{"class":260},[220,54511,10879],{"class":264},[220,54513,268],{"class":260},[220,54515,4007],{"class":230},[220,54517,54518],{"class":222,"line":179},[220,54519,647],{"emptyLinePlaceholder":194},[220,54521,54522,54524,54526,54528,54530,54532],{"class":222,"line":389},[220,54523,1735],{"class":260},[220,54525,1738],{"class":420},[220,54527,1741],{"class":260},[220,54529,1744],{"class":260},[220,54531,1747],{"class":226},[220,54533,1750],{"class":264},[220,54535,54536],{"class":222,"line":399},[220,54537,1765],{"class":264},[220,54539,54540,54542,54545],{"class":222,"line":644},[220,54541,1770],{"class":264},[220,54543,54544],{"class":230},"'ImageTexture'",[220,54546,2465],{"class":264},[220,54548,54549],{"class":222,"line":650},[220,54550,1787],{"class":264},[220,54552,54553],{"class":222,"line":656},[220,54554,1792],{"class":264},[1504,54556,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":54558},[54559,54560],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":54368,"description":54376},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":54567,"title":54568,"body":54569,"category":34929,"componentType":25247,"description":54576,"extension":191,"meta":54855,"navigation":194,"path":54856,"requiresChild":31900,"seo":54857,"stem":54858,"__hash__":54859},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":54570,"toc":54851},[54571,54574,54577,54579,54581,54584,54586,54849],[11,54572,54568],{"id":54573},"inkflow",[15,54575,54576],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31281,54578],{"component":54568},[23,54580,31285],{"id":25903},[31287,54582],{":props":54583},"[{\"name\":\"colorMode\",\"type\":\"\\\"rainbow\\\" | \\\"single\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"How the brush colour is chosen: an ever-cycling rainbow, a single fixed colour, or a custom three-colour cycle\"},{\"name\":\"colorSpeed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How quickly the brush cycles through the rainbow or the custom colours as you paint\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ff2d7e\",\"description\":\"Brush colour used when Color Mode is Single\"},{\"name\":\"color1\",\"type\":\"string\",\"default\":\"#4338ff\",\"description\":\"First colour of the custom brush cycle\"},{\"name\":\"color2\",\"type\":\"string\",\"default\":\"#ff2d7e\",\"description\":\"Second colour of the custom brush cycle\"},{\"name\":\"color3\",\"type\":\"string\",\"default\":\"#19e3ff\",\"description\":\"Third colour of the custom brush cycle\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Colour space the custom colours blend through as the brush cycles between them\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Size of the ink splat painted under the cursor\"},{\"name\":\"force\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How hard the cursor's motion pushes the fluid — higher throws faster, more violent jets and curls\"},{\"name\":\"curl\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vorticity confinement — swirl energy that spins the ink into persistent eddies and curls\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How fast the ink fades away — low values leave long, lingering trails\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the fluid keeps flowing after a stroke — high momentum lets the motion carry on and on\"}]",[23,54585,31293],{"id":31292},[246,54587,54588,54637,54688,54736,54786],{":tabs":1557},[212,54589,54591],{"className":334,"code":54590,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,54592,54593,54601,54608,54617,54625,54629],{"__ignoreMap":178},[220,54594,54595,54597,54599],{"class":222,"line":223},[220,54596,343],{"class":264},[220,54598,347],{"class":346},[220,54600,359],{"class":264},[220,54602,54603,54605],{"class":222,"line":179},[220,54604,364],{"class":264},[220,54606,54607],{"class":346},"InkFlow\n",[220,54609,54610,54612,54614],{"class":222,"line":389},[220,54611,9002],{"class":226},[220,54613,353],{"class":264},[220,54615,54616],{"class":230},"\"#ff2d7e\"\n",[220,54618,54619,54621,54623],{"class":222,"line":399},[220,54620,16772],{"class":226},[220,54622,353],{"class":264},[220,54624,40468],{"class":230},[220,54626,54627],{"class":222,"line":644},[220,54628,1234],{"class":264},[220,54630,54631,54633,54635],{"class":222,"line":650},[220,54632,402],{"class":264},[220,54634,347],{"class":346},[220,54636,359],{"class":264},[212,54638,54640],{"className":409,"code":54639,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,54641,54642,54650,54656,54664,54676,54680],{"__ignoreMap":178},[220,54643,54644,54646,54648],{"class":222,"line":223},[220,54645,343],{"class":264},[220,54647,347],{"class":420},[220,54649,359],{"class":264},[220,54651,54652,54654],{"class":222,"line":179},[220,54653,364],{"class":264},[220,54655,54607],{"class":420},[220,54657,54658,54660,54662],{"class":222,"line":389},[220,54659,9002],{"class":226},[220,54661,353],{"class":260},[220,54663,54616],{"class":230},[220,54665,54666,54668,54670,54672,54674],{"class":222,"line":399},[220,54667,9012],{"class":226},[220,54669,353],{"class":260},[220,54671,743],{"class":264},[220,54673,21372],{"class":420},[220,54675,749],{"class":264},[220,54677,54678],{"class":222,"line":644},[220,54679,1234],{"class":264},[220,54681,54682,54684,54686],{"class":222,"line":650},[220,54683,402],{"class":264},[220,54685,347],{"class":420},[220,54687,359],{"class":264},[212,54689,54690],{"className":2844,"code":54639,"language":2846,"meta":178,"style":178},[99,54691,54692,54700,54706,54714,54724,54728],{"__ignoreMap":178},[220,54693,54694,54696,54698],{"class":222,"line":223},[220,54695,343],{"class":264},[220,54697,347],{"class":420},[220,54699,359],{"class":264},[220,54701,54702,54704],{"class":222,"line":179},[220,54703,364],{"class":264},[220,54705,54607],{"class":420},[220,54707,54708,54710,54712],{"class":222,"line":389},[220,54709,9002],{"class":226},[220,54711,353],{"class":264},[220,54713,54616],{"class":230},[220,54715,54716,54718,54720,54722],{"class":222,"line":399},[220,54717,9012],{"class":226},[220,54719,29241],{"class":264},[220,54721,21372],{"class":420},[220,54723,749],{"class":264},[220,54725,54726],{"class":222,"line":644},[220,54727,1234],{"class":264},[220,54729,54730,54732,54734],{"class":222,"line":650},[220,54731,402],{"class":264},[220,54733,347],{"class":420},[220,54735,359],{"class":264},[212,54737,54738],{"className":468,"code":54639,"language":469,"meta":178,"style":178},[99,54739,54740,54748,54754,54762,54774,54778],{"__ignoreMap":178},[220,54741,54742,54744,54746],{"class":222,"line":223},[220,54743,343],{"class":264},[220,54745,347],{"class":420},[220,54747,359],{"class":264},[220,54749,54750,54752],{"class":222,"line":179},[220,54751,364],{"class":264},[220,54753,54607],{"class":420},[220,54755,54756,54758,54760],{"class":222,"line":389},[220,54757,9002],{"class":226},[220,54759,353],{"class":260},[220,54761,54616],{"class":230},[220,54763,54764,54766,54768,54770,54772],{"class":222,"line":399},[220,54765,9012],{"class":226},[220,54767,353],{"class":260},[220,54769,743],{"class":264},[220,54771,21372],{"class":420},[220,54773,749],{"class":264},[220,54775,54776],{"class":222,"line":644},[220,54777,1234],{"class":264},[220,54779,54780,54782,54784],{"class":222,"line":650},[220,54781,402],{"class":264},[220,54783,347],{"class":420},[220,54785,359],{"class":264},[212,54787,54789],{"className":251,"code":54788,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'InkFlow', props: { color: '#ff2d7e', radius: 0.3 } }\n ]\n})\n",[99,54790,54791,54801,54805,54819,54823,54841,54845],{"__ignoreMap":178},[220,54792,54793,54795,54797,54799],{"class":222,"line":223},[220,54794,261],{"class":260},[220,54796,10879],{"class":264},[220,54798,268],{"class":260},[220,54800,4007],{"class":230},[220,54802,54803],{"class":222,"line":179},[220,54804,647],{"emptyLinePlaceholder":194},[220,54806,54807,54809,54811,54813,54815,54817],{"class":222,"line":389},[220,54808,1735],{"class":260},[220,54810,1738],{"class":420},[220,54812,1741],{"class":260},[220,54814,1744],{"class":260},[220,54816,1747],{"class":226},[220,54818,1750],{"class":264},[220,54820,54821],{"class":222,"line":399},[220,54822,1765],{"class":264},[220,54824,54825,54827,54830,54832,54835,54837,54839],{"class":222,"line":644},[220,54826,1770],{"class":264},[220,54828,54829],{"class":230},"'InkFlow'",[220,54831,1776],{"class":264},[220,54833,54834],{"class":230},"'#ff2d7e'",[220,54836,5932],{"class":264},[220,54838,21372],{"class":420},[220,54840,1782],{"class":264},[220,54842,54843],{"class":222,"line":650},[220,54844,1787],{"class":264},[220,54846,54847],{"class":222,"line":656},[220,54848,1792],{"class":264},[1504,54850,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54852},[54853,54854],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":54568,"description":54576},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":54861,"title":54862,"body":54863,"category":35738,"componentType":25253,"description":54870,"extension":191,"meta":55125,"navigation":194,"path":55126,"requiresChild":194,"seo":55127,"stem":55128,"__hash__":55129},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":54864,"toc":55122},[54865,54868,54871,54873,54875,55120],[11,54866,54862],{"id":54867},"invert",[15,54869,54870],{},"Invert RGB colors while preserving alpha",[31281,54872],{"component":54862},[23,54874,31293],{"id":31292},[246,54876,54877,54922,54966,55010,55054],{":tabs":1557},[212,54878,54880],{"className":334,"code":54879,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,54881,54882,54890,54898,54906,54914],{"__ignoreMap":178},[220,54883,54884,54886,54888],{"class":222,"line":223},[220,54885,343],{"class":264},[220,54887,347],{"class":346},[220,54889,359],{"class":264},[220,54891,54892,54894,54896],{"class":222,"line":179},[220,54893,364],{"class":264},[220,54895,54862],{"class":346},[220,54897,359],{"class":264},[220,54899,54900,54902,54904],{"class":222,"line":389},[220,54901,2550],{"class":264},[220,54903,2553],{"class":346},[220,54905,386],{"class":264},[220,54907,54908,54910,54912],{"class":222,"line":399},[220,54909,2567],{"class":264},[220,54911,54862],{"class":346},[220,54913,359],{"class":264},[220,54915,54916,54918,54920],{"class":222,"line":644},[220,54917,402],{"class":264},[220,54919,347],{"class":346},[220,54921,359],{"class":264},[212,54923,54924],{"className":409,"code":54879,"language":411,"meta":178,"style":178},[99,54925,54926,54934,54942,54950,54958],{"__ignoreMap":178},[220,54927,54928,54930,54932],{"class":222,"line":223},[220,54929,343],{"class":264},[220,54931,347],{"class":420},[220,54933,359],{"class":264},[220,54935,54936,54938,54940],{"class":222,"line":179},[220,54937,364],{"class":264},[220,54939,54862],{"class":420},[220,54941,359],{"class":264},[220,54943,54944,54946,54948],{"class":222,"line":389},[220,54945,2550],{"class":264},[220,54947,2553],{"class":420},[220,54949,386],{"class":264},[220,54951,54952,54954,54956],{"class":222,"line":399},[220,54953,2567],{"class":264},[220,54955,54862],{"class":420},[220,54957,359],{"class":264},[220,54959,54960,54962,54964],{"class":222,"line":644},[220,54961,402],{"class":264},[220,54963,347],{"class":420},[220,54965,359],{"class":264},[212,54967,54968],{"className":2844,"code":54879,"language":2846,"meta":178,"style":178},[99,54969,54970,54978,54986,54994,55002],{"__ignoreMap":178},[220,54971,54972,54974,54976],{"class":222,"line":223},[220,54973,343],{"class":264},[220,54975,347],{"class":420},[220,54977,359],{"class":264},[220,54979,54980,54982,54984],{"class":222,"line":179},[220,54981,364],{"class":264},[220,54983,54862],{"class":420},[220,54985,359],{"class":264},[220,54987,54988,54990,54992],{"class":222,"line":389},[220,54989,2550],{"class":264},[220,54991,2553],{"class":420},[220,54993,386],{"class":264},[220,54995,54996,54998,55000],{"class":222,"line":399},[220,54997,2567],{"class":264},[220,54999,54862],{"class":420},[220,55001,359],{"class":264},[220,55003,55004,55006,55008],{"class":222,"line":644},[220,55005,402],{"class":264},[220,55007,347],{"class":420},[220,55009,359],{"class":264},[212,55011,55012],{"className":468,"code":54879,"language":469,"meta":178,"style":178},[99,55013,55014,55022,55030,55038,55046],{"__ignoreMap":178},[220,55015,55016,55018,55020],{"class":222,"line":223},[220,55017,343],{"class":264},[220,55019,347],{"class":420},[220,55021,359],{"class":264},[220,55023,55024,55026,55028],{"class":222,"line":179},[220,55025,364],{"class":264},[220,55027,54862],{"class":420},[220,55029,359],{"class":264},[220,55031,55032,55034,55036],{"class":222,"line":389},[220,55033,2550],{"class":264},[220,55035,2553],{"class":420},[220,55037,386],{"class":264},[220,55039,55040,55042,55044],{"class":222,"line":399},[220,55041,2567],{"class":264},[220,55043,54862],{"class":420},[220,55045,359],{"class":264},[220,55047,55048,55050,55052],{"class":222,"line":644},[220,55049,402],{"class":264},[220,55051,347],{"class":420},[220,55053,359],{"class":264},[212,55055,55057],{"className":251,"code":55056,"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,55058,55059,55069,55073,55087,55091,55100,55108,55112,55116],{"__ignoreMap":178},[220,55060,55061,55063,55065,55067],{"class":222,"line":223},[220,55062,261],{"class":260},[220,55064,10879],{"class":264},[220,55066,268],{"class":260},[220,55068,4007],{"class":230},[220,55070,55071],{"class":222,"line":179},[220,55072,647],{"emptyLinePlaceholder":194},[220,55074,55075,55077,55079,55081,55083,55085],{"class":222,"line":389},[220,55076,1735],{"class":260},[220,55078,1738],{"class":420},[220,55080,1741],{"class":260},[220,55082,1744],{"class":260},[220,55084,1747],{"class":226},[220,55086,1750],{"class":264},[220,55088,55089],{"class":222,"line":399},[220,55090,1765],{"class":264},[220,55092,55093,55095,55098],{"class":222,"line":644},[220,55094,1770],{"class":264},[220,55096,55097],{"class":230},"'Invert'",[220,55099,6375],{"class":264},[220,55101,55102,55104,55106],{"class":222,"line":650},[220,55103,6380],{"class":264},[220,55105,3206],{"class":230},[220,55107,2465],{"class":264},[220,55109,55110],{"class":222,"line":656},[220,55111,6397],{"class":264},[220,55113,55114],{"class":222,"line":673},[220,55115,1787],{"class":264},[220,55117,55118],{"class":222,"line":682},[220,55119,1792],{"class":264},[1504,55121,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":55123},[55124],{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":54862,"description":54870},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55131,"title":55132,"body":55133,"category":33043,"componentType":25253,"description":55140,"extension":191,"meta":55401,"navigation":194,"path":55402,"requiresChild":194,"seo":55403,"stem":55404,"__hash__":55405},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55134,"toc":55397},[55135,55138,55141,55143,55145,55148,55150,55395],[11,55136,55132],{"id":55137},"iriswipe",[15,55139,55140],{},"Reveal through an expanding circle growing from a center point",[31281,55142],{"component":55132},[23,55144,31285],{"id":25903},[31287,55146],{":props":55147},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the iris has expanded (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the iris expands from\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the iris edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the outside inward instead\"}]",[23,55149,31293],{"id":31292},[246,55151,55152,55197,55241,55285,55329],{":tabs":1557},[212,55153,55155],{"className":334,"code":55154,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55156,55157,55165,55173,55181,55189],{"__ignoreMap":178},[220,55158,55159,55161,55163],{"class":222,"line":223},[220,55160,343],{"class":264},[220,55162,347],{"class":346},[220,55164,359],{"class":264},[220,55166,55167,55169,55171],{"class":222,"line":179},[220,55168,364],{"class":264},[220,55170,55132],{"class":346},[220,55172,359],{"class":264},[220,55174,55175,55177,55179],{"class":222,"line":389},[220,55176,2550],{"class":264},[220,55178,2553],{"class":346},[220,55180,386],{"class":264},[220,55182,55183,55185,55187],{"class":222,"line":399},[220,55184,2567],{"class":264},[220,55186,55132],{"class":346},[220,55188,359],{"class":264},[220,55190,55191,55193,55195],{"class":222,"line":644},[220,55192,402],{"class":264},[220,55194,347],{"class":346},[220,55196,359],{"class":264},[212,55198,55199],{"className":409,"code":55154,"language":411,"meta":178,"style":178},[99,55200,55201,55209,55217,55225,55233],{"__ignoreMap":178},[220,55202,55203,55205,55207],{"class":222,"line":223},[220,55204,343],{"class":264},[220,55206,347],{"class":420},[220,55208,359],{"class":264},[220,55210,55211,55213,55215],{"class":222,"line":179},[220,55212,364],{"class":264},[220,55214,55132],{"class":420},[220,55216,359],{"class":264},[220,55218,55219,55221,55223],{"class":222,"line":389},[220,55220,2550],{"class":264},[220,55222,2553],{"class":420},[220,55224,386],{"class":264},[220,55226,55227,55229,55231],{"class":222,"line":399},[220,55228,2567],{"class":264},[220,55230,55132],{"class":420},[220,55232,359],{"class":264},[220,55234,55235,55237,55239],{"class":222,"line":644},[220,55236,402],{"class":264},[220,55238,347],{"class":420},[220,55240,359],{"class":264},[212,55242,55243],{"className":2844,"code":55154,"language":2846,"meta":178,"style":178},[99,55244,55245,55253,55261,55269,55277],{"__ignoreMap":178},[220,55246,55247,55249,55251],{"class":222,"line":223},[220,55248,343],{"class":264},[220,55250,347],{"class":420},[220,55252,359],{"class":264},[220,55254,55255,55257,55259],{"class":222,"line":179},[220,55256,364],{"class":264},[220,55258,55132],{"class":420},[220,55260,359],{"class":264},[220,55262,55263,55265,55267],{"class":222,"line":389},[220,55264,2550],{"class":264},[220,55266,2553],{"class":420},[220,55268,386],{"class":264},[220,55270,55271,55273,55275],{"class":222,"line":399},[220,55272,2567],{"class":264},[220,55274,55132],{"class":420},[220,55276,359],{"class":264},[220,55278,55279,55281,55283],{"class":222,"line":644},[220,55280,402],{"class":264},[220,55282,347],{"class":420},[220,55284,359],{"class":264},[212,55286,55287],{"className":468,"code":55154,"language":469,"meta":178,"style":178},[99,55288,55289,55297,55305,55313,55321],{"__ignoreMap":178},[220,55290,55291,55293,55295],{"class":222,"line":223},[220,55292,343],{"class":264},[220,55294,347],{"class":420},[220,55296,359],{"class":264},[220,55298,55299,55301,55303],{"class":222,"line":179},[220,55300,364],{"class":264},[220,55302,55132],{"class":420},[220,55304,359],{"class":264},[220,55306,55307,55309,55311],{"class":222,"line":389},[220,55308,2550],{"class":264},[220,55310,2553],{"class":420},[220,55312,386],{"class":264},[220,55314,55315,55317,55319],{"class":222,"line":399},[220,55316,2567],{"class":264},[220,55318,55132],{"class":420},[220,55320,359],{"class":264},[220,55322,55323,55325,55327],{"class":222,"line":644},[220,55324,402],{"class":264},[220,55326,347],{"class":420},[220,55328,359],{"class":264},[212,55330,55332],{"className":251,"code":55331,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'IrisWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,55333,55334,55344,55348,55362,55366,55375,55383,55387,55391],{"__ignoreMap":178},[220,55335,55336,55338,55340,55342],{"class":222,"line":223},[220,55337,261],{"class":260},[220,55339,10879],{"class":264},[220,55341,268],{"class":260},[220,55343,4007],{"class":230},[220,55345,55346],{"class":222,"line":179},[220,55347,647],{"emptyLinePlaceholder":194},[220,55349,55350,55352,55354,55356,55358,55360],{"class":222,"line":389},[220,55351,1735],{"class":260},[220,55353,1738],{"class":420},[220,55355,1741],{"class":260},[220,55357,1744],{"class":260},[220,55359,1747],{"class":226},[220,55361,1750],{"class":264},[220,55363,55364],{"class":222,"line":399},[220,55365,1765],{"class":264},[220,55367,55368,55370,55373],{"class":222,"line":644},[220,55369,1770],{"class":264},[220,55371,55372],{"class":230},"'IrisWipe'",[220,55374,6375],{"class":264},[220,55376,55377,55379,55381],{"class":222,"line":650},[220,55378,6380],{"class":264},[220,55380,3206],{"class":230},[220,55382,2465],{"class":264},[220,55384,55385],{"class":222,"line":656},[220,55386,6397],{"class":264},[220,55388,55389],{"class":222,"line":673},[220,55390,1787],{"class":264},[220,55392,55393],{"class":222,"line":682},[220,55394,1792],{"class":264},[1504,55396,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":55398},[55399,55400],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55132,"description":55140},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":55407,"title":55408,"body":55409,"category":32433,"componentType":25247,"description":55416,"extension":191,"meta":55601,"navigation":194,"path":55602,"requiresChild":31900,"seo":55603,"stem":55604,"__hash__":55605},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":55410,"toc":55597},[55411,55414,55417,55419,55421,55424,55426,55595],[11,55412,55408],{"id":55413},"isometriccubes",[15,55415,55416],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31281,55418],{"component":55408},[23,55420,31285],{"id":25903},[31287,55422],{":props":55423},"[{\"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,55425,31293],{"id":31292},[246,55427,55428,55457,55485,55513,55541],{":tabs":1557},[212,55429,55431],{"className":334,"code":55430,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,55432,55433,55441,55449],{"__ignoreMap":178},[220,55434,55435,55437,55439],{"class":222,"line":223},[220,55436,343],{"class":264},[220,55438,347],{"class":346},[220,55440,359],{"class":264},[220,55442,55443,55445,55447],{"class":222,"line":179},[220,55444,364],{"class":264},[220,55446,55408],{"class":346},[220,55448,386],{"class":264},[220,55450,55451,55453,55455],{"class":222,"line":389},[220,55452,402],{"class":264},[220,55454,347],{"class":346},[220,55456,359],{"class":264},[212,55458,55459],{"className":409,"code":55430,"language":411,"meta":178,"style":178},[99,55460,55461,55469,55477],{"__ignoreMap":178},[220,55462,55463,55465,55467],{"class":222,"line":223},[220,55464,343],{"class":264},[220,55466,347],{"class":420},[220,55468,359],{"class":264},[220,55470,55471,55473,55475],{"class":222,"line":179},[220,55472,364],{"class":264},[220,55474,55408],{"class":420},[220,55476,386],{"class":264},[220,55478,55479,55481,55483],{"class":222,"line":389},[220,55480,402],{"class":264},[220,55482,347],{"class":420},[220,55484,359],{"class":264},[212,55486,55487],{"className":2844,"code":55430,"language":2846,"meta":178,"style":178},[99,55488,55489,55497,55505],{"__ignoreMap":178},[220,55490,55491,55493,55495],{"class":222,"line":223},[220,55492,343],{"class":264},[220,55494,347],{"class":420},[220,55496,359],{"class":264},[220,55498,55499,55501,55503],{"class":222,"line":179},[220,55500,364],{"class":264},[220,55502,55408],{"class":420},[220,55504,386],{"class":264},[220,55506,55507,55509,55511],{"class":222,"line":389},[220,55508,402],{"class":264},[220,55510,347],{"class":420},[220,55512,359],{"class":264},[212,55514,55515],{"className":468,"code":55430,"language":469,"meta":178,"style":178},[99,55516,55517,55525,55533],{"__ignoreMap":178},[220,55518,55519,55521,55523],{"class":222,"line":223},[220,55520,343],{"class":264},[220,55522,347],{"class":420},[220,55524,359],{"class":264},[220,55526,55527,55529,55531],{"class":222,"line":179},[220,55528,364],{"class":264},[220,55530,55408],{"class":420},[220,55532,386],{"class":264},[220,55534,55535,55537,55539],{"class":222,"line":389},[220,55536,402],{"class":264},[220,55538,347],{"class":420},[220,55540,359],{"class":264},[212,55542,55544],{"className":251,"code":55543,"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,55545,55546,55556,55560,55574,55578,55587,55591],{"__ignoreMap":178},[220,55547,55548,55550,55552,55554],{"class":222,"line":223},[220,55549,261],{"class":260},[220,55551,10879],{"class":264},[220,55553,268],{"class":260},[220,55555,4007],{"class":230},[220,55557,55558],{"class":222,"line":179},[220,55559,647],{"emptyLinePlaceholder":194},[220,55561,55562,55564,55566,55568,55570,55572],{"class":222,"line":389},[220,55563,1735],{"class":260},[220,55565,1738],{"class":420},[220,55567,1741],{"class":260},[220,55569,1744],{"class":260},[220,55571,1747],{"class":226},[220,55573,1750],{"class":264},[220,55575,55576],{"class":222,"line":399},[220,55577,1765],{"class":264},[220,55579,55580,55582,55585],{"class":222,"line":644},[220,55581,1770],{"class":264},[220,55583,55584],{"class":230},"'IsometricCubes'",[220,55586,2465],{"class":264},[220,55588,55589],{"class":222,"line":650},[220,55590,1787],{"class":264},[220,55592,55593],{"class":222,"line":656},[220,55594,1792],{"class":264},[1504,55596,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":55598},[55599,55600],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":55408,"description":55416},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":55607,"title":55608,"body":55609,"category":32766,"componentType":25253,"description":55616,"extension":191,"meta":55877,"navigation":194,"path":55878,"requiresChild":194,"seo":55879,"stem":55880,"__hash__":55881},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":55610,"toc":55873},[55611,55614,55617,55619,55621,55624,55626,55871],[11,55612,55608],{"id":55613},"kaleidoscope",[15,55615,55616],{},"Create a kaleidoscope effect with radial mirrored segments",[31281,55618],{"component":55608},[23,55620,31285],{"id":25903},[31287,55622],{":props":55623},"[{\"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,55625,31293],{"id":31292},[246,55627,55628,55673,55717,55761,55805],{":tabs":1557},[212,55629,55631],{"className":334,"code":55630,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,55632,55633,55641,55649,55657,55665],{"__ignoreMap":178},[220,55634,55635,55637,55639],{"class":222,"line":223},[220,55636,343],{"class":264},[220,55638,347],{"class":346},[220,55640,359],{"class":264},[220,55642,55643,55645,55647],{"class":222,"line":179},[220,55644,364],{"class":264},[220,55646,55608],{"class":346},[220,55648,359],{"class":264},[220,55650,55651,55653,55655],{"class":222,"line":389},[220,55652,2550],{"class":264},[220,55654,2553],{"class":346},[220,55656,386],{"class":264},[220,55658,55659,55661,55663],{"class":222,"line":399},[220,55660,2567],{"class":264},[220,55662,55608],{"class":346},[220,55664,359],{"class":264},[220,55666,55667,55669,55671],{"class":222,"line":644},[220,55668,402],{"class":264},[220,55670,347],{"class":346},[220,55672,359],{"class":264},[212,55674,55675],{"className":409,"code":55630,"language":411,"meta":178,"style":178},[99,55676,55677,55685,55693,55701,55709],{"__ignoreMap":178},[220,55678,55679,55681,55683],{"class":222,"line":223},[220,55680,343],{"class":264},[220,55682,347],{"class":420},[220,55684,359],{"class":264},[220,55686,55687,55689,55691],{"class":222,"line":179},[220,55688,364],{"class":264},[220,55690,55608],{"class":420},[220,55692,359],{"class":264},[220,55694,55695,55697,55699],{"class":222,"line":389},[220,55696,2550],{"class":264},[220,55698,2553],{"class":420},[220,55700,386],{"class":264},[220,55702,55703,55705,55707],{"class":222,"line":399},[220,55704,2567],{"class":264},[220,55706,55608],{"class":420},[220,55708,359],{"class":264},[220,55710,55711,55713,55715],{"class":222,"line":644},[220,55712,402],{"class":264},[220,55714,347],{"class":420},[220,55716,359],{"class":264},[212,55718,55719],{"className":2844,"code":55630,"language":2846,"meta":178,"style":178},[99,55720,55721,55729,55737,55745,55753],{"__ignoreMap":178},[220,55722,55723,55725,55727],{"class":222,"line":223},[220,55724,343],{"class":264},[220,55726,347],{"class":420},[220,55728,359],{"class":264},[220,55730,55731,55733,55735],{"class":222,"line":179},[220,55732,364],{"class":264},[220,55734,55608],{"class":420},[220,55736,359],{"class":264},[220,55738,55739,55741,55743],{"class":222,"line":389},[220,55740,2550],{"class":264},[220,55742,2553],{"class":420},[220,55744,386],{"class":264},[220,55746,55747,55749,55751],{"class":222,"line":399},[220,55748,2567],{"class":264},[220,55750,55608],{"class":420},[220,55752,359],{"class":264},[220,55754,55755,55757,55759],{"class":222,"line":644},[220,55756,402],{"class":264},[220,55758,347],{"class":420},[220,55760,359],{"class":264},[212,55762,55763],{"className":468,"code":55630,"language":469,"meta":178,"style":178},[99,55764,55765,55773,55781,55789,55797],{"__ignoreMap":178},[220,55766,55767,55769,55771],{"class":222,"line":223},[220,55768,343],{"class":264},[220,55770,347],{"class":420},[220,55772,359],{"class":264},[220,55774,55775,55777,55779],{"class":222,"line":179},[220,55776,364],{"class":264},[220,55778,55608],{"class":420},[220,55780,359],{"class":264},[220,55782,55783,55785,55787],{"class":222,"line":389},[220,55784,2550],{"class":264},[220,55786,2553],{"class":420},[220,55788,386],{"class":264},[220,55790,55791,55793,55795],{"class":222,"line":399},[220,55792,2567],{"class":264},[220,55794,55608],{"class":420},[220,55796,359],{"class":264},[220,55798,55799,55801,55803],{"class":222,"line":644},[220,55800,402],{"class":264},[220,55802,347],{"class":420},[220,55804,359],{"class":264},[212,55806,55808],{"className":251,"code":55807,"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,55809,55810,55820,55824,55838,55842,55851,55859,55863,55867],{"__ignoreMap":178},[220,55811,55812,55814,55816,55818],{"class":222,"line":223},[220,55813,261],{"class":260},[220,55815,10879],{"class":264},[220,55817,268],{"class":260},[220,55819,4007],{"class":230},[220,55821,55822],{"class":222,"line":179},[220,55823,647],{"emptyLinePlaceholder":194},[220,55825,55826,55828,55830,55832,55834,55836],{"class":222,"line":389},[220,55827,1735],{"class":260},[220,55829,1738],{"class":420},[220,55831,1741],{"class":260},[220,55833,1744],{"class":260},[220,55835,1747],{"class":226},[220,55837,1750],{"class":264},[220,55839,55840],{"class":222,"line":399},[220,55841,1765],{"class":264},[220,55843,55844,55846,55849],{"class":222,"line":644},[220,55845,1770],{"class":264},[220,55847,55848],{"class":230},"'Kaleidoscope'",[220,55850,6375],{"class":264},[220,55852,55853,55855,55857],{"class":222,"line":650},[220,55854,6380],{"class":264},[220,55856,3206],{"class":230},[220,55858,2465],{"class":264},[220,55860,55861],{"class":222,"line":656},[220,55862,6397],{"class":264},[220,55864,55865],{"class":222,"line":673},[220,55866,1787],{"class":264},[220,55868,55869],{"class":222,"line":682},[220,55870,1792],{"class":264},[1504,55872,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":55874},[55875,55876],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":55608,"description":55616},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":55883,"title":55884,"body":55885,"category":32176,"componentType":25253,"description":55892,"extension":191,"meta":56153,"navigation":194,"path":56154,"requiresChild":194,"seo":56155,"stem":56156,"__hash__":56157},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":55886,"toc":56149},[55887,55890,55893,55895,55897,55900,55902,56147],[11,55888,55884],{"id":55889},"keyframes",[15,55891,55892],{},"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",[31281,55894],{"component":55884},[23,55896,31285],{"id":25903},[31287,55898],{":props":55899},"[{\"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,55901,31293],{"id":31292},[246,55903,55904,55949,55993,56037,56081],{":tabs":1557},[212,55905,55907],{"className":334,"code":55906,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,55908,55909,55917,55925,55933,55941],{"__ignoreMap":178},[220,55910,55911,55913,55915],{"class":222,"line":223},[220,55912,343],{"class":264},[220,55914,347],{"class":346},[220,55916,359],{"class":264},[220,55918,55919,55921,55923],{"class":222,"line":179},[220,55920,364],{"class":264},[220,55922,55884],{"class":346},[220,55924,359],{"class":264},[220,55926,55927,55929,55931],{"class":222,"line":389},[220,55928,2550],{"class":264},[220,55930,2553],{"class":346},[220,55932,386],{"class":264},[220,55934,55935,55937,55939],{"class":222,"line":399},[220,55936,2567],{"class":264},[220,55938,55884],{"class":346},[220,55940,359],{"class":264},[220,55942,55943,55945,55947],{"class":222,"line":644},[220,55944,402],{"class":264},[220,55946,347],{"class":346},[220,55948,359],{"class":264},[212,55950,55951],{"className":409,"code":55906,"language":411,"meta":178,"style":178},[99,55952,55953,55961,55969,55977,55985],{"__ignoreMap":178},[220,55954,55955,55957,55959],{"class":222,"line":223},[220,55956,343],{"class":264},[220,55958,347],{"class":420},[220,55960,359],{"class":264},[220,55962,55963,55965,55967],{"class":222,"line":179},[220,55964,364],{"class":264},[220,55966,55884],{"class":420},[220,55968,359],{"class":264},[220,55970,55971,55973,55975],{"class":222,"line":389},[220,55972,2550],{"class":264},[220,55974,2553],{"class":420},[220,55976,386],{"class":264},[220,55978,55979,55981,55983],{"class":222,"line":399},[220,55980,2567],{"class":264},[220,55982,55884],{"class":420},[220,55984,359],{"class":264},[220,55986,55987,55989,55991],{"class":222,"line":644},[220,55988,402],{"class":264},[220,55990,347],{"class":420},[220,55992,359],{"class":264},[212,55994,55995],{"className":2844,"code":55906,"language":2846,"meta":178,"style":178},[99,55996,55997,56005,56013,56021,56029],{"__ignoreMap":178},[220,55998,55999,56001,56003],{"class":222,"line":223},[220,56000,343],{"class":264},[220,56002,347],{"class":420},[220,56004,359],{"class":264},[220,56006,56007,56009,56011],{"class":222,"line":179},[220,56008,364],{"class":264},[220,56010,55884],{"class":420},[220,56012,359],{"class":264},[220,56014,56015,56017,56019],{"class":222,"line":389},[220,56016,2550],{"class":264},[220,56018,2553],{"class":420},[220,56020,386],{"class":264},[220,56022,56023,56025,56027],{"class":222,"line":399},[220,56024,2567],{"class":264},[220,56026,55884],{"class":420},[220,56028,359],{"class":264},[220,56030,56031,56033,56035],{"class":222,"line":644},[220,56032,402],{"class":264},[220,56034,347],{"class":420},[220,56036,359],{"class":264},[212,56038,56039],{"className":468,"code":55906,"language":469,"meta":178,"style":178},[99,56040,56041,56049,56057,56065,56073],{"__ignoreMap":178},[220,56042,56043,56045,56047],{"class":222,"line":223},[220,56044,343],{"class":264},[220,56046,347],{"class":420},[220,56048,359],{"class":264},[220,56050,56051,56053,56055],{"class":222,"line":179},[220,56052,364],{"class":264},[220,56054,55884],{"class":420},[220,56056,359],{"class":264},[220,56058,56059,56061,56063],{"class":222,"line":389},[220,56060,2550],{"class":264},[220,56062,2553],{"class":420},[220,56064,386],{"class":264},[220,56066,56067,56069,56071],{"class":222,"line":399},[220,56068,2567],{"class":264},[220,56070,55884],{"class":420},[220,56072,359],{"class":264},[220,56074,56075,56077,56079],{"class":222,"line":644},[220,56076,402],{"class":264},[220,56078,347],{"class":420},[220,56080,359],{"class":264},[212,56082,56084],{"className":251,"code":56083,"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,56085,56086,56096,56100,56114,56118,56127,56135,56139,56143],{"__ignoreMap":178},[220,56087,56088,56090,56092,56094],{"class":222,"line":223},[220,56089,261],{"class":260},[220,56091,10879],{"class":264},[220,56093,268],{"class":260},[220,56095,4007],{"class":230},[220,56097,56098],{"class":222,"line":179},[220,56099,647],{"emptyLinePlaceholder":194},[220,56101,56102,56104,56106,56108,56110,56112],{"class":222,"line":389},[220,56103,1735],{"class":260},[220,56105,1738],{"class":420},[220,56107,1741],{"class":260},[220,56109,1744],{"class":260},[220,56111,1747],{"class":226},[220,56113,1750],{"class":264},[220,56115,56116],{"class":222,"line":399},[220,56117,1765],{"class":264},[220,56119,56120,56122,56125],{"class":222,"line":644},[220,56121,1770],{"class":264},[220,56123,56124],{"class":230},"'KeyFrames'",[220,56126,6375],{"class":264},[220,56128,56129,56131,56133],{"class":222,"line":650},[220,56130,6380],{"class":264},[220,56132,3206],{"class":230},[220,56134,2465],{"class":264},[220,56136,56137],{"class":222,"line":656},[220,56138,6397],{"class":264},[220,56140,56141],{"class":222,"line":673},[220,56142,1787],{"class":264},[220,56144,56145],{"class":222,"line":682},[220,56146,1792],{"class":264},[1504,56148,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":56150},[56151,56152],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":55884,"description":55892},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56159,"title":56160,"body":56161,"category":32176,"componentType":25247,"description":56168,"extension":191,"meta":56408,"navigation":194,"path":56409,"requiresChild":31900,"seo":56410,"stem":56411,"__hash__":56412},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":56162,"toc":56404},[56163,56166,56169,56171,56173,56176,56178,56402],[11,56164,56160],{"id":56165},"lensflare",[15,56167,56168],{},"Realistic camera lens flare with artifacts.",[31281,56170],{"component":56160},[23,56172,31285],{"id":25903},[31287,56174],{":props":56175},"[{\"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,56177,31293],{"id":31292},[246,56179,56180,56219,56262,56302,56344],{":tabs":1557},[212,56181,56183],{"className":334,"code":56182,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,56184,56185,56193,56199,56207,56211],{"__ignoreMap":178},[220,56186,56187,56189,56191],{"class":222,"line":223},[220,56188,343],{"class":264},[220,56190,347],{"class":346},[220,56192,359],{"class":264},[220,56194,56195,56197],{"class":222,"line":179},[220,56196,364],{"class":264},[220,56198,19725],{"class":346},[220,56200,56201,56203,56205],{"class":222,"line":389},[220,56202,19739],{"class":226},[220,56204,353],{"class":264},[220,56206,41528],{"class":230},[220,56208,56209],{"class":222,"line":399},[220,56210,1234],{"class":264},[220,56212,56213,56215,56217],{"class":222,"line":644},[220,56214,402],{"class":264},[220,56216,347],{"class":346},[220,56218,359],{"class":264},[212,56220,56222],{"className":409,"code":56221,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,56223,56224,56232,56238,56250,56254],{"__ignoreMap":178},[220,56225,56226,56228,56230],{"class":222,"line":223},[220,56227,343],{"class":264},[220,56229,347],{"class":420},[220,56231,359],{"class":264},[220,56233,56234,56236],{"class":222,"line":179},[220,56235,364],{"class":264},[220,56237,19725],{"class":420},[220,56239,56240,56242,56244,56246,56248],{"class":222,"line":389},[220,56241,19850],{"class":226},[220,56243,353],{"class":260},[220,56245,743],{"class":264},[220,56247,7120],{"class":420},[220,56249,749],{"class":264},[220,56251,56252],{"class":222,"line":399},[220,56253,1234],{"class":264},[220,56255,56256,56258,56260],{"class":222,"line":644},[220,56257,402],{"class":264},[220,56259,347],{"class":420},[220,56261,359],{"class":264},[212,56263,56264],{"className":2844,"code":56221,"language":2846,"meta":178,"style":178},[99,56265,56266,56274,56280,56290,56294],{"__ignoreMap":178},[220,56267,56268,56270,56272],{"class":222,"line":223},[220,56269,343],{"class":264},[220,56271,347],{"class":420},[220,56273,359],{"class":264},[220,56275,56276,56278],{"class":222,"line":179},[220,56277,364],{"class":264},[220,56279,19725],{"class":420},[220,56281,56282,56284,56286,56288],{"class":222,"line":389},[220,56283,19850],{"class":226},[220,56285,29241],{"class":264},[220,56287,7120],{"class":420},[220,56289,749],{"class":264},[220,56291,56292],{"class":222,"line":399},[220,56293,1234],{"class":264},[220,56295,56296,56298,56300],{"class":222,"line":644},[220,56297,402],{"class":264},[220,56299,347],{"class":420},[220,56301,359],{"class":264},[212,56303,56304],{"className":468,"code":56221,"language":469,"meta":178,"style":178},[99,56305,56306,56314,56320,56332,56336],{"__ignoreMap":178},[220,56307,56308,56310,56312],{"class":222,"line":223},[220,56309,343],{"class":264},[220,56311,347],{"class":420},[220,56313,359],{"class":264},[220,56315,56316,56318],{"class":222,"line":179},[220,56317,364],{"class":264},[220,56319,19725],{"class":420},[220,56321,56322,56324,56326,56328,56330],{"class":222,"line":389},[220,56323,19850],{"class":226},[220,56325,353],{"class":260},[220,56327,743],{"class":264},[220,56329,7120],{"class":420},[220,56331,749],{"class":264},[220,56333,56334],{"class":222,"line":399},[220,56335,1234],{"class":264},[220,56337,56338,56340,56342],{"class":222,"line":644},[220,56339,402],{"class":264},[220,56341,347],{"class":420},[220,56343,359],{"class":264},[212,56345,56347],{"className":251,"code":56346,"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,56348,56349,56359,56363,56377,56381,56394,56398],{"__ignoreMap":178},[220,56350,56351,56353,56355,56357],{"class":222,"line":223},[220,56352,261],{"class":260},[220,56354,10879],{"class":264},[220,56356,268],{"class":260},[220,56358,4007],{"class":230},[220,56360,56361],{"class":222,"line":179},[220,56362,647],{"emptyLinePlaceholder":194},[220,56364,56365,56367,56369,56371,56373,56375],{"class":222,"line":389},[220,56366,1735],{"class":260},[220,56368,1738],{"class":420},[220,56370,1741],{"class":260},[220,56372,1744],{"class":260},[220,56374,1747],{"class":226},[220,56376,1750],{"class":264},[220,56378,56379],{"class":222,"line":399},[220,56380,1765],{"class":264},[220,56382,56383,56385,56388,56390,56392],{"class":222,"line":644},[220,56384,1770],{"class":264},[220,56386,56387],{"class":230},"'LensFlare'",[220,56389,31573],{"class":264},[220,56391,7120],{"class":420},[220,56393,1782],{"class":264},[220,56395,56396],{"class":222,"line":650},[220,56397,1787],{"class":264},[220,56399,56400],{"class":222,"line":656},[220,56401,1792],{"class":264},[1504,56403,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":56405},[56406,56407],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":56160,"description":56168},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":56414,"title":56415,"body":56416,"category":35939,"componentType":25247,"description":56668,"extension":191,"meta":56669,"navigation":194,"path":56670,"requiresChild":31900,"seo":56671,"stem":56672,"__hash__":56673},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":56417,"toc":56664},[56418,56421,56427,56429,56431,56434,56436,56662],[11,56419,56415],{"id":56420},"lightedge",[15,56422,56423,56424,8855],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,56425,53252],{"href":53250,"rel":56426},[167],[31281,56428],{"component":56415},[23,56430,31285],{"id":25903},[31287,56432],{":props":56433},"[{\"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,56435,31293],{"id":31292},[246,56437,56438,56479,56522,56562,56604],{":tabs":1557},[212,56439,56441],{"className":334,"code":56440,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,56442,56443,56451,56458,56467,56471],{"__ignoreMap":178},[220,56444,56445,56447,56449],{"class":222,"line":223},[220,56446,343],{"class":264},[220,56448,347],{"class":346},[220,56450,359],{"class":264},[220,56452,56453,56455],{"class":222,"line":179},[220,56454,364],{"class":264},[220,56456,56457],{"class":346},"LightEdge\n",[220,56459,56460,56462,56464],{"class":222,"line":389},[220,56461,19739],{"class":226},[220,56463,353],{"class":264},[220,56465,56466],{"class":230},"\"0.6\"\n",[220,56468,56469],{"class":222,"line":399},[220,56470,1234],{"class":264},[220,56472,56473,56475,56477],{"class":222,"line":644},[220,56474,402],{"class":264},[220,56476,347],{"class":346},[220,56478,359],{"class":264},[212,56480,56482],{"className":409,"code":56481,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,56483,56484,56492,56498,56510,56514],{"__ignoreMap":178},[220,56485,56486,56488,56490],{"class":222,"line":223},[220,56487,343],{"class":264},[220,56489,347],{"class":420},[220,56491,359],{"class":264},[220,56493,56494,56496],{"class":222,"line":179},[220,56495,364],{"class":264},[220,56497,56457],{"class":420},[220,56499,56500,56502,56504,56506,56508],{"class":222,"line":389},[220,56501,19850],{"class":226},[220,56503,353],{"class":260},[220,56505,743],{"class":264},[220,56507,7602],{"class":420},[220,56509,749],{"class":264},[220,56511,56512],{"class":222,"line":399},[220,56513,1234],{"class":264},[220,56515,56516,56518,56520],{"class":222,"line":644},[220,56517,402],{"class":264},[220,56519,347],{"class":420},[220,56521,359],{"class":264},[212,56523,56524],{"className":2844,"code":56481,"language":2846,"meta":178,"style":178},[99,56525,56526,56534,56540,56550,56554],{"__ignoreMap":178},[220,56527,56528,56530,56532],{"class":222,"line":223},[220,56529,343],{"class":264},[220,56531,347],{"class":420},[220,56533,359],{"class":264},[220,56535,56536,56538],{"class":222,"line":179},[220,56537,364],{"class":264},[220,56539,56457],{"class":420},[220,56541,56542,56544,56546,56548],{"class":222,"line":389},[220,56543,19850],{"class":226},[220,56545,29241],{"class":264},[220,56547,7602],{"class":420},[220,56549,749],{"class":264},[220,56551,56552],{"class":222,"line":399},[220,56553,1234],{"class":264},[220,56555,56556,56558,56560],{"class":222,"line":644},[220,56557,402],{"class":264},[220,56559,347],{"class":420},[220,56561,359],{"class":264},[212,56563,56564],{"className":468,"code":56481,"language":469,"meta":178,"style":178},[99,56565,56566,56574,56580,56592,56596],{"__ignoreMap":178},[220,56567,56568,56570,56572],{"class":222,"line":223},[220,56569,343],{"class":264},[220,56571,347],{"class":420},[220,56573,359],{"class":264},[220,56575,56576,56578],{"class":222,"line":179},[220,56577,364],{"class":264},[220,56579,56457],{"class":420},[220,56581,56582,56584,56586,56588,56590],{"class":222,"line":389},[220,56583,19850],{"class":226},[220,56585,353],{"class":260},[220,56587,743],{"class":264},[220,56589,7602],{"class":420},[220,56591,749],{"class":264},[220,56593,56594],{"class":222,"line":399},[220,56595,1234],{"class":264},[220,56597,56598,56600,56602],{"class":222,"line":644},[220,56599,402],{"class":264},[220,56601,347],{"class":420},[220,56603,359],{"class":264},[212,56605,56607],{"className":251,"code":56606,"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,56608,56609,56619,56623,56637,56641,56654,56658],{"__ignoreMap":178},[220,56610,56611,56613,56615,56617],{"class":222,"line":223},[220,56612,261],{"class":260},[220,56614,10879],{"class":264},[220,56616,268],{"class":260},[220,56618,4007],{"class":230},[220,56620,56621],{"class":222,"line":179},[220,56622,647],{"emptyLinePlaceholder":194},[220,56624,56625,56627,56629,56631,56633,56635],{"class":222,"line":389},[220,56626,1735],{"class":260},[220,56628,1738],{"class":420},[220,56630,1741],{"class":260},[220,56632,1744],{"class":260},[220,56634,1747],{"class":226},[220,56636,1750],{"class":264},[220,56638,56639],{"class":222,"line":399},[220,56640,1765],{"class":264},[220,56642,56643,56645,56648,56650,56652],{"class":222,"line":644},[220,56644,1770],{"class":264},[220,56646,56647],{"class":230},"'LightEdge'",[220,56649,31573],{"class":264},[220,56651,7602],{"class":420},[220,56653,1782],{"class":264},[220,56655,56656],{"class":222,"line":650},[220,56657,1787],{"class":264},[220,56659,56660],{"class":222,"line":656},[220,56661,1792],{"class":264},[1504,56663,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":56665},[56666,56667],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":56415,"description":56668},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":56675,"title":56676,"body":56677,"category":32176,"componentType":25253,"description":56684,"extension":191,"meta":57001,"navigation":194,"path":57002,"requiresChild":194,"seo":57003,"stem":57004,"__hash__":57005},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":56678,"toc":56997},[56679,56682,56685,56687,56689,56692,56694,56995],[11,56680,56676],{"id":56681},"lightleak",[15,56683,56684],{},"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",[31281,56686],{"component":56676},[23,56688,31285],{"id":25903},[31287,56690],{":props":56691},"[{\"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,56693,31293],{"id":31292},[246,56695,56696,56752,56811,56867,56925],{":tabs":1557},[212,56697,56699],{"className":334,"code":56698,"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,56700,56701,56709,56716,56724,56728,56736,56744],{"__ignoreMap":178},[220,56702,56703,56705,56707],{"class":222,"line":223},[220,56704,343],{"class":264},[220,56706,347],{"class":346},[220,56708,359],{"class":264},[220,56710,56711,56713],{"class":222,"line":179},[220,56712,364],{"class":264},[220,56714,56715],{"class":346},"LightLeak\n",[220,56717,56718,56720,56722],{"class":222,"line":389},[220,56719,19739],{"class":226},[220,56721,353],{"class":264},[220,56723,17475],{"class":230},[220,56725,56726],{"class":222,"line":399},[220,56727,31329],{"class":264},[220,56729,56730,56732,56734],{"class":222,"line":644},[220,56731,2550],{"class":264},[220,56733,2553],{"class":346},[220,56735,386],{"class":264},[220,56737,56738,56740,56742],{"class":222,"line":650},[220,56739,2567],{"class":264},[220,56741,56676],{"class":346},[220,56743,359],{"class":264},[220,56745,56746,56748,56750],{"class":222,"line":656},[220,56747,402],{"class":264},[220,56749,347],{"class":346},[220,56751,359],{"class":264},[212,56753,56755],{"className":409,"code":56754,"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,56756,56757,56765,56771,56783,56787,56795,56803],{"__ignoreMap":178},[220,56758,56759,56761,56763],{"class":222,"line":223},[220,56760,343],{"class":264},[220,56762,347],{"class":420},[220,56764,359],{"class":264},[220,56766,56767,56769],{"class":222,"line":179},[220,56768,364],{"class":264},[220,56770,56715],{"class":420},[220,56772,56773,56775,56777,56779,56781],{"class":222,"line":389},[220,56774,19850],{"class":226},[220,56776,353],{"class":260},[220,56778,743],{"class":264},[220,56780,17559],{"class":420},[220,56782,749],{"class":264},[220,56784,56785],{"class":222,"line":399},[220,56786,31329],{"class":264},[220,56788,56789,56791,56793],{"class":222,"line":644},[220,56790,2550],{"class":264},[220,56792,2553],{"class":420},[220,56794,386],{"class":264},[220,56796,56797,56799,56801],{"class":222,"line":650},[220,56798,2567],{"class":264},[220,56800,56676],{"class":420},[220,56802,359],{"class":264},[220,56804,56805,56807,56809],{"class":222,"line":656},[220,56806,402],{"class":264},[220,56808,347],{"class":420},[220,56810,359],{"class":264},[212,56812,56813],{"className":2844,"code":56754,"language":2846,"meta":178,"style":178},[99,56814,56815,56823,56829,56839,56843,56851,56859],{"__ignoreMap":178},[220,56816,56817,56819,56821],{"class":222,"line":223},[220,56818,343],{"class":264},[220,56820,347],{"class":420},[220,56822,359],{"class":264},[220,56824,56825,56827],{"class":222,"line":179},[220,56826,364],{"class":264},[220,56828,56715],{"class":420},[220,56830,56831,56833,56835,56837],{"class":222,"line":389},[220,56832,19850],{"class":226},[220,56834,29241],{"class":264},[220,56836,17559],{"class":420},[220,56838,749],{"class":264},[220,56840,56841],{"class":222,"line":399},[220,56842,31329],{"class":264},[220,56844,56845,56847,56849],{"class":222,"line":644},[220,56846,2550],{"class":264},[220,56848,2553],{"class":420},[220,56850,386],{"class":264},[220,56852,56853,56855,56857],{"class":222,"line":650},[220,56854,2567],{"class":264},[220,56856,56676],{"class":420},[220,56858,359],{"class":264},[220,56860,56861,56863,56865],{"class":222,"line":656},[220,56862,402],{"class":264},[220,56864,347],{"class":420},[220,56866,359],{"class":264},[212,56868,56869],{"className":468,"code":56754,"language":469,"meta":178,"style":178},[99,56870,56871,56879,56885,56897,56901,56909,56917],{"__ignoreMap":178},[220,56872,56873,56875,56877],{"class":222,"line":223},[220,56874,343],{"class":264},[220,56876,347],{"class":420},[220,56878,359],{"class":264},[220,56880,56881,56883],{"class":222,"line":179},[220,56882,364],{"class":264},[220,56884,56715],{"class":420},[220,56886,56887,56889,56891,56893,56895],{"class":222,"line":389},[220,56888,19850],{"class":226},[220,56890,353],{"class":260},[220,56892,743],{"class":264},[220,56894,17559],{"class":420},[220,56896,749],{"class":264},[220,56898,56899],{"class":222,"line":399},[220,56900,31329],{"class":264},[220,56902,56903,56905,56907],{"class":222,"line":644},[220,56904,2550],{"class":264},[220,56906,2553],{"class":420},[220,56908,386],{"class":264},[220,56910,56911,56913,56915],{"class":222,"line":650},[220,56912,2567],{"class":264},[220,56914,56676],{"class":420},[220,56916,359],{"class":264},[220,56918,56919,56921,56923],{"class":222,"line":656},[220,56920,402],{"class":264},[220,56922,347],{"class":420},[220,56924,359],{"class":264},[212,56926,56928],{"className":251,"code":56927,"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,56929,56930,56940,56944,56958,56962,56975,56983,56987,56991],{"__ignoreMap":178},[220,56931,56932,56934,56936,56938],{"class":222,"line":223},[220,56933,261],{"class":260},[220,56935,10879],{"class":264},[220,56937,268],{"class":260},[220,56939,4007],{"class":230},[220,56941,56942],{"class":222,"line":179},[220,56943,647],{"emptyLinePlaceholder":194},[220,56945,56946,56948,56950,56952,56954,56956],{"class":222,"line":389},[220,56947,1735],{"class":260},[220,56949,1738],{"class":420},[220,56951,1741],{"class":260},[220,56953,1744],{"class":260},[220,56955,1747],{"class":226},[220,56957,1750],{"class":264},[220,56959,56960],{"class":222,"line":399},[220,56961,1765],{"class":264},[220,56963,56964,56966,56969,56971,56973],{"class":222,"line":644},[220,56965,1770],{"class":264},[220,56967,56968],{"class":230},"'LightLeak'",[220,56970,31573],{"class":264},[220,56972,17559],{"class":420},[220,56974,6912],{"class":264},[220,56976,56977,56979,56981],{"class":222,"line":650},[220,56978,6380],{"class":264},[220,56980,3206],{"class":230},[220,56982,2465],{"class":264},[220,56984,56985],{"class":222,"line":656},[220,56986,6397],{"class":264},[220,56988,56989],{"class":222,"line":673},[220,56990,1787],{"class":264},[220,56992,56993],{"class":222,"line":682},[220,56994,1792],{"class":264},[1504,56996,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":56998},[56999,57000],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":56676,"description":56684},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":57007,"title":57008,"body":57009,"category":31604,"componentType":25253,"description":57016,"extension":191,"meta":57333,"navigation":194,"path":57334,"requiresChild":194,"seo":57335,"stem":57336,"__hash__":57337},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":57010,"toc":57329},[57011,57014,57017,57019,57021,57024,57026,57327],[11,57012,57008],{"id":57013},"linearblur",[15,57015,57016],{},"Directional motion blur in a specific angle",[31281,57018],{"component":57008},[23,57020,31285],{"id":25903},[31287,57022],{":props":57023},"[{\"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,57025,31293],{"id":31292},[246,57027,57028,57084,57143,57199,57257],{":tabs":1557},[212,57029,57031],{"className":334,"code":57030,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57032,57033,57041,57048,57056,57060,57068,57076],{"__ignoreMap":178},[220,57034,57035,57037,57039],{"class":222,"line":223},[220,57036,343],{"class":264},[220,57038,347],{"class":346},[220,57040,359],{"class":264},[220,57042,57043,57045],{"class":222,"line":179},[220,57044,364],{"class":264},[220,57046,57047],{"class":346},"LinearBlur\n",[220,57049,57050,57052,57054],{"class":222,"line":389},[220,57051,19739],{"class":226},[220,57053,353],{"class":264},[220,57055,42962],{"class":230},[220,57057,57058],{"class":222,"line":399},[220,57059,31329],{"class":264},[220,57061,57062,57064,57066],{"class":222,"line":644},[220,57063,2550],{"class":264},[220,57065,2553],{"class":346},[220,57067,386],{"class":264},[220,57069,57070,57072,57074],{"class":222,"line":650},[220,57071,2567],{"class":264},[220,57073,57008],{"class":346},[220,57075,359],{"class":264},[220,57077,57078,57080,57082],{"class":222,"line":656},[220,57079,402],{"class":264},[220,57081,347],{"class":346},[220,57083,359],{"class":264},[212,57085,57087],{"className":409,"code":57086,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57088,57089,57097,57103,57115,57119,57127,57135],{"__ignoreMap":178},[220,57090,57091,57093,57095],{"class":222,"line":223},[220,57092,343],{"class":264},[220,57094,347],{"class":420},[220,57096,359],{"class":264},[220,57098,57099,57101],{"class":222,"line":179},[220,57100,364],{"class":264},[220,57102,57047],{"class":420},[220,57104,57105,57107,57109,57111,57113],{"class":222,"line":389},[220,57106,19850],{"class":226},[220,57108,353],{"class":260},[220,57110,743],{"class":264},[220,57112,23379],{"class":420},[220,57114,749],{"class":264},[220,57116,57117],{"class":222,"line":399},[220,57118,31329],{"class":264},[220,57120,57121,57123,57125],{"class":222,"line":644},[220,57122,2550],{"class":264},[220,57124,2553],{"class":420},[220,57126,386],{"class":264},[220,57128,57129,57131,57133],{"class":222,"line":650},[220,57130,2567],{"class":264},[220,57132,57008],{"class":420},[220,57134,359],{"class":264},[220,57136,57137,57139,57141],{"class":222,"line":656},[220,57138,402],{"class":264},[220,57140,347],{"class":420},[220,57142,359],{"class":264},[212,57144,57145],{"className":2844,"code":57086,"language":2846,"meta":178,"style":178},[99,57146,57147,57155,57161,57171,57175,57183,57191],{"__ignoreMap":178},[220,57148,57149,57151,57153],{"class":222,"line":223},[220,57150,343],{"class":264},[220,57152,347],{"class":420},[220,57154,359],{"class":264},[220,57156,57157,57159],{"class":222,"line":179},[220,57158,364],{"class":264},[220,57160,57047],{"class":420},[220,57162,57163,57165,57167,57169],{"class":222,"line":389},[220,57164,19850],{"class":226},[220,57166,29241],{"class":264},[220,57168,23379],{"class":420},[220,57170,749],{"class":264},[220,57172,57173],{"class":222,"line":399},[220,57174,31329],{"class":264},[220,57176,57177,57179,57181],{"class":222,"line":644},[220,57178,2550],{"class":264},[220,57180,2553],{"class":420},[220,57182,386],{"class":264},[220,57184,57185,57187,57189],{"class":222,"line":650},[220,57186,2567],{"class":264},[220,57188,57008],{"class":420},[220,57190,359],{"class":264},[220,57192,57193,57195,57197],{"class":222,"line":656},[220,57194,402],{"class":264},[220,57196,347],{"class":420},[220,57198,359],{"class":264},[212,57200,57201],{"className":468,"code":57086,"language":469,"meta":178,"style":178},[99,57202,57203,57211,57217,57229,57233,57241,57249],{"__ignoreMap":178},[220,57204,57205,57207,57209],{"class":222,"line":223},[220,57206,343],{"class":264},[220,57208,347],{"class":420},[220,57210,359],{"class":264},[220,57212,57213,57215],{"class":222,"line":179},[220,57214,364],{"class":264},[220,57216,57047],{"class":420},[220,57218,57219,57221,57223,57225,57227],{"class":222,"line":389},[220,57220,19850],{"class":226},[220,57222,353],{"class":260},[220,57224,743],{"class":264},[220,57226,23379],{"class":420},[220,57228,749],{"class":264},[220,57230,57231],{"class":222,"line":399},[220,57232,31329],{"class":264},[220,57234,57235,57237,57239],{"class":222,"line":644},[220,57236,2550],{"class":264},[220,57238,2553],{"class":420},[220,57240,386],{"class":264},[220,57242,57243,57245,57247],{"class":222,"line":650},[220,57244,2567],{"class":264},[220,57246,57008],{"class":420},[220,57248,359],{"class":264},[220,57250,57251,57253,57255],{"class":222,"line":656},[220,57252,402],{"class":264},[220,57254,347],{"class":420},[220,57256,359],{"class":264},[212,57258,57260],{"className":251,"code":57259,"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,57261,57262,57272,57276,57290,57294,57307,57315,57319,57323],{"__ignoreMap":178},[220,57263,57264,57266,57268,57270],{"class":222,"line":223},[220,57265,261],{"class":260},[220,57267,10879],{"class":264},[220,57269,268],{"class":260},[220,57271,4007],{"class":230},[220,57273,57274],{"class":222,"line":179},[220,57275,647],{"emptyLinePlaceholder":194},[220,57277,57278,57280,57282,57284,57286,57288],{"class":222,"line":389},[220,57279,1735],{"class":260},[220,57281,1738],{"class":420},[220,57283,1741],{"class":260},[220,57285,1744],{"class":260},[220,57287,1747],{"class":226},[220,57289,1750],{"class":264},[220,57291,57292],{"class":222,"line":399},[220,57293,1765],{"class":264},[220,57295,57296,57298,57301,57303,57305],{"class":222,"line":644},[220,57297,1770],{"class":264},[220,57299,57300],{"class":230},"'LinearBlur'",[220,57302,31573],{"class":264},[220,57304,23379],{"class":420},[220,57306,6912],{"class":264},[220,57308,57309,57311,57313],{"class":222,"line":650},[220,57310,6380],{"class":264},[220,57312,3206],{"class":230},[220,57314,2465],{"class":264},[220,57316,57317],{"class":222,"line":656},[220,57318,6397],{"class":264},[220,57320,57321],{"class":222,"line":673},[220,57322,1787],{"class":264},[220,57324,57325],{"class":222,"line":682},[220,57326,1792],{"class":264},[1504,57328,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57330},[57331,57332],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":57008,"description":57016},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":57339,"title":367,"body":57340,"category":32433,"componentType":25247,"description":57347,"extension":191,"meta":57531,"navigation":194,"path":57532,"requiresChild":31900,"seo":57533,"stem":57534,"__hash__":57535},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":57341,"toc":57527},[57342,57345,57348,57350,57352,57355,57357,57525],[11,57343,367],{"id":57344},"lineargradient",[15,57346,57347],{},"Create smooth linear color gradients",[31281,57349],{"component":367},[23,57351,31285],{"id":25903},[31287,57353],{":props":57354},"[{\"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,57356,31293],{"id":31292},[246,57358,57359,57388,57416,57444,57472],{":tabs":1557},[212,57360,57362],{"className":334,"code":57361,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,57363,57364,57372,57380],{"__ignoreMap":178},[220,57365,57366,57368,57370],{"class":222,"line":223},[220,57367,343],{"class":264},[220,57369,347],{"class":346},[220,57371,359],{"class":264},[220,57373,57374,57376,57378],{"class":222,"line":179},[220,57375,364],{"class":264},[220,57377,367],{"class":346},[220,57379,386],{"class":264},[220,57381,57382,57384,57386],{"class":222,"line":389},[220,57383,402],{"class":264},[220,57385,347],{"class":346},[220,57387,359],{"class":264},[212,57389,57390],{"className":409,"code":57361,"language":411,"meta":178,"style":178},[99,57391,57392,57400,57408],{"__ignoreMap":178},[220,57393,57394,57396,57398],{"class":222,"line":223},[220,57395,343],{"class":264},[220,57397,347],{"class":420},[220,57399,359],{"class":264},[220,57401,57402,57404,57406],{"class":222,"line":179},[220,57403,364],{"class":264},[220,57405,367],{"class":420},[220,57407,386],{"class":264},[220,57409,57410,57412,57414],{"class":222,"line":389},[220,57411,402],{"class":264},[220,57413,347],{"class":420},[220,57415,359],{"class":264},[212,57417,57418],{"className":2844,"code":57361,"language":2846,"meta":178,"style":178},[99,57419,57420,57428,57436],{"__ignoreMap":178},[220,57421,57422,57424,57426],{"class":222,"line":223},[220,57423,343],{"class":264},[220,57425,347],{"class":420},[220,57427,359],{"class":264},[220,57429,57430,57432,57434],{"class":222,"line":179},[220,57431,364],{"class":264},[220,57433,367],{"class":420},[220,57435,386],{"class":264},[220,57437,57438,57440,57442],{"class":222,"line":389},[220,57439,402],{"class":264},[220,57441,347],{"class":420},[220,57443,359],{"class":264},[212,57445,57446],{"className":468,"code":57361,"language":469,"meta":178,"style":178},[99,57447,57448,57456,57464],{"__ignoreMap":178},[220,57449,57450,57452,57454],{"class":222,"line":223},[220,57451,343],{"class":264},[220,57453,347],{"class":420},[220,57455,359],{"class":264},[220,57457,57458,57460,57462],{"class":222,"line":179},[220,57459,364],{"class":264},[220,57461,367],{"class":420},[220,57463,386],{"class":264},[220,57465,57466,57468,57470],{"class":222,"line":389},[220,57467,402],{"class":264},[220,57469,347],{"class":420},[220,57471,359],{"class":264},[212,57473,57475],{"className":251,"code":57474,"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,57476,57477,57487,57491,57505,57509,57517,57521],{"__ignoreMap":178},[220,57478,57479,57481,57483,57485],{"class":222,"line":223},[220,57480,261],{"class":260},[220,57482,10879],{"class":264},[220,57484,268],{"class":260},[220,57486,4007],{"class":230},[220,57488,57489],{"class":222,"line":179},[220,57490,647],{"emptyLinePlaceholder":194},[220,57492,57493,57495,57497,57499,57501,57503],{"class":222,"line":389},[220,57494,1735],{"class":260},[220,57496,1738],{"class":420},[220,57498,1741],{"class":260},[220,57500,1744],{"class":260},[220,57502,1747],{"class":226},[220,57504,1750],{"class":264},[220,57506,57507],{"class":222,"line":399},[220,57508,1765],{"class":264},[220,57510,57511,57513,57515],{"class":222,"line":644},[220,57512,1770],{"class":264},[220,57514,2462],{"class":230},[220,57516,2465],{"class":264},[220,57518,57519],{"class":222,"line":650},[220,57520,1787],{"class":264},[220,57522,57523],{"class":222,"line":656},[220,57524,1792],{"class":264},[1504,57526,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":57528},[57529,57530],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":57347},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":57537,"title":57538,"body":57539,"category":33043,"componentType":25253,"description":57546,"extension":191,"meta":57807,"navigation":194,"path":57808,"requiresChild":194,"seo":57809,"stem":57810,"__hash__":57811},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":57540,"toc":57803},[57541,57544,57547,57549,57551,57554,57556,57801],[11,57542,57538],{"id":57543},"linearwipe",[15,57545,57546],{},"Wipe the content away along a straight edge with a soft feathered transition",[31281,57548],{"component":57538},[23,57550,31285],{"id":25903},[31287,57552],{":props":57553},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has travelled (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the wipe in degrees (0 = left to right)\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the wipe edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the direction the wipe travels\"}]",[23,57555,31293],{"id":31292},[246,57557,57558,57603,57647,57691,57735],{":tabs":1557},[212,57559,57561],{"className":334,"code":57560,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,57562,57563,57571,57579,57587,57595],{"__ignoreMap":178},[220,57564,57565,57567,57569],{"class":222,"line":223},[220,57566,343],{"class":264},[220,57568,347],{"class":346},[220,57570,359],{"class":264},[220,57572,57573,57575,57577],{"class":222,"line":179},[220,57574,364],{"class":264},[220,57576,57538],{"class":346},[220,57578,359],{"class":264},[220,57580,57581,57583,57585],{"class":222,"line":389},[220,57582,2550],{"class":264},[220,57584,2553],{"class":346},[220,57586,386],{"class":264},[220,57588,57589,57591,57593],{"class":222,"line":399},[220,57590,2567],{"class":264},[220,57592,57538],{"class":346},[220,57594,359],{"class":264},[220,57596,57597,57599,57601],{"class":222,"line":644},[220,57598,402],{"class":264},[220,57600,347],{"class":346},[220,57602,359],{"class":264},[212,57604,57605],{"className":409,"code":57560,"language":411,"meta":178,"style":178},[99,57606,57607,57615,57623,57631,57639],{"__ignoreMap":178},[220,57608,57609,57611,57613],{"class":222,"line":223},[220,57610,343],{"class":264},[220,57612,347],{"class":420},[220,57614,359],{"class":264},[220,57616,57617,57619,57621],{"class":222,"line":179},[220,57618,364],{"class":264},[220,57620,57538],{"class":420},[220,57622,359],{"class":264},[220,57624,57625,57627,57629],{"class":222,"line":389},[220,57626,2550],{"class":264},[220,57628,2553],{"class":420},[220,57630,386],{"class":264},[220,57632,57633,57635,57637],{"class":222,"line":399},[220,57634,2567],{"class":264},[220,57636,57538],{"class":420},[220,57638,359],{"class":264},[220,57640,57641,57643,57645],{"class":222,"line":644},[220,57642,402],{"class":264},[220,57644,347],{"class":420},[220,57646,359],{"class":264},[212,57648,57649],{"className":2844,"code":57560,"language":2846,"meta":178,"style":178},[99,57650,57651,57659,57667,57675,57683],{"__ignoreMap":178},[220,57652,57653,57655,57657],{"class":222,"line":223},[220,57654,343],{"class":264},[220,57656,347],{"class":420},[220,57658,359],{"class":264},[220,57660,57661,57663,57665],{"class":222,"line":179},[220,57662,364],{"class":264},[220,57664,57538],{"class":420},[220,57666,359],{"class":264},[220,57668,57669,57671,57673],{"class":222,"line":389},[220,57670,2550],{"class":264},[220,57672,2553],{"class":420},[220,57674,386],{"class":264},[220,57676,57677,57679,57681],{"class":222,"line":399},[220,57678,2567],{"class":264},[220,57680,57538],{"class":420},[220,57682,359],{"class":264},[220,57684,57685,57687,57689],{"class":222,"line":644},[220,57686,402],{"class":264},[220,57688,347],{"class":420},[220,57690,359],{"class":264},[212,57692,57693],{"className":468,"code":57560,"language":469,"meta":178,"style":178},[99,57694,57695,57703,57711,57719,57727],{"__ignoreMap":178},[220,57696,57697,57699,57701],{"class":222,"line":223},[220,57698,343],{"class":264},[220,57700,347],{"class":420},[220,57702,359],{"class":264},[220,57704,57705,57707,57709],{"class":222,"line":179},[220,57706,364],{"class":264},[220,57708,57538],{"class":420},[220,57710,359],{"class":264},[220,57712,57713,57715,57717],{"class":222,"line":389},[220,57714,2550],{"class":264},[220,57716,2553],{"class":420},[220,57718,386],{"class":264},[220,57720,57721,57723,57725],{"class":222,"line":399},[220,57722,2567],{"class":264},[220,57724,57538],{"class":420},[220,57726,359],{"class":264},[220,57728,57729,57731,57733],{"class":222,"line":644},[220,57730,402],{"class":264},[220,57732,347],{"class":420},[220,57734,359],{"class":264},[212,57736,57738],{"className":251,"code":57737,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,57739,57740,57750,57754,57768,57772,57781,57789,57793,57797],{"__ignoreMap":178},[220,57741,57742,57744,57746,57748],{"class":222,"line":223},[220,57743,261],{"class":260},[220,57745,10879],{"class":264},[220,57747,268],{"class":260},[220,57749,4007],{"class":230},[220,57751,57752],{"class":222,"line":179},[220,57753,647],{"emptyLinePlaceholder":194},[220,57755,57756,57758,57760,57762,57764,57766],{"class":222,"line":389},[220,57757,1735],{"class":260},[220,57759,1738],{"class":420},[220,57761,1741],{"class":260},[220,57763,1744],{"class":260},[220,57765,1747],{"class":226},[220,57767,1750],{"class":264},[220,57769,57770],{"class":222,"line":399},[220,57771,1765],{"class":264},[220,57773,57774,57776,57779],{"class":222,"line":644},[220,57775,1770],{"class":264},[220,57777,57778],{"class":230},"'LinearWipe'",[220,57780,6375],{"class":264},[220,57782,57783,57785,57787],{"class":222,"line":650},[220,57784,6380],{"class":264},[220,57786,3206],{"class":230},[220,57788,2465],{"class":264},[220,57790,57791],{"class":222,"line":656},[220,57792,6397],{"class":264},[220,57794,57795],{"class":222,"line":673},[220,57796,1787],{"class":264},[220,57798,57799],{"class":222,"line":682},[220,57800,1792],{"class":264},[1504,57802,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":57804},[57805,57806],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":57538,"description":57546},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":57813,"title":57814,"body":57815,"category":35939,"componentType":25247,"description":57822,"extension":191,"meta":58007,"navigation":194,"path":58008,"requiresChild":31900,"seo":58009,"stem":58010,"__hash__":58011},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":57816,"toc":58003},[57817,57820,57823,57825,57827,57830,57832,58001],[11,57818,57814],{"id":57819},"liquidmetal",[15,57821,57822],{},"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",[31281,57824],{"component":57814},[23,57826,31285],{"id":25903},[31287,57828],{":props":57829},"[{\"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,57831,31293],{"id":31292},[246,57833,57834,57863,57891,57919,57947],{":tabs":1557},[212,57835,57837],{"className":334,"code":57836,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,57838,57839,57847,57855],{"__ignoreMap":178},[220,57840,57841,57843,57845],{"class":222,"line":223},[220,57842,343],{"class":264},[220,57844,347],{"class":346},[220,57846,359],{"class":264},[220,57848,57849,57851,57853],{"class":222,"line":179},[220,57850,364],{"class":264},[220,57852,57814],{"class":346},[220,57854,386],{"class":264},[220,57856,57857,57859,57861],{"class":222,"line":389},[220,57858,402],{"class":264},[220,57860,347],{"class":346},[220,57862,359],{"class":264},[212,57864,57865],{"className":409,"code":57836,"language":411,"meta":178,"style":178},[99,57866,57867,57875,57883],{"__ignoreMap":178},[220,57868,57869,57871,57873],{"class":222,"line":223},[220,57870,343],{"class":264},[220,57872,347],{"class":420},[220,57874,359],{"class":264},[220,57876,57877,57879,57881],{"class":222,"line":179},[220,57878,364],{"class":264},[220,57880,57814],{"class":420},[220,57882,386],{"class":264},[220,57884,57885,57887,57889],{"class":222,"line":389},[220,57886,402],{"class":264},[220,57888,347],{"class":420},[220,57890,359],{"class":264},[212,57892,57893],{"className":2844,"code":57836,"language":2846,"meta":178,"style":178},[99,57894,57895,57903,57911],{"__ignoreMap":178},[220,57896,57897,57899,57901],{"class":222,"line":223},[220,57898,343],{"class":264},[220,57900,347],{"class":420},[220,57902,359],{"class":264},[220,57904,57905,57907,57909],{"class":222,"line":179},[220,57906,364],{"class":264},[220,57908,57814],{"class":420},[220,57910,386],{"class":264},[220,57912,57913,57915,57917],{"class":222,"line":389},[220,57914,402],{"class":264},[220,57916,347],{"class":420},[220,57918,359],{"class":264},[212,57920,57921],{"className":468,"code":57836,"language":469,"meta":178,"style":178},[99,57922,57923,57931,57939],{"__ignoreMap":178},[220,57924,57925,57927,57929],{"class":222,"line":223},[220,57926,343],{"class":264},[220,57928,347],{"class":420},[220,57930,359],{"class":264},[220,57932,57933,57935,57937],{"class":222,"line":179},[220,57934,364],{"class":264},[220,57936,57814],{"class":420},[220,57938,386],{"class":264},[220,57940,57941,57943,57945],{"class":222,"line":389},[220,57942,402],{"class":264},[220,57944,347],{"class":420},[220,57946,359],{"class":264},[212,57948,57950],{"className":251,"code":57949,"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,57951,57952,57962,57966,57980,57984,57993,57997],{"__ignoreMap":178},[220,57953,57954,57956,57958,57960],{"class":222,"line":223},[220,57955,261],{"class":260},[220,57957,10879],{"class":264},[220,57959,268],{"class":260},[220,57961,4007],{"class":230},[220,57963,57964],{"class":222,"line":179},[220,57965,647],{"emptyLinePlaceholder":194},[220,57967,57968,57970,57972,57974,57976,57978],{"class":222,"line":389},[220,57969,1735],{"class":260},[220,57971,1738],{"class":420},[220,57973,1741],{"class":260},[220,57975,1744],{"class":260},[220,57977,1747],{"class":226},[220,57979,1750],{"class":264},[220,57981,57982],{"class":222,"line":399},[220,57983,1765],{"class":264},[220,57985,57986,57988,57991],{"class":222,"line":644},[220,57987,1770],{"class":264},[220,57989,57990],{"class":230},"'LiquidMetal'",[220,57992,2465],{"class":264},[220,57994,57995],{"class":222,"line":650},[220,57996,1787],{"class":264},[220,57998,57999],{"class":222,"line":656},[220,58000,1792],{"class":264},[1504,58002,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":58004},[58005,58006],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":57814,"description":57822},"docs\u002Fcomponents\u002FLiquidMetal","LmQ5r2jwprcNrDO0hQT_86dYHtyOQFU-SFxP_e6xZTM",{"id":58013,"title":58014,"body":58015,"category":34929,"componentType":25253,"description":58022,"extension":191,"meta":58385,"navigation":194,"path":58386,"requiresChild":194,"seo":58387,"stem":58388,"__hash__":58389},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":58016,"toc":58381},[58017,58020,58023,58025,58027,58030,58032,58379],[11,58018,58014],{"id":58019},"liquify",[15,58021,58022],{},"Liquid-like interactive deformation effect",[31281,58024],{"component":58014},[23,58026,31285],{"id":25903},[31287,58028],{":props":58029},"[{\"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,58031,31293],{"id":31292},[246,58033,58034,58098,58169,58235,58305],{":tabs":1557},[212,58035,58037],{"className":334,"code":58036,"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,58038,58039,58047,58054,58062,58070,58074,58082,58090],{"__ignoreMap":178},[220,58040,58041,58043,58045],{"class":222,"line":223},[220,58042,343],{"class":264},[220,58044,347],{"class":346},[220,58046,359],{"class":264},[220,58048,58049,58051],{"class":222,"line":179},[220,58050,364],{"class":264},[220,58052,58053],{"class":346},"Liquify\n",[220,58055,58056,58058,58060],{"class":222,"line":389},[220,58057,19739],{"class":226},[220,58059,353],{"class":264},[220,58061,41519],{"class":230},[220,58063,58064,58066,58068],{"class":222,"line":399},[220,58065,16772],{"class":226},[220,58067,353],{"class":264},[220,58069,35995],{"class":230},[220,58071,58072],{"class":222,"line":644},[220,58073,31329],{"class":264},[220,58075,58076,58078,58080],{"class":222,"line":650},[220,58077,2550],{"class":264},[220,58079,2553],{"class":346},[220,58081,386],{"class":264},[220,58083,58084,58086,58088],{"class":222,"line":656},[220,58085,2567],{"class":264},[220,58087,58014],{"class":346},[220,58089,359],{"class":264},[220,58091,58092,58094,58096],{"class":222,"line":673},[220,58093,402],{"class":264},[220,58095,347],{"class":346},[220,58097,359],{"class":264},[212,58099,58101],{"className":409,"code":58100,"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,58102,58103,58111,58117,58129,58141,58145,58153,58161],{"__ignoreMap":178},[220,58104,58105,58107,58109],{"class":222,"line":223},[220,58106,343],{"class":264},[220,58108,347],{"class":420},[220,58110,359],{"class":264},[220,58112,58113,58115],{"class":222,"line":179},[220,58114,364],{"class":264},[220,58116,58053],{"class":420},[220,58118,58119,58121,58123,58125,58127],{"class":222,"line":389},[220,58120,19850],{"class":226},[220,58122,353],{"class":260},[220,58124,743],{"class":264},[220,58126,23219],{"class":420},[220,58128,749],{"class":264},[220,58130,58131,58133,58135,58137,58139],{"class":222,"line":399},[220,58132,9012],{"class":226},[220,58134,353],{"class":260},[220,58136,743],{"class":264},[220,58138,8043],{"class":420},[220,58140,749],{"class":264},[220,58142,58143],{"class":222,"line":644},[220,58144,31329],{"class":264},[220,58146,58147,58149,58151],{"class":222,"line":650},[220,58148,2550],{"class":264},[220,58150,2553],{"class":420},[220,58152,386],{"class":264},[220,58154,58155,58157,58159],{"class":222,"line":656},[220,58156,2567],{"class":264},[220,58158,58014],{"class":420},[220,58160,359],{"class":264},[220,58162,58163,58165,58167],{"class":222,"line":673},[220,58164,402],{"class":264},[220,58166,347],{"class":420},[220,58168,359],{"class":264},[212,58170,58171],{"className":2844,"code":58100,"language":2846,"meta":178,"style":178},[99,58172,58173,58181,58187,58197,58207,58211,58219,58227],{"__ignoreMap":178},[220,58174,58175,58177,58179],{"class":222,"line":223},[220,58176,343],{"class":264},[220,58178,347],{"class":420},[220,58180,359],{"class":264},[220,58182,58183,58185],{"class":222,"line":179},[220,58184,364],{"class":264},[220,58186,58053],{"class":420},[220,58188,58189,58191,58193,58195],{"class":222,"line":389},[220,58190,19850],{"class":226},[220,58192,29241],{"class":264},[220,58194,23219],{"class":420},[220,58196,749],{"class":264},[220,58198,58199,58201,58203,58205],{"class":222,"line":399},[220,58200,9012],{"class":226},[220,58202,29241],{"class":264},[220,58204,8043],{"class":420},[220,58206,749],{"class":264},[220,58208,58209],{"class":222,"line":644},[220,58210,31329],{"class":264},[220,58212,58213,58215,58217],{"class":222,"line":650},[220,58214,2550],{"class":264},[220,58216,2553],{"class":420},[220,58218,386],{"class":264},[220,58220,58221,58223,58225],{"class":222,"line":656},[220,58222,2567],{"class":264},[220,58224,58014],{"class":420},[220,58226,359],{"class":264},[220,58228,58229,58231,58233],{"class":222,"line":673},[220,58230,402],{"class":264},[220,58232,347],{"class":420},[220,58234,359],{"class":264},[212,58236,58237],{"className":468,"code":58100,"language":469,"meta":178,"style":178},[99,58238,58239,58247,58253,58265,58277,58281,58289,58297],{"__ignoreMap":178},[220,58240,58241,58243,58245],{"class":222,"line":223},[220,58242,343],{"class":264},[220,58244,347],{"class":420},[220,58246,359],{"class":264},[220,58248,58249,58251],{"class":222,"line":179},[220,58250,364],{"class":264},[220,58252,58053],{"class":420},[220,58254,58255,58257,58259,58261,58263],{"class":222,"line":389},[220,58256,19850],{"class":226},[220,58258,353],{"class":260},[220,58260,743],{"class":264},[220,58262,23219],{"class":420},[220,58264,749],{"class":264},[220,58266,58267,58269,58271,58273,58275],{"class":222,"line":399},[220,58268,9012],{"class":226},[220,58270,353],{"class":260},[220,58272,743],{"class":264},[220,58274,8043],{"class":420},[220,58276,749],{"class":264},[220,58278,58279],{"class":222,"line":644},[220,58280,31329],{"class":264},[220,58282,58283,58285,58287],{"class":222,"line":650},[220,58284,2550],{"class":264},[220,58286,2553],{"class":420},[220,58288,386],{"class":264},[220,58290,58291,58293,58295],{"class":222,"line":656},[220,58292,2567],{"class":264},[220,58294,58014],{"class":420},[220,58296,359],{"class":264},[220,58298,58299,58301,58303],{"class":222,"line":673},[220,58300,402],{"class":264},[220,58302,347],{"class":420},[220,58304,359],{"class":264},[212,58306,58308],{"className":251,"code":58307,"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,58309,58310,58320,58324,58338,58342,58359,58367,58371,58375],{"__ignoreMap":178},[220,58311,58312,58314,58316,58318],{"class":222,"line":223},[220,58313,261],{"class":260},[220,58315,10879],{"class":264},[220,58317,268],{"class":260},[220,58319,4007],{"class":230},[220,58321,58322],{"class":222,"line":179},[220,58323,647],{"emptyLinePlaceholder":194},[220,58325,58326,58328,58330,58332,58334,58336],{"class":222,"line":389},[220,58327,1735],{"class":260},[220,58329,1738],{"class":420},[220,58331,1741],{"class":260},[220,58333,1744],{"class":260},[220,58335,1747],{"class":226},[220,58337,1750],{"class":264},[220,58339,58340],{"class":222,"line":399},[220,58341,1765],{"class":264},[220,58343,58344,58346,58349,58351,58353,58355,58357],{"class":222,"line":644},[220,58345,1770],{"class":264},[220,58347,58348],{"class":230},"'Liquify'",[220,58350,31573],{"class":264},[220,58352,23219],{"class":420},[220,58354,5932],{"class":264},[220,58356,8043],{"class":420},[220,58358,6912],{"class":264},[220,58360,58361,58363,58365],{"class":222,"line":650},[220,58362,6380],{"class":264},[220,58364,3206],{"class":230},[220,58366,2465],{"class":264},[220,58368,58369],{"class":222,"line":656},[220,58370,6397],{"class":264},[220,58372,58373],{"class":222,"line":673},[220,58374,1787],{"class":264},[220,58376,58377],{"class":222,"line":682},[220,58378,1792],{"class":264},[1504,58380,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58382},[58383,58384],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":58014,"description":58022},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":58391,"title":58392,"body":58393,"category":34929,"componentType":25247,"description":58400,"extension":191,"meta":58585,"navigation":194,"path":58586,"requiresChild":31900,"seo":58587,"stem":58588,"__hash__":58589},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":58394,"toc":58581},[58395,58398,58401,58403,58405,58408,58410,58579],[11,58396,58392],{"id":58397},"magneticfilings",[15,58399,58400],{},"Thousands of tiny iron filings scattered on paper that swing to align with a magnetic field around the cursor, tracing out the field lines — a dipole whose axis follows the cursor's motion draws the classic two-lobed swirl, and every sweep of the magnet sends a glowing wave of filings flipping and settling",[31281,58402],{"component":58392},[23,58404,31285],{"id":25903},[31287,58406],{":props":58407},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#be1ef9\",\"description\":\"Color of filings resting quietly, aligned and still\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#6326ff\",\"description\":\"Color filings flash toward as they swing and settle — a wave of it follows the moving magnet\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"shape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"How each filing is drawn — a slim streak or arrow reads as a compass needle, a box as a chunky filing, a dot or soft glow for a finer grain\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"8000\",\"description\":\"Number of iron filings\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of each filing\"},{\"name\":\"restOrientation\",\"type\":\"\\\"random\\\" | \\\"horizontal\\\" | \\\"vertical\\\"\",\"default\":\"random\",\"description\":\"Which way filings point where the field can't reach them — randomly, all horizontal, or all vertical\"},{\"name\":\"fieldType\",\"type\":\"\\\"dipole\\\" | \\\"radial\\\"\",\"default\":\"dipole\",\"description\":\"The magnetic field the filings reveal — a dipole (bar-magnet lobes that follow the cursor's motion) or a radial monopole (spokes out from the cursor)\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1.7\",\"description\":\"How strongly the magnet grips the filings — higher snaps more of them into sharp alignment\"},{\"name\":\"reach\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once\"},{\"name\":\"response\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly\"}]",[23,58409,31293],{"id":31292},[246,58411,58412,58441,58469,58497,58525],{":tabs":1557},[212,58413,58415],{"className":334,"code":58414,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,58416,58417,58425,58433],{"__ignoreMap":178},[220,58418,58419,58421,58423],{"class":222,"line":223},[220,58420,343],{"class":264},[220,58422,347],{"class":346},[220,58424,359],{"class":264},[220,58426,58427,58429,58431],{"class":222,"line":179},[220,58428,364],{"class":264},[220,58430,58392],{"class":346},[220,58432,386],{"class":264},[220,58434,58435,58437,58439],{"class":222,"line":389},[220,58436,402],{"class":264},[220,58438,347],{"class":346},[220,58440,359],{"class":264},[212,58442,58443],{"className":409,"code":58414,"language":411,"meta":178,"style":178},[99,58444,58445,58453,58461],{"__ignoreMap":178},[220,58446,58447,58449,58451],{"class":222,"line":223},[220,58448,343],{"class":264},[220,58450,347],{"class":420},[220,58452,359],{"class":264},[220,58454,58455,58457,58459],{"class":222,"line":179},[220,58456,364],{"class":264},[220,58458,58392],{"class":420},[220,58460,386],{"class":264},[220,58462,58463,58465,58467],{"class":222,"line":389},[220,58464,402],{"class":264},[220,58466,347],{"class":420},[220,58468,359],{"class":264},[212,58470,58471],{"className":2844,"code":58414,"language":2846,"meta":178,"style":178},[99,58472,58473,58481,58489],{"__ignoreMap":178},[220,58474,58475,58477,58479],{"class":222,"line":223},[220,58476,343],{"class":264},[220,58478,347],{"class":420},[220,58480,359],{"class":264},[220,58482,58483,58485,58487],{"class":222,"line":179},[220,58484,364],{"class":264},[220,58486,58392],{"class":420},[220,58488,386],{"class":264},[220,58490,58491,58493,58495],{"class":222,"line":389},[220,58492,402],{"class":264},[220,58494,347],{"class":420},[220,58496,359],{"class":264},[212,58498,58499],{"className":468,"code":58414,"language":469,"meta":178,"style":178},[99,58500,58501,58509,58517],{"__ignoreMap":178},[220,58502,58503,58505,58507],{"class":222,"line":223},[220,58504,343],{"class":264},[220,58506,347],{"class":420},[220,58508,359],{"class":264},[220,58510,58511,58513,58515],{"class":222,"line":179},[220,58512,364],{"class":264},[220,58514,58392],{"class":420},[220,58516,386],{"class":264},[220,58518,58519,58521,58523],{"class":222,"line":389},[220,58520,402],{"class":264},[220,58522,347],{"class":420},[220,58524,359],{"class":264},[212,58526,58528],{"className":251,"code":58527,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MagneticFilings', props: {} }\n ]\n})\n",[99,58529,58530,58540,58544,58558,58562,58571,58575],{"__ignoreMap":178},[220,58531,58532,58534,58536,58538],{"class":222,"line":223},[220,58533,261],{"class":260},[220,58535,10879],{"class":264},[220,58537,268],{"class":260},[220,58539,4007],{"class":230},[220,58541,58542],{"class":222,"line":179},[220,58543,647],{"emptyLinePlaceholder":194},[220,58545,58546,58548,58550,58552,58554,58556],{"class":222,"line":389},[220,58547,1735],{"class":260},[220,58549,1738],{"class":420},[220,58551,1741],{"class":260},[220,58553,1744],{"class":260},[220,58555,1747],{"class":226},[220,58557,1750],{"class":264},[220,58559,58560],{"class":222,"line":399},[220,58561,1765],{"class":264},[220,58563,58564,58566,58569],{"class":222,"line":644},[220,58565,1770],{"class":264},[220,58567,58568],{"class":230},"'MagneticFilings'",[220,58570,2465],{"class":264},[220,58572,58573],{"class":222,"line":650},[220,58574,1787],{"class":264},[220,58576,58577],{"class":222,"line":656},[220,58578,1792],{"class":264},[1504,58580,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":58582},[58583,58584],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":58392,"description":58400},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":58591,"title":58592,"body":58593,"category":32433,"componentType":25247,"description":58600,"extension":191,"meta":58785,"navigation":194,"path":58786,"requiresChild":31900,"seo":58787,"stem":58788,"__hash__":58789},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":58594,"toc":58781},[58595,58598,58601,58603,58605,58608,58610,58779],[11,58596,58592],{"id":58597},"marble",[15,58599,58600],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31281,58602],{"component":58592},[23,58604,31285],{"id":25903},[31287,58606],{":props":58607},"[{\"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,58609,31293],{"id":31292},[246,58611,58612,58641,58669,58697,58725],{":tabs":1557},[212,58613,58615],{"className":334,"code":58614,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,58616,58617,58625,58633],{"__ignoreMap":178},[220,58618,58619,58621,58623],{"class":222,"line":223},[220,58620,343],{"class":264},[220,58622,347],{"class":346},[220,58624,359],{"class":264},[220,58626,58627,58629,58631],{"class":222,"line":179},[220,58628,364],{"class":264},[220,58630,58592],{"class":346},[220,58632,386],{"class":264},[220,58634,58635,58637,58639],{"class":222,"line":389},[220,58636,402],{"class":264},[220,58638,347],{"class":346},[220,58640,359],{"class":264},[212,58642,58643],{"className":409,"code":58614,"language":411,"meta":178,"style":178},[99,58644,58645,58653,58661],{"__ignoreMap":178},[220,58646,58647,58649,58651],{"class":222,"line":223},[220,58648,343],{"class":264},[220,58650,347],{"class":420},[220,58652,359],{"class":264},[220,58654,58655,58657,58659],{"class":222,"line":179},[220,58656,364],{"class":264},[220,58658,58592],{"class":420},[220,58660,386],{"class":264},[220,58662,58663,58665,58667],{"class":222,"line":389},[220,58664,402],{"class":264},[220,58666,347],{"class":420},[220,58668,359],{"class":264},[212,58670,58671],{"className":2844,"code":58614,"language":2846,"meta":178,"style":178},[99,58672,58673,58681,58689],{"__ignoreMap":178},[220,58674,58675,58677,58679],{"class":222,"line":223},[220,58676,343],{"class":264},[220,58678,347],{"class":420},[220,58680,359],{"class":264},[220,58682,58683,58685,58687],{"class":222,"line":179},[220,58684,364],{"class":264},[220,58686,58592],{"class":420},[220,58688,386],{"class":264},[220,58690,58691,58693,58695],{"class":222,"line":389},[220,58692,402],{"class":264},[220,58694,347],{"class":420},[220,58696,359],{"class":264},[212,58698,58699],{"className":468,"code":58614,"language":469,"meta":178,"style":178},[99,58700,58701,58709,58717],{"__ignoreMap":178},[220,58702,58703,58705,58707],{"class":222,"line":223},[220,58704,343],{"class":264},[220,58706,347],{"class":420},[220,58708,359],{"class":264},[220,58710,58711,58713,58715],{"class":222,"line":179},[220,58712,364],{"class":264},[220,58714,58592],{"class":420},[220,58716,386],{"class":264},[220,58718,58719,58721,58723],{"class":222,"line":389},[220,58720,402],{"class":264},[220,58722,347],{"class":420},[220,58724,359],{"class":264},[212,58726,58728],{"className":251,"code":58727,"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,58729,58730,58740,58744,58758,58762,58771,58775],{"__ignoreMap":178},[220,58731,58732,58734,58736,58738],{"class":222,"line":223},[220,58733,261],{"class":260},[220,58735,10879],{"class":264},[220,58737,268],{"class":260},[220,58739,4007],{"class":230},[220,58741,58742],{"class":222,"line":179},[220,58743,647],{"emptyLinePlaceholder":194},[220,58745,58746,58748,58750,58752,58754,58756],{"class":222,"line":389},[220,58747,1735],{"class":260},[220,58749,1738],{"class":420},[220,58751,1741],{"class":260},[220,58753,1744],{"class":260},[220,58755,1747],{"class":226},[220,58757,1750],{"class":264},[220,58759,58760],{"class":222,"line":399},[220,58761,1765],{"class":264},[220,58763,58764,58766,58769],{"class":222,"line":644},[220,58765,1770],{"class":264},[220,58767,58768],{"class":230},"'Marble'",[220,58770,2465],{"class":264},[220,58772,58773],{"class":222,"line":650},[220,58774,1787],{"class":264},[220,58776,58777],{"class":222,"line":656},[220,58778,1792],{"class":264},[1504,58780,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":58782},[58783,58784],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":58592,"description":58600},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":58791,"title":58792,"body":58793,"category":32766,"componentType":25253,"description":58800,"extension":191,"meta":59061,"navigation":194,"path":59062,"requiresChild":194,"seo":59063,"stem":59064,"__hash__":59065},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":58794,"toc":59057},[58795,58798,58801,58803,58805,58808,58810,59055],[11,58796,58792],{"id":58797},"mirror",[15,58799,58800],{},"Mirror content across a line defined by center point and angle",[31281,58802],{"component":58792},[23,58804,31285],{"id":25903},[31287,58806],{":props":58807},"[{\"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,58809,31293],{"id":31292},[246,58811,58812,58857,58901,58945,58989],{":tabs":1557},[212,58813,58815],{"className":334,"code":58814,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,58816,58817,58825,58833,58841,58849],{"__ignoreMap":178},[220,58818,58819,58821,58823],{"class":222,"line":223},[220,58820,343],{"class":264},[220,58822,347],{"class":346},[220,58824,359],{"class":264},[220,58826,58827,58829,58831],{"class":222,"line":179},[220,58828,364],{"class":264},[220,58830,58792],{"class":346},[220,58832,359],{"class":264},[220,58834,58835,58837,58839],{"class":222,"line":389},[220,58836,2550],{"class":264},[220,58838,2553],{"class":346},[220,58840,386],{"class":264},[220,58842,58843,58845,58847],{"class":222,"line":399},[220,58844,2567],{"class":264},[220,58846,58792],{"class":346},[220,58848,359],{"class":264},[220,58850,58851,58853,58855],{"class":222,"line":644},[220,58852,402],{"class":264},[220,58854,347],{"class":346},[220,58856,359],{"class":264},[212,58858,58859],{"className":409,"code":58814,"language":411,"meta":178,"style":178},[99,58860,58861,58869,58877,58885,58893],{"__ignoreMap":178},[220,58862,58863,58865,58867],{"class":222,"line":223},[220,58864,343],{"class":264},[220,58866,347],{"class":420},[220,58868,359],{"class":264},[220,58870,58871,58873,58875],{"class":222,"line":179},[220,58872,364],{"class":264},[220,58874,58792],{"class":420},[220,58876,359],{"class":264},[220,58878,58879,58881,58883],{"class":222,"line":389},[220,58880,2550],{"class":264},[220,58882,2553],{"class":420},[220,58884,386],{"class":264},[220,58886,58887,58889,58891],{"class":222,"line":399},[220,58888,2567],{"class":264},[220,58890,58792],{"class":420},[220,58892,359],{"class":264},[220,58894,58895,58897,58899],{"class":222,"line":644},[220,58896,402],{"class":264},[220,58898,347],{"class":420},[220,58900,359],{"class":264},[212,58902,58903],{"className":2844,"code":58814,"language":2846,"meta":178,"style":178},[99,58904,58905,58913,58921,58929,58937],{"__ignoreMap":178},[220,58906,58907,58909,58911],{"class":222,"line":223},[220,58908,343],{"class":264},[220,58910,347],{"class":420},[220,58912,359],{"class":264},[220,58914,58915,58917,58919],{"class":222,"line":179},[220,58916,364],{"class":264},[220,58918,58792],{"class":420},[220,58920,359],{"class":264},[220,58922,58923,58925,58927],{"class":222,"line":389},[220,58924,2550],{"class":264},[220,58926,2553],{"class":420},[220,58928,386],{"class":264},[220,58930,58931,58933,58935],{"class":222,"line":399},[220,58932,2567],{"class":264},[220,58934,58792],{"class":420},[220,58936,359],{"class":264},[220,58938,58939,58941,58943],{"class":222,"line":644},[220,58940,402],{"class":264},[220,58942,347],{"class":420},[220,58944,359],{"class":264},[212,58946,58947],{"className":468,"code":58814,"language":469,"meta":178,"style":178},[99,58948,58949,58957,58965,58973,58981],{"__ignoreMap":178},[220,58950,58951,58953,58955],{"class":222,"line":223},[220,58952,343],{"class":264},[220,58954,347],{"class":420},[220,58956,359],{"class":264},[220,58958,58959,58961,58963],{"class":222,"line":179},[220,58960,364],{"class":264},[220,58962,58792],{"class":420},[220,58964,359],{"class":264},[220,58966,58967,58969,58971],{"class":222,"line":389},[220,58968,2550],{"class":264},[220,58970,2553],{"class":420},[220,58972,386],{"class":264},[220,58974,58975,58977,58979],{"class":222,"line":399},[220,58976,2567],{"class":264},[220,58978,58792],{"class":420},[220,58980,359],{"class":264},[220,58982,58983,58985,58987],{"class":222,"line":644},[220,58984,402],{"class":264},[220,58986,347],{"class":420},[220,58988,359],{"class":264},[212,58990,58992],{"className":251,"code":58991,"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,58993,58994,59004,59008,59022,59026,59035,59043,59047,59051],{"__ignoreMap":178},[220,58995,58996,58998,59000,59002],{"class":222,"line":223},[220,58997,261],{"class":260},[220,58999,10879],{"class":264},[220,59001,268],{"class":260},[220,59003,4007],{"class":230},[220,59005,59006],{"class":222,"line":179},[220,59007,647],{"emptyLinePlaceholder":194},[220,59009,59010,59012,59014,59016,59018,59020],{"class":222,"line":389},[220,59011,1735],{"class":260},[220,59013,1738],{"class":420},[220,59015,1741],{"class":260},[220,59017,1744],{"class":260},[220,59019,1747],{"class":226},[220,59021,1750],{"class":264},[220,59023,59024],{"class":222,"line":399},[220,59025,1765],{"class":264},[220,59027,59028,59030,59033],{"class":222,"line":644},[220,59029,1770],{"class":264},[220,59031,59032],{"class":230},"'Mirror'",[220,59034,6375],{"class":264},[220,59036,59037,59039,59041],{"class":222,"line":650},[220,59038,6380],{"class":264},[220,59040,3206],{"class":230},[220,59042,2465],{"class":264},[220,59044,59045],{"class":222,"line":656},[220,59046,6397],{"class":264},[220,59048,59049],{"class":222,"line":673},[220,59050,1787],{"class":264},[220,59052,59053],{"class":222,"line":682},[220,59054,1792],{"class":264},[1504,59056,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":59058},[59059,59060],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":58792,"description":58800},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":59067,"title":59068,"body":59069,"category":32433,"componentType":25247,"description":59076,"extension":191,"meta":59261,"navigation":194,"path":59262,"requiresChild":31900,"seo":59263,"stem":59264,"__hash__":59265},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":59070,"toc":59257},[59071,59074,59077,59079,59081,59084,59086,59255],[11,59072,59068],{"id":59073},"multipointgradient",[15,59075,59076],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31281,59078],{"component":59068},[23,59080,31285],{"id":25903},[31287,59082],{":props":59083},"[{\"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,59085,31293],{"id":31292},[246,59087,59088,59117,59145,59173,59201],{":tabs":1557},[212,59089,59091],{"className":334,"code":59090,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,59092,59093,59101,59109],{"__ignoreMap":178},[220,59094,59095,59097,59099],{"class":222,"line":223},[220,59096,343],{"class":264},[220,59098,347],{"class":346},[220,59100,359],{"class":264},[220,59102,59103,59105,59107],{"class":222,"line":179},[220,59104,364],{"class":264},[220,59106,59068],{"class":346},[220,59108,386],{"class":264},[220,59110,59111,59113,59115],{"class":222,"line":389},[220,59112,402],{"class":264},[220,59114,347],{"class":346},[220,59116,359],{"class":264},[212,59118,59119],{"className":409,"code":59090,"language":411,"meta":178,"style":178},[99,59120,59121,59129,59137],{"__ignoreMap":178},[220,59122,59123,59125,59127],{"class":222,"line":223},[220,59124,343],{"class":264},[220,59126,347],{"class":420},[220,59128,359],{"class":264},[220,59130,59131,59133,59135],{"class":222,"line":179},[220,59132,364],{"class":264},[220,59134,59068],{"class":420},[220,59136,386],{"class":264},[220,59138,59139,59141,59143],{"class":222,"line":389},[220,59140,402],{"class":264},[220,59142,347],{"class":420},[220,59144,359],{"class":264},[212,59146,59147],{"className":2844,"code":59090,"language":2846,"meta":178,"style":178},[99,59148,59149,59157,59165],{"__ignoreMap":178},[220,59150,59151,59153,59155],{"class":222,"line":223},[220,59152,343],{"class":264},[220,59154,347],{"class":420},[220,59156,359],{"class":264},[220,59158,59159,59161,59163],{"class":222,"line":179},[220,59160,364],{"class":264},[220,59162,59068],{"class":420},[220,59164,386],{"class":264},[220,59166,59167,59169,59171],{"class":222,"line":389},[220,59168,402],{"class":264},[220,59170,347],{"class":420},[220,59172,359],{"class":264},[212,59174,59175],{"className":468,"code":59090,"language":469,"meta":178,"style":178},[99,59176,59177,59185,59193],{"__ignoreMap":178},[220,59178,59179,59181,59183],{"class":222,"line":223},[220,59180,343],{"class":264},[220,59182,347],{"class":420},[220,59184,359],{"class":264},[220,59186,59187,59189,59191],{"class":222,"line":179},[220,59188,364],{"class":264},[220,59190,59068],{"class":420},[220,59192,386],{"class":264},[220,59194,59195,59197,59199],{"class":222,"line":389},[220,59196,402],{"class":264},[220,59198,347],{"class":420},[220,59200,359],{"class":264},[212,59202,59204],{"className":251,"code":59203,"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,59205,59206,59216,59220,59234,59238,59247,59251],{"__ignoreMap":178},[220,59207,59208,59210,59212,59214],{"class":222,"line":223},[220,59209,261],{"class":260},[220,59211,10879],{"class":264},[220,59213,268],{"class":260},[220,59215,4007],{"class":230},[220,59217,59218],{"class":222,"line":179},[220,59219,647],{"emptyLinePlaceholder":194},[220,59221,59222,59224,59226,59228,59230,59232],{"class":222,"line":389},[220,59223,1735],{"class":260},[220,59225,1738],{"class":420},[220,59227,1741],{"class":260},[220,59229,1744],{"class":260},[220,59231,1747],{"class":226},[220,59233,1750],{"class":264},[220,59235,59236],{"class":222,"line":399},[220,59237,1765],{"class":264},[220,59239,59240,59242,59245],{"class":222,"line":644},[220,59241,1770],{"class":264},[220,59243,59244],{"class":230},"'MultiPointGradient'",[220,59246,2465],{"class":264},[220,59248,59249],{"class":222,"line":650},[220,59250,1787],{"class":264},[220,59252,59253],{"class":222,"line":656},[220,59254,1792],{"class":264},[1504,59256,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":59258},[59259,59260],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":59068,"description":59076},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":59267,"title":20348,"body":59268,"category":35939,"componentType":25247,"description":59275,"extension":191,"meta":59555,"navigation":194,"path":59556,"requiresChild":31900,"seo":59557,"stem":59558,"__hash__":59559},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":59269,"toc":59551},[59270,59273,59276,59278,59280,59283,59285,59549],[11,59271,20348],{"id":59272},"neon",[15,59274,59275],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31281,59277],{"component":20348},[23,59279,31285],{"id":25903},[31287,59281],{":props":59282},"[{\"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,59284,31293],{"id":31292},[246,59286,59287,59337,59389,59437,59487],{":tabs":1557},[212,59288,59290],{"className":334,"code":59289,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,59291,59292,59300,59307,59316,59325,59329],{"__ignoreMap":178},[220,59293,59294,59296,59298],{"class":222,"line":223},[220,59295,343],{"class":264},[220,59297,347],{"class":346},[220,59299,359],{"class":264},[220,59301,59302,59304],{"class":222,"line":179},[220,59303,364],{"class":264},[220,59305,59306],{"class":346},"Neon\n",[220,59308,59309,59311,59313],{"class":222,"line":389},[220,59310,9002],{"class":226},[220,59312,353],{"class":264},[220,59314,59315],{"class":230},"\"#00ddff\"\n",[220,59317,59318,59320,59322],{"class":222,"line":399},[220,59319,19739],{"class":226},[220,59321,353],{"class":264},[220,59323,59324],{"class":230},"\"1.5\"\n",[220,59326,59327],{"class":222,"line":644},[220,59328,1234],{"class":264},[220,59330,59331,59333,59335],{"class":222,"line":650},[220,59332,402],{"class":264},[220,59334,347],{"class":346},[220,59336,359],{"class":264},[212,59338,59340],{"className":409,"code":59339,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,59341,59342,59350,59356,59364,59377,59381],{"__ignoreMap":178},[220,59343,59344,59346,59348],{"class":222,"line":223},[220,59345,343],{"class":264},[220,59347,347],{"class":420},[220,59349,359],{"class":264},[220,59351,59352,59354],{"class":222,"line":179},[220,59353,364],{"class":264},[220,59355,59306],{"class":420},[220,59357,59358,59360,59362],{"class":222,"line":389},[220,59359,9002],{"class":226},[220,59361,353],{"class":260},[220,59363,59315],{"class":230},[220,59365,59366,59368,59370,59372,59375],{"class":222,"line":399},[220,59367,19850],{"class":226},[220,59369,353],{"class":260},[220,59371,743],{"class":264},[220,59373,59374],{"class":420},"1.5",[220,59376,749],{"class":264},[220,59378,59379],{"class":222,"line":644},[220,59380,1234],{"class":264},[220,59382,59383,59385,59387],{"class":222,"line":650},[220,59384,402],{"class":264},[220,59386,347],{"class":420},[220,59388,359],{"class":264},[212,59390,59391],{"className":2844,"code":59339,"language":2846,"meta":178,"style":178},[99,59392,59393,59401,59407,59415,59425,59429],{"__ignoreMap":178},[220,59394,59395,59397,59399],{"class":222,"line":223},[220,59396,343],{"class":264},[220,59398,347],{"class":420},[220,59400,359],{"class":264},[220,59402,59403,59405],{"class":222,"line":179},[220,59404,364],{"class":264},[220,59406,59306],{"class":420},[220,59408,59409,59411,59413],{"class":222,"line":389},[220,59410,9002],{"class":226},[220,59412,353],{"class":264},[220,59414,59315],{"class":230},[220,59416,59417,59419,59421,59423],{"class":222,"line":399},[220,59418,19850],{"class":226},[220,59420,29241],{"class":264},[220,59422,59374],{"class":420},[220,59424,749],{"class":264},[220,59426,59427],{"class":222,"line":644},[220,59428,1234],{"class":264},[220,59430,59431,59433,59435],{"class":222,"line":650},[220,59432,402],{"class":264},[220,59434,347],{"class":420},[220,59436,359],{"class":264},[212,59438,59439],{"className":468,"code":59339,"language":469,"meta":178,"style":178},[99,59440,59441,59449,59455,59463,59475,59479],{"__ignoreMap":178},[220,59442,59443,59445,59447],{"class":222,"line":223},[220,59444,343],{"class":264},[220,59446,347],{"class":420},[220,59448,359],{"class":264},[220,59450,59451,59453],{"class":222,"line":179},[220,59452,364],{"class":264},[220,59454,59306],{"class":420},[220,59456,59457,59459,59461],{"class":222,"line":389},[220,59458,9002],{"class":226},[220,59460,353],{"class":260},[220,59462,59315],{"class":230},[220,59464,59465,59467,59469,59471,59473],{"class":222,"line":399},[220,59466,19850],{"class":226},[220,59468,353],{"class":260},[220,59470,743],{"class":264},[220,59472,59374],{"class":420},[220,59474,749],{"class":264},[220,59476,59477],{"class":222,"line":644},[220,59478,1234],{"class":264},[220,59480,59481,59483,59485],{"class":222,"line":650},[220,59482,402],{"class":264},[220,59484,347],{"class":420},[220,59486,359],{"class":264},[212,59488,59490],{"className":251,"code":59489,"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,59491,59492,59502,59506,59520,59524,59541,59545],{"__ignoreMap":178},[220,59493,59494,59496,59498,59500],{"class":222,"line":223},[220,59495,261],{"class":260},[220,59497,10879],{"class":264},[220,59499,268],{"class":260},[220,59501,4007],{"class":230},[220,59503,59504],{"class":222,"line":179},[220,59505,647],{"emptyLinePlaceholder":194},[220,59507,59508,59510,59512,59514,59516,59518],{"class":222,"line":389},[220,59509,1735],{"class":260},[220,59511,1738],{"class":420},[220,59513,1741],{"class":260},[220,59515,1744],{"class":260},[220,59517,1747],{"class":226},[220,59519,1750],{"class":264},[220,59521,59522],{"class":222,"line":399},[220,59523,1765],{"class":264},[220,59525,59526,59528,59530,59532,59535,59537,59539],{"class":222,"line":644},[220,59527,1770],{"class":264},[220,59529,20955],{"class":230},[220,59531,1776],{"class":264},[220,59533,59534],{"class":230},"'#00ddff'",[220,59536,44373],{"class":264},[220,59538,59374],{"class":420},[220,59540,1782],{"class":264},[220,59542,59543],{"class":222,"line":650},[220,59544,1787],{"class":264},[220,59546,59547],{"class":222,"line":656},[220,59548,1792],{"class":264},[1504,59550,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59552},[59553,59554],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20348,"description":59275},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":59561,"title":59562,"body":59563,"category":33043,"componentType":25253,"description":59570,"extension":191,"meta":59831,"navigation":194,"path":59832,"requiresChild":194,"seo":59833,"stem":59834,"__hash__":59835},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":59564,"toc":59827},[59565,59568,59571,59573,59575,59578,59580,59825],[11,59566,59562],{"id":59567},"noisedissolve",[15,59569,59570],{},"Dissolve the content away through an organic noise pattern",[31281,59572],{"component":59562},[23,59574,31285],{"id":25903},[31287,59576],{":props":59577},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the dissolve has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Frequency of the dissolve pattern (higher = smaller blobs)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"How softly the erosion edge fades out (0 = hard-edged blobs)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the pattern dissolves in\"}]",[23,59579,31293],{"id":31292},[246,59581,59582,59627,59671,59715,59759],{":tabs":1557},[212,59583,59585],{"className":334,"code":59584,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,59586,59587,59595,59603,59611,59619],{"__ignoreMap":178},[220,59588,59589,59591,59593],{"class":222,"line":223},[220,59590,343],{"class":264},[220,59592,347],{"class":346},[220,59594,359],{"class":264},[220,59596,59597,59599,59601],{"class":222,"line":179},[220,59598,364],{"class":264},[220,59600,59562],{"class":346},[220,59602,359],{"class":264},[220,59604,59605,59607,59609],{"class":222,"line":389},[220,59606,2550],{"class":264},[220,59608,2553],{"class":346},[220,59610,386],{"class":264},[220,59612,59613,59615,59617],{"class":222,"line":399},[220,59614,2567],{"class":264},[220,59616,59562],{"class":346},[220,59618,359],{"class":264},[220,59620,59621,59623,59625],{"class":222,"line":644},[220,59622,402],{"class":264},[220,59624,347],{"class":346},[220,59626,359],{"class":264},[212,59628,59629],{"className":409,"code":59584,"language":411,"meta":178,"style":178},[99,59630,59631,59639,59647,59655,59663],{"__ignoreMap":178},[220,59632,59633,59635,59637],{"class":222,"line":223},[220,59634,343],{"class":264},[220,59636,347],{"class":420},[220,59638,359],{"class":264},[220,59640,59641,59643,59645],{"class":222,"line":179},[220,59642,364],{"class":264},[220,59644,59562],{"class":420},[220,59646,359],{"class":264},[220,59648,59649,59651,59653],{"class":222,"line":389},[220,59650,2550],{"class":264},[220,59652,2553],{"class":420},[220,59654,386],{"class":264},[220,59656,59657,59659,59661],{"class":222,"line":399},[220,59658,2567],{"class":264},[220,59660,59562],{"class":420},[220,59662,359],{"class":264},[220,59664,59665,59667,59669],{"class":222,"line":644},[220,59666,402],{"class":264},[220,59668,347],{"class":420},[220,59670,359],{"class":264},[212,59672,59673],{"className":2844,"code":59584,"language":2846,"meta":178,"style":178},[99,59674,59675,59683,59691,59699,59707],{"__ignoreMap":178},[220,59676,59677,59679,59681],{"class":222,"line":223},[220,59678,343],{"class":264},[220,59680,347],{"class":420},[220,59682,359],{"class":264},[220,59684,59685,59687,59689],{"class":222,"line":179},[220,59686,364],{"class":264},[220,59688,59562],{"class":420},[220,59690,359],{"class":264},[220,59692,59693,59695,59697],{"class":222,"line":389},[220,59694,2550],{"class":264},[220,59696,2553],{"class":420},[220,59698,386],{"class":264},[220,59700,59701,59703,59705],{"class":222,"line":399},[220,59702,2567],{"class":264},[220,59704,59562],{"class":420},[220,59706,359],{"class":264},[220,59708,59709,59711,59713],{"class":222,"line":644},[220,59710,402],{"class":264},[220,59712,347],{"class":420},[220,59714,359],{"class":264},[212,59716,59717],{"className":468,"code":59584,"language":469,"meta":178,"style":178},[99,59718,59719,59727,59735,59743,59751],{"__ignoreMap":178},[220,59720,59721,59723,59725],{"class":222,"line":223},[220,59722,343],{"class":264},[220,59724,347],{"class":420},[220,59726,359],{"class":264},[220,59728,59729,59731,59733],{"class":222,"line":179},[220,59730,364],{"class":264},[220,59732,59562],{"class":420},[220,59734,359],{"class":264},[220,59736,59737,59739,59741],{"class":222,"line":389},[220,59738,2550],{"class":264},[220,59740,2553],{"class":420},[220,59742,386],{"class":264},[220,59744,59745,59747,59749],{"class":222,"line":399},[220,59746,2567],{"class":264},[220,59748,59562],{"class":420},[220,59750,359],{"class":264},[220,59752,59753,59755,59757],{"class":222,"line":644},[220,59754,402],{"class":264},[220,59756,347],{"class":420},[220,59758,359],{"class":264},[212,59760,59762],{"className":251,"code":59761,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'NoiseDissolve', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,59763,59764,59774,59778,59792,59796,59805,59813,59817,59821],{"__ignoreMap":178},[220,59765,59766,59768,59770,59772],{"class":222,"line":223},[220,59767,261],{"class":260},[220,59769,10879],{"class":264},[220,59771,268],{"class":260},[220,59773,4007],{"class":230},[220,59775,59776],{"class":222,"line":179},[220,59777,647],{"emptyLinePlaceholder":194},[220,59779,59780,59782,59784,59786,59788,59790],{"class":222,"line":389},[220,59781,1735],{"class":260},[220,59783,1738],{"class":420},[220,59785,1741],{"class":260},[220,59787,1744],{"class":260},[220,59789,1747],{"class":226},[220,59791,1750],{"class":264},[220,59793,59794],{"class":222,"line":399},[220,59795,1765],{"class":264},[220,59797,59798,59800,59803],{"class":222,"line":644},[220,59799,1770],{"class":264},[220,59801,59802],{"class":230},"'NoiseDissolve'",[220,59804,6375],{"class":264},[220,59806,59807,59809,59811],{"class":222,"line":650},[220,59808,6380],{"class":264},[220,59810,3206],{"class":230},[220,59812,2465],{"class":264},[220,59814,59815],{"class":222,"line":656},[220,59816,6397],{"class":264},[220,59818,59819],{"class":222,"line":673},[220,59820,1787],{"class":264},[220,59822,59823],{"class":222,"line":682},[220,59824,1792],{"class":264},[1504,59826,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":59828},[59829,59830],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":59562,"description":59570},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":59837,"title":59838,"body":59839,"category":32176,"componentType":25253,"description":59846,"extension":191,"meta":60107,"navigation":194,"path":60108,"requiresChild":194,"seo":60109,"stem":60110,"__hash__":60111},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":59840,"toc":60103},[59841,59844,59847,59849,59851,59854,59856,60101],[11,59842,59838],{"id":59843},"objecttracker",[15,59845,59846],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[31281,59848],{"component":59838},[23,59850,31285],{"id":25903},[31287,59852],{":props":59853},"[{\"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,59855,31293],{"id":31292},[246,59857,59858,59903,59947,59991,60035],{":tabs":1557},[212,59859,59861],{"className":334,"code":59860,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,59862,59863,59871,59879,59887,59895],{"__ignoreMap":178},[220,59864,59865,59867,59869],{"class":222,"line":223},[220,59866,343],{"class":264},[220,59868,347],{"class":346},[220,59870,359],{"class":264},[220,59872,59873,59875,59877],{"class":222,"line":179},[220,59874,364],{"class":264},[220,59876,59838],{"class":346},[220,59878,359],{"class":264},[220,59880,59881,59883,59885],{"class":222,"line":389},[220,59882,2550],{"class":264},[220,59884,2553],{"class":346},[220,59886,386],{"class":264},[220,59888,59889,59891,59893],{"class":222,"line":399},[220,59890,2567],{"class":264},[220,59892,59838],{"class":346},[220,59894,359],{"class":264},[220,59896,59897,59899,59901],{"class":222,"line":644},[220,59898,402],{"class":264},[220,59900,347],{"class":346},[220,59902,359],{"class":264},[212,59904,59905],{"className":409,"code":59860,"language":411,"meta":178,"style":178},[99,59906,59907,59915,59923,59931,59939],{"__ignoreMap":178},[220,59908,59909,59911,59913],{"class":222,"line":223},[220,59910,343],{"class":264},[220,59912,347],{"class":420},[220,59914,359],{"class":264},[220,59916,59917,59919,59921],{"class":222,"line":179},[220,59918,364],{"class":264},[220,59920,59838],{"class":420},[220,59922,359],{"class":264},[220,59924,59925,59927,59929],{"class":222,"line":389},[220,59926,2550],{"class":264},[220,59928,2553],{"class":420},[220,59930,386],{"class":264},[220,59932,59933,59935,59937],{"class":222,"line":399},[220,59934,2567],{"class":264},[220,59936,59838],{"class":420},[220,59938,359],{"class":264},[220,59940,59941,59943,59945],{"class":222,"line":644},[220,59942,402],{"class":264},[220,59944,347],{"class":420},[220,59946,359],{"class":264},[212,59948,59949],{"className":2844,"code":59860,"language":2846,"meta":178,"style":178},[99,59950,59951,59959,59967,59975,59983],{"__ignoreMap":178},[220,59952,59953,59955,59957],{"class":222,"line":223},[220,59954,343],{"class":264},[220,59956,347],{"class":420},[220,59958,359],{"class":264},[220,59960,59961,59963,59965],{"class":222,"line":179},[220,59962,364],{"class":264},[220,59964,59838],{"class":420},[220,59966,359],{"class":264},[220,59968,59969,59971,59973],{"class":222,"line":389},[220,59970,2550],{"class":264},[220,59972,2553],{"class":420},[220,59974,386],{"class":264},[220,59976,59977,59979,59981],{"class":222,"line":399},[220,59978,2567],{"class":264},[220,59980,59838],{"class":420},[220,59982,359],{"class":264},[220,59984,59985,59987,59989],{"class":222,"line":644},[220,59986,402],{"class":264},[220,59988,347],{"class":420},[220,59990,359],{"class":264},[212,59992,59993],{"className":468,"code":59860,"language":469,"meta":178,"style":178},[99,59994,59995,60003,60011,60019,60027],{"__ignoreMap":178},[220,59996,59997,59999,60001],{"class":222,"line":223},[220,59998,343],{"class":264},[220,60000,347],{"class":420},[220,60002,359],{"class":264},[220,60004,60005,60007,60009],{"class":222,"line":179},[220,60006,364],{"class":264},[220,60008,59838],{"class":420},[220,60010,359],{"class":264},[220,60012,60013,60015,60017],{"class":222,"line":389},[220,60014,2550],{"class":264},[220,60016,2553],{"class":420},[220,60018,386],{"class":264},[220,60020,60021,60023,60025],{"class":222,"line":399},[220,60022,2567],{"class":264},[220,60024,59838],{"class":420},[220,60026,359],{"class":264},[220,60028,60029,60031,60033],{"class":222,"line":644},[220,60030,402],{"class":264},[220,60032,347],{"class":420},[220,60034,359],{"class":264},[212,60036,60038],{"className":251,"code":60037,"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,60039,60040,60050,60054,60068,60072,60081,60089,60093,60097],{"__ignoreMap":178},[220,60041,60042,60044,60046,60048],{"class":222,"line":223},[220,60043,261],{"class":260},[220,60045,10879],{"class":264},[220,60047,268],{"class":260},[220,60049,4007],{"class":230},[220,60051,60052],{"class":222,"line":179},[220,60053,647],{"emptyLinePlaceholder":194},[220,60055,60056,60058,60060,60062,60064,60066],{"class":222,"line":389},[220,60057,1735],{"class":260},[220,60059,1738],{"class":420},[220,60061,1741],{"class":260},[220,60063,1744],{"class":260},[220,60065,1747],{"class":226},[220,60067,1750],{"class":264},[220,60069,60070],{"class":222,"line":399},[220,60071,1765],{"class":264},[220,60073,60074,60076,60079],{"class":222,"line":644},[220,60075,1770],{"class":264},[220,60077,60078],{"class":230},"'ObjectTracker'",[220,60080,6375],{"class":264},[220,60082,60083,60085,60087],{"class":222,"line":650},[220,60084,6380],{"class":264},[220,60086,3206],{"class":230},[220,60088,2465],{"class":264},[220,60090,60091],{"class":222,"line":656},[220,60092,6397],{"class":264},[220,60094,60095],{"class":222,"line":673},[220,60096,1787],{"class":264},[220,60098,60099],{"class":222,"line":682},[220,60100,1792],{"class":264},[1504,60102,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":60104},[60105,60106],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":59838,"description":59846},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":60113,"title":60114,"body":60115,"category":33043,"componentType":25253,"description":60122,"extension":191,"meta":60440,"navigation":194,"path":60441,"requiresChild":194,"seo":60442,"stem":60443,"__hash__":60444},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":60116,"toc":60436},[60117,60120,60123,60125,60127,60130,60132,60434],[11,60118,60114],{"id":60119},"pagepeel",[15,60121,60122],{},"Curl the content up from a corner like a peeling page",[31281,60124],{"component":60114},[23,60126,31285],{"id":25903},[31287,60128],{":props":60129},"[{\"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,60131,31293],{"id":31292},[246,60133,60134,60191,60250,60306,60364],{":tabs":1557},[212,60135,60137],{"className":334,"code":60136,"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,60138,60139,60147,60154,60163,60167,60175,60183],{"__ignoreMap":178},[220,60140,60141,60143,60145],{"class":222,"line":223},[220,60142,343],{"class":264},[220,60144,347],{"class":346},[220,60146,359],{"class":264},[220,60148,60149,60151],{"class":222,"line":179},[220,60150,364],{"class":264},[220,60152,60153],{"class":346},"PagePeel\n",[220,60155,60156,60158,60160],{"class":222,"line":389},[220,60157,16772],{"class":226},[220,60159,353],{"class":264},[220,60161,60162],{"class":230},"\"0.2\"\n",[220,60164,60165],{"class":222,"line":399},[220,60166,31329],{"class":264},[220,60168,60169,60171,60173],{"class":222,"line":644},[220,60170,2550],{"class":264},[220,60172,2553],{"class":346},[220,60174,386],{"class":264},[220,60176,60177,60179,60181],{"class":222,"line":650},[220,60178,2567],{"class":264},[220,60180,60114],{"class":346},[220,60182,359],{"class":264},[220,60184,60185,60187,60189],{"class":222,"line":656},[220,60186,402],{"class":264},[220,60188,347],{"class":346},[220,60190,359],{"class":264},[212,60192,60194],{"className":409,"code":60193,"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,60195,60196,60204,60210,60222,60226,60234,60242],{"__ignoreMap":178},[220,60197,60198,60200,60202],{"class":222,"line":223},[220,60199,343],{"class":264},[220,60201,347],{"class":420},[220,60203,359],{"class":264},[220,60205,60206,60208],{"class":222,"line":179},[220,60207,364],{"class":264},[220,60209,60153],{"class":420},[220,60211,60212,60214,60216,60218,60220],{"class":222,"line":389},[220,60213,9012],{"class":226},[220,60215,353],{"class":260},[220,60217,743],{"class":264},[220,60219,16343],{"class":420},[220,60221,749],{"class":264},[220,60223,60224],{"class":222,"line":399},[220,60225,31329],{"class":264},[220,60227,60228,60230,60232],{"class":222,"line":644},[220,60229,2550],{"class":264},[220,60231,2553],{"class":420},[220,60233,386],{"class":264},[220,60235,60236,60238,60240],{"class":222,"line":650},[220,60237,2567],{"class":264},[220,60239,60114],{"class":420},[220,60241,359],{"class":264},[220,60243,60244,60246,60248],{"class":222,"line":656},[220,60245,402],{"class":264},[220,60247,347],{"class":420},[220,60249,359],{"class":264},[212,60251,60252],{"className":2844,"code":60193,"language":2846,"meta":178,"style":178},[99,60253,60254,60262,60268,60278,60282,60290,60298],{"__ignoreMap":178},[220,60255,60256,60258,60260],{"class":222,"line":223},[220,60257,343],{"class":264},[220,60259,347],{"class":420},[220,60261,359],{"class":264},[220,60263,60264,60266],{"class":222,"line":179},[220,60265,364],{"class":264},[220,60267,60153],{"class":420},[220,60269,60270,60272,60274,60276],{"class":222,"line":389},[220,60271,9012],{"class":226},[220,60273,29241],{"class":264},[220,60275,16343],{"class":420},[220,60277,749],{"class":264},[220,60279,60280],{"class":222,"line":399},[220,60281,31329],{"class":264},[220,60283,60284,60286,60288],{"class":222,"line":644},[220,60285,2550],{"class":264},[220,60287,2553],{"class":420},[220,60289,386],{"class":264},[220,60291,60292,60294,60296],{"class":222,"line":650},[220,60293,2567],{"class":264},[220,60295,60114],{"class":420},[220,60297,359],{"class":264},[220,60299,60300,60302,60304],{"class":222,"line":656},[220,60301,402],{"class":264},[220,60303,347],{"class":420},[220,60305,359],{"class":264},[212,60307,60308],{"className":468,"code":60193,"language":469,"meta":178,"style":178},[99,60309,60310,60318,60324,60336,60340,60348,60356],{"__ignoreMap":178},[220,60311,60312,60314,60316],{"class":222,"line":223},[220,60313,343],{"class":264},[220,60315,347],{"class":420},[220,60317,359],{"class":264},[220,60319,60320,60322],{"class":222,"line":179},[220,60321,364],{"class":264},[220,60323,60153],{"class":420},[220,60325,60326,60328,60330,60332,60334],{"class":222,"line":389},[220,60327,9012],{"class":226},[220,60329,353],{"class":260},[220,60331,743],{"class":264},[220,60333,16343],{"class":420},[220,60335,749],{"class":264},[220,60337,60338],{"class":222,"line":399},[220,60339,31329],{"class":264},[220,60341,60342,60344,60346],{"class":222,"line":644},[220,60343,2550],{"class":264},[220,60345,2553],{"class":420},[220,60347,386],{"class":264},[220,60349,60350,60352,60354],{"class":222,"line":650},[220,60351,2567],{"class":264},[220,60353,60114],{"class":420},[220,60355,359],{"class":264},[220,60357,60358,60360,60362],{"class":222,"line":656},[220,60359,402],{"class":264},[220,60361,347],{"class":420},[220,60363,359],{"class":264},[212,60365,60367],{"className":251,"code":60366,"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,60368,60369,60379,60383,60397,60401,60414,60422,60426,60430],{"__ignoreMap":178},[220,60370,60371,60373,60375,60377],{"class":222,"line":223},[220,60372,261],{"class":260},[220,60374,10879],{"class":264},[220,60376,268],{"class":260},[220,60378,4007],{"class":230},[220,60380,60381],{"class":222,"line":179},[220,60382,647],{"emptyLinePlaceholder":194},[220,60384,60385,60387,60389,60391,60393,60395],{"class":222,"line":389},[220,60386,1735],{"class":260},[220,60388,1738],{"class":420},[220,60390,1741],{"class":260},[220,60392,1744],{"class":260},[220,60394,1747],{"class":226},[220,60396,1750],{"class":264},[220,60398,60399],{"class":222,"line":399},[220,60400,1765],{"class":264},[220,60402,60403,60405,60408,60410,60412],{"class":222,"line":644},[220,60404,1770],{"class":264},[220,60406,60407],{"class":230},"'PagePeel'",[220,60409,6907],{"class":264},[220,60411,16343],{"class":420},[220,60413,6912],{"class":264},[220,60415,60416,60418,60420],{"class":222,"line":650},[220,60417,6380],{"class":264},[220,60419,3206],{"class":230},[220,60421,2465],{"class":264},[220,60423,60424],{"class":222,"line":656},[220,60425,6397],{"class":264},[220,60427,60428],{"class":222,"line":673},[220,60429,1787],{"class":264},[220,60431,60432],{"class":222,"line":682},[220,60433,1792],{"class":264},[1504,60435,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60437},[60438,60439],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":60114,"description":60122},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":60446,"title":60447,"body":60448,"category":32176,"componentType":25253,"description":60455,"extension":191,"meta":60716,"navigation":194,"path":60717,"requiresChild":194,"seo":60718,"stem":60719,"__hash__":60720},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":60449,"toc":60712},[60450,60453,60456,60458,60460,60463,60465,60710],[11,60451,60447],{"id":60452},"paper",[15,60454,60455],{},"Applies realistic paper grain and surface roughness to child content",[31281,60457],{"component":60447},[23,60459,31285],{"id":25903},[31287,60461],{":props":60462},"[{\"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,60464,31293],{"id":31292},[246,60466,60467,60512,60556,60600,60644],{":tabs":1557},[212,60468,60470],{"className":334,"code":60469,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,60471,60472,60480,60488,60496,60504],{"__ignoreMap":178},[220,60473,60474,60476,60478],{"class":222,"line":223},[220,60475,343],{"class":264},[220,60477,347],{"class":346},[220,60479,359],{"class":264},[220,60481,60482,60484,60486],{"class":222,"line":179},[220,60483,364],{"class":264},[220,60485,60447],{"class":346},[220,60487,359],{"class":264},[220,60489,60490,60492,60494],{"class":222,"line":389},[220,60491,2550],{"class":264},[220,60493,2553],{"class":346},[220,60495,386],{"class":264},[220,60497,60498,60500,60502],{"class":222,"line":399},[220,60499,2567],{"class":264},[220,60501,60447],{"class":346},[220,60503,359],{"class":264},[220,60505,60506,60508,60510],{"class":222,"line":644},[220,60507,402],{"class":264},[220,60509,347],{"class":346},[220,60511,359],{"class":264},[212,60513,60514],{"className":409,"code":60469,"language":411,"meta":178,"style":178},[99,60515,60516,60524,60532,60540,60548],{"__ignoreMap":178},[220,60517,60518,60520,60522],{"class":222,"line":223},[220,60519,343],{"class":264},[220,60521,347],{"class":420},[220,60523,359],{"class":264},[220,60525,60526,60528,60530],{"class":222,"line":179},[220,60527,364],{"class":264},[220,60529,60447],{"class":420},[220,60531,359],{"class":264},[220,60533,60534,60536,60538],{"class":222,"line":389},[220,60535,2550],{"class":264},[220,60537,2553],{"class":420},[220,60539,386],{"class":264},[220,60541,60542,60544,60546],{"class":222,"line":399},[220,60543,2567],{"class":264},[220,60545,60447],{"class":420},[220,60547,359],{"class":264},[220,60549,60550,60552,60554],{"class":222,"line":644},[220,60551,402],{"class":264},[220,60553,347],{"class":420},[220,60555,359],{"class":264},[212,60557,60558],{"className":2844,"code":60469,"language":2846,"meta":178,"style":178},[99,60559,60560,60568,60576,60584,60592],{"__ignoreMap":178},[220,60561,60562,60564,60566],{"class":222,"line":223},[220,60563,343],{"class":264},[220,60565,347],{"class":420},[220,60567,359],{"class":264},[220,60569,60570,60572,60574],{"class":222,"line":179},[220,60571,364],{"class":264},[220,60573,60447],{"class":420},[220,60575,359],{"class":264},[220,60577,60578,60580,60582],{"class":222,"line":389},[220,60579,2550],{"class":264},[220,60581,2553],{"class":420},[220,60583,386],{"class":264},[220,60585,60586,60588,60590],{"class":222,"line":399},[220,60587,2567],{"class":264},[220,60589,60447],{"class":420},[220,60591,359],{"class":264},[220,60593,60594,60596,60598],{"class":222,"line":644},[220,60595,402],{"class":264},[220,60597,347],{"class":420},[220,60599,359],{"class":264},[212,60601,60602],{"className":468,"code":60469,"language":469,"meta":178,"style":178},[99,60603,60604,60612,60620,60628,60636],{"__ignoreMap":178},[220,60605,60606,60608,60610],{"class":222,"line":223},[220,60607,343],{"class":264},[220,60609,347],{"class":420},[220,60611,359],{"class":264},[220,60613,60614,60616,60618],{"class":222,"line":179},[220,60615,364],{"class":264},[220,60617,60447],{"class":420},[220,60619,359],{"class":264},[220,60621,60622,60624,60626],{"class":222,"line":389},[220,60623,2550],{"class":264},[220,60625,2553],{"class":420},[220,60627,386],{"class":264},[220,60629,60630,60632,60634],{"class":222,"line":399},[220,60631,2567],{"class":264},[220,60633,60447],{"class":420},[220,60635,359],{"class":264},[220,60637,60638,60640,60642],{"class":222,"line":644},[220,60639,402],{"class":264},[220,60641,347],{"class":420},[220,60643,359],{"class":264},[212,60645,60647],{"className":251,"code":60646,"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,60648,60649,60659,60663,60677,60681,60690,60698,60702,60706],{"__ignoreMap":178},[220,60650,60651,60653,60655,60657],{"class":222,"line":223},[220,60652,261],{"class":260},[220,60654,10879],{"class":264},[220,60656,268],{"class":260},[220,60658,4007],{"class":230},[220,60660,60661],{"class":222,"line":179},[220,60662,647],{"emptyLinePlaceholder":194},[220,60664,60665,60667,60669,60671,60673,60675],{"class":222,"line":389},[220,60666,1735],{"class":260},[220,60668,1738],{"class":420},[220,60670,1741],{"class":260},[220,60672,1744],{"class":260},[220,60674,1747],{"class":226},[220,60676,1750],{"class":264},[220,60678,60679],{"class":222,"line":399},[220,60680,1765],{"class":264},[220,60682,60683,60685,60688],{"class":222,"line":644},[220,60684,1770],{"class":264},[220,60686,60687],{"class":230},"'Paper'",[220,60689,6375],{"class":264},[220,60691,60692,60694,60696],{"class":222,"line":650},[220,60693,6380],{"class":264},[220,60695,3206],{"class":230},[220,60697,2465],{"class":264},[220,60699,60700],{"class":222,"line":656},[220,60701,6397],{"class":264},[220,60703,60704],{"class":222,"line":673},[220,60705,1787],{"class":264},[220,60707,60708],{"class":222,"line":682},[220,60709,1792],{"class":264},[1504,60711,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":60713},[60714,60715],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":60447,"description":60455},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":60722,"title":60723,"body":60724,"category":15275,"componentType":25247,"description":60731,"extension":191,"meta":60961,"navigation":194,"path":60962,"requiresChild":31900,"seo":60963,"stem":60964,"__hash__":60965},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":60725,"toc":60957},[60726,60729,60732,60734,60736,60739,60741,60955],[11,60727,60723],{"id":60728},"parallelogram",[15,60730,60731],{},"Parallelogram with adjustable width, height and skew",[31281,60733],{"component":60723},[23,60735,31285],{"id":25903},[31287,60737],{":props":60738},"[{\"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,60740,31293],{"id":31292},[246,60742,60743,60783,60821,60859,60897],{":tabs":1557},[212,60744,60746],{"className":334,"code":60745,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,60747,60748,60756,60763,60771,60775],{"__ignoreMap":178},[220,60749,60750,60752,60754],{"class":222,"line":223},[220,60751,343],{"class":264},[220,60753,347],{"class":346},[220,60755,359],{"class":264},[220,60757,60758,60760],{"class":222,"line":179},[220,60759,364],{"class":264},[220,60761,60762],{"class":346},"Parallelogram\n",[220,60764,60765,60767,60769],{"class":222,"line":389},[220,60766,9002],{"class":226},[220,60768,353],{"class":264},[220,60770,8958],{"class":230},[220,60772,60773],{"class":222,"line":399},[220,60774,1234],{"class":264},[220,60776,60777,60779,60781],{"class":222,"line":644},[220,60778,402],{"class":264},[220,60780,347],{"class":346},[220,60782,359],{"class":264},[212,60784,60785],{"className":409,"code":60745,"language":411,"meta":178,"style":178},[99,60786,60787,60795,60801,60809,60813],{"__ignoreMap":178},[220,60788,60789,60791,60793],{"class":222,"line":223},[220,60790,343],{"class":264},[220,60792,347],{"class":420},[220,60794,359],{"class":264},[220,60796,60797,60799],{"class":222,"line":179},[220,60798,364],{"class":264},[220,60800,60762],{"class":420},[220,60802,60803,60805,60807],{"class":222,"line":389},[220,60804,9002],{"class":226},[220,60806,353],{"class":260},[220,60808,8958],{"class":230},[220,60810,60811],{"class":222,"line":399},[220,60812,1234],{"class":264},[220,60814,60815,60817,60819],{"class":222,"line":644},[220,60816,402],{"class":264},[220,60818,347],{"class":420},[220,60820,359],{"class":264},[212,60822,60823],{"className":2844,"code":60745,"language":2846,"meta":178,"style":178},[99,60824,60825,60833,60839,60847,60851],{"__ignoreMap":178},[220,60826,60827,60829,60831],{"class":222,"line":223},[220,60828,343],{"class":264},[220,60830,347],{"class":420},[220,60832,359],{"class":264},[220,60834,60835,60837],{"class":222,"line":179},[220,60836,364],{"class":264},[220,60838,60762],{"class":420},[220,60840,60841,60843,60845],{"class":222,"line":389},[220,60842,9002],{"class":226},[220,60844,353],{"class":264},[220,60846,8958],{"class":230},[220,60848,60849],{"class":222,"line":399},[220,60850,1234],{"class":264},[220,60852,60853,60855,60857],{"class":222,"line":644},[220,60854,402],{"class":264},[220,60856,347],{"class":420},[220,60858,359],{"class":264},[212,60860,60861],{"className":468,"code":60745,"language":469,"meta":178,"style":178},[99,60862,60863,60871,60877,60885,60889],{"__ignoreMap":178},[220,60864,60865,60867,60869],{"class":222,"line":223},[220,60866,343],{"class":264},[220,60868,347],{"class":420},[220,60870,359],{"class":264},[220,60872,60873,60875],{"class":222,"line":179},[220,60874,364],{"class":264},[220,60876,60762],{"class":420},[220,60878,60879,60881,60883],{"class":222,"line":389},[220,60880,9002],{"class":226},[220,60882,353],{"class":260},[220,60884,8958],{"class":230},[220,60886,60887],{"class":222,"line":399},[220,60888,1234],{"class":264},[220,60890,60891,60893,60895],{"class":222,"line":644},[220,60892,402],{"class":264},[220,60894,347],{"class":420},[220,60896,359],{"class":264},[212,60898,60900],{"className":251,"code":60899,"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,60901,60902,60912,60916,60930,60934,60947,60951],{"__ignoreMap":178},[220,60903,60904,60906,60908,60910],{"class":222,"line":223},[220,60905,261],{"class":260},[220,60907,10879],{"class":264},[220,60909,268],{"class":260},[220,60911,4007],{"class":230},[220,60913,60914],{"class":222,"line":179},[220,60915,647],{"emptyLinePlaceholder":194},[220,60917,60918,60920,60922,60924,60926,60928],{"class":222,"line":389},[220,60919,1735],{"class":260},[220,60921,1738],{"class":420},[220,60923,1741],{"class":260},[220,60925,1744],{"class":260},[220,60927,1747],{"class":226},[220,60929,1750],{"class":264},[220,60931,60932],{"class":222,"line":399},[220,60933,1765],{"class":264},[220,60935,60936,60938,60941,60943,60945],{"class":222,"line":644},[220,60937,1770],{"class":264},[220,60939,60940],{"class":230},"'Parallelogram'",[220,60942,1776],{"class":264},[220,60944,9536],{"class":230},[220,60946,1782],{"class":264},[220,60948,60949],{"class":222,"line":650},[220,60950,1787],{"class":264},[220,60952,60953],{"class":222,"line":656},[220,60954,1792],{"class":264},[1504,60956,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60958},[60959,60960],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":60723,"description":60731},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":60967,"title":60968,"body":60969,"category":32176,"componentType":25253,"description":60976,"extension":191,"meta":61237,"navigation":194,"path":61238,"requiresChild":194,"seo":61239,"stem":61240,"__hash__":61241},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":60970,"toc":61233},[60971,60974,60977,60979,60981,60984,60986,61231],[11,60972,60968],{"id":60973},"particlefield",[15,60975,60976],{},"Explodes the child content into a breathing 3D field of particles — bright areas float toward you and dark areas recede, the whole relief can be orbited with the camera rotations, and the cursor physically throws particles that spring back home",[31281,60978],{"component":60968},[23,60980,31285],{"id":25903},[31287,60982],{":props":60983},"[{\"name\":\"count\",\"type\":\"number\",\"default\":\"15000\",\"description\":\"Number of particles — how finely the child is sampled into the field\"},{\"name\":\"depthSource\",\"type\":\"\\\"luminance\\\" | \\\"luminanceInverted\\\" | \\\"red\\\" | \\\"green\\\" | \\\"blue\\\" | \\\"saturation\\\" | \\\"alpha\\\"\",\"default\":\"luminance\",\"description\":\"Which channel of the child drives each particle's depth toward or away from the camera\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Depth of the relief — how far bright and dark areas rise toward and sink away from the camera\"},{\"name\":\"particleShape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square, or a soft glow puff\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"0.75\",\"description\":\"Size of each particle relative to the grid spacing\"},{\"name\":\"depthShading\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How much far particles dim into the distance — the main cue that sells the 3D relief\"},{\"name\":\"wobble\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Gentle idle drift that keeps the field breathing even on a still image\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Camera distance — dolly the whole field closer or further away\"},{\"name\":\"rotationX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera orbit around the horizontal axis — tilt the relief toward or away from you\"},{\"name\":\"rotationY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera orbit around the vertical axis — view the particle extrusion from the side\"},{\"name\":\"rotationZ\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Camera roll around the view axis\"},{\"name\":\"offsetX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shift the whole field horizontally across the frame (in screen widths)\"},{\"name\":\"offsetY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shift the whole field vertically across the frame (in screen heights) — tilt it flat, then sink it toward the bottom like a ground plane\"},{\"name\":\"cursorMode\",\"type\":\"\\\"none\\\" | \\\"push\\\" | \\\"pull\\\"\",\"default\":\"push\",\"description\":\"How the cursor disturbs the field — push throws particles away and toward you, pull gathers them in\"},{\"name\":\"cursorStrength\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Strength of the cursor force — how hard particles get thrown before springing back\"},{\"name\":\"cursorRadius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Reach of the cursor field, in screen units\"}]",[23,60985,31293],{"id":31292},[246,60987,60988,61033,61077,61121,61165],{":tabs":1557},[212,60989,60991],{"className":334,"code":60990,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,60992,60993,61001,61009,61017,61025],{"__ignoreMap":178},[220,60994,60995,60997,60999],{"class":222,"line":223},[220,60996,343],{"class":264},[220,60998,347],{"class":346},[220,61000,359],{"class":264},[220,61002,61003,61005,61007],{"class":222,"line":179},[220,61004,364],{"class":264},[220,61006,60968],{"class":346},[220,61008,359],{"class":264},[220,61010,61011,61013,61015],{"class":222,"line":389},[220,61012,2550],{"class":264},[220,61014,2553],{"class":346},[220,61016,386],{"class":264},[220,61018,61019,61021,61023],{"class":222,"line":399},[220,61020,2567],{"class":264},[220,61022,60968],{"class":346},[220,61024,359],{"class":264},[220,61026,61027,61029,61031],{"class":222,"line":644},[220,61028,402],{"class":264},[220,61030,347],{"class":346},[220,61032,359],{"class":264},[212,61034,61035],{"className":409,"code":60990,"language":411,"meta":178,"style":178},[99,61036,61037,61045,61053,61061,61069],{"__ignoreMap":178},[220,61038,61039,61041,61043],{"class":222,"line":223},[220,61040,343],{"class":264},[220,61042,347],{"class":420},[220,61044,359],{"class":264},[220,61046,61047,61049,61051],{"class":222,"line":179},[220,61048,364],{"class":264},[220,61050,60968],{"class":420},[220,61052,359],{"class":264},[220,61054,61055,61057,61059],{"class":222,"line":389},[220,61056,2550],{"class":264},[220,61058,2553],{"class":420},[220,61060,386],{"class":264},[220,61062,61063,61065,61067],{"class":222,"line":399},[220,61064,2567],{"class":264},[220,61066,60968],{"class":420},[220,61068,359],{"class":264},[220,61070,61071,61073,61075],{"class":222,"line":644},[220,61072,402],{"class":264},[220,61074,347],{"class":420},[220,61076,359],{"class":264},[212,61078,61079],{"className":2844,"code":60990,"language":2846,"meta":178,"style":178},[99,61080,61081,61089,61097,61105,61113],{"__ignoreMap":178},[220,61082,61083,61085,61087],{"class":222,"line":223},[220,61084,343],{"class":264},[220,61086,347],{"class":420},[220,61088,359],{"class":264},[220,61090,61091,61093,61095],{"class":222,"line":179},[220,61092,364],{"class":264},[220,61094,60968],{"class":420},[220,61096,359],{"class":264},[220,61098,61099,61101,61103],{"class":222,"line":389},[220,61100,2550],{"class":264},[220,61102,2553],{"class":420},[220,61104,386],{"class":264},[220,61106,61107,61109,61111],{"class":222,"line":399},[220,61108,2567],{"class":264},[220,61110,60968],{"class":420},[220,61112,359],{"class":264},[220,61114,61115,61117,61119],{"class":222,"line":644},[220,61116,402],{"class":264},[220,61118,347],{"class":420},[220,61120,359],{"class":264},[212,61122,61123],{"className":468,"code":60990,"language":469,"meta":178,"style":178},[99,61124,61125,61133,61141,61149,61157],{"__ignoreMap":178},[220,61126,61127,61129,61131],{"class":222,"line":223},[220,61128,343],{"class":264},[220,61130,347],{"class":420},[220,61132,359],{"class":264},[220,61134,61135,61137,61139],{"class":222,"line":179},[220,61136,364],{"class":264},[220,61138,60968],{"class":420},[220,61140,359],{"class":264},[220,61142,61143,61145,61147],{"class":222,"line":389},[220,61144,2550],{"class":264},[220,61146,2553],{"class":420},[220,61148,386],{"class":264},[220,61150,61151,61153,61155],{"class":222,"line":399},[220,61152,2567],{"class":264},[220,61154,60968],{"class":420},[220,61156,359],{"class":264},[220,61158,61159,61161,61163],{"class":222,"line":644},[220,61160,402],{"class":264},[220,61162,347],{"class":420},[220,61164,359],{"class":264},[212,61166,61168],{"className":251,"code":61167,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ParticleField', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,61169,61170,61180,61184,61198,61202,61211,61219,61223,61227],{"__ignoreMap":178},[220,61171,61172,61174,61176,61178],{"class":222,"line":223},[220,61173,261],{"class":260},[220,61175,10879],{"class":264},[220,61177,268],{"class":260},[220,61179,4007],{"class":230},[220,61181,61182],{"class":222,"line":179},[220,61183,647],{"emptyLinePlaceholder":194},[220,61185,61186,61188,61190,61192,61194,61196],{"class":222,"line":389},[220,61187,1735],{"class":260},[220,61189,1738],{"class":420},[220,61191,1741],{"class":260},[220,61193,1744],{"class":260},[220,61195,1747],{"class":226},[220,61197,1750],{"class":264},[220,61199,61200],{"class":222,"line":399},[220,61201,1765],{"class":264},[220,61203,61204,61206,61209],{"class":222,"line":644},[220,61205,1770],{"class":264},[220,61207,61208],{"class":230},"'ParticleField'",[220,61210,6375],{"class":264},[220,61212,61213,61215,61217],{"class":222,"line":650},[220,61214,6380],{"class":264},[220,61216,3206],{"class":230},[220,61218,2465],{"class":264},[220,61220,61221],{"class":222,"line":656},[220,61222,6397],{"class":264},[220,61224,61225],{"class":222,"line":673},[220,61226,1787],{"class":264},[220,61228,61229],{"class":222,"line":682},[220,61230,1792],{"class":264},[1504,61232,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":61234},[61235,61236],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":60968,"description":60976},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":61243,"title":61244,"body":61245,"category":34929,"componentType":25247,"description":61252,"extension":191,"meta":61437,"navigation":194,"path":61438,"requiresChild":31900,"seo":61439,"stem":61440,"__hash__":61441},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":61246,"toc":61433},[61247,61250,61253,61255,61257,61260,61262,61431],[11,61248,61244],{"id":61249},"particleflow",[15,61251,61252],{},"Thousands of drifting dust particles carried by a real incompressible fluid field the cursor stirs — drag to plow a wake and the particles ride the eddies and vortices it leaves behind, while a gentle ambient breeze keeps the whole scene breathing on its own",[31281,61254],{"component":61244},[23,61256,31285],{"id":25903},[31287,61258],{":props":61259},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of particles drifting slowly with the flow\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffd98e\",\"description\":\"Color particles flash toward as they speed up in the fast jets and wakes\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"shape\",\"type\":\"\\\"arrow\\\" | \\\"streak\\\" | \\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"streak\",\"description\":\"What each particle is drawn as — a streak or arrow that stretches along the flow, a plain dot, a square, or a soft glowing comet\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"6000\",\"description\":\"Number of drifting particles\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Size of each particle\"},{\"name\":\"trails\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How long each particle's motion trail persists — 0 draws crisp dust, 1 leaves long flowing ribbons\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How strongly the fluid carries the particles — higher makes the dust ride the flow faster\"},{\"name\":\"force\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How hard the cursor's motion pushes the fluid — higher plows faster, more violent wakes and jets\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"25\",\"description\":\"Vorticity confinement — swirl energy that spins the flow into persistent eddies and vortices the dust orbits\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the fluid keeps flowing after you stop dragging — high momentum lets the eddies carry the dust on and on\"},{\"name\":\"ambient\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"A gentle, ever-evolving breeze that keeps the dust drifting even without the cursor — set to 0 for a field that only moves when you stir it\"}]",[23,61261,31293],{"id":31292},[246,61263,61264,61293,61321,61349,61377],{":tabs":1557},[212,61265,61267],{"className":334,"code":61266,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,61268,61269,61277,61285],{"__ignoreMap":178},[220,61270,61271,61273,61275],{"class":222,"line":223},[220,61272,343],{"class":264},[220,61274,347],{"class":346},[220,61276,359],{"class":264},[220,61278,61279,61281,61283],{"class":222,"line":179},[220,61280,364],{"class":264},[220,61282,61244],{"class":346},[220,61284,386],{"class":264},[220,61286,61287,61289,61291],{"class":222,"line":389},[220,61288,402],{"class":264},[220,61290,347],{"class":346},[220,61292,359],{"class":264},[212,61294,61295],{"className":409,"code":61266,"language":411,"meta":178,"style":178},[99,61296,61297,61305,61313],{"__ignoreMap":178},[220,61298,61299,61301,61303],{"class":222,"line":223},[220,61300,343],{"class":264},[220,61302,347],{"class":420},[220,61304,359],{"class":264},[220,61306,61307,61309,61311],{"class":222,"line":179},[220,61308,364],{"class":264},[220,61310,61244],{"class":420},[220,61312,386],{"class":264},[220,61314,61315,61317,61319],{"class":222,"line":389},[220,61316,402],{"class":264},[220,61318,347],{"class":420},[220,61320,359],{"class":264},[212,61322,61323],{"className":2844,"code":61266,"language":2846,"meta":178,"style":178},[99,61324,61325,61333,61341],{"__ignoreMap":178},[220,61326,61327,61329,61331],{"class":222,"line":223},[220,61328,343],{"class":264},[220,61330,347],{"class":420},[220,61332,359],{"class":264},[220,61334,61335,61337,61339],{"class":222,"line":179},[220,61336,364],{"class":264},[220,61338,61244],{"class":420},[220,61340,386],{"class":264},[220,61342,61343,61345,61347],{"class":222,"line":389},[220,61344,402],{"class":264},[220,61346,347],{"class":420},[220,61348,359],{"class":264},[212,61350,61351],{"className":468,"code":61266,"language":469,"meta":178,"style":178},[99,61352,61353,61361,61369],{"__ignoreMap":178},[220,61354,61355,61357,61359],{"class":222,"line":223},[220,61356,343],{"class":264},[220,61358,347],{"class":420},[220,61360,359],{"class":264},[220,61362,61363,61365,61367],{"class":222,"line":179},[220,61364,364],{"class":264},[220,61366,61244],{"class":420},[220,61368,386],{"class":264},[220,61370,61371,61373,61375],{"class":222,"line":389},[220,61372,402],{"class":264},[220,61374,347],{"class":420},[220,61376,359],{"class":264},[212,61378,61380],{"className":251,"code":61379,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ParticleFlow', props: {} }\n ]\n})\n",[99,61381,61382,61392,61396,61410,61414,61423,61427],{"__ignoreMap":178},[220,61383,61384,61386,61388,61390],{"class":222,"line":223},[220,61385,261],{"class":260},[220,61387,10879],{"class":264},[220,61389,268],{"class":260},[220,61391,4007],{"class":230},[220,61393,61394],{"class":222,"line":179},[220,61395,647],{"emptyLinePlaceholder":194},[220,61397,61398,61400,61402,61404,61406,61408],{"class":222,"line":389},[220,61399,1735],{"class":260},[220,61401,1738],{"class":420},[220,61403,1741],{"class":260},[220,61405,1744],{"class":260},[220,61407,1747],{"class":226},[220,61409,1750],{"class":264},[220,61411,61412],{"class":222,"line":399},[220,61413,1765],{"class":264},[220,61415,61416,61418,61421],{"class":222,"line":644},[220,61417,1770],{"class":264},[220,61419,61420],{"class":230},"'ParticleFlow'",[220,61422,2465],{"class":264},[220,61424,61425],{"class":222,"line":650},[220,61426,1787],{"class":264},[220,61428,61429],{"class":222,"line":656},[220,61430,1792],{"class":264},[1504,61432,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":61434},[61435,61436],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":61244,"description":61252},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":61443,"title":61444,"body":61445,"category":35939,"componentType":25247,"description":61452,"extension":191,"meta":61637,"navigation":194,"path":61638,"requiresChild":31900,"seo":61639,"stem":61640,"__hash__":61641},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":61446,"toc":61633},[61447,61450,61453,61455,61457,61460,61462,61631],[11,61448,61444],{"id":61449},"particles",[15,61451,61452],{},"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",[31281,61454],{"component":61444},[23,61456,31285],{"id":25903},[31287,61458],{":props":61459},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the shape in degrees\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8ec5ff\",\"description\":\"Color of particles at rest\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff7ad9\",\"description\":\"Color particles shift toward when agitated — scattering from the cursor or catching up to a moving shape\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"4000\",\"description\":\"Number of simulated particles\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Base particle size (each particle also varies slightly, and grows as it drifts toward the viewer)\"},{\"name\":\"particleShape\",\"type\":\"\\\"dot\\\" | \\\"square\\\" | \\\"glow\\\"\",\"default\":\"dot\",\"description\":\"What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The pressure pushing particles apart — how strongly they insist on even spacing inside the shape\"},{\"name\":\"agitation\",\"type\":\"number\",\"default\":\"0.12\",\"description\":\"Idle thermal motion of the swarm — 0 freezes it crystal-still once settled\"},{\"name\":\"damping\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How quickly disturbed particles calm back down and settle into place\"},{\"name\":\"gravity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Downward pull on the swarm — negative floats the particles upward\"},{\"name\":\"mouseInfluence\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the cursor field. Positive scatters particles away; negative pulls the swarm toward the cursor\"},{\"name\":\"mouseRadius\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Reach of the cursor field, in shape-local units\"},{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness of the additive particle glow\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge softness of each particle — 0 is a crisp disc, 1 a soft glow puff\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"0.18\",\"description\":\"Thickness of the particle volume behind flat shapes (3D shapes use their own true depth)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklab\",\"description\":\"Color space for the rest→excited color ramp\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,61461,31293],{"id":31292},[246,61463,61464,61493,61521,61549,61577],{":tabs":1557},[212,61465,61467],{"className":334,"code":61466,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,61468,61469,61477,61485],{"__ignoreMap":178},[220,61470,61471,61473,61475],{"class":222,"line":223},[220,61472,343],{"class":264},[220,61474,347],{"class":346},[220,61476,359],{"class":264},[220,61478,61479,61481,61483],{"class":222,"line":179},[220,61480,364],{"class":264},[220,61482,61444],{"class":346},[220,61484,386],{"class":264},[220,61486,61487,61489,61491],{"class":222,"line":389},[220,61488,402],{"class":264},[220,61490,347],{"class":346},[220,61492,359],{"class":264},[212,61494,61495],{"className":409,"code":61466,"language":411,"meta":178,"style":178},[99,61496,61497,61505,61513],{"__ignoreMap":178},[220,61498,61499,61501,61503],{"class":222,"line":223},[220,61500,343],{"class":264},[220,61502,347],{"class":420},[220,61504,359],{"class":264},[220,61506,61507,61509,61511],{"class":222,"line":179},[220,61508,364],{"class":264},[220,61510,61444],{"class":420},[220,61512,386],{"class":264},[220,61514,61515,61517,61519],{"class":222,"line":389},[220,61516,402],{"class":264},[220,61518,347],{"class":420},[220,61520,359],{"class":264},[212,61522,61523],{"className":2844,"code":61466,"language":2846,"meta":178,"style":178},[99,61524,61525,61533,61541],{"__ignoreMap":178},[220,61526,61527,61529,61531],{"class":222,"line":223},[220,61528,343],{"class":264},[220,61530,347],{"class":420},[220,61532,359],{"class":264},[220,61534,61535,61537,61539],{"class":222,"line":179},[220,61536,364],{"class":264},[220,61538,61444],{"class":420},[220,61540,386],{"class":264},[220,61542,61543,61545,61547],{"class":222,"line":389},[220,61544,402],{"class":264},[220,61546,347],{"class":420},[220,61548,359],{"class":264},[212,61550,61551],{"className":468,"code":61466,"language":469,"meta":178,"style":178},[99,61552,61553,61561,61569],{"__ignoreMap":178},[220,61554,61555,61557,61559],{"class":222,"line":223},[220,61556,343],{"class":264},[220,61558,347],{"class":420},[220,61560,359],{"class":264},[220,61562,61563,61565,61567],{"class":222,"line":179},[220,61564,364],{"class":264},[220,61566,61444],{"class":420},[220,61568,386],{"class":264},[220,61570,61571,61573,61575],{"class":222,"line":389},[220,61572,402],{"class":264},[220,61574,347],{"class":420},[220,61576,359],{"class":264},[212,61578,61580],{"className":251,"code":61579,"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,61581,61582,61592,61596,61610,61614,61623,61627],{"__ignoreMap":178},[220,61583,61584,61586,61588,61590],{"class":222,"line":223},[220,61585,261],{"class":260},[220,61587,10879],{"class":264},[220,61589,268],{"class":260},[220,61591,4007],{"class":230},[220,61593,61594],{"class":222,"line":179},[220,61595,647],{"emptyLinePlaceholder":194},[220,61597,61598,61600,61602,61604,61606,61608],{"class":222,"line":389},[220,61599,1735],{"class":260},[220,61601,1738],{"class":420},[220,61603,1741],{"class":260},[220,61605,1744],{"class":260},[220,61607,1747],{"class":226},[220,61609,1750],{"class":264},[220,61611,61612],{"class":222,"line":399},[220,61613,1765],{"class":264},[220,61615,61616,61618,61621],{"class":222,"line":644},[220,61617,1770],{"class":264},[220,61619,61620],{"class":230},"'Particles'",[220,61622,2465],{"class":264},[220,61624,61625],{"class":222,"line":650},[220,61626,1787],{"class":264},[220,61628,61629],{"class":222,"line":656},[220,61630,1792],{"class":264},[1504,61632,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":61634},[61635,61636],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":61444,"description":61452},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":61643,"title":61644,"body":61645,"category":32433,"componentType":25247,"description":61652,"extension":191,"meta":61836,"navigation":194,"path":61837,"requiresChild":31900,"seo":61838,"stem":61839,"__hash__":61840},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":61646,"toc":61832},[61647,61650,61653,61655,61657,61659,61661,61830],[11,61648,61644],{"id":61649},"perlinnoise",[15,61651,61652],{},"Smooth gradient noise that morphs over time",[31281,61654],{"component":61644},[23,61656,31285],{"id":25903},[31287,61658],{":props":34018},[23,61660,31293],{"id":31292},[246,61662,61663,61692,61720,61748,61776],{":tabs":1557},[212,61664,61666],{"className":334,"code":61665,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,61667,61668,61676,61684],{"__ignoreMap":178},[220,61669,61670,61672,61674],{"class":222,"line":223},[220,61671,343],{"class":264},[220,61673,347],{"class":346},[220,61675,359],{"class":264},[220,61677,61678,61680,61682],{"class":222,"line":179},[220,61679,364],{"class":264},[220,61681,61644],{"class":346},[220,61683,386],{"class":264},[220,61685,61686,61688,61690],{"class":222,"line":389},[220,61687,402],{"class":264},[220,61689,347],{"class":346},[220,61691,359],{"class":264},[212,61693,61694],{"className":409,"code":61665,"language":411,"meta":178,"style":178},[99,61695,61696,61704,61712],{"__ignoreMap":178},[220,61697,61698,61700,61702],{"class":222,"line":223},[220,61699,343],{"class":264},[220,61701,347],{"class":420},[220,61703,359],{"class":264},[220,61705,61706,61708,61710],{"class":222,"line":179},[220,61707,364],{"class":264},[220,61709,61644],{"class":420},[220,61711,386],{"class":264},[220,61713,61714,61716,61718],{"class":222,"line":389},[220,61715,402],{"class":264},[220,61717,347],{"class":420},[220,61719,359],{"class":264},[212,61721,61722],{"className":2844,"code":61665,"language":2846,"meta":178,"style":178},[99,61723,61724,61732,61740],{"__ignoreMap":178},[220,61725,61726,61728,61730],{"class":222,"line":223},[220,61727,343],{"class":264},[220,61729,347],{"class":420},[220,61731,359],{"class":264},[220,61733,61734,61736,61738],{"class":222,"line":179},[220,61735,364],{"class":264},[220,61737,61644],{"class":420},[220,61739,386],{"class":264},[220,61741,61742,61744,61746],{"class":222,"line":389},[220,61743,402],{"class":264},[220,61745,347],{"class":420},[220,61747,359],{"class":264},[212,61749,61750],{"className":468,"code":61665,"language":469,"meta":178,"style":178},[99,61751,61752,61760,61768],{"__ignoreMap":178},[220,61753,61754,61756,61758],{"class":222,"line":223},[220,61755,343],{"class":264},[220,61757,347],{"class":420},[220,61759,359],{"class":264},[220,61761,61762,61764,61766],{"class":222,"line":179},[220,61763,364],{"class":264},[220,61765,61644],{"class":420},[220,61767,386],{"class":264},[220,61769,61770,61772,61774],{"class":222,"line":389},[220,61771,402],{"class":264},[220,61773,347],{"class":420},[220,61775,359],{"class":264},[212,61777,61779],{"className":251,"code":61778,"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,61780,61781,61791,61795,61809,61813,61822,61826],{"__ignoreMap":178},[220,61782,61783,61785,61787,61789],{"class":222,"line":223},[220,61784,261],{"class":260},[220,61786,10879],{"class":264},[220,61788,268],{"class":260},[220,61790,4007],{"class":230},[220,61792,61793],{"class":222,"line":179},[220,61794,647],{"emptyLinePlaceholder":194},[220,61796,61797,61799,61801,61803,61805,61807],{"class":222,"line":389},[220,61798,1735],{"class":260},[220,61800,1738],{"class":420},[220,61802,1741],{"class":260},[220,61804,1744],{"class":260},[220,61806,1747],{"class":226},[220,61808,1750],{"class":264},[220,61810,61811],{"class":222,"line":399},[220,61812,1765],{"class":264},[220,61814,61815,61817,61820],{"class":222,"line":644},[220,61816,1770],{"class":264},[220,61818,61819],{"class":230},"'PerlinNoise'",[220,61821,2465],{"class":264},[220,61823,61824],{"class":222,"line":650},[220,61825,1787],{"class":264},[220,61827,61828],{"class":222,"line":656},[220,61829,1792],{"class":264},[1504,61831,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":61833},[61834,61835],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":61644,"description":61652},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":61842,"title":61843,"body":61844,"category":32766,"componentType":25253,"description":61851,"extension":191,"meta":62112,"navigation":194,"path":62113,"requiresChild":194,"seo":62114,"stem":62115,"__hash__":62116},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":61845,"toc":62108},[61846,61849,61852,61854,61856,61859,61861,62106],[11,61847,61843],{"id":61848},"perspective",[15,61850,61851],{},"Rotate the plane in 3D space with pan and tilt",[31281,61853],{"component":61843},[23,61855,31285],{"id":25903},[31287,61857],{":props":61858},"[{\"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,61860,31293],{"id":31292},[246,61862,61863,61908,61952,61996,62040],{":tabs":1557},[212,61864,61866],{"className":334,"code":61865,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,61867,61868,61876,61884,61892,61900],{"__ignoreMap":178},[220,61869,61870,61872,61874],{"class":222,"line":223},[220,61871,343],{"class":264},[220,61873,347],{"class":346},[220,61875,359],{"class":264},[220,61877,61878,61880,61882],{"class":222,"line":179},[220,61879,364],{"class":264},[220,61881,61843],{"class":346},[220,61883,359],{"class":264},[220,61885,61886,61888,61890],{"class":222,"line":389},[220,61887,2550],{"class":264},[220,61889,2553],{"class":346},[220,61891,386],{"class":264},[220,61893,61894,61896,61898],{"class":222,"line":399},[220,61895,2567],{"class":264},[220,61897,61843],{"class":346},[220,61899,359],{"class":264},[220,61901,61902,61904,61906],{"class":222,"line":644},[220,61903,402],{"class":264},[220,61905,347],{"class":346},[220,61907,359],{"class":264},[212,61909,61910],{"className":409,"code":61865,"language":411,"meta":178,"style":178},[99,61911,61912,61920,61928,61936,61944],{"__ignoreMap":178},[220,61913,61914,61916,61918],{"class":222,"line":223},[220,61915,343],{"class":264},[220,61917,347],{"class":420},[220,61919,359],{"class":264},[220,61921,61922,61924,61926],{"class":222,"line":179},[220,61923,364],{"class":264},[220,61925,61843],{"class":420},[220,61927,359],{"class":264},[220,61929,61930,61932,61934],{"class":222,"line":389},[220,61931,2550],{"class":264},[220,61933,2553],{"class":420},[220,61935,386],{"class":264},[220,61937,61938,61940,61942],{"class":222,"line":399},[220,61939,2567],{"class":264},[220,61941,61843],{"class":420},[220,61943,359],{"class":264},[220,61945,61946,61948,61950],{"class":222,"line":644},[220,61947,402],{"class":264},[220,61949,347],{"class":420},[220,61951,359],{"class":264},[212,61953,61954],{"className":2844,"code":61865,"language":2846,"meta":178,"style":178},[99,61955,61956,61964,61972,61980,61988],{"__ignoreMap":178},[220,61957,61958,61960,61962],{"class":222,"line":223},[220,61959,343],{"class":264},[220,61961,347],{"class":420},[220,61963,359],{"class":264},[220,61965,61966,61968,61970],{"class":222,"line":179},[220,61967,364],{"class":264},[220,61969,61843],{"class":420},[220,61971,359],{"class":264},[220,61973,61974,61976,61978],{"class":222,"line":389},[220,61975,2550],{"class":264},[220,61977,2553],{"class":420},[220,61979,386],{"class":264},[220,61981,61982,61984,61986],{"class":222,"line":399},[220,61983,2567],{"class":264},[220,61985,61843],{"class":420},[220,61987,359],{"class":264},[220,61989,61990,61992,61994],{"class":222,"line":644},[220,61991,402],{"class":264},[220,61993,347],{"class":420},[220,61995,359],{"class":264},[212,61997,61998],{"className":468,"code":61865,"language":469,"meta":178,"style":178},[99,61999,62000,62008,62016,62024,62032],{"__ignoreMap":178},[220,62001,62002,62004,62006],{"class":222,"line":223},[220,62003,343],{"class":264},[220,62005,347],{"class":420},[220,62007,359],{"class":264},[220,62009,62010,62012,62014],{"class":222,"line":179},[220,62011,364],{"class":264},[220,62013,61843],{"class":420},[220,62015,359],{"class":264},[220,62017,62018,62020,62022],{"class":222,"line":389},[220,62019,2550],{"class":264},[220,62021,2553],{"class":420},[220,62023,386],{"class":264},[220,62025,62026,62028,62030],{"class":222,"line":399},[220,62027,2567],{"class":264},[220,62029,61843],{"class":420},[220,62031,359],{"class":264},[220,62033,62034,62036,62038],{"class":222,"line":644},[220,62035,402],{"class":264},[220,62037,347],{"class":420},[220,62039,359],{"class":264},[212,62041,62043],{"className":251,"code":62042,"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,62044,62045,62055,62059,62073,62077,62086,62094,62098,62102],{"__ignoreMap":178},[220,62046,62047,62049,62051,62053],{"class":222,"line":223},[220,62048,261],{"class":260},[220,62050,10879],{"class":264},[220,62052,268],{"class":260},[220,62054,4007],{"class":230},[220,62056,62057],{"class":222,"line":179},[220,62058,647],{"emptyLinePlaceholder":194},[220,62060,62061,62063,62065,62067,62069,62071],{"class":222,"line":389},[220,62062,1735],{"class":260},[220,62064,1738],{"class":420},[220,62066,1741],{"class":260},[220,62068,1744],{"class":260},[220,62070,1747],{"class":226},[220,62072,1750],{"class":264},[220,62074,62075],{"class":222,"line":399},[220,62076,1765],{"class":264},[220,62078,62079,62081,62084],{"class":222,"line":644},[220,62080,1770],{"class":264},[220,62082,62083],{"class":230},"'Perspective'",[220,62085,6375],{"class":264},[220,62087,62088,62090,62092],{"class":222,"line":650},[220,62089,6380],{"class":264},[220,62091,3206],{"class":230},[220,62093,2465],{"class":264},[220,62095,62096],{"class":222,"line":656},[220,62097,6397],{"class":264},[220,62099,62100],{"class":222,"line":673},[220,62101,1787],{"class":264},[220,62103,62104],{"class":222,"line":682},[220,62105,1792],{"class":264},[1504,62107,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":62109},[62110,62111],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":61843,"description":61851},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":62118,"title":62119,"body":62120,"category":34929,"componentType":25253,"description":62127,"extension":191,"meta":62444,"navigation":194,"path":62445,"requiresChild":194,"seo":62446,"stem":62447,"__hash__":62448},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":62121,"toc":62440},[62122,62125,62128,62130,62132,62135,62137,62438],[11,62123,62119],{"id":62124},"pixelsort",[15,62126,62127],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31281,62129],{"component":62119},[23,62131,31285],{"id":25903},[31287,62133],{":props":62134},"[{\"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,62136,31293],{"id":31292},[246,62138,62139,62195,62254,62310,62368],{":tabs":1557},[212,62140,62142],{"className":334,"code":62141,"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,62143,62144,62152,62159,62167,62171,62179,62187],{"__ignoreMap":178},[220,62145,62146,62148,62150],{"class":222,"line":223},[220,62147,343],{"class":264},[220,62149,347],{"class":346},[220,62151,359],{"class":264},[220,62153,62154,62156],{"class":222,"line":179},[220,62155,364],{"class":264},[220,62157,62158],{"class":346},"PixelSort\n",[220,62160,62161,62163,62165],{"class":222,"line":389},[220,62162,16772],{"class":226},[220,62164,353],{"class":264},[220,62166,47518],{"class":230},[220,62168,62169],{"class":222,"line":399},[220,62170,31329],{"class":264},[220,62172,62173,62175,62177],{"class":222,"line":644},[220,62174,2550],{"class":264},[220,62176,2553],{"class":346},[220,62178,386],{"class":264},[220,62180,62181,62183,62185],{"class":222,"line":650},[220,62182,2567],{"class":264},[220,62184,62119],{"class":346},[220,62186,359],{"class":264},[220,62188,62189,62191,62193],{"class":222,"line":656},[220,62190,402],{"class":264},[220,62192,347],{"class":346},[220,62194,359],{"class":264},[212,62196,62198],{"className":409,"code":62197,"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,62199,62200,62208,62214,62226,62230,62238,62246],{"__ignoreMap":178},[220,62201,62202,62204,62206],{"class":222,"line":223},[220,62203,343],{"class":264},[220,62205,347],{"class":420},[220,62207,359],{"class":264},[220,62209,62210,62212],{"class":222,"line":179},[220,62211,364],{"class":264},[220,62213,62158],{"class":420},[220,62215,62216,62218,62220,62222,62224],{"class":222,"line":389},[220,62217,9012],{"class":226},[220,62219,353],{"class":260},[220,62221,743],{"class":264},[220,62223,7615],{"class":420},[220,62225,749],{"class":264},[220,62227,62228],{"class":222,"line":399},[220,62229,31329],{"class":264},[220,62231,62232,62234,62236],{"class":222,"line":644},[220,62233,2550],{"class":264},[220,62235,2553],{"class":420},[220,62237,386],{"class":264},[220,62239,62240,62242,62244],{"class":222,"line":650},[220,62241,2567],{"class":264},[220,62243,62119],{"class":420},[220,62245,359],{"class":264},[220,62247,62248,62250,62252],{"class":222,"line":656},[220,62249,402],{"class":264},[220,62251,347],{"class":420},[220,62253,359],{"class":264},[212,62255,62256],{"className":2844,"code":62197,"language":2846,"meta":178,"style":178},[99,62257,62258,62266,62272,62282,62286,62294,62302],{"__ignoreMap":178},[220,62259,62260,62262,62264],{"class":222,"line":223},[220,62261,343],{"class":264},[220,62263,347],{"class":420},[220,62265,359],{"class":264},[220,62267,62268,62270],{"class":222,"line":179},[220,62269,364],{"class":264},[220,62271,62158],{"class":420},[220,62273,62274,62276,62278,62280],{"class":222,"line":389},[220,62275,9012],{"class":226},[220,62277,29241],{"class":264},[220,62279,7615],{"class":420},[220,62281,749],{"class":264},[220,62283,62284],{"class":222,"line":399},[220,62285,31329],{"class":264},[220,62287,62288,62290,62292],{"class":222,"line":644},[220,62289,2550],{"class":264},[220,62291,2553],{"class":420},[220,62293,386],{"class":264},[220,62295,62296,62298,62300],{"class":222,"line":650},[220,62297,2567],{"class":264},[220,62299,62119],{"class":420},[220,62301,359],{"class":264},[220,62303,62304,62306,62308],{"class":222,"line":656},[220,62305,402],{"class":264},[220,62307,347],{"class":420},[220,62309,359],{"class":264},[212,62311,62312],{"className":468,"code":62197,"language":469,"meta":178,"style":178},[99,62313,62314,62322,62328,62340,62344,62352,62360],{"__ignoreMap":178},[220,62315,62316,62318,62320],{"class":222,"line":223},[220,62317,343],{"class":264},[220,62319,347],{"class":420},[220,62321,359],{"class":264},[220,62323,62324,62326],{"class":222,"line":179},[220,62325,364],{"class":264},[220,62327,62158],{"class":420},[220,62329,62330,62332,62334,62336,62338],{"class":222,"line":389},[220,62331,9012],{"class":226},[220,62333,353],{"class":260},[220,62335,743],{"class":264},[220,62337,7615],{"class":420},[220,62339,749],{"class":264},[220,62341,62342],{"class":222,"line":399},[220,62343,31329],{"class":264},[220,62345,62346,62348,62350],{"class":222,"line":644},[220,62347,2550],{"class":264},[220,62349,2553],{"class":420},[220,62351,386],{"class":264},[220,62353,62354,62356,62358],{"class":222,"line":650},[220,62355,2567],{"class":264},[220,62357,62119],{"class":420},[220,62359,359],{"class":264},[220,62361,62362,62364,62366],{"class":222,"line":656},[220,62363,402],{"class":264},[220,62365,347],{"class":420},[220,62367,359],{"class":264},[212,62369,62371],{"className":251,"code":62370,"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,62372,62373,62383,62387,62401,62405,62418,62426,62430,62434],{"__ignoreMap":178},[220,62374,62375,62377,62379,62381],{"class":222,"line":223},[220,62376,261],{"class":260},[220,62378,10879],{"class":264},[220,62380,268],{"class":260},[220,62382,4007],{"class":230},[220,62384,62385],{"class":222,"line":179},[220,62386,647],{"emptyLinePlaceholder":194},[220,62388,62389,62391,62393,62395,62397,62399],{"class":222,"line":389},[220,62390,1735],{"class":260},[220,62392,1738],{"class":420},[220,62394,1741],{"class":260},[220,62396,1744],{"class":260},[220,62398,1747],{"class":226},[220,62400,1750],{"class":264},[220,62402,62403],{"class":222,"line":399},[220,62404,1765],{"class":264},[220,62406,62407,62409,62412,62414,62416],{"class":222,"line":644},[220,62408,1770],{"class":264},[220,62410,62411],{"class":230},"'PixelSort'",[220,62413,6907],{"class":264},[220,62415,7615],{"class":420},[220,62417,6912],{"class":264},[220,62419,62420,62422,62424],{"class":222,"line":650},[220,62421,6380],{"class":264},[220,62423,3206],{"class":230},[220,62425,2465],{"class":264},[220,62427,62428],{"class":222,"line":656},[220,62429,6397],{"class":264},[220,62431,62432],{"class":222,"line":673},[220,62433,1787],{"class":264},[220,62435,62436],{"class":222,"line":682},[220,62437,1792],{"class":264},[1504,62439,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62441},[62442,62443],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":62119,"description":62127},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":62450,"title":62451,"body":62452,"category":34929,"componentType":25253,"description":62459,"extension":191,"meta":62776,"navigation":194,"path":62777,"requiresChild":194,"seo":62778,"stem":62779,"__hash__":62780},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":62453,"toc":62772},[62454,62457,62460,62462,62464,62467,62469,62770],[11,62455,62451],{"id":62456},"pixelthrow",[15,62458,62459],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[31281,62461],{"component":62451},[23,62463,31285],{"id":25903},[31287,62465],{":props":62466},"[{\"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,62468,31293],{"id":31292},[246,62470,62471,62527,62586,62642,62700],{":tabs":1557},[212,62472,62474],{"className":334,"code":62473,"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,62475,62476,62484,62491,62499,62503,62511,62519],{"__ignoreMap":178},[220,62477,62478,62480,62482],{"class":222,"line":223},[220,62479,343],{"class":264},[220,62481,347],{"class":346},[220,62483,359],{"class":264},[220,62485,62486,62488],{"class":222,"line":179},[220,62487,364],{"class":264},[220,62489,62490],{"class":346},"PixelThrow\n",[220,62492,62493,62495,62497],{"class":222,"line":389},[220,62494,16772],{"class":226},[220,62496,353],{"class":264},[220,62498,60162],{"class":230},[220,62500,62501],{"class":222,"line":399},[220,62502,31329],{"class":264},[220,62504,62505,62507,62509],{"class":222,"line":644},[220,62506,2550],{"class":264},[220,62508,2553],{"class":346},[220,62510,386],{"class":264},[220,62512,62513,62515,62517],{"class":222,"line":650},[220,62514,2567],{"class":264},[220,62516,62451],{"class":346},[220,62518,359],{"class":264},[220,62520,62521,62523,62525],{"class":222,"line":656},[220,62522,402],{"class":264},[220,62524,347],{"class":346},[220,62526,359],{"class":264},[212,62528,62530],{"className":409,"code":62529,"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,62531,62532,62540,62546,62558,62562,62570,62578],{"__ignoreMap":178},[220,62533,62534,62536,62538],{"class":222,"line":223},[220,62535,343],{"class":264},[220,62537,347],{"class":420},[220,62539,359],{"class":264},[220,62541,62542,62544],{"class":222,"line":179},[220,62543,364],{"class":264},[220,62545,62490],{"class":420},[220,62547,62548,62550,62552,62554,62556],{"class":222,"line":389},[220,62549,9012],{"class":226},[220,62551,353],{"class":260},[220,62553,743],{"class":264},[220,62555,16343],{"class":420},[220,62557,749],{"class":264},[220,62559,62560],{"class":222,"line":399},[220,62561,31329],{"class":264},[220,62563,62564,62566,62568],{"class":222,"line":644},[220,62565,2550],{"class":264},[220,62567,2553],{"class":420},[220,62569,386],{"class":264},[220,62571,62572,62574,62576],{"class":222,"line":650},[220,62573,2567],{"class":264},[220,62575,62451],{"class":420},[220,62577,359],{"class":264},[220,62579,62580,62582,62584],{"class":222,"line":656},[220,62581,402],{"class":264},[220,62583,347],{"class":420},[220,62585,359],{"class":264},[212,62587,62588],{"className":2844,"code":62529,"language":2846,"meta":178,"style":178},[99,62589,62590,62598,62604,62614,62618,62626,62634],{"__ignoreMap":178},[220,62591,62592,62594,62596],{"class":222,"line":223},[220,62593,343],{"class":264},[220,62595,347],{"class":420},[220,62597,359],{"class":264},[220,62599,62600,62602],{"class":222,"line":179},[220,62601,364],{"class":264},[220,62603,62490],{"class":420},[220,62605,62606,62608,62610,62612],{"class":222,"line":389},[220,62607,9012],{"class":226},[220,62609,29241],{"class":264},[220,62611,16343],{"class":420},[220,62613,749],{"class":264},[220,62615,62616],{"class":222,"line":399},[220,62617,31329],{"class":264},[220,62619,62620,62622,62624],{"class":222,"line":644},[220,62621,2550],{"class":264},[220,62623,2553],{"class":420},[220,62625,386],{"class":264},[220,62627,62628,62630,62632],{"class":222,"line":650},[220,62629,2567],{"class":264},[220,62631,62451],{"class":420},[220,62633,359],{"class":264},[220,62635,62636,62638,62640],{"class":222,"line":656},[220,62637,402],{"class":264},[220,62639,347],{"class":420},[220,62641,359],{"class":264},[212,62643,62644],{"className":468,"code":62529,"language":469,"meta":178,"style":178},[99,62645,62646,62654,62660,62672,62676,62684,62692],{"__ignoreMap":178},[220,62647,62648,62650,62652],{"class":222,"line":223},[220,62649,343],{"class":264},[220,62651,347],{"class":420},[220,62653,359],{"class":264},[220,62655,62656,62658],{"class":222,"line":179},[220,62657,364],{"class":264},[220,62659,62490],{"class":420},[220,62661,62662,62664,62666,62668,62670],{"class":222,"line":389},[220,62663,9012],{"class":226},[220,62665,353],{"class":260},[220,62667,743],{"class":264},[220,62669,16343],{"class":420},[220,62671,749],{"class":264},[220,62673,62674],{"class":222,"line":399},[220,62675,31329],{"class":264},[220,62677,62678,62680,62682],{"class":222,"line":644},[220,62679,2550],{"class":264},[220,62681,2553],{"class":420},[220,62683,386],{"class":264},[220,62685,62686,62688,62690],{"class":222,"line":650},[220,62687,2567],{"class":264},[220,62689,62451],{"class":420},[220,62691,359],{"class":264},[220,62693,62694,62696,62698],{"class":222,"line":656},[220,62695,402],{"class":264},[220,62697,347],{"class":420},[220,62699,359],{"class":264},[212,62701,62703],{"className":251,"code":62702,"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,62704,62705,62715,62719,62733,62737,62750,62758,62762,62766],{"__ignoreMap":178},[220,62706,62707,62709,62711,62713],{"class":222,"line":223},[220,62708,261],{"class":260},[220,62710,10879],{"class":264},[220,62712,268],{"class":260},[220,62714,4007],{"class":230},[220,62716,62717],{"class":222,"line":179},[220,62718,647],{"emptyLinePlaceholder":194},[220,62720,62721,62723,62725,62727,62729,62731],{"class":222,"line":389},[220,62722,1735],{"class":260},[220,62724,1738],{"class":420},[220,62726,1741],{"class":260},[220,62728,1744],{"class":260},[220,62730,1747],{"class":226},[220,62732,1750],{"class":264},[220,62734,62735],{"class":222,"line":399},[220,62736,1765],{"class":264},[220,62738,62739,62741,62744,62746,62748],{"class":222,"line":644},[220,62740,1770],{"class":264},[220,62742,62743],{"class":230},"'PixelThrow'",[220,62745,6907],{"class":264},[220,62747,16343],{"class":420},[220,62749,6912],{"class":264},[220,62751,62752,62754,62756],{"class":222,"line":650},[220,62753,6380],{"class":264},[220,62755,3206],{"class":230},[220,62757,2465],{"class":264},[220,62759,62760],{"class":222,"line":656},[220,62761,6397],{"class":264},[220,62763,62764],{"class":222,"line":673},[220,62765,1787],{"class":264},[220,62767,62768],{"class":222,"line":682},[220,62769,1792],{"class":264},[1504,62771,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62773},[62774,62775],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":62451,"description":62459},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":62782,"title":62783,"body":62784,"category":32176,"componentType":25253,"description":62791,"extension":191,"meta":63052,"navigation":194,"path":63053,"requiresChild":194,"seo":63054,"stem":63055,"__hash__":63056},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":62785,"toc":63048},[62786,62789,62792,62794,62796,62799,62801,63046],[11,62787,62783],{"id":62788},"pixelate",[15,62790,62791],{},"Pixelation effect with adjustable cell size",[31281,62793],{"component":62783},[23,62795,31285],{"id":25903},[31287,62797],{":props":62798},"[{\"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,62800,31293],{"id":31292},[246,62802,62803,62848,62892,62936,62980],{":tabs":1557},[212,62804,62806],{"className":334,"code":62805,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,62807,62808,62816,62824,62832,62840],{"__ignoreMap":178},[220,62809,62810,62812,62814],{"class":222,"line":223},[220,62811,343],{"class":264},[220,62813,347],{"class":346},[220,62815,359],{"class":264},[220,62817,62818,62820,62822],{"class":222,"line":179},[220,62819,364],{"class":264},[220,62821,62783],{"class":346},[220,62823,359],{"class":264},[220,62825,62826,62828,62830],{"class":222,"line":389},[220,62827,2550],{"class":264},[220,62829,2553],{"class":346},[220,62831,386],{"class":264},[220,62833,62834,62836,62838],{"class":222,"line":399},[220,62835,2567],{"class":264},[220,62837,62783],{"class":346},[220,62839,359],{"class":264},[220,62841,62842,62844,62846],{"class":222,"line":644},[220,62843,402],{"class":264},[220,62845,347],{"class":346},[220,62847,359],{"class":264},[212,62849,62850],{"className":409,"code":62805,"language":411,"meta":178,"style":178},[99,62851,62852,62860,62868,62876,62884],{"__ignoreMap":178},[220,62853,62854,62856,62858],{"class":222,"line":223},[220,62855,343],{"class":264},[220,62857,347],{"class":420},[220,62859,359],{"class":264},[220,62861,62862,62864,62866],{"class":222,"line":179},[220,62863,364],{"class":264},[220,62865,62783],{"class":420},[220,62867,359],{"class":264},[220,62869,62870,62872,62874],{"class":222,"line":389},[220,62871,2550],{"class":264},[220,62873,2553],{"class":420},[220,62875,386],{"class":264},[220,62877,62878,62880,62882],{"class":222,"line":399},[220,62879,2567],{"class":264},[220,62881,62783],{"class":420},[220,62883,359],{"class":264},[220,62885,62886,62888,62890],{"class":222,"line":644},[220,62887,402],{"class":264},[220,62889,347],{"class":420},[220,62891,359],{"class":264},[212,62893,62894],{"className":2844,"code":62805,"language":2846,"meta":178,"style":178},[99,62895,62896,62904,62912,62920,62928],{"__ignoreMap":178},[220,62897,62898,62900,62902],{"class":222,"line":223},[220,62899,343],{"class":264},[220,62901,347],{"class":420},[220,62903,359],{"class":264},[220,62905,62906,62908,62910],{"class":222,"line":179},[220,62907,364],{"class":264},[220,62909,62783],{"class":420},[220,62911,359],{"class":264},[220,62913,62914,62916,62918],{"class":222,"line":389},[220,62915,2550],{"class":264},[220,62917,2553],{"class":420},[220,62919,386],{"class":264},[220,62921,62922,62924,62926],{"class":222,"line":399},[220,62923,2567],{"class":264},[220,62925,62783],{"class":420},[220,62927,359],{"class":264},[220,62929,62930,62932,62934],{"class":222,"line":644},[220,62931,402],{"class":264},[220,62933,347],{"class":420},[220,62935,359],{"class":264},[212,62937,62938],{"className":468,"code":62805,"language":469,"meta":178,"style":178},[99,62939,62940,62948,62956,62964,62972],{"__ignoreMap":178},[220,62941,62942,62944,62946],{"class":222,"line":223},[220,62943,343],{"class":264},[220,62945,347],{"class":420},[220,62947,359],{"class":264},[220,62949,62950,62952,62954],{"class":222,"line":179},[220,62951,364],{"class":264},[220,62953,62783],{"class":420},[220,62955,359],{"class":264},[220,62957,62958,62960,62962],{"class":222,"line":389},[220,62959,2550],{"class":264},[220,62961,2553],{"class":420},[220,62963,386],{"class":264},[220,62965,62966,62968,62970],{"class":222,"line":399},[220,62967,2567],{"class":264},[220,62969,62783],{"class":420},[220,62971,359],{"class":264},[220,62973,62974,62976,62978],{"class":222,"line":644},[220,62975,402],{"class":264},[220,62977,347],{"class":420},[220,62979,359],{"class":264},[212,62981,62983],{"className":251,"code":62982,"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,62984,62985,62995,62999,63013,63017,63026,63034,63038,63042],{"__ignoreMap":178},[220,62986,62987,62989,62991,62993],{"class":222,"line":223},[220,62988,261],{"class":260},[220,62990,10879],{"class":264},[220,62992,268],{"class":260},[220,62994,4007],{"class":230},[220,62996,62997],{"class":222,"line":179},[220,62998,647],{"emptyLinePlaceholder":194},[220,63000,63001,63003,63005,63007,63009,63011],{"class":222,"line":389},[220,63002,1735],{"class":260},[220,63004,1738],{"class":420},[220,63006,1741],{"class":260},[220,63008,1744],{"class":260},[220,63010,1747],{"class":226},[220,63012,1750],{"class":264},[220,63014,63015],{"class":222,"line":399},[220,63016,1765],{"class":264},[220,63018,63019,63021,63024],{"class":222,"line":644},[220,63020,1770],{"class":264},[220,63022,63023],{"class":230},"'Pixelate'",[220,63025,6375],{"class":264},[220,63027,63028,63030,63032],{"class":222,"line":650},[220,63029,6380],{"class":264},[220,63031,3206],{"class":230},[220,63033,2465],{"class":264},[220,63035,63036],{"class":222,"line":656},[220,63037,6397],{"class":264},[220,63039,63040],{"class":222,"line":673},[220,63041,1787],{"class":264},[220,63043,63044],{"class":222,"line":682},[220,63045,1792],{"class":264},[1504,63047,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":63049},[63050,63051],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":62783,"description":62791},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":63058,"title":12436,"body":63059,"category":32433,"componentType":25247,"description":63066,"extension":191,"meta":63307,"navigation":194,"path":63308,"requiresChild":31900,"seo":63309,"stem":63310,"__hash__":63311},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":63060,"toc":63303},[63061,63064,63067,63069,63071,63074,63076,63301],[11,63062,12436],{"id":63063},"plasma",[15,63065,63066],{},"Animated effect of glowing plasma",[31281,63068],{"component":12436},[23,63070,31285],{"id":25903},[31287,63072],{":props":63073},"[{\"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,63075,31293],{"id":31292},[246,63077,63078,63118,63161,63201,63243],{":tabs":1557},[212,63079,63081],{"className":334,"code":63080,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,63082,63083,63091,63098,63106,63110],{"__ignoreMap":178},[220,63084,63085,63087,63089],{"class":222,"line":223},[220,63086,343],{"class":264},[220,63088,347],{"class":346},[220,63090,359],{"class":264},[220,63092,63093,63095],{"class":222,"line":179},[220,63094,364],{"class":264},[220,63096,63097],{"class":346},"Plasma\n",[220,63099,63100,63102,63104],{"class":222,"line":389},[220,63101,19739],{"class":226},[220,63103,353],{"class":264},[220,63105,59324],{"class":230},[220,63107,63108],{"class":222,"line":399},[220,63109,1234],{"class":264},[220,63111,63112,63114,63116],{"class":222,"line":644},[220,63113,402],{"class":264},[220,63115,347],{"class":346},[220,63117,359],{"class":264},[212,63119,63121],{"className":409,"code":63120,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,63122,63123,63131,63137,63149,63153],{"__ignoreMap":178},[220,63124,63125,63127,63129],{"class":222,"line":223},[220,63126,343],{"class":264},[220,63128,347],{"class":420},[220,63130,359],{"class":264},[220,63132,63133,63135],{"class":222,"line":179},[220,63134,364],{"class":264},[220,63136,63097],{"class":420},[220,63138,63139,63141,63143,63145,63147],{"class":222,"line":389},[220,63140,19850],{"class":226},[220,63142,353],{"class":260},[220,63144,743],{"class":264},[220,63146,59374],{"class":420},[220,63148,749],{"class":264},[220,63150,63151],{"class":222,"line":399},[220,63152,1234],{"class":264},[220,63154,63155,63157,63159],{"class":222,"line":644},[220,63156,402],{"class":264},[220,63158,347],{"class":420},[220,63160,359],{"class":264},[212,63162,63163],{"className":2844,"code":63120,"language":2846,"meta":178,"style":178},[99,63164,63165,63173,63179,63189,63193],{"__ignoreMap":178},[220,63166,63167,63169,63171],{"class":222,"line":223},[220,63168,343],{"class":264},[220,63170,347],{"class":420},[220,63172,359],{"class":264},[220,63174,63175,63177],{"class":222,"line":179},[220,63176,364],{"class":264},[220,63178,63097],{"class":420},[220,63180,63181,63183,63185,63187],{"class":222,"line":389},[220,63182,19850],{"class":226},[220,63184,29241],{"class":264},[220,63186,59374],{"class":420},[220,63188,749],{"class":264},[220,63190,63191],{"class":222,"line":399},[220,63192,1234],{"class":264},[220,63194,63195,63197,63199],{"class":222,"line":644},[220,63196,402],{"class":264},[220,63198,347],{"class":420},[220,63200,359],{"class":264},[212,63202,63203],{"className":468,"code":63120,"language":469,"meta":178,"style":178},[99,63204,63205,63213,63219,63231,63235],{"__ignoreMap":178},[220,63206,63207,63209,63211],{"class":222,"line":223},[220,63208,343],{"class":264},[220,63210,347],{"class":420},[220,63212,359],{"class":264},[220,63214,63215,63217],{"class":222,"line":179},[220,63216,364],{"class":264},[220,63218,63097],{"class":420},[220,63220,63221,63223,63225,63227,63229],{"class":222,"line":389},[220,63222,19850],{"class":226},[220,63224,353],{"class":260},[220,63226,743],{"class":264},[220,63228,59374],{"class":420},[220,63230,749],{"class":264},[220,63232,63233],{"class":222,"line":399},[220,63234,1234],{"class":264},[220,63236,63237,63239,63241],{"class":222,"line":644},[220,63238,402],{"class":264},[220,63240,347],{"class":420},[220,63242,359],{"class":264},[212,63244,63246],{"className":251,"code":63245,"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,63247,63248,63258,63262,63276,63280,63293,63297],{"__ignoreMap":178},[220,63249,63250,63252,63254,63256],{"class":222,"line":223},[220,63251,261],{"class":260},[220,63253,10879],{"class":264},[220,63255,268],{"class":260},[220,63257,4007],{"class":230},[220,63259,63260],{"class":222,"line":179},[220,63261,647],{"emptyLinePlaceholder":194},[220,63263,63264,63266,63268,63270,63272,63274],{"class":222,"line":389},[220,63265,1735],{"class":260},[220,63267,1738],{"class":420},[220,63269,1741],{"class":260},[220,63271,1744],{"class":260},[220,63273,1747],{"class":226},[220,63275,1750],{"class":264},[220,63277,63278],{"class":222,"line":399},[220,63279,1765],{"class":264},[220,63281,63282,63284,63287,63289,63291],{"class":222,"line":644},[220,63283,1770],{"class":264},[220,63285,63286],{"class":230},"'Plasma'",[220,63288,31573],{"class":264},[220,63290,59374],{"class":420},[220,63292,1782],{"class":264},[220,63294,63295],{"class":222,"line":650},[220,63296,1787],{"class":264},[220,63298,63299],{"class":222,"line":656},[220,63300,1792],{"class":264},[1504,63302,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63304},[63305,63306],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":12436,"description":63066},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":63313,"title":63314,"body":63315,"category":35939,"componentType":25247,"description":63322,"extension":191,"meta":63507,"navigation":194,"path":63508,"requiresChild":31900,"seo":63509,"stem":63510,"__hash__":63511},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":63316,"toc":63503},[63317,63320,63323,63325,63327,63330,63332,63501],[11,63318,63314],{"id":63319},"plastic",[15,63321,63322],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31281,63324],{"component":63314},[23,63326,31285],{"id":25903},[31287,63328],{":props":63329},"[{\"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,63331,31293],{"id":31292},[246,63333,63334,63363,63391,63419,63447],{":tabs":1557},[212,63335,63337],{"className":334,"code":63336,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,63338,63339,63347,63355],{"__ignoreMap":178},[220,63340,63341,63343,63345],{"class":222,"line":223},[220,63342,343],{"class":264},[220,63344,347],{"class":346},[220,63346,359],{"class":264},[220,63348,63349,63351,63353],{"class":222,"line":179},[220,63350,364],{"class":264},[220,63352,63314],{"class":346},[220,63354,386],{"class":264},[220,63356,63357,63359,63361],{"class":222,"line":389},[220,63358,402],{"class":264},[220,63360,347],{"class":346},[220,63362,359],{"class":264},[212,63364,63365],{"className":409,"code":63336,"language":411,"meta":178,"style":178},[99,63366,63367,63375,63383],{"__ignoreMap":178},[220,63368,63369,63371,63373],{"class":222,"line":223},[220,63370,343],{"class":264},[220,63372,347],{"class":420},[220,63374,359],{"class":264},[220,63376,63377,63379,63381],{"class":222,"line":179},[220,63378,364],{"class":264},[220,63380,63314],{"class":420},[220,63382,386],{"class":264},[220,63384,63385,63387,63389],{"class":222,"line":389},[220,63386,402],{"class":264},[220,63388,347],{"class":420},[220,63390,359],{"class":264},[212,63392,63393],{"className":2844,"code":63336,"language":2846,"meta":178,"style":178},[99,63394,63395,63403,63411],{"__ignoreMap":178},[220,63396,63397,63399,63401],{"class":222,"line":223},[220,63398,343],{"class":264},[220,63400,347],{"class":420},[220,63402,359],{"class":264},[220,63404,63405,63407,63409],{"class":222,"line":179},[220,63406,364],{"class":264},[220,63408,63314],{"class":420},[220,63410,386],{"class":264},[220,63412,63413,63415,63417],{"class":222,"line":389},[220,63414,402],{"class":264},[220,63416,347],{"class":420},[220,63418,359],{"class":264},[212,63420,63421],{"className":468,"code":63336,"language":469,"meta":178,"style":178},[99,63422,63423,63431,63439],{"__ignoreMap":178},[220,63424,63425,63427,63429],{"class":222,"line":223},[220,63426,343],{"class":264},[220,63428,347],{"class":420},[220,63430,359],{"class":264},[220,63432,63433,63435,63437],{"class":222,"line":179},[220,63434,364],{"class":264},[220,63436,63314],{"class":420},[220,63438,386],{"class":264},[220,63440,63441,63443,63445],{"class":222,"line":389},[220,63442,402],{"class":264},[220,63444,347],{"class":420},[220,63446,359],{"class":264},[212,63448,63450],{"className":251,"code":63449,"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,63451,63452,63462,63466,63480,63484,63493,63497],{"__ignoreMap":178},[220,63453,63454,63456,63458,63460],{"class":222,"line":223},[220,63455,261],{"class":260},[220,63457,10879],{"class":264},[220,63459,268],{"class":260},[220,63461,4007],{"class":230},[220,63463,63464],{"class":222,"line":179},[220,63465,647],{"emptyLinePlaceholder":194},[220,63467,63468,63470,63472,63474,63476,63478],{"class":222,"line":389},[220,63469,1735],{"class":260},[220,63471,1738],{"class":420},[220,63473,1741],{"class":260},[220,63475,1744],{"class":260},[220,63477,1747],{"class":226},[220,63479,1750],{"class":264},[220,63481,63482],{"class":222,"line":399},[220,63483,1765],{"class":264},[220,63485,63486,63488,63491],{"class":222,"line":644},[220,63487,1770],{"class":264},[220,63489,63490],{"class":230},"'Plastic'",[220,63492,2465],{"class":264},[220,63494,63495],{"class":222,"line":650},[220,63496,1787],{"class":264},[220,63498,63499],{"class":222,"line":656},[220,63500,1792],{"class":264},[1504,63502,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":63504},[63505,63506],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":63314,"description":63322},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":63513,"title":63514,"body":63515,"category":32766,"componentType":25253,"description":63522,"extension":191,"meta":63885,"navigation":194,"path":63886,"requiresChild":194,"seo":63887,"stem":63888,"__hash__":63889},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":63516,"toc":63881},[63517,63520,63523,63525,63527,63530,63532,63879],[11,63518,63514],{"id":63519},"polarcoordinates",[15,63521,63522],{},"Convert rectangular coordinates to polar space",[31281,63524],{"component":63514},[23,63526,31285],{"id":25903},[31287,63528],{":props":63529},"[{\"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,63531,31293],{"id":31292},[246,63533,63534,63598,63669,63735,63805],{":tabs":1557},[212,63535,63537],{"className":334,"code":63536,"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,63538,63539,63547,63554,63562,63570,63574,63582,63590],{"__ignoreMap":178},[220,63540,63541,63543,63545],{"class":222,"line":223},[220,63542,343],{"class":264},[220,63544,347],{"class":346},[220,63546,359],{"class":264},[220,63548,63549,63551],{"class":222,"line":179},[220,63550,364],{"class":264},[220,63552,63553],{"class":346},"PolarCoordinates\n",[220,63555,63556,63558,63560],{"class":222,"line":389},[220,63557,16772],{"class":226},[220,63559,353],{"class":264},[220,63561,35995],{"class":230},[220,63563,63564,63566,63568],{"class":222,"line":399},[220,63565,19739],{"class":226},[220,63567,353],{"class":264},[220,63569,35995],{"class":230},[220,63571,63572],{"class":222,"line":644},[220,63573,31329],{"class":264},[220,63575,63576,63578,63580],{"class":222,"line":650},[220,63577,2550],{"class":264},[220,63579,2553],{"class":346},[220,63581,386],{"class":264},[220,63583,63584,63586,63588],{"class":222,"line":656},[220,63585,2567],{"class":264},[220,63587,63514],{"class":346},[220,63589,359],{"class":264},[220,63591,63592,63594,63596],{"class":222,"line":673},[220,63593,402],{"class":264},[220,63595,347],{"class":346},[220,63597,359],{"class":264},[212,63599,63601],{"className":409,"code":63600,"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,63602,63603,63611,63617,63629,63641,63645,63653,63661],{"__ignoreMap":178},[220,63604,63605,63607,63609],{"class":222,"line":223},[220,63606,343],{"class":264},[220,63608,347],{"class":420},[220,63610,359],{"class":264},[220,63612,63613,63615],{"class":222,"line":179},[220,63614,364],{"class":264},[220,63616,63553],{"class":420},[220,63618,63619,63621,63623,63625,63627],{"class":222,"line":389},[220,63620,9012],{"class":226},[220,63622,353],{"class":260},[220,63624,743],{"class":264},[220,63626,8043],{"class":420},[220,63628,749],{"class":264},[220,63630,63631,63633,63635,63637,63639],{"class":222,"line":399},[220,63632,19850],{"class":226},[220,63634,353],{"class":260},[220,63636,743],{"class":264},[220,63638,8043],{"class":420},[220,63640,749],{"class":264},[220,63642,63643],{"class":222,"line":644},[220,63644,31329],{"class":264},[220,63646,63647,63649,63651],{"class":222,"line":650},[220,63648,2550],{"class":264},[220,63650,2553],{"class":420},[220,63652,386],{"class":264},[220,63654,63655,63657,63659],{"class":222,"line":656},[220,63656,2567],{"class":264},[220,63658,63514],{"class":420},[220,63660,359],{"class":264},[220,63662,63663,63665,63667],{"class":222,"line":673},[220,63664,402],{"class":264},[220,63666,347],{"class":420},[220,63668,359],{"class":264},[212,63670,63671],{"className":2844,"code":63600,"language":2846,"meta":178,"style":178},[99,63672,63673,63681,63687,63697,63707,63711,63719,63727],{"__ignoreMap":178},[220,63674,63675,63677,63679],{"class":222,"line":223},[220,63676,343],{"class":264},[220,63678,347],{"class":420},[220,63680,359],{"class":264},[220,63682,63683,63685],{"class":222,"line":179},[220,63684,364],{"class":264},[220,63686,63553],{"class":420},[220,63688,63689,63691,63693,63695],{"class":222,"line":389},[220,63690,9012],{"class":226},[220,63692,29241],{"class":264},[220,63694,8043],{"class":420},[220,63696,749],{"class":264},[220,63698,63699,63701,63703,63705],{"class":222,"line":399},[220,63700,19850],{"class":226},[220,63702,29241],{"class":264},[220,63704,8043],{"class":420},[220,63706,749],{"class":264},[220,63708,63709],{"class":222,"line":644},[220,63710,31329],{"class":264},[220,63712,63713,63715,63717],{"class":222,"line":650},[220,63714,2550],{"class":264},[220,63716,2553],{"class":420},[220,63718,386],{"class":264},[220,63720,63721,63723,63725],{"class":222,"line":656},[220,63722,2567],{"class":264},[220,63724,63514],{"class":420},[220,63726,359],{"class":264},[220,63728,63729,63731,63733],{"class":222,"line":673},[220,63730,402],{"class":264},[220,63732,347],{"class":420},[220,63734,359],{"class":264},[212,63736,63737],{"className":468,"code":63600,"language":469,"meta":178,"style":178},[99,63738,63739,63747,63753,63765,63777,63781,63789,63797],{"__ignoreMap":178},[220,63740,63741,63743,63745],{"class":222,"line":223},[220,63742,343],{"class":264},[220,63744,347],{"class":420},[220,63746,359],{"class":264},[220,63748,63749,63751],{"class":222,"line":179},[220,63750,364],{"class":264},[220,63752,63553],{"class":420},[220,63754,63755,63757,63759,63761,63763],{"class":222,"line":389},[220,63756,9012],{"class":226},[220,63758,353],{"class":260},[220,63760,743],{"class":264},[220,63762,8043],{"class":420},[220,63764,749],{"class":264},[220,63766,63767,63769,63771,63773,63775],{"class":222,"line":399},[220,63768,19850],{"class":226},[220,63770,353],{"class":260},[220,63772,743],{"class":264},[220,63774,8043],{"class":420},[220,63776,749],{"class":264},[220,63778,63779],{"class":222,"line":644},[220,63780,31329],{"class":264},[220,63782,63783,63785,63787],{"class":222,"line":650},[220,63784,2550],{"class":264},[220,63786,2553],{"class":420},[220,63788,386],{"class":264},[220,63790,63791,63793,63795],{"class":222,"line":656},[220,63792,2567],{"class":264},[220,63794,63514],{"class":420},[220,63796,359],{"class":264},[220,63798,63799,63801,63803],{"class":222,"line":673},[220,63800,402],{"class":264},[220,63802,347],{"class":420},[220,63804,359],{"class":264},[212,63806,63808],{"className":251,"code":63807,"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,63809,63810,63820,63824,63838,63842,63859,63867,63871,63875],{"__ignoreMap":178},[220,63811,63812,63814,63816,63818],{"class":222,"line":223},[220,63813,261],{"class":260},[220,63815,10879],{"class":264},[220,63817,268],{"class":260},[220,63819,4007],{"class":230},[220,63821,63822],{"class":222,"line":179},[220,63823,647],{"emptyLinePlaceholder":194},[220,63825,63826,63828,63830,63832,63834,63836],{"class":222,"line":389},[220,63827,1735],{"class":260},[220,63829,1738],{"class":420},[220,63831,1741],{"class":260},[220,63833,1744],{"class":260},[220,63835,1747],{"class":226},[220,63837,1750],{"class":264},[220,63839,63840],{"class":222,"line":399},[220,63841,1765],{"class":264},[220,63843,63844,63846,63849,63851,63853,63855,63857],{"class":222,"line":644},[220,63845,1770],{"class":264},[220,63847,63848],{"class":230},"'PolarCoordinates'",[220,63850,6907],{"class":264},[220,63852,8043],{"class":420},[220,63854,44373],{"class":264},[220,63856,8043],{"class":420},[220,63858,6912],{"class":264},[220,63860,63861,63863,63865],{"class":222,"line":650},[220,63862,6380],{"class":264},[220,63864,3206],{"class":230},[220,63866,2465],{"class":264},[220,63868,63869],{"class":222,"line":656},[220,63870,6397],{"class":264},[220,63872,63873],{"class":222,"line":673},[220,63874,1787],{"class":264},[220,63876,63877],{"class":222,"line":682},[220,63878,1792],{"class":264},[1504,63880,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63882},[63883,63884],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":63514,"description":63522},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":63891,"title":63892,"body":63893,"category":15275,"componentType":25247,"description":63900,"extension":191,"meta":64177,"navigation":194,"path":64178,"requiresChild":31900,"seo":64179,"stem":64180,"__hash__":64181},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":63894,"toc":64173},[63895,63898,63901,63903,63905,63908,63910,64171],[11,63896,63892],{"id":63897},"polygon",[15,63899,63900],{},"Regular polygon with adjustable sides and corner rounding",[31281,63902],{"component":63892},[23,63904,31285],{"id":25903},[31287,63906],{":props":63907},"[{\"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,63909,31293],{"id":31292},[246,63911,63912,63960,64011,64059,64109],{":tabs":1557},[212,63913,63915],{"className":334,"code":63914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,63916,63917,63925,63932,63940,63948,63952],{"__ignoreMap":178},[220,63918,63919,63921,63923],{"class":222,"line":223},[220,63920,343],{"class":264},[220,63922,347],{"class":346},[220,63924,359],{"class":264},[220,63926,63927,63929],{"class":222,"line":179},[220,63928,364],{"class":264},[220,63930,63931],{"class":346},"Polygon\n",[220,63933,63934,63936,63938],{"class":222,"line":389},[220,63935,9002],{"class":226},[220,63937,353],{"class":264},[220,63939,8958],{"class":230},[220,63941,63942,63944,63946],{"class":222,"line":399},[220,63943,16772],{"class":226},[220,63945,353],{"class":264},[220,63947,47518],{"class":230},[220,63949,63950],{"class":222,"line":644},[220,63951,1234],{"class":264},[220,63953,63954,63956,63958],{"class":222,"line":650},[220,63955,402],{"class":264},[220,63957,347],{"class":346},[220,63959,359],{"class":264},[212,63961,63963],{"className":409,"code":63962,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,63964,63965,63973,63979,63987,63999,64003],{"__ignoreMap":178},[220,63966,63967,63969,63971],{"class":222,"line":223},[220,63968,343],{"class":264},[220,63970,347],{"class":420},[220,63972,359],{"class":264},[220,63974,63975,63977],{"class":222,"line":179},[220,63976,364],{"class":264},[220,63978,63931],{"class":420},[220,63980,63981,63983,63985],{"class":222,"line":389},[220,63982,9002],{"class":226},[220,63984,353],{"class":260},[220,63986,8958],{"class":230},[220,63988,63989,63991,63993,63995,63997],{"class":222,"line":399},[220,63990,9012],{"class":226},[220,63992,353],{"class":260},[220,63994,743],{"class":264},[220,63996,7615],{"class":420},[220,63998,749],{"class":264},[220,64000,64001],{"class":222,"line":644},[220,64002,1234],{"class":264},[220,64004,64005,64007,64009],{"class":222,"line":650},[220,64006,402],{"class":264},[220,64008,347],{"class":420},[220,64010,359],{"class":264},[212,64012,64013],{"className":2844,"code":63962,"language":2846,"meta":178,"style":178},[99,64014,64015,64023,64029,64037,64047,64051],{"__ignoreMap":178},[220,64016,64017,64019,64021],{"class":222,"line":223},[220,64018,343],{"class":264},[220,64020,347],{"class":420},[220,64022,359],{"class":264},[220,64024,64025,64027],{"class":222,"line":179},[220,64026,364],{"class":264},[220,64028,63931],{"class":420},[220,64030,64031,64033,64035],{"class":222,"line":389},[220,64032,9002],{"class":226},[220,64034,353],{"class":264},[220,64036,8958],{"class":230},[220,64038,64039,64041,64043,64045],{"class":222,"line":399},[220,64040,9012],{"class":226},[220,64042,29241],{"class":264},[220,64044,7615],{"class":420},[220,64046,749],{"class":264},[220,64048,64049],{"class":222,"line":644},[220,64050,1234],{"class":264},[220,64052,64053,64055,64057],{"class":222,"line":650},[220,64054,402],{"class":264},[220,64056,347],{"class":420},[220,64058,359],{"class":264},[212,64060,64061],{"className":468,"code":63962,"language":469,"meta":178,"style":178},[99,64062,64063,64071,64077,64085,64097,64101],{"__ignoreMap":178},[220,64064,64065,64067,64069],{"class":222,"line":223},[220,64066,343],{"class":264},[220,64068,347],{"class":420},[220,64070,359],{"class":264},[220,64072,64073,64075],{"class":222,"line":179},[220,64074,364],{"class":264},[220,64076,63931],{"class":420},[220,64078,64079,64081,64083],{"class":222,"line":389},[220,64080,9002],{"class":226},[220,64082,353],{"class":260},[220,64084,8958],{"class":230},[220,64086,64087,64089,64091,64093,64095],{"class":222,"line":399},[220,64088,9012],{"class":226},[220,64090,353],{"class":260},[220,64092,743],{"class":264},[220,64094,7615],{"class":420},[220,64096,749],{"class":264},[220,64098,64099],{"class":222,"line":644},[220,64100,1234],{"class":264},[220,64102,64103,64105,64107],{"class":222,"line":650},[220,64104,402],{"class":264},[220,64106,347],{"class":420},[220,64108,359],{"class":264},[212,64110,64112],{"className":251,"code":64111,"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,64113,64114,64124,64128,64142,64146,64163,64167],{"__ignoreMap":178},[220,64115,64116,64118,64120,64122],{"class":222,"line":223},[220,64117,261],{"class":260},[220,64119,10879],{"class":264},[220,64121,268],{"class":260},[220,64123,4007],{"class":230},[220,64125,64126],{"class":222,"line":179},[220,64127,647],{"emptyLinePlaceholder":194},[220,64129,64130,64132,64134,64136,64138,64140],{"class":222,"line":389},[220,64131,1735],{"class":260},[220,64133,1738],{"class":420},[220,64135,1741],{"class":260},[220,64137,1744],{"class":260},[220,64139,1747],{"class":226},[220,64141,1750],{"class":264},[220,64143,64144],{"class":222,"line":399},[220,64145,1765],{"class":264},[220,64147,64148,64150,64153,64155,64157,64159,64161],{"class":222,"line":644},[220,64149,1770],{"class":264},[220,64151,64152],{"class":230},"'Polygon'",[220,64154,1776],{"class":264},[220,64156,9536],{"class":230},[220,64158,5932],{"class":264},[220,64160,7615],{"class":420},[220,64162,1782],{"class":264},[220,64164,64165],{"class":222,"line":650},[220,64166,1787],{"class":264},[220,64168,64169],{"class":222,"line":656},[220,64170,1792],{"class":264},[1504,64172,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64174},[64175,64176],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":63892,"description":63900},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":64183,"title":64184,"body":64185,"category":35738,"componentType":25253,"description":64192,"extension":191,"meta":64510,"navigation":194,"path":64511,"requiresChild":194,"seo":64512,"stem":64513,"__hash__":64514},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":64186,"toc":64506},[64187,64190,64193,64195,64197,64200,64202,64504],[11,64188,64184],{"id":64189},"posterize",[15,64191,64192],{},"Reduce color depth to create a poster effect",[31281,64194],{"component":64184},[23,64196,31285],{"id":25903},[31287,64198],{":props":64199},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,64201,31293],{"id":31292},[246,64203,64204,64261,64320,64376,64434],{":tabs":1557},[212,64205,64207],{"className":334,"code":64206,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64208,64209,64217,64224,64233,64237,64245,64253],{"__ignoreMap":178},[220,64210,64211,64213,64215],{"class":222,"line":223},[220,64212,343],{"class":264},[220,64214,347],{"class":346},[220,64216,359],{"class":264},[220,64218,64219,64221],{"class":222,"line":179},[220,64220,364],{"class":264},[220,64222,64223],{"class":346},"Posterize\n",[220,64225,64226,64228,64230],{"class":222,"line":389},[220,64227,19739],{"class":226},[220,64229,353],{"class":264},[220,64231,64232],{"class":230},"\"5\"\n",[220,64234,64235],{"class":222,"line":399},[220,64236,31329],{"class":264},[220,64238,64239,64241,64243],{"class":222,"line":644},[220,64240,2550],{"class":264},[220,64242,2553],{"class":346},[220,64244,386],{"class":264},[220,64246,64247,64249,64251],{"class":222,"line":650},[220,64248,2567],{"class":264},[220,64250,64184],{"class":346},[220,64252,359],{"class":264},[220,64254,64255,64257,64259],{"class":222,"line":656},[220,64256,402],{"class":264},[220,64258,347],{"class":346},[220,64260,359],{"class":264},[212,64262,64264],{"className":409,"code":64263,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64265,64266,64274,64280,64292,64296,64304,64312],{"__ignoreMap":178},[220,64267,64268,64270,64272],{"class":222,"line":223},[220,64269,343],{"class":264},[220,64271,347],{"class":420},[220,64273,359],{"class":264},[220,64275,64276,64278],{"class":222,"line":179},[220,64277,364],{"class":264},[220,64279,64223],{"class":420},[220,64281,64282,64284,64286,64288,64290],{"class":222,"line":389},[220,64283,19850],{"class":226},[220,64285,353],{"class":260},[220,64287,743],{"class":264},[220,64289,21461],{"class":420},[220,64291,749],{"class":264},[220,64293,64294],{"class":222,"line":399},[220,64295,31329],{"class":264},[220,64297,64298,64300,64302],{"class":222,"line":644},[220,64299,2550],{"class":264},[220,64301,2553],{"class":420},[220,64303,386],{"class":264},[220,64305,64306,64308,64310],{"class":222,"line":650},[220,64307,2567],{"class":264},[220,64309,64184],{"class":420},[220,64311,359],{"class":264},[220,64313,64314,64316,64318],{"class":222,"line":656},[220,64315,402],{"class":264},[220,64317,347],{"class":420},[220,64319,359],{"class":264},[212,64321,64322],{"className":2844,"code":64263,"language":2846,"meta":178,"style":178},[99,64323,64324,64332,64338,64348,64352,64360,64368],{"__ignoreMap":178},[220,64325,64326,64328,64330],{"class":222,"line":223},[220,64327,343],{"class":264},[220,64329,347],{"class":420},[220,64331,359],{"class":264},[220,64333,64334,64336],{"class":222,"line":179},[220,64335,364],{"class":264},[220,64337,64223],{"class":420},[220,64339,64340,64342,64344,64346],{"class":222,"line":389},[220,64341,19850],{"class":226},[220,64343,29241],{"class":264},[220,64345,21461],{"class":420},[220,64347,749],{"class":264},[220,64349,64350],{"class":222,"line":399},[220,64351,31329],{"class":264},[220,64353,64354,64356,64358],{"class":222,"line":644},[220,64355,2550],{"class":264},[220,64357,2553],{"class":420},[220,64359,386],{"class":264},[220,64361,64362,64364,64366],{"class":222,"line":650},[220,64363,2567],{"class":264},[220,64365,64184],{"class":420},[220,64367,359],{"class":264},[220,64369,64370,64372,64374],{"class":222,"line":656},[220,64371,402],{"class":264},[220,64373,347],{"class":420},[220,64375,359],{"class":264},[212,64377,64378],{"className":468,"code":64263,"language":469,"meta":178,"style":178},[99,64379,64380,64388,64394,64406,64410,64418,64426],{"__ignoreMap":178},[220,64381,64382,64384,64386],{"class":222,"line":223},[220,64383,343],{"class":264},[220,64385,347],{"class":420},[220,64387,359],{"class":264},[220,64389,64390,64392],{"class":222,"line":179},[220,64391,364],{"class":264},[220,64393,64223],{"class":420},[220,64395,64396,64398,64400,64402,64404],{"class":222,"line":389},[220,64397,19850],{"class":226},[220,64399,353],{"class":260},[220,64401,743],{"class":264},[220,64403,21461],{"class":420},[220,64405,749],{"class":264},[220,64407,64408],{"class":222,"line":399},[220,64409,31329],{"class":264},[220,64411,64412,64414,64416],{"class":222,"line":644},[220,64413,2550],{"class":264},[220,64415,2553],{"class":420},[220,64417,386],{"class":264},[220,64419,64420,64422,64424],{"class":222,"line":650},[220,64421,2567],{"class":264},[220,64423,64184],{"class":420},[220,64425,359],{"class":264},[220,64427,64428,64430,64432],{"class":222,"line":656},[220,64429,402],{"class":264},[220,64431,347],{"class":420},[220,64433,359],{"class":264},[212,64435,64437],{"className":251,"code":64436,"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,64438,64439,64449,64453,64467,64471,64484,64492,64496,64500],{"__ignoreMap":178},[220,64440,64441,64443,64445,64447],{"class":222,"line":223},[220,64442,261],{"class":260},[220,64444,10879],{"class":264},[220,64446,268],{"class":260},[220,64448,4007],{"class":230},[220,64450,64451],{"class":222,"line":179},[220,64452,647],{"emptyLinePlaceholder":194},[220,64454,64455,64457,64459,64461,64463,64465],{"class":222,"line":389},[220,64456,1735],{"class":260},[220,64458,1738],{"class":420},[220,64460,1741],{"class":260},[220,64462,1744],{"class":260},[220,64464,1747],{"class":226},[220,64466,1750],{"class":264},[220,64468,64469],{"class":222,"line":399},[220,64470,1765],{"class":264},[220,64472,64473,64475,64478,64480,64482],{"class":222,"line":644},[220,64474,1770],{"class":264},[220,64476,64477],{"class":230},"'Posterize'",[220,64479,31573],{"class":264},[220,64481,21461],{"class":420},[220,64483,6912],{"class":264},[220,64485,64486,64488,64490],{"class":222,"line":650},[220,64487,6380],{"class":264},[220,64489,3206],{"class":230},[220,64491,2465],{"class":264},[220,64493,64494],{"class":222,"line":656},[220,64495,6397],{"class":264},[220,64497,64498],{"class":222,"line":673},[220,64499,1787],{"class":264},[220,64501,64502],{"class":222,"line":682},[220,64503,1792],{"class":264},[1504,64505,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64507},[64508,64509],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":64184,"description":64192},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":64516,"title":64517,"body":64518,"category":32433,"componentType":25247,"description":64525,"extension":191,"meta":64768,"navigation":194,"path":64769,"requiresChild":31900,"seo":64770,"stem":64771,"__hash__":64772},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":64519,"toc":64764},[64520,64523,64526,64528,64530,64533,64535,64762],[11,64521,64517],{"id":64522},"prism",[15,64524,64525],{},"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.",[31281,64527],{"component":64517},[23,64529,31285],{"id":25903},[31287,64531],{":props":64532},"[{\"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,64534,31293],{"id":31292},[246,64536,64537,64578,64622,64662,64704],{":tabs":1557},[212,64538,64540],{"className":334,"code":64539,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,64541,64542,64550,64557,64566,64570],{"__ignoreMap":178},[220,64543,64544,64546,64548],{"class":222,"line":223},[220,64545,343],{"class":264},[220,64547,347],{"class":346},[220,64549,359],{"class":264},[220,64551,64552,64554],{"class":222,"line":179},[220,64553,364],{"class":264},[220,64555,64556],{"class":346},"Prism\n",[220,64558,64559,64561,64563],{"class":222,"line":389},[220,64560,19739],{"class":226},[220,64562,353],{"class":264},[220,64564,64565],{"class":230},"\"1.6\"\n",[220,64567,64568],{"class":222,"line":399},[220,64569,1234],{"class":264},[220,64571,64572,64574,64576],{"class":222,"line":644},[220,64573,402],{"class":264},[220,64575,347],{"class":346},[220,64577,359],{"class":264},[212,64579,64581],{"className":409,"code":64580,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,64582,64583,64591,64597,64610,64614],{"__ignoreMap":178},[220,64584,64585,64587,64589],{"class":222,"line":223},[220,64586,343],{"class":264},[220,64588,347],{"class":420},[220,64590,359],{"class":264},[220,64592,64593,64595],{"class":222,"line":179},[220,64594,364],{"class":264},[220,64596,64556],{"class":420},[220,64598,64599,64601,64603,64605,64608],{"class":222,"line":389},[220,64600,19850],{"class":226},[220,64602,353],{"class":260},[220,64604,743],{"class":264},[220,64606,64607],{"class":420},"1.6",[220,64609,749],{"class":264},[220,64611,64612],{"class":222,"line":399},[220,64613,1234],{"class":264},[220,64615,64616,64618,64620],{"class":222,"line":644},[220,64617,402],{"class":264},[220,64619,347],{"class":420},[220,64621,359],{"class":264},[212,64623,64624],{"className":2844,"code":64580,"language":2846,"meta":178,"style":178},[99,64625,64626,64634,64640,64650,64654],{"__ignoreMap":178},[220,64627,64628,64630,64632],{"class":222,"line":223},[220,64629,343],{"class":264},[220,64631,347],{"class":420},[220,64633,359],{"class":264},[220,64635,64636,64638],{"class":222,"line":179},[220,64637,364],{"class":264},[220,64639,64556],{"class":420},[220,64641,64642,64644,64646,64648],{"class":222,"line":389},[220,64643,19850],{"class":226},[220,64645,29241],{"class":264},[220,64647,64607],{"class":420},[220,64649,749],{"class":264},[220,64651,64652],{"class":222,"line":399},[220,64653,1234],{"class":264},[220,64655,64656,64658,64660],{"class":222,"line":644},[220,64657,402],{"class":264},[220,64659,347],{"class":420},[220,64661,359],{"class":264},[212,64663,64664],{"className":468,"code":64580,"language":469,"meta":178,"style":178},[99,64665,64666,64674,64680,64692,64696],{"__ignoreMap":178},[220,64667,64668,64670,64672],{"class":222,"line":223},[220,64669,343],{"class":264},[220,64671,347],{"class":420},[220,64673,359],{"class":264},[220,64675,64676,64678],{"class":222,"line":179},[220,64677,364],{"class":264},[220,64679,64556],{"class":420},[220,64681,64682,64684,64686,64688,64690],{"class":222,"line":389},[220,64683,19850],{"class":226},[220,64685,353],{"class":260},[220,64687,743],{"class":264},[220,64689,64607],{"class":420},[220,64691,749],{"class":264},[220,64693,64694],{"class":222,"line":399},[220,64695,1234],{"class":264},[220,64697,64698,64700,64702],{"class":222,"line":644},[220,64699,402],{"class":264},[220,64701,347],{"class":420},[220,64703,359],{"class":264},[212,64705,64707],{"className":251,"code":64706,"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,64708,64709,64719,64723,64737,64741,64754,64758],{"__ignoreMap":178},[220,64710,64711,64713,64715,64717],{"class":222,"line":223},[220,64712,261],{"class":260},[220,64714,10879],{"class":264},[220,64716,268],{"class":260},[220,64718,4007],{"class":230},[220,64720,64721],{"class":222,"line":179},[220,64722,647],{"emptyLinePlaceholder":194},[220,64724,64725,64727,64729,64731,64733,64735],{"class":222,"line":389},[220,64726,1735],{"class":260},[220,64728,1738],{"class":420},[220,64730,1741],{"class":260},[220,64732,1744],{"class":260},[220,64734,1747],{"class":226},[220,64736,1750],{"class":264},[220,64738,64739],{"class":222,"line":399},[220,64740,1765],{"class":264},[220,64742,64743,64745,64748,64750,64752],{"class":222,"line":644},[220,64744,1770],{"class":264},[220,64746,64747],{"class":230},"'Prism'",[220,64749,31573],{"class":264},[220,64751,64607],{"class":420},[220,64753,1782],{"class":264},[220,64755,64756],{"class":222,"line":650},[220,64757,1787],{"class":264},[220,64759,64760],{"class":222,"line":656},[220,64761,1792],{"class":264},[1504,64763,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64765},[64766,64767],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":64517,"description":64525},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":64774,"title":64775,"body":64776,"category":31604,"componentType":25253,"description":64783,"extension":191,"meta":65100,"navigation":194,"path":65101,"requiresChild":194,"seo":65102,"stem":65103,"__hash__":65104},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":64777,"toc":65096},[64778,64781,64784,64786,64788,64791,64793,65094],[11,64779,64775],{"id":64780},"progressiveblur",[15,64782,64783],{},"Blur that increases progressively in one direction",[31281,64785],{"component":64775},[23,64787,31285],{"id":25903},[31287,64789],{":props":64790},"[{\"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,64792,31293],{"id":31292},[246,64794,64795,64851,64910,64966,65024],{":tabs":1557},[212,64796,64798],{"className":334,"code":64797,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,64799,64800,64808,64815,64823,64827,64835,64843],{"__ignoreMap":178},[220,64801,64802,64804,64806],{"class":222,"line":223},[220,64803,343],{"class":264},[220,64805,347],{"class":346},[220,64807,359],{"class":264},[220,64809,64810,64812],{"class":222,"line":179},[220,64811,364],{"class":264},[220,64813,64814],{"class":346},"ProgressiveBlur\n",[220,64816,64817,64819,64821],{"class":222,"line":389},[220,64818,19739],{"class":226},[220,64820,353],{"class":264},[220,64822,34450],{"class":230},[220,64824,64825],{"class":222,"line":399},[220,64826,31329],{"class":264},[220,64828,64829,64831,64833],{"class":222,"line":644},[220,64830,2550],{"class":264},[220,64832,2553],{"class":346},[220,64834,386],{"class":264},[220,64836,64837,64839,64841],{"class":222,"line":650},[220,64838,2567],{"class":264},[220,64840,64775],{"class":346},[220,64842,359],{"class":264},[220,64844,64845,64847,64849],{"class":222,"line":656},[220,64846,402],{"class":264},[220,64848,347],{"class":346},[220,64850,359],{"class":264},[212,64852,64854],{"className":409,"code":64853,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,64855,64856,64864,64870,64882,64886,64894,64902],{"__ignoreMap":178},[220,64857,64858,64860,64862],{"class":222,"line":223},[220,64859,343],{"class":264},[220,64861,347],{"class":420},[220,64863,359],{"class":264},[220,64865,64866,64868],{"class":222,"line":179},[220,64867,364],{"class":264},[220,64869,64814],{"class":420},[220,64871,64872,64874,64876,64878,64880],{"class":222,"line":389},[220,64873,19850],{"class":226},[220,64875,353],{"class":260},[220,64877,743],{"class":264},[220,64879,34508],{"class":420},[220,64881,749],{"class":264},[220,64883,64884],{"class":222,"line":399},[220,64885,31329],{"class":264},[220,64887,64888,64890,64892],{"class":222,"line":644},[220,64889,2550],{"class":264},[220,64891,2553],{"class":420},[220,64893,386],{"class":264},[220,64895,64896,64898,64900],{"class":222,"line":650},[220,64897,2567],{"class":264},[220,64899,64775],{"class":420},[220,64901,359],{"class":264},[220,64903,64904,64906,64908],{"class":222,"line":656},[220,64905,402],{"class":264},[220,64907,347],{"class":420},[220,64909,359],{"class":264},[212,64911,64912],{"className":2844,"code":64853,"language":2846,"meta":178,"style":178},[99,64913,64914,64922,64928,64938,64942,64950,64958],{"__ignoreMap":178},[220,64915,64916,64918,64920],{"class":222,"line":223},[220,64917,343],{"class":264},[220,64919,347],{"class":420},[220,64921,359],{"class":264},[220,64923,64924,64926],{"class":222,"line":179},[220,64925,364],{"class":264},[220,64927,64814],{"class":420},[220,64929,64930,64932,64934,64936],{"class":222,"line":389},[220,64931,19850],{"class":226},[220,64933,29241],{"class":264},[220,64935,34508],{"class":420},[220,64937,749],{"class":264},[220,64939,64940],{"class":222,"line":399},[220,64941,31329],{"class":264},[220,64943,64944,64946,64948],{"class":222,"line":644},[220,64945,2550],{"class":264},[220,64947,2553],{"class":420},[220,64949,386],{"class":264},[220,64951,64952,64954,64956],{"class":222,"line":650},[220,64953,2567],{"class":264},[220,64955,64775],{"class":420},[220,64957,359],{"class":264},[220,64959,64960,64962,64964],{"class":222,"line":656},[220,64961,402],{"class":264},[220,64963,347],{"class":420},[220,64965,359],{"class":264},[212,64967,64968],{"className":468,"code":64853,"language":469,"meta":178,"style":178},[99,64969,64970,64978,64984,64996,65000,65008,65016],{"__ignoreMap":178},[220,64971,64972,64974,64976],{"class":222,"line":223},[220,64973,343],{"class":264},[220,64975,347],{"class":420},[220,64977,359],{"class":264},[220,64979,64980,64982],{"class":222,"line":179},[220,64981,364],{"class":264},[220,64983,64814],{"class":420},[220,64985,64986,64988,64990,64992,64994],{"class":222,"line":389},[220,64987,19850],{"class":226},[220,64989,353],{"class":260},[220,64991,743],{"class":264},[220,64993,34508],{"class":420},[220,64995,749],{"class":264},[220,64997,64998],{"class":222,"line":399},[220,64999,31329],{"class":264},[220,65001,65002,65004,65006],{"class":222,"line":644},[220,65003,2550],{"class":264},[220,65005,2553],{"class":420},[220,65007,386],{"class":264},[220,65009,65010,65012,65014],{"class":222,"line":650},[220,65011,2567],{"class":264},[220,65013,64775],{"class":420},[220,65015,359],{"class":264},[220,65017,65018,65020,65022],{"class":222,"line":656},[220,65019,402],{"class":264},[220,65021,347],{"class":420},[220,65023,359],{"class":264},[212,65025,65027],{"className":251,"code":65026,"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,65028,65029,65039,65043,65057,65061,65074,65082,65086,65090],{"__ignoreMap":178},[220,65030,65031,65033,65035,65037],{"class":222,"line":223},[220,65032,261],{"class":260},[220,65034,10879],{"class":264},[220,65036,268],{"class":260},[220,65038,4007],{"class":230},[220,65040,65041],{"class":222,"line":179},[220,65042,647],{"emptyLinePlaceholder":194},[220,65044,65045,65047,65049,65051,65053,65055],{"class":222,"line":389},[220,65046,1735],{"class":260},[220,65048,1738],{"class":420},[220,65050,1741],{"class":260},[220,65052,1744],{"class":260},[220,65054,1747],{"class":226},[220,65056,1750],{"class":264},[220,65058,65059],{"class":222,"line":399},[220,65060,1765],{"class":264},[220,65062,65063,65065,65068,65070,65072],{"class":222,"line":644},[220,65064,1770],{"class":264},[220,65066,65067],{"class":230},"'ProgressiveBlur'",[220,65069,31573],{"class":264},[220,65071,34508],{"class":420},[220,65073,6912],{"class":264},[220,65075,65076,65078,65080],{"class":222,"line":650},[220,65077,6380],{"class":264},[220,65079,3206],{"class":230},[220,65081,2465],{"class":264},[220,65083,65084],{"class":222,"line":656},[220,65085,6397],{"class":264},[220,65087,65088],{"class":222,"line":673},[220,65089,1787],{"class":264},[220,65091,65092],{"class":222,"line":682},[220,65093,1792],{"class":264},[1504,65095,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65097},[65098,65099],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":64775,"description":64783},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":65106,"title":65107,"body":65108,"category":32433,"componentType":25247,"description":65115,"extension":191,"meta":65356,"navigation":194,"path":65357,"requiresChild":31900,"seo":65358,"stem":65359,"__hash__":65360},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":65109,"toc":65352},[65110,65113,65116,65118,65120,65123,65125,65350],[11,65111,65107],{"id":65112},"radialgradient",[15,65114,65115],{},"Radial gradient radiating from a center point",[31281,65117],{"component":65107},[23,65119,31285],{"id":25903},[31287,65121],{":props":65122},"[{\"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,65124,31293],{"id":31292},[246,65126,65127,65167,65210,65250,65292],{":tabs":1557},[212,65128,65130],{"className":334,"code":65129,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,65131,65132,65140,65147,65155,65159],{"__ignoreMap":178},[220,65133,65134,65136,65138],{"class":222,"line":223},[220,65135,343],{"class":264},[220,65137,347],{"class":346},[220,65139,359],{"class":264},[220,65141,65142,65144],{"class":222,"line":179},[220,65143,364],{"class":264},[220,65145,65146],{"class":346},"RadialGradient\n",[220,65148,65149,65151,65153],{"class":222,"line":389},[220,65150,16772],{"class":226},[220,65152,353],{"class":264},[220,65154,35995],{"class":230},[220,65156,65157],{"class":222,"line":399},[220,65158,1234],{"class":264},[220,65160,65161,65163,65165],{"class":222,"line":644},[220,65162,402],{"class":264},[220,65164,347],{"class":346},[220,65166,359],{"class":264},[212,65168,65170],{"className":409,"code":65169,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,65171,65172,65180,65186,65198,65202],{"__ignoreMap":178},[220,65173,65174,65176,65178],{"class":222,"line":223},[220,65175,343],{"class":264},[220,65177,347],{"class":420},[220,65179,359],{"class":264},[220,65181,65182,65184],{"class":222,"line":179},[220,65183,364],{"class":264},[220,65185,65146],{"class":420},[220,65187,65188,65190,65192,65194,65196],{"class":222,"line":389},[220,65189,9012],{"class":226},[220,65191,353],{"class":260},[220,65193,743],{"class":264},[220,65195,8043],{"class":420},[220,65197,749],{"class":264},[220,65199,65200],{"class":222,"line":399},[220,65201,1234],{"class":264},[220,65203,65204,65206,65208],{"class":222,"line":644},[220,65205,402],{"class":264},[220,65207,347],{"class":420},[220,65209,359],{"class":264},[212,65211,65212],{"className":2844,"code":65169,"language":2846,"meta":178,"style":178},[99,65213,65214,65222,65228,65238,65242],{"__ignoreMap":178},[220,65215,65216,65218,65220],{"class":222,"line":223},[220,65217,343],{"class":264},[220,65219,347],{"class":420},[220,65221,359],{"class":264},[220,65223,65224,65226],{"class":222,"line":179},[220,65225,364],{"class":264},[220,65227,65146],{"class":420},[220,65229,65230,65232,65234,65236],{"class":222,"line":389},[220,65231,9012],{"class":226},[220,65233,29241],{"class":264},[220,65235,8043],{"class":420},[220,65237,749],{"class":264},[220,65239,65240],{"class":222,"line":399},[220,65241,1234],{"class":264},[220,65243,65244,65246,65248],{"class":222,"line":644},[220,65245,402],{"class":264},[220,65247,347],{"class":420},[220,65249,359],{"class":264},[212,65251,65252],{"className":468,"code":65169,"language":469,"meta":178,"style":178},[99,65253,65254,65262,65268,65280,65284],{"__ignoreMap":178},[220,65255,65256,65258,65260],{"class":222,"line":223},[220,65257,343],{"class":264},[220,65259,347],{"class":420},[220,65261,359],{"class":264},[220,65263,65264,65266],{"class":222,"line":179},[220,65265,364],{"class":264},[220,65267,65146],{"class":420},[220,65269,65270,65272,65274,65276,65278],{"class":222,"line":389},[220,65271,9012],{"class":226},[220,65273,353],{"class":260},[220,65275,743],{"class":264},[220,65277,8043],{"class":420},[220,65279,749],{"class":264},[220,65281,65282],{"class":222,"line":399},[220,65283,1234],{"class":264},[220,65285,65286,65288,65290],{"class":222,"line":644},[220,65287,402],{"class":264},[220,65289,347],{"class":420},[220,65291,359],{"class":264},[212,65293,65295],{"className":251,"code":65294,"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,65296,65297,65307,65311,65325,65329,65342,65346],{"__ignoreMap":178},[220,65298,65299,65301,65303,65305],{"class":222,"line":223},[220,65300,261],{"class":260},[220,65302,10879],{"class":264},[220,65304,268],{"class":260},[220,65306,4007],{"class":230},[220,65308,65309],{"class":222,"line":179},[220,65310,647],{"emptyLinePlaceholder":194},[220,65312,65313,65315,65317,65319,65321,65323],{"class":222,"line":389},[220,65314,1735],{"class":260},[220,65316,1738],{"class":420},[220,65318,1741],{"class":260},[220,65320,1744],{"class":260},[220,65322,1747],{"class":226},[220,65324,1750],{"class":264},[220,65326,65327],{"class":222,"line":399},[220,65328,1765],{"class":264},[220,65330,65331,65333,65336,65338,65340],{"class":222,"line":644},[220,65332,1770],{"class":264},[220,65334,65335],{"class":230},"'RadialGradient'",[220,65337,6907],{"class":264},[220,65339,8043],{"class":420},[220,65341,1782],{"class":264},[220,65343,65344],{"class":222,"line":650},[220,65345,1787],{"class":264},[220,65347,65348],{"class":222,"line":656},[220,65349,1792],{"class":264},[1504,65351,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65353},[65354,65355],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":65107,"description":65115},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":65362,"title":65363,"body":65364,"category":33043,"componentType":25253,"description":65371,"extension":191,"meta":65632,"navigation":194,"path":65633,"requiresChild":194,"seo":65634,"stem":65635,"__hash__":65636},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":65365,"toc":65628},[65366,65369,65372,65374,65376,65379,65381,65626],[11,65367,65363],{"id":65368},"radialwipe",[15,65370,65371],{},"Sweep the content away in a clock-hand arc around a center point",[31281,65373],{"component":65363},[23,65375,31285],{"id":25903},[31287,65377],{":props":65378},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the sweep has travelled (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"startAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle in degrees where the sweep begins\"},{\"name\":\"direction\",\"type\":\"\\\"cw\\\" | \\\"ccw\\\" | \\\"both\\\"\",\"default\":\"cw\",\"description\":\"Which way the sweep rotates\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the sweep rotates around\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Softness of the sweeping edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse which side of the sweep is wiped\"}]",[23,65380,31293],{"id":31292},[246,65382,65383,65428,65472,65516,65560],{":tabs":1557},[212,65384,65386],{"className":334,"code":65385,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,65387,65388,65396,65404,65412,65420],{"__ignoreMap":178},[220,65389,65390,65392,65394],{"class":222,"line":223},[220,65391,343],{"class":264},[220,65393,347],{"class":346},[220,65395,359],{"class":264},[220,65397,65398,65400,65402],{"class":222,"line":179},[220,65399,364],{"class":264},[220,65401,65363],{"class":346},[220,65403,359],{"class":264},[220,65405,65406,65408,65410],{"class":222,"line":389},[220,65407,2550],{"class":264},[220,65409,2553],{"class":346},[220,65411,386],{"class":264},[220,65413,65414,65416,65418],{"class":222,"line":399},[220,65415,2567],{"class":264},[220,65417,65363],{"class":346},[220,65419,359],{"class":264},[220,65421,65422,65424,65426],{"class":222,"line":644},[220,65423,402],{"class":264},[220,65425,347],{"class":346},[220,65427,359],{"class":264},[212,65429,65430],{"className":409,"code":65385,"language":411,"meta":178,"style":178},[99,65431,65432,65440,65448,65456,65464],{"__ignoreMap":178},[220,65433,65434,65436,65438],{"class":222,"line":223},[220,65435,343],{"class":264},[220,65437,347],{"class":420},[220,65439,359],{"class":264},[220,65441,65442,65444,65446],{"class":222,"line":179},[220,65443,364],{"class":264},[220,65445,65363],{"class":420},[220,65447,359],{"class":264},[220,65449,65450,65452,65454],{"class":222,"line":389},[220,65451,2550],{"class":264},[220,65453,2553],{"class":420},[220,65455,386],{"class":264},[220,65457,65458,65460,65462],{"class":222,"line":399},[220,65459,2567],{"class":264},[220,65461,65363],{"class":420},[220,65463,359],{"class":264},[220,65465,65466,65468,65470],{"class":222,"line":644},[220,65467,402],{"class":264},[220,65469,347],{"class":420},[220,65471,359],{"class":264},[212,65473,65474],{"className":2844,"code":65385,"language":2846,"meta":178,"style":178},[99,65475,65476,65484,65492,65500,65508],{"__ignoreMap":178},[220,65477,65478,65480,65482],{"class":222,"line":223},[220,65479,343],{"class":264},[220,65481,347],{"class":420},[220,65483,359],{"class":264},[220,65485,65486,65488,65490],{"class":222,"line":179},[220,65487,364],{"class":264},[220,65489,65363],{"class":420},[220,65491,359],{"class":264},[220,65493,65494,65496,65498],{"class":222,"line":389},[220,65495,2550],{"class":264},[220,65497,2553],{"class":420},[220,65499,386],{"class":264},[220,65501,65502,65504,65506],{"class":222,"line":399},[220,65503,2567],{"class":264},[220,65505,65363],{"class":420},[220,65507,359],{"class":264},[220,65509,65510,65512,65514],{"class":222,"line":644},[220,65511,402],{"class":264},[220,65513,347],{"class":420},[220,65515,359],{"class":264},[212,65517,65518],{"className":468,"code":65385,"language":469,"meta":178,"style":178},[99,65519,65520,65528,65536,65544,65552],{"__ignoreMap":178},[220,65521,65522,65524,65526],{"class":222,"line":223},[220,65523,343],{"class":264},[220,65525,347],{"class":420},[220,65527,359],{"class":264},[220,65529,65530,65532,65534],{"class":222,"line":179},[220,65531,364],{"class":264},[220,65533,65363],{"class":420},[220,65535,359],{"class":264},[220,65537,65538,65540,65542],{"class":222,"line":389},[220,65539,2550],{"class":264},[220,65541,2553],{"class":420},[220,65543,386],{"class":264},[220,65545,65546,65548,65550],{"class":222,"line":399},[220,65547,2567],{"class":264},[220,65549,65363],{"class":420},[220,65551,359],{"class":264},[220,65553,65554,65556,65558],{"class":222,"line":644},[220,65555,402],{"class":264},[220,65557,347],{"class":420},[220,65559,359],{"class":264},[212,65561,65563],{"className":251,"code":65562,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RadialWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,65564,65565,65575,65579,65593,65597,65606,65614,65618,65622],{"__ignoreMap":178},[220,65566,65567,65569,65571,65573],{"class":222,"line":223},[220,65568,261],{"class":260},[220,65570,10879],{"class":264},[220,65572,268],{"class":260},[220,65574,4007],{"class":230},[220,65576,65577],{"class":222,"line":179},[220,65578,647],{"emptyLinePlaceholder":194},[220,65580,65581,65583,65585,65587,65589,65591],{"class":222,"line":389},[220,65582,1735],{"class":260},[220,65584,1738],{"class":420},[220,65586,1741],{"class":260},[220,65588,1744],{"class":260},[220,65590,1747],{"class":226},[220,65592,1750],{"class":264},[220,65594,65595],{"class":222,"line":399},[220,65596,1765],{"class":264},[220,65598,65599,65601,65604],{"class":222,"line":644},[220,65600,1770],{"class":264},[220,65602,65603],{"class":230},"'RadialWipe'",[220,65605,6375],{"class":264},[220,65607,65608,65610,65612],{"class":222,"line":650},[220,65609,6380],{"class":264},[220,65611,3206],{"class":230},[220,65613,2465],{"class":264},[220,65615,65616],{"class":222,"line":656},[220,65617,6397],{"class":264},[220,65619,65620],{"class":222,"line":673},[220,65621,1787],{"class":264},[220,65623,65624],{"class":222,"line":682},[220,65625,1792],{"class":264},[1504,65627,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":65629},[65630,65631],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":65363,"description":65371},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":65638,"title":65639,"body":65640,"category":33043,"componentType":25253,"description":65647,"extension":191,"meta":65908,"navigation":194,"path":65909,"requiresChild":194,"seo":65910,"stem":65911,"__hash__":65912},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":65641,"toc":65904},[65642,65645,65648,65650,65652,65655,65657,65902],[11,65643,65639],{"id":65644},"randombars",[15,65646,65647],{},"Wipe the content away as parallel bars vanishing in random order",[31281,65649],{"component":65639},[23,65651,31285],{"id":25903},[31287,65653],{":props":65654},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the wipe has progressed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the bars in degrees (0 = vertical bars)\"},{\"name\":\"barCount\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of bars across the frame\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"How softly each bar fades out (0 = hard-edged bars)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Reverse the order the bars vanish in\"}]",[23,65656,31293],{"id":31292},[246,65658,65659,65704,65748,65792,65836],{":tabs":1557},[212,65660,65662],{"className":334,"code":65661,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,65663,65664,65672,65680,65688,65696],{"__ignoreMap":178},[220,65665,65666,65668,65670],{"class":222,"line":223},[220,65667,343],{"class":264},[220,65669,347],{"class":346},[220,65671,359],{"class":264},[220,65673,65674,65676,65678],{"class":222,"line":179},[220,65675,364],{"class":264},[220,65677,65639],{"class":346},[220,65679,359],{"class":264},[220,65681,65682,65684,65686],{"class":222,"line":389},[220,65683,2550],{"class":264},[220,65685,2553],{"class":346},[220,65687,386],{"class":264},[220,65689,65690,65692,65694],{"class":222,"line":399},[220,65691,2567],{"class":264},[220,65693,65639],{"class":346},[220,65695,359],{"class":264},[220,65697,65698,65700,65702],{"class":222,"line":644},[220,65699,402],{"class":264},[220,65701,347],{"class":346},[220,65703,359],{"class":264},[212,65705,65706],{"className":409,"code":65661,"language":411,"meta":178,"style":178},[99,65707,65708,65716,65724,65732,65740],{"__ignoreMap":178},[220,65709,65710,65712,65714],{"class":222,"line":223},[220,65711,343],{"class":264},[220,65713,347],{"class":420},[220,65715,359],{"class":264},[220,65717,65718,65720,65722],{"class":222,"line":179},[220,65719,364],{"class":264},[220,65721,65639],{"class":420},[220,65723,359],{"class":264},[220,65725,65726,65728,65730],{"class":222,"line":389},[220,65727,2550],{"class":264},[220,65729,2553],{"class":420},[220,65731,386],{"class":264},[220,65733,65734,65736,65738],{"class":222,"line":399},[220,65735,2567],{"class":264},[220,65737,65639],{"class":420},[220,65739,359],{"class":264},[220,65741,65742,65744,65746],{"class":222,"line":644},[220,65743,402],{"class":264},[220,65745,347],{"class":420},[220,65747,359],{"class":264},[212,65749,65750],{"className":2844,"code":65661,"language":2846,"meta":178,"style":178},[99,65751,65752,65760,65768,65776,65784],{"__ignoreMap":178},[220,65753,65754,65756,65758],{"class":222,"line":223},[220,65755,343],{"class":264},[220,65757,347],{"class":420},[220,65759,359],{"class":264},[220,65761,65762,65764,65766],{"class":222,"line":179},[220,65763,364],{"class":264},[220,65765,65639],{"class":420},[220,65767,359],{"class":264},[220,65769,65770,65772,65774],{"class":222,"line":389},[220,65771,2550],{"class":264},[220,65773,2553],{"class":420},[220,65775,386],{"class":264},[220,65777,65778,65780,65782],{"class":222,"line":399},[220,65779,2567],{"class":264},[220,65781,65639],{"class":420},[220,65783,359],{"class":264},[220,65785,65786,65788,65790],{"class":222,"line":644},[220,65787,402],{"class":264},[220,65789,347],{"class":420},[220,65791,359],{"class":264},[212,65793,65794],{"className":468,"code":65661,"language":469,"meta":178,"style":178},[99,65795,65796,65804,65812,65820,65828],{"__ignoreMap":178},[220,65797,65798,65800,65802],{"class":222,"line":223},[220,65799,343],{"class":264},[220,65801,347],{"class":420},[220,65803,359],{"class":264},[220,65805,65806,65808,65810],{"class":222,"line":179},[220,65807,364],{"class":264},[220,65809,65639],{"class":420},[220,65811,359],{"class":264},[220,65813,65814,65816,65818],{"class":222,"line":389},[220,65815,2550],{"class":264},[220,65817,2553],{"class":420},[220,65819,386],{"class":264},[220,65821,65822,65824,65826],{"class":222,"line":399},[220,65823,2567],{"class":264},[220,65825,65639],{"class":420},[220,65827,359],{"class":264},[220,65829,65830,65832,65834],{"class":222,"line":644},[220,65831,402],{"class":264},[220,65833,347],{"class":420},[220,65835,359],{"class":264},[212,65837,65839],{"className":251,"code":65838,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RandomBars', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,65840,65841,65851,65855,65869,65873,65882,65890,65894,65898],{"__ignoreMap":178},[220,65842,65843,65845,65847,65849],{"class":222,"line":223},[220,65844,261],{"class":260},[220,65846,10879],{"class":264},[220,65848,268],{"class":260},[220,65850,4007],{"class":230},[220,65852,65853],{"class":222,"line":179},[220,65854,647],{"emptyLinePlaceholder":194},[220,65856,65857,65859,65861,65863,65865,65867],{"class":222,"line":389},[220,65858,1735],{"class":260},[220,65860,1738],{"class":420},[220,65862,1741],{"class":260},[220,65864,1744],{"class":260},[220,65866,1747],{"class":226},[220,65868,1750],{"class":264},[220,65870,65871],{"class":222,"line":399},[220,65872,1765],{"class":264},[220,65874,65875,65877,65880],{"class":222,"line":644},[220,65876,1770],{"class":264},[220,65878,65879],{"class":230},"'RandomBars'",[220,65881,6375],{"class":264},[220,65883,65884,65886,65888],{"class":222,"line":650},[220,65885,6380],{"class":264},[220,65887,3206],{"class":230},[220,65889,2465],{"class":264},[220,65891,65892],{"class":222,"line":656},[220,65893,6397],{"class":264},[220,65895,65896],{"class":222,"line":673},[220,65897,1787],{"class":264},[220,65899,65900],{"class":222,"line":682},[220,65901,1792],{"class":264},[1504,65903,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":65905},[65906,65907],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":65639,"description":65647},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":65914,"title":65915,"body":65916,"category":34929,"componentType":25247,"description":65923,"extension":191,"meta":66108,"navigation":194,"path":66109,"requiresChild":31900,"seo":66110,"stem":66111,"__hash__":66112},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":65917,"toc":66104},[65918,65921,65924,65926,65928,65931,65933,66102],[11,65919,65915],{"id":65920},"reactiondiffusion",[15,65922,65923],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31281,65925],{"component":65915},[23,65927,31285],{"id":25903},[31287,65929],{":props":65930},"[{\"name\":\"preset\",\"type\":\"\\\"coral\\\" | \\\"mitosis\\\" | \\\"spots\\\" | \\\"maze\\\" | \\\"worms\\\" | \\\"fingerprints\\\" | \\\"holes\\\" | \\\"solitons\\\" | \\\"bubbles\\\" | \\\"waves\\\" | \\\"flowers\\\" | \\\"custom\\\"\",\"default\":\"coral\",\"description\":\"Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand\"},{\"name\":\"feed\",\"type\":\"number\",\"default\":\"0.0545\",\"description\":\"Feed rate — how fast chemical U is replenished (used when Pattern = Custom)\"},{\"name\":\"kill\",\"type\":\"number\",\"default\":\"0.062\",\"description\":\"Kill rate — how fast chemical V is removed (used when Pattern = Custom)\"},{\"name\":\"diffusionRatio\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)\"},{\"name\":\"featureSize\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Simulation steps per frame — higher evolves the pattern faster\"},{\"name\":\"brushSize\",\"type\":\"number\",\"default\":\"0.04\",\"description\":\"Radius of the cursor brush that seeds new reagent as you drag\"},{\"name\":\"brushStrength\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How much reagent the cursor injects while dragging\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Background color (empty regions between cells)\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#38bdf8\",\"description\":\"Accent color at the cell walls (mid pattern values)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e2f5ff\",\"description\":\"Color of the dense cell interiors (high pattern values)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Sharpness of the cell walls — higher gives crisper, more graphic edges\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.28\",\"description\":\"Pattern level the colors are centered on — shifts the balance of background vs. cells\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"135\",\"description\":\"Direction the surface light comes from, in degrees\"},{\"name\":\"childInfluence\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)\"},{\"name\":\"childContrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading\"},{\"name\":\"childThreshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it\"},{\"name\":\"childInvert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Flip which tones of the child grow the pattern (bright vs. dark areas)\"}]",[23,65932,31293],{"id":31292},[246,65934,65935,65964,65992,66020,66048],{":tabs":1557},[212,65936,65938],{"className":334,"code":65937,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,65939,65940,65948,65956],{"__ignoreMap":178},[220,65941,65942,65944,65946],{"class":222,"line":223},[220,65943,343],{"class":264},[220,65945,347],{"class":346},[220,65947,359],{"class":264},[220,65949,65950,65952,65954],{"class":222,"line":179},[220,65951,364],{"class":264},[220,65953,65915],{"class":346},[220,65955,386],{"class":264},[220,65957,65958,65960,65962],{"class":222,"line":389},[220,65959,402],{"class":264},[220,65961,347],{"class":346},[220,65963,359],{"class":264},[212,65965,65966],{"className":409,"code":65937,"language":411,"meta":178,"style":178},[99,65967,65968,65976,65984],{"__ignoreMap":178},[220,65969,65970,65972,65974],{"class":222,"line":223},[220,65971,343],{"class":264},[220,65973,347],{"class":420},[220,65975,359],{"class":264},[220,65977,65978,65980,65982],{"class":222,"line":179},[220,65979,364],{"class":264},[220,65981,65915],{"class":420},[220,65983,386],{"class":264},[220,65985,65986,65988,65990],{"class":222,"line":389},[220,65987,402],{"class":264},[220,65989,347],{"class":420},[220,65991,359],{"class":264},[212,65993,65994],{"className":2844,"code":65937,"language":2846,"meta":178,"style":178},[99,65995,65996,66004,66012],{"__ignoreMap":178},[220,65997,65998,66000,66002],{"class":222,"line":223},[220,65999,343],{"class":264},[220,66001,347],{"class":420},[220,66003,359],{"class":264},[220,66005,66006,66008,66010],{"class":222,"line":179},[220,66007,364],{"class":264},[220,66009,65915],{"class":420},[220,66011,386],{"class":264},[220,66013,66014,66016,66018],{"class":222,"line":389},[220,66015,402],{"class":264},[220,66017,347],{"class":420},[220,66019,359],{"class":264},[212,66021,66022],{"className":468,"code":65937,"language":469,"meta":178,"style":178},[99,66023,66024,66032,66040],{"__ignoreMap":178},[220,66025,66026,66028,66030],{"class":222,"line":223},[220,66027,343],{"class":264},[220,66029,347],{"class":420},[220,66031,359],{"class":264},[220,66033,66034,66036,66038],{"class":222,"line":179},[220,66035,364],{"class":264},[220,66037,65915],{"class":420},[220,66039,386],{"class":264},[220,66041,66042,66044,66046],{"class":222,"line":389},[220,66043,402],{"class":264},[220,66045,347],{"class":420},[220,66047,359],{"class":264},[212,66049,66051],{"className":251,"code":66050,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ReactionDiffusion', props: {} }\n ]\n})\n",[99,66052,66053,66063,66067,66081,66085,66094,66098],{"__ignoreMap":178},[220,66054,66055,66057,66059,66061],{"class":222,"line":223},[220,66056,261],{"class":260},[220,66058,10879],{"class":264},[220,66060,268],{"class":260},[220,66062,4007],{"class":230},[220,66064,66065],{"class":222,"line":179},[220,66066,647],{"emptyLinePlaceholder":194},[220,66068,66069,66071,66073,66075,66077,66079],{"class":222,"line":389},[220,66070,1735],{"class":260},[220,66072,1738],{"class":420},[220,66074,1741],{"class":260},[220,66076,1744],{"class":260},[220,66078,1747],{"class":226},[220,66080,1750],{"class":264},[220,66082,66083],{"class":222,"line":399},[220,66084,1765],{"class":264},[220,66086,66087,66089,66092],{"class":222,"line":644},[220,66088,1770],{"class":264},[220,66090,66091],{"class":230},"'ReactionDiffusion'",[220,66093,2465],{"class":264},[220,66095,66096],{"class":222,"line":650},[220,66097,1787],{"class":264},[220,66099,66100],{"class":222,"line":656},[220,66101,1792],{"class":264},[1504,66103,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":66105},[66106,66107],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":65915,"description":65923},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":66114,"title":66115,"body":66116,"category":32766,"componentType":25253,"description":66123,"extension":191,"meta":66440,"navigation":194,"path":66441,"requiresChild":194,"seo":66442,"stem":66443,"__hash__":66444},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":66117,"toc":66436},[66118,66121,66124,66126,66128,66131,66133,66434],[11,66119,66115],{"id":66120},"rectangularcoordinates",[15,66122,66123],{},"Convert polar coordinates back to rectangular space",[31281,66125],{"component":66115},[23,66127,31285],{"id":25903},[31287,66129],{":props":66130},"[{\"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,66132,31293],{"id":31292},[246,66134,66135,66191,66250,66306,66364],{":tabs":1557},[212,66136,66138],{"className":334,"code":66137,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66139,66140,66148,66155,66163,66167,66175,66183],{"__ignoreMap":178},[220,66141,66142,66144,66146],{"class":222,"line":223},[220,66143,343],{"class":264},[220,66145,347],{"class":346},[220,66147,359],{"class":264},[220,66149,66150,66152],{"class":222,"line":179},[220,66151,364],{"class":264},[220,66153,66154],{"class":346},"RectangularCoordinates\n",[220,66156,66157,66159,66161],{"class":222,"line":389},[220,66158,19739],{"class":226},[220,66160,353],{"class":264},[220,66162,35995],{"class":230},[220,66164,66165],{"class":222,"line":399},[220,66166,31329],{"class":264},[220,66168,66169,66171,66173],{"class":222,"line":644},[220,66170,2550],{"class":264},[220,66172,2553],{"class":346},[220,66174,386],{"class":264},[220,66176,66177,66179,66181],{"class":222,"line":650},[220,66178,2567],{"class":264},[220,66180,66115],{"class":346},[220,66182,359],{"class":264},[220,66184,66185,66187,66189],{"class":222,"line":656},[220,66186,402],{"class":264},[220,66188,347],{"class":346},[220,66190,359],{"class":264},[212,66192,66194],{"className":409,"code":66193,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66195,66196,66204,66210,66222,66226,66234,66242],{"__ignoreMap":178},[220,66197,66198,66200,66202],{"class":222,"line":223},[220,66199,343],{"class":264},[220,66201,347],{"class":420},[220,66203,359],{"class":264},[220,66205,66206,66208],{"class":222,"line":179},[220,66207,364],{"class":264},[220,66209,66154],{"class":420},[220,66211,66212,66214,66216,66218,66220],{"class":222,"line":389},[220,66213,19850],{"class":226},[220,66215,353],{"class":260},[220,66217,743],{"class":264},[220,66219,8043],{"class":420},[220,66221,749],{"class":264},[220,66223,66224],{"class":222,"line":399},[220,66225,31329],{"class":264},[220,66227,66228,66230,66232],{"class":222,"line":644},[220,66229,2550],{"class":264},[220,66231,2553],{"class":420},[220,66233,386],{"class":264},[220,66235,66236,66238,66240],{"class":222,"line":650},[220,66237,2567],{"class":264},[220,66239,66115],{"class":420},[220,66241,359],{"class":264},[220,66243,66244,66246,66248],{"class":222,"line":656},[220,66245,402],{"class":264},[220,66247,347],{"class":420},[220,66249,359],{"class":264},[212,66251,66252],{"className":2844,"code":66193,"language":2846,"meta":178,"style":178},[99,66253,66254,66262,66268,66278,66282,66290,66298],{"__ignoreMap":178},[220,66255,66256,66258,66260],{"class":222,"line":223},[220,66257,343],{"class":264},[220,66259,347],{"class":420},[220,66261,359],{"class":264},[220,66263,66264,66266],{"class":222,"line":179},[220,66265,364],{"class":264},[220,66267,66154],{"class":420},[220,66269,66270,66272,66274,66276],{"class":222,"line":389},[220,66271,19850],{"class":226},[220,66273,29241],{"class":264},[220,66275,8043],{"class":420},[220,66277,749],{"class":264},[220,66279,66280],{"class":222,"line":399},[220,66281,31329],{"class":264},[220,66283,66284,66286,66288],{"class":222,"line":644},[220,66285,2550],{"class":264},[220,66287,2553],{"class":420},[220,66289,386],{"class":264},[220,66291,66292,66294,66296],{"class":222,"line":650},[220,66293,2567],{"class":264},[220,66295,66115],{"class":420},[220,66297,359],{"class":264},[220,66299,66300,66302,66304],{"class":222,"line":656},[220,66301,402],{"class":264},[220,66303,347],{"class":420},[220,66305,359],{"class":264},[212,66307,66308],{"className":468,"code":66193,"language":469,"meta":178,"style":178},[99,66309,66310,66318,66324,66336,66340,66348,66356],{"__ignoreMap":178},[220,66311,66312,66314,66316],{"class":222,"line":223},[220,66313,343],{"class":264},[220,66315,347],{"class":420},[220,66317,359],{"class":264},[220,66319,66320,66322],{"class":222,"line":179},[220,66321,364],{"class":264},[220,66323,66154],{"class":420},[220,66325,66326,66328,66330,66332,66334],{"class":222,"line":389},[220,66327,19850],{"class":226},[220,66329,353],{"class":260},[220,66331,743],{"class":264},[220,66333,8043],{"class":420},[220,66335,749],{"class":264},[220,66337,66338],{"class":222,"line":399},[220,66339,31329],{"class":264},[220,66341,66342,66344,66346],{"class":222,"line":644},[220,66343,2550],{"class":264},[220,66345,2553],{"class":420},[220,66347,386],{"class":264},[220,66349,66350,66352,66354],{"class":222,"line":650},[220,66351,2567],{"class":264},[220,66353,66115],{"class":420},[220,66355,359],{"class":264},[220,66357,66358,66360,66362],{"class":222,"line":656},[220,66359,402],{"class":264},[220,66361,347],{"class":420},[220,66363,359],{"class":264},[212,66365,66367],{"className":251,"code":66366,"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,66368,66369,66379,66383,66397,66401,66414,66422,66426,66430],{"__ignoreMap":178},[220,66370,66371,66373,66375,66377],{"class":222,"line":223},[220,66372,261],{"class":260},[220,66374,10879],{"class":264},[220,66376,268],{"class":260},[220,66378,4007],{"class":230},[220,66380,66381],{"class":222,"line":179},[220,66382,647],{"emptyLinePlaceholder":194},[220,66384,66385,66387,66389,66391,66393,66395],{"class":222,"line":389},[220,66386,1735],{"class":260},[220,66388,1738],{"class":420},[220,66390,1741],{"class":260},[220,66392,1744],{"class":260},[220,66394,1747],{"class":226},[220,66396,1750],{"class":264},[220,66398,66399],{"class":222,"line":399},[220,66400,1765],{"class":264},[220,66402,66403,66405,66408,66410,66412],{"class":222,"line":644},[220,66404,1770],{"class":264},[220,66406,66407],{"class":230},"'RectangularCoordinates'",[220,66409,31573],{"class":264},[220,66411,8043],{"class":420},[220,66413,6912],{"class":264},[220,66415,66416,66418,66420],{"class":222,"line":650},[220,66417,6380],{"class":264},[220,66419,3206],{"class":230},[220,66421,2465],{"class":264},[220,66423,66424],{"class":222,"line":656},[220,66425,6397],{"class":264},[220,66427,66428],{"class":222,"line":673},[220,66429,1787],{"class":264},[220,66431,66432],{"class":222,"line":682},[220,66433,1792],{"class":264},[1504,66435,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66437},[66438,66439],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":66115,"description":66123},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":66446,"title":66447,"body":66448,"category":32176,"componentType":25253,"description":66455,"extension":191,"meta":66716,"navigation":194,"path":66717,"requiresChild":194,"seo":66718,"stem":66719,"__hash__":66720},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":66449,"toc":66712},[66450,66453,66456,66458,66460,66463,66465,66710],[11,66451,66447],{"id":66452},"reflectiveplane",[15,66454,66455],{},"Reflective floor that mirrors the content above it",[31281,66457],{"component":66447},[23,66459,31285],{"id":25903},[31287,66461],{":props":66462},"[{\"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,66464,31293],{"id":31292},[246,66466,66467,66512,66556,66600,66644],{":tabs":1557},[212,66468,66470],{"className":334,"code":66469,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,66471,66472,66480,66488,66496,66504],{"__ignoreMap":178},[220,66473,66474,66476,66478],{"class":222,"line":223},[220,66475,343],{"class":264},[220,66477,347],{"class":346},[220,66479,359],{"class":264},[220,66481,66482,66484,66486],{"class":222,"line":179},[220,66483,364],{"class":264},[220,66485,66447],{"class":346},[220,66487,359],{"class":264},[220,66489,66490,66492,66494],{"class":222,"line":389},[220,66491,2550],{"class":264},[220,66493,2553],{"class":346},[220,66495,386],{"class":264},[220,66497,66498,66500,66502],{"class":222,"line":399},[220,66499,2567],{"class":264},[220,66501,66447],{"class":346},[220,66503,359],{"class":264},[220,66505,66506,66508,66510],{"class":222,"line":644},[220,66507,402],{"class":264},[220,66509,347],{"class":346},[220,66511,359],{"class":264},[212,66513,66514],{"className":409,"code":66469,"language":411,"meta":178,"style":178},[99,66515,66516,66524,66532,66540,66548],{"__ignoreMap":178},[220,66517,66518,66520,66522],{"class":222,"line":223},[220,66519,343],{"class":264},[220,66521,347],{"class":420},[220,66523,359],{"class":264},[220,66525,66526,66528,66530],{"class":222,"line":179},[220,66527,364],{"class":264},[220,66529,66447],{"class":420},[220,66531,359],{"class":264},[220,66533,66534,66536,66538],{"class":222,"line":389},[220,66535,2550],{"class":264},[220,66537,2553],{"class":420},[220,66539,386],{"class":264},[220,66541,66542,66544,66546],{"class":222,"line":399},[220,66543,2567],{"class":264},[220,66545,66447],{"class":420},[220,66547,359],{"class":264},[220,66549,66550,66552,66554],{"class":222,"line":644},[220,66551,402],{"class":264},[220,66553,347],{"class":420},[220,66555,359],{"class":264},[212,66557,66558],{"className":2844,"code":66469,"language":2846,"meta":178,"style":178},[99,66559,66560,66568,66576,66584,66592],{"__ignoreMap":178},[220,66561,66562,66564,66566],{"class":222,"line":223},[220,66563,343],{"class":264},[220,66565,347],{"class":420},[220,66567,359],{"class":264},[220,66569,66570,66572,66574],{"class":222,"line":179},[220,66571,364],{"class":264},[220,66573,66447],{"class":420},[220,66575,359],{"class":264},[220,66577,66578,66580,66582],{"class":222,"line":389},[220,66579,2550],{"class":264},[220,66581,2553],{"class":420},[220,66583,386],{"class":264},[220,66585,66586,66588,66590],{"class":222,"line":399},[220,66587,2567],{"class":264},[220,66589,66447],{"class":420},[220,66591,359],{"class":264},[220,66593,66594,66596,66598],{"class":222,"line":644},[220,66595,402],{"class":264},[220,66597,347],{"class":420},[220,66599,359],{"class":264},[212,66601,66602],{"className":468,"code":66469,"language":469,"meta":178,"style":178},[99,66603,66604,66612,66620,66628,66636],{"__ignoreMap":178},[220,66605,66606,66608,66610],{"class":222,"line":223},[220,66607,343],{"class":264},[220,66609,347],{"class":420},[220,66611,359],{"class":264},[220,66613,66614,66616,66618],{"class":222,"line":179},[220,66615,364],{"class":264},[220,66617,66447],{"class":420},[220,66619,359],{"class":264},[220,66621,66622,66624,66626],{"class":222,"line":389},[220,66623,2550],{"class":264},[220,66625,2553],{"class":420},[220,66627,386],{"class":264},[220,66629,66630,66632,66634],{"class":222,"line":399},[220,66631,2567],{"class":264},[220,66633,66447],{"class":420},[220,66635,359],{"class":264},[220,66637,66638,66640,66642],{"class":222,"line":644},[220,66639,402],{"class":264},[220,66641,347],{"class":420},[220,66643,359],{"class":264},[212,66645,66647],{"className":251,"code":66646,"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,66648,66649,66659,66663,66677,66681,66690,66698,66702,66706],{"__ignoreMap":178},[220,66650,66651,66653,66655,66657],{"class":222,"line":223},[220,66652,261],{"class":260},[220,66654,10879],{"class":264},[220,66656,268],{"class":260},[220,66658,4007],{"class":230},[220,66660,66661],{"class":222,"line":179},[220,66662,647],{"emptyLinePlaceholder":194},[220,66664,66665,66667,66669,66671,66673,66675],{"class":222,"line":389},[220,66666,1735],{"class":260},[220,66668,1738],{"class":420},[220,66670,1741],{"class":260},[220,66672,1744],{"class":260},[220,66674,1747],{"class":226},[220,66676,1750],{"class":264},[220,66678,66679],{"class":222,"line":399},[220,66680,1765],{"class":264},[220,66682,66683,66685,66688],{"class":222,"line":644},[220,66684,1770],{"class":264},[220,66686,66687],{"class":230},"'ReflectivePlane'",[220,66689,6375],{"class":264},[220,66691,66692,66694,66696],{"class":222,"line":650},[220,66693,6380],{"class":264},[220,66695,3206],{"class":230},[220,66697,2465],{"class":264},[220,66699,66700],{"class":222,"line":656},[220,66701,6397],{"class":264},[220,66703,66704],{"class":222,"line":673},[220,66705,1787],{"class":264},[220,66707,66708],{"class":222,"line":682},[220,66709,1792],{"class":264},[1504,66711,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":66713},[66714,66715],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":66447,"description":66455},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":66722,"title":66723,"body":66724,"category":32766,"componentType":25253,"description":66731,"extension":191,"meta":67048,"navigation":194,"path":67049,"requiresChild":194,"seo":67050,"stem":67051,"__hash__":67052},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":66725,"toc":67044},[66726,66729,66732,66734,66736,66739,66741,67042],[11,66727,66723],{"id":66728},"repeater",[15,66730,66731],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31281,66733],{"component":66723},[23,66735,31285],{"id":25903},[31287,66737],{":props":66738},"[{\"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,66740,31293],{"id":31292},[246,66742,66743,66799,66858,66914,66972],{":tabs":1557},[212,66744,66746],{"className":334,"code":66745,"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,66747,66748,66756,66763,66771,66775,66783,66791],{"__ignoreMap":178},[220,66749,66750,66752,66754],{"class":222,"line":223},[220,66751,343],{"class":264},[220,66753,347],{"class":346},[220,66755,359],{"class":264},[220,66757,66758,66760],{"class":222,"line":179},[220,66759,364],{"class":264},[220,66761,66762],{"class":346},"Repeater\n",[220,66764,66765,66767,66769],{"class":222,"line":389},[220,66766,16772],{"class":226},[220,66768,353],{"class":264},[220,66770,40468],{"class":230},[220,66772,66773],{"class":222,"line":399},[220,66774,31329],{"class":264},[220,66776,66777,66779,66781],{"class":222,"line":644},[220,66778,2550],{"class":264},[220,66780,2553],{"class":346},[220,66782,386],{"class":264},[220,66784,66785,66787,66789],{"class":222,"line":650},[220,66786,2567],{"class":264},[220,66788,66723],{"class":346},[220,66790,359],{"class":264},[220,66792,66793,66795,66797],{"class":222,"line":656},[220,66794,402],{"class":264},[220,66796,347],{"class":346},[220,66798,359],{"class":264},[212,66800,66802],{"className":409,"code":66801,"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,66803,66804,66812,66818,66830,66834,66842,66850],{"__ignoreMap":178},[220,66805,66806,66808,66810],{"class":222,"line":223},[220,66807,343],{"class":264},[220,66809,347],{"class":420},[220,66811,359],{"class":264},[220,66813,66814,66816],{"class":222,"line":179},[220,66815,364],{"class":264},[220,66817,66762],{"class":420},[220,66819,66820,66822,66824,66826,66828],{"class":222,"line":389},[220,66821,9012],{"class":226},[220,66823,353],{"class":260},[220,66825,743],{"class":264},[220,66827,21372],{"class":420},[220,66829,749],{"class":264},[220,66831,66832],{"class":222,"line":399},[220,66833,31329],{"class":264},[220,66835,66836,66838,66840],{"class":222,"line":644},[220,66837,2550],{"class":264},[220,66839,2553],{"class":420},[220,66841,386],{"class":264},[220,66843,66844,66846,66848],{"class":222,"line":650},[220,66845,2567],{"class":264},[220,66847,66723],{"class":420},[220,66849,359],{"class":264},[220,66851,66852,66854,66856],{"class":222,"line":656},[220,66853,402],{"class":264},[220,66855,347],{"class":420},[220,66857,359],{"class":264},[212,66859,66860],{"className":2844,"code":66801,"language":2846,"meta":178,"style":178},[99,66861,66862,66870,66876,66886,66890,66898,66906],{"__ignoreMap":178},[220,66863,66864,66866,66868],{"class":222,"line":223},[220,66865,343],{"class":264},[220,66867,347],{"class":420},[220,66869,359],{"class":264},[220,66871,66872,66874],{"class":222,"line":179},[220,66873,364],{"class":264},[220,66875,66762],{"class":420},[220,66877,66878,66880,66882,66884],{"class":222,"line":389},[220,66879,9012],{"class":226},[220,66881,29241],{"class":264},[220,66883,21372],{"class":420},[220,66885,749],{"class":264},[220,66887,66888],{"class":222,"line":399},[220,66889,31329],{"class":264},[220,66891,66892,66894,66896],{"class":222,"line":644},[220,66893,2550],{"class":264},[220,66895,2553],{"class":420},[220,66897,386],{"class":264},[220,66899,66900,66902,66904],{"class":222,"line":650},[220,66901,2567],{"class":264},[220,66903,66723],{"class":420},[220,66905,359],{"class":264},[220,66907,66908,66910,66912],{"class":222,"line":656},[220,66909,402],{"class":264},[220,66911,347],{"class":420},[220,66913,359],{"class":264},[212,66915,66916],{"className":468,"code":66801,"language":469,"meta":178,"style":178},[99,66917,66918,66926,66932,66944,66948,66956,66964],{"__ignoreMap":178},[220,66919,66920,66922,66924],{"class":222,"line":223},[220,66921,343],{"class":264},[220,66923,347],{"class":420},[220,66925,359],{"class":264},[220,66927,66928,66930],{"class":222,"line":179},[220,66929,364],{"class":264},[220,66931,66762],{"class":420},[220,66933,66934,66936,66938,66940,66942],{"class":222,"line":389},[220,66935,9012],{"class":226},[220,66937,353],{"class":260},[220,66939,743],{"class":264},[220,66941,21372],{"class":420},[220,66943,749],{"class":264},[220,66945,66946],{"class":222,"line":399},[220,66947,31329],{"class":264},[220,66949,66950,66952,66954],{"class":222,"line":644},[220,66951,2550],{"class":264},[220,66953,2553],{"class":420},[220,66955,386],{"class":264},[220,66957,66958,66960,66962],{"class":222,"line":650},[220,66959,2567],{"class":264},[220,66961,66723],{"class":420},[220,66963,359],{"class":264},[220,66965,66966,66968,66970],{"class":222,"line":656},[220,66967,402],{"class":264},[220,66969,347],{"class":420},[220,66971,359],{"class":264},[212,66973,66975],{"className":251,"code":66974,"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,66976,66977,66987,66991,67005,67009,67022,67030,67034,67038],{"__ignoreMap":178},[220,66978,66979,66981,66983,66985],{"class":222,"line":223},[220,66980,261],{"class":260},[220,66982,10879],{"class":264},[220,66984,268],{"class":260},[220,66986,4007],{"class":230},[220,66988,66989],{"class":222,"line":179},[220,66990,647],{"emptyLinePlaceholder":194},[220,66992,66993,66995,66997,66999,67001,67003],{"class":222,"line":389},[220,66994,1735],{"class":260},[220,66996,1738],{"class":420},[220,66998,1741],{"class":260},[220,67000,1744],{"class":260},[220,67002,1747],{"class":226},[220,67004,1750],{"class":264},[220,67006,67007],{"class":222,"line":399},[220,67008,1765],{"class":264},[220,67010,67011,67013,67016,67018,67020],{"class":222,"line":644},[220,67012,1770],{"class":264},[220,67014,67015],{"class":230},"'Repeater'",[220,67017,6907],{"class":264},[220,67019,21372],{"class":420},[220,67021,6912],{"class":264},[220,67023,67024,67026,67028],{"class":222,"line":650},[220,67025,6380],{"class":264},[220,67027,3206],{"class":230},[220,67029,2465],{"class":264},[220,67031,67032],{"class":222,"line":656},[220,67033,6397],{"class":264},[220,67035,67036],{"class":222,"line":673},[220,67037,1787],{"class":264},[220,67039,67040],{"class":222,"line":682},[220,67041,1792],{"class":264},[1504,67043,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67045},[67046,67047],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":66723,"description":66731},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":67054,"title":67055,"body":67056,"category":15275,"componentType":25247,"description":67063,"extension":191,"meta":67340,"navigation":194,"path":67341,"requiresChild":31900,"seo":67342,"stem":67343,"__hash__":67344},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":67057,"toc":67336},[67058,67061,67064,67066,67068,67071,67073,67334],[11,67059,67055],{"id":67060},"ring",[15,67062,67063],{},"Annular ring (donut) with adjustable radius and band thickness",[31281,67065],{"component":67055},[23,67067,31285],{"id":25903},[31287,67069],{":props":67070},"[{\"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,67072,31293],{"id":31292},[246,67074,67075,67123,67174,67222,67272],{":tabs":1557},[212,67076,67078],{"className":334,"code":67077,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,67079,67080,67088,67095,67103,67111,67115],{"__ignoreMap":178},[220,67081,67082,67084,67086],{"class":222,"line":223},[220,67083,343],{"class":264},[220,67085,347],{"class":346},[220,67087,359],{"class":264},[220,67089,67090,67092],{"class":222,"line":179},[220,67091,364],{"class":264},[220,67093,67094],{"class":346},"Ring\n",[220,67096,67097,67099,67101],{"class":222,"line":389},[220,67098,9002],{"class":226},[220,67100,353],{"class":264},[220,67102,8958],{"class":230},[220,67104,67105,67107,67109],{"class":222,"line":399},[220,67106,16772],{"class":226},[220,67108,353],{"class":264},[220,67110,40468],{"class":230},[220,67112,67113],{"class":222,"line":644},[220,67114,1234],{"class":264},[220,67116,67117,67119,67121],{"class":222,"line":650},[220,67118,402],{"class":264},[220,67120,347],{"class":346},[220,67122,359],{"class":264},[212,67124,67126],{"className":409,"code":67125,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,67127,67128,67136,67142,67150,67162,67166],{"__ignoreMap":178},[220,67129,67130,67132,67134],{"class":222,"line":223},[220,67131,343],{"class":264},[220,67133,347],{"class":420},[220,67135,359],{"class":264},[220,67137,67138,67140],{"class":222,"line":179},[220,67139,364],{"class":264},[220,67141,67094],{"class":420},[220,67143,67144,67146,67148],{"class":222,"line":389},[220,67145,9002],{"class":226},[220,67147,353],{"class":260},[220,67149,8958],{"class":230},[220,67151,67152,67154,67156,67158,67160],{"class":222,"line":399},[220,67153,9012],{"class":226},[220,67155,353],{"class":260},[220,67157,743],{"class":264},[220,67159,21372],{"class":420},[220,67161,749],{"class":264},[220,67163,67164],{"class":222,"line":644},[220,67165,1234],{"class":264},[220,67167,67168,67170,67172],{"class":222,"line":650},[220,67169,402],{"class":264},[220,67171,347],{"class":420},[220,67173,359],{"class":264},[212,67175,67176],{"className":2844,"code":67125,"language":2846,"meta":178,"style":178},[99,67177,67178,67186,67192,67200,67210,67214],{"__ignoreMap":178},[220,67179,67180,67182,67184],{"class":222,"line":223},[220,67181,343],{"class":264},[220,67183,347],{"class":420},[220,67185,359],{"class":264},[220,67187,67188,67190],{"class":222,"line":179},[220,67189,364],{"class":264},[220,67191,67094],{"class":420},[220,67193,67194,67196,67198],{"class":222,"line":389},[220,67195,9002],{"class":226},[220,67197,353],{"class":264},[220,67199,8958],{"class":230},[220,67201,67202,67204,67206,67208],{"class":222,"line":399},[220,67203,9012],{"class":226},[220,67205,29241],{"class":264},[220,67207,21372],{"class":420},[220,67209,749],{"class":264},[220,67211,67212],{"class":222,"line":644},[220,67213,1234],{"class":264},[220,67215,67216,67218,67220],{"class":222,"line":650},[220,67217,402],{"class":264},[220,67219,347],{"class":420},[220,67221,359],{"class":264},[212,67223,67224],{"className":468,"code":67125,"language":469,"meta":178,"style":178},[99,67225,67226,67234,67240,67248,67260,67264],{"__ignoreMap":178},[220,67227,67228,67230,67232],{"class":222,"line":223},[220,67229,343],{"class":264},[220,67231,347],{"class":420},[220,67233,359],{"class":264},[220,67235,67236,67238],{"class":222,"line":179},[220,67237,364],{"class":264},[220,67239,67094],{"class":420},[220,67241,67242,67244,67246],{"class":222,"line":389},[220,67243,9002],{"class":226},[220,67245,353],{"class":260},[220,67247,8958],{"class":230},[220,67249,67250,67252,67254,67256,67258],{"class":222,"line":399},[220,67251,9012],{"class":226},[220,67253,353],{"class":260},[220,67255,743],{"class":264},[220,67257,21372],{"class":420},[220,67259,749],{"class":264},[220,67261,67262],{"class":222,"line":644},[220,67263,1234],{"class":264},[220,67265,67266,67268,67270],{"class":222,"line":650},[220,67267,402],{"class":264},[220,67269,347],{"class":420},[220,67271,359],{"class":264},[212,67273,67275],{"className":251,"code":67274,"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,67276,67277,67287,67291,67305,67309,67326,67330],{"__ignoreMap":178},[220,67278,67279,67281,67283,67285],{"class":222,"line":223},[220,67280,261],{"class":260},[220,67282,10879],{"class":264},[220,67284,268],{"class":260},[220,67286,4007],{"class":230},[220,67288,67289],{"class":222,"line":179},[220,67290,647],{"emptyLinePlaceholder":194},[220,67292,67293,67295,67297,67299,67301,67303],{"class":222,"line":389},[220,67294,1735],{"class":260},[220,67296,1738],{"class":420},[220,67298,1741],{"class":260},[220,67300,1744],{"class":260},[220,67302,1747],{"class":226},[220,67304,1750],{"class":264},[220,67306,67307],{"class":222,"line":399},[220,67308,1765],{"class":264},[220,67310,67311,67313,67316,67318,67320,67322,67324],{"class":222,"line":644},[220,67312,1770],{"class":264},[220,67314,67315],{"class":230},"'Ring'",[220,67317,1776],{"class":264},[220,67319,9536],{"class":230},[220,67321,5932],{"class":264},[220,67323,21372],{"class":420},[220,67325,1782],{"class":264},[220,67327,67328],{"class":222,"line":650},[220,67329,1787],{"class":264},[220,67331,67332],{"class":222,"line":656},[220,67333,1792],{"class":264},[1504,67335,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67337},[67338,67339],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":67055,"description":67063},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":67346,"title":67347,"body":67348,"category":33043,"componentType":25253,"description":67355,"extension":191,"meta":67616,"navigation":194,"path":67617,"requiresChild":194,"seo":67618,"stem":67619,"__hash__":67620},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":67349,"toc":67612},[67350,67353,67356,67358,67360,67363,67365,67610],[11,67351,67347],{"id":67352},"ripplewipe",[15,67354,67355],{},"Wipe the content away in concentric rings pulsing out from a center point",[31281,67357],{"component":67347},[23,67359,31285],{"id":25903},[31287,67361],{":props":67362},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the ripple has expanded (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Point the rings expand from\"},{\"name\":\"rings\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of concentric rings\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How softly adjacent rings' timing overlaps (0 = discrete ring pops)\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Wipe from the outside inward instead\"}]",[23,67364,31293],{"id":31292},[246,67366,67367,67412,67456,67500,67544],{":tabs":1557},[212,67368,67370],{"className":334,"code":67369,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,67371,67372,67380,67388,67396,67404],{"__ignoreMap":178},[220,67373,67374,67376,67378],{"class":222,"line":223},[220,67375,343],{"class":264},[220,67377,347],{"class":346},[220,67379,359],{"class":264},[220,67381,67382,67384,67386],{"class":222,"line":179},[220,67383,364],{"class":264},[220,67385,67347],{"class":346},[220,67387,359],{"class":264},[220,67389,67390,67392,67394],{"class":222,"line":389},[220,67391,2550],{"class":264},[220,67393,2553],{"class":346},[220,67395,386],{"class":264},[220,67397,67398,67400,67402],{"class":222,"line":399},[220,67399,2567],{"class":264},[220,67401,67347],{"class":346},[220,67403,359],{"class":264},[220,67405,67406,67408,67410],{"class":222,"line":644},[220,67407,402],{"class":264},[220,67409,347],{"class":346},[220,67411,359],{"class":264},[212,67413,67414],{"className":409,"code":67369,"language":411,"meta":178,"style":178},[99,67415,67416,67424,67432,67440,67448],{"__ignoreMap":178},[220,67417,67418,67420,67422],{"class":222,"line":223},[220,67419,343],{"class":264},[220,67421,347],{"class":420},[220,67423,359],{"class":264},[220,67425,67426,67428,67430],{"class":222,"line":179},[220,67427,364],{"class":264},[220,67429,67347],{"class":420},[220,67431,359],{"class":264},[220,67433,67434,67436,67438],{"class":222,"line":389},[220,67435,2550],{"class":264},[220,67437,2553],{"class":420},[220,67439,386],{"class":264},[220,67441,67442,67444,67446],{"class":222,"line":399},[220,67443,2567],{"class":264},[220,67445,67347],{"class":420},[220,67447,359],{"class":264},[220,67449,67450,67452,67454],{"class":222,"line":644},[220,67451,402],{"class":264},[220,67453,347],{"class":420},[220,67455,359],{"class":264},[212,67457,67458],{"className":2844,"code":67369,"language":2846,"meta":178,"style":178},[99,67459,67460,67468,67476,67484,67492],{"__ignoreMap":178},[220,67461,67462,67464,67466],{"class":222,"line":223},[220,67463,343],{"class":264},[220,67465,347],{"class":420},[220,67467,359],{"class":264},[220,67469,67470,67472,67474],{"class":222,"line":179},[220,67471,364],{"class":264},[220,67473,67347],{"class":420},[220,67475,359],{"class":264},[220,67477,67478,67480,67482],{"class":222,"line":389},[220,67479,2550],{"class":264},[220,67481,2553],{"class":420},[220,67483,386],{"class":264},[220,67485,67486,67488,67490],{"class":222,"line":399},[220,67487,2567],{"class":264},[220,67489,67347],{"class":420},[220,67491,359],{"class":264},[220,67493,67494,67496,67498],{"class":222,"line":644},[220,67495,402],{"class":264},[220,67497,347],{"class":420},[220,67499,359],{"class":264},[212,67501,67502],{"className":468,"code":67369,"language":469,"meta":178,"style":178},[99,67503,67504,67512,67520,67528,67536],{"__ignoreMap":178},[220,67505,67506,67508,67510],{"class":222,"line":223},[220,67507,343],{"class":264},[220,67509,347],{"class":420},[220,67511,359],{"class":264},[220,67513,67514,67516,67518],{"class":222,"line":179},[220,67515,364],{"class":264},[220,67517,67347],{"class":420},[220,67519,359],{"class":264},[220,67521,67522,67524,67526],{"class":222,"line":389},[220,67523,2550],{"class":264},[220,67525,2553],{"class":420},[220,67527,386],{"class":264},[220,67529,67530,67532,67534],{"class":222,"line":399},[220,67531,2567],{"class":264},[220,67533,67347],{"class":420},[220,67535,359],{"class":264},[220,67537,67538,67540,67542],{"class":222,"line":644},[220,67539,402],{"class":264},[220,67541,347],{"class":420},[220,67543,359],{"class":264},[212,67545,67547],{"className":251,"code":67546,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RippleWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,67548,67549,67559,67563,67577,67581,67590,67598,67602,67606],{"__ignoreMap":178},[220,67550,67551,67553,67555,67557],{"class":222,"line":223},[220,67552,261],{"class":260},[220,67554,10879],{"class":264},[220,67556,268],{"class":260},[220,67558,4007],{"class":230},[220,67560,67561],{"class":222,"line":179},[220,67562,647],{"emptyLinePlaceholder":194},[220,67564,67565,67567,67569,67571,67573,67575],{"class":222,"line":389},[220,67566,1735],{"class":260},[220,67568,1738],{"class":420},[220,67570,1741],{"class":260},[220,67572,1744],{"class":260},[220,67574,1747],{"class":226},[220,67576,1750],{"class":264},[220,67578,67579],{"class":222,"line":399},[220,67580,1765],{"class":264},[220,67582,67583,67585,67588],{"class":222,"line":644},[220,67584,1770],{"class":264},[220,67586,67587],{"class":230},"'RippleWipe'",[220,67589,6375],{"class":264},[220,67591,67592,67594,67596],{"class":222,"line":650},[220,67593,6380],{"class":264},[220,67595,3206],{"class":230},[220,67597,2465],{"class":264},[220,67599,67600],{"class":222,"line":656},[220,67601,6397],{"class":264},[220,67603,67604],{"class":222,"line":673},[220,67605,1787],{"class":264},[220,67607,67608],{"class":222,"line":682},[220,67609,1792],{"class":264},[1504,67611,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":67613},[67614,67615],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":67347,"description":67355},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":67622,"title":67623,"body":67624,"category":32433,"componentType":25247,"description":67631,"extension":191,"meta":67816,"navigation":194,"path":67817,"requiresChild":31900,"seo":67818,"stem":67819,"__hash__":67820},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":67625,"toc":67812},[67626,67629,67632,67634,67636,67639,67641,67810],[11,67627,67623],{"id":67628},"ripples",[15,67630,67631],{},"Concentric animated ripples emanating from a point",[31281,67633],{"component":67623},[23,67635,31285],{"id":25903},[31287,67637],{":props":67638},"[{\"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,67640,31293],{"id":31292},[246,67642,67643,67672,67700,67728,67756],{":tabs":1557},[212,67644,67646],{"className":334,"code":67645,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,67647,67648,67656,67664],{"__ignoreMap":178},[220,67649,67650,67652,67654],{"class":222,"line":223},[220,67651,343],{"class":264},[220,67653,347],{"class":346},[220,67655,359],{"class":264},[220,67657,67658,67660,67662],{"class":222,"line":179},[220,67659,364],{"class":264},[220,67661,67623],{"class":346},[220,67663,386],{"class":264},[220,67665,67666,67668,67670],{"class":222,"line":389},[220,67667,402],{"class":264},[220,67669,347],{"class":346},[220,67671,359],{"class":264},[212,67673,67674],{"className":409,"code":67645,"language":411,"meta":178,"style":178},[99,67675,67676,67684,67692],{"__ignoreMap":178},[220,67677,67678,67680,67682],{"class":222,"line":223},[220,67679,343],{"class":264},[220,67681,347],{"class":420},[220,67683,359],{"class":264},[220,67685,67686,67688,67690],{"class":222,"line":179},[220,67687,364],{"class":264},[220,67689,67623],{"class":420},[220,67691,386],{"class":264},[220,67693,67694,67696,67698],{"class":222,"line":389},[220,67695,402],{"class":264},[220,67697,347],{"class":420},[220,67699,359],{"class":264},[212,67701,67702],{"className":2844,"code":67645,"language":2846,"meta":178,"style":178},[99,67703,67704,67712,67720],{"__ignoreMap":178},[220,67705,67706,67708,67710],{"class":222,"line":223},[220,67707,343],{"class":264},[220,67709,347],{"class":420},[220,67711,359],{"class":264},[220,67713,67714,67716,67718],{"class":222,"line":179},[220,67715,364],{"class":264},[220,67717,67623],{"class":420},[220,67719,386],{"class":264},[220,67721,67722,67724,67726],{"class":222,"line":389},[220,67723,402],{"class":264},[220,67725,347],{"class":420},[220,67727,359],{"class":264},[212,67729,67730],{"className":468,"code":67645,"language":469,"meta":178,"style":178},[99,67731,67732,67740,67748],{"__ignoreMap":178},[220,67733,67734,67736,67738],{"class":222,"line":223},[220,67735,343],{"class":264},[220,67737,347],{"class":420},[220,67739,359],{"class":264},[220,67741,67742,67744,67746],{"class":222,"line":179},[220,67743,364],{"class":264},[220,67745,67623],{"class":420},[220,67747,386],{"class":264},[220,67749,67750,67752,67754],{"class":222,"line":389},[220,67751,402],{"class":264},[220,67753,347],{"class":420},[220,67755,359],{"class":264},[212,67757,67759],{"className":251,"code":67758,"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,67760,67761,67771,67775,67789,67793,67802,67806],{"__ignoreMap":178},[220,67762,67763,67765,67767,67769],{"class":222,"line":223},[220,67764,261],{"class":260},[220,67766,10879],{"class":264},[220,67768,268],{"class":260},[220,67770,4007],{"class":230},[220,67772,67773],{"class":222,"line":179},[220,67774,647],{"emptyLinePlaceholder":194},[220,67776,67777,67779,67781,67783,67785,67787],{"class":222,"line":389},[220,67778,1735],{"class":260},[220,67780,1738],{"class":420},[220,67782,1741],{"class":260},[220,67784,1744],{"class":260},[220,67786,1747],{"class":226},[220,67788,1750],{"class":264},[220,67790,67791],{"class":222,"line":399},[220,67792,1765],{"class":264},[220,67794,67795,67797,67800],{"class":222,"line":644},[220,67796,1770],{"class":264},[220,67798,67799],{"class":230},"'Ripples'",[220,67801,2465],{"class":264},[220,67803,67804],{"class":222,"line":650},[220,67805,1787],{"class":264},[220,67807,67808],{"class":222,"line":656},[220,67809,1792],{"class":264},[1504,67811,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":67813},[67814,67815],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":67623,"description":67631},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":67822,"title":67823,"body":67824,"category":15275,"componentType":25247,"description":67831,"extension":191,"meta":68061,"navigation":194,"path":68062,"requiresChild":31900,"seo":68063,"stem":68064,"__hash__":68065},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":67825,"toc":68057},[67826,67829,67832,67834,67836,67839,67841,68055],[11,67827,67823],{"id":67828},"roundedrect",[15,67830,67831],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31281,67833],{"component":67823},[23,67835,31285],{"id":25903},[31287,67837],{":props":67838},"[{\"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,67840,31293],{"id":31292},[246,67842,67843,67883,67921,67959,67997],{":tabs":1557},[212,67844,67846],{"className":334,"code":67845,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,67847,67848,67856,67863,67871,67875],{"__ignoreMap":178},[220,67849,67850,67852,67854],{"class":222,"line":223},[220,67851,343],{"class":264},[220,67853,347],{"class":346},[220,67855,359],{"class":264},[220,67857,67858,67860],{"class":222,"line":179},[220,67859,364],{"class":264},[220,67861,67862],{"class":346},"RoundedRect\n",[220,67864,67865,67867,67869],{"class":222,"line":389},[220,67866,9002],{"class":226},[220,67868,353],{"class":264},[220,67870,8958],{"class":230},[220,67872,67873],{"class":222,"line":399},[220,67874,1234],{"class":264},[220,67876,67877,67879,67881],{"class":222,"line":644},[220,67878,402],{"class":264},[220,67880,347],{"class":346},[220,67882,359],{"class":264},[212,67884,67885],{"className":409,"code":67845,"language":411,"meta":178,"style":178},[99,67886,67887,67895,67901,67909,67913],{"__ignoreMap":178},[220,67888,67889,67891,67893],{"class":222,"line":223},[220,67890,343],{"class":264},[220,67892,347],{"class":420},[220,67894,359],{"class":264},[220,67896,67897,67899],{"class":222,"line":179},[220,67898,364],{"class":264},[220,67900,67862],{"class":420},[220,67902,67903,67905,67907],{"class":222,"line":389},[220,67904,9002],{"class":226},[220,67906,353],{"class":260},[220,67908,8958],{"class":230},[220,67910,67911],{"class":222,"line":399},[220,67912,1234],{"class":264},[220,67914,67915,67917,67919],{"class":222,"line":644},[220,67916,402],{"class":264},[220,67918,347],{"class":420},[220,67920,359],{"class":264},[212,67922,67923],{"className":2844,"code":67845,"language":2846,"meta":178,"style":178},[99,67924,67925,67933,67939,67947,67951],{"__ignoreMap":178},[220,67926,67927,67929,67931],{"class":222,"line":223},[220,67928,343],{"class":264},[220,67930,347],{"class":420},[220,67932,359],{"class":264},[220,67934,67935,67937],{"class":222,"line":179},[220,67936,364],{"class":264},[220,67938,67862],{"class":420},[220,67940,67941,67943,67945],{"class":222,"line":389},[220,67942,9002],{"class":226},[220,67944,353],{"class":264},[220,67946,8958],{"class":230},[220,67948,67949],{"class":222,"line":399},[220,67950,1234],{"class":264},[220,67952,67953,67955,67957],{"class":222,"line":644},[220,67954,402],{"class":264},[220,67956,347],{"class":420},[220,67958,359],{"class":264},[212,67960,67961],{"className":468,"code":67845,"language":469,"meta":178,"style":178},[99,67962,67963,67971,67977,67985,67989],{"__ignoreMap":178},[220,67964,67965,67967,67969],{"class":222,"line":223},[220,67966,343],{"class":264},[220,67968,347],{"class":420},[220,67970,359],{"class":264},[220,67972,67973,67975],{"class":222,"line":179},[220,67974,364],{"class":264},[220,67976,67862],{"class":420},[220,67978,67979,67981,67983],{"class":222,"line":389},[220,67980,9002],{"class":226},[220,67982,353],{"class":260},[220,67984,8958],{"class":230},[220,67986,67987],{"class":222,"line":399},[220,67988,1234],{"class":264},[220,67990,67991,67993,67995],{"class":222,"line":644},[220,67992,402],{"class":264},[220,67994,347],{"class":420},[220,67996,359],{"class":264},[212,67998,68000],{"className":251,"code":67999,"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,68001,68002,68012,68016,68030,68034,68047,68051],{"__ignoreMap":178},[220,68003,68004,68006,68008,68010],{"class":222,"line":223},[220,68005,261],{"class":260},[220,68007,10879],{"class":264},[220,68009,268],{"class":260},[220,68011,4007],{"class":230},[220,68013,68014],{"class":222,"line":179},[220,68015,647],{"emptyLinePlaceholder":194},[220,68017,68018,68020,68022,68024,68026,68028],{"class":222,"line":389},[220,68019,1735],{"class":260},[220,68021,1738],{"class":420},[220,68023,1741],{"class":260},[220,68025,1744],{"class":260},[220,68027,1747],{"class":226},[220,68029,1750],{"class":264},[220,68031,68032],{"class":222,"line":399},[220,68033,1765],{"class":264},[220,68035,68036,68038,68041,68043,68045],{"class":222,"line":644},[220,68037,1770],{"class":264},[220,68039,68040],{"class":230},"'RoundedRect'",[220,68042,1776],{"class":264},[220,68044,9536],{"class":230},[220,68046,1782],{"class":264},[220,68048,68049],{"class":222,"line":650},[220,68050,1787],{"class":264},[220,68052,68053],{"class":222,"line":656},[220,68054,1792],{"class":264},[1504,68056,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68058},[68059,68060],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":67823,"description":67831},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":68067,"title":68068,"body":68069,"category":35738,"componentType":25253,"description":68075,"extension":191,"meta":68392,"navigation":194,"path":68393,"requiresChild":194,"seo":68394,"stem":68395,"__hash__":68396},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":68070,"toc":68388},[68071,68073,68076,68078,68080,68083,68085,68386],[11,68072,68068],{"id":7425},[15,68074,68075],{},"Adjust color saturation intensity",[31281,68077],{"component":68068},[23,68079,31285],{"id":25903},[31287,68081],{":props":68082},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,68084,31293],{"id":31292},[246,68086,68087,68143,68202,68258,68316],{":tabs":1557},[212,68088,68090],{"className":334,"code":68089,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68091,68092,68100,68107,68115,68119,68127,68135],{"__ignoreMap":178},[220,68093,68094,68096,68098],{"class":222,"line":223},[220,68095,343],{"class":264},[220,68097,347],{"class":346},[220,68099,359],{"class":264},[220,68101,68102,68104],{"class":222,"line":179},[220,68103,364],{"class":264},[220,68105,68106],{"class":346},"Saturation\n",[220,68108,68109,68111,68113],{"class":222,"line":389},[220,68110,19739],{"class":226},[220,68112,353],{"class":264},[220,68114,35995],{"class":230},[220,68116,68117],{"class":222,"line":399},[220,68118,31329],{"class":264},[220,68120,68121,68123,68125],{"class":222,"line":644},[220,68122,2550],{"class":264},[220,68124,2553],{"class":346},[220,68126,386],{"class":264},[220,68128,68129,68131,68133],{"class":222,"line":650},[220,68130,2567],{"class":264},[220,68132,68068],{"class":346},[220,68134,359],{"class":264},[220,68136,68137,68139,68141],{"class":222,"line":656},[220,68138,402],{"class":264},[220,68140,347],{"class":346},[220,68142,359],{"class":264},[212,68144,68146],{"className":409,"code":68145,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68147,68148,68156,68162,68174,68178,68186,68194],{"__ignoreMap":178},[220,68149,68150,68152,68154],{"class":222,"line":223},[220,68151,343],{"class":264},[220,68153,347],{"class":420},[220,68155,359],{"class":264},[220,68157,68158,68160],{"class":222,"line":179},[220,68159,364],{"class":264},[220,68161,68106],{"class":420},[220,68163,68164,68166,68168,68170,68172],{"class":222,"line":389},[220,68165,19850],{"class":226},[220,68167,353],{"class":260},[220,68169,743],{"class":264},[220,68171,8043],{"class":420},[220,68173,749],{"class":264},[220,68175,68176],{"class":222,"line":399},[220,68177,31329],{"class":264},[220,68179,68180,68182,68184],{"class":222,"line":644},[220,68181,2550],{"class":264},[220,68183,2553],{"class":420},[220,68185,386],{"class":264},[220,68187,68188,68190,68192],{"class":222,"line":650},[220,68189,2567],{"class":264},[220,68191,68068],{"class":420},[220,68193,359],{"class":264},[220,68195,68196,68198,68200],{"class":222,"line":656},[220,68197,402],{"class":264},[220,68199,347],{"class":420},[220,68201,359],{"class":264},[212,68203,68204],{"className":2844,"code":68145,"language":2846,"meta":178,"style":178},[99,68205,68206,68214,68220,68230,68234,68242,68250],{"__ignoreMap":178},[220,68207,68208,68210,68212],{"class":222,"line":223},[220,68209,343],{"class":264},[220,68211,347],{"class":420},[220,68213,359],{"class":264},[220,68215,68216,68218],{"class":222,"line":179},[220,68217,364],{"class":264},[220,68219,68106],{"class":420},[220,68221,68222,68224,68226,68228],{"class":222,"line":389},[220,68223,19850],{"class":226},[220,68225,29241],{"class":264},[220,68227,8043],{"class":420},[220,68229,749],{"class":264},[220,68231,68232],{"class":222,"line":399},[220,68233,31329],{"class":264},[220,68235,68236,68238,68240],{"class":222,"line":644},[220,68237,2550],{"class":264},[220,68239,2553],{"class":420},[220,68241,386],{"class":264},[220,68243,68244,68246,68248],{"class":222,"line":650},[220,68245,2567],{"class":264},[220,68247,68068],{"class":420},[220,68249,359],{"class":264},[220,68251,68252,68254,68256],{"class":222,"line":656},[220,68253,402],{"class":264},[220,68255,347],{"class":420},[220,68257,359],{"class":264},[212,68259,68260],{"className":468,"code":68145,"language":469,"meta":178,"style":178},[99,68261,68262,68270,68276,68288,68292,68300,68308],{"__ignoreMap":178},[220,68263,68264,68266,68268],{"class":222,"line":223},[220,68265,343],{"class":264},[220,68267,347],{"class":420},[220,68269,359],{"class":264},[220,68271,68272,68274],{"class":222,"line":179},[220,68273,364],{"class":264},[220,68275,68106],{"class":420},[220,68277,68278,68280,68282,68284,68286],{"class":222,"line":389},[220,68279,19850],{"class":226},[220,68281,353],{"class":260},[220,68283,743],{"class":264},[220,68285,8043],{"class":420},[220,68287,749],{"class":264},[220,68289,68290],{"class":222,"line":399},[220,68291,31329],{"class":264},[220,68293,68294,68296,68298],{"class":222,"line":644},[220,68295,2550],{"class":264},[220,68297,2553],{"class":420},[220,68299,386],{"class":264},[220,68301,68302,68304,68306],{"class":222,"line":650},[220,68303,2567],{"class":264},[220,68305,68068],{"class":420},[220,68307,359],{"class":264},[220,68309,68310,68312,68314],{"class":222,"line":656},[220,68311,402],{"class":264},[220,68313,347],{"class":420},[220,68315,359],{"class":264},[212,68317,68319],{"className":251,"code":68318,"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,68320,68321,68331,68335,68349,68353,68366,68374,68378,68382],{"__ignoreMap":178},[220,68322,68323,68325,68327,68329],{"class":222,"line":223},[220,68324,261],{"class":260},[220,68326,10879],{"class":264},[220,68328,268],{"class":260},[220,68330,4007],{"class":230},[220,68332,68333],{"class":222,"line":179},[220,68334,647],{"emptyLinePlaceholder":194},[220,68336,68337,68339,68341,68343,68345,68347],{"class":222,"line":389},[220,68338,1735],{"class":260},[220,68340,1738],{"class":420},[220,68342,1741],{"class":260},[220,68344,1744],{"class":260},[220,68346,1747],{"class":226},[220,68348,1750],{"class":264},[220,68350,68351],{"class":222,"line":399},[220,68352,1765],{"class":264},[220,68354,68355,68357,68360,68362,68364],{"class":222,"line":644},[220,68356,1770],{"class":264},[220,68358,68359],{"class":230},"'Saturation'",[220,68361,31573],{"class":264},[220,68363,8043],{"class":420},[220,68365,6912],{"class":264},[220,68367,68368,68370,68372],{"class":222,"line":650},[220,68369,6380],{"class":264},[220,68371,3206],{"class":230},[220,68373,2465],{"class":264},[220,68375,68376],{"class":222,"line":656},[220,68377,6397],{"class":264},[220,68379,68380],{"class":222,"line":673},[220,68381,1787],{"class":264},[220,68383,68384],{"class":222,"line":682},[220,68385,1792],{"class":264},[1504,68387,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68389},[68390,68391],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":68068,"description":68075},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":68398,"title":68399,"body":68400,"category":32433,"componentType":25247,"description":68407,"extension":191,"meta":68592,"navigation":194,"path":68593,"requiresChild":31900,"seo":68594,"stem":68595,"__hash__":68596},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":68401,"toc":68588},[68402,68405,68408,68410,68412,68415,68417,68586],[11,68403,68399],{"id":68404},"scratches",[15,68406,68407],{},"Fine hairline scratches, like a worn film or scratched surface",[31281,68409],{"component":68399},[23,68411,31285],{"id":25903},[31287,68413],{":props":68414},"[{\"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,68416,31293],{"id":31292},[246,68418,68419,68448,68476,68504,68532],{":tabs":1557},[212,68420,68422],{"className":334,"code":68421,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,68423,68424,68432,68440],{"__ignoreMap":178},[220,68425,68426,68428,68430],{"class":222,"line":223},[220,68427,343],{"class":264},[220,68429,347],{"class":346},[220,68431,359],{"class":264},[220,68433,68434,68436,68438],{"class":222,"line":179},[220,68435,364],{"class":264},[220,68437,68399],{"class":346},[220,68439,386],{"class":264},[220,68441,68442,68444,68446],{"class":222,"line":389},[220,68443,402],{"class":264},[220,68445,347],{"class":346},[220,68447,359],{"class":264},[212,68449,68450],{"className":409,"code":68421,"language":411,"meta":178,"style":178},[99,68451,68452,68460,68468],{"__ignoreMap":178},[220,68453,68454,68456,68458],{"class":222,"line":223},[220,68455,343],{"class":264},[220,68457,347],{"class":420},[220,68459,359],{"class":264},[220,68461,68462,68464,68466],{"class":222,"line":179},[220,68463,364],{"class":264},[220,68465,68399],{"class":420},[220,68467,386],{"class":264},[220,68469,68470,68472,68474],{"class":222,"line":389},[220,68471,402],{"class":264},[220,68473,347],{"class":420},[220,68475,359],{"class":264},[212,68477,68478],{"className":2844,"code":68421,"language":2846,"meta":178,"style":178},[99,68479,68480,68488,68496],{"__ignoreMap":178},[220,68481,68482,68484,68486],{"class":222,"line":223},[220,68483,343],{"class":264},[220,68485,347],{"class":420},[220,68487,359],{"class":264},[220,68489,68490,68492,68494],{"class":222,"line":179},[220,68491,364],{"class":264},[220,68493,68399],{"class":420},[220,68495,386],{"class":264},[220,68497,68498,68500,68502],{"class":222,"line":389},[220,68499,402],{"class":264},[220,68501,347],{"class":420},[220,68503,359],{"class":264},[212,68505,68506],{"className":468,"code":68421,"language":469,"meta":178,"style":178},[99,68507,68508,68516,68524],{"__ignoreMap":178},[220,68509,68510,68512,68514],{"class":222,"line":223},[220,68511,343],{"class":264},[220,68513,347],{"class":420},[220,68515,359],{"class":264},[220,68517,68518,68520,68522],{"class":222,"line":179},[220,68519,364],{"class":264},[220,68521,68399],{"class":420},[220,68523,386],{"class":264},[220,68525,68526,68528,68530],{"class":222,"line":389},[220,68527,402],{"class":264},[220,68529,347],{"class":420},[220,68531,359],{"class":264},[212,68533,68535],{"className":251,"code":68534,"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,68536,68537,68547,68551,68565,68569,68578,68582],{"__ignoreMap":178},[220,68538,68539,68541,68543,68545],{"class":222,"line":223},[220,68540,261],{"class":260},[220,68542,10879],{"class":264},[220,68544,268],{"class":260},[220,68546,4007],{"class":230},[220,68548,68549],{"class":222,"line":179},[220,68550,647],{"emptyLinePlaceholder":194},[220,68552,68553,68555,68557,68559,68561,68563],{"class":222,"line":389},[220,68554,1735],{"class":260},[220,68556,1738],{"class":420},[220,68558,1741],{"class":260},[220,68560,1744],{"class":260},[220,68562,1747],{"class":226},[220,68564,1750],{"class":264},[220,68566,68567],{"class":222,"line":399},[220,68568,1765],{"class":264},[220,68570,68571,68573,68576],{"class":222,"line":644},[220,68572,1770],{"class":264},[220,68574,68575],{"class":230},"'Scratches'",[220,68577,2465],{"class":264},[220,68579,68580],{"class":222,"line":650},[220,68581,1787],{"class":264},[220,68583,68584],{"class":222,"line":656},[220,68585,1792],{"class":264},[1504,68587,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":68589},[68590,68591],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":68399,"description":68407},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":68598,"title":68599,"body":68600,"category":35738,"componentType":25253,"description":68607,"extension":191,"meta":68868,"navigation":194,"path":68869,"requiresChild":194,"seo":68870,"stem":68871,"__hash__":68872},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":68601,"toc":68864},[68602,68605,68608,68610,68612,68615,68617,68862],[11,68603,68599],{"id":68604},"sharpness",[15,68606,68607],{},"Adjust image sharpness using a convolution kernel",[31281,68609],{"component":68599},[23,68611,31285],{"id":25903},[31287,68613],{":props":68614},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,68616,31293],{"id":31292},[246,68618,68619,68664,68708,68752,68796],{":tabs":1557},[212,68620,68622],{"className":334,"code":68621,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,68623,68624,68632,68640,68648,68656],{"__ignoreMap":178},[220,68625,68626,68628,68630],{"class":222,"line":223},[220,68627,343],{"class":264},[220,68629,347],{"class":346},[220,68631,359],{"class":264},[220,68633,68634,68636,68638],{"class":222,"line":179},[220,68635,364],{"class":264},[220,68637,68599],{"class":346},[220,68639,359],{"class":264},[220,68641,68642,68644,68646],{"class":222,"line":389},[220,68643,2550],{"class":264},[220,68645,2553],{"class":346},[220,68647,386],{"class":264},[220,68649,68650,68652,68654],{"class":222,"line":399},[220,68651,2567],{"class":264},[220,68653,68599],{"class":346},[220,68655,359],{"class":264},[220,68657,68658,68660,68662],{"class":222,"line":644},[220,68659,402],{"class":264},[220,68661,347],{"class":346},[220,68663,359],{"class":264},[212,68665,68666],{"className":409,"code":68621,"language":411,"meta":178,"style":178},[99,68667,68668,68676,68684,68692,68700],{"__ignoreMap":178},[220,68669,68670,68672,68674],{"class":222,"line":223},[220,68671,343],{"class":264},[220,68673,347],{"class":420},[220,68675,359],{"class":264},[220,68677,68678,68680,68682],{"class":222,"line":179},[220,68679,364],{"class":264},[220,68681,68599],{"class":420},[220,68683,359],{"class":264},[220,68685,68686,68688,68690],{"class":222,"line":389},[220,68687,2550],{"class":264},[220,68689,2553],{"class":420},[220,68691,386],{"class":264},[220,68693,68694,68696,68698],{"class":222,"line":399},[220,68695,2567],{"class":264},[220,68697,68599],{"class":420},[220,68699,359],{"class":264},[220,68701,68702,68704,68706],{"class":222,"line":644},[220,68703,402],{"class":264},[220,68705,347],{"class":420},[220,68707,359],{"class":264},[212,68709,68710],{"className":2844,"code":68621,"language":2846,"meta":178,"style":178},[99,68711,68712,68720,68728,68736,68744],{"__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,68726],{"class":222,"line":179},[220,68723,364],{"class":264},[220,68725,68599],{"class":420},[220,68727,359],{"class":264},[220,68729,68730,68732,68734],{"class":222,"line":389},[220,68731,2550],{"class":264},[220,68733,2553],{"class":420},[220,68735,386],{"class":264},[220,68737,68738,68740,68742],{"class":222,"line":399},[220,68739,2567],{"class":264},[220,68741,68599],{"class":420},[220,68743,359],{"class":264},[220,68745,68746,68748,68750],{"class":222,"line":644},[220,68747,402],{"class":264},[220,68749,347],{"class":420},[220,68751,359],{"class":264},[212,68753,68754],{"className":468,"code":68621,"language":469,"meta":178,"style":178},[99,68755,68756,68764,68772,68780,68788],{"__ignoreMap":178},[220,68757,68758,68760,68762],{"class":222,"line":223},[220,68759,343],{"class":264},[220,68761,347],{"class":420},[220,68763,359],{"class":264},[220,68765,68766,68768,68770],{"class":222,"line":179},[220,68767,364],{"class":264},[220,68769,68599],{"class":420},[220,68771,359],{"class":264},[220,68773,68774,68776,68778],{"class":222,"line":389},[220,68775,2550],{"class":264},[220,68777,2553],{"class":420},[220,68779,386],{"class":264},[220,68781,68782,68784,68786],{"class":222,"line":399},[220,68783,2567],{"class":264},[220,68785,68599],{"class":420},[220,68787,359],{"class":264},[220,68789,68790,68792,68794],{"class":222,"line":644},[220,68791,402],{"class":264},[220,68793,347],{"class":420},[220,68795,359],{"class":264},[212,68797,68799],{"className":251,"code":68798,"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,68800,68801,68811,68815,68829,68833,68842,68850,68854,68858],{"__ignoreMap":178},[220,68802,68803,68805,68807,68809],{"class":222,"line":223},[220,68804,261],{"class":260},[220,68806,10879],{"class":264},[220,68808,268],{"class":260},[220,68810,4007],{"class":230},[220,68812,68813],{"class":222,"line":179},[220,68814,647],{"emptyLinePlaceholder":194},[220,68816,68817,68819,68821,68823,68825,68827],{"class":222,"line":389},[220,68818,1735],{"class":260},[220,68820,1738],{"class":420},[220,68822,1741],{"class":260},[220,68824,1744],{"class":260},[220,68826,1747],{"class":226},[220,68828,1750],{"class":264},[220,68830,68831],{"class":222,"line":399},[220,68832,1765],{"class":264},[220,68834,68835,68837,68840],{"class":222,"line":644},[220,68836,1770],{"class":264},[220,68838,68839],{"class":230},"'Sharpness'",[220,68841,6375],{"class":264},[220,68843,68844,68846,68848],{"class":222,"line":650},[220,68845,6380],{"class":264},[220,68847,3206],{"class":230},[220,68849,2465],{"class":264},[220,68851,68852],{"class":222,"line":656},[220,68853,6397],{"class":264},[220,68855,68856],{"class":222,"line":673},[220,68857,1787],{"class":264},[220,68859,68860],{"class":222,"line":682},[220,68861,1792],{"class":264},[1504,68863,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":68865},[68866,68867],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":68599,"description":68607},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":68874,"title":68875,"body":68876,"category":34929,"componentType":25253,"description":68883,"extension":191,"meta":69248,"navigation":194,"path":69249,"requiresChild":194,"seo":69250,"stem":69251,"__hash__":69252},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":68877,"toc":69244},[68878,68881,68884,68886,68888,68891,68893,69242],[11,68879,68875],{"id":68880},"shatter",[15,68882,68883],{},"Broken glass effect with tectonic plate displacement",[31281,68885],{"component":68875},[23,68887,31285],{"id":25903},[31287,68889],{":props":68890},"[{\"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,68892,31293],{"id":31292},[246,68894,68895,68960,69032,69098,69168],{":tabs":1557},[212,68896,68898],{"className":334,"code":68897,"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,68899,68900,68908,68915,68924,68932,68936,68944,68952],{"__ignoreMap":178},[220,68901,68902,68904,68906],{"class":222,"line":223},[220,68903,343],{"class":264},[220,68905,347],{"class":346},[220,68907,359],{"class":264},[220,68909,68910,68912],{"class":222,"line":179},[220,68911,364],{"class":264},[220,68913,68914],{"class":346},"Shatter\n",[220,68916,68917,68919,68921],{"class":222,"line":389},[220,68918,19739],{"class":226},[220,68920,353],{"class":264},[220,68922,68923],{"class":230},"\"4\"\n",[220,68925,68926,68928,68930],{"class":222,"line":399},[220,68927,16772],{"class":226},[220,68929,353],{"class":264},[220,68931,47518],{"class":230},[220,68933,68934],{"class":222,"line":644},[220,68935,31329],{"class":264},[220,68937,68938,68940,68942],{"class":222,"line":650},[220,68939,2550],{"class":264},[220,68941,2553],{"class":346},[220,68943,386],{"class":264},[220,68945,68946,68948,68950],{"class":222,"line":656},[220,68947,2567],{"class":264},[220,68949,68875],{"class":346},[220,68951,359],{"class":264},[220,68953,68954,68956,68958],{"class":222,"line":673},[220,68955,402],{"class":264},[220,68957,347],{"class":346},[220,68959,359],{"class":264},[212,68961,68963],{"className":409,"code":68962,"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,68964,68965,68973,68979,68992,69004,69008,69016,69024],{"__ignoreMap":178},[220,68966,68967,68969,68971],{"class":222,"line":223},[220,68968,343],{"class":264},[220,68970,347],{"class":420},[220,68972,359],{"class":264},[220,68974,68975,68977],{"class":222,"line":179},[220,68976,364],{"class":264},[220,68978,68914],{"class":420},[220,68980,68981,68983,68985,68987,68990],{"class":222,"line":389},[220,68982,19850],{"class":226},[220,68984,353],{"class":260},[220,68986,743],{"class":264},[220,68988,68989],{"class":420},"4",[220,68991,749],{"class":264},[220,68993,68994,68996,68998,69000,69002],{"class":222,"line":399},[220,68995,9012],{"class":226},[220,68997,353],{"class":260},[220,68999,743],{"class":264},[220,69001,7615],{"class":420},[220,69003,749],{"class":264},[220,69005,69006],{"class":222,"line":644},[220,69007,31329],{"class":264},[220,69009,69010,69012,69014],{"class":222,"line":650},[220,69011,2550],{"class":264},[220,69013,2553],{"class":420},[220,69015,386],{"class":264},[220,69017,69018,69020,69022],{"class":222,"line":656},[220,69019,2567],{"class":264},[220,69021,68875],{"class":420},[220,69023,359],{"class":264},[220,69025,69026,69028,69030],{"class":222,"line":673},[220,69027,402],{"class":264},[220,69029,347],{"class":420},[220,69031,359],{"class":264},[212,69033,69034],{"className":2844,"code":68962,"language":2846,"meta":178,"style":178},[99,69035,69036,69044,69050,69060,69070,69074,69082,69090],{"__ignoreMap":178},[220,69037,69038,69040,69042],{"class":222,"line":223},[220,69039,343],{"class":264},[220,69041,347],{"class":420},[220,69043,359],{"class":264},[220,69045,69046,69048],{"class":222,"line":179},[220,69047,364],{"class":264},[220,69049,68914],{"class":420},[220,69051,69052,69054,69056,69058],{"class":222,"line":389},[220,69053,19850],{"class":226},[220,69055,29241],{"class":264},[220,69057,68989],{"class":420},[220,69059,749],{"class":264},[220,69061,69062,69064,69066,69068],{"class":222,"line":399},[220,69063,9012],{"class":226},[220,69065,29241],{"class":264},[220,69067,7615],{"class":420},[220,69069,749],{"class":264},[220,69071,69072],{"class":222,"line":644},[220,69073,31329],{"class":264},[220,69075,69076,69078,69080],{"class":222,"line":650},[220,69077,2550],{"class":264},[220,69079,2553],{"class":420},[220,69081,386],{"class":264},[220,69083,69084,69086,69088],{"class":222,"line":656},[220,69085,2567],{"class":264},[220,69087,68875],{"class":420},[220,69089,359],{"class":264},[220,69091,69092,69094,69096],{"class":222,"line":673},[220,69093,402],{"class":264},[220,69095,347],{"class":420},[220,69097,359],{"class":264},[212,69099,69100],{"className":468,"code":68962,"language":469,"meta":178,"style":178},[99,69101,69102,69110,69116,69128,69140,69144,69152,69160],{"__ignoreMap":178},[220,69103,69104,69106,69108],{"class":222,"line":223},[220,69105,343],{"class":264},[220,69107,347],{"class":420},[220,69109,359],{"class":264},[220,69111,69112,69114],{"class":222,"line":179},[220,69113,364],{"class":264},[220,69115,68914],{"class":420},[220,69117,69118,69120,69122,69124,69126],{"class":222,"line":389},[220,69119,19850],{"class":226},[220,69121,353],{"class":260},[220,69123,743],{"class":264},[220,69125,68989],{"class":420},[220,69127,749],{"class":264},[220,69129,69130,69132,69134,69136,69138],{"class":222,"line":399},[220,69131,9012],{"class":226},[220,69133,353],{"class":260},[220,69135,743],{"class":264},[220,69137,7615],{"class":420},[220,69139,749],{"class":264},[220,69141,69142],{"class":222,"line":644},[220,69143,31329],{"class":264},[220,69145,69146,69148,69150],{"class":222,"line":650},[220,69147,2550],{"class":264},[220,69149,2553],{"class":420},[220,69151,386],{"class":264},[220,69153,69154,69156,69158],{"class":222,"line":656},[220,69155,2567],{"class":264},[220,69157,68875],{"class":420},[220,69159,359],{"class":264},[220,69161,69162,69164,69166],{"class":222,"line":673},[220,69163,402],{"class":264},[220,69165,347],{"class":420},[220,69167,359],{"class":264},[212,69169,69171],{"className":251,"code":69170,"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,69172,69173,69183,69187,69201,69205,69222,69230,69234,69238],{"__ignoreMap":178},[220,69174,69175,69177,69179,69181],{"class":222,"line":223},[220,69176,261],{"class":260},[220,69178,10879],{"class":264},[220,69180,268],{"class":260},[220,69182,4007],{"class":230},[220,69184,69185],{"class":222,"line":179},[220,69186,647],{"emptyLinePlaceholder":194},[220,69188,69189,69191,69193,69195,69197,69199],{"class":222,"line":389},[220,69190,1735],{"class":260},[220,69192,1738],{"class":420},[220,69194,1741],{"class":260},[220,69196,1744],{"class":260},[220,69198,1747],{"class":226},[220,69200,1750],{"class":264},[220,69202,69203],{"class":222,"line":399},[220,69204,1765],{"class":264},[220,69206,69207,69209,69212,69214,69216,69218,69220],{"class":222,"line":644},[220,69208,1770],{"class":264},[220,69210,69211],{"class":230},"'Shatter'",[220,69213,31573],{"class":264},[220,69215,68989],{"class":420},[220,69217,5932],{"class":264},[220,69219,7615],{"class":420},[220,69221,6912],{"class":264},[220,69223,69224,69226,69228],{"class":222,"line":650},[220,69225,6380],{"class":264},[220,69227,3206],{"class":230},[220,69229,2465],{"class":264},[220,69231,69232],{"class":222,"line":656},[220,69233,6397],{"class":264},[220,69235,69236],{"class":222,"line":673},[220,69237,1787],{"class":264},[220,69239,69240],{"class":222,"line":682},[220,69241,1792],{"class":264},[1504,69243,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69245},[69246,69247],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":68875,"description":68883},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":69254,"title":69255,"body":69256,"category":32433,"componentType":25247,"description":69263,"extension":191,"meta":69448,"navigation":194,"path":69449,"requiresChild":31900,"seo":69450,"stem":69451,"__hash__":69452},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":69257,"toc":69444},[69258,69261,69264,69266,69268,69271,69273,69442],[11,69259,69255],{"id":69260},"simplexnoise",[15,69262,69263],{},"Organic noise with animated movement",[31281,69265],{"component":69255},[23,69267,31285],{"id":25903},[31287,69269],{":props":69270},"[{\"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,69272,31293],{"id":31292},[246,69274,69275,69304,69332,69360,69388],{":tabs":1557},[212,69276,69278],{"className":334,"code":69277,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,69279,69280,69288,69296],{"__ignoreMap":178},[220,69281,69282,69284,69286],{"class":222,"line":223},[220,69283,343],{"class":264},[220,69285,347],{"class":346},[220,69287,359],{"class":264},[220,69289,69290,69292,69294],{"class":222,"line":179},[220,69291,364],{"class":264},[220,69293,69255],{"class":346},[220,69295,386],{"class":264},[220,69297,69298,69300,69302],{"class":222,"line":389},[220,69299,402],{"class":264},[220,69301,347],{"class":346},[220,69303,359],{"class":264},[212,69305,69306],{"className":409,"code":69277,"language":411,"meta":178,"style":178},[99,69307,69308,69316,69324],{"__ignoreMap":178},[220,69309,69310,69312,69314],{"class":222,"line":223},[220,69311,343],{"class":264},[220,69313,347],{"class":420},[220,69315,359],{"class":264},[220,69317,69318,69320,69322],{"class":222,"line":179},[220,69319,364],{"class":264},[220,69321,69255],{"class":420},[220,69323,386],{"class":264},[220,69325,69326,69328,69330],{"class":222,"line":389},[220,69327,402],{"class":264},[220,69329,347],{"class":420},[220,69331,359],{"class":264},[212,69333,69334],{"className":2844,"code":69277,"language":2846,"meta":178,"style":178},[99,69335,69336,69344,69352],{"__ignoreMap":178},[220,69337,69338,69340,69342],{"class":222,"line":223},[220,69339,343],{"class":264},[220,69341,347],{"class":420},[220,69343,359],{"class":264},[220,69345,69346,69348,69350],{"class":222,"line":179},[220,69347,364],{"class":264},[220,69349,69255],{"class":420},[220,69351,386],{"class":264},[220,69353,69354,69356,69358],{"class":222,"line":389},[220,69355,402],{"class":264},[220,69357,347],{"class":420},[220,69359,359],{"class":264},[212,69361,69362],{"className":468,"code":69277,"language":469,"meta":178,"style":178},[99,69363,69364,69372,69380],{"__ignoreMap":178},[220,69365,69366,69368,69370],{"class":222,"line":223},[220,69367,343],{"class":264},[220,69369,347],{"class":420},[220,69371,359],{"class":264},[220,69373,69374,69376,69378],{"class":222,"line":179},[220,69375,364],{"class":264},[220,69377,69255],{"class":420},[220,69379,386],{"class":264},[220,69381,69382,69384,69386],{"class":222,"line":389},[220,69383,402],{"class":264},[220,69385,347],{"class":420},[220,69387,359],{"class":264},[212,69389,69391],{"className":251,"code":69390,"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,69392,69393,69403,69407,69421,69425,69434,69438],{"__ignoreMap":178},[220,69394,69395,69397,69399,69401],{"class":222,"line":223},[220,69396,261],{"class":260},[220,69398,10879],{"class":264},[220,69400,268],{"class":260},[220,69402,4007],{"class":230},[220,69404,69405],{"class":222,"line":179},[220,69406,647],{"emptyLinePlaceholder":194},[220,69408,69409,69411,69413,69415,69417,69419],{"class":222,"line":389},[220,69410,1735],{"class":260},[220,69412,1738],{"class":420},[220,69414,1741],{"class":260},[220,69416,1744],{"class":260},[220,69418,1747],{"class":226},[220,69420,1750],{"class":264},[220,69422,69423],{"class":222,"line":399},[220,69424,1765],{"class":264},[220,69426,69427,69429,69432],{"class":222,"line":644},[220,69428,1770],{"class":264},[220,69430,69431],{"class":230},"'SimplexNoise'",[220,69433,2465],{"class":264},[220,69435,69436],{"class":222,"line":650},[220,69437,1787],{"class":264},[220,69439,69440],{"class":222,"line":656},[220,69441,1792],{"class":264},[1504,69443,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":69445},[69446,69447],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":69255,"description":69263},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":69454,"title":69455,"body":69456,"category":32433,"componentType":25247,"description":69463,"extension":191,"meta":69693,"navigation":194,"path":69694,"requiresChild":31900,"seo":69695,"stem":69696,"__hash__":69697},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":69457,"toc":69689},[69458,69461,69464,69466,69468,69471,69473,69687],[11,69459,69455],{"id":69460},"sinewave",[15,69462,69463],{},"Animated wave with thickness and softness",[31281,69465],{"component":69455},[23,69467,31285],{"id":25903},[31287,69469],{":props":69470},"[{\"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,69472,31293],{"id":31292},[246,69474,69475,69515,69553,69591,69629],{":tabs":1557},[212,69476,69478],{"className":334,"code":69477,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,69479,69480,69488,69495,69503,69507],{"__ignoreMap":178},[220,69481,69482,69484,69486],{"class":222,"line":223},[220,69483,343],{"class":264},[220,69485,347],{"class":346},[220,69487,359],{"class":264},[220,69489,69490,69492],{"class":222,"line":179},[220,69491,364],{"class":264},[220,69493,69494],{"class":346},"SineWave\n",[220,69496,69497,69499,69501],{"class":222,"line":389},[220,69498,9002],{"class":226},[220,69500,353],{"class":264},[220,69502,8958],{"class":230},[220,69504,69505],{"class":222,"line":399},[220,69506,1234],{"class":264},[220,69508,69509,69511,69513],{"class":222,"line":644},[220,69510,402],{"class":264},[220,69512,347],{"class":346},[220,69514,359],{"class":264},[212,69516,69517],{"className":409,"code":69477,"language":411,"meta":178,"style":178},[99,69518,69519,69527,69533,69541,69545],{"__ignoreMap":178},[220,69520,69521,69523,69525],{"class":222,"line":223},[220,69522,343],{"class":264},[220,69524,347],{"class":420},[220,69526,359],{"class":264},[220,69528,69529,69531],{"class":222,"line":179},[220,69530,364],{"class":264},[220,69532,69494],{"class":420},[220,69534,69535,69537,69539],{"class":222,"line":389},[220,69536,9002],{"class":226},[220,69538,353],{"class":260},[220,69540,8958],{"class":230},[220,69542,69543],{"class":222,"line":399},[220,69544,1234],{"class":264},[220,69546,69547,69549,69551],{"class":222,"line":644},[220,69548,402],{"class":264},[220,69550,347],{"class":420},[220,69552,359],{"class":264},[212,69554,69555],{"className":2844,"code":69477,"language":2846,"meta":178,"style":178},[99,69556,69557,69565,69571,69579,69583],{"__ignoreMap":178},[220,69558,69559,69561,69563],{"class":222,"line":223},[220,69560,343],{"class":264},[220,69562,347],{"class":420},[220,69564,359],{"class":264},[220,69566,69567,69569],{"class":222,"line":179},[220,69568,364],{"class":264},[220,69570,69494],{"class":420},[220,69572,69573,69575,69577],{"class":222,"line":389},[220,69574,9002],{"class":226},[220,69576,353],{"class":264},[220,69578,8958],{"class":230},[220,69580,69581],{"class":222,"line":399},[220,69582,1234],{"class":264},[220,69584,69585,69587,69589],{"class":222,"line":644},[220,69586,402],{"class":264},[220,69588,347],{"class":420},[220,69590,359],{"class":264},[212,69592,69593],{"className":468,"code":69477,"language":469,"meta":178,"style":178},[99,69594,69595,69603,69609,69617,69621],{"__ignoreMap":178},[220,69596,69597,69599,69601],{"class":222,"line":223},[220,69598,343],{"class":264},[220,69600,347],{"class":420},[220,69602,359],{"class":264},[220,69604,69605,69607],{"class":222,"line":179},[220,69606,364],{"class":264},[220,69608,69494],{"class":420},[220,69610,69611,69613,69615],{"class":222,"line":389},[220,69612,9002],{"class":226},[220,69614,353],{"class":260},[220,69616,8958],{"class":230},[220,69618,69619],{"class":222,"line":399},[220,69620,1234],{"class":264},[220,69622,69623,69625,69627],{"class":222,"line":644},[220,69624,402],{"class":264},[220,69626,347],{"class":420},[220,69628,359],{"class":264},[212,69630,69632],{"className":251,"code":69631,"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,69633,69634,69644,69648,69662,69666,69679,69683],{"__ignoreMap":178},[220,69635,69636,69638,69640,69642],{"class":222,"line":223},[220,69637,261],{"class":260},[220,69639,10879],{"class":264},[220,69641,268],{"class":260},[220,69643,4007],{"class":230},[220,69645,69646],{"class":222,"line":179},[220,69647,647],{"emptyLinePlaceholder":194},[220,69649,69650,69652,69654,69656,69658,69660],{"class":222,"line":389},[220,69651,1735],{"class":260},[220,69653,1738],{"class":420},[220,69655,1741],{"class":260},[220,69657,1744],{"class":260},[220,69659,1747],{"class":226},[220,69661,1750],{"class":264},[220,69663,69664],{"class":222,"line":399},[220,69665,1765],{"class":264},[220,69667,69668,69670,69673,69675,69677],{"class":222,"line":644},[220,69669,1770],{"class":264},[220,69671,69672],{"class":230},"'SineWave'",[220,69674,1776],{"class":264},[220,69676,9536],{"class":230},[220,69678,1782],{"class":264},[220,69680,69681],{"class":222,"line":650},[220,69682,1787],{"class":264},[220,69684,69685],{"class":222,"line":656},[220,69686,1792],{"class":264},[1504,69688,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69690},[69691,69692],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":69455,"description":69463},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":69699,"title":69700,"body":69701,"category":33043,"componentType":25253,"description":69708,"extension":191,"meta":69969,"navigation":194,"path":69970,"requiresChild":194,"seo":69971,"stem":69972,"__hash__":69973},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":69702,"toc":69965},[69703,69706,69709,69711,69713,69716,69718,69963],[11,69704,69700],{"id":69705},"slicewipe",[15,69707,69708],{},"Slice the content into strips that slide away in alternating directions",[31281,69710],{"component":69700},[23,69712,31285],{"id":25903},[31287,69714],{":props":69715},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the strips have slid (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the strips in degrees (0 = vertical strips sliding up and down)\"},{\"name\":\"sliceCount\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of strips across the frame\"}]",[23,69717,31293],{"id":31292},[246,69719,69720,69765,69809,69853,69897],{":tabs":1557},[212,69721,69723],{"className":334,"code":69722,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,69724,69725,69733,69741,69749,69757],{"__ignoreMap":178},[220,69726,69727,69729,69731],{"class":222,"line":223},[220,69728,343],{"class":264},[220,69730,347],{"class":346},[220,69732,359],{"class":264},[220,69734,69735,69737,69739],{"class":222,"line":179},[220,69736,364],{"class":264},[220,69738,69700],{"class":346},[220,69740,359],{"class":264},[220,69742,69743,69745,69747],{"class":222,"line":389},[220,69744,2550],{"class":264},[220,69746,2553],{"class":346},[220,69748,386],{"class":264},[220,69750,69751,69753,69755],{"class":222,"line":399},[220,69752,2567],{"class":264},[220,69754,69700],{"class":346},[220,69756,359],{"class":264},[220,69758,69759,69761,69763],{"class":222,"line":644},[220,69760,402],{"class":264},[220,69762,347],{"class":346},[220,69764,359],{"class":264},[212,69766,69767],{"className":409,"code":69722,"language":411,"meta":178,"style":178},[99,69768,69769,69777,69785,69793,69801],{"__ignoreMap":178},[220,69770,69771,69773,69775],{"class":222,"line":223},[220,69772,343],{"class":264},[220,69774,347],{"class":420},[220,69776,359],{"class":264},[220,69778,69779,69781,69783],{"class":222,"line":179},[220,69780,364],{"class":264},[220,69782,69700],{"class":420},[220,69784,359],{"class":264},[220,69786,69787,69789,69791],{"class":222,"line":389},[220,69788,2550],{"class":264},[220,69790,2553],{"class":420},[220,69792,386],{"class":264},[220,69794,69795,69797,69799],{"class":222,"line":399},[220,69796,2567],{"class":264},[220,69798,69700],{"class":420},[220,69800,359],{"class":264},[220,69802,69803,69805,69807],{"class":222,"line":644},[220,69804,402],{"class":264},[220,69806,347],{"class":420},[220,69808,359],{"class":264},[212,69810,69811],{"className":2844,"code":69722,"language":2846,"meta":178,"style":178},[99,69812,69813,69821,69829,69837,69845],{"__ignoreMap":178},[220,69814,69815,69817,69819],{"class":222,"line":223},[220,69816,343],{"class":264},[220,69818,347],{"class":420},[220,69820,359],{"class":264},[220,69822,69823,69825,69827],{"class":222,"line":179},[220,69824,364],{"class":264},[220,69826,69700],{"class":420},[220,69828,359],{"class":264},[220,69830,69831,69833,69835],{"class":222,"line":389},[220,69832,2550],{"class":264},[220,69834,2553],{"class":420},[220,69836,386],{"class":264},[220,69838,69839,69841,69843],{"class":222,"line":399},[220,69840,2567],{"class":264},[220,69842,69700],{"class":420},[220,69844,359],{"class":264},[220,69846,69847,69849,69851],{"class":222,"line":644},[220,69848,402],{"class":264},[220,69850,347],{"class":420},[220,69852,359],{"class":264},[212,69854,69855],{"className":468,"code":69722,"language":469,"meta":178,"style":178},[99,69856,69857,69865,69873,69881,69889],{"__ignoreMap":178},[220,69858,69859,69861,69863],{"class":222,"line":223},[220,69860,343],{"class":264},[220,69862,347],{"class":420},[220,69864,359],{"class":264},[220,69866,69867,69869,69871],{"class":222,"line":179},[220,69868,364],{"class":264},[220,69870,69700],{"class":420},[220,69872,359],{"class":264},[220,69874,69875,69877,69879],{"class":222,"line":389},[220,69876,2550],{"class":264},[220,69878,2553],{"class":420},[220,69880,386],{"class":264},[220,69882,69883,69885,69887],{"class":222,"line":399},[220,69884,2567],{"class":264},[220,69886,69700],{"class":420},[220,69888,359],{"class":264},[220,69890,69891,69893,69895],{"class":222,"line":644},[220,69892,402],{"class":264},[220,69894,347],{"class":420},[220,69896,359],{"class":264},[212,69898,69900],{"className":251,"code":69899,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SliceWipe', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,69901,69902,69912,69916,69930,69934,69943,69951,69955,69959],{"__ignoreMap":178},[220,69903,69904,69906,69908,69910],{"class":222,"line":223},[220,69905,261],{"class":260},[220,69907,10879],{"class":264},[220,69909,268],{"class":260},[220,69911,4007],{"class":230},[220,69913,69914],{"class":222,"line":179},[220,69915,647],{"emptyLinePlaceholder":194},[220,69917,69918,69920,69922,69924,69926,69928],{"class":222,"line":389},[220,69919,1735],{"class":260},[220,69921,1738],{"class":420},[220,69923,1741],{"class":260},[220,69925,1744],{"class":260},[220,69927,1747],{"class":226},[220,69929,1750],{"class":264},[220,69931,69932],{"class":222,"line":399},[220,69933,1765],{"class":264},[220,69935,69936,69938,69941],{"class":222,"line":644},[220,69937,1770],{"class":264},[220,69939,69940],{"class":230},"'SliceWipe'",[220,69942,6375],{"class":264},[220,69944,69945,69947,69949],{"class":222,"line":650},[220,69946,6380],{"class":264},[220,69948,3206],{"class":230},[220,69950,2465],{"class":264},[220,69952,69953],{"class":222,"line":656},[220,69954,6397],{"class":264},[220,69956,69957],{"class":222,"line":673},[220,69958,1787],{"class":264},[220,69960,69961],{"class":222,"line":682},[220,69962,1792],{"class":264},[1504,69964,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":69966},[69967,69968],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":69700,"description":69708},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":69975,"title":69976,"body":69977,"category":34929,"componentType":25247,"description":69984,"extension":191,"meta":70225,"navigation":194,"path":70226,"requiresChild":31900,"seo":70227,"stem":70228,"__hash__":70229},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":69978,"toc":70221},[69979,69982,69985,69987,69989,69992,69994,70219],[11,69980,69976],{"id":69981},"smoke",[15,69983,69984],{},"Realistic fluid smoke simulation with vorticity dynamics",[31281,69986],{"component":69976},[23,69988,31285],{"id":25903},[31287,69990],{":props":69991},"[{\"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,69993,31293],{"id":31292},[246,69995,69996,70036,70079,70119,70161],{":tabs":1557},[212,69997,69999],{"className":334,"code":69998,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70000,70001,70009,70016,70024,70028],{"__ignoreMap":178},[220,70002,70003,70005,70007],{"class":222,"line":223},[220,70004,343],{"class":264},[220,70006,347],{"class":346},[220,70008,359],{"class":264},[220,70010,70011,70013],{"class":222,"line":179},[220,70012,364],{"class":264},[220,70014,70015],{"class":346},"Smoke\n",[220,70017,70018,70020,70022],{"class":222,"line":389},[220,70019,19739],{"class":226},[220,70021,353],{"class":264},[220,70023,35995],{"class":230},[220,70025,70026],{"class":222,"line":399},[220,70027,1234],{"class":264},[220,70029,70030,70032,70034],{"class":222,"line":644},[220,70031,402],{"class":264},[220,70033,347],{"class":346},[220,70035,359],{"class":264},[212,70037,70039],{"className":409,"code":70038,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70040,70041,70049,70055,70067,70071],{"__ignoreMap":178},[220,70042,70043,70045,70047],{"class":222,"line":223},[220,70044,343],{"class":264},[220,70046,347],{"class":420},[220,70048,359],{"class":264},[220,70050,70051,70053],{"class":222,"line":179},[220,70052,364],{"class":264},[220,70054,70015],{"class":420},[220,70056,70057,70059,70061,70063,70065],{"class":222,"line":389},[220,70058,19850],{"class":226},[220,70060,353],{"class":260},[220,70062,743],{"class":264},[220,70064,8043],{"class":420},[220,70066,749],{"class":264},[220,70068,70069],{"class":222,"line":399},[220,70070,1234],{"class":264},[220,70072,70073,70075,70077],{"class":222,"line":644},[220,70074,402],{"class":264},[220,70076,347],{"class":420},[220,70078,359],{"class":264},[212,70080,70081],{"className":2844,"code":70038,"language":2846,"meta":178,"style":178},[99,70082,70083,70091,70097,70107,70111],{"__ignoreMap":178},[220,70084,70085,70087,70089],{"class":222,"line":223},[220,70086,343],{"class":264},[220,70088,347],{"class":420},[220,70090,359],{"class":264},[220,70092,70093,70095],{"class":222,"line":179},[220,70094,364],{"class":264},[220,70096,70015],{"class":420},[220,70098,70099,70101,70103,70105],{"class":222,"line":389},[220,70100,19850],{"class":226},[220,70102,29241],{"class":264},[220,70104,8043],{"class":420},[220,70106,749],{"class":264},[220,70108,70109],{"class":222,"line":399},[220,70110,1234],{"class":264},[220,70112,70113,70115,70117],{"class":222,"line":644},[220,70114,402],{"class":264},[220,70116,347],{"class":420},[220,70118,359],{"class":264},[212,70120,70121],{"className":468,"code":70038,"language":469,"meta":178,"style":178},[99,70122,70123,70131,70137,70149,70153],{"__ignoreMap":178},[220,70124,70125,70127,70129],{"class":222,"line":223},[220,70126,343],{"class":264},[220,70128,347],{"class":420},[220,70130,359],{"class":264},[220,70132,70133,70135],{"class":222,"line":179},[220,70134,364],{"class":264},[220,70136,70015],{"class":420},[220,70138,70139,70141,70143,70145,70147],{"class":222,"line":389},[220,70140,19850],{"class":226},[220,70142,353],{"class":260},[220,70144,743],{"class":264},[220,70146,8043],{"class":420},[220,70148,749],{"class":264},[220,70150,70151],{"class":222,"line":399},[220,70152,1234],{"class":264},[220,70154,70155,70157,70159],{"class":222,"line":644},[220,70156,402],{"class":264},[220,70158,347],{"class":420},[220,70160,359],{"class":264},[212,70162,70164],{"className":251,"code":70163,"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,70165,70166,70176,70180,70194,70198,70211,70215],{"__ignoreMap":178},[220,70167,70168,70170,70172,70174],{"class":222,"line":223},[220,70169,261],{"class":260},[220,70171,10879],{"class":264},[220,70173,268],{"class":260},[220,70175,4007],{"class":230},[220,70177,70178],{"class":222,"line":179},[220,70179,647],{"emptyLinePlaceholder":194},[220,70181,70182,70184,70186,70188,70190,70192],{"class":222,"line":389},[220,70183,1735],{"class":260},[220,70185,1738],{"class":420},[220,70187,1741],{"class":260},[220,70189,1744],{"class":260},[220,70191,1747],{"class":226},[220,70193,1750],{"class":264},[220,70195,70196],{"class":222,"line":399},[220,70197,1765],{"class":264},[220,70199,70200,70202,70205,70207,70209],{"class":222,"line":644},[220,70201,1770],{"class":264},[220,70203,70204],{"class":230},"'Smoke'",[220,70206,31573],{"class":264},[220,70208,8043],{"class":420},[220,70210,1782],{"class":264},[220,70212,70213],{"class":222,"line":650},[220,70214,1787],{"class":264},[220,70216,70217],{"class":222,"line":656},[220,70218,1792],{"class":264},[1504,70220,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70222},[70223,70224],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":69976,"description":69984},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":70231,"title":22544,"body":70232,"category":35939,"componentType":25247,"description":70239,"extension":191,"meta":70480,"navigation":194,"path":70481,"requiresChild":31900,"seo":70482,"stem":70483,"__hash__":70484},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":70233,"toc":70476},[70234,70237,70240,70242,70244,70247,70249,70474],[11,70235,22544],{"id":70236},"smokefill",[15,70238,70239],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31281,70241],{"component":22544},[23,70243,31285],{"id":25903},[31287,70245],{":props":70246},"[{\"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,70248,31293],{"id":31292},[246,70250,70251,70291,70334,70374,70416],{":tabs":1557},[212,70252,70254],{"className":334,"code":70253,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70255,70256,70264,70271,70279,70283],{"__ignoreMap":178},[220,70257,70258,70260,70262],{"class":222,"line":223},[220,70259,343],{"class":264},[220,70261,347],{"class":346},[220,70263,359],{"class":264},[220,70265,70266,70268],{"class":222,"line":179},[220,70267,364],{"class":264},[220,70269,70270],{"class":346},"SmokeFill\n",[220,70272,70273,70275,70277],{"class":222,"line":389},[220,70274,19739],{"class":226},[220,70276,353],{"class":264},[220,70278,35995],{"class":230},[220,70280,70281],{"class":222,"line":399},[220,70282,1234],{"class":264},[220,70284,70285,70287,70289],{"class":222,"line":644},[220,70286,402],{"class":264},[220,70288,347],{"class":346},[220,70290,359],{"class":264},[212,70292,70294],{"className":409,"code":70293,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70295,70296,70304,70310,70322,70326],{"__ignoreMap":178},[220,70297,70298,70300,70302],{"class":222,"line":223},[220,70299,343],{"class":264},[220,70301,347],{"class":420},[220,70303,359],{"class":264},[220,70305,70306,70308],{"class":222,"line":179},[220,70307,364],{"class":264},[220,70309,70270],{"class":420},[220,70311,70312,70314,70316,70318,70320],{"class":222,"line":389},[220,70313,19850],{"class":226},[220,70315,353],{"class":260},[220,70317,743],{"class":264},[220,70319,8043],{"class":420},[220,70321,749],{"class":264},[220,70323,70324],{"class":222,"line":399},[220,70325,1234],{"class":264},[220,70327,70328,70330,70332],{"class":222,"line":644},[220,70329,402],{"class":264},[220,70331,347],{"class":420},[220,70333,359],{"class":264},[212,70335,70336],{"className":2844,"code":70293,"language":2846,"meta":178,"style":178},[99,70337,70338,70346,70352,70362,70366],{"__ignoreMap":178},[220,70339,70340,70342,70344],{"class":222,"line":223},[220,70341,343],{"class":264},[220,70343,347],{"class":420},[220,70345,359],{"class":264},[220,70347,70348,70350],{"class":222,"line":179},[220,70349,364],{"class":264},[220,70351,70270],{"class":420},[220,70353,70354,70356,70358,70360],{"class":222,"line":389},[220,70355,19850],{"class":226},[220,70357,29241],{"class":264},[220,70359,8043],{"class":420},[220,70361,749],{"class":264},[220,70363,70364],{"class":222,"line":399},[220,70365,1234],{"class":264},[220,70367,70368,70370,70372],{"class":222,"line":644},[220,70369,402],{"class":264},[220,70371,347],{"class":420},[220,70373,359],{"class":264},[212,70375,70376],{"className":468,"code":70293,"language":469,"meta":178,"style":178},[99,70377,70378,70386,70392,70404,70408],{"__ignoreMap":178},[220,70379,70380,70382,70384],{"class":222,"line":223},[220,70381,343],{"class":264},[220,70383,347],{"class":420},[220,70385,359],{"class":264},[220,70387,70388,70390],{"class":222,"line":179},[220,70389,364],{"class":264},[220,70391,70270],{"class":420},[220,70393,70394,70396,70398,70400,70402],{"class":222,"line":389},[220,70395,19850],{"class":226},[220,70397,353],{"class":260},[220,70399,743],{"class":264},[220,70401,8043],{"class":420},[220,70403,749],{"class":264},[220,70405,70406],{"class":222,"line":399},[220,70407,1234],{"class":264},[220,70409,70410,70412,70414],{"class":222,"line":644},[220,70411,402],{"class":264},[220,70413,347],{"class":420},[220,70415,359],{"class":264},[212,70417,70419],{"className":251,"code":70418,"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,70420,70421,70431,70435,70449,70453,70466,70470],{"__ignoreMap":178},[220,70422,70423,70425,70427,70429],{"class":222,"line":223},[220,70424,261],{"class":260},[220,70426,10879],{"class":264},[220,70428,268],{"class":260},[220,70430,4007],{"class":230},[220,70432,70433],{"class":222,"line":179},[220,70434,647],{"emptyLinePlaceholder":194},[220,70436,70437,70439,70441,70443,70445,70447],{"class":222,"line":389},[220,70438,1735],{"class":260},[220,70440,1738],{"class":420},[220,70442,1741],{"class":260},[220,70444,1744],{"class":260},[220,70446,1747],{"class":226},[220,70448,1750],{"class":264},[220,70450,70451],{"class":222,"line":399},[220,70452,1765],{"class":264},[220,70454,70455,70457,70460,70462,70464],{"class":222,"line":644},[220,70456,1770],{"class":264},[220,70458,70459],{"class":230},"'SmokeFill'",[220,70461,31573],{"class":264},[220,70463,8043],{"class":420},[220,70465,1782],{"class":264},[220,70467,70468],{"class":222,"line":650},[220,70469,1787],{"class":264},[220,70471,70472],{"class":222,"line":656},[220,70473,1792],{"class":264},[1504,70475,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70477},[70478,70479],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":22544,"description":70239},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":70486,"title":70487,"body":70488,"category":34929,"componentType":25247,"description":70495,"extension":191,"meta":70736,"navigation":194,"path":70737,"requiresChild":31900,"seo":70738,"stem":70739,"__hash__":70740},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":70489,"toc":70732},[70490,70493,70496,70498,70500,70503,70505,70730],[11,70491,70487],{"id":70492},"smokeflow",[15,70494,70495],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31281,70497],{"component":70487},[23,70499,31285],{"id":25903},[31287,70501],{":props":70502},"[{\"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,70504,31293],{"id":31292},[246,70506,70507,70547,70590,70630,70672],{":tabs":1557},[212,70508,70510],{"className":334,"code":70509,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70511,70512,70520,70527,70535,70539],{"__ignoreMap":178},[220,70513,70514,70516,70518],{"class":222,"line":223},[220,70515,343],{"class":264},[220,70517,347],{"class":346},[220,70519,359],{"class":264},[220,70521,70522,70524],{"class":222,"line":179},[220,70523,364],{"class":264},[220,70525,70526],{"class":346},"SmokeFlow\n",[220,70528,70529,70531,70533],{"class":222,"line":389},[220,70530,19739],{"class":226},[220,70532,353],{"class":264},[220,70534,35995],{"class":230},[220,70536,70537],{"class":222,"line":399},[220,70538,1234],{"class":264},[220,70540,70541,70543,70545],{"class":222,"line":644},[220,70542,402],{"class":264},[220,70544,347],{"class":346},[220,70546,359],{"class":264},[212,70548,70550],{"className":409,"code":70549,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70551,70552,70560,70566,70578,70582],{"__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,70526],{"class":420},[220,70567,70568,70570,70572,70574,70576],{"class":222,"line":389},[220,70569,19850],{"class":226},[220,70571,353],{"class":260},[220,70573,743],{"class":264},[220,70575,8043],{"class":420},[220,70577,749],{"class":264},[220,70579,70580],{"class":222,"line":399},[220,70581,1234],{"class":264},[220,70583,70584,70586,70588],{"class":222,"line":644},[220,70585,402],{"class":264},[220,70587,347],{"class":420},[220,70589,359],{"class":264},[212,70591,70592],{"className":2844,"code":70549,"language":2846,"meta":178,"style":178},[99,70593,70594,70602,70608,70618,70622],{"__ignoreMap":178},[220,70595,70596,70598,70600],{"class":222,"line":223},[220,70597,343],{"class":264},[220,70599,347],{"class":420},[220,70601,359],{"class":264},[220,70603,70604,70606],{"class":222,"line":179},[220,70605,364],{"class":264},[220,70607,70526],{"class":420},[220,70609,70610,70612,70614,70616],{"class":222,"line":389},[220,70611,19850],{"class":226},[220,70613,29241],{"class":264},[220,70615,8043],{"class":420},[220,70617,749],{"class":264},[220,70619,70620],{"class":222,"line":399},[220,70621,1234],{"class":264},[220,70623,70624,70626,70628],{"class":222,"line":644},[220,70625,402],{"class":264},[220,70627,347],{"class":420},[220,70629,359],{"class":264},[212,70631,70632],{"className":468,"code":70549,"language":469,"meta":178,"style":178},[99,70633,70634,70642,70648,70660,70664],{"__ignoreMap":178},[220,70635,70636,70638,70640],{"class":222,"line":223},[220,70637,343],{"class":264},[220,70639,347],{"class":420},[220,70641,359],{"class":264},[220,70643,70644,70646],{"class":222,"line":179},[220,70645,364],{"class":264},[220,70647,70526],{"class":420},[220,70649,70650,70652,70654,70656,70658],{"class":222,"line":389},[220,70651,19850],{"class":226},[220,70653,353],{"class":260},[220,70655,743],{"class":264},[220,70657,8043],{"class":420},[220,70659,749],{"class":264},[220,70661,70662],{"class":222,"line":399},[220,70663,1234],{"class":264},[220,70665,70666,70668,70670],{"class":222,"line":644},[220,70667,402],{"class":264},[220,70669,347],{"class":420},[220,70671,359],{"class":264},[212,70673,70675],{"className":251,"code":70674,"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,70676,70677,70687,70691,70705,70709,70722,70726],{"__ignoreMap":178},[220,70678,70679,70681,70683,70685],{"class":222,"line":223},[220,70680,261],{"class":260},[220,70682,10879],{"class":264},[220,70684,268],{"class":260},[220,70686,4007],{"class":230},[220,70688,70689],{"class":222,"line":179},[220,70690,647],{"emptyLinePlaceholder":194},[220,70692,70693,70695,70697,70699,70701,70703],{"class":222,"line":389},[220,70694,1735],{"class":260},[220,70696,1738],{"class":420},[220,70698,1741],{"class":260},[220,70700,1744],{"class":260},[220,70702,1747],{"class":226},[220,70704,1750],{"class":264},[220,70706,70707],{"class":222,"line":399},[220,70708,1765],{"class":264},[220,70710,70711,70713,70716,70718,70720],{"class":222,"line":644},[220,70712,1770],{"class":264},[220,70714,70715],{"class":230},"'SmokeFlow'",[220,70717,31573],{"class":264},[220,70719,8043],{"class":420},[220,70721,1782],{"class":264},[220,70723,70724],{"class":222,"line":650},[220,70725,1787],{"class":264},[220,70727,70728],{"class":222,"line":656},[220,70729,1792],{"class":264},[1504,70731,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70733},[70734,70735],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":70487,"description":70495},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":70742,"title":70743,"body":70744,"category":35738,"componentType":25253,"description":70751,"extension":191,"meta":71012,"navigation":194,"path":71013,"requiresChild":194,"seo":71014,"stem":71015,"__hash__":71016},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":70745,"toc":71008},[70746,70749,70752,70754,70756,70759,70761,71006],[11,70747,70743],{"id":70748},"solarize",[15,70750,70751],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31281,70753],{"component":70743},[23,70755,31285],{"id":25903},[31287,70757],{":props":70758},"[{\"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,70760,31293],{"id":31292},[246,70762,70763,70808,70852,70896,70940],{":tabs":1557},[212,70764,70766],{"className":334,"code":70765,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,70767,70768,70776,70784,70792,70800],{"__ignoreMap":178},[220,70769,70770,70772,70774],{"class":222,"line":223},[220,70771,343],{"class":264},[220,70773,347],{"class":346},[220,70775,359],{"class":264},[220,70777,70778,70780,70782],{"class":222,"line":179},[220,70779,364],{"class":264},[220,70781,70743],{"class":346},[220,70783,359],{"class":264},[220,70785,70786,70788,70790],{"class":222,"line":389},[220,70787,2550],{"class":264},[220,70789,2553],{"class":346},[220,70791,386],{"class":264},[220,70793,70794,70796,70798],{"class":222,"line":399},[220,70795,2567],{"class":264},[220,70797,70743],{"class":346},[220,70799,359],{"class":264},[220,70801,70802,70804,70806],{"class":222,"line":644},[220,70803,402],{"class":264},[220,70805,347],{"class":346},[220,70807,359],{"class":264},[212,70809,70810],{"className":409,"code":70765,"language":411,"meta":178,"style":178},[99,70811,70812,70820,70828,70836,70844],{"__ignoreMap":178},[220,70813,70814,70816,70818],{"class":222,"line":223},[220,70815,343],{"class":264},[220,70817,347],{"class":420},[220,70819,359],{"class":264},[220,70821,70822,70824,70826],{"class":222,"line":179},[220,70823,364],{"class":264},[220,70825,70743],{"class":420},[220,70827,359],{"class":264},[220,70829,70830,70832,70834],{"class":222,"line":389},[220,70831,2550],{"class":264},[220,70833,2553],{"class":420},[220,70835,386],{"class":264},[220,70837,70838,70840,70842],{"class":222,"line":399},[220,70839,2567],{"class":264},[220,70841,70743],{"class":420},[220,70843,359],{"class":264},[220,70845,70846,70848,70850],{"class":222,"line":644},[220,70847,402],{"class":264},[220,70849,347],{"class":420},[220,70851,359],{"class":264},[212,70853,70854],{"className":2844,"code":70765,"language":2846,"meta":178,"style":178},[99,70855,70856,70864,70872,70880,70888],{"__ignoreMap":178},[220,70857,70858,70860,70862],{"class":222,"line":223},[220,70859,343],{"class":264},[220,70861,347],{"class":420},[220,70863,359],{"class":264},[220,70865,70866,70868,70870],{"class":222,"line":179},[220,70867,364],{"class":264},[220,70869,70743],{"class":420},[220,70871,359],{"class":264},[220,70873,70874,70876,70878],{"class":222,"line":389},[220,70875,2550],{"class":264},[220,70877,2553],{"class":420},[220,70879,386],{"class":264},[220,70881,70882,70884,70886],{"class":222,"line":399},[220,70883,2567],{"class":264},[220,70885,70743],{"class":420},[220,70887,359],{"class":264},[220,70889,70890,70892,70894],{"class":222,"line":644},[220,70891,402],{"class":264},[220,70893,347],{"class":420},[220,70895,359],{"class":264},[212,70897,70898],{"className":468,"code":70765,"language":469,"meta":178,"style":178},[99,70899,70900,70908,70916,70924,70932],{"__ignoreMap":178},[220,70901,70902,70904,70906],{"class":222,"line":223},[220,70903,343],{"class":264},[220,70905,347],{"class":420},[220,70907,359],{"class":264},[220,70909,70910,70912,70914],{"class":222,"line":179},[220,70911,364],{"class":264},[220,70913,70743],{"class":420},[220,70915,359],{"class":264},[220,70917,70918,70920,70922],{"class":222,"line":389},[220,70919,2550],{"class":264},[220,70921,2553],{"class":420},[220,70923,386],{"class":264},[220,70925,70926,70928,70930],{"class":222,"line":399},[220,70927,2567],{"class":264},[220,70929,70743],{"class":420},[220,70931,359],{"class":264},[220,70933,70934,70936,70938],{"class":222,"line":644},[220,70935,402],{"class":264},[220,70937,347],{"class":420},[220,70939,359],{"class":264},[212,70941,70943],{"className":251,"code":70942,"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,70944,70945,70955,70959,70973,70977,70986,70994,70998,71002],{"__ignoreMap":178},[220,70946,70947,70949,70951,70953],{"class":222,"line":223},[220,70948,261],{"class":260},[220,70950,10879],{"class":264},[220,70952,268],{"class":260},[220,70954,4007],{"class":230},[220,70956,70957],{"class":222,"line":179},[220,70958,647],{"emptyLinePlaceholder":194},[220,70960,70961,70963,70965,70967,70969,70971],{"class":222,"line":389},[220,70962,1735],{"class":260},[220,70964,1738],{"class":420},[220,70966,1741],{"class":260},[220,70968,1744],{"class":260},[220,70970,1747],{"class":226},[220,70972,1750],{"class":264},[220,70974,70975],{"class":222,"line":399},[220,70976,1765],{"class":264},[220,70978,70979,70981,70984],{"class":222,"line":644},[220,70980,1770],{"class":264},[220,70982,70983],{"class":230},"'Solarize'",[220,70985,6375],{"class":264},[220,70987,70988,70990,70992],{"class":222,"line":650},[220,70989,6380],{"class":264},[220,70991,3206],{"class":230},[220,70993,2465],{"class":264},[220,70995,70996],{"class":222,"line":656},[220,70997,6397],{"class":264},[220,70999,71000],{"class":222,"line":673},[220,71001,1787],{"class":264},[220,71003,71004],{"class":222,"line":682},[220,71005,1792],{"class":264},[1504,71007,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":71009},[71010,71011],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":70743,"description":70751},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":71018,"title":1585,"body":71019,"category":32433,"componentType":25247,"description":71026,"extension":191,"meta":71256,"navigation":194,"path":71257,"requiresChild":31900,"seo":71258,"stem":71259,"__hash__":71260},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":71020,"toc":71252},[71021,71024,71027,71029,71031,71034,71036,71250],[11,71022,1585],{"id":71023},"solidcolor",[15,71025,71026],{},"Fill the canvas with a single solid color",[31281,71028],{"component":1585},[23,71030,31285],{"id":25903},[31287,71032],{":props":71033},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,71035,31293],{"id":31292},[246,71037,71038,71079,71117,71155,71193],{":tabs":1557},[212,71039,71041],{"className":334,"code":71040,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,71042,71043,71051,71058,71067,71071],{"__ignoreMap":178},[220,71044,71045,71047,71049],{"class":222,"line":223},[220,71046,343],{"class":264},[220,71048,347],{"class":346},[220,71050,359],{"class":264},[220,71052,71053,71055],{"class":222,"line":179},[220,71054,364],{"class":264},[220,71056,71057],{"class":346},"SolidColor\n",[220,71059,71060,71062,71064],{"class":222,"line":389},[220,71061,9002],{"class":226},[220,71063,353],{"class":264},[220,71065,71066],{"class":230},"\"#5b18ca\"\n",[220,71068,71069],{"class":222,"line":399},[220,71070,1234],{"class":264},[220,71072,71073,71075,71077],{"class":222,"line":644},[220,71074,402],{"class":264},[220,71076,347],{"class":346},[220,71078,359],{"class":264},[212,71080,71081],{"className":409,"code":71040,"language":411,"meta":178,"style":178},[99,71082,71083,71091,71097,71105,71109],{"__ignoreMap":178},[220,71084,71085,71087,71089],{"class":222,"line":223},[220,71086,343],{"class":264},[220,71088,347],{"class":420},[220,71090,359],{"class":264},[220,71092,71093,71095],{"class":222,"line":179},[220,71094,364],{"class":264},[220,71096,71057],{"class":420},[220,71098,71099,71101,71103],{"class":222,"line":389},[220,71100,9002],{"class":226},[220,71102,353],{"class":260},[220,71104,71066],{"class":230},[220,71106,71107],{"class":222,"line":399},[220,71108,1234],{"class":264},[220,71110,71111,71113,71115],{"class":222,"line":644},[220,71112,402],{"class":264},[220,71114,347],{"class":420},[220,71116,359],{"class":264},[212,71118,71119],{"className":2844,"code":71040,"language":2846,"meta":178,"style":178},[99,71120,71121,71129,71135,71143,71147],{"__ignoreMap":178},[220,71122,71123,71125,71127],{"class":222,"line":223},[220,71124,343],{"class":264},[220,71126,347],{"class":420},[220,71128,359],{"class":264},[220,71130,71131,71133],{"class":222,"line":179},[220,71132,364],{"class":264},[220,71134,71057],{"class":420},[220,71136,71137,71139,71141],{"class":222,"line":389},[220,71138,9002],{"class":226},[220,71140,353],{"class":264},[220,71142,71066],{"class":230},[220,71144,71145],{"class":222,"line":399},[220,71146,1234],{"class":264},[220,71148,71149,71151,71153],{"class":222,"line":644},[220,71150,402],{"class":264},[220,71152,347],{"class":420},[220,71154,359],{"class":264},[212,71156,71157],{"className":468,"code":71040,"language":469,"meta":178,"style":178},[99,71158,71159,71167,71173,71181,71185],{"__ignoreMap":178},[220,71160,71161,71163,71165],{"class":222,"line":223},[220,71162,343],{"class":264},[220,71164,347],{"class":420},[220,71166,359],{"class":264},[220,71168,71169,71171],{"class":222,"line":179},[220,71170,364],{"class":264},[220,71172,71057],{"class":420},[220,71174,71175,71177,71179],{"class":222,"line":389},[220,71176,9002],{"class":226},[220,71178,353],{"class":260},[220,71180,71066],{"class":230},[220,71182,71183],{"class":222,"line":399},[220,71184,1234],{"class":264},[220,71186,71187,71189,71191],{"class":222,"line":644},[220,71188,402],{"class":264},[220,71190,347],{"class":420},[220,71192,359],{"class":264},[212,71194,71196],{"className":251,"code":71195,"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,71197,71198,71208,71212,71226,71230,71242,71246],{"__ignoreMap":178},[220,71199,71200,71202,71204,71206],{"class":222,"line":223},[220,71201,261],{"class":260},[220,71203,10879],{"class":264},[220,71205,268],{"class":260},[220,71207,4007],{"class":230},[220,71209,71210],{"class":222,"line":179},[220,71211,647],{"emptyLinePlaceholder":194},[220,71213,71214,71216,71218,71220,71222,71224],{"class":222,"line":389},[220,71215,1735],{"class":260},[220,71217,1738],{"class":420},[220,71219,1741],{"class":260},[220,71221,1744],{"class":260},[220,71223,1747],{"class":226},[220,71225,1750],{"class":264},[220,71227,71228],{"class":222,"line":399},[220,71229,1765],{"class":264},[220,71231,71232,71234,71236,71238,71240],{"class":222,"line":644},[220,71233,1770],{"class":264},[220,71235,1773],{"class":230},[220,71237,1776],{"class":264},[220,71239,1779],{"class":230},[220,71241,1782],{"class":264},[220,71243,71244],{"class":222,"line":650},[220,71245,1787],{"class":264},[220,71247,71248],{"class":222,"line":656},[220,71249,1792],{"class":264},[1504,71251,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71253},[71254,71255],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":71026},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":71262,"title":71263,"body":71264,"category":32766,"componentType":25253,"description":71271,"extension":191,"meta":71588,"navigation":194,"path":71589,"requiresChild":194,"seo":71590,"stem":71591,"__hash__":71592},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":71265,"toc":71584},[71266,71269,71272,71274,71276,71279,71281,71582],[11,71267,71263],{"id":71268},"spherize",[15,71270,71271],{},"Map content onto a 3D sphere surface with depth distortion",[31281,71273],{"component":71263},[23,71275,31285],{"id":25903},[31287,71277],{":props":71278},"[{\"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,71280,31293],{"id":31292},[246,71282,71283,71339,71398,71454,71512],{":tabs":1557},[212,71284,71286],{"className":334,"code":71285,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71287,71288,71296,71303,71311,71315,71323,71331],{"__ignoreMap":178},[220,71289,71290,71292,71294],{"class":222,"line":223},[220,71291,343],{"class":264},[220,71293,347],{"class":346},[220,71295,359],{"class":264},[220,71297,71298,71300],{"class":222,"line":179},[220,71299,364],{"class":264},[220,71301,71302],{"class":346},"Spherize\n",[220,71304,71305,71307,71309],{"class":222,"line":389},[220,71306,16772],{"class":226},[220,71308,353],{"class":264},[220,71310,35995],{"class":230},[220,71312,71313],{"class":222,"line":399},[220,71314,31329],{"class":264},[220,71316,71317,71319,71321],{"class":222,"line":644},[220,71318,2550],{"class":264},[220,71320,2553],{"class":346},[220,71322,386],{"class":264},[220,71324,71325,71327,71329],{"class":222,"line":650},[220,71326,2567],{"class":264},[220,71328,71263],{"class":346},[220,71330,359],{"class":264},[220,71332,71333,71335,71337],{"class":222,"line":656},[220,71334,402],{"class":264},[220,71336,347],{"class":346},[220,71338,359],{"class":264},[212,71340,71342],{"className":409,"code":71341,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71343,71344,71352,71358,71370,71374,71382,71390],{"__ignoreMap":178},[220,71345,71346,71348,71350],{"class":222,"line":223},[220,71347,343],{"class":264},[220,71349,347],{"class":420},[220,71351,359],{"class":264},[220,71353,71354,71356],{"class":222,"line":179},[220,71355,364],{"class":264},[220,71357,71302],{"class":420},[220,71359,71360,71362,71364,71366,71368],{"class":222,"line":389},[220,71361,9012],{"class":226},[220,71363,353],{"class":260},[220,71365,743],{"class":264},[220,71367,8043],{"class":420},[220,71369,749],{"class":264},[220,71371,71372],{"class":222,"line":399},[220,71373,31329],{"class":264},[220,71375,71376,71378,71380],{"class":222,"line":644},[220,71377,2550],{"class":264},[220,71379,2553],{"class":420},[220,71381,386],{"class":264},[220,71383,71384,71386,71388],{"class":222,"line":650},[220,71385,2567],{"class":264},[220,71387,71263],{"class":420},[220,71389,359],{"class":264},[220,71391,71392,71394,71396],{"class":222,"line":656},[220,71393,402],{"class":264},[220,71395,347],{"class":420},[220,71397,359],{"class":264},[212,71399,71400],{"className":2844,"code":71341,"language":2846,"meta":178,"style":178},[99,71401,71402,71410,71416,71426,71430,71438,71446],{"__ignoreMap":178},[220,71403,71404,71406,71408],{"class":222,"line":223},[220,71405,343],{"class":264},[220,71407,347],{"class":420},[220,71409,359],{"class":264},[220,71411,71412,71414],{"class":222,"line":179},[220,71413,364],{"class":264},[220,71415,71302],{"class":420},[220,71417,71418,71420,71422,71424],{"class":222,"line":389},[220,71419,9012],{"class":226},[220,71421,29241],{"class":264},[220,71423,8043],{"class":420},[220,71425,749],{"class":264},[220,71427,71428],{"class":222,"line":399},[220,71429,31329],{"class":264},[220,71431,71432,71434,71436],{"class":222,"line":644},[220,71433,2550],{"class":264},[220,71435,2553],{"class":420},[220,71437,386],{"class":264},[220,71439,71440,71442,71444],{"class":222,"line":650},[220,71441,2567],{"class":264},[220,71443,71263],{"class":420},[220,71445,359],{"class":264},[220,71447,71448,71450,71452],{"class":222,"line":656},[220,71449,402],{"class":264},[220,71451,347],{"class":420},[220,71453,359],{"class":264},[212,71455,71456],{"className":468,"code":71341,"language":469,"meta":178,"style":178},[99,71457,71458,71466,71472,71484,71488,71496,71504],{"__ignoreMap":178},[220,71459,71460,71462,71464],{"class":222,"line":223},[220,71461,343],{"class":264},[220,71463,347],{"class":420},[220,71465,359],{"class":264},[220,71467,71468,71470],{"class":222,"line":179},[220,71469,364],{"class":264},[220,71471,71302],{"class":420},[220,71473,71474,71476,71478,71480,71482],{"class":222,"line":389},[220,71475,9012],{"class":226},[220,71477,353],{"class":260},[220,71479,743],{"class":264},[220,71481,8043],{"class":420},[220,71483,749],{"class":264},[220,71485,71486],{"class":222,"line":399},[220,71487,31329],{"class":264},[220,71489,71490,71492,71494],{"class":222,"line":644},[220,71491,2550],{"class":264},[220,71493,2553],{"class":420},[220,71495,386],{"class":264},[220,71497,71498,71500,71502],{"class":222,"line":650},[220,71499,2567],{"class":264},[220,71501,71263],{"class":420},[220,71503,359],{"class":264},[220,71505,71506,71508,71510],{"class":222,"line":656},[220,71507,402],{"class":264},[220,71509,347],{"class":420},[220,71511,359],{"class":264},[212,71513,71515],{"className":251,"code":71514,"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,71516,71517,71527,71531,71545,71549,71562,71570,71574,71578],{"__ignoreMap":178},[220,71518,71519,71521,71523,71525],{"class":222,"line":223},[220,71520,261],{"class":260},[220,71522,10879],{"class":264},[220,71524,268],{"class":260},[220,71526,4007],{"class":230},[220,71528,71529],{"class":222,"line":179},[220,71530,647],{"emptyLinePlaceholder":194},[220,71532,71533,71535,71537,71539,71541,71543],{"class":222,"line":389},[220,71534,1735],{"class":260},[220,71536,1738],{"class":420},[220,71538,1741],{"class":260},[220,71540,1744],{"class":260},[220,71542,1747],{"class":226},[220,71544,1750],{"class":264},[220,71546,71547],{"class":222,"line":399},[220,71548,1765],{"class":264},[220,71550,71551,71553,71556,71558,71560],{"class":222,"line":644},[220,71552,1770],{"class":264},[220,71554,71555],{"class":230},"'Spherize'",[220,71557,6907],{"class":264},[220,71559,8043],{"class":420},[220,71561,6912],{"class":264},[220,71563,71564,71566,71568],{"class":222,"line":650},[220,71565,6380],{"class":264},[220,71567,3206],{"class":230},[220,71569,2465],{"class":264},[220,71571,71572],{"class":222,"line":656},[220,71573,6397],{"class":264},[220,71575,71576],{"class":222,"line":673},[220,71577,1787],{"class":264},[220,71579,71580],{"class":222,"line":682},[220,71581,1792],{"class":264},[1504,71583,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71585},[71586,71587],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":71263,"description":71271},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":71594,"title":71595,"body":71596,"category":32433,"componentType":25247,"description":71603,"extension":191,"meta":71788,"navigation":194,"path":71789,"requiresChild":31900,"seo":71790,"stem":71791,"__hash__":71792},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":71597,"toc":71784},[71598,71601,71604,71606,71608,71611,71613,71782],[11,71599,71595],{"id":71600},"spiral",[15,71602,71603],{},"Rotating spiral pattern with animated movement",[31281,71605],{"component":71595},[23,71607,31285],{"id":25903},[31287,71609],{":props":71610},"[{\"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,71612,31293],{"id":31292},[246,71614,71615,71644,71672,71700,71728],{":tabs":1557},[212,71616,71618],{"className":334,"code":71617,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,71619,71620,71628,71636],{"__ignoreMap":178},[220,71621,71622,71624,71626],{"class":222,"line":223},[220,71623,343],{"class":264},[220,71625,347],{"class":346},[220,71627,359],{"class":264},[220,71629,71630,71632,71634],{"class":222,"line":179},[220,71631,364],{"class":264},[220,71633,71595],{"class":346},[220,71635,386],{"class":264},[220,71637,71638,71640,71642],{"class":222,"line":389},[220,71639,402],{"class":264},[220,71641,347],{"class":346},[220,71643,359],{"class":264},[212,71645,71646],{"className":409,"code":71617,"language":411,"meta":178,"style":178},[99,71647,71648,71656,71664],{"__ignoreMap":178},[220,71649,71650,71652,71654],{"class":222,"line":223},[220,71651,343],{"class":264},[220,71653,347],{"class":420},[220,71655,359],{"class":264},[220,71657,71658,71660,71662],{"class":222,"line":179},[220,71659,364],{"class":264},[220,71661,71595],{"class":420},[220,71663,386],{"class":264},[220,71665,71666,71668,71670],{"class":222,"line":389},[220,71667,402],{"class":264},[220,71669,347],{"class":420},[220,71671,359],{"class":264},[212,71673,71674],{"className":2844,"code":71617,"language":2846,"meta":178,"style":178},[99,71675,71676,71684,71692],{"__ignoreMap":178},[220,71677,71678,71680,71682],{"class":222,"line":223},[220,71679,343],{"class":264},[220,71681,347],{"class":420},[220,71683,359],{"class":264},[220,71685,71686,71688,71690],{"class":222,"line":179},[220,71687,364],{"class":264},[220,71689,71595],{"class":420},[220,71691,386],{"class":264},[220,71693,71694,71696,71698],{"class":222,"line":389},[220,71695,402],{"class":264},[220,71697,347],{"class":420},[220,71699,359],{"class":264},[212,71701,71702],{"className":468,"code":71617,"language":469,"meta":178,"style":178},[99,71703,71704,71712,71720],{"__ignoreMap":178},[220,71705,71706,71708,71710],{"class":222,"line":223},[220,71707,343],{"class":264},[220,71709,347],{"class":420},[220,71711,359],{"class":264},[220,71713,71714,71716,71718],{"class":222,"line":179},[220,71715,364],{"class":264},[220,71717,71595],{"class":420},[220,71719,386],{"class":264},[220,71721,71722,71724,71726],{"class":222,"line":389},[220,71723,402],{"class":264},[220,71725,347],{"class":420},[220,71727,359],{"class":264},[212,71729,71731],{"className":251,"code":71730,"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,71732,71733,71743,71747,71761,71765,71774,71778],{"__ignoreMap":178},[220,71734,71735,71737,71739,71741],{"class":222,"line":223},[220,71736,261],{"class":260},[220,71738,10879],{"class":264},[220,71740,268],{"class":260},[220,71742,4007],{"class":230},[220,71744,71745],{"class":222,"line":179},[220,71746,647],{"emptyLinePlaceholder":194},[220,71748,71749,71751,71753,71755,71757,71759],{"class":222,"line":389},[220,71750,1735],{"class":260},[220,71752,1738],{"class":420},[220,71754,1741],{"class":260},[220,71756,1744],{"class":260},[220,71758,1747],{"class":226},[220,71760,1750],{"class":264},[220,71762,71763],{"class":222,"line":399},[220,71764,1765],{"class":264},[220,71766,71767,71769,71772],{"class":222,"line":644},[220,71768,1770],{"class":264},[220,71770,71771],{"class":230},"'Spiral'",[220,71773,2465],{"class":264},[220,71775,71776],{"class":222,"line":650},[220,71777,1787],{"class":264},[220,71779,71780],{"class":222,"line":656},[220,71781,1792],{"class":264},[1504,71783,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":71785},[71786,71787],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":71595,"description":71603},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":71794,"title":71795,"body":71796,"category":15275,"componentType":25247,"description":71803,"extension":191,"meta":72080,"navigation":194,"path":72081,"requiresChild":31900,"seo":72082,"stem":72083,"__hash__":72084},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":71797,"toc":72076},[71798,71801,71804,71806,71808,71811,71813,72074],[11,71799,71795],{"id":71800},"star",[15,71802,71803],{},"Classic star polygon with straight sides and sharp pointed tips",[31281,71805],{"component":71795},[23,71807,31285],{"id":25903},[31287,71809],{":props":71810},"[{\"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,71812,31293],{"id":31292},[246,71814,71815,71863,71914,71962,72012],{":tabs":1557},[212,71816,71818],{"className":334,"code":71817,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,71819,71820,71828,71835,71843,71851,71855],{"__ignoreMap":178},[220,71821,71822,71824,71826],{"class":222,"line":223},[220,71823,343],{"class":264},[220,71825,347],{"class":346},[220,71827,359],{"class":264},[220,71829,71830,71832],{"class":222,"line":179},[220,71831,364],{"class":264},[220,71833,71834],{"class":346},"Star\n",[220,71836,71837,71839,71841],{"class":222,"line":389},[220,71838,9002],{"class":226},[220,71840,353],{"class":264},[220,71842,8958],{"class":230},[220,71844,71845,71847,71849],{"class":222,"line":399},[220,71846,16772],{"class":226},[220,71848,353],{"class":264},[220,71850,47518],{"class":230},[220,71852,71853],{"class":222,"line":644},[220,71854,1234],{"class":264},[220,71856,71857,71859,71861],{"class":222,"line":650},[220,71858,402],{"class":264},[220,71860,347],{"class":346},[220,71862,359],{"class":264},[212,71864,71866],{"className":409,"code":71865,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,71867,71868,71876,71882,71890,71902,71906],{"__ignoreMap":178},[220,71869,71870,71872,71874],{"class":222,"line":223},[220,71871,343],{"class":264},[220,71873,347],{"class":420},[220,71875,359],{"class":264},[220,71877,71878,71880],{"class":222,"line":179},[220,71879,364],{"class":264},[220,71881,71834],{"class":420},[220,71883,71884,71886,71888],{"class":222,"line":389},[220,71885,9002],{"class":226},[220,71887,353],{"class":260},[220,71889,8958],{"class":230},[220,71891,71892,71894,71896,71898,71900],{"class":222,"line":399},[220,71893,9012],{"class":226},[220,71895,353],{"class":260},[220,71897,743],{"class":264},[220,71899,7615],{"class":420},[220,71901,749],{"class":264},[220,71903,71904],{"class":222,"line":644},[220,71905,1234],{"class":264},[220,71907,71908,71910,71912],{"class":222,"line":650},[220,71909,402],{"class":264},[220,71911,347],{"class":420},[220,71913,359],{"class":264},[212,71915,71916],{"className":2844,"code":71865,"language":2846,"meta":178,"style":178},[99,71917,71918,71926,71932,71940,71950,71954],{"__ignoreMap":178},[220,71919,71920,71922,71924],{"class":222,"line":223},[220,71921,343],{"class":264},[220,71923,347],{"class":420},[220,71925,359],{"class":264},[220,71927,71928,71930],{"class":222,"line":179},[220,71929,364],{"class":264},[220,71931,71834],{"class":420},[220,71933,71934,71936,71938],{"class":222,"line":389},[220,71935,9002],{"class":226},[220,71937,353],{"class":264},[220,71939,8958],{"class":230},[220,71941,71942,71944,71946,71948],{"class":222,"line":399},[220,71943,9012],{"class":226},[220,71945,29241],{"class":264},[220,71947,7615],{"class":420},[220,71949,749],{"class":264},[220,71951,71952],{"class":222,"line":644},[220,71953,1234],{"class":264},[220,71955,71956,71958,71960],{"class":222,"line":650},[220,71957,402],{"class":264},[220,71959,347],{"class":420},[220,71961,359],{"class":264},[212,71963,71964],{"className":468,"code":71865,"language":469,"meta":178,"style":178},[99,71965,71966,71974,71980,71988,72000,72004],{"__ignoreMap":178},[220,71967,71968,71970,71972],{"class":222,"line":223},[220,71969,343],{"class":264},[220,71971,347],{"class":420},[220,71973,359],{"class":264},[220,71975,71976,71978],{"class":222,"line":179},[220,71977,364],{"class":264},[220,71979,71834],{"class":420},[220,71981,71982,71984,71986],{"class":222,"line":389},[220,71983,9002],{"class":226},[220,71985,353],{"class":260},[220,71987,8958],{"class":230},[220,71989,71990,71992,71994,71996,71998],{"class":222,"line":399},[220,71991,9012],{"class":226},[220,71993,353],{"class":260},[220,71995,743],{"class":264},[220,71997,7615],{"class":420},[220,71999,749],{"class":264},[220,72001,72002],{"class":222,"line":644},[220,72003,1234],{"class":264},[220,72005,72006,72008,72010],{"class":222,"line":650},[220,72007,402],{"class":264},[220,72009,347],{"class":420},[220,72011,359],{"class":264},[212,72013,72015],{"className":251,"code":72014,"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,72016,72017,72027,72031,72045,72049,72066,72070],{"__ignoreMap":178},[220,72018,72019,72021,72023,72025],{"class":222,"line":223},[220,72020,261],{"class":260},[220,72022,10879],{"class":264},[220,72024,268],{"class":260},[220,72026,4007],{"class":230},[220,72028,72029],{"class":222,"line":179},[220,72030,647],{"emptyLinePlaceholder":194},[220,72032,72033,72035,72037,72039,72041,72043],{"class":222,"line":389},[220,72034,1735],{"class":260},[220,72036,1738],{"class":420},[220,72038,1741],{"class":260},[220,72040,1744],{"class":260},[220,72042,1747],{"class":226},[220,72044,1750],{"class":264},[220,72046,72047],{"class":222,"line":399},[220,72048,1765],{"class":264},[220,72050,72051,72053,72056,72058,72060,72062,72064],{"class":222,"line":644},[220,72052,1770],{"class":264},[220,72054,72055],{"class":230},"'Star'",[220,72057,1776],{"class":264},[220,72059,9536],{"class":230},[220,72061,5932],{"class":264},[220,72063,7615],{"class":420},[220,72065,1782],{"class":264},[220,72067,72068],{"class":222,"line":650},[220,72069,1787],{"class":264},[220,72071,72072],{"class":222,"line":656},[220,72073,1792],{"class":264},[1504,72075,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72077},[72078,72079],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":71795,"description":71803},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":72086,"title":72087,"body":72088,"category":32176,"componentType":25253,"description":72095,"extension":191,"meta":72412,"navigation":194,"path":72413,"requiresChild":194,"seo":72414,"stem":72415,"__hash__":72416},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":72089,"toc":72408},[72090,72093,72096,72098,72100,72103,72105,72406],[11,72091,72087],{"id":72092},"stone",[15,72094,72095],{},"Applies a marbled stone relief and surface distortion to child content",[31281,72097],{"component":72087},[23,72099,31285],{"id":25903},[31287,72101],{":props":72102},"[{\"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,72104,31293],{"id":31292},[246,72106,72107,72163,72222,72278,72336],{":tabs":1557},[212,72108,72110],{"className":334,"code":72109,"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,72111,72112,72120,72127,72135,72139,72147,72155],{"__ignoreMap":178},[220,72113,72114,72116,72118],{"class":222,"line":223},[220,72115,343],{"class":264},[220,72117,347],{"class":346},[220,72119,359],{"class":264},[220,72121,72122,72124],{"class":222,"line":179},[220,72123,364],{"class":264},[220,72125,72126],{"class":346},"Stone\n",[220,72128,72129,72131,72133],{"class":222,"line":389},[220,72130,19739],{"class":226},[220,72132,353],{"class":264},[220,72134,41528],{"class":230},[220,72136,72137],{"class":222,"line":399},[220,72138,31329],{"class":264},[220,72140,72141,72143,72145],{"class":222,"line":644},[220,72142,2550],{"class":264},[220,72144,2553],{"class":346},[220,72146,386],{"class":264},[220,72148,72149,72151,72153],{"class":222,"line":650},[220,72150,2567],{"class":264},[220,72152,72087],{"class":346},[220,72154,359],{"class":264},[220,72156,72157,72159,72161],{"class":222,"line":656},[220,72158,402],{"class":264},[220,72160,347],{"class":346},[220,72162,359],{"class":264},[212,72164,72166],{"className":409,"code":72165,"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,72167,72168,72176,72182,72194,72198,72206,72214],{"__ignoreMap":178},[220,72169,72170,72172,72174],{"class":222,"line":223},[220,72171,343],{"class":264},[220,72173,347],{"class":420},[220,72175,359],{"class":264},[220,72177,72178,72180],{"class":222,"line":179},[220,72179,364],{"class":264},[220,72181,72126],{"class":420},[220,72183,72184,72186,72188,72190,72192],{"class":222,"line":389},[220,72185,19850],{"class":226},[220,72187,353],{"class":260},[220,72189,743],{"class":264},[220,72191,7120],{"class":420},[220,72193,749],{"class":264},[220,72195,72196],{"class":222,"line":399},[220,72197,31329],{"class":264},[220,72199,72200,72202,72204],{"class":222,"line":644},[220,72201,2550],{"class":264},[220,72203,2553],{"class":420},[220,72205,386],{"class":264},[220,72207,72208,72210,72212],{"class":222,"line":650},[220,72209,2567],{"class":264},[220,72211,72087],{"class":420},[220,72213,359],{"class":264},[220,72215,72216,72218,72220],{"class":222,"line":656},[220,72217,402],{"class":264},[220,72219,347],{"class":420},[220,72221,359],{"class":264},[212,72223,72224],{"className":2844,"code":72165,"language":2846,"meta":178,"style":178},[99,72225,72226,72234,72240,72250,72254,72262,72270],{"__ignoreMap":178},[220,72227,72228,72230,72232],{"class":222,"line":223},[220,72229,343],{"class":264},[220,72231,347],{"class":420},[220,72233,359],{"class":264},[220,72235,72236,72238],{"class":222,"line":179},[220,72237,364],{"class":264},[220,72239,72126],{"class":420},[220,72241,72242,72244,72246,72248],{"class":222,"line":389},[220,72243,19850],{"class":226},[220,72245,29241],{"class":264},[220,72247,7120],{"class":420},[220,72249,749],{"class":264},[220,72251,72252],{"class":222,"line":399},[220,72253,31329],{"class":264},[220,72255,72256,72258,72260],{"class":222,"line":644},[220,72257,2550],{"class":264},[220,72259,2553],{"class":420},[220,72261,386],{"class":264},[220,72263,72264,72266,72268],{"class":222,"line":650},[220,72265,2567],{"class":264},[220,72267,72087],{"class":420},[220,72269,359],{"class":264},[220,72271,72272,72274,72276],{"class":222,"line":656},[220,72273,402],{"class":264},[220,72275,347],{"class":420},[220,72277,359],{"class":264},[212,72279,72280],{"className":468,"code":72165,"language":469,"meta":178,"style":178},[99,72281,72282,72290,72296,72308,72312,72320,72328],{"__ignoreMap":178},[220,72283,72284,72286,72288],{"class":222,"line":223},[220,72285,343],{"class":264},[220,72287,347],{"class":420},[220,72289,359],{"class":264},[220,72291,72292,72294],{"class":222,"line":179},[220,72293,364],{"class":264},[220,72295,72126],{"class":420},[220,72297,72298,72300,72302,72304,72306],{"class":222,"line":389},[220,72299,19850],{"class":226},[220,72301,353],{"class":260},[220,72303,743],{"class":264},[220,72305,7120],{"class":420},[220,72307,749],{"class":264},[220,72309,72310],{"class":222,"line":399},[220,72311,31329],{"class":264},[220,72313,72314,72316,72318],{"class":222,"line":644},[220,72315,2550],{"class":264},[220,72317,2553],{"class":420},[220,72319,386],{"class":264},[220,72321,72322,72324,72326],{"class":222,"line":650},[220,72323,2567],{"class":264},[220,72325,72087],{"class":420},[220,72327,359],{"class":264},[220,72329,72330,72332,72334],{"class":222,"line":656},[220,72331,402],{"class":264},[220,72333,347],{"class":420},[220,72335,359],{"class":264},[212,72337,72339],{"className":251,"code":72338,"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,72340,72341,72351,72355,72369,72373,72386,72394,72398,72402],{"__ignoreMap":178},[220,72342,72343,72345,72347,72349],{"class":222,"line":223},[220,72344,261],{"class":260},[220,72346,10879],{"class":264},[220,72348,268],{"class":260},[220,72350,4007],{"class":230},[220,72352,72353],{"class":222,"line":179},[220,72354,647],{"emptyLinePlaceholder":194},[220,72356,72357,72359,72361,72363,72365,72367],{"class":222,"line":389},[220,72358,1735],{"class":260},[220,72360,1738],{"class":420},[220,72362,1741],{"class":260},[220,72364,1744],{"class":260},[220,72366,1747],{"class":226},[220,72368,1750],{"class":264},[220,72370,72371],{"class":222,"line":399},[220,72372,1765],{"class":264},[220,72374,72375,72377,72380,72382,72384],{"class":222,"line":644},[220,72376,1770],{"class":264},[220,72378,72379],{"class":230},"'Stone'",[220,72381,31573],{"class":264},[220,72383,7120],{"class":420},[220,72385,6912],{"class":264},[220,72387,72388,72390,72392],{"class":222,"line":650},[220,72389,6380],{"class":264},[220,72391,3206],{"class":230},[220,72393,2465],{"class":264},[220,72395,72396],{"class":222,"line":656},[220,72397,6397],{"class":264},[220,72399,72400],{"class":222,"line":673},[220,72401,1787],{"class":264},[220,72403,72404],{"class":222,"line":682},[220,72405,1792],{"class":264},[1504,72407,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72409},[72410,72411],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":72087,"description":72095},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":72418,"title":72419,"body":72420,"category":32433,"componentType":25247,"description":72427,"extension":191,"meta":72612,"navigation":194,"path":72613,"requiresChild":31900,"seo":72614,"stem":72615,"__hash__":72616},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":72421,"toc":72608},[72422,72425,72428,72430,72432,72435,72437,72606],[11,72423,72419],{"id":72424},"strands",[15,72426,72427],{},"Flowing ribbons of light with a multi-color gradient",[31281,72429],{"component":72419},[23,72431,31285],{"id":25903},[31287,72433],{":props":72434},"[{\"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,72436,31293],{"id":31292},[246,72438,72439,72468,72496,72524,72552],{":tabs":1557},[212,72440,72442],{"className":334,"code":72441,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,72443,72444,72452,72460],{"__ignoreMap":178},[220,72445,72446,72448,72450],{"class":222,"line":223},[220,72447,343],{"class":264},[220,72449,347],{"class":346},[220,72451,359],{"class":264},[220,72453,72454,72456,72458],{"class":222,"line":179},[220,72455,364],{"class":264},[220,72457,72419],{"class":346},[220,72459,386],{"class":264},[220,72461,72462,72464,72466],{"class":222,"line":389},[220,72463,402],{"class":264},[220,72465,347],{"class":346},[220,72467,359],{"class":264},[212,72469,72470],{"className":409,"code":72441,"language":411,"meta":178,"style":178},[99,72471,72472,72480,72488],{"__ignoreMap":178},[220,72473,72474,72476,72478],{"class":222,"line":223},[220,72475,343],{"class":264},[220,72477,347],{"class":420},[220,72479,359],{"class":264},[220,72481,72482,72484,72486],{"class":222,"line":179},[220,72483,364],{"class":264},[220,72485,72419],{"class":420},[220,72487,386],{"class":264},[220,72489,72490,72492,72494],{"class":222,"line":389},[220,72491,402],{"class":264},[220,72493,347],{"class":420},[220,72495,359],{"class":264},[212,72497,72498],{"className":2844,"code":72441,"language":2846,"meta":178,"style":178},[99,72499,72500,72508,72516],{"__ignoreMap":178},[220,72501,72502,72504,72506],{"class":222,"line":223},[220,72503,343],{"class":264},[220,72505,347],{"class":420},[220,72507,359],{"class":264},[220,72509,72510,72512,72514],{"class":222,"line":179},[220,72511,364],{"class":264},[220,72513,72419],{"class":420},[220,72515,386],{"class":264},[220,72517,72518,72520,72522],{"class":222,"line":389},[220,72519,402],{"class":264},[220,72521,347],{"class":420},[220,72523,359],{"class":264},[212,72525,72526],{"className":468,"code":72441,"language":469,"meta":178,"style":178},[99,72527,72528,72536,72544],{"__ignoreMap":178},[220,72529,72530,72532,72534],{"class":222,"line":223},[220,72531,343],{"class":264},[220,72533,347],{"class":420},[220,72535,359],{"class":264},[220,72537,72538,72540,72542],{"class":222,"line":179},[220,72539,364],{"class":264},[220,72541,72419],{"class":420},[220,72543,386],{"class":264},[220,72545,72546,72548,72550],{"class":222,"line":389},[220,72547,402],{"class":264},[220,72549,347],{"class":420},[220,72551,359],{"class":264},[212,72553,72555],{"className":251,"code":72554,"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,72556,72557,72567,72571,72585,72589,72598,72602],{"__ignoreMap":178},[220,72558,72559,72561,72563,72565],{"class":222,"line":223},[220,72560,261],{"class":260},[220,72562,10879],{"class":264},[220,72564,268],{"class":260},[220,72566,4007],{"class":230},[220,72568,72569],{"class":222,"line":179},[220,72570,647],{"emptyLinePlaceholder":194},[220,72572,72573,72575,72577,72579,72581,72583],{"class":222,"line":389},[220,72574,1735],{"class":260},[220,72576,1738],{"class":420},[220,72578,1741],{"class":260},[220,72580,1744],{"class":260},[220,72582,1747],{"class":226},[220,72584,1750],{"class":264},[220,72586,72587],{"class":222,"line":399},[220,72588,1765],{"class":264},[220,72590,72591,72593,72596],{"class":222,"line":644},[220,72592,1770],{"class":264},[220,72594,72595],{"class":230},"'Strands'",[220,72597,2465],{"class":264},[220,72599,72600],{"class":222,"line":650},[220,72601,1787],{"class":264},[220,72603,72604],{"class":222,"line":656},[220,72605,1792],{"class":264},[1504,72607,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":72609},[72610,72611],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":72419,"description":72427},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":72618,"title":72619,"body":72620,"category":32766,"componentType":25253,"description":72627,"extension":191,"meta":72888,"navigation":194,"path":72889,"requiresChild":194,"seo":72890,"stem":72891,"__hash__":72892},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":72621,"toc":72884},[72622,72625,72628,72630,72632,72635,72637,72882],[11,72623,72619],{"id":72624},"stretch",[15,72626,72627],{},"Stretch content towards a direction from a center point",[31281,72629],{"component":72619},[23,72631,31285],{"id":25903},[31287,72633],{":props":72634},"[{\"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,72636,31293],{"id":31292},[246,72638,72639,72684,72728,72772,72816],{":tabs":1557},[212,72640,72642],{"className":334,"code":72641,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,72643,72644,72652,72660,72668,72676],{"__ignoreMap":178},[220,72645,72646,72648,72650],{"class":222,"line":223},[220,72647,343],{"class":264},[220,72649,347],{"class":346},[220,72651,359],{"class":264},[220,72653,72654,72656,72658],{"class":222,"line":179},[220,72655,364],{"class":264},[220,72657,72619],{"class":346},[220,72659,359],{"class":264},[220,72661,72662,72664,72666],{"class":222,"line":389},[220,72663,2550],{"class":264},[220,72665,2553],{"class":346},[220,72667,386],{"class":264},[220,72669,72670,72672,72674],{"class":222,"line":399},[220,72671,2567],{"class":264},[220,72673,72619],{"class":346},[220,72675,359],{"class":264},[220,72677,72678,72680,72682],{"class":222,"line":644},[220,72679,402],{"class":264},[220,72681,347],{"class":346},[220,72683,359],{"class":264},[212,72685,72686],{"className":409,"code":72641,"language":411,"meta":178,"style":178},[99,72687,72688,72696,72704,72712,72720],{"__ignoreMap":178},[220,72689,72690,72692,72694],{"class":222,"line":223},[220,72691,343],{"class":264},[220,72693,347],{"class":420},[220,72695,359],{"class":264},[220,72697,72698,72700,72702],{"class":222,"line":179},[220,72699,364],{"class":264},[220,72701,72619],{"class":420},[220,72703,359],{"class":264},[220,72705,72706,72708,72710],{"class":222,"line":389},[220,72707,2550],{"class":264},[220,72709,2553],{"class":420},[220,72711,386],{"class":264},[220,72713,72714,72716,72718],{"class":222,"line":399},[220,72715,2567],{"class":264},[220,72717,72619],{"class":420},[220,72719,359],{"class":264},[220,72721,72722,72724,72726],{"class":222,"line":644},[220,72723,402],{"class":264},[220,72725,347],{"class":420},[220,72727,359],{"class":264},[212,72729,72730],{"className":2844,"code":72641,"language":2846,"meta":178,"style":178},[99,72731,72732,72740,72748,72756,72764],{"__ignoreMap":178},[220,72733,72734,72736,72738],{"class":222,"line":223},[220,72735,343],{"class":264},[220,72737,347],{"class":420},[220,72739,359],{"class":264},[220,72741,72742,72744,72746],{"class":222,"line":179},[220,72743,364],{"class":264},[220,72745,72619],{"class":420},[220,72747,359],{"class":264},[220,72749,72750,72752,72754],{"class":222,"line":389},[220,72751,2550],{"class":264},[220,72753,2553],{"class":420},[220,72755,386],{"class":264},[220,72757,72758,72760,72762],{"class":222,"line":399},[220,72759,2567],{"class":264},[220,72761,72619],{"class":420},[220,72763,359],{"class":264},[220,72765,72766,72768,72770],{"class":222,"line":644},[220,72767,402],{"class":264},[220,72769,347],{"class":420},[220,72771,359],{"class":264},[212,72773,72774],{"className":468,"code":72641,"language":469,"meta":178,"style":178},[99,72775,72776,72784,72792,72800,72808],{"__ignoreMap":178},[220,72777,72778,72780,72782],{"class":222,"line":223},[220,72779,343],{"class":264},[220,72781,347],{"class":420},[220,72783,359],{"class":264},[220,72785,72786,72788,72790],{"class":222,"line":179},[220,72787,364],{"class":264},[220,72789,72619],{"class":420},[220,72791,359],{"class":264},[220,72793,72794,72796,72798],{"class":222,"line":389},[220,72795,2550],{"class":264},[220,72797,2553],{"class":420},[220,72799,386],{"class":264},[220,72801,72802,72804,72806],{"class":222,"line":399},[220,72803,2567],{"class":264},[220,72805,72619],{"class":420},[220,72807,359],{"class":264},[220,72809,72810,72812,72814],{"class":222,"line":644},[220,72811,402],{"class":264},[220,72813,347],{"class":420},[220,72815,359],{"class":264},[212,72817,72819],{"className":251,"code":72818,"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,72820,72821,72831,72835,72849,72853,72862,72870,72874,72878],{"__ignoreMap":178},[220,72822,72823,72825,72827,72829],{"class":222,"line":223},[220,72824,261],{"class":260},[220,72826,10879],{"class":264},[220,72828,268],{"class":260},[220,72830,4007],{"class":230},[220,72832,72833],{"class":222,"line":179},[220,72834,647],{"emptyLinePlaceholder":194},[220,72836,72837,72839,72841,72843,72845,72847],{"class":222,"line":389},[220,72838,1735],{"class":260},[220,72840,1738],{"class":420},[220,72842,1741],{"class":260},[220,72844,1744],{"class":260},[220,72846,1747],{"class":226},[220,72848,1750],{"class":264},[220,72850,72851],{"class":222,"line":399},[220,72852,1765],{"class":264},[220,72854,72855,72857,72860],{"class":222,"line":644},[220,72856,1770],{"class":264},[220,72858,72859],{"class":230},"'Stretch'",[220,72861,6375],{"class":264},[220,72863,72864,72866,72868],{"class":222,"line":650},[220,72865,6380],{"class":264},[220,72867,3206],{"class":230},[220,72869,2465],{"class":264},[220,72871,72872],{"class":222,"line":656},[220,72873,6397],{"class":264},[220,72875,72876],{"class":222,"line":673},[220,72877,1787],{"class":264},[220,72879,72880],{"class":222,"line":682},[220,72881,1792],{"class":264},[1504,72883,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":72885},[72886,72887],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":72619,"description":72627},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":72894,"title":15206,"body":72895,"category":32433,"componentType":25247,"description":72902,"extension":191,"meta":73086,"navigation":194,"path":73087,"requiresChild":31900,"seo":73088,"stem":73089,"__hash__":73090},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":72896,"toc":73082},[72897,72900,72903,72905,72907,72910,72912,73080],[11,72898,15206],{"id":72899},"stripes",[15,72901,72902],{},"Alternating colored stripes with animation",[31281,72904],{"component":15206},[23,72906,31285],{"id":25903},[31287,72908],{":props":72909},"[{\"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,72911,31293],{"id":31292},[246,72913,72914,72943,72971,72999,73027],{":tabs":1557},[212,72915,72917],{"className":334,"code":72916,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,72918,72919,72927,72935],{"__ignoreMap":178},[220,72920,72921,72923,72925],{"class":222,"line":223},[220,72922,343],{"class":264},[220,72924,347],{"class":346},[220,72926,359],{"class":264},[220,72928,72929,72931,72933],{"class":222,"line":179},[220,72930,364],{"class":264},[220,72932,15206],{"class":346},[220,72934,386],{"class":264},[220,72936,72937,72939,72941],{"class":222,"line":389},[220,72938,402],{"class":264},[220,72940,347],{"class":346},[220,72942,359],{"class":264},[212,72944,72945],{"className":409,"code":72916,"language":411,"meta":178,"style":178},[99,72946,72947,72955,72963],{"__ignoreMap":178},[220,72948,72949,72951,72953],{"class":222,"line":223},[220,72950,343],{"class":264},[220,72952,347],{"class":420},[220,72954,359],{"class":264},[220,72956,72957,72959,72961],{"class":222,"line":179},[220,72958,364],{"class":264},[220,72960,15206],{"class":420},[220,72962,386],{"class":264},[220,72964,72965,72967,72969],{"class":222,"line":389},[220,72966,402],{"class":264},[220,72968,347],{"class":420},[220,72970,359],{"class":264},[212,72972,72973],{"className":2844,"code":72916,"language":2846,"meta":178,"style":178},[99,72974,72975,72983,72991],{"__ignoreMap":178},[220,72976,72977,72979,72981],{"class":222,"line":223},[220,72978,343],{"class":264},[220,72980,347],{"class":420},[220,72982,359],{"class":264},[220,72984,72985,72987,72989],{"class":222,"line":179},[220,72986,364],{"class":264},[220,72988,15206],{"class":420},[220,72990,386],{"class":264},[220,72992,72993,72995,72997],{"class":222,"line":389},[220,72994,402],{"class":264},[220,72996,347],{"class":420},[220,72998,359],{"class":264},[212,73000,73001],{"className":468,"code":72916,"language":469,"meta":178,"style":178},[99,73002,73003,73011,73019],{"__ignoreMap":178},[220,73004,73005,73007,73009],{"class":222,"line":223},[220,73006,343],{"class":264},[220,73008,347],{"class":420},[220,73010,359],{"class":264},[220,73012,73013,73015,73017],{"class":222,"line":179},[220,73014,364],{"class":264},[220,73016,15206],{"class":420},[220,73018,386],{"class":264},[220,73020,73021,73023,73025],{"class":222,"line":389},[220,73022,402],{"class":264},[220,73024,347],{"class":420},[220,73026,359],{"class":264},[212,73028,73030],{"className":251,"code":73029,"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,73031,73032,73042,73046,73060,73064,73072,73076],{"__ignoreMap":178},[220,73033,73034,73036,73038,73040],{"class":222,"line":223},[220,73035,261],{"class":260},[220,73037,10879],{"class":264},[220,73039,268],{"class":260},[220,73041,4007],{"class":230},[220,73043,73044],{"class":222,"line":179},[220,73045,647],{"emptyLinePlaceholder":194},[220,73047,73048,73050,73052,73054,73056,73058],{"class":222,"line":389},[220,73049,1735],{"class":260},[220,73051,1738],{"class":420},[220,73053,1741],{"class":260},[220,73055,1744],{"class":260},[220,73057,1747],{"class":226},[220,73059,1750],{"class":264},[220,73061,73062],{"class":222,"line":399},[220,73063,1765],{"class":264},[220,73065,73066,73068,73070],{"class":222,"line":644},[220,73067,1770],{"class":264},[220,73069,16464],{"class":230},[220,73071,2465],{"class":264},[220,73073,73074],{"class":222,"line":650},[220,73075,1787],{"class":264},[220,73077,73078],{"class":222,"line":656},[220,73079,1792],{"class":264},[1504,73081,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":73083},[73084,73085],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15206,"description":72902},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":73092,"title":73093,"body":73094,"category":32433,"componentType":25247,"description":73101,"extension":191,"meta":73333,"navigation":194,"path":73334,"requiresChild":31900,"seo":73335,"stem":73336,"__hash__":73337},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":73095,"toc":73329},[73096,73099,73102,73104,73106,73109,73111,73327],[11,73097,73093],{"id":73098},"studiobackground",[15,73100,73101],{},"Multi-light studio background with ambient motion.",[31281,73103],{"component":73093},[23,73105,31285],{"id":25903},[31287,73107],{":props":73108},"[{\"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,73110,31293],{"id":31292},[246,73112,73113,73154,73192,73230,73268],{":tabs":1557},[212,73114,73116],{"className":334,"code":73115,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,73117,73118,73126,73133,73142,73146],{"__ignoreMap":178},[220,73119,73120,73122,73124],{"class":222,"line":223},[220,73121,343],{"class":264},[220,73123,347],{"class":346},[220,73125,359],{"class":264},[220,73127,73128,73130],{"class":222,"line":179},[220,73129,364],{"class":264},[220,73131,73132],{"class":346},"StudioBackground\n",[220,73134,73135,73137,73139],{"class":222,"line":389},[220,73136,9002],{"class":226},[220,73138,353],{"class":264},[220,73140,73141],{"class":230},"\"#d8dbec\"\n",[220,73143,73144],{"class":222,"line":399},[220,73145,1234],{"class":264},[220,73147,73148,73150,73152],{"class":222,"line":644},[220,73149,402],{"class":264},[220,73151,347],{"class":346},[220,73153,359],{"class":264},[212,73155,73156],{"className":409,"code":73115,"language":411,"meta":178,"style":178},[99,73157,73158,73166,73172,73180,73184],{"__ignoreMap":178},[220,73159,73160,73162,73164],{"class":222,"line":223},[220,73161,343],{"class":264},[220,73163,347],{"class":420},[220,73165,359],{"class":264},[220,73167,73168,73170],{"class":222,"line":179},[220,73169,364],{"class":264},[220,73171,73132],{"class":420},[220,73173,73174,73176,73178],{"class":222,"line":389},[220,73175,9002],{"class":226},[220,73177,353],{"class":260},[220,73179,73141],{"class":230},[220,73181,73182],{"class":222,"line":399},[220,73183,1234],{"class":264},[220,73185,73186,73188,73190],{"class":222,"line":644},[220,73187,402],{"class":264},[220,73189,347],{"class":420},[220,73191,359],{"class":264},[212,73193,73194],{"className":2844,"code":73115,"language":2846,"meta":178,"style":178},[99,73195,73196,73204,73210,73218,73222],{"__ignoreMap":178},[220,73197,73198,73200,73202],{"class":222,"line":223},[220,73199,343],{"class":264},[220,73201,347],{"class":420},[220,73203,359],{"class":264},[220,73205,73206,73208],{"class":222,"line":179},[220,73207,364],{"class":264},[220,73209,73132],{"class":420},[220,73211,73212,73214,73216],{"class":222,"line":389},[220,73213,9002],{"class":226},[220,73215,353],{"class":264},[220,73217,73141],{"class":230},[220,73219,73220],{"class":222,"line":399},[220,73221,1234],{"class":264},[220,73223,73224,73226,73228],{"class":222,"line":644},[220,73225,402],{"class":264},[220,73227,347],{"class":420},[220,73229,359],{"class":264},[212,73231,73232],{"className":468,"code":73115,"language":469,"meta":178,"style":178},[99,73233,73234,73242,73248,73256,73260],{"__ignoreMap":178},[220,73235,73236,73238,73240],{"class":222,"line":223},[220,73237,343],{"class":264},[220,73239,347],{"class":420},[220,73241,359],{"class":264},[220,73243,73244,73246],{"class":222,"line":179},[220,73245,364],{"class":264},[220,73247,73132],{"class":420},[220,73249,73250,73252,73254],{"class":222,"line":389},[220,73251,9002],{"class":226},[220,73253,353],{"class":260},[220,73255,73141],{"class":230},[220,73257,73258],{"class":222,"line":399},[220,73259,1234],{"class":264},[220,73261,73262,73264,73266],{"class":222,"line":644},[220,73263,402],{"class":264},[220,73265,347],{"class":420},[220,73267,359],{"class":264},[212,73269,73271],{"className":251,"code":73270,"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,73272,73273,73283,73287,73301,73305,73319,73323],{"__ignoreMap":178},[220,73274,73275,73277,73279,73281],{"class":222,"line":223},[220,73276,261],{"class":260},[220,73278,10879],{"class":264},[220,73280,268],{"class":260},[220,73282,4007],{"class":230},[220,73284,73285],{"class":222,"line":179},[220,73286,647],{"emptyLinePlaceholder":194},[220,73288,73289,73291,73293,73295,73297,73299],{"class":222,"line":389},[220,73290,1735],{"class":260},[220,73292,1738],{"class":420},[220,73294,1741],{"class":260},[220,73296,1744],{"class":260},[220,73298,1747],{"class":226},[220,73300,1750],{"class":264},[220,73302,73303],{"class":222,"line":399},[220,73304,1765],{"class":264},[220,73306,73307,73309,73312,73314,73317],{"class":222,"line":644},[220,73308,1770],{"class":264},[220,73310,73311],{"class":230},"'StudioBackground'",[220,73313,1776],{"class":264},[220,73315,73316],{"class":230},"'#d8dbec'",[220,73318,1782],{"class":264},[220,73320,73321],{"class":222,"line":650},[220,73322,1787],{"class":264},[220,73324,73325],{"class":222,"line":656},[220,73326,1792],{"class":264},[1504,73328,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73330},[73331,73332],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":73093,"description":73101},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":73339,"title":73340,"body":73341,"category":32433,"componentType":25247,"description":73348,"extension":191,"meta":73627,"navigation":194,"path":73628,"requiresChild":31900,"seo":73629,"stem":73630,"__hash__":73631},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":73342,"toc":73623},[73343,73346,73349,73351,73353,73356,73358,73621],[11,73344,73340],{"id":73345},"sunburst",[15,73347,73348],{},"Radial sunburst rays emanating from a center point",[31281,73350],{"component":73340},[23,73352,31285],{"id":25903},[31287,73354],{":props":73355},"[{\"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,73357,31293],{"id":31292},[246,73359,73360,73409,73460,73508,73558],{":tabs":1557},[212,73361,73363],{"className":334,"code":73362,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,73364,73365,73373,73380,73389,73397,73401],{"__ignoreMap":178},[220,73366,73367,73369,73371],{"class":222,"line":223},[220,73368,343],{"class":264},[220,73370,347],{"class":346},[220,73372,359],{"class":264},[220,73374,73375,73377],{"class":222,"line":179},[220,73376,364],{"class":264},[220,73378,73379],{"class":346},"SunBurst\n",[220,73381,73382,73384,73386],{"class":222,"line":389},[220,73383,9002],{"class":226},[220,73385,353],{"class":264},[220,73387,73388],{"class":230},"\"#ffdd88\"\n",[220,73390,73391,73393,73395],{"class":222,"line":399},[220,73392,16772],{"class":226},[220,73394,353],{"class":264},[220,73396,9017],{"class":230},[220,73398,73399],{"class":222,"line":644},[220,73400,1234],{"class":264},[220,73402,73403,73405,73407],{"class":222,"line":650},[220,73404,402],{"class":264},[220,73406,347],{"class":346},[220,73408,359],{"class":264},[212,73410,73412],{"className":409,"code":73411,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,73413,73414,73422,73428,73436,73448,73452],{"__ignoreMap":178},[220,73415,73416,73418,73420],{"class":222,"line":223},[220,73417,343],{"class":264},[220,73419,347],{"class":420},[220,73421,359],{"class":264},[220,73423,73424,73426],{"class":222,"line":179},[220,73425,364],{"class":264},[220,73427,73379],{"class":420},[220,73429,73430,73432,73434],{"class":222,"line":389},[220,73431,9002],{"class":226},[220,73433,353],{"class":260},[220,73435,73388],{"class":230},[220,73437,73438,73440,73442,73444,73446],{"class":222,"line":399},[220,73439,9012],{"class":226},[220,73441,353],{"class":260},[220,73443,743],{"class":264},[220,73445,5665],{"class":420},[220,73447,749],{"class":264},[220,73449,73450],{"class":222,"line":644},[220,73451,1234],{"class":264},[220,73453,73454,73456,73458],{"class":222,"line":650},[220,73455,402],{"class":264},[220,73457,347],{"class":420},[220,73459,359],{"class":264},[212,73461,73462],{"className":2844,"code":73411,"language":2846,"meta":178,"style":178},[99,73463,73464,73472,73478,73486,73496,73500],{"__ignoreMap":178},[220,73465,73466,73468,73470],{"class":222,"line":223},[220,73467,343],{"class":264},[220,73469,347],{"class":420},[220,73471,359],{"class":264},[220,73473,73474,73476],{"class":222,"line":179},[220,73475,364],{"class":264},[220,73477,73379],{"class":420},[220,73479,73480,73482,73484],{"class":222,"line":389},[220,73481,9002],{"class":226},[220,73483,353],{"class":264},[220,73485,73388],{"class":230},[220,73487,73488,73490,73492,73494],{"class":222,"line":399},[220,73489,9012],{"class":226},[220,73491,29241],{"class":264},[220,73493,5665],{"class":420},[220,73495,749],{"class":264},[220,73497,73498],{"class":222,"line":644},[220,73499,1234],{"class":264},[220,73501,73502,73504,73506],{"class":222,"line":650},[220,73503,402],{"class":264},[220,73505,347],{"class":420},[220,73507,359],{"class":264},[212,73509,73510],{"className":468,"code":73411,"language":469,"meta":178,"style":178},[99,73511,73512,73520,73526,73534,73546,73550],{"__ignoreMap":178},[220,73513,73514,73516,73518],{"class":222,"line":223},[220,73515,343],{"class":264},[220,73517,347],{"class":420},[220,73519,359],{"class":264},[220,73521,73522,73524],{"class":222,"line":179},[220,73523,364],{"class":264},[220,73525,73379],{"class":420},[220,73527,73528,73530,73532],{"class":222,"line":389},[220,73529,9002],{"class":226},[220,73531,353],{"class":260},[220,73533,73388],{"class":230},[220,73535,73536,73538,73540,73542,73544],{"class":222,"line":399},[220,73537,9012],{"class":226},[220,73539,353],{"class":260},[220,73541,743],{"class":264},[220,73543,5665],{"class":420},[220,73545,749],{"class":264},[220,73547,73548],{"class":222,"line":644},[220,73549,1234],{"class":264},[220,73551,73552,73554,73556],{"class":222,"line":650},[220,73553,402],{"class":264},[220,73555,347],{"class":420},[220,73557,359],{"class":264},[212,73559,73561],{"className":251,"code":73560,"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,73562,73563,73573,73577,73591,73595,73613,73617],{"__ignoreMap":178},[220,73564,73565,73567,73569,73571],{"class":222,"line":223},[220,73566,261],{"class":260},[220,73568,10879],{"class":264},[220,73570,268],{"class":260},[220,73572,4007],{"class":230},[220,73574,73575],{"class":222,"line":179},[220,73576,647],{"emptyLinePlaceholder":194},[220,73578,73579,73581,73583,73585,73587,73589],{"class":222,"line":389},[220,73580,1735],{"class":260},[220,73582,1738],{"class":420},[220,73584,1741],{"class":260},[220,73586,1744],{"class":260},[220,73588,1747],{"class":226},[220,73590,1750],{"class":264},[220,73592,73593],{"class":222,"line":399},[220,73594,1765],{"class":264},[220,73596,73597,73599,73602,73604,73607,73609,73611],{"class":222,"line":644},[220,73598,1770],{"class":264},[220,73600,73601],{"class":230},"'SunBurst'",[220,73603,1776],{"class":264},[220,73605,73606],{"class":230},"'#ffdd88'",[220,73608,5932],{"class":264},[220,73610,5665],{"class":420},[220,73612,1782],{"class":264},[220,73614,73615],{"class":222,"line":650},[220,73616,1787],{"class":264},[220,73618,73619],{"class":222,"line":656},[220,73620,1792],{"class":264},[1504,73622,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73624},[73625,73626],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":73340,"description":73348},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":73633,"title":73634,"body":73635,"category":32766,"componentType":25253,"description":73642,"extension":191,"meta":73903,"navigation":194,"path":73904,"requiresChild":194,"seo":73905,"stem":73906,"__hash__":73907},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":73636,"toc":73899},[73637,73640,73643,73645,73647,73650,73652,73897],[11,73638,73634],{"id":73639},"surface3d",[15,73641,73642],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31281,73644],{"component":73634},[23,73646,31285],{"id":25903},[31287,73648],{":props":73649},"[{\"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,73651,31293],{"id":31292},[246,73653,73654,73699,73743,73787,73831],{":tabs":1557},[212,73655,73657],{"className":334,"code":73656,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,73658,73659,73667,73675,73683,73691],{"__ignoreMap":178},[220,73660,73661,73663,73665],{"class":222,"line":223},[220,73662,343],{"class":264},[220,73664,347],{"class":346},[220,73666,359],{"class":264},[220,73668,73669,73671,73673],{"class":222,"line":179},[220,73670,364],{"class":264},[220,73672,73634],{"class":346},[220,73674,359],{"class":264},[220,73676,73677,73679,73681],{"class":222,"line":389},[220,73678,2550],{"class":264},[220,73680,2553],{"class":346},[220,73682,386],{"class":264},[220,73684,73685,73687,73689],{"class":222,"line":399},[220,73686,2567],{"class":264},[220,73688,73634],{"class":346},[220,73690,359],{"class":264},[220,73692,73693,73695,73697],{"class":222,"line":644},[220,73694,402],{"class":264},[220,73696,347],{"class":346},[220,73698,359],{"class":264},[212,73700,73701],{"className":409,"code":73656,"language":411,"meta":178,"style":178},[99,73702,73703,73711,73719,73727,73735],{"__ignoreMap":178},[220,73704,73705,73707,73709],{"class":222,"line":223},[220,73706,343],{"class":264},[220,73708,347],{"class":420},[220,73710,359],{"class":264},[220,73712,73713,73715,73717],{"class":222,"line":179},[220,73714,364],{"class":264},[220,73716,73634],{"class":420},[220,73718,359],{"class":264},[220,73720,73721,73723,73725],{"class":222,"line":389},[220,73722,2550],{"class":264},[220,73724,2553],{"class":420},[220,73726,386],{"class":264},[220,73728,73729,73731,73733],{"class":222,"line":399},[220,73730,2567],{"class":264},[220,73732,73634],{"class":420},[220,73734,359],{"class":264},[220,73736,73737,73739,73741],{"class":222,"line":644},[220,73738,402],{"class":264},[220,73740,347],{"class":420},[220,73742,359],{"class":264},[212,73744,73745],{"className":2844,"code":73656,"language":2846,"meta":178,"style":178},[99,73746,73747,73755,73763,73771,73779],{"__ignoreMap":178},[220,73748,73749,73751,73753],{"class":222,"line":223},[220,73750,343],{"class":264},[220,73752,347],{"class":420},[220,73754,359],{"class":264},[220,73756,73757,73759,73761],{"class":222,"line":179},[220,73758,364],{"class":264},[220,73760,73634],{"class":420},[220,73762,359],{"class":264},[220,73764,73765,73767,73769],{"class":222,"line":389},[220,73766,2550],{"class":264},[220,73768,2553],{"class":420},[220,73770,386],{"class":264},[220,73772,73773,73775,73777],{"class":222,"line":399},[220,73774,2567],{"class":264},[220,73776,73634],{"class":420},[220,73778,359],{"class":264},[220,73780,73781,73783,73785],{"class":222,"line":644},[220,73782,402],{"class":264},[220,73784,347],{"class":420},[220,73786,359],{"class":264},[212,73788,73789],{"className":468,"code":73656,"language":469,"meta":178,"style":178},[99,73790,73791,73799,73807,73815,73823],{"__ignoreMap":178},[220,73792,73793,73795,73797],{"class":222,"line":223},[220,73794,343],{"class":264},[220,73796,347],{"class":420},[220,73798,359],{"class":264},[220,73800,73801,73803,73805],{"class":222,"line":179},[220,73802,364],{"class":264},[220,73804,73634],{"class":420},[220,73806,359],{"class":264},[220,73808,73809,73811,73813],{"class":222,"line":389},[220,73810,2550],{"class":264},[220,73812,2553],{"class":420},[220,73814,386],{"class":264},[220,73816,73817,73819,73821],{"class":222,"line":399},[220,73818,2567],{"class":264},[220,73820,73634],{"class":420},[220,73822,359],{"class":264},[220,73824,73825,73827,73829],{"class":222,"line":644},[220,73826,402],{"class":264},[220,73828,347],{"class":420},[220,73830,359],{"class":264},[212,73832,73834],{"className":251,"code":73833,"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,73835,73836,73846,73850,73864,73868,73877,73885,73889,73893],{"__ignoreMap":178},[220,73837,73838,73840,73842,73844],{"class":222,"line":223},[220,73839,261],{"class":260},[220,73841,10879],{"class":264},[220,73843,268],{"class":260},[220,73845,4007],{"class":230},[220,73847,73848],{"class":222,"line":179},[220,73849,647],{"emptyLinePlaceholder":194},[220,73851,73852,73854,73856,73858,73860,73862],{"class":222,"line":389},[220,73853,1735],{"class":260},[220,73855,1738],{"class":420},[220,73857,1741],{"class":260},[220,73859,1744],{"class":260},[220,73861,1747],{"class":226},[220,73863,1750],{"class":264},[220,73865,73866],{"class":222,"line":399},[220,73867,1765],{"class":264},[220,73869,73870,73872,73875],{"class":222,"line":644},[220,73871,1770],{"class":264},[220,73873,73874],{"class":230},"'Surface3D'",[220,73876,6375],{"class":264},[220,73878,73879,73881,73883],{"class":222,"line":650},[220,73880,6380],{"class":264},[220,73882,3206],{"class":230},[220,73884,2465],{"class":264},[220,73886,73887],{"class":222,"line":656},[220,73888,6397],{"class":264},[220,73890,73891],{"class":222,"line":673},[220,73892,1787],{"class":264},[220,73894,73895],{"class":222,"line":682},[220,73896,1792],{"class":264},[1504,73898,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":73900},[73901,73902],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":73634,"description":73642},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":73909,"title":13370,"body":73910,"category":32433,"componentType":25247,"description":73917,"extension":191,"meta":74102,"navigation":194,"path":74103,"requiresChild":31900,"seo":74104,"stem":74105,"__hash__":74106},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":73911,"toc":74098},[73912,73915,73918,73920,73922,73925,73927,74096],[11,73913,13370],{"id":73914},"swirl",[15,73916,73917],{},"Flowing swirl pattern with multi-layered noise",[31281,73919],{"component":13370},[23,73921,31285],{"id":25903},[31287,73923],{":props":73924},"[{\"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,73926,31293],{"id":31292},[246,73928,73929,73958,73986,74014,74042],{":tabs":1557},[212,73930,73932],{"className":334,"code":73931,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,73933,73934,73942,73950],{"__ignoreMap":178},[220,73935,73936,73938,73940],{"class":222,"line":223},[220,73937,343],{"class":264},[220,73939,347],{"class":346},[220,73941,359],{"class":264},[220,73943,73944,73946,73948],{"class":222,"line":179},[220,73945,364],{"class":264},[220,73947,13370],{"class":346},[220,73949,386],{"class":264},[220,73951,73952,73954,73956],{"class":222,"line":389},[220,73953,402],{"class":264},[220,73955,347],{"class":346},[220,73957,359],{"class":264},[212,73959,73960],{"className":409,"code":73931,"language":411,"meta":178,"style":178},[99,73961,73962,73970,73978],{"__ignoreMap":178},[220,73963,73964,73966,73968],{"class":222,"line":223},[220,73965,343],{"class":264},[220,73967,347],{"class":420},[220,73969,359],{"class":264},[220,73971,73972,73974,73976],{"class":222,"line":179},[220,73973,364],{"class":264},[220,73975,13370],{"class":420},[220,73977,386],{"class":264},[220,73979,73980,73982,73984],{"class":222,"line":389},[220,73981,402],{"class":264},[220,73983,347],{"class":420},[220,73985,359],{"class":264},[212,73987,73988],{"className":2844,"code":73931,"language":2846,"meta":178,"style":178},[99,73989,73990,73998,74006],{"__ignoreMap":178},[220,73991,73992,73994,73996],{"class":222,"line":223},[220,73993,343],{"class":264},[220,73995,347],{"class":420},[220,73997,359],{"class":264},[220,73999,74000,74002,74004],{"class":222,"line":179},[220,74001,364],{"class":264},[220,74003,13370],{"class":420},[220,74005,386],{"class":264},[220,74007,74008,74010,74012],{"class":222,"line":389},[220,74009,402],{"class":264},[220,74011,347],{"class":420},[220,74013,359],{"class":264},[212,74015,74016],{"className":468,"code":73931,"language":469,"meta":178,"style":178},[99,74017,74018,74026,74034],{"__ignoreMap":178},[220,74019,74020,74022,74024],{"class":222,"line":223},[220,74021,343],{"class":264},[220,74023,347],{"class":420},[220,74025,359],{"class":264},[220,74027,74028,74030,74032],{"class":222,"line":179},[220,74029,364],{"class":264},[220,74031,13370],{"class":420},[220,74033,386],{"class":264},[220,74035,74036,74038,74040],{"class":222,"line":389},[220,74037,402],{"class":264},[220,74039,347],{"class":420},[220,74041,359],{"class":264},[212,74043,74045],{"className":251,"code":74044,"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,74046,74047,74057,74061,74075,74079,74088,74092],{"__ignoreMap":178},[220,74048,74049,74051,74053,74055],{"class":222,"line":223},[220,74050,261],{"class":260},[220,74052,10879],{"class":264},[220,74054,268],{"class":260},[220,74056,4007],{"class":230},[220,74058,74059],{"class":222,"line":179},[220,74060,647],{"emptyLinePlaceholder":194},[220,74062,74063,74065,74067,74069,74071,74073],{"class":222,"line":389},[220,74064,1735],{"class":260},[220,74066,1738],{"class":420},[220,74068,1741],{"class":260},[220,74070,1744],{"class":260},[220,74072,1747],{"class":226},[220,74074,1750],{"class":264},[220,74076,74077],{"class":222,"line":399},[220,74078,1765],{"class":264},[220,74080,74081,74083,74086],{"class":222,"line":644},[220,74082,1770],{"class":264},[220,74084,74085],{"class":230},"'Swirl'",[220,74087,2465],{"class":264},[220,74089,74090],{"class":222,"line":650},[220,74091,1787],{"class":264},[220,74093,74094],{"class":222,"line":656},[220,74095,1792],{"class":264},[1504,74097,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":74099},[74100,74101],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":13370,"description":73917},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":74108,"title":74109,"body":74110,"category":15275,"componentType":25247,"description":74117,"extension":191,"meta":74395,"navigation":194,"path":74396,"requiresChild":31900,"seo":74397,"stem":74398,"__hash__":74399},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":74111,"toc":74391},[74112,74115,74118,74120,74122,74125,74127,74389],[11,74113,74109],{"id":74114},"teardrop",[15,74116,74117],{},"Teardrop — a rounded bulb tapering to a sharp point",[31281,74119],{"component":74109},[23,74121,31285],{"id":25903},[31287,74123],{":props":74124},"[{\"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,74126,31293],{"id":31292},[246,74128,74129,74178,74229,74277,74327],{":tabs":1557},[212,74130,74132],{"className":334,"code":74131,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,74133,74134,74142,74149,74157,74166,74170],{"__ignoreMap":178},[220,74135,74136,74138,74140],{"class":222,"line":223},[220,74137,343],{"class":264},[220,74139,347],{"class":346},[220,74141,359],{"class":264},[220,74143,74144,74146],{"class":222,"line":179},[220,74145,364],{"class":264},[220,74147,74148],{"class":346},"Teardrop\n",[220,74150,74151,74153,74155],{"class":222,"line":389},[220,74152,9002],{"class":226},[220,74154,353],{"class":264},[220,74156,8958],{"class":230},[220,74158,74159,74161,74163],{"class":222,"line":399},[220,74160,16772],{"class":226},[220,74162,353],{"class":264},[220,74164,74165],{"class":230},"\"0.22\"\n",[220,74167,74168],{"class":222,"line":644},[220,74169,1234],{"class":264},[220,74171,74172,74174,74176],{"class":222,"line":650},[220,74173,402],{"class":264},[220,74175,347],{"class":346},[220,74177,359],{"class":264},[212,74179,74181],{"className":409,"code":74180,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,74182,74183,74191,74197,74205,74217,74221],{"__ignoreMap":178},[220,74184,74185,74187,74189],{"class":222,"line":223},[220,74186,343],{"class":264},[220,74188,347],{"class":420},[220,74190,359],{"class":264},[220,74192,74193,74195],{"class":222,"line":179},[220,74194,364],{"class":264},[220,74196,74148],{"class":420},[220,74198,74199,74201,74203],{"class":222,"line":389},[220,74200,9002],{"class":226},[220,74202,353],{"class":260},[220,74204,8958],{"class":230},[220,74206,74207,74209,74211,74213,74215],{"class":222,"line":399},[220,74208,9012],{"class":226},[220,74210,353],{"class":260},[220,74212,743],{"class":264},[220,74214,23318],{"class":420},[220,74216,749],{"class":264},[220,74218,74219],{"class":222,"line":644},[220,74220,1234],{"class":264},[220,74222,74223,74225,74227],{"class":222,"line":650},[220,74224,402],{"class":264},[220,74226,347],{"class":420},[220,74228,359],{"class":264},[212,74230,74231],{"className":2844,"code":74180,"language":2846,"meta":178,"style":178},[99,74232,74233,74241,74247,74255,74265,74269],{"__ignoreMap":178},[220,74234,74235,74237,74239],{"class":222,"line":223},[220,74236,343],{"class":264},[220,74238,347],{"class":420},[220,74240,359],{"class":264},[220,74242,74243,74245],{"class":222,"line":179},[220,74244,364],{"class":264},[220,74246,74148],{"class":420},[220,74248,74249,74251,74253],{"class":222,"line":389},[220,74250,9002],{"class":226},[220,74252,353],{"class":264},[220,74254,8958],{"class":230},[220,74256,74257,74259,74261,74263],{"class":222,"line":399},[220,74258,9012],{"class":226},[220,74260,29241],{"class":264},[220,74262,23318],{"class":420},[220,74264,749],{"class":264},[220,74266,74267],{"class":222,"line":644},[220,74268,1234],{"class":264},[220,74270,74271,74273,74275],{"class":222,"line":650},[220,74272,402],{"class":264},[220,74274,347],{"class":420},[220,74276,359],{"class":264},[212,74278,74279],{"className":468,"code":74180,"language":469,"meta":178,"style":178},[99,74280,74281,74289,74295,74303,74315,74319],{"__ignoreMap":178},[220,74282,74283,74285,74287],{"class":222,"line":223},[220,74284,343],{"class":264},[220,74286,347],{"class":420},[220,74288,359],{"class":264},[220,74290,74291,74293],{"class":222,"line":179},[220,74292,364],{"class":264},[220,74294,74148],{"class":420},[220,74296,74297,74299,74301],{"class":222,"line":389},[220,74298,9002],{"class":226},[220,74300,353],{"class":260},[220,74302,8958],{"class":230},[220,74304,74305,74307,74309,74311,74313],{"class":222,"line":399},[220,74306,9012],{"class":226},[220,74308,353],{"class":260},[220,74310,743],{"class":264},[220,74312,23318],{"class":420},[220,74314,749],{"class":264},[220,74316,74317],{"class":222,"line":644},[220,74318,1234],{"class":264},[220,74320,74321,74323,74325],{"class":222,"line":650},[220,74322,402],{"class":264},[220,74324,347],{"class":420},[220,74326,359],{"class":264},[212,74328,74330],{"className":251,"code":74329,"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,74331,74332,74342,74346,74360,74364,74381,74385],{"__ignoreMap":178},[220,74333,74334,74336,74338,74340],{"class":222,"line":223},[220,74335,261],{"class":260},[220,74337,10879],{"class":264},[220,74339,268],{"class":260},[220,74341,4007],{"class":230},[220,74343,74344],{"class":222,"line":179},[220,74345,647],{"emptyLinePlaceholder":194},[220,74347,74348,74350,74352,74354,74356,74358],{"class":222,"line":389},[220,74349,1735],{"class":260},[220,74351,1738],{"class":420},[220,74353,1741],{"class":260},[220,74355,1744],{"class":260},[220,74357,1747],{"class":226},[220,74359,1750],{"class":264},[220,74361,74362],{"class":222,"line":399},[220,74363,1765],{"class":264},[220,74365,74366,74368,74371,74373,74375,74377,74379],{"class":222,"line":644},[220,74367,1770],{"class":264},[220,74369,74370],{"class":230},"'Teardrop'",[220,74372,1776],{"class":264},[220,74374,9536],{"class":230},[220,74376,5932],{"class":264},[220,74378,23318],{"class":420},[220,74380,1782],{"class":264},[220,74382,74383],{"class":222,"line":650},[220,74384,1787],{"class":264},[220,74386,74387],{"class":222,"line":656},[220,74388,1792],{"class":264},[1504,74390,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74392},[74393,74394],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":74109,"description":74117},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":74401,"title":74402,"body":74403,"category":32433,"componentType":25247,"description":74409,"extension":191,"meta":74639,"navigation":194,"path":74640,"requiresChild":31900,"seo":74641,"stem":74642,"__hash__":74643},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":74404,"toc":74635},[74405,74407,74410,74412,74414,74417,74419,74633],[11,74406,74402],{"id":15011},[15,74408,74409],{},"Single-line text with any Google font, rendered crisp via a glyph texture",[31281,74411],{"component":74402},[23,74413,31285],{"id":25903},[31287,74415],{":props":74416},"[{\"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,74418,31293],{"id":31292},[246,74420,74421,74461,74499,74537,74575],{":tabs":1557},[212,74422,74424],{"className":334,"code":74423,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,74425,74426,74434,74441,74449,74453],{"__ignoreMap":178},[220,74427,74428,74430,74432],{"class":222,"line":223},[220,74429,343],{"class":264},[220,74431,347],{"class":346},[220,74433,359],{"class":264},[220,74435,74436,74438],{"class":222,"line":179},[220,74437,364],{"class":264},[220,74439,74440],{"class":346},"Text\n",[220,74442,74443,74445,74447],{"class":222,"line":389},[220,74444,9002],{"class":226},[220,74446,353],{"class":264},[220,74448,8958],{"class":230},[220,74450,74451],{"class":222,"line":399},[220,74452,1234],{"class":264},[220,74454,74455,74457,74459],{"class":222,"line":644},[220,74456,402],{"class":264},[220,74458,347],{"class":346},[220,74460,359],{"class":264},[212,74462,74463],{"className":409,"code":74423,"language":411,"meta":178,"style":178},[99,74464,74465,74473,74479,74487,74491],{"__ignoreMap":178},[220,74466,74467,74469,74471],{"class":222,"line":223},[220,74468,343],{"class":264},[220,74470,347],{"class":420},[220,74472,359],{"class":264},[220,74474,74475,74477],{"class":222,"line":179},[220,74476,364],{"class":264},[220,74478,74440],{"class":420},[220,74480,74481,74483,74485],{"class":222,"line":389},[220,74482,9002],{"class":226},[220,74484,353],{"class":260},[220,74486,8958],{"class":230},[220,74488,74489],{"class":222,"line":399},[220,74490,1234],{"class":264},[220,74492,74493,74495,74497],{"class":222,"line":644},[220,74494,402],{"class":264},[220,74496,347],{"class":420},[220,74498,359],{"class":264},[212,74500,74501],{"className":2844,"code":74423,"language":2846,"meta":178,"style":178},[99,74502,74503,74511,74517,74525,74529],{"__ignoreMap":178},[220,74504,74505,74507,74509],{"class":222,"line":223},[220,74506,343],{"class":264},[220,74508,347],{"class":420},[220,74510,359],{"class":264},[220,74512,74513,74515],{"class":222,"line":179},[220,74514,364],{"class":264},[220,74516,74440],{"class":420},[220,74518,74519,74521,74523],{"class":222,"line":389},[220,74520,9002],{"class":226},[220,74522,353],{"class":264},[220,74524,8958],{"class":230},[220,74526,74527],{"class":222,"line":399},[220,74528,1234],{"class":264},[220,74530,74531,74533,74535],{"class":222,"line":644},[220,74532,402],{"class":264},[220,74534,347],{"class":420},[220,74536,359],{"class":264},[212,74538,74539],{"className":468,"code":74423,"language":469,"meta":178,"style":178},[99,74540,74541,74549,74555,74563,74567],{"__ignoreMap":178},[220,74542,74543,74545,74547],{"class":222,"line":223},[220,74544,343],{"class":264},[220,74546,347],{"class":420},[220,74548,359],{"class":264},[220,74550,74551,74553],{"class":222,"line":179},[220,74552,364],{"class":264},[220,74554,74440],{"class":420},[220,74556,74557,74559,74561],{"class":222,"line":389},[220,74558,9002],{"class":226},[220,74560,353],{"class":260},[220,74562,8958],{"class":230},[220,74564,74565],{"class":222,"line":399},[220,74566,1234],{"class":264},[220,74568,74569,74571,74573],{"class":222,"line":644},[220,74570,402],{"class":264},[220,74572,347],{"class":420},[220,74574,359],{"class":264},[212,74576,74578],{"className":251,"code":74577,"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,74579,74580,74590,74594,74608,74612,74625,74629],{"__ignoreMap":178},[220,74581,74582,74584,74586,74588],{"class":222,"line":223},[220,74583,261],{"class":260},[220,74585,10879],{"class":264},[220,74587,268],{"class":260},[220,74589,4007],{"class":230},[220,74591,74592],{"class":222,"line":179},[220,74593,647],{"emptyLinePlaceholder":194},[220,74595,74596,74598,74600,74602,74604,74606],{"class":222,"line":389},[220,74597,1735],{"class":260},[220,74599,1738],{"class":420},[220,74601,1741],{"class":260},[220,74603,1744],{"class":260},[220,74605,1747],{"class":226},[220,74607,1750],{"class":264},[220,74609,74610],{"class":222,"line":399},[220,74611,1765],{"class":264},[220,74613,74614,74616,74619,74621,74623],{"class":222,"line":644},[220,74615,1770],{"class":264},[220,74617,74618],{"class":230},"'Text'",[220,74620,1776],{"class":264},[220,74622,9536],{"class":230},[220,74624,1782],{"class":264},[220,74626,74627],{"class":222,"line":650},[220,74628,1787],{"class":264},[220,74630,74631],{"class":222,"line":656},[220,74632,1792],{"class":264},[1504,74634,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74636},[74637,74638],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":74402,"description":74409},"docs\u002Fcomponents\u002FText","XVakxHcsnsleR-OPeuBjXXWqbtjRLBHmrZn_iCmGLSo",{"id":74645,"title":22537,"body":74646,"category":35939,"componentType":25247,"description":74653,"extension":191,"meta":74894,"navigation":194,"path":74895,"requiresChild":31900,"seo":74896,"stem":74897,"__hash__":74898},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":74647,"toc":74890},[74648,74651,74654,74656,74658,74661,74663,74888],[11,74649,22537],{"id":74650},"thinfilm",[15,74652,74653],{},"Iridescent thin-film edge",[31281,74655],{"component":22537},[23,74657,31285],{"id":25903},[31287,74659],{":props":74660},"[{\"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,74662,31293],{"id":31292},[246,74664,74665,74705,74748,74788,74830],{":tabs":1557},[212,74666,74668],{"className":334,"code":74667,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,74669,74670,74678,74685,74693,74697],{"__ignoreMap":178},[220,74671,74672,74674,74676],{"class":222,"line":223},[220,74673,343],{"class":264},[220,74675,347],{"class":346},[220,74677,359],{"class":264},[220,74679,74680,74682],{"class":222,"line":179},[220,74681,364],{"class":264},[220,74683,74684],{"class":346},"ThinFilm\n",[220,74686,74687,74689,74691],{"class":222,"line":389},[220,74688,19739],{"class":226},[220,74690,353],{"class":264},[220,74692,35995],{"class":230},[220,74694,74695],{"class":222,"line":399},[220,74696,1234],{"class":264},[220,74698,74699,74701,74703],{"class":222,"line":644},[220,74700,402],{"class":264},[220,74702,347],{"class":346},[220,74704,359],{"class":264},[212,74706,74708],{"className":409,"code":74707,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,74709,74710,74718,74724,74736,74740],{"__ignoreMap":178},[220,74711,74712,74714,74716],{"class":222,"line":223},[220,74713,343],{"class":264},[220,74715,347],{"class":420},[220,74717,359],{"class":264},[220,74719,74720,74722],{"class":222,"line":179},[220,74721,364],{"class":264},[220,74723,74684],{"class":420},[220,74725,74726,74728,74730,74732,74734],{"class":222,"line":389},[220,74727,19850],{"class":226},[220,74729,353],{"class":260},[220,74731,743],{"class":264},[220,74733,8043],{"class":420},[220,74735,749],{"class":264},[220,74737,74738],{"class":222,"line":399},[220,74739,1234],{"class":264},[220,74741,74742,74744,74746],{"class":222,"line":644},[220,74743,402],{"class":264},[220,74745,347],{"class":420},[220,74747,359],{"class":264},[212,74749,74750],{"className":2844,"code":74707,"language":2846,"meta":178,"style":178},[99,74751,74752,74760,74766,74776,74780],{"__ignoreMap":178},[220,74753,74754,74756,74758],{"class":222,"line":223},[220,74755,343],{"class":264},[220,74757,347],{"class":420},[220,74759,359],{"class":264},[220,74761,74762,74764],{"class":222,"line":179},[220,74763,364],{"class":264},[220,74765,74684],{"class":420},[220,74767,74768,74770,74772,74774],{"class":222,"line":389},[220,74769,19850],{"class":226},[220,74771,29241],{"class":264},[220,74773,8043],{"class":420},[220,74775,749],{"class":264},[220,74777,74778],{"class":222,"line":399},[220,74779,1234],{"class":264},[220,74781,74782,74784,74786],{"class":222,"line":644},[220,74783,402],{"class":264},[220,74785,347],{"class":420},[220,74787,359],{"class":264},[212,74789,74790],{"className":468,"code":74707,"language":469,"meta":178,"style":178},[99,74791,74792,74800,74806,74818,74822],{"__ignoreMap":178},[220,74793,74794,74796,74798],{"class":222,"line":223},[220,74795,343],{"class":264},[220,74797,347],{"class":420},[220,74799,359],{"class":264},[220,74801,74802,74804],{"class":222,"line":179},[220,74803,364],{"class":264},[220,74805,74684],{"class":420},[220,74807,74808,74810,74812,74814,74816],{"class":222,"line":389},[220,74809,19850],{"class":226},[220,74811,353],{"class":260},[220,74813,743],{"class":264},[220,74815,8043],{"class":420},[220,74817,749],{"class":264},[220,74819,74820],{"class":222,"line":399},[220,74821,1234],{"class":264},[220,74823,74824,74826,74828],{"class":222,"line":644},[220,74825,402],{"class":264},[220,74827,347],{"class":420},[220,74829,359],{"class":264},[212,74831,74833],{"className":251,"code":74832,"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,74834,74835,74845,74849,74863,74867,74880,74884],{"__ignoreMap":178},[220,74836,74837,74839,74841,74843],{"class":222,"line":223},[220,74838,261],{"class":260},[220,74840,10879],{"class":264},[220,74842,268],{"class":260},[220,74844,4007],{"class":230},[220,74846,74847],{"class":222,"line":179},[220,74848,647],{"emptyLinePlaceholder":194},[220,74850,74851,74853,74855,74857,74859,74861],{"class":222,"line":389},[220,74852,1735],{"class":260},[220,74854,1738],{"class":420},[220,74856,1741],{"class":260},[220,74858,1744],{"class":260},[220,74860,1747],{"class":226},[220,74862,1750],{"class":264},[220,74864,74865],{"class":222,"line":399},[220,74866,1765],{"class":264},[220,74868,74869,74871,74874,74876,74878],{"class":222,"line":644},[220,74870,1770],{"class":264},[220,74872,74873],{"class":230},"'ThinFilm'",[220,74875,31573],{"class":264},[220,74877,8043],{"class":420},[220,74879,1782],{"class":264},[220,74881,74882],{"class":222,"line":650},[220,74883,1787],{"class":264},[220,74885,74886],{"class":222,"line":656},[220,74887,1792],{"class":264},[1504,74889,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74891},[74892,74893],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":22537,"description":74653},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":74900,"title":74901,"body":74902,"category":31604,"componentType":25253,"description":74909,"extension":191,"meta":75226,"navigation":194,"path":75227,"requiresChild":194,"seo":75228,"stem":75229,"__hash__":75230},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":74903,"toc":75222},[74904,74907,74910,74912,74914,74917,74919,75220],[11,74905,74901],{"id":74906},"tiltshift",[15,74908,74909],{},"Selective focus blur mimicking tilt-shift photography",[31281,74911],{"component":74901},[23,74913,31285],{"id":25903},[31287,74915],{":props":74916},"[{\"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,74918,31293],{"id":31292},[246,74920,74921,74977,75036,75092,75150],{":tabs":1557},[212,74922,74924],{"className":334,"code":74923,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,74925,74926,74934,74941,74949,74953,74961,74969],{"__ignoreMap":178},[220,74927,74928,74930,74932],{"class":222,"line":223},[220,74929,343],{"class":264},[220,74931,347],{"class":346},[220,74933,359],{"class":264},[220,74935,74936,74938],{"class":222,"line":179},[220,74937,364],{"class":264},[220,74939,74940],{"class":346},"TiltShift\n",[220,74942,74943,74945,74947],{"class":222,"line":389},[220,74944,19739],{"class":226},[220,74946,353],{"class":264},[220,74948,34450],{"class":230},[220,74950,74951],{"class":222,"line":399},[220,74952,31329],{"class":264},[220,74954,74955,74957,74959],{"class":222,"line":644},[220,74956,2550],{"class":264},[220,74958,2553],{"class":346},[220,74960,386],{"class":264},[220,74962,74963,74965,74967],{"class":222,"line":650},[220,74964,2567],{"class":264},[220,74966,74901],{"class":346},[220,74968,359],{"class":264},[220,74970,74971,74973,74975],{"class":222,"line":656},[220,74972,402],{"class":264},[220,74974,347],{"class":346},[220,74976,359],{"class":264},[212,74978,74980],{"className":409,"code":74979,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,74981,74982,74990,74996,75008,75012,75020,75028],{"__ignoreMap":178},[220,74983,74984,74986,74988],{"class":222,"line":223},[220,74985,343],{"class":264},[220,74987,347],{"class":420},[220,74989,359],{"class":264},[220,74991,74992,74994],{"class":222,"line":179},[220,74993,364],{"class":264},[220,74995,74940],{"class":420},[220,74997,74998,75000,75002,75004,75006],{"class":222,"line":389},[220,74999,19850],{"class":226},[220,75001,353],{"class":260},[220,75003,743],{"class":264},[220,75005,34508],{"class":420},[220,75007,749],{"class":264},[220,75009,75010],{"class":222,"line":399},[220,75011,31329],{"class":264},[220,75013,75014,75016,75018],{"class":222,"line":644},[220,75015,2550],{"class":264},[220,75017,2553],{"class":420},[220,75019,386],{"class":264},[220,75021,75022,75024,75026],{"class":222,"line":650},[220,75023,2567],{"class":264},[220,75025,74901],{"class":420},[220,75027,359],{"class":264},[220,75029,75030,75032,75034],{"class":222,"line":656},[220,75031,402],{"class":264},[220,75033,347],{"class":420},[220,75035,359],{"class":264},[212,75037,75038],{"className":2844,"code":74979,"language":2846,"meta":178,"style":178},[99,75039,75040,75048,75054,75064,75068,75076,75084],{"__ignoreMap":178},[220,75041,75042,75044,75046],{"class":222,"line":223},[220,75043,343],{"class":264},[220,75045,347],{"class":420},[220,75047,359],{"class":264},[220,75049,75050,75052],{"class":222,"line":179},[220,75051,364],{"class":264},[220,75053,74940],{"class":420},[220,75055,75056,75058,75060,75062],{"class":222,"line":389},[220,75057,19850],{"class":226},[220,75059,29241],{"class":264},[220,75061,34508],{"class":420},[220,75063,749],{"class":264},[220,75065,75066],{"class":222,"line":399},[220,75067,31329],{"class":264},[220,75069,75070,75072,75074],{"class":222,"line":644},[220,75071,2550],{"class":264},[220,75073,2553],{"class":420},[220,75075,386],{"class":264},[220,75077,75078,75080,75082],{"class":222,"line":650},[220,75079,2567],{"class":264},[220,75081,74901],{"class":420},[220,75083,359],{"class":264},[220,75085,75086,75088,75090],{"class":222,"line":656},[220,75087,402],{"class":264},[220,75089,347],{"class":420},[220,75091,359],{"class":264},[212,75093,75094],{"className":468,"code":74979,"language":469,"meta":178,"style":178},[99,75095,75096,75104,75110,75122,75126,75134,75142],{"__ignoreMap":178},[220,75097,75098,75100,75102],{"class":222,"line":223},[220,75099,343],{"class":264},[220,75101,347],{"class":420},[220,75103,359],{"class":264},[220,75105,75106,75108],{"class":222,"line":179},[220,75107,364],{"class":264},[220,75109,74940],{"class":420},[220,75111,75112,75114,75116,75118,75120],{"class":222,"line":389},[220,75113,19850],{"class":226},[220,75115,353],{"class":260},[220,75117,743],{"class":264},[220,75119,34508],{"class":420},[220,75121,749],{"class":264},[220,75123,75124],{"class":222,"line":399},[220,75125,31329],{"class":264},[220,75127,75128,75130,75132],{"class":222,"line":644},[220,75129,2550],{"class":264},[220,75131,2553],{"class":420},[220,75133,386],{"class":264},[220,75135,75136,75138,75140],{"class":222,"line":650},[220,75137,2567],{"class":264},[220,75139,74901],{"class":420},[220,75141,359],{"class":264},[220,75143,75144,75146,75148],{"class":222,"line":656},[220,75145,402],{"class":264},[220,75147,347],{"class":420},[220,75149,359],{"class":264},[212,75151,75153],{"className":251,"code":75152,"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,75154,75155,75165,75169,75183,75187,75200,75208,75212,75216],{"__ignoreMap":178},[220,75156,75157,75159,75161,75163],{"class":222,"line":223},[220,75158,261],{"class":260},[220,75160,10879],{"class":264},[220,75162,268],{"class":260},[220,75164,4007],{"class":230},[220,75166,75167],{"class":222,"line":179},[220,75168,647],{"emptyLinePlaceholder":194},[220,75170,75171,75173,75175,75177,75179,75181],{"class":222,"line":389},[220,75172,1735],{"class":260},[220,75174,1738],{"class":420},[220,75176,1741],{"class":260},[220,75178,1744],{"class":260},[220,75180,1747],{"class":226},[220,75182,1750],{"class":264},[220,75184,75185],{"class":222,"line":399},[220,75186,1765],{"class":264},[220,75188,75189,75191,75194,75196,75198],{"class":222,"line":644},[220,75190,1770],{"class":264},[220,75192,75193],{"class":230},"'TiltShift'",[220,75195,31573],{"class":264},[220,75197,34508],{"class":420},[220,75199,6912],{"class":264},[220,75201,75202,75204,75206],{"class":222,"line":650},[220,75203,6380],{"class":264},[220,75205,3206],{"class":230},[220,75207,2465],{"class":264},[220,75209,75210],{"class":222,"line":656},[220,75211,6397],{"class":264},[220,75213,75214],{"class":222,"line":673},[220,75215,1787],{"class":264},[220,75217,75218],{"class":222,"line":682},[220,75219,1792],{"class":264},[1504,75221,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75223},[75224,75225],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":74901,"description":74909},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":75232,"title":75233,"body":75234,"category":32176,"componentType":25253,"description":75241,"extension":191,"meta":75502,"navigation":194,"path":75503,"requiresChild":194,"seo":75504,"stem":75505,"__hash__":75506},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":75235,"toc":75498},[75236,75239,75242,75244,75246,75249,75251,75496],[11,75237,75233],{"id":75238},"timetrail",[15,75240,75241],{},"An Echo-style temporal trail — whatever moves sheds a smooth, decaying long-exposure ghost trail (frame-difference Motion mode works on opaque images and video; Alpha mode trails a shape's coverage), with optional zoom-feedback tunnels and rainbow light-painting",[31281,75243],{"component":75233},[23,75245,31285],{"id":25903},[31287,75247],{":props":75248},"[{\"name\":\"trailSource\",\"type\":\"\\\"motion\\\" | \\\"alpha\\\"\",\"default\":\"motion\",\"description\":\"What sheds the trail — Motion trails whatever changes frame-to-frame (works on opaque images and video), Alpha trails the child's transparency coverage (best for a clean shape over empty canvas)\"},{\"name\":\"motionThreshold\",\"type\":\"number\",\"default\":\"0.06\",\"description\":\"How much a pixel must change between frames to shed a trail (Motion source only) — lower catches subtle movement, higher only fast motion\"},{\"name\":\"trailLength\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"How long the trail lingers, in seconds — the time constant of the fade (the star control)\"},{\"name\":\"diffusion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much the trail smears and softens as it fades — 0 keeps crisp ghost frames, higher melts them together\"},{\"name\":\"trailOpacity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Overall strength of the trail behind the live frame\"},{\"name\":\"trailBlend\",\"type\":\"\\\"normal\\\" | \\\"add\\\" | \\\"screen\\\" | \\\"multiply\\\" | \\\"overlay\\\" | \\\"softLight\\\" | \\\"hardLight\\\" | \\\"darken\\\" | \\\"lighten\\\" | \\\"colorDodge\\\" | \\\"colorBurn\\\" | \\\"linearBurn\\\" | \\\"difference\\\" | \\\"exclusion\\\" | \\\"hue\\\" | \\\"saturation\\\" | \\\"color\\\" | \\\"luminosity\\\"\",\"default\":\"normal\",\"description\":\"How the trail combines with the frame — Add \u002F Screen build glowing light-painting trails, Multiply lays down dark ink ghosts, plus the full standard blend set\"},{\"name\":\"driftX\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Sideways drift of the trail per second — smears the trail in a direction\"},{\"name\":\"driftY\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vertical drift of the trail per second\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Per-frame zoom of the trail around the centre — above 1 pulls the trail into an outward tunnel, below 1 sucks it inward\"},{\"name\":\"tintMode\",\"type\":\"\\\"none\\\" | \\\"color\\\" | \\\"rainbow\\\"\",\"default\":\"none\",\"description\":\"Colour the trail — Color tints it a single hue, Rainbow cycles hue as the trail ages\"},{\"name\":\"tint\",\"type\":\"string\",\"default\":\"#33aaff\",\"description\":\"Trail tint colour (used in Color mode)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Simulation speed. 0 freezes the trail in place.\"}]",[23,75250,31293],{"id":31292},[246,75252,75253,75298,75342,75386,75430],{":tabs":1557},[212,75254,75256],{"className":334,"code":75255,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,75257,75258,75266,75274,75282,75290],{"__ignoreMap":178},[220,75259,75260,75262,75264],{"class":222,"line":223},[220,75261,343],{"class":264},[220,75263,347],{"class":346},[220,75265,359],{"class":264},[220,75267,75268,75270,75272],{"class":222,"line":179},[220,75269,364],{"class":264},[220,75271,75233],{"class":346},[220,75273,359],{"class":264},[220,75275,75276,75278,75280],{"class":222,"line":389},[220,75277,2550],{"class":264},[220,75279,2553],{"class":346},[220,75281,386],{"class":264},[220,75283,75284,75286,75288],{"class":222,"line":399},[220,75285,2567],{"class":264},[220,75287,75233],{"class":346},[220,75289,359],{"class":264},[220,75291,75292,75294,75296],{"class":222,"line":644},[220,75293,402],{"class":264},[220,75295,347],{"class":346},[220,75297,359],{"class":264},[212,75299,75300],{"className":409,"code":75255,"language":411,"meta":178,"style":178},[99,75301,75302,75310,75318,75326,75334],{"__ignoreMap":178},[220,75303,75304,75306,75308],{"class":222,"line":223},[220,75305,343],{"class":264},[220,75307,347],{"class":420},[220,75309,359],{"class":264},[220,75311,75312,75314,75316],{"class":222,"line":179},[220,75313,364],{"class":264},[220,75315,75233],{"class":420},[220,75317,359],{"class":264},[220,75319,75320,75322,75324],{"class":222,"line":389},[220,75321,2550],{"class":264},[220,75323,2553],{"class":420},[220,75325,386],{"class":264},[220,75327,75328,75330,75332],{"class":222,"line":399},[220,75329,2567],{"class":264},[220,75331,75233],{"class":420},[220,75333,359],{"class":264},[220,75335,75336,75338,75340],{"class":222,"line":644},[220,75337,402],{"class":264},[220,75339,347],{"class":420},[220,75341,359],{"class":264},[212,75343,75344],{"className":2844,"code":75255,"language":2846,"meta":178,"style":178},[99,75345,75346,75354,75362,75370,75378],{"__ignoreMap":178},[220,75347,75348,75350,75352],{"class":222,"line":223},[220,75349,343],{"class":264},[220,75351,347],{"class":420},[220,75353,359],{"class":264},[220,75355,75356,75358,75360],{"class":222,"line":179},[220,75357,364],{"class":264},[220,75359,75233],{"class":420},[220,75361,359],{"class":264},[220,75363,75364,75366,75368],{"class":222,"line":389},[220,75365,2550],{"class":264},[220,75367,2553],{"class":420},[220,75369,386],{"class":264},[220,75371,75372,75374,75376],{"class":222,"line":399},[220,75373,2567],{"class":264},[220,75375,75233],{"class":420},[220,75377,359],{"class":264},[220,75379,75380,75382,75384],{"class":222,"line":644},[220,75381,402],{"class":264},[220,75383,347],{"class":420},[220,75385,359],{"class":264},[212,75387,75388],{"className":468,"code":75255,"language":469,"meta":178,"style":178},[99,75389,75390,75398,75406,75414,75422],{"__ignoreMap":178},[220,75391,75392,75394,75396],{"class":222,"line":223},[220,75393,343],{"class":264},[220,75395,347],{"class":420},[220,75397,359],{"class":264},[220,75399,75400,75402,75404],{"class":222,"line":179},[220,75401,364],{"class":264},[220,75403,75233],{"class":420},[220,75405,359],{"class":264},[220,75407,75408,75410,75412],{"class":222,"line":389},[220,75409,2550],{"class":264},[220,75411,2553],{"class":420},[220,75413,386],{"class":264},[220,75415,75416,75418,75420],{"class":222,"line":399},[220,75417,2567],{"class":264},[220,75419,75233],{"class":420},[220,75421,359],{"class":264},[220,75423,75424,75426,75428],{"class":222,"line":644},[220,75425,402],{"class":264},[220,75427,347],{"class":420},[220,75429,359],{"class":264},[212,75431,75433],{"className":251,"code":75432,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'TimeTrail', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,75434,75435,75445,75449,75463,75467,75476,75484,75488,75492],{"__ignoreMap":178},[220,75436,75437,75439,75441,75443],{"class":222,"line":223},[220,75438,261],{"class":260},[220,75440,10879],{"class":264},[220,75442,268],{"class":260},[220,75444,4007],{"class":230},[220,75446,75447],{"class":222,"line":179},[220,75448,647],{"emptyLinePlaceholder":194},[220,75450,75451,75453,75455,75457,75459,75461],{"class":222,"line":389},[220,75452,1735],{"class":260},[220,75454,1738],{"class":420},[220,75456,1741],{"class":260},[220,75458,1744],{"class":260},[220,75460,1747],{"class":226},[220,75462,1750],{"class":264},[220,75464,75465],{"class":222,"line":399},[220,75466,1765],{"class":264},[220,75468,75469,75471,75474],{"class":222,"line":644},[220,75470,1770],{"class":264},[220,75472,75473],{"class":230},"'TimeTrail'",[220,75475,6375],{"class":264},[220,75477,75478,75480,75482],{"class":222,"line":650},[220,75479,6380],{"class":264},[220,75481,3206],{"class":230},[220,75483,2465],{"class":264},[220,75485,75486],{"class":222,"line":656},[220,75487,6397],{"class":264},[220,75489,75490],{"class":222,"line":673},[220,75491,1787],{"class":264},[220,75493,75494],{"class":222,"line":682},[220,75495,1792],{"class":264},[1504,75497,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":75499},[75500,75501],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":75233,"description":75241},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":75508,"title":75509,"body":75510,"category":35738,"componentType":25253,"description":75517,"extension":191,"meta":75825,"navigation":194,"path":75826,"requiresChild":194,"seo":75827,"stem":75828,"__hash__":75829},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":75511,"toc":75821},[75512,75515,75518,75520,75522,75525,75527,75819],[11,75513,75509],{"id":75514},"tint",[15,75516,75517],{},"Apply a color tint to the image",[31281,75519],{"component":75509},[23,75521,31285],{"id":25903},[31287,75523],{":props":75524},"[{\"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,75526,31293],{"id":31292},[246,75528,75529,75586,75640,75694,75748],{":tabs":1557},[212,75530,75532],{"className":334,"code":75531,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,75533,75534,75542,75549,75558,75562,75570,75578],{"__ignoreMap":178},[220,75535,75536,75538,75540],{"class":222,"line":223},[220,75537,343],{"class":264},[220,75539,347],{"class":346},[220,75541,359],{"class":264},[220,75543,75544,75546],{"class":222,"line":179},[220,75545,364],{"class":264},[220,75547,75548],{"class":346},"Tint\n",[220,75550,75551,75553,75555],{"class":222,"line":389},[220,75552,9002],{"class":226},[220,75554,353],{"class":264},[220,75556,75557],{"class":230},"\"#ff8800\"\n",[220,75559,75560],{"class":222,"line":399},[220,75561,31329],{"class":264},[220,75563,75564,75566,75568],{"class":222,"line":644},[220,75565,2550],{"class":264},[220,75567,2553],{"class":346},[220,75569,386],{"class":264},[220,75571,75572,75574,75576],{"class":222,"line":650},[220,75573,2567],{"class":264},[220,75575,75509],{"class":346},[220,75577,359],{"class":264},[220,75579,75580,75582,75584],{"class":222,"line":656},[220,75581,402],{"class":264},[220,75583,347],{"class":346},[220,75585,359],{"class":264},[212,75587,75588],{"className":409,"code":75531,"language":411,"meta":178,"style":178},[99,75589,75590,75598,75604,75612,75616,75624,75632],{"__ignoreMap":178},[220,75591,75592,75594,75596],{"class":222,"line":223},[220,75593,343],{"class":264},[220,75595,347],{"class":420},[220,75597,359],{"class":264},[220,75599,75600,75602],{"class":222,"line":179},[220,75601,364],{"class":264},[220,75603,75548],{"class":420},[220,75605,75606,75608,75610],{"class":222,"line":389},[220,75607,9002],{"class":226},[220,75609,353],{"class":260},[220,75611,75557],{"class":230},[220,75613,75614],{"class":222,"line":399},[220,75615,31329],{"class":264},[220,75617,75618,75620,75622],{"class":222,"line":644},[220,75619,2550],{"class":264},[220,75621,2553],{"class":420},[220,75623,386],{"class":264},[220,75625,75626,75628,75630],{"class":222,"line":650},[220,75627,2567],{"class":264},[220,75629,75509],{"class":420},[220,75631,359],{"class":264},[220,75633,75634,75636,75638],{"class":222,"line":656},[220,75635,402],{"class":264},[220,75637,347],{"class":420},[220,75639,359],{"class":264},[212,75641,75642],{"className":2844,"code":75531,"language":2846,"meta":178,"style":178},[99,75643,75644,75652,75658,75666,75670,75678,75686],{"__ignoreMap":178},[220,75645,75646,75648,75650],{"class":222,"line":223},[220,75647,343],{"class":264},[220,75649,347],{"class":420},[220,75651,359],{"class":264},[220,75653,75654,75656],{"class":222,"line":179},[220,75655,364],{"class":264},[220,75657,75548],{"class":420},[220,75659,75660,75662,75664],{"class":222,"line":389},[220,75661,9002],{"class":226},[220,75663,353],{"class":264},[220,75665,75557],{"class":230},[220,75667,75668],{"class":222,"line":399},[220,75669,31329],{"class":264},[220,75671,75672,75674,75676],{"class":222,"line":644},[220,75673,2550],{"class":264},[220,75675,2553],{"class":420},[220,75677,386],{"class":264},[220,75679,75680,75682,75684],{"class":222,"line":650},[220,75681,2567],{"class":264},[220,75683,75509],{"class":420},[220,75685,359],{"class":264},[220,75687,75688,75690,75692],{"class":222,"line":656},[220,75689,402],{"class":264},[220,75691,347],{"class":420},[220,75693,359],{"class":264},[212,75695,75696],{"className":468,"code":75531,"language":469,"meta":178,"style":178},[99,75697,75698,75706,75712,75720,75724,75732,75740],{"__ignoreMap":178},[220,75699,75700,75702,75704],{"class":222,"line":223},[220,75701,343],{"class":264},[220,75703,347],{"class":420},[220,75705,359],{"class":264},[220,75707,75708,75710],{"class":222,"line":179},[220,75709,364],{"class":264},[220,75711,75548],{"class":420},[220,75713,75714,75716,75718],{"class":222,"line":389},[220,75715,9002],{"class":226},[220,75717,353],{"class":260},[220,75719,75557],{"class":230},[220,75721,75722],{"class":222,"line":399},[220,75723,31329],{"class":264},[220,75725,75726,75728,75730],{"class":222,"line":644},[220,75727,2550],{"class":264},[220,75729,2553],{"class":420},[220,75731,386],{"class":264},[220,75733,75734,75736,75738],{"class":222,"line":650},[220,75735,2567],{"class":264},[220,75737,75509],{"class":420},[220,75739,359],{"class":264},[220,75741,75742,75744,75746],{"class":222,"line":656},[220,75743,402],{"class":264},[220,75745,347],{"class":420},[220,75747,359],{"class":264},[212,75749,75751],{"className":251,"code":75750,"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,75752,75753,75763,75767,75781,75785,75799,75807,75811,75815],{"__ignoreMap":178},[220,75754,75755,75757,75759,75761],{"class":222,"line":223},[220,75756,261],{"class":260},[220,75758,10879],{"class":264},[220,75760,268],{"class":260},[220,75762,4007],{"class":230},[220,75764,75765],{"class":222,"line":179},[220,75766,647],{"emptyLinePlaceholder":194},[220,75768,75769,75771,75773,75775,75777,75779],{"class":222,"line":389},[220,75770,1735],{"class":260},[220,75772,1738],{"class":420},[220,75774,1741],{"class":260},[220,75776,1744],{"class":260},[220,75778,1747],{"class":226},[220,75780,1750],{"class":264},[220,75782,75783],{"class":222,"line":399},[220,75784,1765],{"class":264},[220,75786,75787,75789,75792,75794,75797],{"class":222,"line":644},[220,75788,1770],{"class":264},[220,75790,75791],{"class":230},"'Tint'",[220,75793,1776],{"class":264},[220,75795,75796],{"class":230},"'#ff8800'",[220,75798,6912],{"class":264},[220,75800,75801,75803,75805],{"class":222,"line":650},[220,75802,6380],{"class":264},[220,75804,3206],{"class":230},[220,75806,2465],{"class":264},[220,75808,75809],{"class":222,"line":656},[220,75810,6397],{"class":264},[220,75812,75813],{"class":222,"line":673},[220,75814,1787],{"class":264},[220,75816,75817],{"class":222,"line":682},[220,75818,1792],{"class":264},[1504,75820,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75822},[75823,75824],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":75509,"description":75517},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":75831,"title":75832,"body":75833,"category":15275,"componentType":25247,"description":75840,"extension":191,"meta":76070,"navigation":194,"path":76071,"requiresChild":31900,"seo":76072,"stem":76073,"__hash__":76074},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":75834,"toc":76066},[75835,75838,75841,75843,75845,75848,75850,76064],[11,75836,75832],{"id":75837},"trapezoid",[15,75839,75840],{},"Trapezoid with adjustable top and bottom widths and height",[31281,75842],{"component":75832},[23,75844,31285],{"id":25903},[31287,75846],{":props":75847},"[{\"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,75849,31293],{"id":31292},[246,75851,75852,75892,75930,75968,76006],{":tabs":1557},[212,75853,75855],{"className":334,"code":75854,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75856,75857,75865,75872,75880,75884],{"__ignoreMap":178},[220,75858,75859,75861,75863],{"class":222,"line":223},[220,75860,343],{"class":264},[220,75862,347],{"class":346},[220,75864,359],{"class":264},[220,75866,75867,75869],{"class":222,"line":179},[220,75868,364],{"class":264},[220,75870,75871],{"class":346},"Trapezoid\n",[220,75873,75874,75876,75878],{"class":222,"line":389},[220,75875,9002],{"class":226},[220,75877,353],{"class":264},[220,75879,8958],{"class":230},[220,75881,75882],{"class":222,"line":399},[220,75883,1234],{"class":264},[220,75885,75886,75888,75890],{"class":222,"line":644},[220,75887,402],{"class":264},[220,75889,347],{"class":346},[220,75891,359],{"class":264},[212,75893,75894],{"className":409,"code":75854,"language":411,"meta":178,"style":178},[99,75895,75896,75904,75910,75918,75922],{"__ignoreMap":178},[220,75897,75898,75900,75902],{"class":222,"line":223},[220,75899,343],{"class":264},[220,75901,347],{"class":420},[220,75903,359],{"class":264},[220,75905,75906,75908],{"class":222,"line":179},[220,75907,364],{"class":264},[220,75909,75871],{"class":420},[220,75911,75912,75914,75916],{"class":222,"line":389},[220,75913,9002],{"class":226},[220,75915,353],{"class":260},[220,75917,8958],{"class":230},[220,75919,75920],{"class":222,"line":399},[220,75921,1234],{"class":264},[220,75923,75924,75926,75928],{"class":222,"line":644},[220,75925,402],{"class":264},[220,75927,347],{"class":420},[220,75929,359],{"class":264},[212,75931,75932],{"className":2844,"code":75854,"language":2846,"meta":178,"style":178},[99,75933,75934,75942,75948,75956,75960],{"__ignoreMap":178},[220,75935,75936,75938,75940],{"class":222,"line":223},[220,75937,343],{"class":264},[220,75939,347],{"class":420},[220,75941,359],{"class":264},[220,75943,75944,75946],{"class":222,"line":179},[220,75945,364],{"class":264},[220,75947,75871],{"class":420},[220,75949,75950,75952,75954],{"class":222,"line":389},[220,75951,9002],{"class":226},[220,75953,353],{"class":264},[220,75955,8958],{"class":230},[220,75957,75958],{"class":222,"line":399},[220,75959,1234],{"class":264},[220,75961,75962,75964,75966],{"class":222,"line":644},[220,75963,402],{"class":264},[220,75965,347],{"class":420},[220,75967,359],{"class":264},[212,75969,75970],{"className":468,"code":75854,"language":469,"meta":178,"style":178},[99,75971,75972,75980,75986,75994,75998],{"__ignoreMap":178},[220,75973,75974,75976,75978],{"class":222,"line":223},[220,75975,343],{"class":264},[220,75977,347],{"class":420},[220,75979,359],{"class":264},[220,75981,75982,75984],{"class":222,"line":179},[220,75983,364],{"class":264},[220,75985,75871],{"class":420},[220,75987,75988,75990,75992],{"class":222,"line":389},[220,75989,9002],{"class":226},[220,75991,353],{"class":260},[220,75993,8958],{"class":230},[220,75995,75996],{"class":222,"line":399},[220,75997,1234],{"class":264},[220,75999,76000,76002,76004],{"class":222,"line":644},[220,76001,402],{"class":264},[220,76003,347],{"class":420},[220,76005,359],{"class":264},[212,76007,76009],{"className":251,"code":76008,"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,76010,76011,76021,76025,76039,76043,76056,76060],{"__ignoreMap":178},[220,76012,76013,76015,76017,76019],{"class":222,"line":223},[220,76014,261],{"class":260},[220,76016,10879],{"class":264},[220,76018,268],{"class":260},[220,76020,4007],{"class":230},[220,76022,76023],{"class":222,"line":179},[220,76024,647],{"emptyLinePlaceholder":194},[220,76026,76027,76029,76031,76033,76035,76037],{"class":222,"line":389},[220,76028,1735],{"class":260},[220,76030,1738],{"class":420},[220,76032,1741],{"class":260},[220,76034,1744],{"class":260},[220,76036,1747],{"class":226},[220,76038,1750],{"class":264},[220,76040,76041],{"class":222,"line":399},[220,76042,1765],{"class":264},[220,76044,76045,76047,76050,76052,76054],{"class":222,"line":644},[220,76046,1770],{"class":264},[220,76048,76049],{"class":230},"'Trapezoid'",[220,76051,1776],{"class":264},[220,76053,9536],{"class":230},[220,76055,1782],{"class":264},[220,76057,76058],{"class":222,"line":650},[220,76059,1787],{"class":264},[220,76061,76062],{"class":222,"line":656},[220,76063,1792],{"class":264},[1504,76065,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76067},[76068,76069],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":75832,"description":75840},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":76076,"title":76077,"body":76078,"category":32433,"componentType":25247,"description":76085,"extension":191,"meta":76270,"navigation":194,"path":76271,"requiresChild":31900,"seo":76272,"stem":76273,"__hash__":76274},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":76079,"toc":76266},[76080,76083,76086,76088,76090,76093,76095,76264],[11,76081,76077],{"id":76082},"triangulargrid",[15,76084,76085],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31281,76087],{"component":76077},[23,76089,31285],{"id":25903},[31287,76091],{":props":76092},"[{\"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,76094,31293],{"id":31292},[246,76096,76097,76126,76154,76182,76210],{":tabs":1557},[212,76098,76100],{"className":334,"code":76099,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,76101,76102,76110,76118],{"__ignoreMap":178},[220,76103,76104,76106,76108],{"class":222,"line":223},[220,76105,343],{"class":264},[220,76107,347],{"class":346},[220,76109,359],{"class":264},[220,76111,76112,76114,76116],{"class":222,"line":179},[220,76113,364],{"class":264},[220,76115,76077],{"class":346},[220,76117,386],{"class":264},[220,76119,76120,76122,76124],{"class":222,"line":389},[220,76121,402],{"class":264},[220,76123,347],{"class":346},[220,76125,359],{"class":264},[212,76127,76128],{"className":409,"code":76099,"language":411,"meta":178,"style":178},[99,76129,76130,76138,76146],{"__ignoreMap":178},[220,76131,76132,76134,76136],{"class":222,"line":223},[220,76133,343],{"class":264},[220,76135,347],{"class":420},[220,76137,359],{"class":264},[220,76139,76140,76142,76144],{"class":222,"line":179},[220,76141,364],{"class":264},[220,76143,76077],{"class":420},[220,76145,386],{"class":264},[220,76147,76148,76150,76152],{"class":222,"line":389},[220,76149,402],{"class":264},[220,76151,347],{"class":420},[220,76153,359],{"class":264},[212,76155,76156],{"className":2844,"code":76099,"language":2846,"meta":178,"style":178},[99,76157,76158,76166,76174],{"__ignoreMap":178},[220,76159,76160,76162,76164],{"class":222,"line":223},[220,76161,343],{"class":264},[220,76163,347],{"class":420},[220,76165,359],{"class":264},[220,76167,76168,76170,76172],{"class":222,"line":179},[220,76169,364],{"class":264},[220,76171,76077],{"class":420},[220,76173,386],{"class":264},[220,76175,76176,76178,76180],{"class":222,"line":389},[220,76177,402],{"class":264},[220,76179,347],{"class":420},[220,76181,359],{"class":264},[212,76183,76184],{"className":468,"code":76099,"language":469,"meta":178,"style":178},[99,76185,76186,76194,76202],{"__ignoreMap":178},[220,76187,76188,76190,76192],{"class":222,"line":223},[220,76189,343],{"class":264},[220,76191,347],{"class":420},[220,76193,359],{"class":264},[220,76195,76196,76198,76200],{"class":222,"line":179},[220,76197,364],{"class":264},[220,76199,76077],{"class":420},[220,76201,386],{"class":264},[220,76203,76204,76206,76208],{"class":222,"line":389},[220,76205,402],{"class":264},[220,76207,347],{"class":420},[220,76209,359],{"class":264},[212,76211,76213],{"className":251,"code":76212,"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,76214,76215,76225,76229,76243,76247,76256,76260],{"__ignoreMap":178},[220,76216,76217,76219,76221,76223],{"class":222,"line":223},[220,76218,261],{"class":260},[220,76220,10879],{"class":264},[220,76222,268],{"class":260},[220,76224,4007],{"class":230},[220,76226,76227],{"class":222,"line":179},[220,76228,647],{"emptyLinePlaceholder":194},[220,76230,76231,76233,76235,76237,76239,76241],{"class":222,"line":389},[220,76232,1735],{"class":260},[220,76234,1738],{"class":420},[220,76236,1741],{"class":260},[220,76238,1744],{"class":260},[220,76240,1747],{"class":226},[220,76242,1750],{"class":264},[220,76244,76245],{"class":222,"line":399},[220,76246,1765],{"class":264},[220,76248,76249,76251,76254],{"class":222,"line":644},[220,76250,1770],{"class":264},[220,76252,76253],{"class":230},"'TriangularGrid'",[220,76255,2465],{"class":264},[220,76257,76258],{"class":222,"line":650},[220,76259,1787],{"class":264},[220,76261,76262],{"class":222,"line":656},[220,76263,1792],{"class":264},[1504,76265,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":76267},[76268,76269],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":76077,"description":76085},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":76276,"title":76277,"body":76278,"category":35738,"componentType":25253,"description":76285,"extension":191,"meta":76546,"navigation":194,"path":76547,"requiresChild":194,"seo":76548,"stem":76549,"__hash__":76550},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":76279,"toc":76542},[76280,76283,76286,76288,76290,76293,76295,76540],[11,76281,76277],{"id":76282},"tritone",[15,76284,76285],{},"Map colors to three tones: shadows, midtones, highlights",[31281,76287],{"component":76277},[23,76289,31285],{"id":25903},[31287,76291],{":props":76292},"[{\"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,76294,31293],{"id":31292},[246,76296,76297,76342,76386,76430,76474],{":tabs":1557},[212,76298,76300],{"className":334,"code":76299,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,76301,76302,76310,76318,76326,76334],{"__ignoreMap":178},[220,76303,76304,76306,76308],{"class":222,"line":223},[220,76305,343],{"class":264},[220,76307,347],{"class":346},[220,76309,359],{"class":264},[220,76311,76312,76314,76316],{"class":222,"line":179},[220,76313,364],{"class":264},[220,76315,76277],{"class":346},[220,76317,359],{"class":264},[220,76319,76320,76322,76324],{"class":222,"line":389},[220,76321,2550],{"class":264},[220,76323,2553],{"class":346},[220,76325,386],{"class":264},[220,76327,76328,76330,76332],{"class":222,"line":399},[220,76329,2567],{"class":264},[220,76331,76277],{"class":346},[220,76333,359],{"class":264},[220,76335,76336,76338,76340],{"class":222,"line":644},[220,76337,402],{"class":264},[220,76339,347],{"class":346},[220,76341,359],{"class":264},[212,76343,76344],{"className":409,"code":76299,"language":411,"meta":178,"style":178},[99,76345,76346,76354,76362,76370,76378],{"__ignoreMap":178},[220,76347,76348,76350,76352],{"class":222,"line":223},[220,76349,343],{"class":264},[220,76351,347],{"class":420},[220,76353,359],{"class":264},[220,76355,76356,76358,76360],{"class":222,"line":179},[220,76357,364],{"class":264},[220,76359,76277],{"class":420},[220,76361,359],{"class":264},[220,76363,76364,76366,76368],{"class":222,"line":389},[220,76365,2550],{"class":264},[220,76367,2553],{"class":420},[220,76369,386],{"class":264},[220,76371,76372,76374,76376],{"class":222,"line":399},[220,76373,2567],{"class":264},[220,76375,76277],{"class":420},[220,76377,359],{"class":264},[220,76379,76380,76382,76384],{"class":222,"line":644},[220,76381,402],{"class":264},[220,76383,347],{"class":420},[220,76385,359],{"class":264},[212,76387,76388],{"className":2844,"code":76299,"language":2846,"meta":178,"style":178},[99,76389,76390,76398,76406,76414,76422],{"__ignoreMap":178},[220,76391,76392,76394,76396],{"class":222,"line":223},[220,76393,343],{"class":264},[220,76395,347],{"class":420},[220,76397,359],{"class":264},[220,76399,76400,76402,76404],{"class":222,"line":179},[220,76401,364],{"class":264},[220,76403,76277],{"class":420},[220,76405,359],{"class":264},[220,76407,76408,76410,76412],{"class":222,"line":389},[220,76409,2550],{"class":264},[220,76411,2553],{"class":420},[220,76413,386],{"class":264},[220,76415,76416,76418,76420],{"class":222,"line":399},[220,76417,2567],{"class":264},[220,76419,76277],{"class":420},[220,76421,359],{"class":264},[220,76423,76424,76426,76428],{"class":222,"line":644},[220,76425,402],{"class":264},[220,76427,347],{"class":420},[220,76429,359],{"class":264},[212,76431,76432],{"className":468,"code":76299,"language":469,"meta":178,"style":178},[99,76433,76434,76442,76450,76458,76466],{"__ignoreMap":178},[220,76435,76436,76438,76440],{"class":222,"line":223},[220,76437,343],{"class":264},[220,76439,347],{"class":420},[220,76441,359],{"class":264},[220,76443,76444,76446,76448],{"class":222,"line":179},[220,76445,364],{"class":264},[220,76447,76277],{"class":420},[220,76449,359],{"class":264},[220,76451,76452,76454,76456],{"class":222,"line":389},[220,76453,2550],{"class":264},[220,76455,2553],{"class":420},[220,76457,386],{"class":264},[220,76459,76460,76462,76464],{"class":222,"line":399},[220,76461,2567],{"class":264},[220,76463,76277],{"class":420},[220,76465,359],{"class":264},[220,76467,76468,76470,76472],{"class":222,"line":644},[220,76469,402],{"class":264},[220,76471,347],{"class":420},[220,76473,359],{"class":264},[212,76475,76477],{"className":251,"code":76476,"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,76478,76479,76489,76493,76507,76511,76520,76528,76532,76536],{"__ignoreMap":178},[220,76480,76481,76483,76485,76487],{"class":222,"line":223},[220,76482,261],{"class":260},[220,76484,10879],{"class":264},[220,76486,268],{"class":260},[220,76488,4007],{"class":230},[220,76490,76491],{"class":222,"line":179},[220,76492,647],{"emptyLinePlaceholder":194},[220,76494,76495,76497,76499,76501,76503,76505],{"class":222,"line":389},[220,76496,1735],{"class":260},[220,76498,1738],{"class":420},[220,76500,1741],{"class":260},[220,76502,1744],{"class":260},[220,76504,1747],{"class":226},[220,76506,1750],{"class":264},[220,76508,76509],{"class":222,"line":399},[220,76510,1765],{"class":264},[220,76512,76513,76515,76518],{"class":222,"line":644},[220,76514,1770],{"class":264},[220,76516,76517],{"class":230},"'Tritone'",[220,76519,6375],{"class":264},[220,76521,76522,76524,76526],{"class":222,"line":650},[220,76523,6380],{"class":264},[220,76525,3206],{"class":230},[220,76527,2465],{"class":264},[220,76529,76530],{"class":222,"line":656},[220,76531,6397],{"class":264},[220,76533,76534],{"class":222,"line":673},[220,76535,1787],{"class":264},[220,76537,76538],{"class":222,"line":682},[220,76539,1792],{"class":264},[1504,76541,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":76543},[76544,76545],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":76277,"description":76285},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":76552,"title":76553,"body":76554,"category":32433,"componentType":25247,"description":76561,"extension":191,"meta":76746,"navigation":194,"path":76747,"requiresChild":31900,"seo":76748,"stem":76749,"__hash__":76750},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":76555,"toc":76742},[76556,76559,76562,76564,76566,76569,76571,76740],[11,76557,76553],{"id":76558},"truchet",[15,76560,76561],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31281,76563],{"component":76553},[23,76565,31285],{"id":25903},[31287,76567],{":props":76568},"[{\"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,76570,31293],{"id":31292},[246,76572,76573,76602,76630,76658,76686],{":tabs":1557},[212,76574,76576],{"className":334,"code":76575,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,76577,76578,76586,76594],{"__ignoreMap":178},[220,76579,76580,76582,76584],{"class":222,"line":223},[220,76581,343],{"class":264},[220,76583,347],{"class":346},[220,76585,359],{"class":264},[220,76587,76588,76590,76592],{"class":222,"line":179},[220,76589,364],{"class":264},[220,76591,76553],{"class":346},[220,76593,386],{"class":264},[220,76595,76596,76598,76600],{"class":222,"line":389},[220,76597,402],{"class":264},[220,76599,347],{"class":346},[220,76601,359],{"class":264},[212,76603,76604],{"className":409,"code":76575,"language":411,"meta":178,"style":178},[99,76605,76606,76614,76622],{"__ignoreMap":178},[220,76607,76608,76610,76612],{"class":222,"line":223},[220,76609,343],{"class":264},[220,76611,347],{"class":420},[220,76613,359],{"class":264},[220,76615,76616,76618,76620],{"class":222,"line":179},[220,76617,364],{"class":264},[220,76619,76553],{"class":420},[220,76621,386],{"class":264},[220,76623,76624,76626,76628],{"class":222,"line":389},[220,76625,402],{"class":264},[220,76627,347],{"class":420},[220,76629,359],{"class":264},[212,76631,76632],{"className":2844,"code":76575,"language":2846,"meta":178,"style":178},[99,76633,76634,76642,76650],{"__ignoreMap":178},[220,76635,76636,76638,76640],{"class":222,"line":223},[220,76637,343],{"class":264},[220,76639,347],{"class":420},[220,76641,359],{"class":264},[220,76643,76644,76646,76648],{"class":222,"line":179},[220,76645,364],{"class":264},[220,76647,76553],{"class":420},[220,76649,386],{"class":264},[220,76651,76652,76654,76656],{"class":222,"line":389},[220,76653,402],{"class":264},[220,76655,347],{"class":420},[220,76657,359],{"class":264},[212,76659,76660],{"className":468,"code":76575,"language":469,"meta":178,"style":178},[99,76661,76662,76670,76678],{"__ignoreMap":178},[220,76663,76664,76666,76668],{"class":222,"line":223},[220,76665,343],{"class":264},[220,76667,347],{"class":420},[220,76669,359],{"class":264},[220,76671,76672,76674,76676],{"class":222,"line":179},[220,76673,364],{"class":264},[220,76675,76553],{"class":420},[220,76677,386],{"class":264},[220,76679,76680,76682,76684],{"class":222,"line":389},[220,76681,402],{"class":264},[220,76683,347],{"class":420},[220,76685,359],{"class":264},[212,76687,76689],{"className":251,"code":76688,"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,76690,76691,76701,76705,76719,76723,76732,76736],{"__ignoreMap":178},[220,76692,76693,76695,76697,76699],{"class":222,"line":223},[220,76694,261],{"class":260},[220,76696,10879],{"class":264},[220,76698,268],{"class":260},[220,76700,4007],{"class":230},[220,76702,76703],{"class":222,"line":179},[220,76704,647],{"emptyLinePlaceholder":194},[220,76706,76707,76709,76711,76713,76715,76717],{"class":222,"line":389},[220,76708,1735],{"class":260},[220,76710,1738],{"class":420},[220,76712,1741],{"class":260},[220,76714,1744],{"class":260},[220,76716,1747],{"class":226},[220,76718,1750],{"class":264},[220,76720,76721],{"class":222,"line":399},[220,76722,1765],{"class":264},[220,76724,76725,76727,76730],{"class":222,"line":644},[220,76726,1770],{"class":264},[220,76728,76729],{"class":230},"'Truchet'",[220,76731,2465],{"class":264},[220,76733,76734],{"class":222,"line":650},[220,76735,1787],{"class":264},[220,76737,76738],{"class":222,"line":656},[220,76739,1792],{"class":264},[1504,76741,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":76743},[76744,76745],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":76553,"description":76561},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":76752,"title":76753,"body":76754,"category":32766,"componentType":25253,"description":76761,"extension":191,"meta":77078,"navigation":194,"path":77079,"requiresChild":194,"seo":77080,"stem":77081,"__hash__":77082},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":76755,"toc":77074},[76756,76759,76762,76764,76766,76769,76771,77072],[11,76757,76753],{"id":76758},"twirl",[15,76760,76761],{},"Rotate and twist content around a center point",[31281,76763],{"component":76753},[23,76765,31285],{"id":25903},[31287,76767],{":props":76768},"[{\"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,76770,31293],{"id":31292},[246,76772,76773,76829,76888,76944,77002],{":tabs":1557},[212,76774,76776],{"className":334,"code":76775,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,76777,76778,76786,76793,76801,76805,76813,76821],{"__ignoreMap":178},[220,76779,76780,76782,76784],{"class":222,"line":223},[220,76781,343],{"class":264},[220,76783,347],{"class":346},[220,76785,359],{"class":264},[220,76787,76788,76790],{"class":222,"line":179},[220,76789,364],{"class":264},[220,76791,76792],{"class":346},"Twirl\n",[220,76794,76795,76797,76799],{"class":222,"line":389},[220,76796,19739],{"class":226},[220,76798,353],{"class":264},[220,76800,35995],{"class":230},[220,76802,76803],{"class":222,"line":399},[220,76804,31329],{"class":264},[220,76806,76807,76809,76811],{"class":222,"line":644},[220,76808,2550],{"class":264},[220,76810,2553],{"class":346},[220,76812,386],{"class":264},[220,76814,76815,76817,76819],{"class":222,"line":650},[220,76816,2567],{"class":264},[220,76818,76753],{"class":346},[220,76820,359],{"class":264},[220,76822,76823,76825,76827],{"class":222,"line":656},[220,76824,402],{"class":264},[220,76826,347],{"class":346},[220,76828,359],{"class":264},[212,76830,76832],{"className":409,"code":76831,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,76833,76834,76842,76848,76860,76864,76872,76880],{"__ignoreMap":178},[220,76835,76836,76838,76840],{"class":222,"line":223},[220,76837,343],{"class":264},[220,76839,347],{"class":420},[220,76841,359],{"class":264},[220,76843,76844,76846],{"class":222,"line":179},[220,76845,364],{"class":264},[220,76847,76792],{"class":420},[220,76849,76850,76852,76854,76856,76858],{"class":222,"line":389},[220,76851,19850],{"class":226},[220,76853,353],{"class":260},[220,76855,743],{"class":264},[220,76857,8043],{"class":420},[220,76859,749],{"class":264},[220,76861,76862],{"class":222,"line":399},[220,76863,31329],{"class":264},[220,76865,76866,76868,76870],{"class":222,"line":644},[220,76867,2550],{"class":264},[220,76869,2553],{"class":420},[220,76871,386],{"class":264},[220,76873,76874,76876,76878],{"class":222,"line":650},[220,76875,2567],{"class":264},[220,76877,76753],{"class":420},[220,76879,359],{"class":264},[220,76881,76882,76884,76886],{"class":222,"line":656},[220,76883,402],{"class":264},[220,76885,347],{"class":420},[220,76887,359],{"class":264},[212,76889,76890],{"className":2844,"code":76831,"language":2846,"meta":178,"style":178},[99,76891,76892,76900,76906,76916,76920,76928,76936],{"__ignoreMap":178},[220,76893,76894,76896,76898],{"class":222,"line":223},[220,76895,343],{"class":264},[220,76897,347],{"class":420},[220,76899,359],{"class":264},[220,76901,76902,76904],{"class":222,"line":179},[220,76903,364],{"class":264},[220,76905,76792],{"class":420},[220,76907,76908,76910,76912,76914],{"class":222,"line":389},[220,76909,19850],{"class":226},[220,76911,29241],{"class":264},[220,76913,8043],{"class":420},[220,76915,749],{"class":264},[220,76917,76918],{"class":222,"line":399},[220,76919,31329],{"class":264},[220,76921,76922,76924,76926],{"class":222,"line":644},[220,76923,2550],{"class":264},[220,76925,2553],{"class":420},[220,76927,386],{"class":264},[220,76929,76930,76932,76934],{"class":222,"line":650},[220,76931,2567],{"class":264},[220,76933,76753],{"class":420},[220,76935,359],{"class":264},[220,76937,76938,76940,76942],{"class":222,"line":656},[220,76939,402],{"class":264},[220,76941,347],{"class":420},[220,76943,359],{"class":264},[212,76945,76946],{"className":468,"code":76831,"language":469,"meta":178,"style":178},[99,76947,76948,76956,76962,76974,76978,76986,76994],{"__ignoreMap":178},[220,76949,76950,76952,76954],{"class":222,"line":223},[220,76951,343],{"class":264},[220,76953,347],{"class":420},[220,76955,359],{"class":264},[220,76957,76958,76960],{"class":222,"line":179},[220,76959,364],{"class":264},[220,76961,76792],{"class":420},[220,76963,76964,76966,76968,76970,76972],{"class":222,"line":389},[220,76965,19850],{"class":226},[220,76967,353],{"class":260},[220,76969,743],{"class":264},[220,76971,8043],{"class":420},[220,76973,749],{"class":264},[220,76975,76976],{"class":222,"line":399},[220,76977,31329],{"class":264},[220,76979,76980,76982,76984],{"class":222,"line":644},[220,76981,2550],{"class":264},[220,76983,2553],{"class":420},[220,76985,386],{"class":264},[220,76987,76988,76990,76992],{"class":222,"line":650},[220,76989,2567],{"class":264},[220,76991,76753],{"class":420},[220,76993,359],{"class":264},[220,76995,76996,76998,77000],{"class":222,"line":656},[220,76997,402],{"class":264},[220,76999,347],{"class":420},[220,77001,359],{"class":264},[212,77003,77005],{"className":251,"code":77004,"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,77006,77007,77017,77021,77035,77039,77052,77060,77064,77068],{"__ignoreMap":178},[220,77008,77009,77011,77013,77015],{"class":222,"line":223},[220,77010,261],{"class":260},[220,77012,10879],{"class":264},[220,77014,268],{"class":260},[220,77016,4007],{"class":230},[220,77018,77019],{"class":222,"line":179},[220,77020,647],{"emptyLinePlaceholder":194},[220,77022,77023,77025,77027,77029,77031,77033],{"class":222,"line":389},[220,77024,1735],{"class":260},[220,77026,1738],{"class":420},[220,77028,1741],{"class":260},[220,77030,1744],{"class":260},[220,77032,1747],{"class":226},[220,77034,1750],{"class":264},[220,77036,77037],{"class":222,"line":399},[220,77038,1765],{"class":264},[220,77040,77041,77043,77046,77048,77050],{"class":222,"line":644},[220,77042,1770],{"class":264},[220,77044,77045],{"class":230},"'Twirl'",[220,77047,31573],{"class":264},[220,77049,8043],{"class":420},[220,77051,6912],{"class":264},[220,77053,77054,77056,77058],{"class":222,"line":650},[220,77055,6380],{"class":264},[220,77057,3206],{"class":230},[220,77059,2465],{"class":264},[220,77061,77062],{"class":222,"line":656},[220,77063,6397],{"class":264},[220,77065,77066],{"class":222,"line":673},[220,77067,1787],{"class":264},[220,77069,77070],{"class":222,"line":682},[220,77071,1792],{"class":264},[1504,77073,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77075},[77076,77077],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":76753,"description":76761},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":77084,"title":77085,"body":77086,"category":32176,"componentType":25253,"description":77093,"extension":191,"meta":77354,"navigation":194,"path":77355,"requiresChild":194,"seo":77356,"stem":77357,"__hash__":77358},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":77087,"toc":77350},[77088,77091,77094,77096,77098,77101,77103,77348],[11,77089,77085],{"id":77090},"vhs",[15,77092,77093],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31281,77095],{"component":77085},[23,77097,31285],{"id":25903},[31287,77099],{":props":77100},"[{\"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,77102,31293],{"id":31292},[246,77104,77105,77150,77194,77238,77282],{":tabs":1557},[212,77106,77108],{"className":334,"code":77107,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,77109,77110,77118,77126,77134,77142],{"__ignoreMap":178},[220,77111,77112,77114,77116],{"class":222,"line":223},[220,77113,343],{"class":264},[220,77115,347],{"class":346},[220,77117,359],{"class":264},[220,77119,77120,77122,77124],{"class":222,"line":179},[220,77121,364],{"class":264},[220,77123,77085],{"class":346},[220,77125,359],{"class":264},[220,77127,77128,77130,77132],{"class":222,"line":389},[220,77129,2550],{"class":264},[220,77131,2553],{"class":346},[220,77133,386],{"class":264},[220,77135,77136,77138,77140],{"class":222,"line":399},[220,77137,2567],{"class":264},[220,77139,77085],{"class":346},[220,77141,359],{"class":264},[220,77143,77144,77146,77148],{"class":222,"line":644},[220,77145,402],{"class":264},[220,77147,347],{"class":346},[220,77149,359],{"class":264},[212,77151,77152],{"className":409,"code":77107,"language":411,"meta":178,"style":178},[99,77153,77154,77162,77170,77178,77186],{"__ignoreMap":178},[220,77155,77156,77158,77160],{"class":222,"line":223},[220,77157,343],{"class":264},[220,77159,347],{"class":420},[220,77161,359],{"class":264},[220,77163,77164,77166,77168],{"class":222,"line":179},[220,77165,364],{"class":264},[220,77167,77085],{"class":420},[220,77169,359],{"class":264},[220,77171,77172,77174,77176],{"class":222,"line":389},[220,77173,2550],{"class":264},[220,77175,2553],{"class":420},[220,77177,386],{"class":264},[220,77179,77180,77182,77184],{"class":222,"line":399},[220,77181,2567],{"class":264},[220,77183,77085],{"class":420},[220,77185,359],{"class":264},[220,77187,77188,77190,77192],{"class":222,"line":644},[220,77189,402],{"class":264},[220,77191,347],{"class":420},[220,77193,359],{"class":264},[212,77195,77196],{"className":2844,"code":77107,"language":2846,"meta":178,"style":178},[99,77197,77198,77206,77214,77222,77230],{"__ignoreMap":178},[220,77199,77200,77202,77204],{"class":222,"line":223},[220,77201,343],{"class":264},[220,77203,347],{"class":420},[220,77205,359],{"class":264},[220,77207,77208,77210,77212],{"class":222,"line":179},[220,77209,364],{"class":264},[220,77211,77085],{"class":420},[220,77213,359],{"class":264},[220,77215,77216,77218,77220],{"class":222,"line":389},[220,77217,2550],{"class":264},[220,77219,2553],{"class":420},[220,77221,386],{"class":264},[220,77223,77224,77226,77228],{"class":222,"line":399},[220,77225,2567],{"class":264},[220,77227,77085],{"class":420},[220,77229,359],{"class":264},[220,77231,77232,77234,77236],{"class":222,"line":644},[220,77233,402],{"class":264},[220,77235,347],{"class":420},[220,77237,359],{"class":264},[212,77239,77240],{"className":468,"code":77107,"language":469,"meta":178,"style":178},[99,77241,77242,77250,77258,77266,77274],{"__ignoreMap":178},[220,77243,77244,77246,77248],{"class":222,"line":223},[220,77245,343],{"class":264},[220,77247,347],{"class":420},[220,77249,359],{"class":264},[220,77251,77252,77254,77256],{"class":222,"line":179},[220,77253,364],{"class":264},[220,77255,77085],{"class":420},[220,77257,359],{"class":264},[220,77259,77260,77262,77264],{"class":222,"line":389},[220,77261,2550],{"class":264},[220,77263,2553],{"class":420},[220,77265,386],{"class":264},[220,77267,77268,77270,77272],{"class":222,"line":399},[220,77269,2567],{"class":264},[220,77271,77085],{"class":420},[220,77273,359],{"class":264},[220,77275,77276,77278,77280],{"class":222,"line":644},[220,77277,402],{"class":264},[220,77279,347],{"class":420},[220,77281,359],{"class":264},[212,77283,77285],{"className":251,"code":77284,"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,77286,77287,77297,77301,77315,77319,77328,77336,77340,77344],{"__ignoreMap":178},[220,77288,77289,77291,77293,77295],{"class":222,"line":223},[220,77290,261],{"class":260},[220,77292,10879],{"class":264},[220,77294,268],{"class":260},[220,77296,4007],{"class":230},[220,77298,77299],{"class":222,"line":179},[220,77300,647],{"emptyLinePlaceholder":194},[220,77302,77303,77305,77307,77309,77311,77313],{"class":222,"line":389},[220,77304,1735],{"class":260},[220,77306,1738],{"class":420},[220,77308,1741],{"class":260},[220,77310,1744],{"class":260},[220,77312,1747],{"class":226},[220,77314,1750],{"class":264},[220,77316,77317],{"class":222,"line":399},[220,77318,1765],{"class":264},[220,77320,77321,77323,77326],{"class":222,"line":644},[220,77322,1770],{"class":264},[220,77324,77325],{"class":230},"'VHS'",[220,77327,6375],{"class":264},[220,77329,77330,77332,77334],{"class":222,"line":650},[220,77331,6380],{"class":264},[220,77333,3206],{"class":230},[220,77335,2465],{"class":264},[220,77337,77338],{"class":222,"line":656},[220,77339,6397],{"class":264},[220,77341,77342],{"class":222,"line":673},[220,77343,1787],{"class":264},[220,77345,77346],{"class":222,"line":682},[220,77347,1792],{"class":264},[1504,77349,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":77351},[77352,77353],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":77085,"description":77093},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":77360,"title":77361,"body":77362,"category":33043,"componentType":25253,"description":77369,"extension":191,"meta":77630,"navigation":194,"path":77631,"requiresChild":194,"seo":77632,"stem":77633,"__hash__":77634},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":77363,"toc":77626},[77364,77367,77370,77372,77374,77377,77379,77624],[11,77365,77361],{"id":77366},"venetianblinds",[15,77368,77369],{},"Wipe the content away behind a set of parallel closing strips",[31281,77371],{"component":77361},[23,77373,31285],{"id":25903},[31287,77375],{":props":77376},"[{\"name\":\"progress\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the blinds have closed (0 = fully visible, 1 = fully wiped away)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Orientation of the strips in degrees\"},{\"name\":\"stripCount\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of strips across the frame\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Softness of each closing strip edge\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Close each strip from the opposite edge\"}]",[23,77378,31293],{"id":31292},[246,77380,77381,77426,77470,77514,77558],{":tabs":1557},[212,77382,77384],{"className":334,"code":77383,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,77385,77386,77394,77402,77410,77418],{"__ignoreMap":178},[220,77387,77388,77390,77392],{"class":222,"line":223},[220,77389,343],{"class":264},[220,77391,347],{"class":346},[220,77393,359],{"class":264},[220,77395,77396,77398,77400],{"class":222,"line":179},[220,77397,364],{"class":264},[220,77399,77361],{"class":346},[220,77401,359],{"class":264},[220,77403,77404,77406,77408],{"class":222,"line":389},[220,77405,2550],{"class":264},[220,77407,2553],{"class":346},[220,77409,386],{"class":264},[220,77411,77412,77414,77416],{"class":222,"line":399},[220,77413,2567],{"class":264},[220,77415,77361],{"class":346},[220,77417,359],{"class":264},[220,77419,77420,77422,77424],{"class":222,"line":644},[220,77421,402],{"class":264},[220,77423,347],{"class":346},[220,77425,359],{"class":264},[212,77427,77428],{"className":409,"code":77383,"language":411,"meta":178,"style":178},[99,77429,77430,77438,77446,77454,77462],{"__ignoreMap":178},[220,77431,77432,77434,77436],{"class":222,"line":223},[220,77433,343],{"class":264},[220,77435,347],{"class":420},[220,77437,359],{"class":264},[220,77439,77440,77442,77444],{"class":222,"line":179},[220,77441,364],{"class":264},[220,77443,77361],{"class":420},[220,77445,359],{"class":264},[220,77447,77448,77450,77452],{"class":222,"line":389},[220,77449,2550],{"class":264},[220,77451,2553],{"class":420},[220,77453,386],{"class":264},[220,77455,77456,77458,77460],{"class":222,"line":399},[220,77457,2567],{"class":264},[220,77459,77361],{"class":420},[220,77461,359],{"class":264},[220,77463,77464,77466,77468],{"class":222,"line":644},[220,77465,402],{"class":264},[220,77467,347],{"class":420},[220,77469,359],{"class":264},[212,77471,77472],{"className":2844,"code":77383,"language":2846,"meta":178,"style":178},[99,77473,77474,77482,77490,77498,77506],{"__ignoreMap":178},[220,77475,77476,77478,77480],{"class":222,"line":223},[220,77477,343],{"class":264},[220,77479,347],{"class":420},[220,77481,359],{"class":264},[220,77483,77484,77486,77488],{"class":222,"line":179},[220,77485,364],{"class":264},[220,77487,77361],{"class":420},[220,77489,359],{"class":264},[220,77491,77492,77494,77496],{"class":222,"line":389},[220,77493,2550],{"class":264},[220,77495,2553],{"class":420},[220,77497,386],{"class":264},[220,77499,77500,77502,77504],{"class":222,"line":399},[220,77501,2567],{"class":264},[220,77503,77361],{"class":420},[220,77505,359],{"class":264},[220,77507,77508,77510,77512],{"class":222,"line":644},[220,77509,402],{"class":264},[220,77511,347],{"class":420},[220,77513,359],{"class":264},[212,77515,77516],{"className":468,"code":77383,"language":469,"meta":178,"style":178},[99,77517,77518,77526,77534,77542,77550],{"__ignoreMap":178},[220,77519,77520,77522,77524],{"class":222,"line":223},[220,77521,343],{"class":264},[220,77523,347],{"class":420},[220,77525,359],{"class":264},[220,77527,77528,77530,77532],{"class":222,"line":179},[220,77529,364],{"class":264},[220,77531,77361],{"class":420},[220,77533,359],{"class":264},[220,77535,77536,77538,77540],{"class":222,"line":389},[220,77537,2550],{"class":264},[220,77539,2553],{"class":420},[220,77541,386],{"class":264},[220,77543,77544,77546,77548],{"class":222,"line":399},[220,77545,2567],{"class":264},[220,77547,77361],{"class":420},[220,77549,359],{"class":264},[220,77551,77552,77554,77556],{"class":222,"line":644},[220,77553,402],{"class":264},[220,77555,347],{"class":420},[220,77557,359],{"class":264},[212,77559,77561],{"className":251,"code":77560,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VenetianBlinds', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,77562,77563,77573,77577,77591,77595,77604,77612,77616,77620],{"__ignoreMap":178},[220,77564,77565,77567,77569,77571],{"class":222,"line":223},[220,77566,261],{"class":260},[220,77568,10879],{"class":264},[220,77570,268],{"class":260},[220,77572,4007],{"class":230},[220,77574,77575],{"class":222,"line":179},[220,77576,647],{"emptyLinePlaceholder":194},[220,77578,77579,77581,77583,77585,77587,77589],{"class":222,"line":389},[220,77580,1735],{"class":260},[220,77582,1738],{"class":420},[220,77584,1741],{"class":260},[220,77586,1744],{"class":260},[220,77588,1747],{"class":226},[220,77590,1750],{"class":264},[220,77592,77593],{"class":222,"line":399},[220,77594,1765],{"class":264},[220,77596,77597,77599,77602],{"class":222,"line":644},[220,77598,1770],{"class":264},[220,77600,77601],{"class":230},"'VenetianBlinds'",[220,77603,6375],{"class":264},[220,77605,77606,77608,77610],{"class":222,"line":650},[220,77607,6380],{"class":264},[220,77609,3206],{"class":230},[220,77611,2465],{"class":264},[220,77613,77614],{"class":222,"line":656},[220,77615,6397],{"class":264},[220,77617,77618],{"class":222,"line":673},[220,77619,1787],{"class":264},[220,77621,77622],{"class":222,"line":682},[220,77623,1792],{"class":264},[1504,77625,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":77627},[77628,77629],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":77361,"description":77369},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":77636,"title":77637,"body":77638,"category":15275,"componentType":25247,"description":77645,"extension":191,"meta":77922,"navigation":194,"path":77923,"requiresChild":31900,"seo":77924,"stem":77925,"__hash__":77926},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":77639,"toc":77918},[77640,77643,77646,77648,77650,77653,77655,77916],[11,77641,77637],{"id":77642},"vesica",[15,77644,77645],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31281,77647],{"component":77637},[23,77649,31285],{"id":25903},[31287,77651],{":props":77652},"[{\"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,77654,31293],{"id":31292},[246,77656,77657,77705,77756,77804,77854],{":tabs":1557},[212,77658,77660],{"className":334,"code":77659,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,77661,77662,77670,77677,77685,77693,77697],{"__ignoreMap":178},[220,77663,77664,77666,77668],{"class":222,"line":223},[220,77665,343],{"class":264},[220,77667,347],{"class":346},[220,77669,359],{"class":264},[220,77671,77672,77674],{"class":222,"line":179},[220,77673,364],{"class":264},[220,77675,77676],{"class":346},"Vesica\n",[220,77678,77679,77681,77683],{"class":222,"line":389},[220,77680,9002],{"class":226},[220,77682,353],{"class":264},[220,77684,8958],{"class":230},[220,77686,77687,77689,77691],{"class":222,"line":399},[220,77688,16772],{"class":226},[220,77690,353],{"class":264},[220,77692,40761],{"class":230},[220,77694,77695],{"class":222,"line":644},[220,77696,1234],{"class":264},[220,77698,77699,77701,77703],{"class":222,"line":650},[220,77700,402],{"class":264},[220,77702,347],{"class":346},[220,77704,359],{"class":264},[212,77706,77708],{"className":409,"code":77707,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,77709,77710,77718,77724,77732,77744,77748],{"__ignoreMap":178},[220,77711,77712,77714,77716],{"class":222,"line":223},[220,77713,343],{"class":264},[220,77715,347],{"class":420},[220,77717,359],{"class":264},[220,77719,77720,77722],{"class":222,"line":179},[220,77721,364],{"class":264},[220,77723,77676],{"class":420},[220,77725,77726,77728,77730],{"class":222,"line":389},[220,77727,9002],{"class":226},[220,77729,353],{"class":260},[220,77731,8958],{"class":230},[220,77733,77734,77736,77738,77740,77742],{"class":222,"line":399},[220,77735,9012],{"class":226},[220,77737,353],{"class":260},[220,77739,743],{"class":264},[220,77741,20516],{"class":420},[220,77743,749],{"class":264},[220,77745,77746],{"class":222,"line":644},[220,77747,1234],{"class":264},[220,77749,77750,77752,77754],{"class":222,"line":650},[220,77751,402],{"class":264},[220,77753,347],{"class":420},[220,77755,359],{"class":264},[212,77757,77758],{"className":2844,"code":77707,"language":2846,"meta":178,"style":178},[99,77759,77760,77768,77774,77782,77792,77796],{"__ignoreMap":178},[220,77761,77762,77764,77766],{"class":222,"line":223},[220,77763,343],{"class":264},[220,77765,347],{"class":420},[220,77767,359],{"class":264},[220,77769,77770,77772],{"class":222,"line":179},[220,77771,364],{"class":264},[220,77773,77676],{"class":420},[220,77775,77776,77778,77780],{"class":222,"line":389},[220,77777,9002],{"class":226},[220,77779,353],{"class":264},[220,77781,8958],{"class":230},[220,77783,77784,77786,77788,77790],{"class":222,"line":399},[220,77785,9012],{"class":226},[220,77787,29241],{"class":264},[220,77789,20516],{"class":420},[220,77791,749],{"class":264},[220,77793,77794],{"class":222,"line":644},[220,77795,1234],{"class":264},[220,77797,77798,77800,77802],{"class":222,"line":650},[220,77799,402],{"class":264},[220,77801,347],{"class":420},[220,77803,359],{"class":264},[212,77805,77806],{"className":468,"code":77707,"language":469,"meta":178,"style":178},[99,77807,77808,77816,77822,77830,77842,77846],{"__ignoreMap":178},[220,77809,77810,77812,77814],{"class":222,"line":223},[220,77811,343],{"class":264},[220,77813,347],{"class":420},[220,77815,359],{"class":264},[220,77817,77818,77820],{"class":222,"line":179},[220,77819,364],{"class":264},[220,77821,77676],{"class":420},[220,77823,77824,77826,77828],{"class":222,"line":389},[220,77825,9002],{"class":226},[220,77827,353],{"class":260},[220,77829,8958],{"class":230},[220,77831,77832,77834,77836,77838,77840],{"class":222,"line":399},[220,77833,9012],{"class":226},[220,77835,353],{"class":260},[220,77837,743],{"class":264},[220,77839,20516],{"class":420},[220,77841,749],{"class":264},[220,77843,77844],{"class":222,"line":644},[220,77845,1234],{"class":264},[220,77847,77848,77850,77852],{"class":222,"line":650},[220,77849,402],{"class":264},[220,77851,347],{"class":420},[220,77853,359],{"class":264},[212,77855,77857],{"className":251,"code":77856,"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,77858,77859,77869,77873,77887,77891,77908,77912],{"__ignoreMap":178},[220,77860,77861,77863,77865,77867],{"class":222,"line":223},[220,77862,261],{"class":260},[220,77864,10879],{"class":264},[220,77866,268],{"class":260},[220,77868,4007],{"class":230},[220,77870,77871],{"class":222,"line":179},[220,77872,647],{"emptyLinePlaceholder":194},[220,77874,77875,77877,77879,77881,77883,77885],{"class":222,"line":389},[220,77876,1735],{"class":260},[220,77878,1738],{"class":420},[220,77880,1741],{"class":260},[220,77882,1744],{"class":260},[220,77884,1747],{"class":226},[220,77886,1750],{"class":264},[220,77888,77889],{"class":222,"line":399},[220,77890,1765],{"class":264},[220,77892,77893,77895,77898,77900,77902,77904,77906],{"class":222,"line":644},[220,77894,1770],{"class":264},[220,77896,77897],{"class":230},"'Vesica'",[220,77899,1776],{"class":264},[220,77901,9536],{"class":230},[220,77903,5932],{"class":264},[220,77905,20516],{"class":420},[220,77907,1782],{"class":264},[220,77909,77910],{"class":222,"line":650},[220,77911,1787],{"class":264},[220,77913,77914],{"class":222,"line":656},[220,77915,1792],{"class":264},[1504,77917,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77919},[77920,77921],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":77637,"description":77645},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":77928,"title":77929,"body":77930,"category":35738,"componentType":25253,"description":77937,"extension":191,"meta":78255,"navigation":194,"path":78256,"requiresChild":194,"seo":78257,"stem":78258,"__hash__":78259},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":77931,"toc":78251},[77932,77935,77938,77940,77942,77945,77947,78249],[11,77933,77929],{"id":77934},"vibrance",[15,77936,77937],{},"Selective saturation adjustment protecting skin tones",[31281,77939],{"component":77929},[23,77941,31285],{"id":25903},[31287,77943],{":props":77944},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,77946,31293],{"id":31292},[246,77948,77949,78006,78065,78121,78179],{":tabs":1557},[212,77950,77952],{"className":334,"code":77951,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,77953,77954,77962,77969,77978,77982,77990,77998],{"__ignoreMap":178},[220,77955,77956,77958,77960],{"class":222,"line":223},[220,77957,343],{"class":264},[220,77959,347],{"class":346},[220,77961,359],{"class":264},[220,77963,77964,77966],{"class":222,"line":179},[220,77965,364],{"class":264},[220,77967,77968],{"class":346},"Vibrance\n",[220,77970,77971,77973,77975],{"class":222,"line":389},[220,77972,19739],{"class":226},[220,77974,353],{"class":264},[220,77976,77977],{"class":230},"\"0\"\n",[220,77979,77980],{"class":222,"line":399},[220,77981,31329],{"class":264},[220,77983,77984,77986,77988],{"class":222,"line":644},[220,77985,2550],{"class":264},[220,77987,2553],{"class":346},[220,77989,386],{"class":264},[220,77991,77992,77994,77996],{"class":222,"line":650},[220,77993,2567],{"class":264},[220,77995,77929],{"class":346},[220,77997,359],{"class":264},[220,77999,78000,78002,78004],{"class":222,"line":656},[220,78001,402],{"class":264},[220,78003,347],{"class":346},[220,78005,359],{"class":264},[212,78007,78009],{"className":409,"code":78008,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78010,78011,78019,78025,78037,78041,78049,78057],{"__ignoreMap":178},[220,78012,78013,78015,78017],{"class":222,"line":223},[220,78014,343],{"class":264},[220,78016,347],{"class":420},[220,78018,359],{"class":264},[220,78020,78021,78023],{"class":222,"line":179},[220,78022,364],{"class":264},[220,78024,77968],{"class":420},[220,78026,78027,78029,78031,78033,78035],{"class":222,"line":389},[220,78028,19850],{"class":226},[220,78030,353],{"class":260},[220,78032,743],{"class":264},[220,78034,8039],{"class":420},[220,78036,749],{"class":264},[220,78038,78039],{"class":222,"line":399},[220,78040,31329],{"class":264},[220,78042,78043,78045,78047],{"class":222,"line":644},[220,78044,2550],{"class":264},[220,78046,2553],{"class":420},[220,78048,386],{"class":264},[220,78050,78051,78053,78055],{"class":222,"line":650},[220,78052,2567],{"class":264},[220,78054,77929],{"class":420},[220,78056,359],{"class":264},[220,78058,78059,78061,78063],{"class":222,"line":656},[220,78060,402],{"class":264},[220,78062,347],{"class":420},[220,78064,359],{"class":264},[212,78066,78067],{"className":2844,"code":78008,"language":2846,"meta":178,"style":178},[99,78068,78069,78077,78083,78093,78097,78105,78113],{"__ignoreMap":178},[220,78070,78071,78073,78075],{"class":222,"line":223},[220,78072,343],{"class":264},[220,78074,347],{"class":420},[220,78076,359],{"class":264},[220,78078,78079,78081],{"class":222,"line":179},[220,78080,364],{"class":264},[220,78082,77968],{"class":420},[220,78084,78085,78087,78089,78091],{"class":222,"line":389},[220,78086,19850],{"class":226},[220,78088,29241],{"class":264},[220,78090,8039],{"class":420},[220,78092,749],{"class":264},[220,78094,78095],{"class":222,"line":399},[220,78096,31329],{"class":264},[220,78098,78099,78101,78103],{"class":222,"line":644},[220,78100,2550],{"class":264},[220,78102,2553],{"class":420},[220,78104,386],{"class":264},[220,78106,78107,78109,78111],{"class":222,"line":650},[220,78108,2567],{"class":264},[220,78110,77929],{"class":420},[220,78112,359],{"class":264},[220,78114,78115,78117,78119],{"class":222,"line":656},[220,78116,402],{"class":264},[220,78118,347],{"class":420},[220,78120,359],{"class":264},[212,78122,78123],{"className":468,"code":78008,"language":469,"meta":178,"style":178},[99,78124,78125,78133,78139,78151,78155,78163,78171],{"__ignoreMap":178},[220,78126,78127,78129,78131],{"class":222,"line":223},[220,78128,343],{"class":264},[220,78130,347],{"class":420},[220,78132,359],{"class":264},[220,78134,78135,78137],{"class":222,"line":179},[220,78136,364],{"class":264},[220,78138,77968],{"class":420},[220,78140,78141,78143,78145,78147,78149],{"class":222,"line":389},[220,78142,19850],{"class":226},[220,78144,353],{"class":260},[220,78146,743],{"class":264},[220,78148,8039],{"class":420},[220,78150,749],{"class":264},[220,78152,78153],{"class":222,"line":399},[220,78154,31329],{"class":264},[220,78156,78157,78159,78161],{"class":222,"line":644},[220,78158,2550],{"class":264},[220,78160,2553],{"class":420},[220,78162,386],{"class":264},[220,78164,78165,78167,78169],{"class":222,"line":650},[220,78166,2567],{"class":264},[220,78168,77929],{"class":420},[220,78170,359],{"class":264},[220,78172,78173,78175,78177],{"class":222,"line":656},[220,78174,402],{"class":264},[220,78176,347],{"class":420},[220,78178,359],{"class":264},[212,78180,78182],{"className":251,"code":78181,"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,78183,78184,78194,78198,78212,78216,78229,78237,78241,78245],{"__ignoreMap":178},[220,78185,78186,78188,78190,78192],{"class":222,"line":223},[220,78187,261],{"class":260},[220,78189,10879],{"class":264},[220,78191,268],{"class":260},[220,78193,4007],{"class":230},[220,78195,78196],{"class":222,"line":179},[220,78197,647],{"emptyLinePlaceholder":194},[220,78199,78200,78202,78204,78206,78208,78210],{"class":222,"line":389},[220,78201,1735],{"class":260},[220,78203,1738],{"class":420},[220,78205,1741],{"class":260},[220,78207,1744],{"class":260},[220,78209,1747],{"class":226},[220,78211,1750],{"class":264},[220,78213,78214],{"class":222,"line":399},[220,78215,1765],{"class":264},[220,78217,78218,78220,78223,78225,78227],{"class":222,"line":644},[220,78219,1770],{"class":264},[220,78221,78222],{"class":230},"'Vibrance'",[220,78224,31573],{"class":264},[220,78226,8039],{"class":420},[220,78228,6912],{"class":264},[220,78230,78231,78233,78235],{"class":222,"line":650},[220,78232,6380],{"class":264},[220,78234,3206],{"class":230},[220,78236,2465],{"class":264},[220,78238,78239],{"class":222,"line":656},[220,78240,6397],{"class":264},[220,78242,78243],{"class":222,"line":673},[220,78244,1787],{"class":264},[220,78246,78247],{"class":222,"line":682},[220,78248,1792],{"class":264},[1504,78250,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78252},[78253,78254],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":77929,"description":77937},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":78261,"title":78262,"body":78263,"category":32433,"componentType":25247,"description":78270,"extension":191,"meta":78455,"navigation":194,"path":78456,"requiresChild":31900,"seo":78457,"stem":78458,"__hash__":78459},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":78264,"toc":78451},[78265,78268,78271,78273,78275,78278,78280,78449],[11,78266,78262],{"id":78267},"videotexture",[15,78269,78270],{},"Display a video with customizable playback and object-fit modes",[31281,78272],{"component":78262},[23,78274,31285],{"id":25903},[31287,78276],{":props":78277},"[{\"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,78279,31293],{"id":31292},[246,78281,78282,78311,78339,78367,78395],{":tabs":1557},[212,78283,78285],{"className":334,"code":78284,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,78286,78287,78295,78303],{"__ignoreMap":178},[220,78288,78289,78291,78293],{"class":222,"line":223},[220,78290,343],{"class":264},[220,78292,347],{"class":346},[220,78294,359],{"class":264},[220,78296,78297,78299,78301],{"class":222,"line":179},[220,78298,364],{"class":264},[220,78300,78262],{"class":346},[220,78302,386],{"class":264},[220,78304,78305,78307,78309],{"class":222,"line":389},[220,78306,402],{"class":264},[220,78308,347],{"class":346},[220,78310,359],{"class":264},[212,78312,78313],{"className":409,"code":78284,"language":411,"meta":178,"style":178},[99,78314,78315,78323,78331],{"__ignoreMap":178},[220,78316,78317,78319,78321],{"class":222,"line":223},[220,78318,343],{"class":264},[220,78320,347],{"class":420},[220,78322,359],{"class":264},[220,78324,78325,78327,78329],{"class":222,"line":179},[220,78326,364],{"class":264},[220,78328,78262],{"class":420},[220,78330,386],{"class":264},[220,78332,78333,78335,78337],{"class":222,"line":389},[220,78334,402],{"class":264},[220,78336,347],{"class":420},[220,78338,359],{"class":264},[212,78340,78341],{"className":2844,"code":78284,"language":2846,"meta":178,"style":178},[99,78342,78343,78351,78359],{"__ignoreMap":178},[220,78344,78345,78347,78349],{"class":222,"line":223},[220,78346,343],{"class":264},[220,78348,347],{"class":420},[220,78350,359],{"class":264},[220,78352,78353,78355,78357],{"class":222,"line":179},[220,78354,364],{"class":264},[220,78356,78262],{"class":420},[220,78358,386],{"class":264},[220,78360,78361,78363,78365],{"class":222,"line":389},[220,78362,402],{"class":264},[220,78364,347],{"class":420},[220,78366,359],{"class":264},[212,78368,78369],{"className":468,"code":78284,"language":469,"meta":178,"style":178},[99,78370,78371,78379,78387],{"__ignoreMap":178},[220,78372,78373,78375,78377],{"class":222,"line":223},[220,78374,343],{"class":264},[220,78376,347],{"class":420},[220,78378,359],{"class":264},[220,78380,78381,78383,78385],{"class":222,"line":179},[220,78382,364],{"class":264},[220,78384,78262],{"class":420},[220,78386,386],{"class":264},[220,78388,78389,78391,78393],{"class":222,"line":389},[220,78390,402],{"class":264},[220,78392,347],{"class":420},[220,78394,359],{"class":264},[212,78396,78398],{"className":251,"code":78397,"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,78399,78400,78410,78414,78428,78432,78441,78445],{"__ignoreMap":178},[220,78401,78402,78404,78406,78408],{"class":222,"line":223},[220,78403,261],{"class":260},[220,78405,10879],{"class":264},[220,78407,268],{"class":260},[220,78409,4007],{"class":230},[220,78411,78412],{"class":222,"line":179},[220,78413,647],{"emptyLinePlaceholder":194},[220,78415,78416,78418,78420,78422,78424,78426],{"class":222,"line":389},[220,78417,1735],{"class":260},[220,78419,1738],{"class":420},[220,78421,1741],{"class":260},[220,78423,1744],{"class":260},[220,78425,1747],{"class":226},[220,78427,1750],{"class":264},[220,78429,78430],{"class":222,"line":399},[220,78431,1765],{"class":264},[220,78433,78434,78436,78439],{"class":222,"line":644},[220,78435,1770],{"class":264},[220,78437,78438],{"class":230},"'VideoTexture'",[220,78440,2465],{"class":264},[220,78442,78443],{"class":222,"line":650},[220,78444,1787],{"class":264},[220,78446,78447],{"class":222,"line":656},[220,78448,1792],{"class":264},[1504,78450,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":78452},[78453,78454],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":78262,"description":78270},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":78461,"title":78462,"body":78463,"category":32176,"componentType":25253,"description":78470,"extension":191,"meta":78869,"navigation":194,"path":78870,"requiresChild":194,"seo":78871,"stem":78872,"__hash__":78873},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":78464,"toc":78865},[78465,78468,78471,78473,78475,78478,78480,78863],[11,78466,78462],{"id":78467},"vignette",[15,78469,78470],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31281,78472],{"component":78462},[23,78474,31285],{"id":25903},[31287,78476],{":props":78477},"[{\"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,78479,31293],{"id":31292},[246,78481,78482,78554,78633,78707,78785],{":tabs":1557},[212,78483,78485],{"className":334,"code":78484,"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,78486,78487,78495,78502,78510,78518,78526,78530,78538,78546],{"__ignoreMap":178},[220,78488,78489,78491,78493],{"class":222,"line":223},[220,78490,343],{"class":264},[220,78492,347],{"class":346},[220,78494,359],{"class":264},[220,78496,78497,78499],{"class":222,"line":179},[220,78498,364],{"class":264},[220,78500,78501],{"class":346},"Vignette\n",[220,78503,78504,78506,78508],{"class":222,"line":389},[220,78505,9002],{"class":226},[220,78507,353],{"class":264},[220,78509,18841],{"class":230},[220,78511,78512,78514,78516],{"class":222,"line":399},[220,78513,16772],{"class":226},[220,78515,353],{"class":264},[220,78517,41528],{"class":230},[220,78519,78520,78522,78524],{"class":222,"line":644},[220,78521,19739],{"class":226},[220,78523,353],{"class":264},[220,78525,35995],{"class":230},[220,78527,78528],{"class":222,"line":650},[220,78529,31329],{"class":264},[220,78531,78532,78534,78536],{"class":222,"line":656},[220,78533,2550],{"class":264},[220,78535,2553],{"class":346},[220,78537,386],{"class":264},[220,78539,78540,78542,78544],{"class":222,"line":673},[220,78541,2567],{"class":264},[220,78543,78462],{"class":346},[220,78545,359],{"class":264},[220,78547,78548,78550,78552],{"class":222,"line":682},[220,78549,402],{"class":264},[220,78551,347],{"class":346},[220,78553,359],{"class":264},[212,78555,78557],{"className":409,"code":78556,"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,78558,78559,78567,78573,78581,78593,78605,78609,78617,78625],{"__ignoreMap":178},[220,78560,78561,78563,78565],{"class":222,"line":223},[220,78562,343],{"class":264},[220,78564,347],{"class":420},[220,78566,359],{"class":264},[220,78568,78569,78571],{"class":222,"line":179},[220,78570,364],{"class":264},[220,78572,78501],{"class":420},[220,78574,78575,78577,78579],{"class":222,"line":389},[220,78576,9002],{"class":226},[220,78578,353],{"class":260},[220,78580,18841],{"class":230},[220,78582,78583,78585,78587,78589,78591],{"class":222,"line":399},[220,78584,9012],{"class":226},[220,78586,353],{"class":260},[220,78588,743],{"class":264},[220,78590,7120],{"class":420},[220,78592,749],{"class":264},[220,78594,78595,78597,78599,78601,78603],{"class":222,"line":644},[220,78596,19850],{"class":226},[220,78598,353],{"class":260},[220,78600,743],{"class":264},[220,78602,8043],{"class":420},[220,78604,749],{"class":264},[220,78606,78607],{"class":222,"line":650},[220,78608,31329],{"class":264},[220,78610,78611,78613,78615],{"class":222,"line":656},[220,78612,2550],{"class":264},[220,78614,2553],{"class":420},[220,78616,386],{"class":264},[220,78618,78619,78621,78623],{"class":222,"line":673},[220,78620,2567],{"class":264},[220,78622,78462],{"class":420},[220,78624,359],{"class":264},[220,78626,78627,78629,78631],{"class":222,"line":682},[220,78628,402],{"class":264},[220,78630,347],{"class":420},[220,78632,359],{"class":264},[212,78634,78635],{"className":2844,"code":78556,"language":2846,"meta":178,"style":178},[99,78636,78637,78645,78651,78659,78669,78679,78683,78691,78699],{"__ignoreMap":178},[220,78638,78639,78641,78643],{"class":222,"line":223},[220,78640,343],{"class":264},[220,78642,347],{"class":420},[220,78644,359],{"class":264},[220,78646,78647,78649],{"class":222,"line":179},[220,78648,364],{"class":264},[220,78650,78501],{"class":420},[220,78652,78653,78655,78657],{"class":222,"line":389},[220,78654,9002],{"class":226},[220,78656,353],{"class":264},[220,78658,18841],{"class":230},[220,78660,78661,78663,78665,78667],{"class":222,"line":399},[220,78662,9012],{"class":226},[220,78664,29241],{"class":264},[220,78666,7120],{"class":420},[220,78668,749],{"class":264},[220,78670,78671,78673,78675,78677],{"class":222,"line":644},[220,78672,19850],{"class":226},[220,78674,29241],{"class":264},[220,78676,8043],{"class":420},[220,78678,749],{"class":264},[220,78680,78681],{"class":222,"line":650},[220,78682,31329],{"class":264},[220,78684,78685,78687,78689],{"class":222,"line":656},[220,78686,2550],{"class":264},[220,78688,2553],{"class":420},[220,78690,386],{"class":264},[220,78692,78693,78695,78697],{"class":222,"line":673},[220,78694,2567],{"class":264},[220,78696,78462],{"class":420},[220,78698,359],{"class":264},[220,78700,78701,78703,78705],{"class":222,"line":682},[220,78702,402],{"class":264},[220,78704,347],{"class":420},[220,78706,359],{"class":264},[212,78708,78709],{"className":468,"code":78556,"language":469,"meta":178,"style":178},[99,78710,78711,78719,78725,78733,78745,78757,78761,78769,78777],{"__ignoreMap":178},[220,78712,78713,78715,78717],{"class":222,"line":223},[220,78714,343],{"class":264},[220,78716,347],{"class":420},[220,78718,359],{"class":264},[220,78720,78721,78723],{"class":222,"line":179},[220,78722,364],{"class":264},[220,78724,78501],{"class":420},[220,78726,78727,78729,78731],{"class":222,"line":389},[220,78728,9002],{"class":226},[220,78730,353],{"class":260},[220,78732,18841],{"class":230},[220,78734,78735,78737,78739,78741,78743],{"class":222,"line":399},[220,78736,9012],{"class":226},[220,78738,353],{"class":260},[220,78740,743],{"class":264},[220,78742,7120],{"class":420},[220,78744,749],{"class":264},[220,78746,78747,78749,78751,78753,78755],{"class":222,"line":644},[220,78748,19850],{"class":226},[220,78750,353],{"class":260},[220,78752,743],{"class":264},[220,78754,8043],{"class":420},[220,78756,749],{"class":264},[220,78758,78759],{"class":222,"line":650},[220,78760,31329],{"class":264},[220,78762,78763,78765,78767],{"class":222,"line":656},[220,78764,2550],{"class":264},[220,78766,2553],{"class":420},[220,78768,386],{"class":264},[220,78770,78771,78773,78775],{"class":222,"line":673},[220,78772,2567],{"class":264},[220,78774,78462],{"class":420},[220,78776,359],{"class":264},[220,78778,78779,78781,78783],{"class":222,"line":682},[220,78780,402],{"class":264},[220,78782,347],{"class":420},[220,78784,359],{"class":264},[212,78786,78788],{"className":251,"code":78787,"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,78789,78790,78800,78804,78818,78822,78843,78851,78855,78859],{"__ignoreMap":178},[220,78791,78792,78794,78796,78798],{"class":222,"line":223},[220,78793,261],{"class":260},[220,78795,10879],{"class":264},[220,78797,268],{"class":260},[220,78799,4007],{"class":230},[220,78801,78802],{"class":222,"line":179},[220,78803,647],{"emptyLinePlaceholder":194},[220,78805,78806,78808,78810,78812,78814,78816],{"class":222,"line":389},[220,78807,1735],{"class":260},[220,78809,1738],{"class":420},[220,78811,1741],{"class":260},[220,78813,1744],{"class":260},[220,78815,1747],{"class":226},[220,78817,1750],{"class":264},[220,78819,78820],{"class":222,"line":399},[220,78821,1765],{"class":264},[220,78823,78824,78826,78829,78831,78833,78835,78837,78839,78841],{"class":222,"line":644},[220,78825,1770],{"class":264},[220,78827,78828],{"class":230},"'Vignette'",[220,78830,1776],{"class":264},[220,78832,19401],{"class":230},[220,78834,5932],{"class":264},[220,78836,7120],{"class":420},[220,78838,44373],{"class":264},[220,78840,8043],{"class":420},[220,78842,6912],{"class":264},[220,78844,78845,78847,78849],{"class":222,"line":650},[220,78846,6380],{"class":264},[220,78848,3206],{"class":230},[220,78850,2465],{"class":264},[220,78852,78853],{"class":222,"line":656},[220,78854,6397],{"class":264},[220,78856,78857],{"class":222,"line":673},[220,78858,1787],{"class":264},[220,78860,78861],{"class":222,"line":682},[220,78862,1792],{"class":264},[1504,78864,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78866},[78867,78868],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":78462,"description":78470},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":78875,"title":78876,"body":78877,"category":32433,"componentType":25247,"description":78884,"extension":191,"meta":79069,"navigation":194,"path":79070,"requiresChild":31900,"seo":79071,"stem":79072,"__hash__":79073},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":78878,"toc":79065},[78879,78882,78885,78887,78889,78892,78894,79063],[11,78880,78876],{"id":78881},"voronoi",[15,78883,78884],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31281,78886],{"component":78876},[23,78888,31285],{"id":25903},[31287,78890],{":props":78891},"[{\"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,78893,31293],{"id":31292},[246,78895,78896,78925,78953,78981,79009],{":tabs":1557},[212,78897,78899],{"className":334,"code":78898,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,78900,78901,78909,78917],{"__ignoreMap":178},[220,78902,78903,78905,78907],{"class":222,"line":223},[220,78904,343],{"class":264},[220,78906,347],{"class":346},[220,78908,359],{"class":264},[220,78910,78911,78913,78915],{"class":222,"line":179},[220,78912,364],{"class":264},[220,78914,78876],{"class":346},[220,78916,386],{"class":264},[220,78918,78919,78921,78923],{"class":222,"line":389},[220,78920,402],{"class":264},[220,78922,347],{"class":346},[220,78924,359],{"class":264},[212,78926,78927],{"className":409,"code":78898,"language":411,"meta":178,"style":178},[99,78928,78929,78937,78945],{"__ignoreMap":178},[220,78930,78931,78933,78935],{"class":222,"line":223},[220,78932,343],{"class":264},[220,78934,347],{"class":420},[220,78936,359],{"class":264},[220,78938,78939,78941,78943],{"class":222,"line":179},[220,78940,364],{"class":264},[220,78942,78876],{"class":420},[220,78944,386],{"class":264},[220,78946,78947,78949,78951],{"class":222,"line":389},[220,78948,402],{"class":264},[220,78950,347],{"class":420},[220,78952,359],{"class":264},[212,78954,78955],{"className":2844,"code":78898,"language":2846,"meta":178,"style":178},[99,78956,78957,78965,78973],{"__ignoreMap":178},[220,78958,78959,78961,78963],{"class":222,"line":223},[220,78960,343],{"class":264},[220,78962,347],{"class":420},[220,78964,359],{"class":264},[220,78966,78967,78969,78971],{"class":222,"line":179},[220,78968,364],{"class":264},[220,78970,78876],{"class":420},[220,78972,386],{"class":264},[220,78974,78975,78977,78979],{"class":222,"line":389},[220,78976,402],{"class":264},[220,78978,347],{"class":420},[220,78980,359],{"class":264},[212,78982,78983],{"className":468,"code":78898,"language":469,"meta":178,"style":178},[99,78984,78985,78993,79001],{"__ignoreMap":178},[220,78986,78987,78989,78991],{"class":222,"line":223},[220,78988,343],{"class":264},[220,78990,347],{"class":420},[220,78992,359],{"class":264},[220,78994,78995,78997,78999],{"class":222,"line":179},[220,78996,364],{"class":264},[220,78998,78876],{"class":420},[220,79000,386],{"class":264},[220,79002,79003,79005,79007],{"class":222,"line":389},[220,79004,402],{"class":264},[220,79006,347],{"class":420},[220,79008,359],{"class":264},[212,79010,79012],{"className":251,"code":79011,"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,79013,79014,79024,79028,79042,79046,79055,79059],{"__ignoreMap":178},[220,79015,79016,79018,79020,79022],{"class":222,"line":223},[220,79017,261],{"class":260},[220,79019,10879],{"class":264},[220,79021,268],{"class":260},[220,79023,4007],{"class":230},[220,79025,79026],{"class":222,"line":179},[220,79027,647],{"emptyLinePlaceholder":194},[220,79029,79030,79032,79034,79036,79038,79040],{"class":222,"line":389},[220,79031,1735],{"class":260},[220,79033,1738],{"class":420},[220,79035,1741],{"class":260},[220,79037,1744],{"class":260},[220,79039,1747],{"class":226},[220,79041,1750],{"class":264},[220,79043,79044],{"class":222,"line":399},[220,79045,1765],{"class":264},[220,79047,79048,79050,79053],{"class":222,"line":644},[220,79049,1770],{"class":264},[220,79051,79052],{"class":230},"'Voronoi'",[220,79054,2465],{"class":264},[220,79056,79057],{"class":222,"line":650},[220,79058,1787],{"class":264},[220,79060,79061],{"class":222,"line":656},[220,79062,1792],{"class":264},[1504,79064,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":79066},[79067,79068],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":78876,"description":78884},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":79075,"title":79076,"body":79077,"category":35939,"componentType":25247,"description":79084,"extension":191,"meta":79269,"navigation":194,"path":79270,"requiresChild":31900,"seo":79271,"stem":79272,"__hash__":79273},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":79078,"toc":79265},[79079,79082,79085,79087,79089,79092,79094,79263],[11,79080,79076],{"id":79081},"water",[15,79083,79084],{},"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",[31281,79086],{"component":79076},[23,79088,31285],{"id":25903},[31287,79090],{":props":79091},"[{\"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,79093,31293],{"id":31292},[246,79095,79096,79125,79153,79181,79209],{":tabs":1557},[212,79097,79099],{"className":334,"code":79098,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,79100,79101,79109,79117],{"__ignoreMap":178},[220,79102,79103,79105,79107],{"class":222,"line":223},[220,79104,343],{"class":264},[220,79106,347],{"class":346},[220,79108,359],{"class":264},[220,79110,79111,79113,79115],{"class":222,"line":179},[220,79112,364],{"class":264},[220,79114,79076],{"class":346},[220,79116,386],{"class":264},[220,79118,79119,79121,79123],{"class":222,"line":389},[220,79120,402],{"class":264},[220,79122,347],{"class":346},[220,79124,359],{"class":264},[212,79126,79127],{"className":409,"code":79098,"language":411,"meta":178,"style":178},[99,79128,79129,79137,79145],{"__ignoreMap":178},[220,79130,79131,79133,79135],{"class":222,"line":223},[220,79132,343],{"class":264},[220,79134,347],{"class":420},[220,79136,359],{"class":264},[220,79138,79139,79141,79143],{"class":222,"line":179},[220,79140,364],{"class":264},[220,79142,79076],{"class":420},[220,79144,386],{"class":264},[220,79146,79147,79149,79151],{"class":222,"line":389},[220,79148,402],{"class":264},[220,79150,347],{"class":420},[220,79152,359],{"class":264},[212,79154,79155],{"className":2844,"code":79098,"language":2846,"meta":178,"style":178},[99,79156,79157,79165,79173],{"__ignoreMap":178},[220,79158,79159,79161,79163],{"class":222,"line":223},[220,79160,343],{"class":264},[220,79162,347],{"class":420},[220,79164,359],{"class":264},[220,79166,79167,79169,79171],{"class":222,"line":179},[220,79168,364],{"class":264},[220,79170,79076],{"class":420},[220,79172,386],{"class":264},[220,79174,79175,79177,79179],{"class":222,"line":389},[220,79176,402],{"class":264},[220,79178,347],{"class":420},[220,79180,359],{"class":264},[212,79182,79183],{"className":468,"code":79098,"language":469,"meta":178,"style":178},[99,79184,79185,79193,79201],{"__ignoreMap":178},[220,79186,79187,79189,79191],{"class":222,"line":223},[220,79188,343],{"class":264},[220,79190,347],{"class":420},[220,79192,359],{"class":264},[220,79194,79195,79197,79199],{"class":222,"line":179},[220,79196,364],{"class":264},[220,79198,79076],{"class":420},[220,79200,386],{"class":264},[220,79202,79203,79205,79207],{"class":222,"line":389},[220,79204,402],{"class":264},[220,79206,347],{"class":420},[220,79208,359],{"class":264},[212,79210,79212],{"className":251,"code":79211,"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,79213,79214,79224,79228,79242,79246,79255,79259],{"__ignoreMap":178},[220,79215,79216,79218,79220,79222],{"class":222,"line":223},[220,79217,261],{"class":260},[220,79219,10879],{"class":264},[220,79221,268],{"class":260},[220,79223,4007],{"class":230},[220,79225,79226],{"class":222,"line":179},[220,79227,647],{"emptyLinePlaceholder":194},[220,79229,79230,79232,79234,79236,79238,79240],{"class":222,"line":389},[220,79231,1735],{"class":260},[220,79233,1738],{"class":420},[220,79235,1741],{"class":260},[220,79237,1744],{"class":260},[220,79239,1747],{"class":226},[220,79241,1750],{"class":264},[220,79243,79244],{"class":222,"line":399},[220,79245,1765],{"class":264},[220,79247,79248,79250,79253],{"class":222,"line":644},[220,79249,1770],{"class":264},[220,79251,79252],{"class":230},"'Water'",[220,79254,2465],{"class":264},[220,79256,79257],{"class":222,"line":650},[220,79258,1787],{"class":264},[220,79260,79261],{"class":222,"line":656},[220,79262,1792],{"class":264},[1504,79264,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":79266},[79267,79268],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":79076,"description":79084},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":79275,"title":79276,"body":79277,"category":32176,"componentType":25253,"description":79284,"extension":191,"meta":79601,"navigation":194,"path":79602,"requiresChild":194,"seo":79603,"stem":79604,"__hash__":79605},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":79278,"toc":79597},[79279,79282,79285,79287,79289,79292,79294,79595],[11,79280,79276],{"id":79281},"watercolor",[15,79283,79284],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31281,79286],{"component":79276},[23,79288,31285],{"id":25903},[31287,79290],{":props":79291},"[{\"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,79293,31293],{"id":31292},[246,79295,79296,79352,79411,79467,79525],{":tabs":1557},[212,79297,79299],{"className":334,"code":79298,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79300,79301,79309,79316,79324,79328,79336,79344],{"__ignoreMap":178},[220,79302,79303,79305,79307],{"class":222,"line":223},[220,79304,343],{"class":264},[220,79306,347],{"class":346},[220,79308,359],{"class":264},[220,79310,79311,79313],{"class":222,"line":179},[220,79312,364],{"class":264},[220,79314,79315],{"class":346},"Watercolor\n",[220,79317,79318,79320,79322],{"class":222,"line":389},[220,79319,16772],{"class":226},[220,79321,353],{"class":264},[220,79323,38039],{"class":230},[220,79325,79326],{"class":222,"line":399},[220,79327,31329],{"class":264},[220,79329,79330,79332,79334],{"class":222,"line":644},[220,79331,2550],{"class":264},[220,79333,2553],{"class":346},[220,79335,386],{"class":264},[220,79337,79338,79340,79342],{"class":222,"line":650},[220,79339,2567],{"class":264},[220,79341,79276],{"class":346},[220,79343,359],{"class":264},[220,79345,79346,79348,79350],{"class":222,"line":656},[220,79347,402],{"class":264},[220,79349,347],{"class":346},[220,79351,359],{"class":264},[212,79353,79355],{"className":409,"code":79354,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79356,79357,79365,79371,79383,79387,79395,79403],{"__ignoreMap":178},[220,79358,79359,79361,79363],{"class":222,"line":223},[220,79360,343],{"class":264},[220,79362,347],{"class":420},[220,79364,359],{"class":264},[220,79366,79367,79369],{"class":222,"line":179},[220,79368,364],{"class":264},[220,79370,79315],{"class":420},[220,79372,79373,79375,79377,79379,79381],{"class":222,"line":389},[220,79374,9012],{"class":226},[220,79376,353],{"class":260},[220,79378,743],{"class":264},[220,79380,38093],{"class":420},[220,79382,749],{"class":264},[220,79384,79385],{"class":222,"line":399},[220,79386,31329],{"class":264},[220,79388,79389,79391,79393],{"class":222,"line":644},[220,79390,2550],{"class":264},[220,79392,2553],{"class":420},[220,79394,386],{"class":264},[220,79396,79397,79399,79401],{"class":222,"line":650},[220,79398,2567],{"class":264},[220,79400,79276],{"class":420},[220,79402,359],{"class":264},[220,79404,79405,79407,79409],{"class":222,"line":656},[220,79406,402],{"class":264},[220,79408,347],{"class":420},[220,79410,359],{"class":264},[212,79412,79413],{"className":2844,"code":79354,"language":2846,"meta":178,"style":178},[99,79414,79415,79423,79429,79439,79443,79451,79459],{"__ignoreMap":178},[220,79416,79417,79419,79421],{"class":222,"line":223},[220,79418,343],{"class":264},[220,79420,347],{"class":420},[220,79422,359],{"class":264},[220,79424,79425,79427],{"class":222,"line":179},[220,79426,364],{"class":264},[220,79428,79315],{"class":420},[220,79430,79431,79433,79435,79437],{"class":222,"line":389},[220,79432,9012],{"class":226},[220,79434,29241],{"class":264},[220,79436,38093],{"class":420},[220,79438,749],{"class":264},[220,79440,79441],{"class":222,"line":399},[220,79442,31329],{"class":264},[220,79444,79445,79447,79449],{"class":222,"line":644},[220,79446,2550],{"class":264},[220,79448,2553],{"class":420},[220,79450,386],{"class":264},[220,79452,79453,79455,79457],{"class":222,"line":650},[220,79454,2567],{"class":264},[220,79456,79276],{"class":420},[220,79458,359],{"class":264},[220,79460,79461,79463,79465],{"class":222,"line":656},[220,79462,402],{"class":264},[220,79464,347],{"class":420},[220,79466,359],{"class":264},[212,79468,79469],{"className":468,"code":79354,"language":469,"meta":178,"style":178},[99,79470,79471,79479,79485,79497,79501,79509,79517],{"__ignoreMap":178},[220,79472,79473,79475,79477],{"class":222,"line":223},[220,79474,343],{"class":264},[220,79476,347],{"class":420},[220,79478,359],{"class":264},[220,79480,79481,79483],{"class":222,"line":179},[220,79482,364],{"class":264},[220,79484,79315],{"class":420},[220,79486,79487,79489,79491,79493,79495],{"class":222,"line":389},[220,79488,9012],{"class":226},[220,79490,353],{"class":260},[220,79492,743],{"class":264},[220,79494,38093],{"class":420},[220,79496,749],{"class":264},[220,79498,79499],{"class":222,"line":399},[220,79500,31329],{"class":264},[220,79502,79503,79505,79507],{"class":222,"line":644},[220,79504,2550],{"class":264},[220,79506,2553],{"class":420},[220,79508,386],{"class":264},[220,79510,79511,79513,79515],{"class":222,"line":650},[220,79512,2567],{"class":264},[220,79514,79276],{"class":420},[220,79516,359],{"class":264},[220,79518,79519,79521,79523],{"class":222,"line":656},[220,79520,402],{"class":264},[220,79522,347],{"class":420},[220,79524,359],{"class":264},[212,79526,79528],{"className":251,"code":79527,"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,79529,79530,79540,79544,79558,79562,79575,79583,79587,79591],{"__ignoreMap":178},[220,79531,79532,79534,79536,79538],{"class":222,"line":223},[220,79533,261],{"class":260},[220,79535,10879],{"class":264},[220,79537,268],{"class":260},[220,79539,4007],{"class":230},[220,79541,79542],{"class":222,"line":179},[220,79543,647],{"emptyLinePlaceholder":194},[220,79545,79546,79548,79550,79552,79554,79556],{"class":222,"line":389},[220,79547,1735],{"class":260},[220,79549,1738],{"class":420},[220,79551,1741],{"class":260},[220,79553,1744],{"class":260},[220,79555,1747],{"class":226},[220,79557,1750],{"class":264},[220,79559,79560],{"class":222,"line":399},[220,79561,1765],{"class":264},[220,79563,79564,79566,79569,79571,79573],{"class":222,"line":644},[220,79565,1770],{"class":264},[220,79567,79568],{"class":230},"'Watercolor'",[220,79570,6907],{"class":264},[220,79572,38093],{"class":420},[220,79574,6912],{"class":264},[220,79576,79577,79579,79581],{"class":222,"line":650},[220,79578,6380],{"class":264},[220,79580,3206],{"class":230},[220,79582,2465],{"class":264},[220,79584,79585],{"class":222,"line":656},[220,79586,6397],{"class":264},[220,79588,79589],{"class":222,"line":673},[220,79590,1787],{"class":264},[220,79592,79593],{"class":222,"line":682},[220,79594,1792],{"class":264},[1504,79596,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79598},[79599,79600],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":79276,"description":79284},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":79607,"title":79608,"body":79609,"category":32766,"componentType":25253,"description":79616,"extension":191,"meta":79877,"navigation":194,"path":79878,"requiresChild":194,"seo":79879,"stem":79880,"__hash__":79881},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":79610,"toc":79873},[79611,79614,79617,79619,79621,79624,79626,79871],[11,79612,79608],{"id":79613},"wavedistortion",[15,79615,79616],{},"Wave-based distortion with multiple waveform types",[31281,79618],{"component":79608},[23,79620,31285],{"id":25903},[31287,79622],{":props":79623},"[{\"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,79625,31293],{"id":31292},[246,79627,79628,79673,79717,79761,79805],{":tabs":1557},[212,79629,79631],{"className":334,"code":79630,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,79632,79633,79641,79649,79657,79665],{"__ignoreMap":178},[220,79634,79635,79637,79639],{"class":222,"line":223},[220,79636,343],{"class":264},[220,79638,347],{"class":346},[220,79640,359],{"class":264},[220,79642,79643,79645,79647],{"class":222,"line":179},[220,79644,364],{"class":264},[220,79646,79608],{"class":346},[220,79648,359],{"class":264},[220,79650,79651,79653,79655],{"class":222,"line":389},[220,79652,2550],{"class":264},[220,79654,2553],{"class":346},[220,79656,386],{"class":264},[220,79658,79659,79661,79663],{"class":222,"line":399},[220,79660,2567],{"class":264},[220,79662,79608],{"class":346},[220,79664,359],{"class":264},[220,79666,79667,79669,79671],{"class":222,"line":644},[220,79668,402],{"class":264},[220,79670,347],{"class":346},[220,79672,359],{"class":264},[212,79674,79675],{"className":409,"code":79630,"language":411,"meta":178,"style":178},[99,79676,79677,79685,79693,79701,79709],{"__ignoreMap":178},[220,79678,79679,79681,79683],{"class":222,"line":223},[220,79680,343],{"class":264},[220,79682,347],{"class":420},[220,79684,359],{"class":264},[220,79686,79687,79689,79691],{"class":222,"line":179},[220,79688,364],{"class":264},[220,79690,79608],{"class":420},[220,79692,359],{"class":264},[220,79694,79695,79697,79699],{"class":222,"line":389},[220,79696,2550],{"class":264},[220,79698,2553],{"class":420},[220,79700,386],{"class":264},[220,79702,79703,79705,79707],{"class":222,"line":399},[220,79704,2567],{"class":264},[220,79706,79608],{"class":420},[220,79708,359],{"class":264},[220,79710,79711,79713,79715],{"class":222,"line":644},[220,79712,402],{"class":264},[220,79714,347],{"class":420},[220,79716,359],{"class":264},[212,79718,79719],{"className":2844,"code":79630,"language":2846,"meta":178,"style":178},[99,79720,79721,79729,79737,79745,79753],{"__ignoreMap":178},[220,79722,79723,79725,79727],{"class":222,"line":223},[220,79724,343],{"class":264},[220,79726,347],{"class":420},[220,79728,359],{"class":264},[220,79730,79731,79733,79735],{"class":222,"line":179},[220,79732,364],{"class":264},[220,79734,79608],{"class":420},[220,79736,359],{"class":264},[220,79738,79739,79741,79743],{"class":222,"line":389},[220,79740,2550],{"class":264},[220,79742,2553],{"class":420},[220,79744,386],{"class":264},[220,79746,79747,79749,79751],{"class":222,"line":399},[220,79748,2567],{"class":264},[220,79750,79608],{"class":420},[220,79752,359],{"class":264},[220,79754,79755,79757,79759],{"class":222,"line":644},[220,79756,402],{"class":264},[220,79758,347],{"class":420},[220,79760,359],{"class":264},[212,79762,79763],{"className":468,"code":79630,"language":469,"meta":178,"style":178},[99,79764,79765,79773,79781,79789,79797],{"__ignoreMap":178},[220,79766,79767,79769,79771],{"class":222,"line":223},[220,79768,343],{"class":264},[220,79770,347],{"class":420},[220,79772,359],{"class":264},[220,79774,79775,79777,79779],{"class":222,"line":179},[220,79776,364],{"class":264},[220,79778,79608],{"class":420},[220,79780,359],{"class":264},[220,79782,79783,79785,79787],{"class":222,"line":389},[220,79784,2550],{"class":264},[220,79786,2553],{"class":420},[220,79788,386],{"class":264},[220,79790,79791,79793,79795],{"class":222,"line":399},[220,79792,2567],{"class":264},[220,79794,79608],{"class":420},[220,79796,359],{"class":264},[220,79798,79799,79801,79803],{"class":222,"line":644},[220,79800,402],{"class":264},[220,79802,347],{"class":420},[220,79804,359],{"class":264},[212,79806,79808],{"className":251,"code":79807,"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,79809,79810,79820,79824,79838,79842,79851,79859,79863,79867],{"__ignoreMap":178},[220,79811,79812,79814,79816,79818],{"class":222,"line":223},[220,79813,261],{"class":260},[220,79815,10879],{"class":264},[220,79817,268],{"class":260},[220,79819,4007],{"class":230},[220,79821,79822],{"class":222,"line":179},[220,79823,647],{"emptyLinePlaceholder":194},[220,79825,79826,79828,79830,79832,79834,79836],{"class":222,"line":389},[220,79827,1735],{"class":260},[220,79829,1738],{"class":420},[220,79831,1741],{"class":260},[220,79833,1744],{"class":260},[220,79835,1747],{"class":226},[220,79837,1750],{"class":264},[220,79839,79840],{"class":222,"line":399},[220,79841,1765],{"class":264},[220,79843,79844,79846,79849],{"class":222,"line":644},[220,79845,1770],{"class":264},[220,79847,79848],{"class":230},"'WaveDistortion'",[220,79850,6375],{"class":264},[220,79852,79853,79855,79857],{"class":222,"line":650},[220,79854,6380],{"class":264},[220,79856,3206],{"class":230},[220,79858,2465],{"class":264},[220,79860,79861],{"class":222,"line":656},[220,79862,6397],{"class":264},[220,79864,79865],{"class":222,"line":673},[220,79866,1787],{"class":264},[220,79868,79869],{"class":222,"line":682},[220,79870,1792],{"class":264},[1504,79872,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":79874},[79875,79876],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":79608,"description":79616},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":79883,"title":79884,"body":79885,"category":32433,"componentType":25247,"description":79892,"extension":191,"meta":80077,"navigation":194,"path":80078,"requiresChild":31900,"seo":80079,"stem":80080,"__hash__":80081},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":79886,"toc":80073},[79887,79890,79893,79895,79897,79900,79902,80071],[11,79888,79884],{"id":79889},"waveletnoise",[15,79891,79892],{},"Rotating banded wavelets that ripple as they animate",[31281,79894],{"component":79884},[23,79896,31285],{"id":25903},[31287,79898],{":props":79899},"[{\"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,79901,31293],{"id":31292},[246,79903,79904,79933,79961,79989,80017],{":tabs":1557},[212,79905,79907],{"className":334,"code":79906,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,79908,79909,79917,79925],{"__ignoreMap":178},[220,79910,79911,79913,79915],{"class":222,"line":223},[220,79912,343],{"class":264},[220,79914,347],{"class":346},[220,79916,359],{"class":264},[220,79918,79919,79921,79923],{"class":222,"line":179},[220,79920,364],{"class":264},[220,79922,79884],{"class":346},[220,79924,386],{"class":264},[220,79926,79927,79929,79931],{"class":222,"line":389},[220,79928,402],{"class":264},[220,79930,347],{"class":346},[220,79932,359],{"class":264},[212,79934,79935],{"className":409,"code":79906,"language":411,"meta":178,"style":178},[99,79936,79937,79945,79953],{"__ignoreMap":178},[220,79938,79939,79941,79943],{"class":222,"line":223},[220,79940,343],{"class":264},[220,79942,347],{"class":420},[220,79944,359],{"class":264},[220,79946,79947,79949,79951],{"class":222,"line":179},[220,79948,364],{"class":264},[220,79950,79884],{"class":420},[220,79952,386],{"class":264},[220,79954,79955,79957,79959],{"class":222,"line":389},[220,79956,402],{"class":264},[220,79958,347],{"class":420},[220,79960,359],{"class":264},[212,79962,79963],{"className":2844,"code":79906,"language":2846,"meta":178,"style":178},[99,79964,79965,79973,79981],{"__ignoreMap":178},[220,79966,79967,79969,79971],{"class":222,"line":223},[220,79968,343],{"class":264},[220,79970,347],{"class":420},[220,79972,359],{"class":264},[220,79974,79975,79977,79979],{"class":222,"line":179},[220,79976,364],{"class":264},[220,79978,79884],{"class":420},[220,79980,386],{"class":264},[220,79982,79983,79985,79987],{"class":222,"line":389},[220,79984,402],{"class":264},[220,79986,347],{"class":420},[220,79988,359],{"class":264},[212,79990,79991],{"className":468,"code":79906,"language":469,"meta":178,"style":178},[99,79992,79993,80001,80009],{"__ignoreMap":178},[220,79994,79995,79997,79999],{"class":222,"line":223},[220,79996,343],{"class":264},[220,79998,347],{"class":420},[220,80000,359],{"class":264},[220,80002,80003,80005,80007],{"class":222,"line":179},[220,80004,364],{"class":264},[220,80006,79884],{"class":420},[220,80008,386],{"class":264},[220,80010,80011,80013,80015],{"class":222,"line":389},[220,80012,402],{"class":264},[220,80014,347],{"class":420},[220,80016,359],{"class":264},[212,80018,80020],{"className":251,"code":80019,"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,80021,80022,80032,80036,80050,80054,80063,80067],{"__ignoreMap":178},[220,80023,80024,80026,80028,80030],{"class":222,"line":223},[220,80025,261],{"class":260},[220,80027,10879],{"class":264},[220,80029,268],{"class":260},[220,80031,4007],{"class":230},[220,80033,80034],{"class":222,"line":179},[220,80035,647],{"emptyLinePlaceholder":194},[220,80037,80038,80040,80042,80044,80046,80048],{"class":222,"line":389},[220,80039,1735],{"class":260},[220,80041,1738],{"class":420},[220,80043,1741],{"class":260},[220,80045,1744],{"class":260},[220,80047,1747],{"class":226},[220,80049,1750],{"class":264},[220,80051,80052],{"class":222,"line":399},[220,80053,1765],{"class":264},[220,80055,80056,80058,80061],{"class":222,"line":644},[220,80057,1770],{"class":264},[220,80059,80060],{"class":230},"'WaveletNoise'",[220,80062,2465],{"class":264},[220,80064,80065],{"class":222,"line":650},[220,80066,1787],{"class":264},[220,80068,80069],{"class":222,"line":656},[220,80070,1792],{"class":264},[1504,80072,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":80074},[80075,80076],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":79884,"description":79892},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":80083,"title":80084,"body":80085,"category":32433,"componentType":25247,"description":80092,"extension":191,"meta":80277,"navigation":194,"path":80278,"requiresChild":31900,"seo":80279,"stem":80280,"__hash__":80281},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":80086,"toc":80273},[80087,80090,80093,80095,80097,80100,80102,80271],[11,80088,80084],{"id":80089},"weave",[15,80091,80092],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31281,80094],{"component":80084},[23,80096,31285],{"id":25903},[31287,80098],{":props":80099},"[{\"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,80101,31293],{"id":31292},[246,80103,80104,80133,80161,80189,80217],{":tabs":1557},[212,80105,80107],{"className":334,"code":80106,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,80108,80109,80117,80125],{"__ignoreMap":178},[220,80110,80111,80113,80115],{"class":222,"line":223},[220,80112,343],{"class":264},[220,80114,347],{"class":346},[220,80116,359],{"class":264},[220,80118,80119,80121,80123],{"class":222,"line":179},[220,80120,364],{"class":264},[220,80122,80084],{"class":346},[220,80124,386],{"class":264},[220,80126,80127,80129,80131],{"class":222,"line":389},[220,80128,402],{"class":264},[220,80130,347],{"class":346},[220,80132,359],{"class":264},[212,80134,80135],{"className":409,"code":80106,"language":411,"meta":178,"style":178},[99,80136,80137,80145,80153],{"__ignoreMap":178},[220,80138,80139,80141,80143],{"class":222,"line":223},[220,80140,343],{"class":264},[220,80142,347],{"class":420},[220,80144,359],{"class":264},[220,80146,80147,80149,80151],{"class":222,"line":179},[220,80148,364],{"class":264},[220,80150,80084],{"class":420},[220,80152,386],{"class":264},[220,80154,80155,80157,80159],{"class":222,"line":389},[220,80156,402],{"class":264},[220,80158,347],{"class":420},[220,80160,359],{"class":264},[212,80162,80163],{"className":2844,"code":80106,"language":2846,"meta":178,"style":178},[99,80164,80165,80173,80181],{"__ignoreMap":178},[220,80166,80167,80169,80171],{"class":222,"line":223},[220,80168,343],{"class":264},[220,80170,347],{"class":420},[220,80172,359],{"class":264},[220,80174,80175,80177,80179],{"class":222,"line":179},[220,80176,364],{"class":264},[220,80178,80084],{"class":420},[220,80180,386],{"class":264},[220,80182,80183,80185,80187],{"class":222,"line":389},[220,80184,402],{"class":264},[220,80186,347],{"class":420},[220,80188,359],{"class":264},[212,80190,80191],{"className":468,"code":80106,"language":469,"meta":178,"style":178},[99,80192,80193,80201,80209],{"__ignoreMap":178},[220,80194,80195,80197,80199],{"class":222,"line":223},[220,80196,343],{"class":264},[220,80198,347],{"class":420},[220,80200,359],{"class":264},[220,80202,80203,80205,80207],{"class":222,"line":179},[220,80204,364],{"class":264},[220,80206,80084],{"class":420},[220,80208,386],{"class":264},[220,80210,80211,80213,80215],{"class":222,"line":389},[220,80212,402],{"class":264},[220,80214,347],{"class":420},[220,80216,359],{"class":264},[212,80218,80220],{"className":251,"code":80219,"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,80221,80222,80232,80236,80250,80254,80263,80267],{"__ignoreMap":178},[220,80223,80224,80226,80228,80230],{"class":222,"line":223},[220,80225,261],{"class":260},[220,80227,10879],{"class":264},[220,80229,268],{"class":260},[220,80231,4007],{"class":230},[220,80233,80234],{"class":222,"line":179},[220,80235,647],{"emptyLinePlaceholder":194},[220,80237,80238,80240,80242,80244,80246,80248],{"class":222,"line":389},[220,80239,1735],{"class":260},[220,80241,1738],{"class":420},[220,80243,1741],{"class":260},[220,80245,1744],{"class":260},[220,80247,1747],{"class":226},[220,80249,1750],{"class":264},[220,80251,80252],{"class":222,"line":399},[220,80253,1765],{"class":264},[220,80255,80256,80258,80261],{"class":222,"line":644},[220,80257,1770],{"class":264},[220,80259,80260],{"class":230},"'Weave'",[220,80262,2465],{"class":264},[220,80264,80265],{"class":222,"line":650},[220,80266,1787],{"class":264},[220,80268,80269],{"class":222,"line":656},[220,80270,1792],{"class":264},[1504,80272,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":80274},[80275,80276],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":80084,"description":80092},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":80283,"title":80284,"body":80285,"category":32433,"componentType":25247,"description":80292,"extension":191,"meta":80477,"navigation":194,"path":80478,"requiresChild":31900,"seo":80479,"stem":80480,"__hash__":80481},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":80286,"toc":80473},[80287,80290,80293,80295,80297,80300,80302,80471],[11,80288,80284],{"id":80289},"webcamtexture",[15,80291,80292],{},"Display a live webcam feed with customizable object-fit modes",[31281,80294],{"component":80284},[23,80296,31285],{"id":25903},[31287,80298],{":props":80299},"[{\"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,80301,31293],{"id":31292},[246,80303,80304,80333,80361,80389,80417],{":tabs":1557},[212,80305,80307],{"className":334,"code":80306,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,80308,80309,80317,80325],{"__ignoreMap":178},[220,80310,80311,80313,80315],{"class":222,"line":223},[220,80312,343],{"class":264},[220,80314,347],{"class":346},[220,80316,359],{"class":264},[220,80318,80319,80321,80323],{"class":222,"line":179},[220,80320,364],{"class":264},[220,80322,80284],{"class":346},[220,80324,386],{"class":264},[220,80326,80327,80329,80331],{"class":222,"line":389},[220,80328,402],{"class":264},[220,80330,347],{"class":346},[220,80332,359],{"class":264},[212,80334,80335],{"className":409,"code":80306,"language":411,"meta":178,"style":178},[99,80336,80337,80345,80353],{"__ignoreMap":178},[220,80338,80339,80341,80343],{"class":222,"line":223},[220,80340,343],{"class":264},[220,80342,347],{"class":420},[220,80344,359],{"class":264},[220,80346,80347,80349,80351],{"class":222,"line":179},[220,80348,364],{"class":264},[220,80350,80284],{"class":420},[220,80352,386],{"class":264},[220,80354,80355,80357,80359],{"class":222,"line":389},[220,80356,402],{"class":264},[220,80358,347],{"class":420},[220,80360,359],{"class":264},[212,80362,80363],{"className":2844,"code":80306,"language":2846,"meta":178,"style":178},[99,80364,80365,80373,80381],{"__ignoreMap":178},[220,80366,80367,80369,80371],{"class":222,"line":223},[220,80368,343],{"class":264},[220,80370,347],{"class":420},[220,80372,359],{"class":264},[220,80374,80375,80377,80379],{"class":222,"line":179},[220,80376,364],{"class":264},[220,80378,80284],{"class":420},[220,80380,386],{"class":264},[220,80382,80383,80385,80387],{"class":222,"line":389},[220,80384,402],{"class":264},[220,80386,347],{"class":420},[220,80388,359],{"class":264},[212,80390,80391],{"className":468,"code":80306,"language":469,"meta":178,"style":178},[99,80392,80393,80401,80409],{"__ignoreMap":178},[220,80394,80395,80397,80399],{"class":222,"line":223},[220,80396,343],{"class":264},[220,80398,347],{"class":420},[220,80400,359],{"class":264},[220,80402,80403,80405,80407],{"class":222,"line":179},[220,80404,364],{"class":264},[220,80406,80284],{"class":420},[220,80408,386],{"class":264},[220,80410,80411,80413,80415],{"class":222,"line":389},[220,80412,402],{"class":264},[220,80414,347],{"class":420},[220,80416,359],{"class":264},[212,80418,80420],{"className":251,"code":80419,"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,80421,80422,80432,80436,80450,80454,80463,80467],{"__ignoreMap":178},[220,80423,80424,80426,80428,80430],{"class":222,"line":223},[220,80425,261],{"class":260},[220,80427,10879],{"class":264},[220,80429,268],{"class":260},[220,80431,4007],{"class":230},[220,80433,80434],{"class":222,"line":179},[220,80435,647],{"emptyLinePlaceholder":194},[220,80437,80438,80440,80442,80444,80446,80448],{"class":222,"line":389},[220,80439,1735],{"class":260},[220,80441,1738],{"class":420},[220,80443,1741],{"class":260},[220,80445,1744],{"class":260},[220,80447,1747],{"class":226},[220,80449,1750],{"class":264},[220,80451,80452],{"class":222,"line":399},[220,80453,1765],{"class":264},[220,80455,80456,80458,80461],{"class":222,"line":644},[220,80457,1770],{"class":264},[220,80459,80460],{"class":230},"'WebcamTexture'",[220,80462,2465],{"class":264},[220,80464,80465],{"class":222,"line":650},[220,80466,1787],{"class":264},[220,80468,80469],{"class":222,"line":656},[220,80470,1792],{"class":264},[1504,80472,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":80474},[80475,80476],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":80284,"description":80292},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":80483,"title":80484,"body":80485,"category":32176,"componentType":25253,"description":80492,"extension":191,"meta":80809,"navigation":194,"path":80810,"requiresChild":194,"seo":80811,"stem":80812,"__hash__":80813},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":80486,"toc":80805},[80487,80490,80493,80495,80497,80500,80502,80803],[11,80488,80484],{"id":80489},"wool",[15,80491,80492],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31281,80494],{"component":80484},[23,80496,31285],{"id":25903},[31287,80498],{":props":80499},"[{\"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,80501,31293],{"id":31292},[246,80503,80504,80560,80619,80675,80733],{":tabs":1557},[212,80505,80507],{"className":334,"code":80506,"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,80508,80509,80517,80524,80532,80536,80544,80552],{"__ignoreMap":178},[220,80510,80511,80513,80515],{"class":222,"line":223},[220,80512,343],{"class":264},[220,80514,347],{"class":346},[220,80516,359],{"class":264},[220,80518,80519,80521],{"class":222,"line":179},[220,80520,364],{"class":264},[220,80522,80523],{"class":346},"Wool\n",[220,80525,80526,80528,80530],{"class":222,"line":389},[220,80527,19739],{"class":226},[220,80529,353],{"class":264},[220,80531,41528],{"class":230},[220,80533,80534],{"class":222,"line":399},[220,80535,31329],{"class":264},[220,80537,80538,80540,80542],{"class":222,"line":644},[220,80539,2550],{"class":264},[220,80541,2553],{"class":346},[220,80543,386],{"class":264},[220,80545,80546,80548,80550],{"class":222,"line":650},[220,80547,2567],{"class":264},[220,80549,80484],{"class":346},[220,80551,359],{"class":264},[220,80553,80554,80556,80558],{"class":222,"line":656},[220,80555,402],{"class":264},[220,80557,347],{"class":346},[220,80559,359],{"class":264},[212,80561,80563],{"className":409,"code":80562,"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,80564,80565,80573,80579,80591,80595,80603,80611],{"__ignoreMap":178},[220,80566,80567,80569,80571],{"class":222,"line":223},[220,80568,343],{"class":264},[220,80570,347],{"class":420},[220,80572,359],{"class":264},[220,80574,80575,80577],{"class":222,"line":179},[220,80576,364],{"class":264},[220,80578,80523],{"class":420},[220,80580,80581,80583,80585,80587,80589],{"class":222,"line":389},[220,80582,19850],{"class":226},[220,80584,353],{"class":260},[220,80586,743],{"class":264},[220,80588,7120],{"class":420},[220,80590,749],{"class":264},[220,80592,80593],{"class":222,"line":399},[220,80594,31329],{"class":264},[220,80596,80597,80599,80601],{"class":222,"line":644},[220,80598,2550],{"class":264},[220,80600,2553],{"class":420},[220,80602,386],{"class":264},[220,80604,80605,80607,80609],{"class":222,"line":650},[220,80606,2567],{"class":264},[220,80608,80484],{"class":420},[220,80610,359],{"class":264},[220,80612,80613,80615,80617],{"class":222,"line":656},[220,80614,402],{"class":264},[220,80616,347],{"class":420},[220,80618,359],{"class":264},[212,80620,80621],{"className":2844,"code":80562,"language":2846,"meta":178,"style":178},[99,80622,80623,80631,80637,80647,80651,80659,80667],{"__ignoreMap":178},[220,80624,80625,80627,80629],{"class":222,"line":223},[220,80626,343],{"class":264},[220,80628,347],{"class":420},[220,80630,359],{"class":264},[220,80632,80633,80635],{"class":222,"line":179},[220,80634,364],{"class":264},[220,80636,80523],{"class":420},[220,80638,80639,80641,80643,80645],{"class":222,"line":389},[220,80640,19850],{"class":226},[220,80642,29241],{"class":264},[220,80644,7120],{"class":420},[220,80646,749],{"class":264},[220,80648,80649],{"class":222,"line":399},[220,80650,31329],{"class":264},[220,80652,80653,80655,80657],{"class":222,"line":644},[220,80654,2550],{"class":264},[220,80656,2553],{"class":420},[220,80658,386],{"class":264},[220,80660,80661,80663,80665],{"class":222,"line":650},[220,80662,2567],{"class":264},[220,80664,80484],{"class":420},[220,80666,359],{"class":264},[220,80668,80669,80671,80673],{"class":222,"line":656},[220,80670,402],{"class":264},[220,80672,347],{"class":420},[220,80674,359],{"class":264},[212,80676,80677],{"className":468,"code":80562,"language":469,"meta":178,"style":178},[99,80678,80679,80687,80693,80705,80709,80717,80725],{"__ignoreMap":178},[220,80680,80681,80683,80685],{"class":222,"line":223},[220,80682,343],{"class":264},[220,80684,347],{"class":420},[220,80686,359],{"class":264},[220,80688,80689,80691],{"class":222,"line":179},[220,80690,364],{"class":264},[220,80692,80523],{"class":420},[220,80694,80695,80697,80699,80701,80703],{"class":222,"line":389},[220,80696,19850],{"class":226},[220,80698,353],{"class":260},[220,80700,743],{"class":264},[220,80702,7120],{"class":420},[220,80704,749],{"class":264},[220,80706,80707],{"class":222,"line":399},[220,80708,31329],{"class":264},[220,80710,80711,80713,80715],{"class":222,"line":644},[220,80712,2550],{"class":264},[220,80714,2553],{"class":420},[220,80716,386],{"class":264},[220,80718,80719,80721,80723],{"class":222,"line":650},[220,80720,2567],{"class":264},[220,80722,80484],{"class":420},[220,80724,359],{"class":264},[220,80726,80727,80729,80731],{"class":222,"line":656},[220,80728,402],{"class":264},[220,80730,347],{"class":420},[220,80732,359],{"class":264},[212,80734,80736],{"className":251,"code":80735,"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,80737,80738,80748,80752,80766,80770,80783,80791,80795,80799],{"__ignoreMap":178},[220,80739,80740,80742,80744,80746],{"class":222,"line":223},[220,80741,261],{"class":260},[220,80743,10879],{"class":264},[220,80745,268],{"class":260},[220,80747,4007],{"class":230},[220,80749,80750],{"class":222,"line":179},[220,80751,647],{"emptyLinePlaceholder":194},[220,80753,80754,80756,80758,80760,80762,80764],{"class":222,"line":389},[220,80755,1735],{"class":260},[220,80757,1738],{"class":420},[220,80759,1741],{"class":260},[220,80761,1744],{"class":260},[220,80763,1747],{"class":226},[220,80765,1750],{"class":264},[220,80767,80768],{"class":222,"line":399},[220,80769,1765],{"class":264},[220,80771,80772,80774,80777,80779,80781],{"class":222,"line":644},[220,80773,1770],{"class":264},[220,80775,80776],{"class":230},"'Wool'",[220,80778,31573],{"class":264},[220,80780,7120],{"class":420},[220,80782,6912],{"class":264},[220,80784,80785,80787,80789],{"class":222,"line":650},[220,80786,6380],{"class":264},[220,80788,3206],{"class":230},[220,80790,2465],{"class":264},[220,80792,80793],{"class":222,"line":656},[220,80794,6397],{"class":264},[220,80796,80797],{"class":222,"line":673},[220,80798,1787],{"class":264},[220,80800,80801],{"class":222,"line":682},[220,80802,1792],{"class":264},[1504,80804,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80806},[80807,80808],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":80484,"description":80492},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":80815,"title":80816,"body":80817,"category":32433,"componentType":25247,"description":80824,"extension":191,"meta":81009,"navigation":194,"path":81010,"requiresChild":31900,"seo":81011,"stem":81012,"__hash__":81013},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":80818,"toc":81005},[80819,80822,80825,80827,80829,80832,80834,81003],[11,80820,80816],{"id":80821},"worleynoise",[15,80823,80824],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31281,80826],{"component":80816},[23,80828,31285],{"id":25903},[31287,80830],{":props":80831},"[{\"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,80833,31293],{"id":31292},[246,80835,80836,80865,80893,80921,80949],{":tabs":1557},[212,80837,80839],{"className":334,"code":80838,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,80840,80841,80849,80857],{"__ignoreMap":178},[220,80842,80843,80845,80847],{"class":222,"line":223},[220,80844,343],{"class":264},[220,80846,347],{"class":346},[220,80848,359],{"class":264},[220,80850,80851,80853,80855],{"class":222,"line":179},[220,80852,364],{"class":264},[220,80854,80816],{"class":346},[220,80856,386],{"class":264},[220,80858,80859,80861,80863],{"class":222,"line":389},[220,80860,402],{"class":264},[220,80862,347],{"class":346},[220,80864,359],{"class":264},[212,80866,80867],{"className":409,"code":80838,"language":411,"meta":178,"style":178},[99,80868,80869,80877,80885],{"__ignoreMap":178},[220,80870,80871,80873,80875],{"class":222,"line":223},[220,80872,343],{"class":264},[220,80874,347],{"class":420},[220,80876,359],{"class":264},[220,80878,80879,80881,80883],{"class":222,"line":179},[220,80880,364],{"class":264},[220,80882,80816],{"class":420},[220,80884,386],{"class":264},[220,80886,80887,80889,80891],{"class":222,"line":389},[220,80888,402],{"class":264},[220,80890,347],{"class":420},[220,80892,359],{"class":264},[212,80894,80895],{"className":2844,"code":80838,"language":2846,"meta":178,"style":178},[99,80896,80897,80905,80913],{"__ignoreMap":178},[220,80898,80899,80901,80903],{"class":222,"line":223},[220,80900,343],{"class":264},[220,80902,347],{"class":420},[220,80904,359],{"class":264},[220,80906,80907,80909,80911],{"class":222,"line":179},[220,80908,364],{"class":264},[220,80910,80816],{"class":420},[220,80912,386],{"class":264},[220,80914,80915,80917,80919],{"class":222,"line":389},[220,80916,402],{"class":264},[220,80918,347],{"class":420},[220,80920,359],{"class":264},[212,80922,80923],{"className":468,"code":80838,"language":469,"meta":178,"style":178},[99,80924,80925,80933,80941],{"__ignoreMap":178},[220,80926,80927,80929,80931],{"class":222,"line":223},[220,80928,343],{"class":264},[220,80930,347],{"class":420},[220,80932,359],{"class":264},[220,80934,80935,80937,80939],{"class":222,"line":179},[220,80936,364],{"class":264},[220,80938,80816],{"class":420},[220,80940,386],{"class":264},[220,80942,80943,80945,80947],{"class":222,"line":389},[220,80944,402],{"class":264},[220,80946,347],{"class":420},[220,80948,359],{"class":264},[212,80950,80952],{"className":251,"code":80951,"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,80953,80954,80964,80968,80982,80986,80995,80999],{"__ignoreMap":178},[220,80955,80956,80958,80960,80962],{"class":222,"line":223},[220,80957,261],{"class":260},[220,80959,10879],{"class":264},[220,80961,268],{"class":260},[220,80963,4007],{"class":230},[220,80965,80966],{"class":222,"line":179},[220,80967,647],{"emptyLinePlaceholder":194},[220,80969,80970,80972,80974,80976,80978,80980],{"class":222,"line":389},[220,80971,1735],{"class":260},[220,80973,1738],{"class":420},[220,80975,1741],{"class":260},[220,80977,1744],{"class":260},[220,80979,1747],{"class":226},[220,80981,1750],{"class":264},[220,80983,80984],{"class":222,"line":399},[220,80985,1765],{"class":264},[220,80987,80988,80990,80993],{"class":222,"line":644},[220,80989,1770],{"class":264},[220,80991,80992],{"class":230},"'WorleyNoise'",[220,80994,2465],{"class":264},[220,80996,80997],{"class":222,"line":650},[220,80998,1787],{"class":264},[220,81000,81001],{"class":222,"line":656},[220,81002,1792],{"class":264},[1504,81004,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":81006},[81007,81008],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":80816,"description":80824},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":81015,"title":81016,"body":81017,"category":31604,"componentType":25253,"description":81024,"extension":191,"meta":81341,"navigation":194,"path":81342,"requiresChild":194,"seo":81343,"stem":81344,"__hash__":81345},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":81018,"toc":81337},[81019,81022,81025,81027,81029,81032,81034,81335],[11,81020,81016],{"id":81021},"zoomblur",[15,81023,81024],{},"Radial zoom blur expanding from a center point",[31281,81026],{"component":81016},[23,81028,31285],{"id":25903},[31287,81030],{":props":81031},"[{\"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,81033,31293],{"id":31292},[246,81035,81036,81092,81151,81207,81265],{":tabs":1557},[212,81037,81039],{"className":334,"code":81038,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81040,81041,81049,81056,81064,81068,81076,81084],{"__ignoreMap":178},[220,81042,81043,81045,81047],{"class":222,"line":223},[220,81044,343],{"class":264},[220,81046,347],{"class":346},[220,81048,359],{"class":264},[220,81050,81051,81053],{"class":222,"line":179},[220,81052,364],{"class":264},[220,81054,81055],{"class":346},"ZoomBlur\n",[220,81057,81058,81060,81062],{"class":222,"line":389},[220,81059,19739],{"class":226},[220,81061,353],{"class":264},[220,81063,42962],{"class":230},[220,81065,81066],{"class":222,"line":399},[220,81067,31329],{"class":264},[220,81069,81070,81072,81074],{"class":222,"line":644},[220,81071,2550],{"class":264},[220,81073,2553],{"class":346},[220,81075,386],{"class":264},[220,81077,81078,81080,81082],{"class":222,"line":650},[220,81079,2567],{"class":264},[220,81081,81016],{"class":346},[220,81083,359],{"class":264},[220,81085,81086,81088,81090],{"class":222,"line":656},[220,81087,402],{"class":264},[220,81089,347],{"class":346},[220,81091,359],{"class":264},[212,81093,81095],{"className":409,"code":81094,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81096,81097,81105,81111,81123,81127,81135,81143],{"__ignoreMap":178},[220,81098,81099,81101,81103],{"class":222,"line":223},[220,81100,343],{"class":264},[220,81102,347],{"class":420},[220,81104,359],{"class":264},[220,81106,81107,81109],{"class":222,"line":179},[220,81108,364],{"class":264},[220,81110,81055],{"class":420},[220,81112,81113,81115,81117,81119,81121],{"class":222,"line":389},[220,81114,19850],{"class":226},[220,81116,353],{"class":260},[220,81118,743],{"class":264},[220,81120,23379],{"class":420},[220,81122,749],{"class":264},[220,81124,81125],{"class":222,"line":399},[220,81126,31329],{"class":264},[220,81128,81129,81131,81133],{"class":222,"line":644},[220,81130,2550],{"class":264},[220,81132,2553],{"class":420},[220,81134,386],{"class":264},[220,81136,81137,81139,81141],{"class":222,"line":650},[220,81138,2567],{"class":264},[220,81140,81016],{"class":420},[220,81142,359],{"class":264},[220,81144,81145,81147,81149],{"class":222,"line":656},[220,81146,402],{"class":264},[220,81148,347],{"class":420},[220,81150,359],{"class":264},[212,81152,81153],{"className":2844,"code":81094,"language":2846,"meta":178,"style":178},[99,81154,81155,81163,81169,81179,81183,81191,81199],{"__ignoreMap":178},[220,81156,81157,81159,81161],{"class":222,"line":223},[220,81158,343],{"class":264},[220,81160,347],{"class":420},[220,81162,359],{"class":264},[220,81164,81165,81167],{"class":222,"line":179},[220,81166,364],{"class":264},[220,81168,81055],{"class":420},[220,81170,81171,81173,81175,81177],{"class":222,"line":389},[220,81172,19850],{"class":226},[220,81174,29241],{"class":264},[220,81176,23379],{"class":420},[220,81178,749],{"class":264},[220,81180,81181],{"class":222,"line":399},[220,81182,31329],{"class":264},[220,81184,81185,81187,81189],{"class":222,"line":644},[220,81186,2550],{"class":264},[220,81188,2553],{"class":420},[220,81190,386],{"class":264},[220,81192,81193,81195,81197],{"class":222,"line":650},[220,81194,2567],{"class":264},[220,81196,81016],{"class":420},[220,81198,359],{"class":264},[220,81200,81201,81203,81205],{"class":222,"line":656},[220,81202,402],{"class":264},[220,81204,347],{"class":420},[220,81206,359],{"class":264},[212,81208,81209],{"className":468,"code":81094,"language":469,"meta":178,"style":178},[99,81210,81211,81219,81225,81237,81241,81249,81257],{"__ignoreMap":178},[220,81212,81213,81215,81217],{"class":222,"line":223},[220,81214,343],{"class":264},[220,81216,347],{"class":420},[220,81218,359],{"class":264},[220,81220,81221,81223],{"class":222,"line":179},[220,81222,364],{"class":264},[220,81224,81055],{"class":420},[220,81226,81227,81229,81231,81233,81235],{"class":222,"line":389},[220,81228,19850],{"class":226},[220,81230,353],{"class":260},[220,81232,743],{"class":264},[220,81234,23379],{"class":420},[220,81236,749],{"class":264},[220,81238,81239],{"class":222,"line":399},[220,81240,31329],{"class":264},[220,81242,81243,81245,81247],{"class":222,"line":644},[220,81244,2550],{"class":264},[220,81246,2553],{"class":420},[220,81248,386],{"class":264},[220,81250,81251,81253,81255],{"class":222,"line":650},[220,81252,2567],{"class":264},[220,81254,81016],{"class":420},[220,81256,359],{"class":264},[220,81258,81259,81261,81263],{"class":222,"line":656},[220,81260,402],{"class":264},[220,81262,347],{"class":420},[220,81264,359],{"class":264},[212,81266,81268],{"className":251,"code":81267,"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,81269,81270,81280,81284,81298,81302,81315,81323,81327,81331],{"__ignoreMap":178},[220,81271,81272,81274,81276,81278],{"class":222,"line":223},[220,81273,261],{"class":260},[220,81275,10879],{"class":264},[220,81277,268],{"class":260},[220,81279,4007],{"class":230},[220,81281,81282],{"class":222,"line":179},[220,81283,647],{"emptyLinePlaceholder":194},[220,81285,81286,81288,81290,81292,81294,81296],{"class":222,"line":389},[220,81287,1735],{"class":260},[220,81289,1738],{"class":420},[220,81291,1741],{"class":260},[220,81293,1744],{"class":260},[220,81295,1747],{"class":226},[220,81297,1750],{"class":264},[220,81299,81300],{"class":222,"line":399},[220,81301,1765],{"class":264},[220,81303,81304,81306,81309,81311,81313],{"class":222,"line":644},[220,81305,1770],{"class":264},[220,81307,81308],{"class":230},"'ZoomBlur'",[220,81310,31573],{"class":264},[220,81312,23379],{"class":420},[220,81314,6912],{"class":264},[220,81316,81317,81319,81321],{"class":222,"line":650},[220,81318,6380],{"class":264},[220,81320,3206],{"class":230},[220,81322,2465],{"class":264},[220,81324,81325],{"class":222,"line":656},[220,81326,6397],{"class":264},[220,81328,81329],{"class":222,"line":673},[220,81330,1787],{"class":264},[220,81332,81333],{"class":222,"line":682},[220,81334,1792],{"class":264},[1504,81336,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81338},[81339,81340],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":81016,"description":81024},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":57537,"title":57538,"body":81347,"category":33043,"componentType":25253,"description":57546,"extension":191,"meta":81609,"navigation":194,"path":57808,"requiresChild":194,"seo":81610,"stem":57810,"__hash__":57811},{"type":8,"value":81348,"toc":81605},[81349,81351,81353,81355,81357,81359,81361,81603],[11,81350,57538],{"id":57543},[15,81352,57546],{},[31281,81354],{"component":57538},[23,81356,31285],{"id":25903},[31287,81358],{":props":57553},[23,81360,31293],{"id":31292},[246,81362,81363,81407,81451,81495,81539],{":tabs":1557},[212,81364,81365],{"className":334,"code":57560,"language":336,"meta":178,"style":178},[99,81366,81367,81375,81383,81391,81399],{"__ignoreMap":178},[220,81368,81369,81371,81373],{"class":222,"line":223},[220,81370,343],{"class":264},[220,81372,347],{"class":346},[220,81374,359],{"class":264},[220,81376,81377,81379,81381],{"class":222,"line":179},[220,81378,364],{"class":264},[220,81380,57538],{"class":346},[220,81382,359],{"class":264},[220,81384,81385,81387,81389],{"class":222,"line":389},[220,81386,2550],{"class":264},[220,81388,2553],{"class":346},[220,81390,386],{"class":264},[220,81392,81393,81395,81397],{"class":222,"line":399},[220,81394,2567],{"class":264},[220,81396,57538],{"class":346},[220,81398,359],{"class":264},[220,81400,81401,81403,81405],{"class":222,"line":644},[220,81402,402],{"class":264},[220,81404,347],{"class":346},[220,81406,359],{"class":264},[212,81408,81409],{"className":409,"code":57560,"language":411,"meta":178,"style":178},[99,81410,81411,81419,81427,81435,81443],{"__ignoreMap":178},[220,81412,81413,81415,81417],{"class":222,"line":223},[220,81414,343],{"class":264},[220,81416,347],{"class":420},[220,81418,359],{"class":264},[220,81420,81421,81423,81425],{"class":222,"line":179},[220,81422,364],{"class":264},[220,81424,57538],{"class":420},[220,81426,359],{"class":264},[220,81428,81429,81431,81433],{"class":222,"line":389},[220,81430,2550],{"class":264},[220,81432,2553],{"class":420},[220,81434,386],{"class":264},[220,81436,81437,81439,81441],{"class":222,"line":399},[220,81438,2567],{"class":264},[220,81440,57538],{"class":420},[220,81442,359],{"class":264},[220,81444,81445,81447,81449],{"class":222,"line":644},[220,81446,402],{"class":264},[220,81448,347],{"class":420},[220,81450,359],{"class":264},[212,81452,81453],{"className":2844,"code":57560,"language":2846,"meta":178,"style":178},[99,81454,81455,81463,81471,81479,81487],{"__ignoreMap":178},[220,81456,81457,81459,81461],{"class":222,"line":223},[220,81458,343],{"class":264},[220,81460,347],{"class":420},[220,81462,359],{"class":264},[220,81464,81465,81467,81469],{"class":222,"line":179},[220,81466,364],{"class":264},[220,81468,57538],{"class":420},[220,81470,359],{"class":264},[220,81472,81473,81475,81477],{"class":222,"line":389},[220,81474,2550],{"class":264},[220,81476,2553],{"class":420},[220,81478,386],{"class":264},[220,81480,81481,81483,81485],{"class":222,"line":399},[220,81482,2567],{"class":264},[220,81484,57538],{"class":420},[220,81486,359],{"class":264},[220,81488,81489,81491,81493],{"class":222,"line":644},[220,81490,402],{"class":264},[220,81492,347],{"class":420},[220,81494,359],{"class":264},[212,81496,81497],{"className":468,"code":57560,"language":469,"meta":178,"style":178},[99,81498,81499,81507,81515,81523,81531],{"__ignoreMap":178},[220,81500,81501,81503,81505],{"class":222,"line":223},[220,81502,343],{"class":264},[220,81504,347],{"class":420},[220,81506,359],{"class":264},[220,81508,81509,81511,81513],{"class":222,"line":179},[220,81510,364],{"class":264},[220,81512,57538],{"class":420},[220,81514,359],{"class":264},[220,81516,81517,81519,81521],{"class":222,"line":389},[220,81518,2550],{"class":264},[220,81520,2553],{"class":420},[220,81522,386],{"class":264},[220,81524,81525,81527,81529],{"class":222,"line":399},[220,81526,2567],{"class":264},[220,81528,57538],{"class":420},[220,81530,359],{"class":264},[220,81532,81533,81535,81537],{"class":222,"line":644},[220,81534,402],{"class":264},[220,81536,347],{"class":420},[220,81538,359],{"class":264},[212,81540,81541],{"className":251,"code":57737,"language":253,"meta":178,"style":178},[99,81542,81543,81553,81557,81571,81575,81583,81591,81595,81599],{"__ignoreMap":178},[220,81544,81545,81547,81549,81551],{"class":222,"line":223},[220,81546,261],{"class":260},[220,81548,10879],{"class":264},[220,81550,268],{"class":260},[220,81552,4007],{"class":230},[220,81554,81555],{"class":222,"line":179},[220,81556,647],{"emptyLinePlaceholder":194},[220,81558,81559,81561,81563,81565,81567,81569],{"class":222,"line":389},[220,81560,1735],{"class":260},[220,81562,1738],{"class":420},[220,81564,1741],{"class":260},[220,81566,1744],{"class":260},[220,81568,1747],{"class":226},[220,81570,1750],{"class":264},[220,81572,81573],{"class":222,"line":399},[220,81574,1765],{"class":264},[220,81576,81577,81579,81581],{"class":222,"line":644},[220,81578,1770],{"class":264},[220,81580,57778],{"class":230},[220,81582,6375],{"class":264},[220,81584,81585,81587,81589],{"class":222,"line":650},[220,81586,6380],{"class":264},[220,81588,3206],{"class":230},[220,81590,2465],{"class":264},[220,81592,81593],{"class":222,"line":656},[220,81594,6397],{"class":264},[220,81596,81597],{"class":222,"line":673},[220,81598,1787],{"class":264},[220,81600,81601],{"class":222,"line":682},[220,81602,1792],{"class":264},[1504,81604,32171],{},{"title":178,"searchDepth":179,"depth":179,"links":81606},[81607,81608],{"id":25903,"depth":179,"text":31285},{"id":31292,"depth":179,"text":31293},{},{"title":57538,"description":57546},[81612,81613],{"title":367,"path":57532,"stem":57534,"children":-1},{"title":57814,"path":58008,"stem":58010,"children":-1}]