[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31758,"doc-\u002Fdocs\u002Fcomponents\u002Fmeshgradient":82760,"doc-surr-\u002Fdocs\u002Fcomponents\u002Fmeshgradient":82949},[4,199,1525,2248,2486,4297,5360,5976,7456,10092,12093,14871,17153,20819,25698,26062,26698,27340,28237,28854,29432,29974,30563,31085],{"id":5,"title":6,"body":7,"category":188,"description":189,"exclude":190,"extension":191,"forceFramework":190,"icon":192,"meta":193,"navigation":194,"path":195,"seo":196,"stem":197,"__hash__":198},"guide\u002Fdocs\u002Fguide\u002F0.index.md","What is shaders?",{"type":8,"value":9,"toc":177},"minimark",[10,14,18,22,27,30,33,52,61,65,68,71,91,95,103,106,110,113,136,139,143,146,149,153,156,170,174],[11,12,6],"h1",{"id":13},"what-is-shaders",[15,16,17],"p",{},"Shaders is a design platform for creating production-ready WebGPU effects. It lets developers and design engineers build interactive backgrounds, logo effects, image effects, and other GPU-powered visuals without writing a line of shader code.",[19,20],"shader-demo",{":preset":21},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"color\":\"#0f0f12\"}},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.54,\"y\":0.77},\"fontFamily\":\"Geist\",\"fontSize\":0.39,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"welcome\"}},{\"type\":\"LightEdge\",\"props\":{\"bloom\":0.52,\"center\":{\"x\":0.22,\"y\":0.36},\"intensity\":1,\"pulse\":0.34,\"scale\":1.6111,\"shape\":{\"type\":\"metaballs3D\",\"ballRadius\":0.16,\"spread\":0.2,\"blend\":0.12,\"speed\":1,\"rotX\":0,\"rotY\":0,\"rotZ\":0},\"shapeType\":\"metaballs3D\",\"softness\":1,\"spots\":4,\"spotSize\":0.43,\"thickness\":0.26}}]}",[23,24,26],"h2",{"id":25},"design-first-code-second","Design first. Code second.",[15,28,29],{},"Most people start in the design editor, not in code.",[15,31,32],{},"In the editor you can:",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"Visually build effects by adding and arranging layers",[37,41,42],{},"Combine layers to create something more complex than any single effect",[37,44,45],{},"Adjust properties with sliders, color pickers, and other visual controls",[37,47,48],{},"Experiment quickly, trying ideas without touching a text editor",[37,50,51],{},"Preview instantly, with every change reflected in real time",[15,53,54,55,60],{},"Once you're happy with the result, you export clean components for your framework of choice, or use the ",[56,57,59],"a",{"href":58},"\u002Fdocs\u002Fguide\u002Fmcp","MCP"," to have your AI coding agent install the effect directly into your project. For most people, the editor is where the actual work of building an effect happens.",[23,62,64],{"id":63},"production-ready-from-day-one","Production-ready from day one",[15,66,67],{},"What you export is code you can drop straight into your project, not a video or an image. It's written in the same simple, declarative component structure you use throughout Shaders, so it reads clearly and stays easy to adjust once it's in your codebase.",[15,69,70],{},"Export to:",[34,72,73,76,79,82,85,88],{},[37,74,75],{},"Vue",[37,77,78],{},"React",[37,80,81],{},"Svelte",[37,83,84],{},"Solid",[37,86,87],{},"JavaScript",[37,89,90],{},"Framer",[23,92,94],{"id":93},"how-shaders-works","How Shaders works",[15,96,97,98,102],{},"Under the hood, a ",[99,100,101],"code",{},"\u003CShader>"," component renders to a single canvas element, no matter how many layers you nest inside it. Those layers are combined by our own render engine, built on TypeGPU for performance, which compiles everything down to WebGPU.",[15,104,105],{},"Props stay reactive, so changing a value updates the effect instantly without recompiling anything.",[23,107,109],{"id":108},"what-can-i-build","What can I build?",[15,111,112],{},"Almost anything visual. A few examples to get you thinking:",[34,114,115,118,121,124,127,130,133],{},[37,116,117],{},"Hero backgrounds and animated gradients",[37,119,120],{},"Cursor-reactive interactions",[37,122,123],{},"Logo effects and image effects",[37,125,126],{},"Glass, distortion, and lighting effects",[37,128,129],{},"Procedural shapes",[37,131,132],{},"Masking, blending, and text effects",[37,134,135],{},"Animated UI decoration",[15,137,138],{},"These building blocks show up everywhere from landing pages and product showcases to portfolio sites and full marketing websites. Every effect is built by combining a handful of simple components, and new components keep expanding what's possible.",[23,140,142],{"id":141},"no-shader-experience-required","No shader experience required",[15,144,145],{},"You don't need to know GLSL, WGSL, or any graphics programming to use Shaders. If you're comfortable with everyday frontend development or visual design tools, you already have what you need to get started.",[15,147,148],{},"The component-based approach also scales with you. As you get more comfortable, composing and layering effects lets you build results that look more sophisticated than the individual pieces suggest.",[23,150,152],{"id":151},"supported-frameworks","Supported frameworks",[15,154,155],{},"Shaders ships dedicated integrations for Vue, React, Svelte, Solid, JavaScript, and Framer, so you can use it with the framework or platform you're already building in.",[15,157,158,162,163,169],{},[159,160,161],"strong",{},"Building in Framer?"," You don't need npm or any of the code guides here — everything works through the ",[56,164,168],{"href":165,"rel":166},"https:\u002F\u002Fshaders.com\u002Fframer",[167],"nofollow","official Shaders plugin for Framer",". Browse your shaders and the preset library, then drop effects straight onto your Framer canvas, no code required.",[23,171,173],{"id":172},"browser-support","Browser support",[15,175,176],{},"Shaders runs on WebGPU, the modern successor to WebGL, now shipping in every major browser. Across telemetry from 145,000+ sessions on 1,000+ production domains, more than 99% of user devices run it without issue. And on the rare device that doesn't support it, the canvas simply stays empty — your layout and the rest of your page carry on exactly as normal.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183,184,185,186,187],{"id":25,"depth":179,"text":26},{"id":63,"depth":179,"text":64},{"id":93,"depth":179,"text":94},{"id":108,"depth":179,"text":109},{"id":141,"depth":179,"text":142},{"id":151,"depth":179,"text":152},{"id":172,"depth":179,"text":173},"concepts","A design platform for creating production-ready WebGPU effects",null,"md","hand-wave",{},true,"\u002Fdocs\u002Fguide",{"title":6,"description":189},"docs\u002Fguide\u002F0.index","tljpUYFl1uZaqTdHradMgrA4VY1wPQeNSChUAPMo8FE",{"id":200,"title":201,"body":202,"category":188,"description":1516,"exclude":1517,"extension":191,"forceFramework":190,"icon":1519,"meta":1520,"navigation":194,"path":1521,"seo":1522,"stem":1523,"__hash__":1524},"guide\u002Fdocs\u002Fguide\u002F1.quickstart.md","Quickstart",{"type":8,"value":203,"toc":1507},[204,207,211,235,238,242,245,320,324,330,576,579,591,595,598,1147,1150,1154,1162,1464,1468,1471,1475,1503],[11,205,201],{"id":206},"quickstart",[23,208,210],{"id":209},"installation","Installation",[212,213,217],"pre",{"className":214,"code":215,"language":216,"meta":178,"style":178},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[99,218,219],{"__ignoreMap":178},[220,221,224,228,232],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"svObZ","npm",[220,229,231],{"class":230},"sU2Wk"," install",[220,233,234],{"class":230}," shaders\n",[15,236,237],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[23,239,241],{"id":240},"import-your-components","Import your components",[15,243,244],{},"Import from the entry point that matches your framework:",[246,247,249,272,288,304],"code-group",{":tabs":248},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[212,250,254],{"className":251,"code":252,"language":253,"meta":178,"style":178},"language-javascript shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fvue'\n","javascript",[99,255,256],{"__ignoreMap":178},[220,257,258,262,266,269],{"class":222,"line":223},[220,259,261],{"class":260},"snl16","import",[220,263,265],{"class":264},"s95oV"," { Shader, LinearGradient, CursorTrail } ",[220,267,268],{"class":260},"from",[220,270,271],{"class":230}," 'shaders\u002Fvue'\n",[212,273,275],{"className":251,"code":274,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n",[99,276,277],{"__ignoreMap":178},[220,278,279,281,283,285],{"class":222,"line":223},[220,280,261],{"class":260},[220,282,265],{"class":264},[220,284,268],{"class":260},[220,286,287],{"class":230}," 'shaders\u002Freact'\n",[212,289,291],{"className":251,"code":290,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n",[99,292,293],{"__ignoreMap":178},[220,294,295,297,299,301],{"class":222,"line":223},[220,296,261],{"class":260},[220,298,265],{"class":264},[220,300,268],{"class":260},[220,302,303],{"class":230}," 'shaders\u002Fsvelte'\n",[212,305,307],{"className":251,"code":306,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsolid'\n",[99,308,309],{"__ignoreMap":178},[220,310,311,313,315,317],{"class":222,"line":223},[220,312,261],{"class":260},[220,314,265],{"class":264},[220,316,268],{"class":260},[220,318,319],{"class":230}," 'shaders\u002Fsolid'\n",[23,321,323],{"id":322},"your-first-shader","Your first shader",[15,325,326,327,329],{},"Wrap your effects in a ",[99,328,101],{}," component and add children inside:",[246,331,332,407,466,522],{":tabs":248},[212,333,337],{"className":334,"code":335,"language":336,"meta":178,"style":178},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","vue-html",[99,338,339,360,387,397],{"__ignoreMap":178},[220,340,341,344,348,351,354,357],{"class":222,"line":223},[220,342,343],{"class":264},"\u003C",[220,345,347],{"class":346},"s4JwU","Shader",[220,349,350],{"class":226}," class",[220,352,353],{"class":264},"=",[220,355,356],{"class":230},"\"w-full h-64\"",[220,358,359],{"class":264},">\n",[220,361,362,365,368,371,373,376,379,381,384],{"class":222,"line":179},[220,363,364],{"class":264}," \u003C",[220,366,367],{"class":346},"LinearGradient",[220,369,370],{"class":226}," colorA",[220,372,353],{"class":264},[220,374,375],{"class":230},"\"#0f172a\"",[220,377,378],{"class":226}," colorB",[220,380,353],{"class":264},[220,382,383],{"class":230},"\"#7c3aed\"",[220,385,386],{"class":264}," \u002F>\n",[220,388,390,392,395],{"class":222,"line":389},3,[220,391,364],{"class":264},[220,393,394],{"class":346},"CursorTrail",[220,396,386],{"class":264},[220,398,400,403,405],{"class":222,"line":399},4,[220,401,402],{"class":264},"\u003C\u002F",[220,404,347],{"class":346},[220,406,359],{"class":264},[212,408,412],{"className":409,"code":410,"language":411,"meta":178,"style":178},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","jsx",[99,413,414,430,450,458],{"__ignoreMap":178},[220,415,416,418,421,424,426,428],{"class":222,"line":223},[220,417,343],{"class":264},[220,419,347],{"class":420},"sDLfK",[220,422,423],{"class":226}," className",[220,425,353],{"class":260},[220,427,356],{"class":230},[220,429,359],{"class":264},[220,431,432,434,436,438,440,442,444,446,448],{"class":222,"line":179},[220,433,364],{"class":264},[220,435,367],{"class":420},[220,437,370],{"class":226},[220,439,353],{"class":260},[220,441,375],{"class":230},[220,443,378],{"class":226},[220,445,353],{"class":260},[220,447,383],{"class":230},[220,449,386],{"class":264},[220,451,452,454,456],{"class":222,"line":389},[220,453,364],{"class":264},[220,455,394],{"class":420},[220,457,386],{"class":264},[220,459,460,462,464],{"class":222,"line":399},[220,461,402],{"class":264},[220,463,347],{"class":420},[220,465,359],{"class":264},[212,467,470],{"className":468,"code":335,"language":469,"meta":178,"style":178},"language-tsx shiki shiki-themes github-dark","tsx",[99,471,472,486,506,514],{"__ignoreMap":178},[220,473,474,476,478,480,482,484],{"class":222,"line":223},[220,475,343],{"class":264},[220,477,347],{"class":420},[220,479,350],{"class":226},[220,481,353],{"class":260},[220,483,356],{"class":230},[220,485,359],{"class":264},[220,487,488,490,492,494,496,498,500,502,504],{"class":222,"line":179},[220,489,364],{"class":264},[220,491,367],{"class":420},[220,493,370],{"class":226},[220,495,353],{"class":260},[220,497,375],{"class":230},[220,499,378],{"class":226},[220,501,353],{"class":260},[220,503,383],{"class":230},[220,505,386],{"class":264},[220,507,508,510,512],{"class":222,"line":389},[220,509,364],{"class":264},[220,511,394],{"class":420},[220,513,386],{"class":264},[220,515,516,518,520],{"class":222,"line":399},[220,517,402],{"class":264},[220,519,347],{"class":420},[220,521,359],{"class":264},[212,523,524],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,525,526,540,560,568],{"__ignoreMap":178},[220,527,528,530,532,534,536,538],{"class":222,"line":223},[220,529,343],{"class":264},[220,531,347],{"class":420},[220,533,350],{"class":226},[220,535,353],{"class":260},[220,537,356],{"class":230},[220,539,359],{"class":264},[220,541,542,544,546,548,550,552,554,556,558],{"class":222,"line":179},[220,543,364],{"class":264},[220,545,367],{"class":420},[220,547,370],{"class":226},[220,549,353],{"class":260},[220,551,375],{"class":230},[220,553,378],{"class":226},[220,555,353],{"class":260},[220,557,383],{"class":230},[220,559,386],{"class":264},[220,561,562,564,566],{"class":222,"line":389},[220,563,364],{"class":264},[220,565,394],{"class":420},[220,567,386],{"class":264},[220,569,570,572,574],{"class":222,"line":399},[220,571,402],{"class":264},[220,573,347],{"class":420},[220,575,359],{"class":264},[19,577],{":preset":578},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,580,581,583,584,587,588,590],{},[99,582,101],{}," renders a ",[99,585,586],{},"\u003Ccanvas>"," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[99,589,101],{}," controls the canvas size and position.",[23,592,594],{"id":593},"sizing-the-canvas","Sizing the canvas",[15,596,597],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[246,599,600,734,877,1014],{":tabs":248},[212,601,603],{"className":334,"code":602,"language":336,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio with fluid width -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,604,605,611,626,634,642,648,654,671,680,689,694,700,716,725],{"__ignoreMap":178},[220,606,607],{"class":222,"line":223},[220,608,610],{"class":609},"sAwPA","\u003C!-- Fill the viewport -->\n",[220,612,613,615,617,619,621,624],{"class":222,"line":179},[220,614,343],{"class":264},[220,616,347],{"class":346},[220,618,350],{"class":226},[220,620,353],{"class":264},[220,622,623],{"class":230},"\"w-screen h-screen\"",[220,625,359],{"class":264},[220,627,628,630,632],{"class":222,"line":389},[220,629,364],{"class":264},[220,631,367],{"class":346},[220,633,386],{"class":264},[220,635,636,638,640],{"class":222,"line":399},[220,637,402],{"class":264},[220,639,347],{"class":346},[220,641,359],{"class":264},[220,643,645],{"class":222,"line":644},5,[220,646,647],{"emptyLinePlaceholder":194},"\n",[220,649,651],{"class":222,"line":650},6,[220,652,653],{"class":609},"\u003C!-- Fixed dimensions -->\n",[220,655,657,659,661,664,666,669],{"class":222,"line":656},7,[220,658,343],{"class":264},[220,660,347],{"class":346},[220,662,663],{"class":226}," style",[220,665,353],{"class":264},[220,667,668],{"class":230},"\"width: 600px; height: 400px;\"",[220,670,359],{"class":264},[220,672,674,676,678],{"class":222,"line":673},8,[220,675,364],{"class":264},[220,677,367],{"class":346},[220,679,386],{"class":264},[220,681,683,685,687],{"class":222,"line":682},9,[220,684,402],{"class":264},[220,686,347],{"class":346},[220,688,359],{"class":264},[220,690,692],{"class":222,"line":691},10,[220,693,647],{"emptyLinePlaceholder":194},[220,695,697],{"class":222,"line":696},11,[220,698,699],{"class":609},"\u003C!-- Aspect ratio with fluid width -->\n",[220,701,703,705,707,709,711,714],{"class":222,"line":702},12,[220,704,343],{"class":264},[220,706,347],{"class":346},[220,708,350],{"class":226},[220,710,353],{"class":264},[220,712,713],{"class":230},"\"w-full aspect-video\"",[220,715,359],{"class":264},[220,717,719,721,723],{"class":222,"line":718},13,[220,720,364],{"class":264},[220,722,367],{"class":346},[220,724,386],{"class":264},[220,726,728,730,732],{"class":222,"line":727},14,[220,729,402],{"class":264},[220,731,347],{"class":346},[220,733,359],{"class":264},[212,735,737],{"className":409,"code":736,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,738,739,750,764,772,780,784,793,818,826,834,838,847,861,869],{"__ignoreMap":178},[220,740,741,744,747],{"class":222,"line":223},[220,742,743],{"class":264},"{",[220,745,746],{"class":609},"\u002F* Fill the viewport *\u002F",[220,748,749],{"class":264},"}\n",[220,751,752,754,756,758,760,762],{"class":222,"line":179},[220,753,343],{"class":264},[220,755,347],{"class":420},[220,757,423],{"class":226},[220,759,353],{"class":260},[220,761,623],{"class":230},[220,763,359],{"class":264},[220,765,766,768,770],{"class":222,"line":389},[220,767,364],{"class":264},[220,769,367],{"class":420},[220,771,386],{"class":264},[220,773,774,776,778],{"class":222,"line":399},[220,775,402],{"class":264},[220,777,347],{"class":420},[220,779,359],{"class":264},[220,781,782],{"class":222,"line":644},[220,783,647],{"emptyLinePlaceholder":194},[220,785,786,788,791],{"class":222,"line":650},[220,787,743],{"class":264},[220,789,790],{"class":609},"\u002F* Fixed dimensions *\u002F",[220,792,749],{"class":264},[220,794,795,797,799,801,803,806,809,812,815],{"class":222,"line":656},[220,796,343],{"class":264},[220,798,347],{"class":420},[220,800,663],{"class":226},[220,802,353],{"class":260},[220,804,805],{"class":264},"{{ width: ",[220,807,808],{"class":230},"'600px'",[220,810,811],{"class":264},", height: ",[220,813,814],{"class":230},"'400px'",[220,816,817],{"class":264}," }}>\n",[220,819,820,822,824],{"class":222,"line":673},[220,821,364],{"class":264},[220,823,367],{"class":420},[220,825,386],{"class":264},[220,827,828,830,832],{"class":222,"line":682},[220,829,402],{"class":264},[220,831,347],{"class":420},[220,833,359],{"class":264},[220,835,836],{"class":222,"line":691},[220,837,647],{"emptyLinePlaceholder":194},[220,839,840,842,845],{"class":222,"line":696},[220,841,743],{"class":264},[220,843,844],{"class":609},"\u002F* Aspect ratio with fluid width *\u002F",[220,846,749],{"class":264},[220,848,849,851,853,855,857,859],{"class":222,"line":702},[220,850,343],{"class":264},[220,852,347],{"class":420},[220,854,423],{"class":226},[220,856,353],{"class":260},[220,858,713],{"class":230},[220,860,359],{"class":264},[220,862,863,865,867],{"class":222,"line":718},[220,864,364],{"class":264},[220,866,367],{"class":420},[220,868,386],{"class":264},[220,870,871,873,875],{"class":222,"line":727},[220,872,402],{"class":264},[220,874,347],{"class":420},[220,876,359],{"class":264},[212,878,879],{"className":468,"code":602,"language":469,"meta":178,"style":178},[99,880,881,892,906,914,922,926,935,949,957,965,969,984,998,1006],{"__ignoreMap":178},[220,882,883,886,889],{"class":222,"line":223},[220,884,885],{"class":260},"\u003C!--",[220,887,888],{"class":264}," Fill the viewport ",[220,890,891],{"class":260},"-->\n",[220,893,894,896,898,900,902,904],{"class":222,"line":179},[220,895,343],{"class":264},[220,897,347],{"class":420},[220,899,350],{"class":226},[220,901,353],{"class":260},[220,903,623],{"class":230},[220,905,359],{"class":264},[220,907,908,910,912],{"class":222,"line":389},[220,909,364],{"class":264},[220,911,367],{"class":420},[220,913,386],{"class":264},[220,915,916,918,920],{"class":222,"line":399},[220,917,402],{"class":264},[220,919,347],{"class":420},[220,921,359],{"class":264},[220,923,924],{"class":222,"line":644},[220,925,647],{"emptyLinePlaceholder":194},[220,927,928,930,933],{"class":222,"line":650},[220,929,885],{"class":260},[220,931,932],{"class":264}," Fixed dimensions ",[220,934,891],{"class":260},[220,936,937,939,941,943,945,947],{"class":222,"line":656},[220,938,343],{"class":264},[220,940,347],{"class":420},[220,942,663],{"class":226},[220,944,353],{"class":260},[220,946,668],{"class":230},[220,948,359],{"class":264},[220,950,951,953,955],{"class":222,"line":673},[220,952,364],{"class":264},[220,954,367],{"class":420},[220,956,386],{"class":264},[220,958,959,961,963],{"class":222,"line":682},[220,960,402],{"class":264},[220,962,347],{"class":420},[220,964,359],{"class":264},[220,966,967],{"class":222,"line":691},[220,968,647],{"emptyLinePlaceholder":194},[220,970,971,973,976,979,982],{"class":222,"line":696},[220,972,885],{"class":260},[220,974,975],{"class":264}," Aspect ratio ",[220,977,978],{"class":260},"with",[220,980,981],{"class":264}," fluid width ",[220,983,891],{"class":260},[220,985,986,988,990,992,994,996],{"class":222,"line":702},[220,987,343],{"class":264},[220,989,347],{"class":420},[220,991,350],{"class":226},[220,993,353],{"class":260},[220,995,713],{"class":230},[220,997,359],{"class":264},[220,999,1000,1002,1004],{"class":222,"line":718},[220,1001,364],{"class":264},[220,1003,367],{"class":420},[220,1005,386],{"class":264},[220,1007,1008,1010,1012],{"class":222,"line":727},[220,1009,402],{"class":264},[220,1011,347],{"class":420},[220,1013,359],{"class":264},[212,1015,1017],{"className":468,"code":1016,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,1018,1019,1027,1041,1049,1057,1061,1069,1089,1097,1105,1109,1117,1131,1139],{"__ignoreMap":178},[220,1020,1021,1023,1025],{"class":222,"line":223},[220,1022,743],{"class":264},[220,1024,746],{"class":609},[220,1026,749],{"class":264},[220,1028,1029,1031,1033,1035,1037,1039],{"class":222,"line":179},[220,1030,343],{"class":264},[220,1032,347],{"class":420},[220,1034,350],{"class":226},[220,1036,353],{"class":260},[220,1038,623],{"class":230},[220,1040,359],{"class":264},[220,1042,1043,1045,1047],{"class":222,"line":389},[220,1044,364],{"class":264},[220,1046,367],{"class":420},[220,1048,386],{"class":264},[220,1050,1051,1053,1055],{"class":222,"line":399},[220,1052,402],{"class":264},[220,1054,347],{"class":420},[220,1056,359],{"class":264},[220,1058,1059],{"class":222,"line":644},[220,1060,647],{"emptyLinePlaceholder":194},[220,1062,1063,1065,1067],{"class":222,"line":650},[220,1064,743],{"class":264},[220,1066,790],{"class":609},[220,1068,749],{"class":264},[220,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":222,"line":656},[220,1072,343],{"class":264},[220,1074,347],{"class":420},[220,1076,663],{"class":226},[220,1078,353],{"class":260},[220,1080,805],{"class":264},[220,1082,808],{"class":230},[220,1084,811],{"class":264},[220,1086,814],{"class":230},[220,1088,817],{"class":264},[220,1090,1091,1093,1095],{"class":222,"line":673},[220,1092,364],{"class":264},[220,1094,367],{"class":420},[220,1096,386],{"class":264},[220,1098,1099,1101,1103],{"class":222,"line":682},[220,1100,402],{"class":264},[220,1102,347],{"class":420},[220,1104,359],{"class":264},[220,1106,1107],{"class":222,"line":691},[220,1108,647],{"emptyLinePlaceholder":194},[220,1110,1111,1113,1115],{"class":222,"line":696},[220,1112,743],{"class":264},[220,1114,844],{"class":609},[220,1116,749],{"class":264},[220,1118,1119,1121,1123,1125,1127,1129],{"class":222,"line":702},[220,1120,343],{"class":264},[220,1122,347],{"class":420},[220,1124,350],{"class":226},[220,1126,353],{"class":260},[220,1128,713],{"class":230},[220,1130,359],{"class":264},[220,1132,1133,1135,1137],{"class":222,"line":718},[220,1134,364],{"class":264},[220,1136,367],{"class":420},[220,1138,386],{"class":264},[220,1140,1141,1143,1145],{"class":222,"line":727},[220,1142,402],{"class":264},[220,1144,347],{"class":420},[220,1146,359],{"class":264},[15,1148,1149],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[23,1151,1153],{"id":1152},"configuring-components","Configuring components",[15,1155,1156,1157,1161],{},"Each component accepts props that control its appearance. Browse the ",[56,1158,1160],{"href":1159},"\u002Fdocs\u002Fcomponents","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[246,1163,1164,1243,1319,1392],{":tabs":248},[212,1165,1167],{"className":334,"code":1166,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1168,1169,1183,1190,1200,1210,1220,1230,1235],{"__ignoreMap":178},[220,1170,1171,1173,1175,1177,1179,1181],{"class":222,"line":223},[220,1172,343],{"class":264},[220,1174,347],{"class":346},[220,1176,350],{"class":226},[220,1178,353],{"class":264},[220,1180,356],{"class":230},[220,1182,359],{"class":264},[220,1184,1185,1187],{"class":222,"line":179},[220,1186,364],{"class":264},[220,1188,1189],{"class":346},"LinearGradient\n",[220,1191,1192,1195,1197],{"class":222,"line":389},[220,1193,1194],{"class":226}," colorA",[220,1196,353],{"class":264},[220,1198,1199],{"class":230},"\"#ff6b6b\"\n",[220,1201,1202,1205,1207],{"class":222,"line":399},[220,1203,1204],{"class":226}," colorB",[220,1206,353],{"class":264},[220,1208,1209],{"class":230},"\"#4ecdc4\"\n",[220,1211,1212,1215,1217],{"class":222,"line":644},[220,1213,1214],{"class":226}," :angle",[220,1216,353],{"class":264},[220,1218,1219],{"class":230},"\"45\"\n",[220,1221,1222,1225,1227],{"class":222,"line":650},[220,1223,1224],{"class":226}," color-space",[220,1226,353],{"class":264},[220,1228,1229],{"class":230},"\"oklch\"\n",[220,1231,1232],{"class":222,"line":656},[220,1233,1234],{"class":264}," \u002F>\n",[220,1236,1237,1239,1241],{"class":222,"line":673},[220,1238,402],{"class":264},[220,1240,347],{"class":346},[220,1242,359],{"class":264},[212,1244,1246],{"className":409,"code":1245,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1247,1248,1262,1268,1276,1284,1298,1307,1311],{"__ignoreMap":178},[220,1249,1250,1252,1254,1256,1258,1260],{"class":222,"line":223},[220,1251,343],{"class":264},[220,1253,347],{"class":420},[220,1255,423],{"class":226},[220,1257,353],{"class":260},[220,1259,356],{"class":230},[220,1261,359],{"class":264},[220,1263,1264,1266],{"class":222,"line":179},[220,1265,364],{"class":264},[220,1267,1189],{"class":420},[220,1269,1270,1272,1274],{"class":222,"line":389},[220,1271,1194],{"class":226},[220,1273,353],{"class":260},[220,1275,1199],{"class":230},[220,1277,1278,1280,1282],{"class":222,"line":399},[220,1279,1204],{"class":226},[220,1281,353],{"class":260},[220,1283,1209],{"class":230},[220,1285,1286,1289,1291,1293,1296],{"class":222,"line":644},[220,1287,1288],{"class":226}," angle",[220,1290,353],{"class":260},[220,1292,743],{"class":264},[220,1294,1295],{"class":420},"45",[220,1297,749],{"class":264},[220,1299,1300,1303,1305],{"class":222,"line":650},[220,1301,1302],{"class":226}," colorSpace",[220,1304,353],{"class":260},[220,1306,1229],{"class":230},[220,1308,1309],{"class":222,"line":656},[220,1310,1234],{"class":264},[220,1312,1313,1315,1317],{"class":222,"line":673},[220,1314,402],{"class":264},[220,1316,347],{"class":420},[220,1318,359],{"class":264},[212,1320,1322],{"className":468,"code":1321,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1323,1324,1338,1344,1352,1360,1372,1380,1384],{"__ignoreMap":178},[220,1325,1326,1328,1330,1332,1334,1336],{"class":222,"line":223},[220,1327,343],{"class":264},[220,1329,347],{"class":420},[220,1331,350],{"class":226},[220,1333,353],{"class":260},[220,1335,356],{"class":230},[220,1337,359],{"class":264},[220,1339,1340,1342],{"class":222,"line":179},[220,1341,364],{"class":264},[220,1343,1189],{"class":420},[220,1345,1346,1348,1350],{"class":222,"line":389},[220,1347,1194],{"class":226},[220,1349,353],{"class":260},[220,1351,1199],{"class":230},[220,1353,1354,1356,1358],{"class":222,"line":399},[220,1355,1204],{"class":226},[220,1357,353],{"class":260},[220,1359,1209],{"class":230},[220,1361,1362,1364,1366,1368,1370],{"class":222,"line":644},[220,1363,1288],{"class":226},[220,1365,353],{"class":260},[220,1367,743],{"class":264},[220,1369,1295],{"class":420},[220,1371,749],{"class":264},[220,1373,1374,1376,1378],{"class":222,"line":650},[220,1375,1302],{"class":226},[220,1377,353],{"class":260},[220,1379,1229],{"class":230},[220,1381,1382],{"class":222,"line":656},[220,1383,1234],{"class":264},[220,1385,1386,1388,1390],{"class":222,"line":673},[220,1387,402],{"class":264},[220,1389,347],{"class":420},[220,1391,359],{"class":264},[212,1393,1394],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,1395,1396,1410,1416,1424,1432,1444,1452,1456],{"__ignoreMap":178},[220,1397,1398,1400,1402,1404,1406,1408],{"class":222,"line":223},[220,1399,343],{"class":264},[220,1401,347],{"class":420},[220,1403,350],{"class":226},[220,1405,353],{"class":260},[220,1407,356],{"class":230},[220,1409,359],{"class":264},[220,1411,1412,1414],{"class":222,"line":179},[220,1413,364],{"class":264},[220,1415,1189],{"class":420},[220,1417,1418,1420,1422],{"class":222,"line":389},[220,1419,1194],{"class":226},[220,1421,353],{"class":260},[220,1423,1199],{"class":230},[220,1425,1426,1428,1430],{"class":222,"line":399},[220,1427,1204],{"class":226},[220,1429,353],{"class":260},[220,1431,1209],{"class":230},[220,1433,1434,1436,1438,1440,1442],{"class":222,"line":644},[220,1435,1288],{"class":226},[220,1437,353],{"class":260},[220,1439,743],{"class":264},[220,1441,1295],{"class":420},[220,1443,749],{"class":264},[220,1445,1446,1448,1450],{"class":222,"line":650},[220,1447,1302],{"class":226},[220,1449,353],{"class":260},[220,1451,1229],{"class":230},[220,1453,1454],{"class":222,"line":656},[220,1455,1234],{"class":264},[220,1457,1458,1460,1462],{"class":222,"line":673},[220,1459,402],{"class":264},[220,1461,347],{"class":420},[220,1463,359],{"class":264},[23,1465,1467],{"id":1466},"using-with-ssr-frameworks","Using with SSR frameworks",[15,1469,1470],{},"Shaders uses WebGPU, which requires a browser environment. If you're using Nuxt, Next.js, SvelteKit, or SolidStart, see the framework-specific SSR guide for your setup.",[23,1472,1474],{"id":1473},"next-steps","Next steps",[34,1476,1477,1484,1491,1498],{},[37,1478,1479,1483],{},[56,1480,1482],{"href":1481},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing Effects"," — stack and nest components for complex results",[37,1485,1486,1490],{},[56,1487,1489],{"href":1488},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout & Positioning"," — position the canvas in your UI",[37,1492,1493,1497],{},[56,1494,1496],{"href":1495},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props & Reactivity"," — bind state and animate props",[37,1499,1500,1502],{},[56,1501,1160],{"href":1159}," — browse all available shaders",[1504,1505,1506],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":1508},[1509,1510,1511,1512,1513,1514,1515],{"id":209,"depth":179,"text":210},{"id":240,"depth":179,"text":241},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":1466,"depth":179,"text":1467},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect",[1518],"js","rocket",{},"\u002Fdocs\u002Fguide\u002Fquickstart",{"title":201,"description":1516},"docs\u002Fguide\u002F1.quickstart","Qy5aUJ4DcUgHPKGddDTVC0xlY3cmFxYRJk7xfpnPymY",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4290,"exclude":190,"extension":191,"forceFramework":190,"icon":4291,"meta":4292,"navigation":194,"path":4293,"seo":4294,"stem":4295,"__hash__":4296},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4279},[2491,2494,2497,2501,2506,3197,3202,3207,3221,3228,3232,3248,3252,3258,3261,3265,3275,3971,3975,3981,4244,4248,4251,4276],[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,3132,3136,3141,3146,3151,3155,3160,3164,3169,3173,3178,3183,3188,3193],{"__ignoreMap":178},[220,3128,3129],{"class":222,"line":223},[220,3130,3131],{},"const canvas = document.getElementById('my-canvas')\n",[220,3133,3134],{"class":222,"line":179},[220,3135,647],{"emptyLinePlaceholder":194},[220,3137,3138],{"class":222,"line":389},[220,3139,3140],{},"\u002F\u002F Start hidden\n",[220,3142,3143],{"class":222,"line":399},[220,3144,3145],{},"canvas.style.opacity = '0'\n",[220,3147,3148],{"class":222,"line":644},[220,3149,3150],{},"canvas.style.transition = 'opacity 0.5s'\n",[220,3152,3153],{"class":222,"line":650},[220,3154,647],{"emptyLinePlaceholder":194},[220,3156,3157],{"class":222,"line":656},[220,3158,3159],{},"const shader = await createShader(canvas, {\n",[220,3161,3162],{"class":222,"line":673},[220,3163,1765],{},[220,3165,3166],{"class":222,"line":682},[220,3167,3168],{}," { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n",[220,3170,3171],{"class":222,"line":691},[220,3172,1787],{},[220,3174,3175],{"class":222,"line":696},[220,3176,3177],{},"}, {\n",[220,3179,3180],{"class":222,"line":702},[220,3181,3182],{}," onReady: () => {\n",[220,3184,3185],{"class":222,"line":718},[220,3186,3187],{}," canvas.style.opacity = '1'\n",[220,3189,3190],{"class":222,"line":727},[220,3191,3192],{}," }\n",[220,3194,3195],{"class":222,"line":2664},[220,3196,1792],{},[3198,3199,3201],"h3",{"id":3200},"timing","Timing",[15,3203,3204,3206],{},[99,3205,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3208,3209,3212,3215,3218],{},[37,3210,3211],{},"The WebGPU renderer is initialized",[37,3213,3214],{},"All child shader components have registered",[37,3216,3217],{},"The composed shader pipeline has been compiled",[37,3219,3220],{},"The first frame is ready to display",[15,3222,3223,3224,3227],{},"The callback fires ",[159,3225,3226],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3198,3229,3231],{"id":3230},"notes","Notes",[34,3233,3234,3239],{},[37,3235,3236,3238],{},[99,3237,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3240,3241,3242,3244,3245,3247],{},"If the ",[99,3243,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3246,2500],{}," fires after that deferred initialization completes",[23,3249,3251],{"id":3250},"unsupported-browsers","Unsupported browsers",[15,3253,3254,3255,3257],{},"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,3256,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3259,3260],{},"If you want to render your own fallback instead of empty space, you have two options.",[3198,3262,3264],{"id":3263},"check-before-you-mount","Check before you mount",[15,3266,3267,3270,3271,3274],{},[99,3268,3269],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3272,3273],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3276,3277,3466,3635,3755,3928],{":tabs":1557},[212,3278,3280],{"className":334,"code":3279,"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,3281,3282,3290,3306,3320,3328,3351,3359,3363,3373,3384,3395,3399,3416,3434,3453,3457],{"__ignoreMap":178},[220,3283,3284,3286,3288],{"class":222,"line":223},[220,3285,343],{"class":264},[220,3287,2519],{"class":346},[220,3289,359],{"class":264},[220,3291,3292,3294,3296,3299,3301,3304],{"class":222,"line":179},[220,3293,364],{"class":264},[220,3295,347],{"class":346},[220,3297,3298],{"class":226}," v-if",[220,3300,353],{"class":264},[220,3302,3303],{"class":230},"\"supported\"",[220,3305,359],{"class":264},[220,3307,3308,3310,3312,3314,3316,3318],{"class":222,"line":389},[220,3309,2550],{"class":264},[220,3311,2553],{"class":346},[220,3313,1588],{"class":226},[220,3315,353],{"class":264},[220,3317,2560],{"class":230},[220,3319,386],{"class":264},[220,3321,3322,3324,3326],{"class":222,"line":399},[220,3323,2567],{"class":264},[220,3325,347],{"class":346},[220,3327,359],{"class":264},[220,3329,3330,3332,3335,3338,3340,3342,3345,3349],{"class":222,"line":644},[220,3331,364],{"class":264},[220,3333,3334],{"class":346},"div",[220,3336,3337],{"class":226}," v-else",[220,3339,350],{"class":226},[220,3341,353],{"class":264},[220,3343,3344],{"class":230},"\"fallback\"",[220,3346,3348],{"class":3347},"s6RL2"," \u002F",[220,3350,359],{"class":264},[220,3352,3353,3355,3357],{"class":222,"line":650},[220,3354,402],{"class":264},[220,3356,2519],{"class":346},[220,3358,359],{"class":264},[220,3360,3361],{"class":222,"line":656},[220,3362,647],{"emptyLinePlaceholder":194},[220,3364,3365,3367,3369,3371],{"class":222,"line":673},[220,3366,343],{"class":264},[220,3368,2590],{"class":346},[220,3370,2593],{"class":226},[220,3372,359],{"class":264},[220,3374,3375,3377,3380,3382],{"class":222,"line":682},[220,3376,261],{"class":260},[220,3378,3379],{"class":264}," { ref, onMounted } ",[220,3381,268],{"class":260},[220,3383,2607],{"class":230},[220,3385,3386,3388,3391,3393],{"class":222,"line":691},[220,3387,261],{"class":260},[220,3389,3390],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3392,268],{"class":260},[220,3394,271],{"class":230},[220,3396,3397],{"class":222,"line":696},[220,3398,647],{"emptyLinePlaceholder":194},[220,3400,3401,3403,3406,3408,3410,3412,3414],{"class":222,"line":702},[220,3402,1735],{"class":260},[220,3404,3405],{"class":420}," supported",[220,3407,1741],{"class":260},[220,3409,2623],{"class":226},[220,3411,2626],{"class":264},[220,3413,2629],{"class":420},[220,3415,2632],{"class":264},[220,3417,3418,3421,3423,3426,3429,3431],{"class":222,"line":718},[220,3419,3420],{"class":226},"onMounted",[220,3422,2626],{"class":264},[220,3424,3425],{"class":260},"async",[220,3427,3428],{"class":264}," () ",[220,3430,2762],{"class":260},[220,3432,3433],{"class":264}," {\n",[220,3435,3436,3439,3441,3444,3447,3450],{"class":222,"line":727},[220,3437,3438],{"class":264}," supported.value ",[220,3440,353],{"class":260},[220,3442,3443],{"class":264}," (",[220,3445,3446],{"class":260},"await",[220,3448,3449],{"class":226}," getWebGPUSupport",[220,3451,3452],{"class":264},"()).supported\n",[220,3454,3455],{"class":222,"line":2664},[220,3456,1792],{"class":264},[220,3458,3460,3462,3464],{"class":222,"line":3459},16,[220,3461,402],{"class":264},[220,3463,2590],{"class":346},[220,3465,359],{"class":264},[212,3467,3469],{"className":409,"code":3468,"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,3470,3471,3482,3492,3496,3504,3530,3542,3570,3575,3579,3586,3614,3631],{"__ignoreMap":178},[220,3472,3473,3475,3478,3480],{"class":222,"line":223},[220,3474,261],{"class":260},[220,3476,3477],{"class":264}," { useState, useEffect } ",[220,3479,268],{"class":260},[220,3481,2687],{"class":230},[220,3483,3484,3486,3488,3490],{"class":222,"line":179},[220,3485,261],{"class":260},[220,3487,3390],{"class":264},[220,3489,268],{"class":260},[220,3491,287],{"class":230},[220,3493,3494],{"class":222,"line":389},[220,3495,647],{"emptyLinePlaceholder":194},[220,3497,3498,3500,3502],{"class":222,"line":399},[220,3499,2641],{"class":260},[220,3501,2698],{"class":226},[220,3503,2647],{"class":264},[220,3505,3506,3508,3510,3513,3515,3518,3520,3522,3524,3526,3528],{"class":222,"line":644},[220,3507,2705],{"class":260},[220,3509,2708],{"class":264},[220,3511,3512],{"class":420},"supported",[220,3514,1895],{"class":264},[220,3516,3517],{"class":420},"setSupported",[220,3519,2719],{"class":264},[220,3521,353],{"class":260},[220,3523,2724],{"class":226},[220,3525,2626],{"class":264},[220,3527,2629],{"class":420},[220,3529,2632],{"class":264},[220,3531,3532,3535,3538,3540],{"class":222,"line":650},[220,3533,3534],{"class":226}," useEffect",[220,3536,3537],{"class":264},"(() ",[220,3539,2762],{"class":260},[220,3541,3433],{"class":264},[220,3543,3544,3547,3550,3553,3556,3559,3562,3564,3567],{"class":222,"line":656},[220,3545,3546],{"class":226}," getWebGPUSupport",[220,3548,3549],{"class":264},"().",[220,3551,3552],{"class":226},"then",[220,3554,3555],{"class":264},"(({ ",[220,3557,3512],{"class":3558},"s9osk",[220,3560,3561],{"class":264}," }) ",[220,3563,2762],{"class":260},[220,3565,3566],{"class":226}," setSupported",[220,3568,3569],{"class":264},"(supported))\n",[220,3571,3572],{"class":222,"line":673},[220,3573,3574],{"class":264}," }, [])\n",[220,3576,3577],{"class":222,"line":682},[220,3578,647],{"emptyLinePlaceholder":194},[220,3580,3581,3583],{"class":222,"line":691},[220,3582,2739],{"class":260},[220,3584,3585],{"class":264}," supported\n",[220,3587,3588,3591,3594,3596,3599,3601,3603,3605,3607,3610,3612],{"class":222,"line":696},[220,3589,3590],{"class":260}," ?",[220,3592,3593],{"class":264}," \u003C",[220,3595,347],{"class":420},[220,3597,3598],{"class":264},">\u003C",[220,3600,2553],{"class":420},[220,3602,1588],{"class":226},[220,3604,353],{"class":260},[220,3606,2560],{"class":230},[220,3608,3609],{"class":264}," \u002F>\u003C\u002F",[220,3611,347],{"class":420},[220,3613,359],{"class":264},[220,3615,3616,3619,3621,3623,3625,3627,3629],{"class":222,"line":702},[220,3617,3618],{"class":260}," :",[220,3620,3593],{"class":264},[220,3622,3334],{"class":346},[220,3624,423],{"class":226},[220,3626,353],{"class":260},[220,3628,3344],{"class":230},[220,3630,386],{"class":264},[220,3632,3633],{"class":222,"line":718},[220,3634,749],{"class":264},[212,3636,3638],{"className":468,"code":3637,"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,3639,3640,3648,3653,3657,3662,3672,3680,3684,3695,3717,3727,3746],{"__ignoreMap":178},[220,3641,3642,3644,3646],{"class":222,"line":223},[220,3643,343],{"class":264},[220,3645,2590],{"class":346},[220,3647,359],{"class":264},[220,3649,3650],{"class":222,"line":179},[220,3651,3652],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3654,3655],{"class":222,"line":389},[220,3656,647],{"emptyLinePlaceholder":194},[220,3658,3659],{"class":222,"line":399},[220,3660,3661],{"class":264}," let supported = $state(false)\n",[220,3663,3664,3667,3669],{"class":222,"line":644},[220,3665,3666],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3668,353],{"class":260},[220,3670,3671],{"class":264}," info.supported })\n",[220,3673,3674,3676,3678],{"class":222,"line":650},[220,3675,402],{"class":264},[220,3677,2590],{"class":346},[220,3679,359],{"class":264},[220,3681,3682],{"class":222,"line":656},[220,3683,647],{"emptyLinePlaceholder":194},[220,3685,3686,3689,3692],{"class":222,"line":673},[220,3687,3688],{"class":264},"{#",[220,3690,3691],{"class":260},"if",[220,3693,3694],{"class":264}," supported}\n",[220,3696,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715],{"class":222,"line":682},[220,3698,364],{"class":264},[220,3700,347],{"class":420},[220,3702,3598],{"class":264},[220,3704,2553],{"class":420},[220,3706,1588],{"class":226},[220,3708,353],{"class":260},[220,3710,2560],{"class":230},[220,3712,3609],{"class":264},[220,3714,347],{"class":420},[220,3716,359],{"class":264},[220,3718,3719,3722,3725],{"class":222,"line":691},[220,3720,3721],{"class":264},"{:",[220,3723,3724],{"class":260},"else",[220,3726,749],{"class":264},[220,3728,3729,3731,3733,3735,3737,3739,3742,3744],{"class":222,"line":696},[220,3730,364],{"class":264},[220,3732,3334],{"class":346},[220,3734,350],{"class":226},[220,3736,353],{"class":260},[220,3738,3344],{"class":230},[220,3740,3741],{"class":264},">\u003C\u002F",[220,3743,3334],{"class":346},[220,3745,359],{"class":264},[220,3747,3748,3750,3753],{"class":222,"line":702},[220,3749,743],{"class":264},[220,3751,3752],{"class":260},"\u002Fif",[220,3754,749],{"class":264},[212,3756,3758],{"className":409,"code":3757,"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,3759,3760,3771,3781,3785,3793,3817,3842,3846,3852,3890,3912,3920,3924],{"__ignoreMap":178},[220,3761,3762,3764,3767,3769],{"class":222,"line":223},[220,3763,261],{"class":260},[220,3765,3766],{"class":264}," { createSignal, onMount, Show } ",[220,3768,268],{"class":260},[220,3770,2987],{"class":230},[220,3772,3773,3775,3777,3779],{"class":222,"line":179},[220,3774,261],{"class":260},[220,3776,3390],{"class":264},[220,3778,268],{"class":260},[220,3780,319],{"class":230},[220,3782,3783],{"class":222,"line":389},[220,3784,647],{"emptyLinePlaceholder":194},[220,3786,3787,3789,3791],{"class":222,"line":399},[220,3788,2641],{"class":260},[220,3790,2698],{"class":226},[220,3792,2647],{"class":264},[220,3794,3795,3797,3799,3801,3803,3805,3807,3809,3811,3813,3815],{"class":222,"line":644},[220,3796,2705],{"class":260},[220,3798,2708],{"class":264},[220,3800,3512],{"class":420},[220,3802,1895],{"class":264},[220,3804,3517],{"class":420},[220,3806,2719],{"class":264},[220,3808,353],{"class":260},[220,3810,3018],{"class":226},[220,3812,2626],{"class":264},[220,3814,2629],{"class":420},[220,3816,2632],{"class":264},[220,3818,3819,3822,3824,3826,3828,3830,3832,3835,3837,3839],{"class":222,"line":650},[220,3820,3821],{"class":226}," onMount",[220,3823,2626],{"class":264},[220,3825,3425],{"class":260},[220,3827,3428],{"class":264},[220,3829,2762],{"class":260},[220,3831,3566],{"class":226},[220,3833,3834],{"class":264},"((",[220,3836,3446],{"class":260},[220,3838,3449],{"class":226},[220,3840,3841],{"class":264},"()).supported))\n",[220,3843,3844],{"class":222,"line":656},[220,3845,647],{"emptyLinePlaceholder":194},[220,3847,3848,3850],{"class":222,"line":673},[220,3849,2739],{"class":260},[220,3851,2742],{"class":264},[220,3853,3854,3856,3859,3862,3864,3866,3868,3871,3874,3876,3879,3881,3883,3885,3887],{"class":222,"line":682},[220,3855,2550],{"class":264},[220,3857,3858],{"class":420},"Show",[220,3860,3861],{"class":226}," when",[220,3863,353],{"class":260},[220,3865,743],{"class":264},[220,3867,3512],{"class":226},[220,3869,3870],{"class":264},"()} ",[220,3872,3873],{"class":226},"fallback",[220,3875,353],{"class":260},[220,3877,3878],{"class":264},"{\u003C",[220,3880,3334],{"class":346},[220,3882,350],{"class":226},[220,3884,353],{"class":260},[220,3886,3344],{"class":230},[220,3888,3889],{"class":264}," \u002F>}>\n",[220,3891,3892,3894,3896,3898,3900,3902,3904,3906,3908,3910],{"class":222,"line":691},[220,3893,2813],{"class":264},[220,3895,347],{"class":420},[220,3897,3598],{"class":264},[220,3899,2553],{"class":420},[220,3901,1588],{"class":226},[220,3903,353],{"class":260},[220,3905,2560],{"class":230},[220,3907,3609],{"class":264},[220,3909,347],{"class":420},[220,3911,359],{"class":264},[220,3913,3914,3916,3918],{"class":222,"line":696},[220,3915,2828],{"class":264},[220,3917,3858],{"class":420},[220,3919,359],{"class":264},[220,3921,3922],{"class":222,"line":702},[220,3923,2837],{"class":264},[220,3925,3926],{"class":222,"line":718},[220,3927,749],{"class":264},[212,3929,3931],{"className":3123,"code":3930,"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,3932,3933,3938,3942,3947,3952,3957,3962,3967],{"__ignoreMap":178},[220,3934,3935],{"class":222,"line":223},[220,3936,3937],{},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n",[220,3939,3940],{"class":222,"line":179},[220,3941,647],{"emptyLinePlaceholder":194},[220,3943,3944],{"class":222,"line":389},[220,3945,3946],{},"const { supported } = await getWebGPUSupport()\n",[220,3948,3949],{"class":222,"line":399},[220,3950,3951],{},"if (supported) {\n",[220,3953,3954],{"class":222,"line":644},[220,3955,3956],{}," await createShader(canvas, preset)\n",[220,3958,3959],{"class":222,"line":650},[220,3960,3961],{},"} else {\n",[220,3963,3964],{"class":222,"line":656},[220,3965,3966],{}," canvas.replaceWith(fallbackElement)\n",[220,3968,3969],{"class":222,"line":673},[220,3970,749],{},[3198,3972,3974],{"id":3973},"react-to-it-after-the-fact","React to it after the fact",[15,3976,1839,3977,3980],{},[99,3978,3979],{},"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,3982,3983,4042,4101,4152,4201],{":tabs":1557},[212,3984,3986],{"className":334,"code":3985,"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,3987,3988,3996,4012,4026,4034],{"__ignoreMap":178},[220,3989,3990,3992,3994],{"class":222,"line":223},[220,3991,343],{"class":264},[220,3993,2519],{"class":346},[220,3995,359],{"class":264},[220,3997,3998,4000,4002,4005,4007,4010],{"class":222,"line":179},[220,3999,364],{"class":264},[220,4001,347],{"class":346},[220,4003,4004],{"class":226}," @unavailable",[220,4006,353],{"class":264},[220,4008,4009],{"class":230},"\"showFallback = true\"",[220,4011,359],{"class":264},[220,4013,4014,4016,4018,4020,4022,4024],{"class":222,"line":389},[220,4015,2550],{"class":264},[220,4017,2553],{"class":346},[220,4019,1588],{"class":226},[220,4021,353],{"class":264},[220,4023,2560],{"class":230},[220,4025,386],{"class":264},[220,4027,4028,4030,4032],{"class":222,"line":399},[220,4029,2567],{"class":264},[220,4031,347],{"class":346},[220,4033,359],{"class":264},[220,4035,4036,4038,4040],{"class":222,"line":644},[220,4037,402],{"class":264},[220,4039,2519],{"class":346},[220,4041,359],{"class":264},[212,4043,4045],{"className":409,"code":4044,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4046,4047,4079,4093],{"__ignoreMap":178},[220,4048,4049,4051,4053,4056,4058,4061,4064,4067,4069,4072,4074,4076],{"class":222,"line":223},[220,4050,343],{"class":264},[220,4052,347],{"class":420},[220,4054,4055],{"class":226}," onUnavailable",[220,4057,353],{"class":260},[220,4059,4060],{"class":264},"{(",[220,4062,4063],{"class":3558},"reason",[220,4065,4066],{"class":264},") ",[220,4068,2762],{"class":260},[220,4070,4071],{"class":226}," setShowFallback",[220,4073,2626],{"class":264},[220,4075,2332],{"class":420},[220,4077,4078],{"class":264},")}>\n",[220,4080,4081,4083,4085,4087,4089,4091],{"class":222,"line":179},[220,4082,364],{"class":264},[220,4084,2553],{"class":420},[220,4086,1588],{"class":226},[220,4088,353],{"class":260},[220,4090,2560],{"class":230},[220,4092,386],{"class":264},[220,4094,4095,4097,4099],{"class":222,"line":389},[220,4096,402],{"class":264},[220,4098,347],{"class":420},[220,4100,359],{"class":264},[212,4102,4104],{"className":468,"code":4103,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4105,4106,4130,4144],{"__ignoreMap":178},[220,4107,4108,4110,4112,4115,4117,4119,4121,4124,4126,4128],{"class":222,"line":223},[220,4109,343],{"class":264},[220,4111,347],{"class":420},[220,4113,4114],{"class":226}," onunavailable",[220,4116,353],{"class":260},[220,4118,2759],{"class":264},[220,4120,2762],{"class":260},[220,4122,4123],{"class":264}," (showFallback ",[220,4125,353],{"class":260},[220,4127,2911],{"class":420},[220,4129,4078],{"class":264},[220,4131,4132,4134,4136,4138,4140,4142],{"class":222,"line":179},[220,4133,364],{"class":264},[220,4135,2553],{"class":420},[220,4137,1588],{"class":226},[220,4139,353],{"class":260},[220,4141,2560],{"class":230},[220,4143,386],{"class":264},[220,4145,4146,4148,4150],{"class":222,"line":389},[220,4147,402],{"class":264},[220,4149,347],{"class":420},[220,4151,359],{"class":264},[212,4153,4155],{"className":409,"code":4154,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4156,4157,4179,4193],{"__ignoreMap":178},[220,4158,4159,4161,4163,4165,4167,4169,4171,4173,4175,4177],{"class":222,"line":223},[220,4160,343],{"class":264},[220,4162,347],{"class":420},[220,4164,4055],{"class":226},[220,4166,353],{"class":260},[220,4168,2759],{"class":264},[220,4170,2762],{"class":260},[220,4172,4071],{"class":226},[220,4174,2626],{"class":264},[220,4176,2332],{"class":420},[220,4178,4078],{"class":264},[220,4180,4181,4183,4185,4187,4189,4191],{"class":222,"line":179},[220,4182,364],{"class":264},[220,4184,2553],{"class":420},[220,4186,1588],{"class":226},[220,4188,353],{"class":260},[220,4190,2560],{"class":230},[220,4192,386],{"class":264},[220,4194,4195,4197,4199],{"class":222,"line":389},[220,4196,402],{"class":264},[220,4198,347],{"class":420},[220,4200,359],{"class":264},[212,4202,4204],{"className":3123,"code":4203,"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,4205,4206,4211,4216,4221,4226,4231,4236,4240],{"__ignoreMap":178},[220,4207,4208],{"class":222,"line":223},[220,4209,4210],{},"await createShader(canvas, preset, {\n",[220,4212,4213],{"class":222,"line":179},[220,4214,4215],{}," onError: (reason) => {\n",[220,4217,4218],{"class":222,"line":389},[220,4219,4220],{}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4222,4223],{"class":222,"line":399},[220,4224,4225],{}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4227,4228],{"class":222,"line":644},[220,4229,4230],{}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4232,4233],{"class":222,"line":650},[220,4234,4235],{}," showFallback(reason)\n",[220,4237,4238],{"class":222,"line":656},[220,4239,3192],{},[220,4241,4242],{"class":222,"line":673},[220,4243,1792],{},[3198,4245,4247],{"id":4246},"debugging","Debugging",[15,4249,4250],{},"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,4252,4254],{"className":3123,"code":4253,"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,4255,4256,4261,4266,4271],{"__ignoreMap":178},[220,4257,4258],{"class":222,"line":223},[220,4259,4260],{},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n",[220,4262,4263],{"class":222,"line":179},[220,4264,4265],{},"\u002F\u002F or, in code:\n",[220,4267,4268],{"class":222,"line":389},[220,4269,4270],{},"import { setShadersDebug } from 'shaders\u002Fvue'\n",[220,4272,4273],{"class":222,"line":399},[220,4274,4275],{},"setShadersDebug(true)\n",[1504,4277,4278],{},"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 .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 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":4280},[4281,4285],{"id":2499,"depth":179,"text":2500,"children":4282},[4283,4284],{"id":3200,"depth":389,"text":3201},{"id":3230,"depth":389,"text":3231},{"id":3250,"depth":179,"text":3251,"children":4286},[4287,4288,4289],{"id":3263,"depth":389,"text":3264},{"id":3973,"depth":389,"text":3974},{"id":4246,"depth":389,"text":4247},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4290},"docs\u002Fguide\u002F12.hooks-events","dTXpH7IwXADie90-COXk0qJZnuYKkSRXUWMlxy-qpPw",{"id":4298,"title":4299,"body":4300,"category":2240,"description":5354,"exclude":190,"extension":191,"forceFramework":190,"icon":5355,"meta":5356,"navigation":194,"path":58,"seo":5357,"stem":5358,"__hash__":5359},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP",{"type":8,"value":4301,"toc":5344},[4302,4305,4308,4320,4324,4327,4331,4334,4350,4357,4360,4364,4367,4372,4375,4380,4643,4645,4649,4656,4665,4667,4671,4674,4686,4689,5094,5098,5101,5107,5113,5119,5125,5128,5167,5218,5261,5301,5305,5308,5311,5314,5318,5320,5324,5330,5333,5341],[11,4303,4299],{"id":4304},"shaders-mcp",[19,4306],{":preset":4307},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002F0oExGojy9aDN.png\"}},{\"type\":\"Glass\",\"props\":{\"aberration\":0.63,\"center\":{\"type\":\"mouse-position\",\"originX\":0.5,\"originY\":0.5,\"reach\":0.6,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":1.5,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.5},\"thickness\":1}},{\"type\":\"Sharpness\",\"props\":{\"sharpness\":0.5}}]}",[15,4309,4310,4311,4315,4316,4319],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. Connecting works on any account, free included. A ",[56,4312,4314],{"href":4313},"\u002Fpricing","Core"," subscription lets your agent ship your own design-editor creations to production; ",[56,4317,4318],{"href":4313},"Pro"," additionally unlocks the full library of curated presets and sections.",[23,4321,4323],{"id":4322},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,4325,4326],{},"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.",[3198,4328,4330],{"id":4329},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,4332,4333],{},"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,4335,4337],{"className":214,"code":4336,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,4338,4339],{"__ignoreMap":178},[220,4340,4341,4344,4347],{"class":222,"line":223},[220,4342,4343],{"class":226},"npx",[220,4345,4346],{"class":230}," shaders@latest",[220,4348,4349],{"class":230}," install-mcp\n",[15,4351,4352,4353,4356],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,4354,4355],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[4358,4359],"hr",{},[3198,4361,4363],{"id":4362},"manual-configuration","Manual configuration",[15,4365,4366],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,4368,4369],{},[159,4370,4371],{},"Cursor",[4373,4374],"cursor-install-button",{},[15,4376,4377],{},[159,4378,4379],{},"Other tools",[246,4381,4383,4411,4467,4506,4533,4592],{":tabs":4382},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4384,4386],{"className":214,"code":4385,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,4387,4388],{"__ignoreMap":178},[220,4389,4390,4393,4396,4399,4402,4405,4408],{"class":222,"line":223},[220,4391,4392],{"class":226},"claude",[220,4394,4395],{"class":230}," mcp",[220,4397,4398],{"class":230}," add",[220,4400,4401],{"class":420}," --transport",[220,4403,4404],{"class":230}," http",[220,4406,4407],{"class":230}," shaders",[220,4409,4410],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,4412,4416],{"className":4413,"code":4414,"language":4415,"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,4417,4418,4423,4428,4436,4443,4454,4459,4463],{"__ignoreMap":178},[220,4419,4420],{"class":222,"line":223},[220,4421,4422],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,4424,4425],{"class":222,"line":179},[220,4426,4427],{"class":264},"{\n",[220,4429,4430,4433],{"class":222,"line":389},[220,4431,4432],{"class":420}," \"mcpServers\"",[220,4434,4435],{"class":264},": {\n",[220,4437,4438,4441],{"class":222,"line":399},[220,4439,4440],{"class":420}," \"shaders\"",[220,4442,4435],{"class":264},[220,4444,4445,4448,4451],{"class":222,"line":644},[220,4446,4447],{"class":420}," \"serverUrl\"",[220,4449,4450],{"class":264},": ",[220,4452,4453],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,4455,4456],{"class":222,"line":650},[220,4457,4458],{"class":264}," }\n",[220,4460,4461],{"class":222,"line":656},[220,4462,3192],{"class":264},[220,4464,4465],{"class":222,"line":673},[220,4466,749],{"class":264},[212,4468,4470],{"className":4413,"code":4469,"language":4415,"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,4471,4472,4477,4481,4493,4502],{"__ignoreMap":178},[220,4473,4474],{"class":222,"line":223},[220,4475,4476],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,4478,4479],{"class":222,"line":179},[220,4480,4427],{"class":264},[220,4482,4483,4486,4488,4491],{"class":222,"line":389},[220,4484,4485],{"class":420}," \"name\"",[220,4487,4450],{"class":264},[220,4489,4490],{"class":230},"\"shaders\"",[220,4492,1760],{"class":264},[220,4494,4495,4498,4500],{"class":222,"line":399},[220,4496,4497],{"class":420}," \"url\"",[220,4499,4450],{"class":264},[220,4501,4453],{"class":230},[220,4503,4504],{"class":222,"line":644},[220,4505,749],{"class":264},[212,4507,4511],{"className":4508,"code":4509,"language":4510,"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,4512,4513,4518,4523,4528],{"__ignoreMap":178},[220,4514,4515],{"class":222,"line":223},[220,4516,4517],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,4519,4520],{"class":222,"line":179},[220,4521,4522],{},"[mcp_servers.shaders]\n",[220,4524,4525],{"class":222,"line":389},[220,4526,4527],{},"enabled = true\n",[220,4529,4530],{"class":222,"line":399},[220,4531,4532],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,4534,4536],{"className":4413,"code":4535,"language":4415,"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,4537,4538,4543,4547,4553,4559,4571,4580,4584,4588],{"__ignoreMap":178},[220,4539,4540],{"class":222,"line":223},[220,4541,4542],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,4544,4545],{"class":222,"line":179},[220,4546,4427],{"class":264},[220,4548,4549,4551],{"class":222,"line":389},[220,4550,4432],{"class":420},[220,4552,4435],{"class":264},[220,4554,4555,4557],{"class":222,"line":399},[220,4556,4440],{"class":420},[220,4558,4435],{"class":264},[220,4560,4561,4564,4566,4569],{"class":222,"line":644},[220,4562,4563],{"class":420}," \"type\"",[220,4565,4450],{"class":264},[220,4567,4568],{"class":230},"\"http\"",[220,4570,1760],{"class":264},[220,4572,4573,4576,4578],{"class":222,"line":650},[220,4574,4575],{"class":420}," \"url\"",[220,4577,4450],{"class":264},[220,4579,4453],{"class":230},[220,4581,4582],{"class":222,"line":656},[220,4583,4458],{"class":264},[220,4585,4586],{"class":222,"line":673},[220,4587,3192],{"class":264},[220,4589,4590],{"class":222,"line":682},[220,4591,749],{"class":264},[212,4593,4595],{"className":4413,"code":4594,"language":4415,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4596,4597,4601,4607,4613,4623,4631,4635,4639],{"__ignoreMap":178},[220,4598,4599],{"class":222,"line":223},[220,4600,4427],{"class":264},[220,4602,4603,4605],{"class":222,"line":179},[220,4604,4432],{"class":420},[220,4606,4435],{"class":264},[220,4608,4609,4611],{"class":222,"line":389},[220,4610,4440],{"class":420},[220,4612,4435],{"class":264},[220,4614,4615,4617,4619,4621],{"class":222,"line":399},[220,4616,4563],{"class":420},[220,4618,4450],{"class":264},[220,4620,4568],{"class":230},[220,4622,1760],{"class":264},[220,4624,4625,4627,4629],{"class":222,"line":644},[220,4626,4575],{"class":420},[220,4628,4450],{"class":264},[220,4630,4453],{"class":230},[220,4632,4633],{"class":222,"line":650},[220,4634,4458],{"class":264},[220,4636,4637],{"class":222,"line":656},[220,4638,3192],{"class":264},[220,4640,4641],{"class":222,"line":673},[220,4642,749],{"class":264},[4358,4644],{},[23,4646,4648],{"id":4647},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,4650,4651],{},[4652,4653],"img",{"alt":4654,"src":4655},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,4657,4658,4659,4664],{},"Shaders has an official connector on ",[56,4660,4663],{"href":4661,"rel":4662},"https:\u002F\u002Fbolt.new",[167],"bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Shaders account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[4358,4666],{},[23,4668,4670],{"id":4669},"using-an-api-key-instead","Using an API key instead",[15,4672,4673],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[15,4675,4676,4677,4681,4682,4685],{},"The same key works for the ",[56,4678,4680],{"href":4679},"\u002Fdocs\u002Fguide\u002Fregistry","shadcn registry",", which lets you install any preset or section from the command line with ",[99,4683,4684],{},"npx shadcn add",".",[4687,4688],"api-keys",{},[246,4690,4692,4720,4791,4856,4913,4948,5023],{":tabs":4691},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4693,4695],{"className":214,"code":4694,"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,4696,4697],{"__ignoreMap":178},[220,4698,4699,4701,4703,4705,4707,4709,4711,4714,4717],{"class":222,"line":223},[220,4700,4392],{"class":226},[220,4702,4395],{"class":230},[220,4704,4398],{"class":230},[220,4706,4401],{"class":420},[220,4708,4404],{"class":230},[220,4710,4407],{"class":230},[220,4712,4713],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,4715,4716],{"class":420}," --header",[220,4718,4719],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,4721,4723],{"className":4413,"code":4722,"language":4415,"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,4724,4725,4730,4734,4740,4746,4757,4764,4774,4779,4783,4787],{"__ignoreMap":178},[220,4726,4727],{"class":222,"line":223},[220,4728,4729],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,4731,4732],{"class":222,"line":179},[220,4733,4427],{"class":264},[220,4735,4736,4738],{"class":222,"line":389},[220,4737,4432],{"class":420},[220,4739,4435],{"class":264},[220,4741,4742,4744],{"class":222,"line":399},[220,4743,4440],{"class":420},[220,4745,4435],{"class":264},[220,4747,4748,4750,4752,4755],{"class":222,"line":644},[220,4749,4575],{"class":420},[220,4751,4450],{"class":264},[220,4753,4754],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,4756,1760],{"class":264},[220,4758,4759,4762],{"class":222,"line":650},[220,4760,4761],{"class":420}," \"headers\"",[220,4763,4435],{"class":264},[220,4765,4766,4769,4771],{"class":222,"line":656},[220,4767,4768],{"class":420}," \"Authorization\"",[220,4770,4450],{"class":264},[220,4772,4773],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,4775,4776],{"class":222,"line":673},[220,4777,4778],{"class":264}," }\n",[220,4780,4781],{"class":222,"line":682},[220,4782,4458],{"class":264},[220,4784,4785],{"class":222,"line":691},[220,4786,3192],{"class":264},[220,4788,4789],{"class":222,"line":696},[220,4790,749],{"class":264},[212,4792,4794],{"className":4413,"code":4793,"language":4415,"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,4795,4796,4800,4804,4810,4816,4826,4832,4840,4844,4848,4852],{"__ignoreMap":178},[220,4797,4798],{"class":222,"line":223},[220,4799,4422],{"class":609},[220,4801,4802],{"class":222,"line":179},[220,4803,4427],{"class":264},[220,4805,4806,4808],{"class":222,"line":389},[220,4807,4432],{"class":420},[220,4809,4435],{"class":264},[220,4811,4812,4814],{"class":222,"line":399},[220,4813,4440],{"class":420},[220,4815,4435],{"class":264},[220,4817,4818,4820,4822,4824],{"class":222,"line":644},[220,4819,4447],{"class":420},[220,4821,4450],{"class":264},[220,4823,4754],{"class":230},[220,4825,1760],{"class":264},[220,4827,4828,4830],{"class":222,"line":650},[220,4829,4761],{"class":420},[220,4831,4435],{"class":264},[220,4833,4834,4836,4838],{"class":222,"line":656},[220,4835,4768],{"class":420},[220,4837,4450],{"class":264},[220,4839,4773],{"class":230},[220,4841,4842],{"class":222,"line":673},[220,4843,4778],{"class":264},[220,4845,4846],{"class":222,"line":682},[220,4847,4458],{"class":264},[220,4849,4850],{"class":222,"line":691},[220,4851,3192],{"class":264},[220,4853,4854],{"class":222,"line":696},[220,4855,749],{"class":264},[212,4857,4859],{"className":4413,"code":4858,"language":4415,"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,4860,4861,4865,4869,4879,4889,4896,4905,4909],{"__ignoreMap":178},[220,4862,4863],{"class":222,"line":223},[220,4864,4476],{"class":609},[220,4866,4867],{"class":222,"line":179},[220,4868,4427],{"class":264},[220,4870,4871,4873,4875,4877],{"class":222,"line":389},[220,4872,4485],{"class":420},[220,4874,4450],{"class":264},[220,4876,4490],{"class":230},[220,4878,1760],{"class":264},[220,4880,4881,4883,4885,4887],{"class":222,"line":399},[220,4882,4497],{"class":420},[220,4884,4450],{"class":264},[220,4886,4754],{"class":230},[220,4888,1760],{"class":264},[220,4890,4891,4894],{"class":222,"line":644},[220,4892,4893],{"class":420}," \"headers\"",[220,4895,4435],{"class":264},[220,4897,4898,4901,4903],{"class":222,"line":650},[220,4899,4900],{"class":420}," \"Authorization\"",[220,4902,4450],{"class":264},[220,4904,4773],{"class":230},[220,4906,4907],{"class":222,"line":656},[220,4908,3192],{"class":264},[220,4910,4911],{"class":222,"line":673},[220,4912,749],{"class":264},[212,4914,4916],{"className":4508,"code":4915,"language":4510,"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,4917,4918,4922,4926,4930,4934,4938,4943],{"__ignoreMap":178},[220,4919,4920],{"class":222,"line":223},[220,4921,4517],{},[220,4923,4924],{"class":222,"line":179},[220,4925,4522],{},[220,4927,4928],{"class":222,"line":389},[220,4929,4527],{},[220,4931,4932],{"class":222,"line":399},[220,4933,4532],{},[220,4935,4936],{"class":222,"line":644},[220,4937,647],{"emptyLinePlaceholder":194},[220,4939,4940],{"class":222,"line":650},[220,4941,4942],{},"[mcp_servers.shaders.http_headers]\n",[220,4944,4945],{"class":222,"line":656},[220,4946,4947],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,4949,4951],{"className":4413,"code":4950,"language":4415,"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,4952,4953,4957,4961,4967,4973,4983,4993,4999,5007,5011,5015,5019],{"__ignoreMap":178},[220,4954,4955],{"class":222,"line":223},[220,4956,4542],{"class":609},[220,4958,4959],{"class":222,"line":179},[220,4960,4427],{"class":264},[220,4962,4963,4965],{"class":222,"line":389},[220,4964,4432],{"class":420},[220,4966,4435],{"class":264},[220,4968,4969,4971],{"class":222,"line":399},[220,4970,4440],{"class":420},[220,4972,4435],{"class":264},[220,4974,4975,4977,4979,4981],{"class":222,"line":644},[220,4976,4563],{"class":420},[220,4978,4450],{"class":264},[220,4980,4568],{"class":230},[220,4982,1760],{"class":264},[220,4984,4985,4987,4989,4991],{"class":222,"line":650},[220,4986,4575],{"class":420},[220,4988,4450],{"class":264},[220,4990,4754],{"class":230},[220,4992,1760],{"class":264},[220,4994,4995,4997],{"class":222,"line":656},[220,4996,4761],{"class":420},[220,4998,4435],{"class":264},[220,5000,5001,5003,5005],{"class":222,"line":673},[220,5002,4768],{"class":420},[220,5004,4450],{"class":264},[220,5006,4773],{"class":230},[220,5008,5009],{"class":222,"line":682},[220,5010,4778],{"class":264},[220,5012,5013],{"class":222,"line":691},[220,5014,4458],{"class":264},[220,5016,5017],{"class":222,"line":696},[220,5018,3192],{"class":264},[220,5020,5021],{"class":222,"line":702},[220,5022,749],{"class":264},[212,5024,5026],{"className":4413,"code":5025,"language":4415,"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,5027,5028,5032,5038,5044,5054,5064,5070,5078,5082,5086,5090],{"__ignoreMap":178},[220,5029,5030],{"class":222,"line":223},[220,5031,4427],{"class":264},[220,5033,5034,5036],{"class":222,"line":179},[220,5035,4432],{"class":420},[220,5037,4435],{"class":264},[220,5039,5040,5042],{"class":222,"line":389},[220,5041,4440],{"class":420},[220,5043,4435],{"class":264},[220,5045,5046,5048,5050,5052],{"class":222,"line":399},[220,5047,4563],{"class":420},[220,5049,4450],{"class":264},[220,5051,4568],{"class":230},[220,5053,1760],{"class":264},[220,5055,5056,5058,5060,5062],{"class":222,"line":644},[220,5057,4575],{"class":420},[220,5059,4450],{"class":264},[220,5061,4754],{"class":230},[220,5063,1760],{"class":264},[220,5065,5066,5068],{"class":222,"line":650},[220,5067,4761],{"class":420},[220,5069,4435],{"class":264},[220,5071,5072,5074,5076],{"class":222,"line":656},[220,5073,4768],{"class":420},[220,5075,4450],{"class":264},[220,5077,4773],{"class":230},[220,5079,5080],{"class":222,"line":673},[220,5081,4778],{"class":264},[220,5083,5084],{"class":222,"line":682},[220,5085,4458],{"class":264},[220,5087,5088],{"class":222,"line":691},[220,5089,3192],{"class":264},[220,5091,5092],{"class":222,"line":696},[220,5093,749],{"class":264},[23,5095,5097],{"id":5096},"start-prompting","Start prompting",[15,5099,5100],{},"Once connected, your agent gains access to the following capabilities:",[15,5102,5103,5106],{},[159,5104,5105],{},"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,5108,5109,5112],{},[159,5110,5111],{},"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,5114,5115,5118],{},[159,5116,5117],{},"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,5120,5121,5124],{},[159,5122,5123],{},"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,5126,5127],{},"Example prompts to get started:",[212,5129,5131],{"className":214,"code":5130,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,5132,5133],{"__ignoreMap":178},[220,5134,5135,5138,5141,5144,5146,5149,5152,5155,5158,5161,5164],{"class":222,"line":223},[220,5136,5137],{"class":226},"Install",[220,5139,5140],{"class":230}," my",[220,5142,5143],{"class":230}," \"Landing Hero\"",[220,5145,1738],{"class":230},[220,5147,5148],{"class":230}," in",[220,5150,5151],{"class":230}," the",[220,5153,5154],{"class":230}," hero",[220,5156,5157],{"class":230}," section",[220,5159,5160],{"class":230}," as",[220,5162,5163],{"class":230}," a",[220,5165,5166],{"class":230}," background.\n",[212,5168,5170],{"className":214,"code":5169,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,5171,5172],{"__ignoreMap":178},[220,5173,5174,5177,5179,5181,5184,5186,5189,5192,5195,5198,5201,5204,5207,5209,5212,5215],{"class":222,"line":223},[220,5175,5176],{"class":226},"Add",[220,5178,5163],{"class":230},[220,5180,1738],{"class":230},[220,5182,5183],{"class":230}," to",[220,5185,5151],{"class":230},[220,5187,5188],{"class":230}," background",[220,5190,5191],{"class":230}," of",[220,5193,5194],{"class":230}," this",[220,5196,5197],{"class":230}," card,",[220,5199,5200],{"class":230}," something",[220,5202,5203],{"class":230}," blue",[220,5205,5206],{"class":230}," with",[220,5208,5163],{"class":230},[220,5210,5211],{"class":230}," subtle",[220,5213,5214],{"class":230}," flowing",[220,5216,5217],{"class":230}," animation.\n",[212,5219,5221],{"className":214,"code":5220,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,5222,5223],{"__ignoreMap":178},[220,5224,5225,5228,5230,5233,5235,5237,5239,5242,5245,5247,5250,5253,5256,5258],{"class":222,"line":223},[220,5226,5227],{"class":226},"Make",[220,5229,5151],{"class":230},[220,5231,5232],{"class":230}," circle",[220,5234,5148],{"class":230},[220,5236,5194],{"class":230},[220,5238,1738],{"class":230},[220,5240,5241],{"class":230}," get",[220,5243,5244],{"class":230}," bigger",[220,5246,5160],{"class":230},[220,5248,5249],{"class":230}," we",[220,5251,5252],{"class":230}," scroll",[220,5254,5255],{"class":230}," past",[220,5257,5151],{"class":230},[220,5259,5260],{"class":230}," section.\n",[212,5262,5264],{"className":214,"code":5263,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,5265,5266],{"__ignoreMap":178},[220,5267,5268,5270,5272,5275,5277,5279,5282,5285,5288,5291,5294,5296,5298],{"class":222,"line":223},[220,5269,5176],{"class":226},[220,5271,5140],{"class":230},[220,5273,5274],{"class":230}," logo.svg",[220,5276,5160],{"class":230},[220,5278,5163],{"class":230},[220,5280,5281],{"class":230}," liquid",[220,5283,5284],{"class":230}," glass",[220,5286,5287],{"class":230}," effect",[220,5289,5290],{"class":230}," on",[220,5292,5293],{"class":230}," top",[220,5295,5191],{"class":230},[220,5297,5194],{"class":230},[220,5299,5300],{"class":230}," shader.\n",[23,5302,5304],{"id":5303},"pro-knowledge-base","Pro knowledge base",[15,5306,5307],{},"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,5309,5310],{},"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,5312,5313],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[5315,5316],"pro-callout",{"message":5317},"Make your agent a shader expert...",[4358,5319],{},[11,5321,5323],{"id":5322},"mcp-for-business","MCP for business",[15,5325,5326],{},[4652,5327],{"alt":5328,"src":5329},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,5331,5332],{},"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,5334,5335,5336,5340],{},"We're open to partnerships and custom integrations. Reach out at ",[56,5337,5339],{"href":5338},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,5342,5343],{},"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":178,"searchDepth":179,"depth":179,"links":5345},[5346,5350,5351,5352,5353],{"id":4322,"depth":179,"text":4323,"children":5347},[5348,5349],{"id":4329,"depth":389,"text":4330},{"id":4362,"depth":389,"text":4363},{"id":4647,"depth":179,"text":4648},{"id":4669,"depth":179,"text":4670},{"id":5096,"depth":179,"text":5097},{"id":5303,"depth":179,"text":5304},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":4299,"description":5354},"docs\u002Fguide\u002F13.mcp","VF3X1_x4Eu-XeLPqRHcEMsu_3bHbfG4z4fa5umRcLyM",{"id":5361,"title":5362,"body":5363,"category":2240,"description":5970,"exclude":190,"extension":191,"forceFramework":190,"icon":5971,"meta":5972,"navigation":194,"path":4679,"seo":5973,"stem":5974,"__hash__":5975},"guide\u002Fdocs\u002Fguide\u002F14.registry.md","shadcn Registry",{"type":8,"value":5364,"toc":5957},[5365,5368,5376,5393,5400,5404,5408,5411,5413,5424,5444,5447,5451,5462,5719,5737,5741,5748,5764,5770,5777,5781,5784,5800,5803,5807,5810,5824,5830,5834,5864,5867,5871,5896,5904,5922,5931,5935,5938,5951,5954],[11,5366,5362],{"id":5367},"shadcn-registry",[15,5369,5370,5371,5375],{},"Every preset and section on Shaders is also a ",[56,5372,4680],{"href":5373,"rel":5374},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry",[167]," item. Point the shadcn CLI at the Shaders registry once, and you can pull any effect into your codebase with a single command:",[212,5377,5379],{"className":214,"code":5378,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Faurora-hero\n",[99,5380,5381],{"__ignoreMap":178},[220,5382,5383,5385,5388,5390],{"class":222,"line":223},[220,5384,4343],{"class":226},[220,5386,5387],{"class":230}," shadcn",[220,5389,4398],{"class":230},[220,5391,5392],{"class":230}," @shaders\u002Faurora-hero\n",[15,5394,5395,5396,5399],{},"The CLI writes real source files into your project — a component for a preset, a full block for a section — with imports from the ",[99,5397,5398],{},"shaders"," package. Nothing is bundled from our servers at runtime, and nothing in the installed code points back at us.",[23,5401,5403],{"id":5402},"setup","Setup",[3198,5405,5407],{"id":5406},"_1-create-an-api-key-and-add-it-to-your-environment","1. Create an API key and add it to your environment",[15,5409,5410],{},"Free items install with no key at all. Paid items need a personal API key belonging to an account that owns them. Any signed-in Shaders account can create keys — you don't need Pro to hold one.",[4687,5412],{},[15,5414,5415,5416,5419,5420,5423],{},"Put the key in ",[99,5417,5418],{},".env.local"," (or wherever your project keeps local secrets — the CLI expands ",[99,5421,5422],{},"${SHADERS_API_KEY}"," from your environment):",[212,5425,5427],{"className":214,"code":5426,"language":216,"meta":178,"style":178},"# .env.local\nSHADERS_API_KEY=sk_live_your_key_here\n",[99,5428,5429,5434],{"__ignoreMap":178},[220,5430,5431],{"class":222,"line":223},[220,5432,5433],{"class":609},"# .env.local\n",[220,5435,5436,5439,5441],{"class":222,"line":179},[220,5437,5438],{"class":264},"SHADERS_API_KEY",[220,5440,353],{"class":260},[220,5442,5443],{"class":230},"sk_live_your_key_here\n",[15,5445,5446],{},"Don't commit the key. It is tied to your account and can be revoked at any time from the same panel that created it.",[3198,5448,5450],{"id":5449},"_2-register-the-namespace","2. Register the namespace",[15,5452,5453,5454,5457,5458,5461],{},"Add a ",[99,5455,5456],{},"@shaders"," registry to your project's ",[99,5459,5460],{},"components.json",", referencing the key you just created. The framework lives in the URL, so pick the segment that matches your stack:",[246,5463,5464,5533,5595,5657],{":tabs":248},[212,5465,5467],{"className":4413,"code":5466,"language":4415,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5468,5469,5474,5478,5485,5492,5503,5521,5525,5529],{"__ignoreMap":178},[220,5470,5471],{"class":222,"line":223},[220,5472,5473],{"class":609},"\u002F\u002F components.json\n",[220,5475,5476],{"class":222,"line":179},[220,5477,4427],{"class":264},[220,5479,5480,5483],{"class":222,"line":389},[220,5481,5482],{"class":420}," \"registries\"",[220,5484,4435],{"class":264},[220,5486,5487,5490],{"class":222,"line":399},[220,5488,5489],{"class":420}," \"@shaders\"",[220,5491,4435],{"class":264},[220,5493,5494,5496,5498,5501],{"class":222,"line":644},[220,5495,4575],{"class":420},[220,5497,4450],{"class":264},[220,5499,5500],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\"",[220,5502,1760],{"class":264},[220,5504,5505,5507,5510,5513,5515,5518],{"class":222,"line":650},[220,5506,4761],{"class":420},[220,5508,5509],{"class":264},": { ",[220,5511,5512],{"class":420},"\"Authorization\"",[220,5514,4450],{"class":264},[220,5516,5517],{"class":230},"\"Bearer ${SHADERS_API_KEY}\"",[220,5519,5520],{"class":264}," }\n",[220,5522,5523],{"class":222,"line":656},[220,5524,4458],{"class":264},[220,5526,5527],{"class":222,"line":673},[220,5528,3192],{"class":264},[220,5530,5531],{"class":222,"line":682},[220,5532,749],{"class":264},[212,5534,5536],{"className":4413,"code":5535,"language":4415,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5537,5538,5542,5546,5552,5558,5569,5583,5587,5591],{"__ignoreMap":178},[220,5539,5540],{"class":222,"line":223},[220,5541,5473],{"class":609},[220,5543,5544],{"class":222,"line":179},[220,5545,4427],{"class":264},[220,5547,5548,5550],{"class":222,"line":389},[220,5549,5482],{"class":420},[220,5551,4435],{"class":264},[220,5553,5554,5556],{"class":222,"line":399},[220,5555,5489],{"class":420},[220,5557,4435],{"class":264},[220,5559,5560,5562,5564,5567],{"class":222,"line":644},[220,5561,4575],{"class":420},[220,5563,4450],{"class":264},[220,5565,5566],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\"",[220,5568,1760],{"class":264},[220,5570,5571,5573,5575,5577,5579,5581],{"class":222,"line":650},[220,5572,4761],{"class":420},[220,5574,5509],{"class":264},[220,5576,5512],{"class":420},[220,5578,4450],{"class":264},[220,5580,5517],{"class":230},[220,5582,5520],{"class":264},[220,5584,5585],{"class":222,"line":656},[220,5586,4458],{"class":264},[220,5588,5589],{"class":222,"line":673},[220,5590,3192],{"class":264},[220,5592,5593],{"class":222,"line":682},[220,5594,749],{"class":264},[212,5596,5598],{"className":4413,"code":5597,"language":4415,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5599,5600,5604,5608,5614,5620,5631,5645,5649,5653],{"__ignoreMap":178},[220,5601,5602],{"class":222,"line":223},[220,5603,5473],{"class":609},[220,5605,5606],{"class":222,"line":179},[220,5607,4427],{"class":264},[220,5609,5610,5612],{"class":222,"line":389},[220,5611,5482],{"class":420},[220,5613,4435],{"class":264},[220,5615,5616,5618],{"class":222,"line":399},[220,5617,5489],{"class":420},[220,5619,4435],{"class":264},[220,5621,5622,5624,5626,5629],{"class":222,"line":644},[220,5623,4575],{"class":420},[220,5625,4450],{"class":264},[220,5627,5628],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\"",[220,5630,1760],{"class":264},[220,5632,5633,5635,5637,5639,5641,5643],{"class":222,"line":650},[220,5634,4761],{"class":420},[220,5636,5509],{"class":264},[220,5638,5512],{"class":420},[220,5640,4450],{"class":264},[220,5642,5517],{"class":230},[220,5644,5520],{"class":264},[220,5646,5647],{"class":222,"line":656},[220,5648,4458],{"class":264},[220,5650,5651],{"class":222,"line":673},[220,5652,3192],{"class":264},[220,5654,5655],{"class":222,"line":682},[220,5656,749],{"class":264},[212,5658,5660],{"className":4413,"code":5659,"language":4415,"meta":178,"style":178},"\u002F\u002F components.json\n{\n \"registries\": {\n \"@shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\",\n \"headers\": { \"Authorization\": \"Bearer ${SHADERS_API_KEY}\" }\n }\n }\n}\n",[99,5661,5662,5666,5670,5676,5682,5693,5707,5711,5715],{"__ignoreMap":178},[220,5663,5664],{"class":222,"line":223},[220,5665,5473],{"class":609},[220,5667,5668],{"class":222,"line":179},[220,5669,4427],{"class":264},[220,5671,5672,5674],{"class":222,"line":389},[220,5673,5482],{"class":420},[220,5675,4435],{"class":264},[220,5677,5678,5680],{"class":222,"line":399},[220,5679,5489],{"class":420},[220,5681,4435],{"class":264},[220,5683,5684,5686,5688,5691],{"class":222,"line":644},[220,5685,4575],{"class":420},[220,5687,4450],{"class":264},[220,5689,5690],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\"",[220,5692,1760],{"class":264},[220,5694,5695,5697,5699,5701,5703,5705],{"class":222,"line":650},[220,5696,4761],{"class":420},[220,5698,5509],{"class":264},[220,5700,5512],{"class":420},[220,5702,4450],{"class":264},[220,5704,5517],{"class":230},[220,5706,5520],{"class":264},[220,5708,5709],{"class":222,"line":656},[220,5710,4458],{"class":264},[220,5712,5713],{"class":222,"line":673},[220,5714,3192],{"class":264},[220,5716,5717],{"class":222,"line":682},[220,5718,749],{"class":264},[15,5720,5721,5722,5725,5726,5729,5730,1864,5733,5736],{},"Use the official ",[99,5723,5724],{},"shadcn"," CLI — it is a framework-agnostic file writer, and it is the CLI that understands the ",[99,5727,5728],{},"registries"," config block. The ",[99,5731,5732],{},"shadcn-vue",[99,5734,5735],{},"shadcn-svelte"," forks have their own CLIs and do not read this configuration.",[23,5738,5740],{"id":5739},"installing-presets","Installing presets",[15,5742,5743,5744,5747],{},"Preset items are named ",[99,5745,5746],{},"\u003Ccollection-slug>-\u003Cvariant>",", matching the collection slug and the variant number shown on the preset page:",[212,5749,5751],{"className":214,"code":5750,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fliquid-chrome-2\n",[99,5752,5753],{"__ignoreMap":178},[220,5754,5755,5757,5759,5761],{"class":222,"line":223},[220,5756,4343],{"class":226},[220,5758,5387],{"class":230},[220,5760,4398],{"class":230},[220,5762,5763],{"class":230}," @shaders\u002Fliquid-chrome-2\n",[15,5765,5766,5767,5769],{},"You get a single component file that renders that exact preset, with all non-default props inlined and ",[99,5768,5398],{}," added to your dependencies. From there it's ordinary source code — change the props, wire them to state, compose it with other effects.",[15,5771,5772,5773,5776],{},"Every preset page on the site has an ",[159,5774,5775],{},"Install with shadcn"," link that shows you the exact command for that variant.",[23,5778,5780],{"id":5779},"installing-sections","Installing sections",[15,5782,5783],{},"Sections are complete, designed page sections rather than a single effect, so they install as a block — layout, copy, and the shader composition together:",[212,5785,5787],{"className":214,"code":5786,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fprism-pricing\n",[99,5788,5789],{"__ignoreMap":178},[220,5790,5791,5793,5795,5797],{"class":222,"line":223},[220,5792,4343],{"class":226},[220,5794,5387],{"class":230},[220,5796,4398],{"class":230},[220,5798,5799],{"class":230}," @shaders\u002Fprism-pricing\n",[15,5801,5802],{},"Sections are hand-authored in Vue and ported to React, Svelte, and Solid, so the same slug works in all four namespaces.",[3198,5804,5806],{"id":5805},"section-assets-and-follow-up-steps","Section assets and follow-up steps",[15,5808,5809],{},"The shadcn CLI can only transport text, so a section install arrives in two parts:",[34,5811,5812,5818],{},[37,5813,5814,5817],{},[159,5815,5816],{},"Code and SVG logos"," are written directly into your project.",[37,5819,5820,5823],{},[159,5821,5822],{},"Binary assets"," — images, video, and SDF files — are fetched once by a small downloader the item ships with. If you are running the install through a coding agent, it will run this for you; otherwise the CLI prints the command.",[15,5825,5826,5827,5829],{},"After the files land, the CLI prints a requirements checklist for that specific section: which logo to swap in, which demo image or video to replace, and whether a shape effect needs an SDF generated from your own SVG. Generating an SDF is a one-liner for any agent connected to ",[56,5828,4299],{"href":58}," — ask it to generate an SDF from your logo and it will handle the rest.",[23,5831,5833],{"id":5832},"free-vs-paid","Free vs paid",[1794,5835,5836,5846],{},[1797,5837,5838],{},[1800,5839,5840,5843],{},[1803,5841,5842],{},"Item",[1803,5844,5845],{},"What's needed",[1810,5847,5848,5856],{},[1800,5849,5850,5853],{},[1815,5851,5852],{},"Free preset or section",[1815,5854,5855],{},"Nothing — installs without a key",[1800,5857,5858,5861],{},[1815,5859,5860],{},"Paid preset or section",[1815,5862,5863],{},"An API key on an account with Shaders Pro, or a single purchase of that item",[15,5865,5866],{},"Entitlement is checked server-side on every install, so the command itself is public — you can share it, put it in a README, or hand it to an agent. It simply won't complete for an account that doesn't own the item.",[23,5868,5870],{"id":5869},"troubleshooting","Troubleshooting",[15,5872,5873,5878,5879,5881,5882,5885,5886,5889,5890,5892,5893,4685],{},[159,5874,5875],{},[99,5876,5877],{},"401 Unauthorized"," — the registry couldn't read a valid key. Either ",[99,5880,5438],{}," isn't set in the environment the CLI is running in, or the key has been revoked. Check that the variable resolves (",[99,5883,5884],{},"echo $SHADERS_API_KEY",") and that the ",[99,5887,5888],{},"Authorization"," header in ",[99,5891,5460],{}," is spelled ",[99,5894,5895],{},"Bearer ${SHADERS_API_KEY}",[15,5897,5898,5903],{},[159,5899,5900],{},[99,5901,5902],{},"403 Forbidden"," — the key is valid but the account isn't entitled to that item. The response body includes a link to unlock it, either with Pro or as a single purchase. If you just bought it, the entitlement can take a moment to propagate; retry once.",[15,5905,5906,5911,5912,5914,5915,5921],{},[159,5907,5908],{},[99,5909,5910],{},"404 Not Found"," — the item name is wrong. Preset names are ",[99,5913,5746],{}," and section names are the section slug exactly as it appears in the URL on shaders.com. You can list everything available at ",[56,5916,5919],{"href":5917,"rel":5918},"https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json",[167],[99,5920,5917],{},", which is public and needs no key.",[15,5923,5924,5927,5928,5930],{},[159,5925,5926],{},"Installed files are for the wrong framework"," — the framework comes from the URL, not from your project. Check the segment in ",[99,5929,5460],{}," matches your stack.",[23,5932,5934],{"id":5933},"browsing-the-registry","Browsing the registry",[15,5936,5937],{},"The index is public:",[212,5939,5941],{"className":214,"code":5940,"language":216,"meta":178,"style":178},"curl https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[99,5942,5943],{"__ignoreMap":178},[220,5944,5945,5948],{"class":222,"line":223},[220,5946,5947],{"class":226},"curl",[220,5949,5950],{"class":230}," https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[15,5952,5953],{},"Every entry carries a title, description, category, thumbnail, and whether it's free or paid — enough to build your own picker, or to let an agent browse the catalogue before choosing what to install.",[1504,5955,5956],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":178,"searchDepth":179,"depth":179,"links":5958},[5959,5963,5964,5967,5968,5969],{"id":5402,"depth":179,"text":5403,"children":5960},[5961,5962],{"id":5406,"depth":389,"text":5407},{"id":5449,"depth":389,"text":5450},{"id":5739,"depth":179,"text":5740},{"id":5779,"depth":179,"text":5780,"children":5965},[5966],{"id":5805,"depth":389,"text":5806},{"id":5832,"depth":179,"text":5833},{"id":5869,"depth":179,"text":5870},{"id":5933,"depth":179,"text":5934},"Install any Shaders preset or section straight into your project with the shadcn CLI","terminal",{},{"title":5362,"description":5970},"docs\u002Fguide\u002F14.registry","HSE0sG5XJcGlPkMnxnc2zLwpah9usnfvUGE5YdszqFY",{"id":5977,"title":1482,"body":5978,"category":188,"description":7450,"exclude":190,"extension":191,"forceFramework":190,"icon":7451,"meta":7452,"navigation":194,"path":1481,"seo":7453,"stem":7454,"__hash__":7455},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":5979,"toc":7446},[5980,5983,5989,5993,6000,6445,6448,6452,6469,6891,6894,6903,7440,7443],[11,5981,1482],{"id":5982},"composing-effects",[15,5984,5985,5986,5988],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,5987,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,5990,5992],{"id":5991},"stacking-components","Stacking Components",[15,5994,5995,5996,5999],{},"Components are evaluated ",[159,5997,5998],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,6001,6002,6085,6181,6271,6361],{":tabs":1557},[212,6003,6005],{"className":334,"code":6004,"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,6006,6007,6015,6020,6028,6032,6037,6059,6063,6068,6077],{"__ignoreMap":178},[220,6008,6009,6011,6013],{"class":222,"line":223},[220,6010,343],{"class":264},[220,6012,347],{"class":346},[220,6014,359],{"class":264},[220,6016,6017],{"class":222,"line":179},[220,6018,6019],{"class":609}," \u003C!-- Bottom layer -->\n",[220,6021,6022,6024,6026],{"class":222,"line":389},[220,6023,364],{"class":264},[220,6025,367],{"class":346},[220,6027,386],{"class":264},[220,6029,6030],{"class":222,"line":399},[220,6031,647],{"emptyLinePlaceholder":194},[220,6033,6034],{"class":222,"line":644},[220,6035,6036],{"class":609}," \u003C!-- Middle layer -->\n",[220,6038,6039,6041,6043,6045,6047,6049,6052,6054,6057],{"class":222,"line":650},[220,6040,364],{"class":264},[220,6042,2553],{"class":346},[220,6044,1588],{"class":226},[220,6046,353],{"class":264},[220,6048,2560],{"class":230},[220,6050,6051],{"class":226}," radius",[220,6053,353],{"class":264},[220,6055,6056],{"class":230},"\"0.8\"",[220,6058,386],{"class":264},[220,6060,6061],{"class":222,"line":656},[220,6062,647],{"emptyLinePlaceholder":194},[220,6064,6065],{"class":222,"line":673},[220,6066,6067],{"class":609}," \u003C!-- Top layer -->\n",[220,6069,6070,6072,6075],{"class":222,"line":682},[220,6071,364],{"class":264},[220,6073,6074],{"class":346},"GlassTiles",[220,6076,386],{"class":264},[220,6078,6079,6081,6083],{"class":222,"line":691},[220,6080,402],{"class":264},[220,6082,347],{"class":346},[220,6084,359],{"class":264},[212,6086,6088],{"className":409,"code":6087,"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,6089,6090,6098,6107,6115,6119,6128,6152,6156,6165,6173],{"__ignoreMap":178},[220,6091,6092,6094,6096],{"class":222,"line":223},[220,6093,343],{"class":264},[220,6095,347],{"class":420},[220,6097,359],{"class":264},[220,6099,6100,6102,6105],{"class":222,"line":179},[220,6101,1999],{"class":264},[220,6103,6104],{"class":609},"\u002F* Bottom layer *\u002F",[220,6106,749],{"class":264},[220,6108,6109,6111,6113],{"class":222,"line":389},[220,6110,364],{"class":264},[220,6112,367],{"class":420},[220,6114,386],{"class":264},[220,6116,6117],{"class":222,"line":399},[220,6118,647],{"emptyLinePlaceholder":194},[220,6120,6121,6123,6126],{"class":222,"line":644},[220,6122,1999],{"class":264},[220,6124,6125],{"class":609},"\u002F* Middle layer *\u002F",[220,6127,749],{"class":264},[220,6129,6130,6132,6134,6136,6138,6140,6142,6144,6146,6149],{"class":222,"line":650},[220,6131,364],{"class":264},[220,6133,2553],{"class":420},[220,6135,1588],{"class":226},[220,6137,353],{"class":260},[220,6139,2560],{"class":230},[220,6141,6051],{"class":226},[220,6143,353],{"class":260},[220,6145,743],{"class":264},[220,6147,6148],{"class":420},"0.8",[220,6150,6151],{"class":264},"} \u002F>\n",[220,6153,6154],{"class":222,"line":656},[220,6155,647],{"emptyLinePlaceholder":194},[220,6157,6158,6160,6163],{"class":222,"line":673},[220,6159,1999],{"class":264},[220,6161,6162],{"class":609},"\u002F* Top layer *\u002F",[220,6164,749],{"class":264},[220,6166,6167,6169,6171],{"class":222,"line":682},[220,6168,364],{"class":264},[220,6170,6074],{"class":420},[220,6172,386],{"class":264},[220,6174,6175,6177,6179],{"class":222,"line":691},[220,6176,402],{"class":264},[220,6178,347],{"class":420},[220,6180,359],{"class":264},[212,6182,6183],{"className":468,"code":6087,"language":469,"meta":178,"style":178},[99,6184,6185,6193,6201,6209,6213,6221,6243,6247,6255,6263],{"__ignoreMap":178},[220,6186,6187,6189,6191],{"class":222,"line":223},[220,6188,343],{"class":264},[220,6190,347],{"class":420},[220,6192,359],{"class":264},[220,6194,6195,6197,6199],{"class":222,"line":179},[220,6196,1999],{"class":264},[220,6198,6104],{"class":609},[220,6200,749],{"class":264},[220,6202,6203,6205,6207],{"class":222,"line":389},[220,6204,364],{"class":264},[220,6206,367],{"class":420},[220,6208,386],{"class":264},[220,6210,6211],{"class":222,"line":399},[220,6212,647],{"emptyLinePlaceholder":194},[220,6214,6215,6217,6219],{"class":222,"line":644},[220,6216,1999],{"class":264},[220,6218,6125],{"class":609},[220,6220,749],{"class":264},[220,6222,6223,6225,6227,6229,6231,6233,6235,6237,6239,6241],{"class":222,"line":650},[220,6224,364],{"class":264},[220,6226,2553],{"class":420},[220,6228,1588],{"class":226},[220,6230,353],{"class":260},[220,6232,2560],{"class":230},[220,6234,6051],{"class":226},[220,6236,353],{"class":260},[220,6238,743],{"class":264},[220,6240,6148],{"class":420},[220,6242,6151],{"class":264},[220,6244,6245],{"class":222,"line":656},[220,6246,647],{"emptyLinePlaceholder":194},[220,6248,6249,6251,6253],{"class":222,"line":673},[220,6250,1999],{"class":264},[220,6252,6162],{"class":609},[220,6254,749],{"class":264},[220,6256,6257,6259,6261],{"class":222,"line":682},[220,6258,364],{"class":264},[220,6260,6074],{"class":420},[220,6262,386],{"class":264},[220,6264,6265,6267,6269],{"class":222,"line":691},[220,6266,402],{"class":264},[220,6268,347],{"class":420},[220,6270,359],{"class":264},[212,6272,6273],{"className":468,"code":6087,"language":469,"meta":178,"style":178},[99,6274,6275,6283,6291,6299,6303,6311,6333,6337,6345,6353],{"__ignoreMap":178},[220,6276,6277,6279,6281],{"class":222,"line":223},[220,6278,343],{"class":264},[220,6280,347],{"class":420},[220,6282,359],{"class":264},[220,6284,6285,6287,6289],{"class":222,"line":179},[220,6286,1999],{"class":264},[220,6288,6104],{"class":609},[220,6290,749],{"class":264},[220,6292,6293,6295,6297],{"class":222,"line":389},[220,6294,364],{"class":264},[220,6296,367],{"class":420},[220,6298,386],{"class":264},[220,6300,6301],{"class":222,"line":399},[220,6302,647],{"emptyLinePlaceholder":194},[220,6304,6305,6307,6309],{"class":222,"line":644},[220,6306,1999],{"class":264},[220,6308,6125],{"class":609},[220,6310,749],{"class":264},[220,6312,6313,6315,6317,6319,6321,6323,6325,6327,6329,6331],{"class":222,"line":650},[220,6314,364],{"class":264},[220,6316,2553],{"class":420},[220,6318,1588],{"class":226},[220,6320,353],{"class":260},[220,6322,2560],{"class":230},[220,6324,6051],{"class":226},[220,6326,353],{"class":260},[220,6328,743],{"class":264},[220,6330,6148],{"class":420},[220,6332,6151],{"class":264},[220,6334,6335],{"class":222,"line":656},[220,6336,647],{"emptyLinePlaceholder":194},[220,6338,6339,6341,6343],{"class":222,"line":673},[220,6340,1999],{"class":264},[220,6342,6162],{"class":609},[220,6344,749],{"class":264},[220,6346,6347,6349,6351],{"class":222,"line":682},[220,6348,364],{"class":264},[220,6350,6074],{"class":420},[220,6352,386],{"class":264},[220,6354,6355,6357,6359],{"class":222,"line":691},[220,6356,402],{"class":264},[220,6358,347],{"class":420},[220,6360,359],{"class":264},[212,6362,6364],{"className":251,"code":6363,"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,6365,6366,6380,6384,6389,6398,6403,6423,6428,6437,6441],{"__ignoreMap":178},[220,6367,6368,6370,6372,6374,6376,6378],{"class":222,"line":223},[220,6369,1735],{"class":260},[220,6371,1738],{"class":420},[220,6373,1741],{"class":260},[220,6375,1744],{"class":260},[220,6377,1747],{"class":226},[220,6379,1750],{"class":264},[220,6381,6382],{"class":222,"line":179},[220,6383,1765],{"class":264},[220,6385,6386],{"class":222,"line":389},[220,6387,6388],{"class":609}," \u002F\u002F Bottom layer\n",[220,6390,6391,6393,6395],{"class":222,"line":399},[220,6392,1770],{"class":264},[220,6394,2462],{"class":230},[220,6396,6397],{"class":264},", props: {} },\n",[220,6399,6400],{"class":222,"line":644},[220,6401,6402],{"class":609}," \u002F\u002F Middle layer\n",[220,6404,6405,6407,6410,6412,6415,6418,6420],{"class":222,"line":650},[220,6406,1770],{"class":264},[220,6408,6409],{"class":230},"'Circle'",[220,6411,1776],{"class":264},[220,6413,6414],{"class":230},"'#ff0088'",[220,6416,6417],{"class":264},", radius: ",[220,6419,6148],{"class":420},[220,6421,6422],{"class":264}," } },\n",[220,6424,6425],{"class":222,"line":656},[220,6426,6427],{"class":609}," \u002F\u002F Top layer\n",[220,6429,6430,6432,6435],{"class":222,"line":673},[220,6431,1770],{"class":264},[220,6433,6434],{"class":230},"'GlassTiles'",[220,6436,2465],{"class":264},[220,6438,6439],{"class":222,"line":682},[220,6440,1787],{"class":264},[220,6442,6443],{"class":222,"line":691},[220,6444,1792],{"class":264},[19,6446],{":preset":6447},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,6449,6451],{"id":6450},"nesting-components","Nesting Components",[15,6453,6454,6455,6458,6459,6462,6463,6466,6467,1938],{},"Notice how the ",[99,6456,6457],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,6460,6461],{},"only"," apply glass tiles to the ",[99,6464,6465],{},"\u003CCircle>"," component, you can nest it inside the ",[99,6468,6457],{},[246,6470,6471,6550,6639,6725,6811],{":tabs":1557},[212,6472,6474],{"className":334,"code":6473,"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,6475,6476,6484,6489,6497,6501,6506,6514,6534,6542],{"__ignoreMap":178},[220,6477,6478,6480,6482],{"class":222,"line":223},[220,6479,343],{"class":264},[220,6481,347],{"class":346},[220,6483,359],{"class":264},[220,6485,6486],{"class":222,"line":179},[220,6487,6488],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,6490,6491,6493,6495],{"class":222,"line":389},[220,6492,364],{"class":264},[220,6494,367],{"class":346},[220,6496,386],{"class":264},[220,6498,6499],{"class":222,"line":399},[220,6500,647],{"emptyLinePlaceholder":194},[220,6502,6503],{"class":222,"line":644},[220,6504,6505],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,6507,6508,6510,6512],{"class":222,"line":650},[220,6509,364],{"class":264},[220,6511,6074],{"class":346},[220,6513,359],{"class":264},[220,6515,6516,6518,6520,6522,6524,6526,6528,6530,6532],{"class":222,"line":656},[220,6517,2550],{"class":264},[220,6519,2553],{"class":346},[220,6521,1588],{"class":226},[220,6523,353],{"class":264},[220,6525,2560],{"class":230},[220,6527,6051],{"class":226},[220,6529,353],{"class":264},[220,6531,6056],{"class":230},[220,6533,386],{"class":264},[220,6535,6536,6538,6540],{"class":222,"line":673},[220,6537,2567],{"class":264},[220,6539,6074],{"class":346},[220,6541,359],{"class":264},[220,6543,6544,6546,6548],{"class":222,"line":682},[220,6545,402],{"class":264},[220,6547,347],{"class":346},[220,6549,359],{"class":264},[212,6551,6553],{"className":409,"code":6552,"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,6554,6555,6563,6572,6580,6584,6593,6601,6623,6631],{"__ignoreMap":178},[220,6556,6557,6559,6561],{"class":222,"line":223},[220,6558,343],{"class":264},[220,6560,347],{"class":420},[220,6562,359],{"class":264},[220,6564,6565,6567,6570],{"class":222,"line":179},[220,6566,1999],{"class":264},[220,6568,6569],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,6571,749],{"class":264},[220,6573,6574,6576,6578],{"class":222,"line":389},[220,6575,364],{"class":264},[220,6577,367],{"class":420},[220,6579,386],{"class":264},[220,6581,6582],{"class":222,"line":399},[220,6583,647],{"emptyLinePlaceholder":194},[220,6585,6586,6588,6591],{"class":222,"line":644},[220,6587,1999],{"class":264},[220,6589,6590],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,6592,749],{"class":264},[220,6594,6595,6597,6599],{"class":222,"line":650},[220,6596,364],{"class":264},[220,6598,6074],{"class":420},[220,6600,359],{"class":264},[220,6602,6603,6605,6607,6609,6611,6613,6615,6617,6619,6621],{"class":222,"line":656},[220,6604,2550],{"class":264},[220,6606,2553],{"class":420},[220,6608,1588],{"class":226},[220,6610,353],{"class":260},[220,6612,2560],{"class":230},[220,6614,6051],{"class":226},[220,6616,353],{"class":260},[220,6618,743],{"class":264},[220,6620,6148],{"class":420},[220,6622,6151],{"class":264},[220,6624,6625,6627,6629],{"class":222,"line":673},[220,6626,2567],{"class":264},[220,6628,6074],{"class":420},[220,6630,359],{"class":264},[220,6632,6633,6635,6637],{"class":222,"line":682},[220,6634,402],{"class":264},[220,6636,347],{"class":420},[220,6638,359],{"class":264},[212,6640,6641],{"className":468,"code":6552,"language":469,"meta":178,"style":178},[99,6642,6643,6651,6659,6667,6671,6679,6687,6709,6717],{"__ignoreMap":178},[220,6644,6645,6647,6649],{"class":222,"line":223},[220,6646,343],{"class":264},[220,6648,347],{"class":420},[220,6650,359],{"class":264},[220,6652,6653,6655,6657],{"class":222,"line":179},[220,6654,1999],{"class":264},[220,6656,6569],{"class":609},[220,6658,749],{"class":264},[220,6660,6661,6663,6665],{"class":222,"line":389},[220,6662,364],{"class":264},[220,6664,367],{"class":420},[220,6666,386],{"class":264},[220,6668,6669],{"class":222,"line":399},[220,6670,647],{"emptyLinePlaceholder":194},[220,6672,6673,6675,6677],{"class":222,"line":644},[220,6674,1999],{"class":264},[220,6676,6590],{"class":609},[220,6678,749],{"class":264},[220,6680,6681,6683,6685],{"class":222,"line":650},[220,6682,364],{"class":264},[220,6684,6074],{"class":420},[220,6686,359],{"class":264},[220,6688,6689,6691,6693,6695,6697,6699,6701,6703,6705,6707],{"class":222,"line":656},[220,6690,2550],{"class":264},[220,6692,2553],{"class":420},[220,6694,1588],{"class":226},[220,6696,353],{"class":260},[220,6698,2560],{"class":230},[220,6700,6051],{"class":226},[220,6702,353],{"class":260},[220,6704,743],{"class":264},[220,6706,6148],{"class":420},[220,6708,6151],{"class":264},[220,6710,6711,6713,6715],{"class":222,"line":673},[220,6712,2567],{"class":264},[220,6714,6074],{"class":420},[220,6716,359],{"class":264},[220,6718,6719,6721,6723],{"class":222,"line":682},[220,6720,402],{"class":264},[220,6722,347],{"class":420},[220,6724,359],{"class":264},[212,6726,6727],{"className":468,"code":6552,"language":469,"meta":178,"style":178},[99,6728,6729,6737,6745,6753,6757,6765,6773,6795,6803],{"__ignoreMap":178},[220,6730,6731,6733,6735],{"class":222,"line":223},[220,6732,343],{"class":264},[220,6734,347],{"class":420},[220,6736,359],{"class":264},[220,6738,6739,6741,6743],{"class":222,"line":179},[220,6740,1999],{"class":264},[220,6742,6569],{"class":609},[220,6744,749],{"class":264},[220,6746,6747,6749,6751],{"class":222,"line":389},[220,6748,364],{"class":264},[220,6750,367],{"class":420},[220,6752,386],{"class":264},[220,6754,6755],{"class":222,"line":399},[220,6756,647],{"emptyLinePlaceholder":194},[220,6758,6759,6761,6763],{"class":222,"line":644},[220,6760,1999],{"class":264},[220,6762,6590],{"class":609},[220,6764,749],{"class":264},[220,6766,6767,6769,6771],{"class":222,"line":650},[220,6768,364],{"class":264},[220,6770,6074],{"class":420},[220,6772,359],{"class":264},[220,6774,6775,6777,6779,6781,6783,6785,6787,6789,6791,6793],{"class":222,"line":656},[220,6776,2550],{"class":264},[220,6778,2553],{"class":420},[220,6780,1588],{"class":226},[220,6782,353],{"class":260},[220,6784,2560],{"class":230},[220,6786,6051],{"class":226},[220,6788,353],{"class":260},[220,6790,743],{"class":264},[220,6792,6148],{"class":420},[220,6794,6151],{"class":264},[220,6796,6797,6799,6801],{"class":222,"line":673},[220,6798,2567],{"class":264},[220,6800,6074],{"class":420},[220,6802,359],{"class":264},[220,6804,6805,6807,6809],{"class":222,"line":682},[220,6806,402],{"class":264},[220,6808,347],{"class":420},[220,6810,359],{"class":264},[212,6812,6814],{"className":251,"code":6813,"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,6815,6816,6830,6834,6839,6847,6852,6861,6878,6883,6887],{"__ignoreMap":178},[220,6817,6818,6820,6822,6824,6826,6828],{"class":222,"line":223},[220,6819,1735],{"class":260},[220,6821,1738],{"class":420},[220,6823,1741],{"class":260},[220,6825,1744],{"class":260},[220,6827,1747],{"class":226},[220,6829,1750],{"class":264},[220,6831,6832],{"class":222,"line":179},[220,6833,1765],{"class":264},[220,6835,6836],{"class":222,"line":389},[220,6837,6838],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,6840,6841,6843,6845],{"class":222,"line":399},[220,6842,1770],{"class":264},[220,6844,2462],{"class":230},[220,6846,6397],{"class":264},[220,6848,6849],{"class":222,"line":644},[220,6850,6851],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,6853,6854,6856,6858],{"class":222,"line":650},[220,6855,1770],{"class":264},[220,6857,6434],{"class":230},[220,6859,6860],{"class":264},", props: {}, children: [\n",[220,6862,6863,6866,6868,6870,6872,6874,6876],{"class":222,"line":656},[220,6864,6865],{"class":264}," { type: ",[220,6867,6409],{"class":230},[220,6869,1776],{"class":264},[220,6871,6414],{"class":230},[220,6873,6417],{"class":264},[220,6875,6148],{"class":420},[220,6877,1782],{"class":264},[220,6879,6880],{"class":222,"line":673},[220,6881,6882],{"class":264}," ]}\n",[220,6884,6885],{"class":222,"line":682},[220,6886,1787],{"class":264},[220,6888,6889],{"class":222,"line":691},[220,6890,1792],{"class":264},[19,6892],{":preset":6893},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,6895,6896,6897,6899,6900,6902],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,6898,367],{},") don't accept children, whereas components that apply effects (such as ",[99,6901,6074],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,6904,6905,7008,7122,7232,7342],{":tabs":1557},[212,6906,6908],{"className":334,"code":6907,"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,6909,6910,6918,6923,6931,6935,6940,6956,6964,6984,6992,7000],{"__ignoreMap":178},[220,6911,6912,6914,6916],{"class":222,"line":223},[220,6913,343],{"class":264},[220,6915,347],{"class":346},[220,6917,359],{"class":264},[220,6919,6920],{"class":222,"line":179},[220,6921,6922],{"class":609}," \u003C!-- Unaffected -->\n",[220,6924,6925,6927,6929],{"class":222,"line":389},[220,6926,364],{"class":264},[220,6928,367],{"class":346},[220,6930,386],{"class":264},[220,6932,6933],{"class":222,"line":399},[220,6934,647],{"emptyLinePlaceholder":194},[220,6936,6937],{"class":222,"line":644},[220,6938,6939],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,6941,6942,6944,6947,6949,6951,6954],{"class":222,"line":650},[220,6943,364],{"class":264},[220,6945,6946],{"class":346},"GridDistortion",[220,6948,6051],{"class":226},[220,6950,353],{"class":264},[220,6952,6953],{"class":230},"\"2\"",[220,6955,359],{"class":264},[220,6957,6958,6960,6962],{"class":222,"line":656},[220,6959,2550],{"class":264},[220,6961,6074],{"class":346},[220,6963,359],{"class":264},[220,6965,6966,6968,6970,6972,6974,6976,6978,6980,6982],{"class":222,"line":673},[220,6967,2813],{"class":264},[220,6969,2553],{"class":346},[220,6971,1588],{"class":226},[220,6973,353],{"class":264},[220,6975,2560],{"class":230},[220,6977,6051],{"class":226},[220,6979,353],{"class":264},[220,6981,6056],{"class":230},[220,6983,386],{"class":264},[220,6985,6986,6988,6990],{"class":222,"line":682},[220,6987,2828],{"class":264},[220,6989,6074],{"class":346},[220,6991,359],{"class":264},[220,6993,6994,6996,6998],{"class":222,"line":691},[220,6995,2567],{"class":264},[220,6997,6946],{"class":346},[220,6999,359],{"class":264},[220,7001,7002,7004,7006],{"class":222,"line":696},[220,7003,402],{"class":264},[220,7005,347],{"class":346},[220,7007,359],{"class":264},[212,7009,7011],{"className":409,"code":7010,"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,7012,7013,7021,7030,7038,7042,7051,7068,7076,7098,7106,7114],{"__ignoreMap":178},[220,7014,7015,7017,7019],{"class":222,"line":223},[220,7016,343],{"class":264},[220,7018,347],{"class":420},[220,7020,359],{"class":264},[220,7022,7023,7025,7028],{"class":222,"line":179},[220,7024,1999],{"class":264},[220,7026,7027],{"class":609},"\u002F* Unaffected *\u002F",[220,7029,749],{"class":264},[220,7031,7032,7034,7036],{"class":222,"line":389},[220,7033,364],{"class":264},[220,7035,367],{"class":420},[220,7037,386],{"class":264},[220,7039,7040],{"class":222,"line":399},[220,7041,647],{"emptyLinePlaceholder":194},[220,7043,7044,7046,7049],{"class":222,"line":644},[220,7045,1999],{"class":264},[220,7047,7048],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,7050,749],{"class":264},[220,7052,7053,7055,7057,7059,7061,7063,7066],{"class":222,"line":650},[220,7054,364],{"class":264},[220,7056,6946],{"class":420},[220,7058,6051],{"class":226},[220,7060,353],{"class":260},[220,7062,743],{"class":264},[220,7064,7065],{"class":420},"2",[220,7067,2335],{"class":264},[220,7069,7070,7072,7074],{"class":222,"line":656},[220,7071,2550],{"class":264},[220,7073,6074],{"class":420},[220,7075,359],{"class":264},[220,7077,7078,7080,7082,7084,7086,7088,7090,7092,7094,7096],{"class":222,"line":673},[220,7079,2813],{"class":264},[220,7081,2553],{"class":420},[220,7083,1588],{"class":226},[220,7085,353],{"class":260},[220,7087,2560],{"class":230},[220,7089,6051],{"class":226},[220,7091,353],{"class":260},[220,7093,743],{"class":264},[220,7095,6148],{"class":420},[220,7097,6151],{"class":264},[220,7099,7100,7102,7104],{"class":222,"line":682},[220,7101,2828],{"class":264},[220,7103,6074],{"class":420},[220,7105,359],{"class":264},[220,7107,7108,7110,7112],{"class":222,"line":691},[220,7109,2567],{"class":264},[220,7111,6946],{"class":420},[220,7113,359],{"class":264},[220,7115,7116,7118,7120],{"class":222,"line":696},[220,7117,402],{"class":264},[220,7119,347],{"class":420},[220,7121,359],{"class":264},[212,7123,7124],{"className":468,"code":7010,"language":469,"meta":178,"style":178},[99,7125,7126,7134,7142,7150,7154,7162,7178,7186,7208,7216,7224],{"__ignoreMap":178},[220,7127,7128,7130,7132],{"class":222,"line":223},[220,7129,343],{"class":264},[220,7131,347],{"class":420},[220,7133,359],{"class":264},[220,7135,7136,7138,7140],{"class":222,"line":179},[220,7137,1999],{"class":264},[220,7139,7027],{"class":609},[220,7141,749],{"class":264},[220,7143,7144,7146,7148],{"class":222,"line":389},[220,7145,364],{"class":264},[220,7147,367],{"class":420},[220,7149,386],{"class":264},[220,7151,7152],{"class":222,"line":399},[220,7153,647],{"emptyLinePlaceholder":194},[220,7155,7156,7158,7160],{"class":222,"line":644},[220,7157,1999],{"class":264},[220,7159,7048],{"class":609},[220,7161,749],{"class":264},[220,7163,7164,7166,7168,7170,7172,7174,7176],{"class":222,"line":650},[220,7165,364],{"class":264},[220,7167,6946],{"class":420},[220,7169,6051],{"class":226},[220,7171,353],{"class":260},[220,7173,743],{"class":264},[220,7175,7065],{"class":420},[220,7177,2335],{"class":264},[220,7179,7180,7182,7184],{"class":222,"line":656},[220,7181,2550],{"class":264},[220,7183,6074],{"class":420},[220,7185,359],{"class":264},[220,7187,7188,7190,7192,7194,7196,7198,7200,7202,7204,7206],{"class":222,"line":673},[220,7189,2813],{"class":264},[220,7191,2553],{"class":420},[220,7193,1588],{"class":226},[220,7195,353],{"class":260},[220,7197,2560],{"class":230},[220,7199,6051],{"class":226},[220,7201,353],{"class":260},[220,7203,743],{"class":264},[220,7205,6148],{"class":420},[220,7207,6151],{"class":264},[220,7209,7210,7212,7214],{"class":222,"line":682},[220,7211,2828],{"class":264},[220,7213,6074],{"class":420},[220,7215,359],{"class":264},[220,7217,7218,7220,7222],{"class":222,"line":691},[220,7219,2567],{"class":264},[220,7221,6946],{"class":420},[220,7223,359],{"class":264},[220,7225,7226,7228,7230],{"class":222,"line":696},[220,7227,402],{"class":264},[220,7229,347],{"class":420},[220,7231,359],{"class":264},[212,7233,7234],{"className":468,"code":7010,"language":469,"meta":178,"style":178},[99,7235,7236,7244,7252,7260,7264,7272,7288,7296,7318,7326,7334],{"__ignoreMap":178},[220,7237,7238,7240,7242],{"class":222,"line":223},[220,7239,343],{"class":264},[220,7241,347],{"class":420},[220,7243,359],{"class":264},[220,7245,7246,7248,7250],{"class":222,"line":179},[220,7247,1999],{"class":264},[220,7249,7027],{"class":609},[220,7251,749],{"class":264},[220,7253,7254,7256,7258],{"class":222,"line":389},[220,7255,364],{"class":264},[220,7257,367],{"class":420},[220,7259,386],{"class":264},[220,7261,7262],{"class":222,"line":399},[220,7263,647],{"emptyLinePlaceholder":194},[220,7265,7266,7268,7270],{"class":222,"line":644},[220,7267,1999],{"class":264},[220,7269,7048],{"class":609},[220,7271,749],{"class":264},[220,7273,7274,7276,7278,7280,7282,7284,7286],{"class":222,"line":650},[220,7275,364],{"class":264},[220,7277,6946],{"class":420},[220,7279,6051],{"class":226},[220,7281,353],{"class":260},[220,7283,743],{"class":264},[220,7285,7065],{"class":420},[220,7287,2335],{"class":264},[220,7289,7290,7292,7294],{"class":222,"line":656},[220,7291,2550],{"class":264},[220,7293,6074],{"class":420},[220,7295,359],{"class":264},[220,7297,7298,7300,7302,7304,7306,7308,7310,7312,7314,7316],{"class":222,"line":673},[220,7299,2813],{"class":264},[220,7301,2553],{"class":420},[220,7303,1588],{"class":226},[220,7305,353],{"class":260},[220,7307,2560],{"class":230},[220,7309,6051],{"class":226},[220,7311,353],{"class":260},[220,7313,743],{"class":264},[220,7315,6148],{"class":420},[220,7317,6151],{"class":264},[220,7319,7320,7322,7324],{"class":222,"line":682},[220,7321,2828],{"class":264},[220,7323,6074],{"class":420},[220,7325,359],{"class":264},[220,7327,7328,7330,7332],{"class":222,"line":691},[220,7329,2567],{"class":264},[220,7331,6946],{"class":420},[220,7333,359],{"class":264},[220,7335,7336,7338,7340],{"class":222,"line":696},[220,7337,402],{"class":264},[220,7339,347],{"class":420},[220,7341,359],{"class":264},[212,7343,7345],{"className":251,"code":7344,"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,7346,7347,7361,7365,7370,7378,7383,7398,7406,7423,7428,7432,7436],{"__ignoreMap":178},[220,7348,7349,7351,7353,7355,7357,7359],{"class":222,"line":223},[220,7350,1735],{"class":260},[220,7352,1738],{"class":420},[220,7354,1741],{"class":260},[220,7356,1744],{"class":260},[220,7358,1747],{"class":226},[220,7360,1750],{"class":264},[220,7362,7363],{"class":222,"line":179},[220,7364,1765],{"class":264},[220,7366,7367],{"class":222,"line":389},[220,7368,7369],{"class":609}," \u002F\u002F Unaffected\n",[220,7371,7372,7374,7376],{"class":222,"line":399},[220,7373,1770],{"class":264},[220,7375,2462],{"class":230},[220,7377,6397],{"class":264},[220,7379,7380],{"class":222,"line":644},[220,7381,7382],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,7384,7385,7387,7390,7393,7395],{"class":222,"line":650},[220,7386,1770],{"class":264},[220,7388,7389],{"class":230},"'GridDistortion'",[220,7391,7392],{"class":264},", props: { radius: ",[220,7394,7065],{"class":420},[220,7396,7397],{"class":264}," }, children: [\n",[220,7399,7400,7402,7404],{"class":222,"line":656},[220,7401,6865],{"class":264},[220,7403,6434],{"class":230},[220,7405,6860],{"class":264},[220,7407,7408,7411,7413,7415,7417,7419,7421],{"class":222,"line":673},[220,7409,7410],{"class":264}," { type: ",[220,7412,6409],{"class":230},[220,7414,1776],{"class":264},[220,7416,6414],{"class":230},[220,7418,6417],{"class":264},[220,7420,6148],{"class":420},[220,7422,1782],{"class":264},[220,7424,7425],{"class":222,"line":682},[220,7426,7427],{"class":264}," ]}\n",[220,7429,7430],{"class":222,"line":691},[220,7431,6882],{"class":264},[220,7433,7434],{"class":222,"line":696},[220,7435,1787],{"class":264},[220,7437,7438],{"class":222,"line":702},[220,7439,1792],{"class":264},[19,7441],{":preset":7442},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,7444,7445],{},"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":7447},[7448,7449],{"id":5991,"depth":179,"text":5992},{"id":6450,"depth":179,"text":6451},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":7450},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":7457,"title":7458,"body":7459,"category":10084,"description":10085,"exclude":190,"extension":191,"forceFramework":190,"icon":10086,"meta":10087,"navigation":194,"path":10088,"seo":10089,"stem":10090,"__hash__":10091},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":7460,"toc":10074},[7461,7464,7467,7471,7482,7825,7828,7833,7928,7932,7935,8510,8513,8516,8530,8845,8848,8851,8855,8866,8887,8898,8902,8917,8923,9333,9336,9341,9345,9352,9386,10069,10072],[11,7462,7458],{"id":7463},"blending-masking",[15,7465,7466],{},"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,7468,7470],{"id":7469},"blend-modes","Blend Modes",[15,7472,7473,7474,7477,7478,7481],{},"Every component has a ",[99,7475,7476],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,7479,7480],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,7483,7484,7551,7624,7694,7764],{":tabs":1557},[212,7485,7487],{"className":334,"code":7486,"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,7488,7489,7497,7505,7509,7514,7543],{"__ignoreMap":178},[220,7490,7491,7493,7495],{"class":222,"line":223},[220,7492,343],{"class":264},[220,7494,347],{"class":346},[220,7496,359],{"class":264},[220,7498,7499,7501,7503],{"class":222,"line":179},[220,7500,364],{"class":264},[220,7502,367],{"class":346},[220,7504,386],{"class":264},[220,7506,7507],{"class":222,"line":389},[220,7508,647],{"emptyLinePlaceholder":194},[220,7510,7511],{"class":222,"line":399},[220,7512,7513],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,7515,7516,7518,7520,7522,7524,7526,7528,7530,7533,7536,7538,7541],{"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,2560],{"class":230},[220,7527,6051],{"class":226},[220,7529,353],{"class":264},[220,7531,7532],{"class":230},"\"0.5\"",[220,7534,7535],{"class":226}," blendMode",[220,7537,353],{"class":264},[220,7539,7540],{"class":230},"\"multiply\"",[220,7542,386],{"class":264},[220,7544,7545,7547,7549],{"class":222,"line":650},[220,7546,402],{"class":264},[220,7548,347],{"class":346},[220,7550,359],{"class":264},[212,7552,7554],{"className":409,"code":7553,"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,7555,7556,7564,7572,7576,7585,7616],{"__ignoreMap":178},[220,7557,7558,7560,7562],{"class":222,"line":223},[220,7559,343],{"class":264},[220,7561,347],{"class":420},[220,7563,359],{"class":264},[220,7565,7566,7568,7570],{"class":222,"line":179},[220,7567,364],{"class":264},[220,7569,367],{"class":420},[220,7571,386],{"class":264},[220,7573,7574],{"class":222,"line":389},[220,7575,647],{"emptyLinePlaceholder":194},[220,7577,7578,7580,7583],{"class":222,"line":399},[220,7579,1999],{"class":264},[220,7581,7582],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,7584,749],{"class":264},[220,7586,7587,7589,7591,7593,7595,7597,7599,7601,7603,7606,7608,7610,7612,7614],{"class":222,"line":644},[220,7588,364],{"class":264},[220,7590,2553],{"class":420},[220,7592,1588],{"class":226},[220,7594,353],{"class":260},[220,7596,2560],{"class":230},[220,7598,6051],{"class":226},[220,7600,353],{"class":260},[220,7602,743],{"class":264},[220,7604,7605],{"class":420},"0.5",[220,7607,2914],{"class":264},[220,7609,7476],{"class":226},[220,7611,353],{"class":260},[220,7613,7540],{"class":230},[220,7615,386],{"class":264},[220,7617,7618,7620,7622],{"class":222,"line":650},[220,7619,402],{"class":264},[220,7621,347],{"class":420},[220,7623,359],{"class":264},[212,7625,7626],{"className":468,"code":7553,"language":469,"meta":178,"style":178},[99,7627,7628,7636,7644,7648,7656,7686],{"__ignoreMap":178},[220,7629,7630,7632,7634],{"class":222,"line":223},[220,7631,343],{"class":264},[220,7633,347],{"class":420},[220,7635,359],{"class":264},[220,7637,7638,7640,7642],{"class":222,"line":179},[220,7639,364],{"class":264},[220,7641,367],{"class":420},[220,7643,386],{"class":264},[220,7645,7646],{"class":222,"line":389},[220,7647,647],{"emptyLinePlaceholder":194},[220,7649,7650,7652,7654],{"class":222,"line":399},[220,7651,1999],{"class":264},[220,7653,7582],{"class":609},[220,7655,749],{"class":264},[220,7657,7658,7660,7662,7664,7666,7668,7670,7672,7674,7676,7678,7680,7682,7684],{"class":222,"line":644},[220,7659,364],{"class":264},[220,7661,2553],{"class":420},[220,7663,1588],{"class":226},[220,7665,353],{"class":260},[220,7667,2560],{"class":230},[220,7669,6051],{"class":226},[220,7671,353],{"class":260},[220,7673,743],{"class":264},[220,7675,7605],{"class":420},[220,7677,2914],{"class":264},[220,7679,7476],{"class":226},[220,7681,353],{"class":260},[220,7683,7540],{"class":230},[220,7685,386],{"class":264},[220,7687,7688,7690,7692],{"class":222,"line":650},[220,7689,402],{"class":264},[220,7691,347],{"class":420},[220,7693,359],{"class":264},[212,7695,7696],{"className":468,"code":7553,"language":469,"meta":178,"style":178},[99,7697,7698,7706,7714,7718,7726,7756],{"__ignoreMap":178},[220,7699,7700,7702,7704],{"class":222,"line":223},[220,7701,343],{"class":264},[220,7703,347],{"class":420},[220,7705,359],{"class":264},[220,7707,7708,7710,7712],{"class":222,"line":179},[220,7709,364],{"class":264},[220,7711,367],{"class":420},[220,7713,386],{"class":264},[220,7715,7716],{"class":222,"line":389},[220,7717,647],{"emptyLinePlaceholder":194},[220,7719,7720,7722,7724],{"class":222,"line":399},[220,7721,1999],{"class":264},[220,7723,7582],{"class":609},[220,7725,749],{"class":264},[220,7727,7728,7730,7732,7734,7736,7738,7740,7742,7744,7746,7748,7750,7752,7754],{"class":222,"line":644},[220,7729,364],{"class":264},[220,7731,2553],{"class":420},[220,7733,1588],{"class":226},[220,7735,353],{"class":260},[220,7737,2560],{"class":230},[220,7739,6051],{"class":226},[220,7741,353],{"class":260},[220,7743,743],{"class":264},[220,7745,7605],{"class":420},[220,7747,2914],{"class":264},[220,7749,7476],{"class":226},[220,7751,353],{"class":260},[220,7753,7540],{"class":230},[220,7755,386],{"class":264},[220,7757,7758,7760,7762],{"class":222,"line":650},[220,7759,402],{"class":264},[220,7761,347],{"class":420},[220,7763,359],{"class":264},[212,7765,7767],{"className":251,"code":7766,"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,7768,7769,7783,7787,7795,7817,7821],{"__ignoreMap":178},[220,7770,7771,7773,7775,7777,7779,7781],{"class":222,"line":223},[220,7772,1735],{"class":260},[220,7774,1738],{"class":420},[220,7776,1741],{"class":260},[220,7778,1744],{"class":260},[220,7780,1747],{"class":226},[220,7782,1750],{"class":264},[220,7784,7785],{"class":222,"line":179},[220,7786,1765],{"class":264},[220,7788,7789,7791,7793],{"class":222,"line":389},[220,7790,1770],{"class":264},[220,7792,2462],{"class":230},[220,7794,6397],{"class":264},[220,7796,7797,7799,7801,7803,7805,7807,7809,7812,7815],{"class":222,"line":399},[220,7798,1770],{"class":264},[220,7800,6409],{"class":230},[220,7802,1776],{"class":264},[220,7804,6414],{"class":230},[220,7806,6417],{"class":264},[220,7808,7605],{"class":420},[220,7810,7811],{"class":264},", blendMode: ",[220,7813,7814],{"class":230},"'multiply'",[220,7816,1782],{"class":264},[220,7818,7819],{"class":222,"line":644},[220,7820,1787],{"class":264},[220,7822,7823],{"class":222,"line":650},[220,7824,1792],{"class":264},[19,7826],{":preset":7827},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,7829,7830],{},[159,7831,7832],{},"Available blend modes:",[34,7834,7835,7842,7859,7875,7889,7900,7917],{},[37,7836,7837,4450,7840],{},[159,7838,7839],{},"Basic",[99,7841,7480],{},[37,7843,7844,4450,7847,1895,7850,1895,7853,1895,7856],{},[159,7845,7846],{},"Darkening",[99,7848,7849],{},"multiply",[99,7851,7852],{},"darken",[99,7854,7855],{},"colorBurn",[99,7857,7858],{},"linearBurn",[37,7860,7861,4450,7864,1895,7867,1895,7870,1895,7873],{},[159,7862,7863],{},"Lightening",[99,7865,7866],{},"screen",[99,7868,7869],{},"lighten",[99,7871,7872],{},"colorDodge",[99,7874,1924],{},[37,7876,7877,4450,7880,1895,7883,1895,7886],{},[159,7878,7879],{},"Contrast",[99,7881,7882],{},"overlay",[99,7884,7885],{},"softLight",[99,7887,7888],{},"hardLight",[37,7890,7891,4450,7894,1895,7897],{},[159,7892,7893],{},"Difference",[99,7895,7896],{},"difference",[99,7898,7899],{},"exclusion",[37,7901,7902,4450,7905,1895,7908,1895,7911,1895,7914],{},[159,7903,7904],{},"Color",[99,7906,7907],{},"hue",[99,7909,7910],{},"saturation",[99,7912,7913],{},"color",[99,7915,7916],{},"luminosity",[37,7918,7919,4450,7922,1895,7925],{},[159,7920,7921],{},"Color Space Blending",[99,7923,7924],{},"normal-oklab",[99,7926,7927],{},"normal-oklch",[3198,7929,7931],{"id":7930},"combining-blend-modes","Combining Blend Modes",[15,7933,7934],{},"Use different blend modes on multiple layers to create complex interactions:",[246,7936,7937,8042,8169,8289,8409],{":tabs":1557},[212,7938,7940],{"className":334,"code":7939,"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,7941,7942,7950,7958,7962,7999,8034],{"__ignoreMap":178},[220,7943,7944,7946,7948],{"class":222,"line":223},[220,7945,343],{"class":264},[220,7947,347],{"class":346},[220,7949,359],{"class":264},[220,7951,7952,7954,7956],{"class":222,"line":179},[220,7953,364],{"class":264},[220,7955,367],{"class":346},[220,7957,386],{"class":264},[220,7959,7960],{"class":222,"line":389},[220,7961,647],{"emptyLinePlaceholder":194},[220,7963,7964,7966,7968,7970,7972,7975,7977,7979,7982,7985,7987,7990,7992,7994,7997],{"class":222,"line":399},[220,7965,364],{"class":264},[220,7967,2553],{"class":346},[220,7969,1588],{"class":226},[220,7971,353],{"class":264},[220,7973,7974],{"class":230},"\"#00ffff\"",[220,7976,6051],{"class":226},[220,7978,353],{"class":264},[220,7980,7981],{"class":230},"\"0.6\"",[220,7983,7984],{"class":226}," :center",[220,7986,353],{"class":264},[220,7988,7989],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,7991,7535],{"class":226},[220,7993,353],{"class":264},[220,7995,7996],{"class":230},"\"screen\"",[220,7998,386],{"class":264},[220,8000,8001,8003,8005,8007,8009,8012,8014,8016,8018,8020,8022,8025,8027,8029,8032],{"class":222,"line":644},[220,8002,364],{"class":264},[220,8004,2553],{"class":346},[220,8006,1588],{"class":226},[220,8008,353],{"class":264},[220,8010,8011],{"class":230},"\"#ff00ff\"",[220,8013,6051],{"class":226},[220,8015,353],{"class":264},[220,8017,7981],{"class":230},[220,8019,7984],{"class":226},[220,8021,353],{"class":264},[220,8023,8024],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,8026,7535],{"class":226},[220,8028,353],{"class":264},[220,8030,8031],{"class":230},"\"difference\"",[220,8033,386],{"class":264},[220,8035,8036,8038,8040],{"class":222,"line":650},[220,8037,402],{"class":264},[220,8039,347],{"class":346},[220,8041,359],{"class":264},[212,8043,8045],{"className":409,"code":8044,"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,8046,8047,8055,8063,8067,8117,8161],{"__ignoreMap":178},[220,8048,8049,8051,8053],{"class":222,"line":223},[220,8050,343],{"class":264},[220,8052,347],{"class":420},[220,8054,359],{"class":264},[220,8056,8057,8059,8061],{"class":222,"line":179},[220,8058,364],{"class":264},[220,8060,367],{"class":420},[220,8062,386],{"class":264},[220,8064,8065],{"class":222,"line":389},[220,8066,647],{"emptyLinePlaceholder":194},[220,8068,8069,8071,8073,8075,8077,8079,8081,8083,8085,8088,8090,8093,8095,8098,8101,8104,8106,8109,8111,8113,8115],{"class":222,"line":399},[220,8070,364],{"class":264},[220,8072,2553],{"class":420},[220,8074,1588],{"class":226},[220,8076,353],{"class":260},[220,8078,7974],{"class":230},[220,8080,6051],{"class":226},[220,8082,353],{"class":260},[220,8084,743],{"class":264},[220,8086,8087],{"class":420},"0.6",[220,8089,2914],{"class":264},[220,8091,8092],{"class":226},"center",[220,8094,353],{"class":260},[220,8096,8097],{"class":264},"{{ x: ",[220,8099,8100],{"class":420},"0.4",[220,8102,8103],{"class":264},", y: ",[220,8105,7605],{"class":420},[220,8107,8108],{"class":264}," }} ",[220,8110,7476],{"class":226},[220,8112,353],{"class":260},[220,8114,7996],{"class":230},[220,8116,386],{"class":264},[220,8118,8119,8121,8123,8125,8127,8129,8131,8133,8135,8137,8139,8141,8143,8145,8147,8149,8151,8153,8155,8157,8159],{"class":222,"line":644},[220,8120,364],{"class":264},[220,8122,2553],{"class":420},[220,8124,1588],{"class":226},[220,8126,353],{"class":260},[220,8128,8011],{"class":230},[220,8130,6051],{"class":226},[220,8132,353],{"class":260},[220,8134,743],{"class":264},[220,8136,8087],{"class":420},[220,8138,2914],{"class":264},[220,8140,8092],{"class":226},[220,8142,353],{"class":260},[220,8144,8097],{"class":264},[220,8146,8087],{"class":420},[220,8148,8103],{"class":264},[220,8150,7605],{"class":420},[220,8152,8108],{"class":264},[220,8154,7476],{"class":226},[220,8156,353],{"class":260},[220,8158,8031],{"class":230},[220,8160,386],{"class":264},[220,8162,8163,8165,8167],{"class":222,"line":650},[220,8164,402],{"class":264},[220,8166,347],{"class":420},[220,8168,359],{"class":264},[212,8170,8171],{"className":468,"code":8044,"language":469,"meta":178,"style":178},[99,8172,8173,8181,8189,8193,8237,8281],{"__ignoreMap":178},[220,8174,8175,8177,8179],{"class":222,"line":223},[220,8176,343],{"class":264},[220,8178,347],{"class":420},[220,8180,359],{"class":264},[220,8182,8183,8185,8187],{"class":222,"line":179},[220,8184,364],{"class":264},[220,8186,367],{"class":420},[220,8188,386],{"class":264},[220,8190,8191],{"class":222,"line":389},[220,8192,647],{"emptyLinePlaceholder":194},[220,8194,8195,8197,8199,8201,8203,8205,8207,8209,8211,8213,8215,8217,8219,8221,8223,8225,8227,8229,8231,8233,8235],{"class":222,"line":399},[220,8196,364],{"class":264},[220,8198,2553],{"class":420},[220,8200,1588],{"class":226},[220,8202,353],{"class":260},[220,8204,7974],{"class":230},[220,8206,6051],{"class":226},[220,8208,353],{"class":260},[220,8210,743],{"class":264},[220,8212,8087],{"class":420},[220,8214,2914],{"class":264},[220,8216,8092],{"class":226},[220,8218,353],{"class":260},[220,8220,8097],{"class":264},[220,8222,8100],{"class":420},[220,8224,8103],{"class":264},[220,8226,7605],{"class":420},[220,8228,8108],{"class":264},[220,8230,7476],{"class":226},[220,8232,353],{"class":260},[220,8234,7996],{"class":230},[220,8236,386],{"class":264},[220,8238,8239,8241,8243,8245,8247,8249,8251,8253,8255,8257,8259,8261,8263,8265,8267,8269,8271,8273,8275,8277,8279],{"class":222,"line":644},[220,8240,364],{"class":264},[220,8242,2553],{"class":420},[220,8244,1588],{"class":226},[220,8246,353],{"class":260},[220,8248,8011],{"class":230},[220,8250,6051],{"class":226},[220,8252,353],{"class":260},[220,8254,743],{"class":264},[220,8256,8087],{"class":420},[220,8258,2914],{"class":264},[220,8260,8092],{"class":226},[220,8262,353],{"class":260},[220,8264,8097],{"class":264},[220,8266,8087],{"class":420},[220,8268,8103],{"class":264},[220,8270,7605],{"class":420},[220,8272,8108],{"class":264},[220,8274,7476],{"class":226},[220,8276,353],{"class":260},[220,8278,8031],{"class":230},[220,8280,386],{"class":264},[220,8282,8283,8285,8287],{"class":222,"line":650},[220,8284,402],{"class":264},[220,8286,347],{"class":420},[220,8288,359],{"class":264},[212,8290,8291],{"className":468,"code":8044,"language":469,"meta":178,"style":178},[99,8292,8293,8301,8309,8313,8357,8401],{"__ignoreMap":178},[220,8294,8295,8297,8299],{"class":222,"line":223},[220,8296,343],{"class":264},[220,8298,347],{"class":420},[220,8300,359],{"class":264},[220,8302,8303,8305,8307],{"class":222,"line":179},[220,8304,364],{"class":264},[220,8306,367],{"class":420},[220,8308,386],{"class":264},[220,8310,8311],{"class":222,"line":389},[220,8312,647],{"emptyLinePlaceholder":194},[220,8314,8315,8317,8319,8321,8323,8325,8327,8329,8331,8333,8335,8337,8339,8341,8343,8345,8347,8349,8351,8353,8355],{"class":222,"line":399},[220,8316,364],{"class":264},[220,8318,2553],{"class":420},[220,8320,1588],{"class":226},[220,8322,353],{"class":260},[220,8324,7974],{"class":230},[220,8326,6051],{"class":226},[220,8328,353],{"class":260},[220,8330,743],{"class":264},[220,8332,8087],{"class":420},[220,8334,2914],{"class":264},[220,8336,8092],{"class":226},[220,8338,353],{"class":260},[220,8340,8097],{"class":264},[220,8342,8100],{"class":420},[220,8344,8103],{"class":264},[220,8346,7605],{"class":420},[220,8348,8108],{"class":264},[220,8350,7476],{"class":226},[220,8352,353],{"class":260},[220,8354,7996],{"class":230},[220,8356,386],{"class":264},[220,8358,8359,8361,8363,8365,8367,8369,8371,8373,8375,8377,8379,8381,8383,8385,8387,8389,8391,8393,8395,8397,8399],{"class":222,"line":644},[220,8360,364],{"class":264},[220,8362,2553],{"class":420},[220,8364,1588],{"class":226},[220,8366,353],{"class":260},[220,8368,8011],{"class":230},[220,8370,6051],{"class":226},[220,8372,353],{"class":260},[220,8374,743],{"class":264},[220,8376,8087],{"class":420},[220,8378,2914],{"class":264},[220,8380,8092],{"class":226},[220,8382,353],{"class":260},[220,8384,8097],{"class":264},[220,8386,8087],{"class":420},[220,8388,8103],{"class":264},[220,8390,7605],{"class":420},[220,8392,8108],{"class":264},[220,8394,7476],{"class":226},[220,8396,353],{"class":260},[220,8398,8031],{"class":230},[220,8400,386],{"class":264},[220,8402,8403,8405,8407],{"class":222,"line":650},[220,8404,402],{"class":264},[220,8406,347],{"class":420},[220,8408,359],{"class":264},[212,8410,8412],{"className":251,"code":8411,"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,8413,8414,8428,8432,8440,8472,8502,8506],{"__ignoreMap":178},[220,8415,8416,8418,8420,8422,8424,8426],{"class":222,"line":223},[220,8417,1735],{"class":260},[220,8419,1738],{"class":420},[220,8421,1741],{"class":260},[220,8423,1744],{"class":260},[220,8425,1747],{"class":226},[220,8427,1750],{"class":264},[220,8429,8430],{"class":222,"line":179},[220,8431,1765],{"class":264},[220,8433,8434,8436,8438],{"class":222,"line":389},[220,8435,1770],{"class":264},[220,8437,2462],{"class":230},[220,8439,6397],{"class":264},[220,8441,8442,8444,8446,8448,8451,8453,8455,8458,8460,8462,8464,8467,8470],{"class":222,"line":399},[220,8443,1770],{"class":264},[220,8445,6409],{"class":230},[220,8447,1776],{"class":264},[220,8449,8450],{"class":230},"'#00ffff'",[220,8452,6417],{"class":264},[220,8454,8087],{"class":420},[220,8456,8457],{"class":264},", center: { x: ",[220,8459,8100],{"class":420},[220,8461,8103],{"class":264},[220,8463,7605],{"class":420},[220,8465,8466],{"class":264}," }, blendMode: ",[220,8468,8469],{"class":230},"'screen'",[220,8471,6422],{"class":264},[220,8473,8474,8476,8478,8480,8483,8485,8487,8489,8491,8493,8495,8497,8500],{"class":222,"line":644},[220,8475,1770],{"class":264},[220,8477,6409],{"class":230},[220,8479,1776],{"class":264},[220,8481,8482],{"class":230},"'#ff00ff'",[220,8484,6417],{"class":264},[220,8486,8087],{"class":420},[220,8488,8457],{"class":264},[220,8490,8087],{"class":420},[220,8492,8103],{"class":264},[220,8494,7605],{"class":420},[220,8496,8466],{"class":264},[220,8498,8499],{"class":230},"'difference'",[220,8501,1782],{"class":264},[220,8503,8504],{"class":222,"line":650},[220,8505,1787],{"class":264},[220,8507,8508],{"class":222,"line":656},[220,8509,1792],{"class":264},[19,8511],{":preset":8512},"{\"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,8514,8515],{"id":2921},"Opacity",[15,8517,8518,8519,8521,8522,8525,8526,8529],{},"Control layer transparency with the ",[99,8520,2921],{}," prop. Values range from ",[99,8523,8524],{},"0"," (fully transparent) to ",[99,8527,8528],{},"1"," (fully opaque):",[246,8531,8532,8592,8657,8721,8785],{":tabs":1557},[212,8533,8535],{"className":334,"code":8534,"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,8536,8537,8545,8553,8557,8584],{"__ignoreMap":178},[220,8538,8539,8541,8543],{"class":222,"line":223},[220,8540,343],{"class":264},[220,8542,347],{"class":346},[220,8544,359],{"class":264},[220,8546,8547,8549,8551],{"class":222,"line":179},[220,8548,364],{"class":264},[220,8550,367],{"class":346},[220,8552,386],{"class":264},[220,8554,8555],{"class":222,"line":389},[220,8556,647],{"emptyLinePlaceholder":194},[220,8558,8559,8561,8563,8565,8567,8569,8571,8573,8575,8578,8580,8582],{"class":222,"line":399},[220,8560,364],{"class":264},[220,8562,2553],{"class":346},[220,8564,1588],{"class":226},[220,8566,353],{"class":264},[220,8568,2560],{"class":230},[220,8570,6051],{"class":226},[220,8572,353],{"class":264},[220,8574,6056],{"class":230},[220,8576,8577],{"class":226}," opacity",[220,8579,353],{"class":264},[220,8581,7532],{"class":230},[220,8583,386],{"class":264},[220,8585,8586,8588,8590],{"class":222,"line":644},[220,8587,402],{"class":264},[220,8589,347],{"class":346},[220,8591,359],{"class":264},[212,8593,8595],{"className":409,"code":8594,"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,8596,8597,8605,8613,8617,8649],{"__ignoreMap":178},[220,8598,8599,8601,8603],{"class":222,"line":223},[220,8600,343],{"class":264},[220,8602,347],{"class":420},[220,8604,359],{"class":264},[220,8606,8607,8609,8611],{"class":222,"line":179},[220,8608,364],{"class":264},[220,8610,367],{"class":420},[220,8612,386],{"class":264},[220,8614,8615],{"class":222,"line":389},[220,8616,647],{"emptyLinePlaceholder":194},[220,8618,8619,8621,8623,8625,8627,8629,8631,8633,8635,8637,8639,8641,8643,8645,8647],{"class":222,"line":399},[220,8620,364],{"class":264},[220,8622,2553],{"class":420},[220,8624,1588],{"class":226},[220,8626,353],{"class":260},[220,8628,2560],{"class":230},[220,8630,6051],{"class":226},[220,8632,353],{"class":260},[220,8634,743],{"class":264},[220,8636,6148],{"class":420},[220,8638,2914],{"class":264},[220,8640,2921],{"class":226},[220,8642,353],{"class":260},[220,8644,743],{"class":264},[220,8646,7605],{"class":420},[220,8648,6151],{"class":264},[220,8650,8651,8653,8655],{"class":222,"line":644},[220,8652,402],{"class":264},[220,8654,347],{"class":420},[220,8656,359],{"class":264},[212,8658,8659],{"className":468,"code":8594,"language":469,"meta":178,"style":178},[99,8660,8661,8669,8677,8681,8713],{"__ignoreMap":178},[220,8662,8663,8665,8667],{"class":222,"line":223},[220,8664,343],{"class":264},[220,8666,347],{"class":420},[220,8668,359],{"class":264},[220,8670,8671,8673,8675],{"class":222,"line":179},[220,8672,364],{"class":264},[220,8674,367],{"class":420},[220,8676,386],{"class":264},[220,8678,8679],{"class":222,"line":389},[220,8680,647],{"emptyLinePlaceholder":194},[220,8682,8683,8685,8687,8689,8691,8693,8695,8697,8699,8701,8703,8705,8707,8709,8711],{"class":222,"line":399},[220,8684,364],{"class":264},[220,8686,2553],{"class":420},[220,8688,1588],{"class":226},[220,8690,353],{"class":260},[220,8692,2560],{"class":230},[220,8694,6051],{"class":226},[220,8696,353],{"class":260},[220,8698,743],{"class":264},[220,8700,6148],{"class":420},[220,8702,2914],{"class":264},[220,8704,2921],{"class":226},[220,8706,353],{"class":260},[220,8708,743],{"class":264},[220,8710,7605],{"class":420},[220,8712,6151],{"class":264},[220,8714,8715,8717,8719],{"class":222,"line":644},[220,8716,402],{"class":264},[220,8718,347],{"class":420},[220,8720,359],{"class":264},[212,8722,8723],{"className":468,"code":8594,"language":469,"meta":178,"style":178},[99,8724,8725,8733,8741,8745,8777],{"__ignoreMap":178},[220,8726,8727,8729,8731],{"class":222,"line":223},[220,8728,343],{"class":264},[220,8730,347],{"class":420},[220,8732,359],{"class":264},[220,8734,8735,8737,8739],{"class":222,"line":179},[220,8736,364],{"class":264},[220,8738,367],{"class":420},[220,8740,386],{"class":264},[220,8742,8743],{"class":222,"line":389},[220,8744,647],{"emptyLinePlaceholder":194},[220,8746,8747,8749,8751,8753,8755,8757,8759,8761,8763,8765,8767,8769,8771,8773,8775],{"class":222,"line":399},[220,8748,364],{"class":264},[220,8750,2553],{"class":420},[220,8752,1588],{"class":226},[220,8754,353],{"class":260},[220,8756,2560],{"class":230},[220,8758,6051],{"class":226},[220,8760,353],{"class":260},[220,8762,743],{"class":264},[220,8764,6148],{"class":420},[220,8766,2914],{"class":264},[220,8768,2921],{"class":226},[220,8770,353],{"class":260},[220,8772,743],{"class":264},[220,8774,7605],{"class":420},[220,8776,6151],{"class":264},[220,8778,8779,8781,8783],{"class":222,"line":644},[220,8780,402],{"class":264},[220,8782,347],{"class":420},[220,8784,359],{"class":264},[212,8786,8788],{"className":251,"code":8787,"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,8789,8790,8804,8808,8816,8837,8841],{"__ignoreMap":178},[220,8791,8792,8794,8796,8798,8800,8802],{"class":222,"line":223},[220,8793,1735],{"class":260},[220,8795,1738],{"class":420},[220,8797,1741],{"class":260},[220,8799,1744],{"class":260},[220,8801,1747],{"class":226},[220,8803,1750],{"class":264},[220,8805,8806],{"class":222,"line":179},[220,8807,1765],{"class":264},[220,8809,8810,8812,8814],{"class":222,"line":389},[220,8811,1770],{"class":264},[220,8813,2462],{"class":230},[220,8815,6397],{"class":264},[220,8817,8818,8820,8822,8824,8826,8828,8830,8833,8835],{"class":222,"line":399},[220,8819,1770],{"class":264},[220,8821,6409],{"class":230},[220,8823,1776],{"class":264},[220,8825,6414],{"class":230},[220,8827,6417],{"class":264},[220,8829,6148],{"class":420},[220,8831,8832],{"class":264},", opacity: ",[220,8834,7605],{"class":420},[220,8836,1782],{"class":264},[220,8838,8839],{"class":222,"line":644},[220,8840,1787],{"class":264},[220,8842,8843],{"class":222,"line":650},[220,8844,1792],{"class":264},[19,8846],{":preset":8847},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,8849,8850],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,8852,8854],{"id":8853},"visibility","Visibility",[15,8856,7473,8857,8859,8860,8862,8863,8865],{},[99,8858,2711],{}," prop that defaults to ",[99,8861,2332],{},". Setting it to ",[99,8864,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,8867,8869],{"className":409,"code":8868,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,8870,8871],{"__ignoreMap":178},[220,8872,8873,8875,8877,8879,8881,8883,8885],{"class":222,"line":223},[220,8874,343],{"class":264},[220,8876,2553],{"class":420},[220,8878,2618],{"class":226},[220,8880,353],{"class":260},[220,8882,743],{"class":264},[220,8884,2629],{"class":420},[220,8886,6151],{"class":264},[15,8888,8889,8890,8893,8894,8897],{},"This is different from ",[99,8891,8892],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,8895,8896],{},"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,8899,8901],{"id":8900},"masking","Masking",[15,8903,8904,8905,8908,8909,8912,8913,8916],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,8906,8907],{},"id"," property (",[99,8910,8911],{},"string",") and then set ",[99,8914,8915],{},"maskSource"," to that ID on another component to use it as a mask.",[15,8918,8919,8920,8922],{},"Masks typically have ",[99,8921,8896],{}," so they don't appear in the final output—they only control visibility of other components:",[246,8924,8925,9005,9094,9180,9266],{":tabs":1557},[212,8926,8928],{"className":334,"code":8927,"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,8929,8930,8938,8943,8973,8977,8982,8997],{"__ignoreMap":178},[220,8931,8932,8934,8936],{"class":222,"line":223},[220,8933,343],{"class":264},[220,8935,347],{"class":346},[220,8937,359],{"class":264},[220,8939,8940],{"class":222,"line":179},[220,8941,8942],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,8944,8945,8947,8949,8952,8954,8957,8959,8961,8963,8966,8968,8971],{"class":222,"line":389},[220,8946,364],{"class":264},[220,8948,2553],{"class":346},[220,8950,8951],{"class":226}," id",[220,8953,353],{"class":264},[220,8955,8956],{"class":230},"\"myMask\"",[220,8958,6051],{"class":226},[220,8960,353],{"class":264},[220,8962,6056],{"class":230},[220,8964,8965],{"class":226}," :visible",[220,8967,353],{"class":264},[220,8969,8970],{"class":230},"\"false\"",[220,8972,386],{"class":264},[220,8974,8975],{"class":222,"line":399},[220,8976,647],{"emptyLinePlaceholder":194},[220,8978,8979],{"class":222,"line":644},[220,8980,8981],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,8983,8984,8986,8988,8991,8993,8995],{"class":222,"line":650},[220,8985,364],{"class":264},[220,8987,367],{"class":346},[220,8989,8990],{"class":226}," maskSource",[220,8992,353],{"class":264},[220,8994,8956],{"class":230},[220,8996,386],{"class":264},[220,8998,8999,9001,9003],{"class":222,"line":656},[220,9000,402],{"class":264},[220,9002,347],{"class":346},[220,9004,359],{"class":264},[212,9006,9008],{"className":409,"code":9007,"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,9009,9010,9018,9027,9059,9063,9072,9086],{"__ignoreMap":178},[220,9011,9012,9014,9016],{"class":222,"line":223},[220,9013,343],{"class":264},[220,9015,347],{"class":420},[220,9017,359],{"class":264},[220,9019,9020,9022,9025],{"class":222,"line":179},[220,9021,1999],{"class":264},[220,9023,9024],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,9026,749],{"class":264},[220,9028,9029,9031,9033,9035,9037,9039,9041,9043,9045,9047,9049,9051,9053,9055,9057],{"class":222,"line":389},[220,9030,364],{"class":264},[220,9032,2553],{"class":420},[220,9034,8951],{"class":226},[220,9036,353],{"class":260},[220,9038,8956],{"class":230},[220,9040,6051],{"class":226},[220,9042,353],{"class":260},[220,9044,743],{"class":264},[220,9046,6148],{"class":420},[220,9048,2914],{"class":264},[220,9050,2711],{"class":226},[220,9052,353],{"class":260},[220,9054,743],{"class":264},[220,9056,2629],{"class":420},[220,9058,6151],{"class":264},[220,9060,9061],{"class":222,"line":399},[220,9062,647],{"emptyLinePlaceholder":194},[220,9064,9065,9067,9070],{"class":222,"line":644},[220,9066,1999],{"class":264},[220,9068,9069],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,9071,749],{"class":264},[220,9073,9074,9076,9078,9080,9082,9084],{"class":222,"line":650},[220,9075,364],{"class":264},[220,9077,367],{"class":420},[220,9079,8990],{"class":226},[220,9081,353],{"class":260},[220,9083,8956],{"class":230},[220,9085,386],{"class":264},[220,9087,9088,9090,9092],{"class":222,"line":656},[220,9089,402],{"class":264},[220,9091,347],{"class":420},[220,9093,359],{"class":264},[212,9095,9096],{"className":468,"code":9007,"language":469,"meta":178,"style":178},[99,9097,9098,9106,9114,9146,9150,9158,9172],{"__ignoreMap":178},[220,9099,9100,9102,9104],{"class":222,"line":223},[220,9101,343],{"class":264},[220,9103,347],{"class":420},[220,9105,359],{"class":264},[220,9107,9108,9110,9112],{"class":222,"line":179},[220,9109,1999],{"class":264},[220,9111,9024],{"class":609},[220,9113,749],{"class":264},[220,9115,9116,9118,9120,9122,9124,9126,9128,9130,9132,9134,9136,9138,9140,9142,9144],{"class":222,"line":389},[220,9117,364],{"class":264},[220,9119,2553],{"class":420},[220,9121,8951],{"class":226},[220,9123,353],{"class":260},[220,9125,8956],{"class":230},[220,9127,6051],{"class":226},[220,9129,353],{"class":260},[220,9131,743],{"class":264},[220,9133,6148],{"class":420},[220,9135,2914],{"class":264},[220,9137,2711],{"class":226},[220,9139,353],{"class":260},[220,9141,743],{"class":264},[220,9143,2629],{"class":420},[220,9145,6151],{"class":264},[220,9147,9148],{"class":222,"line":399},[220,9149,647],{"emptyLinePlaceholder":194},[220,9151,9152,9154,9156],{"class":222,"line":644},[220,9153,1999],{"class":264},[220,9155,9069],{"class":609},[220,9157,749],{"class":264},[220,9159,9160,9162,9164,9166,9168,9170],{"class":222,"line":650},[220,9161,364],{"class":264},[220,9163,367],{"class":420},[220,9165,8990],{"class":226},[220,9167,353],{"class":260},[220,9169,8956],{"class":230},[220,9171,386],{"class":264},[220,9173,9174,9176,9178],{"class":222,"line":656},[220,9175,402],{"class":264},[220,9177,347],{"class":420},[220,9179,359],{"class":264},[212,9181,9182],{"className":468,"code":9007,"language":469,"meta":178,"style":178},[99,9183,9184,9192,9200,9232,9236,9244,9258],{"__ignoreMap":178},[220,9185,9186,9188,9190],{"class":222,"line":223},[220,9187,343],{"class":264},[220,9189,347],{"class":420},[220,9191,359],{"class":264},[220,9193,9194,9196,9198],{"class":222,"line":179},[220,9195,1999],{"class":264},[220,9197,9024],{"class":609},[220,9199,749],{"class":264},[220,9201,9202,9204,9206,9208,9210,9212,9214,9216,9218,9220,9222,9224,9226,9228,9230],{"class":222,"line":389},[220,9203,364],{"class":264},[220,9205,2553],{"class":420},[220,9207,8951],{"class":226},[220,9209,353],{"class":260},[220,9211,8956],{"class":230},[220,9213,6051],{"class":226},[220,9215,353],{"class":260},[220,9217,743],{"class":264},[220,9219,6148],{"class":420},[220,9221,2914],{"class":264},[220,9223,2711],{"class":226},[220,9225,353],{"class":260},[220,9227,743],{"class":264},[220,9229,2629],{"class":420},[220,9231,6151],{"class":264},[220,9233,9234],{"class":222,"line":399},[220,9235,647],{"emptyLinePlaceholder":194},[220,9237,9238,9240,9242],{"class":222,"line":644},[220,9239,1999],{"class":264},[220,9241,9069],{"class":609},[220,9243,749],{"class":264},[220,9245,9246,9248,9250,9252,9254,9256],{"class":222,"line":650},[220,9247,364],{"class":264},[220,9249,367],{"class":420},[220,9251,8990],{"class":226},[220,9253,353],{"class":260},[220,9255,8956],{"class":230},[220,9257,386],{"class":264},[220,9259,9260,9262,9264],{"class":222,"line":656},[220,9261,402],{"class":264},[220,9263,347],{"class":420},[220,9265,359],{"class":264},[212,9267,9269],{"className":251,"code":9268,"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,9270,9271,9285,9289,9312,9325,9329],{"__ignoreMap":178},[220,9272,9273,9275,9277,9279,9281,9283],{"class":222,"line":223},[220,9274,1735],{"class":260},[220,9276,1738],{"class":420},[220,9278,1741],{"class":260},[220,9280,1744],{"class":260},[220,9282,1747],{"class":226},[220,9284,1750],{"class":264},[220,9286,9287],{"class":222,"line":179},[220,9288,1765],{"class":264},[220,9290,9291,9293,9295,9298,9301,9303,9305,9308,9310],{"class":222,"line":389},[220,9292,1770],{"class":264},[220,9294,6409],{"class":230},[220,9296,9297],{"class":264},", id: ",[220,9299,9300],{"class":230},"'myMask'",[220,9302,7392],{"class":264},[220,9304,6148],{"class":420},[220,9306,9307],{"class":264},", visible: ",[220,9309,2629],{"class":420},[220,9311,6422],{"class":264},[220,9313,9314,9316,9318,9321,9323],{"class":222,"line":399},[220,9315,1770],{"class":264},[220,9317,2462],{"class":230},[220,9319,9320],{"class":264},", props: { maskSource: ",[220,9322,9300],{"class":230},[220,9324,1782],{"class":264},[220,9326,9327],{"class":222,"line":644},[220,9328,1787],{"class":264},[220,9330,9331],{"class":222,"line":650},[220,9332,1792],{"class":264},[19,9334],{":preset":9335},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,9337,9338,9339,4685],{},"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,9340,8896],{},[3198,9342,9344],{"id":9343},"mask-types","Mask Types",[15,9346,9347,9348,9351],{},"Control how the mask is interpreted with the ",[99,9349,9350],{},"maskType"," prop:",[34,9353,9354,9362,9370,9378],{},[37,9355,9356,9361],{},[159,9357,9358],{},[99,9359,9360],{},"alpha",": Uses the mask's alpha channel (default)",[37,9363,9364,9369],{},[159,9365,9366],{},[99,9367,9368],{},"alphaInverted",": Uses the inverted alpha channel",[37,9371,9372,9377],{},[159,9373,9374],{},[99,9375,9376],{},"luminance",": Uses the mask's brightness",[37,9379,9380,9385],{},[159,9381,9382],{},[99,9383,9384],{},"luminanceInverted",": Uses the inverted brightness",[246,9387,9388,9537,9685,9829,9973],{":tabs":1557},[212,9389,9391],{"className":334,"code":9390,"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,9392,9393,9401,9409,9413,9418,9425,9435,9444,9453,9463,9467,9471,9476,9483,9493,9503,9512,9523,9528],{"__ignoreMap":178},[220,9394,9395,9397,9399],{"class":222,"line":223},[220,9396,343],{"class":264},[220,9398,347],{"class":346},[220,9400,359],{"class":264},[220,9402,9403,9405,9407],{"class":222,"line":179},[220,9404,364],{"class":264},[220,9406,367],{"class":346},[220,9408,386],{"class":264},[220,9410,9411],{"class":222,"line":389},[220,9412,647],{"emptyLinePlaceholder":194},[220,9414,9415],{"class":222,"line":399},[220,9416,9417],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,9419,9420,9422],{"class":222,"line":644},[220,9421,364],{"class":264},[220,9423,9424],{"class":346},"Checkerboard\n",[220,9426,9427,9430,9432],{"class":222,"line":650},[220,9428,9429],{"class":226}," id",[220,9431,353],{"class":264},[220,9433,9434],{"class":230},"\"mask\"\n",[220,9436,9437,9439,9441],{"class":222,"line":656},[220,9438,1194],{"class":226},[220,9440,353],{"class":264},[220,9442,9443],{"class":230},"\"#ffffff\"\n",[220,9445,9446,9448,9450],{"class":222,"line":673},[220,9447,1204],{"class":226},[220,9449,353],{"class":264},[220,9451,9452],{"class":230},"\"#111111\"\n",[220,9454,9455,9458,9460],{"class":222,"line":682},[220,9456,9457],{"class":226}," :visible",[220,9459,353],{"class":264},[220,9461,9462],{"class":230},"\"false\"\n",[220,9464,9465],{"class":222,"line":691},[220,9466,1234],{"class":264},[220,9468,9469],{"class":222,"line":696},[220,9470,647],{"emptyLinePlaceholder":194},[220,9472,9473],{"class":222,"line":702},[220,9474,9475],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,9477,9478,9480],{"class":222,"line":718},[220,9479,364],{"class":264},[220,9481,9482],{"class":346},"Circle\n",[220,9484,9485,9488,9490],{"class":222,"line":727},[220,9486,9487],{"class":226}," color",[220,9489,353],{"class":264},[220,9491,9492],{"class":230},"\"#ff0088\"\n",[220,9494,9495,9498,9500],{"class":222,"line":2664},[220,9496,9497],{"class":226}," radius",[220,9499,353],{"class":264},[220,9501,9502],{"class":230},"\"0.8\"\n",[220,9504,9505,9508,9510],{"class":222,"line":3459},[220,9506,9507],{"class":226}," maskSource",[220,9509,353],{"class":264},[220,9511,9434],{"class":230},[220,9513,9515,9518,9520],{"class":222,"line":9514},17,[220,9516,9517],{"class":226}," maskType",[220,9519,353],{"class":264},[220,9521,9522],{"class":230},"\"luminance\"\n",[220,9524,9526],{"class":222,"line":9525},18,[220,9527,1234],{"class":264},[220,9529,9531,9533,9535],{"class":222,"line":9530},19,[220,9532,402],{"class":264},[220,9534,347],{"class":346},[220,9536,359],{"class":264},[212,9538,9540],{"className":409,"code":9539,"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,9541,9542,9550,9558,9562,9571,9577,9585,9593,9601,9614,9618,9622,9631,9637,9645,9657,9665,9673,9677],{"__ignoreMap":178},[220,9543,9544,9546,9548],{"class":222,"line":223},[220,9545,343],{"class":264},[220,9547,347],{"class":420},[220,9549,359],{"class":264},[220,9551,9552,9554,9556],{"class":222,"line":179},[220,9553,364],{"class":264},[220,9555,367],{"class":420},[220,9557,386],{"class":264},[220,9559,9560],{"class":222,"line":389},[220,9561,647],{"emptyLinePlaceholder":194},[220,9563,9564,9566,9569],{"class":222,"line":399},[220,9565,1999],{"class":264},[220,9567,9568],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,9570,749],{"class":264},[220,9572,9573,9575],{"class":222,"line":644},[220,9574,364],{"class":264},[220,9576,9424],{"class":420},[220,9578,9579,9581,9583],{"class":222,"line":650},[220,9580,9429],{"class":226},[220,9582,353],{"class":260},[220,9584,9434],{"class":230},[220,9586,9587,9589,9591],{"class":222,"line":656},[220,9588,1194],{"class":226},[220,9590,353],{"class":260},[220,9592,9443],{"class":230},[220,9594,9595,9597,9599],{"class":222,"line":673},[220,9596,1204],{"class":226},[220,9598,353],{"class":260},[220,9600,9452],{"class":230},[220,9602,9603,9606,9608,9610,9612],{"class":222,"line":682},[220,9604,9605],{"class":226}," visible",[220,9607,353],{"class":260},[220,9609,743],{"class":264},[220,9611,2629],{"class":420},[220,9613,749],{"class":264},[220,9615,9616],{"class":222,"line":691},[220,9617,1234],{"class":264},[220,9619,9620],{"class":222,"line":696},[220,9621,647],{"emptyLinePlaceholder":194},[220,9623,9624,9626,9629],{"class":222,"line":702},[220,9625,1999],{"class":264},[220,9627,9628],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,9630,749],{"class":264},[220,9632,9633,9635],{"class":222,"line":718},[220,9634,364],{"class":264},[220,9636,9482],{"class":420},[220,9638,9639,9641,9643],{"class":222,"line":727},[220,9640,9487],{"class":226},[220,9642,353],{"class":260},[220,9644,9492],{"class":230},[220,9646,9647,9649,9651,9653,9655],{"class":222,"line":2664},[220,9648,9497],{"class":226},[220,9650,353],{"class":260},[220,9652,743],{"class":264},[220,9654,6148],{"class":420},[220,9656,749],{"class":264},[220,9658,9659,9661,9663],{"class":222,"line":3459},[220,9660,9507],{"class":226},[220,9662,353],{"class":260},[220,9664,9434],{"class":230},[220,9666,9667,9669,9671],{"class":222,"line":9514},[220,9668,9517],{"class":226},[220,9670,353],{"class":260},[220,9672,9522],{"class":230},[220,9674,9675],{"class":222,"line":9525},[220,9676,1234],{"class":264},[220,9678,9679,9681,9683],{"class":222,"line":9530},[220,9680,402],{"class":264},[220,9682,347],{"class":420},[220,9684,359],{"class":264},[212,9686,9687],{"className":468,"code":9539,"language":469,"meta":178,"style":178},[99,9688,9689,9697,9705,9709,9717,9723,9731,9739,9747,9759,9763,9767,9775,9781,9789,9801,9809,9817,9821],{"__ignoreMap":178},[220,9690,9691,9693,9695],{"class":222,"line":223},[220,9692,343],{"class":264},[220,9694,347],{"class":420},[220,9696,359],{"class":264},[220,9698,9699,9701,9703],{"class":222,"line":179},[220,9700,364],{"class":264},[220,9702,367],{"class":420},[220,9704,386],{"class":264},[220,9706,9707],{"class":222,"line":389},[220,9708,647],{"emptyLinePlaceholder":194},[220,9710,9711,9713,9715],{"class":222,"line":399},[220,9712,1999],{"class":264},[220,9714,9568],{"class":609},[220,9716,749],{"class":264},[220,9718,9719,9721],{"class":222,"line":644},[220,9720,364],{"class":264},[220,9722,9424],{"class":420},[220,9724,9725,9727,9729],{"class":222,"line":650},[220,9726,9429],{"class":226},[220,9728,353],{"class":260},[220,9730,9434],{"class":230},[220,9732,9733,9735,9737],{"class":222,"line":656},[220,9734,1194],{"class":226},[220,9736,353],{"class":260},[220,9738,9443],{"class":230},[220,9740,9741,9743,9745],{"class":222,"line":673},[220,9742,1204],{"class":226},[220,9744,353],{"class":260},[220,9746,9452],{"class":230},[220,9748,9749,9751,9753,9755,9757],{"class":222,"line":682},[220,9750,9605],{"class":226},[220,9752,353],{"class":260},[220,9754,743],{"class":264},[220,9756,2629],{"class":420},[220,9758,749],{"class":264},[220,9760,9761],{"class":222,"line":691},[220,9762,1234],{"class":264},[220,9764,9765],{"class":222,"line":696},[220,9766,647],{"emptyLinePlaceholder":194},[220,9768,9769,9771,9773],{"class":222,"line":702},[220,9770,1999],{"class":264},[220,9772,9628],{"class":609},[220,9774,749],{"class":264},[220,9776,9777,9779],{"class":222,"line":718},[220,9778,364],{"class":264},[220,9780,9482],{"class":420},[220,9782,9783,9785,9787],{"class":222,"line":727},[220,9784,9487],{"class":226},[220,9786,353],{"class":260},[220,9788,9492],{"class":230},[220,9790,9791,9793,9795,9797,9799],{"class":222,"line":2664},[220,9792,9497],{"class":226},[220,9794,353],{"class":260},[220,9796,743],{"class":264},[220,9798,6148],{"class":420},[220,9800,749],{"class":264},[220,9802,9803,9805,9807],{"class":222,"line":3459},[220,9804,9507],{"class":226},[220,9806,353],{"class":260},[220,9808,9434],{"class":230},[220,9810,9811,9813,9815],{"class":222,"line":9514},[220,9812,9517],{"class":226},[220,9814,353],{"class":260},[220,9816,9522],{"class":230},[220,9818,9819],{"class":222,"line":9525},[220,9820,1234],{"class":264},[220,9822,9823,9825,9827],{"class":222,"line":9530},[220,9824,402],{"class":264},[220,9826,347],{"class":420},[220,9828,359],{"class":264},[212,9830,9831],{"className":468,"code":9539,"language":469,"meta":178,"style":178},[99,9832,9833,9841,9849,9853,9861,9867,9875,9883,9891,9903,9907,9911,9919,9925,9933,9945,9953,9961,9965],{"__ignoreMap":178},[220,9834,9835,9837,9839],{"class":222,"line":223},[220,9836,343],{"class":264},[220,9838,347],{"class":420},[220,9840,359],{"class":264},[220,9842,9843,9845,9847],{"class":222,"line":179},[220,9844,364],{"class":264},[220,9846,367],{"class":420},[220,9848,386],{"class":264},[220,9850,9851],{"class":222,"line":389},[220,9852,647],{"emptyLinePlaceholder":194},[220,9854,9855,9857,9859],{"class":222,"line":399},[220,9856,1999],{"class":264},[220,9858,9568],{"class":609},[220,9860,749],{"class":264},[220,9862,9863,9865],{"class":222,"line":644},[220,9864,364],{"class":264},[220,9866,9424],{"class":420},[220,9868,9869,9871,9873],{"class":222,"line":650},[220,9870,9429],{"class":226},[220,9872,353],{"class":260},[220,9874,9434],{"class":230},[220,9876,9877,9879,9881],{"class":222,"line":656},[220,9878,1194],{"class":226},[220,9880,353],{"class":260},[220,9882,9443],{"class":230},[220,9884,9885,9887,9889],{"class":222,"line":673},[220,9886,1204],{"class":226},[220,9888,353],{"class":260},[220,9890,9452],{"class":230},[220,9892,9893,9895,9897,9899,9901],{"class":222,"line":682},[220,9894,9605],{"class":226},[220,9896,353],{"class":260},[220,9898,743],{"class":264},[220,9900,2629],{"class":420},[220,9902,749],{"class":264},[220,9904,9905],{"class":222,"line":691},[220,9906,1234],{"class":264},[220,9908,9909],{"class":222,"line":696},[220,9910,647],{"emptyLinePlaceholder":194},[220,9912,9913,9915,9917],{"class":222,"line":702},[220,9914,1999],{"class":264},[220,9916,9628],{"class":609},[220,9918,749],{"class":264},[220,9920,9921,9923],{"class":222,"line":718},[220,9922,364],{"class":264},[220,9924,9482],{"class":420},[220,9926,9927,9929,9931],{"class":222,"line":727},[220,9928,9487],{"class":226},[220,9930,353],{"class":260},[220,9932,9492],{"class":230},[220,9934,9935,9937,9939,9941,9943],{"class":222,"line":2664},[220,9936,9497],{"class":226},[220,9938,353],{"class":260},[220,9940,743],{"class":264},[220,9942,6148],{"class":420},[220,9944,749],{"class":264},[220,9946,9947,9949,9951],{"class":222,"line":3459},[220,9948,9507],{"class":226},[220,9950,353],{"class":260},[220,9952,9434],{"class":230},[220,9954,9955,9957,9959],{"class":222,"line":9514},[220,9956,9517],{"class":226},[220,9958,353],{"class":260},[220,9960,9522],{"class":230},[220,9962,9963],{"class":222,"line":9525},[220,9964,1234],{"class":264},[220,9966,9967,9969,9971],{"class":222,"line":9530},[220,9968,402],{"class":264},[220,9970,347],{"class":420},[220,9972,359],{"class":264},[212,9974,9976],{"className":251,"code":9975,"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,9977,9978,9992,9996,10004,10034,10061,10065],{"__ignoreMap":178},[220,9979,9980,9982,9984,9986,9988,9990],{"class":222,"line":223},[220,9981,1735],{"class":260},[220,9983,1738],{"class":420},[220,9985,1741],{"class":260},[220,9987,1744],{"class":260},[220,9989,1747],{"class":226},[220,9991,1750],{"class":264},[220,9993,9994],{"class":222,"line":179},[220,9995,1765],{"class":264},[220,9997,9998,10000,10002],{"class":222,"line":389},[220,9999,1770],{"class":264},[220,10001,2462],{"class":230},[220,10003,6397],{"class":264},[220,10005,10006,10008,10011,10013,10016,10019,10022,10025,10028,10030,10032],{"class":222,"line":399},[220,10007,1770],{"class":264},[220,10009,10010],{"class":230},"'Checkerboard'",[220,10012,9297],{"class":264},[220,10014,10015],{"class":230},"'mask'",[220,10017,10018],{"class":264},", props: { colorA: ",[220,10020,10021],{"class":230},"'#ffffff'",[220,10023,10024],{"class":264},", colorB: ",[220,10026,10027],{"class":230},"'#111111'",[220,10029,9307],{"class":264},[220,10031,2629],{"class":420},[220,10033,6422],{"class":264},[220,10035,10036,10038,10040,10042,10044,10046,10048,10051,10053,10056,10059],{"class":222,"line":644},[220,10037,1770],{"class":264},[220,10039,6409],{"class":230},[220,10041,1776],{"class":264},[220,10043,6414],{"class":230},[220,10045,6417],{"class":264},[220,10047,6148],{"class":420},[220,10049,10050],{"class":264},", maskSource: ",[220,10052,10015],{"class":230},[220,10054,10055],{"class":264},", maskType: ",[220,10057,10058],{"class":230},"'luminance'",[220,10060,1782],{"class":264},[220,10062,10063],{"class":222,"line":650},[220,10064,1787],{"class":264},[220,10066,10067],{"class":222,"line":656},[220,10068,1792],{"class":264},[19,10070],{":preset":10071},"{\"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,10073,7445],{},{"title":178,"searchDepth":179,"depth":179,"links":10075},[10076,10079,10080,10081],{"id":7469,"depth":179,"text":7470,"children":10077},[10078],{"id":7930,"depth":389,"text":7931},{"id":2921,"depth":179,"text":8515},{"id":8853,"depth":179,"text":8854},{"id":8900,"depth":179,"text":8901,"children":10082},[10083],{"id":9343,"depth":389,"text":9344},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":7458,"description":10085},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":10093,"title":1496,"body":10094,"category":10084,"description":12087,"exclude":190,"extension":191,"forceFramework":190,"icon":12088,"meta":12089,"navigation":194,"path":1495,"seo":12090,"stem":12091,"__hash__":12092},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":10095,"toc":12080},[10096,10099,10102,10106,10109,10326,10329,10333,10336,11496,11499,11504,11507,11511,11514,11519,11562,11567,11606,11611,11662,11667,11693,11696,11700,11703,11709,12040,12044,12047,12051,12054,12074,12077],[11,10097,1496],{"id":10098},"props-reactivity",[15,10100,10101],{},"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,10103,10105],{"id":10104},"basic-props","Basic Props",[15,10107,10108],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,10110,10111,10152,10195,10237,10279],{":tabs":1557},[212,10112,10114],{"className":334,"code":10113,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,10115,10116,10124,10144],{"__ignoreMap":178},[220,10117,10118,10120,10122],{"class":222,"line":223},[220,10119,343],{"class":264},[220,10121,347],{"class":346},[220,10123,359],{"class":264},[220,10125,10126,10128,10130,10132,10134,10136,10138,10140,10142],{"class":222,"line":179},[220,10127,364],{"class":264},[220,10129,2553],{"class":346},[220,10131,1588],{"class":226},[220,10133,353],{"class":264},[220,10135,2560],{"class":230},[220,10137,6051],{"class":226},[220,10139,353],{"class":264},[220,10141,7532],{"class":230},[220,10143,386],{"class":264},[220,10145,10146,10148,10150],{"class":222,"line":389},[220,10147,402],{"class":264},[220,10149,347],{"class":346},[220,10151,359],{"class":264},[212,10153,10155],{"className":409,"code":10154,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,10156,10157,10165,10187],{"__ignoreMap":178},[220,10158,10159,10161,10163],{"class":222,"line":223},[220,10160,343],{"class":264},[220,10162,347],{"class":420},[220,10164,359],{"class":264},[220,10166,10167,10169,10171,10173,10175,10177,10179,10181,10183,10185],{"class":222,"line":179},[220,10168,364],{"class":264},[220,10170,2553],{"class":420},[220,10172,1588],{"class":226},[220,10174,353],{"class":260},[220,10176,2560],{"class":230},[220,10178,6051],{"class":226},[220,10180,353],{"class":260},[220,10182,743],{"class":264},[220,10184,7605],{"class":420},[220,10186,6151],{"class":264},[220,10188,10189,10191,10193],{"class":222,"line":389},[220,10190,402],{"class":264},[220,10192,347],{"class":420},[220,10194,359],{"class":264},[212,10196,10197],{"className":468,"code":10154,"language":469,"meta":178,"style":178},[99,10198,10199,10207,10229],{"__ignoreMap":178},[220,10200,10201,10203,10205],{"class":222,"line":223},[220,10202,343],{"class":264},[220,10204,347],{"class":420},[220,10206,359],{"class":264},[220,10208,10209,10211,10213,10215,10217,10219,10221,10223,10225,10227],{"class":222,"line":179},[220,10210,364],{"class":264},[220,10212,2553],{"class":420},[220,10214,1588],{"class":226},[220,10216,353],{"class":260},[220,10218,2560],{"class":230},[220,10220,6051],{"class":226},[220,10222,353],{"class":260},[220,10224,743],{"class":264},[220,10226,7605],{"class":420},[220,10228,6151],{"class":264},[220,10230,10231,10233,10235],{"class":222,"line":389},[220,10232,402],{"class":264},[220,10234,347],{"class":420},[220,10236,359],{"class":264},[212,10238,10239],{"className":468,"code":10154,"language":469,"meta":178,"style":178},[99,10240,10241,10249,10271],{"__ignoreMap":178},[220,10242,10243,10245,10247],{"class":222,"line":223},[220,10244,343],{"class":264},[220,10246,347],{"class":420},[220,10248,359],{"class":264},[220,10250,10251,10253,10255,10257,10259,10261,10263,10265,10267,10269],{"class":222,"line":179},[220,10252,364],{"class":264},[220,10254,2553],{"class":420},[220,10256,1588],{"class":226},[220,10258,353],{"class":260},[220,10260,2560],{"class":230},[220,10262,6051],{"class":226},[220,10264,353],{"class":260},[220,10266,743],{"class":264},[220,10268,7605],{"class":420},[220,10270,6151],{"class":264},[220,10272,10273,10275,10277],{"class":222,"line":389},[220,10274,402],{"class":264},[220,10276,347],{"class":420},[220,10278,359],{"class":264},[212,10280,10282],{"className":251,"code":10281,"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,10283,10284,10298,10302,10318,10322],{"__ignoreMap":178},[220,10285,10286,10288,10290,10292,10294,10296],{"class":222,"line":223},[220,10287,1735],{"class":260},[220,10289,1738],{"class":420},[220,10291,1741],{"class":260},[220,10293,1744],{"class":260},[220,10295,1747],{"class":226},[220,10297,1750],{"class":264},[220,10299,10300],{"class":222,"line":179},[220,10301,1765],{"class":264},[220,10303,10304,10306,10308,10310,10312,10314,10316],{"class":222,"line":389},[220,10305,1770],{"class":264},[220,10307,6409],{"class":230},[220,10309,1776],{"class":264},[220,10311,6414],{"class":230},[220,10313,6417],{"class":264},[220,10315,7605],{"class":420},[220,10317,1782],{"class":264},[220,10319,10320],{"class":222,"line":399},[220,10321,1787],{"class":264},[220,10323,10324],{"class":222,"line":644},[220,10325,1792],{"class":264},[15,10327,10328],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,10330,10332],{"id":10331},"reactive-props","Reactive Props",[15,10334,10335],{},"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,10337,10338,10570,10859,11080,11353],{":tabs":1557},[212,10339,10341],{"className":334,"code":10340,"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,10342,10343,10353,10363,10374,10378,10395,10403,10407,10415,10423,10445,10465,10485,10493,10497,10505,10532,10554,10562],{"__ignoreMap":178},[220,10344,10345,10347,10349,10351],{"class":222,"line":223},[220,10346,343],{"class":264},[220,10348,2590],{"class":346},[220,10350,2593],{"class":226},[220,10352,359],{"class":264},[220,10354,10355,10357,10359,10361],{"class":222,"line":179},[220,10356,261],{"class":260},[220,10358,2602],{"class":264},[220,10360,268],{"class":260},[220,10362,2607],{"class":230},[220,10364,10365,10367,10370,10372],{"class":222,"line":389},[220,10366,261],{"class":260},[220,10368,10369],{"class":264}," { Shader, LinearGradient, Circle } ",[220,10371,268],{"class":260},[220,10373,271],{"class":230},[220,10375,10376],{"class":222,"line":399},[220,10377,647],{"emptyLinePlaceholder":194},[220,10379,10380,10382,10385,10387,10389,10391,10393],{"class":222,"line":644},[220,10381,1735],{"class":260},[220,10383,10384],{"class":420}," angle",[220,10386,1741],{"class":260},[220,10388,2623],{"class":226},[220,10390,2626],{"class":264},[220,10392,8524],{"class":420},[220,10394,2632],{"class":264},[220,10396,10397,10399,10401],{"class":222,"line":650},[220,10398,402],{"class":264},[220,10400,2590],{"class":346},[220,10402,359],{"class":264},[220,10404,10405],{"class":222,"line":656},[220,10406,647],{"emptyLinePlaceholder":194},[220,10408,10409,10411,10413],{"class":222,"line":673},[220,10410,343],{"class":264},[220,10412,2519],{"class":346},[220,10414,359],{"class":264},[220,10416,10417,10419,10421],{"class":222,"line":682},[220,10418,364],{"class":264},[220,10420,3334],{"class":346},[220,10422,359],{"class":264},[220,10424,10425,10427,10430,10433,10435,10438,10441,10443],{"class":222,"line":691},[220,10426,2550],{"class":264},[220,10428,10429],{"class":346},"button",[220,10431,10432],{"class":226}," @click",[220,10434,353],{"class":264},[220,10436,10437],{"class":230},"\"angle += 45\"",[220,10439,10440],{"class":264},">Rotate +45°\u003C\u002F",[220,10442,10429],{"class":346},[220,10444,359],{"class":264},[220,10446,10447,10449,10451,10453,10455,10458,10461,10463],{"class":222,"line":696},[220,10448,2550],{"class":264},[220,10450,10429],{"class":346},[220,10452,10432],{"class":226},[220,10454,353],{"class":264},[220,10456,10457],{"class":230},"\"angle -= 45\"",[220,10459,10460],{"class":264},">Rotate -45°\u003C\u002F",[220,10462,10429],{"class":346},[220,10464,359],{"class":264},[220,10466,10467,10469,10471,10473,10475,10478,10481,10483],{"class":222,"line":702},[220,10468,2550],{"class":264},[220,10470,10429],{"class":346},[220,10472,10432],{"class":226},[220,10474,353],{"class":264},[220,10476,10477],{"class":230},"\"angle = 0\"",[220,10479,10480],{"class":264},">Reset\u003C\u002F",[220,10482,10429],{"class":346},[220,10484,359],{"class":264},[220,10486,10487,10489,10491],{"class":222,"line":718},[220,10488,2567],{"class":264},[220,10490,3334],{"class":346},[220,10492,359],{"class":264},[220,10494,10495],{"class":222,"line":727},[220,10496,647],{"emptyLinePlaceholder":194},[220,10498,10499,10501,10503],{"class":222,"line":2664},[220,10500,364],{"class":264},[220,10502,347],{"class":346},[220,10504,359],{"class":264},[220,10506,10507,10509,10511,10513,10515,10518,10520,10522,10524,10526,10528,10530],{"class":222,"line":3459},[220,10508,2550],{"class":264},[220,10510,2553],{"class":346},[220,10512,8951],{"class":226},[220,10514,353],{"class":264},[220,10516,10517],{"class":230},"\"mask\"",[220,10519,6051],{"class":226},[220,10521,353],{"class":264},[220,10523,6056],{"class":230},[220,10525,8965],{"class":226},[220,10527,353],{"class":264},[220,10529,8970],{"class":230},[220,10531,386],{"class":264},[220,10533,10534,10536,10538,10541,10543,10546,10548,10550,10552],{"class":222,"line":9514},[220,10535,2550],{"class":264},[220,10537,367],{"class":346},[220,10539,10540],{"class":226}," :angle",[220,10542,353],{"class":264},[220,10544,10545],{"class":230},"\"angle\"",[220,10547,8990],{"class":226},[220,10549,353],{"class":264},[220,10551,10517],{"class":230},[220,10553,386],{"class":264},[220,10555,10556,10558,10560],{"class":222,"line":9525},[220,10557,2567],{"class":264},[220,10559,347],{"class":346},[220,10561,359],{"class":264},[220,10563,10564,10566,10568],{"class":222,"line":9530},[220,10565,402],{"class":264},[220,10567,2519],{"class":346},[220,10569,359],{"class":264},[212,10571,10573],{"className":409,"code":10572,"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,10574,10575,10585,10595,10599,10608,10634,10638,10644,10649,10657,10699,10735,10762,10771,10775,10783,10815,10836,10844,10849,10854],{"__ignoreMap":178},[220,10576,10577,10579,10581,10583],{"class":222,"line":223},[220,10578,261],{"class":260},[220,10580,2682],{"class":264},[220,10582,268],{"class":260},[220,10584,2687],{"class":230},[220,10586,10587,10589,10591,10593],{"class":222,"line":179},[220,10588,261],{"class":260},[220,10590,10369],{"class":264},[220,10592,268],{"class":260},[220,10594,287],{"class":230},[220,10596,10597],{"class":222,"line":389},[220,10598,647],{"emptyLinePlaceholder":194},[220,10600,10601,10603,10606],{"class":222,"line":399},[220,10602,2641],{"class":260},[220,10604,10605],{"class":226}," MyComponent",[220,10607,2647],{"class":264},[220,10609,10610,10612,10614,10617,10619,10622,10624,10626,10628,10630,10632],{"class":222,"line":644},[220,10611,2705],{"class":260},[220,10613,2708],{"class":264},[220,10615,10616],{"class":420},"angle",[220,10618,1895],{"class":264},[220,10620,10621],{"class":420},"setAngle",[220,10623,2719],{"class":264},[220,10625,353],{"class":260},[220,10627,2724],{"class":226},[220,10629,2626],{"class":264},[220,10631,8524],{"class":420},[220,10633,2632],{"class":264},[220,10635,10636],{"class":222,"line":650},[220,10637,647],{"emptyLinePlaceholder":194},[220,10639,10640,10642],{"class":222,"line":656},[220,10641,2739],{"class":260},[220,10643,2742],{"class":264},[220,10645,10646],{"class":222,"line":673},[220,10647,10648],{"class":264}," \u003C>\n",[220,10650,10651,10653,10655],{"class":222,"line":682},[220,10652,2813],{"class":264},[220,10654,3334],{"class":346},[220,10656,359],{"class":264},[220,10658,10659,10662,10664,10667,10669,10671,10673,10676,10678,10680,10683,10686,10689,10692,10695,10697],{"class":222,"line":691},[220,10660,10661],{"class":264}," \u003C",[220,10663,10429],{"class":346},[220,10665,10666],{"class":226}," onClick",[220,10668,353],{"class":260},[220,10670,2759],{"class":264},[220,10672,2762],{"class":260},[220,10674,10675],{"class":226}," setAngle",[220,10677,2626],{"class":264},[220,10679,56],{"class":3558},[220,10681,10682],{"class":260}," =>",[220,10684,10685],{"class":264}," a ",[220,10687,10688],{"class":260},"+",[220,10690,10691],{"class":420}," 45",[220,10693,10694],{"class":264},")}>Rotate +45°\u003C\u002F",[220,10696,10429],{"class":346},[220,10698,359],{"class":264},[220,10700,10701,10703,10705,10707,10709,10711,10713,10715,10717,10719,10721,10723,10726,10728,10731,10733],{"class":222,"line":696},[220,10702,10661],{"class":264},[220,10704,10429],{"class":346},[220,10706,10666],{"class":226},[220,10708,353],{"class":260},[220,10710,2759],{"class":264},[220,10712,2762],{"class":260},[220,10714,10675],{"class":226},[220,10716,2626],{"class":264},[220,10718,56],{"class":3558},[220,10720,10682],{"class":260},[220,10722,10685],{"class":264},[220,10724,10725],{"class":260},"-",[220,10727,10691],{"class":420},[220,10729,10730],{"class":264},")}>Rotate -45°\u003C\u002F",[220,10732,10429],{"class":346},[220,10734,359],{"class":264},[220,10736,10737,10739,10741,10743,10745,10747,10749,10751,10753,10755,10758,10760],{"class":222,"line":702},[220,10738,10661],{"class":264},[220,10740,10429],{"class":346},[220,10742,10666],{"class":226},[220,10744,353],{"class":260},[220,10746,2759],{"class":264},[220,10748,2762],{"class":260},[220,10750,10675],{"class":226},[220,10752,2626],{"class":264},[220,10754,8524],{"class":420},[220,10756,10757],{"class":264},")}>Reset\u003C\u002F",[220,10759,10429],{"class":346},[220,10761,359],{"class":264},[220,10763,10764,10767,10769],{"class":222,"line":718},[220,10765,10766],{"class":264}," \u003C\u002F",[220,10768,3334],{"class":346},[220,10770,359],{"class":264},[220,10772,10773],{"class":222,"line":727},[220,10774,647],{"emptyLinePlaceholder":194},[220,10776,10777,10779,10781],{"class":222,"line":2664},[220,10778,2813],{"class":264},[220,10780,347],{"class":420},[220,10782,359],{"class":264},[220,10784,10785,10787,10789,10791,10793,10795,10797,10799,10801,10803,10805,10807,10809,10811,10813],{"class":222,"line":3459},[220,10786,10661],{"class":264},[220,10788,2553],{"class":420},[220,10790,8951],{"class":226},[220,10792,353],{"class":260},[220,10794,10517],{"class":230},[220,10796,6051],{"class":226},[220,10798,353],{"class":260},[220,10800,743],{"class":264},[220,10802,6148],{"class":420},[220,10804,2914],{"class":264},[220,10806,2711],{"class":226},[220,10808,353],{"class":260},[220,10810,743],{"class":264},[220,10812,2629],{"class":420},[220,10814,6151],{"class":264},[220,10816,10817,10819,10821,10823,10825,10828,10830,10832,10834],{"class":222,"line":9514},[220,10818,10661],{"class":264},[220,10820,367],{"class":420},[220,10822,10384],{"class":226},[220,10824,353],{"class":260},[220,10826,10827],{"class":264},"{angle} ",[220,10829,8915],{"class":226},[220,10831,353],{"class":260},[220,10833,10517],{"class":230},[220,10835,386],{"class":264},[220,10837,10838,10840,10842],{"class":222,"line":9525},[220,10839,10766],{"class":264},[220,10841,347],{"class":420},[220,10843,359],{"class":264},[220,10845,10846],{"class":222,"line":9530},[220,10847,10848],{"class":264}," \u003C\u002F>\n",[220,10850,10852],{"class":222,"line":10851},20,[220,10853,2837],{"class":264},[220,10855,10857],{"class":222,"line":10856},21,[220,10858,749],{"class":264},[212,10860,10862],{"className":468,"code":10861,"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,10863,10864,10872,10877,10881,10886,10894,10898,10906,10940,10972,11003,11011,11015,11023,11055,11072],{"__ignoreMap":178},[220,10865,10866,10868,10870],{"class":222,"line":223},[220,10867,343],{"class":264},[220,10869,2590],{"class":346},[220,10871,359],{"class":264},[220,10873,10874],{"class":222,"line":179},[220,10875,10876],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,10878,10879],{"class":222,"line":389},[220,10880,647],{"emptyLinePlaceholder":194},[220,10882,10883],{"class":222,"line":399},[220,10884,10885],{"class":264}," let angle = 0\n",[220,10887,10888,10890,10892],{"class":222,"line":644},[220,10889,402],{"class":264},[220,10891,2590],{"class":346},[220,10893,359],{"class":264},[220,10895,10896],{"class":222,"line":650},[220,10897,647],{"emptyLinePlaceholder":194},[220,10899,10900,10902,10904],{"class":222,"line":656},[220,10901,343],{"class":264},[220,10903,3334],{"class":346},[220,10905,359],{"class":264},[220,10907,10908,10910,10912,10914,10916,10919,10921,10923,10925,10928,10931,10933,10936,10938],{"class":222,"line":673},[220,10909,364],{"class":264},[220,10911,10429],{"class":346},[220,10913,5290],{"class":226},[220,10915,1554],{"class":264},[220,10917,10918],{"class":226},"click",[220,10920,353],{"class":260},[220,10922,2759],{"class":264},[220,10924,2762],{"class":260},[220,10926,10927],{"class":264}," angle ",[220,10929,10930],{"class":260},"+=",[220,10932,10691],{"class":420},[220,10934,10935],{"class":264},"}>Rotate +45°\u003C\u002F",[220,10937,10429],{"class":346},[220,10939,359],{"class":264},[220,10941,10942,10944,10946,10948,10950,10952,10954,10956,10958,10960,10963,10965,10968,10970],{"class":222,"line":682},[220,10943,364],{"class":264},[220,10945,10429],{"class":346},[220,10947,5290],{"class":226},[220,10949,1554],{"class":264},[220,10951,10918],{"class":226},[220,10953,353],{"class":260},[220,10955,2759],{"class":264},[220,10957,2762],{"class":260},[220,10959,10927],{"class":264},[220,10961,10962],{"class":260},"-=",[220,10964,10691],{"class":420},[220,10966,10967],{"class":264},"}>Rotate -45°\u003C\u002F",[220,10969,10429],{"class":346},[220,10971,359],{"class":264},[220,10973,10974,10976,10978,10980,10982,10984,10986,10988,10990,10992,10994,10996,10999,11001],{"class":222,"line":691},[220,10975,364],{"class":264},[220,10977,10429],{"class":346},[220,10979,5290],{"class":226},[220,10981,1554],{"class":264},[220,10983,10918],{"class":226},[220,10985,353],{"class":260},[220,10987,2759],{"class":264},[220,10989,2762],{"class":260},[220,10991,10927],{"class":264},[220,10993,353],{"class":260},[220,10995,2794],{"class":420},[220,10997,10998],{"class":264},"}>Reset\u003C\u002F",[220,11000,10429],{"class":346},[220,11002,359],{"class":264},[220,11004,11005,11007,11009],{"class":222,"line":696},[220,11006,402],{"class":264},[220,11008,3334],{"class":346},[220,11010,359],{"class":264},[220,11012,11013],{"class":222,"line":702},[220,11014,647],{"emptyLinePlaceholder":194},[220,11016,11017,11019,11021],{"class":222,"line":718},[220,11018,343],{"class":264},[220,11020,347],{"class":420},[220,11022,359],{"class":264},[220,11024,11025,11027,11029,11031,11033,11035,11037,11039,11041,11043,11045,11047,11049,11051,11053],{"class":222,"line":727},[220,11026,364],{"class":264},[220,11028,2553],{"class":420},[220,11030,8951],{"class":226},[220,11032,353],{"class":260},[220,11034,10517],{"class":230},[220,11036,6051],{"class":226},[220,11038,353],{"class":260},[220,11040,743],{"class":264},[220,11042,6148],{"class":420},[220,11044,2914],{"class":264},[220,11046,2711],{"class":226},[220,11048,353],{"class":260},[220,11050,743],{"class":264},[220,11052,2629],{"class":420},[220,11054,6151],{"class":264},[220,11056,11057,11059,11061,11064,11066,11068,11070],{"class":222,"line":2664},[220,11058,364],{"class":264},[220,11060,367],{"class":420},[220,11062,11063],{"class":264}," {angle} ",[220,11065,8915],{"class":226},[220,11067,353],{"class":260},[220,11069,10517],{"class":230},[220,11071,386],{"class":264},[220,11073,11074,11076,11078],{"class":222,"line":3459},[220,11075,402],{"class":264},[220,11077,347],{"class":420},[220,11079,359],{"class":264},[212,11081,11083],{"className":468,"code":11082,"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,11084,11085,11095,11105,11109,11117,11141,11145,11151,11155,11163,11197,11231,11257,11265,11269,11277,11309,11333,11341,11345,11349],{"__ignoreMap":178},[220,11086,11087,11089,11091,11093],{"class":222,"line":223},[220,11088,261],{"class":260},[220,11090,2982],{"class":264},[220,11092,268],{"class":260},[220,11094,2987],{"class":230},[220,11096,11097,11099,11101,11103],{"class":222,"line":179},[220,11098,261],{"class":260},[220,11100,10369],{"class":264},[220,11102,268],{"class":260},[220,11104,319],{"class":230},[220,11106,11107],{"class":222,"line":389},[220,11108,647],{"emptyLinePlaceholder":194},[220,11110,11111,11113,11115],{"class":222,"line":399},[220,11112,2641],{"class":260},[220,11114,10605],{"class":226},[220,11116,2647],{"class":264},[220,11118,11119,11121,11123,11125,11127,11129,11131,11133,11135,11137,11139],{"class":222,"line":644},[220,11120,2705],{"class":260},[220,11122,2708],{"class":264},[220,11124,10616],{"class":420},[220,11126,1895],{"class":264},[220,11128,10621],{"class":420},[220,11130,2719],{"class":264},[220,11132,353],{"class":260},[220,11134,3018],{"class":226},[220,11136,2626],{"class":264},[220,11138,8524],{"class":420},[220,11140,2632],{"class":264},[220,11142,11143],{"class":222,"line":650},[220,11144,647],{"emptyLinePlaceholder":194},[220,11146,11147,11149],{"class":222,"line":656},[220,11148,2739],{"class":260},[220,11150,2742],{"class":264},[220,11152,11153],{"class":222,"line":673},[220,11154,10648],{"class":264},[220,11156,11157,11159,11161],{"class":222,"line":682},[220,11158,2813],{"class":264},[220,11160,3334],{"class":346},[220,11162,359],{"class":264},[220,11164,11165,11167,11169,11171,11173,11175,11177,11179,11181,11183,11185,11187,11189,11191,11193,11195],{"class":222,"line":691},[220,11166,10661],{"class":264},[220,11168,10429],{"class":346},[220,11170,10666],{"class":226},[220,11172,353],{"class":260},[220,11174,2759],{"class":264},[220,11176,2762],{"class":260},[220,11178,10675],{"class":226},[220,11180,2626],{"class":264},[220,11182,56],{"class":3558},[220,11184,10682],{"class":260},[220,11186,10685],{"class":264},[220,11188,10688],{"class":260},[220,11190,10691],{"class":420},[220,11192,10694],{"class":264},[220,11194,10429],{"class":346},[220,11196,359],{"class":264},[220,11198,11199,11201,11203,11205,11207,11209,11211,11213,11215,11217,11219,11221,11223,11225,11227,11229],{"class":222,"line":696},[220,11200,10661],{"class":264},[220,11202,10429],{"class":346},[220,11204,10666],{"class":226},[220,11206,353],{"class":260},[220,11208,2759],{"class":264},[220,11210,2762],{"class":260},[220,11212,10675],{"class":226},[220,11214,2626],{"class":264},[220,11216,56],{"class":3558},[220,11218,10682],{"class":260},[220,11220,10685],{"class":264},[220,11222,10725],{"class":260},[220,11224,10691],{"class":420},[220,11226,10730],{"class":264},[220,11228,10429],{"class":346},[220,11230,359],{"class":264},[220,11232,11233,11235,11237,11239,11241,11243,11245,11247,11249,11251,11253,11255],{"class":222,"line":702},[220,11234,10661],{"class":264},[220,11236,10429],{"class":346},[220,11238,10666],{"class":226},[220,11240,353],{"class":260},[220,11242,2759],{"class":264},[220,11244,2762],{"class":260},[220,11246,10675],{"class":226},[220,11248,2626],{"class":264},[220,11250,8524],{"class":420},[220,11252,10757],{"class":264},[220,11254,10429],{"class":346},[220,11256,359],{"class":264},[220,11258,11259,11261,11263],{"class":222,"line":718},[220,11260,10766],{"class":264},[220,11262,3334],{"class":346},[220,11264,359],{"class":264},[220,11266,11267],{"class":222,"line":727},[220,11268,647],{"emptyLinePlaceholder":194},[220,11270,11271,11273,11275],{"class":222,"line":2664},[220,11272,2813],{"class":264},[220,11274,347],{"class":420},[220,11276,359],{"class":264},[220,11278,11279,11281,11283,11285,11287,11289,11291,11293,11295,11297,11299,11301,11303,11305,11307],{"class":222,"line":3459},[220,11280,10661],{"class":264},[220,11282,2553],{"class":420},[220,11284,8951],{"class":226},[220,11286,353],{"class":260},[220,11288,10517],{"class":230},[220,11290,6051],{"class":226},[220,11292,353],{"class":260},[220,11294,743],{"class":264},[220,11296,6148],{"class":420},[220,11298,2914],{"class":264},[220,11300,2711],{"class":226},[220,11302,353],{"class":260},[220,11304,743],{"class":264},[220,11306,2629],{"class":420},[220,11308,6151],{"class":264},[220,11310,11311,11313,11315,11317,11319,11321,11323,11325,11327,11329,11331],{"class":222,"line":9514},[220,11312,10661],{"class":264},[220,11314,367],{"class":420},[220,11316,10384],{"class":226},[220,11318,353],{"class":260},[220,11320,743],{"class":264},[220,11322,10616],{"class":226},[220,11324,3870],{"class":264},[220,11326,8915],{"class":226},[220,11328,353],{"class":260},[220,11330,10517],{"class":230},[220,11332,386],{"class":264},[220,11334,11335,11337,11339],{"class":222,"line":9525},[220,11336,10766],{"class":264},[220,11338,347],{"class":420},[220,11340,359],{"class":264},[220,11342,11343],{"class":222,"line":9530},[220,11344,10848],{"class":264},[220,11346,11347],{"class":222,"line":10851},[220,11348,2837],{"class":264},[220,11350,11351],{"class":222,"line":10856},[220,11352,749],{"class":264},[212,11354,11356],{"className":251,"code":11355,"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,11357,11358,11370,11374,11388,11392,11412,11434,11438,11442,11446,11451,11471,11475,11480],{"__ignoreMap":178},[220,11359,11360,11362,11365,11367],{"class":222,"line":223},[220,11361,261],{"class":260},[220,11363,11364],{"class":264}," { createShader } ",[220,11366,268],{"class":260},[220,11368,11369],{"class":230}," 'shaders\u002Fjs'\n",[220,11371,11372],{"class":222,"line":179},[220,11373,647],{"emptyLinePlaceholder":194},[220,11375,11376,11378,11380,11382,11384,11386],{"class":222,"line":389},[220,11377,1735],{"class":260},[220,11379,1738],{"class":420},[220,11381,1741],{"class":260},[220,11383,1744],{"class":260},[220,11385,1747],{"class":226},[220,11387,1750],{"class":264},[220,11389,11390],{"class":222,"line":399},[220,11391,1765],{"class":264},[220,11393,11394,11396,11398,11400,11402,11404,11406,11408,11410],{"class":222,"line":644},[220,11395,1770],{"class":264},[220,11397,6409],{"class":230},[220,11399,9297],{"class":264},[220,11401,10015],{"class":230},[220,11403,7392],{"class":264},[220,11405,6148],{"class":420},[220,11407,9307],{"class":264},[220,11409,2629],{"class":420},[220,11411,6422],{"class":264},[220,11413,11414,11416,11418,11420,11423,11426,11428,11430,11432],{"class":222,"line":650},[220,11415,1770],{"class":264},[220,11417,2462],{"class":230},[220,11419,9297],{"class":264},[220,11421,11422],{"class":230},"'gradient'",[220,11424,11425],{"class":264},", props: { angle: ",[220,11427,8524],{"class":420},[220,11429,10050],{"class":264},[220,11431,10015],{"class":230},[220,11433,1782],{"class":264},[220,11435,11436],{"class":222,"line":656},[220,11437,1787],{"class":264},[220,11439,11440],{"class":222,"line":673},[220,11441,1792],{"class":264},[220,11443,11444],{"class":222,"line":682},[220,11445,647],{"emptyLinePlaceholder":194},[220,11447,11448],{"class":222,"line":691},[220,11449,11450],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,11452,11453,11456,11459,11461,11463,11466,11468],{"class":222,"line":696},[220,11454,11455],{"class":264},"shader.",[220,11457,11458],{"class":226},"update",[220,11460,2626],{"class":264},[220,11462,11422],{"class":230},[220,11464,11465],{"class":264},", { angle: ",[220,11467,1295],{"class":420},[220,11469,11470],{"class":264}," })\n",[220,11472,11473],{"class":222,"line":702},[220,11474,647],{"emptyLinePlaceholder":194},[220,11476,11477],{"class":222,"line":718},[220,11478,11479],{"class":609},"\u002F\u002F Reset angle\n",[220,11481,11482,11484,11486,11488,11490,11492,11494],{"class":222,"line":727},[220,11483,11455],{"class":264},[220,11485,11458],{"class":226},[220,11487,2626],{"class":264},[220,11489,11422],{"class":230},[220,11491,11465],{"class":264},[220,11493,8524],{"class":420},[220,11495,11470],{"class":264},[15,11497,11498],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[11500,11501],"interactive-shader-demo",{":controls":11502,":preset":11503},"[{\"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,11505,11506],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,11508,11510],{"id":11509},"common-reactive-props","Common Reactive Props",[15,11512,11513],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,11515,11516,1554],{},[159,11517,11518],{},"Position and Size",[212,11520,11524],{"className":11521,"code":11522,"language":11523,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,11525,11526],{"__ignoreMap":178},[220,11527,11528,11530,11532,11534,11537,11539,11542,11545,11547,11549,11551,11553,11555,11558,11560],{"class":222,"line":223},[220,11529,343],{"class":264},[220,11531,2553],{"class":346},[220,11533,2791],{"class":264},[220,11535,11536],{"class":226},"radius",[220,11538,353],{"class":264},[220,11540,11541],{"class":230},"\"",[220,11543,11544],{"class":264},"size",[220,11546,11541],{"class":230},[220,11548,2791],{"class":264},[220,11550,8092],{"class":226},[220,11552,353],{"class":264},[220,11554,11541],{"class":230},[220,11556,11557],{"class":264},"{ x: posX, y: posY }",[220,11559,11541],{"class":230},[220,11561,386],{"class":264},[15,11563,11564,1554],{},[159,11565,11566],{},"Colors",[212,11568,11570],{"className":11521,"code":11569,"language":11523,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,11571,11572],{"__ignoreMap":178},[220,11573,11574,11576,11578,11580,11582,11584,11586,11589,11591,11593,11595,11597,11599,11602,11604],{"class":222,"line":223},[220,11575,343],{"class":264},[220,11577,367],{"class":346},[220,11579,2791],{"class":264},[220,11581,1863],{"class":226},[220,11583,353],{"class":264},[220,11585,11541],{"class":230},[220,11587,11588],{"class":264},"startColor",[220,11590,11541],{"class":230},[220,11592,2791],{"class":264},[220,11594,1867],{"class":226},[220,11596,353],{"class":264},[220,11598,11541],{"class":230},[220,11600,11601],{"class":264},"endColor",[220,11603,11541],{"class":230},[220,11605,386],{"class":264},[15,11607,11608,1554],{},[159,11609,11610],{},"Intensity and Strength",[212,11612,11614],{"className":11521,"code":11613,"language":11523,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,11615,11616,11639],{"__ignoreMap":178},[220,11617,11618,11620,11623,11625,11628,11630,11632,11635,11637],{"class":222,"line":223},[220,11619,343],{"class":264},[220,11621,11622],{"class":346},"Blur",[220,11624,2791],{"class":264},[220,11626,11627],{"class":226},"intensity",[220,11629,353],{"class":264},[220,11631,11541],{"class":230},[220,11633,11634],{"class":264},"blurAmount",[220,11636,11541],{"class":230},[220,11638,386],{"class":264},[220,11640,11641,11643,11646,11648,11651,11653,11655,11658,11660],{"class":222,"line":179},[220,11642,343],{"class":264},[220,11644,11645],{"class":346},"Glow",[220,11647,2791],{"class":264},[220,11649,11650],{"class":226},"strength",[220,11652,353],{"class":264},[220,11654,11541],{"class":230},[220,11656,11657],{"class":264},"glowPower",[220,11659,11541],{"class":230},[220,11661,386],{"class":264},[15,11663,11664,1554],{},[159,11665,11666],{},"Angles and Rotation",[212,11668,11670],{"className":11521,"code":11669,"language":11523,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,11671,11672],{"__ignoreMap":178},[220,11673,11674,11676,11678,11680,11682,11684,11686,11689,11691],{"class":222,"line":223},[220,11675,343],{"class":264},[220,11677,367],{"class":346},[220,11679,2791],{"class":264},[220,11681,10616],{"class":226},[220,11683,353],{"class":264},[220,11685,11541],{"class":230},[220,11687,11688],{"class":264},"rotation",[220,11690,11541],{"class":230},[220,11692,386],{"class":264},[15,11694,11695],{},"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,11697,11699],{"id":11698},"animating-props","Animating Props",[15,11701,11702],{},"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,11704,11705,11708],{},[159,11706,11707],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,11710,11712],{"className":409,"code":11711,"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,11713,11714,11724,11736,11746,11750,11758,11783,11787,11800,11805,11821,11830,11840,11861,11866,11882,11890,11899,11915,11919,11923,11927,11934,11939,11957,11962,11971,12001,12016,12025,12030,12035],{"__ignoreMap":178},[220,11715,11716,11718,11720,11722],{"class":222,"line":223},[220,11717,261],{"class":260},[220,11719,2682],{"class":264},[220,11721,268],{"class":260},[220,11723,2687],{"class":230},[220,11725,11726,11728,11731,11733],{"class":222,"line":179},[220,11727,261],{"class":260},[220,11729,11730],{"class":264}," { animate } ",[220,11732,268],{"class":260},[220,11734,11735],{"class":230}," 'motion'\n",[220,11737,11738,11740,11742,11744],{"class":222,"line":389},[220,11739,261],{"class":260},[220,11741,10369],{"class":264},[220,11743,268],{"class":260},[220,11745,287],{"class":230},[220,11747,11748],{"class":222,"line":399},[220,11749,647],{"emptyLinePlaceholder":194},[220,11751,11752,11754,11756],{"class":222,"line":644},[220,11753,2641],{"class":260},[220,11755,10605],{"class":226},[220,11757,2647],{"class":264},[220,11759,11760,11762,11764,11766,11768,11771,11773,11775,11777,11779,11781],{"class":222,"line":650},[220,11761,2705],{"class":260},[220,11763,2708],{"class":264},[220,11765,11536],{"class":420},[220,11767,1895],{"class":264},[220,11769,11770],{"class":420},"setRadius",[220,11772,2719],{"class":264},[220,11774,353],{"class":260},[220,11776,2724],{"class":226},[220,11778,2626],{"class":264},[220,11780,8087],{"class":420},[220,11782,2632],{"class":264},[220,11784,11785],{"class":222,"line":656},[220,11786,647],{"emptyLinePlaceholder":194},[220,11788,11789,11792,11795,11798],{"class":222,"line":673},[220,11790,11791],{"class":260}," async",[220,11793,11794],{"class":260}," function",[220,11796,11797],{"class":226}," pulse",[220,11799,2647],{"class":264},[220,11801,11802],{"class":222,"line":682},[220,11803,11804],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,11806,11807,11810,11813,11816,11818],{"class":222,"line":691},[220,11808,11809],{"class":260}," await",[220,11811,11812],{"class":226}," animate",[220,11814,11815],{"class":264},"(radius, ",[220,11817,8528],{"class":420},[220,11819,11820],{"class":264},", {\n",[220,11822,11823,11826,11828],{"class":222,"line":696},[220,11824,11825],{"class":264}," duration: ",[220,11827,7605],{"class":420},[220,11829,1760],{"class":264},[220,11831,11832,11835,11838],{"class":222,"line":702},[220,11833,11834],{"class":264}," easing: ",[220,11836,11837],{"class":230},"'ease-out'",[220,11839,1760],{"class":264},[220,11841,11842,11845,11848,11851,11853,11855,11858],{"class":222,"line":718},[220,11843,11844],{"class":226}," onUpdate",[220,11846,11847],{"class":264},": (",[220,11849,11850],{"class":3558},"latest",[220,11852,4066],{"class":264},[220,11854,2762],{"class":260},[220,11856,11857],{"class":226}," setRadius",[220,11859,11860],{"class":264},"(latest)\n",[220,11862,11863],{"class":222,"line":727},[220,11864,11865],{"class":264}," })\n",[220,11867,11868,11870,11872,11874,11876,11878,11880],{"class":222,"line":2664},[220,11869,11809],{"class":260},[220,11871,11812],{"class":226},[220,11873,2626],{"class":264},[220,11875,8528],{"class":420},[220,11877,1895],{"class":264},[220,11879,8087],{"class":420},[220,11881,11820],{"class":264},[220,11883,11884,11886,11888],{"class":222,"line":3459},[220,11885,11825],{"class":264},[220,11887,7605],{"class":420},[220,11889,1760],{"class":264},[220,11891,11892,11894,11897],{"class":222,"line":9514},[220,11893,11834],{"class":264},[220,11895,11896],{"class":230},"'ease-in'",[220,11898,1760],{"class":264},[220,11900,11901,11903,11905,11907,11909,11911,11913],{"class":222,"line":9525},[220,11902,11844],{"class":226},[220,11904,11847],{"class":264},[220,11906,11850],{"class":3558},[220,11908,4066],{"class":264},[220,11910,2762],{"class":260},[220,11912,11857],{"class":226},[220,11914,11860],{"class":264},[220,11916,11917],{"class":222,"line":9530},[220,11918,11865],{"class":264},[220,11920,11921],{"class":222,"line":10851},[220,11922,3192],{"class":264},[220,11924,11925],{"class":222,"line":10856},[220,11926,647],{"emptyLinePlaceholder":194},[220,11928,11930,11932],{"class":222,"line":11929},22,[220,11931,2739],{"class":260},[220,11933,2742],{"class":264},[220,11935,11937],{"class":222,"line":11936},23,[220,11938,10648],{"class":264},[220,11940,11942,11944,11946,11948,11950,11953,11955],{"class":222,"line":11941},24,[220,11943,2813],{"class":264},[220,11945,10429],{"class":346},[220,11947,10666],{"class":226},[220,11949,353],{"class":260},[220,11951,11952],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,11954,10429],{"class":346},[220,11956,359],{"class":264},[220,11958,11960],{"class":222,"line":11959},25,[220,11961,647],{"emptyLinePlaceholder":194},[220,11963,11965,11967,11969],{"class":222,"line":11964},26,[220,11966,2813],{"class":264},[220,11968,347],{"class":420},[220,11970,359],{"class":264},[220,11972,11974,11976,11978,11980,11982,11984,11986,11988,11991,11993,11995,11997,11999],{"class":222,"line":11973},27,[220,11975,10661],{"class":264},[220,11977,2553],{"class":420},[220,11979,8951],{"class":226},[220,11981,353],{"class":260},[220,11983,10517],{"class":230},[220,11985,6051],{"class":226},[220,11987,353],{"class":260},[220,11989,11990],{"class":264},"{radius} ",[220,11992,2711],{"class":226},[220,11994,353],{"class":260},[220,11996,743],{"class":264},[220,11998,2629],{"class":420},[220,12000,6151],{"class":264},[220,12002,12004,12006,12008,12010,12012,12014],{"class":222,"line":12003},28,[220,12005,10661],{"class":264},[220,12007,367],{"class":420},[220,12009,8990],{"class":226},[220,12011,353],{"class":260},[220,12013,10517],{"class":230},[220,12015,386],{"class":264},[220,12017,12019,12021,12023],{"class":222,"line":12018},29,[220,12020,10766],{"class":264},[220,12022,347],{"class":420},[220,12024,359],{"class":264},[220,12026,12028],{"class":222,"line":12027},30,[220,12029,10848],{"class":264},[220,12031,12033],{"class":222,"line":12032},31,[220,12034,2837],{"class":264},[220,12036,12038],{"class":222,"line":12037},32,[220,12039,749],{"class":264},[11500,12041],{":controls":12042,":preset":12043},"[{\"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,12045,12046],{},"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,12048,12050],{"id":12049},"performance-notes","Performance Notes",[15,12052,12053],{},"Reactive props update GPU uniforms directly. This means:",[34,12055,12056,12062,12068],{},[37,12057,12058,12061],{},[159,12059,12060],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,12063,12064,12067],{},[159,12065,12066],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,12069,12070,12073],{},[159,12071,12072],{},"Frame-rate friendly",": Animate as many props as you need",[15,12075,12076],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,12078,12079],{},"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":12081},[12082,12083,12084,12085,12086],{"id":10104,"depth":179,"text":10105},{"id":10331,"depth":179,"text":10332},{"id":11509,"depth":179,"text":11510},{"id":11698,"depth":179,"text":11699},{"id":12049,"depth":179,"text":12050},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":12087},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":12094,"title":1489,"body":12095,"category":188,"description":14865,"exclude":190,"extension":191,"forceFramework":190,"icon":14866,"meta":14867,"navigation":194,"path":1488,"seo":14868,"stem":14869,"__hash__":14870},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":12096,"toc":14849},[12097,12100,12108,12112,12121,12123,12128,12430,12434,12438,12441,12868,12872,12882,13231,13235,13238,13799,13803,13806,14120,14124,14128,14135,14276,14288,14292,14303,14378,14382,14385,14612,14616,14619,14846],[11,12098,1489],{"id":12099},"layout-positioning",[15,12101,1839,12102,12104,12105,12107],{},[99,12103,101],{}," component renders a ",[99,12106,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,12109,12111],{"id":12110},"the-canvas-model","The canvas model",[15,12113,12114,12115,12117,12118,12120],{},"Every ",[99,12116,101],{}," renders exactly one ",[99,12119,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,12122,594],{"id":593},[15,12124,12125,12126,1938],{},"Apply classes or styles directly to the ",[99,12127,101],{},[246,12129,12130,12249,12284,12319,12353],{":tabs":1557},[212,12131,12133],{"className":334,"code":12132,"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,12134,12135,12140,12154,12162,12170,12174,12179,12194,12202,12210,12214,12219,12233,12241],{"__ignoreMap":178},[220,12136,12137],{"class":222,"line":223},[220,12138,12139],{"class":609},"\u003C!-- Tailwind -->\n",[220,12141,12142,12144,12146,12148,12150,12152],{"class":222,"line":179},[220,12143,343],{"class":264},[220,12145,347],{"class":346},[220,12147,350],{"class":226},[220,12149,353],{"class":264},[220,12151,356],{"class":230},[220,12153,359],{"class":264},[220,12155,12156,12158,12160],{"class":222,"line":389},[220,12157,364],{"class":264},[220,12159,367],{"class":346},[220,12161,386],{"class":264},[220,12163,12164,12166,12168],{"class":222,"line":399},[220,12165,402],{"class":264},[220,12167,347],{"class":346},[220,12169,359],{"class":264},[220,12171,12172],{"class":222,"line":644},[220,12173,647],{"emptyLinePlaceholder":194},[220,12175,12176],{"class":222,"line":650},[220,12177,12178],{"class":609},"\u003C!-- CSS class -->\n",[220,12180,12181,12183,12185,12187,12189,12192],{"class":222,"line":656},[220,12182,343],{"class":264},[220,12184,347],{"class":346},[220,12186,350],{"class":226},[220,12188,353],{"class":264},[220,12190,12191],{"class":230},"\"hero-shader\"",[220,12193,359],{"class":264},[220,12195,12196,12198,12200],{"class":222,"line":673},[220,12197,364],{"class":264},[220,12199,367],{"class":346},[220,12201,386],{"class":264},[220,12203,12204,12206,12208],{"class":222,"line":682},[220,12205,402],{"class":264},[220,12207,347],{"class":346},[220,12209,359],{"class":264},[220,12211,12212],{"class":222,"line":691},[220,12213,647],{"emptyLinePlaceholder":194},[220,12215,12216],{"class":222,"line":696},[220,12217,12218],{"class":609},"\u003C!-- Inline -->\n",[220,12220,12221,12223,12225,12227,12229,12231],{"class":222,"line":702},[220,12222,343],{"class":264},[220,12224,347],{"class":346},[220,12226,663],{"class":226},[220,12228,353],{"class":264},[220,12230,668],{"class":230},[220,12232,359],{"class":264},[220,12234,12235,12237,12239],{"class":222,"line":718},[220,12236,364],{"class":264},[220,12238,367],{"class":346},[220,12240,386],{"class":264},[220,12242,12243,12245,12247],{"class":222,"line":727},[220,12244,402],{"class":264},[220,12246,347],{"class":346},[220,12248,359],{"class":264},[212,12250,12252],{"className":409,"code":12251,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12253,12254,12268,12276],{"__ignoreMap":178},[220,12255,12256,12258,12260,12262,12264,12266],{"class":222,"line":223},[220,12257,343],{"class":264},[220,12259,347],{"class":420},[220,12261,423],{"class":226},[220,12263,353],{"class":260},[220,12265,356],{"class":230},[220,12267,359],{"class":264},[220,12269,12270,12272,12274],{"class":222,"line":179},[220,12271,364],{"class":264},[220,12273,367],{"class":420},[220,12275,386],{"class":264},[220,12277,12278,12280,12282],{"class":222,"line":389},[220,12279,402],{"class":264},[220,12281,347],{"class":420},[220,12283,359],{"class":264},[212,12285,12287],{"className":468,"code":12286,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12288,12289,12303,12311],{"__ignoreMap":178},[220,12290,12291,12293,12295,12297,12299,12301],{"class":222,"line":223},[220,12292,343],{"class":264},[220,12294,347],{"class":420},[220,12296,350],{"class":226},[220,12298,353],{"class":260},[220,12300,356],{"class":230},[220,12302,359],{"class":264},[220,12304,12305,12307,12309],{"class":222,"line":179},[220,12306,364],{"class":264},[220,12308,367],{"class":420},[220,12310,386],{"class":264},[220,12312,12313,12315,12317],{"class":222,"line":389},[220,12314,402],{"class":264},[220,12316,347],{"class":420},[220,12318,359],{"class":264},[212,12320,12321],{"className":468,"code":12286,"language":469,"meta":178,"style":178},[99,12322,12323,12337,12345],{"__ignoreMap":178},[220,12324,12325,12327,12329,12331,12333,12335],{"class":222,"line":223},[220,12326,343],{"class":264},[220,12328,347],{"class":420},[220,12330,350],{"class":226},[220,12332,353],{"class":260},[220,12334,356],{"class":230},[220,12336,359],{"class":264},[220,12338,12339,12341,12343],{"class":222,"line":179},[220,12340,364],{"class":264},[220,12342,367],{"class":420},[220,12344,386],{"class":264},[220,12346,12347,12349,12351],{"class":222,"line":389},[220,12348,402],{"class":264},[220,12350,347],{"class":420},[220,12352,359],{"class":264},[212,12354,12356],{"className":251,"code":12355,"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,12357,12358,12363,12385,12395,12405,12409],{"__ignoreMap":178},[220,12359,12360],{"class":222,"line":223},[220,12361,12362],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,12364,12365,12367,12370,12372,12375,12378,12380,12383],{"class":222,"line":179},[220,12366,1735],{"class":260},[220,12368,12369],{"class":420}," canvas",[220,12371,1741],{"class":260},[220,12373,12374],{"class":264}," document.",[220,12376,12377],{"class":226},"getElementById",[220,12379,2626],{"class":264},[220,12381,12382],{"class":230},"'my-shader'",[220,12384,2632],{"class":264},[220,12386,12387,12390,12392],{"class":222,"line":389},[220,12388,12389],{"class":264},"canvas.style.width ",[220,12391,353],{"class":260},[220,12393,12394],{"class":230}," '100%'\n",[220,12396,12397,12400,12402],{"class":222,"line":399},[220,12398,12399],{"class":264},"canvas.style.height ",[220,12401,353],{"class":260},[220,12403,12404],{"class":230}," '400px'\n",[220,12406,12407],{"class":222,"line":644},[220,12408,647],{"emptyLinePlaceholder":194},[220,12410,12411,12413,12415,12417,12419,12421,12424,12427],{"class":222,"line":650},[220,12412,1735],{"class":260},[220,12414,1738],{"class":420},[220,12416,1741],{"class":260},[220,12418,1744],{"class":260},[220,12420,1747],{"class":226},[220,12422,12423],{"class":264},"(canvas, { components: [",[220,12425,12426],{"class":260},"...",[220,12428,12429],{"class":264},"] })\n",[23,12431,12433],{"id":12432},"common-layout-patterns","Common layout patterns",[3198,12435,12437],{"id":12436},"full-page-background","Full-page background",[15,12439,12440],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,12442,12443,12518,12595,12661,12734],{":tabs":1557},[212,12444,12446],{"className":334,"code":12445,"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,12447,12448,12453,12468,12477,12485,12489,12505,12510],{"__ignoreMap":178},[220,12449,12450],{"class":222,"line":223},[220,12451,12452],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,12454,12455,12457,12459,12461,12463,12466],{"class":222,"line":179},[220,12456,343],{"class":264},[220,12458,347],{"class":346},[220,12460,350],{"class":226},[220,12462,353],{"class":264},[220,12464,12465],{"class":230},"\"fixed inset-0 -z-10\"",[220,12467,359],{"class":264},[220,12469,12470,12472,12475],{"class":222,"line":389},[220,12471,364],{"class":264},[220,12473,12474],{"class":346},"Aurora",[220,12476,386],{"class":264},[220,12478,12479,12481,12483],{"class":222,"line":399},[220,12480,402],{"class":264},[220,12482,347],{"class":346},[220,12484,359],{"class":264},[220,12486,12487],{"class":222,"line":644},[220,12488,647],{"emptyLinePlaceholder":194},[220,12490,12491,12493,12496,12498,12500,12503],{"class":222,"line":650},[220,12492,343],{"class":264},[220,12494,12495],{"class":346},"main",[220,12497,350],{"class":226},[220,12499,353],{"class":264},[220,12501,12502],{"class":230},"\"relative z-10\"",[220,12504,359],{"class":264},[220,12506,12507],{"class":222,"line":656},[220,12508,12509],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,12511,12512,12514,12516],{"class":222,"line":673},[220,12513,402],{"class":264},[220,12515,12495],{"class":346},[220,12517,359],{"class":264},[212,12519,12521],{"className":409,"code":12520,"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,12522,12523,12528,12542,12550,12558,12572,12582,12590],{"__ignoreMap":178},[220,12524,12525],{"class":222,"line":223},[220,12526,12527],{"class":264},"\u003C>\n",[220,12529,12530,12532,12534,12536,12538,12540],{"class":222,"line":179},[220,12531,364],{"class":264},[220,12533,347],{"class":420},[220,12535,423],{"class":226},[220,12537,353],{"class":260},[220,12539,12465],{"class":230},[220,12541,359],{"class":264},[220,12543,12544,12546,12548],{"class":222,"line":389},[220,12545,2550],{"class":264},[220,12547,12474],{"class":420},[220,12549,386],{"class":264},[220,12551,12552,12554,12556],{"class":222,"line":399},[220,12553,2567],{"class":264},[220,12555,347],{"class":420},[220,12557,359],{"class":264},[220,12559,12560,12562,12564,12566,12568,12570],{"class":222,"line":644},[220,12561,364],{"class":264},[220,12563,12495],{"class":346},[220,12565,423],{"class":226},[220,12567,353],{"class":260},[220,12569,12502],{"class":230},[220,12571,359],{"class":264},[220,12573,12574,12577,12580],{"class":222,"line":650},[220,12575,12576],{"class":264}," {",[220,12578,12579],{"class":609},"\u002F* Your page content *\u002F",[220,12581,749],{"class":264},[220,12583,12584,12586,12588],{"class":222,"line":656},[220,12585,2567],{"class":264},[220,12587,12495],{"class":346},[220,12589,359],{"class":264},[220,12591,12592],{"class":222,"line":673},[220,12593,12594],{"class":264},"\u003C\u002F>\n",[212,12596,12598],{"className":468,"code":12597,"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,12599,12600,12614,12622,12630,12634,12648,12653],{"__ignoreMap":178},[220,12601,12602,12604,12606,12608,12610,12612],{"class":222,"line":223},[220,12603,343],{"class":264},[220,12605,347],{"class":420},[220,12607,350],{"class":226},[220,12609,353],{"class":260},[220,12611,12465],{"class":230},[220,12613,359],{"class":264},[220,12615,12616,12618,12620],{"class":222,"line":179},[220,12617,364],{"class":264},[220,12619,12474],{"class":420},[220,12621,386],{"class":264},[220,12623,12624,12626,12628],{"class":222,"line":389},[220,12625,402],{"class":264},[220,12627,347],{"class":420},[220,12629,359],{"class":264},[220,12631,12632],{"class":222,"line":399},[220,12633,647],{"emptyLinePlaceholder":194},[220,12635,12636,12638,12640,12642,12644,12646],{"class":222,"line":644},[220,12637,343],{"class":264},[220,12639,12495],{"class":346},[220,12641,350],{"class":226},[220,12643,353],{"class":260},[220,12645,12502],{"class":230},[220,12647,359],{"class":264},[220,12649,12650],{"class":222,"line":650},[220,12651,12652],{"class":264}," \u003C!-- Your page content -->\n",[220,12654,12655,12657,12659],{"class":222,"line":656},[220,12656,402],{"class":264},[220,12658,12495],{"class":346},[220,12660,359],{"class":264},[212,12662,12664],{"className":468,"code":12663,"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,12665,12666,12670,12684,12692,12700,12714,12722,12730],{"__ignoreMap":178},[220,12667,12668],{"class":222,"line":223},[220,12669,12527],{"class":264},[220,12671,12672,12674,12676,12678,12680,12682],{"class":222,"line":179},[220,12673,364],{"class":264},[220,12675,347],{"class":420},[220,12677,350],{"class":226},[220,12679,353],{"class":260},[220,12681,12465],{"class":230},[220,12683,359],{"class":264},[220,12685,12686,12688,12690],{"class":222,"line":389},[220,12687,2550],{"class":264},[220,12689,12474],{"class":420},[220,12691,386],{"class":264},[220,12693,12694,12696,12698],{"class":222,"line":399},[220,12695,2567],{"class":264},[220,12697,347],{"class":420},[220,12699,359],{"class":264},[220,12701,12702,12704,12706,12708,12710,12712],{"class":222,"line":644},[220,12703,364],{"class":264},[220,12705,12495],{"class":346},[220,12707,350],{"class":226},[220,12709,353],{"class":260},[220,12711,12502],{"class":230},[220,12713,359],{"class":264},[220,12715,12716,12718,12720],{"class":222,"line":650},[220,12717,12576],{"class":264},[220,12719,12579],{"class":609},[220,12721,749],{"class":264},[220,12723,12724,12726,12728],{"class":222,"line":656},[220,12725,2567],{"class":264},[220,12727,12495],{"class":346},[220,12729,359],{"class":264},[220,12731,12732],{"class":222,"line":673},[220,12733,12594],{"class":264},[212,12735,12739],{"className":12736,"code":12737,"language":12738,"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,12740,12741,12768,12788,12792,12808,12819,12844,12855,12860],{"__ignoreMap":178},[220,12742,12743,12745,12748,12750,12752,12755,12757,12759,12762,12764,12766],{"class":222,"line":223},[220,12744,343],{"class":264},[220,12746,12747],{"class":346},"canvas",[220,12749,8951],{"class":226},[220,12751,353],{"class":264},[220,12753,12754],{"class":230},"\"bg\"",[220,12756,663],{"class":226},[220,12758,353],{"class":264},[220,12760,12761],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,12763,3741],{"class":264},[220,12765,12747],{"class":346},[220,12767,359],{"class":264},[220,12769,12770,12772,12774,12776,12778,12781,12784,12786],{"class":222,"line":179},[220,12771,343],{"class":264},[220,12773,12495],{"class":346},[220,12775,663],{"class":226},[220,12777,353],{"class":264},[220,12779,12780],{"class":230},"\"position:relative;z-index:10;\"",[220,12782,12783],{"class":264},">Your content\u003C\u002F",[220,12785,12495],{"class":346},[220,12787,359],{"class":264},[220,12789,12790],{"class":222,"line":389},[220,12791,647],{"emptyLinePlaceholder":194},[220,12793,12794,12796,12798,12801,12803,12806],{"class":222,"line":399},[220,12795,343],{"class":264},[220,12797,2590],{"class":346},[220,12799,12800],{"class":226}," type",[220,12802,353],{"class":264},[220,12804,12805],{"class":230},"\"module\"",[220,12807,359],{"class":264},[220,12809,12810,12813,12815,12817],{"class":222,"line":644},[220,12811,12812],{"class":260}," import",[220,12814,11364],{"class":264},[220,12816,268],{"class":260},[220,12818,11369],{"class":230},[220,12820,12821,12823,12825,12827,12829,12831,12834,12836,12838,12841],{"class":222,"line":650},[220,12822,2705],{"class":260},[220,12824,1738],{"class":420},[220,12826,1741],{"class":260},[220,12828,1744],{"class":260},[220,12830,1747],{"class":226},[220,12832,12833],{"class":264},"(document.",[220,12835,12377],{"class":226},[220,12837,2626],{"class":264},[220,12839,12840],{"class":230},"'bg'",[220,12842,12843],{"class":264},"), {\n",[220,12845,12846,12849,12852],{"class":222,"line":656},[220,12847,12848],{"class":264}," components: [{ type: ",[220,12850,12851],{"class":230},"'Aurora'",[220,12853,12854],{"class":264},", props: {} }]\n",[220,12856,12857],{"class":222,"line":673},[220,12858,12859],{"class":264}," })\n",[220,12861,12862,12864,12866],{"class":222,"line":682},[220,12863,402],{"class":264},[220,12865,2590],{"class":346},[220,12867,359],{"class":264},[3198,12869,12871],{"id":12870},"section-background","Section background",[15,12873,12874,12875,1864,12878,12881],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,12876,12877],{},"position: relative",[99,12879,12880],{},"overflow: hidden"," to contain the canvas:",[246,12883,12884,12989,13082,13157],{":tabs":248},[212,12885,12887],{"className":334,"code":12886,"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,12888,12889,12905,12920,12929,12937,12941,12961,12981],{"__ignoreMap":178},[220,12890,12891,12893,12896,12898,12900,12903],{"class":222,"line":223},[220,12892,343],{"class":264},[220,12894,12895],{"class":346},"section",[220,12897,350],{"class":226},[220,12899,353],{"class":264},[220,12901,12902],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,12904,359],{"class":264},[220,12906,12907,12909,12911,12913,12915,12918],{"class":222,"line":179},[220,12908,364],{"class":264},[220,12910,347],{"class":346},[220,12912,350],{"class":226},[220,12914,353],{"class":264},[220,12916,12917],{"class":230},"\"absolute inset-0 -z-10\"",[220,12919,359],{"class":264},[220,12921,12922,12924,12927],{"class":222,"line":389},[220,12923,2550],{"class":264},[220,12925,12926],{"class":346},"Plasma",[220,12928,386],{"class":264},[220,12930,12931,12933,12935],{"class":222,"line":399},[220,12932,2567],{"class":264},[220,12934,347],{"class":346},[220,12936,359],{"class":264},[220,12938,12939],{"class":222,"line":644},[220,12940,647],{"emptyLinePlaceholder":194},[220,12942,12943,12945,12947,12949,12951,12954,12957,12959],{"class":222,"line":650},[220,12944,364],{"class":264},[220,12946,23],{"class":346},[220,12948,350],{"class":226},[220,12950,353],{"class":264},[220,12952,12953],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,12955,12956],{"class":264},">Section Heading\u003C\u002F",[220,12958,23],{"class":346},[220,12960,359],{"class":264},[220,12962,12963,12965,12967,12969,12971,12974,12977,12979],{"class":222,"line":656},[220,12964,364],{"class":264},[220,12966,15],{"class":346},[220,12968,350],{"class":226},[220,12970,353],{"class":264},[220,12972,12973],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,12975,12976],{"class":264},">Content above the shader.\u003C\u002F",[220,12978,15],{"class":346},[220,12980,359],{"class":264},[220,12982,12983,12985,12987],{"class":222,"line":673},[220,12984,402],{"class":264},[220,12986,12895],{"class":346},[220,12988,359],{"class":264},[212,12990,12992],{"className":409,"code":12991,"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,12993,12994,13008,13022,13030,13038,13056,13074],{"__ignoreMap":178},[220,12995,12996,12998,13000,13002,13004,13006],{"class":222,"line":223},[220,12997,343],{"class":264},[220,12999,12895],{"class":346},[220,13001,423],{"class":226},[220,13003,353],{"class":260},[220,13005,12902],{"class":230},[220,13007,359],{"class":264},[220,13009,13010,13012,13014,13016,13018,13020],{"class":222,"line":179},[220,13011,364],{"class":264},[220,13013,347],{"class":420},[220,13015,423],{"class":226},[220,13017,353],{"class":260},[220,13019,12917],{"class":230},[220,13021,359],{"class":264},[220,13023,13024,13026,13028],{"class":222,"line":389},[220,13025,2550],{"class":264},[220,13027,12926],{"class":420},[220,13029,386],{"class":264},[220,13031,13032,13034,13036],{"class":222,"line":399},[220,13033,2567],{"class":264},[220,13035,347],{"class":420},[220,13037,359],{"class":264},[220,13039,13040,13042,13044,13046,13048,13050,13052,13054],{"class":222,"line":644},[220,13041,364],{"class":264},[220,13043,23],{"class":346},[220,13045,423],{"class":226},[220,13047,353],{"class":260},[220,13049,12953],{"class":230},[220,13051,12956],{"class":264},[220,13053,23],{"class":346},[220,13055,359],{"class":264},[220,13057,13058,13060,13062,13064,13066,13068,13070,13072],{"class":222,"line":650},[220,13059,364],{"class":264},[220,13061,15],{"class":346},[220,13063,423],{"class":226},[220,13065,353],{"class":260},[220,13067,12973],{"class":230},[220,13069,12976],{"class":264},[220,13071,15],{"class":346},[220,13073,359],{"class":264},[220,13075,13076,13078,13080],{"class":222,"line":656},[220,13077,402],{"class":264},[220,13079,12895],{"class":346},[220,13081,359],{"class":264},[212,13083,13085],{"className":468,"code":13084,"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,13086,13087,13101,13115,13123,13131,13149],{"__ignoreMap":178},[220,13088,13089,13091,13093,13095,13097,13099],{"class":222,"line":223},[220,13090,343],{"class":264},[220,13092,12895],{"class":346},[220,13094,350],{"class":226},[220,13096,353],{"class":260},[220,13098,12902],{"class":230},[220,13100,359],{"class":264},[220,13102,13103,13105,13107,13109,13111,13113],{"class":222,"line":179},[220,13104,364],{"class":264},[220,13106,347],{"class":420},[220,13108,350],{"class":226},[220,13110,353],{"class":260},[220,13112,12917],{"class":230},[220,13114,359],{"class":264},[220,13116,13117,13119,13121],{"class":222,"line":389},[220,13118,2550],{"class":264},[220,13120,12926],{"class":420},[220,13122,386],{"class":264},[220,13124,13125,13127,13129],{"class":222,"line":399},[220,13126,2567],{"class":264},[220,13128,347],{"class":420},[220,13130,359],{"class":264},[220,13132,13133,13135,13137,13139,13141,13143,13145,13147],{"class":222,"line":644},[220,13134,364],{"class":264},[220,13136,23],{"class":346},[220,13138,350],{"class":226},[220,13140,353],{"class":260},[220,13142,12953],{"class":230},[220,13144,12956],{"class":264},[220,13146,23],{"class":346},[220,13148,359],{"class":264},[220,13150,13151,13153,13155],{"class":222,"line":650},[220,13152,402],{"class":264},[220,13154,12895],{"class":346},[220,13156,359],{"class":264},[212,13158,13159],{"className":468,"code":13084,"language":469,"meta":178,"style":178},[99,13160,13161,13175,13189,13197,13205,13223],{"__ignoreMap":178},[220,13162,13163,13165,13167,13169,13171,13173],{"class":222,"line":223},[220,13164,343],{"class":264},[220,13166,12895],{"class":346},[220,13168,350],{"class":226},[220,13170,353],{"class":260},[220,13172,12902],{"class":230},[220,13174,359],{"class":264},[220,13176,13177,13179,13181,13183,13185,13187],{"class":222,"line":179},[220,13178,364],{"class":264},[220,13180,347],{"class":420},[220,13182,350],{"class":226},[220,13184,353],{"class":260},[220,13186,12917],{"class":230},[220,13188,359],{"class":264},[220,13190,13191,13193,13195],{"class":222,"line":389},[220,13192,2550],{"class":264},[220,13194,12926],{"class":420},[220,13196,386],{"class":264},[220,13198,13199,13201,13203],{"class":222,"line":399},[220,13200,2567],{"class":264},[220,13202,347],{"class":420},[220,13204,359],{"class":264},[220,13206,13207,13209,13211,13213,13215,13217,13219,13221],{"class":222,"line":644},[220,13208,364],{"class":264},[220,13210,23],{"class":346},[220,13212,350],{"class":226},[220,13214,353],{"class":260},[220,13216,12953],{"class":230},[220,13218,12956],{"class":264},[220,13220,23],{"class":346},[220,13222,359],{"class":264},[220,13224,13225,13227,13229],{"class":222,"line":650},[220,13226,402],{"class":264},[220,13228,12895],{"class":346},[220,13230,359],{"class":264},[3198,13232,13234],{"id":13233},"card-with-shader-fill","Card with shader fill",[15,13236,13237],{},"A shader used as the visual background of a card or panel:",[246,13239,13240,13400,13546,13673],{":tabs":248},[212,13241,13243],{"className":334,"code":13242,"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,13244,13245,13260,13275,13290,13313,13321,13325,13330,13344,13364,13384,13392],{"__ignoreMap":178},[220,13246,13247,13249,13251,13253,13255,13258],{"class":222,"line":223},[220,13248,343],{"class":264},[220,13250,3334],{"class":346},[220,13252,350],{"class":226},[220,13254,353],{"class":264},[220,13256,13257],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,13259,359],{"class":264},[220,13261,13262,13264,13266,13268,13270,13273],{"class":222,"line":179},[220,13263,364],{"class":264},[220,13265,347],{"class":346},[220,13267,350],{"class":226},[220,13269,353],{"class":264},[220,13271,13272],{"class":230},"\"absolute inset-0\"",[220,13274,359],{"class":264},[220,13276,13277,13279,13281,13283,13285,13288],{"class":222,"line":389},[220,13278,2550],{"class":264},[220,13280,1585],{"class":346},[220,13282,1588],{"class":226},[220,13284,353],{"class":264},[220,13286,13287],{"class":230},"\"#1e1b4b\"",[220,13289,386],{"class":264},[220,13291,13292,13294,13296,13299,13301,13304,13306,13308,13311],{"class":222,"line":399},[220,13293,2550],{"class":264},[220,13295,11645],{"class":346},[220,13297,13298],{"class":226}," :intensity",[220,13300,353],{"class":264},[220,13302,13303],{"class":230},"\"0.4\"",[220,13305,1588],{"class":226},[220,13307,353],{"class":264},[220,13309,13310],{"class":230},"\"#6366f1\"",[220,13312,386],{"class":264},[220,13314,13315,13317,13319],{"class":222,"line":644},[220,13316,2567],{"class":264},[220,13318,347],{"class":346},[220,13320,359],{"class":264},[220,13322,13323],{"class":222,"line":650},[220,13324,647],{"emptyLinePlaceholder":194},[220,13326,13327],{"class":222,"line":656},[220,13328,13329],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,13331,13332,13334,13336,13338,13340,13342],{"class":222,"line":673},[220,13333,364],{"class":264},[220,13335,3334],{"class":346},[220,13337,350],{"class":226},[220,13339,353],{"class":264},[220,13341,12502],{"class":230},[220,13343,359],{"class":264},[220,13345,13346,13348,13350,13352,13354,13357,13360,13362],{"class":222,"line":682},[220,13347,2550],{"class":264},[220,13349,3198],{"class":346},[220,13351,350],{"class":226},[220,13353,353],{"class":264},[220,13355,13356],{"class":230},"\"text-xl font-semibold\"",[220,13358,13359],{"class":264},">Card Title\u003C\u002F",[220,13361,3198],{"class":346},[220,13363,359],{"class":264},[220,13365,13366,13368,13370,13372,13374,13377,13380,13382],{"class":222,"line":691},[220,13367,2550],{"class":264},[220,13369,15],{"class":346},[220,13371,350],{"class":226},[220,13373,353],{"class":264},[220,13375,13376],{"class":230},"\"text-white\u002F70 mt-2\"",[220,13378,13379],{"class":264},">Card description here.\u003C\u002F",[220,13381,15],{"class":346},[220,13383,359],{"class":264},[220,13385,13386,13388,13390],{"class":222,"line":696},[220,13387,2567],{"class":264},[220,13389,3334],{"class":346},[220,13391,359],{"class":264},[220,13393,13394,13396,13398],{"class":222,"line":702},[220,13395,402],{"class":264},[220,13397,3334],{"class":346},[220,13399,359],{"class":264},[212,13401,13403],{"className":409,"code":13402,"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,13404,13405,13419,13433,13447,13472,13480,13494,13512,13530,13538],{"__ignoreMap":178},[220,13406,13407,13409,13411,13413,13415,13417],{"class":222,"line":223},[220,13408,343],{"class":264},[220,13410,3334],{"class":346},[220,13412,423],{"class":226},[220,13414,353],{"class":260},[220,13416,13257],{"class":230},[220,13418,359],{"class":264},[220,13420,13421,13423,13425,13427,13429,13431],{"class":222,"line":179},[220,13422,364],{"class":264},[220,13424,347],{"class":420},[220,13426,423],{"class":226},[220,13428,353],{"class":260},[220,13430,13272],{"class":230},[220,13432,359],{"class":264},[220,13434,13435,13437,13439,13441,13443,13445],{"class":222,"line":389},[220,13436,2550],{"class":264},[220,13438,1585],{"class":420},[220,13440,1588],{"class":226},[220,13442,353],{"class":260},[220,13444,13287],{"class":230},[220,13446,386],{"class":264},[220,13448,13449,13451,13453,13456,13458,13460,13462,13464,13466,13468,13470],{"class":222,"line":399},[220,13450,2550],{"class":264},[220,13452,11645],{"class":420},[220,13454,13455],{"class":226}," intensity",[220,13457,353],{"class":260},[220,13459,743],{"class":264},[220,13461,8100],{"class":420},[220,13463,2914],{"class":264},[220,13465,7913],{"class":226},[220,13467,353],{"class":260},[220,13469,13310],{"class":230},[220,13471,386],{"class":264},[220,13473,13474,13476,13478],{"class":222,"line":644},[220,13475,2567],{"class":264},[220,13477,347],{"class":420},[220,13479,359],{"class":264},[220,13481,13482,13484,13486,13488,13490,13492],{"class":222,"line":650},[220,13483,364],{"class":264},[220,13485,3334],{"class":346},[220,13487,423],{"class":226},[220,13489,353],{"class":260},[220,13491,12502],{"class":230},[220,13493,359],{"class":264},[220,13495,13496,13498,13500,13502,13504,13506,13508,13510],{"class":222,"line":656},[220,13497,2550],{"class":264},[220,13499,3198],{"class":346},[220,13501,423],{"class":226},[220,13503,353],{"class":260},[220,13505,13356],{"class":230},[220,13507,13359],{"class":264},[220,13509,3198],{"class":346},[220,13511,359],{"class":264},[220,13513,13514,13516,13518,13520,13522,13524,13526,13528],{"class":222,"line":673},[220,13515,2550],{"class":264},[220,13517,15],{"class":346},[220,13519,423],{"class":226},[220,13521,353],{"class":260},[220,13523,13376],{"class":230},[220,13525,13379],{"class":264},[220,13527,15],{"class":346},[220,13529,359],{"class":264},[220,13531,13532,13534,13536],{"class":222,"line":682},[220,13533,2567],{"class":264},[220,13535,3334],{"class":346},[220,13537,359],{"class":264},[220,13539,13540,13542,13544],{"class":222,"line":691},[220,13541,402],{"class":264},[220,13543,3334],{"class":346},[220,13545,359],{"class":264},[212,13547,13549],{"className":468,"code":13548,"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,13550,13551,13565,13579,13593,13617,13625,13639,13657,13665],{"__ignoreMap":178},[220,13552,13553,13555,13557,13559,13561,13563],{"class":222,"line":223},[220,13554,343],{"class":264},[220,13556,3334],{"class":346},[220,13558,350],{"class":226},[220,13560,353],{"class":260},[220,13562,13257],{"class":230},[220,13564,359],{"class":264},[220,13566,13567,13569,13571,13573,13575,13577],{"class":222,"line":179},[220,13568,364],{"class":264},[220,13570,347],{"class":420},[220,13572,350],{"class":226},[220,13574,353],{"class":260},[220,13576,13272],{"class":230},[220,13578,359],{"class":264},[220,13580,13581,13583,13585,13587,13589,13591],{"class":222,"line":389},[220,13582,2550],{"class":264},[220,13584,1585],{"class":420},[220,13586,1588],{"class":226},[220,13588,353],{"class":260},[220,13590,13287],{"class":230},[220,13592,386],{"class":264},[220,13594,13595,13597,13599,13601,13603,13605,13607,13609,13611,13613,13615],{"class":222,"line":399},[220,13596,2550],{"class":264},[220,13598,11645],{"class":420},[220,13600,13455],{"class":226},[220,13602,353],{"class":260},[220,13604,743],{"class":264},[220,13606,8100],{"class":420},[220,13608,2914],{"class":264},[220,13610,7913],{"class":226},[220,13612,353],{"class":260},[220,13614,13310],{"class":230},[220,13616,386],{"class":264},[220,13618,13619,13621,13623],{"class":222,"line":644},[220,13620,2567],{"class":264},[220,13622,347],{"class":420},[220,13624,359],{"class":264},[220,13626,13627,13629,13631,13633,13635,13637],{"class":222,"line":650},[220,13628,364],{"class":264},[220,13630,3334],{"class":346},[220,13632,350],{"class":226},[220,13634,353],{"class":260},[220,13636,12502],{"class":230},[220,13638,359],{"class":264},[220,13640,13641,13643,13645,13647,13649,13651,13653,13655],{"class":222,"line":656},[220,13642,2550],{"class":264},[220,13644,3198],{"class":346},[220,13646,350],{"class":226},[220,13648,353],{"class":260},[220,13650,13356],{"class":230},[220,13652,13359],{"class":264},[220,13654,3198],{"class":346},[220,13656,359],{"class":264},[220,13658,13659,13661,13663],{"class":222,"line":673},[220,13660,2567],{"class":264},[220,13662,3334],{"class":346},[220,13664,359],{"class":264},[220,13666,13667,13669,13671],{"class":222,"line":682},[220,13668,402],{"class":264},[220,13670,3334],{"class":346},[220,13672,359],{"class":264},[212,13674,13675],{"className":468,"code":13548,"language":469,"meta":178,"style":178},[99,13676,13677,13691,13705,13719,13743,13751,13765,13783,13791],{"__ignoreMap":178},[220,13678,13679,13681,13683,13685,13687,13689],{"class":222,"line":223},[220,13680,343],{"class":264},[220,13682,3334],{"class":346},[220,13684,350],{"class":226},[220,13686,353],{"class":260},[220,13688,13257],{"class":230},[220,13690,359],{"class":264},[220,13692,13693,13695,13697,13699,13701,13703],{"class":222,"line":179},[220,13694,364],{"class":264},[220,13696,347],{"class":420},[220,13698,350],{"class":226},[220,13700,353],{"class":260},[220,13702,13272],{"class":230},[220,13704,359],{"class":264},[220,13706,13707,13709,13711,13713,13715,13717],{"class":222,"line":389},[220,13708,2550],{"class":264},[220,13710,1585],{"class":420},[220,13712,1588],{"class":226},[220,13714,353],{"class":260},[220,13716,13287],{"class":230},[220,13718,386],{"class":264},[220,13720,13721,13723,13725,13727,13729,13731,13733,13735,13737,13739,13741],{"class":222,"line":399},[220,13722,2550],{"class":264},[220,13724,11645],{"class":420},[220,13726,13455],{"class":226},[220,13728,353],{"class":260},[220,13730,743],{"class":264},[220,13732,8100],{"class":420},[220,13734,2914],{"class":264},[220,13736,7913],{"class":226},[220,13738,353],{"class":260},[220,13740,13310],{"class":230},[220,13742,386],{"class":264},[220,13744,13745,13747,13749],{"class":222,"line":644},[220,13746,2567],{"class":264},[220,13748,347],{"class":420},[220,13750,359],{"class":264},[220,13752,13753,13755,13757,13759,13761,13763],{"class":222,"line":650},[220,13754,364],{"class":264},[220,13756,3334],{"class":346},[220,13758,350],{"class":226},[220,13760,353],{"class":260},[220,13762,12502],{"class":230},[220,13764,359],{"class":264},[220,13766,13767,13769,13771,13773,13775,13777,13779,13781],{"class":222,"line":656},[220,13768,2550],{"class":264},[220,13770,3198],{"class":346},[220,13772,350],{"class":226},[220,13774,353],{"class":260},[220,13776,13356],{"class":230},[220,13778,13359],{"class":264},[220,13780,3198],{"class":346},[220,13782,359],{"class":264},[220,13784,13785,13787,13789],{"class":222,"line":673},[220,13786,2567],{"class":264},[220,13788,3334],{"class":346},[220,13790,359],{"class":264},[220,13792,13793,13795,13797],{"class":222,"line":682},[220,13794,402],{"class":264},[220,13796,3334],{"class":346},[220,13798,359],{"class":264},[3198,13800,13802],{"id":13801},"inline-content-block","Inline content block",[15,13804,13805],{},"A shader that flows naturally in document layout, like an image or video:",[246,13807,13808,13896,13971,14046],{":tabs":248},[212,13809,13811],{"className":334,"code":13810,"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,13812,13813,13822,13835,13839,13854,13863,13871,13875,13888],{"__ignoreMap":178},[220,13814,13815,13817,13820],{"class":222,"line":223},[220,13816,343],{"class":264},[220,13818,13819],{"class":346},"article",[220,13821,359],{"class":264},[220,13823,13824,13826,13828,13831,13833],{"class":222,"line":179},[220,13825,364],{"class":264},[220,13827,15],{"class":346},[220,13829,13830],{"class":264},">Text before the shader.\u003C\u002F",[220,13832,15],{"class":346},[220,13834,359],{"class":264},[220,13836,13837],{"class":222,"line":389},[220,13838,647],{"emptyLinePlaceholder":194},[220,13840,13841,13843,13845,13847,13849,13852],{"class":222,"line":399},[220,13842,364],{"class":264},[220,13844,347],{"class":346},[220,13846,350],{"class":226},[220,13848,353],{"class":264},[220,13850,13851],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,13853,359],{"class":264},[220,13855,13856,13858,13861],{"class":222,"line":644},[220,13857,2550],{"class":264},[220,13859,13860],{"class":346},"Swirl",[220,13862,386],{"class":264},[220,13864,13865,13867,13869],{"class":222,"line":650},[220,13866,2567],{"class":264},[220,13868,347],{"class":346},[220,13870,359],{"class":264},[220,13872,13873],{"class":222,"line":656},[220,13874,647],{"emptyLinePlaceholder":194},[220,13876,13877,13879,13881,13884,13886],{"class":222,"line":673},[220,13878,364],{"class":264},[220,13880,15],{"class":346},[220,13882,13883],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,13885,15],{"class":346},[220,13887,359],{"class":264},[220,13889,13890,13892,13894],{"class":222,"line":682},[220,13891,402],{"class":264},[220,13893,13819],{"class":346},[220,13895,359],{"class":264},[212,13897,13899],{"className":409,"code":13898,"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,13900,13901,13909,13921,13935,13943,13951,13963],{"__ignoreMap":178},[220,13902,13903,13905,13907],{"class":222,"line":223},[220,13904,343],{"class":264},[220,13906,13819],{"class":346},[220,13908,359],{"class":264},[220,13910,13911,13913,13915,13917,13919],{"class":222,"line":179},[220,13912,364],{"class":264},[220,13914,15],{"class":346},[220,13916,13830],{"class":264},[220,13918,15],{"class":346},[220,13920,359],{"class":264},[220,13922,13923,13925,13927,13929,13931,13933],{"class":222,"line":389},[220,13924,364],{"class":264},[220,13926,347],{"class":420},[220,13928,423],{"class":226},[220,13930,353],{"class":260},[220,13932,13851],{"class":230},[220,13934,359],{"class":264},[220,13936,13937,13939,13941],{"class":222,"line":399},[220,13938,2550],{"class":264},[220,13940,13860],{"class":420},[220,13942,386],{"class":264},[220,13944,13945,13947,13949],{"class":222,"line":644},[220,13946,2567],{"class":264},[220,13948,347],{"class":420},[220,13950,359],{"class":264},[220,13952,13953,13955,13957,13959,13961],{"class":222,"line":650},[220,13954,364],{"class":264},[220,13956,15],{"class":346},[220,13958,13883],{"class":264},[220,13960,15],{"class":346},[220,13962,359],{"class":264},[220,13964,13965,13967,13969],{"class":222,"line":656},[220,13966,402],{"class":264},[220,13968,13819],{"class":346},[220,13970,359],{"class":264},[212,13972,13974],{"className":468,"code":13973,"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,13975,13976,13984,13996,14010,14018,14026,14038],{"__ignoreMap":178},[220,13977,13978,13980,13982],{"class":222,"line":223},[220,13979,343],{"class":264},[220,13981,13819],{"class":346},[220,13983,359],{"class":264},[220,13985,13986,13988,13990,13992,13994],{"class":222,"line":179},[220,13987,364],{"class":264},[220,13989,15],{"class":346},[220,13991,13830],{"class":264},[220,13993,15],{"class":346},[220,13995,359],{"class":264},[220,13997,13998,14000,14002,14004,14006,14008],{"class":222,"line":389},[220,13999,364],{"class":264},[220,14001,347],{"class":420},[220,14003,350],{"class":226},[220,14005,353],{"class":260},[220,14007,13851],{"class":230},[220,14009,359],{"class":264},[220,14011,14012,14014,14016],{"class":222,"line":399},[220,14013,2550],{"class":264},[220,14015,13860],{"class":420},[220,14017,386],{"class":264},[220,14019,14020,14022,14024],{"class":222,"line":644},[220,14021,2567],{"class":264},[220,14023,347],{"class":420},[220,14025,359],{"class":264},[220,14027,14028,14030,14032,14034,14036],{"class":222,"line":650},[220,14029,364],{"class":264},[220,14031,15],{"class":346},[220,14033,13883],{"class":264},[220,14035,15],{"class":346},[220,14037,359],{"class":264},[220,14039,14040,14042,14044],{"class":222,"line":656},[220,14041,402],{"class":264},[220,14043,13819],{"class":346},[220,14045,359],{"class":264},[212,14047,14048],{"className":468,"code":13973,"language":469,"meta":178,"style":178},[99,14049,14050,14058,14070,14084,14092,14100,14112],{"__ignoreMap":178},[220,14051,14052,14054,14056],{"class":222,"line":223},[220,14053,343],{"class":264},[220,14055,13819],{"class":346},[220,14057,359],{"class":264},[220,14059,14060,14062,14064,14066,14068],{"class":222,"line":179},[220,14061,364],{"class":264},[220,14063,15],{"class":346},[220,14065,13830],{"class":264},[220,14067,15],{"class":346},[220,14069,359],{"class":264},[220,14071,14072,14074,14076,14078,14080,14082],{"class":222,"line":389},[220,14073,364],{"class":264},[220,14075,347],{"class":420},[220,14077,350],{"class":226},[220,14079,353],{"class":260},[220,14081,13851],{"class":230},[220,14083,359],{"class":264},[220,14085,14086,14088,14090],{"class":222,"line":399},[220,14087,2550],{"class":264},[220,14089,13860],{"class":420},[220,14091,386],{"class":264},[220,14093,14094,14096,14098],{"class":222,"line":644},[220,14095,2567],{"class":264},[220,14097,347],{"class":420},[220,14099,359],{"class":264},[220,14101,14102,14104,14106,14108,14110],{"class":222,"line":650},[220,14103,364],{"class":264},[220,14105,15],{"class":346},[220,14107,13883],{"class":264},[220,14109,15],{"class":346},[220,14111,359],{"class":264},[220,14113,14114,14116,14118],{"class":222,"line":656},[220,14115,402],{"class":264},[220,14117,13819],{"class":346},[220,14119,359],{"class":264},[23,14121,14123],{"id":14122},"layering-content-over-shaders","Layering content over shaders",[3198,14125,14127],{"id":14126},"pointer-events","Pointer events",[15,14129,14130,14131,14134],{},"Canvases capture all pointer events by default. Add ",[99,14132,14133],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,14136,14137,14173,14208,14242],{":tabs":248},[212,14138,14140],{"className":334,"code":14139,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14141,14142,14157,14165],{"__ignoreMap":178},[220,14143,14144,14146,14148,14150,14152,14155],{"class":222,"line":223},[220,14145,343],{"class":264},[220,14147,347],{"class":346},[220,14149,350],{"class":226},[220,14151,353],{"class":264},[220,14153,14154],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,14156,359],{"class":264},[220,14158,14159,14161,14163],{"class":222,"line":179},[220,14160,364],{"class":264},[220,14162,12474],{"class":346},[220,14164,386],{"class":264},[220,14166,14167,14169,14171],{"class":222,"line":389},[220,14168,402],{"class":264},[220,14170,347],{"class":346},[220,14172,359],{"class":264},[212,14174,14176],{"className":409,"code":14175,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14177,14178,14192,14200],{"__ignoreMap":178},[220,14179,14180,14182,14184,14186,14188,14190],{"class":222,"line":223},[220,14181,343],{"class":264},[220,14183,347],{"class":420},[220,14185,423],{"class":226},[220,14187,353],{"class":260},[220,14189,14154],{"class":230},[220,14191,359],{"class":264},[220,14193,14194,14196,14198],{"class":222,"line":179},[220,14195,364],{"class":264},[220,14197,12474],{"class":420},[220,14199,386],{"class":264},[220,14201,14202,14204,14206],{"class":222,"line":389},[220,14203,402],{"class":264},[220,14205,347],{"class":420},[220,14207,359],{"class":264},[212,14209,14210],{"className":468,"code":14139,"language":469,"meta":178,"style":178},[99,14211,14212,14226,14234],{"__ignoreMap":178},[220,14213,14214,14216,14218,14220,14222,14224],{"class":222,"line":223},[220,14215,343],{"class":264},[220,14217,347],{"class":420},[220,14219,350],{"class":226},[220,14221,353],{"class":260},[220,14223,14154],{"class":230},[220,14225,359],{"class":264},[220,14227,14228,14230,14232],{"class":222,"line":179},[220,14229,364],{"class":264},[220,14231,12474],{"class":420},[220,14233,386],{"class":264},[220,14235,14236,14238,14240],{"class":222,"line":389},[220,14237,402],{"class":264},[220,14239,347],{"class":420},[220,14241,359],{"class":264},[212,14243,14244],{"className":468,"code":14139,"language":469,"meta":178,"style":178},[99,14245,14246,14260,14268],{"__ignoreMap":178},[220,14247,14248,14250,14252,14254,14256,14258],{"class":222,"line":223},[220,14249,343],{"class":264},[220,14251,347],{"class":420},[220,14253,350],{"class":226},[220,14255,353],{"class":260},[220,14257,14154],{"class":230},[220,14259,359],{"class":264},[220,14261,14262,14264,14266],{"class":222,"line":179},[220,14263,364],{"class":264},[220,14265,12474],{"class":420},[220,14267,386],{"class":264},[220,14269,14270,14272,14274],{"class":222,"line":389},[220,14271,402],{"class":264},[220,14273,347],{"class":420},[220,14275,359],{"class":264},[15,14277,14278,14279,1864,14281,14284,14285,14287],{},"Interactive effects like ",[99,14280,394],{},[99,14282,14283],{},"CursorRipples"," still track global mouse position even with ",[99,14286,14133],{}," — they listen on the window rather than the canvas element.",[3198,14289,14291],{"id":14290},"stacking-context-and-z-index","Stacking context and z-index",[15,14293,14294,14297,14298,14300,14301,1554],{},[99,14295,14296],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,14299,12877],{}," (or similar) and a higher ",[99,14302,14296],{},[212,14304,14306],{"className":12736,"code":14305,"language":12738,"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,14307,14308,14323,14328,14346,14351,14370],{"__ignoreMap":178},[220,14309,14310,14312,14314,14316,14318,14321],{"class":222,"line":223},[220,14311,343],{"class":264},[220,14313,3334],{"class":346},[220,14315,350],{"class":226},[220,14317,353],{"class":264},[220,14319,14320],{"class":230},"\"relative\"",[220,14322,359],{"class":264},[220,14324,14325],{"class":222,"line":179},[220,14326,14327],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,14329,14330,14332,14334,14336,14338,14340,14342,14344],{"class":222,"line":389},[220,14331,364],{"class":264},[220,14333,12747],{"class":346},[220,14335,350],{"class":226},[220,14337,353],{"class":264},[220,14339,13272],{"class":230},[220,14341,3741],{"class":264},[220,14343,12747],{"class":346},[220,14345,359],{"class":264},[220,14347,14348],{"class":222,"line":399},[220,14349,14350],{"class":609}," \u003C!-- content above canvas -->\n",[220,14352,14353,14355,14357,14359,14361,14363,14366,14368],{"class":222,"line":644},[220,14354,364],{"class":264},[220,14356,3334],{"class":346},[220,14358,350],{"class":226},[220,14360,353],{"class":264},[220,14362,12502],{"class":230},[220,14364,14365],{"class":264},">I appear above the canvas\u003C\u002F",[220,14367,3334],{"class":346},[220,14369,359],{"class":264},[220,14371,14372,14374,14376],{"class":222,"line":650},[220,14373,402],{"class":264},[220,14375,3334],{"class":346},[220,14377,359],{"class":264},[23,14379,14381],{"id":14380},"responsive-sizing","Responsive sizing",[15,14383,14384],{},"Shaders responds to any CSS-based resize:",[246,14386,14387,14508,14543,14578],{":tabs":248},[212,14388,14390],{"className":334,"code":14389,"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,14391,14392,14397,14412,14420,14428,14432,14437,14452,14460,14468,14472,14477,14492,14500],{"__ignoreMap":178},[220,14393,14394],{"class":222,"line":223},[220,14395,14396],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,14398,14399,14401,14403,14405,14407,14410],{"class":222,"line":179},[220,14400,343],{"class":264},[220,14402,347],{"class":346},[220,14404,350],{"class":226},[220,14406,353],{"class":264},[220,14408,14409],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,14411,359],{"class":264},[220,14413,14414,14416,14418],{"class":222,"line":389},[220,14415,364],{"class":264},[220,14417,367],{"class":346},[220,14419,386],{"class":264},[220,14421,14422,14424,14426],{"class":222,"line":399},[220,14423,402],{"class":264},[220,14425,347],{"class":346},[220,14427,359],{"class":264},[220,14429,14430],{"class":222,"line":644},[220,14431,647],{"emptyLinePlaceholder":194},[220,14433,14434],{"class":222,"line":650},[220,14435,14436],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,14438,14439,14441,14443,14445,14447,14450],{"class":222,"line":656},[220,14440,343],{"class":264},[220,14442,347],{"class":346},[220,14444,350],{"class":226},[220,14446,353],{"class":264},[220,14448,14449],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,14451,359],{"class":264},[220,14453,14454,14456,14458],{"class":222,"line":673},[220,14455,364],{"class":264},[220,14457,13860],{"class":346},[220,14459,386],{"class":264},[220,14461,14462,14464,14466],{"class":222,"line":682},[220,14463,402],{"class":264},[220,14465,347],{"class":346},[220,14467,359],{"class":264},[220,14469,14470],{"class":222,"line":691},[220,14471,647],{"emptyLinePlaceholder":194},[220,14473,14474],{"class":222,"line":696},[220,14475,14476],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,14478,14479,14481,14483,14485,14487,14490],{"class":222,"line":702},[220,14480,343],{"class":264},[220,14482,347],{"class":346},[220,14484,350],{"class":226},[220,14486,353],{"class":264},[220,14488,14489],{"class":230},"\"w-full h-[100dvh]\"",[220,14491,359],{"class":264},[220,14493,14494,14496,14498],{"class":222,"line":718},[220,14495,364],{"class":264},[220,14497,12474],{"class":346},[220,14499,386],{"class":264},[220,14501,14502,14504,14506],{"class":222,"line":727},[220,14503,402],{"class":264},[220,14505,347],{"class":346},[220,14507,359],{"class":264},[212,14509,14511],{"className":409,"code":14510,"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,14512,14513,14527,14535],{"__ignoreMap":178},[220,14514,14515,14517,14519,14521,14523,14525],{"class":222,"line":223},[220,14516,343],{"class":264},[220,14518,347],{"class":420},[220,14520,423],{"class":226},[220,14522,353],{"class":260},[220,14524,14409],{"class":230},[220,14526,359],{"class":264},[220,14528,14529,14531,14533],{"class":222,"line":179},[220,14530,364],{"class":264},[220,14532,367],{"class":420},[220,14534,386],{"class":264},[220,14536,14537,14539,14541],{"class":222,"line":389},[220,14538,402],{"class":264},[220,14540,347],{"class":420},[220,14542,359],{"class":264},[212,14544,14546],{"className":468,"code":14545,"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,14547,14548,14562,14570],{"__ignoreMap":178},[220,14549,14550,14552,14554,14556,14558,14560],{"class":222,"line":223},[220,14551,343],{"class":264},[220,14553,347],{"class":420},[220,14555,350],{"class":226},[220,14557,353],{"class":260},[220,14559,14409],{"class":230},[220,14561,359],{"class":264},[220,14563,14564,14566,14568],{"class":222,"line":179},[220,14565,364],{"class":264},[220,14567,367],{"class":420},[220,14569,386],{"class":264},[220,14571,14572,14574,14576],{"class":222,"line":389},[220,14573,402],{"class":264},[220,14575,347],{"class":420},[220,14577,359],{"class":264},[212,14579,14580],{"className":468,"code":14545,"language":469,"meta":178,"style":178},[99,14581,14582,14596,14604],{"__ignoreMap":178},[220,14583,14584,14586,14588,14590,14592,14594],{"class":222,"line":223},[220,14585,343],{"class":264},[220,14587,347],{"class":420},[220,14589,350],{"class":226},[220,14591,353],{"class":260},[220,14593,14409],{"class":230},[220,14595,359],{"class":264},[220,14597,14598,14600,14602],{"class":222,"line":179},[220,14599,364],{"class":264},[220,14601,367],{"class":420},[220,14603,386],{"class":264},[220,14605,14606,14608,14610],{"class":222,"line":389},[220,14607,402],{"class":264},[220,14609,347],{"class":420},[220,14611,359],{"class":264},[23,14613,14615],{"id":14614},"other-css-properties","Other CSS properties",[15,14617,14618],{},"The canvas element is fully styleable with standard CSS:",[246,14620,14621,14742,14777,14812],{":tabs":248},[212,14622,14624],{"className":334,"code":14623,"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,14625,14626,14631,14646,14654,14662,14666,14671,14686,14694,14702,14706,14711,14726,14734],{"__ignoreMap":178},[220,14627,14628],{"class":222,"line":223},[220,14629,14630],{"class":609},"\u003C!-- Rounded with border -->\n",[220,14632,14633,14635,14637,14639,14641,14644],{"class":222,"line":179},[220,14634,343],{"class":264},[220,14636,347],{"class":346},[220,14638,350],{"class":226},[220,14640,353],{"class":264},[220,14642,14643],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,14645,359],{"class":264},[220,14647,14648,14650,14652],{"class":222,"line":389},[220,14649,364],{"class":264},[220,14651,367],{"class":346},[220,14653,386],{"class":264},[220,14655,14656,14658,14660],{"class":222,"line":399},[220,14657,402],{"class":264},[220,14659,347],{"class":346},[220,14661,359],{"class":264},[220,14663,14664],{"class":222,"line":644},[220,14665,647],{"emptyLinePlaceholder":194},[220,14667,14668],{"class":222,"line":650},[220,14669,14670],{"class":609},"\u003C!-- Drop shadow -->\n",[220,14672,14673,14675,14677,14679,14681,14684],{"class":222,"line":656},[220,14674,343],{"class":264},[220,14676,347],{"class":346},[220,14678,350],{"class":226},[220,14680,353],{"class":264},[220,14682,14683],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,14685,359],{"class":264},[220,14687,14688,14690,14692],{"class":222,"line":673},[220,14689,364],{"class":264},[220,14691,12926],{"class":346},[220,14693,386],{"class":264},[220,14695,14696,14698,14700],{"class":222,"line":682},[220,14697,402],{"class":264},[220,14699,347],{"class":346},[220,14701,359],{"class":264},[220,14703,14704],{"class":222,"line":691},[220,14705,647],{"emptyLinePlaceholder":194},[220,14707,14708],{"class":222,"line":696},[220,14709,14710],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,14712,14713,14715,14717,14719,14721,14724],{"class":222,"line":702},[220,14714,343],{"class":264},[220,14716,347],{"class":346},[220,14718,350],{"class":226},[220,14720,353],{"class":264},[220,14722,14723],{"class":230},"\"blur-sm w-full h-32\"",[220,14725,359],{"class":264},[220,14727,14728,14730,14732],{"class":222,"line":718},[220,14729,364],{"class":264},[220,14731,367],{"class":346},[220,14733,386],{"class":264},[220,14735,14736,14738,14740],{"class":222,"line":727},[220,14737,402],{"class":264},[220,14739,347],{"class":346},[220,14741,359],{"class":264},[212,14743,14745],{"className":409,"code":14744,"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,14746,14747,14761,14769],{"__ignoreMap":178},[220,14748,14749,14751,14753,14755,14757,14759],{"class":222,"line":223},[220,14750,343],{"class":264},[220,14752,347],{"class":420},[220,14754,423],{"class":226},[220,14756,353],{"class":260},[220,14758,14643],{"class":230},[220,14760,359],{"class":264},[220,14762,14763,14765,14767],{"class":222,"line":179},[220,14764,364],{"class":264},[220,14766,367],{"class":420},[220,14768,386],{"class":264},[220,14770,14771,14773,14775],{"class":222,"line":389},[220,14772,402],{"class":264},[220,14774,347],{"class":420},[220,14776,359],{"class":264},[212,14778,14780],{"className":468,"code":14779,"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,14781,14782,14796,14804],{"__ignoreMap":178},[220,14783,14784,14786,14788,14790,14792,14794],{"class":222,"line":223},[220,14785,343],{"class":264},[220,14787,347],{"class":420},[220,14789,350],{"class":226},[220,14791,353],{"class":260},[220,14793,14643],{"class":230},[220,14795,359],{"class":264},[220,14797,14798,14800,14802],{"class":222,"line":179},[220,14799,364],{"class":264},[220,14801,367],{"class":420},[220,14803,386],{"class":264},[220,14805,14806,14808,14810],{"class":222,"line":389},[220,14807,402],{"class":264},[220,14809,347],{"class":420},[220,14811,359],{"class":264},[212,14813,14814],{"className":468,"code":14779,"language":469,"meta":178,"style":178},[99,14815,14816,14830,14838],{"__ignoreMap":178},[220,14817,14818,14820,14822,14824,14826,14828],{"class":222,"line":223},[220,14819,343],{"class":264},[220,14821,347],{"class":420},[220,14823,350],{"class":226},[220,14825,353],{"class":260},[220,14827,14643],{"class":230},[220,14829,359],{"class":264},[220,14831,14832,14834,14836],{"class":222,"line":179},[220,14833,364],{"class":264},[220,14835,367],{"class":420},[220,14837,386],{"class":264},[220,14839,14840,14842,14844],{"class":222,"line":389},[220,14841,402],{"class":264},[220,14843,347],{"class":420},[220,14845,359],{"class":264},[1504,14847,14848],{},"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":14850},[14851,14852,14853,14859,14863,14864],{"id":12110,"depth":179,"text":12111},{"id":593,"depth":179,"text":594},{"id":12432,"depth":179,"text":12433,"children":14854},[14855,14856,14857,14858],{"id":12436,"depth":389,"text":12437},{"id":12870,"depth":389,"text":12871},{"id":13233,"depth":389,"text":13234},{"id":13801,"depth":389,"text":13802},{"id":14122,"depth":179,"text":14123,"children":14860},[14861,14862],{"id":14126,"depth":389,"text":14127},{"id":14290,"depth":389,"text":14291},{"id":14380,"depth":179,"text":14381},{"id":14614,"depth":179,"text":14615},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":14865},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":14872,"title":14873,"body":14874,"category":10084,"description":17146,"exclude":190,"extension":191,"forceFramework":190,"icon":17147,"meta":17148,"navigation":194,"path":17149,"seo":17150,"stem":17151,"__hash__":17152},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":14875,"toc":17135},[14876,14880,14887,14894,15000,15007,15033,15200,15222,15228,15239,15242,15307,15422,15425,15476,15478,15496,15504,15531,15588,15591,15661,15677,15680,15685,15738,15742,15749,15780,15783,15787,16345,16349,16354,17124,17132],[11,14877,14879],{"id":14878},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,14881,14882,14883,14886],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,14884,14885],{},"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,14888,14889,14890,14893],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,14891,14892],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,14895,14897],{"className":334,"code":14896,"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,14898,14899,14904,14924,14928,14933,14941,14955,14960,14965,14970,14975,14980,14985,14992],{"__ignoreMap":178},[220,14900,14901],{"class":222,"line":223},[220,14902,14903],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,14905,14906,14908,14910,14912,14914,14917,14920,14922],{"class":222,"line":179},[220,14907,343],{"class":264},[220,14909,347],{"class":346},[220,14911,350],{"class":226},[220,14913,353],{"class":264},[220,14915,14916],{"class":230},"\"-translate-x-4\"",[220,14918,14919],{"class":264},">...\u003C\u002F",[220,14921,347],{"class":346},[220,14923,359],{"class":264},[220,14925,14926],{"class":222,"line":389},[220,14927,647],{"emptyLinePlaceholder":194},[220,14929,14930],{"class":222,"line":399},[220,14931,14932],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,14934,14935,14937,14939],{"class":222,"line":644},[220,14936,343],{"class":264},[220,14938,347],{"class":346},[220,14940,359],{"class":264},[220,14942,14943,14945,14947,14950,14952],{"class":222,"line":650},[220,14944,364],{"class":264},[220,14946,367],{"class":346},[220,14948,14949],{"class":226}," :bounding-box",[220,14951,353],{"class":264},[220,14953,14954],{"class":230},"\"{\n",[220,14956,14957],{"class":222,"line":656},[220,14958,14959],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,14961,14962],{"class":222,"line":673},[220,14963,14964],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,14966,14967],{"class":222,"line":682},[220,14968,14969],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,14971,14972],{"class":222,"line":691},[220,14973,14974],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,14976,14977],{"class":222,"line":696},[220,14978,14979],{"class":230}," origin: 'top-left',\n",[220,14981,14982],{"class":222,"line":702},[220,14983,14984],{"class":230}," rotation: 0\n",[220,14986,14987,14990],{"class":222,"line":718},[220,14988,14989],{"class":230}," }\"",[220,14991,386],{"class":264},[220,14993,14994,14996,14998],{"class":222,"line":727},[220,14995,402],{"class":264},[220,14997,347],{"class":346},[220,14999,359],{"class":264},[23,15001,1839,15003,15006],{"id":15002},"the-boundingbox-prop",[99,15004,15005],{},"boundingBox"," prop",[15,15008,15009,15010,15012,15013,1895,15016,1895,15019,1895,15022,15025,15026,15029,15030,15032],{},"Every renderable component accepts a ",[99,15011,15005],{}," object. It has four required dimensions — ",[99,15014,15015],{},"x",[99,15017,15018],{},"y",[99,15020,15021],{},"width",[99,15023,15024],{},"height"," — plus an optional ",[99,15027,15028],{},"origin",", a ",[99,15031,11688],{},", and a couple of refinements.",[1794,15034,15035,15050],{},[1797,15036,15037],{},[1800,15038,15039,15042,15045,15048],{},[1803,15040,15041],{},"Field",[1803,15043,15044],{},"Type",[1803,15046,15047],{},"Default",[1803,15049,1808],{},[1810,15051,15052,15072,15089,15104,15119,15147,15165,15181],{},[1800,15053,15054,15058,15063,15066],{},[1815,15055,15056],{},[99,15057,15015],{},[1815,15059,15060],{},[99,15061,15062],{},"{ value, unit }",[1815,15064,15065],{},"—",[1815,15067,15068,15069,15071],{},"Horizontal position of the box's anchor corner, measured in the ",[99,15070,15028],{}," frame",[1800,15073,15074,15078,15082,15084],{},[1815,15075,15076],{},[99,15077,15018],{},[1815,15079,15080],{},[99,15081,15062],{},[1815,15083,15065],{},[1815,15085,15086,15087,15071],{},"Vertical position of the box's anchor corner, measured in the ",[99,15088,15028],{},[1800,15090,15091,15095,15099,15101],{},[1815,15092,15093],{},[99,15094,15021],{},[1815,15096,15097],{},[99,15098,15062],{},[1815,15100,15065],{},[1815,15102,15103],{},"Box width",[1800,15105,15106,15110,15114,15116],{},[1815,15107,15108],{},[99,15109,15024],{},[1815,15111,15112],{},[99,15113,15062],{},[1815,15115,15065],{},[1815,15117,15118],{},"Box height",[1800,15120,15121,15125,15129,15134],{},[1815,15122,15123],{},[99,15124,15028],{},[1815,15126,15127],{},[99,15128,8911],{},[1815,15130,15131],{},[99,15132,15133],{},"'top-left'",[1815,15135,15136,15137,15139,15140,15142,15143],{},"Which reference point ",[99,15138,15015],{}," \u002F ",[99,15141,15018],{}," are measured from — see ",[56,15144,15146],{"href":15145},"#origin","Origin",[1800,15148,15149,15153,15158,15162],{},[1815,15150,15151],{},[99,15152,11688],{},[1815,15154,15155],{},[99,15156,15157],{},"number",[1815,15159,15160],{},[99,15161,8524],{},[1815,15163,15164],{},"Rotation in degrees, around the box's geometric center",[1800,15166,15167,15172,15176,15178],{},[1815,15168,15169],{},[99,15170,15171],{},"cornerRadius",[1815,15173,15174],{},[99,15175,15062],{},[1815,15177,15065],{},[1815,15179,15180],{},"Rounds the corners of the clipped region (filter layers only)",[1800,15182,15183,15188,15193,15197],{},[1815,15184,15185],{},[99,15186,15187],{},"lockAspect",[1815,15189,15190],{},[99,15191,15192],{},"boolean",[1815,15194,15195],{},[99,15196,2629],{},[1815,15198,15199],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,15201,15202,15203,1895,15205,1895,15207,1895,15209,15211,15212,15214,15215,15218,15219,15221],{},"Each of ",[99,15204,15015],{},[99,15206,15018],{},[99,15208,15021],{},[99,15210,15024],{}," (and ",[99,15213,15171],{},") is a ",[159,15216,15217],{},"dimensional value"," — a ",[99,15220,15062],{}," pair, so you can mix relative and absolute units on the same layer.",[15,15223,15224,15225,15227],{},"When no ",[99,15226,15005],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,15229,15231,15232,15235,15236],{"id":15230},"units-uv-vs-px","Units: ",[99,15233,15234],{},"uv"," (%) vs ",[99,15237,15238],{},"px",[15,15240,15241],{},"Each dimension carries its own unit:",[1794,15243,15244,15254],{},[1797,15245,15246],{},[1800,15247,15248,15251],{},[1803,15249,15250],{},"Unit",[1803,15252,15253],{},"Meaning",[1810,15255,15256,15295],{},[1800,15257,15258,15262],{},[1815,15259,15260],{},[99,15261,15234],{},[1815,15263,15264,15265,1895,15268,15270,15271,15273,15274,15276,15277,15279,15280,15276,15282,15284,15285,15287,15288,3443,15291,15294],{},"A ",[159,15266,15267],{},"fraction of the canvas",[99,15269,8524],{},"–",[99,15272,8528],{},". ",[99,15275,15015],{},"\u002F",[99,15278,15021],{}," are fractions of the canvas width; ",[99,15281,15018],{},[99,15283,15024],{}," of the canvas height. ",[99,15286,7605],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,15289,15290],{},"percentage",[99,15292,15293],{},"50%",").",[1800,15296,15297,15301],{},[1815,15298,15299],{},[99,15300,15238],{},[1815,15302,15303,15306],{},[159,15304,15305],{},"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,15308,15310],{"className":334,"code":15309,"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,15311,15312,15317,15330,15335,15340,15345,15350,15355,15360,15367,15371,15376,15388,15393,15398,15403,15408,15412,15416],{"__ignoreMap":178},[220,15313,15314],{"class":222,"line":223},[220,15315,15316],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,15318,15319,15321,15324,15326,15328],{"class":222,"line":179},[220,15320,343],{"class":264},[220,15322,15323],{"class":346},"Glass",[220,15325,14949],{"class":226},[220,15327,353],{"class":264},[220,15329,14954],{"class":230},[220,15331,15332],{"class":222,"line":389},[220,15333,15334],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15336,15337],{"class":222,"line":399},[220,15338,15339],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15341,15342],{"class":222,"line":644},[220,15343,15344],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15346,15347],{"class":222,"line":650},[220,15348,15349],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15351,15352],{"class":222,"line":656},[220,15353,15354],{"class":230}," origin: 'top-left',\n",[220,15356,15357],{"class":222,"line":673},[220,15358,15359],{"class":230}," rotation: 0\n",[220,15361,15362,15365],{"class":222,"line":682},[220,15363,15364],{"class":230},"}\"",[220,15366,386],{"class":264},[220,15368,15369],{"class":222,"line":691},[220,15370,647],{"emptyLinePlaceholder":194},[220,15372,15373],{"class":222,"line":696},[220,15374,15375],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,15377,15378,15380,15382,15384,15386],{"class":222,"line":702},[220,15379,343],{"class":264},[220,15381,15323],{"class":346},[220,15383,14949],{"class":226},[220,15385,353],{"class":264},[220,15387,14954],{"class":230},[220,15389,15390],{"class":222,"line":718},[220,15391,15392],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15394,15395],{"class":222,"line":727},[220,15396,15397],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15399,15400],{"class":222,"line":2664},[220,15401,15402],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,15404,15405],{"class":222,"line":3459},[220,15406,15407],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,15409,15410],{"class":222,"line":9514},[220,15411,15354],{"class":230},[220,15413,15414],{"class":222,"line":9525},[220,15415,15359],{"class":230},[220,15417,15418,15420],{"class":222,"line":9530},[220,15419,15364],{"class":230},[220,15421,386],{"class":264},[15,15423,15424],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,15426,15428],{"className":334,"code":15427,"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,15429,15430,15442,15447,15452,15457,15462,15466,15470],{"__ignoreMap":178},[220,15431,15432,15434,15436,15438,15440],{"class":222,"line":223},[220,15433,343],{"class":264},[220,15435,367],{"class":346},[220,15437,14949],{"class":226},[220,15439,353],{"class":264},[220,15441,14954],{"class":230},[220,15443,15444],{"class":222,"line":179},[220,15445,15446],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,15448,15449],{"class":222,"line":389},[220,15450,15451],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,15453,15454],{"class":222,"line":399},[220,15455,15456],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,15458,15459],{"class":222,"line":644},[220,15460,15461],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,15463,15464],{"class":222,"line":650},[220,15465,15354],{"class":230},[220,15467,15468],{"class":222,"line":656},[220,15469,15359],{"class":230},[220,15471,15472,15474],{"class":222,"line":673},[220,15473,15364],{"class":230},[220,15475,386],{"class":264},[23,15477,15146],{"id":15028},[15,15479,1839,15480,15482,15483,15486,15487,1864,15489,15491,15492,15495],{},[99,15481,15028],{}," is the ",[159,15484,15485],{},"reference point"," that ",[99,15488,15015],{},[99,15490,15018],{}," are measured from — the box's anchor corner ",[1847,15493,15494],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,15497,15502],{"className":15498,"code":15500,"language":15501},[15499],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,15503,15500],{"__ignoreMap":178},[15,15505,15506,15507,15510,15511,15514,15515,15517,15518,1895,15521,15524,15525,15527,15528,15530],{},"The two axes are independent. The horizontal part picks the X reference (",[99,15508,15509],{},"left"," → from the left edge, ",[99,15512,15513],{},"right"," → from the right edge, ",[99,15516,8092],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,15519,15520],{},"top",[99,15522,15523],{},"bottom",", or ",[99,15526,8092],{},"). The bare value ",[99,15529,8092],{}," centers both axes.",[34,15532,15533,15543,15559,15574],{},[37,15534,15535,15537,15538,15276,15540,15542],{},[99,15536,15133],{}," (default) — ",[99,15539,15015],{},[99,15541,15018],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,15544,15545,15548,15549,15551,15552,15555,15556,15558],{},[99,15546,15547],{},"'top-right'"," — ",[99,15550,15015],{}," is measured ",[1847,15553,15554],{},"leftward"," from the right edge; ",[99,15557,15018],{}," downward from the top.",[37,15560,15561,15548,15564,15566,15567,15569,15570,15573],{},[99,15562,15563],{},"'bottom-right'",[99,15565,15015],{}," leftward from the right, ",[99,15568,15018],{}," ",[1847,15571,15572],{},"upward"," from the bottom.",[37,15575,15576,15548,15579,15276,15581,15583,15584,15587],{},[99,15577,15578],{},"'center'",[99,15580,15015],{},[99,15582,15018],{}," are signed offsets from the canvas center (",[99,15585,15586],{},"0, 0"," centers the box).",[15,15589,15590],{},"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,15592,15594],{"className":334,"code":15593,"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,15595,15596,15603,15613,15622,15627,15632,15637,15642,15647,15651,15656],{"__ignoreMap":178},[220,15597,15598,15600],{"class":222,"line":223},[220,15599,343],{"class":264},[220,15601,15602],{"class":346},"ImageTexture\n",[220,15604,15605,15608,15610],{"class":222,"line":179},[220,15606,15607],{"class":226}," url",[220,15609,353],{"class":264},[220,15611,15612],{"class":230},"\"\u002Fbadge.svg\"\n",[220,15614,15615,15618,15620],{"class":222,"line":389},[220,15616,15617],{"class":226}," :bounding-box",[220,15619,353],{"class":264},[220,15621,14954],{"class":230},[220,15623,15624],{"class":222,"line":399},[220,15625,15626],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15628,15629],{"class":222,"line":644},[220,15630,15631],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15633,15634],{"class":222,"line":650},[220,15635,15636],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,15638,15639],{"class":222,"line":656},[220,15640,15641],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,15643,15644],{"class":222,"line":673},[220,15645,15646],{"class":230}," origin: 'top-right',\n",[220,15648,15649],{"class":222,"line":682},[220,15650,14984],{"class":230},[220,15652,15653],{"class":222,"line":691},[220,15654,15655],{"class":230}," }\"\n",[220,15657,15658],{"class":222,"line":696},[220,15659,15660],{"class":264},"\u002F>\n",[15662,15663,15664],"blockquote",{},[15,15665,15666,15569,15669,15671,15672,15276,15674,15676],{},[159,15667,15668],{},"Origin vs. rotation pivot:",[99,15670,15028],{}," only controls where ",[99,15673,15015],{},[99,15675,15018],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,15678,15679],{"id":11688},"Rotation",[15,15681,15682,15684],{},[99,15683,11688],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,15686,15688],{"className":334,"code":15687,"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,15689,15690,15703,15708,15713,15718,15723,15727,15732],{"__ignoreMap":178},[220,15691,15692,15694,15697,15699,15701],{"class":222,"line":223},[220,15693,343],{"class":264},[220,15695,15696],{"class":346},"Stripes",[220,15698,14949],{"class":226},[220,15700,353],{"class":264},[220,15702,14954],{"class":230},[220,15704,15705],{"class":222,"line":179},[220,15706,15707],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,15709,15710],{"class":222,"line":389},[220,15711,15712],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,15714,15715],{"class":222,"line":399},[220,15716,15717],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,15719,15720],{"class":222,"line":644},[220,15721,15722],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,15724,15725],{"class":222,"line":650},[220,15726,15354],{"class":230},[220,15728,15729],{"class":222,"line":656},[220,15730,15731],{"class":230}," rotation: 30\n",[220,15733,15734,15736],{"class":222,"line":673},[220,15735,15364],{"class":230},[220,15737,386],{"class":264},[23,15739,15741],{"id":15740},"how-different-layers-fill-the-box","How different layers fill the box",[15,15743,15744,15745,15748],{},"The box means \"draw this layer here,\" but exactly ",[1847,15746,15747],{},"how"," a layer fills its box depends on the kind of layer:",[34,15750,15751,15761,15767],{},[37,15752,15753,15756,15757,15760],{},[159,15754,15755],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,15758,15759],{},"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,15762,15763,15766],{},[159,15764,15765],{},"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,15768,15769,15772,15773,15776,15777,15779],{},[159,15770,15771],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,15774,15775],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,15778,15171],{}," applies, rounding the clipped region.",[15,15781,15782],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,15784,15786],{"id":15785},"basic-usage-across-frameworks","Basic usage across frameworks",[246,15788,15789,15863,15988,16099,16209],{":tabs":1557},[212,15790,15792],{"className":334,"code":15791,"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,15793,15794,15808,15820,15825,15830,15835,15840,15844,15849,15855],{"__ignoreMap":178},[220,15795,15796,15798,15800,15802,15804,15806],{"class":222,"line":223},[220,15797,343],{"class":264},[220,15799,347],{"class":346},[220,15801,350],{"class":226},[220,15803,353],{"class":264},[220,15805,356],{"class":230},[220,15807,359],{"class":264},[220,15809,15810,15812,15814,15816,15818],{"class":222,"line":179},[220,15811,364],{"class":264},[220,15813,367],{"class":346},[220,15815,14949],{"class":226},[220,15817,353],{"class":264},[220,15819,14954],{"class":230},[220,15821,15822],{"class":222,"line":389},[220,15823,15824],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,15826,15827],{"class":222,"line":399},[220,15828,15829],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,15831,15832],{"class":222,"line":644},[220,15833,15834],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,15836,15837],{"class":222,"line":650},[220,15838,15839],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,15841,15842],{"class":222,"line":656},[220,15843,14979],{"class":230},[220,15845,15846],{"class":222,"line":673},[220,15847,15848],{"class":230}," rotation: 15\n",[220,15850,15851,15853],{"class":222,"line":682},[220,15852,14989],{"class":230},[220,15854,386],{"class":264},[220,15856,15857,15859,15861],{"class":222,"line":691},[220,15858,402],{"class":264},[220,15860,347],{"class":346},[220,15862,359],{"class":264},[212,15864,15866],{"className":409,"code":15865,"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,15867,15868,15882,15888,15898,15915,15928,15941,15954,15963,15971,15976,15980],{"__ignoreMap":178},[220,15869,15870,15872,15874,15876,15878,15880],{"class":222,"line":223},[220,15871,343],{"class":264},[220,15873,347],{"class":420},[220,15875,423],{"class":226},[220,15877,353],{"class":260},[220,15879,356],{"class":230},[220,15881,359],{"class":264},[220,15883,15884,15886],{"class":222,"line":179},[220,15885,364],{"class":264},[220,15887,1189],{"class":420},[220,15889,15890,15893,15895],{"class":222,"line":389},[220,15891,15892],{"class":226}," boundingBox",[220,15894,353],{"class":260},[220,15896,15897],{"class":264},"{{\n",[220,15899,15900,15903,15906,15909,15912],{"class":222,"line":399},[220,15901,15902],{"class":264}," x: { unit: ",[220,15904,15905],{"class":230},"'uv'",[220,15907,15908],{"class":264},", value: ",[220,15910,15911],{"class":420},"0.1",[220,15913,15914],{"class":264}," },\n",[220,15916,15917,15920,15922,15924,15926],{"class":222,"line":644},[220,15918,15919],{"class":264}," y: { unit: ",[220,15921,15905],{"class":230},[220,15923,15908],{"class":264},[220,15925,15911],{"class":420},[220,15927,15914],{"class":264},[220,15929,15930,15933,15935,15937,15939],{"class":222,"line":650},[220,15931,15932],{"class":264}," width: { unit: ",[220,15934,15905],{"class":230},[220,15936,15908],{"class":264},[220,15938,6148],{"class":420},[220,15940,15914],{"class":264},[220,15942,15943,15946,15948,15950,15952],{"class":222,"line":656},[220,15944,15945],{"class":264}," height: { unit: ",[220,15947,15905],{"class":230},[220,15949,15908],{"class":264},[220,15951,6148],{"class":420},[220,15953,15914],{"class":264},[220,15955,15956,15959,15961],{"class":222,"line":673},[220,15957,15958],{"class":264}," origin: ",[220,15960,15133],{"class":230},[220,15962,1760],{"class":264},[220,15964,15965,15968],{"class":222,"line":682},[220,15966,15967],{"class":264}," rotation: ",[220,15969,15970],{"class":420},"15\n",[220,15972,15973],{"class":222,"line":691},[220,15974,15975],{"class":264}," }}\n",[220,15977,15978],{"class":222,"line":696},[220,15979,1234],{"class":264},[220,15981,15982,15984,15986],{"class":222,"line":702},[220,15983,402],{"class":264},[220,15985,347],{"class":420},[220,15987,359],{"class":264},[212,15989,15991],{"className":468,"code":15990,"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,15992,15993,16007,16013,16021,16033,16045,16057,16069,16077,16083,16087,16091],{"__ignoreMap":178},[220,15994,15995,15997,15999,16001,16003,16005],{"class":222,"line":223},[220,15996,343],{"class":264},[220,15998,347],{"class":420},[220,16000,350],{"class":226},[220,16002,353],{"class":260},[220,16004,356],{"class":230},[220,16006,359],{"class":264},[220,16008,16009,16011],{"class":222,"line":179},[220,16010,364],{"class":264},[220,16012,1189],{"class":420},[220,16014,16015,16017,16019],{"class":222,"line":389},[220,16016,15892],{"class":226},[220,16018,353],{"class":260},[220,16020,15897],{"class":264},[220,16022,16023,16025,16027,16029,16031],{"class":222,"line":399},[220,16024,15902],{"class":264},[220,16026,15905],{"class":230},[220,16028,15908],{"class":264},[220,16030,15911],{"class":420},[220,16032,15914],{"class":264},[220,16034,16035,16037,16039,16041,16043],{"class":222,"line":644},[220,16036,15919],{"class":264},[220,16038,15905],{"class":230},[220,16040,15908],{"class":264},[220,16042,15911],{"class":420},[220,16044,15914],{"class":264},[220,16046,16047,16049,16051,16053,16055],{"class":222,"line":650},[220,16048,15932],{"class":264},[220,16050,15905],{"class":230},[220,16052,15908],{"class":264},[220,16054,6148],{"class":420},[220,16056,15914],{"class":264},[220,16058,16059,16061,16063,16065,16067],{"class":222,"line":656},[220,16060,15945],{"class":264},[220,16062,15905],{"class":230},[220,16064,15908],{"class":264},[220,16066,6148],{"class":420},[220,16068,15914],{"class":264},[220,16070,16071,16073,16075],{"class":222,"line":673},[220,16072,15958],{"class":264},[220,16074,15133],{"class":230},[220,16076,1760],{"class":264},[220,16078,16079,16081],{"class":222,"line":682},[220,16080,15967],{"class":264},[220,16082,15970],{"class":420},[220,16084,16085],{"class":222,"line":691},[220,16086,15975],{"class":264},[220,16088,16089],{"class":222,"line":696},[220,16090,1234],{"class":264},[220,16092,16093,16095,16097],{"class":222,"line":702},[220,16094,402],{"class":264},[220,16096,347],{"class":420},[220,16098,359],{"class":264},[212,16100,16101],{"className":468,"code":15990,"language":469,"meta":178,"style":178},[99,16102,16103,16117,16123,16131,16143,16155,16167,16179,16187,16193,16197,16201],{"__ignoreMap":178},[220,16104,16105,16107,16109,16111,16113,16115],{"class":222,"line":223},[220,16106,343],{"class":264},[220,16108,347],{"class":420},[220,16110,350],{"class":226},[220,16112,353],{"class":260},[220,16114,356],{"class":230},[220,16116,359],{"class":264},[220,16118,16119,16121],{"class":222,"line":179},[220,16120,364],{"class":264},[220,16122,1189],{"class":420},[220,16124,16125,16127,16129],{"class":222,"line":389},[220,16126,15892],{"class":226},[220,16128,353],{"class":260},[220,16130,15897],{"class":264},[220,16132,16133,16135,16137,16139,16141],{"class":222,"line":399},[220,16134,15902],{"class":264},[220,16136,15905],{"class":230},[220,16138,15908],{"class":264},[220,16140,15911],{"class":420},[220,16142,15914],{"class":264},[220,16144,16145,16147,16149,16151,16153],{"class":222,"line":644},[220,16146,15919],{"class":264},[220,16148,15905],{"class":230},[220,16150,15908],{"class":264},[220,16152,15911],{"class":420},[220,16154,15914],{"class":264},[220,16156,16157,16159,16161,16163,16165],{"class":222,"line":650},[220,16158,15932],{"class":264},[220,16160,15905],{"class":230},[220,16162,15908],{"class":264},[220,16164,6148],{"class":420},[220,16166,15914],{"class":264},[220,16168,16169,16171,16173,16175,16177],{"class":222,"line":656},[220,16170,15945],{"class":264},[220,16172,15905],{"class":230},[220,16174,15908],{"class":264},[220,16176,6148],{"class":420},[220,16178,15914],{"class":264},[220,16180,16181,16183,16185],{"class":222,"line":673},[220,16182,15958],{"class":264},[220,16184,15133],{"class":230},[220,16186,1760],{"class":264},[220,16188,16189,16191],{"class":222,"line":682},[220,16190,15967],{"class":264},[220,16192,15970],{"class":420},[220,16194,16195],{"class":222,"line":691},[220,16196,15975],{"class":264},[220,16198,16199],{"class":222,"line":696},[220,16200,1234],{"class":264},[220,16202,16203,16205,16207],{"class":222,"line":702},[220,16204,402],{"class":264},[220,16206,347],{"class":420},[220,16208,359],{"class":264},[212,16210,16212],{"className":251,"code":16211,"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,16213,16214,16228,16232,16237,16246,16251,16256,16269,16282,16295,16308,16317,16324,16329,16333,16337,16341],{"__ignoreMap":178},[220,16215,16216,16218,16220,16222,16224,16226],{"class":222,"line":223},[220,16217,1735],{"class":260},[220,16219,1738],{"class":420},[220,16221,1741],{"class":260},[220,16223,1744],{"class":260},[220,16225,1747],{"class":226},[220,16227,1750],{"class":264},[220,16229,16230],{"class":222,"line":179},[220,16231,1765],{"class":264},[220,16233,16234],{"class":222,"line":389},[220,16235,16236],{"class":264}," {\n",[220,16238,16239,16242,16244],{"class":222,"line":399},[220,16240,16241],{"class":264}," type: ",[220,16243,2462],{"class":230},[220,16245,1760],{"class":264},[220,16247,16248],{"class":222,"line":644},[220,16249,16250],{"class":264}," props: {\n",[220,16252,16253],{"class":222,"line":650},[220,16254,16255],{"class":264}," boundingBox: {\n",[220,16257,16258,16261,16263,16265,16267],{"class":222,"line":656},[220,16259,16260],{"class":264}," x: { unit: ",[220,16262,15905],{"class":230},[220,16264,15908],{"class":264},[220,16266,15911],{"class":420},[220,16268,15914],{"class":264},[220,16270,16271,16274,16276,16278,16280],{"class":222,"line":673},[220,16272,16273],{"class":264}," y: { unit: ",[220,16275,15905],{"class":230},[220,16277,15908],{"class":264},[220,16279,15911],{"class":420},[220,16281,15914],{"class":264},[220,16283,16284,16287,16289,16291,16293],{"class":222,"line":682},[220,16285,16286],{"class":264}," width: { unit: ",[220,16288,15905],{"class":230},[220,16290,15908],{"class":264},[220,16292,6148],{"class":420},[220,16294,15914],{"class":264},[220,16296,16297,16300,16302,16304,16306],{"class":222,"line":691},[220,16298,16299],{"class":264}," height: { unit: ",[220,16301,15905],{"class":230},[220,16303,15908],{"class":264},[220,16305,6148],{"class":420},[220,16307,15914],{"class":264},[220,16309,16310,16313,16315],{"class":222,"line":696},[220,16311,16312],{"class":264}," origin: ",[220,16314,15133],{"class":230},[220,16316,1760],{"class":264},[220,16318,16319,16322],{"class":222,"line":702},[220,16320,16321],{"class":264}," rotation: ",[220,16323,15970],{"class":420},[220,16325,16326],{"class":222,"line":718},[220,16327,16328],{"class":264}," }\n",[220,16330,16331],{"class":222,"line":727},[220,16332,4778],{"class":264},[220,16334,16335],{"class":222,"line":2664},[220,16336,4458],{"class":264},[220,16338,16339],{"class":222,"line":3459},[220,16340,1787],{"class":264},[220,16342,16343],{"class":222,"line":9514},[220,16344,1792],{"class":264},[23,16346,16348],{"id":16347},"animating-a-bounding-box","Animating a bounding box",[15,16350,16351,16353],{},[99,16352,15005],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,16355,16357,16609,16911],{":tabs":16356},"[\"Vue\", \"React\", \"JS\"]",[212,16358,16360],{"className":334,"code":16359,"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,16361,16362,16372,16383,16387,16404,16412,16416,16426,16440,16463,16476,16480,16491,16495,16510,16518,16522,16530,16544,16556,16561,16566,16571,16576,16581,16586,16593,16601],{"__ignoreMap":178},[220,16363,16364,16366,16368,16370],{"class":222,"line":223},[220,16365,343],{"class":264},[220,16367,2590],{"class":346},[220,16369,2593],{"class":226},[220,16371,359],{"class":264},[220,16373,16374,16376,16379,16381],{"class":222,"line":179},[220,16375,261],{"class":260},[220,16377,16378],{"class":264}," { ref, onMounted, onUnmounted } ",[220,16380,268],{"class":260},[220,16382,2607],{"class":230},[220,16384,16385],{"class":222,"line":389},[220,16386,647],{"emptyLinePlaceholder":194},[220,16388,16389,16391,16394,16396,16398,16400,16402],{"class":222,"line":399},[220,16390,1735],{"class":260},[220,16392,16393],{"class":420}," rotation",[220,16395,1741],{"class":260},[220,16397,2623],{"class":226},[220,16399,2626],{"class":264},[220,16401,8524],{"class":420},[220,16403,2632],{"class":264},[220,16405,16406,16409],{"class":222,"line":644},[220,16407,16408],{"class":260},"let",[220,16410,16411],{"class":264}," frame\n",[220,16413,16414],{"class":222,"line":650},[220,16415,647],{"emptyLinePlaceholder":194},[220,16417,16418,16420,16422,16424],{"class":222,"line":656},[220,16419,3420],{"class":226},[220,16421,3537],{"class":264},[220,16423,2762],{"class":260},[220,16425,3433],{"class":264},[220,16427,16428,16430,16432,16434,16436,16438],{"class":222,"line":673},[220,16429,2705],{"class":260},[220,16431,11812],{"class":226},[220,16433,1741],{"class":260},[220,16435,3428],{"class":264},[220,16437,2762],{"class":260},[220,16439,3433],{"class":264},[220,16441,16442,16445,16447,16450,16452,16455,16457,16460],{"class":222,"line":682},[220,16443,16444],{"class":264}," rotation.value ",[220,16446,353],{"class":260},[220,16448,16449],{"class":264}," (rotation.value ",[220,16451,10688],{"class":260},[220,16453,16454],{"class":420}," 0.5",[220,16456,4066],{"class":264},[220,16458,16459],{"class":260},"%",[220,16461,16462],{"class":420}," 360\n",[220,16464,16465,16468,16470,16473],{"class":222,"line":691},[220,16466,16467],{"class":264}," frame ",[220,16469,353],{"class":260},[220,16471,16472],{"class":226}," requestAnimationFrame",[220,16474,16475],{"class":264},"(animate)\n",[220,16477,16478],{"class":222,"line":696},[220,16479,3192],{"class":264},[220,16481,16482,16485,16487,16489],{"class":222,"line":702},[220,16483,16484],{"class":264}," frame ",[220,16486,353],{"class":260},[220,16488,16472],{"class":226},[220,16490,16475],{"class":264},[220,16492,16493],{"class":222,"line":718},[220,16494,1792],{"class":264},[220,16496,16497,16500,16502,16504,16507],{"class":222,"line":727},[220,16498,16499],{"class":226},"onUnmounted",[220,16501,3537],{"class":264},[220,16503,2762],{"class":260},[220,16505,16506],{"class":226}," cancelAnimationFrame",[220,16508,16509],{"class":264},"(frame))\n",[220,16511,16512,16514,16516],{"class":222,"line":2664},[220,16513,402],{"class":264},[220,16515,2590],{"class":346},[220,16517,359],{"class":264},[220,16519,16520],{"class":222,"line":3459},[220,16521,647],{"emptyLinePlaceholder":194},[220,16523,16524,16526,16528],{"class":222,"line":9514},[220,16525,343],{"class":264},[220,16527,2519],{"class":346},[220,16529,359],{"class":264},[220,16531,16532,16534,16536,16538,16540,16542],{"class":222,"line":9525},[220,16533,364],{"class":264},[220,16535,347],{"class":346},[220,16537,350],{"class":226},[220,16539,353],{"class":264},[220,16541,356],{"class":230},[220,16543,359],{"class":264},[220,16545,16546,16548,16550,16552,16554],{"class":222,"line":9530},[220,16547,2550],{"class":264},[220,16549,15696],{"class":346},[220,16551,14949],{"class":226},[220,16553,353],{"class":264},[220,16555,14954],{"class":230},[220,16557,16558],{"class":222,"line":10851},[220,16559,16560],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,16562,16563],{"class":222,"line":10856},[220,16564,16565],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,16567,16568],{"class":222,"line":11929},[220,16569,16570],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,16572,16573],{"class":222,"line":11936},[220,16574,16575],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,16577,16578],{"class":222,"line":11941},[220,16579,16580],{"class":230}," origin: 'top-left',\n",[220,16582,16583],{"class":222,"line":11959},[220,16584,16585],{"class":230}," rotation\n",[220,16587,16588,16591],{"class":222,"line":11964},[220,16589,16590],{"class":230}," }\"",[220,16592,386],{"class":264},[220,16594,16595,16597,16599],{"class":222,"line":11973},[220,16596,2567],{"class":264},[220,16598,347],{"class":346},[220,16600,359],{"class":264},[220,16602,16603,16605,16607],{"class":222,"line":12003},[220,16604,402],{"class":264},[220,16606,2519],{"class":346},[220,16608,359],{"class":264},[212,16610,16612],{"className":409,"code":16611,"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,16613,16614,16625,16629,16638,16663,16682,16686,16696,16711,16739,16750,16754,16765,16779,16783,16787,16793,16807,16814,16823,16836,16848,16860,16872,16880,16885,16890,16895,16903,16907],{"__ignoreMap":178},[220,16615,16616,16618,16621,16623],{"class":222,"line":223},[220,16617,261],{"class":260},[220,16619,16620],{"class":264}," { useState, useEffect, useRef } ",[220,16622,268],{"class":260},[220,16624,2687],{"class":230},[220,16626,16627],{"class":222,"line":179},[220,16628,647],{"emptyLinePlaceholder":194},[220,16630,16631,16633,16636],{"class":222,"line":389},[220,16632,2641],{"class":260},[220,16634,16635],{"class":226}," SpinningBox",[220,16637,2647],{"class":264},[220,16639,16640,16642,16644,16646,16648,16651,16653,16655,16657,16659,16661],{"class":222,"line":399},[220,16641,2705],{"class":260},[220,16643,2708],{"class":264},[220,16645,11688],{"class":420},[220,16647,1895],{"class":264},[220,16649,16650],{"class":420},"setRotation",[220,16652,2719],{"class":264},[220,16654,353],{"class":260},[220,16656,2724],{"class":226},[220,16658,2626],{"class":264},[220,16660,8524],{"class":420},[220,16662,2632],{"class":264},[220,16664,16665,16667,16670,16672,16675,16677,16680],{"class":222,"line":644},[220,16666,2705],{"class":260},[220,16668,16669],{"class":420}," frameRef",[220,16671,1741],{"class":260},[220,16673,16674],{"class":226}," useRef",[220,16676,2626],{"class":264},[220,16678,16679],{"class":420},"null",[220,16681,2632],{"class":264},[220,16683,16684],{"class":222,"line":650},[220,16685,647],{"emptyLinePlaceholder":194},[220,16687,16688,16690,16692,16694],{"class":222,"line":656},[220,16689,3534],{"class":226},[220,16691,3537],{"class":264},[220,16693,2762],{"class":260},[220,16695,3433],{"class":264},[220,16697,16698,16701,16703,16705,16707,16709],{"class":222,"line":673},[220,16699,16700],{"class":260}," const",[220,16702,11812],{"class":226},[220,16704,1741],{"class":260},[220,16706,3428],{"class":264},[220,16708,2762],{"class":260},[220,16710,3433],{"class":264},[220,16712,16713,16716,16718,16721,16723,16726,16728,16730,16732,16734,16737],{"class":222,"line":682},[220,16714,16715],{"class":226}," setRotation",[220,16717,2626],{"class":264},[220,16719,16720],{"class":3558},"r",[220,16722,10682],{"class":260},[220,16724,16725],{"class":264}," (r ",[220,16727,10688],{"class":260},[220,16729,16454],{"class":420},[220,16731,4066],{"class":264},[220,16733,16459],{"class":260},[220,16735,16736],{"class":420}," 360",[220,16738,2632],{"class":264},[220,16740,16741,16744,16746,16748],{"class":222,"line":691},[220,16742,16743],{"class":264}," frameRef.current ",[220,16745,353],{"class":260},[220,16747,16472],{"class":226},[220,16749,16475],{"class":264},[220,16751,16752],{"class":222,"line":696},[220,16753,4458],{"class":264},[220,16755,16756,16759,16761,16763],{"class":222,"line":702},[220,16757,16758],{"class":264}," frameRef.current ",[220,16760,353],{"class":260},[220,16762,16472],{"class":226},[220,16764,16475],{"class":264},[220,16766,16767,16770,16772,16774,16776],{"class":222,"line":718},[220,16768,16769],{"class":260}," return",[220,16771,3428],{"class":264},[220,16773,2762],{"class":260},[220,16775,16506],{"class":226},[220,16777,16778],{"class":264},"(frameRef.current)\n",[220,16780,16781],{"class":222,"line":727},[220,16782,3574],{"class":264},[220,16784,16785],{"class":222,"line":2664},[220,16786,647],{"emptyLinePlaceholder":194},[220,16788,16789,16791],{"class":222,"line":3459},[220,16790,2739],{"class":260},[220,16792,2742],{"class":264},[220,16794,16795,16797,16799,16801,16803,16805],{"class":222,"line":9514},[220,16796,2550],{"class":264},[220,16798,347],{"class":420},[220,16800,423],{"class":226},[220,16802,353],{"class":260},[220,16804,356],{"class":230},[220,16806,359],{"class":264},[220,16808,16809,16811],{"class":222,"line":9525},[220,16810,2813],{"class":264},[220,16812,16813],{"class":420},"Stripes\n",[220,16815,16816,16819,16821],{"class":222,"line":9530},[220,16817,16818],{"class":226}," boundingBox",[220,16820,353],{"class":260},[220,16822,15897],{"class":264},[220,16824,16825,16827,16829,16831,16834],{"class":222,"line":10851},[220,16826,16260],{"class":264},[220,16828,15905],{"class":230},[220,16830,15908],{"class":264},[220,16832,16833],{"class":420},"0.2",[220,16835,15914],{"class":264},[220,16837,16838,16840,16842,16844,16846],{"class":222,"line":10856},[220,16839,16273],{"class":264},[220,16841,15905],{"class":230},[220,16843,15908],{"class":264},[220,16845,16833],{"class":420},[220,16847,15914],{"class":264},[220,16849,16850,16852,16854,16856,16858],{"class":222,"line":11929},[220,16851,16286],{"class":264},[220,16853,15905],{"class":230},[220,16855,15908],{"class":264},[220,16857,8087],{"class":420},[220,16859,15914],{"class":264},[220,16861,16862,16864,16866,16868,16870],{"class":222,"line":11936},[220,16863,16299],{"class":264},[220,16865,15905],{"class":230},[220,16867,15908],{"class":264},[220,16869,8087],{"class":420},[220,16871,15914],{"class":264},[220,16873,16874,16876,16878],{"class":222,"line":11941},[220,16875,16312],{"class":264},[220,16877,15133],{"class":230},[220,16879,1760],{"class":264},[220,16881,16882],{"class":222,"line":11959},[220,16883,16884],{"class":264}," rotation\n",[220,16886,16887],{"class":222,"line":11964},[220,16888,16889],{"class":264}," }}\n",[220,16891,16892],{"class":222,"line":11973},[220,16893,16894],{"class":264}," \u002F>\n",[220,16896,16897,16899,16901],{"class":222,"line":12003},[220,16898,2828],{"class":264},[220,16900,347],{"class":420},[220,16902,359],{"class":264},[220,16904,16905],{"class":222,"line":12018},[220,16906,2837],{"class":264},[220,16908,16909],{"class":222,"line":12027},[220,16910,749],{"class":264},[212,16912,16914],{"className":251,"code":16913,"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,16915,16916,16926,16930,16944,16948,16962,16966,16970,16974,16986,17000,17020,17033,17038,17050,17062,17074,17086,17094,17098,17102,17106,17113,17117],{"__ignoreMap":178},[220,16917,16918,16920,16922,16924],{"class":222,"line":223},[220,16919,261],{"class":260},[220,16921,11364],{"class":264},[220,16923,268],{"class":260},[220,16925,11369],{"class":230},[220,16927,16928],{"class":222,"line":179},[220,16929,647],{"emptyLinePlaceholder":194},[220,16931,16932,16934,16936,16938,16940,16942],{"class":222,"line":389},[220,16933,1735],{"class":260},[220,16935,1738],{"class":420},[220,16937,1741],{"class":260},[220,16939,1744],{"class":260},[220,16941,1747],{"class":226},[220,16943,1750],{"class":264},[220,16945,16946],{"class":222,"line":399},[220,16947,1765],{"class":264},[220,16949,16950,16952,16955,16957,16960],{"class":222,"line":644},[220,16951,1770],{"class":264},[220,16953,16954],{"class":230},"'Stripes'",[220,16956,9297],{"class":264},[220,16958,16959],{"class":230},"'bars'",[220,16961,2465],{"class":264},[220,16963,16964],{"class":222,"line":650},[220,16965,1787],{"class":264},[220,16967,16968],{"class":222,"line":656},[220,16969,1792],{"class":264},[220,16971,16972],{"class":222,"line":673},[220,16973,647],{"emptyLinePlaceholder":194},[220,16975,16976,16978,16981,16983],{"class":222,"line":682},[220,16977,16408],{"class":260},[220,16979,16980],{"class":264}," rotation ",[220,16982,353],{"class":260},[220,16984,16985],{"class":420}," 0\n",[220,16987,16988,16990,16992,16994,16996,16998],{"class":222,"line":691},[220,16989,1735],{"class":260},[220,16991,11812],{"class":226},[220,16993,1741],{"class":260},[220,16995,3428],{"class":264},[220,16997,2762],{"class":260},[220,16999,3433],{"class":264},[220,17001,17002,17005,17007,17010,17012,17014,17016,17018],{"class":222,"line":696},[220,17003,17004],{"class":264}," rotation ",[220,17006,353],{"class":260},[220,17008,17009],{"class":264}," (rotation ",[220,17011,10688],{"class":260},[220,17013,16454],{"class":420},[220,17015,4066],{"class":264},[220,17017,16459],{"class":260},[220,17019,16462],{"class":420},[220,17021,17022,17025,17027,17029,17031],{"class":222,"line":702},[220,17023,17024],{"class":264}," shader.",[220,17026,11458],{"class":226},[220,17028,2626],{"class":264},[220,17030,16959],{"class":230},[220,17032,11820],{"class":264},[220,17034,17035],{"class":222,"line":718},[220,17036,17037],{"class":264}," boundingBox: {\n",[220,17039,17040,17042,17044,17046,17048],{"class":222,"line":727},[220,17041,15902],{"class":264},[220,17043,15905],{"class":230},[220,17045,15908],{"class":264},[220,17047,16833],{"class":420},[220,17049,15914],{"class":264},[220,17051,17052,17054,17056,17058,17060],{"class":222,"line":2664},[220,17053,15919],{"class":264},[220,17055,15905],{"class":230},[220,17057,15908],{"class":264},[220,17059,16833],{"class":420},[220,17061,15914],{"class":264},[220,17063,17064,17066,17068,17070,17072],{"class":222,"line":3459},[220,17065,15932],{"class":264},[220,17067,15905],{"class":230},[220,17069,15908],{"class":264},[220,17071,8087],{"class":420},[220,17073,15914],{"class":264},[220,17075,17076,17078,17080,17082,17084],{"class":222,"line":9514},[220,17077,15945],{"class":264},[220,17079,15905],{"class":230},[220,17081,15908],{"class":264},[220,17083,8087],{"class":420},[220,17085,15914],{"class":264},[220,17087,17088,17090,17092],{"class":222,"line":9525},[220,17089,15958],{"class":264},[220,17091,15133],{"class":230},[220,17093,1760],{"class":264},[220,17095,17096],{"class":222,"line":9530},[220,17097,16585],{"class":264},[220,17099,17100],{"class":222,"line":10851},[220,17101,4458],{"class":264},[220,17103,17104],{"class":222,"line":10856},[220,17105,12859],{"class":264},[220,17107,17108,17111],{"class":222,"line":11929},[220,17109,17110],{"class":226}," requestAnimationFrame",[220,17112,16475],{"class":264},[220,17114,17115],{"class":222,"line":11936},[220,17116,749],{"class":264},[220,17118,17119,17122],{"class":222,"line":11941},[220,17120,17121],{"class":226},"requestAnimationFrame",[220,17123,16475],{"class":264},[15,17125,17126,17127,17131],{},"For continuous animation, you can also reach for a ",[56,17128,17130],{"href":17129},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,17133,17134],{},"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":17136},[17137,17139,17141,17142,17143,17144,17145],{"id":15002,"depth":179,"text":17138},"The boundingBox prop",{"id":15230,"depth":179,"text":17140},"Units: uv (%) vs px",{"id":15028,"depth":179,"text":15146},{"id":11688,"depth":179,"text":15679},{"id":15740,"depth":179,"text":15741},{"id":15785,"depth":179,"text":15786},{"id":16347,"depth":179,"text":16348},"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":14873,"description":17146},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":17154,"title":17155,"body":17156,"category":10084,"description":20813,"exclude":190,"extension":191,"forceFramework":190,"icon":20814,"meta":20815,"navigation":194,"path":17129,"seo":20816,"stem":20817,"__hash__":20818},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":17157,"toc":20805},[17158,17161,17164,17167,17216,17219,17222,17755,17758,17763,17892,17904,17907,17922,18390,18393,18397,18594,18606,18638,18641,18644,19126,19129,19133,19264,19269,19272,19275,19281,20004,20007,20011,20152,20157,20161,20164,20644,20648,20655,20803],[11,17159,17155],{"id":17160},"dynamic-props",[15,17162,17163],{},"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,17165,17166],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,17168,17170],{"className":334,"code":17169,"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,17171,17172,17177,17192,17196,17201],{"__ignoreMap":178},[220,17173,17174],{"class":222,"line":223},[220,17175,17176],{"class":609},"\u003C!-- Static value -->\n",[220,17178,17179,17181,17183,17186,17188,17190],{"class":222,"line":179},[220,17180,343],{"class":264},[220,17182,2553],{"class":346},[220,17184,17185],{"class":226}," :radius",[220,17187,353],{"class":264},[220,17189,7532],{"class":230},[220,17191,386],{"class":264},[220,17193,17194],{"class":222,"line":389},[220,17195,647],{"emptyLinePlaceholder":194},[220,17197,17198],{"class":222,"line":399},[220,17199,17200],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,17202,17203,17205,17207,17209,17211,17214],{"class":222,"line":644},[220,17204,343],{"class":264},[220,17206,2553],{"class":346},[220,17208,17185],{"class":226},[220,17210,353],{"class":264},[220,17212,17213],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,17215,386],{"class":264},[23,17217,17218],{"id":17218},"auto-animate",[15,17220,17221],{},"Continuously animates a numeric prop between two values over time.",[246,17223,17224,17314,17424,17527,17629],{":tabs":1557},[212,17225,17227],{"className":334,"code":17226,"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,17228,17229,17243,17249,17258,17267,17272,17277,17282,17287,17292,17297,17302,17306],{"__ignoreMap":178},[220,17230,17231,17233,17235,17237,17239,17241],{"class":222,"line":223},[220,17232,343],{"class":264},[220,17234,347],{"class":346},[220,17236,350],{"class":226},[220,17238,353],{"class":264},[220,17240,356],{"class":230},[220,17242,359],{"class":264},[220,17244,17245,17247],{"class":222,"line":179},[220,17246,364],{"class":264},[220,17248,9482],{"class":346},[220,17250,17251,17253,17255],{"class":222,"line":389},[220,17252,9487],{"class":226},[220,17254,353],{"class":264},[220,17256,17257],{"class":230},"\"#6366f1\"\n",[220,17259,17260,17263,17265],{"class":222,"line":399},[220,17261,17262],{"class":226}," :radius",[220,17264,353],{"class":264},[220,17266,14954],{"class":230},[220,17268,17269],{"class":222,"line":644},[220,17270,17271],{"class":230}," type: 'auto-animate',\n",[220,17273,17274],{"class":222,"line":650},[220,17275,17276],{"class":230}," mode: 'ping-pong',\n",[220,17278,17279],{"class":222,"line":656},[220,17280,17281],{"class":230}," outputMin: 0.2,\n",[220,17283,17284],{"class":222,"line":673},[220,17285,17286],{"class":230}," outputMax: 0.6,\n",[220,17288,17289],{"class":222,"line":682},[220,17290,17291],{"class":230}," speed: 0.8,\n",[220,17293,17294],{"class":222,"line":691},[220,17295,17296],{"class":230}," easing: 'sine'\n",[220,17298,17299],{"class":222,"line":696},[220,17300,17301],{"class":230}," }\"\n",[220,17303,17304],{"class":222,"line":702},[220,17305,1234],{"class":264},[220,17307,17308,17310,17312],{"class":222,"line":718},[220,17309,402],{"class":264},[220,17311,347],{"class":346},[220,17313,359],{"class":264},[212,17315,17317],{"className":409,"code":17316,"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,17318,17319,17333,17339,17347,17355,17364,17374,17383,17392,17401,17408,17412,17416],{"__ignoreMap":178},[220,17320,17321,17323,17325,17327,17329,17331],{"class":222,"line":223},[220,17322,343],{"class":264},[220,17324,347],{"class":420},[220,17326,423],{"class":226},[220,17328,353],{"class":260},[220,17330,356],{"class":230},[220,17332,359],{"class":264},[220,17334,17335,17337],{"class":222,"line":179},[220,17336,364],{"class":264},[220,17338,9482],{"class":420},[220,17340,17341,17343,17345],{"class":222,"line":389},[220,17342,9487],{"class":226},[220,17344,353],{"class":260},[220,17346,17257],{"class":230},[220,17348,17349,17351,17353],{"class":222,"line":399},[220,17350,9497],{"class":226},[220,17352,353],{"class":260},[220,17354,15897],{"class":264},[220,17356,17357,17359,17362],{"class":222,"line":644},[220,17358,16241],{"class":264},[220,17360,17361],{"class":230},"'auto-animate'",[220,17363,1760],{"class":264},[220,17365,17366,17369,17372],{"class":222,"line":650},[220,17367,17368],{"class":264}," mode: ",[220,17370,17371],{"class":230},"'ping-pong'",[220,17373,1760],{"class":264},[220,17375,17376,17379,17381],{"class":222,"line":656},[220,17377,17378],{"class":264}," outputMin: ",[220,17380,16833],{"class":420},[220,17382,1760],{"class":264},[220,17384,17385,17388,17390],{"class":222,"line":673},[220,17386,17387],{"class":264}," outputMax: ",[220,17389,8087],{"class":420},[220,17391,1760],{"class":264},[220,17393,17394,17397,17399],{"class":222,"line":682},[220,17395,17396],{"class":264}," speed: ",[220,17398,6148],{"class":420},[220,17400,1760],{"class":264},[220,17402,17403,17405],{"class":222,"line":691},[220,17404,11834],{"class":264},[220,17406,17407],{"class":230},"'sine'\n",[220,17409,17410],{"class":222,"line":696},[220,17411,15975],{"class":264},[220,17413,17414],{"class":222,"line":702},[220,17415,1234],{"class":264},[220,17417,17418,17420,17422],{"class":222,"line":718},[220,17419,402],{"class":264},[220,17421,347],{"class":420},[220,17423,359],{"class":264},[212,17425,17427],{"className":468,"code":17426,"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,17428,17429,17443,17449,17457,17465,17473,17481,17489,17497,17505,17511,17515,17519],{"__ignoreMap":178},[220,17430,17431,17433,17435,17437,17439,17441],{"class":222,"line":223},[220,17432,343],{"class":264},[220,17434,347],{"class":420},[220,17436,350],{"class":226},[220,17438,353],{"class":260},[220,17440,356],{"class":230},[220,17442,359],{"class":264},[220,17444,17445,17447],{"class":222,"line":179},[220,17446,364],{"class":264},[220,17448,9482],{"class":420},[220,17450,17451,17453,17455],{"class":222,"line":389},[220,17452,9487],{"class":226},[220,17454,353],{"class":260},[220,17456,17257],{"class":230},[220,17458,17459,17461,17463],{"class":222,"line":399},[220,17460,9497],{"class":226},[220,17462,353],{"class":260},[220,17464,15897],{"class":264},[220,17466,17467,17469,17471],{"class":222,"line":644},[220,17468,16241],{"class":264},[220,17470,17361],{"class":230},[220,17472,1760],{"class":264},[220,17474,17475,17477,17479],{"class":222,"line":650},[220,17476,17368],{"class":264},[220,17478,17371],{"class":230},[220,17480,1760],{"class":264},[220,17482,17483,17485,17487],{"class":222,"line":656},[220,17484,17378],{"class":264},[220,17486,16833],{"class":420},[220,17488,1760],{"class":264},[220,17490,17491,17493,17495],{"class":222,"line":673},[220,17492,17387],{"class":264},[220,17494,8087],{"class":420},[220,17496,1760],{"class":264},[220,17498,17499,17501,17503],{"class":222,"line":682},[220,17500,17396],{"class":264},[220,17502,6148],{"class":420},[220,17504,1760],{"class":264},[220,17506,17507,17509],{"class":222,"line":691},[220,17508,11834],{"class":264},[220,17510,17407],{"class":230},[220,17512,17513],{"class":222,"line":696},[220,17514,15975],{"class":264},[220,17516,17517],{"class":222,"line":702},[220,17518,1234],{"class":264},[220,17520,17521,17523,17525],{"class":222,"line":718},[220,17522,402],{"class":264},[220,17524,347],{"class":420},[220,17526,359],{"class":264},[212,17528,17529],{"className":468,"code":17426,"language":469,"meta":178,"style":178},[99,17530,17531,17545,17551,17559,17567,17575,17583,17591,17599,17607,17613,17617,17621],{"__ignoreMap":178},[220,17532,17533,17535,17537,17539,17541,17543],{"class":222,"line":223},[220,17534,343],{"class":264},[220,17536,347],{"class":420},[220,17538,350],{"class":226},[220,17540,353],{"class":260},[220,17542,356],{"class":230},[220,17544,359],{"class":264},[220,17546,17547,17549],{"class":222,"line":179},[220,17548,364],{"class":264},[220,17550,9482],{"class":420},[220,17552,17553,17555,17557],{"class":222,"line":389},[220,17554,9487],{"class":226},[220,17556,353],{"class":260},[220,17558,17257],{"class":230},[220,17560,17561,17563,17565],{"class":222,"line":399},[220,17562,9497],{"class":226},[220,17564,353],{"class":260},[220,17566,15897],{"class":264},[220,17568,17569,17571,17573],{"class":222,"line":644},[220,17570,16241],{"class":264},[220,17572,17361],{"class":230},[220,17574,1760],{"class":264},[220,17576,17577,17579,17581],{"class":222,"line":650},[220,17578,17368],{"class":264},[220,17580,17371],{"class":230},[220,17582,1760],{"class":264},[220,17584,17585,17587,17589],{"class":222,"line":656},[220,17586,17378],{"class":264},[220,17588,16833],{"class":420},[220,17590,1760],{"class":264},[220,17592,17593,17595,17597],{"class":222,"line":673},[220,17594,17387],{"class":264},[220,17596,8087],{"class":420},[220,17598,1760],{"class":264},[220,17600,17601,17603,17605],{"class":222,"line":682},[220,17602,17396],{"class":264},[220,17604,6148],{"class":420},[220,17606,1760],{"class":264},[220,17608,17609,17611],{"class":222,"line":691},[220,17610,11834],{"class":264},[220,17612,17407],{"class":230},[220,17614,17615],{"class":222,"line":696},[220,17616,15975],{"class":264},[220,17618,17619],{"class":222,"line":702},[220,17620,1234],{"class":264},[220,17622,17623,17625,17627],{"class":222,"line":718},[220,17624,402],{"class":264},[220,17626,347],{"class":420},[220,17628,359],{"class":264},[212,17630,17632],{"className":251,"code":17631,"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,17633,17634,17648,17652,17656,17664,17668,17678,17683,17692,17701,17710,17719,17728,17735,17739,17743,17747,17751],{"__ignoreMap":178},[220,17635,17636,17638,17640,17642,17644,17646],{"class":222,"line":223},[220,17637,1735],{"class":260},[220,17639,1738],{"class":420},[220,17641,1741],{"class":260},[220,17643,1744],{"class":260},[220,17645,1747],{"class":226},[220,17647,1750],{"class":264},[220,17649,17650],{"class":222,"line":179},[220,17651,1765],{"class":264},[220,17653,17654],{"class":222,"line":389},[220,17655,16236],{"class":264},[220,17657,17658,17660,17662],{"class":222,"line":399},[220,17659,16241],{"class":264},[220,17661,6409],{"class":230},[220,17663,1760],{"class":264},[220,17665,17666],{"class":222,"line":644},[220,17667,16250],{"class":264},[220,17669,17670,17673,17676],{"class":222,"line":650},[220,17671,17672],{"class":264}," color: ",[220,17674,17675],{"class":230},"'#6366f1'",[220,17677,1760],{"class":264},[220,17679,17680],{"class":222,"line":656},[220,17681,17682],{"class":264}," radius: {\n",[220,17684,17685,17688,17690],{"class":222,"line":673},[220,17686,17687],{"class":264}," type: ",[220,17689,17361],{"class":230},[220,17691,1760],{"class":264},[220,17693,17694,17697,17699],{"class":222,"line":682},[220,17695,17696],{"class":264}," mode: ",[220,17698,17371],{"class":230},[220,17700,1760],{"class":264},[220,17702,17703,17706,17708],{"class":222,"line":691},[220,17704,17705],{"class":264}," outputMin: ",[220,17707,16833],{"class":420},[220,17709,1760],{"class":264},[220,17711,17712,17715,17717],{"class":222,"line":696},[220,17713,17714],{"class":264}," outputMax: ",[220,17716,8087],{"class":420},[220,17718,1760],{"class":264},[220,17720,17721,17724,17726],{"class":222,"line":702},[220,17722,17723],{"class":264}," speed: ",[220,17725,6148],{"class":420},[220,17727,1760],{"class":264},[220,17729,17730,17733],{"class":222,"line":718},[220,17731,17732],{"class":264}," easing: ",[220,17734,17407],{"class":230},[220,17736,17737],{"class":222,"line":727},[220,17738,16328],{"class":264},[220,17740,17741],{"class":222,"line":2664},[220,17742,4778],{"class":264},[220,17744,17745],{"class":222,"line":3459},[220,17746,4458],{"class":264},[220,17748,17749],{"class":222,"line":9514},[220,17750,1787],{"class":264},[220,17752,17753],{"class":222,"line":9525},[220,17754,1792],{"class":264},[19,17756],{":preset":17757},"{\"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,17759,17760],{},[159,17761,17762],{},"Properties:",[1794,17764,17765,17778],{},[1797,17766,17767],{},[1800,17768,17769,17772,17774,17776],{},[1803,17770,17771],{},"Prop",[1803,17773,15044],{},[1803,17775,15047],{},[1803,17777,1808],{},[1810,17779,17780,17805,17821,17837,17856],{},[1800,17781,17782,17787,17792,17795],{},[1815,17783,17784],{},[99,17785,17786],{},"mode",[1815,17788,17789],{},[99,17790,17791],{},"'ping-pong' | 'loop'",[1815,17793,17794],{},"required",[1815,17796,17797,17800,17801,17804],{},[99,17798,17799],{},"ping-pong"," oscillates between min and max. ",[99,17802,17803],{},"loop"," advances from min to max then wraps.",[1800,17806,17807,17812,17816,17818],{},[1815,17808,17809],{},[99,17810,17811],{},"outputMin",[1815,17813,17814],{},[99,17815,15157],{},[1815,17817,17794],{},[1815,17819,17820],{},"Value at the start\u002Fbottom of the range.",[1800,17822,17823,17828,17832,17834],{},[1815,17824,17825],{},[99,17826,17827],{},"outputMax",[1815,17829,17830],{},[99,17831,15157],{},[1815,17833,17794],{},[1815,17835,17836],{},"Value at the end\u002Ftop of the range.",[1800,17838,17839,17844,17848,17853],{},[1815,17840,17841],{},[99,17842,17843],{},"speed",[1815,17845,17846],{},[99,17847,15157],{},[1815,17849,17850],{},[99,17851,17852],{},"1.0",[1815,17854,17855],{},"Cycles per second. Negative values reverse the loop direction.",[1800,17857,17858,17863,17867,17872],{},[1815,17859,17860],{},[99,17861,17862],{},"easing",[1815,17864,17865],{},[99,17866,8911],{},[1815,17868,17869],{},[99,17870,17871],{},"'sine'",[1815,17873,17874,17875,17877,17878,1895,17881,1895,17883,1895,17886,1895,17889,4685],{},"Easing curve for ",[99,17876,17799],{}," mode. Options: ",[99,17879,17880],{},"sine",[99,17882,1894],{},[99,17884,17885],{},"quad",[99,17887,17888],{},"expo",[99,17890,17891],{},"bounce",[15,17893,17894,17897,17898,17900,17901,4685],{},[159,17895,17896],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,17899,17803],{}," mode and ",[99,17902,17903],{},"outputMin: 0, outputMax: 360",[23,17905,17906],{"id":17906},"mouse-position",[15,17908,17909,17910,17913,17914,1895,17916,15524,17919,4685],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,17911,17912],{},"{ x, y }"," coordinates, such as ",[99,17915,8092],{},[99,17917,17918],{},"position",[99,17920,17921],{},"offset",[246,17923,17924,18006,18104,18195,18285],{":tabs":1557},[212,17925,17927],{"className":334,"code":17926,"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,17928,17929,17943,17949,17957,17966,17975,17980,17985,17990,17994,17998],{"__ignoreMap":178},[220,17930,17931,17933,17935,17937,17939,17941],{"class":222,"line":223},[220,17932,343],{"class":264},[220,17934,347],{"class":346},[220,17936,350],{"class":226},[220,17938,353],{"class":264},[220,17940,356],{"class":230},[220,17942,359],{"class":264},[220,17944,17945,17947],{"class":222,"line":179},[220,17946,364],{"class":264},[220,17948,9482],{"class":346},[220,17950,17951,17953,17955],{"class":222,"line":389},[220,17952,9487],{"class":226},[220,17954,353],{"class":264},[220,17956,17257],{"class":230},[220,17958,17959,17961,17963],{"class":222,"line":399},[220,17960,17262],{"class":226},[220,17962,353],{"class":264},[220,17964,17965],{"class":230},"\"0.15\"\n",[220,17967,17968,17971,17973],{"class":222,"line":644},[220,17969,17970],{"class":226}," :center",[220,17972,353],{"class":264},[220,17974,14954],{"class":230},[220,17976,17977],{"class":222,"line":650},[220,17978,17979],{"class":230}," type: 'mouse-position',\n",[220,17981,17982],{"class":222,"line":656},[220,17983,17984],{"class":230}," smoothing: 0.12,\n",[220,17986,17987],{"class":222,"line":673},[220,17988,17989],{"class":230}," momentum: 0.2\n",[220,17991,17992],{"class":222,"line":682},[220,17993,17301],{"class":230},[220,17995,17996],{"class":222,"line":691},[220,17997,1234],{"class":264},[220,17999,18000,18002,18004],{"class":222,"line":696},[220,18001,402],{"class":264},[220,18003,347],{"class":346},[220,18005,359],{"class":264},[212,18007,18009],{"className":409,"code":18008,"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,18010,18011,18025,18031,18039,18052,18061,18070,18080,18088,18092,18096],{"__ignoreMap":178},[220,18012,18013,18015,18017,18019,18021,18023],{"class":222,"line":223},[220,18014,343],{"class":264},[220,18016,347],{"class":420},[220,18018,423],{"class":226},[220,18020,353],{"class":260},[220,18022,356],{"class":230},[220,18024,359],{"class":264},[220,18026,18027,18029],{"class":222,"line":179},[220,18028,364],{"class":264},[220,18030,9482],{"class":420},[220,18032,18033,18035,18037],{"class":222,"line":389},[220,18034,9487],{"class":226},[220,18036,353],{"class":260},[220,18038,17257],{"class":230},[220,18040,18041,18043,18045,18047,18050],{"class":222,"line":399},[220,18042,9497],{"class":226},[220,18044,353],{"class":260},[220,18046,743],{"class":264},[220,18048,18049],{"class":420},"0.15",[220,18051,749],{"class":264},[220,18053,18054,18057,18059],{"class":222,"line":644},[220,18055,18056],{"class":226}," center",[220,18058,353],{"class":260},[220,18060,15897],{"class":264},[220,18062,18063,18065,18068],{"class":222,"line":650},[220,18064,16241],{"class":264},[220,18066,18067],{"class":230},"'mouse-position'",[220,18069,1760],{"class":264},[220,18071,18072,18075,18078],{"class":222,"line":656},[220,18073,18074],{"class":264}," smoothing: ",[220,18076,18077],{"class":420},"0.12",[220,18079,1760],{"class":264},[220,18081,18082,18085],{"class":222,"line":673},[220,18083,18084],{"class":264}," momentum: ",[220,18086,18087],{"class":420},"0.2\n",[220,18089,18090],{"class":222,"line":682},[220,18091,15975],{"class":264},[220,18093,18094],{"class":222,"line":691},[220,18095,1234],{"class":264},[220,18097,18098,18100,18102],{"class":222,"line":696},[220,18099,402],{"class":264},[220,18101,347],{"class":420},[220,18103,359],{"class":264},[212,18105,18107],{"className":468,"code":18106,"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,18108,18109,18123,18129,18137,18149,18157,18165,18173,18179,18183,18187],{"__ignoreMap":178},[220,18110,18111,18113,18115,18117,18119,18121],{"class":222,"line":223},[220,18112,343],{"class":264},[220,18114,347],{"class":420},[220,18116,350],{"class":226},[220,18118,353],{"class":260},[220,18120,356],{"class":230},[220,18122,359],{"class":264},[220,18124,18125,18127],{"class":222,"line":179},[220,18126,364],{"class":264},[220,18128,9482],{"class":420},[220,18130,18131,18133,18135],{"class":222,"line":389},[220,18132,9487],{"class":226},[220,18134,353],{"class":260},[220,18136,17257],{"class":230},[220,18138,18139,18141,18143,18145,18147],{"class":222,"line":399},[220,18140,9497],{"class":226},[220,18142,353],{"class":260},[220,18144,743],{"class":264},[220,18146,18049],{"class":420},[220,18148,749],{"class":264},[220,18150,18151,18153,18155],{"class":222,"line":644},[220,18152,18056],{"class":226},[220,18154,353],{"class":260},[220,18156,15897],{"class":264},[220,18158,18159,18161,18163],{"class":222,"line":650},[220,18160,16241],{"class":264},[220,18162,18067],{"class":230},[220,18164,1760],{"class":264},[220,18166,18167,18169,18171],{"class":222,"line":656},[220,18168,18074],{"class":264},[220,18170,18077],{"class":420},[220,18172,1760],{"class":264},[220,18174,18175,18177],{"class":222,"line":673},[220,18176,18084],{"class":264},[220,18178,18087],{"class":420},[220,18180,18181],{"class":222,"line":682},[220,18182,15975],{"class":264},[220,18184,18185],{"class":222,"line":691},[220,18186,1234],{"class":264},[220,18188,18189,18191,18193],{"class":222,"line":696},[220,18190,402],{"class":264},[220,18192,347],{"class":420},[220,18194,359],{"class":264},[212,18196,18197],{"className":468,"code":18106,"language":469,"meta":178,"style":178},[99,18198,18199,18213,18219,18227,18239,18247,18255,18263,18269,18273,18277],{"__ignoreMap":178},[220,18200,18201,18203,18205,18207,18209,18211],{"class":222,"line":223},[220,18202,343],{"class":264},[220,18204,347],{"class":420},[220,18206,350],{"class":226},[220,18208,353],{"class":260},[220,18210,356],{"class":230},[220,18212,359],{"class":264},[220,18214,18215,18217],{"class":222,"line":179},[220,18216,364],{"class":264},[220,18218,9482],{"class":420},[220,18220,18221,18223,18225],{"class":222,"line":389},[220,18222,9487],{"class":226},[220,18224,353],{"class":260},[220,18226,17257],{"class":230},[220,18228,18229,18231,18233,18235,18237],{"class":222,"line":399},[220,18230,9497],{"class":226},[220,18232,353],{"class":260},[220,18234,743],{"class":264},[220,18236,18049],{"class":420},[220,18238,749],{"class":264},[220,18240,18241,18243,18245],{"class":222,"line":644},[220,18242,18056],{"class":226},[220,18244,353],{"class":260},[220,18246,15897],{"class":264},[220,18248,18249,18251,18253],{"class":222,"line":650},[220,18250,16241],{"class":264},[220,18252,18067],{"class":230},[220,18254,1760],{"class":264},[220,18256,18257,18259,18261],{"class":222,"line":656},[220,18258,18074],{"class":264},[220,18260,18077],{"class":420},[220,18262,1760],{"class":264},[220,18264,18265,18267],{"class":222,"line":673},[220,18266,18084],{"class":264},[220,18268,18087],{"class":420},[220,18270,18271],{"class":222,"line":682},[220,18272,15975],{"class":264},[220,18274,18275],{"class":222,"line":691},[220,18276,1234],{"class":264},[220,18278,18279,18281,18283],{"class":222,"line":696},[220,18280,402],{"class":264},[220,18282,347],{"class":420},[220,18284,359],{"class":264},[212,18286,18288],{"className":251,"code":18287,"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,18289,18290,18304,18308,18312,18320,18324,18332,18341,18346,18354,18363,18370,18374,18378,18382,18386],{"__ignoreMap":178},[220,18291,18292,18294,18296,18298,18300,18302],{"class":222,"line":223},[220,18293,1735],{"class":260},[220,18295,1738],{"class":420},[220,18297,1741],{"class":260},[220,18299,1744],{"class":260},[220,18301,1747],{"class":226},[220,18303,1750],{"class":264},[220,18305,18306],{"class":222,"line":179},[220,18307,1765],{"class":264},[220,18309,18310],{"class":222,"line":389},[220,18311,16236],{"class":264},[220,18313,18314,18316,18318],{"class":222,"line":399},[220,18315,16241],{"class":264},[220,18317,6409],{"class":230},[220,18319,1760],{"class":264},[220,18321,18322],{"class":222,"line":644},[220,18323,16250],{"class":264},[220,18325,18326,18328,18330],{"class":222,"line":650},[220,18327,17672],{"class":264},[220,18329,17675],{"class":230},[220,18331,1760],{"class":264},[220,18333,18334,18337,18339],{"class":222,"line":656},[220,18335,18336],{"class":264}," radius: ",[220,18338,18049],{"class":420},[220,18340,1760],{"class":264},[220,18342,18343],{"class":222,"line":673},[220,18344,18345],{"class":264}," center: {\n",[220,18347,18348,18350,18352],{"class":222,"line":682},[220,18349,17687],{"class":264},[220,18351,18067],{"class":230},[220,18353,1760],{"class":264},[220,18355,18356,18359,18361],{"class":222,"line":691},[220,18357,18358],{"class":264}," smoothing: ",[220,18360,18077],{"class":420},[220,18362,1760],{"class":264},[220,18364,18365,18368],{"class":222,"line":696},[220,18366,18367],{"class":264}," momentum: ",[220,18369,18087],{"class":420},[220,18371,18372],{"class":222,"line":702},[220,18373,16328],{"class":264},[220,18375,18376],{"class":222,"line":718},[220,18377,4778],{"class":264},[220,18379,18380],{"class":222,"line":727},[220,18381,4458],{"class":264},[220,18383,18384],{"class":222,"line":2664},[220,18385,1787],{"class":264},[220,18387,18388],{"class":222,"line":3459},[220,18389,1792],{"class":264},[19,18391],{":preset":18392},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,18394,18395],{},[159,18396,17762],{},[1794,18398,18399,18411],{},[1797,18400,18401],{},[1800,18402,18403,18405,18407,18409],{},[1803,18404,17771],{},[1803,18406,15044],{},[1803,18408,15047],{},[1803,18410,1808],{},[1810,18412,18413,18434,18453,18471,18489,18510,18531,18558,18576],{},[1800,18414,18415,18419,18424,18429],{},[1815,18416,18417],{},[99,18418,15015],{},[1815,18420,18421],{},[99,18422,18423],{},"'mouse' | number",[1815,18425,18426],{},[99,18427,18428],{},"'mouse'",[1815,18430,18431,18433],{},[99,18432,18428],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,18435,18436,18440,18444,18448],{},[1815,18437,18438],{},[99,18439,15018],{},[1815,18441,18442],{},[99,18443,18423],{},[1815,18445,18446],{},[99,18447,18428],{},[1815,18449,18450,18452],{},[99,18451,18428],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,18454,18455,18460,18464,18468],{},[1815,18456,18457],{},[99,18458,18459],{},"invertX",[1815,18461,18462],{},[99,18463,15192],{},[1815,18465,18466],{},[99,18467,2629],{},[1815,18469,18470],{},"Flips the X direction — cursor moving right moves position left.",[1800,18472,18473,18478,18482,18486],{},[1815,18474,18475],{},[99,18476,18477],{},"invertY",[1815,18479,18480],{},[99,18481,15192],{},[1815,18483,18484],{},[99,18485,2629],{},[1815,18487,18488],{},"Flips the Y direction.",[1800,18490,18491,18496,18500,18504],{},[1815,18492,18493],{},[99,18494,18495],{},"smoothing",[1815,18497,18498],{},[99,18499,15157],{},[1815,18501,18502],{},[99,18503,8524],{},[1815,18505,18506,18507,18509],{},"Lag amount (0–1). ",[99,18508,8524],{}," = instant, higher values = sluggish follow.",[1800,18511,18512,18517,18521,18525],{},[1815,18513,18514],{},[99,18515,18516],{},"momentum",[1815,18518,18519],{},[99,18520,15157],{},[1815,18522,18523],{},[99,18524,8524],{},[1815,18526,18527,18528,18530],{},"Spring bounce (0–1). ",[99,18529,8524],{}," = no overshoot, values near 1 = springy.",[1800,18532,18533,18538,18542,18546],{},[1815,18534,18535],{},[99,18536,18537],{},"reach",[1815,18539,18540],{},[99,18541,15157],{},[1815,18543,18544],{},[99,18545,8528],{},[1815,18547,18548,18549,18551,18552,18554,18555,18557],{},"Displacement scale. ",[99,18550,8528],{}," = 1:1 with cursor. ",[99,18553,7065],{}," = twice the displacement. ",[99,18556,8524],{}," = pinned to origin.",[1800,18559,18560,18565,18569,18573],{},[1815,18561,18562],{},[99,18563,18564],{},"originX",[1815,18566,18567],{},[99,18568,15157],{},[1815,18570,18571],{},[99,18572,7605],{},[1815,18574,18575],{},"X coordinate of the origin point that displacement scales from.",[1800,18577,18578,18583,18587,18591],{},[1815,18579,18580],{},[99,18581,18582],{},"originY",[1815,18584,18585],{},[99,18586,15157],{},[1815,18588,18589],{},[99,18590,7605],{},[1815,18592,18593],{},"Y coordinate of the origin point.",[15,18595,18596,18599,18600,18602,18603,18605],{},[159,18597,18598],{},"Pinning one axis:"," Set ",[99,18601,15015],{}," or ",[99,18604,15018],{}," to a number to fix that axis while the other tracks the mouse:",[212,18607,18609],{"className":334,"code":18608,"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,18610,18611,18616],{"__ignoreMap":178},[220,18612,18613],{"class":222,"line":223},[220,18614,18615],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,18617,18618,18620,18622,18624,18626,18629,18631,18633,18636],{"class":222,"line":179},[220,18619,343],{"class":264},[220,18621,2553],{"class":346},[220,18623,17185],{"class":226},[220,18625,353],{"class":264},[220,18627,18628],{"class":230},"\"0.15\"",[220,18630,7984],{"class":226},[220,18632,353],{"class":264},[220,18634,18635],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,18637,386],{"class":264},[23,18639,18640],{"id":18640},"mouse",[15,18642,18643],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,18645,18646,18728,18827,18922,19016],{":tabs":1557},[212,18647,18649],{"className":334,"code":18648,"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,18650,18651,18665,18671,18679,18687,18692,18697,18702,18707,18712,18716,18720],{"__ignoreMap":178},[220,18652,18653,18655,18657,18659,18661,18663],{"class":222,"line":223},[220,18654,343],{"class":264},[220,18656,347],{"class":346},[220,18658,350],{"class":226},[220,18660,353],{"class":264},[220,18662,356],{"class":230},[220,18664,359],{"class":264},[220,18666,18667,18669],{"class":222,"line":179},[220,18668,364],{"class":264},[220,18670,9482],{"class":346},[220,18672,18673,18675,18677],{"class":222,"line":389},[220,18674,9487],{"class":226},[220,18676,353],{"class":264},[220,18678,17257],{"class":230},[220,18680,18681,18683,18685],{"class":222,"line":399},[220,18682,17262],{"class":226},[220,18684,353],{"class":264},[220,18686,14954],{"class":230},[220,18688,18689],{"class":222,"line":644},[220,18690,18691],{"class":230}," type: 'mouse',\n",[220,18693,18694],{"class":222,"line":650},[220,18695,18696],{"class":230}," axis: 'x',\n",[220,18698,18699],{"class":222,"line":656},[220,18700,18701],{"class":230}," outputMin: 0.1,\n",[220,18703,18704],{"class":222,"line":673},[220,18705,18706],{"class":230}," outputMax: 0.7,\n",[220,18708,18709],{"class":222,"line":682},[220,18710,18711],{"class":230}," smoothing: 0.1\n",[220,18713,18714],{"class":222,"line":691},[220,18715,17301],{"class":230},[220,18717,18718],{"class":222,"line":696},[220,18719,1234],{"class":264},[220,18721,18722,18724,18726],{"class":222,"line":702},[220,18723,402],{"class":264},[220,18725,347],{"class":346},[220,18727,359],{"class":264},[212,18729,18731],{"className":409,"code":18730,"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,18732,18733,18747,18753,18761,18769,18777,18787,18795,18804,18811,18815,18819],{"__ignoreMap":178},[220,18734,18735,18737,18739,18741,18743,18745],{"class":222,"line":223},[220,18736,343],{"class":264},[220,18738,347],{"class":420},[220,18740,423],{"class":226},[220,18742,353],{"class":260},[220,18744,356],{"class":230},[220,18746,359],{"class":264},[220,18748,18749,18751],{"class":222,"line":179},[220,18750,364],{"class":264},[220,18752,9482],{"class":420},[220,18754,18755,18757,18759],{"class":222,"line":389},[220,18756,9487],{"class":226},[220,18758,353],{"class":260},[220,18760,17257],{"class":230},[220,18762,18763,18765,18767],{"class":222,"line":399},[220,18764,9497],{"class":226},[220,18766,353],{"class":260},[220,18768,15897],{"class":264},[220,18770,18771,18773,18775],{"class":222,"line":644},[220,18772,16241],{"class":264},[220,18774,18428],{"class":230},[220,18776,1760],{"class":264},[220,18778,18779,18782,18785],{"class":222,"line":650},[220,18780,18781],{"class":264}," axis: ",[220,18783,18784],{"class":230},"'x'",[220,18786,1760],{"class":264},[220,18788,18789,18791,18793],{"class":222,"line":656},[220,18790,17378],{"class":264},[220,18792,15911],{"class":420},[220,18794,1760],{"class":264},[220,18796,18797,18799,18802],{"class":222,"line":673},[220,18798,17387],{"class":264},[220,18800,18801],{"class":420},"0.7",[220,18803,1760],{"class":264},[220,18805,18806,18808],{"class":222,"line":682},[220,18807,18074],{"class":264},[220,18809,18810],{"class":420},"0.1\n",[220,18812,18813],{"class":222,"line":691},[220,18814,15975],{"class":264},[220,18816,18817],{"class":222,"line":696},[220,18818,1234],{"class":264},[220,18820,18821,18823,18825],{"class":222,"line":702},[220,18822,402],{"class":264},[220,18824,347],{"class":420},[220,18826,359],{"class":264},[212,18828,18830],{"className":468,"code":18829,"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,18831,18832,18846,18852,18860,18868,18876,18884,18892,18900,18906,18910,18914],{"__ignoreMap":178},[220,18833,18834,18836,18838,18840,18842,18844],{"class":222,"line":223},[220,18835,343],{"class":264},[220,18837,347],{"class":420},[220,18839,350],{"class":226},[220,18841,353],{"class":260},[220,18843,356],{"class":230},[220,18845,359],{"class":264},[220,18847,18848,18850],{"class":222,"line":179},[220,18849,364],{"class":264},[220,18851,9482],{"class":420},[220,18853,18854,18856,18858],{"class":222,"line":389},[220,18855,9487],{"class":226},[220,18857,353],{"class":260},[220,18859,17257],{"class":230},[220,18861,18862,18864,18866],{"class":222,"line":399},[220,18863,9497],{"class":226},[220,18865,353],{"class":260},[220,18867,15897],{"class":264},[220,18869,18870,18872,18874],{"class":222,"line":644},[220,18871,16241],{"class":264},[220,18873,18428],{"class":230},[220,18875,1760],{"class":264},[220,18877,18878,18880,18882],{"class":222,"line":650},[220,18879,18781],{"class":264},[220,18881,18784],{"class":230},[220,18883,1760],{"class":264},[220,18885,18886,18888,18890],{"class":222,"line":656},[220,18887,17378],{"class":264},[220,18889,15911],{"class":420},[220,18891,1760],{"class":264},[220,18893,18894,18896,18898],{"class":222,"line":673},[220,18895,17387],{"class":264},[220,18897,18801],{"class":420},[220,18899,1760],{"class":264},[220,18901,18902,18904],{"class":222,"line":682},[220,18903,18074],{"class":264},[220,18905,18810],{"class":420},[220,18907,18908],{"class":222,"line":691},[220,18909,15975],{"class":264},[220,18911,18912],{"class":222,"line":696},[220,18913,1234],{"class":264},[220,18915,18916,18918,18920],{"class":222,"line":702},[220,18917,402],{"class":264},[220,18919,347],{"class":420},[220,18921,359],{"class":264},[212,18923,18924],{"className":468,"code":18829,"language":469,"meta":178,"style":178},[99,18925,18926,18940,18946,18954,18962,18970,18978,18986,18994,19000,19004,19008],{"__ignoreMap":178},[220,18927,18928,18930,18932,18934,18936,18938],{"class":222,"line":223},[220,18929,343],{"class":264},[220,18931,347],{"class":420},[220,18933,350],{"class":226},[220,18935,353],{"class":260},[220,18937,356],{"class":230},[220,18939,359],{"class":264},[220,18941,18942,18944],{"class":222,"line":179},[220,18943,364],{"class":264},[220,18945,9482],{"class":420},[220,18947,18948,18950,18952],{"class":222,"line":389},[220,18949,9487],{"class":226},[220,18951,353],{"class":260},[220,18953,17257],{"class":230},[220,18955,18956,18958,18960],{"class":222,"line":399},[220,18957,9497],{"class":226},[220,18959,353],{"class":260},[220,18961,15897],{"class":264},[220,18963,18964,18966,18968],{"class":222,"line":644},[220,18965,16241],{"class":264},[220,18967,18428],{"class":230},[220,18969,1760],{"class":264},[220,18971,18972,18974,18976],{"class":222,"line":650},[220,18973,18781],{"class":264},[220,18975,18784],{"class":230},[220,18977,1760],{"class":264},[220,18979,18980,18982,18984],{"class":222,"line":656},[220,18981,17378],{"class":264},[220,18983,15911],{"class":420},[220,18985,1760],{"class":264},[220,18987,18988,18990,18992],{"class":222,"line":673},[220,18989,17387],{"class":264},[220,18991,18801],{"class":420},[220,18993,1760],{"class":264},[220,18995,18996,18998],{"class":222,"line":682},[220,18997,18074],{"class":264},[220,18999,18810],{"class":420},[220,19001,19002],{"class":222,"line":691},[220,19003,15975],{"class":264},[220,19005,19006],{"class":222,"line":696},[220,19007,1234],{"class":264},[220,19009,19010,19012,19014],{"class":222,"line":702},[220,19011,402],{"class":264},[220,19013,347],{"class":420},[220,19015,359],{"class":264},[212,19017,19019],{"className":251,"code":19018,"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,19020,19021,19035,19039,19043,19051,19055,19063,19067,19075,19084,19092,19100,19106,19110,19114,19118,19122],{"__ignoreMap":178},[220,19022,19023,19025,19027,19029,19031,19033],{"class":222,"line":223},[220,19024,1735],{"class":260},[220,19026,1738],{"class":420},[220,19028,1741],{"class":260},[220,19030,1744],{"class":260},[220,19032,1747],{"class":226},[220,19034,1750],{"class":264},[220,19036,19037],{"class":222,"line":179},[220,19038,1765],{"class":264},[220,19040,19041],{"class":222,"line":389},[220,19042,16236],{"class":264},[220,19044,19045,19047,19049],{"class":222,"line":399},[220,19046,16241],{"class":264},[220,19048,6409],{"class":230},[220,19050,1760],{"class":264},[220,19052,19053],{"class":222,"line":644},[220,19054,16250],{"class":264},[220,19056,19057,19059,19061],{"class":222,"line":650},[220,19058,17672],{"class":264},[220,19060,17675],{"class":230},[220,19062,1760],{"class":264},[220,19064,19065],{"class":222,"line":656},[220,19066,17682],{"class":264},[220,19068,19069,19071,19073],{"class":222,"line":673},[220,19070,17687],{"class":264},[220,19072,18428],{"class":230},[220,19074,1760],{"class":264},[220,19076,19077,19080,19082],{"class":222,"line":682},[220,19078,19079],{"class":264}," axis: ",[220,19081,18784],{"class":230},[220,19083,1760],{"class":264},[220,19085,19086,19088,19090],{"class":222,"line":691},[220,19087,17705],{"class":264},[220,19089,15911],{"class":420},[220,19091,1760],{"class":264},[220,19093,19094,19096,19098],{"class":222,"line":696},[220,19095,17714],{"class":264},[220,19097,18801],{"class":420},[220,19099,1760],{"class":264},[220,19101,19102,19104],{"class":222,"line":702},[220,19103,18358],{"class":264},[220,19105,18810],{"class":420},[220,19107,19108],{"class":222,"line":718},[220,19109,16328],{"class":264},[220,19111,19112],{"class":222,"line":727},[220,19113,4778],{"class":264},[220,19115,19116],{"class":222,"line":2664},[220,19117,4458],{"class":264},[220,19119,19120],{"class":222,"line":3459},[220,19121,1787],{"class":264},[220,19123,19124],{"class":222,"line":9514},[220,19125,1792],{"class":264},[19,19127],{":preset":19128},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,19130,19131],{},[159,19132,17762],{},[1794,19134,19135,19147],{},[1797,19136,19137],{},[1800,19138,19139,19141,19143,19145],{},[1803,19140,17771],{},[1803,19142,15044],{},[1803,19144,15047],{},[1803,19146,1808],{},[1810,19148,19149,19166,19181,19196,19226,19245],{},[1800,19150,19151,19156,19161,19163],{},[1815,19152,19153],{},[99,19154,19155],{},"axis",[1815,19157,19158],{},[99,19159,19160],{},"'x' | 'y'",[1815,19162,17794],{},[1815,19164,19165],{},"Which pointer axis drives this prop.",[1800,19167,19168,19172,19176,19178],{},[1815,19169,19170],{},[99,19171,17811],{},[1815,19173,19174],{},[99,19175,15157],{},[1815,19177,17794],{},[1815,19179,19180],{},"Output value when axis is at 0 (left or top).",[1800,19182,19183,19187,19191,19193],{},[1815,19184,19185],{},[99,19186,17827],{},[1815,19188,19189],{},[99,19190,15157],{},[1815,19192,17794],{},[1815,19194,19195],{},"Output value when axis is at 1 (right or bottom).",[1800,19197,19198,19203,19207,19211],{},[1815,19199,19200],{},[99,19201,19202],{},"curve",[1815,19204,19205],{},[99,19206,15157],{},[1815,19208,19209],{},[99,19210,8524],{},[1815,19212,19213,19214,1550,19217,19220,19221,19223,19224,4685],{},"Power curve: ",[99,19215,19216],{},"-1",[99,19218,19219],{},"+1",". Negative = biased toward ",[99,19222,17811],{},", positive = toward ",[99,19225,17827],{},[1800,19227,19228,19232,19236,19240],{},[1815,19229,19230],{},[99,19231,18495],{},[1815,19233,19234],{},[99,19235,15157],{},[1815,19237,19238],{},[99,19239,8524],{},[1815,19241,19242,19243,4685],{},"Lag (0–1). Same as ",[99,19244,17906],{},[1800,19246,19247,19251,19255,19259],{},[1815,19248,19249],{},[99,19250,18516],{},[1815,19252,19253],{},[99,19254,15157],{},[1815,19256,19257],{},[99,19258,8524],{},[1815,19260,19261,19262,4685],{},"Spring bounce (0–1). Same as ",[99,19263,17906],{},[15,19265,19266,19268],{},[159,19267,17896],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,19270,19271],{"id":19271},"map",[15,19273,19274],{},"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,19276,19277,19278,19280],{},"First, give the source component an ",[99,19279,8907],{},". Then reference that id in the driver:",[246,19282,19283,19421,19567,19704,19840],{":tabs":1557},[212,19284,19286],{"className":334,"code":19285,"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,19287,19288,19302,19307,19313,19322,19332,19341,19345,19349,19354,19361,19370,19375,19380,19385,19390,19395,19400,19405,19409,19413],{"__ignoreMap":178},[220,19289,19290,19292,19294,19296,19298,19300],{"class":222,"line":223},[220,19291,343],{"class":264},[220,19293,347],{"class":346},[220,19295,350],{"class":226},[220,19297,353],{"class":264},[220,19299,356],{"class":230},[220,19301,359],{"class":264},[220,19303,19304],{"class":222,"line":179},[220,19305,19306],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,19308,19309,19311],{"class":222,"line":389},[220,19310,364],{"class":264},[220,19312,1189],{"class":346},[220,19314,19315,19317,19319],{"class":222,"line":399},[220,19316,9429],{"class":226},[220,19318,353],{"class":264},[220,19320,19321],{"class":230},"\"grad\"\n",[220,19323,19324,19327,19329],{"class":222,"line":644},[220,19325,19326],{"class":226}," color-a",[220,19328,353],{"class":264},[220,19330,19331],{"class":230},"\"#000000\"\n",[220,19333,19334,19337,19339],{"class":222,"line":650},[220,19335,19336],{"class":226}," color-b",[220,19338,353],{"class":264},[220,19340,9443],{"class":230},[220,19342,19343],{"class":222,"line":656},[220,19344,1234],{"class":264},[220,19346,19347],{"class":222,"line":673},[220,19348,647],{"emptyLinePlaceholder":194},[220,19350,19351],{"class":222,"line":682},[220,19352,19353],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,19355,19356,19358],{"class":222,"line":691},[220,19357,364],{"class":264},[220,19359,19360],{"class":346},"DotGrid\n",[220,19362,19363,19366,19368],{"class":222,"line":696},[220,19364,19365],{"class":226}," :dot-size",[220,19367,353],{"class":264},[220,19369,14954],{"class":230},[220,19371,19372],{"class":222,"line":702},[220,19373,19374],{"class":230}," type: 'map',\n",[220,19376,19377],{"class":222,"line":718},[220,19378,19379],{"class":230}," source: 'grad',\n",[220,19381,19382],{"class":222,"line":727},[220,19383,19384],{"class":230}," channel: 'luminance',\n",[220,19386,19387],{"class":222,"line":2664},[220,19388,19389],{"class":230}," inputMin: 0,\n",[220,19391,19392],{"class":222,"line":3459},[220,19393,19394],{"class":230}," inputMax: 1,\n",[220,19396,19397],{"class":222,"line":9514},[220,19398,19399],{"class":230}," outputMin: 0.02,\n",[220,19401,19402],{"class":222,"line":9525},[220,19403,19404],{"class":230}," outputMax: 0.12\n",[220,19406,19407],{"class":222,"line":9530},[220,19408,17301],{"class":230},[220,19410,19411],{"class":222,"line":10851},[220,19412,1234],{"class":264},[220,19414,19415,19417,19419],{"class":222,"line":10856},[220,19416,402],{"class":264},[220,19418,347],{"class":346},[220,19420,359],{"class":264},[212,19422,19424],{"className":409,"code":19423,"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,19425,19426,19440,19446,19454,19462,19470,19474,19480,19489,19498,19508,19517,19526,19535,19544,19551,19555,19559],{"__ignoreMap":178},[220,19427,19428,19430,19432,19434,19436,19438],{"class":222,"line":223},[220,19429,343],{"class":264},[220,19431,347],{"class":420},[220,19433,423],{"class":226},[220,19435,353],{"class":260},[220,19437,356],{"class":230},[220,19439,359],{"class":264},[220,19441,19442,19444],{"class":222,"line":179},[220,19443,364],{"class":264},[220,19445,1189],{"class":420},[220,19447,19448,19450,19452],{"class":222,"line":389},[220,19449,9429],{"class":226},[220,19451,353],{"class":260},[220,19453,19321],{"class":230},[220,19455,19456,19458,19460],{"class":222,"line":399},[220,19457,1194],{"class":226},[220,19459,353],{"class":260},[220,19461,19331],{"class":230},[220,19463,19464,19466,19468],{"class":222,"line":644},[220,19465,1204],{"class":226},[220,19467,353],{"class":260},[220,19469,9443],{"class":230},[220,19471,19472],{"class":222,"line":650},[220,19473,1234],{"class":264},[220,19475,19476,19478],{"class":222,"line":656},[220,19477,364],{"class":264},[220,19479,19360],{"class":420},[220,19481,19482,19485,19487],{"class":222,"line":673},[220,19483,19484],{"class":226}," dotSize",[220,19486,353],{"class":260},[220,19488,15897],{"class":264},[220,19490,19491,19493,19496],{"class":222,"line":682},[220,19492,16241],{"class":264},[220,19494,19495],{"class":230},"'map'",[220,19497,1760],{"class":264},[220,19499,19500,19503,19506],{"class":222,"line":691},[220,19501,19502],{"class":264}," source: ",[220,19504,19505],{"class":230},"'grad'",[220,19507,1760],{"class":264},[220,19509,19510,19513,19515],{"class":222,"line":696},[220,19511,19512],{"class":264}," channel: ",[220,19514,10058],{"class":230},[220,19516,1760],{"class":264},[220,19518,19519,19522,19524],{"class":222,"line":702},[220,19520,19521],{"class":264}," inputMin: ",[220,19523,8524],{"class":420},[220,19525,1760],{"class":264},[220,19527,19528,19531,19533],{"class":222,"line":718},[220,19529,19530],{"class":264}," inputMax: ",[220,19532,8528],{"class":420},[220,19534,1760],{"class":264},[220,19536,19537,19539,19542],{"class":222,"line":727},[220,19538,17378],{"class":264},[220,19540,19541],{"class":420},"0.02",[220,19543,1760],{"class":264},[220,19545,19546,19548],{"class":222,"line":2664},[220,19547,17387],{"class":264},[220,19549,19550],{"class":420},"0.12\n",[220,19552,19553],{"class":222,"line":3459},[220,19554,15975],{"class":264},[220,19556,19557],{"class":222,"line":9514},[220,19558,1234],{"class":264},[220,19560,19561,19563,19565],{"class":222,"line":9525},[220,19562,402],{"class":264},[220,19564,347],{"class":420},[220,19566,359],{"class":264},[212,19568,19570],{"className":468,"code":19569,"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,19571,19572,19586,19592,19600,19608,19616,19620,19626,19634,19642,19650,19658,19666,19674,19682,19688,19692,19696],{"__ignoreMap":178},[220,19573,19574,19576,19578,19580,19582,19584],{"class":222,"line":223},[220,19575,343],{"class":264},[220,19577,347],{"class":420},[220,19579,350],{"class":226},[220,19581,353],{"class":260},[220,19583,356],{"class":230},[220,19585,359],{"class":264},[220,19587,19588,19590],{"class":222,"line":179},[220,19589,364],{"class":264},[220,19591,1189],{"class":420},[220,19593,19594,19596,19598],{"class":222,"line":389},[220,19595,9429],{"class":226},[220,19597,353],{"class":260},[220,19599,19321],{"class":230},[220,19601,19602,19604,19606],{"class":222,"line":399},[220,19603,1194],{"class":226},[220,19605,353],{"class":260},[220,19607,19331],{"class":230},[220,19609,19610,19612,19614],{"class":222,"line":644},[220,19611,1204],{"class":226},[220,19613,353],{"class":260},[220,19615,9443],{"class":230},[220,19617,19618],{"class":222,"line":650},[220,19619,1234],{"class":264},[220,19621,19622,19624],{"class":222,"line":656},[220,19623,364],{"class":264},[220,19625,19360],{"class":420},[220,19627,19628,19630,19632],{"class":222,"line":673},[220,19629,19484],{"class":226},[220,19631,353],{"class":260},[220,19633,15897],{"class":264},[220,19635,19636,19638,19640],{"class":222,"line":682},[220,19637,16241],{"class":264},[220,19639,19495],{"class":230},[220,19641,1760],{"class":264},[220,19643,19644,19646,19648],{"class":222,"line":691},[220,19645,19502],{"class":264},[220,19647,19505],{"class":230},[220,19649,1760],{"class":264},[220,19651,19652,19654,19656],{"class":222,"line":696},[220,19653,19512],{"class":264},[220,19655,10058],{"class":230},[220,19657,1760],{"class":264},[220,19659,19660,19662,19664],{"class":222,"line":702},[220,19661,19521],{"class":264},[220,19663,8524],{"class":420},[220,19665,1760],{"class":264},[220,19667,19668,19670,19672],{"class":222,"line":718},[220,19669,19530],{"class":264},[220,19671,8528],{"class":420},[220,19673,1760],{"class":264},[220,19675,19676,19678,19680],{"class":222,"line":727},[220,19677,17378],{"class":264},[220,19679,19541],{"class":420},[220,19681,1760],{"class":264},[220,19683,19684,19686],{"class":222,"line":2664},[220,19685,17387],{"class":264},[220,19687,19550],{"class":420},[220,19689,19690],{"class":222,"line":3459},[220,19691,15975],{"class":264},[220,19693,19694],{"class":222,"line":9514},[220,19695,1234],{"class":264},[220,19697,19698,19700,19702],{"class":222,"line":9525},[220,19699,402],{"class":264},[220,19701,347],{"class":420},[220,19703,359],{"class":264},[212,19705,19706],{"className":468,"code":19569,"language":469,"meta":178,"style":178},[99,19707,19708,19722,19728,19736,19744,19752,19756,19762,19770,19778,19786,19794,19802,19810,19818,19824,19828,19832],{"__ignoreMap":178},[220,19709,19710,19712,19714,19716,19718,19720],{"class":222,"line":223},[220,19711,343],{"class":264},[220,19713,347],{"class":420},[220,19715,350],{"class":226},[220,19717,353],{"class":260},[220,19719,356],{"class":230},[220,19721,359],{"class":264},[220,19723,19724,19726],{"class":222,"line":179},[220,19725,364],{"class":264},[220,19727,1189],{"class":420},[220,19729,19730,19732,19734],{"class":222,"line":389},[220,19731,9429],{"class":226},[220,19733,353],{"class":260},[220,19735,19321],{"class":230},[220,19737,19738,19740,19742],{"class":222,"line":399},[220,19739,1194],{"class":226},[220,19741,353],{"class":260},[220,19743,19331],{"class":230},[220,19745,19746,19748,19750],{"class":222,"line":644},[220,19747,1204],{"class":226},[220,19749,353],{"class":260},[220,19751,9443],{"class":230},[220,19753,19754],{"class":222,"line":650},[220,19755,1234],{"class":264},[220,19757,19758,19760],{"class":222,"line":656},[220,19759,364],{"class":264},[220,19761,19360],{"class":420},[220,19763,19764,19766,19768],{"class":222,"line":673},[220,19765,19484],{"class":226},[220,19767,353],{"class":260},[220,19769,15897],{"class":264},[220,19771,19772,19774,19776],{"class":222,"line":682},[220,19773,16241],{"class":264},[220,19775,19495],{"class":230},[220,19777,1760],{"class":264},[220,19779,19780,19782,19784],{"class":222,"line":691},[220,19781,19502],{"class":264},[220,19783,19505],{"class":230},[220,19785,1760],{"class":264},[220,19787,19788,19790,19792],{"class":222,"line":696},[220,19789,19512],{"class":264},[220,19791,10058],{"class":230},[220,19793,1760],{"class":264},[220,19795,19796,19798,19800],{"class":222,"line":702},[220,19797,19521],{"class":264},[220,19799,8524],{"class":420},[220,19801,1760],{"class":264},[220,19803,19804,19806,19808],{"class":222,"line":718},[220,19805,19530],{"class":264},[220,19807,8528],{"class":420},[220,19809,1760],{"class":264},[220,19811,19812,19814,19816],{"class":222,"line":727},[220,19813,17378],{"class":264},[220,19815,19541],{"class":420},[220,19817,1760],{"class":264},[220,19819,19820,19822],{"class":222,"line":2664},[220,19821,17387],{"class":264},[220,19823,19550],{"class":420},[220,19825,19826],{"class":222,"line":3459},[220,19827,15975],{"class":264},[220,19829,19830],{"class":222,"line":9514},[220,19831,1234],{"class":264},[220,19833,19834,19836,19838],{"class":222,"line":9525},[220,19835,402],{"class":264},[220,19837,347],{"class":420},[220,19839,359],{"class":264},[212,19841,19843],{"className":251,"code":19842,"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,19844,19845,19859,19863,19867,19875,19884,19898,19903,19907,19916,19920,19925,19933,19942,19951,19960,19969,19977,19984,19988,19992,19996,20000],{"__ignoreMap":178},[220,19846,19847,19849,19851,19853,19855,19857],{"class":222,"line":223},[220,19848,1735],{"class":260},[220,19850,1738],{"class":420},[220,19852,1741],{"class":260},[220,19854,1744],{"class":260},[220,19856,1747],{"class":226},[220,19858,1750],{"class":264},[220,19860,19861],{"class":222,"line":179},[220,19862,1765],{"class":264},[220,19864,19865],{"class":222,"line":389},[220,19866,16236],{"class":264},[220,19868,19869,19871,19873],{"class":222,"line":399},[220,19870,16241],{"class":264},[220,19872,2462],{"class":230},[220,19874,1760],{"class":264},[220,19876,19877,19880,19882],{"class":222,"line":644},[220,19878,19879],{"class":264}," id: ",[220,19881,19505],{"class":230},[220,19883,1760],{"class":264},[220,19885,19886,19889,19892,19894,19896],{"class":222,"line":650},[220,19887,19888],{"class":264}," props: { colorA: ",[220,19890,19891],{"class":230},"'#000000'",[220,19893,10024],{"class":264},[220,19895,10021],{"class":230},[220,19897,5520],{"class":264},[220,19899,19900],{"class":222,"line":656},[220,19901,19902],{"class":264}," },\n",[220,19904,19905],{"class":222,"line":673},[220,19906,16236],{"class":264},[220,19908,19909,19911,19914],{"class":222,"line":682},[220,19910,16241],{"class":264},[220,19912,19913],{"class":230},"'DotGrid'",[220,19915,1760],{"class":264},[220,19917,19918],{"class":222,"line":691},[220,19919,16250],{"class":264},[220,19921,19922],{"class":222,"line":696},[220,19923,19924],{"class":264}," dotSize: {\n",[220,19926,19927,19929,19931],{"class":222,"line":702},[220,19928,17687],{"class":264},[220,19930,19495],{"class":230},[220,19932,1760],{"class":264},[220,19934,19935,19938,19940],{"class":222,"line":718},[220,19936,19937],{"class":264}," source: ",[220,19939,19505],{"class":230},[220,19941,1760],{"class":264},[220,19943,19944,19947,19949],{"class":222,"line":727},[220,19945,19946],{"class":264}," channel: ",[220,19948,10058],{"class":230},[220,19950,1760],{"class":264},[220,19952,19953,19956,19958],{"class":222,"line":2664},[220,19954,19955],{"class":264}," inputMin: ",[220,19957,8524],{"class":420},[220,19959,1760],{"class":264},[220,19961,19962,19965,19967],{"class":222,"line":3459},[220,19963,19964],{"class":264}," inputMax: ",[220,19966,8528],{"class":420},[220,19968,1760],{"class":264},[220,19970,19971,19973,19975],{"class":222,"line":9514},[220,19972,17705],{"class":264},[220,19974,8524],{"class":420},[220,19976,1760],{"class":264},[220,19978,19979,19981],{"class":222,"line":9525},[220,19980,17714],{"class":264},[220,19982,19983],{"class":420},"1\n",[220,19985,19986],{"class":222,"line":9530},[220,19987,16328],{"class":264},[220,19989,19990],{"class":222,"line":10851},[220,19991,4778],{"class":264},[220,19993,19994],{"class":222,"line":10856},[220,19995,4458],{"class":264},[220,19997,19998],{"class":222,"line":11929},[220,19999,1787],{"class":264},[220,20001,20002],{"class":222,"line":11936},[220,20003,1792],{"class":264},[19,20005],{":preset":20006},"{\"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,20008,20009],{},[159,20010,17762],{},[1794,20012,20013,20025],{},[1797,20014,20015],{},[1800,20016,20017,20019,20021,20023],{},[1803,20018,17771],{},[1803,20020,15044],{},[1803,20022,15047],{},[1803,20024,1808],{},[1810,20026,20027,20045,20069,20085,20101,20116,20131],{},[1800,20028,20029,20034,20038,20040],{},[1815,20030,20031],{},[99,20032,20033],{},"source",[1815,20035,20036],{},[99,20037,8911],{},[1815,20039,17794],{},[1815,20041,1839,20042,20044],{},[99,20043,8907],{}," of the source component to sample from.",[1800,20046,20047,20052,20056,20058],{},[1815,20048,20049],{},[99,20050,20051],{},"channel",[1815,20053,20054],{},[99,20055,8911],{},[1815,20057,17794],{},[1815,20059,20060,20061,1895,20063,1895,20065,1895,20067,4685],{},"Which channel to extract. ",[99,20062,9360],{},[99,20064,9368],{},[99,20066,9376],{},[99,20068,9384],{},[1800,20070,20071,20076,20080,20082],{},[1815,20072,20073],{},[99,20074,20075],{},"inputMin",[1815,20077,20078],{},[99,20079,15157],{},[1815,20081,17794],{},[1815,20083,20084],{},"Source values at or below this are treated as 0.",[1800,20086,20087,20092,20096,20098],{},[1815,20088,20089],{},[99,20090,20091],{},"inputMax",[1815,20093,20094],{},[99,20095,15157],{},[1815,20097,17794],{},[1815,20099,20100],{},"Source values at or above this are treated as 1.",[1800,20102,20103,20107,20111,20113],{},[1815,20104,20105],{},[99,20106,17811],{},[1815,20108,20109],{},[99,20110,15157],{},[1815,20112,17794],{},[1815,20114,20115],{},"Output value when input = 0.",[1800,20117,20118,20122,20126,20128],{},[1815,20119,20120],{},[99,20121,17827],{},[1815,20123,20124],{},[99,20125,15157],{},[1815,20127,17794],{},[1815,20129,20130],{},"Output value when input = 1.",[1800,20132,20133,20137,20141,20145],{},[1815,20134,20135],{},[99,20136,19202],{},[1815,20138,20139],{},[99,20140,15157],{},[1815,20142,20143],{},[99,20144,8524],{},[1815,20146,20147,20148,1550,20150,4685],{},"Power curve applied after normalization. ",[99,20149,19216],{},[99,20151,19219],{},[15,20153,1839,20154,20156],{},[99,20155,19271],{}," 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,20158,20160],{"id":20159},"combining-dynamic-props","Combining dynamic props",[15,20162,20163],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,20165,20166,20272,20399,20522],{":tabs":248},[212,20167,20169],{"className":334,"code":20168,"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,20170,20171,20185,20208,20215,20224,20233,20237,20241,20246,20251,20256,20260,20264],{"__ignoreMap":178},[220,20172,20173,20175,20177,20179,20181,20183],{"class":222,"line":223},[220,20174,343],{"class":264},[220,20176,347],{"class":346},[220,20178,350],{"class":226},[220,20180,353],{"class":264},[220,20182,356],{"class":230},[220,20184,359],{"class":264},[220,20186,20187,20189,20191,20194,20196,20198,20201,20203,20206],{"class":222,"line":179},[220,20188,364],{"class":264},[220,20190,367],{"class":346},[220,20192,20193],{"class":226}," color-a",[220,20195,353],{"class":264},[220,20197,375],{"class":230},[220,20199,20200],{"class":226}," color-b",[220,20202,353],{"class":264},[220,20204,20205],{"class":230},"\"#4f46e5\"",[220,20207,386],{"class":264},[220,20209,20210,20212],{"class":222,"line":389},[220,20211,364],{"class":264},[220,20213,20214],{"class":346},"LensFlare\n",[220,20216,20217,20219,20221],{"class":222,"line":399},[220,20218,17970],{"class":226},[220,20220,353],{"class":264},[220,20222,20223],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,20225,20226,20229,20231],{"class":222,"line":644},[220,20227,20228],{"class":226}," :intensity",[220,20230,353],{"class":264},[220,20232,14954],{"class":230},[220,20234,20235],{"class":222,"line":650},[220,20236,17271],{"class":230},[220,20238,20239],{"class":222,"line":656},[220,20240,17276],{"class":230},[220,20242,20243],{"class":222,"line":673},[220,20244,20245],{"class":230}," outputMin: 0.4,\n",[220,20247,20248],{"class":222,"line":682},[220,20249,20250],{"class":230}," outputMax: 1.0,\n",[220,20252,20253],{"class":222,"line":691},[220,20254,20255],{"class":230}," speed: 0.6\n",[220,20257,20258],{"class":222,"line":696},[220,20259,17301],{"class":230},[220,20261,20262],{"class":222,"line":702},[220,20263,1234],{"class":264},[220,20265,20266,20268,20270],{"class":222,"line":718},[220,20267,402],{"class":264},[220,20269,347],{"class":346},[220,20271,359],{"class":264},[212,20273,20275],{"className":409,"code":20274,"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,20276,20277,20291,20311,20317,20335,20344,20352,20360,20368,20376,20383,20387,20391],{"__ignoreMap":178},[220,20278,20279,20281,20283,20285,20287,20289],{"class":222,"line":223},[220,20280,343],{"class":264},[220,20282,347],{"class":420},[220,20284,423],{"class":226},[220,20286,353],{"class":260},[220,20288,356],{"class":230},[220,20290,359],{"class":264},[220,20292,20293,20295,20297,20299,20301,20303,20305,20307,20309],{"class":222,"line":179},[220,20294,364],{"class":264},[220,20296,367],{"class":420},[220,20298,370],{"class":226},[220,20300,353],{"class":260},[220,20302,375],{"class":230},[220,20304,378],{"class":226},[220,20306,353],{"class":260},[220,20308,20205],{"class":230},[220,20310,386],{"class":264},[220,20312,20313,20315],{"class":222,"line":389},[220,20314,364],{"class":264},[220,20316,20214],{"class":420},[220,20318,20319,20321,20323,20326,20328,20331,20333],{"class":222,"line":399},[220,20320,18056],{"class":226},[220,20322,353],{"class":260},[220,20324,20325],{"class":264},"{{ type: ",[220,20327,18067],{"class":230},[220,20329,20330],{"class":264},", smoothing: ",[220,20332,15911],{"class":420},[220,20334,2803],{"class":264},[220,20336,20337,20340,20342],{"class":222,"line":644},[220,20338,20339],{"class":226}," intensity",[220,20341,353],{"class":260},[220,20343,15897],{"class":264},[220,20345,20346,20348,20350],{"class":222,"line":650},[220,20347,16241],{"class":264},[220,20349,17361],{"class":230},[220,20351,1760],{"class":264},[220,20353,20354,20356,20358],{"class":222,"line":656},[220,20355,17368],{"class":264},[220,20357,17371],{"class":230},[220,20359,1760],{"class":264},[220,20361,20362,20364,20366],{"class":222,"line":673},[220,20363,17378],{"class":264},[220,20365,8100],{"class":420},[220,20367,1760],{"class":264},[220,20369,20370,20372,20374],{"class":222,"line":682},[220,20371,17387],{"class":264},[220,20373,17852],{"class":420},[220,20375,1760],{"class":264},[220,20377,20378,20380],{"class":222,"line":691},[220,20379,17396],{"class":264},[220,20381,20382],{"class":420},"0.6\n",[220,20384,20385],{"class":222,"line":696},[220,20386,15975],{"class":264},[220,20388,20389],{"class":222,"line":702},[220,20390,1234],{"class":264},[220,20392,20393,20395,20397],{"class":222,"line":718},[220,20394,402],{"class":264},[220,20396,347],{"class":420},[220,20398,359],{"class":264},[212,20400,20402],{"className":468,"code":20401,"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,20403,20404,20418,20438,20444,20460,20468,20476,20484,20492,20500,20506,20510,20514],{"__ignoreMap":178},[220,20405,20406,20408,20410,20412,20414,20416],{"class":222,"line":223},[220,20407,343],{"class":264},[220,20409,347],{"class":420},[220,20411,350],{"class":226},[220,20413,353],{"class":260},[220,20415,356],{"class":230},[220,20417,359],{"class":264},[220,20419,20420,20422,20424,20426,20428,20430,20432,20434,20436],{"class":222,"line":179},[220,20421,364],{"class":264},[220,20423,367],{"class":420},[220,20425,370],{"class":226},[220,20427,353],{"class":260},[220,20429,375],{"class":230},[220,20431,378],{"class":226},[220,20433,353],{"class":260},[220,20435,20205],{"class":230},[220,20437,386],{"class":264},[220,20439,20440,20442],{"class":222,"line":389},[220,20441,364],{"class":264},[220,20443,20214],{"class":420},[220,20445,20446,20448,20450,20452,20454,20456,20458],{"class":222,"line":399},[220,20447,18056],{"class":226},[220,20449,353],{"class":260},[220,20451,20325],{"class":264},[220,20453,18067],{"class":230},[220,20455,20330],{"class":264},[220,20457,15911],{"class":420},[220,20459,2803],{"class":264},[220,20461,20462,20464,20466],{"class":222,"line":644},[220,20463,20339],{"class":226},[220,20465,353],{"class":260},[220,20467,15897],{"class":264},[220,20469,20470,20472,20474],{"class":222,"line":650},[220,20471,16241],{"class":264},[220,20473,17361],{"class":230},[220,20475,1760],{"class":264},[220,20477,20478,20480,20482],{"class":222,"line":656},[220,20479,17368],{"class":264},[220,20481,17371],{"class":230},[220,20483,1760],{"class":264},[220,20485,20486,20488,20490],{"class":222,"line":673},[220,20487,17378],{"class":264},[220,20489,8100],{"class":420},[220,20491,1760],{"class":264},[220,20493,20494,20496,20498],{"class":222,"line":682},[220,20495,17387],{"class":264},[220,20497,17852],{"class":420},[220,20499,1760],{"class":264},[220,20501,20502,20504],{"class":222,"line":691},[220,20503,17396],{"class":264},[220,20505,20382],{"class":420},[220,20507,20508],{"class":222,"line":696},[220,20509,15975],{"class":264},[220,20511,20512],{"class":222,"line":702},[220,20513,1234],{"class":264},[220,20515,20516,20518,20520],{"class":222,"line":718},[220,20517,402],{"class":264},[220,20519,347],{"class":420},[220,20521,359],{"class":264},[212,20523,20524],{"className":468,"code":20401,"language":469,"meta":178,"style":178},[99,20525,20526,20540,20560,20566,20582,20590,20598,20606,20614,20622,20628,20632,20636],{"__ignoreMap":178},[220,20527,20528,20530,20532,20534,20536,20538],{"class":222,"line":223},[220,20529,343],{"class":264},[220,20531,347],{"class":420},[220,20533,350],{"class":226},[220,20535,353],{"class":260},[220,20537,356],{"class":230},[220,20539,359],{"class":264},[220,20541,20542,20544,20546,20548,20550,20552,20554,20556,20558],{"class":222,"line":179},[220,20543,364],{"class":264},[220,20545,367],{"class":420},[220,20547,370],{"class":226},[220,20549,353],{"class":260},[220,20551,375],{"class":230},[220,20553,378],{"class":226},[220,20555,353],{"class":260},[220,20557,20205],{"class":230},[220,20559,386],{"class":264},[220,20561,20562,20564],{"class":222,"line":389},[220,20563,364],{"class":264},[220,20565,20214],{"class":420},[220,20567,20568,20570,20572,20574,20576,20578,20580],{"class":222,"line":399},[220,20569,18056],{"class":226},[220,20571,353],{"class":260},[220,20573,20325],{"class":264},[220,20575,18067],{"class":230},[220,20577,20330],{"class":264},[220,20579,15911],{"class":420},[220,20581,2803],{"class":264},[220,20583,20584,20586,20588],{"class":222,"line":644},[220,20585,20339],{"class":226},[220,20587,353],{"class":260},[220,20589,15897],{"class":264},[220,20591,20592,20594,20596],{"class":222,"line":650},[220,20593,16241],{"class":264},[220,20595,17361],{"class":230},[220,20597,1760],{"class":264},[220,20599,20600,20602,20604],{"class":222,"line":656},[220,20601,17368],{"class":264},[220,20603,17371],{"class":230},[220,20605,1760],{"class":264},[220,20607,20608,20610,20612],{"class":222,"line":673},[220,20609,17378],{"class":264},[220,20611,8100],{"class":420},[220,20613,1760],{"class":264},[220,20615,20616,20618,20620],{"class":222,"line":682},[220,20617,17387],{"class":264},[220,20619,17852],{"class":420},[220,20621,1760],{"class":264},[220,20623,20624,20626],{"class":222,"line":691},[220,20625,17396],{"class":264},[220,20627,20382],{"class":420},[220,20629,20630],{"class":222,"line":696},[220,20631,15975],{"class":264},[220,20633,20634],{"class":222,"line":702},[220,20635,1234],{"class":264},[220,20637,20638,20640,20642],{"class":222,"line":718},[220,20639,402],{"class":264},[220,20641,347],{"class":420},[220,20643,359],{"class":264},[23,20645,20647],{"id":20646},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,20649,20650,20651,20654],{},"In the JavaScript API, ",[99,20652,20653],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,20656,20658],{"className":251,"code":20657,"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,20659,20660,20665,20679,20683,20700,20704,20708,20712,20717,20729,20734,20743,20752,20761,20769,20773,20777,20781,20786],{"__ignoreMap":178},[220,20661,20662],{"class":222,"line":223},[220,20663,20664],{"class":609},"\u002F\u002F Start with a static value\n",[220,20666,20667,20669,20671,20673,20675,20677],{"class":222,"line":179},[220,20668,1735],{"class":260},[220,20670,1738],{"class":420},[220,20672,1741],{"class":260},[220,20674,1744],{"class":260},[220,20676,1747],{"class":226},[220,20678,1750],{"class":264},[220,20680,20681],{"class":222,"line":389},[220,20682,1765],{"class":264},[220,20684,20685,20687,20689,20691,20694,20696,20698],{"class":222,"line":399},[220,20686,1770],{"class":264},[220,20688,6409],{"class":230},[220,20690,9297],{"class":264},[220,20692,20693],{"class":230},"'c'",[220,20695,7392],{"class":264},[220,20697,8100],{"class":420},[220,20699,1782],{"class":264},[220,20701,20702],{"class":222,"line":644},[220,20703,1787],{"class":264},[220,20705,20706],{"class":222,"line":650},[220,20707,1792],{"class":264},[220,20709,20710],{"class":222,"line":656},[220,20711,647],{"emptyLinePlaceholder":194},[220,20713,20714],{"class":222,"line":673},[220,20715,20716],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,20718,20719,20721,20723,20725,20727],{"class":222,"line":682},[220,20720,11455],{"class":264},[220,20722,11458],{"class":226},[220,20724,2626],{"class":264},[220,20726,20693],{"class":230},[220,20728,11820],{"class":264},[220,20730,20731],{"class":222,"line":691},[220,20732,20733],{"class":264}," radius: {\n",[220,20735,20736,20739,20741],{"class":222,"line":696},[220,20737,20738],{"class":264}," type: ",[220,20740,17361],{"class":230},[220,20742,1760],{"class":264},[220,20744,20745,20748,20750],{"class":222,"line":702},[220,20746,20747],{"class":264}," mode: ",[220,20749,17371],{"class":230},[220,20751,1760],{"class":264},[220,20753,20754,20757,20759],{"class":222,"line":718},[220,20755,20756],{"class":264}," outputMin: ",[220,20758,16833],{"class":420},[220,20760,1760],{"class":264},[220,20762,20763,20766],{"class":222,"line":727},[220,20764,20765],{"class":264}," outputMax: ",[220,20767,20768],{"class":420},"0.7\n",[220,20770,20771],{"class":222,"line":2664},[220,20772,3192],{"class":264},[220,20774,20775],{"class":222,"line":3459},[220,20776,1792],{"class":264},[220,20778,20779],{"class":222,"line":9514},[220,20780,647],{"emptyLinePlaceholder":194},[220,20782,20783],{"class":222,"line":9525},[220,20784,20785],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,20787,20788,20790,20792,20794,20796,20799,20801],{"class":222,"line":9530},[220,20789,11455],{"class":264},[220,20791,11458],{"class":226},[220,20793,2626],{"class":264},[220,20795,20693],{"class":230},[220,20797,20798],{"class":264},", { radius: ",[220,20800,8100],{"class":420},[220,20802,11470],{"class":264},[1504,20804,14848],{},{"title":178,"searchDepth":179,"depth":179,"links":20806},[20807,20808,20809,20810,20811,20812],{"id":17218,"depth":179,"text":17218},{"id":17906,"depth":179,"text":17906},{"id":18640,"depth":179,"text":18640},{"id":19271,"depth":179,"text":19271},{"id":20159,"depth":179,"text":20160},{"id":20646,"depth":179,"text":20647},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":17155,"description":20813},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":20820,"title":20821,"body":20822,"category":10084,"description":25691,"exclude":190,"extension":191,"forceFramework":190,"icon":25692,"meta":25693,"navigation":194,"path":25694,"seo":25695,"stem":25696,"__hash__":25697},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":20823,"toc":25635},[20824,20827,20830,20850,20853,20868,20872,20888,21532,21534,21538,21546,21552,21555,21588,21616,21618,21625,21628,21695,21740,21742,21749,21752,21837,21891,21893,21900,21903,21992,22042,22044,22051,22054,22143,22193,22195,22202,22205,22257,22292,22294,22301,22304,22391,22442,22444,22451,22454,22537,22586,22588,22595,22598,22671,22714,22716,22723,22726,22810,22861,22863,22870,22873,22957,23009,23011,23015,23035,23048,23069,23179,23185,23188,23242,23295,23297,23304,23307,23421,23498,23500,23507,23510,23586,23643,23645,23652,23655,23714,23764,23766,23773,23776,23870,23936,23938,23945,23948,24023,24081,24083,24090,24100,24194,24261,24263,24270,24273,24348,24406,24408,24415,24418,24494,24552,24554,24561,24564,24660,24729,24731,24738,24744,24818,24876,24878,24885,24888,24979,25046,25048,25052,25055,25072,25191,25195,25210,25286,25295,25624,25633],[11,20825,20821],{"id":20826},"shape-sdf-effects",[19,20828],{":preset":20829,"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,20831,20832,20833,1895,20835,20838,20839,20842,20843,20846,20847,20849],{},"Several components — such as ",[159,20834,15323],{},[159,20836,20837],{},"Neon",", and ",[159,20840,20841],{},"Emboss"," — are driven by a ",[1847,20844,20845],{},"shape",". These effects accept a ",[99,20848,20845],{}," 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,20851,20852],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,20854,20855,20856,20859,20860,20863,20864,20867],{},"Shapes come in two flavours: flat ",[159,20857,20858],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,20861,20862],{},"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,20865,20866],{},"extrude"," your own SVG into a solid 3D slab.",[23,20869,20871],{"id":20870},"configuration","Configuration",[15,20873,1839,20874,20876,20877,20880,20881,18602,20884,20887],{},[99,20875,20845],{}," prop accepts a configuration object. The only required key is ",[99,20878,20879],{},"type",", which selects one of the built-in shapes, like ",[99,20882,20883],{},"circleSDF",[99,20885,20886],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,20889,20890,20964,21109,21233,21357],{":tabs":1557},[212,20891,20893],{"className":334,"code":20892,"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,20894,20895,20900,20916,20920,20925,20940,20944,20949],{"__ignoreMap":178},[220,20896,20897],{"class":222,"line":223},[220,20898,20899],{"class":609},"\u003C!-- Circle (default) -->\n",[220,20901,20902,20904,20906,20909,20911,20914],{"class":222,"line":179},[220,20903,343],{"class":264},[220,20905,15323],{"class":346},[220,20907,20908],{"class":226}," :shape",[220,20910,353],{"class":264},[220,20912,20913],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,20915,386],{"class":264},[220,20917,20918],{"class":222,"line":389},[220,20919,647],{"emptyLinePlaceholder":194},[220,20921,20922],{"class":222,"line":399},[220,20923,20924],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,20926,20927,20929,20931,20933,20935,20938],{"class":222,"line":644},[220,20928,343],{"class":264},[220,20930,20837],{"class":346},[220,20932,20908],{"class":226},[220,20934,353],{"class":264},[220,20936,20937],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,20939,386],{"class":264},[220,20941,20942],{"class":222,"line":650},[220,20943,647],{"emptyLinePlaceholder":194},[220,20945,20946],{"class":222,"line":656},[220,20947,20948],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,20950,20951,20953,20955,20957,20959,20962],{"class":222,"line":673},[220,20952,343],{"class":264},[220,20954,20841],{"class":346},[220,20956,20908],{"class":226},[220,20958,353],{"class":264},[220,20960,20961],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,20963,386],{"class":264},[212,20965,20967],{"className":409,"code":20966,"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,20968,20969,20974,21009,21013,21018,21059,21063,21068],{"__ignoreMap":178},[220,20970,20971],{"class":222,"line":223},[220,20972,20973],{"class":609},"\u002F\u002F Circle (default)\n",[220,20975,20976,20978,20980,20983,20985,20987,20990,20992,20995,20998,21001,21003,21006],{"class":222,"line":179},[220,20977,343],{"class":264},[220,20979,15323],{"class":420},[220,20981,20982],{"class":226}," shape",[220,20984,353],{"class":260},[220,20986,743],{"class":264},[220,20988,20989],{"class":420},"JSON",[220,20991,4685],{"class":264},[220,20993,20994],{"class":226},"stringify",[220,20996,20997],{"class":264},"({ type: ",[220,20999,21000],{"class":230},"\"circleSDF\"",[220,21002,6417],{"class":264},[220,21004,21005],{"class":420},"0.35",[220,21007,21008],{"class":264}," })} \u002F>\n",[220,21010,21011],{"class":222,"line":389},[220,21012,647],{"emptyLinePlaceholder":194},[220,21014,21015],{"class":222,"line":399},[220,21016,21017],{"class":609},"\u002F\u002F Six-pointed star\n",[220,21019,21020,21022,21024,21026,21028,21030,21032,21034,21036,21038,21041,21043,21045,21048,21051,21054,21057],{"class":222,"line":644},[220,21021,343],{"class":264},[220,21023,20837],{"class":420},[220,21025,20982],{"class":226},[220,21027,353],{"class":260},[220,21029,743],{"class":264},[220,21031,20989],{"class":420},[220,21033,4685],{"class":264},[220,21035,20994],{"class":226},[220,21037,20997],{"class":264},[220,21039,21040],{"class":230},"\"starSDF\"",[220,21042,6417],{"class":264},[220,21044,21005],{"class":420},[220,21046,21047],{"class":264},", sides: ",[220,21049,21050],{"class":420},"6",[220,21052,21053],{"class":264},", innerRatio: ",[220,21055,21056],{"class":420},"0.45",[220,21058,21008],{"class":264},[220,21060,21061],{"class":222,"line":650},[220,21062,647],{"emptyLinePlaceholder":194},[220,21064,21065],{"class":222,"line":656},[220,21066,21067],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,21069,21070,21072,21074,21076,21078,21080,21082,21084,21086,21088,21091,21094,21096,21098,21101,21104,21107],{"class":222,"line":673},[220,21071,343],{"class":264},[220,21073,20841],{"class":420},[220,21075,20982],{"class":226},[220,21077,353],{"class":260},[220,21079,743],{"class":264},[220,21081,20989],{"class":420},[220,21083,4685],{"class":264},[220,21085,20994],{"class":226},[220,21087,20997],{"class":264},[220,21089,21090],{"class":230},"\"roundedRectSDF\"",[220,21092,21093],{"class":264},", width: ",[220,21095,8100],{"class":420},[220,21097,811],{"class":264},[220,21099,21100],{"class":420},"0.25",[220,21102,21103],{"class":264},", rounding: ",[220,21105,21106],{"class":420},"0.06",[220,21108,21008],{"class":264},[212,21110,21111],{"className":468,"code":20966,"language":469,"meta":178,"style":178},[99,21112,21113,21117,21145,21149,21153,21189,21193,21197],{"__ignoreMap":178},[220,21114,21115],{"class":222,"line":223},[220,21116,20973],{"class":609},[220,21118,21119,21121,21123,21125,21127,21129,21131,21133,21135,21137,21139,21141,21143],{"class":222,"line":179},[220,21120,343],{"class":264},[220,21122,15323],{"class":420},[220,21124,20982],{"class":226},[220,21126,353],{"class":260},[220,21128,743],{"class":264},[220,21130,20989],{"class":420},[220,21132,4685],{"class":264},[220,21134,20994],{"class":226},[220,21136,20997],{"class":264},[220,21138,21000],{"class":230},[220,21140,6417],{"class":264},[220,21142,21005],{"class":420},[220,21144,21008],{"class":264},[220,21146,21147],{"class":222,"line":389},[220,21148,647],{"emptyLinePlaceholder":194},[220,21150,21151],{"class":222,"line":399},[220,21152,21017],{"class":609},[220,21154,21155,21157,21159,21161,21163,21165,21167,21169,21171,21173,21175,21177,21179,21181,21183,21185,21187],{"class":222,"line":644},[220,21156,343],{"class":264},[220,21158,20837],{"class":420},[220,21160,20982],{"class":226},[220,21162,353],{"class":260},[220,21164,743],{"class":264},[220,21166,20989],{"class":420},[220,21168,4685],{"class":264},[220,21170,20994],{"class":226},[220,21172,20997],{"class":264},[220,21174,21040],{"class":230},[220,21176,6417],{"class":264},[220,21178,21005],{"class":420},[220,21180,21047],{"class":264},[220,21182,21050],{"class":420},[220,21184,21053],{"class":264},[220,21186,21056],{"class":420},[220,21188,21008],{"class":264},[220,21190,21191],{"class":222,"line":650},[220,21192,647],{"emptyLinePlaceholder":194},[220,21194,21195],{"class":222,"line":656},[220,21196,21067],{"class":609},[220,21198,21199,21201,21203,21205,21207,21209,21211,21213,21215,21217,21219,21221,21223,21225,21227,21229,21231],{"class":222,"line":673},[220,21200,343],{"class":264},[220,21202,20841],{"class":420},[220,21204,20982],{"class":226},[220,21206,353],{"class":260},[220,21208,743],{"class":264},[220,21210,20989],{"class":420},[220,21212,4685],{"class":264},[220,21214,20994],{"class":226},[220,21216,20997],{"class":264},[220,21218,21090],{"class":230},[220,21220,21093],{"class":264},[220,21222,8100],{"class":420},[220,21224,811],{"class":264},[220,21226,21100],{"class":420},[220,21228,21103],{"class":264},[220,21230,21106],{"class":420},[220,21232,21008],{"class":264},[212,21234,21235],{"className":468,"code":20966,"language":469,"meta":178,"style":178},[99,21236,21237,21241,21269,21273,21277,21313,21317,21321],{"__ignoreMap":178},[220,21238,21239],{"class":222,"line":223},[220,21240,20973],{"class":609},[220,21242,21243,21245,21247,21249,21251,21253,21255,21257,21259,21261,21263,21265,21267],{"class":222,"line":179},[220,21244,343],{"class":264},[220,21246,15323],{"class":420},[220,21248,20982],{"class":226},[220,21250,353],{"class":260},[220,21252,743],{"class":264},[220,21254,20989],{"class":420},[220,21256,4685],{"class":264},[220,21258,20994],{"class":226},[220,21260,20997],{"class":264},[220,21262,21000],{"class":230},[220,21264,6417],{"class":264},[220,21266,21005],{"class":420},[220,21268,21008],{"class":264},[220,21270,21271],{"class":222,"line":389},[220,21272,647],{"emptyLinePlaceholder":194},[220,21274,21275],{"class":222,"line":399},[220,21276,21017],{"class":609},[220,21278,21279,21281,21283,21285,21287,21289,21291,21293,21295,21297,21299,21301,21303,21305,21307,21309,21311],{"class":222,"line":644},[220,21280,343],{"class":264},[220,21282,20837],{"class":420},[220,21284,20982],{"class":226},[220,21286,353],{"class":260},[220,21288,743],{"class":264},[220,21290,20989],{"class":420},[220,21292,4685],{"class":264},[220,21294,20994],{"class":226},[220,21296,20997],{"class":264},[220,21298,21040],{"class":230},[220,21300,6417],{"class":264},[220,21302,21005],{"class":420},[220,21304,21047],{"class":264},[220,21306,21050],{"class":420},[220,21308,21053],{"class":264},[220,21310,21056],{"class":420},[220,21312,21008],{"class":264},[220,21314,21315],{"class":222,"line":650},[220,21316,647],{"emptyLinePlaceholder":194},[220,21318,21319],{"class":222,"line":656},[220,21320,21067],{"class":609},[220,21322,21323,21325,21327,21329,21331,21333,21335,21337,21339,21341,21343,21345,21347,21349,21351,21353,21355],{"class":222,"line":673},[220,21324,343],{"class":264},[220,21326,20841],{"class":420},[220,21328,20982],{"class":226},[220,21330,353],{"class":260},[220,21332,743],{"class":264},[220,21334,20989],{"class":420},[220,21336,4685],{"class":264},[220,21338,20994],{"class":226},[220,21340,20997],{"class":264},[220,21342,21090],{"class":230},[220,21344,21093],{"class":264},[220,21346,8100],{"class":420},[220,21348,811],{"class":264},[220,21350,21100],{"class":420},[220,21352,21103],{"class":264},[220,21354,21106],{"class":420},[220,21356,21008],{"class":264},[212,21358,21360],{"className":251,"code":21359,"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,21361,21362,21366,21380,21384,21404,21408,21412,21416,21420,21434,21438,21464,21468,21472,21476,21480,21494,21498,21524,21528],{"__ignoreMap":178},[220,21363,21364],{"class":222,"line":223},[220,21365,20973],{"class":609},[220,21367,21368,21370,21372,21374,21376,21378],{"class":222,"line":179},[220,21369,1735],{"class":260},[220,21371,1738],{"class":420},[220,21373,1741],{"class":260},[220,21375,1744],{"class":260},[220,21377,1747],{"class":226},[220,21379,1750],{"class":264},[220,21381,21382],{"class":222,"line":389},[220,21383,1765],{"class":264},[220,21385,21386,21388,21391,21394,21397,21399,21401],{"class":222,"line":399},[220,21387,1770],{"class":264},[220,21389,21390],{"class":230},"'Glass'",[220,21392,21393],{"class":264},", props: { shape: { type: ",[220,21395,21396],{"class":230},"'circleSDF'",[220,21398,6417],{"class":264},[220,21400,21005],{"class":420},[220,21402,21403],{"class":264}," } } }\n",[220,21405,21406],{"class":222,"line":644},[220,21407,1787],{"class":264},[220,21409,21410],{"class":222,"line":650},[220,21411,1792],{"class":264},[220,21413,21414],{"class":222,"line":656},[220,21415,647],{"emptyLinePlaceholder":194},[220,21417,21418],{"class":222,"line":673},[220,21419,21017],{"class":609},[220,21421,21422,21424,21426,21428,21430,21432],{"class":222,"line":682},[220,21423,1735],{"class":260},[220,21425,1738],{"class":420},[220,21427,1741],{"class":260},[220,21429,1744],{"class":260},[220,21431,1747],{"class":226},[220,21433,1750],{"class":264},[220,21435,21436],{"class":222,"line":691},[220,21437,1765],{"class":264},[220,21439,21440,21442,21445,21447,21450,21452,21454,21456,21458,21460,21462],{"class":222,"line":696},[220,21441,1770],{"class":264},[220,21443,21444],{"class":230},"'Neon'",[220,21446,21393],{"class":264},[220,21448,21449],{"class":230},"'starSDF'",[220,21451,6417],{"class":264},[220,21453,21005],{"class":420},[220,21455,21047],{"class":264},[220,21457,21050],{"class":420},[220,21459,21053],{"class":264},[220,21461,21056],{"class":420},[220,21463,21403],{"class":264},[220,21465,21466],{"class":222,"line":702},[220,21467,1787],{"class":264},[220,21469,21470],{"class":222,"line":718},[220,21471,1792],{"class":264},[220,21473,21474],{"class":222,"line":727},[220,21475,647],{"emptyLinePlaceholder":194},[220,21477,21478],{"class":222,"line":2664},[220,21479,21067],{"class":609},[220,21481,21482,21484,21486,21488,21490,21492],{"class":222,"line":3459},[220,21483,1735],{"class":260},[220,21485,1738],{"class":420},[220,21487,1741],{"class":260},[220,21489,1744],{"class":260},[220,21491,1747],{"class":226},[220,21493,1750],{"class":264},[220,21495,21496],{"class":222,"line":9514},[220,21497,1765],{"class":264},[220,21499,21500,21502,21505,21507,21510,21512,21514,21516,21518,21520,21522],{"class":222,"line":9525},[220,21501,1770],{"class":264},[220,21503,21504],{"class":230},"'Emboss'",[220,21506,21393],{"class":264},[220,21508,21509],{"class":230},"'roundedRectSDF'",[220,21511,21093],{"class":264},[220,21513,8100],{"class":420},[220,21515,811],{"class":264},[220,21517,21100],{"class":420},[220,21519,21103],{"class":264},[220,21521,21106],{"class":420},[220,21523,21403],{"class":264},[220,21525,21526],{"class":222,"line":9530},[220,21527,1787],{"class":264},[220,21529,21530],{"class":222,"line":10851},[220,21531,1792],{"class":264},[4358,21533],{},[23,21535,21537],{"id":21536},"_2d-shapes","2D shapes",[15,21539,21540,21541,15270,21543,21545],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,21542,8524],{},[99,21544,7605],{}," from the centre to an edge), and rotations are in degrees.",[3198,21547,21549,21550],{"id":21548},"circle-circlesdf","Circle — ",[99,21551,20883],{},[15,21553,21554],{},"A perfect circle. The default shape for all shape effects.",[1794,21556,21557,21569],{},[1797,21558,21559],{},[1800,21560,21561,21563,21565,21567],{},[1803,21562,17771],{},[1803,21564,15044],{},[1803,21566,15047],{},[1803,21568,1808],{},[1810,21570,21571],{},[1800,21572,21573,21577,21581,21585],{},[1815,21574,21575],{},[99,21576,11536],{},[1815,21578,21579],{},[99,21580,15157],{},[1815,21582,21583],{},[99,21584,21005],{},[1815,21586,21587],{},"Circle radius in UV space",[212,21589,21591],{"className":4413,"code":21590,"language":4415,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,21592,21593],{"__ignoreMap":178},[220,21594,21595,21598,21601,21603,21605,21607,21610,21612,21614],{"class":222,"line":223},[220,21596,21597],{"class":264},"{ ",[220,21599,21600],{"class":420},"\"type\"",[220,21602,4450],{"class":264},[220,21604,21000],{"class":230},[220,21606,1895],{"class":264},[220,21608,21609],{"class":420},"\"radius\"",[220,21611,4450],{"class":264},[220,21613,21005],{"class":420},[220,21615,5520],{"class":264},[4358,21617],{},[3198,21619,21621,21622],{"id":21620},"ellipse-ellipsesdf","Ellipse — ",[99,21623,21624],{},"ellipseSDF",[15,21626,21627],{},"A stretched circle with independent horizontal and vertical radii.",[1794,21629,21630,21642],{},[1797,21631,21632],{},[1800,21633,21634,21636,21638,21640],{},[1803,21635,17771],{},[1803,21637,15044],{},[1803,21639,15047],{},[1803,21641,1808],{},[1810,21643,21644,21661,21678],{},[1800,21645,21646,21650,21654,21658],{},[1815,21647,21648],{},[99,21649,15021],{},[1815,21651,21652],{},[99,21653,15157],{},[1815,21655,21656],{},[99,21657,8100],{},[1815,21659,21660],{},"Horizontal radius (semi-major axis)",[1800,21662,21663,21667,21671,21675],{},[1815,21664,21665],{},[99,21666,15024],{},[1815,21668,21669],{},[99,21670,15157],{},[1815,21672,21673],{},[99,21674,21100],{},[1815,21676,21677],{},"Vertical radius (semi-minor axis)",[1800,21679,21680,21684,21688,21692],{},[1815,21681,21682],{},[99,21683,11688],{},[1815,21685,21686],{},[99,21687,15157],{},[1815,21689,21690],{},[99,21691,8524],{},[1815,21693,21694],{},"Rotation in degrees",[212,21696,21698],{"className":4413,"code":21697,"language":4415,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,21699,21700],{"__ignoreMap":178},[220,21701,21702,21704,21706,21708,21711,21713,21716,21718,21720,21722,21725,21727,21729,21731,21734,21736,21738],{"class":222,"line":223},[220,21703,21597],{"class":264},[220,21705,21600],{"class":420},[220,21707,4450],{"class":264},[220,21709,21710],{"class":230},"\"ellipseSDF\"",[220,21712,1895],{"class":264},[220,21714,21715],{"class":420},"\"width\"",[220,21717,4450],{"class":264},[220,21719,8100],{"class":420},[220,21721,1895],{"class":264},[220,21723,21724],{"class":420},"\"height\"",[220,21726,4450],{"class":264},[220,21728,21100],{"class":420},[220,21730,1895],{"class":264},[220,21732,21733],{"class":420},"\"rotation\"",[220,21735,4450],{"class":264},[220,21737,8524],{"class":420},[220,21739,5520],{"class":264},[4358,21741],{},[3198,21743,21745,21746],{"id":21744},"polygon-polygonsdf","Polygon — ",[99,21747,21748],{},"polygonSDF",[15,21750,21751],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,21753,21754,21766],{},[1797,21755,21756],{},[1800,21757,21758,21760,21762,21764],{},[1803,21759,17771],{},[1803,21761,15044],{},[1803,21763,15047],{},[1803,21765,1808],{},[1810,21767,21768,21785,21803,21821],{},[1800,21769,21770,21774,21778,21782],{},[1815,21771,21772],{},[99,21773,11536],{},[1815,21775,21776],{},[99,21777,15157],{},[1815,21779,21780],{},[99,21781,21005],{},[1815,21783,21784],{},"Distance from center to nearest edge midpoint",[1800,21786,21787,21792,21796,21800],{},[1815,21788,21789],{},[99,21790,21791],{},"sides",[1815,21793,21794],{},[99,21795,15157],{},[1815,21797,21798],{},[99,21799,21050],{},[1815,21801,21802],{},"Number of sides",[1800,21804,21805,21810,21814,21818],{},[1815,21806,21807],{},[99,21808,21809],{},"rounding",[1815,21811,21812],{},[99,21813,15157],{},[1815,21815,21816],{},[99,21817,8524],{},[1815,21819,21820],{},"Corner rounding amount",[1800,21822,21823,21827,21831,21835],{},[1815,21824,21825],{},[99,21826,11688],{},[1815,21828,21829],{},[99,21830,15157],{},[1815,21832,21833],{},[99,21834,8524],{},[1815,21836,21694],{},[212,21838,21840],{"className":4413,"code":21839,"language":4415,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,21841,21842],{"__ignoreMap":178},[220,21843,21844,21846,21848,21850,21853,21855,21857,21859,21862,21864,21867,21869,21871,21873,21876,21878,21881,21883,21885,21887,21889],{"class":222,"line":223},[220,21845,21597],{"class":264},[220,21847,21600],{"class":420},[220,21849,4450],{"class":264},[220,21851,21852],{"class":230},"\"polygonSDF\"",[220,21854,1895],{"class":264},[220,21856,21609],{"class":420},[220,21858,4450],{"class":264},[220,21860,21861],{"class":420},"0.3",[220,21863,1895],{"class":264},[220,21865,21866],{"class":420},"\"sides\"",[220,21868,4450],{"class":264},[220,21870,21050],{"class":420},[220,21872,1895],{"class":264},[220,21874,21875],{"class":420},"\"rounding\"",[220,21877,4450],{"class":264},[220,21879,21880],{"class":420},"0.05",[220,21882,1895],{"class":264},[220,21884,21733],{"class":420},[220,21886,4450],{"class":264},[220,21888,8524],{"class":420},[220,21890,5520],{"class":264},[4358,21892],{},[3198,21894,21896,21897],{"id":21895},"star-starsdf","Star — ",[99,21898,21899],{},"starSDF",[15,21901,21902],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,21904,21905,21917],{},[1797,21906,21907],{},[1800,21908,21909,21911,21913,21915],{},[1803,21910,17771],{},[1803,21912,15044],{},[1803,21914,15047],{},[1803,21916,1808],{},[1810,21918,21919,21936,21954,21976],{},[1800,21920,21921,21925,21929,21933],{},[1815,21922,21923],{},[99,21924,11536],{},[1815,21926,21927],{},[99,21928,15157],{},[1815,21930,21931],{},[99,21932,21005],{},[1815,21934,21935],{},"Outer tip radius",[1800,21937,21938,21942,21946,21951],{},[1815,21939,21940],{},[99,21941,21791],{},[1815,21943,21944],{},[99,21945,15157],{},[1815,21947,21948],{},[99,21949,21950],{},"5",[1815,21952,21953],{},"Number of points",[1800,21955,21956,21961,21965,21970],{},[1815,21957,21958],{},[99,21959,21960],{},"innerRatio",[1815,21962,21963],{},[99,21964,15157],{},[1815,21966,21967],{},[99,21968,21969],{},"0.382",[1815,21971,21972,21973,21975],{},"Inner vertex radius as a fraction of outer radius — ",[99,21974,21969],{}," gives the classic golden-ratio 5-star",[1800,21977,21978,21982,21986,21990],{},[1815,21979,21980],{},[99,21981,11688],{},[1815,21983,21984],{},[99,21985,15157],{},[1815,21987,21988],{},[99,21989,8524],{},[1815,21991,21694],{},[212,21993,21995],{"className":4413,"code":21994,"language":4415,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,21996,21997],{"__ignoreMap":178},[220,21998,21999,22001,22003,22005,22007,22009,22011,22013,22015,22017,22019,22021,22023,22025,22028,22030,22032,22034,22036,22038,22040],{"class":222,"line":223},[220,22000,21597],{"class":264},[220,22002,21600],{"class":420},[220,22004,4450],{"class":264},[220,22006,21040],{"class":230},[220,22008,1895],{"class":264},[220,22010,21609],{"class":420},[220,22012,4450],{"class":264},[220,22014,21005],{"class":420},[220,22016,1895],{"class":264},[220,22018,21866],{"class":420},[220,22020,4450],{"class":264},[220,22022,21950],{"class":420},[220,22024,1895],{"class":264},[220,22026,22027],{"class":420},"\"innerRatio\"",[220,22029,4450],{"class":264},[220,22031,21969],{"class":420},[220,22033,1895],{"class":264},[220,22035,21733],{"class":420},[220,22037,4450],{"class":264},[220,22039,8524],{"class":420},[220,22041,5520],{"class":264},[4358,22043],{},[3198,22045,22047,22048],{"id":22046},"flower-flowersdf","Flower — ",[99,22049,22050],{},"flowerSDF",[15,22052,22053],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,22055,22056,22068],{},[1797,22057,22058],{},[1800,22059,22060,22062,22064,22066],{},[1803,22061,17771],{},[1803,22063,15044],{},[1803,22065,15047],{},[1803,22067,1808],{},[1810,22069,22070,22087,22104,22127],{},[1800,22071,22072,22076,22080,22084],{},[1815,22073,22074],{},[99,22075,11536],{},[1815,22077,22078],{},[99,22079,15157],{},[1815,22081,22082],{},[99,22083,21005],{},[1815,22085,22086],{},"Outer petal tip radius",[1800,22088,22089,22093,22097,22101],{},[1815,22090,22091],{},[99,22092,21791],{},[1815,22094,22095],{},[99,22096,15157],{},[1815,22098,22099],{},[99,22100,21050],{},[1815,22102,22103],{},"Number of petals",[1800,22105,22106,22110,22114,22118],{},[1815,22107,22108],{},[99,22109,21960],{},[1815,22111,22112],{},[99,22113,15157],{},[1815,22115,22116],{},[99,22117,7605],{},[1815,22119,22120,22121,22123,22124,22126],{},"Valley depth — ",[99,22122,16833],{}," = deep narrow valleys, ",[99,22125,6148],{}," = subtle scalloped edge",[1800,22128,22129,22133,22137,22141],{},[1815,22130,22131],{},[99,22132,11688],{},[1815,22134,22135],{},[99,22136,15157],{},[1815,22138,22139],{},[99,22140,8524],{},[1815,22142,21694],{},[212,22144,22146],{"className":4413,"code":22145,"language":4415,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,22147,22148],{"__ignoreMap":178},[220,22149,22150,22152,22154,22156,22159,22161,22163,22165,22167,22169,22171,22173,22175,22177,22179,22181,22183,22185,22187,22189,22191],{"class":222,"line":223},[220,22151,21597],{"class":264},[220,22153,21600],{"class":420},[220,22155,4450],{"class":264},[220,22157,22158],{"class":230},"\"flowerSDF\"",[220,22160,1895],{"class":264},[220,22162,21609],{"class":420},[220,22164,4450],{"class":264},[220,22166,21005],{"class":420},[220,22168,1895],{"class":264},[220,22170,21866],{"class":420},[220,22172,4450],{"class":264},[220,22174,21050],{"class":420},[220,22176,1895],{"class":264},[220,22178,22027],{"class":420},[220,22180,4450],{"class":264},[220,22182,7605],{"class":420},[220,22184,1895],{"class":264},[220,22186,21733],{"class":420},[220,22188,4450],{"class":264},[220,22190,8524],{"class":420},[220,22192,5520],{"class":264},[4358,22194],{},[3198,22196,22198,22199],{"id":22197},"ring-ringsdf","Ring — ",[99,22200,22201],{},"ringSDF",[15,22203,22204],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,22206,22207,22219],{},[1797,22208,22209],{},[1800,22210,22211,22213,22215,22217],{},[1803,22212,17771],{},[1803,22214,15044],{},[1803,22216,15047],{},[1803,22218,1808],{},[1810,22220,22221,22238],{},[1800,22222,22223,22227,22231,22235],{},[1815,22224,22225],{},[99,22226,11536],{},[1815,22228,22229],{},[99,22230,15157],{},[1815,22232,22233],{},[99,22234,21861],{},[1815,22236,22237],{},"Distance from center to the ring centerline",[1800,22239,22240,22245,22249,22254],{},[1815,22241,22242],{},[99,22243,22244],{},"thickness",[1815,22246,22247],{},[99,22248,15157],{},[1815,22250,22251],{},[99,22252,22253],{},"0.08",[1815,22255,22256],{},"Half-width of the ring on each side of the centerline",[212,22258,22260],{"className":4413,"code":22259,"language":4415,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,22261,22262],{"__ignoreMap":178},[220,22263,22264,22266,22268,22270,22273,22275,22277,22279,22281,22283,22286,22288,22290],{"class":222,"line":223},[220,22265,21597],{"class":264},[220,22267,21600],{"class":420},[220,22269,4450],{"class":264},[220,22271,22272],{"class":230},"\"ringSDF\"",[220,22274,1895],{"class":264},[220,22276,21609],{"class":420},[220,22278,4450],{"class":264},[220,22280,21861],{"class":420},[220,22282,1895],{"class":264},[220,22284,22285],{"class":420},"\"thickness\"",[220,22287,4450],{"class":264},[220,22289,22253],{"class":420},[220,22291,5520],{"class":264},[4358,22293],{},[3198,22295,22297,22298],{"id":22296},"cross-crosssdf","Cross — ",[99,22299,22300],{},"crossSDF",[15,22302,22303],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,22305,22306,22318],{},[1797,22307,22308],{},[1800,22309,22310,22312,22314,22316],{},[1803,22311,17771],{},[1803,22313,15044],{},[1803,22315,15047],{},[1803,22317,1808],{},[1810,22319,22320,22337,22354,22371],{},[1800,22321,22322,22326,22330,22334],{},[1815,22323,22324],{},[99,22325,11544],{},[1815,22327,22328],{},[99,22329,15157],{},[1815,22331,22332],{},[99,22333,21100],{},[1815,22335,22336],{},"Arm half-length",[1800,22338,22339,22343,22347,22351],{},[1815,22340,22341],{},[99,22342,22244],{},[1815,22344,22345],{},[99,22346,15157],{},[1815,22348,22349],{},[99,22350,22253],{},[1815,22352,22353],{},"Arm half-width",[1800,22355,22356,22360,22364,22368],{},[1815,22357,22358],{},[99,22359,21809],{},[1815,22361,22362],{},[99,22363,15157],{},[1815,22365,22366],{},[99,22367,19541],{},[1815,22369,22370],{},"Corner rounding at arm ends and intersections",[1800,22372,22373,22377,22381,22385],{},[1815,22374,22375],{},[99,22376,11688],{},[1815,22378,22379],{},[99,22380,15157],{},[1815,22382,22383],{},[99,22384,8524],{},[1815,22386,22387,22388,22390],{},"Rotation in degrees — use ",[99,22389,1295],{}," for an X shape",[212,22392,22394],{"className":4413,"code":22393,"language":4415,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,22395,22396],{"__ignoreMap":178},[220,22397,22398,22400,22402,22404,22407,22409,22412,22414,22416,22418,22420,22422,22424,22426,22428,22430,22432,22434,22436,22438,22440],{"class":222,"line":223},[220,22399,21597],{"class":264},[220,22401,21600],{"class":420},[220,22403,4450],{"class":264},[220,22405,22406],{"class":230},"\"crossSDF\"",[220,22408,1895],{"class":264},[220,22410,22411],{"class":420},"\"size\"",[220,22413,4450],{"class":264},[220,22415,21100],{"class":420},[220,22417,1895],{"class":264},[220,22419,22285],{"class":420},[220,22421,4450],{"class":264},[220,22423,22253],{"class":420},[220,22425,1895],{"class":264},[220,22427,21875],{"class":420},[220,22429,4450],{"class":264},[220,22431,19541],{"class":420},[220,22433,1895],{"class":264},[220,22435,21733],{"class":420},[220,22437,4450],{"class":264},[220,22439,8524],{"class":420},[220,22441,5520],{"class":264},[4358,22443],{},[3198,22445,22447,22448],{"id":22446},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,22449,22450],{},"roundedRectSDF",[15,22452,22453],{},"A rectangle with uniformly rounded corners.",[1794,22455,22456,22468],{},[1797,22457,22458],{},[1800,22459,22460,22462,22464,22466],{},[1803,22461,17771],{},[1803,22463,15044],{},[1803,22465,15047],{},[1803,22467,1808],{},[1810,22469,22470,22487,22504,22521],{},[1800,22471,22472,22476,22480,22484],{},[1815,22473,22474],{},[99,22475,15021],{},[1815,22477,22478],{},[99,22479,15157],{},[1815,22481,22482],{},[99,22483,21005],{},[1815,22485,22486],{},"Half-width",[1800,22488,22489,22493,22497,22501],{},[1815,22490,22491],{},[99,22492,15024],{},[1815,22494,22495],{},[99,22496,15157],{},[1815,22498,22499],{},[99,22500,21100],{},[1815,22502,22503],{},"Half-height",[1800,22505,22506,22510,22514,22518],{},[1815,22507,22508],{},[99,22509,21809],{},[1815,22511,22512],{},[99,22513,15157],{},[1815,22515,22516],{},[99,22517,21880],{},[1815,22519,22520],{},"Corner rounding radius",[1800,22522,22523,22527,22531,22535],{},[1815,22524,22525],{},[99,22526,11688],{},[1815,22528,22529],{},[99,22530,15157],{},[1815,22532,22533],{},[99,22534,8524],{},[1815,22536,21694],{},[212,22538,22540],{"className":4413,"code":22539,"language":4415,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,22541,22542],{"__ignoreMap":178},[220,22543,22544,22546,22548,22550,22552,22554,22556,22558,22560,22562,22564,22566,22568,22570,22572,22574,22576,22578,22580,22582,22584],{"class":222,"line":223},[220,22545,21597],{"class":264},[220,22547,21600],{"class":420},[220,22549,4450],{"class":264},[220,22551,21090],{"class":230},[220,22553,1895],{"class":264},[220,22555,21715],{"class":420},[220,22557,4450],{"class":264},[220,22559,21005],{"class":420},[220,22561,1895],{"class":264},[220,22563,21724],{"class":420},[220,22565,4450],{"class":264},[220,22567,21100],{"class":420},[220,22569,1895],{"class":264},[220,22571,21875],{"class":420},[220,22573,4450],{"class":264},[220,22575,21880],{"class":420},[220,22577,1895],{"class":264},[220,22579,21733],{"class":420},[220,22581,4450],{"class":264},[220,22583,8524],{"class":420},[220,22585,5520],{"class":264},[4358,22587],{},[3198,22589,22591,22592],{"id":22590},"vesica-vesicasdf","Vesica — ",[99,22593,22594],{},"vesicaSDF",[15,22596,22597],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,22599,22600,22612],{},[1797,22601,22602],{},[1800,22603,22604,22606,22608,22610],{},[1803,22605,17771],{},[1803,22607,15044],{},[1803,22609,15047],{},[1803,22611,1808],{},[1810,22613,22614,22631,22655],{},[1800,22615,22616,22620,22624,22628],{},[1815,22617,22618],{},[99,22619,11536],{},[1815,22621,22622],{},[99,22623,15157],{},[1815,22625,22626],{},[99,22627,21005],{},[1815,22629,22630],{},"Radius of each circle",[1800,22632,22633,22638,22642,22646],{},[1815,22634,22635],{},[99,22636,22637],{},"spread",[1815,22639,22640],{},[99,22641,15157],{},[1815,22643,22644],{},[99,22645,7605],{},[1815,22647,22648,22649,22651,22652,22654],{},"Half-distance between circle centers as a fraction of radius — ",[99,22650,8524],{}," = a single circle, ",[99,22653,8528],{}," = an infinitely thin lens",[1800,22656,22657,22661,22665,22669],{},[1815,22658,22659],{},[99,22660,11688],{},[1815,22662,22663],{},[99,22664,15157],{},[1815,22666,22667],{},[99,22668,8524],{},[1815,22670,21694],{},[212,22672,22674],{"className":4413,"code":22673,"language":4415,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,22675,22676],{"__ignoreMap":178},[220,22677,22678,22680,22682,22684,22687,22689,22691,22693,22695,22697,22700,22702,22704,22706,22708,22710,22712],{"class":222,"line":223},[220,22679,21597],{"class":264},[220,22681,21600],{"class":420},[220,22683,4450],{"class":264},[220,22685,22686],{"class":230},"\"vesicaSDF\"",[220,22688,1895],{"class":264},[220,22690,21609],{"class":420},[220,22692,4450],{"class":264},[220,22694,21005],{"class":420},[220,22696,1895],{"class":264},[220,22698,22699],{"class":420},"\"spread\"",[220,22701,4450],{"class":264},[220,22703,7605],{"class":420},[220,22705,1895],{"class":264},[220,22707,21733],{"class":420},[220,22709,4450],{"class":264},[220,22711,8524],{"class":420},[220,22713,5520],{"class":264},[4358,22715],{},[3198,22717,22719,22720],{"id":22718},"crescent-crescentsdf","Crescent — ",[99,22721,22722],{},"crescentSDF",[15,22724,22725],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,22727,22728,22740],{},[1797,22729,22730],{},[1800,22731,22732,22734,22736,22738],{},[1803,22733,17771],{},[1803,22735,15044],{},[1803,22737,15047],{},[1803,22739,1808],{},[1810,22741,22742,22759,22777,22794],{},[1800,22743,22744,22748,22752,22756],{},[1815,22745,22746],{},[99,22747,11536],{},[1815,22749,22750],{},[99,22751,15157],{},[1815,22753,22754],{},[99,22755,21005],{},[1815,22757,22758],{},"Outer circle radius",[1800,22760,22761,22765,22769,22774],{},[1815,22762,22763],{},[99,22764,21960],{},[1815,22766,22767],{},[99,22768,15157],{},[1815,22770,22771],{},[99,22772,22773],{},"0.75",[1815,22775,22776],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,22778,22779,22783,22787,22791],{},[1815,22780,22781],{},[99,22782,17921],{},[1815,22784,22785],{},[99,22786,15157],{},[1815,22788,22789],{},[99,22790,18049],{},[1815,22792,22793],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,22795,22796,22800,22804,22808],{},[1815,22797,22798],{},[99,22799,11688],{},[1815,22801,22802],{},[99,22803,15157],{},[1815,22805,22806],{},[99,22807,8524],{},[1815,22809,21694],{},[212,22811,22813],{"className":4413,"code":22812,"language":4415,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,22814,22815],{"__ignoreMap":178},[220,22816,22817,22819,22821,22823,22826,22828,22830,22832,22834,22836,22838,22840,22842,22844,22847,22849,22851,22853,22855,22857,22859],{"class":222,"line":223},[220,22818,21597],{"class":264},[220,22820,21600],{"class":420},[220,22822,4450],{"class":264},[220,22824,22825],{"class":230},"\"crescentSDF\"",[220,22827,1895],{"class":264},[220,22829,21609],{"class":420},[220,22831,4450],{"class":264},[220,22833,21005],{"class":420},[220,22835,1895],{"class":264},[220,22837,22027],{"class":420},[220,22839,4450],{"class":264},[220,22841,22773],{"class":420},[220,22843,1895],{"class":264},[220,22845,22846],{"class":420},"\"offset\"",[220,22848,4450],{"class":264},[220,22850,18049],{"class":420},[220,22852,1895],{"class":264},[220,22854,21733],{"class":420},[220,22856,4450],{"class":264},[220,22858,8524],{"class":420},[220,22860,5520],{"class":264},[4358,22862],{},[3198,22864,22866,22867],{"id":22865},"trapezoid-trapezoidsdf","Trapezoid — ",[99,22868,22869],{},"trapezoidSDF",[15,22871,22872],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,22874,22875,22887],{},[1797,22876,22877],{},[1800,22878,22879,22881,22883,22885],{},[1803,22880,17771],{},[1803,22882,15044],{},[1803,22884,15047],{},[1803,22886,1808],{},[1810,22888,22889,22907,22925,22941],{},[1800,22890,22891,22896,22900,22904],{},[1815,22892,22893],{},[99,22894,22895],{},"bottomWidth",[1815,22897,22898],{},[99,22899,15157],{},[1815,22901,22902],{},[99,22903,21005],{},[1815,22905,22906],{},"Bottom edge half-width",[1800,22908,22909,22914,22918,22922],{},[1815,22910,22911],{},[99,22912,22913],{},"topWidth",[1815,22915,22916],{},[99,22917,15157],{},[1815,22919,22920],{},[99,22921,16833],{},[1815,22923,22924],{},"Top edge half-width",[1800,22926,22927,22931,22935,22939],{},[1815,22928,22929],{},[99,22930,15024],{},[1815,22932,22933],{},[99,22934,15157],{},[1815,22936,22937],{},[99,22938,21100],{},[1815,22940,22503],{},[1800,22942,22943,22947,22951,22955],{},[1815,22944,22945],{},[99,22946,11688],{},[1815,22948,22949],{},[99,22950,15157],{},[1815,22952,22953],{},[99,22954,8524],{},[1815,22956,21694],{},[212,22958,22960],{"className":4413,"code":22959,"language":4415,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,22961,22962],{"__ignoreMap":178},[220,22963,22964,22966,22968,22970,22973,22975,22978,22980,22982,22984,22987,22989,22991,22993,22995,22997,22999,23001,23003,23005,23007],{"class":222,"line":223},[220,22965,21597],{"class":264},[220,22967,21600],{"class":420},[220,22969,4450],{"class":264},[220,22971,22972],{"class":230},"\"trapezoidSDF\"",[220,22974,1895],{"class":264},[220,22976,22977],{"class":420},"\"bottomWidth\"",[220,22979,4450],{"class":264},[220,22981,21005],{"class":420},[220,22983,1895],{"class":264},[220,22985,22986],{"class":420},"\"topWidth\"",[220,22988,4450],{"class":264},[220,22990,16833],{"class":420},[220,22992,1895],{"class":264},[220,22994,21724],{"class":420},[220,22996,4450],{"class":264},[220,22998,21100],{"class":420},[220,23000,1895],{"class":264},[220,23002,21733],{"class":420},[220,23004,4450],{"class":264},[220,23006,8524],{"class":420},[220,23008,5520],{"class":264},[4358,23010],{},[23,23012,23014],{"id":23013},"_3d-shapes","3D shapes",[15,23016,23017,23018,1895,23020,1895,23022,1895,23024,20838,23027,23030,23031,23034],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,23019,15323],{},[159,23021,20837],{},[159,23023,20841],{},[159,23025,23026],{},"ThinFilm",[159,23028,23029],{},"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,23032,23033],{},"SmokeFill"," treats every shape as a flat fill.)",[15,23036,23037,23038,1895,23041,20838,23044,23047],{},"Every 3D shape is positioned with three independent rotations — ",[99,23039,23040],{},"rotX",[99,23042,23043],{},"rotY",[99,23045,23046],{},"rotZ"," — given in degrees. All sizes are in UV space.",[15662,23049,23050],{},[15,23051,23052,23055,23056,23059,23060,23062,23063,23065,23066,23068],{},[159,23053,23054],{},"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,23057,23058],{},"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,23061,23043],{}," is a turntable spin (left\u002Fright), ",[99,23064,23040],{}," tips the shape toward or away from you, and ",[99,23067,23046],{}," rolls it in the screen plane.",[15662,23070,23071,23091],{},[15,23072,23073,23076,23077,23080,23081,23083,23084,1550,23087,23090],{},[159,23074,23075],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,23078,23079],{"href":17129},"dynamic prop"," instead of a number. Set a rotation to an ",[99,23082,17218],{}," config looping from ",[99,23085,23086],{},"-180",[99,23088,23089],{},"180"," for a continuous spin, with no animation code:",[212,23092,23094],{"className":4413,"code":23093,"language":4415,"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,23095,23096,23126],{"__ignoreMap":178},[220,23097,23098,23100,23102,23104,23107,23109,23111,23113,23115,23117,23120,23122,23124],{"class":222,"line":223},[220,23099,21597],{"class":264},[220,23101,21600],{"class":420},[220,23103,4450],{"class":264},[220,23105,23106],{"class":230},"\"torus3D\"",[220,23108,1895],{"class":264},[220,23110,21609],{"class":420},[220,23112,4450],{"class":264},[220,23114,21861],{"class":420},[220,23116,1895],{"class":264},[220,23118,23119],{"class":420},"\"tube\"",[220,23121,4450],{"class":264},[220,23123,18077],{"class":420},[220,23125,1760],{"class":264},[220,23127,23128,23131,23133,23135,23137,23140,23142,23145,23147,23150,23152,23155,23157,23159,23161,23164,23166,23168,23170,23173,23175,23177],{"class":222,"line":179},[220,23129,23130],{"class":420}," \"rotY\"",[220,23132,5509],{"class":264},[220,23134,21600],{"class":420},[220,23136,4450],{"class":264},[220,23138,23139],{"class":230},"\"auto-animate\"",[220,23141,1895],{"class":264},[220,23143,23144],{"class":420},"\"mode\"",[220,23146,4450],{"class":264},[220,23148,23149],{"class":230},"\"loop\"",[220,23151,1895],{"class":264},[220,23153,23154],{"class":420},"\"outputMin\"",[220,23156,4450],{"class":264},[220,23158,23086],{"class":420},[220,23160,1895],{"class":264},[220,23162,23163],{"class":420},"\"outputMax\"",[220,23165,4450],{"class":264},[220,23167,23089],{"class":420},[220,23169,1895],{"class":264},[220,23171,23172],{"class":420},"\"speed\"",[220,23174,4450],{"class":264},[220,23176,7605],{"class":420},[220,23178,1782],{"class":264},[3198,23180,23182,23183],{"id":23181},"sphere-sphere3d","Sphere — ",[99,23184,20886],{},[15,23186,23187],{},"A perfect sphere.",[1794,23189,23190,23202],{},[1797,23191,23192],{},[1800,23193,23194,23196,23198,23200],{},[1803,23195,17771],{},[1803,23197,15044],{},[1803,23199,15047],{},[1803,23201,1808],{},[1810,23203,23204,23221],{},[1800,23205,23206,23210,23214,23218],{},[1815,23207,23208],{},[99,23209,11536],{},[1815,23211,23212],{},[99,23213,15157],{},[1815,23215,23216],{},[99,23217,21005],{},[1815,23219,23220],{},"Sphere radius",[1800,23222,23223,23231,23235,23239],{},[1815,23224,23225,15569,23227,15569,23229],{},[99,23226,23040],{},[99,23228,23043],{},[99,23230,23046],{},[1815,23232,23233],{},[99,23234,15157],{},[1815,23236,23237],{},[99,23238,8524],{},[1815,23240,23241],{},"Rotation around each axis, in degrees",[212,23243,23245],{"className":4413,"code":23244,"language":4415,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23246,23247],{"__ignoreMap":178},[220,23248,23249,23251,23253,23255,23258,23260,23262,23264,23266,23268,23271,23273,23275,23277,23280,23282,23284,23286,23289,23291,23293],{"class":222,"line":223},[220,23250,21597],{"class":264},[220,23252,21600],{"class":420},[220,23254,4450],{"class":264},[220,23256,23257],{"class":230},"\"sphere3D\"",[220,23259,1895],{"class":264},[220,23261,21609],{"class":420},[220,23263,4450],{"class":264},[220,23265,21005],{"class":420},[220,23267,1895],{"class":264},[220,23269,23270],{"class":420},"\"rotX\"",[220,23272,4450],{"class":264},[220,23274,8524],{"class":420},[220,23276,1895],{"class":264},[220,23278,23279],{"class":420},"\"rotY\"",[220,23281,4450],{"class":264},[220,23283,8524],{"class":420},[220,23285,1895],{"class":264},[220,23287,23288],{"class":420},"\"rotZ\"",[220,23290,4450],{"class":264},[220,23292,8524],{"class":420},[220,23294,5520],{"class":264},[4358,23296],{},[3198,23298,23300,23301],{"id":23299},"cube-cube3d","Cube — ",[99,23302,23303],{},"cube3D",[15,23305,23306],{},"A box with independent dimensions and rounded edges.",[1794,23308,23309,23321],{},[1797,23310,23311],{},[1800,23312,23313,23315,23317,23319],{},[1803,23314,17771],{},[1803,23316,15044],{},[1803,23318,15047],{},[1803,23320,1808],{},[1810,23322,23323,23342,23360,23378,23395],{},[1800,23324,23325,23330,23334,23339],{},[1815,23326,23327],{},[99,23328,23329],{},"sizeX",[1815,23331,23332],{},[99,23333,15157],{},[1815,23335,23336],{},[99,23337,23338],{},"0.27",[1815,23340,23341],{},"Half-width (X)",[1800,23343,23344,23349,23353,23357],{},[1815,23345,23346],{},[99,23347,23348],{},"sizeY",[1815,23350,23351],{},[99,23352,15157],{},[1815,23354,23355],{},[99,23356,23338],{},[1815,23358,23359],{},"Half-height (Y)",[1800,23361,23362,23367,23371,23375],{},[1815,23363,23364],{},[99,23365,23366],{},"sizeZ",[1815,23368,23369],{},[99,23370,15157],{},[1815,23372,23373],{},[99,23374,23338],{},[1815,23376,23377],{},"Half-depth (Z)",[1800,23379,23380,23384,23388,23392],{},[1815,23381,23382],{},[99,23383,21809],{},[1815,23385,23386],{},[99,23387,15157],{},[1815,23389,23390],{},[99,23391,19541],{},[1815,23393,23394],{},"Edge\u002Fcorner rounding",[1800,23396,23397,23405,23409,23419],{},[1815,23398,23399,15569,23401,15569,23403],{},[99,23400,23040],{},[99,23402,23043],{},[99,23404,23046],{},[1815,23406,23407],{},[99,23408,15157],{},[1815,23410,23411,15139,23414,15139,23417],{},[99,23412,23413],{},"25",[99,23415,23416],{},"35",[99,23418,8524],{},[1815,23420,23241],{},[212,23422,23424],{"className":4413,"code":23423,"language":4415,"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,23425,23426],{"__ignoreMap":178},[220,23427,23428,23430,23432,23434,23437,23439,23442,23444,23446,23448,23451,23453,23455,23457,23460,23462,23464,23466,23468,23470,23472,23474,23476,23478,23480,23482,23484,23486,23488,23490,23492,23494,23496],{"class":222,"line":223},[220,23429,21597],{"class":264},[220,23431,21600],{"class":420},[220,23433,4450],{"class":264},[220,23435,23436],{"class":230},"\"cube3D\"",[220,23438,1895],{"class":264},[220,23440,23441],{"class":420},"\"sizeX\"",[220,23443,4450],{"class":264},[220,23445,23338],{"class":420},[220,23447,1895],{"class":264},[220,23449,23450],{"class":420},"\"sizeY\"",[220,23452,4450],{"class":264},[220,23454,23338],{"class":420},[220,23456,1895],{"class":264},[220,23458,23459],{"class":420},"\"sizeZ\"",[220,23461,4450],{"class":264},[220,23463,23338],{"class":420},[220,23465,1895],{"class":264},[220,23467,21875],{"class":420},[220,23469,4450],{"class":264},[220,23471,19541],{"class":420},[220,23473,1895],{"class":264},[220,23475,23270],{"class":420},[220,23477,4450],{"class":264},[220,23479,23413],{"class":420},[220,23481,1895],{"class":264},[220,23483,23279],{"class":420},[220,23485,4450],{"class":264},[220,23487,23416],{"class":420},[220,23489,1895],{"class":264},[220,23491,23288],{"class":420},[220,23493,4450],{"class":264},[220,23495,8524],{"class":420},[220,23497,5520],{"class":264},[4358,23499],{},[3198,23501,23503,23504],{"id":23502},"torus-torus3d","Torus — ",[99,23505,23506],{},"torus3D",[15,23508,23509],{},"A doughnut ring.",[1794,23511,23512,23524],{},[1797,23513,23514],{},[1800,23515,23516,23518,23520,23522],{},[1803,23517,17771],{},[1803,23519,15044],{},[1803,23521,15047],{},[1803,23523,1808],{},[1810,23525,23526,23543,23561],{},[1800,23527,23528,23532,23536,23540],{},[1815,23529,23530],{},[99,23531,11536],{},[1815,23533,23534],{},[99,23535,15157],{},[1815,23537,23538],{},[99,23539,21861],{},[1815,23541,23542],{},"Ring radius (centre to tube centreline)",[1800,23544,23545,23550,23554,23558],{},[1815,23546,23547],{},[99,23548,23549],{},"tube",[1815,23551,23552],{},[99,23553,15157],{},[1815,23555,23556],{},[99,23557,18077],{},[1815,23559,23560],{},"Tube radius",[1800,23562,23563,23571,23575,23584],{},[1815,23564,23565,15569,23567,15569,23569],{},[99,23566,23040],{},[99,23568,23043],{},[99,23570,23046],{},[1815,23572,23573],{},[99,23574,15157],{},[1815,23576,23577,15139,23580,15139,23582],{},[99,23578,23579],{},"55",[99,23581,8524],{},[99,23583,8524],{},[1815,23585,23241],{},[212,23587,23589],{"className":4413,"code":23588,"language":4415,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23590,23591],{"__ignoreMap":178},[220,23592,23593,23595,23597,23599,23601,23603,23605,23607,23609,23611,23613,23615,23617,23619,23621,23623,23625,23627,23629,23631,23633,23635,23637,23639,23641],{"class":222,"line":223},[220,23594,21597],{"class":264},[220,23596,21600],{"class":420},[220,23598,4450],{"class":264},[220,23600,23106],{"class":230},[220,23602,1895],{"class":264},[220,23604,21609],{"class":420},[220,23606,4450],{"class":264},[220,23608,21861],{"class":420},[220,23610,1895],{"class":264},[220,23612,23119],{"class":420},[220,23614,4450],{"class":264},[220,23616,18077],{"class":420},[220,23618,1895],{"class":264},[220,23620,23270],{"class":420},[220,23622,4450],{"class":264},[220,23624,23579],{"class":420},[220,23626,1895],{"class":264},[220,23628,23279],{"class":420},[220,23630,4450],{"class":264},[220,23632,8524],{"class":420},[220,23634,1895],{"class":264},[220,23636,23288],{"class":420},[220,23638,4450],{"class":264},[220,23640,8524],{"class":420},[220,23642,5520],{"class":264},[4358,23644],{},[3198,23646,23648,23649],{"id":23647},"octahedron-octahedron3d","Octahedron — ",[99,23650,23651],{},"octahedron3D",[15,23653,23654],{},"An eight-faced diamond\u002Fbipyramid.",[1794,23656,23657,23669],{},[1797,23658,23659],{},[1800,23660,23661,23663,23665,23667],{},[1803,23662,17771],{},[1803,23664,15044],{},[1803,23666,15047],{},[1803,23668,1808],{},[1810,23670,23671,23689],{},[1800,23672,23673,23677,23681,23686],{},[1815,23674,23675],{},[99,23676,11536],{},[1815,23678,23679],{},[99,23680,15157],{},[1815,23682,23683],{},[99,23684,23685],{},"0.42",[1815,23687,23688],{},"Distance from centre to each vertex",[1800,23690,23691,23699,23703,23712],{},[1815,23692,23693,15569,23695,15569,23697],{},[99,23694,23040],{},[99,23696,23043],{},[99,23698,23046],{},[1815,23700,23701],{},[99,23702,15157],{},[1815,23704,23705,15139,23708,15139,23710],{},[99,23706,23707],{},"10",[99,23709,23413],{},[99,23711,8524],{},[1815,23713,23241],{},[212,23715,23717],{"className":4413,"code":23716,"language":4415,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,23718,23719],{"__ignoreMap":178},[220,23720,23721,23723,23725,23727,23730,23732,23734,23736,23738,23740,23742,23744,23746,23748,23750,23752,23754,23756,23758,23760,23762],{"class":222,"line":223},[220,23722,21597],{"class":264},[220,23724,21600],{"class":420},[220,23726,4450],{"class":264},[220,23728,23729],{"class":230},"\"octahedron3D\"",[220,23731,1895],{"class":264},[220,23733,21609],{"class":420},[220,23735,4450],{"class":264},[220,23737,23685],{"class":420},[220,23739,1895],{"class":264},[220,23741,23270],{"class":420},[220,23743,4450],{"class":264},[220,23745,23707],{"class":420},[220,23747,1895],{"class":264},[220,23749,23279],{"class":420},[220,23751,4450],{"class":264},[220,23753,23413],{"class":420},[220,23755,1895],{"class":264},[220,23757,23288],{"class":420},[220,23759,4450],{"class":264},[220,23761,8524],{"class":420},[220,23763,5520],{"class":264},[4358,23765],{},[3198,23767,23769,23770],{"id":23768},"cylinder-cylinder3d","Cylinder — ",[99,23771,23772],{},"cylinder3D",[15,23774,23775],{},"A capped cylinder with rounded edges.",[1794,23777,23778,23790],{},[1797,23779,23780],{},[1800,23781,23782,23784,23786,23788],{},[1803,23783,17771],{},[1803,23785,15044],{},[1803,23787,15047],{},[1803,23789,1808],{},[1810,23791,23792,23810,23827,23844],{},[1800,23793,23794,23798,23802,23807],{},[1815,23795,23796],{},[99,23797,11536],{},[1815,23799,23800],{},[99,23801,15157],{},[1815,23803,23804],{},[99,23805,23806],{},"0.22",[1815,23808,23809],{},"Cylinder radius",[1800,23811,23812,23816,23820,23825],{},[1815,23813,23814],{},[99,23815,15024],{},[1815,23817,23818],{},[99,23819,15157],{},[1815,23821,23822],{},[99,23823,23824],{},"0.26",[1815,23826,22503],{},[1800,23828,23829,23833,23837,23841],{},[1815,23830,23831],{},[99,23832,21809],{},[1815,23834,23835],{},[99,23836,15157],{},[1815,23838,23839],{},[99,23840,19541],{},[1815,23842,23843],{},"Edge rounding",[1800,23845,23846,23854,23858,23868],{},[1815,23847,23848,15569,23850,15569,23852],{},[99,23849,23040],{},[99,23851,23043],{},[99,23853,23046],{},[1815,23855,23856],{},[99,23857,15157],{},[1815,23859,23860,15139,23863,15139,23865],{},[99,23861,23862],{},"60",[99,23864,8524],{},[99,23866,23867],{},"30",[1815,23869,23241],{},[212,23871,23873],{"className":4413,"code":23872,"language":4415,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,23874,23875],{"__ignoreMap":178},[220,23876,23877,23879,23881,23883,23886,23888,23890,23892,23894,23896,23898,23900,23902,23904,23906,23908,23910,23912,23914,23916,23918,23920,23922,23924,23926,23928,23930,23932,23934],{"class":222,"line":223},[220,23878,21597],{"class":264},[220,23880,21600],{"class":420},[220,23882,4450],{"class":264},[220,23884,23885],{"class":230},"\"cylinder3D\"",[220,23887,1895],{"class":264},[220,23889,21609],{"class":420},[220,23891,4450],{"class":264},[220,23893,23806],{"class":420},[220,23895,1895],{"class":264},[220,23897,21724],{"class":420},[220,23899,4450],{"class":264},[220,23901,23824],{"class":420},[220,23903,1895],{"class":264},[220,23905,21875],{"class":420},[220,23907,4450],{"class":264},[220,23909,19541],{"class":420},[220,23911,1895],{"class":264},[220,23913,23270],{"class":420},[220,23915,4450],{"class":264},[220,23917,23862],{"class":420},[220,23919,1895],{"class":264},[220,23921,23279],{"class":420},[220,23923,4450],{"class":264},[220,23925,8524],{"class":420},[220,23927,1895],{"class":264},[220,23929,23288],{"class":420},[220,23931,4450],{"class":264},[220,23933,23867],{"class":420},[220,23935,5520],{"class":264},[4358,23937],{},[3198,23939,23941,23942],{"id":23940},"capsule-capsule3d","Capsule — ",[99,23943,23944],{},"capsule3D",[15,23946,23947],{},"A cylinder with hemispherical caps (a pill).",[1794,23949,23950,23962],{},[1797,23951,23952],{},[1800,23953,23954,23956,23958,23960],{},[1803,23955,17771],{},[1803,23957,15044],{},[1803,23959,15047],{},[1803,23961,1808],{},[1810,23963,23964,23982,23999],{},[1800,23965,23966,23970,23974,23979],{},[1815,23967,23968],{},[99,23969,11536],{},[1815,23971,23972],{},[99,23973,15157],{},[1815,23975,23976],{},[99,23977,23978],{},"0.16",[1815,23980,23981],{},"Capsule radius",[1800,23983,23984,23988,23992,23996],{},[1815,23985,23986],{},[99,23987,15024],{},[1815,23989,23990],{},[99,23991,15157],{},[1815,23993,23994],{},[99,23995,16833],{},[1815,23997,23998],{},"Half-length of the straight section",[1800,24000,24001,24009,24013,24021],{},[1815,24002,24003,15569,24005,15569,24007],{},[99,24004,23040],{},[99,24006,23043],{},[99,24008,23046],{},[1815,24010,24011],{},[99,24012,15157],{},[1815,24014,24015,15139,24017,15139,24019],{},[99,24016,8524],{},[99,24018,8524],{},[99,24020,23416],{},[1815,24022,23241],{},[212,24024,24026],{"className":4413,"code":24025,"language":4415,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,24027,24028],{"__ignoreMap":178},[220,24029,24030,24032,24034,24036,24039,24041,24043,24045,24047,24049,24051,24053,24055,24057,24059,24061,24063,24065,24067,24069,24071,24073,24075,24077,24079],{"class":222,"line":223},[220,24031,21597],{"class":264},[220,24033,21600],{"class":420},[220,24035,4450],{"class":264},[220,24037,24038],{"class":230},"\"capsule3D\"",[220,24040,1895],{"class":264},[220,24042,21609],{"class":420},[220,24044,4450],{"class":264},[220,24046,23978],{"class":420},[220,24048,1895],{"class":264},[220,24050,21724],{"class":420},[220,24052,4450],{"class":264},[220,24054,16833],{"class":420},[220,24056,1895],{"class":264},[220,24058,23270],{"class":420},[220,24060,4450],{"class":264},[220,24062,8524],{"class":420},[220,24064,1895],{"class":264},[220,24066,23279],{"class":420},[220,24068,4450],{"class":264},[220,24070,8524],{"class":420},[220,24072,1895],{"class":264},[220,24074,23288],{"class":420},[220,24076,4450],{"class":264},[220,24078,23416],{"class":420},[220,24080,5520],{"class":264},[4358,24082],{},[3198,24084,24086,24087],{"id":24085},"cone-cone3d","Cone — ",[99,24088,24089],{},"cone3D",[15,24091,24092,24093,24096,24097,24099],{},"A cone or truncated cone. Set ",[99,24094,24095],{},"topRadius"," above ",[99,24098,8524],{}," to flatten the tip into a frustum.",[1794,24101,24102,24114],{},[1797,24103,24104],{},[1800,24105,24106,24108,24110,24112],{},[1803,24107,17771],{},[1803,24109,15044],{},[1803,24111,15047],{},[1803,24113,1808],{},[1810,24115,24116,24133,24153,24169],{},[1800,24117,24118,24122,24126,24130],{},[1815,24119,24120],{},[99,24121,11536],{},[1815,24123,24124],{},[99,24125,15157],{},[1815,24127,24128],{},[99,24129,21861],{},[1815,24131,24132],{},"Base radius",[1800,24134,24135,24139,24143,24147],{},[1815,24136,24137],{},[99,24138,24095],{},[1815,24140,24141],{},[99,24142,15157],{},[1815,24144,24145],{},[99,24146,19541],{},[1815,24148,24149,24150,24152],{},"Top radius — ",[99,24151,8524],{}," for a sharp point",[1800,24154,24155,24159,24163,24167],{},[1815,24156,24157],{},[99,24158,15024],{},[1815,24160,24161],{},[99,24162,15157],{},[1815,24164,24165],{},[99,24166,21861],{},[1815,24168,22503],{},[1800,24170,24171,24179,24183,24192],{},[1815,24172,24173,15569,24175,15569,24177],{},[99,24174,23040],{},[99,24176,23043],{},[99,24178,23046],{},[1815,24180,24181],{},[99,24182,15157],{},[1815,24184,24185,15139,24187,15139,24189],{},[99,24186,23413],{},[99,24188,8524],{},[99,24190,24191],{},"15",[1815,24193,23241],{},[212,24195,24197],{"className":4413,"code":24196,"language":4415,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,24198,24199],{"__ignoreMap":178},[220,24200,24201,24203,24205,24207,24210,24212,24214,24216,24218,24220,24223,24225,24227,24229,24231,24233,24235,24237,24239,24241,24243,24245,24247,24249,24251,24253,24255,24257,24259],{"class":222,"line":223},[220,24202,21597],{"class":264},[220,24204,21600],{"class":420},[220,24206,4450],{"class":264},[220,24208,24209],{"class":230},"\"cone3D\"",[220,24211,1895],{"class":264},[220,24213,21609],{"class":420},[220,24215,4450],{"class":264},[220,24217,21861],{"class":420},[220,24219,1895],{"class":264},[220,24221,24222],{"class":420},"\"topRadius\"",[220,24224,4450],{"class":264},[220,24226,19541],{"class":420},[220,24228,1895],{"class":264},[220,24230,21724],{"class":420},[220,24232,4450],{"class":264},[220,24234,21861],{"class":420},[220,24236,1895],{"class":264},[220,24238,23270],{"class":420},[220,24240,4450],{"class":264},[220,24242,23413],{"class":420},[220,24244,1895],{"class":264},[220,24246,23279],{"class":420},[220,24248,4450],{"class":264},[220,24250,8524],{"class":420},[220,24252,1895],{"class":264},[220,24254,23288],{"class":420},[220,24256,4450],{"class":264},[220,24258,24191],{"class":420},[220,24260,5520],{"class":264},[4358,24262],{},[3198,24264,24266,24267],{"id":24265},"pyramid-pyramid3d","Pyramid — ",[99,24268,24269],{},"pyramid3D",[15,24271,24272],{},"A square-based pyramid.",[1794,24274,24275,24287],{},[1797,24276,24277],{},[1800,24278,24279,24281,24283,24285],{},[1803,24280,17771],{},[1803,24282,15044],{},[1803,24284,15047],{},[1803,24286,1808],{},[1810,24288,24289,24306,24323],{},[1800,24290,24291,24295,24299,24303],{},[1815,24292,24293],{},[99,24294,11544],{},[1815,24296,24297],{},[99,24298,15157],{},[1815,24300,24301],{},[99,24302,21861],{},[1815,24304,24305],{},"Base half-width",[1800,24307,24308,24312,24316,24320],{},[1815,24309,24310],{},[99,24311,15024],{},[1815,24313,24314],{},[99,24315,15157],{},[1815,24317,24318],{},[99,24319,21056],{},[1815,24321,24322],{},"Apex height",[1800,24324,24325,24333,24337,24346],{},[1815,24326,24327,15569,24329,15569,24331],{},[99,24328,23040],{},[99,24330,23043],{},[99,24332,23046],{},[1815,24334,24335],{},[99,24336,15157],{},[1815,24338,24339,15139,24342,15139,24344],{},[99,24340,24341],{},"-10",[99,24343,23867],{},[99,24345,8524],{},[1815,24347,23241],{},[212,24349,24351],{"className":4413,"code":24350,"language":4415,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24352,24353],{"__ignoreMap":178},[220,24354,24355,24357,24359,24361,24364,24366,24368,24370,24372,24374,24376,24378,24380,24382,24384,24386,24388,24390,24392,24394,24396,24398,24400,24402,24404],{"class":222,"line":223},[220,24356,21597],{"class":264},[220,24358,21600],{"class":420},[220,24360,4450],{"class":264},[220,24362,24363],{"class":230},"\"pyramid3D\"",[220,24365,1895],{"class":264},[220,24367,22411],{"class":420},[220,24369,4450],{"class":264},[220,24371,21861],{"class":420},[220,24373,1895],{"class":264},[220,24375,21724],{"class":420},[220,24377,4450],{"class":264},[220,24379,21056],{"class":420},[220,24381,1895],{"class":264},[220,24383,23270],{"class":420},[220,24385,4450],{"class":264},[220,24387,24341],{"class":420},[220,24389,1895],{"class":264},[220,24391,23279],{"class":420},[220,24393,4450],{"class":264},[220,24395,23867],{"class":420},[220,24397,1895],{"class":264},[220,24399,23288],{"class":420},[220,24401,4450],{"class":264},[220,24403,8524],{"class":420},[220,24405,5520],{"class":264},[4358,24407],{},[3198,24409,24411,24412],{"id":24410},"prism-prism3d","Prism — ",[99,24413,24414],{},"prism3D",[15,24416,24417],{},"A hexagonal prism.",[1794,24419,24420,24432],{},[1797,24421,24422],{},[1800,24423,24424,24426,24428,24430],{},[1803,24425,17771],{},[1803,24427,15044],{},[1803,24429,15047],{},[1803,24431,1808],{},[1810,24433,24434,24452,24470],{},[1800,24435,24436,24440,24444,24449],{},[1815,24437,24438],{},[99,24439,11536],{},[1815,24441,24442],{},[99,24443,15157],{},[1815,24445,24446],{},[99,24447,24448],{},"0.28",[1815,24450,24451],{},"Hexagon radius",[1800,24453,24454,24458,24462,24467],{},[1815,24455,24456],{},[99,24457,15024],{},[1815,24459,24460],{},[99,24461,15157],{},[1815,24463,24464],{},[99,24465,24466],{},"0.14",[1815,24468,24469],{},"Half-depth of the prism",[1800,24471,24472,24480,24484,24492],{},[1815,24473,24474,15569,24476,15569,24478],{},[99,24475,23040],{},[99,24477,23043],{},[99,24479,23046],{},[1815,24481,24482],{},[99,24483,15157],{},[1815,24485,24486,15139,24488,15139,24490],{},[99,24487,23413],{},[99,24489,23867],{},[99,24491,8524],{},[1815,24493,23241],{},[212,24495,24497],{"className":4413,"code":24496,"language":4415,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24498,24499],{"__ignoreMap":178},[220,24500,24501,24503,24505,24507,24510,24512,24514,24516,24518,24520,24522,24524,24526,24528,24530,24532,24534,24536,24538,24540,24542,24544,24546,24548,24550],{"class":222,"line":223},[220,24502,21597],{"class":264},[220,24504,21600],{"class":420},[220,24506,4450],{"class":264},[220,24508,24509],{"class":230},"\"prism3D\"",[220,24511,1895],{"class":264},[220,24513,21609],{"class":420},[220,24515,4450],{"class":264},[220,24517,24448],{"class":420},[220,24519,1895],{"class":264},[220,24521,21724],{"class":420},[220,24523,4450],{"class":264},[220,24525,24466],{"class":420},[220,24527,1895],{"class":264},[220,24529,23270],{"class":420},[220,24531,4450],{"class":264},[220,24533,23413],{"class":420},[220,24535,1895],{"class":264},[220,24537,23279],{"class":420},[220,24539,4450],{"class":264},[220,24541,23867],{"class":420},[220,24543,1895],{"class":264},[220,24545,23288],{"class":420},[220,24547,4450],{"class":264},[220,24549,8524],{"class":420},[220,24551,5520],{"class":264},[4358,24553],{},[3198,24555,24557,24558],{"id":24556},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,24559,24560],{},"ellipsoid3D",[15,24562,24563],{},"A sphere with three independent radii.",[1794,24565,24566,24578],{},[1797,24567,24568],{},[1800,24569,24570,24572,24574,24576],{},[1803,24571,17771],{},[1803,24573,15044],{},[1803,24575,15047],{},[1803,24577,1808],{},[1810,24579,24580,24599,24617,24635],{},[1800,24581,24582,24587,24591,24596],{},[1815,24583,24584],{},[99,24585,24586],{},"radiusX",[1815,24588,24589],{},[99,24590,15157],{},[1815,24592,24593],{},[99,24594,24595],{},"0.38",[1815,24597,24598],{},"Radius along X",[1800,24600,24601,24606,24610,24614],{},[1815,24602,24603],{},[99,24604,24605],{},"radiusY",[1815,24607,24608],{},[99,24609,15157],{},[1815,24611,24612],{},[99,24613,23806],{},[1815,24615,24616],{},"Radius along Y",[1800,24618,24619,24624,24628,24632],{},[1815,24620,24621],{},[99,24622,24623],{},"radiusZ",[1815,24625,24626],{},[99,24627,15157],{},[1815,24629,24630],{},[99,24631,21861],{},[1815,24633,24634],{},"Radius along Z",[1800,24636,24637,24645,24649,24658],{},[1815,24638,24639,15569,24641,15569,24643],{},[99,24640,23040],{},[99,24642,23043],{},[99,24644,23046],{},[1815,24646,24647],{},[99,24648,15157],{},[1815,24650,24651,15139,24653,15139,24655],{},[99,24652,8524],{},[99,24654,8524],{},[99,24656,24657],{},"20",[1815,24659,23241],{},[212,24661,24663],{"className":4413,"code":24662,"language":4415,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,24664,24665],{"__ignoreMap":178},[220,24666,24667,24669,24671,24673,24676,24678,24681,24683,24685,24687,24690,24692,24694,24696,24699,24701,24703,24705,24707,24709,24711,24713,24715,24717,24719,24721,24723,24725,24727],{"class":222,"line":223},[220,24668,21597],{"class":264},[220,24670,21600],{"class":420},[220,24672,4450],{"class":264},[220,24674,24675],{"class":230},"\"ellipsoid3D\"",[220,24677,1895],{"class":264},[220,24679,24680],{"class":420},"\"radiusX\"",[220,24682,4450],{"class":264},[220,24684,24595],{"class":420},[220,24686,1895],{"class":264},[220,24688,24689],{"class":420},"\"radiusY\"",[220,24691,4450],{"class":264},[220,24693,23806],{"class":420},[220,24695,1895],{"class":264},[220,24697,24698],{"class":420},"\"radiusZ\"",[220,24700,4450],{"class":264},[220,24702,21861],{"class":420},[220,24704,1895],{"class":264},[220,24706,23270],{"class":420},[220,24708,4450],{"class":264},[220,24710,8524],{"class":420},[220,24712,1895],{"class":264},[220,24714,23279],{"class":420},[220,24716,4450],{"class":264},[220,24718,8524],{"class":420},[220,24720,1895],{"class":264},[220,24722,23288],{"class":420},[220,24724,4450],{"class":264},[220,24726,24657],{"class":420},[220,24728,5520],{"class":264},[4358,24730],{},[3198,24732,24734,24735],{"id":24733},"diamond-diamond3d","Diamond — ",[99,24736,24737],{},"diamond3D",[15,24739,24740,24741,24743],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,24742,23029],{}," effect.",[1794,24745,24746,24758],{},[1797,24747,24748],{},[1800,24749,24750,24752,24754,24756],{},[1803,24751,17771],{},[1803,24753,15044],{},[1803,24755,15047],{},[1803,24757,1808],{},[1810,24759,24760,24777,24794],{},[1800,24761,24762,24766,24770,24774],{},[1815,24763,24764],{},[99,24765,11536],{},[1815,24767,24768],{},[99,24769,15157],{},[1815,24771,24772],{},[99,24773,21861],{},[1815,24775,24776],{},"Girdle radius",[1800,24778,24779,24783,24787,24791],{},[1815,24780,24781],{},[99,24782,15024],{},[1815,24784,24785],{},[99,24786,15157],{},[1815,24788,24789],{},[99,24790,23685],{},[1815,24792,24793],{},"Total height (crown + pavilion)",[1800,24795,24796,24804,24808,24816],{},[1815,24797,24798,15569,24800,15569,24802],{},[99,24799,23040],{},[99,24801,23043],{},[99,24803,23046],{},[1815,24805,24806],{},[99,24807,15157],{},[1815,24809,24810,15139,24812,15139,24814],{},[99,24811,24191],{},[99,24813,8524],{},[99,24815,8524],{},[1815,24817,23241],{},[212,24819,24821],{"className":4413,"code":24820,"language":4415,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,24822,24823],{"__ignoreMap":178},[220,24824,24825,24827,24829,24831,24834,24836,24838,24840,24842,24844,24846,24848,24850,24852,24854,24856,24858,24860,24862,24864,24866,24868,24870,24872,24874],{"class":222,"line":223},[220,24826,21597],{"class":264},[220,24828,21600],{"class":420},[220,24830,4450],{"class":264},[220,24832,24833],{"class":230},"\"diamond3D\"",[220,24835,1895],{"class":264},[220,24837,21609],{"class":420},[220,24839,4450],{"class":264},[220,24841,21861],{"class":420},[220,24843,1895],{"class":264},[220,24845,21724],{"class":420},[220,24847,4450],{"class":264},[220,24849,23685],{"class":420},[220,24851,1895],{"class":264},[220,24853,23270],{"class":420},[220,24855,4450],{"class":264},[220,24857,24191],{"class":420},[220,24859,1895],{"class":264},[220,24861,23279],{"class":420},[220,24863,4450],{"class":264},[220,24865,8524],{"class":420},[220,24867,1895],{"class":264},[220,24869,23288],{"class":420},[220,24871,4450],{"class":264},[220,24873,8524],{"class":420},[220,24875,5520],{"class":264},[4358,24877],{},[3198,24879,24881,24882],{"id":24880},"link-link3d","Link — ",[99,24883,24884],{},"link3D",[15,24886,24887],{},"A rounded chain link.",[1794,24889,24890,24902],{},[1797,24891,24892],{},[1800,24893,24894,24896,24898,24900],{},[1803,24895,17771],{},[1803,24897,15044],{},[1803,24899,15047],{},[1803,24901,1808],{},[1810,24903,24904,24922,24939,24955],{},[1800,24905,24906,24910,24914,24919],{},[1815,24907,24908],{},[99,24909,11536],{},[1815,24911,24912],{},[99,24913,15157],{},[1815,24915,24916],{},[99,24917,24918],{},"0.18",[1815,24920,24921],{},"Inner radius of the link's curve",[1800,24923,24924,24929,24933,24937],{},[1815,24925,24926],{},[99,24927,24928],{},"length",[1815,24930,24931],{},[99,24932,15157],{},[1815,24934,24935],{},[99,24936,18049],{},[1815,24938,23998],{},[1800,24940,24941,24945,24949,24953],{},[1815,24942,24943],{},[99,24944,23549],{},[1815,24946,24947],{},[99,24948,15157],{},[1815,24950,24951],{},[99,24952,22253],{},[1815,24954,23560],{},[1800,24956,24957,24965,24969,24977],{},[1815,24958,24959,15569,24961,15569,24963],{},[99,24960,23040],{},[99,24962,23043],{},[99,24964,23046],{},[1815,24966,24967],{},[99,24968,15157],{},[1815,24970,24971,15139,24973,15139,24975],{},[99,24972,24657],{},[99,24974,23867],{},[99,24976,8524],{},[1815,24978,23241],{},[212,24980,24982],{"className":4413,"code":24981,"language":4415,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24983,24984],{"__ignoreMap":178},[220,24985,24986,24988,24990,24992,24995,24997,24999,25001,25003,25005,25008,25010,25012,25014,25016,25018,25020,25022,25024,25026,25028,25030,25032,25034,25036,25038,25040,25042,25044],{"class":222,"line":223},[220,24987,21597],{"class":264},[220,24989,21600],{"class":420},[220,24991,4450],{"class":264},[220,24993,24994],{"class":230},"\"link3D\"",[220,24996,1895],{"class":264},[220,24998,21609],{"class":420},[220,25000,4450],{"class":264},[220,25002,24918],{"class":420},[220,25004,1895],{"class":264},[220,25006,25007],{"class":420},"\"length\"",[220,25009,4450],{"class":264},[220,25011,18049],{"class":420},[220,25013,1895],{"class":264},[220,25015,23119],{"class":420},[220,25017,4450],{"class":264},[220,25019,22253],{"class":420},[220,25021,1895],{"class":264},[220,25023,23270],{"class":420},[220,25025,4450],{"class":264},[220,25027,24657],{"class":420},[220,25029,1895],{"class":264},[220,25031,23279],{"class":420},[220,25033,4450],{"class":264},[220,25035,23867],{"class":420},[220,25037,1895],{"class":264},[220,25039,23288],{"class":420},[220,25041,4450],{"class":264},[220,25043,8524],{"class":420},[220,25045,5520],{"class":264},[4358,25047],{},[23,25049,25051],{"id":25050},"custom-shapes","Custom shapes",[15,25053,25054],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,25056,25057,25058,25061,25062,25065,25066,25068,25069,25071],{},"To use an SVG shape, set ",[99,25059,25060],{},"shapeSdfUrl"," to the URL of an SDF ",[99,25063,25064],{},".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,25067,25064],{}," URL. If you work with the ",[56,25070,4299],{"href":58},", your agent can also generate an SDF from any SVG in your project.",[246,25073,25074,25095,25114,25130,25146],{":tabs":1557},[212,25075,25077],{"className":334,"code":25076,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,25078,25079],{"__ignoreMap":178},[220,25080,25081,25083,25085,25088,25090,25093],{"class":222,"line":223},[220,25082,343],{"class":264},[220,25084,15323],{"class":346},[220,25086,25087],{"class":226}," :shapeSdfUrl",[220,25089,353],{"class":264},[220,25091,25092],{"class":230},"\"myLogoUrl\"",[220,25094,386],{"class":264},[212,25096,25098],{"className":409,"code":25097,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,25099,25100],{"__ignoreMap":178},[220,25101,25102,25104,25106,25109,25111],{"class":222,"line":223},[220,25103,343],{"class":264},[220,25105,15323],{"class":420},[220,25107,25108],{"class":226}," shapeSdfUrl",[220,25110,353],{"class":260},[220,25112,25113],{"class":264},"{myLogoUrl} \u002F>\n",[212,25115,25116],{"className":468,"code":25097,"language":469,"meta":178,"style":178},[99,25117,25118],{"__ignoreMap":178},[220,25119,25120,25122,25124,25126,25128],{"class":222,"line":223},[220,25121,343],{"class":264},[220,25123,15323],{"class":420},[220,25125,25108],{"class":226},[220,25127,353],{"class":260},[220,25129,25113],{"class":264},[212,25131,25132],{"className":468,"code":25097,"language":469,"meta":178,"style":178},[99,25133,25134],{"__ignoreMap":178},[220,25135,25136,25138,25140,25142,25144],{"class":222,"line":223},[220,25137,343],{"class":264},[220,25139,15323],{"class":420},[220,25141,25108],{"class":226},[220,25143,353],{"class":260},[220,25145,25113],{"class":264},[212,25147,25149],{"className":251,"code":25148,"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,25150,25151,25165,25169,25183,25187],{"__ignoreMap":178},[220,25152,25153,25155,25157,25159,25161,25163],{"class":222,"line":223},[220,25154,1735],{"class":260},[220,25156,1738],{"class":420},[220,25158,1741],{"class":260},[220,25160,1744],{"class":260},[220,25162,1747],{"class":226},[220,25164,1750],{"class":264},[220,25166,25167],{"class":222,"line":179},[220,25168,1765],{"class":264},[220,25170,25171,25173,25175,25178,25181],{"class":222,"line":389},[220,25172,1770],{"class":264},[220,25174,21390],{"class":230},[220,25176,25177],{"class":264},", props: { shapeSdfUrl: ",[220,25179,25180],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,25182,1782],{"class":264},[220,25184,25185],{"class":222,"line":399},[220,25186,1787],{"class":264},[220,25188,25189],{"class":222,"line":644},[220,25190,1792],{"class":264},[3198,25192,25194],{"id":25193},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,25196,25197,25198,25200,25201,25203,25204,1550,25206,25209],{},"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,25199,25060],{},", set the ",[99,25202,20845],{}," config ",[99,25205,20879],{},[99,25207,25208],{},"svgExtrude3D"," and tune the extrusion:",[1794,25211,25212,25224],{},[1797,25213,25214],{},[1800,25215,25216,25218,25220,25222],{},[1803,25217,17771],{},[1803,25219,15044],{},[1803,25221,15047],{},[1803,25223,1808],{},[1810,25225,25226,25244,25262],{},[1800,25227,25228,25233,25237,25241],{},[1815,25229,25230],{},[99,25231,25232],{},"depth",[1815,25234,25235],{},[99,25236,15157],{},[1815,25238,25239],{},[99,25240,18077],{},[1815,25242,25243],{},"Total thickness of the slab along the view axis",[1800,25245,25246,25251,25255,25259],{},[1815,25247,25248],{},[99,25249,25250],{},"bevel",[1815,25252,25253],{},[99,25254,15157],{},[1815,25256,25257],{},[99,25258,19541],{},[1815,25260,25261],{},"Rounded-edge radius on the extruded sides",[1800,25263,25264,25272,25276,25284],{},[1815,25265,25266,15569,25268,15569,25270],{},[99,25267,23040],{},[99,25269,23043],{},[99,25271,23046],{},[1815,25273,25274],{},[99,25275,15157],{},[1815,25277,25278,15139,25280,15139,25282],{},[99,25279,24191],{},[99,25281,23867],{},[99,25283,8524],{},[1815,25285,23241],{},[15,25287,25288,25289,25291,25292,25294],{},"As with the analytic 3D shapes, these sub-props accept ",[56,25290,23079],{"href":17129}," configs (e.g. an ",[99,25293,17218],{}," rotation for a spinning logo).",[246,25296,25297,25333,25406,25468,25530],{":tabs":1557},[212,25298,25300],{"className":334,"code":25299,"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,25301,25302,25309,25319,25329],{"__ignoreMap":178},[220,25303,25304,25306],{"class":222,"line":223},[220,25305,343],{"class":264},[220,25307,25308],{"class":346},"Glass\n",[220,25310,25311,25314,25316],{"class":222,"line":179},[220,25312,25313],{"class":226}," :shapeSdfUrl",[220,25315,353],{"class":264},[220,25317,25318],{"class":230},"\"myLogoUrl\"\n",[220,25320,25321,25324,25326],{"class":222,"line":389},[220,25322,25323],{"class":226}," :shape",[220,25325,353],{"class":264},[220,25327,25328],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,25330,25331],{"class":222,"line":399},[220,25332,15660],{"class":264},[212,25334,25336],{"className":409,"code":25335,"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,25337,25338,25344,25354,25402],{"__ignoreMap":178},[220,25339,25340,25342],{"class":222,"line":223},[220,25341,343],{"class":264},[220,25343,25308],{"class":420},[220,25345,25346,25349,25351],{"class":222,"line":179},[220,25347,25348],{"class":226}," shapeSdfUrl",[220,25350,353],{"class":260},[220,25352,25353],{"class":264},"{myLogoUrl}\n",[220,25355,25356,25359,25361,25363,25365,25367,25369,25371,25374,25377,25379,25382,25384,25387,25389,25392,25394,25397,25399],{"class":222,"line":389},[220,25357,25358],{"class":226}," shape",[220,25360,353],{"class":260},[220,25362,743],{"class":264},[220,25364,20989],{"class":420},[220,25366,4685],{"class":264},[220,25368,20994],{"class":226},[220,25370,20997],{"class":264},[220,25372,25373],{"class":230},"\"svgExtrude3D\"",[220,25375,25376],{"class":264},", depth: ",[220,25378,18077],{"class":420},[220,25380,25381],{"class":264},", bevel: ",[220,25383,19541],{"class":420},[220,25385,25386],{"class":264},", rotX: ",[220,25388,24191],{"class":420},[220,25390,25391],{"class":264},", rotY: ",[220,25393,23867],{"class":420},[220,25395,25396],{"class":264},", rotZ: ",[220,25398,8524],{"class":420},[220,25400,25401],{"class":264}," })}\n",[220,25403,25404],{"class":222,"line":399},[220,25405,15660],{"class":264},[212,25407,25408],{"className":468,"code":25335,"language":469,"meta":178,"style":178},[99,25409,25410,25416,25424,25464],{"__ignoreMap":178},[220,25411,25412,25414],{"class":222,"line":223},[220,25413,343],{"class":264},[220,25415,25308],{"class":420},[220,25417,25418,25420,25422],{"class":222,"line":179},[220,25419,25348],{"class":226},[220,25421,353],{"class":260},[220,25423,25353],{"class":264},[220,25425,25426,25428,25430,25432,25434,25436,25438,25440,25442,25444,25446,25448,25450,25452,25454,25456,25458,25460,25462],{"class":222,"line":389},[220,25427,25358],{"class":226},[220,25429,353],{"class":260},[220,25431,743],{"class":264},[220,25433,20989],{"class":420},[220,25435,4685],{"class":264},[220,25437,20994],{"class":226},[220,25439,20997],{"class":264},[220,25441,25373],{"class":230},[220,25443,25376],{"class":264},[220,25445,18077],{"class":420},[220,25447,25381],{"class":264},[220,25449,19541],{"class":420},[220,25451,25386],{"class":264},[220,25453,24191],{"class":420},[220,25455,25391],{"class":264},[220,25457,23867],{"class":420},[220,25459,25396],{"class":264},[220,25461,8524],{"class":420},[220,25463,25401],{"class":264},[220,25465,25466],{"class":222,"line":399},[220,25467,15660],{"class":264},[212,25469,25470],{"className":468,"code":25335,"language":469,"meta":178,"style":178},[99,25471,25472,25478,25486,25526],{"__ignoreMap":178},[220,25473,25474,25476],{"class":222,"line":223},[220,25475,343],{"class":264},[220,25477,25308],{"class":420},[220,25479,25480,25482,25484],{"class":222,"line":179},[220,25481,25348],{"class":226},[220,25483,353],{"class":260},[220,25485,25353],{"class":264},[220,25487,25488,25490,25492,25494,25496,25498,25500,25502,25504,25506,25508,25510,25512,25514,25516,25518,25520,25522,25524],{"class":222,"line":389},[220,25489,25358],{"class":226},[220,25491,353],{"class":260},[220,25493,743],{"class":264},[220,25495,20989],{"class":420},[220,25497,4685],{"class":264},[220,25499,20994],{"class":226},[220,25501,20997],{"class":264},[220,25503,25373],{"class":230},[220,25505,25376],{"class":264},[220,25507,18077],{"class":420},[220,25509,25381],{"class":264},[220,25511,19541],{"class":420},[220,25513,25386],{"class":264},[220,25515,24191],{"class":420},[220,25517,25391],{"class":264},[220,25519,23867],{"class":420},[220,25521,25396],{"class":264},[220,25523,8524],{"class":420},[220,25525,25401],{"class":264},[220,25527,25528],{"class":222,"line":399},[220,25529,15660],{"class":264},[212,25531,25533],{"className":251,"code":25532,"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,25534,25535,25549,25553,25557,25565,25569,25578,25608,25612,25616,25620],{"__ignoreMap":178},[220,25536,25537,25539,25541,25543,25545,25547],{"class":222,"line":223},[220,25538,1735],{"class":260},[220,25540,1738],{"class":420},[220,25542,1741],{"class":260},[220,25544,1744],{"class":260},[220,25546,1747],{"class":226},[220,25548,1750],{"class":264},[220,25550,25551],{"class":222,"line":179},[220,25552,1765],{"class":264},[220,25554,25555],{"class":222,"line":389},[220,25556,16236],{"class":264},[220,25558,25559,25561,25563],{"class":222,"line":399},[220,25560,16241],{"class":264},[220,25562,21390],{"class":230},[220,25564,1760],{"class":264},[220,25566,25567],{"class":222,"line":644},[220,25568,16250],{"class":264},[220,25570,25571,25574,25576],{"class":222,"line":650},[220,25572,25573],{"class":264}," shapeSdfUrl: ",[220,25575,25180],{"class":230},[220,25577,1760],{"class":264},[220,25579,25580,25583,25586,25588,25590,25592,25594,25596,25598,25600,25602,25604,25606],{"class":222,"line":656},[220,25581,25582],{"class":264}," shape: { type: ",[220,25584,25585],{"class":230},"'svgExtrude3D'",[220,25587,25376],{"class":264},[220,25589,18077],{"class":420},[220,25591,25381],{"class":264},[220,25593,19541],{"class":420},[220,25595,25386],{"class":264},[220,25597,24191],{"class":420},[220,25599,25391],{"class":264},[220,25601,23867],{"class":420},[220,25603,25396],{"class":264},[220,25605,8524],{"class":420},[220,25607,5520],{"class":264},[220,25609,25610],{"class":222,"line":673},[220,25611,4778],{"class":264},[220,25613,25614],{"class":222,"line":682},[220,25615,4458],{"class":264},[220,25617,25618],{"class":222,"line":691},[220,25619,1787],{"class":264},[220,25621,25622],{"class":222,"line":696},[220,25623,1792],{"class":264},[15,25625,25626,25627,25629,25630,25632],{},"The easiest way to produce a working extruded logo (SDF ",[99,25628,25064],{}," plus the matching ",[99,25631,20845],{}," config) is to set it up visually in the design editor and use the code export.",[1504,25634,14848],{},{"title":178,"searchDepth":179,"depth":179,"links":25636},[25637,25638,25662,25688],{"id":20870,"depth":179,"text":20871},{"id":21536,"depth":179,"text":21537,"children":25639},[25640,25642,25644,25646,25648,25650,25652,25654,25656,25658,25660],{"id":21548,"depth":389,"text":25641},"Circle — circleSDF",{"id":21620,"depth":389,"text":25643},"Ellipse — ellipseSDF",{"id":21744,"depth":389,"text":25645},"Polygon — polygonSDF",{"id":21895,"depth":389,"text":25647},"Star — starSDF",{"id":22046,"depth":389,"text":25649},"Flower — flowerSDF",{"id":22197,"depth":389,"text":25651},"Ring — ringSDF",{"id":22296,"depth":389,"text":25653},"Cross — crossSDF",{"id":22446,"depth":389,"text":25655},"Rounded Rectangle — roundedRectSDF",{"id":22590,"depth":389,"text":25657},"Vesica — vesicaSDF",{"id":22718,"depth":389,"text":25659},"Crescent — crescentSDF",{"id":22865,"depth":389,"text":25661},"Trapezoid — trapezoidSDF",{"id":23013,"depth":179,"text":23014,"children":25663},[25664,25666,25668,25670,25672,25674,25676,25678,25680,25682,25684,25686],{"id":23181,"depth":389,"text":25665},"Sphere — sphere3D",{"id":23299,"depth":389,"text":25667},"Cube — cube3D",{"id":23502,"depth":389,"text":25669},"Torus — torus3D",{"id":23647,"depth":389,"text":25671},"Octahedron — octahedron3D",{"id":23768,"depth":389,"text":25673},"Cylinder — cylinder3D",{"id":23940,"depth":389,"text":25675},"Capsule — capsule3D",{"id":24085,"depth":389,"text":25677},"Cone — cone3D",{"id":24265,"depth":389,"text":25679},"Pyramid — pyramid3D",{"id":24410,"depth":389,"text":25681},"Prism — prism3D",{"id":24556,"depth":389,"text":25683},"Ellipsoid — ellipsoid3D",{"id":24733,"depth":389,"text":25685},"Diamond — diamond3D",{"id":24880,"depth":389,"text":25687},"Link — link3D",{"id":25050,"depth":179,"text":25051,"children":25689},[25690],{"id":25193,"depth":389,"text":25194},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":20821,"description":25691},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":25699,"title":25700,"body":25701,"category":2240,"description":26055,"exclude":190,"extension":191,"forceFramework":190,"icon":26056,"meta":26057,"navigation":194,"path":26058,"seo":26059,"stem":26060,"__hash__":26061},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":25702,"toc":26049},[25703,25706,25709,25713,25720,25723,25727,25730,25736,25746,25751,25812,25815,25819,25822,25827,25843,25849,26003,26007,26013,26019,26034,26040,26046],[11,25704,25700],{"id":25705},"performance",[15,25707,25708],{},"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,25710,25712],{"id":25711},"the-frame-budget","The frame budget",[15,25714,25715,25716,25719],{},"At 60fps, the GPU has ",[159,25717,25718],{},"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,25721,25722],{},"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,25724,25726],{"id":25725},"generator-vs-filter-effects","Generator vs. filter effects",[15,25728,25729],{},"Effects fall into two broad categories with very different cost profiles:",[15,25731,25732,25735],{},[159,25733,25734],{},"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,25737,25738,25741,25742,25745],{},[159,25739,25740],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,25743,25744],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,25747,25748],{},[159,25749,25750],{},"Rough cost categories:",[1794,25752,25753,25766],{},[1797,25754,25755],{},[1800,25756,25757,25760,25763],{},[1803,25758,25759],{},"Category",[1803,25761,25762],{},"Examples",[1803,25764,25765],{},"Relative cost",[1810,25767,25768,25779,25790,25801],{},[1800,25769,25770,25773,25776],{},[1815,25771,25772],{},"Very light",[1815,25774,25775],{},"SolidColor, LinearGradient, RadialGradient",[1815,25777,25778],{},"~0–0.1ms",[1800,25780,25781,25784,25787],{},[1815,25782,25783],{},"Light",[1815,25785,25786],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,25788,25789],{},"~0.1–0.5ms",[1800,25791,25792,25795,25798],{},[1815,25793,25794],{},"Medium",[1815,25796,25797],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,25799,25800],{},"~0.5–2ms",[1800,25802,25803,25806,25809],{},[1815,25804,25805],{},"Heavy",[1815,25807,25808],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,25810,25811],{},"~1-2ms+",[15,25813,25814],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,25816,25818],{"id":25817},"render-to-texture-rtt","Render-to-texture (RTT)",[15,25820,25821],{},"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,25823,25824],{},[159,25825,25826],{},"What triggers RTT:",[34,25828,25829,25832,25840],{},[37,25830,25831],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,25833,1839,25834,15569,25836,25839],{},[99,25835,19271],{},[56,25837,25838],{"href":17129},"Prop Driver"," on any component (the source layer is RTT'd)",[37,25841,25842],{},"The masking system when a layer is used as a mask source",[15,25844,25845,25848],{},[159,25846,25847],{},"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,25850,25852],{"className":334,"code":25851,"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,25853,25854,25859,25867,25875,25883,25891,25906,25914,25922,25930,25938,25946,25950,25955,25963,25971,25979,25987,25995],{"__ignoreMap":178},[220,25855,25856],{"class":222,"line":223},[220,25857,25858],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,25860,25861,25863,25865],{"class":222,"line":179},[220,25862,343],{"class":264},[220,25864,347],{"class":346},[220,25866,359],{"class":264},[220,25868,25869,25871,25873],{"class":222,"line":389},[220,25870,364],{"class":264},[220,25872,367],{"class":346},[220,25874,386],{"class":264},[220,25876,25877,25879,25881],{"class":222,"line":399},[220,25878,364],{"class":264},[220,25880,6074],{"class":346},[220,25882,359],{"class":264},[220,25884,25885,25887,25889],{"class":222,"line":644},[220,25886,2550],{"class":264},[220,25888,15323],{"class":346},[220,25890,359],{"class":264},[220,25892,25893,25895,25897,25899,25901,25904],{"class":222,"line":650},[220,25894,2813],{"class":264},[220,25896,11622],{"class":346},[220,25898,17185],{"class":226},[220,25900,353],{"class":264},[220,25902,25903],{"class":230},"\"20\"",[220,25905,359],{"class":264},[220,25907,25908,25910,25912],{"class":222,"line":656},[220,25909,10661],{"class":264},[220,25911,2553],{"class":346},[220,25913,386],{"class":264},[220,25915,25916,25918,25920],{"class":222,"line":673},[220,25917,10766],{"class":264},[220,25919,11622],{"class":346},[220,25921,359],{"class":264},[220,25923,25924,25926,25928],{"class":222,"line":682},[220,25925,2828],{"class":264},[220,25927,15323],{"class":346},[220,25929,359],{"class":264},[220,25931,25932,25934,25936],{"class":222,"line":691},[220,25933,2567],{"class":264},[220,25935,6074],{"class":346},[220,25937,359],{"class":264},[220,25939,25940,25942,25944],{"class":222,"line":696},[220,25941,402],{"class":264},[220,25943,347],{"class":346},[220,25945,359],{"class":264},[220,25947,25948],{"class":222,"line":702},[220,25949,647],{"emptyLinePlaceholder":194},[220,25951,25952],{"class":222,"line":718},[220,25953,25954],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,25956,25957,25959,25961],{"class":222,"line":727},[220,25958,343],{"class":264},[220,25960,347],{"class":346},[220,25962,359],{"class":264},[220,25964,25965,25967,25969],{"class":222,"line":2664},[220,25966,364],{"class":264},[220,25968,367],{"class":346},[220,25970,386],{"class":264},[220,25972,25973,25975,25977],{"class":222,"line":3459},[220,25974,364],{"class":264},[220,25976,6074],{"class":346},[220,25978,359],{"class":264},[220,25980,25981,25983,25985],{"class":222,"line":9514},[220,25982,2550],{"class":264},[220,25984,2553],{"class":346},[220,25986,386],{"class":264},[220,25988,25989,25991,25993],{"class":222,"line":9525},[220,25990,2567],{"class":264},[220,25992,6074],{"class":346},[220,25994,359],{"class":264},[220,25996,25997,25999,26001],{"class":222,"line":9530},[220,25998,402],{"class":264},[220,26000,347],{"class":346},[220,26002,359],{"class":264},[23,26004,26006],{"id":26005},"practical-tips","Practical tips",[15,26008,26009,26012],{},[159,26010,26011],{},"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,26014,26015,26018],{},[159,26016,26017],{},"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,26020,26021,26024,26025,26027,26028,26030,26031,26033],{},[159,26022,26023],{},"Invisible layers still cost."," A hidden layer with ",[99,26026,8896],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,26029,8524],{}," still renders the layer. Use ",[99,26032,8896],{}," to truly exclude layers you don't need.",[15,26035,26036,26039],{},[159,26037,26038],{},"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,26041,26042,26045],{},[159,26043,26044],{},"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,26047,26048],{},"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":26050},[26051,26052,26053,26054],{"id":25711,"depth":179,"text":25712},{"id":25725,"depth":179,"text":25726},{"id":25817,"depth":179,"text":25818},{"id":26005,"depth":179,"text":26006},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":25700,"description":26055},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":26063,"title":201,"body":26064,"category":188,"description":26692,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26693,"navigation":194,"path":26694,"seo":26695,"stem":26696,"__hash__":26697},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":26065,"toc":26682},[26066,26070,26073,26077,26089,26093,26099,26130,26132,26139,26233,26235,26241,26243,26251,26353,26360,26384,26386,26393,26485,26489,26498,26617,26624,26630,26634,26641,26655,26658,26660,26679],[11,26067,26069],{"id":26068},"quickstart-javascript","Quickstart (JavaScript)",[15,26071,26072],{},"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,26074,26076],{"id":26075},"install-the-npm-package","Install the npm package",[212,26078,26079],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26080,26081],{"__ignoreMap":178},[220,26082,26083,26085,26087],{"class":222,"line":223},[220,26084,227],{"class":226},[220,26086,231],{"class":230},[220,26088,234],{"class":230},[23,26090,26092],{"id":26091},"set-up-a-canvas","Set up a canvas",[15,26094,26095,26096,26098],{},"Create a ",[99,26097,586],{}," element in your HTML and give it a size:",[212,26100,26102],{"className":12736,"code":26101,"language":12738,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,26103,26104],{"__ignoreMap":178},[220,26105,26106,26108,26110,26112,26114,26117,26119,26121,26124,26126,26128],{"class":222,"line":223},[220,26107,343],{"class":264},[220,26109,12747],{"class":346},[220,26111,8951],{"class":226},[220,26113,353],{"class":264},[220,26115,26116],{"class":230},"\"my-shader\"",[220,26118,663],{"class":226},[220,26120,353],{"class":264},[220,26122,26123],{"class":230},"\"width: 100%; height: 400px;\"",[220,26125,3741],{"class":264},[220,26127,12747],{"class":346},[220,26129,359],{"class":264},[23,26131,323],{"id":322},[15,26133,26134,26135,26138],{},"Import ",[99,26136,26137],{},"createShader",", pass it the canvas and a list of components:",[212,26140,26142],{"className":251,"code":26141,"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,26143,26144,26154,26158,26176,26180,26194,26198,26216,26225,26229],{"__ignoreMap":178},[220,26145,26146,26148,26150,26152],{"class":222,"line":223},[220,26147,261],{"class":260},[220,26149,11364],{"class":264},[220,26151,268],{"class":260},[220,26153,11369],{"class":230},[220,26155,26156],{"class":222,"line":179},[220,26157,647],{"emptyLinePlaceholder":194},[220,26159,26160,26162,26164,26166,26168,26170,26172,26174],{"class":222,"line":389},[220,26161,1735],{"class":260},[220,26163,12369],{"class":420},[220,26165,1741],{"class":260},[220,26167,12374],{"class":264},[220,26169,12377],{"class":226},[220,26171,2626],{"class":264},[220,26173,12382],{"class":230},[220,26175,2632],{"class":264},[220,26177,26178],{"class":222,"line":399},[220,26179,647],{"emptyLinePlaceholder":194},[220,26181,26182,26184,26186,26188,26190,26192],{"class":222,"line":644},[220,26183,1735],{"class":260},[220,26185,1738],{"class":420},[220,26187,1741],{"class":260},[220,26189,1744],{"class":260},[220,26191,1747],{"class":226},[220,26193,1750],{"class":264},[220,26195,26196],{"class":222,"line":650},[220,26197,1765],{"class":264},[220,26199,26200,26202,26204,26206,26209,26211,26214],{"class":222,"line":656},[220,26201,1770],{"class":264},[220,26203,2462],{"class":230},[220,26205,10018],{"class":264},[220,26207,26208],{"class":230},"'#0f172a'",[220,26210,10024],{"class":264},[220,26212,26213],{"class":230},"'#7c3aed'",[220,26215,6422],{"class":264},[220,26217,26218,26220,26223],{"class":222,"line":673},[220,26219,1770],{"class":264},[220,26221,26222],{"class":230},"'CursorTrail'",[220,26224,2465],{"class":264},[220,26226,26227],{"class":222,"line":682},[220,26228,1787],{"class":264},[220,26230,26231],{"class":222,"line":691},[220,26232,1792],{"class":264},[19,26234],{":preset":578},[15,26236,1839,26237,26240],{},[99,26238,26239],{},"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,26242,594],{"id":593},[15,26244,1839,26245,26247,26248,1554],{},[99,26246,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,26249,26250],{},"ResizeObserver",[212,26252,26254],{"className":12736,"code":26253,"language":12738,"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,26255,26256,26261,26286,26290,26295,26320,26324,26329],{"__ignoreMap":178},[220,26257,26258],{"class":222,"line":223},[220,26259,26260],{"class":609},"\u003C!-- Fixed size -->\n",[220,26262,26263,26265,26267,26269,26271,26274,26276,26278,26280,26282,26284],{"class":222,"line":179},[220,26264,343],{"class":264},[220,26266,12747],{"class":346},[220,26268,8951],{"class":226},[220,26270,353],{"class":264},[220,26272,26273],{"class":230},"\"shader\"",[220,26275,663],{"class":226},[220,26277,353],{"class":264},[220,26279,668],{"class":230},[220,26281,3741],{"class":264},[220,26283,12747],{"class":346},[220,26285,359],{"class":264},[220,26287,26288],{"class":222,"line":389},[220,26289,647],{"emptyLinePlaceholder":194},[220,26291,26292],{"class":222,"line":399},[220,26293,26294],{"class":609},"\u003C!-- Full viewport -->\n",[220,26296,26297,26299,26301,26303,26305,26307,26309,26311,26314,26316,26318],{"class":222,"line":644},[220,26298,343],{"class":264},[220,26300,12747],{"class":346},[220,26302,8951],{"class":226},[220,26304,353],{"class":264},[220,26306,26273],{"class":230},[220,26308,663],{"class":226},[220,26310,353],{"class":264},[220,26312,26313],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,26315,3741],{"class":264},[220,26317,12747],{"class":346},[220,26319,359],{"class":264},[220,26321,26322],{"class":222,"line":650},[220,26323,647],{"emptyLinePlaceholder":194},[220,26325,26326],{"class":222,"line":656},[220,26327,26328],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,26330,26331,26333,26335,26337,26339,26341,26343,26345,26347,26349,26351],{"class":222,"line":673},[220,26332,343],{"class":264},[220,26334,12747],{"class":346},[220,26336,8951],{"class":226},[220,26338,353],{"class":264},[220,26340,26273],{"class":230},[220,26342,350],{"class":226},[220,26344,353],{"class":264},[220,26346,713],{"class":230},[220,26348,3741],{"class":264},[220,26350,12747],{"class":346},[220,26352,359],{"class":264},[15,26354,26355,26356,26359],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,26357,26358],{},"shader.resize()"," to sync:",[212,26361,26363],{"className":251,"code":26362,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,26364,26365,26374],{"__ignoreMap":178},[220,26366,26367,26369,26371],{"class":222,"line":223},[220,26368,12399],{"class":264},[220,26370,353],{"class":260},[220,26372,26373],{"class":230}," '600px'\n",[220,26375,26376,26378,26381],{"class":222,"line":179},[220,26377,11455],{"class":264},[220,26379,26380],{"class":226},"resize",[220,26382,26383],{"class":264},"()\n",[23,26385,1153],{"id":1152},[15,26387,26388,26389,26392],{},"Props are passed in the ",[99,26390,26391],{},"props"," object for each component. All prop names are camelCase:",[212,26394,26396],{"className":251,"code":26395,"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,26397,26398,26412,26416,26420,26428,26432,26442,26452,26461,26469,26473,26477,26481],{"__ignoreMap":178},[220,26399,26400,26402,26404,26406,26408,26410],{"class":222,"line":223},[220,26401,1735],{"class":260},[220,26403,1738],{"class":420},[220,26405,1741],{"class":260},[220,26407,1744],{"class":260},[220,26409,1747],{"class":226},[220,26411,1750],{"class":264},[220,26413,26414],{"class":222,"line":179},[220,26415,1765],{"class":264},[220,26417,26418],{"class":222,"line":389},[220,26419,16236],{"class":264},[220,26421,26422,26424,26426],{"class":222,"line":399},[220,26423,16241],{"class":264},[220,26425,2462],{"class":230},[220,26427,1760],{"class":264},[220,26429,26430],{"class":222,"line":644},[220,26431,16250],{"class":264},[220,26433,26434,26437,26440],{"class":222,"line":650},[220,26435,26436],{"class":264}," colorA: ",[220,26438,26439],{"class":230},"'#ff6b6b'",[220,26441,1760],{"class":264},[220,26443,26444,26447,26450],{"class":222,"line":656},[220,26445,26446],{"class":264}," colorB: ",[220,26448,26449],{"class":230},"'#4ecdc4'",[220,26451,1760],{"class":264},[220,26453,26454,26457,26459],{"class":222,"line":673},[220,26455,26456],{"class":264}," angle: ",[220,26458,1295],{"class":420},[220,26460,1760],{"class":264},[220,26462,26463,26466],{"class":222,"line":682},[220,26464,26465],{"class":264}," colorSpace: ",[220,26467,26468],{"class":230},"'oklch'\n",[220,26470,26471],{"class":222,"line":691},[220,26472,4778],{"class":264},[220,26474,26475],{"class":222,"line":696},[220,26476,4458],{"class":264},[220,26478,26479],{"class":222,"line":702},[220,26480,1787],{"class":264},[220,26482,26483],{"class":222,"line":718},[220,26484,1792],{"class":264},[23,26486,26488],{"id":26487},"updating-at-runtime","Updating at runtime",[15,26490,26491,26492,26494,26495,26497],{},"Assign an ",[99,26493,8907],{}," to any component, then use ",[99,26496,20653],{}," to change its props at any time:",[212,26499,26501],{"className":251,"code":26500,"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,26502,26503,26517,26521,26546,26550,26554,26558,26563,26595,26613],{"__ignoreMap":178},[220,26504,26505,26507,26509,26511,26513,26515],{"class":222,"line":223},[220,26506,1735],{"class":260},[220,26508,1738],{"class":420},[220,26510,1741],{"class":260},[220,26512,1744],{"class":260},[220,26514,1747],{"class":226},[220,26516,1750],{"class":264},[220,26518,26519],{"class":222,"line":179},[220,26520,1765],{"class":264},[220,26522,26523,26525,26527,26529,26531,26533,26535,26537,26539,26542,26544],{"class":222,"line":389},[220,26524,1770],{"class":264},[220,26526,2462],{"class":230},[220,26528,9297],{"class":264},[220,26530,11422],{"class":230},[220,26532,10018],{"class":264},[220,26534,26208],{"class":230},[220,26536,10024],{"class":264},[220,26538,26213],{"class":230},[220,26540,26541],{"class":264},", angle: ",[220,26543,8524],{"class":420},[220,26545,1782],{"class":264},[220,26547,26548],{"class":222,"line":399},[220,26549,1787],{"class":264},[220,26551,26552],{"class":222,"line":644},[220,26553,1792],{"class":264},[220,26555,26556],{"class":222,"line":650},[220,26557,647],{"emptyLinePlaceholder":194},[220,26559,26560],{"class":222,"line":656},[220,26561,26562],{"class":609},"\u002F\u002F Hook up a slider\n",[220,26564,26565,26568,26571,26573,26576,26578,26581,26583,26586,26588,26591,26593],{"class":222,"line":673},[220,26566,26567],{"class":264},"document.",[220,26569,26570],{"class":226},"querySelector",[220,26572,2626],{"class":264},[220,26574,26575],{"class":230},"'#angle-slider'",[220,26577,15294],{"class":264},[220,26579,26580],{"class":226},"addEventListener",[220,26582,2626],{"class":264},[220,26584,26585],{"class":230},"'input'",[220,26587,1895],{"class":264},[220,26589,26590],{"class":3558},"e",[220,26592,10682],{"class":260},[220,26594,3433],{"class":264},[220,26596,26597,26599,26601,26603,26605,26607,26610],{"class":222,"line":682},[220,26598,17024],{"class":264},[220,26600,11458],{"class":226},[220,26602,2626],{"class":264},[220,26604,11422],{"class":230},[220,26606,11465],{"class":264},[220,26608,26609],{"class":226},"Number",[220,26611,26612],{"class":264},"(e.target.value) })\n",[220,26614,26615],{"class":222,"line":691},[220,26616,1792],{"class":264},[15,26618,26619,26620,26623],{},"When ",[99,26621,26622],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26625,26626,26627,26629],{},"Browse the ",[56,26628,1160],{"href":1159}," for the full prop reference on every component.",[23,26631,26633],{"id":26632},"cleanup","Cleanup",[15,26635,26636,26637,26640],{},"When you're done, call ",[99,26638,26639],{},"destroy()"," to free GPU resources:",[212,26642,26644],{"className":251,"code":26643,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,26645,26646],{"__ignoreMap":178},[220,26647,26648,26650,26653],{"class":222,"line":223},[220,26649,11455],{"class":264},[220,26651,26652],{"class":226},"destroy",[220,26654,26383],{"class":264},[15,26656,26657],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,26659,1474],{"id":1473},[34,26661,26662,26666,26670,26675],{},[37,26663,26664,1483],{},[56,26665,1482],{"href":1481},[37,26667,26668,1490],{},[56,26669,1489],{"href":1488},[37,26671,26672,26674],{},[56,26673,17155],{"href":17129}," — animate and mouse-track props declaratively",[37,26676,26677,1502],{},[56,26678,1160],{"href":1159},[1504,26680,26681],{},"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":26683},[26684,26685,26686,26687,26688,26689,26690,26691],{"id":26075,"depth":179,"text":26076},{"id":26091,"depth":179,"text":26092},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":26487,"depth":179,"text":26488},{"id":26632,"depth":179,"text":26633},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":26692},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":26699,"title":201,"body":26700,"category":188,"description":27334,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":27335,"navigation":194,"path":27336,"seo":27337,"stem":27338,"__hash__":27339},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":26701,"toc":27325},[26702,26706,26710,26712,26724,26728,26742,26744,26747,26801,26803,26810,26812,26825,26959,26973,26975,26978,27050,27057,27285,27290,27294,27298,27306,27308,27322],[11,26703,26705],{"id":26704},"quickstart-react","Quickstart (React)",[26707,26708],"you-tube-embed",{"id":26709},"G7kzM8M7hA4",[23,26711,26076],{"id":26075},[212,26713,26714],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26715,26716],{"__ignoreMap":178},[220,26717,26718,26720,26722],{"class":222,"line":223},[220,26719,227],{"class":226},[220,26721,231],{"class":230},[220,26723,234],{"class":230},[23,26725,26727],{"id":26726},"import-some-components","Import some components",[212,26729,26730],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,26731,26732],{"__ignoreMap":178},[220,26733,26734,26736,26738,26740],{"class":222,"line":223},[220,26735,261],{"class":260},[220,26737,265],{"class":264},[220,26739,268],{"class":260},[220,26741,287],{"class":230},[23,26743,323],{"id":322},[15,26745,26746],{},"Let's create a very simple shader:",[212,26748,26749],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,26750,26751,26765,26785,26793],{"__ignoreMap":178},[220,26752,26753,26755,26757,26759,26761,26763],{"class":222,"line":223},[220,26754,343],{"class":264},[220,26756,347],{"class":420},[220,26758,423],{"class":226},[220,26760,353],{"class":260},[220,26762,356],{"class":230},[220,26764,359],{"class":264},[220,26766,26767,26769,26771,26773,26775,26777,26779,26781,26783],{"class":222,"line":179},[220,26768,364],{"class":264},[220,26770,367],{"class":420},[220,26772,370],{"class":226},[220,26774,353],{"class":260},[220,26776,375],{"class":230},[220,26778,378],{"class":226},[220,26780,353],{"class":260},[220,26782,383],{"class":230},[220,26784,386],{"class":264},[220,26786,26787,26789,26791],{"class":222,"line":389},[220,26788,364],{"class":264},[220,26790,394],{"class":420},[220,26792,386],{"class":264},[220,26794,26795,26797,26799],{"class":222,"line":399},[220,26796,402],{"class":264},[220,26798,347],{"class":420},[220,26800,359],{"class":264},[19,26802],{":preset":578},[15,26804,26805,583,26807,26809],{},[99,26806,101],{},[99,26808,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,26811,594],{"id":593},[15,26813,1839,26814,26816,26817,18602,26820,26822,26823,590],{},[99,26815,586],{}," has no intrinsic size. The ",[99,26818,26819],{},"className",[99,26821,1504],{}," you apply to ",[99,26824,101],{},[212,26826,26828],{"className":409,"code":26827,"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,26829,26830,26838,26852,26860,26868,26872,26880,26900,26908,26916,26920,26929,26943,26951],{"__ignoreMap":178},[220,26831,26832,26834,26836],{"class":222,"line":223},[220,26833,743],{"class":264},[220,26835,746],{"class":609},[220,26837,749],{"class":264},[220,26839,26840,26842,26844,26846,26848,26850],{"class":222,"line":179},[220,26841,343],{"class":264},[220,26843,347],{"class":420},[220,26845,423],{"class":226},[220,26847,353],{"class":260},[220,26849,623],{"class":230},[220,26851,359],{"class":264},[220,26853,26854,26856,26858],{"class":222,"line":389},[220,26855,364],{"class":264},[220,26857,367],{"class":420},[220,26859,386],{"class":264},[220,26861,26862,26864,26866],{"class":222,"line":399},[220,26863,402],{"class":264},[220,26865,347],{"class":420},[220,26867,359],{"class":264},[220,26869,26870],{"class":222,"line":644},[220,26871,647],{"emptyLinePlaceholder":194},[220,26873,26874,26876,26878],{"class":222,"line":650},[220,26875,743],{"class":264},[220,26877,790],{"class":609},[220,26879,749],{"class":264},[220,26881,26882,26884,26886,26888,26890,26892,26894,26896,26898],{"class":222,"line":656},[220,26883,343],{"class":264},[220,26885,347],{"class":420},[220,26887,663],{"class":226},[220,26889,353],{"class":260},[220,26891,805],{"class":264},[220,26893,808],{"class":230},[220,26895,811],{"class":264},[220,26897,814],{"class":230},[220,26899,817],{"class":264},[220,26901,26902,26904,26906],{"class":222,"line":673},[220,26903,364],{"class":264},[220,26905,367],{"class":420},[220,26907,386],{"class":264},[220,26909,26910,26912,26914],{"class":222,"line":682},[220,26911,402],{"class":264},[220,26913,347],{"class":420},[220,26915,359],{"class":264},[220,26917,26918],{"class":222,"line":691},[220,26919,647],{"emptyLinePlaceholder":194},[220,26921,26922,26924,26927],{"class":222,"line":696},[220,26923,743],{"class":264},[220,26925,26926],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,26928,749],{"class":264},[220,26930,26931,26933,26935,26937,26939,26941],{"class":222,"line":702},[220,26932,343],{"class":264},[220,26934,347],{"class":420},[220,26936,423],{"class":226},[220,26938,353],{"class":260},[220,26940,713],{"class":230},[220,26942,359],{"class":264},[220,26944,26945,26947,26949],{"class":222,"line":718},[220,26946,364],{"class":264},[220,26948,367],{"class":420},[220,26950,386],{"class":264},[220,26952,26953,26955,26957],{"class":222,"line":727},[220,26954,402],{"class":264},[220,26956,347],{"class":420},[220,26958,359],{"class":264},[15,26960,26961,26962,18602,26964,26966,26967,26969,26970,26972],{},"Applying a ",[99,26963,26819],{},[99,26965,1504],{}," to the ",[99,26968,101],{}," tag is preferred over trying to target the ",[99,26971,586],{}," element directly, as the internal DOM structure may change in the future.",[23,26974,1153],{"id":1152},[15,26976,26977],{},"Pass props directly to configure each component. All props use camelCase:",[212,26979,26980],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,26981,26982,26996,27002,27010,27018,27030,27038,27042],{"__ignoreMap":178},[220,26983,26984,26986,26988,26990,26992,26994],{"class":222,"line":223},[220,26985,343],{"class":264},[220,26987,347],{"class":420},[220,26989,423],{"class":226},[220,26991,353],{"class":260},[220,26993,356],{"class":230},[220,26995,359],{"class":264},[220,26997,26998,27000],{"class":222,"line":179},[220,26999,364],{"class":264},[220,27001,1189],{"class":420},[220,27003,27004,27006,27008],{"class":222,"line":389},[220,27005,1194],{"class":226},[220,27007,353],{"class":260},[220,27009,1199],{"class":230},[220,27011,27012,27014,27016],{"class":222,"line":399},[220,27013,1204],{"class":226},[220,27015,353],{"class":260},[220,27017,1209],{"class":230},[220,27019,27020,27022,27024,27026,27028],{"class":222,"line":644},[220,27021,1288],{"class":226},[220,27023,353],{"class":260},[220,27025,743],{"class":264},[220,27027,1295],{"class":420},[220,27029,749],{"class":264},[220,27031,27032,27034,27036],{"class":222,"line":650},[220,27033,1302],{"class":226},[220,27035,353],{"class":260},[220,27037,1229],{"class":230},[220,27039,27040],{"class":222,"line":656},[220,27041,1234],{"class":264},[220,27043,27044,27046,27048],{"class":222,"line":673},[220,27045,402],{"class":264},[220,27047,347],{"class":420},[220,27049,359],{"class":264},[15,27051,27052,27053,27056],{},"Props also accept state — ",[99,27054,27055],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,27058,27060],{"className":409,"code":27059,"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,27061,27062,27072,27083,27087,27102,27126,27130,27136,27140,27154,27181,27189,27193,27200,27210,27223,27237,27247,27269,27273,27277,27281],{"__ignoreMap":178},[220,27063,27064,27066,27068,27070],{"class":222,"line":223},[220,27065,261],{"class":260},[220,27067,2682],{"class":264},[220,27069,268],{"class":260},[220,27071,2687],{"class":230},[220,27073,27074,27076,27079,27081],{"class":222,"line":179},[220,27075,261],{"class":260},[220,27077,27078],{"class":264}," { Shader, LinearGradient } ",[220,27080,268],{"class":260},[220,27082,287],{"class":230},[220,27084,27085],{"class":222,"line":389},[220,27086,647],{"emptyLinePlaceholder":194},[220,27088,27089,27092,27095,27097,27100],{"class":222,"line":399},[220,27090,27091],{"class":260},"export",[220,27093,27094],{"class":260}," default",[220,27096,11794],{"class":260},[220,27098,27099],{"class":226}," MyShader",[220,27101,2647],{"class":264},[220,27103,27104,27106,27108,27110,27112,27114,27116,27118,27120,27122,27124],{"class":222,"line":644},[220,27105,2705],{"class":260},[220,27107,2708],{"class":264},[220,27109,10616],{"class":420},[220,27111,1895],{"class":264},[220,27113,10621],{"class":420},[220,27115,2719],{"class":264},[220,27117,353],{"class":260},[220,27119,2724],{"class":226},[220,27121,2626],{"class":264},[220,27123,8524],{"class":420},[220,27125,2632],{"class":264},[220,27127,27128],{"class":222,"line":650},[220,27129,647],{"emptyLinePlaceholder":194},[220,27131,27132,27134],{"class":222,"line":656},[220,27133,2739],{"class":260},[220,27135,2742],{"class":264},[220,27137,27138],{"class":222,"line":673},[220,27139,10648],{"class":264},[220,27141,27142,27144,27146,27148,27150,27152],{"class":222,"line":682},[220,27143,2813],{"class":264},[220,27145,347],{"class":420},[220,27147,423],{"class":226},[220,27149,353],{"class":260},[220,27151,356],{"class":230},[220,27153,359],{"class":264},[220,27155,27156,27158,27160,27162,27164,27167,27169,27171,27174,27176,27178],{"class":222,"line":691},[220,27157,10661],{"class":264},[220,27159,367],{"class":420},[220,27161,370],{"class":226},[220,27163,353],{"class":260},[220,27165,27166],{"class":230},"\"#ff6b6b\"",[220,27168,378],{"class":226},[220,27170,353],{"class":260},[220,27172,27173],{"class":230},"\"#4ecdc4\"",[220,27175,10384],{"class":226},[220,27177,353],{"class":260},[220,27179,27180],{"class":264},"{angle} \u002F>\n",[220,27182,27183,27185,27187],{"class":222,"line":696},[220,27184,10766],{"class":264},[220,27186,347],{"class":420},[220,27188,359],{"class":264},[220,27190,27191],{"class":222,"line":702},[220,27192,647],{"emptyLinePlaceholder":194},[220,27194,27195,27197],{"class":222,"line":718},[220,27196,2813],{"class":264},[220,27198,27199],{"class":346},"input\n",[220,27201,27202,27205,27207],{"class":222,"line":727},[220,27203,27204],{"class":226}," type",[220,27206,353],{"class":260},[220,27208,27209],{"class":230},"\"range\"\n",[220,27211,27212,27215,27217,27219,27221],{"class":222,"line":2664},[220,27213,27214],{"class":226}," min",[220,27216,353],{"class":260},[220,27218,743],{"class":264},[220,27220,8524],{"class":420},[220,27222,749],{"class":264},[220,27224,27225,27228,27230,27232,27235],{"class":222,"line":3459},[220,27226,27227],{"class":226}," max",[220,27229,353],{"class":260},[220,27231,743],{"class":264},[220,27233,27234],{"class":420},"360",[220,27236,749],{"class":264},[220,27238,27239,27242,27244],{"class":222,"line":9514},[220,27240,27241],{"class":226}," value",[220,27243,353],{"class":260},[220,27245,27246],{"class":264},"{angle}\n",[220,27248,27249,27252,27254,27256,27258,27260,27262,27264,27266],{"class":222,"line":9525},[220,27250,27251],{"class":226}," onChange",[220,27253,353],{"class":260},[220,27255,743],{"class":264},[220,27257,26590],{"class":3558},[220,27259,10682],{"class":260},[220,27261,10675],{"class":226},[220,27263,2626],{"class":264},[220,27265,26609],{"class":226},[220,27267,27268],{"class":264},"(e.target.value))}\n",[220,27270,27271],{"class":222,"line":9530},[220,27272,16894],{"class":264},[220,27274,27275],{"class":222,"line":10851},[220,27276,10848],{"class":264},[220,27278,27279],{"class":222,"line":10856},[220,27280,2837],{"class":264},[220,27282,27283],{"class":222,"line":11929},[220,27284,749],{"class":264},[15,27286,26619,27287,27289],{},[99,27288,10616],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,27291,26626,27292,26629],{},[56,27293,1160],{"href":1159},[23,27295,27297],{"id":27296},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,27299,27300,27301,27305],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,27302,27304],{"href":27303},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,27307,1474],{"id":1473},[34,27309,27310,27314,27318],{},[37,27311,27312,1483],{},[56,27313,1482],{"href":1481},[37,27315,27316,1490],{},[56,27317,1489],{"href":1488},[37,27319,27320,1502],{},[56,27321,1160],{"href":1159},[1504,27323,27324],{},"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":27326},[27327,27328,27329,27330,27331,27332,27333],{"id":26075,"depth":179,"text":26076},{"id":26726,"depth":179,"text":26727},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":27296,"depth":179,"text":27297},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":27334},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":27341,"title":27304,"body":27342,"category":2240,"description":28231,"exclude":190,"extension":191,"forceFramework":190,"icon":28232,"meta":28233,"navigation":194,"path":27303,"seo":28234,"stem":28235,"__hash__":28236},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":27343,"toc":28222},[27344,27348,27351,27358,27361,27470,27473,27563,27568,27578,27584,27709,27712,27716,27722,27840,27844,27847,27954,28045,28049,28052,28219],[11,27345,27347],{"id":27346},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,27349,27350],{},"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,27352,27354,27355],{"id":27353},"app-router-use-client","App Router: ",[99,27356,27357],{},"'use client'",[15,27359,27360],{},"In Next.js App Router, create a client component wrapper:",[212,27362,27364],{"className":409,"code":27363,"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,27365,27366,27371,27376,27380,27390,27394,27406,27412,27426,27446,27454,27462,27466],{"__ignoreMap":178},[220,27367,27368],{"class":222,"line":223},[220,27369,27370],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,27372,27373],{"class":222,"line":179},[220,27374,27375],{"class":230},"'use client'\n",[220,27377,27378],{"class":222,"line":389},[220,27379,647],{"emptyLinePlaceholder":194},[220,27381,27382,27384,27386,27388],{"class":222,"line":399},[220,27383,261],{"class":260},[220,27385,265],{"class":264},[220,27387,268],{"class":260},[220,27389,287],{"class":230},[220,27391,27392],{"class":222,"line":644},[220,27393,647],{"emptyLinePlaceholder":194},[220,27395,27396,27398,27400,27402,27404],{"class":222,"line":650},[220,27397,27091],{"class":260},[220,27399,27094],{"class":260},[220,27401,11794],{"class":260},[220,27403,27099],{"class":226},[220,27405,2647],{"class":264},[220,27407,27408,27410],{"class":222,"line":656},[220,27409,2739],{"class":260},[220,27411,2742],{"class":264},[220,27413,27414,27416,27418,27420,27422,27424],{"class":222,"line":673},[220,27415,2550],{"class":264},[220,27417,347],{"class":420},[220,27419,423],{"class":226},[220,27421,353],{"class":260},[220,27423,356],{"class":230},[220,27425,359],{"class":264},[220,27427,27428,27430,27432,27434,27436,27438,27440,27442,27444],{"class":222,"line":682},[220,27429,2813],{"class":264},[220,27431,367],{"class":420},[220,27433,370],{"class":226},[220,27435,353],{"class":260},[220,27437,375],{"class":230},[220,27439,378],{"class":226},[220,27441,353],{"class":260},[220,27443,383],{"class":230},[220,27445,386],{"class":264},[220,27447,27448,27450,27452],{"class":222,"line":691},[220,27449,2813],{"class":264},[220,27451,394],{"class":420},[220,27453,386],{"class":264},[220,27455,27456,27458,27460],{"class":222,"line":696},[220,27457,2828],{"class":264},[220,27459,347],{"class":420},[220,27461,359],{"class":264},[220,27463,27464],{"class":222,"line":702},[220,27465,2837],{"class":264},[220,27467,27468],{"class":222,"line":718},[220,27469,749],{"class":264},[15,27471,27472],{},"Then use it in a Server Component:",[212,27474,27476],{"className":409,"code":27475,"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,27477,27478,27483,27495,27499,27512,27518,27526,27535,27547,27555,27559],{"__ignoreMap":178},[220,27479,27480],{"class":222,"line":223},[220,27481,27482],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,27484,27485,27487,27490,27492],{"class":222,"line":179},[220,27486,261],{"class":260},[220,27488,27489],{"class":264}," MyShader ",[220,27491,268],{"class":260},[220,27493,27494],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,27496,27497],{"class":222,"line":389},[220,27498,647],{"emptyLinePlaceholder":194},[220,27500,27501,27503,27505,27507,27510],{"class":222,"line":399},[220,27502,27091],{"class":260},[220,27504,27094],{"class":260},[220,27506,11794],{"class":260},[220,27508,27509],{"class":226}," Page",[220,27511,2647],{"class":264},[220,27513,27514,27516],{"class":222,"line":644},[220,27515,2739],{"class":260},[220,27517,2742],{"class":264},[220,27519,27520,27522,27524],{"class":222,"line":650},[220,27521,2550],{"class":264},[220,27523,12495],{"class":346},[220,27525,359],{"class":264},[220,27527,27528,27530,27533],{"class":222,"line":656},[220,27529,2813],{"class":264},[220,27531,27532],{"class":420},"MyShader",[220,27534,386],{"class":264},[220,27536,27537,27539,27541,27543,27545],{"class":222,"line":673},[220,27538,2813],{"class":264},[220,27540,11],{"class":346},[220,27542,12783],{"class":264},[220,27544,11],{"class":346},[220,27546,359],{"class":264},[220,27548,27549,27551,27553],{"class":222,"line":682},[220,27550,2828],{"class":264},[220,27552,12495],{"class":346},[220,27554,359],{"class":264},[220,27556,27557],{"class":222,"line":691},[220,27558,2837],{"class":264},[220,27560,27561],{"class":222,"line":696},[220,27562,749],{"class":264},[15,27564,1839,27565,27567],{},[99,27566,27357],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,27569,27354,27571,27574,27575],{"id":27570},"app-router-nextdynamic-with-ssr-false",[99,27572,27573],{},"next\u002Fdynamic"," with ",[99,27576,27577],{},"ssr: false",[15,27579,27580,27581,27583],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,27582,27573],{}," to disable SSR:",[212,27585,27587],{"className":409,"code":27586,"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,27588,27589,27594,27606,27610,27624,27642,27651,27655,27659,27671,27677,27685,27693,27701,27705],{"__ignoreMap":178},[220,27590,27591],{"class":222,"line":223},[220,27592,27593],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,27595,27596,27598,27601,27603],{"class":222,"line":179},[220,27597,261],{"class":260},[220,27599,27600],{"class":264}," dynamic ",[220,27602,268],{"class":260},[220,27604,27605],{"class":230}," 'next\u002Fdynamic'\n",[220,27607,27608],{"class":222,"line":389},[220,27609,647],{"emptyLinePlaceholder":194},[220,27611,27612,27614,27616,27618,27621],{"class":222,"line":399},[220,27613,1735],{"class":260},[220,27615,27099],{"class":420},[220,27617,1741],{"class":260},[220,27619,27620],{"class":226}," dynamic",[220,27622,27623],{"class":264},"(\n",[220,27625,27626,27629,27631,27634,27636,27639],{"class":222,"line":644},[220,27627,27628],{"class":264}," () ",[220,27630,2762],{"class":260},[220,27632,27633],{"class":260}," import",[220,27635,2626],{"class":264},[220,27637,27638],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,27640,27641],{"class":264},"),\n",[220,27643,27644,27647,27649],{"class":222,"line":650},[220,27645,27646],{"class":264}," { ssr: ",[220,27648,2629],{"class":420},[220,27650,5520],{"class":264},[220,27652,27653],{"class":222,"line":656},[220,27654,2632],{"class":264},[220,27656,27657],{"class":222,"line":673},[220,27658,647],{"emptyLinePlaceholder":194},[220,27660,27661,27663,27665,27667,27669],{"class":222,"line":682},[220,27662,27091],{"class":260},[220,27664,27094],{"class":260},[220,27666,11794],{"class":260},[220,27668,27509],{"class":226},[220,27670,2647],{"class":264},[220,27672,27673,27675],{"class":222,"line":691},[220,27674,2739],{"class":260},[220,27676,2742],{"class":264},[220,27678,27679,27681,27683],{"class":222,"line":696},[220,27680,2550],{"class":264},[220,27682,12495],{"class":346},[220,27684,359],{"class":264},[220,27686,27687,27689,27691],{"class":222,"line":702},[220,27688,2813],{"class":264},[220,27690,27532],{"class":420},[220,27692,386],{"class":264},[220,27694,27695,27697,27699],{"class":222,"line":718},[220,27696,2828],{"class":264},[220,27698,12495],{"class":346},[220,27700,359],{"class":264},[220,27702,27703],{"class":222,"line":727},[220,27704,2837],{"class":264},[220,27706,27707],{"class":222,"line":2664},[220,27708,749],{"class":264},[15,27710,27711],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,27713,27715],{"id":27714},"pages-router","Pages Router",[15,27717,27718,27719,27721],{},"In the Pages Router, the same ",[99,27720,27573],{}," approach works:",[212,27723,27725],{"className":409,"code":27724,"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,27726,27727,27732,27742,27746,27758,27773,27781,27785,27789,27802,27808,27816,27824,27832,27836],{"__ignoreMap":178},[220,27728,27729],{"class":222,"line":223},[220,27730,27731],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,27733,27734,27736,27738,27740],{"class":222,"line":179},[220,27735,261],{"class":260},[220,27737,27600],{"class":264},[220,27739,268],{"class":260},[220,27741,27605],{"class":230},[220,27743,27744],{"class":222,"line":389},[220,27745,647],{"emptyLinePlaceholder":194},[220,27747,27748,27750,27752,27754,27756],{"class":222,"line":399},[220,27749,1735],{"class":260},[220,27751,27099],{"class":420},[220,27753,1741],{"class":260},[220,27755,27620],{"class":226},[220,27757,27623],{"class":264},[220,27759,27760,27762,27764,27766,27768,27771],{"class":222,"line":644},[220,27761,27628],{"class":264},[220,27763,2762],{"class":260},[220,27765,27633],{"class":260},[220,27767,2626],{"class":264},[220,27769,27770],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,27772,27641],{"class":264},[220,27774,27775,27777,27779],{"class":222,"line":650},[220,27776,27646],{"class":264},[220,27778,2629],{"class":420},[220,27780,5520],{"class":264},[220,27782,27783],{"class":222,"line":656},[220,27784,2632],{"class":264},[220,27786,27787],{"class":222,"line":673},[220,27788,647],{"emptyLinePlaceholder":194},[220,27790,27791,27793,27795,27797,27800],{"class":222,"line":682},[220,27792,27091],{"class":260},[220,27794,27094],{"class":260},[220,27796,11794],{"class":260},[220,27798,27799],{"class":226}," Home",[220,27801,2647],{"class":264},[220,27803,27804,27806],{"class":222,"line":691},[220,27805,2739],{"class":260},[220,27807,2742],{"class":264},[220,27809,27810,27812,27814],{"class":222,"line":696},[220,27811,2550],{"class":264},[220,27813,3334],{"class":346},[220,27815,359],{"class":264},[220,27817,27818,27820,27822],{"class":222,"line":702},[220,27819,2813],{"class":264},[220,27821,27532],{"class":420},[220,27823,386],{"class":264},[220,27825,27826,27828,27830],{"class":222,"line":718},[220,27827,2828],{"class":264},[220,27829,3334],{"class":346},[220,27831,359],{"class":264},[220,27833,27834],{"class":222,"line":727},[220,27835,2837],{"class":264},[220,27837,27838],{"class":222,"line":2664},[220,27839,749],{"class":264},[23,27841,27843],{"id":27842},"in-a-root-layout","In a root layout",[15,27845,27846],{},"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,27848,27850],{"className":409,"code":27849,"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,27851,27852,27857,27869,27873,27893,27899,27907,27916,27925,27930,27938,27946,27950],{"__ignoreMap":178},[220,27853,27854],{"class":222,"line":223},[220,27855,27856],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,27858,27859,27861,27864,27866],{"class":222,"line":179},[220,27860,261],{"class":260},[220,27862,27863],{"class":264}," BackgroundShader ",[220,27865,268],{"class":260},[220,27867,27868],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,27870,27871],{"class":222,"line":389},[220,27872,647],{"emptyLinePlaceholder":194},[220,27874,27875,27877,27879,27881,27884,27887,27890],{"class":222,"line":399},[220,27876,27091],{"class":260},[220,27878,27094],{"class":260},[220,27880,11794],{"class":260},[220,27882,27883],{"class":226}," RootLayout",[220,27885,27886],{"class":264},"({ ",[220,27888,27889],{"class":3558},"children",[220,27891,27892],{"class":264}," }) {\n",[220,27894,27895,27897],{"class":222,"line":644},[220,27896,2739],{"class":260},[220,27898,2742],{"class":264},[220,27900,27901,27903,27905],{"class":222,"line":650},[220,27902,2550],{"class":264},[220,27904,12738],{"class":346},[220,27906,359],{"class":264},[220,27908,27909,27911,27914],{"class":222,"line":656},[220,27910,2813],{"class":264},[220,27912,27913],{"class":346},"body",[220,27915,359],{"class":264},[220,27917,27918,27920,27923],{"class":222,"line":673},[220,27919,10661],{"class":264},[220,27921,27922],{"class":420},"BackgroundShader",[220,27924,386],{"class":264},[220,27926,27927],{"class":222,"line":682},[220,27928,27929],{"class":264}," {children}\n",[220,27931,27932,27934,27936],{"class":222,"line":691},[220,27933,10766],{"class":264},[220,27935,27913],{"class":346},[220,27937,359],{"class":264},[220,27939,27940,27942,27944],{"class":222,"line":696},[220,27941,2828],{"class":264},[220,27943,12738],{"class":346},[220,27945,359],{"class":264},[220,27947,27948],{"class":222,"line":702},[220,27949,2837],{"class":264},[220,27951,27952],{"class":222,"line":718},[220,27953,749],{"class":264},[212,27955,27957],{"className":409,"code":27956,"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,27958,27959,27964,27968,27972,27983,27987,28000,28006,28021,28029,28037,28041],{"__ignoreMap":178},[220,27960,27961],{"class":222,"line":223},[220,27962,27963],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,27965,27966],{"class":222,"line":179},[220,27967,27375],{"class":230},[220,27969,27970],{"class":222,"line":389},[220,27971,647],{"emptyLinePlaceholder":194},[220,27973,27974,27976,27979,27981],{"class":222,"line":399},[220,27975,261],{"class":260},[220,27977,27978],{"class":264}," { Shader, Aurora } ",[220,27980,268],{"class":260},[220,27982,287],{"class":230},[220,27984,27985],{"class":222,"line":644},[220,27986,647],{"emptyLinePlaceholder":194},[220,27988,27989,27991,27993,27995,27998],{"class":222,"line":650},[220,27990,27091],{"class":260},[220,27992,27094],{"class":260},[220,27994,11794],{"class":260},[220,27996,27997],{"class":226}," BackgroundShader",[220,27999,2647],{"class":264},[220,28001,28002,28004],{"class":222,"line":656},[220,28003,2739],{"class":260},[220,28005,2742],{"class":264},[220,28007,28008,28010,28012,28014,28016,28019],{"class":222,"line":673},[220,28009,2550],{"class":264},[220,28011,347],{"class":420},[220,28013,423],{"class":226},[220,28015,353],{"class":260},[220,28017,28018],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,28020,359],{"class":264},[220,28022,28023,28025,28027],{"class":222,"line":682},[220,28024,2813],{"class":264},[220,28026,12474],{"class":420},[220,28028,386],{"class":264},[220,28030,28031,28033,28035],{"class":222,"line":691},[220,28032,2828],{"class":264},[220,28034,347],{"class":420},[220,28036,359],{"class":264},[220,28038,28039],{"class":222,"line":696},[220,28040,2837],{"class":264},[220,28042,28043],{"class":222,"line":702},[220,28044,749],{"class":264},[23,28046,28048],{"id":28047},"react-without-nextjs","React (without Next.js)",[15,28050,28051],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,28053,28055],{"className":409,"code":28054,"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,28056,28057,28067,28077,28081,28093,28119,28123,28133,28144,28148,28152,28171,28175,28181,28195,28203,28211,28215],{"__ignoreMap":178},[220,28058,28059,28061,28063,28065],{"class":222,"line":223},[220,28060,261],{"class":260},[220,28062,3477],{"class":264},[220,28064,268],{"class":260},[220,28066,2687],{"class":230},[220,28068,28069,28071,28073,28075],{"class":222,"line":179},[220,28070,261],{"class":260},[220,28072,27078],{"class":264},[220,28074,268],{"class":260},[220,28076,287],{"class":230},[220,28078,28079],{"class":222,"line":389},[220,28080,647],{"emptyLinePlaceholder":194},[220,28082,28083,28085,28087,28089,28091],{"class":222,"line":399},[220,28084,27091],{"class":260},[220,28086,27094],{"class":260},[220,28088,11794],{"class":260},[220,28090,27099],{"class":226},[220,28092,2647],{"class":264},[220,28094,28095,28097,28099,28102,28104,28107,28109,28111,28113,28115,28117],{"class":222,"line":644},[220,28096,2705],{"class":260},[220,28098,2708],{"class":264},[220,28100,28101],{"class":420},"mounted",[220,28103,1895],{"class":264},[220,28105,28106],{"class":420},"setMounted",[220,28108,2719],{"class":264},[220,28110,353],{"class":260},[220,28112,2724],{"class":226},[220,28114,2626],{"class":264},[220,28116,2629],{"class":420},[220,28118,2632],{"class":264},[220,28120,28121],{"class":222,"line":650},[220,28122,647],{"emptyLinePlaceholder":194},[220,28124,28125,28127,28129,28131],{"class":222,"line":656},[220,28126,3534],{"class":226},[220,28128,3537],{"class":264},[220,28130,2762],{"class":260},[220,28132,3433],{"class":264},[220,28134,28135,28138,28140,28142],{"class":222,"line":673},[220,28136,28137],{"class":226}," setMounted",[220,28139,2626],{"class":264},[220,28141,2332],{"class":420},[220,28143,2632],{"class":264},[220,28145,28146],{"class":222,"line":682},[220,28147,3574],{"class":264},[220,28149,28150],{"class":222,"line":691},[220,28151,647],{"emptyLinePlaceholder":194},[220,28153,28154,28157,28159,28162,28165,28168],{"class":222,"line":696},[220,28155,28156],{"class":260}," if",[220,28158,3443],{"class":264},[220,28160,28161],{"class":260},"!",[220,28163,28164],{"class":264},"mounted) ",[220,28166,28167],{"class":260},"return",[220,28169,28170],{"class":420}," null\n",[220,28172,28173],{"class":222,"line":702},[220,28174,647],{"emptyLinePlaceholder":194},[220,28176,28177,28179],{"class":222,"line":718},[220,28178,2739],{"class":260},[220,28180,2742],{"class":264},[220,28182,28183,28185,28187,28189,28191,28193],{"class":222,"line":727},[220,28184,2550],{"class":264},[220,28186,347],{"class":420},[220,28188,423],{"class":226},[220,28190,353],{"class":260},[220,28192,356],{"class":230},[220,28194,359],{"class":264},[220,28196,28197,28199,28201],{"class":222,"line":2664},[220,28198,2813],{"class":264},[220,28200,367],{"class":420},[220,28202,386],{"class":264},[220,28204,28205,28207,28209],{"class":222,"line":3459},[220,28206,2828],{"class":264},[220,28208,347],{"class":420},[220,28210,359],{"class":264},[220,28212,28213],{"class":222,"line":9514},[220,28214,2837],{"class":264},[220,28216,28217],{"class":222,"line":9525},[220,28218,749],{"class":264},[1504,28220,28221],{},"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":28223},[28224,28226,28228,28229,28230],{"id":27353,"depth":179,"text":28225},"App Router: 'use client'",{"id":27570,"depth":179,"text":28227},"App Router: next\u002Fdynamic with ssr: false",{"id":27714,"depth":179,"text":27715},{"id":27842,"depth":179,"text":27843},{"id":28047,"depth":179,"text":28048},"Using Shaders in Next.js and React SSR applications","server",{},{"title":27304,"description":28231},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":28238,"title":201,"body":28239,"category":188,"description":28848,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28849,"navigation":194,"path":28850,"seo":28851,"stem":28852,"__hash__":28853},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":28240,"toc":28839},[28241,28245,28247,28259,28261,28275,28277,28279,28333,28335,28341,28343,28354,28487,28497,28499,28502,28574,28581,28804,28807,28811,28815,28821,28823,28837],[11,28242,28244],{"id":28243},"quickstart-solid","Quickstart (Solid)",[23,28246,26076],{"id":26075},[212,28248,28249],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28250,28251],{"__ignoreMap":178},[220,28252,28253,28255,28257],{"class":222,"line":223},[220,28254,227],{"class":226},[220,28256,231],{"class":230},[220,28258,234],{"class":230},[23,28260,26727],{"id":26726},[212,28262,28263],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,28264,28265],{"__ignoreMap":178},[220,28266,28267,28269,28271,28273],{"class":222,"line":223},[220,28268,261],{"class":260},[220,28270,265],{"class":264},[220,28272,268],{"class":260},[220,28274,319],{"class":230},[23,28276,323],{"id":322},[15,28278,26746],{},[212,28280,28281],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,28282,28283,28297,28317,28325],{"__ignoreMap":178},[220,28284,28285,28287,28289,28291,28293,28295],{"class":222,"line":223},[220,28286,343],{"class":264},[220,28288,347],{"class":420},[220,28290,350],{"class":226},[220,28292,353],{"class":260},[220,28294,356],{"class":230},[220,28296,359],{"class":264},[220,28298,28299,28301,28303,28305,28307,28309,28311,28313,28315],{"class":222,"line":179},[220,28300,364],{"class":264},[220,28302,367],{"class":420},[220,28304,370],{"class":226},[220,28306,353],{"class":260},[220,28308,375],{"class":230},[220,28310,378],{"class":226},[220,28312,353],{"class":260},[220,28314,383],{"class":230},[220,28316,386],{"class":264},[220,28318,28319,28321,28323],{"class":222,"line":389},[220,28320,364],{"class":264},[220,28322,394],{"class":420},[220,28324,386],{"class":264},[220,28326,28327,28329,28331],{"class":222,"line":399},[220,28328,402],{"class":264},[220,28330,347],{"class":420},[220,28332,359],{"class":264},[19,28334],{":preset":578},[15,28336,28337,583,28339,26809],{},[99,28338,101],{},[99,28340,586],{},[23,28342,594],{"id":593},[15,28344,1839,28345,26816,28347,18602,28350,26822,28352,590],{},[99,28346,586],{},[99,28348,28349],{},"class",[99,28351,1504],{},[99,28353,101],{},[212,28355,28357],{"className":468,"code":28356,"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,28358,28359,28367,28381,28389,28397,28401,28409,28429,28437,28445,28449,28457,28471,28479],{"__ignoreMap":178},[220,28360,28361,28363,28365],{"class":222,"line":223},[220,28362,743],{"class":264},[220,28364,746],{"class":609},[220,28366,749],{"class":264},[220,28368,28369,28371,28373,28375,28377,28379],{"class":222,"line":179},[220,28370,343],{"class":264},[220,28372,347],{"class":420},[220,28374,350],{"class":226},[220,28376,353],{"class":260},[220,28378,623],{"class":230},[220,28380,359],{"class":264},[220,28382,28383,28385,28387],{"class":222,"line":389},[220,28384,364],{"class":264},[220,28386,367],{"class":420},[220,28388,386],{"class":264},[220,28390,28391,28393,28395],{"class":222,"line":399},[220,28392,402],{"class":264},[220,28394,347],{"class":420},[220,28396,359],{"class":264},[220,28398,28399],{"class":222,"line":644},[220,28400,647],{"emptyLinePlaceholder":194},[220,28402,28403,28405,28407],{"class":222,"line":650},[220,28404,743],{"class":264},[220,28406,790],{"class":609},[220,28408,749],{"class":264},[220,28410,28411,28413,28415,28417,28419,28421,28423,28425,28427],{"class":222,"line":656},[220,28412,343],{"class":264},[220,28414,347],{"class":420},[220,28416,663],{"class":226},[220,28418,353],{"class":260},[220,28420,805],{"class":264},[220,28422,808],{"class":230},[220,28424,811],{"class":264},[220,28426,814],{"class":230},[220,28428,817],{"class":264},[220,28430,28431,28433,28435],{"class":222,"line":673},[220,28432,364],{"class":264},[220,28434,367],{"class":420},[220,28436,386],{"class":264},[220,28438,28439,28441,28443],{"class":222,"line":682},[220,28440,402],{"class":264},[220,28442,347],{"class":420},[220,28444,359],{"class":264},[220,28446,28447],{"class":222,"line":691},[220,28448,647],{"emptyLinePlaceholder":194},[220,28450,28451,28453,28455],{"class":222,"line":696},[220,28452,743],{"class":264},[220,28454,26926],{"class":609},[220,28456,749],{"class":264},[220,28458,28459,28461,28463,28465,28467,28469],{"class":222,"line":702},[220,28460,343],{"class":264},[220,28462,347],{"class":420},[220,28464,350],{"class":226},[220,28466,353],{"class":260},[220,28468,713],{"class":230},[220,28470,359],{"class":264},[220,28472,28473,28475,28477],{"class":222,"line":718},[220,28474,364],{"class":264},[220,28476,367],{"class":420},[220,28478,386],{"class":264},[220,28480,28481,28483,28485],{"class":222,"line":727},[220,28482,402],{"class":264},[220,28484,347],{"class":420},[220,28486,359],{"class":264},[15,28488,26961,28489,18602,28491,26966,28493,26969,28495,26972],{},[99,28490,28349],{},[99,28492,1504],{},[99,28494,101],{},[99,28496,586],{},[23,28498,1153],{"id":1152},[15,28500,28501],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,28503,28504],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,28505,28506,28520,28526,28534,28542,28554,28562,28566],{"__ignoreMap":178},[220,28507,28508,28510,28512,28514,28516,28518],{"class":222,"line":223},[220,28509,343],{"class":264},[220,28511,347],{"class":420},[220,28513,350],{"class":226},[220,28515,353],{"class":260},[220,28517,356],{"class":230},[220,28519,359],{"class":264},[220,28521,28522,28524],{"class":222,"line":179},[220,28523,364],{"class":264},[220,28525,1189],{"class":420},[220,28527,28528,28530,28532],{"class":222,"line":389},[220,28529,1194],{"class":226},[220,28531,353],{"class":260},[220,28533,1199],{"class":230},[220,28535,28536,28538,28540],{"class":222,"line":399},[220,28537,1204],{"class":226},[220,28539,353],{"class":260},[220,28541,1209],{"class":230},[220,28543,28544,28546,28548,28550,28552],{"class":222,"line":644},[220,28545,1288],{"class":226},[220,28547,353],{"class":260},[220,28549,743],{"class":264},[220,28551,1295],{"class":420},[220,28553,749],{"class":264},[220,28555,28556,28558,28560],{"class":222,"line":650},[220,28557,1302],{"class":226},[220,28559,353],{"class":260},[220,28561,1229],{"class":230},[220,28563,28564],{"class":222,"line":656},[220,28565,1234],{"class":264},[220,28567,28568,28570,28572],{"class":222,"line":673},[220,28569,402],{"class":264},[220,28571,347],{"class":420},[220,28573,359],{"class":264},[15,28575,28576,28577,28580],{},"Props also accept signals — ",[99,28578,28579],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,28582,28584],{"className":468,"code":28583,"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,28585,28586,28596,28606,28610,28622,28646,28650,28656,28660,28674,28703,28711,28715,28721,28729,28741,28753,28766,28788,28792,28796,28800],{"__ignoreMap":178},[220,28587,28588,28590,28592,28594],{"class":222,"line":223},[220,28589,261],{"class":260},[220,28591,2982],{"class":264},[220,28593,268],{"class":260},[220,28595,2987],{"class":230},[220,28597,28598,28600,28602,28604],{"class":222,"line":179},[220,28599,261],{"class":260},[220,28601,27078],{"class":264},[220,28603,268],{"class":260},[220,28605,319],{"class":230},[220,28607,28608],{"class":222,"line":389},[220,28609,647],{"emptyLinePlaceholder":194},[220,28611,28612,28614,28616,28618,28620],{"class":222,"line":399},[220,28613,27091],{"class":260},[220,28615,27094],{"class":260},[220,28617,11794],{"class":260},[220,28619,27099],{"class":226},[220,28621,2647],{"class":264},[220,28623,28624,28626,28628,28630,28632,28634,28636,28638,28640,28642,28644],{"class":222,"line":644},[220,28625,2705],{"class":260},[220,28627,2708],{"class":264},[220,28629,10616],{"class":420},[220,28631,1895],{"class":264},[220,28633,10621],{"class":420},[220,28635,2719],{"class":264},[220,28637,353],{"class":260},[220,28639,3018],{"class":226},[220,28641,2626],{"class":264},[220,28643,8524],{"class":420},[220,28645,2632],{"class":264},[220,28647,28648],{"class":222,"line":650},[220,28649,647],{"emptyLinePlaceholder":194},[220,28651,28652,28654],{"class":222,"line":656},[220,28653,2739],{"class":260},[220,28655,2742],{"class":264},[220,28657,28658],{"class":222,"line":673},[220,28659,10648],{"class":264},[220,28661,28662,28664,28666,28668,28670,28672],{"class":222,"line":682},[220,28663,2813],{"class":264},[220,28665,347],{"class":420},[220,28667,350],{"class":226},[220,28669,353],{"class":260},[220,28671,356],{"class":230},[220,28673,359],{"class":264},[220,28675,28676,28678,28680,28682,28684,28686,28688,28690,28692,28694,28696,28698,28700],{"class":222,"line":691},[220,28677,10661],{"class":264},[220,28679,367],{"class":420},[220,28681,370],{"class":226},[220,28683,353],{"class":260},[220,28685,27166],{"class":230},[220,28687,378],{"class":226},[220,28689,353],{"class":260},[220,28691,27173],{"class":230},[220,28693,10384],{"class":226},[220,28695,353],{"class":260},[220,28697,743],{"class":264},[220,28699,10616],{"class":226},[220,28701,28702],{"class":264},"()} \u002F>\n",[220,28704,28705,28707,28709],{"class":222,"line":696},[220,28706,10766],{"class":264},[220,28708,347],{"class":420},[220,28710,359],{"class":264},[220,28712,28713],{"class":222,"line":702},[220,28714,647],{"emptyLinePlaceholder":194},[220,28716,28717,28719],{"class":222,"line":718},[220,28718,2813],{"class":264},[220,28720,27199],{"class":346},[220,28722,28723,28725,28727],{"class":222,"line":727},[220,28724,27204],{"class":226},[220,28726,353],{"class":260},[220,28728,27209],{"class":230},[220,28730,28731,28733,28735,28737,28739],{"class":222,"line":2664},[220,28732,27214],{"class":226},[220,28734,353],{"class":260},[220,28736,743],{"class":264},[220,28738,8524],{"class":420},[220,28740,749],{"class":264},[220,28742,28743,28745,28747,28749,28751],{"class":222,"line":3459},[220,28744,27227],{"class":226},[220,28746,353],{"class":260},[220,28748,743],{"class":264},[220,28750,27234],{"class":420},[220,28752,749],{"class":264},[220,28754,28755,28757,28759,28761,28763],{"class":222,"line":9514},[220,28756,27241],{"class":226},[220,28758,353],{"class":260},[220,28760,743],{"class":264},[220,28762,10616],{"class":226},[220,28764,28765],{"class":264},"()}\n",[220,28767,28768,28771,28773,28775,28777,28779,28781,28783,28785],{"class":222,"line":9525},[220,28769,28770],{"class":226}," onInput",[220,28772,353],{"class":260},[220,28774,743],{"class":264},[220,28776,26590],{"class":3558},[220,28778,10682],{"class":260},[220,28780,10675],{"class":226},[220,28782,2626],{"class":264},[220,28784,26609],{"class":226},[220,28786,28787],{"class":264},"(e.currentTarget.value))}\n",[220,28789,28790],{"class":222,"line":9530},[220,28791,16894],{"class":264},[220,28793,28794],{"class":222,"line":10851},[220,28795,10848],{"class":264},[220,28797,28798],{"class":222,"line":10856},[220,28799,2837],{"class":264},[220,28801,28802],{"class":222,"line":11929},[220,28803,749],{"class":264},[15,28805,28806],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,28808,26626,28809,26629],{},[56,28810,1160],{"href":1159},[23,28812,28814],{"id":28813},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,28816,27300,28817,27305],{},[56,28818,28820],{"href":28819},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,28822,1474],{"id":1473},[34,28824,28825,28829,28833],{},[37,28826,28827,1483],{},[56,28828,1482],{"href":1481},[37,28830,28831,1490],{},[56,28832,1489],{"href":1488},[37,28834,28835,1502],{},[56,28836,1160],{"href":1159},[1504,28838,27324],{},{"title":178,"searchDepth":179,"depth":179,"links":28840},[28841,28842,28843,28844,28845,28846,28847],{"id":26075,"depth":179,"text":26076},{"id":26726,"depth":179,"text":26727},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28813,"depth":179,"text":28814},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":28848},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":28855,"title":28820,"body":28856,"category":2240,"description":29427,"exclude":190,"extension":191,"forceFramework":190,"icon":28232,"meta":29428,"navigation":194,"path":28819,"seo":29429,"stem":29430,"__hash__":29431},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":28857,"toc":29418},[28858,28862,28865,28872,28878,28969,29085,29097,29104,29113,29215,29221,29227,29405,29409,29415],[11,28859,28861],{"id":28860},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,28863,28864],{},"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,28866,28868,28871],{"id":28867},"clientonly-solidstart",[99,28869,28870],{},"clientOnly"," (SolidStart)",[15,28873,28874,28875,28877],{},"SolidStart provides a ",[99,28876,28870],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,28879,28881],{"className":409,"code":28880,"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,28882,28883,28887,28897,28901,28913,28919,28933,28953,28961,28965],{"__ignoreMap":178},[220,28884,28885],{"class":222,"line":223},[220,28886,27370],{"class":609},[220,28888,28889,28891,28893,28895],{"class":222,"line":179},[220,28890,261],{"class":260},[220,28892,27078],{"class":264},[220,28894,268],{"class":260},[220,28896,319],{"class":230},[220,28898,28899],{"class":222,"line":389},[220,28900,647],{"emptyLinePlaceholder":194},[220,28902,28903,28905,28907,28909,28911],{"class":222,"line":399},[220,28904,27091],{"class":260},[220,28906,27094],{"class":260},[220,28908,11794],{"class":260},[220,28910,27099],{"class":226},[220,28912,2647],{"class":264},[220,28914,28915,28917],{"class":222,"line":644},[220,28916,2739],{"class":260},[220,28918,2742],{"class":264},[220,28920,28921,28923,28925,28927,28929,28931],{"class":222,"line":650},[220,28922,2550],{"class":264},[220,28924,347],{"class":420},[220,28926,350],{"class":226},[220,28928,353],{"class":260},[220,28930,356],{"class":230},[220,28932,359],{"class":264},[220,28934,28935,28937,28939,28941,28943,28945,28947,28949,28951],{"class":222,"line":656},[220,28936,2813],{"class":264},[220,28938,367],{"class":420},[220,28940,370],{"class":226},[220,28942,353],{"class":260},[220,28944,375],{"class":230},[220,28946,378],{"class":226},[220,28948,353],{"class":260},[220,28950,383],{"class":230},[220,28952,386],{"class":264},[220,28954,28955,28957,28959],{"class":222,"line":673},[220,28956,2828],{"class":264},[220,28958,347],{"class":420},[220,28960,359],{"class":264},[220,28962,28963],{"class":222,"line":682},[220,28964,2837],{"class":264},[220,28966,28967],{"class":222,"line":691},[220,28968,749],{"class":264},[212,28970,28972],{"className":409,"code":28971,"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,28973,28974,28979,28991,28995,29019,29023,29035,29041,29049,29057,29069,29077,29081],{"__ignoreMap":178},[220,28975,28976],{"class":222,"line":223},[220,28977,28978],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,28980,28981,28983,28986,28988],{"class":222,"line":179},[220,28982,261],{"class":260},[220,28984,28985],{"class":264}," { clientOnly } ",[220,28987,268],{"class":260},[220,28989,28990],{"class":230}," '@solidjs\u002Fstart'\n",[220,28992,28993],{"class":222,"line":389},[220,28994,647],{"emptyLinePlaceholder":194},[220,28996,28997,28999,29001,29003,29006,29008,29010,29012,29014,29016],{"class":222,"line":399},[220,28998,1735],{"class":260},[220,29000,27099],{"class":420},[220,29002,1741],{"class":260},[220,29004,29005],{"class":226}," clientOnly",[220,29007,3537],{"class":264},[220,29009,2762],{"class":260},[220,29011,27633],{"class":260},[220,29013,2626],{"class":264},[220,29015,27770],{"class":230},[220,29017,29018],{"class":264},"))\n",[220,29020,29021],{"class":222,"line":644},[220,29022,647],{"emptyLinePlaceholder":194},[220,29024,29025,29027,29029,29031,29033],{"class":222,"line":650},[220,29026,27091],{"class":260},[220,29028,27094],{"class":260},[220,29030,11794],{"class":260},[220,29032,27509],{"class":226},[220,29034,2647],{"class":264},[220,29036,29037,29039],{"class":222,"line":656},[220,29038,2739],{"class":260},[220,29040,2742],{"class":264},[220,29042,29043,29045,29047],{"class":222,"line":673},[220,29044,2550],{"class":264},[220,29046,12495],{"class":346},[220,29048,359],{"class":264},[220,29050,29051,29053,29055],{"class":222,"line":682},[220,29052,2813],{"class":264},[220,29054,27532],{"class":420},[220,29056,386],{"class":264},[220,29058,29059,29061,29063,29065,29067],{"class":222,"line":691},[220,29060,2813],{"class":264},[220,29062,11],{"class":346},[220,29064,12783],{"class":264},[220,29066,11],{"class":346},[220,29068,359],{"class":264},[220,29070,29071,29073,29075],{"class":222,"line":696},[220,29072,2828],{"class":264},[220,29074,12495],{"class":346},[220,29076,359],{"class":264},[220,29078,29079],{"class":222,"line":702},[220,29080,2837],{"class":264},[220,29082,29083],{"class":222,"line":718},[220,29084,749],{"class":264},[15,29086,29087,29089,29090,29093,29094,29096],{},[99,29088,28870],{}," wraps the component in a ",[99,29091,29092],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,29095,16679],{}," during SSR.",[23,29098,29100,29103],{"id":29099},"isserver-guard",[99,29101,29102],{},"isServer"," guard",[15,29105,29106,29107,29109,29110,1554],{},"For finer control, check ",[99,29108,29102],{}," from ",[99,29111,29112],{},"solid-js\u002Fweb",[212,29114,29116],{"className":409,"code":29115,"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,29117,29118,29130,29140,29144,29156,29167,29171,29177,29191,29199,29207,29211],{"__ignoreMap":178},[220,29119,29120,29122,29125,29127],{"class":222,"line":223},[220,29121,261],{"class":260},[220,29123,29124],{"class":264}," { isServer } ",[220,29126,268],{"class":260},[220,29128,29129],{"class":230}," 'solid-js\u002Fweb'\n",[220,29131,29132,29134,29136,29138],{"class":222,"line":179},[220,29133,261],{"class":260},[220,29135,27078],{"class":264},[220,29137,268],{"class":260},[220,29139,319],{"class":230},[220,29141,29142],{"class":222,"line":389},[220,29143,647],{"emptyLinePlaceholder":194},[220,29145,29146,29148,29150,29152,29154],{"class":222,"line":399},[220,29147,27091],{"class":260},[220,29149,27094],{"class":260},[220,29151,11794],{"class":260},[220,29153,27099],{"class":226},[220,29155,2647],{"class":264},[220,29157,29158,29160,29163,29165],{"class":222,"line":644},[220,29159,28156],{"class":260},[220,29161,29162],{"class":264}," (isServer) ",[220,29164,28167],{"class":260},[220,29166,28170],{"class":420},[220,29168,29169],{"class":222,"line":650},[220,29170,647],{"emptyLinePlaceholder":194},[220,29172,29173,29175],{"class":222,"line":656},[220,29174,2739],{"class":260},[220,29176,2742],{"class":264},[220,29178,29179,29181,29183,29185,29187,29189],{"class":222,"line":673},[220,29180,2550],{"class":264},[220,29182,347],{"class":420},[220,29184,350],{"class":226},[220,29186,353],{"class":260},[220,29188,356],{"class":230},[220,29190,359],{"class":264},[220,29192,29193,29195,29197],{"class":222,"line":682},[220,29194,2813],{"class":264},[220,29196,367],{"class":420},[220,29198,386],{"class":264},[220,29200,29201,29203,29205],{"class":222,"line":691},[220,29202,2828],{"class":264},[220,29204,347],{"class":420},[220,29206,359],{"class":264},[220,29208,29209],{"class":222,"line":696},[220,29210,2837],{"class":264},[220,29212,29213],{"class":222,"line":702},[220,29214,749],{"class":264},[23,29216,29218,29103],{"id":29217},"onmount-guard",[99,29219,29220],{},"onMount",[15,29222,29223,29224,29226],{},"Alternatively, use ",[99,29225,29220],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,29228,29230],{"className":409,"code":29229,"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,29231,29232,29243,29253,29257,29269,29293,29297,29314,29318,29324,29338,29352,29366,29375,29384,29389,29397,29401],{"__ignoreMap":178},[220,29233,29234,29236,29239,29241],{"class":222,"line":223},[220,29235,261],{"class":260},[220,29237,29238],{"class":264}," { createSignal, onMount } ",[220,29240,268],{"class":260},[220,29242,2987],{"class":230},[220,29244,29245,29247,29249,29251],{"class":222,"line":179},[220,29246,261],{"class":260},[220,29248,27078],{"class":264},[220,29250,268],{"class":260},[220,29252,319],{"class":230},[220,29254,29255],{"class":222,"line":389},[220,29256,647],{"emptyLinePlaceholder":194},[220,29258,29259,29261,29263,29265,29267],{"class":222,"line":399},[220,29260,27091],{"class":260},[220,29262,27094],{"class":260},[220,29264,11794],{"class":260},[220,29266,27099],{"class":226},[220,29268,2647],{"class":264},[220,29270,29271,29273,29275,29277,29279,29281,29283,29285,29287,29289,29291],{"class":222,"line":644},[220,29272,2705],{"class":260},[220,29274,2708],{"class":264},[220,29276,28101],{"class":420},[220,29278,1895],{"class":264},[220,29280,28106],{"class":420},[220,29282,2719],{"class":264},[220,29284,353],{"class":260},[220,29286,3018],{"class":226},[220,29288,2626],{"class":264},[220,29290,2629],{"class":420},[220,29292,2632],{"class":264},[220,29294,29295],{"class":222,"line":650},[220,29296,647],{"emptyLinePlaceholder":194},[220,29298,29299,29301,29303,29305,29308,29310,29312],{"class":222,"line":656},[220,29300,3821],{"class":226},[220,29302,3537],{"class":264},[220,29304,2762],{"class":260},[220,29306,29307],{"class":226}," setMounted",[220,29309,2626],{"class":264},[220,29311,2332],{"class":420},[220,29313,29018],{"class":264},[220,29315,29316],{"class":222,"line":673},[220,29317,647],{"emptyLinePlaceholder":194},[220,29319,29320,29322],{"class":222,"line":682},[220,29321,2739],{"class":260},[220,29323,2742],{"class":264},[220,29325,29326,29328,29330,29332,29334,29336],{"class":222,"line":691},[220,29327,2550],{"class":264},[220,29329,3334],{"class":346},[220,29331,350],{"class":226},[220,29333,353],{"class":260},[220,29335,356],{"class":230},[220,29337,359],{"class":264},[220,29339,29340,29343,29345,29347,29350],{"class":222,"line":696},[220,29341,29342],{"class":264}," {",[220,29344,28101],{"class":226},[220,29346,3072],{"class":264},[220,29348,29349],{"class":260},"&&",[220,29351,2742],{"class":264},[220,29353,29354,29356,29358,29360,29362,29364],{"class":222,"line":702},[220,29355,10661],{"class":264},[220,29357,347],{"class":420},[220,29359,350],{"class":226},[220,29361,353],{"class":260},[220,29363,356],{"class":230},[220,29365,359],{"class":264},[220,29367,29368,29371,29373],{"class":222,"line":718},[220,29369,29370],{"class":264}," \u003C",[220,29372,367],{"class":420},[220,29374,386],{"class":264},[220,29376,29377,29380,29382],{"class":222,"line":727},[220,29378,29379],{"class":264}," \u003C\u002F",[220,29381,347],{"class":420},[220,29383,359],{"class":264},[220,29385,29386],{"class":222,"line":2664},[220,29387,29388],{"class":264}," )}\n",[220,29390,29391,29393,29395],{"class":222,"line":3459},[220,29392,2828],{"class":264},[220,29394,3334],{"class":346},[220,29396,359],{"class":264},[220,29398,29399],{"class":222,"line":9514},[220,29400,2837],{"class":264},[220,29402,29403],{"class":222,"line":9525},[220,29404,749],{"class":264},[23,29406,29408],{"id":29407},"solid-without-solidstart","Solid (without SolidStart)",[15,29410,29411,29412,29414],{},"In a Solid app without SolidStart, the ",[99,29413,29220],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,29416,29417],{},"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":29419},[29420,29422,29424,29426],{"id":28867,"depth":179,"text":29421},"clientOnly (SolidStart)",{"id":29099,"depth":179,"text":29423},"isServer guard",{"id":29217,"depth":179,"text":29425},"onMount guard",{"id":29407,"depth":179,"text":29408},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":28820,"description":29427},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":29433,"title":201,"body":29434,"category":188,"description":29968,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":29969,"navigation":194,"path":29970,"seo":29971,"stem":29972,"__hash__":29973},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":29435,"toc":29959},[29436,29440,29442,29454,29456,29470,29472,29474,29528,29530,29536,29538,29548,29664,29674,29676,29683,29754,29764,29922,29926,29930,29934,29940,29942,29956],[11,29437,29439],{"id":29438},"quickstart-svelte","Quickstart (Svelte)",[23,29441,26076],{"id":26075},[212,29443,29444],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,29445,29446],{"__ignoreMap":178},[220,29447,29448,29450,29452],{"class":222,"line":223},[220,29449,227],{"class":226},[220,29451,231],{"class":230},[220,29453,234],{"class":230},[23,29455,26727],{"id":26726},[212,29457,29458],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,29459,29460],{"__ignoreMap":178},[220,29461,29462,29464,29466,29468],{"class":222,"line":223},[220,29463,261],{"class":260},[220,29465,265],{"class":264},[220,29467,268],{"class":260},[220,29469,303],{"class":230},[23,29471,323],{"id":322},[15,29473,26746],{},[212,29475,29476],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,29477,29478,29492,29512,29520],{"__ignoreMap":178},[220,29479,29480,29482,29484,29486,29488,29490],{"class":222,"line":223},[220,29481,343],{"class":264},[220,29483,347],{"class":420},[220,29485,350],{"class":226},[220,29487,353],{"class":264},[220,29489,356],{"class":230},[220,29491,359],{"class":264},[220,29493,29494,29496,29498,29500,29502,29504,29506,29508,29510],{"class":222,"line":179},[220,29495,364],{"class":264},[220,29497,367],{"class":420},[220,29499,370],{"class":226},[220,29501,353],{"class":264},[220,29503,375],{"class":230},[220,29505,378],{"class":226},[220,29507,353],{"class":264},[220,29509,383],{"class":230},[220,29511,386],{"class":264},[220,29513,29514,29516,29518],{"class":222,"line":389},[220,29515,364],{"class":264},[220,29517,394],{"class":420},[220,29519,386],{"class":264},[220,29521,29522,29524,29526],{"class":222,"line":399},[220,29523,402],{"class":264},[220,29525,347],{"class":420},[220,29527,359],{"class":264},[19,29529],{":preset":578},[15,29531,29532,583,29534,26809],{},[99,29533,101],{},[99,29535,586],{},[23,29537,594],{"id":593},[15,29539,1839,29540,26816,29542,18602,29544,26822,29546,590],{},[99,29541,586],{},[99,29543,28349],{},[99,29545,1504],{},[99,29547,101],{},[212,29549,29551],{"className":2844,"code":29550,"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,29552,29553,29557,29571,29579,29587,29591,29595,29609,29617,29625,29629,29634,29648,29656],{"__ignoreMap":178},[220,29554,29555],{"class":222,"line":223},[220,29556,610],{"class":609},[220,29558,29559,29561,29563,29565,29567,29569],{"class":222,"line":179},[220,29560,343],{"class":264},[220,29562,347],{"class":420},[220,29564,350],{"class":226},[220,29566,353],{"class":264},[220,29568,623],{"class":230},[220,29570,359],{"class":264},[220,29572,29573,29575,29577],{"class":222,"line":389},[220,29574,364],{"class":264},[220,29576,367],{"class":420},[220,29578,386],{"class":264},[220,29580,29581,29583,29585],{"class":222,"line":399},[220,29582,402],{"class":264},[220,29584,347],{"class":420},[220,29586,359],{"class":264},[220,29588,29589],{"class":222,"line":644},[220,29590,647],{"emptyLinePlaceholder":194},[220,29592,29593],{"class":222,"line":650},[220,29594,653],{"class":609},[220,29596,29597,29599,29601,29603,29605,29607],{"class":222,"line":656},[220,29598,343],{"class":264},[220,29600,347],{"class":420},[220,29602,663],{"class":226},[220,29604,353],{"class":264},[220,29606,668],{"class":230},[220,29608,359],{"class":264},[220,29610,29611,29613,29615],{"class":222,"line":673},[220,29612,364],{"class":264},[220,29614,367],{"class":420},[220,29616,386],{"class":264},[220,29618,29619,29621,29623],{"class":222,"line":682},[220,29620,402],{"class":264},[220,29622,347],{"class":420},[220,29624,359],{"class":264},[220,29626,29627],{"class":222,"line":691},[220,29628,647],{"emptyLinePlaceholder":194},[220,29630,29631],{"class":222,"line":696},[220,29632,29633],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,29635,29636,29638,29640,29642,29644,29646],{"class":222,"line":702},[220,29637,343],{"class":264},[220,29639,347],{"class":420},[220,29641,350],{"class":226},[220,29643,353],{"class":264},[220,29645,713],{"class":230},[220,29647,359],{"class":264},[220,29649,29650,29652,29654],{"class":222,"line":718},[220,29651,364],{"class":264},[220,29653,367],{"class":420},[220,29655,386],{"class":264},[220,29657,29658,29660,29662],{"class":222,"line":727},[220,29659,402],{"class":264},[220,29661,347],{"class":420},[220,29663,359],{"class":264},[15,29665,26961,29666,18602,29668,26966,29670,26969,29672,26972],{},[99,29667,28349],{},[99,29669,1504],{},[99,29671,101],{},[99,29673,586],{},[23,29675,1153],{"id":1152},[15,29677,29678,29679,29682],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,29680,29681],{},"{expression}"," syntax:",[212,29684,29685],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,29686,29687,29701,29707,29715,29723,29734,29742,29746],{"__ignoreMap":178},[220,29688,29689,29691,29693,29695,29697,29699],{"class":222,"line":223},[220,29690,343],{"class":264},[220,29692,347],{"class":420},[220,29694,350],{"class":226},[220,29696,353],{"class":264},[220,29698,356],{"class":230},[220,29700,359],{"class":264},[220,29702,29703,29705],{"class":222,"line":179},[220,29704,364],{"class":264},[220,29706,1189],{"class":420},[220,29708,29709,29711,29713],{"class":222,"line":389},[220,29710,1194],{"class":226},[220,29712,353],{"class":264},[220,29714,1199],{"class":230},[220,29716,29717,29719,29721],{"class":222,"line":399},[220,29718,1204],{"class":226},[220,29720,353],{"class":264},[220,29722,1209],{"class":230},[220,29724,29725,29727,29730,29732],{"class":222,"line":644},[220,29726,1288],{"class":226},[220,29728,29729],{"class":264},"={",[220,29731,1295],{"class":420},[220,29733,749],{"class":264},[220,29735,29736,29738,29740],{"class":222,"line":650},[220,29737,1302],{"class":226},[220,29739,353],{"class":264},[220,29741,1229],{"class":230},[220,29743,29744],{"class":222,"line":656},[220,29745,1234],{"class":264},[220,29747,29748,29750,29752],{"class":222,"line":673},[220,29749,402],{"class":264},[220,29751,347],{"class":420},[220,29753,359],{"class":264},[15,29755,29756,29757,29760,29761,29763],{},"Props also accept reactive state — Svelte's ",[99,29758,29759],{},"$state"," rune (or ",[99,29762,16408],{}," in Svelte 4) works exactly as you'd expect:",[212,29765,29767],{"className":2844,"code":29766,"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,29768,29769,29777,29787,29791,29809,29817,29821,29835,29863,29871,29875],{"__ignoreMap":178},[220,29770,29771,29773,29775],{"class":222,"line":223},[220,29772,343],{"class":264},[220,29774,2590],{"class":346},[220,29776,359],{"class":264},[220,29778,29779,29781,29783,29785],{"class":222,"line":179},[220,29780,12812],{"class":260},[220,29782,27078],{"class":264},[220,29784,268],{"class":260},[220,29786,303],{"class":230},[220,29788,29789],{"class":222,"line":389},[220,29790,647],{"emptyLinePlaceholder":194},[220,29792,29793,29795,29797,29799,29801,29803,29805,29807],{"class":222,"line":399},[220,29794,2861],{"class":260},[220,29796,10927],{"class":264},[220,29798,353],{"class":260},[220,29800,2869],{"class":264},[220,29802,2872],{"class":226},[220,29804,2626],{"class":264},[220,29806,8524],{"class":420},[220,29808,2632],{"class":264},[220,29810,29811,29813,29815],{"class":222,"line":644},[220,29812,402],{"class":264},[220,29814,2590],{"class":346},[220,29816,359],{"class":264},[220,29818,29819],{"class":222,"line":650},[220,29820,647],{"emptyLinePlaceholder":194},[220,29822,29823,29825,29827,29829,29831,29833],{"class":222,"line":656},[220,29824,343],{"class":264},[220,29826,347],{"class":420},[220,29828,350],{"class":226},[220,29830,353],{"class":264},[220,29832,356],{"class":230},[220,29834,359],{"class":264},[220,29836,29837,29839,29841,29843,29845,29847,29849,29851,29853,29856,29858,29861],{"class":222,"line":673},[220,29838,364],{"class":264},[220,29840,367],{"class":420},[220,29842,370],{"class":226},[220,29844,353],{"class":264},[220,29846,27166],{"class":230},[220,29848,378],{"class":226},[220,29850,353],{"class":264},[220,29852,27173],{"class":230},[220,29854,29855],{"class":226}," {",[220,29857,10616],{"class":264},[220,29859,29860],{"class":226},"}",[220,29862,386],{"class":264},[220,29864,29865,29867,29869],{"class":222,"line":682},[220,29866,402],{"class":264},[220,29868,347],{"class":420},[220,29870,359],{"class":264},[220,29872,29873],{"class":222,"line":691},[220,29874,647],{"emptyLinePlaceholder":194},[220,29876,29877,29879,29882,29884,29886,29889,29892,29894,29896,29898,29900,29903,29905,29907,29909,29911,29914,29916,29919],{"class":222,"line":696},[220,29878,343],{"class":264},[220,29880,29881],{"class":346},"input",[220,29883,12800],{"class":226},[220,29885,353],{"class":264},[220,29887,29888],{"class":230},"\"range\"",[220,29890,29891],{"class":226}," min",[220,29893,353],{"class":264},[220,29895,11541],{"class":230},[220,29897,8524],{"class":420},[220,29899,11541],{"class":230},[220,29901,29902],{"class":226}," max",[220,29904,353],{"class":264},[220,29906,11541],{"class":230},[220,29908,27234],{"class":420},[220,29910,11541],{"class":230},[220,29912,29913],{"class":260}," bind",[220,29915,1554],{"class":264},[220,29917,29918],{"class":226},"value",[220,29920,29921],{"class":264},"={angle} \u002F>\n",[15,29923,26619,29924,27289],{},[99,29925,10616],{},[15,29927,26626,29928,26629],{},[56,29929,1160],{"href":1159},[23,29931,29933],{"id":29932},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,29935,27300,29936,27305],{},[56,29937,29939],{"href":29938},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,29941,1474],{"id":1473},[34,29943,29944,29948,29952],{},[37,29945,29946,1483],{},[56,29947,1482],{"href":1481},[37,29949,29950,1490],{},[56,29951,1489],{"href":1488},[37,29953,29954,1502],{},[56,29955,1160],{"href":1159},[1504,29957,29958],{},"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":29960},[29961,29962,29963,29964,29965,29966,29967],{"id":26075,"depth":179,"text":26076},{"id":26726,"depth":179,"text":26727},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":29932,"depth":179,"text":29933},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":29968},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":29975,"title":29939,"body":29976,"category":2240,"description":30558,"exclude":190,"extension":191,"forceFramework":190,"icon":28232,"meta":30559,"navigation":194,"path":29938,"seo":30560,"stem":30561,"__hash__":30562},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":29977,"toc":30550},[29978,29982,29985,29989,29995,29998,30063,30066,30072,30077,30209,30216,30222,30345,30348,30352,30355,30547],[11,29979,29981],{"id":29980},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,29983,29984],{},"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,29986,29988],{"id":29987},"the-default-behavior","The default behavior",[15,29990,29991,29992,29994],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,29993,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,29996,29997],{},"In many cases, you don't need any special handling:",[212,29999,30001],{"className":2844,"code":30000,"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,30002,30003,30011,30021,30029,30033,30047,30055],{"__ignoreMap":178},[220,30004,30005,30007,30009],{"class":222,"line":223},[220,30006,343],{"class":264},[220,30008,2590],{"class":346},[220,30010,359],{"class":264},[220,30012,30013,30015,30017,30019],{"class":222,"line":179},[220,30014,12812],{"class":260},[220,30016,27078],{"class":264},[220,30018,268],{"class":260},[220,30020,303],{"class":230},[220,30022,30023,30025,30027],{"class":222,"line":389},[220,30024,402],{"class":264},[220,30026,2590],{"class":346},[220,30028,359],{"class":264},[220,30030,30031],{"class":222,"line":399},[220,30032,647],{"emptyLinePlaceholder":194},[220,30034,30035,30037,30039,30041,30043,30045],{"class":222,"line":644},[220,30036,343],{"class":264},[220,30038,347],{"class":420},[220,30040,350],{"class":226},[220,30042,353],{"class":264},[220,30044,356],{"class":230},[220,30046,359],{"class":264},[220,30048,30049,30051,30053],{"class":222,"line":650},[220,30050,364],{"class":264},[220,30052,367],{"class":420},[220,30054,386],{"class":264},[220,30056,30057,30059,30061],{"class":222,"line":656},[220,30058,402],{"class":264},[220,30060,347],{"class":420},[220,30062,359],{"class":264},[15,30064,30065],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,30067,30069,30071],{"id":30068},"onmount-for-browser-only-code",[99,30070,29220],{}," for browser-only code",[15,30073,30074,30075,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,30076,29220],{},[212,30078,30080],{"className":2844,"code":30079,"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,30081,30082,30090,30102,30112,30116,30123,30127,30137,30142,30153,30157,30165,30169,30193,30201],{"__ignoreMap":178},[220,30083,30084,30086,30088],{"class":222,"line":223},[220,30085,343],{"class":264},[220,30087,2590],{"class":346},[220,30089,359],{"class":264},[220,30091,30092,30094,30097,30099],{"class":222,"line":179},[220,30093,12812],{"class":260},[220,30095,30096],{"class":264}," { onMount } ",[220,30098,268],{"class":260},[220,30100,30101],{"class":230}," 'svelte'\n",[220,30103,30104,30106,30108,30110],{"class":222,"line":389},[220,30105,12812],{"class":260},[220,30107,27078],{"class":264},[220,30109,268],{"class":260},[220,30111,303],{"class":230},[220,30113,30114],{"class":222,"line":399},[220,30115,647],{"emptyLinePlaceholder":194},[220,30117,30118,30120],{"class":222,"line":644},[220,30119,2861],{"class":260},[220,30121,30122],{"class":264}," shaderEl\n",[220,30124,30125],{"class":222,"line":650},[220,30126,647],{"emptyLinePlaceholder":194},[220,30128,30129,30131,30133,30135],{"class":222,"line":656},[220,30130,3821],{"class":226},[220,30132,3537],{"class":264},[220,30134,2762],{"class":260},[220,30136,3433],{"class":264},[220,30138,30139],{"class":222,"line":673},[220,30140,30141],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,30143,30144,30147,30150],{"class":222,"line":682},[220,30145,30146],{"class":264}," console.",[220,30148,30149],{"class":226},"log",[220,30151,30152],{"class":264},"(shaderEl)\n",[220,30154,30155],{"class":222,"line":691},[220,30156,12859],{"class":264},[220,30158,30159,30161,30163],{"class":222,"line":696},[220,30160,402],{"class":264},[220,30162,2590],{"class":346},[220,30164,359],{"class":264},[220,30166,30167],{"class":222,"line":702},[220,30168,647],{"emptyLinePlaceholder":194},[220,30170,30171,30173,30175,30177,30179,30182,30185,30187,30189,30191],{"class":222,"line":718},[220,30172,343],{"class":264},[220,30174,347],{"class":420},[220,30176,29913],{"class":260},[220,30178,1554],{"class":264},[220,30180,30181],{"class":420},"this",[220,30183,30184],{"class":264},"={shaderEl} ",[220,30186,28349],{"class":226},[220,30188,353],{"class":264},[220,30190,356],{"class":230},[220,30192,359],{"class":264},[220,30194,30195,30197,30199],{"class":222,"line":727},[220,30196,364],{"class":264},[220,30198,367],{"class":420},[220,30200,386],{"class":264},[220,30202,30203,30205,30207],{"class":222,"line":2664},[220,30204,402],{"class":264},[220,30206,347],{"class":420},[220,30208,359],{"class":264},[23,30210,30212,30213],{"id":30211},"conditional-rendering-with-browser","Conditional rendering with ",[99,30214,30215],{},"browser",[15,30217,30218,30219,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,30220,30221],{},"$app\u002Fenvironment",[212,30223,30225],{"className":2844,"code":30224,"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,30226,30227,30235,30247,30257,30265,30269,30278,30292,30300,30308,30316,30321,30336],{"__ignoreMap":178},[220,30228,30229,30231,30233],{"class":222,"line":223},[220,30230,343],{"class":264},[220,30232,2590],{"class":346},[220,30234,359],{"class":264},[220,30236,30237,30239,30242,30244],{"class":222,"line":179},[220,30238,12812],{"class":260},[220,30240,30241],{"class":264}," { browser } ",[220,30243,268],{"class":260},[220,30245,30246],{"class":230}," '$app\u002Fenvironment'\n",[220,30248,30249,30251,30253,30255],{"class":222,"line":389},[220,30250,12812],{"class":260},[220,30252,27078],{"class":264},[220,30254,268],{"class":260},[220,30256,303],{"class":230},[220,30258,30259,30261,30263],{"class":222,"line":399},[220,30260,402],{"class":264},[220,30262,2590],{"class":346},[220,30264,359],{"class":264},[220,30266,30267],{"class":222,"line":644},[220,30268,647],{"emptyLinePlaceholder":194},[220,30270,30271,30273,30275],{"class":222,"line":650},[220,30272,3688],{"class":264},[220,30274,3691],{"class":260},[220,30276,30277],{"class":264}," browser}\n",[220,30279,30280,30282,30284,30286,30288,30290],{"class":222,"line":656},[220,30281,364],{"class":264},[220,30283,347],{"class":420},[220,30285,350],{"class":226},[220,30287,353],{"class":264},[220,30289,356],{"class":230},[220,30291,359],{"class":264},[220,30293,30294,30296,30298],{"class":222,"line":673},[220,30295,2550],{"class":264},[220,30297,367],{"class":420},[220,30299,386],{"class":264},[220,30301,30302,30304,30306],{"class":222,"line":682},[220,30303,2567],{"class":264},[220,30305,347],{"class":420},[220,30307,359],{"class":264},[220,30309,30310,30312,30314],{"class":222,"line":691},[220,30311,3721],{"class":264},[220,30313,3724],{"class":260},[220,30315,749],{"class":264},[220,30317,30318],{"class":222,"line":696},[220,30319,30320],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,30322,30323,30325,30327,30329,30331,30334],{"class":222,"line":702},[220,30324,364],{"class":264},[220,30326,3334],{"class":346},[220,30328,350],{"class":226},[220,30330,353],{"class":264},[220,30332,30333],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,30335,386],{"class":264},[220,30337,30338,30341,30343],{"class":222,"line":718},[220,30339,30340],{"class":264},"{\u002F",[220,30342,3691],{"class":260},[220,30344,749],{"class":264},[15,30346,30347],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,30349,30351],{"id":30350},"lazy-loading","Lazy loading",[15,30353,30354],{},"To defer loading the Shaders bundle entirely until client-side:",[212,30356,30358],{"className":2844,"code":30357,"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,30359,30360,30368,30378,30382,30389,30396,30400,30414,30443,30453,30463,30467,30475,30479,30488,30512,30527,30539],{"__ignoreMap":178},[220,30361,30362,30364,30366],{"class":222,"line":223},[220,30363,343],{"class":264},[220,30365,2590],{"class":346},[220,30367,359],{"class":264},[220,30369,30370,30372,30374,30376],{"class":222,"line":179},[220,30371,12812],{"class":260},[220,30373,30096],{"class":264},[220,30375,268],{"class":260},[220,30377,30101],{"class":230},[220,30379,30380],{"class":222,"line":389},[220,30381,647],{"emptyLinePlaceholder":194},[220,30383,30384,30386],{"class":222,"line":399},[220,30385,2861],{"class":260},[220,30387,30388],{"class":264}," ShaderComponent\n",[220,30390,30391,30393],{"class":222,"line":644},[220,30392,2861],{"class":260},[220,30394,30395],{"class":264}," LinearGradientComponent\n",[220,30397,30398],{"class":222,"line":650},[220,30399,647],{"emptyLinePlaceholder":194},[220,30401,30402,30404,30406,30408,30410,30412],{"class":222,"line":656},[220,30403,3821],{"class":226},[220,30405,2626],{"class":264},[220,30407,3425],{"class":260},[220,30409,3428],{"class":264},[220,30411,2762],{"class":260},[220,30413,3433],{"class":264},[220,30415,30416,30418,30421,30423,30425,30427,30430,30432,30434,30436,30438,30441],{"class":222,"line":673},[220,30417,16700],{"class":260},[220,30419,30420],{"class":264}," { ",[220,30422,347],{"class":420},[220,30424,1895],{"class":264},[220,30426,367],{"class":420},[220,30428,30429],{"class":264}," } ",[220,30431,353],{"class":260},[220,30433,1744],{"class":260},[220,30435,27633],{"class":260},[220,30437,2626],{"class":264},[220,30439,30440],{"class":230},"'shaders\u002Fsvelte'",[220,30442,2632],{"class":264},[220,30444,30445,30448,30450],{"class":222,"line":682},[220,30446,30447],{"class":264}," ShaderComponent ",[220,30449,353],{"class":260},[220,30451,30452],{"class":264}," Shader\n",[220,30454,30455,30458,30460],{"class":222,"line":691},[220,30456,30457],{"class":264}," LinearGradientComponent ",[220,30459,353],{"class":260},[220,30461,30462],{"class":264}," LinearGradient\n",[220,30464,30465],{"class":222,"line":696},[220,30466,12859],{"class":264},[220,30468,30469,30471,30473],{"class":222,"line":702},[220,30470,402],{"class":264},[220,30472,2590],{"class":346},[220,30474,359],{"class":264},[220,30476,30477],{"class":222,"line":718},[220,30478,647],{"emptyLinePlaceholder":194},[220,30480,30481,30483,30485],{"class":222,"line":727},[220,30482,3688],{"class":264},[220,30484,3691],{"class":260},[220,30486,30487],{"class":264}," ShaderComponent}\n",[220,30489,30490,30492,30494,30496,30499,30501,30504,30506,30508,30510],{"class":222,"line":2664},[220,30491,364],{"class":264},[220,30493,2846],{"class":260},[220,30495,1554],{"class":264},[220,30497,30498],{"class":346},"component",[220,30500,5194],{"class":226},[220,30502,30503],{"class":264},"={ShaderComponent} ",[220,30505,28349],{"class":226},[220,30507,353],{"class":264},[220,30509,356],{"class":230},[220,30511,359],{"class":264},[220,30513,30514,30516,30518,30520,30522,30524],{"class":222,"line":3459},[220,30515,2550],{"class":264},[220,30517,2846],{"class":260},[220,30519,1554],{"class":264},[220,30521,30498],{"class":346},[220,30523,5194],{"class":226},[220,30525,30526],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,30528,30529,30531,30533,30535,30537],{"class":222,"line":9514},[220,30530,2567],{"class":264},[220,30532,2846],{"class":260},[220,30534,1554],{"class":264},[220,30536,30498],{"class":346},[220,30538,359],{"class":264},[220,30540,30541,30543,30545],{"class":222,"line":9525},[220,30542,30340],{"class":264},[220,30544,3691],{"class":260},[220,30546,749],{"class":264},[1504,30548,30549],{},"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":30551},[30552,30553,30555,30557],{"id":29987,"depth":179,"text":29988},{"id":30068,"depth":179,"text":30554},"onMount for browser-only code",{"id":30211,"depth":179,"text":30556},"Conditional rendering with browser",{"id":30350,"depth":179,"text":30351},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":29939,"description":30558},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":30564,"title":201,"body":30565,"category":188,"description":31079,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":31080,"navigation":194,"path":31081,"seo":31082,"stem":31083,"__hash__":31084},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":30566,"toc":31070},[30567,30571,30573,30585,30587,30601,30603,30605,30659,30661,30667,30669,30676,30790,30797,30799,30805,30874,30877,31047,31051,31055,31059,31065,31067],[11,30568,30570],{"id":30569},"quickstart-vue","Quickstart (Vue)",[23,30572,26076],{"id":26075},[212,30574,30575],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,30576,30577],{"__ignoreMap":178},[220,30578,30579,30581,30583],{"class":222,"line":223},[220,30580,227],{"class":226},[220,30582,231],{"class":230},[220,30584,234],{"class":230},[23,30586,26727],{"id":26726},[212,30588,30589],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,30590,30591],{"__ignoreMap":178},[220,30592,30593,30595,30597,30599],{"class":222,"line":223},[220,30594,261],{"class":260},[220,30596,265],{"class":264},[220,30598,268],{"class":260},[220,30600,271],{"class":230},[23,30602,323],{"id":322},[15,30604,26746],{},[212,30606,30607],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,30608,30609,30623,30643,30651],{"__ignoreMap":178},[220,30610,30611,30613,30615,30617,30619,30621],{"class":222,"line":223},[220,30612,343],{"class":264},[220,30614,347],{"class":346},[220,30616,350],{"class":226},[220,30618,353],{"class":264},[220,30620,356],{"class":230},[220,30622,359],{"class":264},[220,30624,30625,30627,30629,30631,30633,30635,30637,30639,30641],{"class":222,"line":179},[220,30626,364],{"class":264},[220,30628,367],{"class":346},[220,30630,370],{"class":226},[220,30632,353],{"class":264},[220,30634,375],{"class":230},[220,30636,378],{"class":226},[220,30638,353],{"class":264},[220,30640,383],{"class":230},[220,30642,386],{"class":264},[220,30644,30645,30647,30649],{"class":222,"line":389},[220,30646,364],{"class":264},[220,30648,394],{"class":346},[220,30650,386],{"class":264},[220,30652,30653,30655,30657],{"class":222,"line":399},[220,30654,402],{"class":264},[220,30656,347],{"class":346},[220,30658,359],{"class":264},[19,30660],{":preset":578},[15,30662,30663,583,30665,26809],{},[99,30664,101],{},[99,30666,586],{},[23,30668,594],{"id":593},[15,30670,1839,30671,30673,30674,590],{},[99,30672,586],{}," has no intrinsic size. The class or style you apply to ",[99,30675,101],{},[212,30677,30678],{"className":334,"code":29550,"language":336,"meta":178,"style":178},[99,30679,30680,30684,30698,30706,30714,30718,30722,30736,30744,30752,30756,30760,30774,30782],{"__ignoreMap":178},[220,30681,30682],{"class":222,"line":223},[220,30683,610],{"class":609},[220,30685,30686,30688,30690,30692,30694,30696],{"class":222,"line":179},[220,30687,343],{"class":264},[220,30689,347],{"class":346},[220,30691,350],{"class":226},[220,30693,353],{"class":264},[220,30695,623],{"class":230},[220,30697,359],{"class":264},[220,30699,30700,30702,30704],{"class":222,"line":389},[220,30701,364],{"class":264},[220,30703,367],{"class":346},[220,30705,386],{"class":264},[220,30707,30708,30710,30712],{"class":222,"line":399},[220,30709,402],{"class":264},[220,30711,347],{"class":346},[220,30713,359],{"class":264},[220,30715,30716],{"class":222,"line":644},[220,30717,647],{"emptyLinePlaceholder":194},[220,30719,30720],{"class":222,"line":650},[220,30721,653],{"class":609},[220,30723,30724,30726,30728,30730,30732,30734],{"class":222,"line":656},[220,30725,343],{"class":264},[220,30727,347],{"class":346},[220,30729,663],{"class":226},[220,30731,353],{"class":264},[220,30733,668],{"class":230},[220,30735,359],{"class":264},[220,30737,30738,30740,30742],{"class":222,"line":673},[220,30739,364],{"class":264},[220,30741,367],{"class":346},[220,30743,386],{"class":264},[220,30745,30746,30748,30750],{"class":222,"line":682},[220,30747,402],{"class":264},[220,30749,347],{"class":346},[220,30751,359],{"class":264},[220,30753,30754],{"class":222,"line":691},[220,30755,647],{"emptyLinePlaceholder":194},[220,30757,30758],{"class":222,"line":696},[220,30759,29633],{"class":609},[220,30761,30762,30764,30766,30768,30770,30772],{"class":222,"line":702},[220,30763,343],{"class":264},[220,30765,347],{"class":346},[220,30767,350],{"class":226},[220,30769,353],{"class":264},[220,30771,713],{"class":230},[220,30773,359],{"class":264},[220,30775,30776,30778,30780],{"class":222,"line":718},[220,30777,364],{"class":264},[220,30779,367],{"class":346},[220,30781,386],{"class":264},[220,30783,30784,30786,30788],{"class":222,"line":727},[220,30785,402],{"class":264},[220,30787,347],{"class":346},[220,30789,359],{"class":264},[15,30791,30792,30793,26969,30795,26972],{},"Applying a class or style to the ",[99,30794,101],{},[99,30796,586],{},[23,30798,1153],{"id":1152},[15,30800,30801,30802,30804],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,30803,1554],{}," binding syntax, strings can be passed plain:",[212,30806,30808],{"className":334,"code":30807,"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,30809,30810,30824,30830,30838,30846,30854,30862,30866],{"__ignoreMap":178},[220,30811,30812,30814,30816,30818,30820,30822],{"class":222,"line":223},[220,30813,343],{"class":264},[220,30815,347],{"class":346},[220,30817,350],{"class":226},[220,30819,353],{"class":264},[220,30821,356],{"class":230},[220,30823,359],{"class":264},[220,30825,30826,30828],{"class":222,"line":179},[220,30827,364],{"class":264},[220,30829,1189],{"class":346},[220,30831,30832,30834,30836],{"class":222,"line":389},[220,30833,19326],{"class":226},[220,30835,353],{"class":264},[220,30837,1199],{"class":230},[220,30839,30840,30842,30844],{"class":222,"line":399},[220,30841,19336],{"class":226},[220,30843,353],{"class":264},[220,30845,1209],{"class":230},[220,30847,30848,30850,30852],{"class":222,"line":644},[220,30849,1214],{"class":226},[220,30851,353],{"class":264},[220,30853,1219],{"class":230},[220,30855,30856,30858,30860],{"class":222,"line":650},[220,30857,1224],{"class":226},[220,30859,353],{"class":264},[220,30861,1229],{"class":230},[220,30863,30864],{"class":222,"line":656},[220,30865,1234],{"class":264},[220,30867,30868,30870,30872],{"class":222,"line":673},[220,30869,402],{"class":264},[220,30871,347],{"class":346},[220,30873,359],{"class":264},[15,30875,30876],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,30878,30880],{"className":11521,"code":30879,"language":11523,"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,30881,30882,30892,30902,30912,30916,30932,30940,30944,30952,30966,30992,31000,31004,31039],{"__ignoreMap":178},[220,30883,30884,30886,30888,30890],{"class":222,"line":223},[220,30885,343],{"class":264},[220,30887,2590],{"class":346},[220,30889,2593],{"class":226},[220,30891,359],{"class":264},[220,30893,30894,30896,30898,30900],{"class":222,"line":179},[220,30895,261],{"class":260},[220,30897,2602],{"class":264},[220,30899,268],{"class":260},[220,30901,2607],{"class":230},[220,30903,30904,30906,30908,30910],{"class":222,"line":389},[220,30905,261],{"class":260},[220,30907,27078],{"class":264},[220,30909,268],{"class":260},[220,30911,271],{"class":230},[220,30913,30914],{"class":222,"line":399},[220,30915,647],{"emptyLinePlaceholder":194},[220,30917,30918,30920,30922,30924,30926,30928,30930],{"class":222,"line":644},[220,30919,1735],{"class":260},[220,30921,10384],{"class":420},[220,30923,1741],{"class":260},[220,30925,2623],{"class":226},[220,30927,2626],{"class":264},[220,30929,8524],{"class":420},[220,30931,2632],{"class":264},[220,30933,30934,30936,30938],{"class":222,"line":650},[220,30935,402],{"class":264},[220,30937,2590],{"class":346},[220,30939,359],{"class":264},[220,30941,30942],{"class":222,"line":656},[220,30943,647],{"emptyLinePlaceholder":194},[220,30945,30946,30948,30950],{"class":222,"line":673},[220,30947,343],{"class":264},[220,30949,2519],{"class":346},[220,30951,359],{"class":264},[220,30953,30954,30956,30958,30960,30962,30964],{"class":222,"line":682},[220,30955,364],{"class":264},[220,30957,347],{"class":346},[220,30959,350],{"class":226},[220,30961,353],{"class":264},[220,30963,356],{"class":230},[220,30965,359],{"class":264},[220,30967,30968,30970,30972,30974,30976,30978,30980,30982,30984,30986,30988,30990],{"class":222,"line":691},[220,30969,2550],{"class":264},[220,30971,367],{"class":346},[220,30973,20193],{"class":226},[220,30975,353],{"class":264},[220,30977,27166],{"class":230},[220,30979,20200],{"class":226},[220,30981,353],{"class":264},[220,30983,27173],{"class":230},[220,30985,10540],{"class":226},[220,30987,353],{"class":264},[220,30989,10545],{"class":230},[220,30991,386],{"class":264},[220,30993,30994,30996,30998],{"class":222,"line":696},[220,30995,2567],{"class":264},[220,30997,347],{"class":346},[220,30999,359],{"class":264},[220,31001,31002],{"class":222,"line":702},[220,31003,647],{"emptyLinePlaceholder":194},[220,31005,31006,31008,31010,31012,31014,31016,31018,31020,31023,31025,31027,31030,31033,31035,31037],{"class":222,"line":718},[220,31007,364],{"class":264},[220,31009,29881],{"class":346},[220,31011,12800],{"class":226},[220,31013,353],{"class":264},[220,31015,29888],{"class":230},[220,31017,29891],{"class":226},[220,31019,353],{"class":264},[220,31021,31022],{"class":230},"\"0\"",[220,31024,29902],{"class":226},[220,31026,353],{"class":264},[220,31028,31029],{"class":230},"\"360\"",[220,31031,31032],{"class":226}," v-model.number",[220,31034,353],{"class":264},[220,31036,10545],{"class":230},[220,31038,386],{"class":264},[220,31040,31041,31043,31045],{"class":222,"line":727},[220,31042,402],{"class":264},[220,31044,2519],{"class":346},[220,31046,359],{"class":264},[15,31048,26619,31049,27289],{},[99,31050,10616],{},[15,31052,26626,31053,26629],{},[56,31054,1160],{"href":1159},[23,31056,31058],{"id":31057},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,31060,27300,31061,27305],{},[56,31062,31064],{"href":31063},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,31066,1474],{"id":1473},[1504,31068,31069],{},"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":31071},[31072,31073,31074,31075,31076,31077,31078],{"id":26075,"depth":179,"text":26076},{"id":26726,"depth":179,"text":26727},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":31057,"depth":179,"text":31058},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":31079},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":31086,"title":31064,"body":31087,"category":2240,"description":31753,"exclude":190,"extension":191,"forceFramework":190,"icon":28232,"meta":31754,"navigation":194,"path":31063,"seo":31755,"stem":31756,"__hash__":31757},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":31088,"toc":31746},[31089,31093,31096,31103,31109,31161,31164,31167,31260,31264,31271,31421,31425,31428,31628,31635,31723,31729,31733,31743],[11,31090,31092],{"id":31091},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,31094,31095],{},"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,31097,31099,31100],{"id":31098},"nuxt-clientonly","Nuxt: ",[99,31101,31102],{},"\u003CClientOnly>",[15,31104,31105,31106,31108],{},"Nuxt provides a built-in ",[99,31107,31102],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,31110,31112],{"className":334,"code":31111,"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,31113,31114,31123,31137,31145,31153],{"__ignoreMap":178},[220,31115,31116,31118,31121],{"class":222,"line":223},[220,31117,343],{"class":264},[220,31119,31120],{"class":346},"ClientOnly",[220,31122,359],{"class":264},[220,31124,31125,31127,31129,31131,31133,31135],{"class":222,"line":179},[220,31126,364],{"class":264},[220,31128,347],{"class":346},[220,31130,350],{"class":226},[220,31132,353],{"class":264},[220,31134,356],{"class":230},[220,31136,359],{"class":264},[220,31138,31139,31141,31143],{"class":222,"line":389},[220,31140,2550],{"class":264},[220,31142,367],{"class":346},[220,31144,386],{"class":264},[220,31146,31147,31149,31151],{"class":222,"line":399},[220,31148,2567],{"class":264},[220,31150,347],{"class":346},[220,31152,359],{"class":264},[220,31154,31155,31157,31159],{"class":222,"line":644},[220,31156,402],{"class":264},[220,31158,31120],{"class":346},[220,31160,359],{"class":264},[15,31162,31163],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,31165,31166],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,31168,31170],{"className":334,"code":31169,"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,31171,31172,31180,31194,31202,31210,31214,31227,31244,31252],{"__ignoreMap":178},[220,31173,31174,31176,31178],{"class":222,"line":223},[220,31175,343],{"class":264},[220,31177,31120],{"class":346},[220,31179,359],{"class":264},[220,31181,31182,31184,31186,31188,31190,31192],{"class":222,"line":179},[220,31183,364],{"class":264},[220,31185,347],{"class":346},[220,31187,350],{"class":226},[220,31189,353],{"class":264},[220,31191,356],{"class":230},[220,31193,359],{"class":264},[220,31195,31196,31198,31200],{"class":222,"line":389},[220,31197,2550],{"class":264},[220,31199,367],{"class":346},[220,31201,386],{"class":264},[220,31203,31204,31206,31208],{"class":222,"line":399},[220,31205,2567],{"class":264},[220,31207,347],{"class":346},[220,31209,359],{"class":264},[220,31211,31212],{"class":222,"line":644},[220,31213,647],{"emptyLinePlaceholder":194},[220,31215,31216,31218,31220,31223,31225],{"class":222,"line":650},[220,31217,364],{"class":264},[220,31219,2519],{"class":346},[220,31221,31222],{"class":264}," #",[220,31224,3873],{"class":226},[220,31226,359],{"class":264},[220,31228,31229,31231,31233,31235,31237,31240,31242],{"class":222,"line":656},[220,31230,2550],{"class":264},[220,31232,3334],{"class":346},[220,31234,350],{"class":226},[220,31236,353],{"class":264},[220,31238,31239],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,31241,3348],{"class":3347},[220,31243,359],{"class":264},[220,31245,31246,31248,31250],{"class":222,"line":673},[220,31247,2567],{"class":264},[220,31249,2519],{"class":346},[220,31251,359],{"class":264},[220,31253,31254,31256,31258],{"class":222,"line":682},[220,31255,402],{"class":264},[220,31257,31120],{"class":346},[220,31259,359],{"class":264},[23,31261,31263],{"id":31262},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,31265,31266,31267,31270],{},"If you're using Vue SSR without Nuxt, use ",[99,31268,31269],{},"v-if"," with a mounted flag:",[212,31272,31274],{"className":11521,"code":31273,"language":11523,"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,31275,31276,31286,31296,31300,31317,31334,31342,31346,31354,31368,31389,31397,31405,31413],{"__ignoreMap":178},[220,31277,31278,31280,31282,31284],{"class":222,"line":223},[220,31279,343],{"class":264},[220,31281,2590],{"class":346},[220,31283,2593],{"class":226},[220,31285,359],{"class":264},[220,31287,31288,31290,31292,31294],{"class":222,"line":179},[220,31289,261],{"class":260},[220,31291,3379],{"class":264},[220,31293,268],{"class":260},[220,31295,2607],{"class":230},[220,31297,31298],{"class":222,"line":389},[220,31299,647],{"emptyLinePlaceholder":194},[220,31301,31302,31304,31307,31309,31311,31313,31315],{"class":222,"line":399},[220,31303,1735],{"class":260},[220,31305,31306],{"class":420}," isMounted",[220,31308,1741],{"class":260},[220,31310,2623],{"class":226},[220,31312,2626],{"class":264},[220,31314,2629],{"class":420},[220,31316,2632],{"class":264},[220,31318,31319,31321,31323,31325,31328,31330,31332],{"class":222,"line":644},[220,31320,3420],{"class":226},[220,31322,3537],{"class":264},[220,31324,2762],{"class":260},[220,31326,31327],{"class":264}," { isMounted.value ",[220,31329,353],{"class":260},[220,31331,2911],{"class":420},[220,31333,11470],{"class":264},[220,31335,31336,31338,31340],{"class":222,"line":650},[220,31337,402],{"class":264},[220,31339,2590],{"class":346},[220,31341,359],{"class":264},[220,31343,31344],{"class":222,"line":656},[220,31345,647],{"emptyLinePlaceholder":194},[220,31347,31348,31350,31352],{"class":222,"line":673},[220,31349,343],{"class":264},[220,31351,2519],{"class":346},[220,31353,359],{"class":264},[220,31355,31356,31358,31360,31362,31364,31366],{"class":222,"line":682},[220,31357,364],{"class":264},[220,31359,3334],{"class":346},[220,31361,350],{"class":226},[220,31363,353],{"class":264},[220,31365,356],{"class":230},[220,31367,359],{"class":264},[220,31369,31370,31372,31374,31376,31378,31381,31383,31385,31387],{"class":222,"line":691},[220,31371,2550],{"class":264},[220,31373,347],{"class":346},[220,31375,3298],{"class":226},[220,31377,353],{"class":264},[220,31379,31380],{"class":230},"\"isMounted\"",[220,31382,350],{"class":226},[220,31384,353],{"class":264},[220,31386,356],{"class":230},[220,31388,359],{"class":264},[220,31390,31391,31393,31395],{"class":222,"line":696},[220,31392,2813],{"class":264},[220,31394,367],{"class":346},[220,31396,386],{"class":264},[220,31398,31399,31401,31403],{"class":222,"line":702},[220,31400,2828],{"class":264},[220,31402,347],{"class":346},[220,31404,359],{"class":264},[220,31406,31407,31409,31411],{"class":222,"line":718},[220,31408,2567],{"class":264},[220,31410,3334],{"class":346},[220,31412,359],{"class":264},[220,31414,31415,31417,31419],{"class":222,"line":727},[220,31416,402],{"class":264},[220,31418,2519],{"class":346},[220,31420,359],{"class":264},[23,31422,31424],{"id":31423},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,31426,31427],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,31429,31431],{"className":11521,"code":31430,"language":11523,"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,31432,31433,31443,31454,31458,31474,31490,31494,31499,31536,31570,31578,31582,31590,31604,31612,31620],{"__ignoreMap":178},[220,31434,31435,31437,31439,31441],{"class":222,"line":223},[220,31436,343],{"class":264},[220,31438,2590],{"class":346},[220,31440,2593],{"class":226},[220,31442,359],{"class":264},[220,31444,31445,31447,31450,31452],{"class":222,"line":179},[220,31446,261],{"class":260},[220,31448,31449],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,31451,268],{"class":260},[220,31453,2607],{"class":230},[220,31455,31456],{"class":222,"line":389},[220,31457,647],{"emptyLinePlaceholder":194},[220,31459,31460,31462,31464,31466,31468,31470,31472],{"class":222,"line":399},[220,31461,1735],{"class":260},[220,31463,31306],{"class":420},[220,31465,1741],{"class":260},[220,31467,2623],{"class":226},[220,31469,2626],{"class":264},[220,31471,2629],{"class":420},[220,31473,2632],{"class":264},[220,31475,31476,31478,31480,31482,31484,31486,31488],{"class":222,"line":644},[220,31477,3420],{"class":226},[220,31479,3537],{"class":264},[220,31481,2762],{"class":260},[220,31483,31327],{"class":264},[220,31485,353],{"class":260},[220,31487,2911],{"class":420},[220,31489,11470],{"class":264},[220,31491,31492],{"class":222,"line":650},[220,31493,647],{"emptyLinePlaceholder":194},[220,31495,31496],{"class":222,"line":656},[220,31497,31498],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,31500,31501,31503,31506,31508,31511,31513,31515,31517,31519,31522,31524,31526,31528,31531,31533],{"class":222,"line":673},[220,31502,1735],{"class":260},[220,31504,31505],{"class":420}," Shader",[220,31507,1741],{"class":260},[220,31509,31510],{"class":226}," defineAsyncComponent",[220,31512,3537],{"class":264},[220,31514,2762],{"class":260},[220,31516,27633],{"class":260},[220,31518,2626],{"class":264},[220,31520,31521],{"class":230},"'shaders\u002Fvue'",[220,31523,15294],{"class":264},[220,31525,3552],{"class":226},[220,31527,2626],{"class":264},[220,31529,31530],{"class":3558},"m",[220,31532,10682],{"class":260},[220,31534,31535],{"class":264}," m.Shader))\n",[220,31537,31538,31540,31543,31545,31547,31549,31551,31553,31555,31557,31559,31561,31563,31565,31567],{"class":222,"line":682},[220,31539,1735],{"class":260},[220,31541,31542],{"class":420}," LinearGradient",[220,31544,1741],{"class":260},[220,31546,31510],{"class":226},[220,31548,3537],{"class":264},[220,31550,2762],{"class":260},[220,31552,27633],{"class":260},[220,31554,2626],{"class":264},[220,31556,31521],{"class":230},[220,31558,15294],{"class":264},[220,31560,3552],{"class":226},[220,31562,2626],{"class":264},[220,31564,31530],{"class":3558},[220,31566,10682],{"class":260},[220,31568,31569],{"class":264}," m.LinearGradient))\n",[220,31571,31572,31574,31576],{"class":222,"line":691},[220,31573,402],{"class":264},[220,31575,2590],{"class":346},[220,31577,359],{"class":264},[220,31579,31580],{"class":222,"line":696},[220,31581,647],{"emptyLinePlaceholder":194},[220,31583,31584,31586,31588],{"class":222,"line":702},[220,31585,343],{"class":264},[220,31587,2519],{"class":346},[220,31589,359],{"class":264},[220,31591,31592,31594,31596,31598,31600,31602],{"class":222,"line":718},[220,31593,364],{"class":264},[220,31595,347],{"class":346},[220,31597,3298],{"class":226},[220,31599,353],{"class":264},[220,31601,31380],{"class":230},[220,31603,359],{"class":264},[220,31605,31606,31608,31610],{"class":222,"line":727},[220,31607,2550],{"class":264},[220,31609,367],{"class":346},[220,31611,386],{"class":264},[220,31613,31614,31616,31618],{"class":222,"line":2664},[220,31615,2567],{"class":264},[220,31617,347],{"class":346},[220,31619,359],{"class":264},[220,31621,31622,31624,31626],{"class":222,"line":3459},[220,31623,402],{"class":264},[220,31625,2519],{"class":346},[220,31627,359],{"class":264},[15,31629,31630,31631,31634],{},"Or in Nuxt, use ",[99,31632,31633],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,31636,31638],{"className":251,"code":31637,"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,31639,31640,31645,31657,31667,31671,31691,31706,31719],{"__ignoreMap":178},[220,31641,31642],{"class":222,"line":223},[220,31643,31644],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,31646,31647,31649,31652,31654],{"class":222,"line":179},[220,31648,261],{"class":260},[220,31650,31651],{"class":264}," { defineNuxtPlugin } ",[220,31653,268],{"class":260},[220,31655,31656],{"class":230}," '#app'\n",[220,31658,31659,31661,31663,31665],{"class":222,"line":389},[220,31660,261],{"class":260},[220,31662,27078],{"class":264},[220,31664,268],{"class":260},[220,31666,271],{"class":230},[220,31668,31669],{"class":222,"line":399},[220,31670,647],{"emptyLinePlaceholder":194},[220,31672,31673,31675,31677,31680,31682,31685,31687,31689],{"class":222,"line":644},[220,31674,27091],{"class":260},[220,31676,27094],{"class":260},[220,31678,31679],{"class":226}," defineNuxtPlugin",[220,31681,3834],{"class":264},[220,31683,31684],{"class":3558},"nuxtApp",[220,31686,4066],{"class":264},[220,31688,2762],{"class":260},[220,31690,3433],{"class":264},[220,31692,31693,31696,31698,31700,31703],{"class":222,"line":650},[220,31694,31695],{"class":264}," nuxtApp.vueApp.",[220,31697,30498],{"class":226},[220,31699,2626],{"class":264},[220,31701,31702],{"class":230},"'Shader'",[220,31704,31705],{"class":264},", Shader)\n",[220,31707,31708,31710,31712,31714,31716],{"class":222,"line":656},[220,31709,31695],{"class":264},[220,31711,30498],{"class":226},[220,31713,2626],{"class":264},[220,31715,2462],{"class":230},[220,31717,31718],{"class":264},", LinearGradient)\n",[220,31720,31721],{"class":222,"line":673},[220,31722,1792],{"class":264},[15,31724,1839,31725,31728],{},[99,31726,31727],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,31730,31732],{"id":31731},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,31734,1839,31735,12104,31737,31739,31740,31742],{},[99,31736,101],{},[99,31738,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,31741,31102],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,31744,31745],{},"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":31747},[31748,31750,31751,31752],{"id":31098,"depth":179,"text":31749},"Nuxt: \u003CClientOnly>",{"id":31262,"depth":179,"text":31263},{"id":31423,"depth":179,"text":31424},{"id":31731,"depth":179,"text":31732},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":31064,"description":31753},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[31759,32100,32394,32672,32929,33262,33539,33739,34015,34215,34491,34691,34891,35224,35425,35757,35957,36234,36435,36768,37044,37244,37520,37796,38072,38271,38471,38775,39051,39251,39540,39740,40016,40348,40548,40824,41100,41393,41686,41961,42160,42539,42793,43126,43326,43602,43935,44211,44487,44730,45099,45375,45620,45894,46170,46370,46646,46846,47122,47398,47674,47874,48150,48443,48643,48919,49119,49395,49595,49795,49995,50269,50600,50932,51263,51519,51719,51995,52265,52510,52886,53157,53357,53633,53927,54133,54333,54580,54780,55056,55256,55550,55820,56096,56296,56572,56848,57128,57383,57644,57976,58220,58552,58750,59026,59226,59604,59804,60004,60204,60480,60680,60974,61250,61526,61859,62135,62380,62656,62856,63056,63255,63531,63863,64195,64471,64726,64926,65304,65596,65929,66187,66519,66775,67051,67327,67527,67859,68135,68467,68759,69035,69235,69480,69811,70011,70287,70667,70867,71112,71388,71644,71899,72155,72431,72675,73007,73207,73499,73831,74031,74307,74505,74752,75046,75322,75521,75814,76058,76313,76645,76921,77244,77489,77689,77965,78165,78497,78773,79049,79341,79674,79874,80288,80488,80688,81020,81296,81496,81696,81896,82228,82428],{"id":31760,"title":31761,"body":31762,"category":32094,"componentType":25740,"description":31769,"extension":191,"meta":32095,"navigation":194,"path":32096,"requiresChild":194,"seo":32097,"stem":32098,"__hash__":32099},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":31763,"toc":32090},[31764,31767,31770,31773,31776,31780,31784,32088],[11,31765,31761],{"id":31766},"angularblur",[15,31768,31769],{},"Radial motion blur rotating around a center point",[31771,31772],"shader-preview",{"component":31761},[23,31774,31775],{"id":26391},"Props",[31777,31778],"props-table",{":props":31779},"[{\"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,31781,31783],{"id":31782},"usage","Usage",[246,31785,31786,31844,31903,31959,32017],{":tabs":1557},[212,31787,31789],{"className":334,"code":31788,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31790,31791,31799,31806,31815,31820,31828,31836],{"__ignoreMap":178},[220,31792,31793,31795,31797],{"class":222,"line":223},[220,31794,343],{"class":264},[220,31796,347],{"class":346},[220,31798,359],{"class":264},[220,31800,31801,31803],{"class":222,"line":179},[220,31802,364],{"class":264},[220,31804,31805],{"class":346},"AngularBlur\n",[220,31807,31808,31810,31812],{"class":222,"line":389},[220,31809,20228],{"class":226},[220,31811,353],{"class":264},[220,31813,31814],{"class":230},"\"20\"\n",[220,31816,31817],{"class":222,"line":399},[220,31818,31819],{"class":264}," >\n",[220,31821,31822,31824,31826],{"class":222,"line":644},[220,31823,2550],{"class":264},[220,31825,2553],{"class":346},[220,31827,386],{"class":264},[220,31829,31830,31832,31834],{"class":222,"line":650},[220,31831,2567],{"class":264},[220,31833,31761],{"class":346},[220,31835,359],{"class":264},[220,31837,31838,31840,31842],{"class":222,"line":656},[220,31839,402],{"class":264},[220,31841,347],{"class":346},[220,31843,359],{"class":264},[212,31845,31847],{"className":409,"code":31846,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31848,31849,31857,31863,31875,31879,31887,31895],{"__ignoreMap":178},[220,31850,31851,31853,31855],{"class":222,"line":223},[220,31852,343],{"class":264},[220,31854,347],{"class":420},[220,31856,359],{"class":264},[220,31858,31859,31861],{"class":222,"line":179},[220,31860,364],{"class":264},[220,31862,31805],{"class":420},[220,31864,31865,31867,31869,31871,31873],{"class":222,"line":389},[220,31866,20339],{"class":226},[220,31868,353],{"class":260},[220,31870,743],{"class":264},[220,31872,24657],{"class":420},[220,31874,749],{"class":264},[220,31876,31877],{"class":222,"line":399},[220,31878,31819],{"class":264},[220,31880,31881,31883,31885],{"class":222,"line":644},[220,31882,2550],{"class":264},[220,31884,2553],{"class":420},[220,31886,386],{"class":264},[220,31888,31889,31891,31893],{"class":222,"line":650},[220,31890,2567],{"class":264},[220,31892,31761],{"class":420},[220,31894,359],{"class":264},[220,31896,31897,31899,31901],{"class":222,"line":656},[220,31898,402],{"class":264},[220,31900,347],{"class":420},[220,31902,359],{"class":264},[212,31904,31905],{"className":2844,"code":31846,"language":2846,"meta":178,"style":178},[99,31906,31907,31915,31921,31931,31935,31943,31951],{"__ignoreMap":178},[220,31908,31909,31911,31913],{"class":222,"line":223},[220,31910,343],{"class":264},[220,31912,347],{"class":420},[220,31914,359],{"class":264},[220,31916,31917,31919],{"class":222,"line":179},[220,31918,364],{"class":264},[220,31920,31805],{"class":420},[220,31922,31923,31925,31927,31929],{"class":222,"line":389},[220,31924,20339],{"class":226},[220,31926,29729],{"class":264},[220,31928,24657],{"class":420},[220,31930,749],{"class":264},[220,31932,31933],{"class":222,"line":399},[220,31934,31819],{"class":264},[220,31936,31937,31939,31941],{"class":222,"line":644},[220,31938,2550],{"class":264},[220,31940,2553],{"class":420},[220,31942,386],{"class":264},[220,31944,31945,31947,31949],{"class":222,"line":650},[220,31946,2567],{"class":264},[220,31948,31761],{"class":420},[220,31950,359],{"class":264},[220,31952,31953,31955,31957],{"class":222,"line":656},[220,31954,402],{"class":264},[220,31956,347],{"class":420},[220,31958,359],{"class":264},[212,31960,31961],{"className":468,"code":31846,"language":469,"meta":178,"style":178},[99,31962,31963,31971,31977,31989,31993,32001,32009],{"__ignoreMap":178},[220,31964,31965,31967,31969],{"class":222,"line":223},[220,31966,343],{"class":264},[220,31968,347],{"class":420},[220,31970,359],{"class":264},[220,31972,31973,31975],{"class":222,"line":179},[220,31974,364],{"class":264},[220,31976,31805],{"class":420},[220,31978,31979,31981,31983,31985,31987],{"class":222,"line":389},[220,31980,20339],{"class":226},[220,31982,353],{"class":260},[220,31984,743],{"class":264},[220,31986,24657],{"class":420},[220,31988,749],{"class":264},[220,31990,31991],{"class":222,"line":399},[220,31992,31819],{"class":264},[220,31994,31995,31997,31999],{"class":222,"line":644},[220,31996,2550],{"class":264},[220,31998,2553],{"class":420},[220,32000,386],{"class":264},[220,32002,32003,32005,32007],{"class":222,"line":650},[220,32004,2567],{"class":264},[220,32006,31761],{"class":420},[220,32008,359],{"class":264},[220,32010,32011,32013,32015],{"class":222,"line":656},[220,32012,402],{"class":264},[220,32014,347],{"class":420},[220,32016,359],{"class":264},[212,32018,32020],{"className":251,"code":32019,"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,32021,32022,32032,32036,32050,32054,32068,32076,32080,32084],{"__ignoreMap":178},[220,32023,32024,32026,32028,32030],{"class":222,"line":223},[220,32025,261],{"class":260},[220,32027,11364],{"class":264},[220,32029,268],{"class":260},[220,32031,11369],{"class":230},[220,32033,32034],{"class":222,"line":179},[220,32035,647],{"emptyLinePlaceholder":194},[220,32037,32038,32040,32042,32044,32046,32048],{"class":222,"line":389},[220,32039,1735],{"class":260},[220,32041,1738],{"class":420},[220,32043,1741],{"class":260},[220,32045,1744],{"class":260},[220,32047,1747],{"class":226},[220,32049,1750],{"class":264},[220,32051,32052],{"class":222,"line":399},[220,32053,1765],{"class":264},[220,32055,32056,32058,32061,32064,32066],{"class":222,"line":644},[220,32057,1770],{"class":264},[220,32059,32060],{"class":230},"'AngularBlur'",[220,32062,32063],{"class":264},", props: { intensity: ",[220,32065,24657],{"class":420},[220,32067,7397],{"class":264},[220,32069,32070,32072,32074],{"class":222,"line":650},[220,32071,6865],{"class":264},[220,32073,6409],{"class":230},[220,32075,2465],{"class":264},[220,32077,32078],{"class":222,"line":656},[220,32079,6882],{"class":264},[220,32081,32082],{"class":222,"line":673},[220,32083,1787],{"class":264},[220,32085,32086],{"class":222,"line":682},[220,32087,1792],{"class":264},[1504,32089,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32091},[32092,32093],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":31761,"description":31769},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":32101,"title":32102,"body":32103,"category":15765,"componentType":25734,"description":32110,"extension":191,"meta":32388,"navigation":194,"path":32389,"requiresChild":32390,"seo":32391,"stem":32392,"__hash__":32393},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":32104,"toc":32384},[32105,32108,32111,32113,32115,32118,32120,32382],[11,32106,32102],{"id":32107},"arc",[15,32109,32110],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[31771,32112],{"component":32102},[23,32114,31775],{"id":26391},[31777,32116],{":props":32117},"[{\"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,32119,31783],{"id":31782},[246,32121,32122,32171,32222,32270,32320],{":tabs":1557},[212,32123,32125],{"className":334,"code":32124,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,32126,32127,32135,32142,32150,32159,32163],{"__ignoreMap":178},[220,32128,32129,32131,32133],{"class":222,"line":223},[220,32130,343],{"class":264},[220,32132,347],{"class":346},[220,32134,359],{"class":264},[220,32136,32137,32139],{"class":222,"line":179},[220,32138,364],{"class":264},[220,32140,32141],{"class":346},"Arc\n",[220,32143,32144,32146,32148],{"class":222,"line":389},[220,32145,9487],{"class":226},[220,32147,353],{"class":264},[220,32149,9443],{"class":230},[220,32151,32152,32154,32156],{"class":222,"line":399},[220,32153,17262],{"class":226},[220,32155,353],{"class":264},[220,32157,32158],{"class":230},"\"0.38\"\n",[220,32160,32161],{"class":222,"line":644},[220,32162,1234],{"class":264},[220,32164,32165,32167,32169],{"class":222,"line":650},[220,32166,402],{"class":264},[220,32168,347],{"class":346},[220,32170,359],{"class":264},[212,32172,32174],{"className":409,"code":32173,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,32175,32176,32184,32190,32198,32210,32214],{"__ignoreMap":178},[220,32177,32178,32180,32182],{"class":222,"line":223},[220,32179,343],{"class":264},[220,32181,347],{"class":420},[220,32183,359],{"class":264},[220,32185,32186,32188],{"class":222,"line":179},[220,32187,364],{"class":264},[220,32189,32141],{"class":420},[220,32191,32192,32194,32196],{"class":222,"line":389},[220,32193,9487],{"class":226},[220,32195,353],{"class":260},[220,32197,9443],{"class":230},[220,32199,32200,32202,32204,32206,32208],{"class":222,"line":399},[220,32201,9497],{"class":226},[220,32203,353],{"class":260},[220,32205,743],{"class":264},[220,32207,24595],{"class":420},[220,32209,749],{"class":264},[220,32211,32212],{"class":222,"line":644},[220,32213,1234],{"class":264},[220,32215,32216,32218,32220],{"class":222,"line":650},[220,32217,402],{"class":264},[220,32219,347],{"class":420},[220,32221,359],{"class":264},[212,32223,32224],{"className":2844,"code":32173,"language":2846,"meta":178,"style":178},[99,32225,32226,32234,32240,32248,32258,32262],{"__ignoreMap":178},[220,32227,32228,32230,32232],{"class":222,"line":223},[220,32229,343],{"class":264},[220,32231,347],{"class":420},[220,32233,359],{"class":264},[220,32235,32236,32238],{"class":222,"line":179},[220,32237,364],{"class":264},[220,32239,32141],{"class":420},[220,32241,32242,32244,32246],{"class":222,"line":389},[220,32243,9487],{"class":226},[220,32245,353],{"class":264},[220,32247,9443],{"class":230},[220,32249,32250,32252,32254,32256],{"class":222,"line":399},[220,32251,9497],{"class":226},[220,32253,29729],{"class":264},[220,32255,24595],{"class":420},[220,32257,749],{"class":264},[220,32259,32260],{"class":222,"line":644},[220,32261,1234],{"class":264},[220,32263,32264,32266,32268],{"class":222,"line":650},[220,32265,402],{"class":264},[220,32267,347],{"class":420},[220,32269,359],{"class":264},[212,32271,32272],{"className":468,"code":32173,"language":469,"meta":178,"style":178},[99,32273,32274,32282,32288,32296,32308,32312],{"__ignoreMap":178},[220,32275,32276,32278,32280],{"class":222,"line":223},[220,32277,343],{"class":264},[220,32279,347],{"class":420},[220,32281,359],{"class":264},[220,32283,32284,32286],{"class":222,"line":179},[220,32285,364],{"class":264},[220,32287,32141],{"class":420},[220,32289,32290,32292,32294],{"class":222,"line":389},[220,32291,9487],{"class":226},[220,32293,353],{"class":260},[220,32295,9443],{"class":230},[220,32297,32298,32300,32302,32304,32306],{"class":222,"line":399},[220,32299,9497],{"class":226},[220,32301,353],{"class":260},[220,32303,743],{"class":264},[220,32305,24595],{"class":420},[220,32307,749],{"class":264},[220,32309,32310],{"class":222,"line":644},[220,32311,1234],{"class":264},[220,32313,32314,32316,32318],{"class":222,"line":650},[220,32315,402],{"class":264},[220,32317,347],{"class":420},[220,32319,359],{"class":264},[212,32321,32323],{"className":251,"code":32322,"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,32324,32325,32335,32339,32353,32357,32374,32378],{"__ignoreMap":178},[220,32326,32327,32329,32331,32333],{"class":222,"line":223},[220,32328,261],{"class":260},[220,32330,11364],{"class":264},[220,32332,268],{"class":260},[220,32334,11369],{"class":230},[220,32336,32337],{"class":222,"line":179},[220,32338,647],{"emptyLinePlaceholder":194},[220,32340,32341,32343,32345,32347,32349,32351],{"class":222,"line":389},[220,32342,1735],{"class":260},[220,32344,1738],{"class":420},[220,32346,1741],{"class":260},[220,32348,1744],{"class":260},[220,32350,1747],{"class":226},[220,32352,1750],{"class":264},[220,32354,32355],{"class":222,"line":399},[220,32356,1765],{"class":264},[220,32358,32359,32361,32364,32366,32368,32370,32372],{"class":222,"line":644},[220,32360,1770],{"class":264},[220,32362,32363],{"class":230},"'Arc'",[220,32365,1776],{"class":264},[220,32367,10021],{"class":230},[220,32369,6417],{"class":264},[220,32371,24595],{"class":420},[220,32373,1782],{"class":264},[220,32375,32376],{"class":222,"line":650},[220,32377,1787],{"class":264},[220,32379,32380],{"class":222,"line":656},[220,32381,1792],{"class":264},[1504,32383,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32385},[32386,32387],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":32102,"description":32110},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":32395,"title":32396,"body":32397,"category":32666,"componentType":25740,"description":32404,"extension":191,"meta":32667,"navigation":194,"path":32668,"requiresChild":194,"seo":32669,"stem":32670,"__hash__":32671},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":32398,"toc":32662},[32399,32402,32405,32407,32409,32412,32414,32659],[11,32400,32396],{"id":32401},"ascii",[15,32403,32404],{},"Convert imagery to ASCII character art",[31771,32406],{"component":32396},[23,32408,31775],{"id":26391},[31777,32410],{":props":32411},"[{\"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,32413,31783],{"id":31782},[246,32415,32416,32461,32505,32549,32593],{":tabs":1557},[212,32417,32419],{"className":334,"code":32418,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,32420,32421,32429,32437,32445,32453],{"__ignoreMap":178},[220,32422,32423,32425,32427],{"class":222,"line":223},[220,32424,343],{"class":264},[220,32426,347],{"class":346},[220,32428,359],{"class":264},[220,32430,32431,32433,32435],{"class":222,"line":179},[220,32432,364],{"class":264},[220,32434,32396],{"class":346},[220,32436,359],{"class":264},[220,32438,32439,32441,32443],{"class":222,"line":389},[220,32440,2550],{"class":264},[220,32442,2553],{"class":346},[220,32444,386],{"class":264},[220,32446,32447,32449,32451],{"class":222,"line":399},[220,32448,2567],{"class":264},[220,32450,32396],{"class":346},[220,32452,359],{"class":264},[220,32454,32455,32457,32459],{"class":222,"line":644},[220,32456,402],{"class":264},[220,32458,347],{"class":346},[220,32460,359],{"class":264},[212,32462,32463],{"className":409,"code":32418,"language":411,"meta":178,"style":178},[99,32464,32465,32473,32481,32489,32497],{"__ignoreMap":178},[220,32466,32467,32469,32471],{"class":222,"line":223},[220,32468,343],{"class":264},[220,32470,347],{"class":420},[220,32472,359],{"class":264},[220,32474,32475,32477,32479],{"class":222,"line":179},[220,32476,364],{"class":264},[220,32478,32396],{"class":420},[220,32480,359],{"class":264},[220,32482,32483,32485,32487],{"class":222,"line":389},[220,32484,2550],{"class":264},[220,32486,2553],{"class":420},[220,32488,386],{"class":264},[220,32490,32491,32493,32495],{"class":222,"line":399},[220,32492,2567],{"class":264},[220,32494,32396],{"class":420},[220,32496,359],{"class":264},[220,32498,32499,32501,32503],{"class":222,"line":644},[220,32500,402],{"class":264},[220,32502,347],{"class":420},[220,32504,359],{"class":264},[212,32506,32507],{"className":2844,"code":32418,"language":2846,"meta":178,"style":178},[99,32508,32509,32517,32525,32533,32541],{"__ignoreMap":178},[220,32510,32511,32513,32515],{"class":222,"line":223},[220,32512,343],{"class":264},[220,32514,347],{"class":420},[220,32516,359],{"class":264},[220,32518,32519,32521,32523],{"class":222,"line":179},[220,32520,364],{"class":264},[220,32522,32396],{"class":420},[220,32524,359],{"class":264},[220,32526,32527,32529,32531],{"class":222,"line":389},[220,32528,2550],{"class":264},[220,32530,2553],{"class":420},[220,32532,386],{"class":264},[220,32534,32535,32537,32539],{"class":222,"line":399},[220,32536,2567],{"class":264},[220,32538,32396],{"class":420},[220,32540,359],{"class":264},[220,32542,32543,32545,32547],{"class":222,"line":644},[220,32544,402],{"class":264},[220,32546,347],{"class":420},[220,32548,359],{"class":264},[212,32550,32551],{"className":468,"code":32418,"language":469,"meta":178,"style":178},[99,32552,32553,32561,32569,32577,32585],{"__ignoreMap":178},[220,32554,32555,32557,32559],{"class":222,"line":223},[220,32556,343],{"class":264},[220,32558,347],{"class":420},[220,32560,359],{"class":264},[220,32562,32563,32565,32567],{"class":222,"line":179},[220,32564,364],{"class":264},[220,32566,32396],{"class":420},[220,32568,359],{"class":264},[220,32570,32571,32573,32575],{"class":222,"line":389},[220,32572,2550],{"class":264},[220,32574,2553],{"class":420},[220,32576,386],{"class":264},[220,32578,32579,32581,32583],{"class":222,"line":399},[220,32580,2567],{"class":264},[220,32582,32396],{"class":420},[220,32584,359],{"class":264},[220,32586,32587,32589,32591],{"class":222,"line":644},[220,32588,402],{"class":264},[220,32590,347],{"class":420},[220,32592,359],{"class":264},[212,32594,32596],{"className":251,"code":32595,"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,32597,32598,32608,32612,32626,32630,32639,32647,32651,32655],{"__ignoreMap":178},[220,32599,32600,32602,32604,32606],{"class":222,"line":223},[220,32601,261],{"class":260},[220,32603,11364],{"class":264},[220,32605,268],{"class":260},[220,32607,11369],{"class":230},[220,32609,32610],{"class":222,"line":179},[220,32611,647],{"emptyLinePlaceholder":194},[220,32613,32614,32616,32618,32620,32622,32624],{"class":222,"line":389},[220,32615,1735],{"class":260},[220,32617,1738],{"class":420},[220,32619,1741],{"class":260},[220,32621,1744],{"class":260},[220,32623,1747],{"class":226},[220,32625,1750],{"class":264},[220,32627,32628],{"class":222,"line":399},[220,32629,1765],{"class":264},[220,32631,32632,32634,32637],{"class":222,"line":644},[220,32633,1770],{"class":264},[220,32635,32636],{"class":230},"'Ascii'",[220,32638,6860],{"class":264},[220,32640,32641,32643,32645],{"class":222,"line":650},[220,32642,6865],{"class":264},[220,32644,6409],{"class":230},[220,32646,2465],{"class":264},[220,32648,32649],{"class":222,"line":656},[220,32650,6882],{"class":264},[220,32652,32653],{"class":222,"line":673},[220,32654,1787],{"class":264},[220,32656,32657],{"class":222,"line":682},[220,32658,1792],{"class":264},[1504,32660,32661],{},"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":32663},[32664,32665],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":32396,"description":32404},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":32673,"title":12474,"body":32674,"category":32923,"componentType":25734,"description":32681,"extension":191,"meta":32924,"navigation":194,"path":32925,"requiresChild":32390,"seo":32926,"stem":32927,"__hash__":32928},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":32675,"toc":32919},[32676,32679,32682,32684,32686,32689,32691,32917],[11,32677,12474],{"id":32678},"aurora",[15,32680,32681],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[31771,32683],{"component":12474},[23,32685,31775],{"id":26391},[31777,32687],{":props":32688},"[{\"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,32690,31783],{"id":31782},[246,32692,32693,32734,32778,32818,32860],{":tabs":1557},[212,32694,32696],{"className":334,"code":32695,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,32697,32698,32706,32713,32722,32726],{"__ignoreMap":178},[220,32699,32700,32702,32704],{"class":222,"line":223},[220,32701,343],{"class":264},[220,32703,347],{"class":346},[220,32705,359],{"class":264},[220,32707,32708,32710],{"class":222,"line":179},[220,32709,364],{"class":264},[220,32711,32712],{"class":346},"Aurora\n",[220,32714,32715,32717,32719],{"class":222,"line":389},[220,32716,20228],{"class":226},[220,32718,353],{"class":264},[220,32720,32721],{"class":230},"\"80\"\n",[220,32723,32724],{"class":222,"line":399},[220,32725,1234],{"class":264},[220,32727,32728,32730,32732],{"class":222,"line":644},[220,32729,402],{"class":264},[220,32731,347],{"class":346},[220,32733,359],{"class":264},[212,32735,32737],{"className":409,"code":32736,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,32738,32739,32747,32753,32766,32770],{"__ignoreMap":178},[220,32740,32741,32743,32745],{"class":222,"line":223},[220,32742,343],{"class":264},[220,32744,347],{"class":420},[220,32746,359],{"class":264},[220,32748,32749,32751],{"class":222,"line":179},[220,32750,364],{"class":264},[220,32752,32712],{"class":420},[220,32754,32755,32757,32759,32761,32764],{"class":222,"line":389},[220,32756,20339],{"class":226},[220,32758,353],{"class":260},[220,32760,743],{"class":264},[220,32762,32763],{"class":420},"80",[220,32765,749],{"class":264},[220,32767,32768],{"class":222,"line":399},[220,32769,1234],{"class":264},[220,32771,32772,32774,32776],{"class":222,"line":644},[220,32773,402],{"class":264},[220,32775,347],{"class":420},[220,32777,359],{"class":264},[212,32779,32780],{"className":2844,"code":32736,"language":2846,"meta":178,"style":178},[99,32781,32782,32790,32796,32806,32810],{"__ignoreMap":178},[220,32783,32784,32786,32788],{"class":222,"line":223},[220,32785,343],{"class":264},[220,32787,347],{"class":420},[220,32789,359],{"class":264},[220,32791,32792,32794],{"class":222,"line":179},[220,32793,364],{"class":264},[220,32795,32712],{"class":420},[220,32797,32798,32800,32802,32804],{"class":222,"line":389},[220,32799,20339],{"class":226},[220,32801,29729],{"class":264},[220,32803,32763],{"class":420},[220,32805,749],{"class":264},[220,32807,32808],{"class":222,"line":399},[220,32809,1234],{"class":264},[220,32811,32812,32814,32816],{"class":222,"line":644},[220,32813,402],{"class":264},[220,32815,347],{"class":420},[220,32817,359],{"class":264},[212,32819,32820],{"className":468,"code":32736,"language":469,"meta":178,"style":178},[99,32821,32822,32830,32836,32848,32852],{"__ignoreMap":178},[220,32823,32824,32826,32828],{"class":222,"line":223},[220,32825,343],{"class":264},[220,32827,347],{"class":420},[220,32829,359],{"class":264},[220,32831,32832,32834],{"class":222,"line":179},[220,32833,364],{"class":264},[220,32835,32712],{"class":420},[220,32837,32838,32840,32842,32844,32846],{"class":222,"line":389},[220,32839,20339],{"class":226},[220,32841,353],{"class":260},[220,32843,743],{"class":264},[220,32845,32763],{"class":420},[220,32847,749],{"class":264},[220,32849,32850],{"class":222,"line":399},[220,32851,1234],{"class":264},[220,32853,32854,32856,32858],{"class":222,"line":644},[220,32855,402],{"class":264},[220,32857,347],{"class":420},[220,32859,359],{"class":264},[212,32861,32863],{"className":251,"code":32862,"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,32864,32865,32875,32879,32893,32897,32909,32913],{"__ignoreMap":178},[220,32866,32867,32869,32871,32873],{"class":222,"line":223},[220,32868,261],{"class":260},[220,32870,11364],{"class":264},[220,32872,268],{"class":260},[220,32874,11369],{"class":230},[220,32876,32877],{"class":222,"line":179},[220,32878,647],{"emptyLinePlaceholder":194},[220,32880,32881,32883,32885,32887,32889,32891],{"class":222,"line":389},[220,32882,1735],{"class":260},[220,32884,1738],{"class":420},[220,32886,1741],{"class":260},[220,32888,1744],{"class":260},[220,32890,1747],{"class":226},[220,32892,1750],{"class":264},[220,32894,32895],{"class":222,"line":399},[220,32896,1765],{"class":264},[220,32898,32899,32901,32903,32905,32907],{"class":222,"line":644},[220,32900,1770],{"class":264},[220,32902,12851],{"class":230},[220,32904,32063],{"class":264},[220,32906,32763],{"class":420},[220,32908,1782],{"class":264},[220,32910,32911],{"class":222,"line":650},[220,32912,1787],{"class":264},[220,32914,32915],{"class":222,"line":656},[220,32916,1792],{"class":264},[1504,32918,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32920},[32921,32922],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":12474,"description":32681},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":32930,"title":32931,"body":32932,"category":33256,"componentType":25740,"description":32939,"extension":191,"meta":33257,"navigation":194,"path":33258,"requiresChild":194,"seo":33259,"stem":33260,"__hash__":33261},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":32933,"toc":33252},[32934,32937,32940,32942,32944,32947,32949,33250],[11,32935,32931],{"id":32936},"barshift",[15,32938,32939],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[31771,32941],{"component":32931},[23,32943,31775],{"id":26391},[31777,32945],{":props":32946},"[{\"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,32948,31783],{"id":31782},[246,32950,32951,33007,33066,33122,33180],{":tabs":1557},[212,32952,32954],{"className":334,"code":32953,"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,32955,32956,32964,32971,32979,32983,32991,32999],{"__ignoreMap":178},[220,32957,32958,32960,32962],{"class":222,"line":223},[220,32959,343],{"class":264},[220,32961,347],{"class":346},[220,32963,359],{"class":264},[220,32965,32966,32968],{"class":222,"line":179},[220,32967,364],{"class":264},[220,32969,32970],{"class":346},"BarShift\n",[220,32972,32973,32975,32977],{"class":222,"line":389},[220,32974,20228],{"class":226},[220,32976,353],{"class":264},[220,32978,17965],{"class":230},[220,32980,32981],{"class":222,"line":399},[220,32982,31819],{"class":264},[220,32984,32985,32987,32989],{"class":222,"line":644},[220,32986,2550],{"class":264},[220,32988,2553],{"class":346},[220,32990,386],{"class":264},[220,32992,32993,32995,32997],{"class":222,"line":650},[220,32994,2567],{"class":264},[220,32996,32931],{"class":346},[220,32998,359],{"class":264},[220,33000,33001,33003,33005],{"class":222,"line":656},[220,33002,402],{"class":264},[220,33004,347],{"class":346},[220,33006,359],{"class":264},[212,33008,33010],{"className":409,"code":33009,"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,33011,33012,33020,33026,33038,33042,33050,33058],{"__ignoreMap":178},[220,33013,33014,33016,33018],{"class":222,"line":223},[220,33015,343],{"class":264},[220,33017,347],{"class":420},[220,33019,359],{"class":264},[220,33021,33022,33024],{"class":222,"line":179},[220,33023,364],{"class":264},[220,33025,32970],{"class":420},[220,33027,33028,33030,33032,33034,33036],{"class":222,"line":389},[220,33029,20339],{"class":226},[220,33031,353],{"class":260},[220,33033,743],{"class":264},[220,33035,18049],{"class":420},[220,33037,749],{"class":264},[220,33039,33040],{"class":222,"line":399},[220,33041,31819],{"class":264},[220,33043,33044,33046,33048],{"class":222,"line":644},[220,33045,2550],{"class":264},[220,33047,2553],{"class":420},[220,33049,386],{"class":264},[220,33051,33052,33054,33056],{"class":222,"line":650},[220,33053,2567],{"class":264},[220,33055,32931],{"class":420},[220,33057,359],{"class":264},[220,33059,33060,33062,33064],{"class":222,"line":656},[220,33061,402],{"class":264},[220,33063,347],{"class":420},[220,33065,359],{"class":264},[212,33067,33068],{"className":2844,"code":33009,"language":2846,"meta":178,"style":178},[99,33069,33070,33078,33084,33094,33098,33106,33114],{"__ignoreMap":178},[220,33071,33072,33074,33076],{"class":222,"line":223},[220,33073,343],{"class":264},[220,33075,347],{"class":420},[220,33077,359],{"class":264},[220,33079,33080,33082],{"class":222,"line":179},[220,33081,364],{"class":264},[220,33083,32970],{"class":420},[220,33085,33086,33088,33090,33092],{"class":222,"line":389},[220,33087,20339],{"class":226},[220,33089,29729],{"class":264},[220,33091,18049],{"class":420},[220,33093,749],{"class":264},[220,33095,33096],{"class":222,"line":399},[220,33097,31819],{"class":264},[220,33099,33100,33102,33104],{"class":222,"line":644},[220,33101,2550],{"class":264},[220,33103,2553],{"class":420},[220,33105,386],{"class":264},[220,33107,33108,33110,33112],{"class":222,"line":650},[220,33109,2567],{"class":264},[220,33111,32931],{"class":420},[220,33113,359],{"class":264},[220,33115,33116,33118,33120],{"class":222,"line":656},[220,33117,402],{"class":264},[220,33119,347],{"class":420},[220,33121,359],{"class":264},[212,33123,33124],{"className":468,"code":33009,"language":469,"meta":178,"style":178},[99,33125,33126,33134,33140,33152,33156,33164,33172],{"__ignoreMap":178},[220,33127,33128,33130,33132],{"class":222,"line":223},[220,33129,343],{"class":264},[220,33131,347],{"class":420},[220,33133,359],{"class":264},[220,33135,33136,33138],{"class":222,"line":179},[220,33137,364],{"class":264},[220,33139,32970],{"class":420},[220,33141,33142,33144,33146,33148,33150],{"class":222,"line":389},[220,33143,20339],{"class":226},[220,33145,353],{"class":260},[220,33147,743],{"class":264},[220,33149,18049],{"class":420},[220,33151,749],{"class":264},[220,33153,33154],{"class":222,"line":399},[220,33155,31819],{"class":264},[220,33157,33158,33160,33162],{"class":222,"line":644},[220,33159,2550],{"class":264},[220,33161,2553],{"class":420},[220,33163,386],{"class":264},[220,33165,33166,33168,33170],{"class":222,"line":650},[220,33167,2567],{"class":264},[220,33169,32931],{"class":420},[220,33171,359],{"class":264},[220,33173,33174,33176,33178],{"class":222,"line":656},[220,33175,402],{"class":264},[220,33177,347],{"class":420},[220,33179,359],{"class":264},[212,33181,33183],{"className":251,"code":33182,"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,33184,33185,33195,33199,33213,33217,33230,33238,33242,33246],{"__ignoreMap":178},[220,33186,33187,33189,33191,33193],{"class":222,"line":223},[220,33188,261],{"class":260},[220,33190,11364],{"class":264},[220,33192,268],{"class":260},[220,33194,11369],{"class":230},[220,33196,33197],{"class":222,"line":179},[220,33198,647],{"emptyLinePlaceholder":194},[220,33200,33201,33203,33205,33207,33209,33211],{"class":222,"line":389},[220,33202,1735],{"class":260},[220,33204,1738],{"class":420},[220,33206,1741],{"class":260},[220,33208,1744],{"class":260},[220,33210,1747],{"class":226},[220,33212,1750],{"class":264},[220,33214,33215],{"class":222,"line":399},[220,33216,1765],{"class":264},[220,33218,33219,33221,33224,33226,33228],{"class":222,"line":644},[220,33220,1770],{"class":264},[220,33222,33223],{"class":230},"'BarShift'",[220,33225,32063],{"class":264},[220,33227,18049],{"class":420},[220,33229,7397],{"class":264},[220,33231,33232,33234,33236],{"class":222,"line":650},[220,33233,6865],{"class":264},[220,33235,6409],{"class":230},[220,33237,2465],{"class":264},[220,33239,33240],{"class":222,"line":656},[220,33241,6882],{"class":264},[220,33243,33244],{"class":222,"line":673},[220,33245,1787],{"class":264},[220,33247,33248],{"class":222,"line":682},[220,33249,1792],{"class":264},[1504,33251,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33253},[33254,33255],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":32931,"description":32939},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":33263,"title":33264,"body":33265,"category":33533,"componentType":25740,"description":33272,"extension":191,"meta":33534,"navigation":194,"path":33535,"requiresChild":194,"seo":33536,"stem":33537,"__hash__":33538},"components\u002Fdocs\u002Fcomponents\u002FBarnDoors.md","BarnDoors",{"type":8,"value":33266,"toc":33529},[33267,33270,33273,33275,33277,33280,33282,33527],[11,33268,33264],{"id":33269},"barndoors",[15,33271,33272],{},"Split the content along a center line and wipe outward in both directions",[31771,33274],{"component":33264},[23,33276,31775],{"id":26391},[31777,33278],{":props":33279},"[{\"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,33281,31783],{"id":31782},[246,33283,33284,33329,33373,33417,33461],{":tabs":1557},[212,33285,33287],{"className":334,"code":33286,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarnDoors>\n \u003CCircle \u002F>\n \u003C\u002FBarnDoors>\n\u003C\u002FShader>\n",[99,33288,33289,33297,33305,33313,33321],{"__ignoreMap":178},[220,33290,33291,33293,33295],{"class":222,"line":223},[220,33292,343],{"class":264},[220,33294,347],{"class":346},[220,33296,359],{"class":264},[220,33298,33299,33301,33303],{"class":222,"line":179},[220,33300,364],{"class":264},[220,33302,33264],{"class":346},[220,33304,359],{"class":264},[220,33306,33307,33309,33311],{"class":222,"line":389},[220,33308,2550],{"class":264},[220,33310,2553],{"class":346},[220,33312,386],{"class":264},[220,33314,33315,33317,33319],{"class":222,"line":399},[220,33316,2567],{"class":264},[220,33318,33264],{"class":346},[220,33320,359],{"class":264},[220,33322,33323,33325,33327],{"class":222,"line":644},[220,33324,402],{"class":264},[220,33326,347],{"class":346},[220,33328,359],{"class":264},[212,33330,33331],{"className":409,"code":33286,"language":411,"meta":178,"style":178},[99,33332,33333,33341,33349,33357,33365],{"__ignoreMap":178},[220,33334,33335,33337,33339],{"class":222,"line":223},[220,33336,343],{"class":264},[220,33338,347],{"class":420},[220,33340,359],{"class":264},[220,33342,33343,33345,33347],{"class":222,"line":179},[220,33344,364],{"class":264},[220,33346,33264],{"class":420},[220,33348,359],{"class":264},[220,33350,33351,33353,33355],{"class":222,"line":389},[220,33352,2550],{"class":264},[220,33354,2553],{"class":420},[220,33356,386],{"class":264},[220,33358,33359,33361,33363],{"class":222,"line":399},[220,33360,2567],{"class":264},[220,33362,33264],{"class":420},[220,33364,359],{"class":264},[220,33366,33367,33369,33371],{"class":222,"line":644},[220,33368,402],{"class":264},[220,33370,347],{"class":420},[220,33372,359],{"class":264},[212,33374,33375],{"className":2844,"code":33286,"language":2846,"meta":178,"style":178},[99,33376,33377,33385,33393,33401,33409],{"__ignoreMap":178},[220,33378,33379,33381,33383],{"class":222,"line":223},[220,33380,343],{"class":264},[220,33382,347],{"class":420},[220,33384,359],{"class":264},[220,33386,33387,33389,33391],{"class":222,"line":179},[220,33388,364],{"class":264},[220,33390,33264],{"class":420},[220,33392,359],{"class":264},[220,33394,33395,33397,33399],{"class":222,"line":389},[220,33396,2550],{"class":264},[220,33398,2553],{"class":420},[220,33400,386],{"class":264},[220,33402,33403,33405,33407],{"class":222,"line":399},[220,33404,2567],{"class":264},[220,33406,33264],{"class":420},[220,33408,359],{"class":264},[220,33410,33411,33413,33415],{"class":222,"line":644},[220,33412,402],{"class":264},[220,33414,347],{"class":420},[220,33416,359],{"class":264},[212,33418,33419],{"className":468,"code":33286,"language":469,"meta":178,"style":178},[99,33420,33421,33429,33437,33445,33453],{"__ignoreMap":178},[220,33422,33423,33425,33427],{"class":222,"line":223},[220,33424,343],{"class":264},[220,33426,347],{"class":420},[220,33428,359],{"class":264},[220,33430,33431,33433,33435],{"class":222,"line":179},[220,33432,364],{"class":264},[220,33434,33264],{"class":420},[220,33436,359],{"class":264},[220,33438,33439,33441,33443],{"class":222,"line":389},[220,33440,2550],{"class":264},[220,33442,2553],{"class":420},[220,33444,386],{"class":264},[220,33446,33447,33449,33451],{"class":222,"line":399},[220,33448,2567],{"class":264},[220,33450,33264],{"class":420},[220,33452,359],{"class":264},[220,33454,33455,33457,33459],{"class":222,"line":644},[220,33456,402],{"class":264},[220,33458,347],{"class":420},[220,33460,359],{"class":264},[212,33462,33464],{"className":251,"code":33463,"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,33465,33466,33476,33480,33494,33498,33507,33515,33519,33523],{"__ignoreMap":178},[220,33467,33468,33470,33472,33474],{"class":222,"line":223},[220,33469,261],{"class":260},[220,33471,11364],{"class":264},[220,33473,268],{"class":260},[220,33475,11369],{"class":230},[220,33477,33478],{"class":222,"line":179},[220,33479,647],{"emptyLinePlaceholder":194},[220,33481,33482,33484,33486,33488,33490,33492],{"class":222,"line":389},[220,33483,1735],{"class":260},[220,33485,1738],{"class":420},[220,33487,1741],{"class":260},[220,33489,1744],{"class":260},[220,33491,1747],{"class":226},[220,33493,1750],{"class":264},[220,33495,33496],{"class":222,"line":399},[220,33497,1765],{"class":264},[220,33499,33500,33502,33505],{"class":222,"line":644},[220,33501,1770],{"class":264},[220,33503,33504],{"class":230},"'BarnDoors'",[220,33506,6860],{"class":264},[220,33508,33509,33511,33513],{"class":222,"line":650},[220,33510,6865],{"class":264},[220,33512,6409],{"class":230},[220,33514,2465],{"class":264},[220,33516,33517],{"class":222,"line":656},[220,33518,6882],{"class":264},[220,33520,33521],{"class":222,"line":673},[220,33522,1787],{"class":264},[220,33524,33525],{"class":222,"line":682},[220,33526,1792],{"class":264},[1504,33528,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":33530},[33531,33532],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Transitions",{},"\u002Fdocs\u002Fcomponents\u002Fbarndoors",{"title":33264,"description":33272},"docs\u002Fcomponents\u002FBarnDoors","73aNA7NyczNQKFcurXoO42FtB4UEaUOUGpMTLW3y3js",{"id":33540,"title":33541,"body":33542,"category":32923,"componentType":25734,"description":33549,"extension":191,"meta":33734,"navigation":194,"path":33735,"requiresChild":32390,"seo":33736,"stem":33737,"__hash__":33738},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":33543,"toc":33730},[33544,33547,33550,33552,33554,33557,33559,33728],[11,33545,33541],{"id":33546},"beam",[15,33548,33549],{},"A beam of light from one point to another.",[31771,33551],{"component":33541},[23,33553,31775],{"id":26391},[31777,33555],{":props":33556},"[{\"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,33558,31783],{"id":31782},[246,33560,33561,33590,33618,33646,33674],{":tabs":1557},[212,33562,33564],{"className":334,"code":33563,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,33565,33566,33574,33582],{"__ignoreMap":178},[220,33567,33568,33570,33572],{"class":222,"line":223},[220,33569,343],{"class":264},[220,33571,347],{"class":346},[220,33573,359],{"class":264},[220,33575,33576,33578,33580],{"class":222,"line":179},[220,33577,364],{"class":264},[220,33579,33541],{"class":346},[220,33581,386],{"class":264},[220,33583,33584,33586,33588],{"class":222,"line":389},[220,33585,402],{"class":264},[220,33587,347],{"class":346},[220,33589,359],{"class":264},[212,33591,33592],{"className":409,"code":33563,"language":411,"meta":178,"style":178},[99,33593,33594,33602,33610],{"__ignoreMap":178},[220,33595,33596,33598,33600],{"class":222,"line":223},[220,33597,343],{"class":264},[220,33599,347],{"class":420},[220,33601,359],{"class":264},[220,33603,33604,33606,33608],{"class":222,"line":179},[220,33605,364],{"class":264},[220,33607,33541],{"class":420},[220,33609,386],{"class":264},[220,33611,33612,33614,33616],{"class":222,"line":389},[220,33613,402],{"class":264},[220,33615,347],{"class":420},[220,33617,359],{"class":264},[212,33619,33620],{"className":2844,"code":33563,"language":2846,"meta":178,"style":178},[99,33621,33622,33630,33638],{"__ignoreMap":178},[220,33623,33624,33626,33628],{"class":222,"line":223},[220,33625,343],{"class":264},[220,33627,347],{"class":420},[220,33629,359],{"class":264},[220,33631,33632,33634,33636],{"class":222,"line":179},[220,33633,364],{"class":264},[220,33635,33541],{"class":420},[220,33637,386],{"class":264},[220,33639,33640,33642,33644],{"class":222,"line":389},[220,33641,402],{"class":264},[220,33643,347],{"class":420},[220,33645,359],{"class":264},[212,33647,33648],{"className":468,"code":33563,"language":469,"meta":178,"style":178},[99,33649,33650,33658,33666],{"__ignoreMap":178},[220,33651,33652,33654,33656],{"class":222,"line":223},[220,33653,343],{"class":264},[220,33655,347],{"class":420},[220,33657,359],{"class":264},[220,33659,33660,33662,33664],{"class":222,"line":179},[220,33661,364],{"class":264},[220,33663,33541],{"class":420},[220,33665,386],{"class":264},[220,33667,33668,33670,33672],{"class":222,"line":389},[220,33669,402],{"class":264},[220,33671,347],{"class":420},[220,33673,359],{"class":264},[212,33675,33677],{"className":251,"code":33676,"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,33678,33679,33689,33693,33707,33711,33720,33724],{"__ignoreMap":178},[220,33680,33681,33683,33685,33687],{"class":222,"line":223},[220,33682,261],{"class":260},[220,33684,11364],{"class":264},[220,33686,268],{"class":260},[220,33688,11369],{"class":230},[220,33690,33691],{"class":222,"line":179},[220,33692,647],{"emptyLinePlaceholder":194},[220,33694,33695,33697,33699,33701,33703,33705],{"class":222,"line":389},[220,33696,1735],{"class":260},[220,33698,1738],{"class":420},[220,33700,1741],{"class":260},[220,33702,1744],{"class":260},[220,33704,1747],{"class":226},[220,33706,1750],{"class":264},[220,33708,33709],{"class":222,"line":399},[220,33710,1765],{"class":264},[220,33712,33713,33715,33718],{"class":222,"line":644},[220,33714,1770],{"class":264},[220,33716,33717],{"class":230},"'Beam'",[220,33719,2465],{"class":264},[220,33721,33722],{"class":222,"line":650},[220,33723,1787],{"class":264},[220,33725,33726],{"class":222,"line":656},[220,33727,1792],{"class":264},[1504,33729,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":33731},[33732,33733],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":33541,"description":33549},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":33740,"title":33741,"body":33742,"category":33256,"componentType":25740,"description":33749,"extension":191,"meta":34010,"navigation":194,"path":34011,"requiresChild":194,"seo":34012,"stem":34013,"__hash__":34014},"components\u002Fdocs\u002Fcomponents\u002FBend.md","Bend",{"type":8,"value":33743,"toc":34006},[33744,33747,33750,33752,33754,33757,33759,34004],[11,33745,33741],{"id":33746},"bend",[15,33748,33749],{},"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",[31771,33751],{"component":33741},[23,33753,31775],{"id":26391},[31777,33755],{":props":33756},"[{\"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,33758,31783],{"id":31782},[246,33760,33761,33806,33850,33894,33938],{":tabs":1557},[212,33762,33764],{"className":334,"code":33763,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBend>\n \u003CCircle \u002F>\n \u003C\u002FBend>\n\u003C\u002FShader>\n",[99,33765,33766,33774,33782,33790,33798],{"__ignoreMap":178},[220,33767,33768,33770,33772],{"class":222,"line":223},[220,33769,343],{"class":264},[220,33771,347],{"class":346},[220,33773,359],{"class":264},[220,33775,33776,33778,33780],{"class":222,"line":179},[220,33777,364],{"class":264},[220,33779,33741],{"class":346},[220,33781,359],{"class":264},[220,33783,33784,33786,33788],{"class":222,"line":389},[220,33785,2550],{"class":264},[220,33787,2553],{"class":346},[220,33789,386],{"class":264},[220,33791,33792,33794,33796],{"class":222,"line":399},[220,33793,2567],{"class":264},[220,33795,33741],{"class":346},[220,33797,359],{"class":264},[220,33799,33800,33802,33804],{"class":222,"line":644},[220,33801,402],{"class":264},[220,33803,347],{"class":346},[220,33805,359],{"class":264},[212,33807,33808],{"className":409,"code":33763,"language":411,"meta":178,"style":178},[99,33809,33810,33818,33826,33834,33842],{"__ignoreMap":178},[220,33811,33812,33814,33816],{"class":222,"line":223},[220,33813,343],{"class":264},[220,33815,347],{"class":420},[220,33817,359],{"class":264},[220,33819,33820,33822,33824],{"class":222,"line":179},[220,33821,364],{"class":264},[220,33823,33741],{"class":420},[220,33825,359],{"class":264},[220,33827,33828,33830,33832],{"class":222,"line":389},[220,33829,2550],{"class":264},[220,33831,2553],{"class":420},[220,33833,386],{"class":264},[220,33835,33836,33838,33840],{"class":222,"line":399},[220,33837,2567],{"class":264},[220,33839,33741],{"class":420},[220,33841,359],{"class":264},[220,33843,33844,33846,33848],{"class":222,"line":644},[220,33845,402],{"class":264},[220,33847,347],{"class":420},[220,33849,359],{"class":264},[212,33851,33852],{"className":2844,"code":33763,"language":2846,"meta":178,"style":178},[99,33853,33854,33862,33870,33878,33886],{"__ignoreMap":178},[220,33855,33856,33858,33860],{"class":222,"line":223},[220,33857,343],{"class":264},[220,33859,347],{"class":420},[220,33861,359],{"class":264},[220,33863,33864,33866,33868],{"class":222,"line":179},[220,33865,364],{"class":264},[220,33867,33741],{"class":420},[220,33869,359],{"class":264},[220,33871,33872,33874,33876],{"class":222,"line":389},[220,33873,2550],{"class":264},[220,33875,2553],{"class":420},[220,33877,386],{"class":264},[220,33879,33880,33882,33884],{"class":222,"line":399},[220,33881,2567],{"class":264},[220,33883,33741],{"class":420},[220,33885,359],{"class":264},[220,33887,33888,33890,33892],{"class":222,"line":644},[220,33889,402],{"class":264},[220,33891,347],{"class":420},[220,33893,359],{"class":264},[212,33895,33896],{"className":468,"code":33763,"language":469,"meta":178,"style":178},[99,33897,33898,33906,33914,33922,33930],{"__ignoreMap":178},[220,33899,33900,33902,33904],{"class":222,"line":223},[220,33901,343],{"class":264},[220,33903,347],{"class":420},[220,33905,359],{"class":264},[220,33907,33908,33910,33912],{"class":222,"line":179},[220,33909,364],{"class":264},[220,33911,33741],{"class":420},[220,33913,359],{"class":264},[220,33915,33916,33918,33920],{"class":222,"line":389},[220,33917,2550],{"class":264},[220,33919,2553],{"class":420},[220,33921,386],{"class":264},[220,33923,33924,33926,33928],{"class":222,"line":399},[220,33925,2567],{"class":264},[220,33927,33741],{"class":420},[220,33929,359],{"class":264},[220,33931,33932,33934,33936],{"class":222,"line":644},[220,33933,402],{"class":264},[220,33935,347],{"class":420},[220,33937,359],{"class":264},[212,33939,33941],{"className":251,"code":33940,"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,33942,33943,33953,33957,33971,33975,33984,33992,33996,34000],{"__ignoreMap":178},[220,33944,33945,33947,33949,33951],{"class":222,"line":223},[220,33946,261],{"class":260},[220,33948,11364],{"class":264},[220,33950,268],{"class":260},[220,33952,11369],{"class":230},[220,33954,33955],{"class":222,"line":179},[220,33956,647],{"emptyLinePlaceholder":194},[220,33958,33959,33961,33963,33965,33967,33969],{"class":222,"line":389},[220,33960,1735],{"class":260},[220,33962,1738],{"class":420},[220,33964,1741],{"class":260},[220,33966,1744],{"class":260},[220,33968,1747],{"class":226},[220,33970,1750],{"class":264},[220,33972,33973],{"class":222,"line":399},[220,33974,1765],{"class":264},[220,33976,33977,33979,33982],{"class":222,"line":644},[220,33978,1770],{"class":264},[220,33980,33981],{"class":230},"'Bend'",[220,33983,6860],{"class":264},[220,33985,33986,33988,33990],{"class":222,"line":650},[220,33987,6865],{"class":264},[220,33989,6409],{"class":230},[220,33991,2465],{"class":264},[220,33993,33994],{"class":222,"line":656},[220,33995,6882],{"class":264},[220,33997,33998],{"class":222,"line":673},[220,33999,1787],{"class":264},[220,34001,34002],{"class":222,"line":682},[220,34003,1792],{"class":264},[1504,34005,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":34007},[34008,34009],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbend",{"title":33741,"description":33749},"docs\u002Fcomponents\u002FBend","yTh745yjRF84KyipDFIzuYlGJcnZKEi8xan5ye79WXk",{"id":34016,"title":34017,"body":34018,"category":32923,"componentType":25734,"description":34025,"extension":191,"meta":34210,"navigation":194,"path":34211,"requiresChild":32390,"seo":34212,"stem":34213,"__hash__":34214},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":34019,"toc":34206},[34020,34023,34026,34028,34030,34033,34035,34204],[11,34021,34017],{"id":34022},"blob",[15,34024,34025],{},"Organic animated blob with 3D lighting and gradients",[31771,34027],{"component":34017},[23,34029,31775],{"id":26391},[31777,34031],{":props":34032},"[{\"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,34034,31783],{"id":31782},[246,34036,34037,34066,34094,34122,34150],{":tabs":1557},[212,34038,34040],{"className":334,"code":34039,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,34041,34042,34050,34058],{"__ignoreMap":178},[220,34043,34044,34046,34048],{"class":222,"line":223},[220,34045,343],{"class":264},[220,34047,347],{"class":346},[220,34049,359],{"class":264},[220,34051,34052,34054,34056],{"class":222,"line":179},[220,34053,364],{"class":264},[220,34055,34017],{"class":346},[220,34057,386],{"class":264},[220,34059,34060,34062,34064],{"class":222,"line":389},[220,34061,402],{"class":264},[220,34063,347],{"class":346},[220,34065,359],{"class":264},[212,34067,34068],{"className":409,"code":34039,"language":411,"meta":178,"style":178},[99,34069,34070,34078,34086],{"__ignoreMap":178},[220,34071,34072,34074,34076],{"class":222,"line":223},[220,34073,343],{"class":264},[220,34075,347],{"class":420},[220,34077,359],{"class":264},[220,34079,34080,34082,34084],{"class":222,"line":179},[220,34081,364],{"class":264},[220,34083,34017],{"class":420},[220,34085,386],{"class":264},[220,34087,34088,34090,34092],{"class":222,"line":389},[220,34089,402],{"class":264},[220,34091,347],{"class":420},[220,34093,359],{"class":264},[212,34095,34096],{"className":2844,"code":34039,"language":2846,"meta":178,"style":178},[99,34097,34098,34106,34114],{"__ignoreMap":178},[220,34099,34100,34102,34104],{"class":222,"line":223},[220,34101,343],{"class":264},[220,34103,347],{"class":420},[220,34105,359],{"class":264},[220,34107,34108,34110,34112],{"class":222,"line":179},[220,34109,364],{"class":264},[220,34111,34017],{"class":420},[220,34113,386],{"class":264},[220,34115,34116,34118,34120],{"class":222,"line":389},[220,34117,402],{"class":264},[220,34119,347],{"class":420},[220,34121,359],{"class":264},[212,34123,34124],{"className":468,"code":34039,"language":469,"meta":178,"style":178},[99,34125,34126,34134,34142],{"__ignoreMap":178},[220,34127,34128,34130,34132],{"class":222,"line":223},[220,34129,343],{"class":264},[220,34131,347],{"class":420},[220,34133,359],{"class":264},[220,34135,34136,34138,34140],{"class":222,"line":179},[220,34137,364],{"class":264},[220,34139,34017],{"class":420},[220,34141,386],{"class":264},[220,34143,34144,34146,34148],{"class":222,"line":389},[220,34145,402],{"class":264},[220,34147,347],{"class":420},[220,34149,359],{"class":264},[212,34151,34153],{"className":251,"code":34152,"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,34154,34155,34165,34169,34183,34187,34196,34200],{"__ignoreMap":178},[220,34156,34157,34159,34161,34163],{"class":222,"line":223},[220,34158,261],{"class":260},[220,34160,11364],{"class":264},[220,34162,268],{"class":260},[220,34164,11369],{"class":230},[220,34166,34167],{"class":222,"line":179},[220,34168,647],{"emptyLinePlaceholder":194},[220,34170,34171,34173,34175,34177,34179,34181],{"class":222,"line":389},[220,34172,1735],{"class":260},[220,34174,1738],{"class":420},[220,34176,1741],{"class":260},[220,34178,1744],{"class":260},[220,34180,1747],{"class":226},[220,34182,1750],{"class":264},[220,34184,34185],{"class":222,"line":399},[220,34186,1765],{"class":264},[220,34188,34189,34191,34194],{"class":222,"line":644},[220,34190,1770],{"class":264},[220,34192,34193],{"class":230},"'Blob'",[220,34195,2465],{"class":264},[220,34197,34198],{"class":222,"line":650},[220,34199,1787],{"class":264},[220,34201,34202],{"class":222,"line":656},[220,34203,1792],{"class":264},[1504,34205,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":34207},[34208,34209],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":34017,"description":34025},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":34216,"title":34217,"body":34218,"category":33533,"componentType":25740,"description":34225,"extension":191,"meta":34486,"navigation":194,"path":34487,"requiresChild":194,"seo":34488,"stem":34489,"__hash__":34490},"components\u002Fdocs\u002Fcomponents\u002FBlockDissolve.md","BlockDissolve",{"type":8,"value":34219,"toc":34482},[34220,34223,34226,34228,34230,34233,34235,34480],[11,34221,34217],{"id":34222},"blockdissolve",[15,34224,34225],{},"Dissolve the content away as a grid of blocks vanishing in random order",[31771,34227],{"component":34217},[23,34229,31775],{"id":26391},[31777,34231],{":props":34232},"[{\"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,34234,31783],{"id":31782},[246,34236,34237,34282,34326,34370,34414],{":tabs":1557},[212,34238,34240],{"className":334,"code":34239,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockDissolve>\n \u003CCircle \u002F>\n \u003C\u002FBlockDissolve>\n\u003C\u002FShader>\n",[99,34241,34242,34250,34258,34266,34274],{"__ignoreMap":178},[220,34243,34244,34246,34248],{"class":222,"line":223},[220,34245,343],{"class":264},[220,34247,347],{"class":346},[220,34249,359],{"class":264},[220,34251,34252,34254,34256],{"class":222,"line":179},[220,34253,364],{"class":264},[220,34255,34217],{"class":346},[220,34257,359],{"class":264},[220,34259,34260,34262,34264],{"class":222,"line":389},[220,34261,2550],{"class":264},[220,34263,2553],{"class":346},[220,34265,386],{"class":264},[220,34267,34268,34270,34272],{"class":222,"line":399},[220,34269,2567],{"class":264},[220,34271,34217],{"class":346},[220,34273,359],{"class":264},[220,34275,34276,34278,34280],{"class":222,"line":644},[220,34277,402],{"class":264},[220,34279,347],{"class":346},[220,34281,359],{"class":264},[212,34283,34284],{"className":409,"code":34239,"language":411,"meta":178,"style":178},[99,34285,34286,34294,34302,34310,34318],{"__ignoreMap":178},[220,34287,34288,34290,34292],{"class":222,"line":223},[220,34289,343],{"class":264},[220,34291,347],{"class":420},[220,34293,359],{"class":264},[220,34295,34296,34298,34300],{"class":222,"line":179},[220,34297,364],{"class":264},[220,34299,34217],{"class":420},[220,34301,359],{"class":264},[220,34303,34304,34306,34308],{"class":222,"line":389},[220,34305,2550],{"class":264},[220,34307,2553],{"class":420},[220,34309,386],{"class":264},[220,34311,34312,34314,34316],{"class":222,"line":399},[220,34313,2567],{"class":264},[220,34315,34217],{"class":420},[220,34317,359],{"class":264},[220,34319,34320,34322,34324],{"class":222,"line":644},[220,34321,402],{"class":264},[220,34323,347],{"class":420},[220,34325,359],{"class":264},[212,34327,34328],{"className":2844,"code":34239,"language":2846,"meta":178,"style":178},[99,34329,34330,34338,34346,34354,34362],{"__ignoreMap":178},[220,34331,34332,34334,34336],{"class":222,"line":223},[220,34333,343],{"class":264},[220,34335,347],{"class":420},[220,34337,359],{"class":264},[220,34339,34340,34342,34344],{"class":222,"line":179},[220,34341,364],{"class":264},[220,34343,34217],{"class":420},[220,34345,359],{"class":264},[220,34347,34348,34350,34352],{"class":222,"line":389},[220,34349,2550],{"class":264},[220,34351,2553],{"class":420},[220,34353,386],{"class":264},[220,34355,34356,34358,34360],{"class":222,"line":399},[220,34357,2567],{"class":264},[220,34359,34217],{"class":420},[220,34361,359],{"class":264},[220,34363,34364,34366,34368],{"class":222,"line":644},[220,34365,402],{"class":264},[220,34367,347],{"class":420},[220,34369,359],{"class":264},[212,34371,34372],{"className":468,"code":34239,"language":469,"meta":178,"style":178},[99,34373,34374,34382,34390,34398,34406],{"__ignoreMap":178},[220,34375,34376,34378,34380],{"class":222,"line":223},[220,34377,343],{"class":264},[220,34379,347],{"class":420},[220,34381,359],{"class":264},[220,34383,34384,34386,34388],{"class":222,"line":179},[220,34385,364],{"class":264},[220,34387,34217],{"class":420},[220,34389,359],{"class":264},[220,34391,34392,34394,34396],{"class":222,"line":389},[220,34393,2550],{"class":264},[220,34395,2553],{"class":420},[220,34397,386],{"class":264},[220,34399,34400,34402,34404],{"class":222,"line":399},[220,34401,2567],{"class":264},[220,34403,34217],{"class":420},[220,34405,359],{"class":264},[220,34407,34408,34410,34412],{"class":222,"line":644},[220,34409,402],{"class":264},[220,34411,347],{"class":420},[220,34413,359],{"class":264},[212,34415,34417],{"className":251,"code":34416,"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,34418,34419,34429,34433,34447,34451,34460,34468,34472,34476],{"__ignoreMap":178},[220,34420,34421,34423,34425,34427],{"class":222,"line":223},[220,34422,261],{"class":260},[220,34424,11364],{"class":264},[220,34426,268],{"class":260},[220,34428,11369],{"class":230},[220,34430,34431],{"class":222,"line":179},[220,34432,647],{"emptyLinePlaceholder":194},[220,34434,34435,34437,34439,34441,34443,34445],{"class":222,"line":389},[220,34436,1735],{"class":260},[220,34438,1738],{"class":420},[220,34440,1741],{"class":260},[220,34442,1744],{"class":260},[220,34444,1747],{"class":226},[220,34446,1750],{"class":264},[220,34448,34449],{"class":222,"line":399},[220,34450,1765],{"class":264},[220,34452,34453,34455,34458],{"class":222,"line":644},[220,34454,1770],{"class":264},[220,34456,34457],{"class":230},"'BlockDissolve'",[220,34459,6860],{"class":264},[220,34461,34462,34464,34466],{"class":222,"line":650},[220,34463,6865],{"class":264},[220,34465,6409],{"class":230},[220,34467,2465],{"class":264},[220,34469,34470],{"class":222,"line":656},[220,34471,6882],{"class":264},[220,34473,34474],{"class":222,"line":673},[220,34475,1787],{"class":264},[220,34477,34478],{"class":222,"line":682},[220,34479,1792],{"class":264},[1504,34481,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":34483},[34484,34485],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fblockdissolve",{"title":34217,"description":34225},"docs\u002Fcomponents\u002FBlockDissolve","eek109j_YYMANDpv7x-fWVWd060AWX7s6NXkZk6R6zE",{"id":34492,"title":34493,"body":34494,"category":32923,"componentType":25734,"description":34501,"extension":191,"meta":34686,"navigation":194,"path":34687,"requiresChild":32390,"seo":34688,"stem":34689,"__hash__":34690},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":34495,"toc":34682},[34496,34499,34502,34504,34506,34509,34511,34680],[11,34497,34493],{"id":34498},"blocknoise",[15,34500,34501],{},"Blocky value noise with soft cells that morph over time",[31771,34503],{"component":34493},[23,34505,31775],{"id":26391},[31777,34507],{":props":34508},"[{\"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,34510,31783],{"id":31782},[246,34512,34513,34542,34570,34598,34626],{":tabs":1557},[212,34514,34516],{"className":334,"code":34515,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,34517,34518,34526,34534],{"__ignoreMap":178},[220,34519,34520,34522,34524],{"class":222,"line":223},[220,34521,343],{"class":264},[220,34523,347],{"class":346},[220,34525,359],{"class":264},[220,34527,34528,34530,34532],{"class":222,"line":179},[220,34529,364],{"class":264},[220,34531,34493],{"class":346},[220,34533,386],{"class":264},[220,34535,34536,34538,34540],{"class":222,"line":389},[220,34537,402],{"class":264},[220,34539,347],{"class":346},[220,34541,359],{"class":264},[212,34543,34544],{"className":409,"code":34515,"language":411,"meta":178,"style":178},[99,34545,34546,34554,34562],{"__ignoreMap":178},[220,34547,34548,34550,34552],{"class":222,"line":223},[220,34549,343],{"class":264},[220,34551,347],{"class":420},[220,34553,359],{"class":264},[220,34555,34556,34558,34560],{"class":222,"line":179},[220,34557,364],{"class":264},[220,34559,34493],{"class":420},[220,34561,386],{"class":264},[220,34563,34564,34566,34568],{"class":222,"line":389},[220,34565,402],{"class":264},[220,34567,347],{"class":420},[220,34569,359],{"class":264},[212,34571,34572],{"className":2844,"code":34515,"language":2846,"meta":178,"style":178},[99,34573,34574,34582,34590],{"__ignoreMap":178},[220,34575,34576,34578,34580],{"class":222,"line":223},[220,34577,343],{"class":264},[220,34579,347],{"class":420},[220,34581,359],{"class":264},[220,34583,34584,34586,34588],{"class":222,"line":179},[220,34585,364],{"class":264},[220,34587,34493],{"class":420},[220,34589,386],{"class":264},[220,34591,34592,34594,34596],{"class":222,"line":389},[220,34593,402],{"class":264},[220,34595,347],{"class":420},[220,34597,359],{"class":264},[212,34599,34600],{"className":468,"code":34515,"language":469,"meta":178,"style":178},[99,34601,34602,34610,34618],{"__ignoreMap":178},[220,34603,34604,34606,34608],{"class":222,"line":223},[220,34605,343],{"class":264},[220,34607,347],{"class":420},[220,34609,359],{"class":264},[220,34611,34612,34614,34616],{"class":222,"line":179},[220,34613,364],{"class":264},[220,34615,34493],{"class":420},[220,34617,386],{"class":264},[220,34619,34620,34622,34624],{"class":222,"line":389},[220,34621,402],{"class":264},[220,34623,347],{"class":420},[220,34625,359],{"class":264},[212,34627,34629],{"className":251,"code":34628,"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,34630,34631,34641,34645,34659,34663,34672,34676],{"__ignoreMap":178},[220,34632,34633,34635,34637,34639],{"class":222,"line":223},[220,34634,261],{"class":260},[220,34636,11364],{"class":264},[220,34638,268],{"class":260},[220,34640,11369],{"class":230},[220,34642,34643],{"class":222,"line":179},[220,34644,647],{"emptyLinePlaceholder":194},[220,34646,34647,34649,34651,34653,34655,34657],{"class":222,"line":389},[220,34648,1735],{"class":260},[220,34650,1738],{"class":420},[220,34652,1741],{"class":260},[220,34654,1744],{"class":260},[220,34656,1747],{"class":226},[220,34658,1750],{"class":264},[220,34660,34661],{"class":222,"line":399},[220,34662,1765],{"class":264},[220,34664,34665,34667,34670],{"class":222,"line":644},[220,34666,1770],{"class":264},[220,34668,34669],{"class":230},"'BlockNoise'",[220,34671,2465],{"class":264},[220,34673,34674],{"class":222,"line":650},[220,34675,1787],{"class":264},[220,34677,34678],{"class":222,"line":656},[220,34679,1792],{"class":264},[1504,34681,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":34683},[34684,34685],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":34493,"description":34501},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":34692,"title":34693,"body":34694,"category":32923,"componentType":25734,"description":34701,"extension":191,"meta":34886,"navigation":194,"path":34887,"requiresChild":32390,"seo":34888,"stem":34889,"__hash__":34890},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":34695,"toc":34882},[34696,34699,34702,34704,34706,34709,34711,34880],[11,34697,34693],{"id":34698},"bluenoise",[15,34700,34701],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[31771,34703],{"component":34693},[23,34705,31775],{"id":26391},[31777,34707],{":props":34708},"[{\"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,34710,31783],{"id":31782},[246,34712,34713,34742,34770,34798,34826],{":tabs":1557},[212,34714,34716],{"className":334,"code":34715,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,34717,34718,34726,34734],{"__ignoreMap":178},[220,34719,34720,34722,34724],{"class":222,"line":223},[220,34721,343],{"class":264},[220,34723,347],{"class":346},[220,34725,359],{"class":264},[220,34727,34728,34730,34732],{"class":222,"line":179},[220,34729,364],{"class":264},[220,34731,34693],{"class":346},[220,34733,386],{"class":264},[220,34735,34736,34738,34740],{"class":222,"line":389},[220,34737,402],{"class":264},[220,34739,347],{"class":346},[220,34741,359],{"class":264},[212,34743,34744],{"className":409,"code":34715,"language":411,"meta":178,"style":178},[99,34745,34746,34754,34762],{"__ignoreMap":178},[220,34747,34748,34750,34752],{"class":222,"line":223},[220,34749,343],{"class":264},[220,34751,347],{"class":420},[220,34753,359],{"class":264},[220,34755,34756,34758,34760],{"class":222,"line":179},[220,34757,364],{"class":264},[220,34759,34693],{"class":420},[220,34761,386],{"class":264},[220,34763,34764,34766,34768],{"class":222,"line":389},[220,34765,402],{"class":264},[220,34767,347],{"class":420},[220,34769,359],{"class":264},[212,34771,34772],{"className":2844,"code":34715,"language":2846,"meta":178,"style":178},[99,34773,34774,34782,34790],{"__ignoreMap":178},[220,34775,34776,34778,34780],{"class":222,"line":223},[220,34777,343],{"class":264},[220,34779,347],{"class":420},[220,34781,359],{"class":264},[220,34783,34784,34786,34788],{"class":222,"line":179},[220,34785,364],{"class":264},[220,34787,34693],{"class":420},[220,34789,386],{"class":264},[220,34791,34792,34794,34796],{"class":222,"line":389},[220,34793,402],{"class":264},[220,34795,347],{"class":420},[220,34797,359],{"class":264},[212,34799,34800],{"className":468,"code":34715,"language":469,"meta":178,"style":178},[99,34801,34802,34810,34818],{"__ignoreMap":178},[220,34803,34804,34806,34808],{"class":222,"line":223},[220,34805,343],{"class":264},[220,34807,347],{"class":420},[220,34809,359],{"class":264},[220,34811,34812,34814,34816],{"class":222,"line":179},[220,34813,364],{"class":264},[220,34815,34693],{"class":420},[220,34817,386],{"class":264},[220,34819,34820,34822,34824],{"class":222,"line":389},[220,34821,402],{"class":264},[220,34823,347],{"class":420},[220,34825,359],{"class":264},[212,34827,34829],{"className":251,"code":34828,"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,34830,34831,34841,34845,34859,34863,34872,34876],{"__ignoreMap":178},[220,34832,34833,34835,34837,34839],{"class":222,"line":223},[220,34834,261],{"class":260},[220,34836,11364],{"class":264},[220,34838,268],{"class":260},[220,34840,11369],{"class":230},[220,34842,34843],{"class":222,"line":179},[220,34844,647],{"emptyLinePlaceholder":194},[220,34846,34847,34849,34851,34853,34855,34857],{"class":222,"line":389},[220,34848,1735],{"class":260},[220,34850,1738],{"class":420},[220,34852,1741],{"class":260},[220,34854,1744],{"class":260},[220,34856,1747],{"class":226},[220,34858,1750],{"class":264},[220,34860,34861],{"class":222,"line":399},[220,34862,1765],{"class":264},[220,34864,34865,34867,34870],{"class":222,"line":644},[220,34866,1770],{"class":264},[220,34868,34869],{"class":230},"'BlueNoise'",[220,34871,2465],{"class":264},[220,34873,34874],{"class":222,"line":650},[220,34875,1787],{"class":264},[220,34877,34878],{"class":222,"line":656},[220,34879,1792],{"class":264},[1504,34881,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":34883},[34884,34885],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":34693,"description":34701},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":34892,"title":11622,"body":34893,"category":32094,"componentType":25740,"description":34900,"extension":191,"meta":35219,"navigation":194,"path":35220,"requiresChild":194,"seo":35221,"stem":35222,"__hash__":35223},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":34894,"toc":35215},[34895,34898,34901,34903,34905,34908,34910,35213],[11,34896,11622],{"id":34897},"blur",[15,34899,34900],{},"A simple Gaussian blur effect",[31771,34902],{"component":11622},[23,34904,31775],{"id":26391},[31777,34906],{":props":34907},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,34909,31783],{"id":31782},[246,34911,34912,34969,35029,35085,35143],{":tabs":1557},[212,34913,34915],{"className":334,"code":34914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,34916,34917,34925,34932,34941,34945,34953,34961],{"__ignoreMap":178},[220,34918,34919,34921,34923],{"class":222,"line":223},[220,34920,343],{"class":264},[220,34922,347],{"class":346},[220,34924,359],{"class":264},[220,34926,34927,34929],{"class":222,"line":179},[220,34928,364],{"class":264},[220,34930,34931],{"class":346},"Blur\n",[220,34933,34934,34936,34938],{"class":222,"line":389},[220,34935,20228],{"class":226},[220,34937,353],{"class":264},[220,34939,34940],{"class":230},"\"50\"\n",[220,34942,34943],{"class":222,"line":399},[220,34944,31819],{"class":264},[220,34946,34947,34949,34951],{"class":222,"line":644},[220,34948,2550],{"class":264},[220,34950,2553],{"class":346},[220,34952,386],{"class":264},[220,34954,34955,34957,34959],{"class":222,"line":650},[220,34956,2567],{"class":264},[220,34958,11622],{"class":346},[220,34960,359],{"class":264},[220,34962,34963,34965,34967],{"class":222,"line":656},[220,34964,402],{"class":264},[220,34966,347],{"class":346},[220,34968,359],{"class":264},[212,34970,34972],{"className":409,"code":34971,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,34973,34974,34982,34988,35001,35005,35013,35021],{"__ignoreMap":178},[220,34975,34976,34978,34980],{"class":222,"line":223},[220,34977,343],{"class":264},[220,34979,347],{"class":420},[220,34981,359],{"class":264},[220,34983,34984,34986],{"class":222,"line":179},[220,34985,364],{"class":264},[220,34987,34931],{"class":420},[220,34989,34990,34992,34994,34996,34999],{"class":222,"line":389},[220,34991,20339],{"class":226},[220,34993,353],{"class":260},[220,34995,743],{"class":264},[220,34997,34998],{"class":420},"50",[220,35000,749],{"class":264},[220,35002,35003],{"class":222,"line":399},[220,35004,31819],{"class":264},[220,35006,35007,35009,35011],{"class":222,"line":644},[220,35008,2550],{"class":264},[220,35010,2553],{"class":420},[220,35012,386],{"class":264},[220,35014,35015,35017,35019],{"class":222,"line":650},[220,35016,2567],{"class":264},[220,35018,11622],{"class":420},[220,35020,359],{"class":264},[220,35022,35023,35025,35027],{"class":222,"line":656},[220,35024,402],{"class":264},[220,35026,347],{"class":420},[220,35028,359],{"class":264},[212,35030,35031],{"className":2844,"code":34971,"language":2846,"meta":178,"style":178},[99,35032,35033,35041,35047,35057,35061,35069,35077],{"__ignoreMap":178},[220,35034,35035,35037,35039],{"class":222,"line":223},[220,35036,343],{"class":264},[220,35038,347],{"class":420},[220,35040,359],{"class":264},[220,35042,35043,35045],{"class":222,"line":179},[220,35044,364],{"class":264},[220,35046,34931],{"class":420},[220,35048,35049,35051,35053,35055],{"class":222,"line":389},[220,35050,20339],{"class":226},[220,35052,29729],{"class":264},[220,35054,34998],{"class":420},[220,35056,749],{"class":264},[220,35058,35059],{"class":222,"line":399},[220,35060,31819],{"class":264},[220,35062,35063,35065,35067],{"class":222,"line":644},[220,35064,2550],{"class":264},[220,35066,2553],{"class":420},[220,35068,386],{"class":264},[220,35070,35071,35073,35075],{"class":222,"line":650},[220,35072,2567],{"class":264},[220,35074,11622],{"class":420},[220,35076,359],{"class":264},[220,35078,35079,35081,35083],{"class":222,"line":656},[220,35080,402],{"class":264},[220,35082,347],{"class":420},[220,35084,359],{"class":264},[212,35086,35087],{"className":468,"code":34971,"language":469,"meta":178,"style":178},[99,35088,35089,35097,35103,35115,35119,35127,35135],{"__ignoreMap":178},[220,35090,35091,35093,35095],{"class":222,"line":223},[220,35092,343],{"class":264},[220,35094,347],{"class":420},[220,35096,359],{"class":264},[220,35098,35099,35101],{"class":222,"line":179},[220,35100,364],{"class":264},[220,35102,34931],{"class":420},[220,35104,35105,35107,35109,35111,35113],{"class":222,"line":389},[220,35106,20339],{"class":226},[220,35108,353],{"class":260},[220,35110,743],{"class":264},[220,35112,34998],{"class":420},[220,35114,749],{"class":264},[220,35116,35117],{"class":222,"line":399},[220,35118,31819],{"class":264},[220,35120,35121,35123,35125],{"class":222,"line":644},[220,35122,2550],{"class":264},[220,35124,2553],{"class":420},[220,35126,386],{"class":264},[220,35128,35129,35131,35133],{"class":222,"line":650},[220,35130,2567],{"class":264},[220,35132,11622],{"class":420},[220,35134,359],{"class":264},[220,35136,35137,35139,35141],{"class":222,"line":656},[220,35138,402],{"class":264},[220,35140,347],{"class":420},[220,35142,359],{"class":264},[212,35144,35146],{"className":251,"code":35145,"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,35147,35148,35158,35162,35176,35180,35193,35201,35205,35209],{"__ignoreMap":178},[220,35149,35150,35152,35154,35156],{"class":222,"line":223},[220,35151,261],{"class":260},[220,35153,11364],{"class":264},[220,35155,268],{"class":260},[220,35157,11369],{"class":230},[220,35159,35160],{"class":222,"line":179},[220,35161,647],{"emptyLinePlaceholder":194},[220,35163,35164,35166,35168,35170,35172,35174],{"class":222,"line":389},[220,35165,1735],{"class":260},[220,35167,1738],{"class":420},[220,35169,1741],{"class":260},[220,35171,1744],{"class":260},[220,35173,1747],{"class":226},[220,35175,1750],{"class":264},[220,35177,35178],{"class":222,"line":399},[220,35179,1765],{"class":264},[220,35181,35182,35184,35187,35189,35191],{"class":222,"line":644},[220,35183,1770],{"class":264},[220,35185,35186],{"class":230},"'Blur'",[220,35188,32063],{"class":264},[220,35190,34998],{"class":420},[220,35192,7397],{"class":264},[220,35194,35195,35197,35199],{"class":222,"line":650},[220,35196,6865],{"class":264},[220,35198,6409],{"class":230},[220,35200,2465],{"class":264},[220,35202,35203],{"class":222,"line":656},[220,35204,6882],{"class":264},[220,35206,35207],{"class":222,"line":673},[220,35208,1787],{"class":264},[220,35210,35211],{"class":222,"line":682},[220,35212,1792],{"class":264},[1504,35214,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35216},[35217,35218],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":11622,"description":34900},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":35225,"title":35226,"body":35227,"category":35419,"componentType":25734,"description":35234,"extension":191,"meta":35420,"navigation":194,"path":35421,"requiresChild":32390,"seo":35422,"stem":35423,"__hash__":35424},"components\u002Fdocs\u002Fcomponents\u002FBoids.md","Boids",{"type":8,"value":35228,"toc":35415},[35229,35232,35235,35237,35239,35242,35244,35413],[11,35230,35226],{"id":35231},"boids",[15,35233,35234],{},"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",[31771,35236],{"component":35226},[23,35238,31775],{"id":26391},[31777,35240],{":props":35241},"[{\"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,35243,31783],{"id":31782},[246,35245,35246,35275,35303,35331,35359],{":tabs":1557},[212,35247,35249],{"className":334,"code":35248,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBoids \u002F>\n\u003C\u002FShader>\n",[99,35250,35251,35259,35267],{"__ignoreMap":178},[220,35252,35253,35255,35257],{"class":222,"line":223},[220,35254,343],{"class":264},[220,35256,347],{"class":346},[220,35258,359],{"class":264},[220,35260,35261,35263,35265],{"class":222,"line":179},[220,35262,364],{"class":264},[220,35264,35226],{"class":346},[220,35266,386],{"class":264},[220,35268,35269,35271,35273],{"class":222,"line":389},[220,35270,402],{"class":264},[220,35272,347],{"class":346},[220,35274,359],{"class":264},[212,35276,35277],{"className":409,"code":35248,"language":411,"meta":178,"style":178},[99,35278,35279,35287,35295],{"__ignoreMap":178},[220,35280,35281,35283,35285],{"class":222,"line":223},[220,35282,343],{"class":264},[220,35284,347],{"class":420},[220,35286,359],{"class":264},[220,35288,35289,35291,35293],{"class":222,"line":179},[220,35290,364],{"class":264},[220,35292,35226],{"class":420},[220,35294,386],{"class":264},[220,35296,35297,35299,35301],{"class":222,"line":389},[220,35298,402],{"class":264},[220,35300,347],{"class":420},[220,35302,359],{"class":264},[212,35304,35305],{"className":2844,"code":35248,"language":2846,"meta":178,"style":178},[99,35306,35307,35315,35323],{"__ignoreMap":178},[220,35308,35309,35311,35313],{"class":222,"line":223},[220,35310,343],{"class":264},[220,35312,347],{"class":420},[220,35314,359],{"class":264},[220,35316,35317,35319,35321],{"class":222,"line":179},[220,35318,364],{"class":264},[220,35320,35226],{"class":420},[220,35322,386],{"class":264},[220,35324,35325,35327,35329],{"class":222,"line":389},[220,35326,402],{"class":264},[220,35328,347],{"class":420},[220,35330,359],{"class":264},[212,35332,35333],{"className":468,"code":35248,"language":469,"meta":178,"style":178},[99,35334,35335,35343,35351],{"__ignoreMap":178},[220,35336,35337,35339,35341],{"class":222,"line":223},[220,35338,343],{"class":264},[220,35340,347],{"class":420},[220,35342,359],{"class":264},[220,35344,35345,35347,35349],{"class":222,"line":179},[220,35346,364],{"class":264},[220,35348,35226],{"class":420},[220,35350,386],{"class":264},[220,35352,35353,35355,35357],{"class":222,"line":389},[220,35354,402],{"class":264},[220,35356,347],{"class":420},[220,35358,359],{"class":264},[212,35360,35362],{"className":251,"code":35361,"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,35363,35364,35374,35378,35392,35396,35405,35409],{"__ignoreMap":178},[220,35365,35366,35368,35370,35372],{"class":222,"line":223},[220,35367,261],{"class":260},[220,35369,11364],{"class":264},[220,35371,268],{"class":260},[220,35373,11369],{"class":230},[220,35375,35376],{"class":222,"line":179},[220,35377,647],{"emptyLinePlaceholder":194},[220,35379,35380,35382,35384,35386,35388,35390],{"class":222,"line":389},[220,35381,1735],{"class":260},[220,35383,1738],{"class":420},[220,35385,1741],{"class":260},[220,35387,1744],{"class":260},[220,35389,1747],{"class":226},[220,35391,1750],{"class":264},[220,35393,35394],{"class":222,"line":399},[220,35395,1765],{"class":264},[220,35397,35398,35400,35403],{"class":222,"line":644},[220,35399,1770],{"class":264},[220,35401,35402],{"class":230},"'Boids'",[220,35404,2465],{"class":264},[220,35406,35407],{"class":222,"line":650},[220,35408,1787],{"class":264},[220,35410,35411],{"class":222,"line":656},[220,35412,1792],{"class":264},[1504,35414,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":35416},[35417,35418],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fboids",{"title":35226,"description":35234},"docs\u002Fcomponents\u002FBoids","hdhqsDQg5KnzNA_UfsNUlag4VVQ8bEJ7WQJ5TSK_WTs",{"id":35426,"title":35427,"body":35428,"category":32094,"componentType":25740,"description":35435,"extension":191,"meta":35752,"navigation":194,"path":35753,"requiresChild":194,"seo":35754,"stem":35755,"__hash__":35756},"components\u002Fdocs\u002Fcomponents\u002FBokehBlur.md","BokehBlur",{"type":8,"value":35429,"toc":35748},[35430,35433,35436,35438,35440,35443,35445,35746],[11,35431,35427],{"id":35432},"bokehblur",[15,35434,35435],{},"Photographic lens blur where bright highlights bloom into aperture-shaped discs",[31771,35437],{"component":35427},[23,35439,31775],{"id":26391},[31777,35441],{":props":35442},"[{\"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,35444,31783],{"id":31782},[246,35446,35447,35503,35562,35618,35676],{":tabs":1557},[212,35448,35450],{"className":334,"code":35449,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n :radius=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35451,35452,35460,35467,35475,35479,35487,35495],{"__ignoreMap":178},[220,35453,35454,35456,35458],{"class":222,"line":223},[220,35455,343],{"class":264},[220,35457,347],{"class":346},[220,35459,359],{"class":264},[220,35461,35462,35464],{"class":222,"line":179},[220,35463,364],{"class":264},[220,35465,35466],{"class":346},"BokehBlur\n",[220,35468,35469,35471,35473],{"class":222,"line":389},[220,35470,17262],{"class":226},[220,35472,353],{"class":264},[220,35474,34940],{"class":230},[220,35476,35477],{"class":222,"line":399},[220,35478,31819],{"class":264},[220,35480,35481,35483,35485],{"class":222,"line":644},[220,35482,2550],{"class":264},[220,35484,2553],{"class":346},[220,35486,386],{"class":264},[220,35488,35489,35491,35493],{"class":222,"line":650},[220,35490,2567],{"class":264},[220,35492,35427],{"class":346},[220,35494,359],{"class":264},[220,35496,35497,35499,35501],{"class":222,"line":656},[220,35498,402],{"class":264},[220,35500,347],{"class":346},[220,35502,359],{"class":264},[212,35504,35506],{"className":409,"code":35505,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n radius={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35507,35508,35516,35522,35534,35538,35546,35554],{"__ignoreMap":178},[220,35509,35510,35512,35514],{"class":222,"line":223},[220,35511,343],{"class":264},[220,35513,347],{"class":420},[220,35515,359],{"class":264},[220,35517,35518,35520],{"class":222,"line":179},[220,35519,364],{"class":264},[220,35521,35466],{"class":420},[220,35523,35524,35526,35528,35530,35532],{"class":222,"line":389},[220,35525,9497],{"class":226},[220,35527,353],{"class":260},[220,35529,743],{"class":264},[220,35531,34998],{"class":420},[220,35533,749],{"class":264},[220,35535,35536],{"class":222,"line":399},[220,35537,31819],{"class":264},[220,35539,35540,35542,35544],{"class":222,"line":644},[220,35541,2550],{"class":264},[220,35543,2553],{"class":420},[220,35545,386],{"class":264},[220,35547,35548,35550,35552],{"class":222,"line":650},[220,35549,2567],{"class":264},[220,35551,35427],{"class":420},[220,35553,359],{"class":264},[220,35555,35556,35558,35560],{"class":222,"line":656},[220,35557,402],{"class":264},[220,35559,347],{"class":420},[220,35561,359],{"class":264},[212,35563,35564],{"className":2844,"code":35505,"language":2846,"meta":178,"style":178},[99,35565,35566,35574,35580,35590,35594,35602,35610],{"__ignoreMap":178},[220,35567,35568,35570,35572],{"class":222,"line":223},[220,35569,343],{"class":264},[220,35571,347],{"class":420},[220,35573,359],{"class":264},[220,35575,35576,35578],{"class":222,"line":179},[220,35577,364],{"class":264},[220,35579,35466],{"class":420},[220,35581,35582,35584,35586,35588],{"class":222,"line":389},[220,35583,9497],{"class":226},[220,35585,29729],{"class":264},[220,35587,34998],{"class":420},[220,35589,749],{"class":264},[220,35591,35592],{"class":222,"line":399},[220,35593,31819],{"class":264},[220,35595,35596,35598,35600],{"class":222,"line":644},[220,35597,2550],{"class":264},[220,35599,2553],{"class":420},[220,35601,386],{"class":264},[220,35603,35604,35606,35608],{"class":222,"line":650},[220,35605,2567],{"class":264},[220,35607,35427],{"class":420},[220,35609,359],{"class":264},[220,35611,35612,35614,35616],{"class":222,"line":656},[220,35613,402],{"class":264},[220,35615,347],{"class":420},[220,35617,359],{"class":264},[212,35619,35620],{"className":468,"code":35505,"language":469,"meta":178,"style":178},[99,35621,35622,35630,35636,35648,35652,35660,35668],{"__ignoreMap":178},[220,35623,35624,35626,35628],{"class":222,"line":223},[220,35625,343],{"class":264},[220,35627,347],{"class":420},[220,35629,359],{"class":264},[220,35631,35632,35634],{"class":222,"line":179},[220,35633,364],{"class":264},[220,35635,35466],{"class":420},[220,35637,35638,35640,35642,35644,35646],{"class":222,"line":389},[220,35639,9497],{"class":226},[220,35641,353],{"class":260},[220,35643,743],{"class":264},[220,35645,34998],{"class":420},[220,35647,749],{"class":264},[220,35649,35650],{"class":222,"line":399},[220,35651,31819],{"class":264},[220,35653,35654,35656,35658],{"class":222,"line":644},[220,35655,2550],{"class":264},[220,35657,2553],{"class":420},[220,35659,386],{"class":264},[220,35661,35662,35664,35666],{"class":222,"line":650},[220,35663,2567],{"class":264},[220,35665,35427],{"class":420},[220,35667,359],{"class":264},[220,35669,35670,35672,35674],{"class":222,"line":656},[220,35671,402],{"class":264},[220,35673,347],{"class":420},[220,35675,359],{"class":264},[212,35677,35679],{"className":251,"code":35678,"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,35680,35681,35691,35695,35709,35713,35726,35734,35738,35742],{"__ignoreMap":178},[220,35682,35683,35685,35687,35689],{"class":222,"line":223},[220,35684,261],{"class":260},[220,35686,11364],{"class":264},[220,35688,268],{"class":260},[220,35690,11369],{"class":230},[220,35692,35693],{"class":222,"line":179},[220,35694,647],{"emptyLinePlaceholder":194},[220,35696,35697,35699,35701,35703,35705,35707],{"class":222,"line":389},[220,35698,1735],{"class":260},[220,35700,1738],{"class":420},[220,35702,1741],{"class":260},[220,35704,1744],{"class":260},[220,35706,1747],{"class":226},[220,35708,1750],{"class":264},[220,35710,35711],{"class":222,"line":399},[220,35712,1765],{"class":264},[220,35714,35715,35717,35720,35722,35724],{"class":222,"line":644},[220,35716,1770],{"class":264},[220,35718,35719],{"class":230},"'BokehBlur'",[220,35721,7392],{"class":264},[220,35723,34998],{"class":420},[220,35725,7397],{"class":264},[220,35727,35728,35730,35732],{"class":222,"line":650},[220,35729,6865],{"class":264},[220,35731,6409],{"class":230},[220,35733,2465],{"class":264},[220,35735,35736],{"class":222,"line":656},[220,35737,6882],{"class":264},[220,35739,35740],{"class":222,"line":673},[220,35741,1787],{"class":264},[220,35743,35744],{"class":222,"line":682},[220,35745,1792],{"class":264},[1504,35747,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35749},[35750,35751],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbokehblur",{"title":35427,"description":35435},"docs\u002Fcomponents\u002FBokehBlur","UvgWoVz1msLk-OLpiNCYNxzzxY6uC56cKmY-6PdjJas",{"id":35758,"title":35759,"body":35760,"category":32923,"componentType":25734,"description":35767,"extension":191,"meta":35952,"navigation":194,"path":35953,"requiresChild":32390,"seo":35954,"stem":35955,"__hash__":35956},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":35761,"toc":35948},[35762,35765,35768,35770,35772,35775,35777,35946],[11,35763,35759],{"id":35764},"brickpattern",[15,35766,35767],{},"Classic brick wall pattern with alternating rows and mortar gaps",[31771,35769],{"component":35759},[23,35771,31775],{"id":26391},[31777,35773],{":props":35774},"[{\"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,35776,31783],{"id":31782},[246,35778,35779,35808,35836,35864,35892],{":tabs":1557},[212,35780,35782],{"className":334,"code":35781,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,35783,35784,35792,35800],{"__ignoreMap":178},[220,35785,35786,35788,35790],{"class":222,"line":223},[220,35787,343],{"class":264},[220,35789,347],{"class":346},[220,35791,359],{"class":264},[220,35793,35794,35796,35798],{"class":222,"line":179},[220,35795,364],{"class":264},[220,35797,35759],{"class":346},[220,35799,386],{"class":264},[220,35801,35802,35804,35806],{"class":222,"line":389},[220,35803,402],{"class":264},[220,35805,347],{"class":346},[220,35807,359],{"class":264},[212,35809,35810],{"className":409,"code":35781,"language":411,"meta":178,"style":178},[99,35811,35812,35820,35828],{"__ignoreMap":178},[220,35813,35814,35816,35818],{"class":222,"line":223},[220,35815,343],{"class":264},[220,35817,347],{"class":420},[220,35819,359],{"class":264},[220,35821,35822,35824,35826],{"class":222,"line":179},[220,35823,364],{"class":264},[220,35825,35759],{"class":420},[220,35827,386],{"class":264},[220,35829,35830,35832,35834],{"class":222,"line":389},[220,35831,402],{"class":264},[220,35833,347],{"class":420},[220,35835,359],{"class":264},[212,35837,35838],{"className":2844,"code":35781,"language":2846,"meta":178,"style":178},[99,35839,35840,35848,35856],{"__ignoreMap":178},[220,35841,35842,35844,35846],{"class":222,"line":223},[220,35843,343],{"class":264},[220,35845,347],{"class":420},[220,35847,359],{"class":264},[220,35849,35850,35852,35854],{"class":222,"line":179},[220,35851,364],{"class":264},[220,35853,35759],{"class":420},[220,35855,386],{"class":264},[220,35857,35858,35860,35862],{"class":222,"line":389},[220,35859,402],{"class":264},[220,35861,347],{"class":420},[220,35863,359],{"class":264},[212,35865,35866],{"className":468,"code":35781,"language":469,"meta":178,"style":178},[99,35867,35868,35876,35884],{"__ignoreMap":178},[220,35869,35870,35872,35874],{"class":222,"line":223},[220,35871,343],{"class":264},[220,35873,347],{"class":420},[220,35875,359],{"class":264},[220,35877,35878,35880,35882],{"class":222,"line":179},[220,35879,364],{"class":264},[220,35881,35759],{"class":420},[220,35883,386],{"class":264},[220,35885,35886,35888,35890],{"class":222,"line":389},[220,35887,402],{"class":264},[220,35889,347],{"class":420},[220,35891,359],{"class":264},[212,35893,35895],{"className":251,"code":35894,"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,35896,35897,35907,35911,35925,35929,35938,35942],{"__ignoreMap":178},[220,35898,35899,35901,35903,35905],{"class":222,"line":223},[220,35900,261],{"class":260},[220,35902,11364],{"class":264},[220,35904,268],{"class":260},[220,35906,11369],{"class":230},[220,35908,35909],{"class":222,"line":179},[220,35910,647],{"emptyLinePlaceholder":194},[220,35912,35913,35915,35917,35919,35921,35923],{"class":222,"line":389},[220,35914,1735],{"class":260},[220,35916,1738],{"class":420},[220,35918,1741],{"class":260},[220,35920,1744],{"class":260},[220,35922,1747],{"class":226},[220,35924,1750],{"class":264},[220,35926,35927],{"class":222,"line":399},[220,35928,1765],{"class":264},[220,35930,35931,35933,35936],{"class":222,"line":644},[220,35932,1770],{"class":264},[220,35934,35935],{"class":230},"'BrickPattern'",[220,35937,2465],{"class":264},[220,35939,35940],{"class":222,"line":650},[220,35941,1787],{"class":264},[220,35943,35944],{"class":222,"line":656},[220,35945,1792],{"class":264},[1504,35947,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":35949},[35950,35951],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":35759,"description":35767},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":35958,"title":35959,"body":35960,"category":36228,"componentType":25740,"description":35967,"extension":191,"meta":36229,"navigation":194,"path":36230,"requiresChild":194,"seo":36231,"stem":36232,"__hash__":36233},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":35961,"toc":36224},[35962,35965,35968,35970,35972,35975,35977,36222],[11,35963,35959],{"id":35964},"brightnesscontrast",[15,35966,35967],{},"Adjust brightness and contrast of the image",[31771,35969],{"component":35959},[23,35971,31775],{"id":26391},[31777,35973],{":props":35974},"[{\"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,35976,31783],{"id":31782},[246,35978,35979,36024,36068,36112,36156],{":tabs":1557},[212,35980,35982],{"className":334,"code":35981,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,35983,35984,35992,36000,36008,36016],{"__ignoreMap":178},[220,35985,35986,35988,35990],{"class":222,"line":223},[220,35987,343],{"class":264},[220,35989,347],{"class":346},[220,35991,359],{"class":264},[220,35993,35994,35996,35998],{"class":222,"line":179},[220,35995,364],{"class":264},[220,35997,35959],{"class":346},[220,35999,359],{"class":264},[220,36001,36002,36004,36006],{"class":222,"line":389},[220,36003,2550],{"class":264},[220,36005,2553],{"class":346},[220,36007,386],{"class":264},[220,36009,36010,36012,36014],{"class":222,"line":399},[220,36011,2567],{"class":264},[220,36013,35959],{"class":346},[220,36015,359],{"class":264},[220,36017,36018,36020,36022],{"class":222,"line":644},[220,36019,402],{"class":264},[220,36021,347],{"class":346},[220,36023,359],{"class":264},[212,36025,36026],{"className":409,"code":35981,"language":411,"meta":178,"style":178},[99,36027,36028,36036,36044,36052,36060],{"__ignoreMap":178},[220,36029,36030,36032,36034],{"class":222,"line":223},[220,36031,343],{"class":264},[220,36033,347],{"class":420},[220,36035,359],{"class":264},[220,36037,36038,36040,36042],{"class":222,"line":179},[220,36039,364],{"class":264},[220,36041,35959],{"class":420},[220,36043,359],{"class":264},[220,36045,36046,36048,36050],{"class":222,"line":389},[220,36047,2550],{"class":264},[220,36049,2553],{"class":420},[220,36051,386],{"class":264},[220,36053,36054,36056,36058],{"class":222,"line":399},[220,36055,2567],{"class":264},[220,36057,35959],{"class":420},[220,36059,359],{"class":264},[220,36061,36062,36064,36066],{"class":222,"line":644},[220,36063,402],{"class":264},[220,36065,347],{"class":420},[220,36067,359],{"class":264},[212,36069,36070],{"className":2844,"code":35981,"language":2846,"meta":178,"style":178},[99,36071,36072,36080,36088,36096,36104],{"__ignoreMap":178},[220,36073,36074,36076,36078],{"class":222,"line":223},[220,36075,343],{"class":264},[220,36077,347],{"class":420},[220,36079,359],{"class":264},[220,36081,36082,36084,36086],{"class":222,"line":179},[220,36083,364],{"class":264},[220,36085,35959],{"class":420},[220,36087,359],{"class":264},[220,36089,36090,36092,36094],{"class":222,"line":389},[220,36091,2550],{"class":264},[220,36093,2553],{"class":420},[220,36095,386],{"class":264},[220,36097,36098,36100,36102],{"class":222,"line":399},[220,36099,2567],{"class":264},[220,36101,35959],{"class":420},[220,36103,359],{"class":264},[220,36105,36106,36108,36110],{"class":222,"line":644},[220,36107,402],{"class":264},[220,36109,347],{"class":420},[220,36111,359],{"class":264},[212,36113,36114],{"className":468,"code":35981,"language":469,"meta":178,"style":178},[99,36115,36116,36124,36132,36140,36148],{"__ignoreMap":178},[220,36117,36118,36120,36122],{"class":222,"line":223},[220,36119,343],{"class":264},[220,36121,347],{"class":420},[220,36123,359],{"class":264},[220,36125,36126,36128,36130],{"class":222,"line":179},[220,36127,364],{"class":264},[220,36129,35959],{"class":420},[220,36131,359],{"class":264},[220,36133,36134,36136,36138],{"class":222,"line":389},[220,36135,2550],{"class":264},[220,36137,2553],{"class":420},[220,36139,386],{"class":264},[220,36141,36142,36144,36146],{"class":222,"line":399},[220,36143,2567],{"class":264},[220,36145,35959],{"class":420},[220,36147,359],{"class":264},[220,36149,36150,36152,36154],{"class":222,"line":644},[220,36151,402],{"class":264},[220,36153,347],{"class":420},[220,36155,359],{"class":264},[212,36157,36159],{"className":251,"code":36158,"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,36160,36161,36171,36175,36189,36193,36202,36210,36214,36218],{"__ignoreMap":178},[220,36162,36163,36165,36167,36169],{"class":222,"line":223},[220,36164,261],{"class":260},[220,36166,11364],{"class":264},[220,36168,268],{"class":260},[220,36170,11369],{"class":230},[220,36172,36173],{"class":222,"line":179},[220,36174,647],{"emptyLinePlaceholder":194},[220,36176,36177,36179,36181,36183,36185,36187],{"class":222,"line":389},[220,36178,1735],{"class":260},[220,36180,1738],{"class":420},[220,36182,1741],{"class":260},[220,36184,1744],{"class":260},[220,36186,1747],{"class":226},[220,36188,1750],{"class":264},[220,36190,36191],{"class":222,"line":399},[220,36192,1765],{"class":264},[220,36194,36195,36197,36200],{"class":222,"line":644},[220,36196,1770],{"class":264},[220,36198,36199],{"class":230},"'BrightnessContrast'",[220,36201,6860],{"class":264},[220,36203,36204,36206,36208],{"class":222,"line":650},[220,36205,6865],{"class":264},[220,36207,6409],{"class":230},[220,36209,2465],{"class":264},[220,36211,36212],{"class":222,"line":656},[220,36213,6882],{"class":264},[220,36215,36216],{"class":222,"line":673},[220,36217,1787],{"class":264},[220,36219,36220],{"class":222,"line":682},[220,36221,1792],{"class":264},[1504,36223,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":36225},[36226,36227],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":35959,"description":35967},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":36235,"title":36236,"body":36237,"category":36429,"componentType":25734,"description":36244,"extension":191,"meta":36430,"navigation":194,"path":36431,"requiresChild":32390,"seo":36432,"stem":36433,"__hash__":36434},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":36238,"toc":36425},[36239,36242,36245,36247,36249,36252,36254,36423],[11,36240,36236],{"id":36241},"brushedmetal",[15,36243,36244],{},"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",[31771,36246],{"component":36236},[23,36248,31775],{"id":26391},[31777,36250],{":props":36251},"[{\"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\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"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,36253,31783],{"id":31782},[246,36255,36256,36285,36313,36341,36369],{":tabs":1557},[212,36257,36259],{"className":334,"code":36258,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,36260,36261,36269,36277],{"__ignoreMap":178},[220,36262,36263,36265,36267],{"class":222,"line":223},[220,36264,343],{"class":264},[220,36266,347],{"class":346},[220,36268,359],{"class":264},[220,36270,36271,36273,36275],{"class":222,"line":179},[220,36272,364],{"class":264},[220,36274,36236],{"class":346},[220,36276,386],{"class":264},[220,36278,36279,36281,36283],{"class":222,"line":389},[220,36280,402],{"class":264},[220,36282,347],{"class":346},[220,36284,359],{"class":264},[212,36286,36287],{"className":409,"code":36258,"language":411,"meta":178,"style":178},[99,36288,36289,36297,36305],{"__ignoreMap":178},[220,36290,36291,36293,36295],{"class":222,"line":223},[220,36292,343],{"class":264},[220,36294,347],{"class":420},[220,36296,359],{"class":264},[220,36298,36299,36301,36303],{"class":222,"line":179},[220,36300,364],{"class":264},[220,36302,36236],{"class":420},[220,36304,386],{"class":264},[220,36306,36307,36309,36311],{"class":222,"line":389},[220,36308,402],{"class":264},[220,36310,347],{"class":420},[220,36312,359],{"class":264},[212,36314,36315],{"className":2844,"code":36258,"language":2846,"meta":178,"style":178},[99,36316,36317,36325,36333],{"__ignoreMap":178},[220,36318,36319,36321,36323],{"class":222,"line":223},[220,36320,343],{"class":264},[220,36322,347],{"class":420},[220,36324,359],{"class":264},[220,36326,36327,36329,36331],{"class":222,"line":179},[220,36328,364],{"class":264},[220,36330,36236],{"class":420},[220,36332,386],{"class":264},[220,36334,36335,36337,36339],{"class":222,"line":389},[220,36336,402],{"class":264},[220,36338,347],{"class":420},[220,36340,359],{"class":264},[212,36342,36343],{"className":468,"code":36258,"language":469,"meta":178,"style":178},[99,36344,36345,36353,36361],{"__ignoreMap":178},[220,36346,36347,36349,36351],{"class":222,"line":223},[220,36348,343],{"class":264},[220,36350,347],{"class":420},[220,36352,359],{"class":264},[220,36354,36355,36357,36359],{"class":222,"line":179},[220,36356,364],{"class":264},[220,36358,36236],{"class":420},[220,36360,386],{"class":264},[220,36362,36363,36365,36367],{"class":222,"line":389},[220,36364,402],{"class":264},[220,36366,347],{"class":420},[220,36368,359],{"class":264},[212,36370,36372],{"className":251,"code":36371,"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,36373,36374,36384,36388,36402,36406,36415,36419],{"__ignoreMap":178},[220,36375,36376,36378,36380,36382],{"class":222,"line":223},[220,36377,261],{"class":260},[220,36379,11364],{"class":264},[220,36381,268],{"class":260},[220,36383,11369],{"class":230},[220,36385,36386],{"class":222,"line":179},[220,36387,647],{"emptyLinePlaceholder":194},[220,36389,36390,36392,36394,36396,36398,36400],{"class":222,"line":389},[220,36391,1735],{"class":260},[220,36393,1738],{"class":420},[220,36395,1741],{"class":260},[220,36397,1744],{"class":260},[220,36399,1747],{"class":226},[220,36401,1750],{"class":264},[220,36403,36404],{"class":222,"line":399},[220,36405,1765],{"class":264},[220,36407,36408,36410,36413],{"class":222,"line":644},[220,36409,1770],{"class":264},[220,36411,36412],{"class":230},"'BrushedMetal'",[220,36414,2465],{"class":264},[220,36416,36417],{"class":222,"line":650},[220,36418,1787],{"class":264},[220,36420,36421],{"class":222,"line":656},[220,36422,1792],{"class":264},[1504,36424,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":36426},[36427,36428],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":36236,"description":36244},"docs\u002Fcomponents\u002FBrushedMetal","jtd9XyU9pNp7JPkFqmWy_4oUVMMCWMWtZEQb-8HCoHc",{"id":36436,"title":36437,"body":36438,"category":33256,"componentType":25740,"description":36445,"extension":191,"meta":36763,"navigation":194,"path":36764,"requiresChild":194,"seo":36765,"stem":36766,"__hash__":36767},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":36439,"toc":36759},[36440,36443,36446,36448,36450,36453,36455,36757],[11,36441,36437],{"id":36442},"bulge",[15,36444,36445],{},"Magnify or pinch content around a center point",[31771,36447],{"component":36437},[23,36449,31775],{"id":26391},[31777,36451],{":props":36452},"[{\"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,36454,31783],{"id":31782},[246,36456,36457,36514,36573,36629,36687],{":tabs":1557},[212,36458,36460],{"className":334,"code":36459,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36461,36462,36470,36477,36486,36490,36498,36506],{"__ignoreMap":178},[220,36463,36464,36466,36468],{"class":222,"line":223},[220,36465,343],{"class":264},[220,36467,347],{"class":346},[220,36469,359],{"class":264},[220,36471,36472,36474],{"class":222,"line":179},[220,36473,364],{"class":264},[220,36475,36476],{"class":346},"Bulge\n",[220,36478,36479,36481,36483],{"class":222,"line":389},[220,36480,17262],{"class":226},[220,36482,353],{"class":264},[220,36484,36485],{"class":230},"\"1\"\n",[220,36487,36488],{"class":222,"line":399},[220,36489,31819],{"class":264},[220,36491,36492,36494,36496],{"class":222,"line":644},[220,36493,2550],{"class":264},[220,36495,2553],{"class":346},[220,36497,386],{"class":264},[220,36499,36500,36502,36504],{"class":222,"line":650},[220,36501,2567],{"class":264},[220,36503,36437],{"class":346},[220,36505,359],{"class":264},[220,36507,36508,36510,36512],{"class":222,"line":656},[220,36509,402],{"class":264},[220,36511,347],{"class":346},[220,36513,359],{"class":264},[212,36515,36517],{"className":409,"code":36516,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36518,36519,36527,36533,36545,36549,36557,36565],{"__ignoreMap":178},[220,36520,36521,36523,36525],{"class":222,"line":223},[220,36522,343],{"class":264},[220,36524,347],{"class":420},[220,36526,359],{"class":264},[220,36528,36529,36531],{"class":222,"line":179},[220,36530,364],{"class":264},[220,36532,36476],{"class":420},[220,36534,36535,36537,36539,36541,36543],{"class":222,"line":389},[220,36536,9497],{"class":226},[220,36538,353],{"class":260},[220,36540,743],{"class":264},[220,36542,8528],{"class":420},[220,36544,749],{"class":264},[220,36546,36547],{"class":222,"line":399},[220,36548,31819],{"class":264},[220,36550,36551,36553,36555],{"class":222,"line":644},[220,36552,2550],{"class":264},[220,36554,2553],{"class":420},[220,36556,386],{"class":264},[220,36558,36559,36561,36563],{"class":222,"line":650},[220,36560,2567],{"class":264},[220,36562,36437],{"class":420},[220,36564,359],{"class":264},[220,36566,36567,36569,36571],{"class":222,"line":656},[220,36568,402],{"class":264},[220,36570,347],{"class":420},[220,36572,359],{"class":264},[212,36574,36575],{"className":2844,"code":36516,"language":2846,"meta":178,"style":178},[99,36576,36577,36585,36591,36601,36605,36613,36621],{"__ignoreMap":178},[220,36578,36579,36581,36583],{"class":222,"line":223},[220,36580,343],{"class":264},[220,36582,347],{"class":420},[220,36584,359],{"class":264},[220,36586,36587,36589],{"class":222,"line":179},[220,36588,364],{"class":264},[220,36590,36476],{"class":420},[220,36592,36593,36595,36597,36599],{"class":222,"line":389},[220,36594,9497],{"class":226},[220,36596,29729],{"class":264},[220,36598,8528],{"class":420},[220,36600,749],{"class":264},[220,36602,36603],{"class":222,"line":399},[220,36604,31819],{"class":264},[220,36606,36607,36609,36611],{"class":222,"line":644},[220,36608,2550],{"class":264},[220,36610,2553],{"class":420},[220,36612,386],{"class":264},[220,36614,36615,36617,36619],{"class":222,"line":650},[220,36616,2567],{"class":264},[220,36618,36437],{"class":420},[220,36620,359],{"class":264},[220,36622,36623,36625,36627],{"class":222,"line":656},[220,36624,402],{"class":264},[220,36626,347],{"class":420},[220,36628,359],{"class":264},[212,36630,36631],{"className":468,"code":36516,"language":469,"meta":178,"style":178},[99,36632,36633,36641,36647,36659,36663,36671,36679],{"__ignoreMap":178},[220,36634,36635,36637,36639],{"class":222,"line":223},[220,36636,343],{"class":264},[220,36638,347],{"class":420},[220,36640,359],{"class":264},[220,36642,36643,36645],{"class":222,"line":179},[220,36644,364],{"class":264},[220,36646,36476],{"class":420},[220,36648,36649,36651,36653,36655,36657],{"class":222,"line":389},[220,36650,9497],{"class":226},[220,36652,353],{"class":260},[220,36654,743],{"class":264},[220,36656,8528],{"class":420},[220,36658,749],{"class":264},[220,36660,36661],{"class":222,"line":399},[220,36662,31819],{"class":264},[220,36664,36665,36667,36669],{"class":222,"line":644},[220,36666,2550],{"class":264},[220,36668,2553],{"class":420},[220,36670,386],{"class":264},[220,36672,36673,36675,36677],{"class":222,"line":650},[220,36674,2567],{"class":264},[220,36676,36437],{"class":420},[220,36678,359],{"class":264},[220,36680,36681,36683,36685],{"class":222,"line":656},[220,36682,402],{"class":264},[220,36684,347],{"class":420},[220,36686,359],{"class":264},[212,36688,36690],{"className":251,"code":36689,"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,36691,36692,36702,36706,36720,36724,36737,36745,36749,36753],{"__ignoreMap":178},[220,36693,36694,36696,36698,36700],{"class":222,"line":223},[220,36695,261],{"class":260},[220,36697,11364],{"class":264},[220,36699,268],{"class":260},[220,36701,11369],{"class":230},[220,36703,36704],{"class":222,"line":179},[220,36705,647],{"emptyLinePlaceholder":194},[220,36707,36708,36710,36712,36714,36716,36718],{"class":222,"line":389},[220,36709,1735],{"class":260},[220,36711,1738],{"class":420},[220,36713,1741],{"class":260},[220,36715,1744],{"class":260},[220,36717,1747],{"class":226},[220,36719,1750],{"class":264},[220,36721,36722],{"class":222,"line":399},[220,36723,1765],{"class":264},[220,36725,36726,36728,36731,36733,36735],{"class":222,"line":644},[220,36727,1770],{"class":264},[220,36729,36730],{"class":230},"'Bulge'",[220,36732,7392],{"class":264},[220,36734,8528],{"class":420},[220,36736,7397],{"class":264},[220,36738,36739,36741,36743],{"class":222,"line":650},[220,36740,6865],{"class":264},[220,36742,6409],{"class":230},[220,36744,2465],{"class":264},[220,36746,36747],{"class":222,"line":656},[220,36748,6882],{"class":264},[220,36750,36751],{"class":222,"line":673},[220,36752,1787],{"class":264},[220,36754,36755],{"class":222,"line":682},[220,36756,1792],{"class":264},[1504,36758,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36760},[36761,36762],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":36437,"description":36445},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":36769,"title":36770,"body":36771,"category":32666,"componentType":25740,"description":36778,"extension":191,"meta":37039,"navigation":194,"path":37040,"requiresChild":194,"seo":37041,"stem":37042,"__hash__":37043},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":36772,"toc":37035},[36773,36776,36779,36781,36783,36786,36788,37033],[11,36774,36770],{"id":36775},"crtscreen",[15,36777,36778],{},"Retro CRT monitor simulation with scanlines",[31771,36780],{"component":36770},[23,36782,31775],{"id":26391},[31777,36784],{":props":36785},"[{\"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,36787,31783],{"id":31782},[246,36789,36790,36835,36879,36923,36967],{":tabs":1557},[212,36791,36793],{"className":334,"code":36792,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,36794,36795,36803,36811,36819,36827],{"__ignoreMap":178},[220,36796,36797,36799,36801],{"class":222,"line":223},[220,36798,343],{"class":264},[220,36800,347],{"class":346},[220,36802,359],{"class":264},[220,36804,36805,36807,36809],{"class":222,"line":179},[220,36806,364],{"class":264},[220,36808,36770],{"class":346},[220,36810,359],{"class":264},[220,36812,36813,36815,36817],{"class":222,"line":389},[220,36814,2550],{"class":264},[220,36816,2553],{"class":346},[220,36818,386],{"class":264},[220,36820,36821,36823,36825],{"class":222,"line":399},[220,36822,2567],{"class":264},[220,36824,36770],{"class":346},[220,36826,359],{"class":264},[220,36828,36829,36831,36833],{"class":222,"line":644},[220,36830,402],{"class":264},[220,36832,347],{"class":346},[220,36834,359],{"class":264},[212,36836,36837],{"className":409,"code":36792,"language":411,"meta":178,"style":178},[99,36838,36839,36847,36855,36863,36871],{"__ignoreMap":178},[220,36840,36841,36843,36845],{"class":222,"line":223},[220,36842,343],{"class":264},[220,36844,347],{"class":420},[220,36846,359],{"class":264},[220,36848,36849,36851,36853],{"class":222,"line":179},[220,36850,364],{"class":264},[220,36852,36770],{"class":420},[220,36854,359],{"class":264},[220,36856,36857,36859,36861],{"class":222,"line":389},[220,36858,2550],{"class":264},[220,36860,2553],{"class":420},[220,36862,386],{"class":264},[220,36864,36865,36867,36869],{"class":222,"line":399},[220,36866,2567],{"class":264},[220,36868,36770],{"class":420},[220,36870,359],{"class":264},[220,36872,36873,36875,36877],{"class":222,"line":644},[220,36874,402],{"class":264},[220,36876,347],{"class":420},[220,36878,359],{"class":264},[212,36880,36881],{"className":2844,"code":36792,"language":2846,"meta":178,"style":178},[99,36882,36883,36891,36899,36907,36915],{"__ignoreMap":178},[220,36884,36885,36887,36889],{"class":222,"line":223},[220,36886,343],{"class":264},[220,36888,347],{"class":420},[220,36890,359],{"class":264},[220,36892,36893,36895,36897],{"class":222,"line":179},[220,36894,364],{"class":264},[220,36896,36770],{"class":420},[220,36898,359],{"class":264},[220,36900,36901,36903,36905],{"class":222,"line":389},[220,36902,2550],{"class":264},[220,36904,2553],{"class":420},[220,36906,386],{"class":264},[220,36908,36909,36911,36913],{"class":222,"line":399},[220,36910,2567],{"class":264},[220,36912,36770],{"class":420},[220,36914,359],{"class":264},[220,36916,36917,36919,36921],{"class":222,"line":644},[220,36918,402],{"class":264},[220,36920,347],{"class":420},[220,36922,359],{"class":264},[212,36924,36925],{"className":468,"code":36792,"language":469,"meta":178,"style":178},[99,36926,36927,36935,36943,36951,36959],{"__ignoreMap":178},[220,36928,36929,36931,36933],{"class":222,"line":223},[220,36930,343],{"class":264},[220,36932,347],{"class":420},[220,36934,359],{"class":264},[220,36936,36937,36939,36941],{"class":222,"line":179},[220,36938,364],{"class":264},[220,36940,36770],{"class":420},[220,36942,359],{"class":264},[220,36944,36945,36947,36949],{"class":222,"line":389},[220,36946,2550],{"class":264},[220,36948,2553],{"class":420},[220,36950,386],{"class":264},[220,36952,36953,36955,36957],{"class":222,"line":399},[220,36954,2567],{"class":264},[220,36956,36770],{"class":420},[220,36958,359],{"class":264},[220,36960,36961,36963,36965],{"class":222,"line":644},[220,36962,402],{"class":264},[220,36964,347],{"class":420},[220,36966,359],{"class":264},[212,36968,36970],{"className":251,"code":36969,"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,36971,36972,36982,36986,37000,37004,37013,37021,37025,37029],{"__ignoreMap":178},[220,36973,36974,36976,36978,36980],{"class":222,"line":223},[220,36975,261],{"class":260},[220,36977,11364],{"class":264},[220,36979,268],{"class":260},[220,36981,11369],{"class":230},[220,36983,36984],{"class":222,"line":179},[220,36985,647],{"emptyLinePlaceholder":194},[220,36987,36988,36990,36992,36994,36996,36998],{"class":222,"line":389},[220,36989,1735],{"class":260},[220,36991,1738],{"class":420},[220,36993,1741],{"class":260},[220,36995,1744],{"class":260},[220,36997,1747],{"class":226},[220,36999,1750],{"class":264},[220,37001,37002],{"class":222,"line":399},[220,37003,1765],{"class":264},[220,37005,37006,37008,37011],{"class":222,"line":644},[220,37007,1770],{"class":264},[220,37009,37010],{"class":230},"'CRTScreen'",[220,37012,6860],{"class":264},[220,37014,37015,37017,37019],{"class":222,"line":650},[220,37016,6865],{"class":264},[220,37018,6409],{"class":230},[220,37020,2465],{"class":264},[220,37022,37023],{"class":222,"line":656},[220,37024,6882],{"class":264},[220,37026,37027],{"class":222,"line":673},[220,37028,1787],{"class":264},[220,37030,37031],{"class":222,"line":682},[220,37032,1792],{"class":264},[1504,37034,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":37036},[37037,37038],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":36770,"description":36778},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":37045,"title":37046,"body":37047,"category":36429,"componentType":25734,"description":37054,"extension":191,"meta":37239,"navigation":194,"path":37240,"requiresChild":32390,"seo":37241,"stem":37242,"__hash__":37243},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":37048,"toc":37235},[37049,37052,37055,37057,37059,37062,37064,37233],[11,37050,37046],{"id":37051},"carbonfiber",[15,37053,37054],{},"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.",[31771,37056],{"component":37046},[23,37058,31775],{"id":26391},[31777,37060],{":props":37061},"[{\"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\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"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,37063,31783],{"id":31782},[246,37065,37066,37095,37123,37151,37179],{":tabs":1557},[212,37067,37069],{"className":334,"code":37068,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,37070,37071,37079,37087],{"__ignoreMap":178},[220,37072,37073,37075,37077],{"class":222,"line":223},[220,37074,343],{"class":264},[220,37076,347],{"class":346},[220,37078,359],{"class":264},[220,37080,37081,37083,37085],{"class":222,"line":179},[220,37082,364],{"class":264},[220,37084,37046],{"class":346},[220,37086,386],{"class":264},[220,37088,37089,37091,37093],{"class":222,"line":389},[220,37090,402],{"class":264},[220,37092,347],{"class":346},[220,37094,359],{"class":264},[212,37096,37097],{"className":409,"code":37068,"language":411,"meta":178,"style":178},[99,37098,37099,37107,37115],{"__ignoreMap":178},[220,37100,37101,37103,37105],{"class":222,"line":223},[220,37102,343],{"class":264},[220,37104,347],{"class":420},[220,37106,359],{"class":264},[220,37108,37109,37111,37113],{"class":222,"line":179},[220,37110,364],{"class":264},[220,37112,37046],{"class":420},[220,37114,386],{"class":264},[220,37116,37117,37119,37121],{"class":222,"line":389},[220,37118,402],{"class":264},[220,37120,347],{"class":420},[220,37122,359],{"class":264},[212,37124,37125],{"className":2844,"code":37068,"language":2846,"meta":178,"style":178},[99,37126,37127,37135,37143],{"__ignoreMap":178},[220,37128,37129,37131,37133],{"class":222,"line":223},[220,37130,343],{"class":264},[220,37132,347],{"class":420},[220,37134,359],{"class":264},[220,37136,37137,37139,37141],{"class":222,"line":179},[220,37138,364],{"class":264},[220,37140,37046],{"class":420},[220,37142,386],{"class":264},[220,37144,37145,37147,37149],{"class":222,"line":389},[220,37146,402],{"class":264},[220,37148,347],{"class":420},[220,37150,359],{"class":264},[212,37152,37153],{"className":468,"code":37068,"language":469,"meta":178,"style":178},[99,37154,37155,37163,37171],{"__ignoreMap":178},[220,37156,37157,37159,37161],{"class":222,"line":223},[220,37158,343],{"class":264},[220,37160,347],{"class":420},[220,37162,359],{"class":264},[220,37164,37165,37167,37169],{"class":222,"line":179},[220,37166,364],{"class":264},[220,37168,37046],{"class":420},[220,37170,386],{"class":264},[220,37172,37173,37175,37177],{"class":222,"line":389},[220,37174,402],{"class":264},[220,37176,347],{"class":420},[220,37178,359],{"class":264},[212,37180,37182],{"className":251,"code":37181,"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,37183,37184,37194,37198,37212,37216,37225,37229],{"__ignoreMap":178},[220,37185,37186,37188,37190,37192],{"class":222,"line":223},[220,37187,261],{"class":260},[220,37189,11364],{"class":264},[220,37191,268],{"class":260},[220,37193,11369],{"class":230},[220,37195,37196],{"class":222,"line":179},[220,37197,647],{"emptyLinePlaceholder":194},[220,37199,37200,37202,37204,37206,37208,37210],{"class":222,"line":389},[220,37201,1735],{"class":260},[220,37203,1738],{"class":420},[220,37205,1741],{"class":260},[220,37207,1744],{"class":260},[220,37209,1747],{"class":226},[220,37211,1750],{"class":264},[220,37213,37214],{"class":222,"line":399},[220,37215,1765],{"class":264},[220,37217,37218,37220,37223],{"class":222,"line":644},[220,37219,1770],{"class":264},[220,37221,37222],{"class":230},"'CarbonFiber'",[220,37224,2465],{"class":264},[220,37226,37227],{"class":222,"line":650},[220,37228,1787],{"class":264},[220,37230,37231],{"class":222,"line":656},[220,37232,1792],{"class":264},[1504,37234,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":37236},[37237,37238],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":37046,"description":37054},"docs\u002Fcomponents\u002FCarbonFiber","WIkCB0_WXwbjAu4XbUcvkmnOGN5QdhfTyeVIv06cqkQ",{"id":37245,"title":37246,"body":37247,"category":32666,"componentType":25740,"description":37254,"extension":191,"meta":37515,"navigation":194,"path":37516,"requiresChild":194,"seo":37517,"stem":37518,"__hash__":37519},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":37248,"toc":37511},[37249,37252,37255,37257,37259,37262,37264,37509],[11,37250,37246],{"id":37251},"chalkboard",[15,37253,37254],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[31771,37256],{"component":37246},[23,37258,31775],{"id":26391},[31777,37260],{":props":37261},"[{\"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,37263,31783],{"id":31782},[246,37265,37266,37311,37355,37399,37443],{":tabs":1557},[212,37267,37269],{"className":334,"code":37268,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,37270,37271,37279,37287,37295,37303],{"__ignoreMap":178},[220,37272,37273,37275,37277],{"class":222,"line":223},[220,37274,343],{"class":264},[220,37276,347],{"class":346},[220,37278,359],{"class":264},[220,37280,37281,37283,37285],{"class":222,"line":179},[220,37282,364],{"class":264},[220,37284,37246],{"class":346},[220,37286,359],{"class":264},[220,37288,37289,37291,37293],{"class":222,"line":389},[220,37290,2550],{"class":264},[220,37292,2553],{"class":346},[220,37294,386],{"class":264},[220,37296,37297,37299,37301],{"class":222,"line":399},[220,37298,2567],{"class":264},[220,37300,37246],{"class":346},[220,37302,359],{"class":264},[220,37304,37305,37307,37309],{"class":222,"line":644},[220,37306,402],{"class":264},[220,37308,347],{"class":346},[220,37310,359],{"class":264},[212,37312,37313],{"className":409,"code":37268,"language":411,"meta":178,"style":178},[99,37314,37315,37323,37331,37339,37347],{"__ignoreMap":178},[220,37316,37317,37319,37321],{"class":222,"line":223},[220,37318,343],{"class":264},[220,37320,347],{"class":420},[220,37322,359],{"class":264},[220,37324,37325,37327,37329],{"class":222,"line":179},[220,37326,364],{"class":264},[220,37328,37246],{"class":420},[220,37330,359],{"class":264},[220,37332,37333,37335,37337],{"class":222,"line":389},[220,37334,2550],{"class":264},[220,37336,2553],{"class":420},[220,37338,386],{"class":264},[220,37340,37341,37343,37345],{"class":222,"line":399},[220,37342,2567],{"class":264},[220,37344,37246],{"class":420},[220,37346,359],{"class":264},[220,37348,37349,37351,37353],{"class":222,"line":644},[220,37350,402],{"class":264},[220,37352,347],{"class":420},[220,37354,359],{"class":264},[212,37356,37357],{"className":2844,"code":37268,"language":2846,"meta":178,"style":178},[99,37358,37359,37367,37375,37383,37391],{"__ignoreMap":178},[220,37360,37361,37363,37365],{"class":222,"line":223},[220,37362,343],{"class":264},[220,37364,347],{"class":420},[220,37366,359],{"class":264},[220,37368,37369,37371,37373],{"class":222,"line":179},[220,37370,364],{"class":264},[220,37372,37246],{"class":420},[220,37374,359],{"class":264},[220,37376,37377,37379,37381],{"class":222,"line":389},[220,37378,2550],{"class":264},[220,37380,2553],{"class":420},[220,37382,386],{"class":264},[220,37384,37385,37387,37389],{"class":222,"line":399},[220,37386,2567],{"class":264},[220,37388,37246],{"class":420},[220,37390,359],{"class":264},[220,37392,37393,37395,37397],{"class":222,"line":644},[220,37394,402],{"class":264},[220,37396,347],{"class":420},[220,37398,359],{"class":264},[212,37400,37401],{"className":468,"code":37268,"language":469,"meta":178,"style":178},[99,37402,37403,37411,37419,37427,37435],{"__ignoreMap":178},[220,37404,37405,37407,37409],{"class":222,"line":223},[220,37406,343],{"class":264},[220,37408,347],{"class":420},[220,37410,359],{"class":264},[220,37412,37413,37415,37417],{"class":222,"line":179},[220,37414,364],{"class":264},[220,37416,37246],{"class":420},[220,37418,359],{"class":264},[220,37420,37421,37423,37425],{"class":222,"line":389},[220,37422,2550],{"class":264},[220,37424,2553],{"class":420},[220,37426,386],{"class":264},[220,37428,37429,37431,37433],{"class":222,"line":399},[220,37430,2567],{"class":264},[220,37432,37246],{"class":420},[220,37434,359],{"class":264},[220,37436,37437,37439,37441],{"class":222,"line":644},[220,37438,402],{"class":264},[220,37440,347],{"class":420},[220,37442,359],{"class":264},[212,37444,37446],{"className":251,"code":37445,"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,37447,37448,37458,37462,37476,37480,37489,37497,37501,37505],{"__ignoreMap":178},[220,37449,37450,37452,37454,37456],{"class":222,"line":223},[220,37451,261],{"class":260},[220,37453,11364],{"class":264},[220,37455,268],{"class":260},[220,37457,11369],{"class":230},[220,37459,37460],{"class":222,"line":179},[220,37461,647],{"emptyLinePlaceholder":194},[220,37463,37464,37466,37468,37470,37472,37474],{"class":222,"line":389},[220,37465,1735],{"class":260},[220,37467,1738],{"class":420},[220,37469,1741],{"class":260},[220,37471,1744],{"class":260},[220,37473,1747],{"class":226},[220,37475,1750],{"class":264},[220,37477,37478],{"class":222,"line":399},[220,37479,1765],{"class":264},[220,37481,37482,37484,37487],{"class":222,"line":644},[220,37483,1770],{"class":264},[220,37485,37486],{"class":230},"'Chalkboard'",[220,37488,6860],{"class":264},[220,37490,37491,37493,37495],{"class":222,"line":650},[220,37492,6865],{"class":264},[220,37494,6409],{"class":230},[220,37496,2465],{"class":264},[220,37498,37499],{"class":222,"line":656},[220,37500,6882],{"class":264},[220,37502,37503],{"class":222,"line":673},[220,37504,1787],{"class":264},[220,37506,37507],{"class":222,"line":682},[220,37508,1792],{"class":264},[1504,37510,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":37512},[37513,37514],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":37246,"description":37254},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":37521,"title":37522,"body":37523,"category":32094,"componentType":25740,"description":37530,"extension":191,"meta":37791,"navigation":194,"path":37792,"requiresChild":194,"seo":37793,"stem":37794,"__hash__":37795},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":37524,"toc":37787},[37525,37528,37531,37533,37535,37538,37540,37785],[11,37526,37522],{"id":37527},"channelblur",[15,37529,37530],{},"Independent blur for red, green, and blue channels",[31771,37532],{"component":37522},[23,37534,31775],{"id":26391},[31777,37536],{":props":37537},"[{\"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,37539,31783],{"id":31782},[246,37541,37542,37587,37631,37675,37719],{":tabs":1557},[212,37543,37545],{"className":334,"code":37544,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,37546,37547,37555,37563,37571,37579],{"__ignoreMap":178},[220,37548,37549,37551,37553],{"class":222,"line":223},[220,37550,343],{"class":264},[220,37552,347],{"class":346},[220,37554,359],{"class":264},[220,37556,37557,37559,37561],{"class":222,"line":179},[220,37558,364],{"class":264},[220,37560,37522],{"class":346},[220,37562,359],{"class":264},[220,37564,37565,37567,37569],{"class":222,"line":389},[220,37566,2550],{"class":264},[220,37568,2553],{"class":346},[220,37570,386],{"class":264},[220,37572,37573,37575,37577],{"class":222,"line":399},[220,37574,2567],{"class":264},[220,37576,37522],{"class":346},[220,37578,359],{"class":264},[220,37580,37581,37583,37585],{"class":222,"line":644},[220,37582,402],{"class":264},[220,37584,347],{"class":346},[220,37586,359],{"class":264},[212,37588,37589],{"className":409,"code":37544,"language":411,"meta":178,"style":178},[99,37590,37591,37599,37607,37615,37623],{"__ignoreMap":178},[220,37592,37593,37595,37597],{"class":222,"line":223},[220,37594,343],{"class":264},[220,37596,347],{"class":420},[220,37598,359],{"class":264},[220,37600,37601,37603,37605],{"class":222,"line":179},[220,37602,364],{"class":264},[220,37604,37522],{"class":420},[220,37606,359],{"class":264},[220,37608,37609,37611,37613],{"class":222,"line":389},[220,37610,2550],{"class":264},[220,37612,2553],{"class":420},[220,37614,386],{"class":264},[220,37616,37617,37619,37621],{"class":222,"line":399},[220,37618,2567],{"class":264},[220,37620,37522],{"class":420},[220,37622,359],{"class":264},[220,37624,37625,37627,37629],{"class":222,"line":644},[220,37626,402],{"class":264},[220,37628,347],{"class":420},[220,37630,359],{"class":264},[212,37632,37633],{"className":2844,"code":37544,"language":2846,"meta":178,"style":178},[99,37634,37635,37643,37651,37659,37667],{"__ignoreMap":178},[220,37636,37637,37639,37641],{"class":222,"line":223},[220,37638,343],{"class":264},[220,37640,347],{"class":420},[220,37642,359],{"class":264},[220,37644,37645,37647,37649],{"class":222,"line":179},[220,37646,364],{"class":264},[220,37648,37522],{"class":420},[220,37650,359],{"class":264},[220,37652,37653,37655,37657],{"class":222,"line":389},[220,37654,2550],{"class":264},[220,37656,2553],{"class":420},[220,37658,386],{"class":264},[220,37660,37661,37663,37665],{"class":222,"line":399},[220,37662,2567],{"class":264},[220,37664,37522],{"class":420},[220,37666,359],{"class":264},[220,37668,37669,37671,37673],{"class":222,"line":644},[220,37670,402],{"class":264},[220,37672,347],{"class":420},[220,37674,359],{"class":264},[212,37676,37677],{"className":468,"code":37544,"language":469,"meta":178,"style":178},[99,37678,37679,37687,37695,37703,37711],{"__ignoreMap":178},[220,37680,37681,37683,37685],{"class":222,"line":223},[220,37682,343],{"class":264},[220,37684,347],{"class":420},[220,37686,359],{"class":264},[220,37688,37689,37691,37693],{"class":222,"line":179},[220,37690,364],{"class":264},[220,37692,37522],{"class":420},[220,37694,359],{"class":264},[220,37696,37697,37699,37701],{"class":222,"line":389},[220,37698,2550],{"class":264},[220,37700,2553],{"class":420},[220,37702,386],{"class":264},[220,37704,37705,37707,37709],{"class":222,"line":399},[220,37706,2567],{"class":264},[220,37708,37522],{"class":420},[220,37710,359],{"class":264},[220,37712,37713,37715,37717],{"class":222,"line":644},[220,37714,402],{"class":264},[220,37716,347],{"class":420},[220,37718,359],{"class":264},[212,37720,37722],{"className":251,"code":37721,"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,37723,37724,37734,37738,37752,37756,37765,37773,37777,37781],{"__ignoreMap":178},[220,37725,37726,37728,37730,37732],{"class":222,"line":223},[220,37727,261],{"class":260},[220,37729,11364],{"class":264},[220,37731,268],{"class":260},[220,37733,11369],{"class":230},[220,37735,37736],{"class":222,"line":179},[220,37737,647],{"emptyLinePlaceholder":194},[220,37739,37740,37742,37744,37746,37748,37750],{"class":222,"line":389},[220,37741,1735],{"class":260},[220,37743,1738],{"class":420},[220,37745,1741],{"class":260},[220,37747,1744],{"class":260},[220,37749,1747],{"class":226},[220,37751,1750],{"class":264},[220,37753,37754],{"class":222,"line":399},[220,37755,1765],{"class":264},[220,37757,37758,37760,37763],{"class":222,"line":644},[220,37759,1770],{"class":264},[220,37761,37762],{"class":230},"'ChannelBlur'",[220,37764,6860],{"class":264},[220,37766,37767,37769,37771],{"class":222,"line":650},[220,37768,6865],{"class":264},[220,37770,6409],{"class":230},[220,37772,2465],{"class":264},[220,37774,37775],{"class":222,"line":656},[220,37776,6882],{"class":264},[220,37778,37779],{"class":222,"line":673},[220,37780,1787],{"class":264},[220,37782,37783],{"class":222,"line":682},[220,37784,1792],{"class":264},[1504,37786,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":37788},[37789,37790],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":37522,"description":37530},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":37797,"title":37798,"body":37799,"category":33533,"componentType":25740,"description":37806,"extension":191,"meta":38067,"navigation":194,"path":38068,"requiresChild":194,"seo":38069,"stem":38070,"__hash__":38071},"components\u002Fdocs\u002Fcomponents\u002FCheckerWipe.md","CheckerWipe",{"type":8,"value":37800,"toc":38063},[37801,37804,37807,37809,37811,37814,37816,38061],[11,37802,37798],{"id":37803},"checkerwipe",[15,37805,37806],{},"Wipe the content away as a checkerboard of fading squares",[31771,37808],{"component":37798},[23,37810,31775],{"id":26391},[31777,37812],{":props":37813},"[{\"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,37815,31783],{"id":31782},[246,37817,37818,37863,37907,37951,37995],{":tabs":1557},[212,37819,37821],{"className":334,"code":37820,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerWipe>\n \u003CCircle \u002F>\n \u003C\u002FCheckerWipe>\n\u003C\u002FShader>\n",[99,37822,37823,37831,37839,37847,37855],{"__ignoreMap":178},[220,37824,37825,37827,37829],{"class":222,"line":223},[220,37826,343],{"class":264},[220,37828,347],{"class":346},[220,37830,359],{"class":264},[220,37832,37833,37835,37837],{"class":222,"line":179},[220,37834,364],{"class":264},[220,37836,37798],{"class":346},[220,37838,359],{"class":264},[220,37840,37841,37843,37845],{"class":222,"line":389},[220,37842,2550],{"class":264},[220,37844,2553],{"class":346},[220,37846,386],{"class":264},[220,37848,37849,37851,37853],{"class":222,"line":399},[220,37850,2567],{"class":264},[220,37852,37798],{"class":346},[220,37854,359],{"class":264},[220,37856,37857,37859,37861],{"class":222,"line":644},[220,37858,402],{"class":264},[220,37860,347],{"class":346},[220,37862,359],{"class":264},[212,37864,37865],{"className":409,"code":37820,"language":411,"meta":178,"style":178},[99,37866,37867,37875,37883,37891,37899],{"__ignoreMap":178},[220,37868,37869,37871,37873],{"class":222,"line":223},[220,37870,343],{"class":264},[220,37872,347],{"class":420},[220,37874,359],{"class":264},[220,37876,37877,37879,37881],{"class":222,"line":179},[220,37878,364],{"class":264},[220,37880,37798],{"class":420},[220,37882,359],{"class":264},[220,37884,37885,37887,37889],{"class":222,"line":389},[220,37886,2550],{"class":264},[220,37888,2553],{"class":420},[220,37890,386],{"class":264},[220,37892,37893,37895,37897],{"class":222,"line":399},[220,37894,2567],{"class":264},[220,37896,37798],{"class":420},[220,37898,359],{"class":264},[220,37900,37901,37903,37905],{"class":222,"line":644},[220,37902,402],{"class":264},[220,37904,347],{"class":420},[220,37906,359],{"class":264},[212,37908,37909],{"className":2844,"code":37820,"language":2846,"meta":178,"style":178},[99,37910,37911,37919,37927,37935,37943],{"__ignoreMap":178},[220,37912,37913,37915,37917],{"class":222,"line":223},[220,37914,343],{"class":264},[220,37916,347],{"class":420},[220,37918,359],{"class":264},[220,37920,37921,37923,37925],{"class":222,"line":179},[220,37922,364],{"class":264},[220,37924,37798],{"class":420},[220,37926,359],{"class":264},[220,37928,37929,37931,37933],{"class":222,"line":389},[220,37930,2550],{"class":264},[220,37932,2553],{"class":420},[220,37934,386],{"class":264},[220,37936,37937,37939,37941],{"class":222,"line":399},[220,37938,2567],{"class":264},[220,37940,37798],{"class":420},[220,37942,359],{"class":264},[220,37944,37945,37947,37949],{"class":222,"line":644},[220,37946,402],{"class":264},[220,37948,347],{"class":420},[220,37950,359],{"class":264},[212,37952,37953],{"className":468,"code":37820,"language":469,"meta":178,"style":178},[99,37954,37955,37963,37971,37979,37987],{"__ignoreMap":178},[220,37956,37957,37959,37961],{"class":222,"line":223},[220,37958,343],{"class":264},[220,37960,347],{"class":420},[220,37962,359],{"class":264},[220,37964,37965,37967,37969],{"class":222,"line":179},[220,37966,364],{"class":264},[220,37968,37798],{"class":420},[220,37970,359],{"class":264},[220,37972,37973,37975,37977],{"class":222,"line":389},[220,37974,2550],{"class":264},[220,37976,2553],{"class":420},[220,37978,386],{"class":264},[220,37980,37981,37983,37985],{"class":222,"line":399},[220,37982,2567],{"class":264},[220,37984,37798],{"class":420},[220,37986,359],{"class":264},[220,37988,37989,37991,37993],{"class":222,"line":644},[220,37990,402],{"class":264},[220,37992,347],{"class":420},[220,37994,359],{"class":264},[212,37996,37998],{"className":251,"code":37997,"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,37999,38000,38010,38014,38028,38032,38041,38049,38053,38057],{"__ignoreMap":178},[220,38001,38002,38004,38006,38008],{"class":222,"line":223},[220,38003,261],{"class":260},[220,38005,11364],{"class":264},[220,38007,268],{"class":260},[220,38009,11369],{"class":230},[220,38011,38012],{"class":222,"line":179},[220,38013,647],{"emptyLinePlaceholder":194},[220,38015,38016,38018,38020,38022,38024,38026],{"class":222,"line":389},[220,38017,1735],{"class":260},[220,38019,1738],{"class":420},[220,38021,1741],{"class":260},[220,38023,1744],{"class":260},[220,38025,1747],{"class":226},[220,38027,1750],{"class":264},[220,38029,38030],{"class":222,"line":399},[220,38031,1765],{"class":264},[220,38033,38034,38036,38039],{"class":222,"line":644},[220,38035,1770],{"class":264},[220,38037,38038],{"class":230},"'CheckerWipe'",[220,38040,6860],{"class":264},[220,38042,38043,38045,38047],{"class":222,"line":650},[220,38044,6865],{"class":264},[220,38046,6409],{"class":230},[220,38048,2465],{"class":264},[220,38050,38051],{"class":222,"line":656},[220,38052,6882],{"class":264},[220,38054,38055],{"class":222,"line":673},[220,38056,1787],{"class":264},[220,38058,38059],{"class":222,"line":682},[220,38060,1792],{"class":264},[1504,38062,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":38064},[38065,38066],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerwipe",{"title":37798,"description":37806},"docs\u002Fcomponents\u002FCheckerWipe","NqeYXHsapZtoyRSSIzfTaKg5Au8v5cKkjvG-ZTxFNu8",{"id":38073,"title":38074,"body":38075,"category":32923,"componentType":25734,"description":38082,"extension":191,"meta":38266,"navigation":194,"path":38267,"requiresChild":32390,"seo":38268,"stem":38269,"__hash__":38270},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":38076,"toc":38262},[38077,38080,38083,38085,38087,38090,38092,38260],[11,38078,38074],{"id":38079},"checkerboard",[15,38081,38082],{},"Classic checkerboard pattern with two alternating colors",[31771,38084],{"component":38074},[23,38086,31775],{"id":26391},[31777,38088],{":props":38089},"[{\"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,38091,31783],{"id":31782},[246,38093,38094,38123,38151,38179,38207],{":tabs":1557},[212,38095,38097],{"className":334,"code":38096,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,38098,38099,38107,38115],{"__ignoreMap":178},[220,38100,38101,38103,38105],{"class":222,"line":223},[220,38102,343],{"class":264},[220,38104,347],{"class":346},[220,38106,359],{"class":264},[220,38108,38109,38111,38113],{"class":222,"line":179},[220,38110,364],{"class":264},[220,38112,38074],{"class":346},[220,38114,386],{"class":264},[220,38116,38117,38119,38121],{"class":222,"line":389},[220,38118,402],{"class":264},[220,38120,347],{"class":346},[220,38122,359],{"class":264},[212,38124,38125],{"className":409,"code":38096,"language":411,"meta":178,"style":178},[99,38126,38127,38135,38143],{"__ignoreMap":178},[220,38128,38129,38131,38133],{"class":222,"line":223},[220,38130,343],{"class":264},[220,38132,347],{"class":420},[220,38134,359],{"class":264},[220,38136,38137,38139,38141],{"class":222,"line":179},[220,38138,364],{"class":264},[220,38140,38074],{"class":420},[220,38142,386],{"class":264},[220,38144,38145,38147,38149],{"class":222,"line":389},[220,38146,402],{"class":264},[220,38148,347],{"class":420},[220,38150,359],{"class":264},[212,38152,38153],{"className":2844,"code":38096,"language":2846,"meta":178,"style":178},[99,38154,38155,38163,38171],{"__ignoreMap":178},[220,38156,38157,38159,38161],{"class":222,"line":223},[220,38158,343],{"class":264},[220,38160,347],{"class":420},[220,38162,359],{"class":264},[220,38164,38165,38167,38169],{"class":222,"line":179},[220,38166,364],{"class":264},[220,38168,38074],{"class":420},[220,38170,386],{"class":264},[220,38172,38173,38175,38177],{"class":222,"line":389},[220,38174,402],{"class":264},[220,38176,347],{"class":420},[220,38178,359],{"class":264},[212,38180,38181],{"className":468,"code":38096,"language":469,"meta":178,"style":178},[99,38182,38183,38191,38199],{"__ignoreMap":178},[220,38184,38185,38187,38189],{"class":222,"line":223},[220,38186,343],{"class":264},[220,38188,347],{"class":420},[220,38190,359],{"class":264},[220,38192,38193,38195,38197],{"class":222,"line":179},[220,38194,364],{"class":264},[220,38196,38074],{"class":420},[220,38198,386],{"class":264},[220,38200,38201,38203,38205],{"class":222,"line":389},[220,38202,402],{"class":264},[220,38204,347],{"class":420},[220,38206,359],{"class":264},[212,38208,38210],{"className":251,"code":38209,"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,38211,38212,38222,38226,38240,38244,38252,38256],{"__ignoreMap":178},[220,38213,38214,38216,38218,38220],{"class":222,"line":223},[220,38215,261],{"class":260},[220,38217,11364],{"class":264},[220,38219,268],{"class":260},[220,38221,11369],{"class":230},[220,38223,38224],{"class":222,"line":179},[220,38225,647],{"emptyLinePlaceholder":194},[220,38227,38228,38230,38232,38234,38236,38238],{"class":222,"line":389},[220,38229,1735],{"class":260},[220,38231,1738],{"class":420},[220,38233,1741],{"class":260},[220,38235,1744],{"class":260},[220,38237,1747],{"class":226},[220,38239,1750],{"class":264},[220,38241,38242],{"class":222,"line":399},[220,38243,1765],{"class":264},[220,38245,38246,38248,38250],{"class":222,"line":644},[220,38247,1770],{"class":264},[220,38249,10010],{"class":230},[220,38251,2465],{"class":264},[220,38253,38254],{"class":222,"line":650},[220,38255,1787],{"class":264},[220,38257,38258],{"class":222,"line":656},[220,38259,1792],{"class":264},[1504,38261,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":38263},[38264,38265],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":38074,"description":38082},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":38272,"title":38273,"body":38274,"category":32923,"componentType":25734,"description":38281,"extension":191,"meta":38466,"navigation":194,"path":38467,"requiresChild":32390,"seo":38468,"stem":38469,"__hash__":38470},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":38275,"toc":38462},[38276,38279,38282,38284,38286,38289,38291,38460],[11,38277,38273],{"id":38278},"chevron",[15,38280,38281],{},"Animated chevron \u002F zigzag stripe pattern",[31771,38283],{"component":38273},[23,38285,31775],{"id":26391},[31777,38287],{":props":38288},"[{\"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,38290,31783],{"id":31782},[246,38292,38293,38322,38350,38378,38406],{":tabs":1557},[212,38294,38296],{"className":334,"code":38295,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,38297,38298,38306,38314],{"__ignoreMap":178},[220,38299,38300,38302,38304],{"class":222,"line":223},[220,38301,343],{"class":264},[220,38303,347],{"class":346},[220,38305,359],{"class":264},[220,38307,38308,38310,38312],{"class":222,"line":179},[220,38309,364],{"class":264},[220,38311,38273],{"class":346},[220,38313,386],{"class":264},[220,38315,38316,38318,38320],{"class":222,"line":389},[220,38317,402],{"class":264},[220,38319,347],{"class":346},[220,38321,359],{"class":264},[212,38323,38324],{"className":409,"code":38295,"language":411,"meta":178,"style":178},[99,38325,38326,38334,38342],{"__ignoreMap":178},[220,38327,38328,38330,38332],{"class":222,"line":223},[220,38329,343],{"class":264},[220,38331,347],{"class":420},[220,38333,359],{"class":264},[220,38335,38336,38338,38340],{"class":222,"line":179},[220,38337,364],{"class":264},[220,38339,38273],{"class":420},[220,38341,386],{"class":264},[220,38343,38344,38346,38348],{"class":222,"line":389},[220,38345,402],{"class":264},[220,38347,347],{"class":420},[220,38349,359],{"class":264},[212,38351,38352],{"className":2844,"code":38295,"language":2846,"meta":178,"style":178},[99,38353,38354,38362,38370],{"__ignoreMap":178},[220,38355,38356,38358,38360],{"class":222,"line":223},[220,38357,343],{"class":264},[220,38359,347],{"class":420},[220,38361,359],{"class":264},[220,38363,38364,38366,38368],{"class":222,"line":179},[220,38365,364],{"class":264},[220,38367,38273],{"class":420},[220,38369,386],{"class":264},[220,38371,38372,38374,38376],{"class":222,"line":389},[220,38373,402],{"class":264},[220,38375,347],{"class":420},[220,38377,359],{"class":264},[212,38379,38380],{"className":468,"code":38295,"language":469,"meta":178,"style":178},[99,38381,38382,38390,38398],{"__ignoreMap":178},[220,38383,38384,38386,38388],{"class":222,"line":223},[220,38385,343],{"class":264},[220,38387,347],{"class":420},[220,38389,359],{"class":264},[220,38391,38392,38394,38396],{"class":222,"line":179},[220,38393,364],{"class":264},[220,38395,38273],{"class":420},[220,38397,386],{"class":264},[220,38399,38400,38402,38404],{"class":222,"line":389},[220,38401,402],{"class":264},[220,38403,347],{"class":420},[220,38405,359],{"class":264},[212,38407,38409],{"className":251,"code":38408,"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,38410,38411,38421,38425,38439,38443,38452,38456],{"__ignoreMap":178},[220,38412,38413,38415,38417,38419],{"class":222,"line":223},[220,38414,261],{"class":260},[220,38416,11364],{"class":264},[220,38418,268],{"class":260},[220,38420,11369],{"class":230},[220,38422,38423],{"class":222,"line":179},[220,38424,647],{"emptyLinePlaceholder":194},[220,38426,38427,38429,38431,38433,38435,38437],{"class":222,"line":389},[220,38428,1735],{"class":260},[220,38430,1738],{"class":420},[220,38432,1741],{"class":260},[220,38434,1744],{"class":260},[220,38436,1747],{"class":226},[220,38438,1750],{"class":264},[220,38440,38441],{"class":222,"line":399},[220,38442,1765],{"class":264},[220,38444,38445,38447,38450],{"class":222,"line":644},[220,38446,1770],{"class":264},[220,38448,38449],{"class":230},"'Chevron'",[220,38451,2465],{"class":264},[220,38453,38454],{"class":222,"line":650},[220,38455,1787],{"class":264},[220,38457,38458],{"class":222,"line":656},[220,38459,1792],{"class":264},[1504,38461,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":38463},[38464,38465],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":38273,"description":38281},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":38472,"title":38473,"body":38474,"category":35419,"componentType":25734,"description":38481,"extension":191,"meta":38770,"navigation":194,"path":38771,"requiresChild":32390,"seo":38772,"stem":38773,"__hash__":38774},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":38475,"toc":38766},[38476,38479,38482,38484,38486,38489,38491,38764],[11,38477,38473],{"id":38478},"chromaflow",[15,38480,38481],{},"Interactive liquid flow effect that follows your cursor",[31771,38483],{"component":38473},[23,38485,31775],{"id":26391},[31777,38487],{":props":38488},"[{\"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,38490,31783],{"id":31782},[246,38492,38493,38542,38598,38648,38702],{":tabs":1557},[212,38494,38496],{"className":334,"code":38495,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,38497,38498,38506,38513,38521,38530,38534],{"__ignoreMap":178},[220,38499,38500,38502,38504],{"class":222,"line":223},[220,38501,343],{"class":264},[220,38503,347],{"class":346},[220,38505,359],{"class":264},[220,38507,38508,38510],{"class":222,"line":179},[220,38509,364],{"class":264},[220,38511,38512],{"class":346},"ChromaFlow\n",[220,38514,38515,38517,38519],{"class":222,"line":389},[220,38516,20228],{"class":226},[220,38518,353],{"class":264},[220,38520,36485],{"class":230},[220,38522,38523,38525,38527],{"class":222,"line":399},[220,38524,17262],{"class":226},[220,38526,353],{"class":264},[220,38528,38529],{"class":230},"\"3\"\n",[220,38531,38532],{"class":222,"line":644},[220,38533,1234],{"class":264},[220,38535,38536,38538,38540],{"class":222,"line":650},[220,38537,402],{"class":264},[220,38539,347],{"class":346},[220,38541,359],{"class":264},[212,38543,38545],{"className":409,"code":38544,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,38546,38547,38555,38561,38573,38586,38590],{"__ignoreMap":178},[220,38548,38549,38551,38553],{"class":222,"line":223},[220,38550,343],{"class":264},[220,38552,347],{"class":420},[220,38554,359],{"class":264},[220,38556,38557,38559],{"class":222,"line":179},[220,38558,364],{"class":264},[220,38560,38512],{"class":420},[220,38562,38563,38565,38567,38569,38571],{"class":222,"line":389},[220,38564,20339],{"class":226},[220,38566,353],{"class":260},[220,38568,743],{"class":264},[220,38570,8528],{"class":420},[220,38572,749],{"class":264},[220,38574,38575,38577,38579,38581,38584],{"class":222,"line":399},[220,38576,9497],{"class":226},[220,38578,353],{"class":260},[220,38580,743],{"class":264},[220,38582,38583],{"class":420},"3",[220,38585,749],{"class":264},[220,38587,38588],{"class":222,"line":644},[220,38589,1234],{"class":264},[220,38591,38592,38594,38596],{"class":222,"line":650},[220,38593,402],{"class":264},[220,38595,347],{"class":420},[220,38597,359],{"class":264},[212,38599,38600],{"className":2844,"code":38544,"language":2846,"meta":178,"style":178},[99,38601,38602,38610,38616,38626,38636,38640],{"__ignoreMap":178},[220,38603,38604,38606,38608],{"class":222,"line":223},[220,38605,343],{"class":264},[220,38607,347],{"class":420},[220,38609,359],{"class":264},[220,38611,38612,38614],{"class":222,"line":179},[220,38613,364],{"class":264},[220,38615,38512],{"class":420},[220,38617,38618,38620,38622,38624],{"class":222,"line":389},[220,38619,20339],{"class":226},[220,38621,29729],{"class":264},[220,38623,8528],{"class":420},[220,38625,749],{"class":264},[220,38627,38628,38630,38632,38634],{"class":222,"line":399},[220,38629,9497],{"class":226},[220,38631,29729],{"class":264},[220,38633,38583],{"class":420},[220,38635,749],{"class":264},[220,38637,38638],{"class":222,"line":644},[220,38639,1234],{"class":264},[220,38641,38642,38644,38646],{"class":222,"line":650},[220,38643,402],{"class":264},[220,38645,347],{"class":420},[220,38647,359],{"class":264},[212,38649,38650],{"className":468,"code":38544,"language":469,"meta":178,"style":178},[99,38651,38652,38660,38666,38678,38690,38694],{"__ignoreMap":178},[220,38653,38654,38656,38658],{"class":222,"line":223},[220,38655,343],{"class":264},[220,38657,347],{"class":420},[220,38659,359],{"class":264},[220,38661,38662,38664],{"class":222,"line":179},[220,38663,364],{"class":264},[220,38665,38512],{"class":420},[220,38667,38668,38670,38672,38674,38676],{"class":222,"line":389},[220,38669,20339],{"class":226},[220,38671,353],{"class":260},[220,38673,743],{"class":264},[220,38675,8528],{"class":420},[220,38677,749],{"class":264},[220,38679,38680,38682,38684,38686,38688],{"class":222,"line":399},[220,38681,9497],{"class":226},[220,38683,353],{"class":260},[220,38685,743],{"class":264},[220,38687,38583],{"class":420},[220,38689,749],{"class":264},[220,38691,38692],{"class":222,"line":644},[220,38693,1234],{"class":264},[220,38695,38696,38698,38700],{"class":222,"line":650},[220,38697,402],{"class":264},[220,38699,347],{"class":420},[220,38701,359],{"class":264},[212,38703,38705],{"className":251,"code":38704,"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,38706,38707,38717,38721,38735,38739,38756,38760],{"__ignoreMap":178},[220,38708,38709,38711,38713,38715],{"class":222,"line":223},[220,38710,261],{"class":260},[220,38712,11364],{"class":264},[220,38714,268],{"class":260},[220,38716,11369],{"class":230},[220,38718,38719],{"class":222,"line":179},[220,38720,647],{"emptyLinePlaceholder":194},[220,38722,38723,38725,38727,38729,38731,38733],{"class":222,"line":389},[220,38724,1735],{"class":260},[220,38726,1738],{"class":420},[220,38728,1741],{"class":260},[220,38730,1744],{"class":260},[220,38732,1747],{"class":226},[220,38734,1750],{"class":264},[220,38736,38737],{"class":222,"line":399},[220,38738,1765],{"class":264},[220,38740,38741,38743,38746,38748,38750,38752,38754],{"class":222,"line":644},[220,38742,1770],{"class":264},[220,38744,38745],{"class":230},"'ChromaFlow'",[220,38747,32063],{"class":264},[220,38749,8528],{"class":420},[220,38751,6417],{"class":264},[220,38753,38583],{"class":420},[220,38755,1782],{"class":264},[220,38757,38758],{"class":222,"line":650},[220,38759,1787],{"class":264},[220,38761,38762],{"class":222,"line":656},[220,38763,1792],{"class":264},[1504,38765,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38767},[38768,38769],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":38473,"description":38481},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":38776,"title":38777,"body":38778,"category":32666,"componentType":25740,"description":38785,"extension":191,"meta":39046,"navigation":194,"path":39047,"requiresChild":194,"seo":39048,"stem":39049,"__hash__":39050},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":38779,"toc":39042},[38780,38783,38786,38788,38790,38793,38795,39040],[11,38781,38777],{"id":38782},"chromaticaberration",[15,38784,38785],{},"Separate RGB channels for a prismatic distortion effect",[31771,38787],{"component":38777},[23,38789,31775],{"id":26391},[31777,38791],{":props":38792},"[{\"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,38794,31783],{"id":31782},[246,38796,38797,38842,38886,38930,38974],{":tabs":1557},[212,38798,38800],{"className":334,"code":38799,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,38801,38802,38810,38818,38826,38834],{"__ignoreMap":178},[220,38803,38804,38806,38808],{"class":222,"line":223},[220,38805,343],{"class":264},[220,38807,347],{"class":346},[220,38809,359],{"class":264},[220,38811,38812,38814,38816],{"class":222,"line":179},[220,38813,364],{"class":264},[220,38815,38777],{"class":346},[220,38817,359],{"class":264},[220,38819,38820,38822,38824],{"class":222,"line":389},[220,38821,2550],{"class":264},[220,38823,2553],{"class":346},[220,38825,386],{"class":264},[220,38827,38828,38830,38832],{"class":222,"line":399},[220,38829,2567],{"class":264},[220,38831,38777],{"class":346},[220,38833,359],{"class":264},[220,38835,38836,38838,38840],{"class":222,"line":644},[220,38837,402],{"class":264},[220,38839,347],{"class":346},[220,38841,359],{"class":264},[212,38843,38844],{"className":409,"code":38799,"language":411,"meta":178,"style":178},[99,38845,38846,38854,38862,38870,38878],{"__ignoreMap":178},[220,38847,38848,38850,38852],{"class":222,"line":223},[220,38849,343],{"class":264},[220,38851,347],{"class":420},[220,38853,359],{"class":264},[220,38855,38856,38858,38860],{"class":222,"line":179},[220,38857,364],{"class":264},[220,38859,38777],{"class":420},[220,38861,359],{"class":264},[220,38863,38864,38866,38868],{"class":222,"line":389},[220,38865,2550],{"class":264},[220,38867,2553],{"class":420},[220,38869,386],{"class":264},[220,38871,38872,38874,38876],{"class":222,"line":399},[220,38873,2567],{"class":264},[220,38875,38777],{"class":420},[220,38877,359],{"class":264},[220,38879,38880,38882,38884],{"class":222,"line":644},[220,38881,402],{"class":264},[220,38883,347],{"class":420},[220,38885,359],{"class":264},[212,38887,38888],{"className":2844,"code":38799,"language":2846,"meta":178,"style":178},[99,38889,38890,38898,38906,38914,38922],{"__ignoreMap":178},[220,38891,38892,38894,38896],{"class":222,"line":223},[220,38893,343],{"class":264},[220,38895,347],{"class":420},[220,38897,359],{"class":264},[220,38899,38900,38902,38904],{"class":222,"line":179},[220,38901,364],{"class":264},[220,38903,38777],{"class":420},[220,38905,359],{"class":264},[220,38907,38908,38910,38912],{"class":222,"line":389},[220,38909,2550],{"class":264},[220,38911,2553],{"class":420},[220,38913,386],{"class":264},[220,38915,38916,38918,38920],{"class":222,"line":399},[220,38917,2567],{"class":264},[220,38919,38777],{"class":420},[220,38921,359],{"class":264},[220,38923,38924,38926,38928],{"class":222,"line":644},[220,38925,402],{"class":264},[220,38927,347],{"class":420},[220,38929,359],{"class":264},[212,38931,38932],{"className":468,"code":38799,"language":469,"meta":178,"style":178},[99,38933,38934,38942,38950,38958,38966],{"__ignoreMap":178},[220,38935,38936,38938,38940],{"class":222,"line":223},[220,38937,343],{"class":264},[220,38939,347],{"class":420},[220,38941,359],{"class":264},[220,38943,38944,38946,38948],{"class":222,"line":179},[220,38945,364],{"class":264},[220,38947,38777],{"class":420},[220,38949,359],{"class":264},[220,38951,38952,38954,38956],{"class":222,"line":389},[220,38953,2550],{"class":264},[220,38955,2553],{"class":420},[220,38957,386],{"class":264},[220,38959,38960,38962,38964],{"class":222,"line":399},[220,38961,2567],{"class":264},[220,38963,38777],{"class":420},[220,38965,359],{"class":264},[220,38967,38968,38970,38972],{"class":222,"line":644},[220,38969,402],{"class":264},[220,38971,347],{"class":420},[220,38973,359],{"class":264},[212,38975,38977],{"className":251,"code":38976,"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,38978,38979,38989,38993,39007,39011,39020,39028,39032,39036],{"__ignoreMap":178},[220,38980,38981,38983,38985,38987],{"class":222,"line":223},[220,38982,261],{"class":260},[220,38984,11364],{"class":264},[220,38986,268],{"class":260},[220,38988,11369],{"class":230},[220,38990,38991],{"class":222,"line":179},[220,38992,647],{"emptyLinePlaceholder":194},[220,38994,38995,38997,38999,39001,39003,39005],{"class":222,"line":389},[220,38996,1735],{"class":260},[220,38998,1738],{"class":420},[220,39000,1741],{"class":260},[220,39002,1744],{"class":260},[220,39004,1747],{"class":226},[220,39006,1750],{"class":264},[220,39008,39009],{"class":222,"line":399},[220,39010,1765],{"class":264},[220,39012,39013,39015,39018],{"class":222,"line":644},[220,39014,1770],{"class":264},[220,39016,39017],{"class":230},"'ChromaticAberration'",[220,39019,6860],{"class":264},[220,39021,39022,39024,39026],{"class":222,"line":650},[220,39023,6865],{"class":264},[220,39025,6409],{"class":230},[220,39027,2465],{"class":264},[220,39029,39030],{"class":222,"line":656},[220,39031,6882],{"class":264},[220,39033,39034],{"class":222,"line":673},[220,39035,1787],{"class":264},[220,39037,39038],{"class":222,"line":682},[220,39039,1792],{"class":264},[1504,39041,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":39043},[39044,39045],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":38777,"description":38785},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":39052,"title":39053,"body":39054,"category":36429,"componentType":25734,"description":39061,"extension":191,"meta":39246,"navigation":194,"path":39247,"requiresChild":32390,"seo":39248,"stem":39249,"__hash__":39250},"components\u002Fdocs\u002Fcomponents\u002FChrome.md","Chrome",{"type":8,"value":39055,"toc":39242},[39056,39059,39062,39064,39066,39069,39071,39240],[11,39057,39053],{"id":39058},"chrome",[15,39060,39061],{},"Studio-lit mirror chrome — a precision-machined shape with a controllable polished bevel, softly convex faces and a photographic studio reflected in them: one huge frontal softbox, black flags, and thin warm\u002Fcool strip lights that fringe amber and ice-blue exactly where the reflections break",[31771,39063],{"component":39053},[23,39065,31775],{"id":26391},[31777,39067],{":props":39068},"[{\"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 chrome shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the chrome shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the chrome shape in degrees\"},{\"name\":\"tint\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Metal tint multiplied into the reflection — white for silver chrome, warm ivory for gold, dusky rose for copper\"},{\"name\":\"warmColor\",\"type\":\"string\",\"default\":\"#ffa94d\",\"description\":\"Color of the warm strip light hugging the studio horizon — the amber band that fringes the reflections\"},{\"name\":\"coolColor\",\"type\":\"string\",\"default\":\"#82a7e6\",\"description\":\"Color of the cool wash below the horizon — the steel-blue zone the darker reflections fall into\"},{\"name\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.028\",\"description\":\"Width of the polished edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0.55\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"name\":\"curvature\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Convex doming of the faces — sweeps the big soft studio gradients across otherwise flat metal\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Pressed-metal imperfection — gently bends the face reflections and wobbles the bevel light lines so the surface reads as real\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Exposure of the reflected studio — the overall brilliance of the chrome\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the softbox, flags and strips fall\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Softness of the studio edges — 0 = razor polished reflections, 1 = satin diffusion\"},{\"name\":\"spectral\",\"type\":\"number\",\"default\":\"0.9\",\"description\":\"The coloured accent lights: an amber glow hugging the softbox edge and an ice-blue wash below it. 0 = a fully achromatic black-and-white studio.\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Prismatic RGB splitting concentrated on the fast-curving bevel — thin rainbow micro-fringes along the edge highlights, distinct from the broad accent lights\"},{\"name\":\"shadows\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Depth of the dark studio reflections — how hard the black side flags and floor crush toward graphite. 0 lifts them to a soft gray studio.\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the studio orbit — the whole lighting environment slowly wanders around the piece, sliding the reflections across faces and edges. 0 freezes it.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"roundedRectSDF\",\"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,39070,31783],{"id":31782},[246,39072,39073,39102,39130,39158,39186],{":tabs":1557},[212,39074,39076],{"className":334,"code":39075,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChrome \u002F>\n\u003C\u002FShader>\n",[99,39077,39078,39086,39094],{"__ignoreMap":178},[220,39079,39080,39082,39084],{"class":222,"line":223},[220,39081,343],{"class":264},[220,39083,347],{"class":346},[220,39085,359],{"class":264},[220,39087,39088,39090,39092],{"class":222,"line":179},[220,39089,364],{"class":264},[220,39091,39053],{"class":346},[220,39093,386],{"class":264},[220,39095,39096,39098,39100],{"class":222,"line":389},[220,39097,402],{"class":264},[220,39099,347],{"class":346},[220,39101,359],{"class":264},[212,39103,39104],{"className":409,"code":39075,"language":411,"meta":178,"style":178},[99,39105,39106,39114,39122],{"__ignoreMap":178},[220,39107,39108,39110,39112],{"class":222,"line":223},[220,39109,343],{"class":264},[220,39111,347],{"class":420},[220,39113,359],{"class":264},[220,39115,39116,39118,39120],{"class":222,"line":179},[220,39117,364],{"class":264},[220,39119,39053],{"class":420},[220,39121,386],{"class":264},[220,39123,39124,39126,39128],{"class":222,"line":389},[220,39125,402],{"class":264},[220,39127,347],{"class":420},[220,39129,359],{"class":264},[212,39131,39132],{"className":2844,"code":39075,"language":2846,"meta":178,"style":178},[99,39133,39134,39142,39150],{"__ignoreMap":178},[220,39135,39136,39138,39140],{"class":222,"line":223},[220,39137,343],{"class":264},[220,39139,347],{"class":420},[220,39141,359],{"class":264},[220,39143,39144,39146,39148],{"class":222,"line":179},[220,39145,364],{"class":264},[220,39147,39053],{"class":420},[220,39149,386],{"class":264},[220,39151,39152,39154,39156],{"class":222,"line":389},[220,39153,402],{"class":264},[220,39155,347],{"class":420},[220,39157,359],{"class":264},[212,39159,39160],{"className":468,"code":39075,"language":469,"meta":178,"style":178},[99,39161,39162,39170,39178],{"__ignoreMap":178},[220,39163,39164,39166,39168],{"class":222,"line":223},[220,39165,343],{"class":264},[220,39167,347],{"class":420},[220,39169,359],{"class":264},[220,39171,39172,39174,39176],{"class":222,"line":179},[220,39173,364],{"class":264},[220,39175,39053],{"class":420},[220,39177,386],{"class":264},[220,39179,39180,39182,39184],{"class":222,"line":389},[220,39181,402],{"class":264},[220,39183,347],{"class":420},[220,39185,359],{"class":264},[212,39187,39189],{"className":251,"code":39188,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chrome', props: {} }\n ]\n})\n",[99,39190,39191,39201,39205,39219,39223,39232,39236],{"__ignoreMap":178},[220,39192,39193,39195,39197,39199],{"class":222,"line":223},[220,39194,261],{"class":260},[220,39196,11364],{"class":264},[220,39198,268],{"class":260},[220,39200,11369],{"class":230},[220,39202,39203],{"class":222,"line":179},[220,39204,647],{"emptyLinePlaceholder":194},[220,39206,39207,39209,39211,39213,39215,39217],{"class":222,"line":389},[220,39208,1735],{"class":260},[220,39210,1738],{"class":420},[220,39212,1741],{"class":260},[220,39214,1744],{"class":260},[220,39216,1747],{"class":226},[220,39218,1750],{"class":264},[220,39220,39221],{"class":222,"line":399},[220,39222,1765],{"class":264},[220,39224,39225,39227,39230],{"class":222,"line":644},[220,39226,1770],{"class":264},[220,39228,39229],{"class":230},"'Chrome'",[220,39231,2465],{"class":264},[220,39233,39234],{"class":222,"line":650},[220,39235,1787],{"class":264},[220,39237,39238],{"class":222,"line":656},[220,39239,1792],{"class":264},[1504,39241,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":39243},[39244,39245],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fchrome",{"title":39053,"description":39061},"docs\u002Fcomponents\u002FChrome","8vUmT1wbpASZaXB0iLj8I5lS9IHpVk7Gj43OXlxgeRI",{"id":39252,"title":2553,"body":39253,"category":15765,"componentType":25734,"description":39260,"extension":191,"meta":39535,"navigation":194,"path":39536,"requiresChild":32390,"seo":39537,"stem":39538,"__hash__":39539},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":39254,"toc":39531},[39255,39258,39261,39263,39265,39268,39270,39529],[11,39256,2553],{"id":39257},"circle",[15,39259,39260],{},"Generate a circle with adjustable size and softness",[31771,39262],{"component":2553},[23,39264,31775],{"id":26391},[31777,39266],{":props":39267},"[{\"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,39269,31783],{"id":31782},[246,39271,39272,39319,39370,39418,39468],{":tabs":1557},[212,39273,39275],{"className":334,"code":39274,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,39276,39277,39285,39291,39299,39307,39311],{"__ignoreMap":178},[220,39278,39279,39281,39283],{"class":222,"line":223},[220,39280,343],{"class":264},[220,39282,347],{"class":346},[220,39284,359],{"class":264},[220,39286,39287,39289],{"class":222,"line":179},[220,39288,364],{"class":264},[220,39290,9482],{"class":346},[220,39292,39293,39295,39297],{"class":222,"line":389},[220,39294,9487],{"class":226},[220,39296,353],{"class":264},[220,39298,9443],{"class":230},[220,39300,39301,39303,39305],{"class":222,"line":399},[220,39302,17262],{"class":226},[220,39304,353],{"class":264},[220,39306,36485],{"class":230},[220,39308,39309],{"class":222,"line":644},[220,39310,1234],{"class":264},[220,39312,39313,39315,39317],{"class":222,"line":650},[220,39314,402],{"class":264},[220,39316,347],{"class":346},[220,39318,359],{"class":264},[212,39320,39322],{"className":409,"code":39321,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,39323,39324,39332,39338,39346,39358,39362],{"__ignoreMap":178},[220,39325,39326,39328,39330],{"class":222,"line":223},[220,39327,343],{"class":264},[220,39329,347],{"class":420},[220,39331,359],{"class":264},[220,39333,39334,39336],{"class":222,"line":179},[220,39335,364],{"class":264},[220,39337,9482],{"class":420},[220,39339,39340,39342,39344],{"class":222,"line":389},[220,39341,9487],{"class":226},[220,39343,353],{"class":260},[220,39345,9443],{"class":230},[220,39347,39348,39350,39352,39354,39356],{"class":222,"line":399},[220,39349,9497],{"class":226},[220,39351,353],{"class":260},[220,39353,743],{"class":264},[220,39355,8528],{"class":420},[220,39357,749],{"class":264},[220,39359,39360],{"class":222,"line":644},[220,39361,1234],{"class":264},[220,39363,39364,39366,39368],{"class":222,"line":650},[220,39365,402],{"class":264},[220,39367,347],{"class":420},[220,39369,359],{"class":264},[212,39371,39372],{"className":2844,"code":39321,"language":2846,"meta":178,"style":178},[99,39373,39374,39382,39388,39396,39406,39410],{"__ignoreMap":178},[220,39375,39376,39378,39380],{"class":222,"line":223},[220,39377,343],{"class":264},[220,39379,347],{"class":420},[220,39381,359],{"class":264},[220,39383,39384,39386],{"class":222,"line":179},[220,39385,364],{"class":264},[220,39387,9482],{"class":420},[220,39389,39390,39392,39394],{"class":222,"line":389},[220,39391,9487],{"class":226},[220,39393,353],{"class":264},[220,39395,9443],{"class":230},[220,39397,39398,39400,39402,39404],{"class":222,"line":399},[220,39399,9497],{"class":226},[220,39401,29729],{"class":264},[220,39403,8528],{"class":420},[220,39405,749],{"class":264},[220,39407,39408],{"class":222,"line":644},[220,39409,1234],{"class":264},[220,39411,39412,39414,39416],{"class":222,"line":650},[220,39413,402],{"class":264},[220,39415,347],{"class":420},[220,39417,359],{"class":264},[212,39419,39420],{"className":468,"code":39321,"language":469,"meta":178,"style":178},[99,39421,39422,39430,39436,39444,39456,39460],{"__ignoreMap":178},[220,39423,39424,39426,39428],{"class":222,"line":223},[220,39425,343],{"class":264},[220,39427,347],{"class":420},[220,39429,359],{"class":264},[220,39431,39432,39434],{"class":222,"line":179},[220,39433,364],{"class":264},[220,39435,9482],{"class":420},[220,39437,39438,39440,39442],{"class":222,"line":389},[220,39439,9487],{"class":226},[220,39441,353],{"class":260},[220,39443,9443],{"class":230},[220,39445,39446,39448,39450,39452,39454],{"class":222,"line":399},[220,39447,9497],{"class":226},[220,39449,353],{"class":260},[220,39451,743],{"class":264},[220,39453,8528],{"class":420},[220,39455,749],{"class":264},[220,39457,39458],{"class":222,"line":644},[220,39459,1234],{"class":264},[220,39461,39462,39464,39466],{"class":222,"line":650},[220,39463,402],{"class":264},[220,39465,347],{"class":420},[220,39467,359],{"class":264},[212,39469,39471],{"className":251,"code":39470,"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,39472,39473,39483,39487,39501,39505,39521,39525],{"__ignoreMap":178},[220,39474,39475,39477,39479,39481],{"class":222,"line":223},[220,39476,261],{"class":260},[220,39478,11364],{"class":264},[220,39480,268],{"class":260},[220,39482,11369],{"class":230},[220,39484,39485],{"class":222,"line":179},[220,39486,647],{"emptyLinePlaceholder":194},[220,39488,39489,39491,39493,39495,39497,39499],{"class":222,"line":389},[220,39490,1735],{"class":260},[220,39492,1738],{"class":420},[220,39494,1741],{"class":260},[220,39496,1744],{"class":260},[220,39498,1747],{"class":226},[220,39500,1750],{"class":264},[220,39502,39503],{"class":222,"line":399},[220,39504,1765],{"class":264},[220,39506,39507,39509,39511,39513,39515,39517,39519],{"class":222,"line":644},[220,39508,1770],{"class":264},[220,39510,6409],{"class":230},[220,39512,1776],{"class":264},[220,39514,10021],{"class":230},[220,39516,6417],{"class":264},[220,39518,8528],{"class":420},[220,39520,1782],{"class":264},[220,39522,39523],{"class":222,"line":650},[220,39524,1787],{"class":264},[220,39526,39527],{"class":222,"line":656},[220,39528,1792],{"class":264},[1504,39530,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39532},[39533,39534],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":39260},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":39541,"title":39542,"body":39543,"category":32923,"componentType":25734,"description":39550,"extension":191,"meta":39735,"navigation":194,"path":39736,"requiresChild":32390,"seo":39737,"stem":39738,"__hash__":39739},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":39544,"toc":39731},[39545,39548,39551,39553,39555,39558,39560,39729],[11,39546,39542],{"id":39547},"colorwheel",[15,39549,39550],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31771,39552],{"component":39542},[23,39554,31775],{"id":26391},[31777,39556],{":props":39557},"[{\"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,39559,31783],{"id":31782},[246,39561,39562,39591,39619,39647,39675],{":tabs":1557},[212,39563,39565],{"className":334,"code":39564,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,39566,39567,39575,39583],{"__ignoreMap":178},[220,39568,39569,39571,39573],{"class":222,"line":223},[220,39570,343],{"class":264},[220,39572,347],{"class":346},[220,39574,359],{"class":264},[220,39576,39577,39579,39581],{"class":222,"line":179},[220,39578,364],{"class":264},[220,39580,39542],{"class":346},[220,39582,386],{"class":264},[220,39584,39585,39587,39589],{"class":222,"line":389},[220,39586,402],{"class":264},[220,39588,347],{"class":346},[220,39590,359],{"class":264},[212,39592,39593],{"className":409,"code":39564,"language":411,"meta":178,"style":178},[99,39594,39595,39603,39611],{"__ignoreMap":178},[220,39596,39597,39599,39601],{"class":222,"line":223},[220,39598,343],{"class":264},[220,39600,347],{"class":420},[220,39602,359],{"class":264},[220,39604,39605,39607,39609],{"class":222,"line":179},[220,39606,364],{"class":264},[220,39608,39542],{"class":420},[220,39610,386],{"class":264},[220,39612,39613,39615,39617],{"class":222,"line":389},[220,39614,402],{"class":264},[220,39616,347],{"class":420},[220,39618,359],{"class":264},[212,39620,39621],{"className":2844,"code":39564,"language":2846,"meta":178,"style":178},[99,39622,39623,39631,39639],{"__ignoreMap":178},[220,39624,39625,39627,39629],{"class":222,"line":223},[220,39626,343],{"class":264},[220,39628,347],{"class":420},[220,39630,359],{"class":264},[220,39632,39633,39635,39637],{"class":222,"line":179},[220,39634,364],{"class":264},[220,39636,39542],{"class":420},[220,39638,386],{"class":264},[220,39640,39641,39643,39645],{"class":222,"line":389},[220,39642,402],{"class":264},[220,39644,347],{"class":420},[220,39646,359],{"class":264},[212,39648,39649],{"className":468,"code":39564,"language":469,"meta":178,"style":178},[99,39650,39651,39659,39667],{"__ignoreMap":178},[220,39652,39653,39655,39657],{"class":222,"line":223},[220,39654,343],{"class":264},[220,39656,347],{"class":420},[220,39658,359],{"class":264},[220,39660,39661,39663,39665],{"class":222,"line":179},[220,39662,364],{"class":264},[220,39664,39542],{"class":420},[220,39666,386],{"class":264},[220,39668,39669,39671,39673],{"class":222,"line":389},[220,39670,402],{"class":264},[220,39672,347],{"class":420},[220,39674,359],{"class":264},[212,39676,39678],{"className":251,"code":39677,"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,39679,39680,39690,39694,39708,39712,39721,39725],{"__ignoreMap":178},[220,39681,39682,39684,39686,39688],{"class":222,"line":223},[220,39683,261],{"class":260},[220,39685,11364],{"class":264},[220,39687,268],{"class":260},[220,39689,11369],{"class":230},[220,39691,39692],{"class":222,"line":179},[220,39693,647],{"emptyLinePlaceholder":194},[220,39695,39696,39698,39700,39702,39704,39706],{"class":222,"line":389},[220,39697,1735],{"class":260},[220,39699,1738],{"class":420},[220,39701,1741],{"class":260},[220,39703,1744],{"class":260},[220,39705,1747],{"class":226},[220,39707,1750],{"class":264},[220,39709,39710],{"class":222,"line":399},[220,39711,1765],{"class":264},[220,39713,39714,39716,39719],{"class":222,"line":644},[220,39715,1770],{"class":264},[220,39717,39718],{"class":230},"'ColorWheel'",[220,39720,2465],{"class":264},[220,39722,39723],{"class":222,"line":650},[220,39724,1787],{"class":264},[220,39726,39727],{"class":222,"line":656},[220,39728,1792],{"class":264},[1504,39730,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":39732},[39733,39734],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":39542,"description":39550},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39741,"title":39742,"body":39743,"category":32666,"componentType":25740,"description":39750,"extension":191,"meta":40011,"navigation":194,"path":40012,"requiresChild":194,"seo":40013,"stem":40014,"__hash__":40015},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39744,"toc":40007},[39745,39748,39751,39753,39755,39758,39760,40005],[11,39746,39742],{"id":39747},"compressionartifacts",[15,39749,39750],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31771,39752],{"component":39742},[23,39754,31775],{"id":26391},[31777,39756],{":props":39757},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39759,31783],{"id":31782},[246,39761,39762,39807,39851,39895,39939],{":tabs":1557},[212,39763,39765],{"className":334,"code":39764,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39766,39767,39775,39783,39791,39799],{"__ignoreMap":178},[220,39768,39769,39771,39773],{"class":222,"line":223},[220,39770,343],{"class":264},[220,39772,347],{"class":346},[220,39774,359],{"class":264},[220,39776,39777,39779,39781],{"class":222,"line":179},[220,39778,364],{"class":264},[220,39780,39742],{"class":346},[220,39782,359],{"class":264},[220,39784,39785,39787,39789],{"class":222,"line":389},[220,39786,2550],{"class":264},[220,39788,2553],{"class":346},[220,39790,386],{"class":264},[220,39792,39793,39795,39797],{"class":222,"line":399},[220,39794,2567],{"class":264},[220,39796,39742],{"class":346},[220,39798,359],{"class":264},[220,39800,39801,39803,39805],{"class":222,"line":644},[220,39802,402],{"class":264},[220,39804,347],{"class":346},[220,39806,359],{"class":264},[212,39808,39809],{"className":409,"code":39764,"language":411,"meta":178,"style":178},[99,39810,39811,39819,39827,39835,39843],{"__ignoreMap":178},[220,39812,39813,39815,39817],{"class":222,"line":223},[220,39814,343],{"class":264},[220,39816,347],{"class":420},[220,39818,359],{"class":264},[220,39820,39821,39823,39825],{"class":222,"line":179},[220,39822,364],{"class":264},[220,39824,39742],{"class":420},[220,39826,359],{"class":264},[220,39828,39829,39831,39833],{"class":222,"line":389},[220,39830,2550],{"class":264},[220,39832,2553],{"class":420},[220,39834,386],{"class":264},[220,39836,39837,39839,39841],{"class":222,"line":399},[220,39838,2567],{"class":264},[220,39840,39742],{"class":420},[220,39842,359],{"class":264},[220,39844,39845,39847,39849],{"class":222,"line":644},[220,39846,402],{"class":264},[220,39848,347],{"class":420},[220,39850,359],{"class":264},[212,39852,39853],{"className":2844,"code":39764,"language":2846,"meta":178,"style":178},[99,39854,39855,39863,39871,39879,39887],{"__ignoreMap":178},[220,39856,39857,39859,39861],{"class":222,"line":223},[220,39858,343],{"class":264},[220,39860,347],{"class":420},[220,39862,359],{"class":264},[220,39864,39865,39867,39869],{"class":222,"line":179},[220,39866,364],{"class":264},[220,39868,39742],{"class":420},[220,39870,359],{"class":264},[220,39872,39873,39875,39877],{"class":222,"line":389},[220,39874,2550],{"class":264},[220,39876,2553],{"class":420},[220,39878,386],{"class":264},[220,39880,39881,39883,39885],{"class":222,"line":399},[220,39882,2567],{"class":264},[220,39884,39742],{"class":420},[220,39886,359],{"class":264},[220,39888,39889,39891,39893],{"class":222,"line":644},[220,39890,402],{"class":264},[220,39892,347],{"class":420},[220,39894,359],{"class":264},[212,39896,39897],{"className":468,"code":39764,"language":469,"meta":178,"style":178},[99,39898,39899,39907,39915,39923,39931],{"__ignoreMap":178},[220,39900,39901,39903,39905],{"class":222,"line":223},[220,39902,343],{"class":264},[220,39904,347],{"class":420},[220,39906,359],{"class":264},[220,39908,39909,39911,39913],{"class":222,"line":179},[220,39910,364],{"class":264},[220,39912,39742],{"class":420},[220,39914,359],{"class":264},[220,39916,39917,39919,39921],{"class":222,"line":389},[220,39918,2550],{"class":264},[220,39920,2553],{"class":420},[220,39922,386],{"class":264},[220,39924,39925,39927,39929],{"class":222,"line":399},[220,39926,2567],{"class":264},[220,39928,39742],{"class":420},[220,39930,359],{"class":264},[220,39932,39933,39935,39937],{"class":222,"line":644},[220,39934,402],{"class":264},[220,39936,347],{"class":420},[220,39938,359],{"class":264},[212,39940,39942],{"className":251,"code":39941,"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,39943,39944,39954,39958,39972,39976,39985,39993,39997,40001],{"__ignoreMap":178},[220,39945,39946,39948,39950,39952],{"class":222,"line":223},[220,39947,261],{"class":260},[220,39949,11364],{"class":264},[220,39951,268],{"class":260},[220,39953,11369],{"class":230},[220,39955,39956],{"class":222,"line":179},[220,39957,647],{"emptyLinePlaceholder":194},[220,39959,39960,39962,39964,39966,39968,39970],{"class":222,"line":389},[220,39961,1735],{"class":260},[220,39963,1738],{"class":420},[220,39965,1741],{"class":260},[220,39967,1744],{"class":260},[220,39969,1747],{"class":226},[220,39971,1750],{"class":264},[220,39973,39974],{"class":222,"line":399},[220,39975,1765],{"class":264},[220,39977,39978,39980,39983],{"class":222,"line":644},[220,39979,1770],{"class":264},[220,39981,39982],{"class":230},"'CompressionArtifacts'",[220,39984,6860],{"class":264},[220,39986,39987,39989,39991],{"class":222,"line":650},[220,39988,6865],{"class":264},[220,39990,6409],{"class":230},[220,39992,2465],{"class":264},[220,39994,39995],{"class":222,"line":656},[220,39996,6882],{"class":264},[220,39998,39999],{"class":222,"line":673},[220,40000,1787],{"class":264},[220,40002,40003],{"class":222,"line":682},[220,40004,1792],{"class":264},[1504,40006,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":40008},[40009,40010],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39742,"description":39750},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":40017,"title":40018,"body":40019,"category":33256,"componentType":25740,"description":40026,"extension":191,"meta":40343,"navigation":194,"path":40344,"requiresChild":194,"seo":40345,"stem":40346,"__hash__":40347},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":40020,"toc":40339},[40021,40024,40027,40029,40031,40034,40036,40337],[11,40022,40018],{"id":40023},"concentricspin",[15,40025,40026],{},"Concentric rings that each rotate the underlying image by different amounts",[31771,40028],{"component":40018},[23,40030,31775],{"id":26391},[31777,40032],{":props":40033},"[{\"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,40035,31783],{"id":31782},[246,40037,40038,40094,40153,40209,40267],{":tabs":1557},[212,40039,40041],{"className":334,"code":40040,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40042,40043,40051,40058,40066,40070,40078,40086],{"__ignoreMap":178},[220,40044,40045,40047,40049],{"class":222,"line":223},[220,40046,343],{"class":264},[220,40048,347],{"class":346},[220,40050,359],{"class":264},[220,40052,40053,40055],{"class":222,"line":179},[220,40054,364],{"class":264},[220,40056,40057],{"class":346},"ConcentricSpin\n",[220,40059,40060,40062,40064],{"class":222,"line":389},[220,40061,20228],{"class":226},[220,40063,353],{"class":264},[220,40065,31814],{"class":230},[220,40067,40068],{"class":222,"line":399},[220,40069,31819],{"class":264},[220,40071,40072,40074,40076],{"class":222,"line":644},[220,40073,2550],{"class":264},[220,40075,2553],{"class":346},[220,40077,386],{"class":264},[220,40079,40080,40082,40084],{"class":222,"line":650},[220,40081,2567],{"class":264},[220,40083,40018],{"class":346},[220,40085,359],{"class":264},[220,40087,40088,40090,40092],{"class":222,"line":656},[220,40089,402],{"class":264},[220,40091,347],{"class":346},[220,40093,359],{"class":264},[212,40095,40097],{"className":409,"code":40096,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40098,40099,40107,40113,40125,40129,40137,40145],{"__ignoreMap":178},[220,40100,40101,40103,40105],{"class":222,"line":223},[220,40102,343],{"class":264},[220,40104,347],{"class":420},[220,40106,359],{"class":264},[220,40108,40109,40111],{"class":222,"line":179},[220,40110,364],{"class":264},[220,40112,40057],{"class":420},[220,40114,40115,40117,40119,40121,40123],{"class":222,"line":389},[220,40116,20339],{"class":226},[220,40118,353],{"class":260},[220,40120,743],{"class":264},[220,40122,24657],{"class":420},[220,40124,749],{"class":264},[220,40126,40127],{"class":222,"line":399},[220,40128,31819],{"class":264},[220,40130,40131,40133,40135],{"class":222,"line":644},[220,40132,2550],{"class":264},[220,40134,2553],{"class":420},[220,40136,386],{"class":264},[220,40138,40139,40141,40143],{"class":222,"line":650},[220,40140,2567],{"class":264},[220,40142,40018],{"class":420},[220,40144,359],{"class":264},[220,40146,40147,40149,40151],{"class":222,"line":656},[220,40148,402],{"class":264},[220,40150,347],{"class":420},[220,40152,359],{"class":264},[212,40154,40155],{"className":2844,"code":40096,"language":2846,"meta":178,"style":178},[99,40156,40157,40165,40171,40181,40185,40193,40201],{"__ignoreMap":178},[220,40158,40159,40161,40163],{"class":222,"line":223},[220,40160,343],{"class":264},[220,40162,347],{"class":420},[220,40164,359],{"class":264},[220,40166,40167,40169],{"class":222,"line":179},[220,40168,364],{"class":264},[220,40170,40057],{"class":420},[220,40172,40173,40175,40177,40179],{"class":222,"line":389},[220,40174,20339],{"class":226},[220,40176,29729],{"class":264},[220,40178,24657],{"class":420},[220,40180,749],{"class":264},[220,40182,40183],{"class":222,"line":399},[220,40184,31819],{"class":264},[220,40186,40187,40189,40191],{"class":222,"line":644},[220,40188,2550],{"class":264},[220,40190,2553],{"class":420},[220,40192,386],{"class":264},[220,40194,40195,40197,40199],{"class":222,"line":650},[220,40196,2567],{"class":264},[220,40198,40018],{"class":420},[220,40200,359],{"class":264},[220,40202,40203,40205,40207],{"class":222,"line":656},[220,40204,402],{"class":264},[220,40206,347],{"class":420},[220,40208,359],{"class":264},[212,40210,40211],{"className":468,"code":40096,"language":469,"meta":178,"style":178},[99,40212,40213,40221,40227,40239,40243,40251,40259],{"__ignoreMap":178},[220,40214,40215,40217,40219],{"class":222,"line":223},[220,40216,343],{"class":264},[220,40218,347],{"class":420},[220,40220,359],{"class":264},[220,40222,40223,40225],{"class":222,"line":179},[220,40224,364],{"class":264},[220,40226,40057],{"class":420},[220,40228,40229,40231,40233,40235,40237],{"class":222,"line":389},[220,40230,20339],{"class":226},[220,40232,353],{"class":260},[220,40234,743],{"class":264},[220,40236,24657],{"class":420},[220,40238,749],{"class":264},[220,40240,40241],{"class":222,"line":399},[220,40242,31819],{"class":264},[220,40244,40245,40247,40249],{"class":222,"line":644},[220,40246,2550],{"class":264},[220,40248,2553],{"class":420},[220,40250,386],{"class":264},[220,40252,40253,40255,40257],{"class":222,"line":650},[220,40254,2567],{"class":264},[220,40256,40018],{"class":420},[220,40258,359],{"class":264},[220,40260,40261,40263,40265],{"class":222,"line":656},[220,40262,402],{"class":264},[220,40264,347],{"class":420},[220,40266,359],{"class":264},[212,40268,40270],{"className":251,"code":40269,"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,40271,40272,40282,40286,40300,40304,40317,40325,40329,40333],{"__ignoreMap":178},[220,40273,40274,40276,40278,40280],{"class":222,"line":223},[220,40275,261],{"class":260},[220,40277,11364],{"class":264},[220,40279,268],{"class":260},[220,40281,11369],{"class":230},[220,40283,40284],{"class":222,"line":179},[220,40285,647],{"emptyLinePlaceholder":194},[220,40287,40288,40290,40292,40294,40296,40298],{"class":222,"line":389},[220,40289,1735],{"class":260},[220,40291,1738],{"class":420},[220,40293,1741],{"class":260},[220,40295,1744],{"class":260},[220,40297,1747],{"class":226},[220,40299,1750],{"class":264},[220,40301,40302],{"class":222,"line":399},[220,40303,1765],{"class":264},[220,40305,40306,40308,40311,40313,40315],{"class":222,"line":644},[220,40307,1770],{"class":264},[220,40309,40310],{"class":230},"'ConcentricSpin'",[220,40312,32063],{"class":264},[220,40314,24657],{"class":420},[220,40316,7397],{"class":264},[220,40318,40319,40321,40323],{"class":222,"line":650},[220,40320,6865],{"class":264},[220,40322,6409],{"class":230},[220,40324,2465],{"class":264},[220,40326,40327],{"class":222,"line":656},[220,40328,6882],{"class":264},[220,40330,40331],{"class":222,"line":673},[220,40332,1787],{"class":264},[220,40334,40335],{"class":222,"line":682},[220,40336,1792],{"class":264},[1504,40338,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40340},[40341,40342],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":40018,"description":40026},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":40349,"title":40350,"body":40351,"category":32923,"componentType":25734,"description":40358,"extension":191,"meta":40543,"navigation":194,"path":40544,"requiresChild":32390,"seo":40545,"stem":40546,"__hash__":40547},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":40352,"toc":40539},[40353,40356,40359,40361,40363,40366,40368,40537],[11,40354,40350],{"id":40355},"conicgradient",[15,40357,40358],{},"Colors sweep in a full circle around a center point, like a color wheel",[31771,40360],{"component":40350},[23,40362,31775],{"id":26391},[31777,40364],{":props":40365},"[{\"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,40367,31783],{"id":31782},[246,40369,40370,40399,40427,40455,40483],{":tabs":1557},[212,40371,40373],{"className":334,"code":40372,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,40374,40375,40383,40391],{"__ignoreMap":178},[220,40376,40377,40379,40381],{"class":222,"line":223},[220,40378,343],{"class":264},[220,40380,347],{"class":346},[220,40382,359],{"class":264},[220,40384,40385,40387,40389],{"class":222,"line":179},[220,40386,364],{"class":264},[220,40388,40350],{"class":346},[220,40390,386],{"class":264},[220,40392,40393,40395,40397],{"class":222,"line":389},[220,40394,402],{"class":264},[220,40396,347],{"class":346},[220,40398,359],{"class":264},[212,40400,40401],{"className":409,"code":40372,"language":411,"meta":178,"style":178},[99,40402,40403,40411,40419],{"__ignoreMap":178},[220,40404,40405,40407,40409],{"class":222,"line":223},[220,40406,343],{"class":264},[220,40408,347],{"class":420},[220,40410,359],{"class":264},[220,40412,40413,40415,40417],{"class":222,"line":179},[220,40414,364],{"class":264},[220,40416,40350],{"class":420},[220,40418,386],{"class":264},[220,40420,40421,40423,40425],{"class":222,"line":389},[220,40422,402],{"class":264},[220,40424,347],{"class":420},[220,40426,359],{"class":264},[212,40428,40429],{"className":2844,"code":40372,"language":2846,"meta":178,"style":178},[99,40430,40431,40439,40447],{"__ignoreMap":178},[220,40432,40433,40435,40437],{"class":222,"line":223},[220,40434,343],{"class":264},[220,40436,347],{"class":420},[220,40438,359],{"class":264},[220,40440,40441,40443,40445],{"class":222,"line":179},[220,40442,364],{"class":264},[220,40444,40350],{"class":420},[220,40446,386],{"class":264},[220,40448,40449,40451,40453],{"class":222,"line":389},[220,40450,402],{"class":264},[220,40452,347],{"class":420},[220,40454,359],{"class":264},[212,40456,40457],{"className":468,"code":40372,"language":469,"meta":178,"style":178},[99,40458,40459,40467,40475],{"__ignoreMap":178},[220,40460,40461,40463,40465],{"class":222,"line":223},[220,40462,343],{"class":264},[220,40464,347],{"class":420},[220,40466,359],{"class":264},[220,40468,40469,40471,40473],{"class":222,"line":179},[220,40470,364],{"class":264},[220,40472,40350],{"class":420},[220,40474,386],{"class":264},[220,40476,40477,40479,40481],{"class":222,"line":389},[220,40478,402],{"class":264},[220,40480,347],{"class":420},[220,40482,359],{"class":264},[212,40484,40486],{"className":251,"code":40485,"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,40487,40488,40498,40502,40516,40520,40529,40533],{"__ignoreMap":178},[220,40489,40490,40492,40494,40496],{"class":222,"line":223},[220,40491,261],{"class":260},[220,40493,11364],{"class":264},[220,40495,268],{"class":260},[220,40497,11369],{"class":230},[220,40499,40500],{"class":222,"line":179},[220,40501,647],{"emptyLinePlaceholder":194},[220,40503,40504,40506,40508,40510,40512,40514],{"class":222,"line":389},[220,40505,1735],{"class":260},[220,40507,1738],{"class":420},[220,40509,1741],{"class":260},[220,40511,1744],{"class":260},[220,40513,1747],{"class":226},[220,40515,1750],{"class":264},[220,40517,40518],{"class":222,"line":399},[220,40519,1765],{"class":264},[220,40521,40522,40524,40527],{"class":222,"line":644},[220,40523,1770],{"class":264},[220,40525,40526],{"class":230},"'ConicGradient'",[220,40528,2465],{"class":264},[220,40530,40531],{"class":222,"line":650},[220,40532,1787],{"class":264},[220,40534,40535],{"class":222,"line":656},[220,40536,1792],{"class":264},[1504,40538,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":40540},[40541,40542],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":40350,"description":40358},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":40549,"title":40550,"body":40551,"category":32666,"componentType":25740,"description":40558,"extension":191,"meta":40819,"navigation":194,"path":40820,"requiresChild":194,"seo":40821,"stem":40822,"__hash__":40823},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":40552,"toc":40815},[40553,40556,40559,40561,40563,40566,40568,40813],[11,40554,40550],{"id":40555},"contourlines",[15,40557,40558],{},"Draw topographical contour lines based on luminance or alpha",[31771,40560],{"component":40550},[23,40562,31775],{"id":26391},[31777,40564],{":props":40565},"[{\"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,40567,31783],{"id":31782},[246,40569,40570,40615,40659,40703,40747],{":tabs":1557},[212,40571,40573],{"className":334,"code":40572,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,40574,40575,40583,40591,40599,40607],{"__ignoreMap":178},[220,40576,40577,40579,40581],{"class":222,"line":223},[220,40578,343],{"class":264},[220,40580,347],{"class":346},[220,40582,359],{"class":264},[220,40584,40585,40587,40589],{"class":222,"line":179},[220,40586,364],{"class":264},[220,40588,40550],{"class":346},[220,40590,359],{"class":264},[220,40592,40593,40595,40597],{"class":222,"line":389},[220,40594,2550],{"class":264},[220,40596,2553],{"class":346},[220,40598,386],{"class":264},[220,40600,40601,40603,40605],{"class":222,"line":399},[220,40602,2567],{"class":264},[220,40604,40550],{"class":346},[220,40606,359],{"class":264},[220,40608,40609,40611,40613],{"class":222,"line":644},[220,40610,402],{"class":264},[220,40612,347],{"class":346},[220,40614,359],{"class":264},[212,40616,40617],{"className":409,"code":40572,"language":411,"meta":178,"style":178},[99,40618,40619,40627,40635,40643,40651],{"__ignoreMap":178},[220,40620,40621,40623,40625],{"class":222,"line":223},[220,40622,343],{"class":264},[220,40624,347],{"class":420},[220,40626,359],{"class":264},[220,40628,40629,40631,40633],{"class":222,"line":179},[220,40630,364],{"class":264},[220,40632,40550],{"class":420},[220,40634,359],{"class":264},[220,40636,40637,40639,40641],{"class":222,"line":389},[220,40638,2550],{"class":264},[220,40640,2553],{"class":420},[220,40642,386],{"class":264},[220,40644,40645,40647,40649],{"class":222,"line":399},[220,40646,2567],{"class":264},[220,40648,40550],{"class":420},[220,40650,359],{"class":264},[220,40652,40653,40655,40657],{"class":222,"line":644},[220,40654,402],{"class":264},[220,40656,347],{"class":420},[220,40658,359],{"class":264},[212,40660,40661],{"className":2844,"code":40572,"language":2846,"meta":178,"style":178},[99,40662,40663,40671,40679,40687,40695],{"__ignoreMap":178},[220,40664,40665,40667,40669],{"class":222,"line":223},[220,40666,343],{"class":264},[220,40668,347],{"class":420},[220,40670,359],{"class":264},[220,40672,40673,40675,40677],{"class":222,"line":179},[220,40674,364],{"class":264},[220,40676,40550],{"class":420},[220,40678,359],{"class":264},[220,40680,40681,40683,40685],{"class":222,"line":389},[220,40682,2550],{"class":264},[220,40684,2553],{"class":420},[220,40686,386],{"class":264},[220,40688,40689,40691,40693],{"class":222,"line":399},[220,40690,2567],{"class":264},[220,40692,40550],{"class":420},[220,40694,359],{"class":264},[220,40696,40697,40699,40701],{"class":222,"line":644},[220,40698,402],{"class":264},[220,40700,347],{"class":420},[220,40702,359],{"class":264},[212,40704,40705],{"className":468,"code":40572,"language":469,"meta":178,"style":178},[99,40706,40707,40715,40723,40731,40739],{"__ignoreMap":178},[220,40708,40709,40711,40713],{"class":222,"line":223},[220,40710,343],{"class":264},[220,40712,347],{"class":420},[220,40714,359],{"class":264},[220,40716,40717,40719,40721],{"class":222,"line":179},[220,40718,364],{"class":264},[220,40720,40550],{"class":420},[220,40722,359],{"class":264},[220,40724,40725,40727,40729],{"class":222,"line":389},[220,40726,2550],{"class":264},[220,40728,2553],{"class":420},[220,40730,386],{"class":264},[220,40732,40733,40735,40737],{"class":222,"line":399},[220,40734,2567],{"class":264},[220,40736,40550],{"class":420},[220,40738,359],{"class":264},[220,40740,40741,40743,40745],{"class":222,"line":644},[220,40742,402],{"class":264},[220,40744,347],{"class":420},[220,40746,359],{"class":264},[212,40748,40750],{"className":251,"code":40749,"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,40751,40752,40762,40766,40780,40784,40793,40801,40805,40809],{"__ignoreMap":178},[220,40753,40754,40756,40758,40760],{"class":222,"line":223},[220,40755,261],{"class":260},[220,40757,11364],{"class":264},[220,40759,268],{"class":260},[220,40761,11369],{"class":230},[220,40763,40764],{"class":222,"line":179},[220,40765,647],{"emptyLinePlaceholder":194},[220,40767,40768,40770,40772,40774,40776,40778],{"class":222,"line":389},[220,40769,1735],{"class":260},[220,40771,1738],{"class":420},[220,40773,1741],{"class":260},[220,40775,1744],{"class":260},[220,40777,1747],{"class":226},[220,40779,1750],{"class":264},[220,40781,40782],{"class":222,"line":399},[220,40783,1765],{"class":264},[220,40785,40786,40788,40791],{"class":222,"line":644},[220,40787,1770],{"class":264},[220,40789,40790],{"class":230},"'ContourLines'",[220,40792,6860],{"class":264},[220,40794,40795,40797,40799],{"class":222,"line":650},[220,40796,6865],{"class":264},[220,40798,6409],{"class":230},[220,40800,2465],{"class":264},[220,40802,40803],{"class":222,"line":656},[220,40804,6882],{"class":264},[220,40806,40807],{"class":222,"line":673},[220,40808,1787],{"class":264},[220,40810,40811],{"class":222,"line":682},[220,40812,1792],{"class":264},[1504,40814,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":40816},[40817,40818],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":40550,"description":40558},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40825,"title":40826,"body":40827,"category":33256,"componentType":25740,"description":40834,"extension":191,"meta":41095,"navigation":194,"path":41096,"requiresChild":194,"seo":41097,"stem":41098,"__hash__":41099},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40828,"toc":41091},[40829,40832,40835,40837,40839,40842,40844,41089],[11,40830,40826],{"id":40831},"cornerpin",[15,40833,40834],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31771,40836],{"component":40826},[23,40838,31775],{"id":26391},[31777,40840],{":props":40841},"[{\"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,40843,31783],{"id":31782},[246,40845,40846,40891,40935,40979,41023],{":tabs":1557},[212,40847,40849],{"className":334,"code":40848,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40850,40851,40859,40867,40875,40883],{"__ignoreMap":178},[220,40852,40853,40855,40857],{"class":222,"line":223},[220,40854,343],{"class":264},[220,40856,347],{"class":346},[220,40858,359],{"class":264},[220,40860,40861,40863,40865],{"class":222,"line":179},[220,40862,364],{"class":264},[220,40864,40826],{"class":346},[220,40866,359],{"class":264},[220,40868,40869,40871,40873],{"class":222,"line":389},[220,40870,2550],{"class":264},[220,40872,2553],{"class":346},[220,40874,386],{"class":264},[220,40876,40877,40879,40881],{"class":222,"line":399},[220,40878,2567],{"class":264},[220,40880,40826],{"class":346},[220,40882,359],{"class":264},[220,40884,40885,40887,40889],{"class":222,"line":644},[220,40886,402],{"class":264},[220,40888,347],{"class":346},[220,40890,359],{"class":264},[212,40892,40893],{"className":409,"code":40848,"language":411,"meta":178,"style":178},[99,40894,40895,40903,40911,40919,40927],{"__ignoreMap":178},[220,40896,40897,40899,40901],{"class":222,"line":223},[220,40898,343],{"class":264},[220,40900,347],{"class":420},[220,40902,359],{"class":264},[220,40904,40905,40907,40909],{"class":222,"line":179},[220,40906,364],{"class":264},[220,40908,40826],{"class":420},[220,40910,359],{"class":264},[220,40912,40913,40915,40917],{"class":222,"line":389},[220,40914,2550],{"class":264},[220,40916,2553],{"class":420},[220,40918,386],{"class":264},[220,40920,40921,40923,40925],{"class":222,"line":399},[220,40922,2567],{"class":264},[220,40924,40826],{"class":420},[220,40926,359],{"class":264},[220,40928,40929,40931,40933],{"class":222,"line":644},[220,40930,402],{"class":264},[220,40932,347],{"class":420},[220,40934,359],{"class":264},[212,40936,40937],{"className":2844,"code":40848,"language":2846,"meta":178,"style":178},[99,40938,40939,40947,40955,40963,40971],{"__ignoreMap":178},[220,40940,40941,40943,40945],{"class":222,"line":223},[220,40942,343],{"class":264},[220,40944,347],{"class":420},[220,40946,359],{"class":264},[220,40948,40949,40951,40953],{"class":222,"line":179},[220,40950,364],{"class":264},[220,40952,40826],{"class":420},[220,40954,359],{"class":264},[220,40956,40957,40959,40961],{"class":222,"line":389},[220,40958,2550],{"class":264},[220,40960,2553],{"class":420},[220,40962,386],{"class":264},[220,40964,40965,40967,40969],{"class":222,"line":399},[220,40966,2567],{"class":264},[220,40968,40826],{"class":420},[220,40970,359],{"class":264},[220,40972,40973,40975,40977],{"class":222,"line":644},[220,40974,402],{"class":264},[220,40976,347],{"class":420},[220,40978,359],{"class":264},[212,40980,40981],{"className":468,"code":40848,"language":469,"meta":178,"style":178},[99,40982,40983,40991,40999,41007,41015],{"__ignoreMap":178},[220,40984,40985,40987,40989],{"class":222,"line":223},[220,40986,343],{"class":264},[220,40988,347],{"class":420},[220,40990,359],{"class":264},[220,40992,40993,40995,40997],{"class":222,"line":179},[220,40994,364],{"class":264},[220,40996,40826],{"class":420},[220,40998,359],{"class":264},[220,41000,41001,41003,41005],{"class":222,"line":389},[220,41002,2550],{"class":264},[220,41004,2553],{"class":420},[220,41006,386],{"class":264},[220,41008,41009,41011,41013],{"class":222,"line":399},[220,41010,2567],{"class":264},[220,41012,40826],{"class":420},[220,41014,359],{"class":264},[220,41016,41017,41019,41021],{"class":222,"line":644},[220,41018,402],{"class":264},[220,41020,347],{"class":420},[220,41022,359],{"class":264},[212,41024,41026],{"className":251,"code":41025,"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,41027,41028,41038,41042,41056,41060,41069,41077,41081,41085],{"__ignoreMap":178},[220,41029,41030,41032,41034,41036],{"class":222,"line":223},[220,41031,261],{"class":260},[220,41033,11364],{"class":264},[220,41035,268],{"class":260},[220,41037,11369],{"class":230},[220,41039,41040],{"class":222,"line":179},[220,41041,647],{"emptyLinePlaceholder":194},[220,41043,41044,41046,41048,41050,41052,41054],{"class":222,"line":389},[220,41045,1735],{"class":260},[220,41047,1738],{"class":420},[220,41049,1741],{"class":260},[220,41051,1744],{"class":260},[220,41053,1747],{"class":226},[220,41055,1750],{"class":264},[220,41057,41058],{"class":222,"line":399},[220,41059,1765],{"class":264},[220,41061,41062,41064,41067],{"class":222,"line":644},[220,41063,1770],{"class":264},[220,41065,41066],{"class":230},"'CornerPin'",[220,41068,6860],{"class":264},[220,41070,41071,41073,41075],{"class":222,"line":650},[220,41072,6865],{"class":264},[220,41074,6409],{"class":230},[220,41076,2465],{"class":264},[220,41078,41079],{"class":222,"line":656},[220,41080,6882],{"class":264},[220,41082,41083],{"class":222,"line":673},[220,41084,1787],{"class":264},[220,41086,41087],{"class":222,"line":682},[220,41088,1792],{"class":264},[1504,41090,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":41092},[41093,41094],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40826,"description":40834},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":41101,"title":41102,"body":41103,"category":15765,"componentType":25734,"description":41110,"extension":191,"meta":41388,"navigation":194,"path":41389,"requiresChild":32390,"seo":41390,"stem":41391,"__hash__":41392},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":41104,"toc":41384},[41105,41108,41111,41113,41115,41118,41120,41382],[11,41106,41102],{"id":41107},"crescent",[15,41109,41110],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31771,41112],{"component":41102},[23,41114,31775],{"id":26391},[31777,41116],{":props":41117},"[{\"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,41119,31783],{"id":31782},[246,41121,41122,41171,41222,41270,41320],{":tabs":1557},[212,41123,41125],{"className":334,"code":41124,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,41126,41127,41135,41142,41150,41159,41163],{"__ignoreMap":178},[220,41128,41129,41131,41133],{"class":222,"line":223},[220,41130,343],{"class":264},[220,41132,347],{"class":346},[220,41134,359],{"class":264},[220,41136,41137,41139],{"class":222,"line":179},[220,41138,364],{"class":264},[220,41140,41141],{"class":346},"Crescent\n",[220,41143,41144,41146,41148],{"class":222,"line":389},[220,41145,9487],{"class":226},[220,41147,353],{"class":264},[220,41149,9443],{"class":230},[220,41151,41152,41154,41156],{"class":222,"line":399},[220,41153,17262],{"class":226},[220,41155,353],{"class":264},[220,41157,41158],{"class":230},"\"0.3\"\n",[220,41160,41161],{"class":222,"line":644},[220,41162,1234],{"class":264},[220,41164,41165,41167,41169],{"class":222,"line":650},[220,41166,402],{"class":264},[220,41168,347],{"class":346},[220,41170,359],{"class":264},[212,41172,41174],{"className":409,"code":41173,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,41175,41176,41184,41190,41198,41210,41214],{"__ignoreMap":178},[220,41177,41178,41180,41182],{"class":222,"line":223},[220,41179,343],{"class":264},[220,41181,347],{"class":420},[220,41183,359],{"class":264},[220,41185,41186,41188],{"class":222,"line":179},[220,41187,364],{"class":264},[220,41189,41141],{"class":420},[220,41191,41192,41194,41196],{"class":222,"line":389},[220,41193,9487],{"class":226},[220,41195,353],{"class":260},[220,41197,9443],{"class":230},[220,41199,41200,41202,41204,41206,41208],{"class":222,"line":399},[220,41201,9497],{"class":226},[220,41203,353],{"class":260},[220,41205,743],{"class":264},[220,41207,21861],{"class":420},[220,41209,749],{"class":264},[220,41211,41212],{"class":222,"line":644},[220,41213,1234],{"class":264},[220,41215,41216,41218,41220],{"class":222,"line":650},[220,41217,402],{"class":264},[220,41219,347],{"class":420},[220,41221,359],{"class":264},[212,41223,41224],{"className":2844,"code":41173,"language":2846,"meta":178,"style":178},[99,41225,41226,41234,41240,41248,41258,41262],{"__ignoreMap":178},[220,41227,41228,41230,41232],{"class":222,"line":223},[220,41229,343],{"class":264},[220,41231,347],{"class":420},[220,41233,359],{"class":264},[220,41235,41236,41238],{"class":222,"line":179},[220,41237,364],{"class":264},[220,41239,41141],{"class":420},[220,41241,41242,41244,41246],{"class":222,"line":389},[220,41243,9487],{"class":226},[220,41245,353],{"class":264},[220,41247,9443],{"class":230},[220,41249,41250,41252,41254,41256],{"class":222,"line":399},[220,41251,9497],{"class":226},[220,41253,29729],{"class":264},[220,41255,21861],{"class":420},[220,41257,749],{"class":264},[220,41259,41260],{"class":222,"line":644},[220,41261,1234],{"class":264},[220,41263,41264,41266,41268],{"class":222,"line":650},[220,41265,402],{"class":264},[220,41267,347],{"class":420},[220,41269,359],{"class":264},[212,41271,41272],{"className":468,"code":41173,"language":469,"meta":178,"style":178},[99,41273,41274,41282,41288,41296,41308,41312],{"__ignoreMap":178},[220,41275,41276,41278,41280],{"class":222,"line":223},[220,41277,343],{"class":264},[220,41279,347],{"class":420},[220,41281,359],{"class":264},[220,41283,41284,41286],{"class":222,"line":179},[220,41285,364],{"class":264},[220,41287,41141],{"class":420},[220,41289,41290,41292,41294],{"class":222,"line":389},[220,41291,9487],{"class":226},[220,41293,353],{"class":260},[220,41295,9443],{"class":230},[220,41297,41298,41300,41302,41304,41306],{"class":222,"line":399},[220,41299,9497],{"class":226},[220,41301,353],{"class":260},[220,41303,743],{"class":264},[220,41305,21861],{"class":420},[220,41307,749],{"class":264},[220,41309,41310],{"class":222,"line":644},[220,41311,1234],{"class":264},[220,41313,41314,41316,41318],{"class":222,"line":650},[220,41315,402],{"class":264},[220,41317,347],{"class":420},[220,41319,359],{"class":264},[212,41321,41323],{"className":251,"code":41322,"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,41324,41325,41335,41339,41353,41357,41374,41378],{"__ignoreMap":178},[220,41326,41327,41329,41331,41333],{"class":222,"line":223},[220,41328,261],{"class":260},[220,41330,11364],{"class":264},[220,41332,268],{"class":260},[220,41334,11369],{"class":230},[220,41336,41337],{"class":222,"line":179},[220,41338,647],{"emptyLinePlaceholder":194},[220,41340,41341,41343,41345,41347,41349,41351],{"class":222,"line":389},[220,41342,1735],{"class":260},[220,41344,1738],{"class":420},[220,41346,1741],{"class":260},[220,41348,1744],{"class":260},[220,41350,1747],{"class":226},[220,41352,1750],{"class":264},[220,41354,41355],{"class":222,"line":399},[220,41356,1765],{"class":264},[220,41358,41359,41361,41364,41366,41368,41370,41372],{"class":222,"line":644},[220,41360,1770],{"class":264},[220,41362,41363],{"class":230},"'Crescent'",[220,41365,1776],{"class":264},[220,41367,10021],{"class":230},[220,41369,6417],{"class":264},[220,41371,21861],{"class":420},[220,41373,1782],{"class":264},[220,41375,41376],{"class":222,"line":650},[220,41377,1787],{"class":264},[220,41379,41380],{"class":222,"line":656},[220,41381,1792],{"class":264},[1504,41383,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41385},[41386,41387],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":41102,"description":41110},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":41394,"title":41395,"body":41396,"category":15765,"componentType":25734,"description":41403,"extension":191,"meta":41681,"navigation":194,"path":41682,"requiresChild":32390,"seo":41683,"stem":41684,"__hash__":41685},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":41397,"toc":41677},[41398,41401,41404,41406,41408,41411,41413,41675],[11,41399,41395],{"id":41400},"cross",[15,41402,41403],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31771,41405],{"component":41395},[23,41407,31775],{"id":26391},[31777,41409],{":props":41410},"[{\"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,41412,31783],{"id":31782},[246,41414,41415,41464,41515,41563,41613],{":tabs":1557},[212,41416,41418],{"className":334,"code":41417,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,41419,41420,41428,41435,41443,41452,41456],{"__ignoreMap":178},[220,41421,41422,41424,41426],{"class":222,"line":223},[220,41423,343],{"class":264},[220,41425,347],{"class":346},[220,41427,359],{"class":264},[220,41429,41430,41432],{"class":222,"line":179},[220,41431,364],{"class":264},[220,41433,41434],{"class":346},"Cross\n",[220,41436,41437,41439,41441],{"class":222,"line":389},[220,41438,9487],{"class":226},[220,41440,353],{"class":264},[220,41442,9443],{"class":230},[220,41444,41445,41447,41449],{"class":222,"line":399},[220,41446,17262],{"class":226},[220,41448,353],{"class":264},[220,41450,41451],{"class":230},"\"0.35\"\n",[220,41453,41454],{"class":222,"line":644},[220,41455,1234],{"class":264},[220,41457,41458,41460,41462],{"class":222,"line":650},[220,41459,402],{"class":264},[220,41461,347],{"class":346},[220,41463,359],{"class":264},[212,41465,41467],{"className":409,"code":41466,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,41468,41469,41477,41483,41491,41503,41507],{"__ignoreMap":178},[220,41470,41471,41473,41475],{"class":222,"line":223},[220,41472,343],{"class":264},[220,41474,347],{"class":420},[220,41476,359],{"class":264},[220,41478,41479,41481],{"class":222,"line":179},[220,41480,364],{"class":264},[220,41482,41434],{"class":420},[220,41484,41485,41487,41489],{"class":222,"line":389},[220,41486,9487],{"class":226},[220,41488,353],{"class":260},[220,41490,9443],{"class":230},[220,41492,41493,41495,41497,41499,41501],{"class":222,"line":399},[220,41494,9497],{"class":226},[220,41496,353],{"class":260},[220,41498,743],{"class":264},[220,41500,21005],{"class":420},[220,41502,749],{"class":264},[220,41504,41505],{"class":222,"line":644},[220,41506,1234],{"class":264},[220,41508,41509,41511,41513],{"class":222,"line":650},[220,41510,402],{"class":264},[220,41512,347],{"class":420},[220,41514,359],{"class":264},[212,41516,41517],{"className":2844,"code":41466,"language":2846,"meta":178,"style":178},[99,41518,41519,41527,41533,41541,41551,41555],{"__ignoreMap":178},[220,41520,41521,41523,41525],{"class":222,"line":223},[220,41522,343],{"class":264},[220,41524,347],{"class":420},[220,41526,359],{"class":264},[220,41528,41529,41531],{"class":222,"line":179},[220,41530,364],{"class":264},[220,41532,41434],{"class":420},[220,41534,41535,41537,41539],{"class":222,"line":389},[220,41536,9487],{"class":226},[220,41538,353],{"class":264},[220,41540,9443],{"class":230},[220,41542,41543,41545,41547,41549],{"class":222,"line":399},[220,41544,9497],{"class":226},[220,41546,29729],{"class":264},[220,41548,21005],{"class":420},[220,41550,749],{"class":264},[220,41552,41553],{"class":222,"line":644},[220,41554,1234],{"class":264},[220,41556,41557,41559,41561],{"class":222,"line":650},[220,41558,402],{"class":264},[220,41560,347],{"class":420},[220,41562,359],{"class":264},[212,41564,41565],{"className":468,"code":41466,"language":469,"meta":178,"style":178},[99,41566,41567,41575,41581,41589,41601,41605],{"__ignoreMap":178},[220,41568,41569,41571,41573],{"class":222,"line":223},[220,41570,343],{"class":264},[220,41572,347],{"class":420},[220,41574,359],{"class":264},[220,41576,41577,41579],{"class":222,"line":179},[220,41578,364],{"class":264},[220,41580,41434],{"class":420},[220,41582,41583,41585,41587],{"class":222,"line":389},[220,41584,9487],{"class":226},[220,41586,353],{"class":260},[220,41588,9443],{"class":230},[220,41590,41591,41593,41595,41597,41599],{"class":222,"line":399},[220,41592,9497],{"class":226},[220,41594,353],{"class":260},[220,41596,743],{"class":264},[220,41598,21005],{"class":420},[220,41600,749],{"class":264},[220,41602,41603],{"class":222,"line":644},[220,41604,1234],{"class":264},[220,41606,41607,41609,41611],{"class":222,"line":650},[220,41608,402],{"class":264},[220,41610,347],{"class":420},[220,41612,359],{"class":264},[212,41614,41616],{"className":251,"code":41615,"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,41617,41618,41628,41632,41646,41650,41667,41671],{"__ignoreMap":178},[220,41619,41620,41622,41624,41626],{"class":222,"line":223},[220,41621,261],{"class":260},[220,41623,11364],{"class":264},[220,41625,268],{"class":260},[220,41627,11369],{"class":230},[220,41629,41630],{"class":222,"line":179},[220,41631,647],{"emptyLinePlaceholder":194},[220,41633,41634,41636,41638,41640,41642,41644],{"class":222,"line":389},[220,41635,1735],{"class":260},[220,41637,1738],{"class":420},[220,41639,1741],{"class":260},[220,41641,1744],{"class":260},[220,41643,1747],{"class":226},[220,41645,1750],{"class":264},[220,41647,41648],{"class":222,"line":399},[220,41649,1765],{"class":264},[220,41651,41652,41654,41657,41659,41661,41663,41665],{"class":222,"line":644},[220,41653,1770],{"class":264},[220,41655,41656],{"class":230},"'Cross'",[220,41658,1776],{"class":264},[220,41660,10021],{"class":230},[220,41662,6417],{"class":264},[220,41664,21005],{"class":420},[220,41666,1782],{"class":264},[220,41668,41669],{"class":222,"line":650},[220,41670,1787],{"class":264},[220,41672,41673],{"class":222,"line":656},[220,41674,1792],{"class":264},[1504,41676,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41678},[41679,41680],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":41395,"description":41403},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":41687,"title":23029,"body":41688,"category":36429,"componentType":25740,"description":41695,"extension":191,"meta":41956,"navigation":194,"path":41957,"requiresChild":194,"seo":41958,"stem":41959,"__hash__":41960},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":41689,"toc":41952},[41690,41693,41696,41698,41700,41703,41705,41950],[11,41691,23029],{"id":41692},"crystal",[15,41694,41695],{},"Diamond-like crystal lens with faceted refraction.",[31771,41697],{"component":23029},[23,41699,31775],{"id":26391},[31777,41701],{":props":41702},"[{\"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,41704,31783],{"id":31782},[246,41706,41707,41752,41796,41840,41884],{":tabs":1557},[212,41708,41710],{"className":334,"code":41709,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41711,41712,41720,41728,41736,41744],{"__ignoreMap":178},[220,41713,41714,41716,41718],{"class":222,"line":223},[220,41715,343],{"class":264},[220,41717,347],{"class":346},[220,41719,359],{"class":264},[220,41721,41722,41724,41726],{"class":222,"line":179},[220,41723,364],{"class":264},[220,41725,23029],{"class":346},[220,41727,359],{"class":264},[220,41729,41730,41732,41734],{"class":222,"line":389},[220,41731,2550],{"class":264},[220,41733,2553],{"class":346},[220,41735,386],{"class":264},[220,41737,41738,41740,41742],{"class":222,"line":399},[220,41739,2567],{"class":264},[220,41741,23029],{"class":346},[220,41743,359],{"class":264},[220,41745,41746,41748,41750],{"class":222,"line":644},[220,41747,402],{"class":264},[220,41749,347],{"class":346},[220,41751,359],{"class":264},[212,41753,41754],{"className":409,"code":41709,"language":411,"meta":178,"style":178},[99,41755,41756,41764,41772,41780,41788],{"__ignoreMap":178},[220,41757,41758,41760,41762],{"class":222,"line":223},[220,41759,343],{"class":264},[220,41761,347],{"class":420},[220,41763,359],{"class":264},[220,41765,41766,41768,41770],{"class":222,"line":179},[220,41767,364],{"class":264},[220,41769,23029],{"class":420},[220,41771,359],{"class":264},[220,41773,41774,41776,41778],{"class":222,"line":389},[220,41775,2550],{"class":264},[220,41777,2553],{"class":420},[220,41779,386],{"class":264},[220,41781,41782,41784,41786],{"class":222,"line":399},[220,41783,2567],{"class":264},[220,41785,23029],{"class":420},[220,41787,359],{"class":264},[220,41789,41790,41792,41794],{"class":222,"line":644},[220,41791,402],{"class":264},[220,41793,347],{"class":420},[220,41795,359],{"class":264},[212,41797,41798],{"className":2844,"code":41709,"language":2846,"meta":178,"style":178},[99,41799,41800,41808,41816,41824,41832],{"__ignoreMap":178},[220,41801,41802,41804,41806],{"class":222,"line":223},[220,41803,343],{"class":264},[220,41805,347],{"class":420},[220,41807,359],{"class":264},[220,41809,41810,41812,41814],{"class":222,"line":179},[220,41811,364],{"class":264},[220,41813,23029],{"class":420},[220,41815,359],{"class":264},[220,41817,41818,41820,41822],{"class":222,"line":389},[220,41819,2550],{"class":264},[220,41821,2553],{"class":420},[220,41823,386],{"class":264},[220,41825,41826,41828,41830],{"class":222,"line":399},[220,41827,2567],{"class":264},[220,41829,23029],{"class":420},[220,41831,359],{"class":264},[220,41833,41834,41836,41838],{"class":222,"line":644},[220,41835,402],{"class":264},[220,41837,347],{"class":420},[220,41839,359],{"class":264},[212,41841,41842],{"className":468,"code":41709,"language":469,"meta":178,"style":178},[99,41843,41844,41852,41860,41868,41876],{"__ignoreMap":178},[220,41845,41846,41848,41850],{"class":222,"line":223},[220,41847,343],{"class":264},[220,41849,347],{"class":420},[220,41851,359],{"class":264},[220,41853,41854,41856,41858],{"class":222,"line":179},[220,41855,364],{"class":264},[220,41857,23029],{"class":420},[220,41859,359],{"class":264},[220,41861,41862,41864,41866],{"class":222,"line":389},[220,41863,2550],{"class":264},[220,41865,2553],{"class":420},[220,41867,386],{"class":264},[220,41869,41870,41872,41874],{"class":222,"line":399},[220,41871,2567],{"class":264},[220,41873,23029],{"class":420},[220,41875,359],{"class":264},[220,41877,41878,41880,41882],{"class":222,"line":644},[220,41879,402],{"class":264},[220,41881,347],{"class":420},[220,41883,359],{"class":264},[212,41885,41887],{"className":251,"code":41886,"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,41888,41889,41899,41903,41917,41921,41930,41938,41942,41946],{"__ignoreMap":178},[220,41890,41891,41893,41895,41897],{"class":222,"line":223},[220,41892,261],{"class":260},[220,41894,11364],{"class":264},[220,41896,268],{"class":260},[220,41898,11369],{"class":230},[220,41900,41901],{"class":222,"line":179},[220,41902,647],{"emptyLinePlaceholder":194},[220,41904,41905,41907,41909,41911,41913,41915],{"class":222,"line":389},[220,41906,1735],{"class":260},[220,41908,1738],{"class":420},[220,41910,1741],{"class":260},[220,41912,1744],{"class":260},[220,41914,1747],{"class":226},[220,41916,1750],{"class":264},[220,41918,41919],{"class":222,"line":399},[220,41920,1765],{"class":264},[220,41922,41923,41925,41928],{"class":222,"line":644},[220,41924,1770],{"class":264},[220,41926,41927],{"class":230},"'Crystal'",[220,41929,6860],{"class":264},[220,41931,41932,41934,41936],{"class":222,"line":650},[220,41933,6865],{"class":264},[220,41935,6409],{"class":230},[220,41937,2465],{"class":264},[220,41939,41940],{"class":222,"line":656},[220,41941,6882],{"class":264},[220,41943,41944],{"class":222,"line":673},[220,41945,1787],{"class":264},[220,41947,41948],{"class":222,"line":682},[220,41949,1792],{"class":264},[1504,41951,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":41953},[41954,41955],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":23029,"description":41695},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":41962,"title":41963,"body":41964,"category":32923,"componentType":25734,"description":41971,"extension":191,"meta":42155,"navigation":194,"path":42156,"requiresChild":32390,"seo":42157,"stem":42158,"__hash__":42159},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":41965,"toc":42151},[41966,41969,41972,41974,41976,41978,41980,42149],[11,41967,41963],{"id":41968},"curlnoise",[15,41970,41971],{},"Swirling divergence-free flow field that drifts over time",[31771,41973],{"component":41963},[23,41975,31775],{"id":26391},[31777,41977],{":props":34508},[23,41979,31783],{"id":31782},[246,41981,41982,42011,42039,42067,42095],{":tabs":1557},[212,41983,41985],{"className":334,"code":41984,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,41986,41987,41995,42003],{"__ignoreMap":178},[220,41988,41989,41991,41993],{"class":222,"line":223},[220,41990,343],{"class":264},[220,41992,347],{"class":346},[220,41994,359],{"class":264},[220,41996,41997,41999,42001],{"class":222,"line":179},[220,41998,364],{"class":264},[220,42000,41963],{"class":346},[220,42002,386],{"class":264},[220,42004,42005,42007,42009],{"class":222,"line":389},[220,42006,402],{"class":264},[220,42008,347],{"class":346},[220,42010,359],{"class":264},[212,42012,42013],{"className":409,"code":41984,"language":411,"meta":178,"style":178},[99,42014,42015,42023,42031],{"__ignoreMap":178},[220,42016,42017,42019,42021],{"class":222,"line":223},[220,42018,343],{"class":264},[220,42020,347],{"class":420},[220,42022,359],{"class":264},[220,42024,42025,42027,42029],{"class":222,"line":179},[220,42026,364],{"class":264},[220,42028,41963],{"class":420},[220,42030,386],{"class":264},[220,42032,42033,42035,42037],{"class":222,"line":389},[220,42034,402],{"class":264},[220,42036,347],{"class":420},[220,42038,359],{"class":264},[212,42040,42041],{"className":2844,"code":41984,"language":2846,"meta":178,"style":178},[99,42042,42043,42051,42059],{"__ignoreMap":178},[220,42044,42045,42047,42049],{"class":222,"line":223},[220,42046,343],{"class":264},[220,42048,347],{"class":420},[220,42050,359],{"class":264},[220,42052,42053,42055,42057],{"class":222,"line":179},[220,42054,364],{"class":264},[220,42056,41963],{"class":420},[220,42058,386],{"class":264},[220,42060,42061,42063,42065],{"class":222,"line":389},[220,42062,402],{"class":264},[220,42064,347],{"class":420},[220,42066,359],{"class":264},[212,42068,42069],{"className":468,"code":41984,"language":469,"meta":178,"style":178},[99,42070,42071,42079,42087],{"__ignoreMap":178},[220,42072,42073,42075,42077],{"class":222,"line":223},[220,42074,343],{"class":264},[220,42076,347],{"class":420},[220,42078,359],{"class":264},[220,42080,42081,42083,42085],{"class":222,"line":179},[220,42082,364],{"class":264},[220,42084,41963],{"class":420},[220,42086,386],{"class":264},[220,42088,42089,42091,42093],{"class":222,"line":389},[220,42090,402],{"class":264},[220,42092,347],{"class":420},[220,42094,359],{"class":264},[212,42096,42098],{"className":251,"code":42097,"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,42099,42100,42110,42114,42128,42132,42141,42145],{"__ignoreMap":178},[220,42101,42102,42104,42106,42108],{"class":222,"line":223},[220,42103,261],{"class":260},[220,42105,11364],{"class":264},[220,42107,268],{"class":260},[220,42109,11369],{"class":230},[220,42111,42112],{"class":222,"line":179},[220,42113,647],{"emptyLinePlaceholder":194},[220,42115,42116,42118,42120,42122,42124,42126],{"class":222,"line":389},[220,42117,1735],{"class":260},[220,42119,1738],{"class":420},[220,42121,1741],{"class":260},[220,42123,1744],{"class":260},[220,42125,1747],{"class":226},[220,42127,1750],{"class":264},[220,42129,42130],{"class":222,"line":399},[220,42131,1765],{"class":264},[220,42133,42134,42136,42139],{"class":222,"line":644},[220,42135,1770],{"class":264},[220,42137,42138],{"class":230},"'CurlNoise'",[220,42140,2465],{"class":264},[220,42142,42143],{"class":222,"line":650},[220,42144,1787],{"class":264},[220,42146,42147],{"class":222,"line":656},[220,42148,1792],{"class":264},[1504,42150,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":42152},[42153,42154],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":41963,"description":41971},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":42161,"title":14283,"body":42162,"category":35419,"componentType":25740,"description":42169,"extension":191,"meta":42534,"navigation":194,"path":42535,"requiresChild":194,"seo":42536,"stem":42537,"__hash__":42538},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":42163,"toc":42530},[42164,42167,42170,42172,42174,42177,42179,42528],[11,42165,14283],{"id":42166},"cursorripples",[15,42168,42169],{},"Fluid-like ripple distortion",[31771,42171],{"component":14283},[23,42173,31775],{"id":26391},[31777,42175],{":props":42176},"[{\"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,42178,31783],{"id":31782},[246,42180,42181,42247,42318,42384,42454],{":tabs":1557},[212,42182,42184],{"className":334,"code":42183,"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,42185,42186,42194,42201,42210,42219,42223,42231,42239],{"__ignoreMap":178},[220,42187,42188,42190,42192],{"class":222,"line":223},[220,42189,343],{"class":264},[220,42191,347],{"class":346},[220,42193,359],{"class":264},[220,42195,42196,42198],{"class":222,"line":179},[220,42197,364],{"class":264},[220,42199,42200],{"class":346},"CursorRipples\n",[220,42202,42203,42205,42207],{"class":222,"line":389},[220,42204,20228],{"class":226},[220,42206,353],{"class":264},[220,42208,42209],{"class":230},"\"10\"\n",[220,42211,42212,42214,42216],{"class":222,"line":399},[220,42213,17262],{"class":226},[220,42215,353],{"class":264},[220,42217,42218],{"class":230},"\"0.5\"\n",[220,42220,42221],{"class":222,"line":644},[220,42222,31819],{"class":264},[220,42224,42225,42227,42229],{"class":222,"line":650},[220,42226,2550],{"class":264},[220,42228,2553],{"class":346},[220,42230,386],{"class":264},[220,42232,42233,42235,42237],{"class":222,"line":656},[220,42234,2567],{"class":264},[220,42236,14283],{"class":346},[220,42238,359],{"class":264},[220,42240,42241,42243,42245],{"class":222,"line":673},[220,42242,402],{"class":264},[220,42244,347],{"class":346},[220,42246,359],{"class":264},[212,42248,42250],{"className":409,"code":42249,"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,42251,42252,42260,42266,42278,42290,42294,42302,42310],{"__ignoreMap":178},[220,42253,42254,42256,42258],{"class":222,"line":223},[220,42255,343],{"class":264},[220,42257,347],{"class":420},[220,42259,359],{"class":264},[220,42261,42262,42264],{"class":222,"line":179},[220,42263,364],{"class":264},[220,42265,42200],{"class":420},[220,42267,42268,42270,42272,42274,42276],{"class":222,"line":389},[220,42269,20339],{"class":226},[220,42271,353],{"class":260},[220,42273,743],{"class":264},[220,42275,23707],{"class":420},[220,42277,749],{"class":264},[220,42279,42280,42282,42284,42286,42288],{"class":222,"line":399},[220,42281,9497],{"class":226},[220,42283,353],{"class":260},[220,42285,743],{"class":264},[220,42287,7605],{"class":420},[220,42289,749],{"class":264},[220,42291,42292],{"class":222,"line":644},[220,42293,31819],{"class":264},[220,42295,42296,42298,42300],{"class":222,"line":650},[220,42297,2550],{"class":264},[220,42299,2553],{"class":420},[220,42301,386],{"class":264},[220,42303,42304,42306,42308],{"class":222,"line":656},[220,42305,2567],{"class":264},[220,42307,14283],{"class":420},[220,42309,359],{"class":264},[220,42311,42312,42314,42316],{"class":222,"line":673},[220,42313,402],{"class":264},[220,42315,347],{"class":420},[220,42317,359],{"class":264},[212,42319,42320],{"className":2844,"code":42249,"language":2846,"meta":178,"style":178},[99,42321,42322,42330,42336,42346,42356,42360,42368,42376],{"__ignoreMap":178},[220,42323,42324,42326,42328],{"class":222,"line":223},[220,42325,343],{"class":264},[220,42327,347],{"class":420},[220,42329,359],{"class":264},[220,42331,42332,42334],{"class":222,"line":179},[220,42333,364],{"class":264},[220,42335,42200],{"class":420},[220,42337,42338,42340,42342,42344],{"class":222,"line":389},[220,42339,20339],{"class":226},[220,42341,29729],{"class":264},[220,42343,23707],{"class":420},[220,42345,749],{"class":264},[220,42347,42348,42350,42352,42354],{"class":222,"line":399},[220,42349,9497],{"class":226},[220,42351,29729],{"class":264},[220,42353,7605],{"class":420},[220,42355,749],{"class":264},[220,42357,42358],{"class":222,"line":644},[220,42359,31819],{"class":264},[220,42361,42362,42364,42366],{"class":222,"line":650},[220,42363,2550],{"class":264},[220,42365,2553],{"class":420},[220,42367,386],{"class":264},[220,42369,42370,42372,42374],{"class":222,"line":656},[220,42371,2567],{"class":264},[220,42373,14283],{"class":420},[220,42375,359],{"class":264},[220,42377,42378,42380,42382],{"class":222,"line":673},[220,42379,402],{"class":264},[220,42381,347],{"class":420},[220,42383,359],{"class":264},[212,42385,42386],{"className":468,"code":42249,"language":469,"meta":178,"style":178},[99,42387,42388,42396,42402,42414,42426,42430,42438,42446],{"__ignoreMap":178},[220,42389,42390,42392,42394],{"class":222,"line":223},[220,42391,343],{"class":264},[220,42393,347],{"class":420},[220,42395,359],{"class":264},[220,42397,42398,42400],{"class":222,"line":179},[220,42399,364],{"class":264},[220,42401,42200],{"class":420},[220,42403,42404,42406,42408,42410,42412],{"class":222,"line":389},[220,42405,20339],{"class":226},[220,42407,353],{"class":260},[220,42409,743],{"class":264},[220,42411,23707],{"class":420},[220,42413,749],{"class":264},[220,42415,42416,42418,42420,42422,42424],{"class":222,"line":399},[220,42417,9497],{"class":226},[220,42419,353],{"class":260},[220,42421,743],{"class":264},[220,42423,7605],{"class":420},[220,42425,749],{"class":264},[220,42427,42428],{"class":222,"line":644},[220,42429,31819],{"class":264},[220,42431,42432,42434,42436],{"class":222,"line":650},[220,42433,2550],{"class":264},[220,42435,2553],{"class":420},[220,42437,386],{"class":264},[220,42439,42440,42442,42444],{"class":222,"line":656},[220,42441,2567],{"class":264},[220,42443,14283],{"class":420},[220,42445,359],{"class":264},[220,42447,42448,42450,42452],{"class":222,"line":673},[220,42449,402],{"class":264},[220,42451,347],{"class":420},[220,42453,359],{"class":264},[212,42455,42457],{"className":251,"code":42456,"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,42458,42459,42469,42473,42487,42491,42508,42516,42520,42524],{"__ignoreMap":178},[220,42460,42461,42463,42465,42467],{"class":222,"line":223},[220,42462,261],{"class":260},[220,42464,11364],{"class":264},[220,42466,268],{"class":260},[220,42468,11369],{"class":230},[220,42470,42471],{"class":222,"line":179},[220,42472,647],{"emptyLinePlaceholder":194},[220,42474,42475,42477,42479,42481,42483,42485],{"class":222,"line":389},[220,42476,1735],{"class":260},[220,42478,1738],{"class":420},[220,42480,1741],{"class":260},[220,42482,1744],{"class":260},[220,42484,1747],{"class":226},[220,42486,1750],{"class":264},[220,42488,42489],{"class":222,"line":399},[220,42490,1765],{"class":264},[220,42492,42493,42495,42498,42500,42502,42504,42506],{"class":222,"line":644},[220,42494,1770],{"class":264},[220,42496,42497],{"class":230},"'CursorRipples'",[220,42499,32063],{"class":264},[220,42501,23707],{"class":420},[220,42503,6417],{"class":264},[220,42505,7605],{"class":420},[220,42507,7397],{"class":264},[220,42509,42510,42512,42514],{"class":222,"line":650},[220,42511,6865],{"class":264},[220,42513,6409],{"class":230},[220,42515,2465],{"class":264},[220,42517,42518],{"class":222,"line":656},[220,42519,6882],{"class":264},[220,42521,42522],{"class":222,"line":673},[220,42523,1787],{"class":264},[220,42525,42526],{"class":222,"line":682},[220,42527,1792],{"class":264},[1504,42529,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42531},[42532,42533],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":14283,"description":42169},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":42540,"title":394,"body":42541,"category":35419,"componentType":25734,"description":42548,"extension":191,"meta":42788,"navigation":194,"path":42789,"requiresChild":32390,"seo":42790,"stem":42791,"__hash__":42792},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":42542,"toc":42784},[42543,42546,42549,42551,42553,42556,42558,42782],[11,42544,394],{"id":42545},"cursortrail",[15,42547,42548],{},"Animated trail effect that tracks cursor movement",[31771,42550],{"component":394},[23,42552,31775],{"id":26391},[31777,42554],{":props":42555},"[{\"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,42557,31783],{"id":31782},[246,42559,42560,42600,42643,42683,42725],{":tabs":1557},[212,42561,42563],{"className":334,"code":42562,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,42564,42565,42573,42580,42588,42592],{"__ignoreMap":178},[220,42566,42567,42569,42571],{"class":222,"line":223},[220,42568,343],{"class":264},[220,42570,347],{"class":346},[220,42572,359],{"class":264},[220,42574,42575,42577],{"class":222,"line":179},[220,42576,364],{"class":264},[220,42578,42579],{"class":346},"CursorTrail\n",[220,42581,42582,42584,42586],{"class":222,"line":389},[220,42583,17262],{"class":226},[220,42585,353],{"class":264},[220,42587,42218],{"class":230},[220,42589,42590],{"class":222,"line":399},[220,42591,1234],{"class":264},[220,42593,42594,42596,42598],{"class":222,"line":644},[220,42595,402],{"class":264},[220,42597,347],{"class":346},[220,42599,359],{"class":264},[212,42601,42603],{"className":409,"code":42602,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,42604,42605,42613,42619,42631,42635],{"__ignoreMap":178},[220,42606,42607,42609,42611],{"class":222,"line":223},[220,42608,343],{"class":264},[220,42610,347],{"class":420},[220,42612,359],{"class":264},[220,42614,42615,42617],{"class":222,"line":179},[220,42616,364],{"class":264},[220,42618,42579],{"class":420},[220,42620,42621,42623,42625,42627,42629],{"class":222,"line":389},[220,42622,9497],{"class":226},[220,42624,353],{"class":260},[220,42626,743],{"class":264},[220,42628,7605],{"class":420},[220,42630,749],{"class":264},[220,42632,42633],{"class":222,"line":399},[220,42634,1234],{"class":264},[220,42636,42637,42639,42641],{"class":222,"line":644},[220,42638,402],{"class":264},[220,42640,347],{"class":420},[220,42642,359],{"class":264},[212,42644,42645],{"className":2844,"code":42602,"language":2846,"meta":178,"style":178},[99,42646,42647,42655,42661,42671,42675],{"__ignoreMap":178},[220,42648,42649,42651,42653],{"class":222,"line":223},[220,42650,343],{"class":264},[220,42652,347],{"class":420},[220,42654,359],{"class":264},[220,42656,42657,42659],{"class":222,"line":179},[220,42658,364],{"class":264},[220,42660,42579],{"class":420},[220,42662,42663,42665,42667,42669],{"class":222,"line":389},[220,42664,9497],{"class":226},[220,42666,29729],{"class":264},[220,42668,7605],{"class":420},[220,42670,749],{"class":264},[220,42672,42673],{"class":222,"line":399},[220,42674,1234],{"class":264},[220,42676,42677,42679,42681],{"class":222,"line":644},[220,42678,402],{"class":264},[220,42680,347],{"class":420},[220,42682,359],{"class":264},[212,42684,42685],{"className":468,"code":42602,"language":469,"meta":178,"style":178},[99,42686,42687,42695,42701,42713,42717],{"__ignoreMap":178},[220,42688,42689,42691,42693],{"class":222,"line":223},[220,42690,343],{"class":264},[220,42692,347],{"class":420},[220,42694,359],{"class":264},[220,42696,42697,42699],{"class":222,"line":179},[220,42698,364],{"class":264},[220,42700,42579],{"class":420},[220,42702,42703,42705,42707,42709,42711],{"class":222,"line":389},[220,42704,9497],{"class":226},[220,42706,353],{"class":260},[220,42708,743],{"class":264},[220,42710,7605],{"class":420},[220,42712,749],{"class":264},[220,42714,42715],{"class":222,"line":399},[220,42716,1234],{"class":264},[220,42718,42719,42721,42723],{"class":222,"line":644},[220,42720,402],{"class":264},[220,42722,347],{"class":420},[220,42724,359],{"class":264},[212,42726,42728],{"className":251,"code":42727,"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,42729,42730,42740,42744,42758,42762,42774,42778],{"__ignoreMap":178},[220,42731,42732,42734,42736,42738],{"class":222,"line":223},[220,42733,261],{"class":260},[220,42735,11364],{"class":264},[220,42737,268],{"class":260},[220,42739,11369],{"class":230},[220,42741,42742],{"class":222,"line":179},[220,42743,647],{"emptyLinePlaceholder":194},[220,42745,42746,42748,42750,42752,42754,42756],{"class":222,"line":389},[220,42747,1735],{"class":260},[220,42749,1738],{"class":420},[220,42751,1741],{"class":260},[220,42753,1744],{"class":260},[220,42755,1747],{"class":226},[220,42757,1750],{"class":264},[220,42759,42760],{"class":222,"line":399},[220,42761,1765],{"class":264},[220,42763,42764,42766,42768,42770,42772],{"class":222,"line":644},[220,42765,1770],{"class":264},[220,42767,26222],{"class":230},[220,42769,7392],{"class":264},[220,42771,7605],{"class":420},[220,42773,1782],{"class":264},[220,42775,42776],{"class":222,"line":650},[220,42777,1787],{"class":264},[220,42779,42780],{"class":222,"line":656},[220,42781,1792],{"class":264},[1504,42783,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42785},[42786,42787],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":42548},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42794,"title":42795,"body":42796,"category":32666,"componentType":25740,"description":42803,"extension":191,"meta":43121,"navigation":194,"path":43122,"requiresChild":194,"seo":43123,"stem":43124,"__hash__":43125},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42797,"toc":43117},[42798,42801,42804,42806,42808,42811,42813,43115],[11,42799,42795],{"id":42800},"datamosh",[15,42802,42803],{},"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",[31771,42805],{"component":42795},[23,42807,31775],{"id":26391},[31777,42809],{":props":42810},"[{\"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,42812,31783],{"id":31782},[246,42814,42815,42872,42931,42987,43045],{":tabs":1557},[212,42816,42818],{"className":334,"code":42817,"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,42819,42820,42828,42835,42844,42848,42856,42864],{"__ignoreMap":178},[220,42821,42822,42824,42826],{"class":222,"line":223},[220,42823,343],{"class":264},[220,42825,347],{"class":346},[220,42827,359],{"class":264},[220,42829,42830,42832],{"class":222,"line":179},[220,42831,364],{"class":264},[220,42833,42834],{"class":346},"DataMosh\n",[220,42836,42837,42839,42841],{"class":222,"line":389},[220,42838,20228],{"class":226},[220,42840,353],{"class":264},[220,42842,42843],{"class":230},"\"0.7\"\n",[220,42845,42846],{"class":222,"line":399},[220,42847,31819],{"class":264},[220,42849,42850,42852,42854],{"class":222,"line":644},[220,42851,2550],{"class":264},[220,42853,2553],{"class":346},[220,42855,386],{"class":264},[220,42857,42858,42860,42862],{"class":222,"line":650},[220,42859,2567],{"class":264},[220,42861,42795],{"class":346},[220,42863,359],{"class":264},[220,42865,42866,42868,42870],{"class":222,"line":656},[220,42867,402],{"class":264},[220,42869,347],{"class":346},[220,42871,359],{"class":264},[212,42873,42875],{"className":409,"code":42874,"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,42876,42877,42885,42891,42903,42907,42915,42923],{"__ignoreMap":178},[220,42878,42879,42881,42883],{"class":222,"line":223},[220,42880,343],{"class":264},[220,42882,347],{"class":420},[220,42884,359],{"class":264},[220,42886,42887,42889],{"class":222,"line":179},[220,42888,364],{"class":264},[220,42890,42834],{"class":420},[220,42892,42893,42895,42897,42899,42901],{"class":222,"line":389},[220,42894,20339],{"class":226},[220,42896,353],{"class":260},[220,42898,743],{"class":264},[220,42900,18801],{"class":420},[220,42902,749],{"class":264},[220,42904,42905],{"class":222,"line":399},[220,42906,31819],{"class":264},[220,42908,42909,42911,42913],{"class":222,"line":644},[220,42910,2550],{"class":264},[220,42912,2553],{"class":420},[220,42914,386],{"class":264},[220,42916,42917,42919,42921],{"class":222,"line":650},[220,42918,2567],{"class":264},[220,42920,42795],{"class":420},[220,42922,359],{"class":264},[220,42924,42925,42927,42929],{"class":222,"line":656},[220,42926,402],{"class":264},[220,42928,347],{"class":420},[220,42930,359],{"class":264},[212,42932,42933],{"className":2844,"code":42874,"language":2846,"meta":178,"style":178},[99,42934,42935,42943,42949,42959,42963,42971,42979],{"__ignoreMap":178},[220,42936,42937,42939,42941],{"class":222,"line":223},[220,42938,343],{"class":264},[220,42940,347],{"class":420},[220,42942,359],{"class":264},[220,42944,42945,42947],{"class":222,"line":179},[220,42946,364],{"class":264},[220,42948,42834],{"class":420},[220,42950,42951,42953,42955,42957],{"class":222,"line":389},[220,42952,20339],{"class":226},[220,42954,29729],{"class":264},[220,42956,18801],{"class":420},[220,42958,749],{"class":264},[220,42960,42961],{"class":222,"line":399},[220,42962,31819],{"class":264},[220,42964,42965,42967,42969],{"class":222,"line":644},[220,42966,2550],{"class":264},[220,42968,2553],{"class":420},[220,42970,386],{"class":264},[220,42972,42973,42975,42977],{"class":222,"line":650},[220,42974,2567],{"class":264},[220,42976,42795],{"class":420},[220,42978,359],{"class":264},[220,42980,42981,42983,42985],{"class":222,"line":656},[220,42982,402],{"class":264},[220,42984,347],{"class":420},[220,42986,359],{"class":264},[212,42988,42989],{"className":468,"code":42874,"language":469,"meta":178,"style":178},[99,42990,42991,42999,43005,43017,43021,43029,43037],{"__ignoreMap":178},[220,42992,42993,42995,42997],{"class":222,"line":223},[220,42994,343],{"class":264},[220,42996,347],{"class":420},[220,42998,359],{"class":264},[220,43000,43001,43003],{"class":222,"line":179},[220,43002,364],{"class":264},[220,43004,42834],{"class":420},[220,43006,43007,43009,43011,43013,43015],{"class":222,"line":389},[220,43008,20339],{"class":226},[220,43010,353],{"class":260},[220,43012,743],{"class":264},[220,43014,18801],{"class":420},[220,43016,749],{"class":264},[220,43018,43019],{"class":222,"line":399},[220,43020,31819],{"class":264},[220,43022,43023,43025,43027],{"class":222,"line":644},[220,43024,2550],{"class":264},[220,43026,2553],{"class":420},[220,43028,386],{"class":264},[220,43030,43031,43033,43035],{"class":222,"line":650},[220,43032,2567],{"class":264},[220,43034,42795],{"class":420},[220,43036,359],{"class":264},[220,43038,43039,43041,43043],{"class":222,"line":656},[220,43040,402],{"class":264},[220,43042,347],{"class":420},[220,43044,359],{"class":264},[212,43046,43048],{"className":251,"code":43047,"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,43049,43050,43060,43064,43078,43082,43095,43103,43107,43111],{"__ignoreMap":178},[220,43051,43052,43054,43056,43058],{"class":222,"line":223},[220,43053,261],{"class":260},[220,43055,11364],{"class":264},[220,43057,268],{"class":260},[220,43059,11369],{"class":230},[220,43061,43062],{"class":222,"line":179},[220,43063,647],{"emptyLinePlaceholder":194},[220,43065,43066,43068,43070,43072,43074,43076],{"class":222,"line":389},[220,43067,1735],{"class":260},[220,43069,1738],{"class":420},[220,43071,1741],{"class":260},[220,43073,1744],{"class":260},[220,43075,1747],{"class":226},[220,43077,1750],{"class":264},[220,43079,43080],{"class":222,"line":399},[220,43081,1765],{"class":264},[220,43083,43084,43086,43089,43091,43093],{"class":222,"line":644},[220,43085,1770],{"class":264},[220,43087,43088],{"class":230},"'DataMosh'",[220,43090,32063],{"class":264},[220,43092,18801],{"class":420},[220,43094,7397],{"class":264},[220,43096,43097,43099,43101],{"class":222,"line":650},[220,43098,6865],{"class":264},[220,43100,6409],{"class":230},[220,43102,2465],{"class":264},[220,43104,43105],{"class":222,"line":656},[220,43106,6882],{"class":264},[220,43108,43109],{"class":222,"line":673},[220,43110,1787],{"class":264},[220,43112,43113],{"class":222,"line":682},[220,43114,1792],{"class":264},[1504,43116,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43118},[43119,43120],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42795,"description":42803},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":43127,"title":43128,"body":43129,"category":32923,"componentType":25734,"description":43136,"extension":191,"meta":43321,"navigation":194,"path":43322,"requiresChild":32390,"seo":43323,"stem":43324,"__hash__":43325},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":43130,"toc":43317},[43131,43134,43137,43139,43141,43144,43146,43315],[11,43132,43128],{"id":43133},"diamondgradient",[15,43135,43136],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31771,43138],{"component":43128},[23,43140,31775],{"id":26391},[31777,43142],{":props":43143},"[{\"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,43145,31783],{"id":31782},[246,43147,43148,43177,43205,43233,43261],{":tabs":1557},[212,43149,43151],{"className":334,"code":43150,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,43152,43153,43161,43169],{"__ignoreMap":178},[220,43154,43155,43157,43159],{"class":222,"line":223},[220,43156,343],{"class":264},[220,43158,347],{"class":346},[220,43160,359],{"class":264},[220,43162,43163,43165,43167],{"class":222,"line":179},[220,43164,364],{"class":264},[220,43166,43128],{"class":346},[220,43168,386],{"class":264},[220,43170,43171,43173,43175],{"class":222,"line":389},[220,43172,402],{"class":264},[220,43174,347],{"class":346},[220,43176,359],{"class":264},[212,43178,43179],{"className":409,"code":43150,"language":411,"meta":178,"style":178},[99,43180,43181,43189,43197],{"__ignoreMap":178},[220,43182,43183,43185,43187],{"class":222,"line":223},[220,43184,343],{"class":264},[220,43186,347],{"class":420},[220,43188,359],{"class":264},[220,43190,43191,43193,43195],{"class":222,"line":179},[220,43192,364],{"class":264},[220,43194,43128],{"class":420},[220,43196,386],{"class":264},[220,43198,43199,43201,43203],{"class":222,"line":389},[220,43200,402],{"class":264},[220,43202,347],{"class":420},[220,43204,359],{"class":264},[212,43206,43207],{"className":2844,"code":43150,"language":2846,"meta":178,"style":178},[99,43208,43209,43217,43225],{"__ignoreMap":178},[220,43210,43211,43213,43215],{"class":222,"line":223},[220,43212,343],{"class":264},[220,43214,347],{"class":420},[220,43216,359],{"class":264},[220,43218,43219,43221,43223],{"class":222,"line":179},[220,43220,364],{"class":264},[220,43222,43128],{"class":420},[220,43224,386],{"class":264},[220,43226,43227,43229,43231],{"class":222,"line":389},[220,43228,402],{"class":264},[220,43230,347],{"class":420},[220,43232,359],{"class":264},[212,43234,43235],{"className":468,"code":43150,"language":469,"meta":178,"style":178},[99,43236,43237,43245,43253],{"__ignoreMap":178},[220,43238,43239,43241,43243],{"class":222,"line":223},[220,43240,343],{"class":264},[220,43242,347],{"class":420},[220,43244,359],{"class":264},[220,43246,43247,43249,43251],{"class":222,"line":179},[220,43248,364],{"class":264},[220,43250,43128],{"class":420},[220,43252,386],{"class":264},[220,43254,43255,43257,43259],{"class":222,"line":389},[220,43256,402],{"class":264},[220,43258,347],{"class":420},[220,43260,359],{"class":264},[212,43262,43264],{"className":251,"code":43263,"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,43265,43266,43276,43280,43294,43298,43307,43311],{"__ignoreMap":178},[220,43267,43268,43270,43272,43274],{"class":222,"line":223},[220,43269,261],{"class":260},[220,43271,11364],{"class":264},[220,43273,268],{"class":260},[220,43275,11369],{"class":230},[220,43277,43278],{"class":222,"line":179},[220,43279,647],{"emptyLinePlaceholder":194},[220,43281,43282,43284,43286,43288,43290,43292],{"class":222,"line":389},[220,43283,1735],{"class":260},[220,43285,1738],{"class":420},[220,43287,1741],{"class":260},[220,43289,1744],{"class":260},[220,43291,1747],{"class":226},[220,43293,1750],{"class":264},[220,43295,43296],{"class":222,"line":399},[220,43297,1765],{"class":264},[220,43299,43300,43302,43305],{"class":222,"line":644},[220,43301,1770],{"class":264},[220,43303,43304],{"class":230},"'DiamondGradient'",[220,43306,2465],{"class":264},[220,43308,43309],{"class":222,"line":650},[220,43310,1787],{"class":264},[220,43312,43313],{"class":222,"line":656},[220,43314,1792],{"class":264},[1504,43316,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":43318},[43319,43320],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":43128,"description":43136},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":43327,"title":43328,"body":43329,"category":33533,"componentType":25740,"description":43336,"extension":191,"meta":43597,"navigation":194,"path":43598,"requiresChild":194,"seo":43599,"stem":43600,"__hash__":43601},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":43330,"toc":43593},[43331,43334,43337,43339,43341,43344,43346,43591],[11,43332,43328],{"id":43333},"diamondwipe",[15,43335,43336],{},"Wipe the content away through a lattice of growing diamonds",[31771,43338],{"component":43328},[23,43340,31775],{"id":26391},[31777,43342],{":props":43343},"[{\"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,43345,31783],{"id":31782},[246,43347,43348,43393,43437,43481,43525],{":tabs":1557},[212,43349,43351],{"className":334,"code":43350,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,43352,43353,43361,43369,43377,43385],{"__ignoreMap":178},[220,43354,43355,43357,43359],{"class":222,"line":223},[220,43356,343],{"class":264},[220,43358,347],{"class":346},[220,43360,359],{"class":264},[220,43362,43363,43365,43367],{"class":222,"line":179},[220,43364,364],{"class":264},[220,43366,43328],{"class":346},[220,43368,359],{"class":264},[220,43370,43371,43373,43375],{"class":222,"line":389},[220,43372,2550],{"class":264},[220,43374,2553],{"class":346},[220,43376,386],{"class":264},[220,43378,43379,43381,43383],{"class":222,"line":399},[220,43380,2567],{"class":264},[220,43382,43328],{"class":346},[220,43384,359],{"class":264},[220,43386,43387,43389,43391],{"class":222,"line":644},[220,43388,402],{"class":264},[220,43390,347],{"class":346},[220,43392,359],{"class":264},[212,43394,43395],{"className":409,"code":43350,"language":411,"meta":178,"style":178},[99,43396,43397,43405,43413,43421,43429],{"__ignoreMap":178},[220,43398,43399,43401,43403],{"class":222,"line":223},[220,43400,343],{"class":264},[220,43402,347],{"class":420},[220,43404,359],{"class":264},[220,43406,43407,43409,43411],{"class":222,"line":179},[220,43408,364],{"class":264},[220,43410,43328],{"class":420},[220,43412,359],{"class":264},[220,43414,43415,43417,43419],{"class":222,"line":389},[220,43416,2550],{"class":264},[220,43418,2553],{"class":420},[220,43420,386],{"class":264},[220,43422,43423,43425,43427],{"class":222,"line":399},[220,43424,2567],{"class":264},[220,43426,43328],{"class":420},[220,43428,359],{"class":264},[220,43430,43431,43433,43435],{"class":222,"line":644},[220,43432,402],{"class":264},[220,43434,347],{"class":420},[220,43436,359],{"class":264},[212,43438,43439],{"className":2844,"code":43350,"language":2846,"meta":178,"style":178},[99,43440,43441,43449,43457,43465,43473],{"__ignoreMap":178},[220,43442,43443,43445,43447],{"class":222,"line":223},[220,43444,343],{"class":264},[220,43446,347],{"class":420},[220,43448,359],{"class":264},[220,43450,43451,43453,43455],{"class":222,"line":179},[220,43452,364],{"class":264},[220,43454,43328],{"class":420},[220,43456,359],{"class":264},[220,43458,43459,43461,43463],{"class":222,"line":389},[220,43460,2550],{"class":264},[220,43462,2553],{"class":420},[220,43464,386],{"class":264},[220,43466,43467,43469,43471],{"class":222,"line":399},[220,43468,2567],{"class":264},[220,43470,43328],{"class":420},[220,43472,359],{"class":264},[220,43474,43475,43477,43479],{"class":222,"line":644},[220,43476,402],{"class":264},[220,43478,347],{"class":420},[220,43480,359],{"class":264},[212,43482,43483],{"className":468,"code":43350,"language":469,"meta":178,"style":178},[99,43484,43485,43493,43501,43509,43517],{"__ignoreMap":178},[220,43486,43487,43489,43491],{"class":222,"line":223},[220,43488,343],{"class":264},[220,43490,347],{"class":420},[220,43492,359],{"class":264},[220,43494,43495,43497,43499],{"class":222,"line":179},[220,43496,364],{"class":264},[220,43498,43328],{"class":420},[220,43500,359],{"class":264},[220,43502,43503,43505,43507],{"class":222,"line":389},[220,43504,2550],{"class":264},[220,43506,2553],{"class":420},[220,43508,386],{"class":264},[220,43510,43511,43513,43515],{"class":222,"line":399},[220,43512,2567],{"class":264},[220,43514,43328],{"class":420},[220,43516,359],{"class":264},[220,43518,43519,43521,43523],{"class":222,"line":644},[220,43520,402],{"class":264},[220,43522,347],{"class":420},[220,43524,359],{"class":264},[212,43526,43528],{"className":251,"code":43527,"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,43529,43530,43540,43544,43558,43562,43571,43579,43583,43587],{"__ignoreMap":178},[220,43531,43532,43534,43536,43538],{"class":222,"line":223},[220,43533,261],{"class":260},[220,43535,11364],{"class":264},[220,43537,268],{"class":260},[220,43539,11369],{"class":230},[220,43541,43542],{"class":222,"line":179},[220,43543,647],{"emptyLinePlaceholder":194},[220,43545,43546,43548,43550,43552,43554,43556],{"class":222,"line":389},[220,43547,1735],{"class":260},[220,43549,1738],{"class":420},[220,43551,1741],{"class":260},[220,43553,1744],{"class":260},[220,43555,1747],{"class":226},[220,43557,1750],{"class":264},[220,43559,43560],{"class":222,"line":399},[220,43561,1765],{"class":264},[220,43563,43564,43566,43569],{"class":222,"line":644},[220,43565,1770],{"class":264},[220,43567,43568],{"class":230},"'DiamondWipe'",[220,43570,6860],{"class":264},[220,43572,43573,43575,43577],{"class":222,"line":650},[220,43574,6865],{"class":264},[220,43576,6409],{"class":230},[220,43578,2465],{"class":264},[220,43580,43581],{"class":222,"line":656},[220,43582,6882],{"class":264},[220,43584,43585],{"class":222,"line":673},[220,43586,1787],{"class":264},[220,43588,43589],{"class":222,"line":682},[220,43590,1792],{"class":264},[1504,43592,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":43594},[43595,43596],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":43328,"description":43336},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":43603,"title":43604,"body":43605,"category":32094,"componentType":25740,"description":43612,"extension":191,"meta":43930,"navigation":194,"path":43931,"requiresChild":194,"seo":43932,"stem":43933,"__hash__":43934},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":43606,"toc":43926},[43607,43610,43613,43615,43617,43620,43622,43924],[11,43608,43604],{"id":43609},"diffuseblur",[15,43611,43612],{},"Grain-like pixel displacement at random",[31771,43614],{"component":43604},[23,43616,31775],{"id":26391},[31777,43618],{":props":43619},"[{\"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,43621,31783],{"id":31782},[246,43623,43624,43681,43740,43796,43854],{":tabs":1557},[212,43625,43627],{"className":334,"code":43626,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43628,43629,43637,43644,43653,43657,43665,43673],{"__ignoreMap":178},[220,43630,43631,43633,43635],{"class":222,"line":223},[220,43632,343],{"class":264},[220,43634,347],{"class":346},[220,43636,359],{"class":264},[220,43638,43639,43641],{"class":222,"line":179},[220,43640,364],{"class":264},[220,43642,43643],{"class":346},"DiffuseBlur\n",[220,43645,43646,43648,43650],{"class":222,"line":389},[220,43647,20228],{"class":226},[220,43649,353],{"class":264},[220,43651,43652],{"class":230},"\"30\"\n",[220,43654,43655],{"class":222,"line":399},[220,43656,31819],{"class":264},[220,43658,43659,43661,43663],{"class":222,"line":644},[220,43660,2550],{"class":264},[220,43662,2553],{"class":346},[220,43664,386],{"class":264},[220,43666,43667,43669,43671],{"class":222,"line":650},[220,43668,2567],{"class":264},[220,43670,43604],{"class":346},[220,43672,359],{"class":264},[220,43674,43675,43677,43679],{"class":222,"line":656},[220,43676,402],{"class":264},[220,43678,347],{"class":346},[220,43680,359],{"class":264},[212,43682,43684],{"className":409,"code":43683,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43685,43686,43694,43700,43712,43716,43724,43732],{"__ignoreMap":178},[220,43687,43688,43690,43692],{"class":222,"line":223},[220,43689,343],{"class":264},[220,43691,347],{"class":420},[220,43693,359],{"class":264},[220,43695,43696,43698],{"class":222,"line":179},[220,43697,364],{"class":264},[220,43699,43643],{"class":420},[220,43701,43702,43704,43706,43708,43710],{"class":222,"line":389},[220,43703,20339],{"class":226},[220,43705,353],{"class":260},[220,43707,743],{"class":264},[220,43709,23867],{"class":420},[220,43711,749],{"class":264},[220,43713,43714],{"class":222,"line":399},[220,43715,31819],{"class":264},[220,43717,43718,43720,43722],{"class":222,"line":644},[220,43719,2550],{"class":264},[220,43721,2553],{"class":420},[220,43723,386],{"class":264},[220,43725,43726,43728,43730],{"class":222,"line":650},[220,43727,2567],{"class":264},[220,43729,43604],{"class":420},[220,43731,359],{"class":264},[220,43733,43734,43736,43738],{"class":222,"line":656},[220,43735,402],{"class":264},[220,43737,347],{"class":420},[220,43739,359],{"class":264},[212,43741,43742],{"className":2844,"code":43683,"language":2846,"meta":178,"style":178},[99,43743,43744,43752,43758,43768,43772,43780,43788],{"__ignoreMap":178},[220,43745,43746,43748,43750],{"class":222,"line":223},[220,43747,343],{"class":264},[220,43749,347],{"class":420},[220,43751,359],{"class":264},[220,43753,43754,43756],{"class":222,"line":179},[220,43755,364],{"class":264},[220,43757,43643],{"class":420},[220,43759,43760,43762,43764,43766],{"class":222,"line":389},[220,43761,20339],{"class":226},[220,43763,29729],{"class":264},[220,43765,23867],{"class":420},[220,43767,749],{"class":264},[220,43769,43770],{"class":222,"line":399},[220,43771,31819],{"class":264},[220,43773,43774,43776,43778],{"class":222,"line":644},[220,43775,2550],{"class":264},[220,43777,2553],{"class":420},[220,43779,386],{"class":264},[220,43781,43782,43784,43786],{"class":222,"line":650},[220,43783,2567],{"class":264},[220,43785,43604],{"class":420},[220,43787,359],{"class":264},[220,43789,43790,43792,43794],{"class":222,"line":656},[220,43791,402],{"class":264},[220,43793,347],{"class":420},[220,43795,359],{"class":264},[212,43797,43798],{"className":468,"code":43683,"language":469,"meta":178,"style":178},[99,43799,43800,43808,43814,43826,43830,43838,43846],{"__ignoreMap":178},[220,43801,43802,43804,43806],{"class":222,"line":223},[220,43803,343],{"class":264},[220,43805,347],{"class":420},[220,43807,359],{"class":264},[220,43809,43810,43812],{"class":222,"line":179},[220,43811,364],{"class":264},[220,43813,43643],{"class":420},[220,43815,43816,43818,43820,43822,43824],{"class":222,"line":389},[220,43817,20339],{"class":226},[220,43819,353],{"class":260},[220,43821,743],{"class":264},[220,43823,23867],{"class":420},[220,43825,749],{"class":264},[220,43827,43828],{"class":222,"line":399},[220,43829,31819],{"class":264},[220,43831,43832,43834,43836],{"class":222,"line":644},[220,43833,2550],{"class":264},[220,43835,2553],{"class":420},[220,43837,386],{"class":264},[220,43839,43840,43842,43844],{"class":222,"line":650},[220,43841,2567],{"class":264},[220,43843,43604],{"class":420},[220,43845,359],{"class":264},[220,43847,43848,43850,43852],{"class":222,"line":656},[220,43849,402],{"class":264},[220,43851,347],{"class":420},[220,43853,359],{"class":264},[212,43855,43857],{"className":251,"code":43856,"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,43858,43859,43869,43873,43887,43891,43904,43912,43916,43920],{"__ignoreMap":178},[220,43860,43861,43863,43865,43867],{"class":222,"line":223},[220,43862,261],{"class":260},[220,43864,11364],{"class":264},[220,43866,268],{"class":260},[220,43868,11369],{"class":230},[220,43870,43871],{"class":222,"line":179},[220,43872,647],{"emptyLinePlaceholder":194},[220,43874,43875,43877,43879,43881,43883,43885],{"class":222,"line":389},[220,43876,1735],{"class":260},[220,43878,1738],{"class":420},[220,43880,1741],{"class":260},[220,43882,1744],{"class":260},[220,43884,1747],{"class":226},[220,43886,1750],{"class":264},[220,43888,43889],{"class":222,"line":399},[220,43890,1765],{"class":264},[220,43892,43893,43895,43898,43900,43902],{"class":222,"line":644},[220,43894,1770],{"class":264},[220,43896,43897],{"class":230},"'DiffuseBlur'",[220,43899,32063],{"class":264},[220,43901,23867],{"class":420},[220,43903,7397],{"class":264},[220,43905,43906,43908,43910],{"class":222,"line":650},[220,43907,6865],{"class":264},[220,43909,6409],{"class":230},[220,43911,2465],{"class":264},[220,43913,43914],{"class":222,"line":656},[220,43915,6882],{"class":264},[220,43917,43918],{"class":222,"line":673},[220,43919,1787],{"class":264},[220,43921,43922],{"class":222,"line":682},[220,43923,1792],{"class":264},[1504,43925,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43927},[43928,43929],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":43604,"description":43612},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":43936,"title":43937,"body":43938,"category":33256,"componentType":25740,"description":43945,"extension":191,"meta":44206,"navigation":194,"path":44207,"requiresChild":194,"seo":44208,"stem":44209,"__hash__":44210},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":43939,"toc":44202},[43940,43943,43946,43948,43950,43953,43955,44200],[11,43941,43937],{"id":43942},"displacementmap",[15,43944,43945],{},"Distorts child content using another layer's pixels as a displacement map",[31771,43947],{"component":43937},[23,43949,31775],{"id":26391},[31777,43951],{":props":43952},"[{\"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,43954,31783],{"id":31782},[246,43956,43957,44002,44046,44090,44134],{":tabs":1557},[212,43958,43960],{"className":334,"code":43959,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,43961,43962,43970,43978,43986,43994],{"__ignoreMap":178},[220,43963,43964,43966,43968],{"class":222,"line":223},[220,43965,343],{"class":264},[220,43967,347],{"class":346},[220,43969,359],{"class":264},[220,43971,43972,43974,43976],{"class":222,"line":179},[220,43973,364],{"class":264},[220,43975,43937],{"class":346},[220,43977,359],{"class":264},[220,43979,43980,43982,43984],{"class":222,"line":389},[220,43981,2550],{"class":264},[220,43983,2553],{"class":346},[220,43985,386],{"class":264},[220,43987,43988,43990,43992],{"class":222,"line":399},[220,43989,2567],{"class":264},[220,43991,43937],{"class":346},[220,43993,359],{"class":264},[220,43995,43996,43998,44000],{"class":222,"line":644},[220,43997,402],{"class":264},[220,43999,347],{"class":346},[220,44001,359],{"class":264},[212,44003,44004],{"className":409,"code":43959,"language":411,"meta":178,"style":178},[99,44005,44006,44014,44022,44030,44038],{"__ignoreMap":178},[220,44007,44008,44010,44012],{"class":222,"line":223},[220,44009,343],{"class":264},[220,44011,347],{"class":420},[220,44013,359],{"class":264},[220,44015,44016,44018,44020],{"class":222,"line":179},[220,44017,364],{"class":264},[220,44019,43937],{"class":420},[220,44021,359],{"class":264},[220,44023,44024,44026,44028],{"class":222,"line":389},[220,44025,2550],{"class":264},[220,44027,2553],{"class":420},[220,44029,386],{"class":264},[220,44031,44032,44034,44036],{"class":222,"line":399},[220,44033,2567],{"class":264},[220,44035,43937],{"class":420},[220,44037,359],{"class":264},[220,44039,44040,44042,44044],{"class":222,"line":644},[220,44041,402],{"class":264},[220,44043,347],{"class":420},[220,44045,359],{"class":264},[212,44047,44048],{"className":2844,"code":43959,"language":2846,"meta":178,"style":178},[99,44049,44050,44058,44066,44074,44082],{"__ignoreMap":178},[220,44051,44052,44054,44056],{"class":222,"line":223},[220,44053,343],{"class":264},[220,44055,347],{"class":420},[220,44057,359],{"class":264},[220,44059,44060,44062,44064],{"class":222,"line":179},[220,44061,364],{"class":264},[220,44063,43937],{"class":420},[220,44065,359],{"class":264},[220,44067,44068,44070,44072],{"class":222,"line":389},[220,44069,2550],{"class":264},[220,44071,2553],{"class":420},[220,44073,386],{"class":264},[220,44075,44076,44078,44080],{"class":222,"line":399},[220,44077,2567],{"class":264},[220,44079,43937],{"class":420},[220,44081,359],{"class":264},[220,44083,44084,44086,44088],{"class":222,"line":644},[220,44085,402],{"class":264},[220,44087,347],{"class":420},[220,44089,359],{"class":264},[212,44091,44092],{"className":468,"code":43959,"language":469,"meta":178,"style":178},[99,44093,44094,44102,44110,44118,44126],{"__ignoreMap":178},[220,44095,44096,44098,44100],{"class":222,"line":223},[220,44097,343],{"class":264},[220,44099,347],{"class":420},[220,44101,359],{"class":264},[220,44103,44104,44106,44108],{"class":222,"line":179},[220,44105,364],{"class":264},[220,44107,43937],{"class":420},[220,44109,359],{"class":264},[220,44111,44112,44114,44116],{"class":222,"line":389},[220,44113,2550],{"class":264},[220,44115,2553],{"class":420},[220,44117,386],{"class":264},[220,44119,44120,44122,44124],{"class":222,"line":399},[220,44121,2567],{"class":264},[220,44123,43937],{"class":420},[220,44125,359],{"class":264},[220,44127,44128,44130,44132],{"class":222,"line":644},[220,44129,402],{"class":264},[220,44131,347],{"class":420},[220,44133,359],{"class":264},[212,44135,44137],{"className":251,"code":44136,"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,44138,44139,44149,44153,44167,44171,44180,44188,44192,44196],{"__ignoreMap":178},[220,44140,44141,44143,44145,44147],{"class":222,"line":223},[220,44142,261],{"class":260},[220,44144,11364],{"class":264},[220,44146,268],{"class":260},[220,44148,11369],{"class":230},[220,44150,44151],{"class":222,"line":179},[220,44152,647],{"emptyLinePlaceholder":194},[220,44154,44155,44157,44159,44161,44163,44165],{"class":222,"line":389},[220,44156,1735],{"class":260},[220,44158,1738],{"class":420},[220,44160,1741],{"class":260},[220,44162,1744],{"class":260},[220,44164,1747],{"class":226},[220,44166,1750],{"class":264},[220,44168,44169],{"class":222,"line":399},[220,44170,1765],{"class":264},[220,44172,44173,44175,44178],{"class":222,"line":644},[220,44174,1770],{"class":264},[220,44176,44177],{"class":230},"'DisplacementMap'",[220,44179,6860],{"class":264},[220,44181,44182,44184,44186],{"class":222,"line":650},[220,44183,6865],{"class":264},[220,44185,6409],{"class":230},[220,44187,2465],{"class":264},[220,44189,44190],{"class":222,"line":656},[220,44191,6882],{"class":264},[220,44193,44194],{"class":222,"line":673},[220,44195,1787],{"class":264},[220,44197,44198],{"class":222,"line":682},[220,44199,1792],{"class":264},[1504,44201,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":44203},[44204,44205],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":43937,"description":43945},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":44212,"title":44213,"body":44214,"category":32666,"componentType":25740,"description":44221,"extension":191,"meta":44482,"navigation":194,"path":44483,"requiresChild":194,"seo":44484,"stem":44485,"__hash__":44486},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":44215,"toc":44478},[44216,44219,44222,44224,44226,44229,44231,44476],[11,44217,44213],{"id":44218},"dither",[15,44220,44221],{},"Dithering effect with multiple pattern options",[31771,44223],{"component":44213},[23,44225,31775],{"id":26391},[31777,44227],{":props":44228},"[{\"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,44230,31783],{"id":31782},[246,44232,44233,44278,44322,44366,44410],{":tabs":1557},[212,44234,44236],{"className":334,"code":44235,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,44237,44238,44246,44254,44262,44270],{"__ignoreMap":178},[220,44239,44240,44242,44244],{"class":222,"line":223},[220,44241,343],{"class":264},[220,44243,347],{"class":346},[220,44245,359],{"class":264},[220,44247,44248,44250,44252],{"class":222,"line":179},[220,44249,364],{"class":264},[220,44251,44213],{"class":346},[220,44253,359],{"class":264},[220,44255,44256,44258,44260],{"class":222,"line":389},[220,44257,2550],{"class":264},[220,44259,2553],{"class":346},[220,44261,386],{"class":264},[220,44263,44264,44266,44268],{"class":222,"line":399},[220,44265,2567],{"class":264},[220,44267,44213],{"class":346},[220,44269,359],{"class":264},[220,44271,44272,44274,44276],{"class":222,"line":644},[220,44273,402],{"class":264},[220,44275,347],{"class":346},[220,44277,359],{"class":264},[212,44279,44280],{"className":409,"code":44235,"language":411,"meta":178,"style":178},[99,44281,44282,44290,44298,44306,44314],{"__ignoreMap":178},[220,44283,44284,44286,44288],{"class":222,"line":223},[220,44285,343],{"class":264},[220,44287,347],{"class":420},[220,44289,359],{"class":264},[220,44291,44292,44294,44296],{"class":222,"line":179},[220,44293,364],{"class":264},[220,44295,44213],{"class":420},[220,44297,359],{"class":264},[220,44299,44300,44302,44304],{"class":222,"line":389},[220,44301,2550],{"class":264},[220,44303,2553],{"class":420},[220,44305,386],{"class":264},[220,44307,44308,44310,44312],{"class":222,"line":399},[220,44309,2567],{"class":264},[220,44311,44213],{"class":420},[220,44313,359],{"class":264},[220,44315,44316,44318,44320],{"class":222,"line":644},[220,44317,402],{"class":264},[220,44319,347],{"class":420},[220,44321,359],{"class":264},[212,44323,44324],{"className":2844,"code":44235,"language":2846,"meta":178,"style":178},[99,44325,44326,44334,44342,44350,44358],{"__ignoreMap":178},[220,44327,44328,44330,44332],{"class":222,"line":223},[220,44329,343],{"class":264},[220,44331,347],{"class":420},[220,44333,359],{"class":264},[220,44335,44336,44338,44340],{"class":222,"line":179},[220,44337,364],{"class":264},[220,44339,44213],{"class":420},[220,44341,359],{"class":264},[220,44343,44344,44346,44348],{"class":222,"line":389},[220,44345,2550],{"class":264},[220,44347,2553],{"class":420},[220,44349,386],{"class":264},[220,44351,44352,44354,44356],{"class":222,"line":399},[220,44353,2567],{"class":264},[220,44355,44213],{"class":420},[220,44357,359],{"class":264},[220,44359,44360,44362,44364],{"class":222,"line":644},[220,44361,402],{"class":264},[220,44363,347],{"class":420},[220,44365,359],{"class":264},[212,44367,44368],{"className":468,"code":44235,"language":469,"meta":178,"style":178},[99,44369,44370,44378,44386,44394,44402],{"__ignoreMap":178},[220,44371,44372,44374,44376],{"class":222,"line":223},[220,44373,343],{"class":264},[220,44375,347],{"class":420},[220,44377,359],{"class":264},[220,44379,44380,44382,44384],{"class":222,"line":179},[220,44381,364],{"class":264},[220,44383,44213],{"class":420},[220,44385,359],{"class":264},[220,44387,44388,44390,44392],{"class":222,"line":389},[220,44389,2550],{"class":264},[220,44391,2553],{"class":420},[220,44393,386],{"class":264},[220,44395,44396,44398,44400],{"class":222,"line":399},[220,44397,2567],{"class":264},[220,44399,44213],{"class":420},[220,44401,359],{"class":264},[220,44403,44404,44406,44408],{"class":222,"line":644},[220,44405,402],{"class":264},[220,44407,347],{"class":420},[220,44409,359],{"class":264},[212,44411,44413],{"className":251,"code":44412,"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,44414,44415,44425,44429,44443,44447,44456,44464,44468,44472],{"__ignoreMap":178},[220,44416,44417,44419,44421,44423],{"class":222,"line":223},[220,44418,261],{"class":260},[220,44420,11364],{"class":264},[220,44422,268],{"class":260},[220,44424,11369],{"class":230},[220,44426,44427],{"class":222,"line":179},[220,44428,647],{"emptyLinePlaceholder":194},[220,44430,44431,44433,44435,44437,44439,44441],{"class":222,"line":389},[220,44432,1735],{"class":260},[220,44434,1738],{"class":420},[220,44436,1741],{"class":260},[220,44438,1744],{"class":260},[220,44440,1747],{"class":226},[220,44442,1750],{"class":264},[220,44444,44445],{"class":222,"line":399},[220,44446,1765],{"class":264},[220,44448,44449,44451,44454],{"class":222,"line":644},[220,44450,1770],{"class":264},[220,44452,44453],{"class":230},"'Dither'",[220,44455,6860],{"class":264},[220,44457,44458,44460,44462],{"class":222,"line":650},[220,44459,6865],{"class":264},[220,44461,6409],{"class":230},[220,44463,2465],{"class":264},[220,44465,44466],{"class":222,"line":656},[220,44467,6882],{"class":264},[220,44469,44470],{"class":222,"line":673},[220,44471,1787],{"class":264},[220,44473,44474],{"class":222,"line":682},[220,44475,1792],{"class":264},[1504,44477,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":44479},[44480,44481],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":44213,"description":44221},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":44488,"title":44489,"body":44490,"category":32923,"componentType":25734,"description":44497,"extension":191,"meta":44725,"navigation":194,"path":44726,"requiresChild":32390,"seo":44727,"stem":44728,"__hash__":44729},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":44491,"toc":44721},[44492,44495,44498,44500,44502,44505,44507,44719],[11,44493,44489],{"id":44494},"dotgrid",[15,44496,44497],{},"Grid of dots with optional twinkling animation",[31771,44499],{"component":44489},[23,44501,31775],{"id":26391},[31777,44503],{":props":44504},"[{\"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,44506,31783],{"id":31782},[246,44508,44509,44548,44586,44624,44662],{":tabs":1557},[212,44510,44512],{"className":334,"code":44511,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44513,44514,44522,44528,44536,44540],{"__ignoreMap":178},[220,44515,44516,44518,44520],{"class":222,"line":223},[220,44517,343],{"class":264},[220,44519,347],{"class":346},[220,44521,359],{"class":264},[220,44523,44524,44526],{"class":222,"line":179},[220,44525,364],{"class":264},[220,44527,19360],{"class":346},[220,44529,44530,44532,44534],{"class":222,"line":389},[220,44531,9487],{"class":226},[220,44533,353],{"class":264},[220,44535,9443],{"class":230},[220,44537,44538],{"class":222,"line":399},[220,44539,1234],{"class":264},[220,44541,44542,44544,44546],{"class":222,"line":644},[220,44543,402],{"class":264},[220,44545,347],{"class":346},[220,44547,359],{"class":264},[212,44549,44550],{"className":409,"code":44511,"language":411,"meta":178,"style":178},[99,44551,44552,44560,44566,44574,44578],{"__ignoreMap":178},[220,44553,44554,44556,44558],{"class":222,"line":223},[220,44555,343],{"class":264},[220,44557,347],{"class":420},[220,44559,359],{"class":264},[220,44561,44562,44564],{"class":222,"line":179},[220,44563,364],{"class":264},[220,44565,19360],{"class":420},[220,44567,44568,44570,44572],{"class":222,"line":389},[220,44569,9487],{"class":226},[220,44571,353],{"class":260},[220,44573,9443],{"class":230},[220,44575,44576],{"class":222,"line":399},[220,44577,1234],{"class":264},[220,44579,44580,44582,44584],{"class":222,"line":644},[220,44581,402],{"class":264},[220,44583,347],{"class":420},[220,44585,359],{"class":264},[212,44587,44588],{"className":2844,"code":44511,"language":2846,"meta":178,"style":178},[99,44589,44590,44598,44604,44612,44616],{"__ignoreMap":178},[220,44591,44592,44594,44596],{"class":222,"line":223},[220,44593,343],{"class":264},[220,44595,347],{"class":420},[220,44597,359],{"class":264},[220,44599,44600,44602],{"class":222,"line":179},[220,44601,364],{"class":264},[220,44603,19360],{"class":420},[220,44605,44606,44608,44610],{"class":222,"line":389},[220,44607,9487],{"class":226},[220,44609,353],{"class":264},[220,44611,9443],{"class":230},[220,44613,44614],{"class":222,"line":399},[220,44615,1234],{"class":264},[220,44617,44618,44620,44622],{"class":222,"line":644},[220,44619,402],{"class":264},[220,44621,347],{"class":420},[220,44623,359],{"class":264},[212,44625,44626],{"className":468,"code":44511,"language":469,"meta":178,"style":178},[99,44627,44628,44636,44642,44650,44654],{"__ignoreMap":178},[220,44629,44630,44632,44634],{"class":222,"line":223},[220,44631,343],{"class":264},[220,44633,347],{"class":420},[220,44635,359],{"class":264},[220,44637,44638,44640],{"class":222,"line":179},[220,44639,364],{"class":264},[220,44641,19360],{"class":420},[220,44643,44644,44646,44648],{"class":222,"line":389},[220,44645,9487],{"class":226},[220,44647,353],{"class":260},[220,44649,9443],{"class":230},[220,44651,44652],{"class":222,"line":399},[220,44653,1234],{"class":264},[220,44655,44656,44658,44660],{"class":222,"line":644},[220,44657,402],{"class":264},[220,44659,347],{"class":420},[220,44661,359],{"class":264},[212,44663,44665],{"className":251,"code":44664,"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,44666,44667,44677,44681,44695,44699,44711,44715],{"__ignoreMap":178},[220,44668,44669,44671,44673,44675],{"class":222,"line":223},[220,44670,261],{"class":260},[220,44672,11364],{"class":264},[220,44674,268],{"class":260},[220,44676,11369],{"class":230},[220,44678,44679],{"class":222,"line":179},[220,44680,647],{"emptyLinePlaceholder":194},[220,44682,44683,44685,44687,44689,44691,44693],{"class":222,"line":389},[220,44684,1735],{"class":260},[220,44686,1738],{"class":420},[220,44688,1741],{"class":260},[220,44690,1744],{"class":260},[220,44692,1747],{"class":226},[220,44694,1750],{"class":264},[220,44696,44697],{"class":222,"line":399},[220,44698,1765],{"class":264},[220,44700,44701,44703,44705,44707,44709],{"class":222,"line":644},[220,44702,1770],{"class":264},[220,44704,19913],{"class":230},[220,44706,1776],{"class":264},[220,44708,10021],{"class":230},[220,44710,1782],{"class":264},[220,44712,44713],{"class":222,"line":650},[220,44714,1787],{"class":264},[220,44716,44717],{"class":222,"line":656},[220,44718,1792],{"class":264},[1504,44720,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44722},[44723,44724],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":44489,"description":44497},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44731,"title":44732,"body":44733,"category":32666,"componentType":25740,"description":44740,"extension":191,"meta":45094,"navigation":194,"path":45095,"requiresChild":194,"seo":45096,"stem":45097,"__hash__":45098},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44734,"toc":45090},[44735,44738,44741,44743,44745,44748,44750,45088],[11,44736,44732],{"id":44737},"dropshadow",[15,44739,44740],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31771,44742],{"component":44732},[23,44744,31775],{"id":26391},[31777,44746],{":props":44747},"[{\"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,44749,31783],{"id":31782},[246,44751,44752,44816,44883,44947,45013],{":tabs":1557},[212,44753,44755],{"className":334,"code":44754,"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,44756,44757,44765,44772,44780,44788,44792,44800,44808],{"__ignoreMap":178},[220,44758,44759,44761,44763],{"class":222,"line":223},[220,44760,343],{"class":264},[220,44762,347],{"class":346},[220,44764,359],{"class":264},[220,44766,44767,44769],{"class":222,"line":179},[220,44768,364],{"class":264},[220,44770,44771],{"class":346},"DropShadow\n",[220,44773,44774,44776,44778],{"class":222,"line":389},[220,44775,9487],{"class":226},[220,44777,353],{"class":264},[220,44779,19331],{"class":230},[220,44781,44782,44784,44786],{"class":222,"line":399},[220,44783,20228],{"class":226},[220,44785,353],{"class":264},[220,44787,42218],{"class":230},[220,44789,44790],{"class":222,"line":644},[220,44791,31819],{"class":264},[220,44793,44794,44796,44798],{"class":222,"line":650},[220,44795,2550],{"class":264},[220,44797,2553],{"class":346},[220,44799,386],{"class":264},[220,44801,44802,44804,44806],{"class":222,"line":656},[220,44803,2567],{"class":264},[220,44805,44732],{"class":346},[220,44807,359],{"class":264},[220,44809,44810,44812,44814],{"class":222,"line":673},[220,44811,402],{"class":264},[220,44813,347],{"class":346},[220,44815,359],{"class":264},[212,44817,44819],{"className":409,"code":44818,"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,44820,44821,44829,44835,44843,44855,44859,44867,44875],{"__ignoreMap":178},[220,44822,44823,44825,44827],{"class":222,"line":223},[220,44824,343],{"class":264},[220,44826,347],{"class":420},[220,44828,359],{"class":264},[220,44830,44831,44833],{"class":222,"line":179},[220,44832,364],{"class":264},[220,44834,44771],{"class":420},[220,44836,44837,44839,44841],{"class":222,"line":389},[220,44838,9487],{"class":226},[220,44840,353],{"class":260},[220,44842,19331],{"class":230},[220,44844,44845,44847,44849,44851,44853],{"class":222,"line":399},[220,44846,20339],{"class":226},[220,44848,353],{"class":260},[220,44850,743],{"class":264},[220,44852,7605],{"class":420},[220,44854,749],{"class":264},[220,44856,44857],{"class":222,"line":644},[220,44858,31819],{"class":264},[220,44860,44861,44863,44865],{"class":222,"line":650},[220,44862,2550],{"class":264},[220,44864,2553],{"class":420},[220,44866,386],{"class":264},[220,44868,44869,44871,44873],{"class":222,"line":656},[220,44870,2567],{"class":264},[220,44872,44732],{"class":420},[220,44874,359],{"class":264},[220,44876,44877,44879,44881],{"class":222,"line":673},[220,44878,402],{"class":264},[220,44880,347],{"class":420},[220,44882,359],{"class":264},[212,44884,44885],{"className":2844,"code":44818,"language":2846,"meta":178,"style":178},[99,44886,44887,44895,44901,44909,44919,44923,44931,44939],{"__ignoreMap":178},[220,44888,44889,44891,44893],{"class":222,"line":223},[220,44890,343],{"class":264},[220,44892,347],{"class":420},[220,44894,359],{"class":264},[220,44896,44897,44899],{"class":222,"line":179},[220,44898,364],{"class":264},[220,44900,44771],{"class":420},[220,44902,44903,44905,44907],{"class":222,"line":389},[220,44904,9487],{"class":226},[220,44906,353],{"class":264},[220,44908,19331],{"class":230},[220,44910,44911,44913,44915,44917],{"class":222,"line":399},[220,44912,20339],{"class":226},[220,44914,29729],{"class":264},[220,44916,7605],{"class":420},[220,44918,749],{"class":264},[220,44920,44921],{"class":222,"line":644},[220,44922,31819],{"class":264},[220,44924,44925,44927,44929],{"class":222,"line":650},[220,44926,2550],{"class":264},[220,44928,2553],{"class":420},[220,44930,386],{"class":264},[220,44932,44933,44935,44937],{"class":222,"line":656},[220,44934,2567],{"class":264},[220,44936,44732],{"class":420},[220,44938,359],{"class":264},[220,44940,44941,44943,44945],{"class":222,"line":673},[220,44942,402],{"class":264},[220,44944,347],{"class":420},[220,44946,359],{"class":264},[212,44948,44949],{"className":468,"code":44818,"language":469,"meta":178,"style":178},[99,44950,44951,44959,44965,44973,44985,44989,44997,45005],{"__ignoreMap":178},[220,44952,44953,44955,44957],{"class":222,"line":223},[220,44954,343],{"class":264},[220,44956,347],{"class":420},[220,44958,359],{"class":264},[220,44960,44961,44963],{"class":222,"line":179},[220,44962,364],{"class":264},[220,44964,44771],{"class":420},[220,44966,44967,44969,44971],{"class":222,"line":389},[220,44968,9487],{"class":226},[220,44970,353],{"class":260},[220,44972,19331],{"class":230},[220,44974,44975,44977,44979,44981,44983],{"class":222,"line":399},[220,44976,20339],{"class":226},[220,44978,353],{"class":260},[220,44980,743],{"class":264},[220,44982,7605],{"class":420},[220,44984,749],{"class":264},[220,44986,44987],{"class":222,"line":644},[220,44988,31819],{"class":264},[220,44990,44991,44993,44995],{"class":222,"line":650},[220,44992,2550],{"class":264},[220,44994,2553],{"class":420},[220,44996,386],{"class":264},[220,44998,44999,45001,45003],{"class":222,"line":656},[220,45000,2567],{"class":264},[220,45002,44732],{"class":420},[220,45004,359],{"class":264},[220,45006,45007,45009,45011],{"class":222,"line":673},[220,45008,402],{"class":264},[220,45010,347],{"class":420},[220,45012,359],{"class":264},[212,45014,45016],{"className":251,"code":45015,"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,45017,45018,45028,45032,45046,45050,45068,45076,45080,45084],{"__ignoreMap":178},[220,45019,45020,45022,45024,45026],{"class":222,"line":223},[220,45021,261],{"class":260},[220,45023,11364],{"class":264},[220,45025,268],{"class":260},[220,45027,11369],{"class":230},[220,45029,45030],{"class":222,"line":179},[220,45031,647],{"emptyLinePlaceholder":194},[220,45033,45034,45036,45038,45040,45042,45044],{"class":222,"line":389},[220,45035,1735],{"class":260},[220,45037,1738],{"class":420},[220,45039,1741],{"class":260},[220,45041,1744],{"class":260},[220,45043,1747],{"class":226},[220,45045,1750],{"class":264},[220,45047,45048],{"class":222,"line":399},[220,45049,1765],{"class":264},[220,45051,45052,45054,45057,45059,45061,45064,45066],{"class":222,"line":644},[220,45053,1770],{"class":264},[220,45055,45056],{"class":230},"'DropShadow'",[220,45058,1776],{"class":264},[220,45060,19891],{"class":230},[220,45062,45063],{"class":264},", intensity: ",[220,45065,7605],{"class":420},[220,45067,7397],{"class":264},[220,45069,45070,45072,45074],{"class":222,"line":650},[220,45071,6865],{"class":264},[220,45073,6409],{"class":230},[220,45075,2465],{"class":264},[220,45077,45078],{"class":222,"line":656},[220,45079,6882],{"class":264},[220,45081,45082],{"class":222,"line":673},[220,45083,1787],{"class":264},[220,45085,45086],{"class":222,"line":682},[220,45087,1792],{"class":264},[1504,45089,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45091},[45092,45093],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44732,"description":44740},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":45100,"title":45101,"body":45102,"category":36228,"componentType":25740,"description":45109,"extension":191,"meta":45370,"navigation":194,"path":45371,"requiresChild":194,"seo":45372,"stem":45373,"__hash__":45374},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":45103,"toc":45366},[45104,45107,45110,45112,45114,45117,45119,45364],[11,45105,45101],{"id":45106},"duotone",[15,45108,45109],{},"Map colors to two tones based on luminance",[31771,45111],{"component":45101},[23,45113,31775],{"id":26391},[31777,45115],{":props":45116},"[{\"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,45118,31783],{"id":31782},[246,45120,45121,45166,45210,45254,45298],{":tabs":1557},[212,45122,45124],{"className":334,"code":45123,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,45125,45126,45134,45142,45150,45158],{"__ignoreMap":178},[220,45127,45128,45130,45132],{"class":222,"line":223},[220,45129,343],{"class":264},[220,45131,347],{"class":346},[220,45133,359],{"class":264},[220,45135,45136,45138,45140],{"class":222,"line":179},[220,45137,364],{"class":264},[220,45139,45101],{"class":346},[220,45141,359],{"class":264},[220,45143,45144,45146,45148],{"class":222,"line":389},[220,45145,2550],{"class":264},[220,45147,2553],{"class":346},[220,45149,386],{"class":264},[220,45151,45152,45154,45156],{"class":222,"line":399},[220,45153,2567],{"class":264},[220,45155,45101],{"class":346},[220,45157,359],{"class":264},[220,45159,45160,45162,45164],{"class":222,"line":644},[220,45161,402],{"class":264},[220,45163,347],{"class":346},[220,45165,359],{"class":264},[212,45167,45168],{"className":409,"code":45123,"language":411,"meta":178,"style":178},[99,45169,45170,45178,45186,45194,45202],{"__ignoreMap":178},[220,45171,45172,45174,45176],{"class":222,"line":223},[220,45173,343],{"class":264},[220,45175,347],{"class":420},[220,45177,359],{"class":264},[220,45179,45180,45182,45184],{"class":222,"line":179},[220,45181,364],{"class":264},[220,45183,45101],{"class":420},[220,45185,359],{"class":264},[220,45187,45188,45190,45192],{"class":222,"line":389},[220,45189,2550],{"class":264},[220,45191,2553],{"class":420},[220,45193,386],{"class":264},[220,45195,45196,45198,45200],{"class":222,"line":399},[220,45197,2567],{"class":264},[220,45199,45101],{"class":420},[220,45201,359],{"class":264},[220,45203,45204,45206,45208],{"class":222,"line":644},[220,45205,402],{"class":264},[220,45207,347],{"class":420},[220,45209,359],{"class":264},[212,45211,45212],{"className":2844,"code":45123,"language":2846,"meta":178,"style":178},[99,45213,45214,45222,45230,45238,45246],{"__ignoreMap":178},[220,45215,45216,45218,45220],{"class":222,"line":223},[220,45217,343],{"class":264},[220,45219,347],{"class":420},[220,45221,359],{"class":264},[220,45223,45224,45226,45228],{"class":222,"line":179},[220,45225,364],{"class":264},[220,45227,45101],{"class":420},[220,45229,359],{"class":264},[220,45231,45232,45234,45236],{"class":222,"line":389},[220,45233,2550],{"class":264},[220,45235,2553],{"class":420},[220,45237,386],{"class":264},[220,45239,45240,45242,45244],{"class":222,"line":399},[220,45241,2567],{"class":264},[220,45243,45101],{"class":420},[220,45245,359],{"class":264},[220,45247,45248,45250,45252],{"class":222,"line":644},[220,45249,402],{"class":264},[220,45251,347],{"class":420},[220,45253,359],{"class":264},[212,45255,45256],{"className":468,"code":45123,"language":469,"meta":178,"style":178},[99,45257,45258,45266,45274,45282,45290],{"__ignoreMap":178},[220,45259,45260,45262,45264],{"class":222,"line":223},[220,45261,343],{"class":264},[220,45263,347],{"class":420},[220,45265,359],{"class":264},[220,45267,45268,45270,45272],{"class":222,"line":179},[220,45269,364],{"class":264},[220,45271,45101],{"class":420},[220,45273,359],{"class":264},[220,45275,45276,45278,45280],{"class":222,"line":389},[220,45277,2550],{"class":264},[220,45279,2553],{"class":420},[220,45281,386],{"class":264},[220,45283,45284,45286,45288],{"class":222,"line":399},[220,45285,2567],{"class":264},[220,45287,45101],{"class":420},[220,45289,359],{"class":264},[220,45291,45292,45294,45296],{"class":222,"line":644},[220,45293,402],{"class":264},[220,45295,347],{"class":420},[220,45297,359],{"class":264},[212,45299,45301],{"className":251,"code":45300,"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,45302,45303,45313,45317,45331,45335,45344,45352,45356,45360],{"__ignoreMap":178},[220,45304,45305,45307,45309,45311],{"class":222,"line":223},[220,45306,261],{"class":260},[220,45308,11364],{"class":264},[220,45310,268],{"class":260},[220,45312,11369],{"class":230},[220,45314,45315],{"class":222,"line":179},[220,45316,647],{"emptyLinePlaceholder":194},[220,45318,45319,45321,45323,45325,45327,45329],{"class":222,"line":389},[220,45320,1735],{"class":260},[220,45322,1738],{"class":420},[220,45324,1741],{"class":260},[220,45326,1744],{"class":260},[220,45328,1747],{"class":226},[220,45330,1750],{"class":264},[220,45332,45333],{"class":222,"line":399},[220,45334,1765],{"class":264},[220,45336,45337,45339,45342],{"class":222,"line":644},[220,45338,1770],{"class":264},[220,45340,45341],{"class":230},"'Duotone'",[220,45343,6860],{"class":264},[220,45345,45346,45348,45350],{"class":222,"line":650},[220,45347,6865],{"class":264},[220,45349,6409],{"class":230},[220,45351,2465],{"class":264},[220,45353,45354],{"class":222,"line":656},[220,45355,6882],{"class":264},[220,45357,45358],{"class":222,"line":673},[220,45359,1787],{"class":264},[220,45361,45362],{"class":222,"line":682},[220,45363,1792],{"class":264},[1504,45365,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":45367},[45368,45369],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":45101,"description":45109},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":45376,"title":45377,"body":45378,"category":15765,"componentType":25734,"description":45385,"extension":191,"meta":45615,"navigation":194,"path":45616,"requiresChild":32390,"seo":45617,"stem":45618,"__hash__":45619},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":45379,"toc":45611},[45380,45383,45386,45388,45390,45393,45395,45609],[11,45381,45377],{"id":45382},"ellipse",[15,45384,45385],{},"Ellipse with independently adjustable horizontal and vertical radii",[31771,45387],{"component":45377},[23,45389,31775],{"id":26391},[31777,45391],{":props":45392},"[{\"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,45394,31783],{"id":31782},[246,45396,45397,45437,45475,45513,45551],{":tabs":1557},[212,45398,45400],{"className":334,"code":45399,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,45401,45402,45410,45417,45425,45429],{"__ignoreMap":178},[220,45403,45404,45406,45408],{"class":222,"line":223},[220,45405,343],{"class":264},[220,45407,347],{"class":346},[220,45409,359],{"class":264},[220,45411,45412,45414],{"class":222,"line":179},[220,45413,364],{"class":264},[220,45415,45416],{"class":346},"Ellipse\n",[220,45418,45419,45421,45423],{"class":222,"line":389},[220,45420,9487],{"class":226},[220,45422,353],{"class":264},[220,45424,9443],{"class":230},[220,45426,45427],{"class":222,"line":399},[220,45428,1234],{"class":264},[220,45430,45431,45433,45435],{"class":222,"line":644},[220,45432,402],{"class":264},[220,45434,347],{"class":346},[220,45436,359],{"class":264},[212,45438,45439],{"className":409,"code":45399,"language":411,"meta":178,"style":178},[99,45440,45441,45449,45455,45463,45467],{"__ignoreMap":178},[220,45442,45443,45445,45447],{"class":222,"line":223},[220,45444,343],{"class":264},[220,45446,347],{"class":420},[220,45448,359],{"class":264},[220,45450,45451,45453],{"class":222,"line":179},[220,45452,364],{"class":264},[220,45454,45416],{"class":420},[220,45456,45457,45459,45461],{"class":222,"line":389},[220,45458,9487],{"class":226},[220,45460,353],{"class":260},[220,45462,9443],{"class":230},[220,45464,45465],{"class":222,"line":399},[220,45466,1234],{"class":264},[220,45468,45469,45471,45473],{"class":222,"line":644},[220,45470,402],{"class":264},[220,45472,347],{"class":420},[220,45474,359],{"class":264},[212,45476,45477],{"className":2844,"code":45399,"language":2846,"meta":178,"style":178},[99,45478,45479,45487,45493,45501,45505],{"__ignoreMap":178},[220,45480,45481,45483,45485],{"class":222,"line":223},[220,45482,343],{"class":264},[220,45484,347],{"class":420},[220,45486,359],{"class":264},[220,45488,45489,45491],{"class":222,"line":179},[220,45490,364],{"class":264},[220,45492,45416],{"class":420},[220,45494,45495,45497,45499],{"class":222,"line":389},[220,45496,9487],{"class":226},[220,45498,353],{"class":264},[220,45500,9443],{"class":230},[220,45502,45503],{"class":222,"line":399},[220,45504,1234],{"class":264},[220,45506,45507,45509,45511],{"class":222,"line":644},[220,45508,402],{"class":264},[220,45510,347],{"class":420},[220,45512,359],{"class":264},[212,45514,45515],{"className":468,"code":45399,"language":469,"meta":178,"style":178},[99,45516,45517,45525,45531,45539,45543],{"__ignoreMap":178},[220,45518,45519,45521,45523],{"class":222,"line":223},[220,45520,343],{"class":264},[220,45522,347],{"class":420},[220,45524,359],{"class":264},[220,45526,45527,45529],{"class":222,"line":179},[220,45528,364],{"class":264},[220,45530,45416],{"class":420},[220,45532,45533,45535,45537],{"class":222,"line":389},[220,45534,9487],{"class":226},[220,45536,353],{"class":260},[220,45538,9443],{"class":230},[220,45540,45541],{"class":222,"line":399},[220,45542,1234],{"class":264},[220,45544,45545,45547,45549],{"class":222,"line":644},[220,45546,402],{"class":264},[220,45548,347],{"class":420},[220,45550,359],{"class":264},[212,45552,45554],{"className":251,"code":45553,"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,45555,45556,45566,45570,45584,45588,45601,45605],{"__ignoreMap":178},[220,45557,45558,45560,45562,45564],{"class":222,"line":223},[220,45559,261],{"class":260},[220,45561,11364],{"class":264},[220,45563,268],{"class":260},[220,45565,11369],{"class":230},[220,45567,45568],{"class":222,"line":179},[220,45569,647],{"emptyLinePlaceholder":194},[220,45571,45572,45574,45576,45578,45580,45582],{"class":222,"line":389},[220,45573,1735],{"class":260},[220,45575,1738],{"class":420},[220,45577,1741],{"class":260},[220,45579,1744],{"class":260},[220,45581,1747],{"class":226},[220,45583,1750],{"class":264},[220,45585,45586],{"class":222,"line":399},[220,45587,1765],{"class":264},[220,45589,45590,45592,45595,45597,45599],{"class":222,"line":644},[220,45591,1770],{"class":264},[220,45593,45594],{"class":230},"'Ellipse'",[220,45596,1776],{"class":264},[220,45598,10021],{"class":230},[220,45600,1782],{"class":264},[220,45602,45603],{"class":222,"line":650},[220,45604,1787],{"class":264},[220,45606,45607],{"class":222,"line":656},[220,45608,1792],{"class":264},[1504,45610,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45612},[45613,45614],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":45377,"description":45385},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":45621,"title":20841,"body":45622,"category":36429,"componentType":25740,"description":45629,"extension":191,"meta":45889,"navigation":194,"path":45890,"requiresChild":194,"seo":45891,"stem":45892,"__hash__":45893},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":45623,"toc":45885},[45624,45627,45630,45632,45634,45637,45639,45883],[11,45625,20841],{"id":45626},"emboss",[15,45628,45629],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31771,45631],{"component":20841},[23,45633,31775],{"id":26391},[31777,45635],{":props":45636},"[{\"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,45638,31783],{"id":31782},[246,45640,45641,45686,45730,45774,45818],{":tabs":1557},[212,45642,45644],{"className":334,"code":45643,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,45645,45646,45654,45662,45670,45678],{"__ignoreMap":178},[220,45647,45648,45650,45652],{"class":222,"line":223},[220,45649,343],{"class":264},[220,45651,347],{"class":346},[220,45653,359],{"class":264},[220,45655,45656,45658,45660],{"class":222,"line":179},[220,45657,364],{"class":264},[220,45659,20841],{"class":346},[220,45661,359],{"class":264},[220,45663,45664,45666,45668],{"class":222,"line":389},[220,45665,2550],{"class":264},[220,45667,2553],{"class":346},[220,45669,386],{"class":264},[220,45671,45672,45674,45676],{"class":222,"line":399},[220,45673,2567],{"class":264},[220,45675,20841],{"class":346},[220,45677,359],{"class":264},[220,45679,45680,45682,45684],{"class":222,"line":644},[220,45681,402],{"class":264},[220,45683,347],{"class":346},[220,45685,359],{"class":264},[212,45687,45688],{"className":409,"code":45643,"language":411,"meta":178,"style":178},[99,45689,45690,45698,45706,45714,45722],{"__ignoreMap":178},[220,45691,45692,45694,45696],{"class":222,"line":223},[220,45693,343],{"class":264},[220,45695,347],{"class":420},[220,45697,359],{"class":264},[220,45699,45700,45702,45704],{"class":222,"line":179},[220,45701,364],{"class":264},[220,45703,20841],{"class":420},[220,45705,359],{"class":264},[220,45707,45708,45710,45712],{"class":222,"line":389},[220,45709,2550],{"class":264},[220,45711,2553],{"class":420},[220,45713,386],{"class":264},[220,45715,45716,45718,45720],{"class":222,"line":399},[220,45717,2567],{"class":264},[220,45719,20841],{"class":420},[220,45721,359],{"class":264},[220,45723,45724,45726,45728],{"class":222,"line":644},[220,45725,402],{"class":264},[220,45727,347],{"class":420},[220,45729,359],{"class":264},[212,45731,45732],{"className":2844,"code":45643,"language":2846,"meta":178,"style":178},[99,45733,45734,45742,45750,45758,45766],{"__ignoreMap":178},[220,45735,45736,45738,45740],{"class":222,"line":223},[220,45737,343],{"class":264},[220,45739,347],{"class":420},[220,45741,359],{"class":264},[220,45743,45744,45746,45748],{"class":222,"line":179},[220,45745,364],{"class":264},[220,45747,20841],{"class":420},[220,45749,359],{"class":264},[220,45751,45752,45754,45756],{"class":222,"line":389},[220,45753,2550],{"class":264},[220,45755,2553],{"class":420},[220,45757,386],{"class":264},[220,45759,45760,45762,45764],{"class":222,"line":399},[220,45761,2567],{"class":264},[220,45763,20841],{"class":420},[220,45765,359],{"class":264},[220,45767,45768,45770,45772],{"class":222,"line":644},[220,45769,402],{"class":264},[220,45771,347],{"class":420},[220,45773,359],{"class":264},[212,45775,45776],{"className":468,"code":45643,"language":469,"meta":178,"style":178},[99,45777,45778,45786,45794,45802,45810],{"__ignoreMap":178},[220,45779,45780,45782,45784],{"class":222,"line":223},[220,45781,343],{"class":264},[220,45783,347],{"class":420},[220,45785,359],{"class":264},[220,45787,45788,45790,45792],{"class":222,"line":179},[220,45789,364],{"class":264},[220,45791,20841],{"class":420},[220,45793,359],{"class":264},[220,45795,45796,45798,45800],{"class":222,"line":389},[220,45797,2550],{"class":264},[220,45799,2553],{"class":420},[220,45801,386],{"class":264},[220,45803,45804,45806,45808],{"class":222,"line":399},[220,45805,2567],{"class":264},[220,45807,20841],{"class":420},[220,45809,359],{"class":264},[220,45811,45812,45814,45816],{"class":222,"line":644},[220,45813,402],{"class":264},[220,45815,347],{"class":420},[220,45817,359],{"class":264},[212,45819,45821],{"className":251,"code":45820,"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,45822,45823,45833,45837,45851,45855,45863,45871,45875,45879],{"__ignoreMap":178},[220,45824,45825,45827,45829,45831],{"class":222,"line":223},[220,45826,261],{"class":260},[220,45828,11364],{"class":264},[220,45830,268],{"class":260},[220,45832,11369],{"class":230},[220,45834,45835],{"class":222,"line":179},[220,45836,647],{"emptyLinePlaceholder":194},[220,45838,45839,45841,45843,45845,45847,45849],{"class":222,"line":389},[220,45840,1735],{"class":260},[220,45842,1738],{"class":420},[220,45844,1741],{"class":260},[220,45846,1744],{"class":260},[220,45848,1747],{"class":226},[220,45850,1750],{"class":264},[220,45852,45853],{"class":222,"line":399},[220,45854,1765],{"class":264},[220,45856,45857,45859,45861],{"class":222,"line":644},[220,45858,1770],{"class":264},[220,45860,21504],{"class":230},[220,45862,6860],{"class":264},[220,45864,45865,45867,45869],{"class":222,"line":650},[220,45866,6865],{"class":264},[220,45868,6409],{"class":230},[220,45870,2465],{"class":264},[220,45872,45873],{"class":222,"line":656},[220,45874,6882],{"class":264},[220,45876,45877],{"class":222,"line":673},[220,45878,1787],{"class":264},[220,45880,45881],{"class":222,"line":682},[220,45882,1792],{"class":264},[1504,45884,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":45886},[45887,45888],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20841,"description":45629},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":45895,"title":45896,"body":45897,"category":32666,"componentType":25740,"description":45904,"extension":191,"meta":46165,"navigation":194,"path":46166,"requiresChild":194,"seo":46167,"stem":46168,"__hash__":46169},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":45898,"toc":46161},[45899,45902,45905,45907,45909,45912,45914,46159],[11,45900,45896],{"id":45901},"engraving",[15,45903,45904],{},"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",[31771,45906],{"component":45896},[23,45908,31775],{"id":26391},[31777,45910],{":props":45911},"[{\"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,45913,31783],{"id":31782},[246,45915,45916,45961,46005,46049,46093],{":tabs":1557},[212,45917,45919],{"className":334,"code":45918,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,45920,45921,45929,45937,45945,45953],{"__ignoreMap":178},[220,45922,45923,45925,45927],{"class":222,"line":223},[220,45924,343],{"class":264},[220,45926,347],{"class":346},[220,45928,359],{"class":264},[220,45930,45931,45933,45935],{"class":222,"line":179},[220,45932,364],{"class":264},[220,45934,45896],{"class":346},[220,45936,359],{"class":264},[220,45938,45939,45941,45943],{"class":222,"line":389},[220,45940,2550],{"class":264},[220,45942,2553],{"class":346},[220,45944,386],{"class":264},[220,45946,45947,45949,45951],{"class":222,"line":399},[220,45948,2567],{"class":264},[220,45950,45896],{"class":346},[220,45952,359],{"class":264},[220,45954,45955,45957,45959],{"class":222,"line":644},[220,45956,402],{"class":264},[220,45958,347],{"class":346},[220,45960,359],{"class":264},[212,45962,45963],{"className":409,"code":45918,"language":411,"meta":178,"style":178},[99,45964,45965,45973,45981,45989,45997],{"__ignoreMap":178},[220,45966,45967,45969,45971],{"class":222,"line":223},[220,45968,343],{"class":264},[220,45970,347],{"class":420},[220,45972,359],{"class":264},[220,45974,45975,45977,45979],{"class":222,"line":179},[220,45976,364],{"class":264},[220,45978,45896],{"class":420},[220,45980,359],{"class":264},[220,45982,45983,45985,45987],{"class":222,"line":389},[220,45984,2550],{"class":264},[220,45986,2553],{"class":420},[220,45988,386],{"class":264},[220,45990,45991,45993,45995],{"class":222,"line":399},[220,45992,2567],{"class":264},[220,45994,45896],{"class":420},[220,45996,359],{"class":264},[220,45998,45999,46001,46003],{"class":222,"line":644},[220,46000,402],{"class":264},[220,46002,347],{"class":420},[220,46004,359],{"class":264},[212,46006,46007],{"className":2844,"code":45918,"language":2846,"meta":178,"style":178},[99,46008,46009,46017,46025,46033,46041],{"__ignoreMap":178},[220,46010,46011,46013,46015],{"class":222,"line":223},[220,46012,343],{"class":264},[220,46014,347],{"class":420},[220,46016,359],{"class":264},[220,46018,46019,46021,46023],{"class":222,"line":179},[220,46020,364],{"class":264},[220,46022,45896],{"class":420},[220,46024,359],{"class":264},[220,46026,46027,46029,46031],{"class":222,"line":389},[220,46028,2550],{"class":264},[220,46030,2553],{"class":420},[220,46032,386],{"class":264},[220,46034,46035,46037,46039],{"class":222,"line":399},[220,46036,2567],{"class":264},[220,46038,45896],{"class":420},[220,46040,359],{"class":264},[220,46042,46043,46045,46047],{"class":222,"line":644},[220,46044,402],{"class":264},[220,46046,347],{"class":420},[220,46048,359],{"class":264},[212,46050,46051],{"className":468,"code":45918,"language":469,"meta":178,"style":178},[99,46052,46053,46061,46069,46077,46085],{"__ignoreMap":178},[220,46054,46055,46057,46059],{"class":222,"line":223},[220,46056,343],{"class":264},[220,46058,347],{"class":420},[220,46060,359],{"class":264},[220,46062,46063,46065,46067],{"class":222,"line":179},[220,46064,364],{"class":264},[220,46066,45896],{"class":420},[220,46068,359],{"class":264},[220,46070,46071,46073,46075],{"class":222,"line":389},[220,46072,2550],{"class":264},[220,46074,2553],{"class":420},[220,46076,386],{"class":264},[220,46078,46079,46081,46083],{"class":222,"line":399},[220,46080,2567],{"class":264},[220,46082,45896],{"class":420},[220,46084,359],{"class":264},[220,46086,46087,46089,46091],{"class":222,"line":644},[220,46088,402],{"class":264},[220,46090,347],{"class":420},[220,46092,359],{"class":264},[212,46094,46096],{"className":251,"code":46095,"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,46097,46098,46108,46112,46126,46130,46139,46147,46151,46155],{"__ignoreMap":178},[220,46099,46100,46102,46104,46106],{"class":222,"line":223},[220,46101,261],{"class":260},[220,46103,11364],{"class":264},[220,46105,268],{"class":260},[220,46107,11369],{"class":230},[220,46109,46110],{"class":222,"line":179},[220,46111,647],{"emptyLinePlaceholder":194},[220,46113,46114,46116,46118,46120,46122,46124],{"class":222,"line":389},[220,46115,1735],{"class":260},[220,46117,1738],{"class":420},[220,46119,1741],{"class":260},[220,46121,1744],{"class":260},[220,46123,1747],{"class":226},[220,46125,1750],{"class":264},[220,46127,46128],{"class":222,"line":399},[220,46129,1765],{"class":264},[220,46131,46132,46134,46137],{"class":222,"line":644},[220,46133,1770],{"class":264},[220,46135,46136],{"class":230},"'Engraving'",[220,46138,6860],{"class":264},[220,46140,46141,46143,46145],{"class":222,"line":650},[220,46142,6865],{"class":264},[220,46144,6409],{"class":230},[220,46146,2465],{"class":264},[220,46148,46149],{"class":222,"line":656},[220,46150,6882],{"class":264},[220,46152,46153],{"class":222,"line":673},[220,46154,1787],{"class":264},[220,46156,46157],{"class":222,"line":682},[220,46158,1792],{"class":264},[1504,46160,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":46162},[46163,46164],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":45896,"description":45904},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":46171,"title":46172,"body":46173,"category":32923,"componentType":25734,"description":46180,"extension":191,"meta":46365,"navigation":194,"path":46366,"requiresChild":32390,"seo":46367,"stem":46368,"__hash__":46369},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":46174,"toc":46361},[46175,46178,46181,46183,46185,46188,46190,46359],[11,46176,46172],{"id":46177},"erosionnoise",[15,46179,46180],{},"Branching, hydraulic-erosion ridges carved into noise",[31771,46182],{"component":46172},[23,46184,31775],{"id":26391},[31777,46186],{":props":46187},"[{\"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,46189,31783],{"id":31782},[246,46191,46192,46221,46249,46277,46305],{":tabs":1557},[212,46193,46195],{"className":334,"code":46194,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,46196,46197,46205,46213],{"__ignoreMap":178},[220,46198,46199,46201,46203],{"class":222,"line":223},[220,46200,343],{"class":264},[220,46202,347],{"class":346},[220,46204,359],{"class":264},[220,46206,46207,46209,46211],{"class":222,"line":179},[220,46208,364],{"class":264},[220,46210,46172],{"class":346},[220,46212,386],{"class":264},[220,46214,46215,46217,46219],{"class":222,"line":389},[220,46216,402],{"class":264},[220,46218,347],{"class":346},[220,46220,359],{"class":264},[212,46222,46223],{"className":409,"code":46194,"language":411,"meta":178,"style":178},[99,46224,46225,46233,46241],{"__ignoreMap":178},[220,46226,46227,46229,46231],{"class":222,"line":223},[220,46228,343],{"class":264},[220,46230,347],{"class":420},[220,46232,359],{"class":264},[220,46234,46235,46237,46239],{"class":222,"line":179},[220,46236,364],{"class":264},[220,46238,46172],{"class":420},[220,46240,386],{"class":264},[220,46242,46243,46245,46247],{"class":222,"line":389},[220,46244,402],{"class":264},[220,46246,347],{"class":420},[220,46248,359],{"class":264},[212,46250,46251],{"className":2844,"code":46194,"language":2846,"meta":178,"style":178},[99,46252,46253,46261,46269],{"__ignoreMap":178},[220,46254,46255,46257,46259],{"class":222,"line":223},[220,46256,343],{"class":264},[220,46258,347],{"class":420},[220,46260,359],{"class":264},[220,46262,46263,46265,46267],{"class":222,"line":179},[220,46264,364],{"class":264},[220,46266,46172],{"class":420},[220,46268,386],{"class":264},[220,46270,46271,46273,46275],{"class":222,"line":389},[220,46272,402],{"class":264},[220,46274,347],{"class":420},[220,46276,359],{"class":264},[212,46278,46279],{"className":468,"code":46194,"language":469,"meta":178,"style":178},[99,46280,46281,46289,46297],{"__ignoreMap":178},[220,46282,46283,46285,46287],{"class":222,"line":223},[220,46284,343],{"class":264},[220,46286,347],{"class":420},[220,46288,359],{"class":264},[220,46290,46291,46293,46295],{"class":222,"line":179},[220,46292,364],{"class":264},[220,46294,46172],{"class":420},[220,46296,386],{"class":264},[220,46298,46299,46301,46303],{"class":222,"line":389},[220,46300,402],{"class":264},[220,46302,347],{"class":420},[220,46304,359],{"class":264},[212,46306,46308],{"className":251,"code":46307,"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,46309,46310,46320,46324,46338,46342,46351,46355],{"__ignoreMap":178},[220,46311,46312,46314,46316,46318],{"class":222,"line":223},[220,46313,261],{"class":260},[220,46315,11364],{"class":264},[220,46317,268],{"class":260},[220,46319,11369],{"class":230},[220,46321,46322],{"class":222,"line":179},[220,46323,647],{"emptyLinePlaceholder":194},[220,46325,46326,46328,46330,46332,46334,46336],{"class":222,"line":389},[220,46327,1735],{"class":260},[220,46329,1738],{"class":420},[220,46331,1741],{"class":260},[220,46333,1744],{"class":260},[220,46335,1747],{"class":226},[220,46337,1750],{"class":264},[220,46339,46340],{"class":222,"line":399},[220,46341,1765],{"class":264},[220,46343,46344,46346,46349],{"class":222,"line":644},[220,46345,1770],{"class":264},[220,46347,46348],{"class":230},"'ErosionNoise'",[220,46350,2465],{"class":264},[220,46352,46353],{"class":222,"line":650},[220,46354,1787],{"class":264},[220,46356,46357],{"class":222,"line":656},[220,46358,1792],{"class":264},[1504,46360,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":46362},[46363,46364],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":46172,"description":46180},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":46371,"title":46372,"body":46373,"category":36228,"componentType":25740,"description":46380,"extension":191,"meta":46641,"navigation":194,"path":46642,"requiresChild":194,"seo":46643,"stem":46644,"__hash__":46645},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":46374,"toc":46637},[46375,46378,46381,46383,46385,46388,46390,46635],[11,46376,46372],{"id":46377},"exposure",[15,46379,46380],{},"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.",[31771,46382],{"component":46372},[23,46384,31775],{"id":26391},[31777,46386],{":props":46387},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,46389,31783],{"id":31782},[246,46391,46392,46437,46481,46525,46569],{":tabs":1557},[212,46393,46395],{"className":334,"code":46394,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,46396,46397,46405,46413,46421,46429],{"__ignoreMap":178},[220,46398,46399,46401,46403],{"class":222,"line":223},[220,46400,343],{"class":264},[220,46402,347],{"class":346},[220,46404,359],{"class":264},[220,46406,46407,46409,46411],{"class":222,"line":179},[220,46408,364],{"class":264},[220,46410,46372],{"class":346},[220,46412,359],{"class":264},[220,46414,46415,46417,46419],{"class":222,"line":389},[220,46416,2550],{"class":264},[220,46418,2553],{"class":346},[220,46420,386],{"class":264},[220,46422,46423,46425,46427],{"class":222,"line":399},[220,46424,2567],{"class":264},[220,46426,46372],{"class":346},[220,46428,359],{"class":264},[220,46430,46431,46433,46435],{"class":222,"line":644},[220,46432,402],{"class":264},[220,46434,347],{"class":346},[220,46436,359],{"class":264},[212,46438,46439],{"className":409,"code":46394,"language":411,"meta":178,"style":178},[99,46440,46441,46449,46457,46465,46473],{"__ignoreMap":178},[220,46442,46443,46445,46447],{"class":222,"line":223},[220,46444,343],{"class":264},[220,46446,347],{"class":420},[220,46448,359],{"class":264},[220,46450,46451,46453,46455],{"class":222,"line":179},[220,46452,364],{"class":264},[220,46454,46372],{"class":420},[220,46456,359],{"class":264},[220,46458,46459,46461,46463],{"class":222,"line":389},[220,46460,2550],{"class":264},[220,46462,2553],{"class":420},[220,46464,386],{"class":264},[220,46466,46467,46469,46471],{"class":222,"line":399},[220,46468,2567],{"class":264},[220,46470,46372],{"class":420},[220,46472,359],{"class":264},[220,46474,46475,46477,46479],{"class":222,"line":644},[220,46476,402],{"class":264},[220,46478,347],{"class":420},[220,46480,359],{"class":264},[212,46482,46483],{"className":2844,"code":46394,"language":2846,"meta":178,"style":178},[99,46484,46485,46493,46501,46509,46517],{"__ignoreMap":178},[220,46486,46487,46489,46491],{"class":222,"line":223},[220,46488,343],{"class":264},[220,46490,347],{"class":420},[220,46492,359],{"class":264},[220,46494,46495,46497,46499],{"class":222,"line":179},[220,46496,364],{"class":264},[220,46498,46372],{"class":420},[220,46500,359],{"class":264},[220,46502,46503,46505,46507],{"class":222,"line":389},[220,46504,2550],{"class":264},[220,46506,2553],{"class":420},[220,46508,386],{"class":264},[220,46510,46511,46513,46515],{"class":222,"line":399},[220,46512,2567],{"class":264},[220,46514,46372],{"class":420},[220,46516,359],{"class":264},[220,46518,46519,46521,46523],{"class":222,"line":644},[220,46520,402],{"class":264},[220,46522,347],{"class":420},[220,46524,359],{"class":264},[212,46526,46527],{"className":468,"code":46394,"language":469,"meta":178,"style":178},[99,46528,46529,46537,46545,46553,46561],{"__ignoreMap":178},[220,46530,46531,46533,46535],{"class":222,"line":223},[220,46532,343],{"class":264},[220,46534,347],{"class":420},[220,46536,359],{"class":264},[220,46538,46539,46541,46543],{"class":222,"line":179},[220,46540,364],{"class":264},[220,46542,46372],{"class":420},[220,46544,359],{"class":264},[220,46546,46547,46549,46551],{"class":222,"line":389},[220,46548,2550],{"class":264},[220,46550,2553],{"class":420},[220,46552,386],{"class":264},[220,46554,46555,46557,46559],{"class":222,"line":399},[220,46556,2567],{"class":264},[220,46558,46372],{"class":420},[220,46560,359],{"class":264},[220,46562,46563,46565,46567],{"class":222,"line":644},[220,46564,402],{"class":264},[220,46566,347],{"class":420},[220,46568,359],{"class":264},[212,46570,46572],{"className":251,"code":46571,"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,46573,46574,46584,46588,46602,46606,46615,46623,46627,46631],{"__ignoreMap":178},[220,46575,46576,46578,46580,46582],{"class":222,"line":223},[220,46577,261],{"class":260},[220,46579,11364],{"class":264},[220,46581,268],{"class":260},[220,46583,11369],{"class":230},[220,46585,46586],{"class":222,"line":179},[220,46587,647],{"emptyLinePlaceholder":194},[220,46589,46590,46592,46594,46596,46598,46600],{"class":222,"line":389},[220,46591,1735],{"class":260},[220,46593,1738],{"class":420},[220,46595,1741],{"class":260},[220,46597,1744],{"class":260},[220,46599,1747],{"class":226},[220,46601,1750],{"class":264},[220,46603,46604],{"class":222,"line":399},[220,46605,1765],{"class":264},[220,46607,46608,46610,46613],{"class":222,"line":644},[220,46609,1770],{"class":264},[220,46611,46612],{"class":230},"'Exposure'",[220,46614,6860],{"class":264},[220,46616,46617,46619,46621],{"class":222,"line":650},[220,46618,6865],{"class":264},[220,46620,6409],{"class":230},[220,46622,2465],{"class":264},[220,46624,46625],{"class":222,"line":656},[220,46626,6882],{"class":264},[220,46628,46629],{"class":222,"line":673},[220,46630,1787],{"class":264},[220,46632,46633],{"class":222,"line":682},[220,46634,1792],{"class":264},[1504,46636,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":46638},[46639,46640],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":46372,"description":46380},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":46647,"title":46648,"body":46649,"category":32923,"componentType":25734,"description":46656,"extension":191,"meta":46841,"navigation":194,"path":46842,"requiresChild":32390,"seo":46843,"stem":46844,"__hash__":46845},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":46650,"toc":46837},[46651,46654,46657,46659,46661,46664,46666,46835],[11,46652,46648],{"id":46653},"fallinglines",[15,46655,46656],{},"Directional falling lines with a leading-to-trailing color fade",[31771,46658],{"component":46648},[23,46660,31775],{"id":26391},[31777,46662],{":props":46663},"[{\"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,46665,31783],{"id":31782},[246,46667,46668,46697,46725,46753,46781],{":tabs":1557},[212,46669,46671],{"className":334,"code":46670,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,46672,46673,46681,46689],{"__ignoreMap":178},[220,46674,46675,46677,46679],{"class":222,"line":223},[220,46676,343],{"class":264},[220,46678,347],{"class":346},[220,46680,359],{"class":264},[220,46682,46683,46685,46687],{"class":222,"line":179},[220,46684,364],{"class":264},[220,46686,46648],{"class":346},[220,46688,386],{"class":264},[220,46690,46691,46693,46695],{"class":222,"line":389},[220,46692,402],{"class":264},[220,46694,347],{"class":346},[220,46696,359],{"class":264},[212,46698,46699],{"className":409,"code":46670,"language":411,"meta":178,"style":178},[99,46700,46701,46709,46717],{"__ignoreMap":178},[220,46702,46703,46705,46707],{"class":222,"line":223},[220,46704,343],{"class":264},[220,46706,347],{"class":420},[220,46708,359],{"class":264},[220,46710,46711,46713,46715],{"class":222,"line":179},[220,46712,364],{"class":264},[220,46714,46648],{"class":420},[220,46716,386],{"class":264},[220,46718,46719,46721,46723],{"class":222,"line":389},[220,46720,402],{"class":264},[220,46722,347],{"class":420},[220,46724,359],{"class":264},[212,46726,46727],{"className":2844,"code":46670,"language":2846,"meta":178,"style":178},[99,46728,46729,46737,46745],{"__ignoreMap":178},[220,46730,46731,46733,46735],{"class":222,"line":223},[220,46732,343],{"class":264},[220,46734,347],{"class":420},[220,46736,359],{"class":264},[220,46738,46739,46741,46743],{"class":222,"line":179},[220,46740,364],{"class":264},[220,46742,46648],{"class":420},[220,46744,386],{"class":264},[220,46746,46747,46749,46751],{"class":222,"line":389},[220,46748,402],{"class":264},[220,46750,347],{"class":420},[220,46752,359],{"class":264},[212,46754,46755],{"className":468,"code":46670,"language":469,"meta":178,"style":178},[99,46756,46757,46765,46773],{"__ignoreMap":178},[220,46758,46759,46761,46763],{"class":222,"line":223},[220,46760,343],{"class":264},[220,46762,347],{"class":420},[220,46764,359],{"class":264},[220,46766,46767,46769,46771],{"class":222,"line":179},[220,46768,364],{"class":264},[220,46770,46648],{"class":420},[220,46772,386],{"class":264},[220,46774,46775,46777,46779],{"class":222,"line":389},[220,46776,402],{"class":264},[220,46778,347],{"class":420},[220,46780,359],{"class":264},[212,46782,46784],{"className":251,"code":46783,"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,46785,46786,46796,46800,46814,46818,46827,46831],{"__ignoreMap":178},[220,46787,46788,46790,46792,46794],{"class":222,"line":223},[220,46789,261],{"class":260},[220,46791,11364],{"class":264},[220,46793,268],{"class":260},[220,46795,11369],{"class":230},[220,46797,46798],{"class":222,"line":179},[220,46799,647],{"emptyLinePlaceholder":194},[220,46801,46802,46804,46806,46808,46810,46812],{"class":222,"line":389},[220,46803,1735],{"class":260},[220,46805,1738],{"class":420},[220,46807,1741],{"class":260},[220,46809,1744],{"class":260},[220,46811,1747],{"class":226},[220,46813,1750],{"class":264},[220,46815,46816],{"class":222,"line":399},[220,46817,1765],{"class":264},[220,46819,46820,46822,46825],{"class":222,"line":644},[220,46821,1770],{"class":264},[220,46823,46824],{"class":230},"'FallingLines'",[220,46826,2465],{"class":264},[220,46828,46829],{"class":222,"line":650},[220,46830,1787],{"class":264},[220,46832,46833],{"class":222,"line":656},[220,46834,1792],{"class":264},[1504,46836,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":46838},[46839,46840],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":46648,"description":46656},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46847,"title":46848,"body":46849,"category":32666,"componentType":25740,"description":46856,"extension":191,"meta":47117,"navigation":194,"path":47118,"requiresChild":194,"seo":47119,"stem":47120,"__hash__":47121},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46850,"toc":47113},[46851,46854,46857,46859,46861,46864,46866,47111],[11,46852,46848],{"id":46853},"filmgrain",[15,46855,46856],{},"Analog film grain texture overlay, weighted toward darker areas",[31771,46858],{"component":46848},[23,46860,31775],{"id":26391},[31777,46862],{":props":46863},"[{\"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,46865,31783],{"id":31782},[246,46867,46868,46913,46957,47001,47045],{":tabs":1557},[212,46869,46871],{"className":334,"code":46870,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,46872,46873,46881,46889,46897,46905],{"__ignoreMap":178},[220,46874,46875,46877,46879],{"class":222,"line":223},[220,46876,343],{"class":264},[220,46878,347],{"class":346},[220,46880,359],{"class":264},[220,46882,46883,46885,46887],{"class":222,"line":179},[220,46884,364],{"class":264},[220,46886,46848],{"class":346},[220,46888,359],{"class":264},[220,46890,46891,46893,46895],{"class":222,"line":389},[220,46892,2550],{"class":264},[220,46894,2553],{"class":346},[220,46896,386],{"class":264},[220,46898,46899,46901,46903],{"class":222,"line":399},[220,46900,2567],{"class":264},[220,46902,46848],{"class":346},[220,46904,359],{"class":264},[220,46906,46907,46909,46911],{"class":222,"line":644},[220,46908,402],{"class":264},[220,46910,347],{"class":346},[220,46912,359],{"class":264},[212,46914,46915],{"className":409,"code":46870,"language":411,"meta":178,"style":178},[99,46916,46917,46925,46933,46941,46949],{"__ignoreMap":178},[220,46918,46919,46921,46923],{"class":222,"line":223},[220,46920,343],{"class":264},[220,46922,347],{"class":420},[220,46924,359],{"class":264},[220,46926,46927,46929,46931],{"class":222,"line":179},[220,46928,364],{"class":264},[220,46930,46848],{"class":420},[220,46932,359],{"class":264},[220,46934,46935,46937,46939],{"class":222,"line":389},[220,46936,2550],{"class":264},[220,46938,2553],{"class":420},[220,46940,386],{"class":264},[220,46942,46943,46945,46947],{"class":222,"line":399},[220,46944,2567],{"class":264},[220,46946,46848],{"class":420},[220,46948,359],{"class":264},[220,46950,46951,46953,46955],{"class":222,"line":644},[220,46952,402],{"class":264},[220,46954,347],{"class":420},[220,46956,359],{"class":264},[212,46958,46959],{"className":2844,"code":46870,"language":2846,"meta":178,"style":178},[99,46960,46961,46969,46977,46985,46993],{"__ignoreMap":178},[220,46962,46963,46965,46967],{"class":222,"line":223},[220,46964,343],{"class":264},[220,46966,347],{"class":420},[220,46968,359],{"class":264},[220,46970,46971,46973,46975],{"class":222,"line":179},[220,46972,364],{"class":264},[220,46974,46848],{"class":420},[220,46976,359],{"class":264},[220,46978,46979,46981,46983],{"class":222,"line":389},[220,46980,2550],{"class":264},[220,46982,2553],{"class":420},[220,46984,386],{"class":264},[220,46986,46987,46989,46991],{"class":222,"line":399},[220,46988,2567],{"class":264},[220,46990,46848],{"class":420},[220,46992,359],{"class":264},[220,46994,46995,46997,46999],{"class":222,"line":644},[220,46996,402],{"class":264},[220,46998,347],{"class":420},[220,47000,359],{"class":264},[212,47002,47003],{"className":468,"code":46870,"language":469,"meta":178,"style":178},[99,47004,47005,47013,47021,47029,47037],{"__ignoreMap":178},[220,47006,47007,47009,47011],{"class":222,"line":223},[220,47008,343],{"class":264},[220,47010,347],{"class":420},[220,47012,359],{"class":264},[220,47014,47015,47017,47019],{"class":222,"line":179},[220,47016,364],{"class":264},[220,47018,46848],{"class":420},[220,47020,359],{"class":264},[220,47022,47023,47025,47027],{"class":222,"line":389},[220,47024,2550],{"class":264},[220,47026,2553],{"class":420},[220,47028,386],{"class":264},[220,47030,47031,47033,47035],{"class":222,"line":399},[220,47032,2567],{"class":264},[220,47034,46848],{"class":420},[220,47036,359],{"class":264},[220,47038,47039,47041,47043],{"class":222,"line":644},[220,47040,402],{"class":264},[220,47042,347],{"class":420},[220,47044,359],{"class":264},[212,47046,47048],{"className":251,"code":47047,"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,47049,47050,47060,47064,47078,47082,47091,47099,47103,47107],{"__ignoreMap":178},[220,47051,47052,47054,47056,47058],{"class":222,"line":223},[220,47053,261],{"class":260},[220,47055,11364],{"class":264},[220,47057,268],{"class":260},[220,47059,11369],{"class":230},[220,47061,47062],{"class":222,"line":179},[220,47063,647],{"emptyLinePlaceholder":194},[220,47065,47066,47068,47070,47072,47074,47076],{"class":222,"line":389},[220,47067,1735],{"class":260},[220,47069,1738],{"class":420},[220,47071,1741],{"class":260},[220,47073,1744],{"class":260},[220,47075,1747],{"class":226},[220,47077,1750],{"class":264},[220,47079,47080],{"class":222,"line":399},[220,47081,1765],{"class":264},[220,47083,47084,47086,47089],{"class":222,"line":644},[220,47085,1770],{"class":264},[220,47087,47088],{"class":230},"'FilmGrain'",[220,47090,6860],{"class":264},[220,47092,47093,47095,47097],{"class":222,"line":650},[220,47094,6865],{"class":264},[220,47096,6409],{"class":230},[220,47098,2465],{"class":264},[220,47100,47101],{"class":222,"line":656},[220,47102,6882],{"class":264},[220,47104,47105],{"class":222,"line":673},[220,47106,1787],{"class":264},[220,47108,47109],{"class":222,"line":682},[220,47110,1792],{"class":264},[1504,47112,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":47114},[47115,47116],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46848,"description":46856},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":47123,"title":47124,"body":47125,"category":36228,"componentType":25740,"description":47132,"extension":191,"meta":47393,"navigation":194,"path":47394,"requiresChild":194,"seo":47395,"stem":47396,"__hash__":47397},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":47126,"toc":47389},[47127,47130,47133,47135,47137,47140,47142,47387],[11,47128,47124],{"id":47129},"filmstock",[15,47131,47132],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31771,47134],{"component":47124},[23,47136,31775],{"id":26391},[31777,47138],{":props":47139},"[{\"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,47141,31783],{"id":31782},[246,47143,47144,47189,47233,47277,47321],{":tabs":1557},[212,47145,47147],{"className":334,"code":47146,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,47148,47149,47157,47165,47173,47181],{"__ignoreMap":178},[220,47150,47151,47153,47155],{"class":222,"line":223},[220,47152,343],{"class":264},[220,47154,347],{"class":346},[220,47156,359],{"class":264},[220,47158,47159,47161,47163],{"class":222,"line":179},[220,47160,364],{"class":264},[220,47162,47124],{"class":346},[220,47164,359],{"class":264},[220,47166,47167,47169,47171],{"class":222,"line":389},[220,47168,2550],{"class":264},[220,47170,2553],{"class":346},[220,47172,386],{"class":264},[220,47174,47175,47177,47179],{"class":222,"line":399},[220,47176,2567],{"class":264},[220,47178,47124],{"class":346},[220,47180,359],{"class":264},[220,47182,47183,47185,47187],{"class":222,"line":644},[220,47184,402],{"class":264},[220,47186,347],{"class":346},[220,47188,359],{"class":264},[212,47190,47191],{"className":409,"code":47146,"language":411,"meta":178,"style":178},[99,47192,47193,47201,47209,47217,47225],{"__ignoreMap":178},[220,47194,47195,47197,47199],{"class":222,"line":223},[220,47196,343],{"class":264},[220,47198,347],{"class":420},[220,47200,359],{"class":264},[220,47202,47203,47205,47207],{"class":222,"line":179},[220,47204,364],{"class":264},[220,47206,47124],{"class":420},[220,47208,359],{"class":264},[220,47210,47211,47213,47215],{"class":222,"line":389},[220,47212,2550],{"class":264},[220,47214,2553],{"class":420},[220,47216,386],{"class":264},[220,47218,47219,47221,47223],{"class":222,"line":399},[220,47220,2567],{"class":264},[220,47222,47124],{"class":420},[220,47224,359],{"class":264},[220,47226,47227,47229,47231],{"class":222,"line":644},[220,47228,402],{"class":264},[220,47230,347],{"class":420},[220,47232,359],{"class":264},[212,47234,47235],{"className":2844,"code":47146,"language":2846,"meta":178,"style":178},[99,47236,47237,47245,47253,47261,47269],{"__ignoreMap":178},[220,47238,47239,47241,47243],{"class":222,"line":223},[220,47240,343],{"class":264},[220,47242,347],{"class":420},[220,47244,359],{"class":264},[220,47246,47247,47249,47251],{"class":222,"line":179},[220,47248,364],{"class":264},[220,47250,47124],{"class":420},[220,47252,359],{"class":264},[220,47254,47255,47257,47259],{"class":222,"line":389},[220,47256,2550],{"class":264},[220,47258,2553],{"class":420},[220,47260,386],{"class":264},[220,47262,47263,47265,47267],{"class":222,"line":399},[220,47264,2567],{"class":264},[220,47266,47124],{"class":420},[220,47268,359],{"class":264},[220,47270,47271,47273,47275],{"class":222,"line":644},[220,47272,402],{"class":264},[220,47274,347],{"class":420},[220,47276,359],{"class":264},[212,47278,47279],{"className":468,"code":47146,"language":469,"meta":178,"style":178},[99,47280,47281,47289,47297,47305,47313],{"__ignoreMap":178},[220,47282,47283,47285,47287],{"class":222,"line":223},[220,47284,343],{"class":264},[220,47286,347],{"class":420},[220,47288,359],{"class":264},[220,47290,47291,47293,47295],{"class":222,"line":179},[220,47292,364],{"class":264},[220,47294,47124],{"class":420},[220,47296,359],{"class":264},[220,47298,47299,47301,47303],{"class":222,"line":389},[220,47300,2550],{"class":264},[220,47302,2553],{"class":420},[220,47304,386],{"class":264},[220,47306,47307,47309,47311],{"class":222,"line":399},[220,47308,2567],{"class":264},[220,47310,47124],{"class":420},[220,47312,359],{"class":264},[220,47314,47315,47317,47319],{"class":222,"line":644},[220,47316,402],{"class":264},[220,47318,347],{"class":420},[220,47320,359],{"class":264},[212,47322,47324],{"className":251,"code":47323,"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,47325,47326,47336,47340,47354,47358,47367,47375,47379,47383],{"__ignoreMap":178},[220,47327,47328,47330,47332,47334],{"class":222,"line":223},[220,47329,261],{"class":260},[220,47331,11364],{"class":264},[220,47333,268],{"class":260},[220,47335,11369],{"class":230},[220,47337,47338],{"class":222,"line":179},[220,47339,647],{"emptyLinePlaceholder":194},[220,47341,47342,47344,47346,47348,47350,47352],{"class":222,"line":389},[220,47343,1735],{"class":260},[220,47345,1738],{"class":420},[220,47347,1741],{"class":260},[220,47349,1744],{"class":260},[220,47351,1747],{"class":226},[220,47353,1750],{"class":264},[220,47355,47356],{"class":222,"line":399},[220,47357,1765],{"class":264},[220,47359,47360,47362,47365],{"class":222,"line":644},[220,47361,1770],{"class":264},[220,47363,47364],{"class":230},"'FilmStock'",[220,47366,6860],{"class":264},[220,47368,47369,47371,47373],{"class":222,"line":650},[220,47370,6865],{"class":264},[220,47372,6409],{"class":230},[220,47374,2465],{"class":264},[220,47376,47377],{"class":222,"line":656},[220,47378,6882],{"class":264},[220,47380,47381],{"class":222,"line":673},[220,47382,1787],{"class":264},[220,47384,47385],{"class":222,"line":682},[220,47386,1792],{"class":264},[1504,47388,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":47390},[47391,47392],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":47124,"description":47132},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":47399,"title":47400,"body":47401,"category":33256,"componentType":25740,"description":47408,"extension":191,"meta":47669,"navigation":194,"path":47670,"requiresChild":194,"seo":47671,"stem":47672,"__hash__":47673},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":47402,"toc":47665},[47403,47406,47409,47411,47413,47416,47418,47663],[11,47404,47400],{"id":47405},"flip",[15,47407,47408],{},"Mirror content horizontally, vertically, or both",[31771,47410],{"component":47400},[23,47412,31775],{"id":26391},[31777,47414],{":props":47415},"[{\"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,47417,31783],{"id":31782},[246,47419,47420,47465,47509,47553,47597],{":tabs":1557},[212,47421,47423],{"className":334,"code":47422,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,47424,47425,47433,47441,47449,47457],{"__ignoreMap":178},[220,47426,47427,47429,47431],{"class":222,"line":223},[220,47428,343],{"class":264},[220,47430,347],{"class":346},[220,47432,359],{"class":264},[220,47434,47435,47437,47439],{"class":222,"line":179},[220,47436,364],{"class":264},[220,47438,47400],{"class":346},[220,47440,359],{"class":264},[220,47442,47443,47445,47447],{"class":222,"line":389},[220,47444,2550],{"class":264},[220,47446,2553],{"class":346},[220,47448,386],{"class":264},[220,47450,47451,47453,47455],{"class":222,"line":399},[220,47452,2567],{"class":264},[220,47454,47400],{"class":346},[220,47456,359],{"class":264},[220,47458,47459,47461,47463],{"class":222,"line":644},[220,47460,402],{"class":264},[220,47462,347],{"class":346},[220,47464,359],{"class":264},[212,47466,47467],{"className":409,"code":47422,"language":411,"meta":178,"style":178},[99,47468,47469,47477,47485,47493,47501],{"__ignoreMap":178},[220,47470,47471,47473,47475],{"class":222,"line":223},[220,47472,343],{"class":264},[220,47474,347],{"class":420},[220,47476,359],{"class":264},[220,47478,47479,47481,47483],{"class":222,"line":179},[220,47480,364],{"class":264},[220,47482,47400],{"class":420},[220,47484,359],{"class":264},[220,47486,47487,47489,47491],{"class":222,"line":389},[220,47488,2550],{"class":264},[220,47490,2553],{"class":420},[220,47492,386],{"class":264},[220,47494,47495,47497,47499],{"class":222,"line":399},[220,47496,2567],{"class":264},[220,47498,47400],{"class":420},[220,47500,359],{"class":264},[220,47502,47503,47505,47507],{"class":222,"line":644},[220,47504,402],{"class":264},[220,47506,347],{"class":420},[220,47508,359],{"class":264},[212,47510,47511],{"className":2844,"code":47422,"language":2846,"meta":178,"style":178},[99,47512,47513,47521,47529,47537,47545],{"__ignoreMap":178},[220,47514,47515,47517,47519],{"class":222,"line":223},[220,47516,343],{"class":264},[220,47518,347],{"class":420},[220,47520,359],{"class":264},[220,47522,47523,47525,47527],{"class":222,"line":179},[220,47524,364],{"class":264},[220,47526,47400],{"class":420},[220,47528,359],{"class":264},[220,47530,47531,47533,47535],{"class":222,"line":389},[220,47532,2550],{"class":264},[220,47534,2553],{"class":420},[220,47536,386],{"class":264},[220,47538,47539,47541,47543],{"class":222,"line":399},[220,47540,2567],{"class":264},[220,47542,47400],{"class":420},[220,47544,359],{"class":264},[220,47546,47547,47549,47551],{"class":222,"line":644},[220,47548,402],{"class":264},[220,47550,347],{"class":420},[220,47552,359],{"class":264},[212,47554,47555],{"className":468,"code":47422,"language":469,"meta":178,"style":178},[99,47556,47557,47565,47573,47581,47589],{"__ignoreMap":178},[220,47558,47559,47561,47563],{"class":222,"line":223},[220,47560,343],{"class":264},[220,47562,347],{"class":420},[220,47564,359],{"class":264},[220,47566,47567,47569,47571],{"class":222,"line":179},[220,47568,364],{"class":264},[220,47570,47400],{"class":420},[220,47572,359],{"class":264},[220,47574,47575,47577,47579],{"class":222,"line":389},[220,47576,2550],{"class":264},[220,47578,2553],{"class":420},[220,47580,386],{"class":264},[220,47582,47583,47585,47587],{"class":222,"line":399},[220,47584,2567],{"class":264},[220,47586,47400],{"class":420},[220,47588,359],{"class":264},[220,47590,47591,47593,47595],{"class":222,"line":644},[220,47592,402],{"class":264},[220,47594,347],{"class":420},[220,47596,359],{"class":264},[212,47598,47600],{"className":251,"code":47599,"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,47601,47602,47612,47616,47630,47634,47643,47651,47655,47659],{"__ignoreMap":178},[220,47603,47604,47606,47608,47610],{"class":222,"line":223},[220,47605,261],{"class":260},[220,47607,11364],{"class":264},[220,47609,268],{"class":260},[220,47611,11369],{"class":230},[220,47613,47614],{"class":222,"line":179},[220,47615,647],{"emptyLinePlaceholder":194},[220,47617,47618,47620,47622,47624,47626,47628],{"class":222,"line":389},[220,47619,1735],{"class":260},[220,47621,1738],{"class":420},[220,47623,1741],{"class":260},[220,47625,1744],{"class":260},[220,47627,1747],{"class":226},[220,47629,1750],{"class":264},[220,47631,47632],{"class":222,"line":399},[220,47633,1765],{"class":264},[220,47635,47636,47638,47641],{"class":222,"line":644},[220,47637,1770],{"class":264},[220,47639,47640],{"class":230},"'Flip'",[220,47642,6860],{"class":264},[220,47644,47645,47647,47649],{"class":222,"line":650},[220,47646,6865],{"class":264},[220,47648,6409],{"class":230},[220,47650,2465],{"class":264},[220,47652,47653],{"class":222,"line":656},[220,47654,6882],{"class":264},[220,47656,47657],{"class":222,"line":673},[220,47658,1787],{"class":264},[220,47660,47661],{"class":222,"line":682},[220,47662,1792],{"class":264},[1504,47664,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":47666},[47667,47668],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":47400,"description":47408},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":47675,"title":47676,"body":47677,"category":32923,"componentType":25734,"description":47684,"extension":191,"meta":47869,"navigation":194,"path":47870,"requiresChild":32390,"seo":47871,"stem":47872,"__hash__":47873},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":47678,"toc":47865},[47679,47682,47685,47687,47689,47692,47694,47863],[11,47680,47676],{"id":47681},"floatingparticles",[15,47683,47684],{},"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",[31771,47686],{"component":47676},[23,47688,31775],{"id":26391},[31777,47690],{":props":47691},"[{\"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,47693,31783],{"id":31782},[246,47695,47696,47725,47753,47781,47809],{":tabs":1557},[212,47697,47699],{"className":334,"code":47698,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47700,47701,47709,47717],{"__ignoreMap":178},[220,47702,47703,47705,47707],{"class":222,"line":223},[220,47704,343],{"class":264},[220,47706,347],{"class":346},[220,47708,359],{"class":264},[220,47710,47711,47713,47715],{"class":222,"line":179},[220,47712,364],{"class":264},[220,47714,47676],{"class":346},[220,47716,386],{"class":264},[220,47718,47719,47721,47723],{"class":222,"line":389},[220,47720,402],{"class":264},[220,47722,347],{"class":346},[220,47724,359],{"class":264},[212,47726,47727],{"className":409,"code":47698,"language":411,"meta":178,"style":178},[99,47728,47729,47737,47745],{"__ignoreMap":178},[220,47730,47731,47733,47735],{"class":222,"line":223},[220,47732,343],{"class":264},[220,47734,347],{"class":420},[220,47736,359],{"class":264},[220,47738,47739,47741,47743],{"class":222,"line":179},[220,47740,364],{"class":264},[220,47742,47676],{"class":420},[220,47744,386],{"class":264},[220,47746,47747,47749,47751],{"class":222,"line":389},[220,47748,402],{"class":264},[220,47750,347],{"class":420},[220,47752,359],{"class":264},[212,47754,47755],{"className":2844,"code":47698,"language":2846,"meta":178,"style":178},[99,47756,47757,47765,47773],{"__ignoreMap":178},[220,47758,47759,47761,47763],{"class":222,"line":223},[220,47760,343],{"class":264},[220,47762,347],{"class":420},[220,47764,359],{"class":264},[220,47766,47767,47769,47771],{"class":222,"line":179},[220,47768,364],{"class":264},[220,47770,47676],{"class":420},[220,47772,386],{"class":264},[220,47774,47775,47777,47779],{"class":222,"line":389},[220,47776,402],{"class":264},[220,47778,347],{"class":420},[220,47780,359],{"class":264},[212,47782,47783],{"className":468,"code":47698,"language":469,"meta":178,"style":178},[99,47784,47785,47793,47801],{"__ignoreMap":178},[220,47786,47787,47789,47791],{"class":222,"line":223},[220,47788,343],{"class":264},[220,47790,347],{"class":420},[220,47792,359],{"class":264},[220,47794,47795,47797,47799],{"class":222,"line":179},[220,47796,364],{"class":264},[220,47798,47676],{"class":420},[220,47800,386],{"class":264},[220,47802,47803,47805,47807],{"class":222,"line":389},[220,47804,402],{"class":264},[220,47806,347],{"class":420},[220,47808,359],{"class":264},[212,47810,47812],{"className":251,"code":47811,"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,47813,47814,47824,47828,47842,47846,47855,47859],{"__ignoreMap":178},[220,47815,47816,47818,47820,47822],{"class":222,"line":223},[220,47817,261],{"class":260},[220,47819,11364],{"class":264},[220,47821,268],{"class":260},[220,47823,11369],{"class":230},[220,47825,47826],{"class":222,"line":179},[220,47827,647],{"emptyLinePlaceholder":194},[220,47829,47830,47832,47834,47836,47838,47840],{"class":222,"line":389},[220,47831,1735],{"class":260},[220,47833,1738],{"class":420},[220,47835,1741],{"class":260},[220,47837,1744],{"class":260},[220,47839,1747],{"class":226},[220,47841,1750],{"class":264},[220,47843,47844],{"class":222,"line":399},[220,47845,1765],{"class":264},[220,47847,47848,47850,47853],{"class":222,"line":644},[220,47849,1770],{"class":264},[220,47851,47852],{"class":230},"'FloatingParticles'",[220,47854,2465],{"class":264},[220,47856,47857],{"class":222,"line":650},[220,47858,1787],{"class":264},[220,47860,47861],{"class":222,"line":656},[220,47862,1792],{"class":264},[1504,47864,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":47866},[47867,47868],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":47676,"description":47684},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":47875,"title":47876,"body":47877,"category":33256,"componentType":25740,"description":47884,"extension":191,"meta":48145,"navigation":194,"path":48146,"requiresChild":194,"seo":48147,"stem":48148,"__hash__":48149},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":47878,"toc":48141},[47879,47882,47885,47887,47889,47892,47894,48139],[11,47880,47876],{"id":47881},"flowfield",[15,47883,47884],{},"Fluid-like distortion with constant smooth motion",[31771,47886],{"component":47876},[23,47888,31775],{"id":26391},[31777,47890],{":props":47891},"[{\"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,47893,31783],{"id":31782},[246,47895,47896,47941,47985,48029,48073],{":tabs":1557},[212,47897,47899],{"className":334,"code":47898,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,47900,47901,47909,47917,47925,47933],{"__ignoreMap":178},[220,47902,47903,47905,47907],{"class":222,"line":223},[220,47904,343],{"class":264},[220,47906,347],{"class":346},[220,47908,359],{"class":264},[220,47910,47911,47913,47915],{"class":222,"line":179},[220,47912,364],{"class":264},[220,47914,47876],{"class":346},[220,47916,359],{"class":264},[220,47918,47919,47921,47923],{"class":222,"line":389},[220,47920,2550],{"class":264},[220,47922,2553],{"class":346},[220,47924,386],{"class":264},[220,47926,47927,47929,47931],{"class":222,"line":399},[220,47928,2567],{"class":264},[220,47930,47876],{"class":346},[220,47932,359],{"class":264},[220,47934,47935,47937,47939],{"class":222,"line":644},[220,47936,402],{"class":264},[220,47938,347],{"class":346},[220,47940,359],{"class":264},[212,47942,47943],{"className":409,"code":47898,"language":411,"meta":178,"style":178},[99,47944,47945,47953,47961,47969,47977],{"__ignoreMap":178},[220,47946,47947,47949,47951],{"class":222,"line":223},[220,47948,343],{"class":264},[220,47950,347],{"class":420},[220,47952,359],{"class":264},[220,47954,47955,47957,47959],{"class":222,"line":179},[220,47956,364],{"class":264},[220,47958,47876],{"class":420},[220,47960,359],{"class":264},[220,47962,47963,47965,47967],{"class":222,"line":389},[220,47964,2550],{"class":264},[220,47966,2553],{"class":420},[220,47968,386],{"class":264},[220,47970,47971,47973,47975],{"class":222,"line":399},[220,47972,2567],{"class":264},[220,47974,47876],{"class":420},[220,47976,359],{"class":264},[220,47978,47979,47981,47983],{"class":222,"line":644},[220,47980,402],{"class":264},[220,47982,347],{"class":420},[220,47984,359],{"class":264},[212,47986,47987],{"className":2844,"code":47898,"language":2846,"meta":178,"style":178},[99,47988,47989,47997,48005,48013,48021],{"__ignoreMap":178},[220,47990,47991,47993,47995],{"class":222,"line":223},[220,47992,343],{"class":264},[220,47994,347],{"class":420},[220,47996,359],{"class":264},[220,47998,47999,48001,48003],{"class":222,"line":179},[220,48000,364],{"class":264},[220,48002,47876],{"class":420},[220,48004,359],{"class":264},[220,48006,48007,48009,48011],{"class":222,"line":389},[220,48008,2550],{"class":264},[220,48010,2553],{"class":420},[220,48012,386],{"class":264},[220,48014,48015,48017,48019],{"class":222,"line":399},[220,48016,2567],{"class":264},[220,48018,47876],{"class":420},[220,48020,359],{"class":264},[220,48022,48023,48025,48027],{"class":222,"line":644},[220,48024,402],{"class":264},[220,48026,347],{"class":420},[220,48028,359],{"class":264},[212,48030,48031],{"className":468,"code":47898,"language":469,"meta":178,"style":178},[99,48032,48033,48041,48049,48057,48065],{"__ignoreMap":178},[220,48034,48035,48037,48039],{"class":222,"line":223},[220,48036,343],{"class":264},[220,48038,347],{"class":420},[220,48040,359],{"class":264},[220,48042,48043,48045,48047],{"class":222,"line":179},[220,48044,364],{"class":264},[220,48046,47876],{"class":420},[220,48048,359],{"class":264},[220,48050,48051,48053,48055],{"class":222,"line":389},[220,48052,2550],{"class":264},[220,48054,2553],{"class":420},[220,48056,386],{"class":264},[220,48058,48059,48061,48063],{"class":222,"line":399},[220,48060,2567],{"class":264},[220,48062,47876],{"class":420},[220,48064,359],{"class":264},[220,48066,48067,48069,48071],{"class":222,"line":644},[220,48068,402],{"class":264},[220,48070,347],{"class":420},[220,48072,359],{"class":264},[212,48074,48076],{"className":251,"code":48075,"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,48077,48078,48088,48092,48106,48110,48119,48127,48131,48135],{"__ignoreMap":178},[220,48079,48080,48082,48084,48086],{"class":222,"line":223},[220,48081,261],{"class":260},[220,48083,11364],{"class":264},[220,48085,268],{"class":260},[220,48087,11369],{"class":230},[220,48089,48090],{"class":222,"line":179},[220,48091,647],{"emptyLinePlaceholder":194},[220,48093,48094,48096,48098,48100,48102,48104],{"class":222,"line":389},[220,48095,1735],{"class":260},[220,48097,1738],{"class":420},[220,48099,1741],{"class":260},[220,48101,1744],{"class":260},[220,48103,1747],{"class":226},[220,48105,1750],{"class":264},[220,48107,48108],{"class":222,"line":399},[220,48109,1765],{"class":264},[220,48111,48112,48114,48117],{"class":222,"line":644},[220,48113,1770],{"class":264},[220,48115,48116],{"class":230},"'FlowField'",[220,48118,6860],{"class":264},[220,48120,48121,48123,48125],{"class":222,"line":650},[220,48122,6865],{"class":264},[220,48124,6409],{"class":230},[220,48126,2465],{"class":264},[220,48128,48129],{"class":222,"line":656},[220,48130,6882],{"class":264},[220,48132,48133],{"class":222,"line":673},[220,48134,1787],{"class":264},[220,48136,48137],{"class":222,"line":682},[220,48138,1792],{"class":264},[1504,48140,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":48142},[48143,48144],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":47876,"description":47884},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":48151,"title":48152,"body":48153,"category":15765,"componentType":25734,"description":48160,"extension":191,"meta":48438,"navigation":194,"path":48439,"requiresChild":32390,"seo":48440,"stem":48441,"__hash__":48442},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":48154,"toc":48434},[48155,48158,48161,48163,48165,48168,48170,48432],[11,48156,48152],{"id":48157},"flower",[15,48159,48160],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31771,48162],{"component":48152},[23,48164,31775],{"id":26391},[31777,48166],{":props":48167},"[{\"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,48169,31783],{"id":31782},[246,48171,48172,48221,48272,48320,48370],{":tabs":1557},[212,48173,48175],{"className":334,"code":48174,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,48176,48177,48185,48192,48200,48209,48213],{"__ignoreMap":178},[220,48178,48179,48181,48183],{"class":222,"line":223},[220,48180,343],{"class":264},[220,48182,347],{"class":346},[220,48184,359],{"class":264},[220,48186,48187,48189],{"class":222,"line":179},[220,48188,364],{"class":264},[220,48190,48191],{"class":346},"Flower\n",[220,48193,48194,48196,48198],{"class":222,"line":389},[220,48195,9487],{"class":226},[220,48197,353],{"class":264},[220,48199,9443],{"class":230},[220,48201,48202,48204,48206],{"class":222,"line":399},[220,48203,17262],{"class":226},[220,48205,353],{"class":264},[220,48207,48208],{"class":230},"\"0.4\"\n",[220,48210,48211],{"class":222,"line":644},[220,48212,1234],{"class":264},[220,48214,48215,48217,48219],{"class":222,"line":650},[220,48216,402],{"class":264},[220,48218,347],{"class":346},[220,48220,359],{"class":264},[212,48222,48224],{"className":409,"code":48223,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,48225,48226,48234,48240,48248,48260,48264],{"__ignoreMap":178},[220,48227,48228,48230,48232],{"class":222,"line":223},[220,48229,343],{"class":264},[220,48231,347],{"class":420},[220,48233,359],{"class":264},[220,48235,48236,48238],{"class":222,"line":179},[220,48237,364],{"class":264},[220,48239,48191],{"class":420},[220,48241,48242,48244,48246],{"class":222,"line":389},[220,48243,9487],{"class":226},[220,48245,353],{"class":260},[220,48247,9443],{"class":230},[220,48249,48250,48252,48254,48256,48258],{"class":222,"line":399},[220,48251,9497],{"class":226},[220,48253,353],{"class":260},[220,48255,743],{"class":264},[220,48257,8100],{"class":420},[220,48259,749],{"class":264},[220,48261,48262],{"class":222,"line":644},[220,48263,1234],{"class":264},[220,48265,48266,48268,48270],{"class":222,"line":650},[220,48267,402],{"class":264},[220,48269,347],{"class":420},[220,48271,359],{"class":264},[212,48273,48274],{"className":2844,"code":48223,"language":2846,"meta":178,"style":178},[99,48275,48276,48284,48290,48298,48308,48312],{"__ignoreMap":178},[220,48277,48278,48280,48282],{"class":222,"line":223},[220,48279,343],{"class":264},[220,48281,347],{"class":420},[220,48283,359],{"class":264},[220,48285,48286,48288],{"class":222,"line":179},[220,48287,364],{"class":264},[220,48289,48191],{"class":420},[220,48291,48292,48294,48296],{"class":222,"line":389},[220,48293,9487],{"class":226},[220,48295,353],{"class":264},[220,48297,9443],{"class":230},[220,48299,48300,48302,48304,48306],{"class":222,"line":399},[220,48301,9497],{"class":226},[220,48303,29729],{"class":264},[220,48305,8100],{"class":420},[220,48307,749],{"class":264},[220,48309,48310],{"class":222,"line":644},[220,48311,1234],{"class":264},[220,48313,48314,48316,48318],{"class":222,"line":650},[220,48315,402],{"class":264},[220,48317,347],{"class":420},[220,48319,359],{"class":264},[212,48321,48322],{"className":468,"code":48223,"language":469,"meta":178,"style":178},[99,48323,48324,48332,48338,48346,48358,48362],{"__ignoreMap":178},[220,48325,48326,48328,48330],{"class":222,"line":223},[220,48327,343],{"class":264},[220,48329,347],{"class":420},[220,48331,359],{"class":264},[220,48333,48334,48336],{"class":222,"line":179},[220,48335,364],{"class":264},[220,48337,48191],{"class":420},[220,48339,48340,48342,48344],{"class":222,"line":389},[220,48341,9487],{"class":226},[220,48343,353],{"class":260},[220,48345,9443],{"class":230},[220,48347,48348,48350,48352,48354,48356],{"class":222,"line":399},[220,48349,9497],{"class":226},[220,48351,353],{"class":260},[220,48353,743],{"class":264},[220,48355,8100],{"class":420},[220,48357,749],{"class":264},[220,48359,48360],{"class":222,"line":644},[220,48361,1234],{"class":264},[220,48363,48364,48366,48368],{"class":222,"line":650},[220,48365,402],{"class":264},[220,48367,347],{"class":420},[220,48369,359],{"class":264},[212,48371,48373],{"className":251,"code":48372,"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,48374,48375,48385,48389,48403,48407,48424,48428],{"__ignoreMap":178},[220,48376,48377,48379,48381,48383],{"class":222,"line":223},[220,48378,261],{"class":260},[220,48380,11364],{"class":264},[220,48382,268],{"class":260},[220,48384,11369],{"class":230},[220,48386,48387],{"class":222,"line":179},[220,48388,647],{"emptyLinePlaceholder":194},[220,48390,48391,48393,48395,48397,48399,48401],{"class":222,"line":389},[220,48392,1735],{"class":260},[220,48394,1738],{"class":420},[220,48396,1741],{"class":260},[220,48398,1744],{"class":260},[220,48400,1747],{"class":226},[220,48402,1750],{"class":264},[220,48404,48405],{"class":222,"line":399},[220,48406,1765],{"class":264},[220,48408,48409,48411,48414,48416,48418,48420,48422],{"class":222,"line":644},[220,48410,1770],{"class":264},[220,48412,48413],{"class":230},"'Flower'",[220,48415,1776],{"class":264},[220,48417,10021],{"class":230},[220,48419,6417],{"class":264},[220,48421,8100],{"class":420},[220,48423,1782],{"class":264},[220,48425,48426],{"class":222,"line":650},[220,48427,1787],{"class":264},[220,48429,48430],{"class":222,"line":656},[220,48431,1792],{"class":264},[1504,48433,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48435},[48436,48437],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":48152,"description":48160},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":48444,"title":48445,"body":48446,"category":32923,"componentType":25734,"description":48453,"extension":191,"meta":48638,"navigation":194,"path":48639,"requiresChild":32390,"seo":48640,"stem":48641,"__hash__":48642},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":48447,"toc":48634},[48448,48451,48454,48456,48458,48461,48463,48632],[11,48449,48445],{"id":48450},"flowinggradient",[15,48452,48453],{},"Liquid silk gradient with organic flowing color bands",[31771,48455],{"component":48445},[23,48457,31775],{"id":26391},[31777,48459],{":props":48460},"[{\"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,48462,31783],{"id":31782},[246,48464,48465,48494,48522,48550,48578],{":tabs":1557},[212,48466,48468],{"className":334,"code":48467,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,48469,48470,48478,48486],{"__ignoreMap":178},[220,48471,48472,48474,48476],{"class":222,"line":223},[220,48473,343],{"class":264},[220,48475,347],{"class":346},[220,48477,359],{"class":264},[220,48479,48480,48482,48484],{"class":222,"line":179},[220,48481,364],{"class":264},[220,48483,48445],{"class":346},[220,48485,386],{"class":264},[220,48487,48488,48490,48492],{"class":222,"line":389},[220,48489,402],{"class":264},[220,48491,347],{"class":346},[220,48493,359],{"class":264},[212,48495,48496],{"className":409,"code":48467,"language":411,"meta":178,"style":178},[99,48497,48498,48506,48514],{"__ignoreMap":178},[220,48499,48500,48502,48504],{"class":222,"line":223},[220,48501,343],{"class":264},[220,48503,347],{"class":420},[220,48505,359],{"class":264},[220,48507,48508,48510,48512],{"class":222,"line":179},[220,48509,364],{"class":264},[220,48511,48445],{"class":420},[220,48513,386],{"class":264},[220,48515,48516,48518,48520],{"class":222,"line":389},[220,48517,402],{"class":264},[220,48519,347],{"class":420},[220,48521,359],{"class":264},[212,48523,48524],{"className":2844,"code":48467,"language":2846,"meta":178,"style":178},[99,48525,48526,48534,48542],{"__ignoreMap":178},[220,48527,48528,48530,48532],{"class":222,"line":223},[220,48529,343],{"class":264},[220,48531,347],{"class":420},[220,48533,359],{"class":264},[220,48535,48536,48538,48540],{"class":222,"line":179},[220,48537,364],{"class":264},[220,48539,48445],{"class":420},[220,48541,386],{"class":264},[220,48543,48544,48546,48548],{"class":222,"line":389},[220,48545,402],{"class":264},[220,48547,347],{"class":420},[220,48549,359],{"class":264},[212,48551,48552],{"className":468,"code":48467,"language":469,"meta":178,"style":178},[99,48553,48554,48562,48570],{"__ignoreMap":178},[220,48555,48556,48558,48560],{"class":222,"line":223},[220,48557,343],{"class":264},[220,48559,347],{"class":420},[220,48561,359],{"class":264},[220,48563,48564,48566,48568],{"class":222,"line":179},[220,48565,364],{"class":264},[220,48567,48445],{"class":420},[220,48569,386],{"class":264},[220,48571,48572,48574,48576],{"class":222,"line":389},[220,48573,402],{"class":264},[220,48575,347],{"class":420},[220,48577,359],{"class":264},[212,48579,48581],{"className":251,"code":48580,"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,48582,48583,48593,48597,48611,48615,48624,48628],{"__ignoreMap":178},[220,48584,48585,48587,48589,48591],{"class":222,"line":223},[220,48586,261],{"class":260},[220,48588,11364],{"class":264},[220,48590,268],{"class":260},[220,48592,11369],{"class":230},[220,48594,48595],{"class":222,"line":179},[220,48596,647],{"emptyLinePlaceholder":194},[220,48598,48599,48601,48603,48605,48607,48609],{"class":222,"line":389},[220,48600,1735],{"class":260},[220,48602,1738],{"class":420},[220,48604,1741],{"class":260},[220,48606,1744],{"class":260},[220,48608,1747],{"class":226},[220,48610,1750],{"class":264},[220,48612,48613],{"class":222,"line":399},[220,48614,1765],{"class":264},[220,48616,48617,48619,48622],{"class":222,"line":644},[220,48618,1770],{"class":264},[220,48620,48621],{"class":230},"'FlowingGradient'",[220,48623,2465],{"class":264},[220,48625,48626],{"class":222,"line":650},[220,48627,1787],{"class":264},[220,48629,48630],{"class":222,"line":656},[220,48631,1792],{"class":264},[1504,48633,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":48635},[48636,48637],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":48445,"description":48453},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":48644,"title":48645,"body":48646,"category":33256,"componentType":25740,"description":48653,"extension":191,"meta":48914,"navigation":194,"path":48915,"requiresChild":194,"seo":48916,"stem":48917,"__hash__":48918},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":48647,"toc":48910},[48648,48651,48654,48656,48658,48661,48663,48908],[11,48649,48645],{"id":48650},"flutedglass",[15,48652,48653],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31771,48655],{"component":48645},[23,48657,31775],{"id":26391},[31777,48659],{":props":48660},"[{\"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,48662,31783],{"id":31782},[246,48664,48665,48710,48754,48798,48842],{":tabs":1557},[212,48666,48668],{"className":334,"code":48667,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,48669,48670,48678,48686,48694,48702],{"__ignoreMap":178},[220,48671,48672,48674,48676],{"class":222,"line":223},[220,48673,343],{"class":264},[220,48675,347],{"class":346},[220,48677,359],{"class":264},[220,48679,48680,48682,48684],{"class":222,"line":179},[220,48681,364],{"class":264},[220,48683,48645],{"class":346},[220,48685,359],{"class":264},[220,48687,48688,48690,48692],{"class":222,"line":389},[220,48689,2550],{"class":264},[220,48691,2553],{"class":346},[220,48693,386],{"class":264},[220,48695,48696,48698,48700],{"class":222,"line":399},[220,48697,2567],{"class":264},[220,48699,48645],{"class":346},[220,48701,359],{"class":264},[220,48703,48704,48706,48708],{"class":222,"line":644},[220,48705,402],{"class":264},[220,48707,347],{"class":346},[220,48709,359],{"class":264},[212,48711,48712],{"className":409,"code":48667,"language":411,"meta":178,"style":178},[99,48713,48714,48722,48730,48738,48746],{"__ignoreMap":178},[220,48715,48716,48718,48720],{"class":222,"line":223},[220,48717,343],{"class":264},[220,48719,347],{"class":420},[220,48721,359],{"class":264},[220,48723,48724,48726,48728],{"class":222,"line":179},[220,48725,364],{"class":264},[220,48727,48645],{"class":420},[220,48729,359],{"class":264},[220,48731,48732,48734,48736],{"class":222,"line":389},[220,48733,2550],{"class":264},[220,48735,2553],{"class":420},[220,48737,386],{"class":264},[220,48739,48740,48742,48744],{"class":222,"line":399},[220,48741,2567],{"class":264},[220,48743,48645],{"class":420},[220,48745,359],{"class":264},[220,48747,48748,48750,48752],{"class":222,"line":644},[220,48749,402],{"class":264},[220,48751,347],{"class":420},[220,48753,359],{"class":264},[212,48755,48756],{"className":2844,"code":48667,"language":2846,"meta":178,"style":178},[99,48757,48758,48766,48774,48782,48790],{"__ignoreMap":178},[220,48759,48760,48762,48764],{"class":222,"line":223},[220,48761,343],{"class":264},[220,48763,347],{"class":420},[220,48765,359],{"class":264},[220,48767,48768,48770,48772],{"class":222,"line":179},[220,48769,364],{"class":264},[220,48771,48645],{"class":420},[220,48773,359],{"class":264},[220,48775,48776,48778,48780],{"class":222,"line":389},[220,48777,2550],{"class":264},[220,48779,2553],{"class":420},[220,48781,386],{"class":264},[220,48783,48784,48786,48788],{"class":222,"line":399},[220,48785,2567],{"class":264},[220,48787,48645],{"class":420},[220,48789,359],{"class":264},[220,48791,48792,48794,48796],{"class":222,"line":644},[220,48793,402],{"class":264},[220,48795,347],{"class":420},[220,48797,359],{"class":264},[212,48799,48800],{"className":468,"code":48667,"language":469,"meta":178,"style":178},[99,48801,48802,48810,48818,48826,48834],{"__ignoreMap":178},[220,48803,48804,48806,48808],{"class":222,"line":223},[220,48805,343],{"class":264},[220,48807,347],{"class":420},[220,48809,359],{"class":264},[220,48811,48812,48814,48816],{"class":222,"line":179},[220,48813,364],{"class":264},[220,48815,48645],{"class":420},[220,48817,359],{"class":264},[220,48819,48820,48822,48824],{"class":222,"line":389},[220,48821,2550],{"class":264},[220,48823,2553],{"class":420},[220,48825,386],{"class":264},[220,48827,48828,48830,48832],{"class":222,"line":399},[220,48829,2567],{"class":264},[220,48831,48645],{"class":420},[220,48833,359],{"class":264},[220,48835,48836,48838,48840],{"class":222,"line":644},[220,48837,402],{"class":264},[220,48839,347],{"class":420},[220,48841,359],{"class":264},[212,48843,48845],{"className":251,"code":48844,"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,48846,48847,48857,48861,48875,48879,48888,48896,48900,48904],{"__ignoreMap":178},[220,48848,48849,48851,48853,48855],{"class":222,"line":223},[220,48850,261],{"class":260},[220,48852,11364],{"class":264},[220,48854,268],{"class":260},[220,48856,11369],{"class":230},[220,48858,48859],{"class":222,"line":179},[220,48860,647],{"emptyLinePlaceholder":194},[220,48862,48863,48865,48867,48869,48871,48873],{"class":222,"line":389},[220,48864,1735],{"class":260},[220,48866,1738],{"class":420},[220,48868,1741],{"class":260},[220,48870,1744],{"class":260},[220,48872,1747],{"class":226},[220,48874,1750],{"class":264},[220,48876,48877],{"class":222,"line":399},[220,48878,1765],{"class":264},[220,48880,48881,48883,48886],{"class":222,"line":644},[220,48882,1770],{"class":264},[220,48884,48885],{"class":230},"'FlutedGlass'",[220,48887,6860],{"class":264},[220,48889,48890,48892,48894],{"class":222,"line":650},[220,48891,6865],{"class":264},[220,48893,6409],{"class":230},[220,48895,2465],{"class":264},[220,48897,48898],{"class":222,"line":656},[220,48899,6882],{"class":264},[220,48901,48902],{"class":222,"line":673},[220,48903,1787],{"class":264},[220,48905,48906],{"class":222,"line":682},[220,48907,1792],{"class":264},[1504,48909,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":48911},[48912,48913],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":48645,"description":48653},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":48920,"title":48921,"body":48922,"category":35419,"componentType":25734,"description":48929,"extension":191,"meta":49114,"navigation":194,"path":49115,"requiresChild":32390,"seo":49116,"stem":49117,"__hash__":49118},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":48923,"toc":49110},[48924,48927,48930,48932,48934,48937,48939,49108],[11,48925,48921],{"id":48926},"fog",[15,48928,48929],{},"Fog that fills the screen and interacts with the mouse",[31771,48931],{"component":48921},[23,48933,31775],{"id":26391},[31777,48935],{":props":48936},"[{\"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,48938,31783],{"id":31782},[246,48940,48941,48970,48998,49026,49054],{":tabs":1557},[212,48942,48944],{"className":334,"code":48943,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,48945,48946,48954,48962],{"__ignoreMap":178},[220,48947,48948,48950,48952],{"class":222,"line":223},[220,48949,343],{"class":264},[220,48951,347],{"class":346},[220,48953,359],{"class":264},[220,48955,48956,48958,48960],{"class":222,"line":179},[220,48957,364],{"class":264},[220,48959,48921],{"class":346},[220,48961,386],{"class":264},[220,48963,48964,48966,48968],{"class":222,"line":389},[220,48965,402],{"class":264},[220,48967,347],{"class":346},[220,48969,359],{"class":264},[212,48971,48972],{"className":409,"code":48943,"language":411,"meta":178,"style":178},[99,48973,48974,48982,48990],{"__ignoreMap":178},[220,48975,48976,48978,48980],{"class":222,"line":223},[220,48977,343],{"class":264},[220,48979,347],{"class":420},[220,48981,359],{"class":264},[220,48983,48984,48986,48988],{"class":222,"line":179},[220,48985,364],{"class":264},[220,48987,48921],{"class":420},[220,48989,386],{"class":264},[220,48991,48992,48994,48996],{"class":222,"line":389},[220,48993,402],{"class":264},[220,48995,347],{"class":420},[220,48997,359],{"class":264},[212,48999,49000],{"className":2844,"code":48943,"language":2846,"meta":178,"style":178},[99,49001,49002,49010,49018],{"__ignoreMap":178},[220,49003,49004,49006,49008],{"class":222,"line":223},[220,49005,343],{"class":264},[220,49007,347],{"class":420},[220,49009,359],{"class":264},[220,49011,49012,49014,49016],{"class":222,"line":179},[220,49013,364],{"class":264},[220,49015,48921],{"class":420},[220,49017,386],{"class":264},[220,49019,49020,49022,49024],{"class":222,"line":389},[220,49021,402],{"class":264},[220,49023,347],{"class":420},[220,49025,359],{"class":264},[212,49027,49028],{"className":468,"code":48943,"language":469,"meta":178,"style":178},[99,49029,49030,49038,49046],{"__ignoreMap":178},[220,49031,49032,49034,49036],{"class":222,"line":223},[220,49033,343],{"class":264},[220,49035,347],{"class":420},[220,49037,359],{"class":264},[220,49039,49040,49042,49044],{"class":222,"line":179},[220,49041,364],{"class":264},[220,49043,48921],{"class":420},[220,49045,386],{"class":264},[220,49047,49048,49050,49052],{"class":222,"line":389},[220,49049,402],{"class":264},[220,49051,347],{"class":420},[220,49053,359],{"class":264},[212,49055,49057],{"className":251,"code":49056,"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,49058,49059,49069,49073,49087,49091,49100,49104],{"__ignoreMap":178},[220,49060,49061,49063,49065,49067],{"class":222,"line":223},[220,49062,261],{"class":260},[220,49064,11364],{"class":264},[220,49066,268],{"class":260},[220,49068,11369],{"class":230},[220,49070,49071],{"class":222,"line":179},[220,49072,647],{"emptyLinePlaceholder":194},[220,49074,49075,49077,49079,49081,49083,49085],{"class":222,"line":389},[220,49076,1735],{"class":260},[220,49078,1738],{"class":420},[220,49080,1741],{"class":260},[220,49082,1744],{"class":260},[220,49084,1747],{"class":226},[220,49086,1750],{"class":264},[220,49088,49089],{"class":222,"line":399},[220,49090,1765],{"class":264},[220,49092,49093,49095,49098],{"class":222,"line":644},[220,49094,1770],{"class":264},[220,49096,49097],{"class":230},"'Fog'",[220,49099,2465],{"class":264},[220,49101,49102],{"class":222,"line":650},[220,49103,1787],{"class":264},[220,49105,49106],{"class":222,"line":656},[220,49107,1792],{"class":264},[1504,49109,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":49111},[49112,49113],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":48921,"description":48929},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":49120,"title":49121,"body":49122,"category":33256,"componentType":25740,"description":49129,"extension":191,"meta":49390,"navigation":194,"path":49391,"requiresChild":194,"seo":49392,"stem":49393,"__hash__":49394},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":49123,"toc":49386},[49124,49127,49130,49132,49134,49137,49139,49384],[11,49125,49121],{"id":49126},"form3d",[15,49128,49129],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31771,49131],{"component":49121},[23,49133,31775],{"id":26391},[31777,49135],{":props":49136},"[{\"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,49138,31783],{"id":31782},[246,49140,49141,49186,49230,49274,49318],{":tabs":1557},[212,49142,49144],{"className":334,"code":49143,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,49145,49146,49154,49162,49170,49178],{"__ignoreMap":178},[220,49147,49148,49150,49152],{"class":222,"line":223},[220,49149,343],{"class":264},[220,49151,347],{"class":346},[220,49153,359],{"class":264},[220,49155,49156,49158,49160],{"class":222,"line":179},[220,49157,364],{"class":264},[220,49159,49121],{"class":346},[220,49161,359],{"class":264},[220,49163,49164,49166,49168],{"class":222,"line":389},[220,49165,2550],{"class":264},[220,49167,2553],{"class":346},[220,49169,386],{"class":264},[220,49171,49172,49174,49176],{"class":222,"line":399},[220,49173,2567],{"class":264},[220,49175,49121],{"class":346},[220,49177,359],{"class":264},[220,49179,49180,49182,49184],{"class":222,"line":644},[220,49181,402],{"class":264},[220,49183,347],{"class":346},[220,49185,359],{"class":264},[212,49187,49188],{"className":409,"code":49143,"language":411,"meta":178,"style":178},[99,49189,49190,49198,49206,49214,49222],{"__ignoreMap":178},[220,49191,49192,49194,49196],{"class":222,"line":223},[220,49193,343],{"class":264},[220,49195,347],{"class":420},[220,49197,359],{"class":264},[220,49199,49200,49202,49204],{"class":222,"line":179},[220,49201,364],{"class":264},[220,49203,49121],{"class":420},[220,49205,359],{"class":264},[220,49207,49208,49210,49212],{"class":222,"line":389},[220,49209,2550],{"class":264},[220,49211,2553],{"class":420},[220,49213,386],{"class":264},[220,49215,49216,49218,49220],{"class":222,"line":399},[220,49217,2567],{"class":264},[220,49219,49121],{"class":420},[220,49221,359],{"class":264},[220,49223,49224,49226,49228],{"class":222,"line":644},[220,49225,402],{"class":264},[220,49227,347],{"class":420},[220,49229,359],{"class":264},[212,49231,49232],{"className":2844,"code":49143,"language":2846,"meta":178,"style":178},[99,49233,49234,49242,49250,49258,49266],{"__ignoreMap":178},[220,49235,49236,49238,49240],{"class":222,"line":223},[220,49237,343],{"class":264},[220,49239,347],{"class":420},[220,49241,359],{"class":264},[220,49243,49244,49246,49248],{"class":222,"line":179},[220,49245,364],{"class":264},[220,49247,49121],{"class":420},[220,49249,359],{"class":264},[220,49251,49252,49254,49256],{"class":222,"line":389},[220,49253,2550],{"class":264},[220,49255,2553],{"class":420},[220,49257,386],{"class":264},[220,49259,49260,49262,49264],{"class":222,"line":399},[220,49261,2567],{"class":264},[220,49263,49121],{"class":420},[220,49265,359],{"class":264},[220,49267,49268,49270,49272],{"class":222,"line":644},[220,49269,402],{"class":264},[220,49271,347],{"class":420},[220,49273,359],{"class":264},[212,49275,49276],{"className":468,"code":49143,"language":469,"meta":178,"style":178},[99,49277,49278,49286,49294,49302,49310],{"__ignoreMap":178},[220,49279,49280,49282,49284],{"class":222,"line":223},[220,49281,343],{"class":264},[220,49283,347],{"class":420},[220,49285,359],{"class":264},[220,49287,49288,49290,49292],{"class":222,"line":179},[220,49289,364],{"class":264},[220,49291,49121],{"class":420},[220,49293,359],{"class":264},[220,49295,49296,49298,49300],{"class":222,"line":389},[220,49297,2550],{"class":264},[220,49299,2553],{"class":420},[220,49301,386],{"class":264},[220,49303,49304,49306,49308],{"class":222,"line":399},[220,49305,2567],{"class":264},[220,49307,49121],{"class":420},[220,49309,359],{"class":264},[220,49311,49312,49314,49316],{"class":222,"line":644},[220,49313,402],{"class":264},[220,49315,347],{"class":420},[220,49317,359],{"class":264},[212,49319,49321],{"className":251,"code":49320,"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,49322,49323,49333,49337,49351,49355,49364,49372,49376,49380],{"__ignoreMap":178},[220,49324,49325,49327,49329,49331],{"class":222,"line":223},[220,49326,261],{"class":260},[220,49328,11364],{"class":264},[220,49330,268],{"class":260},[220,49332,11369],{"class":230},[220,49334,49335],{"class":222,"line":179},[220,49336,647],{"emptyLinePlaceholder":194},[220,49338,49339,49341,49343,49345,49347,49349],{"class":222,"line":389},[220,49340,1735],{"class":260},[220,49342,1738],{"class":420},[220,49344,1741],{"class":260},[220,49346,1744],{"class":260},[220,49348,1747],{"class":226},[220,49350,1750],{"class":264},[220,49352,49353],{"class":222,"line":399},[220,49354,1765],{"class":264},[220,49356,49357,49359,49362],{"class":222,"line":644},[220,49358,1770],{"class":264},[220,49360,49361],{"class":230},"'Form3D'",[220,49363,6860],{"class":264},[220,49365,49366,49368,49370],{"class":222,"line":650},[220,49367,6865],{"class":264},[220,49369,6409],{"class":230},[220,49371,2465],{"class":264},[220,49373,49374],{"class":222,"line":656},[220,49375,6882],{"class":264},[220,49377,49378],{"class":222,"line":673},[220,49379,1787],{"class":264},[220,49381,49382],{"class":222,"line":682},[220,49383,1792],{"class":264},[1504,49385,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":49387},[49388,49389],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":49121,"description":49129},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":49396,"title":49397,"body":49398,"category":32923,"componentType":25734,"description":49405,"extension":191,"meta":49590,"navigation":194,"path":49591,"requiresChild":32390,"seo":49592,"stem":49593,"__hash__":49594},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":49399,"toc":49586},[49400,49403,49406,49408,49410,49413,49415,49584],[11,49401,49397],{"id":49402},"fractalnoise",[15,49404,49405],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31771,49407],{"component":49397},[23,49409,31775],{"id":26391},[31777,49411],{":props":49412},"[{\"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,49414,31783],{"id":31782},[246,49416,49417,49446,49474,49502,49530],{":tabs":1557},[212,49418,49420],{"className":334,"code":49419,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,49421,49422,49430,49438],{"__ignoreMap":178},[220,49423,49424,49426,49428],{"class":222,"line":223},[220,49425,343],{"class":264},[220,49427,347],{"class":346},[220,49429,359],{"class":264},[220,49431,49432,49434,49436],{"class":222,"line":179},[220,49433,364],{"class":264},[220,49435,49397],{"class":346},[220,49437,386],{"class":264},[220,49439,49440,49442,49444],{"class":222,"line":389},[220,49441,402],{"class":264},[220,49443,347],{"class":346},[220,49445,359],{"class":264},[212,49447,49448],{"className":409,"code":49419,"language":411,"meta":178,"style":178},[99,49449,49450,49458,49466],{"__ignoreMap":178},[220,49451,49452,49454,49456],{"class":222,"line":223},[220,49453,343],{"class":264},[220,49455,347],{"class":420},[220,49457,359],{"class":264},[220,49459,49460,49462,49464],{"class":222,"line":179},[220,49461,364],{"class":264},[220,49463,49397],{"class":420},[220,49465,386],{"class":264},[220,49467,49468,49470,49472],{"class":222,"line":389},[220,49469,402],{"class":264},[220,49471,347],{"class":420},[220,49473,359],{"class":264},[212,49475,49476],{"className":2844,"code":49419,"language":2846,"meta":178,"style":178},[99,49477,49478,49486,49494],{"__ignoreMap":178},[220,49479,49480,49482,49484],{"class":222,"line":223},[220,49481,343],{"class":264},[220,49483,347],{"class":420},[220,49485,359],{"class":264},[220,49487,49488,49490,49492],{"class":222,"line":179},[220,49489,364],{"class":264},[220,49491,49397],{"class":420},[220,49493,386],{"class":264},[220,49495,49496,49498,49500],{"class":222,"line":389},[220,49497,402],{"class":264},[220,49499,347],{"class":420},[220,49501,359],{"class":264},[212,49503,49504],{"className":468,"code":49419,"language":469,"meta":178,"style":178},[99,49505,49506,49514,49522],{"__ignoreMap":178},[220,49507,49508,49510,49512],{"class":222,"line":223},[220,49509,343],{"class":264},[220,49511,347],{"class":420},[220,49513,359],{"class":264},[220,49515,49516,49518,49520],{"class":222,"line":179},[220,49517,364],{"class":264},[220,49519,49397],{"class":420},[220,49521,386],{"class":264},[220,49523,49524,49526,49528],{"class":222,"line":389},[220,49525,402],{"class":264},[220,49527,347],{"class":420},[220,49529,359],{"class":264},[212,49531,49533],{"className":251,"code":49532,"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,49534,49535,49545,49549,49563,49567,49576,49580],{"__ignoreMap":178},[220,49536,49537,49539,49541,49543],{"class":222,"line":223},[220,49538,261],{"class":260},[220,49540,11364],{"class":264},[220,49542,268],{"class":260},[220,49544,11369],{"class":230},[220,49546,49547],{"class":222,"line":179},[220,49548,647],{"emptyLinePlaceholder":194},[220,49550,49551,49553,49555,49557,49559,49561],{"class":222,"line":389},[220,49552,1735],{"class":260},[220,49554,1738],{"class":420},[220,49556,1741],{"class":260},[220,49558,1744],{"class":260},[220,49560,1747],{"class":226},[220,49562,1750],{"class":264},[220,49564,49565],{"class":222,"line":399},[220,49566,1765],{"class":264},[220,49568,49569,49571,49574],{"class":222,"line":644},[220,49570,1770],{"class":264},[220,49572,49573],{"class":230},"'FractalNoise'",[220,49575,2465],{"class":264},[220,49577,49578],{"class":222,"line":650},[220,49579,1787],{"class":264},[220,49581,49582],{"class":222,"line":656},[220,49583,1792],{"class":264},[1504,49585,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":49587},[49588,49589],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":49397,"description":49405},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":49596,"title":49597,"body":49598,"category":36429,"componentType":25734,"description":49605,"extension":191,"meta":49790,"navigation":194,"path":49791,"requiresChild":32390,"seo":49792,"stem":49793,"__hash__":49794},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":49599,"toc":49786},[49600,49603,49606,49608,49610,49613,49615,49784],[11,49601,49597],{"id":49602},"frost",[15,49604,49605],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31771,49607],{"component":49597},[23,49609,31775],{"id":26391},[31777,49611],{":props":49612},"[{\"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,49614,31783],{"id":31782},[246,49616,49617,49646,49674,49702,49730],{":tabs":1557},[212,49618,49620],{"className":334,"code":49619,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,49621,49622,49630,49638],{"__ignoreMap":178},[220,49623,49624,49626,49628],{"class":222,"line":223},[220,49625,343],{"class":264},[220,49627,347],{"class":346},[220,49629,359],{"class":264},[220,49631,49632,49634,49636],{"class":222,"line":179},[220,49633,364],{"class":264},[220,49635,49597],{"class":346},[220,49637,386],{"class":264},[220,49639,49640,49642,49644],{"class":222,"line":389},[220,49641,402],{"class":264},[220,49643,347],{"class":346},[220,49645,359],{"class":264},[212,49647,49648],{"className":409,"code":49619,"language":411,"meta":178,"style":178},[99,49649,49650,49658,49666],{"__ignoreMap":178},[220,49651,49652,49654,49656],{"class":222,"line":223},[220,49653,343],{"class":264},[220,49655,347],{"class":420},[220,49657,359],{"class":264},[220,49659,49660,49662,49664],{"class":222,"line":179},[220,49661,364],{"class":264},[220,49663,49597],{"class":420},[220,49665,386],{"class":264},[220,49667,49668,49670,49672],{"class":222,"line":389},[220,49669,402],{"class":264},[220,49671,347],{"class":420},[220,49673,359],{"class":264},[212,49675,49676],{"className":2844,"code":49619,"language":2846,"meta":178,"style":178},[99,49677,49678,49686,49694],{"__ignoreMap":178},[220,49679,49680,49682,49684],{"class":222,"line":223},[220,49681,343],{"class":264},[220,49683,347],{"class":420},[220,49685,359],{"class":264},[220,49687,49688,49690,49692],{"class":222,"line":179},[220,49689,364],{"class":264},[220,49691,49597],{"class":420},[220,49693,386],{"class":264},[220,49695,49696,49698,49700],{"class":222,"line":389},[220,49697,402],{"class":264},[220,49699,347],{"class":420},[220,49701,359],{"class":264},[212,49703,49704],{"className":468,"code":49619,"language":469,"meta":178,"style":178},[99,49705,49706,49714,49722],{"__ignoreMap":178},[220,49707,49708,49710,49712],{"class":222,"line":223},[220,49709,343],{"class":264},[220,49711,347],{"class":420},[220,49713,359],{"class":264},[220,49715,49716,49718,49720],{"class":222,"line":179},[220,49717,364],{"class":264},[220,49719,49597],{"class":420},[220,49721,386],{"class":264},[220,49723,49724,49726,49728],{"class":222,"line":389},[220,49725,402],{"class":264},[220,49727,347],{"class":420},[220,49729,359],{"class":264},[212,49731,49733],{"className":251,"code":49732,"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,49734,49735,49745,49749,49763,49767,49776,49780],{"__ignoreMap":178},[220,49736,49737,49739,49741,49743],{"class":222,"line":223},[220,49738,261],{"class":260},[220,49740,11364],{"class":264},[220,49742,268],{"class":260},[220,49744,11369],{"class":230},[220,49746,49747],{"class":222,"line":179},[220,49748,647],{"emptyLinePlaceholder":194},[220,49750,49751,49753,49755,49757,49759,49761],{"class":222,"line":389},[220,49752,1735],{"class":260},[220,49754,1738],{"class":420},[220,49756,1741],{"class":260},[220,49758,1744],{"class":260},[220,49760,1747],{"class":226},[220,49762,1750],{"class":264},[220,49764,49765],{"class":222,"line":399},[220,49766,1765],{"class":264},[220,49768,49769,49771,49774],{"class":222,"line":644},[220,49770,1770],{"class":264},[220,49772,49773],{"class":230},"'Frost'",[220,49775,2465],{"class":264},[220,49777,49778],{"class":222,"line":650},[220,49779,1787],{"class":264},[220,49781,49782],{"class":222,"line":656},[220,49783,1792],{"class":264},[1504,49785,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":49787},[49788,49789],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":49597,"description":49605},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49796,"title":49797,"body":49798,"category":32923,"componentType":25734,"description":49805,"extension":191,"meta":49990,"navigation":194,"path":49991,"requiresChild":32390,"seo":49992,"stem":49993,"__hash__":49994},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49799,"toc":49986},[49800,49803,49806,49808,49810,49813,49815,49984],[11,49801,49797],{"id":49802},"gabornoise",[15,49804,49805],{},"Oriented sine-grain noise with a fingerprint-like flow",[31771,49807],{"component":49797},[23,49809,31775],{"id":26391},[31777,49811],{":props":49812},"[{\"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,49814,31783],{"id":31782},[246,49816,49817,49846,49874,49902,49930],{":tabs":1557},[212,49818,49820],{"className":334,"code":49819,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,49821,49822,49830,49838],{"__ignoreMap":178},[220,49823,49824,49826,49828],{"class":222,"line":223},[220,49825,343],{"class":264},[220,49827,347],{"class":346},[220,49829,359],{"class":264},[220,49831,49832,49834,49836],{"class":222,"line":179},[220,49833,364],{"class":264},[220,49835,49797],{"class":346},[220,49837,386],{"class":264},[220,49839,49840,49842,49844],{"class":222,"line":389},[220,49841,402],{"class":264},[220,49843,347],{"class":346},[220,49845,359],{"class":264},[212,49847,49848],{"className":409,"code":49819,"language":411,"meta":178,"style":178},[99,49849,49850,49858,49866],{"__ignoreMap":178},[220,49851,49852,49854,49856],{"class":222,"line":223},[220,49853,343],{"class":264},[220,49855,347],{"class":420},[220,49857,359],{"class":264},[220,49859,49860,49862,49864],{"class":222,"line":179},[220,49861,364],{"class":264},[220,49863,49797],{"class":420},[220,49865,386],{"class":264},[220,49867,49868,49870,49872],{"class":222,"line":389},[220,49869,402],{"class":264},[220,49871,347],{"class":420},[220,49873,359],{"class":264},[212,49875,49876],{"className":2844,"code":49819,"language":2846,"meta":178,"style":178},[99,49877,49878,49886,49894],{"__ignoreMap":178},[220,49879,49880,49882,49884],{"class":222,"line":223},[220,49881,343],{"class":264},[220,49883,347],{"class":420},[220,49885,359],{"class":264},[220,49887,49888,49890,49892],{"class":222,"line":179},[220,49889,364],{"class":264},[220,49891,49797],{"class":420},[220,49893,386],{"class":264},[220,49895,49896,49898,49900],{"class":222,"line":389},[220,49897,402],{"class":264},[220,49899,347],{"class":420},[220,49901,359],{"class":264},[212,49903,49904],{"className":468,"code":49819,"language":469,"meta":178,"style":178},[99,49905,49906,49914,49922],{"__ignoreMap":178},[220,49907,49908,49910,49912],{"class":222,"line":223},[220,49909,343],{"class":264},[220,49911,347],{"class":420},[220,49913,359],{"class":264},[220,49915,49916,49918,49920],{"class":222,"line":179},[220,49917,364],{"class":264},[220,49919,49797],{"class":420},[220,49921,386],{"class":264},[220,49923,49924,49926,49928],{"class":222,"line":389},[220,49925,402],{"class":264},[220,49927,347],{"class":420},[220,49929,359],{"class":264},[212,49931,49933],{"className":251,"code":49932,"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,49934,49935,49945,49949,49963,49967,49976,49980],{"__ignoreMap":178},[220,49936,49937,49939,49941,49943],{"class":222,"line":223},[220,49938,261],{"class":260},[220,49940,11364],{"class":264},[220,49942,268],{"class":260},[220,49944,11369],{"class":230},[220,49946,49947],{"class":222,"line":179},[220,49948,647],{"emptyLinePlaceholder":194},[220,49950,49951,49953,49955,49957,49959,49961],{"class":222,"line":389},[220,49952,1735],{"class":260},[220,49954,1738],{"class":420},[220,49956,1741],{"class":260},[220,49958,1744],{"class":260},[220,49960,1747],{"class":226},[220,49962,1750],{"class":264},[220,49964,49965],{"class":222,"line":399},[220,49966,1765],{"class":264},[220,49968,49969,49971,49974],{"class":222,"line":644},[220,49970,1770],{"class":264},[220,49972,49973],{"class":230},"'GaborNoise'",[220,49975,2465],{"class":264},[220,49977,49978],{"class":222,"line":650},[220,49979,1787],{"class":264},[220,49981,49982],{"class":222,"line":656},[220,49983,1792],{"class":264},[1504,49985,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":49987},[49988,49989],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":49797,"description":49805},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":49996,"title":15323,"body":49997,"category":36429,"componentType":25740,"description":50004,"extension":191,"meta":50264,"navigation":194,"path":50265,"requiresChild":194,"seo":50266,"stem":50267,"__hash__":50268},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":49998,"toc":50260},[49999,50002,50005,50007,50009,50012,50014,50258],[11,50000,15323],{"id":50001},"glass",[15,50003,50004],{},"Optically realistic glass lens driven in a custom shape",[31771,50006],{"component":15323},[23,50008,31775],{"id":26391},[31777,50010],{":props":50011},"[{\"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,50013,31783],{"id":31782},[246,50015,50016,50061,50105,50149,50193],{":tabs":1557},[212,50017,50019],{"className":334,"code":50018,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,50020,50021,50029,50037,50045,50053],{"__ignoreMap":178},[220,50022,50023,50025,50027],{"class":222,"line":223},[220,50024,343],{"class":264},[220,50026,347],{"class":346},[220,50028,359],{"class":264},[220,50030,50031,50033,50035],{"class":222,"line":179},[220,50032,364],{"class":264},[220,50034,15323],{"class":346},[220,50036,359],{"class":264},[220,50038,50039,50041,50043],{"class":222,"line":389},[220,50040,2550],{"class":264},[220,50042,2553],{"class":346},[220,50044,386],{"class":264},[220,50046,50047,50049,50051],{"class":222,"line":399},[220,50048,2567],{"class":264},[220,50050,15323],{"class":346},[220,50052,359],{"class":264},[220,50054,50055,50057,50059],{"class":222,"line":644},[220,50056,402],{"class":264},[220,50058,347],{"class":346},[220,50060,359],{"class":264},[212,50062,50063],{"className":409,"code":50018,"language":411,"meta":178,"style":178},[99,50064,50065,50073,50081,50089,50097],{"__ignoreMap":178},[220,50066,50067,50069,50071],{"class":222,"line":223},[220,50068,343],{"class":264},[220,50070,347],{"class":420},[220,50072,359],{"class":264},[220,50074,50075,50077,50079],{"class":222,"line":179},[220,50076,364],{"class":264},[220,50078,15323],{"class":420},[220,50080,359],{"class":264},[220,50082,50083,50085,50087],{"class":222,"line":389},[220,50084,2550],{"class":264},[220,50086,2553],{"class":420},[220,50088,386],{"class":264},[220,50090,50091,50093,50095],{"class":222,"line":399},[220,50092,2567],{"class":264},[220,50094,15323],{"class":420},[220,50096,359],{"class":264},[220,50098,50099,50101,50103],{"class":222,"line":644},[220,50100,402],{"class":264},[220,50102,347],{"class":420},[220,50104,359],{"class":264},[212,50106,50107],{"className":2844,"code":50018,"language":2846,"meta":178,"style":178},[99,50108,50109,50117,50125,50133,50141],{"__ignoreMap":178},[220,50110,50111,50113,50115],{"class":222,"line":223},[220,50112,343],{"class":264},[220,50114,347],{"class":420},[220,50116,359],{"class":264},[220,50118,50119,50121,50123],{"class":222,"line":179},[220,50120,364],{"class":264},[220,50122,15323],{"class":420},[220,50124,359],{"class":264},[220,50126,50127,50129,50131],{"class":222,"line":389},[220,50128,2550],{"class":264},[220,50130,2553],{"class":420},[220,50132,386],{"class":264},[220,50134,50135,50137,50139],{"class":222,"line":399},[220,50136,2567],{"class":264},[220,50138,15323],{"class":420},[220,50140,359],{"class":264},[220,50142,50143,50145,50147],{"class":222,"line":644},[220,50144,402],{"class":264},[220,50146,347],{"class":420},[220,50148,359],{"class":264},[212,50150,50151],{"className":468,"code":50018,"language":469,"meta":178,"style":178},[99,50152,50153,50161,50169,50177,50185],{"__ignoreMap":178},[220,50154,50155,50157,50159],{"class":222,"line":223},[220,50156,343],{"class":264},[220,50158,347],{"class":420},[220,50160,359],{"class":264},[220,50162,50163,50165,50167],{"class":222,"line":179},[220,50164,364],{"class":264},[220,50166,15323],{"class":420},[220,50168,359],{"class":264},[220,50170,50171,50173,50175],{"class":222,"line":389},[220,50172,2550],{"class":264},[220,50174,2553],{"class":420},[220,50176,386],{"class":264},[220,50178,50179,50181,50183],{"class":222,"line":399},[220,50180,2567],{"class":264},[220,50182,15323],{"class":420},[220,50184,359],{"class":264},[220,50186,50187,50189,50191],{"class":222,"line":644},[220,50188,402],{"class":264},[220,50190,347],{"class":420},[220,50192,359],{"class":264},[212,50194,50196],{"className":251,"code":50195,"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,50197,50198,50208,50212,50226,50230,50238,50246,50250,50254],{"__ignoreMap":178},[220,50199,50200,50202,50204,50206],{"class":222,"line":223},[220,50201,261],{"class":260},[220,50203,11364],{"class":264},[220,50205,268],{"class":260},[220,50207,11369],{"class":230},[220,50209,50210],{"class":222,"line":179},[220,50211,647],{"emptyLinePlaceholder":194},[220,50213,50214,50216,50218,50220,50222,50224],{"class":222,"line":389},[220,50215,1735],{"class":260},[220,50217,1738],{"class":420},[220,50219,1741],{"class":260},[220,50221,1744],{"class":260},[220,50223,1747],{"class":226},[220,50225,1750],{"class":264},[220,50227,50228],{"class":222,"line":399},[220,50229,1765],{"class":264},[220,50231,50232,50234,50236],{"class":222,"line":644},[220,50233,1770],{"class":264},[220,50235,21390],{"class":230},[220,50237,6860],{"class":264},[220,50239,50240,50242,50244],{"class":222,"line":650},[220,50241,6865],{"class":264},[220,50243,6409],{"class":230},[220,50245,2465],{"class":264},[220,50247,50248],{"class":222,"line":656},[220,50249,6882],{"class":264},[220,50251,50252],{"class":222,"line":673},[220,50253,1787],{"class":264},[220,50255,50256],{"class":222,"line":682},[220,50257,1792],{"class":264},[1504,50259,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":50261},[50262,50263],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":15323,"description":50004},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":50270,"title":6074,"body":50271,"category":33256,"componentType":25740,"description":50278,"extension":191,"meta":50595,"navigation":194,"path":50596,"requiresChild":194,"seo":50597,"stem":50598,"__hash__":50599},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":50272,"toc":50591},[50273,50276,50279,50281,50283,50286,50288,50589],[11,50274,6074],{"id":50275},"glasstiles",[15,50277,50278],{},"Refraction-like distortion in a tile grid pattern",[31771,50280],{"component":6074},[23,50282,31775],{"id":26391},[31777,50284],{":props":50285},"[{\"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,50287,31783],{"id":31782},[246,50289,50290,50347,50406,50462,50520],{":tabs":1557},[212,50291,50293],{"className":334,"code":50292,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50294,50295,50303,50310,50319,50323,50331,50339],{"__ignoreMap":178},[220,50296,50297,50299,50301],{"class":222,"line":223},[220,50298,343],{"class":264},[220,50300,347],{"class":346},[220,50302,359],{"class":264},[220,50304,50305,50307],{"class":222,"line":179},[220,50306,364],{"class":264},[220,50308,50309],{"class":346},"GlassTiles\n",[220,50311,50312,50314,50316],{"class":222,"line":389},[220,50313,20228],{"class":226},[220,50315,353],{"class":264},[220,50317,50318],{"class":230},"\"2\"\n",[220,50320,50321],{"class":222,"line":399},[220,50322,31819],{"class":264},[220,50324,50325,50327,50329],{"class":222,"line":644},[220,50326,2550],{"class":264},[220,50328,2553],{"class":346},[220,50330,386],{"class":264},[220,50332,50333,50335,50337],{"class":222,"line":650},[220,50334,2567],{"class":264},[220,50336,6074],{"class":346},[220,50338,359],{"class":264},[220,50340,50341,50343,50345],{"class":222,"line":656},[220,50342,402],{"class":264},[220,50344,347],{"class":346},[220,50346,359],{"class":264},[212,50348,50350],{"className":409,"code":50349,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50351,50352,50360,50366,50378,50382,50390,50398],{"__ignoreMap":178},[220,50353,50354,50356,50358],{"class":222,"line":223},[220,50355,343],{"class":264},[220,50357,347],{"class":420},[220,50359,359],{"class":264},[220,50361,50362,50364],{"class":222,"line":179},[220,50363,364],{"class":264},[220,50365,50309],{"class":420},[220,50367,50368,50370,50372,50374,50376],{"class":222,"line":389},[220,50369,20339],{"class":226},[220,50371,353],{"class":260},[220,50373,743],{"class":264},[220,50375,7065],{"class":420},[220,50377,749],{"class":264},[220,50379,50380],{"class":222,"line":399},[220,50381,31819],{"class":264},[220,50383,50384,50386,50388],{"class":222,"line":644},[220,50385,2550],{"class":264},[220,50387,2553],{"class":420},[220,50389,386],{"class":264},[220,50391,50392,50394,50396],{"class":222,"line":650},[220,50393,2567],{"class":264},[220,50395,6074],{"class":420},[220,50397,359],{"class":264},[220,50399,50400,50402,50404],{"class":222,"line":656},[220,50401,402],{"class":264},[220,50403,347],{"class":420},[220,50405,359],{"class":264},[212,50407,50408],{"className":2844,"code":50349,"language":2846,"meta":178,"style":178},[99,50409,50410,50418,50424,50434,50438,50446,50454],{"__ignoreMap":178},[220,50411,50412,50414,50416],{"class":222,"line":223},[220,50413,343],{"class":264},[220,50415,347],{"class":420},[220,50417,359],{"class":264},[220,50419,50420,50422],{"class":222,"line":179},[220,50421,364],{"class":264},[220,50423,50309],{"class":420},[220,50425,50426,50428,50430,50432],{"class":222,"line":389},[220,50427,20339],{"class":226},[220,50429,29729],{"class":264},[220,50431,7065],{"class":420},[220,50433,749],{"class":264},[220,50435,50436],{"class":222,"line":399},[220,50437,31819],{"class":264},[220,50439,50440,50442,50444],{"class":222,"line":644},[220,50441,2550],{"class":264},[220,50443,2553],{"class":420},[220,50445,386],{"class":264},[220,50447,50448,50450,50452],{"class":222,"line":650},[220,50449,2567],{"class":264},[220,50451,6074],{"class":420},[220,50453,359],{"class":264},[220,50455,50456,50458,50460],{"class":222,"line":656},[220,50457,402],{"class":264},[220,50459,347],{"class":420},[220,50461,359],{"class":264},[212,50463,50464],{"className":468,"code":50349,"language":469,"meta":178,"style":178},[99,50465,50466,50474,50480,50492,50496,50504,50512],{"__ignoreMap":178},[220,50467,50468,50470,50472],{"class":222,"line":223},[220,50469,343],{"class":264},[220,50471,347],{"class":420},[220,50473,359],{"class":264},[220,50475,50476,50478],{"class":222,"line":179},[220,50477,364],{"class":264},[220,50479,50309],{"class":420},[220,50481,50482,50484,50486,50488,50490],{"class":222,"line":389},[220,50483,20339],{"class":226},[220,50485,353],{"class":260},[220,50487,743],{"class":264},[220,50489,7065],{"class":420},[220,50491,749],{"class":264},[220,50493,50494],{"class":222,"line":399},[220,50495,31819],{"class":264},[220,50497,50498,50500,50502],{"class":222,"line":644},[220,50499,2550],{"class":264},[220,50501,2553],{"class":420},[220,50503,386],{"class":264},[220,50505,50506,50508,50510],{"class":222,"line":650},[220,50507,2567],{"class":264},[220,50509,6074],{"class":420},[220,50511,359],{"class":264},[220,50513,50514,50516,50518],{"class":222,"line":656},[220,50515,402],{"class":264},[220,50517,347],{"class":420},[220,50519,359],{"class":264},[212,50521,50523],{"className":251,"code":50522,"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,50524,50525,50535,50539,50553,50557,50569,50577,50581,50585],{"__ignoreMap":178},[220,50526,50527,50529,50531,50533],{"class":222,"line":223},[220,50528,261],{"class":260},[220,50530,11364],{"class":264},[220,50532,268],{"class":260},[220,50534,11369],{"class":230},[220,50536,50537],{"class":222,"line":179},[220,50538,647],{"emptyLinePlaceholder":194},[220,50540,50541,50543,50545,50547,50549,50551],{"class":222,"line":389},[220,50542,1735],{"class":260},[220,50544,1738],{"class":420},[220,50546,1741],{"class":260},[220,50548,1744],{"class":260},[220,50550,1747],{"class":226},[220,50552,1750],{"class":264},[220,50554,50555],{"class":222,"line":399},[220,50556,1765],{"class":264},[220,50558,50559,50561,50563,50565,50567],{"class":222,"line":644},[220,50560,1770],{"class":264},[220,50562,6434],{"class":230},[220,50564,32063],{"class":264},[220,50566,7065],{"class":420},[220,50568,7397],{"class":264},[220,50570,50571,50573,50575],{"class":222,"line":650},[220,50572,6865],{"class":264},[220,50574,6409],{"class":230},[220,50576,2465],{"class":264},[220,50578,50579],{"class":222,"line":656},[220,50580,6882],{"class":264},[220,50582,50583],{"class":222,"line":673},[220,50584,1787],{"class":264},[220,50586,50587],{"class":222,"line":682},[220,50588,1792],{"class":264},[1504,50590,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50592},[50593,50594],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":6074,"description":50278},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":50601,"title":50602,"body":50603,"category":32666,"componentType":25740,"description":50610,"extension":191,"meta":50927,"navigation":194,"path":50928,"requiresChild":194,"seo":50929,"stem":50930,"__hash__":50931},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":50604,"toc":50923},[50605,50608,50611,50613,50615,50618,50620,50921],[11,50606,50602],{"id":50607},"glitch",[15,50609,50610],{},"Digital glitch that melts pixels and distorts colors",[31771,50612],{"component":50602},[23,50614,31775],{"id":26391},[31777,50616],{":props":50617},"[{\"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,50619,31783],{"id":31782},[246,50621,50622,50678,50737,50793,50851],{":tabs":1557},[212,50623,50625],{"className":334,"code":50624,"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,50626,50627,50635,50642,50650,50654,50662,50670],{"__ignoreMap":178},[220,50628,50629,50631,50633],{"class":222,"line":223},[220,50630,343],{"class":264},[220,50632,347],{"class":346},[220,50634,359],{"class":264},[220,50636,50637,50639],{"class":222,"line":179},[220,50638,364],{"class":264},[220,50640,50641],{"class":346},"Glitch\n",[220,50643,50644,50646,50648],{"class":222,"line":389},[220,50645,20228],{"class":226},[220,50647,353],{"class":264},[220,50649,42218],{"class":230},[220,50651,50652],{"class":222,"line":399},[220,50653,31819],{"class":264},[220,50655,50656,50658,50660],{"class":222,"line":644},[220,50657,2550],{"class":264},[220,50659,2553],{"class":346},[220,50661,386],{"class":264},[220,50663,50664,50666,50668],{"class":222,"line":650},[220,50665,2567],{"class":264},[220,50667,50602],{"class":346},[220,50669,359],{"class":264},[220,50671,50672,50674,50676],{"class":222,"line":656},[220,50673,402],{"class":264},[220,50675,347],{"class":346},[220,50677,359],{"class":264},[212,50679,50681],{"className":409,"code":50680,"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,50682,50683,50691,50697,50709,50713,50721,50729],{"__ignoreMap":178},[220,50684,50685,50687,50689],{"class":222,"line":223},[220,50686,343],{"class":264},[220,50688,347],{"class":420},[220,50690,359],{"class":264},[220,50692,50693,50695],{"class":222,"line":179},[220,50694,364],{"class":264},[220,50696,50641],{"class":420},[220,50698,50699,50701,50703,50705,50707],{"class":222,"line":389},[220,50700,20339],{"class":226},[220,50702,353],{"class":260},[220,50704,743],{"class":264},[220,50706,7605],{"class":420},[220,50708,749],{"class":264},[220,50710,50711],{"class":222,"line":399},[220,50712,31819],{"class":264},[220,50714,50715,50717,50719],{"class":222,"line":644},[220,50716,2550],{"class":264},[220,50718,2553],{"class":420},[220,50720,386],{"class":264},[220,50722,50723,50725,50727],{"class":222,"line":650},[220,50724,2567],{"class":264},[220,50726,50602],{"class":420},[220,50728,359],{"class":264},[220,50730,50731,50733,50735],{"class":222,"line":656},[220,50732,402],{"class":264},[220,50734,347],{"class":420},[220,50736,359],{"class":264},[212,50738,50739],{"className":2844,"code":50680,"language":2846,"meta":178,"style":178},[99,50740,50741,50749,50755,50765,50769,50777,50785],{"__ignoreMap":178},[220,50742,50743,50745,50747],{"class":222,"line":223},[220,50744,343],{"class":264},[220,50746,347],{"class":420},[220,50748,359],{"class":264},[220,50750,50751,50753],{"class":222,"line":179},[220,50752,364],{"class":264},[220,50754,50641],{"class":420},[220,50756,50757,50759,50761,50763],{"class":222,"line":389},[220,50758,20339],{"class":226},[220,50760,29729],{"class":264},[220,50762,7605],{"class":420},[220,50764,749],{"class":264},[220,50766,50767],{"class":222,"line":399},[220,50768,31819],{"class":264},[220,50770,50771,50773,50775],{"class":222,"line":644},[220,50772,2550],{"class":264},[220,50774,2553],{"class":420},[220,50776,386],{"class":264},[220,50778,50779,50781,50783],{"class":222,"line":650},[220,50780,2567],{"class":264},[220,50782,50602],{"class":420},[220,50784,359],{"class":264},[220,50786,50787,50789,50791],{"class":222,"line":656},[220,50788,402],{"class":264},[220,50790,347],{"class":420},[220,50792,359],{"class":264},[212,50794,50795],{"className":468,"code":50680,"language":469,"meta":178,"style":178},[99,50796,50797,50805,50811,50823,50827,50835,50843],{"__ignoreMap":178},[220,50798,50799,50801,50803],{"class":222,"line":223},[220,50800,343],{"class":264},[220,50802,347],{"class":420},[220,50804,359],{"class":264},[220,50806,50807,50809],{"class":222,"line":179},[220,50808,364],{"class":264},[220,50810,50641],{"class":420},[220,50812,50813,50815,50817,50819,50821],{"class":222,"line":389},[220,50814,20339],{"class":226},[220,50816,353],{"class":260},[220,50818,743],{"class":264},[220,50820,7605],{"class":420},[220,50822,749],{"class":264},[220,50824,50825],{"class":222,"line":399},[220,50826,31819],{"class":264},[220,50828,50829,50831,50833],{"class":222,"line":644},[220,50830,2550],{"class":264},[220,50832,2553],{"class":420},[220,50834,386],{"class":264},[220,50836,50837,50839,50841],{"class":222,"line":650},[220,50838,2567],{"class":264},[220,50840,50602],{"class":420},[220,50842,359],{"class":264},[220,50844,50845,50847,50849],{"class":222,"line":656},[220,50846,402],{"class":264},[220,50848,347],{"class":420},[220,50850,359],{"class":264},[212,50852,50854],{"className":251,"code":50853,"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,50855,50856,50866,50870,50884,50888,50901,50909,50913,50917],{"__ignoreMap":178},[220,50857,50858,50860,50862,50864],{"class":222,"line":223},[220,50859,261],{"class":260},[220,50861,11364],{"class":264},[220,50863,268],{"class":260},[220,50865,11369],{"class":230},[220,50867,50868],{"class":222,"line":179},[220,50869,647],{"emptyLinePlaceholder":194},[220,50871,50872,50874,50876,50878,50880,50882],{"class":222,"line":389},[220,50873,1735],{"class":260},[220,50875,1738],{"class":420},[220,50877,1741],{"class":260},[220,50879,1744],{"class":260},[220,50881,1747],{"class":226},[220,50883,1750],{"class":264},[220,50885,50886],{"class":222,"line":399},[220,50887,1765],{"class":264},[220,50889,50890,50892,50895,50897,50899],{"class":222,"line":644},[220,50891,1770],{"class":264},[220,50893,50894],{"class":230},"'Glitch'",[220,50896,32063],{"class":264},[220,50898,7605],{"class":420},[220,50900,7397],{"class":264},[220,50902,50903,50905,50907],{"class":222,"line":650},[220,50904,6865],{"class":264},[220,50906,6409],{"class":230},[220,50908,2465],{"class":264},[220,50910,50911],{"class":222,"line":656},[220,50912,6882],{"class":264},[220,50914,50915],{"class":222,"line":673},[220,50916,1787],{"class":264},[220,50918,50919],{"class":222,"line":682},[220,50920,1792],{"class":264},[1504,50922,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50924},[50925,50926],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":50602,"description":50610},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":50933,"title":11645,"body":50934,"category":32666,"componentType":25740,"description":50941,"extension":191,"meta":51258,"navigation":194,"path":51259,"requiresChild":194,"seo":51260,"stem":51261,"__hash__":51262},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":50935,"toc":51254},[50936,50939,50942,50944,50946,50949,50951,51252],[11,50937,11645],{"id":50938},"glow",[15,50940,50941],{},"Soft glow effect with adjustable intensity",[31771,50943],{"component":11645},[23,50945,31775],{"id":26391},[31777,50947],{":props":50948},"[{\"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,50950,31783],{"id":31782},[246,50952,50953,51009,51068,51124,51182],{":tabs":1557},[212,50954,50956],{"className":334,"code":50955,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50957,50958,50966,50973,50981,50985,50993,51001],{"__ignoreMap":178},[220,50959,50960,50962,50964],{"class":222,"line":223},[220,50961,343],{"class":264},[220,50963,347],{"class":346},[220,50965,359],{"class":264},[220,50967,50968,50970],{"class":222,"line":179},[220,50969,364],{"class":264},[220,50971,50972],{"class":346},"Glow\n",[220,50974,50975,50977,50979],{"class":222,"line":389},[220,50976,20228],{"class":226},[220,50978,353],{"class":264},[220,50980,36485],{"class":230},[220,50982,50983],{"class":222,"line":399},[220,50984,31819],{"class":264},[220,50986,50987,50989,50991],{"class":222,"line":644},[220,50988,2550],{"class":264},[220,50990,2553],{"class":346},[220,50992,386],{"class":264},[220,50994,50995,50997,50999],{"class":222,"line":650},[220,50996,2567],{"class":264},[220,50998,11645],{"class":346},[220,51000,359],{"class":264},[220,51002,51003,51005,51007],{"class":222,"line":656},[220,51004,402],{"class":264},[220,51006,347],{"class":346},[220,51008,359],{"class":264},[212,51010,51012],{"className":409,"code":51011,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,51013,51014,51022,51028,51040,51044,51052,51060],{"__ignoreMap":178},[220,51015,51016,51018,51020],{"class":222,"line":223},[220,51017,343],{"class":264},[220,51019,347],{"class":420},[220,51021,359],{"class":264},[220,51023,51024,51026],{"class":222,"line":179},[220,51025,364],{"class":264},[220,51027,50972],{"class":420},[220,51029,51030,51032,51034,51036,51038],{"class":222,"line":389},[220,51031,20339],{"class":226},[220,51033,353],{"class":260},[220,51035,743],{"class":264},[220,51037,8528],{"class":420},[220,51039,749],{"class":264},[220,51041,51042],{"class":222,"line":399},[220,51043,31819],{"class":264},[220,51045,51046,51048,51050],{"class":222,"line":644},[220,51047,2550],{"class":264},[220,51049,2553],{"class":420},[220,51051,386],{"class":264},[220,51053,51054,51056,51058],{"class":222,"line":650},[220,51055,2567],{"class":264},[220,51057,11645],{"class":420},[220,51059,359],{"class":264},[220,51061,51062,51064,51066],{"class":222,"line":656},[220,51063,402],{"class":264},[220,51065,347],{"class":420},[220,51067,359],{"class":264},[212,51069,51070],{"className":2844,"code":51011,"language":2846,"meta":178,"style":178},[99,51071,51072,51080,51086,51096,51100,51108,51116],{"__ignoreMap":178},[220,51073,51074,51076,51078],{"class":222,"line":223},[220,51075,343],{"class":264},[220,51077,347],{"class":420},[220,51079,359],{"class":264},[220,51081,51082,51084],{"class":222,"line":179},[220,51083,364],{"class":264},[220,51085,50972],{"class":420},[220,51087,51088,51090,51092,51094],{"class":222,"line":389},[220,51089,20339],{"class":226},[220,51091,29729],{"class":264},[220,51093,8528],{"class":420},[220,51095,749],{"class":264},[220,51097,51098],{"class":222,"line":399},[220,51099,31819],{"class":264},[220,51101,51102,51104,51106],{"class":222,"line":644},[220,51103,2550],{"class":264},[220,51105,2553],{"class":420},[220,51107,386],{"class":264},[220,51109,51110,51112,51114],{"class":222,"line":650},[220,51111,2567],{"class":264},[220,51113,11645],{"class":420},[220,51115,359],{"class":264},[220,51117,51118,51120,51122],{"class":222,"line":656},[220,51119,402],{"class":264},[220,51121,347],{"class":420},[220,51123,359],{"class":264},[212,51125,51126],{"className":468,"code":51011,"language":469,"meta":178,"style":178},[99,51127,51128,51136,51142,51154,51158,51166,51174],{"__ignoreMap":178},[220,51129,51130,51132,51134],{"class":222,"line":223},[220,51131,343],{"class":264},[220,51133,347],{"class":420},[220,51135,359],{"class":264},[220,51137,51138,51140],{"class":222,"line":179},[220,51139,364],{"class":264},[220,51141,50972],{"class":420},[220,51143,51144,51146,51148,51150,51152],{"class":222,"line":389},[220,51145,20339],{"class":226},[220,51147,353],{"class":260},[220,51149,743],{"class":264},[220,51151,8528],{"class":420},[220,51153,749],{"class":264},[220,51155,51156],{"class":222,"line":399},[220,51157,31819],{"class":264},[220,51159,51160,51162,51164],{"class":222,"line":644},[220,51161,2550],{"class":264},[220,51163,2553],{"class":420},[220,51165,386],{"class":264},[220,51167,51168,51170,51172],{"class":222,"line":650},[220,51169,2567],{"class":264},[220,51171,11645],{"class":420},[220,51173,359],{"class":264},[220,51175,51176,51178,51180],{"class":222,"line":656},[220,51177,402],{"class":264},[220,51179,347],{"class":420},[220,51181,359],{"class":264},[212,51183,51185],{"className":251,"code":51184,"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,51186,51187,51197,51201,51215,51219,51232,51240,51244,51248],{"__ignoreMap":178},[220,51188,51189,51191,51193,51195],{"class":222,"line":223},[220,51190,261],{"class":260},[220,51192,11364],{"class":264},[220,51194,268],{"class":260},[220,51196,11369],{"class":230},[220,51198,51199],{"class":222,"line":179},[220,51200,647],{"emptyLinePlaceholder":194},[220,51202,51203,51205,51207,51209,51211,51213],{"class":222,"line":389},[220,51204,1735],{"class":260},[220,51206,1738],{"class":420},[220,51208,1741],{"class":260},[220,51210,1744],{"class":260},[220,51212,1747],{"class":226},[220,51214,1750],{"class":264},[220,51216,51217],{"class":222,"line":399},[220,51218,1765],{"class":264},[220,51220,51221,51223,51226,51228,51230],{"class":222,"line":644},[220,51222,1770],{"class":264},[220,51224,51225],{"class":230},"'Glow'",[220,51227,32063],{"class":264},[220,51229,8528],{"class":420},[220,51231,7397],{"class":264},[220,51233,51234,51236,51238],{"class":222,"line":650},[220,51235,6865],{"class":264},[220,51237,6409],{"class":230},[220,51239,2465],{"class":264},[220,51241,51242],{"class":222,"line":656},[220,51243,6882],{"class":264},[220,51245,51246],{"class":222,"line":673},[220,51247,1787],{"class":264},[220,51249,51250],{"class":222,"line":682},[220,51251,1792],{"class":264},[1504,51253,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51255},[51256,51257],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11645,"description":50941},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":51264,"title":51265,"body":51266,"category":32923,"componentType":25734,"description":51273,"extension":191,"meta":51514,"navigation":194,"path":51515,"requiresChild":32390,"seo":51516,"stem":51517,"__hash__":51518},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":51267,"toc":51510},[51268,51271,51274,51276,51278,51281,51283,51508],[11,51269,51265],{"id":51270},"godrays",[15,51272,51273],{},"Volumetric light rays emanating from a point",[31771,51275],{"component":51265},[23,51277,31775],{"id":26391},[31777,51279],{":props":51280},"[{\"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,51282,31783],{"id":31782},[246,51284,51285,51325,51368,51408,51450],{":tabs":1557},[212,51286,51288],{"className":334,"code":51287,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,51289,51290,51298,51305,51313,51317],{"__ignoreMap":178},[220,51291,51292,51294,51296],{"class":222,"line":223},[220,51293,343],{"class":264},[220,51295,347],{"class":346},[220,51297,359],{"class":264},[220,51299,51300,51302],{"class":222,"line":179},[220,51301,364],{"class":264},[220,51303,51304],{"class":346},"Godrays\n",[220,51306,51307,51309,51311],{"class":222,"line":389},[220,51308,20228],{"class":226},[220,51310,353],{"class":264},[220,51312,9502],{"class":230},[220,51314,51315],{"class":222,"line":399},[220,51316,1234],{"class":264},[220,51318,51319,51321,51323],{"class":222,"line":644},[220,51320,402],{"class":264},[220,51322,347],{"class":346},[220,51324,359],{"class":264},[212,51326,51328],{"className":409,"code":51327,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,51329,51330,51338,51344,51356,51360],{"__ignoreMap":178},[220,51331,51332,51334,51336],{"class":222,"line":223},[220,51333,343],{"class":264},[220,51335,347],{"class":420},[220,51337,359],{"class":264},[220,51339,51340,51342],{"class":222,"line":179},[220,51341,364],{"class":264},[220,51343,51304],{"class":420},[220,51345,51346,51348,51350,51352,51354],{"class":222,"line":389},[220,51347,20339],{"class":226},[220,51349,353],{"class":260},[220,51351,743],{"class":264},[220,51353,6148],{"class":420},[220,51355,749],{"class":264},[220,51357,51358],{"class":222,"line":399},[220,51359,1234],{"class":264},[220,51361,51362,51364,51366],{"class":222,"line":644},[220,51363,402],{"class":264},[220,51365,347],{"class":420},[220,51367,359],{"class":264},[212,51369,51370],{"className":2844,"code":51327,"language":2846,"meta":178,"style":178},[99,51371,51372,51380,51386,51396,51400],{"__ignoreMap":178},[220,51373,51374,51376,51378],{"class":222,"line":223},[220,51375,343],{"class":264},[220,51377,347],{"class":420},[220,51379,359],{"class":264},[220,51381,51382,51384],{"class":222,"line":179},[220,51383,364],{"class":264},[220,51385,51304],{"class":420},[220,51387,51388,51390,51392,51394],{"class":222,"line":389},[220,51389,20339],{"class":226},[220,51391,29729],{"class":264},[220,51393,6148],{"class":420},[220,51395,749],{"class":264},[220,51397,51398],{"class":222,"line":399},[220,51399,1234],{"class":264},[220,51401,51402,51404,51406],{"class":222,"line":644},[220,51403,402],{"class":264},[220,51405,347],{"class":420},[220,51407,359],{"class":264},[212,51409,51410],{"className":468,"code":51327,"language":469,"meta":178,"style":178},[99,51411,51412,51420,51426,51438,51442],{"__ignoreMap":178},[220,51413,51414,51416,51418],{"class":222,"line":223},[220,51415,343],{"class":264},[220,51417,347],{"class":420},[220,51419,359],{"class":264},[220,51421,51422,51424],{"class":222,"line":179},[220,51423,364],{"class":264},[220,51425,51304],{"class":420},[220,51427,51428,51430,51432,51434,51436],{"class":222,"line":389},[220,51429,20339],{"class":226},[220,51431,353],{"class":260},[220,51433,743],{"class":264},[220,51435,6148],{"class":420},[220,51437,749],{"class":264},[220,51439,51440],{"class":222,"line":399},[220,51441,1234],{"class":264},[220,51443,51444,51446,51448],{"class":222,"line":644},[220,51445,402],{"class":264},[220,51447,347],{"class":420},[220,51449,359],{"class":264},[212,51451,51453],{"className":251,"code":51452,"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,51454,51455,51465,51469,51483,51487,51500,51504],{"__ignoreMap":178},[220,51456,51457,51459,51461,51463],{"class":222,"line":223},[220,51458,261],{"class":260},[220,51460,11364],{"class":264},[220,51462,268],{"class":260},[220,51464,11369],{"class":230},[220,51466,51467],{"class":222,"line":179},[220,51468,647],{"emptyLinePlaceholder":194},[220,51470,51471,51473,51475,51477,51479,51481],{"class":222,"line":389},[220,51472,1735],{"class":260},[220,51474,1738],{"class":420},[220,51476,1741],{"class":260},[220,51478,1744],{"class":260},[220,51480,1747],{"class":226},[220,51482,1750],{"class":264},[220,51484,51485],{"class":222,"line":399},[220,51486,1765],{"class":264},[220,51488,51489,51491,51494,51496,51498],{"class":222,"line":644},[220,51490,1770],{"class":264},[220,51492,51493],{"class":230},"'Godrays'",[220,51495,32063],{"class":264},[220,51497,6148],{"class":420},[220,51499,1782],{"class":264},[220,51501,51502],{"class":222,"line":650},[220,51503,1787],{"class":264},[220,51505,51506],{"class":222,"line":656},[220,51507,1792],{"class":264},[1504,51509,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51511},[51512,51513],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":51265,"description":51273},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":51520,"title":51521,"body":51522,"category":36429,"componentType":25734,"description":51529,"extension":191,"meta":51714,"navigation":194,"path":51715,"requiresChild":32390,"seo":51716,"stem":51717,"__hash__":51718},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":51523,"toc":51710},[51524,51527,51530,51532,51534,51537,51539,51708],[11,51525,51521],{"id":51526},"goo",[15,51528,51529],{},"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",[31771,51531],{"component":51521},[23,51533,31775],{"id":26391},[31777,51535],{":props":51536},"[{\"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,51538,31783],{"id":31782},[246,51540,51541,51570,51598,51626,51654],{":tabs":1557},[212,51542,51544],{"className":334,"code":51543,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,51545,51546,51554,51562],{"__ignoreMap":178},[220,51547,51548,51550,51552],{"class":222,"line":223},[220,51549,343],{"class":264},[220,51551,347],{"class":346},[220,51553,359],{"class":264},[220,51555,51556,51558,51560],{"class":222,"line":179},[220,51557,364],{"class":264},[220,51559,51521],{"class":346},[220,51561,386],{"class":264},[220,51563,51564,51566,51568],{"class":222,"line":389},[220,51565,402],{"class":264},[220,51567,347],{"class":346},[220,51569,359],{"class":264},[212,51571,51572],{"className":409,"code":51543,"language":411,"meta":178,"style":178},[99,51573,51574,51582,51590],{"__ignoreMap":178},[220,51575,51576,51578,51580],{"class":222,"line":223},[220,51577,343],{"class":264},[220,51579,347],{"class":420},[220,51581,359],{"class":264},[220,51583,51584,51586,51588],{"class":222,"line":179},[220,51585,364],{"class":264},[220,51587,51521],{"class":420},[220,51589,386],{"class":264},[220,51591,51592,51594,51596],{"class":222,"line":389},[220,51593,402],{"class":264},[220,51595,347],{"class":420},[220,51597,359],{"class":264},[212,51599,51600],{"className":2844,"code":51543,"language":2846,"meta":178,"style":178},[99,51601,51602,51610,51618],{"__ignoreMap":178},[220,51603,51604,51606,51608],{"class":222,"line":223},[220,51605,343],{"class":264},[220,51607,347],{"class":420},[220,51609,359],{"class":264},[220,51611,51612,51614,51616],{"class":222,"line":179},[220,51613,364],{"class":264},[220,51615,51521],{"class":420},[220,51617,386],{"class":264},[220,51619,51620,51622,51624],{"class":222,"line":389},[220,51621,402],{"class":264},[220,51623,347],{"class":420},[220,51625,359],{"class":264},[212,51627,51628],{"className":468,"code":51543,"language":469,"meta":178,"style":178},[99,51629,51630,51638,51646],{"__ignoreMap":178},[220,51631,51632,51634,51636],{"class":222,"line":223},[220,51633,343],{"class":264},[220,51635,347],{"class":420},[220,51637,359],{"class":264},[220,51639,51640,51642,51644],{"class":222,"line":179},[220,51641,364],{"class":264},[220,51643,51521],{"class":420},[220,51645,386],{"class":264},[220,51647,51648,51650,51652],{"class":222,"line":389},[220,51649,402],{"class":264},[220,51651,347],{"class":420},[220,51653,359],{"class":264},[212,51655,51657],{"className":251,"code":51656,"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,51658,51659,51669,51673,51687,51691,51700,51704],{"__ignoreMap":178},[220,51660,51661,51663,51665,51667],{"class":222,"line":223},[220,51662,261],{"class":260},[220,51664,11364],{"class":264},[220,51666,268],{"class":260},[220,51668,11369],{"class":230},[220,51670,51671],{"class":222,"line":179},[220,51672,647],{"emptyLinePlaceholder":194},[220,51674,51675,51677,51679,51681,51683,51685],{"class":222,"line":389},[220,51676,1735],{"class":260},[220,51678,1738],{"class":420},[220,51680,1741],{"class":260},[220,51682,1744],{"class":260},[220,51684,1747],{"class":226},[220,51686,1750],{"class":264},[220,51688,51689],{"class":222,"line":399},[220,51690,1765],{"class":264},[220,51692,51693,51695,51698],{"class":222,"line":644},[220,51694,1770],{"class":264},[220,51696,51697],{"class":230},"'Goo'",[220,51699,2465],{"class":264},[220,51701,51702],{"class":222,"line":650},[220,51703,1787],{"class":264},[220,51705,51706],{"class":222,"line":656},[220,51707,1792],{"class":264},[1504,51709,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":51711},[51712,51713],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":51521,"description":51529},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51720,"title":51721,"body":51722,"category":32666,"componentType":25740,"description":51729,"extension":191,"meta":51990,"navigation":194,"path":51991,"requiresChild":194,"seo":51992,"stem":51993,"__hash__":51994},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51723,"toc":51986},[51724,51727,51730,51732,51734,51737,51739,51984],[11,51725,51721],{"id":51726},"gradientmap",[15,51728,51729],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31771,51731],{"component":51721},[23,51733,31775],{"id":26391},[31777,51735],{":props":51736},"[{\"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,51738,31783],{"id":31782},[246,51740,51741,51786,51830,51874,51918],{":tabs":1557},[212,51742,51744],{"className":334,"code":51743,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51745,51746,51754,51762,51770,51778],{"__ignoreMap":178},[220,51747,51748,51750,51752],{"class":222,"line":223},[220,51749,343],{"class":264},[220,51751,347],{"class":346},[220,51753,359],{"class":264},[220,51755,51756,51758,51760],{"class":222,"line":179},[220,51757,364],{"class":264},[220,51759,51721],{"class":346},[220,51761,359],{"class":264},[220,51763,51764,51766,51768],{"class":222,"line":389},[220,51765,2550],{"class":264},[220,51767,2553],{"class":346},[220,51769,386],{"class":264},[220,51771,51772,51774,51776],{"class":222,"line":399},[220,51773,2567],{"class":264},[220,51775,51721],{"class":346},[220,51777,359],{"class":264},[220,51779,51780,51782,51784],{"class":222,"line":644},[220,51781,402],{"class":264},[220,51783,347],{"class":346},[220,51785,359],{"class":264},[212,51787,51788],{"className":409,"code":51743,"language":411,"meta":178,"style":178},[99,51789,51790,51798,51806,51814,51822],{"__ignoreMap":178},[220,51791,51792,51794,51796],{"class":222,"line":223},[220,51793,343],{"class":264},[220,51795,347],{"class":420},[220,51797,359],{"class":264},[220,51799,51800,51802,51804],{"class":222,"line":179},[220,51801,364],{"class":264},[220,51803,51721],{"class":420},[220,51805,359],{"class":264},[220,51807,51808,51810,51812],{"class":222,"line":389},[220,51809,2550],{"class":264},[220,51811,2553],{"class":420},[220,51813,386],{"class":264},[220,51815,51816,51818,51820],{"class":222,"line":399},[220,51817,2567],{"class":264},[220,51819,51721],{"class":420},[220,51821,359],{"class":264},[220,51823,51824,51826,51828],{"class":222,"line":644},[220,51825,402],{"class":264},[220,51827,347],{"class":420},[220,51829,359],{"class":264},[212,51831,51832],{"className":2844,"code":51743,"language":2846,"meta":178,"style":178},[99,51833,51834,51842,51850,51858,51866],{"__ignoreMap":178},[220,51835,51836,51838,51840],{"class":222,"line":223},[220,51837,343],{"class":264},[220,51839,347],{"class":420},[220,51841,359],{"class":264},[220,51843,51844,51846,51848],{"class":222,"line":179},[220,51845,364],{"class":264},[220,51847,51721],{"class":420},[220,51849,359],{"class":264},[220,51851,51852,51854,51856],{"class":222,"line":389},[220,51853,2550],{"class":264},[220,51855,2553],{"class":420},[220,51857,386],{"class":264},[220,51859,51860,51862,51864],{"class":222,"line":399},[220,51861,2567],{"class":264},[220,51863,51721],{"class":420},[220,51865,359],{"class":264},[220,51867,51868,51870,51872],{"class":222,"line":644},[220,51869,402],{"class":264},[220,51871,347],{"class":420},[220,51873,359],{"class":264},[212,51875,51876],{"className":468,"code":51743,"language":469,"meta":178,"style":178},[99,51877,51878,51886,51894,51902,51910],{"__ignoreMap":178},[220,51879,51880,51882,51884],{"class":222,"line":223},[220,51881,343],{"class":264},[220,51883,347],{"class":420},[220,51885,359],{"class":264},[220,51887,51888,51890,51892],{"class":222,"line":179},[220,51889,364],{"class":264},[220,51891,51721],{"class":420},[220,51893,359],{"class":264},[220,51895,51896,51898,51900],{"class":222,"line":389},[220,51897,2550],{"class":264},[220,51899,2553],{"class":420},[220,51901,386],{"class":264},[220,51903,51904,51906,51908],{"class":222,"line":399},[220,51905,2567],{"class":264},[220,51907,51721],{"class":420},[220,51909,359],{"class":264},[220,51911,51912,51914,51916],{"class":222,"line":644},[220,51913,402],{"class":264},[220,51915,347],{"class":420},[220,51917,359],{"class":264},[212,51919,51921],{"className":251,"code":51920,"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,51922,51923,51933,51937,51951,51955,51964,51972,51976,51980],{"__ignoreMap":178},[220,51924,51925,51927,51929,51931],{"class":222,"line":223},[220,51926,261],{"class":260},[220,51928,11364],{"class":264},[220,51930,268],{"class":260},[220,51932,11369],{"class":230},[220,51934,51935],{"class":222,"line":179},[220,51936,647],{"emptyLinePlaceholder":194},[220,51938,51939,51941,51943,51945,51947,51949],{"class":222,"line":389},[220,51940,1735],{"class":260},[220,51942,1738],{"class":420},[220,51944,1741],{"class":260},[220,51946,1744],{"class":260},[220,51948,1747],{"class":226},[220,51950,1750],{"class":264},[220,51952,51953],{"class":222,"line":399},[220,51954,1765],{"class":264},[220,51956,51957,51959,51962],{"class":222,"line":644},[220,51958,1770],{"class":264},[220,51960,51961],{"class":230},"'GradientMap'",[220,51963,6860],{"class":264},[220,51965,51966,51968,51970],{"class":222,"line":650},[220,51967,6865],{"class":264},[220,51969,6409],{"class":230},[220,51971,2465],{"class":264},[220,51973,51974],{"class":222,"line":656},[220,51975,6882],{"class":264},[220,51977,51978],{"class":222,"line":673},[220,51979,1787],{"class":264},[220,51981,51982],{"class":222,"line":682},[220,51983,1792],{"class":264},[1504,51985,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":51987},[51988,51989],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51721,"description":51729},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":51996,"title":51997,"body":51998,"category":36228,"componentType":25740,"description":52005,"extension":191,"meta":52260,"navigation":194,"path":52261,"requiresChild":194,"seo":52262,"stem":52263,"__hash__":52264},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":51999,"toc":52257},[52000,52003,52006,52008,52010,52255],[11,52001,51997],{"id":52002},"grayscale",[15,52004,52005],{},"Convert colors to black and white",[31771,52007],{"component":51997},[23,52009,31783],{"id":31782},[246,52011,52012,52057,52101,52145,52189],{":tabs":1557},[212,52013,52015],{"className":334,"code":52014,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,52016,52017,52025,52033,52041,52049],{"__ignoreMap":178},[220,52018,52019,52021,52023],{"class":222,"line":223},[220,52020,343],{"class":264},[220,52022,347],{"class":346},[220,52024,359],{"class":264},[220,52026,52027,52029,52031],{"class":222,"line":179},[220,52028,364],{"class":264},[220,52030,51997],{"class":346},[220,52032,359],{"class":264},[220,52034,52035,52037,52039],{"class":222,"line":389},[220,52036,2550],{"class":264},[220,52038,2553],{"class":346},[220,52040,386],{"class":264},[220,52042,52043,52045,52047],{"class":222,"line":399},[220,52044,2567],{"class":264},[220,52046,51997],{"class":346},[220,52048,359],{"class":264},[220,52050,52051,52053,52055],{"class":222,"line":644},[220,52052,402],{"class":264},[220,52054,347],{"class":346},[220,52056,359],{"class":264},[212,52058,52059],{"className":409,"code":52014,"language":411,"meta":178,"style":178},[99,52060,52061,52069,52077,52085,52093],{"__ignoreMap":178},[220,52062,52063,52065,52067],{"class":222,"line":223},[220,52064,343],{"class":264},[220,52066,347],{"class":420},[220,52068,359],{"class":264},[220,52070,52071,52073,52075],{"class":222,"line":179},[220,52072,364],{"class":264},[220,52074,51997],{"class":420},[220,52076,359],{"class":264},[220,52078,52079,52081,52083],{"class":222,"line":389},[220,52080,2550],{"class":264},[220,52082,2553],{"class":420},[220,52084,386],{"class":264},[220,52086,52087,52089,52091],{"class":222,"line":399},[220,52088,2567],{"class":264},[220,52090,51997],{"class":420},[220,52092,359],{"class":264},[220,52094,52095,52097,52099],{"class":222,"line":644},[220,52096,402],{"class":264},[220,52098,347],{"class":420},[220,52100,359],{"class":264},[212,52102,52103],{"className":2844,"code":52014,"language":2846,"meta":178,"style":178},[99,52104,52105,52113,52121,52129,52137],{"__ignoreMap":178},[220,52106,52107,52109,52111],{"class":222,"line":223},[220,52108,343],{"class":264},[220,52110,347],{"class":420},[220,52112,359],{"class":264},[220,52114,52115,52117,52119],{"class":222,"line":179},[220,52116,364],{"class":264},[220,52118,51997],{"class":420},[220,52120,359],{"class":264},[220,52122,52123,52125,52127],{"class":222,"line":389},[220,52124,2550],{"class":264},[220,52126,2553],{"class":420},[220,52128,386],{"class":264},[220,52130,52131,52133,52135],{"class":222,"line":399},[220,52132,2567],{"class":264},[220,52134,51997],{"class":420},[220,52136,359],{"class":264},[220,52138,52139,52141,52143],{"class":222,"line":644},[220,52140,402],{"class":264},[220,52142,347],{"class":420},[220,52144,359],{"class":264},[212,52146,52147],{"className":468,"code":52014,"language":469,"meta":178,"style":178},[99,52148,52149,52157,52165,52173,52181],{"__ignoreMap":178},[220,52150,52151,52153,52155],{"class":222,"line":223},[220,52152,343],{"class":264},[220,52154,347],{"class":420},[220,52156,359],{"class":264},[220,52158,52159,52161,52163],{"class":222,"line":179},[220,52160,364],{"class":264},[220,52162,51997],{"class":420},[220,52164,359],{"class":264},[220,52166,52167,52169,52171],{"class":222,"line":389},[220,52168,2550],{"class":264},[220,52170,2553],{"class":420},[220,52172,386],{"class":264},[220,52174,52175,52177,52179],{"class":222,"line":399},[220,52176,2567],{"class":264},[220,52178,51997],{"class":420},[220,52180,359],{"class":264},[220,52182,52183,52185,52187],{"class":222,"line":644},[220,52184,402],{"class":264},[220,52186,347],{"class":420},[220,52188,359],{"class":264},[212,52190,52192],{"className":251,"code":52191,"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,52193,52194,52204,52208,52222,52226,52235,52243,52247,52251],{"__ignoreMap":178},[220,52195,52196,52198,52200,52202],{"class":222,"line":223},[220,52197,261],{"class":260},[220,52199,11364],{"class":264},[220,52201,268],{"class":260},[220,52203,11369],{"class":230},[220,52205,52206],{"class":222,"line":179},[220,52207,647],{"emptyLinePlaceholder":194},[220,52209,52210,52212,52214,52216,52218,52220],{"class":222,"line":389},[220,52211,1735],{"class":260},[220,52213,1738],{"class":420},[220,52215,1741],{"class":260},[220,52217,1744],{"class":260},[220,52219,1747],{"class":226},[220,52221,1750],{"class":264},[220,52223,52224],{"class":222,"line":399},[220,52225,1765],{"class":264},[220,52227,52228,52230,52233],{"class":222,"line":644},[220,52229,1770],{"class":264},[220,52231,52232],{"class":230},"'Grayscale'",[220,52234,6860],{"class":264},[220,52236,52237,52239,52241],{"class":222,"line":650},[220,52238,6865],{"class":264},[220,52240,6409],{"class":230},[220,52242,2465],{"class":264},[220,52244,52245],{"class":222,"line":656},[220,52246,6882],{"class":264},[220,52248,52249],{"class":222,"line":673},[220,52250,1787],{"class":264},[220,52252,52253],{"class":222,"line":682},[220,52254,1792],{"class":264},[1504,52256,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":52258},[52259],{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":51997,"description":52005},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":52266,"title":52267,"body":52268,"category":32923,"componentType":25734,"description":52275,"extension":191,"meta":52505,"navigation":194,"path":52506,"requiresChild":32390,"seo":52507,"stem":52508,"__hash__":52509},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":52269,"toc":52501},[52270,52273,52276,52278,52280,52283,52285,52499],[11,52271,52267],{"id":52272},"grid",[15,52274,52275],{},"Simple grid lines pattern with adjustable thickness and rotation",[31771,52277],{"component":52267},[23,52279,31775],{"id":26391},[31777,52281],{":props":52282},"[{\"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,52284,31783],{"id":31782},[246,52286,52287,52327,52365,52403,52441],{":tabs":1557},[212,52288,52290],{"className":334,"code":52289,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,52291,52292,52300,52307,52315,52319],{"__ignoreMap":178},[220,52293,52294,52296,52298],{"class":222,"line":223},[220,52295,343],{"class":264},[220,52297,347],{"class":346},[220,52299,359],{"class":264},[220,52301,52302,52304],{"class":222,"line":179},[220,52303,364],{"class":264},[220,52305,52306],{"class":346},"Grid\n",[220,52308,52309,52311,52313],{"class":222,"line":389},[220,52310,9487],{"class":226},[220,52312,353],{"class":264},[220,52314,9443],{"class":230},[220,52316,52317],{"class":222,"line":399},[220,52318,1234],{"class":264},[220,52320,52321,52323,52325],{"class":222,"line":644},[220,52322,402],{"class":264},[220,52324,347],{"class":346},[220,52326,359],{"class":264},[212,52328,52329],{"className":409,"code":52289,"language":411,"meta":178,"style":178},[99,52330,52331,52339,52345,52353,52357],{"__ignoreMap":178},[220,52332,52333,52335,52337],{"class":222,"line":223},[220,52334,343],{"class":264},[220,52336,347],{"class":420},[220,52338,359],{"class":264},[220,52340,52341,52343],{"class":222,"line":179},[220,52342,364],{"class":264},[220,52344,52306],{"class":420},[220,52346,52347,52349,52351],{"class":222,"line":389},[220,52348,9487],{"class":226},[220,52350,353],{"class":260},[220,52352,9443],{"class":230},[220,52354,52355],{"class":222,"line":399},[220,52356,1234],{"class":264},[220,52358,52359,52361,52363],{"class":222,"line":644},[220,52360,402],{"class":264},[220,52362,347],{"class":420},[220,52364,359],{"class":264},[212,52366,52367],{"className":2844,"code":52289,"language":2846,"meta":178,"style":178},[99,52368,52369,52377,52383,52391,52395],{"__ignoreMap":178},[220,52370,52371,52373,52375],{"class":222,"line":223},[220,52372,343],{"class":264},[220,52374,347],{"class":420},[220,52376,359],{"class":264},[220,52378,52379,52381],{"class":222,"line":179},[220,52380,364],{"class":264},[220,52382,52306],{"class":420},[220,52384,52385,52387,52389],{"class":222,"line":389},[220,52386,9487],{"class":226},[220,52388,353],{"class":264},[220,52390,9443],{"class":230},[220,52392,52393],{"class":222,"line":399},[220,52394,1234],{"class":264},[220,52396,52397,52399,52401],{"class":222,"line":644},[220,52398,402],{"class":264},[220,52400,347],{"class":420},[220,52402,359],{"class":264},[212,52404,52405],{"className":468,"code":52289,"language":469,"meta":178,"style":178},[99,52406,52407,52415,52421,52429,52433],{"__ignoreMap":178},[220,52408,52409,52411,52413],{"class":222,"line":223},[220,52410,343],{"class":264},[220,52412,347],{"class":420},[220,52414,359],{"class":264},[220,52416,52417,52419],{"class":222,"line":179},[220,52418,364],{"class":264},[220,52420,52306],{"class":420},[220,52422,52423,52425,52427],{"class":222,"line":389},[220,52424,9487],{"class":226},[220,52426,353],{"class":260},[220,52428,9443],{"class":230},[220,52430,52431],{"class":222,"line":399},[220,52432,1234],{"class":264},[220,52434,52435,52437,52439],{"class":222,"line":644},[220,52436,402],{"class":264},[220,52438,347],{"class":420},[220,52440,359],{"class":264},[212,52442,52444],{"className":251,"code":52443,"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,52445,52446,52456,52460,52474,52478,52491,52495],{"__ignoreMap":178},[220,52447,52448,52450,52452,52454],{"class":222,"line":223},[220,52449,261],{"class":260},[220,52451,11364],{"class":264},[220,52453,268],{"class":260},[220,52455,11369],{"class":230},[220,52457,52458],{"class":222,"line":179},[220,52459,647],{"emptyLinePlaceholder":194},[220,52461,52462,52464,52466,52468,52470,52472],{"class":222,"line":389},[220,52463,1735],{"class":260},[220,52465,1738],{"class":420},[220,52467,1741],{"class":260},[220,52469,1744],{"class":260},[220,52471,1747],{"class":226},[220,52473,1750],{"class":264},[220,52475,52476],{"class":222,"line":399},[220,52477,1765],{"class":264},[220,52479,52480,52482,52485,52487,52489],{"class":222,"line":644},[220,52481,1770],{"class":264},[220,52483,52484],{"class":230},"'Grid'",[220,52486,1776],{"class":264},[220,52488,10021],{"class":230},[220,52490,1782],{"class":264},[220,52492,52493],{"class":222,"line":650},[220,52494,1787],{"class":264},[220,52496,52497],{"class":222,"line":656},[220,52498,1792],{"class":264},[1504,52500,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52502},[52503,52504],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":52267,"description":52275},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":52511,"title":6946,"body":52512,"category":35419,"componentType":25740,"description":52519,"extension":191,"meta":52881,"navigation":194,"path":52882,"requiresChild":194,"seo":52883,"stem":52884,"__hash__":52885},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":52513,"toc":52877},[52514,52517,52520,52522,52524,52527,52529,52875],[11,52515,6946],{"id":52516},"griddistortion",[15,52518,52519],{},"Interactive grid distortion controlled by mouse position",[31771,52521],{"component":6946},[23,52523,31775],{"id":26391},[31777,52525],{":props":52526},"[{\"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,52528,31783],{"id":31782},[246,52530,52531,52595,52666,52732,52802],{":tabs":1557},[212,52532,52534],{"className":334,"code":52533,"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,52535,52536,52544,52551,52559,52567,52571,52579,52587],{"__ignoreMap":178},[220,52537,52538,52540,52542],{"class":222,"line":223},[220,52539,343],{"class":264},[220,52541,347],{"class":346},[220,52543,359],{"class":264},[220,52545,52546,52548],{"class":222,"line":179},[220,52547,364],{"class":264},[220,52549,52550],{"class":346},"GridDistortion\n",[220,52552,52553,52555,52557],{"class":222,"line":389},[220,52554,20228],{"class":226},[220,52556,353],{"class":264},[220,52558,36485],{"class":230},[220,52560,52561,52563,52565],{"class":222,"line":399},[220,52562,17262],{"class":226},[220,52564,353],{"class":264},[220,52566,36485],{"class":230},[220,52568,52569],{"class":222,"line":644},[220,52570,31819],{"class":264},[220,52572,52573,52575,52577],{"class":222,"line":650},[220,52574,2550],{"class":264},[220,52576,2553],{"class":346},[220,52578,386],{"class":264},[220,52580,52581,52583,52585],{"class":222,"line":656},[220,52582,2567],{"class":264},[220,52584,6946],{"class":346},[220,52586,359],{"class":264},[220,52588,52589,52591,52593],{"class":222,"line":673},[220,52590,402],{"class":264},[220,52592,347],{"class":346},[220,52594,359],{"class":264},[212,52596,52598],{"className":409,"code":52597,"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,52599,52600,52608,52614,52626,52638,52642,52650,52658],{"__ignoreMap":178},[220,52601,52602,52604,52606],{"class":222,"line":223},[220,52603,343],{"class":264},[220,52605,347],{"class":420},[220,52607,359],{"class":264},[220,52609,52610,52612],{"class":222,"line":179},[220,52611,364],{"class":264},[220,52613,52550],{"class":420},[220,52615,52616,52618,52620,52622,52624],{"class":222,"line":389},[220,52617,20339],{"class":226},[220,52619,353],{"class":260},[220,52621,743],{"class":264},[220,52623,8528],{"class":420},[220,52625,749],{"class":264},[220,52627,52628,52630,52632,52634,52636],{"class":222,"line":399},[220,52629,9497],{"class":226},[220,52631,353],{"class":260},[220,52633,743],{"class":264},[220,52635,8528],{"class":420},[220,52637,749],{"class":264},[220,52639,52640],{"class":222,"line":644},[220,52641,31819],{"class":264},[220,52643,52644,52646,52648],{"class":222,"line":650},[220,52645,2550],{"class":264},[220,52647,2553],{"class":420},[220,52649,386],{"class":264},[220,52651,52652,52654,52656],{"class":222,"line":656},[220,52653,2567],{"class":264},[220,52655,6946],{"class":420},[220,52657,359],{"class":264},[220,52659,52660,52662,52664],{"class":222,"line":673},[220,52661,402],{"class":264},[220,52663,347],{"class":420},[220,52665,359],{"class":264},[212,52667,52668],{"className":2844,"code":52597,"language":2846,"meta":178,"style":178},[99,52669,52670,52678,52684,52694,52704,52708,52716,52724],{"__ignoreMap":178},[220,52671,52672,52674,52676],{"class":222,"line":223},[220,52673,343],{"class":264},[220,52675,347],{"class":420},[220,52677,359],{"class":264},[220,52679,52680,52682],{"class":222,"line":179},[220,52681,364],{"class":264},[220,52683,52550],{"class":420},[220,52685,52686,52688,52690,52692],{"class":222,"line":389},[220,52687,20339],{"class":226},[220,52689,29729],{"class":264},[220,52691,8528],{"class":420},[220,52693,749],{"class":264},[220,52695,52696,52698,52700,52702],{"class":222,"line":399},[220,52697,9497],{"class":226},[220,52699,29729],{"class":264},[220,52701,8528],{"class":420},[220,52703,749],{"class":264},[220,52705,52706],{"class":222,"line":644},[220,52707,31819],{"class":264},[220,52709,52710,52712,52714],{"class":222,"line":650},[220,52711,2550],{"class":264},[220,52713,2553],{"class":420},[220,52715,386],{"class":264},[220,52717,52718,52720,52722],{"class":222,"line":656},[220,52719,2567],{"class":264},[220,52721,6946],{"class":420},[220,52723,359],{"class":264},[220,52725,52726,52728,52730],{"class":222,"line":673},[220,52727,402],{"class":264},[220,52729,347],{"class":420},[220,52731,359],{"class":264},[212,52733,52734],{"className":468,"code":52597,"language":469,"meta":178,"style":178},[99,52735,52736,52744,52750,52762,52774,52778,52786,52794],{"__ignoreMap":178},[220,52737,52738,52740,52742],{"class":222,"line":223},[220,52739,343],{"class":264},[220,52741,347],{"class":420},[220,52743,359],{"class":264},[220,52745,52746,52748],{"class":222,"line":179},[220,52747,364],{"class":264},[220,52749,52550],{"class":420},[220,52751,52752,52754,52756,52758,52760],{"class":222,"line":389},[220,52753,20339],{"class":226},[220,52755,353],{"class":260},[220,52757,743],{"class":264},[220,52759,8528],{"class":420},[220,52761,749],{"class":264},[220,52763,52764,52766,52768,52770,52772],{"class":222,"line":399},[220,52765,9497],{"class":226},[220,52767,353],{"class":260},[220,52769,743],{"class":264},[220,52771,8528],{"class":420},[220,52773,749],{"class":264},[220,52775,52776],{"class":222,"line":644},[220,52777,31819],{"class":264},[220,52779,52780,52782,52784],{"class":222,"line":650},[220,52781,2550],{"class":264},[220,52783,2553],{"class":420},[220,52785,386],{"class":264},[220,52787,52788,52790,52792],{"class":222,"line":656},[220,52789,2567],{"class":264},[220,52791,6946],{"class":420},[220,52793,359],{"class":264},[220,52795,52796,52798,52800],{"class":222,"line":673},[220,52797,402],{"class":264},[220,52799,347],{"class":420},[220,52801,359],{"class":264},[212,52803,52805],{"className":251,"code":52804,"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,52806,52807,52817,52821,52835,52839,52855,52863,52867,52871],{"__ignoreMap":178},[220,52808,52809,52811,52813,52815],{"class":222,"line":223},[220,52810,261],{"class":260},[220,52812,11364],{"class":264},[220,52814,268],{"class":260},[220,52816,11369],{"class":230},[220,52818,52819],{"class":222,"line":179},[220,52820,647],{"emptyLinePlaceholder":194},[220,52822,52823,52825,52827,52829,52831,52833],{"class":222,"line":389},[220,52824,1735],{"class":260},[220,52826,1738],{"class":420},[220,52828,1741],{"class":260},[220,52830,1744],{"class":260},[220,52832,1747],{"class":226},[220,52834,1750],{"class":264},[220,52836,52837],{"class":222,"line":399},[220,52838,1765],{"class":264},[220,52840,52841,52843,52845,52847,52849,52851,52853],{"class":222,"line":644},[220,52842,1770],{"class":264},[220,52844,7389],{"class":230},[220,52846,32063],{"class":264},[220,52848,8528],{"class":420},[220,52850,6417],{"class":264},[220,52852,8528],{"class":420},[220,52854,7397],{"class":264},[220,52856,52857,52859,52861],{"class":222,"line":650},[220,52858,6865],{"class":264},[220,52860,6409],{"class":230},[220,52862,2465],{"class":264},[220,52864,52865],{"class":222,"line":656},[220,52866,6882],{"class":264},[220,52868,52869],{"class":222,"line":673},[220,52870,1787],{"class":264},[220,52872,52873],{"class":222,"line":682},[220,52874,1792],{"class":264},[1504,52876,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52878},[52879,52880],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":6946,"description":52519},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":52887,"title":52888,"body":52889,"category":53151,"componentType":25740,"description":52896,"extension":191,"meta":53152,"navigation":194,"path":53153,"requiresChild":194,"seo":53154,"stem":53155,"__hash__":53156},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":52890,"toc":53148},[52891,52894,52897,52899,52901,53146],[11,52892,52888],{"id":52893},"group",[15,52895,52896],{},"Container for organizing and composing child effects — supports flex-like flow layout (column\u002Frow stacking via the flow prop)",[31771,52898],{"component":52888},[23,52900,31783],{"id":31782},[246,52902,52903,52948,52992,53036,53080],{":tabs":1557},[212,52904,52906],{"className":334,"code":52905,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,52907,52908,52916,52924,52932,52940],{"__ignoreMap":178},[220,52909,52910,52912,52914],{"class":222,"line":223},[220,52911,343],{"class":264},[220,52913,347],{"class":346},[220,52915,359],{"class":264},[220,52917,52918,52920,52922],{"class":222,"line":179},[220,52919,364],{"class":264},[220,52921,52888],{"class":346},[220,52923,359],{"class":264},[220,52925,52926,52928,52930],{"class":222,"line":389},[220,52927,2550],{"class":264},[220,52929,2553],{"class":346},[220,52931,386],{"class":264},[220,52933,52934,52936,52938],{"class":222,"line":399},[220,52935,2567],{"class":264},[220,52937,52888],{"class":346},[220,52939,359],{"class":264},[220,52941,52942,52944,52946],{"class":222,"line":644},[220,52943,402],{"class":264},[220,52945,347],{"class":346},[220,52947,359],{"class":264},[212,52949,52950],{"className":409,"code":52905,"language":411,"meta":178,"style":178},[99,52951,52952,52960,52968,52976,52984],{"__ignoreMap":178},[220,52953,52954,52956,52958],{"class":222,"line":223},[220,52955,343],{"class":264},[220,52957,347],{"class":420},[220,52959,359],{"class":264},[220,52961,52962,52964,52966],{"class":222,"line":179},[220,52963,364],{"class":264},[220,52965,52888],{"class":420},[220,52967,359],{"class":264},[220,52969,52970,52972,52974],{"class":222,"line":389},[220,52971,2550],{"class":264},[220,52973,2553],{"class":420},[220,52975,386],{"class":264},[220,52977,52978,52980,52982],{"class":222,"line":399},[220,52979,2567],{"class":264},[220,52981,52888],{"class":420},[220,52983,359],{"class":264},[220,52985,52986,52988,52990],{"class":222,"line":644},[220,52987,402],{"class":264},[220,52989,347],{"class":420},[220,52991,359],{"class":264},[212,52993,52994],{"className":2844,"code":52905,"language":2846,"meta":178,"style":178},[99,52995,52996,53004,53012,53020,53028],{"__ignoreMap":178},[220,52997,52998,53000,53002],{"class":222,"line":223},[220,52999,343],{"class":264},[220,53001,347],{"class":420},[220,53003,359],{"class":264},[220,53005,53006,53008,53010],{"class":222,"line":179},[220,53007,364],{"class":264},[220,53009,52888],{"class":420},[220,53011,359],{"class":264},[220,53013,53014,53016,53018],{"class":222,"line":389},[220,53015,2550],{"class":264},[220,53017,2553],{"class":420},[220,53019,386],{"class":264},[220,53021,53022,53024,53026],{"class":222,"line":399},[220,53023,2567],{"class":264},[220,53025,52888],{"class":420},[220,53027,359],{"class":264},[220,53029,53030,53032,53034],{"class":222,"line":644},[220,53031,402],{"class":264},[220,53033,347],{"class":420},[220,53035,359],{"class":264},[212,53037,53038],{"className":468,"code":52905,"language":469,"meta":178,"style":178},[99,53039,53040,53048,53056,53064,53072],{"__ignoreMap":178},[220,53041,53042,53044,53046],{"class":222,"line":223},[220,53043,343],{"class":264},[220,53045,347],{"class":420},[220,53047,359],{"class":264},[220,53049,53050,53052,53054],{"class":222,"line":179},[220,53051,364],{"class":264},[220,53053,52888],{"class":420},[220,53055,359],{"class":264},[220,53057,53058,53060,53062],{"class":222,"line":389},[220,53059,2550],{"class":264},[220,53061,2553],{"class":420},[220,53063,386],{"class":264},[220,53065,53066,53068,53070],{"class":222,"line":399},[220,53067,2567],{"class":264},[220,53069,52888],{"class":420},[220,53071,359],{"class":264},[220,53073,53074,53076,53078],{"class":222,"line":644},[220,53075,402],{"class":264},[220,53077,347],{"class":420},[220,53079,359],{"class":264},[212,53081,53083],{"className":251,"code":53082,"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,53084,53085,53095,53099,53113,53117,53126,53134,53138,53142],{"__ignoreMap":178},[220,53086,53087,53089,53091,53093],{"class":222,"line":223},[220,53088,261],{"class":260},[220,53090,11364],{"class":264},[220,53092,268],{"class":260},[220,53094,11369],{"class":230},[220,53096,53097],{"class":222,"line":179},[220,53098,647],{"emptyLinePlaceholder":194},[220,53100,53101,53103,53105,53107,53109,53111],{"class":222,"line":389},[220,53102,1735],{"class":260},[220,53104,1738],{"class":420},[220,53106,1741],{"class":260},[220,53108,1744],{"class":260},[220,53110,1747],{"class":226},[220,53112,1750],{"class":264},[220,53114,53115],{"class":222,"line":399},[220,53116,1765],{"class":264},[220,53118,53119,53121,53124],{"class":222,"line":644},[220,53120,1770],{"class":264},[220,53122,53123],{"class":230},"'Group'",[220,53125,6860],{"class":264},[220,53127,53128,53130,53132],{"class":222,"line":650},[220,53129,6865],{"class":264},[220,53131,6409],{"class":230},[220,53133,2465],{"class":264},[220,53135,53136],{"class":222,"line":656},[220,53137,6882],{"class":264},[220,53139,53140],{"class":222,"line":673},[220,53141,1787],{"class":264},[220,53143,53144],{"class":222,"line":682},[220,53145,1792],{"class":264},[1504,53147,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":53149},[53150],{"id":31782,"depth":179,"text":31783},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":52888,"description":52896},"docs\u002Fcomponents\u002FGroup","VRm3A9h-85RvRmiecZuaIcK_SKxGDs5Woe18hQVpFfg",{"id":53158,"title":53159,"body":53160,"category":32923,"componentType":25734,"description":53167,"extension":191,"meta":53352,"navigation":194,"path":53353,"requiresChild":32390,"seo":53354,"stem":53355,"__hash__":53356},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":53161,"toc":53349},[53162,53165,53168,53174,53176,53178,53347],[11,53163,53159],{"id":53164},"htmlincanvas",[15,53166,53167],{},"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.",[53169,53170],"experimental-warning",{"link-label":53171,"link-url":53172,"message":53173},"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.",[31771,53175],{"component":53159},[23,53177,31783],{"id":31782},[246,53179,53180,53209,53237,53265,53293],{":tabs":1557},[212,53181,53183],{"className":334,"code":53182,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,53184,53185,53193,53201],{"__ignoreMap":178},[220,53186,53187,53189,53191],{"class":222,"line":223},[220,53188,343],{"class":264},[220,53190,347],{"class":346},[220,53192,359],{"class":264},[220,53194,53195,53197,53199],{"class":222,"line":179},[220,53196,364],{"class":264},[220,53198,53159],{"class":346},[220,53200,386],{"class":264},[220,53202,53203,53205,53207],{"class":222,"line":389},[220,53204,402],{"class":264},[220,53206,347],{"class":346},[220,53208,359],{"class":264},[212,53210,53211],{"className":409,"code":53182,"language":411,"meta":178,"style":178},[99,53212,53213,53221,53229],{"__ignoreMap":178},[220,53214,53215,53217,53219],{"class":222,"line":223},[220,53216,343],{"class":264},[220,53218,347],{"class":420},[220,53220,359],{"class":264},[220,53222,53223,53225,53227],{"class":222,"line":179},[220,53224,364],{"class":264},[220,53226,53159],{"class":420},[220,53228,386],{"class":264},[220,53230,53231,53233,53235],{"class":222,"line":389},[220,53232,402],{"class":264},[220,53234,347],{"class":420},[220,53236,359],{"class":264},[212,53238,53239],{"className":2844,"code":53182,"language":2846,"meta":178,"style":178},[99,53240,53241,53249,53257],{"__ignoreMap":178},[220,53242,53243,53245,53247],{"class":222,"line":223},[220,53244,343],{"class":264},[220,53246,347],{"class":420},[220,53248,359],{"class":264},[220,53250,53251,53253,53255],{"class":222,"line":179},[220,53252,364],{"class":264},[220,53254,53159],{"class":420},[220,53256,386],{"class":264},[220,53258,53259,53261,53263],{"class":222,"line":389},[220,53260,402],{"class":264},[220,53262,347],{"class":420},[220,53264,359],{"class":264},[212,53266,53267],{"className":468,"code":53182,"language":469,"meta":178,"style":178},[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":420},[220,53276,359],{"class":264},[220,53278,53279,53281,53283],{"class":222,"line":179},[220,53280,364],{"class":264},[220,53282,53159],{"class":420},[220,53284,386],{"class":264},[220,53286,53287,53289,53291],{"class":222,"line":389},[220,53288,402],{"class":264},[220,53290,347],{"class":420},[220,53292,359],{"class":264},[212,53294,53296],{"className":251,"code":53295,"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,53297,53298,53308,53312,53326,53330,53339,53343],{"__ignoreMap":178},[220,53299,53300,53302,53304,53306],{"class":222,"line":223},[220,53301,261],{"class":260},[220,53303,11364],{"class":264},[220,53305,268],{"class":260},[220,53307,11369],{"class":230},[220,53309,53310],{"class":222,"line":179},[220,53311,647],{"emptyLinePlaceholder":194},[220,53313,53314,53316,53318,53320,53322,53324],{"class":222,"line":389},[220,53315,1735],{"class":260},[220,53317,1738],{"class":420},[220,53319,1741],{"class":260},[220,53321,1744],{"class":260},[220,53323,1747],{"class":226},[220,53325,1750],{"class":264},[220,53327,53328],{"class":222,"line":399},[220,53329,1765],{"class":264},[220,53331,53332,53334,53337],{"class":222,"line":644},[220,53333,1770],{"class":264},[220,53335,53336],{"class":230},"'HTMLInCanvas'",[220,53338,2465],{"class":264},[220,53340,53341],{"class":222,"line":650},[220,53342,1787],{"class":264},[220,53344,53345],{"class":222,"line":656},[220,53346,1792],{"class":264},[1504,53348,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":53350},[53351],{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":53159,"description":53167},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":53358,"title":53359,"body":53360,"category":32666,"componentType":25740,"description":53367,"extension":191,"meta":53628,"navigation":194,"path":53629,"requiresChild":194,"seo":53630,"stem":53631,"__hash__":53632},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":53361,"toc":53624},[53362,53365,53368,53370,53372,53375,53377,53622],[11,53363,53359],{"id":53364},"halftone",[15,53366,53367],{},"Halftone dot pattern effect for printing aesthetics",[31771,53369],{"component":53359},[23,53371,31775],{"id":26391},[31777,53373],{":props":53374},"[{\"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,53376,31783],{"id":31782},[246,53378,53379,53424,53468,53512,53556],{":tabs":1557},[212,53380,53382],{"className":334,"code":53381,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,53383,53384,53392,53400,53408,53416],{"__ignoreMap":178},[220,53385,53386,53388,53390],{"class":222,"line":223},[220,53387,343],{"class":264},[220,53389,347],{"class":346},[220,53391,359],{"class":264},[220,53393,53394,53396,53398],{"class":222,"line":179},[220,53395,364],{"class":264},[220,53397,53359],{"class":346},[220,53399,359],{"class":264},[220,53401,53402,53404,53406],{"class":222,"line":389},[220,53403,2550],{"class":264},[220,53405,2553],{"class":346},[220,53407,386],{"class":264},[220,53409,53410,53412,53414],{"class":222,"line":399},[220,53411,2567],{"class":264},[220,53413,53359],{"class":346},[220,53415,359],{"class":264},[220,53417,53418,53420,53422],{"class":222,"line":644},[220,53419,402],{"class":264},[220,53421,347],{"class":346},[220,53423,359],{"class":264},[212,53425,53426],{"className":409,"code":53381,"language":411,"meta":178,"style":178},[99,53427,53428,53436,53444,53452,53460],{"__ignoreMap":178},[220,53429,53430,53432,53434],{"class":222,"line":223},[220,53431,343],{"class":264},[220,53433,347],{"class":420},[220,53435,359],{"class":264},[220,53437,53438,53440,53442],{"class":222,"line":179},[220,53439,364],{"class":264},[220,53441,53359],{"class":420},[220,53443,359],{"class":264},[220,53445,53446,53448,53450],{"class":222,"line":389},[220,53447,2550],{"class":264},[220,53449,2553],{"class":420},[220,53451,386],{"class":264},[220,53453,53454,53456,53458],{"class":222,"line":399},[220,53455,2567],{"class":264},[220,53457,53359],{"class":420},[220,53459,359],{"class":264},[220,53461,53462,53464,53466],{"class":222,"line":644},[220,53463,402],{"class":264},[220,53465,347],{"class":420},[220,53467,359],{"class":264},[212,53469,53470],{"className":2844,"code":53381,"language":2846,"meta":178,"style":178},[99,53471,53472,53480,53488,53496,53504],{"__ignoreMap":178},[220,53473,53474,53476,53478],{"class":222,"line":223},[220,53475,343],{"class":264},[220,53477,347],{"class":420},[220,53479,359],{"class":264},[220,53481,53482,53484,53486],{"class":222,"line":179},[220,53483,364],{"class":264},[220,53485,53359],{"class":420},[220,53487,359],{"class":264},[220,53489,53490,53492,53494],{"class":222,"line":389},[220,53491,2550],{"class":264},[220,53493,2553],{"class":420},[220,53495,386],{"class":264},[220,53497,53498,53500,53502],{"class":222,"line":399},[220,53499,2567],{"class":264},[220,53501,53359],{"class":420},[220,53503,359],{"class":264},[220,53505,53506,53508,53510],{"class":222,"line":644},[220,53507,402],{"class":264},[220,53509,347],{"class":420},[220,53511,359],{"class":264},[212,53513,53514],{"className":468,"code":53381,"language":469,"meta":178,"style":178},[99,53515,53516,53524,53532,53540,53548],{"__ignoreMap":178},[220,53517,53518,53520,53522],{"class":222,"line":223},[220,53519,343],{"class":264},[220,53521,347],{"class":420},[220,53523,359],{"class":264},[220,53525,53526,53528,53530],{"class":222,"line":179},[220,53527,364],{"class":264},[220,53529,53359],{"class":420},[220,53531,359],{"class":264},[220,53533,53534,53536,53538],{"class":222,"line":389},[220,53535,2550],{"class":264},[220,53537,2553],{"class":420},[220,53539,386],{"class":264},[220,53541,53542,53544,53546],{"class":222,"line":399},[220,53543,2567],{"class":264},[220,53545,53359],{"class":420},[220,53547,359],{"class":264},[220,53549,53550,53552,53554],{"class":222,"line":644},[220,53551,402],{"class":264},[220,53553,347],{"class":420},[220,53555,359],{"class":264},[212,53557,53559],{"className":251,"code":53558,"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,53560,53561,53571,53575,53589,53593,53602,53610,53614,53618],{"__ignoreMap":178},[220,53562,53563,53565,53567,53569],{"class":222,"line":223},[220,53564,261],{"class":260},[220,53566,11364],{"class":264},[220,53568,268],{"class":260},[220,53570,11369],{"class":230},[220,53572,53573],{"class":222,"line":179},[220,53574,647],{"emptyLinePlaceholder":194},[220,53576,53577,53579,53581,53583,53585,53587],{"class":222,"line":389},[220,53578,1735],{"class":260},[220,53580,1738],{"class":420},[220,53582,1741],{"class":260},[220,53584,1744],{"class":260},[220,53586,1747],{"class":226},[220,53588,1750],{"class":264},[220,53590,53591],{"class":222,"line":399},[220,53592,1765],{"class":264},[220,53594,53595,53597,53600],{"class":222,"line":644},[220,53596,1770],{"class":264},[220,53598,53599],{"class":230},"'Halftone'",[220,53601,6860],{"class":264},[220,53603,53604,53606,53608],{"class":222,"line":650},[220,53605,6865],{"class":264},[220,53607,6409],{"class":230},[220,53609,2465],{"class":264},[220,53611,53612],{"class":222,"line":656},[220,53613,6882],{"class":264},[220,53615,53616],{"class":222,"line":673},[220,53617,1787],{"class":264},[220,53619,53620],{"class":222,"line":682},[220,53621,1792],{"class":264},[1504,53623,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":53625},[53626,53627],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":53359,"description":53367},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":53634,"title":53635,"body":53636,"category":15765,"componentType":25734,"description":53643,"extension":191,"meta":53922,"navigation":194,"path":53923,"requiresChild":32390,"seo":53924,"stem":53925,"__hash__":53926},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":53637,"toc":53918},[53638,53641,53644,53646,53648,53651,53653,53916],[11,53639,53635],{"id":53640},"heart",[15,53642,53643],{},"Heart shape with adjustable size",[31771,53645],{"component":53635},[23,53647,31775],{"id":26391},[31777,53649],{":props":53650},"[{\"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,53652,31783],{"id":31782},[246,53654,53655,53704,53756,53804,53854],{":tabs":1557},[212,53656,53658],{"className":334,"code":53657,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,53659,53660,53668,53675,53683,53692,53696],{"__ignoreMap":178},[220,53661,53662,53664,53666],{"class":222,"line":223},[220,53663,343],{"class":264},[220,53665,347],{"class":346},[220,53667,359],{"class":264},[220,53669,53670,53672],{"class":222,"line":179},[220,53671,364],{"class":264},[220,53673,53674],{"class":346},"Heart\n",[220,53676,53677,53679,53681],{"class":222,"line":389},[220,53678,9487],{"class":226},[220,53680,353],{"class":264},[220,53682,9443],{"class":230},[220,53684,53685,53687,53689],{"class":222,"line":399},[220,53686,17262],{"class":226},[220,53688,353],{"class":264},[220,53690,53691],{"class":230},"\"0.32\"\n",[220,53693,53694],{"class":222,"line":644},[220,53695,1234],{"class":264},[220,53697,53698,53700,53702],{"class":222,"line":650},[220,53699,402],{"class":264},[220,53701,347],{"class":346},[220,53703,359],{"class":264},[212,53705,53707],{"className":409,"code":53706,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53708,53709,53717,53723,53731,53744,53748],{"__ignoreMap":178},[220,53710,53711,53713,53715],{"class":222,"line":223},[220,53712,343],{"class":264},[220,53714,347],{"class":420},[220,53716,359],{"class":264},[220,53718,53719,53721],{"class":222,"line":179},[220,53720,364],{"class":264},[220,53722,53674],{"class":420},[220,53724,53725,53727,53729],{"class":222,"line":389},[220,53726,9487],{"class":226},[220,53728,353],{"class":260},[220,53730,9443],{"class":230},[220,53732,53733,53735,53737,53739,53742],{"class":222,"line":399},[220,53734,9497],{"class":226},[220,53736,353],{"class":260},[220,53738,743],{"class":264},[220,53740,53741],{"class":420},"0.32",[220,53743,749],{"class":264},[220,53745,53746],{"class":222,"line":644},[220,53747,1234],{"class":264},[220,53749,53750,53752,53754],{"class":222,"line":650},[220,53751,402],{"class":264},[220,53753,347],{"class":420},[220,53755,359],{"class":264},[212,53757,53758],{"className":2844,"code":53706,"language":2846,"meta":178,"style":178},[99,53759,53760,53768,53774,53782,53792,53796],{"__ignoreMap":178},[220,53761,53762,53764,53766],{"class":222,"line":223},[220,53763,343],{"class":264},[220,53765,347],{"class":420},[220,53767,359],{"class":264},[220,53769,53770,53772],{"class":222,"line":179},[220,53771,364],{"class":264},[220,53773,53674],{"class":420},[220,53775,53776,53778,53780],{"class":222,"line":389},[220,53777,9487],{"class":226},[220,53779,353],{"class":264},[220,53781,9443],{"class":230},[220,53783,53784,53786,53788,53790],{"class":222,"line":399},[220,53785,9497],{"class":226},[220,53787,29729],{"class":264},[220,53789,53741],{"class":420},[220,53791,749],{"class":264},[220,53793,53794],{"class":222,"line":644},[220,53795,1234],{"class":264},[220,53797,53798,53800,53802],{"class":222,"line":650},[220,53799,402],{"class":264},[220,53801,347],{"class":420},[220,53803,359],{"class":264},[212,53805,53806],{"className":468,"code":53706,"language":469,"meta":178,"style":178},[99,53807,53808,53816,53822,53830,53842,53846],{"__ignoreMap":178},[220,53809,53810,53812,53814],{"class":222,"line":223},[220,53811,343],{"class":264},[220,53813,347],{"class":420},[220,53815,359],{"class":264},[220,53817,53818,53820],{"class":222,"line":179},[220,53819,364],{"class":264},[220,53821,53674],{"class":420},[220,53823,53824,53826,53828],{"class":222,"line":389},[220,53825,9487],{"class":226},[220,53827,353],{"class":260},[220,53829,9443],{"class":230},[220,53831,53832,53834,53836,53838,53840],{"class":222,"line":399},[220,53833,9497],{"class":226},[220,53835,353],{"class":260},[220,53837,743],{"class":264},[220,53839,53741],{"class":420},[220,53841,749],{"class":264},[220,53843,53844],{"class":222,"line":644},[220,53845,1234],{"class":264},[220,53847,53848,53850,53852],{"class":222,"line":650},[220,53849,402],{"class":264},[220,53851,347],{"class":420},[220,53853,359],{"class":264},[212,53855,53857],{"className":251,"code":53856,"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,53858,53859,53869,53873,53887,53891,53908,53912],{"__ignoreMap":178},[220,53860,53861,53863,53865,53867],{"class":222,"line":223},[220,53862,261],{"class":260},[220,53864,11364],{"class":264},[220,53866,268],{"class":260},[220,53868,11369],{"class":230},[220,53870,53871],{"class":222,"line":179},[220,53872,647],{"emptyLinePlaceholder":194},[220,53874,53875,53877,53879,53881,53883,53885],{"class":222,"line":389},[220,53876,1735],{"class":260},[220,53878,1738],{"class":420},[220,53880,1741],{"class":260},[220,53882,1744],{"class":260},[220,53884,1747],{"class":226},[220,53886,1750],{"class":264},[220,53888,53889],{"class":222,"line":399},[220,53890,1765],{"class":264},[220,53892,53893,53895,53898,53900,53902,53904,53906],{"class":222,"line":644},[220,53894,1770],{"class":264},[220,53896,53897],{"class":230},"'Heart'",[220,53899,1776],{"class":264},[220,53901,10021],{"class":230},[220,53903,6417],{"class":264},[220,53905,53741],{"class":420},[220,53907,1782],{"class":264},[220,53909,53910],{"class":222,"line":650},[220,53911,1787],{"class":264},[220,53913,53914],{"class":222,"line":656},[220,53915,1792],{"class":264},[1504,53917,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53919},[53920,53921],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":53635,"description":53643},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":53928,"title":53929,"body":53930,"category":36429,"componentType":25734,"description":54127,"extension":191,"meta":54128,"navigation":194,"path":54129,"requiresChild":32390,"seo":54130,"stem":54131,"__hash__":54132},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":53931,"toc":54123},[53932,53935,53943,53945,53947,53950,53952,54121],[11,53933,53929],{"id":53934},"heatmap",[15,53936,53937,53938,4685],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,53939,53942],{"href":53940,"rel":53941},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31771,53944],{"component":53929},[23,53946,31775],{"id":26391},[31777,53948],{":props":53949},"[{\"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,53951,31783],{"id":31782},[246,53953,53954,53983,54011,54039,54067],{":tabs":1557},[212,53955,53957],{"className":334,"code":53956,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,53958,53959,53967,53975],{"__ignoreMap":178},[220,53960,53961,53963,53965],{"class":222,"line":223},[220,53962,343],{"class":264},[220,53964,347],{"class":346},[220,53966,359],{"class":264},[220,53968,53969,53971,53973],{"class":222,"line":179},[220,53970,364],{"class":264},[220,53972,53929],{"class":346},[220,53974,386],{"class":264},[220,53976,53977,53979,53981],{"class":222,"line":389},[220,53978,402],{"class":264},[220,53980,347],{"class":346},[220,53982,359],{"class":264},[212,53984,53985],{"className":409,"code":53956,"language":411,"meta":178,"style":178},[99,53986,53987,53995,54003],{"__ignoreMap":178},[220,53988,53989,53991,53993],{"class":222,"line":223},[220,53990,343],{"class":264},[220,53992,347],{"class":420},[220,53994,359],{"class":264},[220,53996,53997,53999,54001],{"class":222,"line":179},[220,53998,364],{"class":264},[220,54000,53929],{"class":420},[220,54002,386],{"class":264},[220,54004,54005,54007,54009],{"class":222,"line":389},[220,54006,402],{"class":264},[220,54008,347],{"class":420},[220,54010,359],{"class":264},[212,54012,54013],{"className":2844,"code":53956,"language":2846,"meta":178,"style":178},[99,54014,54015,54023,54031],{"__ignoreMap":178},[220,54016,54017,54019,54021],{"class":222,"line":223},[220,54018,343],{"class":264},[220,54020,347],{"class":420},[220,54022,359],{"class":264},[220,54024,54025,54027,54029],{"class":222,"line":179},[220,54026,364],{"class":264},[220,54028,53929],{"class":420},[220,54030,386],{"class":264},[220,54032,54033,54035,54037],{"class":222,"line":389},[220,54034,402],{"class":264},[220,54036,347],{"class":420},[220,54038,359],{"class":264},[212,54040,54041],{"className":468,"code":53956,"language":469,"meta":178,"style":178},[99,54042,54043,54051,54059],{"__ignoreMap":178},[220,54044,54045,54047,54049],{"class":222,"line":223},[220,54046,343],{"class":264},[220,54048,347],{"class":420},[220,54050,359],{"class":264},[220,54052,54053,54055,54057],{"class":222,"line":179},[220,54054,364],{"class":264},[220,54056,53929],{"class":420},[220,54058,386],{"class":264},[220,54060,54061,54063,54065],{"class":222,"line":389},[220,54062,402],{"class":264},[220,54064,347],{"class":420},[220,54066,359],{"class":264},[212,54068,54070],{"className":251,"code":54069,"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,54071,54072,54082,54086,54100,54104,54113,54117],{"__ignoreMap":178},[220,54073,54074,54076,54078,54080],{"class":222,"line":223},[220,54075,261],{"class":260},[220,54077,11364],{"class":264},[220,54079,268],{"class":260},[220,54081,11369],{"class":230},[220,54083,54084],{"class":222,"line":179},[220,54085,647],{"emptyLinePlaceholder":194},[220,54087,54088,54090,54092,54094,54096,54098],{"class":222,"line":389},[220,54089,1735],{"class":260},[220,54091,1738],{"class":420},[220,54093,1741],{"class":260},[220,54095,1744],{"class":260},[220,54097,1747],{"class":226},[220,54099,1750],{"class":264},[220,54101,54102],{"class":222,"line":399},[220,54103,1765],{"class":264},[220,54105,54106,54108,54111],{"class":222,"line":644},[220,54107,1770],{"class":264},[220,54109,54110],{"class":230},"'Heatmap'",[220,54112,2465],{"class":264},[220,54114,54115],{"class":222,"line":650},[220,54116,1787],{"class":264},[220,54118,54119],{"class":222,"line":656},[220,54120,1792],{"class":264},[1504,54122,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":54124},[54125,54126],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":53929,"description":54127},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":54134,"title":54135,"body":54136,"category":32923,"componentType":25734,"description":54143,"extension":191,"meta":54328,"navigation":194,"path":54329,"requiresChild":32390,"seo":54330,"stem":54331,"__hash__":54332},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":54137,"toc":54324},[54138,54141,54144,54146,54148,54151,54153,54322],[11,54139,54135],{"id":54140},"hexgrid",[15,54142,54143],{},"Honeycomb hexagonal grid pattern",[31771,54145],{"component":54135},[23,54147,31775],{"id":26391},[31777,54149],{":props":54150},"[{\"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,54152,31783],{"id":31782},[246,54154,54155,54184,54212,54240,54268],{":tabs":1557},[212,54156,54158],{"className":334,"code":54157,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,54159,54160,54168,54176],{"__ignoreMap":178},[220,54161,54162,54164,54166],{"class":222,"line":223},[220,54163,343],{"class":264},[220,54165,347],{"class":346},[220,54167,359],{"class":264},[220,54169,54170,54172,54174],{"class":222,"line":179},[220,54171,364],{"class":264},[220,54173,54135],{"class":346},[220,54175,386],{"class":264},[220,54177,54178,54180,54182],{"class":222,"line":389},[220,54179,402],{"class":264},[220,54181,347],{"class":346},[220,54183,359],{"class":264},[212,54185,54186],{"className":409,"code":54157,"language":411,"meta":178,"style":178},[99,54187,54188,54196,54204],{"__ignoreMap":178},[220,54189,54190,54192,54194],{"class":222,"line":223},[220,54191,343],{"class":264},[220,54193,347],{"class":420},[220,54195,359],{"class":264},[220,54197,54198,54200,54202],{"class":222,"line":179},[220,54199,364],{"class":264},[220,54201,54135],{"class":420},[220,54203,386],{"class":264},[220,54205,54206,54208,54210],{"class":222,"line":389},[220,54207,402],{"class":264},[220,54209,347],{"class":420},[220,54211,359],{"class":264},[212,54213,54214],{"className":2844,"code":54157,"language":2846,"meta":178,"style":178},[99,54215,54216,54224,54232],{"__ignoreMap":178},[220,54217,54218,54220,54222],{"class":222,"line":223},[220,54219,343],{"class":264},[220,54221,347],{"class":420},[220,54223,359],{"class":264},[220,54225,54226,54228,54230],{"class":222,"line":179},[220,54227,364],{"class":264},[220,54229,54135],{"class":420},[220,54231,386],{"class":264},[220,54233,54234,54236,54238],{"class":222,"line":389},[220,54235,402],{"class":264},[220,54237,347],{"class":420},[220,54239,359],{"class":264},[212,54241,54242],{"className":468,"code":54157,"language":469,"meta":178,"style":178},[99,54243,54244,54252,54260],{"__ignoreMap":178},[220,54245,54246,54248,54250],{"class":222,"line":223},[220,54247,343],{"class":264},[220,54249,347],{"class":420},[220,54251,359],{"class":264},[220,54253,54254,54256,54258],{"class":222,"line":179},[220,54255,364],{"class":264},[220,54257,54135],{"class":420},[220,54259,386],{"class":264},[220,54261,54262,54264,54266],{"class":222,"line":389},[220,54263,402],{"class":264},[220,54265,347],{"class":420},[220,54267,359],{"class":264},[212,54269,54271],{"className":251,"code":54270,"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,54272,54273,54283,54287,54301,54305,54314,54318],{"__ignoreMap":178},[220,54274,54275,54277,54279,54281],{"class":222,"line":223},[220,54276,261],{"class":260},[220,54278,11364],{"class":264},[220,54280,268],{"class":260},[220,54282,11369],{"class":230},[220,54284,54285],{"class":222,"line":179},[220,54286,647],{"emptyLinePlaceholder":194},[220,54288,54289,54291,54293,54295,54297,54299],{"class":222,"line":389},[220,54290,1735],{"class":260},[220,54292,1738],{"class":420},[220,54294,1741],{"class":260},[220,54296,1744],{"class":260},[220,54298,1747],{"class":226},[220,54300,1750],{"class":264},[220,54302,54303],{"class":222,"line":399},[220,54304,1765],{"class":264},[220,54306,54307,54309,54312],{"class":222,"line":644},[220,54308,1770],{"class":264},[220,54310,54311],{"class":230},"'HexGrid'",[220,54313,2465],{"class":264},[220,54315,54316],{"class":222,"line":650},[220,54317,1787],{"class":264},[220,54319,54320],{"class":222,"line":656},[220,54321,1792],{"class":264},[1504,54323,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":54325},[54326,54327],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":54135,"description":54143},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":54334,"title":54335,"body":54336,"category":36429,"componentType":25734,"description":54343,"extension":191,"meta":54575,"navigation":194,"path":54576,"requiresChild":32390,"seo":54577,"stem":54578,"__hash__":54579},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":54337,"toc":54571},[54338,54341,54344,54346,54348,54351,54353,54569],[11,54339,54335],{"id":54340},"hologram",[15,54342,54343],{},"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",[31771,54345],{"component":54335},[23,54347,31775],{"id":26391},[31777,54349],{":props":54350},"[{\"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,54352,31783],{"id":31782},[246,54354,54355,54396,54434,54472,54510],{":tabs":1557},[212,54356,54358],{"className":334,"code":54357,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,54359,54360,54368,54375,54384,54388],{"__ignoreMap":178},[220,54361,54362,54364,54366],{"class":222,"line":223},[220,54363,343],{"class":264},[220,54365,347],{"class":346},[220,54367,359],{"class":264},[220,54369,54370,54372],{"class":222,"line":179},[220,54371,364],{"class":264},[220,54373,54374],{"class":346},"Hologram\n",[220,54376,54377,54379,54381],{"class":222,"line":389},[220,54378,9487],{"class":226},[220,54380,353],{"class":264},[220,54382,54383],{"class":230},"\"#5ec8ff\"\n",[220,54385,54386],{"class":222,"line":399},[220,54387,1234],{"class":264},[220,54389,54390,54392,54394],{"class":222,"line":644},[220,54391,402],{"class":264},[220,54393,347],{"class":346},[220,54395,359],{"class":264},[212,54397,54398],{"className":409,"code":54357,"language":411,"meta":178,"style":178},[99,54399,54400,54408,54414,54422,54426],{"__ignoreMap":178},[220,54401,54402,54404,54406],{"class":222,"line":223},[220,54403,343],{"class":264},[220,54405,347],{"class":420},[220,54407,359],{"class":264},[220,54409,54410,54412],{"class":222,"line":179},[220,54411,364],{"class":264},[220,54413,54374],{"class":420},[220,54415,54416,54418,54420],{"class":222,"line":389},[220,54417,9487],{"class":226},[220,54419,353],{"class":260},[220,54421,54383],{"class":230},[220,54423,54424],{"class":222,"line":399},[220,54425,1234],{"class":264},[220,54427,54428,54430,54432],{"class":222,"line":644},[220,54429,402],{"class":264},[220,54431,347],{"class":420},[220,54433,359],{"class":264},[212,54435,54436],{"className":2844,"code":54357,"language":2846,"meta":178,"style":178},[99,54437,54438,54446,54452,54460,54464],{"__ignoreMap":178},[220,54439,54440,54442,54444],{"class":222,"line":223},[220,54441,343],{"class":264},[220,54443,347],{"class":420},[220,54445,359],{"class":264},[220,54447,54448,54450],{"class":222,"line":179},[220,54449,364],{"class":264},[220,54451,54374],{"class":420},[220,54453,54454,54456,54458],{"class":222,"line":389},[220,54455,9487],{"class":226},[220,54457,353],{"class":264},[220,54459,54383],{"class":230},[220,54461,54462],{"class":222,"line":399},[220,54463,1234],{"class":264},[220,54465,54466,54468,54470],{"class":222,"line":644},[220,54467,402],{"class":264},[220,54469,347],{"class":420},[220,54471,359],{"class":264},[212,54473,54474],{"className":468,"code":54357,"language":469,"meta":178,"style":178},[99,54475,54476,54484,54490,54498,54502],{"__ignoreMap":178},[220,54477,54478,54480,54482],{"class":222,"line":223},[220,54479,343],{"class":264},[220,54481,347],{"class":420},[220,54483,359],{"class":264},[220,54485,54486,54488],{"class":222,"line":179},[220,54487,364],{"class":264},[220,54489,54374],{"class":420},[220,54491,54492,54494,54496],{"class":222,"line":389},[220,54493,9487],{"class":226},[220,54495,353],{"class":260},[220,54497,54383],{"class":230},[220,54499,54500],{"class":222,"line":399},[220,54501,1234],{"class":264},[220,54503,54504,54506,54508],{"class":222,"line":644},[220,54505,402],{"class":264},[220,54507,347],{"class":420},[220,54509,359],{"class":264},[212,54511,54513],{"className":251,"code":54512,"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,54514,54515,54525,54529,54543,54547,54561,54565],{"__ignoreMap":178},[220,54516,54517,54519,54521,54523],{"class":222,"line":223},[220,54518,261],{"class":260},[220,54520,11364],{"class":264},[220,54522,268],{"class":260},[220,54524,11369],{"class":230},[220,54526,54527],{"class":222,"line":179},[220,54528,647],{"emptyLinePlaceholder":194},[220,54530,54531,54533,54535,54537,54539,54541],{"class":222,"line":389},[220,54532,1735],{"class":260},[220,54534,1738],{"class":420},[220,54536,1741],{"class":260},[220,54538,1744],{"class":260},[220,54540,1747],{"class":226},[220,54542,1750],{"class":264},[220,54544,54545],{"class":222,"line":399},[220,54546,1765],{"class":264},[220,54548,54549,54551,54554,54556,54559],{"class":222,"line":644},[220,54550,1770],{"class":264},[220,54552,54553],{"class":230},"'Hologram'",[220,54555,1776],{"class":264},[220,54557,54558],{"class":230},"'#5ec8ff'",[220,54560,1782],{"class":264},[220,54562,54563],{"class":222,"line":650},[220,54564,1787],{"class":264},[220,54566,54567],{"class":222,"line":656},[220,54568,1792],{"class":264},[1504,54570,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54572},[54573,54574],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":54335,"description":54343},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":54581,"title":54582,"body":54583,"category":36429,"componentType":25734,"description":54590,"extension":191,"meta":54775,"navigation":194,"path":54776,"requiresChild":32390,"seo":54777,"stem":54778,"__hash__":54779},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":54584,"toc":54771},[54585,54588,54591,54593,54595,54598,54600,54769],[11,54586,54582],{"id":54587},"holographic",[15,54589,54590],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31771,54592],{"component":54582},[23,54594,31775],{"id":26391},[31777,54596],{":props":54597},"[{\"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,54599,31783],{"id":31782},[246,54601,54602,54631,54659,54687,54715],{":tabs":1557},[212,54603,54605],{"className":334,"code":54604,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,54606,54607,54615,54623],{"__ignoreMap":178},[220,54608,54609,54611,54613],{"class":222,"line":223},[220,54610,343],{"class":264},[220,54612,347],{"class":346},[220,54614,359],{"class":264},[220,54616,54617,54619,54621],{"class":222,"line":179},[220,54618,364],{"class":264},[220,54620,54582],{"class":346},[220,54622,386],{"class":264},[220,54624,54625,54627,54629],{"class":222,"line":389},[220,54626,402],{"class":264},[220,54628,347],{"class":346},[220,54630,359],{"class":264},[212,54632,54633],{"className":409,"code":54604,"language":411,"meta":178,"style":178},[99,54634,54635,54643,54651],{"__ignoreMap":178},[220,54636,54637,54639,54641],{"class":222,"line":223},[220,54638,343],{"class":264},[220,54640,347],{"class":420},[220,54642,359],{"class":264},[220,54644,54645,54647,54649],{"class":222,"line":179},[220,54646,364],{"class":264},[220,54648,54582],{"class":420},[220,54650,386],{"class":264},[220,54652,54653,54655,54657],{"class":222,"line":389},[220,54654,402],{"class":264},[220,54656,347],{"class":420},[220,54658,359],{"class":264},[212,54660,54661],{"className":2844,"code":54604,"language":2846,"meta":178,"style":178},[99,54662,54663,54671,54679],{"__ignoreMap":178},[220,54664,54665,54667,54669],{"class":222,"line":223},[220,54666,343],{"class":264},[220,54668,347],{"class":420},[220,54670,359],{"class":264},[220,54672,54673,54675,54677],{"class":222,"line":179},[220,54674,364],{"class":264},[220,54676,54582],{"class":420},[220,54678,386],{"class":264},[220,54680,54681,54683,54685],{"class":222,"line":389},[220,54682,402],{"class":264},[220,54684,347],{"class":420},[220,54686,359],{"class":264},[212,54688,54689],{"className":468,"code":54604,"language":469,"meta":178,"style":178},[99,54690,54691,54699,54707],{"__ignoreMap":178},[220,54692,54693,54695,54697],{"class":222,"line":223},[220,54694,343],{"class":264},[220,54696,347],{"class":420},[220,54698,359],{"class":264},[220,54700,54701,54703,54705],{"class":222,"line":179},[220,54702,364],{"class":264},[220,54704,54582],{"class":420},[220,54706,386],{"class":264},[220,54708,54709,54711,54713],{"class":222,"line":389},[220,54710,402],{"class":264},[220,54712,347],{"class":420},[220,54714,359],{"class":264},[212,54716,54718],{"className":251,"code":54717,"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,54719,54720,54730,54734,54748,54752,54761,54765],{"__ignoreMap":178},[220,54721,54722,54724,54726,54728],{"class":222,"line":223},[220,54723,261],{"class":260},[220,54725,11364],{"class":264},[220,54727,268],{"class":260},[220,54729,11369],{"class":230},[220,54731,54732],{"class":222,"line":179},[220,54733,647],{"emptyLinePlaceholder":194},[220,54735,54736,54738,54740,54742,54744,54746],{"class":222,"line":389},[220,54737,1735],{"class":260},[220,54739,1738],{"class":420},[220,54741,1741],{"class":260},[220,54743,1744],{"class":260},[220,54745,1747],{"class":226},[220,54747,1750],{"class":264},[220,54749,54750],{"class":222,"line":399},[220,54751,1765],{"class":264},[220,54753,54754,54756,54759],{"class":222,"line":644},[220,54755,1770],{"class":264},[220,54757,54758],{"class":230},"'Holographic'",[220,54760,2465],{"class":264},[220,54762,54763],{"class":222,"line":650},[220,54764,1787],{"class":264},[220,54766,54767],{"class":222,"line":656},[220,54768,1792],{"class":264},[1504,54770,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":54772},[54773,54774],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":54582,"description":54590},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54781,"title":54782,"body":54783,"category":36228,"componentType":25740,"description":54790,"extension":191,"meta":55051,"navigation":194,"path":55052,"requiresChild":194,"seo":55053,"stem":55054,"__hash__":55055},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54784,"toc":55047},[54785,54788,54791,54793,54795,54798,54800,55045],[11,54786,54782],{"id":54787},"hueshift",[15,54789,54790],{},"Rotate hue around the color wheel",[31771,54792],{"component":54782},[23,54794,31775],{"id":26391},[31777,54796],{":props":54797},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54799,31783],{"id":31782},[246,54801,54802,54847,54891,54935,54979],{":tabs":1557},[212,54803,54805],{"className":334,"code":54804,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54806,54807,54815,54823,54831,54839],{"__ignoreMap":178},[220,54808,54809,54811,54813],{"class":222,"line":223},[220,54810,343],{"class":264},[220,54812,347],{"class":346},[220,54814,359],{"class":264},[220,54816,54817,54819,54821],{"class":222,"line":179},[220,54818,364],{"class":264},[220,54820,54782],{"class":346},[220,54822,359],{"class":264},[220,54824,54825,54827,54829],{"class":222,"line":389},[220,54826,2550],{"class":264},[220,54828,2553],{"class":346},[220,54830,386],{"class":264},[220,54832,54833,54835,54837],{"class":222,"line":399},[220,54834,2567],{"class":264},[220,54836,54782],{"class":346},[220,54838,359],{"class":264},[220,54840,54841,54843,54845],{"class":222,"line":644},[220,54842,402],{"class":264},[220,54844,347],{"class":346},[220,54846,359],{"class":264},[212,54848,54849],{"className":409,"code":54804,"language":411,"meta":178,"style":178},[99,54850,54851,54859,54867,54875,54883],{"__ignoreMap":178},[220,54852,54853,54855,54857],{"class":222,"line":223},[220,54854,343],{"class":264},[220,54856,347],{"class":420},[220,54858,359],{"class":264},[220,54860,54861,54863,54865],{"class":222,"line":179},[220,54862,364],{"class":264},[220,54864,54782],{"class":420},[220,54866,359],{"class":264},[220,54868,54869,54871,54873],{"class":222,"line":389},[220,54870,2550],{"class":264},[220,54872,2553],{"class":420},[220,54874,386],{"class":264},[220,54876,54877,54879,54881],{"class":222,"line":399},[220,54878,2567],{"class":264},[220,54880,54782],{"class":420},[220,54882,359],{"class":264},[220,54884,54885,54887,54889],{"class":222,"line":644},[220,54886,402],{"class":264},[220,54888,347],{"class":420},[220,54890,359],{"class":264},[212,54892,54893],{"className":2844,"code":54804,"language":2846,"meta":178,"style":178},[99,54894,54895,54903,54911,54919,54927],{"__ignoreMap":178},[220,54896,54897,54899,54901],{"class":222,"line":223},[220,54898,343],{"class":264},[220,54900,347],{"class":420},[220,54902,359],{"class":264},[220,54904,54905,54907,54909],{"class":222,"line":179},[220,54906,364],{"class":264},[220,54908,54782],{"class":420},[220,54910,359],{"class":264},[220,54912,54913,54915,54917],{"class":222,"line":389},[220,54914,2550],{"class":264},[220,54916,2553],{"class":420},[220,54918,386],{"class":264},[220,54920,54921,54923,54925],{"class":222,"line":399},[220,54922,2567],{"class":264},[220,54924,54782],{"class":420},[220,54926,359],{"class":264},[220,54928,54929,54931,54933],{"class":222,"line":644},[220,54930,402],{"class":264},[220,54932,347],{"class":420},[220,54934,359],{"class":264},[212,54936,54937],{"className":468,"code":54804,"language":469,"meta":178,"style":178},[99,54938,54939,54947,54955,54963,54971],{"__ignoreMap":178},[220,54940,54941,54943,54945],{"class":222,"line":223},[220,54942,343],{"class":264},[220,54944,347],{"class":420},[220,54946,359],{"class":264},[220,54948,54949,54951,54953],{"class":222,"line":179},[220,54950,364],{"class":264},[220,54952,54782],{"class":420},[220,54954,359],{"class":264},[220,54956,54957,54959,54961],{"class":222,"line":389},[220,54958,2550],{"class":264},[220,54960,2553],{"class":420},[220,54962,386],{"class":264},[220,54964,54965,54967,54969],{"class":222,"line":399},[220,54966,2567],{"class":264},[220,54968,54782],{"class":420},[220,54970,359],{"class":264},[220,54972,54973,54975,54977],{"class":222,"line":644},[220,54974,402],{"class":264},[220,54976,347],{"class":420},[220,54978,359],{"class":264},[212,54980,54982],{"className":251,"code":54981,"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,54983,54984,54994,54998,55012,55016,55025,55033,55037,55041],{"__ignoreMap":178},[220,54985,54986,54988,54990,54992],{"class":222,"line":223},[220,54987,261],{"class":260},[220,54989,11364],{"class":264},[220,54991,268],{"class":260},[220,54993,11369],{"class":230},[220,54995,54996],{"class":222,"line":179},[220,54997,647],{"emptyLinePlaceholder":194},[220,54999,55000,55002,55004,55006,55008,55010],{"class":222,"line":389},[220,55001,1735],{"class":260},[220,55003,1738],{"class":420},[220,55005,1741],{"class":260},[220,55007,1744],{"class":260},[220,55009,1747],{"class":226},[220,55011,1750],{"class":264},[220,55013,55014],{"class":222,"line":399},[220,55015,1765],{"class":264},[220,55017,55018,55020,55023],{"class":222,"line":644},[220,55019,1770],{"class":264},[220,55021,55022],{"class":230},"'HueShift'",[220,55024,6860],{"class":264},[220,55026,55027,55029,55031],{"class":222,"line":650},[220,55028,6865],{"class":264},[220,55030,6409],{"class":230},[220,55032,2465],{"class":264},[220,55034,55035],{"class":222,"line":656},[220,55036,6882],{"class":264},[220,55038,55039],{"class":222,"line":673},[220,55040,1787],{"class":264},[220,55042,55043],{"class":222,"line":682},[220,55044,1792],{"class":264},[1504,55046,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":55048},[55049,55050],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54782,"description":54790},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":55057,"title":55058,"body":55059,"category":32923,"componentType":25734,"description":55066,"extension":191,"meta":55251,"navigation":194,"path":55252,"requiresChild":32390,"seo":55253,"stem":55254,"__hash__":55255},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":55060,"toc":55247},[55061,55064,55067,55069,55071,55074,55076,55245],[11,55062,55058],{"id":55063},"imagetexture",[15,55065,55066],{},"Display an image with customizable object-fit modes",[31771,55068],{"component":55058},[23,55070,31775],{"id":26391},[31777,55072],{":props":55073},"[{\"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,55075,31783],{"id":31782},[246,55077,55078,55107,55135,55163,55191],{":tabs":1557},[212,55079,55081],{"className":334,"code":55080,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,55082,55083,55091,55099],{"__ignoreMap":178},[220,55084,55085,55087,55089],{"class":222,"line":223},[220,55086,343],{"class":264},[220,55088,347],{"class":346},[220,55090,359],{"class":264},[220,55092,55093,55095,55097],{"class":222,"line":179},[220,55094,364],{"class":264},[220,55096,55058],{"class":346},[220,55098,386],{"class":264},[220,55100,55101,55103,55105],{"class":222,"line":389},[220,55102,402],{"class":264},[220,55104,347],{"class":346},[220,55106,359],{"class":264},[212,55108,55109],{"className":409,"code":55080,"language":411,"meta":178,"style":178},[99,55110,55111,55119,55127],{"__ignoreMap":178},[220,55112,55113,55115,55117],{"class":222,"line":223},[220,55114,343],{"class":264},[220,55116,347],{"class":420},[220,55118,359],{"class":264},[220,55120,55121,55123,55125],{"class":222,"line":179},[220,55122,364],{"class":264},[220,55124,55058],{"class":420},[220,55126,386],{"class":264},[220,55128,55129,55131,55133],{"class":222,"line":389},[220,55130,402],{"class":264},[220,55132,347],{"class":420},[220,55134,359],{"class":264},[212,55136,55137],{"className":2844,"code":55080,"language":2846,"meta":178,"style":178},[99,55138,55139,55147,55155],{"__ignoreMap":178},[220,55140,55141,55143,55145],{"class":222,"line":223},[220,55142,343],{"class":264},[220,55144,347],{"class":420},[220,55146,359],{"class":264},[220,55148,55149,55151,55153],{"class":222,"line":179},[220,55150,364],{"class":264},[220,55152,55058],{"class":420},[220,55154,386],{"class":264},[220,55156,55157,55159,55161],{"class":222,"line":389},[220,55158,402],{"class":264},[220,55160,347],{"class":420},[220,55162,359],{"class":264},[212,55164,55165],{"className":468,"code":55080,"language":469,"meta":178,"style":178},[99,55166,55167,55175,55183],{"__ignoreMap":178},[220,55168,55169,55171,55173],{"class":222,"line":223},[220,55170,343],{"class":264},[220,55172,347],{"class":420},[220,55174,359],{"class":264},[220,55176,55177,55179,55181],{"class":222,"line":179},[220,55178,364],{"class":264},[220,55180,55058],{"class":420},[220,55182,386],{"class":264},[220,55184,55185,55187,55189],{"class":222,"line":389},[220,55186,402],{"class":264},[220,55188,347],{"class":420},[220,55190,359],{"class":264},[212,55192,55194],{"className":251,"code":55193,"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,55195,55196,55206,55210,55224,55228,55237,55241],{"__ignoreMap":178},[220,55197,55198,55200,55202,55204],{"class":222,"line":223},[220,55199,261],{"class":260},[220,55201,11364],{"class":264},[220,55203,268],{"class":260},[220,55205,11369],{"class":230},[220,55207,55208],{"class":222,"line":179},[220,55209,647],{"emptyLinePlaceholder":194},[220,55211,55212,55214,55216,55218,55220,55222],{"class":222,"line":389},[220,55213,1735],{"class":260},[220,55215,1738],{"class":420},[220,55217,1741],{"class":260},[220,55219,1744],{"class":260},[220,55221,1747],{"class":226},[220,55223,1750],{"class":264},[220,55225,55226],{"class":222,"line":399},[220,55227,1765],{"class":264},[220,55229,55230,55232,55235],{"class":222,"line":644},[220,55231,1770],{"class":264},[220,55233,55234],{"class":230},"'ImageTexture'",[220,55236,2465],{"class":264},[220,55238,55239],{"class":222,"line":650},[220,55240,1787],{"class":264},[220,55242,55243],{"class":222,"line":656},[220,55244,1792],{"class":264},[1504,55246,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":55248},[55249,55250],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":55058,"description":55066},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":55257,"title":55258,"body":55259,"category":35419,"componentType":25734,"description":55266,"extension":191,"meta":55545,"navigation":194,"path":55546,"requiresChild":32390,"seo":55547,"stem":55548,"__hash__":55549},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":55260,"toc":55541},[55261,55264,55267,55269,55271,55274,55276,55539],[11,55262,55258],{"id":55263},"inkflow",[15,55265,55266],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31771,55268],{"component":55258},[23,55270,31775],{"id":26391},[31777,55272],{":props":55273},"[{\"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,55275,31783],{"id":31782},[246,55277,55278,55327,55378,55426,55476],{":tabs":1557},[212,55279,55281],{"className":334,"code":55280,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,55282,55283,55291,55298,55307,55315,55319],{"__ignoreMap":178},[220,55284,55285,55287,55289],{"class":222,"line":223},[220,55286,343],{"class":264},[220,55288,347],{"class":346},[220,55290,359],{"class":264},[220,55292,55293,55295],{"class":222,"line":179},[220,55294,364],{"class":264},[220,55296,55297],{"class":346},"InkFlow\n",[220,55299,55300,55302,55304],{"class":222,"line":389},[220,55301,9487],{"class":226},[220,55303,353],{"class":264},[220,55305,55306],{"class":230},"\"#ff2d7e\"\n",[220,55308,55309,55311,55313],{"class":222,"line":399},[220,55310,17262],{"class":226},[220,55312,353],{"class":264},[220,55314,41158],{"class":230},[220,55316,55317],{"class":222,"line":644},[220,55318,1234],{"class":264},[220,55320,55321,55323,55325],{"class":222,"line":650},[220,55322,402],{"class":264},[220,55324,347],{"class":346},[220,55326,359],{"class":264},[212,55328,55330],{"className":409,"code":55329,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,55331,55332,55340,55346,55354,55366,55370],{"__ignoreMap":178},[220,55333,55334,55336,55338],{"class":222,"line":223},[220,55335,343],{"class":264},[220,55337,347],{"class":420},[220,55339,359],{"class":264},[220,55341,55342,55344],{"class":222,"line":179},[220,55343,364],{"class":264},[220,55345,55297],{"class":420},[220,55347,55348,55350,55352],{"class":222,"line":389},[220,55349,9487],{"class":226},[220,55351,353],{"class":260},[220,55353,55306],{"class":230},[220,55355,55356,55358,55360,55362,55364],{"class":222,"line":399},[220,55357,9497],{"class":226},[220,55359,353],{"class":260},[220,55361,743],{"class":264},[220,55363,21861],{"class":420},[220,55365,749],{"class":264},[220,55367,55368],{"class":222,"line":644},[220,55369,1234],{"class":264},[220,55371,55372,55374,55376],{"class":222,"line":650},[220,55373,402],{"class":264},[220,55375,347],{"class":420},[220,55377,359],{"class":264},[212,55379,55380],{"className":2844,"code":55329,"language":2846,"meta":178,"style":178},[99,55381,55382,55390,55396,55404,55414,55418],{"__ignoreMap":178},[220,55383,55384,55386,55388],{"class":222,"line":223},[220,55385,343],{"class":264},[220,55387,347],{"class":420},[220,55389,359],{"class":264},[220,55391,55392,55394],{"class":222,"line":179},[220,55393,364],{"class":264},[220,55395,55297],{"class":420},[220,55397,55398,55400,55402],{"class":222,"line":389},[220,55399,9487],{"class":226},[220,55401,353],{"class":264},[220,55403,55306],{"class":230},[220,55405,55406,55408,55410,55412],{"class":222,"line":399},[220,55407,9497],{"class":226},[220,55409,29729],{"class":264},[220,55411,21861],{"class":420},[220,55413,749],{"class":264},[220,55415,55416],{"class":222,"line":644},[220,55417,1234],{"class":264},[220,55419,55420,55422,55424],{"class":222,"line":650},[220,55421,402],{"class":264},[220,55423,347],{"class":420},[220,55425,359],{"class":264},[212,55427,55428],{"className":468,"code":55329,"language":469,"meta":178,"style":178},[99,55429,55430,55438,55444,55452,55464,55468],{"__ignoreMap":178},[220,55431,55432,55434,55436],{"class":222,"line":223},[220,55433,343],{"class":264},[220,55435,347],{"class":420},[220,55437,359],{"class":264},[220,55439,55440,55442],{"class":222,"line":179},[220,55441,364],{"class":264},[220,55443,55297],{"class":420},[220,55445,55446,55448,55450],{"class":222,"line":389},[220,55447,9487],{"class":226},[220,55449,353],{"class":260},[220,55451,55306],{"class":230},[220,55453,55454,55456,55458,55460,55462],{"class":222,"line":399},[220,55455,9497],{"class":226},[220,55457,353],{"class":260},[220,55459,743],{"class":264},[220,55461,21861],{"class":420},[220,55463,749],{"class":264},[220,55465,55466],{"class":222,"line":644},[220,55467,1234],{"class":264},[220,55469,55470,55472,55474],{"class":222,"line":650},[220,55471,402],{"class":264},[220,55473,347],{"class":420},[220,55475,359],{"class":264},[212,55477,55479],{"className":251,"code":55478,"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,55480,55481,55491,55495,55509,55513,55531,55535],{"__ignoreMap":178},[220,55482,55483,55485,55487,55489],{"class":222,"line":223},[220,55484,261],{"class":260},[220,55486,11364],{"class":264},[220,55488,268],{"class":260},[220,55490,11369],{"class":230},[220,55492,55493],{"class":222,"line":179},[220,55494,647],{"emptyLinePlaceholder":194},[220,55496,55497,55499,55501,55503,55505,55507],{"class":222,"line":389},[220,55498,1735],{"class":260},[220,55500,1738],{"class":420},[220,55502,1741],{"class":260},[220,55504,1744],{"class":260},[220,55506,1747],{"class":226},[220,55508,1750],{"class":264},[220,55510,55511],{"class":222,"line":399},[220,55512,1765],{"class":264},[220,55514,55515,55517,55520,55522,55525,55527,55529],{"class":222,"line":644},[220,55516,1770],{"class":264},[220,55518,55519],{"class":230},"'InkFlow'",[220,55521,1776],{"class":264},[220,55523,55524],{"class":230},"'#ff2d7e'",[220,55526,6417],{"class":264},[220,55528,21861],{"class":420},[220,55530,1782],{"class":264},[220,55532,55533],{"class":222,"line":650},[220,55534,1787],{"class":264},[220,55536,55537],{"class":222,"line":656},[220,55538,1792],{"class":264},[1504,55540,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55542},[55543,55544],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":55258,"description":55266},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":55551,"title":55552,"body":55553,"category":36228,"componentType":25740,"description":55560,"extension":191,"meta":55815,"navigation":194,"path":55816,"requiresChild":194,"seo":55817,"stem":55818,"__hash__":55819},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":55554,"toc":55812},[55555,55558,55561,55563,55565,55810],[11,55556,55552],{"id":55557},"invert",[15,55559,55560],{},"Invert RGB colors while preserving alpha",[31771,55562],{"component":55552},[23,55564,31783],{"id":31782},[246,55566,55567,55612,55656,55700,55744],{":tabs":1557},[212,55568,55570],{"className":334,"code":55569,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,55571,55572,55580,55588,55596,55604],{"__ignoreMap":178},[220,55573,55574,55576,55578],{"class":222,"line":223},[220,55575,343],{"class":264},[220,55577,347],{"class":346},[220,55579,359],{"class":264},[220,55581,55582,55584,55586],{"class":222,"line":179},[220,55583,364],{"class":264},[220,55585,55552],{"class":346},[220,55587,359],{"class":264},[220,55589,55590,55592,55594],{"class":222,"line":389},[220,55591,2550],{"class":264},[220,55593,2553],{"class":346},[220,55595,386],{"class":264},[220,55597,55598,55600,55602],{"class":222,"line":399},[220,55599,2567],{"class":264},[220,55601,55552],{"class":346},[220,55603,359],{"class":264},[220,55605,55606,55608,55610],{"class":222,"line":644},[220,55607,402],{"class":264},[220,55609,347],{"class":346},[220,55611,359],{"class":264},[212,55613,55614],{"className":409,"code":55569,"language":411,"meta":178,"style":178},[99,55615,55616,55624,55632,55640,55648],{"__ignoreMap":178},[220,55617,55618,55620,55622],{"class":222,"line":223},[220,55619,343],{"class":264},[220,55621,347],{"class":420},[220,55623,359],{"class":264},[220,55625,55626,55628,55630],{"class":222,"line":179},[220,55627,364],{"class":264},[220,55629,55552],{"class":420},[220,55631,359],{"class":264},[220,55633,55634,55636,55638],{"class":222,"line":389},[220,55635,2550],{"class":264},[220,55637,2553],{"class":420},[220,55639,386],{"class":264},[220,55641,55642,55644,55646],{"class":222,"line":399},[220,55643,2567],{"class":264},[220,55645,55552],{"class":420},[220,55647,359],{"class":264},[220,55649,55650,55652,55654],{"class":222,"line":644},[220,55651,402],{"class":264},[220,55653,347],{"class":420},[220,55655,359],{"class":264},[212,55657,55658],{"className":2844,"code":55569,"language":2846,"meta":178,"style":178},[99,55659,55660,55668,55676,55684,55692],{"__ignoreMap":178},[220,55661,55662,55664,55666],{"class":222,"line":223},[220,55663,343],{"class":264},[220,55665,347],{"class":420},[220,55667,359],{"class":264},[220,55669,55670,55672,55674],{"class":222,"line":179},[220,55671,364],{"class":264},[220,55673,55552],{"class":420},[220,55675,359],{"class":264},[220,55677,55678,55680,55682],{"class":222,"line":389},[220,55679,2550],{"class":264},[220,55681,2553],{"class":420},[220,55683,386],{"class":264},[220,55685,55686,55688,55690],{"class":222,"line":399},[220,55687,2567],{"class":264},[220,55689,55552],{"class":420},[220,55691,359],{"class":264},[220,55693,55694,55696,55698],{"class":222,"line":644},[220,55695,402],{"class":264},[220,55697,347],{"class":420},[220,55699,359],{"class":264},[212,55701,55702],{"className":468,"code":55569,"language":469,"meta":178,"style":178},[99,55703,55704,55712,55720,55728,55736],{"__ignoreMap":178},[220,55705,55706,55708,55710],{"class":222,"line":223},[220,55707,343],{"class":264},[220,55709,347],{"class":420},[220,55711,359],{"class":264},[220,55713,55714,55716,55718],{"class":222,"line":179},[220,55715,364],{"class":264},[220,55717,55552],{"class":420},[220,55719,359],{"class":264},[220,55721,55722,55724,55726],{"class":222,"line":389},[220,55723,2550],{"class":264},[220,55725,2553],{"class":420},[220,55727,386],{"class":264},[220,55729,55730,55732,55734],{"class":222,"line":399},[220,55731,2567],{"class":264},[220,55733,55552],{"class":420},[220,55735,359],{"class":264},[220,55737,55738,55740,55742],{"class":222,"line":644},[220,55739,402],{"class":264},[220,55741,347],{"class":420},[220,55743,359],{"class":264},[212,55745,55747],{"className":251,"code":55746,"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,55748,55749,55759,55763,55777,55781,55790,55798,55802,55806],{"__ignoreMap":178},[220,55750,55751,55753,55755,55757],{"class":222,"line":223},[220,55752,261],{"class":260},[220,55754,11364],{"class":264},[220,55756,268],{"class":260},[220,55758,11369],{"class":230},[220,55760,55761],{"class":222,"line":179},[220,55762,647],{"emptyLinePlaceholder":194},[220,55764,55765,55767,55769,55771,55773,55775],{"class":222,"line":389},[220,55766,1735],{"class":260},[220,55768,1738],{"class":420},[220,55770,1741],{"class":260},[220,55772,1744],{"class":260},[220,55774,1747],{"class":226},[220,55776,1750],{"class":264},[220,55778,55779],{"class":222,"line":399},[220,55780,1765],{"class":264},[220,55782,55783,55785,55788],{"class":222,"line":644},[220,55784,1770],{"class":264},[220,55786,55787],{"class":230},"'Invert'",[220,55789,6860],{"class":264},[220,55791,55792,55794,55796],{"class":222,"line":650},[220,55793,6865],{"class":264},[220,55795,6409],{"class":230},[220,55797,2465],{"class":264},[220,55799,55800],{"class":222,"line":656},[220,55801,6882],{"class":264},[220,55803,55804],{"class":222,"line":673},[220,55805,1787],{"class":264},[220,55807,55808],{"class":222,"line":682},[220,55809,1792],{"class":264},[1504,55811,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":55813},[55814],{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":55552,"description":55560},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55821,"title":55822,"body":55823,"category":33533,"componentType":25740,"description":55830,"extension":191,"meta":56091,"navigation":194,"path":56092,"requiresChild":194,"seo":56093,"stem":56094,"__hash__":56095},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55824,"toc":56087},[55825,55828,55831,55833,55835,55838,55840,56085],[11,55826,55822],{"id":55827},"iriswipe",[15,55829,55830],{},"Reveal through an expanding circle growing from a center point",[31771,55832],{"component":55822},[23,55834,31775],{"id":26391},[31777,55836],{":props":55837},"[{\"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,55839,31783],{"id":31782},[246,55841,55842,55887,55931,55975,56019],{":tabs":1557},[212,55843,55845],{"className":334,"code":55844,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55846,55847,55855,55863,55871,55879],{"__ignoreMap":178},[220,55848,55849,55851,55853],{"class":222,"line":223},[220,55850,343],{"class":264},[220,55852,347],{"class":346},[220,55854,359],{"class":264},[220,55856,55857,55859,55861],{"class":222,"line":179},[220,55858,364],{"class":264},[220,55860,55822],{"class":346},[220,55862,359],{"class":264},[220,55864,55865,55867,55869],{"class":222,"line":389},[220,55866,2550],{"class":264},[220,55868,2553],{"class":346},[220,55870,386],{"class":264},[220,55872,55873,55875,55877],{"class":222,"line":399},[220,55874,2567],{"class":264},[220,55876,55822],{"class":346},[220,55878,359],{"class":264},[220,55880,55881,55883,55885],{"class":222,"line":644},[220,55882,402],{"class":264},[220,55884,347],{"class":346},[220,55886,359],{"class":264},[212,55888,55889],{"className":409,"code":55844,"language":411,"meta":178,"style":178},[99,55890,55891,55899,55907,55915,55923],{"__ignoreMap":178},[220,55892,55893,55895,55897],{"class":222,"line":223},[220,55894,343],{"class":264},[220,55896,347],{"class":420},[220,55898,359],{"class":264},[220,55900,55901,55903,55905],{"class":222,"line":179},[220,55902,364],{"class":264},[220,55904,55822],{"class":420},[220,55906,359],{"class":264},[220,55908,55909,55911,55913],{"class":222,"line":389},[220,55910,2550],{"class":264},[220,55912,2553],{"class":420},[220,55914,386],{"class":264},[220,55916,55917,55919,55921],{"class":222,"line":399},[220,55918,2567],{"class":264},[220,55920,55822],{"class":420},[220,55922,359],{"class":264},[220,55924,55925,55927,55929],{"class":222,"line":644},[220,55926,402],{"class":264},[220,55928,347],{"class":420},[220,55930,359],{"class":264},[212,55932,55933],{"className":2844,"code":55844,"language":2846,"meta":178,"style":178},[99,55934,55935,55943,55951,55959,55967],{"__ignoreMap":178},[220,55936,55937,55939,55941],{"class":222,"line":223},[220,55938,343],{"class":264},[220,55940,347],{"class":420},[220,55942,359],{"class":264},[220,55944,55945,55947,55949],{"class":222,"line":179},[220,55946,364],{"class":264},[220,55948,55822],{"class":420},[220,55950,359],{"class":264},[220,55952,55953,55955,55957],{"class":222,"line":389},[220,55954,2550],{"class":264},[220,55956,2553],{"class":420},[220,55958,386],{"class":264},[220,55960,55961,55963,55965],{"class":222,"line":399},[220,55962,2567],{"class":264},[220,55964,55822],{"class":420},[220,55966,359],{"class":264},[220,55968,55969,55971,55973],{"class":222,"line":644},[220,55970,402],{"class":264},[220,55972,347],{"class":420},[220,55974,359],{"class":264},[212,55976,55977],{"className":468,"code":55844,"language":469,"meta":178,"style":178},[99,55978,55979,55987,55995,56003,56011],{"__ignoreMap":178},[220,55980,55981,55983,55985],{"class":222,"line":223},[220,55982,343],{"class":264},[220,55984,347],{"class":420},[220,55986,359],{"class":264},[220,55988,55989,55991,55993],{"class":222,"line":179},[220,55990,364],{"class":264},[220,55992,55822],{"class":420},[220,55994,359],{"class":264},[220,55996,55997,55999,56001],{"class":222,"line":389},[220,55998,2550],{"class":264},[220,56000,2553],{"class":420},[220,56002,386],{"class":264},[220,56004,56005,56007,56009],{"class":222,"line":399},[220,56006,2567],{"class":264},[220,56008,55822],{"class":420},[220,56010,359],{"class":264},[220,56012,56013,56015,56017],{"class":222,"line":644},[220,56014,402],{"class":264},[220,56016,347],{"class":420},[220,56018,359],{"class":264},[212,56020,56022],{"className":251,"code":56021,"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,56023,56024,56034,56038,56052,56056,56065,56073,56077,56081],{"__ignoreMap":178},[220,56025,56026,56028,56030,56032],{"class":222,"line":223},[220,56027,261],{"class":260},[220,56029,11364],{"class":264},[220,56031,268],{"class":260},[220,56033,11369],{"class":230},[220,56035,56036],{"class":222,"line":179},[220,56037,647],{"emptyLinePlaceholder":194},[220,56039,56040,56042,56044,56046,56048,56050],{"class":222,"line":389},[220,56041,1735],{"class":260},[220,56043,1738],{"class":420},[220,56045,1741],{"class":260},[220,56047,1744],{"class":260},[220,56049,1747],{"class":226},[220,56051,1750],{"class":264},[220,56053,56054],{"class":222,"line":399},[220,56055,1765],{"class":264},[220,56057,56058,56060,56063],{"class":222,"line":644},[220,56059,1770],{"class":264},[220,56061,56062],{"class":230},"'IrisWipe'",[220,56064,6860],{"class":264},[220,56066,56067,56069,56071],{"class":222,"line":650},[220,56068,6865],{"class":264},[220,56070,6409],{"class":230},[220,56072,2465],{"class":264},[220,56074,56075],{"class":222,"line":656},[220,56076,6882],{"class":264},[220,56078,56079],{"class":222,"line":673},[220,56080,1787],{"class":264},[220,56082,56083],{"class":222,"line":682},[220,56084,1792],{"class":264},[1504,56086,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":56088},[56089,56090],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55822,"description":55830},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":56097,"title":56098,"body":56099,"category":32923,"componentType":25734,"description":56106,"extension":191,"meta":56291,"navigation":194,"path":56292,"requiresChild":32390,"seo":56293,"stem":56294,"__hash__":56295},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":56100,"toc":56287},[56101,56104,56107,56109,56111,56114,56116,56285],[11,56102,56098],{"id":56103},"isometriccubes",[15,56105,56106],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31771,56108],{"component":56098},[23,56110,31775],{"id":26391},[31777,56112],{":props":56113},"[{\"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,56115,31783],{"id":31782},[246,56117,56118,56147,56175,56203,56231],{":tabs":1557},[212,56119,56121],{"className":334,"code":56120,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,56122,56123,56131,56139],{"__ignoreMap":178},[220,56124,56125,56127,56129],{"class":222,"line":223},[220,56126,343],{"class":264},[220,56128,347],{"class":346},[220,56130,359],{"class":264},[220,56132,56133,56135,56137],{"class":222,"line":179},[220,56134,364],{"class":264},[220,56136,56098],{"class":346},[220,56138,386],{"class":264},[220,56140,56141,56143,56145],{"class":222,"line":389},[220,56142,402],{"class":264},[220,56144,347],{"class":346},[220,56146,359],{"class":264},[212,56148,56149],{"className":409,"code":56120,"language":411,"meta":178,"style":178},[99,56150,56151,56159,56167],{"__ignoreMap":178},[220,56152,56153,56155,56157],{"class":222,"line":223},[220,56154,343],{"class":264},[220,56156,347],{"class":420},[220,56158,359],{"class":264},[220,56160,56161,56163,56165],{"class":222,"line":179},[220,56162,364],{"class":264},[220,56164,56098],{"class":420},[220,56166,386],{"class":264},[220,56168,56169,56171,56173],{"class":222,"line":389},[220,56170,402],{"class":264},[220,56172,347],{"class":420},[220,56174,359],{"class":264},[212,56176,56177],{"className":2844,"code":56120,"language":2846,"meta":178,"style":178},[99,56178,56179,56187,56195],{"__ignoreMap":178},[220,56180,56181,56183,56185],{"class":222,"line":223},[220,56182,343],{"class":264},[220,56184,347],{"class":420},[220,56186,359],{"class":264},[220,56188,56189,56191,56193],{"class":222,"line":179},[220,56190,364],{"class":264},[220,56192,56098],{"class":420},[220,56194,386],{"class":264},[220,56196,56197,56199,56201],{"class":222,"line":389},[220,56198,402],{"class":264},[220,56200,347],{"class":420},[220,56202,359],{"class":264},[212,56204,56205],{"className":468,"code":56120,"language":469,"meta":178,"style":178},[99,56206,56207,56215,56223],{"__ignoreMap":178},[220,56208,56209,56211,56213],{"class":222,"line":223},[220,56210,343],{"class":264},[220,56212,347],{"class":420},[220,56214,359],{"class":264},[220,56216,56217,56219,56221],{"class":222,"line":179},[220,56218,364],{"class":264},[220,56220,56098],{"class":420},[220,56222,386],{"class":264},[220,56224,56225,56227,56229],{"class":222,"line":389},[220,56226,402],{"class":264},[220,56228,347],{"class":420},[220,56230,359],{"class":264},[212,56232,56234],{"className":251,"code":56233,"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,56235,56236,56246,56250,56264,56268,56277,56281],{"__ignoreMap":178},[220,56237,56238,56240,56242,56244],{"class":222,"line":223},[220,56239,261],{"class":260},[220,56241,11364],{"class":264},[220,56243,268],{"class":260},[220,56245,11369],{"class":230},[220,56247,56248],{"class":222,"line":179},[220,56249,647],{"emptyLinePlaceholder":194},[220,56251,56252,56254,56256,56258,56260,56262],{"class":222,"line":389},[220,56253,1735],{"class":260},[220,56255,1738],{"class":420},[220,56257,1741],{"class":260},[220,56259,1744],{"class":260},[220,56261,1747],{"class":226},[220,56263,1750],{"class":264},[220,56265,56266],{"class":222,"line":399},[220,56267,1765],{"class":264},[220,56269,56270,56272,56275],{"class":222,"line":644},[220,56271,1770],{"class":264},[220,56273,56274],{"class":230},"'IsometricCubes'",[220,56276,2465],{"class":264},[220,56278,56279],{"class":222,"line":650},[220,56280,1787],{"class":264},[220,56282,56283],{"class":222,"line":656},[220,56284,1792],{"class":264},[1504,56286,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":56288},[56289,56290],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":56098,"description":56106},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":56297,"title":56298,"body":56299,"category":33256,"componentType":25740,"description":56306,"extension":191,"meta":56567,"navigation":194,"path":56568,"requiresChild":194,"seo":56569,"stem":56570,"__hash__":56571},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":56300,"toc":56563},[56301,56304,56307,56309,56311,56314,56316,56561],[11,56302,56298],{"id":56303},"kaleidoscope",[15,56305,56306],{},"Create a kaleidoscope effect with radial mirrored segments",[31771,56308],{"component":56298},[23,56310,31775],{"id":26391},[31777,56312],{":props":56313},"[{\"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,56315,31783],{"id":31782},[246,56317,56318,56363,56407,56451,56495],{":tabs":1557},[212,56319,56321],{"className":334,"code":56320,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,56322,56323,56331,56339,56347,56355],{"__ignoreMap":178},[220,56324,56325,56327,56329],{"class":222,"line":223},[220,56326,343],{"class":264},[220,56328,347],{"class":346},[220,56330,359],{"class":264},[220,56332,56333,56335,56337],{"class":222,"line":179},[220,56334,364],{"class":264},[220,56336,56298],{"class":346},[220,56338,359],{"class":264},[220,56340,56341,56343,56345],{"class":222,"line":389},[220,56342,2550],{"class":264},[220,56344,2553],{"class":346},[220,56346,386],{"class":264},[220,56348,56349,56351,56353],{"class":222,"line":399},[220,56350,2567],{"class":264},[220,56352,56298],{"class":346},[220,56354,359],{"class":264},[220,56356,56357,56359,56361],{"class":222,"line":644},[220,56358,402],{"class":264},[220,56360,347],{"class":346},[220,56362,359],{"class":264},[212,56364,56365],{"className":409,"code":56320,"language":411,"meta":178,"style":178},[99,56366,56367,56375,56383,56391,56399],{"__ignoreMap":178},[220,56368,56369,56371,56373],{"class":222,"line":223},[220,56370,343],{"class":264},[220,56372,347],{"class":420},[220,56374,359],{"class":264},[220,56376,56377,56379,56381],{"class":222,"line":179},[220,56378,364],{"class":264},[220,56380,56298],{"class":420},[220,56382,359],{"class":264},[220,56384,56385,56387,56389],{"class":222,"line":389},[220,56386,2550],{"class":264},[220,56388,2553],{"class":420},[220,56390,386],{"class":264},[220,56392,56393,56395,56397],{"class":222,"line":399},[220,56394,2567],{"class":264},[220,56396,56298],{"class":420},[220,56398,359],{"class":264},[220,56400,56401,56403,56405],{"class":222,"line":644},[220,56402,402],{"class":264},[220,56404,347],{"class":420},[220,56406,359],{"class":264},[212,56408,56409],{"className":2844,"code":56320,"language":2846,"meta":178,"style":178},[99,56410,56411,56419,56427,56435,56443],{"__ignoreMap":178},[220,56412,56413,56415,56417],{"class":222,"line":223},[220,56414,343],{"class":264},[220,56416,347],{"class":420},[220,56418,359],{"class":264},[220,56420,56421,56423,56425],{"class":222,"line":179},[220,56422,364],{"class":264},[220,56424,56298],{"class":420},[220,56426,359],{"class":264},[220,56428,56429,56431,56433],{"class":222,"line":389},[220,56430,2550],{"class":264},[220,56432,2553],{"class":420},[220,56434,386],{"class":264},[220,56436,56437,56439,56441],{"class":222,"line":399},[220,56438,2567],{"class":264},[220,56440,56298],{"class":420},[220,56442,359],{"class":264},[220,56444,56445,56447,56449],{"class":222,"line":644},[220,56446,402],{"class":264},[220,56448,347],{"class":420},[220,56450,359],{"class":264},[212,56452,56453],{"className":468,"code":56320,"language":469,"meta":178,"style":178},[99,56454,56455,56463,56471,56479,56487],{"__ignoreMap":178},[220,56456,56457,56459,56461],{"class":222,"line":223},[220,56458,343],{"class":264},[220,56460,347],{"class":420},[220,56462,359],{"class":264},[220,56464,56465,56467,56469],{"class":222,"line":179},[220,56466,364],{"class":264},[220,56468,56298],{"class":420},[220,56470,359],{"class":264},[220,56472,56473,56475,56477],{"class":222,"line":389},[220,56474,2550],{"class":264},[220,56476,2553],{"class":420},[220,56478,386],{"class":264},[220,56480,56481,56483,56485],{"class":222,"line":399},[220,56482,2567],{"class":264},[220,56484,56298],{"class":420},[220,56486,359],{"class":264},[220,56488,56489,56491,56493],{"class":222,"line":644},[220,56490,402],{"class":264},[220,56492,347],{"class":420},[220,56494,359],{"class":264},[212,56496,56498],{"className":251,"code":56497,"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,56499,56500,56510,56514,56528,56532,56541,56549,56553,56557],{"__ignoreMap":178},[220,56501,56502,56504,56506,56508],{"class":222,"line":223},[220,56503,261],{"class":260},[220,56505,11364],{"class":264},[220,56507,268],{"class":260},[220,56509,11369],{"class":230},[220,56511,56512],{"class":222,"line":179},[220,56513,647],{"emptyLinePlaceholder":194},[220,56515,56516,56518,56520,56522,56524,56526],{"class":222,"line":389},[220,56517,1735],{"class":260},[220,56519,1738],{"class":420},[220,56521,1741],{"class":260},[220,56523,1744],{"class":260},[220,56525,1747],{"class":226},[220,56527,1750],{"class":264},[220,56529,56530],{"class":222,"line":399},[220,56531,1765],{"class":264},[220,56533,56534,56536,56539],{"class":222,"line":644},[220,56535,1770],{"class":264},[220,56537,56538],{"class":230},"'Kaleidoscope'",[220,56540,6860],{"class":264},[220,56542,56543,56545,56547],{"class":222,"line":650},[220,56544,6865],{"class":264},[220,56546,6409],{"class":230},[220,56548,2465],{"class":264},[220,56550,56551],{"class":222,"line":656},[220,56552,6882],{"class":264},[220,56554,56555],{"class":222,"line":673},[220,56556,1787],{"class":264},[220,56558,56559],{"class":222,"line":682},[220,56560,1792],{"class":264},[1504,56562,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":56564},[56565,56566],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":56298,"description":56306},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":56573,"title":56574,"body":56575,"category":32666,"componentType":25740,"description":56582,"extension":191,"meta":56843,"navigation":194,"path":56844,"requiresChild":194,"seo":56845,"stem":56846,"__hash__":56847},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":56576,"toc":56839},[56577,56580,56583,56585,56587,56590,56592,56837],[11,56578,56574],{"id":56579},"keyframes",[15,56581,56582],{},"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",[31771,56584],{"component":56574},[23,56586,31775],{"id":26391},[31777,56588],{":props":56589},"[{\"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,56591,31783],{"id":31782},[246,56593,56594,56639,56683,56727,56771],{":tabs":1557},[212,56595,56597],{"className":334,"code":56596,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,56598,56599,56607,56615,56623,56631],{"__ignoreMap":178},[220,56600,56601,56603,56605],{"class":222,"line":223},[220,56602,343],{"class":264},[220,56604,347],{"class":346},[220,56606,359],{"class":264},[220,56608,56609,56611,56613],{"class":222,"line":179},[220,56610,364],{"class":264},[220,56612,56574],{"class":346},[220,56614,359],{"class":264},[220,56616,56617,56619,56621],{"class":222,"line":389},[220,56618,2550],{"class":264},[220,56620,2553],{"class":346},[220,56622,386],{"class":264},[220,56624,56625,56627,56629],{"class":222,"line":399},[220,56626,2567],{"class":264},[220,56628,56574],{"class":346},[220,56630,359],{"class":264},[220,56632,56633,56635,56637],{"class":222,"line":644},[220,56634,402],{"class":264},[220,56636,347],{"class":346},[220,56638,359],{"class":264},[212,56640,56641],{"className":409,"code":56596,"language":411,"meta":178,"style":178},[99,56642,56643,56651,56659,56667,56675],{"__ignoreMap":178},[220,56644,56645,56647,56649],{"class":222,"line":223},[220,56646,343],{"class":264},[220,56648,347],{"class":420},[220,56650,359],{"class":264},[220,56652,56653,56655,56657],{"class":222,"line":179},[220,56654,364],{"class":264},[220,56656,56574],{"class":420},[220,56658,359],{"class":264},[220,56660,56661,56663,56665],{"class":222,"line":389},[220,56662,2550],{"class":264},[220,56664,2553],{"class":420},[220,56666,386],{"class":264},[220,56668,56669,56671,56673],{"class":222,"line":399},[220,56670,2567],{"class":264},[220,56672,56574],{"class":420},[220,56674,359],{"class":264},[220,56676,56677,56679,56681],{"class":222,"line":644},[220,56678,402],{"class":264},[220,56680,347],{"class":420},[220,56682,359],{"class":264},[212,56684,56685],{"className":2844,"code":56596,"language":2846,"meta":178,"style":178},[99,56686,56687,56695,56703,56711,56719],{"__ignoreMap":178},[220,56688,56689,56691,56693],{"class":222,"line":223},[220,56690,343],{"class":264},[220,56692,347],{"class":420},[220,56694,359],{"class":264},[220,56696,56697,56699,56701],{"class":222,"line":179},[220,56698,364],{"class":264},[220,56700,56574],{"class":420},[220,56702,359],{"class":264},[220,56704,56705,56707,56709],{"class":222,"line":389},[220,56706,2550],{"class":264},[220,56708,2553],{"class":420},[220,56710,386],{"class":264},[220,56712,56713,56715,56717],{"class":222,"line":399},[220,56714,2567],{"class":264},[220,56716,56574],{"class":420},[220,56718,359],{"class":264},[220,56720,56721,56723,56725],{"class":222,"line":644},[220,56722,402],{"class":264},[220,56724,347],{"class":420},[220,56726,359],{"class":264},[212,56728,56729],{"className":468,"code":56596,"language":469,"meta":178,"style":178},[99,56730,56731,56739,56747,56755,56763],{"__ignoreMap":178},[220,56732,56733,56735,56737],{"class":222,"line":223},[220,56734,343],{"class":264},[220,56736,347],{"class":420},[220,56738,359],{"class":264},[220,56740,56741,56743,56745],{"class":222,"line":179},[220,56742,364],{"class":264},[220,56744,56574],{"class":420},[220,56746,359],{"class":264},[220,56748,56749,56751,56753],{"class":222,"line":389},[220,56750,2550],{"class":264},[220,56752,2553],{"class":420},[220,56754,386],{"class":264},[220,56756,56757,56759,56761],{"class":222,"line":399},[220,56758,2567],{"class":264},[220,56760,56574],{"class":420},[220,56762,359],{"class":264},[220,56764,56765,56767,56769],{"class":222,"line":644},[220,56766,402],{"class":264},[220,56768,347],{"class":420},[220,56770,359],{"class":264},[212,56772,56774],{"className":251,"code":56773,"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,56775,56776,56786,56790,56804,56808,56817,56825,56829,56833],{"__ignoreMap":178},[220,56777,56778,56780,56782,56784],{"class":222,"line":223},[220,56779,261],{"class":260},[220,56781,11364],{"class":264},[220,56783,268],{"class":260},[220,56785,11369],{"class":230},[220,56787,56788],{"class":222,"line":179},[220,56789,647],{"emptyLinePlaceholder":194},[220,56791,56792,56794,56796,56798,56800,56802],{"class":222,"line":389},[220,56793,1735],{"class":260},[220,56795,1738],{"class":420},[220,56797,1741],{"class":260},[220,56799,1744],{"class":260},[220,56801,1747],{"class":226},[220,56803,1750],{"class":264},[220,56805,56806],{"class":222,"line":399},[220,56807,1765],{"class":264},[220,56809,56810,56812,56815],{"class":222,"line":644},[220,56811,1770],{"class":264},[220,56813,56814],{"class":230},"'KeyFrames'",[220,56816,6860],{"class":264},[220,56818,56819,56821,56823],{"class":222,"line":650},[220,56820,6865],{"class":264},[220,56822,6409],{"class":230},[220,56824,2465],{"class":264},[220,56826,56827],{"class":222,"line":656},[220,56828,6882],{"class":264},[220,56830,56831],{"class":222,"line":673},[220,56832,1787],{"class":264},[220,56834,56835],{"class":222,"line":682},[220,56836,1792],{"class":264},[1504,56838,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":56840},[56841,56842],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":56574,"description":56582},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56849,"title":56850,"body":56851,"category":32666,"componentType":25740,"description":57122,"extension":191,"meta":57123,"navigation":194,"path":57124,"requiresChild":194,"seo":57125,"stem":57126,"__hash__":57127},"components\u002Fdocs\u002Fcomponents\u002FLensDistortion.md","LensDistortion",{"type":8,"value":56852,"toc":57118},[56853,56856,56862,56864,56866,56869,56871,57116],[11,56854,56850],{"id":56855},"lensdistortion",[15,56857,56858,56859,4685],{},"Split content into shifting chromatic layers with barrel or pincushion lens warp. Powered by ",[56,56860,53942],{"href":53940,"rel":56861},[167],[31771,56863],{"component":56850},[23,56865,31775],{"id":26391},[31777,56867],{":props":56868},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the lens effect — the focus zone, lens warp, circle crop and swirl all pivot around it\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Strength of the color split; how far the color layers are pushed apart (0 is off)\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the spread in degrees\"},{\"name\":\"perspective\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1)\"},{\"name\":\"bias\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Shifts the colors toward one end of the spread; 0 spaces them evenly\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"35\",\"description\":\"Number of sampled color layers along the spread; higher is smoother and costlier\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original color\"},{\"name\":\"dispersionShift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance of the dispersion between a soft circular zone at the centre and the rest; -1 keeps it in the centre only, 1 at the edges only\"},{\"name\":\"dispersionColor\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Rotates the dispersion colors around the hue wheel, 0 to 1 for a full turn\"},{\"name\":\"focusCenter\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre\"},{\"name\":\"focusEdges\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Reduces the spread toward the edges; 1 restores the original image there\"},{\"name\":\"lensBulge\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Radial lens warp; positive bulges out like a fisheye, negative pinches in like a pincushion\"},{\"name\":\"lensCircle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Squeezes pixels outside the inscribed circle inward so the outline becomes a circle\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Rotates the color layers around the centre by an angle growing along the spread; 0 is off\"},{\"name\":\"noise\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Scatters the spread direction with noise; 0 is off\"},{\"name\":\"noiseFrequency\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Frequency of the direction noise; higher is finer (no effect with noise at 0)\"},{\"name\":\"noiseOffset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Offsets the noise pattern for a different seed (no effect with noise at 0)\"},{\"name\":\"grainMixer\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Scatters the spread with grain noise, breaking up the edges of the color layers\"},{\"name\":\"grainOverlay\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Post-processing black\u002Fwhite grain overlay\"}]",[23,56870,31783],{"id":31782},[246,56872,56873,56918,56962,57006,57050],{":tabs":1557},[212,56874,56876],{"className":334,"code":56875,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensDistortion>\n \u003CCircle \u002F>\n \u003C\u002FLensDistortion>\n\u003C\u002FShader>\n",[99,56877,56878,56886,56894,56902,56910],{"__ignoreMap":178},[220,56879,56880,56882,56884],{"class":222,"line":223},[220,56881,343],{"class":264},[220,56883,347],{"class":346},[220,56885,359],{"class":264},[220,56887,56888,56890,56892],{"class":222,"line":179},[220,56889,364],{"class":264},[220,56891,56850],{"class":346},[220,56893,359],{"class":264},[220,56895,56896,56898,56900],{"class":222,"line":389},[220,56897,2550],{"class":264},[220,56899,2553],{"class":346},[220,56901,386],{"class":264},[220,56903,56904,56906,56908],{"class":222,"line":399},[220,56905,2567],{"class":264},[220,56907,56850],{"class":346},[220,56909,359],{"class":264},[220,56911,56912,56914,56916],{"class":222,"line":644},[220,56913,402],{"class":264},[220,56915,347],{"class":346},[220,56917,359],{"class":264},[212,56919,56920],{"className":409,"code":56875,"language":411,"meta":178,"style":178},[99,56921,56922,56930,56938,56946,56954],{"__ignoreMap":178},[220,56923,56924,56926,56928],{"class":222,"line":223},[220,56925,343],{"class":264},[220,56927,347],{"class":420},[220,56929,359],{"class":264},[220,56931,56932,56934,56936],{"class":222,"line":179},[220,56933,364],{"class":264},[220,56935,56850],{"class":420},[220,56937,359],{"class":264},[220,56939,56940,56942,56944],{"class":222,"line":389},[220,56941,2550],{"class":264},[220,56943,2553],{"class":420},[220,56945,386],{"class":264},[220,56947,56948,56950,56952],{"class":222,"line":399},[220,56949,2567],{"class":264},[220,56951,56850],{"class":420},[220,56953,359],{"class":264},[220,56955,56956,56958,56960],{"class":222,"line":644},[220,56957,402],{"class":264},[220,56959,347],{"class":420},[220,56961,359],{"class":264},[212,56963,56964],{"className":2844,"code":56875,"language":2846,"meta":178,"style":178},[99,56965,56966,56974,56982,56990,56998],{"__ignoreMap":178},[220,56967,56968,56970,56972],{"class":222,"line":223},[220,56969,343],{"class":264},[220,56971,347],{"class":420},[220,56973,359],{"class":264},[220,56975,56976,56978,56980],{"class":222,"line":179},[220,56977,364],{"class":264},[220,56979,56850],{"class":420},[220,56981,359],{"class":264},[220,56983,56984,56986,56988],{"class":222,"line":389},[220,56985,2550],{"class":264},[220,56987,2553],{"class":420},[220,56989,386],{"class":264},[220,56991,56992,56994,56996],{"class":222,"line":399},[220,56993,2567],{"class":264},[220,56995,56850],{"class":420},[220,56997,359],{"class":264},[220,56999,57000,57002,57004],{"class":222,"line":644},[220,57001,402],{"class":264},[220,57003,347],{"class":420},[220,57005,359],{"class":264},[212,57007,57008],{"className":468,"code":56875,"language":469,"meta":178,"style":178},[99,57009,57010,57018,57026,57034,57042],{"__ignoreMap":178},[220,57011,57012,57014,57016],{"class":222,"line":223},[220,57013,343],{"class":264},[220,57015,347],{"class":420},[220,57017,359],{"class":264},[220,57019,57020,57022,57024],{"class":222,"line":179},[220,57021,364],{"class":264},[220,57023,56850],{"class":420},[220,57025,359],{"class":264},[220,57027,57028,57030,57032],{"class":222,"line":389},[220,57029,2550],{"class":264},[220,57031,2553],{"class":420},[220,57033,386],{"class":264},[220,57035,57036,57038,57040],{"class":222,"line":399},[220,57037,2567],{"class":264},[220,57039,56850],{"class":420},[220,57041,359],{"class":264},[220,57043,57044,57046,57048],{"class":222,"line":644},[220,57045,402],{"class":264},[220,57047,347],{"class":420},[220,57049,359],{"class":264},[212,57051,57053],{"className":251,"code":57052,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LensDistortion', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,57054,57055,57065,57069,57083,57087,57096,57104,57108,57112],{"__ignoreMap":178},[220,57056,57057,57059,57061,57063],{"class":222,"line":223},[220,57058,261],{"class":260},[220,57060,11364],{"class":264},[220,57062,268],{"class":260},[220,57064,11369],{"class":230},[220,57066,57067],{"class":222,"line":179},[220,57068,647],{"emptyLinePlaceholder":194},[220,57070,57071,57073,57075,57077,57079,57081],{"class":222,"line":389},[220,57072,1735],{"class":260},[220,57074,1738],{"class":420},[220,57076,1741],{"class":260},[220,57078,1744],{"class":260},[220,57080,1747],{"class":226},[220,57082,1750],{"class":264},[220,57084,57085],{"class":222,"line":399},[220,57086,1765],{"class":264},[220,57088,57089,57091,57094],{"class":222,"line":644},[220,57090,1770],{"class":264},[220,57092,57093],{"class":230},"'LensDistortion'",[220,57095,6860],{"class":264},[220,57097,57098,57100,57102],{"class":222,"line":650},[220,57099,6865],{"class":264},[220,57101,6409],{"class":230},[220,57103,2465],{"class":264},[220,57105,57106],{"class":222,"line":656},[220,57107,6882],{"class":264},[220,57109,57110],{"class":222,"line":673},[220,57111,1787],{"class":264},[220,57113,57114],{"class":222,"line":682},[220,57115,1792],{"class":264},[1504,57117,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":57119},[57120,57121],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Split content into shifting chromatic layers with barrel or pincushion lens warp. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flensdistortion",{"title":56850,"description":57122},"docs\u002Fcomponents\u002FLensDistortion","XGObhMezsAfFiRCCmEM_AeYd8iXDTD0yiv-uio3nOXc",{"id":57129,"title":57130,"body":57131,"category":32666,"componentType":25734,"description":57138,"extension":191,"meta":57378,"navigation":194,"path":57379,"requiresChild":32390,"seo":57380,"stem":57381,"__hash__":57382},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":57132,"toc":57374},[57133,57136,57139,57141,57143,57146,57148,57372],[11,57134,57130],{"id":57135},"lensflare",[15,57137,57138],{},"Realistic camera lens flare with artifacts.",[31771,57140],{"component":57130},[23,57142,31775],{"id":26391},[31777,57144],{":props":57145},"[{\"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,57147,31783],{"id":31782},[246,57149,57150,57189,57232,57272,57314],{":tabs":1557},[212,57151,57153],{"className":334,"code":57152,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,57154,57155,57163,57169,57177,57181],{"__ignoreMap":178},[220,57156,57157,57159,57161],{"class":222,"line":223},[220,57158,343],{"class":264},[220,57160,347],{"class":346},[220,57162,359],{"class":264},[220,57164,57165,57167],{"class":222,"line":179},[220,57166,364],{"class":264},[220,57168,20214],{"class":346},[220,57170,57171,57173,57175],{"class":222,"line":389},[220,57172,20228],{"class":226},[220,57174,353],{"class":264},[220,57176,42218],{"class":230},[220,57178,57179],{"class":222,"line":399},[220,57180,1234],{"class":264},[220,57182,57183,57185,57187],{"class":222,"line":644},[220,57184,402],{"class":264},[220,57186,347],{"class":346},[220,57188,359],{"class":264},[212,57190,57192],{"className":409,"code":57191,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,57193,57194,57202,57208,57220,57224],{"__ignoreMap":178},[220,57195,57196,57198,57200],{"class":222,"line":223},[220,57197,343],{"class":264},[220,57199,347],{"class":420},[220,57201,359],{"class":264},[220,57203,57204,57206],{"class":222,"line":179},[220,57205,364],{"class":264},[220,57207,20214],{"class":420},[220,57209,57210,57212,57214,57216,57218],{"class":222,"line":389},[220,57211,20339],{"class":226},[220,57213,353],{"class":260},[220,57215,743],{"class":264},[220,57217,7605],{"class":420},[220,57219,749],{"class":264},[220,57221,57222],{"class":222,"line":399},[220,57223,1234],{"class":264},[220,57225,57226,57228,57230],{"class":222,"line":644},[220,57227,402],{"class":264},[220,57229,347],{"class":420},[220,57231,359],{"class":264},[212,57233,57234],{"className":2844,"code":57191,"language":2846,"meta":178,"style":178},[99,57235,57236,57244,57250,57260,57264],{"__ignoreMap":178},[220,57237,57238,57240,57242],{"class":222,"line":223},[220,57239,343],{"class":264},[220,57241,347],{"class":420},[220,57243,359],{"class":264},[220,57245,57246,57248],{"class":222,"line":179},[220,57247,364],{"class":264},[220,57249,20214],{"class":420},[220,57251,57252,57254,57256,57258],{"class":222,"line":389},[220,57253,20339],{"class":226},[220,57255,29729],{"class":264},[220,57257,7605],{"class":420},[220,57259,749],{"class":264},[220,57261,57262],{"class":222,"line":399},[220,57263,1234],{"class":264},[220,57265,57266,57268,57270],{"class":222,"line":644},[220,57267,402],{"class":264},[220,57269,347],{"class":420},[220,57271,359],{"class":264},[212,57273,57274],{"className":468,"code":57191,"language":469,"meta":178,"style":178},[99,57275,57276,57284,57290,57302,57306],{"__ignoreMap":178},[220,57277,57278,57280,57282],{"class":222,"line":223},[220,57279,343],{"class":264},[220,57281,347],{"class":420},[220,57283,359],{"class":264},[220,57285,57286,57288],{"class":222,"line":179},[220,57287,364],{"class":264},[220,57289,20214],{"class":420},[220,57291,57292,57294,57296,57298,57300],{"class":222,"line":389},[220,57293,20339],{"class":226},[220,57295,353],{"class":260},[220,57297,743],{"class":264},[220,57299,7605],{"class":420},[220,57301,749],{"class":264},[220,57303,57304],{"class":222,"line":399},[220,57305,1234],{"class":264},[220,57307,57308,57310,57312],{"class":222,"line":644},[220,57309,402],{"class":264},[220,57311,347],{"class":420},[220,57313,359],{"class":264},[212,57315,57317],{"className":251,"code":57316,"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,57318,57319,57329,57333,57347,57351,57364,57368],{"__ignoreMap":178},[220,57320,57321,57323,57325,57327],{"class":222,"line":223},[220,57322,261],{"class":260},[220,57324,11364],{"class":264},[220,57326,268],{"class":260},[220,57328,11369],{"class":230},[220,57330,57331],{"class":222,"line":179},[220,57332,647],{"emptyLinePlaceholder":194},[220,57334,57335,57337,57339,57341,57343,57345],{"class":222,"line":389},[220,57336,1735],{"class":260},[220,57338,1738],{"class":420},[220,57340,1741],{"class":260},[220,57342,1744],{"class":260},[220,57344,1747],{"class":226},[220,57346,1750],{"class":264},[220,57348,57349],{"class":222,"line":399},[220,57350,1765],{"class":264},[220,57352,57353,57355,57358,57360,57362],{"class":222,"line":644},[220,57354,1770],{"class":264},[220,57356,57357],{"class":230},"'LensFlare'",[220,57359,32063],{"class":264},[220,57361,7605],{"class":420},[220,57363,1782],{"class":264},[220,57365,57366],{"class":222,"line":650},[220,57367,1787],{"class":264},[220,57369,57370],{"class":222,"line":656},[220,57371,1792],{"class":264},[1504,57373,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57375},[57376,57377],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":57130,"description":57138},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":57384,"title":57385,"body":57386,"category":36429,"componentType":25734,"description":57638,"extension":191,"meta":57639,"navigation":194,"path":57640,"requiresChild":32390,"seo":57641,"stem":57642,"__hash__":57643},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":57387,"toc":57634},[57388,57391,57397,57399,57401,57404,57406,57632],[11,57389,57385],{"id":57390},"lightedge",[15,57392,57393,57394,4685],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,57395,53942],{"href":53940,"rel":57396},[167],[31771,57398],{"component":57385},[23,57400,31775],{"id":26391},[31777,57402],{":props":57403},"[{\"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,57405,31783],{"id":31782},[246,57407,57408,57449,57492,57532,57574],{":tabs":1557},[212,57409,57411],{"className":334,"code":57410,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,57412,57413,57421,57428,57437,57441],{"__ignoreMap":178},[220,57414,57415,57417,57419],{"class":222,"line":223},[220,57416,343],{"class":264},[220,57418,347],{"class":346},[220,57420,359],{"class":264},[220,57422,57423,57425],{"class":222,"line":179},[220,57424,364],{"class":264},[220,57426,57427],{"class":346},"LightEdge\n",[220,57429,57430,57432,57434],{"class":222,"line":389},[220,57431,20228],{"class":226},[220,57433,353],{"class":264},[220,57435,57436],{"class":230},"\"0.6\"\n",[220,57438,57439],{"class":222,"line":399},[220,57440,1234],{"class":264},[220,57442,57443,57445,57447],{"class":222,"line":644},[220,57444,402],{"class":264},[220,57446,347],{"class":346},[220,57448,359],{"class":264},[212,57450,57452],{"className":409,"code":57451,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,57453,57454,57462,57468,57480,57484],{"__ignoreMap":178},[220,57455,57456,57458,57460],{"class":222,"line":223},[220,57457,343],{"class":264},[220,57459,347],{"class":420},[220,57461,359],{"class":264},[220,57463,57464,57466],{"class":222,"line":179},[220,57465,364],{"class":264},[220,57467,57427],{"class":420},[220,57469,57470,57472,57474,57476,57478],{"class":222,"line":389},[220,57471,20339],{"class":226},[220,57473,353],{"class":260},[220,57475,743],{"class":264},[220,57477,8087],{"class":420},[220,57479,749],{"class":264},[220,57481,57482],{"class":222,"line":399},[220,57483,1234],{"class":264},[220,57485,57486,57488,57490],{"class":222,"line":644},[220,57487,402],{"class":264},[220,57489,347],{"class":420},[220,57491,359],{"class":264},[212,57493,57494],{"className":2844,"code":57451,"language":2846,"meta":178,"style":178},[99,57495,57496,57504,57510,57520,57524],{"__ignoreMap":178},[220,57497,57498,57500,57502],{"class":222,"line":223},[220,57499,343],{"class":264},[220,57501,347],{"class":420},[220,57503,359],{"class":264},[220,57505,57506,57508],{"class":222,"line":179},[220,57507,364],{"class":264},[220,57509,57427],{"class":420},[220,57511,57512,57514,57516,57518],{"class":222,"line":389},[220,57513,20339],{"class":226},[220,57515,29729],{"class":264},[220,57517,8087],{"class":420},[220,57519,749],{"class":264},[220,57521,57522],{"class":222,"line":399},[220,57523,1234],{"class":264},[220,57525,57526,57528,57530],{"class":222,"line":644},[220,57527,402],{"class":264},[220,57529,347],{"class":420},[220,57531,359],{"class":264},[212,57533,57534],{"className":468,"code":57451,"language":469,"meta":178,"style":178},[99,57535,57536,57544,57550,57562,57566],{"__ignoreMap":178},[220,57537,57538,57540,57542],{"class":222,"line":223},[220,57539,343],{"class":264},[220,57541,347],{"class":420},[220,57543,359],{"class":264},[220,57545,57546,57548],{"class":222,"line":179},[220,57547,364],{"class":264},[220,57549,57427],{"class":420},[220,57551,57552,57554,57556,57558,57560],{"class":222,"line":389},[220,57553,20339],{"class":226},[220,57555,353],{"class":260},[220,57557,743],{"class":264},[220,57559,8087],{"class":420},[220,57561,749],{"class":264},[220,57563,57564],{"class":222,"line":399},[220,57565,1234],{"class":264},[220,57567,57568,57570,57572],{"class":222,"line":644},[220,57569,402],{"class":264},[220,57571,347],{"class":420},[220,57573,359],{"class":264},[212,57575,57577],{"className":251,"code":57576,"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,57578,57579,57589,57593,57607,57611,57624,57628],{"__ignoreMap":178},[220,57580,57581,57583,57585,57587],{"class":222,"line":223},[220,57582,261],{"class":260},[220,57584,11364],{"class":264},[220,57586,268],{"class":260},[220,57588,11369],{"class":230},[220,57590,57591],{"class":222,"line":179},[220,57592,647],{"emptyLinePlaceholder":194},[220,57594,57595,57597,57599,57601,57603,57605],{"class":222,"line":389},[220,57596,1735],{"class":260},[220,57598,1738],{"class":420},[220,57600,1741],{"class":260},[220,57602,1744],{"class":260},[220,57604,1747],{"class":226},[220,57606,1750],{"class":264},[220,57608,57609],{"class":222,"line":399},[220,57610,1765],{"class":264},[220,57612,57613,57615,57618,57620,57622],{"class":222,"line":644},[220,57614,1770],{"class":264},[220,57616,57617],{"class":230},"'LightEdge'",[220,57619,32063],{"class":264},[220,57621,8087],{"class":420},[220,57623,1782],{"class":264},[220,57625,57626],{"class":222,"line":650},[220,57627,1787],{"class":264},[220,57629,57630],{"class":222,"line":656},[220,57631,1792],{"class":264},[1504,57633,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57635},[57636,57637],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":57385,"description":57638},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":57645,"title":57646,"body":57647,"category":32666,"componentType":25740,"description":57654,"extension":191,"meta":57971,"navigation":194,"path":57972,"requiresChild":194,"seo":57973,"stem":57974,"__hash__":57975},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":57648,"toc":57967},[57649,57652,57655,57657,57659,57662,57664,57965],[11,57650,57646],{"id":57651},"lightleak",[15,57653,57654],{},"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",[31771,57656],{"component":57646},[23,57658,31775],{"id":26391},[31777,57660],{":props":57661},"[{\"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,57663,31783],{"id":31782},[246,57665,57666,57722,57781,57837,57895],{":tabs":1557},[212,57667,57669],{"className":334,"code":57668,"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,57670,57671,57679,57686,57694,57698,57706,57714],{"__ignoreMap":178},[220,57672,57673,57675,57677],{"class":222,"line":223},[220,57674,343],{"class":264},[220,57676,347],{"class":346},[220,57678,359],{"class":264},[220,57680,57681,57683],{"class":222,"line":179},[220,57682,364],{"class":264},[220,57684,57685],{"class":346},"LightLeak\n",[220,57687,57688,57690,57692],{"class":222,"line":389},[220,57689,20228],{"class":226},[220,57691,353],{"class":264},[220,57693,17965],{"class":230},[220,57695,57696],{"class":222,"line":399},[220,57697,31819],{"class":264},[220,57699,57700,57702,57704],{"class":222,"line":644},[220,57701,2550],{"class":264},[220,57703,2553],{"class":346},[220,57705,386],{"class":264},[220,57707,57708,57710,57712],{"class":222,"line":650},[220,57709,2567],{"class":264},[220,57711,57646],{"class":346},[220,57713,359],{"class":264},[220,57715,57716,57718,57720],{"class":222,"line":656},[220,57717,402],{"class":264},[220,57719,347],{"class":346},[220,57721,359],{"class":264},[212,57723,57725],{"className":409,"code":57724,"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,57726,57727,57735,57741,57753,57757,57765,57773],{"__ignoreMap":178},[220,57728,57729,57731,57733],{"class":222,"line":223},[220,57730,343],{"class":264},[220,57732,347],{"class":420},[220,57734,359],{"class":264},[220,57736,57737,57739],{"class":222,"line":179},[220,57738,364],{"class":264},[220,57740,57685],{"class":420},[220,57742,57743,57745,57747,57749,57751],{"class":222,"line":389},[220,57744,20339],{"class":226},[220,57746,353],{"class":260},[220,57748,743],{"class":264},[220,57750,18049],{"class":420},[220,57752,749],{"class":264},[220,57754,57755],{"class":222,"line":399},[220,57756,31819],{"class":264},[220,57758,57759,57761,57763],{"class":222,"line":644},[220,57760,2550],{"class":264},[220,57762,2553],{"class":420},[220,57764,386],{"class":264},[220,57766,57767,57769,57771],{"class":222,"line":650},[220,57768,2567],{"class":264},[220,57770,57646],{"class":420},[220,57772,359],{"class":264},[220,57774,57775,57777,57779],{"class":222,"line":656},[220,57776,402],{"class":264},[220,57778,347],{"class":420},[220,57780,359],{"class":264},[212,57782,57783],{"className":2844,"code":57724,"language":2846,"meta":178,"style":178},[99,57784,57785,57793,57799,57809,57813,57821,57829],{"__ignoreMap":178},[220,57786,57787,57789,57791],{"class":222,"line":223},[220,57788,343],{"class":264},[220,57790,347],{"class":420},[220,57792,359],{"class":264},[220,57794,57795,57797],{"class":222,"line":179},[220,57796,364],{"class":264},[220,57798,57685],{"class":420},[220,57800,57801,57803,57805,57807],{"class":222,"line":389},[220,57802,20339],{"class":226},[220,57804,29729],{"class":264},[220,57806,18049],{"class":420},[220,57808,749],{"class":264},[220,57810,57811],{"class":222,"line":399},[220,57812,31819],{"class":264},[220,57814,57815,57817,57819],{"class":222,"line":644},[220,57816,2550],{"class":264},[220,57818,2553],{"class":420},[220,57820,386],{"class":264},[220,57822,57823,57825,57827],{"class":222,"line":650},[220,57824,2567],{"class":264},[220,57826,57646],{"class":420},[220,57828,359],{"class":264},[220,57830,57831,57833,57835],{"class":222,"line":656},[220,57832,402],{"class":264},[220,57834,347],{"class":420},[220,57836,359],{"class":264},[212,57838,57839],{"className":468,"code":57724,"language":469,"meta":178,"style":178},[99,57840,57841,57849,57855,57867,57871,57879,57887],{"__ignoreMap":178},[220,57842,57843,57845,57847],{"class":222,"line":223},[220,57844,343],{"class":264},[220,57846,347],{"class":420},[220,57848,359],{"class":264},[220,57850,57851,57853],{"class":222,"line":179},[220,57852,364],{"class":264},[220,57854,57685],{"class":420},[220,57856,57857,57859,57861,57863,57865],{"class":222,"line":389},[220,57858,20339],{"class":226},[220,57860,353],{"class":260},[220,57862,743],{"class":264},[220,57864,18049],{"class":420},[220,57866,749],{"class":264},[220,57868,57869],{"class":222,"line":399},[220,57870,31819],{"class":264},[220,57872,57873,57875,57877],{"class":222,"line":644},[220,57874,2550],{"class":264},[220,57876,2553],{"class":420},[220,57878,386],{"class":264},[220,57880,57881,57883,57885],{"class":222,"line":650},[220,57882,2567],{"class":264},[220,57884,57646],{"class":420},[220,57886,359],{"class":264},[220,57888,57889,57891,57893],{"class":222,"line":656},[220,57890,402],{"class":264},[220,57892,347],{"class":420},[220,57894,359],{"class":264},[212,57896,57898],{"className":251,"code":57897,"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,57899,57900,57910,57914,57928,57932,57945,57953,57957,57961],{"__ignoreMap":178},[220,57901,57902,57904,57906,57908],{"class":222,"line":223},[220,57903,261],{"class":260},[220,57905,11364],{"class":264},[220,57907,268],{"class":260},[220,57909,11369],{"class":230},[220,57911,57912],{"class":222,"line":179},[220,57913,647],{"emptyLinePlaceholder":194},[220,57915,57916,57918,57920,57922,57924,57926],{"class":222,"line":389},[220,57917,1735],{"class":260},[220,57919,1738],{"class":420},[220,57921,1741],{"class":260},[220,57923,1744],{"class":260},[220,57925,1747],{"class":226},[220,57927,1750],{"class":264},[220,57929,57930],{"class":222,"line":399},[220,57931,1765],{"class":264},[220,57933,57934,57936,57939,57941,57943],{"class":222,"line":644},[220,57935,1770],{"class":264},[220,57937,57938],{"class":230},"'LightLeak'",[220,57940,32063],{"class":264},[220,57942,18049],{"class":420},[220,57944,7397],{"class":264},[220,57946,57947,57949,57951],{"class":222,"line":650},[220,57948,6865],{"class":264},[220,57950,6409],{"class":230},[220,57952,2465],{"class":264},[220,57954,57955],{"class":222,"line":656},[220,57956,6882],{"class":264},[220,57958,57959],{"class":222,"line":673},[220,57960,1787],{"class":264},[220,57962,57963],{"class":222,"line":682},[220,57964,1792],{"class":264},[1504,57966,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57968},[57969,57970],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":57646,"description":57654},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":57977,"title":57978,"body":57979,"category":15765,"componentType":25734,"description":57985,"extension":191,"meta":58215,"navigation":194,"path":58216,"requiresChild":32390,"seo":58217,"stem":58218,"__hash__":58219},"components\u002Fdocs\u002Fcomponents\u002FLine.md","Line",{"type":8,"value":57980,"toc":58211},[57981,57983,57986,57988,57990,57993,57995,58209],[11,57982,57978],{"id":222},[15,57984,57985],{},"Draw a straight line between two points with color, thickness, and solid, dashed, or dotted styles",[31771,57987],{"component":57978},[23,57989,31775],{"id":26391},[31777,57991],{":props":57992},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the line\"},{\"name\":\"pointA\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.5}\",\"description\":\"The start point of the line\"},{\"name\":\"pointB\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.5}\",\"description\":\"The end point of the line\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.01\",\"description\":\"The thickness of the line. A value of one (1) matches the canvas height.\"},{\"name\":\"style\",\"type\":\"\\\"solid\\\" | \\\"dashed\\\" | \\\"dotted\\\"\",\"default\":\"solid\",\"description\":\"The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints.\"},{\"name\":\"dashLength\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"The length of each dash, including its caps\"},{\"name\":\"gapLength\",\"type\":\"number\",\"default\":\"0.025\",\"description\":\"The gap between dashes, or the spacing between dots\"},{\"name\":\"capStart\",\"type\":\"\\\"square\\\" | \\\"rounded\\\"\",\"default\":\"rounded\",\"description\":\"Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot.\"},{\"name\":\"capEnd\",\"type\":\"\\\"square\\\" | \\\"rounded\\\"\",\"default\":\"rounded\",\"description\":\"Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot.\"}]",[23,57994,31783],{"id":31782},[246,57996,57997,58037,58075,58113,58151],{":tabs":1557},[212,57998,58000],{"className":334,"code":57999,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLine\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,58001,58002,58010,58017,58025,58029],{"__ignoreMap":178},[220,58003,58004,58006,58008],{"class":222,"line":223},[220,58005,343],{"class":264},[220,58007,347],{"class":346},[220,58009,359],{"class":264},[220,58011,58012,58014],{"class":222,"line":179},[220,58013,364],{"class":264},[220,58015,58016],{"class":346},"Line\n",[220,58018,58019,58021,58023],{"class":222,"line":389},[220,58020,9487],{"class":226},[220,58022,353],{"class":264},[220,58024,9443],{"class":230},[220,58026,58027],{"class":222,"line":399},[220,58028,1234],{"class":264},[220,58030,58031,58033,58035],{"class":222,"line":644},[220,58032,402],{"class":264},[220,58034,347],{"class":346},[220,58036,359],{"class":264},[212,58038,58039],{"className":409,"code":57999,"language":411,"meta":178,"style":178},[99,58040,58041,58049,58055,58063,58067],{"__ignoreMap":178},[220,58042,58043,58045,58047],{"class":222,"line":223},[220,58044,343],{"class":264},[220,58046,347],{"class":420},[220,58048,359],{"class":264},[220,58050,58051,58053],{"class":222,"line":179},[220,58052,364],{"class":264},[220,58054,58016],{"class":420},[220,58056,58057,58059,58061],{"class":222,"line":389},[220,58058,9487],{"class":226},[220,58060,353],{"class":260},[220,58062,9443],{"class":230},[220,58064,58065],{"class":222,"line":399},[220,58066,1234],{"class":264},[220,58068,58069,58071,58073],{"class":222,"line":644},[220,58070,402],{"class":264},[220,58072,347],{"class":420},[220,58074,359],{"class":264},[212,58076,58077],{"className":2844,"code":57999,"language":2846,"meta":178,"style":178},[99,58078,58079,58087,58093,58101,58105],{"__ignoreMap":178},[220,58080,58081,58083,58085],{"class":222,"line":223},[220,58082,343],{"class":264},[220,58084,347],{"class":420},[220,58086,359],{"class":264},[220,58088,58089,58091],{"class":222,"line":179},[220,58090,364],{"class":264},[220,58092,58016],{"class":420},[220,58094,58095,58097,58099],{"class":222,"line":389},[220,58096,9487],{"class":226},[220,58098,353],{"class":264},[220,58100,9443],{"class":230},[220,58102,58103],{"class":222,"line":399},[220,58104,1234],{"class":264},[220,58106,58107,58109,58111],{"class":222,"line":644},[220,58108,402],{"class":264},[220,58110,347],{"class":420},[220,58112,359],{"class":264},[212,58114,58115],{"className":468,"code":57999,"language":469,"meta":178,"style":178},[99,58116,58117,58125,58131,58139,58143],{"__ignoreMap":178},[220,58118,58119,58121,58123],{"class":222,"line":223},[220,58120,343],{"class":264},[220,58122,347],{"class":420},[220,58124,359],{"class":264},[220,58126,58127,58129],{"class":222,"line":179},[220,58128,364],{"class":264},[220,58130,58016],{"class":420},[220,58132,58133,58135,58137],{"class":222,"line":389},[220,58134,9487],{"class":226},[220,58136,353],{"class":260},[220,58138,9443],{"class":230},[220,58140,58141],{"class":222,"line":399},[220,58142,1234],{"class":264},[220,58144,58145,58147,58149],{"class":222,"line":644},[220,58146,402],{"class":264},[220,58148,347],{"class":420},[220,58150,359],{"class":264},[212,58152,58154],{"className":251,"code":58153,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Line', props: { color: '#ffffff' } }\n ]\n})\n",[99,58155,58156,58166,58170,58184,58188,58201,58205],{"__ignoreMap":178},[220,58157,58158,58160,58162,58164],{"class":222,"line":223},[220,58159,261],{"class":260},[220,58161,11364],{"class":264},[220,58163,268],{"class":260},[220,58165,11369],{"class":230},[220,58167,58168],{"class":222,"line":179},[220,58169,647],{"emptyLinePlaceholder":194},[220,58171,58172,58174,58176,58178,58180,58182],{"class":222,"line":389},[220,58173,1735],{"class":260},[220,58175,1738],{"class":420},[220,58177,1741],{"class":260},[220,58179,1744],{"class":260},[220,58181,1747],{"class":226},[220,58183,1750],{"class":264},[220,58185,58186],{"class":222,"line":399},[220,58187,1765],{"class":264},[220,58189,58190,58192,58195,58197,58199],{"class":222,"line":644},[220,58191,1770],{"class":264},[220,58193,58194],{"class":230},"'Line'",[220,58196,1776],{"class":264},[220,58198,10021],{"class":230},[220,58200,1782],{"class":264},[220,58202,58203],{"class":222,"line":650},[220,58204,1787],{"class":264},[220,58206,58207],{"class":222,"line":656},[220,58208,1792],{"class":264},[1504,58210,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58212},[58213,58214],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fline",{"title":57978,"description":57985},"docs\u002Fcomponents\u002FLine","ab3ZtkD2UknIoRhLNYwnFQeG43QnnizPr1pSHYkNhJg",{"id":58221,"title":58222,"body":58223,"category":32094,"componentType":25740,"description":58230,"extension":191,"meta":58547,"navigation":194,"path":58548,"requiresChild":194,"seo":58549,"stem":58550,"__hash__":58551},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":58224,"toc":58543},[58225,58228,58231,58233,58235,58238,58240,58541],[11,58226,58222],{"id":58227},"linearblur",[15,58229,58230],{},"Directional motion blur in a specific angle",[31771,58232],{"component":58222},[23,58234,31775],{"id":26391},[31777,58236],{":props":58237},"[{\"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,58239,31783],{"id":31782},[246,58241,58242,58298,58357,58413,58471],{":tabs":1557},[212,58243,58245],{"className":334,"code":58244,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,58246,58247,58255,58262,58270,58274,58282,58290],{"__ignoreMap":178},[220,58248,58249,58251,58253],{"class":222,"line":223},[220,58250,343],{"class":264},[220,58252,347],{"class":346},[220,58254,359],{"class":264},[220,58256,58257,58259],{"class":222,"line":179},[220,58258,364],{"class":264},[220,58260,58261],{"class":346},"LinearBlur\n",[220,58263,58264,58266,58268],{"class":222,"line":389},[220,58265,20228],{"class":226},[220,58267,353],{"class":264},[220,58269,43652],{"class":230},[220,58271,58272],{"class":222,"line":399},[220,58273,31819],{"class":264},[220,58275,58276,58278,58280],{"class":222,"line":644},[220,58277,2550],{"class":264},[220,58279,2553],{"class":346},[220,58281,386],{"class":264},[220,58283,58284,58286,58288],{"class":222,"line":650},[220,58285,2567],{"class":264},[220,58287,58222],{"class":346},[220,58289,359],{"class":264},[220,58291,58292,58294,58296],{"class":222,"line":656},[220,58293,402],{"class":264},[220,58295,347],{"class":346},[220,58297,359],{"class":264},[212,58299,58301],{"className":409,"code":58300,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,58302,58303,58311,58317,58329,58333,58341,58349],{"__ignoreMap":178},[220,58304,58305,58307,58309],{"class":222,"line":223},[220,58306,343],{"class":264},[220,58308,347],{"class":420},[220,58310,359],{"class":264},[220,58312,58313,58315],{"class":222,"line":179},[220,58314,364],{"class":264},[220,58316,58261],{"class":420},[220,58318,58319,58321,58323,58325,58327],{"class":222,"line":389},[220,58320,20339],{"class":226},[220,58322,353],{"class":260},[220,58324,743],{"class":264},[220,58326,23867],{"class":420},[220,58328,749],{"class":264},[220,58330,58331],{"class":222,"line":399},[220,58332,31819],{"class":264},[220,58334,58335,58337,58339],{"class":222,"line":644},[220,58336,2550],{"class":264},[220,58338,2553],{"class":420},[220,58340,386],{"class":264},[220,58342,58343,58345,58347],{"class":222,"line":650},[220,58344,2567],{"class":264},[220,58346,58222],{"class":420},[220,58348,359],{"class":264},[220,58350,58351,58353,58355],{"class":222,"line":656},[220,58352,402],{"class":264},[220,58354,347],{"class":420},[220,58356,359],{"class":264},[212,58358,58359],{"className":2844,"code":58300,"language":2846,"meta":178,"style":178},[99,58360,58361,58369,58375,58385,58389,58397,58405],{"__ignoreMap":178},[220,58362,58363,58365,58367],{"class":222,"line":223},[220,58364,343],{"class":264},[220,58366,347],{"class":420},[220,58368,359],{"class":264},[220,58370,58371,58373],{"class":222,"line":179},[220,58372,364],{"class":264},[220,58374,58261],{"class":420},[220,58376,58377,58379,58381,58383],{"class":222,"line":389},[220,58378,20339],{"class":226},[220,58380,29729],{"class":264},[220,58382,23867],{"class":420},[220,58384,749],{"class":264},[220,58386,58387],{"class":222,"line":399},[220,58388,31819],{"class":264},[220,58390,58391,58393,58395],{"class":222,"line":644},[220,58392,2550],{"class":264},[220,58394,2553],{"class":420},[220,58396,386],{"class":264},[220,58398,58399,58401,58403],{"class":222,"line":650},[220,58400,2567],{"class":264},[220,58402,58222],{"class":420},[220,58404,359],{"class":264},[220,58406,58407,58409,58411],{"class":222,"line":656},[220,58408,402],{"class":264},[220,58410,347],{"class":420},[220,58412,359],{"class":264},[212,58414,58415],{"className":468,"code":58300,"language":469,"meta":178,"style":178},[99,58416,58417,58425,58431,58443,58447,58455,58463],{"__ignoreMap":178},[220,58418,58419,58421,58423],{"class":222,"line":223},[220,58420,343],{"class":264},[220,58422,347],{"class":420},[220,58424,359],{"class":264},[220,58426,58427,58429],{"class":222,"line":179},[220,58428,364],{"class":264},[220,58430,58261],{"class":420},[220,58432,58433,58435,58437,58439,58441],{"class":222,"line":389},[220,58434,20339],{"class":226},[220,58436,353],{"class":260},[220,58438,743],{"class":264},[220,58440,23867],{"class":420},[220,58442,749],{"class":264},[220,58444,58445],{"class":222,"line":399},[220,58446,31819],{"class":264},[220,58448,58449,58451,58453],{"class":222,"line":644},[220,58450,2550],{"class":264},[220,58452,2553],{"class":420},[220,58454,386],{"class":264},[220,58456,58457,58459,58461],{"class":222,"line":650},[220,58458,2567],{"class":264},[220,58460,58222],{"class":420},[220,58462,359],{"class":264},[220,58464,58465,58467,58469],{"class":222,"line":656},[220,58466,402],{"class":264},[220,58468,347],{"class":420},[220,58470,359],{"class":264},[212,58472,58474],{"className":251,"code":58473,"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,58475,58476,58486,58490,58504,58508,58521,58529,58533,58537],{"__ignoreMap":178},[220,58477,58478,58480,58482,58484],{"class":222,"line":223},[220,58479,261],{"class":260},[220,58481,11364],{"class":264},[220,58483,268],{"class":260},[220,58485,11369],{"class":230},[220,58487,58488],{"class":222,"line":179},[220,58489,647],{"emptyLinePlaceholder":194},[220,58491,58492,58494,58496,58498,58500,58502],{"class":222,"line":389},[220,58493,1735],{"class":260},[220,58495,1738],{"class":420},[220,58497,1741],{"class":260},[220,58499,1744],{"class":260},[220,58501,1747],{"class":226},[220,58503,1750],{"class":264},[220,58505,58506],{"class":222,"line":399},[220,58507,1765],{"class":264},[220,58509,58510,58512,58515,58517,58519],{"class":222,"line":644},[220,58511,1770],{"class":264},[220,58513,58514],{"class":230},"'LinearBlur'",[220,58516,32063],{"class":264},[220,58518,23867],{"class":420},[220,58520,7397],{"class":264},[220,58522,58523,58525,58527],{"class":222,"line":650},[220,58524,6865],{"class":264},[220,58526,6409],{"class":230},[220,58528,2465],{"class":264},[220,58530,58531],{"class":222,"line":656},[220,58532,6882],{"class":264},[220,58534,58535],{"class":222,"line":673},[220,58536,1787],{"class":264},[220,58538,58539],{"class":222,"line":682},[220,58540,1792],{"class":264},[1504,58542,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":58544},[58545,58546],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":58222,"description":58230},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":58553,"title":367,"body":58554,"category":32923,"componentType":25734,"description":58561,"extension":191,"meta":58745,"navigation":194,"path":58746,"requiresChild":32390,"seo":58747,"stem":58748,"__hash__":58749},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":58555,"toc":58741},[58556,58559,58562,58564,58566,58569,58571,58739],[11,58557,367],{"id":58558},"lineargradient",[15,58560,58561],{},"Create smooth linear color gradients",[31771,58563],{"component":367},[23,58565,31775],{"id":26391},[31777,58567],{":props":58568},"[{\"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,58570,31783],{"id":31782},[246,58572,58573,58602,58630,58658,58686],{":tabs":1557},[212,58574,58576],{"className":334,"code":58575,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,58577,58578,58586,58594],{"__ignoreMap":178},[220,58579,58580,58582,58584],{"class":222,"line":223},[220,58581,343],{"class":264},[220,58583,347],{"class":346},[220,58585,359],{"class":264},[220,58587,58588,58590,58592],{"class":222,"line":179},[220,58589,364],{"class":264},[220,58591,367],{"class":346},[220,58593,386],{"class":264},[220,58595,58596,58598,58600],{"class":222,"line":389},[220,58597,402],{"class":264},[220,58599,347],{"class":346},[220,58601,359],{"class":264},[212,58603,58604],{"className":409,"code":58575,"language":411,"meta":178,"style":178},[99,58605,58606,58614,58622],{"__ignoreMap":178},[220,58607,58608,58610,58612],{"class":222,"line":223},[220,58609,343],{"class":264},[220,58611,347],{"class":420},[220,58613,359],{"class":264},[220,58615,58616,58618,58620],{"class":222,"line":179},[220,58617,364],{"class":264},[220,58619,367],{"class":420},[220,58621,386],{"class":264},[220,58623,58624,58626,58628],{"class":222,"line":389},[220,58625,402],{"class":264},[220,58627,347],{"class":420},[220,58629,359],{"class":264},[212,58631,58632],{"className":2844,"code":58575,"language":2846,"meta":178,"style":178},[99,58633,58634,58642,58650],{"__ignoreMap":178},[220,58635,58636,58638,58640],{"class":222,"line":223},[220,58637,343],{"class":264},[220,58639,347],{"class":420},[220,58641,359],{"class":264},[220,58643,58644,58646,58648],{"class":222,"line":179},[220,58645,364],{"class":264},[220,58647,367],{"class":420},[220,58649,386],{"class":264},[220,58651,58652,58654,58656],{"class":222,"line":389},[220,58653,402],{"class":264},[220,58655,347],{"class":420},[220,58657,359],{"class":264},[212,58659,58660],{"className":468,"code":58575,"language":469,"meta":178,"style":178},[99,58661,58662,58670,58678],{"__ignoreMap":178},[220,58663,58664,58666,58668],{"class":222,"line":223},[220,58665,343],{"class":264},[220,58667,347],{"class":420},[220,58669,359],{"class":264},[220,58671,58672,58674,58676],{"class":222,"line":179},[220,58673,364],{"class":264},[220,58675,367],{"class":420},[220,58677,386],{"class":264},[220,58679,58680,58682,58684],{"class":222,"line":389},[220,58681,402],{"class":264},[220,58683,347],{"class":420},[220,58685,359],{"class":264},[212,58687,58689],{"className":251,"code":58688,"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,58690,58691,58701,58705,58719,58723,58731,58735],{"__ignoreMap":178},[220,58692,58693,58695,58697,58699],{"class":222,"line":223},[220,58694,261],{"class":260},[220,58696,11364],{"class":264},[220,58698,268],{"class":260},[220,58700,11369],{"class":230},[220,58702,58703],{"class":222,"line":179},[220,58704,647],{"emptyLinePlaceholder":194},[220,58706,58707,58709,58711,58713,58715,58717],{"class":222,"line":389},[220,58708,1735],{"class":260},[220,58710,1738],{"class":420},[220,58712,1741],{"class":260},[220,58714,1744],{"class":260},[220,58716,1747],{"class":226},[220,58718,1750],{"class":264},[220,58720,58721],{"class":222,"line":399},[220,58722,1765],{"class":264},[220,58724,58725,58727,58729],{"class":222,"line":644},[220,58726,1770],{"class":264},[220,58728,2462],{"class":230},[220,58730,2465],{"class":264},[220,58732,58733],{"class":222,"line":650},[220,58734,1787],{"class":264},[220,58736,58737],{"class":222,"line":656},[220,58738,1792],{"class":264},[1504,58740,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":58742},[58743,58744],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":58561},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":58751,"title":58752,"body":58753,"category":33533,"componentType":25740,"description":58760,"extension":191,"meta":59021,"navigation":194,"path":59022,"requiresChild":194,"seo":59023,"stem":59024,"__hash__":59025},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":58754,"toc":59017},[58755,58758,58761,58763,58765,58768,58770,59015],[11,58756,58752],{"id":58757},"linearwipe",[15,58759,58760],{},"Wipe the content away along a straight edge with a soft feathered transition",[31771,58762],{"component":58752},[23,58764,31775],{"id":26391},[31777,58766],{":props":58767},"[{\"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,58769,31783],{"id":31782},[246,58771,58772,58817,58861,58905,58949],{":tabs":1557},[212,58773,58775],{"className":334,"code":58774,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,58776,58777,58785,58793,58801,58809],{"__ignoreMap":178},[220,58778,58779,58781,58783],{"class":222,"line":223},[220,58780,343],{"class":264},[220,58782,347],{"class":346},[220,58784,359],{"class":264},[220,58786,58787,58789,58791],{"class":222,"line":179},[220,58788,364],{"class":264},[220,58790,58752],{"class":346},[220,58792,359],{"class":264},[220,58794,58795,58797,58799],{"class":222,"line":389},[220,58796,2550],{"class":264},[220,58798,2553],{"class":346},[220,58800,386],{"class":264},[220,58802,58803,58805,58807],{"class":222,"line":399},[220,58804,2567],{"class":264},[220,58806,58752],{"class":346},[220,58808,359],{"class":264},[220,58810,58811,58813,58815],{"class":222,"line":644},[220,58812,402],{"class":264},[220,58814,347],{"class":346},[220,58816,359],{"class":264},[212,58818,58819],{"className":409,"code":58774,"language":411,"meta":178,"style":178},[99,58820,58821,58829,58837,58845,58853],{"__ignoreMap":178},[220,58822,58823,58825,58827],{"class":222,"line":223},[220,58824,343],{"class":264},[220,58826,347],{"class":420},[220,58828,359],{"class":264},[220,58830,58831,58833,58835],{"class":222,"line":179},[220,58832,364],{"class":264},[220,58834,58752],{"class":420},[220,58836,359],{"class":264},[220,58838,58839,58841,58843],{"class":222,"line":389},[220,58840,2550],{"class":264},[220,58842,2553],{"class":420},[220,58844,386],{"class":264},[220,58846,58847,58849,58851],{"class":222,"line":399},[220,58848,2567],{"class":264},[220,58850,58752],{"class":420},[220,58852,359],{"class":264},[220,58854,58855,58857,58859],{"class":222,"line":644},[220,58856,402],{"class":264},[220,58858,347],{"class":420},[220,58860,359],{"class":264},[212,58862,58863],{"className":2844,"code":58774,"language":2846,"meta":178,"style":178},[99,58864,58865,58873,58881,58889,58897],{"__ignoreMap":178},[220,58866,58867,58869,58871],{"class":222,"line":223},[220,58868,343],{"class":264},[220,58870,347],{"class":420},[220,58872,359],{"class":264},[220,58874,58875,58877,58879],{"class":222,"line":179},[220,58876,364],{"class":264},[220,58878,58752],{"class":420},[220,58880,359],{"class":264},[220,58882,58883,58885,58887],{"class":222,"line":389},[220,58884,2550],{"class":264},[220,58886,2553],{"class":420},[220,58888,386],{"class":264},[220,58890,58891,58893,58895],{"class":222,"line":399},[220,58892,2567],{"class":264},[220,58894,58752],{"class":420},[220,58896,359],{"class":264},[220,58898,58899,58901,58903],{"class":222,"line":644},[220,58900,402],{"class":264},[220,58902,347],{"class":420},[220,58904,359],{"class":264},[212,58906,58907],{"className":468,"code":58774,"language":469,"meta":178,"style":178},[99,58908,58909,58917,58925,58933,58941],{"__ignoreMap":178},[220,58910,58911,58913,58915],{"class":222,"line":223},[220,58912,343],{"class":264},[220,58914,347],{"class":420},[220,58916,359],{"class":264},[220,58918,58919,58921,58923],{"class":222,"line":179},[220,58920,364],{"class":264},[220,58922,58752],{"class":420},[220,58924,359],{"class":264},[220,58926,58927,58929,58931],{"class":222,"line":389},[220,58928,2550],{"class":264},[220,58930,2553],{"class":420},[220,58932,386],{"class":264},[220,58934,58935,58937,58939],{"class":222,"line":399},[220,58936,2567],{"class":264},[220,58938,58752],{"class":420},[220,58940,359],{"class":264},[220,58942,58943,58945,58947],{"class":222,"line":644},[220,58944,402],{"class":264},[220,58946,347],{"class":420},[220,58948,359],{"class":264},[212,58950,58952],{"className":251,"code":58951,"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,58953,58954,58964,58968,58982,58986,58995,59003,59007,59011],{"__ignoreMap":178},[220,58955,58956,58958,58960,58962],{"class":222,"line":223},[220,58957,261],{"class":260},[220,58959,11364],{"class":264},[220,58961,268],{"class":260},[220,58963,11369],{"class":230},[220,58965,58966],{"class":222,"line":179},[220,58967,647],{"emptyLinePlaceholder":194},[220,58969,58970,58972,58974,58976,58978,58980],{"class":222,"line":389},[220,58971,1735],{"class":260},[220,58973,1738],{"class":420},[220,58975,1741],{"class":260},[220,58977,1744],{"class":260},[220,58979,1747],{"class":226},[220,58981,1750],{"class":264},[220,58983,58984],{"class":222,"line":399},[220,58985,1765],{"class":264},[220,58987,58988,58990,58993],{"class":222,"line":644},[220,58989,1770],{"class":264},[220,58991,58992],{"class":230},"'LinearWipe'",[220,58994,6860],{"class":264},[220,58996,58997,58999,59001],{"class":222,"line":650},[220,58998,6865],{"class":264},[220,59000,6409],{"class":230},[220,59002,2465],{"class":264},[220,59004,59005],{"class":222,"line":656},[220,59006,6882],{"class":264},[220,59008,59009],{"class":222,"line":673},[220,59010,1787],{"class":264},[220,59012,59013],{"class":222,"line":682},[220,59014,1792],{"class":264},[1504,59016,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":59018},[59019,59020],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":58752,"description":58760},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":59027,"title":59028,"body":59029,"category":36429,"componentType":25734,"description":59036,"extension":191,"meta":59221,"navigation":194,"path":59222,"requiresChild":32390,"seo":59223,"stem":59224,"__hash__":59225},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":59030,"toc":59217},[59031,59034,59037,59039,59041,59044,59046,59215],[11,59032,59028],{"id":59033},"liquidmetal",[15,59035,59036],{},"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",[31771,59038],{"component":59028},[23,59040,31775],{"id":26391},[31777,59042],{":props":59043},"[{\"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\":\"bevelWidth\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal\"},{\"name\":\"bevelShape\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light\"},{\"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,59045,31783],{"id":31782},[246,59047,59048,59077,59105,59133,59161],{":tabs":1557},[212,59049,59051],{"className":334,"code":59050,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,59052,59053,59061,59069],{"__ignoreMap":178},[220,59054,59055,59057,59059],{"class":222,"line":223},[220,59056,343],{"class":264},[220,59058,347],{"class":346},[220,59060,359],{"class":264},[220,59062,59063,59065,59067],{"class":222,"line":179},[220,59064,364],{"class":264},[220,59066,59028],{"class":346},[220,59068,386],{"class":264},[220,59070,59071,59073,59075],{"class":222,"line":389},[220,59072,402],{"class":264},[220,59074,347],{"class":346},[220,59076,359],{"class":264},[212,59078,59079],{"className":409,"code":59050,"language":411,"meta":178,"style":178},[99,59080,59081,59089,59097],{"__ignoreMap":178},[220,59082,59083,59085,59087],{"class":222,"line":223},[220,59084,343],{"class":264},[220,59086,347],{"class":420},[220,59088,359],{"class":264},[220,59090,59091,59093,59095],{"class":222,"line":179},[220,59092,364],{"class":264},[220,59094,59028],{"class":420},[220,59096,386],{"class":264},[220,59098,59099,59101,59103],{"class":222,"line":389},[220,59100,402],{"class":264},[220,59102,347],{"class":420},[220,59104,359],{"class":264},[212,59106,59107],{"className":2844,"code":59050,"language":2846,"meta":178,"style":178},[99,59108,59109,59117,59125],{"__ignoreMap":178},[220,59110,59111,59113,59115],{"class":222,"line":223},[220,59112,343],{"class":264},[220,59114,347],{"class":420},[220,59116,359],{"class":264},[220,59118,59119,59121,59123],{"class":222,"line":179},[220,59120,364],{"class":264},[220,59122,59028],{"class":420},[220,59124,386],{"class":264},[220,59126,59127,59129,59131],{"class":222,"line":389},[220,59128,402],{"class":264},[220,59130,347],{"class":420},[220,59132,359],{"class":264},[212,59134,59135],{"className":468,"code":59050,"language":469,"meta":178,"style":178},[99,59136,59137,59145,59153],{"__ignoreMap":178},[220,59138,59139,59141,59143],{"class":222,"line":223},[220,59140,343],{"class":264},[220,59142,347],{"class":420},[220,59144,359],{"class":264},[220,59146,59147,59149,59151],{"class":222,"line":179},[220,59148,364],{"class":264},[220,59150,59028],{"class":420},[220,59152,386],{"class":264},[220,59154,59155,59157,59159],{"class":222,"line":389},[220,59156,402],{"class":264},[220,59158,347],{"class":420},[220,59160,359],{"class":264},[212,59162,59164],{"className":251,"code":59163,"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,59165,59166,59176,59180,59194,59198,59207,59211],{"__ignoreMap":178},[220,59167,59168,59170,59172,59174],{"class":222,"line":223},[220,59169,261],{"class":260},[220,59171,11364],{"class":264},[220,59173,268],{"class":260},[220,59175,11369],{"class":230},[220,59177,59178],{"class":222,"line":179},[220,59179,647],{"emptyLinePlaceholder":194},[220,59181,59182,59184,59186,59188,59190,59192],{"class":222,"line":389},[220,59183,1735],{"class":260},[220,59185,1738],{"class":420},[220,59187,1741],{"class":260},[220,59189,1744],{"class":260},[220,59191,1747],{"class":226},[220,59193,1750],{"class":264},[220,59195,59196],{"class":222,"line":399},[220,59197,1765],{"class":264},[220,59199,59200,59202,59205],{"class":222,"line":644},[220,59201,1770],{"class":264},[220,59203,59204],{"class":230},"'LiquidMetal'",[220,59206,2465],{"class":264},[220,59208,59209],{"class":222,"line":650},[220,59210,1787],{"class":264},[220,59212,59213],{"class":222,"line":656},[220,59214,1792],{"class":264},[1504,59216,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":59218},[59219,59220],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":59028,"description":59036},"docs\u002Fcomponents\u002FLiquidMetal","FIowKK2zaHoZPYdYKd0NL-Cnjlyt3SrPsDg1vpwSIog",{"id":59227,"title":59228,"body":59229,"category":35419,"componentType":25740,"description":59236,"extension":191,"meta":59599,"navigation":194,"path":59600,"requiresChild":194,"seo":59601,"stem":59602,"__hash__":59603},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":59230,"toc":59595},[59231,59234,59237,59239,59241,59244,59246,59593],[11,59232,59228],{"id":59233},"liquify",[15,59235,59236],{},"Liquid-like interactive deformation effect",[31771,59238],{"component":59228},[23,59240,31775],{"id":26391},[31777,59242],{":props":59243},"[{\"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,59245,31783],{"id":31782},[246,59247,59248,59312,59383,59449,59519],{":tabs":1557},[212,59249,59251],{"className":334,"code":59250,"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,59252,59253,59261,59268,59276,59284,59288,59296,59304],{"__ignoreMap":178},[220,59254,59255,59257,59259],{"class":222,"line":223},[220,59256,343],{"class":264},[220,59258,347],{"class":346},[220,59260,359],{"class":264},[220,59262,59263,59265],{"class":222,"line":179},[220,59264,364],{"class":264},[220,59266,59267],{"class":346},"Liquify\n",[220,59269,59270,59272,59274],{"class":222,"line":389},[220,59271,20228],{"class":226},[220,59273,353],{"class":264},[220,59275,42209],{"class":230},[220,59277,59278,59280,59282],{"class":222,"line":399},[220,59279,17262],{"class":226},[220,59281,353],{"class":264},[220,59283,36485],{"class":230},[220,59285,59286],{"class":222,"line":644},[220,59287,31819],{"class":264},[220,59289,59290,59292,59294],{"class":222,"line":650},[220,59291,2550],{"class":264},[220,59293,2553],{"class":346},[220,59295,386],{"class":264},[220,59297,59298,59300,59302],{"class":222,"line":656},[220,59299,2567],{"class":264},[220,59301,59228],{"class":346},[220,59303,359],{"class":264},[220,59305,59306,59308,59310],{"class":222,"line":673},[220,59307,402],{"class":264},[220,59309,347],{"class":346},[220,59311,359],{"class":264},[212,59313,59315],{"className":409,"code":59314,"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,59316,59317,59325,59331,59343,59355,59359,59367,59375],{"__ignoreMap":178},[220,59318,59319,59321,59323],{"class":222,"line":223},[220,59320,343],{"class":264},[220,59322,347],{"class":420},[220,59324,359],{"class":264},[220,59326,59327,59329],{"class":222,"line":179},[220,59328,364],{"class":264},[220,59330,59267],{"class":420},[220,59332,59333,59335,59337,59339,59341],{"class":222,"line":389},[220,59334,20339],{"class":226},[220,59336,353],{"class":260},[220,59338,743],{"class":264},[220,59340,23707],{"class":420},[220,59342,749],{"class":264},[220,59344,59345,59347,59349,59351,59353],{"class":222,"line":399},[220,59346,9497],{"class":226},[220,59348,353],{"class":260},[220,59350,743],{"class":264},[220,59352,8528],{"class":420},[220,59354,749],{"class":264},[220,59356,59357],{"class":222,"line":644},[220,59358,31819],{"class":264},[220,59360,59361,59363,59365],{"class":222,"line":650},[220,59362,2550],{"class":264},[220,59364,2553],{"class":420},[220,59366,386],{"class":264},[220,59368,59369,59371,59373],{"class":222,"line":656},[220,59370,2567],{"class":264},[220,59372,59228],{"class":420},[220,59374,359],{"class":264},[220,59376,59377,59379,59381],{"class":222,"line":673},[220,59378,402],{"class":264},[220,59380,347],{"class":420},[220,59382,359],{"class":264},[212,59384,59385],{"className":2844,"code":59314,"language":2846,"meta":178,"style":178},[99,59386,59387,59395,59401,59411,59421,59425,59433,59441],{"__ignoreMap":178},[220,59388,59389,59391,59393],{"class":222,"line":223},[220,59390,343],{"class":264},[220,59392,347],{"class":420},[220,59394,359],{"class":264},[220,59396,59397,59399],{"class":222,"line":179},[220,59398,364],{"class":264},[220,59400,59267],{"class":420},[220,59402,59403,59405,59407,59409],{"class":222,"line":389},[220,59404,20339],{"class":226},[220,59406,29729],{"class":264},[220,59408,23707],{"class":420},[220,59410,749],{"class":264},[220,59412,59413,59415,59417,59419],{"class":222,"line":399},[220,59414,9497],{"class":226},[220,59416,29729],{"class":264},[220,59418,8528],{"class":420},[220,59420,749],{"class":264},[220,59422,59423],{"class":222,"line":644},[220,59424,31819],{"class":264},[220,59426,59427,59429,59431],{"class":222,"line":650},[220,59428,2550],{"class":264},[220,59430,2553],{"class":420},[220,59432,386],{"class":264},[220,59434,59435,59437,59439],{"class":222,"line":656},[220,59436,2567],{"class":264},[220,59438,59228],{"class":420},[220,59440,359],{"class":264},[220,59442,59443,59445,59447],{"class":222,"line":673},[220,59444,402],{"class":264},[220,59446,347],{"class":420},[220,59448,359],{"class":264},[212,59450,59451],{"className":468,"code":59314,"language":469,"meta":178,"style":178},[99,59452,59453,59461,59467,59479,59491,59495,59503,59511],{"__ignoreMap":178},[220,59454,59455,59457,59459],{"class":222,"line":223},[220,59456,343],{"class":264},[220,59458,347],{"class":420},[220,59460,359],{"class":264},[220,59462,59463,59465],{"class":222,"line":179},[220,59464,364],{"class":264},[220,59466,59267],{"class":420},[220,59468,59469,59471,59473,59475,59477],{"class":222,"line":389},[220,59470,20339],{"class":226},[220,59472,353],{"class":260},[220,59474,743],{"class":264},[220,59476,23707],{"class":420},[220,59478,749],{"class":264},[220,59480,59481,59483,59485,59487,59489],{"class":222,"line":399},[220,59482,9497],{"class":226},[220,59484,353],{"class":260},[220,59486,743],{"class":264},[220,59488,8528],{"class":420},[220,59490,749],{"class":264},[220,59492,59493],{"class":222,"line":644},[220,59494,31819],{"class":264},[220,59496,59497,59499,59501],{"class":222,"line":650},[220,59498,2550],{"class":264},[220,59500,2553],{"class":420},[220,59502,386],{"class":264},[220,59504,59505,59507,59509],{"class":222,"line":656},[220,59506,2567],{"class":264},[220,59508,59228],{"class":420},[220,59510,359],{"class":264},[220,59512,59513,59515,59517],{"class":222,"line":673},[220,59514,402],{"class":264},[220,59516,347],{"class":420},[220,59518,359],{"class":264},[212,59520,59522],{"className":251,"code":59521,"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,59523,59524,59534,59538,59552,59556,59573,59581,59585,59589],{"__ignoreMap":178},[220,59525,59526,59528,59530,59532],{"class":222,"line":223},[220,59527,261],{"class":260},[220,59529,11364],{"class":264},[220,59531,268],{"class":260},[220,59533,11369],{"class":230},[220,59535,59536],{"class":222,"line":179},[220,59537,647],{"emptyLinePlaceholder":194},[220,59539,59540,59542,59544,59546,59548,59550],{"class":222,"line":389},[220,59541,1735],{"class":260},[220,59543,1738],{"class":420},[220,59545,1741],{"class":260},[220,59547,1744],{"class":260},[220,59549,1747],{"class":226},[220,59551,1750],{"class":264},[220,59553,59554],{"class":222,"line":399},[220,59555,1765],{"class":264},[220,59557,59558,59560,59563,59565,59567,59569,59571],{"class":222,"line":644},[220,59559,1770],{"class":264},[220,59561,59562],{"class":230},"'Liquify'",[220,59564,32063],{"class":264},[220,59566,23707],{"class":420},[220,59568,6417],{"class":264},[220,59570,8528],{"class":420},[220,59572,7397],{"class":264},[220,59574,59575,59577,59579],{"class":222,"line":650},[220,59576,6865],{"class":264},[220,59578,6409],{"class":230},[220,59580,2465],{"class":264},[220,59582,59583],{"class":222,"line":656},[220,59584,6882],{"class":264},[220,59586,59587],{"class":222,"line":673},[220,59588,1787],{"class":264},[220,59590,59591],{"class":222,"line":682},[220,59592,1792],{"class":264},[1504,59594,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59596},[59597,59598],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":59228,"description":59236},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":59605,"title":59606,"body":59607,"category":35419,"componentType":25734,"description":59614,"extension":191,"meta":59799,"navigation":194,"path":59800,"requiresChild":32390,"seo":59801,"stem":59802,"__hash__":59803},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":59608,"toc":59795},[59609,59612,59615,59617,59619,59622,59624,59793],[11,59610,59606],{"id":59611},"magneticfilings",[15,59613,59614],{},"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",[31771,59616],{"component":59606},[23,59618,31775],{"id":26391},[31777,59620],{":props":59621},"[{\"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,59623,31783],{"id":31782},[246,59625,59626,59655,59683,59711,59739],{":tabs":1557},[212,59627,59629],{"className":334,"code":59628,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,59630,59631,59639,59647],{"__ignoreMap":178},[220,59632,59633,59635,59637],{"class":222,"line":223},[220,59634,343],{"class":264},[220,59636,347],{"class":346},[220,59638,359],{"class":264},[220,59640,59641,59643,59645],{"class":222,"line":179},[220,59642,364],{"class":264},[220,59644,59606],{"class":346},[220,59646,386],{"class":264},[220,59648,59649,59651,59653],{"class":222,"line":389},[220,59650,402],{"class":264},[220,59652,347],{"class":346},[220,59654,359],{"class":264},[212,59656,59657],{"className":409,"code":59628,"language":411,"meta":178,"style":178},[99,59658,59659,59667,59675],{"__ignoreMap":178},[220,59660,59661,59663,59665],{"class":222,"line":223},[220,59662,343],{"class":264},[220,59664,347],{"class":420},[220,59666,359],{"class":264},[220,59668,59669,59671,59673],{"class":222,"line":179},[220,59670,364],{"class":264},[220,59672,59606],{"class":420},[220,59674,386],{"class":264},[220,59676,59677,59679,59681],{"class":222,"line":389},[220,59678,402],{"class":264},[220,59680,347],{"class":420},[220,59682,359],{"class":264},[212,59684,59685],{"className":2844,"code":59628,"language":2846,"meta":178,"style":178},[99,59686,59687,59695,59703],{"__ignoreMap":178},[220,59688,59689,59691,59693],{"class":222,"line":223},[220,59690,343],{"class":264},[220,59692,347],{"class":420},[220,59694,359],{"class":264},[220,59696,59697,59699,59701],{"class":222,"line":179},[220,59698,364],{"class":264},[220,59700,59606],{"class":420},[220,59702,386],{"class":264},[220,59704,59705,59707,59709],{"class":222,"line":389},[220,59706,402],{"class":264},[220,59708,347],{"class":420},[220,59710,359],{"class":264},[212,59712,59713],{"className":468,"code":59628,"language":469,"meta":178,"style":178},[99,59714,59715,59723,59731],{"__ignoreMap":178},[220,59716,59717,59719,59721],{"class":222,"line":223},[220,59718,343],{"class":264},[220,59720,347],{"class":420},[220,59722,359],{"class":264},[220,59724,59725,59727,59729],{"class":222,"line":179},[220,59726,364],{"class":264},[220,59728,59606],{"class":420},[220,59730,386],{"class":264},[220,59732,59733,59735,59737],{"class":222,"line":389},[220,59734,402],{"class":264},[220,59736,347],{"class":420},[220,59738,359],{"class":264},[212,59740,59742],{"className":251,"code":59741,"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,59743,59744,59754,59758,59772,59776,59785,59789],{"__ignoreMap":178},[220,59745,59746,59748,59750,59752],{"class":222,"line":223},[220,59747,261],{"class":260},[220,59749,11364],{"class":264},[220,59751,268],{"class":260},[220,59753,11369],{"class":230},[220,59755,59756],{"class":222,"line":179},[220,59757,647],{"emptyLinePlaceholder":194},[220,59759,59760,59762,59764,59766,59768,59770],{"class":222,"line":389},[220,59761,1735],{"class":260},[220,59763,1738],{"class":420},[220,59765,1741],{"class":260},[220,59767,1744],{"class":260},[220,59769,1747],{"class":226},[220,59771,1750],{"class":264},[220,59773,59774],{"class":222,"line":399},[220,59775,1765],{"class":264},[220,59777,59778,59780,59783],{"class":222,"line":644},[220,59779,1770],{"class":264},[220,59781,59782],{"class":230},"'MagneticFilings'",[220,59784,2465],{"class":264},[220,59786,59787],{"class":222,"line":650},[220,59788,1787],{"class":264},[220,59790,59791],{"class":222,"line":656},[220,59792,1792],{"class":264},[1504,59794,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":59796},[59797,59798],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":59606,"description":59614},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":59805,"title":59806,"body":59807,"category":32923,"componentType":25734,"description":59814,"extension":191,"meta":59999,"navigation":194,"path":60000,"requiresChild":32390,"seo":60001,"stem":60002,"__hash__":60003},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":59808,"toc":59995},[59809,59812,59815,59817,59819,59822,59824,59993],[11,59810,59806],{"id":59811},"marble",[15,59813,59814],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31771,59816],{"component":59806},[23,59818,31775],{"id":26391},[31777,59820],{":props":59821},"[{\"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,59823,31783],{"id":31782},[246,59825,59826,59855,59883,59911,59939],{":tabs":1557},[212,59827,59829],{"className":334,"code":59828,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,59830,59831,59839,59847],{"__ignoreMap":178},[220,59832,59833,59835,59837],{"class":222,"line":223},[220,59834,343],{"class":264},[220,59836,347],{"class":346},[220,59838,359],{"class":264},[220,59840,59841,59843,59845],{"class":222,"line":179},[220,59842,364],{"class":264},[220,59844,59806],{"class":346},[220,59846,386],{"class":264},[220,59848,59849,59851,59853],{"class":222,"line":389},[220,59850,402],{"class":264},[220,59852,347],{"class":346},[220,59854,359],{"class":264},[212,59856,59857],{"className":409,"code":59828,"language":411,"meta":178,"style":178},[99,59858,59859,59867,59875],{"__ignoreMap":178},[220,59860,59861,59863,59865],{"class":222,"line":223},[220,59862,343],{"class":264},[220,59864,347],{"class":420},[220,59866,359],{"class":264},[220,59868,59869,59871,59873],{"class":222,"line":179},[220,59870,364],{"class":264},[220,59872,59806],{"class":420},[220,59874,386],{"class":264},[220,59876,59877,59879,59881],{"class":222,"line":389},[220,59878,402],{"class":264},[220,59880,347],{"class":420},[220,59882,359],{"class":264},[212,59884,59885],{"className":2844,"code":59828,"language":2846,"meta":178,"style":178},[99,59886,59887,59895,59903],{"__ignoreMap":178},[220,59888,59889,59891,59893],{"class":222,"line":223},[220,59890,343],{"class":264},[220,59892,347],{"class":420},[220,59894,359],{"class":264},[220,59896,59897,59899,59901],{"class":222,"line":179},[220,59898,364],{"class":264},[220,59900,59806],{"class":420},[220,59902,386],{"class":264},[220,59904,59905,59907,59909],{"class":222,"line":389},[220,59906,402],{"class":264},[220,59908,347],{"class":420},[220,59910,359],{"class":264},[212,59912,59913],{"className":468,"code":59828,"language":469,"meta":178,"style":178},[99,59914,59915,59923,59931],{"__ignoreMap":178},[220,59916,59917,59919,59921],{"class":222,"line":223},[220,59918,343],{"class":264},[220,59920,347],{"class":420},[220,59922,359],{"class":264},[220,59924,59925,59927,59929],{"class":222,"line":179},[220,59926,364],{"class":264},[220,59928,59806],{"class":420},[220,59930,386],{"class":264},[220,59932,59933,59935,59937],{"class":222,"line":389},[220,59934,402],{"class":264},[220,59936,347],{"class":420},[220,59938,359],{"class":264},[212,59940,59942],{"className":251,"code":59941,"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,59943,59944,59954,59958,59972,59976,59985,59989],{"__ignoreMap":178},[220,59945,59946,59948,59950,59952],{"class":222,"line":223},[220,59947,261],{"class":260},[220,59949,11364],{"class":264},[220,59951,268],{"class":260},[220,59953,11369],{"class":230},[220,59955,59956],{"class":222,"line":179},[220,59957,647],{"emptyLinePlaceholder":194},[220,59959,59960,59962,59964,59966,59968,59970],{"class":222,"line":389},[220,59961,1735],{"class":260},[220,59963,1738],{"class":420},[220,59965,1741],{"class":260},[220,59967,1744],{"class":260},[220,59969,1747],{"class":226},[220,59971,1750],{"class":264},[220,59973,59974],{"class":222,"line":399},[220,59975,1765],{"class":264},[220,59977,59978,59980,59983],{"class":222,"line":644},[220,59979,1770],{"class":264},[220,59981,59982],{"class":230},"'Marble'",[220,59984,2465],{"class":264},[220,59986,59987],{"class":222,"line":650},[220,59988,1787],{"class":264},[220,59990,59991],{"class":222,"line":656},[220,59992,1792],{"class":264},[1504,59994,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":59996},[59997,59998],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":59806,"description":59814},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":60005,"title":60006,"body":60007,"category":32923,"componentType":25734,"description":60014,"extension":191,"meta":60199,"navigation":194,"path":60200,"requiresChild":32390,"seo":60201,"stem":60202,"__hash__":60203},"components\u002Fdocs\u002Fcomponents\u002FMeshGradient.md","MeshGradient",{"type":8,"value":60008,"toc":60195},[60009,60012,60015,60017,60019,60022,60024,60193],[11,60010,60006],{"id":60011},"meshgradient",[15,60013,60014],{},"Flowing mesh gradient of soft drifting color swaths whose seams wrap through the palette",[31771,60016],{"component":60006},[23,60018,31775],{"id":26391},[31777,60020],{":props":60021},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#1a0533\",\"description\":\"First gradient color (two-color fallback when stops are cleared)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffdf8e\",\"description\":\"Second gradient color (two-color fallback when stops are cleared)\"},{\"name\":\"stops\",\"type\":\"object\",\"default\":\"[{\\\"color\\\":\\\"#1a0533\\\",\\\"position\\\":0},{\\\"color\\\":\\\"#6d2fd1\\\",\\\"position\\\":0.26},{\\\"color\\\":\\\"#e04b9e\\\",\\\"position\\\":0.52},{\\\"color\\\":\\\"#ff8c42\\\",\\\"position\\\":0.76},{\\\"color\\\":\\\"#ffdf8e\\\",\\\"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 color interpolation\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of color points scattered across the canvas\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"2\",\"description\":\"How smoothly the color points blend into each other\"},{\"name\":\"variation\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Varies edge softness across the canvas — some color boundaries crisp, others diffuse\"},{\"name\":\"swirl\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Vortex rotation that spirals the field around the frame centre — negative values spin the other way\"},{\"name\":\"drift\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the color points wander from their home positions\"},{\"name\":\"wrapping\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Wraps the palette back through itself where colors meet — banded seams where the field pinches, smooth elsewhere\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for the point layout and palette assignment\"}]",[23,60023,31783],{"id":31782},[246,60025,60026,60055,60083,60111,60139],{":tabs":1557},[212,60027,60029],{"className":334,"code":60028,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMeshGradient \u002F>\n\u003C\u002FShader>\n",[99,60030,60031,60039,60047],{"__ignoreMap":178},[220,60032,60033,60035,60037],{"class":222,"line":223},[220,60034,343],{"class":264},[220,60036,347],{"class":346},[220,60038,359],{"class":264},[220,60040,60041,60043,60045],{"class":222,"line":179},[220,60042,364],{"class":264},[220,60044,60006],{"class":346},[220,60046,386],{"class":264},[220,60048,60049,60051,60053],{"class":222,"line":389},[220,60050,402],{"class":264},[220,60052,347],{"class":346},[220,60054,359],{"class":264},[212,60056,60057],{"className":409,"code":60028,"language":411,"meta":178,"style":178},[99,60058,60059,60067,60075],{"__ignoreMap":178},[220,60060,60061,60063,60065],{"class":222,"line":223},[220,60062,343],{"class":264},[220,60064,347],{"class":420},[220,60066,359],{"class":264},[220,60068,60069,60071,60073],{"class":222,"line":179},[220,60070,364],{"class":264},[220,60072,60006],{"class":420},[220,60074,386],{"class":264},[220,60076,60077,60079,60081],{"class":222,"line":389},[220,60078,402],{"class":264},[220,60080,347],{"class":420},[220,60082,359],{"class":264},[212,60084,60085],{"className":2844,"code":60028,"language":2846,"meta":178,"style":178},[99,60086,60087,60095,60103],{"__ignoreMap":178},[220,60088,60089,60091,60093],{"class":222,"line":223},[220,60090,343],{"class":264},[220,60092,347],{"class":420},[220,60094,359],{"class":264},[220,60096,60097,60099,60101],{"class":222,"line":179},[220,60098,364],{"class":264},[220,60100,60006],{"class":420},[220,60102,386],{"class":264},[220,60104,60105,60107,60109],{"class":222,"line":389},[220,60106,402],{"class":264},[220,60108,347],{"class":420},[220,60110,359],{"class":264},[212,60112,60113],{"className":468,"code":60028,"language":469,"meta":178,"style":178},[99,60114,60115,60123,60131],{"__ignoreMap":178},[220,60116,60117,60119,60121],{"class":222,"line":223},[220,60118,343],{"class":264},[220,60120,347],{"class":420},[220,60122,359],{"class":264},[220,60124,60125,60127,60129],{"class":222,"line":179},[220,60126,364],{"class":264},[220,60128,60006],{"class":420},[220,60130,386],{"class":264},[220,60132,60133,60135,60137],{"class":222,"line":389},[220,60134,402],{"class":264},[220,60136,347],{"class":420},[220,60138,359],{"class":264},[212,60140,60142],{"className":251,"code":60141,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MeshGradient', props: {} }\n ]\n})\n",[99,60143,60144,60154,60158,60172,60176,60185,60189],{"__ignoreMap":178},[220,60145,60146,60148,60150,60152],{"class":222,"line":223},[220,60147,261],{"class":260},[220,60149,11364],{"class":264},[220,60151,268],{"class":260},[220,60153,11369],{"class":230},[220,60155,60156],{"class":222,"line":179},[220,60157,647],{"emptyLinePlaceholder":194},[220,60159,60160,60162,60164,60166,60168,60170],{"class":222,"line":389},[220,60161,1735],{"class":260},[220,60163,1738],{"class":420},[220,60165,1741],{"class":260},[220,60167,1744],{"class":260},[220,60169,1747],{"class":226},[220,60171,1750],{"class":264},[220,60173,60174],{"class":222,"line":399},[220,60175,1765],{"class":264},[220,60177,60178,60180,60183],{"class":222,"line":644},[220,60179,1770],{"class":264},[220,60181,60182],{"class":230},"'MeshGradient'",[220,60184,2465],{"class":264},[220,60186,60187],{"class":222,"line":650},[220,60188,1787],{"class":264},[220,60190,60191],{"class":222,"line":656},[220,60192,1792],{"class":264},[1504,60194,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":60196},[60197,60198],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fmeshgradient",{"title":60006,"description":60014},"docs\u002Fcomponents\u002FMeshGradient","sweOkwIveyV9WqTLlAHmar_FEF9AX9Nafe1F1gsPXmY",{"id":60205,"title":60206,"body":60207,"category":33256,"componentType":25740,"description":60214,"extension":191,"meta":60475,"navigation":194,"path":60476,"requiresChild":194,"seo":60477,"stem":60478,"__hash__":60479},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":60208,"toc":60471},[60209,60212,60215,60217,60219,60222,60224,60469],[11,60210,60206],{"id":60211},"mirror",[15,60213,60214],{},"Mirror content across a line defined by center point and angle",[31771,60216],{"component":60206},[23,60218,31775],{"id":26391},[31777,60220],{":props":60221},"[{\"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,60223,31783],{"id":31782},[246,60225,60226,60271,60315,60359,60403],{":tabs":1557},[212,60227,60229],{"className":334,"code":60228,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,60230,60231,60239,60247,60255,60263],{"__ignoreMap":178},[220,60232,60233,60235,60237],{"class":222,"line":223},[220,60234,343],{"class":264},[220,60236,347],{"class":346},[220,60238,359],{"class":264},[220,60240,60241,60243,60245],{"class":222,"line":179},[220,60242,364],{"class":264},[220,60244,60206],{"class":346},[220,60246,359],{"class":264},[220,60248,60249,60251,60253],{"class":222,"line":389},[220,60250,2550],{"class":264},[220,60252,2553],{"class":346},[220,60254,386],{"class":264},[220,60256,60257,60259,60261],{"class":222,"line":399},[220,60258,2567],{"class":264},[220,60260,60206],{"class":346},[220,60262,359],{"class":264},[220,60264,60265,60267,60269],{"class":222,"line":644},[220,60266,402],{"class":264},[220,60268,347],{"class":346},[220,60270,359],{"class":264},[212,60272,60273],{"className":409,"code":60228,"language":411,"meta":178,"style":178},[99,60274,60275,60283,60291,60299,60307],{"__ignoreMap":178},[220,60276,60277,60279,60281],{"class":222,"line":223},[220,60278,343],{"class":264},[220,60280,347],{"class":420},[220,60282,359],{"class":264},[220,60284,60285,60287,60289],{"class":222,"line":179},[220,60286,364],{"class":264},[220,60288,60206],{"class":420},[220,60290,359],{"class":264},[220,60292,60293,60295,60297],{"class":222,"line":389},[220,60294,2550],{"class":264},[220,60296,2553],{"class":420},[220,60298,386],{"class":264},[220,60300,60301,60303,60305],{"class":222,"line":399},[220,60302,2567],{"class":264},[220,60304,60206],{"class":420},[220,60306,359],{"class":264},[220,60308,60309,60311,60313],{"class":222,"line":644},[220,60310,402],{"class":264},[220,60312,347],{"class":420},[220,60314,359],{"class":264},[212,60316,60317],{"className":2844,"code":60228,"language":2846,"meta":178,"style":178},[99,60318,60319,60327,60335,60343,60351],{"__ignoreMap":178},[220,60320,60321,60323,60325],{"class":222,"line":223},[220,60322,343],{"class":264},[220,60324,347],{"class":420},[220,60326,359],{"class":264},[220,60328,60329,60331,60333],{"class":222,"line":179},[220,60330,364],{"class":264},[220,60332,60206],{"class":420},[220,60334,359],{"class":264},[220,60336,60337,60339,60341],{"class":222,"line":389},[220,60338,2550],{"class":264},[220,60340,2553],{"class":420},[220,60342,386],{"class":264},[220,60344,60345,60347,60349],{"class":222,"line":399},[220,60346,2567],{"class":264},[220,60348,60206],{"class":420},[220,60350,359],{"class":264},[220,60352,60353,60355,60357],{"class":222,"line":644},[220,60354,402],{"class":264},[220,60356,347],{"class":420},[220,60358,359],{"class":264},[212,60360,60361],{"className":468,"code":60228,"language":469,"meta":178,"style":178},[99,60362,60363,60371,60379,60387,60395],{"__ignoreMap":178},[220,60364,60365,60367,60369],{"class":222,"line":223},[220,60366,343],{"class":264},[220,60368,347],{"class":420},[220,60370,359],{"class":264},[220,60372,60373,60375,60377],{"class":222,"line":179},[220,60374,364],{"class":264},[220,60376,60206],{"class":420},[220,60378,359],{"class":264},[220,60380,60381,60383,60385],{"class":222,"line":389},[220,60382,2550],{"class":264},[220,60384,2553],{"class":420},[220,60386,386],{"class":264},[220,60388,60389,60391,60393],{"class":222,"line":399},[220,60390,2567],{"class":264},[220,60392,60206],{"class":420},[220,60394,359],{"class":264},[220,60396,60397,60399,60401],{"class":222,"line":644},[220,60398,402],{"class":264},[220,60400,347],{"class":420},[220,60402,359],{"class":264},[212,60404,60406],{"className":251,"code":60405,"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,60407,60408,60418,60422,60436,60440,60449,60457,60461,60465],{"__ignoreMap":178},[220,60409,60410,60412,60414,60416],{"class":222,"line":223},[220,60411,261],{"class":260},[220,60413,11364],{"class":264},[220,60415,268],{"class":260},[220,60417,11369],{"class":230},[220,60419,60420],{"class":222,"line":179},[220,60421,647],{"emptyLinePlaceholder":194},[220,60423,60424,60426,60428,60430,60432,60434],{"class":222,"line":389},[220,60425,1735],{"class":260},[220,60427,1738],{"class":420},[220,60429,1741],{"class":260},[220,60431,1744],{"class":260},[220,60433,1747],{"class":226},[220,60435,1750],{"class":264},[220,60437,60438],{"class":222,"line":399},[220,60439,1765],{"class":264},[220,60441,60442,60444,60447],{"class":222,"line":644},[220,60443,1770],{"class":264},[220,60445,60446],{"class":230},"'Mirror'",[220,60448,6860],{"class":264},[220,60450,60451,60453,60455],{"class":222,"line":650},[220,60452,6865],{"class":264},[220,60454,6409],{"class":230},[220,60456,2465],{"class":264},[220,60458,60459],{"class":222,"line":656},[220,60460,6882],{"class":264},[220,60462,60463],{"class":222,"line":673},[220,60464,1787],{"class":264},[220,60466,60467],{"class":222,"line":682},[220,60468,1792],{"class":264},[1504,60470,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":60472},[60473,60474],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":60206,"description":60214},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":60481,"title":60482,"body":60483,"category":32923,"componentType":25734,"description":60490,"extension":191,"meta":60675,"navigation":194,"path":60676,"requiresChild":32390,"seo":60677,"stem":60678,"__hash__":60679},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":60484,"toc":60671},[60485,60488,60491,60493,60495,60498,60500,60669],[11,60486,60482],{"id":60487},"multipointgradient",[15,60489,60490],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31771,60492],{"component":60482},[23,60494,31775],{"id":26391},[31777,60496],{":props":60497},"[{\"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,60499,31783],{"id":31782},[246,60501,60502,60531,60559,60587,60615],{":tabs":1557},[212,60503,60505],{"className":334,"code":60504,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,60506,60507,60515,60523],{"__ignoreMap":178},[220,60508,60509,60511,60513],{"class":222,"line":223},[220,60510,343],{"class":264},[220,60512,347],{"class":346},[220,60514,359],{"class":264},[220,60516,60517,60519,60521],{"class":222,"line":179},[220,60518,364],{"class":264},[220,60520,60482],{"class":346},[220,60522,386],{"class":264},[220,60524,60525,60527,60529],{"class":222,"line":389},[220,60526,402],{"class":264},[220,60528,347],{"class":346},[220,60530,359],{"class":264},[212,60532,60533],{"className":409,"code":60504,"language":411,"meta":178,"style":178},[99,60534,60535,60543,60551],{"__ignoreMap":178},[220,60536,60537,60539,60541],{"class":222,"line":223},[220,60538,343],{"class":264},[220,60540,347],{"class":420},[220,60542,359],{"class":264},[220,60544,60545,60547,60549],{"class":222,"line":179},[220,60546,364],{"class":264},[220,60548,60482],{"class":420},[220,60550,386],{"class":264},[220,60552,60553,60555,60557],{"class":222,"line":389},[220,60554,402],{"class":264},[220,60556,347],{"class":420},[220,60558,359],{"class":264},[212,60560,60561],{"className":2844,"code":60504,"language":2846,"meta":178,"style":178},[99,60562,60563,60571,60579],{"__ignoreMap":178},[220,60564,60565,60567,60569],{"class":222,"line":223},[220,60566,343],{"class":264},[220,60568,347],{"class":420},[220,60570,359],{"class":264},[220,60572,60573,60575,60577],{"class":222,"line":179},[220,60574,364],{"class":264},[220,60576,60482],{"class":420},[220,60578,386],{"class":264},[220,60580,60581,60583,60585],{"class":222,"line":389},[220,60582,402],{"class":264},[220,60584,347],{"class":420},[220,60586,359],{"class":264},[212,60588,60589],{"className":468,"code":60504,"language":469,"meta":178,"style":178},[99,60590,60591,60599,60607],{"__ignoreMap":178},[220,60592,60593,60595,60597],{"class":222,"line":223},[220,60594,343],{"class":264},[220,60596,347],{"class":420},[220,60598,359],{"class":264},[220,60600,60601,60603,60605],{"class":222,"line":179},[220,60602,364],{"class":264},[220,60604,60482],{"class":420},[220,60606,386],{"class":264},[220,60608,60609,60611,60613],{"class":222,"line":389},[220,60610,402],{"class":264},[220,60612,347],{"class":420},[220,60614,359],{"class":264},[212,60616,60618],{"className":251,"code":60617,"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,60619,60620,60630,60634,60648,60652,60661,60665],{"__ignoreMap":178},[220,60621,60622,60624,60626,60628],{"class":222,"line":223},[220,60623,261],{"class":260},[220,60625,11364],{"class":264},[220,60627,268],{"class":260},[220,60629,11369],{"class":230},[220,60631,60632],{"class":222,"line":179},[220,60633,647],{"emptyLinePlaceholder":194},[220,60635,60636,60638,60640,60642,60644,60646],{"class":222,"line":389},[220,60637,1735],{"class":260},[220,60639,1738],{"class":420},[220,60641,1741],{"class":260},[220,60643,1744],{"class":260},[220,60645,1747],{"class":226},[220,60647,1750],{"class":264},[220,60649,60650],{"class":222,"line":399},[220,60651,1765],{"class":264},[220,60653,60654,60656,60659],{"class":222,"line":644},[220,60655,1770],{"class":264},[220,60657,60658],{"class":230},"'MultiPointGradient'",[220,60660,2465],{"class":264},[220,60662,60663],{"class":222,"line":650},[220,60664,1787],{"class":264},[220,60666,60667],{"class":222,"line":656},[220,60668,1792],{"class":264},[1504,60670,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":60672},[60673,60674],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":60482,"description":60490},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":60681,"title":20837,"body":60682,"category":36429,"componentType":25734,"description":60689,"extension":191,"meta":60969,"navigation":194,"path":60970,"requiresChild":32390,"seo":60971,"stem":60972,"__hash__":60973},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":60683,"toc":60965},[60684,60687,60690,60692,60694,60697,60699,60963],[11,60685,20837],{"id":60686},"neon",[15,60688,60689],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31771,60691],{"component":20837},[23,60693,31775],{"id":26391},[31777,60695],{":props":60696},"[{\"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,60698,31783],{"id":31782},[246,60700,60701,60751,60803,60851,60901],{":tabs":1557},[212,60702,60704],{"className":334,"code":60703,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,60705,60706,60714,60721,60730,60739,60743],{"__ignoreMap":178},[220,60707,60708,60710,60712],{"class":222,"line":223},[220,60709,343],{"class":264},[220,60711,347],{"class":346},[220,60713,359],{"class":264},[220,60715,60716,60718],{"class":222,"line":179},[220,60717,364],{"class":264},[220,60719,60720],{"class":346},"Neon\n",[220,60722,60723,60725,60727],{"class":222,"line":389},[220,60724,9487],{"class":226},[220,60726,353],{"class":264},[220,60728,60729],{"class":230},"\"#00ddff\"\n",[220,60731,60732,60734,60736],{"class":222,"line":399},[220,60733,20228],{"class":226},[220,60735,353],{"class":264},[220,60737,60738],{"class":230},"\"1.5\"\n",[220,60740,60741],{"class":222,"line":644},[220,60742,1234],{"class":264},[220,60744,60745,60747,60749],{"class":222,"line":650},[220,60746,402],{"class":264},[220,60748,347],{"class":346},[220,60750,359],{"class":264},[212,60752,60754],{"className":409,"code":60753,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,60755,60756,60764,60770,60778,60791,60795],{"__ignoreMap":178},[220,60757,60758,60760,60762],{"class":222,"line":223},[220,60759,343],{"class":264},[220,60761,347],{"class":420},[220,60763,359],{"class":264},[220,60765,60766,60768],{"class":222,"line":179},[220,60767,364],{"class":264},[220,60769,60720],{"class":420},[220,60771,60772,60774,60776],{"class":222,"line":389},[220,60773,9487],{"class":226},[220,60775,353],{"class":260},[220,60777,60729],{"class":230},[220,60779,60780,60782,60784,60786,60789],{"class":222,"line":399},[220,60781,20339],{"class":226},[220,60783,353],{"class":260},[220,60785,743],{"class":264},[220,60787,60788],{"class":420},"1.5",[220,60790,749],{"class":264},[220,60792,60793],{"class":222,"line":644},[220,60794,1234],{"class":264},[220,60796,60797,60799,60801],{"class":222,"line":650},[220,60798,402],{"class":264},[220,60800,347],{"class":420},[220,60802,359],{"class":264},[212,60804,60805],{"className":2844,"code":60753,"language":2846,"meta":178,"style":178},[99,60806,60807,60815,60821,60829,60839,60843],{"__ignoreMap":178},[220,60808,60809,60811,60813],{"class":222,"line":223},[220,60810,343],{"class":264},[220,60812,347],{"class":420},[220,60814,359],{"class":264},[220,60816,60817,60819],{"class":222,"line":179},[220,60818,364],{"class":264},[220,60820,60720],{"class":420},[220,60822,60823,60825,60827],{"class":222,"line":389},[220,60824,9487],{"class":226},[220,60826,353],{"class":264},[220,60828,60729],{"class":230},[220,60830,60831,60833,60835,60837],{"class":222,"line":399},[220,60832,20339],{"class":226},[220,60834,29729],{"class":264},[220,60836,60788],{"class":420},[220,60838,749],{"class":264},[220,60840,60841],{"class":222,"line":644},[220,60842,1234],{"class":264},[220,60844,60845,60847,60849],{"class":222,"line":650},[220,60846,402],{"class":264},[220,60848,347],{"class":420},[220,60850,359],{"class":264},[212,60852,60853],{"className":468,"code":60753,"language":469,"meta":178,"style":178},[99,60854,60855,60863,60869,60877,60889,60893],{"__ignoreMap":178},[220,60856,60857,60859,60861],{"class":222,"line":223},[220,60858,343],{"class":264},[220,60860,347],{"class":420},[220,60862,359],{"class":264},[220,60864,60865,60867],{"class":222,"line":179},[220,60866,364],{"class":264},[220,60868,60720],{"class":420},[220,60870,60871,60873,60875],{"class":222,"line":389},[220,60872,9487],{"class":226},[220,60874,353],{"class":260},[220,60876,60729],{"class":230},[220,60878,60879,60881,60883,60885,60887],{"class":222,"line":399},[220,60880,20339],{"class":226},[220,60882,353],{"class":260},[220,60884,743],{"class":264},[220,60886,60788],{"class":420},[220,60888,749],{"class":264},[220,60890,60891],{"class":222,"line":644},[220,60892,1234],{"class":264},[220,60894,60895,60897,60899],{"class":222,"line":650},[220,60896,402],{"class":264},[220,60898,347],{"class":420},[220,60900,359],{"class":264},[212,60902,60904],{"className":251,"code":60903,"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,60905,60906,60916,60920,60934,60938,60955,60959],{"__ignoreMap":178},[220,60907,60908,60910,60912,60914],{"class":222,"line":223},[220,60909,261],{"class":260},[220,60911,11364],{"class":264},[220,60913,268],{"class":260},[220,60915,11369],{"class":230},[220,60917,60918],{"class":222,"line":179},[220,60919,647],{"emptyLinePlaceholder":194},[220,60921,60922,60924,60926,60928,60930,60932],{"class":222,"line":389},[220,60923,1735],{"class":260},[220,60925,1738],{"class":420},[220,60927,1741],{"class":260},[220,60929,1744],{"class":260},[220,60931,1747],{"class":226},[220,60933,1750],{"class":264},[220,60935,60936],{"class":222,"line":399},[220,60937,1765],{"class":264},[220,60939,60940,60942,60944,60946,60949,60951,60953],{"class":222,"line":644},[220,60941,1770],{"class":264},[220,60943,21444],{"class":230},[220,60945,1776],{"class":264},[220,60947,60948],{"class":230},"'#00ddff'",[220,60950,45063],{"class":264},[220,60952,60788],{"class":420},[220,60954,1782],{"class":264},[220,60956,60957],{"class":222,"line":650},[220,60958,1787],{"class":264},[220,60960,60961],{"class":222,"line":656},[220,60962,1792],{"class":264},[1504,60964,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60966},[60967,60968],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20837,"description":60689},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":60975,"title":60976,"body":60977,"category":33533,"componentType":25740,"description":60984,"extension":191,"meta":61245,"navigation":194,"path":61246,"requiresChild":194,"seo":61247,"stem":61248,"__hash__":61249},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":60978,"toc":61241},[60979,60982,60985,60987,60989,60992,60994,61239],[11,60980,60976],{"id":60981},"noisedissolve",[15,60983,60984],{},"Dissolve the content away through an organic noise pattern",[31771,60986],{"component":60976},[23,60988,31775],{"id":26391},[31777,60990],{":props":60991},"[{\"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,60993,31783],{"id":31782},[246,60995,60996,61041,61085,61129,61173],{":tabs":1557},[212,60997,60999],{"className":334,"code":60998,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,61000,61001,61009,61017,61025,61033],{"__ignoreMap":178},[220,61002,61003,61005,61007],{"class":222,"line":223},[220,61004,343],{"class":264},[220,61006,347],{"class":346},[220,61008,359],{"class":264},[220,61010,61011,61013,61015],{"class":222,"line":179},[220,61012,364],{"class":264},[220,61014,60976],{"class":346},[220,61016,359],{"class":264},[220,61018,61019,61021,61023],{"class":222,"line":389},[220,61020,2550],{"class":264},[220,61022,2553],{"class":346},[220,61024,386],{"class":264},[220,61026,61027,61029,61031],{"class":222,"line":399},[220,61028,2567],{"class":264},[220,61030,60976],{"class":346},[220,61032,359],{"class":264},[220,61034,61035,61037,61039],{"class":222,"line":644},[220,61036,402],{"class":264},[220,61038,347],{"class":346},[220,61040,359],{"class":264},[212,61042,61043],{"className":409,"code":60998,"language":411,"meta":178,"style":178},[99,61044,61045,61053,61061,61069,61077],{"__ignoreMap":178},[220,61046,61047,61049,61051],{"class":222,"line":223},[220,61048,343],{"class":264},[220,61050,347],{"class":420},[220,61052,359],{"class":264},[220,61054,61055,61057,61059],{"class":222,"line":179},[220,61056,364],{"class":264},[220,61058,60976],{"class":420},[220,61060,359],{"class":264},[220,61062,61063,61065,61067],{"class":222,"line":389},[220,61064,2550],{"class":264},[220,61066,2553],{"class":420},[220,61068,386],{"class":264},[220,61070,61071,61073,61075],{"class":222,"line":399},[220,61072,2567],{"class":264},[220,61074,60976],{"class":420},[220,61076,359],{"class":264},[220,61078,61079,61081,61083],{"class":222,"line":644},[220,61080,402],{"class":264},[220,61082,347],{"class":420},[220,61084,359],{"class":264},[212,61086,61087],{"className":2844,"code":60998,"language":2846,"meta":178,"style":178},[99,61088,61089,61097,61105,61113,61121],{"__ignoreMap":178},[220,61090,61091,61093,61095],{"class":222,"line":223},[220,61092,343],{"class":264},[220,61094,347],{"class":420},[220,61096,359],{"class":264},[220,61098,61099,61101,61103],{"class":222,"line":179},[220,61100,364],{"class":264},[220,61102,60976],{"class":420},[220,61104,359],{"class":264},[220,61106,61107,61109,61111],{"class":222,"line":389},[220,61108,2550],{"class":264},[220,61110,2553],{"class":420},[220,61112,386],{"class":264},[220,61114,61115,61117,61119],{"class":222,"line":399},[220,61116,2567],{"class":264},[220,61118,60976],{"class":420},[220,61120,359],{"class":264},[220,61122,61123,61125,61127],{"class":222,"line":644},[220,61124,402],{"class":264},[220,61126,347],{"class":420},[220,61128,359],{"class":264},[212,61130,61131],{"className":468,"code":60998,"language":469,"meta":178,"style":178},[99,61132,61133,61141,61149,61157,61165],{"__ignoreMap":178},[220,61134,61135,61137,61139],{"class":222,"line":223},[220,61136,343],{"class":264},[220,61138,347],{"class":420},[220,61140,359],{"class":264},[220,61142,61143,61145,61147],{"class":222,"line":179},[220,61144,364],{"class":264},[220,61146,60976],{"class":420},[220,61148,359],{"class":264},[220,61150,61151,61153,61155],{"class":222,"line":389},[220,61152,2550],{"class":264},[220,61154,2553],{"class":420},[220,61156,386],{"class":264},[220,61158,61159,61161,61163],{"class":222,"line":399},[220,61160,2567],{"class":264},[220,61162,60976],{"class":420},[220,61164,359],{"class":264},[220,61166,61167,61169,61171],{"class":222,"line":644},[220,61168,402],{"class":264},[220,61170,347],{"class":420},[220,61172,359],{"class":264},[212,61174,61176],{"className":251,"code":61175,"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,61177,61178,61188,61192,61206,61210,61219,61227,61231,61235],{"__ignoreMap":178},[220,61179,61180,61182,61184,61186],{"class":222,"line":223},[220,61181,261],{"class":260},[220,61183,11364],{"class":264},[220,61185,268],{"class":260},[220,61187,11369],{"class":230},[220,61189,61190],{"class":222,"line":179},[220,61191,647],{"emptyLinePlaceholder":194},[220,61193,61194,61196,61198,61200,61202,61204],{"class":222,"line":389},[220,61195,1735],{"class":260},[220,61197,1738],{"class":420},[220,61199,1741],{"class":260},[220,61201,1744],{"class":260},[220,61203,1747],{"class":226},[220,61205,1750],{"class":264},[220,61207,61208],{"class":222,"line":399},[220,61209,1765],{"class":264},[220,61211,61212,61214,61217],{"class":222,"line":644},[220,61213,1770],{"class":264},[220,61215,61216],{"class":230},"'NoiseDissolve'",[220,61218,6860],{"class":264},[220,61220,61221,61223,61225],{"class":222,"line":650},[220,61222,6865],{"class":264},[220,61224,6409],{"class":230},[220,61226,2465],{"class":264},[220,61228,61229],{"class":222,"line":656},[220,61230,6882],{"class":264},[220,61232,61233],{"class":222,"line":673},[220,61234,1787],{"class":264},[220,61236,61237],{"class":222,"line":682},[220,61238,1792],{"class":264},[1504,61240,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":61242},[61243,61244],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":60976,"description":60984},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":61251,"title":61252,"body":61253,"category":32666,"componentType":25740,"description":61260,"extension":191,"meta":61521,"navigation":194,"path":61522,"requiresChild":194,"seo":61523,"stem":61524,"__hash__":61525},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":61254,"toc":61517},[61255,61258,61261,61263,61265,61268,61270,61515],[11,61256,61252],{"id":61257},"objecttracker",[15,61259,61260],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[31771,61262],{"component":61252},[23,61264,31775],{"id":26391},[31777,61266],{":props":61267},"[{\"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,61269,31783],{"id":31782},[246,61271,61272,61317,61361,61405,61449],{":tabs":1557},[212,61273,61275],{"className":334,"code":61274,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,61276,61277,61285,61293,61301,61309],{"__ignoreMap":178},[220,61278,61279,61281,61283],{"class":222,"line":223},[220,61280,343],{"class":264},[220,61282,347],{"class":346},[220,61284,359],{"class":264},[220,61286,61287,61289,61291],{"class":222,"line":179},[220,61288,364],{"class":264},[220,61290,61252],{"class":346},[220,61292,359],{"class":264},[220,61294,61295,61297,61299],{"class":222,"line":389},[220,61296,2550],{"class":264},[220,61298,2553],{"class":346},[220,61300,386],{"class":264},[220,61302,61303,61305,61307],{"class":222,"line":399},[220,61304,2567],{"class":264},[220,61306,61252],{"class":346},[220,61308,359],{"class":264},[220,61310,61311,61313,61315],{"class":222,"line":644},[220,61312,402],{"class":264},[220,61314,347],{"class":346},[220,61316,359],{"class":264},[212,61318,61319],{"className":409,"code":61274,"language":411,"meta":178,"style":178},[99,61320,61321,61329,61337,61345,61353],{"__ignoreMap":178},[220,61322,61323,61325,61327],{"class":222,"line":223},[220,61324,343],{"class":264},[220,61326,347],{"class":420},[220,61328,359],{"class":264},[220,61330,61331,61333,61335],{"class":222,"line":179},[220,61332,364],{"class":264},[220,61334,61252],{"class":420},[220,61336,359],{"class":264},[220,61338,61339,61341,61343],{"class":222,"line":389},[220,61340,2550],{"class":264},[220,61342,2553],{"class":420},[220,61344,386],{"class":264},[220,61346,61347,61349,61351],{"class":222,"line":399},[220,61348,2567],{"class":264},[220,61350,61252],{"class":420},[220,61352,359],{"class":264},[220,61354,61355,61357,61359],{"class":222,"line":644},[220,61356,402],{"class":264},[220,61358,347],{"class":420},[220,61360,359],{"class":264},[212,61362,61363],{"className":2844,"code":61274,"language":2846,"meta":178,"style":178},[99,61364,61365,61373,61381,61389,61397],{"__ignoreMap":178},[220,61366,61367,61369,61371],{"class":222,"line":223},[220,61368,343],{"class":264},[220,61370,347],{"class":420},[220,61372,359],{"class":264},[220,61374,61375,61377,61379],{"class":222,"line":179},[220,61376,364],{"class":264},[220,61378,61252],{"class":420},[220,61380,359],{"class":264},[220,61382,61383,61385,61387],{"class":222,"line":389},[220,61384,2550],{"class":264},[220,61386,2553],{"class":420},[220,61388,386],{"class":264},[220,61390,61391,61393,61395],{"class":222,"line":399},[220,61392,2567],{"class":264},[220,61394,61252],{"class":420},[220,61396,359],{"class":264},[220,61398,61399,61401,61403],{"class":222,"line":644},[220,61400,402],{"class":264},[220,61402,347],{"class":420},[220,61404,359],{"class":264},[212,61406,61407],{"className":468,"code":61274,"language":469,"meta":178,"style":178},[99,61408,61409,61417,61425,61433,61441],{"__ignoreMap":178},[220,61410,61411,61413,61415],{"class":222,"line":223},[220,61412,343],{"class":264},[220,61414,347],{"class":420},[220,61416,359],{"class":264},[220,61418,61419,61421,61423],{"class":222,"line":179},[220,61420,364],{"class":264},[220,61422,61252],{"class":420},[220,61424,359],{"class":264},[220,61426,61427,61429,61431],{"class":222,"line":389},[220,61428,2550],{"class":264},[220,61430,2553],{"class":420},[220,61432,386],{"class":264},[220,61434,61435,61437,61439],{"class":222,"line":399},[220,61436,2567],{"class":264},[220,61438,61252],{"class":420},[220,61440,359],{"class":264},[220,61442,61443,61445,61447],{"class":222,"line":644},[220,61444,402],{"class":264},[220,61446,347],{"class":420},[220,61448,359],{"class":264},[212,61450,61452],{"className":251,"code":61451,"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,61453,61454,61464,61468,61482,61486,61495,61503,61507,61511],{"__ignoreMap":178},[220,61455,61456,61458,61460,61462],{"class":222,"line":223},[220,61457,261],{"class":260},[220,61459,11364],{"class":264},[220,61461,268],{"class":260},[220,61463,11369],{"class":230},[220,61465,61466],{"class":222,"line":179},[220,61467,647],{"emptyLinePlaceholder":194},[220,61469,61470,61472,61474,61476,61478,61480],{"class":222,"line":389},[220,61471,1735],{"class":260},[220,61473,1738],{"class":420},[220,61475,1741],{"class":260},[220,61477,1744],{"class":260},[220,61479,1747],{"class":226},[220,61481,1750],{"class":264},[220,61483,61484],{"class":222,"line":399},[220,61485,1765],{"class":264},[220,61487,61488,61490,61493],{"class":222,"line":644},[220,61489,1770],{"class":264},[220,61491,61492],{"class":230},"'ObjectTracker'",[220,61494,6860],{"class":264},[220,61496,61497,61499,61501],{"class":222,"line":650},[220,61498,6865],{"class":264},[220,61500,6409],{"class":230},[220,61502,2465],{"class":264},[220,61504,61505],{"class":222,"line":656},[220,61506,6882],{"class":264},[220,61508,61509],{"class":222,"line":673},[220,61510,1787],{"class":264},[220,61512,61513],{"class":222,"line":682},[220,61514,1792],{"class":264},[1504,61516,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":61518},[61519,61520],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":61252,"description":61260},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":61527,"title":61528,"body":61529,"category":33533,"componentType":25740,"description":61536,"extension":191,"meta":61854,"navigation":194,"path":61855,"requiresChild":194,"seo":61856,"stem":61857,"__hash__":61858},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":61530,"toc":61850},[61531,61534,61537,61539,61541,61544,61546,61848],[11,61532,61528],{"id":61533},"pagepeel",[15,61535,61536],{},"Curl the content up from a corner like a peeling page",[31771,61538],{"component":61528},[23,61540,31775],{"id":26391},[31777,61542],{":props":61543},"[{\"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,61545,31783],{"id":31782},[246,61547,61548,61605,61664,61720,61778],{":tabs":1557},[212,61549,61551],{"className":334,"code":61550,"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,61552,61553,61561,61568,61577,61581,61589,61597],{"__ignoreMap":178},[220,61554,61555,61557,61559],{"class":222,"line":223},[220,61556,343],{"class":264},[220,61558,347],{"class":346},[220,61560,359],{"class":264},[220,61562,61563,61565],{"class":222,"line":179},[220,61564,364],{"class":264},[220,61566,61567],{"class":346},"PagePeel\n",[220,61569,61570,61572,61574],{"class":222,"line":389},[220,61571,17262],{"class":226},[220,61573,353],{"class":264},[220,61575,61576],{"class":230},"\"0.2\"\n",[220,61578,61579],{"class":222,"line":399},[220,61580,31819],{"class":264},[220,61582,61583,61585,61587],{"class":222,"line":644},[220,61584,2550],{"class":264},[220,61586,2553],{"class":346},[220,61588,386],{"class":264},[220,61590,61591,61593,61595],{"class":222,"line":650},[220,61592,2567],{"class":264},[220,61594,61528],{"class":346},[220,61596,359],{"class":264},[220,61598,61599,61601,61603],{"class":222,"line":656},[220,61600,402],{"class":264},[220,61602,347],{"class":346},[220,61604,359],{"class":264},[212,61606,61608],{"className":409,"code":61607,"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,61609,61610,61618,61624,61636,61640,61648,61656],{"__ignoreMap":178},[220,61611,61612,61614,61616],{"class":222,"line":223},[220,61613,343],{"class":264},[220,61615,347],{"class":420},[220,61617,359],{"class":264},[220,61619,61620,61622],{"class":222,"line":179},[220,61621,364],{"class":264},[220,61623,61567],{"class":420},[220,61625,61626,61628,61630,61632,61634],{"class":222,"line":389},[220,61627,9497],{"class":226},[220,61629,353],{"class":260},[220,61631,743],{"class":264},[220,61633,16833],{"class":420},[220,61635,749],{"class":264},[220,61637,61638],{"class":222,"line":399},[220,61639,31819],{"class":264},[220,61641,61642,61644,61646],{"class":222,"line":644},[220,61643,2550],{"class":264},[220,61645,2553],{"class":420},[220,61647,386],{"class":264},[220,61649,61650,61652,61654],{"class":222,"line":650},[220,61651,2567],{"class":264},[220,61653,61528],{"class":420},[220,61655,359],{"class":264},[220,61657,61658,61660,61662],{"class":222,"line":656},[220,61659,402],{"class":264},[220,61661,347],{"class":420},[220,61663,359],{"class":264},[212,61665,61666],{"className":2844,"code":61607,"language":2846,"meta":178,"style":178},[99,61667,61668,61676,61682,61692,61696,61704,61712],{"__ignoreMap":178},[220,61669,61670,61672,61674],{"class":222,"line":223},[220,61671,343],{"class":264},[220,61673,347],{"class":420},[220,61675,359],{"class":264},[220,61677,61678,61680],{"class":222,"line":179},[220,61679,364],{"class":264},[220,61681,61567],{"class":420},[220,61683,61684,61686,61688,61690],{"class":222,"line":389},[220,61685,9497],{"class":226},[220,61687,29729],{"class":264},[220,61689,16833],{"class":420},[220,61691,749],{"class":264},[220,61693,61694],{"class":222,"line":399},[220,61695,31819],{"class":264},[220,61697,61698,61700,61702],{"class":222,"line":644},[220,61699,2550],{"class":264},[220,61701,2553],{"class":420},[220,61703,386],{"class":264},[220,61705,61706,61708,61710],{"class":222,"line":650},[220,61707,2567],{"class":264},[220,61709,61528],{"class":420},[220,61711,359],{"class":264},[220,61713,61714,61716,61718],{"class":222,"line":656},[220,61715,402],{"class":264},[220,61717,347],{"class":420},[220,61719,359],{"class":264},[212,61721,61722],{"className":468,"code":61607,"language":469,"meta":178,"style":178},[99,61723,61724,61732,61738,61750,61754,61762,61770],{"__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],{"class":222,"line":179},[220,61735,364],{"class":264},[220,61737,61567],{"class":420},[220,61739,61740,61742,61744,61746,61748],{"class":222,"line":389},[220,61741,9497],{"class":226},[220,61743,353],{"class":260},[220,61745,743],{"class":264},[220,61747,16833],{"class":420},[220,61749,749],{"class":264},[220,61751,61752],{"class":222,"line":399},[220,61753,31819],{"class":264},[220,61755,61756,61758,61760],{"class":222,"line":644},[220,61757,2550],{"class":264},[220,61759,2553],{"class":420},[220,61761,386],{"class":264},[220,61763,61764,61766,61768],{"class":222,"line":650},[220,61765,2567],{"class":264},[220,61767,61528],{"class":420},[220,61769,359],{"class":264},[220,61771,61772,61774,61776],{"class":222,"line":656},[220,61773,402],{"class":264},[220,61775,347],{"class":420},[220,61777,359],{"class":264},[212,61779,61781],{"className":251,"code":61780,"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,61782,61783,61793,61797,61811,61815,61828,61836,61840,61844],{"__ignoreMap":178},[220,61784,61785,61787,61789,61791],{"class":222,"line":223},[220,61786,261],{"class":260},[220,61788,11364],{"class":264},[220,61790,268],{"class":260},[220,61792,11369],{"class":230},[220,61794,61795],{"class":222,"line":179},[220,61796,647],{"emptyLinePlaceholder":194},[220,61798,61799,61801,61803,61805,61807,61809],{"class":222,"line":389},[220,61800,1735],{"class":260},[220,61802,1738],{"class":420},[220,61804,1741],{"class":260},[220,61806,1744],{"class":260},[220,61808,1747],{"class":226},[220,61810,1750],{"class":264},[220,61812,61813],{"class":222,"line":399},[220,61814,1765],{"class":264},[220,61816,61817,61819,61822,61824,61826],{"class":222,"line":644},[220,61818,1770],{"class":264},[220,61820,61821],{"class":230},"'PagePeel'",[220,61823,7392],{"class":264},[220,61825,16833],{"class":420},[220,61827,7397],{"class":264},[220,61829,61830,61832,61834],{"class":222,"line":650},[220,61831,6865],{"class":264},[220,61833,6409],{"class":230},[220,61835,2465],{"class":264},[220,61837,61838],{"class":222,"line":656},[220,61839,6882],{"class":264},[220,61841,61842],{"class":222,"line":673},[220,61843,1787],{"class":264},[220,61845,61846],{"class":222,"line":682},[220,61847,1792],{"class":264},[1504,61849,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61851},[61852,61853],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":61528,"description":61536},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":61860,"title":61861,"body":61862,"category":32666,"componentType":25740,"description":61869,"extension":191,"meta":62130,"navigation":194,"path":62131,"requiresChild":194,"seo":62132,"stem":62133,"__hash__":62134},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":61863,"toc":62126},[61864,61867,61870,61872,61874,61877,61879,62124],[11,61865,61861],{"id":61866},"paper",[15,61868,61869],{},"Applies realistic paper grain and surface roughness to child content",[31771,61871],{"component":61861},[23,61873,31775],{"id":26391},[31777,61875],{":props":61876},"[{\"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,61878,31783],{"id":31782},[246,61880,61881,61926,61970,62014,62058],{":tabs":1557},[212,61882,61884],{"className":334,"code":61883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,61885,61886,61894,61902,61910,61918],{"__ignoreMap":178},[220,61887,61888,61890,61892],{"class":222,"line":223},[220,61889,343],{"class":264},[220,61891,347],{"class":346},[220,61893,359],{"class":264},[220,61895,61896,61898,61900],{"class":222,"line":179},[220,61897,364],{"class":264},[220,61899,61861],{"class":346},[220,61901,359],{"class":264},[220,61903,61904,61906,61908],{"class":222,"line":389},[220,61905,2550],{"class":264},[220,61907,2553],{"class":346},[220,61909,386],{"class":264},[220,61911,61912,61914,61916],{"class":222,"line":399},[220,61913,2567],{"class":264},[220,61915,61861],{"class":346},[220,61917,359],{"class":264},[220,61919,61920,61922,61924],{"class":222,"line":644},[220,61921,402],{"class":264},[220,61923,347],{"class":346},[220,61925,359],{"class":264},[212,61927,61928],{"className":409,"code":61883,"language":411,"meta":178,"style":178},[99,61929,61930,61938,61946,61954,61962],{"__ignoreMap":178},[220,61931,61932,61934,61936],{"class":222,"line":223},[220,61933,343],{"class":264},[220,61935,347],{"class":420},[220,61937,359],{"class":264},[220,61939,61940,61942,61944],{"class":222,"line":179},[220,61941,364],{"class":264},[220,61943,61861],{"class":420},[220,61945,359],{"class":264},[220,61947,61948,61950,61952],{"class":222,"line":389},[220,61949,2550],{"class":264},[220,61951,2553],{"class":420},[220,61953,386],{"class":264},[220,61955,61956,61958,61960],{"class":222,"line":399},[220,61957,2567],{"class":264},[220,61959,61861],{"class":420},[220,61961,359],{"class":264},[220,61963,61964,61966,61968],{"class":222,"line":644},[220,61965,402],{"class":264},[220,61967,347],{"class":420},[220,61969,359],{"class":264},[212,61971,61972],{"className":2844,"code":61883,"language":2846,"meta":178,"style":178},[99,61973,61974,61982,61990,61998,62006],{"__ignoreMap":178},[220,61975,61976,61978,61980],{"class":222,"line":223},[220,61977,343],{"class":264},[220,61979,347],{"class":420},[220,61981,359],{"class":264},[220,61983,61984,61986,61988],{"class":222,"line":179},[220,61985,364],{"class":264},[220,61987,61861],{"class":420},[220,61989,359],{"class":264},[220,61991,61992,61994,61996],{"class":222,"line":389},[220,61993,2550],{"class":264},[220,61995,2553],{"class":420},[220,61997,386],{"class":264},[220,61999,62000,62002,62004],{"class":222,"line":399},[220,62001,2567],{"class":264},[220,62003,61861],{"class":420},[220,62005,359],{"class":264},[220,62007,62008,62010,62012],{"class":222,"line":644},[220,62009,402],{"class":264},[220,62011,347],{"class":420},[220,62013,359],{"class":264},[212,62015,62016],{"className":468,"code":61883,"language":469,"meta":178,"style":178},[99,62017,62018,62026,62034,62042,62050],{"__ignoreMap":178},[220,62019,62020,62022,62024],{"class":222,"line":223},[220,62021,343],{"class":264},[220,62023,347],{"class":420},[220,62025,359],{"class":264},[220,62027,62028,62030,62032],{"class":222,"line":179},[220,62029,364],{"class":264},[220,62031,61861],{"class":420},[220,62033,359],{"class":264},[220,62035,62036,62038,62040],{"class":222,"line":389},[220,62037,2550],{"class":264},[220,62039,2553],{"class":420},[220,62041,386],{"class":264},[220,62043,62044,62046,62048],{"class":222,"line":399},[220,62045,2567],{"class":264},[220,62047,61861],{"class":420},[220,62049,359],{"class":264},[220,62051,62052,62054,62056],{"class":222,"line":644},[220,62053,402],{"class":264},[220,62055,347],{"class":420},[220,62057,359],{"class":264},[212,62059,62061],{"className":251,"code":62060,"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,62062,62063,62073,62077,62091,62095,62104,62112,62116,62120],{"__ignoreMap":178},[220,62064,62065,62067,62069,62071],{"class":222,"line":223},[220,62066,261],{"class":260},[220,62068,11364],{"class":264},[220,62070,268],{"class":260},[220,62072,11369],{"class":230},[220,62074,62075],{"class":222,"line":179},[220,62076,647],{"emptyLinePlaceholder":194},[220,62078,62079,62081,62083,62085,62087,62089],{"class":222,"line":389},[220,62080,1735],{"class":260},[220,62082,1738],{"class":420},[220,62084,1741],{"class":260},[220,62086,1744],{"class":260},[220,62088,1747],{"class":226},[220,62090,1750],{"class":264},[220,62092,62093],{"class":222,"line":399},[220,62094,1765],{"class":264},[220,62096,62097,62099,62102],{"class":222,"line":644},[220,62098,1770],{"class":264},[220,62100,62101],{"class":230},"'Paper'",[220,62103,6860],{"class":264},[220,62105,62106,62108,62110],{"class":222,"line":650},[220,62107,6865],{"class":264},[220,62109,6409],{"class":230},[220,62111,2465],{"class":264},[220,62113,62114],{"class":222,"line":656},[220,62115,6882],{"class":264},[220,62117,62118],{"class":222,"line":673},[220,62119,1787],{"class":264},[220,62121,62122],{"class":222,"line":682},[220,62123,1792],{"class":264},[1504,62125,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":62127},[62128,62129],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":61861,"description":61869},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":62136,"title":62137,"body":62138,"category":15765,"componentType":25734,"description":62145,"extension":191,"meta":62375,"navigation":194,"path":62376,"requiresChild":32390,"seo":62377,"stem":62378,"__hash__":62379},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":62139,"toc":62371},[62140,62143,62146,62148,62150,62153,62155,62369],[11,62141,62137],{"id":62142},"parallelogram",[15,62144,62145],{},"Parallelogram with adjustable width, height and skew",[31771,62147],{"component":62137},[23,62149,31775],{"id":26391},[31777,62151],{":props":62152},"[{\"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,62154,31783],{"id":31782},[246,62156,62157,62197,62235,62273,62311],{":tabs":1557},[212,62158,62160],{"className":334,"code":62159,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,62161,62162,62170,62177,62185,62189],{"__ignoreMap":178},[220,62163,62164,62166,62168],{"class":222,"line":223},[220,62165,343],{"class":264},[220,62167,347],{"class":346},[220,62169,359],{"class":264},[220,62171,62172,62174],{"class":222,"line":179},[220,62173,364],{"class":264},[220,62175,62176],{"class":346},"Parallelogram\n",[220,62178,62179,62181,62183],{"class":222,"line":389},[220,62180,9487],{"class":226},[220,62182,353],{"class":264},[220,62184,9443],{"class":230},[220,62186,62187],{"class":222,"line":399},[220,62188,1234],{"class":264},[220,62190,62191,62193,62195],{"class":222,"line":644},[220,62192,402],{"class":264},[220,62194,347],{"class":346},[220,62196,359],{"class":264},[212,62198,62199],{"className":409,"code":62159,"language":411,"meta":178,"style":178},[99,62200,62201,62209,62215,62223,62227],{"__ignoreMap":178},[220,62202,62203,62205,62207],{"class":222,"line":223},[220,62204,343],{"class":264},[220,62206,347],{"class":420},[220,62208,359],{"class":264},[220,62210,62211,62213],{"class":222,"line":179},[220,62212,364],{"class":264},[220,62214,62176],{"class":420},[220,62216,62217,62219,62221],{"class":222,"line":389},[220,62218,9487],{"class":226},[220,62220,353],{"class":260},[220,62222,9443],{"class":230},[220,62224,62225],{"class":222,"line":399},[220,62226,1234],{"class":264},[220,62228,62229,62231,62233],{"class":222,"line":644},[220,62230,402],{"class":264},[220,62232,347],{"class":420},[220,62234,359],{"class":264},[212,62236,62237],{"className":2844,"code":62159,"language":2846,"meta":178,"style":178},[99,62238,62239,62247,62253,62261,62265],{"__ignoreMap":178},[220,62240,62241,62243,62245],{"class":222,"line":223},[220,62242,343],{"class":264},[220,62244,347],{"class":420},[220,62246,359],{"class":264},[220,62248,62249,62251],{"class":222,"line":179},[220,62250,364],{"class":264},[220,62252,62176],{"class":420},[220,62254,62255,62257,62259],{"class":222,"line":389},[220,62256,9487],{"class":226},[220,62258,353],{"class":264},[220,62260,9443],{"class":230},[220,62262,62263],{"class":222,"line":399},[220,62264,1234],{"class":264},[220,62266,62267,62269,62271],{"class":222,"line":644},[220,62268,402],{"class":264},[220,62270,347],{"class":420},[220,62272,359],{"class":264},[212,62274,62275],{"className":468,"code":62159,"language":469,"meta":178,"style":178},[99,62276,62277,62285,62291,62299,62303],{"__ignoreMap":178},[220,62278,62279,62281,62283],{"class":222,"line":223},[220,62280,343],{"class":264},[220,62282,347],{"class":420},[220,62284,359],{"class":264},[220,62286,62287,62289],{"class":222,"line":179},[220,62288,364],{"class":264},[220,62290,62176],{"class":420},[220,62292,62293,62295,62297],{"class":222,"line":389},[220,62294,9487],{"class":226},[220,62296,353],{"class":260},[220,62298,9443],{"class":230},[220,62300,62301],{"class":222,"line":399},[220,62302,1234],{"class":264},[220,62304,62305,62307,62309],{"class":222,"line":644},[220,62306,402],{"class":264},[220,62308,347],{"class":420},[220,62310,359],{"class":264},[212,62312,62314],{"className":251,"code":62313,"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,62315,62316,62326,62330,62344,62348,62361,62365],{"__ignoreMap":178},[220,62317,62318,62320,62322,62324],{"class":222,"line":223},[220,62319,261],{"class":260},[220,62321,11364],{"class":264},[220,62323,268],{"class":260},[220,62325,11369],{"class":230},[220,62327,62328],{"class":222,"line":179},[220,62329,647],{"emptyLinePlaceholder":194},[220,62331,62332,62334,62336,62338,62340,62342],{"class":222,"line":389},[220,62333,1735],{"class":260},[220,62335,1738],{"class":420},[220,62337,1741],{"class":260},[220,62339,1744],{"class":260},[220,62341,1747],{"class":226},[220,62343,1750],{"class":264},[220,62345,62346],{"class":222,"line":399},[220,62347,1765],{"class":264},[220,62349,62350,62352,62355,62357,62359],{"class":222,"line":644},[220,62351,1770],{"class":264},[220,62353,62354],{"class":230},"'Parallelogram'",[220,62356,1776],{"class":264},[220,62358,10021],{"class":230},[220,62360,1782],{"class":264},[220,62362,62363],{"class":222,"line":650},[220,62364,1787],{"class":264},[220,62366,62367],{"class":222,"line":656},[220,62368,1792],{"class":264},[1504,62370,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":62372},[62373,62374],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":62137,"description":62145},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":62381,"title":62382,"body":62383,"category":32666,"componentType":25740,"description":62390,"extension":191,"meta":62651,"navigation":194,"path":62652,"requiresChild":194,"seo":62653,"stem":62654,"__hash__":62655},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":62384,"toc":62647},[62385,62388,62391,62393,62395,62398,62400,62645],[11,62386,62382],{"id":62387},"particlefield",[15,62389,62390],{},"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",[31771,62392],{"component":62382},[23,62394,31775],{"id":26391},[31777,62396],{":props":62397},"[{\"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,62399,31783],{"id":31782},[246,62401,62402,62447,62491,62535,62579],{":tabs":1557},[212,62403,62405],{"className":334,"code":62404,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,62406,62407,62415,62423,62431,62439],{"__ignoreMap":178},[220,62408,62409,62411,62413],{"class":222,"line":223},[220,62410,343],{"class":264},[220,62412,347],{"class":346},[220,62414,359],{"class":264},[220,62416,62417,62419,62421],{"class":222,"line":179},[220,62418,364],{"class":264},[220,62420,62382],{"class":346},[220,62422,359],{"class":264},[220,62424,62425,62427,62429],{"class":222,"line":389},[220,62426,2550],{"class":264},[220,62428,2553],{"class":346},[220,62430,386],{"class":264},[220,62432,62433,62435,62437],{"class":222,"line":399},[220,62434,2567],{"class":264},[220,62436,62382],{"class":346},[220,62438,359],{"class":264},[220,62440,62441,62443,62445],{"class":222,"line":644},[220,62442,402],{"class":264},[220,62444,347],{"class":346},[220,62446,359],{"class":264},[212,62448,62449],{"className":409,"code":62404,"language":411,"meta":178,"style":178},[99,62450,62451,62459,62467,62475,62483],{"__ignoreMap":178},[220,62452,62453,62455,62457],{"class":222,"line":223},[220,62454,343],{"class":264},[220,62456,347],{"class":420},[220,62458,359],{"class":264},[220,62460,62461,62463,62465],{"class":222,"line":179},[220,62462,364],{"class":264},[220,62464,62382],{"class":420},[220,62466,359],{"class":264},[220,62468,62469,62471,62473],{"class":222,"line":389},[220,62470,2550],{"class":264},[220,62472,2553],{"class":420},[220,62474,386],{"class":264},[220,62476,62477,62479,62481],{"class":222,"line":399},[220,62478,2567],{"class":264},[220,62480,62382],{"class":420},[220,62482,359],{"class":264},[220,62484,62485,62487,62489],{"class":222,"line":644},[220,62486,402],{"class":264},[220,62488,347],{"class":420},[220,62490,359],{"class":264},[212,62492,62493],{"className":2844,"code":62404,"language":2846,"meta":178,"style":178},[99,62494,62495,62503,62511,62519,62527],{"__ignoreMap":178},[220,62496,62497,62499,62501],{"class":222,"line":223},[220,62498,343],{"class":264},[220,62500,347],{"class":420},[220,62502,359],{"class":264},[220,62504,62505,62507,62509],{"class":222,"line":179},[220,62506,364],{"class":264},[220,62508,62382],{"class":420},[220,62510,359],{"class":264},[220,62512,62513,62515,62517],{"class":222,"line":389},[220,62514,2550],{"class":264},[220,62516,2553],{"class":420},[220,62518,386],{"class":264},[220,62520,62521,62523,62525],{"class":222,"line":399},[220,62522,2567],{"class":264},[220,62524,62382],{"class":420},[220,62526,359],{"class":264},[220,62528,62529,62531,62533],{"class":222,"line":644},[220,62530,402],{"class":264},[220,62532,347],{"class":420},[220,62534,359],{"class":264},[212,62536,62537],{"className":468,"code":62404,"language":469,"meta":178,"style":178},[99,62538,62539,62547,62555,62563,62571],{"__ignoreMap":178},[220,62540,62541,62543,62545],{"class":222,"line":223},[220,62542,343],{"class":264},[220,62544,347],{"class":420},[220,62546,359],{"class":264},[220,62548,62549,62551,62553],{"class":222,"line":179},[220,62550,364],{"class":264},[220,62552,62382],{"class":420},[220,62554,359],{"class":264},[220,62556,62557,62559,62561],{"class":222,"line":389},[220,62558,2550],{"class":264},[220,62560,2553],{"class":420},[220,62562,386],{"class":264},[220,62564,62565,62567,62569],{"class":222,"line":399},[220,62566,2567],{"class":264},[220,62568,62382],{"class":420},[220,62570,359],{"class":264},[220,62572,62573,62575,62577],{"class":222,"line":644},[220,62574,402],{"class":264},[220,62576,347],{"class":420},[220,62578,359],{"class":264},[212,62580,62582],{"className":251,"code":62581,"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,62583,62584,62594,62598,62612,62616,62625,62633,62637,62641],{"__ignoreMap":178},[220,62585,62586,62588,62590,62592],{"class":222,"line":223},[220,62587,261],{"class":260},[220,62589,11364],{"class":264},[220,62591,268],{"class":260},[220,62593,11369],{"class":230},[220,62595,62596],{"class":222,"line":179},[220,62597,647],{"emptyLinePlaceholder":194},[220,62599,62600,62602,62604,62606,62608,62610],{"class":222,"line":389},[220,62601,1735],{"class":260},[220,62603,1738],{"class":420},[220,62605,1741],{"class":260},[220,62607,1744],{"class":260},[220,62609,1747],{"class":226},[220,62611,1750],{"class":264},[220,62613,62614],{"class":222,"line":399},[220,62615,1765],{"class":264},[220,62617,62618,62620,62623],{"class":222,"line":644},[220,62619,1770],{"class":264},[220,62621,62622],{"class":230},"'ParticleField'",[220,62624,6860],{"class":264},[220,62626,62627,62629,62631],{"class":222,"line":650},[220,62628,6865],{"class":264},[220,62630,6409],{"class":230},[220,62632,2465],{"class":264},[220,62634,62635],{"class":222,"line":656},[220,62636,6882],{"class":264},[220,62638,62639],{"class":222,"line":673},[220,62640,1787],{"class":264},[220,62642,62643],{"class":222,"line":682},[220,62644,1792],{"class":264},[1504,62646,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":62648},[62649,62650],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":62382,"description":62390},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":62657,"title":62658,"body":62659,"category":35419,"componentType":25734,"description":62666,"extension":191,"meta":62851,"navigation":194,"path":62852,"requiresChild":32390,"seo":62853,"stem":62854,"__hash__":62855},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":62660,"toc":62847},[62661,62664,62667,62669,62671,62674,62676,62845],[11,62662,62658],{"id":62663},"particleflow",[15,62665,62666],{},"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",[31771,62668],{"component":62658},[23,62670,31775],{"id":26391},[31777,62672],{":props":62673},"[{\"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,62675,31783],{"id":31782},[246,62677,62678,62707,62735,62763,62791],{":tabs":1557},[212,62679,62681],{"className":334,"code":62680,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,62682,62683,62691,62699],{"__ignoreMap":178},[220,62684,62685,62687,62689],{"class":222,"line":223},[220,62686,343],{"class":264},[220,62688,347],{"class":346},[220,62690,359],{"class":264},[220,62692,62693,62695,62697],{"class":222,"line":179},[220,62694,364],{"class":264},[220,62696,62658],{"class":346},[220,62698,386],{"class":264},[220,62700,62701,62703,62705],{"class":222,"line":389},[220,62702,402],{"class":264},[220,62704,347],{"class":346},[220,62706,359],{"class":264},[212,62708,62709],{"className":409,"code":62680,"language":411,"meta":178,"style":178},[99,62710,62711,62719,62727],{"__ignoreMap":178},[220,62712,62713,62715,62717],{"class":222,"line":223},[220,62714,343],{"class":264},[220,62716,347],{"class":420},[220,62718,359],{"class":264},[220,62720,62721,62723,62725],{"class":222,"line":179},[220,62722,364],{"class":264},[220,62724,62658],{"class":420},[220,62726,386],{"class":264},[220,62728,62729,62731,62733],{"class":222,"line":389},[220,62730,402],{"class":264},[220,62732,347],{"class":420},[220,62734,359],{"class":264},[212,62736,62737],{"className":2844,"code":62680,"language":2846,"meta":178,"style":178},[99,62738,62739,62747,62755],{"__ignoreMap":178},[220,62740,62741,62743,62745],{"class":222,"line":223},[220,62742,343],{"class":264},[220,62744,347],{"class":420},[220,62746,359],{"class":264},[220,62748,62749,62751,62753],{"class":222,"line":179},[220,62750,364],{"class":264},[220,62752,62658],{"class":420},[220,62754,386],{"class":264},[220,62756,62757,62759,62761],{"class":222,"line":389},[220,62758,402],{"class":264},[220,62760,347],{"class":420},[220,62762,359],{"class":264},[212,62764,62765],{"className":468,"code":62680,"language":469,"meta":178,"style":178},[99,62766,62767,62775,62783],{"__ignoreMap":178},[220,62768,62769,62771,62773],{"class":222,"line":223},[220,62770,343],{"class":264},[220,62772,347],{"class":420},[220,62774,359],{"class":264},[220,62776,62777,62779,62781],{"class":222,"line":179},[220,62778,364],{"class":264},[220,62780,62658],{"class":420},[220,62782,386],{"class":264},[220,62784,62785,62787,62789],{"class":222,"line":389},[220,62786,402],{"class":264},[220,62788,347],{"class":420},[220,62790,359],{"class":264},[212,62792,62794],{"className":251,"code":62793,"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,62795,62796,62806,62810,62824,62828,62837,62841],{"__ignoreMap":178},[220,62797,62798,62800,62802,62804],{"class":222,"line":223},[220,62799,261],{"class":260},[220,62801,11364],{"class":264},[220,62803,268],{"class":260},[220,62805,11369],{"class":230},[220,62807,62808],{"class":222,"line":179},[220,62809,647],{"emptyLinePlaceholder":194},[220,62811,62812,62814,62816,62818,62820,62822],{"class":222,"line":389},[220,62813,1735],{"class":260},[220,62815,1738],{"class":420},[220,62817,1741],{"class":260},[220,62819,1744],{"class":260},[220,62821,1747],{"class":226},[220,62823,1750],{"class":264},[220,62825,62826],{"class":222,"line":399},[220,62827,1765],{"class":264},[220,62829,62830,62832,62835],{"class":222,"line":644},[220,62831,1770],{"class":264},[220,62833,62834],{"class":230},"'ParticleFlow'",[220,62836,2465],{"class":264},[220,62838,62839],{"class":222,"line":650},[220,62840,1787],{"class":264},[220,62842,62843],{"class":222,"line":656},[220,62844,1792],{"class":264},[1504,62846,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":62848},[62849,62850],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":62658,"description":62666},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":62857,"title":62858,"body":62859,"category":36429,"componentType":25734,"description":62866,"extension":191,"meta":63051,"navigation":194,"path":63052,"requiresChild":32390,"seo":63053,"stem":63054,"__hash__":63055},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":62860,"toc":63047},[62861,62864,62867,62869,62871,62874,62876,63045],[11,62862,62858],{"id":62863},"particles",[15,62865,62866],{},"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",[31771,62868],{"component":62858},[23,62870,31775],{"id":26391},[31777,62872],{":props":62873},"[{\"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,62875,31783],{"id":31782},[246,62877,62878,62907,62935,62963,62991],{":tabs":1557},[212,62879,62881],{"className":334,"code":62880,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,62882,62883,62891,62899],{"__ignoreMap":178},[220,62884,62885,62887,62889],{"class":222,"line":223},[220,62886,343],{"class":264},[220,62888,347],{"class":346},[220,62890,359],{"class":264},[220,62892,62893,62895,62897],{"class":222,"line":179},[220,62894,364],{"class":264},[220,62896,62858],{"class":346},[220,62898,386],{"class":264},[220,62900,62901,62903,62905],{"class":222,"line":389},[220,62902,402],{"class":264},[220,62904,347],{"class":346},[220,62906,359],{"class":264},[212,62908,62909],{"className":409,"code":62880,"language":411,"meta":178,"style":178},[99,62910,62911,62919,62927],{"__ignoreMap":178},[220,62912,62913,62915,62917],{"class":222,"line":223},[220,62914,343],{"class":264},[220,62916,347],{"class":420},[220,62918,359],{"class":264},[220,62920,62921,62923,62925],{"class":222,"line":179},[220,62922,364],{"class":264},[220,62924,62858],{"class":420},[220,62926,386],{"class":264},[220,62928,62929,62931,62933],{"class":222,"line":389},[220,62930,402],{"class":264},[220,62932,347],{"class":420},[220,62934,359],{"class":264},[212,62936,62937],{"className":2844,"code":62880,"language":2846,"meta":178,"style":178},[99,62938,62939,62947,62955],{"__ignoreMap":178},[220,62940,62941,62943,62945],{"class":222,"line":223},[220,62942,343],{"class":264},[220,62944,347],{"class":420},[220,62946,359],{"class":264},[220,62948,62949,62951,62953],{"class":222,"line":179},[220,62950,364],{"class":264},[220,62952,62858],{"class":420},[220,62954,386],{"class":264},[220,62956,62957,62959,62961],{"class":222,"line":389},[220,62958,402],{"class":264},[220,62960,347],{"class":420},[220,62962,359],{"class":264},[212,62964,62965],{"className":468,"code":62880,"language":469,"meta":178,"style":178},[99,62966,62967,62975,62983],{"__ignoreMap":178},[220,62968,62969,62971,62973],{"class":222,"line":223},[220,62970,343],{"class":264},[220,62972,347],{"class":420},[220,62974,359],{"class":264},[220,62976,62977,62979,62981],{"class":222,"line":179},[220,62978,364],{"class":264},[220,62980,62858],{"class":420},[220,62982,386],{"class":264},[220,62984,62985,62987,62989],{"class":222,"line":389},[220,62986,402],{"class":264},[220,62988,347],{"class":420},[220,62990,359],{"class":264},[212,62992,62994],{"className":251,"code":62993,"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,62995,62996,63006,63010,63024,63028,63037,63041],{"__ignoreMap":178},[220,62997,62998,63000,63002,63004],{"class":222,"line":223},[220,62999,261],{"class":260},[220,63001,11364],{"class":264},[220,63003,268],{"class":260},[220,63005,11369],{"class":230},[220,63007,63008],{"class":222,"line":179},[220,63009,647],{"emptyLinePlaceholder":194},[220,63011,63012,63014,63016,63018,63020,63022],{"class":222,"line":389},[220,63013,1735],{"class":260},[220,63015,1738],{"class":420},[220,63017,1741],{"class":260},[220,63019,1744],{"class":260},[220,63021,1747],{"class":226},[220,63023,1750],{"class":264},[220,63025,63026],{"class":222,"line":399},[220,63027,1765],{"class":264},[220,63029,63030,63032,63035],{"class":222,"line":644},[220,63031,1770],{"class":264},[220,63033,63034],{"class":230},"'Particles'",[220,63036,2465],{"class":264},[220,63038,63039],{"class":222,"line":650},[220,63040,1787],{"class":264},[220,63042,63043],{"class":222,"line":656},[220,63044,1792],{"class":264},[1504,63046,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":63048},[63049,63050],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":62858,"description":62866},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":63057,"title":63058,"body":63059,"category":32923,"componentType":25734,"description":63066,"extension":191,"meta":63250,"navigation":194,"path":63251,"requiresChild":32390,"seo":63252,"stem":63253,"__hash__":63254},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":63060,"toc":63246},[63061,63064,63067,63069,63071,63073,63075,63244],[11,63062,63058],{"id":63063},"perlinnoise",[15,63065,63066],{},"Smooth gradient noise that morphs over time",[31771,63068],{"component":63058},[23,63070,31775],{"id":26391},[31777,63072],{":props":34508},[23,63074,31783],{"id":31782},[246,63076,63077,63106,63134,63162,63190],{":tabs":1557},[212,63078,63080],{"className":334,"code":63079,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,63081,63082,63090,63098],{"__ignoreMap":178},[220,63083,63084,63086,63088],{"class":222,"line":223},[220,63085,343],{"class":264},[220,63087,347],{"class":346},[220,63089,359],{"class":264},[220,63091,63092,63094,63096],{"class":222,"line":179},[220,63093,364],{"class":264},[220,63095,63058],{"class":346},[220,63097,386],{"class":264},[220,63099,63100,63102,63104],{"class":222,"line":389},[220,63101,402],{"class":264},[220,63103,347],{"class":346},[220,63105,359],{"class":264},[212,63107,63108],{"className":409,"code":63079,"language":411,"meta":178,"style":178},[99,63109,63110,63118,63126],{"__ignoreMap":178},[220,63111,63112,63114,63116],{"class":222,"line":223},[220,63113,343],{"class":264},[220,63115,347],{"class":420},[220,63117,359],{"class":264},[220,63119,63120,63122,63124],{"class":222,"line":179},[220,63121,364],{"class":264},[220,63123,63058],{"class":420},[220,63125,386],{"class":264},[220,63127,63128,63130,63132],{"class":222,"line":389},[220,63129,402],{"class":264},[220,63131,347],{"class":420},[220,63133,359],{"class":264},[212,63135,63136],{"className":2844,"code":63079,"language":2846,"meta":178,"style":178},[99,63137,63138,63146,63154],{"__ignoreMap":178},[220,63139,63140,63142,63144],{"class":222,"line":223},[220,63141,343],{"class":264},[220,63143,347],{"class":420},[220,63145,359],{"class":264},[220,63147,63148,63150,63152],{"class":222,"line":179},[220,63149,364],{"class":264},[220,63151,63058],{"class":420},[220,63153,386],{"class":264},[220,63155,63156,63158,63160],{"class":222,"line":389},[220,63157,402],{"class":264},[220,63159,347],{"class":420},[220,63161,359],{"class":264},[212,63163,63164],{"className":468,"code":63079,"language":469,"meta":178,"style":178},[99,63165,63166,63174,63182],{"__ignoreMap":178},[220,63167,63168,63170,63172],{"class":222,"line":223},[220,63169,343],{"class":264},[220,63171,347],{"class":420},[220,63173,359],{"class":264},[220,63175,63176,63178,63180],{"class":222,"line":179},[220,63177,364],{"class":264},[220,63179,63058],{"class":420},[220,63181,386],{"class":264},[220,63183,63184,63186,63188],{"class":222,"line":389},[220,63185,402],{"class":264},[220,63187,347],{"class":420},[220,63189,359],{"class":264},[212,63191,63193],{"className":251,"code":63192,"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,63194,63195,63205,63209,63223,63227,63236,63240],{"__ignoreMap":178},[220,63196,63197,63199,63201,63203],{"class":222,"line":223},[220,63198,261],{"class":260},[220,63200,11364],{"class":264},[220,63202,268],{"class":260},[220,63204,11369],{"class":230},[220,63206,63207],{"class":222,"line":179},[220,63208,647],{"emptyLinePlaceholder":194},[220,63210,63211,63213,63215,63217,63219,63221],{"class":222,"line":389},[220,63212,1735],{"class":260},[220,63214,1738],{"class":420},[220,63216,1741],{"class":260},[220,63218,1744],{"class":260},[220,63220,1747],{"class":226},[220,63222,1750],{"class":264},[220,63224,63225],{"class":222,"line":399},[220,63226,1765],{"class":264},[220,63228,63229,63231,63234],{"class":222,"line":644},[220,63230,1770],{"class":264},[220,63232,63233],{"class":230},"'PerlinNoise'",[220,63235,2465],{"class":264},[220,63237,63238],{"class":222,"line":650},[220,63239,1787],{"class":264},[220,63241,63242],{"class":222,"line":656},[220,63243,1792],{"class":264},[1504,63245,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":63247},[63248,63249],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":63058,"description":63066},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":63256,"title":63257,"body":63258,"category":33256,"componentType":25740,"description":63265,"extension":191,"meta":63526,"navigation":194,"path":63527,"requiresChild":194,"seo":63528,"stem":63529,"__hash__":63530},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":63259,"toc":63522},[63260,63263,63266,63268,63270,63273,63275,63520],[11,63261,63257],{"id":63262},"perspective",[15,63264,63265],{},"Rotate the plane in 3D space with pan and tilt",[31771,63267],{"component":63257},[23,63269,31775],{"id":26391},[31777,63271],{":props":63272},"[{\"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,63274,31783],{"id":31782},[246,63276,63277,63322,63366,63410,63454],{":tabs":1557},[212,63278,63280],{"className":334,"code":63279,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,63281,63282,63290,63298,63306,63314],{"__ignoreMap":178},[220,63283,63284,63286,63288],{"class":222,"line":223},[220,63285,343],{"class":264},[220,63287,347],{"class":346},[220,63289,359],{"class":264},[220,63291,63292,63294,63296],{"class":222,"line":179},[220,63293,364],{"class":264},[220,63295,63257],{"class":346},[220,63297,359],{"class":264},[220,63299,63300,63302,63304],{"class":222,"line":389},[220,63301,2550],{"class":264},[220,63303,2553],{"class":346},[220,63305,386],{"class":264},[220,63307,63308,63310,63312],{"class":222,"line":399},[220,63309,2567],{"class":264},[220,63311,63257],{"class":346},[220,63313,359],{"class":264},[220,63315,63316,63318,63320],{"class":222,"line":644},[220,63317,402],{"class":264},[220,63319,347],{"class":346},[220,63321,359],{"class":264},[212,63323,63324],{"className":409,"code":63279,"language":411,"meta":178,"style":178},[99,63325,63326,63334,63342,63350,63358],{"__ignoreMap":178},[220,63327,63328,63330,63332],{"class":222,"line":223},[220,63329,343],{"class":264},[220,63331,347],{"class":420},[220,63333,359],{"class":264},[220,63335,63336,63338,63340],{"class":222,"line":179},[220,63337,364],{"class":264},[220,63339,63257],{"class":420},[220,63341,359],{"class":264},[220,63343,63344,63346,63348],{"class":222,"line":389},[220,63345,2550],{"class":264},[220,63347,2553],{"class":420},[220,63349,386],{"class":264},[220,63351,63352,63354,63356],{"class":222,"line":399},[220,63353,2567],{"class":264},[220,63355,63257],{"class":420},[220,63357,359],{"class":264},[220,63359,63360,63362,63364],{"class":222,"line":644},[220,63361,402],{"class":264},[220,63363,347],{"class":420},[220,63365,359],{"class":264},[212,63367,63368],{"className":2844,"code":63279,"language":2846,"meta":178,"style":178},[99,63369,63370,63378,63386,63394,63402],{"__ignoreMap":178},[220,63371,63372,63374,63376],{"class":222,"line":223},[220,63373,343],{"class":264},[220,63375,347],{"class":420},[220,63377,359],{"class":264},[220,63379,63380,63382,63384],{"class":222,"line":179},[220,63381,364],{"class":264},[220,63383,63257],{"class":420},[220,63385,359],{"class":264},[220,63387,63388,63390,63392],{"class":222,"line":389},[220,63389,2550],{"class":264},[220,63391,2553],{"class":420},[220,63393,386],{"class":264},[220,63395,63396,63398,63400],{"class":222,"line":399},[220,63397,2567],{"class":264},[220,63399,63257],{"class":420},[220,63401,359],{"class":264},[220,63403,63404,63406,63408],{"class":222,"line":644},[220,63405,402],{"class":264},[220,63407,347],{"class":420},[220,63409,359],{"class":264},[212,63411,63412],{"className":468,"code":63279,"language":469,"meta":178,"style":178},[99,63413,63414,63422,63430,63438,63446],{"__ignoreMap":178},[220,63415,63416,63418,63420],{"class":222,"line":223},[220,63417,343],{"class":264},[220,63419,347],{"class":420},[220,63421,359],{"class":264},[220,63423,63424,63426,63428],{"class":222,"line":179},[220,63425,364],{"class":264},[220,63427,63257],{"class":420},[220,63429,359],{"class":264},[220,63431,63432,63434,63436],{"class":222,"line":389},[220,63433,2550],{"class":264},[220,63435,2553],{"class":420},[220,63437,386],{"class":264},[220,63439,63440,63442,63444],{"class":222,"line":399},[220,63441,2567],{"class":264},[220,63443,63257],{"class":420},[220,63445,359],{"class":264},[220,63447,63448,63450,63452],{"class":222,"line":644},[220,63449,402],{"class":264},[220,63451,347],{"class":420},[220,63453,359],{"class":264},[212,63455,63457],{"className":251,"code":63456,"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,63458,63459,63469,63473,63487,63491,63500,63508,63512,63516],{"__ignoreMap":178},[220,63460,63461,63463,63465,63467],{"class":222,"line":223},[220,63462,261],{"class":260},[220,63464,11364],{"class":264},[220,63466,268],{"class":260},[220,63468,11369],{"class":230},[220,63470,63471],{"class":222,"line":179},[220,63472,647],{"emptyLinePlaceholder":194},[220,63474,63475,63477,63479,63481,63483,63485],{"class":222,"line":389},[220,63476,1735],{"class":260},[220,63478,1738],{"class":420},[220,63480,1741],{"class":260},[220,63482,1744],{"class":260},[220,63484,1747],{"class":226},[220,63486,1750],{"class":264},[220,63488,63489],{"class":222,"line":399},[220,63490,1765],{"class":264},[220,63492,63493,63495,63498],{"class":222,"line":644},[220,63494,1770],{"class":264},[220,63496,63497],{"class":230},"'Perspective'",[220,63499,6860],{"class":264},[220,63501,63502,63504,63506],{"class":222,"line":650},[220,63503,6865],{"class":264},[220,63505,6409],{"class":230},[220,63507,2465],{"class":264},[220,63509,63510],{"class":222,"line":656},[220,63511,6882],{"class":264},[220,63513,63514],{"class":222,"line":673},[220,63515,1787],{"class":264},[220,63517,63518],{"class":222,"line":682},[220,63519,1792],{"class":264},[1504,63521,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":63523},[63524,63525],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":63257,"description":63265},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":63532,"title":63533,"body":63534,"category":35419,"componentType":25740,"description":63541,"extension":191,"meta":63858,"navigation":194,"path":63859,"requiresChild":194,"seo":63860,"stem":63861,"__hash__":63862},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":63535,"toc":63854},[63536,63539,63542,63544,63546,63549,63551,63852],[11,63537,63533],{"id":63538},"pixelsort",[15,63540,63541],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31771,63543],{"component":63533},[23,63545,31775],{"id":26391},[31777,63547],{":props":63548},"[{\"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,63550,31783],{"id":31782},[246,63552,63553,63609,63668,63724,63782],{":tabs":1557},[212,63554,63556],{"className":334,"code":63555,"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,63557,63558,63566,63573,63581,63585,63593,63601],{"__ignoreMap":178},[220,63559,63560,63562,63564],{"class":222,"line":223},[220,63561,343],{"class":264},[220,63563,347],{"class":346},[220,63565,359],{"class":264},[220,63567,63568,63570],{"class":222,"line":179},[220,63569,364],{"class":264},[220,63571,63572],{"class":346},"PixelSort\n",[220,63574,63575,63577,63579],{"class":222,"line":389},[220,63576,17262],{"class":226},[220,63578,353],{"class":264},[220,63580,48208],{"class":230},[220,63582,63583],{"class":222,"line":399},[220,63584,31819],{"class":264},[220,63586,63587,63589,63591],{"class":222,"line":644},[220,63588,2550],{"class":264},[220,63590,2553],{"class":346},[220,63592,386],{"class":264},[220,63594,63595,63597,63599],{"class":222,"line":650},[220,63596,2567],{"class":264},[220,63598,63533],{"class":346},[220,63600,359],{"class":264},[220,63602,63603,63605,63607],{"class":222,"line":656},[220,63604,402],{"class":264},[220,63606,347],{"class":346},[220,63608,359],{"class":264},[212,63610,63612],{"className":409,"code":63611,"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,63613,63614,63622,63628,63640,63644,63652,63660],{"__ignoreMap":178},[220,63615,63616,63618,63620],{"class":222,"line":223},[220,63617,343],{"class":264},[220,63619,347],{"class":420},[220,63621,359],{"class":264},[220,63623,63624,63626],{"class":222,"line":179},[220,63625,364],{"class":264},[220,63627,63572],{"class":420},[220,63629,63630,63632,63634,63636,63638],{"class":222,"line":389},[220,63631,9497],{"class":226},[220,63633,353],{"class":260},[220,63635,743],{"class":264},[220,63637,8100],{"class":420},[220,63639,749],{"class":264},[220,63641,63642],{"class":222,"line":399},[220,63643,31819],{"class":264},[220,63645,63646,63648,63650],{"class":222,"line":644},[220,63647,2550],{"class":264},[220,63649,2553],{"class":420},[220,63651,386],{"class":264},[220,63653,63654,63656,63658],{"class":222,"line":650},[220,63655,2567],{"class":264},[220,63657,63533],{"class":420},[220,63659,359],{"class":264},[220,63661,63662,63664,63666],{"class":222,"line":656},[220,63663,402],{"class":264},[220,63665,347],{"class":420},[220,63667,359],{"class":264},[212,63669,63670],{"className":2844,"code":63611,"language":2846,"meta":178,"style":178},[99,63671,63672,63680,63686,63696,63700,63708,63716],{"__ignoreMap":178},[220,63673,63674,63676,63678],{"class":222,"line":223},[220,63675,343],{"class":264},[220,63677,347],{"class":420},[220,63679,359],{"class":264},[220,63681,63682,63684],{"class":222,"line":179},[220,63683,364],{"class":264},[220,63685,63572],{"class":420},[220,63687,63688,63690,63692,63694],{"class":222,"line":389},[220,63689,9497],{"class":226},[220,63691,29729],{"class":264},[220,63693,8100],{"class":420},[220,63695,749],{"class":264},[220,63697,63698],{"class":222,"line":399},[220,63699,31819],{"class":264},[220,63701,63702,63704,63706],{"class":222,"line":644},[220,63703,2550],{"class":264},[220,63705,2553],{"class":420},[220,63707,386],{"class":264},[220,63709,63710,63712,63714],{"class":222,"line":650},[220,63711,2567],{"class":264},[220,63713,63533],{"class":420},[220,63715,359],{"class":264},[220,63717,63718,63720,63722],{"class":222,"line":656},[220,63719,402],{"class":264},[220,63721,347],{"class":420},[220,63723,359],{"class":264},[212,63725,63726],{"className":468,"code":63611,"language":469,"meta":178,"style":178},[99,63727,63728,63736,63742,63754,63758,63766,63774],{"__ignoreMap":178},[220,63729,63730,63732,63734],{"class":222,"line":223},[220,63731,343],{"class":264},[220,63733,347],{"class":420},[220,63735,359],{"class":264},[220,63737,63738,63740],{"class":222,"line":179},[220,63739,364],{"class":264},[220,63741,63572],{"class":420},[220,63743,63744,63746,63748,63750,63752],{"class":222,"line":389},[220,63745,9497],{"class":226},[220,63747,353],{"class":260},[220,63749,743],{"class":264},[220,63751,8100],{"class":420},[220,63753,749],{"class":264},[220,63755,63756],{"class":222,"line":399},[220,63757,31819],{"class":264},[220,63759,63760,63762,63764],{"class":222,"line":644},[220,63761,2550],{"class":264},[220,63763,2553],{"class":420},[220,63765,386],{"class":264},[220,63767,63768,63770,63772],{"class":222,"line":650},[220,63769,2567],{"class":264},[220,63771,63533],{"class":420},[220,63773,359],{"class":264},[220,63775,63776,63778,63780],{"class":222,"line":656},[220,63777,402],{"class":264},[220,63779,347],{"class":420},[220,63781,359],{"class":264},[212,63783,63785],{"className":251,"code":63784,"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,63786,63787,63797,63801,63815,63819,63832,63840,63844,63848],{"__ignoreMap":178},[220,63788,63789,63791,63793,63795],{"class":222,"line":223},[220,63790,261],{"class":260},[220,63792,11364],{"class":264},[220,63794,268],{"class":260},[220,63796,11369],{"class":230},[220,63798,63799],{"class":222,"line":179},[220,63800,647],{"emptyLinePlaceholder":194},[220,63802,63803,63805,63807,63809,63811,63813],{"class":222,"line":389},[220,63804,1735],{"class":260},[220,63806,1738],{"class":420},[220,63808,1741],{"class":260},[220,63810,1744],{"class":260},[220,63812,1747],{"class":226},[220,63814,1750],{"class":264},[220,63816,63817],{"class":222,"line":399},[220,63818,1765],{"class":264},[220,63820,63821,63823,63826,63828,63830],{"class":222,"line":644},[220,63822,1770],{"class":264},[220,63824,63825],{"class":230},"'PixelSort'",[220,63827,7392],{"class":264},[220,63829,8100],{"class":420},[220,63831,7397],{"class":264},[220,63833,63834,63836,63838],{"class":222,"line":650},[220,63835,6865],{"class":264},[220,63837,6409],{"class":230},[220,63839,2465],{"class":264},[220,63841,63842],{"class":222,"line":656},[220,63843,6882],{"class":264},[220,63845,63846],{"class":222,"line":673},[220,63847,1787],{"class":264},[220,63849,63850],{"class":222,"line":682},[220,63851,1792],{"class":264},[1504,63853,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63855},[63856,63857],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":63533,"description":63541},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":63864,"title":63865,"body":63866,"category":35419,"componentType":25740,"description":63873,"extension":191,"meta":64190,"navigation":194,"path":64191,"requiresChild":194,"seo":64192,"stem":64193,"__hash__":64194},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":63867,"toc":64186},[63868,63871,63874,63876,63878,63881,63883,64184],[11,63869,63865],{"id":63870},"pixelthrow",[15,63872,63873],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[31771,63875],{"component":63865},[23,63877,31775],{"id":26391},[31777,63879],{":props":63880},"[{\"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,63882,31783],{"id":31782},[246,63884,63885,63941,64000,64056,64114],{":tabs":1557},[212,63886,63888],{"className":334,"code":63887,"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,63889,63890,63898,63905,63913,63917,63925,63933],{"__ignoreMap":178},[220,63891,63892,63894,63896],{"class":222,"line":223},[220,63893,343],{"class":264},[220,63895,347],{"class":346},[220,63897,359],{"class":264},[220,63899,63900,63902],{"class":222,"line":179},[220,63901,364],{"class":264},[220,63903,63904],{"class":346},"PixelThrow\n",[220,63906,63907,63909,63911],{"class":222,"line":389},[220,63908,17262],{"class":226},[220,63910,353],{"class":264},[220,63912,61576],{"class":230},[220,63914,63915],{"class":222,"line":399},[220,63916,31819],{"class":264},[220,63918,63919,63921,63923],{"class":222,"line":644},[220,63920,2550],{"class":264},[220,63922,2553],{"class":346},[220,63924,386],{"class":264},[220,63926,63927,63929,63931],{"class":222,"line":650},[220,63928,2567],{"class":264},[220,63930,63865],{"class":346},[220,63932,359],{"class":264},[220,63934,63935,63937,63939],{"class":222,"line":656},[220,63936,402],{"class":264},[220,63938,347],{"class":346},[220,63940,359],{"class":264},[212,63942,63944],{"className":409,"code":63943,"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,63945,63946,63954,63960,63972,63976,63984,63992],{"__ignoreMap":178},[220,63947,63948,63950,63952],{"class":222,"line":223},[220,63949,343],{"class":264},[220,63951,347],{"class":420},[220,63953,359],{"class":264},[220,63955,63956,63958],{"class":222,"line":179},[220,63957,364],{"class":264},[220,63959,63904],{"class":420},[220,63961,63962,63964,63966,63968,63970],{"class":222,"line":389},[220,63963,9497],{"class":226},[220,63965,353],{"class":260},[220,63967,743],{"class":264},[220,63969,16833],{"class":420},[220,63971,749],{"class":264},[220,63973,63974],{"class":222,"line":399},[220,63975,31819],{"class":264},[220,63977,63978,63980,63982],{"class":222,"line":644},[220,63979,2550],{"class":264},[220,63981,2553],{"class":420},[220,63983,386],{"class":264},[220,63985,63986,63988,63990],{"class":222,"line":650},[220,63987,2567],{"class":264},[220,63989,63865],{"class":420},[220,63991,359],{"class":264},[220,63993,63994,63996,63998],{"class":222,"line":656},[220,63995,402],{"class":264},[220,63997,347],{"class":420},[220,63999,359],{"class":264},[212,64001,64002],{"className":2844,"code":63943,"language":2846,"meta":178,"style":178},[99,64003,64004,64012,64018,64028,64032,64040,64048],{"__ignoreMap":178},[220,64005,64006,64008,64010],{"class":222,"line":223},[220,64007,343],{"class":264},[220,64009,347],{"class":420},[220,64011,359],{"class":264},[220,64013,64014,64016],{"class":222,"line":179},[220,64015,364],{"class":264},[220,64017,63904],{"class":420},[220,64019,64020,64022,64024,64026],{"class":222,"line":389},[220,64021,9497],{"class":226},[220,64023,29729],{"class":264},[220,64025,16833],{"class":420},[220,64027,749],{"class":264},[220,64029,64030],{"class":222,"line":399},[220,64031,31819],{"class":264},[220,64033,64034,64036,64038],{"class":222,"line":644},[220,64035,2550],{"class":264},[220,64037,2553],{"class":420},[220,64039,386],{"class":264},[220,64041,64042,64044,64046],{"class":222,"line":650},[220,64043,2567],{"class":264},[220,64045,63865],{"class":420},[220,64047,359],{"class":264},[220,64049,64050,64052,64054],{"class":222,"line":656},[220,64051,402],{"class":264},[220,64053,347],{"class":420},[220,64055,359],{"class":264},[212,64057,64058],{"className":468,"code":63943,"language":469,"meta":178,"style":178},[99,64059,64060,64068,64074,64086,64090,64098,64106],{"__ignoreMap":178},[220,64061,64062,64064,64066],{"class":222,"line":223},[220,64063,343],{"class":264},[220,64065,347],{"class":420},[220,64067,359],{"class":264},[220,64069,64070,64072],{"class":222,"line":179},[220,64071,364],{"class":264},[220,64073,63904],{"class":420},[220,64075,64076,64078,64080,64082,64084],{"class":222,"line":389},[220,64077,9497],{"class":226},[220,64079,353],{"class":260},[220,64081,743],{"class":264},[220,64083,16833],{"class":420},[220,64085,749],{"class":264},[220,64087,64088],{"class":222,"line":399},[220,64089,31819],{"class":264},[220,64091,64092,64094,64096],{"class":222,"line":644},[220,64093,2550],{"class":264},[220,64095,2553],{"class":420},[220,64097,386],{"class":264},[220,64099,64100,64102,64104],{"class":222,"line":650},[220,64101,2567],{"class":264},[220,64103,63865],{"class":420},[220,64105,359],{"class":264},[220,64107,64108,64110,64112],{"class":222,"line":656},[220,64109,402],{"class":264},[220,64111,347],{"class":420},[220,64113,359],{"class":264},[212,64115,64117],{"className":251,"code":64116,"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,64118,64119,64129,64133,64147,64151,64164,64172,64176,64180],{"__ignoreMap":178},[220,64120,64121,64123,64125,64127],{"class":222,"line":223},[220,64122,261],{"class":260},[220,64124,11364],{"class":264},[220,64126,268],{"class":260},[220,64128,11369],{"class":230},[220,64130,64131],{"class":222,"line":179},[220,64132,647],{"emptyLinePlaceholder":194},[220,64134,64135,64137,64139,64141,64143,64145],{"class":222,"line":389},[220,64136,1735],{"class":260},[220,64138,1738],{"class":420},[220,64140,1741],{"class":260},[220,64142,1744],{"class":260},[220,64144,1747],{"class":226},[220,64146,1750],{"class":264},[220,64148,64149],{"class":222,"line":399},[220,64150,1765],{"class":264},[220,64152,64153,64155,64158,64160,64162],{"class":222,"line":644},[220,64154,1770],{"class":264},[220,64156,64157],{"class":230},"'PixelThrow'",[220,64159,7392],{"class":264},[220,64161,16833],{"class":420},[220,64163,7397],{"class":264},[220,64165,64166,64168,64170],{"class":222,"line":650},[220,64167,6865],{"class":264},[220,64169,6409],{"class":230},[220,64171,2465],{"class":264},[220,64173,64174],{"class":222,"line":656},[220,64175,6882],{"class":264},[220,64177,64178],{"class":222,"line":673},[220,64179,1787],{"class":264},[220,64181,64182],{"class":222,"line":682},[220,64183,1792],{"class":264},[1504,64185,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64187},[64188,64189],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":63865,"description":63873},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":64196,"title":64197,"body":64198,"category":32666,"componentType":25740,"description":64205,"extension":191,"meta":64466,"navigation":194,"path":64467,"requiresChild":194,"seo":64468,"stem":64469,"__hash__":64470},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":64199,"toc":64462},[64200,64203,64206,64208,64210,64213,64215,64460],[11,64201,64197],{"id":64202},"pixelate",[15,64204,64205],{},"Pixelation effect with adjustable cell size",[31771,64207],{"component":64197},[23,64209,31775],{"id":26391},[31777,64211],{":props":64212},"[{\"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,64214,31783],{"id":31782},[246,64216,64217,64262,64306,64350,64394],{":tabs":1557},[212,64218,64220],{"className":334,"code":64219,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,64221,64222,64230,64238,64246,64254],{"__ignoreMap":178},[220,64223,64224,64226,64228],{"class":222,"line":223},[220,64225,343],{"class":264},[220,64227,347],{"class":346},[220,64229,359],{"class":264},[220,64231,64232,64234,64236],{"class":222,"line":179},[220,64233,364],{"class":264},[220,64235,64197],{"class":346},[220,64237,359],{"class":264},[220,64239,64240,64242,64244],{"class":222,"line":389},[220,64241,2550],{"class":264},[220,64243,2553],{"class":346},[220,64245,386],{"class":264},[220,64247,64248,64250,64252],{"class":222,"line":399},[220,64249,2567],{"class":264},[220,64251,64197],{"class":346},[220,64253,359],{"class":264},[220,64255,64256,64258,64260],{"class":222,"line":644},[220,64257,402],{"class":264},[220,64259,347],{"class":346},[220,64261,359],{"class":264},[212,64263,64264],{"className":409,"code":64219,"language":411,"meta":178,"style":178},[99,64265,64266,64274,64282,64290,64298],{"__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,64280],{"class":222,"line":179},[220,64277,364],{"class":264},[220,64279,64197],{"class":420},[220,64281,359],{"class":264},[220,64283,64284,64286,64288],{"class":222,"line":389},[220,64285,2550],{"class":264},[220,64287,2553],{"class":420},[220,64289,386],{"class":264},[220,64291,64292,64294,64296],{"class":222,"line":399},[220,64293,2567],{"class":264},[220,64295,64197],{"class":420},[220,64297,359],{"class":264},[220,64299,64300,64302,64304],{"class":222,"line":644},[220,64301,402],{"class":264},[220,64303,347],{"class":420},[220,64305,359],{"class":264},[212,64307,64308],{"className":2844,"code":64219,"language":2846,"meta":178,"style":178},[99,64309,64310,64318,64326,64334,64342],{"__ignoreMap":178},[220,64311,64312,64314,64316],{"class":222,"line":223},[220,64313,343],{"class":264},[220,64315,347],{"class":420},[220,64317,359],{"class":264},[220,64319,64320,64322,64324],{"class":222,"line":179},[220,64321,364],{"class":264},[220,64323,64197],{"class":420},[220,64325,359],{"class":264},[220,64327,64328,64330,64332],{"class":222,"line":389},[220,64329,2550],{"class":264},[220,64331,2553],{"class":420},[220,64333,386],{"class":264},[220,64335,64336,64338,64340],{"class":222,"line":399},[220,64337,2567],{"class":264},[220,64339,64197],{"class":420},[220,64341,359],{"class":264},[220,64343,64344,64346,64348],{"class":222,"line":644},[220,64345,402],{"class":264},[220,64347,347],{"class":420},[220,64349,359],{"class":264},[212,64351,64352],{"className":468,"code":64219,"language":469,"meta":178,"style":178},[99,64353,64354,64362,64370,64378,64386],{"__ignoreMap":178},[220,64355,64356,64358,64360],{"class":222,"line":223},[220,64357,343],{"class":264},[220,64359,347],{"class":420},[220,64361,359],{"class":264},[220,64363,64364,64366,64368],{"class":222,"line":179},[220,64365,364],{"class":264},[220,64367,64197],{"class":420},[220,64369,359],{"class":264},[220,64371,64372,64374,64376],{"class":222,"line":389},[220,64373,2550],{"class":264},[220,64375,2553],{"class":420},[220,64377,386],{"class":264},[220,64379,64380,64382,64384],{"class":222,"line":399},[220,64381,2567],{"class":264},[220,64383,64197],{"class":420},[220,64385,359],{"class":264},[220,64387,64388,64390,64392],{"class":222,"line":644},[220,64389,402],{"class":264},[220,64391,347],{"class":420},[220,64393,359],{"class":264},[212,64395,64397],{"className":251,"code":64396,"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,64398,64399,64409,64413,64427,64431,64440,64448,64452,64456],{"__ignoreMap":178},[220,64400,64401,64403,64405,64407],{"class":222,"line":223},[220,64402,261],{"class":260},[220,64404,11364],{"class":264},[220,64406,268],{"class":260},[220,64408,11369],{"class":230},[220,64410,64411],{"class":222,"line":179},[220,64412,647],{"emptyLinePlaceholder":194},[220,64414,64415,64417,64419,64421,64423,64425],{"class":222,"line":389},[220,64416,1735],{"class":260},[220,64418,1738],{"class":420},[220,64420,1741],{"class":260},[220,64422,1744],{"class":260},[220,64424,1747],{"class":226},[220,64426,1750],{"class":264},[220,64428,64429],{"class":222,"line":399},[220,64430,1765],{"class":264},[220,64432,64433,64435,64438],{"class":222,"line":644},[220,64434,1770],{"class":264},[220,64436,64437],{"class":230},"'Pixelate'",[220,64439,6860],{"class":264},[220,64441,64442,64444,64446],{"class":222,"line":650},[220,64443,6865],{"class":264},[220,64445,6409],{"class":230},[220,64447,2465],{"class":264},[220,64449,64450],{"class":222,"line":656},[220,64451,6882],{"class":264},[220,64453,64454],{"class":222,"line":673},[220,64455,1787],{"class":264},[220,64457,64458],{"class":222,"line":682},[220,64459,1792],{"class":264},[1504,64461,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":64463},[64464,64465],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":64197,"description":64205},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":64472,"title":12926,"body":64473,"category":32923,"componentType":25734,"description":64480,"extension":191,"meta":64721,"navigation":194,"path":64722,"requiresChild":32390,"seo":64723,"stem":64724,"__hash__":64725},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":64474,"toc":64717},[64475,64478,64481,64483,64485,64488,64490,64715],[11,64476,12926],{"id":64477},"plasma",[15,64479,64480],{},"Animated effect of glowing plasma",[31771,64482],{"component":12926},[23,64484,31775],{"id":26391},[31777,64486],{":props":64487},"[{\"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,64489,31783],{"id":31782},[246,64491,64492,64532,64575,64615,64657],{":tabs":1557},[212,64493,64495],{"className":334,"code":64494,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,64496,64497,64505,64512,64520,64524],{"__ignoreMap":178},[220,64498,64499,64501,64503],{"class":222,"line":223},[220,64500,343],{"class":264},[220,64502,347],{"class":346},[220,64504,359],{"class":264},[220,64506,64507,64509],{"class":222,"line":179},[220,64508,364],{"class":264},[220,64510,64511],{"class":346},"Plasma\n",[220,64513,64514,64516,64518],{"class":222,"line":389},[220,64515,20228],{"class":226},[220,64517,353],{"class":264},[220,64519,60738],{"class":230},[220,64521,64522],{"class":222,"line":399},[220,64523,1234],{"class":264},[220,64525,64526,64528,64530],{"class":222,"line":644},[220,64527,402],{"class":264},[220,64529,347],{"class":346},[220,64531,359],{"class":264},[212,64533,64535],{"className":409,"code":64534,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,64536,64537,64545,64551,64563,64567],{"__ignoreMap":178},[220,64538,64539,64541,64543],{"class":222,"line":223},[220,64540,343],{"class":264},[220,64542,347],{"class":420},[220,64544,359],{"class":264},[220,64546,64547,64549],{"class":222,"line":179},[220,64548,364],{"class":264},[220,64550,64511],{"class":420},[220,64552,64553,64555,64557,64559,64561],{"class":222,"line":389},[220,64554,20339],{"class":226},[220,64556,353],{"class":260},[220,64558,743],{"class":264},[220,64560,60788],{"class":420},[220,64562,749],{"class":264},[220,64564,64565],{"class":222,"line":399},[220,64566,1234],{"class":264},[220,64568,64569,64571,64573],{"class":222,"line":644},[220,64570,402],{"class":264},[220,64572,347],{"class":420},[220,64574,359],{"class":264},[212,64576,64577],{"className":2844,"code":64534,"language":2846,"meta":178,"style":178},[99,64578,64579,64587,64593,64603,64607],{"__ignoreMap":178},[220,64580,64581,64583,64585],{"class":222,"line":223},[220,64582,343],{"class":264},[220,64584,347],{"class":420},[220,64586,359],{"class":264},[220,64588,64589,64591],{"class":222,"line":179},[220,64590,364],{"class":264},[220,64592,64511],{"class":420},[220,64594,64595,64597,64599,64601],{"class":222,"line":389},[220,64596,20339],{"class":226},[220,64598,29729],{"class":264},[220,64600,60788],{"class":420},[220,64602,749],{"class":264},[220,64604,64605],{"class":222,"line":399},[220,64606,1234],{"class":264},[220,64608,64609,64611,64613],{"class":222,"line":644},[220,64610,402],{"class":264},[220,64612,347],{"class":420},[220,64614,359],{"class":264},[212,64616,64617],{"className":468,"code":64534,"language":469,"meta":178,"style":178},[99,64618,64619,64627,64633,64645,64649],{"__ignoreMap":178},[220,64620,64621,64623,64625],{"class":222,"line":223},[220,64622,343],{"class":264},[220,64624,347],{"class":420},[220,64626,359],{"class":264},[220,64628,64629,64631],{"class":222,"line":179},[220,64630,364],{"class":264},[220,64632,64511],{"class":420},[220,64634,64635,64637,64639,64641,64643],{"class":222,"line":389},[220,64636,20339],{"class":226},[220,64638,353],{"class":260},[220,64640,743],{"class":264},[220,64642,60788],{"class":420},[220,64644,749],{"class":264},[220,64646,64647],{"class":222,"line":399},[220,64648,1234],{"class":264},[220,64650,64651,64653,64655],{"class":222,"line":644},[220,64652,402],{"class":264},[220,64654,347],{"class":420},[220,64656,359],{"class":264},[212,64658,64660],{"className":251,"code":64659,"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,64661,64662,64672,64676,64690,64694,64707,64711],{"__ignoreMap":178},[220,64663,64664,64666,64668,64670],{"class":222,"line":223},[220,64665,261],{"class":260},[220,64667,11364],{"class":264},[220,64669,268],{"class":260},[220,64671,11369],{"class":230},[220,64673,64674],{"class":222,"line":179},[220,64675,647],{"emptyLinePlaceholder":194},[220,64677,64678,64680,64682,64684,64686,64688],{"class":222,"line":389},[220,64679,1735],{"class":260},[220,64681,1738],{"class":420},[220,64683,1741],{"class":260},[220,64685,1744],{"class":260},[220,64687,1747],{"class":226},[220,64689,1750],{"class":264},[220,64691,64692],{"class":222,"line":399},[220,64693,1765],{"class":264},[220,64695,64696,64698,64701,64703,64705],{"class":222,"line":644},[220,64697,1770],{"class":264},[220,64699,64700],{"class":230},"'Plasma'",[220,64702,32063],{"class":264},[220,64704,60788],{"class":420},[220,64706,1782],{"class":264},[220,64708,64709],{"class":222,"line":650},[220,64710,1787],{"class":264},[220,64712,64713],{"class":222,"line":656},[220,64714,1792],{"class":264},[1504,64716,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64718},[64719,64720],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":12926,"description":64480},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":64727,"title":64728,"body":64729,"category":36429,"componentType":25734,"description":64736,"extension":191,"meta":64921,"navigation":194,"path":64922,"requiresChild":32390,"seo":64923,"stem":64924,"__hash__":64925},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":64730,"toc":64917},[64731,64734,64737,64739,64741,64744,64746,64915],[11,64732,64728],{"id":64733},"plastic",[15,64735,64736],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31771,64738],{"component":64728},[23,64740,31775],{"id":26391},[31777,64742],{":props":64743},"[{\"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,64745,31783],{"id":31782},[246,64747,64748,64777,64805,64833,64861],{":tabs":1557},[212,64749,64751],{"className":334,"code":64750,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,64752,64753,64761,64769],{"__ignoreMap":178},[220,64754,64755,64757,64759],{"class":222,"line":223},[220,64756,343],{"class":264},[220,64758,347],{"class":346},[220,64760,359],{"class":264},[220,64762,64763,64765,64767],{"class":222,"line":179},[220,64764,364],{"class":264},[220,64766,64728],{"class":346},[220,64768,386],{"class":264},[220,64770,64771,64773,64775],{"class":222,"line":389},[220,64772,402],{"class":264},[220,64774,347],{"class":346},[220,64776,359],{"class":264},[212,64778,64779],{"className":409,"code":64750,"language":411,"meta":178,"style":178},[99,64780,64781,64789,64797],{"__ignoreMap":178},[220,64782,64783,64785,64787],{"class":222,"line":223},[220,64784,343],{"class":264},[220,64786,347],{"class":420},[220,64788,359],{"class":264},[220,64790,64791,64793,64795],{"class":222,"line":179},[220,64792,364],{"class":264},[220,64794,64728],{"class":420},[220,64796,386],{"class":264},[220,64798,64799,64801,64803],{"class":222,"line":389},[220,64800,402],{"class":264},[220,64802,347],{"class":420},[220,64804,359],{"class":264},[212,64806,64807],{"className":2844,"code":64750,"language":2846,"meta":178,"style":178},[99,64808,64809,64817,64825],{"__ignoreMap":178},[220,64810,64811,64813,64815],{"class":222,"line":223},[220,64812,343],{"class":264},[220,64814,347],{"class":420},[220,64816,359],{"class":264},[220,64818,64819,64821,64823],{"class":222,"line":179},[220,64820,364],{"class":264},[220,64822,64728],{"class":420},[220,64824,386],{"class":264},[220,64826,64827,64829,64831],{"class":222,"line":389},[220,64828,402],{"class":264},[220,64830,347],{"class":420},[220,64832,359],{"class":264},[212,64834,64835],{"className":468,"code":64750,"language":469,"meta":178,"style":178},[99,64836,64837,64845,64853],{"__ignoreMap":178},[220,64838,64839,64841,64843],{"class":222,"line":223},[220,64840,343],{"class":264},[220,64842,347],{"class":420},[220,64844,359],{"class":264},[220,64846,64847,64849,64851],{"class":222,"line":179},[220,64848,364],{"class":264},[220,64850,64728],{"class":420},[220,64852,386],{"class":264},[220,64854,64855,64857,64859],{"class":222,"line":389},[220,64856,402],{"class":264},[220,64858,347],{"class":420},[220,64860,359],{"class":264},[212,64862,64864],{"className":251,"code":64863,"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,64865,64866,64876,64880,64894,64898,64907,64911],{"__ignoreMap":178},[220,64867,64868,64870,64872,64874],{"class":222,"line":223},[220,64869,261],{"class":260},[220,64871,11364],{"class":264},[220,64873,268],{"class":260},[220,64875,11369],{"class":230},[220,64877,64878],{"class":222,"line":179},[220,64879,647],{"emptyLinePlaceholder":194},[220,64881,64882,64884,64886,64888,64890,64892],{"class":222,"line":389},[220,64883,1735],{"class":260},[220,64885,1738],{"class":420},[220,64887,1741],{"class":260},[220,64889,1744],{"class":260},[220,64891,1747],{"class":226},[220,64893,1750],{"class":264},[220,64895,64896],{"class":222,"line":399},[220,64897,1765],{"class":264},[220,64899,64900,64902,64905],{"class":222,"line":644},[220,64901,1770],{"class":264},[220,64903,64904],{"class":230},"'Plastic'",[220,64906,2465],{"class":264},[220,64908,64909],{"class":222,"line":650},[220,64910,1787],{"class":264},[220,64912,64913],{"class":222,"line":656},[220,64914,1792],{"class":264},[1504,64916,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":64918},[64919,64920],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":64728,"description":64736},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":64927,"title":64928,"body":64929,"category":33256,"componentType":25740,"description":64936,"extension":191,"meta":65299,"navigation":194,"path":65300,"requiresChild":194,"seo":65301,"stem":65302,"__hash__":65303},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":64930,"toc":65295},[64931,64934,64937,64939,64941,64944,64946,65293],[11,64932,64928],{"id":64933},"polarcoordinates",[15,64935,64936],{},"Convert rectangular coordinates to polar space",[31771,64938],{"component":64928},[23,64940,31775],{"id":26391},[31777,64942],{":props":64943},"[{\"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,64945,31783],{"id":31782},[246,64947,64948,65012,65083,65149,65219],{":tabs":1557},[212,64949,64951],{"className":334,"code":64950,"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,64952,64953,64961,64968,64976,64984,64988,64996,65004],{"__ignoreMap":178},[220,64954,64955,64957,64959],{"class":222,"line":223},[220,64956,343],{"class":264},[220,64958,347],{"class":346},[220,64960,359],{"class":264},[220,64962,64963,64965],{"class":222,"line":179},[220,64964,364],{"class":264},[220,64966,64967],{"class":346},"PolarCoordinates\n",[220,64969,64970,64972,64974],{"class":222,"line":389},[220,64971,17262],{"class":226},[220,64973,353],{"class":264},[220,64975,36485],{"class":230},[220,64977,64978,64980,64982],{"class":222,"line":399},[220,64979,20228],{"class":226},[220,64981,353],{"class":264},[220,64983,36485],{"class":230},[220,64985,64986],{"class":222,"line":644},[220,64987,31819],{"class":264},[220,64989,64990,64992,64994],{"class":222,"line":650},[220,64991,2550],{"class":264},[220,64993,2553],{"class":346},[220,64995,386],{"class":264},[220,64997,64998,65000,65002],{"class":222,"line":656},[220,64999,2567],{"class":264},[220,65001,64928],{"class":346},[220,65003,359],{"class":264},[220,65005,65006,65008,65010],{"class":222,"line":673},[220,65007,402],{"class":264},[220,65009,347],{"class":346},[220,65011,359],{"class":264},[212,65013,65015],{"className":409,"code":65014,"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,65016,65017,65025,65031,65043,65055,65059,65067,65075],{"__ignoreMap":178},[220,65018,65019,65021,65023],{"class":222,"line":223},[220,65020,343],{"class":264},[220,65022,347],{"class":420},[220,65024,359],{"class":264},[220,65026,65027,65029],{"class":222,"line":179},[220,65028,364],{"class":264},[220,65030,64967],{"class":420},[220,65032,65033,65035,65037,65039,65041],{"class":222,"line":389},[220,65034,9497],{"class":226},[220,65036,353],{"class":260},[220,65038,743],{"class":264},[220,65040,8528],{"class":420},[220,65042,749],{"class":264},[220,65044,65045,65047,65049,65051,65053],{"class":222,"line":399},[220,65046,20339],{"class":226},[220,65048,353],{"class":260},[220,65050,743],{"class":264},[220,65052,8528],{"class":420},[220,65054,749],{"class":264},[220,65056,65057],{"class":222,"line":644},[220,65058,31819],{"class":264},[220,65060,65061,65063,65065],{"class":222,"line":650},[220,65062,2550],{"class":264},[220,65064,2553],{"class":420},[220,65066,386],{"class":264},[220,65068,65069,65071,65073],{"class":222,"line":656},[220,65070,2567],{"class":264},[220,65072,64928],{"class":420},[220,65074,359],{"class":264},[220,65076,65077,65079,65081],{"class":222,"line":673},[220,65078,402],{"class":264},[220,65080,347],{"class":420},[220,65082,359],{"class":264},[212,65084,65085],{"className":2844,"code":65014,"language":2846,"meta":178,"style":178},[99,65086,65087,65095,65101,65111,65121,65125,65133,65141],{"__ignoreMap":178},[220,65088,65089,65091,65093],{"class":222,"line":223},[220,65090,343],{"class":264},[220,65092,347],{"class":420},[220,65094,359],{"class":264},[220,65096,65097,65099],{"class":222,"line":179},[220,65098,364],{"class":264},[220,65100,64967],{"class":420},[220,65102,65103,65105,65107,65109],{"class":222,"line":389},[220,65104,9497],{"class":226},[220,65106,29729],{"class":264},[220,65108,8528],{"class":420},[220,65110,749],{"class":264},[220,65112,65113,65115,65117,65119],{"class":222,"line":399},[220,65114,20339],{"class":226},[220,65116,29729],{"class":264},[220,65118,8528],{"class":420},[220,65120,749],{"class":264},[220,65122,65123],{"class":222,"line":644},[220,65124,31819],{"class":264},[220,65126,65127,65129,65131],{"class":222,"line":650},[220,65128,2550],{"class":264},[220,65130,2553],{"class":420},[220,65132,386],{"class":264},[220,65134,65135,65137,65139],{"class":222,"line":656},[220,65136,2567],{"class":264},[220,65138,64928],{"class":420},[220,65140,359],{"class":264},[220,65142,65143,65145,65147],{"class":222,"line":673},[220,65144,402],{"class":264},[220,65146,347],{"class":420},[220,65148,359],{"class":264},[212,65150,65151],{"className":468,"code":65014,"language":469,"meta":178,"style":178},[99,65152,65153,65161,65167,65179,65191,65195,65203,65211],{"__ignoreMap":178},[220,65154,65155,65157,65159],{"class":222,"line":223},[220,65156,343],{"class":264},[220,65158,347],{"class":420},[220,65160,359],{"class":264},[220,65162,65163,65165],{"class":222,"line":179},[220,65164,364],{"class":264},[220,65166,64967],{"class":420},[220,65168,65169,65171,65173,65175,65177],{"class":222,"line":389},[220,65170,9497],{"class":226},[220,65172,353],{"class":260},[220,65174,743],{"class":264},[220,65176,8528],{"class":420},[220,65178,749],{"class":264},[220,65180,65181,65183,65185,65187,65189],{"class":222,"line":399},[220,65182,20339],{"class":226},[220,65184,353],{"class":260},[220,65186,743],{"class":264},[220,65188,8528],{"class":420},[220,65190,749],{"class":264},[220,65192,65193],{"class":222,"line":644},[220,65194,31819],{"class":264},[220,65196,65197,65199,65201],{"class":222,"line":650},[220,65198,2550],{"class":264},[220,65200,2553],{"class":420},[220,65202,386],{"class":264},[220,65204,65205,65207,65209],{"class":222,"line":656},[220,65206,2567],{"class":264},[220,65208,64928],{"class":420},[220,65210,359],{"class":264},[220,65212,65213,65215,65217],{"class":222,"line":673},[220,65214,402],{"class":264},[220,65216,347],{"class":420},[220,65218,359],{"class":264},[212,65220,65222],{"className":251,"code":65221,"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,65223,65224,65234,65238,65252,65256,65273,65281,65285,65289],{"__ignoreMap":178},[220,65225,65226,65228,65230,65232],{"class":222,"line":223},[220,65227,261],{"class":260},[220,65229,11364],{"class":264},[220,65231,268],{"class":260},[220,65233,11369],{"class":230},[220,65235,65236],{"class":222,"line":179},[220,65237,647],{"emptyLinePlaceholder":194},[220,65239,65240,65242,65244,65246,65248,65250],{"class":222,"line":389},[220,65241,1735],{"class":260},[220,65243,1738],{"class":420},[220,65245,1741],{"class":260},[220,65247,1744],{"class":260},[220,65249,1747],{"class":226},[220,65251,1750],{"class":264},[220,65253,65254],{"class":222,"line":399},[220,65255,1765],{"class":264},[220,65257,65258,65260,65263,65265,65267,65269,65271],{"class":222,"line":644},[220,65259,1770],{"class":264},[220,65261,65262],{"class":230},"'PolarCoordinates'",[220,65264,7392],{"class":264},[220,65266,8528],{"class":420},[220,65268,45063],{"class":264},[220,65270,8528],{"class":420},[220,65272,7397],{"class":264},[220,65274,65275,65277,65279],{"class":222,"line":650},[220,65276,6865],{"class":264},[220,65278,6409],{"class":230},[220,65280,2465],{"class":264},[220,65282,65283],{"class":222,"line":656},[220,65284,6882],{"class":264},[220,65286,65287],{"class":222,"line":673},[220,65288,1787],{"class":264},[220,65290,65291],{"class":222,"line":682},[220,65292,1792],{"class":264},[1504,65294,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65296},[65297,65298],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":64928,"description":64936},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":65305,"title":65306,"body":65307,"category":15765,"componentType":25734,"description":65314,"extension":191,"meta":65591,"navigation":194,"path":65592,"requiresChild":32390,"seo":65593,"stem":65594,"__hash__":65595},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":65308,"toc":65587},[65309,65312,65315,65317,65319,65322,65324,65585],[11,65310,65306],{"id":65311},"polygon",[15,65313,65314],{},"Regular polygon with adjustable sides and corner rounding",[31771,65316],{"component":65306},[23,65318,31775],{"id":26391},[31777,65320],{":props":65321},"[{\"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,65323,31783],{"id":31782},[246,65325,65326,65374,65425,65473,65523],{":tabs":1557},[212,65327,65329],{"className":334,"code":65328,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,65330,65331,65339,65346,65354,65362,65366],{"__ignoreMap":178},[220,65332,65333,65335,65337],{"class":222,"line":223},[220,65334,343],{"class":264},[220,65336,347],{"class":346},[220,65338,359],{"class":264},[220,65340,65341,65343],{"class":222,"line":179},[220,65342,364],{"class":264},[220,65344,65345],{"class":346},"Polygon\n",[220,65347,65348,65350,65352],{"class":222,"line":389},[220,65349,9487],{"class":226},[220,65351,353],{"class":264},[220,65353,9443],{"class":230},[220,65355,65356,65358,65360],{"class":222,"line":399},[220,65357,17262],{"class":226},[220,65359,353],{"class":264},[220,65361,48208],{"class":230},[220,65363,65364],{"class":222,"line":644},[220,65365,1234],{"class":264},[220,65367,65368,65370,65372],{"class":222,"line":650},[220,65369,402],{"class":264},[220,65371,347],{"class":346},[220,65373,359],{"class":264},[212,65375,65377],{"className":409,"code":65376,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,65378,65379,65387,65393,65401,65413,65417],{"__ignoreMap":178},[220,65380,65381,65383,65385],{"class":222,"line":223},[220,65382,343],{"class":264},[220,65384,347],{"class":420},[220,65386,359],{"class":264},[220,65388,65389,65391],{"class":222,"line":179},[220,65390,364],{"class":264},[220,65392,65345],{"class":420},[220,65394,65395,65397,65399],{"class":222,"line":389},[220,65396,9487],{"class":226},[220,65398,353],{"class":260},[220,65400,9443],{"class":230},[220,65402,65403,65405,65407,65409,65411],{"class":222,"line":399},[220,65404,9497],{"class":226},[220,65406,353],{"class":260},[220,65408,743],{"class":264},[220,65410,8100],{"class":420},[220,65412,749],{"class":264},[220,65414,65415],{"class":222,"line":644},[220,65416,1234],{"class":264},[220,65418,65419,65421,65423],{"class":222,"line":650},[220,65420,402],{"class":264},[220,65422,347],{"class":420},[220,65424,359],{"class":264},[212,65426,65427],{"className":2844,"code":65376,"language":2846,"meta":178,"style":178},[99,65428,65429,65437,65443,65451,65461,65465],{"__ignoreMap":178},[220,65430,65431,65433,65435],{"class":222,"line":223},[220,65432,343],{"class":264},[220,65434,347],{"class":420},[220,65436,359],{"class":264},[220,65438,65439,65441],{"class":222,"line":179},[220,65440,364],{"class":264},[220,65442,65345],{"class":420},[220,65444,65445,65447,65449],{"class":222,"line":389},[220,65446,9487],{"class":226},[220,65448,353],{"class":264},[220,65450,9443],{"class":230},[220,65452,65453,65455,65457,65459],{"class":222,"line":399},[220,65454,9497],{"class":226},[220,65456,29729],{"class":264},[220,65458,8100],{"class":420},[220,65460,749],{"class":264},[220,65462,65463],{"class":222,"line":644},[220,65464,1234],{"class":264},[220,65466,65467,65469,65471],{"class":222,"line":650},[220,65468,402],{"class":264},[220,65470,347],{"class":420},[220,65472,359],{"class":264},[212,65474,65475],{"className":468,"code":65376,"language":469,"meta":178,"style":178},[99,65476,65477,65485,65491,65499,65511,65515],{"__ignoreMap":178},[220,65478,65479,65481,65483],{"class":222,"line":223},[220,65480,343],{"class":264},[220,65482,347],{"class":420},[220,65484,359],{"class":264},[220,65486,65487,65489],{"class":222,"line":179},[220,65488,364],{"class":264},[220,65490,65345],{"class":420},[220,65492,65493,65495,65497],{"class":222,"line":389},[220,65494,9487],{"class":226},[220,65496,353],{"class":260},[220,65498,9443],{"class":230},[220,65500,65501,65503,65505,65507,65509],{"class":222,"line":399},[220,65502,9497],{"class":226},[220,65504,353],{"class":260},[220,65506,743],{"class":264},[220,65508,8100],{"class":420},[220,65510,749],{"class":264},[220,65512,65513],{"class":222,"line":644},[220,65514,1234],{"class":264},[220,65516,65517,65519,65521],{"class":222,"line":650},[220,65518,402],{"class":264},[220,65520,347],{"class":420},[220,65522,359],{"class":264},[212,65524,65526],{"className":251,"code":65525,"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,65527,65528,65538,65542,65556,65560,65577,65581],{"__ignoreMap":178},[220,65529,65530,65532,65534,65536],{"class":222,"line":223},[220,65531,261],{"class":260},[220,65533,11364],{"class":264},[220,65535,268],{"class":260},[220,65537,11369],{"class":230},[220,65539,65540],{"class":222,"line":179},[220,65541,647],{"emptyLinePlaceholder":194},[220,65543,65544,65546,65548,65550,65552,65554],{"class":222,"line":389},[220,65545,1735],{"class":260},[220,65547,1738],{"class":420},[220,65549,1741],{"class":260},[220,65551,1744],{"class":260},[220,65553,1747],{"class":226},[220,65555,1750],{"class":264},[220,65557,65558],{"class":222,"line":399},[220,65559,1765],{"class":264},[220,65561,65562,65564,65567,65569,65571,65573,65575],{"class":222,"line":644},[220,65563,1770],{"class":264},[220,65565,65566],{"class":230},"'Polygon'",[220,65568,1776],{"class":264},[220,65570,10021],{"class":230},[220,65572,6417],{"class":264},[220,65574,8100],{"class":420},[220,65576,1782],{"class":264},[220,65578,65579],{"class":222,"line":650},[220,65580,1787],{"class":264},[220,65582,65583],{"class":222,"line":656},[220,65584,1792],{"class":264},[1504,65586,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65588},[65589,65590],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":65306,"description":65314},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":65597,"title":65598,"body":65599,"category":36228,"componentType":25740,"description":65606,"extension":191,"meta":65924,"navigation":194,"path":65925,"requiresChild":194,"seo":65926,"stem":65927,"__hash__":65928},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":65600,"toc":65920},[65601,65604,65607,65609,65611,65614,65616,65918],[11,65602,65598],{"id":65603},"posterize",[15,65605,65606],{},"Reduce color depth to create a poster effect",[31771,65608],{"component":65598},[23,65610,31775],{"id":26391},[31777,65612],{":props":65613},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,65615,31783],{"id":31782},[246,65617,65618,65675,65734,65790,65848],{":tabs":1557},[212,65619,65621],{"className":334,"code":65620,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65622,65623,65631,65638,65647,65651,65659,65667],{"__ignoreMap":178},[220,65624,65625,65627,65629],{"class":222,"line":223},[220,65626,343],{"class":264},[220,65628,347],{"class":346},[220,65630,359],{"class":264},[220,65632,65633,65635],{"class":222,"line":179},[220,65634,364],{"class":264},[220,65636,65637],{"class":346},"Posterize\n",[220,65639,65640,65642,65644],{"class":222,"line":389},[220,65641,20228],{"class":226},[220,65643,353],{"class":264},[220,65645,65646],{"class":230},"\"5\"\n",[220,65648,65649],{"class":222,"line":399},[220,65650,31819],{"class":264},[220,65652,65653,65655,65657],{"class":222,"line":644},[220,65654,2550],{"class":264},[220,65656,2553],{"class":346},[220,65658,386],{"class":264},[220,65660,65661,65663,65665],{"class":222,"line":650},[220,65662,2567],{"class":264},[220,65664,65598],{"class":346},[220,65666,359],{"class":264},[220,65668,65669,65671,65673],{"class":222,"line":656},[220,65670,402],{"class":264},[220,65672,347],{"class":346},[220,65674,359],{"class":264},[212,65676,65678],{"className":409,"code":65677,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,65679,65680,65688,65694,65706,65710,65718,65726],{"__ignoreMap":178},[220,65681,65682,65684,65686],{"class":222,"line":223},[220,65683,343],{"class":264},[220,65685,347],{"class":420},[220,65687,359],{"class":264},[220,65689,65690,65692],{"class":222,"line":179},[220,65691,364],{"class":264},[220,65693,65637],{"class":420},[220,65695,65696,65698,65700,65702,65704],{"class":222,"line":389},[220,65697,20339],{"class":226},[220,65699,353],{"class":260},[220,65701,743],{"class":264},[220,65703,21950],{"class":420},[220,65705,749],{"class":264},[220,65707,65708],{"class":222,"line":399},[220,65709,31819],{"class":264},[220,65711,65712,65714,65716],{"class":222,"line":644},[220,65713,2550],{"class":264},[220,65715,2553],{"class":420},[220,65717,386],{"class":264},[220,65719,65720,65722,65724],{"class":222,"line":650},[220,65721,2567],{"class":264},[220,65723,65598],{"class":420},[220,65725,359],{"class":264},[220,65727,65728,65730,65732],{"class":222,"line":656},[220,65729,402],{"class":264},[220,65731,347],{"class":420},[220,65733,359],{"class":264},[212,65735,65736],{"className":2844,"code":65677,"language":2846,"meta":178,"style":178},[99,65737,65738,65746,65752,65762,65766,65774,65782],{"__ignoreMap":178},[220,65739,65740,65742,65744],{"class":222,"line":223},[220,65741,343],{"class":264},[220,65743,347],{"class":420},[220,65745,359],{"class":264},[220,65747,65748,65750],{"class":222,"line":179},[220,65749,364],{"class":264},[220,65751,65637],{"class":420},[220,65753,65754,65756,65758,65760],{"class":222,"line":389},[220,65755,20339],{"class":226},[220,65757,29729],{"class":264},[220,65759,21950],{"class":420},[220,65761,749],{"class":264},[220,65763,65764],{"class":222,"line":399},[220,65765,31819],{"class":264},[220,65767,65768,65770,65772],{"class":222,"line":644},[220,65769,2550],{"class":264},[220,65771,2553],{"class":420},[220,65773,386],{"class":264},[220,65775,65776,65778,65780],{"class":222,"line":650},[220,65777,2567],{"class":264},[220,65779,65598],{"class":420},[220,65781,359],{"class":264},[220,65783,65784,65786,65788],{"class":222,"line":656},[220,65785,402],{"class":264},[220,65787,347],{"class":420},[220,65789,359],{"class":264},[212,65791,65792],{"className":468,"code":65677,"language":469,"meta":178,"style":178},[99,65793,65794,65802,65808,65820,65824,65832,65840],{"__ignoreMap":178},[220,65795,65796,65798,65800],{"class":222,"line":223},[220,65797,343],{"class":264},[220,65799,347],{"class":420},[220,65801,359],{"class":264},[220,65803,65804,65806],{"class":222,"line":179},[220,65805,364],{"class":264},[220,65807,65637],{"class":420},[220,65809,65810,65812,65814,65816,65818],{"class":222,"line":389},[220,65811,20339],{"class":226},[220,65813,353],{"class":260},[220,65815,743],{"class":264},[220,65817,21950],{"class":420},[220,65819,749],{"class":264},[220,65821,65822],{"class":222,"line":399},[220,65823,31819],{"class":264},[220,65825,65826,65828,65830],{"class":222,"line":644},[220,65827,2550],{"class":264},[220,65829,2553],{"class":420},[220,65831,386],{"class":264},[220,65833,65834,65836,65838],{"class":222,"line":650},[220,65835,2567],{"class":264},[220,65837,65598],{"class":420},[220,65839,359],{"class":264},[220,65841,65842,65844,65846],{"class":222,"line":656},[220,65843,402],{"class":264},[220,65845,347],{"class":420},[220,65847,359],{"class":264},[212,65849,65851],{"className":251,"code":65850,"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,65852,65853,65863,65867,65881,65885,65898,65906,65910,65914],{"__ignoreMap":178},[220,65854,65855,65857,65859,65861],{"class":222,"line":223},[220,65856,261],{"class":260},[220,65858,11364],{"class":264},[220,65860,268],{"class":260},[220,65862,11369],{"class":230},[220,65864,65865],{"class":222,"line":179},[220,65866,647],{"emptyLinePlaceholder":194},[220,65868,65869,65871,65873,65875,65877,65879],{"class":222,"line":389},[220,65870,1735],{"class":260},[220,65872,1738],{"class":420},[220,65874,1741],{"class":260},[220,65876,1744],{"class":260},[220,65878,1747],{"class":226},[220,65880,1750],{"class":264},[220,65882,65883],{"class":222,"line":399},[220,65884,1765],{"class":264},[220,65886,65887,65889,65892,65894,65896],{"class":222,"line":644},[220,65888,1770],{"class":264},[220,65890,65891],{"class":230},"'Posterize'",[220,65893,32063],{"class":264},[220,65895,21950],{"class":420},[220,65897,7397],{"class":264},[220,65899,65900,65902,65904],{"class":222,"line":650},[220,65901,6865],{"class":264},[220,65903,6409],{"class":230},[220,65905,2465],{"class":264},[220,65907,65908],{"class":222,"line":656},[220,65909,6882],{"class":264},[220,65911,65912],{"class":222,"line":673},[220,65913,1787],{"class":264},[220,65915,65916],{"class":222,"line":682},[220,65917,1792],{"class":264},[1504,65919,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65921},[65922,65923],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":65598,"description":65606},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":65930,"title":65931,"body":65932,"category":32923,"componentType":25734,"description":65939,"extension":191,"meta":66182,"navigation":194,"path":66183,"requiresChild":32390,"seo":66184,"stem":66185,"__hash__":66186},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":65933,"toc":66178},[65934,65937,65940,65942,65944,65947,65949,66176],[11,65935,65931],{"id":65936},"prism",[15,65938,65939],{},"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.",[31771,65941],{"component":65931},[23,65943,31775],{"id":26391},[31777,65945],{":props":65946},"[{\"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,65948,31783],{"id":31782},[246,65950,65951,65992,66036,66076,66118],{":tabs":1557},[212,65952,65954],{"className":334,"code":65953,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,65955,65956,65964,65971,65980,65984],{"__ignoreMap":178},[220,65957,65958,65960,65962],{"class":222,"line":223},[220,65959,343],{"class":264},[220,65961,347],{"class":346},[220,65963,359],{"class":264},[220,65965,65966,65968],{"class":222,"line":179},[220,65967,364],{"class":264},[220,65969,65970],{"class":346},"Prism\n",[220,65972,65973,65975,65977],{"class":222,"line":389},[220,65974,20228],{"class":226},[220,65976,353],{"class":264},[220,65978,65979],{"class":230},"\"1.6\"\n",[220,65981,65982],{"class":222,"line":399},[220,65983,1234],{"class":264},[220,65985,65986,65988,65990],{"class":222,"line":644},[220,65987,402],{"class":264},[220,65989,347],{"class":346},[220,65991,359],{"class":264},[212,65993,65995],{"className":409,"code":65994,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,65996,65997,66005,66011,66024,66028],{"__ignoreMap":178},[220,65998,65999,66001,66003],{"class":222,"line":223},[220,66000,343],{"class":264},[220,66002,347],{"class":420},[220,66004,359],{"class":264},[220,66006,66007,66009],{"class":222,"line":179},[220,66008,364],{"class":264},[220,66010,65970],{"class":420},[220,66012,66013,66015,66017,66019,66022],{"class":222,"line":389},[220,66014,20339],{"class":226},[220,66016,353],{"class":260},[220,66018,743],{"class":264},[220,66020,66021],{"class":420},"1.6",[220,66023,749],{"class":264},[220,66025,66026],{"class":222,"line":399},[220,66027,1234],{"class":264},[220,66029,66030,66032,66034],{"class":222,"line":644},[220,66031,402],{"class":264},[220,66033,347],{"class":420},[220,66035,359],{"class":264},[212,66037,66038],{"className":2844,"code":65994,"language":2846,"meta":178,"style":178},[99,66039,66040,66048,66054,66064,66068],{"__ignoreMap":178},[220,66041,66042,66044,66046],{"class":222,"line":223},[220,66043,343],{"class":264},[220,66045,347],{"class":420},[220,66047,359],{"class":264},[220,66049,66050,66052],{"class":222,"line":179},[220,66051,364],{"class":264},[220,66053,65970],{"class":420},[220,66055,66056,66058,66060,66062],{"class":222,"line":389},[220,66057,20339],{"class":226},[220,66059,29729],{"class":264},[220,66061,66021],{"class":420},[220,66063,749],{"class":264},[220,66065,66066],{"class":222,"line":399},[220,66067,1234],{"class":264},[220,66069,66070,66072,66074],{"class":222,"line":644},[220,66071,402],{"class":264},[220,66073,347],{"class":420},[220,66075,359],{"class":264},[212,66077,66078],{"className":468,"code":65994,"language":469,"meta":178,"style":178},[99,66079,66080,66088,66094,66106,66110],{"__ignoreMap":178},[220,66081,66082,66084,66086],{"class":222,"line":223},[220,66083,343],{"class":264},[220,66085,347],{"class":420},[220,66087,359],{"class":264},[220,66089,66090,66092],{"class":222,"line":179},[220,66091,364],{"class":264},[220,66093,65970],{"class":420},[220,66095,66096,66098,66100,66102,66104],{"class":222,"line":389},[220,66097,20339],{"class":226},[220,66099,353],{"class":260},[220,66101,743],{"class":264},[220,66103,66021],{"class":420},[220,66105,749],{"class":264},[220,66107,66108],{"class":222,"line":399},[220,66109,1234],{"class":264},[220,66111,66112,66114,66116],{"class":222,"line":644},[220,66113,402],{"class":264},[220,66115,347],{"class":420},[220,66117,359],{"class":264},[212,66119,66121],{"className":251,"code":66120,"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,66122,66123,66133,66137,66151,66155,66168,66172],{"__ignoreMap":178},[220,66124,66125,66127,66129,66131],{"class":222,"line":223},[220,66126,261],{"class":260},[220,66128,11364],{"class":264},[220,66130,268],{"class":260},[220,66132,11369],{"class":230},[220,66134,66135],{"class":222,"line":179},[220,66136,647],{"emptyLinePlaceholder":194},[220,66138,66139,66141,66143,66145,66147,66149],{"class":222,"line":389},[220,66140,1735],{"class":260},[220,66142,1738],{"class":420},[220,66144,1741],{"class":260},[220,66146,1744],{"class":260},[220,66148,1747],{"class":226},[220,66150,1750],{"class":264},[220,66152,66153],{"class":222,"line":399},[220,66154,1765],{"class":264},[220,66156,66157,66159,66162,66164,66166],{"class":222,"line":644},[220,66158,1770],{"class":264},[220,66160,66161],{"class":230},"'Prism'",[220,66163,32063],{"class":264},[220,66165,66021],{"class":420},[220,66167,1782],{"class":264},[220,66169,66170],{"class":222,"line":650},[220,66171,1787],{"class":264},[220,66173,66174],{"class":222,"line":656},[220,66175,1792],{"class":264},[1504,66177,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66179},[66180,66181],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":65931,"description":65939},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":66188,"title":66189,"body":66190,"category":32094,"componentType":25740,"description":66197,"extension":191,"meta":66514,"navigation":194,"path":66515,"requiresChild":194,"seo":66516,"stem":66517,"__hash__":66518},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":66191,"toc":66510},[66192,66195,66198,66200,66202,66205,66207,66508],[11,66193,66189],{"id":66194},"progressiveblur",[15,66196,66197],{},"Blur that increases progressively in one direction",[31771,66199],{"component":66189},[23,66201,31775],{"id":26391},[31777,66203],{":props":66204},"[{\"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,66206,31783],{"id":31782},[246,66208,66209,66265,66324,66380,66438],{":tabs":1557},[212,66210,66212],{"className":334,"code":66211,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,66213,66214,66222,66229,66237,66241,66249,66257],{"__ignoreMap":178},[220,66215,66216,66218,66220],{"class":222,"line":223},[220,66217,343],{"class":264},[220,66219,347],{"class":346},[220,66221,359],{"class":264},[220,66223,66224,66226],{"class":222,"line":179},[220,66225,364],{"class":264},[220,66227,66228],{"class":346},"ProgressiveBlur\n",[220,66230,66231,66233,66235],{"class":222,"line":389},[220,66232,20228],{"class":226},[220,66234,353],{"class":264},[220,66236,34940],{"class":230},[220,66238,66239],{"class":222,"line":399},[220,66240,31819],{"class":264},[220,66242,66243,66245,66247],{"class":222,"line":644},[220,66244,2550],{"class":264},[220,66246,2553],{"class":346},[220,66248,386],{"class":264},[220,66250,66251,66253,66255],{"class":222,"line":650},[220,66252,2567],{"class":264},[220,66254,66189],{"class":346},[220,66256,359],{"class":264},[220,66258,66259,66261,66263],{"class":222,"line":656},[220,66260,402],{"class":264},[220,66262,347],{"class":346},[220,66264,359],{"class":264},[212,66266,66268],{"className":409,"code":66267,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,66269,66270,66278,66284,66296,66300,66308,66316],{"__ignoreMap":178},[220,66271,66272,66274,66276],{"class":222,"line":223},[220,66273,343],{"class":264},[220,66275,347],{"class":420},[220,66277,359],{"class":264},[220,66279,66280,66282],{"class":222,"line":179},[220,66281,364],{"class":264},[220,66283,66228],{"class":420},[220,66285,66286,66288,66290,66292,66294],{"class":222,"line":389},[220,66287,20339],{"class":226},[220,66289,353],{"class":260},[220,66291,743],{"class":264},[220,66293,34998],{"class":420},[220,66295,749],{"class":264},[220,66297,66298],{"class":222,"line":399},[220,66299,31819],{"class":264},[220,66301,66302,66304,66306],{"class":222,"line":644},[220,66303,2550],{"class":264},[220,66305,2553],{"class":420},[220,66307,386],{"class":264},[220,66309,66310,66312,66314],{"class":222,"line":650},[220,66311,2567],{"class":264},[220,66313,66189],{"class":420},[220,66315,359],{"class":264},[220,66317,66318,66320,66322],{"class":222,"line":656},[220,66319,402],{"class":264},[220,66321,347],{"class":420},[220,66323,359],{"class":264},[212,66325,66326],{"className":2844,"code":66267,"language":2846,"meta":178,"style":178},[99,66327,66328,66336,66342,66352,66356,66364,66372],{"__ignoreMap":178},[220,66329,66330,66332,66334],{"class":222,"line":223},[220,66331,343],{"class":264},[220,66333,347],{"class":420},[220,66335,359],{"class":264},[220,66337,66338,66340],{"class":222,"line":179},[220,66339,364],{"class":264},[220,66341,66228],{"class":420},[220,66343,66344,66346,66348,66350],{"class":222,"line":389},[220,66345,20339],{"class":226},[220,66347,29729],{"class":264},[220,66349,34998],{"class":420},[220,66351,749],{"class":264},[220,66353,66354],{"class":222,"line":399},[220,66355,31819],{"class":264},[220,66357,66358,66360,66362],{"class":222,"line":644},[220,66359,2550],{"class":264},[220,66361,2553],{"class":420},[220,66363,386],{"class":264},[220,66365,66366,66368,66370],{"class":222,"line":650},[220,66367,2567],{"class":264},[220,66369,66189],{"class":420},[220,66371,359],{"class":264},[220,66373,66374,66376,66378],{"class":222,"line":656},[220,66375,402],{"class":264},[220,66377,347],{"class":420},[220,66379,359],{"class":264},[212,66381,66382],{"className":468,"code":66267,"language":469,"meta":178,"style":178},[99,66383,66384,66392,66398,66410,66414,66422,66430],{"__ignoreMap":178},[220,66385,66386,66388,66390],{"class":222,"line":223},[220,66387,343],{"class":264},[220,66389,347],{"class":420},[220,66391,359],{"class":264},[220,66393,66394,66396],{"class":222,"line":179},[220,66395,364],{"class":264},[220,66397,66228],{"class":420},[220,66399,66400,66402,66404,66406,66408],{"class":222,"line":389},[220,66401,20339],{"class":226},[220,66403,353],{"class":260},[220,66405,743],{"class":264},[220,66407,34998],{"class":420},[220,66409,749],{"class":264},[220,66411,66412],{"class":222,"line":399},[220,66413,31819],{"class":264},[220,66415,66416,66418,66420],{"class":222,"line":644},[220,66417,2550],{"class":264},[220,66419,2553],{"class":420},[220,66421,386],{"class":264},[220,66423,66424,66426,66428],{"class":222,"line":650},[220,66425,2567],{"class":264},[220,66427,66189],{"class":420},[220,66429,359],{"class":264},[220,66431,66432,66434,66436],{"class":222,"line":656},[220,66433,402],{"class":264},[220,66435,347],{"class":420},[220,66437,359],{"class":264},[212,66439,66441],{"className":251,"code":66440,"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,66442,66443,66453,66457,66471,66475,66488,66496,66500,66504],{"__ignoreMap":178},[220,66444,66445,66447,66449,66451],{"class":222,"line":223},[220,66446,261],{"class":260},[220,66448,11364],{"class":264},[220,66450,268],{"class":260},[220,66452,11369],{"class":230},[220,66454,66455],{"class":222,"line":179},[220,66456,647],{"emptyLinePlaceholder":194},[220,66458,66459,66461,66463,66465,66467,66469],{"class":222,"line":389},[220,66460,1735],{"class":260},[220,66462,1738],{"class":420},[220,66464,1741],{"class":260},[220,66466,1744],{"class":260},[220,66468,1747],{"class":226},[220,66470,1750],{"class":264},[220,66472,66473],{"class":222,"line":399},[220,66474,1765],{"class":264},[220,66476,66477,66479,66482,66484,66486],{"class":222,"line":644},[220,66478,1770],{"class":264},[220,66480,66481],{"class":230},"'ProgressiveBlur'",[220,66483,32063],{"class":264},[220,66485,34998],{"class":420},[220,66487,7397],{"class":264},[220,66489,66490,66492,66494],{"class":222,"line":650},[220,66491,6865],{"class":264},[220,66493,6409],{"class":230},[220,66495,2465],{"class":264},[220,66497,66498],{"class":222,"line":656},[220,66499,6882],{"class":264},[220,66501,66502],{"class":222,"line":673},[220,66503,1787],{"class":264},[220,66505,66506],{"class":222,"line":682},[220,66507,1792],{"class":264},[1504,66509,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66511},[66512,66513],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":66189,"description":66197},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":66520,"title":66521,"body":66522,"category":32923,"componentType":25734,"description":66529,"extension":191,"meta":66770,"navigation":194,"path":66771,"requiresChild":32390,"seo":66772,"stem":66773,"__hash__":66774},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":66523,"toc":66766},[66524,66527,66530,66532,66534,66537,66539,66764],[11,66525,66521],{"id":66526},"radialgradient",[15,66528,66529],{},"Radial gradient radiating from a center point",[31771,66531],{"component":66521},[23,66533,31775],{"id":26391},[31777,66535],{":props":66536},"[{\"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,66538,31783],{"id":31782},[246,66540,66541,66581,66624,66664,66706],{":tabs":1557},[212,66542,66544],{"className":334,"code":66543,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,66545,66546,66554,66561,66569,66573],{"__ignoreMap":178},[220,66547,66548,66550,66552],{"class":222,"line":223},[220,66549,343],{"class":264},[220,66551,347],{"class":346},[220,66553,359],{"class":264},[220,66555,66556,66558],{"class":222,"line":179},[220,66557,364],{"class":264},[220,66559,66560],{"class":346},"RadialGradient\n",[220,66562,66563,66565,66567],{"class":222,"line":389},[220,66564,17262],{"class":226},[220,66566,353],{"class":264},[220,66568,36485],{"class":230},[220,66570,66571],{"class":222,"line":399},[220,66572,1234],{"class":264},[220,66574,66575,66577,66579],{"class":222,"line":644},[220,66576,402],{"class":264},[220,66578,347],{"class":346},[220,66580,359],{"class":264},[212,66582,66584],{"className":409,"code":66583,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,66585,66586,66594,66600,66612,66616],{"__ignoreMap":178},[220,66587,66588,66590,66592],{"class":222,"line":223},[220,66589,343],{"class":264},[220,66591,347],{"class":420},[220,66593,359],{"class":264},[220,66595,66596,66598],{"class":222,"line":179},[220,66597,364],{"class":264},[220,66599,66560],{"class":420},[220,66601,66602,66604,66606,66608,66610],{"class":222,"line":389},[220,66603,9497],{"class":226},[220,66605,353],{"class":260},[220,66607,743],{"class":264},[220,66609,8528],{"class":420},[220,66611,749],{"class":264},[220,66613,66614],{"class":222,"line":399},[220,66615,1234],{"class":264},[220,66617,66618,66620,66622],{"class":222,"line":644},[220,66619,402],{"class":264},[220,66621,347],{"class":420},[220,66623,359],{"class":264},[212,66625,66626],{"className":2844,"code":66583,"language":2846,"meta":178,"style":178},[99,66627,66628,66636,66642,66652,66656],{"__ignoreMap":178},[220,66629,66630,66632,66634],{"class":222,"line":223},[220,66631,343],{"class":264},[220,66633,347],{"class":420},[220,66635,359],{"class":264},[220,66637,66638,66640],{"class":222,"line":179},[220,66639,364],{"class":264},[220,66641,66560],{"class":420},[220,66643,66644,66646,66648,66650],{"class":222,"line":389},[220,66645,9497],{"class":226},[220,66647,29729],{"class":264},[220,66649,8528],{"class":420},[220,66651,749],{"class":264},[220,66653,66654],{"class":222,"line":399},[220,66655,1234],{"class":264},[220,66657,66658,66660,66662],{"class":222,"line":644},[220,66659,402],{"class":264},[220,66661,347],{"class":420},[220,66663,359],{"class":264},[212,66665,66666],{"className":468,"code":66583,"language":469,"meta":178,"style":178},[99,66667,66668,66676,66682,66694,66698],{"__ignoreMap":178},[220,66669,66670,66672,66674],{"class":222,"line":223},[220,66671,343],{"class":264},[220,66673,347],{"class":420},[220,66675,359],{"class":264},[220,66677,66678,66680],{"class":222,"line":179},[220,66679,364],{"class":264},[220,66681,66560],{"class":420},[220,66683,66684,66686,66688,66690,66692],{"class":222,"line":389},[220,66685,9497],{"class":226},[220,66687,353],{"class":260},[220,66689,743],{"class":264},[220,66691,8528],{"class":420},[220,66693,749],{"class":264},[220,66695,66696],{"class":222,"line":399},[220,66697,1234],{"class":264},[220,66699,66700,66702,66704],{"class":222,"line":644},[220,66701,402],{"class":264},[220,66703,347],{"class":420},[220,66705,359],{"class":264},[212,66707,66709],{"className":251,"code":66708,"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,66710,66711,66721,66725,66739,66743,66756,66760],{"__ignoreMap":178},[220,66712,66713,66715,66717,66719],{"class":222,"line":223},[220,66714,261],{"class":260},[220,66716,11364],{"class":264},[220,66718,268],{"class":260},[220,66720,11369],{"class":230},[220,66722,66723],{"class":222,"line":179},[220,66724,647],{"emptyLinePlaceholder":194},[220,66726,66727,66729,66731,66733,66735,66737],{"class":222,"line":389},[220,66728,1735],{"class":260},[220,66730,1738],{"class":420},[220,66732,1741],{"class":260},[220,66734,1744],{"class":260},[220,66736,1747],{"class":226},[220,66738,1750],{"class":264},[220,66740,66741],{"class":222,"line":399},[220,66742,1765],{"class":264},[220,66744,66745,66747,66750,66752,66754],{"class":222,"line":644},[220,66746,1770],{"class":264},[220,66748,66749],{"class":230},"'RadialGradient'",[220,66751,7392],{"class":264},[220,66753,8528],{"class":420},[220,66755,1782],{"class":264},[220,66757,66758],{"class":222,"line":650},[220,66759,1787],{"class":264},[220,66761,66762],{"class":222,"line":656},[220,66763,1792],{"class":264},[1504,66765,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":66767},[66768,66769],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":66521,"description":66529},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":66776,"title":66777,"body":66778,"category":33533,"componentType":25740,"description":66785,"extension":191,"meta":67046,"navigation":194,"path":67047,"requiresChild":194,"seo":67048,"stem":67049,"__hash__":67050},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":66779,"toc":67042},[66780,66783,66786,66788,66790,66793,66795,67040],[11,66781,66777],{"id":66782},"radialwipe",[15,66784,66785],{},"Sweep the content away in a clock-hand arc around a center point",[31771,66787],{"component":66777},[23,66789,31775],{"id":26391},[31777,66791],{":props":66792},"[{\"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,66794,31783],{"id":31782},[246,66796,66797,66842,66886,66930,66974],{":tabs":1557},[212,66798,66800],{"className":334,"code":66799,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,66801,66802,66810,66818,66826,66834],{"__ignoreMap":178},[220,66803,66804,66806,66808],{"class":222,"line":223},[220,66805,343],{"class":264},[220,66807,347],{"class":346},[220,66809,359],{"class":264},[220,66811,66812,66814,66816],{"class":222,"line":179},[220,66813,364],{"class":264},[220,66815,66777],{"class":346},[220,66817,359],{"class":264},[220,66819,66820,66822,66824],{"class":222,"line":389},[220,66821,2550],{"class":264},[220,66823,2553],{"class":346},[220,66825,386],{"class":264},[220,66827,66828,66830,66832],{"class":222,"line":399},[220,66829,2567],{"class":264},[220,66831,66777],{"class":346},[220,66833,359],{"class":264},[220,66835,66836,66838,66840],{"class":222,"line":644},[220,66837,402],{"class":264},[220,66839,347],{"class":346},[220,66841,359],{"class":264},[212,66843,66844],{"className":409,"code":66799,"language":411,"meta":178,"style":178},[99,66845,66846,66854,66862,66870,66878],{"__ignoreMap":178},[220,66847,66848,66850,66852],{"class":222,"line":223},[220,66849,343],{"class":264},[220,66851,347],{"class":420},[220,66853,359],{"class":264},[220,66855,66856,66858,66860],{"class":222,"line":179},[220,66857,364],{"class":264},[220,66859,66777],{"class":420},[220,66861,359],{"class":264},[220,66863,66864,66866,66868],{"class":222,"line":389},[220,66865,2550],{"class":264},[220,66867,2553],{"class":420},[220,66869,386],{"class":264},[220,66871,66872,66874,66876],{"class":222,"line":399},[220,66873,2567],{"class":264},[220,66875,66777],{"class":420},[220,66877,359],{"class":264},[220,66879,66880,66882,66884],{"class":222,"line":644},[220,66881,402],{"class":264},[220,66883,347],{"class":420},[220,66885,359],{"class":264},[212,66887,66888],{"className":2844,"code":66799,"language":2846,"meta":178,"style":178},[99,66889,66890,66898,66906,66914,66922],{"__ignoreMap":178},[220,66891,66892,66894,66896],{"class":222,"line":223},[220,66893,343],{"class":264},[220,66895,347],{"class":420},[220,66897,359],{"class":264},[220,66899,66900,66902,66904],{"class":222,"line":179},[220,66901,364],{"class":264},[220,66903,66777],{"class":420},[220,66905,359],{"class":264},[220,66907,66908,66910,66912],{"class":222,"line":389},[220,66909,2550],{"class":264},[220,66911,2553],{"class":420},[220,66913,386],{"class":264},[220,66915,66916,66918,66920],{"class":222,"line":399},[220,66917,2567],{"class":264},[220,66919,66777],{"class":420},[220,66921,359],{"class":264},[220,66923,66924,66926,66928],{"class":222,"line":644},[220,66925,402],{"class":264},[220,66927,347],{"class":420},[220,66929,359],{"class":264},[212,66931,66932],{"className":468,"code":66799,"language":469,"meta":178,"style":178},[99,66933,66934,66942,66950,66958,66966],{"__ignoreMap":178},[220,66935,66936,66938,66940],{"class":222,"line":223},[220,66937,343],{"class":264},[220,66939,347],{"class":420},[220,66941,359],{"class":264},[220,66943,66944,66946,66948],{"class":222,"line":179},[220,66945,364],{"class":264},[220,66947,66777],{"class":420},[220,66949,359],{"class":264},[220,66951,66952,66954,66956],{"class":222,"line":389},[220,66953,2550],{"class":264},[220,66955,2553],{"class":420},[220,66957,386],{"class":264},[220,66959,66960,66962,66964],{"class":222,"line":399},[220,66961,2567],{"class":264},[220,66963,66777],{"class":420},[220,66965,359],{"class":264},[220,66967,66968,66970,66972],{"class":222,"line":644},[220,66969,402],{"class":264},[220,66971,347],{"class":420},[220,66973,359],{"class":264},[212,66975,66977],{"className":251,"code":66976,"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,66978,66979,66989,66993,67007,67011,67020,67028,67032,67036],{"__ignoreMap":178},[220,66980,66981,66983,66985,66987],{"class":222,"line":223},[220,66982,261],{"class":260},[220,66984,11364],{"class":264},[220,66986,268],{"class":260},[220,66988,11369],{"class":230},[220,66990,66991],{"class":222,"line":179},[220,66992,647],{"emptyLinePlaceholder":194},[220,66994,66995,66997,66999,67001,67003,67005],{"class":222,"line":389},[220,66996,1735],{"class":260},[220,66998,1738],{"class":420},[220,67000,1741],{"class":260},[220,67002,1744],{"class":260},[220,67004,1747],{"class":226},[220,67006,1750],{"class":264},[220,67008,67009],{"class":222,"line":399},[220,67010,1765],{"class":264},[220,67012,67013,67015,67018],{"class":222,"line":644},[220,67014,1770],{"class":264},[220,67016,67017],{"class":230},"'RadialWipe'",[220,67019,6860],{"class":264},[220,67021,67022,67024,67026],{"class":222,"line":650},[220,67023,6865],{"class":264},[220,67025,6409],{"class":230},[220,67027,2465],{"class":264},[220,67029,67030],{"class":222,"line":656},[220,67031,6882],{"class":264},[220,67033,67034],{"class":222,"line":673},[220,67035,1787],{"class":264},[220,67037,67038],{"class":222,"line":682},[220,67039,1792],{"class":264},[1504,67041,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":67043},[67044,67045],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":66777,"description":66785},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":67052,"title":67053,"body":67054,"category":33533,"componentType":25740,"description":67061,"extension":191,"meta":67322,"navigation":194,"path":67323,"requiresChild":194,"seo":67324,"stem":67325,"__hash__":67326},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":67055,"toc":67318},[67056,67059,67062,67064,67066,67069,67071,67316],[11,67057,67053],{"id":67058},"randombars",[15,67060,67061],{},"Wipe the content away as parallel bars vanishing in random order",[31771,67063],{"component":67053},[23,67065,31775],{"id":26391},[31777,67067],{":props":67068},"[{\"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,67070,31783],{"id":31782},[246,67072,67073,67118,67162,67206,67250],{":tabs":1557},[212,67074,67076],{"className":334,"code":67075,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,67077,67078,67086,67094,67102,67110],{"__ignoreMap":178},[220,67079,67080,67082,67084],{"class":222,"line":223},[220,67081,343],{"class":264},[220,67083,347],{"class":346},[220,67085,359],{"class":264},[220,67087,67088,67090,67092],{"class":222,"line":179},[220,67089,364],{"class":264},[220,67091,67053],{"class":346},[220,67093,359],{"class":264},[220,67095,67096,67098,67100],{"class":222,"line":389},[220,67097,2550],{"class":264},[220,67099,2553],{"class":346},[220,67101,386],{"class":264},[220,67103,67104,67106,67108],{"class":222,"line":399},[220,67105,2567],{"class":264},[220,67107,67053],{"class":346},[220,67109,359],{"class":264},[220,67111,67112,67114,67116],{"class":222,"line":644},[220,67113,402],{"class":264},[220,67115,347],{"class":346},[220,67117,359],{"class":264},[212,67119,67120],{"className":409,"code":67075,"language":411,"meta":178,"style":178},[99,67121,67122,67130,67138,67146,67154],{"__ignoreMap":178},[220,67123,67124,67126,67128],{"class":222,"line":223},[220,67125,343],{"class":264},[220,67127,347],{"class":420},[220,67129,359],{"class":264},[220,67131,67132,67134,67136],{"class":222,"line":179},[220,67133,364],{"class":264},[220,67135,67053],{"class":420},[220,67137,359],{"class":264},[220,67139,67140,67142,67144],{"class":222,"line":389},[220,67141,2550],{"class":264},[220,67143,2553],{"class":420},[220,67145,386],{"class":264},[220,67147,67148,67150,67152],{"class":222,"line":399},[220,67149,2567],{"class":264},[220,67151,67053],{"class":420},[220,67153,359],{"class":264},[220,67155,67156,67158,67160],{"class":222,"line":644},[220,67157,402],{"class":264},[220,67159,347],{"class":420},[220,67161,359],{"class":264},[212,67163,67164],{"className":2844,"code":67075,"language":2846,"meta":178,"style":178},[99,67165,67166,67174,67182,67190,67198],{"__ignoreMap":178},[220,67167,67168,67170,67172],{"class":222,"line":223},[220,67169,343],{"class":264},[220,67171,347],{"class":420},[220,67173,359],{"class":264},[220,67175,67176,67178,67180],{"class":222,"line":179},[220,67177,364],{"class":264},[220,67179,67053],{"class":420},[220,67181,359],{"class":264},[220,67183,67184,67186,67188],{"class":222,"line":389},[220,67185,2550],{"class":264},[220,67187,2553],{"class":420},[220,67189,386],{"class":264},[220,67191,67192,67194,67196],{"class":222,"line":399},[220,67193,2567],{"class":264},[220,67195,67053],{"class":420},[220,67197,359],{"class":264},[220,67199,67200,67202,67204],{"class":222,"line":644},[220,67201,402],{"class":264},[220,67203,347],{"class":420},[220,67205,359],{"class":264},[212,67207,67208],{"className":468,"code":67075,"language":469,"meta":178,"style":178},[99,67209,67210,67218,67226,67234,67242],{"__ignoreMap":178},[220,67211,67212,67214,67216],{"class":222,"line":223},[220,67213,343],{"class":264},[220,67215,347],{"class":420},[220,67217,359],{"class":264},[220,67219,67220,67222,67224],{"class":222,"line":179},[220,67221,364],{"class":264},[220,67223,67053],{"class":420},[220,67225,359],{"class":264},[220,67227,67228,67230,67232],{"class":222,"line":389},[220,67229,2550],{"class":264},[220,67231,2553],{"class":420},[220,67233,386],{"class":264},[220,67235,67236,67238,67240],{"class":222,"line":399},[220,67237,2567],{"class":264},[220,67239,67053],{"class":420},[220,67241,359],{"class":264},[220,67243,67244,67246,67248],{"class":222,"line":644},[220,67245,402],{"class":264},[220,67247,347],{"class":420},[220,67249,359],{"class":264},[212,67251,67253],{"className":251,"code":67252,"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,67254,67255,67265,67269,67283,67287,67296,67304,67308,67312],{"__ignoreMap":178},[220,67256,67257,67259,67261,67263],{"class":222,"line":223},[220,67258,261],{"class":260},[220,67260,11364],{"class":264},[220,67262,268],{"class":260},[220,67264,11369],{"class":230},[220,67266,67267],{"class":222,"line":179},[220,67268,647],{"emptyLinePlaceholder":194},[220,67270,67271,67273,67275,67277,67279,67281],{"class":222,"line":389},[220,67272,1735],{"class":260},[220,67274,1738],{"class":420},[220,67276,1741],{"class":260},[220,67278,1744],{"class":260},[220,67280,1747],{"class":226},[220,67282,1750],{"class":264},[220,67284,67285],{"class":222,"line":399},[220,67286,1765],{"class":264},[220,67288,67289,67291,67294],{"class":222,"line":644},[220,67290,1770],{"class":264},[220,67292,67293],{"class":230},"'RandomBars'",[220,67295,6860],{"class":264},[220,67297,67298,67300,67302],{"class":222,"line":650},[220,67299,6865],{"class":264},[220,67301,6409],{"class":230},[220,67303,2465],{"class":264},[220,67305,67306],{"class":222,"line":656},[220,67307,6882],{"class":264},[220,67309,67310],{"class":222,"line":673},[220,67311,1787],{"class":264},[220,67313,67314],{"class":222,"line":682},[220,67315,1792],{"class":264},[1504,67317,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":67319},[67320,67321],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":67053,"description":67061},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":67328,"title":67329,"body":67330,"category":35419,"componentType":25734,"description":67337,"extension":191,"meta":67522,"navigation":194,"path":67523,"requiresChild":32390,"seo":67524,"stem":67525,"__hash__":67526},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":67331,"toc":67518},[67332,67335,67338,67340,67342,67345,67347,67516],[11,67333,67329],{"id":67334},"reactiondiffusion",[15,67336,67337],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31771,67339],{"component":67329},[23,67341,31775],{"id":26391},[31777,67343],{":props":67344},"[{\"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,67346,31783],{"id":31782},[246,67348,67349,67378,67406,67434,67462],{":tabs":1557},[212,67350,67352],{"className":334,"code":67351,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,67353,67354,67362,67370],{"__ignoreMap":178},[220,67355,67356,67358,67360],{"class":222,"line":223},[220,67357,343],{"class":264},[220,67359,347],{"class":346},[220,67361,359],{"class":264},[220,67363,67364,67366,67368],{"class":222,"line":179},[220,67365,364],{"class":264},[220,67367,67329],{"class":346},[220,67369,386],{"class":264},[220,67371,67372,67374,67376],{"class":222,"line":389},[220,67373,402],{"class":264},[220,67375,347],{"class":346},[220,67377,359],{"class":264},[212,67379,67380],{"className":409,"code":67351,"language":411,"meta":178,"style":178},[99,67381,67382,67390,67398],{"__ignoreMap":178},[220,67383,67384,67386,67388],{"class":222,"line":223},[220,67385,343],{"class":264},[220,67387,347],{"class":420},[220,67389,359],{"class":264},[220,67391,67392,67394,67396],{"class":222,"line":179},[220,67393,364],{"class":264},[220,67395,67329],{"class":420},[220,67397,386],{"class":264},[220,67399,67400,67402,67404],{"class":222,"line":389},[220,67401,402],{"class":264},[220,67403,347],{"class":420},[220,67405,359],{"class":264},[212,67407,67408],{"className":2844,"code":67351,"language":2846,"meta":178,"style":178},[99,67409,67410,67418,67426],{"__ignoreMap":178},[220,67411,67412,67414,67416],{"class":222,"line":223},[220,67413,343],{"class":264},[220,67415,347],{"class":420},[220,67417,359],{"class":264},[220,67419,67420,67422,67424],{"class":222,"line":179},[220,67421,364],{"class":264},[220,67423,67329],{"class":420},[220,67425,386],{"class":264},[220,67427,67428,67430,67432],{"class":222,"line":389},[220,67429,402],{"class":264},[220,67431,347],{"class":420},[220,67433,359],{"class":264},[212,67435,67436],{"className":468,"code":67351,"language":469,"meta":178,"style":178},[99,67437,67438,67446,67454],{"__ignoreMap":178},[220,67439,67440,67442,67444],{"class":222,"line":223},[220,67441,343],{"class":264},[220,67443,347],{"class":420},[220,67445,359],{"class":264},[220,67447,67448,67450,67452],{"class":222,"line":179},[220,67449,364],{"class":264},[220,67451,67329],{"class":420},[220,67453,386],{"class":264},[220,67455,67456,67458,67460],{"class":222,"line":389},[220,67457,402],{"class":264},[220,67459,347],{"class":420},[220,67461,359],{"class":264},[212,67463,67465],{"className":251,"code":67464,"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,67466,67467,67477,67481,67495,67499,67508,67512],{"__ignoreMap":178},[220,67468,67469,67471,67473,67475],{"class":222,"line":223},[220,67470,261],{"class":260},[220,67472,11364],{"class":264},[220,67474,268],{"class":260},[220,67476,11369],{"class":230},[220,67478,67479],{"class":222,"line":179},[220,67480,647],{"emptyLinePlaceholder":194},[220,67482,67483,67485,67487,67489,67491,67493],{"class":222,"line":389},[220,67484,1735],{"class":260},[220,67486,1738],{"class":420},[220,67488,1741],{"class":260},[220,67490,1744],{"class":260},[220,67492,1747],{"class":226},[220,67494,1750],{"class":264},[220,67496,67497],{"class":222,"line":399},[220,67498,1765],{"class":264},[220,67500,67501,67503,67506],{"class":222,"line":644},[220,67502,1770],{"class":264},[220,67504,67505],{"class":230},"'ReactionDiffusion'",[220,67507,2465],{"class":264},[220,67509,67510],{"class":222,"line":650},[220,67511,1787],{"class":264},[220,67513,67514],{"class":222,"line":656},[220,67515,1792],{"class":264},[1504,67517,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":67519},[67520,67521],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":67329,"description":67337},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":67528,"title":67529,"body":67530,"category":33256,"componentType":25740,"description":67537,"extension":191,"meta":67854,"navigation":194,"path":67855,"requiresChild":194,"seo":67856,"stem":67857,"__hash__":67858},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":67531,"toc":67850},[67532,67535,67538,67540,67542,67545,67547,67848],[11,67533,67529],{"id":67534},"rectangularcoordinates",[15,67536,67537],{},"Convert polar coordinates back to rectangular space",[31771,67539],{"component":67529},[23,67541,31775],{"id":26391},[31777,67543],{":props":67544},"[{\"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,67546,31783],{"id":31782},[246,67548,67549,67605,67664,67720,67778],{":tabs":1557},[212,67550,67552],{"className":334,"code":67551,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67553,67554,67562,67569,67577,67581,67589,67597],{"__ignoreMap":178},[220,67555,67556,67558,67560],{"class":222,"line":223},[220,67557,343],{"class":264},[220,67559,347],{"class":346},[220,67561,359],{"class":264},[220,67563,67564,67566],{"class":222,"line":179},[220,67565,364],{"class":264},[220,67567,67568],{"class":346},"RectangularCoordinates\n",[220,67570,67571,67573,67575],{"class":222,"line":389},[220,67572,20228],{"class":226},[220,67574,353],{"class":264},[220,67576,36485],{"class":230},[220,67578,67579],{"class":222,"line":399},[220,67580,31819],{"class":264},[220,67582,67583,67585,67587],{"class":222,"line":644},[220,67584,2550],{"class":264},[220,67586,2553],{"class":346},[220,67588,386],{"class":264},[220,67590,67591,67593,67595],{"class":222,"line":650},[220,67592,2567],{"class":264},[220,67594,67529],{"class":346},[220,67596,359],{"class":264},[220,67598,67599,67601,67603],{"class":222,"line":656},[220,67600,402],{"class":264},[220,67602,347],{"class":346},[220,67604,359],{"class":264},[212,67606,67608],{"className":409,"code":67607,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,67609,67610,67618,67624,67636,67640,67648,67656],{"__ignoreMap":178},[220,67611,67612,67614,67616],{"class":222,"line":223},[220,67613,343],{"class":264},[220,67615,347],{"class":420},[220,67617,359],{"class":264},[220,67619,67620,67622],{"class":222,"line":179},[220,67621,364],{"class":264},[220,67623,67568],{"class":420},[220,67625,67626,67628,67630,67632,67634],{"class":222,"line":389},[220,67627,20339],{"class":226},[220,67629,353],{"class":260},[220,67631,743],{"class":264},[220,67633,8528],{"class":420},[220,67635,749],{"class":264},[220,67637,67638],{"class":222,"line":399},[220,67639,31819],{"class":264},[220,67641,67642,67644,67646],{"class":222,"line":644},[220,67643,2550],{"class":264},[220,67645,2553],{"class":420},[220,67647,386],{"class":264},[220,67649,67650,67652,67654],{"class":222,"line":650},[220,67651,2567],{"class":264},[220,67653,67529],{"class":420},[220,67655,359],{"class":264},[220,67657,67658,67660,67662],{"class":222,"line":656},[220,67659,402],{"class":264},[220,67661,347],{"class":420},[220,67663,359],{"class":264},[212,67665,67666],{"className":2844,"code":67607,"language":2846,"meta":178,"style":178},[99,67667,67668,67676,67682,67692,67696,67704,67712],{"__ignoreMap":178},[220,67669,67670,67672,67674],{"class":222,"line":223},[220,67671,343],{"class":264},[220,67673,347],{"class":420},[220,67675,359],{"class":264},[220,67677,67678,67680],{"class":222,"line":179},[220,67679,364],{"class":264},[220,67681,67568],{"class":420},[220,67683,67684,67686,67688,67690],{"class":222,"line":389},[220,67685,20339],{"class":226},[220,67687,29729],{"class":264},[220,67689,8528],{"class":420},[220,67691,749],{"class":264},[220,67693,67694],{"class":222,"line":399},[220,67695,31819],{"class":264},[220,67697,67698,67700,67702],{"class":222,"line":644},[220,67699,2550],{"class":264},[220,67701,2553],{"class":420},[220,67703,386],{"class":264},[220,67705,67706,67708,67710],{"class":222,"line":650},[220,67707,2567],{"class":264},[220,67709,67529],{"class":420},[220,67711,359],{"class":264},[220,67713,67714,67716,67718],{"class":222,"line":656},[220,67715,402],{"class":264},[220,67717,347],{"class":420},[220,67719,359],{"class":264},[212,67721,67722],{"className":468,"code":67607,"language":469,"meta":178,"style":178},[99,67723,67724,67732,67738,67750,67754,67762,67770],{"__ignoreMap":178},[220,67725,67726,67728,67730],{"class":222,"line":223},[220,67727,343],{"class":264},[220,67729,347],{"class":420},[220,67731,359],{"class":264},[220,67733,67734,67736],{"class":222,"line":179},[220,67735,364],{"class":264},[220,67737,67568],{"class":420},[220,67739,67740,67742,67744,67746,67748],{"class":222,"line":389},[220,67741,20339],{"class":226},[220,67743,353],{"class":260},[220,67745,743],{"class":264},[220,67747,8528],{"class":420},[220,67749,749],{"class":264},[220,67751,67752],{"class":222,"line":399},[220,67753,31819],{"class":264},[220,67755,67756,67758,67760],{"class":222,"line":644},[220,67757,2550],{"class":264},[220,67759,2553],{"class":420},[220,67761,386],{"class":264},[220,67763,67764,67766,67768],{"class":222,"line":650},[220,67765,2567],{"class":264},[220,67767,67529],{"class":420},[220,67769,359],{"class":264},[220,67771,67772,67774,67776],{"class":222,"line":656},[220,67773,402],{"class":264},[220,67775,347],{"class":420},[220,67777,359],{"class":264},[212,67779,67781],{"className":251,"code":67780,"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,67782,67783,67793,67797,67811,67815,67828,67836,67840,67844],{"__ignoreMap":178},[220,67784,67785,67787,67789,67791],{"class":222,"line":223},[220,67786,261],{"class":260},[220,67788,11364],{"class":264},[220,67790,268],{"class":260},[220,67792,11369],{"class":230},[220,67794,67795],{"class":222,"line":179},[220,67796,647],{"emptyLinePlaceholder":194},[220,67798,67799,67801,67803,67805,67807,67809],{"class":222,"line":389},[220,67800,1735],{"class":260},[220,67802,1738],{"class":420},[220,67804,1741],{"class":260},[220,67806,1744],{"class":260},[220,67808,1747],{"class":226},[220,67810,1750],{"class":264},[220,67812,67813],{"class":222,"line":399},[220,67814,1765],{"class":264},[220,67816,67817,67819,67822,67824,67826],{"class":222,"line":644},[220,67818,1770],{"class":264},[220,67820,67821],{"class":230},"'RectangularCoordinates'",[220,67823,32063],{"class":264},[220,67825,8528],{"class":420},[220,67827,7397],{"class":264},[220,67829,67830,67832,67834],{"class":222,"line":650},[220,67831,6865],{"class":264},[220,67833,6409],{"class":230},[220,67835,2465],{"class":264},[220,67837,67838],{"class":222,"line":656},[220,67839,6882],{"class":264},[220,67841,67842],{"class":222,"line":673},[220,67843,1787],{"class":264},[220,67845,67846],{"class":222,"line":682},[220,67847,1792],{"class":264},[1504,67849,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67851},[67852,67853],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":67529,"description":67537},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":67860,"title":67861,"body":67862,"category":32666,"componentType":25740,"description":67869,"extension":191,"meta":68130,"navigation":194,"path":68131,"requiresChild":194,"seo":68132,"stem":68133,"__hash__":68134},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":67863,"toc":68126},[67864,67867,67870,67872,67874,67877,67879,68124],[11,67865,67861],{"id":67866},"reflectiveplane",[15,67868,67869],{},"Reflective floor that mirrors the content above it",[31771,67871],{"component":67861},[23,67873,31775],{"id":26391},[31777,67875],{":props":67876},"[{\"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,67878,31783],{"id":31782},[246,67880,67881,67926,67970,68014,68058],{":tabs":1557},[212,67882,67884],{"className":334,"code":67883,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,67885,67886,67894,67902,67910,67918],{"__ignoreMap":178},[220,67887,67888,67890,67892],{"class":222,"line":223},[220,67889,343],{"class":264},[220,67891,347],{"class":346},[220,67893,359],{"class":264},[220,67895,67896,67898,67900],{"class":222,"line":179},[220,67897,364],{"class":264},[220,67899,67861],{"class":346},[220,67901,359],{"class":264},[220,67903,67904,67906,67908],{"class":222,"line":389},[220,67905,2550],{"class":264},[220,67907,2553],{"class":346},[220,67909,386],{"class":264},[220,67911,67912,67914,67916],{"class":222,"line":399},[220,67913,2567],{"class":264},[220,67915,67861],{"class":346},[220,67917,359],{"class":264},[220,67919,67920,67922,67924],{"class":222,"line":644},[220,67921,402],{"class":264},[220,67923,347],{"class":346},[220,67925,359],{"class":264},[212,67927,67928],{"className":409,"code":67883,"language":411,"meta":178,"style":178},[99,67929,67930,67938,67946,67954,67962],{"__ignoreMap":178},[220,67931,67932,67934,67936],{"class":222,"line":223},[220,67933,343],{"class":264},[220,67935,347],{"class":420},[220,67937,359],{"class":264},[220,67939,67940,67942,67944],{"class":222,"line":179},[220,67941,364],{"class":264},[220,67943,67861],{"class":420},[220,67945,359],{"class":264},[220,67947,67948,67950,67952],{"class":222,"line":389},[220,67949,2550],{"class":264},[220,67951,2553],{"class":420},[220,67953,386],{"class":264},[220,67955,67956,67958,67960],{"class":222,"line":399},[220,67957,2567],{"class":264},[220,67959,67861],{"class":420},[220,67961,359],{"class":264},[220,67963,67964,67966,67968],{"class":222,"line":644},[220,67965,402],{"class":264},[220,67967,347],{"class":420},[220,67969,359],{"class":264},[212,67971,67972],{"className":2844,"code":67883,"language":2846,"meta":178,"style":178},[99,67973,67974,67982,67990,67998,68006],{"__ignoreMap":178},[220,67975,67976,67978,67980],{"class":222,"line":223},[220,67977,343],{"class":264},[220,67979,347],{"class":420},[220,67981,359],{"class":264},[220,67983,67984,67986,67988],{"class":222,"line":179},[220,67985,364],{"class":264},[220,67987,67861],{"class":420},[220,67989,359],{"class":264},[220,67991,67992,67994,67996],{"class":222,"line":389},[220,67993,2550],{"class":264},[220,67995,2553],{"class":420},[220,67997,386],{"class":264},[220,67999,68000,68002,68004],{"class":222,"line":399},[220,68001,2567],{"class":264},[220,68003,67861],{"class":420},[220,68005,359],{"class":264},[220,68007,68008,68010,68012],{"class":222,"line":644},[220,68009,402],{"class":264},[220,68011,347],{"class":420},[220,68013,359],{"class":264},[212,68015,68016],{"className":468,"code":67883,"language":469,"meta":178,"style":178},[99,68017,68018,68026,68034,68042,68050],{"__ignoreMap":178},[220,68019,68020,68022,68024],{"class":222,"line":223},[220,68021,343],{"class":264},[220,68023,347],{"class":420},[220,68025,359],{"class":264},[220,68027,68028,68030,68032],{"class":222,"line":179},[220,68029,364],{"class":264},[220,68031,67861],{"class":420},[220,68033,359],{"class":264},[220,68035,68036,68038,68040],{"class":222,"line":389},[220,68037,2550],{"class":264},[220,68039,2553],{"class":420},[220,68041,386],{"class":264},[220,68043,68044,68046,68048],{"class":222,"line":399},[220,68045,2567],{"class":264},[220,68047,67861],{"class":420},[220,68049,359],{"class":264},[220,68051,68052,68054,68056],{"class":222,"line":644},[220,68053,402],{"class":264},[220,68055,347],{"class":420},[220,68057,359],{"class":264},[212,68059,68061],{"className":251,"code":68060,"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,68062,68063,68073,68077,68091,68095,68104,68112,68116,68120],{"__ignoreMap":178},[220,68064,68065,68067,68069,68071],{"class":222,"line":223},[220,68066,261],{"class":260},[220,68068,11364],{"class":264},[220,68070,268],{"class":260},[220,68072,11369],{"class":230},[220,68074,68075],{"class":222,"line":179},[220,68076,647],{"emptyLinePlaceholder":194},[220,68078,68079,68081,68083,68085,68087,68089],{"class":222,"line":389},[220,68080,1735],{"class":260},[220,68082,1738],{"class":420},[220,68084,1741],{"class":260},[220,68086,1744],{"class":260},[220,68088,1747],{"class":226},[220,68090,1750],{"class":264},[220,68092,68093],{"class":222,"line":399},[220,68094,1765],{"class":264},[220,68096,68097,68099,68102],{"class":222,"line":644},[220,68098,1770],{"class":264},[220,68100,68101],{"class":230},"'ReflectivePlane'",[220,68103,6860],{"class":264},[220,68105,68106,68108,68110],{"class":222,"line":650},[220,68107,6865],{"class":264},[220,68109,6409],{"class":230},[220,68111,2465],{"class":264},[220,68113,68114],{"class":222,"line":656},[220,68115,6882],{"class":264},[220,68117,68118],{"class":222,"line":673},[220,68119,1787],{"class":264},[220,68121,68122],{"class":222,"line":682},[220,68123,1792],{"class":264},[1504,68125,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":68127},[68128,68129],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":67861,"description":67869},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":68136,"title":68137,"body":68138,"category":33256,"componentType":25740,"description":68145,"extension":191,"meta":68462,"navigation":194,"path":68463,"requiresChild":194,"seo":68464,"stem":68465,"__hash__":68466},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":68139,"toc":68458},[68140,68143,68146,68148,68150,68153,68155,68456],[11,68141,68137],{"id":68142},"repeater",[15,68144,68145],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31771,68147],{"component":68137},[23,68149,31775],{"id":26391},[31777,68151],{":props":68152},"[{\"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,68154,31783],{"id":31782},[246,68156,68157,68213,68272,68328,68386],{":tabs":1557},[212,68158,68160],{"className":334,"code":68159,"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,68161,68162,68170,68177,68185,68189,68197,68205],{"__ignoreMap":178},[220,68163,68164,68166,68168],{"class":222,"line":223},[220,68165,343],{"class":264},[220,68167,347],{"class":346},[220,68169,359],{"class":264},[220,68171,68172,68174],{"class":222,"line":179},[220,68173,364],{"class":264},[220,68175,68176],{"class":346},"Repeater\n",[220,68178,68179,68181,68183],{"class":222,"line":389},[220,68180,17262],{"class":226},[220,68182,353],{"class":264},[220,68184,41158],{"class":230},[220,68186,68187],{"class":222,"line":399},[220,68188,31819],{"class":264},[220,68190,68191,68193,68195],{"class":222,"line":644},[220,68192,2550],{"class":264},[220,68194,2553],{"class":346},[220,68196,386],{"class":264},[220,68198,68199,68201,68203],{"class":222,"line":650},[220,68200,2567],{"class":264},[220,68202,68137],{"class":346},[220,68204,359],{"class":264},[220,68206,68207,68209,68211],{"class":222,"line":656},[220,68208,402],{"class":264},[220,68210,347],{"class":346},[220,68212,359],{"class":264},[212,68214,68216],{"className":409,"code":68215,"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,68217,68218,68226,68232,68244,68248,68256,68264],{"__ignoreMap":178},[220,68219,68220,68222,68224],{"class":222,"line":223},[220,68221,343],{"class":264},[220,68223,347],{"class":420},[220,68225,359],{"class":264},[220,68227,68228,68230],{"class":222,"line":179},[220,68229,364],{"class":264},[220,68231,68176],{"class":420},[220,68233,68234,68236,68238,68240,68242],{"class":222,"line":389},[220,68235,9497],{"class":226},[220,68237,353],{"class":260},[220,68239,743],{"class":264},[220,68241,21861],{"class":420},[220,68243,749],{"class":264},[220,68245,68246],{"class":222,"line":399},[220,68247,31819],{"class":264},[220,68249,68250,68252,68254],{"class":222,"line":644},[220,68251,2550],{"class":264},[220,68253,2553],{"class":420},[220,68255,386],{"class":264},[220,68257,68258,68260,68262],{"class":222,"line":650},[220,68259,2567],{"class":264},[220,68261,68137],{"class":420},[220,68263,359],{"class":264},[220,68265,68266,68268,68270],{"class":222,"line":656},[220,68267,402],{"class":264},[220,68269,347],{"class":420},[220,68271,359],{"class":264},[212,68273,68274],{"className":2844,"code":68215,"language":2846,"meta":178,"style":178},[99,68275,68276,68284,68290,68300,68304,68312,68320],{"__ignoreMap":178},[220,68277,68278,68280,68282],{"class":222,"line":223},[220,68279,343],{"class":264},[220,68281,347],{"class":420},[220,68283,359],{"class":264},[220,68285,68286,68288],{"class":222,"line":179},[220,68287,364],{"class":264},[220,68289,68176],{"class":420},[220,68291,68292,68294,68296,68298],{"class":222,"line":389},[220,68293,9497],{"class":226},[220,68295,29729],{"class":264},[220,68297,21861],{"class":420},[220,68299,749],{"class":264},[220,68301,68302],{"class":222,"line":399},[220,68303,31819],{"class":264},[220,68305,68306,68308,68310],{"class":222,"line":644},[220,68307,2550],{"class":264},[220,68309,2553],{"class":420},[220,68311,386],{"class":264},[220,68313,68314,68316,68318],{"class":222,"line":650},[220,68315,2567],{"class":264},[220,68317,68137],{"class":420},[220,68319,359],{"class":264},[220,68321,68322,68324,68326],{"class":222,"line":656},[220,68323,402],{"class":264},[220,68325,347],{"class":420},[220,68327,359],{"class":264},[212,68329,68330],{"className":468,"code":68215,"language":469,"meta":178,"style":178},[99,68331,68332,68340,68346,68358,68362,68370,68378],{"__ignoreMap":178},[220,68333,68334,68336,68338],{"class":222,"line":223},[220,68335,343],{"class":264},[220,68337,347],{"class":420},[220,68339,359],{"class":264},[220,68341,68342,68344],{"class":222,"line":179},[220,68343,364],{"class":264},[220,68345,68176],{"class":420},[220,68347,68348,68350,68352,68354,68356],{"class":222,"line":389},[220,68349,9497],{"class":226},[220,68351,353],{"class":260},[220,68353,743],{"class":264},[220,68355,21861],{"class":420},[220,68357,749],{"class":264},[220,68359,68360],{"class":222,"line":399},[220,68361,31819],{"class":264},[220,68363,68364,68366,68368],{"class":222,"line":644},[220,68365,2550],{"class":264},[220,68367,2553],{"class":420},[220,68369,386],{"class":264},[220,68371,68372,68374,68376],{"class":222,"line":650},[220,68373,2567],{"class":264},[220,68375,68137],{"class":420},[220,68377,359],{"class":264},[220,68379,68380,68382,68384],{"class":222,"line":656},[220,68381,402],{"class":264},[220,68383,347],{"class":420},[220,68385,359],{"class":264},[212,68387,68389],{"className":251,"code":68388,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Repeater', props: { radius: 0.3 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[99,68390,68391,68401,68405,68419,68423,68436,68444,68448,68452],{"__ignoreMap":178},[220,68392,68393,68395,68397,68399],{"class":222,"line":223},[220,68394,261],{"class":260},[220,68396,11364],{"class":264},[220,68398,268],{"class":260},[220,68400,11369],{"class":230},[220,68402,68403],{"class":222,"line":179},[220,68404,647],{"emptyLinePlaceholder":194},[220,68406,68407,68409,68411,68413,68415,68417],{"class":222,"line":389},[220,68408,1735],{"class":260},[220,68410,1738],{"class":420},[220,68412,1741],{"class":260},[220,68414,1744],{"class":260},[220,68416,1747],{"class":226},[220,68418,1750],{"class":264},[220,68420,68421],{"class":222,"line":399},[220,68422,1765],{"class":264},[220,68424,68425,68427,68430,68432,68434],{"class":222,"line":644},[220,68426,1770],{"class":264},[220,68428,68429],{"class":230},"'Repeater'",[220,68431,7392],{"class":264},[220,68433,21861],{"class":420},[220,68435,7397],{"class":264},[220,68437,68438,68440,68442],{"class":222,"line":650},[220,68439,6865],{"class":264},[220,68441,6409],{"class":230},[220,68443,2465],{"class":264},[220,68445,68446],{"class":222,"line":656},[220,68447,6882],{"class":264},[220,68449,68450],{"class":222,"line":673},[220,68451,1787],{"class":264},[220,68453,68454],{"class":222,"line":682},[220,68455,1792],{"class":264},[1504,68457,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68459},[68460,68461],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":68137,"description":68145},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":68468,"title":68469,"body":68470,"category":15765,"componentType":25734,"description":68477,"extension":191,"meta":68754,"navigation":194,"path":68755,"requiresChild":32390,"seo":68756,"stem":68757,"__hash__":68758},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":68471,"toc":68750},[68472,68475,68478,68480,68482,68485,68487,68748],[11,68473,68469],{"id":68474},"ring",[15,68476,68477],{},"Annular ring (donut) with adjustable radius and band thickness",[31771,68479],{"component":68469},[23,68481,31775],{"id":26391},[31777,68483],{":props":68484},"[{\"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,68486,31783],{"id":31782},[246,68488,68489,68537,68588,68636,68686],{":tabs":1557},[212,68490,68492],{"className":334,"code":68491,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,68493,68494,68502,68509,68517,68525,68529],{"__ignoreMap":178},[220,68495,68496,68498,68500],{"class":222,"line":223},[220,68497,343],{"class":264},[220,68499,347],{"class":346},[220,68501,359],{"class":264},[220,68503,68504,68506],{"class":222,"line":179},[220,68505,364],{"class":264},[220,68507,68508],{"class":346},"Ring\n",[220,68510,68511,68513,68515],{"class":222,"line":389},[220,68512,9487],{"class":226},[220,68514,353],{"class":264},[220,68516,9443],{"class":230},[220,68518,68519,68521,68523],{"class":222,"line":399},[220,68520,17262],{"class":226},[220,68522,353],{"class":264},[220,68524,41158],{"class":230},[220,68526,68527],{"class":222,"line":644},[220,68528,1234],{"class":264},[220,68530,68531,68533,68535],{"class":222,"line":650},[220,68532,402],{"class":264},[220,68534,347],{"class":346},[220,68536,359],{"class":264},[212,68538,68540],{"className":409,"code":68539,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,68541,68542,68550,68556,68564,68576,68580],{"__ignoreMap":178},[220,68543,68544,68546,68548],{"class":222,"line":223},[220,68545,343],{"class":264},[220,68547,347],{"class":420},[220,68549,359],{"class":264},[220,68551,68552,68554],{"class":222,"line":179},[220,68553,364],{"class":264},[220,68555,68508],{"class":420},[220,68557,68558,68560,68562],{"class":222,"line":389},[220,68559,9487],{"class":226},[220,68561,353],{"class":260},[220,68563,9443],{"class":230},[220,68565,68566,68568,68570,68572,68574],{"class":222,"line":399},[220,68567,9497],{"class":226},[220,68569,353],{"class":260},[220,68571,743],{"class":264},[220,68573,21861],{"class":420},[220,68575,749],{"class":264},[220,68577,68578],{"class":222,"line":644},[220,68579,1234],{"class":264},[220,68581,68582,68584,68586],{"class":222,"line":650},[220,68583,402],{"class":264},[220,68585,347],{"class":420},[220,68587,359],{"class":264},[212,68589,68590],{"className":2844,"code":68539,"language":2846,"meta":178,"style":178},[99,68591,68592,68600,68606,68614,68624,68628],{"__ignoreMap":178},[220,68593,68594,68596,68598],{"class":222,"line":223},[220,68595,343],{"class":264},[220,68597,347],{"class":420},[220,68599,359],{"class":264},[220,68601,68602,68604],{"class":222,"line":179},[220,68603,364],{"class":264},[220,68605,68508],{"class":420},[220,68607,68608,68610,68612],{"class":222,"line":389},[220,68609,9487],{"class":226},[220,68611,353],{"class":264},[220,68613,9443],{"class":230},[220,68615,68616,68618,68620,68622],{"class":222,"line":399},[220,68617,9497],{"class":226},[220,68619,29729],{"class":264},[220,68621,21861],{"class":420},[220,68623,749],{"class":264},[220,68625,68626],{"class":222,"line":644},[220,68627,1234],{"class":264},[220,68629,68630,68632,68634],{"class":222,"line":650},[220,68631,402],{"class":264},[220,68633,347],{"class":420},[220,68635,359],{"class":264},[212,68637,68638],{"className":468,"code":68539,"language":469,"meta":178,"style":178},[99,68639,68640,68648,68654,68662,68674,68678],{"__ignoreMap":178},[220,68641,68642,68644,68646],{"class":222,"line":223},[220,68643,343],{"class":264},[220,68645,347],{"class":420},[220,68647,359],{"class":264},[220,68649,68650,68652],{"class":222,"line":179},[220,68651,364],{"class":264},[220,68653,68508],{"class":420},[220,68655,68656,68658,68660],{"class":222,"line":389},[220,68657,9487],{"class":226},[220,68659,353],{"class":260},[220,68661,9443],{"class":230},[220,68663,68664,68666,68668,68670,68672],{"class":222,"line":399},[220,68665,9497],{"class":226},[220,68667,353],{"class":260},[220,68669,743],{"class":264},[220,68671,21861],{"class":420},[220,68673,749],{"class":264},[220,68675,68676],{"class":222,"line":644},[220,68677,1234],{"class":264},[220,68679,68680,68682,68684],{"class":222,"line":650},[220,68681,402],{"class":264},[220,68683,347],{"class":420},[220,68685,359],{"class":264},[212,68687,68689],{"className":251,"code":68688,"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,68690,68691,68701,68705,68719,68723,68740,68744],{"__ignoreMap":178},[220,68692,68693,68695,68697,68699],{"class":222,"line":223},[220,68694,261],{"class":260},[220,68696,11364],{"class":264},[220,68698,268],{"class":260},[220,68700,11369],{"class":230},[220,68702,68703],{"class":222,"line":179},[220,68704,647],{"emptyLinePlaceholder":194},[220,68706,68707,68709,68711,68713,68715,68717],{"class":222,"line":389},[220,68708,1735],{"class":260},[220,68710,1738],{"class":420},[220,68712,1741],{"class":260},[220,68714,1744],{"class":260},[220,68716,1747],{"class":226},[220,68718,1750],{"class":264},[220,68720,68721],{"class":222,"line":399},[220,68722,1765],{"class":264},[220,68724,68725,68727,68730,68732,68734,68736,68738],{"class":222,"line":644},[220,68726,1770],{"class":264},[220,68728,68729],{"class":230},"'Ring'",[220,68731,1776],{"class":264},[220,68733,10021],{"class":230},[220,68735,6417],{"class":264},[220,68737,21861],{"class":420},[220,68739,1782],{"class":264},[220,68741,68742],{"class":222,"line":650},[220,68743,1787],{"class":264},[220,68745,68746],{"class":222,"line":656},[220,68747,1792],{"class":264},[1504,68749,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68751},[68752,68753],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":68469,"description":68477},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":68760,"title":68761,"body":68762,"category":33533,"componentType":25740,"description":68769,"extension":191,"meta":69030,"navigation":194,"path":69031,"requiresChild":194,"seo":69032,"stem":69033,"__hash__":69034},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":68763,"toc":69026},[68764,68767,68770,68772,68774,68777,68779,69024],[11,68765,68761],{"id":68766},"ripplewipe",[15,68768,68769],{},"Wipe the content away in concentric rings pulsing out from a center point",[31771,68771],{"component":68761},[23,68773,31775],{"id":26391},[31777,68775],{":props":68776},"[{\"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,68778,31783],{"id":31782},[246,68780,68781,68826,68870,68914,68958],{":tabs":1557},[212,68782,68784],{"className":334,"code":68783,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,68785,68786,68794,68802,68810,68818],{"__ignoreMap":178},[220,68787,68788,68790,68792],{"class":222,"line":223},[220,68789,343],{"class":264},[220,68791,347],{"class":346},[220,68793,359],{"class":264},[220,68795,68796,68798,68800],{"class":222,"line":179},[220,68797,364],{"class":264},[220,68799,68761],{"class":346},[220,68801,359],{"class":264},[220,68803,68804,68806,68808],{"class":222,"line":389},[220,68805,2550],{"class":264},[220,68807,2553],{"class":346},[220,68809,386],{"class":264},[220,68811,68812,68814,68816],{"class":222,"line":399},[220,68813,2567],{"class":264},[220,68815,68761],{"class":346},[220,68817,359],{"class":264},[220,68819,68820,68822,68824],{"class":222,"line":644},[220,68821,402],{"class":264},[220,68823,347],{"class":346},[220,68825,359],{"class":264},[212,68827,68828],{"className":409,"code":68783,"language":411,"meta":178,"style":178},[99,68829,68830,68838,68846,68854,68862],{"__ignoreMap":178},[220,68831,68832,68834,68836],{"class":222,"line":223},[220,68833,343],{"class":264},[220,68835,347],{"class":420},[220,68837,359],{"class":264},[220,68839,68840,68842,68844],{"class":222,"line":179},[220,68841,364],{"class":264},[220,68843,68761],{"class":420},[220,68845,359],{"class":264},[220,68847,68848,68850,68852],{"class":222,"line":389},[220,68849,2550],{"class":264},[220,68851,2553],{"class":420},[220,68853,386],{"class":264},[220,68855,68856,68858,68860],{"class":222,"line":399},[220,68857,2567],{"class":264},[220,68859,68761],{"class":420},[220,68861,359],{"class":264},[220,68863,68864,68866,68868],{"class":222,"line":644},[220,68865,402],{"class":264},[220,68867,347],{"class":420},[220,68869,359],{"class":264},[212,68871,68872],{"className":2844,"code":68783,"language":2846,"meta":178,"style":178},[99,68873,68874,68882,68890,68898,68906],{"__ignoreMap":178},[220,68875,68876,68878,68880],{"class":222,"line":223},[220,68877,343],{"class":264},[220,68879,347],{"class":420},[220,68881,359],{"class":264},[220,68883,68884,68886,68888],{"class":222,"line":179},[220,68885,364],{"class":264},[220,68887,68761],{"class":420},[220,68889,359],{"class":264},[220,68891,68892,68894,68896],{"class":222,"line":389},[220,68893,2550],{"class":264},[220,68895,2553],{"class":420},[220,68897,386],{"class":264},[220,68899,68900,68902,68904],{"class":222,"line":399},[220,68901,2567],{"class":264},[220,68903,68761],{"class":420},[220,68905,359],{"class":264},[220,68907,68908,68910,68912],{"class":222,"line":644},[220,68909,402],{"class":264},[220,68911,347],{"class":420},[220,68913,359],{"class":264},[212,68915,68916],{"className":468,"code":68783,"language":469,"meta":178,"style":178},[99,68917,68918,68926,68934,68942,68950],{"__ignoreMap":178},[220,68919,68920,68922,68924],{"class":222,"line":223},[220,68921,343],{"class":264},[220,68923,347],{"class":420},[220,68925,359],{"class":264},[220,68927,68928,68930,68932],{"class":222,"line":179},[220,68929,364],{"class":264},[220,68931,68761],{"class":420},[220,68933,359],{"class":264},[220,68935,68936,68938,68940],{"class":222,"line":389},[220,68937,2550],{"class":264},[220,68939,2553],{"class":420},[220,68941,386],{"class":264},[220,68943,68944,68946,68948],{"class":222,"line":399},[220,68945,2567],{"class":264},[220,68947,68761],{"class":420},[220,68949,359],{"class":264},[220,68951,68952,68954,68956],{"class":222,"line":644},[220,68953,402],{"class":264},[220,68955,347],{"class":420},[220,68957,359],{"class":264},[212,68959,68961],{"className":251,"code":68960,"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,68962,68963,68973,68977,68991,68995,69004,69012,69016,69020],{"__ignoreMap":178},[220,68964,68965,68967,68969,68971],{"class":222,"line":223},[220,68966,261],{"class":260},[220,68968,11364],{"class":264},[220,68970,268],{"class":260},[220,68972,11369],{"class":230},[220,68974,68975],{"class":222,"line":179},[220,68976,647],{"emptyLinePlaceholder":194},[220,68978,68979,68981,68983,68985,68987,68989],{"class":222,"line":389},[220,68980,1735],{"class":260},[220,68982,1738],{"class":420},[220,68984,1741],{"class":260},[220,68986,1744],{"class":260},[220,68988,1747],{"class":226},[220,68990,1750],{"class":264},[220,68992,68993],{"class":222,"line":399},[220,68994,1765],{"class":264},[220,68996,68997,68999,69002],{"class":222,"line":644},[220,68998,1770],{"class":264},[220,69000,69001],{"class":230},"'RippleWipe'",[220,69003,6860],{"class":264},[220,69005,69006,69008,69010],{"class":222,"line":650},[220,69007,6865],{"class":264},[220,69009,6409],{"class":230},[220,69011,2465],{"class":264},[220,69013,69014],{"class":222,"line":656},[220,69015,6882],{"class":264},[220,69017,69018],{"class":222,"line":673},[220,69019,1787],{"class":264},[220,69021,69022],{"class":222,"line":682},[220,69023,1792],{"class":264},[1504,69025,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":69027},[69028,69029],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":68761,"description":68769},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":69036,"title":69037,"body":69038,"category":32923,"componentType":25734,"description":69045,"extension":191,"meta":69230,"navigation":194,"path":69231,"requiresChild":32390,"seo":69232,"stem":69233,"__hash__":69234},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":69039,"toc":69226},[69040,69043,69046,69048,69050,69053,69055,69224],[11,69041,69037],{"id":69042},"ripples",[15,69044,69045],{},"Concentric animated ripples emanating from a point",[31771,69047],{"component":69037},[23,69049,31775],{"id":26391},[31777,69051],{":props":69052},"[{\"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,69054,31783],{"id":31782},[246,69056,69057,69086,69114,69142,69170],{":tabs":1557},[212,69058,69060],{"className":334,"code":69059,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,69061,69062,69070,69078],{"__ignoreMap":178},[220,69063,69064,69066,69068],{"class":222,"line":223},[220,69065,343],{"class":264},[220,69067,347],{"class":346},[220,69069,359],{"class":264},[220,69071,69072,69074,69076],{"class":222,"line":179},[220,69073,364],{"class":264},[220,69075,69037],{"class":346},[220,69077,386],{"class":264},[220,69079,69080,69082,69084],{"class":222,"line":389},[220,69081,402],{"class":264},[220,69083,347],{"class":346},[220,69085,359],{"class":264},[212,69087,69088],{"className":409,"code":69059,"language":411,"meta":178,"style":178},[99,69089,69090,69098,69106],{"__ignoreMap":178},[220,69091,69092,69094,69096],{"class":222,"line":223},[220,69093,343],{"class":264},[220,69095,347],{"class":420},[220,69097,359],{"class":264},[220,69099,69100,69102,69104],{"class":222,"line":179},[220,69101,364],{"class":264},[220,69103,69037],{"class":420},[220,69105,386],{"class":264},[220,69107,69108,69110,69112],{"class":222,"line":389},[220,69109,402],{"class":264},[220,69111,347],{"class":420},[220,69113,359],{"class":264},[212,69115,69116],{"className":2844,"code":69059,"language":2846,"meta":178,"style":178},[99,69117,69118,69126,69134],{"__ignoreMap":178},[220,69119,69120,69122,69124],{"class":222,"line":223},[220,69121,343],{"class":264},[220,69123,347],{"class":420},[220,69125,359],{"class":264},[220,69127,69128,69130,69132],{"class":222,"line":179},[220,69129,364],{"class":264},[220,69131,69037],{"class":420},[220,69133,386],{"class":264},[220,69135,69136,69138,69140],{"class":222,"line":389},[220,69137,402],{"class":264},[220,69139,347],{"class":420},[220,69141,359],{"class":264},[212,69143,69144],{"className":468,"code":69059,"language":469,"meta":178,"style":178},[99,69145,69146,69154,69162],{"__ignoreMap":178},[220,69147,69148,69150,69152],{"class":222,"line":223},[220,69149,343],{"class":264},[220,69151,347],{"class":420},[220,69153,359],{"class":264},[220,69155,69156,69158,69160],{"class":222,"line":179},[220,69157,364],{"class":264},[220,69159,69037],{"class":420},[220,69161,386],{"class":264},[220,69163,69164,69166,69168],{"class":222,"line":389},[220,69165,402],{"class":264},[220,69167,347],{"class":420},[220,69169,359],{"class":264},[212,69171,69173],{"className":251,"code":69172,"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,69174,69175,69185,69189,69203,69207,69216,69220],{"__ignoreMap":178},[220,69176,69177,69179,69181,69183],{"class":222,"line":223},[220,69178,261],{"class":260},[220,69180,11364],{"class":264},[220,69182,268],{"class":260},[220,69184,11369],{"class":230},[220,69186,69187],{"class":222,"line":179},[220,69188,647],{"emptyLinePlaceholder":194},[220,69190,69191,69193,69195,69197,69199,69201],{"class":222,"line":389},[220,69192,1735],{"class":260},[220,69194,1738],{"class":420},[220,69196,1741],{"class":260},[220,69198,1744],{"class":260},[220,69200,1747],{"class":226},[220,69202,1750],{"class":264},[220,69204,69205],{"class":222,"line":399},[220,69206,1765],{"class":264},[220,69208,69209,69211,69214],{"class":222,"line":644},[220,69210,1770],{"class":264},[220,69212,69213],{"class":230},"'Ripples'",[220,69215,2465],{"class":264},[220,69217,69218],{"class":222,"line":650},[220,69219,1787],{"class":264},[220,69221,69222],{"class":222,"line":656},[220,69223,1792],{"class":264},[1504,69225,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":69227},[69228,69229],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":69037,"description":69045},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":69236,"title":69237,"body":69238,"category":15765,"componentType":25734,"description":69245,"extension":191,"meta":69475,"navigation":194,"path":69476,"requiresChild":32390,"seo":69477,"stem":69478,"__hash__":69479},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":69239,"toc":69471},[69240,69243,69246,69248,69250,69253,69255,69469],[11,69241,69237],{"id":69242},"roundedrect",[15,69244,69245],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31771,69247],{"component":69237},[23,69249,31775],{"id":26391},[31777,69251],{":props":69252},"[{\"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,69254,31783],{"id":31782},[246,69256,69257,69297,69335,69373,69411],{":tabs":1557},[212,69258,69260],{"className":334,"code":69259,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,69261,69262,69270,69277,69285,69289],{"__ignoreMap":178},[220,69263,69264,69266,69268],{"class":222,"line":223},[220,69265,343],{"class":264},[220,69267,347],{"class":346},[220,69269,359],{"class":264},[220,69271,69272,69274],{"class":222,"line":179},[220,69273,364],{"class":264},[220,69275,69276],{"class":346},"RoundedRect\n",[220,69278,69279,69281,69283],{"class":222,"line":389},[220,69280,9487],{"class":226},[220,69282,353],{"class":264},[220,69284,9443],{"class":230},[220,69286,69287],{"class":222,"line":399},[220,69288,1234],{"class":264},[220,69290,69291,69293,69295],{"class":222,"line":644},[220,69292,402],{"class":264},[220,69294,347],{"class":346},[220,69296,359],{"class":264},[212,69298,69299],{"className":409,"code":69259,"language":411,"meta":178,"style":178},[99,69300,69301,69309,69315,69323,69327],{"__ignoreMap":178},[220,69302,69303,69305,69307],{"class":222,"line":223},[220,69304,343],{"class":264},[220,69306,347],{"class":420},[220,69308,359],{"class":264},[220,69310,69311,69313],{"class":222,"line":179},[220,69312,364],{"class":264},[220,69314,69276],{"class":420},[220,69316,69317,69319,69321],{"class":222,"line":389},[220,69318,9487],{"class":226},[220,69320,353],{"class":260},[220,69322,9443],{"class":230},[220,69324,69325],{"class":222,"line":399},[220,69326,1234],{"class":264},[220,69328,69329,69331,69333],{"class":222,"line":644},[220,69330,402],{"class":264},[220,69332,347],{"class":420},[220,69334,359],{"class":264},[212,69336,69337],{"className":2844,"code":69259,"language":2846,"meta":178,"style":178},[99,69338,69339,69347,69353,69361,69365],{"__ignoreMap":178},[220,69340,69341,69343,69345],{"class":222,"line":223},[220,69342,343],{"class":264},[220,69344,347],{"class":420},[220,69346,359],{"class":264},[220,69348,69349,69351],{"class":222,"line":179},[220,69350,364],{"class":264},[220,69352,69276],{"class":420},[220,69354,69355,69357,69359],{"class":222,"line":389},[220,69356,9487],{"class":226},[220,69358,353],{"class":264},[220,69360,9443],{"class":230},[220,69362,69363],{"class":222,"line":399},[220,69364,1234],{"class":264},[220,69366,69367,69369,69371],{"class":222,"line":644},[220,69368,402],{"class":264},[220,69370,347],{"class":420},[220,69372,359],{"class":264},[212,69374,69375],{"className":468,"code":69259,"language":469,"meta":178,"style":178},[99,69376,69377,69385,69391,69399,69403],{"__ignoreMap":178},[220,69378,69379,69381,69383],{"class":222,"line":223},[220,69380,343],{"class":264},[220,69382,347],{"class":420},[220,69384,359],{"class":264},[220,69386,69387,69389],{"class":222,"line":179},[220,69388,364],{"class":264},[220,69390,69276],{"class":420},[220,69392,69393,69395,69397],{"class":222,"line":389},[220,69394,9487],{"class":226},[220,69396,353],{"class":260},[220,69398,9443],{"class":230},[220,69400,69401],{"class":222,"line":399},[220,69402,1234],{"class":264},[220,69404,69405,69407,69409],{"class":222,"line":644},[220,69406,402],{"class":264},[220,69408,347],{"class":420},[220,69410,359],{"class":264},[212,69412,69414],{"className":251,"code":69413,"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,69415,69416,69426,69430,69444,69448,69461,69465],{"__ignoreMap":178},[220,69417,69418,69420,69422,69424],{"class":222,"line":223},[220,69419,261],{"class":260},[220,69421,11364],{"class":264},[220,69423,268],{"class":260},[220,69425,11369],{"class":230},[220,69427,69428],{"class":222,"line":179},[220,69429,647],{"emptyLinePlaceholder":194},[220,69431,69432,69434,69436,69438,69440,69442],{"class":222,"line":389},[220,69433,1735],{"class":260},[220,69435,1738],{"class":420},[220,69437,1741],{"class":260},[220,69439,1744],{"class":260},[220,69441,1747],{"class":226},[220,69443,1750],{"class":264},[220,69445,69446],{"class":222,"line":399},[220,69447,1765],{"class":264},[220,69449,69450,69452,69455,69457,69459],{"class":222,"line":644},[220,69451,1770],{"class":264},[220,69453,69454],{"class":230},"'RoundedRect'",[220,69456,1776],{"class":264},[220,69458,10021],{"class":230},[220,69460,1782],{"class":264},[220,69462,69463],{"class":222,"line":650},[220,69464,1787],{"class":264},[220,69466,69467],{"class":222,"line":656},[220,69468,1792],{"class":264},[1504,69470,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69472},[69473,69474],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":69237,"description":69245},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":69481,"title":69482,"body":69483,"category":36228,"componentType":25740,"description":69489,"extension":191,"meta":69806,"navigation":194,"path":69807,"requiresChild":194,"seo":69808,"stem":69809,"__hash__":69810},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":69484,"toc":69802},[69485,69487,69490,69492,69494,69497,69499,69800],[11,69486,69482],{"id":7910},[15,69488,69489],{},"Adjust color saturation intensity",[31771,69491],{"component":69482},[23,69493,31775],{"id":26391},[31777,69495],{":props":69496},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,69498,31783],{"id":31782},[246,69500,69501,69557,69616,69672,69730],{":tabs":1557},[212,69502,69504],{"className":334,"code":69503,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69505,69506,69514,69521,69529,69533,69541,69549],{"__ignoreMap":178},[220,69507,69508,69510,69512],{"class":222,"line":223},[220,69509,343],{"class":264},[220,69511,347],{"class":346},[220,69513,359],{"class":264},[220,69515,69516,69518],{"class":222,"line":179},[220,69517,364],{"class":264},[220,69519,69520],{"class":346},"Saturation\n",[220,69522,69523,69525,69527],{"class":222,"line":389},[220,69524,20228],{"class":226},[220,69526,353],{"class":264},[220,69528,36485],{"class":230},[220,69530,69531],{"class":222,"line":399},[220,69532,31819],{"class":264},[220,69534,69535,69537,69539],{"class":222,"line":644},[220,69536,2550],{"class":264},[220,69538,2553],{"class":346},[220,69540,386],{"class":264},[220,69542,69543,69545,69547],{"class":222,"line":650},[220,69544,2567],{"class":264},[220,69546,69482],{"class":346},[220,69548,359],{"class":264},[220,69550,69551,69553,69555],{"class":222,"line":656},[220,69552,402],{"class":264},[220,69554,347],{"class":346},[220,69556,359],{"class":264},[212,69558,69560],{"className":409,"code":69559,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,69561,69562,69570,69576,69588,69592,69600,69608],{"__ignoreMap":178},[220,69563,69564,69566,69568],{"class":222,"line":223},[220,69565,343],{"class":264},[220,69567,347],{"class":420},[220,69569,359],{"class":264},[220,69571,69572,69574],{"class":222,"line":179},[220,69573,364],{"class":264},[220,69575,69520],{"class":420},[220,69577,69578,69580,69582,69584,69586],{"class":222,"line":389},[220,69579,20339],{"class":226},[220,69581,353],{"class":260},[220,69583,743],{"class":264},[220,69585,8528],{"class":420},[220,69587,749],{"class":264},[220,69589,69590],{"class":222,"line":399},[220,69591,31819],{"class":264},[220,69593,69594,69596,69598],{"class":222,"line":644},[220,69595,2550],{"class":264},[220,69597,2553],{"class":420},[220,69599,386],{"class":264},[220,69601,69602,69604,69606],{"class":222,"line":650},[220,69603,2567],{"class":264},[220,69605,69482],{"class":420},[220,69607,359],{"class":264},[220,69609,69610,69612,69614],{"class":222,"line":656},[220,69611,402],{"class":264},[220,69613,347],{"class":420},[220,69615,359],{"class":264},[212,69617,69618],{"className":2844,"code":69559,"language":2846,"meta":178,"style":178},[99,69619,69620,69628,69634,69644,69648,69656,69664],{"__ignoreMap":178},[220,69621,69622,69624,69626],{"class":222,"line":223},[220,69623,343],{"class":264},[220,69625,347],{"class":420},[220,69627,359],{"class":264},[220,69629,69630,69632],{"class":222,"line":179},[220,69631,364],{"class":264},[220,69633,69520],{"class":420},[220,69635,69636,69638,69640,69642],{"class":222,"line":389},[220,69637,20339],{"class":226},[220,69639,29729],{"class":264},[220,69641,8528],{"class":420},[220,69643,749],{"class":264},[220,69645,69646],{"class":222,"line":399},[220,69647,31819],{"class":264},[220,69649,69650,69652,69654],{"class":222,"line":644},[220,69651,2550],{"class":264},[220,69653,2553],{"class":420},[220,69655,386],{"class":264},[220,69657,69658,69660,69662],{"class":222,"line":650},[220,69659,2567],{"class":264},[220,69661,69482],{"class":420},[220,69663,359],{"class":264},[220,69665,69666,69668,69670],{"class":222,"line":656},[220,69667,402],{"class":264},[220,69669,347],{"class":420},[220,69671,359],{"class":264},[212,69673,69674],{"className":468,"code":69559,"language":469,"meta":178,"style":178},[99,69675,69676,69684,69690,69702,69706,69714,69722],{"__ignoreMap":178},[220,69677,69678,69680,69682],{"class":222,"line":223},[220,69679,343],{"class":264},[220,69681,347],{"class":420},[220,69683,359],{"class":264},[220,69685,69686,69688],{"class":222,"line":179},[220,69687,364],{"class":264},[220,69689,69520],{"class":420},[220,69691,69692,69694,69696,69698,69700],{"class":222,"line":389},[220,69693,20339],{"class":226},[220,69695,353],{"class":260},[220,69697,743],{"class":264},[220,69699,8528],{"class":420},[220,69701,749],{"class":264},[220,69703,69704],{"class":222,"line":399},[220,69705,31819],{"class":264},[220,69707,69708,69710,69712],{"class":222,"line":644},[220,69709,2550],{"class":264},[220,69711,2553],{"class":420},[220,69713,386],{"class":264},[220,69715,69716,69718,69720],{"class":222,"line":650},[220,69717,2567],{"class":264},[220,69719,69482],{"class":420},[220,69721,359],{"class":264},[220,69723,69724,69726,69728],{"class":222,"line":656},[220,69725,402],{"class":264},[220,69727,347],{"class":420},[220,69729,359],{"class":264},[212,69731,69733],{"className":251,"code":69732,"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,69734,69735,69745,69749,69763,69767,69780,69788,69792,69796],{"__ignoreMap":178},[220,69736,69737,69739,69741,69743],{"class":222,"line":223},[220,69738,261],{"class":260},[220,69740,11364],{"class":264},[220,69742,268],{"class":260},[220,69744,11369],{"class":230},[220,69746,69747],{"class":222,"line":179},[220,69748,647],{"emptyLinePlaceholder":194},[220,69750,69751,69753,69755,69757,69759,69761],{"class":222,"line":389},[220,69752,1735],{"class":260},[220,69754,1738],{"class":420},[220,69756,1741],{"class":260},[220,69758,1744],{"class":260},[220,69760,1747],{"class":226},[220,69762,1750],{"class":264},[220,69764,69765],{"class":222,"line":399},[220,69766,1765],{"class":264},[220,69768,69769,69771,69774,69776,69778],{"class":222,"line":644},[220,69770,1770],{"class":264},[220,69772,69773],{"class":230},"'Saturation'",[220,69775,32063],{"class":264},[220,69777,8528],{"class":420},[220,69779,7397],{"class":264},[220,69781,69782,69784,69786],{"class":222,"line":650},[220,69783,6865],{"class":264},[220,69785,6409],{"class":230},[220,69787,2465],{"class":264},[220,69789,69790],{"class":222,"line":656},[220,69791,6882],{"class":264},[220,69793,69794],{"class":222,"line":673},[220,69795,1787],{"class":264},[220,69797,69798],{"class":222,"line":682},[220,69799,1792],{"class":264},[1504,69801,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69803},[69804,69805],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":69482,"description":69489},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":69812,"title":69813,"body":69814,"category":32923,"componentType":25734,"description":69821,"extension":191,"meta":70006,"navigation":194,"path":70007,"requiresChild":32390,"seo":70008,"stem":70009,"__hash__":70010},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":69815,"toc":70002},[69816,69819,69822,69824,69826,69829,69831,70000],[11,69817,69813],{"id":69818},"scratches",[15,69820,69821],{},"Fine hairline scratches, like a worn film or scratched surface",[31771,69823],{"component":69813},[23,69825,31775],{"id":26391},[31777,69827],{":props":69828},"[{\"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,69830,31783],{"id":31782},[246,69832,69833,69862,69890,69918,69946],{":tabs":1557},[212,69834,69836],{"className":334,"code":69835,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,69837,69838,69846,69854],{"__ignoreMap":178},[220,69839,69840,69842,69844],{"class":222,"line":223},[220,69841,343],{"class":264},[220,69843,347],{"class":346},[220,69845,359],{"class":264},[220,69847,69848,69850,69852],{"class":222,"line":179},[220,69849,364],{"class":264},[220,69851,69813],{"class":346},[220,69853,386],{"class":264},[220,69855,69856,69858,69860],{"class":222,"line":389},[220,69857,402],{"class":264},[220,69859,347],{"class":346},[220,69861,359],{"class":264},[212,69863,69864],{"className":409,"code":69835,"language":411,"meta":178,"style":178},[99,69865,69866,69874,69882],{"__ignoreMap":178},[220,69867,69868,69870,69872],{"class":222,"line":223},[220,69869,343],{"class":264},[220,69871,347],{"class":420},[220,69873,359],{"class":264},[220,69875,69876,69878,69880],{"class":222,"line":179},[220,69877,364],{"class":264},[220,69879,69813],{"class":420},[220,69881,386],{"class":264},[220,69883,69884,69886,69888],{"class":222,"line":389},[220,69885,402],{"class":264},[220,69887,347],{"class":420},[220,69889,359],{"class":264},[212,69891,69892],{"className":2844,"code":69835,"language":2846,"meta":178,"style":178},[99,69893,69894,69902,69910],{"__ignoreMap":178},[220,69895,69896,69898,69900],{"class":222,"line":223},[220,69897,343],{"class":264},[220,69899,347],{"class":420},[220,69901,359],{"class":264},[220,69903,69904,69906,69908],{"class":222,"line":179},[220,69905,364],{"class":264},[220,69907,69813],{"class":420},[220,69909,386],{"class":264},[220,69911,69912,69914,69916],{"class":222,"line":389},[220,69913,402],{"class":264},[220,69915,347],{"class":420},[220,69917,359],{"class":264},[212,69919,69920],{"className":468,"code":69835,"language":469,"meta":178,"style":178},[99,69921,69922,69930,69938],{"__ignoreMap":178},[220,69923,69924,69926,69928],{"class":222,"line":223},[220,69925,343],{"class":264},[220,69927,347],{"class":420},[220,69929,359],{"class":264},[220,69931,69932,69934,69936],{"class":222,"line":179},[220,69933,364],{"class":264},[220,69935,69813],{"class":420},[220,69937,386],{"class":264},[220,69939,69940,69942,69944],{"class":222,"line":389},[220,69941,402],{"class":264},[220,69943,347],{"class":420},[220,69945,359],{"class":264},[212,69947,69949],{"className":251,"code":69948,"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,69950,69951,69961,69965,69979,69983,69992,69996],{"__ignoreMap":178},[220,69952,69953,69955,69957,69959],{"class":222,"line":223},[220,69954,261],{"class":260},[220,69956,11364],{"class":264},[220,69958,268],{"class":260},[220,69960,11369],{"class":230},[220,69962,69963],{"class":222,"line":179},[220,69964,647],{"emptyLinePlaceholder":194},[220,69966,69967,69969,69971,69973,69975,69977],{"class":222,"line":389},[220,69968,1735],{"class":260},[220,69970,1738],{"class":420},[220,69972,1741],{"class":260},[220,69974,1744],{"class":260},[220,69976,1747],{"class":226},[220,69978,1750],{"class":264},[220,69980,69981],{"class":222,"line":399},[220,69982,1765],{"class":264},[220,69984,69985,69987,69990],{"class":222,"line":644},[220,69986,1770],{"class":264},[220,69988,69989],{"class":230},"'Scratches'",[220,69991,2465],{"class":264},[220,69993,69994],{"class":222,"line":650},[220,69995,1787],{"class":264},[220,69997,69998],{"class":222,"line":656},[220,69999,1792],{"class":264},[1504,70001,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":70003},[70004,70005],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":69813,"description":69821},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":70012,"title":70013,"body":70014,"category":36228,"componentType":25740,"description":70021,"extension":191,"meta":70282,"navigation":194,"path":70283,"requiresChild":194,"seo":70284,"stem":70285,"__hash__":70286},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":70015,"toc":70278},[70016,70019,70022,70024,70026,70029,70031,70276],[11,70017,70013],{"id":70018},"sharpness",[15,70020,70021],{},"Adjust image sharpness using a convolution kernel",[31771,70023],{"component":70013},[23,70025,31775],{"id":26391},[31777,70027],{":props":70028},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,70030,31783],{"id":31782},[246,70032,70033,70078,70122,70166,70210],{":tabs":1557},[212,70034,70036],{"className":334,"code":70035,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,70037,70038,70046,70054,70062,70070],{"__ignoreMap":178},[220,70039,70040,70042,70044],{"class":222,"line":223},[220,70041,343],{"class":264},[220,70043,347],{"class":346},[220,70045,359],{"class":264},[220,70047,70048,70050,70052],{"class":222,"line":179},[220,70049,364],{"class":264},[220,70051,70013],{"class":346},[220,70053,359],{"class":264},[220,70055,70056,70058,70060],{"class":222,"line":389},[220,70057,2550],{"class":264},[220,70059,2553],{"class":346},[220,70061,386],{"class":264},[220,70063,70064,70066,70068],{"class":222,"line":399},[220,70065,2567],{"class":264},[220,70067,70013],{"class":346},[220,70069,359],{"class":264},[220,70071,70072,70074,70076],{"class":222,"line":644},[220,70073,402],{"class":264},[220,70075,347],{"class":346},[220,70077,359],{"class":264},[212,70079,70080],{"className":409,"code":70035,"language":411,"meta":178,"style":178},[99,70081,70082,70090,70098,70106,70114],{"__ignoreMap":178},[220,70083,70084,70086,70088],{"class":222,"line":223},[220,70085,343],{"class":264},[220,70087,347],{"class":420},[220,70089,359],{"class":264},[220,70091,70092,70094,70096],{"class":222,"line":179},[220,70093,364],{"class":264},[220,70095,70013],{"class":420},[220,70097,359],{"class":264},[220,70099,70100,70102,70104],{"class":222,"line":389},[220,70101,2550],{"class":264},[220,70103,2553],{"class":420},[220,70105,386],{"class":264},[220,70107,70108,70110,70112],{"class":222,"line":399},[220,70109,2567],{"class":264},[220,70111,70013],{"class":420},[220,70113,359],{"class":264},[220,70115,70116,70118,70120],{"class":222,"line":644},[220,70117,402],{"class":264},[220,70119,347],{"class":420},[220,70121,359],{"class":264},[212,70123,70124],{"className":2844,"code":70035,"language":2846,"meta":178,"style":178},[99,70125,70126,70134,70142,70150,70158],{"__ignoreMap":178},[220,70127,70128,70130,70132],{"class":222,"line":223},[220,70129,343],{"class":264},[220,70131,347],{"class":420},[220,70133,359],{"class":264},[220,70135,70136,70138,70140],{"class":222,"line":179},[220,70137,364],{"class":264},[220,70139,70013],{"class":420},[220,70141,359],{"class":264},[220,70143,70144,70146,70148],{"class":222,"line":389},[220,70145,2550],{"class":264},[220,70147,2553],{"class":420},[220,70149,386],{"class":264},[220,70151,70152,70154,70156],{"class":222,"line":399},[220,70153,2567],{"class":264},[220,70155,70013],{"class":420},[220,70157,359],{"class":264},[220,70159,70160,70162,70164],{"class":222,"line":644},[220,70161,402],{"class":264},[220,70163,347],{"class":420},[220,70165,359],{"class":264},[212,70167,70168],{"className":468,"code":70035,"language":469,"meta":178,"style":178},[99,70169,70170,70178,70186,70194,70202],{"__ignoreMap":178},[220,70171,70172,70174,70176],{"class":222,"line":223},[220,70173,343],{"class":264},[220,70175,347],{"class":420},[220,70177,359],{"class":264},[220,70179,70180,70182,70184],{"class":222,"line":179},[220,70181,364],{"class":264},[220,70183,70013],{"class":420},[220,70185,359],{"class":264},[220,70187,70188,70190,70192],{"class":222,"line":389},[220,70189,2550],{"class":264},[220,70191,2553],{"class":420},[220,70193,386],{"class":264},[220,70195,70196,70198,70200],{"class":222,"line":399},[220,70197,2567],{"class":264},[220,70199,70013],{"class":420},[220,70201,359],{"class":264},[220,70203,70204,70206,70208],{"class":222,"line":644},[220,70205,402],{"class":264},[220,70207,347],{"class":420},[220,70209,359],{"class":264},[212,70211,70213],{"className":251,"code":70212,"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,70214,70215,70225,70229,70243,70247,70256,70264,70268,70272],{"__ignoreMap":178},[220,70216,70217,70219,70221,70223],{"class":222,"line":223},[220,70218,261],{"class":260},[220,70220,11364],{"class":264},[220,70222,268],{"class":260},[220,70224,11369],{"class":230},[220,70226,70227],{"class":222,"line":179},[220,70228,647],{"emptyLinePlaceholder":194},[220,70230,70231,70233,70235,70237,70239,70241],{"class":222,"line":389},[220,70232,1735],{"class":260},[220,70234,1738],{"class":420},[220,70236,1741],{"class":260},[220,70238,1744],{"class":260},[220,70240,1747],{"class":226},[220,70242,1750],{"class":264},[220,70244,70245],{"class":222,"line":399},[220,70246,1765],{"class":264},[220,70248,70249,70251,70254],{"class":222,"line":644},[220,70250,1770],{"class":264},[220,70252,70253],{"class":230},"'Sharpness'",[220,70255,6860],{"class":264},[220,70257,70258,70260,70262],{"class":222,"line":650},[220,70259,6865],{"class":264},[220,70261,6409],{"class":230},[220,70263,2465],{"class":264},[220,70265,70266],{"class":222,"line":656},[220,70267,6882],{"class":264},[220,70269,70270],{"class":222,"line":673},[220,70271,1787],{"class":264},[220,70273,70274],{"class":222,"line":682},[220,70275,1792],{"class":264},[1504,70277,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":70279},[70280,70281],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":70013,"description":70021},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":70288,"title":70289,"body":70290,"category":35419,"componentType":25740,"description":70297,"extension":191,"meta":70662,"navigation":194,"path":70663,"requiresChild":194,"seo":70664,"stem":70665,"__hash__":70666},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":70291,"toc":70658},[70292,70295,70298,70300,70302,70305,70307,70656],[11,70293,70289],{"id":70294},"shatter",[15,70296,70297],{},"Broken glass effect with tectonic plate displacement",[31771,70299],{"component":70289},[23,70301,31775],{"id":26391},[31777,70303],{":props":70304},"[{\"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,70306,31783],{"id":31782},[246,70308,70309,70374,70446,70512,70582],{":tabs":1557},[212,70310,70312],{"className":334,"code":70311,"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,70313,70314,70322,70329,70338,70346,70350,70358,70366],{"__ignoreMap":178},[220,70315,70316,70318,70320],{"class":222,"line":223},[220,70317,343],{"class":264},[220,70319,347],{"class":346},[220,70321,359],{"class":264},[220,70323,70324,70326],{"class":222,"line":179},[220,70325,364],{"class":264},[220,70327,70328],{"class":346},"Shatter\n",[220,70330,70331,70333,70335],{"class":222,"line":389},[220,70332,20228],{"class":226},[220,70334,353],{"class":264},[220,70336,70337],{"class":230},"\"4\"\n",[220,70339,70340,70342,70344],{"class":222,"line":399},[220,70341,17262],{"class":226},[220,70343,353],{"class":264},[220,70345,48208],{"class":230},[220,70347,70348],{"class":222,"line":644},[220,70349,31819],{"class":264},[220,70351,70352,70354,70356],{"class":222,"line":650},[220,70353,2550],{"class":264},[220,70355,2553],{"class":346},[220,70357,386],{"class":264},[220,70359,70360,70362,70364],{"class":222,"line":656},[220,70361,2567],{"class":264},[220,70363,70289],{"class":346},[220,70365,359],{"class":264},[220,70367,70368,70370,70372],{"class":222,"line":673},[220,70369,402],{"class":264},[220,70371,347],{"class":346},[220,70373,359],{"class":264},[212,70375,70377],{"className":409,"code":70376,"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,70378,70379,70387,70393,70406,70418,70422,70430,70438],{"__ignoreMap":178},[220,70380,70381,70383,70385],{"class":222,"line":223},[220,70382,343],{"class":264},[220,70384,347],{"class":420},[220,70386,359],{"class":264},[220,70388,70389,70391],{"class":222,"line":179},[220,70390,364],{"class":264},[220,70392,70328],{"class":420},[220,70394,70395,70397,70399,70401,70404],{"class":222,"line":389},[220,70396,20339],{"class":226},[220,70398,353],{"class":260},[220,70400,743],{"class":264},[220,70402,70403],{"class":420},"4",[220,70405,749],{"class":264},[220,70407,70408,70410,70412,70414,70416],{"class":222,"line":399},[220,70409,9497],{"class":226},[220,70411,353],{"class":260},[220,70413,743],{"class":264},[220,70415,8100],{"class":420},[220,70417,749],{"class":264},[220,70419,70420],{"class":222,"line":644},[220,70421,31819],{"class":264},[220,70423,70424,70426,70428],{"class":222,"line":650},[220,70425,2550],{"class":264},[220,70427,2553],{"class":420},[220,70429,386],{"class":264},[220,70431,70432,70434,70436],{"class":222,"line":656},[220,70433,2567],{"class":264},[220,70435,70289],{"class":420},[220,70437,359],{"class":264},[220,70439,70440,70442,70444],{"class":222,"line":673},[220,70441,402],{"class":264},[220,70443,347],{"class":420},[220,70445,359],{"class":264},[212,70447,70448],{"className":2844,"code":70376,"language":2846,"meta":178,"style":178},[99,70449,70450,70458,70464,70474,70484,70488,70496,70504],{"__ignoreMap":178},[220,70451,70452,70454,70456],{"class":222,"line":223},[220,70453,343],{"class":264},[220,70455,347],{"class":420},[220,70457,359],{"class":264},[220,70459,70460,70462],{"class":222,"line":179},[220,70461,364],{"class":264},[220,70463,70328],{"class":420},[220,70465,70466,70468,70470,70472],{"class":222,"line":389},[220,70467,20339],{"class":226},[220,70469,29729],{"class":264},[220,70471,70403],{"class":420},[220,70473,749],{"class":264},[220,70475,70476,70478,70480,70482],{"class":222,"line":399},[220,70477,9497],{"class":226},[220,70479,29729],{"class":264},[220,70481,8100],{"class":420},[220,70483,749],{"class":264},[220,70485,70486],{"class":222,"line":644},[220,70487,31819],{"class":264},[220,70489,70490,70492,70494],{"class":222,"line":650},[220,70491,2550],{"class":264},[220,70493,2553],{"class":420},[220,70495,386],{"class":264},[220,70497,70498,70500,70502],{"class":222,"line":656},[220,70499,2567],{"class":264},[220,70501,70289],{"class":420},[220,70503,359],{"class":264},[220,70505,70506,70508,70510],{"class":222,"line":673},[220,70507,402],{"class":264},[220,70509,347],{"class":420},[220,70511,359],{"class":264},[212,70513,70514],{"className":468,"code":70376,"language":469,"meta":178,"style":178},[99,70515,70516,70524,70530,70542,70554,70558,70566,70574],{"__ignoreMap":178},[220,70517,70518,70520,70522],{"class":222,"line":223},[220,70519,343],{"class":264},[220,70521,347],{"class":420},[220,70523,359],{"class":264},[220,70525,70526,70528],{"class":222,"line":179},[220,70527,364],{"class":264},[220,70529,70328],{"class":420},[220,70531,70532,70534,70536,70538,70540],{"class":222,"line":389},[220,70533,20339],{"class":226},[220,70535,353],{"class":260},[220,70537,743],{"class":264},[220,70539,70403],{"class":420},[220,70541,749],{"class":264},[220,70543,70544,70546,70548,70550,70552],{"class":222,"line":399},[220,70545,9497],{"class":226},[220,70547,353],{"class":260},[220,70549,743],{"class":264},[220,70551,8100],{"class":420},[220,70553,749],{"class":264},[220,70555,70556],{"class":222,"line":644},[220,70557,31819],{"class":264},[220,70559,70560,70562,70564],{"class":222,"line":650},[220,70561,2550],{"class":264},[220,70563,2553],{"class":420},[220,70565,386],{"class":264},[220,70567,70568,70570,70572],{"class":222,"line":656},[220,70569,2567],{"class":264},[220,70571,70289],{"class":420},[220,70573,359],{"class":264},[220,70575,70576,70578,70580],{"class":222,"line":673},[220,70577,402],{"class":264},[220,70579,347],{"class":420},[220,70581,359],{"class":264},[212,70583,70585],{"className":251,"code":70584,"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,70586,70587,70597,70601,70615,70619,70636,70644,70648,70652],{"__ignoreMap":178},[220,70588,70589,70591,70593,70595],{"class":222,"line":223},[220,70590,261],{"class":260},[220,70592,11364],{"class":264},[220,70594,268],{"class":260},[220,70596,11369],{"class":230},[220,70598,70599],{"class":222,"line":179},[220,70600,647],{"emptyLinePlaceholder":194},[220,70602,70603,70605,70607,70609,70611,70613],{"class":222,"line":389},[220,70604,1735],{"class":260},[220,70606,1738],{"class":420},[220,70608,1741],{"class":260},[220,70610,1744],{"class":260},[220,70612,1747],{"class":226},[220,70614,1750],{"class":264},[220,70616,70617],{"class":222,"line":399},[220,70618,1765],{"class":264},[220,70620,70621,70623,70626,70628,70630,70632,70634],{"class":222,"line":644},[220,70622,1770],{"class":264},[220,70624,70625],{"class":230},"'Shatter'",[220,70627,32063],{"class":264},[220,70629,70403],{"class":420},[220,70631,6417],{"class":264},[220,70633,8100],{"class":420},[220,70635,7397],{"class":264},[220,70637,70638,70640,70642],{"class":222,"line":650},[220,70639,6865],{"class":264},[220,70641,6409],{"class":230},[220,70643,2465],{"class":264},[220,70645,70646],{"class":222,"line":656},[220,70647,6882],{"class":264},[220,70649,70650],{"class":222,"line":673},[220,70651,1787],{"class":264},[220,70653,70654],{"class":222,"line":682},[220,70655,1792],{"class":264},[1504,70657,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70659},[70660,70661],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":70289,"description":70297},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":70668,"title":70669,"body":70670,"category":32923,"componentType":25734,"description":70677,"extension":191,"meta":70862,"navigation":194,"path":70863,"requiresChild":32390,"seo":70864,"stem":70865,"__hash__":70866},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":70671,"toc":70858},[70672,70675,70678,70680,70682,70685,70687,70856],[11,70673,70669],{"id":70674},"simplexnoise",[15,70676,70677],{},"Organic noise with animated movement",[31771,70679],{"component":70669},[23,70681,31775],{"id":26391},[31777,70683],{":props":70684},"[{\"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,70686,31783],{"id":31782},[246,70688,70689,70718,70746,70774,70802],{":tabs":1557},[212,70690,70692],{"className":334,"code":70691,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,70693,70694,70702,70710],{"__ignoreMap":178},[220,70695,70696,70698,70700],{"class":222,"line":223},[220,70697,343],{"class":264},[220,70699,347],{"class":346},[220,70701,359],{"class":264},[220,70703,70704,70706,70708],{"class":222,"line":179},[220,70705,364],{"class":264},[220,70707,70669],{"class":346},[220,70709,386],{"class":264},[220,70711,70712,70714,70716],{"class":222,"line":389},[220,70713,402],{"class":264},[220,70715,347],{"class":346},[220,70717,359],{"class":264},[212,70719,70720],{"className":409,"code":70691,"language":411,"meta":178,"style":178},[99,70721,70722,70730,70738],{"__ignoreMap":178},[220,70723,70724,70726,70728],{"class":222,"line":223},[220,70725,343],{"class":264},[220,70727,347],{"class":420},[220,70729,359],{"class":264},[220,70731,70732,70734,70736],{"class":222,"line":179},[220,70733,364],{"class":264},[220,70735,70669],{"class":420},[220,70737,386],{"class":264},[220,70739,70740,70742,70744],{"class":222,"line":389},[220,70741,402],{"class":264},[220,70743,347],{"class":420},[220,70745,359],{"class":264},[212,70747,70748],{"className":2844,"code":70691,"language":2846,"meta":178,"style":178},[99,70749,70750,70758,70766],{"__ignoreMap":178},[220,70751,70752,70754,70756],{"class":222,"line":223},[220,70753,343],{"class":264},[220,70755,347],{"class":420},[220,70757,359],{"class":264},[220,70759,70760,70762,70764],{"class":222,"line":179},[220,70761,364],{"class":264},[220,70763,70669],{"class":420},[220,70765,386],{"class":264},[220,70767,70768,70770,70772],{"class":222,"line":389},[220,70769,402],{"class":264},[220,70771,347],{"class":420},[220,70773,359],{"class":264},[212,70775,70776],{"className":468,"code":70691,"language":469,"meta":178,"style":178},[99,70777,70778,70786,70794],{"__ignoreMap":178},[220,70779,70780,70782,70784],{"class":222,"line":223},[220,70781,343],{"class":264},[220,70783,347],{"class":420},[220,70785,359],{"class":264},[220,70787,70788,70790,70792],{"class":222,"line":179},[220,70789,364],{"class":264},[220,70791,70669],{"class":420},[220,70793,386],{"class":264},[220,70795,70796,70798,70800],{"class":222,"line":389},[220,70797,402],{"class":264},[220,70799,347],{"class":420},[220,70801,359],{"class":264},[212,70803,70805],{"className":251,"code":70804,"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,70806,70807,70817,70821,70835,70839,70848,70852],{"__ignoreMap":178},[220,70808,70809,70811,70813,70815],{"class":222,"line":223},[220,70810,261],{"class":260},[220,70812,11364],{"class":264},[220,70814,268],{"class":260},[220,70816,11369],{"class":230},[220,70818,70819],{"class":222,"line":179},[220,70820,647],{"emptyLinePlaceholder":194},[220,70822,70823,70825,70827,70829,70831,70833],{"class":222,"line":389},[220,70824,1735],{"class":260},[220,70826,1738],{"class":420},[220,70828,1741],{"class":260},[220,70830,1744],{"class":260},[220,70832,1747],{"class":226},[220,70834,1750],{"class":264},[220,70836,70837],{"class":222,"line":399},[220,70838,1765],{"class":264},[220,70840,70841,70843,70846],{"class":222,"line":644},[220,70842,1770],{"class":264},[220,70844,70845],{"class":230},"'SimplexNoise'",[220,70847,2465],{"class":264},[220,70849,70850],{"class":222,"line":650},[220,70851,1787],{"class":264},[220,70853,70854],{"class":222,"line":656},[220,70855,1792],{"class":264},[1504,70857,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":70859},[70860,70861],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":70669,"description":70677},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":70868,"title":70869,"body":70870,"category":32923,"componentType":25734,"description":70877,"extension":191,"meta":71107,"navigation":194,"path":71108,"requiresChild":32390,"seo":71109,"stem":71110,"__hash__":71111},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":70871,"toc":71103},[70872,70875,70878,70880,70882,70885,70887,71101],[11,70873,70869],{"id":70874},"sinewave",[15,70876,70877],{},"Animated wave with thickness and softness",[31771,70879],{"component":70869},[23,70881,31775],{"id":26391},[31777,70883],{":props":70884},"[{\"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,70886,31783],{"id":31782},[246,70888,70889,70929,70967,71005,71043],{":tabs":1557},[212,70890,70892],{"className":334,"code":70891,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,70893,70894,70902,70909,70917,70921],{"__ignoreMap":178},[220,70895,70896,70898,70900],{"class":222,"line":223},[220,70897,343],{"class":264},[220,70899,347],{"class":346},[220,70901,359],{"class":264},[220,70903,70904,70906],{"class":222,"line":179},[220,70905,364],{"class":264},[220,70907,70908],{"class":346},"SineWave\n",[220,70910,70911,70913,70915],{"class":222,"line":389},[220,70912,9487],{"class":226},[220,70914,353],{"class":264},[220,70916,9443],{"class":230},[220,70918,70919],{"class":222,"line":399},[220,70920,1234],{"class":264},[220,70922,70923,70925,70927],{"class":222,"line":644},[220,70924,402],{"class":264},[220,70926,347],{"class":346},[220,70928,359],{"class":264},[212,70930,70931],{"className":409,"code":70891,"language":411,"meta":178,"style":178},[99,70932,70933,70941,70947,70955,70959],{"__ignoreMap":178},[220,70934,70935,70937,70939],{"class":222,"line":223},[220,70936,343],{"class":264},[220,70938,347],{"class":420},[220,70940,359],{"class":264},[220,70942,70943,70945],{"class":222,"line":179},[220,70944,364],{"class":264},[220,70946,70908],{"class":420},[220,70948,70949,70951,70953],{"class":222,"line":389},[220,70950,9487],{"class":226},[220,70952,353],{"class":260},[220,70954,9443],{"class":230},[220,70956,70957],{"class":222,"line":399},[220,70958,1234],{"class":264},[220,70960,70961,70963,70965],{"class":222,"line":644},[220,70962,402],{"class":264},[220,70964,347],{"class":420},[220,70966,359],{"class":264},[212,70968,70969],{"className":2844,"code":70891,"language":2846,"meta":178,"style":178},[99,70970,70971,70979,70985,70993,70997],{"__ignoreMap":178},[220,70972,70973,70975,70977],{"class":222,"line":223},[220,70974,343],{"class":264},[220,70976,347],{"class":420},[220,70978,359],{"class":264},[220,70980,70981,70983],{"class":222,"line":179},[220,70982,364],{"class":264},[220,70984,70908],{"class":420},[220,70986,70987,70989,70991],{"class":222,"line":389},[220,70988,9487],{"class":226},[220,70990,353],{"class":264},[220,70992,9443],{"class":230},[220,70994,70995],{"class":222,"line":399},[220,70996,1234],{"class":264},[220,70998,70999,71001,71003],{"class":222,"line":644},[220,71000,402],{"class":264},[220,71002,347],{"class":420},[220,71004,359],{"class":264},[212,71006,71007],{"className":468,"code":70891,"language":469,"meta":178,"style":178},[99,71008,71009,71017,71023,71031,71035],{"__ignoreMap":178},[220,71010,71011,71013,71015],{"class":222,"line":223},[220,71012,343],{"class":264},[220,71014,347],{"class":420},[220,71016,359],{"class":264},[220,71018,71019,71021],{"class":222,"line":179},[220,71020,364],{"class":264},[220,71022,70908],{"class":420},[220,71024,71025,71027,71029],{"class":222,"line":389},[220,71026,9487],{"class":226},[220,71028,353],{"class":260},[220,71030,9443],{"class":230},[220,71032,71033],{"class":222,"line":399},[220,71034,1234],{"class":264},[220,71036,71037,71039,71041],{"class":222,"line":644},[220,71038,402],{"class":264},[220,71040,347],{"class":420},[220,71042,359],{"class":264},[212,71044,71046],{"className":251,"code":71045,"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,71047,71048,71058,71062,71076,71080,71093,71097],{"__ignoreMap":178},[220,71049,71050,71052,71054,71056],{"class":222,"line":223},[220,71051,261],{"class":260},[220,71053,11364],{"class":264},[220,71055,268],{"class":260},[220,71057,11369],{"class":230},[220,71059,71060],{"class":222,"line":179},[220,71061,647],{"emptyLinePlaceholder":194},[220,71063,71064,71066,71068,71070,71072,71074],{"class":222,"line":389},[220,71065,1735],{"class":260},[220,71067,1738],{"class":420},[220,71069,1741],{"class":260},[220,71071,1744],{"class":260},[220,71073,1747],{"class":226},[220,71075,1750],{"class":264},[220,71077,71078],{"class":222,"line":399},[220,71079,1765],{"class":264},[220,71081,71082,71084,71087,71089,71091],{"class":222,"line":644},[220,71083,1770],{"class":264},[220,71085,71086],{"class":230},"'SineWave'",[220,71088,1776],{"class":264},[220,71090,10021],{"class":230},[220,71092,1782],{"class":264},[220,71094,71095],{"class":222,"line":650},[220,71096,1787],{"class":264},[220,71098,71099],{"class":222,"line":656},[220,71100,1792],{"class":264},[1504,71102,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71104},[71105,71106],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":70869,"description":70877},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":71113,"title":71114,"body":71115,"category":33533,"componentType":25740,"description":71122,"extension":191,"meta":71383,"navigation":194,"path":71384,"requiresChild":194,"seo":71385,"stem":71386,"__hash__":71387},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":71116,"toc":71379},[71117,71120,71123,71125,71127,71130,71132,71377],[11,71118,71114],{"id":71119},"slicewipe",[15,71121,71122],{},"Slice the content into strips that slide away in alternating directions",[31771,71124],{"component":71114},[23,71126,31775],{"id":26391},[31777,71128],{":props":71129},"[{\"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,71131,31783],{"id":31782},[246,71133,71134,71179,71223,71267,71311],{":tabs":1557},[212,71135,71137],{"className":334,"code":71136,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,71138,71139,71147,71155,71163,71171],{"__ignoreMap":178},[220,71140,71141,71143,71145],{"class":222,"line":223},[220,71142,343],{"class":264},[220,71144,347],{"class":346},[220,71146,359],{"class":264},[220,71148,71149,71151,71153],{"class":222,"line":179},[220,71150,364],{"class":264},[220,71152,71114],{"class":346},[220,71154,359],{"class":264},[220,71156,71157,71159,71161],{"class":222,"line":389},[220,71158,2550],{"class":264},[220,71160,2553],{"class":346},[220,71162,386],{"class":264},[220,71164,71165,71167,71169],{"class":222,"line":399},[220,71166,2567],{"class":264},[220,71168,71114],{"class":346},[220,71170,359],{"class":264},[220,71172,71173,71175,71177],{"class":222,"line":644},[220,71174,402],{"class":264},[220,71176,347],{"class":346},[220,71178,359],{"class":264},[212,71180,71181],{"className":409,"code":71136,"language":411,"meta":178,"style":178},[99,71182,71183,71191,71199,71207,71215],{"__ignoreMap":178},[220,71184,71185,71187,71189],{"class":222,"line":223},[220,71186,343],{"class":264},[220,71188,347],{"class":420},[220,71190,359],{"class":264},[220,71192,71193,71195,71197],{"class":222,"line":179},[220,71194,364],{"class":264},[220,71196,71114],{"class":420},[220,71198,359],{"class":264},[220,71200,71201,71203,71205],{"class":222,"line":389},[220,71202,2550],{"class":264},[220,71204,2553],{"class":420},[220,71206,386],{"class":264},[220,71208,71209,71211,71213],{"class":222,"line":399},[220,71210,2567],{"class":264},[220,71212,71114],{"class":420},[220,71214,359],{"class":264},[220,71216,71217,71219,71221],{"class":222,"line":644},[220,71218,402],{"class":264},[220,71220,347],{"class":420},[220,71222,359],{"class":264},[212,71224,71225],{"className":2844,"code":71136,"language":2846,"meta":178,"style":178},[99,71226,71227,71235,71243,71251,71259],{"__ignoreMap":178},[220,71228,71229,71231,71233],{"class":222,"line":223},[220,71230,343],{"class":264},[220,71232,347],{"class":420},[220,71234,359],{"class":264},[220,71236,71237,71239,71241],{"class":222,"line":179},[220,71238,364],{"class":264},[220,71240,71114],{"class":420},[220,71242,359],{"class":264},[220,71244,71245,71247,71249],{"class":222,"line":389},[220,71246,2550],{"class":264},[220,71248,2553],{"class":420},[220,71250,386],{"class":264},[220,71252,71253,71255,71257],{"class":222,"line":399},[220,71254,2567],{"class":264},[220,71256,71114],{"class":420},[220,71258,359],{"class":264},[220,71260,71261,71263,71265],{"class":222,"line":644},[220,71262,402],{"class":264},[220,71264,347],{"class":420},[220,71266,359],{"class":264},[212,71268,71269],{"className":468,"code":71136,"language":469,"meta":178,"style":178},[99,71270,71271,71279,71287,71295,71303],{"__ignoreMap":178},[220,71272,71273,71275,71277],{"class":222,"line":223},[220,71274,343],{"class":264},[220,71276,347],{"class":420},[220,71278,359],{"class":264},[220,71280,71281,71283,71285],{"class":222,"line":179},[220,71282,364],{"class":264},[220,71284,71114],{"class":420},[220,71286,359],{"class":264},[220,71288,71289,71291,71293],{"class":222,"line":389},[220,71290,2550],{"class":264},[220,71292,2553],{"class":420},[220,71294,386],{"class":264},[220,71296,71297,71299,71301],{"class":222,"line":399},[220,71298,2567],{"class":264},[220,71300,71114],{"class":420},[220,71302,359],{"class":264},[220,71304,71305,71307,71309],{"class":222,"line":644},[220,71306,402],{"class":264},[220,71308,347],{"class":420},[220,71310,359],{"class":264},[212,71312,71314],{"className":251,"code":71313,"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,71315,71316,71326,71330,71344,71348,71357,71365,71369,71373],{"__ignoreMap":178},[220,71317,71318,71320,71322,71324],{"class":222,"line":223},[220,71319,261],{"class":260},[220,71321,11364],{"class":264},[220,71323,268],{"class":260},[220,71325,11369],{"class":230},[220,71327,71328],{"class":222,"line":179},[220,71329,647],{"emptyLinePlaceholder":194},[220,71331,71332,71334,71336,71338,71340,71342],{"class":222,"line":389},[220,71333,1735],{"class":260},[220,71335,1738],{"class":420},[220,71337,1741],{"class":260},[220,71339,1744],{"class":260},[220,71341,1747],{"class":226},[220,71343,1750],{"class":264},[220,71345,71346],{"class":222,"line":399},[220,71347,1765],{"class":264},[220,71349,71350,71352,71355],{"class":222,"line":644},[220,71351,1770],{"class":264},[220,71353,71354],{"class":230},"'SliceWipe'",[220,71356,6860],{"class":264},[220,71358,71359,71361,71363],{"class":222,"line":650},[220,71360,6865],{"class":264},[220,71362,6409],{"class":230},[220,71364,2465],{"class":264},[220,71366,71367],{"class":222,"line":656},[220,71368,6882],{"class":264},[220,71370,71371],{"class":222,"line":673},[220,71372,1787],{"class":264},[220,71374,71375],{"class":222,"line":682},[220,71376,1792],{"class":264},[1504,71378,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":71380},[71381,71382],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":71114,"description":71122},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":71389,"title":71390,"body":71391,"category":35419,"componentType":25734,"description":71398,"extension":191,"meta":71639,"navigation":194,"path":71640,"requiresChild":32390,"seo":71641,"stem":71642,"__hash__":71643},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":71392,"toc":71635},[71393,71396,71399,71401,71403,71406,71408,71633],[11,71394,71390],{"id":71395},"smoke",[15,71397,71398],{},"Realistic fluid smoke simulation with vorticity dynamics",[31771,71400],{"component":71390},[23,71402,31775],{"id":26391},[31777,71404],{":props":71405},"[{\"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,71407,31783],{"id":31782},[246,71409,71410,71450,71493,71533,71575],{":tabs":1557},[212,71411,71413],{"className":334,"code":71412,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71414,71415,71423,71430,71438,71442],{"__ignoreMap":178},[220,71416,71417,71419,71421],{"class":222,"line":223},[220,71418,343],{"class":264},[220,71420,347],{"class":346},[220,71422,359],{"class":264},[220,71424,71425,71427],{"class":222,"line":179},[220,71426,364],{"class":264},[220,71428,71429],{"class":346},"Smoke\n",[220,71431,71432,71434,71436],{"class":222,"line":389},[220,71433,20228],{"class":226},[220,71435,353],{"class":264},[220,71437,36485],{"class":230},[220,71439,71440],{"class":222,"line":399},[220,71441,1234],{"class":264},[220,71443,71444,71446,71448],{"class":222,"line":644},[220,71445,402],{"class":264},[220,71447,347],{"class":346},[220,71449,359],{"class":264},[212,71451,71453],{"className":409,"code":71452,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71454,71455,71463,71469,71481,71485],{"__ignoreMap":178},[220,71456,71457,71459,71461],{"class":222,"line":223},[220,71458,343],{"class":264},[220,71460,347],{"class":420},[220,71462,359],{"class":264},[220,71464,71465,71467],{"class":222,"line":179},[220,71466,364],{"class":264},[220,71468,71429],{"class":420},[220,71470,71471,71473,71475,71477,71479],{"class":222,"line":389},[220,71472,20339],{"class":226},[220,71474,353],{"class":260},[220,71476,743],{"class":264},[220,71478,8528],{"class":420},[220,71480,749],{"class":264},[220,71482,71483],{"class":222,"line":399},[220,71484,1234],{"class":264},[220,71486,71487,71489,71491],{"class":222,"line":644},[220,71488,402],{"class":264},[220,71490,347],{"class":420},[220,71492,359],{"class":264},[212,71494,71495],{"className":2844,"code":71452,"language":2846,"meta":178,"style":178},[99,71496,71497,71505,71511,71521,71525],{"__ignoreMap":178},[220,71498,71499,71501,71503],{"class":222,"line":223},[220,71500,343],{"class":264},[220,71502,347],{"class":420},[220,71504,359],{"class":264},[220,71506,71507,71509],{"class":222,"line":179},[220,71508,364],{"class":264},[220,71510,71429],{"class":420},[220,71512,71513,71515,71517,71519],{"class":222,"line":389},[220,71514,20339],{"class":226},[220,71516,29729],{"class":264},[220,71518,8528],{"class":420},[220,71520,749],{"class":264},[220,71522,71523],{"class":222,"line":399},[220,71524,1234],{"class":264},[220,71526,71527,71529,71531],{"class":222,"line":644},[220,71528,402],{"class":264},[220,71530,347],{"class":420},[220,71532,359],{"class":264},[212,71534,71535],{"className":468,"code":71452,"language":469,"meta":178,"style":178},[99,71536,71537,71545,71551,71563,71567],{"__ignoreMap":178},[220,71538,71539,71541,71543],{"class":222,"line":223},[220,71540,343],{"class":264},[220,71542,347],{"class":420},[220,71544,359],{"class":264},[220,71546,71547,71549],{"class":222,"line":179},[220,71548,364],{"class":264},[220,71550,71429],{"class":420},[220,71552,71553,71555,71557,71559,71561],{"class":222,"line":389},[220,71554,20339],{"class":226},[220,71556,353],{"class":260},[220,71558,743],{"class":264},[220,71560,8528],{"class":420},[220,71562,749],{"class":264},[220,71564,71565],{"class":222,"line":399},[220,71566,1234],{"class":264},[220,71568,71569,71571,71573],{"class":222,"line":644},[220,71570,402],{"class":264},[220,71572,347],{"class":420},[220,71574,359],{"class":264},[212,71576,71578],{"className":251,"code":71577,"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,71579,71580,71590,71594,71608,71612,71625,71629],{"__ignoreMap":178},[220,71581,71582,71584,71586,71588],{"class":222,"line":223},[220,71583,261],{"class":260},[220,71585,11364],{"class":264},[220,71587,268],{"class":260},[220,71589,11369],{"class":230},[220,71591,71592],{"class":222,"line":179},[220,71593,647],{"emptyLinePlaceholder":194},[220,71595,71596,71598,71600,71602,71604,71606],{"class":222,"line":389},[220,71597,1735],{"class":260},[220,71599,1738],{"class":420},[220,71601,1741],{"class":260},[220,71603,1744],{"class":260},[220,71605,1747],{"class":226},[220,71607,1750],{"class":264},[220,71609,71610],{"class":222,"line":399},[220,71611,1765],{"class":264},[220,71613,71614,71616,71619,71621,71623],{"class":222,"line":644},[220,71615,1770],{"class":264},[220,71617,71618],{"class":230},"'Smoke'",[220,71620,32063],{"class":264},[220,71622,8528],{"class":420},[220,71624,1782],{"class":264},[220,71626,71627],{"class":222,"line":650},[220,71628,1787],{"class":264},[220,71630,71631],{"class":222,"line":656},[220,71632,1792],{"class":264},[1504,71634,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71636},[71637,71638],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":71390,"description":71398},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":71645,"title":23033,"body":71646,"category":36429,"componentType":25734,"description":71653,"extension":191,"meta":71894,"navigation":194,"path":71895,"requiresChild":32390,"seo":71896,"stem":71897,"__hash__":71898},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":71647,"toc":71890},[71648,71651,71654,71656,71658,71661,71663,71888],[11,71649,23033],{"id":71650},"smokefill",[15,71652,71653],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31771,71655],{"component":23033},[23,71657,31775],{"id":26391},[31777,71659],{":props":71660},"[{\"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,71662,31783],{"id":31782},[246,71664,71665,71705,71748,71788,71830],{":tabs":1557},[212,71666,71668],{"className":334,"code":71667,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71669,71670,71678,71685,71693,71697],{"__ignoreMap":178},[220,71671,71672,71674,71676],{"class":222,"line":223},[220,71673,343],{"class":264},[220,71675,347],{"class":346},[220,71677,359],{"class":264},[220,71679,71680,71682],{"class":222,"line":179},[220,71681,364],{"class":264},[220,71683,71684],{"class":346},"SmokeFill\n",[220,71686,71687,71689,71691],{"class":222,"line":389},[220,71688,20228],{"class":226},[220,71690,353],{"class":264},[220,71692,36485],{"class":230},[220,71694,71695],{"class":222,"line":399},[220,71696,1234],{"class":264},[220,71698,71699,71701,71703],{"class":222,"line":644},[220,71700,402],{"class":264},[220,71702,347],{"class":346},[220,71704,359],{"class":264},[212,71706,71708],{"className":409,"code":71707,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71709,71710,71718,71724,71736,71740],{"__ignoreMap":178},[220,71711,71712,71714,71716],{"class":222,"line":223},[220,71713,343],{"class":264},[220,71715,347],{"class":420},[220,71717,359],{"class":264},[220,71719,71720,71722],{"class":222,"line":179},[220,71721,364],{"class":264},[220,71723,71684],{"class":420},[220,71725,71726,71728,71730,71732,71734],{"class":222,"line":389},[220,71727,20339],{"class":226},[220,71729,353],{"class":260},[220,71731,743],{"class":264},[220,71733,8528],{"class":420},[220,71735,749],{"class":264},[220,71737,71738],{"class":222,"line":399},[220,71739,1234],{"class":264},[220,71741,71742,71744,71746],{"class":222,"line":644},[220,71743,402],{"class":264},[220,71745,347],{"class":420},[220,71747,359],{"class":264},[212,71749,71750],{"className":2844,"code":71707,"language":2846,"meta":178,"style":178},[99,71751,71752,71760,71766,71776,71780],{"__ignoreMap":178},[220,71753,71754,71756,71758],{"class":222,"line":223},[220,71755,343],{"class":264},[220,71757,347],{"class":420},[220,71759,359],{"class":264},[220,71761,71762,71764],{"class":222,"line":179},[220,71763,364],{"class":264},[220,71765,71684],{"class":420},[220,71767,71768,71770,71772,71774],{"class":222,"line":389},[220,71769,20339],{"class":226},[220,71771,29729],{"class":264},[220,71773,8528],{"class":420},[220,71775,749],{"class":264},[220,71777,71778],{"class":222,"line":399},[220,71779,1234],{"class":264},[220,71781,71782,71784,71786],{"class":222,"line":644},[220,71783,402],{"class":264},[220,71785,347],{"class":420},[220,71787,359],{"class":264},[212,71789,71790],{"className":468,"code":71707,"language":469,"meta":178,"style":178},[99,71791,71792,71800,71806,71818,71822],{"__ignoreMap":178},[220,71793,71794,71796,71798],{"class":222,"line":223},[220,71795,343],{"class":264},[220,71797,347],{"class":420},[220,71799,359],{"class":264},[220,71801,71802,71804],{"class":222,"line":179},[220,71803,364],{"class":264},[220,71805,71684],{"class":420},[220,71807,71808,71810,71812,71814,71816],{"class":222,"line":389},[220,71809,20339],{"class":226},[220,71811,353],{"class":260},[220,71813,743],{"class":264},[220,71815,8528],{"class":420},[220,71817,749],{"class":264},[220,71819,71820],{"class":222,"line":399},[220,71821,1234],{"class":264},[220,71823,71824,71826,71828],{"class":222,"line":644},[220,71825,402],{"class":264},[220,71827,347],{"class":420},[220,71829,359],{"class":264},[212,71831,71833],{"className":251,"code":71832,"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,71834,71835,71845,71849,71863,71867,71880,71884],{"__ignoreMap":178},[220,71836,71837,71839,71841,71843],{"class":222,"line":223},[220,71838,261],{"class":260},[220,71840,11364],{"class":264},[220,71842,268],{"class":260},[220,71844,11369],{"class":230},[220,71846,71847],{"class":222,"line":179},[220,71848,647],{"emptyLinePlaceholder":194},[220,71850,71851,71853,71855,71857,71859,71861],{"class":222,"line":389},[220,71852,1735],{"class":260},[220,71854,1738],{"class":420},[220,71856,1741],{"class":260},[220,71858,1744],{"class":260},[220,71860,1747],{"class":226},[220,71862,1750],{"class":264},[220,71864,71865],{"class":222,"line":399},[220,71866,1765],{"class":264},[220,71868,71869,71871,71874,71876,71878],{"class":222,"line":644},[220,71870,1770],{"class":264},[220,71872,71873],{"class":230},"'SmokeFill'",[220,71875,32063],{"class":264},[220,71877,8528],{"class":420},[220,71879,1782],{"class":264},[220,71881,71882],{"class":222,"line":650},[220,71883,1787],{"class":264},[220,71885,71886],{"class":222,"line":656},[220,71887,1792],{"class":264},[1504,71889,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71891},[71892,71893],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":23033,"description":71653},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":71900,"title":71901,"body":71902,"category":35419,"componentType":25734,"description":71909,"extension":191,"meta":72150,"navigation":194,"path":72151,"requiresChild":32390,"seo":72152,"stem":72153,"__hash__":72154},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":71903,"toc":72146},[71904,71907,71910,71912,71914,71917,71919,72144],[11,71905,71901],{"id":71906},"smokeflow",[15,71908,71909],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31771,71911],{"component":71901},[23,71913,31775],{"id":26391},[31777,71915],{":props":71916},"[{\"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,71918,31783],{"id":31782},[246,71920,71921,71961,72004,72044,72086],{":tabs":1557},[212,71922,71924],{"className":334,"code":71923,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71925,71926,71934,71941,71949,71953],{"__ignoreMap":178},[220,71927,71928,71930,71932],{"class":222,"line":223},[220,71929,343],{"class":264},[220,71931,347],{"class":346},[220,71933,359],{"class":264},[220,71935,71936,71938],{"class":222,"line":179},[220,71937,364],{"class":264},[220,71939,71940],{"class":346},"SmokeFlow\n",[220,71942,71943,71945,71947],{"class":222,"line":389},[220,71944,20228],{"class":226},[220,71946,353],{"class":264},[220,71948,36485],{"class":230},[220,71950,71951],{"class":222,"line":399},[220,71952,1234],{"class":264},[220,71954,71955,71957,71959],{"class":222,"line":644},[220,71956,402],{"class":264},[220,71958,347],{"class":346},[220,71960,359],{"class":264},[212,71962,71964],{"className":409,"code":71963,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71965,71966,71974,71980,71992,71996],{"__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,71940],{"class":420},[220,71981,71982,71984,71986,71988,71990],{"class":222,"line":389},[220,71983,20339],{"class":226},[220,71985,353],{"class":260},[220,71987,743],{"class":264},[220,71989,8528],{"class":420},[220,71991,749],{"class":264},[220,71993,71994],{"class":222,"line":399},[220,71995,1234],{"class":264},[220,71997,71998,72000,72002],{"class":222,"line":644},[220,71999,402],{"class":264},[220,72001,347],{"class":420},[220,72003,359],{"class":264},[212,72005,72006],{"className":2844,"code":71963,"language":2846,"meta":178,"style":178},[99,72007,72008,72016,72022,72032,72036],{"__ignoreMap":178},[220,72009,72010,72012,72014],{"class":222,"line":223},[220,72011,343],{"class":264},[220,72013,347],{"class":420},[220,72015,359],{"class":264},[220,72017,72018,72020],{"class":222,"line":179},[220,72019,364],{"class":264},[220,72021,71940],{"class":420},[220,72023,72024,72026,72028,72030],{"class":222,"line":389},[220,72025,20339],{"class":226},[220,72027,29729],{"class":264},[220,72029,8528],{"class":420},[220,72031,749],{"class":264},[220,72033,72034],{"class":222,"line":399},[220,72035,1234],{"class":264},[220,72037,72038,72040,72042],{"class":222,"line":644},[220,72039,402],{"class":264},[220,72041,347],{"class":420},[220,72043,359],{"class":264},[212,72045,72046],{"className":468,"code":71963,"language":469,"meta":178,"style":178},[99,72047,72048,72056,72062,72074,72078],{"__ignoreMap":178},[220,72049,72050,72052,72054],{"class":222,"line":223},[220,72051,343],{"class":264},[220,72053,347],{"class":420},[220,72055,359],{"class":264},[220,72057,72058,72060],{"class":222,"line":179},[220,72059,364],{"class":264},[220,72061,71940],{"class":420},[220,72063,72064,72066,72068,72070,72072],{"class":222,"line":389},[220,72065,20339],{"class":226},[220,72067,353],{"class":260},[220,72069,743],{"class":264},[220,72071,8528],{"class":420},[220,72073,749],{"class":264},[220,72075,72076],{"class":222,"line":399},[220,72077,1234],{"class":264},[220,72079,72080,72082,72084],{"class":222,"line":644},[220,72081,402],{"class":264},[220,72083,347],{"class":420},[220,72085,359],{"class":264},[212,72087,72089],{"className":251,"code":72088,"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,72090,72091,72101,72105,72119,72123,72136,72140],{"__ignoreMap":178},[220,72092,72093,72095,72097,72099],{"class":222,"line":223},[220,72094,261],{"class":260},[220,72096,11364],{"class":264},[220,72098,268],{"class":260},[220,72100,11369],{"class":230},[220,72102,72103],{"class":222,"line":179},[220,72104,647],{"emptyLinePlaceholder":194},[220,72106,72107,72109,72111,72113,72115,72117],{"class":222,"line":389},[220,72108,1735],{"class":260},[220,72110,1738],{"class":420},[220,72112,1741],{"class":260},[220,72114,1744],{"class":260},[220,72116,1747],{"class":226},[220,72118,1750],{"class":264},[220,72120,72121],{"class":222,"line":399},[220,72122,1765],{"class":264},[220,72124,72125,72127,72130,72132,72134],{"class":222,"line":644},[220,72126,1770],{"class":264},[220,72128,72129],{"class":230},"'SmokeFlow'",[220,72131,32063],{"class":264},[220,72133,8528],{"class":420},[220,72135,1782],{"class":264},[220,72137,72138],{"class":222,"line":650},[220,72139,1787],{"class":264},[220,72141,72142],{"class":222,"line":656},[220,72143,1792],{"class":264},[1504,72145,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72147},[72148,72149],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":71901,"description":71909},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":72156,"title":72157,"body":72158,"category":36228,"componentType":25740,"description":72165,"extension":191,"meta":72426,"navigation":194,"path":72427,"requiresChild":194,"seo":72428,"stem":72429,"__hash__":72430},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":72159,"toc":72422},[72160,72163,72166,72168,72170,72173,72175,72420],[11,72161,72157],{"id":72162},"solarize",[15,72164,72165],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31771,72167],{"component":72157},[23,72169,31775],{"id":26391},[31777,72171],{":props":72172},"[{\"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,72174,31783],{"id":31782},[246,72176,72177,72222,72266,72310,72354],{":tabs":1557},[212,72178,72180],{"className":334,"code":72179,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,72181,72182,72190,72198,72206,72214],{"__ignoreMap":178},[220,72183,72184,72186,72188],{"class":222,"line":223},[220,72185,343],{"class":264},[220,72187,347],{"class":346},[220,72189,359],{"class":264},[220,72191,72192,72194,72196],{"class":222,"line":179},[220,72193,364],{"class":264},[220,72195,72157],{"class":346},[220,72197,359],{"class":264},[220,72199,72200,72202,72204],{"class":222,"line":389},[220,72201,2550],{"class":264},[220,72203,2553],{"class":346},[220,72205,386],{"class":264},[220,72207,72208,72210,72212],{"class":222,"line":399},[220,72209,2567],{"class":264},[220,72211,72157],{"class":346},[220,72213,359],{"class":264},[220,72215,72216,72218,72220],{"class":222,"line":644},[220,72217,402],{"class":264},[220,72219,347],{"class":346},[220,72221,359],{"class":264},[212,72223,72224],{"className":409,"code":72179,"language":411,"meta":178,"style":178},[99,72225,72226,72234,72242,72250,72258],{"__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,72240],{"class":222,"line":179},[220,72237,364],{"class":264},[220,72239,72157],{"class":420},[220,72241,359],{"class":264},[220,72243,72244,72246,72248],{"class":222,"line":389},[220,72245,2550],{"class":264},[220,72247,2553],{"class":420},[220,72249,386],{"class":264},[220,72251,72252,72254,72256],{"class":222,"line":399},[220,72253,2567],{"class":264},[220,72255,72157],{"class":420},[220,72257,359],{"class":264},[220,72259,72260,72262,72264],{"class":222,"line":644},[220,72261,402],{"class":264},[220,72263,347],{"class":420},[220,72265,359],{"class":264},[212,72267,72268],{"className":2844,"code":72179,"language":2846,"meta":178,"style":178},[99,72269,72270,72278,72286,72294,72302],{"__ignoreMap":178},[220,72271,72272,72274,72276],{"class":222,"line":223},[220,72273,343],{"class":264},[220,72275,347],{"class":420},[220,72277,359],{"class":264},[220,72279,72280,72282,72284],{"class":222,"line":179},[220,72281,364],{"class":264},[220,72283,72157],{"class":420},[220,72285,359],{"class":264},[220,72287,72288,72290,72292],{"class":222,"line":389},[220,72289,2550],{"class":264},[220,72291,2553],{"class":420},[220,72293,386],{"class":264},[220,72295,72296,72298,72300],{"class":222,"line":399},[220,72297,2567],{"class":264},[220,72299,72157],{"class":420},[220,72301,359],{"class":264},[220,72303,72304,72306,72308],{"class":222,"line":644},[220,72305,402],{"class":264},[220,72307,347],{"class":420},[220,72309,359],{"class":264},[212,72311,72312],{"className":468,"code":72179,"language":469,"meta":178,"style":178},[99,72313,72314,72322,72330,72338,72346],{"__ignoreMap":178},[220,72315,72316,72318,72320],{"class":222,"line":223},[220,72317,343],{"class":264},[220,72319,347],{"class":420},[220,72321,359],{"class":264},[220,72323,72324,72326,72328],{"class":222,"line":179},[220,72325,364],{"class":264},[220,72327,72157],{"class":420},[220,72329,359],{"class":264},[220,72331,72332,72334,72336],{"class":222,"line":389},[220,72333,2550],{"class":264},[220,72335,2553],{"class":420},[220,72337,386],{"class":264},[220,72339,72340,72342,72344],{"class":222,"line":399},[220,72341,2567],{"class":264},[220,72343,72157],{"class":420},[220,72345,359],{"class":264},[220,72347,72348,72350,72352],{"class":222,"line":644},[220,72349,402],{"class":264},[220,72351,347],{"class":420},[220,72353,359],{"class":264},[212,72355,72357],{"className":251,"code":72356,"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,72358,72359,72369,72373,72387,72391,72400,72408,72412,72416],{"__ignoreMap":178},[220,72360,72361,72363,72365,72367],{"class":222,"line":223},[220,72362,261],{"class":260},[220,72364,11364],{"class":264},[220,72366,268],{"class":260},[220,72368,11369],{"class":230},[220,72370,72371],{"class":222,"line":179},[220,72372,647],{"emptyLinePlaceholder":194},[220,72374,72375,72377,72379,72381,72383,72385],{"class":222,"line":389},[220,72376,1735],{"class":260},[220,72378,1738],{"class":420},[220,72380,1741],{"class":260},[220,72382,1744],{"class":260},[220,72384,1747],{"class":226},[220,72386,1750],{"class":264},[220,72388,72389],{"class":222,"line":399},[220,72390,1765],{"class":264},[220,72392,72393,72395,72398],{"class":222,"line":644},[220,72394,1770],{"class":264},[220,72396,72397],{"class":230},"'Solarize'",[220,72399,6860],{"class":264},[220,72401,72402,72404,72406],{"class":222,"line":650},[220,72403,6865],{"class":264},[220,72405,6409],{"class":230},[220,72407,2465],{"class":264},[220,72409,72410],{"class":222,"line":656},[220,72411,6882],{"class":264},[220,72413,72414],{"class":222,"line":673},[220,72415,1787],{"class":264},[220,72417,72418],{"class":222,"line":682},[220,72419,1792],{"class":264},[1504,72421,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":72423},[72424,72425],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":72157,"description":72165},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":72432,"title":1585,"body":72433,"category":32923,"componentType":25734,"description":72440,"extension":191,"meta":72670,"navigation":194,"path":72671,"requiresChild":32390,"seo":72672,"stem":72673,"__hash__":72674},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":72434,"toc":72666},[72435,72438,72441,72443,72445,72448,72450,72664],[11,72436,1585],{"id":72437},"solidcolor",[15,72439,72440],{},"Fill the canvas with a single solid color",[31771,72442],{"component":1585},[23,72444,31775],{"id":26391},[31777,72446],{":props":72447},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,72449,31783],{"id":31782},[246,72451,72452,72493,72531,72569,72607],{":tabs":1557},[212,72453,72455],{"className":334,"code":72454,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,72456,72457,72465,72472,72481,72485],{"__ignoreMap":178},[220,72458,72459,72461,72463],{"class":222,"line":223},[220,72460,343],{"class":264},[220,72462,347],{"class":346},[220,72464,359],{"class":264},[220,72466,72467,72469],{"class":222,"line":179},[220,72468,364],{"class":264},[220,72470,72471],{"class":346},"SolidColor\n",[220,72473,72474,72476,72478],{"class":222,"line":389},[220,72475,9487],{"class":226},[220,72477,353],{"class":264},[220,72479,72480],{"class":230},"\"#5b18ca\"\n",[220,72482,72483],{"class":222,"line":399},[220,72484,1234],{"class":264},[220,72486,72487,72489,72491],{"class":222,"line":644},[220,72488,402],{"class":264},[220,72490,347],{"class":346},[220,72492,359],{"class":264},[212,72494,72495],{"className":409,"code":72454,"language":411,"meta":178,"style":178},[99,72496,72497,72505,72511,72519,72523],{"__ignoreMap":178},[220,72498,72499,72501,72503],{"class":222,"line":223},[220,72500,343],{"class":264},[220,72502,347],{"class":420},[220,72504,359],{"class":264},[220,72506,72507,72509],{"class":222,"line":179},[220,72508,364],{"class":264},[220,72510,72471],{"class":420},[220,72512,72513,72515,72517],{"class":222,"line":389},[220,72514,9487],{"class":226},[220,72516,353],{"class":260},[220,72518,72480],{"class":230},[220,72520,72521],{"class":222,"line":399},[220,72522,1234],{"class":264},[220,72524,72525,72527,72529],{"class":222,"line":644},[220,72526,402],{"class":264},[220,72528,347],{"class":420},[220,72530,359],{"class":264},[212,72532,72533],{"className":2844,"code":72454,"language":2846,"meta":178,"style":178},[99,72534,72535,72543,72549,72557,72561],{"__ignoreMap":178},[220,72536,72537,72539,72541],{"class":222,"line":223},[220,72538,343],{"class":264},[220,72540,347],{"class":420},[220,72542,359],{"class":264},[220,72544,72545,72547],{"class":222,"line":179},[220,72546,364],{"class":264},[220,72548,72471],{"class":420},[220,72550,72551,72553,72555],{"class":222,"line":389},[220,72552,9487],{"class":226},[220,72554,353],{"class":264},[220,72556,72480],{"class":230},[220,72558,72559],{"class":222,"line":399},[220,72560,1234],{"class":264},[220,72562,72563,72565,72567],{"class":222,"line":644},[220,72564,402],{"class":264},[220,72566,347],{"class":420},[220,72568,359],{"class":264},[212,72570,72571],{"className":468,"code":72454,"language":469,"meta":178,"style":178},[99,72572,72573,72581,72587,72595,72599],{"__ignoreMap":178},[220,72574,72575,72577,72579],{"class":222,"line":223},[220,72576,343],{"class":264},[220,72578,347],{"class":420},[220,72580,359],{"class":264},[220,72582,72583,72585],{"class":222,"line":179},[220,72584,364],{"class":264},[220,72586,72471],{"class":420},[220,72588,72589,72591,72593],{"class":222,"line":389},[220,72590,9487],{"class":226},[220,72592,353],{"class":260},[220,72594,72480],{"class":230},[220,72596,72597],{"class":222,"line":399},[220,72598,1234],{"class":264},[220,72600,72601,72603,72605],{"class":222,"line":644},[220,72602,402],{"class":264},[220,72604,347],{"class":420},[220,72606,359],{"class":264},[212,72608,72610],{"className":251,"code":72609,"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,72611,72612,72622,72626,72640,72644,72656,72660],{"__ignoreMap":178},[220,72613,72614,72616,72618,72620],{"class":222,"line":223},[220,72615,261],{"class":260},[220,72617,11364],{"class":264},[220,72619,268],{"class":260},[220,72621,11369],{"class":230},[220,72623,72624],{"class":222,"line":179},[220,72625,647],{"emptyLinePlaceholder":194},[220,72627,72628,72630,72632,72634,72636,72638],{"class":222,"line":389},[220,72629,1735],{"class":260},[220,72631,1738],{"class":420},[220,72633,1741],{"class":260},[220,72635,1744],{"class":260},[220,72637,1747],{"class":226},[220,72639,1750],{"class":264},[220,72641,72642],{"class":222,"line":399},[220,72643,1765],{"class":264},[220,72645,72646,72648,72650,72652,72654],{"class":222,"line":644},[220,72647,1770],{"class":264},[220,72649,1773],{"class":230},[220,72651,1776],{"class":264},[220,72653,1779],{"class":230},[220,72655,1782],{"class":264},[220,72657,72658],{"class":222,"line":650},[220,72659,1787],{"class":264},[220,72661,72662],{"class":222,"line":656},[220,72663,1792],{"class":264},[1504,72665,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72667},[72668,72669],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":72440},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":72676,"title":72677,"body":72678,"category":33256,"componentType":25740,"description":72685,"extension":191,"meta":73002,"navigation":194,"path":73003,"requiresChild":194,"seo":73004,"stem":73005,"__hash__":73006},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":72679,"toc":72998},[72680,72683,72686,72688,72690,72693,72695,72996],[11,72681,72677],{"id":72682},"spherize",[15,72684,72685],{},"Map content onto a 3D sphere surface with depth distortion",[31771,72687],{"component":72677},[23,72689,31775],{"id":26391},[31777,72691],{":props":72692},"[{\"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,72694,31783],{"id":31782},[246,72696,72697,72753,72812,72868,72926],{":tabs":1557},[212,72698,72700],{"className":334,"code":72699,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72701,72702,72710,72717,72725,72729,72737,72745],{"__ignoreMap":178},[220,72703,72704,72706,72708],{"class":222,"line":223},[220,72705,343],{"class":264},[220,72707,347],{"class":346},[220,72709,359],{"class":264},[220,72711,72712,72714],{"class":222,"line":179},[220,72713,364],{"class":264},[220,72715,72716],{"class":346},"Spherize\n",[220,72718,72719,72721,72723],{"class":222,"line":389},[220,72720,17262],{"class":226},[220,72722,353],{"class":264},[220,72724,36485],{"class":230},[220,72726,72727],{"class":222,"line":399},[220,72728,31819],{"class":264},[220,72730,72731,72733,72735],{"class":222,"line":644},[220,72732,2550],{"class":264},[220,72734,2553],{"class":346},[220,72736,386],{"class":264},[220,72738,72739,72741,72743],{"class":222,"line":650},[220,72740,2567],{"class":264},[220,72742,72677],{"class":346},[220,72744,359],{"class":264},[220,72746,72747,72749,72751],{"class":222,"line":656},[220,72748,402],{"class":264},[220,72750,347],{"class":346},[220,72752,359],{"class":264},[212,72754,72756],{"className":409,"code":72755,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,72757,72758,72766,72772,72784,72788,72796,72804],{"__ignoreMap":178},[220,72759,72760,72762,72764],{"class":222,"line":223},[220,72761,343],{"class":264},[220,72763,347],{"class":420},[220,72765,359],{"class":264},[220,72767,72768,72770],{"class":222,"line":179},[220,72769,364],{"class":264},[220,72771,72716],{"class":420},[220,72773,72774,72776,72778,72780,72782],{"class":222,"line":389},[220,72775,9497],{"class":226},[220,72777,353],{"class":260},[220,72779,743],{"class":264},[220,72781,8528],{"class":420},[220,72783,749],{"class":264},[220,72785,72786],{"class":222,"line":399},[220,72787,31819],{"class":264},[220,72789,72790,72792,72794],{"class":222,"line":644},[220,72791,2550],{"class":264},[220,72793,2553],{"class":420},[220,72795,386],{"class":264},[220,72797,72798,72800,72802],{"class":222,"line":650},[220,72799,2567],{"class":264},[220,72801,72677],{"class":420},[220,72803,359],{"class":264},[220,72805,72806,72808,72810],{"class":222,"line":656},[220,72807,402],{"class":264},[220,72809,347],{"class":420},[220,72811,359],{"class":264},[212,72813,72814],{"className":2844,"code":72755,"language":2846,"meta":178,"style":178},[99,72815,72816,72824,72830,72840,72844,72852,72860],{"__ignoreMap":178},[220,72817,72818,72820,72822],{"class":222,"line":223},[220,72819,343],{"class":264},[220,72821,347],{"class":420},[220,72823,359],{"class":264},[220,72825,72826,72828],{"class":222,"line":179},[220,72827,364],{"class":264},[220,72829,72716],{"class":420},[220,72831,72832,72834,72836,72838],{"class":222,"line":389},[220,72833,9497],{"class":226},[220,72835,29729],{"class":264},[220,72837,8528],{"class":420},[220,72839,749],{"class":264},[220,72841,72842],{"class":222,"line":399},[220,72843,31819],{"class":264},[220,72845,72846,72848,72850],{"class":222,"line":644},[220,72847,2550],{"class":264},[220,72849,2553],{"class":420},[220,72851,386],{"class":264},[220,72853,72854,72856,72858],{"class":222,"line":650},[220,72855,2567],{"class":264},[220,72857,72677],{"class":420},[220,72859,359],{"class":264},[220,72861,72862,72864,72866],{"class":222,"line":656},[220,72863,402],{"class":264},[220,72865,347],{"class":420},[220,72867,359],{"class":264},[212,72869,72870],{"className":468,"code":72755,"language":469,"meta":178,"style":178},[99,72871,72872,72880,72886,72898,72902,72910,72918],{"__ignoreMap":178},[220,72873,72874,72876,72878],{"class":222,"line":223},[220,72875,343],{"class":264},[220,72877,347],{"class":420},[220,72879,359],{"class":264},[220,72881,72882,72884],{"class":222,"line":179},[220,72883,364],{"class":264},[220,72885,72716],{"class":420},[220,72887,72888,72890,72892,72894,72896],{"class":222,"line":389},[220,72889,9497],{"class":226},[220,72891,353],{"class":260},[220,72893,743],{"class":264},[220,72895,8528],{"class":420},[220,72897,749],{"class":264},[220,72899,72900],{"class":222,"line":399},[220,72901,31819],{"class":264},[220,72903,72904,72906,72908],{"class":222,"line":644},[220,72905,2550],{"class":264},[220,72907,2553],{"class":420},[220,72909,386],{"class":264},[220,72911,72912,72914,72916],{"class":222,"line":650},[220,72913,2567],{"class":264},[220,72915,72677],{"class":420},[220,72917,359],{"class":264},[220,72919,72920,72922,72924],{"class":222,"line":656},[220,72921,402],{"class":264},[220,72923,347],{"class":420},[220,72925,359],{"class":264},[212,72927,72929],{"className":251,"code":72928,"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,72930,72931,72941,72945,72959,72963,72976,72984,72988,72992],{"__ignoreMap":178},[220,72932,72933,72935,72937,72939],{"class":222,"line":223},[220,72934,261],{"class":260},[220,72936,11364],{"class":264},[220,72938,268],{"class":260},[220,72940,11369],{"class":230},[220,72942,72943],{"class":222,"line":179},[220,72944,647],{"emptyLinePlaceholder":194},[220,72946,72947,72949,72951,72953,72955,72957],{"class":222,"line":389},[220,72948,1735],{"class":260},[220,72950,1738],{"class":420},[220,72952,1741],{"class":260},[220,72954,1744],{"class":260},[220,72956,1747],{"class":226},[220,72958,1750],{"class":264},[220,72960,72961],{"class":222,"line":399},[220,72962,1765],{"class":264},[220,72964,72965,72967,72970,72972,72974],{"class":222,"line":644},[220,72966,1770],{"class":264},[220,72968,72969],{"class":230},"'Spherize'",[220,72971,7392],{"class":264},[220,72973,8528],{"class":420},[220,72975,7397],{"class":264},[220,72977,72978,72980,72982],{"class":222,"line":650},[220,72979,6865],{"class":264},[220,72981,6409],{"class":230},[220,72983,2465],{"class":264},[220,72985,72986],{"class":222,"line":656},[220,72987,6882],{"class":264},[220,72989,72990],{"class":222,"line":673},[220,72991,1787],{"class":264},[220,72993,72994],{"class":222,"line":682},[220,72995,1792],{"class":264},[1504,72997,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72999},[73000,73001],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":72677,"description":72685},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":73008,"title":73009,"body":73010,"category":32923,"componentType":25734,"description":73017,"extension":191,"meta":73202,"navigation":194,"path":73203,"requiresChild":32390,"seo":73204,"stem":73205,"__hash__":73206},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":73011,"toc":73198},[73012,73015,73018,73020,73022,73025,73027,73196],[11,73013,73009],{"id":73014},"spiral",[15,73016,73017],{},"Rotating spiral pattern with animated movement",[31771,73019],{"component":73009},[23,73021,31775],{"id":26391},[31777,73023],{":props":73024},"[{\"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,73026,31783],{"id":31782},[246,73028,73029,73058,73086,73114,73142],{":tabs":1557},[212,73030,73032],{"className":334,"code":73031,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,73033,73034,73042,73050],{"__ignoreMap":178},[220,73035,73036,73038,73040],{"class":222,"line":223},[220,73037,343],{"class":264},[220,73039,347],{"class":346},[220,73041,359],{"class":264},[220,73043,73044,73046,73048],{"class":222,"line":179},[220,73045,364],{"class":264},[220,73047,73009],{"class":346},[220,73049,386],{"class":264},[220,73051,73052,73054,73056],{"class":222,"line":389},[220,73053,402],{"class":264},[220,73055,347],{"class":346},[220,73057,359],{"class":264},[212,73059,73060],{"className":409,"code":73031,"language":411,"meta":178,"style":178},[99,73061,73062,73070,73078],{"__ignoreMap":178},[220,73063,73064,73066,73068],{"class":222,"line":223},[220,73065,343],{"class":264},[220,73067,347],{"class":420},[220,73069,359],{"class":264},[220,73071,73072,73074,73076],{"class":222,"line":179},[220,73073,364],{"class":264},[220,73075,73009],{"class":420},[220,73077,386],{"class":264},[220,73079,73080,73082,73084],{"class":222,"line":389},[220,73081,402],{"class":264},[220,73083,347],{"class":420},[220,73085,359],{"class":264},[212,73087,73088],{"className":2844,"code":73031,"language":2846,"meta":178,"style":178},[99,73089,73090,73098,73106],{"__ignoreMap":178},[220,73091,73092,73094,73096],{"class":222,"line":223},[220,73093,343],{"class":264},[220,73095,347],{"class":420},[220,73097,359],{"class":264},[220,73099,73100,73102,73104],{"class":222,"line":179},[220,73101,364],{"class":264},[220,73103,73009],{"class":420},[220,73105,386],{"class":264},[220,73107,73108,73110,73112],{"class":222,"line":389},[220,73109,402],{"class":264},[220,73111,347],{"class":420},[220,73113,359],{"class":264},[212,73115,73116],{"className":468,"code":73031,"language":469,"meta":178,"style":178},[99,73117,73118,73126,73134],{"__ignoreMap":178},[220,73119,73120,73122,73124],{"class":222,"line":223},[220,73121,343],{"class":264},[220,73123,347],{"class":420},[220,73125,359],{"class":264},[220,73127,73128,73130,73132],{"class":222,"line":179},[220,73129,364],{"class":264},[220,73131,73009],{"class":420},[220,73133,386],{"class":264},[220,73135,73136,73138,73140],{"class":222,"line":389},[220,73137,402],{"class":264},[220,73139,347],{"class":420},[220,73141,359],{"class":264},[212,73143,73145],{"className":251,"code":73144,"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,73146,73147,73157,73161,73175,73179,73188,73192],{"__ignoreMap":178},[220,73148,73149,73151,73153,73155],{"class":222,"line":223},[220,73150,261],{"class":260},[220,73152,11364],{"class":264},[220,73154,268],{"class":260},[220,73156,11369],{"class":230},[220,73158,73159],{"class":222,"line":179},[220,73160,647],{"emptyLinePlaceholder":194},[220,73162,73163,73165,73167,73169,73171,73173],{"class":222,"line":389},[220,73164,1735],{"class":260},[220,73166,1738],{"class":420},[220,73168,1741],{"class":260},[220,73170,1744],{"class":260},[220,73172,1747],{"class":226},[220,73174,1750],{"class":264},[220,73176,73177],{"class":222,"line":399},[220,73178,1765],{"class":264},[220,73180,73181,73183,73186],{"class":222,"line":644},[220,73182,1770],{"class":264},[220,73184,73185],{"class":230},"'Spiral'",[220,73187,2465],{"class":264},[220,73189,73190],{"class":222,"line":650},[220,73191,1787],{"class":264},[220,73193,73194],{"class":222,"line":656},[220,73195,1792],{"class":264},[1504,73197,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":73199},[73200,73201],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":73009,"description":73017},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":73208,"title":73209,"body":73210,"category":15765,"componentType":25734,"description":73217,"extension":191,"meta":73494,"navigation":194,"path":73495,"requiresChild":32390,"seo":73496,"stem":73497,"__hash__":73498},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":73211,"toc":73490},[73212,73215,73218,73220,73222,73225,73227,73488],[11,73213,73209],{"id":73214},"star",[15,73216,73217],{},"Classic star polygon with straight sides and sharp pointed tips",[31771,73219],{"component":73209},[23,73221,31775],{"id":26391},[31777,73223],{":props":73224},"[{\"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,73226,31783],{"id":31782},[246,73228,73229,73277,73328,73376,73426],{":tabs":1557},[212,73230,73232],{"className":334,"code":73231,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,73233,73234,73242,73249,73257,73265,73269],{"__ignoreMap":178},[220,73235,73236,73238,73240],{"class":222,"line":223},[220,73237,343],{"class":264},[220,73239,347],{"class":346},[220,73241,359],{"class":264},[220,73243,73244,73246],{"class":222,"line":179},[220,73245,364],{"class":264},[220,73247,73248],{"class":346},"Star\n",[220,73250,73251,73253,73255],{"class":222,"line":389},[220,73252,9487],{"class":226},[220,73254,353],{"class":264},[220,73256,9443],{"class":230},[220,73258,73259,73261,73263],{"class":222,"line":399},[220,73260,17262],{"class":226},[220,73262,353],{"class":264},[220,73264,48208],{"class":230},[220,73266,73267],{"class":222,"line":644},[220,73268,1234],{"class":264},[220,73270,73271,73273,73275],{"class":222,"line":650},[220,73272,402],{"class":264},[220,73274,347],{"class":346},[220,73276,359],{"class":264},[212,73278,73280],{"className":409,"code":73279,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,73281,73282,73290,73296,73304,73316,73320],{"__ignoreMap":178},[220,73283,73284,73286,73288],{"class":222,"line":223},[220,73285,343],{"class":264},[220,73287,347],{"class":420},[220,73289,359],{"class":264},[220,73291,73292,73294],{"class":222,"line":179},[220,73293,364],{"class":264},[220,73295,73248],{"class":420},[220,73297,73298,73300,73302],{"class":222,"line":389},[220,73299,9487],{"class":226},[220,73301,353],{"class":260},[220,73303,9443],{"class":230},[220,73305,73306,73308,73310,73312,73314],{"class":222,"line":399},[220,73307,9497],{"class":226},[220,73309,353],{"class":260},[220,73311,743],{"class":264},[220,73313,8100],{"class":420},[220,73315,749],{"class":264},[220,73317,73318],{"class":222,"line":644},[220,73319,1234],{"class":264},[220,73321,73322,73324,73326],{"class":222,"line":650},[220,73323,402],{"class":264},[220,73325,347],{"class":420},[220,73327,359],{"class":264},[212,73329,73330],{"className":2844,"code":73279,"language":2846,"meta":178,"style":178},[99,73331,73332,73340,73346,73354,73364,73368],{"__ignoreMap":178},[220,73333,73334,73336,73338],{"class":222,"line":223},[220,73335,343],{"class":264},[220,73337,347],{"class":420},[220,73339,359],{"class":264},[220,73341,73342,73344],{"class":222,"line":179},[220,73343,364],{"class":264},[220,73345,73248],{"class":420},[220,73347,73348,73350,73352],{"class":222,"line":389},[220,73349,9487],{"class":226},[220,73351,353],{"class":264},[220,73353,9443],{"class":230},[220,73355,73356,73358,73360,73362],{"class":222,"line":399},[220,73357,9497],{"class":226},[220,73359,29729],{"class":264},[220,73361,8100],{"class":420},[220,73363,749],{"class":264},[220,73365,73366],{"class":222,"line":644},[220,73367,1234],{"class":264},[220,73369,73370,73372,73374],{"class":222,"line":650},[220,73371,402],{"class":264},[220,73373,347],{"class":420},[220,73375,359],{"class":264},[212,73377,73378],{"className":468,"code":73279,"language":469,"meta":178,"style":178},[99,73379,73380,73388,73394,73402,73414,73418],{"__ignoreMap":178},[220,73381,73382,73384,73386],{"class":222,"line":223},[220,73383,343],{"class":264},[220,73385,347],{"class":420},[220,73387,359],{"class":264},[220,73389,73390,73392],{"class":222,"line":179},[220,73391,364],{"class":264},[220,73393,73248],{"class":420},[220,73395,73396,73398,73400],{"class":222,"line":389},[220,73397,9487],{"class":226},[220,73399,353],{"class":260},[220,73401,9443],{"class":230},[220,73403,73404,73406,73408,73410,73412],{"class":222,"line":399},[220,73405,9497],{"class":226},[220,73407,353],{"class":260},[220,73409,743],{"class":264},[220,73411,8100],{"class":420},[220,73413,749],{"class":264},[220,73415,73416],{"class":222,"line":644},[220,73417,1234],{"class":264},[220,73419,73420,73422,73424],{"class":222,"line":650},[220,73421,402],{"class":264},[220,73423,347],{"class":420},[220,73425,359],{"class":264},[212,73427,73429],{"className":251,"code":73428,"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,73430,73431,73441,73445,73459,73463,73480,73484],{"__ignoreMap":178},[220,73432,73433,73435,73437,73439],{"class":222,"line":223},[220,73434,261],{"class":260},[220,73436,11364],{"class":264},[220,73438,268],{"class":260},[220,73440,11369],{"class":230},[220,73442,73443],{"class":222,"line":179},[220,73444,647],{"emptyLinePlaceholder":194},[220,73446,73447,73449,73451,73453,73455,73457],{"class":222,"line":389},[220,73448,1735],{"class":260},[220,73450,1738],{"class":420},[220,73452,1741],{"class":260},[220,73454,1744],{"class":260},[220,73456,1747],{"class":226},[220,73458,1750],{"class":264},[220,73460,73461],{"class":222,"line":399},[220,73462,1765],{"class":264},[220,73464,73465,73467,73470,73472,73474,73476,73478],{"class":222,"line":644},[220,73466,1770],{"class":264},[220,73468,73469],{"class":230},"'Star'",[220,73471,1776],{"class":264},[220,73473,10021],{"class":230},[220,73475,6417],{"class":264},[220,73477,8100],{"class":420},[220,73479,1782],{"class":264},[220,73481,73482],{"class":222,"line":650},[220,73483,1787],{"class":264},[220,73485,73486],{"class":222,"line":656},[220,73487,1792],{"class":264},[1504,73489,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73491},[73492,73493],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":73209,"description":73217},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":73500,"title":73501,"body":73502,"category":32666,"componentType":25740,"description":73509,"extension":191,"meta":73826,"navigation":194,"path":73827,"requiresChild":194,"seo":73828,"stem":73829,"__hash__":73830},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":73503,"toc":73822},[73504,73507,73510,73512,73514,73517,73519,73820],[11,73505,73501],{"id":73506},"stone",[15,73508,73509],{},"Applies a marbled stone relief and surface distortion to child content",[31771,73511],{"component":73501},[23,73513,31775],{"id":26391},[31777,73515],{":props":73516},"[{\"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,73518,31783],{"id":31782},[246,73520,73521,73577,73636,73692,73750],{":tabs":1557},[212,73522,73524],{"className":334,"code":73523,"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,73525,73526,73534,73541,73549,73553,73561,73569],{"__ignoreMap":178},[220,73527,73528,73530,73532],{"class":222,"line":223},[220,73529,343],{"class":264},[220,73531,347],{"class":346},[220,73533,359],{"class":264},[220,73535,73536,73538],{"class":222,"line":179},[220,73537,364],{"class":264},[220,73539,73540],{"class":346},"Stone\n",[220,73542,73543,73545,73547],{"class":222,"line":389},[220,73544,20228],{"class":226},[220,73546,353],{"class":264},[220,73548,42218],{"class":230},[220,73550,73551],{"class":222,"line":399},[220,73552,31819],{"class":264},[220,73554,73555,73557,73559],{"class":222,"line":644},[220,73556,2550],{"class":264},[220,73558,2553],{"class":346},[220,73560,386],{"class":264},[220,73562,73563,73565,73567],{"class":222,"line":650},[220,73564,2567],{"class":264},[220,73566,73501],{"class":346},[220,73568,359],{"class":264},[220,73570,73571,73573,73575],{"class":222,"line":656},[220,73572,402],{"class":264},[220,73574,347],{"class":346},[220,73576,359],{"class":264},[212,73578,73580],{"className":409,"code":73579,"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,73581,73582,73590,73596,73608,73612,73620,73628],{"__ignoreMap":178},[220,73583,73584,73586,73588],{"class":222,"line":223},[220,73585,343],{"class":264},[220,73587,347],{"class":420},[220,73589,359],{"class":264},[220,73591,73592,73594],{"class":222,"line":179},[220,73593,364],{"class":264},[220,73595,73540],{"class":420},[220,73597,73598,73600,73602,73604,73606],{"class":222,"line":389},[220,73599,20339],{"class":226},[220,73601,353],{"class":260},[220,73603,743],{"class":264},[220,73605,7605],{"class":420},[220,73607,749],{"class":264},[220,73609,73610],{"class":222,"line":399},[220,73611,31819],{"class":264},[220,73613,73614,73616,73618],{"class":222,"line":644},[220,73615,2550],{"class":264},[220,73617,2553],{"class":420},[220,73619,386],{"class":264},[220,73621,73622,73624,73626],{"class":222,"line":650},[220,73623,2567],{"class":264},[220,73625,73501],{"class":420},[220,73627,359],{"class":264},[220,73629,73630,73632,73634],{"class":222,"line":656},[220,73631,402],{"class":264},[220,73633,347],{"class":420},[220,73635,359],{"class":264},[212,73637,73638],{"className":2844,"code":73579,"language":2846,"meta":178,"style":178},[99,73639,73640,73648,73654,73664,73668,73676,73684],{"__ignoreMap":178},[220,73641,73642,73644,73646],{"class":222,"line":223},[220,73643,343],{"class":264},[220,73645,347],{"class":420},[220,73647,359],{"class":264},[220,73649,73650,73652],{"class":222,"line":179},[220,73651,364],{"class":264},[220,73653,73540],{"class":420},[220,73655,73656,73658,73660,73662],{"class":222,"line":389},[220,73657,20339],{"class":226},[220,73659,29729],{"class":264},[220,73661,7605],{"class":420},[220,73663,749],{"class":264},[220,73665,73666],{"class":222,"line":399},[220,73667,31819],{"class":264},[220,73669,73670,73672,73674],{"class":222,"line":644},[220,73671,2550],{"class":264},[220,73673,2553],{"class":420},[220,73675,386],{"class":264},[220,73677,73678,73680,73682],{"class":222,"line":650},[220,73679,2567],{"class":264},[220,73681,73501],{"class":420},[220,73683,359],{"class":264},[220,73685,73686,73688,73690],{"class":222,"line":656},[220,73687,402],{"class":264},[220,73689,347],{"class":420},[220,73691,359],{"class":264},[212,73693,73694],{"className":468,"code":73579,"language":469,"meta":178,"style":178},[99,73695,73696,73704,73710,73722,73726,73734,73742],{"__ignoreMap":178},[220,73697,73698,73700,73702],{"class":222,"line":223},[220,73699,343],{"class":264},[220,73701,347],{"class":420},[220,73703,359],{"class":264},[220,73705,73706,73708],{"class":222,"line":179},[220,73707,364],{"class":264},[220,73709,73540],{"class":420},[220,73711,73712,73714,73716,73718,73720],{"class":222,"line":389},[220,73713,20339],{"class":226},[220,73715,353],{"class":260},[220,73717,743],{"class":264},[220,73719,7605],{"class":420},[220,73721,749],{"class":264},[220,73723,73724],{"class":222,"line":399},[220,73725,31819],{"class":264},[220,73727,73728,73730,73732],{"class":222,"line":644},[220,73729,2550],{"class":264},[220,73731,2553],{"class":420},[220,73733,386],{"class":264},[220,73735,73736,73738,73740],{"class":222,"line":650},[220,73737,2567],{"class":264},[220,73739,73501],{"class":420},[220,73741,359],{"class":264},[220,73743,73744,73746,73748],{"class":222,"line":656},[220,73745,402],{"class":264},[220,73747,347],{"class":420},[220,73749,359],{"class":264},[212,73751,73753],{"className":251,"code":73752,"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,73754,73755,73765,73769,73783,73787,73800,73808,73812,73816],{"__ignoreMap":178},[220,73756,73757,73759,73761,73763],{"class":222,"line":223},[220,73758,261],{"class":260},[220,73760,11364],{"class":264},[220,73762,268],{"class":260},[220,73764,11369],{"class":230},[220,73766,73767],{"class":222,"line":179},[220,73768,647],{"emptyLinePlaceholder":194},[220,73770,73771,73773,73775,73777,73779,73781],{"class":222,"line":389},[220,73772,1735],{"class":260},[220,73774,1738],{"class":420},[220,73776,1741],{"class":260},[220,73778,1744],{"class":260},[220,73780,1747],{"class":226},[220,73782,1750],{"class":264},[220,73784,73785],{"class":222,"line":399},[220,73786,1765],{"class":264},[220,73788,73789,73791,73794,73796,73798],{"class":222,"line":644},[220,73790,1770],{"class":264},[220,73792,73793],{"class":230},"'Stone'",[220,73795,32063],{"class":264},[220,73797,7605],{"class":420},[220,73799,7397],{"class":264},[220,73801,73802,73804,73806],{"class":222,"line":650},[220,73803,6865],{"class":264},[220,73805,6409],{"class":230},[220,73807,2465],{"class":264},[220,73809,73810],{"class":222,"line":656},[220,73811,6882],{"class":264},[220,73813,73814],{"class":222,"line":673},[220,73815,1787],{"class":264},[220,73817,73818],{"class":222,"line":682},[220,73819,1792],{"class":264},[1504,73821,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73823},[73824,73825],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":73501,"description":73509},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":73832,"title":73833,"body":73834,"category":32923,"componentType":25734,"description":73841,"extension":191,"meta":74026,"navigation":194,"path":74027,"requiresChild":32390,"seo":74028,"stem":74029,"__hash__":74030},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":73835,"toc":74022},[73836,73839,73842,73844,73846,73849,73851,74020],[11,73837,73833],{"id":73838},"strands",[15,73840,73841],{},"Flowing ribbons of light with a multi-color gradient",[31771,73843],{"component":73833},[23,73845,31775],{"id":26391},[31777,73847],{":props":73848},"[{\"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,73850,31783],{"id":31782},[246,73852,73853,73882,73910,73938,73966],{":tabs":1557},[212,73854,73856],{"className":334,"code":73855,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,73857,73858,73866,73874],{"__ignoreMap":178},[220,73859,73860,73862,73864],{"class":222,"line":223},[220,73861,343],{"class":264},[220,73863,347],{"class":346},[220,73865,359],{"class":264},[220,73867,73868,73870,73872],{"class":222,"line":179},[220,73869,364],{"class":264},[220,73871,73833],{"class":346},[220,73873,386],{"class":264},[220,73875,73876,73878,73880],{"class":222,"line":389},[220,73877,402],{"class":264},[220,73879,347],{"class":346},[220,73881,359],{"class":264},[212,73883,73884],{"className":409,"code":73855,"language":411,"meta":178,"style":178},[99,73885,73886,73894,73902],{"__ignoreMap":178},[220,73887,73888,73890,73892],{"class":222,"line":223},[220,73889,343],{"class":264},[220,73891,347],{"class":420},[220,73893,359],{"class":264},[220,73895,73896,73898,73900],{"class":222,"line":179},[220,73897,364],{"class":264},[220,73899,73833],{"class":420},[220,73901,386],{"class":264},[220,73903,73904,73906,73908],{"class":222,"line":389},[220,73905,402],{"class":264},[220,73907,347],{"class":420},[220,73909,359],{"class":264},[212,73911,73912],{"className":2844,"code":73855,"language":2846,"meta":178,"style":178},[99,73913,73914,73922,73930],{"__ignoreMap":178},[220,73915,73916,73918,73920],{"class":222,"line":223},[220,73917,343],{"class":264},[220,73919,347],{"class":420},[220,73921,359],{"class":264},[220,73923,73924,73926,73928],{"class":222,"line":179},[220,73925,364],{"class":264},[220,73927,73833],{"class":420},[220,73929,386],{"class":264},[220,73931,73932,73934,73936],{"class":222,"line":389},[220,73933,402],{"class":264},[220,73935,347],{"class":420},[220,73937,359],{"class":264},[212,73939,73940],{"className":468,"code":73855,"language":469,"meta":178,"style":178},[99,73941,73942,73950,73958],{"__ignoreMap":178},[220,73943,73944,73946,73948],{"class":222,"line":223},[220,73945,343],{"class":264},[220,73947,347],{"class":420},[220,73949,359],{"class":264},[220,73951,73952,73954,73956],{"class":222,"line":179},[220,73953,364],{"class":264},[220,73955,73833],{"class":420},[220,73957,386],{"class":264},[220,73959,73960,73962,73964],{"class":222,"line":389},[220,73961,402],{"class":264},[220,73963,347],{"class":420},[220,73965,359],{"class":264},[212,73967,73969],{"className":251,"code":73968,"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,73970,73971,73981,73985,73999,74003,74012,74016],{"__ignoreMap":178},[220,73972,73973,73975,73977,73979],{"class":222,"line":223},[220,73974,261],{"class":260},[220,73976,11364],{"class":264},[220,73978,268],{"class":260},[220,73980,11369],{"class":230},[220,73982,73983],{"class":222,"line":179},[220,73984,647],{"emptyLinePlaceholder":194},[220,73986,73987,73989,73991,73993,73995,73997],{"class":222,"line":389},[220,73988,1735],{"class":260},[220,73990,1738],{"class":420},[220,73992,1741],{"class":260},[220,73994,1744],{"class":260},[220,73996,1747],{"class":226},[220,73998,1750],{"class":264},[220,74000,74001],{"class":222,"line":399},[220,74002,1765],{"class":264},[220,74004,74005,74007,74010],{"class":222,"line":644},[220,74006,1770],{"class":264},[220,74008,74009],{"class":230},"'Strands'",[220,74011,2465],{"class":264},[220,74013,74014],{"class":222,"line":650},[220,74015,1787],{"class":264},[220,74017,74018],{"class":222,"line":656},[220,74019,1792],{"class":264},[1504,74021,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":74023},[74024,74025],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":73833,"description":73841},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":74032,"title":74033,"body":74034,"category":33256,"componentType":25740,"description":74041,"extension":191,"meta":74302,"navigation":194,"path":74303,"requiresChild":194,"seo":74304,"stem":74305,"__hash__":74306},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":74035,"toc":74298},[74036,74039,74042,74044,74046,74049,74051,74296],[11,74037,74033],{"id":74038},"stretch",[15,74040,74041],{},"Stretch content towards a direction from a center point",[31771,74043],{"component":74033},[23,74045,31775],{"id":26391},[31777,74047],{":props":74048},"[{\"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,74050,31783],{"id":31782},[246,74052,74053,74098,74142,74186,74230],{":tabs":1557},[212,74054,74056],{"className":334,"code":74055,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,74057,74058,74066,74074,74082,74090],{"__ignoreMap":178},[220,74059,74060,74062,74064],{"class":222,"line":223},[220,74061,343],{"class":264},[220,74063,347],{"class":346},[220,74065,359],{"class":264},[220,74067,74068,74070,74072],{"class":222,"line":179},[220,74069,364],{"class":264},[220,74071,74033],{"class":346},[220,74073,359],{"class":264},[220,74075,74076,74078,74080],{"class":222,"line":389},[220,74077,2550],{"class":264},[220,74079,2553],{"class":346},[220,74081,386],{"class":264},[220,74083,74084,74086,74088],{"class":222,"line":399},[220,74085,2567],{"class":264},[220,74087,74033],{"class":346},[220,74089,359],{"class":264},[220,74091,74092,74094,74096],{"class":222,"line":644},[220,74093,402],{"class":264},[220,74095,347],{"class":346},[220,74097,359],{"class":264},[212,74099,74100],{"className":409,"code":74055,"language":411,"meta":178,"style":178},[99,74101,74102,74110,74118,74126,74134],{"__ignoreMap":178},[220,74103,74104,74106,74108],{"class":222,"line":223},[220,74105,343],{"class":264},[220,74107,347],{"class":420},[220,74109,359],{"class":264},[220,74111,74112,74114,74116],{"class":222,"line":179},[220,74113,364],{"class":264},[220,74115,74033],{"class":420},[220,74117,359],{"class":264},[220,74119,74120,74122,74124],{"class":222,"line":389},[220,74121,2550],{"class":264},[220,74123,2553],{"class":420},[220,74125,386],{"class":264},[220,74127,74128,74130,74132],{"class":222,"line":399},[220,74129,2567],{"class":264},[220,74131,74033],{"class":420},[220,74133,359],{"class":264},[220,74135,74136,74138,74140],{"class":222,"line":644},[220,74137,402],{"class":264},[220,74139,347],{"class":420},[220,74141,359],{"class":264},[212,74143,74144],{"className":2844,"code":74055,"language":2846,"meta":178,"style":178},[99,74145,74146,74154,74162,74170,74178],{"__ignoreMap":178},[220,74147,74148,74150,74152],{"class":222,"line":223},[220,74149,343],{"class":264},[220,74151,347],{"class":420},[220,74153,359],{"class":264},[220,74155,74156,74158,74160],{"class":222,"line":179},[220,74157,364],{"class":264},[220,74159,74033],{"class":420},[220,74161,359],{"class":264},[220,74163,74164,74166,74168],{"class":222,"line":389},[220,74165,2550],{"class":264},[220,74167,2553],{"class":420},[220,74169,386],{"class":264},[220,74171,74172,74174,74176],{"class":222,"line":399},[220,74173,2567],{"class":264},[220,74175,74033],{"class":420},[220,74177,359],{"class":264},[220,74179,74180,74182,74184],{"class":222,"line":644},[220,74181,402],{"class":264},[220,74183,347],{"class":420},[220,74185,359],{"class":264},[212,74187,74188],{"className":468,"code":74055,"language":469,"meta":178,"style":178},[99,74189,74190,74198,74206,74214,74222],{"__ignoreMap":178},[220,74191,74192,74194,74196],{"class":222,"line":223},[220,74193,343],{"class":264},[220,74195,347],{"class":420},[220,74197,359],{"class":264},[220,74199,74200,74202,74204],{"class":222,"line":179},[220,74201,364],{"class":264},[220,74203,74033],{"class":420},[220,74205,359],{"class":264},[220,74207,74208,74210,74212],{"class":222,"line":389},[220,74209,2550],{"class":264},[220,74211,2553],{"class":420},[220,74213,386],{"class":264},[220,74215,74216,74218,74220],{"class":222,"line":399},[220,74217,2567],{"class":264},[220,74219,74033],{"class":420},[220,74221,359],{"class":264},[220,74223,74224,74226,74228],{"class":222,"line":644},[220,74225,402],{"class":264},[220,74227,347],{"class":420},[220,74229,359],{"class":264},[212,74231,74233],{"className":251,"code":74232,"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,74234,74235,74245,74249,74263,74267,74276,74284,74288,74292],{"__ignoreMap":178},[220,74236,74237,74239,74241,74243],{"class":222,"line":223},[220,74238,261],{"class":260},[220,74240,11364],{"class":264},[220,74242,268],{"class":260},[220,74244,11369],{"class":230},[220,74246,74247],{"class":222,"line":179},[220,74248,647],{"emptyLinePlaceholder":194},[220,74250,74251,74253,74255,74257,74259,74261],{"class":222,"line":389},[220,74252,1735],{"class":260},[220,74254,1738],{"class":420},[220,74256,1741],{"class":260},[220,74258,1744],{"class":260},[220,74260,1747],{"class":226},[220,74262,1750],{"class":264},[220,74264,74265],{"class":222,"line":399},[220,74266,1765],{"class":264},[220,74268,74269,74271,74274],{"class":222,"line":644},[220,74270,1770],{"class":264},[220,74272,74273],{"class":230},"'Stretch'",[220,74275,6860],{"class":264},[220,74277,74278,74280,74282],{"class":222,"line":650},[220,74279,6865],{"class":264},[220,74281,6409],{"class":230},[220,74283,2465],{"class":264},[220,74285,74286],{"class":222,"line":656},[220,74287,6882],{"class":264},[220,74289,74290],{"class":222,"line":673},[220,74291,1787],{"class":264},[220,74293,74294],{"class":222,"line":682},[220,74295,1792],{"class":264},[1504,74297,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":74299},[74300,74301],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":74033,"description":74041},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":74308,"title":15696,"body":74309,"category":32923,"componentType":25734,"description":74316,"extension":191,"meta":74500,"navigation":194,"path":74501,"requiresChild":32390,"seo":74502,"stem":74503,"__hash__":74504},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":74310,"toc":74496},[74311,74314,74317,74319,74321,74324,74326,74494],[11,74312,15696],{"id":74313},"stripes",[15,74315,74316],{},"Alternating colored stripes with animation",[31771,74318],{"component":15696},[23,74320,31775],{"id":26391},[31777,74322],{":props":74323},"[{\"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,74325,31783],{"id":31782},[246,74327,74328,74357,74385,74413,74441],{":tabs":1557},[212,74329,74331],{"className":334,"code":74330,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,74332,74333,74341,74349],{"__ignoreMap":178},[220,74334,74335,74337,74339],{"class":222,"line":223},[220,74336,343],{"class":264},[220,74338,347],{"class":346},[220,74340,359],{"class":264},[220,74342,74343,74345,74347],{"class":222,"line":179},[220,74344,364],{"class":264},[220,74346,15696],{"class":346},[220,74348,386],{"class":264},[220,74350,74351,74353,74355],{"class":222,"line":389},[220,74352,402],{"class":264},[220,74354,347],{"class":346},[220,74356,359],{"class":264},[212,74358,74359],{"className":409,"code":74330,"language":411,"meta":178,"style":178},[99,74360,74361,74369,74377],{"__ignoreMap":178},[220,74362,74363,74365,74367],{"class":222,"line":223},[220,74364,343],{"class":264},[220,74366,347],{"class":420},[220,74368,359],{"class":264},[220,74370,74371,74373,74375],{"class":222,"line":179},[220,74372,364],{"class":264},[220,74374,15696],{"class":420},[220,74376,386],{"class":264},[220,74378,74379,74381,74383],{"class":222,"line":389},[220,74380,402],{"class":264},[220,74382,347],{"class":420},[220,74384,359],{"class":264},[212,74386,74387],{"className":2844,"code":74330,"language":2846,"meta":178,"style":178},[99,74388,74389,74397,74405],{"__ignoreMap":178},[220,74390,74391,74393,74395],{"class":222,"line":223},[220,74392,343],{"class":264},[220,74394,347],{"class":420},[220,74396,359],{"class":264},[220,74398,74399,74401,74403],{"class":222,"line":179},[220,74400,364],{"class":264},[220,74402,15696],{"class":420},[220,74404,386],{"class":264},[220,74406,74407,74409,74411],{"class":222,"line":389},[220,74408,402],{"class":264},[220,74410,347],{"class":420},[220,74412,359],{"class":264},[212,74414,74415],{"className":468,"code":74330,"language":469,"meta":178,"style":178},[99,74416,74417,74425,74433],{"__ignoreMap":178},[220,74418,74419,74421,74423],{"class":222,"line":223},[220,74420,343],{"class":264},[220,74422,347],{"class":420},[220,74424,359],{"class":264},[220,74426,74427,74429,74431],{"class":222,"line":179},[220,74428,364],{"class":264},[220,74430,15696],{"class":420},[220,74432,386],{"class":264},[220,74434,74435,74437,74439],{"class":222,"line":389},[220,74436,402],{"class":264},[220,74438,347],{"class":420},[220,74440,359],{"class":264},[212,74442,74444],{"className":251,"code":74443,"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,74445,74446,74456,74460,74474,74478,74486,74490],{"__ignoreMap":178},[220,74447,74448,74450,74452,74454],{"class":222,"line":223},[220,74449,261],{"class":260},[220,74451,11364],{"class":264},[220,74453,268],{"class":260},[220,74455,11369],{"class":230},[220,74457,74458],{"class":222,"line":179},[220,74459,647],{"emptyLinePlaceholder":194},[220,74461,74462,74464,74466,74468,74470,74472],{"class":222,"line":389},[220,74463,1735],{"class":260},[220,74465,1738],{"class":420},[220,74467,1741],{"class":260},[220,74469,1744],{"class":260},[220,74471,1747],{"class":226},[220,74473,1750],{"class":264},[220,74475,74476],{"class":222,"line":399},[220,74477,1765],{"class":264},[220,74479,74480,74482,74484],{"class":222,"line":644},[220,74481,1770],{"class":264},[220,74483,16954],{"class":230},[220,74485,2465],{"class":264},[220,74487,74488],{"class":222,"line":650},[220,74489,1787],{"class":264},[220,74491,74492],{"class":222,"line":656},[220,74493,1792],{"class":264},[1504,74495,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":74497},[74498,74499],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15696,"description":74316},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":74506,"title":74507,"body":74508,"category":32923,"componentType":25734,"description":74515,"extension":191,"meta":74747,"navigation":194,"path":74748,"requiresChild":32390,"seo":74749,"stem":74750,"__hash__":74751},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":74509,"toc":74743},[74510,74513,74516,74518,74520,74523,74525,74741],[11,74511,74507],{"id":74512},"studiobackground",[15,74514,74515],{},"Multi-light studio background with ambient motion.",[31771,74517],{"component":74507},[23,74519,31775],{"id":26391},[31777,74521],{":props":74522},"[{\"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,74524,31783],{"id":31782},[246,74526,74527,74568,74606,74644,74682],{":tabs":1557},[212,74528,74530],{"className":334,"code":74529,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,74531,74532,74540,74547,74556,74560],{"__ignoreMap":178},[220,74533,74534,74536,74538],{"class":222,"line":223},[220,74535,343],{"class":264},[220,74537,347],{"class":346},[220,74539,359],{"class":264},[220,74541,74542,74544],{"class":222,"line":179},[220,74543,364],{"class":264},[220,74545,74546],{"class":346},"StudioBackground\n",[220,74548,74549,74551,74553],{"class":222,"line":389},[220,74550,9487],{"class":226},[220,74552,353],{"class":264},[220,74554,74555],{"class":230},"\"#d8dbec\"\n",[220,74557,74558],{"class":222,"line":399},[220,74559,1234],{"class":264},[220,74561,74562,74564,74566],{"class":222,"line":644},[220,74563,402],{"class":264},[220,74565,347],{"class":346},[220,74567,359],{"class":264},[212,74569,74570],{"className":409,"code":74529,"language":411,"meta":178,"style":178},[99,74571,74572,74580,74586,74594,74598],{"__ignoreMap":178},[220,74573,74574,74576,74578],{"class":222,"line":223},[220,74575,343],{"class":264},[220,74577,347],{"class":420},[220,74579,359],{"class":264},[220,74581,74582,74584],{"class":222,"line":179},[220,74583,364],{"class":264},[220,74585,74546],{"class":420},[220,74587,74588,74590,74592],{"class":222,"line":389},[220,74589,9487],{"class":226},[220,74591,353],{"class":260},[220,74593,74555],{"class":230},[220,74595,74596],{"class":222,"line":399},[220,74597,1234],{"class":264},[220,74599,74600,74602,74604],{"class":222,"line":644},[220,74601,402],{"class":264},[220,74603,347],{"class":420},[220,74605,359],{"class":264},[212,74607,74608],{"className":2844,"code":74529,"language":2846,"meta":178,"style":178},[99,74609,74610,74618,74624,74632,74636],{"__ignoreMap":178},[220,74611,74612,74614,74616],{"class":222,"line":223},[220,74613,343],{"class":264},[220,74615,347],{"class":420},[220,74617,359],{"class":264},[220,74619,74620,74622],{"class":222,"line":179},[220,74621,364],{"class":264},[220,74623,74546],{"class":420},[220,74625,74626,74628,74630],{"class":222,"line":389},[220,74627,9487],{"class":226},[220,74629,353],{"class":264},[220,74631,74555],{"class":230},[220,74633,74634],{"class":222,"line":399},[220,74635,1234],{"class":264},[220,74637,74638,74640,74642],{"class":222,"line":644},[220,74639,402],{"class":264},[220,74641,347],{"class":420},[220,74643,359],{"class":264},[212,74645,74646],{"className":468,"code":74529,"language":469,"meta":178,"style":178},[99,74647,74648,74656,74662,74670,74674],{"__ignoreMap":178},[220,74649,74650,74652,74654],{"class":222,"line":223},[220,74651,343],{"class":264},[220,74653,347],{"class":420},[220,74655,359],{"class":264},[220,74657,74658,74660],{"class":222,"line":179},[220,74659,364],{"class":264},[220,74661,74546],{"class":420},[220,74663,74664,74666,74668],{"class":222,"line":389},[220,74665,9487],{"class":226},[220,74667,353],{"class":260},[220,74669,74555],{"class":230},[220,74671,74672],{"class":222,"line":399},[220,74673,1234],{"class":264},[220,74675,74676,74678,74680],{"class":222,"line":644},[220,74677,402],{"class":264},[220,74679,347],{"class":420},[220,74681,359],{"class":264},[212,74683,74685],{"className":251,"code":74684,"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,74686,74687,74697,74701,74715,74719,74733,74737],{"__ignoreMap":178},[220,74688,74689,74691,74693,74695],{"class":222,"line":223},[220,74690,261],{"class":260},[220,74692,11364],{"class":264},[220,74694,268],{"class":260},[220,74696,11369],{"class":230},[220,74698,74699],{"class":222,"line":179},[220,74700,647],{"emptyLinePlaceholder":194},[220,74702,74703,74705,74707,74709,74711,74713],{"class":222,"line":389},[220,74704,1735],{"class":260},[220,74706,1738],{"class":420},[220,74708,1741],{"class":260},[220,74710,1744],{"class":260},[220,74712,1747],{"class":226},[220,74714,1750],{"class":264},[220,74716,74717],{"class":222,"line":399},[220,74718,1765],{"class":264},[220,74720,74721,74723,74726,74728,74731],{"class":222,"line":644},[220,74722,1770],{"class":264},[220,74724,74725],{"class":230},"'StudioBackground'",[220,74727,1776],{"class":264},[220,74729,74730],{"class":230},"'#d8dbec'",[220,74732,1782],{"class":264},[220,74734,74735],{"class":222,"line":650},[220,74736,1787],{"class":264},[220,74738,74739],{"class":222,"line":656},[220,74740,1792],{"class":264},[1504,74742,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74744},[74745,74746],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":74507,"description":74515},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":74753,"title":74754,"body":74755,"category":32923,"componentType":25734,"description":74762,"extension":191,"meta":75041,"navigation":194,"path":75042,"requiresChild":32390,"seo":75043,"stem":75044,"__hash__":75045},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":74756,"toc":75037},[74757,74760,74763,74765,74767,74770,74772,75035],[11,74758,74754],{"id":74759},"sunburst",[15,74761,74762],{},"Radial sunburst rays emanating from a center point",[31771,74764],{"component":74754},[23,74766,31775],{"id":26391},[31777,74768],{":props":74769},"[{\"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,74771,31783],{"id":31782},[246,74773,74774,74823,74874,74922,74972],{":tabs":1557},[212,74775,74777],{"className":334,"code":74776,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,74778,74779,74787,74794,74803,74811,74815],{"__ignoreMap":178},[220,74780,74781,74783,74785],{"class":222,"line":223},[220,74782,343],{"class":264},[220,74784,347],{"class":346},[220,74786,359],{"class":264},[220,74788,74789,74791],{"class":222,"line":179},[220,74790,364],{"class":264},[220,74792,74793],{"class":346},"SunBurst\n",[220,74795,74796,74798,74800],{"class":222,"line":389},[220,74797,9487],{"class":226},[220,74799,353],{"class":264},[220,74801,74802],{"class":230},"\"#ffdd88\"\n",[220,74804,74805,74807,74809],{"class":222,"line":399},[220,74806,17262],{"class":226},[220,74808,353],{"class":264},[220,74810,9502],{"class":230},[220,74812,74813],{"class":222,"line":644},[220,74814,1234],{"class":264},[220,74816,74817,74819,74821],{"class":222,"line":650},[220,74818,402],{"class":264},[220,74820,347],{"class":346},[220,74822,359],{"class":264},[212,74824,74826],{"className":409,"code":74825,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,74827,74828,74836,74842,74850,74862,74866],{"__ignoreMap":178},[220,74829,74830,74832,74834],{"class":222,"line":223},[220,74831,343],{"class":264},[220,74833,347],{"class":420},[220,74835,359],{"class":264},[220,74837,74838,74840],{"class":222,"line":179},[220,74839,364],{"class":264},[220,74841,74793],{"class":420},[220,74843,74844,74846,74848],{"class":222,"line":389},[220,74845,9487],{"class":226},[220,74847,353],{"class":260},[220,74849,74802],{"class":230},[220,74851,74852,74854,74856,74858,74860],{"class":222,"line":399},[220,74853,9497],{"class":226},[220,74855,353],{"class":260},[220,74857,743],{"class":264},[220,74859,6148],{"class":420},[220,74861,749],{"class":264},[220,74863,74864],{"class":222,"line":644},[220,74865,1234],{"class":264},[220,74867,74868,74870,74872],{"class":222,"line":650},[220,74869,402],{"class":264},[220,74871,347],{"class":420},[220,74873,359],{"class":264},[212,74875,74876],{"className":2844,"code":74825,"language":2846,"meta":178,"style":178},[99,74877,74878,74886,74892,74900,74910,74914],{"__ignoreMap":178},[220,74879,74880,74882,74884],{"class":222,"line":223},[220,74881,343],{"class":264},[220,74883,347],{"class":420},[220,74885,359],{"class":264},[220,74887,74888,74890],{"class":222,"line":179},[220,74889,364],{"class":264},[220,74891,74793],{"class":420},[220,74893,74894,74896,74898],{"class":222,"line":389},[220,74895,9487],{"class":226},[220,74897,353],{"class":264},[220,74899,74802],{"class":230},[220,74901,74902,74904,74906,74908],{"class":222,"line":399},[220,74903,9497],{"class":226},[220,74905,29729],{"class":264},[220,74907,6148],{"class":420},[220,74909,749],{"class":264},[220,74911,74912],{"class":222,"line":644},[220,74913,1234],{"class":264},[220,74915,74916,74918,74920],{"class":222,"line":650},[220,74917,402],{"class":264},[220,74919,347],{"class":420},[220,74921,359],{"class":264},[212,74923,74924],{"className":468,"code":74825,"language":469,"meta":178,"style":178},[99,74925,74926,74934,74940,74948,74960,74964],{"__ignoreMap":178},[220,74927,74928,74930,74932],{"class":222,"line":223},[220,74929,343],{"class":264},[220,74931,347],{"class":420},[220,74933,359],{"class":264},[220,74935,74936,74938],{"class":222,"line":179},[220,74937,364],{"class":264},[220,74939,74793],{"class":420},[220,74941,74942,74944,74946],{"class":222,"line":389},[220,74943,9487],{"class":226},[220,74945,353],{"class":260},[220,74947,74802],{"class":230},[220,74949,74950,74952,74954,74956,74958],{"class":222,"line":399},[220,74951,9497],{"class":226},[220,74953,353],{"class":260},[220,74955,743],{"class":264},[220,74957,6148],{"class":420},[220,74959,749],{"class":264},[220,74961,74962],{"class":222,"line":644},[220,74963,1234],{"class":264},[220,74965,74966,74968,74970],{"class":222,"line":650},[220,74967,402],{"class":264},[220,74969,347],{"class":420},[220,74971,359],{"class":264},[212,74973,74975],{"className":251,"code":74974,"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,74976,74977,74987,74991,75005,75009,75027,75031],{"__ignoreMap":178},[220,74978,74979,74981,74983,74985],{"class":222,"line":223},[220,74980,261],{"class":260},[220,74982,11364],{"class":264},[220,74984,268],{"class":260},[220,74986,11369],{"class":230},[220,74988,74989],{"class":222,"line":179},[220,74990,647],{"emptyLinePlaceholder":194},[220,74992,74993,74995,74997,74999,75001,75003],{"class":222,"line":389},[220,74994,1735],{"class":260},[220,74996,1738],{"class":420},[220,74998,1741],{"class":260},[220,75000,1744],{"class":260},[220,75002,1747],{"class":226},[220,75004,1750],{"class":264},[220,75006,75007],{"class":222,"line":399},[220,75008,1765],{"class":264},[220,75010,75011,75013,75016,75018,75021,75023,75025],{"class":222,"line":644},[220,75012,1770],{"class":264},[220,75014,75015],{"class":230},"'SunBurst'",[220,75017,1776],{"class":264},[220,75019,75020],{"class":230},"'#ffdd88'",[220,75022,6417],{"class":264},[220,75024,6148],{"class":420},[220,75026,1782],{"class":264},[220,75028,75029],{"class":222,"line":650},[220,75030,1787],{"class":264},[220,75032,75033],{"class":222,"line":656},[220,75034,1792],{"class":264},[1504,75036,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75038},[75039,75040],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":74754,"description":74762},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":75047,"title":75048,"body":75049,"category":33256,"componentType":25740,"description":75056,"extension":191,"meta":75317,"navigation":194,"path":75318,"requiresChild":194,"seo":75319,"stem":75320,"__hash__":75321},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":75050,"toc":75313},[75051,75054,75057,75059,75061,75064,75066,75311],[11,75052,75048],{"id":75053},"surface3d",[15,75055,75056],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31771,75058],{"component":75048},[23,75060,31775],{"id":26391},[31777,75062],{":props":75063},"[{\"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,75065,31783],{"id":31782},[246,75067,75068,75113,75157,75201,75245],{":tabs":1557},[212,75069,75071],{"className":334,"code":75070,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,75072,75073,75081,75089,75097,75105],{"__ignoreMap":178},[220,75074,75075,75077,75079],{"class":222,"line":223},[220,75076,343],{"class":264},[220,75078,347],{"class":346},[220,75080,359],{"class":264},[220,75082,75083,75085,75087],{"class":222,"line":179},[220,75084,364],{"class":264},[220,75086,75048],{"class":346},[220,75088,359],{"class":264},[220,75090,75091,75093,75095],{"class":222,"line":389},[220,75092,2550],{"class":264},[220,75094,2553],{"class":346},[220,75096,386],{"class":264},[220,75098,75099,75101,75103],{"class":222,"line":399},[220,75100,2567],{"class":264},[220,75102,75048],{"class":346},[220,75104,359],{"class":264},[220,75106,75107,75109,75111],{"class":222,"line":644},[220,75108,402],{"class":264},[220,75110,347],{"class":346},[220,75112,359],{"class":264},[212,75114,75115],{"className":409,"code":75070,"language":411,"meta":178,"style":178},[99,75116,75117,75125,75133,75141,75149],{"__ignoreMap":178},[220,75118,75119,75121,75123],{"class":222,"line":223},[220,75120,343],{"class":264},[220,75122,347],{"class":420},[220,75124,359],{"class":264},[220,75126,75127,75129,75131],{"class":222,"line":179},[220,75128,364],{"class":264},[220,75130,75048],{"class":420},[220,75132,359],{"class":264},[220,75134,75135,75137,75139],{"class":222,"line":389},[220,75136,2550],{"class":264},[220,75138,2553],{"class":420},[220,75140,386],{"class":264},[220,75142,75143,75145,75147],{"class":222,"line":399},[220,75144,2567],{"class":264},[220,75146,75048],{"class":420},[220,75148,359],{"class":264},[220,75150,75151,75153,75155],{"class":222,"line":644},[220,75152,402],{"class":264},[220,75154,347],{"class":420},[220,75156,359],{"class":264},[212,75158,75159],{"className":2844,"code":75070,"language":2846,"meta":178,"style":178},[99,75160,75161,75169,75177,75185,75193],{"__ignoreMap":178},[220,75162,75163,75165,75167],{"class":222,"line":223},[220,75164,343],{"class":264},[220,75166,347],{"class":420},[220,75168,359],{"class":264},[220,75170,75171,75173,75175],{"class":222,"line":179},[220,75172,364],{"class":264},[220,75174,75048],{"class":420},[220,75176,359],{"class":264},[220,75178,75179,75181,75183],{"class":222,"line":389},[220,75180,2550],{"class":264},[220,75182,2553],{"class":420},[220,75184,386],{"class":264},[220,75186,75187,75189,75191],{"class":222,"line":399},[220,75188,2567],{"class":264},[220,75190,75048],{"class":420},[220,75192,359],{"class":264},[220,75194,75195,75197,75199],{"class":222,"line":644},[220,75196,402],{"class":264},[220,75198,347],{"class":420},[220,75200,359],{"class":264},[212,75202,75203],{"className":468,"code":75070,"language":469,"meta":178,"style":178},[99,75204,75205,75213,75221,75229,75237],{"__ignoreMap":178},[220,75206,75207,75209,75211],{"class":222,"line":223},[220,75208,343],{"class":264},[220,75210,347],{"class":420},[220,75212,359],{"class":264},[220,75214,75215,75217,75219],{"class":222,"line":179},[220,75216,364],{"class":264},[220,75218,75048],{"class":420},[220,75220,359],{"class":264},[220,75222,75223,75225,75227],{"class":222,"line":389},[220,75224,2550],{"class":264},[220,75226,2553],{"class":420},[220,75228,386],{"class":264},[220,75230,75231,75233,75235],{"class":222,"line":399},[220,75232,2567],{"class":264},[220,75234,75048],{"class":420},[220,75236,359],{"class":264},[220,75238,75239,75241,75243],{"class":222,"line":644},[220,75240,402],{"class":264},[220,75242,347],{"class":420},[220,75244,359],{"class":264},[212,75246,75248],{"className":251,"code":75247,"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,75249,75250,75260,75264,75278,75282,75291,75299,75303,75307],{"__ignoreMap":178},[220,75251,75252,75254,75256,75258],{"class":222,"line":223},[220,75253,261],{"class":260},[220,75255,11364],{"class":264},[220,75257,268],{"class":260},[220,75259,11369],{"class":230},[220,75261,75262],{"class":222,"line":179},[220,75263,647],{"emptyLinePlaceholder":194},[220,75265,75266,75268,75270,75272,75274,75276],{"class":222,"line":389},[220,75267,1735],{"class":260},[220,75269,1738],{"class":420},[220,75271,1741],{"class":260},[220,75273,1744],{"class":260},[220,75275,1747],{"class":226},[220,75277,1750],{"class":264},[220,75279,75280],{"class":222,"line":399},[220,75281,1765],{"class":264},[220,75283,75284,75286,75289],{"class":222,"line":644},[220,75285,1770],{"class":264},[220,75287,75288],{"class":230},"'Surface3D'",[220,75290,6860],{"class":264},[220,75292,75293,75295,75297],{"class":222,"line":650},[220,75294,6865],{"class":264},[220,75296,6409],{"class":230},[220,75298,2465],{"class":264},[220,75300,75301],{"class":222,"line":656},[220,75302,6882],{"class":264},[220,75304,75305],{"class":222,"line":673},[220,75306,1787],{"class":264},[220,75308,75309],{"class":222,"line":682},[220,75310,1792],{"class":264},[1504,75312,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":75314},[75315,75316],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":75048,"description":75056},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":75323,"title":13860,"body":75324,"category":32923,"componentType":25734,"description":75331,"extension":191,"meta":75516,"navigation":194,"path":75517,"requiresChild":32390,"seo":75518,"stem":75519,"__hash__":75520},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":75325,"toc":75512},[75326,75329,75332,75334,75336,75339,75341,75510],[11,75327,13860],{"id":75328},"swirl",[15,75330,75331],{},"Flowing swirl pattern with multi-layered noise",[31771,75333],{"component":13860},[23,75335,31775],{"id":26391},[31777,75337],{":props":75338},"[{\"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,75340,31783],{"id":31782},[246,75342,75343,75372,75400,75428,75456],{":tabs":1557},[212,75344,75346],{"className":334,"code":75345,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,75347,75348,75356,75364],{"__ignoreMap":178},[220,75349,75350,75352,75354],{"class":222,"line":223},[220,75351,343],{"class":264},[220,75353,347],{"class":346},[220,75355,359],{"class":264},[220,75357,75358,75360,75362],{"class":222,"line":179},[220,75359,364],{"class":264},[220,75361,13860],{"class":346},[220,75363,386],{"class":264},[220,75365,75366,75368,75370],{"class":222,"line":389},[220,75367,402],{"class":264},[220,75369,347],{"class":346},[220,75371,359],{"class":264},[212,75373,75374],{"className":409,"code":75345,"language":411,"meta":178,"style":178},[99,75375,75376,75384,75392],{"__ignoreMap":178},[220,75377,75378,75380,75382],{"class":222,"line":223},[220,75379,343],{"class":264},[220,75381,347],{"class":420},[220,75383,359],{"class":264},[220,75385,75386,75388,75390],{"class":222,"line":179},[220,75387,364],{"class":264},[220,75389,13860],{"class":420},[220,75391,386],{"class":264},[220,75393,75394,75396,75398],{"class":222,"line":389},[220,75395,402],{"class":264},[220,75397,347],{"class":420},[220,75399,359],{"class":264},[212,75401,75402],{"className":2844,"code":75345,"language":2846,"meta":178,"style":178},[99,75403,75404,75412,75420],{"__ignoreMap":178},[220,75405,75406,75408,75410],{"class":222,"line":223},[220,75407,343],{"class":264},[220,75409,347],{"class":420},[220,75411,359],{"class":264},[220,75413,75414,75416,75418],{"class":222,"line":179},[220,75415,364],{"class":264},[220,75417,13860],{"class":420},[220,75419,386],{"class":264},[220,75421,75422,75424,75426],{"class":222,"line":389},[220,75423,402],{"class":264},[220,75425,347],{"class":420},[220,75427,359],{"class":264},[212,75429,75430],{"className":468,"code":75345,"language":469,"meta":178,"style":178},[99,75431,75432,75440,75448],{"__ignoreMap":178},[220,75433,75434,75436,75438],{"class":222,"line":223},[220,75435,343],{"class":264},[220,75437,347],{"class":420},[220,75439,359],{"class":264},[220,75441,75442,75444,75446],{"class":222,"line":179},[220,75443,364],{"class":264},[220,75445,13860],{"class":420},[220,75447,386],{"class":264},[220,75449,75450,75452,75454],{"class":222,"line":389},[220,75451,402],{"class":264},[220,75453,347],{"class":420},[220,75455,359],{"class":264},[212,75457,75459],{"className":251,"code":75458,"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,75460,75461,75471,75475,75489,75493,75502,75506],{"__ignoreMap":178},[220,75462,75463,75465,75467,75469],{"class":222,"line":223},[220,75464,261],{"class":260},[220,75466,11364],{"class":264},[220,75468,268],{"class":260},[220,75470,11369],{"class":230},[220,75472,75473],{"class":222,"line":179},[220,75474,647],{"emptyLinePlaceholder":194},[220,75476,75477,75479,75481,75483,75485,75487],{"class":222,"line":389},[220,75478,1735],{"class":260},[220,75480,1738],{"class":420},[220,75482,1741],{"class":260},[220,75484,1744],{"class":260},[220,75486,1747],{"class":226},[220,75488,1750],{"class":264},[220,75490,75491],{"class":222,"line":399},[220,75492,1765],{"class":264},[220,75494,75495,75497,75500],{"class":222,"line":644},[220,75496,1770],{"class":264},[220,75498,75499],{"class":230},"'Swirl'",[220,75501,2465],{"class":264},[220,75503,75504],{"class":222,"line":650},[220,75505,1787],{"class":264},[220,75507,75508],{"class":222,"line":656},[220,75509,1792],{"class":264},[1504,75511,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":75513},[75514,75515],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":13860,"description":75331},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":75522,"title":75523,"body":75524,"category":15765,"componentType":25734,"description":75531,"extension":191,"meta":75809,"navigation":194,"path":75810,"requiresChild":32390,"seo":75811,"stem":75812,"__hash__":75813},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":75525,"toc":75805},[75526,75529,75532,75534,75536,75539,75541,75803],[11,75527,75523],{"id":75528},"teardrop",[15,75530,75531],{},"Teardrop — a rounded bulb tapering to a sharp point",[31771,75533],{"component":75523},[23,75535,31775],{"id":26391},[31777,75537],{":props":75538},"[{\"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,75540,31783],{"id":31782},[246,75542,75543,75592,75643,75691,75741],{":tabs":1557},[212,75544,75546],{"className":334,"code":75545,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,75547,75548,75556,75563,75571,75580,75584],{"__ignoreMap":178},[220,75549,75550,75552,75554],{"class":222,"line":223},[220,75551,343],{"class":264},[220,75553,347],{"class":346},[220,75555,359],{"class":264},[220,75557,75558,75560],{"class":222,"line":179},[220,75559,364],{"class":264},[220,75561,75562],{"class":346},"Teardrop\n",[220,75564,75565,75567,75569],{"class":222,"line":389},[220,75566,9487],{"class":226},[220,75568,353],{"class":264},[220,75570,9443],{"class":230},[220,75572,75573,75575,75577],{"class":222,"line":399},[220,75574,17262],{"class":226},[220,75576,353],{"class":264},[220,75578,75579],{"class":230},"\"0.22\"\n",[220,75581,75582],{"class":222,"line":644},[220,75583,1234],{"class":264},[220,75585,75586,75588,75590],{"class":222,"line":650},[220,75587,402],{"class":264},[220,75589,347],{"class":346},[220,75591,359],{"class":264},[212,75593,75595],{"className":409,"code":75594,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,75596,75597,75605,75611,75619,75631,75635],{"__ignoreMap":178},[220,75598,75599,75601,75603],{"class":222,"line":223},[220,75600,343],{"class":264},[220,75602,347],{"class":420},[220,75604,359],{"class":264},[220,75606,75607,75609],{"class":222,"line":179},[220,75608,364],{"class":264},[220,75610,75562],{"class":420},[220,75612,75613,75615,75617],{"class":222,"line":389},[220,75614,9487],{"class":226},[220,75616,353],{"class":260},[220,75618,9443],{"class":230},[220,75620,75621,75623,75625,75627,75629],{"class":222,"line":399},[220,75622,9497],{"class":226},[220,75624,353],{"class":260},[220,75626,743],{"class":264},[220,75628,23806],{"class":420},[220,75630,749],{"class":264},[220,75632,75633],{"class":222,"line":644},[220,75634,1234],{"class":264},[220,75636,75637,75639,75641],{"class":222,"line":650},[220,75638,402],{"class":264},[220,75640,347],{"class":420},[220,75642,359],{"class":264},[212,75644,75645],{"className":2844,"code":75594,"language":2846,"meta":178,"style":178},[99,75646,75647,75655,75661,75669,75679,75683],{"__ignoreMap":178},[220,75648,75649,75651,75653],{"class":222,"line":223},[220,75650,343],{"class":264},[220,75652,347],{"class":420},[220,75654,359],{"class":264},[220,75656,75657,75659],{"class":222,"line":179},[220,75658,364],{"class":264},[220,75660,75562],{"class":420},[220,75662,75663,75665,75667],{"class":222,"line":389},[220,75664,9487],{"class":226},[220,75666,353],{"class":264},[220,75668,9443],{"class":230},[220,75670,75671,75673,75675,75677],{"class":222,"line":399},[220,75672,9497],{"class":226},[220,75674,29729],{"class":264},[220,75676,23806],{"class":420},[220,75678,749],{"class":264},[220,75680,75681],{"class":222,"line":644},[220,75682,1234],{"class":264},[220,75684,75685,75687,75689],{"class":222,"line":650},[220,75686,402],{"class":264},[220,75688,347],{"class":420},[220,75690,359],{"class":264},[212,75692,75693],{"className":468,"code":75594,"language":469,"meta":178,"style":178},[99,75694,75695,75703,75709,75717,75729,75733],{"__ignoreMap":178},[220,75696,75697,75699,75701],{"class":222,"line":223},[220,75698,343],{"class":264},[220,75700,347],{"class":420},[220,75702,359],{"class":264},[220,75704,75705,75707],{"class":222,"line":179},[220,75706,364],{"class":264},[220,75708,75562],{"class":420},[220,75710,75711,75713,75715],{"class":222,"line":389},[220,75712,9487],{"class":226},[220,75714,353],{"class":260},[220,75716,9443],{"class":230},[220,75718,75719,75721,75723,75725,75727],{"class":222,"line":399},[220,75720,9497],{"class":226},[220,75722,353],{"class":260},[220,75724,743],{"class":264},[220,75726,23806],{"class":420},[220,75728,749],{"class":264},[220,75730,75731],{"class":222,"line":644},[220,75732,1234],{"class":264},[220,75734,75735,75737,75739],{"class":222,"line":650},[220,75736,402],{"class":264},[220,75738,347],{"class":420},[220,75740,359],{"class":264},[212,75742,75744],{"className":251,"code":75743,"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,75745,75746,75756,75760,75774,75778,75795,75799],{"__ignoreMap":178},[220,75747,75748,75750,75752,75754],{"class":222,"line":223},[220,75749,261],{"class":260},[220,75751,11364],{"class":264},[220,75753,268],{"class":260},[220,75755,11369],{"class":230},[220,75757,75758],{"class":222,"line":179},[220,75759,647],{"emptyLinePlaceholder":194},[220,75761,75762,75764,75766,75768,75770,75772],{"class":222,"line":389},[220,75763,1735],{"class":260},[220,75765,1738],{"class":420},[220,75767,1741],{"class":260},[220,75769,1744],{"class":260},[220,75771,1747],{"class":226},[220,75773,1750],{"class":264},[220,75775,75776],{"class":222,"line":399},[220,75777,1765],{"class":264},[220,75779,75780,75782,75785,75787,75789,75791,75793],{"class":222,"line":644},[220,75781,1770],{"class":264},[220,75783,75784],{"class":230},"'Teardrop'",[220,75786,1776],{"class":264},[220,75788,10021],{"class":230},[220,75790,6417],{"class":264},[220,75792,23806],{"class":420},[220,75794,1782],{"class":264},[220,75796,75797],{"class":222,"line":650},[220,75798,1787],{"class":264},[220,75800,75801],{"class":222,"line":656},[220,75802,1792],{"class":264},[1504,75804,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75806},[75807,75808],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":75523,"description":75531},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":75815,"title":75816,"body":75817,"category":32923,"componentType":25734,"description":75823,"extension":191,"meta":76053,"navigation":194,"path":76054,"requiresChild":32390,"seo":76055,"stem":76056,"__hash__":76057},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":75818,"toc":76049},[75819,75821,75824,75826,75828,75831,75833,76047],[11,75820,75816],{"id":15501},[15,75822,75823],{},"Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture",[31771,75825],{"component":75816},[23,75827,31775],{"id":26391},[31777,75829],{":props":75830},"[{\"name\":\"text\",\"type\":\"string\",\"default\":\"Hello World\",\"description\":\"The text to display (single line)\"},{\"name\":\"fontFamily\",\"type\":\"string\",\"default\":\"Inter\",\"description\":\"Google Fonts family name\"},{\"name\":\"fontWeight\",\"type\":\"number\",\"default\":\"400\",\"description\":\"Font weight (only weights published for the family render true; others are synthesized)\"},{\"name\":\"italic\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Italic style\"},{\"name\":\"textTransform\",\"type\":\"\\\"none\\\" | \\\"uppercase\\\" | \\\"lowercase\\\" | \\\"capitalize\\\"\",\"default\":\"none\",\"description\":\"Case transformation applied to the text\"},{\"name\":\"fontSize\",\"type\":\"number\",\"default\":\"0.07\",\"description\":\"Font size as a fraction of canvas height\"},{\"name\":\"letterSpacing\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Letter spacing in em units\"},{\"name\":\"lineHeight\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Line height as a multiple of font size (multi-line text)\"},{\"name\":\"textAlign\",\"type\":\"\\\"left\\\" | \\\"center\\\" | \\\"right\\\"\",\"default\":\"center\",\"description\":\"Horizontal alignment of lines within the text block\"},{\"name\":\"width\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto\u002FFixed width toggle and the side drag handles, not a slider.\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Text color\"},{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the text\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"}]",[23,75832,31783],{"id":31782},[246,75834,75835,75875,75913,75951,75989],{":tabs":1557},[212,75836,75838],{"className":334,"code":75837,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75839,75840,75848,75855,75863,75867],{"__ignoreMap":178},[220,75841,75842,75844,75846],{"class":222,"line":223},[220,75843,343],{"class":264},[220,75845,347],{"class":346},[220,75847,359],{"class":264},[220,75849,75850,75852],{"class":222,"line":179},[220,75851,364],{"class":264},[220,75853,75854],{"class":346},"Text\n",[220,75856,75857,75859,75861],{"class":222,"line":389},[220,75858,9487],{"class":226},[220,75860,353],{"class":264},[220,75862,9443],{"class":230},[220,75864,75865],{"class":222,"line":399},[220,75866,1234],{"class":264},[220,75868,75869,75871,75873],{"class":222,"line":644},[220,75870,402],{"class":264},[220,75872,347],{"class":346},[220,75874,359],{"class":264},[212,75876,75877],{"className":409,"code":75837,"language":411,"meta":178,"style":178},[99,75878,75879,75887,75893,75901,75905],{"__ignoreMap":178},[220,75880,75881,75883,75885],{"class":222,"line":223},[220,75882,343],{"class":264},[220,75884,347],{"class":420},[220,75886,359],{"class":264},[220,75888,75889,75891],{"class":222,"line":179},[220,75890,364],{"class":264},[220,75892,75854],{"class":420},[220,75894,75895,75897,75899],{"class":222,"line":389},[220,75896,9487],{"class":226},[220,75898,353],{"class":260},[220,75900,9443],{"class":230},[220,75902,75903],{"class":222,"line":399},[220,75904,1234],{"class":264},[220,75906,75907,75909,75911],{"class":222,"line":644},[220,75908,402],{"class":264},[220,75910,347],{"class":420},[220,75912,359],{"class":264},[212,75914,75915],{"className":2844,"code":75837,"language":2846,"meta":178,"style":178},[99,75916,75917,75925,75931,75939,75943],{"__ignoreMap":178},[220,75918,75919,75921,75923],{"class":222,"line":223},[220,75920,343],{"class":264},[220,75922,347],{"class":420},[220,75924,359],{"class":264},[220,75926,75927,75929],{"class":222,"line":179},[220,75928,364],{"class":264},[220,75930,75854],{"class":420},[220,75932,75933,75935,75937],{"class":222,"line":389},[220,75934,9487],{"class":226},[220,75936,353],{"class":264},[220,75938,9443],{"class":230},[220,75940,75941],{"class":222,"line":399},[220,75942,1234],{"class":264},[220,75944,75945,75947,75949],{"class":222,"line":644},[220,75946,402],{"class":264},[220,75948,347],{"class":420},[220,75950,359],{"class":264},[212,75952,75953],{"className":468,"code":75837,"language":469,"meta":178,"style":178},[99,75954,75955,75963,75969,75977,75981],{"__ignoreMap":178},[220,75956,75957,75959,75961],{"class":222,"line":223},[220,75958,343],{"class":264},[220,75960,347],{"class":420},[220,75962,359],{"class":264},[220,75964,75965,75967],{"class":222,"line":179},[220,75966,364],{"class":264},[220,75968,75854],{"class":420},[220,75970,75971,75973,75975],{"class":222,"line":389},[220,75972,9487],{"class":226},[220,75974,353],{"class":260},[220,75976,9443],{"class":230},[220,75978,75979],{"class":222,"line":399},[220,75980,1234],{"class":264},[220,75982,75983,75985,75987],{"class":222,"line":644},[220,75984,402],{"class":264},[220,75986,347],{"class":420},[220,75988,359],{"class":264},[212,75990,75992],{"className":251,"code":75991,"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,75993,75994,76004,76008,76022,76026,76039,76043],{"__ignoreMap":178},[220,75995,75996,75998,76000,76002],{"class":222,"line":223},[220,75997,261],{"class":260},[220,75999,11364],{"class":264},[220,76001,268],{"class":260},[220,76003,11369],{"class":230},[220,76005,76006],{"class":222,"line":179},[220,76007,647],{"emptyLinePlaceholder":194},[220,76009,76010,76012,76014,76016,76018,76020],{"class":222,"line":389},[220,76011,1735],{"class":260},[220,76013,1738],{"class":420},[220,76015,1741],{"class":260},[220,76017,1744],{"class":260},[220,76019,1747],{"class":226},[220,76021,1750],{"class":264},[220,76023,76024],{"class":222,"line":399},[220,76025,1765],{"class":264},[220,76027,76028,76030,76033,76035,76037],{"class":222,"line":644},[220,76029,1770],{"class":264},[220,76031,76032],{"class":230},"'Text'",[220,76034,1776],{"class":264},[220,76036,10021],{"class":230},[220,76038,1782],{"class":264},[220,76040,76041],{"class":222,"line":650},[220,76042,1787],{"class":264},[220,76044,76045],{"class":222,"line":656},[220,76046,1792],{"class":264},[1504,76048,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76050},[76051,76052],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":75816,"description":75823},"docs\u002Fcomponents\u002FText","V5GqEdlu-00Hi0ZR7eKOTsShbIRkhUQooFlrXUwGSSs",{"id":76059,"title":23026,"body":76060,"category":36429,"componentType":25734,"description":76067,"extension":191,"meta":76308,"navigation":194,"path":76309,"requiresChild":32390,"seo":76310,"stem":76311,"__hash__":76312},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":76061,"toc":76304},[76062,76065,76068,76070,76072,76075,76077,76302],[11,76063,23026],{"id":76064},"thinfilm",[15,76066,76067],{},"Iridescent thin-film edge",[31771,76069],{"component":23026},[23,76071,31775],{"id":26391},[31777,76073],{":props":76074},"[{\"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,76076,31783],{"id":31782},[246,76078,76079,76119,76162,76202,76244],{":tabs":1557},[212,76080,76082],{"className":334,"code":76081,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,76083,76084,76092,76099,76107,76111],{"__ignoreMap":178},[220,76085,76086,76088,76090],{"class":222,"line":223},[220,76087,343],{"class":264},[220,76089,347],{"class":346},[220,76091,359],{"class":264},[220,76093,76094,76096],{"class":222,"line":179},[220,76095,364],{"class":264},[220,76097,76098],{"class":346},"ThinFilm\n",[220,76100,76101,76103,76105],{"class":222,"line":389},[220,76102,20228],{"class":226},[220,76104,353],{"class":264},[220,76106,36485],{"class":230},[220,76108,76109],{"class":222,"line":399},[220,76110,1234],{"class":264},[220,76112,76113,76115,76117],{"class":222,"line":644},[220,76114,402],{"class":264},[220,76116,347],{"class":346},[220,76118,359],{"class":264},[212,76120,76122],{"className":409,"code":76121,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,76123,76124,76132,76138,76150,76154],{"__ignoreMap":178},[220,76125,76126,76128,76130],{"class":222,"line":223},[220,76127,343],{"class":264},[220,76129,347],{"class":420},[220,76131,359],{"class":264},[220,76133,76134,76136],{"class":222,"line":179},[220,76135,364],{"class":264},[220,76137,76098],{"class":420},[220,76139,76140,76142,76144,76146,76148],{"class":222,"line":389},[220,76141,20339],{"class":226},[220,76143,353],{"class":260},[220,76145,743],{"class":264},[220,76147,8528],{"class":420},[220,76149,749],{"class":264},[220,76151,76152],{"class":222,"line":399},[220,76153,1234],{"class":264},[220,76155,76156,76158,76160],{"class":222,"line":644},[220,76157,402],{"class":264},[220,76159,347],{"class":420},[220,76161,359],{"class":264},[212,76163,76164],{"className":2844,"code":76121,"language":2846,"meta":178,"style":178},[99,76165,76166,76174,76180,76190,76194],{"__ignoreMap":178},[220,76167,76168,76170,76172],{"class":222,"line":223},[220,76169,343],{"class":264},[220,76171,347],{"class":420},[220,76173,359],{"class":264},[220,76175,76176,76178],{"class":222,"line":179},[220,76177,364],{"class":264},[220,76179,76098],{"class":420},[220,76181,76182,76184,76186,76188],{"class":222,"line":389},[220,76183,20339],{"class":226},[220,76185,29729],{"class":264},[220,76187,8528],{"class":420},[220,76189,749],{"class":264},[220,76191,76192],{"class":222,"line":399},[220,76193,1234],{"class":264},[220,76195,76196,76198,76200],{"class":222,"line":644},[220,76197,402],{"class":264},[220,76199,347],{"class":420},[220,76201,359],{"class":264},[212,76203,76204],{"className":468,"code":76121,"language":469,"meta":178,"style":178},[99,76205,76206,76214,76220,76232,76236],{"__ignoreMap":178},[220,76207,76208,76210,76212],{"class":222,"line":223},[220,76209,343],{"class":264},[220,76211,347],{"class":420},[220,76213,359],{"class":264},[220,76215,76216,76218],{"class":222,"line":179},[220,76217,364],{"class":264},[220,76219,76098],{"class":420},[220,76221,76222,76224,76226,76228,76230],{"class":222,"line":389},[220,76223,20339],{"class":226},[220,76225,353],{"class":260},[220,76227,743],{"class":264},[220,76229,8528],{"class":420},[220,76231,749],{"class":264},[220,76233,76234],{"class":222,"line":399},[220,76235,1234],{"class":264},[220,76237,76238,76240,76242],{"class":222,"line":644},[220,76239,402],{"class":264},[220,76241,347],{"class":420},[220,76243,359],{"class":264},[212,76245,76247],{"className":251,"code":76246,"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,76248,76249,76259,76263,76277,76281,76294,76298],{"__ignoreMap":178},[220,76250,76251,76253,76255,76257],{"class":222,"line":223},[220,76252,261],{"class":260},[220,76254,11364],{"class":264},[220,76256,268],{"class":260},[220,76258,11369],{"class":230},[220,76260,76261],{"class":222,"line":179},[220,76262,647],{"emptyLinePlaceholder":194},[220,76264,76265,76267,76269,76271,76273,76275],{"class":222,"line":389},[220,76266,1735],{"class":260},[220,76268,1738],{"class":420},[220,76270,1741],{"class":260},[220,76272,1744],{"class":260},[220,76274,1747],{"class":226},[220,76276,1750],{"class":264},[220,76278,76279],{"class":222,"line":399},[220,76280,1765],{"class":264},[220,76282,76283,76285,76288,76290,76292],{"class":222,"line":644},[220,76284,1770],{"class":264},[220,76286,76287],{"class":230},"'ThinFilm'",[220,76289,32063],{"class":264},[220,76291,8528],{"class":420},[220,76293,1782],{"class":264},[220,76295,76296],{"class":222,"line":650},[220,76297,1787],{"class":264},[220,76299,76300],{"class":222,"line":656},[220,76301,1792],{"class":264},[1504,76303,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76305},[76306,76307],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":23026,"description":76067},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":76314,"title":76315,"body":76316,"category":32094,"componentType":25740,"description":76323,"extension":191,"meta":76640,"navigation":194,"path":76641,"requiresChild":194,"seo":76642,"stem":76643,"__hash__":76644},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":76317,"toc":76636},[76318,76321,76324,76326,76328,76331,76333,76634],[11,76319,76315],{"id":76320},"tiltshift",[15,76322,76323],{},"Selective focus blur mimicking tilt-shift photography",[31771,76325],{"component":76315},[23,76327,31775],{"id":26391},[31777,76329],{":props":76330},"[{\"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,76332,31783],{"id":31782},[246,76334,76335,76391,76450,76506,76564],{":tabs":1557},[212,76336,76338],{"className":334,"code":76337,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,76339,76340,76348,76355,76363,76367,76375,76383],{"__ignoreMap":178},[220,76341,76342,76344,76346],{"class":222,"line":223},[220,76343,343],{"class":264},[220,76345,347],{"class":346},[220,76347,359],{"class":264},[220,76349,76350,76352],{"class":222,"line":179},[220,76351,364],{"class":264},[220,76353,76354],{"class":346},"TiltShift\n",[220,76356,76357,76359,76361],{"class":222,"line":389},[220,76358,20228],{"class":226},[220,76360,353],{"class":264},[220,76362,34940],{"class":230},[220,76364,76365],{"class":222,"line":399},[220,76366,31819],{"class":264},[220,76368,76369,76371,76373],{"class":222,"line":644},[220,76370,2550],{"class":264},[220,76372,2553],{"class":346},[220,76374,386],{"class":264},[220,76376,76377,76379,76381],{"class":222,"line":650},[220,76378,2567],{"class":264},[220,76380,76315],{"class":346},[220,76382,359],{"class":264},[220,76384,76385,76387,76389],{"class":222,"line":656},[220,76386,402],{"class":264},[220,76388,347],{"class":346},[220,76390,359],{"class":264},[212,76392,76394],{"className":409,"code":76393,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,76395,76396,76404,76410,76422,76426,76434,76442],{"__ignoreMap":178},[220,76397,76398,76400,76402],{"class":222,"line":223},[220,76399,343],{"class":264},[220,76401,347],{"class":420},[220,76403,359],{"class":264},[220,76405,76406,76408],{"class":222,"line":179},[220,76407,364],{"class":264},[220,76409,76354],{"class":420},[220,76411,76412,76414,76416,76418,76420],{"class":222,"line":389},[220,76413,20339],{"class":226},[220,76415,353],{"class":260},[220,76417,743],{"class":264},[220,76419,34998],{"class":420},[220,76421,749],{"class":264},[220,76423,76424],{"class":222,"line":399},[220,76425,31819],{"class":264},[220,76427,76428,76430,76432],{"class":222,"line":644},[220,76429,2550],{"class":264},[220,76431,2553],{"class":420},[220,76433,386],{"class":264},[220,76435,76436,76438,76440],{"class":222,"line":650},[220,76437,2567],{"class":264},[220,76439,76315],{"class":420},[220,76441,359],{"class":264},[220,76443,76444,76446,76448],{"class":222,"line":656},[220,76445,402],{"class":264},[220,76447,347],{"class":420},[220,76449,359],{"class":264},[212,76451,76452],{"className":2844,"code":76393,"language":2846,"meta":178,"style":178},[99,76453,76454,76462,76468,76478,76482,76490,76498],{"__ignoreMap":178},[220,76455,76456,76458,76460],{"class":222,"line":223},[220,76457,343],{"class":264},[220,76459,347],{"class":420},[220,76461,359],{"class":264},[220,76463,76464,76466],{"class":222,"line":179},[220,76465,364],{"class":264},[220,76467,76354],{"class":420},[220,76469,76470,76472,76474,76476],{"class":222,"line":389},[220,76471,20339],{"class":226},[220,76473,29729],{"class":264},[220,76475,34998],{"class":420},[220,76477,749],{"class":264},[220,76479,76480],{"class":222,"line":399},[220,76481,31819],{"class":264},[220,76483,76484,76486,76488],{"class":222,"line":644},[220,76485,2550],{"class":264},[220,76487,2553],{"class":420},[220,76489,386],{"class":264},[220,76491,76492,76494,76496],{"class":222,"line":650},[220,76493,2567],{"class":264},[220,76495,76315],{"class":420},[220,76497,359],{"class":264},[220,76499,76500,76502,76504],{"class":222,"line":656},[220,76501,402],{"class":264},[220,76503,347],{"class":420},[220,76505,359],{"class":264},[212,76507,76508],{"className":468,"code":76393,"language":469,"meta":178,"style":178},[99,76509,76510,76518,76524,76536,76540,76548,76556],{"__ignoreMap":178},[220,76511,76512,76514,76516],{"class":222,"line":223},[220,76513,343],{"class":264},[220,76515,347],{"class":420},[220,76517,359],{"class":264},[220,76519,76520,76522],{"class":222,"line":179},[220,76521,364],{"class":264},[220,76523,76354],{"class":420},[220,76525,76526,76528,76530,76532,76534],{"class":222,"line":389},[220,76527,20339],{"class":226},[220,76529,353],{"class":260},[220,76531,743],{"class":264},[220,76533,34998],{"class":420},[220,76535,749],{"class":264},[220,76537,76538],{"class":222,"line":399},[220,76539,31819],{"class":264},[220,76541,76542,76544,76546],{"class":222,"line":644},[220,76543,2550],{"class":264},[220,76545,2553],{"class":420},[220,76547,386],{"class":264},[220,76549,76550,76552,76554],{"class":222,"line":650},[220,76551,2567],{"class":264},[220,76553,76315],{"class":420},[220,76555,359],{"class":264},[220,76557,76558,76560,76562],{"class":222,"line":656},[220,76559,402],{"class":264},[220,76561,347],{"class":420},[220,76563,359],{"class":264},[212,76565,76567],{"className":251,"code":76566,"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,76568,76569,76579,76583,76597,76601,76614,76622,76626,76630],{"__ignoreMap":178},[220,76570,76571,76573,76575,76577],{"class":222,"line":223},[220,76572,261],{"class":260},[220,76574,11364],{"class":264},[220,76576,268],{"class":260},[220,76578,11369],{"class":230},[220,76580,76581],{"class":222,"line":179},[220,76582,647],{"emptyLinePlaceholder":194},[220,76584,76585,76587,76589,76591,76593,76595],{"class":222,"line":389},[220,76586,1735],{"class":260},[220,76588,1738],{"class":420},[220,76590,1741],{"class":260},[220,76592,1744],{"class":260},[220,76594,1747],{"class":226},[220,76596,1750],{"class":264},[220,76598,76599],{"class":222,"line":399},[220,76600,1765],{"class":264},[220,76602,76603,76605,76608,76610,76612],{"class":222,"line":644},[220,76604,1770],{"class":264},[220,76606,76607],{"class":230},"'TiltShift'",[220,76609,32063],{"class":264},[220,76611,34998],{"class":420},[220,76613,7397],{"class":264},[220,76615,76616,76618,76620],{"class":222,"line":650},[220,76617,6865],{"class":264},[220,76619,6409],{"class":230},[220,76621,2465],{"class":264},[220,76623,76624],{"class":222,"line":656},[220,76625,6882],{"class":264},[220,76627,76628],{"class":222,"line":673},[220,76629,1787],{"class":264},[220,76631,76632],{"class":222,"line":682},[220,76633,1792],{"class":264},[1504,76635,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76637},[76638,76639],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":76315,"description":76323},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":76646,"title":76647,"body":76648,"category":32666,"componentType":25740,"description":76655,"extension":191,"meta":76916,"navigation":194,"path":76917,"requiresChild":194,"seo":76918,"stem":76919,"__hash__":76920},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":76649,"toc":76912},[76650,76653,76656,76658,76660,76663,76665,76910],[11,76651,76647],{"id":76652},"timetrail",[15,76654,76655],{},"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",[31771,76657],{"component":76647},[23,76659,31775],{"id":26391},[31777,76661],{":props":76662},"[{\"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,76664,31783],{"id":31782},[246,76666,76667,76712,76756,76800,76844],{":tabs":1557},[212,76668,76670],{"className":334,"code":76669,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,76671,76672,76680,76688,76696,76704],{"__ignoreMap":178},[220,76673,76674,76676,76678],{"class":222,"line":223},[220,76675,343],{"class":264},[220,76677,347],{"class":346},[220,76679,359],{"class":264},[220,76681,76682,76684,76686],{"class":222,"line":179},[220,76683,364],{"class":264},[220,76685,76647],{"class":346},[220,76687,359],{"class":264},[220,76689,76690,76692,76694],{"class":222,"line":389},[220,76691,2550],{"class":264},[220,76693,2553],{"class":346},[220,76695,386],{"class":264},[220,76697,76698,76700,76702],{"class":222,"line":399},[220,76699,2567],{"class":264},[220,76701,76647],{"class":346},[220,76703,359],{"class":264},[220,76705,76706,76708,76710],{"class":222,"line":644},[220,76707,402],{"class":264},[220,76709,347],{"class":346},[220,76711,359],{"class":264},[212,76713,76714],{"className":409,"code":76669,"language":411,"meta":178,"style":178},[99,76715,76716,76724,76732,76740,76748],{"__ignoreMap":178},[220,76717,76718,76720,76722],{"class":222,"line":223},[220,76719,343],{"class":264},[220,76721,347],{"class":420},[220,76723,359],{"class":264},[220,76725,76726,76728,76730],{"class":222,"line":179},[220,76727,364],{"class":264},[220,76729,76647],{"class":420},[220,76731,359],{"class":264},[220,76733,76734,76736,76738],{"class":222,"line":389},[220,76735,2550],{"class":264},[220,76737,2553],{"class":420},[220,76739,386],{"class":264},[220,76741,76742,76744,76746],{"class":222,"line":399},[220,76743,2567],{"class":264},[220,76745,76647],{"class":420},[220,76747,359],{"class":264},[220,76749,76750,76752,76754],{"class":222,"line":644},[220,76751,402],{"class":264},[220,76753,347],{"class":420},[220,76755,359],{"class":264},[212,76757,76758],{"className":2844,"code":76669,"language":2846,"meta":178,"style":178},[99,76759,76760,76768,76776,76784,76792],{"__ignoreMap":178},[220,76761,76762,76764,76766],{"class":222,"line":223},[220,76763,343],{"class":264},[220,76765,347],{"class":420},[220,76767,359],{"class":264},[220,76769,76770,76772,76774],{"class":222,"line":179},[220,76771,364],{"class":264},[220,76773,76647],{"class":420},[220,76775,359],{"class":264},[220,76777,76778,76780,76782],{"class":222,"line":389},[220,76779,2550],{"class":264},[220,76781,2553],{"class":420},[220,76783,386],{"class":264},[220,76785,76786,76788,76790],{"class":222,"line":399},[220,76787,2567],{"class":264},[220,76789,76647],{"class":420},[220,76791,359],{"class":264},[220,76793,76794,76796,76798],{"class":222,"line":644},[220,76795,402],{"class":264},[220,76797,347],{"class":420},[220,76799,359],{"class":264},[212,76801,76802],{"className":468,"code":76669,"language":469,"meta":178,"style":178},[99,76803,76804,76812,76820,76828,76836],{"__ignoreMap":178},[220,76805,76806,76808,76810],{"class":222,"line":223},[220,76807,343],{"class":264},[220,76809,347],{"class":420},[220,76811,359],{"class":264},[220,76813,76814,76816,76818],{"class":222,"line":179},[220,76815,364],{"class":264},[220,76817,76647],{"class":420},[220,76819,359],{"class":264},[220,76821,76822,76824,76826],{"class":222,"line":389},[220,76823,2550],{"class":264},[220,76825,2553],{"class":420},[220,76827,386],{"class":264},[220,76829,76830,76832,76834],{"class":222,"line":399},[220,76831,2567],{"class":264},[220,76833,76647],{"class":420},[220,76835,359],{"class":264},[220,76837,76838,76840,76842],{"class":222,"line":644},[220,76839,402],{"class":264},[220,76841,347],{"class":420},[220,76843,359],{"class":264},[212,76845,76847],{"className":251,"code":76846,"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,76848,76849,76859,76863,76877,76881,76890,76898,76902,76906],{"__ignoreMap":178},[220,76850,76851,76853,76855,76857],{"class":222,"line":223},[220,76852,261],{"class":260},[220,76854,11364],{"class":264},[220,76856,268],{"class":260},[220,76858,11369],{"class":230},[220,76860,76861],{"class":222,"line":179},[220,76862,647],{"emptyLinePlaceholder":194},[220,76864,76865,76867,76869,76871,76873,76875],{"class":222,"line":389},[220,76866,1735],{"class":260},[220,76868,1738],{"class":420},[220,76870,1741],{"class":260},[220,76872,1744],{"class":260},[220,76874,1747],{"class":226},[220,76876,1750],{"class":264},[220,76878,76879],{"class":222,"line":399},[220,76880,1765],{"class":264},[220,76882,76883,76885,76888],{"class":222,"line":644},[220,76884,1770],{"class":264},[220,76886,76887],{"class":230},"'TimeTrail'",[220,76889,6860],{"class":264},[220,76891,76892,76894,76896],{"class":222,"line":650},[220,76893,6865],{"class":264},[220,76895,6409],{"class":230},[220,76897,2465],{"class":264},[220,76899,76900],{"class":222,"line":656},[220,76901,6882],{"class":264},[220,76903,76904],{"class":222,"line":673},[220,76905,1787],{"class":264},[220,76907,76908],{"class":222,"line":682},[220,76909,1792],{"class":264},[1504,76911,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":76913},[76914,76915],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":76647,"description":76655},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":76922,"title":76923,"body":76924,"category":36228,"componentType":25740,"description":76931,"extension":191,"meta":77239,"navigation":194,"path":77240,"requiresChild":194,"seo":77241,"stem":77242,"__hash__":77243},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":76925,"toc":77235},[76926,76929,76932,76934,76936,76939,76941,77233],[11,76927,76923],{"id":76928},"tint",[15,76930,76931],{},"Apply a color tint to the image",[31771,76933],{"component":76923},[23,76935,31775],{"id":26391},[31777,76937],{":props":76938},"[{\"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,76940,31783],{"id":31782},[246,76942,76943,77000,77054,77108,77162],{":tabs":1557},[212,76944,76946],{"className":334,"code":76945,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,76947,76948,76956,76963,76972,76976,76984,76992],{"__ignoreMap":178},[220,76949,76950,76952,76954],{"class":222,"line":223},[220,76951,343],{"class":264},[220,76953,347],{"class":346},[220,76955,359],{"class":264},[220,76957,76958,76960],{"class":222,"line":179},[220,76959,364],{"class":264},[220,76961,76962],{"class":346},"Tint\n",[220,76964,76965,76967,76969],{"class":222,"line":389},[220,76966,9487],{"class":226},[220,76968,353],{"class":264},[220,76970,76971],{"class":230},"\"#ff8800\"\n",[220,76973,76974],{"class":222,"line":399},[220,76975,31819],{"class":264},[220,76977,76978,76980,76982],{"class":222,"line":644},[220,76979,2550],{"class":264},[220,76981,2553],{"class":346},[220,76983,386],{"class":264},[220,76985,76986,76988,76990],{"class":222,"line":650},[220,76987,2567],{"class":264},[220,76989,76923],{"class":346},[220,76991,359],{"class":264},[220,76993,76994,76996,76998],{"class":222,"line":656},[220,76995,402],{"class":264},[220,76997,347],{"class":346},[220,76999,359],{"class":264},[212,77001,77002],{"className":409,"code":76945,"language":411,"meta":178,"style":178},[99,77003,77004,77012,77018,77026,77030,77038,77046],{"__ignoreMap":178},[220,77005,77006,77008,77010],{"class":222,"line":223},[220,77007,343],{"class":264},[220,77009,347],{"class":420},[220,77011,359],{"class":264},[220,77013,77014,77016],{"class":222,"line":179},[220,77015,364],{"class":264},[220,77017,76962],{"class":420},[220,77019,77020,77022,77024],{"class":222,"line":389},[220,77021,9487],{"class":226},[220,77023,353],{"class":260},[220,77025,76971],{"class":230},[220,77027,77028],{"class":222,"line":399},[220,77029,31819],{"class":264},[220,77031,77032,77034,77036],{"class":222,"line":644},[220,77033,2550],{"class":264},[220,77035,2553],{"class":420},[220,77037,386],{"class":264},[220,77039,77040,77042,77044],{"class":222,"line":650},[220,77041,2567],{"class":264},[220,77043,76923],{"class":420},[220,77045,359],{"class":264},[220,77047,77048,77050,77052],{"class":222,"line":656},[220,77049,402],{"class":264},[220,77051,347],{"class":420},[220,77053,359],{"class":264},[212,77055,77056],{"className":2844,"code":76945,"language":2846,"meta":178,"style":178},[99,77057,77058,77066,77072,77080,77084,77092,77100],{"__ignoreMap":178},[220,77059,77060,77062,77064],{"class":222,"line":223},[220,77061,343],{"class":264},[220,77063,347],{"class":420},[220,77065,359],{"class":264},[220,77067,77068,77070],{"class":222,"line":179},[220,77069,364],{"class":264},[220,77071,76962],{"class":420},[220,77073,77074,77076,77078],{"class":222,"line":389},[220,77075,9487],{"class":226},[220,77077,353],{"class":264},[220,77079,76971],{"class":230},[220,77081,77082],{"class":222,"line":399},[220,77083,31819],{"class":264},[220,77085,77086,77088,77090],{"class":222,"line":644},[220,77087,2550],{"class":264},[220,77089,2553],{"class":420},[220,77091,386],{"class":264},[220,77093,77094,77096,77098],{"class":222,"line":650},[220,77095,2567],{"class":264},[220,77097,76923],{"class":420},[220,77099,359],{"class":264},[220,77101,77102,77104,77106],{"class":222,"line":656},[220,77103,402],{"class":264},[220,77105,347],{"class":420},[220,77107,359],{"class":264},[212,77109,77110],{"className":468,"code":76945,"language":469,"meta":178,"style":178},[99,77111,77112,77120,77126,77134,77138,77146,77154],{"__ignoreMap":178},[220,77113,77114,77116,77118],{"class":222,"line":223},[220,77115,343],{"class":264},[220,77117,347],{"class":420},[220,77119,359],{"class":264},[220,77121,77122,77124],{"class":222,"line":179},[220,77123,364],{"class":264},[220,77125,76962],{"class":420},[220,77127,77128,77130,77132],{"class":222,"line":389},[220,77129,9487],{"class":226},[220,77131,353],{"class":260},[220,77133,76971],{"class":230},[220,77135,77136],{"class":222,"line":399},[220,77137,31819],{"class":264},[220,77139,77140,77142,77144],{"class":222,"line":644},[220,77141,2550],{"class":264},[220,77143,2553],{"class":420},[220,77145,386],{"class":264},[220,77147,77148,77150,77152],{"class":222,"line":650},[220,77149,2567],{"class":264},[220,77151,76923],{"class":420},[220,77153,359],{"class":264},[220,77155,77156,77158,77160],{"class":222,"line":656},[220,77157,402],{"class":264},[220,77159,347],{"class":420},[220,77161,359],{"class":264},[212,77163,77165],{"className":251,"code":77164,"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,77166,77167,77177,77181,77195,77199,77213,77221,77225,77229],{"__ignoreMap":178},[220,77168,77169,77171,77173,77175],{"class":222,"line":223},[220,77170,261],{"class":260},[220,77172,11364],{"class":264},[220,77174,268],{"class":260},[220,77176,11369],{"class":230},[220,77178,77179],{"class":222,"line":179},[220,77180,647],{"emptyLinePlaceholder":194},[220,77182,77183,77185,77187,77189,77191,77193],{"class":222,"line":389},[220,77184,1735],{"class":260},[220,77186,1738],{"class":420},[220,77188,1741],{"class":260},[220,77190,1744],{"class":260},[220,77192,1747],{"class":226},[220,77194,1750],{"class":264},[220,77196,77197],{"class":222,"line":399},[220,77198,1765],{"class":264},[220,77200,77201,77203,77206,77208,77211],{"class":222,"line":644},[220,77202,1770],{"class":264},[220,77204,77205],{"class":230},"'Tint'",[220,77207,1776],{"class":264},[220,77209,77210],{"class":230},"'#ff8800'",[220,77212,7397],{"class":264},[220,77214,77215,77217,77219],{"class":222,"line":650},[220,77216,6865],{"class":264},[220,77218,6409],{"class":230},[220,77220,2465],{"class":264},[220,77222,77223],{"class":222,"line":656},[220,77224,6882],{"class":264},[220,77226,77227],{"class":222,"line":673},[220,77228,1787],{"class":264},[220,77230,77231],{"class":222,"line":682},[220,77232,1792],{"class":264},[1504,77234,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77236},[77237,77238],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":76923,"description":76931},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":77245,"title":77246,"body":77247,"category":15765,"componentType":25734,"description":77254,"extension":191,"meta":77484,"navigation":194,"path":77485,"requiresChild":32390,"seo":77486,"stem":77487,"__hash__":77488},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":77248,"toc":77480},[77249,77252,77255,77257,77259,77262,77264,77478],[11,77250,77246],{"id":77251},"trapezoid",[15,77253,77254],{},"Trapezoid with adjustable top and bottom widths and height",[31771,77256],{"component":77246},[23,77258,31775],{"id":26391},[31777,77260],{":props":77261},"[{\"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,77263,31783],{"id":31782},[246,77265,77266,77306,77344,77382,77420],{":tabs":1557},[212,77267,77269],{"className":334,"code":77268,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,77270,77271,77279,77286,77294,77298],{"__ignoreMap":178},[220,77272,77273,77275,77277],{"class":222,"line":223},[220,77274,343],{"class":264},[220,77276,347],{"class":346},[220,77278,359],{"class":264},[220,77280,77281,77283],{"class":222,"line":179},[220,77282,364],{"class":264},[220,77284,77285],{"class":346},"Trapezoid\n",[220,77287,77288,77290,77292],{"class":222,"line":389},[220,77289,9487],{"class":226},[220,77291,353],{"class":264},[220,77293,9443],{"class":230},[220,77295,77296],{"class":222,"line":399},[220,77297,1234],{"class":264},[220,77299,77300,77302,77304],{"class":222,"line":644},[220,77301,402],{"class":264},[220,77303,347],{"class":346},[220,77305,359],{"class":264},[212,77307,77308],{"className":409,"code":77268,"language":411,"meta":178,"style":178},[99,77309,77310,77318,77324,77332,77336],{"__ignoreMap":178},[220,77311,77312,77314,77316],{"class":222,"line":223},[220,77313,343],{"class":264},[220,77315,347],{"class":420},[220,77317,359],{"class":264},[220,77319,77320,77322],{"class":222,"line":179},[220,77321,364],{"class":264},[220,77323,77285],{"class":420},[220,77325,77326,77328,77330],{"class":222,"line":389},[220,77327,9487],{"class":226},[220,77329,353],{"class":260},[220,77331,9443],{"class":230},[220,77333,77334],{"class":222,"line":399},[220,77335,1234],{"class":264},[220,77337,77338,77340,77342],{"class":222,"line":644},[220,77339,402],{"class":264},[220,77341,347],{"class":420},[220,77343,359],{"class":264},[212,77345,77346],{"className":2844,"code":77268,"language":2846,"meta":178,"style":178},[99,77347,77348,77356,77362,77370,77374],{"__ignoreMap":178},[220,77349,77350,77352,77354],{"class":222,"line":223},[220,77351,343],{"class":264},[220,77353,347],{"class":420},[220,77355,359],{"class":264},[220,77357,77358,77360],{"class":222,"line":179},[220,77359,364],{"class":264},[220,77361,77285],{"class":420},[220,77363,77364,77366,77368],{"class":222,"line":389},[220,77365,9487],{"class":226},[220,77367,353],{"class":264},[220,77369,9443],{"class":230},[220,77371,77372],{"class":222,"line":399},[220,77373,1234],{"class":264},[220,77375,77376,77378,77380],{"class":222,"line":644},[220,77377,402],{"class":264},[220,77379,347],{"class":420},[220,77381,359],{"class":264},[212,77383,77384],{"className":468,"code":77268,"language":469,"meta":178,"style":178},[99,77385,77386,77394,77400,77408,77412],{"__ignoreMap":178},[220,77387,77388,77390,77392],{"class":222,"line":223},[220,77389,343],{"class":264},[220,77391,347],{"class":420},[220,77393,359],{"class":264},[220,77395,77396,77398],{"class":222,"line":179},[220,77397,364],{"class":264},[220,77399,77285],{"class":420},[220,77401,77402,77404,77406],{"class":222,"line":389},[220,77403,9487],{"class":226},[220,77405,353],{"class":260},[220,77407,9443],{"class":230},[220,77409,77410],{"class":222,"line":399},[220,77411,1234],{"class":264},[220,77413,77414,77416,77418],{"class":222,"line":644},[220,77415,402],{"class":264},[220,77417,347],{"class":420},[220,77419,359],{"class":264},[212,77421,77423],{"className":251,"code":77422,"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,77424,77425,77435,77439,77453,77457,77470,77474],{"__ignoreMap":178},[220,77426,77427,77429,77431,77433],{"class":222,"line":223},[220,77428,261],{"class":260},[220,77430,11364],{"class":264},[220,77432,268],{"class":260},[220,77434,11369],{"class":230},[220,77436,77437],{"class":222,"line":179},[220,77438,647],{"emptyLinePlaceholder":194},[220,77440,77441,77443,77445,77447,77449,77451],{"class":222,"line":389},[220,77442,1735],{"class":260},[220,77444,1738],{"class":420},[220,77446,1741],{"class":260},[220,77448,1744],{"class":260},[220,77450,1747],{"class":226},[220,77452,1750],{"class":264},[220,77454,77455],{"class":222,"line":399},[220,77456,1765],{"class":264},[220,77458,77459,77461,77464,77466,77468],{"class":222,"line":644},[220,77460,1770],{"class":264},[220,77462,77463],{"class":230},"'Trapezoid'",[220,77465,1776],{"class":264},[220,77467,10021],{"class":230},[220,77469,1782],{"class":264},[220,77471,77472],{"class":222,"line":650},[220,77473,1787],{"class":264},[220,77475,77476],{"class":222,"line":656},[220,77477,1792],{"class":264},[1504,77479,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77481},[77482,77483],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":77246,"description":77254},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":77490,"title":77491,"body":77492,"category":32923,"componentType":25734,"description":77499,"extension":191,"meta":77684,"navigation":194,"path":77685,"requiresChild":32390,"seo":77686,"stem":77687,"__hash__":77688},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":77493,"toc":77680},[77494,77497,77500,77502,77504,77507,77509,77678],[11,77495,77491],{"id":77496},"triangulargrid",[15,77498,77499],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31771,77501],{"component":77491},[23,77503,31775],{"id":26391},[31777,77505],{":props":77506},"[{\"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,77508,31783],{"id":31782},[246,77510,77511,77540,77568,77596,77624],{":tabs":1557},[212,77512,77514],{"className":334,"code":77513,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,77515,77516,77524,77532],{"__ignoreMap":178},[220,77517,77518,77520,77522],{"class":222,"line":223},[220,77519,343],{"class":264},[220,77521,347],{"class":346},[220,77523,359],{"class":264},[220,77525,77526,77528,77530],{"class":222,"line":179},[220,77527,364],{"class":264},[220,77529,77491],{"class":346},[220,77531,386],{"class":264},[220,77533,77534,77536,77538],{"class":222,"line":389},[220,77535,402],{"class":264},[220,77537,347],{"class":346},[220,77539,359],{"class":264},[212,77541,77542],{"className":409,"code":77513,"language":411,"meta":178,"style":178},[99,77543,77544,77552,77560],{"__ignoreMap":178},[220,77545,77546,77548,77550],{"class":222,"line":223},[220,77547,343],{"class":264},[220,77549,347],{"class":420},[220,77551,359],{"class":264},[220,77553,77554,77556,77558],{"class":222,"line":179},[220,77555,364],{"class":264},[220,77557,77491],{"class":420},[220,77559,386],{"class":264},[220,77561,77562,77564,77566],{"class":222,"line":389},[220,77563,402],{"class":264},[220,77565,347],{"class":420},[220,77567,359],{"class":264},[212,77569,77570],{"className":2844,"code":77513,"language":2846,"meta":178,"style":178},[99,77571,77572,77580,77588],{"__ignoreMap":178},[220,77573,77574,77576,77578],{"class":222,"line":223},[220,77575,343],{"class":264},[220,77577,347],{"class":420},[220,77579,359],{"class":264},[220,77581,77582,77584,77586],{"class":222,"line":179},[220,77583,364],{"class":264},[220,77585,77491],{"class":420},[220,77587,386],{"class":264},[220,77589,77590,77592,77594],{"class":222,"line":389},[220,77591,402],{"class":264},[220,77593,347],{"class":420},[220,77595,359],{"class":264},[212,77597,77598],{"className":468,"code":77513,"language":469,"meta":178,"style":178},[99,77599,77600,77608,77616],{"__ignoreMap":178},[220,77601,77602,77604,77606],{"class":222,"line":223},[220,77603,343],{"class":264},[220,77605,347],{"class":420},[220,77607,359],{"class":264},[220,77609,77610,77612,77614],{"class":222,"line":179},[220,77611,364],{"class":264},[220,77613,77491],{"class":420},[220,77615,386],{"class":264},[220,77617,77618,77620,77622],{"class":222,"line":389},[220,77619,402],{"class":264},[220,77621,347],{"class":420},[220,77623,359],{"class":264},[212,77625,77627],{"className":251,"code":77626,"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,77628,77629,77639,77643,77657,77661,77670,77674],{"__ignoreMap":178},[220,77630,77631,77633,77635,77637],{"class":222,"line":223},[220,77632,261],{"class":260},[220,77634,11364],{"class":264},[220,77636,268],{"class":260},[220,77638,11369],{"class":230},[220,77640,77641],{"class":222,"line":179},[220,77642,647],{"emptyLinePlaceholder":194},[220,77644,77645,77647,77649,77651,77653,77655],{"class":222,"line":389},[220,77646,1735],{"class":260},[220,77648,1738],{"class":420},[220,77650,1741],{"class":260},[220,77652,1744],{"class":260},[220,77654,1747],{"class":226},[220,77656,1750],{"class":264},[220,77658,77659],{"class":222,"line":399},[220,77660,1765],{"class":264},[220,77662,77663,77665,77668],{"class":222,"line":644},[220,77664,1770],{"class":264},[220,77666,77667],{"class":230},"'TriangularGrid'",[220,77669,2465],{"class":264},[220,77671,77672],{"class":222,"line":650},[220,77673,1787],{"class":264},[220,77675,77676],{"class":222,"line":656},[220,77677,1792],{"class":264},[1504,77679,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":77681},[77682,77683],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":77491,"description":77499},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":77690,"title":77691,"body":77692,"category":36228,"componentType":25740,"description":77699,"extension":191,"meta":77960,"navigation":194,"path":77961,"requiresChild":194,"seo":77962,"stem":77963,"__hash__":77964},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":77693,"toc":77956},[77694,77697,77700,77702,77704,77707,77709,77954],[11,77695,77691],{"id":77696},"tritone",[15,77698,77699],{},"Map colors to three tones: shadows, midtones, highlights",[31771,77701],{"component":77691},[23,77703,31775],{"id":26391},[31777,77705],{":props":77706},"[{\"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,77708,31783],{"id":31782},[246,77710,77711,77756,77800,77844,77888],{":tabs":1557},[212,77712,77714],{"className":334,"code":77713,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,77715,77716,77724,77732,77740,77748],{"__ignoreMap":178},[220,77717,77718,77720,77722],{"class":222,"line":223},[220,77719,343],{"class":264},[220,77721,347],{"class":346},[220,77723,359],{"class":264},[220,77725,77726,77728,77730],{"class":222,"line":179},[220,77727,364],{"class":264},[220,77729,77691],{"class":346},[220,77731,359],{"class":264},[220,77733,77734,77736,77738],{"class":222,"line":389},[220,77735,2550],{"class":264},[220,77737,2553],{"class":346},[220,77739,386],{"class":264},[220,77741,77742,77744,77746],{"class":222,"line":399},[220,77743,2567],{"class":264},[220,77745,77691],{"class":346},[220,77747,359],{"class":264},[220,77749,77750,77752,77754],{"class":222,"line":644},[220,77751,402],{"class":264},[220,77753,347],{"class":346},[220,77755,359],{"class":264},[212,77757,77758],{"className":409,"code":77713,"language":411,"meta":178,"style":178},[99,77759,77760,77768,77776,77784,77792],{"__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,77774],{"class":222,"line":179},[220,77771,364],{"class":264},[220,77773,77691],{"class":420},[220,77775,359],{"class":264},[220,77777,77778,77780,77782],{"class":222,"line":389},[220,77779,2550],{"class":264},[220,77781,2553],{"class":420},[220,77783,386],{"class":264},[220,77785,77786,77788,77790],{"class":222,"line":399},[220,77787,2567],{"class":264},[220,77789,77691],{"class":420},[220,77791,359],{"class":264},[220,77793,77794,77796,77798],{"class":222,"line":644},[220,77795,402],{"class":264},[220,77797,347],{"class":420},[220,77799,359],{"class":264},[212,77801,77802],{"className":2844,"code":77713,"language":2846,"meta":178,"style":178},[99,77803,77804,77812,77820,77828,77836],{"__ignoreMap":178},[220,77805,77806,77808,77810],{"class":222,"line":223},[220,77807,343],{"class":264},[220,77809,347],{"class":420},[220,77811,359],{"class":264},[220,77813,77814,77816,77818],{"class":222,"line":179},[220,77815,364],{"class":264},[220,77817,77691],{"class":420},[220,77819,359],{"class":264},[220,77821,77822,77824,77826],{"class":222,"line":389},[220,77823,2550],{"class":264},[220,77825,2553],{"class":420},[220,77827,386],{"class":264},[220,77829,77830,77832,77834],{"class":222,"line":399},[220,77831,2567],{"class":264},[220,77833,77691],{"class":420},[220,77835,359],{"class":264},[220,77837,77838,77840,77842],{"class":222,"line":644},[220,77839,402],{"class":264},[220,77841,347],{"class":420},[220,77843,359],{"class":264},[212,77845,77846],{"className":468,"code":77713,"language":469,"meta":178,"style":178},[99,77847,77848,77856,77864,77872,77880],{"__ignoreMap":178},[220,77849,77850,77852,77854],{"class":222,"line":223},[220,77851,343],{"class":264},[220,77853,347],{"class":420},[220,77855,359],{"class":264},[220,77857,77858,77860,77862],{"class":222,"line":179},[220,77859,364],{"class":264},[220,77861,77691],{"class":420},[220,77863,359],{"class":264},[220,77865,77866,77868,77870],{"class":222,"line":389},[220,77867,2550],{"class":264},[220,77869,2553],{"class":420},[220,77871,386],{"class":264},[220,77873,77874,77876,77878],{"class":222,"line":399},[220,77875,2567],{"class":264},[220,77877,77691],{"class":420},[220,77879,359],{"class":264},[220,77881,77882,77884,77886],{"class":222,"line":644},[220,77883,402],{"class":264},[220,77885,347],{"class":420},[220,77887,359],{"class":264},[212,77889,77891],{"className":251,"code":77890,"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,77892,77893,77903,77907,77921,77925,77934,77942,77946,77950],{"__ignoreMap":178},[220,77894,77895,77897,77899,77901],{"class":222,"line":223},[220,77896,261],{"class":260},[220,77898,11364],{"class":264},[220,77900,268],{"class":260},[220,77902,11369],{"class":230},[220,77904,77905],{"class":222,"line":179},[220,77906,647],{"emptyLinePlaceholder":194},[220,77908,77909,77911,77913,77915,77917,77919],{"class":222,"line":389},[220,77910,1735],{"class":260},[220,77912,1738],{"class":420},[220,77914,1741],{"class":260},[220,77916,1744],{"class":260},[220,77918,1747],{"class":226},[220,77920,1750],{"class":264},[220,77922,77923],{"class":222,"line":399},[220,77924,1765],{"class":264},[220,77926,77927,77929,77932],{"class":222,"line":644},[220,77928,1770],{"class":264},[220,77930,77931],{"class":230},"'Tritone'",[220,77933,6860],{"class":264},[220,77935,77936,77938,77940],{"class":222,"line":650},[220,77937,6865],{"class":264},[220,77939,6409],{"class":230},[220,77941,2465],{"class":264},[220,77943,77944],{"class":222,"line":656},[220,77945,6882],{"class":264},[220,77947,77948],{"class":222,"line":673},[220,77949,1787],{"class":264},[220,77951,77952],{"class":222,"line":682},[220,77953,1792],{"class":264},[1504,77955,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":77957},[77958,77959],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":77691,"description":77699},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":77966,"title":77967,"body":77968,"category":32923,"componentType":25734,"description":77975,"extension":191,"meta":78160,"navigation":194,"path":78161,"requiresChild":32390,"seo":78162,"stem":78163,"__hash__":78164},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":77969,"toc":78156},[77970,77973,77976,77978,77980,77983,77985,78154],[11,77971,77967],{"id":77972},"truchet",[15,77974,77975],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31771,77977],{"component":77967},[23,77979,31775],{"id":26391},[31777,77981],{":props":77982},"[{\"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,77984,31783],{"id":31782},[246,77986,77987,78016,78044,78072,78100],{":tabs":1557},[212,77988,77990],{"className":334,"code":77989,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,77991,77992,78000,78008],{"__ignoreMap":178},[220,77993,77994,77996,77998],{"class":222,"line":223},[220,77995,343],{"class":264},[220,77997,347],{"class":346},[220,77999,359],{"class":264},[220,78001,78002,78004,78006],{"class":222,"line":179},[220,78003,364],{"class":264},[220,78005,77967],{"class":346},[220,78007,386],{"class":264},[220,78009,78010,78012,78014],{"class":222,"line":389},[220,78011,402],{"class":264},[220,78013,347],{"class":346},[220,78015,359],{"class":264},[212,78017,78018],{"className":409,"code":77989,"language":411,"meta":178,"style":178},[99,78019,78020,78028,78036],{"__ignoreMap":178},[220,78021,78022,78024,78026],{"class":222,"line":223},[220,78023,343],{"class":264},[220,78025,347],{"class":420},[220,78027,359],{"class":264},[220,78029,78030,78032,78034],{"class":222,"line":179},[220,78031,364],{"class":264},[220,78033,77967],{"class":420},[220,78035,386],{"class":264},[220,78037,78038,78040,78042],{"class":222,"line":389},[220,78039,402],{"class":264},[220,78041,347],{"class":420},[220,78043,359],{"class":264},[212,78045,78046],{"className":2844,"code":77989,"language":2846,"meta":178,"style":178},[99,78047,78048,78056,78064],{"__ignoreMap":178},[220,78049,78050,78052,78054],{"class":222,"line":223},[220,78051,343],{"class":264},[220,78053,347],{"class":420},[220,78055,359],{"class":264},[220,78057,78058,78060,78062],{"class":222,"line":179},[220,78059,364],{"class":264},[220,78061,77967],{"class":420},[220,78063,386],{"class":264},[220,78065,78066,78068,78070],{"class":222,"line":389},[220,78067,402],{"class":264},[220,78069,347],{"class":420},[220,78071,359],{"class":264},[212,78073,78074],{"className":468,"code":77989,"language":469,"meta":178,"style":178},[99,78075,78076,78084,78092],{"__ignoreMap":178},[220,78077,78078,78080,78082],{"class":222,"line":223},[220,78079,343],{"class":264},[220,78081,347],{"class":420},[220,78083,359],{"class":264},[220,78085,78086,78088,78090],{"class":222,"line":179},[220,78087,364],{"class":264},[220,78089,77967],{"class":420},[220,78091,386],{"class":264},[220,78093,78094,78096,78098],{"class":222,"line":389},[220,78095,402],{"class":264},[220,78097,347],{"class":420},[220,78099,359],{"class":264},[212,78101,78103],{"className":251,"code":78102,"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,78104,78105,78115,78119,78133,78137,78146,78150],{"__ignoreMap":178},[220,78106,78107,78109,78111,78113],{"class":222,"line":223},[220,78108,261],{"class":260},[220,78110,11364],{"class":264},[220,78112,268],{"class":260},[220,78114,11369],{"class":230},[220,78116,78117],{"class":222,"line":179},[220,78118,647],{"emptyLinePlaceholder":194},[220,78120,78121,78123,78125,78127,78129,78131],{"class":222,"line":389},[220,78122,1735],{"class":260},[220,78124,1738],{"class":420},[220,78126,1741],{"class":260},[220,78128,1744],{"class":260},[220,78130,1747],{"class":226},[220,78132,1750],{"class":264},[220,78134,78135],{"class":222,"line":399},[220,78136,1765],{"class":264},[220,78138,78139,78141,78144],{"class":222,"line":644},[220,78140,1770],{"class":264},[220,78142,78143],{"class":230},"'Truchet'",[220,78145,2465],{"class":264},[220,78147,78148],{"class":222,"line":650},[220,78149,1787],{"class":264},[220,78151,78152],{"class":222,"line":656},[220,78153,1792],{"class":264},[1504,78155,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":78157},[78158,78159],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":77967,"description":77975},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":78166,"title":78167,"body":78168,"category":33256,"componentType":25740,"description":78175,"extension":191,"meta":78492,"navigation":194,"path":78493,"requiresChild":194,"seo":78494,"stem":78495,"__hash__":78496},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":78169,"toc":78488},[78170,78173,78176,78178,78180,78183,78185,78486],[11,78171,78167],{"id":78172},"twirl",[15,78174,78175],{},"Rotate and twist content around a center point",[31771,78177],{"component":78167},[23,78179,31775],{"id":26391},[31777,78181],{":props":78182},"[{\"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,78184,31783],{"id":31782},[246,78186,78187,78243,78302,78358,78416],{":tabs":1557},[212,78188,78190],{"className":334,"code":78189,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,78191,78192,78200,78207,78215,78219,78227,78235],{"__ignoreMap":178},[220,78193,78194,78196,78198],{"class":222,"line":223},[220,78195,343],{"class":264},[220,78197,347],{"class":346},[220,78199,359],{"class":264},[220,78201,78202,78204],{"class":222,"line":179},[220,78203,364],{"class":264},[220,78205,78206],{"class":346},"Twirl\n",[220,78208,78209,78211,78213],{"class":222,"line":389},[220,78210,20228],{"class":226},[220,78212,353],{"class":264},[220,78214,36485],{"class":230},[220,78216,78217],{"class":222,"line":399},[220,78218,31819],{"class":264},[220,78220,78221,78223,78225],{"class":222,"line":644},[220,78222,2550],{"class":264},[220,78224,2553],{"class":346},[220,78226,386],{"class":264},[220,78228,78229,78231,78233],{"class":222,"line":650},[220,78230,2567],{"class":264},[220,78232,78167],{"class":346},[220,78234,359],{"class":264},[220,78236,78237,78239,78241],{"class":222,"line":656},[220,78238,402],{"class":264},[220,78240,347],{"class":346},[220,78242,359],{"class":264},[212,78244,78246],{"className":409,"code":78245,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,78247,78248,78256,78262,78274,78278,78286,78294],{"__ignoreMap":178},[220,78249,78250,78252,78254],{"class":222,"line":223},[220,78251,343],{"class":264},[220,78253,347],{"class":420},[220,78255,359],{"class":264},[220,78257,78258,78260],{"class":222,"line":179},[220,78259,364],{"class":264},[220,78261,78206],{"class":420},[220,78263,78264,78266,78268,78270,78272],{"class":222,"line":389},[220,78265,20339],{"class":226},[220,78267,353],{"class":260},[220,78269,743],{"class":264},[220,78271,8528],{"class":420},[220,78273,749],{"class":264},[220,78275,78276],{"class":222,"line":399},[220,78277,31819],{"class":264},[220,78279,78280,78282,78284],{"class":222,"line":644},[220,78281,2550],{"class":264},[220,78283,2553],{"class":420},[220,78285,386],{"class":264},[220,78287,78288,78290,78292],{"class":222,"line":650},[220,78289,2567],{"class":264},[220,78291,78167],{"class":420},[220,78293,359],{"class":264},[220,78295,78296,78298,78300],{"class":222,"line":656},[220,78297,402],{"class":264},[220,78299,347],{"class":420},[220,78301,359],{"class":264},[212,78303,78304],{"className":2844,"code":78245,"language":2846,"meta":178,"style":178},[99,78305,78306,78314,78320,78330,78334,78342,78350],{"__ignoreMap":178},[220,78307,78308,78310,78312],{"class":222,"line":223},[220,78309,343],{"class":264},[220,78311,347],{"class":420},[220,78313,359],{"class":264},[220,78315,78316,78318],{"class":222,"line":179},[220,78317,364],{"class":264},[220,78319,78206],{"class":420},[220,78321,78322,78324,78326,78328],{"class":222,"line":389},[220,78323,20339],{"class":226},[220,78325,29729],{"class":264},[220,78327,8528],{"class":420},[220,78329,749],{"class":264},[220,78331,78332],{"class":222,"line":399},[220,78333,31819],{"class":264},[220,78335,78336,78338,78340],{"class":222,"line":644},[220,78337,2550],{"class":264},[220,78339,2553],{"class":420},[220,78341,386],{"class":264},[220,78343,78344,78346,78348],{"class":222,"line":650},[220,78345,2567],{"class":264},[220,78347,78167],{"class":420},[220,78349,359],{"class":264},[220,78351,78352,78354,78356],{"class":222,"line":656},[220,78353,402],{"class":264},[220,78355,347],{"class":420},[220,78357,359],{"class":264},[212,78359,78360],{"className":468,"code":78245,"language":469,"meta":178,"style":178},[99,78361,78362,78370,78376,78388,78392,78400,78408],{"__ignoreMap":178},[220,78363,78364,78366,78368],{"class":222,"line":223},[220,78365,343],{"class":264},[220,78367,347],{"class":420},[220,78369,359],{"class":264},[220,78371,78372,78374],{"class":222,"line":179},[220,78373,364],{"class":264},[220,78375,78206],{"class":420},[220,78377,78378,78380,78382,78384,78386],{"class":222,"line":389},[220,78379,20339],{"class":226},[220,78381,353],{"class":260},[220,78383,743],{"class":264},[220,78385,8528],{"class":420},[220,78387,749],{"class":264},[220,78389,78390],{"class":222,"line":399},[220,78391,31819],{"class":264},[220,78393,78394,78396,78398],{"class":222,"line":644},[220,78395,2550],{"class":264},[220,78397,2553],{"class":420},[220,78399,386],{"class":264},[220,78401,78402,78404,78406],{"class":222,"line":650},[220,78403,2567],{"class":264},[220,78405,78167],{"class":420},[220,78407,359],{"class":264},[220,78409,78410,78412,78414],{"class":222,"line":656},[220,78411,402],{"class":264},[220,78413,347],{"class":420},[220,78415,359],{"class":264},[212,78417,78419],{"className":251,"code":78418,"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,78420,78421,78431,78435,78449,78453,78466,78474,78478,78482],{"__ignoreMap":178},[220,78422,78423,78425,78427,78429],{"class":222,"line":223},[220,78424,261],{"class":260},[220,78426,11364],{"class":264},[220,78428,268],{"class":260},[220,78430,11369],{"class":230},[220,78432,78433],{"class":222,"line":179},[220,78434,647],{"emptyLinePlaceholder":194},[220,78436,78437,78439,78441,78443,78445,78447],{"class":222,"line":389},[220,78438,1735],{"class":260},[220,78440,1738],{"class":420},[220,78442,1741],{"class":260},[220,78444,1744],{"class":260},[220,78446,1747],{"class":226},[220,78448,1750],{"class":264},[220,78450,78451],{"class":222,"line":399},[220,78452,1765],{"class":264},[220,78454,78455,78457,78460,78462,78464],{"class":222,"line":644},[220,78456,1770],{"class":264},[220,78458,78459],{"class":230},"'Twirl'",[220,78461,32063],{"class":264},[220,78463,8528],{"class":420},[220,78465,7397],{"class":264},[220,78467,78468,78470,78472],{"class":222,"line":650},[220,78469,6865],{"class":264},[220,78471,6409],{"class":230},[220,78473,2465],{"class":264},[220,78475,78476],{"class":222,"line":656},[220,78477,6882],{"class":264},[220,78479,78480],{"class":222,"line":673},[220,78481,1787],{"class":264},[220,78483,78484],{"class":222,"line":682},[220,78485,1792],{"class":264},[1504,78487,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78489},[78490,78491],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":78167,"description":78175},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":78498,"title":78499,"body":78500,"category":32666,"componentType":25740,"description":78507,"extension":191,"meta":78768,"navigation":194,"path":78769,"requiresChild":194,"seo":78770,"stem":78771,"__hash__":78772},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":78501,"toc":78764},[78502,78505,78508,78510,78512,78515,78517,78762],[11,78503,78499],{"id":78504},"vhs",[15,78506,78507],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31771,78509],{"component":78499},[23,78511,31775],{"id":26391},[31777,78513],{":props":78514},"[{\"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,78516,31783],{"id":31782},[246,78518,78519,78564,78608,78652,78696],{":tabs":1557},[212,78520,78522],{"className":334,"code":78521,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,78523,78524,78532,78540,78548,78556],{"__ignoreMap":178},[220,78525,78526,78528,78530],{"class":222,"line":223},[220,78527,343],{"class":264},[220,78529,347],{"class":346},[220,78531,359],{"class":264},[220,78533,78534,78536,78538],{"class":222,"line":179},[220,78535,364],{"class":264},[220,78537,78499],{"class":346},[220,78539,359],{"class":264},[220,78541,78542,78544,78546],{"class":222,"line":389},[220,78543,2550],{"class":264},[220,78545,2553],{"class":346},[220,78547,386],{"class":264},[220,78549,78550,78552,78554],{"class":222,"line":399},[220,78551,2567],{"class":264},[220,78553,78499],{"class":346},[220,78555,359],{"class":264},[220,78557,78558,78560,78562],{"class":222,"line":644},[220,78559,402],{"class":264},[220,78561,347],{"class":346},[220,78563,359],{"class":264},[212,78565,78566],{"className":409,"code":78521,"language":411,"meta":178,"style":178},[99,78567,78568,78576,78584,78592,78600],{"__ignoreMap":178},[220,78569,78570,78572,78574],{"class":222,"line":223},[220,78571,343],{"class":264},[220,78573,347],{"class":420},[220,78575,359],{"class":264},[220,78577,78578,78580,78582],{"class":222,"line":179},[220,78579,364],{"class":264},[220,78581,78499],{"class":420},[220,78583,359],{"class":264},[220,78585,78586,78588,78590],{"class":222,"line":389},[220,78587,2550],{"class":264},[220,78589,2553],{"class":420},[220,78591,386],{"class":264},[220,78593,78594,78596,78598],{"class":222,"line":399},[220,78595,2567],{"class":264},[220,78597,78499],{"class":420},[220,78599,359],{"class":264},[220,78601,78602,78604,78606],{"class":222,"line":644},[220,78603,402],{"class":264},[220,78605,347],{"class":420},[220,78607,359],{"class":264},[212,78609,78610],{"className":2844,"code":78521,"language":2846,"meta":178,"style":178},[99,78611,78612,78620,78628,78636,78644],{"__ignoreMap":178},[220,78613,78614,78616,78618],{"class":222,"line":223},[220,78615,343],{"class":264},[220,78617,347],{"class":420},[220,78619,359],{"class":264},[220,78621,78622,78624,78626],{"class":222,"line":179},[220,78623,364],{"class":264},[220,78625,78499],{"class":420},[220,78627,359],{"class":264},[220,78629,78630,78632,78634],{"class":222,"line":389},[220,78631,2550],{"class":264},[220,78633,2553],{"class":420},[220,78635,386],{"class":264},[220,78637,78638,78640,78642],{"class":222,"line":399},[220,78639,2567],{"class":264},[220,78641,78499],{"class":420},[220,78643,359],{"class":264},[220,78645,78646,78648,78650],{"class":222,"line":644},[220,78647,402],{"class":264},[220,78649,347],{"class":420},[220,78651,359],{"class":264},[212,78653,78654],{"className":468,"code":78521,"language":469,"meta":178,"style":178},[99,78655,78656,78664,78672,78680,78688],{"__ignoreMap":178},[220,78657,78658,78660,78662],{"class":222,"line":223},[220,78659,343],{"class":264},[220,78661,347],{"class":420},[220,78663,359],{"class":264},[220,78665,78666,78668,78670],{"class":222,"line":179},[220,78667,364],{"class":264},[220,78669,78499],{"class":420},[220,78671,359],{"class":264},[220,78673,78674,78676,78678],{"class":222,"line":389},[220,78675,2550],{"class":264},[220,78677,2553],{"class":420},[220,78679,386],{"class":264},[220,78681,78682,78684,78686],{"class":222,"line":399},[220,78683,2567],{"class":264},[220,78685,78499],{"class":420},[220,78687,359],{"class":264},[220,78689,78690,78692,78694],{"class":222,"line":644},[220,78691,402],{"class":264},[220,78693,347],{"class":420},[220,78695,359],{"class":264},[212,78697,78699],{"className":251,"code":78698,"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,78700,78701,78711,78715,78729,78733,78742,78750,78754,78758],{"__ignoreMap":178},[220,78702,78703,78705,78707,78709],{"class":222,"line":223},[220,78704,261],{"class":260},[220,78706,11364],{"class":264},[220,78708,268],{"class":260},[220,78710,11369],{"class":230},[220,78712,78713],{"class":222,"line":179},[220,78714,647],{"emptyLinePlaceholder":194},[220,78716,78717,78719,78721,78723,78725,78727],{"class":222,"line":389},[220,78718,1735],{"class":260},[220,78720,1738],{"class":420},[220,78722,1741],{"class":260},[220,78724,1744],{"class":260},[220,78726,1747],{"class":226},[220,78728,1750],{"class":264},[220,78730,78731],{"class":222,"line":399},[220,78732,1765],{"class":264},[220,78734,78735,78737,78740],{"class":222,"line":644},[220,78736,1770],{"class":264},[220,78738,78739],{"class":230},"'VHS'",[220,78741,6860],{"class":264},[220,78743,78744,78746,78748],{"class":222,"line":650},[220,78745,6865],{"class":264},[220,78747,6409],{"class":230},[220,78749,2465],{"class":264},[220,78751,78752],{"class":222,"line":656},[220,78753,6882],{"class":264},[220,78755,78756],{"class":222,"line":673},[220,78757,1787],{"class":264},[220,78759,78760],{"class":222,"line":682},[220,78761,1792],{"class":264},[1504,78763,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":78765},[78766,78767],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":78499,"description":78507},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":78774,"title":78775,"body":78776,"category":33533,"componentType":25740,"description":78783,"extension":191,"meta":79044,"navigation":194,"path":79045,"requiresChild":194,"seo":79046,"stem":79047,"__hash__":79048},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":78777,"toc":79040},[78778,78781,78784,78786,78788,78791,78793,79038],[11,78779,78775],{"id":78780},"venetianblinds",[15,78782,78783],{},"Wipe the content away behind a set of parallel closing strips",[31771,78785],{"component":78775},[23,78787,31775],{"id":26391},[31777,78789],{":props":78790},"[{\"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,78792,31783],{"id":31782},[246,78794,78795,78840,78884,78928,78972],{":tabs":1557},[212,78796,78798],{"className":334,"code":78797,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,78799,78800,78808,78816,78824,78832],{"__ignoreMap":178},[220,78801,78802,78804,78806],{"class":222,"line":223},[220,78803,343],{"class":264},[220,78805,347],{"class":346},[220,78807,359],{"class":264},[220,78809,78810,78812,78814],{"class":222,"line":179},[220,78811,364],{"class":264},[220,78813,78775],{"class":346},[220,78815,359],{"class":264},[220,78817,78818,78820,78822],{"class":222,"line":389},[220,78819,2550],{"class":264},[220,78821,2553],{"class":346},[220,78823,386],{"class":264},[220,78825,78826,78828,78830],{"class":222,"line":399},[220,78827,2567],{"class":264},[220,78829,78775],{"class":346},[220,78831,359],{"class":264},[220,78833,78834,78836,78838],{"class":222,"line":644},[220,78835,402],{"class":264},[220,78837,347],{"class":346},[220,78839,359],{"class":264},[212,78841,78842],{"className":409,"code":78797,"language":411,"meta":178,"style":178},[99,78843,78844,78852,78860,78868,78876],{"__ignoreMap":178},[220,78845,78846,78848,78850],{"class":222,"line":223},[220,78847,343],{"class":264},[220,78849,347],{"class":420},[220,78851,359],{"class":264},[220,78853,78854,78856,78858],{"class":222,"line":179},[220,78855,364],{"class":264},[220,78857,78775],{"class":420},[220,78859,359],{"class":264},[220,78861,78862,78864,78866],{"class":222,"line":389},[220,78863,2550],{"class":264},[220,78865,2553],{"class":420},[220,78867,386],{"class":264},[220,78869,78870,78872,78874],{"class":222,"line":399},[220,78871,2567],{"class":264},[220,78873,78775],{"class":420},[220,78875,359],{"class":264},[220,78877,78878,78880,78882],{"class":222,"line":644},[220,78879,402],{"class":264},[220,78881,347],{"class":420},[220,78883,359],{"class":264},[212,78885,78886],{"className":2844,"code":78797,"language":2846,"meta":178,"style":178},[99,78887,78888,78896,78904,78912,78920],{"__ignoreMap":178},[220,78889,78890,78892,78894],{"class":222,"line":223},[220,78891,343],{"class":264},[220,78893,347],{"class":420},[220,78895,359],{"class":264},[220,78897,78898,78900,78902],{"class":222,"line":179},[220,78899,364],{"class":264},[220,78901,78775],{"class":420},[220,78903,359],{"class":264},[220,78905,78906,78908,78910],{"class":222,"line":389},[220,78907,2550],{"class":264},[220,78909,2553],{"class":420},[220,78911,386],{"class":264},[220,78913,78914,78916,78918],{"class":222,"line":399},[220,78915,2567],{"class":264},[220,78917,78775],{"class":420},[220,78919,359],{"class":264},[220,78921,78922,78924,78926],{"class":222,"line":644},[220,78923,402],{"class":264},[220,78925,347],{"class":420},[220,78927,359],{"class":264},[212,78929,78930],{"className":468,"code":78797,"language":469,"meta":178,"style":178},[99,78931,78932,78940,78948,78956,78964],{"__ignoreMap":178},[220,78933,78934,78936,78938],{"class":222,"line":223},[220,78935,343],{"class":264},[220,78937,347],{"class":420},[220,78939,359],{"class":264},[220,78941,78942,78944,78946],{"class":222,"line":179},[220,78943,364],{"class":264},[220,78945,78775],{"class":420},[220,78947,359],{"class":264},[220,78949,78950,78952,78954],{"class":222,"line":389},[220,78951,2550],{"class":264},[220,78953,2553],{"class":420},[220,78955,386],{"class":264},[220,78957,78958,78960,78962],{"class":222,"line":399},[220,78959,2567],{"class":264},[220,78961,78775],{"class":420},[220,78963,359],{"class":264},[220,78965,78966,78968,78970],{"class":222,"line":644},[220,78967,402],{"class":264},[220,78969,347],{"class":420},[220,78971,359],{"class":264},[212,78973,78975],{"className":251,"code":78974,"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,78976,78977,78987,78991,79005,79009,79018,79026,79030,79034],{"__ignoreMap":178},[220,78978,78979,78981,78983,78985],{"class":222,"line":223},[220,78980,261],{"class":260},[220,78982,11364],{"class":264},[220,78984,268],{"class":260},[220,78986,11369],{"class":230},[220,78988,78989],{"class":222,"line":179},[220,78990,647],{"emptyLinePlaceholder":194},[220,78992,78993,78995,78997,78999,79001,79003],{"class":222,"line":389},[220,78994,1735],{"class":260},[220,78996,1738],{"class":420},[220,78998,1741],{"class":260},[220,79000,1744],{"class":260},[220,79002,1747],{"class":226},[220,79004,1750],{"class":264},[220,79006,79007],{"class":222,"line":399},[220,79008,1765],{"class":264},[220,79010,79011,79013,79016],{"class":222,"line":644},[220,79012,1770],{"class":264},[220,79014,79015],{"class":230},"'VenetianBlinds'",[220,79017,6860],{"class":264},[220,79019,79020,79022,79024],{"class":222,"line":650},[220,79021,6865],{"class":264},[220,79023,6409],{"class":230},[220,79025,2465],{"class":264},[220,79027,79028],{"class":222,"line":656},[220,79029,6882],{"class":264},[220,79031,79032],{"class":222,"line":673},[220,79033,1787],{"class":264},[220,79035,79036],{"class":222,"line":682},[220,79037,1792],{"class":264},[1504,79039,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":79041},[79042,79043],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":78775,"description":78783},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":79050,"title":79051,"body":79052,"category":15765,"componentType":25734,"description":79059,"extension":191,"meta":79336,"navigation":194,"path":79337,"requiresChild":32390,"seo":79338,"stem":79339,"__hash__":79340},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":79053,"toc":79332},[79054,79057,79060,79062,79064,79067,79069,79330],[11,79055,79051],{"id":79056},"vesica",[15,79058,79059],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31771,79061],{"component":79051},[23,79063,31775],{"id":26391},[31777,79065],{":props":79066},"[{\"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,79068,31783],{"id":31782},[246,79070,79071,79119,79170,79218,79268],{":tabs":1557},[212,79072,79074],{"className":334,"code":79073,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,79075,79076,79084,79091,79099,79107,79111],{"__ignoreMap":178},[220,79077,79078,79080,79082],{"class":222,"line":223},[220,79079,343],{"class":264},[220,79081,347],{"class":346},[220,79083,359],{"class":264},[220,79085,79086,79088],{"class":222,"line":179},[220,79087,364],{"class":264},[220,79089,79090],{"class":346},"Vesica\n",[220,79092,79093,79095,79097],{"class":222,"line":389},[220,79094,9487],{"class":226},[220,79096,353],{"class":264},[220,79098,9443],{"class":230},[220,79100,79101,79103,79105],{"class":222,"line":399},[220,79102,17262],{"class":226},[220,79104,353],{"class":264},[220,79106,41451],{"class":230},[220,79108,79109],{"class":222,"line":644},[220,79110,1234],{"class":264},[220,79112,79113,79115,79117],{"class":222,"line":650},[220,79114,402],{"class":264},[220,79116,347],{"class":346},[220,79118,359],{"class":264},[212,79120,79122],{"className":409,"code":79121,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,79123,79124,79132,79138,79146,79158,79162],{"__ignoreMap":178},[220,79125,79126,79128,79130],{"class":222,"line":223},[220,79127,343],{"class":264},[220,79129,347],{"class":420},[220,79131,359],{"class":264},[220,79133,79134,79136],{"class":222,"line":179},[220,79135,364],{"class":264},[220,79137,79090],{"class":420},[220,79139,79140,79142,79144],{"class":222,"line":389},[220,79141,9487],{"class":226},[220,79143,353],{"class":260},[220,79145,9443],{"class":230},[220,79147,79148,79150,79152,79154,79156],{"class":222,"line":399},[220,79149,9497],{"class":226},[220,79151,353],{"class":260},[220,79153,743],{"class":264},[220,79155,21005],{"class":420},[220,79157,749],{"class":264},[220,79159,79160],{"class":222,"line":644},[220,79161,1234],{"class":264},[220,79163,79164,79166,79168],{"class":222,"line":650},[220,79165,402],{"class":264},[220,79167,347],{"class":420},[220,79169,359],{"class":264},[212,79171,79172],{"className":2844,"code":79121,"language":2846,"meta":178,"style":178},[99,79173,79174,79182,79188,79196,79206,79210],{"__ignoreMap":178},[220,79175,79176,79178,79180],{"class":222,"line":223},[220,79177,343],{"class":264},[220,79179,347],{"class":420},[220,79181,359],{"class":264},[220,79183,79184,79186],{"class":222,"line":179},[220,79185,364],{"class":264},[220,79187,79090],{"class":420},[220,79189,79190,79192,79194],{"class":222,"line":389},[220,79191,9487],{"class":226},[220,79193,353],{"class":264},[220,79195,9443],{"class":230},[220,79197,79198,79200,79202,79204],{"class":222,"line":399},[220,79199,9497],{"class":226},[220,79201,29729],{"class":264},[220,79203,21005],{"class":420},[220,79205,749],{"class":264},[220,79207,79208],{"class":222,"line":644},[220,79209,1234],{"class":264},[220,79211,79212,79214,79216],{"class":222,"line":650},[220,79213,402],{"class":264},[220,79215,347],{"class":420},[220,79217,359],{"class":264},[212,79219,79220],{"className":468,"code":79121,"language":469,"meta":178,"style":178},[99,79221,79222,79230,79236,79244,79256,79260],{"__ignoreMap":178},[220,79223,79224,79226,79228],{"class":222,"line":223},[220,79225,343],{"class":264},[220,79227,347],{"class":420},[220,79229,359],{"class":264},[220,79231,79232,79234],{"class":222,"line":179},[220,79233,364],{"class":264},[220,79235,79090],{"class":420},[220,79237,79238,79240,79242],{"class":222,"line":389},[220,79239,9487],{"class":226},[220,79241,353],{"class":260},[220,79243,9443],{"class":230},[220,79245,79246,79248,79250,79252,79254],{"class":222,"line":399},[220,79247,9497],{"class":226},[220,79249,353],{"class":260},[220,79251,743],{"class":264},[220,79253,21005],{"class":420},[220,79255,749],{"class":264},[220,79257,79258],{"class":222,"line":644},[220,79259,1234],{"class":264},[220,79261,79262,79264,79266],{"class":222,"line":650},[220,79263,402],{"class":264},[220,79265,347],{"class":420},[220,79267,359],{"class":264},[212,79269,79271],{"className":251,"code":79270,"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,79272,79273,79283,79287,79301,79305,79322,79326],{"__ignoreMap":178},[220,79274,79275,79277,79279,79281],{"class":222,"line":223},[220,79276,261],{"class":260},[220,79278,11364],{"class":264},[220,79280,268],{"class":260},[220,79282,11369],{"class":230},[220,79284,79285],{"class":222,"line":179},[220,79286,647],{"emptyLinePlaceholder":194},[220,79288,79289,79291,79293,79295,79297,79299],{"class":222,"line":389},[220,79290,1735],{"class":260},[220,79292,1738],{"class":420},[220,79294,1741],{"class":260},[220,79296,1744],{"class":260},[220,79298,1747],{"class":226},[220,79300,1750],{"class":264},[220,79302,79303],{"class":222,"line":399},[220,79304,1765],{"class":264},[220,79306,79307,79309,79312,79314,79316,79318,79320],{"class":222,"line":644},[220,79308,1770],{"class":264},[220,79310,79311],{"class":230},"'Vesica'",[220,79313,1776],{"class":264},[220,79315,10021],{"class":230},[220,79317,6417],{"class":264},[220,79319,21005],{"class":420},[220,79321,1782],{"class":264},[220,79323,79324],{"class":222,"line":650},[220,79325,1787],{"class":264},[220,79327,79328],{"class":222,"line":656},[220,79329,1792],{"class":264},[1504,79331,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79333},[79334,79335],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":79051,"description":79059},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":79342,"title":79343,"body":79344,"category":36228,"componentType":25740,"description":79351,"extension":191,"meta":79669,"navigation":194,"path":79670,"requiresChild":194,"seo":79671,"stem":79672,"__hash__":79673},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":79345,"toc":79665},[79346,79349,79352,79354,79356,79359,79361,79663],[11,79347,79343],{"id":79348},"vibrance",[15,79350,79351],{},"Selective saturation adjustment protecting skin tones",[31771,79353],{"component":79343},[23,79355,31775],{"id":26391},[31777,79357],{":props":79358},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,79360,31783],{"id":31782},[246,79362,79363,79420,79479,79535,79593],{":tabs":1557},[212,79364,79366],{"className":334,"code":79365,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,79367,79368,79376,79383,79392,79396,79404,79412],{"__ignoreMap":178},[220,79369,79370,79372,79374],{"class":222,"line":223},[220,79371,343],{"class":264},[220,79373,347],{"class":346},[220,79375,359],{"class":264},[220,79377,79378,79380],{"class":222,"line":179},[220,79379,364],{"class":264},[220,79381,79382],{"class":346},"Vibrance\n",[220,79384,79385,79387,79389],{"class":222,"line":389},[220,79386,20228],{"class":226},[220,79388,353],{"class":264},[220,79390,79391],{"class":230},"\"0\"\n",[220,79393,79394],{"class":222,"line":399},[220,79395,31819],{"class":264},[220,79397,79398,79400,79402],{"class":222,"line":644},[220,79399,2550],{"class":264},[220,79401,2553],{"class":346},[220,79403,386],{"class":264},[220,79405,79406,79408,79410],{"class":222,"line":650},[220,79407,2567],{"class":264},[220,79409,79343],{"class":346},[220,79411,359],{"class":264},[220,79413,79414,79416,79418],{"class":222,"line":656},[220,79415,402],{"class":264},[220,79417,347],{"class":346},[220,79419,359],{"class":264},[212,79421,79423],{"className":409,"code":79422,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,79424,79425,79433,79439,79451,79455,79463,79471],{"__ignoreMap":178},[220,79426,79427,79429,79431],{"class":222,"line":223},[220,79428,343],{"class":264},[220,79430,347],{"class":420},[220,79432,359],{"class":264},[220,79434,79435,79437],{"class":222,"line":179},[220,79436,364],{"class":264},[220,79438,79382],{"class":420},[220,79440,79441,79443,79445,79447,79449],{"class":222,"line":389},[220,79442,20339],{"class":226},[220,79444,353],{"class":260},[220,79446,743],{"class":264},[220,79448,8524],{"class":420},[220,79450,749],{"class":264},[220,79452,79453],{"class":222,"line":399},[220,79454,31819],{"class":264},[220,79456,79457,79459,79461],{"class":222,"line":644},[220,79458,2550],{"class":264},[220,79460,2553],{"class":420},[220,79462,386],{"class":264},[220,79464,79465,79467,79469],{"class":222,"line":650},[220,79466,2567],{"class":264},[220,79468,79343],{"class":420},[220,79470,359],{"class":264},[220,79472,79473,79475,79477],{"class":222,"line":656},[220,79474,402],{"class":264},[220,79476,347],{"class":420},[220,79478,359],{"class":264},[212,79480,79481],{"className":2844,"code":79422,"language":2846,"meta":178,"style":178},[99,79482,79483,79491,79497,79507,79511,79519,79527],{"__ignoreMap":178},[220,79484,79485,79487,79489],{"class":222,"line":223},[220,79486,343],{"class":264},[220,79488,347],{"class":420},[220,79490,359],{"class":264},[220,79492,79493,79495],{"class":222,"line":179},[220,79494,364],{"class":264},[220,79496,79382],{"class":420},[220,79498,79499,79501,79503,79505],{"class":222,"line":389},[220,79500,20339],{"class":226},[220,79502,29729],{"class":264},[220,79504,8524],{"class":420},[220,79506,749],{"class":264},[220,79508,79509],{"class":222,"line":399},[220,79510,31819],{"class":264},[220,79512,79513,79515,79517],{"class":222,"line":644},[220,79514,2550],{"class":264},[220,79516,2553],{"class":420},[220,79518,386],{"class":264},[220,79520,79521,79523,79525],{"class":222,"line":650},[220,79522,2567],{"class":264},[220,79524,79343],{"class":420},[220,79526,359],{"class":264},[220,79528,79529,79531,79533],{"class":222,"line":656},[220,79530,402],{"class":264},[220,79532,347],{"class":420},[220,79534,359],{"class":264},[212,79536,79537],{"className":468,"code":79422,"language":469,"meta":178,"style":178},[99,79538,79539,79547,79553,79565,79569,79577,79585],{"__ignoreMap":178},[220,79540,79541,79543,79545],{"class":222,"line":223},[220,79542,343],{"class":264},[220,79544,347],{"class":420},[220,79546,359],{"class":264},[220,79548,79549,79551],{"class":222,"line":179},[220,79550,364],{"class":264},[220,79552,79382],{"class":420},[220,79554,79555,79557,79559,79561,79563],{"class":222,"line":389},[220,79556,20339],{"class":226},[220,79558,353],{"class":260},[220,79560,743],{"class":264},[220,79562,8524],{"class":420},[220,79564,749],{"class":264},[220,79566,79567],{"class":222,"line":399},[220,79568,31819],{"class":264},[220,79570,79571,79573,79575],{"class":222,"line":644},[220,79572,2550],{"class":264},[220,79574,2553],{"class":420},[220,79576,386],{"class":264},[220,79578,79579,79581,79583],{"class":222,"line":650},[220,79580,2567],{"class":264},[220,79582,79343],{"class":420},[220,79584,359],{"class":264},[220,79586,79587,79589,79591],{"class":222,"line":656},[220,79588,402],{"class":264},[220,79590,347],{"class":420},[220,79592,359],{"class":264},[212,79594,79596],{"className":251,"code":79595,"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,79597,79598,79608,79612,79626,79630,79643,79651,79655,79659],{"__ignoreMap":178},[220,79599,79600,79602,79604,79606],{"class":222,"line":223},[220,79601,261],{"class":260},[220,79603,11364],{"class":264},[220,79605,268],{"class":260},[220,79607,11369],{"class":230},[220,79609,79610],{"class":222,"line":179},[220,79611,647],{"emptyLinePlaceholder":194},[220,79613,79614,79616,79618,79620,79622,79624],{"class":222,"line":389},[220,79615,1735],{"class":260},[220,79617,1738],{"class":420},[220,79619,1741],{"class":260},[220,79621,1744],{"class":260},[220,79623,1747],{"class":226},[220,79625,1750],{"class":264},[220,79627,79628],{"class":222,"line":399},[220,79629,1765],{"class":264},[220,79631,79632,79634,79637,79639,79641],{"class":222,"line":644},[220,79633,1770],{"class":264},[220,79635,79636],{"class":230},"'Vibrance'",[220,79638,32063],{"class":264},[220,79640,8524],{"class":420},[220,79642,7397],{"class":264},[220,79644,79645,79647,79649],{"class":222,"line":650},[220,79646,6865],{"class":264},[220,79648,6409],{"class":230},[220,79650,2465],{"class":264},[220,79652,79653],{"class":222,"line":656},[220,79654,6882],{"class":264},[220,79656,79657],{"class":222,"line":673},[220,79658,1787],{"class":264},[220,79660,79661],{"class":222,"line":682},[220,79662,1792],{"class":264},[1504,79664,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79666},[79667,79668],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":79343,"description":79351},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":79675,"title":79676,"body":79677,"category":32923,"componentType":25734,"description":79684,"extension":191,"meta":79869,"navigation":194,"path":79870,"requiresChild":32390,"seo":79871,"stem":79872,"__hash__":79873},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":79678,"toc":79865},[79679,79682,79685,79687,79689,79692,79694,79863],[11,79680,79676],{"id":79681},"videotexture",[15,79683,79684],{},"Display a video with customizable playback and object-fit modes",[31771,79686],{"component":79676},[23,79688,31775],{"id":26391},[31777,79690],{":props":79691},"[{\"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,79693,31783],{"id":31782},[246,79695,79696,79725,79753,79781,79809],{":tabs":1557},[212,79697,79699],{"className":334,"code":79698,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,79700,79701,79709,79717],{"__ignoreMap":178},[220,79702,79703,79705,79707],{"class":222,"line":223},[220,79704,343],{"class":264},[220,79706,347],{"class":346},[220,79708,359],{"class":264},[220,79710,79711,79713,79715],{"class":222,"line":179},[220,79712,364],{"class":264},[220,79714,79676],{"class":346},[220,79716,386],{"class":264},[220,79718,79719,79721,79723],{"class":222,"line":389},[220,79720,402],{"class":264},[220,79722,347],{"class":346},[220,79724,359],{"class":264},[212,79726,79727],{"className":409,"code":79698,"language":411,"meta":178,"style":178},[99,79728,79729,79737,79745],{"__ignoreMap":178},[220,79730,79731,79733,79735],{"class":222,"line":223},[220,79732,343],{"class":264},[220,79734,347],{"class":420},[220,79736,359],{"class":264},[220,79738,79739,79741,79743],{"class":222,"line":179},[220,79740,364],{"class":264},[220,79742,79676],{"class":420},[220,79744,386],{"class":264},[220,79746,79747,79749,79751],{"class":222,"line":389},[220,79748,402],{"class":264},[220,79750,347],{"class":420},[220,79752,359],{"class":264},[212,79754,79755],{"className":2844,"code":79698,"language":2846,"meta":178,"style":178},[99,79756,79757,79765,79773],{"__ignoreMap":178},[220,79758,79759,79761,79763],{"class":222,"line":223},[220,79760,343],{"class":264},[220,79762,347],{"class":420},[220,79764,359],{"class":264},[220,79766,79767,79769,79771],{"class":222,"line":179},[220,79768,364],{"class":264},[220,79770,79676],{"class":420},[220,79772,386],{"class":264},[220,79774,79775,79777,79779],{"class":222,"line":389},[220,79776,402],{"class":264},[220,79778,347],{"class":420},[220,79780,359],{"class":264},[212,79782,79783],{"className":468,"code":79698,"language":469,"meta":178,"style":178},[99,79784,79785,79793,79801],{"__ignoreMap":178},[220,79786,79787,79789,79791],{"class":222,"line":223},[220,79788,343],{"class":264},[220,79790,347],{"class":420},[220,79792,359],{"class":264},[220,79794,79795,79797,79799],{"class":222,"line":179},[220,79796,364],{"class":264},[220,79798,79676],{"class":420},[220,79800,386],{"class":264},[220,79802,79803,79805,79807],{"class":222,"line":389},[220,79804,402],{"class":264},[220,79806,347],{"class":420},[220,79808,359],{"class":264},[212,79810,79812],{"className":251,"code":79811,"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,79813,79814,79824,79828,79842,79846,79855,79859],{"__ignoreMap":178},[220,79815,79816,79818,79820,79822],{"class":222,"line":223},[220,79817,261],{"class":260},[220,79819,11364],{"class":264},[220,79821,268],{"class":260},[220,79823,11369],{"class":230},[220,79825,79826],{"class":222,"line":179},[220,79827,647],{"emptyLinePlaceholder":194},[220,79829,79830,79832,79834,79836,79838,79840],{"class":222,"line":389},[220,79831,1735],{"class":260},[220,79833,1738],{"class":420},[220,79835,1741],{"class":260},[220,79837,1744],{"class":260},[220,79839,1747],{"class":226},[220,79841,1750],{"class":264},[220,79843,79844],{"class":222,"line":399},[220,79845,1765],{"class":264},[220,79847,79848,79850,79853],{"class":222,"line":644},[220,79849,1770],{"class":264},[220,79851,79852],{"class":230},"'VideoTexture'",[220,79854,2465],{"class":264},[220,79856,79857],{"class":222,"line":650},[220,79858,1787],{"class":264},[220,79860,79861],{"class":222,"line":656},[220,79862,1792],{"class":264},[1504,79864,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":79866},[79867,79868],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":79676,"description":79684},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":79875,"title":79876,"body":79877,"category":32666,"componentType":25740,"description":79884,"extension":191,"meta":80283,"navigation":194,"path":80284,"requiresChild":194,"seo":80285,"stem":80286,"__hash__":80287},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":79878,"toc":80279},[79879,79882,79885,79887,79889,79892,79894,80277],[11,79880,79876],{"id":79881},"vignette",[15,79883,79884],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31771,79886],{"component":79876},[23,79888,31775],{"id":26391},[31777,79890],{":props":79891},"[{\"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,79893,31783],{"id":31782},[246,79895,79896,79968,80047,80121,80199],{":tabs":1557},[212,79897,79899],{"className":334,"code":79898,"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,79900,79901,79909,79916,79924,79932,79940,79944,79952,79960],{"__ignoreMap":178},[220,79902,79903,79905,79907],{"class":222,"line":223},[220,79904,343],{"class":264},[220,79906,347],{"class":346},[220,79908,359],{"class":264},[220,79910,79911,79913],{"class":222,"line":179},[220,79912,364],{"class":264},[220,79914,79915],{"class":346},"Vignette\n",[220,79917,79918,79920,79922],{"class":222,"line":389},[220,79919,9487],{"class":226},[220,79921,353],{"class":264},[220,79923,19331],{"class":230},[220,79925,79926,79928,79930],{"class":222,"line":399},[220,79927,17262],{"class":226},[220,79929,353],{"class":264},[220,79931,42218],{"class":230},[220,79933,79934,79936,79938],{"class":222,"line":644},[220,79935,20228],{"class":226},[220,79937,353],{"class":264},[220,79939,36485],{"class":230},[220,79941,79942],{"class":222,"line":650},[220,79943,31819],{"class":264},[220,79945,79946,79948,79950],{"class":222,"line":656},[220,79947,2550],{"class":264},[220,79949,2553],{"class":346},[220,79951,386],{"class":264},[220,79953,79954,79956,79958],{"class":222,"line":673},[220,79955,2567],{"class":264},[220,79957,79876],{"class":346},[220,79959,359],{"class":264},[220,79961,79962,79964,79966],{"class":222,"line":682},[220,79963,402],{"class":264},[220,79965,347],{"class":346},[220,79967,359],{"class":264},[212,79969,79971],{"className":409,"code":79970,"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,79972,79973,79981,79987,79995,80007,80019,80023,80031,80039],{"__ignoreMap":178},[220,79974,79975,79977,79979],{"class":222,"line":223},[220,79976,343],{"class":264},[220,79978,347],{"class":420},[220,79980,359],{"class":264},[220,79982,79983,79985],{"class":222,"line":179},[220,79984,364],{"class":264},[220,79986,79915],{"class":420},[220,79988,79989,79991,79993],{"class":222,"line":389},[220,79990,9487],{"class":226},[220,79992,353],{"class":260},[220,79994,19331],{"class":230},[220,79996,79997,79999,80001,80003,80005],{"class":222,"line":399},[220,79998,9497],{"class":226},[220,80000,353],{"class":260},[220,80002,743],{"class":264},[220,80004,7605],{"class":420},[220,80006,749],{"class":264},[220,80008,80009,80011,80013,80015,80017],{"class":222,"line":644},[220,80010,20339],{"class":226},[220,80012,353],{"class":260},[220,80014,743],{"class":264},[220,80016,8528],{"class":420},[220,80018,749],{"class":264},[220,80020,80021],{"class":222,"line":650},[220,80022,31819],{"class":264},[220,80024,80025,80027,80029],{"class":222,"line":656},[220,80026,2550],{"class":264},[220,80028,2553],{"class":420},[220,80030,386],{"class":264},[220,80032,80033,80035,80037],{"class":222,"line":673},[220,80034,2567],{"class":264},[220,80036,79876],{"class":420},[220,80038,359],{"class":264},[220,80040,80041,80043,80045],{"class":222,"line":682},[220,80042,402],{"class":264},[220,80044,347],{"class":420},[220,80046,359],{"class":264},[212,80048,80049],{"className":2844,"code":79970,"language":2846,"meta":178,"style":178},[99,80050,80051,80059,80065,80073,80083,80093,80097,80105,80113],{"__ignoreMap":178},[220,80052,80053,80055,80057],{"class":222,"line":223},[220,80054,343],{"class":264},[220,80056,347],{"class":420},[220,80058,359],{"class":264},[220,80060,80061,80063],{"class":222,"line":179},[220,80062,364],{"class":264},[220,80064,79915],{"class":420},[220,80066,80067,80069,80071],{"class":222,"line":389},[220,80068,9487],{"class":226},[220,80070,353],{"class":264},[220,80072,19331],{"class":230},[220,80074,80075,80077,80079,80081],{"class":222,"line":399},[220,80076,9497],{"class":226},[220,80078,29729],{"class":264},[220,80080,7605],{"class":420},[220,80082,749],{"class":264},[220,80084,80085,80087,80089,80091],{"class":222,"line":644},[220,80086,20339],{"class":226},[220,80088,29729],{"class":264},[220,80090,8528],{"class":420},[220,80092,749],{"class":264},[220,80094,80095],{"class":222,"line":650},[220,80096,31819],{"class":264},[220,80098,80099,80101,80103],{"class":222,"line":656},[220,80100,2550],{"class":264},[220,80102,2553],{"class":420},[220,80104,386],{"class":264},[220,80106,80107,80109,80111],{"class":222,"line":673},[220,80108,2567],{"class":264},[220,80110,79876],{"class":420},[220,80112,359],{"class":264},[220,80114,80115,80117,80119],{"class":222,"line":682},[220,80116,402],{"class":264},[220,80118,347],{"class":420},[220,80120,359],{"class":264},[212,80122,80123],{"className":468,"code":79970,"language":469,"meta":178,"style":178},[99,80124,80125,80133,80139,80147,80159,80171,80175,80183,80191],{"__ignoreMap":178},[220,80126,80127,80129,80131],{"class":222,"line":223},[220,80128,343],{"class":264},[220,80130,347],{"class":420},[220,80132,359],{"class":264},[220,80134,80135,80137],{"class":222,"line":179},[220,80136,364],{"class":264},[220,80138,79915],{"class":420},[220,80140,80141,80143,80145],{"class":222,"line":389},[220,80142,9487],{"class":226},[220,80144,353],{"class":260},[220,80146,19331],{"class":230},[220,80148,80149,80151,80153,80155,80157],{"class":222,"line":399},[220,80150,9497],{"class":226},[220,80152,353],{"class":260},[220,80154,743],{"class":264},[220,80156,7605],{"class":420},[220,80158,749],{"class":264},[220,80160,80161,80163,80165,80167,80169],{"class":222,"line":644},[220,80162,20339],{"class":226},[220,80164,353],{"class":260},[220,80166,743],{"class":264},[220,80168,8528],{"class":420},[220,80170,749],{"class":264},[220,80172,80173],{"class":222,"line":650},[220,80174,31819],{"class":264},[220,80176,80177,80179,80181],{"class":222,"line":656},[220,80178,2550],{"class":264},[220,80180,2553],{"class":420},[220,80182,386],{"class":264},[220,80184,80185,80187,80189],{"class":222,"line":673},[220,80186,2567],{"class":264},[220,80188,79876],{"class":420},[220,80190,359],{"class":264},[220,80192,80193,80195,80197],{"class":222,"line":682},[220,80194,402],{"class":264},[220,80196,347],{"class":420},[220,80198,359],{"class":264},[212,80200,80202],{"className":251,"code":80201,"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,80203,80204,80214,80218,80232,80236,80257,80265,80269,80273],{"__ignoreMap":178},[220,80205,80206,80208,80210,80212],{"class":222,"line":223},[220,80207,261],{"class":260},[220,80209,11364],{"class":264},[220,80211,268],{"class":260},[220,80213,11369],{"class":230},[220,80215,80216],{"class":222,"line":179},[220,80217,647],{"emptyLinePlaceholder":194},[220,80219,80220,80222,80224,80226,80228,80230],{"class":222,"line":389},[220,80221,1735],{"class":260},[220,80223,1738],{"class":420},[220,80225,1741],{"class":260},[220,80227,1744],{"class":260},[220,80229,1747],{"class":226},[220,80231,1750],{"class":264},[220,80233,80234],{"class":222,"line":399},[220,80235,1765],{"class":264},[220,80237,80238,80240,80243,80245,80247,80249,80251,80253,80255],{"class":222,"line":644},[220,80239,1770],{"class":264},[220,80241,80242],{"class":230},"'Vignette'",[220,80244,1776],{"class":264},[220,80246,19891],{"class":230},[220,80248,6417],{"class":264},[220,80250,7605],{"class":420},[220,80252,45063],{"class":264},[220,80254,8528],{"class":420},[220,80256,7397],{"class":264},[220,80258,80259,80261,80263],{"class":222,"line":650},[220,80260,6865],{"class":264},[220,80262,6409],{"class":230},[220,80264,2465],{"class":264},[220,80266,80267],{"class":222,"line":656},[220,80268,6882],{"class":264},[220,80270,80271],{"class":222,"line":673},[220,80272,1787],{"class":264},[220,80274,80275],{"class":222,"line":682},[220,80276,1792],{"class":264},[1504,80278,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80280},[80281,80282],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":79876,"description":79884},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":80289,"title":80290,"body":80291,"category":32923,"componentType":25734,"description":80298,"extension":191,"meta":80483,"navigation":194,"path":80484,"requiresChild":32390,"seo":80485,"stem":80486,"__hash__":80487},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":80292,"toc":80479},[80293,80296,80299,80301,80303,80306,80308,80477],[11,80294,80290],{"id":80295},"voronoi",[15,80297,80298],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31771,80300],{"component":80290},[23,80302,31775],{"id":26391},[31777,80304],{":props":80305},"[{\"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,80307,31783],{"id":31782},[246,80309,80310,80339,80367,80395,80423],{":tabs":1557},[212,80311,80313],{"className":334,"code":80312,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,80314,80315,80323,80331],{"__ignoreMap":178},[220,80316,80317,80319,80321],{"class":222,"line":223},[220,80318,343],{"class":264},[220,80320,347],{"class":346},[220,80322,359],{"class":264},[220,80324,80325,80327,80329],{"class":222,"line":179},[220,80326,364],{"class":264},[220,80328,80290],{"class":346},[220,80330,386],{"class":264},[220,80332,80333,80335,80337],{"class":222,"line":389},[220,80334,402],{"class":264},[220,80336,347],{"class":346},[220,80338,359],{"class":264},[212,80340,80341],{"className":409,"code":80312,"language":411,"meta":178,"style":178},[99,80342,80343,80351,80359],{"__ignoreMap":178},[220,80344,80345,80347,80349],{"class":222,"line":223},[220,80346,343],{"class":264},[220,80348,347],{"class":420},[220,80350,359],{"class":264},[220,80352,80353,80355,80357],{"class":222,"line":179},[220,80354,364],{"class":264},[220,80356,80290],{"class":420},[220,80358,386],{"class":264},[220,80360,80361,80363,80365],{"class":222,"line":389},[220,80362,402],{"class":264},[220,80364,347],{"class":420},[220,80366,359],{"class":264},[212,80368,80369],{"className":2844,"code":80312,"language":2846,"meta":178,"style":178},[99,80370,80371,80379,80387],{"__ignoreMap":178},[220,80372,80373,80375,80377],{"class":222,"line":223},[220,80374,343],{"class":264},[220,80376,347],{"class":420},[220,80378,359],{"class":264},[220,80380,80381,80383,80385],{"class":222,"line":179},[220,80382,364],{"class":264},[220,80384,80290],{"class":420},[220,80386,386],{"class":264},[220,80388,80389,80391,80393],{"class":222,"line":389},[220,80390,402],{"class":264},[220,80392,347],{"class":420},[220,80394,359],{"class":264},[212,80396,80397],{"className":468,"code":80312,"language":469,"meta":178,"style":178},[99,80398,80399,80407,80415],{"__ignoreMap":178},[220,80400,80401,80403,80405],{"class":222,"line":223},[220,80402,343],{"class":264},[220,80404,347],{"class":420},[220,80406,359],{"class":264},[220,80408,80409,80411,80413],{"class":222,"line":179},[220,80410,364],{"class":264},[220,80412,80290],{"class":420},[220,80414,386],{"class":264},[220,80416,80417,80419,80421],{"class":222,"line":389},[220,80418,402],{"class":264},[220,80420,347],{"class":420},[220,80422,359],{"class":264},[212,80424,80426],{"className":251,"code":80425,"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,80427,80428,80438,80442,80456,80460,80469,80473],{"__ignoreMap":178},[220,80429,80430,80432,80434,80436],{"class":222,"line":223},[220,80431,261],{"class":260},[220,80433,11364],{"class":264},[220,80435,268],{"class":260},[220,80437,11369],{"class":230},[220,80439,80440],{"class":222,"line":179},[220,80441,647],{"emptyLinePlaceholder":194},[220,80443,80444,80446,80448,80450,80452,80454],{"class":222,"line":389},[220,80445,1735],{"class":260},[220,80447,1738],{"class":420},[220,80449,1741],{"class":260},[220,80451,1744],{"class":260},[220,80453,1747],{"class":226},[220,80455,1750],{"class":264},[220,80457,80458],{"class":222,"line":399},[220,80459,1765],{"class":264},[220,80461,80462,80464,80467],{"class":222,"line":644},[220,80463,1770],{"class":264},[220,80465,80466],{"class":230},"'Voronoi'",[220,80468,2465],{"class":264},[220,80470,80471],{"class":222,"line":650},[220,80472,1787],{"class":264},[220,80474,80475],{"class":222,"line":656},[220,80476,1792],{"class":264},[1504,80478,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":80480},[80481,80482],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":80290,"description":80298},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":80489,"title":80490,"body":80491,"category":36429,"componentType":25734,"description":80498,"extension":191,"meta":80683,"navigation":194,"path":80684,"requiresChild":32390,"seo":80685,"stem":80686,"__hash__":80687},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":80492,"toc":80679},[80493,80496,80499,80501,80503,80506,80508,80677],[11,80494,80490],{"id":80495},"water",[15,80497,80498],{},"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",[31771,80500],{"component":80490},[23,80502,31775],{"id":26391},[31777,80504],{":props":80505},"[{\"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,80507,31783],{"id":31782},[246,80509,80510,80539,80567,80595,80623],{":tabs":1557},[212,80511,80513],{"className":334,"code":80512,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,80514,80515,80523,80531],{"__ignoreMap":178},[220,80516,80517,80519,80521],{"class":222,"line":223},[220,80518,343],{"class":264},[220,80520,347],{"class":346},[220,80522,359],{"class":264},[220,80524,80525,80527,80529],{"class":222,"line":179},[220,80526,364],{"class":264},[220,80528,80490],{"class":346},[220,80530,386],{"class":264},[220,80532,80533,80535,80537],{"class":222,"line":389},[220,80534,402],{"class":264},[220,80536,347],{"class":346},[220,80538,359],{"class":264},[212,80540,80541],{"className":409,"code":80512,"language":411,"meta":178,"style":178},[99,80542,80543,80551,80559],{"__ignoreMap":178},[220,80544,80545,80547,80549],{"class":222,"line":223},[220,80546,343],{"class":264},[220,80548,347],{"class":420},[220,80550,359],{"class":264},[220,80552,80553,80555,80557],{"class":222,"line":179},[220,80554,364],{"class":264},[220,80556,80490],{"class":420},[220,80558,386],{"class":264},[220,80560,80561,80563,80565],{"class":222,"line":389},[220,80562,402],{"class":264},[220,80564,347],{"class":420},[220,80566,359],{"class":264},[212,80568,80569],{"className":2844,"code":80512,"language":2846,"meta":178,"style":178},[99,80570,80571,80579,80587],{"__ignoreMap":178},[220,80572,80573,80575,80577],{"class":222,"line":223},[220,80574,343],{"class":264},[220,80576,347],{"class":420},[220,80578,359],{"class":264},[220,80580,80581,80583,80585],{"class":222,"line":179},[220,80582,364],{"class":264},[220,80584,80490],{"class":420},[220,80586,386],{"class":264},[220,80588,80589,80591,80593],{"class":222,"line":389},[220,80590,402],{"class":264},[220,80592,347],{"class":420},[220,80594,359],{"class":264},[212,80596,80597],{"className":468,"code":80512,"language":469,"meta":178,"style":178},[99,80598,80599,80607,80615],{"__ignoreMap":178},[220,80600,80601,80603,80605],{"class":222,"line":223},[220,80602,343],{"class":264},[220,80604,347],{"class":420},[220,80606,359],{"class":264},[220,80608,80609,80611,80613],{"class":222,"line":179},[220,80610,364],{"class":264},[220,80612,80490],{"class":420},[220,80614,386],{"class":264},[220,80616,80617,80619,80621],{"class":222,"line":389},[220,80618,402],{"class":264},[220,80620,347],{"class":420},[220,80622,359],{"class":264},[212,80624,80626],{"className":251,"code":80625,"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,80627,80628,80638,80642,80656,80660,80669,80673],{"__ignoreMap":178},[220,80629,80630,80632,80634,80636],{"class":222,"line":223},[220,80631,261],{"class":260},[220,80633,11364],{"class":264},[220,80635,268],{"class":260},[220,80637,11369],{"class":230},[220,80639,80640],{"class":222,"line":179},[220,80641,647],{"emptyLinePlaceholder":194},[220,80643,80644,80646,80648,80650,80652,80654],{"class":222,"line":389},[220,80645,1735],{"class":260},[220,80647,1738],{"class":420},[220,80649,1741],{"class":260},[220,80651,1744],{"class":260},[220,80653,1747],{"class":226},[220,80655,1750],{"class":264},[220,80657,80658],{"class":222,"line":399},[220,80659,1765],{"class":264},[220,80661,80662,80664,80667],{"class":222,"line":644},[220,80663,1770],{"class":264},[220,80665,80666],{"class":230},"'Water'",[220,80668,2465],{"class":264},[220,80670,80671],{"class":222,"line":650},[220,80672,1787],{"class":264},[220,80674,80675],{"class":222,"line":656},[220,80676,1792],{"class":264},[1504,80678,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":80680},[80681,80682],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":80490,"description":80498},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":80689,"title":80690,"body":80691,"category":32666,"componentType":25740,"description":80698,"extension":191,"meta":81015,"navigation":194,"path":81016,"requiresChild":194,"seo":81017,"stem":81018,"__hash__":81019},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":80692,"toc":81011},[80693,80696,80699,80701,80703,80706,80708,81009],[11,80694,80690],{"id":80695},"watercolor",[15,80697,80698],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31771,80700],{"component":80690},[23,80702,31775],{"id":26391},[31777,80704],{":props":80705},"[{\"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,80707,31783],{"id":31782},[246,80709,80710,80766,80825,80881,80939],{":tabs":1557},[212,80711,80713],{"className":334,"code":80712,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80714,80715,80723,80730,80738,80742,80750,80758],{"__ignoreMap":178},[220,80716,80717,80719,80721],{"class":222,"line":223},[220,80718,343],{"class":264},[220,80720,347],{"class":346},[220,80722,359],{"class":264},[220,80724,80725,80727],{"class":222,"line":179},[220,80726,364],{"class":264},[220,80728,80729],{"class":346},"Watercolor\n",[220,80731,80732,80734,80736],{"class":222,"line":389},[220,80733,17262],{"class":226},[220,80735,353],{"class":264},[220,80737,38529],{"class":230},[220,80739,80740],{"class":222,"line":399},[220,80741,31819],{"class":264},[220,80743,80744,80746,80748],{"class":222,"line":644},[220,80745,2550],{"class":264},[220,80747,2553],{"class":346},[220,80749,386],{"class":264},[220,80751,80752,80754,80756],{"class":222,"line":650},[220,80753,2567],{"class":264},[220,80755,80690],{"class":346},[220,80757,359],{"class":264},[220,80759,80760,80762,80764],{"class":222,"line":656},[220,80761,402],{"class":264},[220,80763,347],{"class":346},[220,80765,359],{"class":264},[212,80767,80769],{"className":409,"code":80768,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,80770,80771,80779,80785,80797,80801,80809,80817],{"__ignoreMap":178},[220,80772,80773,80775,80777],{"class":222,"line":223},[220,80774,343],{"class":264},[220,80776,347],{"class":420},[220,80778,359],{"class":264},[220,80780,80781,80783],{"class":222,"line":179},[220,80782,364],{"class":264},[220,80784,80729],{"class":420},[220,80786,80787,80789,80791,80793,80795],{"class":222,"line":389},[220,80788,9497],{"class":226},[220,80790,353],{"class":260},[220,80792,743],{"class":264},[220,80794,38583],{"class":420},[220,80796,749],{"class":264},[220,80798,80799],{"class":222,"line":399},[220,80800,31819],{"class":264},[220,80802,80803,80805,80807],{"class":222,"line":644},[220,80804,2550],{"class":264},[220,80806,2553],{"class":420},[220,80808,386],{"class":264},[220,80810,80811,80813,80815],{"class":222,"line":650},[220,80812,2567],{"class":264},[220,80814,80690],{"class":420},[220,80816,359],{"class":264},[220,80818,80819,80821,80823],{"class":222,"line":656},[220,80820,402],{"class":264},[220,80822,347],{"class":420},[220,80824,359],{"class":264},[212,80826,80827],{"className":2844,"code":80768,"language":2846,"meta":178,"style":178},[99,80828,80829,80837,80843,80853,80857,80865,80873],{"__ignoreMap":178},[220,80830,80831,80833,80835],{"class":222,"line":223},[220,80832,343],{"class":264},[220,80834,347],{"class":420},[220,80836,359],{"class":264},[220,80838,80839,80841],{"class":222,"line":179},[220,80840,364],{"class":264},[220,80842,80729],{"class":420},[220,80844,80845,80847,80849,80851],{"class":222,"line":389},[220,80846,9497],{"class":226},[220,80848,29729],{"class":264},[220,80850,38583],{"class":420},[220,80852,749],{"class":264},[220,80854,80855],{"class":222,"line":399},[220,80856,31819],{"class":264},[220,80858,80859,80861,80863],{"class":222,"line":644},[220,80860,2550],{"class":264},[220,80862,2553],{"class":420},[220,80864,386],{"class":264},[220,80866,80867,80869,80871],{"class":222,"line":650},[220,80868,2567],{"class":264},[220,80870,80690],{"class":420},[220,80872,359],{"class":264},[220,80874,80875,80877,80879],{"class":222,"line":656},[220,80876,402],{"class":264},[220,80878,347],{"class":420},[220,80880,359],{"class":264},[212,80882,80883],{"className":468,"code":80768,"language":469,"meta":178,"style":178},[99,80884,80885,80893,80899,80911,80915,80923,80931],{"__ignoreMap":178},[220,80886,80887,80889,80891],{"class":222,"line":223},[220,80888,343],{"class":264},[220,80890,347],{"class":420},[220,80892,359],{"class":264},[220,80894,80895,80897],{"class":222,"line":179},[220,80896,364],{"class":264},[220,80898,80729],{"class":420},[220,80900,80901,80903,80905,80907,80909],{"class":222,"line":389},[220,80902,9497],{"class":226},[220,80904,353],{"class":260},[220,80906,743],{"class":264},[220,80908,38583],{"class":420},[220,80910,749],{"class":264},[220,80912,80913],{"class":222,"line":399},[220,80914,31819],{"class":264},[220,80916,80917,80919,80921],{"class":222,"line":644},[220,80918,2550],{"class":264},[220,80920,2553],{"class":420},[220,80922,386],{"class":264},[220,80924,80925,80927,80929],{"class":222,"line":650},[220,80926,2567],{"class":264},[220,80928,80690],{"class":420},[220,80930,359],{"class":264},[220,80932,80933,80935,80937],{"class":222,"line":656},[220,80934,402],{"class":264},[220,80936,347],{"class":420},[220,80938,359],{"class":264},[212,80940,80942],{"className":251,"code":80941,"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,80943,80944,80954,80958,80972,80976,80989,80997,81001,81005],{"__ignoreMap":178},[220,80945,80946,80948,80950,80952],{"class":222,"line":223},[220,80947,261],{"class":260},[220,80949,11364],{"class":264},[220,80951,268],{"class":260},[220,80953,11369],{"class":230},[220,80955,80956],{"class":222,"line":179},[220,80957,647],{"emptyLinePlaceholder":194},[220,80959,80960,80962,80964,80966,80968,80970],{"class":222,"line":389},[220,80961,1735],{"class":260},[220,80963,1738],{"class":420},[220,80965,1741],{"class":260},[220,80967,1744],{"class":260},[220,80969,1747],{"class":226},[220,80971,1750],{"class":264},[220,80973,80974],{"class":222,"line":399},[220,80975,1765],{"class":264},[220,80977,80978,80980,80983,80985,80987],{"class":222,"line":644},[220,80979,1770],{"class":264},[220,80981,80982],{"class":230},"'Watercolor'",[220,80984,7392],{"class":264},[220,80986,38583],{"class":420},[220,80988,7397],{"class":264},[220,80990,80991,80993,80995],{"class":222,"line":650},[220,80992,6865],{"class":264},[220,80994,6409],{"class":230},[220,80996,2465],{"class":264},[220,80998,80999],{"class":222,"line":656},[220,81000,6882],{"class":264},[220,81002,81003],{"class":222,"line":673},[220,81004,1787],{"class":264},[220,81006,81007],{"class":222,"line":682},[220,81008,1792],{"class":264},[1504,81010,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81012},[81013,81014],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":80690,"description":80698},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":81021,"title":81022,"body":81023,"category":33256,"componentType":25740,"description":81030,"extension":191,"meta":81291,"navigation":194,"path":81292,"requiresChild":194,"seo":81293,"stem":81294,"__hash__":81295},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":81024,"toc":81287},[81025,81028,81031,81033,81035,81038,81040,81285],[11,81026,81022],{"id":81027},"wavedistortion",[15,81029,81030],{},"Wave-based distortion with multiple waveform types",[31771,81032],{"component":81022},[23,81034,31775],{"id":26391},[31777,81036],{":props":81037},"[{\"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,81039,31783],{"id":31782},[246,81041,81042,81087,81131,81175,81219],{":tabs":1557},[212,81043,81045],{"className":334,"code":81044,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,81046,81047,81055,81063,81071,81079],{"__ignoreMap":178},[220,81048,81049,81051,81053],{"class":222,"line":223},[220,81050,343],{"class":264},[220,81052,347],{"class":346},[220,81054,359],{"class":264},[220,81056,81057,81059,81061],{"class":222,"line":179},[220,81058,364],{"class":264},[220,81060,81022],{"class":346},[220,81062,359],{"class":264},[220,81064,81065,81067,81069],{"class":222,"line":389},[220,81066,2550],{"class":264},[220,81068,2553],{"class":346},[220,81070,386],{"class":264},[220,81072,81073,81075,81077],{"class":222,"line":399},[220,81074,2567],{"class":264},[220,81076,81022],{"class":346},[220,81078,359],{"class":264},[220,81080,81081,81083,81085],{"class":222,"line":644},[220,81082,402],{"class":264},[220,81084,347],{"class":346},[220,81086,359],{"class":264},[212,81088,81089],{"className":409,"code":81044,"language":411,"meta":178,"style":178},[99,81090,81091,81099,81107,81115,81123],{"__ignoreMap":178},[220,81092,81093,81095,81097],{"class":222,"line":223},[220,81094,343],{"class":264},[220,81096,347],{"class":420},[220,81098,359],{"class":264},[220,81100,81101,81103,81105],{"class":222,"line":179},[220,81102,364],{"class":264},[220,81104,81022],{"class":420},[220,81106,359],{"class":264},[220,81108,81109,81111,81113],{"class":222,"line":389},[220,81110,2550],{"class":264},[220,81112,2553],{"class":420},[220,81114,386],{"class":264},[220,81116,81117,81119,81121],{"class":222,"line":399},[220,81118,2567],{"class":264},[220,81120,81022],{"class":420},[220,81122,359],{"class":264},[220,81124,81125,81127,81129],{"class":222,"line":644},[220,81126,402],{"class":264},[220,81128,347],{"class":420},[220,81130,359],{"class":264},[212,81132,81133],{"className":2844,"code":81044,"language":2846,"meta":178,"style":178},[99,81134,81135,81143,81151,81159,81167],{"__ignoreMap":178},[220,81136,81137,81139,81141],{"class":222,"line":223},[220,81138,343],{"class":264},[220,81140,347],{"class":420},[220,81142,359],{"class":264},[220,81144,81145,81147,81149],{"class":222,"line":179},[220,81146,364],{"class":264},[220,81148,81022],{"class":420},[220,81150,359],{"class":264},[220,81152,81153,81155,81157],{"class":222,"line":389},[220,81154,2550],{"class":264},[220,81156,2553],{"class":420},[220,81158,386],{"class":264},[220,81160,81161,81163,81165],{"class":222,"line":399},[220,81162,2567],{"class":264},[220,81164,81022],{"class":420},[220,81166,359],{"class":264},[220,81168,81169,81171,81173],{"class":222,"line":644},[220,81170,402],{"class":264},[220,81172,347],{"class":420},[220,81174,359],{"class":264},[212,81176,81177],{"className":468,"code":81044,"language":469,"meta":178,"style":178},[99,81178,81179,81187,81195,81203,81211],{"__ignoreMap":178},[220,81180,81181,81183,81185],{"class":222,"line":223},[220,81182,343],{"class":264},[220,81184,347],{"class":420},[220,81186,359],{"class":264},[220,81188,81189,81191,81193],{"class":222,"line":179},[220,81190,364],{"class":264},[220,81192,81022],{"class":420},[220,81194,359],{"class":264},[220,81196,81197,81199,81201],{"class":222,"line":389},[220,81198,2550],{"class":264},[220,81200,2553],{"class":420},[220,81202,386],{"class":264},[220,81204,81205,81207,81209],{"class":222,"line":399},[220,81206,2567],{"class":264},[220,81208,81022],{"class":420},[220,81210,359],{"class":264},[220,81212,81213,81215,81217],{"class":222,"line":644},[220,81214,402],{"class":264},[220,81216,347],{"class":420},[220,81218,359],{"class":264},[212,81220,81222],{"className":251,"code":81221,"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,81223,81224,81234,81238,81252,81256,81265,81273,81277,81281],{"__ignoreMap":178},[220,81225,81226,81228,81230,81232],{"class":222,"line":223},[220,81227,261],{"class":260},[220,81229,11364],{"class":264},[220,81231,268],{"class":260},[220,81233,11369],{"class":230},[220,81235,81236],{"class":222,"line":179},[220,81237,647],{"emptyLinePlaceholder":194},[220,81239,81240,81242,81244,81246,81248,81250],{"class":222,"line":389},[220,81241,1735],{"class":260},[220,81243,1738],{"class":420},[220,81245,1741],{"class":260},[220,81247,1744],{"class":260},[220,81249,1747],{"class":226},[220,81251,1750],{"class":264},[220,81253,81254],{"class":222,"line":399},[220,81255,1765],{"class":264},[220,81257,81258,81260,81263],{"class":222,"line":644},[220,81259,1770],{"class":264},[220,81261,81262],{"class":230},"'WaveDistortion'",[220,81264,6860],{"class":264},[220,81266,81267,81269,81271],{"class":222,"line":650},[220,81268,6865],{"class":264},[220,81270,6409],{"class":230},[220,81272,2465],{"class":264},[220,81274,81275],{"class":222,"line":656},[220,81276,6882],{"class":264},[220,81278,81279],{"class":222,"line":673},[220,81280,1787],{"class":264},[220,81282,81283],{"class":222,"line":682},[220,81284,1792],{"class":264},[1504,81286,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":81288},[81289,81290],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":81022,"description":81030},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":81297,"title":81298,"body":81299,"category":32923,"componentType":25734,"description":81306,"extension":191,"meta":81491,"navigation":194,"path":81492,"requiresChild":32390,"seo":81493,"stem":81494,"__hash__":81495},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":81300,"toc":81487},[81301,81304,81307,81309,81311,81314,81316,81485],[11,81302,81298],{"id":81303},"waveletnoise",[15,81305,81306],{},"Rotating banded wavelets that ripple as they animate",[31771,81308],{"component":81298},[23,81310,31775],{"id":26391},[31777,81312],{":props":81313},"[{\"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,81315,31783],{"id":31782},[246,81317,81318,81347,81375,81403,81431],{":tabs":1557},[212,81319,81321],{"className":334,"code":81320,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,81322,81323,81331,81339],{"__ignoreMap":178},[220,81324,81325,81327,81329],{"class":222,"line":223},[220,81326,343],{"class":264},[220,81328,347],{"class":346},[220,81330,359],{"class":264},[220,81332,81333,81335,81337],{"class":222,"line":179},[220,81334,364],{"class":264},[220,81336,81298],{"class":346},[220,81338,386],{"class":264},[220,81340,81341,81343,81345],{"class":222,"line":389},[220,81342,402],{"class":264},[220,81344,347],{"class":346},[220,81346,359],{"class":264},[212,81348,81349],{"className":409,"code":81320,"language":411,"meta":178,"style":178},[99,81350,81351,81359,81367],{"__ignoreMap":178},[220,81352,81353,81355,81357],{"class":222,"line":223},[220,81354,343],{"class":264},[220,81356,347],{"class":420},[220,81358,359],{"class":264},[220,81360,81361,81363,81365],{"class":222,"line":179},[220,81362,364],{"class":264},[220,81364,81298],{"class":420},[220,81366,386],{"class":264},[220,81368,81369,81371,81373],{"class":222,"line":389},[220,81370,402],{"class":264},[220,81372,347],{"class":420},[220,81374,359],{"class":264},[212,81376,81377],{"className":2844,"code":81320,"language":2846,"meta":178,"style":178},[99,81378,81379,81387,81395],{"__ignoreMap":178},[220,81380,81381,81383,81385],{"class":222,"line":223},[220,81382,343],{"class":264},[220,81384,347],{"class":420},[220,81386,359],{"class":264},[220,81388,81389,81391,81393],{"class":222,"line":179},[220,81390,364],{"class":264},[220,81392,81298],{"class":420},[220,81394,386],{"class":264},[220,81396,81397,81399,81401],{"class":222,"line":389},[220,81398,402],{"class":264},[220,81400,347],{"class":420},[220,81402,359],{"class":264},[212,81404,81405],{"className":468,"code":81320,"language":469,"meta":178,"style":178},[99,81406,81407,81415,81423],{"__ignoreMap":178},[220,81408,81409,81411,81413],{"class":222,"line":223},[220,81410,343],{"class":264},[220,81412,347],{"class":420},[220,81414,359],{"class":264},[220,81416,81417,81419,81421],{"class":222,"line":179},[220,81418,364],{"class":264},[220,81420,81298],{"class":420},[220,81422,386],{"class":264},[220,81424,81425,81427,81429],{"class":222,"line":389},[220,81426,402],{"class":264},[220,81428,347],{"class":420},[220,81430,359],{"class":264},[212,81432,81434],{"className":251,"code":81433,"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,81435,81436,81446,81450,81464,81468,81477,81481],{"__ignoreMap":178},[220,81437,81438,81440,81442,81444],{"class":222,"line":223},[220,81439,261],{"class":260},[220,81441,11364],{"class":264},[220,81443,268],{"class":260},[220,81445,11369],{"class":230},[220,81447,81448],{"class":222,"line":179},[220,81449,647],{"emptyLinePlaceholder":194},[220,81451,81452,81454,81456,81458,81460,81462],{"class":222,"line":389},[220,81453,1735],{"class":260},[220,81455,1738],{"class":420},[220,81457,1741],{"class":260},[220,81459,1744],{"class":260},[220,81461,1747],{"class":226},[220,81463,1750],{"class":264},[220,81465,81466],{"class":222,"line":399},[220,81467,1765],{"class":264},[220,81469,81470,81472,81475],{"class":222,"line":644},[220,81471,1770],{"class":264},[220,81473,81474],{"class":230},"'WaveletNoise'",[220,81476,2465],{"class":264},[220,81478,81479],{"class":222,"line":650},[220,81480,1787],{"class":264},[220,81482,81483],{"class":222,"line":656},[220,81484,1792],{"class":264},[1504,81486,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":81488},[81489,81490],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":81298,"description":81306},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":81497,"title":81498,"body":81499,"category":32923,"componentType":25734,"description":81506,"extension":191,"meta":81691,"navigation":194,"path":81692,"requiresChild":32390,"seo":81693,"stem":81694,"__hash__":81695},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":81500,"toc":81687},[81501,81504,81507,81509,81511,81514,81516,81685],[11,81502,81498],{"id":81503},"weave",[15,81505,81506],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31771,81508],{"component":81498},[23,81510,31775],{"id":26391},[31777,81512],{":props":81513},"[{\"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,81515,31783],{"id":31782},[246,81517,81518,81547,81575,81603,81631],{":tabs":1557},[212,81519,81521],{"className":334,"code":81520,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,81522,81523,81531,81539],{"__ignoreMap":178},[220,81524,81525,81527,81529],{"class":222,"line":223},[220,81526,343],{"class":264},[220,81528,347],{"class":346},[220,81530,359],{"class":264},[220,81532,81533,81535,81537],{"class":222,"line":179},[220,81534,364],{"class":264},[220,81536,81498],{"class":346},[220,81538,386],{"class":264},[220,81540,81541,81543,81545],{"class":222,"line":389},[220,81542,402],{"class":264},[220,81544,347],{"class":346},[220,81546,359],{"class":264},[212,81548,81549],{"className":409,"code":81520,"language":411,"meta":178,"style":178},[99,81550,81551,81559,81567],{"__ignoreMap":178},[220,81552,81553,81555,81557],{"class":222,"line":223},[220,81554,343],{"class":264},[220,81556,347],{"class":420},[220,81558,359],{"class":264},[220,81560,81561,81563,81565],{"class":222,"line":179},[220,81562,364],{"class":264},[220,81564,81498],{"class":420},[220,81566,386],{"class":264},[220,81568,81569,81571,81573],{"class":222,"line":389},[220,81570,402],{"class":264},[220,81572,347],{"class":420},[220,81574,359],{"class":264},[212,81576,81577],{"className":2844,"code":81520,"language":2846,"meta":178,"style":178},[99,81578,81579,81587,81595],{"__ignoreMap":178},[220,81580,81581,81583,81585],{"class":222,"line":223},[220,81582,343],{"class":264},[220,81584,347],{"class":420},[220,81586,359],{"class":264},[220,81588,81589,81591,81593],{"class":222,"line":179},[220,81590,364],{"class":264},[220,81592,81498],{"class":420},[220,81594,386],{"class":264},[220,81596,81597,81599,81601],{"class":222,"line":389},[220,81598,402],{"class":264},[220,81600,347],{"class":420},[220,81602,359],{"class":264},[212,81604,81605],{"className":468,"code":81520,"language":469,"meta":178,"style":178},[99,81606,81607,81615,81623],{"__ignoreMap":178},[220,81608,81609,81611,81613],{"class":222,"line":223},[220,81610,343],{"class":264},[220,81612,347],{"class":420},[220,81614,359],{"class":264},[220,81616,81617,81619,81621],{"class":222,"line":179},[220,81618,364],{"class":264},[220,81620,81498],{"class":420},[220,81622,386],{"class":264},[220,81624,81625,81627,81629],{"class":222,"line":389},[220,81626,402],{"class":264},[220,81628,347],{"class":420},[220,81630,359],{"class":264},[212,81632,81634],{"className":251,"code":81633,"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,81635,81636,81646,81650,81664,81668,81677,81681],{"__ignoreMap":178},[220,81637,81638,81640,81642,81644],{"class":222,"line":223},[220,81639,261],{"class":260},[220,81641,11364],{"class":264},[220,81643,268],{"class":260},[220,81645,11369],{"class":230},[220,81647,81648],{"class":222,"line":179},[220,81649,647],{"emptyLinePlaceholder":194},[220,81651,81652,81654,81656,81658,81660,81662],{"class":222,"line":389},[220,81653,1735],{"class":260},[220,81655,1738],{"class":420},[220,81657,1741],{"class":260},[220,81659,1744],{"class":260},[220,81661,1747],{"class":226},[220,81663,1750],{"class":264},[220,81665,81666],{"class":222,"line":399},[220,81667,1765],{"class":264},[220,81669,81670,81672,81675],{"class":222,"line":644},[220,81671,1770],{"class":264},[220,81673,81674],{"class":230},"'Weave'",[220,81676,2465],{"class":264},[220,81678,81679],{"class":222,"line":650},[220,81680,1787],{"class":264},[220,81682,81683],{"class":222,"line":656},[220,81684,1792],{"class":264},[1504,81686,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":81688},[81689,81690],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":81498,"description":81506},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":81697,"title":81698,"body":81699,"category":32923,"componentType":25734,"description":81706,"extension":191,"meta":81891,"navigation":194,"path":81892,"requiresChild":32390,"seo":81893,"stem":81894,"__hash__":81895},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":81700,"toc":81887},[81701,81704,81707,81709,81711,81714,81716,81885],[11,81702,81698],{"id":81703},"webcamtexture",[15,81705,81706],{},"Display a live webcam feed with customizable object-fit modes",[31771,81708],{"component":81698},[23,81710,31775],{"id":26391},[31777,81712],{":props":81713},"[{\"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,81715,31783],{"id":31782},[246,81717,81718,81747,81775,81803,81831],{":tabs":1557},[212,81719,81721],{"className":334,"code":81720,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,81722,81723,81731,81739],{"__ignoreMap":178},[220,81724,81725,81727,81729],{"class":222,"line":223},[220,81726,343],{"class":264},[220,81728,347],{"class":346},[220,81730,359],{"class":264},[220,81732,81733,81735,81737],{"class":222,"line":179},[220,81734,364],{"class":264},[220,81736,81698],{"class":346},[220,81738,386],{"class":264},[220,81740,81741,81743,81745],{"class":222,"line":389},[220,81742,402],{"class":264},[220,81744,347],{"class":346},[220,81746,359],{"class":264},[212,81748,81749],{"className":409,"code":81720,"language":411,"meta":178,"style":178},[99,81750,81751,81759,81767],{"__ignoreMap":178},[220,81752,81753,81755,81757],{"class":222,"line":223},[220,81754,343],{"class":264},[220,81756,347],{"class":420},[220,81758,359],{"class":264},[220,81760,81761,81763,81765],{"class":222,"line":179},[220,81762,364],{"class":264},[220,81764,81698],{"class":420},[220,81766,386],{"class":264},[220,81768,81769,81771,81773],{"class":222,"line":389},[220,81770,402],{"class":264},[220,81772,347],{"class":420},[220,81774,359],{"class":264},[212,81776,81777],{"className":2844,"code":81720,"language":2846,"meta":178,"style":178},[99,81778,81779,81787,81795],{"__ignoreMap":178},[220,81780,81781,81783,81785],{"class":222,"line":223},[220,81782,343],{"class":264},[220,81784,347],{"class":420},[220,81786,359],{"class":264},[220,81788,81789,81791,81793],{"class":222,"line":179},[220,81790,364],{"class":264},[220,81792,81698],{"class":420},[220,81794,386],{"class":264},[220,81796,81797,81799,81801],{"class":222,"line":389},[220,81798,402],{"class":264},[220,81800,347],{"class":420},[220,81802,359],{"class":264},[212,81804,81805],{"className":468,"code":81720,"language":469,"meta":178,"style":178},[99,81806,81807,81815,81823],{"__ignoreMap":178},[220,81808,81809,81811,81813],{"class":222,"line":223},[220,81810,343],{"class":264},[220,81812,347],{"class":420},[220,81814,359],{"class":264},[220,81816,81817,81819,81821],{"class":222,"line":179},[220,81818,364],{"class":264},[220,81820,81698],{"class":420},[220,81822,386],{"class":264},[220,81824,81825,81827,81829],{"class":222,"line":389},[220,81826,402],{"class":264},[220,81828,347],{"class":420},[220,81830,359],{"class":264},[212,81832,81834],{"className":251,"code":81833,"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,81835,81836,81846,81850,81864,81868,81877,81881],{"__ignoreMap":178},[220,81837,81838,81840,81842,81844],{"class":222,"line":223},[220,81839,261],{"class":260},[220,81841,11364],{"class":264},[220,81843,268],{"class":260},[220,81845,11369],{"class":230},[220,81847,81848],{"class":222,"line":179},[220,81849,647],{"emptyLinePlaceholder":194},[220,81851,81852,81854,81856,81858,81860,81862],{"class":222,"line":389},[220,81853,1735],{"class":260},[220,81855,1738],{"class":420},[220,81857,1741],{"class":260},[220,81859,1744],{"class":260},[220,81861,1747],{"class":226},[220,81863,1750],{"class":264},[220,81865,81866],{"class":222,"line":399},[220,81867,1765],{"class":264},[220,81869,81870,81872,81875],{"class":222,"line":644},[220,81871,1770],{"class":264},[220,81873,81874],{"class":230},"'WebcamTexture'",[220,81876,2465],{"class":264},[220,81878,81879],{"class":222,"line":650},[220,81880,1787],{"class":264},[220,81882,81883],{"class":222,"line":656},[220,81884,1792],{"class":264},[1504,81886,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":81888},[81889,81890],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":81698,"description":81706},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":81897,"title":81898,"body":81899,"category":32666,"componentType":25740,"description":81906,"extension":191,"meta":82223,"navigation":194,"path":82224,"requiresChild":194,"seo":82225,"stem":82226,"__hash__":82227},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":81900,"toc":82219},[81901,81904,81907,81909,81911,81914,81916,82217],[11,81902,81898],{"id":81903},"wool",[15,81905,81906],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31771,81908],{"component":81898},[23,81910,31775],{"id":26391},[31777,81912],{":props":81913},"[{\"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,81915,31783],{"id":31782},[246,81917,81918,81974,82033,82089,82147],{":tabs":1557},[212,81919,81921],{"className":334,"code":81920,"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,81922,81923,81931,81938,81946,81950,81958,81966],{"__ignoreMap":178},[220,81924,81925,81927,81929],{"class":222,"line":223},[220,81926,343],{"class":264},[220,81928,347],{"class":346},[220,81930,359],{"class":264},[220,81932,81933,81935],{"class":222,"line":179},[220,81934,364],{"class":264},[220,81936,81937],{"class":346},"Wool\n",[220,81939,81940,81942,81944],{"class":222,"line":389},[220,81941,20228],{"class":226},[220,81943,353],{"class":264},[220,81945,42218],{"class":230},[220,81947,81948],{"class":222,"line":399},[220,81949,31819],{"class":264},[220,81951,81952,81954,81956],{"class":222,"line":644},[220,81953,2550],{"class":264},[220,81955,2553],{"class":346},[220,81957,386],{"class":264},[220,81959,81960,81962,81964],{"class":222,"line":650},[220,81961,2567],{"class":264},[220,81963,81898],{"class":346},[220,81965,359],{"class":264},[220,81967,81968,81970,81972],{"class":222,"line":656},[220,81969,402],{"class":264},[220,81971,347],{"class":346},[220,81973,359],{"class":264},[212,81975,81977],{"className":409,"code":81976,"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,81978,81979,81987,81993,82005,82009,82017,82025],{"__ignoreMap":178},[220,81980,81981,81983,81985],{"class":222,"line":223},[220,81982,343],{"class":264},[220,81984,347],{"class":420},[220,81986,359],{"class":264},[220,81988,81989,81991],{"class":222,"line":179},[220,81990,364],{"class":264},[220,81992,81937],{"class":420},[220,81994,81995,81997,81999,82001,82003],{"class":222,"line":389},[220,81996,20339],{"class":226},[220,81998,353],{"class":260},[220,82000,743],{"class":264},[220,82002,7605],{"class":420},[220,82004,749],{"class":264},[220,82006,82007],{"class":222,"line":399},[220,82008,31819],{"class":264},[220,82010,82011,82013,82015],{"class":222,"line":644},[220,82012,2550],{"class":264},[220,82014,2553],{"class":420},[220,82016,386],{"class":264},[220,82018,82019,82021,82023],{"class":222,"line":650},[220,82020,2567],{"class":264},[220,82022,81898],{"class":420},[220,82024,359],{"class":264},[220,82026,82027,82029,82031],{"class":222,"line":656},[220,82028,402],{"class":264},[220,82030,347],{"class":420},[220,82032,359],{"class":264},[212,82034,82035],{"className":2844,"code":81976,"language":2846,"meta":178,"style":178},[99,82036,82037,82045,82051,82061,82065,82073,82081],{"__ignoreMap":178},[220,82038,82039,82041,82043],{"class":222,"line":223},[220,82040,343],{"class":264},[220,82042,347],{"class":420},[220,82044,359],{"class":264},[220,82046,82047,82049],{"class":222,"line":179},[220,82048,364],{"class":264},[220,82050,81937],{"class":420},[220,82052,82053,82055,82057,82059],{"class":222,"line":389},[220,82054,20339],{"class":226},[220,82056,29729],{"class":264},[220,82058,7605],{"class":420},[220,82060,749],{"class":264},[220,82062,82063],{"class":222,"line":399},[220,82064,31819],{"class":264},[220,82066,82067,82069,82071],{"class":222,"line":644},[220,82068,2550],{"class":264},[220,82070,2553],{"class":420},[220,82072,386],{"class":264},[220,82074,82075,82077,82079],{"class":222,"line":650},[220,82076,2567],{"class":264},[220,82078,81898],{"class":420},[220,82080,359],{"class":264},[220,82082,82083,82085,82087],{"class":222,"line":656},[220,82084,402],{"class":264},[220,82086,347],{"class":420},[220,82088,359],{"class":264},[212,82090,82091],{"className":468,"code":81976,"language":469,"meta":178,"style":178},[99,82092,82093,82101,82107,82119,82123,82131,82139],{"__ignoreMap":178},[220,82094,82095,82097,82099],{"class":222,"line":223},[220,82096,343],{"class":264},[220,82098,347],{"class":420},[220,82100,359],{"class":264},[220,82102,82103,82105],{"class":222,"line":179},[220,82104,364],{"class":264},[220,82106,81937],{"class":420},[220,82108,82109,82111,82113,82115,82117],{"class":222,"line":389},[220,82110,20339],{"class":226},[220,82112,353],{"class":260},[220,82114,743],{"class":264},[220,82116,7605],{"class":420},[220,82118,749],{"class":264},[220,82120,82121],{"class":222,"line":399},[220,82122,31819],{"class":264},[220,82124,82125,82127,82129],{"class":222,"line":644},[220,82126,2550],{"class":264},[220,82128,2553],{"class":420},[220,82130,386],{"class":264},[220,82132,82133,82135,82137],{"class":222,"line":650},[220,82134,2567],{"class":264},[220,82136,81898],{"class":420},[220,82138,359],{"class":264},[220,82140,82141,82143,82145],{"class":222,"line":656},[220,82142,402],{"class":264},[220,82144,347],{"class":420},[220,82146,359],{"class":264},[212,82148,82150],{"className":251,"code":82149,"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,82151,82152,82162,82166,82180,82184,82197,82205,82209,82213],{"__ignoreMap":178},[220,82153,82154,82156,82158,82160],{"class":222,"line":223},[220,82155,261],{"class":260},[220,82157,11364],{"class":264},[220,82159,268],{"class":260},[220,82161,11369],{"class":230},[220,82163,82164],{"class":222,"line":179},[220,82165,647],{"emptyLinePlaceholder":194},[220,82167,82168,82170,82172,82174,82176,82178],{"class":222,"line":389},[220,82169,1735],{"class":260},[220,82171,1738],{"class":420},[220,82173,1741],{"class":260},[220,82175,1744],{"class":260},[220,82177,1747],{"class":226},[220,82179,1750],{"class":264},[220,82181,82182],{"class":222,"line":399},[220,82183,1765],{"class":264},[220,82185,82186,82188,82191,82193,82195],{"class":222,"line":644},[220,82187,1770],{"class":264},[220,82189,82190],{"class":230},"'Wool'",[220,82192,32063],{"class":264},[220,82194,7605],{"class":420},[220,82196,7397],{"class":264},[220,82198,82199,82201,82203],{"class":222,"line":650},[220,82200,6865],{"class":264},[220,82202,6409],{"class":230},[220,82204,2465],{"class":264},[220,82206,82207],{"class":222,"line":656},[220,82208,6882],{"class":264},[220,82210,82211],{"class":222,"line":673},[220,82212,1787],{"class":264},[220,82214,82215],{"class":222,"line":682},[220,82216,1792],{"class":264},[1504,82218,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82220},[82221,82222],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":81898,"description":81906},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":82229,"title":82230,"body":82231,"category":32923,"componentType":25734,"description":82238,"extension":191,"meta":82423,"navigation":194,"path":82424,"requiresChild":32390,"seo":82425,"stem":82426,"__hash__":82427},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":82232,"toc":82419},[82233,82236,82239,82241,82243,82246,82248,82417],[11,82234,82230],{"id":82235},"worleynoise",[15,82237,82238],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31771,82240],{"component":82230},[23,82242,31775],{"id":26391},[31777,82244],{":props":82245},"[{\"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,82247,31783],{"id":31782},[246,82249,82250,82279,82307,82335,82363],{":tabs":1557},[212,82251,82253],{"className":334,"code":82252,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,82254,82255,82263,82271],{"__ignoreMap":178},[220,82256,82257,82259,82261],{"class":222,"line":223},[220,82258,343],{"class":264},[220,82260,347],{"class":346},[220,82262,359],{"class":264},[220,82264,82265,82267,82269],{"class":222,"line":179},[220,82266,364],{"class":264},[220,82268,82230],{"class":346},[220,82270,386],{"class":264},[220,82272,82273,82275,82277],{"class":222,"line":389},[220,82274,402],{"class":264},[220,82276,347],{"class":346},[220,82278,359],{"class":264},[212,82280,82281],{"className":409,"code":82252,"language":411,"meta":178,"style":178},[99,82282,82283,82291,82299],{"__ignoreMap":178},[220,82284,82285,82287,82289],{"class":222,"line":223},[220,82286,343],{"class":264},[220,82288,347],{"class":420},[220,82290,359],{"class":264},[220,82292,82293,82295,82297],{"class":222,"line":179},[220,82294,364],{"class":264},[220,82296,82230],{"class":420},[220,82298,386],{"class":264},[220,82300,82301,82303,82305],{"class":222,"line":389},[220,82302,402],{"class":264},[220,82304,347],{"class":420},[220,82306,359],{"class":264},[212,82308,82309],{"className":2844,"code":82252,"language":2846,"meta":178,"style":178},[99,82310,82311,82319,82327],{"__ignoreMap":178},[220,82312,82313,82315,82317],{"class":222,"line":223},[220,82314,343],{"class":264},[220,82316,347],{"class":420},[220,82318,359],{"class":264},[220,82320,82321,82323,82325],{"class":222,"line":179},[220,82322,364],{"class":264},[220,82324,82230],{"class":420},[220,82326,386],{"class":264},[220,82328,82329,82331,82333],{"class":222,"line":389},[220,82330,402],{"class":264},[220,82332,347],{"class":420},[220,82334,359],{"class":264},[212,82336,82337],{"className":468,"code":82252,"language":469,"meta":178,"style":178},[99,82338,82339,82347,82355],{"__ignoreMap":178},[220,82340,82341,82343,82345],{"class":222,"line":223},[220,82342,343],{"class":264},[220,82344,347],{"class":420},[220,82346,359],{"class":264},[220,82348,82349,82351,82353],{"class":222,"line":179},[220,82350,364],{"class":264},[220,82352,82230],{"class":420},[220,82354,386],{"class":264},[220,82356,82357,82359,82361],{"class":222,"line":389},[220,82358,402],{"class":264},[220,82360,347],{"class":420},[220,82362,359],{"class":264},[212,82364,82366],{"className":251,"code":82365,"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,82367,82368,82378,82382,82396,82400,82409,82413],{"__ignoreMap":178},[220,82369,82370,82372,82374,82376],{"class":222,"line":223},[220,82371,261],{"class":260},[220,82373,11364],{"class":264},[220,82375,268],{"class":260},[220,82377,11369],{"class":230},[220,82379,82380],{"class":222,"line":179},[220,82381,647],{"emptyLinePlaceholder":194},[220,82383,82384,82386,82388,82390,82392,82394],{"class":222,"line":389},[220,82385,1735],{"class":260},[220,82387,1738],{"class":420},[220,82389,1741],{"class":260},[220,82391,1744],{"class":260},[220,82393,1747],{"class":226},[220,82395,1750],{"class":264},[220,82397,82398],{"class":222,"line":399},[220,82399,1765],{"class":264},[220,82401,82402,82404,82407],{"class":222,"line":644},[220,82403,1770],{"class":264},[220,82405,82406],{"class":230},"'WorleyNoise'",[220,82408,2465],{"class":264},[220,82410,82411],{"class":222,"line":650},[220,82412,1787],{"class":264},[220,82414,82415],{"class":222,"line":656},[220,82416,1792],{"class":264},[1504,82418,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":82420},[82421,82422],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":82230,"description":82238},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":82429,"title":82430,"body":82431,"category":32094,"componentType":25740,"description":82438,"extension":191,"meta":82755,"navigation":194,"path":82756,"requiresChild":194,"seo":82757,"stem":82758,"__hash__":82759},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":82432,"toc":82751},[82433,82436,82439,82441,82443,82446,82448,82749],[11,82434,82430],{"id":82435},"zoomblur",[15,82437,82438],{},"Radial zoom blur expanding from a center point",[31771,82440],{"component":82430},[23,82442,31775],{"id":26391},[31777,82444],{":props":82445},"[{\"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,82447,31783],{"id":31782},[246,82449,82450,82506,82565,82621,82679],{":tabs":1557},[212,82451,82453],{"className":334,"code":82452,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,82454,82455,82463,82470,82478,82482,82490,82498],{"__ignoreMap":178},[220,82456,82457,82459,82461],{"class":222,"line":223},[220,82458,343],{"class":264},[220,82460,347],{"class":346},[220,82462,359],{"class":264},[220,82464,82465,82467],{"class":222,"line":179},[220,82466,364],{"class":264},[220,82468,82469],{"class":346},"ZoomBlur\n",[220,82471,82472,82474,82476],{"class":222,"line":389},[220,82473,20228],{"class":226},[220,82475,353],{"class":264},[220,82477,43652],{"class":230},[220,82479,82480],{"class":222,"line":399},[220,82481,31819],{"class":264},[220,82483,82484,82486,82488],{"class":222,"line":644},[220,82485,2550],{"class":264},[220,82487,2553],{"class":346},[220,82489,386],{"class":264},[220,82491,82492,82494,82496],{"class":222,"line":650},[220,82493,2567],{"class":264},[220,82495,82430],{"class":346},[220,82497,359],{"class":264},[220,82499,82500,82502,82504],{"class":222,"line":656},[220,82501,402],{"class":264},[220,82503,347],{"class":346},[220,82505,359],{"class":264},[212,82507,82509],{"className":409,"code":82508,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,82510,82511,82519,82525,82537,82541,82549,82557],{"__ignoreMap":178},[220,82512,82513,82515,82517],{"class":222,"line":223},[220,82514,343],{"class":264},[220,82516,347],{"class":420},[220,82518,359],{"class":264},[220,82520,82521,82523],{"class":222,"line":179},[220,82522,364],{"class":264},[220,82524,82469],{"class":420},[220,82526,82527,82529,82531,82533,82535],{"class":222,"line":389},[220,82528,20339],{"class":226},[220,82530,353],{"class":260},[220,82532,743],{"class":264},[220,82534,23867],{"class":420},[220,82536,749],{"class":264},[220,82538,82539],{"class":222,"line":399},[220,82540,31819],{"class":264},[220,82542,82543,82545,82547],{"class":222,"line":644},[220,82544,2550],{"class":264},[220,82546,2553],{"class":420},[220,82548,386],{"class":264},[220,82550,82551,82553,82555],{"class":222,"line":650},[220,82552,2567],{"class":264},[220,82554,82430],{"class":420},[220,82556,359],{"class":264},[220,82558,82559,82561,82563],{"class":222,"line":656},[220,82560,402],{"class":264},[220,82562,347],{"class":420},[220,82564,359],{"class":264},[212,82566,82567],{"className":2844,"code":82508,"language":2846,"meta":178,"style":178},[99,82568,82569,82577,82583,82593,82597,82605,82613],{"__ignoreMap":178},[220,82570,82571,82573,82575],{"class":222,"line":223},[220,82572,343],{"class":264},[220,82574,347],{"class":420},[220,82576,359],{"class":264},[220,82578,82579,82581],{"class":222,"line":179},[220,82580,364],{"class":264},[220,82582,82469],{"class":420},[220,82584,82585,82587,82589,82591],{"class":222,"line":389},[220,82586,20339],{"class":226},[220,82588,29729],{"class":264},[220,82590,23867],{"class":420},[220,82592,749],{"class":264},[220,82594,82595],{"class":222,"line":399},[220,82596,31819],{"class":264},[220,82598,82599,82601,82603],{"class":222,"line":644},[220,82600,2550],{"class":264},[220,82602,2553],{"class":420},[220,82604,386],{"class":264},[220,82606,82607,82609,82611],{"class":222,"line":650},[220,82608,2567],{"class":264},[220,82610,82430],{"class":420},[220,82612,359],{"class":264},[220,82614,82615,82617,82619],{"class":222,"line":656},[220,82616,402],{"class":264},[220,82618,347],{"class":420},[220,82620,359],{"class":264},[212,82622,82623],{"className":468,"code":82508,"language":469,"meta":178,"style":178},[99,82624,82625,82633,82639,82651,82655,82663,82671],{"__ignoreMap":178},[220,82626,82627,82629,82631],{"class":222,"line":223},[220,82628,343],{"class":264},[220,82630,347],{"class":420},[220,82632,359],{"class":264},[220,82634,82635,82637],{"class":222,"line":179},[220,82636,364],{"class":264},[220,82638,82469],{"class":420},[220,82640,82641,82643,82645,82647,82649],{"class":222,"line":389},[220,82642,20339],{"class":226},[220,82644,353],{"class":260},[220,82646,743],{"class":264},[220,82648,23867],{"class":420},[220,82650,749],{"class":264},[220,82652,82653],{"class":222,"line":399},[220,82654,31819],{"class":264},[220,82656,82657,82659,82661],{"class":222,"line":644},[220,82658,2550],{"class":264},[220,82660,2553],{"class":420},[220,82662,386],{"class":264},[220,82664,82665,82667,82669],{"class":222,"line":650},[220,82666,2567],{"class":264},[220,82668,82430],{"class":420},[220,82670,359],{"class":264},[220,82672,82673,82675,82677],{"class":222,"line":656},[220,82674,402],{"class":264},[220,82676,347],{"class":420},[220,82678,359],{"class":264},[212,82680,82682],{"className":251,"code":82681,"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,82683,82684,82694,82698,82712,82716,82729,82737,82741,82745],{"__ignoreMap":178},[220,82685,82686,82688,82690,82692],{"class":222,"line":223},[220,82687,261],{"class":260},[220,82689,11364],{"class":264},[220,82691,268],{"class":260},[220,82693,11369],{"class":230},[220,82695,82696],{"class":222,"line":179},[220,82697,647],{"emptyLinePlaceholder":194},[220,82699,82700,82702,82704,82706,82708,82710],{"class":222,"line":389},[220,82701,1735],{"class":260},[220,82703,1738],{"class":420},[220,82705,1741],{"class":260},[220,82707,1744],{"class":260},[220,82709,1747],{"class":226},[220,82711,1750],{"class":264},[220,82713,82714],{"class":222,"line":399},[220,82715,1765],{"class":264},[220,82717,82718,82720,82723,82725,82727],{"class":222,"line":644},[220,82719,1770],{"class":264},[220,82721,82722],{"class":230},"'ZoomBlur'",[220,82724,32063],{"class":264},[220,82726,23867],{"class":420},[220,82728,7397],{"class":264},[220,82730,82731,82733,82735],{"class":222,"line":650},[220,82732,6865],{"class":264},[220,82734,6409],{"class":230},[220,82736,2465],{"class":264},[220,82738,82739],{"class":222,"line":656},[220,82740,6882],{"class":264},[220,82742,82743],{"class":222,"line":673},[220,82744,1787],{"class":264},[220,82746,82747],{"class":222,"line":682},[220,82748,1792],{"class":264},[1504,82750,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":82752},[82753,82754],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":82430,"description":82438},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":60005,"title":60006,"body":82761,"category":32923,"componentType":25734,"description":60014,"extension":191,"meta":82947,"navigation":194,"path":60200,"requiresChild":32390,"seo":82948,"stem":60202,"__hash__":60203},{"type":8,"value":82762,"toc":82943},[82763,82765,82767,82769,82771,82773,82775,82941],[11,82764,60006],{"id":60011},[15,82766,60014],{},[31771,82768],{"component":60006},[23,82770,31775],{"id":26391},[31777,82772],{":props":60021},[23,82774,31783],{"id":31782},[246,82776,82777,82805,82833,82861,82889],{":tabs":1557},[212,82778,82779],{"className":334,"code":60028,"language":336,"meta":178,"style":178},[99,82780,82781,82789,82797],{"__ignoreMap":178},[220,82782,82783,82785,82787],{"class":222,"line":223},[220,82784,343],{"class":264},[220,82786,347],{"class":346},[220,82788,359],{"class":264},[220,82790,82791,82793,82795],{"class":222,"line":179},[220,82792,364],{"class":264},[220,82794,60006],{"class":346},[220,82796,386],{"class":264},[220,82798,82799,82801,82803],{"class":222,"line":389},[220,82800,402],{"class":264},[220,82802,347],{"class":346},[220,82804,359],{"class":264},[212,82806,82807],{"className":409,"code":60028,"language":411,"meta":178,"style":178},[99,82808,82809,82817,82825],{"__ignoreMap":178},[220,82810,82811,82813,82815],{"class":222,"line":223},[220,82812,343],{"class":264},[220,82814,347],{"class":420},[220,82816,359],{"class":264},[220,82818,82819,82821,82823],{"class":222,"line":179},[220,82820,364],{"class":264},[220,82822,60006],{"class":420},[220,82824,386],{"class":264},[220,82826,82827,82829,82831],{"class":222,"line":389},[220,82828,402],{"class":264},[220,82830,347],{"class":420},[220,82832,359],{"class":264},[212,82834,82835],{"className":2844,"code":60028,"language":2846,"meta":178,"style":178},[99,82836,82837,82845,82853],{"__ignoreMap":178},[220,82838,82839,82841,82843],{"class":222,"line":223},[220,82840,343],{"class":264},[220,82842,347],{"class":420},[220,82844,359],{"class":264},[220,82846,82847,82849,82851],{"class":222,"line":179},[220,82848,364],{"class":264},[220,82850,60006],{"class":420},[220,82852,386],{"class":264},[220,82854,82855,82857,82859],{"class":222,"line":389},[220,82856,402],{"class":264},[220,82858,347],{"class":420},[220,82860,359],{"class":264},[212,82862,82863],{"className":468,"code":60028,"language":469,"meta":178,"style":178},[99,82864,82865,82873,82881],{"__ignoreMap":178},[220,82866,82867,82869,82871],{"class":222,"line":223},[220,82868,343],{"class":264},[220,82870,347],{"class":420},[220,82872,359],{"class":264},[220,82874,82875,82877,82879],{"class":222,"line":179},[220,82876,364],{"class":264},[220,82878,60006],{"class":420},[220,82880,386],{"class":264},[220,82882,82883,82885,82887],{"class":222,"line":389},[220,82884,402],{"class":264},[220,82886,347],{"class":420},[220,82888,359],{"class":264},[212,82890,82891],{"className":251,"code":60141,"language":253,"meta":178,"style":178},[99,82892,82893,82903,82907,82921,82925,82933,82937],{"__ignoreMap":178},[220,82894,82895,82897,82899,82901],{"class":222,"line":223},[220,82896,261],{"class":260},[220,82898,11364],{"class":264},[220,82900,268],{"class":260},[220,82902,11369],{"class":230},[220,82904,82905],{"class":222,"line":179},[220,82906,647],{"emptyLinePlaceholder":194},[220,82908,82909,82911,82913,82915,82917,82919],{"class":222,"line":389},[220,82910,1735],{"class":260},[220,82912,1738],{"class":420},[220,82914,1741],{"class":260},[220,82916,1744],{"class":260},[220,82918,1747],{"class":226},[220,82920,1750],{"class":264},[220,82922,82923],{"class":222,"line":399},[220,82924,1765],{"class":264},[220,82926,82927,82929,82931],{"class":222,"line":644},[220,82928,1770],{"class":264},[220,82930,60182],{"class":230},[220,82932,2465],{"class":264},[220,82934,82935],{"class":222,"line":650},[220,82936,1787],{"class":264},[220,82938,82939],{"class":222,"line":656},[220,82940,1792],{"class":264},[1504,82942,32661],{},{"title":178,"searchDepth":179,"depth":179,"links":82944},[82945,82946],{"id":26391,"depth":179,"text":31775},{"id":31782,"depth":179,"text":31783},{},{"title":60006,"description":60014},[82950,82951],{"title":59806,"path":60000,"stem":60002,"children":-1},{"title":60206,"path":60476,"stem":60478,"children":-1}]