[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-docs":3,"component-docs":31893,"doc-\u002Fdocs\u002Fguide\u002Fregistry":81971,"doc-surr-\u002Fdocs\u002Fguide\u002Fregistry":190},[4,199,1525,2248,2486,4448,5505,6122,7600,10235,12234,15009,17291,20957,25836,26200,26835,27477,28374,28991,29569,30111,30698,31220],{"id":5,"title":6,"body":7,"category":188,"description":189,"exclude":190,"extension":191,"forceFramework":190,"icon":192,"meta":193,"navigation":194,"path":195,"seo":196,"stem":197,"__hash__":198},"guide\u002Fdocs\u002Fguide\u002F0.index.md","What is shaders?",{"type":8,"value":9,"toc":177},"minimark",[10,14,18,22,27,30,33,52,61,65,68,71,91,95,103,106,110,113,136,139,143,146,149,153,156,170,174],[11,12,6],"h1",{"id":13},"what-is-shaders",[15,16,17],"p",{},"Shaders is a design platform for creating production-ready WebGPU effects. It lets developers and design engineers build interactive backgrounds, logo effects, image effects, and other GPU-powered visuals without writing a line of shader code.",[19,20],"shader-demo",{":preset":21},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0},\"color\":\"#0f0f12\"}},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.54,\"y\":0.77},\"fontFamily\":\"Geist\",\"fontSize\":0.39,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"welcome\"}},{\"type\":\"LightEdge\",\"props\":{\"bloom\":0.52,\"center\":{\"x\":0.22,\"y\":0.36},\"intensity\":1,\"pulse\":0.34,\"scale\":1.6111,\"shape\":{\"type\":\"metaballs3D\",\"ballRadius\":0.16,\"spread\":0.2,\"blend\":0.12,\"speed\":1,\"rotX\":0,\"rotY\":0,\"rotZ\":0},\"shapeType\":\"metaballs3D\",\"softness\":1,\"spots\":4,\"spotSize\":0.43,\"thickness\":0.26}}]}",[23,24,26],"h2",{"id":25},"design-first-code-second","Design first. Code second.",[15,28,29],{},"Most people start in the design editor, not in code.",[15,31,32],{},"In the editor you can:",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"Visually build effects by adding and arranging layers",[37,41,42],{},"Combine layers to create something more complex than any single effect",[37,44,45],{},"Adjust properties with sliders, color pickers, and other visual controls",[37,47,48],{},"Experiment quickly, trying ideas without touching a text editor",[37,50,51],{},"Preview instantly, with every change reflected in real time",[15,53,54,55,60],{},"Once you're happy with the result, you export clean components for your framework of choice, or use the ",[56,57,59],"a",{"href":58},"\u002Fdocs\u002Fguide\u002Fmcp","MCP"," to have your AI coding agent install the effect directly into your project. For most people, the editor is where the actual work of building an effect happens.",[23,62,64],{"id":63},"production-ready-from-day-one","Production-ready from day one",[15,66,67],{},"What you export is code you can drop straight into your project, not a video or an image. It's written in the same simple, declarative component structure you use throughout Shaders, so it reads clearly and stays easy to adjust once it's in your codebase.",[15,69,70],{},"Export to:",[34,72,73,76,79,82,85,88],{},[37,74,75],{},"Vue",[37,77,78],{},"React",[37,80,81],{},"Svelte",[37,83,84],{},"Solid",[37,86,87],{},"JavaScript",[37,89,90],{},"Framer",[23,92,94],{"id":93},"how-shaders-works","How Shaders works",[15,96,97,98,102],{},"Under the hood, a ",[99,100,101],"code",{},"\u003CShader>"," component renders to a single canvas element, no matter how many layers you nest inside it. Those layers are combined by our own render engine, built on TypeGPU for performance, which compiles everything down to WebGPU.",[15,104,105],{},"Props stay reactive, so changing a value updates the effect instantly without recompiling anything.",[23,107,109],{"id":108},"what-can-i-build","What can I build?",[15,111,112],{},"Almost anything visual. A few examples to get you thinking:",[34,114,115,118,121,124,127,130,133],{},[37,116,117],{},"Hero backgrounds and animated gradients",[37,119,120],{},"Cursor-reactive interactions",[37,122,123],{},"Logo effects and image effects",[37,125,126],{},"Glass, distortion, and lighting effects",[37,128,129],{},"Procedural shapes",[37,131,132],{},"Masking, blending, and text effects",[37,134,135],{},"Animated UI decoration",[15,137,138],{},"These building blocks show up everywhere from landing pages and product showcases to portfolio sites and full marketing websites. Every effect is built by combining a handful of simple components, and new components keep expanding what's possible.",[23,140,142],{"id":141},"no-shader-experience-required","No shader experience required",[15,144,145],{},"You don't need to know GLSL, WGSL, or any graphics programming to use Shaders. If you're comfortable with everyday frontend development or visual design tools, you already have what you need to get started.",[15,147,148],{},"The component-based approach also scales with you. As you get more comfortable, composing and layering effects lets you build results that look more sophisticated than the individual pieces suggest.",[23,150,152],{"id":151},"supported-frameworks","Supported frameworks",[15,154,155],{},"Shaders ships dedicated integrations for Vue, React, Svelte, Solid, JavaScript, and Framer, so you can use it with the framework or platform you're already building in.",[15,157,158,162,163,169],{},[159,160,161],"strong",{},"Building in Framer?"," You don't need npm or any of the code guides here — everything works through the ",[56,164,168],{"href":165,"rel":166},"https:\u002F\u002Fshaders.com\u002Fframer",[167],"nofollow","official Shaders plugin for Framer",". Browse your shaders and the preset library, then drop effects straight onto your Framer canvas, no code required.",[23,171,173],{"id":172},"browser-support","Browser support",[15,175,176],{},"Shaders runs on WebGPU, the modern successor to WebGL, now shipping in every major browser. Across telemetry from 145,000+ sessions on 1,000+ production domains, more than 99% of user devices run it without issue. And on the rare device that doesn't support it, the canvas simply stays empty — your layout and the rest of your page carry on exactly as normal.",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183,184,185,186,187],{"id":25,"depth":179,"text":26},{"id":63,"depth":179,"text":64},{"id":93,"depth":179,"text":94},{"id":108,"depth":179,"text":109},{"id":141,"depth":179,"text":142},{"id":151,"depth":179,"text":152},{"id":172,"depth":179,"text":173},"concepts","A design platform for creating production-ready WebGPU effects",null,"md","hand-wave",{},true,"\u002Fdocs\u002Fguide",{"title":6,"description":189},"docs\u002Fguide\u002F0.index","tljpUYFl1uZaqTdHradMgrA4VY1wPQeNSChUAPMo8FE",{"id":200,"title":201,"body":202,"category":188,"description":1516,"exclude":1517,"extension":191,"forceFramework":190,"icon":1519,"meta":1520,"navigation":194,"path":1521,"seo":1522,"stem":1523,"__hash__":1524},"guide\u002Fdocs\u002Fguide\u002F1.quickstart.md","Quickstart",{"type":8,"value":203,"toc":1507},[204,207,211,235,238,242,245,320,324,330,576,579,591,595,598,1147,1150,1154,1162,1464,1468,1471,1475,1503],[11,205,201],{"id":206},"quickstart",[23,208,210],{"id":209},"installation","Installation",[212,213,217],"pre",{"className":214,"code":215,"language":216,"meta":178,"style":178},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[99,218,219],{"__ignoreMap":178},[220,221,224,228,232],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"svObZ","npm",[220,229,231],{"class":230},"sU2Wk"," install",[220,233,234],{"class":230}," shaders\n",[15,236,237],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[23,239,241],{"id":240},"import-your-components","Import your components",[15,243,244],{},"Import from the entry point that matches your framework:",[246,247,249,272,288,304],"code-group",{":tabs":248},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[212,250,254],{"className":251,"code":252,"language":253,"meta":178,"style":178},"language-javascript shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fvue'\n","javascript",[99,255,256],{"__ignoreMap":178},[220,257,258,262,266,269],{"class":222,"line":223},[220,259,261],{"class":260},"snl16","import",[220,263,265],{"class":264},"s95oV"," { Shader, LinearGradient, CursorTrail } ",[220,267,268],{"class":260},"from",[220,270,271],{"class":230}," 'shaders\u002Fvue'\n",[212,273,275],{"className":251,"code":274,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n",[99,276,277],{"__ignoreMap":178},[220,278,279,281,283,285],{"class":222,"line":223},[220,280,261],{"class":260},[220,282,265],{"class":264},[220,284,268],{"class":260},[220,286,287],{"class":230}," 'shaders\u002Freact'\n",[212,289,291],{"className":251,"code":290,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n",[99,292,293],{"__ignoreMap":178},[220,294,295,297,299,301],{"class":222,"line":223},[220,296,261],{"class":260},[220,298,265],{"class":264},[220,300,268],{"class":260},[220,302,303],{"class":230}," 'shaders\u002Fsvelte'\n",[212,305,307],{"className":251,"code":306,"language":253,"meta":178,"style":178},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsolid'\n",[99,308,309],{"__ignoreMap":178},[220,310,311,313,315,317],{"class":222,"line":223},[220,312,261],{"class":260},[220,314,265],{"class":264},[220,316,268],{"class":260},[220,318,319],{"class":230}," 'shaders\u002Fsolid'\n",[23,321,323],{"id":322},"your-first-shader","Your first shader",[15,325,326,327,329],{},"Wrap your effects in a ",[99,328,101],{}," component and add children inside:",[246,331,332,407,466,522],{":tabs":248},[212,333,337],{"className":334,"code":335,"language":336,"meta":178,"style":178},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","vue-html",[99,338,339,360,387,397],{"__ignoreMap":178},[220,340,341,344,348,351,354,357],{"class":222,"line":223},[220,342,343],{"class":264},"\u003C",[220,345,347],{"class":346},"s4JwU","Shader",[220,349,350],{"class":226}," class",[220,352,353],{"class":264},"=",[220,355,356],{"class":230},"\"w-full h-64\"",[220,358,359],{"class":264},">\n",[220,361,362,365,368,371,373,376,379,381,384],{"class":222,"line":179},[220,363,364],{"class":264}," \u003C",[220,366,367],{"class":346},"LinearGradient",[220,369,370],{"class":226}," colorA",[220,372,353],{"class":264},[220,374,375],{"class":230},"\"#0f172a\"",[220,377,378],{"class":226}," colorB",[220,380,353],{"class":264},[220,382,383],{"class":230},"\"#7c3aed\"",[220,385,386],{"class":264}," \u002F>\n",[220,388,390,392,395],{"class":222,"line":389},3,[220,391,364],{"class":264},[220,393,394],{"class":346},"CursorTrail",[220,396,386],{"class":264},[220,398,400,403,405],{"class":222,"line":399},4,[220,401,402],{"class":264},"\u003C\u002F",[220,404,347],{"class":346},[220,406,359],{"class":264},[212,408,412],{"className":409,"code":410,"language":411,"meta":178,"style":178},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","jsx",[99,413,414,430,450,458],{"__ignoreMap":178},[220,415,416,418,421,424,426,428],{"class":222,"line":223},[220,417,343],{"class":264},[220,419,347],{"class":420},"sDLfK",[220,422,423],{"class":226}," className",[220,425,353],{"class":260},[220,427,356],{"class":230},[220,429,359],{"class":264},[220,431,432,434,436,438,440,442,444,446,448],{"class":222,"line":179},[220,433,364],{"class":264},[220,435,367],{"class":420},[220,437,370],{"class":226},[220,439,353],{"class":260},[220,441,375],{"class":230},[220,443,378],{"class":226},[220,445,353],{"class":260},[220,447,383],{"class":230},[220,449,386],{"class":264},[220,451,452,454,456],{"class":222,"line":389},[220,453,364],{"class":264},[220,455,394],{"class":420},[220,457,386],{"class":264},[220,459,460,462,464],{"class":222,"line":399},[220,461,402],{"class":264},[220,463,347],{"class":420},[220,465,359],{"class":264},[212,467,470],{"className":468,"code":335,"language":469,"meta":178,"style":178},"language-tsx shiki shiki-themes github-dark","tsx",[99,471,472,486,506,514],{"__ignoreMap":178},[220,473,474,476,478,480,482,484],{"class":222,"line":223},[220,475,343],{"class":264},[220,477,347],{"class":420},[220,479,350],{"class":226},[220,481,353],{"class":260},[220,483,356],{"class":230},[220,485,359],{"class":264},[220,487,488,490,492,494,496,498,500,502,504],{"class":222,"line":179},[220,489,364],{"class":264},[220,491,367],{"class":420},[220,493,370],{"class":226},[220,495,353],{"class":260},[220,497,375],{"class":230},[220,499,378],{"class":226},[220,501,353],{"class":260},[220,503,383],{"class":230},[220,505,386],{"class":264},[220,507,508,510,512],{"class":222,"line":389},[220,509,364],{"class":264},[220,511,394],{"class":420},[220,513,386],{"class":264},[220,515,516,518,520],{"class":222,"line":399},[220,517,402],{"class":264},[220,519,347],{"class":420},[220,521,359],{"class":264},[212,523,524],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,525,526,540,560,568],{"__ignoreMap":178},[220,527,528,530,532,534,536,538],{"class":222,"line":223},[220,529,343],{"class":264},[220,531,347],{"class":420},[220,533,350],{"class":226},[220,535,353],{"class":260},[220,537,356],{"class":230},[220,539,359],{"class":264},[220,541,542,544,546,548,550,552,554,556,558],{"class":222,"line":179},[220,543,364],{"class":264},[220,545,367],{"class":420},[220,547,370],{"class":226},[220,549,353],{"class":260},[220,551,375],{"class":230},[220,553,378],{"class":226},[220,555,353],{"class":260},[220,557,383],{"class":230},[220,559,386],{"class":264},[220,561,562,564,566],{"class":222,"line":389},[220,563,364],{"class":264},[220,565,394],{"class":420},[220,567,386],{"class":264},[220,569,570,572,574],{"class":222,"line":399},[220,571,402],{"class":264},[220,573,347],{"class":420},[220,575,359],{"class":264},[19,577],{":preset":578},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,580,581,583,584,587,588,590],{},[99,582,101],{}," renders a ",[99,585,586],{},"\u003Ccanvas>"," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[99,589,101],{}," controls the canvas size and position.",[23,592,594],{"id":593},"sizing-the-canvas","Sizing the canvas",[15,596,597],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[246,599,600,734,877,1014],{":tabs":248},[212,601,603],{"className":334,"code":602,"language":336,"meta":178,"style":178},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Aspect ratio with fluid width -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,604,605,611,626,634,642,648,654,671,680,689,694,700,716,725],{"__ignoreMap":178},[220,606,607],{"class":222,"line":223},[220,608,610],{"class":609},"sAwPA","\u003C!-- Fill the viewport -->\n",[220,612,613,615,617,619,621,624],{"class":222,"line":179},[220,614,343],{"class":264},[220,616,347],{"class":346},[220,618,350],{"class":226},[220,620,353],{"class":264},[220,622,623],{"class":230},"\"w-screen h-screen\"",[220,625,359],{"class":264},[220,627,628,630,632],{"class":222,"line":389},[220,629,364],{"class":264},[220,631,367],{"class":346},[220,633,386],{"class":264},[220,635,636,638,640],{"class":222,"line":399},[220,637,402],{"class":264},[220,639,347],{"class":346},[220,641,359],{"class":264},[220,643,645],{"class":222,"line":644},5,[220,646,647],{"emptyLinePlaceholder":194},"\n",[220,649,651],{"class":222,"line":650},6,[220,652,653],{"class":609},"\u003C!-- Fixed dimensions -->\n",[220,655,657,659,661,664,666,669],{"class":222,"line":656},7,[220,658,343],{"class":264},[220,660,347],{"class":346},[220,662,663],{"class":226}," style",[220,665,353],{"class":264},[220,667,668],{"class":230},"\"width: 600px; height: 400px;\"",[220,670,359],{"class":264},[220,672,674,676,678],{"class":222,"line":673},8,[220,675,364],{"class":264},[220,677,367],{"class":346},[220,679,386],{"class":264},[220,681,683,685,687],{"class":222,"line":682},9,[220,684,402],{"class":264},[220,686,347],{"class":346},[220,688,359],{"class":264},[220,690,692],{"class":222,"line":691},10,[220,693,647],{"emptyLinePlaceholder":194},[220,695,697],{"class":222,"line":696},11,[220,698,699],{"class":609},"\u003C!-- Aspect ratio with fluid width -->\n",[220,701,703,705,707,709,711,714],{"class":222,"line":702},12,[220,704,343],{"class":264},[220,706,347],{"class":346},[220,708,350],{"class":226},[220,710,353],{"class":264},[220,712,713],{"class":230},"\"w-full aspect-video\"",[220,715,359],{"class":264},[220,717,719,721,723],{"class":222,"line":718},13,[220,720,364],{"class":264},[220,722,367],{"class":346},[220,724,386],{"class":264},[220,726,728,730,732],{"class":222,"line":727},14,[220,729,402],{"class":264},[220,731,347],{"class":346},[220,733,359],{"class":264},[212,735,737],{"className":409,"code":736,"language":411,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,738,739,750,764,772,780,784,793,818,826,834,838,847,861,869],{"__ignoreMap":178},[220,740,741,744,747],{"class":222,"line":223},[220,742,743],{"class":264},"{",[220,745,746],{"class":609},"\u002F* Fill the viewport *\u002F",[220,748,749],{"class":264},"}\n",[220,751,752,754,756,758,760,762],{"class":222,"line":179},[220,753,343],{"class":264},[220,755,347],{"class":420},[220,757,423],{"class":226},[220,759,353],{"class":260},[220,761,623],{"class":230},[220,763,359],{"class":264},[220,765,766,768,770],{"class":222,"line":389},[220,767,364],{"class":264},[220,769,367],{"class":420},[220,771,386],{"class":264},[220,773,774,776,778],{"class":222,"line":399},[220,775,402],{"class":264},[220,777,347],{"class":420},[220,779,359],{"class":264},[220,781,782],{"class":222,"line":644},[220,783,647],{"emptyLinePlaceholder":194},[220,785,786,788,791],{"class":222,"line":650},[220,787,743],{"class":264},[220,789,790],{"class":609},"\u002F* Fixed dimensions *\u002F",[220,792,749],{"class":264},[220,794,795,797,799,801,803,806,809,812,815],{"class":222,"line":656},[220,796,343],{"class":264},[220,798,347],{"class":420},[220,800,663],{"class":226},[220,802,353],{"class":260},[220,804,805],{"class":264},"{{ width: ",[220,807,808],{"class":230},"'600px'",[220,810,811],{"class":264},", height: ",[220,813,814],{"class":230},"'400px'",[220,816,817],{"class":264}," }}>\n",[220,819,820,822,824],{"class":222,"line":673},[220,821,364],{"class":264},[220,823,367],{"class":420},[220,825,386],{"class":264},[220,827,828,830,832],{"class":222,"line":682},[220,829,402],{"class":264},[220,831,347],{"class":420},[220,833,359],{"class":264},[220,835,836],{"class":222,"line":691},[220,837,647],{"emptyLinePlaceholder":194},[220,839,840,842,845],{"class":222,"line":696},[220,841,743],{"class":264},[220,843,844],{"class":609},"\u002F* Aspect ratio with fluid width *\u002F",[220,846,749],{"class":264},[220,848,849,851,853,855,857,859],{"class":222,"line":702},[220,850,343],{"class":264},[220,852,347],{"class":420},[220,854,423],{"class":226},[220,856,353],{"class":260},[220,858,713],{"class":230},[220,860,359],{"class":264},[220,862,863,865,867],{"class":222,"line":718},[220,864,364],{"class":264},[220,866,367],{"class":420},[220,868,386],{"class":264},[220,870,871,873,875],{"class":222,"line":727},[220,872,402],{"class":264},[220,874,347],{"class":420},[220,876,359],{"class":264},[212,878,879],{"className":468,"code":602,"language":469,"meta":178,"style":178},[99,880,881,892,906,914,922,926,935,949,957,965,969,984,998,1006],{"__ignoreMap":178},[220,882,883,886,889],{"class":222,"line":223},[220,884,885],{"class":260},"\u003C!--",[220,887,888],{"class":264}," Fill the viewport ",[220,890,891],{"class":260},"-->\n",[220,893,894,896,898,900,902,904],{"class":222,"line":179},[220,895,343],{"class":264},[220,897,347],{"class":420},[220,899,350],{"class":226},[220,901,353],{"class":260},[220,903,623],{"class":230},[220,905,359],{"class":264},[220,907,908,910,912],{"class":222,"line":389},[220,909,364],{"class":264},[220,911,367],{"class":420},[220,913,386],{"class":264},[220,915,916,918,920],{"class":222,"line":399},[220,917,402],{"class":264},[220,919,347],{"class":420},[220,921,359],{"class":264},[220,923,924],{"class":222,"line":644},[220,925,647],{"emptyLinePlaceholder":194},[220,927,928,930,933],{"class":222,"line":650},[220,929,885],{"class":260},[220,931,932],{"class":264}," Fixed dimensions ",[220,934,891],{"class":260},[220,936,937,939,941,943,945,947],{"class":222,"line":656},[220,938,343],{"class":264},[220,940,347],{"class":420},[220,942,663],{"class":226},[220,944,353],{"class":260},[220,946,668],{"class":230},[220,948,359],{"class":264},[220,950,951,953,955],{"class":222,"line":673},[220,952,364],{"class":264},[220,954,367],{"class":420},[220,956,386],{"class":264},[220,958,959,961,963],{"class":222,"line":682},[220,960,402],{"class":264},[220,962,347],{"class":420},[220,964,359],{"class":264},[220,966,967],{"class":222,"line":691},[220,968,647],{"emptyLinePlaceholder":194},[220,970,971,973,976,979,982],{"class":222,"line":696},[220,972,885],{"class":260},[220,974,975],{"class":264}," Aspect ratio ",[220,977,978],{"class":260},"with",[220,980,981],{"class":264}," fluid width ",[220,983,891],{"class":260},[220,985,986,988,990,992,994,996],{"class":222,"line":702},[220,987,343],{"class":264},[220,989,347],{"class":420},[220,991,350],{"class":226},[220,993,353],{"class":260},[220,995,713],{"class":230},[220,997,359],{"class":264},[220,999,1000,1002,1004],{"class":222,"line":718},[220,1001,364],{"class":264},[220,1003,367],{"class":420},[220,1005,386],{"class":264},[220,1007,1008,1010,1012],{"class":222,"line":727},[220,1009,402],{"class":264},[220,1011,347],{"class":420},[220,1013,359],{"class":264},[212,1015,1017],{"className":468,"code":1016,"language":469,"meta":178,"style":178},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed dimensions *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Aspect ratio with fluid width *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,1018,1019,1027,1041,1049,1057,1061,1069,1089,1097,1105,1109,1117,1131,1139],{"__ignoreMap":178},[220,1020,1021,1023,1025],{"class":222,"line":223},[220,1022,743],{"class":264},[220,1024,746],{"class":609},[220,1026,749],{"class":264},[220,1028,1029,1031,1033,1035,1037,1039],{"class":222,"line":179},[220,1030,343],{"class":264},[220,1032,347],{"class":420},[220,1034,350],{"class":226},[220,1036,353],{"class":260},[220,1038,623],{"class":230},[220,1040,359],{"class":264},[220,1042,1043,1045,1047],{"class":222,"line":389},[220,1044,364],{"class":264},[220,1046,367],{"class":420},[220,1048,386],{"class":264},[220,1050,1051,1053,1055],{"class":222,"line":399},[220,1052,402],{"class":264},[220,1054,347],{"class":420},[220,1056,359],{"class":264},[220,1058,1059],{"class":222,"line":644},[220,1060,647],{"emptyLinePlaceholder":194},[220,1062,1063,1065,1067],{"class":222,"line":650},[220,1064,743],{"class":264},[220,1066,790],{"class":609},[220,1068,749],{"class":264},[220,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":222,"line":656},[220,1072,343],{"class":264},[220,1074,347],{"class":420},[220,1076,663],{"class":226},[220,1078,353],{"class":260},[220,1080,805],{"class":264},[220,1082,808],{"class":230},[220,1084,811],{"class":264},[220,1086,814],{"class":230},[220,1088,817],{"class":264},[220,1090,1091,1093,1095],{"class":222,"line":673},[220,1092,364],{"class":264},[220,1094,367],{"class":420},[220,1096,386],{"class":264},[220,1098,1099,1101,1103],{"class":222,"line":682},[220,1100,402],{"class":264},[220,1102,347],{"class":420},[220,1104,359],{"class":264},[220,1106,1107],{"class":222,"line":691},[220,1108,647],{"emptyLinePlaceholder":194},[220,1110,1111,1113,1115],{"class":222,"line":696},[220,1112,743],{"class":264},[220,1114,844],{"class":609},[220,1116,749],{"class":264},[220,1118,1119,1121,1123,1125,1127,1129],{"class":222,"line":702},[220,1120,343],{"class":264},[220,1122,347],{"class":420},[220,1124,350],{"class":226},[220,1126,353],{"class":260},[220,1128,713],{"class":230},[220,1130,359],{"class":264},[220,1132,1133,1135,1137],{"class":222,"line":718},[220,1134,364],{"class":264},[220,1136,367],{"class":420},[220,1138,386],{"class":264},[220,1140,1141,1143,1145],{"class":222,"line":727},[220,1142,402],{"class":264},[220,1144,347],{"class":420},[220,1146,359],{"class":264},[15,1148,1149],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[23,1151,1153],{"id":1152},"configuring-components","Configuring components",[15,1155,1156,1157,1161],{},"Each component accepts props that control its appearance. Browse the ",[56,1158,1160],{"href":1159},"\u002Fdocs\u002Fcomponents","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[246,1163,1164,1243,1319,1392],{":tabs":248},[212,1165,1167],{"className":334,"code":1166,"language":336,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1168,1169,1183,1190,1200,1210,1220,1230,1235],{"__ignoreMap":178},[220,1170,1171,1173,1175,1177,1179,1181],{"class":222,"line":223},[220,1172,343],{"class":264},[220,1174,347],{"class":346},[220,1176,350],{"class":226},[220,1178,353],{"class":264},[220,1180,356],{"class":230},[220,1182,359],{"class":264},[220,1184,1185,1187],{"class":222,"line":179},[220,1186,364],{"class":264},[220,1188,1189],{"class":346},"LinearGradient\n",[220,1191,1192,1195,1197],{"class":222,"line":389},[220,1193,1194],{"class":226}," colorA",[220,1196,353],{"class":264},[220,1198,1199],{"class":230},"\"#ff6b6b\"\n",[220,1201,1202,1205,1207],{"class":222,"line":399},[220,1203,1204],{"class":226}," colorB",[220,1206,353],{"class":264},[220,1208,1209],{"class":230},"\"#4ecdc4\"\n",[220,1211,1212,1215,1217],{"class":222,"line":644},[220,1213,1214],{"class":226}," :angle",[220,1216,353],{"class":264},[220,1218,1219],{"class":230},"\"45\"\n",[220,1221,1222,1225,1227],{"class":222,"line":650},[220,1223,1224],{"class":226}," color-space",[220,1226,353],{"class":264},[220,1228,1229],{"class":230},"\"oklch\"\n",[220,1231,1232],{"class":222,"line":656},[220,1233,1234],{"class":264}," \u002F>\n",[220,1236,1237,1239,1241],{"class":222,"line":673},[220,1238,402],{"class":264},[220,1240,347],{"class":346},[220,1242,359],{"class":264},[212,1244,1246],{"className":409,"code":1245,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1247,1248,1262,1268,1276,1284,1298,1307,1311],{"__ignoreMap":178},[220,1249,1250,1252,1254,1256,1258,1260],{"class":222,"line":223},[220,1251,343],{"class":264},[220,1253,347],{"class":420},[220,1255,423],{"class":226},[220,1257,353],{"class":260},[220,1259,356],{"class":230},[220,1261,359],{"class":264},[220,1263,1264,1266],{"class":222,"line":179},[220,1265,364],{"class":264},[220,1267,1189],{"class":420},[220,1269,1270,1272,1274],{"class":222,"line":389},[220,1271,1194],{"class":226},[220,1273,353],{"class":260},[220,1275,1199],{"class":230},[220,1277,1278,1280,1282],{"class":222,"line":399},[220,1279,1204],{"class":226},[220,1281,353],{"class":260},[220,1283,1209],{"class":230},[220,1285,1286,1289,1291,1293,1296],{"class":222,"line":644},[220,1287,1288],{"class":226}," angle",[220,1290,353],{"class":260},[220,1292,743],{"class":264},[220,1294,1295],{"class":420},"45",[220,1297,749],{"class":264},[220,1299,1300,1303,1305],{"class":222,"line":650},[220,1301,1302],{"class":226}," colorSpace",[220,1304,353],{"class":260},[220,1306,1229],{"class":230},[220,1308,1309],{"class":222,"line":656},[220,1310,1234],{"class":264},[220,1312,1313,1315,1317],{"class":222,"line":673},[220,1314,402],{"class":264},[220,1316,347],{"class":420},[220,1318,359],{"class":264},[212,1320,1322],{"className":468,"code":1321,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n \u002F>\n\u003C\u002FShader>\n",[99,1323,1324,1338,1344,1352,1360,1372,1380,1384],{"__ignoreMap":178},[220,1325,1326,1328,1330,1332,1334,1336],{"class":222,"line":223},[220,1327,343],{"class":264},[220,1329,347],{"class":420},[220,1331,350],{"class":226},[220,1333,353],{"class":260},[220,1335,356],{"class":230},[220,1337,359],{"class":264},[220,1339,1340,1342],{"class":222,"line":179},[220,1341,364],{"class":264},[220,1343,1189],{"class":420},[220,1345,1346,1348,1350],{"class":222,"line":389},[220,1347,1194],{"class":226},[220,1349,353],{"class":260},[220,1351,1199],{"class":230},[220,1353,1354,1356,1358],{"class":222,"line":399},[220,1355,1204],{"class":226},[220,1357,353],{"class":260},[220,1359,1209],{"class":230},[220,1361,1362,1364,1366,1368,1370],{"class":222,"line":644},[220,1363,1288],{"class":226},[220,1365,353],{"class":260},[220,1367,743],{"class":264},[220,1369,1295],{"class":420},[220,1371,749],{"class":264},[220,1373,1374,1376,1378],{"class":222,"line":650},[220,1375,1302],{"class":226},[220,1377,353],{"class":260},[220,1379,1229],{"class":230},[220,1381,1382],{"class":222,"line":656},[220,1383,1234],{"class":264},[220,1385,1386,1388,1390],{"class":222,"line":673},[220,1387,402],{"class":264},[220,1389,347],{"class":420},[220,1391,359],{"class":264},[212,1393,1394],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,1395,1396,1410,1416,1424,1432,1444,1452,1456],{"__ignoreMap":178},[220,1397,1398,1400,1402,1404,1406,1408],{"class":222,"line":223},[220,1399,343],{"class":264},[220,1401,347],{"class":420},[220,1403,350],{"class":226},[220,1405,353],{"class":260},[220,1407,356],{"class":230},[220,1409,359],{"class":264},[220,1411,1412,1414],{"class":222,"line":179},[220,1413,364],{"class":264},[220,1415,1189],{"class":420},[220,1417,1418,1420,1422],{"class":222,"line":389},[220,1419,1194],{"class":226},[220,1421,353],{"class":260},[220,1423,1199],{"class":230},[220,1425,1426,1428,1430],{"class":222,"line":399},[220,1427,1204],{"class":226},[220,1429,353],{"class":260},[220,1431,1209],{"class":230},[220,1433,1434,1436,1438,1440,1442],{"class":222,"line":644},[220,1435,1288],{"class":226},[220,1437,353],{"class":260},[220,1439,743],{"class":264},[220,1441,1295],{"class":420},[220,1443,749],{"class":264},[220,1445,1446,1448,1450],{"class":222,"line":650},[220,1447,1302],{"class":226},[220,1449,353],{"class":260},[220,1451,1229],{"class":230},[220,1453,1454],{"class":222,"line":656},[220,1455,1234],{"class":264},[220,1457,1458,1460,1462],{"class":222,"line":673},[220,1459,402],{"class":264},[220,1461,347],{"class":420},[220,1463,359],{"class":264},[23,1465,1467],{"id":1466},"using-with-ssr-frameworks","Using with SSR frameworks",[15,1469,1470],{},"Shaders uses WebGPU, which requires a browser environment. If you're using Nuxt, Next.js, SvelteKit, or SolidStart, see the framework-specific SSR guide for your setup.",[23,1472,1474],{"id":1473},"next-steps","Next steps",[34,1476,1477,1484,1491,1498],{},[37,1478,1479,1483],{},[56,1480,1482],{"href":1481},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing Effects"," — stack and nest components for complex results",[37,1485,1486,1490],{},[56,1487,1489],{"href":1488},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout & Positioning"," — position the canvas in your UI",[37,1492,1493,1497],{},[56,1494,1496],{"href":1495},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props & Reactivity"," — bind state and animate props",[37,1499,1500,1502],{},[56,1501,1160],{"href":1159}," — browse all available shaders",[1504,1505,1506],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":1508},[1509,1510,1511,1512,1513,1514,1515],{"id":209,"depth":179,"text":210},{"id":240,"depth":179,"text":241},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":1466,"depth":179,"text":1467},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect",[1518],"js","rocket",{},"\u002Fdocs\u002Fguide\u002Fquickstart",{"title":201,"description":1516},"docs\u002Fguide\u002F1.quickstart","Qy5aUJ4DcUgHPKGddDTVC0xlY3cmFxYRJk7xfpnPymY",{"id":1526,"title":1527,"body":1528,"category":2240,"description":2241,"exclude":190,"extension":191,"forceFramework":190,"icon":2242,"meta":2243,"navigation":194,"path":2244,"seo":2245,"stem":2246,"__hash__":2247},"guide\u002Fdocs\u002Fguide\u002F10.color-space.md","Color Space",{"type":8,"value":1529,"toc":2236},[1530,1533,1537,1544,1555,1793,1833,1837,1851,1872,1889,1912,1916,1919,1929,1939,2125,2220,2233],[11,1531,1527],{"id":1532},"color-space",[19,1534],{":preset":1535,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#ffffff\"}},{\"type\":\"Repeater\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"count\":64,\"hueShift\":10,\"instanceRotation\":-92,\"instanceScale\":1.015,\"jitterScale\":{\"axis\":\"x\",\"type\":\"mouse\",\"momentum\":0.3,\"outputMin\":0,\"outputMax\":0.655,\"smoothing\":0.45},\"mode\":\"linear\",\"spacing\":0},\"children\":[{\"type\":\"Beam\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"endPosition\":{\"x\":0.82,\"y\":0.9},\"endSoftness\":20,\"endThickness\":0.1,\"insideColor\":\"#7a8ff5\",\"startPosition\":{\"x\":0.68,\"y\":0.37},\"startSoftness\":0.3,\"startThickness\":0.1}}]},{\"type\":\"Text\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"color\":\"#000000\",\"fontFamily\":\"Geist\",\"fontSize\":0.050833333333333335,\"fontWeight\":500,\"letterSpacing\":-0.045,\"text\":\"colors\",\"visible\":true}}]}","aces",[15,1538,1539,1540,1543],{},"By default, Shaders uses ",[159,1541,1542],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,1545,1546,1547,1550,1551,1554],{},"To match your design tool exactly, set ",[99,1548,1549],{},"colorSpace"," to ",[99,1552,1553],{},"'srgb'",":",[246,1556,1558,1604,1646,1686,1726],{":tabs":1557},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[212,1559,1561],{"className":334,"code":1560,"language":336,"meta":178,"style":178},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1562,1563,1579,1596],{"__ignoreMap":178},[220,1564,1565,1567,1569,1572,1574,1577],{"class":222,"line":223},[220,1566,343],{"class":264},[220,1568,347],{"class":346},[220,1570,1571],{"class":226}," color-space",[220,1573,353],{"class":264},[220,1575,1576],{"class":230},"\"srgb\"",[220,1578,359],{"class":264},[220,1580,1581,1583,1586,1589,1591,1594],{"class":222,"line":179},[220,1582,364],{"class":264},[220,1584,1585],{"class":346},"SolidColor",[220,1587,1588],{"class":226}," color",[220,1590,353],{"class":264},[220,1592,1593],{"class":230},"\"#5b18ca\"",[220,1595,386],{"class":264},[220,1597,1598,1600,1602],{"class":222,"line":389},[220,1599,402],{"class":264},[220,1601,347],{"class":346},[220,1603,359],{"class":264},[212,1605,1607],{"className":409,"code":1606,"language":411,"meta":178,"style":178},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" \u002F>\n\u003C\u002FShader>\n",[99,1608,1609,1624,1638],{"__ignoreMap":178},[220,1610,1611,1613,1615,1618,1620,1622],{"class":222,"line":223},[220,1612,343],{"class":264},[220,1614,347],{"class":420},[220,1616,1617],{"class":226}," colorSpace",[220,1619,353],{"class":260},[220,1621,1576],{"class":230},[220,1623,359],{"class":264},[220,1625,1626,1628,1630,1632,1634,1636],{"class":222,"line":179},[220,1627,364],{"class":264},[220,1629,1585],{"class":420},[220,1631,1588],{"class":226},[220,1633,353],{"class":260},[220,1635,1593],{"class":230},[220,1637,386],{"class":264},[220,1639,1640,1642,1644],{"class":222,"line":389},[220,1641,402],{"class":264},[220,1643,347],{"class":420},[220,1645,359],{"class":264},[212,1647,1648],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1649,1650,1664,1678],{"__ignoreMap":178},[220,1651,1652,1654,1656,1658,1660,1662],{"class":222,"line":223},[220,1653,343],{"class":264},[220,1655,347],{"class":420},[220,1657,1617],{"class":226},[220,1659,353],{"class":260},[220,1661,1576],{"class":230},[220,1663,359],{"class":264},[220,1665,1666,1668,1670,1672,1674,1676],{"class":222,"line":179},[220,1667,364],{"class":264},[220,1669,1585],{"class":420},[220,1671,1588],{"class":226},[220,1673,353],{"class":260},[220,1675,1593],{"class":230},[220,1677,386],{"class":264},[220,1679,1680,1682,1684],{"class":222,"line":389},[220,1681,402],{"class":264},[220,1683,347],{"class":420},[220,1685,359],{"class":264},[212,1687,1688],{"className":468,"code":1606,"language":469,"meta":178,"style":178},[99,1689,1690,1704,1718],{"__ignoreMap":178},[220,1691,1692,1694,1696,1698,1700,1702],{"class":222,"line":223},[220,1693,343],{"class":264},[220,1695,347],{"class":420},[220,1697,1617],{"class":226},[220,1699,353],{"class":260},[220,1701,1576],{"class":230},[220,1703,359],{"class":264},[220,1705,1706,1708,1710,1712,1714,1716],{"class":222,"line":179},[220,1707,364],{"class":264},[220,1709,1585],{"class":420},[220,1711,1588],{"class":226},[220,1713,353],{"class":260},[220,1715,1593],{"class":230},[220,1717,386],{"class":264},[220,1719,1720,1722,1724],{"class":222,"line":389},[220,1721,402],{"class":264},[220,1723,347],{"class":420},[220,1725,359],{"class":264},[212,1727,1729],{"className":251,"code":1728,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[99,1730,1731,1751,1761,1766,1783,1788],{"__ignoreMap":178},[220,1732,1733,1736,1739,1742,1745,1748],{"class":222,"line":223},[220,1734,1735],{"class":260},"const",[220,1737,1738],{"class":420}," shader",[220,1740,1741],{"class":260}," =",[220,1743,1744],{"class":260}," await",[220,1746,1747],{"class":226}," createShader",[220,1749,1750],{"class":264},"(canvas, {\n",[220,1752,1753,1756,1758],{"class":222,"line":179},[220,1754,1755],{"class":264}," colorSpace: ",[220,1757,1553],{"class":230},[220,1759,1760],{"class":264},",\n",[220,1762,1763],{"class":222,"line":389},[220,1764,1765],{"class":264}," components: [\n",[220,1767,1768,1771,1774,1777,1780],{"class":222,"line":399},[220,1769,1770],{"class":264}," { type: ",[220,1772,1773],{"class":230},"'SolidColor'",[220,1775,1776],{"class":264},", props: { color: ",[220,1778,1779],{"class":230},"'#5b18ca'",[220,1781,1782],{"class":264}," } }\n",[220,1784,1785],{"class":222,"line":644},[220,1786,1787],{"class":264}," ]\n",[220,1789,1790],{"class":222,"line":650},[220,1791,1792],{"class":264},"})\n",[1794,1795,1796,1809],"table",{},[1797,1798,1799],"thead",{},[1800,1801,1802,1806],"tr",{},[1803,1804,1805],"th",{},"Value",[1803,1807,1808],{},"Description",[1810,1811,1812,1823],"tbody",{},[1800,1813,1814,1820],{},[1815,1816,1817],"td",{},[99,1818,1819],{},"p3-linear",[1815,1821,1822],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1800,1824,1825,1830],{},[1815,1826,1827],{},[99,1828,1829],{},"srgb",[1815,1831,1832],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1834,1836],{"id":1835},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1838,1839,1840,1842,1843,1845,1846,1850],{},"The ",[99,1841,1549],{}," prop on ",[99,1844,101],{}," controls the ",[1847,1848,1849],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1852,1853,1854,1856,1857,1860,1861,1864,1865,1868,1869,1871],{},"Several gradient and color components also have their own ",[99,1855,1549],{}," prop that controls how colors ",[1847,1858,1859],{},"interpolate between stops"," (for example, between ",[99,1862,1863],{},"colorA"," and ",[99,1866,1867],{},"colorB"," in a ",[99,1870,367],{},"). These are two separate concepts:",[34,1873,1874,1883],{},[37,1875,1876,1879,1880,1882],{},[159,1877,1878],{},"Output color space"," — set on the root ",[99,1881,101],{},", affects the entire canvas output",[37,1884,1885,1888],{},[159,1886,1887],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1890,1891,1892,1895,1896,1895,1899,1895,1902,1895,1905,1895,1908,1911],{},"Available interpolation modes (where supported): ",[99,1893,1894],{},"linear",", ",[99,1897,1898],{},"oklch",[99,1900,1901],{},"oklab",[99,1903,1904],{},"hsl",[99,1906,1907],{},"hsv",[99,1909,1910],{},"lch",". See individual component docs for options.",[23,1913,1915],{"id":1914},"tone-mapping","Tone mapping",[19,1917],{":preset":1918,"toneMapping":1536},"{\"components\":[{\"type\":\"SolidColor\",\"props\":{\"color\":\"#16171a\"}},{\"type\":\"Prism\",\"props\":{\"boundingBox\":{\"x\":{\"unit\":\"uv\",\"value\":0},\"y\":{\"unit\":\"uv\",\"value\":0},\"width\":{\"unit\":\"uv\",\"value\":1},\"height\":{\"unit\":\"uv\",\"value\":1},\"origin\":\"top-left\",\"rotation\":0,\"cornerRadius\":{\"unit\":\"px\",\"value\":0}},\"beamColor\":\"#f0f0f0\",\"beamWidth\":0.002,\"endFalloff\":1.4,\"intensity\":2.45,\"position\":{\"x\":0,\"y\":0.5},\"saturation\":0.96,\"softness\":0.2,\"speed\":0.13,\"splitPosition\":{\"x\":0.33,\"y\":0.5},\"spread\":0.93,\"startFalloff\":0}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"blur\":20,\"center\":{\"x\":0.4,\"y\":0.5},\"edgeSoftness\":0.8,\"fresnel\":0,\"fresnelSoftness\":0.6,\"highlight\":0,\"highlightSoftness\":0.1,\"innerZoom\":0.5,\"lightAngle\":172,\"refraction\":0.41,\"scale\":0.5571594449767269,\"shape\":{\"depth\":0.425,\"bevel\":0.03,\"rotX\":0,\"rotY\":-80,\"rotZ\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":-180,\"outputMax\":180,\"speed\":0.3,\"easing\":\"quad\"},\"type\":\"svg\",\"svgUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FvIlF2DpaDiin.svg\",\"geometry\":\"extrude\"},\"shapeSdfUrl\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002FDODKZwnr2rPw_sdf.bin\",\"shapeType\":\"svgExtrude3D\",\"thickness\":1}},{\"type\":\"Text\",\"props\":{\"blendMode\":\"difference\",\"center\":{\"x\":0.73,\"y\":0.5},\"fontFamily\":\"Geist\",\"letterSpacing\":-0.045,\"text\":\"tone mapping\"}},{\"type\":\"Halftone\",\"props\":{\"blackAngle\":131,\"cyanAngle\":241,\"frequency\":183,\"magentaAngle\":165,\"misprint\":0.004,\"opacity\":0.05,\"style\":\"cmyk\",\"yellowAngle\":76}}]}",[15,1920,1921,1922,1925,1926,1928],{},"When you layer additive blend modes like ",[99,1923,1924],{},"linearDodge"," or build up bright glows, color channels can exceed 1.0 (HDR values). In the default ",[99,1927,1894],{}," mode these are hard-clipped. Tone mapping compresses that range smoothly before display — the same way a camera's film curve handles overexposure.",[15,1930,1931,1932,1935,1936,1938],{},"Set ",[99,1933,1934],{},"toneMapping"," on the root ",[99,1937,101],{}," component:",[246,1940,1941,1975,2013,2047,2081],{":tabs":1557},[212,1942,1944],{"className":334,"code":1943,"language":336,"meta":178,"style":178},"\u003CShader tone-mapping=\"aces\">\n \u003C!-- your components -->\n\u003C\u002FShader>\n",[99,1945,1946,1962,1967],{"__ignoreMap":178},[220,1947,1948,1950,1952,1955,1957,1960],{"class":222,"line":223},[220,1949,343],{"class":264},[220,1951,347],{"class":346},[220,1953,1954],{"class":226}," tone-mapping",[220,1956,353],{"class":264},[220,1958,1959],{"class":230},"\"aces\"",[220,1961,359],{"class":264},[220,1963,1964],{"class":222,"line":179},[220,1965,1966],{"class":609}," \u003C!-- your components -->\n",[220,1968,1969,1971,1973],{"class":222,"line":389},[220,1970,402],{"class":264},[220,1972,347],{"class":346},[220,1974,359],{"class":264},[212,1976,1978],{"className":409,"code":1977,"language":411,"meta":178,"style":178},"\u003CShader toneMapping=\"aces\">\n {\u002F* your components *\u002F}\n\u003C\u002FShader>\n",[99,1979,1980,1995,2005],{"__ignoreMap":178},[220,1981,1982,1984,1986,1989,1991,1993],{"class":222,"line":223},[220,1983,343],{"class":264},[220,1985,347],{"class":420},[220,1987,1988],{"class":226}," toneMapping",[220,1990,353],{"class":260},[220,1992,1959],{"class":230},[220,1994,359],{"class":264},[220,1996,1997,2000,2003],{"class":222,"line":179},[220,1998,1999],{"class":264}," {",[220,2001,2002],{"class":609},"\u002F* your components *\u002F",[220,2004,749],{"class":264},[220,2006,2007,2009,2011],{"class":222,"line":389},[220,2008,402],{"class":264},[220,2010,347],{"class":420},[220,2012,359],{"class":264},[212,2014,2015],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2016,2017,2031,2039],{"__ignoreMap":178},[220,2018,2019,2021,2023,2025,2027,2029],{"class":222,"line":223},[220,2020,343],{"class":264},[220,2022,347],{"class":420},[220,2024,1988],{"class":226},[220,2026,353],{"class":260},[220,2028,1959],{"class":230},[220,2030,359],{"class":264},[220,2032,2033,2035,2037],{"class":222,"line":179},[220,2034,1999],{"class":264},[220,2036,2002],{"class":609},[220,2038,749],{"class":264},[220,2040,2041,2043,2045],{"class":222,"line":389},[220,2042,402],{"class":264},[220,2044,347],{"class":420},[220,2046,359],{"class":264},[212,2048,2049],{"className":468,"code":1977,"language":469,"meta":178,"style":178},[99,2050,2051,2065,2073],{"__ignoreMap":178},[220,2052,2053,2055,2057,2059,2061,2063],{"class":222,"line":223},[220,2054,343],{"class":264},[220,2056,347],{"class":420},[220,2058,1988],{"class":226},[220,2060,353],{"class":260},[220,2062,1959],{"class":230},[220,2064,359],{"class":264},[220,2066,2067,2069,2071],{"class":222,"line":179},[220,2068,1999],{"class":264},[220,2070,2002],{"class":609},[220,2072,749],{"class":264},[220,2074,2075,2077,2079],{"class":222,"line":389},[220,2076,402],{"class":264},[220,2078,347],{"class":420},[220,2080,359],{"class":264},[212,2082,2084],{"className":251,"code":2083,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n toneMapping: 'aces',\n components: [\u002F* ... *\u002F]\n})\n",[99,2085,2086,2100,2110,2121],{"__ignoreMap":178},[220,2087,2088,2090,2092,2094,2096,2098],{"class":222,"line":223},[220,2089,1735],{"class":260},[220,2091,1738],{"class":420},[220,2093,1741],{"class":260},[220,2095,1744],{"class":260},[220,2097,1747],{"class":226},[220,2099,1750],{"class":264},[220,2101,2102,2105,2108],{"class":222,"line":179},[220,2103,2104],{"class":264}," toneMapping: ",[220,2106,2107],{"class":230},"'aces'",[220,2109,1760],{"class":264},[220,2111,2112,2115,2118],{"class":222,"line":389},[220,2113,2114],{"class":264}," components: [",[220,2116,2117],{"class":609},"\u002F* ... *\u002F",[220,2119,2120],{"class":264},"]\n",[220,2122,2123],{"class":222,"line":399},[220,2124,1792],{"class":264},[1794,2126,2127,2136],{},[1797,2128,2129],{},[1800,2130,2131,2133],{},[1803,2132,1805],{},[1803,2134,2135],{},"Character",[1810,2137,2138,2147,2161,2171,2180,2190,2200,2210],{},[1800,2139,2140,2144],{},[1815,2141,2142],{},[99,2143,1894],{},[1815,2145,2146],{},"No compression (default). Values pass through as-is.",[1800,2148,2149,2154],{},[1815,2150,2151],{},[99,2152,2153],{},"reinhard",[1815,2155,2156,2157,2160],{},"Classic ",[99,2158,2159],{},"x \u002F (1 + x)"," curve. Gentle, natural roll-off.",[1800,2162,2163,2168],{},[1815,2164,2165],{},[99,2166,2167],{},"cineon",[1815,2169,2170],{},"Optimized filmic curve. Warm, contrasty highlights.",[1800,2172,2173,2177],{},[1815,2174,2175],{},[99,2176,1536],{},[1815,2178,2179],{},"ACES Filmic. Industry-standard cinematic look — punchy colors, slightly darker overall.",[1800,2181,2182,2187],{},[1815,2183,2184],{},[99,2185,2186],{},"agx",[1815,2188,2189],{},"AgX. Modern operator with the best hue accuracy at high saturation.",[1800,2191,2192,2197],{},[1815,2193,2194],{},[99,2195,2196],{},"neutral",[1815,2198,2199],{},"Khronos Neutral. Accurate, minimal stylization.",[1800,2201,2202,2207],{},[1815,2203,2204],{},[99,2205,2206],{},"hable",[1815,2208,2209],{},"Uncharted 2 \u002F Hable. Warm, smooth whites with a filmic shoulder.",[1800,2211,2212,2217],{},[1815,2213,2214],{},[99,2215,2216],{},"unreal",[1815,2218,2219],{},"Unreal Engine curve. Bright and smooth.",[15,2221,2222,1864,2224,2226,2227,2229,2230,2232],{},[99,2223,1934],{},[99,2225,1549],{}," are independent — they can be combined freely. ",[99,2228,1934],{}," compresses the brightness range of the final image; ",[99,2231,1549],{}," controls the color gamut used for output.",[1504,2234,2235],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":178,"searchDepth":179,"depth":179,"links":2237},[2238,2239],{"id":1835,"depth":179,"text":1836},{"id":1914,"depth":179,"text":1915},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"\u002Fdocs\u002Fguide\u002Fcolor-space",{"title":1527,"description":2241},"docs\u002Fguide\u002F10.color-space","W8MzsN0s4f5yEfaxEb0_FCLb6CsNfC8O_RAnfSLf-dM",{"id":2249,"title":2250,"body":2251,"category":2240,"description":2479,"exclude":190,"extension":191,"forceFramework":190,"icon":2480,"meta":2481,"navigation":194,"path":2482,"seo":2483,"stem":2484,"__hash__":2485},"guide\u002Fdocs\u002Fguide\u002F11.telemetry.md","Telemetry",{"type":8,"value":2252,"toc":2477},[2253,2256,2259,2270,2273,2474],[11,2254,2250],{"id":2255},"telemetry",[15,2257,2258],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,2260,2261,2262,2265,2266,2269],{},"Telemetry is ",[159,2263,2264],{},"automatically disabled"," when running on ",[99,2267,2268],{},"localhost"," or in development environments.",[15,2271,2272],{},"To disable it explicitly in production:",[246,2274,2275,2312,2352,2388,2424],{":tabs":1557},[212,2276,2278],{"className":334,"code":2277,"language":336,"meta":178,"style":178},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2279,2280,2296,2304],{"__ignoreMap":178},[220,2281,2282,2284,2286,2289,2291,2294],{"class":222,"line":223},[220,2283,343],{"class":264},[220,2285,347],{"class":346},[220,2287,2288],{"class":226}," :disable-telemetry",[220,2290,353],{"class":264},[220,2292,2293],{"class":230},"\"true\"",[220,2295,359],{"class":264},[220,2297,2298,2300,2302],{"class":222,"line":179},[220,2299,364],{"class":264},[220,2301,367],{"class":346},[220,2303,386],{"class":264},[220,2305,2306,2308,2310],{"class":222,"line":389},[220,2307,402],{"class":264},[220,2309,347],{"class":346},[220,2311,359],{"class":264},[212,2313,2315],{"className":409,"code":2314,"language":411,"meta":178,"style":178},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,2316,2317,2336,2344],{"__ignoreMap":178},[220,2318,2319,2321,2323,2326,2328,2330,2333],{"class":222,"line":223},[220,2320,343],{"class":264},[220,2322,347],{"class":420},[220,2324,2325],{"class":226}," disableTelemetry",[220,2327,353],{"class":260},[220,2329,743],{"class":264},[220,2331,2332],{"class":420},"true",[220,2334,2335],{"class":264},"}>\n",[220,2337,2338,2340,2342],{"class":222,"line":179},[220,2339,364],{"class":264},[220,2341,367],{"class":420},[220,2343,386],{"class":264},[220,2345,2346,2348,2350],{"class":222,"line":389},[220,2347,402],{"class":264},[220,2349,347],{"class":420},[220,2351,359],{"class":264},[212,2353,2354],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2355,2356,2372,2380],{"__ignoreMap":178},[220,2357,2358,2360,2362,2364,2366,2368,2370],{"class":222,"line":223},[220,2359,343],{"class":264},[220,2361,347],{"class":420},[220,2363,2325],{"class":226},[220,2365,353],{"class":260},[220,2367,743],{"class":264},[220,2369,2332],{"class":420},[220,2371,2335],{"class":264},[220,2373,2374,2376,2378],{"class":222,"line":179},[220,2375,364],{"class":264},[220,2377,367],{"class":420},[220,2379,386],{"class":264},[220,2381,2382,2384,2386],{"class":222,"line":389},[220,2383,402],{"class":264},[220,2385,347],{"class":420},[220,2387,359],{"class":264},[212,2389,2390],{"className":468,"code":2314,"language":469,"meta":178,"style":178},[99,2391,2392,2408,2416],{"__ignoreMap":178},[220,2393,2394,2396,2398,2400,2402,2404,2406],{"class":222,"line":223},[220,2395,343],{"class":264},[220,2397,347],{"class":420},[220,2399,2325],{"class":226},[220,2401,353],{"class":260},[220,2403,743],{"class":264},[220,2405,2332],{"class":420},[220,2407,2335],{"class":264},[220,2409,2410,2412,2414],{"class":222,"line":179},[220,2411,364],{"class":264},[220,2413,367],{"class":420},[220,2415,386],{"class":264},[220,2417,2418,2420,2422],{"class":222,"line":389},[220,2419,402],{"class":264},[220,2421,347],{"class":420},[220,2423,359],{"class":264},[212,2425,2427],{"className":251,"code":2426,"language":253,"meta":178,"style":178},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[99,2428,2429,2443,2452,2456,2466,2470],{"__ignoreMap":178},[220,2430,2431,2433,2435,2437,2439,2441],{"class":222,"line":223},[220,2432,1735],{"class":260},[220,2434,1738],{"class":420},[220,2436,1741],{"class":260},[220,2438,1744],{"class":260},[220,2440,1747],{"class":226},[220,2442,1750],{"class":264},[220,2444,2445,2448,2450],{"class":222,"line":179},[220,2446,2447],{"class":264}," disableTelemetry: ",[220,2449,2332],{"class":420},[220,2451,1760],{"class":264},[220,2453,2454],{"class":222,"line":389},[220,2455,1765],{"class":264},[220,2457,2458,2460,2463],{"class":222,"line":399},[220,2459,1770],{"class":264},[220,2461,2462],{"class":230},"'LinearGradient'",[220,2464,2465],{"class":264},", props: {} }\n",[220,2467,2468],{"class":222,"line":644},[220,2469,1787],{"class":264},[220,2471,2472],{"class":222,"line":650},[220,2473,1792],{"class":264},[1504,2475,2476],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":178,"searchDepth":179,"depth":179,"links":2478},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"\u002Fdocs\u002Fguide\u002Ftelemetry",{"title":2250,"description":2479},"docs\u002Fguide\u002F11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2487,"title":2488,"body":2489,"category":2240,"description":4441,"exclude":190,"extension":191,"forceFramework":190,"icon":4442,"meta":4443,"navigation":194,"path":4444,"seo":4445,"stem":4446,"__hash__":4447},"guide\u002Fdocs\u002Fguide\u002F12.hooks-events.md","Hooks & Events",{"type":8,"value":2490,"toc":4430},[2491,2494,2497,2501,2506,3261,3266,3271,3285,3292,3296,3312,3316,3322,3325,3329,3339,4073,4077,4083,4364,4368,4371,4427],[11,2492,2488],{"id":2493},"hooks-events",[15,2495,2496],{},"Shaders provides lifecycle hooks that let you respond to key moments in the rendering pipeline. This is useful for orchestrating UI transitions, hiding loading states, or triggering animations once the shader is ready.",[23,2498,2500],{"id":2499},"onready","onReady",[15,2502,1839,2503,2505],{},[99,2504,2500],{}," hook fires once after the GPU has compiled the shader and the first frame is ready to render. This is the ideal moment to fade in the shader, remove a loading skeleton, or start a dependent animation.",[246,2507,2508,2671,2842,2971,3121],{":tabs":1557},[212,2509,2511],{"className":334,"code":2510,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C\u002Fscript>\n",[99,2512,2513,2522,2546,2563,2572,2580,2584,2596,2608,2612,2633,2637,2648,2658,2662],{"__ignoreMap":178},[220,2514,2515,2517,2520],{"class":222,"line":223},[220,2516,343],{"class":264},[220,2518,2519],{"class":346},"template",[220,2521,359],{"class":264},[220,2523,2524,2526,2528,2531,2533,2536,2539,2541,2544],{"class":222,"line":179},[220,2525,364],{"class":264},[220,2527,347],{"class":346},[220,2529,2530],{"class":226}," @ready",[220,2532,353],{"class":264},[220,2534,2535],{"class":230},"\"onShaderReady\"",[220,2537,2538],{"class":226}," :style",[220,2540,353],{"class":264},[220,2542,2543],{"class":230},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[220,2545,359],{"class":264},[220,2547,2548,2551,2554,2556,2558,2561],{"class":222,"line":389},[220,2549,2550],{"class":264}," \u003C",[220,2552,2553],{"class":346},"Circle",[220,2555,1588],{"class":226},[220,2557,353],{"class":264},[220,2559,2560],{"class":230},"\"#ff0088\"",[220,2562,386],{"class":264},[220,2564,2565,2568,2570],{"class":222,"line":399},[220,2566,2567],{"class":264}," \u003C\u002F",[220,2569,347],{"class":346},[220,2571,359],{"class":264},[220,2573,2574,2576,2578],{"class":222,"line":644},[220,2575,402],{"class":264},[220,2577,2519],{"class":346},[220,2579,359],{"class":264},[220,2581,2582],{"class":222,"line":650},[220,2583,647],{"emptyLinePlaceholder":194},[220,2585,2586,2588,2591,2594],{"class":222,"line":656},[220,2587,343],{"class":264},[220,2589,2590],{"class":346},"script",[220,2592,2593],{"class":226}," setup",[220,2595,359],{"class":264},[220,2597,2598,2600,2603,2605],{"class":222,"line":673},[220,2599,261],{"class":260},[220,2601,2602],{"class":264}," { ref } ",[220,2604,268],{"class":260},[220,2606,2607],{"class":230}," 'vue'\n",[220,2609,2610],{"class":222,"line":682},[220,2611,647],{"emptyLinePlaceholder":194},[220,2613,2614,2616,2619,2621,2624,2627,2630],{"class":222,"line":691},[220,2615,1735],{"class":260},[220,2617,2618],{"class":420}," visible",[220,2620,1741],{"class":260},[220,2622,2623],{"class":226}," ref",[220,2625,2626],{"class":264},"(",[220,2628,2629],{"class":420},"false",[220,2631,2632],{"class":264},")\n",[220,2634,2635],{"class":222,"line":696},[220,2636,647],{"emptyLinePlaceholder":194},[220,2638,2639,2642,2645],{"class":222,"line":702},[220,2640,2641],{"class":260},"function",[220,2643,2644],{"class":226}," onShaderReady",[220,2646,2647],{"class":264},"() {\n",[220,2649,2650,2653,2655],{"class":222,"line":718},[220,2651,2652],{"class":264}," visible.value ",[220,2654,353],{"class":260},[220,2656,2657],{"class":420}," true\n",[220,2659,2660],{"class":222,"line":727},[220,2661,749],{"class":264},[220,2663,2665,2667,2669],{"class":222,"line":2664},15,[220,2666,402],{"class":264},[220,2668,2590],{"class":346},[220,2670,359],{"class":264},[212,2672,2674],{"className":409,"code":2673,"language":411,"meta":178,"style":178},"import { useState } from 'react'\n\nfunction App() {\n const [visible, setVisible] = useState(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2675,2676,2688,2692,2701,2731,2735,2743,2750,2773,2804,2809,2824,2833,2838],{"__ignoreMap":178},[220,2677,2678,2680,2683,2685],{"class":222,"line":223},[220,2679,261],{"class":260},[220,2681,2682],{"class":264}," { useState } ",[220,2684,268],{"class":260},[220,2686,2687],{"class":230}," 'react'\n",[220,2689,2690],{"class":222,"line":179},[220,2691,647],{"emptyLinePlaceholder":194},[220,2693,2694,2696,2699],{"class":222,"line":389},[220,2695,2641],{"class":260},[220,2697,2698],{"class":226}," App",[220,2700,2647],{"class":264},[220,2702,2703,2706,2709,2712,2714,2717,2720,2722,2725,2727,2729],{"class":222,"line":399},[220,2704,2705],{"class":260}," const",[220,2707,2708],{"class":264}," [",[220,2710,2711],{"class":420},"visible",[220,2713,1895],{"class":264},[220,2715,2716],{"class":420},"setVisible",[220,2718,2719],{"class":264},"] ",[220,2721,353],{"class":260},[220,2723,2724],{"class":226}," useState",[220,2726,2626],{"class":264},[220,2728,2629],{"class":420},[220,2730,2632],{"class":264},[220,2732,2733],{"class":222,"line":644},[220,2734,647],{"emptyLinePlaceholder":194},[220,2736,2737,2740],{"class":222,"line":650},[220,2738,2739],{"class":260}," return",[220,2741,2742],{"class":264}," (\n",[220,2744,2745,2747],{"class":222,"line":656},[220,2746,2550],{"class":264},[220,2748,2749],{"class":420},"Shader\n",[220,2751,2752,2755,2757,2760,2763,2766,2768,2770],{"class":222,"line":673},[220,2753,2754],{"class":226}," onReady",[220,2756,353],{"class":260},[220,2758,2759],{"class":264},"{() ",[220,2761,2762],{"class":260},"=>",[220,2764,2765],{"class":226}," setVisible",[220,2767,2626],{"class":264},[220,2769,2332],{"class":420},[220,2771,2772],{"class":264},")}\n",[220,2774,2775,2778,2780,2783,2786,2789,2792,2795,2798,2801],{"class":222,"line":682},[220,2776,2777],{"class":226}," style",[220,2779,353],{"class":260},[220,2781,2782],{"class":264},"{{ opacity: visible ",[220,2784,2785],{"class":260},"?",[220,2787,2788],{"class":420}," 1",[220,2790,2791],{"class":260}," :",[220,2793,2794],{"class":420}," 0",[220,2796,2797],{"class":264},", transition: ",[220,2799,2800],{"class":230},"'opacity 0.5s'",[220,2802,2803],{"class":264}," }}\n",[220,2805,2806],{"class":222,"line":691},[220,2807,2808],{"class":264}," >\n",[220,2810,2811,2814,2816,2818,2820,2822],{"class":222,"line":696},[220,2812,2813],{"class":264}," \u003C",[220,2815,2553],{"class":420},[220,2817,1588],{"class":226},[220,2819,353],{"class":260},[220,2821,2560],{"class":230},[220,2823,386],{"class":264},[220,2825,2826,2829,2831],{"class":222,"line":702},[220,2827,2828],{"class":264}," \u003C\u002F",[220,2830,347],{"class":420},[220,2832,359],{"class":264},[220,2834,2835],{"class":222,"line":718},[220,2836,2837],{"class":264}," )\n",[220,2839,2840],{"class":222,"line":727},[220,2841,749],{"class":264},[212,2843,2847],{"className":2844,"code":2845,"language":2846,"meta":178,"style":178},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C\u002Fscript>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n","svelte",[99,2848,2849,2857,2879,2887,2891,2949,2963],{"__ignoreMap":178},[220,2850,2851,2853,2855],{"class":222,"line":223},[220,2852,343],{"class":264},[220,2854,2590],{"class":346},[220,2856,359],{"class":264},[220,2858,2859,2862,2865,2867,2870,2873,2875,2877],{"class":222,"line":179},[220,2860,2861],{"class":260}," let",[220,2863,2864],{"class":264}," visible ",[220,2866,353],{"class":260},[220,2868,2869],{"class":264}," $",[220,2871,2872],{"class":226},"state",[220,2874,2626],{"class":264},[220,2876,2629],{"class":420},[220,2878,2632],{"class":264},[220,2880,2881,2883,2885],{"class":222,"line":389},[220,2882,402],{"class":264},[220,2884,2590],{"class":346},[220,2886,359],{"class":264},[220,2888,2889],{"class":222,"line":399},[220,2890,647],{"emptyLinePlaceholder":194},[220,2892,2893,2895,2897,2900,2903,2905,2907,2909,2912,2915,2917,2919,2922,2925,2927,2929,2931,2933,2935,2937,2939,2942,2944,2947],{"class":222,"line":644},[220,2894,343],{"class":264},[220,2896,347],{"class":420},[220,2898,2899],{"class":226}," onready",[220,2901,2902],{"class":264},"={() ",[220,2904,2762],{"class":260},[220,2906,2864],{"class":264},[220,2908,353],{"class":260},[220,2910,2911],{"class":420}," true",[220,2913,2914],{"class":264},"} ",[220,2916,1504],{"class":226},[220,2918,1554],{"class":264},[220,2920,2921],{"class":420},"opacity",[220,2923,2924],{"class":264},"={visible ",[220,2926,2785],{"class":260},[220,2928,2788],{"class":420},[220,2930,2791],{"class":260},[220,2932,2794],{"class":420},[220,2934,2914],{"class":264},[220,2936,1504],{"class":226},[220,2938,1554],{"class":264},[220,2940,2941],{"class":420},"transition",[220,2943,353],{"class":264},[220,2945,2946],{"class":230},"\"opacity 0.5s\"",[220,2948,359],{"class":264},[220,2950,2951,2953,2955,2957,2959,2961],{"class":222,"line":650},[220,2952,364],{"class":264},[220,2954,2553],{"class":420},[220,2956,1588],{"class":226},[220,2958,353],{"class":264},[220,2960,2560],{"class":230},[220,2962,386],{"class":264},[220,2964,2965,2967,2969],{"class":222,"line":656},[220,2966,402],{"class":264},[220,2968,347],{"class":420},[220,2970,359],{"class":264},[212,2972,2974],{"className":468,"code":2973,"language":469,"meta":178,"style":178},"import { createSignal } from 'solid-js'\n\nfunction App() {\n const [visible, setVisible] = createSignal(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n )\n}\n",[99,2975,2976,2988,2992,3000,3025,3029,3035,3041,3059,3087,3091,3105,3113,3117],{"__ignoreMap":178},[220,2977,2978,2980,2983,2985],{"class":222,"line":223},[220,2979,261],{"class":260},[220,2981,2982],{"class":264}," { createSignal } ",[220,2984,268],{"class":260},[220,2986,2987],{"class":230}," 'solid-js'\n",[220,2989,2990],{"class":222,"line":179},[220,2991,647],{"emptyLinePlaceholder":194},[220,2993,2994,2996,2998],{"class":222,"line":389},[220,2995,2641],{"class":260},[220,2997,2698],{"class":226},[220,2999,2647],{"class":264},[220,3001,3002,3004,3006,3008,3010,3012,3014,3016,3019,3021,3023],{"class":222,"line":399},[220,3003,2705],{"class":260},[220,3005,2708],{"class":264},[220,3007,2711],{"class":420},[220,3009,1895],{"class":264},[220,3011,2716],{"class":420},[220,3013,2719],{"class":264},[220,3015,353],{"class":260},[220,3017,3018],{"class":226}," createSignal",[220,3020,2626],{"class":264},[220,3022,2629],{"class":420},[220,3024,2632],{"class":264},[220,3026,3027],{"class":222,"line":644},[220,3028,647],{"emptyLinePlaceholder":194},[220,3030,3031,3033],{"class":222,"line":650},[220,3032,2739],{"class":260},[220,3034,2742],{"class":264},[220,3036,3037,3039],{"class":222,"line":656},[220,3038,2550],{"class":264},[220,3040,2749],{"class":420},[220,3042,3043,3045,3047,3049,3051,3053,3055,3057],{"class":222,"line":673},[220,3044,2754],{"class":226},[220,3046,353],{"class":260},[220,3048,2759],{"class":264},[220,3050,2762],{"class":260},[220,3052,2765],{"class":226},[220,3054,2626],{"class":264},[220,3056,2332],{"class":420},[220,3058,2772],{"class":264},[220,3060,3061,3063,3065,3068,3070,3073,3075,3077,3079,3081,3083,3085],{"class":222,"line":682},[220,3062,2777],{"class":226},[220,3064,353],{"class":260},[220,3066,3067],{"class":264},"{{ opacity: ",[220,3069,2711],{"class":226},[220,3071,3072],{"class":264},"() ",[220,3074,2785],{"class":260},[220,3076,2788],{"class":420},[220,3078,2791],{"class":260},[220,3080,2794],{"class":420},[220,3082,2797],{"class":264},[220,3084,2800],{"class":230},[220,3086,2803],{"class":264},[220,3088,3089],{"class":222,"line":691},[220,3090,2808],{"class":264},[220,3092,3093,3095,3097,3099,3101,3103],{"class":222,"line":696},[220,3094,2813],{"class":264},[220,3096,2553],{"class":420},[220,3098,1588],{"class":226},[220,3100,353],{"class":260},[220,3102,2560],{"class":230},[220,3104,386],{"class":264},[220,3106,3107,3109,3111],{"class":222,"line":702},[220,3108,2828],{"class":264},[220,3110,347],{"class":420},[220,3112,359],{"class":264},[220,3114,3115],{"class":222,"line":718},[220,3116,2837],{"class":264},[220,3118,3119],{"class":222,"line":727},[220,3120,749],{"class":264},[212,3122,3125],{"className":3123,"code":3124,"language":1518,"meta":178,"style":178},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n\u002F\u002F Start hidden\ncanvas.style.opacity = '0'\ncanvas.style.transition = 'opacity 0.5s'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n ]\n}, {\n onReady: () => {\n canvas.style.opacity = '1'\n }\n})\n",[99,3126,3127,3149,3153,3158,3168,3178,3182,3196,3200,3220,3224,3229,3242,3252,3257],{"__ignoreMap":178},[220,3128,3129,3131,3134,3136,3139,3142,3144,3147],{"class":222,"line":223},[220,3130,1735],{"class":260},[220,3132,3133],{"class":420}," canvas",[220,3135,1741],{"class":260},[220,3137,3138],{"class":264}," document.",[220,3140,3141],{"class":226},"getElementById",[220,3143,2626],{"class":264},[220,3145,3146],{"class":230},"'my-canvas'",[220,3148,2632],{"class":264},[220,3150,3151],{"class":222,"line":179},[220,3152,647],{"emptyLinePlaceholder":194},[220,3154,3155],{"class":222,"line":389},[220,3156,3157],{"class":609},"\u002F\u002F Start hidden\n",[220,3159,3160,3163,3165],{"class":222,"line":399},[220,3161,3162],{"class":264},"canvas.style.opacity ",[220,3164,353],{"class":260},[220,3166,3167],{"class":230}," '0'\n",[220,3169,3170,3173,3175],{"class":222,"line":644},[220,3171,3172],{"class":264},"canvas.style.transition ",[220,3174,353],{"class":260},[220,3176,3177],{"class":230}," 'opacity 0.5s'\n",[220,3179,3180],{"class":222,"line":650},[220,3181,647],{"emptyLinePlaceholder":194},[220,3183,3184,3186,3188,3190,3192,3194],{"class":222,"line":656},[220,3185,1735],{"class":260},[220,3187,1738],{"class":420},[220,3189,1741],{"class":260},[220,3191,1744],{"class":260},[220,3193,1747],{"class":226},[220,3195,1750],{"class":264},[220,3197,3198],{"class":222,"line":673},[220,3199,1765],{"class":264},[220,3201,3202,3204,3207,3210,3213,3215,3218],{"class":222,"line":682},[220,3203,1770],{"class":264},[220,3205,3206],{"class":230},"'Circle'",[220,3208,3209],{"class":264},", id: ",[220,3211,3212],{"class":230},"'c1'",[220,3214,1776],{"class":264},[220,3216,3217],{"class":230},"'#ff0088'",[220,3219,1782],{"class":264},[220,3221,3222],{"class":222,"line":691},[220,3223,1787],{"class":264},[220,3225,3226],{"class":222,"line":696},[220,3227,3228],{"class":264},"}, {\n",[220,3230,3231,3234,3237,3239],{"class":222,"line":702},[220,3232,3233],{"class":226}," onReady",[220,3235,3236],{"class":264},": () ",[220,3238,2762],{"class":260},[220,3240,3241],{"class":264}," {\n",[220,3243,3244,3247,3249],{"class":222,"line":718},[220,3245,3246],{"class":264}," canvas.style.opacity ",[220,3248,353],{"class":260},[220,3250,3251],{"class":230}," '1'\n",[220,3253,3254],{"class":222,"line":727},[220,3255,3256],{"class":264}," }\n",[220,3258,3259],{"class":222,"line":2664},[220,3260,1792],{"class":264},[3262,3263,3265],"h3",{"id":3264},"timing","Timing",[15,3267,3268,3270],{},[99,3269,2500],{}," fires after the shader's node tree has been compiled into a GPU pipeline and is actively rendering. This means:",[34,3272,3273,3276,3279,3282],{},[37,3274,3275],{},"The WebGPU renderer is initialized",[37,3277,3278],{},"All child shader components have registered",[37,3280,3281],{},"The composed shader pipeline has been compiled",[37,3283,3284],{},"The first frame is ready to display",[15,3286,3287,3288,3291],{},"The callback fires ",[159,3289,3290],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3262,3293,3295],{"id":3294},"notes","Notes",[34,3297,3298,3303],{},[37,3299,3300,3302],{},[99,3301,2500],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[37,3304,3305,3306,3308,3309,3311],{},"If the ",[99,3307,101],{}," component starts off-screen and initializes lazily when scrolled into view, ",[99,3310,2500],{}," fires after that deferred initialization completes",[23,3313,3315],{"id":3314},"unsupported-browsers","Unsupported browsers",[15,3317,3318,3319,3321],{},"Shaders is WebGPU-only. On a browser or driver that can't provide a working GPU device — an\nolder Safari, Firefox with WebGPU still behind a flag, a blocklisted or exhausted driver — the\ncanvas simply stays transparent. ",[99,3320,2500],{}," never fires, nothing is written to the console, and\nthe rest of your page is completely unaffected.",[15,3323,3324],{},"If you want to render your own fallback instead of empty space, you have two options.",[3262,3326,3328],{"id":3327},"check-before-you-mount","Check before you mount",[15,3330,3331,3334,3335,3338],{},[99,3332,3333],{},"isWebGPUSupported()"," is a synchronous check for whether the browser exposes WebGPU at all.\n",[99,3336,3337],{},"getWebGPUSupport()"," goes further and actually asks for an adapter, so it also catches\nblocklisted drivers — its result is cached for the page.",[246,3340,3341,3529,3698,3818,3991],{":tabs":1557},[212,3342,3344],{"className":334,"code":3343,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader v-if=\"supported\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n \u003Cdiv v-else class=\"fallback\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fvue'\n\nconst supported = ref(false)\nonMounted(async () => {\n supported.value = (await getWebGPUSupport()).supported\n})\n\u003C\u002Fscript>\n",[99,3345,3346,3354,3370,3384,3392,3415,3423,3427,3437,3448,3459,3463,3480,3497,3516,3520],{"__ignoreMap":178},[220,3347,3348,3350,3352],{"class":222,"line":223},[220,3349,343],{"class":264},[220,3351,2519],{"class":346},[220,3353,359],{"class":264},[220,3355,3356,3358,3360,3363,3365,3368],{"class":222,"line":179},[220,3357,364],{"class":264},[220,3359,347],{"class":346},[220,3361,3362],{"class":226}," v-if",[220,3364,353],{"class":264},[220,3366,3367],{"class":230},"\"supported\"",[220,3369,359],{"class":264},[220,3371,3372,3374,3376,3378,3380,3382],{"class":222,"line":389},[220,3373,2550],{"class":264},[220,3375,2553],{"class":346},[220,3377,1588],{"class":226},[220,3379,353],{"class":264},[220,3381,2560],{"class":230},[220,3383,386],{"class":264},[220,3385,3386,3388,3390],{"class":222,"line":399},[220,3387,2567],{"class":264},[220,3389,347],{"class":346},[220,3391,359],{"class":264},[220,3393,3394,3396,3399,3402,3404,3406,3409,3413],{"class":222,"line":644},[220,3395,364],{"class":264},[220,3397,3398],{"class":346},"div",[220,3400,3401],{"class":226}," v-else",[220,3403,350],{"class":226},[220,3405,353],{"class":264},[220,3407,3408],{"class":230},"\"fallback\"",[220,3410,3412],{"class":3411},"s6RL2"," \u002F",[220,3414,359],{"class":264},[220,3416,3417,3419,3421],{"class":222,"line":650},[220,3418,402],{"class":264},[220,3420,2519],{"class":346},[220,3422,359],{"class":264},[220,3424,3425],{"class":222,"line":656},[220,3426,647],{"emptyLinePlaceholder":194},[220,3428,3429,3431,3433,3435],{"class":222,"line":673},[220,3430,343],{"class":264},[220,3432,2590],{"class":346},[220,3434,2593],{"class":226},[220,3436,359],{"class":264},[220,3438,3439,3441,3444,3446],{"class":222,"line":682},[220,3440,261],{"class":260},[220,3442,3443],{"class":264}," { ref, onMounted } ",[220,3445,268],{"class":260},[220,3447,2607],{"class":230},[220,3449,3450,3452,3455,3457],{"class":222,"line":691},[220,3451,261],{"class":260},[220,3453,3454],{"class":264}," { Shader, Circle, getWebGPUSupport } ",[220,3456,268],{"class":260},[220,3458,271],{"class":230},[220,3460,3461],{"class":222,"line":696},[220,3462,647],{"emptyLinePlaceholder":194},[220,3464,3465,3467,3470,3472,3474,3476,3478],{"class":222,"line":702},[220,3466,1735],{"class":260},[220,3468,3469],{"class":420}," supported",[220,3471,1741],{"class":260},[220,3473,2623],{"class":226},[220,3475,2626],{"class":264},[220,3477,2629],{"class":420},[220,3479,2632],{"class":264},[220,3481,3482,3485,3487,3490,3493,3495],{"class":222,"line":718},[220,3483,3484],{"class":226},"onMounted",[220,3486,2626],{"class":264},[220,3488,3489],{"class":260},"async",[220,3491,3492],{"class":264}," () ",[220,3494,2762],{"class":260},[220,3496,3241],{"class":264},[220,3498,3499,3502,3504,3507,3510,3513],{"class":222,"line":727},[220,3500,3501],{"class":264}," supported.value ",[220,3503,353],{"class":260},[220,3505,3506],{"class":264}," (",[220,3508,3509],{"class":260},"await",[220,3511,3512],{"class":226}," getWebGPUSupport",[220,3514,3515],{"class":264},"()).supported\n",[220,3517,3518],{"class":222,"line":2664},[220,3519,1792],{"class":264},[220,3521,3523,3525,3527],{"class":222,"line":3522},16,[220,3524,402],{"class":264},[220,3526,2590],{"class":346},[220,3528,359],{"class":264},[212,3530,3532],{"className":409,"code":3531,"language":411,"meta":178,"style":178},"import { useState, useEffect } from 'react'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Freact'\n\nfunction App() {\n const [supported, setSupported] = useState(false)\n useEffect(() => {\n getWebGPUSupport().then(({ supported }) => setSupported(supported))\n }, [])\n\n return supported\n ? \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n : \u003Cdiv className=\"fallback\" \u002F>\n}\n",[99,3533,3534,3545,3555,3559,3567,3593,3605,3633,3638,3642,3649,3677,3694],{"__ignoreMap":178},[220,3535,3536,3538,3541,3543],{"class":222,"line":223},[220,3537,261],{"class":260},[220,3539,3540],{"class":264}," { useState, useEffect } ",[220,3542,268],{"class":260},[220,3544,2687],{"class":230},[220,3546,3547,3549,3551,3553],{"class":222,"line":179},[220,3548,261],{"class":260},[220,3550,3454],{"class":264},[220,3552,268],{"class":260},[220,3554,287],{"class":230},[220,3556,3557],{"class":222,"line":389},[220,3558,647],{"emptyLinePlaceholder":194},[220,3560,3561,3563,3565],{"class":222,"line":399},[220,3562,2641],{"class":260},[220,3564,2698],{"class":226},[220,3566,2647],{"class":264},[220,3568,3569,3571,3573,3576,3578,3581,3583,3585,3587,3589,3591],{"class":222,"line":644},[220,3570,2705],{"class":260},[220,3572,2708],{"class":264},[220,3574,3575],{"class":420},"supported",[220,3577,1895],{"class":264},[220,3579,3580],{"class":420},"setSupported",[220,3582,2719],{"class":264},[220,3584,353],{"class":260},[220,3586,2724],{"class":226},[220,3588,2626],{"class":264},[220,3590,2629],{"class":420},[220,3592,2632],{"class":264},[220,3594,3595,3598,3601,3603],{"class":222,"line":650},[220,3596,3597],{"class":226}," useEffect",[220,3599,3600],{"class":264},"(() ",[220,3602,2762],{"class":260},[220,3604,3241],{"class":264},[220,3606,3607,3610,3613,3616,3619,3622,3625,3627,3630],{"class":222,"line":656},[220,3608,3609],{"class":226}," getWebGPUSupport",[220,3611,3612],{"class":264},"().",[220,3614,3615],{"class":226},"then",[220,3617,3618],{"class":264},"(({ ",[220,3620,3575],{"class":3621},"s9osk",[220,3623,3624],{"class":264}," }) ",[220,3626,2762],{"class":260},[220,3628,3629],{"class":226}," setSupported",[220,3631,3632],{"class":264},"(supported))\n",[220,3634,3635],{"class":222,"line":673},[220,3636,3637],{"class":264}," }, [])\n",[220,3639,3640],{"class":222,"line":682},[220,3641,647],{"emptyLinePlaceholder":194},[220,3643,3644,3646],{"class":222,"line":691},[220,3645,2739],{"class":260},[220,3647,3648],{"class":264}," supported\n",[220,3650,3651,3654,3657,3659,3662,3664,3666,3668,3670,3673,3675],{"class":222,"line":696},[220,3652,3653],{"class":260}," ?",[220,3655,3656],{"class":264}," \u003C",[220,3658,347],{"class":420},[220,3660,3661],{"class":264},">\u003C",[220,3663,2553],{"class":420},[220,3665,1588],{"class":226},[220,3667,353],{"class":260},[220,3669,2560],{"class":230},[220,3671,3672],{"class":264}," \u002F>\u003C\u002F",[220,3674,347],{"class":420},[220,3676,359],{"class":264},[220,3678,3679,3682,3684,3686,3688,3690,3692],{"class":222,"line":702},[220,3680,3681],{"class":260}," :",[220,3683,3656],{"class":264},[220,3685,3398],{"class":346},[220,3687,423],{"class":226},[220,3689,353],{"class":260},[220,3691,3408],{"class":230},[220,3693,386],{"class":264},[220,3695,3696],{"class":222,"line":718},[220,3697,749],{"class":264},[212,3699,3701],{"className":468,"code":3700,"language":469,"meta":178,"style":178},"\u003Cscript>\n import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n\n let supported = $state(false)\n getWebGPUSupport().then((info) => { supported = info.supported })\n\u003C\u002Fscript>\n\n{#if supported}\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n{:else}\n \u003Cdiv class=\"fallback\">\u003C\u002Fdiv>\n{\u002Fif}\n",[99,3702,3703,3711,3716,3720,3725,3735,3743,3747,3758,3780,3790,3809],{"__ignoreMap":178},[220,3704,3705,3707,3709],{"class":222,"line":223},[220,3706,343],{"class":264},[220,3708,2590],{"class":346},[220,3710,359],{"class":264},[220,3712,3713],{"class":222,"line":179},[220,3714,3715],{"class":264}," import { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsvelte'\n",[220,3717,3718],{"class":222,"line":389},[220,3719,647],{"emptyLinePlaceholder":194},[220,3721,3722],{"class":222,"line":399},[220,3723,3724],{"class":264}," let supported = $state(false)\n",[220,3726,3727,3730,3732],{"class":222,"line":644},[220,3728,3729],{"class":264}," getWebGPUSupport().then((info) => { supported ",[220,3731,353],{"class":260},[220,3733,3734],{"class":264}," info.supported })\n",[220,3736,3737,3739,3741],{"class":222,"line":650},[220,3738,402],{"class":264},[220,3740,2590],{"class":346},[220,3742,359],{"class":264},[220,3744,3745],{"class":222,"line":656},[220,3746,647],{"emptyLinePlaceholder":194},[220,3748,3749,3752,3755],{"class":222,"line":673},[220,3750,3751],{"class":264},"{#",[220,3753,3754],{"class":260},"if",[220,3756,3757],{"class":264}," supported}\n",[220,3759,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":222,"line":682},[220,3761,364],{"class":264},[220,3763,347],{"class":420},[220,3765,3661],{"class":264},[220,3767,2553],{"class":420},[220,3769,1588],{"class":226},[220,3771,353],{"class":260},[220,3773,2560],{"class":230},[220,3775,3672],{"class":264},[220,3777,347],{"class":420},[220,3779,359],{"class":264},[220,3781,3782,3785,3788],{"class":222,"line":691},[220,3783,3784],{"class":264},"{:",[220,3786,3787],{"class":260},"else",[220,3789,749],{"class":264},[220,3791,3792,3794,3796,3798,3800,3802,3805,3807],{"class":222,"line":696},[220,3793,364],{"class":264},[220,3795,3398],{"class":346},[220,3797,350],{"class":226},[220,3799,353],{"class":260},[220,3801,3408],{"class":230},[220,3803,3804],{"class":264},">\u003C\u002F",[220,3806,3398],{"class":346},[220,3808,359],{"class":264},[220,3810,3811,3813,3816],{"class":222,"line":702},[220,3812,743],{"class":264},[220,3814,3815],{"class":260},"\u002Fif",[220,3817,749],{"class":264},[212,3819,3821],{"className":409,"code":3820,"language":411,"meta":178,"style":178},"import { createSignal, onMount, Show } from 'solid-js'\nimport { Shader, Circle, getWebGPUSupport } from 'shaders\u002Fsolid'\n\nfunction App() {\n const [supported, setSupported] = createSignal(false)\n onMount(async () => setSupported((await getWebGPUSupport()).supported))\n\n return (\n \u003CShow when={supported()} fallback={\u003Cdiv class=\"fallback\" \u002F>}>\n \u003CShader>\u003CCircle color=\"#ff0088\" \u002F>\u003C\u002FShader>\n \u003C\u002FShow>\n )\n}\n",[99,3822,3823,3834,3844,3848,3856,3880,3905,3909,3915,3953,3975,3983,3987],{"__ignoreMap":178},[220,3824,3825,3827,3830,3832],{"class":222,"line":223},[220,3826,261],{"class":260},[220,3828,3829],{"class":264}," { createSignal, onMount, Show } ",[220,3831,268],{"class":260},[220,3833,2987],{"class":230},[220,3835,3836,3838,3840,3842],{"class":222,"line":179},[220,3837,261],{"class":260},[220,3839,3454],{"class":264},[220,3841,268],{"class":260},[220,3843,319],{"class":230},[220,3845,3846],{"class":222,"line":389},[220,3847,647],{"emptyLinePlaceholder":194},[220,3849,3850,3852,3854],{"class":222,"line":399},[220,3851,2641],{"class":260},[220,3853,2698],{"class":226},[220,3855,2647],{"class":264},[220,3857,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":222,"line":644},[220,3859,2705],{"class":260},[220,3861,2708],{"class":264},[220,3863,3575],{"class":420},[220,3865,1895],{"class":264},[220,3867,3580],{"class":420},[220,3869,2719],{"class":264},[220,3871,353],{"class":260},[220,3873,3018],{"class":226},[220,3875,2626],{"class":264},[220,3877,2629],{"class":420},[220,3879,2632],{"class":264},[220,3881,3882,3885,3887,3889,3891,3893,3895,3898,3900,3902],{"class":222,"line":650},[220,3883,3884],{"class":226}," onMount",[220,3886,2626],{"class":264},[220,3888,3489],{"class":260},[220,3890,3492],{"class":264},[220,3892,2762],{"class":260},[220,3894,3629],{"class":226},[220,3896,3897],{"class":264},"((",[220,3899,3509],{"class":260},[220,3901,3512],{"class":226},[220,3903,3904],{"class":264},"()).supported))\n",[220,3906,3907],{"class":222,"line":656},[220,3908,647],{"emptyLinePlaceholder":194},[220,3910,3911,3913],{"class":222,"line":673},[220,3912,2739],{"class":260},[220,3914,2742],{"class":264},[220,3916,3917,3919,3922,3925,3927,3929,3931,3934,3937,3939,3942,3944,3946,3948,3950],{"class":222,"line":682},[220,3918,2550],{"class":264},[220,3920,3921],{"class":420},"Show",[220,3923,3924],{"class":226}," when",[220,3926,353],{"class":260},[220,3928,743],{"class":264},[220,3930,3575],{"class":226},[220,3932,3933],{"class":264},"()} ",[220,3935,3936],{"class":226},"fallback",[220,3938,353],{"class":260},[220,3940,3941],{"class":264},"{\u003C",[220,3943,3398],{"class":346},[220,3945,350],{"class":226},[220,3947,353],{"class":260},[220,3949,3408],{"class":230},[220,3951,3952],{"class":264}," \u002F>}>\n",[220,3954,3955,3957,3959,3961,3963,3965,3967,3969,3971,3973],{"class":222,"line":691},[220,3956,2813],{"class":264},[220,3958,347],{"class":420},[220,3960,3661],{"class":264},[220,3962,2553],{"class":420},[220,3964,1588],{"class":226},[220,3966,353],{"class":260},[220,3968,2560],{"class":230},[220,3970,3672],{"class":264},[220,3972,347],{"class":420},[220,3974,359],{"class":264},[220,3976,3977,3979,3981],{"class":222,"line":696},[220,3978,2828],{"class":264},[220,3980,3921],{"class":420},[220,3982,359],{"class":264},[220,3984,3985],{"class":222,"line":702},[220,3986,2837],{"class":264},[220,3988,3989],{"class":222,"line":718},[220,3990,749],{"class":264},[212,3992,3994],{"className":3123,"code":3993,"language":1518,"meta":178,"style":178},"import { createShader, getWebGPUSupport } from 'shaders\u002Fjs'\n\nconst { supported } = await getWebGPUSupport()\nif (supported) {\n await createShader(canvas, preset)\n} else {\n canvas.replaceWith(fallbackElement)\n}\n",[99,3995,3996,4008,4012,4033,4040,4050,4058,4069],{"__ignoreMap":178},[220,3997,3998,4000,4003,4005],{"class":222,"line":223},[220,3999,261],{"class":260},[220,4001,4002],{"class":264}," { createShader, getWebGPUSupport } ",[220,4004,268],{"class":260},[220,4006,4007],{"class":230}," 'shaders\u002Fjs'\n",[220,4009,4010],{"class":222,"line":179},[220,4011,647],{"emptyLinePlaceholder":194},[220,4013,4014,4016,4019,4021,4024,4026,4028,4030],{"class":222,"line":389},[220,4015,1735],{"class":260},[220,4017,4018],{"class":264}," { ",[220,4020,3575],{"class":420},[220,4022,4023],{"class":264}," } ",[220,4025,353],{"class":260},[220,4027,1744],{"class":260},[220,4029,3512],{"class":226},[220,4031,4032],{"class":264},"()\n",[220,4034,4035,4037],{"class":222,"line":399},[220,4036,3754],{"class":260},[220,4038,4039],{"class":264}," (supported) {\n",[220,4041,4042,4045,4047],{"class":222,"line":644},[220,4043,4044],{"class":260}," await",[220,4046,1747],{"class":226},[220,4048,4049],{"class":264},"(canvas, preset)\n",[220,4051,4052,4054,4056],{"class":222,"line":650},[220,4053,2914],{"class":264},[220,4055,3787],{"class":260},[220,4057,3241],{"class":264},[220,4059,4060,4063,4066],{"class":222,"line":656},[220,4061,4062],{"class":264}," canvas.",[220,4064,4065],{"class":226},"replaceWith",[220,4067,4068],{"class":264},"(fallbackElement)\n",[220,4070,4071],{"class":222,"line":673},[220,4072,749],{"class":264},[3262,4074,4076],{"id":4075},"react-to-it-after-the-fact","React to it after the fact",[15,4078,1839,4079,4082],{},[99,4080,4081],{},"unavailable"," event fires at most once if the GPU can't be used — either because it was\nnever available, or because it became unusable later (device loss with no recovery, an\nout-of-memory refusal, a driver that can't run the compiled pipeline). By the time it fires the\ncanvas has already been cleared and every GPU resource released.",[246,4084,4085,4144,4203,4254,4303],{":tabs":1557},[212,4086,4088],{"className":334,"code":4087,"language":336,"meta":178,"style":178},"\u003Ctemplate>\n \u003CShader @unavailable=\"showFallback = true\">\n \u003CCircle color=\"#ff0088\" \u002F>\n \u003C\u002FShader>\n\u003C\u002Ftemplate>\n",[99,4089,4090,4098,4114,4128,4136],{"__ignoreMap":178},[220,4091,4092,4094,4096],{"class":222,"line":223},[220,4093,343],{"class":264},[220,4095,2519],{"class":346},[220,4097,359],{"class":264},[220,4099,4100,4102,4104,4107,4109,4112],{"class":222,"line":179},[220,4101,364],{"class":264},[220,4103,347],{"class":346},[220,4105,4106],{"class":226}," @unavailable",[220,4108,353],{"class":264},[220,4110,4111],{"class":230},"\"showFallback = true\"",[220,4113,359],{"class":264},[220,4115,4116,4118,4120,4122,4124,4126],{"class":222,"line":389},[220,4117,2550],{"class":264},[220,4119,2553],{"class":346},[220,4121,1588],{"class":226},[220,4123,353],{"class":264},[220,4125,2560],{"class":230},[220,4127,386],{"class":264},[220,4129,4130,4132,4134],{"class":222,"line":399},[220,4131,2567],{"class":264},[220,4133,347],{"class":346},[220,4135,359],{"class":264},[220,4137,4138,4140,4142],{"class":222,"line":644},[220,4139,402],{"class":264},[220,4141,2519],{"class":346},[220,4143,359],{"class":264},[212,4145,4147],{"className":409,"code":4146,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={(reason) => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4148,4149,4181,4195],{"__ignoreMap":178},[220,4150,4151,4153,4155,4158,4160,4163,4166,4169,4171,4174,4176,4178],{"class":222,"line":223},[220,4152,343],{"class":264},[220,4154,347],{"class":420},[220,4156,4157],{"class":226}," onUnavailable",[220,4159,353],{"class":260},[220,4161,4162],{"class":264},"{(",[220,4164,4165],{"class":3621},"reason",[220,4167,4168],{"class":264},") ",[220,4170,2762],{"class":260},[220,4172,4173],{"class":226}," setShowFallback",[220,4175,2626],{"class":264},[220,4177,2332],{"class":420},[220,4179,4180],{"class":264},")}>\n",[220,4182,4183,4185,4187,4189,4191,4193],{"class":222,"line":179},[220,4184,364],{"class":264},[220,4186,2553],{"class":420},[220,4188,1588],{"class":226},[220,4190,353],{"class":260},[220,4192,2560],{"class":230},[220,4194,386],{"class":264},[220,4196,4197,4199,4201],{"class":222,"line":389},[220,4198,402],{"class":264},[220,4200,347],{"class":420},[220,4202,359],{"class":264},[212,4204,4206],{"className":468,"code":4205,"language":469,"meta":178,"style":178},"\u003CShader onunavailable={() => (showFallback = true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4207,4208,4232,4246],{"__ignoreMap":178},[220,4209,4210,4212,4214,4217,4219,4221,4223,4226,4228,4230],{"class":222,"line":223},[220,4211,343],{"class":264},[220,4213,347],{"class":420},[220,4215,4216],{"class":226}," onunavailable",[220,4218,353],{"class":260},[220,4220,2759],{"class":264},[220,4222,2762],{"class":260},[220,4224,4225],{"class":264}," (showFallback ",[220,4227,353],{"class":260},[220,4229,2911],{"class":420},[220,4231,4180],{"class":264},[220,4233,4234,4236,4238,4240,4242,4244],{"class":222,"line":179},[220,4235,364],{"class":264},[220,4237,2553],{"class":420},[220,4239,1588],{"class":226},[220,4241,353],{"class":260},[220,4243,2560],{"class":230},[220,4245,386],{"class":264},[220,4247,4248,4250,4252],{"class":222,"line":389},[220,4249,402],{"class":264},[220,4251,347],{"class":420},[220,4253,359],{"class":264},[212,4255,4257],{"className":409,"code":4256,"language":411,"meta":178,"style":178},"\u003CShader onUnavailable={() => setShowFallback(true)}>\n \u003CCircle color=\"#ff0088\" \u002F>\n\u003C\u002FShader>\n",[99,4258,4259,4281,4295],{"__ignoreMap":178},[220,4260,4261,4263,4265,4267,4269,4271,4273,4275,4277,4279],{"class":222,"line":223},[220,4262,343],{"class":264},[220,4264,347],{"class":420},[220,4266,4157],{"class":226},[220,4268,353],{"class":260},[220,4270,2759],{"class":264},[220,4272,2762],{"class":260},[220,4274,4173],{"class":226},[220,4276,2626],{"class":264},[220,4278,2332],{"class":420},[220,4280,4180],{"class":264},[220,4282,4283,4285,4287,4289,4291,4293],{"class":222,"line":179},[220,4284,364],{"class":264},[220,4286,2553],{"class":420},[220,4288,1588],{"class":226},[220,4290,353],{"class":260},[220,4292,2560],{"class":230},[220,4294,386],{"class":264},[220,4296,4297,4299,4301],{"class":222,"line":389},[220,4298,402],{"class":264},[220,4300,347],{"class":420},[220,4302,359],{"class":264},[212,4304,4306],{"className":3123,"code":4305,"language":1518,"meta":178,"style":178},"await createShader(canvas, preset, {\n onError: (reason) => {\n \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n showFallback(reason)\n }\n})\n",[99,4307,4308,4317,4333,4338,4343,4348,4356,4360],{"__ignoreMap":178},[220,4309,4310,4312,4314],{"class":222,"line":223},[220,4311,3509],{"class":260},[220,4313,1747],{"class":226},[220,4315,4316],{"class":264},"(canvas, preset, {\n",[220,4318,4319,4322,4325,4327,4329,4331],{"class":222,"line":179},[220,4320,4321],{"class":226}," onError",[220,4323,4324],{"class":264},": (",[220,4326,4165],{"class":3621},[220,4328,4168],{"class":264},[220,4330,2762],{"class":260},[220,4332,3241],{"class":264},[220,4334,4335],{"class":222,"line":389},[220,4336,4337],{"class":609}," \u002F\u002F 'unsupported' | 'no-adapter' | 'no-device' | 'init-failed'\n",[220,4339,4340],{"class":222,"line":399},[220,4341,4342],{"class":609}," \u002F\u002F | 'device-lost' | 'out-of-memory' | 'gpu-error' | 'render-failed'\n",[220,4344,4345],{"class":222,"line":644},[220,4346,4347],{"class":609}," \u002F\u002F | 'limit-exceeded' | 'unrecoverable'\n",[220,4349,4350,4353],{"class":222,"line":650},[220,4351,4352],{"class":226}," showFallback",[220,4354,4355],{"class":264},"(reason)\n",[220,4357,4358],{"class":222,"line":656},[220,4359,3256],{"class":264},[220,4361,4362],{"class":222,"line":673},[220,4363,1792],{"class":264},[3262,4365,4367],{"id":4366},"debugging","Debugging",[15,4369,4370],{},"Shaders keeps quiet in production on purpose — an embedded background effect must never fill\na host page's console with errors the visitor can do nothing about. When you need to see what\nthe renderer is actually doing, switch diagnostics on:",[212,4372,4374],{"className":3123,"code":4373,"language":1518,"meta":178,"style":178},"localStorage.setItem('shaders:debug', '1') \u002F\u002F persists for the origin\n\u002F\u002F or, in code:\nimport { setShadersDebug } from 'shaders\u002Fvue'\nsetShadersDebug(true)\n",[99,4375,4376,4400,4405,4416],{"__ignoreMap":178},[220,4377,4378,4381,4384,4386,4389,4391,4394,4397],{"class":222,"line":223},[220,4379,4380],{"class":264},"localStorage.",[220,4382,4383],{"class":226},"setItem",[220,4385,2626],{"class":264},[220,4387,4388],{"class":230},"'shaders:debug'",[220,4390,1895],{"class":264},[220,4392,4393],{"class":230},"'1'",[220,4395,4396],{"class":264},") ",[220,4398,4399],{"class":609},"\u002F\u002F persists for the origin\n",[220,4401,4402],{"class":222,"line":179},[220,4403,4404],{"class":609},"\u002F\u002F or, in code:\n",[220,4406,4407,4409,4412,4414],{"class":222,"line":389},[220,4408,261],{"class":260},[220,4410,4411],{"class":264}," { setShadersDebug } ",[220,4413,268],{"class":260},[220,4415,271],{"class":230},[220,4417,4418,4421,4423,4425],{"class":222,"line":399},[220,4419,4420],{"class":226},"setShadersDebug",[220,4422,2626],{"class":264},[220,4424,2332],{"class":420},[220,4426,2632],{"class":264},[1504,4428,4429],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":178,"searchDepth":179,"depth":179,"links":4431},[4432,4436],{"id":2499,"depth":179,"text":2500,"children":4433},[4434,4435],{"id":3264,"depth":389,"text":3265},{"id":3294,"depth":389,"text":3295},{"id":3314,"depth":179,"text":3315,"children":4437},[4438,4439,4440],{"id":3327,"depth":389,"text":3328},{"id":4075,"depth":389,"text":4076},{"id":4366,"depth":389,"text":4367},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"\u002Fdocs\u002Fguide\u002Fhooks-events",{"title":2488,"description":4441},"docs\u002Fguide\u002F12.hooks-events","5swX9Xt3mdKh2Ke08B_93ih7fjlcaeZgbTwEfxtu2To",{"id":4449,"title":4450,"body":4451,"category":2240,"description":5499,"exclude":190,"extension":191,"forceFramework":190,"icon":5500,"meta":5501,"navigation":194,"path":58,"seo":5502,"stem":5503,"__hash__":5504},"guide\u002Fdocs\u002Fguide\u002F13.mcp.md","Shaders MCP (Pro)",{"type":8,"value":4452,"toc":5489},[4453,4456,4459,4463,4466,4470,4473,4477,4480,4496,4503,4506,4510,4513,4518,4521,4526,4789,4791,4795,4802,4811,4813,4817,4820,4832,4835,5240,5244,5247,5253,5259,5265,5271,5274,5313,5364,5407,5447,5451,5454,5457,5460,5463,5465,5469,5475,5478,5486],[11,4454,4450],{"id":4455},"shaders-mcp-pro",[19,4457],{":preset":4458},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https:\u002F\u002Fdata.shaders.com\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fuser-uploaded-images\u002Fuser_33nh0FG48zZa0rIUZuK7vgwPfZe\u002F0oExGojy9aDN.png\"}},{\"type\":\"Glass\",\"props\":{\"aberration\":0.63,\"center\":{\"type\":\"mouse-position\",\"originX\":0.5,\"originY\":0.5,\"reach\":0.6,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":1.5,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.5},\"thickness\":1}},{\"type\":\"Sharpness\",\"props\":{\"sharpness\":0.5}}]}",[4460,4461],"pro-callout",{"message":4462},"Shaders MCP requires an active Pro account before you can connect.",[15,4464,4465],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. It can browse your saved shaders, search across the full library of Pro presets, install and modify\u002Fhook up props, all without switching context.",[23,4467,4469],{"id":4468},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,4471,4472],{},"Most MCP clients support OAuth — just add the server URL, and you'll be redirected to sign in with your Shaders account. No API key needed.",[3262,4474,4476],{"id":4475},"quick-install-via-cli-recommended","Quick install via CLI (recommended)",[15,4478,4479],{},"One command detects the coding agents on your machine — Cursor, Claude Code, Codex, VS Code, Windsurf, Antigravity, and more — and writes the right MCP config for each:",[212,4481,4483],{"className":214,"code":4482,"language":216,"meta":178,"style":178},"npx shaders@latest install-mcp\n",[99,4484,4485],{"__ignoreMap":178},[220,4486,4487,4490,4493],{"class":222,"line":223},[220,4488,4489],{"class":226},"npx",[220,4491,4492],{"class":230}," shaders@latest",[220,4494,4495],{"class":230}," install-mcp\n",[15,4497,4498,4499,4502],{},"Then open your agent and connect — you'll be prompted to sign in to your Shaders account the first time it connects. Run ",[99,4500,4501],{},"npx shaders@latest install-mcp --help"," for options (specific agents, global vs. project config).",[4504,4505],"hr",{},[3262,4507,4509],{"id":4508},"manual-configuration","Manual configuration",[15,4511,4512],{},"If you'd rather set things up yourself, add the server to your tool directly:",[15,4514,4515],{},[159,4516,4517],{},"Cursor",[4519,4520],"cursor-install-button",{},[15,4522,4523],{},[159,4524,4525],{},"Other tools",[246,4527,4529,4557,4613,4652,4679,4738],{":tabs":4528},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4530,4532],{"className":214,"code":4531,"language":216,"meta":178,"style":178},"claude mcp add --transport http shaders https:\u002F\u002Fshaders.com\u002Fmcp\n",[99,4533,4534],{"__ignoreMap":178},[220,4535,4536,4539,4542,4545,4548,4551,4554],{"class":222,"line":223},[220,4537,4538],{"class":226},"claude",[220,4540,4541],{"class":230}," mcp",[220,4543,4544],{"class":230}," add",[220,4546,4547],{"class":420}," --transport",[220,4549,4550],{"class":230}," http",[220,4552,4553],{"class":230}," shaders",[220,4555,4556],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp\n",[212,4558,4562],{"className":4559,"code":4560,"language":4561,"meta":178,"style":178},"language-json shiki shiki-themes github-dark","\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n","json",[99,4563,4564,4569,4574,4582,4589,4600,4605,4609],{"__ignoreMap":178},[220,4565,4566],{"class":222,"line":223},[220,4567,4568],{"class":609},"\u002F\u002F .windsurf\u002Fmcp_config.json\n",[220,4570,4571],{"class":222,"line":179},[220,4572,4573],{"class":264},"{\n",[220,4575,4576,4579],{"class":222,"line":389},[220,4577,4578],{"class":420}," \"mcpServers\"",[220,4580,4581],{"class":264},": {\n",[220,4583,4584,4587],{"class":222,"line":399},[220,4585,4586],{"class":420}," \"shaders\"",[220,4588,4581],{"class":264},[220,4590,4591,4594,4597],{"class":222,"line":644},[220,4592,4593],{"class":420}," \"serverUrl\"",[220,4595,4596],{"class":264},": ",[220,4598,4599],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[220,4601,4602],{"class":222,"line":650},[220,4603,4604],{"class":264}," }\n",[220,4606,4607],{"class":222,"line":656},[220,4608,3256],{"class":264},[220,4610,4611],{"class":222,"line":673},[220,4612,749],{"class":264},[212,4614,4616],{"className":4559,"code":4615,"language":4561,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n}\n",[99,4617,4618,4623,4627,4639,4648],{"__ignoreMap":178},[220,4619,4620],{"class":222,"line":223},[220,4621,4622],{"class":609},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n",[220,4624,4625],{"class":222,"line":179},[220,4626,4573],{"class":264},[220,4628,4629,4632,4634,4637],{"class":222,"line":389},[220,4630,4631],{"class":420}," \"name\"",[220,4633,4596],{"class":264},[220,4635,4636],{"class":230},"\"shaders\"",[220,4638,1760],{"class":264},[220,4640,4641,4644,4646],{"class":222,"line":399},[220,4642,4643],{"class":420}," \"url\"",[220,4645,4596],{"class":264},[220,4647,4599],{"class":230},[220,4649,4650],{"class":222,"line":644},[220,4651,749],{"class":264},[212,4653,4657],{"className":4654,"code":4655,"language":4656,"meta":178,"style":178},"language-toml shiki shiki-themes github-dark","# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n","toml",[99,4658,4659,4664,4669,4674],{"__ignoreMap":178},[220,4660,4661],{"class":222,"line":223},[220,4662,4663],{},"# ~\u002F.codex\u002Fconfig.toml\n",[220,4665,4666],{"class":222,"line":179},[220,4667,4668],{},"[mcp_servers.shaders]\n",[220,4670,4671],{"class":222,"line":389},[220,4672,4673],{},"enabled = true\n",[220,4675,4676],{"class":222,"line":399},[220,4677,4678],{},"url = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n",[212,4680,4682],{"className":4559,"code":4681,"language":4561,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4683,4684,4689,4693,4699,4705,4717,4726,4730,4734],{"__ignoreMap":178},[220,4685,4686],{"class":222,"line":223},[220,4687,4688],{"class":609},"\u002F\u002F Antigravity MCP settings\n",[220,4690,4691],{"class":222,"line":179},[220,4692,4573],{"class":264},[220,4694,4695,4697],{"class":222,"line":389},[220,4696,4578],{"class":420},[220,4698,4581],{"class":264},[220,4700,4701,4703],{"class":222,"line":399},[220,4702,4586],{"class":420},[220,4704,4581],{"class":264},[220,4706,4707,4710,4712,4715],{"class":222,"line":644},[220,4708,4709],{"class":420}," \"type\"",[220,4711,4596],{"class":264},[220,4713,4714],{"class":230},"\"http\"",[220,4716,1760],{"class":264},[220,4718,4719,4722,4724],{"class":222,"line":650},[220,4720,4721],{"class":420}," \"url\"",[220,4723,4596],{"class":264},[220,4725,4599],{"class":230},[220,4727,4728],{"class":222,"line":656},[220,4729,4604],{"class":264},[220,4731,4732],{"class":222,"line":673},[220,4733,3256],{"class":264},[220,4735,4736],{"class":222,"line":682},[220,4737,749],{"class":264},[212,4739,4741],{"className":4559,"code":4740,"language":4561,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n }\n }\n}\n",[99,4742,4743,4747,4753,4759,4769,4777,4781,4785],{"__ignoreMap":178},[220,4744,4745],{"class":222,"line":223},[220,4746,4573],{"class":264},[220,4748,4749,4751],{"class":222,"line":179},[220,4750,4578],{"class":420},[220,4752,4581],{"class":264},[220,4754,4755,4757],{"class":222,"line":389},[220,4756,4586],{"class":420},[220,4758,4581],{"class":264},[220,4760,4761,4763,4765,4767],{"class":222,"line":399},[220,4762,4709],{"class":420},[220,4764,4596],{"class":264},[220,4766,4714],{"class":230},[220,4768,1760],{"class":264},[220,4770,4771,4773,4775],{"class":222,"line":644},[220,4772,4721],{"class":420},[220,4774,4596],{"class":264},[220,4776,4599],{"class":230},[220,4778,4779],{"class":222,"line":650},[220,4780,4604],{"class":264},[220,4782,4783],{"class":222,"line":656},[220,4784,3256],{"class":264},[220,4786,4787],{"class":222,"line":673},[220,4788,749],{"class":264},[4504,4790],{},[23,4792,4794],{"id":4793},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,4796,4797],{},[4798,4799],"img",{"alt":4800,"src":4801},"Bolt connector","\u002Fimages\u002Fdocs\u002Fbolt-connector-active.png",[15,4803,4804,4805,4810],{},"Shaders has an official connector on ",[56,4806,4809],{"href":4807,"rel":4808},"https:\u002F\u002Fbolt.new",[167],"bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Pro account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[4504,4812],{},[23,4814,4816],{"id":4815},"using-an-api-key-instead","Using an API key instead",[15,4818,4819],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[15,4821,4822,4823,4827,4828,4831],{},"The same key works for the ",[56,4824,4826],{"href":4825},"\u002Fdocs\u002Fguide\u002Fregistry","shadcn registry",", which lets you install any preset or section from the command line with ",[99,4829,4830],{},"npx shadcn add",".",[4833,4834],"api-keys",{},[246,4836,4838,4866,4937,5002,5059,5094,5169],{":tabs":4837},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Antigravity\", \"Other\"]",[212,4839,4841],{"className":214,"code":4840,"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,4842,4843],{"__ignoreMap":178},[220,4844,4845,4847,4849,4851,4853,4855,4857,4860,4863],{"class":222,"line":223},[220,4846,4538],{"class":226},[220,4848,4541],{"class":230},[220,4850,4544],{"class":230},[220,4852,4547],{"class":420},[220,4854,4550],{"class":230},[220,4856,4553],{"class":230},[220,4858,4859],{"class":230}," https:\u002F\u002Fshaders.com\u002Fmcp",[220,4861,4862],{"class":420}," --header",[220,4864,4865],{"class":230}," \"Authorization: Bearer YOUR_API_KEY\"\n",[212,4867,4869],{"className":4559,"code":4868,"language":4561,"meta":178,"style":178},"\u002F\u002F .cursor\u002Fmcp.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4870,4871,4876,4880,4886,4892,4903,4910,4920,4925,4929,4933],{"__ignoreMap":178},[220,4872,4873],{"class":222,"line":223},[220,4874,4875],{"class":609},"\u002F\u002F .cursor\u002Fmcp.json\n",[220,4877,4878],{"class":222,"line":179},[220,4879,4573],{"class":264},[220,4881,4882,4884],{"class":222,"line":389},[220,4883,4578],{"class":420},[220,4885,4581],{"class":264},[220,4887,4888,4890],{"class":222,"line":399},[220,4889,4586],{"class":420},[220,4891,4581],{"class":264},[220,4893,4894,4896,4898,4901],{"class":222,"line":644},[220,4895,4721],{"class":420},[220,4897,4596],{"class":264},[220,4899,4900],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fmcp\"",[220,4902,1760],{"class":264},[220,4904,4905,4908],{"class":222,"line":650},[220,4906,4907],{"class":420}," \"headers\"",[220,4909,4581],{"class":264},[220,4911,4912,4915,4917],{"class":222,"line":656},[220,4913,4914],{"class":420}," \"Authorization\"",[220,4916,4596],{"class":264},[220,4918,4919],{"class":230},"\"Bearer YOUR_API_KEY\"\n",[220,4921,4922],{"class":222,"line":673},[220,4923,4924],{"class":264}," }\n",[220,4926,4927],{"class":222,"line":682},[220,4928,4604],{"class":264},[220,4930,4931],{"class":222,"line":691},[220,4932,3256],{"class":264},[220,4934,4935],{"class":222,"line":696},[220,4936,749],{"class":264},[212,4938,4940],{"className":4559,"code":4939,"language":4561,"meta":178,"style":178},"\u002F\u002F .windsurf\u002Fmcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,4941,4942,4946,4950,4956,4962,4972,4978,4986,4990,4994,4998],{"__ignoreMap":178},[220,4943,4944],{"class":222,"line":223},[220,4945,4568],{"class":609},[220,4947,4948],{"class":222,"line":179},[220,4949,4573],{"class":264},[220,4951,4952,4954],{"class":222,"line":389},[220,4953,4578],{"class":420},[220,4955,4581],{"class":264},[220,4957,4958,4960],{"class":222,"line":399},[220,4959,4586],{"class":420},[220,4961,4581],{"class":264},[220,4963,4964,4966,4968,4970],{"class":222,"line":644},[220,4965,4593],{"class":420},[220,4967,4596],{"class":264},[220,4969,4900],{"class":230},[220,4971,1760],{"class":264},[220,4973,4974,4976],{"class":222,"line":650},[220,4975,4907],{"class":420},[220,4977,4581],{"class":264},[220,4979,4980,4982,4984],{"class":222,"line":656},[220,4981,4914],{"class":420},[220,4983,4596],{"class":264},[220,4985,4919],{"class":230},[220,4987,4988],{"class":222,"line":673},[220,4989,4924],{"class":264},[220,4991,4992],{"class":222,"line":682},[220,4993,4604],{"class":264},[220,4995,4996],{"class":222,"line":691},[220,4997,3256],{"class":264},[220,4999,5000],{"class":222,"line":696},[220,5001,749],{"class":264},[212,5003,5005],{"className":4559,"code":5004,"language":4561,"meta":178,"style":178},"\u002F\u002F Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n}\n",[99,5006,5007,5011,5015,5025,5035,5042,5051,5055],{"__ignoreMap":178},[220,5008,5009],{"class":222,"line":223},[220,5010,4622],{"class":609},[220,5012,5013],{"class":222,"line":179},[220,5014,4573],{"class":264},[220,5016,5017,5019,5021,5023],{"class":222,"line":389},[220,5018,4631],{"class":420},[220,5020,4596],{"class":264},[220,5022,4636],{"class":230},[220,5024,1760],{"class":264},[220,5026,5027,5029,5031,5033],{"class":222,"line":399},[220,5028,4643],{"class":420},[220,5030,4596],{"class":264},[220,5032,4900],{"class":230},[220,5034,1760],{"class":264},[220,5036,5037,5040],{"class":222,"line":644},[220,5038,5039],{"class":420}," \"headers\"",[220,5041,4581],{"class":264},[220,5043,5044,5047,5049],{"class":222,"line":650},[220,5045,5046],{"class":420}," \"Authorization\"",[220,5048,4596],{"class":264},[220,5050,4919],{"class":230},[220,5052,5053],{"class":222,"line":656},[220,5054,3256],{"class":264},[220,5056,5057],{"class":222,"line":673},[220,5058,749],{"class":264},[212,5060,5062],{"className":4654,"code":5061,"language":4656,"meta":178,"style":178},"# ~\u002F.codex\u002Fconfig.toml\n[mcp_servers.shaders]\nenabled = true\nurl = \"https:\u002F\u002Fshaders.com\u002Fmcp\"\n\n[mcp_servers.shaders.http_headers]\nAuthorization = \"Bearer YOUR_API_KEY\"\n",[99,5063,5064,5068,5072,5076,5080,5084,5089],{"__ignoreMap":178},[220,5065,5066],{"class":222,"line":223},[220,5067,4663],{},[220,5069,5070],{"class":222,"line":179},[220,5071,4668],{},[220,5073,5074],{"class":222,"line":389},[220,5075,4673],{},[220,5077,5078],{"class":222,"line":399},[220,5079,4678],{},[220,5081,5082],{"class":222,"line":644},[220,5083,647],{"emptyLinePlaceholder":194},[220,5085,5086],{"class":222,"line":650},[220,5087,5088],{},"[mcp_servers.shaders.http_headers]\n",[220,5090,5091],{"class":222,"line":656},[220,5092,5093],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[212,5095,5097],{"className":4559,"code":5096,"language":4561,"meta":178,"style":178},"\u002F\u002F Antigravity MCP settings\n{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5098,5099,5103,5107,5113,5119,5129,5139,5145,5153,5157,5161,5165],{"__ignoreMap":178},[220,5100,5101],{"class":222,"line":223},[220,5102,4688],{"class":609},[220,5104,5105],{"class":222,"line":179},[220,5106,4573],{"class":264},[220,5108,5109,5111],{"class":222,"line":389},[220,5110,4578],{"class":420},[220,5112,4581],{"class":264},[220,5114,5115,5117],{"class":222,"line":399},[220,5116,4586],{"class":420},[220,5118,4581],{"class":264},[220,5120,5121,5123,5125,5127],{"class":222,"line":644},[220,5122,4709],{"class":420},[220,5124,4596],{"class":264},[220,5126,4714],{"class":230},[220,5128,1760],{"class":264},[220,5130,5131,5133,5135,5137],{"class":222,"line":650},[220,5132,4721],{"class":420},[220,5134,4596],{"class":264},[220,5136,4900],{"class":230},[220,5138,1760],{"class":264},[220,5140,5141,5143],{"class":222,"line":656},[220,5142,4907],{"class":420},[220,5144,4581],{"class":264},[220,5146,5147,5149,5151],{"class":222,"line":673},[220,5148,4914],{"class":420},[220,5150,4596],{"class":264},[220,5152,4919],{"class":230},[220,5154,5155],{"class":222,"line":682},[220,5156,4924],{"class":264},[220,5158,5159],{"class":222,"line":691},[220,5160,4604],{"class":264},[220,5162,5163],{"class":222,"line":696},[220,5164,3256],{"class":264},[220,5166,5167],{"class":222,"line":702},[220,5168,749],{"class":264},[212,5170,5172],{"className":4559,"code":5171,"language":4561,"meta":178,"style":178},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https:\u002F\u002Fshaders.com\u002Fmcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[99,5173,5174,5178,5184,5190,5200,5210,5216,5224,5228,5232,5236],{"__ignoreMap":178},[220,5175,5176],{"class":222,"line":223},[220,5177,4573],{"class":264},[220,5179,5180,5182],{"class":222,"line":179},[220,5181,4578],{"class":420},[220,5183,4581],{"class":264},[220,5185,5186,5188],{"class":222,"line":389},[220,5187,4586],{"class":420},[220,5189,4581],{"class":264},[220,5191,5192,5194,5196,5198],{"class":222,"line":399},[220,5193,4709],{"class":420},[220,5195,4596],{"class":264},[220,5197,4714],{"class":230},[220,5199,1760],{"class":264},[220,5201,5202,5204,5206,5208],{"class":222,"line":644},[220,5203,4721],{"class":420},[220,5205,4596],{"class":264},[220,5207,4900],{"class":230},[220,5209,1760],{"class":264},[220,5211,5212,5214],{"class":222,"line":650},[220,5213,4907],{"class":420},[220,5215,4581],{"class":264},[220,5217,5218,5220,5222],{"class":222,"line":656},[220,5219,4914],{"class":420},[220,5221,4596],{"class":264},[220,5223,4919],{"class":230},[220,5225,5226],{"class":222,"line":673},[220,5227,4924],{"class":264},[220,5229,5230],{"class":222,"line":682},[220,5231,4604],{"class":264},[220,5233,5234],{"class":222,"line":691},[220,5235,3256],{"class":264},[220,5237,5238],{"class":222,"line":696},[220,5239,749],{"class":264},[23,5241,5243],{"id":5242},"start-prompting","Start prompting",[15,5245,5246],{},"Once connected, your agent gains access to the following capabilities:",[15,5248,5249,5252],{},[159,5250,5251],{},"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,5254,5255,5258],{},[159,5256,5257],{},"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,5260,5261,5264],{},[159,5262,5263],{},"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,5266,5267,5270],{},[159,5268,5269],{},"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,5272,5273],{},"Example prompts to get started:",[212,5275,5277],{"className":214,"code":5276,"language":216,"meta":178,"style":178},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[99,5278,5279],{"__ignoreMap":178},[220,5280,5281,5284,5287,5290,5292,5295,5298,5301,5304,5307,5310],{"class":222,"line":223},[220,5282,5283],{"class":226},"Install",[220,5285,5286],{"class":230}," my",[220,5288,5289],{"class":230}," \"Landing Hero\"",[220,5291,1738],{"class":230},[220,5293,5294],{"class":230}," in",[220,5296,5297],{"class":230}," the",[220,5299,5300],{"class":230}," hero",[220,5302,5303],{"class":230}," section",[220,5305,5306],{"class":230}," as",[220,5308,5309],{"class":230}," a",[220,5311,5312],{"class":230}," background.\n",[212,5314,5316],{"className":214,"code":5315,"language":216,"meta":178,"style":178},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[99,5317,5318],{"__ignoreMap":178},[220,5319,5320,5323,5325,5327,5330,5332,5335,5338,5341,5344,5347,5350,5353,5355,5358,5361],{"class":222,"line":223},[220,5321,5322],{"class":226},"Add",[220,5324,5309],{"class":230},[220,5326,1738],{"class":230},[220,5328,5329],{"class":230}," to",[220,5331,5297],{"class":230},[220,5333,5334],{"class":230}," background",[220,5336,5337],{"class":230}," of",[220,5339,5340],{"class":230}," this",[220,5342,5343],{"class":230}," card,",[220,5345,5346],{"class":230}," something",[220,5348,5349],{"class":230}," blue",[220,5351,5352],{"class":230}," with",[220,5354,5309],{"class":230},[220,5356,5357],{"class":230}," subtle",[220,5359,5360],{"class":230}," flowing",[220,5362,5363],{"class":230}," animation.\n",[212,5365,5367],{"className":214,"code":5366,"language":216,"meta":178,"style":178},"Make the circle in this shader get bigger as we scroll past the section.\n",[99,5368,5369],{"__ignoreMap":178},[220,5370,5371,5374,5376,5379,5381,5383,5385,5388,5391,5393,5396,5399,5402,5404],{"class":222,"line":223},[220,5372,5373],{"class":226},"Make",[220,5375,5297],{"class":230},[220,5377,5378],{"class":230}," circle",[220,5380,5294],{"class":230},[220,5382,5340],{"class":230},[220,5384,1738],{"class":230},[220,5386,5387],{"class":230}," get",[220,5389,5390],{"class":230}," bigger",[220,5392,5306],{"class":230},[220,5394,5395],{"class":230}," we",[220,5397,5398],{"class":230}," scroll",[220,5400,5401],{"class":230}," past",[220,5403,5297],{"class":230},[220,5405,5406],{"class":230}," section.\n",[212,5408,5410],{"className":214,"code":5409,"language":216,"meta":178,"style":178},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[99,5411,5412],{"__ignoreMap":178},[220,5413,5414,5416,5418,5421,5423,5425,5428,5431,5434,5437,5440,5442,5444],{"class":222,"line":223},[220,5415,5322],{"class":226},[220,5417,5286],{"class":230},[220,5419,5420],{"class":230}," logo.svg",[220,5422,5306],{"class":230},[220,5424,5309],{"class":230},[220,5426,5427],{"class":230}," liquid",[220,5429,5430],{"class":230}," glass",[220,5432,5433],{"class":230}," effect",[220,5435,5436],{"class":230}," on",[220,5438,5439],{"class":230}," top",[220,5441,5337],{"class":230},[220,5443,5340],{"class":230},[220,5445,5446],{"class":230}," shader.\n",[23,5448,5450],{"id":5449},"pro-knowledge-base","Pro knowledge base",[15,5452,5453],{},"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,5455,5456],{},"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,5458,5459],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[4460,5461],{"message":5462},"Make your agent a shader expert...",[4504,5464],{},[11,5466,5468],{"id":5467},"mcp-for-business","MCP for business",[15,5470,5471],{},[4798,5472],{"alt":5473,"src":5474},"Wonder UI","\u002Fimages\u002Fdocs\u002Fwonder-ui.jpg",[15,5476,5477],{},"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,5479,5480,5481,5485],{},"We're open to partnerships and custom integrations. Reach out at ",[56,5482,5484],{"href":5483},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[1504,5487,5488],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":178,"searchDepth":179,"depth":179,"links":5490},[5491,5495,5496,5497,5498],{"id":4468,"depth":179,"text":4469,"children":5492},[5493,5494],{"id":4475,"depth":389,"text":4476},{"id":4508,"depth":389,"text":4509},{"id":4793,"depth":179,"text":4794},{"id":4815,"depth":179,"text":4816},{"id":5242,"depth":179,"text":5243},{"id":5449,"depth":179,"text":5450},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},{"title":4450,"description":5499},"docs\u002Fguide\u002F13.mcp","NeVV60fwiw4vfLypfFm2CcYskEBrab-IFfU8T5OqnoI",{"id":5506,"title":5507,"body":5508,"category":2240,"description":6116,"exclude":190,"extension":191,"forceFramework":190,"icon":6117,"meta":6118,"navigation":194,"path":4825,"seo":6119,"stem":6120,"__hash__":6121},"guide\u002Fdocs\u002Fguide\u002F14.registry.md","shadcn Registry",{"type":8,"value":5509,"toc":6103},[5510,5513,5521,5538,5545,5549,5553,5556,5558,5569,5589,5592,5596,5607,5864,5882,5886,5893,5909,5915,5922,5926,5929,5945,5948,5952,5955,5969,5976,5980,6010,6013,6017,6042,6050,6068,6077,6081,6084,6097,6100],[11,5511,5507],{"id":5512},"shadcn-registry",[15,5514,5515,5516,5520],{},"Every preset and section on Shaders is also a ",[56,5517,4826],{"href":5518,"rel":5519},"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,5522,5524],{"className":214,"code":5523,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Faurora-hero\n",[99,5525,5526],{"__ignoreMap":178},[220,5527,5528,5530,5533,5535],{"class":222,"line":223},[220,5529,4489],{"class":226},[220,5531,5532],{"class":230}," shadcn",[220,5534,4544],{"class":230},[220,5536,5537],{"class":230}," @shaders\u002Faurora-hero\n",[15,5539,5540,5541,5544],{},"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,5542,5543],{},"shaders"," package. Nothing is bundled from our servers at runtime, and nothing in the installed code points back at us.",[23,5546,5548],{"id":5547},"setup","Setup",[3262,5550,5552],{"id":5551},"_1-create-an-api-key-and-add-it-to-your-environment","1. Create an API key and add it to your environment",[15,5554,5555],{},"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.",[4833,5557],{},[15,5559,5560,5561,5564,5565,5568],{},"Put the key in ",[99,5562,5563],{},".env.local"," (or wherever your project keeps local secrets — the CLI expands ",[99,5566,5567],{},"${SHADERS_API_KEY}"," from your environment):",[212,5570,5572],{"className":214,"code":5571,"language":216,"meta":178,"style":178},"# .env.local\nSHADERS_API_KEY=sk_live_your_key_here\n",[99,5573,5574,5579],{"__ignoreMap":178},[220,5575,5576],{"class":222,"line":223},[220,5577,5578],{"class":609},"# .env.local\n",[220,5580,5581,5584,5586],{"class":222,"line":179},[220,5582,5583],{"class":264},"SHADERS_API_KEY",[220,5585,353],{"class":260},[220,5587,5588],{"class":230},"sk_live_your_key_here\n",[15,5590,5591],{},"Don't commit the key. It is tied to your account and can be revoked at any time from the same panel that created it.",[3262,5593,5595],{"id":5594},"_2-register-the-namespace","2. Register the namespace",[15,5597,5598,5599,5602,5603,5606],{},"Add a ",[99,5600,5601],{},"@shaders"," registry to your project's ",[99,5604,5605],{},"components.json",", referencing the key you just created. The framework lives in the URL, so pick the segment that matches your stack:",[246,5608,5609,5678,5740,5802],{":tabs":248},[212,5610,5612],{"className":4559,"code":5611,"language":4561,"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,5613,5614,5619,5623,5630,5637,5648,5666,5670,5674],{"__ignoreMap":178},[220,5615,5616],{"class":222,"line":223},[220,5617,5618],{"class":609},"\u002F\u002F components.json\n",[220,5620,5621],{"class":222,"line":179},[220,5622,4573],{"class":264},[220,5624,5625,5628],{"class":222,"line":389},[220,5626,5627],{"class":420}," \"registries\"",[220,5629,4581],{"class":264},[220,5631,5632,5635],{"class":222,"line":399},[220,5633,5634],{"class":420}," \"@shaders\"",[220,5636,4581],{"class":264},[220,5638,5639,5641,5643,5646],{"class":222,"line":644},[220,5640,4721],{"class":420},[220,5642,4596],{"class":264},[220,5644,5645],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fvue\u002F{name}.json\"",[220,5647,1760],{"class":264},[220,5649,5650,5652,5655,5658,5660,5663],{"class":222,"line":650},[220,5651,4907],{"class":420},[220,5653,5654],{"class":264},": { ",[220,5656,5657],{"class":420},"\"Authorization\"",[220,5659,4596],{"class":264},[220,5661,5662],{"class":230},"\"Bearer ${SHADERS_API_KEY}\"",[220,5664,5665],{"class":264}," }\n",[220,5667,5668],{"class":222,"line":656},[220,5669,4604],{"class":264},[220,5671,5672],{"class":222,"line":673},[220,5673,3256],{"class":264},[220,5675,5676],{"class":222,"line":682},[220,5677,749],{"class":264},[212,5679,5681],{"className":4559,"code":5680,"language":4561,"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,5682,5683,5687,5691,5697,5703,5714,5728,5732,5736],{"__ignoreMap":178},[220,5684,5685],{"class":222,"line":223},[220,5686,5618],{"class":609},[220,5688,5689],{"class":222,"line":179},[220,5690,4573],{"class":264},[220,5692,5693,5695],{"class":222,"line":389},[220,5694,5627],{"class":420},[220,5696,4581],{"class":264},[220,5698,5699,5701],{"class":222,"line":399},[220,5700,5634],{"class":420},[220,5702,4581],{"class":264},[220,5704,5705,5707,5709,5712],{"class":222,"line":644},[220,5706,4721],{"class":420},[220,5708,4596],{"class":264},[220,5710,5711],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Freact\u002F{name}.json\"",[220,5713,1760],{"class":264},[220,5715,5716,5718,5720,5722,5724,5726],{"class":222,"line":650},[220,5717,4907],{"class":420},[220,5719,5654],{"class":264},[220,5721,5657],{"class":420},[220,5723,4596],{"class":264},[220,5725,5662],{"class":230},[220,5727,5665],{"class":264},[220,5729,5730],{"class":222,"line":656},[220,5731,4604],{"class":264},[220,5733,5734],{"class":222,"line":673},[220,5735,3256],{"class":264},[220,5737,5738],{"class":222,"line":682},[220,5739,749],{"class":264},[212,5741,5743],{"className":4559,"code":5742,"language":4561,"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,5744,5745,5749,5753,5759,5765,5776,5790,5794,5798],{"__ignoreMap":178},[220,5746,5747],{"class":222,"line":223},[220,5748,5618],{"class":609},[220,5750,5751],{"class":222,"line":179},[220,5752,4573],{"class":264},[220,5754,5755,5757],{"class":222,"line":389},[220,5756,5627],{"class":420},[220,5758,4581],{"class":264},[220,5760,5761,5763],{"class":222,"line":399},[220,5762,5634],{"class":420},[220,5764,4581],{"class":264},[220,5766,5767,5769,5771,5774],{"class":222,"line":644},[220,5768,4721],{"class":420},[220,5770,4596],{"class":264},[220,5772,5773],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsvelte\u002F{name}.json\"",[220,5775,1760],{"class":264},[220,5777,5778,5780,5782,5784,5786,5788],{"class":222,"line":650},[220,5779,4907],{"class":420},[220,5781,5654],{"class":264},[220,5783,5657],{"class":420},[220,5785,4596],{"class":264},[220,5787,5662],{"class":230},[220,5789,5665],{"class":264},[220,5791,5792],{"class":222,"line":656},[220,5793,4604],{"class":264},[220,5795,5796],{"class":222,"line":673},[220,5797,3256],{"class":264},[220,5799,5800],{"class":222,"line":682},[220,5801,749],{"class":264},[212,5803,5805],{"className":4559,"code":5804,"language":4561,"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,5806,5807,5811,5815,5821,5827,5838,5852,5856,5860],{"__ignoreMap":178},[220,5808,5809],{"class":222,"line":223},[220,5810,5618],{"class":609},[220,5812,5813],{"class":222,"line":179},[220,5814,4573],{"class":264},[220,5816,5817,5819],{"class":222,"line":389},[220,5818,5627],{"class":420},[220,5820,4581],{"class":264},[220,5822,5823,5825],{"class":222,"line":399},[220,5824,5634],{"class":420},[220,5826,4581],{"class":264},[220,5828,5829,5831,5833,5836],{"class":222,"line":644},[220,5830,4721],{"class":420},[220,5832,4596],{"class":264},[220,5834,5835],{"class":230},"\"https:\u002F\u002Fshaders.com\u002Fr\u002Fsolid\u002F{name}.json\"",[220,5837,1760],{"class":264},[220,5839,5840,5842,5844,5846,5848,5850],{"class":222,"line":650},[220,5841,4907],{"class":420},[220,5843,5654],{"class":264},[220,5845,5657],{"class":420},[220,5847,4596],{"class":264},[220,5849,5662],{"class":230},[220,5851,5665],{"class":264},[220,5853,5854],{"class":222,"line":656},[220,5855,4604],{"class":264},[220,5857,5858],{"class":222,"line":673},[220,5859,3256],{"class":264},[220,5861,5862],{"class":222,"line":682},[220,5863,749],{"class":264},[15,5865,5866,5867,5870,5871,5874,5875,1864,5878,5881],{},"Use the official ",[99,5868,5869],{},"shadcn"," CLI — it is a framework-agnostic file writer, and it is the CLI that understands the ",[99,5872,5873],{},"registries"," config block. The ",[99,5876,5877],{},"shadcn-vue",[99,5879,5880],{},"shadcn-svelte"," forks have their own CLIs and do not read this configuration.",[23,5883,5885],{"id":5884},"installing-presets","Installing presets",[15,5887,5888,5889,5892],{},"Preset items are named ",[99,5890,5891],{},"\u003Ccollection-slug>-\u003Cvariant>",", matching the collection slug and the variant number shown on the preset page:",[212,5894,5896],{"className":214,"code":5895,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fliquid-chrome-2\n",[99,5897,5898],{"__ignoreMap":178},[220,5899,5900,5902,5904,5906],{"class":222,"line":223},[220,5901,4489],{"class":226},[220,5903,5532],{"class":230},[220,5905,4544],{"class":230},[220,5907,5908],{"class":230}," @shaders\u002Fliquid-chrome-2\n",[15,5910,5911,5912,5914],{},"You get a single component file that renders that exact preset, with all non-default props inlined and ",[99,5913,5543],{}," added to your dependencies. From there it's ordinary source code — change the props, wire them to state, compose it with other effects.",[15,5916,5917,5918,5921],{},"Every preset page on the site has an ",[159,5919,5920],{},"Install with shadcn"," link that shows you the exact command for that variant.",[23,5923,5925],{"id":5924},"installing-sections","Installing sections",[15,5927,5928],{},"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,5930,5932],{"className":214,"code":5931,"language":216,"meta":178,"style":178},"npx shadcn add @shaders\u002Fprism-pricing\n",[99,5933,5934],{"__ignoreMap":178},[220,5935,5936,5938,5940,5942],{"class":222,"line":223},[220,5937,4489],{"class":226},[220,5939,5532],{"class":230},[220,5941,4544],{"class":230},[220,5943,5944],{"class":230}," @shaders\u002Fprism-pricing\n",[15,5946,5947],{},"Sections are hand-authored in Vue and ported to React, Svelte, and Solid, so the same slug works in all four namespaces.",[3262,5949,5951],{"id":5950},"section-assets-and-follow-up-steps","Section assets and follow-up steps",[15,5953,5954],{},"The shadcn CLI can only transport text, so a section install arrives in two parts:",[34,5956,5957,5963],{},[37,5958,5959,5962],{},[159,5960,5961],{},"Code and SVG logos"," are written directly into your project.",[37,5964,5965,5968],{},[159,5966,5967],{},"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,5970,5971,5972,5975],{},"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,5973,5974],{"href":58},"Shaders MCP"," — ask it to generate an SDF from your logo and it will handle the rest.",[23,5977,5979],{"id":5978},"free-vs-paid","Free vs paid",[1794,5981,5982,5992],{},[1797,5983,5984],{},[1800,5985,5986,5989],{},[1803,5987,5988],{},"Item",[1803,5990,5991],{},"What's needed",[1810,5993,5994,6002],{},[1800,5995,5996,5999],{},[1815,5997,5998],{},"Free preset or section",[1815,6000,6001],{},"Nothing — installs without a key",[1800,6003,6004,6007],{},[1815,6005,6006],{},"Paid preset or section",[1815,6008,6009],{},"An API key on an account with Shaders Pro, or a single purchase of that item",[15,6011,6012],{},"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,6014,6016],{"id":6015},"troubleshooting","Troubleshooting",[15,6018,6019,6024,6025,6027,6028,6031,6032,6035,6036,6038,6039,4831],{},[159,6020,6021],{},[99,6022,6023],{},"401 Unauthorized"," — the registry couldn't read a valid key. Either ",[99,6026,5583],{}," isn't set in the environment the CLI is running in, or the key has been revoked. Check that the variable resolves (",[99,6029,6030],{},"echo $SHADERS_API_KEY",") and that the ",[99,6033,6034],{},"Authorization"," header in ",[99,6037,5605],{}," is spelled ",[99,6040,6041],{},"Bearer ${SHADERS_API_KEY}",[15,6043,6044,6049],{},[159,6045,6046],{},[99,6047,6048],{},"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,6051,6052,6057,6058,6060,6061,6067],{},[159,6053,6054],{},[99,6055,6056],{},"404 Not Found"," — the item name is wrong. Preset names are ",[99,6059,5891],{}," and section names are the section slug exactly as it appears in the URL on shaders.com. You can list everything available at ",[56,6062,6065],{"href":6063,"rel":6064},"https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json",[167],[99,6066,6063],{},", which is public and needs no key.",[15,6069,6070,6073,6074,6076],{},[159,6071,6072],{},"Installed files are for the wrong framework"," — the framework comes from the URL, not from your project. Check the segment in ",[99,6075,5605],{}," matches your stack.",[23,6078,6080],{"id":6079},"browsing-the-registry","Browsing the registry",[15,6082,6083],{},"The index is public:",[212,6085,6087],{"className":214,"code":6086,"language":216,"meta":178,"style":178},"curl https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[99,6088,6089],{"__ignoreMap":178},[220,6090,6091,6094],{"class":222,"line":223},[220,6092,6093],{"class":226},"curl",[220,6095,6096],{"class":230}," https:\u002F\u002Fshaders.com\u002Fr\u002Fregistry.json\n",[15,6098,6099],{},"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,6101,6102],{},"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":6104},[6105,6109,6110,6113,6114,6115],{"id":5547,"depth":179,"text":5548,"children":6106},[6107,6108],{"id":5551,"depth":389,"text":5552},{"id":5594,"depth":389,"text":5595},{"id":5884,"depth":179,"text":5885},{"id":5924,"depth":179,"text":5925,"children":6111},[6112],{"id":5950,"depth":389,"text":5951},{"id":5978,"depth":179,"text":5979},{"id":6015,"depth":179,"text":6016},{"id":6079,"depth":179,"text":6080},"Install any Shaders preset or section straight into your project with the shadcn CLI","terminal",{},{"title":5507,"description":6116},"docs\u002Fguide\u002F14.registry","HSE0sG5XJcGlPkMnxnc2zLwpah9usnfvUGE5YdszqFY",{"id":6123,"title":1482,"body":6124,"category":188,"description":7594,"exclude":190,"extension":191,"forceFramework":190,"icon":7595,"meta":7596,"navigation":194,"path":1481,"seo":7597,"stem":7598,"__hash__":7599},"guide\u002Fdocs\u002Fguide\u002F2.composing-effects.md",{"type":8,"value":6125,"toc":7590},[6126,6129,6135,6139,6146,6589,6592,6596,6613,7035,7038,7047,7584,7587],[11,6127,1482],{"id":6128},"composing-effects",[15,6130,6131,6132,6134],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[99,6133,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,6136,6138],{"id":6137},"stacking-components","Stacking Components",[15,6140,6141,6142,6145],{},"Components are evaluated ",[159,6143,6144],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[246,6147,6148,6231,6327,6417,6507],{":tabs":1557},[212,6149,6151],{"className":334,"code":6150,"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,6152,6153,6161,6166,6174,6178,6183,6205,6209,6214,6223],{"__ignoreMap":178},[220,6154,6155,6157,6159],{"class":222,"line":223},[220,6156,343],{"class":264},[220,6158,347],{"class":346},[220,6160,359],{"class":264},[220,6162,6163],{"class":222,"line":179},[220,6164,6165],{"class":609}," \u003C!-- Bottom layer -->\n",[220,6167,6168,6170,6172],{"class":222,"line":389},[220,6169,364],{"class":264},[220,6171,367],{"class":346},[220,6173,386],{"class":264},[220,6175,6176],{"class":222,"line":399},[220,6177,647],{"emptyLinePlaceholder":194},[220,6179,6180],{"class":222,"line":644},[220,6181,6182],{"class":609}," \u003C!-- Middle layer -->\n",[220,6184,6185,6187,6189,6191,6193,6195,6198,6200,6203],{"class":222,"line":650},[220,6186,364],{"class":264},[220,6188,2553],{"class":346},[220,6190,1588],{"class":226},[220,6192,353],{"class":264},[220,6194,2560],{"class":230},[220,6196,6197],{"class":226}," radius",[220,6199,353],{"class":264},[220,6201,6202],{"class":230},"\"0.8\"",[220,6204,386],{"class":264},[220,6206,6207],{"class":222,"line":656},[220,6208,647],{"emptyLinePlaceholder":194},[220,6210,6211],{"class":222,"line":673},[220,6212,6213],{"class":609}," \u003C!-- Top layer -->\n",[220,6215,6216,6218,6221],{"class":222,"line":682},[220,6217,364],{"class":264},[220,6219,6220],{"class":346},"GlassTiles",[220,6222,386],{"class":264},[220,6224,6225,6227,6229],{"class":222,"line":691},[220,6226,402],{"class":264},[220,6228,347],{"class":346},[220,6230,359],{"class":264},[212,6232,6234],{"className":409,"code":6233,"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,6235,6236,6244,6253,6261,6265,6274,6298,6302,6311,6319],{"__ignoreMap":178},[220,6237,6238,6240,6242],{"class":222,"line":223},[220,6239,343],{"class":264},[220,6241,347],{"class":420},[220,6243,359],{"class":264},[220,6245,6246,6248,6251],{"class":222,"line":179},[220,6247,1999],{"class":264},[220,6249,6250],{"class":609},"\u002F* Bottom layer *\u002F",[220,6252,749],{"class":264},[220,6254,6255,6257,6259],{"class":222,"line":389},[220,6256,364],{"class":264},[220,6258,367],{"class":420},[220,6260,386],{"class":264},[220,6262,6263],{"class":222,"line":399},[220,6264,647],{"emptyLinePlaceholder":194},[220,6266,6267,6269,6272],{"class":222,"line":644},[220,6268,1999],{"class":264},[220,6270,6271],{"class":609},"\u002F* Middle layer *\u002F",[220,6273,749],{"class":264},[220,6275,6276,6278,6280,6282,6284,6286,6288,6290,6292,6295],{"class":222,"line":650},[220,6277,364],{"class":264},[220,6279,2553],{"class":420},[220,6281,1588],{"class":226},[220,6283,353],{"class":260},[220,6285,2560],{"class":230},[220,6287,6197],{"class":226},[220,6289,353],{"class":260},[220,6291,743],{"class":264},[220,6293,6294],{"class":420},"0.8",[220,6296,6297],{"class":264},"} \u002F>\n",[220,6299,6300],{"class":222,"line":656},[220,6301,647],{"emptyLinePlaceholder":194},[220,6303,6304,6306,6309],{"class":222,"line":673},[220,6305,1999],{"class":264},[220,6307,6308],{"class":609},"\u002F* Top layer *\u002F",[220,6310,749],{"class":264},[220,6312,6313,6315,6317],{"class":222,"line":682},[220,6314,364],{"class":264},[220,6316,6220],{"class":420},[220,6318,386],{"class":264},[220,6320,6321,6323,6325],{"class":222,"line":691},[220,6322,402],{"class":264},[220,6324,347],{"class":420},[220,6326,359],{"class":264},[212,6328,6329],{"className":468,"code":6233,"language":469,"meta":178,"style":178},[99,6330,6331,6339,6347,6355,6359,6367,6389,6393,6401,6409],{"__ignoreMap":178},[220,6332,6333,6335,6337],{"class":222,"line":223},[220,6334,343],{"class":264},[220,6336,347],{"class":420},[220,6338,359],{"class":264},[220,6340,6341,6343,6345],{"class":222,"line":179},[220,6342,1999],{"class":264},[220,6344,6250],{"class":609},[220,6346,749],{"class":264},[220,6348,6349,6351,6353],{"class":222,"line":389},[220,6350,364],{"class":264},[220,6352,367],{"class":420},[220,6354,386],{"class":264},[220,6356,6357],{"class":222,"line":399},[220,6358,647],{"emptyLinePlaceholder":194},[220,6360,6361,6363,6365],{"class":222,"line":644},[220,6362,1999],{"class":264},[220,6364,6271],{"class":609},[220,6366,749],{"class":264},[220,6368,6369,6371,6373,6375,6377,6379,6381,6383,6385,6387],{"class":222,"line":650},[220,6370,364],{"class":264},[220,6372,2553],{"class":420},[220,6374,1588],{"class":226},[220,6376,353],{"class":260},[220,6378,2560],{"class":230},[220,6380,6197],{"class":226},[220,6382,353],{"class":260},[220,6384,743],{"class":264},[220,6386,6294],{"class":420},[220,6388,6297],{"class":264},[220,6390,6391],{"class":222,"line":656},[220,6392,647],{"emptyLinePlaceholder":194},[220,6394,6395,6397,6399],{"class":222,"line":673},[220,6396,1999],{"class":264},[220,6398,6308],{"class":609},[220,6400,749],{"class":264},[220,6402,6403,6405,6407],{"class":222,"line":682},[220,6404,364],{"class":264},[220,6406,6220],{"class":420},[220,6408,386],{"class":264},[220,6410,6411,6413,6415],{"class":222,"line":691},[220,6412,402],{"class":264},[220,6414,347],{"class":420},[220,6416,359],{"class":264},[212,6418,6419],{"className":468,"code":6233,"language":469,"meta":178,"style":178},[99,6420,6421,6429,6437,6445,6449,6457,6479,6483,6491,6499],{"__ignoreMap":178},[220,6422,6423,6425,6427],{"class":222,"line":223},[220,6424,343],{"class":264},[220,6426,347],{"class":420},[220,6428,359],{"class":264},[220,6430,6431,6433,6435],{"class":222,"line":179},[220,6432,1999],{"class":264},[220,6434,6250],{"class":609},[220,6436,749],{"class":264},[220,6438,6439,6441,6443],{"class":222,"line":389},[220,6440,364],{"class":264},[220,6442,367],{"class":420},[220,6444,386],{"class":264},[220,6446,6447],{"class":222,"line":399},[220,6448,647],{"emptyLinePlaceholder":194},[220,6450,6451,6453,6455],{"class":222,"line":644},[220,6452,1999],{"class":264},[220,6454,6271],{"class":609},[220,6456,749],{"class":264},[220,6458,6459,6461,6463,6465,6467,6469,6471,6473,6475,6477],{"class":222,"line":650},[220,6460,364],{"class":264},[220,6462,2553],{"class":420},[220,6464,1588],{"class":226},[220,6466,353],{"class":260},[220,6468,2560],{"class":230},[220,6470,6197],{"class":226},[220,6472,353],{"class":260},[220,6474,743],{"class":264},[220,6476,6294],{"class":420},[220,6478,6297],{"class":264},[220,6480,6481],{"class":222,"line":656},[220,6482,647],{"emptyLinePlaceholder":194},[220,6484,6485,6487,6489],{"class":222,"line":673},[220,6486,1999],{"class":264},[220,6488,6308],{"class":609},[220,6490,749],{"class":264},[220,6492,6493,6495,6497],{"class":222,"line":682},[220,6494,364],{"class":264},[220,6496,6220],{"class":420},[220,6498,386],{"class":264},[220,6500,6501,6503,6505],{"class":222,"line":691},[220,6502,402],{"class":264},[220,6504,347],{"class":420},[220,6506,359],{"class":264},[212,6508,6510],{"className":251,"code":6509,"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,6511,6512,6526,6530,6535,6544,6549,6567,6572,6581,6585],{"__ignoreMap":178},[220,6513,6514,6516,6518,6520,6522,6524],{"class":222,"line":223},[220,6515,1735],{"class":260},[220,6517,1738],{"class":420},[220,6519,1741],{"class":260},[220,6521,1744],{"class":260},[220,6523,1747],{"class":226},[220,6525,1750],{"class":264},[220,6527,6528],{"class":222,"line":179},[220,6529,1765],{"class":264},[220,6531,6532],{"class":222,"line":389},[220,6533,6534],{"class":609}," \u002F\u002F Bottom layer\n",[220,6536,6537,6539,6541],{"class":222,"line":399},[220,6538,1770],{"class":264},[220,6540,2462],{"class":230},[220,6542,6543],{"class":264},", props: {} },\n",[220,6545,6546],{"class":222,"line":644},[220,6547,6548],{"class":609}," \u002F\u002F Middle layer\n",[220,6550,6551,6553,6555,6557,6559,6562,6564],{"class":222,"line":650},[220,6552,1770],{"class":264},[220,6554,3206],{"class":230},[220,6556,1776],{"class":264},[220,6558,3217],{"class":230},[220,6560,6561],{"class":264},", radius: ",[220,6563,6294],{"class":420},[220,6565,6566],{"class":264}," } },\n",[220,6568,6569],{"class":222,"line":656},[220,6570,6571],{"class":609}," \u002F\u002F Top layer\n",[220,6573,6574,6576,6579],{"class":222,"line":673},[220,6575,1770],{"class":264},[220,6577,6578],{"class":230},"'GlassTiles'",[220,6580,2465],{"class":264},[220,6582,6583],{"class":222,"line":682},[220,6584,1787],{"class":264},[220,6586,6587],{"class":222,"line":691},[220,6588,1792],{"class":264},[19,6590],{":preset":6591},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,6593,6595],{"id":6594},"nesting-components","Nesting Components",[15,6597,6598,6599,6602,6603,6606,6607,6610,6611,1938],{},"Notice how the ",[99,6600,6601],{},"\u003CGlassTiles>"," component in the above example applies to all of the sibling layers rendered before it. If you wanted to ",[1847,6604,6605],{},"only"," apply glass tiles to the ",[99,6608,6609],{},"\u003CCircle>"," component, you can nest it inside the ",[99,6612,6601],{},[246,6614,6615,6694,6783,6869,6955],{":tabs":1557},[212,6616,6618],{"className":334,"code":6617,"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,6619,6620,6628,6633,6641,6645,6650,6658,6678,6686],{"__ignoreMap":178},[220,6621,6622,6624,6626],{"class":222,"line":223},[220,6623,343],{"class":264},[220,6625,347],{"class":346},[220,6627,359],{"class":264},[220,6629,6630],{"class":222,"line":179},[220,6631,6632],{"class":609}," \u003C!-- This gradient is NOT affected -->\n",[220,6634,6635,6637,6639],{"class":222,"line":389},[220,6636,364],{"class":264},[220,6638,367],{"class":346},[220,6640,386],{"class":264},[220,6642,6643],{"class":222,"line":399},[220,6644,647],{"emptyLinePlaceholder":194},[220,6646,6647],{"class":222,"line":644},[220,6648,6649],{"class":609}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[220,6651,6652,6654,6656],{"class":222,"line":650},[220,6653,364],{"class":264},[220,6655,6220],{"class":346},[220,6657,359],{"class":264},[220,6659,6660,6662,6664,6666,6668,6670,6672,6674,6676],{"class":222,"line":656},[220,6661,2550],{"class":264},[220,6663,2553],{"class":346},[220,6665,1588],{"class":226},[220,6667,353],{"class":264},[220,6669,2560],{"class":230},[220,6671,6197],{"class":226},[220,6673,353],{"class":264},[220,6675,6202],{"class":230},[220,6677,386],{"class":264},[220,6679,6680,6682,6684],{"class":222,"line":673},[220,6681,2567],{"class":264},[220,6683,6220],{"class":346},[220,6685,359],{"class":264},[220,6687,6688,6690,6692],{"class":222,"line":682},[220,6689,402],{"class":264},[220,6691,347],{"class":346},[220,6693,359],{"class":264},[212,6695,6697],{"className":409,"code":6696,"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,6698,6699,6707,6716,6724,6728,6737,6745,6767,6775],{"__ignoreMap":178},[220,6700,6701,6703,6705],{"class":222,"line":223},[220,6702,343],{"class":264},[220,6704,347],{"class":420},[220,6706,359],{"class":264},[220,6708,6709,6711,6714],{"class":222,"line":179},[220,6710,1999],{"class":264},[220,6712,6713],{"class":609},"\u002F* This gradient is NOT affected *\u002F",[220,6715,749],{"class":264},[220,6717,6718,6720,6722],{"class":222,"line":389},[220,6719,364],{"class":264},[220,6721,367],{"class":420},[220,6723,386],{"class":264},[220,6725,6726],{"class":222,"line":399},[220,6727,647],{"emptyLinePlaceholder":194},[220,6729,6730,6732,6735],{"class":222,"line":644},[220,6731,1999],{"class":264},[220,6733,6734],{"class":609},"\u002F* Only the Circle inside has glass tiles applied *\u002F",[220,6736,749],{"class":264},[220,6738,6739,6741,6743],{"class":222,"line":650},[220,6740,364],{"class":264},[220,6742,6220],{"class":420},[220,6744,359],{"class":264},[220,6746,6747,6749,6751,6753,6755,6757,6759,6761,6763,6765],{"class":222,"line":656},[220,6748,2550],{"class":264},[220,6750,2553],{"class":420},[220,6752,1588],{"class":226},[220,6754,353],{"class":260},[220,6756,2560],{"class":230},[220,6758,6197],{"class":226},[220,6760,353],{"class":260},[220,6762,743],{"class":264},[220,6764,6294],{"class":420},[220,6766,6297],{"class":264},[220,6768,6769,6771,6773],{"class":222,"line":673},[220,6770,2567],{"class":264},[220,6772,6220],{"class":420},[220,6774,359],{"class":264},[220,6776,6777,6779,6781],{"class":222,"line":682},[220,6778,402],{"class":264},[220,6780,347],{"class":420},[220,6782,359],{"class":264},[212,6784,6785],{"className":468,"code":6696,"language":469,"meta":178,"style":178},[99,6786,6787,6795,6803,6811,6815,6823,6831,6853,6861],{"__ignoreMap":178},[220,6788,6789,6791,6793],{"class":222,"line":223},[220,6790,343],{"class":264},[220,6792,347],{"class":420},[220,6794,359],{"class":264},[220,6796,6797,6799,6801],{"class":222,"line":179},[220,6798,1999],{"class":264},[220,6800,6713],{"class":609},[220,6802,749],{"class":264},[220,6804,6805,6807,6809],{"class":222,"line":389},[220,6806,364],{"class":264},[220,6808,367],{"class":420},[220,6810,386],{"class":264},[220,6812,6813],{"class":222,"line":399},[220,6814,647],{"emptyLinePlaceholder":194},[220,6816,6817,6819,6821],{"class":222,"line":644},[220,6818,1999],{"class":264},[220,6820,6734],{"class":609},[220,6822,749],{"class":264},[220,6824,6825,6827,6829],{"class":222,"line":650},[220,6826,364],{"class":264},[220,6828,6220],{"class":420},[220,6830,359],{"class":264},[220,6832,6833,6835,6837,6839,6841,6843,6845,6847,6849,6851],{"class":222,"line":656},[220,6834,2550],{"class":264},[220,6836,2553],{"class":420},[220,6838,1588],{"class":226},[220,6840,353],{"class":260},[220,6842,2560],{"class":230},[220,6844,6197],{"class":226},[220,6846,353],{"class":260},[220,6848,743],{"class":264},[220,6850,6294],{"class":420},[220,6852,6297],{"class":264},[220,6854,6855,6857,6859],{"class":222,"line":673},[220,6856,2567],{"class":264},[220,6858,6220],{"class":420},[220,6860,359],{"class":264},[220,6862,6863,6865,6867],{"class":222,"line":682},[220,6864,402],{"class":264},[220,6866,347],{"class":420},[220,6868,359],{"class":264},[212,6870,6871],{"className":468,"code":6696,"language":469,"meta":178,"style":178},[99,6872,6873,6881,6889,6897,6901,6909,6917,6939,6947],{"__ignoreMap":178},[220,6874,6875,6877,6879],{"class":222,"line":223},[220,6876,343],{"class":264},[220,6878,347],{"class":420},[220,6880,359],{"class":264},[220,6882,6883,6885,6887],{"class":222,"line":179},[220,6884,1999],{"class":264},[220,6886,6713],{"class":609},[220,6888,749],{"class":264},[220,6890,6891,6893,6895],{"class":222,"line":389},[220,6892,364],{"class":264},[220,6894,367],{"class":420},[220,6896,386],{"class":264},[220,6898,6899],{"class":222,"line":399},[220,6900,647],{"emptyLinePlaceholder":194},[220,6902,6903,6905,6907],{"class":222,"line":644},[220,6904,1999],{"class":264},[220,6906,6734],{"class":609},[220,6908,749],{"class":264},[220,6910,6911,6913,6915],{"class":222,"line":650},[220,6912,364],{"class":264},[220,6914,6220],{"class":420},[220,6916,359],{"class":264},[220,6918,6919,6921,6923,6925,6927,6929,6931,6933,6935,6937],{"class":222,"line":656},[220,6920,2550],{"class":264},[220,6922,2553],{"class":420},[220,6924,1588],{"class":226},[220,6926,353],{"class":260},[220,6928,2560],{"class":230},[220,6930,6197],{"class":226},[220,6932,353],{"class":260},[220,6934,743],{"class":264},[220,6936,6294],{"class":420},[220,6938,6297],{"class":264},[220,6940,6941,6943,6945],{"class":222,"line":673},[220,6942,2567],{"class":264},[220,6944,6220],{"class":420},[220,6946,359],{"class":264},[220,6948,6949,6951,6953],{"class":222,"line":682},[220,6950,402],{"class":264},[220,6952,347],{"class":420},[220,6954,359],{"class":264},[212,6956,6958],{"className":251,"code":6957,"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,6959,6960,6974,6978,6983,6991,6996,7005,7022,7027,7031],{"__ignoreMap":178},[220,6961,6962,6964,6966,6968,6970,6972],{"class":222,"line":223},[220,6963,1735],{"class":260},[220,6965,1738],{"class":420},[220,6967,1741],{"class":260},[220,6969,1744],{"class":260},[220,6971,1747],{"class":226},[220,6973,1750],{"class":264},[220,6975,6976],{"class":222,"line":179},[220,6977,1765],{"class":264},[220,6979,6980],{"class":222,"line":389},[220,6981,6982],{"class":609}," \u002F\u002F This gradient is NOT affected\n",[220,6984,6985,6987,6989],{"class":222,"line":399},[220,6986,1770],{"class":264},[220,6988,2462],{"class":230},[220,6990,6543],{"class":264},[220,6992,6993],{"class":222,"line":644},[220,6994,6995],{"class":609}," \u002F\u002F Only the Circle inside has glass tiles applied\n",[220,6997,6998,7000,7002],{"class":222,"line":650},[220,6999,1770],{"class":264},[220,7001,6578],{"class":230},[220,7003,7004],{"class":264},", props: {}, children: [\n",[220,7006,7007,7010,7012,7014,7016,7018,7020],{"class":222,"line":656},[220,7008,7009],{"class":264}," { type: ",[220,7011,3206],{"class":230},[220,7013,1776],{"class":264},[220,7015,3217],{"class":230},[220,7017,6561],{"class":264},[220,7019,6294],{"class":420},[220,7021,1782],{"class":264},[220,7023,7024],{"class":222,"line":673},[220,7025,7026],{"class":264}," ]}\n",[220,7028,7029],{"class":222,"line":682},[220,7030,1787],{"class":264},[220,7032,7033],{"class":222,"line":691},[220,7034,1792],{"class":264},[19,7036],{":preset":7037},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,7039,7040,7041,7043,7044,7046],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[99,7042,367],{},") don't accept children, whereas components that apply effects (such as ",[99,7045,6220],{},") do. The component reference in this documentation shows if the particular component accepts children.",[246,7048,7049,7152,7266,7376,7486],{":tabs":1557},[212,7050,7052],{"className":334,"code":7051,"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,7053,7054,7062,7067,7075,7079,7084,7100,7108,7128,7136,7144],{"__ignoreMap":178},[220,7055,7056,7058,7060],{"class":222,"line":223},[220,7057,343],{"class":264},[220,7059,347],{"class":346},[220,7061,359],{"class":264},[220,7063,7064],{"class":222,"line":179},[220,7065,7066],{"class":609}," \u003C!-- Unaffected -->\n",[220,7068,7069,7071,7073],{"class":222,"line":389},[220,7070,364],{"class":264},[220,7072,367],{"class":346},[220,7074,386],{"class":264},[220,7076,7077],{"class":222,"line":399},[220,7078,647],{"emptyLinePlaceholder":194},[220,7080,7081],{"class":222,"line":644},[220,7082,7083],{"class":609}," \u003C!-- Nested effects apply only to Circle -->\n",[220,7085,7086,7088,7091,7093,7095,7098],{"class":222,"line":650},[220,7087,364],{"class":264},[220,7089,7090],{"class":346},"GridDistortion",[220,7092,6197],{"class":226},[220,7094,353],{"class":264},[220,7096,7097],{"class":230},"\"2\"",[220,7099,359],{"class":264},[220,7101,7102,7104,7106],{"class":222,"line":656},[220,7103,2550],{"class":264},[220,7105,6220],{"class":346},[220,7107,359],{"class":264},[220,7109,7110,7112,7114,7116,7118,7120,7122,7124,7126],{"class":222,"line":673},[220,7111,2813],{"class":264},[220,7113,2553],{"class":346},[220,7115,1588],{"class":226},[220,7117,353],{"class":264},[220,7119,2560],{"class":230},[220,7121,6197],{"class":226},[220,7123,353],{"class":264},[220,7125,6202],{"class":230},[220,7127,386],{"class":264},[220,7129,7130,7132,7134],{"class":222,"line":682},[220,7131,2828],{"class":264},[220,7133,6220],{"class":346},[220,7135,359],{"class":264},[220,7137,7138,7140,7142],{"class":222,"line":691},[220,7139,2567],{"class":264},[220,7141,7090],{"class":346},[220,7143,359],{"class":264},[220,7145,7146,7148,7150],{"class":222,"line":696},[220,7147,402],{"class":264},[220,7149,347],{"class":346},[220,7151,359],{"class":264},[212,7153,7155],{"className":409,"code":7154,"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,7156,7157,7165,7174,7182,7186,7195,7212,7220,7242,7250,7258],{"__ignoreMap":178},[220,7158,7159,7161,7163],{"class":222,"line":223},[220,7160,343],{"class":264},[220,7162,347],{"class":420},[220,7164,359],{"class":264},[220,7166,7167,7169,7172],{"class":222,"line":179},[220,7168,1999],{"class":264},[220,7170,7171],{"class":609},"\u002F* Unaffected *\u002F",[220,7173,749],{"class":264},[220,7175,7176,7178,7180],{"class":222,"line":389},[220,7177,364],{"class":264},[220,7179,367],{"class":420},[220,7181,386],{"class":264},[220,7183,7184],{"class":222,"line":399},[220,7185,647],{"emptyLinePlaceholder":194},[220,7187,7188,7190,7193],{"class":222,"line":644},[220,7189,1999],{"class":264},[220,7191,7192],{"class":609},"\u002F* Nested effects apply only to Circle *\u002F",[220,7194,749],{"class":264},[220,7196,7197,7199,7201,7203,7205,7207,7210],{"class":222,"line":650},[220,7198,364],{"class":264},[220,7200,7090],{"class":420},[220,7202,6197],{"class":226},[220,7204,353],{"class":260},[220,7206,743],{"class":264},[220,7208,7209],{"class":420},"2",[220,7211,2335],{"class":264},[220,7213,7214,7216,7218],{"class":222,"line":656},[220,7215,2550],{"class":264},[220,7217,6220],{"class":420},[220,7219,359],{"class":264},[220,7221,7222,7224,7226,7228,7230,7232,7234,7236,7238,7240],{"class":222,"line":673},[220,7223,2813],{"class":264},[220,7225,2553],{"class":420},[220,7227,1588],{"class":226},[220,7229,353],{"class":260},[220,7231,2560],{"class":230},[220,7233,6197],{"class":226},[220,7235,353],{"class":260},[220,7237,743],{"class":264},[220,7239,6294],{"class":420},[220,7241,6297],{"class":264},[220,7243,7244,7246,7248],{"class":222,"line":682},[220,7245,2828],{"class":264},[220,7247,6220],{"class":420},[220,7249,359],{"class":264},[220,7251,7252,7254,7256],{"class":222,"line":691},[220,7253,2567],{"class":264},[220,7255,7090],{"class":420},[220,7257,359],{"class":264},[220,7259,7260,7262,7264],{"class":222,"line":696},[220,7261,402],{"class":264},[220,7263,347],{"class":420},[220,7265,359],{"class":264},[212,7267,7268],{"className":468,"code":7154,"language":469,"meta":178,"style":178},[99,7269,7270,7278,7286,7294,7298,7306,7322,7330,7352,7360,7368],{"__ignoreMap":178},[220,7271,7272,7274,7276],{"class":222,"line":223},[220,7273,343],{"class":264},[220,7275,347],{"class":420},[220,7277,359],{"class":264},[220,7279,7280,7282,7284],{"class":222,"line":179},[220,7281,1999],{"class":264},[220,7283,7171],{"class":609},[220,7285,749],{"class":264},[220,7287,7288,7290,7292],{"class":222,"line":389},[220,7289,364],{"class":264},[220,7291,367],{"class":420},[220,7293,386],{"class":264},[220,7295,7296],{"class":222,"line":399},[220,7297,647],{"emptyLinePlaceholder":194},[220,7299,7300,7302,7304],{"class":222,"line":644},[220,7301,1999],{"class":264},[220,7303,7192],{"class":609},[220,7305,749],{"class":264},[220,7307,7308,7310,7312,7314,7316,7318,7320],{"class":222,"line":650},[220,7309,364],{"class":264},[220,7311,7090],{"class":420},[220,7313,6197],{"class":226},[220,7315,353],{"class":260},[220,7317,743],{"class":264},[220,7319,7209],{"class":420},[220,7321,2335],{"class":264},[220,7323,7324,7326,7328],{"class":222,"line":656},[220,7325,2550],{"class":264},[220,7327,6220],{"class":420},[220,7329,359],{"class":264},[220,7331,7332,7334,7336,7338,7340,7342,7344,7346,7348,7350],{"class":222,"line":673},[220,7333,2813],{"class":264},[220,7335,2553],{"class":420},[220,7337,1588],{"class":226},[220,7339,353],{"class":260},[220,7341,2560],{"class":230},[220,7343,6197],{"class":226},[220,7345,353],{"class":260},[220,7347,743],{"class":264},[220,7349,6294],{"class":420},[220,7351,6297],{"class":264},[220,7353,7354,7356,7358],{"class":222,"line":682},[220,7355,2828],{"class":264},[220,7357,6220],{"class":420},[220,7359,359],{"class":264},[220,7361,7362,7364,7366],{"class":222,"line":691},[220,7363,2567],{"class":264},[220,7365,7090],{"class":420},[220,7367,359],{"class":264},[220,7369,7370,7372,7374],{"class":222,"line":696},[220,7371,402],{"class":264},[220,7373,347],{"class":420},[220,7375,359],{"class":264},[212,7377,7378],{"className":468,"code":7154,"language":469,"meta":178,"style":178},[99,7379,7380,7388,7396,7404,7408,7416,7432,7440,7462,7470,7478],{"__ignoreMap":178},[220,7381,7382,7384,7386],{"class":222,"line":223},[220,7383,343],{"class":264},[220,7385,347],{"class":420},[220,7387,359],{"class":264},[220,7389,7390,7392,7394],{"class":222,"line":179},[220,7391,1999],{"class":264},[220,7393,7171],{"class":609},[220,7395,749],{"class":264},[220,7397,7398,7400,7402],{"class":222,"line":389},[220,7399,364],{"class":264},[220,7401,367],{"class":420},[220,7403,386],{"class":264},[220,7405,7406],{"class":222,"line":399},[220,7407,647],{"emptyLinePlaceholder":194},[220,7409,7410,7412,7414],{"class":222,"line":644},[220,7411,1999],{"class":264},[220,7413,7192],{"class":609},[220,7415,749],{"class":264},[220,7417,7418,7420,7422,7424,7426,7428,7430],{"class":222,"line":650},[220,7419,364],{"class":264},[220,7421,7090],{"class":420},[220,7423,6197],{"class":226},[220,7425,353],{"class":260},[220,7427,743],{"class":264},[220,7429,7209],{"class":420},[220,7431,2335],{"class":264},[220,7433,7434,7436,7438],{"class":222,"line":656},[220,7435,2550],{"class":264},[220,7437,6220],{"class":420},[220,7439,359],{"class":264},[220,7441,7442,7444,7446,7448,7450,7452,7454,7456,7458,7460],{"class":222,"line":673},[220,7443,2813],{"class":264},[220,7445,2553],{"class":420},[220,7447,1588],{"class":226},[220,7449,353],{"class":260},[220,7451,2560],{"class":230},[220,7453,6197],{"class":226},[220,7455,353],{"class":260},[220,7457,743],{"class":264},[220,7459,6294],{"class":420},[220,7461,6297],{"class":264},[220,7463,7464,7466,7468],{"class":222,"line":682},[220,7465,2828],{"class":264},[220,7467,6220],{"class":420},[220,7469,359],{"class":264},[220,7471,7472,7474,7476],{"class":222,"line":691},[220,7473,2567],{"class":264},[220,7475,7090],{"class":420},[220,7477,359],{"class":264},[220,7479,7480,7482,7484],{"class":222,"line":696},[220,7481,402],{"class":264},[220,7483,347],{"class":420},[220,7485,359],{"class":264},[212,7487,7489],{"className":251,"code":7488,"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,7490,7491,7505,7509,7514,7522,7527,7542,7550,7567,7572,7576,7580],{"__ignoreMap":178},[220,7492,7493,7495,7497,7499,7501,7503],{"class":222,"line":223},[220,7494,1735],{"class":260},[220,7496,1738],{"class":420},[220,7498,1741],{"class":260},[220,7500,1744],{"class":260},[220,7502,1747],{"class":226},[220,7504,1750],{"class":264},[220,7506,7507],{"class":222,"line":179},[220,7508,1765],{"class":264},[220,7510,7511],{"class":222,"line":389},[220,7512,7513],{"class":609}," \u002F\u002F Unaffected\n",[220,7515,7516,7518,7520],{"class":222,"line":399},[220,7517,1770],{"class":264},[220,7519,2462],{"class":230},[220,7521,6543],{"class":264},[220,7523,7524],{"class":222,"line":644},[220,7525,7526],{"class":609}," \u002F\u002F Nested effects apply only to Circle\n",[220,7528,7529,7531,7534,7537,7539],{"class":222,"line":650},[220,7530,1770],{"class":264},[220,7532,7533],{"class":230},"'GridDistortion'",[220,7535,7536],{"class":264},", props: { radius: ",[220,7538,7209],{"class":420},[220,7540,7541],{"class":264}," }, children: [\n",[220,7543,7544,7546,7548],{"class":222,"line":656},[220,7545,7009],{"class":264},[220,7547,6578],{"class":230},[220,7549,7004],{"class":264},[220,7551,7552,7555,7557,7559,7561,7563,7565],{"class":222,"line":673},[220,7553,7554],{"class":264}," { type: ",[220,7556,3206],{"class":230},[220,7558,1776],{"class":264},[220,7560,3217],{"class":230},[220,7562,6561],{"class":264},[220,7564,6294],{"class":420},[220,7566,1782],{"class":264},[220,7568,7569],{"class":222,"line":682},[220,7570,7571],{"class":264}," ]}\n",[220,7573,7574],{"class":222,"line":691},[220,7575,7026],{"class":264},[220,7577,7578],{"class":222,"line":696},[220,7579,1787],{"class":264},[220,7581,7582],{"class":222,"line":702},[220,7583,1792],{"class":264},[19,7585],{":preset":7586},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1504,7588,7589],{},"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":7591},[7592,7593],{"id":6137,"depth":179,"text":6138},{"id":6594,"depth":179,"text":6595},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1482,"description":7594},"docs\u002Fguide\u002F2.composing-effects","8iGEh0rUsm94EkWDy_CXuYFrlYCqmsE45V-2nLvIP4A",{"id":7601,"title":7602,"body":7603,"category":10227,"description":10228,"exclude":190,"extension":191,"forceFramework":190,"icon":10229,"meta":10230,"navigation":194,"path":10231,"seo":10232,"stem":10233,"__hash__":10234},"guide\u002Fdocs\u002Fguide\u002F3.blending-masking.md","Blending & Masking",{"type":8,"value":7604,"toc":10217},[7605,7608,7611,7615,7626,7969,7972,7977,8072,8076,8079,8654,8657,8660,8674,8989,8992,8995,8999,9010,9031,9042,9046,9061,9067,9476,9479,9484,9488,9495,9529,10212,10215],[11,7606,7602],{"id":7607},"blending-masking",[15,7609,7610],{},"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,7612,7614],{"id":7613},"blend-modes","Blend Modes",[15,7616,7617,7618,7621,7622,7625],{},"Every component has a ",[99,7619,7620],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[99,7623,7624],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[246,7627,7628,7695,7768,7838,7908],{":tabs":1557},[212,7629,7631],{"className":334,"code":7630,"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,7632,7633,7641,7649,7653,7658,7687],{"__ignoreMap":178},[220,7634,7635,7637,7639],{"class":222,"line":223},[220,7636,343],{"class":264},[220,7638,347],{"class":346},[220,7640,359],{"class":264},[220,7642,7643,7645,7647],{"class":222,"line":179},[220,7644,364],{"class":264},[220,7646,367],{"class":346},[220,7648,386],{"class":264},[220,7650,7651],{"class":222,"line":389},[220,7652,647],{"emptyLinePlaceholder":194},[220,7654,7655],{"class":222,"line":399},[220,7656,7657],{"class":609}," \u003C!-- Multiply darkens by multiplying colors -->\n",[220,7659,7660,7662,7664,7666,7668,7670,7672,7674,7677,7680,7682,7685],{"class":222,"line":644},[220,7661,364],{"class":264},[220,7663,2553],{"class":346},[220,7665,1588],{"class":226},[220,7667,353],{"class":264},[220,7669,2560],{"class":230},[220,7671,6197],{"class":226},[220,7673,353],{"class":264},[220,7675,7676],{"class":230},"\"0.5\"",[220,7678,7679],{"class":226}," blendMode",[220,7681,353],{"class":264},[220,7683,7684],{"class":230},"\"multiply\"",[220,7686,386],{"class":264},[220,7688,7689,7691,7693],{"class":222,"line":650},[220,7690,402],{"class":264},[220,7692,347],{"class":346},[220,7694,359],{"class":264},[212,7696,7698],{"className":409,"code":7697,"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,7699,7700,7708,7716,7720,7729,7760],{"__ignoreMap":178},[220,7701,7702,7704,7706],{"class":222,"line":223},[220,7703,343],{"class":264},[220,7705,347],{"class":420},[220,7707,359],{"class":264},[220,7709,7710,7712,7714],{"class":222,"line":179},[220,7711,364],{"class":264},[220,7713,367],{"class":420},[220,7715,386],{"class":264},[220,7717,7718],{"class":222,"line":389},[220,7719,647],{"emptyLinePlaceholder":194},[220,7721,7722,7724,7727],{"class":222,"line":399},[220,7723,1999],{"class":264},[220,7725,7726],{"class":609},"\u002F* Multiply darkens by multiplying colors *\u002F",[220,7728,749],{"class":264},[220,7730,7731,7733,7735,7737,7739,7741,7743,7745,7747,7750,7752,7754,7756,7758],{"class":222,"line":644},[220,7732,364],{"class":264},[220,7734,2553],{"class":420},[220,7736,1588],{"class":226},[220,7738,353],{"class":260},[220,7740,2560],{"class":230},[220,7742,6197],{"class":226},[220,7744,353],{"class":260},[220,7746,743],{"class":264},[220,7748,7749],{"class":420},"0.5",[220,7751,2914],{"class":264},[220,7753,7620],{"class":226},[220,7755,353],{"class":260},[220,7757,7684],{"class":230},[220,7759,386],{"class":264},[220,7761,7762,7764,7766],{"class":222,"line":650},[220,7763,402],{"class":264},[220,7765,347],{"class":420},[220,7767,359],{"class":264},[212,7769,7770],{"className":468,"code":7697,"language":469,"meta":178,"style":178},[99,7771,7772,7780,7788,7792,7800,7830],{"__ignoreMap":178},[220,7773,7774,7776,7778],{"class":222,"line":223},[220,7775,343],{"class":264},[220,7777,347],{"class":420},[220,7779,359],{"class":264},[220,7781,7782,7784,7786],{"class":222,"line":179},[220,7783,364],{"class":264},[220,7785,367],{"class":420},[220,7787,386],{"class":264},[220,7789,7790],{"class":222,"line":389},[220,7791,647],{"emptyLinePlaceholder":194},[220,7793,7794,7796,7798],{"class":222,"line":399},[220,7795,1999],{"class":264},[220,7797,7726],{"class":609},[220,7799,749],{"class":264},[220,7801,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828],{"class":222,"line":644},[220,7803,364],{"class":264},[220,7805,2553],{"class":420},[220,7807,1588],{"class":226},[220,7809,353],{"class":260},[220,7811,2560],{"class":230},[220,7813,6197],{"class":226},[220,7815,353],{"class":260},[220,7817,743],{"class":264},[220,7819,7749],{"class":420},[220,7821,2914],{"class":264},[220,7823,7620],{"class":226},[220,7825,353],{"class":260},[220,7827,7684],{"class":230},[220,7829,386],{"class":264},[220,7831,7832,7834,7836],{"class":222,"line":650},[220,7833,402],{"class":264},[220,7835,347],{"class":420},[220,7837,359],{"class":264},[212,7839,7840],{"className":468,"code":7697,"language":469,"meta":178,"style":178},[99,7841,7842,7850,7858,7862,7870,7900],{"__ignoreMap":178},[220,7843,7844,7846,7848],{"class":222,"line":223},[220,7845,343],{"class":264},[220,7847,347],{"class":420},[220,7849,359],{"class":264},[220,7851,7852,7854,7856],{"class":222,"line":179},[220,7853,364],{"class":264},[220,7855,367],{"class":420},[220,7857,386],{"class":264},[220,7859,7860],{"class":222,"line":389},[220,7861,647],{"emptyLinePlaceholder":194},[220,7863,7864,7866,7868],{"class":222,"line":399},[220,7865,1999],{"class":264},[220,7867,7726],{"class":609},[220,7869,749],{"class":264},[220,7871,7872,7874,7876,7878,7880,7882,7884,7886,7888,7890,7892,7894,7896,7898],{"class":222,"line":644},[220,7873,364],{"class":264},[220,7875,2553],{"class":420},[220,7877,1588],{"class":226},[220,7879,353],{"class":260},[220,7881,2560],{"class":230},[220,7883,6197],{"class":226},[220,7885,353],{"class":260},[220,7887,743],{"class":264},[220,7889,7749],{"class":420},[220,7891,2914],{"class":264},[220,7893,7620],{"class":226},[220,7895,353],{"class":260},[220,7897,7684],{"class":230},[220,7899,386],{"class":264},[220,7901,7902,7904,7906],{"class":222,"line":650},[220,7903,402],{"class":264},[220,7905,347],{"class":420},[220,7907,359],{"class":264},[212,7909,7911],{"className":251,"code":7910,"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,7912,7913,7927,7931,7939,7961,7965],{"__ignoreMap":178},[220,7914,7915,7917,7919,7921,7923,7925],{"class":222,"line":223},[220,7916,1735],{"class":260},[220,7918,1738],{"class":420},[220,7920,1741],{"class":260},[220,7922,1744],{"class":260},[220,7924,1747],{"class":226},[220,7926,1750],{"class":264},[220,7928,7929],{"class":222,"line":179},[220,7930,1765],{"class":264},[220,7932,7933,7935,7937],{"class":222,"line":389},[220,7934,1770],{"class":264},[220,7936,2462],{"class":230},[220,7938,6543],{"class":264},[220,7940,7941,7943,7945,7947,7949,7951,7953,7956,7959],{"class":222,"line":399},[220,7942,1770],{"class":264},[220,7944,3206],{"class":230},[220,7946,1776],{"class":264},[220,7948,3217],{"class":230},[220,7950,6561],{"class":264},[220,7952,7749],{"class":420},[220,7954,7955],{"class":264},", blendMode: ",[220,7957,7958],{"class":230},"'multiply'",[220,7960,1782],{"class":264},[220,7962,7963],{"class":222,"line":644},[220,7964,1787],{"class":264},[220,7966,7967],{"class":222,"line":650},[220,7968,1792],{"class":264},[19,7970],{":preset":7971},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,7973,7974],{},[159,7975,7976],{},"Available blend modes:",[34,7978,7979,7986,8003,8019,8033,8044,8061],{},[37,7980,7981,4596,7984],{},[159,7982,7983],{},"Basic",[99,7985,7624],{},[37,7987,7988,4596,7991,1895,7994,1895,7997,1895,8000],{},[159,7989,7990],{},"Darkening",[99,7992,7993],{},"multiply",[99,7995,7996],{},"darken",[99,7998,7999],{},"colorBurn",[99,8001,8002],{},"linearBurn",[37,8004,8005,4596,8008,1895,8011,1895,8014,1895,8017],{},[159,8006,8007],{},"Lightening",[99,8009,8010],{},"screen",[99,8012,8013],{},"lighten",[99,8015,8016],{},"colorDodge",[99,8018,1924],{},[37,8020,8021,4596,8024,1895,8027,1895,8030],{},[159,8022,8023],{},"Contrast",[99,8025,8026],{},"overlay",[99,8028,8029],{},"softLight",[99,8031,8032],{},"hardLight",[37,8034,8035,4596,8038,1895,8041],{},[159,8036,8037],{},"Difference",[99,8039,8040],{},"difference",[99,8042,8043],{},"exclusion",[37,8045,8046,4596,8049,1895,8052,1895,8055,1895,8058],{},[159,8047,8048],{},"Color",[99,8050,8051],{},"hue",[99,8053,8054],{},"saturation",[99,8056,8057],{},"color",[99,8059,8060],{},"luminosity",[37,8062,8063,4596,8066,1895,8069],{},[159,8064,8065],{},"Color Space Blending",[99,8067,8068],{},"normal-oklab",[99,8070,8071],{},"normal-oklch",[3262,8073,8075],{"id":8074},"combining-blend-modes","Combining Blend Modes",[15,8077,8078],{},"Use different blend modes on multiple layers to create complex interactions:",[246,8080,8081,8186,8313,8433,8553],{":tabs":1557},[212,8082,8084],{"className":334,"code":8083,"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,8085,8086,8094,8102,8106,8143,8178],{"__ignoreMap":178},[220,8087,8088,8090,8092],{"class":222,"line":223},[220,8089,343],{"class":264},[220,8091,347],{"class":346},[220,8093,359],{"class":264},[220,8095,8096,8098,8100],{"class":222,"line":179},[220,8097,364],{"class":264},[220,8099,367],{"class":346},[220,8101,386],{"class":264},[220,8103,8104],{"class":222,"line":389},[220,8105,647],{"emptyLinePlaceholder":194},[220,8107,8108,8110,8112,8114,8116,8119,8121,8123,8126,8129,8131,8134,8136,8138,8141],{"class":222,"line":399},[220,8109,364],{"class":264},[220,8111,2553],{"class":346},[220,8113,1588],{"class":226},[220,8115,353],{"class":264},[220,8117,8118],{"class":230},"\"#00ffff\"",[220,8120,6197],{"class":226},[220,8122,353],{"class":264},[220,8124,8125],{"class":230},"\"0.6\"",[220,8127,8128],{"class":226}," :center",[220,8130,353],{"class":264},[220,8132,8133],{"class":230},"\"{ x: 0.4, y: 0.5 }\"",[220,8135,7679],{"class":226},[220,8137,353],{"class":264},[220,8139,8140],{"class":230},"\"screen\"",[220,8142,386],{"class":264},[220,8144,8145,8147,8149,8151,8153,8156,8158,8160,8162,8164,8166,8169,8171,8173,8176],{"class":222,"line":644},[220,8146,364],{"class":264},[220,8148,2553],{"class":346},[220,8150,1588],{"class":226},[220,8152,353],{"class":264},[220,8154,8155],{"class":230},"\"#ff00ff\"",[220,8157,6197],{"class":226},[220,8159,353],{"class":264},[220,8161,8125],{"class":230},[220,8163,8128],{"class":226},[220,8165,353],{"class":264},[220,8167,8168],{"class":230},"\"{ x: 0.6, y: 0.5 }\"",[220,8170,7679],{"class":226},[220,8172,353],{"class":264},[220,8174,8175],{"class":230},"\"difference\"",[220,8177,386],{"class":264},[220,8179,8180,8182,8184],{"class":222,"line":650},[220,8181,402],{"class":264},[220,8183,347],{"class":346},[220,8185,359],{"class":264},[212,8187,8189],{"className":409,"code":8188,"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,8190,8191,8199,8207,8211,8261,8305],{"__ignoreMap":178},[220,8192,8193,8195,8197],{"class":222,"line":223},[220,8194,343],{"class":264},[220,8196,347],{"class":420},[220,8198,359],{"class":264},[220,8200,8201,8203,8205],{"class":222,"line":179},[220,8202,364],{"class":264},[220,8204,367],{"class":420},[220,8206,386],{"class":264},[220,8208,8209],{"class":222,"line":389},[220,8210,647],{"emptyLinePlaceholder":194},[220,8212,8213,8215,8217,8219,8221,8223,8225,8227,8229,8232,8234,8237,8239,8242,8245,8248,8250,8253,8255,8257,8259],{"class":222,"line":399},[220,8214,364],{"class":264},[220,8216,2553],{"class":420},[220,8218,1588],{"class":226},[220,8220,353],{"class":260},[220,8222,8118],{"class":230},[220,8224,6197],{"class":226},[220,8226,353],{"class":260},[220,8228,743],{"class":264},[220,8230,8231],{"class":420},"0.6",[220,8233,2914],{"class":264},[220,8235,8236],{"class":226},"center",[220,8238,353],{"class":260},[220,8240,8241],{"class":264},"{{ x: ",[220,8243,8244],{"class":420},"0.4",[220,8246,8247],{"class":264},", y: ",[220,8249,7749],{"class":420},[220,8251,8252],{"class":264}," }} ",[220,8254,7620],{"class":226},[220,8256,353],{"class":260},[220,8258,8140],{"class":230},[220,8260,386],{"class":264},[220,8262,8263,8265,8267,8269,8271,8273,8275,8277,8279,8281,8283,8285,8287,8289,8291,8293,8295,8297,8299,8301,8303],{"class":222,"line":644},[220,8264,364],{"class":264},[220,8266,2553],{"class":420},[220,8268,1588],{"class":226},[220,8270,353],{"class":260},[220,8272,8155],{"class":230},[220,8274,6197],{"class":226},[220,8276,353],{"class":260},[220,8278,743],{"class":264},[220,8280,8231],{"class":420},[220,8282,2914],{"class":264},[220,8284,8236],{"class":226},[220,8286,353],{"class":260},[220,8288,8241],{"class":264},[220,8290,8231],{"class":420},[220,8292,8247],{"class":264},[220,8294,7749],{"class":420},[220,8296,8252],{"class":264},[220,8298,7620],{"class":226},[220,8300,353],{"class":260},[220,8302,8175],{"class":230},[220,8304,386],{"class":264},[220,8306,8307,8309,8311],{"class":222,"line":650},[220,8308,402],{"class":264},[220,8310,347],{"class":420},[220,8312,359],{"class":264},[212,8314,8315],{"className":468,"code":8188,"language":469,"meta":178,"style":178},[99,8316,8317,8325,8333,8337,8381,8425],{"__ignoreMap":178},[220,8318,8319,8321,8323],{"class":222,"line":223},[220,8320,343],{"class":264},[220,8322,347],{"class":420},[220,8324,359],{"class":264},[220,8326,8327,8329,8331],{"class":222,"line":179},[220,8328,364],{"class":264},[220,8330,367],{"class":420},[220,8332,386],{"class":264},[220,8334,8335],{"class":222,"line":389},[220,8336,647],{"emptyLinePlaceholder":194},[220,8338,8339,8341,8343,8345,8347,8349,8351,8353,8355,8357,8359,8361,8363,8365,8367,8369,8371,8373,8375,8377,8379],{"class":222,"line":399},[220,8340,364],{"class":264},[220,8342,2553],{"class":420},[220,8344,1588],{"class":226},[220,8346,353],{"class":260},[220,8348,8118],{"class":230},[220,8350,6197],{"class":226},[220,8352,353],{"class":260},[220,8354,743],{"class":264},[220,8356,8231],{"class":420},[220,8358,2914],{"class":264},[220,8360,8236],{"class":226},[220,8362,353],{"class":260},[220,8364,8241],{"class":264},[220,8366,8244],{"class":420},[220,8368,8247],{"class":264},[220,8370,7749],{"class":420},[220,8372,8252],{"class":264},[220,8374,7620],{"class":226},[220,8376,353],{"class":260},[220,8378,8140],{"class":230},[220,8380,386],{"class":264},[220,8382,8383,8385,8387,8389,8391,8393,8395,8397,8399,8401,8403,8405,8407,8409,8411,8413,8415,8417,8419,8421,8423],{"class":222,"line":644},[220,8384,364],{"class":264},[220,8386,2553],{"class":420},[220,8388,1588],{"class":226},[220,8390,353],{"class":260},[220,8392,8155],{"class":230},[220,8394,6197],{"class":226},[220,8396,353],{"class":260},[220,8398,743],{"class":264},[220,8400,8231],{"class":420},[220,8402,2914],{"class":264},[220,8404,8236],{"class":226},[220,8406,353],{"class":260},[220,8408,8241],{"class":264},[220,8410,8231],{"class":420},[220,8412,8247],{"class":264},[220,8414,7749],{"class":420},[220,8416,8252],{"class":264},[220,8418,7620],{"class":226},[220,8420,353],{"class":260},[220,8422,8175],{"class":230},[220,8424,386],{"class":264},[220,8426,8427,8429,8431],{"class":222,"line":650},[220,8428,402],{"class":264},[220,8430,347],{"class":420},[220,8432,359],{"class":264},[212,8434,8435],{"className":468,"code":8188,"language":469,"meta":178,"style":178},[99,8436,8437,8445,8453,8457,8501,8545],{"__ignoreMap":178},[220,8438,8439,8441,8443],{"class":222,"line":223},[220,8440,343],{"class":264},[220,8442,347],{"class":420},[220,8444,359],{"class":264},[220,8446,8447,8449,8451],{"class":222,"line":179},[220,8448,364],{"class":264},[220,8450,367],{"class":420},[220,8452,386],{"class":264},[220,8454,8455],{"class":222,"line":389},[220,8456,647],{"emptyLinePlaceholder":194},[220,8458,8459,8461,8463,8465,8467,8469,8471,8473,8475,8477,8479,8481,8483,8485,8487,8489,8491,8493,8495,8497,8499],{"class":222,"line":399},[220,8460,364],{"class":264},[220,8462,2553],{"class":420},[220,8464,1588],{"class":226},[220,8466,353],{"class":260},[220,8468,8118],{"class":230},[220,8470,6197],{"class":226},[220,8472,353],{"class":260},[220,8474,743],{"class":264},[220,8476,8231],{"class":420},[220,8478,2914],{"class":264},[220,8480,8236],{"class":226},[220,8482,353],{"class":260},[220,8484,8241],{"class":264},[220,8486,8244],{"class":420},[220,8488,8247],{"class":264},[220,8490,7749],{"class":420},[220,8492,8252],{"class":264},[220,8494,7620],{"class":226},[220,8496,353],{"class":260},[220,8498,8140],{"class":230},[220,8500,386],{"class":264},[220,8502,8503,8505,8507,8509,8511,8513,8515,8517,8519,8521,8523,8525,8527,8529,8531,8533,8535,8537,8539,8541,8543],{"class":222,"line":644},[220,8504,364],{"class":264},[220,8506,2553],{"class":420},[220,8508,1588],{"class":226},[220,8510,353],{"class":260},[220,8512,8155],{"class":230},[220,8514,6197],{"class":226},[220,8516,353],{"class":260},[220,8518,743],{"class":264},[220,8520,8231],{"class":420},[220,8522,2914],{"class":264},[220,8524,8236],{"class":226},[220,8526,353],{"class":260},[220,8528,8241],{"class":264},[220,8530,8231],{"class":420},[220,8532,8247],{"class":264},[220,8534,7749],{"class":420},[220,8536,8252],{"class":264},[220,8538,7620],{"class":226},[220,8540,353],{"class":260},[220,8542,8175],{"class":230},[220,8544,386],{"class":264},[220,8546,8547,8549,8551],{"class":222,"line":650},[220,8548,402],{"class":264},[220,8550,347],{"class":420},[220,8552,359],{"class":264},[212,8554,8556],{"className":251,"code":8555,"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,8557,8558,8572,8576,8584,8616,8646,8650],{"__ignoreMap":178},[220,8559,8560,8562,8564,8566,8568,8570],{"class":222,"line":223},[220,8561,1735],{"class":260},[220,8563,1738],{"class":420},[220,8565,1741],{"class":260},[220,8567,1744],{"class":260},[220,8569,1747],{"class":226},[220,8571,1750],{"class":264},[220,8573,8574],{"class":222,"line":179},[220,8575,1765],{"class":264},[220,8577,8578,8580,8582],{"class":222,"line":389},[220,8579,1770],{"class":264},[220,8581,2462],{"class":230},[220,8583,6543],{"class":264},[220,8585,8586,8588,8590,8592,8595,8597,8599,8602,8604,8606,8608,8611,8614],{"class":222,"line":399},[220,8587,1770],{"class":264},[220,8589,3206],{"class":230},[220,8591,1776],{"class":264},[220,8593,8594],{"class":230},"'#00ffff'",[220,8596,6561],{"class":264},[220,8598,8231],{"class":420},[220,8600,8601],{"class":264},", center: { x: ",[220,8603,8244],{"class":420},[220,8605,8247],{"class":264},[220,8607,7749],{"class":420},[220,8609,8610],{"class":264}," }, blendMode: ",[220,8612,8613],{"class":230},"'screen'",[220,8615,6566],{"class":264},[220,8617,8618,8620,8622,8624,8627,8629,8631,8633,8635,8637,8639,8641,8644],{"class":222,"line":644},[220,8619,1770],{"class":264},[220,8621,3206],{"class":230},[220,8623,1776],{"class":264},[220,8625,8626],{"class":230},"'#ff00ff'",[220,8628,6561],{"class":264},[220,8630,8231],{"class":420},[220,8632,8601],{"class":264},[220,8634,8231],{"class":420},[220,8636,8247],{"class":264},[220,8638,7749],{"class":420},[220,8640,8610],{"class":264},[220,8642,8643],{"class":230},"'difference'",[220,8645,1782],{"class":264},[220,8647,8648],{"class":222,"line":650},[220,8649,1787],{"class":264},[220,8651,8652],{"class":222,"line":656},[220,8653,1792],{"class":264},[19,8655],{":preset":8656},"{\"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,8658,8659],{"id":2921},"Opacity",[15,8661,8662,8663,8665,8666,8669,8670,8673],{},"Control layer transparency with the ",[99,8664,2921],{}," prop. Values range from ",[99,8667,8668],{},"0"," (fully transparent) to ",[99,8671,8672],{},"1"," (fully opaque):",[246,8675,8676,8736,8801,8865,8929],{":tabs":1557},[212,8677,8679],{"className":334,"code":8678,"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,8680,8681,8689,8697,8701,8728],{"__ignoreMap":178},[220,8682,8683,8685,8687],{"class":222,"line":223},[220,8684,343],{"class":264},[220,8686,347],{"class":346},[220,8688,359],{"class":264},[220,8690,8691,8693,8695],{"class":222,"line":179},[220,8692,364],{"class":264},[220,8694,367],{"class":346},[220,8696,386],{"class":264},[220,8698,8699],{"class":222,"line":389},[220,8700,647],{"emptyLinePlaceholder":194},[220,8702,8703,8705,8707,8709,8711,8713,8715,8717,8719,8722,8724,8726],{"class":222,"line":399},[220,8704,364],{"class":264},[220,8706,2553],{"class":346},[220,8708,1588],{"class":226},[220,8710,353],{"class":264},[220,8712,2560],{"class":230},[220,8714,6197],{"class":226},[220,8716,353],{"class":264},[220,8718,6202],{"class":230},[220,8720,8721],{"class":226}," opacity",[220,8723,353],{"class":264},[220,8725,7676],{"class":230},[220,8727,386],{"class":264},[220,8729,8730,8732,8734],{"class":222,"line":644},[220,8731,402],{"class":264},[220,8733,347],{"class":346},[220,8735,359],{"class":264},[212,8737,8739],{"className":409,"code":8738,"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,8740,8741,8749,8757,8761,8793],{"__ignoreMap":178},[220,8742,8743,8745,8747],{"class":222,"line":223},[220,8744,343],{"class":264},[220,8746,347],{"class":420},[220,8748,359],{"class":264},[220,8750,8751,8753,8755],{"class":222,"line":179},[220,8752,364],{"class":264},[220,8754,367],{"class":420},[220,8756,386],{"class":264},[220,8758,8759],{"class":222,"line":389},[220,8760,647],{"emptyLinePlaceholder":194},[220,8762,8763,8765,8767,8769,8771,8773,8775,8777,8779,8781,8783,8785,8787,8789,8791],{"class":222,"line":399},[220,8764,364],{"class":264},[220,8766,2553],{"class":420},[220,8768,1588],{"class":226},[220,8770,353],{"class":260},[220,8772,2560],{"class":230},[220,8774,6197],{"class":226},[220,8776,353],{"class":260},[220,8778,743],{"class":264},[220,8780,6294],{"class":420},[220,8782,2914],{"class":264},[220,8784,2921],{"class":226},[220,8786,353],{"class":260},[220,8788,743],{"class":264},[220,8790,7749],{"class":420},[220,8792,6297],{"class":264},[220,8794,8795,8797,8799],{"class":222,"line":644},[220,8796,402],{"class":264},[220,8798,347],{"class":420},[220,8800,359],{"class":264},[212,8802,8803],{"className":468,"code":8738,"language":469,"meta":178,"style":178},[99,8804,8805,8813,8821,8825,8857],{"__ignoreMap":178},[220,8806,8807,8809,8811],{"class":222,"line":223},[220,8808,343],{"class":264},[220,8810,347],{"class":420},[220,8812,359],{"class":264},[220,8814,8815,8817,8819],{"class":222,"line":179},[220,8816,364],{"class":264},[220,8818,367],{"class":420},[220,8820,386],{"class":264},[220,8822,8823],{"class":222,"line":389},[220,8824,647],{"emptyLinePlaceholder":194},[220,8826,8827,8829,8831,8833,8835,8837,8839,8841,8843,8845,8847,8849,8851,8853,8855],{"class":222,"line":399},[220,8828,364],{"class":264},[220,8830,2553],{"class":420},[220,8832,1588],{"class":226},[220,8834,353],{"class":260},[220,8836,2560],{"class":230},[220,8838,6197],{"class":226},[220,8840,353],{"class":260},[220,8842,743],{"class":264},[220,8844,6294],{"class":420},[220,8846,2914],{"class":264},[220,8848,2921],{"class":226},[220,8850,353],{"class":260},[220,8852,743],{"class":264},[220,8854,7749],{"class":420},[220,8856,6297],{"class":264},[220,8858,8859,8861,8863],{"class":222,"line":644},[220,8860,402],{"class":264},[220,8862,347],{"class":420},[220,8864,359],{"class":264},[212,8866,8867],{"className":468,"code":8738,"language":469,"meta":178,"style":178},[99,8868,8869,8877,8885,8889,8921],{"__ignoreMap":178},[220,8870,8871,8873,8875],{"class":222,"line":223},[220,8872,343],{"class":264},[220,8874,347],{"class":420},[220,8876,359],{"class":264},[220,8878,8879,8881,8883],{"class":222,"line":179},[220,8880,364],{"class":264},[220,8882,367],{"class":420},[220,8884,386],{"class":264},[220,8886,8887],{"class":222,"line":389},[220,8888,647],{"emptyLinePlaceholder":194},[220,8890,8891,8893,8895,8897,8899,8901,8903,8905,8907,8909,8911,8913,8915,8917,8919],{"class":222,"line":399},[220,8892,364],{"class":264},[220,8894,2553],{"class":420},[220,8896,1588],{"class":226},[220,8898,353],{"class":260},[220,8900,2560],{"class":230},[220,8902,6197],{"class":226},[220,8904,353],{"class":260},[220,8906,743],{"class":264},[220,8908,6294],{"class":420},[220,8910,2914],{"class":264},[220,8912,2921],{"class":226},[220,8914,353],{"class":260},[220,8916,743],{"class":264},[220,8918,7749],{"class":420},[220,8920,6297],{"class":264},[220,8922,8923,8925,8927],{"class":222,"line":644},[220,8924,402],{"class":264},[220,8926,347],{"class":420},[220,8928,359],{"class":264},[212,8930,8932],{"className":251,"code":8931,"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,8933,8934,8948,8952,8960,8981,8985],{"__ignoreMap":178},[220,8935,8936,8938,8940,8942,8944,8946],{"class":222,"line":223},[220,8937,1735],{"class":260},[220,8939,1738],{"class":420},[220,8941,1741],{"class":260},[220,8943,1744],{"class":260},[220,8945,1747],{"class":226},[220,8947,1750],{"class":264},[220,8949,8950],{"class":222,"line":179},[220,8951,1765],{"class":264},[220,8953,8954,8956,8958],{"class":222,"line":389},[220,8955,1770],{"class":264},[220,8957,2462],{"class":230},[220,8959,6543],{"class":264},[220,8961,8962,8964,8966,8968,8970,8972,8974,8977,8979],{"class":222,"line":399},[220,8963,1770],{"class":264},[220,8965,3206],{"class":230},[220,8967,1776],{"class":264},[220,8969,3217],{"class":230},[220,8971,6561],{"class":264},[220,8973,6294],{"class":420},[220,8975,8976],{"class":264},", opacity: ",[220,8978,7749],{"class":420},[220,8980,1782],{"class":264},[220,8982,8983],{"class":222,"line":644},[220,8984,1787],{"class":264},[220,8986,8987],{"class":222,"line":650},[220,8988,1792],{"class":264},[19,8990],{":preset":8991},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,8993,8994],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,8996,8998],{"id":8997},"visibility","Visibility",[15,9000,7617,9001,9003,9004,9006,9007,9009],{},[99,9002,2711],{}," prop that defaults to ",[99,9005,2332],{},". Setting it to ",[99,9008,2629],{}," completely removes the component from the composition, as if it wasn't there at all:",[212,9011,9013],{"className":409,"code":9012,"language":411,"meta":178,"style":178},"\u003CCircle visible={false} \u002F>\n",[99,9014,9015],{"__ignoreMap":178},[220,9016,9017,9019,9021,9023,9025,9027,9029],{"class":222,"line":223},[220,9018,343],{"class":264},[220,9020,2553],{"class":420},[220,9022,2618],{"class":226},[220,9024,353],{"class":260},[220,9026,743],{"class":264},[220,9028,2629],{"class":420},[220,9030,6297],{"class":264},[15,9032,9033,9034,9037,9038,9041],{},"This is different from ",[99,9035,9036],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[99,9039,9040],{},"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,9043,9045],{"id":9044},"masking","Masking",[15,9047,9048,9049,9052,9053,9056,9057,9060],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[99,9050,9051],{},"id"," property (",[99,9054,9055],{},"string",") and then set ",[99,9058,9059],{},"maskSource"," to that ID on another component to use it as a mask.",[15,9062,9063,9064,9066],{},"Masks typically have ",[99,9065,9040],{}," so they don't appear in the final output—they only control visibility of other components:",[246,9068,9069,9149,9238,9324,9410],{":tabs":1557},[212,9070,9072],{"className":334,"code":9071,"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,9073,9074,9082,9087,9117,9121,9126,9141],{"__ignoreMap":178},[220,9075,9076,9078,9080],{"class":222,"line":223},[220,9077,343],{"class":264},[220,9079,347],{"class":346},[220,9081,359],{"class":264},[220,9083,9084],{"class":222,"line":179},[220,9085,9086],{"class":609}," \u003C!-- This circle acts as the mask -->\n",[220,9088,9089,9091,9093,9096,9098,9101,9103,9105,9107,9110,9112,9115],{"class":222,"line":389},[220,9090,364],{"class":264},[220,9092,2553],{"class":346},[220,9094,9095],{"class":226}," id",[220,9097,353],{"class":264},[220,9099,9100],{"class":230},"\"myMask\"",[220,9102,6197],{"class":226},[220,9104,353],{"class":264},[220,9106,6202],{"class":230},[220,9108,9109],{"class":226}," :visible",[220,9111,353],{"class":264},[220,9113,9114],{"class":230},"\"false\"",[220,9116,386],{"class":264},[220,9118,9119],{"class":222,"line":399},[220,9120,647],{"emptyLinePlaceholder":194},[220,9122,9123],{"class":222,"line":644},[220,9124,9125],{"class":609}," \u003C!-- This gradient is masked by the circle -->\n",[220,9127,9128,9130,9132,9135,9137,9139],{"class":222,"line":650},[220,9129,364],{"class":264},[220,9131,367],{"class":346},[220,9133,9134],{"class":226}," maskSource",[220,9136,353],{"class":264},[220,9138,9100],{"class":230},[220,9140,386],{"class":264},[220,9142,9143,9145,9147],{"class":222,"line":656},[220,9144,402],{"class":264},[220,9146,347],{"class":346},[220,9148,359],{"class":264},[212,9150,9152],{"className":409,"code":9151,"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,9153,9154,9162,9171,9203,9207,9216,9230],{"__ignoreMap":178},[220,9155,9156,9158,9160],{"class":222,"line":223},[220,9157,343],{"class":264},[220,9159,347],{"class":420},[220,9161,359],{"class":264},[220,9163,9164,9166,9169],{"class":222,"line":179},[220,9165,1999],{"class":264},[220,9167,9168],{"class":609},"\u002F* This circle acts as the mask *\u002F",[220,9170,749],{"class":264},[220,9172,9173,9175,9177,9179,9181,9183,9185,9187,9189,9191,9193,9195,9197,9199,9201],{"class":222,"line":389},[220,9174,364],{"class":264},[220,9176,2553],{"class":420},[220,9178,9095],{"class":226},[220,9180,353],{"class":260},[220,9182,9100],{"class":230},[220,9184,6197],{"class":226},[220,9186,353],{"class":260},[220,9188,743],{"class":264},[220,9190,6294],{"class":420},[220,9192,2914],{"class":264},[220,9194,2711],{"class":226},[220,9196,353],{"class":260},[220,9198,743],{"class":264},[220,9200,2629],{"class":420},[220,9202,6297],{"class":264},[220,9204,9205],{"class":222,"line":399},[220,9206,647],{"emptyLinePlaceholder":194},[220,9208,9209,9211,9214],{"class":222,"line":644},[220,9210,1999],{"class":264},[220,9212,9213],{"class":609},"\u002F* This gradient is masked by the circle *\u002F",[220,9215,749],{"class":264},[220,9217,9218,9220,9222,9224,9226,9228],{"class":222,"line":650},[220,9219,364],{"class":264},[220,9221,367],{"class":420},[220,9223,9134],{"class":226},[220,9225,353],{"class":260},[220,9227,9100],{"class":230},[220,9229,386],{"class":264},[220,9231,9232,9234,9236],{"class":222,"line":656},[220,9233,402],{"class":264},[220,9235,347],{"class":420},[220,9237,359],{"class":264},[212,9239,9240],{"className":468,"code":9151,"language":469,"meta":178,"style":178},[99,9241,9242,9250,9258,9290,9294,9302,9316],{"__ignoreMap":178},[220,9243,9244,9246,9248],{"class":222,"line":223},[220,9245,343],{"class":264},[220,9247,347],{"class":420},[220,9249,359],{"class":264},[220,9251,9252,9254,9256],{"class":222,"line":179},[220,9253,1999],{"class":264},[220,9255,9168],{"class":609},[220,9257,749],{"class":264},[220,9259,9260,9262,9264,9266,9268,9270,9272,9274,9276,9278,9280,9282,9284,9286,9288],{"class":222,"line":389},[220,9261,364],{"class":264},[220,9263,2553],{"class":420},[220,9265,9095],{"class":226},[220,9267,353],{"class":260},[220,9269,9100],{"class":230},[220,9271,6197],{"class":226},[220,9273,353],{"class":260},[220,9275,743],{"class":264},[220,9277,6294],{"class":420},[220,9279,2914],{"class":264},[220,9281,2711],{"class":226},[220,9283,353],{"class":260},[220,9285,743],{"class":264},[220,9287,2629],{"class":420},[220,9289,6297],{"class":264},[220,9291,9292],{"class":222,"line":399},[220,9293,647],{"emptyLinePlaceholder":194},[220,9295,9296,9298,9300],{"class":222,"line":644},[220,9297,1999],{"class":264},[220,9299,9213],{"class":609},[220,9301,749],{"class":264},[220,9303,9304,9306,9308,9310,9312,9314],{"class":222,"line":650},[220,9305,364],{"class":264},[220,9307,367],{"class":420},[220,9309,9134],{"class":226},[220,9311,353],{"class":260},[220,9313,9100],{"class":230},[220,9315,386],{"class":264},[220,9317,9318,9320,9322],{"class":222,"line":656},[220,9319,402],{"class":264},[220,9321,347],{"class":420},[220,9323,359],{"class":264},[212,9325,9326],{"className":468,"code":9151,"language":469,"meta":178,"style":178},[99,9327,9328,9336,9344,9376,9380,9388,9402],{"__ignoreMap":178},[220,9329,9330,9332,9334],{"class":222,"line":223},[220,9331,343],{"class":264},[220,9333,347],{"class":420},[220,9335,359],{"class":264},[220,9337,9338,9340,9342],{"class":222,"line":179},[220,9339,1999],{"class":264},[220,9341,9168],{"class":609},[220,9343,749],{"class":264},[220,9345,9346,9348,9350,9352,9354,9356,9358,9360,9362,9364,9366,9368,9370,9372,9374],{"class":222,"line":389},[220,9347,364],{"class":264},[220,9349,2553],{"class":420},[220,9351,9095],{"class":226},[220,9353,353],{"class":260},[220,9355,9100],{"class":230},[220,9357,6197],{"class":226},[220,9359,353],{"class":260},[220,9361,743],{"class":264},[220,9363,6294],{"class":420},[220,9365,2914],{"class":264},[220,9367,2711],{"class":226},[220,9369,353],{"class":260},[220,9371,743],{"class":264},[220,9373,2629],{"class":420},[220,9375,6297],{"class":264},[220,9377,9378],{"class":222,"line":399},[220,9379,647],{"emptyLinePlaceholder":194},[220,9381,9382,9384,9386],{"class":222,"line":644},[220,9383,1999],{"class":264},[220,9385,9213],{"class":609},[220,9387,749],{"class":264},[220,9389,9390,9392,9394,9396,9398,9400],{"class":222,"line":650},[220,9391,364],{"class":264},[220,9393,367],{"class":420},[220,9395,9134],{"class":226},[220,9397,353],{"class":260},[220,9399,9100],{"class":230},[220,9401,386],{"class":264},[220,9403,9404,9406,9408],{"class":222,"line":656},[220,9405,402],{"class":264},[220,9407,347],{"class":420},[220,9409,359],{"class":264},[212,9411,9413],{"className":251,"code":9412,"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,9414,9415,9429,9433,9455,9468,9472],{"__ignoreMap":178},[220,9416,9417,9419,9421,9423,9425,9427],{"class":222,"line":223},[220,9418,1735],{"class":260},[220,9420,1738],{"class":420},[220,9422,1741],{"class":260},[220,9424,1744],{"class":260},[220,9426,1747],{"class":226},[220,9428,1750],{"class":264},[220,9430,9431],{"class":222,"line":179},[220,9432,1765],{"class":264},[220,9434,9435,9437,9439,9441,9444,9446,9448,9451,9453],{"class":222,"line":389},[220,9436,1770],{"class":264},[220,9438,3206],{"class":230},[220,9440,3209],{"class":264},[220,9442,9443],{"class":230},"'myMask'",[220,9445,7536],{"class":264},[220,9447,6294],{"class":420},[220,9449,9450],{"class":264},", visible: ",[220,9452,2629],{"class":420},[220,9454,6566],{"class":264},[220,9456,9457,9459,9461,9464,9466],{"class":222,"line":399},[220,9458,1770],{"class":264},[220,9460,2462],{"class":230},[220,9462,9463],{"class":264},", props: { maskSource: ",[220,9465,9443],{"class":230},[220,9467,1782],{"class":264},[220,9469,9470],{"class":222,"line":644},[220,9471,1787],{"class":264},[220,9473,9474],{"class":222,"line":650},[220,9475,1792],{"class":264},[19,9477],{":preset":9478},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,9480,9481,9482,4831],{},"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,9483,9040],{},[3262,9485,9487],{"id":9486},"mask-types","Mask Types",[15,9489,9490,9491,9494],{},"Control how the mask is interpreted with the ",[99,9492,9493],{},"maskType"," prop:",[34,9496,9497,9505,9513,9521],{},[37,9498,9499,9504],{},[159,9500,9501],{},[99,9502,9503],{},"alpha",": Uses the mask's alpha channel (default)",[37,9506,9507,9512],{},[159,9508,9509],{},[99,9510,9511],{},"alphaInverted",": Uses the inverted alpha channel",[37,9514,9515,9520],{},[159,9516,9517],{},[99,9518,9519],{},"luminance",": Uses the mask's brightness",[37,9522,9523,9528],{},[159,9524,9525],{},[99,9526,9527],{},"luminanceInverted",": Uses the inverted brightness",[246,9530,9531,9680,9828,9972,10116],{":tabs":1557},[212,9532,9534],{"className":334,"code":9533,"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,9535,9536,9544,9552,9556,9561,9568,9578,9587,9596,9606,9610,9614,9619,9626,9636,9646,9655,9666,9671],{"__ignoreMap":178},[220,9537,9538,9540,9542],{"class":222,"line":223},[220,9539,343],{"class":264},[220,9541,347],{"class":346},[220,9543,359],{"class":264},[220,9545,9546,9548,9550],{"class":222,"line":179},[220,9547,364],{"class":264},[220,9549,367],{"class":346},[220,9551,386],{"class":264},[220,9553,9554],{"class":222,"line":389},[220,9555,647],{"emptyLinePlaceholder":194},[220,9557,9558],{"class":222,"line":399},[220,9559,9560],{"class":609}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[220,9562,9563,9565],{"class":222,"line":644},[220,9564,364],{"class":264},[220,9566,9567],{"class":346},"Checkerboard\n",[220,9569,9570,9573,9575],{"class":222,"line":650},[220,9571,9572],{"class":226}," id",[220,9574,353],{"class":264},[220,9576,9577],{"class":230},"\"mask\"\n",[220,9579,9580,9582,9584],{"class":222,"line":656},[220,9581,1194],{"class":226},[220,9583,353],{"class":264},[220,9585,9586],{"class":230},"\"#ffffff\"\n",[220,9588,9589,9591,9593],{"class":222,"line":673},[220,9590,1204],{"class":226},[220,9592,353],{"class":264},[220,9594,9595],{"class":230},"\"#111111\"\n",[220,9597,9598,9601,9603],{"class":222,"line":682},[220,9599,9600],{"class":226}," :visible",[220,9602,353],{"class":264},[220,9604,9605],{"class":230},"\"false\"\n",[220,9607,9608],{"class":222,"line":691},[220,9609,1234],{"class":264},[220,9611,9612],{"class":222,"line":696},[220,9613,647],{"emptyLinePlaceholder":194},[220,9615,9616],{"class":222,"line":702},[220,9617,9618],{"class":609}," \u003C!-- Visible where mask is bright -->\n",[220,9620,9621,9623],{"class":222,"line":718},[220,9622,364],{"class":264},[220,9624,9625],{"class":346},"Circle\n",[220,9627,9628,9631,9633],{"class":222,"line":727},[220,9629,9630],{"class":226}," color",[220,9632,353],{"class":264},[220,9634,9635],{"class":230},"\"#ff0088\"\n",[220,9637,9638,9641,9643],{"class":222,"line":2664},[220,9639,9640],{"class":226}," radius",[220,9642,353],{"class":264},[220,9644,9645],{"class":230},"\"0.8\"\n",[220,9647,9648,9651,9653],{"class":222,"line":3522},[220,9649,9650],{"class":226}," maskSource",[220,9652,353],{"class":264},[220,9654,9577],{"class":230},[220,9656,9658,9661,9663],{"class":222,"line":9657},17,[220,9659,9660],{"class":226}," maskType",[220,9662,353],{"class":264},[220,9664,9665],{"class":230},"\"luminance\"\n",[220,9667,9669],{"class":222,"line":9668},18,[220,9670,1234],{"class":264},[220,9672,9674,9676,9678],{"class":222,"line":9673},19,[220,9675,402],{"class":264},[220,9677,347],{"class":346},[220,9679,359],{"class":264},[212,9681,9683],{"className":409,"code":9682,"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,9684,9685,9693,9701,9705,9714,9720,9728,9736,9744,9757,9761,9765,9774,9780,9788,9800,9808,9816,9820],{"__ignoreMap":178},[220,9686,9687,9689,9691],{"class":222,"line":223},[220,9688,343],{"class":264},[220,9690,347],{"class":420},[220,9692,359],{"class":264},[220,9694,9695,9697,9699],{"class":222,"line":179},[220,9696,364],{"class":264},[220,9698,367],{"class":420},[220,9700,386],{"class":264},[220,9702,9703],{"class":222,"line":389},[220,9704,647],{"emptyLinePlaceholder":194},[220,9706,9707,9709,9712],{"class":222,"line":399},[220,9708,1999],{"class":264},[220,9710,9711],{"class":609},"\u002F* Hidden checkerboard mask controls visibility *\u002F",[220,9713,749],{"class":264},[220,9715,9716,9718],{"class":222,"line":644},[220,9717,364],{"class":264},[220,9719,9567],{"class":420},[220,9721,9722,9724,9726],{"class":222,"line":650},[220,9723,9572],{"class":226},[220,9725,353],{"class":260},[220,9727,9577],{"class":230},[220,9729,9730,9732,9734],{"class":222,"line":656},[220,9731,1194],{"class":226},[220,9733,353],{"class":260},[220,9735,9586],{"class":230},[220,9737,9738,9740,9742],{"class":222,"line":673},[220,9739,1204],{"class":226},[220,9741,353],{"class":260},[220,9743,9595],{"class":230},[220,9745,9746,9749,9751,9753,9755],{"class":222,"line":682},[220,9747,9748],{"class":226}," visible",[220,9750,353],{"class":260},[220,9752,743],{"class":264},[220,9754,2629],{"class":420},[220,9756,749],{"class":264},[220,9758,9759],{"class":222,"line":691},[220,9760,1234],{"class":264},[220,9762,9763],{"class":222,"line":696},[220,9764,647],{"emptyLinePlaceholder":194},[220,9766,9767,9769,9772],{"class":222,"line":702},[220,9768,1999],{"class":264},[220,9770,9771],{"class":609},"\u002F* Visible where mask is bright *\u002F",[220,9773,749],{"class":264},[220,9775,9776,9778],{"class":222,"line":718},[220,9777,364],{"class":264},[220,9779,9625],{"class":420},[220,9781,9782,9784,9786],{"class":222,"line":727},[220,9783,9630],{"class":226},[220,9785,353],{"class":260},[220,9787,9635],{"class":230},[220,9789,9790,9792,9794,9796,9798],{"class":222,"line":2664},[220,9791,9640],{"class":226},[220,9793,353],{"class":260},[220,9795,743],{"class":264},[220,9797,6294],{"class":420},[220,9799,749],{"class":264},[220,9801,9802,9804,9806],{"class":222,"line":3522},[220,9803,9650],{"class":226},[220,9805,353],{"class":260},[220,9807,9577],{"class":230},[220,9809,9810,9812,9814],{"class":222,"line":9657},[220,9811,9660],{"class":226},[220,9813,353],{"class":260},[220,9815,9665],{"class":230},[220,9817,9818],{"class":222,"line":9668},[220,9819,1234],{"class":264},[220,9821,9822,9824,9826],{"class":222,"line":9673},[220,9823,402],{"class":264},[220,9825,347],{"class":420},[220,9827,359],{"class":264},[212,9829,9830],{"className":468,"code":9682,"language":469,"meta":178,"style":178},[99,9831,9832,9840,9848,9852,9860,9866,9874,9882,9890,9902,9906,9910,9918,9924,9932,9944,9952,9960,9964],{"__ignoreMap":178},[220,9833,9834,9836,9838],{"class":222,"line":223},[220,9835,343],{"class":264},[220,9837,347],{"class":420},[220,9839,359],{"class":264},[220,9841,9842,9844,9846],{"class":222,"line":179},[220,9843,364],{"class":264},[220,9845,367],{"class":420},[220,9847,386],{"class":264},[220,9849,9850],{"class":222,"line":389},[220,9851,647],{"emptyLinePlaceholder":194},[220,9853,9854,9856,9858],{"class":222,"line":399},[220,9855,1999],{"class":264},[220,9857,9711],{"class":609},[220,9859,749],{"class":264},[220,9861,9862,9864],{"class":222,"line":644},[220,9863,364],{"class":264},[220,9865,9567],{"class":420},[220,9867,9868,9870,9872],{"class":222,"line":650},[220,9869,9572],{"class":226},[220,9871,353],{"class":260},[220,9873,9577],{"class":230},[220,9875,9876,9878,9880],{"class":222,"line":656},[220,9877,1194],{"class":226},[220,9879,353],{"class":260},[220,9881,9586],{"class":230},[220,9883,9884,9886,9888],{"class":222,"line":673},[220,9885,1204],{"class":226},[220,9887,353],{"class":260},[220,9889,9595],{"class":230},[220,9891,9892,9894,9896,9898,9900],{"class":222,"line":682},[220,9893,9748],{"class":226},[220,9895,353],{"class":260},[220,9897,743],{"class":264},[220,9899,2629],{"class":420},[220,9901,749],{"class":264},[220,9903,9904],{"class":222,"line":691},[220,9905,1234],{"class":264},[220,9907,9908],{"class":222,"line":696},[220,9909,647],{"emptyLinePlaceholder":194},[220,9911,9912,9914,9916],{"class":222,"line":702},[220,9913,1999],{"class":264},[220,9915,9771],{"class":609},[220,9917,749],{"class":264},[220,9919,9920,9922],{"class":222,"line":718},[220,9921,364],{"class":264},[220,9923,9625],{"class":420},[220,9925,9926,9928,9930],{"class":222,"line":727},[220,9927,9630],{"class":226},[220,9929,353],{"class":260},[220,9931,9635],{"class":230},[220,9933,9934,9936,9938,9940,9942],{"class":222,"line":2664},[220,9935,9640],{"class":226},[220,9937,353],{"class":260},[220,9939,743],{"class":264},[220,9941,6294],{"class":420},[220,9943,749],{"class":264},[220,9945,9946,9948,9950],{"class":222,"line":3522},[220,9947,9650],{"class":226},[220,9949,353],{"class":260},[220,9951,9577],{"class":230},[220,9953,9954,9956,9958],{"class":222,"line":9657},[220,9955,9660],{"class":226},[220,9957,353],{"class":260},[220,9959,9665],{"class":230},[220,9961,9962],{"class":222,"line":9668},[220,9963,1234],{"class":264},[220,9965,9966,9968,9970],{"class":222,"line":9673},[220,9967,402],{"class":264},[220,9969,347],{"class":420},[220,9971,359],{"class":264},[212,9973,9974],{"className":468,"code":9682,"language":469,"meta":178,"style":178},[99,9975,9976,9984,9992,9996,10004,10010,10018,10026,10034,10046,10050,10054,10062,10068,10076,10088,10096,10104,10108],{"__ignoreMap":178},[220,9977,9978,9980,9982],{"class":222,"line":223},[220,9979,343],{"class":264},[220,9981,347],{"class":420},[220,9983,359],{"class":264},[220,9985,9986,9988,9990],{"class":222,"line":179},[220,9987,364],{"class":264},[220,9989,367],{"class":420},[220,9991,386],{"class":264},[220,9993,9994],{"class":222,"line":389},[220,9995,647],{"emptyLinePlaceholder":194},[220,9997,9998,10000,10002],{"class":222,"line":399},[220,9999,1999],{"class":264},[220,10001,9711],{"class":609},[220,10003,749],{"class":264},[220,10005,10006,10008],{"class":222,"line":644},[220,10007,364],{"class":264},[220,10009,9567],{"class":420},[220,10011,10012,10014,10016],{"class":222,"line":650},[220,10013,9572],{"class":226},[220,10015,353],{"class":260},[220,10017,9577],{"class":230},[220,10019,10020,10022,10024],{"class":222,"line":656},[220,10021,1194],{"class":226},[220,10023,353],{"class":260},[220,10025,9586],{"class":230},[220,10027,10028,10030,10032],{"class":222,"line":673},[220,10029,1204],{"class":226},[220,10031,353],{"class":260},[220,10033,9595],{"class":230},[220,10035,10036,10038,10040,10042,10044],{"class":222,"line":682},[220,10037,9748],{"class":226},[220,10039,353],{"class":260},[220,10041,743],{"class":264},[220,10043,2629],{"class":420},[220,10045,749],{"class":264},[220,10047,10048],{"class":222,"line":691},[220,10049,1234],{"class":264},[220,10051,10052],{"class":222,"line":696},[220,10053,647],{"emptyLinePlaceholder":194},[220,10055,10056,10058,10060],{"class":222,"line":702},[220,10057,1999],{"class":264},[220,10059,9771],{"class":609},[220,10061,749],{"class":264},[220,10063,10064,10066],{"class":222,"line":718},[220,10065,364],{"class":264},[220,10067,9625],{"class":420},[220,10069,10070,10072,10074],{"class":222,"line":727},[220,10071,9630],{"class":226},[220,10073,353],{"class":260},[220,10075,9635],{"class":230},[220,10077,10078,10080,10082,10084,10086],{"class":222,"line":2664},[220,10079,9640],{"class":226},[220,10081,353],{"class":260},[220,10083,743],{"class":264},[220,10085,6294],{"class":420},[220,10087,749],{"class":264},[220,10089,10090,10092,10094],{"class":222,"line":3522},[220,10091,9650],{"class":226},[220,10093,353],{"class":260},[220,10095,9577],{"class":230},[220,10097,10098,10100,10102],{"class":222,"line":9657},[220,10099,9660],{"class":226},[220,10101,353],{"class":260},[220,10103,9665],{"class":230},[220,10105,10106],{"class":222,"line":9668},[220,10107,1234],{"class":264},[220,10109,10110,10112,10114],{"class":222,"line":9673},[220,10111,402],{"class":264},[220,10113,347],{"class":420},[220,10115,359],{"class":264},[212,10117,10119],{"className":251,"code":10118,"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,10120,10121,10135,10139,10147,10177,10204,10208],{"__ignoreMap":178},[220,10122,10123,10125,10127,10129,10131,10133],{"class":222,"line":223},[220,10124,1735],{"class":260},[220,10126,1738],{"class":420},[220,10128,1741],{"class":260},[220,10130,1744],{"class":260},[220,10132,1747],{"class":226},[220,10134,1750],{"class":264},[220,10136,10137],{"class":222,"line":179},[220,10138,1765],{"class":264},[220,10140,10141,10143,10145],{"class":222,"line":389},[220,10142,1770],{"class":264},[220,10144,2462],{"class":230},[220,10146,6543],{"class":264},[220,10148,10149,10151,10154,10156,10159,10162,10165,10168,10171,10173,10175],{"class":222,"line":399},[220,10150,1770],{"class":264},[220,10152,10153],{"class":230},"'Checkerboard'",[220,10155,3209],{"class":264},[220,10157,10158],{"class":230},"'mask'",[220,10160,10161],{"class":264},", props: { colorA: ",[220,10163,10164],{"class":230},"'#ffffff'",[220,10166,10167],{"class":264},", colorB: ",[220,10169,10170],{"class":230},"'#111111'",[220,10172,9450],{"class":264},[220,10174,2629],{"class":420},[220,10176,6566],{"class":264},[220,10178,10179,10181,10183,10185,10187,10189,10191,10194,10196,10199,10202],{"class":222,"line":644},[220,10180,1770],{"class":264},[220,10182,3206],{"class":230},[220,10184,1776],{"class":264},[220,10186,3217],{"class":230},[220,10188,6561],{"class":264},[220,10190,6294],{"class":420},[220,10192,10193],{"class":264},", maskSource: ",[220,10195,10158],{"class":230},[220,10197,10198],{"class":264},", maskType: ",[220,10200,10201],{"class":230},"'luminance'",[220,10203,1782],{"class":264},[220,10205,10206],{"class":222,"line":650},[220,10207,1787],{"class":264},[220,10209,10210],{"class":222,"line":656},[220,10211,1792],{"class":264},[19,10213],{":preset":10214},"{\"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,10216,7589],{},{"title":178,"searchDepth":179,"depth":179,"links":10218},[10219,10222,10223,10224],{"id":7613,"depth":179,"text":7614,"children":10220},[10221],{"id":8074,"depth":389,"text":8075},{"id":2921,"depth":179,"text":8659},{"id":8997,"depth":179,"text":8998},{"id":9044,"depth":179,"text":9045,"children":10225},[10226],{"id":9486,"depth":389,"text":9487},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"\u002Fdocs\u002Fguide\u002Fblending-masking",{"title":7602,"description":10228},"docs\u002Fguide\u002F3.blending-masking","YqBfXcyRMRK8pVXV7hqZ8VYJ-jMY9RGTV6Vuw9caP1A",{"id":10236,"title":1496,"body":10237,"category":10227,"description":12228,"exclude":190,"extension":191,"forceFramework":190,"icon":12229,"meta":12230,"navigation":194,"path":1495,"seo":12231,"stem":12232,"__hash__":12233},"guide\u002Fdocs\u002Fguide\u002F4.props-reactivity.md",{"type":8,"value":10238,"toc":12221},[10239,10242,10245,10249,10252,10469,10472,10476,10479,11638,11641,11646,11649,11653,11656,11661,11704,11709,11748,11753,11804,11809,11835,11838,11842,11845,11851,12181,12185,12188,12192,12195,12215,12218],[11,10240,1496],{"id":10241},"props-reactivity",[15,10243,10244],{},"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,10246,10248],{"id":10247},"basic-props","Basic Props",[15,10250,10251],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[246,10253,10254,10295,10338,10380,10422],{":tabs":1557},[212,10255,10257],{"className":334,"code":10256,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" \u002F>\n\u003C\u002FShader>\n",[99,10258,10259,10267,10287],{"__ignoreMap":178},[220,10260,10261,10263,10265],{"class":222,"line":223},[220,10262,343],{"class":264},[220,10264,347],{"class":346},[220,10266,359],{"class":264},[220,10268,10269,10271,10273,10275,10277,10279,10281,10283,10285],{"class":222,"line":179},[220,10270,364],{"class":264},[220,10272,2553],{"class":346},[220,10274,1588],{"class":226},[220,10276,353],{"class":264},[220,10278,2560],{"class":230},[220,10280,6197],{"class":226},[220,10282,353],{"class":264},[220,10284,7676],{"class":230},[220,10286,386],{"class":264},[220,10288,10289,10291,10293],{"class":222,"line":389},[220,10290,402],{"class":264},[220,10292,347],{"class":346},[220,10294,359],{"class":264},[212,10296,10298],{"className":409,"code":10297,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} \u002F>\n\u003C\u002FShader>\n",[99,10299,10300,10308,10330],{"__ignoreMap":178},[220,10301,10302,10304,10306],{"class":222,"line":223},[220,10303,343],{"class":264},[220,10305,347],{"class":420},[220,10307,359],{"class":264},[220,10309,10310,10312,10314,10316,10318,10320,10322,10324,10326,10328],{"class":222,"line":179},[220,10311,364],{"class":264},[220,10313,2553],{"class":420},[220,10315,1588],{"class":226},[220,10317,353],{"class":260},[220,10319,2560],{"class":230},[220,10321,6197],{"class":226},[220,10323,353],{"class":260},[220,10325,743],{"class":264},[220,10327,7749],{"class":420},[220,10329,6297],{"class":264},[220,10331,10332,10334,10336],{"class":222,"line":389},[220,10333,402],{"class":264},[220,10335,347],{"class":420},[220,10337,359],{"class":264},[212,10339,10340],{"className":468,"code":10297,"language":469,"meta":178,"style":178},[99,10341,10342,10350,10372],{"__ignoreMap":178},[220,10343,10344,10346,10348],{"class":222,"line":223},[220,10345,343],{"class":264},[220,10347,347],{"class":420},[220,10349,359],{"class":264},[220,10351,10352,10354,10356,10358,10360,10362,10364,10366,10368,10370],{"class":222,"line":179},[220,10353,364],{"class":264},[220,10355,2553],{"class":420},[220,10357,1588],{"class":226},[220,10359,353],{"class":260},[220,10361,2560],{"class":230},[220,10363,6197],{"class":226},[220,10365,353],{"class":260},[220,10367,743],{"class":264},[220,10369,7749],{"class":420},[220,10371,6297],{"class":264},[220,10373,10374,10376,10378],{"class":222,"line":389},[220,10375,402],{"class":264},[220,10377,347],{"class":420},[220,10379,359],{"class":264},[212,10381,10382],{"className":468,"code":10297,"language":469,"meta":178,"style":178},[99,10383,10384,10392,10414],{"__ignoreMap":178},[220,10385,10386,10388,10390],{"class":222,"line":223},[220,10387,343],{"class":264},[220,10389,347],{"class":420},[220,10391,359],{"class":264},[220,10393,10394,10396,10398,10400,10402,10404,10406,10408,10410,10412],{"class":222,"line":179},[220,10395,364],{"class":264},[220,10397,2553],{"class":420},[220,10399,1588],{"class":226},[220,10401,353],{"class":260},[220,10403,2560],{"class":230},[220,10405,6197],{"class":226},[220,10407,353],{"class":260},[220,10409,743],{"class":264},[220,10411,7749],{"class":420},[220,10413,6297],{"class":264},[220,10415,10416,10418,10420],{"class":222,"line":389},[220,10417,402],{"class":264},[220,10419,347],{"class":420},[220,10421,359],{"class":264},[212,10423,10425],{"className":251,"code":10424,"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,10426,10427,10441,10445,10461,10465],{"__ignoreMap":178},[220,10428,10429,10431,10433,10435,10437,10439],{"class":222,"line":223},[220,10430,1735],{"class":260},[220,10432,1738],{"class":420},[220,10434,1741],{"class":260},[220,10436,1744],{"class":260},[220,10438,1747],{"class":226},[220,10440,1750],{"class":264},[220,10442,10443],{"class":222,"line":179},[220,10444,1765],{"class":264},[220,10446,10447,10449,10451,10453,10455,10457,10459],{"class":222,"line":389},[220,10448,1770],{"class":264},[220,10450,3206],{"class":230},[220,10452,1776],{"class":264},[220,10454,3217],{"class":230},[220,10456,6561],{"class":264},[220,10458,7749],{"class":420},[220,10460,1782],{"class":264},[220,10462,10463],{"class":222,"line":399},[220,10464,1787],{"class":264},[220,10466,10467],{"class":222,"line":644},[220,10468,1792],{"class":264},[15,10470,10471],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,10473,10475],{"id":10474},"reactive-props","Reactive Props",[15,10477,10478],{},"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,10480,10481,10713,11002,11223,11496],{":tabs":1557},[212,10482,10484],{"className":334,"code":10483,"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,10485,10486,10496,10506,10517,10521,10538,10546,10550,10558,10566,10588,10608,10628,10636,10640,10648,10675,10697,10705],{"__ignoreMap":178},[220,10487,10488,10490,10492,10494],{"class":222,"line":223},[220,10489,343],{"class":264},[220,10491,2590],{"class":346},[220,10493,2593],{"class":226},[220,10495,359],{"class":264},[220,10497,10498,10500,10502,10504],{"class":222,"line":179},[220,10499,261],{"class":260},[220,10501,2602],{"class":264},[220,10503,268],{"class":260},[220,10505,2607],{"class":230},[220,10507,10508,10510,10513,10515],{"class":222,"line":389},[220,10509,261],{"class":260},[220,10511,10512],{"class":264}," { Shader, LinearGradient, Circle } ",[220,10514,268],{"class":260},[220,10516,271],{"class":230},[220,10518,10519],{"class":222,"line":399},[220,10520,647],{"emptyLinePlaceholder":194},[220,10522,10523,10525,10528,10530,10532,10534,10536],{"class":222,"line":644},[220,10524,1735],{"class":260},[220,10526,10527],{"class":420}," angle",[220,10529,1741],{"class":260},[220,10531,2623],{"class":226},[220,10533,2626],{"class":264},[220,10535,8668],{"class":420},[220,10537,2632],{"class":264},[220,10539,10540,10542,10544],{"class":222,"line":650},[220,10541,402],{"class":264},[220,10543,2590],{"class":346},[220,10545,359],{"class":264},[220,10547,10548],{"class":222,"line":656},[220,10549,647],{"emptyLinePlaceholder":194},[220,10551,10552,10554,10556],{"class":222,"line":673},[220,10553,343],{"class":264},[220,10555,2519],{"class":346},[220,10557,359],{"class":264},[220,10559,10560,10562,10564],{"class":222,"line":682},[220,10561,364],{"class":264},[220,10563,3398],{"class":346},[220,10565,359],{"class":264},[220,10567,10568,10570,10573,10576,10578,10581,10584,10586],{"class":222,"line":691},[220,10569,2550],{"class":264},[220,10571,10572],{"class":346},"button",[220,10574,10575],{"class":226}," @click",[220,10577,353],{"class":264},[220,10579,10580],{"class":230},"\"angle += 45\"",[220,10582,10583],{"class":264},">Rotate +45°\u003C\u002F",[220,10585,10572],{"class":346},[220,10587,359],{"class":264},[220,10589,10590,10592,10594,10596,10598,10601,10604,10606],{"class":222,"line":696},[220,10591,2550],{"class":264},[220,10593,10572],{"class":346},[220,10595,10575],{"class":226},[220,10597,353],{"class":264},[220,10599,10600],{"class":230},"\"angle -= 45\"",[220,10602,10603],{"class":264},">Rotate -45°\u003C\u002F",[220,10605,10572],{"class":346},[220,10607,359],{"class":264},[220,10609,10610,10612,10614,10616,10618,10621,10624,10626],{"class":222,"line":702},[220,10611,2550],{"class":264},[220,10613,10572],{"class":346},[220,10615,10575],{"class":226},[220,10617,353],{"class":264},[220,10619,10620],{"class":230},"\"angle = 0\"",[220,10622,10623],{"class":264},">Reset\u003C\u002F",[220,10625,10572],{"class":346},[220,10627,359],{"class":264},[220,10629,10630,10632,10634],{"class":222,"line":718},[220,10631,2567],{"class":264},[220,10633,3398],{"class":346},[220,10635,359],{"class":264},[220,10637,10638],{"class":222,"line":727},[220,10639,647],{"emptyLinePlaceholder":194},[220,10641,10642,10644,10646],{"class":222,"line":2664},[220,10643,364],{"class":264},[220,10645,347],{"class":346},[220,10647,359],{"class":264},[220,10649,10650,10652,10654,10656,10658,10661,10663,10665,10667,10669,10671,10673],{"class":222,"line":3522},[220,10651,2550],{"class":264},[220,10653,2553],{"class":346},[220,10655,9095],{"class":226},[220,10657,353],{"class":264},[220,10659,10660],{"class":230},"\"mask\"",[220,10662,6197],{"class":226},[220,10664,353],{"class":264},[220,10666,6202],{"class":230},[220,10668,9109],{"class":226},[220,10670,353],{"class":264},[220,10672,9114],{"class":230},[220,10674,386],{"class":264},[220,10676,10677,10679,10681,10684,10686,10689,10691,10693,10695],{"class":222,"line":9657},[220,10678,2550],{"class":264},[220,10680,367],{"class":346},[220,10682,10683],{"class":226}," :angle",[220,10685,353],{"class":264},[220,10687,10688],{"class":230},"\"angle\"",[220,10690,9134],{"class":226},[220,10692,353],{"class":264},[220,10694,10660],{"class":230},[220,10696,386],{"class":264},[220,10698,10699,10701,10703],{"class":222,"line":9668},[220,10700,2567],{"class":264},[220,10702,347],{"class":346},[220,10704,359],{"class":264},[220,10706,10707,10709,10711],{"class":222,"line":9673},[220,10708,402],{"class":264},[220,10710,2519],{"class":346},[220,10712,359],{"class":264},[212,10714,10716],{"className":409,"code":10715,"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,10717,10718,10728,10738,10742,10751,10777,10781,10787,10792,10800,10842,10878,10905,10914,10918,10926,10958,10979,10987,10992,10997],{"__ignoreMap":178},[220,10719,10720,10722,10724,10726],{"class":222,"line":223},[220,10721,261],{"class":260},[220,10723,2682],{"class":264},[220,10725,268],{"class":260},[220,10727,2687],{"class":230},[220,10729,10730,10732,10734,10736],{"class":222,"line":179},[220,10731,261],{"class":260},[220,10733,10512],{"class":264},[220,10735,268],{"class":260},[220,10737,287],{"class":230},[220,10739,10740],{"class":222,"line":389},[220,10741,647],{"emptyLinePlaceholder":194},[220,10743,10744,10746,10749],{"class":222,"line":399},[220,10745,2641],{"class":260},[220,10747,10748],{"class":226}," MyComponent",[220,10750,2647],{"class":264},[220,10752,10753,10755,10757,10760,10762,10765,10767,10769,10771,10773,10775],{"class":222,"line":644},[220,10754,2705],{"class":260},[220,10756,2708],{"class":264},[220,10758,10759],{"class":420},"angle",[220,10761,1895],{"class":264},[220,10763,10764],{"class":420},"setAngle",[220,10766,2719],{"class":264},[220,10768,353],{"class":260},[220,10770,2724],{"class":226},[220,10772,2626],{"class":264},[220,10774,8668],{"class":420},[220,10776,2632],{"class":264},[220,10778,10779],{"class":222,"line":650},[220,10780,647],{"emptyLinePlaceholder":194},[220,10782,10783,10785],{"class":222,"line":656},[220,10784,2739],{"class":260},[220,10786,2742],{"class":264},[220,10788,10789],{"class":222,"line":673},[220,10790,10791],{"class":264}," \u003C>\n",[220,10793,10794,10796,10798],{"class":222,"line":682},[220,10795,2813],{"class":264},[220,10797,3398],{"class":346},[220,10799,359],{"class":264},[220,10801,10802,10805,10807,10810,10812,10814,10816,10819,10821,10823,10826,10829,10832,10835,10838,10840],{"class":222,"line":691},[220,10803,10804],{"class":264}," \u003C",[220,10806,10572],{"class":346},[220,10808,10809],{"class":226}," onClick",[220,10811,353],{"class":260},[220,10813,2759],{"class":264},[220,10815,2762],{"class":260},[220,10817,10818],{"class":226}," setAngle",[220,10820,2626],{"class":264},[220,10822,56],{"class":3621},[220,10824,10825],{"class":260}," =>",[220,10827,10828],{"class":264}," a ",[220,10830,10831],{"class":260},"+",[220,10833,10834],{"class":420}," 45",[220,10836,10837],{"class":264},")}>Rotate +45°\u003C\u002F",[220,10839,10572],{"class":346},[220,10841,359],{"class":264},[220,10843,10844,10846,10848,10850,10852,10854,10856,10858,10860,10862,10864,10866,10869,10871,10874,10876],{"class":222,"line":696},[220,10845,10804],{"class":264},[220,10847,10572],{"class":346},[220,10849,10809],{"class":226},[220,10851,353],{"class":260},[220,10853,2759],{"class":264},[220,10855,2762],{"class":260},[220,10857,10818],{"class":226},[220,10859,2626],{"class":264},[220,10861,56],{"class":3621},[220,10863,10825],{"class":260},[220,10865,10828],{"class":264},[220,10867,10868],{"class":260},"-",[220,10870,10834],{"class":420},[220,10872,10873],{"class":264},")}>Rotate -45°\u003C\u002F",[220,10875,10572],{"class":346},[220,10877,359],{"class":264},[220,10879,10880,10882,10884,10886,10888,10890,10892,10894,10896,10898,10901,10903],{"class":222,"line":702},[220,10881,10804],{"class":264},[220,10883,10572],{"class":346},[220,10885,10809],{"class":226},[220,10887,353],{"class":260},[220,10889,2759],{"class":264},[220,10891,2762],{"class":260},[220,10893,10818],{"class":226},[220,10895,2626],{"class":264},[220,10897,8668],{"class":420},[220,10899,10900],{"class":264},")}>Reset\u003C\u002F",[220,10902,10572],{"class":346},[220,10904,359],{"class":264},[220,10906,10907,10910,10912],{"class":222,"line":718},[220,10908,10909],{"class":264}," \u003C\u002F",[220,10911,3398],{"class":346},[220,10913,359],{"class":264},[220,10915,10916],{"class":222,"line":727},[220,10917,647],{"emptyLinePlaceholder":194},[220,10919,10920,10922,10924],{"class":222,"line":2664},[220,10921,2813],{"class":264},[220,10923,347],{"class":420},[220,10925,359],{"class":264},[220,10927,10928,10930,10932,10934,10936,10938,10940,10942,10944,10946,10948,10950,10952,10954,10956],{"class":222,"line":3522},[220,10929,10804],{"class":264},[220,10931,2553],{"class":420},[220,10933,9095],{"class":226},[220,10935,353],{"class":260},[220,10937,10660],{"class":230},[220,10939,6197],{"class":226},[220,10941,353],{"class":260},[220,10943,743],{"class":264},[220,10945,6294],{"class":420},[220,10947,2914],{"class":264},[220,10949,2711],{"class":226},[220,10951,353],{"class":260},[220,10953,743],{"class":264},[220,10955,2629],{"class":420},[220,10957,6297],{"class":264},[220,10959,10960,10962,10964,10966,10968,10971,10973,10975,10977],{"class":222,"line":9657},[220,10961,10804],{"class":264},[220,10963,367],{"class":420},[220,10965,10527],{"class":226},[220,10967,353],{"class":260},[220,10969,10970],{"class":264},"{angle} ",[220,10972,9059],{"class":226},[220,10974,353],{"class":260},[220,10976,10660],{"class":230},[220,10978,386],{"class":264},[220,10980,10981,10983,10985],{"class":222,"line":9668},[220,10982,10909],{"class":264},[220,10984,347],{"class":420},[220,10986,359],{"class":264},[220,10988,10989],{"class":222,"line":9673},[220,10990,10991],{"class":264}," \u003C\u002F>\n",[220,10993,10995],{"class":222,"line":10994},20,[220,10996,2837],{"class":264},[220,10998,11000],{"class":222,"line":10999},21,[220,11001,749],{"class":264},[212,11003,11005],{"className":468,"code":11004,"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,11006,11007,11015,11020,11024,11029,11037,11041,11049,11083,11115,11146,11154,11158,11166,11198,11215],{"__ignoreMap":178},[220,11008,11009,11011,11013],{"class":222,"line":223},[220,11010,343],{"class":264},[220,11012,2590],{"class":346},[220,11014,359],{"class":264},[220,11016,11017],{"class":222,"line":179},[220,11018,11019],{"class":264}," import { Shader, LinearGradient, Circle } from 'shaders\u002Fsvelte'\n",[220,11021,11022],{"class":222,"line":389},[220,11023,647],{"emptyLinePlaceholder":194},[220,11025,11026],{"class":222,"line":399},[220,11027,11028],{"class":264}," let angle = 0\n",[220,11030,11031,11033,11035],{"class":222,"line":644},[220,11032,402],{"class":264},[220,11034,2590],{"class":346},[220,11036,359],{"class":264},[220,11038,11039],{"class":222,"line":650},[220,11040,647],{"emptyLinePlaceholder":194},[220,11042,11043,11045,11047],{"class":222,"line":656},[220,11044,343],{"class":264},[220,11046,3398],{"class":346},[220,11048,359],{"class":264},[220,11050,11051,11053,11055,11057,11059,11062,11064,11066,11068,11071,11074,11076,11079,11081],{"class":222,"line":673},[220,11052,364],{"class":264},[220,11054,10572],{"class":346},[220,11056,5436],{"class":226},[220,11058,1554],{"class":264},[220,11060,11061],{"class":226},"click",[220,11063,353],{"class":260},[220,11065,2759],{"class":264},[220,11067,2762],{"class":260},[220,11069,11070],{"class":264}," angle ",[220,11072,11073],{"class":260},"+=",[220,11075,10834],{"class":420},[220,11077,11078],{"class":264},"}>Rotate +45°\u003C\u002F",[220,11080,10572],{"class":346},[220,11082,359],{"class":264},[220,11084,11085,11087,11089,11091,11093,11095,11097,11099,11101,11103,11106,11108,11111,11113],{"class":222,"line":682},[220,11086,364],{"class":264},[220,11088,10572],{"class":346},[220,11090,5436],{"class":226},[220,11092,1554],{"class":264},[220,11094,11061],{"class":226},[220,11096,353],{"class":260},[220,11098,2759],{"class":264},[220,11100,2762],{"class":260},[220,11102,11070],{"class":264},[220,11104,11105],{"class":260},"-=",[220,11107,10834],{"class":420},[220,11109,11110],{"class":264},"}>Rotate -45°\u003C\u002F",[220,11112,10572],{"class":346},[220,11114,359],{"class":264},[220,11116,11117,11119,11121,11123,11125,11127,11129,11131,11133,11135,11137,11139,11142,11144],{"class":222,"line":691},[220,11118,364],{"class":264},[220,11120,10572],{"class":346},[220,11122,5436],{"class":226},[220,11124,1554],{"class":264},[220,11126,11061],{"class":226},[220,11128,353],{"class":260},[220,11130,2759],{"class":264},[220,11132,2762],{"class":260},[220,11134,11070],{"class":264},[220,11136,353],{"class":260},[220,11138,2794],{"class":420},[220,11140,11141],{"class":264},"}>Reset\u003C\u002F",[220,11143,10572],{"class":346},[220,11145,359],{"class":264},[220,11147,11148,11150,11152],{"class":222,"line":696},[220,11149,402],{"class":264},[220,11151,3398],{"class":346},[220,11153,359],{"class":264},[220,11155,11156],{"class":222,"line":702},[220,11157,647],{"emptyLinePlaceholder":194},[220,11159,11160,11162,11164],{"class":222,"line":718},[220,11161,343],{"class":264},[220,11163,347],{"class":420},[220,11165,359],{"class":264},[220,11167,11168,11170,11172,11174,11176,11178,11180,11182,11184,11186,11188,11190,11192,11194,11196],{"class":222,"line":727},[220,11169,364],{"class":264},[220,11171,2553],{"class":420},[220,11173,9095],{"class":226},[220,11175,353],{"class":260},[220,11177,10660],{"class":230},[220,11179,6197],{"class":226},[220,11181,353],{"class":260},[220,11183,743],{"class":264},[220,11185,6294],{"class":420},[220,11187,2914],{"class":264},[220,11189,2711],{"class":226},[220,11191,353],{"class":260},[220,11193,743],{"class":264},[220,11195,2629],{"class":420},[220,11197,6297],{"class":264},[220,11199,11200,11202,11204,11207,11209,11211,11213],{"class":222,"line":2664},[220,11201,364],{"class":264},[220,11203,367],{"class":420},[220,11205,11206],{"class":264}," {angle} ",[220,11208,9059],{"class":226},[220,11210,353],{"class":260},[220,11212,10660],{"class":230},[220,11214,386],{"class":264},[220,11216,11217,11219,11221],{"class":222,"line":3522},[220,11218,402],{"class":264},[220,11220,347],{"class":420},[220,11222,359],{"class":264},[212,11224,11226],{"className":468,"code":11225,"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,11227,11228,11238,11248,11252,11260,11284,11288,11294,11298,11306,11340,11374,11400,11408,11412,11420,11452,11476,11484,11488,11492],{"__ignoreMap":178},[220,11229,11230,11232,11234,11236],{"class":222,"line":223},[220,11231,261],{"class":260},[220,11233,2982],{"class":264},[220,11235,268],{"class":260},[220,11237,2987],{"class":230},[220,11239,11240,11242,11244,11246],{"class":222,"line":179},[220,11241,261],{"class":260},[220,11243,10512],{"class":264},[220,11245,268],{"class":260},[220,11247,319],{"class":230},[220,11249,11250],{"class":222,"line":389},[220,11251,647],{"emptyLinePlaceholder":194},[220,11253,11254,11256,11258],{"class":222,"line":399},[220,11255,2641],{"class":260},[220,11257,10748],{"class":226},[220,11259,2647],{"class":264},[220,11261,11262,11264,11266,11268,11270,11272,11274,11276,11278,11280,11282],{"class":222,"line":644},[220,11263,2705],{"class":260},[220,11265,2708],{"class":264},[220,11267,10759],{"class":420},[220,11269,1895],{"class":264},[220,11271,10764],{"class":420},[220,11273,2719],{"class":264},[220,11275,353],{"class":260},[220,11277,3018],{"class":226},[220,11279,2626],{"class":264},[220,11281,8668],{"class":420},[220,11283,2632],{"class":264},[220,11285,11286],{"class":222,"line":650},[220,11287,647],{"emptyLinePlaceholder":194},[220,11289,11290,11292],{"class":222,"line":656},[220,11291,2739],{"class":260},[220,11293,2742],{"class":264},[220,11295,11296],{"class":222,"line":673},[220,11297,10791],{"class":264},[220,11299,11300,11302,11304],{"class":222,"line":682},[220,11301,2813],{"class":264},[220,11303,3398],{"class":346},[220,11305,359],{"class":264},[220,11307,11308,11310,11312,11314,11316,11318,11320,11322,11324,11326,11328,11330,11332,11334,11336,11338],{"class":222,"line":691},[220,11309,10804],{"class":264},[220,11311,10572],{"class":346},[220,11313,10809],{"class":226},[220,11315,353],{"class":260},[220,11317,2759],{"class":264},[220,11319,2762],{"class":260},[220,11321,10818],{"class":226},[220,11323,2626],{"class":264},[220,11325,56],{"class":3621},[220,11327,10825],{"class":260},[220,11329,10828],{"class":264},[220,11331,10831],{"class":260},[220,11333,10834],{"class":420},[220,11335,10837],{"class":264},[220,11337,10572],{"class":346},[220,11339,359],{"class":264},[220,11341,11342,11344,11346,11348,11350,11352,11354,11356,11358,11360,11362,11364,11366,11368,11370,11372],{"class":222,"line":696},[220,11343,10804],{"class":264},[220,11345,10572],{"class":346},[220,11347,10809],{"class":226},[220,11349,353],{"class":260},[220,11351,2759],{"class":264},[220,11353,2762],{"class":260},[220,11355,10818],{"class":226},[220,11357,2626],{"class":264},[220,11359,56],{"class":3621},[220,11361,10825],{"class":260},[220,11363,10828],{"class":264},[220,11365,10868],{"class":260},[220,11367,10834],{"class":420},[220,11369,10873],{"class":264},[220,11371,10572],{"class":346},[220,11373,359],{"class":264},[220,11375,11376,11378,11380,11382,11384,11386,11388,11390,11392,11394,11396,11398],{"class":222,"line":702},[220,11377,10804],{"class":264},[220,11379,10572],{"class":346},[220,11381,10809],{"class":226},[220,11383,353],{"class":260},[220,11385,2759],{"class":264},[220,11387,2762],{"class":260},[220,11389,10818],{"class":226},[220,11391,2626],{"class":264},[220,11393,8668],{"class":420},[220,11395,10900],{"class":264},[220,11397,10572],{"class":346},[220,11399,359],{"class":264},[220,11401,11402,11404,11406],{"class":222,"line":718},[220,11403,10909],{"class":264},[220,11405,3398],{"class":346},[220,11407,359],{"class":264},[220,11409,11410],{"class":222,"line":727},[220,11411,647],{"emptyLinePlaceholder":194},[220,11413,11414,11416,11418],{"class":222,"line":2664},[220,11415,2813],{"class":264},[220,11417,347],{"class":420},[220,11419,359],{"class":264},[220,11421,11422,11424,11426,11428,11430,11432,11434,11436,11438,11440,11442,11444,11446,11448,11450],{"class":222,"line":3522},[220,11423,10804],{"class":264},[220,11425,2553],{"class":420},[220,11427,9095],{"class":226},[220,11429,353],{"class":260},[220,11431,10660],{"class":230},[220,11433,6197],{"class":226},[220,11435,353],{"class":260},[220,11437,743],{"class":264},[220,11439,6294],{"class":420},[220,11441,2914],{"class":264},[220,11443,2711],{"class":226},[220,11445,353],{"class":260},[220,11447,743],{"class":264},[220,11449,2629],{"class":420},[220,11451,6297],{"class":264},[220,11453,11454,11456,11458,11460,11462,11464,11466,11468,11470,11472,11474],{"class":222,"line":9657},[220,11455,10804],{"class":264},[220,11457,367],{"class":420},[220,11459,10527],{"class":226},[220,11461,353],{"class":260},[220,11463,743],{"class":264},[220,11465,10759],{"class":226},[220,11467,3933],{"class":264},[220,11469,9059],{"class":226},[220,11471,353],{"class":260},[220,11473,10660],{"class":230},[220,11475,386],{"class":264},[220,11477,11478,11480,11482],{"class":222,"line":9668},[220,11479,10909],{"class":264},[220,11481,347],{"class":420},[220,11483,359],{"class":264},[220,11485,11486],{"class":222,"line":9673},[220,11487,10991],{"class":264},[220,11489,11490],{"class":222,"line":10994},[220,11491,2837],{"class":264},[220,11493,11494],{"class":222,"line":10999},[220,11495,749],{"class":264},[212,11497,11499],{"className":251,"code":11498,"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,11500,11501,11512,11516,11530,11534,11554,11576,11580,11584,11588,11593,11613,11617,11622],{"__ignoreMap":178},[220,11502,11503,11505,11508,11510],{"class":222,"line":223},[220,11504,261],{"class":260},[220,11506,11507],{"class":264}," { createShader } ",[220,11509,268],{"class":260},[220,11511,4007],{"class":230},[220,11513,11514],{"class":222,"line":179},[220,11515,647],{"emptyLinePlaceholder":194},[220,11517,11518,11520,11522,11524,11526,11528],{"class":222,"line":389},[220,11519,1735],{"class":260},[220,11521,1738],{"class":420},[220,11523,1741],{"class":260},[220,11525,1744],{"class":260},[220,11527,1747],{"class":226},[220,11529,1750],{"class":264},[220,11531,11532],{"class":222,"line":399},[220,11533,1765],{"class":264},[220,11535,11536,11538,11540,11542,11544,11546,11548,11550,11552],{"class":222,"line":644},[220,11537,1770],{"class":264},[220,11539,3206],{"class":230},[220,11541,3209],{"class":264},[220,11543,10158],{"class":230},[220,11545,7536],{"class":264},[220,11547,6294],{"class":420},[220,11549,9450],{"class":264},[220,11551,2629],{"class":420},[220,11553,6566],{"class":264},[220,11555,11556,11558,11560,11562,11565,11568,11570,11572,11574],{"class":222,"line":650},[220,11557,1770],{"class":264},[220,11559,2462],{"class":230},[220,11561,3209],{"class":264},[220,11563,11564],{"class":230},"'gradient'",[220,11566,11567],{"class":264},", props: { angle: ",[220,11569,8668],{"class":420},[220,11571,10193],{"class":264},[220,11573,10158],{"class":230},[220,11575,1782],{"class":264},[220,11577,11578],{"class":222,"line":656},[220,11579,1787],{"class":264},[220,11581,11582],{"class":222,"line":673},[220,11583,1792],{"class":264},[220,11585,11586],{"class":222,"line":682},[220,11587,647],{"emptyLinePlaceholder":194},[220,11589,11590],{"class":222,"line":691},[220,11591,11592],{"class":609},"\u002F\u002F Update angle at runtime\n",[220,11594,11595,11598,11601,11603,11605,11608,11610],{"class":222,"line":696},[220,11596,11597],{"class":264},"shader.",[220,11599,11600],{"class":226},"update",[220,11602,2626],{"class":264},[220,11604,11564],{"class":230},[220,11606,11607],{"class":264},", { angle: ",[220,11609,1295],{"class":420},[220,11611,11612],{"class":264}," })\n",[220,11614,11615],{"class":222,"line":702},[220,11616,647],{"emptyLinePlaceholder":194},[220,11618,11619],{"class":222,"line":718},[220,11620,11621],{"class":609},"\u002F\u002F Reset angle\n",[220,11623,11624,11626,11628,11630,11632,11634,11636],{"class":222,"line":727},[220,11625,11597],{"class":264},[220,11627,11600],{"class":226},[220,11629,2626],{"class":264},[220,11631,11564],{"class":230},[220,11633,11607],{"class":264},[220,11635,8668],{"class":420},[220,11637,11612],{"class":264},[15,11639,11640],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[11642,11643],"interactive-shader-demo",{":controls":11644,":preset":11645},"[{\"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,11647,11648],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,11650,11652],{"id":11651},"common-reactive-props","Common Reactive Props",[15,11654,11655],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,11657,11658,1554],{},[159,11659,11660],{},"Position and Size",[212,11662,11666],{"className":11663,"code":11664,"language":11665,"meta":178,"style":178},"language-vue shiki shiki-themes github-dark","\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" \u002F>\n","vue",[99,11667,11668],{"__ignoreMap":178},[220,11669,11670,11672,11674,11676,11679,11681,11684,11687,11689,11691,11693,11695,11697,11700,11702],{"class":222,"line":223},[220,11671,343],{"class":264},[220,11673,2553],{"class":346},[220,11675,2791],{"class":264},[220,11677,11678],{"class":226},"radius",[220,11680,353],{"class":264},[220,11682,11683],{"class":230},"\"",[220,11685,11686],{"class":264},"size",[220,11688,11683],{"class":230},[220,11690,2791],{"class":264},[220,11692,8236],{"class":226},[220,11694,353],{"class":264},[220,11696,11683],{"class":230},[220,11698,11699],{"class":264},"{ x: posX, y: posY }",[220,11701,11683],{"class":230},[220,11703,386],{"class":264},[15,11705,11706,1554],{},[159,11707,11708],{},"Colors",[212,11710,11712],{"className":11663,"code":11711,"language":11665,"meta":178,"style":178},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" \u002F>\n",[99,11713,11714],{"__ignoreMap":178},[220,11715,11716,11718,11720,11722,11724,11726,11728,11731,11733,11735,11737,11739,11741,11744,11746],{"class":222,"line":223},[220,11717,343],{"class":264},[220,11719,367],{"class":346},[220,11721,2791],{"class":264},[220,11723,1863],{"class":226},[220,11725,353],{"class":264},[220,11727,11683],{"class":230},[220,11729,11730],{"class":264},"startColor",[220,11732,11683],{"class":230},[220,11734,2791],{"class":264},[220,11736,1867],{"class":226},[220,11738,353],{"class":264},[220,11740,11683],{"class":230},[220,11742,11743],{"class":264},"endColor",[220,11745,11683],{"class":230},[220,11747,386],{"class":264},[15,11749,11750,1554],{},[159,11751,11752],{},"Intensity and Strength",[212,11754,11756],{"className":11663,"code":11755,"language":11665,"meta":178,"style":178},"\u003CBlur :intensity=\"blurAmount\" \u002F>\n\u003CGlow :strength=\"glowPower\" \u002F>\n",[99,11757,11758,11781],{"__ignoreMap":178},[220,11759,11760,11762,11765,11767,11770,11772,11774,11777,11779],{"class":222,"line":223},[220,11761,343],{"class":264},[220,11763,11764],{"class":346},"Blur",[220,11766,2791],{"class":264},[220,11768,11769],{"class":226},"intensity",[220,11771,353],{"class":264},[220,11773,11683],{"class":230},[220,11775,11776],{"class":264},"blurAmount",[220,11778,11683],{"class":230},[220,11780,386],{"class":264},[220,11782,11783,11785,11788,11790,11793,11795,11797,11800,11802],{"class":222,"line":179},[220,11784,343],{"class":264},[220,11786,11787],{"class":346},"Glow",[220,11789,2791],{"class":264},[220,11791,11792],{"class":226},"strength",[220,11794,353],{"class":264},[220,11796,11683],{"class":230},[220,11798,11799],{"class":264},"glowPower",[220,11801,11683],{"class":230},[220,11803,386],{"class":264},[15,11805,11806,1554],{},[159,11807,11808],{},"Angles and Rotation",[212,11810,11812],{"className":11663,"code":11811,"language":11665,"meta":178,"style":178},"\u003CLinearGradient :angle=\"rotation\" \u002F>\n",[99,11813,11814],{"__ignoreMap":178},[220,11815,11816,11818,11820,11822,11824,11826,11828,11831,11833],{"class":222,"line":223},[220,11817,343],{"class":264},[220,11819,367],{"class":346},[220,11821,2791],{"class":264},[220,11823,10759],{"class":226},[220,11825,353],{"class":264},[220,11827,11683],{"class":230},[220,11829,11830],{"class":264},"rotation",[220,11832,11683],{"class":230},[220,11834,386],{"class":264},[15,11836,11837],{},"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,11839,11841],{"id":11840},"animating-props","Animating Props",[15,11843,11844],{},"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,11846,11847,11850],{},[159,11848,11849],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte\u002FSolid.",[212,11852,11854],{"className":409,"code":11853,"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,11855,11856,11866,11878,11888,11892,11900,11925,11929,11942,11947,11963,11972,11982,12002,12007,12023,12031,12040,12056,12060,12064,12068,12075,12080,12098,12103,12112,12142,12157,12166,12171,12176],{"__ignoreMap":178},[220,11857,11858,11860,11862,11864],{"class":222,"line":223},[220,11859,261],{"class":260},[220,11861,2682],{"class":264},[220,11863,268],{"class":260},[220,11865,2687],{"class":230},[220,11867,11868,11870,11873,11875],{"class":222,"line":179},[220,11869,261],{"class":260},[220,11871,11872],{"class":264}," { animate } ",[220,11874,268],{"class":260},[220,11876,11877],{"class":230}," 'motion'\n",[220,11879,11880,11882,11884,11886],{"class":222,"line":389},[220,11881,261],{"class":260},[220,11883,10512],{"class":264},[220,11885,268],{"class":260},[220,11887,287],{"class":230},[220,11889,11890],{"class":222,"line":399},[220,11891,647],{"emptyLinePlaceholder":194},[220,11893,11894,11896,11898],{"class":222,"line":644},[220,11895,2641],{"class":260},[220,11897,10748],{"class":226},[220,11899,2647],{"class":264},[220,11901,11902,11904,11906,11908,11910,11913,11915,11917,11919,11921,11923],{"class":222,"line":650},[220,11903,2705],{"class":260},[220,11905,2708],{"class":264},[220,11907,11678],{"class":420},[220,11909,1895],{"class":264},[220,11911,11912],{"class":420},"setRadius",[220,11914,2719],{"class":264},[220,11916,353],{"class":260},[220,11918,2724],{"class":226},[220,11920,2626],{"class":264},[220,11922,8231],{"class":420},[220,11924,2632],{"class":264},[220,11926,11927],{"class":222,"line":656},[220,11928,647],{"emptyLinePlaceholder":194},[220,11930,11931,11934,11937,11940],{"class":222,"line":673},[220,11932,11933],{"class":260}," async",[220,11935,11936],{"class":260}," function",[220,11938,11939],{"class":226}," pulse",[220,11941,2647],{"class":264},[220,11943,11944],{"class":222,"line":682},[220,11945,11946],{"class":609}," \u002F\u002F Grow then shrink with smooth easing\n",[220,11948,11949,11952,11955,11958,11960],{"class":222,"line":691},[220,11950,11951],{"class":260}," await",[220,11953,11954],{"class":226}," animate",[220,11956,11957],{"class":264},"(radius, ",[220,11959,8672],{"class":420},[220,11961,11962],{"class":264},", {\n",[220,11964,11965,11968,11970],{"class":222,"line":696},[220,11966,11967],{"class":264}," duration: ",[220,11969,7749],{"class":420},[220,11971,1760],{"class":264},[220,11973,11974,11977,11980],{"class":222,"line":702},[220,11975,11976],{"class":264}," easing: ",[220,11978,11979],{"class":230},"'ease-out'",[220,11981,1760],{"class":264},[220,11983,11984,11987,11989,11992,11994,11996,11999],{"class":222,"line":718},[220,11985,11986],{"class":226}," onUpdate",[220,11988,4324],{"class":264},[220,11990,11991],{"class":3621},"latest",[220,11993,4168],{"class":264},[220,11995,2762],{"class":260},[220,11997,11998],{"class":226}," setRadius",[220,12000,12001],{"class":264},"(latest)\n",[220,12003,12004],{"class":222,"line":727},[220,12005,12006],{"class":264}," })\n",[220,12008,12009,12011,12013,12015,12017,12019,12021],{"class":222,"line":2664},[220,12010,11951],{"class":260},[220,12012,11954],{"class":226},[220,12014,2626],{"class":264},[220,12016,8672],{"class":420},[220,12018,1895],{"class":264},[220,12020,8231],{"class":420},[220,12022,11962],{"class":264},[220,12024,12025,12027,12029],{"class":222,"line":3522},[220,12026,11967],{"class":264},[220,12028,7749],{"class":420},[220,12030,1760],{"class":264},[220,12032,12033,12035,12038],{"class":222,"line":9657},[220,12034,11976],{"class":264},[220,12036,12037],{"class":230},"'ease-in'",[220,12039,1760],{"class":264},[220,12041,12042,12044,12046,12048,12050,12052,12054],{"class":222,"line":9668},[220,12043,11986],{"class":226},[220,12045,4324],{"class":264},[220,12047,11991],{"class":3621},[220,12049,4168],{"class":264},[220,12051,2762],{"class":260},[220,12053,11998],{"class":226},[220,12055,12001],{"class":264},[220,12057,12058],{"class":222,"line":9673},[220,12059,12006],{"class":264},[220,12061,12062],{"class":222,"line":10994},[220,12063,3256],{"class":264},[220,12065,12066],{"class":222,"line":10999},[220,12067,647],{"emptyLinePlaceholder":194},[220,12069,12071,12073],{"class":222,"line":12070},22,[220,12072,2739],{"class":260},[220,12074,2742],{"class":264},[220,12076,12078],{"class":222,"line":12077},23,[220,12079,10791],{"class":264},[220,12081,12083,12085,12087,12089,12091,12094,12096],{"class":222,"line":12082},24,[220,12084,2813],{"class":264},[220,12086,10572],{"class":346},[220,12088,10809],{"class":226},[220,12090,353],{"class":260},[220,12092,12093],{"class":264},"{pulse}>Pulse\u003C\u002F",[220,12095,10572],{"class":346},[220,12097,359],{"class":264},[220,12099,12101],{"class":222,"line":12100},25,[220,12102,647],{"emptyLinePlaceholder":194},[220,12104,12106,12108,12110],{"class":222,"line":12105},26,[220,12107,2813],{"class":264},[220,12109,347],{"class":420},[220,12111,359],{"class":264},[220,12113,12115,12117,12119,12121,12123,12125,12127,12129,12132,12134,12136,12138,12140],{"class":222,"line":12114},27,[220,12116,10804],{"class":264},[220,12118,2553],{"class":420},[220,12120,9095],{"class":226},[220,12122,353],{"class":260},[220,12124,10660],{"class":230},[220,12126,6197],{"class":226},[220,12128,353],{"class":260},[220,12130,12131],{"class":264},"{radius} ",[220,12133,2711],{"class":226},[220,12135,353],{"class":260},[220,12137,743],{"class":264},[220,12139,2629],{"class":420},[220,12141,6297],{"class":264},[220,12143,12145,12147,12149,12151,12153,12155],{"class":222,"line":12144},28,[220,12146,10804],{"class":264},[220,12148,367],{"class":420},[220,12150,9134],{"class":226},[220,12152,353],{"class":260},[220,12154,10660],{"class":230},[220,12156,386],{"class":264},[220,12158,12160,12162,12164],{"class":222,"line":12159},29,[220,12161,10909],{"class":264},[220,12163,347],{"class":420},[220,12165,359],{"class":264},[220,12167,12169],{"class":222,"line":12168},30,[220,12170,10991],{"class":264},[220,12172,12174],{"class":222,"line":12173},31,[220,12175,2837],{"class":264},[220,12177,12179],{"class":222,"line":12178},32,[220,12180,749],{"class":264},[11642,12182],{":controls":12183,":preset":12184},"[{\"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,12186,12187],{},"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,12189,12191],{"id":12190},"performance-notes","Performance Notes",[15,12193,12194],{},"Reactive props update GPU uniforms directly. This means:",[34,12196,12197,12203,12209],{},[37,12198,12199,12202],{},[159,12200,12201],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[37,12204,12205,12208],{},[159,12206,12207],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[37,12210,12211,12214],{},[159,12212,12213],{},"Frame-rate friendly",": Animate as many props as you need",[15,12216,12217],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1504,12219,12220],{},"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":12222},[12223,12224,12225,12226,12227],{"id":10247,"depth":179,"text":10248},{"id":10474,"depth":179,"text":10475},{"id":11651,"depth":179,"text":11652},{"id":11840,"depth":179,"text":11841},{"id":12190,"depth":179,"text":12191},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1496,"description":12228},"docs\u002Fguide\u002F4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":12235,"title":1489,"body":12236,"category":188,"description":15003,"exclude":190,"extension":191,"forceFramework":190,"icon":15004,"meta":15005,"navigation":194,"path":1488,"seo":15006,"stem":15007,"__hash__":15008},"guide\u002Fdocs\u002Fguide\u002F5.layout-positioning.md",{"type":8,"value":12237,"toc":14987},[12238,12241,12249,12253,12262,12264,12269,12568,12572,12576,12579,13006,13010,13020,13369,13373,13376,13937,13941,13944,14258,14262,14266,14273,14414,14426,14430,14441,14516,14520,14523,14750,14754,14757,14984],[11,12239,1489],{"id":12240},"layout-positioning",[15,12242,1839,12243,12245,12246,12248],{},[99,12244,101],{}," component renders a ",[99,12247,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,12250,12252],{"id":12251},"the-canvas-model","The canvas model",[15,12254,12255,12256,12258,12259,12261],{},"Every ",[99,12257,101],{}," renders exactly one ",[99,12260,586],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,12263,594],{"id":593},[15,12265,12266,12267,1938],{},"Apply classes or styles directly to the ",[99,12268,101],{},[246,12270,12271,12390,12425,12460,12494],{":tabs":1557},[212,12272,12274],{"className":334,"code":12273,"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,12275,12276,12281,12295,12303,12311,12315,12320,12335,12343,12351,12355,12360,12374,12382],{"__ignoreMap":178},[220,12277,12278],{"class":222,"line":223},[220,12279,12280],{"class":609},"\u003C!-- Tailwind -->\n",[220,12282,12283,12285,12287,12289,12291,12293],{"class":222,"line":179},[220,12284,343],{"class":264},[220,12286,347],{"class":346},[220,12288,350],{"class":226},[220,12290,353],{"class":264},[220,12292,356],{"class":230},[220,12294,359],{"class":264},[220,12296,12297,12299,12301],{"class":222,"line":389},[220,12298,364],{"class":264},[220,12300,367],{"class":346},[220,12302,386],{"class":264},[220,12304,12305,12307,12309],{"class":222,"line":399},[220,12306,402],{"class":264},[220,12308,347],{"class":346},[220,12310,359],{"class":264},[220,12312,12313],{"class":222,"line":644},[220,12314,647],{"emptyLinePlaceholder":194},[220,12316,12317],{"class":222,"line":650},[220,12318,12319],{"class":609},"\u003C!-- CSS class -->\n",[220,12321,12322,12324,12326,12328,12330,12333],{"class":222,"line":656},[220,12323,343],{"class":264},[220,12325,347],{"class":346},[220,12327,350],{"class":226},[220,12329,353],{"class":264},[220,12331,12332],{"class":230},"\"hero-shader\"",[220,12334,359],{"class":264},[220,12336,12337,12339,12341],{"class":222,"line":673},[220,12338,364],{"class":264},[220,12340,367],{"class":346},[220,12342,386],{"class":264},[220,12344,12345,12347,12349],{"class":222,"line":682},[220,12346,402],{"class":264},[220,12348,347],{"class":346},[220,12350,359],{"class":264},[220,12352,12353],{"class":222,"line":691},[220,12354,647],{"emptyLinePlaceholder":194},[220,12356,12357],{"class":222,"line":696},[220,12358,12359],{"class":609},"\u003C!-- Inline -->\n",[220,12361,12362,12364,12366,12368,12370,12372],{"class":222,"line":702},[220,12363,343],{"class":264},[220,12365,347],{"class":346},[220,12367,663],{"class":226},[220,12369,353],{"class":264},[220,12371,668],{"class":230},[220,12373,359],{"class":264},[220,12375,12376,12378,12380],{"class":222,"line":718},[220,12377,364],{"class":264},[220,12379,367],{"class":346},[220,12381,386],{"class":264},[220,12383,12384,12386,12388],{"class":222,"line":727},[220,12385,402],{"class":264},[220,12387,347],{"class":346},[220,12389,359],{"class":264},[212,12391,12393],{"className":409,"code":12392,"language":411,"meta":178,"style":178},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12394,12395,12409,12417],{"__ignoreMap":178},[220,12396,12397,12399,12401,12403,12405,12407],{"class":222,"line":223},[220,12398,343],{"class":264},[220,12400,347],{"class":420},[220,12402,423],{"class":226},[220,12404,353],{"class":260},[220,12406,356],{"class":230},[220,12408,359],{"class":264},[220,12410,12411,12413,12415],{"class":222,"line":179},[220,12412,364],{"class":264},[220,12414,367],{"class":420},[220,12416,386],{"class":264},[220,12418,12419,12421,12423],{"class":222,"line":389},[220,12420,402],{"class":264},[220,12422,347],{"class":420},[220,12424,359],{"class":264},[212,12426,12428],{"className":468,"code":12427,"language":469,"meta":178,"style":178},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,12429,12430,12444,12452],{"__ignoreMap":178},[220,12431,12432,12434,12436,12438,12440,12442],{"class":222,"line":223},[220,12433,343],{"class":264},[220,12435,347],{"class":420},[220,12437,350],{"class":226},[220,12439,353],{"class":260},[220,12441,356],{"class":230},[220,12443,359],{"class":264},[220,12445,12446,12448,12450],{"class":222,"line":179},[220,12447,364],{"class":264},[220,12449,367],{"class":420},[220,12451,386],{"class":264},[220,12453,12454,12456,12458],{"class":222,"line":389},[220,12455,402],{"class":264},[220,12457,347],{"class":420},[220,12459,359],{"class":264},[212,12461,12462],{"className":468,"code":12427,"language":469,"meta":178,"style":178},[99,12463,12464,12478,12486],{"__ignoreMap":178},[220,12465,12466,12468,12470,12472,12474,12476],{"class":222,"line":223},[220,12467,343],{"class":264},[220,12469,347],{"class":420},[220,12471,350],{"class":226},[220,12473,353],{"class":260},[220,12475,356],{"class":230},[220,12477,359],{"class":264},[220,12479,12480,12482,12484],{"class":222,"line":179},[220,12481,364],{"class":264},[220,12483,367],{"class":420},[220,12485,386],{"class":264},[220,12487,12488,12490,12492],{"class":222,"line":389},[220,12489,402],{"class":264},[220,12491,347],{"class":420},[220,12493,359],{"class":264},[212,12495,12497],{"className":251,"code":12496,"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,12498,12499,12504,12523,12533,12543,12547],{"__ignoreMap":178},[220,12500,12501],{"class":222,"line":223},[220,12502,12503],{"class":609},"\u002F\u002F Apply sizing to the canvas element before calling createShader\n",[220,12505,12506,12508,12510,12512,12514,12516,12518,12521],{"class":222,"line":179},[220,12507,1735],{"class":260},[220,12509,3133],{"class":420},[220,12511,1741],{"class":260},[220,12513,3138],{"class":264},[220,12515,3141],{"class":226},[220,12517,2626],{"class":264},[220,12519,12520],{"class":230},"'my-shader'",[220,12522,2632],{"class":264},[220,12524,12525,12528,12530],{"class":222,"line":389},[220,12526,12527],{"class":264},"canvas.style.width ",[220,12529,353],{"class":260},[220,12531,12532],{"class":230}," '100%'\n",[220,12534,12535,12538,12540],{"class":222,"line":399},[220,12536,12537],{"class":264},"canvas.style.height ",[220,12539,353],{"class":260},[220,12541,12542],{"class":230}," '400px'\n",[220,12544,12545],{"class":222,"line":644},[220,12546,647],{"emptyLinePlaceholder":194},[220,12548,12549,12551,12553,12555,12557,12559,12562,12565],{"class":222,"line":650},[220,12550,1735],{"class":260},[220,12552,1738],{"class":420},[220,12554,1741],{"class":260},[220,12556,1744],{"class":260},[220,12558,1747],{"class":226},[220,12560,12561],{"class":264},"(canvas, { components: [",[220,12563,12564],{"class":260},"...",[220,12566,12567],{"class":264},"] })\n",[23,12569,12571],{"id":12570},"common-layout-patterns","Common layout patterns",[3262,12573,12575],{"id":12574},"full-page-background","Full-page background",[15,12577,12578],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[246,12580,12581,12656,12733,12799,12872],{":tabs":1557},[212,12582,12584],{"className":334,"code":12583,"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,12585,12586,12591,12606,12615,12623,12627,12643,12648],{"__ignoreMap":178},[220,12587,12588],{"class":222,"line":223},[220,12589,12590],{"class":609},"\u003C!-- In your layout or App.vue -->\n",[220,12592,12593,12595,12597,12599,12601,12604],{"class":222,"line":179},[220,12594,343],{"class":264},[220,12596,347],{"class":346},[220,12598,350],{"class":226},[220,12600,353],{"class":264},[220,12602,12603],{"class":230},"\"fixed inset-0 -z-10\"",[220,12605,359],{"class":264},[220,12607,12608,12610,12613],{"class":222,"line":389},[220,12609,364],{"class":264},[220,12611,12612],{"class":346},"Aurora",[220,12614,386],{"class":264},[220,12616,12617,12619,12621],{"class":222,"line":399},[220,12618,402],{"class":264},[220,12620,347],{"class":346},[220,12622,359],{"class":264},[220,12624,12625],{"class":222,"line":644},[220,12626,647],{"emptyLinePlaceholder":194},[220,12628,12629,12631,12634,12636,12638,12641],{"class":222,"line":650},[220,12630,343],{"class":264},[220,12632,12633],{"class":346},"main",[220,12635,350],{"class":226},[220,12637,353],{"class":264},[220,12639,12640],{"class":230},"\"relative z-10\"",[220,12642,359],{"class":264},[220,12644,12645],{"class":222,"line":656},[220,12646,12647],{"class":609}," \u003C!-- Your page content scrolls over the shader -->\n",[220,12649,12650,12652,12654],{"class":222,"line":673},[220,12651,402],{"class":264},[220,12653,12633],{"class":346},[220,12655,359],{"class":264},[212,12657,12659],{"className":409,"code":12658,"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,12660,12661,12666,12680,12688,12696,12710,12720,12728],{"__ignoreMap":178},[220,12662,12663],{"class":222,"line":223},[220,12664,12665],{"class":264},"\u003C>\n",[220,12667,12668,12670,12672,12674,12676,12678],{"class":222,"line":179},[220,12669,364],{"class":264},[220,12671,347],{"class":420},[220,12673,423],{"class":226},[220,12675,353],{"class":260},[220,12677,12603],{"class":230},[220,12679,359],{"class":264},[220,12681,12682,12684,12686],{"class":222,"line":389},[220,12683,2550],{"class":264},[220,12685,12612],{"class":420},[220,12687,386],{"class":264},[220,12689,12690,12692,12694],{"class":222,"line":399},[220,12691,2567],{"class":264},[220,12693,347],{"class":420},[220,12695,359],{"class":264},[220,12697,12698,12700,12702,12704,12706,12708],{"class":222,"line":644},[220,12699,364],{"class":264},[220,12701,12633],{"class":346},[220,12703,423],{"class":226},[220,12705,353],{"class":260},[220,12707,12640],{"class":230},[220,12709,359],{"class":264},[220,12711,12712,12715,12718],{"class":222,"line":650},[220,12713,12714],{"class":264}," {",[220,12716,12717],{"class":609},"\u002F* Your page content *\u002F",[220,12719,749],{"class":264},[220,12721,12722,12724,12726],{"class":222,"line":656},[220,12723,2567],{"class":264},[220,12725,12633],{"class":346},[220,12727,359],{"class":264},[220,12729,12730],{"class":222,"line":673},[220,12731,12732],{"class":264},"\u003C\u002F>\n",[212,12734,12736],{"className":468,"code":12735,"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,12737,12738,12752,12760,12768,12772,12786,12791],{"__ignoreMap":178},[220,12739,12740,12742,12744,12746,12748,12750],{"class":222,"line":223},[220,12741,343],{"class":264},[220,12743,347],{"class":420},[220,12745,350],{"class":226},[220,12747,353],{"class":260},[220,12749,12603],{"class":230},[220,12751,359],{"class":264},[220,12753,12754,12756,12758],{"class":222,"line":179},[220,12755,364],{"class":264},[220,12757,12612],{"class":420},[220,12759,386],{"class":264},[220,12761,12762,12764,12766],{"class":222,"line":389},[220,12763,402],{"class":264},[220,12765,347],{"class":420},[220,12767,359],{"class":264},[220,12769,12770],{"class":222,"line":399},[220,12771,647],{"emptyLinePlaceholder":194},[220,12773,12774,12776,12778,12780,12782,12784],{"class":222,"line":644},[220,12775,343],{"class":264},[220,12777,12633],{"class":346},[220,12779,350],{"class":226},[220,12781,353],{"class":260},[220,12783,12640],{"class":230},[220,12785,359],{"class":264},[220,12787,12788],{"class":222,"line":650},[220,12789,12790],{"class":264}," \u003C!-- Your page content -->\n",[220,12792,12793,12795,12797],{"class":222,"line":656},[220,12794,402],{"class":264},[220,12796,12633],{"class":346},[220,12798,359],{"class":264},[212,12800,12802],{"className":468,"code":12801,"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,12803,12804,12808,12822,12830,12838,12852,12860,12868],{"__ignoreMap":178},[220,12805,12806],{"class":222,"line":223},[220,12807,12665],{"class":264},[220,12809,12810,12812,12814,12816,12818,12820],{"class":222,"line":179},[220,12811,364],{"class":264},[220,12813,347],{"class":420},[220,12815,350],{"class":226},[220,12817,353],{"class":260},[220,12819,12603],{"class":230},[220,12821,359],{"class":264},[220,12823,12824,12826,12828],{"class":222,"line":389},[220,12825,2550],{"class":264},[220,12827,12612],{"class":420},[220,12829,386],{"class":264},[220,12831,12832,12834,12836],{"class":222,"line":399},[220,12833,2567],{"class":264},[220,12835,347],{"class":420},[220,12837,359],{"class":264},[220,12839,12840,12842,12844,12846,12848,12850],{"class":222,"line":644},[220,12841,364],{"class":264},[220,12843,12633],{"class":346},[220,12845,350],{"class":226},[220,12847,353],{"class":260},[220,12849,12640],{"class":230},[220,12851,359],{"class":264},[220,12853,12854,12856,12858],{"class":222,"line":650},[220,12855,12714],{"class":264},[220,12857,12717],{"class":609},[220,12859,749],{"class":264},[220,12861,12862,12864,12866],{"class":222,"line":656},[220,12863,2567],{"class":264},[220,12865,12633],{"class":346},[220,12867,359],{"class":264},[220,12869,12870],{"class":222,"line":673},[220,12871,12732],{"class":264},[212,12873,12877],{"className":12874,"code":12875,"language":12876,"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,12878,12879,12906,12926,12930,12946,12957,12982,12993,12998],{"__ignoreMap":178},[220,12880,12881,12883,12886,12888,12890,12893,12895,12897,12900,12902,12904],{"class":222,"line":223},[220,12882,343],{"class":264},[220,12884,12885],{"class":346},"canvas",[220,12887,9095],{"class":226},[220,12889,353],{"class":264},[220,12891,12892],{"class":230},"\"bg\"",[220,12894,663],{"class":226},[220,12896,353],{"class":264},[220,12898,12899],{"class":230},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[220,12901,3804],{"class":264},[220,12903,12885],{"class":346},[220,12905,359],{"class":264},[220,12907,12908,12910,12912,12914,12916,12919,12922,12924],{"class":222,"line":179},[220,12909,343],{"class":264},[220,12911,12633],{"class":346},[220,12913,663],{"class":226},[220,12915,353],{"class":264},[220,12917,12918],{"class":230},"\"position:relative;z-index:10;\"",[220,12920,12921],{"class":264},">Your content\u003C\u002F",[220,12923,12633],{"class":346},[220,12925,359],{"class":264},[220,12927,12928],{"class":222,"line":389},[220,12929,647],{"emptyLinePlaceholder":194},[220,12931,12932,12934,12936,12939,12941,12944],{"class":222,"line":399},[220,12933,343],{"class":264},[220,12935,2590],{"class":346},[220,12937,12938],{"class":226}," type",[220,12940,353],{"class":264},[220,12942,12943],{"class":230},"\"module\"",[220,12945,359],{"class":264},[220,12947,12948,12951,12953,12955],{"class":222,"line":644},[220,12949,12950],{"class":260}," import",[220,12952,11507],{"class":264},[220,12954,268],{"class":260},[220,12956,4007],{"class":230},[220,12958,12959,12961,12963,12965,12967,12969,12972,12974,12976,12979],{"class":222,"line":650},[220,12960,2705],{"class":260},[220,12962,1738],{"class":420},[220,12964,1741],{"class":260},[220,12966,1744],{"class":260},[220,12968,1747],{"class":226},[220,12970,12971],{"class":264},"(document.",[220,12973,3141],{"class":226},[220,12975,2626],{"class":264},[220,12977,12978],{"class":230},"'bg'",[220,12980,12981],{"class":264},"), {\n",[220,12983,12984,12987,12990],{"class":222,"line":656},[220,12985,12986],{"class":264}," components: [{ type: ",[220,12988,12989],{"class":230},"'Aurora'",[220,12991,12992],{"class":264},", props: {} }]\n",[220,12994,12995],{"class":222,"line":673},[220,12996,12997],{"class":264}," })\n",[220,12999,13000,13002,13004],{"class":222,"line":682},[220,13001,402],{"class":264},[220,13003,2590],{"class":346},[220,13005,359],{"class":264},[3262,13007,13009],{"id":13008},"section-background","Section background",[15,13011,13012,13013,1864,13016,13019],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[99,13014,13015],{},"position: relative",[99,13017,13018],{},"overflow: hidden"," to contain the canvas:",[246,13021,13022,13127,13220,13295],{":tabs":248},[212,13023,13025],{"className":334,"code":13024,"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,13026,13027,13043,13058,13067,13075,13079,13099,13119],{"__ignoreMap":178},[220,13028,13029,13031,13034,13036,13038,13041],{"class":222,"line":223},[220,13030,343],{"class":264},[220,13032,13033],{"class":346},"section",[220,13035,350],{"class":226},[220,13037,353],{"class":264},[220,13039,13040],{"class":230},"\"relative overflow-hidden py-24 px-8\"",[220,13042,359],{"class":264},[220,13044,13045,13047,13049,13051,13053,13056],{"class":222,"line":179},[220,13046,364],{"class":264},[220,13048,347],{"class":346},[220,13050,350],{"class":226},[220,13052,353],{"class":264},[220,13054,13055],{"class":230},"\"absolute inset-0 -z-10\"",[220,13057,359],{"class":264},[220,13059,13060,13062,13065],{"class":222,"line":389},[220,13061,2550],{"class":264},[220,13063,13064],{"class":346},"Plasma",[220,13066,386],{"class":264},[220,13068,13069,13071,13073],{"class":222,"line":399},[220,13070,2567],{"class":264},[220,13072,347],{"class":346},[220,13074,359],{"class":264},[220,13076,13077],{"class":222,"line":644},[220,13078,647],{"emptyLinePlaceholder":194},[220,13080,13081,13083,13085,13087,13089,13092,13095,13097],{"class":222,"line":650},[220,13082,364],{"class":264},[220,13084,23],{"class":346},[220,13086,350],{"class":226},[220,13088,353],{"class":264},[220,13090,13091],{"class":230},"\"relative text-4xl font-bold text-white\"",[220,13093,13094],{"class":264},">Section Heading\u003C\u002F",[220,13096,23],{"class":346},[220,13098,359],{"class":264},[220,13100,13101,13103,13105,13107,13109,13112,13115,13117],{"class":222,"line":656},[220,13102,364],{"class":264},[220,13104,15],{"class":346},[220,13106,350],{"class":226},[220,13108,353],{"class":264},[220,13110,13111],{"class":230},"\"relative text-white\u002F80 mt-4\"",[220,13113,13114],{"class":264},">Content above the shader.\u003C\u002F",[220,13116,15],{"class":346},[220,13118,359],{"class":264},[220,13120,13121,13123,13125],{"class":222,"line":673},[220,13122,402],{"class":264},[220,13124,13033],{"class":346},[220,13126,359],{"class":264},[212,13128,13130],{"className":409,"code":13129,"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,13131,13132,13146,13160,13168,13176,13194,13212],{"__ignoreMap":178},[220,13133,13134,13136,13138,13140,13142,13144],{"class":222,"line":223},[220,13135,343],{"class":264},[220,13137,13033],{"class":346},[220,13139,423],{"class":226},[220,13141,353],{"class":260},[220,13143,13040],{"class":230},[220,13145,359],{"class":264},[220,13147,13148,13150,13152,13154,13156,13158],{"class":222,"line":179},[220,13149,364],{"class":264},[220,13151,347],{"class":420},[220,13153,423],{"class":226},[220,13155,353],{"class":260},[220,13157,13055],{"class":230},[220,13159,359],{"class":264},[220,13161,13162,13164,13166],{"class":222,"line":389},[220,13163,2550],{"class":264},[220,13165,13064],{"class":420},[220,13167,386],{"class":264},[220,13169,13170,13172,13174],{"class":222,"line":399},[220,13171,2567],{"class":264},[220,13173,347],{"class":420},[220,13175,359],{"class":264},[220,13177,13178,13180,13182,13184,13186,13188,13190,13192],{"class":222,"line":644},[220,13179,364],{"class":264},[220,13181,23],{"class":346},[220,13183,423],{"class":226},[220,13185,353],{"class":260},[220,13187,13091],{"class":230},[220,13189,13094],{"class":264},[220,13191,23],{"class":346},[220,13193,359],{"class":264},[220,13195,13196,13198,13200,13202,13204,13206,13208,13210],{"class":222,"line":650},[220,13197,364],{"class":264},[220,13199,15],{"class":346},[220,13201,423],{"class":226},[220,13203,353],{"class":260},[220,13205,13111],{"class":230},[220,13207,13114],{"class":264},[220,13209,15],{"class":346},[220,13211,359],{"class":264},[220,13213,13214,13216,13218],{"class":222,"line":656},[220,13215,402],{"class":264},[220,13217,13033],{"class":346},[220,13219,359],{"class":264},[212,13221,13223],{"className":468,"code":13222,"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,13224,13225,13239,13253,13261,13269,13287],{"__ignoreMap":178},[220,13226,13227,13229,13231,13233,13235,13237],{"class":222,"line":223},[220,13228,343],{"class":264},[220,13230,13033],{"class":346},[220,13232,350],{"class":226},[220,13234,353],{"class":260},[220,13236,13040],{"class":230},[220,13238,359],{"class":264},[220,13240,13241,13243,13245,13247,13249,13251],{"class":222,"line":179},[220,13242,364],{"class":264},[220,13244,347],{"class":420},[220,13246,350],{"class":226},[220,13248,353],{"class":260},[220,13250,13055],{"class":230},[220,13252,359],{"class":264},[220,13254,13255,13257,13259],{"class":222,"line":389},[220,13256,2550],{"class":264},[220,13258,13064],{"class":420},[220,13260,386],{"class":264},[220,13262,13263,13265,13267],{"class":222,"line":399},[220,13264,2567],{"class":264},[220,13266,347],{"class":420},[220,13268,359],{"class":264},[220,13270,13271,13273,13275,13277,13279,13281,13283,13285],{"class":222,"line":644},[220,13272,364],{"class":264},[220,13274,23],{"class":346},[220,13276,350],{"class":226},[220,13278,353],{"class":260},[220,13280,13091],{"class":230},[220,13282,13094],{"class":264},[220,13284,23],{"class":346},[220,13286,359],{"class":264},[220,13288,13289,13291,13293],{"class":222,"line":650},[220,13290,402],{"class":264},[220,13292,13033],{"class":346},[220,13294,359],{"class":264},[212,13296,13297],{"className":468,"code":13222,"language":469,"meta":178,"style":178},[99,13298,13299,13313,13327,13335,13343,13361],{"__ignoreMap":178},[220,13300,13301,13303,13305,13307,13309,13311],{"class":222,"line":223},[220,13302,343],{"class":264},[220,13304,13033],{"class":346},[220,13306,350],{"class":226},[220,13308,353],{"class":260},[220,13310,13040],{"class":230},[220,13312,359],{"class":264},[220,13314,13315,13317,13319,13321,13323,13325],{"class":222,"line":179},[220,13316,364],{"class":264},[220,13318,347],{"class":420},[220,13320,350],{"class":226},[220,13322,353],{"class":260},[220,13324,13055],{"class":230},[220,13326,359],{"class":264},[220,13328,13329,13331,13333],{"class":222,"line":389},[220,13330,2550],{"class":264},[220,13332,13064],{"class":420},[220,13334,386],{"class":264},[220,13336,13337,13339,13341],{"class":222,"line":399},[220,13338,2567],{"class":264},[220,13340,347],{"class":420},[220,13342,359],{"class":264},[220,13344,13345,13347,13349,13351,13353,13355,13357,13359],{"class":222,"line":644},[220,13346,364],{"class":264},[220,13348,23],{"class":346},[220,13350,350],{"class":226},[220,13352,353],{"class":260},[220,13354,13091],{"class":230},[220,13356,13094],{"class":264},[220,13358,23],{"class":346},[220,13360,359],{"class":264},[220,13362,13363,13365,13367],{"class":222,"line":650},[220,13364,402],{"class":264},[220,13366,13033],{"class":346},[220,13368,359],{"class":264},[3262,13370,13372],{"id":13371},"card-with-shader-fill","Card with shader fill",[15,13374,13375],{},"A shader used as the visual background of a card or panel:",[246,13377,13378,13538,13684,13811],{":tabs":248},[212,13379,13381],{"className":334,"code":13380,"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,13382,13383,13398,13413,13428,13451,13459,13463,13468,13482,13502,13522,13530],{"__ignoreMap":178},[220,13384,13385,13387,13389,13391,13393,13396],{"class":222,"line":223},[220,13386,343],{"class":264},[220,13388,3398],{"class":346},[220,13390,350],{"class":226},[220,13392,353],{"class":264},[220,13394,13395],{"class":230},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[220,13397,359],{"class":264},[220,13399,13400,13402,13404,13406,13408,13411],{"class":222,"line":179},[220,13401,364],{"class":264},[220,13403,347],{"class":346},[220,13405,350],{"class":226},[220,13407,353],{"class":264},[220,13409,13410],{"class":230},"\"absolute inset-0\"",[220,13412,359],{"class":264},[220,13414,13415,13417,13419,13421,13423,13426],{"class":222,"line":389},[220,13416,2550],{"class":264},[220,13418,1585],{"class":346},[220,13420,1588],{"class":226},[220,13422,353],{"class":264},[220,13424,13425],{"class":230},"\"#1e1b4b\"",[220,13427,386],{"class":264},[220,13429,13430,13432,13434,13437,13439,13442,13444,13446,13449],{"class":222,"line":399},[220,13431,2550],{"class":264},[220,13433,11787],{"class":346},[220,13435,13436],{"class":226}," :intensity",[220,13438,353],{"class":264},[220,13440,13441],{"class":230},"\"0.4\"",[220,13443,1588],{"class":226},[220,13445,353],{"class":264},[220,13447,13448],{"class":230},"\"#6366f1\"",[220,13450,386],{"class":264},[220,13452,13453,13455,13457],{"class":222,"line":644},[220,13454,2567],{"class":264},[220,13456,347],{"class":346},[220,13458,359],{"class":264},[220,13460,13461],{"class":222,"line":650},[220,13462,647],{"emptyLinePlaceholder":194},[220,13464,13465],{"class":222,"line":656},[220,13466,13467],{"class":609}," \u003C!-- Content sits above the shader -->\n",[220,13469,13470,13472,13474,13476,13478,13480],{"class":222,"line":673},[220,13471,364],{"class":264},[220,13473,3398],{"class":346},[220,13475,350],{"class":226},[220,13477,353],{"class":264},[220,13479,12640],{"class":230},[220,13481,359],{"class":264},[220,13483,13484,13486,13488,13490,13492,13495,13498,13500],{"class":222,"line":682},[220,13485,2550],{"class":264},[220,13487,3262],{"class":346},[220,13489,350],{"class":226},[220,13491,353],{"class":264},[220,13493,13494],{"class":230},"\"text-xl font-semibold\"",[220,13496,13497],{"class":264},">Card Title\u003C\u002F",[220,13499,3262],{"class":346},[220,13501,359],{"class":264},[220,13503,13504,13506,13508,13510,13512,13515,13518,13520],{"class":222,"line":691},[220,13505,2550],{"class":264},[220,13507,15],{"class":346},[220,13509,350],{"class":226},[220,13511,353],{"class":264},[220,13513,13514],{"class":230},"\"text-white\u002F70 mt-2\"",[220,13516,13517],{"class":264},">Card description here.\u003C\u002F",[220,13519,15],{"class":346},[220,13521,359],{"class":264},[220,13523,13524,13526,13528],{"class":222,"line":696},[220,13525,2567],{"class":264},[220,13527,3398],{"class":346},[220,13529,359],{"class":264},[220,13531,13532,13534,13536],{"class":222,"line":702},[220,13533,402],{"class":264},[220,13535,3398],{"class":346},[220,13537,359],{"class":264},[212,13539,13541],{"className":409,"code":13540,"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,13542,13543,13557,13571,13585,13610,13618,13632,13650,13668,13676],{"__ignoreMap":178},[220,13544,13545,13547,13549,13551,13553,13555],{"class":222,"line":223},[220,13546,343],{"class":264},[220,13548,3398],{"class":346},[220,13550,423],{"class":226},[220,13552,353],{"class":260},[220,13554,13395],{"class":230},[220,13556,359],{"class":264},[220,13558,13559,13561,13563,13565,13567,13569],{"class":222,"line":179},[220,13560,364],{"class":264},[220,13562,347],{"class":420},[220,13564,423],{"class":226},[220,13566,353],{"class":260},[220,13568,13410],{"class":230},[220,13570,359],{"class":264},[220,13572,13573,13575,13577,13579,13581,13583],{"class":222,"line":389},[220,13574,2550],{"class":264},[220,13576,1585],{"class":420},[220,13578,1588],{"class":226},[220,13580,353],{"class":260},[220,13582,13425],{"class":230},[220,13584,386],{"class":264},[220,13586,13587,13589,13591,13594,13596,13598,13600,13602,13604,13606,13608],{"class":222,"line":399},[220,13588,2550],{"class":264},[220,13590,11787],{"class":420},[220,13592,13593],{"class":226}," intensity",[220,13595,353],{"class":260},[220,13597,743],{"class":264},[220,13599,8244],{"class":420},[220,13601,2914],{"class":264},[220,13603,8057],{"class":226},[220,13605,353],{"class":260},[220,13607,13448],{"class":230},[220,13609,386],{"class":264},[220,13611,13612,13614,13616],{"class":222,"line":644},[220,13613,2567],{"class":264},[220,13615,347],{"class":420},[220,13617,359],{"class":264},[220,13619,13620,13622,13624,13626,13628,13630],{"class":222,"line":650},[220,13621,364],{"class":264},[220,13623,3398],{"class":346},[220,13625,423],{"class":226},[220,13627,353],{"class":260},[220,13629,12640],{"class":230},[220,13631,359],{"class":264},[220,13633,13634,13636,13638,13640,13642,13644,13646,13648],{"class":222,"line":656},[220,13635,2550],{"class":264},[220,13637,3262],{"class":346},[220,13639,423],{"class":226},[220,13641,353],{"class":260},[220,13643,13494],{"class":230},[220,13645,13497],{"class":264},[220,13647,3262],{"class":346},[220,13649,359],{"class":264},[220,13651,13652,13654,13656,13658,13660,13662,13664,13666],{"class":222,"line":673},[220,13653,2550],{"class":264},[220,13655,15],{"class":346},[220,13657,423],{"class":226},[220,13659,353],{"class":260},[220,13661,13514],{"class":230},[220,13663,13517],{"class":264},[220,13665,15],{"class":346},[220,13667,359],{"class":264},[220,13669,13670,13672,13674],{"class":222,"line":682},[220,13671,2567],{"class":264},[220,13673,3398],{"class":346},[220,13675,359],{"class":264},[220,13677,13678,13680,13682],{"class":222,"line":691},[220,13679,402],{"class":264},[220,13681,3398],{"class":346},[220,13683,359],{"class":264},[212,13685,13687],{"className":468,"code":13686,"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,13688,13689,13703,13717,13731,13755,13763,13777,13795,13803],{"__ignoreMap":178},[220,13690,13691,13693,13695,13697,13699,13701],{"class":222,"line":223},[220,13692,343],{"class":264},[220,13694,3398],{"class":346},[220,13696,350],{"class":226},[220,13698,353],{"class":260},[220,13700,13395],{"class":230},[220,13702,359],{"class":264},[220,13704,13705,13707,13709,13711,13713,13715],{"class":222,"line":179},[220,13706,364],{"class":264},[220,13708,347],{"class":420},[220,13710,350],{"class":226},[220,13712,353],{"class":260},[220,13714,13410],{"class":230},[220,13716,359],{"class":264},[220,13718,13719,13721,13723,13725,13727,13729],{"class":222,"line":389},[220,13720,2550],{"class":264},[220,13722,1585],{"class":420},[220,13724,1588],{"class":226},[220,13726,353],{"class":260},[220,13728,13425],{"class":230},[220,13730,386],{"class":264},[220,13732,13733,13735,13737,13739,13741,13743,13745,13747,13749,13751,13753],{"class":222,"line":399},[220,13734,2550],{"class":264},[220,13736,11787],{"class":420},[220,13738,13593],{"class":226},[220,13740,353],{"class":260},[220,13742,743],{"class":264},[220,13744,8244],{"class":420},[220,13746,2914],{"class":264},[220,13748,8057],{"class":226},[220,13750,353],{"class":260},[220,13752,13448],{"class":230},[220,13754,386],{"class":264},[220,13756,13757,13759,13761],{"class":222,"line":644},[220,13758,2567],{"class":264},[220,13760,347],{"class":420},[220,13762,359],{"class":264},[220,13764,13765,13767,13769,13771,13773,13775],{"class":222,"line":650},[220,13766,364],{"class":264},[220,13768,3398],{"class":346},[220,13770,350],{"class":226},[220,13772,353],{"class":260},[220,13774,12640],{"class":230},[220,13776,359],{"class":264},[220,13778,13779,13781,13783,13785,13787,13789,13791,13793],{"class":222,"line":656},[220,13780,2550],{"class":264},[220,13782,3262],{"class":346},[220,13784,350],{"class":226},[220,13786,353],{"class":260},[220,13788,13494],{"class":230},[220,13790,13497],{"class":264},[220,13792,3262],{"class":346},[220,13794,359],{"class":264},[220,13796,13797,13799,13801],{"class":222,"line":673},[220,13798,2567],{"class":264},[220,13800,3398],{"class":346},[220,13802,359],{"class":264},[220,13804,13805,13807,13809],{"class":222,"line":682},[220,13806,402],{"class":264},[220,13808,3398],{"class":346},[220,13810,359],{"class":264},[212,13812,13813],{"className":468,"code":13686,"language":469,"meta":178,"style":178},[99,13814,13815,13829,13843,13857,13881,13889,13903,13921,13929],{"__ignoreMap":178},[220,13816,13817,13819,13821,13823,13825,13827],{"class":222,"line":223},[220,13818,343],{"class":264},[220,13820,3398],{"class":346},[220,13822,350],{"class":226},[220,13824,353],{"class":260},[220,13826,13395],{"class":230},[220,13828,359],{"class":264},[220,13830,13831,13833,13835,13837,13839,13841],{"class":222,"line":179},[220,13832,364],{"class":264},[220,13834,347],{"class":420},[220,13836,350],{"class":226},[220,13838,353],{"class":260},[220,13840,13410],{"class":230},[220,13842,359],{"class":264},[220,13844,13845,13847,13849,13851,13853,13855],{"class":222,"line":389},[220,13846,2550],{"class":264},[220,13848,1585],{"class":420},[220,13850,1588],{"class":226},[220,13852,353],{"class":260},[220,13854,13425],{"class":230},[220,13856,386],{"class":264},[220,13858,13859,13861,13863,13865,13867,13869,13871,13873,13875,13877,13879],{"class":222,"line":399},[220,13860,2550],{"class":264},[220,13862,11787],{"class":420},[220,13864,13593],{"class":226},[220,13866,353],{"class":260},[220,13868,743],{"class":264},[220,13870,8244],{"class":420},[220,13872,2914],{"class":264},[220,13874,8057],{"class":226},[220,13876,353],{"class":260},[220,13878,13448],{"class":230},[220,13880,386],{"class":264},[220,13882,13883,13885,13887],{"class":222,"line":644},[220,13884,2567],{"class":264},[220,13886,347],{"class":420},[220,13888,359],{"class":264},[220,13890,13891,13893,13895,13897,13899,13901],{"class":222,"line":650},[220,13892,364],{"class":264},[220,13894,3398],{"class":346},[220,13896,350],{"class":226},[220,13898,353],{"class":260},[220,13900,12640],{"class":230},[220,13902,359],{"class":264},[220,13904,13905,13907,13909,13911,13913,13915,13917,13919],{"class":222,"line":656},[220,13906,2550],{"class":264},[220,13908,3262],{"class":346},[220,13910,350],{"class":226},[220,13912,353],{"class":260},[220,13914,13494],{"class":230},[220,13916,13497],{"class":264},[220,13918,3262],{"class":346},[220,13920,359],{"class":264},[220,13922,13923,13925,13927],{"class":222,"line":673},[220,13924,2567],{"class":264},[220,13926,3398],{"class":346},[220,13928,359],{"class":264},[220,13930,13931,13933,13935],{"class":222,"line":682},[220,13932,402],{"class":264},[220,13934,3398],{"class":346},[220,13936,359],{"class":264},[3262,13938,13940],{"id":13939},"inline-content-block","Inline content block",[15,13942,13943],{},"A shader that flows naturally in document layout, like an image or video:",[246,13945,13946,14034,14109,14184],{":tabs":248},[212,13947,13949],{"className":334,"code":13948,"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,13950,13951,13960,13973,13977,13992,14001,14009,14013,14026],{"__ignoreMap":178},[220,13952,13953,13955,13958],{"class":222,"line":223},[220,13954,343],{"class":264},[220,13956,13957],{"class":346},"article",[220,13959,359],{"class":264},[220,13961,13962,13964,13966,13969,13971],{"class":222,"line":179},[220,13963,364],{"class":264},[220,13965,15],{"class":346},[220,13967,13968],{"class":264},">Text before the shader.\u003C\u002F",[220,13970,15],{"class":346},[220,13972,359],{"class":264},[220,13974,13975],{"class":222,"line":389},[220,13976,647],{"emptyLinePlaceholder":194},[220,13978,13979,13981,13983,13985,13987,13990],{"class":222,"line":399},[220,13980,364],{"class":264},[220,13982,347],{"class":346},[220,13984,350],{"class":226},[220,13986,353],{"class":264},[220,13988,13989],{"class":230},"\"w-full aspect-video my-8 rounded-xl\"",[220,13991,359],{"class":264},[220,13993,13994,13996,13999],{"class":222,"line":644},[220,13995,2550],{"class":264},[220,13997,13998],{"class":346},"Swirl",[220,14000,386],{"class":264},[220,14002,14003,14005,14007],{"class":222,"line":650},[220,14004,2567],{"class":264},[220,14006,347],{"class":346},[220,14008,359],{"class":264},[220,14010,14011],{"class":222,"line":656},[220,14012,647],{"emptyLinePlaceholder":194},[220,14014,14015,14017,14019,14022,14024],{"class":222,"line":673},[220,14016,364],{"class":264},[220,14018,15],{"class":346},[220,14020,14021],{"class":264},">Text after the shader continues here.\u003C\u002F",[220,14023,15],{"class":346},[220,14025,359],{"class":264},[220,14027,14028,14030,14032],{"class":222,"line":682},[220,14029,402],{"class":264},[220,14031,13957],{"class":346},[220,14033,359],{"class":264},[212,14035,14037],{"className":409,"code":14036,"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,14038,14039,14047,14059,14073,14081,14089,14101],{"__ignoreMap":178},[220,14040,14041,14043,14045],{"class":222,"line":223},[220,14042,343],{"class":264},[220,14044,13957],{"class":346},[220,14046,359],{"class":264},[220,14048,14049,14051,14053,14055,14057],{"class":222,"line":179},[220,14050,364],{"class":264},[220,14052,15],{"class":346},[220,14054,13968],{"class":264},[220,14056,15],{"class":346},[220,14058,359],{"class":264},[220,14060,14061,14063,14065,14067,14069,14071],{"class":222,"line":389},[220,14062,364],{"class":264},[220,14064,347],{"class":420},[220,14066,423],{"class":226},[220,14068,353],{"class":260},[220,14070,13989],{"class":230},[220,14072,359],{"class":264},[220,14074,14075,14077,14079],{"class":222,"line":399},[220,14076,2550],{"class":264},[220,14078,13998],{"class":420},[220,14080,386],{"class":264},[220,14082,14083,14085,14087],{"class":222,"line":644},[220,14084,2567],{"class":264},[220,14086,347],{"class":420},[220,14088,359],{"class":264},[220,14090,14091,14093,14095,14097,14099],{"class":222,"line":650},[220,14092,364],{"class":264},[220,14094,15],{"class":346},[220,14096,14021],{"class":264},[220,14098,15],{"class":346},[220,14100,359],{"class":264},[220,14102,14103,14105,14107],{"class":222,"line":656},[220,14104,402],{"class":264},[220,14106,13957],{"class":346},[220,14108,359],{"class":264},[212,14110,14112],{"className":468,"code":14111,"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,14113,14114,14122,14134,14148,14156,14164,14176],{"__ignoreMap":178},[220,14115,14116,14118,14120],{"class":222,"line":223},[220,14117,343],{"class":264},[220,14119,13957],{"class":346},[220,14121,359],{"class":264},[220,14123,14124,14126,14128,14130,14132],{"class":222,"line":179},[220,14125,364],{"class":264},[220,14127,15],{"class":346},[220,14129,13968],{"class":264},[220,14131,15],{"class":346},[220,14133,359],{"class":264},[220,14135,14136,14138,14140,14142,14144,14146],{"class":222,"line":389},[220,14137,364],{"class":264},[220,14139,347],{"class":420},[220,14141,350],{"class":226},[220,14143,353],{"class":260},[220,14145,13989],{"class":230},[220,14147,359],{"class":264},[220,14149,14150,14152,14154],{"class":222,"line":399},[220,14151,2550],{"class":264},[220,14153,13998],{"class":420},[220,14155,386],{"class":264},[220,14157,14158,14160,14162],{"class":222,"line":644},[220,14159,2567],{"class":264},[220,14161,347],{"class":420},[220,14163,359],{"class":264},[220,14165,14166,14168,14170,14172,14174],{"class":222,"line":650},[220,14167,364],{"class":264},[220,14169,15],{"class":346},[220,14171,14021],{"class":264},[220,14173,15],{"class":346},[220,14175,359],{"class":264},[220,14177,14178,14180,14182],{"class":222,"line":656},[220,14179,402],{"class":264},[220,14181,13957],{"class":346},[220,14183,359],{"class":264},[212,14185,14186],{"className":468,"code":14111,"language":469,"meta":178,"style":178},[99,14187,14188,14196,14208,14222,14230,14238,14250],{"__ignoreMap":178},[220,14189,14190,14192,14194],{"class":222,"line":223},[220,14191,343],{"class":264},[220,14193,13957],{"class":346},[220,14195,359],{"class":264},[220,14197,14198,14200,14202,14204,14206],{"class":222,"line":179},[220,14199,364],{"class":264},[220,14201,15],{"class":346},[220,14203,13968],{"class":264},[220,14205,15],{"class":346},[220,14207,359],{"class":264},[220,14209,14210,14212,14214,14216,14218,14220],{"class":222,"line":389},[220,14211,364],{"class":264},[220,14213,347],{"class":420},[220,14215,350],{"class":226},[220,14217,353],{"class":260},[220,14219,13989],{"class":230},[220,14221,359],{"class":264},[220,14223,14224,14226,14228],{"class":222,"line":399},[220,14225,2550],{"class":264},[220,14227,13998],{"class":420},[220,14229,386],{"class":264},[220,14231,14232,14234,14236],{"class":222,"line":644},[220,14233,2567],{"class":264},[220,14235,347],{"class":420},[220,14237,359],{"class":264},[220,14239,14240,14242,14244,14246,14248],{"class":222,"line":650},[220,14241,364],{"class":264},[220,14243,15],{"class":346},[220,14245,14021],{"class":264},[220,14247,15],{"class":346},[220,14249,359],{"class":264},[220,14251,14252,14254,14256],{"class":222,"line":656},[220,14253,402],{"class":264},[220,14255,13957],{"class":346},[220,14257,359],{"class":264},[23,14259,14261],{"id":14260},"layering-content-over-shaders","Layering content over shaders",[3262,14263,14265],{"id":14264},"pointer-events","Pointer events",[15,14267,14268,14269,14272],{},"Canvases capture all pointer events by default. Add ",[99,14270,14271],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[246,14274,14275,14311,14346,14380],{":tabs":248},[212,14276,14278],{"className":334,"code":14277,"language":336,"meta":178,"style":178},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14279,14280,14295,14303],{"__ignoreMap":178},[220,14281,14282,14284,14286,14288,14290,14293],{"class":222,"line":223},[220,14283,343],{"class":264},[220,14285,347],{"class":346},[220,14287,350],{"class":226},[220,14289,353],{"class":264},[220,14291,14292],{"class":230},"\"absolute inset-0 pointer-events-none\"",[220,14294,359],{"class":264},[220,14296,14297,14299,14301],{"class":222,"line":179},[220,14298,364],{"class":264},[220,14300,12612],{"class":346},[220,14302,386],{"class":264},[220,14304,14305,14307,14309],{"class":222,"line":389},[220,14306,402],{"class":264},[220,14308,347],{"class":346},[220,14310,359],{"class":264},[212,14312,14314],{"className":409,"code":14313,"language":411,"meta":178,"style":178},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora \u002F>\n\u003C\u002FShader>\n",[99,14315,14316,14330,14338],{"__ignoreMap":178},[220,14317,14318,14320,14322,14324,14326,14328],{"class":222,"line":223},[220,14319,343],{"class":264},[220,14321,347],{"class":420},[220,14323,423],{"class":226},[220,14325,353],{"class":260},[220,14327,14292],{"class":230},[220,14329,359],{"class":264},[220,14331,14332,14334,14336],{"class":222,"line":179},[220,14333,364],{"class":264},[220,14335,12612],{"class":420},[220,14337,386],{"class":264},[220,14339,14340,14342,14344],{"class":222,"line":389},[220,14341,402],{"class":264},[220,14343,347],{"class":420},[220,14345,359],{"class":264},[212,14347,14348],{"className":468,"code":14277,"language":469,"meta":178,"style":178},[99,14349,14350,14364,14372],{"__ignoreMap":178},[220,14351,14352,14354,14356,14358,14360,14362],{"class":222,"line":223},[220,14353,343],{"class":264},[220,14355,347],{"class":420},[220,14357,350],{"class":226},[220,14359,353],{"class":260},[220,14361,14292],{"class":230},[220,14363,359],{"class":264},[220,14365,14366,14368,14370],{"class":222,"line":179},[220,14367,364],{"class":264},[220,14369,12612],{"class":420},[220,14371,386],{"class":264},[220,14373,14374,14376,14378],{"class":222,"line":389},[220,14375,402],{"class":264},[220,14377,347],{"class":420},[220,14379,359],{"class":264},[212,14381,14382],{"className":468,"code":14277,"language":469,"meta":178,"style":178},[99,14383,14384,14398,14406],{"__ignoreMap":178},[220,14385,14386,14388,14390,14392,14394,14396],{"class":222,"line":223},[220,14387,343],{"class":264},[220,14389,347],{"class":420},[220,14391,350],{"class":226},[220,14393,353],{"class":260},[220,14395,14292],{"class":230},[220,14397,359],{"class":264},[220,14399,14400,14402,14404],{"class":222,"line":179},[220,14401,364],{"class":264},[220,14403,12612],{"class":420},[220,14405,386],{"class":264},[220,14407,14408,14410,14412],{"class":222,"line":389},[220,14409,402],{"class":264},[220,14411,347],{"class":420},[220,14413,359],{"class":264},[15,14415,14416,14417,1864,14419,14422,14423,14425],{},"Interactive effects like ",[99,14418,394],{},[99,14420,14421],{},"CursorRipples"," still track global mouse position even with ",[99,14424,14271],{}," — they listen on the window rather than the canvas element.",[3262,14427,14429],{"id":14428},"stacking-context-and-z-index","Stacking context and z-index",[15,14431,14432,14435,14436,14438,14439,1554],{},[99,14433,14434],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[99,14437,13015],{}," (or similar) and a higher ",[99,14440,14434],{},[212,14442,14444],{"className":12874,"code":14443,"language":12876,"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,14445,14446,14461,14466,14484,14489,14508],{"__ignoreMap":178},[220,14447,14448,14450,14452,14454,14456,14459],{"class":222,"line":223},[220,14449,343],{"class":264},[220,14451,3398],{"class":346},[220,14453,350],{"class":226},[220,14455,353],{"class":264},[220,14457,14458],{"class":230},"\"relative\"",[220,14460,359],{"class":264},[220,14462,14463],{"class":222,"line":179},[220,14464,14465],{"class":609}," \u003C!-- canvas at z-0 -->\n",[220,14467,14468,14470,14472,14474,14476,14478,14480,14482],{"class":222,"line":389},[220,14469,364],{"class":264},[220,14471,12885],{"class":346},[220,14473,350],{"class":226},[220,14475,353],{"class":264},[220,14477,13410],{"class":230},[220,14479,3804],{"class":264},[220,14481,12885],{"class":346},[220,14483,359],{"class":264},[220,14485,14486],{"class":222,"line":399},[220,14487,14488],{"class":609}," \u003C!-- content above canvas -->\n",[220,14490,14491,14493,14495,14497,14499,14501,14504,14506],{"class":222,"line":644},[220,14492,364],{"class":264},[220,14494,3398],{"class":346},[220,14496,350],{"class":226},[220,14498,353],{"class":264},[220,14500,12640],{"class":230},[220,14502,14503],{"class":264},">I appear above the canvas\u003C\u002F",[220,14505,3398],{"class":346},[220,14507,359],{"class":264},[220,14509,14510,14512,14514],{"class":222,"line":650},[220,14511,402],{"class":264},[220,14513,3398],{"class":346},[220,14515,359],{"class":264},[23,14517,14519],{"id":14518},"responsive-sizing","Responsive sizing",[15,14521,14522],{},"Shaders responds to any CSS-based resize:",[246,14524,14525,14646,14681,14716],{":tabs":248},[212,14526,14528],{"className":334,"code":14527,"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,14529,14530,14535,14550,14558,14566,14570,14575,14590,14598,14606,14610,14615,14630,14638],{"__ignoreMap":178},[220,14531,14532],{"class":222,"line":223},[220,14533,14534],{"class":609},"\u003C!-- Different heights at breakpoints -->\n",[220,14536,14537,14539,14541,14543,14545,14548],{"class":222,"line":179},[220,14538,343],{"class":264},[220,14540,347],{"class":346},[220,14542,350],{"class":226},[220,14544,353],{"class":264},[220,14546,14547],{"class":230},"\"w-full h-48 md:h-72 lg:h-screen\"",[220,14549,359],{"class":264},[220,14551,14552,14554,14556],{"class":222,"line":389},[220,14553,364],{"class":264},[220,14555,367],{"class":346},[220,14557,386],{"class":264},[220,14559,14560,14562,14564],{"class":222,"line":399},[220,14561,402],{"class":264},[220,14563,347],{"class":346},[220,14565,359],{"class":264},[220,14567,14568],{"class":222,"line":644},[220,14569,647],{"emptyLinePlaceholder":194},[220,14571,14572],{"class":222,"line":650},[220,14573,14574],{"class":609},"\u003C!-- Aspect ratio preserving at any width -->\n",[220,14576,14577,14579,14581,14583,14585,14588],{"class":222,"line":656},[220,14578,343],{"class":264},[220,14580,347],{"class":346},[220,14582,350],{"class":226},[220,14584,353],{"class":264},[220,14586,14587],{"class":230},"\"w-full aspect-square md:aspect-video\"",[220,14589,359],{"class":264},[220,14591,14592,14594,14596],{"class":222,"line":673},[220,14593,364],{"class":264},[220,14595,13998],{"class":346},[220,14597,386],{"class":264},[220,14599,14600,14602,14604],{"class":222,"line":682},[220,14601,402],{"class":264},[220,14603,347],{"class":346},[220,14605,359],{"class":264},[220,14607,14608],{"class":222,"line":691},[220,14609,647],{"emptyLinePlaceholder":194},[220,14611,14612],{"class":222,"line":696},[220,14613,14614],{"class":609},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[220,14616,14617,14619,14621,14623,14625,14628],{"class":222,"line":702},[220,14618,343],{"class":264},[220,14620,347],{"class":346},[220,14622,350],{"class":226},[220,14624,353],{"class":264},[220,14626,14627],{"class":230},"\"w-full h-[100dvh]\"",[220,14629,359],{"class":264},[220,14631,14632,14634,14636],{"class":222,"line":718},[220,14633,364],{"class":264},[220,14635,12612],{"class":346},[220,14637,386],{"class":264},[220,14639,14640,14642,14644],{"class":222,"line":727},[220,14641,402],{"class":264},[220,14643,347],{"class":346},[220,14645,359],{"class":264},[212,14647,14649],{"className":409,"code":14648,"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,14650,14651,14665,14673],{"__ignoreMap":178},[220,14652,14653,14655,14657,14659,14661,14663],{"class":222,"line":223},[220,14654,343],{"class":264},[220,14656,347],{"class":420},[220,14658,423],{"class":226},[220,14660,353],{"class":260},[220,14662,14547],{"class":230},[220,14664,359],{"class":264},[220,14666,14667,14669,14671],{"class":222,"line":179},[220,14668,364],{"class":264},[220,14670,367],{"class":420},[220,14672,386],{"class":264},[220,14674,14675,14677,14679],{"class":222,"line":389},[220,14676,402],{"class":264},[220,14678,347],{"class":420},[220,14680,359],{"class":264},[212,14682,14684],{"className":468,"code":14683,"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,14685,14686,14700,14708],{"__ignoreMap":178},[220,14687,14688,14690,14692,14694,14696,14698],{"class":222,"line":223},[220,14689,343],{"class":264},[220,14691,347],{"class":420},[220,14693,350],{"class":226},[220,14695,353],{"class":260},[220,14697,14547],{"class":230},[220,14699,359],{"class":264},[220,14701,14702,14704,14706],{"class":222,"line":179},[220,14703,364],{"class":264},[220,14705,367],{"class":420},[220,14707,386],{"class":264},[220,14709,14710,14712,14714],{"class":222,"line":389},[220,14711,402],{"class":264},[220,14713,347],{"class":420},[220,14715,359],{"class":264},[212,14717,14718],{"className":468,"code":14683,"language":469,"meta":178,"style":178},[99,14719,14720,14734,14742],{"__ignoreMap":178},[220,14721,14722,14724,14726,14728,14730,14732],{"class":222,"line":223},[220,14723,343],{"class":264},[220,14725,347],{"class":420},[220,14727,350],{"class":226},[220,14729,353],{"class":260},[220,14731,14547],{"class":230},[220,14733,359],{"class":264},[220,14735,14736,14738,14740],{"class":222,"line":179},[220,14737,364],{"class":264},[220,14739,367],{"class":420},[220,14741,386],{"class":264},[220,14743,14744,14746,14748],{"class":222,"line":389},[220,14745,402],{"class":264},[220,14747,347],{"class":420},[220,14749,359],{"class":264},[23,14751,14753],{"id":14752},"other-css-properties","Other CSS properties",[15,14755,14756],{},"The canvas element is fully styleable with standard CSS:",[246,14758,14759,14880,14915,14950],{":tabs":248},[212,14760,14762],{"className":334,"code":14761,"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,14763,14764,14769,14784,14792,14800,14804,14809,14824,14832,14840,14844,14849,14864,14872],{"__ignoreMap":178},[220,14765,14766],{"class":222,"line":223},[220,14767,14768],{"class":609},"\u003C!-- Rounded with border -->\n",[220,14770,14771,14773,14775,14777,14779,14782],{"class":222,"line":179},[220,14772,343],{"class":264},[220,14774,347],{"class":346},[220,14776,350],{"class":226},[220,14778,353],{"class":264},[220,14780,14781],{"class":230},"\"rounded-2xl border border-white\u002F10 w-full h-48\"",[220,14783,359],{"class":264},[220,14785,14786,14788,14790],{"class":222,"line":389},[220,14787,364],{"class":264},[220,14789,367],{"class":346},[220,14791,386],{"class":264},[220,14793,14794,14796,14798],{"class":222,"line":399},[220,14795,402],{"class":264},[220,14797,347],{"class":346},[220,14799,359],{"class":264},[220,14801,14802],{"class":222,"line":644},[220,14803,647],{"emptyLinePlaceholder":194},[220,14805,14806],{"class":222,"line":650},[220,14807,14808],{"class":609},"\u003C!-- Drop shadow -->\n",[220,14810,14811,14813,14815,14817,14819,14822],{"class":222,"line":656},[220,14812,343],{"class":264},[220,14814,347],{"class":346},[220,14816,350],{"class":226},[220,14818,353],{"class":264},[220,14820,14821],{"class":230},"\"shadow-2xl shadow-indigo-500\u002F30 rounded-xl w-64 h-64\"",[220,14823,359],{"class":264},[220,14825,14826,14828,14830],{"class":222,"line":673},[220,14827,364],{"class":264},[220,14829,13064],{"class":346},[220,14831,386],{"class":264},[220,14833,14834,14836,14838],{"class":222,"line":682},[220,14835,402],{"class":264},[220,14837,347],{"class":346},[220,14839,359],{"class":264},[220,14841,14842],{"class":222,"line":691},[220,14843,647],{"emptyLinePlaceholder":194},[220,14845,14846],{"class":222,"line":696},[220,14847,14848],{"class":609},"\u003C!-- CSS blur (applied after GPU render) -->\n",[220,14850,14851,14853,14855,14857,14859,14862],{"class":222,"line":702},[220,14852,343],{"class":264},[220,14854,347],{"class":346},[220,14856,350],{"class":226},[220,14858,353],{"class":264},[220,14860,14861],{"class":230},"\"blur-sm w-full h-32\"",[220,14863,359],{"class":264},[220,14865,14866,14868,14870],{"class":222,"line":718},[220,14867,364],{"class":264},[220,14869,367],{"class":346},[220,14871,386],{"class":264},[220,14873,14874,14876,14878],{"class":222,"line":727},[220,14875,402],{"class":264},[220,14877,347],{"class":346},[220,14879,359],{"class":264},[212,14881,14883],{"className":409,"code":14882,"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,14884,14885,14899,14907],{"__ignoreMap":178},[220,14886,14887,14889,14891,14893,14895,14897],{"class":222,"line":223},[220,14888,343],{"class":264},[220,14890,347],{"class":420},[220,14892,423],{"class":226},[220,14894,353],{"class":260},[220,14896,14781],{"class":230},[220,14898,359],{"class":264},[220,14900,14901,14903,14905],{"class":222,"line":179},[220,14902,364],{"class":264},[220,14904,367],{"class":420},[220,14906,386],{"class":264},[220,14908,14909,14911,14913],{"class":222,"line":389},[220,14910,402],{"class":264},[220,14912,347],{"class":420},[220,14914,359],{"class":264},[212,14916,14918],{"className":468,"code":14917,"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,14919,14920,14934,14942],{"__ignoreMap":178},[220,14921,14922,14924,14926,14928,14930,14932],{"class":222,"line":223},[220,14923,343],{"class":264},[220,14925,347],{"class":420},[220,14927,350],{"class":226},[220,14929,353],{"class":260},[220,14931,14781],{"class":230},[220,14933,359],{"class":264},[220,14935,14936,14938,14940],{"class":222,"line":179},[220,14937,364],{"class":264},[220,14939,367],{"class":420},[220,14941,386],{"class":264},[220,14943,14944,14946,14948],{"class":222,"line":389},[220,14945,402],{"class":264},[220,14947,347],{"class":420},[220,14949,359],{"class":264},[212,14951,14952],{"className":468,"code":14917,"language":469,"meta":178,"style":178},[99,14953,14954,14968,14976],{"__ignoreMap":178},[220,14955,14956,14958,14960,14962,14964,14966],{"class":222,"line":223},[220,14957,343],{"class":264},[220,14959,347],{"class":420},[220,14961,350],{"class":226},[220,14963,353],{"class":260},[220,14965,14781],{"class":230},[220,14967,359],{"class":264},[220,14969,14970,14972,14974],{"class":222,"line":179},[220,14971,364],{"class":264},[220,14973,367],{"class":420},[220,14975,386],{"class":264},[220,14977,14978,14980,14982],{"class":222,"line":389},[220,14979,402],{"class":264},[220,14981,347],{"class":420},[220,14983,359],{"class":264},[1504,14985,14986],{},"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":14988},[14989,14990,14991,14997,15001,15002],{"id":12251,"depth":179,"text":12252},{"id":593,"depth":179,"text":594},{"id":12570,"depth":179,"text":12571,"children":14992},[14993,14994,14995,14996],{"id":12574,"depth":389,"text":12575},{"id":13008,"depth":389,"text":13009},{"id":13371,"depth":389,"text":13372},{"id":13939,"depth":389,"text":13940},{"id":14260,"depth":179,"text":14261,"children":14998},[14999,15000],{"id":14264,"depth":389,"text":14265},{"id":14428,"depth":389,"text":14429},{"id":14518,"depth":179,"text":14519},{"id":14752,"depth":179,"text":14753},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1489,"description":15003},"docs\u002Fguide\u002F5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":15010,"title":15011,"body":15012,"category":10227,"description":17284,"exclude":190,"extension":191,"forceFramework":190,"icon":17285,"meta":17286,"navigation":194,"path":17287,"seo":17288,"stem":17289,"__hash__":17290},"guide\u002Fdocs\u002Fguide\u002F6.transforms.md","Transforms",{"type":8,"value":15013,"toc":17273},[15014,15018,15025,15032,15138,15145,15171,15338,15360,15366,15377,15380,15445,15560,15563,15614,15616,15634,15642,15669,15726,15729,15799,15815,15818,15823,15876,15880,15887,15918,15921,15925,16483,16487,16492,17262,17270],[11,15015,15017],{"id":15016},"transforms-bounding-boxes","Transforms & Bounding Boxes",[15,15019,15020,15021,15024],{},"Every layer in a shader can be positioned, sized, and rotated inside the canvas with a ",[159,15022,15023],{},"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,15026,15027,15028,15031],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A bounding box positions the ",[1847,15029,15030],{},"content within the canvas"," — the layer shifts, scales, or rotates without touching the DOM.",[212,15033,15035],{"className":334,"code":15034,"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,15036,15037,15042,15062,15066,15071,15079,15093,15098,15103,15108,15113,15118,15123,15130],{"__ignoreMap":178},[220,15038,15039],{"class":222,"line":223},[220,15040,15041],{"class":609},"\u003C!-- CSS transform: moves the whole canvas element in the page -->\n",[220,15043,15044,15046,15048,15050,15052,15055,15058,15060],{"class":222,"line":179},[220,15045,343],{"class":264},[220,15047,347],{"class":346},[220,15049,350],{"class":226},[220,15051,353],{"class":264},[220,15053,15054],{"class":230},"\"-translate-x-4\"",[220,15056,15057],{"class":264},">...\u003C\u002F",[220,15059,347],{"class":346},[220,15061,359],{"class":264},[220,15063,15064],{"class":222,"line":389},[220,15065,647],{"emptyLinePlaceholder":194},[220,15067,15068],{"class":222,"line":399},[220,15069,15070],{"class":609},"\u003C!-- Bounding box: frames one layer inside the canvas -->\n",[220,15072,15073,15075,15077],{"class":222,"line":644},[220,15074,343],{"class":264},[220,15076,347],{"class":346},[220,15078,359],{"class":264},[220,15080,15081,15083,15085,15088,15090],{"class":222,"line":650},[220,15082,364],{"class":264},[220,15084,367],{"class":346},[220,15086,15087],{"class":226}," :bounding-box",[220,15089,353],{"class":264},[220,15091,15092],{"class":230},"\"{\n",[220,15094,15095],{"class":222,"line":656},[220,15096,15097],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15099,15100],{"class":222,"line":673},[220,15101,15102],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15104,15105],{"class":222,"line":682},[220,15106,15107],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15109,15110],{"class":222,"line":691},[220,15111,15112],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15114,15115],{"class":222,"line":696},[220,15116,15117],{"class":230}," origin: 'top-left',\n",[220,15119,15120],{"class":222,"line":702},[220,15121,15122],{"class":230}," rotation: 0\n",[220,15124,15125,15128],{"class":222,"line":718},[220,15126,15127],{"class":230}," }\"",[220,15129,386],{"class":264},[220,15131,15132,15134,15136],{"class":222,"line":727},[220,15133,402],{"class":264},[220,15135,347],{"class":346},[220,15137,359],{"class":264},[23,15139,1839,15141,15144],{"id":15140},"the-boundingbox-prop",[99,15142,15143],{},"boundingBox"," prop",[15,15146,15147,15148,15150,15151,1895,15154,1895,15157,1895,15160,15163,15164,15167,15168,15170],{},"Every renderable component accepts a ",[99,15149,15143],{}," object. It has four required dimensions — ",[99,15152,15153],{},"x",[99,15155,15156],{},"y",[99,15158,15159],{},"width",[99,15161,15162],{},"height"," — plus an optional ",[99,15165,15166],{},"origin",", a ",[99,15169,11830],{},", and a couple of refinements.",[1794,15172,15173,15188],{},[1797,15174,15175],{},[1800,15176,15177,15180,15183,15186],{},[1803,15178,15179],{},"Field",[1803,15181,15182],{},"Type",[1803,15184,15185],{},"Default",[1803,15187,1808],{},[1810,15189,15190,15210,15227,15242,15257,15285,15303,15319],{},[1800,15191,15192,15196,15201,15204],{},[1815,15193,15194],{},[99,15195,15153],{},[1815,15197,15198],{},[99,15199,15200],{},"{ value, unit }",[1815,15202,15203],{},"—",[1815,15205,15206,15207,15209],{},"Horizontal position of the box's anchor corner, measured in the ",[99,15208,15166],{}," frame",[1800,15211,15212,15216,15220,15222],{},[1815,15213,15214],{},[99,15215,15156],{},[1815,15217,15218],{},[99,15219,15200],{},[1815,15221,15203],{},[1815,15223,15224,15225,15209],{},"Vertical position of the box's anchor corner, measured in the ",[99,15226,15166],{},[1800,15228,15229,15233,15237,15239],{},[1815,15230,15231],{},[99,15232,15159],{},[1815,15234,15235],{},[99,15236,15200],{},[1815,15238,15203],{},[1815,15240,15241],{},"Box width",[1800,15243,15244,15248,15252,15254],{},[1815,15245,15246],{},[99,15247,15162],{},[1815,15249,15250],{},[99,15251,15200],{},[1815,15253,15203],{},[1815,15255,15256],{},"Box height",[1800,15258,15259,15263,15267,15272],{},[1815,15260,15261],{},[99,15262,15166],{},[1815,15264,15265],{},[99,15266,9055],{},[1815,15268,15269],{},[99,15270,15271],{},"'top-left'",[1815,15273,15274,15275,15277,15278,15280,15281],{},"Which reference point ",[99,15276,15153],{}," \u002F ",[99,15279,15156],{}," are measured from — see ",[56,15282,15284],{"href":15283},"#origin","Origin",[1800,15286,15287,15291,15296,15300],{},[1815,15288,15289],{},[99,15290,11830],{},[1815,15292,15293],{},[99,15294,15295],{},"number",[1815,15297,15298],{},[99,15299,8668],{},[1815,15301,15302],{},"Rotation in degrees, around the box's geometric center",[1800,15304,15305,15310,15314,15316],{},[1815,15306,15307],{},[99,15308,15309],{},"cornerRadius",[1815,15311,15312],{},[99,15313,15200],{},[1815,15315,15203],{},[1815,15317,15318],{},"Rounds the corners of the clipped region (filter layers only)",[1800,15320,15321,15326,15331,15335],{},[1815,15322,15323],{},[99,15324,15325],{},"lockAspect",[1815,15327,15328],{},[99,15329,15330],{},"boolean",[1815,15332,15333],{},[99,15334,2629],{},[1815,15336,15337],{},"Editor-only hint that locks the resize handles to the box's aspect ratio. Ignored at render time",[15,15339,15340,15341,1895,15343,1895,15345,1895,15347,15349,15350,15352,15353,15356,15357,15359],{},"Each of ",[99,15342,15153],{},[99,15344,15156],{},[99,15346,15159],{},[99,15348,15162],{}," (and ",[99,15351,15309],{},") is a ",[159,15354,15355],{},"dimensional value"," — a ",[99,15358,15200],{}," pair, so you can mix relative and absolute units on the same layer.",[15,15361,15362,15363,15365],{},"When no ",[99,15364,15143],{}," is set, a layer fills the whole canvas. Setting a box is purely opt-in.",[23,15367,15369,15370,15373,15374],{"id":15368},"units-uv-vs-px","Units: ",[99,15371,15372],{},"uv"," (%) vs ",[99,15375,15376],{},"px",[15,15378,15379],{},"Each dimension carries its own unit:",[1794,15381,15382,15392],{},[1797,15383,15384],{},[1800,15385,15386,15389],{},[1803,15387,15388],{},"Unit",[1803,15390,15391],{},"Meaning",[1810,15393,15394,15433],{},[1800,15395,15396,15400],{},[1815,15397,15398],{},[99,15399,15372],{},[1815,15401,15402,15403,1895,15406,15408,15409,15411,15412,15414,15415,15417,15418,15414,15420,15422,15423,15425,15426,3506,15429,15432],{},"A ",[159,15404,15405],{},"fraction of the canvas",[99,15407,8668],{},"–",[99,15410,8672],{},". ",[99,15413,15153],{},"\u002F",[99,15416,15159],{}," are fractions of the canvas width; ",[99,15419,15156],{},[99,15421,15162],{}," of the canvas height. ",[99,15424,7749],{}," = halfway \u002F half the canvas. The Design Editor shows this as a ",[159,15427,15428],{},"percentage",[99,15430,15431],{},"50%",").",[1800,15434,15435,15439],{},[1815,15436,15437],{},[99,15438,15376],{},[1815,15440,15441,15444],{},[159,15442,15443],{},"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,15446,15448],{"className":334,"code":15447,"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,15449,15450,15455,15468,15473,15478,15483,15488,15493,15498,15505,15509,15514,15526,15531,15536,15541,15546,15550,15554],{"__ignoreMap":178},[220,15451,15452],{"class":222,"line":223},[220,15453,15454],{"class":609},"\u003C!-- Relative box: always a centered quarter of the canvas, at any size -->\n",[220,15456,15457,15459,15462,15464,15466],{"class":222,"line":179},[220,15458,343],{"class":264},[220,15460,15461],{"class":346},"Glass",[220,15463,15087],{"class":226},[220,15465,353],{"class":264},[220,15467,15092],{"class":230},[220,15469,15470],{"class":222,"line":389},[220,15471,15472],{"class":230}," x: { unit: 'uv', value: 0.25 },\n",[220,15474,15475],{"class":222,"line":399},[220,15476,15477],{"class":230}," y: { unit: 'uv', value: 0.25 },\n",[220,15479,15480],{"class":222,"line":644},[220,15481,15482],{"class":230}," width: { unit: 'uv', value: 0.5 },\n",[220,15484,15485],{"class":222,"line":650},[220,15486,15487],{"class":230}," height: { unit: 'uv', value: 0.5 },\n",[220,15489,15490],{"class":222,"line":656},[220,15491,15492],{"class":230}," origin: 'top-left',\n",[220,15494,15495],{"class":222,"line":673},[220,15496,15497],{"class":230}," rotation: 0\n",[220,15499,15500,15503],{"class":222,"line":682},[220,15501,15502],{"class":230},"}\"",[220,15504,386],{"class":264},[220,15506,15507],{"class":222,"line":691},[220,15508,647],{"emptyLinePlaceholder":194},[220,15510,15511],{"class":222,"line":696},[220,15512,15513],{"class":609},"\u003C!-- Fixed box: a 200×200px square, 24px from the top-left, regardless of canvas size -->\n",[220,15515,15516,15518,15520,15522,15524],{"class":222,"line":702},[220,15517,343],{"class":264},[220,15519,15461],{"class":346},[220,15521,15087],{"class":226},[220,15523,353],{"class":264},[220,15525,15092],{"class":230},[220,15527,15528],{"class":222,"line":718},[220,15529,15530],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15532,15533],{"class":222,"line":727},[220,15534,15535],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15537,15538],{"class":222,"line":2664},[220,15539,15540],{"class":230}," width: { unit: 'px', value: 200 },\n",[220,15542,15543],{"class":222,"line":3522},[220,15544,15545],{"class":230}," height: { unit: 'px', value: 200 },\n",[220,15547,15548],{"class":222,"line":9657},[220,15549,15492],{"class":230},[220,15551,15552],{"class":222,"line":9668},[220,15553,15497],{"class":230},[220,15555,15556,15558],{"class":222,"line":9673},[220,15557,15502],{"class":230},[220,15559,386],{"class":264},[15,15561,15562],{},"Because each property has its own unit, you can mix them — for example a fixed-height bar that always spans the full width:",[212,15564,15566],{"className":334,"code":15565,"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,15567,15568,15580,15585,15590,15595,15600,15604,15608],{"__ignoreMap":178},[220,15569,15570,15572,15574,15576,15578],{"class":222,"line":223},[220,15571,343],{"class":264},[220,15573,367],{"class":346},[220,15575,15087],{"class":226},[220,15577,353],{"class":264},[220,15579,15092],{"class":230},[220,15581,15582],{"class":222,"line":179},[220,15583,15584],{"class":230}," x: { unit: 'uv', value: 0 },\n",[220,15586,15587],{"class":222,"line":389},[220,15588,15589],{"class":230}," y: { unit: 'px', value: 0 },\n",[220,15591,15592],{"class":222,"line":399},[220,15593,15594],{"class":230}," width: { unit: 'uv', value: 1 },\n",[220,15596,15597],{"class":222,"line":644},[220,15598,15599],{"class":230}," height: { unit: 'px', value: 80 },\n",[220,15601,15602],{"class":222,"line":650},[220,15603,15492],{"class":230},[220,15605,15606],{"class":222,"line":656},[220,15607,15497],{"class":230},[220,15609,15610,15612],{"class":222,"line":673},[220,15611,15502],{"class":230},[220,15613,386],{"class":264},[23,15615,15284],{"id":15166},[15,15617,1839,15618,15620,15621,15624,15625,1864,15627,15629,15630,15633],{},[99,15619,15166],{}," is the ",[159,15622,15623],{},"reference point"," that ",[99,15626,15153],{},[99,15628,15156],{}," are measured from — the box's anchor corner ",[1847,15631,15632],{},"and"," the frame those coordinates live in. It's a 3×3 grid of nine positions:",[212,15635,15640],{"className":15636,"code":15638,"language":15639},[15637],"language-text","top-left top-center top-right\ncenter-left center center-right\nbottom-left bottom-center bottom-right\n","text",[99,15641,15638],{"__ignoreMap":178},[15,15643,15644,15645,15648,15649,15652,15653,15655,15656,1895,15659,15662,15663,15665,15666,15668],{},"The two axes are independent. The horizontal part picks the X reference (",[99,15646,15647],{},"left"," → from the left edge, ",[99,15650,15651],{},"right"," → from the right edge, ",[99,15654,8236],{}," → a signed offset from the horizontal center). The vertical part does the same for Y (",[99,15657,15658],{},"top",[99,15660,15661],{},"bottom",", or ",[99,15664,8236],{},"). The bare value ",[99,15667,8236],{}," centers both axes.",[34,15670,15671,15681,15697,15712],{},[37,15672,15673,15675,15676,15414,15678,15680],{},[99,15674,15271],{}," (default) — ",[99,15677,15153],{},[99,15679,15156],{}," are measured rightward\u002Fdownward from the top-left corner.",[37,15682,15683,15686,15687,15689,15690,15693,15694,15696],{},[99,15684,15685],{},"'top-right'"," — ",[99,15688,15153],{}," is measured ",[1847,15691,15692],{},"leftward"," from the right edge; ",[99,15695,15156],{}," downward from the top.",[37,15698,15699,15686,15702,15704,15705,15707,15708,15711],{},[99,15700,15701],{},"'bottom-right'",[99,15703,15153],{}," leftward from the right, ",[99,15706,15156],{}," ",[1847,15709,15710],{},"upward"," from the bottom.",[37,15713,15714,15686,15717,15414,15719,15721,15722,15725],{},[99,15715,15716],{},"'center'",[99,15718,15153],{},[99,15720,15156],{}," are signed offsets from the canvas center (",[99,15723,15724],{},"0, 0"," centers the box).",[15,15727,15728],{},"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,15730,15732],{"className":334,"code":15731,"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,15733,15734,15741,15751,15760,15765,15770,15775,15780,15785,15789,15794],{"__ignoreMap":178},[220,15735,15736,15738],{"class":222,"line":223},[220,15737,343],{"class":264},[220,15739,15740],{"class":346},"ImageTexture\n",[220,15742,15743,15746,15748],{"class":222,"line":179},[220,15744,15745],{"class":226}," url",[220,15747,353],{"class":264},[220,15749,15750],{"class":230},"\"\u002Fbadge.svg\"\n",[220,15752,15753,15756,15758],{"class":222,"line":389},[220,15754,15755],{"class":226}," :bounding-box",[220,15757,353],{"class":264},[220,15759,15092],{"class":230},[220,15761,15762],{"class":222,"line":399},[220,15763,15764],{"class":230}," x: { unit: 'px', value: 24 },\n",[220,15766,15767],{"class":222,"line":644},[220,15768,15769],{"class":230}," y: { unit: 'px', value: 24 },\n",[220,15771,15772],{"class":222,"line":650},[220,15773,15774],{"class":230}," width: { unit: 'px', value: 96 },\n",[220,15776,15777],{"class":222,"line":656},[220,15778,15779],{"class":230}," height: { unit: 'px', value: 96 },\n",[220,15781,15782],{"class":222,"line":673},[220,15783,15784],{"class":230}," origin: 'top-right',\n",[220,15786,15787],{"class":222,"line":682},[220,15788,15122],{"class":230},[220,15790,15791],{"class":222,"line":691},[220,15792,15793],{"class":230}," }\"\n",[220,15795,15796],{"class":222,"line":696},[220,15797,15798],{"class":264},"\u002F>\n",[15800,15801,15802],"blockquote",{},[15,15803,15804,15707,15807,15809,15810,15414,15812,15814],{},[159,15805,15806],{},"Origin vs. rotation pivot:",[99,15808,15166],{}," only controls where ",[99,15811,15153],{},[99,15813,15156],{}," are measured from. Rotation always pivots around the box's own geometric center, independent of the origin you choose.",[23,15816,15817],{"id":11830},"Rotation",[15,15819,15820,15822],{},[99,15821,11830],{}," spins the box (and its content) around its center, in degrees. Positive values rotate clockwise.",[212,15824,15826],{"className":334,"code":15825,"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,15827,15828,15841,15846,15851,15856,15861,15865,15870],{"__ignoreMap":178},[220,15829,15830,15832,15835,15837,15839],{"class":222,"line":223},[220,15831,343],{"class":264},[220,15833,15834],{"class":346},"Stripes",[220,15836,15087],{"class":226},[220,15838,353],{"class":264},[220,15840,15092],{"class":230},[220,15842,15843],{"class":222,"line":179},[220,15844,15845],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,15847,15848],{"class":222,"line":389},[220,15849,15850],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,15852,15853],{"class":222,"line":399},[220,15854,15855],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,15857,15858],{"class":222,"line":644},[220,15859,15860],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,15862,15863],{"class":222,"line":650},[220,15864,15492],{"class":230},[220,15866,15867],{"class":222,"line":656},[220,15868,15869],{"class":230}," rotation: 30\n",[220,15871,15872,15874],{"class":222,"line":673},[220,15873,15502],{"class":230},[220,15875,386],{"class":264},[23,15877,15879],{"id":15878},"how-different-layers-fill-the-box","How different layers fill the box",[15,15881,15882,15883,15886],{},"The box means \"draw this layer here,\" but exactly ",[1847,15884,15885],{},"how"," a layer fills its box depends on the kind of layer:",[34,15888,15889,15899,15905],{},[37,15890,15891,15894,15895,15898],{},[159,15892,15893],{},"Generators"," (gradients, noise, patterns, textures, etc.) ",[159,15896,15897],{},"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,15900,15901,15904],{},[159,15902,15903],{},"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,15906,15907,15910,15911,15914,15915,15917],{},[159,15908,15909],{},"Filters & distortions"," (Blur, Glitch, distortions, …) ",[159,15912,15913],{},"clip"," to the box — the effect is confined to the rectangle, and the untouched layer beneath shows through outside it. This is where ",[99,15916,15309],{}," applies, rounding the clipped region.",[15,15919,15920],{},"In all cases the box is a rotated rectangle, so rotation and corner rounding behave consistently.",[23,15922,15924],{"id":15923},"basic-usage-across-frameworks","Basic usage across frameworks",[246,15926,15927,16001,16126,16237,16347],{":tabs":1557},[212,15928,15930],{"className":334,"code":15929,"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,15931,15932,15946,15958,15963,15968,15973,15978,15982,15987,15993],{"__ignoreMap":178},[220,15933,15934,15936,15938,15940,15942,15944],{"class":222,"line":223},[220,15935,343],{"class":264},[220,15937,347],{"class":346},[220,15939,350],{"class":226},[220,15941,353],{"class":264},[220,15943,356],{"class":230},[220,15945,359],{"class":264},[220,15947,15948,15950,15952,15954,15956],{"class":222,"line":179},[220,15949,364],{"class":264},[220,15951,367],{"class":346},[220,15953,15087],{"class":226},[220,15955,353],{"class":264},[220,15957,15092],{"class":230},[220,15959,15960],{"class":222,"line":389},[220,15961,15962],{"class":230}," x: { unit: 'uv', value: 0.1 },\n",[220,15964,15965],{"class":222,"line":399},[220,15966,15967],{"class":230}," y: { unit: 'uv', value: 0.1 },\n",[220,15969,15970],{"class":222,"line":644},[220,15971,15972],{"class":230}," width: { unit: 'uv', value: 0.8 },\n",[220,15974,15975],{"class":222,"line":650},[220,15976,15977],{"class":230}," height: { unit: 'uv', value: 0.8 },\n",[220,15979,15980],{"class":222,"line":656},[220,15981,15117],{"class":230},[220,15983,15984],{"class":222,"line":673},[220,15985,15986],{"class":230}," rotation: 15\n",[220,15988,15989,15991],{"class":222,"line":682},[220,15990,15127],{"class":230},[220,15992,386],{"class":264},[220,15994,15995,15997,15999],{"class":222,"line":691},[220,15996,402],{"class":264},[220,15998,347],{"class":346},[220,16000,359],{"class":264},[212,16002,16004],{"className":409,"code":16003,"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,16005,16006,16020,16026,16036,16053,16066,16079,16092,16101,16109,16114,16118],{"__ignoreMap":178},[220,16007,16008,16010,16012,16014,16016,16018],{"class":222,"line":223},[220,16009,343],{"class":264},[220,16011,347],{"class":420},[220,16013,423],{"class":226},[220,16015,353],{"class":260},[220,16017,356],{"class":230},[220,16019,359],{"class":264},[220,16021,16022,16024],{"class":222,"line":179},[220,16023,364],{"class":264},[220,16025,1189],{"class":420},[220,16027,16028,16031,16033],{"class":222,"line":389},[220,16029,16030],{"class":226}," boundingBox",[220,16032,353],{"class":260},[220,16034,16035],{"class":264},"{{\n",[220,16037,16038,16041,16044,16047,16050],{"class":222,"line":399},[220,16039,16040],{"class":264}," x: { unit: ",[220,16042,16043],{"class":230},"'uv'",[220,16045,16046],{"class":264},", value: ",[220,16048,16049],{"class":420},"0.1",[220,16051,16052],{"class":264}," },\n",[220,16054,16055,16058,16060,16062,16064],{"class":222,"line":644},[220,16056,16057],{"class":264}," y: { unit: ",[220,16059,16043],{"class":230},[220,16061,16046],{"class":264},[220,16063,16049],{"class":420},[220,16065,16052],{"class":264},[220,16067,16068,16071,16073,16075,16077],{"class":222,"line":650},[220,16069,16070],{"class":264}," width: { unit: ",[220,16072,16043],{"class":230},[220,16074,16046],{"class":264},[220,16076,6294],{"class":420},[220,16078,16052],{"class":264},[220,16080,16081,16084,16086,16088,16090],{"class":222,"line":656},[220,16082,16083],{"class":264}," height: { unit: ",[220,16085,16043],{"class":230},[220,16087,16046],{"class":264},[220,16089,6294],{"class":420},[220,16091,16052],{"class":264},[220,16093,16094,16097,16099],{"class":222,"line":673},[220,16095,16096],{"class":264}," origin: ",[220,16098,15271],{"class":230},[220,16100,1760],{"class":264},[220,16102,16103,16106],{"class":222,"line":682},[220,16104,16105],{"class":264}," rotation: ",[220,16107,16108],{"class":420},"15\n",[220,16110,16111],{"class":222,"line":691},[220,16112,16113],{"class":264}," }}\n",[220,16115,16116],{"class":222,"line":696},[220,16117,1234],{"class":264},[220,16119,16120,16122,16124],{"class":222,"line":702},[220,16121,402],{"class":264},[220,16123,347],{"class":420},[220,16125,359],{"class":264},[212,16127,16129],{"className":468,"code":16128,"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,16130,16131,16145,16151,16159,16171,16183,16195,16207,16215,16221,16225,16229],{"__ignoreMap":178},[220,16132,16133,16135,16137,16139,16141,16143],{"class":222,"line":223},[220,16134,343],{"class":264},[220,16136,347],{"class":420},[220,16138,350],{"class":226},[220,16140,353],{"class":260},[220,16142,356],{"class":230},[220,16144,359],{"class":264},[220,16146,16147,16149],{"class":222,"line":179},[220,16148,364],{"class":264},[220,16150,1189],{"class":420},[220,16152,16153,16155,16157],{"class":222,"line":389},[220,16154,16030],{"class":226},[220,16156,353],{"class":260},[220,16158,16035],{"class":264},[220,16160,16161,16163,16165,16167,16169],{"class":222,"line":399},[220,16162,16040],{"class":264},[220,16164,16043],{"class":230},[220,16166,16046],{"class":264},[220,16168,16049],{"class":420},[220,16170,16052],{"class":264},[220,16172,16173,16175,16177,16179,16181],{"class":222,"line":644},[220,16174,16057],{"class":264},[220,16176,16043],{"class":230},[220,16178,16046],{"class":264},[220,16180,16049],{"class":420},[220,16182,16052],{"class":264},[220,16184,16185,16187,16189,16191,16193],{"class":222,"line":650},[220,16186,16070],{"class":264},[220,16188,16043],{"class":230},[220,16190,16046],{"class":264},[220,16192,6294],{"class":420},[220,16194,16052],{"class":264},[220,16196,16197,16199,16201,16203,16205],{"class":222,"line":656},[220,16198,16083],{"class":264},[220,16200,16043],{"class":230},[220,16202,16046],{"class":264},[220,16204,6294],{"class":420},[220,16206,16052],{"class":264},[220,16208,16209,16211,16213],{"class":222,"line":673},[220,16210,16096],{"class":264},[220,16212,15271],{"class":230},[220,16214,1760],{"class":264},[220,16216,16217,16219],{"class":222,"line":682},[220,16218,16105],{"class":264},[220,16220,16108],{"class":420},[220,16222,16223],{"class":222,"line":691},[220,16224,16113],{"class":264},[220,16226,16227],{"class":222,"line":696},[220,16228,1234],{"class":264},[220,16230,16231,16233,16235],{"class":222,"line":702},[220,16232,402],{"class":264},[220,16234,347],{"class":420},[220,16236,359],{"class":264},[212,16238,16239],{"className":468,"code":16128,"language":469,"meta":178,"style":178},[99,16240,16241,16255,16261,16269,16281,16293,16305,16317,16325,16331,16335,16339],{"__ignoreMap":178},[220,16242,16243,16245,16247,16249,16251,16253],{"class":222,"line":223},[220,16244,343],{"class":264},[220,16246,347],{"class":420},[220,16248,350],{"class":226},[220,16250,353],{"class":260},[220,16252,356],{"class":230},[220,16254,359],{"class":264},[220,16256,16257,16259],{"class":222,"line":179},[220,16258,364],{"class":264},[220,16260,1189],{"class":420},[220,16262,16263,16265,16267],{"class":222,"line":389},[220,16264,16030],{"class":226},[220,16266,353],{"class":260},[220,16268,16035],{"class":264},[220,16270,16271,16273,16275,16277,16279],{"class":222,"line":399},[220,16272,16040],{"class":264},[220,16274,16043],{"class":230},[220,16276,16046],{"class":264},[220,16278,16049],{"class":420},[220,16280,16052],{"class":264},[220,16282,16283,16285,16287,16289,16291],{"class":222,"line":644},[220,16284,16057],{"class":264},[220,16286,16043],{"class":230},[220,16288,16046],{"class":264},[220,16290,16049],{"class":420},[220,16292,16052],{"class":264},[220,16294,16295,16297,16299,16301,16303],{"class":222,"line":650},[220,16296,16070],{"class":264},[220,16298,16043],{"class":230},[220,16300,16046],{"class":264},[220,16302,6294],{"class":420},[220,16304,16052],{"class":264},[220,16306,16307,16309,16311,16313,16315],{"class":222,"line":656},[220,16308,16083],{"class":264},[220,16310,16043],{"class":230},[220,16312,16046],{"class":264},[220,16314,6294],{"class":420},[220,16316,16052],{"class":264},[220,16318,16319,16321,16323],{"class":222,"line":673},[220,16320,16096],{"class":264},[220,16322,15271],{"class":230},[220,16324,1760],{"class":264},[220,16326,16327,16329],{"class":222,"line":682},[220,16328,16105],{"class":264},[220,16330,16108],{"class":420},[220,16332,16333],{"class":222,"line":691},[220,16334,16113],{"class":264},[220,16336,16337],{"class":222,"line":696},[220,16338,1234],{"class":264},[220,16340,16341,16343,16345],{"class":222,"line":702},[220,16342,402],{"class":264},[220,16344,347],{"class":420},[220,16346,359],{"class":264},[212,16348,16350],{"className":251,"code":16349,"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,16351,16352,16366,16370,16375,16384,16389,16394,16407,16420,16433,16446,16455,16462,16467,16471,16475,16479],{"__ignoreMap":178},[220,16353,16354,16356,16358,16360,16362,16364],{"class":222,"line":223},[220,16355,1735],{"class":260},[220,16357,1738],{"class":420},[220,16359,1741],{"class":260},[220,16361,1744],{"class":260},[220,16363,1747],{"class":226},[220,16365,1750],{"class":264},[220,16367,16368],{"class":222,"line":179},[220,16369,1765],{"class":264},[220,16371,16372],{"class":222,"line":389},[220,16373,16374],{"class":264}," {\n",[220,16376,16377,16380,16382],{"class":222,"line":399},[220,16378,16379],{"class":264}," type: ",[220,16381,2462],{"class":230},[220,16383,1760],{"class":264},[220,16385,16386],{"class":222,"line":644},[220,16387,16388],{"class":264}," props: {\n",[220,16390,16391],{"class":222,"line":650},[220,16392,16393],{"class":264}," boundingBox: {\n",[220,16395,16396,16399,16401,16403,16405],{"class":222,"line":656},[220,16397,16398],{"class":264}," x: { unit: ",[220,16400,16043],{"class":230},[220,16402,16046],{"class":264},[220,16404,16049],{"class":420},[220,16406,16052],{"class":264},[220,16408,16409,16412,16414,16416,16418],{"class":222,"line":673},[220,16410,16411],{"class":264}," y: { unit: ",[220,16413,16043],{"class":230},[220,16415,16046],{"class":264},[220,16417,16049],{"class":420},[220,16419,16052],{"class":264},[220,16421,16422,16425,16427,16429,16431],{"class":222,"line":682},[220,16423,16424],{"class":264}," width: { unit: ",[220,16426,16043],{"class":230},[220,16428,16046],{"class":264},[220,16430,6294],{"class":420},[220,16432,16052],{"class":264},[220,16434,16435,16438,16440,16442,16444],{"class":222,"line":691},[220,16436,16437],{"class":264}," height: { unit: ",[220,16439,16043],{"class":230},[220,16441,16046],{"class":264},[220,16443,6294],{"class":420},[220,16445,16052],{"class":264},[220,16447,16448,16451,16453],{"class":222,"line":696},[220,16449,16450],{"class":264}," origin: ",[220,16452,15271],{"class":230},[220,16454,1760],{"class":264},[220,16456,16457,16460],{"class":222,"line":702},[220,16458,16459],{"class":264}," rotation: ",[220,16461,16108],{"class":420},[220,16463,16464],{"class":222,"line":718},[220,16465,16466],{"class":264}," }\n",[220,16468,16469],{"class":222,"line":727},[220,16470,4924],{"class":264},[220,16472,16473],{"class":222,"line":2664},[220,16474,4604],{"class":264},[220,16476,16477],{"class":222,"line":3522},[220,16478,1787],{"class":264},[220,16480,16481],{"class":222,"line":9657},[220,16482,1792],{"class":264},[23,16484,16486],{"id":16485},"animating-a-bounding-box","Animating a bounding box",[15,16488,16489,16491],{},[99,16490,15143],{}," is a reactive prop — bind any field to state and it updates live, no recompile:",[246,16493,16495,16747,17049],{":tabs":16494},"[\"Vue\", \"React\", \"JS\"]",[212,16496,16498],{"className":334,"code":16497,"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,16499,16500,16510,16521,16525,16542,16550,16554,16564,16578,16601,16614,16618,16629,16633,16648,16656,16660,16668,16682,16694,16699,16704,16709,16714,16719,16724,16731,16739],{"__ignoreMap":178},[220,16501,16502,16504,16506,16508],{"class":222,"line":223},[220,16503,343],{"class":264},[220,16505,2590],{"class":346},[220,16507,2593],{"class":226},[220,16509,359],{"class":264},[220,16511,16512,16514,16517,16519],{"class":222,"line":179},[220,16513,261],{"class":260},[220,16515,16516],{"class":264}," { ref, onMounted, onUnmounted } ",[220,16518,268],{"class":260},[220,16520,2607],{"class":230},[220,16522,16523],{"class":222,"line":389},[220,16524,647],{"emptyLinePlaceholder":194},[220,16526,16527,16529,16532,16534,16536,16538,16540],{"class":222,"line":399},[220,16528,1735],{"class":260},[220,16530,16531],{"class":420}," rotation",[220,16533,1741],{"class":260},[220,16535,2623],{"class":226},[220,16537,2626],{"class":264},[220,16539,8668],{"class":420},[220,16541,2632],{"class":264},[220,16543,16544,16547],{"class":222,"line":644},[220,16545,16546],{"class":260},"let",[220,16548,16549],{"class":264}," frame\n",[220,16551,16552],{"class":222,"line":650},[220,16553,647],{"emptyLinePlaceholder":194},[220,16555,16556,16558,16560,16562],{"class":222,"line":656},[220,16557,3484],{"class":226},[220,16559,3600],{"class":264},[220,16561,2762],{"class":260},[220,16563,3241],{"class":264},[220,16565,16566,16568,16570,16572,16574,16576],{"class":222,"line":673},[220,16567,2705],{"class":260},[220,16569,11954],{"class":226},[220,16571,1741],{"class":260},[220,16573,3492],{"class":264},[220,16575,2762],{"class":260},[220,16577,3241],{"class":264},[220,16579,16580,16583,16585,16588,16590,16593,16595,16598],{"class":222,"line":682},[220,16581,16582],{"class":264}," rotation.value ",[220,16584,353],{"class":260},[220,16586,16587],{"class":264}," (rotation.value ",[220,16589,10831],{"class":260},[220,16591,16592],{"class":420}," 0.5",[220,16594,4168],{"class":264},[220,16596,16597],{"class":260},"%",[220,16599,16600],{"class":420}," 360\n",[220,16602,16603,16606,16608,16611],{"class":222,"line":691},[220,16604,16605],{"class":264}," frame ",[220,16607,353],{"class":260},[220,16609,16610],{"class":226}," requestAnimationFrame",[220,16612,16613],{"class":264},"(animate)\n",[220,16615,16616],{"class":222,"line":696},[220,16617,3256],{"class":264},[220,16619,16620,16623,16625,16627],{"class":222,"line":702},[220,16621,16622],{"class":264}," frame ",[220,16624,353],{"class":260},[220,16626,16610],{"class":226},[220,16628,16613],{"class":264},[220,16630,16631],{"class":222,"line":718},[220,16632,1792],{"class":264},[220,16634,16635,16638,16640,16642,16645],{"class":222,"line":727},[220,16636,16637],{"class":226},"onUnmounted",[220,16639,3600],{"class":264},[220,16641,2762],{"class":260},[220,16643,16644],{"class":226}," cancelAnimationFrame",[220,16646,16647],{"class":264},"(frame))\n",[220,16649,16650,16652,16654],{"class":222,"line":2664},[220,16651,402],{"class":264},[220,16653,2590],{"class":346},[220,16655,359],{"class":264},[220,16657,16658],{"class":222,"line":3522},[220,16659,647],{"emptyLinePlaceholder":194},[220,16661,16662,16664,16666],{"class":222,"line":9657},[220,16663,343],{"class":264},[220,16665,2519],{"class":346},[220,16667,359],{"class":264},[220,16669,16670,16672,16674,16676,16678,16680],{"class":222,"line":9668},[220,16671,364],{"class":264},[220,16673,347],{"class":346},[220,16675,350],{"class":226},[220,16677,353],{"class":264},[220,16679,356],{"class":230},[220,16681,359],{"class":264},[220,16683,16684,16686,16688,16690,16692],{"class":222,"line":9673},[220,16685,2550],{"class":264},[220,16687,15834],{"class":346},[220,16689,15087],{"class":226},[220,16691,353],{"class":264},[220,16693,15092],{"class":230},[220,16695,16696],{"class":222,"line":10994},[220,16697,16698],{"class":230}," x: { unit: 'uv', value: 0.2 },\n",[220,16700,16701],{"class":222,"line":10999},[220,16702,16703],{"class":230}," y: { unit: 'uv', value: 0.2 },\n",[220,16705,16706],{"class":222,"line":12070},[220,16707,16708],{"class":230}," width: { unit: 'uv', value: 0.6 },\n",[220,16710,16711],{"class":222,"line":12077},[220,16712,16713],{"class":230}," height: { unit: 'uv', value: 0.6 },\n",[220,16715,16716],{"class":222,"line":12082},[220,16717,16718],{"class":230}," origin: 'top-left',\n",[220,16720,16721],{"class":222,"line":12100},[220,16722,16723],{"class":230}," rotation\n",[220,16725,16726,16729],{"class":222,"line":12105},[220,16727,16728],{"class":230}," }\"",[220,16730,386],{"class":264},[220,16732,16733,16735,16737],{"class":222,"line":12114},[220,16734,2567],{"class":264},[220,16736,347],{"class":346},[220,16738,359],{"class":264},[220,16740,16741,16743,16745],{"class":222,"line":12144},[220,16742,402],{"class":264},[220,16744,2519],{"class":346},[220,16746,359],{"class":264},[212,16748,16750],{"className":409,"code":16749,"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,16751,16752,16763,16767,16776,16801,16820,16824,16834,16849,16877,16888,16892,16903,16917,16921,16925,16931,16945,16952,16961,16974,16986,16998,17010,17018,17023,17028,17033,17041,17045],{"__ignoreMap":178},[220,16753,16754,16756,16759,16761],{"class":222,"line":223},[220,16755,261],{"class":260},[220,16757,16758],{"class":264}," { useState, useEffect, useRef } ",[220,16760,268],{"class":260},[220,16762,2687],{"class":230},[220,16764,16765],{"class":222,"line":179},[220,16766,647],{"emptyLinePlaceholder":194},[220,16768,16769,16771,16774],{"class":222,"line":389},[220,16770,2641],{"class":260},[220,16772,16773],{"class":226}," SpinningBox",[220,16775,2647],{"class":264},[220,16777,16778,16780,16782,16784,16786,16789,16791,16793,16795,16797,16799],{"class":222,"line":399},[220,16779,2705],{"class":260},[220,16781,2708],{"class":264},[220,16783,11830],{"class":420},[220,16785,1895],{"class":264},[220,16787,16788],{"class":420},"setRotation",[220,16790,2719],{"class":264},[220,16792,353],{"class":260},[220,16794,2724],{"class":226},[220,16796,2626],{"class":264},[220,16798,8668],{"class":420},[220,16800,2632],{"class":264},[220,16802,16803,16805,16808,16810,16813,16815,16818],{"class":222,"line":644},[220,16804,2705],{"class":260},[220,16806,16807],{"class":420}," frameRef",[220,16809,1741],{"class":260},[220,16811,16812],{"class":226}," useRef",[220,16814,2626],{"class":264},[220,16816,16817],{"class":420},"null",[220,16819,2632],{"class":264},[220,16821,16822],{"class":222,"line":650},[220,16823,647],{"emptyLinePlaceholder":194},[220,16825,16826,16828,16830,16832],{"class":222,"line":656},[220,16827,3597],{"class":226},[220,16829,3600],{"class":264},[220,16831,2762],{"class":260},[220,16833,3241],{"class":264},[220,16835,16836,16839,16841,16843,16845,16847],{"class":222,"line":673},[220,16837,16838],{"class":260}," const",[220,16840,11954],{"class":226},[220,16842,1741],{"class":260},[220,16844,3492],{"class":264},[220,16846,2762],{"class":260},[220,16848,3241],{"class":264},[220,16850,16851,16854,16856,16859,16861,16864,16866,16868,16870,16872,16875],{"class":222,"line":682},[220,16852,16853],{"class":226}," setRotation",[220,16855,2626],{"class":264},[220,16857,16858],{"class":3621},"r",[220,16860,10825],{"class":260},[220,16862,16863],{"class":264}," (r ",[220,16865,10831],{"class":260},[220,16867,16592],{"class":420},[220,16869,4168],{"class":264},[220,16871,16597],{"class":260},[220,16873,16874],{"class":420}," 360",[220,16876,2632],{"class":264},[220,16878,16879,16882,16884,16886],{"class":222,"line":691},[220,16880,16881],{"class":264}," frameRef.current ",[220,16883,353],{"class":260},[220,16885,16610],{"class":226},[220,16887,16613],{"class":264},[220,16889,16890],{"class":222,"line":696},[220,16891,4604],{"class":264},[220,16893,16894,16897,16899,16901],{"class":222,"line":702},[220,16895,16896],{"class":264}," frameRef.current ",[220,16898,353],{"class":260},[220,16900,16610],{"class":226},[220,16902,16613],{"class":264},[220,16904,16905,16908,16910,16912,16914],{"class":222,"line":718},[220,16906,16907],{"class":260}," return",[220,16909,3492],{"class":264},[220,16911,2762],{"class":260},[220,16913,16644],{"class":226},[220,16915,16916],{"class":264},"(frameRef.current)\n",[220,16918,16919],{"class":222,"line":727},[220,16920,3637],{"class":264},[220,16922,16923],{"class":222,"line":2664},[220,16924,647],{"emptyLinePlaceholder":194},[220,16926,16927,16929],{"class":222,"line":3522},[220,16928,2739],{"class":260},[220,16930,2742],{"class":264},[220,16932,16933,16935,16937,16939,16941,16943],{"class":222,"line":9657},[220,16934,2550],{"class":264},[220,16936,347],{"class":420},[220,16938,423],{"class":226},[220,16940,353],{"class":260},[220,16942,356],{"class":230},[220,16944,359],{"class":264},[220,16946,16947,16949],{"class":222,"line":9668},[220,16948,2813],{"class":264},[220,16950,16951],{"class":420},"Stripes\n",[220,16953,16954,16957,16959],{"class":222,"line":9673},[220,16955,16956],{"class":226}," boundingBox",[220,16958,353],{"class":260},[220,16960,16035],{"class":264},[220,16962,16963,16965,16967,16969,16972],{"class":222,"line":10994},[220,16964,16398],{"class":264},[220,16966,16043],{"class":230},[220,16968,16046],{"class":264},[220,16970,16971],{"class":420},"0.2",[220,16973,16052],{"class":264},[220,16975,16976,16978,16980,16982,16984],{"class":222,"line":10999},[220,16977,16411],{"class":264},[220,16979,16043],{"class":230},[220,16981,16046],{"class":264},[220,16983,16971],{"class":420},[220,16985,16052],{"class":264},[220,16987,16988,16990,16992,16994,16996],{"class":222,"line":12070},[220,16989,16424],{"class":264},[220,16991,16043],{"class":230},[220,16993,16046],{"class":264},[220,16995,8231],{"class":420},[220,16997,16052],{"class":264},[220,16999,17000,17002,17004,17006,17008],{"class":222,"line":12077},[220,17001,16437],{"class":264},[220,17003,16043],{"class":230},[220,17005,16046],{"class":264},[220,17007,8231],{"class":420},[220,17009,16052],{"class":264},[220,17011,17012,17014,17016],{"class":222,"line":12082},[220,17013,16450],{"class":264},[220,17015,15271],{"class":230},[220,17017,1760],{"class":264},[220,17019,17020],{"class":222,"line":12100},[220,17021,17022],{"class":264}," rotation\n",[220,17024,17025],{"class":222,"line":12105},[220,17026,17027],{"class":264}," }}\n",[220,17029,17030],{"class":222,"line":12114},[220,17031,17032],{"class":264}," \u002F>\n",[220,17034,17035,17037,17039],{"class":222,"line":12144},[220,17036,2828],{"class":264},[220,17038,347],{"class":420},[220,17040,359],{"class":264},[220,17042,17043],{"class":222,"line":12159},[220,17044,2837],{"class":264},[220,17046,17047],{"class":222,"line":12168},[220,17048,749],{"class":264},[212,17050,17052],{"className":251,"code":17051,"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,17053,17054,17064,17068,17082,17086,17100,17104,17108,17112,17124,17138,17158,17171,17176,17188,17200,17212,17224,17232,17236,17240,17244,17251,17255],{"__ignoreMap":178},[220,17055,17056,17058,17060,17062],{"class":222,"line":223},[220,17057,261],{"class":260},[220,17059,11507],{"class":264},[220,17061,268],{"class":260},[220,17063,4007],{"class":230},[220,17065,17066],{"class":222,"line":179},[220,17067,647],{"emptyLinePlaceholder":194},[220,17069,17070,17072,17074,17076,17078,17080],{"class":222,"line":389},[220,17071,1735],{"class":260},[220,17073,1738],{"class":420},[220,17075,1741],{"class":260},[220,17077,1744],{"class":260},[220,17079,1747],{"class":226},[220,17081,1750],{"class":264},[220,17083,17084],{"class":222,"line":399},[220,17085,1765],{"class":264},[220,17087,17088,17090,17093,17095,17098],{"class":222,"line":644},[220,17089,1770],{"class":264},[220,17091,17092],{"class":230},"'Stripes'",[220,17094,3209],{"class":264},[220,17096,17097],{"class":230},"'bars'",[220,17099,2465],{"class":264},[220,17101,17102],{"class":222,"line":650},[220,17103,1787],{"class":264},[220,17105,17106],{"class":222,"line":656},[220,17107,1792],{"class":264},[220,17109,17110],{"class":222,"line":673},[220,17111,647],{"emptyLinePlaceholder":194},[220,17113,17114,17116,17119,17121],{"class":222,"line":682},[220,17115,16546],{"class":260},[220,17117,17118],{"class":264}," rotation ",[220,17120,353],{"class":260},[220,17122,17123],{"class":420}," 0\n",[220,17125,17126,17128,17130,17132,17134,17136],{"class":222,"line":691},[220,17127,1735],{"class":260},[220,17129,11954],{"class":226},[220,17131,1741],{"class":260},[220,17133,3492],{"class":264},[220,17135,2762],{"class":260},[220,17137,3241],{"class":264},[220,17139,17140,17143,17145,17148,17150,17152,17154,17156],{"class":222,"line":696},[220,17141,17142],{"class":264}," rotation ",[220,17144,353],{"class":260},[220,17146,17147],{"class":264}," (rotation ",[220,17149,10831],{"class":260},[220,17151,16592],{"class":420},[220,17153,4168],{"class":264},[220,17155,16597],{"class":260},[220,17157,16600],{"class":420},[220,17159,17160,17163,17165,17167,17169],{"class":222,"line":702},[220,17161,17162],{"class":264}," shader.",[220,17164,11600],{"class":226},[220,17166,2626],{"class":264},[220,17168,17097],{"class":230},[220,17170,11962],{"class":264},[220,17172,17173],{"class":222,"line":718},[220,17174,17175],{"class":264}," boundingBox: {\n",[220,17177,17178,17180,17182,17184,17186],{"class":222,"line":727},[220,17179,16040],{"class":264},[220,17181,16043],{"class":230},[220,17183,16046],{"class":264},[220,17185,16971],{"class":420},[220,17187,16052],{"class":264},[220,17189,17190,17192,17194,17196,17198],{"class":222,"line":2664},[220,17191,16057],{"class":264},[220,17193,16043],{"class":230},[220,17195,16046],{"class":264},[220,17197,16971],{"class":420},[220,17199,16052],{"class":264},[220,17201,17202,17204,17206,17208,17210],{"class":222,"line":3522},[220,17203,16070],{"class":264},[220,17205,16043],{"class":230},[220,17207,16046],{"class":264},[220,17209,8231],{"class":420},[220,17211,16052],{"class":264},[220,17213,17214,17216,17218,17220,17222],{"class":222,"line":9657},[220,17215,16083],{"class":264},[220,17217,16043],{"class":230},[220,17219,16046],{"class":264},[220,17221,8231],{"class":420},[220,17223,16052],{"class":264},[220,17225,17226,17228,17230],{"class":222,"line":9668},[220,17227,16096],{"class":264},[220,17229,15271],{"class":230},[220,17231,1760],{"class":264},[220,17233,17234],{"class":222,"line":9673},[220,17235,16723],{"class":264},[220,17237,17238],{"class":222,"line":10994},[220,17239,4604],{"class":264},[220,17241,17242],{"class":222,"line":10999},[220,17243,12997],{"class":264},[220,17245,17246,17249],{"class":222,"line":12070},[220,17247,17248],{"class":226}," requestAnimationFrame",[220,17250,16613],{"class":264},[220,17252,17253],{"class":222,"line":12077},[220,17254,749],{"class":264},[220,17256,17257,17260],{"class":222,"line":12082},[220,17258,17259],{"class":226},"requestAnimationFrame",[220,17261,16613],{"class":264},[15,17263,17264,17265,17269],{},"For continuous animation, you can also reach for a ",[56,17266,17268],{"href":17267},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Prop"," on the underlying layer instead of driving rotation from component code.",[1504,17271,17272],{},"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":17274},[17275,17277,17279,17280,17281,17282,17283],{"id":15140,"depth":179,"text":17276},"The boundingBox prop",{"id":15368,"depth":179,"text":17278},"Units: uv (%) vs px",{"id":15166,"depth":179,"text":15284},{"id":11830,"depth":179,"text":15817},{"id":15878,"depth":179,"text":15879},{"id":15923,"depth":179,"text":15924},{"id":16485,"depth":179,"text":16486},"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":15011,"description":17284},"docs\u002Fguide\u002F6.transforms","A1nT4tqwMICq_7jLvlS_JTujCDRCF11koD_XEhP5v60",{"id":17292,"title":17293,"body":17294,"category":10227,"description":20951,"exclude":190,"extension":191,"forceFramework":190,"icon":20952,"meta":20953,"navigation":194,"path":17267,"seo":20954,"stem":20955,"__hash__":20956},"guide\u002Fdocs\u002Fguide\u002F7.dynamic-props.md","Dynamic Props",{"type":8,"value":17295,"toc":20943},[17296,17299,17302,17305,17354,17357,17360,17893,17896,17901,18030,18042,18045,18060,18528,18531,18535,18732,18744,18776,18779,18782,19264,19267,19271,19402,19407,19410,19413,19419,20142,20145,20149,20290,20295,20299,20302,20782,20786,20793,20941],[11,17297,17293],{"id":17298},"dynamic-props",[15,17300,17301],{},"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,17303,17304],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[212,17306,17308],{"className":334,"code":17307,"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,17309,17310,17315,17330,17334,17339],{"__ignoreMap":178},[220,17311,17312],{"class":222,"line":223},[220,17313,17314],{"class":609},"\u003C!-- Static value -->\n",[220,17316,17317,17319,17321,17324,17326,17328],{"class":222,"line":179},[220,17318,343],{"class":264},[220,17320,2553],{"class":346},[220,17322,17323],{"class":226}," :radius",[220,17325,353],{"class":264},[220,17327,7676],{"class":230},[220,17329,386],{"class":264},[220,17331,17332],{"class":222,"line":389},[220,17333,647],{"emptyLinePlaceholder":194},[220,17335,17336],{"class":222,"line":399},[220,17337,17338],{"class":609},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[220,17340,17341,17343,17345,17347,17349,17352],{"class":222,"line":644},[220,17342,343],{"class":264},[220,17344,2553],{"class":346},[220,17346,17323],{"class":226},[220,17348,353],{"class":264},[220,17350,17351],{"class":230},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[220,17353,386],{"class":264},[23,17355,17356],{"id":17356},"auto-animate",[15,17358,17359],{},"Continuously animates a numeric prop between two values over time.",[246,17361,17362,17452,17562,17665,17767],{":tabs":1557},[212,17363,17365],{"className":334,"code":17364,"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,17366,17367,17381,17387,17396,17405,17410,17415,17420,17425,17430,17435,17440,17444],{"__ignoreMap":178},[220,17368,17369,17371,17373,17375,17377,17379],{"class":222,"line":223},[220,17370,343],{"class":264},[220,17372,347],{"class":346},[220,17374,350],{"class":226},[220,17376,353],{"class":264},[220,17378,356],{"class":230},[220,17380,359],{"class":264},[220,17382,17383,17385],{"class":222,"line":179},[220,17384,364],{"class":264},[220,17386,9625],{"class":346},[220,17388,17389,17391,17393],{"class":222,"line":389},[220,17390,9630],{"class":226},[220,17392,353],{"class":264},[220,17394,17395],{"class":230},"\"#6366f1\"\n",[220,17397,17398,17401,17403],{"class":222,"line":399},[220,17399,17400],{"class":226}," :radius",[220,17402,353],{"class":264},[220,17404,15092],{"class":230},[220,17406,17407],{"class":222,"line":644},[220,17408,17409],{"class":230}," type: 'auto-animate',\n",[220,17411,17412],{"class":222,"line":650},[220,17413,17414],{"class":230}," mode: 'ping-pong',\n",[220,17416,17417],{"class":222,"line":656},[220,17418,17419],{"class":230}," outputMin: 0.2,\n",[220,17421,17422],{"class":222,"line":673},[220,17423,17424],{"class":230}," outputMax: 0.6,\n",[220,17426,17427],{"class":222,"line":682},[220,17428,17429],{"class":230}," speed: 0.8,\n",[220,17431,17432],{"class":222,"line":691},[220,17433,17434],{"class":230}," easing: 'sine'\n",[220,17436,17437],{"class":222,"line":696},[220,17438,17439],{"class":230}," }\"\n",[220,17441,17442],{"class":222,"line":702},[220,17443,1234],{"class":264},[220,17445,17446,17448,17450],{"class":222,"line":718},[220,17447,402],{"class":264},[220,17449,347],{"class":346},[220,17451,359],{"class":264},[212,17453,17455],{"className":409,"code":17454,"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,17456,17457,17471,17477,17485,17493,17502,17512,17521,17530,17539,17546,17550,17554],{"__ignoreMap":178},[220,17458,17459,17461,17463,17465,17467,17469],{"class":222,"line":223},[220,17460,343],{"class":264},[220,17462,347],{"class":420},[220,17464,423],{"class":226},[220,17466,353],{"class":260},[220,17468,356],{"class":230},[220,17470,359],{"class":264},[220,17472,17473,17475],{"class":222,"line":179},[220,17474,364],{"class":264},[220,17476,9625],{"class":420},[220,17478,17479,17481,17483],{"class":222,"line":389},[220,17480,9630],{"class":226},[220,17482,353],{"class":260},[220,17484,17395],{"class":230},[220,17486,17487,17489,17491],{"class":222,"line":399},[220,17488,9640],{"class":226},[220,17490,353],{"class":260},[220,17492,16035],{"class":264},[220,17494,17495,17497,17500],{"class":222,"line":644},[220,17496,16379],{"class":264},[220,17498,17499],{"class":230},"'auto-animate'",[220,17501,1760],{"class":264},[220,17503,17504,17507,17510],{"class":222,"line":650},[220,17505,17506],{"class":264}," mode: ",[220,17508,17509],{"class":230},"'ping-pong'",[220,17511,1760],{"class":264},[220,17513,17514,17517,17519],{"class":222,"line":656},[220,17515,17516],{"class":264}," outputMin: ",[220,17518,16971],{"class":420},[220,17520,1760],{"class":264},[220,17522,17523,17526,17528],{"class":222,"line":673},[220,17524,17525],{"class":264}," outputMax: ",[220,17527,8231],{"class":420},[220,17529,1760],{"class":264},[220,17531,17532,17535,17537],{"class":222,"line":682},[220,17533,17534],{"class":264}," speed: ",[220,17536,6294],{"class":420},[220,17538,1760],{"class":264},[220,17540,17541,17543],{"class":222,"line":691},[220,17542,11976],{"class":264},[220,17544,17545],{"class":230},"'sine'\n",[220,17547,17548],{"class":222,"line":696},[220,17549,16113],{"class":264},[220,17551,17552],{"class":222,"line":702},[220,17553,1234],{"class":264},[220,17555,17556,17558,17560],{"class":222,"line":718},[220,17557,402],{"class":264},[220,17559,347],{"class":420},[220,17561,359],{"class":264},[212,17563,17565],{"className":468,"code":17564,"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,17566,17567,17581,17587,17595,17603,17611,17619,17627,17635,17643,17649,17653,17657],{"__ignoreMap":178},[220,17568,17569,17571,17573,17575,17577,17579],{"class":222,"line":223},[220,17570,343],{"class":264},[220,17572,347],{"class":420},[220,17574,350],{"class":226},[220,17576,353],{"class":260},[220,17578,356],{"class":230},[220,17580,359],{"class":264},[220,17582,17583,17585],{"class":222,"line":179},[220,17584,364],{"class":264},[220,17586,9625],{"class":420},[220,17588,17589,17591,17593],{"class":222,"line":389},[220,17590,9630],{"class":226},[220,17592,353],{"class":260},[220,17594,17395],{"class":230},[220,17596,17597,17599,17601],{"class":222,"line":399},[220,17598,9640],{"class":226},[220,17600,353],{"class":260},[220,17602,16035],{"class":264},[220,17604,17605,17607,17609],{"class":222,"line":644},[220,17606,16379],{"class":264},[220,17608,17499],{"class":230},[220,17610,1760],{"class":264},[220,17612,17613,17615,17617],{"class":222,"line":650},[220,17614,17506],{"class":264},[220,17616,17509],{"class":230},[220,17618,1760],{"class":264},[220,17620,17621,17623,17625],{"class":222,"line":656},[220,17622,17516],{"class":264},[220,17624,16971],{"class":420},[220,17626,1760],{"class":264},[220,17628,17629,17631,17633],{"class":222,"line":673},[220,17630,17525],{"class":264},[220,17632,8231],{"class":420},[220,17634,1760],{"class":264},[220,17636,17637,17639,17641],{"class":222,"line":682},[220,17638,17534],{"class":264},[220,17640,6294],{"class":420},[220,17642,1760],{"class":264},[220,17644,17645,17647],{"class":222,"line":691},[220,17646,11976],{"class":264},[220,17648,17545],{"class":230},[220,17650,17651],{"class":222,"line":696},[220,17652,16113],{"class":264},[220,17654,17655],{"class":222,"line":702},[220,17656,1234],{"class":264},[220,17658,17659,17661,17663],{"class":222,"line":718},[220,17660,402],{"class":264},[220,17662,347],{"class":420},[220,17664,359],{"class":264},[212,17666,17667],{"className":468,"code":17564,"language":469,"meta":178,"style":178},[99,17668,17669,17683,17689,17697,17705,17713,17721,17729,17737,17745,17751,17755,17759],{"__ignoreMap":178},[220,17670,17671,17673,17675,17677,17679,17681],{"class":222,"line":223},[220,17672,343],{"class":264},[220,17674,347],{"class":420},[220,17676,350],{"class":226},[220,17678,353],{"class":260},[220,17680,356],{"class":230},[220,17682,359],{"class":264},[220,17684,17685,17687],{"class":222,"line":179},[220,17686,364],{"class":264},[220,17688,9625],{"class":420},[220,17690,17691,17693,17695],{"class":222,"line":389},[220,17692,9630],{"class":226},[220,17694,353],{"class":260},[220,17696,17395],{"class":230},[220,17698,17699,17701,17703],{"class":222,"line":399},[220,17700,9640],{"class":226},[220,17702,353],{"class":260},[220,17704,16035],{"class":264},[220,17706,17707,17709,17711],{"class":222,"line":644},[220,17708,16379],{"class":264},[220,17710,17499],{"class":230},[220,17712,1760],{"class":264},[220,17714,17715,17717,17719],{"class":222,"line":650},[220,17716,17506],{"class":264},[220,17718,17509],{"class":230},[220,17720,1760],{"class":264},[220,17722,17723,17725,17727],{"class":222,"line":656},[220,17724,17516],{"class":264},[220,17726,16971],{"class":420},[220,17728,1760],{"class":264},[220,17730,17731,17733,17735],{"class":222,"line":673},[220,17732,17525],{"class":264},[220,17734,8231],{"class":420},[220,17736,1760],{"class":264},[220,17738,17739,17741,17743],{"class":222,"line":682},[220,17740,17534],{"class":264},[220,17742,6294],{"class":420},[220,17744,1760],{"class":264},[220,17746,17747,17749],{"class":222,"line":691},[220,17748,11976],{"class":264},[220,17750,17545],{"class":230},[220,17752,17753],{"class":222,"line":696},[220,17754,16113],{"class":264},[220,17756,17757],{"class":222,"line":702},[220,17758,1234],{"class":264},[220,17760,17761,17763,17765],{"class":222,"line":718},[220,17762,402],{"class":264},[220,17764,347],{"class":420},[220,17766,359],{"class":264},[212,17768,17770],{"className":251,"code":17769,"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,17771,17772,17786,17790,17794,17802,17806,17816,17821,17830,17839,17848,17857,17866,17873,17877,17881,17885,17889],{"__ignoreMap":178},[220,17773,17774,17776,17778,17780,17782,17784],{"class":222,"line":223},[220,17775,1735],{"class":260},[220,17777,1738],{"class":420},[220,17779,1741],{"class":260},[220,17781,1744],{"class":260},[220,17783,1747],{"class":226},[220,17785,1750],{"class":264},[220,17787,17788],{"class":222,"line":179},[220,17789,1765],{"class":264},[220,17791,17792],{"class":222,"line":389},[220,17793,16374],{"class":264},[220,17795,17796,17798,17800],{"class":222,"line":399},[220,17797,16379],{"class":264},[220,17799,3206],{"class":230},[220,17801,1760],{"class":264},[220,17803,17804],{"class":222,"line":644},[220,17805,16388],{"class":264},[220,17807,17808,17811,17814],{"class":222,"line":650},[220,17809,17810],{"class":264}," color: ",[220,17812,17813],{"class":230},"'#6366f1'",[220,17815,1760],{"class":264},[220,17817,17818],{"class":222,"line":656},[220,17819,17820],{"class":264}," radius: {\n",[220,17822,17823,17826,17828],{"class":222,"line":673},[220,17824,17825],{"class":264}," type: ",[220,17827,17499],{"class":230},[220,17829,1760],{"class":264},[220,17831,17832,17835,17837],{"class":222,"line":682},[220,17833,17834],{"class":264}," mode: ",[220,17836,17509],{"class":230},[220,17838,1760],{"class":264},[220,17840,17841,17844,17846],{"class":222,"line":691},[220,17842,17843],{"class":264}," outputMin: ",[220,17845,16971],{"class":420},[220,17847,1760],{"class":264},[220,17849,17850,17853,17855],{"class":222,"line":696},[220,17851,17852],{"class":264}," outputMax: ",[220,17854,8231],{"class":420},[220,17856,1760],{"class":264},[220,17858,17859,17862,17864],{"class":222,"line":702},[220,17860,17861],{"class":264}," speed: ",[220,17863,6294],{"class":420},[220,17865,1760],{"class":264},[220,17867,17868,17871],{"class":222,"line":718},[220,17869,17870],{"class":264}," easing: ",[220,17872,17545],{"class":230},[220,17874,17875],{"class":222,"line":727},[220,17876,16466],{"class":264},[220,17878,17879],{"class":222,"line":2664},[220,17880,4924],{"class":264},[220,17882,17883],{"class":222,"line":3522},[220,17884,4604],{"class":264},[220,17886,17887],{"class":222,"line":9657},[220,17888,1787],{"class":264},[220,17890,17891],{"class":222,"line":9668},[220,17892,1792],{"class":264},[19,17894],{":preset":17895},"{\"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,17897,17898],{},[159,17899,17900],{},"Properties:",[1794,17902,17903,17916],{},[1797,17904,17905],{},[1800,17906,17907,17910,17912,17914],{},[1803,17908,17909],{},"Prop",[1803,17911,15182],{},[1803,17913,15185],{},[1803,17915,1808],{},[1810,17917,17918,17943,17959,17975,17994],{},[1800,17919,17920,17925,17930,17933],{},[1815,17921,17922],{},[99,17923,17924],{},"mode",[1815,17926,17927],{},[99,17928,17929],{},"'ping-pong' | 'loop'",[1815,17931,17932],{},"required",[1815,17934,17935,17938,17939,17942],{},[99,17936,17937],{},"ping-pong"," oscillates between min and max. ",[99,17940,17941],{},"loop"," advances from min to max then wraps.",[1800,17944,17945,17950,17954,17956],{},[1815,17946,17947],{},[99,17948,17949],{},"outputMin",[1815,17951,17952],{},[99,17953,15295],{},[1815,17955,17932],{},[1815,17957,17958],{},"Value at the start\u002Fbottom of the range.",[1800,17960,17961,17966,17970,17972],{},[1815,17962,17963],{},[99,17964,17965],{},"outputMax",[1815,17967,17968],{},[99,17969,15295],{},[1815,17971,17932],{},[1815,17973,17974],{},"Value at the end\u002Ftop of the range.",[1800,17976,17977,17982,17986,17991],{},[1815,17978,17979],{},[99,17980,17981],{},"speed",[1815,17983,17984],{},[99,17985,15295],{},[1815,17987,17988],{},[99,17989,17990],{},"1.0",[1815,17992,17993],{},"Cycles per second. Negative values reverse the loop direction.",[1800,17995,17996,18001,18005,18010],{},[1815,17997,17998],{},[99,17999,18000],{},"easing",[1815,18002,18003],{},[99,18004,9055],{},[1815,18006,18007],{},[99,18008,18009],{},"'sine'",[1815,18011,18012,18013,18015,18016,1895,18019,1895,18021,1895,18024,1895,18027,4831],{},"Easing curve for ",[99,18014,17937],{}," mode. Options: ",[99,18017,18018],{},"sine",[99,18020,1894],{},[99,18022,18023],{},"quad",[99,18025,18026],{},"expo",[99,18028,18029],{},"bounce",[15,18031,18032,18035,18036,18038,18039,4831],{},[159,18033,18034],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[99,18037,17941],{}," mode and ",[99,18040,18041],{},"outputMin: 0, outputMax: 360",[23,18043,18044],{"id":18044},"mouse-position",[15,18046,18047,18048,18051,18052,1895,18054,15662,18057,4831],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[99,18049,18050],{},"{ x, y }"," coordinates, such as ",[99,18053,8236],{},[99,18055,18056],{},"position",[99,18058,18059],{},"offset",[246,18061,18062,18144,18242,18333,18423],{":tabs":1557},[212,18063,18065],{"className":334,"code":18064,"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,18066,18067,18081,18087,18095,18104,18113,18118,18123,18128,18132,18136],{"__ignoreMap":178},[220,18068,18069,18071,18073,18075,18077,18079],{"class":222,"line":223},[220,18070,343],{"class":264},[220,18072,347],{"class":346},[220,18074,350],{"class":226},[220,18076,353],{"class":264},[220,18078,356],{"class":230},[220,18080,359],{"class":264},[220,18082,18083,18085],{"class":222,"line":179},[220,18084,364],{"class":264},[220,18086,9625],{"class":346},[220,18088,18089,18091,18093],{"class":222,"line":389},[220,18090,9630],{"class":226},[220,18092,353],{"class":264},[220,18094,17395],{"class":230},[220,18096,18097,18099,18101],{"class":222,"line":399},[220,18098,17400],{"class":226},[220,18100,353],{"class":264},[220,18102,18103],{"class":230},"\"0.15\"\n",[220,18105,18106,18109,18111],{"class":222,"line":644},[220,18107,18108],{"class":226}," :center",[220,18110,353],{"class":264},[220,18112,15092],{"class":230},[220,18114,18115],{"class":222,"line":650},[220,18116,18117],{"class":230}," type: 'mouse-position',\n",[220,18119,18120],{"class":222,"line":656},[220,18121,18122],{"class":230}," smoothing: 0.12,\n",[220,18124,18125],{"class":222,"line":673},[220,18126,18127],{"class":230}," momentum: 0.2\n",[220,18129,18130],{"class":222,"line":682},[220,18131,17439],{"class":230},[220,18133,18134],{"class":222,"line":691},[220,18135,1234],{"class":264},[220,18137,18138,18140,18142],{"class":222,"line":696},[220,18139,402],{"class":264},[220,18141,347],{"class":346},[220,18143,359],{"class":264},[212,18145,18147],{"className":409,"code":18146,"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,18148,18149,18163,18169,18177,18190,18199,18208,18218,18226,18230,18234],{"__ignoreMap":178},[220,18150,18151,18153,18155,18157,18159,18161],{"class":222,"line":223},[220,18152,343],{"class":264},[220,18154,347],{"class":420},[220,18156,423],{"class":226},[220,18158,353],{"class":260},[220,18160,356],{"class":230},[220,18162,359],{"class":264},[220,18164,18165,18167],{"class":222,"line":179},[220,18166,364],{"class":264},[220,18168,9625],{"class":420},[220,18170,18171,18173,18175],{"class":222,"line":389},[220,18172,9630],{"class":226},[220,18174,353],{"class":260},[220,18176,17395],{"class":230},[220,18178,18179,18181,18183,18185,18188],{"class":222,"line":399},[220,18180,9640],{"class":226},[220,18182,353],{"class":260},[220,18184,743],{"class":264},[220,18186,18187],{"class":420},"0.15",[220,18189,749],{"class":264},[220,18191,18192,18195,18197],{"class":222,"line":644},[220,18193,18194],{"class":226}," center",[220,18196,353],{"class":260},[220,18198,16035],{"class":264},[220,18200,18201,18203,18206],{"class":222,"line":650},[220,18202,16379],{"class":264},[220,18204,18205],{"class":230},"'mouse-position'",[220,18207,1760],{"class":264},[220,18209,18210,18213,18216],{"class":222,"line":656},[220,18211,18212],{"class":264}," smoothing: ",[220,18214,18215],{"class":420},"0.12",[220,18217,1760],{"class":264},[220,18219,18220,18223],{"class":222,"line":673},[220,18221,18222],{"class":264}," momentum: ",[220,18224,18225],{"class":420},"0.2\n",[220,18227,18228],{"class":222,"line":682},[220,18229,16113],{"class":264},[220,18231,18232],{"class":222,"line":691},[220,18233,1234],{"class":264},[220,18235,18236,18238,18240],{"class":222,"line":696},[220,18237,402],{"class":264},[220,18239,347],{"class":420},[220,18241,359],{"class":264},[212,18243,18245],{"className":468,"code":18244,"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,18246,18247,18261,18267,18275,18287,18295,18303,18311,18317,18321,18325],{"__ignoreMap":178},[220,18248,18249,18251,18253,18255,18257,18259],{"class":222,"line":223},[220,18250,343],{"class":264},[220,18252,347],{"class":420},[220,18254,350],{"class":226},[220,18256,353],{"class":260},[220,18258,356],{"class":230},[220,18260,359],{"class":264},[220,18262,18263,18265],{"class":222,"line":179},[220,18264,364],{"class":264},[220,18266,9625],{"class":420},[220,18268,18269,18271,18273],{"class":222,"line":389},[220,18270,9630],{"class":226},[220,18272,353],{"class":260},[220,18274,17395],{"class":230},[220,18276,18277,18279,18281,18283,18285],{"class":222,"line":399},[220,18278,9640],{"class":226},[220,18280,353],{"class":260},[220,18282,743],{"class":264},[220,18284,18187],{"class":420},[220,18286,749],{"class":264},[220,18288,18289,18291,18293],{"class":222,"line":644},[220,18290,18194],{"class":226},[220,18292,353],{"class":260},[220,18294,16035],{"class":264},[220,18296,18297,18299,18301],{"class":222,"line":650},[220,18298,16379],{"class":264},[220,18300,18205],{"class":230},[220,18302,1760],{"class":264},[220,18304,18305,18307,18309],{"class":222,"line":656},[220,18306,18212],{"class":264},[220,18308,18215],{"class":420},[220,18310,1760],{"class":264},[220,18312,18313,18315],{"class":222,"line":673},[220,18314,18222],{"class":264},[220,18316,18225],{"class":420},[220,18318,18319],{"class":222,"line":682},[220,18320,16113],{"class":264},[220,18322,18323],{"class":222,"line":691},[220,18324,1234],{"class":264},[220,18326,18327,18329,18331],{"class":222,"line":696},[220,18328,402],{"class":264},[220,18330,347],{"class":420},[220,18332,359],{"class":264},[212,18334,18335],{"className":468,"code":18244,"language":469,"meta":178,"style":178},[99,18336,18337,18351,18357,18365,18377,18385,18393,18401,18407,18411,18415],{"__ignoreMap":178},[220,18338,18339,18341,18343,18345,18347,18349],{"class":222,"line":223},[220,18340,343],{"class":264},[220,18342,347],{"class":420},[220,18344,350],{"class":226},[220,18346,353],{"class":260},[220,18348,356],{"class":230},[220,18350,359],{"class":264},[220,18352,18353,18355],{"class":222,"line":179},[220,18354,364],{"class":264},[220,18356,9625],{"class":420},[220,18358,18359,18361,18363],{"class":222,"line":389},[220,18360,9630],{"class":226},[220,18362,353],{"class":260},[220,18364,17395],{"class":230},[220,18366,18367,18369,18371,18373,18375],{"class":222,"line":399},[220,18368,9640],{"class":226},[220,18370,353],{"class":260},[220,18372,743],{"class":264},[220,18374,18187],{"class":420},[220,18376,749],{"class":264},[220,18378,18379,18381,18383],{"class":222,"line":644},[220,18380,18194],{"class":226},[220,18382,353],{"class":260},[220,18384,16035],{"class":264},[220,18386,18387,18389,18391],{"class":222,"line":650},[220,18388,16379],{"class":264},[220,18390,18205],{"class":230},[220,18392,1760],{"class":264},[220,18394,18395,18397,18399],{"class":222,"line":656},[220,18396,18212],{"class":264},[220,18398,18215],{"class":420},[220,18400,1760],{"class":264},[220,18402,18403,18405],{"class":222,"line":673},[220,18404,18222],{"class":264},[220,18406,18225],{"class":420},[220,18408,18409],{"class":222,"line":682},[220,18410,16113],{"class":264},[220,18412,18413],{"class":222,"line":691},[220,18414,1234],{"class":264},[220,18416,18417,18419,18421],{"class":222,"line":696},[220,18418,402],{"class":264},[220,18420,347],{"class":420},[220,18422,359],{"class":264},[212,18424,18426],{"className":251,"code":18425,"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,18427,18428,18442,18446,18450,18458,18462,18470,18479,18484,18492,18501,18508,18512,18516,18520,18524],{"__ignoreMap":178},[220,18429,18430,18432,18434,18436,18438,18440],{"class":222,"line":223},[220,18431,1735],{"class":260},[220,18433,1738],{"class":420},[220,18435,1741],{"class":260},[220,18437,1744],{"class":260},[220,18439,1747],{"class":226},[220,18441,1750],{"class":264},[220,18443,18444],{"class":222,"line":179},[220,18445,1765],{"class":264},[220,18447,18448],{"class":222,"line":389},[220,18449,16374],{"class":264},[220,18451,18452,18454,18456],{"class":222,"line":399},[220,18453,16379],{"class":264},[220,18455,3206],{"class":230},[220,18457,1760],{"class":264},[220,18459,18460],{"class":222,"line":644},[220,18461,16388],{"class":264},[220,18463,18464,18466,18468],{"class":222,"line":650},[220,18465,17810],{"class":264},[220,18467,17813],{"class":230},[220,18469,1760],{"class":264},[220,18471,18472,18475,18477],{"class":222,"line":656},[220,18473,18474],{"class":264}," radius: ",[220,18476,18187],{"class":420},[220,18478,1760],{"class":264},[220,18480,18481],{"class":222,"line":673},[220,18482,18483],{"class":264}," center: {\n",[220,18485,18486,18488,18490],{"class":222,"line":682},[220,18487,17825],{"class":264},[220,18489,18205],{"class":230},[220,18491,1760],{"class":264},[220,18493,18494,18497,18499],{"class":222,"line":691},[220,18495,18496],{"class":264}," smoothing: ",[220,18498,18215],{"class":420},[220,18500,1760],{"class":264},[220,18502,18503,18506],{"class":222,"line":696},[220,18504,18505],{"class":264}," momentum: ",[220,18507,18225],{"class":420},[220,18509,18510],{"class":222,"line":702},[220,18511,16466],{"class":264},[220,18513,18514],{"class":222,"line":718},[220,18515,4924],{"class":264},[220,18517,18518],{"class":222,"line":727},[220,18519,4604],{"class":264},[220,18521,18522],{"class":222,"line":2664},[220,18523,1787],{"class":264},[220,18525,18526],{"class":222,"line":3522},[220,18527,1792],{"class":264},[19,18529],{":preset":18530},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,18532,18533],{},[159,18534,17900],{},[1794,18536,18537,18549],{},[1797,18538,18539],{},[1800,18540,18541,18543,18545,18547],{},[1803,18542,17909],{},[1803,18544,15182],{},[1803,18546,15185],{},[1803,18548,1808],{},[1810,18550,18551,18572,18591,18609,18627,18648,18669,18696,18714],{},[1800,18552,18553,18557,18562,18567],{},[1815,18554,18555],{},[99,18556,15153],{},[1815,18558,18559],{},[99,18560,18561],{},"'mouse' | number",[1815,18563,18564],{},[99,18565,18566],{},"'mouse'",[1815,18568,18569,18571],{},[99,18570,18566],{}," tracks cursor X. A number pins it to that value (0–1).",[1800,18573,18574,18578,18582,18586],{},[1815,18575,18576],{},[99,18577,15156],{},[1815,18579,18580],{},[99,18581,18561],{},[1815,18583,18584],{},[99,18585,18566],{},[1815,18587,18588,18590],{},[99,18589,18566],{}," tracks cursor Y. A number pins it to that value (0–1).",[1800,18592,18593,18598,18602,18606],{},[1815,18594,18595],{},[99,18596,18597],{},"invertX",[1815,18599,18600],{},[99,18601,15330],{},[1815,18603,18604],{},[99,18605,2629],{},[1815,18607,18608],{},"Flips the X direction — cursor moving right moves position left.",[1800,18610,18611,18616,18620,18624],{},[1815,18612,18613],{},[99,18614,18615],{},"invertY",[1815,18617,18618],{},[99,18619,15330],{},[1815,18621,18622],{},[99,18623,2629],{},[1815,18625,18626],{},"Flips the Y direction.",[1800,18628,18629,18634,18638,18642],{},[1815,18630,18631],{},[99,18632,18633],{},"smoothing",[1815,18635,18636],{},[99,18637,15295],{},[1815,18639,18640],{},[99,18641,8668],{},[1815,18643,18644,18645,18647],{},"Lag amount (0–1). ",[99,18646,8668],{}," = instant, higher values = sluggish follow.",[1800,18649,18650,18655,18659,18663],{},[1815,18651,18652],{},[99,18653,18654],{},"momentum",[1815,18656,18657],{},[99,18658,15295],{},[1815,18660,18661],{},[99,18662,8668],{},[1815,18664,18665,18666,18668],{},"Spring bounce (0–1). ",[99,18667,8668],{}," = no overshoot, values near 1 = springy.",[1800,18670,18671,18676,18680,18684],{},[1815,18672,18673],{},[99,18674,18675],{},"reach",[1815,18677,18678],{},[99,18679,15295],{},[1815,18681,18682],{},[99,18683,8672],{},[1815,18685,18686,18687,18689,18690,18692,18693,18695],{},"Displacement scale. ",[99,18688,8672],{}," = 1:1 with cursor. ",[99,18691,7209],{}," = twice the displacement. ",[99,18694,8668],{}," = pinned to origin.",[1800,18697,18698,18703,18707,18711],{},[1815,18699,18700],{},[99,18701,18702],{},"originX",[1815,18704,18705],{},[99,18706,15295],{},[1815,18708,18709],{},[99,18710,7749],{},[1815,18712,18713],{},"X coordinate of the origin point that displacement scales from.",[1800,18715,18716,18721,18725,18729],{},[1815,18717,18718],{},[99,18719,18720],{},"originY",[1815,18722,18723],{},[99,18724,15295],{},[1815,18726,18727],{},[99,18728,7749],{},[1815,18730,18731],{},"Y coordinate of the origin point.",[15,18733,18734,18737,18738,18740,18741,18743],{},[159,18735,18736],{},"Pinning one axis:"," Set ",[99,18739,15153],{}," or ",[99,18742,15156],{}," to a number to fix that axis while the other tracks the mouse:",[212,18745,18747],{"className":334,"code":18746,"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,18748,18749,18754],{"__ignoreMap":178},[220,18750,18751],{"class":222,"line":223},[220,18752,18753],{"class":609},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[220,18755,18756,18758,18760,18762,18764,18767,18769,18771,18774],{"class":222,"line":179},[220,18757,343],{"class":264},[220,18759,2553],{"class":346},[220,18761,17323],{"class":226},[220,18763,353],{"class":264},[220,18765,18766],{"class":230},"\"0.15\"",[220,18768,8128],{"class":226},[220,18770,353],{"class":264},[220,18772,18773],{"class":230},"\"{ type: 'mouse-position', y: 0.5 }\"",[220,18775,386],{"class":264},[23,18777,18778],{"id":18778},"mouse",[15,18780,18781],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[246,18783,18784,18866,18965,19060,19154],{":tabs":1557},[212,18785,18787],{"className":334,"code":18786,"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,18788,18789,18803,18809,18817,18825,18830,18835,18840,18845,18850,18854,18858],{"__ignoreMap":178},[220,18790,18791,18793,18795,18797,18799,18801],{"class":222,"line":223},[220,18792,343],{"class":264},[220,18794,347],{"class":346},[220,18796,350],{"class":226},[220,18798,353],{"class":264},[220,18800,356],{"class":230},[220,18802,359],{"class":264},[220,18804,18805,18807],{"class":222,"line":179},[220,18806,364],{"class":264},[220,18808,9625],{"class":346},[220,18810,18811,18813,18815],{"class":222,"line":389},[220,18812,9630],{"class":226},[220,18814,353],{"class":264},[220,18816,17395],{"class":230},[220,18818,18819,18821,18823],{"class":222,"line":399},[220,18820,17400],{"class":226},[220,18822,353],{"class":264},[220,18824,15092],{"class":230},[220,18826,18827],{"class":222,"line":644},[220,18828,18829],{"class":230}," type: 'mouse',\n",[220,18831,18832],{"class":222,"line":650},[220,18833,18834],{"class":230}," axis: 'x',\n",[220,18836,18837],{"class":222,"line":656},[220,18838,18839],{"class":230}," outputMin: 0.1,\n",[220,18841,18842],{"class":222,"line":673},[220,18843,18844],{"class":230}," outputMax: 0.7,\n",[220,18846,18847],{"class":222,"line":682},[220,18848,18849],{"class":230}," smoothing: 0.1\n",[220,18851,18852],{"class":222,"line":691},[220,18853,17439],{"class":230},[220,18855,18856],{"class":222,"line":696},[220,18857,1234],{"class":264},[220,18859,18860,18862,18864],{"class":222,"line":702},[220,18861,402],{"class":264},[220,18863,347],{"class":346},[220,18865,359],{"class":264},[212,18867,18869],{"className":409,"code":18868,"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,18870,18871,18885,18891,18899,18907,18915,18925,18933,18942,18949,18953,18957],{"__ignoreMap":178},[220,18872,18873,18875,18877,18879,18881,18883],{"class":222,"line":223},[220,18874,343],{"class":264},[220,18876,347],{"class":420},[220,18878,423],{"class":226},[220,18880,353],{"class":260},[220,18882,356],{"class":230},[220,18884,359],{"class":264},[220,18886,18887,18889],{"class":222,"line":179},[220,18888,364],{"class":264},[220,18890,9625],{"class":420},[220,18892,18893,18895,18897],{"class":222,"line":389},[220,18894,9630],{"class":226},[220,18896,353],{"class":260},[220,18898,17395],{"class":230},[220,18900,18901,18903,18905],{"class":222,"line":399},[220,18902,9640],{"class":226},[220,18904,353],{"class":260},[220,18906,16035],{"class":264},[220,18908,18909,18911,18913],{"class":222,"line":644},[220,18910,16379],{"class":264},[220,18912,18566],{"class":230},[220,18914,1760],{"class":264},[220,18916,18917,18920,18923],{"class":222,"line":650},[220,18918,18919],{"class":264}," axis: ",[220,18921,18922],{"class":230},"'x'",[220,18924,1760],{"class":264},[220,18926,18927,18929,18931],{"class":222,"line":656},[220,18928,17516],{"class":264},[220,18930,16049],{"class":420},[220,18932,1760],{"class":264},[220,18934,18935,18937,18940],{"class":222,"line":673},[220,18936,17525],{"class":264},[220,18938,18939],{"class":420},"0.7",[220,18941,1760],{"class":264},[220,18943,18944,18946],{"class":222,"line":682},[220,18945,18212],{"class":264},[220,18947,18948],{"class":420},"0.1\n",[220,18950,18951],{"class":222,"line":691},[220,18952,16113],{"class":264},[220,18954,18955],{"class":222,"line":696},[220,18956,1234],{"class":264},[220,18958,18959,18961,18963],{"class":222,"line":702},[220,18960,402],{"class":264},[220,18962,347],{"class":420},[220,18964,359],{"class":264},[212,18966,18968],{"className":468,"code":18967,"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,18969,18970,18984,18990,18998,19006,19014,19022,19030,19038,19044,19048,19052],{"__ignoreMap":178},[220,18971,18972,18974,18976,18978,18980,18982],{"class":222,"line":223},[220,18973,343],{"class":264},[220,18975,347],{"class":420},[220,18977,350],{"class":226},[220,18979,353],{"class":260},[220,18981,356],{"class":230},[220,18983,359],{"class":264},[220,18985,18986,18988],{"class":222,"line":179},[220,18987,364],{"class":264},[220,18989,9625],{"class":420},[220,18991,18992,18994,18996],{"class":222,"line":389},[220,18993,9630],{"class":226},[220,18995,353],{"class":260},[220,18997,17395],{"class":230},[220,18999,19000,19002,19004],{"class":222,"line":399},[220,19001,9640],{"class":226},[220,19003,353],{"class":260},[220,19005,16035],{"class":264},[220,19007,19008,19010,19012],{"class":222,"line":644},[220,19009,16379],{"class":264},[220,19011,18566],{"class":230},[220,19013,1760],{"class":264},[220,19015,19016,19018,19020],{"class":222,"line":650},[220,19017,18919],{"class":264},[220,19019,18922],{"class":230},[220,19021,1760],{"class":264},[220,19023,19024,19026,19028],{"class":222,"line":656},[220,19025,17516],{"class":264},[220,19027,16049],{"class":420},[220,19029,1760],{"class":264},[220,19031,19032,19034,19036],{"class":222,"line":673},[220,19033,17525],{"class":264},[220,19035,18939],{"class":420},[220,19037,1760],{"class":264},[220,19039,19040,19042],{"class":222,"line":682},[220,19041,18212],{"class":264},[220,19043,18948],{"class":420},[220,19045,19046],{"class":222,"line":691},[220,19047,16113],{"class":264},[220,19049,19050],{"class":222,"line":696},[220,19051,1234],{"class":264},[220,19053,19054,19056,19058],{"class":222,"line":702},[220,19055,402],{"class":264},[220,19057,347],{"class":420},[220,19059,359],{"class":264},[212,19061,19062],{"className":468,"code":18967,"language":469,"meta":178,"style":178},[99,19063,19064,19078,19084,19092,19100,19108,19116,19124,19132,19138,19142,19146],{"__ignoreMap":178},[220,19065,19066,19068,19070,19072,19074,19076],{"class":222,"line":223},[220,19067,343],{"class":264},[220,19069,347],{"class":420},[220,19071,350],{"class":226},[220,19073,353],{"class":260},[220,19075,356],{"class":230},[220,19077,359],{"class":264},[220,19079,19080,19082],{"class":222,"line":179},[220,19081,364],{"class":264},[220,19083,9625],{"class":420},[220,19085,19086,19088,19090],{"class":222,"line":389},[220,19087,9630],{"class":226},[220,19089,353],{"class":260},[220,19091,17395],{"class":230},[220,19093,19094,19096,19098],{"class":222,"line":399},[220,19095,9640],{"class":226},[220,19097,353],{"class":260},[220,19099,16035],{"class":264},[220,19101,19102,19104,19106],{"class":222,"line":644},[220,19103,16379],{"class":264},[220,19105,18566],{"class":230},[220,19107,1760],{"class":264},[220,19109,19110,19112,19114],{"class":222,"line":650},[220,19111,18919],{"class":264},[220,19113,18922],{"class":230},[220,19115,1760],{"class":264},[220,19117,19118,19120,19122],{"class":222,"line":656},[220,19119,17516],{"class":264},[220,19121,16049],{"class":420},[220,19123,1760],{"class":264},[220,19125,19126,19128,19130],{"class":222,"line":673},[220,19127,17525],{"class":264},[220,19129,18939],{"class":420},[220,19131,1760],{"class":264},[220,19133,19134,19136],{"class":222,"line":682},[220,19135,18212],{"class":264},[220,19137,18948],{"class":420},[220,19139,19140],{"class":222,"line":691},[220,19141,16113],{"class":264},[220,19143,19144],{"class":222,"line":696},[220,19145,1234],{"class":264},[220,19147,19148,19150,19152],{"class":222,"line":702},[220,19149,402],{"class":264},[220,19151,347],{"class":420},[220,19153,359],{"class":264},[212,19155,19157],{"className":251,"code":19156,"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,19158,19159,19173,19177,19181,19189,19193,19201,19205,19213,19222,19230,19238,19244,19248,19252,19256,19260],{"__ignoreMap":178},[220,19160,19161,19163,19165,19167,19169,19171],{"class":222,"line":223},[220,19162,1735],{"class":260},[220,19164,1738],{"class":420},[220,19166,1741],{"class":260},[220,19168,1744],{"class":260},[220,19170,1747],{"class":226},[220,19172,1750],{"class":264},[220,19174,19175],{"class":222,"line":179},[220,19176,1765],{"class":264},[220,19178,19179],{"class":222,"line":389},[220,19180,16374],{"class":264},[220,19182,19183,19185,19187],{"class":222,"line":399},[220,19184,16379],{"class":264},[220,19186,3206],{"class":230},[220,19188,1760],{"class":264},[220,19190,19191],{"class":222,"line":644},[220,19192,16388],{"class":264},[220,19194,19195,19197,19199],{"class":222,"line":650},[220,19196,17810],{"class":264},[220,19198,17813],{"class":230},[220,19200,1760],{"class":264},[220,19202,19203],{"class":222,"line":656},[220,19204,17820],{"class":264},[220,19206,19207,19209,19211],{"class":222,"line":673},[220,19208,17825],{"class":264},[220,19210,18566],{"class":230},[220,19212,1760],{"class":264},[220,19214,19215,19218,19220],{"class":222,"line":682},[220,19216,19217],{"class":264}," axis: ",[220,19219,18922],{"class":230},[220,19221,1760],{"class":264},[220,19223,19224,19226,19228],{"class":222,"line":691},[220,19225,17843],{"class":264},[220,19227,16049],{"class":420},[220,19229,1760],{"class":264},[220,19231,19232,19234,19236],{"class":222,"line":696},[220,19233,17852],{"class":264},[220,19235,18939],{"class":420},[220,19237,1760],{"class":264},[220,19239,19240,19242],{"class":222,"line":702},[220,19241,18496],{"class":264},[220,19243,18948],{"class":420},[220,19245,19246],{"class":222,"line":718},[220,19247,16466],{"class":264},[220,19249,19250],{"class":222,"line":727},[220,19251,4924],{"class":264},[220,19253,19254],{"class":222,"line":2664},[220,19255,4604],{"class":264},[220,19257,19258],{"class":222,"line":3522},[220,19259,1787],{"class":264},[220,19261,19262],{"class":222,"line":9657},[220,19263,1792],{"class":264},[19,19265],{":preset":19266},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,19268,19269],{},[159,19270,17900],{},[1794,19272,19273,19285],{},[1797,19274,19275],{},[1800,19276,19277,19279,19281,19283],{},[1803,19278,17909],{},[1803,19280,15182],{},[1803,19282,15185],{},[1803,19284,1808],{},[1810,19286,19287,19304,19319,19334,19364,19383],{},[1800,19288,19289,19294,19299,19301],{},[1815,19290,19291],{},[99,19292,19293],{},"axis",[1815,19295,19296],{},[99,19297,19298],{},"'x' | 'y'",[1815,19300,17932],{},[1815,19302,19303],{},"Which pointer axis drives this prop.",[1800,19305,19306,19310,19314,19316],{},[1815,19307,19308],{},[99,19309,17949],{},[1815,19311,19312],{},[99,19313,15295],{},[1815,19315,17932],{},[1815,19317,19318],{},"Output value when axis is at 0 (left or top).",[1800,19320,19321,19325,19329,19331],{},[1815,19322,19323],{},[99,19324,17965],{},[1815,19326,19327],{},[99,19328,15295],{},[1815,19330,17932],{},[1815,19332,19333],{},"Output value when axis is at 1 (right or bottom).",[1800,19335,19336,19341,19345,19349],{},[1815,19337,19338],{},[99,19339,19340],{},"curve",[1815,19342,19343],{},[99,19344,15295],{},[1815,19346,19347],{},[99,19348,8668],{},[1815,19350,19351,19352,1550,19355,19358,19359,19361,19362,4831],{},"Power curve: ",[99,19353,19354],{},"-1",[99,19356,19357],{},"+1",". Negative = biased toward ",[99,19360,17949],{},", positive = toward ",[99,19363,17965],{},[1800,19365,19366,19370,19374,19378],{},[1815,19367,19368],{},[99,19369,18633],{},[1815,19371,19372],{},[99,19373,15295],{},[1815,19375,19376],{},[99,19377,8668],{},[1815,19379,19380,19381,4831],{},"Lag (0–1). Same as ",[99,19382,18044],{},[1800,19384,19385,19389,19393,19397],{},[1815,19386,19387],{},[99,19388,18654],{},[1815,19390,19391],{},[99,19392,15295],{},[1815,19394,19395],{},[99,19396,8668],{},[1815,19398,19399,19400,4831],{},"Spring bounce (0–1). Same as ",[99,19401,18044],{},[15,19403,19404,19406],{},[159,19405,18034],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,19408,19409],{"id":19409},"map",[15,19411,19412],{},"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,19414,19415,19416,19418],{},"First, give the source component an ",[99,19417,9051],{},". Then reference that id in the driver:",[246,19420,19421,19559,19705,19842,19978],{":tabs":1557},[212,19422,19424],{"className":334,"code":19423,"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,19425,19426,19440,19445,19451,19460,19470,19479,19483,19487,19492,19499,19508,19513,19518,19523,19528,19533,19538,19543,19547,19551],{"__ignoreMap":178},[220,19427,19428,19430,19432,19434,19436,19438],{"class":222,"line":223},[220,19429,343],{"class":264},[220,19431,347],{"class":346},[220,19433,350],{"class":226},[220,19435,353],{"class":264},[220,19437,356],{"class":230},[220,19439,359],{"class":264},[220,19441,19442],{"class":222,"line":179},[220,19443,19444],{"class":609}," \u003C!-- Source layer: named 'grad' -->\n",[220,19446,19447,19449],{"class":222,"line":389},[220,19448,364],{"class":264},[220,19450,1189],{"class":346},[220,19452,19453,19455,19457],{"class":222,"line":399},[220,19454,9572],{"class":226},[220,19456,353],{"class":264},[220,19458,19459],{"class":230},"\"grad\"\n",[220,19461,19462,19465,19467],{"class":222,"line":644},[220,19463,19464],{"class":226}," color-a",[220,19466,353],{"class":264},[220,19468,19469],{"class":230},"\"#000000\"\n",[220,19471,19472,19475,19477],{"class":222,"line":650},[220,19473,19474],{"class":226}," color-b",[220,19476,353],{"class":264},[220,19478,9586],{"class":230},[220,19480,19481],{"class":222,"line":656},[220,19482,1234],{"class":264},[220,19484,19485],{"class":222,"line":673},[220,19486,647],{"emptyLinePlaceholder":194},[220,19488,19489],{"class":222,"line":682},[220,19490,19491],{"class":609}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[220,19493,19494,19496],{"class":222,"line":691},[220,19495,364],{"class":264},[220,19497,19498],{"class":346},"DotGrid\n",[220,19500,19501,19504,19506],{"class":222,"line":696},[220,19502,19503],{"class":226}," :dot-size",[220,19505,353],{"class":264},[220,19507,15092],{"class":230},[220,19509,19510],{"class":222,"line":702},[220,19511,19512],{"class":230}," type: 'map',\n",[220,19514,19515],{"class":222,"line":718},[220,19516,19517],{"class":230}," source: 'grad',\n",[220,19519,19520],{"class":222,"line":727},[220,19521,19522],{"class":230}," channel: 'luminance',\n",[220,19524,19525],{"class":222,"line":2664},[220,19526,19527],{"class":230}," inputMin: 0,\n",[220,19529,19530],{"class":222,"line":3522},[220,19531,19532],{"class":230}," inputMax: 1,\n",[220,19534,19535],{"class":222,"line":9657},[220,19536,19537],{"class":230}," outputMin: 0.02,\n",[220,19539,19540],{"class":222,"line":9668},[220,19541,19542],{"class":230}," outputMax: 0.12\n",[220,19544,19545],{"class":222,"line":9673},[220,19546,17439],{"class":230},[220,19548,19549],{"class":222,"line":10994},[220,19550,1234],{"class":264},[220,19552,19553,19555,19557],{"class":222,"line":10999},[220,19554,402],{"class":264},[220,19556,347],{"class":346},[220,19558,359],{"class":264},[212,19560,19562],{"className":409,"code":19561,"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,19563,19564,19578,19584,19592,19600,19608,19612,19618,19627,19636,19646,19655,19664,19673,19682,19689,19693,19697],{"__ignoreMap":178},[220,19565,19566,19568,19570,19572,19574,19576],{"class":222,"line":223},[220,19567,343],{"class":264},[220,19569,347],{"class":420},[220,19571,423],{"class":226},[220,19573,353],{"class":260},[220,19575,356],{"class":230},[220,19577,359],{"class":264},[220,19579,19580,19582],{"class":222,"line":179},[220,19581,364],{"class":264},[220,19583,1189],{"class":420},[220,19585,19586,19588,19590],{"class":222,"line":389},[220,19587,9572],{"class":226},[220,19589,353],{"class":260},[220,19591,19459],{"class":230},[220,19593,19594,19596,19598],{"class":222,"line":399},[220,19595,1194],{"class":226},[220,19597,353],{"class":260},[220,19599,19469],{"class":230},[220,19601,19602,19604,19606],{"class":222,"line":644},[220,19603,1204],{"class":226},[220,19605,353],{"class":260},[220,19607,9586],{"class":230},[220,19609,19610],{"class":222,"line":650},[220,19611,1234],{"class":264},[220,19613,19614,19616],{"class":222,"line":656},[220,19615,364],{"class":264},[220,19617,19498],{"class":420},[220,19619,19620,19623,19625],{"class":222,"line":673},[220,19621,19622],{"class":226}," dotSize",[220,19624,353],{"class":260},[220,19626,16035],{"class":264},[220,19628,19629,19631,19634],{"class":222,"line":682},[220,19630,16379],{"class":264},[220,19632,19633],{"class":230},"'map'",[220,19635,1760],{"class":264},[220,19637,19638,19641,19644],{"class":222,"line":691},[220,19639,19640],{"class":264}," source: ",[220,19642,19643],{"class":230},"'grad'",[220,19645,1760],{"class":264},[220,19647,19648,19651,19653],{"class":222,"line":696},[220,19649,19650],{"class":264}," channel: ",[220,19652,10201],{"class":230},[220,19654,1760],{"class":264},[220,19656,19657,19660,19662],{"class":222,"line":702},[220,19658,19659],{"class":264}," inputMin: ",[220,19661,8668],{"class":420},[220,19663,1760],{"class":264},[220,19665,19666,19669,19671],{"class":222,"line":718},[220,19667,19668],{"class":264}," inputMax: ",[220,19670,8672],{"class":420},[220,19672,1760],{"class":264},[220,19674,19675,19677,19680],{"class":222,"line":727},[220,19676,17516],{"class":264},[220,19678,19679],{"class":420},"0.02",[220,19681,1760],{"class":264},[220,19683,19684,19686],{"class":222,"line":2664},[220,19685,17525],{"class":264},[220,19687,19688],{"class":420},"0.12\n",[220,19690,19691],{"class":222,"line":3522},[220,19692,16113],{"class":264},[220,19694,19695],{"class":222,"line":9657},[220,19696,1234],{"class":264},[220,19698,19699,19701,19703],{"class":222,"line":9668},[220,19700,402],{"class":264},[220,19702,347],{"class":420},[220,19704,359],{"class":264},[212,19706,19708],{"className":468,"code":19707,"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,19709,19710,19724,19730,19738,19746,19754,19758,19764,19772,19780,19788,19796,19804,19812,19820,19826,19830,19834],{"__ignoreMap":178},[220,19711,19712,19714,19716,19718,19720,19722],{"class":222,"line":223},[220,19713,343],{"class":264},[220,19715,347],{"class":420},[220,19717,350],{"class":226},[220,19719,353],{"class":260},[220,19721,356],{"class":230},[220,19723,359],{"class":264},[220,19725,19726,19728],{"class":222,"line":179},[220,19727,364],{"class":264},[220,19729,1189],{"class":420},[220,19731,19732,19734,19736],{"class":222,"line":389},[220,19733,9572],{"class":226},[220,19735,353],{"class":260},[220,19737,19459],{"class":230},[220,19739,19740,19742,19744],{"class":222,"line":399},[220,19741,1194],{"class":226},[220,19743,353],{"class":260},[220,19745,19469],{"class":230},[220,19747,19748,19750,19752],{"class":222,"line":644},[220,19749,1204],{"class":226},[220,19751,353],{"class":260},[220,19753,9586],{"class":230},[220,19755,19756],{"class":222,"line":650},[220,19757,1234],{"class":264},[220,19759,19760,19762],{"class":222,"line":656},[220,19761,364],{"class":264},[220,19763,19498],{"class":420},[220,19765,19766,19768,19770],{"class":222,"line":673},[220,19767,19622],{"class":226},[220,19769,353],{"class":260},[220,19771,16035],{"class":264},[220,19773,19774,19776,19778],{"class":222,"line":682},[220,19775,16379],{"class":264},[220,19777,19633],{"class":230},[220,19779,1760],{"class":264},[220,19781,19782,19784,19786],{"class":222,"line":691},[220,19783,19640],{"class":264},[220,19785,19643],{"class":230},[220,19787,1760],{"class":264},[220,19789,19790,19792,19794],{"class":222,"line":696},[220,19791,19650],{"class":264},[220,19793,10201],{"class":230},[220,19795,1760],{"class":264},[220,19797,19798,19800,19802],{"class":222,"line":702},[220,19799,19659],{"class":264},[220,19801,8668],{"class":420},[220,19803,1760],{"class":264},[220,19805,19806,19808,19810],{"class":222,"line":718},[220,19807,19668],{"class":264},[220,19809,8672],{"class":420},[220,19811,1760],{"class":264},[220,19813,19814,19816,19818],{"class":222,"line":727},[220,19815,17516],{"class":264},[220,19817,19679],{"class":420},[220,19819,1760],{"class":264},[220,19821,19822,19824],{"class":222,"line":2664},[220,19823,17525],{"class":264},[220,19825,19688],{"class":420},[220,19827,19828],{"class":222,"line":3522},[220,19829,16113],{"class":264},[220,19831,19832],{"class":222,"line":9657},[220,19833,1234],{"class":264},[220,19835,19836,19838,19840],{"class":222,"line":9668},[220,19837,402],{"class":264},[220,19839,347],{"class":420},[220,19841,359],{"class":264},[212,19843,19844],{"className":468,"code":19707,"language":469,"meta":178,"style":178},[99,19845,19846,19860,19866,19874,19882,19890,19894,19900,19908,19916,19924,19932,19940,19948,19956,19962,19966,19970],{"__ignoreMap":178},[220,19847,19848,19850,19852,19854,19856,19858],{"class":222,"line":223},[220,19849,343],{"class":264},[220,19851,347],{"class":420},[220,19853,350],{"class":226},[220,19855,353],{"class":260},[220,19857,356],{"class":230},[220,19859,359],{"class":264},[220,19861,19862,19864],{"class":222,"line":179},[220,19863,364],{"class":264},[220,19865,1189],{"class":420},[220,19867,19868,19870,19872],{"class":222,"line":389},[220,19869,9572],{"class":226},[220,19871,353],{"class":260},[220,19873,19459],{"class":230},[220,19875,19876,19878,19880],{"class":222,"line":399},[220,19877,1194],{"class":226},[220,19879,353],{"class":260},[220,19881,19469],{"class":230},[220,19883,19884,19886,19888],{"class":222,"line":644},[220,19885,1204],{"class":226},[220,19887,353],{"class":260},[220,19889,9586],{"class":230},[220,19891,19892],{"class":222,"line":650},[220,19893,1234],{"class":264},[220,19895,19896,19898],{"class":222,"line":656},[220,19897,364],{"class":264},[220,19899,19498],{"class":420},[220,19901,19902,19904,19906],{"class":222,"line":673},[220,19903,19622],{"class":226},[220,19905,353],{"class":260},[220,19907,16035],{"class":264},[220,19909,19910,19912,19914],{"class":222,"line":682},[220,19911,16379],{"class":264},[220,19913,19633],{"class":230},[220,19915,1760],{"class":264},[220,19917,19918,19920,19922],{"class":222,"line":691},[220,19919,19640],{"class":264},[220,19921,19643],{"class":230},[220,19923,1760],{"class":264},[220,19925,19926,19928,19930],{"class":222,"line":696},[220,19927,19650],{"class":264},[220,19929,10201],{"class":230},[220,19931,1760],{"class":264},[220,19933,19934,19936,19938],{"class":222,"line":702},[220,19935,19659],{"class":264},[220,19937,8668],{"class":420},[220,19939,1760],{"class":264},[220,19941,19942,19944,19946],{"class":222,"line":718},[220,19943,19668],{"class":264},[220,19945,8672],{"class":420},[220,19947,1760],{"class":264},[220,19949,19950,19952,19954],{"class":222,"line":727},[220,19951,17516],{"class":264},[220,19953,19679],{"class":420},[220,19955,1760],{"class":264},[220,19957,19958,19960],{"class":222,"line":2664},[220,19959,17525],{"class":264},[220,19961,19688],{"class":420},[220,19963,19964],{"class":222,"line":3522},[220,19965,16113],{"class":264},[220,19967,19968],{"class":222,"line":9657},[220,19969,1234],{"class":264},[220,19971,19972,19974,19976],{"class":222,"line":9668},[220,19973,402],{"class":264},[220,19975,347],{"class":420},[220,19977,359],{"class":264},[212,19979,19981],{"className":251,"code":19980,"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,19982,19983,19997,20001,20005,20013,20022,20036,20041,20045,20054,20058,20063,20071,20080,20089,20098,20107,20115,20122,20126,20130,20134,20138],{"__ignoreMap":178},[220,19984,19985,19987,19989,19991,19993,19995],{"class":222,"line":223},[220,19986,1735],{"class":260},[220,19988,1738],{"class":420},[220,19990,1741],{"class":260},[220,19992,1744],{"class":260},[220,19994,1747],{"class":226},[220,19996,1750],{"class":264},[220,19998,19999],{"class":222,"line":179},[220,20000,1765],{"class":264},[220,20002,20003],{"class":222,"line":389},[220,20004,16374],{"class":264},[220,20006,20007,20009,20011],{"class":222,"line":399},[220,20008,16379],{"class":264},[220,20010,2462],{"class":230},[220,20012,1760],{"class":264},[220,20014,20015,20018,20020],{"class":222,"line":644},[220,20016,20017],{"class":264}," id: ",[220,20019,19643],{"class":230},[220,20021,1760],{"class":264},[220,20023,20024,20027,20030,20032,20034],{"class":222,"line":650},[220,20025,20026],{"class":264}," props: { colorA: ",[220,20028,20029],{"class":230},"'#000000'",[220,20031,10167],{"class":264},[220,20033,10164],{"class":230},[220,20035,5665],{"class":264},[220,20037,20038],{"class":222,"line":656},[220,20039,20040],{"class":264}," },\n",[220,20042,20043],{"class":222,"line":673},[220,20044,16374],{"class":264},[220,20046,20047,20049,20052],{"class":222,"line":682},[220,20048,16379],{"class":264},[220,20050,20051],{"class":230},"'DotGrid'",[220,20053,1760],{"class":264},[220,20055,20056],{"class":222,"line":691},[220,20057,16388],{"class":264},[220,20059,20060],{"class":222,"line":696},[220,20061,20062],{"class":264}," dotSize: {\n",[220,20064,20065,20067,20069],{"class":222,"line":702},[220,20066,17825],{"class":264},[220,20068,19633],{"class":230},[220,20070,1760],{"class":264},[220,20072,20073,20076,20078],{"class":222,"line":718},[220,20074,20075],{"class":264}," source: ",[220,20077,19643],{"class":230},[220,20079,1760],{"class":264},[220,20081,20082,20085,20087],{"class":222,"line":727},[220,20083,20084],{"class":264}," channel: ",[220,20086,10201],{"class":230},[220,20088,1760],{"class":264},[220,20090,20091,20094,20096],{"class":222,"line":2664},[220,20092,20093],{"class":264}," inputMin: ",[220,20095,8668],{"class":420},[220,20097,1760],{"class":264},[220,20099,20100,20103,20105],{"class":222,"line":3522},[220,20101,20102],{"class":264}," inputMax: ",[220,20104,8672],{"class":420},[220,20106,1760],{"class":264},[220,20108,20109,20111,20113],{"class":222,"line":9657},[220,20110,17843],{"class":264},[220,20112,8668],{"class":420},[220,20114,1760],{"class":264},[220,20116,20117,20119],{"class":222,"line":9668},[220,20118,17852],{"class":264},[220,20120,20121],{"class":420},"1\n",[220,20123,20124],{"class":222,"line":9673},[220,20125,16466],{"class":264},[220,20127,20128],{"class":222,"line":10994},[220,20129,4924],{"class":264},[220,20131,20132],{"class":222,"line":10999},[220,20133,4604],{"class":264},[220,20135,20136],{"class":222,"line":12070},[220,20137,1787],{"class":264},[220,20139,20140],{"class":222,"line":12077},[220,20141,1792],{"class":264},[19,20143],{":preset":20144},"{\"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,20146,20147],{},[159,20148,17900],{},[1794,20150,20151,20163],{},[1797,20152,20153],{},[1800,20154,20155,20157,20159,20161],{},[1803,20156,17909],{},[1803,20158,15182],{},[1803,20160,15185],{},[1803,20162,1808],{},[1810,20164,20165,20183,20207,20223,20239,20254,20269],{},[1800,20166,20167,20172,20176,20178],{},[1815,20168,20169],{},[99,20170,20171],{},"source",[1815,20173,20174],{},[99,20175,9055],{},[1815,20177,17932],{},[1815,20179,1839,20180,20182],{},[99,20181,9051],{}," of the source component to sample from.",[1800,20184,20185,20190,20194,20196],{},[1815,20186,20187],{},[99,20188,20189],{},"channel",[1815,20191,20192],{},[99,20193,9055],{},[1815,20195,17932],{},[1815,20197,20198,20199,1895,20201,1895,20203,1895,20205,4831],{},"Which channel to extract. ",[99,20200,9503],{},[99,20202,9511],{},[99,20204,9519],{},[99,20206,9527],{},[1800,20208,20209,20214,20218,20220],{},[1815,20210,20211],{},[99,20212,20213],{},"inputMin",[1815,20215,20216],{},[99,20217,15295],{},[1815,20219,17932],{},[1815,20221,20222],{},"Source values at or below this are treated as 0.",[1800,20224,20225,20230,20234,20236],{},[1815,20226,20227],{},[99,20228,20229],{},"inputMax",[1815,20231,20232],{},[99,20233,15295],{},[1815,20235,17932],{},[1815,20237,20238],{},"Source values at or above this are treated as 1.",[1800,20240,20241,20245,20249,20251],{},[1815,20242,20243],{},[99,20244,17949],{},[1815,20246,20247],{},[99,20248,15295],{},[1815,20250,17932],{},[1815,20252,20253],{},"Output value when input = 0.",[1800,20255,20256,20260,20264,20266],{},[1815,20257,20258],{},[99,20259,17965],{},[1815,20261,20262],{},[99,20263,15295],{},[1815,20265,17932],{},[1815,20267,20268],{},"Output value when input = 1.",[1800,20270,20271,20275,20279,20283],{},[1815,20272,20273],{},[99,20274,19340],{},[1815,20276,20277],{},[99,20278,15295],{},[1815,20280,20281],{},[99,20282,8668],{},[1815,20284,20285,20286,1550,20288,4831],{},"Power curve applied after normalization. ",[99,20287,19354],{},[99,20289,19357],{},[15,20291,1839,20292,20294],{},[99,20293,19409],{}," 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,20296,20298],{"id":20297},"combining-dynamic-props","Combining dynamic props",[15,20300,20301],{},"Multiple dynamic props can be active on the same component — one per prop:",[246,20303,20304,20410,20537,20660],{":tabs":248},[212,20305,20307],{"className":334,"code":20306,"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,20308,20309,20323,20346,20353,20362,20371,20375,20379,20384,20389,20394,20398,20402],{"__ignoreMap":178},[220,20310,20311,20313,20315,20317,20319,20321],{"class":222,"line":223},[220,20312,343],{"class":264},[220,20314,347],{"class":346},[220,20316,350],{"class":226},[220,20318,353],{"class":264},[220,20320,356],{"class":230},[220,20322,359],{"class":264},[220,20324,20325,20327,20329,20332,20334,20336,20339,20341,20344],{"class":222,"line":179},[220,20326,364],{"class":264},[220,20328,367],{"class":346},[220,20330,20331],{"class":226}," color-a",[220,20333,353],{"class":264},[220,20335,375],{"class":230},[220,20337,20338],{"class":226}," color-b",[220,20340,353],{"class":264},[220,20342,20343],{"class":230},"\"#4f46e5\"",[220,20345,386],{"class":264},[220,20347,20348,20350],{"class":222,"line":389},[220,20349,364],{"class":264},[220,20351,20352],{"class":346},"LensFlare\n",[220,20354,20355,20357,20359],{"class":222,"line":399},[220,20356,18108],{"class":226},[220,20358,353],{"class":264},[220,20360,20361],{"class":230},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[220,20363,20364,20367,20369],{"class":222,"line":644},[220,20365,20366],{"class":226}," :intensity",[220,20368,353],{"class":264},[220,20370,15092],{"class":230},[220,20372,20373],{"class":222,"line":650},[220,20374,17409],{"class":230},[220,20376,20377],{"class":222,"line":656},[220,20378,17414],{"class":230},[220,20380,20381],{"class":222,"line":673},[220,20382,20383],{"class":230}," outputMin: 0.4,\n",[220,20385,20386],{"class":222,"line":682},[220,20387,20388],{"class":230}," outputMax: 1.0,\n",[220,20390,20391],{"class":222,"line":691},[220,20392,20393],{"class":230}," speed: 0.6\n",[220,20395,20396],{"class":222,"line":696},[220,20397,17439],{"class":230},[220,20399,20400],{"class":222,"line":702},[220,20401,1234],{"class":264},[220,20403,20404,20406,20408],{"class":222,"line":718},[220,20405,402],{"class":264},[220,20407,347],{"class":346},[220,20409,359],{"class":264},[212,20411,20413],{"className":409,"code":20412,"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,20414,20415,20429,20449,20455,20473,20482,20490,20498,20506,20514,20521,20525,20529],{"__ignoreMap":178},[220,20416,20417,20419,20421,20423,20425,20427],{"class":222,"line":223},[220,20418,343],{"class":264},[220,20420,347],{"class":420},[220,20422,423],{"class":226},[220,20424,353],{"class":260},[220,20426,356],{"class":230},[220,20428,359],{"class":264},[220,20430,20431,20433,20435,20437,20439,20441,20443,20445,20447],{"class":222,"line":179},[220,20432,364],{"class":264},[220,20434,367],{"class":420},[220,20436,370],{"class":226},[220,20438,353],{"class":260},[220,20440,375],{"class":230},[220,20442,378],{"class":226},[220,20444,353],{"class":260},[220,20446,20343],{"class":230},[220,20448,386],{"class":264},[220,20450,20451,20453],{"class":222,"line":389},[220,20452,364],{"class":264},[220,20454,20352],{"class":420},[220,20456,20457,20459,20461,20464,20466,20469,20471],{"class":222,"line":399},[220,20458,18194],{"class":226},[220,20460,353],{"class":260},[220,20462,20463],{"class":264},"{{ type: ",[220,20465,18205],{"class":230},[220,20467,20468],{"class":264},", smoothing: ",[220,20470,16049],{"class":420},[220,20472,2803],{"class":264},[220,20474,20475,20478,20480],{"class":222,"line":644},[220,20476,20477],{"class":226}," intensity",[220,20479,353],{"class":260},[220,20481,16035],{"class":264},[220,20483,20484,20486,20488],{"class":222,"line":650},[220,20485,16379],{"class":264},[220,20487,17499],{"class":230},[220,20489,1760],{"class":264},[220,20491,20492,20494,20496],{"class":222,"line":656},[220,20493,17506],{"class":264},[220,20495,17509],{"class":230},[220,20497,1760],{"class":264},[220,20499,20500,20502,20504],{"class":222,"line":673},[220,20501,17516],{"class":264},[220,20503,8244],{"class":420},[220,20505,1760],{"class":264},[220,20507,20508,20510,20512],{"class":222,"line":682},[220,20509,17525],{"class":264},[220,20511,17990],{"class":420},[220,20513,1760],{"class":264},[220,20515,20516,20518],{"class":222,"line":691},[220,20517,17534],{"class":264},[220,20519,20520],{"class":420},"0.6\n",[220,20522,20523],{"class":222,"line":696},[220,20524,16113],{"class":264},[220,20526,20527],{"class":222,"line":702},[220,20528,1234],{"class":264},[220,20530,20531,20533,20535],{"class":222,"line":718},[220,20532,402],{"class":264},[220,20534,347],{"class":420},[220,20536,359],{"class":264},[212,20538,20540],{"className":468,"code":20539,"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,20541,20542,20556,20576,20582,20598,20606,20614,20622,20630,20638,20644,20648,20652],{"__ignoreMap":178},[220,20543,20544,20546,20548,20550,20552,20554],{"class":222,"line":223},[220,20545,343],{"class":264},[220,20547,347],{"class":420},[220,20549,350],{"class":226},[220,20551,353],{"class":260},[220,20553,356],{"class":230},[220,20555,359],{"class":264},[220,20557,20558,20560,20562,20564,20566,20568,20570,20572,20574],{"class":222,"line":179},[220,20559,364],{"class":264},[220,20561,367],{"class":420},[220,20563,370],{"class":226},[220,20565,353],{"class":260},[220,20567,375],{"class":230},[220,20569,378],{"class":226},[220,20571,353],{"class":260},[220,20573,20343],{"class":230},[220,20575,386],{"class":264},[220,20577,20578,20580],{"class":222,"line":389},[220,20579,364],{"class":264},[220,20581,20352],{"class":420},[220,20583,20584,20586,20588,20590,20592,20594,20596],{"class":222,"line":399},[220,20585,18194],{"class":226},[220,20587,353],{"class":260},[220,20589,20463],{"class":264},[220,20591,18205],{"class":230},[220,20593,20468],{"class":264},[220,20595,16049],{"class":420},[220,20597,2803],{"class":264},[220,20599,20600,20602,20604],{"class":222,"line":644},[220,20601,20477],{"class":226},[220,20603,353],{"class":260},[220,20605,16035],{"class":264},[220,20607,20608,20610,20612],{"class":222,"line":650},[220,20609,16379],{"class":264},[220,20611,17499],{"class":230},[220,20613,1760],{"class":264},[220,20615,20616,20618,20620],{"class":222,"line":656},[220,20617,17506],{"class":264},[220,20619,17509],{"class":230},[220,20621,1760],{"class":264},[220,20623,20624,20626,20628],{"class":222,"line":673},[220,20625,17516],{"class":264},[220,20627,8244],{"class":420},[220,20629,1760],{"class":264},[220,20631,20632,20634,20636],{"class":222,"line":682},[220,20633,17525],{"class":264},[220,20635,17990],{"class":420},[220,20637,1760],{"class":264},[220,20639,20640,20642],{"class":222,"line":691},[220,20641,17534],{"class":264},[220,20643,20520],{"class":420},[220,20645,20646],{"class":222,"line":696},[220,20647,16113],{"class":264},[220,20649,20650],{"class":222,"line":702},[220,20651,1234],{"class":264},[220,20653,20654,20656,20658],{"class":222,"line":718},[220,20655,402],{"class":264},[220,20657,347],{"class":420},[220,20659,359],{"class":264},[212,20661,20662],{"className":468,"code":20539,"language":469,"meta":178,"style":178},[99,20663,20664,20678,20698,20704,20720,20728,20736,20744,20752,20760,20766,20770,20774],{"__ignoreMap":178},[220,20665,20666,20668,20670,20672,20674,20676],{"class":222,"line":223},[220,20667,343],{"class":264},[220,20669,347],{"class":420},[220,20671,350],{"class":226},[220,20673,353],{"class":260},[220,20675,356],{"class":230},[220,20677,359],{"class":264},[220,20679,20680,20682,20684,20686,20688,20690,20692,20694,20696],{"class":222,"line":179},[220,20681,364],{"class":264},[220,20683,367],{"class":420},[220,20685,370],{"class":226},[220,20687,353],{"class":260},[220,20689,375],{"class":230},[220,20691,378],{"class":226},[220,20693,353],{"class":260},[220,20695,20343],{"class":230},[220,20697,386],{"class":264},[220,20699,20700,20702],{"class":222,"line":389},[220,20701,364],{"class":264},[220,20703,20352],{"class":420},[220,20705,20706,20708,20710,20712,20714,20716,20718],{"class":222,"line":399},[220,20707,18194],{"class":226},[220,20709,353],{"class":260},[220,20711,20463],{"class":264},[220,20713,18205],{"class":230},[220,20715,20468],{"class":264},[220,20717,16049],{"class":420},[220,20719,2803],{"class":264},[220,20721,20722,20724,20726],{"class":222,"line":644},[220,20723,20477],{"class":226},[220,20725,353],{"class":260},[220,20727,16035],{"class":264},[220,20729,20730,20732,20734],{"class":222,"line":650},[220,20731,16379],{"class":264},[220,20733,17499],{"class":230},[220,20735,1760],{"class":264},[220,20737,20738,20740,20742],{"class":222,"line":656},[220,20739,17506],{"class":264},[220,20741,17509],{"class":230},[220,20743,1760],{"class":264},[220,20745,20746,20748,20750],{"class":222,"line":673},[220,20747,17516],{"class":264},[220,20749,8244],{"class":420},[220,20751,1760],{"class":264},[220,20753,20754,20756,20758],{"class":222,"line":682},[220,20755,17525],{"class":264},[220,20757,17990],{"class":420},[220,20759,1760],{"class":264},[220,20761,20762,20764],{"class":222,"line":691},[220,20763,17534],{"class":264},[220,20765,20520],{"class":420},[220,20767,20768],{"class":222,"line":696},[220,20769,16113],{"class":264},[220,20771,20772],{"class":222,"line":702},[220,20773,1234],{"class":264},[220,20775,20776,20778,20780],{"class":222,"line":718},[220,20777,402],{"class":264},[220,20779,347],{"class":420},[220,20781,359],{"class":264},[23,20783,20785],{"id":20784},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,20787,20788,20789,20792],{},"In the JavaScript API, ",[99,20790,20791],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[212,20794,20796],{"className":251,"code":20795,"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,20797,20798,20803,20817,20821,20838,20842,20846,20850,20855,20867,20872,20881,20890,20899,20907,20911,20915,20919,20924],{"__ignoreMap":178},[220,20799,20800],{"class":222,"line":223},[220,20801,20802],{"class":609},"\u002F\u002F Start with a static value\n",[220,20804,20805,20807,20809,20811,20813,20815],{"class":222,"line":179},[220,20806,1735],{"class":260},[220,20808,1738],{"class":420},[220,20810,1741],{"class":260},[220,20812,1744],{"class":260},[220,20814,1747],{"class":226},[220,20816,1750],{"class":264},[220,20818,20819],{"class":222,"line":389},[220,20820,1765],{"class":264},[220,20822,20823,20825,20827,20829,20832,20834,20836],{"class":222,"line":399},[220,20824,1770],{"class":264},[220,20826,3206],{"class":230},[220,20828,3209],{"class":264},[220,20830,20831],{"class":230},"'c'",[220,20833,7536],{"class":264},[220,20835,8244],{"class":420},[220,20837,1782],{"class":264},[220,20839,20840],{"class":222,"line":644},[220,20841,1787],{"class":264},[220,20843,20844],{"class":222,"line":650},[220,20845,1792],{"class":264},[220,20847,20848],{"class":222,"line":656},[220,20849,647],{"emptyLinePlaceholder":194},[220,20851,20852],{"class":222,"line":673},[220,20853,20854],{"class":609},"\u002F\u002F Later: switch to animated\n",[220,20856,20857,20859,20861,20863,20865],{"class":222,"line":682},[220,20858,11597],{"class":264},[220,20860,11600],{"class":226},[220,20862,2626],{"class":264},[220,20864,20831],{"class":230},[220,20866,11962],{"class":264},[220,20868,20869],{"class":222,"line":691},[220,20870,20871],{"class":264}," radius: {\n",[220,20873,20874,20877,20879],{"class":222,"line":696},[220,20875,20876],{"class":264}," type: ",[220,20878,17499],{"class":230},[220,20880,1760],{"class":264},[220,20882,20883,20886,20888],{"class":222,"line":702},[220,20884,20885],{"class":264}," mode: ",[220,20887,17509],{"class":230},[220,20889,1760],{"class":264},[220,20891,20892,20895,20897],{"class":222,"line":718},[220,20893,20894],{"class":264}," outputMin: ",[220,20896,16971],{"class":420},[220,20898,1760],{"class":264},[220,20900,20901,20904],{"class":222,"line":727},[220,20902,20903],{"class":264}," outputMax: ",[220,20905,20906],{"class":420},"0.7\n",[220,20908,20909],{"class":222,"line":2664},[220,20910,3256],{"class":264},[220,20912,20913],{"class":222,"line":3522},[220,20914,1792],{"class":264},[220,20916,20917],{"class":222,"line":9657},[220,20918,647],{"emptyLinePlaceholder":194},[220,20920,20921],{"class":222,"line":9668},[220,20922,20923],{"class":609},"\u002F\u002F Later: switch back to static\n",[220,20925,20926,20928,20930,20932,20934,20937,20939],{"class":222,"line":9673},[220,20927,11597],{"class":264},[220,20929,11600],{"class":226},[220,20931,2626],{"class":264},[220,20933,20831],{"class":230},[220,20935,20936],{"class":264},", { radius: ",[220,20938,8244],{"class":420},[220,20940,11612],{"class":264},[1504,20942,14986],{},{"title":178,"searchDepth":179,"depth":179,"links":20944},[20945,20946,20947,20948,20949,20950],{"id":17356,"depth":179,"text":17356},{"id":18044,"depth":179,"text":18044},{"id":18778,"depth":179,"text":18778},{"id":19409,"depth":179,"text":19409},{"id":20297,"depth":179,"text":20298},{"id":20784,"depth":179,"text":20785},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":17293,"description":20951},"docs\u002Fguide\u002F7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":20958,"title":20959,"body":20960,"category":10227,"description":25829,"exclude":190,"extension":191,"forceFramework":190,"icon":25830,"meta":25831,"navigation":194,"path":25832,"seo":25833,"stem":25834,"__hash__":25835},"guide\u002Fdocs\u002Fguide\u002F8.shape-effects.md","Shape \u002F SDF Effects",{"type":8,"value":20961,"toc":25773},[20962,20965,20968,20988,20991,21006,21010,21026,21670,21672,21676,21684,21690,21693,21726,21754,21756,21763,21766,21833,21878,21880,21887,21890,21975,22029,22031,22038,22041,22130,22180,22182,22189,22192,22281,22331,22333,22340,22343,22395,22430,22432,22439,22442,22529,22580,22582,22589,22592,22675,22724,22726,22733,22736,22809,22852,22854,22861,22864,22948,22999,23001,23008,23011,23095,23147,23149,23153,23173,23186,23207,23317,23323,23326,23380,23433,23435,23442,23445,23559,23636,23638,23645,23648,23724,23781,23783,23790,23793,23852,23902,23904,23911,23914,24008,24074,24076,24083,24086,24161,24219,24221,24228,24238,24332,24399,24401,24408,24411,24486,24544,24546,24553,24556,24632,24690,24692,24699,24702,24798,24867,24869,24876,24882,24956,25014,25016,25023,25026,25117,25184,25186,25190,25193,25210,25329,25333,25348,25424,25433,25762,25771],[11,20963,20959],{"id":20964},"shape-sdf-effects",[19,20966],{":preset":20967,"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,20969,20970,20971,1895,20973,20976,20977,20980,20981,20984,20985,20987],{},"Several components — such as ",[159,20972,15461],{},[159,20974,20975],{},"Neon",", and ",[159,20978,20979],{},"Emboss"," — are driven by a ",[1847,20982,20983],{},"shape",". These effects accept a ",[99,20986,20983],{}," 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,20989,20990],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[15,20992,20993,20994,20997,20998,21001,21002,21005],{},"Shapes come in two flavours: flat ",[159,20995,20996],{},"2D"," profiles (circles, stars, rounded rectangles, …) and true ",[159,20999,21000],{},"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,21003,21004],{},"extrude"," your own SVG into a solid 3D slab.",[23,21007,21009],{"id":21008},"configuration","Configuration",[15,21011,1839,21012,21014,21015,21018,21019,18740,21022,21025],{},[99,21013,20983],{}," prop accepts a configuration object. The only required key is ",[99,21016,21017],{},"type",", which selects one of the built-in shapes, like ",[99,21020,21021],{},"circleSDF",[99,21023,21024],{},"sphere3D",". Everything else is shape-specific and optional (sensible defaults apply).",[246,21027,21028,21102,21247,21371,21495],{":tabs":1557},[212,21029,21031],{"className":334,"code":21030,"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,21032,21033,21038,21054,21058,21063,21078,21082,21087],{"__ignoreMap":178},[220,21034,21035],{"class":222,"line":223},[220,21036,21037],{"class":609},"\u003C!-- Circle (default) -->\n",[220,21039,21040,21042,21044,21047,21049,21052],{"class":222,"line":179},[220,21041,343],{"class":264},[220,21043,15461],{"class":346},[220,21045,21046],{"class":226}," :shape",[220,21048,353],{"class":264},[220,21050,21051],{"class":230},"'{ type: \"circleSDF\", radius: 0.35 }'",[220,21053,386],{"class":264},[220,21055,21056],{"class":222,"line":389},[220,21057,647],{"emptyLinePlaceholder":194},[220,21059,21060],{"class":222,"line":399},[220,21061,21062],{"class":609},"\u003C!-- Six-pointed star -->\n",[220,21064,21065,21067,21069,21071,21073,21076],{"class":222,"line":644},[220,21066,343],{"class":264},[220,21068,20975],{"class":346},[220,21070,21046],{"class":226},[220,21072,353],{"class":264},[220,21074,21075],{"class":230},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[220,21077,386],{"class":264},[220,21079,21080],{"class":222,"line":650},[220,21081,647],{"emptyLinePlaceholder":194},[220,21083,21084],{"class":222,"line":656},[220,21085,21086],{"class":609},"\u003C!-- Rounded rectangle -->\n",[220,21088,21089,21091,21093,21095,21097,21100],{"class":222,"line":673},[220,21090,343],{"class":264},[220,21092,20979],{"class":346},[220,21094,21046],{"class":226},[220,21096,353],{"class":264},[220,21098,21099],{"class":230},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[220,21101,386],{"class":264},[212,21103,21105],{"className":409,"code":21104,"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,21106,21107,21112,21147,21151,21156,21197,21201,21206],{"__ignoreMap":178},[220,21108,21109],{"class":222,"line":223},[220,21110,21111],{"class":609},"\u002F\u002F Circle (default)\n",[220,21113,21114,21116,21118,21121,21123,21125,21128,21130,21133,21136,21139,21141,21144],{"class":222,"line":179},[220,21115,343],{"class":264},[220,21117,15461],{"class":420},[220,21119,21120],{"class":226}," shape",[220,21122,353],{"class":260},[220,21124,743],{"class":264},[220,21126,21127],{"class":420},"JSON",[220,21129,4831],{"class":264},[220,21131,21132],{"class":226},"stringify",[220,21134,21135],{"class":264},"({ type: ",[220,21137,21138],{"class":230},"\"circleSDF\"",[220,21140,6561],{"class":264},[220,21142,21143],{"class":420},"0.35",[220,21145,21146],{"class":264}," })} \u002F>\n",[220,21148,21149],{"class":222,"line":389},[220,21150,647],{"emptyLinePlaceholder":194},[220,21152,21153],{"class":222,"line":399},[220,21154,21155],{"class":609},"\u002F\u002F Six-pointed star\n",[220,21157,21158,21160,21162,21164,21166,21168,21170,21172,21174,21176,21179,21181,21183,21186,21189,21192,21195],{"class":222,"line":644},[220,21159,343],{"class":264},[220,21161,20975],{"class":420},[220,21163,21120],{"class":226},[220,21165,353],{"class":260},[220,21167,743],{"class":264},[220,21169,21127],{"class":420},[220,21171,4831],{"class":264},[220,21173,21132],{"class":226},[220,21175,21135],{"class":264},[220,21177,21178],{"class":230},"\"starSDF\"",[220,21180,6561],{"class":264},[220,21182,21143],{"class":420},[220,21184,21185],{"class":264},", sides: ",[220,21187,21188],{"class":420},"6",[220,21190,21191],{"class":264},", innerRatio: ",[220,21193,21194],{"class":420},"0.45",[220,21196,21146],{"class":264},[220,21198,21199],{"class":222,"line":650},[220,21200,647],{"emptyLinePlaceholder":194},[220,21202,21203],{"class":222,"line":656},[220,21204,21205],{"class":609},"\u002F\u002F Rounded rectangle\n",[220,21207,21208,21210,21212,21214,21216,21218,21220,21222,21224,21226,21229,21232,21234,21236,21239,21242,21245],{"class":222,"line":673},[220,21209,343],{"class":264},[220,21211,20979],{"class":420},[220,21213,21120],{"class":226},[220,21215,353],{"class":260},[220,21217,743],{"class":264},[220,21219,21127],{"class":420},[220,21221,4831],{"class":264},[220,21223,21132],{"class":226},[220,21225,21135],{"class":264},[220,21227,21228],{"class":230},"\"roundedRectSDF\"",[220,21230,21231],{"class":264},", width: ",[220,21233,8244],{"class":420},[220,21235,811],{"class":264},[220,21237,21238],{"class":420},"0.25",[220,21240,21241],{"class":264},", rounding: ",[220,21243,21244],{"class":420},"0.06",[220,21246,21146],{"class":264},[212,21248,21249],{"className":468,"code":21104,"language":469,"meta":178,"style":178},[99,21250,21251,21255,21283,21287,21291,21327,21331,21335],{"__ignoreMap":178},[220,21252,21253],{"class":222,"line":223},[220,21254,21111],{"class":609},[220,21256,21257,21259,21261,21263,21265,21267,21269,21271,21273,21275,21277,21279,21281],{"class":222,"line":179},[220,21258,343],{"class":264},[220,21260,15461],{"class":420},[220,21262,21120],{"class":226},[220,21264,353],{"class":260},[220,21266,743],{"class":264},[220,21268,21127],{"class":420},[220,21270,4831],{"class":264},[220,21272,21132],{"class":226},[220,21274,21135],{"class":264},[220,21276,21138],{"class":230},[220,21278,6561],{"class":264},[220,21280,21143],{"class":420},[220,21282,21146],{"class":264},[220,21284,21285],{"class":222,"line":389},[220,21286,647],{"emptyLinePlaceholder":194},[220,21288,21289],{"class":222,"line":399},[220,21290,21155],{"class":609},[220,21292,21293,21295,21297,21299,21301,21303,21305,21307,21309,21311,21313,21315,21317,21319,21321,21323,21325],{"class":222,"line":644},[220,21294,343],{"class":264},[220,21296,20975],{"class":420},[220,21298,21120],{"class":226},[220,21300,353],{"class":260},[220,21302,743],{"class":264},[220,21304,21127],{"class":420},[220,21306,4831],{"class":264},[220,21308,21132],{"class":226},[220,21310,21135],{"class":264},[220,21312,21178],{"class":230},[220,21314,6561],{"class":264},[220,21316,21143],{"class":420},[220,21318,21185],{"class":264},[220,21320,21188],{"class":420},[220,21322,21191],{"class":264},[220,21324,21194],{"class":420},[220,21326,21146],{"class":264},[220,21328,21329],{"class":222,"line":650},[220,21330,647],{"emptyLinePlaceholder":194},[220,21332,21333],{"class":222,"line":656},[220,21334,21205],{"class":609},[220,21336,21337,21339,21341,21343,21345,21347,21349,21351,21353,21355,21357,21359,21361,21363,21365,21367,21369],{"class":222,"line":673},[220,21338,343],{"class":264},[220,21340,20979],{"class":420},[220,21342,21120],{"class":226},[220,21344,353],{"class":260},[220,21346,743],{"class":264},[220,21348,21127],{"class":420},[220,21350,4831],{"class":264},[220,21352,21132],{"class":226},[220,21354,21135],{"class":264},[220,21356,21228],{"class":230},[220,21358,21231],{"class":264},[220,21360,8244],{"class":420},[220,21362,811],{"class":264},[220,21364,21238],{"class":420},[220,21366,21241],{"class":264},[220,21368,21244],{"class":420},[220,21370,21146],{"class":264},[212,21372,21373],{"className":468,"code":21104,"language":469,"meta":178,"style":178},[99,21374,21375,21379,21407,21411,21415,21451,21455,21459],{"__ignoreMap":178},[220,21376,21377],{"class":222,"line":223},[220,21378,21111],{"class":609},[220,21380,21381,21383,21385,21387,21389,21391,21393,21395,21397,21399,21401,21403,21405],{"class":222,"line":179},[220,21382,343],{"class":264},[220,21384,15461],{"class":420},[220,21386,21120],{"class":226},[220,21388,353],{"class":260},[220,21390,743],{"class":264},[220,21392,21127],{"class":420},[220,21394,4831],{"class":264},[220,21396,21132],{"class":226},[220,21398,21135],{"class":264},[220,21400,21138],{"class":230},[220,21402,6561],{"class":264},[220,21404,21143],{"class":420},[220,21406,21146],{"class":264},[220,21408,21409],{"class":222,"line":389},[220,21410,647],{"emptyLinePlaceholder":194},[220,21412,21413],{"class":222,"line":399},[220,21414,21155],{"class":609},[220,21416,21417,21419,21421,21423,21425,21427,21429,21431,21433,21435,21437,21439,21441,21443,21445,21447,21449],{"class":222,"line":644},[220,21418,343],{"class":264},[220,21420,20975],{"class":420},[220,21422,21120],{"class":226},[220,21424,353],{"class":260},[220,21426,743],{"class":264},[220,21428,21127],{"class":420},[220,21430,4831],{"class":264},[220,21432,21132],{"class":226},[220,21434,21135],{"class":264},[220,21436,21178],{"class":230},[220,21438,6561],{"class":264},[220,21440,21143],{"class":420},[220,21442,21185],{"class":264},[220,21444,21188],{"class":420},[220,21446,21191],{"class":264},[220,21448,21194],{"class":420},[220,21450,21146],{"class":264},[220,21452,21453],{"class":222,"line":650},[220,21454,647],{"emptyLinePlaceholder":194},[220,21456,21457],{"class":222,"line":656},[220,21458,21205],{"class":609},[220,21460,21461,21463,21465,21467,21469,21471,21473,21475,21477,21479,21481,21483,21485,21487,21489,21491,21493],{"class":222,"line":673},[220,21462,343],{"class":264},[220,21464,20979],{"class":420},[220,21466,21120],{"class":226},[220,21468,353],{"class":260},[220,21470,743],{"class":264},[220,21472,21127],{"class":420},[220,21474,4831],{"class":264},[220,21476,21132],{"class":226},[220,21478,21135],{"class":264},[220,21480,21228],{"class":230},[220,21482,21231],{"class":264},[220,21484,8244],{"class":420},[220,21486,811],{"class":264},[220,21488,21238],{"class":420},[220,21490,21241],{"class":264},[220,21492,21244],{"class":420},[220,21494,21146],{"class":264},[212,21496,21498],{"className":251,"code":21497,"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,21499,21500,21504,21518,21522,21542,21546,21550,21554,21558,21572,21576,21602,21606,21610,21614,21618,21632,21636,21662,21666],{"__ignoreMap":178},[220,21501,21502],{"class":222,"line":223},[220,21503,21111],{"class":609},[220,21505,21506,21508,21510,21512,21514,21516],{"class":222,"line":179},[220,21507,1735],{"class":260},[220,21509,1738],{"class":420},[220,21511,1741],{"class":260},[220,21513,1744],{"class":260},[220,21515,1747],{"class":226},[220,21517,1750],{"class":264},[220,21519,21520],{"class":222,"line":389},[220,21521,1765],{"class":264},[220,21523,21524,21526,21529,21532,21535,21537,21539],{"class":222,"line":399},[220,21525,1770],{"class":264},[220,21527,21528],{"class":230},"'Glass'",[220,21530,21531],{"class":264},", props: { shape: { type: ",[220,21533,21534],{"class":230},"'circleSDF'",[220,21536,6561],{"class":264},[220,21538,21143],{"class":420},[220,21540,21541],{"class":264}," } } }\n",[220,21543,21544],{"class":222,"line":644},[220,21545,1787],{"class":264},[220,21547,21548],{"class":222,"line":650},[220,21549,1792],{"class":264},[220,21551,21552],{"class":222,"line":656},[220,21553,647],{"emptyLinePlaceholder":194},[220,21555,21556],{"class":222,"line":673},[220,21557,21155],{"class":609},[220,21559,21560,21562,21564,21566,21568,21570],{"class":222,"line":682},[220,21561,1735],{"class":260},[220,21563,1738],{"class":420},[220,21565,1741],{"class":260},[220,21567,1744],{"class":260},[220,21569,1747],{"class":226},[220,21571,1750],{"class":264},[220,21573,21574],{"class":222,"line":691},[220,21575,1765],{"class":264},[220,21577,21578,21580,21583,21585,21588,21590,21592,21594,21596,21598,21600],{"class":222,"line":696},[220,21579,1770],{"class":264},[220,21581,21582],{"class":230},"'Neon'",[220,21584,21531],{"class":264},[220,21586,21587],{"class":230},"'starSDF'",[220,21589,6561],{"class":264},[220,21591,21143],{"class":420},[220,21593,21185],{"class":264},[220,21595,21188],{"class":420},[220,21597,21191],{"class":264},[220,21599,21194],{"class":420},[220,21601,21541],{"class":264},[220,21603,21604],{"class":222,"line":702},[220,21605,1787],{"class":264},[220,21607,21608],{"class":222,"line":718},[220,21609,1792],{"class":264},[220,21611,21612],{"class":222,"line":727},[220,21613,647],{"emptyLinePlaceholder":194},[220,21615,21616],{"class":222,"line":2664},[220,21617,21205],{"class":609},[220,21619,21620,21622,21624,21626,21628,21630],{"class":222,"line":3522},[220,21621,1735],{"class":260},[220,21623,1738],{"class":420},[220,21625,1741],{"class":260},[220,21627,1744],{"class":260},[220,21629,1747],{"class":226},[220,21631,1750],{"class":264},[220,21633,21634],{"class":222,"line":9657},[220,21635,1765],{"class":264},[220,21637,21638,21640,21643,21645,21648,21650,21652,21654,21656,21658,21660],{"class":222,"line":9668},[220,21639,1770],{"class":264},[220,21641,21642],{"class":230},"'Emboss'",[220,21644,21531],{"class":264},[220,21646,21647],{"class":230},"'roundedRectSDF'",[220,21649,21231],{"class":264},[220,21651,8244],{"class":420},[220,21653,811],{"class":264},[220,21655,21238],{"class":420},[220,21657,21241],{"class":264},[220,21659,21244],{"class":420},[220,21661,21541],{"class":264},[220,21663,21664],{"class":222,"line":9673},[220,21665,1787],{"class":264},[220,21667,21668],{"class":222,"line":10994},[220,21669,1792],{"class":264},[4504,21671],{},[23,21673,21675],{"id":21674},"_2d-shapes","2D shapes",[15,21677,21678,21679,15408,21681,21683],{},"These are flat profiles defined directly in the field. All sizes are in UV space (roughly ",[99,21680,8668],{},[99,21682,7749],{}," from the centre to an edge), and rotations are in degrees.",[3262,21685,21687,21688],{"id":21686},"circle-circlesdf","Circle — ",[99,21689,21021],{},[15,21691,21692],{},"A perfect circle. The default shape for all shape effects.",[1794,21694,21695,21707],{},[1797,21696,21697],{},[1800,21698,21699,21701,21703,21705],{},[1803,21700,17909],{},[1803,21702,15182],{},[1803,21704,15185],{},[1803,21706,1808],{},[1810,21708,21709],{},[1800,21710,21711,21715,21719,21723],{},[1815,21712,21713],{},[99,21714,11678],{},[1815,21716,21717],{},[99,21718,15295],{},[1815,21720,21721],{},[99,21722,21143],{},[1815,21724,21725],{},"Circle radius in UV space",[212,21727,21729],{"className":4559,"code":21728,"language":4561,"meta":178,"style":178},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[99,21730,21731],{"__ignoreMap":178},[220,21732,21733,21736,21739,21741,21743,21745,21748,21750,21752],{"class":222,"line":223},[220,21734,21735],{"class":264},"{ ",[220,21737,21738],{"class":420},"\"type\"",[220,21740,4596],{"class":264},[220,21742,21138],{"class":230},[220,21744,1895],{"class":264},[220,21746,21747],{"class":420},"\"radius\"",[220,21749,4596],{"class":264},[220,21751,21143],{"class":420},[220,21753,5665],{"class":264},[4504,21755],{},[3262,21757,21759,21760],{"id":21758},"ellipse-ellipsesdf","Ellipse — ",[99,21761,21762],{},"ellipseSDF",[15,21764,21765],{},"A stretched circle with independent horizontal and vertical radii.",[1794,21767,21768,21780],{},[1797,21769,21770],{},[1800,21771,21772,21774,21776,21778],{},[1803,21773,17909],{},[1803,21775,15182],{},[1803,21777,15185],{},[1803,21779,1808],{},[1810,21781,21782,21799,21816],{},[1800,21783,21784,21788,21792,21796],{},[1815,21785,21786],{},[99,21787,15159],{},[1815,21789,21790],{},[99,21791,15295],{},[1815,21793,21794],{},[99,21795,8244],{},[1815,21797,21798],{},"Horizontal radius (semi-major axis)",[1800,21800,21801,21805,21809,21813],{},[1815,21802,21803],{},[99,21804,15162],{},[1815,21806,21807],{},[99,21808,15295],{},[1815,21810,21811],{},[99,21812,21238],{},[1815,21814,21815],{},"Vertical radius (semi-minor axis)",[1800,21817,21818,21822,21826,21830],{},[1815,21819,21820],{},[99,21821,11830],{},[1815,21823,21824],{},[99,21825,15295],{},[1815,21827,21828],{},[99,21829,8668],{},[1815,21831,21832],{},"Rotation in degrees",[212,21834,21836],{"className":4559,"code":21835,"language":4561,"meta":178,"style":178},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[99,21837,21838],{"__ignoreMap":178},[220,21839,21840,21842,21844,21846,21849,21851,21854,21856,21858,21860,21863,21865,21867,21869,21872,21874,21876],{"class":222,"line":223},[220,21841,21735],{"class":264},[220,21843,21738],{"class":420},[220,21845,4596],{"class":264},[220,21847,21848],{"class":230},"\"ellipseSDF\"",[220,21850,1895],{"class":264},[220,21852,21853],{"class":420},"\"width\"",[220,21855,4596],{"class":264},[220,21857,8244],{"class":420},[220,21859,1895],{"class":264},[220,21861,21862],{"class":420},"\"height\"",[220,21864,4596],{"class":264},[220,21866,21238],{"class":420},[220,21868,1895],{"class":264},[220,21870,21871],{"class":420},"\"rotation\"",[220,21873,4596],{"class":264},[220,21875,8668],{"class":420},[220,21877,5665],{"class":264},[4504,21879],{},[3262,21881,21883,21884],{"id":21882},"polygon-polygonsdf","Polygon — ",[99,21885,21886],{},"polygonSDF",[15,21888,21889],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1794,21891,21892,21904],{},[1797,21893,21894],{},[1800,21895,21896,21898,21900,21902],{},[1803,21897,17909],{},[1803,21899,15182],{},[1803,21901,15185],{},[1803,21903,1808],{},[1810,21905,21906,21923,21941,21959],{},[1800,21907,21908,21912,21916,21920],{},[1815,21909,21910],{},[99,21911,11678],{},[1815,21913,21914],{},[99,21915,15295],{},[1815,21917,21918],{},[99,21919,21143],{},[1815,21921,21922],{},"Distance from center to nearest edge midpoint",[1800,21924,21925,21930,21934,21938],{},[1815,21926,21927],{},[99,21928,21929],{},"sides",[1815,21931,21932],{},[99,21933,15295],{},[1815,21935,21936],{},[99,21937,21188],{},[1815,21939,21940],{},"Number of sides",[1800,21942,21943,21948,21952,21956],{},[1815,21944,21945],{},[99,21946,21947],{},"rounding",[1815,21949,21950],{},[99,21951,15295],{},[1815,21953,21954],{},[99,21955,8668],{},[1815,21957,21958],{},"Corner rounding amount",[1800,21960,21961,21965,21969,21973],{},[1815,21962,21963],{},[99,21964,11830],{},[1815,21966,21967],{},[99,21968,15295],{},[1815,21970,21971],{},[99,21972,8668],{},[1815,21974,21832],{},[212,21976,21978],{"className":4559,"code":21977,"language":4561,"meta":178,"style":178},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,21979,21980],{"__ignoreMap":178},[220,21981,21982,21984,21986,21988,21991,21993,21995,21997,22000,22002,22005,22007,22009,22011,22014,22016,22019,22021,22023,22025,22027],{"class":222,"line":223},[220,21983,21735],{"class":264},[220,21985,21738],{"class":420},[220,21987,4596],{"class":264},[220,21989,21990],{"class":230},"\"polygonSDF\"",[220,21992,1895],{"class":264},[220,21994,21747],{"class":420},[220,21996,4596],{"class":264},[220,21998,21999],{"class":420},"0.3",[220,22001,1895],{"class":264},[220,22003,22004],{"class":420},"\"sides\"",[220,22006,4596],{"class":264},[220,22008,21188],{"class":420},[220,22010,1895],{"class":264},[220,22012,22013],{"class":420},"\"rounding\"",[220,22015,4596],{"class":264},[220,22017,22018],{"class":420},"0.05",[220,22020,1895],{"class":264},[220,22022,21871],{"class":420},[220,22024,4596],{"class":264},[220,22026,8668],{"class":420},[220,22028,5665],{"class":264},[4504,22030],{},[3262,22032,22034,22035],{"id":22033},"star-starsdf","Star — ",[99,22036,22037],{},"starSDF",[15,22039,22040],{},"An N-pointed star with configurable inner\u002Fouter radius ratio.",[1794,22042,22043,22055],{},[1797,22044,22045],{},[1800,22046,22047,22049,22051,22053],{},[1803,22048,17909],{},[1803,22050,15182],{},[1803,22052,15185],{},[1803,22054,1808],{},[1810,22056,22057,22074,22092,22114],{},[1800,22058,22059,22063,22067,22071],{},[1815,22060,22061],{},[99,22062,11678],{},[1815,22064,22065],{},[99,22066,15295],{},[1815,22068,22069],{},[99,22070,21143],{},[1815,22072,22073],{},"Outer tip radius",[1800,22075,22076,22080,22084,22089],{},[1815,22077,22078],{},[99,22079,21929],{},[1815,22081,22082],{},[99,22083,15295],{},[1815,22085,22086],{},[99,22087,22088],{},"5",[1815,22090,22091],{},"Number of points",[1800,22093,22094,22099,22103,22108],{},[1815,22095,22096],{},[99,22097,22098],{},"innerRatio",[1815,22100,22101],{},[99,22102,15295],{},[1815,22104,22105],{},[99,22106,22107],{},"0.382",[1815,22109,22110,22111,22113],{},"Inner vertex radius as a fraction of outer radius — ",[99,22112,22107],{}," gives the classic golden-ratio 5-star",[1800,22115,22116,22120,22124,22128],{},[1815,22117,22118],{},[99,22119,11830],{},[1815,22121,22122],{},[99,22123,15295],{},[1815,22125,22126],{},[99,22127,8668],{},[1815,22129,21832],{},[212,22131,22133],{"className":4559,"code":22132,"language":4561,"meta":178,"style":178},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[99,22134,22135],{"__ignoreMap":178},[220,22136,22137,22139,22141,22143,22145,22147,22149,22151,22153,22155,22157,22159,22161,22163,22166,22168,22170,22172,22174,22176,22178],{"class":222,"line":223},[220,22138,21735],{"class":264},[220,22140,21738],{"class":420},[220,22142,4596],{"class":264},[220,22144,21178],{"class":230},[220,22146,1895],{"class":264},[220,22148,21747],{"class":420},[220,22150,4596],{"class":264},[220,22152,21143],{"class":420},[220,22154,1895],{"class":264},[220,22156,22004],{"class":420},[220,22158,4596],{"class":264},[220,22160,22088],{"class":420},[220,22162,1895],{"class":264},[220,22164,22165],{"class":420},"\"innerRatio\"",[220,22167,4596],{"class":264},[220,22169,22107],{"class":420},[220,22171,1895],{"class":264},[220,22173,21871],{"class":420},[220,22175,4596],{"class":264},[220,22177,8668],{"class":420},[220,22179,5665],{"class":264},[4504,22181],{},[3262,22183,22185,22186],{"id":22184},"flower-flowersdf","Flower — ",[99,22187,22188],{},"flowerSDF",[15,22190,22191],{},"An N-petalled flower with smooth concave valleys between petals.",[1794,22193,22194,22206],{},[1797,22195,22196],{},[1800,22197,22198,22200,22202,22204],{},[1803,22199,17909],{},[1803,22201,15182],{},[1803,22203,15185],{},[1803,22205,1808],{},[1810,22207,22208,22225,22242,22265],{},[1800,22209,22210,22214,22218,22222],{},[1815,22211,22212],{},[99,22213,11678],{},[1815,22215,22216],{},[99,22217,15295],{},[1815,22219,22220],{},[99,22221,21143],{},[1815,22223,22224],{},"Outer petal tip radius",[1800,22226,22227,22231,22235,22239],{},[1815,22228,22229],{},[99,22230,21929],{},[1815,22232,22233],{},[99,22234,15295],{},[1815,22236,22237],{},[99,22238,21188],{},[1815,22240,22241],{},"Number of petals",[1800,22243,22244,22248,22252,22256],{},[1815,22245,22246],{},[99,22247,22098],{},[1815,22249,22250],{},[99,22251,15295],{},[1815,22253,22254],{},[99,22255,7749],{},[1815,22257,22258,22259,22261,22262,22264],{},"Valley depth — ",[99,22260,16971],{}," = deep narrow valleys, ",[99,22263,6294],{}," = subtle scalloped edge",[1800,22266,22267,22271,22275,22279],{},[1815,22268,22269],{},[99,22270,11830],{},[1815,22272,22273],{},[99,22274,15295],{},[1815,22276,22277],{},[99,22278,8668],{},[1815,22280,21832],{},[212,22282,22284],{"className":4559,"code":22283,"language":4561,"meta":178,"style":178},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[99,22285,22286],{"__ignoreMap":178},[220,22287,22288,22290,22292,22294,22297,22299,22301,22303,22305,22307,22309,22311,22313,22315,22317,22319,22321,22323,22325,22327,22329],{"class":222,"line":223},[220,22289,21735],{"class":264},[220,22291,21738],{"class":420},[220,22293,4596],{"class":264},[220,22295,22296],{"class":230},"\"flowerSDF\"",[220,22298,1895],{"class":264},[220,22300,21747],{"class":420},[220,22302,4596],{"class":264},[220,22304,21143],{"class":420},[220,22306,1895],{"class":264},[220,22308,22004],{"class":420},[220,22310,4596],{"class":264},[220,22312,21188],{"class":420},[220,22314,1895],{"class":264},[220,22316,22165],{"class":420},[220,22318,4596],{"class":264},[220,22320,7749],{"class":420},[220,22322,1895],{"class":264},[220,22324,21871],{"class":420},[220,22326,4596],{"class":264},[220,22328,8668],{"class":420},[220,22330,5665],{"class":264},[4504,22332],{},[3262,22334,22336,22337],{"id":22335},"ring-ringsdf","Ring — ",[99,22338,22339],{},"ringSDF",[15,22341,22342],{},"A hollow ring \u002F annulus. The effect applies to the ring material itself, not the interior hole.",[1794,22344,22345,22357],{},[1797,22346,22347],{},[1800,22348,22349,22351,22353,22355],{},[1803,22350,17909],{},[1803,22352,15182],{},[1803,22354,15185],{},[1803,22356,1808],{},[1810,22358,22359,22376],{},[1800,22360,22361,22365,22369,22373],{},[1815,22362,22363],{},[99,22364,11678],{},[1815,22366,22367],{},[99,22368,15295],{},[1815,22370,22371],{},[99,22372,21999],{},[1815,22374,22375],{},"Distance from center to the ring centerline",[1800,22377,22378,22383,22387,22392],{},[1815,22379,22380],{},[99,22381,22382],{},"thickness",[1815,22384,22385],{},[99,22386,15295],{},[1815,22388,22389],{},[99,22390,22391],{},"0.08",[1815,22393,22394],{},"Half-width of the ring on each side of the centerline",[212,22396,22398],{"className":4559,"code":22397,"language":4561,"meta":178,"style":178},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[99,22399,22400],{"__ignoreMap":178},[220,22401,22402,22404,22406,22408,22411,22413,22415,22417,22419,22421,22424,22426,22428],{"class":222,"line":223},[220,22403,21735],{"class":264},[220,22405,21738],{"class":420},[220,22407,4596],{"class":264},[220,22409,22410],{"class":230},"\"ringSDF\"",[220,22412,1895],{"class":264},[220,22414,21747],{"class":420},[220,22416,4596],{"class":264},[220,22418,21999],{"class":420},[220,22420,1895],{"class":264},[220,22422,22423],{"class":420},"\"thickness\"",[220,22425,4596],{"class":264},[220,22427,22391],{"class":420},[220,22429,5665],{"class":264},[4504,22431],{},[3262,22433,22435,22436],{"id":22434},"cross-crosssdf","Cross — ",[99,22437,22438],{},"crossSDF",[15,22440,22441],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1794,22443,22444,22456],{},[1797,22445,22446],{},[1800,22447,22448,22450,22452,22454],{},[1803,22449,17909],{},[1803,22451,15182],{},[1803,22453,15185],{},[1803,22455,1808],{},[1810,22457,22458,22475,22492,22509],{},[1800,22459,22460,22464,22468,22472],{},[1815,22461,22462],{},[99,22463,11686],{},[1815,22465,22466],{},[99,22467,15295],{},[1815,22469,22470],{},[99,22471,21238],{},[1815,22473,22474],{},"Arm half-length",[1800,22476,22477,22481,22485,22489],{},[1815,22478,22479],{},[99,22480,22382],{},[1815,22482,22483],{},[99,22484,15295],{},[1815,22486,22487],{},[99,22488,22391],{},[1815,22490,22491],{},"Arm half-width",[1800,22493,22494,22498,22502,22506],{},[1815,22495,22496],{},[99,22497,21947],{},[1815,22499,22500],{},[99,22501,15295],{},[1815,22503,22504],{},[99,22505,19679],{},[1815,22507,22508],{},"Corner rounding at arm ends and intersections",[1800,22510,22511,22515,22519,22523],{},[1815,22512,22513],{},[99,22514,11830],{},[1815,22516,22517],{},[99,22518,15295],{},[1815,22520,22521],{},[99,22522,8668],{},[1815,22524,22525,22526,22528],{},"Rotation in degrees — use ",[99,22527,1295],{}," for an X shape",[212,22530,22532],{"className":4559,"code":22531,"language":4561,"meta":178,"style":178},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[99,22533,22534],{"__ignoreMap":178},[220,22535,22536,22538,22540,22542,22545,22547,22550,22552,22554,22556,22558,22560,22562,22564,22566,22568,22570,22572,22574,22576,22578],{"class":222,"line":223},[220,22537,21735],{"class":264},[220,22539,21738],{"class":420},[220,22541,4596],{"class":264},[220,22543,22544],{"class":230},"\"crossSDF\"",[220,22546,1895],{"class":264},[220,22548,22549],{"class":420},"\"size\"",[220,22551,4596],{"class":264},[220,22553,21238],{"class":420},[220,22555,1895],{"class":264},[220,22557,22423],{"class":420},[220,22559,4596],{"class":264},[220,22561,22391],{"class":420},[220,22563,1895],{"class":264},[220,22565,22013],{"class":420},[220,22567,4596],{"class":264},[220,22569,19679],{"class":420},[220,22571,1895],{"class":264},[220,22573,21871],{"class":420},[220,22575,4596],{"class":264},[220,22577,8668],{"class":420},[220,22579,5665],{"class":264},[4504,22581],{},[3262,22583,22585,22586],{"id":22584},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[99,22587,22588],{},"roundedRectSDF",[15,22590,22591],{},"A rectangle with uniformly rounded corners.",[1794,22593,22594,22606],{},[1797,22595,22596],{},[1800,22597,22598,22600,22602,22604],{},[1803,22599,17909],{},[1803,22601,15182],{},[1803,22603,15185],{},[1803,22605,1808],{},[1810,22607,22608,22625,22642,22659],{},[1800,22609,22610,22614,22618,22622],{},[1815,22611,22612],{},[99,22613,15159],{},[1815,22615,22616],{},[99,22617,15295],{},[1815,22619,22620],{},[99,22621,21143],{},[1815,22623,22624],{},"Half-width",[1800,22626,22627,22631,22635,22639],{},[1815,22628,22629],{},[99,22630,15162],{},[1815,22632,22633],{},[99,22634,15295],{},[1815,22636,22637],{},[99,22638,21238],{},[1815,22640,22641],{},"Half-height",[1800,22643,22644,22648,22652,22656],{},[1815,22645,22646],{},[99,22647,21947],{},[1815,22649,22650],{},[99,22651,15295],{},[1815,22653,22654],{},[99,22655,22018],{},[1815,22657,22658],{},"Corner rounding radius",[1800,22660,22661,22665,22669,22673],{},[1815,22662,22663],{},[99,22664,11830],{},[1815,22666,22667],{},[99,22668,15295],{},[1815,22670,22671],{},[99,22672,8668],{},[1815,22674,21832],{},[212,22676,22678],{"className":4559,"code":22677,"language":4561,"meta":178,"style":178},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[99,22679,22680],{"__ignoreMap":178},[220,22681,22682,22684,22686,22688,22690,22692,22694,22696,22698,22700,22702,22704,22706,22708,22710,22712,22714,22716,22718,22720,22722],{"class":222,"line":223},[220,22683,21735],{"class":264},[220,22685,21738],{"class":420},[220,22687,4596],{"class":264},[220,22689,21228],{"class":230},[220,22691,1895],{"class":264},[220,22693,21853],{"class":420},[220,22695,4596],{"class":264},[220,22697,21143],{"class":420},[220,22699,1895],{"class":264},[220,22701,21862],{"class":420},[220,22703,4596],{"class":264},[220,22705,21238],{"class":420},[220,22707,1895],{"class":264},[220,22709,22013],{"class":420},[220,22711,4596],{"class":264},[220,22713,22018],{"class":420},[220,22715,1895],{"class":264},[220,22717,21871],{"class":420},[220,22719,4596],{"class":264},[220,22721,8668],{"class":420},[220,22723,5665],{"class":264},[4504,22725],{},[3262,22727,22729,22730],{"id":22728},"vesica-vesicasdf","Vesica — ",[99,22731,22732],{},"vesicaSDF",[15,22734,22735],{},"A lens \u002F eye shape formed by the intersection of two overlapping circles.",[1794,22737,22738,22750],{},[1797,22739,22740],{},[1800,22741,22742,22744,22746,22748],{},[1803,22743,17909],{},[1803,22745,15182],{},[1803,22747,15185],{},[1803,22749,1808],{},[1810,22751,22752,22769,22793],{},[1800,22753,22754,22758,22762,22766],{},[1815,22755,22756],{},[99,22757,11678],{},[1815,22759,22760],{},[99,22761,15295],{},[1815,22763,22764],{},[99,22765,21143],{},[1815,22767,22768],{},"Radius of each circle",[1800,22770,22771,22776,22780,22784],{},[1815,22772,22773],{},[99,22774,22775],{},"spread",[1815,22777,22778],{},[99,22779,15295],{},[1815,22781,22782],{},[99,22783,7749],{},[1815,22785,22786,22787,22789,22790,22792],{},"Half-distance between circle centers as a fraction of radius — ",[99,22788,8668],{}," = a single circle, ",[99,22791,8672],{}," = an infinitely thin lens",[1800,22794,22795,22799,22803,22807],{},[1815,22796,22797],{},[99,22798,11830],{},[1815,22800,22801],{},[99,22802,15295],{},[1815,22804,22805],{},[99,22806,8668],{},[1815,22808,21832],{},[212,22810,22812],{"className":4559,"code":22811,"language":4561,"meta":178,"style":178},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[99,22813,22814],{"__ignoreMap":178},[220,22815,22816,22818,22820,22822,22825,22827,22829,22831,22833,22835,22838,22840,22842,22844,22846,22848,22850],{"class":222,"line":223},[220,22817,21735],{"class":264},[220,22819,21738],{"class":420},[220,22821,4596],{"class":264},[220,22823,22824],{"class":230},"\"vesicaSDF\"",[220,22826,1895],{"class":264},[220,22828,21747],{"class":420},[220,22830,4596],{"class":264},[220,22832,21143],{"class":420},[220,22834,1895],{"class":264},[220,22836,22837],{"class":420},"\"spread\"",[220,22839,4596],{"class":264},[220,22841,7749],{"class":420},[220,22843,1895],{"class":264},[220,22845,21871],{"class":420},[220,22847,4596],{"class":264},[220,22849,8668],{"class":420},[220,22851,5665],{"class":264},[4504,22853],{},[3262,22855,22857,22858],{"id":22856},"crescent-crescentsdf","Crescent — ",[99,22859,22860],{},"crescentSDF",[15,22862,22863],{},"A crescent \u002F moon shape formed by subtracting a smaller offset circle from a larger one.",[1794,22865,22866,22878],{},[1797,22867,22868],{},[1800,22869,22870,22872,22874,22876],{},[1803,22871,17909],{},[1803,22873,15182],{},[1803,22875,15185],{},[1803,22877,1808],{},[1810,22879,22880,22897,22915,22932],{},[1800,22881,22882,22886,22890,22894],{},[1815,22883,22884],{},[99,22885,11678],{},[1815,22887,22888],{},[99,22889,15295],{},[1815,22891,22892],{},[99,22893,21143],{},[1815,22895,22896],{},"Outer circle radius",[1800,22898,22899,22903,22907,22912],{},[1815,22900,22901],{},[99,22902,22098],{},[1815,22904,22905],{},[99,22906,15295],{},[1815,22908,22909],{},[99,22910,22911],{},"0.75",[1815,22913,22914],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1800,22916,22917,22921,22925,22929],{},[1815,22918,22919],{},[99,22920,18059],{},[1815,22922,22923],{},[99,22924,15295],{},[1815,22926,22927],{},[99,22928,18187],{},[1815,22930,22931],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1800,22933,22934,22938,22942,22946],{},[1815,22935,22936],{},[99,22937,11830],{},[1815,22939,22940],{},[99,22941,15295],{},[1815,22943,22944],{},[99,22945,8668],{},[1815,22947,21832],{},[212,22949,22951],{"className":4559,"code":22950,"language":4561,"meta":178,"style":178},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[99,22952,22953],{"__ignoreMap":178},[220,22954,22955,22957,22959,22961,22964,22966,22968,22970,22972,22974,22976,22978,22980,22982,22985,22987,22989,22991,22993,22995,22997],{"class":222,"line":223},[220,22956,21735],{"class":264},[220,22958,21738],{"class":420},[220,22960,4596],{"class":264},[220,22962,22963],{"class":230},"\"crescentSDF\"",[220,22965,1895],{"class":264},[220,22967,21747],{"class":420},[220,22969,4596],{"class":264},[220,22971,21143],{"class":420},[220,22973,1895],{"class":264},[220,22975,22165],{"class":420},[220,22977,4596],{"class":264},[220,22979,22911],{"class":420},[220,22981,1895],{"class":264},[220,22983,22984],{"class":420},"\"offset\"",[220,22986,4596],{"class":264},[220,22988,18187],{"class":420},[220,22990,1895],{"class":264},[220,22992,21871],{"class":420},[220,22994,4596],{"class":264},[220,22996,8668],{"class":420},[220,22998,5665],{"class":264},[4504,23000],{},[3262,23002,23004,23005],{"id":23003},"trapezoid-trapezoidsdf","Trapezoid — ",[99,23006,23007],{},"trapezoidSDF",[15,23009,23010],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1794,23012,23013,23025],{},[1797,23014,23015],{},[1800,23016,23017,23019,23021,23023],{},[1803,23018,17909],{},[1803,23020,15182],{},[1803,23022,15185],{},[1803,23024,1808],{},[1810,23026,23027,23045,23063,23079],{},[1800,23028,23029,23034,23038,23042],{},[1815,23030,23031],{},[99,23032,23033],{},"bottomWidth",[1815,23035,23036],{},[99,23037,15295],{},[1815,23039,23040],{},[99,23041,21143],{},[1815,23043,23044],{},"Bottom edge half-width",[1800,23046,23047,23052,23056,23060],{},[1815,23048,23049],{},[99,23050,23051],{},"topWidth",[1815,23053,23054],{},[99,23055,15295],{},[1815,23057,23058],{},[99,23059,16971],{},[1815,23061,23062],{},"Top edge half-width",[1800,23064,23065,23069,23073,23077],{},[1815,23066,23067],{},[99,23068,15162],{},[1815,23070,23071],{},[99,23072,15295],{},[1815,23074,23075],{},[99,23076,21238],{},[1815,23078,22641],{},[1800,23080,23081,23085,23089,23093],{},[1815,23082,23083],{},[99,23084,11830],{},[1815,23086,23087],{},[99,23088,15295],{},[1815,23090,23091],{},[99,23092,8668],{},[1815,23094,21832],{},[212,23096,23098],{"className":4559,"code":23097,"language":4561,"meta":178,"style":178},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[99,23099,23100],{"__ignoreMap":178},[220,23101,23102,23104,23106,23108,23111,23113,23116,23118,23120,23122,23125,23127,23129,23131,23133,23135,23137,23139,23141,23143,23145],{"class":222,"line":223},[220,23103,21735],{"class":264},[220,23105,21738],{"class":420},[220,23107,4596],{"class":264},[220,23109,23110],{"class":230},"\"trapezoidSDF\"",[220,23112,1895],{"class":264},[220,23114,23115],{"class":420},"\"bottomWidth\"",[220,23117,4596],{"class":264},[220,23119,21143],{"class":420},[220,23121,1895],{"class":264},[220,23123,23124],{"class":420},"\"topWidth\"",[220,23126,4596],{"class":264},[220,23128,16971],{"class":420},[220,23130,1895],{"class":264},[220,23132,21862],{"class":420},[220,23134,4596],{"class":264},[220,23136,21238],{"class":420},[220,23138,1895],{"class":264},[220,23140,21871],{"class":420},[220,23142,4596],{"class":264},[220,23144,8668],{"class":420},[220,23146,5665],{"class":264},[4504,23148],{},[23,23150,23152],{"id":23151},"_3d-shapes","3D shapes",[15,23154,23155,23156,1895,23158,1895,23160,1895,23162,20976,23165,23168,23169,23172],{},"3D shapes are true volumetric primitives — they are raymarched into the field rather than drawn as a flat silhouette. Effects that support volume (",[159,23157,15461],{},[159,23159,20975],{},[159,23161,20979],{},[159,23163,23164],{},"ThinFilm",[159,23166,23167],{},"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,23170,23171],{},"SmokeFill"," treats every shape as a flat fill.)",[15,23174,23175,23176,1895,23179,20976,23182,23185],{},"Every 3D shape is positioned with three independent rotations — ",[99,23177,23178],{},"rotX",[99,23180,23181],{},"rotY",[99,23183,23184],{},"rotZ"," — given in degrees. All sizes are in UV space.",[15800,23187,23188],{},[15,23189,23190,23193,23194,23197,23198,23200,23201,23203,23204,23206],{},[159,23191,23192],{},"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,23195,23196],{},"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,23199,23181],{}," is a turntable spin (left\u002Fright), ",[99,23202,23178],{}," tips the shape toward or away from you, and ",[99,23205,23184],{}," rolls it in the screen plane.",[15800,23208,23209,23229],{},[15,23210,23211,23214,23215,23218,23219,23221,23222,1550,23225,23228],{},[159,23212,23213],{},"Tip:"," The size and rotation sub-props of a 3D shape can each be a ",[56,23216,23217],{"href":17267},"dynamic prop"," instead of a number. Set a rotation to an ",[99,23220,17356],{}," config looping from ",[99,23223,23224],{},"-180",[99,23226,23227],{},"180"," for a continuous spin, with no animation code:",[212,23230,23232],{"className":4559,"code":23231,"language":4561,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12,\n \"rotY\": { \"type\": \"auto-animate\", \"mode\": \"loop\", \"outputMin\": -180, \"outputMax\": 180, \"speed\": 0.5 } }\n",[99,23233,23234,23264],{"__ignoreMap":178},[220,23235,23236,23238,23240,23242,23245,23247,23249,23251,23253,23255,23258,23260,23262],{"class":222,"line":223},[220,23237,21735],{"class":264},[220,23239,21738],{"class":420},[220,23241,4596],{"class":264},[220,23243,23244],{"class":230},"\"torus3D\"",[220,23246,1895],{"class":264},[220,23248,21747],{"class":420},[220,23250,4596],{"class":264},[220,23252,21999],{"class":420},[220,23254,1895],{"class":264},[220,23256,23257],{"class":420},"\"tube\"",[220,23259,4596],{"class":264},[220,23261,18215],{"class":420},[220,23263,1760],{"class":264},[220,23265,23266,23269,23271,23273,23275,23278,23280,23283,23285,23288,23290,23293,23295,23297,23299,23302,23304,23306,23308,23311,23313,23315],{"class":222,"line":179},[220,23267,23268],{"class":420}," \"rotY\"",[220,23270,5654],{"class":264},[220,23272,21738],{"class":420},[220,23274,4596],{"class":264},[220,23276,23277],{"class":230},"\"auto-animate\"",[220,23279,1895],{"class":264},[220,23281,23282],{"class":420},"\"mode\"",[220,23284,4596],{"class":264},[220,23286,23287],{"class":230},"\"loop\"",[220,23289,1895],{"class":264},[220,23291,23292],{"class":420},"\"outputMin\"",[220,23294,4596],{"class":264},[220,23296,23224],{"class":420},[220,23298,1895],{"class":264},[220,23300,23301],{"class":420},"\"outputMax\"",[220,23303,4596],{"class":264},[220,23305,23227],{"class":420},[220,23307,1895],{"class":264},[220,23309,23310],{"class":420},"\"speed\"",[220,23312,4596],{"class":264},[220,23314,7749],{"class":420},[220,23316,1782],{"class":264},[3262,23318,23320,23321],{"id":23319},"sphere-sphere3d","Sphere — ",[99,23322,21024],{},[15,23324,23325],{},"A perfect sphere.",[1794,23327,23328,23340],{},[1797,23329,23330],{},[1800,23331,23332,23334,23336,23338],{},[1803,23333,17909],{},[1803,23335,15182],{},[1803,23337,15185],{},[1803,23339,1808],{},[1810,23341,23342,23359],{},[1800,23343,23344,23348,23352,23356],{},[1815,23345,23346],{},[99,23347,11678],{},[1815,23349,23350],{},[99,23351,15295],{},[1815,23353,23354],{},[99,23355,21143],{},[1815,23357,23358],{},"Sphere radius",[1800,23360,23361,23369,23373,23377],{},[1815,23362,23363,15707,23365,15707,23367],{},[99,23364,23178],{},[99,23366,23181],{},[99,23368,23184],{},[1815,23370,23371],{},[99,23372,15295],{},[1815,23374,23375],{},[99,23376,8668],{},[1815,23378,23379],{},"Rotation around each axis, in degrees",[212,23381,23383],{"className":4559,"code":23382,"language":4561,"meta":178,"style":178},"{ \"type\": \"sphere3D\", \"radius\": 0.35, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23384,23385],{"__ignoreMap":178},[220,23386,23387,23389,23391,23393,23396,23398,23400,23402,23404,23406,23409,23411,23413,23415,23418,23420,23422,23424,23427,23429,23431],{"class":222,"line":223},[220,23388,21735],{"class":264},[220,23390,21738],{"class":420},[220,23392,4596],{"class":264},[220,23394,23395],{"class":230},"\"sphere3D\"",[220,23397,1895],{"class":264},[220,23399,21747],{"class":420},[220,23401,4596],{"class":264},[220,23403,21143],{"class":420},[220,23405,1895],{"class":264},[220,23407,23408],{"class":420},"\"rotX\"",[220,23410,4596],{"class":264},[220,23412,8668],{"class":420},[220,23414,1895],{"class":264},[220,23416,23417],{"class":420},"\"rotY\"",[220,23419,4596],{"class":264},[220,23421,8668],{"class":420},[220,23423,1895],{"class":264},[220,23425,23426],{"class":420},"\"rotZ\"",[220,23428,4596],{"class":264},[220,23430,8668],{"class":420},[220,23432,5665],{"class":264},[4504,23434],{},[3262,23436,23438,23439],{"id":23437},"cube-cube3d","Cube — ",[99,23440,23441],{},"cube3D",[15,23443,23444],{},"A box with independent dimensions and rounded edges.",[1794,23446,23447,23459],{},[1797,23448,23449],{},[1800,23450,23451,23453,23455,23457],{},[1803,23452,17909],{},[1803,23454,15182],{},[1803,23456,15185],{},[1803,23458,1808],{},[1810,23460,23461,23480,23498,23516,23533],{},[1800,23462,23463,23468,23472,23477],{},[1815,23464,23465],{},[99,23466,23467],{},"sizeX",[1815,23469,23470],{},[99,23471,15295],{},[1815,23473,23474],{},[99,23475,23476],{},"0.27",[1815,23478,23479],{},"Half-width (X)",[1800,23481,23482,23487,23491,23495],{},[1815,23483,23484],{},[99,23485,23486],{},"sizeY",[1815,23488,23489],{},[99,23490,15295],{},[1815,23492,23493],{},[99,23494,23476],{},[1815,23496,23497],{},"Half-height (Y)",[1800,23499,23500,23505,23509,23513],{},[1815,23501,23502],{},[99,23503,23504],{},"sizeZ",[1815,23506,23507],{},[99,23508,15295],{},[1815,23510,23511],{},[99,23512,23476],{},[1815,23514,23515],{},"Half-depth (Z)",[1800,23517,23518,23522,23526,23530],{},[1815,23519,23520],{},[99,23521,21947],{},[1815,23523,23524],{},[99,23525,15295],{},[1815,23527,23528],{},[99,23529,19679],{},[1815,23531,23532],{},"Edge\u002Fcorner rounding",[1800,23534,23535,23543,23547,23557],{},[1815,23536,23537,15707,23539,15707,23541],{},[99,23538,23178],{},[99,23540,23181],{},[99,23542,23184],{},[1815,23544,23545],{},[99,23546,15295],{},[1815,23548,23549,15277,23552,15277,23555],{},[99,23550,23551],{},"25",[99,23553,23554],{},"35",[99,23556,8668],{},[1815,23558,23379],{},[212,23560,23562],{"className":4559,"code":23561,"language":4561,"meta":178,"style":178},"{ \"type\": \"cube3D\", \"sizeX\": 0.27, \"sizeY\": 0.27, \"sizeZ\": 0.27, \"rounding\": 0.02, \"rotX\": 25, \"rotY\": 35, \"rotZ\": 0 }\n",[99,23563,23564],{"__ignoreMap":178},[220,23565,23566,23568,23570,23572,23575,23577,23580,23582,23584,23586,23589,23591,23593,23595,23598,23600,23602,23604,23606,23608,23610,23612,23614,23616,23618,23620,23622,23624,23626,23628,23630,23632,23634],{"class":222,"line":223},[220,23567,21735],{"class":264},[220,23569,21738],{"class":420},[220,23571,4596],{"class":264},[220,23573,23574],{"class":230},"\"cube3D\"",[220,23576,1895],{"class":264},[220,23578,23579],{"class":420},"\"sizeX\"",[220,23581,4596],{"class":264},[220,23583,23476],{"class":420},[220,23585,1895],{"class":264},[220,23587,23588],{"class":420},"\"sizeY\"",[220,23590,4596],{"class":264},[220,23592,23476],{"class":420},[220,23594,1895],{"class":264},[220,23596,23597],{"class":420},"\"sizeZ\"",[220,23599,4596],{"class":264},[220,23601,23476],{"class":420},[220,23603,1895],{"class":264},[220,23605,22013],{"class":420},[220,23607,4596],{"class":264},[220,23609,19679],{"class":420},[220,23611,1895],{"class":264},[220,23613,23408],{"class":420},[220,23615,4596],{"class":264},[220,23617,23551],{"class":420},[220,23619,1895],{"class":264},[220,23621,23417],{"class":420},[220,23623,4596],{"class":264},[220,23625,23554],{"class":420},[220,23627,1895],{"class":264},[220,23629,23426],{"class":420},[220,23631,4596],{"class":264},[220,23633,8668],{"class":420},[220,23635,5665],{"class":264},[4504,23637],{},[3262,23639,23641,23642],{"id":23640},"torus-torus3d","Torus — ",[99,23643,23644],{},"torus3D",[15,23646,23647],{},"A doughnut ring.",[1794,23649,23650,23662],{},[1797,23651,23652],{},[1800,23653,23654,23656,23658,23660],{},[1803,23655,17909],{},[1803,23657,15182],{},[1803,23659,15185],{},[1803,23661,1808],{},[1810,23663,23664,23681,23699],{},[1800,23665,23666,23670,23674,23678],{},[1815,23667,23668],{},[99,23669,11678],{},[1815,23671,23672],{},[99,23673,15295],{},[1815,23675,23676],{},[99,23677,21999],{},[1815,23679,23680],{},"Ring radius (centre to tube centreline)",[1800,23682,23683,23688,23692,23696],{},[1815,23684,23685],{},[99,23686,23687],{},"tube",[1815,23689,23690],{},[99,23691,15295],{},[1815,23693,23694],{},[99,23695,18215],{},[1815,23697,23698],{},"Tube radius",[1800,23700,23701,23709,23713,23722],{},[1815,23702,23703,15707,23705,15707,23707],{},[99,23704,23178],{},[99,23706,23181],{},[99,23708,23184],{},[1815,23710,23711],{},[99,23712,15295],{},[1815,23714,23715,15277,23718,15277,23720],{},[99,23716,23717],{},"55",[99,23719,8668],{},[99,23721,8668],{},[1815,23723,23379],{},[212,23725,23727],{"className":4559,"code":23726,"language":4561,"meta":178,"style":178},"{ \"type\": \"torus3D\", \"radius\": 0.3, \"tube\": 0.12, \"rotX\": 55, \"rotY\": 0, \"rotZ\": 0 }\n",[99,23728,23729],{"__ignoreMap":178},[220,23730,23731,23733,23735,23737,23739,23741,23743,23745,23747,23749,23751,23753,23755,23757,23759,23761,23763,23765,23767,23769,23771,23773,23775,23777,23779],{"class":222,"line":223},[220,23732,21735],{"class":264},[220,23734,21738],{"class":420},[220,23736,4596],{"class":264},[220,23738,23244],{"class":230},[220,23740,1895],{"class":264},[220,23742,21747],{"class":420},[220,23744,4596],{"class":264},[220,23746,21999],{"class":420},[220,23748,1895],{"class":264},[220,23750,23257],{"class":420},[220,23752,4596],{"class":264},[220,23754,18215],{"class":420},[220,23756,1895],{"class":264},[220,23758,23408],{"class":420},[220,23760,4596],{"class":264},[220,23762,23717],{"class":420},[220,23764,1895],{"class":264},[220,23766,23417],{"class":420},[220,23768,4596],{"class":264},[220,23770,8668],{"class":420},[220,23772,1895],{"class":264},[220,23774,23426],{"class":420},[220,23776,4596],{"class":264},[220,23778,8668],{"class":420},[220,23780,5665],{"class":264},[4504,23782],{},[3262,23784,23786,23787],{"id":23785},"octahedron-octahedron3d","Octahedron — ",[99,23788,23789],{},"octahedron3D",[15,23791,23792],{},"An eight-faced diamond\u002Fbipyramid.",[1794,23794,23795,23807],{},[1797,23796,23797],{},[1800,23798,23799,23801,23803,23805],{},[1803,23800,17909],{},[1803,23802,15182],{},[1803,23804,15185],{},[1803,23806,1808],{},[1810,23808,23809,23827],{},[1800,23810,23811,23815,23819,23824],{},[1815,23812,23813],{},[99,23814,11678],{},[1815,23816,23817],{},[99,23818,15295],{},[1815,23820,23821],{},[99,23822,23823],{},"0.42",[1815,23825,23826],{},"Distance from centre to each vertex",[1800,23828,23829,23837,23841,23850],{},[1815,23830,23831,15707,23833,15707,23835],{},[99,23832,23178],{},[99,23834,23181],{},[99,23836,23184],{},[1815,23838,23839],{},[99,23840,15295],{},[1815,23842,23843,15277,23846,15277,23848],{},[99,23844,23845],{},"10",[99,23847,23551],{},[99,23849,8668],{},[1815,23851,23379],{},[212,23853,23855],{"className":4559,"code":23854,"language":4561,"meta":178,"style":178},"{ \"type\": \"octahedron3D\", \"radius\": 0.42, \"rotX\": 10, \"rotY\": 25, \"rotZ\": 0 }\n",[99,23856,23857],{"__ignoreMap":178},[220,23858,23859,23861,23863,23865,23868,23870,23872,23874,23876,23878,23880,23882,23884,23886,23888,23890,23892,23894,23896,23898,23900],{"class":222,"line":223},[220,23860,21735],{"class":264},[220,23862,21738],{"class":420},[220,23864,4596],{"class":264},[220,23866,23867],{"class":230},"\"octahedron3D\"",[220,23869,1895],{"class":264},[220,23871,21747],{"class":420},[220,23873,4596],{"class":264},[220,23875,23823],{"class":420},[220,23877,1895],{"class":264},[220,23879,23408],{"class":420},[220,23881,4596],{"class":264},[220,23883,23845],{"class":420},[220,23885,1895],{"class":264},[220,23887,23417],{"class":420},[220,23889,4596],{"class":264},[220,23891,23551],{"class":420},[220,23893,1895],{"class":264},[220,23895,23426],{"class":420},[220,23897,4596],{"class":264},[220,23899,8668],{"class":420},[220,23901,5665],{"class":264},[4504,23903],{},[3262,23905,23907,23908],{"id":23906},"cylinder-cylinder3d","Cylinder — ",[99,23909,23910],{},"cylinder3D",[15,23912,23913],{},"A capped cylinder with rounded edges.",[1794,23915,23916,23928],{},[1797,23917,23918],{},[1800,23919,23920,23922,23924,23926],{},[1803,23921,17909],{},[1803,23923,15182],{},[1803,23925,15185],{},[1803,23927,1808],{},[1810,23929,23930,23948,23965,23982],{},[1800,23931,23932,23936,23940,23945],{},[1815,23933,23934],{},[99,23935,11678],{},[1815,23937,23938],{},[99,23939,15295],{},[1815,23941,23942],{},[99,23943,23944],{},"0.22",[1815,23946,23947],{},"Cylinder radius",[1800,23949,23950,23954,23958,23963],{},[1815,23951,23952],{},[99,23953,15162],{},[1815,23955,23956],{},[99,23957,15295],{},[1815,23959,23960],{},[99,23961,23962],{},"0.26",[1815,23964,22641],{},[1800,23966,23967,23971,23975,23979],{},[1815,23968,23969],{},[99,23970,21947],{},[1815,23972,23973],{},[99,23974,15295],{},[1815,23976,23977],{},[99,23978,19679],{},[1815,23980,23981],{},"Edge rounding",[1800,23983,23984,23992,23996,24006],{},[1815,23985,23986,15707,23988,15707,23990],{},[99,23987,23178],{},[99,23989,23181],{},[99,23991,23184],{},[1815,23993,23994],{},[99,23995,15295],{},[1815,23997,23998,15277,24001,15277,24003],{},[99,23999,24000],{},"60",[99,24002,8668],{},[99,24004,24005],{},"30",[1815,24007,23379],{},[212,24009,24011],{"className":4559,"code":24010,"language":4561,"meta":178,"style":178},"{ \"type\": \"cylinder3D\", \"radius\": 0.22, \"height\": 0.26, \"rounding\": 0.02, \"rotX\": 60, \"rotY\": 0, \"rotZ\": 30 }\n",[99,24012,24013],{"__ignoreMap":178},[220,24014,24015,24017,24019,24021,24024,24026,24028,24030,24032,24034,24036,24038,24040,24042,24044,24046,24048,24050,24052,24054,24056,24058,24060,24062,24064,24066,24068,24070,24072],{"class":222,"line":223},[220,24016,21735],{"class":264},[220,24018,21738],{"class":420},[220,24020,4596],{"class":264},[220,24022,24023],{"class":230},"\"cylinder3D\"",[220,24025,1895],{"class":264},[220,24027,21747],{"class":420},[220,24029,4596],{"class":264},[220,24031,23944],{"class":420},[220,24033,1895],{"class":264},[220,24035,21862],{"class":420},[220,24037,4596],{"class":264},[220,24039,23962],{"class":420},[220,24041,1895],{"class":264},[220,24043,22013],{"class":420},[220,24045,4596],{"class":264},[220,24047,19679],{"class":420},[220,24049,1895],{"class":264},[220,24051,23408],{"class":420},[220,24053,4596],{"class":264},[220,24055,24000],{"class":420},[220,24057,1895],{"class":264},[220,24059,23417],{"class":420},[220,24061,4596],{"class":264},[220,24063,8668],{"class":420},[220,24065,1895],{"class":264},[220,24067,23426],{"class":420},[220,24069,4596],{"class":264},[220,24071,24005],{"class":420},[220,24073,5665],{"class":264},[4504,24075],{},[3262,24077,24079,24080],{"id":24078},"capsule-capsule3d","Capsule — ",[99,24081,24082],{},"capsule3D",[15,24084,24085],{},"A cylinder with hemispherical caps (a pill).",[1794,24087,24088,24100],{},[1797,24089,24090],{},[1800,24091,24092,24094,24096,24098],{},[1803,24093,17909],{},[1803,24095,15182],{},[1803,24097,15185],{},[1803,24099,1808],{},[1810,24101,24102,24120,24137],{},[1800,24103,24104,24108,24112,24117],{},[1815,24105,24106],{},[99,24107,11678],{},[1815,24109,24110],{},[99,24111,15295],{},[1815,24113,24114],{},[99,24115,24116],{},"0.16",[1815,24118,24119],{},"Capsule radius",[1800,24121,24122,24126,24130,24134],{},[1815,24123,24124],{},[99,24125,15162],{},[1815,24127,24128],{},[99,24129,15295],{},[1815,24131,24132],{},[99,24133,16971],{},[1815,24135,24136],{},"Half-length of the straight section",[1800,24138,24139,24147,24151,24159],{},[1815,24140,24141,15707,24143,15707,24145],{},[99,24142,23178],{},[99,24144,23181],{},[99,24146,23184],{},[1815,24148,24149],{},[99,24150,15295],{},[1815,24152,24153,15277,24155,15277,24157],{},[99,24154,8668],{},[99,24156,8668],{},[99,24158,23554],{},[1815,24160,23379],{},[212,24162,24164],{"className":4559,"code":24163,"language":4561,"meta":178,"style":178},"{ \"type\": \"capsule3D\", \"radius\": 0.16, \"height\": 0.2, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 35 }\n",[99,24165,24166],{"__ignoreMap":178},[220,24167,24168,24170,24172,24174,24177,24179,24181,24183,24185,24187,24189,24191,24193,24195,24197,24199,24201,24203,24205,24207,24209,24211,24213,24215,24217],{"class":222,"line":223},[220,24169,21735],{"class":264},[220,24171,21738],{"class":420},[220,24173,4596],{"class":264},[220,24175,24176],{"class":230},"\"capsule3D\"",[220,24178,1895],{"class":264},[220,24180,21747],{"class":420},[220,24182,4596],{"class":264},[220,24184,24116],{"class":420},[220,24186,1895],{"class":264},[220,24188,21862],{"class":420},[220,24190,4596],{"class":264},[220,24192,16971],{"class":420},[220,24194,1895],{"class":264},[220,24196,23408],{"class":420},[220,24198,4596],{"class":264},[220,24200,8668],{"class":420},[220,24202,1895],{"class":264},[220,24204,23417],{"class":420},[220,24206,4596],{"class":264},[220,24208,8668],{"class":420},[220,24210,1895],{"class":264},[220,24212,23426],{"class":420},[220,24214,4596],{"class":264},[220,24216,23554],{"class":420},[220,24218,5665],{"class":264},[4504,24220],{},[3262,24222,24224,24225],{"id":24223},"cone-cone3d","Cone — ",[99,24226,24227],{},"cone3D",[15,24229,24230,24231,24234,24235,24237],{},"A cone or truncated cone. Set ",[99,24232,24233],{},"topRadius"," above ",[99,24236,8668],{}," to flatten the tip into a frustum.",[1794,24239,24240,24252],{},[1797,24241,24242],{},[1800,24243,24244,24246,24248,24250],{},[1803,24245,17909],{},[1803,24247,15182],{},[1803,24249,15185],{},[1803,24251,1808],{},[1810,24253,24254,24271,24291,24307],{},[1800,24255,24256,24260,24264,24268],{},[1815,24257,24258],{},[99,24259,11678],{},[1815,24261,24262],{},[99,24263,15295],{},[1815,24265,24266],{},[99,24267,21999],{},[1815,24269,24270],{},"Base radius",[1800,24272,24273,24277,24281,24285],{},[1815,24274,24275],{},[99,24276,24233],{},[1815,24278,24279],{},[99,24280,15295],{},[1815,24282,24283],{},[99,24284,19679],{},[1815,24286,24287,24288,24290],{},"Top radius — ",[99,24289,8668],{}," for a sharp point",[1800,24292,24293,24297,24301,24305],{},[1815,24294,24295],{},[99,24296,15162],{},[1815,24298,24299],{},[99,24300,15295],{},[1815,24302,24303],{},[99,24304,21999],{},[1815,24306,22641],{},[1800,24308,24309,24317,24321,24330],{},[1815,24310,24311,15707,24313,15707,24315],{},[99,24312,23178],{},[99,24314,23181],{},[99,24316,23184],{},[1815,24318,24319],{},[99,24320,15295],{},[1815,24322,24323,15277,24325,15277,24327],{},[99,24324,23551],{},[99,24326,8668],{},[99,24328,24329],{},"15",[1815,24331,23379],{},[212,24333,24335],{"className":4559,"code":24334,"language":4561,"meta":178,"style":178},"{ \"type\": \"cone3D\", \"radius\": 0.3, \"topRadius\": 0.02, \"height\": 0.3, \"rotX\": 25, \"rotY\": 0, \"rotZ\": 15 }\n",[99,24336,24337],{"__ignoreMap":178},[220,24338,24339,24341,24343,24345,24348,24350,24352,24354,24356,24358,24361,24363,24365,24367,24369,24371,24373,24375,24377,24379,24381,24383,24385,24387,24389,24391,24393,24395,24397],{"class":222,"line":223},[220,24340,21735],{"class":264},[220,24342,21738],{"class":420},[220,24344,4596],{"class":264},[220,24346,24347],{"class":230},"\"cone3D\"",[220,24349,1895],{"class":264},[220,24351,21747],{"class":420},[220,24353,4596],{"class":264},[220,24355,21999],{"class":420},[220,24357,1895],{"class":264},[220,24359,24360],{"class":420},"\"topRadius\"",[220,24362,4596],{"class":264},[220,24364,19679],{"class":420},[220,24366,1895],{"class":264},[220,24368,21862],{"class":420},[220,24370,4596],{"class":264},[220,24372,21999],{"class":420},[220,24374,1895],{"class":264},[220,24376,23408],{"class":420},[220,24378,4596],{"class":264},[220,24380,23551],{"class":420},[220,24382,1895],{"class":264},[220,24384,23417],{"class":420},[220,24386,4596],{"class":264},[220,24388,8668],{"class":420},[220,24390,1895],{"class":264},[220,24392,23426],{"class":420},[220,24394,4596],{"class":264},[220,24396,24329],{"class":420},[220,24398,5665],{"class":264},[4504,24400],{},[3262,24402,24404,24405],{"id":24403},"pyramid-pyramid3d","Pyramid — ",[99,24406,24407],{},"pyramid3D",[15,24409,24410],{},"A square-based pyramid.",[1794,24412,24413,24425],{},[1797,24414,24415],{},[1800,24416,24417,24419,24421,24423],{},[1803,24418,17909],{},[1803,24420,15182],{},[1803,24422,15185],{},[1803,24424,1808],{},[1810,24426,24427,24444,24461],{},[1800,24428,24429,24433,24437,24441],{},[1815,24430,24431],{},[99,24432,11686],{},[1815,24434,24435],{},[99,24436,15295],{},[1815,24438,24439],{},[99,24440,21999],{},[1815,24442,24443],{},"Base half-width",[1800,24445,24446,24450,24454,24458],{},[1815,24447,24448],{},[99,24449,15162],{},[1815,24451,24452],{},[99,24453,15295],{},[1815,24455,24456],{},[99,24457,21194],{},[1815,24459,24460],{},"Apex height",[1800,24462,24463,24471,24475,24484],{},[1815,24464,24465,15707,24467,15707,24469],{},[99,24466,23178],{},[99,24468,23181],{},[99,24470,23184],{},[1815,24472,24473],{},[99,24474,15295],{},[1815,24476,24477,15277,24480,15277,24482],{},[99,24478,24479],{},"-10",[99,24481,24005],{},[99,24483,8668],{},[1815,24485,23379],{},[212,24487,24489],{"className":4559,"code":24488,"language":4561,"meta":178,"style":178},"{ \"type\": \"pyramid3D\", \"size\": 0.3, \"height\": 0.45, \"rotX\": -10, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24490,24491],{"__ignoreMap":178},[220,24492,24493,24495,24497,24499,24502,24504,24506,24508,24510,24512,24514,24516,24518,24520,24522,24524,24526,24528,24530,24532,24534,24536,24538,24540,24542],{"class":222,"line":223},[220,24494,21735],{"class":264},[220,24496,21738],{"class":420},[220,24498,4596],{"class":264},[220,24500,24501],{"class":230},"\"pyramid3D\"",[220,24503,1895],{"class":264},[220,24505,22549],{"class":420},[220,24507,4596],{"class":264},[220,24509,21999],{"class":420},[220,24511,1895],{"class":264},[220,24513,21862],{"class":420},[220,24515,4596],{"class":264},[220,24517,21194],{"class":420},[220,24519,1895],{"class":264},[220,24521,23408],{"class":420},[220,24523,4596],{"class":264},[220,24525,24479],{"class":420},[220,24527,1895],{"class":264},[220,24529,23417],{"class":420},[220,24531,4596],{"class":264},[220,24533,24005],{"class":420},[220,24535,1895],{"class":264},[220,24537,23426],{"class":420},[220,24539,4596],{"class":264},[220,24541,8668],{"class":420},[220,24543,5665],{"class":264},[4504,24545],{},[3262,24547,24549,24550],{"id":24548},"prism-prism3d","Prism — ",[99,24551,24552],{},"prism3D",[15,24554,24555],{},"A hexagonal prism.",[1794,24557,24558,24570],{},[1797,24559,24560],{},[1800,24561,24562,24564,24566,24568],{},[1803,24563,17909],{},[1803,24565,15182],{},[1803,24567,15185],{},[1803,24569,1808],{},[1810,24571,24572,24590,24608],{},[1800,24573,24574,24578,24582,24587],{},[1815,24575,24576],{},[99,24577,11678],{},[1815,24579,24580],{},[99,24581,15295],{},[1815,24583,24584],{},[99,24585,24586],{},"0.28",[1815,24588,24589],{},"Hexagon radius",[1800,24591,24592,24596,24600,24605],{},[1815,24593,24594],{},[99,24595,15162],{},[1815,24597,24598],{},[99,24599,15295],{},[1815,24601,24602],{},[99,24603,24604],{},"0.14",[1815,24606,24607],{},"Half-depth of the prism",[1800,24609,24610,24618,24622,24630],{},[1815,24611,24612,15707,24614,15707,24616],{},[99,24613,23178],{},[99,24615,23181],{},[99,24617,23184],{},[1815,24619,24620],{},[99,24621,15295],{},[1815,24623,24624,15277,24626,15277,24628],{},[99,24625,23551],{},[99,24627,24005],{},[99,24629,8668],{},[1815,24631,23379],{},[212,24633,24635],{"className":4559,"code":24634,"language":4561,"meta":178,"style":178},"{ \"type\": \"prism3D\", \"radius\": 0.28, \"height\": 0.14, \"rotX\": 25, \"rotY\": 30, \"rotZ\": 0 }\n",[99,24636,24637],{"__ignoreMap":178},[220,24638,24639,24641,24643,24645,24648,24650,24652,24654,24656,24658,24660,24662,24664,24666,24668,24670,24672,24674,24676,24678,24680,24682,24684,24686,24688],{"class":222,"line":223},[220,24640,21735],{"class":264},[220,24642,21738],{"class":420},[220,24644,4596],{"class":264},[220,24646,24647],{"class":230},"\"prism3D\"",[220,24649,1895],{"class":264},[220,24651,21747],{"class":420},[220,24653,4596],{"class":264},[220,24655,24586],{"class":420},[220,24657,1895],{"class":264},[220,24659,21862],{"class":420},[220,24661,4596],{"class":264},[220,24663,24604],{"class":420},[220,24665,1895],{"class":264},[220,24667,23408],{"class":420},[220,24669,4596],{"class":264},[220,24671,23551],{"class":420},[220,24673,1895],{"class":264},[220,24675,23417],{"class":420},[220,24677,4596],{"class":264},[220,24679,24005],{"class":420},[220,24681,1895],{"class":264},[220,24683,23426],{"class":420},[220,24685,4596],{"class":264},[220,24687,8668],{"class":420},[220,24689,5665],{"class":264},[4504,24691],{},[3262,24693,24695,24696],{"id":24694},"ellipsoid-ellipsoid3d","Ellipsoid — ",[99,24697,24698],{},"ellipsoid3D",[15,24700,24701],{},"A sphere with three independent radii.",[1794,24703,24704,24716],{},[1797,24705,24706],{},[1800,24707,24708,24710,24712,24714],{},[1803,24709,17909],{},[1803,24711,15182],{},[1803,24713,15185],{},[1803,24715,1808],{},[1810,24717,24718,24737,24755,24773],{},[1800,24719,24720,24725,24729,24734],{},[1815,24721,24722],{},[99,24723,24724],{},"radiusX",[1815,24726,24727],{},[99,24728,15295],{},[1815,24730,24731],{},[99,24732,24733],{},"0.38",[1815,24735,24736],{},"Radius along X",[1800,24738,24739,24744,24748,24752],{},[1815,24740,24741],{},[99,24742,24743],{},"radiusY",[1815,24745,24746],{},[99,24747,15295],{},[1815,24749,24750],{},[99,24751,23944],{},[1815,24753,24754],{},"Radius along Y",[1800,24756,24757,24762,24766,24770],{},[1815,24758,24759],{},[99,24760,24761],{},"radiusZ",[1815,24763,24764],{},[99,24765,15295],{},[1815,24767,24768],{},[99,24769,21999],{},[1815,24771,24772],{},"Radius along Z",[1800,24774,24775,24783,24787,24796],{},[1815,24776,24777,15707,24779,15707,24781],{},[99,24778,23178],{},[99,24780,23181],{},[99,24782,23184],{},[1815,24784,24785],{},[99,24786,15295],{},[1815,24788,24789,15277,24791,15277,24793],{},[99,24790,8668],{},[99,24792,8668],{},[99,24794,24795],{},"20",[1815,24797,23379],{},[212,24799,24801],{"className":4559,"code":24800,"language":4561,"meta":178,"style":178},"{ \"type\": \"ellipsoid3D\", \"radiusX\": 0.38, \"radiusY\": 0.22, \"radiusZ\": 0.3, \"rotX\": 0, \"rotY\": 0, \"rotZ\": 20 }\n",[99,24802,24803],{"__ignoreMap":178},[220,24804,24805,24807,24809,24811,24814,24816,24819,24821,24823,24825,24828,24830,24832,24834,24837,24839,24841,24843,24845,24847,24849,24851,24853,24855,24857,24859,24861,24863,24865],{"class":222,"line":223},[220,24806,21735],{"class":264},[220,24808,21738],{"class":420},[220,24810,4596],{"class":264},[220,24812,24813],{"class":230},"\"ellipsoid3D\"",[220,24815,1895],{"class":264},[220,24817,24818],{"class":420},"\"radiusX\"",[220,24820,4596],{"class":264},[220,24822,24733],{"class":420},[220,24824,1895],{"class":264},[220,24826,24827],{"class":420},"\"radiusY\"",[220,24829,4596],{"class":264},[220,24831,23944],{"class":420},[220,24833,1895],{"class":264},[220,24835,24836],{"class":420},"\"radiusZ\"",[220,24838,4596],{"class":264},[220,24840,21999],{"class":420},[220,24842,1895],{"class":264},[220,24844,23408],{"class":420},[220,24846,4596],{"class":264},[220,24848,8668],{"class":420},[220,24850,1895],{"class":264},[220,24852,23417],{"class":420},[220,24854,4596],{"class":264},[220,24856,8668],{"class":420},[220,24858,1895],{"class":264},[220,24860,23426],{"class":420},[220,24862,4596],{"class":264},[220,24864,24795],{"class":420},[220,24866,5665],{"class":264},[4504,24868],{},[3262,24870,24872,24873],{"id":24871},"diamond-diamond3d","Diamond — ",[99,24874,24875],{},"diamond3D",[15,24877,24878,24879,24881],{},"A faceted gemstone with a crown and pavilion — the showpiece shape for the ",[159,24880,23167],{}," effect.",[1794,24883,24884,24896],{},[1797,24885,24886],{},[1800,24887,24888,24890,24892,24894],{},[1803,24889,17909],{},[1803,24891,15182],{},[1803,24893,15185],{},[1803,24895,1808],{},[1810,24897,24898,24915,24932],{},[1800,24899,24900,24904,24908,24912],{},[1815,24901,24902],{},[99,24903,11678],{},[1815,24905,24906],{},[99,24907,15295],{},[1815,24909,24910],{},[99,24911,21999],{},[1815,24913,24914],{},"Girdle radius",[1800,24916,24917,24921,24925,24929],{},[1815,24918,24919],{},[99,24920,15162],{},[1815,24922,24923],{},[99,24924,15295],{},[1815,24926,24927],{},[99,24928,23823],{},[1815,24930,24931],{},"Total height (crown + pavilion)",[1800,24933,24934,24942,24946,24954],{},[1815,24935,24936,15707,24938,15707,24940],{},[99,24937,23178],{},[99,24939,23181],{},[99,24941,23184],{},[1815,24943,24944],{},[99,24945,15295],{},[1815,24947,24948,15277,24950,15277,24952],{},[99,24949,24329],{},[99,24951,8668],{},[99,24953,8668],{},[1815,24955,23379],{},[212,24957,24959],{"className":4559,"code":24958,"language":4561,"meta":178,"style":178},"{ \"type\": \"diamond3D\", \"radius\": 0.3, \"height\": 0.42, \"rotX\": 15, \"rotY\": 0, \"rotZ\": 0 }\n",[99,24960,24961],{"__ignoreMap":178},[220,24962,24963,24965,24967,24969,24972,24974,24976,24978,24980,24982,24984,24986,24988,24990,24992,24994,24996,24998,25000,25002,25004,25006,25008,25010,25012],{"class":222,"line":223},[220,24964,21735],{"class":264},[220,24966,21738],{"class":420},[220,24968,4596],{"class":264},[220,24970,24971],{"class":230},"\"diamond3D\"",[220,24973,1895],{"class":264},[220,24975,21747],{"class":420},[220,24977,4596],{"class":264},[220,24979,21999],{"class":420},[220,24981,1895],{"class":264},[220,24983,21862],{"class":420},[220,24985,4596],{"class":264},[220,24987,23823],{"class":420},[220,24989,1895],{"class":264},[220,24991,23408],{"class":420},[220,24993,4596],{"class":264},[220,24995,24329],{"class":420},[220,24997,1895],{"class":264},[220,24999,23417],{"class":420},[220,25001,4596],{"class":264},[220,25003,8668],{"class":420},[220,25005,1895],{"class":264},[220,25007,23426],{"class":420},[220,25009,4596],{"class":264},[220,25011,8668],{"class":420},[220,25013,5665],{"class":264},[4504,25015],{},[3262,25017,25019,25020],{"id":25018},"link-link3d","Link — ",[99,25021,25022],{},"link3D",[15,25024,25025],{},"A rounded chain link.",[1794,25027,25028,25040],{},[1797,25029,25030],{},[1800,25031,25032,25034,25036,25038],{},[1803,25033,17909],{},[1803,25035,15182],{},[1803,25037,15185],{},[1803,25039,1808],{},[1810,25041,25042,25060,25077,25093],{},[1800,25043,25044,25048,25052,25057],{},[1815,25045,25046],{},[99,25047,11678],{},[1815,25049,25050],{},[99,25051,15295],{},[1815,25053,25054],{},[99,25055,25056],{},"0.18",[1815,25058,25059],{},"Inner radius of the link's curve",[1800,25061,25062,25067,25071,25075],{},[1815,25063,25064],{},[99,25065,25066],{},"length",[1815,25068,25069],{},[99,25070,15295],{},[1815,25072,25073],{},[99,25074,18187],{},[1815,25076,24136],{},[1800,25078,25079,25083,25087,25091],{},[1815,25080,25081],{},[99,25082,23687],{},[1815,25084,25085],{},[99,25086,15295],{},[1815,25088,25089],{},[99,25090,22391],{},[1815,25092,23698],{},[1800,25094,25095,25103,25107,25115],{},[1815,25096,25097,15707,25099,15707,25101],{},[99,25098,23178],{},[99,25100,23181],{},[99,25102,23184],{},[1815,25104,25105],{},[99,25106,15295],{},[1815,25108,25109,15277,25111,15277,25113],{},[99,25110,24795],{},[99,25112,24005],{},[99,25114,8668],{},[1815,25116,23379],{},[212,25118,25120],{"className":4559,"code":25119,"language":4561,"meta":178,"style":178},"{ \"type\": \"link3D\", \"radius\": 0.18, \"length\": 0.15, \"tube\": 0.08, \"rotX\": 20, \"rotY\": 30, \"rotZ\": 0 }\n",[99,25121,25122],{"__ignoreMap":178},[220,25123,25124,25126,25128,25130,25133,25135,25137,25139,25141,25143,25146,25148,25150,25152,25154,25156,25158,25160,25162,25164,25166,25168,25170,25172,25174,25176,25178,25180,25182],{"class":222,"line":223},[220,25125,21735],{"class":264},[220,25127,21738],{"class":420},[220,25129,4596],{"class":264},[220,25131,25132],{"class":230},"\"link3D\"",[220,25134,1895],{"class":264},[220,25136,21747],{"class":420},[220,25138,4596],{"class":264},[220,25140,25056],{"class":420},[220,25142,1895],{"class":264},[220,25144,25145],{"class":420},"\"length\"",[220,25147,4596],{"class":264},[220,25149,18187],{"class":420},[220,25151,1895],{"class":264},[220,25153,23257],{"class":420},[220,25155,4596],{"class":264},[220,25157,22391],{"class":420},[220,25159,1895],{"class":264},[220,25161,23408],{"class":420},[220,25163,4596],{"class":264},[220,25165,24795],{"class":420},[220,25167,1895],{"class":264},[220,25169,23417],{"class":420},[220,25171,4596],{"class":264},[220,25173,24005],{"class":420},[220,25175,1895],{"class":264},[220,25177,23426],{"class":420},[220,25179,4596],{"class":264},[220,25181,8668],{"class":420},[220,25183,5665],{"class":264},[4504,25185],{},[23,25187,25189],{"id":25188},"custom-shapes","Custom shapes",[15,25191,25192],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,25194,25195,25196,25199,25200,25203,25204,25206,25207,25209],{},"To use an SVG shape, set ",[99,25197,25198],{},"shapeSdfUrl"," to the URL of an SDF ",[99,25201,25202],{},".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,25205,25202],{}," URL. If you work with the ",[56,25208,5974],{"href":58},", your agent can also generate an SDF from any SVG in your project.",[246,25211,25212,25233,25252,25268,25284],{":tabs":1557},[212,25213,25215],{"className":334,"code":25214,"language":336,"meta":178,"style":178},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" \u002F>\n",[99,25216,25217],{"__ignoreMap":178},[220,25218,25219,25221,25223,25226,25228,25231],{"class":222,"line":223},[220,25220,343],{"class":264},[220,25222,15461],{"class":346},[220,25224,25225],{"class":226}," :shapeSdfUrl",[220,25227,353],{"class":264},[220,25229,25230],{"class":230},"\"myLogoUrl\"",[220,25232,386],{"class":264},[212,25234,25236],{"className":409,"code":25235,"language":411,"meta":178,"style":178},"\u003CGlass shapeSdfUrl={myLogoUrl} \u002F>\n",[99,25237,25238],{"__ignoreMap":178},[220,25239,25240,25242,25244,25247,25249],{"class":222,"line":223},[220,25241,343],{"class":264},[220,25243,15461],{"class":420},[220,25245,25246],{"class":226}," shapeSdfUrl",[220,25248,353],{"class":260},[220,25250,25251],{"class":264},"{myLogoUrl} \u002F>\n",[212,25253,25254],{"className":468,"code":25235,"language":469,"meta":178,"style":178},[99,25255,25256],{"__ignoreMap":178},[220,25257,25258,25260,25262,25264,25266],{"class":222,"line":223},[220,25259,343],{"class":264},[220,25261,15461],{"class":420},[220,25263,25246],{"class":226},[220,25265,353],{"class":260},[220,25267,25251],{"class":264},[212,25269,25270],{"className":468,"code":25235,"language":469,"meta":178,"style":178},[99,25271,25272],{"__ignoreMap":178},[220,25273,25274,25276,25278,25280,25282],{"class":222,"line":223},[220,25275,343],{"class":264},[220,25277,15461],{"class":420},[220,25279,25246],{"class":226},[220,25281,353],{"class":260},[220,25283,25251],{"class":264},[212,25285,25287],{"className":251,"code":25286,"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,25288,25289,25303,25307,25321,25325],{"__ignoreMap":178},[220,25290,25291,25293,25295,25297,25299,25301],{"class":222,"line":223},[220,25292,1735],{"class":260},[220,25294,1738],{"class":420},[220,25296,1741],{"class":260},[220,25298,1744],{"class":260},[220,25300,1747],{"class":226},[220,25302,1750],{"class":264},[220,25304,25305],{"class":222,"line":179},[220,25306,1765],{"class":264},[220,25308,25309,25311,25313,25316,25319],{"class":222,"line":389},[220,25310,1770],{"class":264},[220,25312,21528],{"class":230},[220,25314,25315],{"class":264},", props: { shapeSdfUrl: ",[220,25317,25318],{"class":230},"'https:\u002F\u002Fexample.com\u002Fmy-logo.bin'",[220,25320,1782],{"class":264},[220,25322,25323],{"class":222,"line":399},[220,25324,1787],{"class":264},[220,25326,25327],{"class":222,"line":644},[220,25328,1792],{"class":264},[3262,25330,25332],{"id":25331},"extruding-a-custom-svg-into-3d","Extruding a custom SVG into 3D",[15,25334,25335,25336,25338,25339,25341,25342,1550,25344,25347],{},"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,25337,25198],{},", set the ",[99,25340,20983],{}," config ",[99,25343,21017],{},[99,25345,25346],{},"svgExtrude3D"," and tune the extrusion:",[1794,25349,25350,25362],{},[1797,25351,25352],{},[1800,25353,25354,25356,25358,25360],{},[1803,25355,17909],{},[1803,25357,15182],{},[1803,25359,15185],{},[1803,25361,1808],{},[1810,25363,25364,25382,25400],{},[1800,25365,25366,25371,25375,25379],{},[1815,25367,25368],{},[99,25369,25370],{},"depth",[1815,25372,25373],{},[99,25374,15295],{},[1815,25376,25377],{},[99,25378,18215],{},[1815,25380,25381],{},"Total thickness of the slab along the view axis",[1800,25383,25384,25389,25393,25397],{},[1815,25385,25386],{},[99,25387,25388],{},"bevel",[1815,25390,25391],{},[99,25392,15295],{},[1815,25394,25395],{},[99,25396,19679],{},[1815,25398,25399],{},"Rounded-edge radius on the extruded sides",[1800,25401,25402,25410,25414,25422],{},[1815,25403,25404,15707,25406,15707,25408],{},[99,25405,23178],{},[99,25407,23181],{},[99,25409,23184],{},[1815,25411,25412],{},[99,25413,15295],{},[1815,25415,25416,15277,25418,15277,25420],{},[99,25417,24329],{},[99,25419,24005],{},[99,25421,8668],{},[1815,25423,23379],{},[15,25425,25426,25427,25429,25430,25432],{},"As with the analytic 3D shapes, these sub-props accept ",[56,25428,23217],{"href":17267}," configs (e.g. an ",[99,25431,17356],{}," rotation for a spinning logo).",[246,25434,25435,25471,25544,25606,25668],{":tabs":1557},[212,25436,25438],{"className":334,"code":25437,"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,25439,25440,25447,25457,25467],{"__ignoreMap":178},[220,25441,25442,25444],{"class":222,"line":223},[220,25443,343],{"class":264},[220,25445,25446],{"class":346},"Glass\n",[220,25448,25449,25452,25454],{"class":222,"line":179},[220,25450,25451],{"class":226}," :shapeSdfUrl",[220,25453,353],{"class":264},[220,25455,25456],{"class":230},"\"myLogoUrl\"\n",[220,25458,25459,25462,25464],{"class":222,"line":389},[220,25460,25461],{"class":226}," :shape",[220,25463,353],{"class":264},[220,25465,25466],{"class":230},"'{ type: \"svgExtrude3D\", depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }'\n",[220,25468,25469],{"class":222,"line":399},[220,25470,15798],{"class":264},[212,25472,25474],{"className":409,"code":25473,"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,25475,25476,25482,25492,25540],{"__ignoreMap":178},[220,25477,25478,25480],{"class":222,"line":223},[220,25479,343],{"class":264},[220,25481,25446],{"class":420},[220,25483,25484,25487,25489],{"class":222,"line":179},[220,25485,25486],{"class":226}," shapeSdfUrl",[220,25488,353],{"class":260},[220,25490,25491],{"class":264},"{myLogoUrl}\n",[220,25493,25494,25497,25499,25501,25503,25505,25507,25509,25512,25515,25517,25520,25522,25525,25527,25530,25532,25535,25537],{"class":222,"line":389},[220,25495,25496],{"class":226}," shape",[220,25498,353],{"class":260},[220,25500,743],{"class":264},[220,25502,21127],{"class":420},[220,25504,4831],{"class":264},[220,25506,21132],{"class":226},[220,25508,21135],{"class":264},[220,25510,25511],{"class":230},"\"svgExtrude3D\"",[220,25513,25514],{"class":264},", depth: ",[220,25516,18215],{"class":420},[220,25518,25519],{"class":264},", bevel: ",[220,25521,19679],{"class":420},[220,25523,25524],{"class":264},", rotX: ",[220,25526,24329],{"class":420},[220,25528,25529],{"class":264},", rotY: ",[220,25531,24005],{"class":420},[220,25533,25534],{"class":264},", rotZ: ",[220,25536,8668],{"class":420},[220,25538,25539],{"class":264}," })}\n",[220,25541,25542],{"class":222,"line":399},[220,25543,15798],{"class":264},[212,25545,25546],{"className":468,"code":25473,"language":469,"meta":178,"style":178},[99,25547,25548,25554,25562,25602],{"__ignoreMap":178},[220,25549,25550,25552],{"class":222,"line":223},[220,25551,343],{"class":264},[220,25553,25446],{"class":420},[220,25555,25556,25558,25560],{"class":222,"line":179},[220,25557,25486],{"class":226},[220,25559,353],{"class":260},[220,25561,25491],{"class":264},[220,25563,25564,25566,25568,25570,25572,25574,25576,25578,25580,25582,25584,25586,25588,25590,25592,25594,25596,25598,25600],{"class":222,"line":389},[220,25565,25496],{"class":226},[220,25567,353],{"class":260},[220,25569,743],{"class":264},[220,25571,21127],{"class":420},[220,25573,4831],{"class":264},[220,25575,21132],{"class":226},[220,25577,21135],{"class":264},[220,25579,25511],{"class":230},[220,25581,25514],{"class":264},[220,25583,18215],{"class":420},[220,25585,25519],{"class":264},[220,25587,19679],{"class":420},[220,25589,25524],{"class":264},[220,25591,24329],{"class":420},[220,25593,25529],{"class":264},[220,25595,24005],{"class":420},[220,25597,25534],{"class":264},[220,25599,8668],{"class":420},[220,25601,25539],{"class":264},[220,25603,25604],{"class":222,"line":399},[220,25605,15798],{"class":264},[212,25607,25608],{"className":468,"code":25473,"language":469,"meta":178,"style":178},[99,25609,25610,25616,25624,25664],{"__ignoreMap":178},[220,25611,25612,25614],{"class":222,"line":223},[220,25613,343],{"class":264},[220,25615,25446],{"class":420},[220,25617,25618,25620,25622],{"class":222,"line":179},[220,25619,25486],{"class":226},[220,25621,353],{"class":260},[220,25623,25491],{"class":264},[220,25625,25626,25628,25630,25632,25634,25636,25638,25640,25642,25644,25646,25648,25650,25652,25654,25656,25658,25660,25662],{"class":222,"line":389},[220,25627,25496],{"class":226},[220,25629,353],{"class":260},[220,25631,743],{"class":264},[220,25633,21127],{"class":420},[220,25635,4831],{"class":264},[220,25637,21132],{"class":226},[220,25639,21135],{"class":264},[220,25641,25511],{"class":230},[220,25643,25514],{"class":264},[220,25645,18215],{"class":420},[220,25647,25519],{"class":264},[220,25649,19679],{"class":420},[220,25651,25524],{"class":264},[220,25653,24329],{"class":420},[220,25655,25529],{"class":264},[220,25657,24005],{"class":420},[220,25659,25534],{"class":264},[220,25661,8668],{"class":420},[220,25663,25539],{"class":264},[220,25665,25666],{"class":222,"line":399},[220,25667,15798],{"class":264},[212,25669,25671],{"className":251,"code":25670,"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,25672,25673,25687,25691,25695,25703,25707,25716,25746,25750,25754,25758],{"__ignoreMap":178},[220,25674,25675,25677,25679,25681,25683,25685],{"class":222,"line":223},[220,25676,1735],{"class":260},[220,25678,1738],{"class":420},[220,25680,1741],{"class":260},[220,25682,1744],{"class":260},[220,25684,1747],{"class":226},[220,25686,1750],{"class":264},[220,25688,25689],{"class":222,"line":179},[220,25690,1765],{"class":264},[220,25692,25693],{"class":222,"line":389},[220,25694,16374],{"class":264},[220,25696,25697,25699,25701],{"class":222,"line":399},[220,25698,16379],{"class":264},[220,25700,21528],{"class":230},[220,25702,1760],{"class":264},[220,25704,25705],{"class":222,"line":644},[220,25706,16388],{"class":264},[220,25708,25709,25712,25714],{"class":222,"line":650},[220,25710,25711],{"class":264}," shapeSdfUrl: ",[220,25713,25318],{"class":230},[220,25715,1760],{"class":264},[220,25717,25718,25721,25724,25726,25728,25730,25732,25734,25736,25738,25740,25742,25744],{"class":222,"line":656},[220,25719,25720],{"class":264}," shape: { type: ",[220,25722,25723],{"class":230},"'svgExtrude3D'",[220,25725,25514],{"class":264},[220,25727,18215],{"class":420},[220,25729,25519],{"class":264},[220,25731,19679],{"class":420},[220,25733,25524],{"class":264},[220,25735,24329],{"class":420},[220,25737,25529],{"class":264},[220,25739,24005],{"class":420},[220,25741,25534],{"class":264},[220,25743,8668],{"class":420},[220,25745,5665],{"class":264},[220,25747,25748],{"class":222,"line":673},[220,25749,4924],{"class":264},[220,25751,25752],{"class":222,"line":682},[220,25753,4604],{"class":264},[220,25755,25756],{"class":222,"line":691},[220,25757,1787],{"class":264},[220,25759,25760],{"class":222,"line":696},[220,25761,1792],{"class":264},[15,25763,25764,25765,25767,25768,25770],{},"The easiest way to produce a working extruded logo (SDF ",[99,25766,25202],{}," plus the matching ",[99,25769,20983],{}," config) is to set it up visually in the design editor and use the code export.",[1504,25772,14986],{},{"title":178,"searchDepth":179,"depth":179,"links":25774},[25775,25776,25800,25826],{"id":21008,"depth":179,"text":21009},{"id":21674,"depth":179,"text":21675,"children":25777},[25778,25780,25782,25784,25786,25788,25790,25792,25794,25796,25798],{"id":21686,"depth":389,"text":25779},"Circle — circleSDF",{"id":21758,"depth":389,"text":25781},"Ellipse — ellipseSDF",{"id":21882,"depth":389,"text":25783},"Polygon — polygonSDF",{"id":22033,"depth":389,"text":25785},"Star — starSDF",{"id":22184,"depth":389,"text":25787},"Flower — flowerSDF",{"id":22335,"depth":389,"text":25789},"Ring — ringSDF",{"id":22434,"depth":389,"text":25791},"Cross — crossSDF",{"id":22584,"depth":389,"text":25793},"Rounded Rectangle — roundedRectSDF",{"id":22728,"depth":389,"text":25795},"Vesica — vesicaSDF",{"id":22856,"depth":389,"text":25797},"Crescent — crescentSDF",{"id":23003,"depth":389,"text":25799},"Trapezoid — trapezoidSDF",{"id":23151,"depth":179,"text":23152,"children":25801},[25802,25804,25806,25808,25810,25812,25814,25816,25818,25820,25822,25824],{"id":23319,"depth":389,"text":25803},"Sphere — sphere3D",{"id":23437,"depth":389,"text":25805},"Cube — cube3D",{"id":23640,"depth":389,"text":25807},"Torus — torus3D",{"id":23785,"depth":389,"text":25809},"Octahedron — octahedron3D",{"id":23906,"depth":389,"text":25811},"Cylinder — cylinder3D",{"id":24078,"depth":389,"text":25813},"Capsule — capsule3D",{"id":24223,"depth":389,"text":25815},"Cone — cone3D",{"id":24403,"depth":389,"text":25817},"Pyramid — pyramid3D",{"id":24548,"depth":389,"text":25819},"Prism — prism3D",{"id":24694,"depth":389,"text":25821},"Ellipsoid — ellipsoid3D",{"id":24871,"depth":389,"text":25823},"Diamond — diamond3D",{"id":25018,"depth":389,"text":25825},"Link — link3D",{"id":25188,"depth":179,"text":25189,"children":25827},[25828],{"id":25331,"depth":389,"text":25332},"How to use and configure the built-in shape system","shapes",{},"\u002Fdocs\u002Fguide\u002Fshape-effects",{"title":20959,"description":25829},"docs\u002Fguide\u002F8.shape-effects","8voA0zvbOTayfVpXuUNLZbCOUaeS0rIgxEOk0y28jTM",{"id":25837,"title":25838,"body":25839,"category":2240,"description":26193,"exclude":190,"extension":191,"forceFramework":190,"icon":26194,"meta":26195,"navigation":194,"path":26196,"seo":26197,"stem":26198,"__hash__":26199},"guide\u002Fdocs\u002Fguide\u002F9.performance.md","Performance",{"type":8,"value":25840,"toc":26187},[25841,25844,25847,25851,25858,25861,25865,25868,25874,25884,25889,25950,25953,25957,25960,25965,25981,25987,26141,26145,26151,26157,26172,26178,26184],[11,25842,25838],{"id":25843},"performance",[15,25845,25846],{},"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,25848,25850],{"id":25849},"the-frame-budget","The frame budget",[15,25852,25853,25854,25857],{},"At 60fps, the GPU has ",[159,25855,25856],{},"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,25859,25860],{},"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,25862,25864],{"id":25863},"generator-vs-filter-effects","Generator vs. filter effects",[15,25866,25867],{},"Effects fall into two broad categories with very different cost profiles:",[15,25869,25870,25873],{},[159,25871,25872],{},"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,25875,25876,25879,25880,25883],{},[159,25877,25878],{},"Filter\u002FEffect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[159,25881,25882],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,25885,25886],{},[159,25887,25888],{},"Rough cost categories:",[1794,25890,25891,25904],{},[1797,25892,25893],{},[1800,25894,25895,25898,25901],{},[1803,25896,25897],{},"Category",[1803,25899,25900],{},"Examples",[1803,25902,25903],{},"Relative cost",[1810,25905,25906,25917,25928,25939],{},[1800,25907,25908,25911,25914],{},[1815,25909,25910],{},"Very light",[1815,25912,25913],{},"SolidColor, LinearGradient, RadialGradient",[1815,25915,25916],{},"~0–0.1ms",[1800,25918,25919,25922,25925],{},[1815,25920,25921],{},"Light",[1815,25923,25924],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1815,25926,25927],{},"~0.1–0.5ms",[1800,25929,25930,25933,25936],{},[1815,25931,25932],{},"Medium",[1815,25934,25935],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1815,25937,25938],{},"~0.5–2ms",[1800,25940,25941,25944,25947],{},[1815,25942,25943],{},"Heavy",[1815,25945,25946],{},"Glass, GlassTiles, multiple nested RTT effects",[1815,25948,25949],{},"~1-2ms+",[15,25951,25952],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,25954,25956],{"id":25955},"render-to-texture-rtt","Render-to-texture (RTT)",[15,25958,25959],{},"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,25961,25962],{},[159,25963,25964],{},"What triggers RTT:",[34,25966,25967,25970,25978],{},[37,25968,25969],{},"Filter\u002Feffect components that need input (Blur, Glass, GlassTiles, etc.)",[37,25971,1839,25972,15707,25974,25977],{},[99,25973,19409],{},[56,25975,25976],{"href":17267},"Prop Driver"," on any component (the source layer is RTT'd)",[37,25979,25980],{},"The masking system when a layer is used as a mask source",[15,25982,25983,25986],{},[159,25984,25985],{},"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,25988,25990],{"className":334,"code":25989,"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,25991,25992,25997,26005,26013,26021,26029,26044,26052,26060,26068,26076,26084,26088,26093,26101,26109,26117,26125,26133],{"__ignoreMap":178},[220,25993,25994],{"class":222,"line":223},[220,25995,25996],{"class":609},"\u003C!-- Avoid: three RTT passes in series -->\n",[220,25998,25999,26001,26003],{"class":222,"line":179},[220,26000,343],{"class":264},[220,26002,347],{"class":346},[220,26004,359],{"class":264},[220,26006,26007,26009,26011],{"class":222,"line":389},[220,26008,364],{"class":264},[220,26010,367],{"class":346},[220,26012,386],{"class":264},[220,26014,26015,26017,26019],{"class":222,"line":399},[220,26016,364],{"class":264},[220,26018,6220],{"class":346},[220,26020,359],{"class":264},[220,26022,26023,26025,26027],{"class":222,"line":644},[220,26024,2550],{"class":264},[220,26026,15461],{"class":346},[220,26028,359],{"class":264},[220,26030,26031,26033,26035,26037,26039,26042],{"class":222,"line":650},[220,26032,2813],{"class":264},[220,26034,11764],{"class":346},[220,26036,17323],{"class":226},[220,26038,353],{"class":264},[220,26040,26041],{"class":230},"\"20\"",[220,26043,359],{"class":264},[220,26045,26046,26048,26050],{"class":222,"line":656},[220,26047,10804],{"class":264},[220,26049,2553],{"class":346},[220,26051,386],{"class":264},[220,26053,26054,26056,26058],{"class":222,"line":673},[220,26055,10909],{"class":264},[220,26057,11764],{"class":346},[220,26059,359],{"class":264},[220,26061,26062,26064,26066],{"class":222,"line":682},[220,26063,2828],{"class":264},[220,26065,15461],{"class":346},[220,26067,359],{"class":264},[220,26069,26070,26072,26074],{"class":222,"line":691},[220,26071,2567],{"class":264},[220,26073,6220],{"class":346},[220,26075,359],{"class":264},[220,26077,26078,26080,26082],{"class":222,"line":696},[220,26079,402],{"class":264},[220,26081,347],{"class":346},[220,26083,359],{"class":264},[220,26085,26086],{"class":222,"line":702},[220,26087,647],{"emptyLinePlaceholder":194},[220,26089,26090],{"class":222,"line":718},[220,26091,26092],{"class":609},"\u003C!-- Better: fewer RTT boundaries -->\n",[220,26094,26095,26097,26099],{"class":222,"line":727},[220,26096,343],{"class":264},[220,26098,347],{"class":346},[220,26100,359],{"class":264},[220,26102,26103,26105,26107],{"class":222,"line":2664},[220,26104,364],{"class":264},[220,26106,367],{"class":346},[220,26108,386],{"class":264},[220,26110,26111,26113,26115],{"class":222,"line":3522},[220,26112,364],{"class":264},[220,26114,6220],{"class":346},[220,26116,359],{"class":264},[220,26118,26119,26121,26123],{"class":222,"line":9657},[220,26120,2550],{"class":264},[220,26122,2553],{"class":346},[220,26124,386],{"class":264},[220,26126,26127,26129,26131],{"class":222,"line":9668},[220,26128,2567],{"class":264},[220,26130,6220],{"class":346},[220,26132,359],{"class":264},[220,26134,26135,26137,26139],{"class":222,"line":9673},[220,26136,402],{"class":264},[220,26138,347],{"class":346},[220,26140,359],{"class":264},[23,26142,26144],{"id":26143},"practical-tips","Practical tips",[15,26146,26147,26150],{},[159,26148,26149],{},"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,26152,26153,26156],{},[159,26154,26155],{},"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,26158,26159,26162,26163,26165,26166,26168,26169,26171],{},[159,26160,26161],{},"Invisible layers still cost."," A hidden layer with ",[99,26164,9040],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[99,26167,8668],{}," still renders the layer. Use ",[99,26170,9040],{}," to truly exclude layers you don't need.",[15,26173,26174,26177],{},[159,26175,26176],{},"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,26179,26180,26183],{},[159,26181,26182],{},"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,26185,26186],{},"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":26188},[26189,26190,26191,26192],{"id":25849,"depth":179,"text":25850},{"id":25863,"depth":179,"text":25864},{"id":25955,"depth":179,"text":25956},{"id":26143,"depth":179,"text":26144},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"\u002Fdocs\u002Fguide\u002Fperformance",{"title":25838,"description":26193},"docs\u002Fguide\u002F9.performance","WHeb5Ts4O503nCOEtFBki43V6NY2rxYTfUc89UhAewM",{"id":26201,"title":201,"body":26202,"category":188,"description":26829,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":26830,"navigation":194,"path":26831,"seo":26832,"stem":26833,"__hash__":26834},"guide\u002Fdocs\u002Fguide\u002Fjs\u002F1.quickstart.md",{"type":8,"value":26203,"toc":26819},[26204,26208,26211,26215,26227,26231,26237,26268,26270,26277,26371,26373,26379,26381,26389,26491,26498,26521,26523,26530,26622,26626,26635,26754,26761,26767,26771,26778,26792,26795,26797,26816],[11,26205,26207],{"id":26206},"quickstart-javascript","Quickstart (JavaScript)",[15,26209,26210],{},"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,26212,26214],{"id":26213},"install-the-npm-package","Install the npm package",[212,26216,26217],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26218,26219],{"__ignoreMap":178},[220,26220,26221,26223,26225],{"class":222,"line":223},[220,26222,227],{"class":226},[220,26224,231],{"class":230},[220,26226,234],{"class":230},[23,26228,26230],{"id":26229},"set-up-a-canvas","Set up a canvas",[15,26232,26233,26234,26236],{},"Create a ",[99,26235,586],{}," element in your HTML and give it a size:",[212,26238,26240],{"className":12874,"code":26239,"language":12876,"meta":178,"style":178},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C\u002Fcanvas>\n",[99,26241,26242],{"__ignoreMap":178},[220,26243,26244,26246,26248,26250,26252,26255,26257,26259,26262,26264,26266],{"class":222,"line":223},[220,26245,343],{"class":264},[220,26247,12885],{"class":346},[220,26249,9095],{"class":226},[220,26251,353],{"class":264},[220,26253,26254],{"class":230},"\"my-shader\"",[220,26256,663],{"class":226},[220,26258,353],{"class":264},[220,26260,26261],{"class":230},"\"width: 100%; height: 400px;\"",[220,26263,3804],{"class":264},[220,26265,12885],{"class":346},[220,26267,359],{"class":264},[23,26269,323],{"id":322},[15,26271,26272,26273,26276],{},"Import ",[99,26274,26275],{},"createShader",", pass it the canvas and a list of components:",[212,26278,26280],{"className":251,"code":26279,"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,26281,26282,26292,26296,26314,26318,26332,26336,26354,26363,26367],{"__ignoreMap":178},[220,26283,26284,26286,26288,26290],{"class":222,"line":223},[220,26285,261],{"class":260},[220,26287,11507],{"class":264},[220,26289,268],{"class":260},[220,26291,4007],{"class":230},[220,26293,26294],{"class":222,"line":179},[220,26295,647],{"emptyLinePlaceholder":194},[220,26297,26298,26300,26302,26304,26306,26308,26310,26312],{"class":222,"line":389},[220,26299,1735],{"class":260},[220,26301,3133],{"class":420},[220,26303,1741],{"class":260},[220,26305,3138],{"class":264},[220,26307,3141],{"class":226},[220,26309,2626],{"class":264},[220,26311,12520],{"class":230},[220,26313,2632],{"class":264},[220,26315,26316],{"class":222,"line":399},[220,26317,647],{"emptyLinePlaceholder":194},[220,26319,26320,26322,26324,26326,26328,26330],{"class":222,"line":644},[220,26321,1735],{"class":260},[220,26323,1738],{"class":420},[220,26325,1741],{"class":260},[220,26327,1744],{"class":260},[220,26329,1747],{"class":226},[220,26331,1750],{"class":264},[220,26333,26334],{"class":222,"line":650},[220,26335,1765],{"class":264},[220,26337,26338,26340,26342,26344,26347,26349,26352],{"class":222,"line":656},[220,26339,1770],{"class":264},[220,26341,2462],{"class":230},[220,26343,10161],{"class":264},[220,26345,26346],{"class":230},"'#0f172a'",[220,26348,10167],{"class":264},[220,26350,26351],{"class":230},"'#7c3aed'",[220,26353,6566],{"class":264},[220,26355,26356,26358,26361],{"class":222,"line":673},[220,26357,1770],{"class":264},[220,26359,26360],{"class":230},"'CursorTrail'",[220,26362,2465],{"class":264},[220,26364,26365],{"class":222,"line":682},[220,26366,1787],{"class":264},[220,26368,26369],{"class":222,"line":691},[220,26370,1792],{"class":264},[19,26372],{":preset":578},[15,26374,1839,26375,26378],{},[99,26376,26377],{},"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,26380,594],{"id":593},[15,26382,1839,26383,26385,26386,1554],{},[99,26384,586],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[99,26387,26388],{},"ResizeObserver",[212,26390,26392],{"className":12874,"code":26391,"language":12876,"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,26393,26394,26399,26424,26428,26433,26458,26462,26467],{"__ignoreMap":178},[220,26395,26396],{"class":222,"line":223},[220,26397,26398],{"class":609},"\u003C!-- Fixed size -->\n",[220,26400,26401,26403,26405,26407,26409,26412,26414,26416,26418,26420,26422],{"class":222,"line":179},[220,26402,343],{"class":264},[220,26404,12885],{"class":346},[220,26406,9095],{"class":226},[220,26408,353],{"class":264},[220,26410,26411],{"class":230},"\"shader\"",[220,26413,663],{"class":226},[220,26415,353],{"class":264},[220,26417,668],{"class":230},[220,26419,3804],{"class":264},[220,26421,12885],{"class":346},[220,26423,359],{"class":264},[220,26425,26426],{"class":222,"line":389},[220,26427,647],{"emptyLinePlaceholder":194},[220,26429,26430],{"class":222,"line":399},[220,26431,26432],{"class":609},"\u003C!-- Full viewport -->\n",[220,26434,26435,26437,26439,26441,26443,26445,26447,26449,26452,26454,26456],{"class":222,"line":644},[220,26436,343],{"class":264},[220,26438,12885],{"class":346},[220,26440,9095],{"class":226},[220,26442,353],{"class":264},[220,26444,26411],{"class":230},[220,26446,663],{"class":226},[220,26448,353],{"class":264},[220,26450,26451],{"class":230},"\"width: 100vw; height: 100dvh;\"",[220,26453,3804],{"class":264},[220,26455,12885],{"class":346},[220,26457,359],{"class":264},[220,26459,26460],{"class":222,"line":650},[220,26461,647],{"emptyLinePlaceholder":194},[220,26463,26464],{"class":222,"line":656},[220,26465,26466],{"class":609},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[220,26468,26469,26471,26473,26475,26477,26479,26481,26483,26485,26487,26489],{"class":222,"line":673},[220,26470,343],{"class":264},[220,26472,12885],{"class":346},[220,26474,9095],{"class":226},[220,26476,353],{"class":264},[220,26478,26411],{"class":230},[220,26480,350],{"class":226},[220,26482,353],{"class":264},[220,26484,713],{"class":230},[220,26486,3804],{"class":264},[220,26488,12885],{"class":346},[220,26490,359],{"class":264},[15,26492,26493,26494,26497],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[99,26495,26496],{},"shader.resize()"," to sync:",[212,26499,26501],{"className":251,"code":26500,"language":253,"meta":178,"style":178},"canvas.style.height = '600px'\nshader.resize()\n",[99,26502,26503,26512],{"__ignoreMap":178},[220,26504,26505,26507,26509],{"class":222,"line":223},[220,26506,12537],{"class":264},[220,26508,353],{"class":260},[220,26510,26511],{"class":230}," '600px'\n",[220,26513,26514,26516,26519],{"class":222,"line":179},[220,26515,11597],{"class":264},[220,26517,26518],{"class":226},"resize",[220,26520,4032],{"class":264},[23,26522,1153],{"id":1152},[15,26524,26525,26526,26529],{},"Props are passed in the ",[99,26527,26528],{},"props"," object for each component. All prop names are camelCase:",[212,26531,26533],{"className":251,"code":26532,"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,26534,26535,26549,26553,26557,26565,26569,26579,26589,26598,26606,26610,26614,26618],{"__ignoreMap":178},[220,26536,26537,26539,26541,26543,26545,26547],{"class":222,"line":223},[220,26538,1735],{"class":260},[220,26540,1738],{"class":420},[220,26542,1741],{"class":260},[220,26544,1744],{"class":260},[220,26546,1747],{"class":226},[220,26548,1750],{"class":264},[220,26550,26551],{"class":222,"line":179},[220,26552,1765],{"class":264},[220,26554,26555],{"class":222,"line":389},[220,26556,16374],{"class":264},[220,26558,26559,26561,26563],{"class":222,"line":399},[220,26560,16379],{"class":264},[220,26562,2462],{"class":230},[220,26564,1760],{"class":264},[220,26566,26567],{"class":222,"line":644},[220,26568,16388],{"class":264},[220,26570,26571,26574,26577],{"class":222,"line":650},[220,26572,26573],{"class":264}," colorA: ",[220,26575,26576],{"class":230},"'#ff6b6b'",[220,26578,1760],{"class":264},[220,26580,26581,26584,26587],{"class":222,"line":656},[220,26582,26583],{"class":264}," colorB: ",[220,26585,26586],{"class":230},"'#4ecdc4'",[220,26588,1760],{"class":264},[220,26590,26591,26594,26596],{"class":222,"line":673},[220,26592,26593],{"class":264}," angle: ",[220,26595,1295],{"class":420},[220,26597,1760],{"class":264},[220,26599,26600,26603],{"class":222,"line":682},[220,26601,26602],{"class":264}," colorSpace: ",[220,26604,26605],{"class":230},"'oklch'\n",[220,26607,26608],{"class":222,"line":691},[220,26609,4924],{"class":264},[220,26611,26612],{"class":222,"line":696},[220,26613,4604],{"class":264},[220,26615,26616],{"class":222,"line":702},[220,26617,1787],{"class":264},[220,26619,26620],{"class":222,"line":718},[220,26621,1792],{"class":264},[23,26623,26625],{"id":26624},"updating-at-runtime","Updating at runtime",[15,26627,26628,26629,26631,26632,26634],{},"Assign an ",[99,26630,9051],{}," to any component, then use ",[99,26633,20791],{}," to change its props at any time:",[212,26636,26638],{"className":251,"code":26637,"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,26639,26640,26654,26658,26683,26687,26691,26695,26700,26732,26750],{"__ignoreMap":178},[220,26641,26642,26644,26646,26648,26650,26652],{"class":222,"line":223},[220,26643,1735],{"class":260},[220,26645,1738],{"class":420},[220,26647,1741],{"class":260},[220,26649,1744],{"class":260},[220,26651,1747],{"class":226},[220,26653,1750],{"class":264},[220,26655,26656],{"class":222,"line":179},[220,26657,1765],{"class":264},[220,26659,26660,26662,26664,26666,26668,26670,26672,26674,26676,26679,26681],{"class":222,"line":389},[220,26661,1770],{"class":264},[220,26663,2462],{"class":230},[220,26665,3209],{"class":264},[220,26667,11564],{"class":230},[220,26669,10161],{"class":264},[220,26671,26346],{"class":230},[220,26673,10167],{"class":264},[220,26675,26351],{"class":230},[220,26677,26678],{"class":264},", angle: ",[220,26680,8668],{"class":420},[220,26682,1782],{"class":264},[220,26684,26685],{"class":222,"line":399},[220,26686,1787],{"class":264},[220,26688,26689],{"class":222,"line":644},[220,26690,1792],{"class":264},[220,26692,26693],{"class":222,"line":650},[220,26694,647],{"emptyLinePlaceholder":194},[220,26696,26697],{"class":222,"line":656},[220,26698,26699],{"class":609},"\u002F\u002F Hook up a slider\n",[220,26701,26702,26705,26708,26710,26713,26715,26718,26720,26723,26725,26728,26730],{"class":222,"line":673},[220,26703,26704],{"class":264},"document.",[220,26706,26707],{"class":226},"querySelector",[220,26709,2626],{"class":264},[220,26711,26712],{"class":230},"'#angle-slider'",[220,26714,15432],{"class":264},[220,26716,26717],{"class":226},"addEventListener",[220,26719,2626],{"class":264},[220,26721,26722],{"class":230},"'input'",[220,26724,1895],{"class":264},[220,26726,26727],{"class":3621},"e",[220,26729,10825],{"class":260},[220,26731,3241],{"class":264},[220,26733,26734,26736,26738,26740,26742,26744,26747],{"class":222,"line":682},[220,26735,17162],{"class":264},[220,26737,11600],{"class":226},[220,26739,2626],{"class":264},[220,26741,11564],{"class":230},[220,26743,11607],{"class":264},[220,26745,26746],{"class":226},"Number",[220,26748,26749],{"class":264},"(e.target.value) })\n",[220,26751,26752],{"class":222,"line":691},[220,26753,1792],{"class":264},[15,26755,26756,26757,26760],{},"When ",[99,26758,26759],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,26762,26763,26764,26766],{},"Browse the ",[56,26765,1160],{"href":1159}," for the full prop reference on every component.",[23,26768,26770],{"id":26769},"cleanup","Cleanup",[15,26772,26773,26774,26777],{},"When you're done, call ",[99,26775,26776],{},"destroy()"," to free GPU resources:",[212,26779,26781],{"className":251,"code":26780,"language":253,"meta":178,"style":178},"shader.destroy()\n",[99,26782,26783],{"__ignoreMap":178},[220,26784,26785,26787,26790],{"class":222,"line":223},[220,26786,11597],{"class":264},[220,26788,26789],{"class":226},"destroy",[220,26791,4032],{"class":264},[15,26793,26794],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,26796,1474],{"id":1473},[34,26798,26799,26803,26807,26812],{},[37,26800,26801,1483],{},[56,26802,1482],{"href":1481},[37,26804,26805,1490],{},[56,26806,1489],{"href":1488},[37,26808,26809,26811],{},[56,26810,17293],{"href":17267}," — animate and mouse-track props declaratively",[37,26813,26814,1502],{},[56,26815,1160],{"href":1159},[1504,26817,26818],{},"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":26820},[26821,26822,26823,26824,26825,26826,26827,26828],{"id":26213,"depth":179,"text":26214},{"id":26229,"depth":179,"text":26230},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":26624,"depth":179,"text":26625},{"id":26769,"depth":179,"text":26770},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart",{"title":201,"description":26829},"docs\u002Fguide\u002Fjs\u002F1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":26836,"title":201,"body":26837,"category":188,"description":27471,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":27472,"navigation":194,"path":27473,"seo":27474,"stem":27475,"__hash__":27476},"guide\u002Fdocs\u002Fguide\u002Freact\u002F1.quickstart.md",{"type":8,"value":26838,"toc":27462},[26839,26843,26847,26849,26861,26865,26879,26881,26884,26938,26940,26947,26949,26962,27096,27110,27112,27115,27187,27194,27422,27427,27431,27435,27443,27445,27459],[11,26840,26842],{"id":26841},"quickstart-react","Quickstart (React)",[26844,26845],"you-tube-embed",{"id":26846},"G7kzM8M7hA4",[23,26848,26214],{"id":26213},[212,26850,26851],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,26852,26853],{"__ignoreMap":178},[220,26854,26855,26857,26859],{"class":222,"line":223},[220,26856,227],{"class":226},[220,26858,231],{"class":230},[220,26860,234],{"class":230},[23,26862,26864],{"id":26863},"import-some-components","Import some components",[212,26866,26867],{"className":251,"code":274,"language":253,"meta":178,"style":178},[99,26868,26869],{"__ignoreMap":178},[220,26870,26871,26873,26875,26877],{"class":222,"line":223},[220,26872,261],{"class":260},[220,26874,265],{"class":264},[220,26876,268],{"class":260},[220,26878,287],{"class":230},[23,26880,323],{"id":322},[15,26882,26883],{},"Let's create a very simple shader:",[212,26885,26886],{"className":409,"code":410,"language":411,"meta":178,"style":178},[99,26887,26888,26902,26922,26930],{"__ignoreMap":178},[220,26889,26890,26892,26894,26896,26898,26900],{"class":222,"line":223},[220,26891,343],{"class":264},[220,26893,347],{"class":420},[220,26895,423],{"class":226},[220,26897,353],{"class":260},[220,26899,356],{"class":230},[220,26901,359],{"class":264},[220,26903,26904,26906,26908,26910,26912,26914,26916,26918,26920],{"class":222,"line":179},[220,26905,364],{"class":264},[220,26907,367],{"class":420},[220,26909,370],{"class":226},[220,26911,353],{"class":260},[220,26913,375],{"class":230},[220,26915,378],{"class":226},[220,26917,353],{"class":260},[220,26919,383],{"class":230},[220,26921,386],{"class":264},[220,26923,26924,26926,26928],{"class":222,"line":389},[220,26925,364],{"class":264},[220,26927,394],{"class":420},[220,26929,386],{"class":264},[220,26931,26932,26934,26936],{"class":222,"line":399},[220,26933,402],{"class":264},[220,26935,347],{"class":420},[220,26937,359],{"class":264},[19,26939],{":preset":578},[15,26941,26942,583,26944,26946],{},[99,26943,101],{},[99,26945,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,26948,594],{"id":593},[15,26950,1839,26951,26953,26954,18740,26957,26959,26960,590],{},[99,26952,586],{}," has no intrinsic size. The ",[99,26955,26956],{},"className",[99,26958,1504],{}," you apply to ",[99,26961,101],{},[212,26963,26965],{"className":409,"code":26964,"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,26966,26967,26975,26989,26997,27005,27009,27017,27037,27045,27053,27057,27066,27080,27088],{"__ignoreMap":178},[220,26968,26969,26971,26973],{"class":222,"line":223},[220,26970,743],{"class":264},[220,26972,746],{"class":609},[220,26974,749],{"class":264},[220,26976,26977,26979,26981,26983,26985,26987],{"class":222,"line":179},[220,26978,343],{"class":264},[220,26980,347],{"class":420},[220,26982,423],{"class":226},[220,26984,353],{"class":260},[220,26986,623],{"class":230},[220,26988,359],{"class":264},[220,26990,26991,26993,26995],{"class":222,"line":389},[220,26992,364],{"class":264},[220,26994,367],{"class":420},[220,26996,386],{"class":264},[220,26998,26999,27001,27003],{"class":222,"line":399},[220,27000,402],{"class":264},[220,27002,347],{"class":420},[220,27004,359],{"class":264},[220,27006,27007],{"class":222,"line":644},[220,27008,647],{"emptyLinePlaceholder":194},[220,27010,27011,27013,27015],{"class":222,"line":650},[220,27012,743],{"class":264},[220,27014,790],{"class":609},[220,27016,749],{"class":264},[220,27018,27019,27021,27023,27025,27027,27029,27031,27033,27035],{"class":222,"line":656},[220,27020,343],{"class":264},[220,27022,347],{"class":420},[220,27024,663],{"class":226},[220,27026,353],{"class":260},[220,27028,805],{"class":264},[220,27030,808],{"class":230},[220,27032,811],{"class":264},[220,27034,814],{"class":230},[220,27036,817],{"class":264},[220,27038,27039,27041,27043],{"class":222,"line":673},[220,27040,364],{"class":264},[220,27042,367],{"class":420},[220,27044,386],{"class":264},[220,27046,27047,27049,27051],{"class":222,"line":682},[220,27048,402],{"class":264},[220,27050,347],{"class":420},[220,27052,359],{"class":264},[220,27054,27055],{"class":222,"line":691},[220,27056,647],{"emptyLinePlaceholder":194},[220,27058,27059,27061,27064],{"class":222,"line":696},[220,27060,743],{"class":264},[220,27062,27063],{"class":609},"\u002F* Fluid with aspect ratio *\u002F",[220,27065,749],{"class":264},[220,27067,27068,27070,27072,27074,27076,27078],{"class":222,"line":702},[220,27069,343],{"class":264},[220,27071,347],{"class":420},[220,27073,423],{"class":226},[220,27075,353],{"class":260},[220,27077,713],{"class":230},[220,27079,359],{"class":264},[220,27081,27082,27084,27086],{"class":222,"line":718},[220,27083,364],{"class":264},[220,27085,367],{"class":420},[220,27087,386],{"class":264},[220,27089,27090,27092,27094],{"class":222,"line":727},[220,27091,402],{"class":264},[220,27093,347],{"class":420},[220,27095,359],{"class":264},[15,27097,27098,27099,18740,27101,27103,27104,27106,27107,27109],{},"Applying a ",[99,27100,26956],{},[99,27102,1504],{}," to the ",[99,27105,101],{}," tag is preferred over trying to target the ",[99,27108,586],{}," element directly, as the internal DOM structure may change in the future.",[23,27111,1153],{"id":1152},[15,27113,27114],{},"Pass props directly to configure each component. All props use camelCase:",[212,27116,27117],{"className":409,"code":1245,"language":411,"meta":178,"style":178},[99,27118,27119,27133,27139,27147,27155,27167,27175,27179],{"__ignoreMap":178},[220,27120,27121,27123,27125,27127,27129,27131],{"class":222,"line":223},[220,27122,343],{"class":264},[220,27124,347],{"class":420},[220,27126,423],{"class":226},[220,27128,353],{"class":260},[220,27130,356],{"class":230},[220,27132,359],{"class":264},[220,27134,27135,27137],{"class":222,"line":179},[220,27136,364],{"class":264},[220,27138,1189],{"class":420},[220,27140,27141,27143,27145],{"class":222,"line":389},[220,27142,1194],{"class":226},[220,27144,353],{"class":260},[220,27146,1199],{"class":230},[220,27148,27149,27151,27153],{"class":222,"line":399},[220,27150,1204],{"class":226},[220,27152,353],{"class":260},[220,27154,1209],{"class":230},[220,27156,27157,27159,27161,27163,27165],{"class":222,"line":644},[220,27158,1288],{"class":226},[220,27160,353],{"class":260},[220,27162,743],{"class":264},[220,27164,1295],{"class":420},[220,27166,749],{"class":264},[220,27168,27169,27171,27173],{"class":222,"line":650},[220,27170,1302],{"class":226},[220,27172,353],{"class":260},[220,27174,1229],{"class":230},[220,27176,27177],{"class":222,"line":656},[220,27178,1234],{"class":264},[220,27180,27181,27183,27185],{"class":222,"line":673},[220,27182,402],{"class":264},[220,27184,347],{"class":420},[220,27186,359],{"class":264},[15,27188,27189,27190,27193],{},"Props also accept state — ",[99,27191,27192],{},"useState"," and any other reactive value work exactly as you'd expect:",[212,27195,27197],{"className":409,"code":27196,"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,27198,27199,27209,27220,27224,27239,27263,27267,27273,27277,27291,27318,27326,27330,27337,27347,27360,27374,27384,27406,27410,27414,27418],{"__ignoreMap":178},[220,27200,27201,27203,27205,27207],{"class":222,"line":223},[220,27202,261],{"class":260},[220,27204,2682],{"class":264},[220,27206,268],{"class":260},[220,27208,2687],{"class":230},[220,27210,27211,27213,27216,27218],{"class":222,"line":179},[220,27212,261],{"class":260},[220,27214,27215],{"class":264}," { Shader, LinearGradient } ",[220,27217,268],{"class":260},[220,27219,287],{"class":230},[220,27221,27222],{"class":222,"line":389},[220,27223,647],{"emptyLinePlaceholder":194},[220,27225,27226,27229,27232,27234,27237],{"class":222,"line":399},[220,27227,27228],{"class":260},"export",[220,27230,27231],{"class":260}," default",[220,27233,11936],{"class":260},[220,27235,27236],{"class":226}," MyShader",[220,27238,2647],{"class":264},[220,27240,27241,27243,27245,27247,27249,27251,27253,27255,27257,27259,27261],{"class":222,"line":644},[220,27242,2705],{"class":260},[220,27244,2708],{"class":264},[220,27246,10759],{"class":420},[220,27248,1895],{"class":264},[220,27250,10764],{"class":420},[220,27252,2719],{"class":264},[220,27254,353],{"class":260},[220,27256,2724],{"class":226},[220,27258,2626],{"class":264},[220,27260,8668],{"class":420},[220,27262,2632],{"class":264},[220,27264,27265],{"class":222,"line":650},[220,27266,647],{"emptyLinePlaceholder":194},[220,27268,27269,27271],{"class":222,"line":656},[220,27270,2739],{"class":260},[220,27272,2742],{"class":264},[220,27274,27275],{"class":222,"line":673},[220,27276,10791],{"class":264},[220,27278,27279,27281,27283,27285,27287,27289],{"class":222,"line":682},[220,27280,2813],{"class":264},[220,27282,347],{"class":420},[220,27284,423],{"class":226},[220,27286,353],{"class":260},[220,27288,356],{"class":230},[220,27290,359],{"class":264},[220,27292,27293,27295,27297,27299,27301,27304,27306,27308,27311,27313,27315],{"class":222,"line":691},[220,27294,10804],{"class":264},[220,27296,367],{"class":420},[220,27298,370],{"class":226},[220,27300,353],{"class":260},[220,27302,27303],{"class":230},"\"#ff6b6b\"",[220,27305,378],{"class":226},[220,27307,353],{"class":260},[220,27309,27310],{"class":230},"\"#4ecdc4\"",[220,27312,10527],{"class":226},[220,27314,353],{"class":260},[220,27316,27317],{"class":264},"{angle} \u002F>\n",[220,27319,27320,27322,27324],{"class":222,"line":696},[220,27321,10909],{"class":264},[220,27323,347],{"class":420},[220,27325,359],{"class":264},[220,27327,27328],{"class":222,"line":702},[220,27329,647],{"emptyLinePlaceholder":194},[220,27331,27332,27334],{"class":222,"line":718},[220,27333,2813],{"class":264},[220,27335,27336],{"class":346},"input\n",[220,27338,27339,27342,27344],{"class":222,"line":727},[220,27340,27341],{"class":226}," type",[220,27343,353],{"class":260},[220,27345,27346],{"class":230},"\"range\"\n",[220,27348,27349,27352,27354,27356,27358],{"class":222,"line":2664},[220,27350,27351],{"class":226}," min",[220,27353,353],{"class":260},[220,27355,743],{"class":264},[220,27357,8668],{"class":420},[220,27359,749],{"class":264},[220,27361,27362,27365,27367,27369,27372],{"class":222,"line":3522},[220,27363,27364],{"class":226}," max",[220,27366,353],{"class":260},[220,27368,743],{"class":264},[220,27370,27371],{"class":420},"360",[220,27373,749],{"class":264},[220,27375,27376,27379,27381],{"class":222,"line":9657},[220,27377,27378],{"class":226}," value",[220,27380,353],{"class":260},[220,27382,27383],{"class":264},"{angle}\n",[220,27385,27386,27389,27391,27393,27395,27397,27399,27401,27403],{"class":222,"line":9668},[220,27387,27388],{"class":226}," onChange",[220,27390,353],{"class":260},[220,27392,743],{"class":264},[220,27394,26727],{"class":3621},[220,27396,10825],{"class":260},[220,27398,10818],{"class":226},[220,27400,2626],{"class":264},[220,27402,26746],{"class":226},[220,27404,27405],{"class":264},"(e.target.value))}\n",[220,27407,27408],{"class":222,"line":9673},[220,27409,17032],{"class":264},[220,27411,27412],{"class":222,"line":10994},[220,27413,10991],{"class":264},[220,27415,27416],{"class":222,"line":10999},[220,27417,2837],{"class":264},[220,27419,27420],{"class":222,"line":12070},[220,27421,749],{"class":264},[15,27423,26756,27424,27426],{},[99,27425,10759],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,27428,26763,27429,26766],{},[56,27430,1160],{"href":1159},[23,27432,27434],{"id":27433},"using-with-nextjs-ssr","Using with Next.js \u002F SSR",[15,27436,27437,27438,27442],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[56,27439,27441],{"href":27440},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR"," guide for how to set it up with server-side rendering.",[23,27444,1474],{"id":1473},[34,27446,27447,27451,27455],{},[37,27448,27449,1483],{},[56,27450,1482],{"href":1481},[37,27452,27453,1490],{},[56,27454,1489],{"href":1488},[37,27456,27457,1502],{},[56,27458,1160],{"href":1159},[1504,27460,27461],{},"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":27463},[27464,27465,27466,27467,27468,27469,27470],{"id":26213,"depth":179,"text":26214},{"id":26863,"depth":179,"text":26864},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":27433,"depth":179,"text":27434},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with React",{},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart",{"title":201,"description":27471},"docs\u002Fguide\u002Freact\u002F1.quickstart","DjKnvxKA6pI39w3rJToAkXf726BkOD4ePo2bvJU0wOI",{"id":27478,"title":27441,"body":27479,"category":2240,"description":28368,"exclude":190,"extension":191,"forceFramework":190,"icon":28369,"meta":28370,"navigation":194,"path":27440,"seo":28371,"stem":28372,"__hash__":28373},"guide\u002Fdocs\u002Fguide\u002Freact\u002Fssr.md",{"type":8,"value":27480,"toc":28359},[27481,27485,27488,27495,27498,27607,27610,27700,27705,27715,27721,27846,27849,27853,27859,27977,27981,27984,28091,28182,28186,28189,28356],[11,27482,27484],{"id":27483},"ssr-with-nextjs-react","SSR with Next.js \u002F React",[15,27486,27487],{},"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,27489,27491,27492],{"id":27490},"app-router-use-client","App Router: ",[99,27493,27494],{},"'use client'",[15,27496,27497],{},"In Next.js App Router, create a client component wrapper:",[212,27499,27501],{"className":409,"code":27500,"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,27502,27503,27508,27513,27517,27527,27531,27543,27549,27563,27583,27591,27599,27603],{"__ignoreMap":178},[220,27504,27505],{"class":222,"line":223},[220,27506,27507],{"class":609},"\u002F\u002F components\u002FMyShader.jsx\n",[220,27509,27510],{"class":222,"line":179},[220,27511,27512],{"class":230},"'use client'\n",[220,27514,27515],{"class":222,"line":389},[220,27516,647],{"emptyLinePlaceholder":194},[220,27518,27519,27521,27523,27525],{"class":222,"line":399},[220,27520,261],{"class":260},[220,27522,265],{"class":264},[220,27524,268],{"class":260},[220,27526,287],{"class":230},[220,27528,27529],{"class":222,"line":644},[220,27530,647],{"emptyLinePlaceholder":194},[220,27532,27533,27535,27537,27539,27541],{"class":222,"line":650},[220,27534,27228],{"class":260},[220,27536,27231],{"class":260},[220,27538,11936],{"class":260},[220,27540,27236],{"class":226},[220,27542,2647],{"class":264},[220,27544,27545,27547],{"class":222,"line":656},[220,27546,2739],{"class":260},[220,27548,2742],{"class":264},[220,27550,27551,27553,27555,27557,27559,27561],{"class":222,"line":673},[220,27552,2550],{"class":264},[220,27554,347],{"class":420},[220,27556,423],{"class":226},[220,27558,353],{"class":260},[220,27560,356],{"class":230},[220,27562,359],{"class":264},[220,27564,27565,27567,27569,27571,27573,27575,27577,27579,27581],{"class":222,"line":682},[220,27566,2813],{"class":264},[220,27568,367],{"class":420},[220,27570,370],{"class":226},[220,27572,353],{"class":260},[220,27574,375],{"class":230},[220,27576,378],{"class":226},[220,27578,353],{"class":260},[220,27580,383],{"class":230},[220,27582,386],{"class":264},[220,27584,27585,27587,27589],{"class":222,"line":691},[220,27586,2813],{"class":264},[220,27588,394],{"class":420},[220,27590,386],{"class":264},[220,27592,27593,27595,27597],{"class":222,"line":696},[220,27594,2828],{"class":264},[220,27596,347],{"class":420},[220,27598,359],{"class":264},[220,27600,27601],{"class":222,"line":702},[220,27602,2837],{"class":264},[220,27604,27605],{"class":222,"line":718},[220,27606,749],{"class":264},[15,27608,27609],{},"Then use it in a Server Component:",[212,27611,27613],{"className":409,"code":27612,"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,27614,27615,27620,27632,27636,27649,27655,27663,27672,27684,27692,27696],{"__ignoreMap":178},[220,27616,27617],{"class":222,"line":223},[220,27618,27619],{"class":609},"\u002F\u002F app\u002Fpage.jsx (Server Component)\n",[220,27621,27622,27624,27627,27629],{"class":222,"line":179},[220,27623,261],{"class":260},[220,27625,27626],{"class":264}," MyShader ",[220,27628,268],{"class":260},[220,27630,27631],{"class":230}," '@\u002Fcomponents\u002FMyShader'\n",[220,27633,27634],{"class":222,"line":389},[220,27635,647],{"emptyLinePlaceholder":194},[220,27637,27638,27640,27642,27644,27647],{"class":222,"line":399},[220,27639,27228],{"class":260},[220,27641,27231],{"class":260},[220,27643,11936],{"class":260},[220,27645,27646],{"class":226}," Page",[220,27648,2647],{"class":264},[220,27650,27651,27653],{"class":222,"line":644},[220,27652,2739],{"class":260},[220,27654,2742],{"class":264},[220,27656,27657,27659,27661],{"class":222,"line":650},[220,27658,2550],{"class":264},[220,27660,12633],{"class":346},[220,27662,359],{"class":264},[220,27664,27665,27667,27670],{"class":222,"line":656},[220,27666,2813],{"class":264},[220,27668,27669],{"class":420},"MyShader",[220,27671,386],{"class":264},[220,27673,27674,27676,27678,27680,27682],{"class":222,"line":673},[220,27675,2813],{"class":264},[220,27677,11],{"class":346},[220,27679,12921],{"class":264},[220,27681,11],{"class":346},[220,27683,359],{"class":264},[220,27685,27686,27688,27690],{"class":222,"line":682},[220,27687,2828],{"class":264},[220,27689,12633],{"class":346},[220,27691,359],{"class":264},[220,27693,27694],{"class":222,"line":691},[220,27695,2837],{"class":264},[220,27697,27698],{"class":222,"line":696},[220,27699,749],{"class":264},[15,27701,1839,27702,27704],{},[99,27703,27494],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,27706,27491,27708,27711,27712],{"id":27707},"app-router-nextdynamic-with-ssr-false",[99,27709,27710],{},"next\u002Fdynamic"," with ",[99,27713,27714],{},"ssr: false",[15,27716,27717,27718,27720],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[99,27719,27710],{}," to disable SSR:",[212,27722,27724],{"className":409,"code":27723,"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,27725,27726,27731,27743,27747,27761,27779,27788,27792,27796,27808,27814,27822,27830,27838,27842],{"__ignoreMap":178},[220,27727,27728],{"class":222,"line":223},[220,27729,27730],{"class":609},"\u002F\u002F app\u002Fpage.jsx\n",[220,27732,27733,27735,27738,27740],{"class":222,"line":179},[220,27734,261],{"class":260},[220,27736,27737],{"class":264}," dynamic ",[220,27739,268],{"class":260},[220,27741,27742],{"class":230}," 'next\u002Fdynamic'\n",[220,27744,27745],{"class":222,"line":389},[220,27746,647],{"emptyLinePlaceholder":194},[220,27748,27749,27751,27753,27755,27758],{"class":222,"line":399},[220,27750,1735],{"class":260},[220,27752,27236],{"class":420},[220,27754,1741],{"class":260},[220,27756,27757],{"class":226}," dynamic",[220,27759,27760],{"class":264},"(\n",[220,27762,27763,27766,27768,27771,27773,27776],{"class":222,"line":644},[220,27764,27765],{"class":264}," () ",[220,27767,2762],{"class":260},[220,27769,27770],{"class":260}," import",[220,27772,2626],{"class":264},[220,27774,27775],{"class":230},"'@\u002Fcomponents\u002FMyShader'",[220,27777,27778],{"class":264},"),\n",[220,27780,27781,27784,27786],{"class":222,"line":650},[220,27782,27783],{"class":264}," { ssr: ",[220,27785,2629],{"class":420},[220,27787,5665],{"class":264},[220,27789,27790],{"class":222,"line":656},[220,27791,2632],{"class":264},[220,27793,27794],{"class":222,"line":673},[220,27795,647],{"emptyLinePlaceholder":194},[220,27797,27798,27800,27802,27804,27806],{"class":222,"line":682},[220,27799,27228],{"class":260},[220,27801,27231],{"class":260},[220,27803,11936],{"class":260},[220,27805,27646],{"class":226},[220,27807,2647],{"class":264},[220,27809,27810,27812],{"class":222,"line":691},[220,27811,2739],{"class":260},[220,27813,2742],{"class":264},[220,27815,27816,27818,27820],{"class":222,"line":696},[220,27817,2550],{"class":264},[220,27819,12633],{"class":346},[220,27821,359],{"class":264},[220,27823,27824,27826,27828],{"class":222,"line":702},[220,27825,2813],{"class":264},[220,27827,27669],{"class":420},[220,27829,386],{"class":264},[220,27831,27832,27834,27836],{"class":222,"line":718},[220,27833,2828],{"class":264},[220,27835,12633],{"class":346},[220,27837,359],{"class":264},[220,27839,27840],{"class":222,"line":727},[220,27841,2837],{"class":264},[220,27843,27844],{"class":222,"line":2664},[220,27845,749],{"class":264},[15,27847,27848],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,27850,27852],{"id":27851},"pages-router","Pages Router",[15,27854,27855,27856,27858],{},"In the Pages Router, the same ",[99,27857,27710],{}," approach works:",[212,27860,27862],{"className":409,"code":27861,"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,27863,27864,27869,27879,27883,27895,27910,27918,27922,27926,27939,27945,27953,27961,27969,27973],{"__ignoreMap":178},[220,27865,27866],{"class":222,"line":223},[220,27867,27868],{"class":609},"\u002F\u002F pages\u002Findex.jsx\n",[220,27870,27871,27873,27875,27877],{"class":222,"line":179},[220,27872,261],{"class":260},[220,27874,27737],{"class":264},[220,27876,268],{"class":260},[220,27878,27742],{"class":230},[220,27880,27881],{"class":222,"line":389},[220,27882,647],{"emptyLinePlaceholder":194},[220,27884,27885,27887,27889,27891,27893],{"class":222,"line":399},[220,27886,1735],{"class":260},[220,27888,27236],{"class":420},[220,27890,1741],{"class":260},[220,27892,27757],{"class":226},[220,27894,27760],{"class":264},[220,27896,27897,27899,27901,27903,27905,27908],{"class":222,"line":644},[220,27898,27765],{"class":264},[220,27900,2762],{"class":260},[220,27902,27770],{"class":260},[220,27904,2626],{"class":264},[220,27906,27907],{"class":230},"'..\u002Fcomponents\u002FMyShader'",[220,27909,27778],{"class":264},[220,27911,27912,27914,27916],{"class":222,"line":650},[220,27913,27783],{"class":264},[220,27915,2629],{"class":420},[220,27917,5665],{"class":264},[220,27919,27920],{"class":222,"line":656},[220,27921,2632],{"class":264},[220,27923,27924],{"class":222,"line":673},[220,27925,647],{"emptyLinePlaceholder":194},[220,27927,27928,27930,27932,27934,27937],{"class":222,"line":682},[220,27929,27228],{"class":260},[220,27931,27231],{"class":260},[220,27933,11936],{"class":260},[220,27935,27936],{"class":226}," Home",[220,27938,2647],{"class":264},[220,27940,27941,27943],{"class":222,"line":691},[220,27942,2739],{"class":260},[220,27944,2742],{"class":264},[220,27946,27947,27949,27951],{"class":222,"line":696},[220,27948,2550],{"class":264},[220,27950,3398],{"class":346},[220,27952,359],{"class":264},[220,27954,27955,27957,27959],{"class":222,"line":702},[220,27956,2813],{"class":264},[220,27958,27669],{"class":420},[220,27960,386],{"class":264},[220,27962,27963,27965,27967],{"class":222,"line":718},[220,27964,2828],{"class":264},[220,27966,3398],{"class":346},[220,27968,359],{"class":264},[220,27970,27971],{"class":222,"line":727},[220,27972,2837],{"class":264},[220,27974,27975],{"class":222,"line":2664},[220,27976,749],{"class":264},[23,27978,27980],{"id":27979},"in-a-root-layout","In a root layout",[15,27982,27983],{},"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,27985,27987],{"className":409,"code":27986,"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,27988,27989,27994,28006,28010,28030,28036,28044,28053,28062,28067,28075,28083,28087],{"__ignoreMap":178},[220,27990,27991],{"class":222,"line":223},[220,27992,27993],{"class":609},"\u002F\u002F app\u002Flayout.jsx\n",[220,27995,27996,27998,28001,28003],{"class":222,"line":179},[220,27997,261],{"class":260},[220,27999,28000],{"class":264}," BackgroundShader ",[220,28002,268],{"class":260},[220,28004,28005],{"class":230}," '@\u002Fcomponents\u002FBackgroundShader'\n",[220,28007,28008],{"class":222,"line":389},[220,28009,647],{"emptyLinePlaceholder":194},[220,28011,28012,28014,28016,28018,28021,28024,28027],{"class":222,"line":399},[220,28013,27228],{"class":260},[220,28015,27231],{"class":260},[220,28017,11936],{"class":260},[220,28019,28020],{"class":226}," RootLayout",[220,28022,28023],{"class":264},"({ ",[220,28025,28026],{"class":3621},"children",[220,28028,28029],{"class":264}," }) {\n",[220,28031,28032,28034],{"class":222,"line":644},[220,28033,2739],{"class":260},[220,28035,2742],{"class":264},[220,28037,28038,28040,28042],{"class":222,"line":650},[220,28039,2550],{"class":264},[220,28041,12876],{"class":346},[220,28043,359],{"class":264},[220,28045,28046,28048,28051],{"class":222,"line":656},[220,28047,2813],{"class":264},[220,28049,28050],{"class":346},"body",[220,28052,359],{"class":264},[220,28054,28055,28057,28060],{"class":222,"line":673},[220,28056,10804],{"class":264},[220,28058,28059],{"class":420},"BackgroundShader",[220,28061,386],{"class":264},[220,28063,28064],{"class":222,"line":682},[220,28065,28066],{"class":264}," {children}\n",[220,28068,28069,28071,28073],{"class":222,"line":691},[220,28070,10909],{"class":264},[220,28072,28050],{"class":346},[220,28074,359],{"class":264},[220,28076,28077,28079,28081],{"class":222,"line":696},[220,28078,2828],{"class":264},[220,28080,12876],{"class":346},[220,28082,359],{"class":264},[220,28084,28085],{"class":222,"line":702},[220,28086,2837],{"class":264},[220,28088,28089],{"class":222,"line":718},[220,28090,749],{"class":264},[212,28092,28094],{"className":409,"code":28093,"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,28095,28096,28101,28105,28109,28120,28124,28137,28143,28158,28166,28174,28178],{"__ignoreMap":178},[220,28097,28098],{"class":222,"line":223},[220,28099,28100],{"class":609},"\u002F\u002F components\u002FBackgroundShader.jsx\n",[220,28102,28103],{"class":222,"line":179},[220,28104,27512],{"class":230},[220,28106,28107],{"class":222,"line":389},[220,28108,647],{"emptyLinePlaceholder":194},[220,28110,28111,28113,28116,28118],{"class":222,"line":399},[220,28112,261],{"class":260},[220,28114,28115],{"class":264}," { Shader, Aurora } ",[220,28117,268],{"class":260},[220,28119,287],{"class":230},[220,28121,28122],{"class":222,"line":644},[220,28123,647],{"emptyLinePlaceholder":194},[220,28125,28126,28128,28130,28132,28135],{"class":222,"line":650},[220,28127,27228],{"class":260},[220,28129,27231],{"class":260},[220,28131,11936],{"class":260},[220,28133,28134],{"class":226}," BackgroundShader",[220,28136,2647],{"class":264},[220,28138,28139,28141],{"class":222,"line":656},[220,28140,2739],{"class":260},[220,28142,2742],{"class":264},[220,28144,28145,28147,28149,28151,28153,28156],{"class":222,"line":673},[220,28146,2550],{"class":264},[220,28148,347],{"class":420},[220,28150,423],{"class":226},[220,28152,353],{"class":260},[220,28154,28155],{"class":230},"\"fixed inset-0 -z-10 pointer-events-none\"",[220,28157,359],{"class":264},[220,28159,28160,28162,28164],{"class":222,"line":682},[220,28161,2813],{"class":264},[220,28163,12612],{"class":420},[220,28165,386],{"class":264},[220,28167,28168,28170,28172],{"class":222,"line":691},[220,28169,2828],{"class":264},[220,28171,347],{"class":420},[220,28173,359],{"class":264},[220,28175,28176],{"class":222,"line":696},[220,28177,2837],{"class":264},[220,28179,28180],{"class":222,"line":702},[220,28181,749],{"class":264},[23,28183,28185],{"id":28184},"react-without-nextjs","React (without Next.js)",[15,28187,28188],{},"In a React SSR setup without Next.js, use a mounted state guard:",[212,28190,28192],{"className":409,"code":28191,"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,28193,28194,28204,28214,28218,28230,28256,28260,28270,28281,28285,28289,28308,28312,28318,28332,28340,28348,28352],{"__ignoreMap":178},[220,28195,28196,28198,28200,28202],{"class":222,"line":223},[220,28197,261],{"class":260},[220,28199,3540],{"class":264},[220,28201,268],{"class":260},[220,28203,2687],{"class":230},[220,28205,28206,28208,28210,28212],{"class":222,"line":179},[220,28207,261],{"class":260},[220,28209,27215],{"class":264},[220,28211,268],{"class":260},[220,28213,287],{"class":230},[220,28215,28216],{"class":222,"line":389},[220,28217,647],{"emptyLinePlaceholder":194},[220,28219,28220,28222,28224,28226,28228],{"class":222,"line":399},[220,28221,27228],{"class":260},[220,28223,27231],{"class":260},[220,28225,11936],{"class":260},[220,28227,27236],{"class":226},[220,28229,2647],{"class":264},[220,28231,28232,28234,28236,28239,28241,28244,28246,28248,28250,28252,28254],{"class":222,"line":644},[220,28233,2705],{"class":260},[220,28235,2708],{"class":264},[220,28237,28238],{"class":420},"mounted",[220,28240,1895],{"class":264},[220,28242,28243],{"class":420},"setMounted",[220,28245,2719],{"class":264},[220,28247,353],{"class":260},[220,28249,2724],{"class":226},[220,28251,2626],{"class":264},[220,28253,2629],{"class":420},[220,28255,2632],{"class":264},[220,28257,28258],{"class":222,"line":650},[220,28259,647],{"emptyLinePlaceholder":194},[220,28261,28262,28264,28266,28268],{"class":222,"line":656},[220,28263,3597],{"class":226},[220,28265,3600],{"class":264},[220,28267,2762],{"class":260},[220,28269,3241],{"class":264},[220,28271,28272,28275,28277,28279],{"class":222,"line":673},[220,28273,28274],{"class":226}," setMounted",[220,28276,2626],{"class":264},[220,28278,2332],{"class":420},[220,28280,2632],{"class":264},[220,28282,28283],{"class":222,"line":682},[220,28284,3637],{"class":264},[220,28286,28287],{"class":222,"line":691},[220,28288,647],{"emptyLinePlaceholder":194},[220,28290,28291,28294,28296,28299,28302,28305],{"class":222,"line":696},[220,28292,28293],{"class":260}," if",[220,28295,3506],{"class":264},[220,28297,28298],{"class":260},"!",[220,28300,28301],{"class":264},"mounted) ",[220,28303,28304],{"class":260},"return",[220,28306,28307],{"class":420}," null\n",[220,28309,28310],{"class":222,"line":702},[220,28311,647],{"emptyLinePlaceholder":194},[220,28313,28314,28316],{"class":222,"line":718},[220,28315,2739],{"class":260},[220,28317,2742],{"class":264},[220,28319,28320,28322,28324,28326,28328,28330],{"class":222,"line":727},[220,28321,2550],{"class":264},[220,28323,347],{"class":420},[220,28325,423],{"class":226},[220,28327,353],{"class":260},[220,28329,356],{"class":230},[220,28331,359],{"class":264},[220,28333,28334,28336,28338],{"class":222,"line":2664},[220,28335,2813],{"class":264},[220,28337,367],{"class":420},[220,28339,386],{"class":264},[220,28341,28342,28344,28346],{"class":222,"line":3522},[220,28343,2828],{"class":264},[220,28345,347],{"class":420},[220,28347,359],{"class":264},[220,28349,28350],{"class":222,"line":9657},[220,28351,2837],{"class":264},[220,28353,28354],{"class":222,"line":9668},[220,28355,749],{"class":264},[1504,28357,28358],{},"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":28360},[28361,28363,28365,28366,28367],{"id":27490,"depth":179,"text":28362},"App Router: 'use client'",{"id":27707,"depth":179,"text":28364},"App Router: next\u002Fdynamic with ssr: false",{"id":27851,"depth":179,"text":27852},{"id":27979,"depth":179,"text":27980},{"id":28184,"depth":179,"text":28185},"Using Shaders in Next.js and React SSR applications","server",{},{"title":27441,"description":28368},"docs\u002Fguide\u002Freact\u002Fssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":28375,"title":201,"body":28376,"category":188,"description":28985,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":28986,"navigation":194,"path":28987,"seo":28988,"stem":28989,"__hash__":28990},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002F1.quickstart.md",{"type":8,"value":28377,"toc":28976},[28378,28382,28384,28396,28398,28412,28414,28416,28470,28472,28478,28480,28491,28624,28634,28636,28639,28711,28718,28941,28944,28948,28952,28958,28960,28974],[11,28379,28381],{"id":28380},"quickstart-solid","Quickstart (Solid)",[23,28383,26214],{"id":26213},[212,28385,28386],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,28387,28388],{"__ignoreMap":178},[220,28389,28390,28392,28394],{"class":222,"line":223},[220,28391,227],{"class":226},[220,28393,231],{"class":230},[220,28395,234],{"class":230},[23,28397,26864],{"id":26863},[212,28399,28400],{"className":251,"code":306,"language":253,"meta":178,"style":178},[99,28401,28402],{"__ignoreMap":178},[220,28403,28404,28406,28408,28410],{"class":222,"line":223},[220,28405,261],{"class":260},[220,28407,265],{"class":264},[220,28409,268],{"class":260},[220,28411,319],{"class":230},[23,28413,323],{"id":322},[15,28415,26883],{},[212,28417,28418],{"className":468,"code":335,"language":469,"meta":178,"style":178},[99,28419,28420,28434,28454,28462],{"__ignoreMap":178},[220,28421,28422,28424,28426,28428,28430,28432],{"class":222,"line":223},[220,28423,343],{"class":264},[220,28425,347],{"class":420},[220,28427,350],{"class":226},[220,28429,353],{"class":260},[220,28431,356],{"class":230},[220,28433,359],{"class":264},[220,28435,28436,28438,28440,28442,28444,28446,28448,28450,28452],{"class":222,"line":179},[220,28437,364],{"class":264},[220,28439,367],{"class":420},[220,28441,370],{"class":226},[220,28443,353],{"class":260},[220,28445,375],{"class":230},[220,28447,378],{"class":226},[220,28449,353],{"class":260},[220,28451,383],{"class":230},[220,28453,386],{"class":264},[220,28455,28456,28458,28460],{"class":222,"line":389},[220,28457,364],{"class":264},[220,28459,394],{"class":420},[220,28461,386],{"class":264},[220,28463,28464,28466,28468],{"class":222,"line":399},[220,28465,402],{"class":264},[220,28467,347],{"class":420},[220,28469,359],{"class":264},[19,28471],{":preset":578},[15,28473,28474,583,28476,26946],{},[99,28475,101],{},[99,28477,586],{},[23,28479,594],{"id":593},[15,28481,1839,28482,26953,28484,18740,28487,26959,28489,590],{},[99,28483,586],{},[99,28485,28486],{},"class",[99,28488,1504],{},[99,28490,101],{},[212,28492,28494],{"className":468,"code":28493,"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,28495,28496,28504,28518,28526,28534,28538,28546,28566,28574,28582,28586,28594,28608,28616],{"__ignoreMap":178},[220,28497,28498,28500,28502],{"class":222,"line":223},[220,28499,743],{"class":264},[220,28501,746],{"class":609},[220,28503,749],{"class":264},[220,28505,28506,28508,28510,28512,28514,28516],{"class":222,"line":179},[220,28507,343],{"class":264},[220,28509,347],{"class":420},[220,28511,350],{"class":226},[220,28513,353],{"class":260},[220,28515,623],{"class":230},[220,28517,359],{"class":264},[220,28519,28520,28522,28524],{"class":222,"line":389},[220,28521,364],{"class":264},[220,28523,367],{"class":420},[220,28525,386],{"class":264},[220,28527,28528,28530,28532],{"class":222,"line":399},[220,28529,402],{"class":264},[220,28531,347],{"class":420},[220,28533,359],{"class":264},[220,28535,28536],{"class":222,"line":644},[220,28537,647],{"emptyLinePlaceholder":194},[220,28539,28540,28542,28544],{"class":222,"line":650},[220,28541,743],{"class":264},[220,28543,790],{"class":609},[220,28545,749],{"class":264},[220,28547,28548,28550,28552,28554,28556,28558,28560,28562,28564],{"class":222,"line":656},[220,28549,343],{"class":264},[220,28551,347],{"class":420},[220,28553,663],{"class":226},[220,28555,353],{"class":260},[220,28557,805],{"class":264},[220,28559,808],{"class":230},[220,28561,811],{"class":264},[220,28563,814],{"class":230},[220,28565,817],{"class":264},[220,28567,28568,28570,28572],{"class":222,"line":673},[220,28569,364],{"class":264},[220,28571,367],{"class":420},[220,28573,386],{"class":264},[220,28575,28576,28578,28580],{"class":222,"line":682},[220,28577,402],{"class":264},[220,28579,347],{"class":420},[220,28581,359],{"class":264},[220,28583,28584],{"class":222,"line":691},[220,28585,647],{"emptyLinePlaceholder":194},[220,28587,28588,28590,28592],{"class":222,"line":696},[220,28589,743],{"class":264},[220,28591,27063],{"class":609},[220,28593,749],{"class":264},[220,28595,28596,28598,28600,28602,28604,28606],{"class":222,"line":702},[220,28597,343],{"class":264},[220,28599,347],{"class":420},[220,28601,350],{"class":226},[220,28603,353],{"class":260},[220,28605,713],{"class":230},[220,28607,359],{"class":264},[220,28609,28610,28612,28614],{"class":222,"line":718},[220,28611,364],{"class":264},[220,28613,367],{"class":420},[220,28615,386],{"class":264},[220,28617,28618,28620,28622],{"class":222,"line":727},[220,28619,402],{"class":264},[220,28621,347],{"class":420},[220,28623,359],{"class":264},[15,28625,27098,28626,18740,28628,27103,28630,27106,28632,27109],{},[99,28627,28486],{},[99,28629,1504],{},[99,28631,101],{},[99,28633,586],{},[23,28635,1153],{"id":1152},[15,28637,28638],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[212,28640,28641],{"className":468,"code":1321,"language":469,"meta":178,"style":178},[99,28642,28643,28657,28663,28671,28679,28691,28699,28703],{"__ignoreMap":178},[220,28644,28645,28647,28649,28651,28653,28655],{"class":222,"line":223},[220,28646,343],{"class":264},[220,28648,347],{"class":420},[220,28650,350],{"class":226},[220,28652,353],{"class":260},[220,28654,356],{"class":230},[220,28656,359],{"class":264},[220,28658,28659,28661],{"class":222,"line":179},[220,28660,364],{"class":264},[220,28662,1189],{"class":420},[220,28664,28665,28667,28669],{"class":222,"line":389},[220,28666,1194],{"class":226},[220,28668,353],{"class":260},[220,28670,1199],{"class":230},[220,28672,28673,28675,28677],{"class":222,"line":399},[220,28674,1204],{"class":226},[220,28676,353],{"class":260},[220,28678,1209],{"class":230},[220,28680,28681,28683,28685,28687,28689],{"class":222,"line":644},[220,28682,1288],{"class":226},[220,28684,353],{"class":260},[220,28686,743],{"class":264},[220,28688,1295],{"class":420},[220,28690,749],{"class":264},[220,28692,28693,28695,28697],{"class":222,"line":650},[220,28694,1302],{"class":226},[220,28696,353],{"class":260},[220,28698,1229],{"class":230},[220,28700,28701],{"class":222,"line":656},[220,28702,1234],{"class":264},[220,28704,28705,28707,28709],{"class":222,"line":673},[220,28706,402],{"class":264},[220,28708,347],{"class":420},[220,28710,359],{"class":264},[15,28712,28713,28714,28717],{},"Props also accept signals — ",[99,28715,28716],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[212,28719,28721],{"className":468,"code":28720,"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,28722,28723,28733,28743,28747,28759,28783,28787,28793,28797,28811,28840,28848,28852,28858,28866,28878,28890,28903,28925,28929,28933,28937],{"__ignoreMap":178},[220,28724,28725,28727,28729,28731],{"class":222,"line":223},[220,28726,261],{"class":260},[220,28728,2982],{"class":264},[220,28730,268],{"class":260},[220,28732,2987],{"class":230},[220,28734,28735,28737,28739,28741],{"class":222,"line":179},[220,28736,261],{"class":260},[220,28738,27215],{"class":264},[220,28740,268],{"class":260},[220,28742,319],{"class":230},[220,28744,28745],{"class":222,"line":389},[220,28746,647],{"emptyLinePlaceholder":194},[220,28748,28749,28751,28753,28755,28757],{"class":222,"line":399},[220,28750,27228],{"class":260},[220,28752,27231],{"class":260},[220,28754,11936],{"class":260},[220,28756,27236],{"class":226},[220,28758,2647],{"class":264},[220,28760,28761,28763,28765,28767,28769,28771,28773,28775,28777,28779,28781],{"class":222,"line":644},[220,28762,2705],{"class":260},[220,28764,2708],{"class":264},[220,28766,10759],{"class":420},[220,28768,1895],{"class":264},[220,28770,10764],{"class":420},[220,28772,2719],{"class":264},[220,28774,353],{"class":260},[220,28776,3018],{"class":226},[220,28778,2626],{"class":264},[220,28780,8668],{"class":420},[220,28782,2632],{"class":264},[220,28784,28785],{"class":222,"line":650},[220,28786,647],{"emptyLinePlaceholder":194},[220,28788,28789,28791],{"class":222,"line":656},[220,28790,2739],{"class":260},[220,28792,2742],{"class":264},[220,28794,28795],{"class":222,"line":673},[220,28796,10791],{"class":264},[220,28798,28799,28801,28803,28805,28807,28809],{"class":222,"line":682},[220,28800,2813],{"class":264},[220,28802,347],{"class":420},[220,28804,350],{"class":226},[220,28806,353],{"class":260},[220,28808,356],{"class":230},[220,28810,359],{"class":264},[220,28812,28813,28815,28817,28819,28821,28823,28825,28827,28829,28831,28833,28835,28837],{"class":222,"line":691},[220,28814,10804],{"class":264},[220,28816,367],{"class":420},[220,28818,370],{"class":226},[220,28820,353],{"class":260},[220,28822,27303],{"class":230},[220,28824,378],{"class":226},[220,28826,353],{"class":260},[220,28828,27310],{"class":230},[220,28830,10527],{"class":226},[220,28832,353],{"class":260},[220,28834,743],{"class":264},[220,28836,10759],{"class":226},[220,28838,28839],{"class":264},"()} \u002F>\n",[220,28841,28842,28844,28846],{"class":222,"line":696},[220,28843,10909],{"class":264},[220,28845,347],{"class":420},[220,28847,359],{"class":264},[220,28849,28850],{"class":222,"line":702},[220,28851,647],{"emptyLinePlaceholder":194},[220,28853,28854,28856],{"class":222,"line":718},[220,28855,2813],{"class":264},[220,28857,27336],{"class":346},[220,28859,28860,28862,28864],{"class":222,"line":727},[220,28861,27341],{"class":226},[220,28863,353],{"class":260},[220,28865,27346],{"class":230},[220,28867,28868,28870,28872,28874,28876],{"class":222,"line":2664},[220,28869,27351],{"class":226},[220,28871,353],{"class":260},[220,28873,743],{"class":264},[220,28875,8668],{"class":420},[220,28877,749],{"class":264},[220,28879,28880,28882,28884,28886,28888],{"class":222,"line":3522},[220,28881,27364],{"class":226},[220,28883,353],{"class":260},[220,28885,743],{"class":264},[220,28887,27371],{"class":420},[220,28889,749],{"class":264},[220,28891,28892,28894,28896,28898,28900],{"class":222,"line":9657},[220,28893,27378],{"class":226},[220,28895,353],{"class":260},[220,28897,743],{"class":264},[220,28899,10759],{"class":226},[220,28901,28902],{"class":264},"()}\n",[220,28904,28905,28908,28910,28912,28914,28916,28918,28920,28922],{"class":222,"line":9668},[220,28906,28907],{"class":226}," onInput",[220,28909,353],{"class":260},[220,28911,743],{"class":264},[220,28913,26727],{"class":3621},[220,28915,10825],{"class":260},[220,28917,10818],{"class":226},[220,28919,2626],{"class":264},[220,28921,26746],{"class":226},[220,28923,28924],{"class":264},"(e.currentTarget.value))}\n",[220,28926,28927],{"class":222,"line":9673},[220,28928,17032],{"class":264},[220,28930,28931],{"class":222,"line":10994},[220,28932,10991],{"class":264},[220,28934,28935],{"class":222,"line":10999},[220,28936,2837],{"class":264},[220,28938,28939],{"class":222,"line":12070},[220,28940,749],{"class":264},[15,28942,28943],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,28945,26763,28946,26766],{},[56,28947,1160],{"href":1159},[23,28949,28951],{"id":28950},"using-with-solidstart-ssr","Using with SolidStart \u002F SSR",[15,28953,27437,28954,27442],{},[56,28955,28957],{"href":28956},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR",[23,28959,1474],{"id":1473},[34,28961,28962,28966,28970],{},[37,28963,28964,1483],{},[56,28965,1482],{"href":1481},[37,28967,28968,1490],{},[56,28969,1489],{"href":1488},[37,28971,28972,1502],{},[56,28973,1160],{"href":1159},[1504,28975,27461],{},{"title":178,"searchDepth":179,"depth":179,"links":28977},[28978,28979,28980,28981,28982,28983,28984],{"id":26213,"depth":179,"text":26214},{"id":26863,"depth":179,"text":26864},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":28950,"depth":179,"text":28951},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart",{"title":201,"description":28985},"docs\u002Fguide\u002Fsolid\u002F1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":28992,"title":28957,"body":28993,"category":2240,"description":29564,"exclude":190,"extension":191,"forceFramework":190,"icon":28369,"meta":29565,"navigation":194,"path":28956,"seo":29566,"stem":29567,"__hash__":29568},"guide\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr.md",{"type":8,"value":28994,"toc":29555},[28995,28999,29002,29009,29015,29106,29222,29234,29241,29250,29352,29358,29364,29542,29546,29552],[11,28996,28998],{"id":28997},"ssr-with-solidstart-solid","SSR with SolidStart \u002F Solid",[15,29000,29001],{},"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,29003,29005,29008],{"id":29004},"clientonly-solidstart",[99,29006,29007],{},"clientOnly"," (SolidStart)",[15,29010,29011,29012,29014],{},"SolidStart provides a ",[99,29013,29007],{}," utility that defers a component entirely to the client. This is the recommended approach:",[212,29016,29018],{"className":409,"code":29017,"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,29019,29020,29024,29034,29038,29050,29056,29070,29090,29098,29102],{"__ignoreMap":178},[220,29021,29022],{"class":222,"line":223},[220,29023,27507],{"class":609},[220,29025,29026,29028,29030,29032],{"class":222,"line":179},[220,29027,261],{"class":260},[220,29029,27215],{"class":264},[220,29031,268],{"class":260},[220,29033,319],{"class":230},[220,29035,29036],{"class":222,"line":389},[220,29037,647],{"emptyLinePlaceholder":194},[220,29039,29040,29042,29044,29046,29048],{"class":222,"line":399},[220,29041,27228],{"class":260},[220,29043,27231],{"class":260},[220,29045,11936],{"class":260},[220,29047,27236],{"class":226},[220,29049,2647],{"class":264},[220,29051,29052,29054],{"class":222,"line":644},[220,29053,2739],{"class":260},[220,29055,2742],{"class":264},[220,29057,29058,29060,29062,29064,29066,29068],{"class":222,"line":650},[220,29059,2550],{"class":264},[220,29061,347],{"class":420},[220,29063,350],{"class":226},[220,29065,353],{"class":260},[220,29067,356],{"class":230},[220,29069,359],{"class":264},[220,29071,29072,29074,29076,29078,29080,29082,29084,29086,29088],{"class":222,"line":656},[220,29073,2813],{"class":264},[220,29075,367],{"class":420},[220,29077,370],{"class":226},[220,29079,353],{"class":260},[220,29081,375],{"class":230},[220,29083,378],{"class":226},[220,29085,353],{"class":260},[220,29087,383],{"class":230},[220,29089,386],{"class":264},[220,29091,29092,29094,29096],{"class":222,"line":673},[220,29093,2828],{"class":264},[220,29095,347],{"class":420},[220,29097,359],{"class":264},[220,29099,29100],{"class":222,"line":682},[220,29101,2837],{"class":264},[220,29103,29104],{"class":222,"line":691},[220,29105,749],{"class":264},[212,29107,29109],{"className":409,"code":29108,"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,29110,29111,29116,29128,29132,29156,29160,29172,29178,29186,29194,29206,29214,29218],{"__ignoreMap":178},[220,29112,29113],{"class":222,"line":223},[220,29114,29115],{"class":609},"\u002F\u002F routes\u002Findex.jsx\n",[220,29117,29118,29120,29123,29125],{"class":222,"line":179},[220,29119,261],{"class":260},[220,29121,29122],{"class":264}," { clientOnly } ",[220,29124,268],{"class":260},[220,29126,29127],{"class":230}," '@solidjs\u002Fstart'\n",[220,29129,29130],{"class":222,"line":389},[220,29131,647],{"emptyLinePlaceholder":194},[220,29133,29134,29136,29138,29140,29143,29145,29147,29149,29151,29153],{"class":222,"line":399},[220,29135,1735],{"class":260},[220,29137,27236],{"class":420},[220,29139,1741],{"class":260},[220,29141,29142],{"class":226}," clientOnly",[220,29144,3600],{"class":264},[220,29146,2762],{"class":260},[220,29148,27770],{"class":260},[220,29150,2626],{"class":264},[220,29152,27907],{"class":230},[220,29154,29155],{"class":264},"))\n",[220,29157,29158],{"class":222,"line":644},[220,29159,647],{"emptyLinePlaceholder":194},[220,29161,29162,29164,29166,29168,29170],{"class":222,"line":650},[220,29163,27228],{"class":260},[220,29165,27231],{"class":260},[220,29167,11936],{"class":260},[220,29169,27646],{"class":226},[220,29171,2647],{"class":264},[220,29173,29174,29176],{"class":222,"line":656},[220,29175,2739],{"class":260},[220,29177,2742],{"class":264},[220,29179,29180,29182,29184],{"class":222,"line":673},[220,29181,2550],{"class":264},[220,29183,12633],{"class":346},[220,29185,359],{"class":264},[220,29187,29188,29190,29192],{"class":222,"line":682},[220,29189,2813],{"class":264},[220,29191,27669],{"class":420},[220,29193,386],{"class":264},[220,29195,29196,29198,29200,29202,29204],{"class":222,"line":691},[220,29197,2813],{"class":264},[220,29199,11],{"class":346},[220,29201,12921],{"class":264},[220,29203,11],{"class":346},[220,29205,359],{"class":264},[220,29207,29208,29210,29212],{"class":222,"line":696},[220,29209,2828],{"class":264},[220,29211,12633],{"class":346},[220,29213,359],{"class":264},[220,29215,29216],{"class":222,"line":702},[220,29217,2837],{"class":264},[220,29219,29220],{"class":222,"line":718},[220,29221,749],{"class":264},[15,29223,29224,29226,29227,29230,29231,29233],{},[99,29225,29007],{}," wraps the component in a ",[99,29228,29229],{},"Suspense"," boundary and only renders it in the browser — it returns ",[99,29232,16817],{}," during SSR.",[23,29235,29237,29240],{"id":29236},"isserver-guard",[99,29238,29239],{},"isServer"," guard",[15,29242,29243,29244,29246,29247,1554],{},"For finer control, check ",[99,29245,29239],{}," from ",[99,29248,29249],{},"solid-js\u002Fweb",[212,29251,29253],{"className":409,"code":29252,"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,29254,29255,29267,29277,29281,29293,29304,29308,29314,29328,29336,29344,29348],{"__ignoreMap":178},[220,29256,29257,29259,29262,29264],{"class":222,"line":223},[220,29258,261],{"class":260},[220,29260,29261],{"class":264}," { isServer } ",[220,29263,268],{"class":260},[220,29265,29266],{"class":230}," 'solid-js\u002Fweb'\n",[220,29268,29269,29271,29273,29275],{"class":222,"line":179},[220,29270,261],{"class":260},[220,29272,27215],{"class":264},[220,29274,268],{"class":260},[220,29276,319],{"class":230},[220,29278,29279],{"class":222,"line":389},[220,29280,647],{"emptyLinePlaceholder":194},[220,29282,29283,29285,29287,29289,29291],{"class":222,"line":399},[220,29284,27228],{"class":260},[220,29286,27231],{"class":260},[220,29288,11936],{"class":260},[220,29290,27236],{"class":226},[220,29292,2647],{"class":264},[220,29294,29295,29297,29300,29302],{"class":222,"line":644},[220,29296,28293],{"class":260},[220,29298,29299],{"class":264}," (isServer) ",[220,29301,28304],{"class":260},[220,29303,28307],{"class":420},[220,29305,29306],{"class":222,"line":650},[220,29307,647],{"emptyLinePlaceholder":194},[220,29309,29310,29312],{"class":222,"line":656},[220,29311,2739],{"class":260},[220,29313,2742],{"class":264},[220,29315,29316,29318,29320,29322,29324,29326],{"class":222,"line":673},[220,29317,2550],{"class":264},[220,29319,347],{"class":420},[220,29321,350],{"class":226},[220,29323,353],{"class":260},[220,29325,356],{"class":230},[220,29327,359],{"class":264},[220,29329,29330,29332,29334],{"class":222,"line":682},[220,29331,2813],{"class":264},[220,29333,367],{"class":420},[220,29335,386],{"class":264},[220,29337,29338,29340,29342],{"class":222,"line":691},[220,29339,2828],{"class":264},[220,29341,347],{"class":420},[220,29343,359],{"class":264},[220,29345,29346],{"class":222,"line":696},[220,29347,2837],{"class":264},[220,29349,29350],{"class":222,"line":702},[220,29351,749],{"class":264},[23,29353,29355,29240],{"id":29354},"onmount-guard",[99,29356,29357],{},"onMount",[15,29359,29360,29361,29363],{},"Alternatively, use ",[99,29362,29357],{}," with a signal to defer rendering until the component is mounted in the browser:",[212,29365,29367],{"className":409,"code":29366,"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,29368,29369,29380,29390,29394,29406,29430,29434,29451,29455,29461,29475,29489,29503,29512,29521,29526,29534,29538],{"__ignoreMap":178},[220,29370,29371,29373,29376,29378],{"class":222,"line":223},[220,29372,261],{"class":260},[220,29374,29375],{"class":264}," { createSignal, onMount } ",[220,29377,268],{"class":260},[220,29379,2987],{"class":230},[220,29381,29382,29384,29386,29388],{"class":222,"line":179},[220,29383,261],{"class":260},[220,29385,27215],{"class":264},[220,29387,268],{"class":260},[220,29389,319],{"class":230},[220,29391,29392],{"class":222,"line":389},[220,29393,647],{"emptyLinePlaceholder":194},[220,29395,29396,29398,29400,29402,29404],{"class":222,"line":399},[220,29397,27228],{"class":260},[220,29399,27231],{"class":260},[220,29401,11936],{"class":260},[220,29403,27236],{"class":226},[220,29405,2647],{"class":264},[220,29407,29408,29410,29412,29414,29416,29418,29420,29422,29424,29426,29428],{"class":222,"line":644},[220,29409,2705],{"class":260},[220,29411,2708],{"class":264},[220,29413,28238],{"class":420},[220,29415,1895],{"class":264},[220,29417,28243],{"class":420},[220,29419,2719],{"class":264},[220,29421,353],{"class":260},[220,29423,3018],{"class":226},[220,29425,2626],{"class":264},[220,29427,2629],{"class":420},[220,29429,2632],{"class":264},[220,29431,29432],{"class":222,"line":650},[220,29433,647],{"emptyLinePlaceholder":194},[220,29435,29436,29438,29440,29442,29445,29447,29449],{"class":222,"line":656},[220,29437,3884],{"class":226},[220,29439,3600],{"class":264},[220,29441,2762],{"class":260},[220,29443,29444],{"class":226}," setMounted",[220,29446,2626],{"class":264},[220,29448,2332],{"class":420},[220,29450,29155],{"class":264},[220,29452,29453],{"class":222,"line":673},[220,29454,647],{"emptyLinePlaceholder":194},[220,29456,29457,29459],{"class":222,"line":682},[220,29458,2739],{"class":260},[220,29460,2742],{"class":264},[220,29462,29463,29465,29467,29469,29471,29473],{"class":222,"line":691},[220,29464,2550],{"class":264},[220,29466,3398],{"class":346},[220,29468,350],{"class":226},[220,29470,353],{"class":260},[220,29472,356],{"class":230},[220,29474,359],{"class":264},[220,29476,29477,29480,29482,29484,29487],{"class":222,"line":696},[220,29478,29479],{"class":264}," {",[220,29481,28238],{"class":226},[220,29483,3072],{"class":264},[220,29485,29486],{"class":260},"&&",[220,29488,2742],{"class":264},[220,29490,29491,29493,29495,29497,29499,29501],{"class":222,"line":702},[220,29492,10804],{"class":264},[220,29494,347],{"class":420},[220,29496,350],{"class":226},[220,29498,353],{"class":260},[220,29500,356],{"class":230},[220,29502,359],{"class":264},[220,29504,29505,29508,29510],{"class":222,"line":718},[220,29506,29507],{"class":264}," \u003C",[220,29509,367],{"class":420},[220,29511,386],{"class":264},[220,29513,29514,29517,29519],{"class":222,"line":727},[220,29515,29516],{"class":264}," \u003C\u002F",[220,29518,347],{"class":420},[220,29520,359],{"class":264},[220,29522,29523],{"class":222,"line":2664},[220,29524,29525],{"class":264}," )}\n",[220,29527,29528,29530,29532],{"class":222,"line":3522},[220,29529,2828],{"class":264},[220,29531,3398],{"class":346},[220,29533,359],{"class":264},[220,29535,29536],{"class":222,"line":9657},[220,29537,2837],{"class":264},[220,29539,29540],{"class":222,"line":9668},[220,29541,749],{"class":264},[23,29543,29545],{"id":29544},"solid-without-solidstart","Solid (without SolidStart)",[15,29547,29548,29549,29551],{},"In a Solid app without SolidStart, the ",[99,29550,29357],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1504,29553,29554],{},"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":29556},[29557,29559,29561,29563],{"id":29004,"depth":179,"text":29558},"clientOnly (SolidStart)",{"id":29236,"depth":179,"text":29560},"isServer guard",{"id":29354,"depth":179,"text":29562},"onMount guard",{"id":29544,"depth":179,"text":29545},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":28957,"description":29564},"docs\u002Fguide\u002Fsolid\u002Fssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":29570,"title":201,"body":29571,"category":188,"description":30105,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":30106,"navigation":194,"path":30107,"seo":30108,"stem":30109,"__hash__":30110},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002F1.quickstart.md",{"type":8,"value":29572,"toc":30096},[29573,29577,29579,29591,29593,29607,29609,29611,29665,29667,29673,29675,29685,29801,29811,29813,29820,29891,29901,30059,30063,30067,30071,30077,30079,30093],[11,29574,29576],{"id":29575},"quickstart-svelte","Quickstart (Svelte)",[23,29578,26214],{"id":26213},[212,29580,29581],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,29582,29583],{"__ignoreMap":178},[220,29584,29585,29587,29589],{"class":222,"line":223},[220,29586,227],{"class":226},[220,29588,231],{"class":230},[220,29590,234],{"class":230},[23,29592,26864],{"id":26863},[212,29594,29595],{"className":251,"code":290,"language":253,"meta":178,"style":178},[99,29596,29597],{"__ignoreMap":178},[220,29598,29599,29601,29603,29605],{"class":222,"line":223},[220,29600,261],{"class":260},[220,29602,265],{"class":264},[220,29604,268],{"class":260},[220,29606,303],{"class":230},[23,29608,323],{"id":322},[15,29610,26883],{},[212,29612,29613],{"className":2844,"code":335,"language":2846,"meta":178,"style":178},[99,29614,29615,29629,29649,29657],{"__ignoreMap":178},[220,29616,29617,29619,29621,29623,29625,29627],{"class":222,"line":223},[220,29618,343],{"class":264},[220,29620,347],{"class":420},[220,29622,350],{"class":226},[220,29624,353],{"class":264},[220,29626,356],{"class":230},[220,29628,359],{"class":264},[220,29630,29631,29633,29635,29637,29639,29641,29643,29645,29647],{"class":222,"line":179},[220,29632,364],{"class":264},[220,29634,367],{"class":420},[220,29636,370],{"class":226},[220,29638,353],{"class":264},[220,29640,375],{"class":230},[220,29642,378],{"class":226},[220,29644,353],{"class":264},[220,29646,383],{"class":230},[220,29648,386],{"class":264},[220,29650,29651,29653,29655],{"class":222,"line":389},[220,29652,364],{"class":264},[220,29654,394],{"class":420},[220,29656,386],{"class":264},[220,29658,29659,29661,29663],{"class":222,"line":399},[220,29660,402],{"class":264},[220,29662,347],{"class":420},[220,29664,359],{"class":264},[19,29666],{":preset":578},[15,29668,29669,583,29671,26946],{},[99,29670,101],{},[99,29672,586],{},[23,29674,594],{"id":593},[15,29676,1839,29677,26953,29679,18740,29681,26959,29683,590],{},[99,29678,586],{},[99,29680,28486],{},[99,29682,1504],{},[99,29684,101],{},[212,29686,29688],{"className":2844,"code":29687,"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,29689,29690,29694,29708,29716,29724,29728,29732,29746,29754,29762,29766,29771,29785,29793],{"__ignoreMap":178},[220,29691,29692],{"class":222,"line":223},[220,29693,610],{"class":609},[220,29695,29696,29698,29700,29702,29704,29706],{"class":222,"line":179},[220,29697,343],{"class":264},[220,29699,347],{"class":420},[220,29701,350],{"class":226},[220,29703,353],{"class":264},[220,29705,623],{"class":230},[220,29707,359],{"class":264},[220,29709,29710,29712,29714],{"class":222,"line":389},[220,29711,364],{"class":264},[220,29713,367],{"class":420},[220,29715,386],{"class":264},[220,29717,29718,29720,29722],{"class":222,"line":399},[220,29719,402],{"class":264},[220,29721,347],{"class":420},[220,29723,359],{"class":264},[220,29725,29726],{"class":222,"line":644},[220,29727,647],{"emptyLinePlaceholder":194},[220,29729,29730],{"class":222,"line":650},[220,29731,653],{"class":609},[220,29733,29734,29736,29738,29740,29742,29744],{"class":222,"line":656},[220,29735,343],{"class":264},[220,29737,347],{"class":420},[220,29739,663],{"class":226},[220,29741,353],{"class":264},[220,29743,668],{"class":230},[220,29745,359],{"class":264},[220,29747,29748,29750,29752],{"class":222,"line":673},[220,29749,364],{"class":264},[220,29751,367],{"class":420},[220,29753,386],{"class":264},[220,29755,29756,29758,29760],{"class":222,"line":682},[220,29757,402],{"class":264},[220,29759,347],{"class":420},[220,29761,359],{"class":264},[220,29763,29764],{"class":222,"line":691},[220,29765,647],{"emptyLinePlaceholder":194},[220,29767,29768],{"class":222,"line":696},[220,29769,29770],{"class":609},"\u003C!-- Fluid with aspect ratio -->\n",[220,29772,29773,29775,29777,29779,29781,29783],{"class":222,"line":702},[220,29774,343],{"class":264},[220,29776,347],{"class":420},[220,29778,350],{"class":226},[220,29780,353],{"class":264},[220,29782,713],{"class":230},[220,29784,359],{"class":264},[220,29786,29787,29789,29791],{"class":222,"line":718},[220,29788,364],{"class":264},[220,29790,367],{"class":420},[220,29792,386],{"class":264},[220,29794,29795,29797,29799],{"class":222,"line":727},[220,29796,402],{"class":264},[220,29798,347],{"class":420},[220,29800,359],{"class":264},[15,29802,27098,29803,18740,29805,27103,29807,27106,29809,27109],{},[99,29804,28486],{},[99,29806,1504],{},[99,29808,101],{},[99,29810,586],{},[23,29812,1153],{"id":1152},[15,29814,29815,29816,29819],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[99,29817,29818],{},"{expression}"," syntax:",[212,29821,29822],{"className":2844,"code":1321,"language":2846,"meta":178,"style":178},[99,29823,29824,29838,29844,29852,29860,29871,29879,29883],{"__ignoreMap":178},[220,29825,29826,29828,29830,29832,29834,29836],{"class":222,"line":223},[220,29827,343],{"class":264},[220,29829,347],{"class":420},[220,29831,350],{"class":226},[220,29833,353],{"class":264},[220,29835,356],{"class":230},[220,29837,359],{"class":264},[220,29839,29840,29842],{"class":222,"line":179},[220,29841,364],{"class":264},[220,29843,1189],{"class":420},[220,29845,29846,29848,29850],{"class":222,"line":389},[220,29847,1194],{"class":226},[220,29849,353],{"class":264},[220,29851,1199],{"class":230},[220,29853,29854,29856,29858],{"class":222,"line":399},[220,29855,1204],{"class":226},[220,29857,353],{"class":264},[220,29859,1209],{"class":230},[220,29861,29862,29864,29867,29869],{"class":222,"line":644},[220,29863,1288],{"class":226},[220,29865,29866],{"class":264},"={",[220,29868,1295],{"class":420},[220,29870,749],{"class":264},[220,29872,29873,29875,29877],{"class":222,"line":650},[220,29874,1302],{"class":226},[220,29876,353],{"class":264},[220,29878,1229],{"class":230},[220,29880,29881],{"class":222,"line":656},[220,29882,1234],{"class":264},[220,29884,29885,29887,29889],{"class":222,"line":673},[220,29886,402],{"class":264},[220,29888,347],{"class":420},[220,29890,359],{"class":264},[15,29892,29893,29894,29897,29898,29900],{},"Props also accept reactive state — Svelte's ",[99,29895,29896],{},"$state"," rune (or ",[99,29899,16546],{}," in Svelte 4) works exactly as you'd expect:",[212,29902,29904],{"className":2844,"code":29903,"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,29905,29906,29914,29924,29928,29946,29954,29958,29972,30000,30008,30012],{"__ignoreMap":178},[220,29907,29908,29910,29912],{"class":222,"line":223},[220,29909,343],{"class":264},[220,29911,2590],{"class":346},[220,29913,359],{"class":264},[220,29915,29916,29918,29920,29922],{"class":222,"line":179},[220,29917,12950],{"class":260},[220,29919,27215],{"class":264},[220,29921,268],{"class":260},[220,29923,303],{"class":230},[220,29925,29926],{"class":222,"line":389},[220,29927,647],{"emptyLinePlaceholder":194},[220,29929,29930,29932,29934,29936,29938,29940,29942,29944],{"class":222,"line":399},[220,29931,2861],{"class":260},[220,29933,11070],{"class":264},[220,29935,353],{"class":260},[220,29937,2869],{"class":264},[220,29939,2872],{"class":226},[220,29941,2626],{"class":264},[220,29943,8668],{"class":420},[220,29945,2632],{"class":264},[220,29947,29948,29950,29952],{"class":222,"line":644},[220,29949,402],{"class":264},[220,29951,2590],{"class":346},[220,29953,359],{"class":264},[220,29955,29956],{"class":222,"line":650},[220,29957,647],{"emptyLinePlaceholder":194},[220,29959,29960,29962,29964,29966,29968,29970],{"class":222,"line":656},[220,29961,343],{"class":264},[220,29963,347],{"class":420},[220,29965,350],{"class":226},[220,29967,353],{"class":264},[220,29969,356],{"class":230},[220,29971,359],{"class":264},[220,29973,29974,29976,29978,29980,29982,29984,29986,29988,29990,29993,29995,29998],{"class":222,"line":673},[220,29975,364],{"class":264},[220,29977,367],{"class":420},[220,29979,370],{"class":226},[220,29981,353],{"class":264},[220,29983,27303],{"class":230},[220,29985,378],{"class":226},[220,29987,353],{"class":264},[220,29989,27310],{"class":230},[220,29991,29992],{"class":226}," {",[220,29994,10759],{"class":264},[220,29996,29997],{"class":226},"}",[220,29999,386],{"class":264},[220,30001,30002,30004,30006],{"class":222,"line":682},[220,30003,402],{"class":264},[220,30005,347],{"class":420},[220,30007,359],{"class":264},[220,30009,30010],{"class":222,"line":691},[220,30011,647],{"emptyLinePlaceholder":194},[220,30013,30014,30016,30019,30021,30023,30026,30029,30031,30033,30035,30037,30040,30042,30044,30046,30048,30051,30053,30056],{"class":222,"line":696},[220,30015,343],{"class":264},[220,30017,30018],{"class":346},"input",[220,30020,12938],{"class":226},[220,30022,353],{"class":264},[220,30024,30025],{"class":230},"\"range\"",[220,30027,30028],{"class":226}," min",[220,30030,353],{"class":264},[220,30032,11683],{"class":230},[220,30034,8668],{"class":420},[220,30036,11683],{"class":230},[220,30038,30039],{"class":226}," max",[220,30041,353],{"class":264},[220,30043,11683],{"class":230},[220,30045,27371],{"class":420},[220,30047,11683],{"class":230},[220,30049,30050],{"class":260}," bind",[220,30052,1554],{"class":264},[220,30054,30055],{"class":226},"value",[220,30057,30058],{"class":264},"={angle} \u002F>\n",[15,30060,26756,30061,27426],{},[99,30062,10759],{},[15,30064,26763,30065,26766],{},[56,30066,1160],{"href":1159},[23,30068,30070],{"id":30069},"using-with-sveltekit-ssr","Using with SvelteKit \u002F SSR",[15,30072,27437,30073,27442],{},[56,30074,30076],{"href":30075},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR",[23,30078,1474],{"id":1473},[34,30080,30081,30085,30089],{},[37,30082,30083,1483],{},[56,30084,1482],{"href":1481},[37,30086,30087,1490],{},[56,30088,1489],{"href":1488},[37,30090,30091,1502],{},[56,30092,1160],{"href":1159},[1504,30094,30095],{},"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":30097},[30098,30099,30100,30101,30102,30103,30104],{"id":26213,"depth":179,"text":26214},{"id":26863,"depth":179,"text":26864},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":30069,"depth":179,"text":30070},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart",{"title":201,"description":30105},"docs\u002Fguide\u002Fsvelte\u002F1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":30112,"title":30076,"body":30113,"category":2240,"description":30693,"exclude":190,"extension":191,"forceFramework":190,"icon":28369,"meta":30694,"navigation":194,"path":30075,"seo":30695,"stem":30696,"__hash__":30697},"guide\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr.md",{"type":8,"value":30114,"toc":30685},[30115,30119,30122,30126,30132,30135,30200,30203,30209,30214,30346,30353,30359,30482,30485,30489,30492,30682],[11,30116,30118],{"id":30117},"ssr-with-sveltekit-svelte","SSR with SvelteKit \u002F Svelte",[15,30120,30121],{},"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,30123,30125],{"id":30124},"the-default-behavior","The default behavior",[15,30127,30128,30129,30131],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[99,30130,101],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,30133,30134],{},"In many cases, you don't need any special handling:",[212,30136,30138],{"className":2844,"code":30137,"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,30139,30140,30148,30158,30166,30170,30184,30192],{"__ignoreMap":178},[220,30141,30142,30144,30146],{"class":222,"line":223},[220,30143,343],{"class":264},[220,30145,2590],{"class":346},[220,30147,359],{"class":264},[220,30149,30150,30152,30154,30156],{"class":222,"line":179},[220,30151,12950],{"class":260},[220,30153,27215],{"class":264},[220,30155,268],{"class":260},[220,30157,303],{"class":230},[220,30159,30160,30162,30164],{"class":222,"line":389},[220,30161,402],{"class":264},[220,30163,2590],{"class":346},[220,30165,359],{"class":264},[220,30167,30168],{"class":222,"line":399},[220,30169,647],{"emptyLinePlaceholder":194},[220,30171,30172,30174,30176,30178,30180,30182],{"class":222,"line":644},[220,30173,343],{"class":264},[220,30175,347],{"class":420},[220,30177,350],{"class":226},[220,30179,353],{"class":264},[220,30181,356],{"class":230},[220,30183,359],{"class":264},[220,30185,30186,30188,30190],{"class":222,"line":650},[220,30187,364],{"class":264},[220,30189,367],{"class":420},[220,30191,386],{"class":264},[220,30193,30194,30196,30198],{"class":222,"line":656},[220,30195,402],{"class":264},[220,30197,347],{"class":420},[220,30199,359],{"class":264},[15,30201,30202],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,30204,30206,30208],{"id":30205},"onmount-for-browser-only-code",[99,30207,29357],{}," for browser-only code",[15,30210,30211,30212,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,30213,29357],{},[212,30215,30217],{"className":2844,"code":30216,"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,30218,30219,30227,30239,30249,30253,30260,30264,30274,30279,30290,30294,30302,30306,30330,30338],{"__ignoreMap":178},[220,30220,30221,30223,30225],{"class":222,"line":223},[220,30222,343],{"class":264},[220,30224,2590],{"class":346},[220,30226,359],{"class":264},[220,30228,30229,30231,30234,30236],{"class":222,"line":179},[220,30230,12950],{"class":260},[220,30232,30233],{"class":264}," { onMount } ",[220,30235,268],{"class":260},[220,30237,30238],{"class":230}," 'svelte'\n",[220,30240,30241,30243,30245,30247],{"class":222,"line":389},[220,30242,12950],{"class":260},[220,30244,27215],{"class":264},[220,30246,268],{"class":260},[220,30248,303],{"class":230},[220,30250,30251],{"class":222,"line":399},[220,30252,647],{"emptyLinePlaceholder":194},[220,30254,30255,30257],{"class":222,"line":644},[220,30256,2861],{"class":260},[220,30258,30259],{"class":264}," shaderEl\n",[220,30261,30262],{"class":222,"line":650},[220,30263,647],{"emptyLinePlaceholder":194},[220,30265,30266,30268,30270,30272],{"class":222,"line":656},[220,30267,3884],{"class":226},[220,30269,3600],{"class":264},[220,30271,2762],{"class":260},[220,30273,3241],{"class":264},[220,30275,30276],{"class":222,"line":673},[220,30277,30278],{"class":609}," \u002F\u002F Safe to interact with the DOM and canvas here\n",[220,30280,30281,30284,30287],{"class":222,"line":682},[220,30282,30283],{"class":264}," console.",[220,30285,30286],{"class":226},"log",[220,30288,30289],{"class":264},"(shaderEl)\n",[220,30291,30292],{"class":222,"line":691},[220,30293,12997],{"class":264},[220,30295,30296,30298,30300],{"class":222,"line":696},[220,30297,402],{"class":264},[220,30299,2590],{"class":346},[220,30301,359],{"class":264},[220,30303,30304],{"class":222,"line":702},[220,30305,647],{"emptyLinePlaceholder":194},[220,30307,30308,30310,30312,30314,30316,30319,30322,30324,30326,30328],{"class":222,"line":718},[220,30309,343],{"class":264},[220,30311,347],{"class":420},[220,30313,30050],{"class":260},[220,30315,1554],{"class":264},[220,30317,30318],{"class":420},"this",[220,30320,30321],{"class":264},"={shaderEl} ",[220,30323,28486],{"class":226},[220,30325,353],{"class":264},[220,30327,356],{"class":230},[220,30329,359],{"class":264},[220,30331,30332,30334,30336],{"class":222,"line":727},[220,30333,364],{"class":264},[220,30335,367],{"class":420},[220,30337,386],{"class":264},[220,30339,30340,30342,30344],{"class":222,"line":2664},[220,30341,402],{"class":264},[220,30343,347],{"class":420},[220,30345,359],{"class":264},[23,30347,30349,30350],{"id":30348},"conditional-rendering-with-browser","Conditional rendering with ",[99,30351,30352],{},"browser",[15,30354,30355,30356,1554],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[99,30357,30358],{},"$app\u002Fenvironment",[212,30360,30362],{"className":2844,"code":30361,"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,30363,30364,30372,30384,30394,30402,30406,30415,30429,30437,30445,30453,30458,30473],{"__ignoreMap":178},[220,30365,30366,30368,30370],{"class":222,"line":223},[220,30367,343],{"class":264},[220,30369,2590],{"class":346},[220,30371,359],{"class":264},[220,30373,30374,30376,30379,30381],{"class":222,"line":179},[220,30375,12950],{"class":260},[220,30377,30378],{"class":264}," { browser } ",[220,30380,268],{"class":260},[220,30382,30383],{"class":230}," '$app\u002Fenvironment'\n",[220,30385,30386,30388,30390,30392],{"class":222,"line":389},[220,30387,12950],{"class":260},[220,30389,27215],{"class":264},[220,30391,268],{"class":260},[220,30393,303],{"class":230},[220,30395,30396,30398,30400],{"class":222,"line":399},[220,30397,402],{"class":264},[220,30399,2590],{"class":346},[220,30401,359],{"class":264},[220,30403,30404],{"class":222,"line":644},[220,30405,647],{"emptyLinePlaceholder":194},[220,30407,30408,30410,30412],{"class":222,"line":650},[220,30409,3751],{"class":264},[220,30411,3754],{"class":260},[220,30413,30414],{"class":264}," browser}\n",[220,30416,30417,30419,30421,30423,30425,30427],{"class":222,"line":656},[220,30418,364],{"class":264},[220,30420,347],{"class":420},[220,30422,350],{"class":226},[220,30424,353],{"class":264},[220,30426,356],{"class":230},[220,30428,359],{"class":264},[220,30430,30431,30433,30435],{"class":222,"line":673},[220,30432,2550],{"class":264},[220,30434,367],{"class":420},[220,30436,386],{"class":264},[220,30438,30439,30441,30443],{"class":222,"line":682},[220,30440,2567],{"class":264},[220,30442,347],{"class":420},[220,30444,359],{"class":264},[220,30446,30447,30449,30451],{"class":222,"line":691},[220,30448,3784],{"class":264},[220,30450,3787],{"class":260},[220,30452,749],{"class":264},[220,30454,30455],{"class":222,"line":696},[220,30456,30457],{"class":609}," \u003C!-- Optional server-rendered placeholder -->\n",[220,30459,30460,30462,30464,30466,30468,30471],{"class":222,"line":702},[220,30461,364],{"class":264},[220,30463,3398],{"class":346},[220,30465,350],{"class":226},[220,30467,353],{"class":264},[220,30469,30470],{"class":230},"\"w-full h-64 bg-gray-900 rounded\"",[220,30472,386],{"class":264},[220,30474,30475,30478,30480],{"class":222,"line":718},[220,30476,30477],{"class":264},"{\u002F",[220,30479,3754],{"class":260},[220,30481,749],{"class":264},[15,30483,30484],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,30486,30488],{"id":30487},"lazy-loading","Lazy loading",[15,30490,30491],{},"To defer loading the Shaders bundle entirely until client-side:",[212,30493,30495],{"className":2844,"code":30494,"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,30496,30497,30505,30515,30519,30526,30533,30537,30551,30578,30588,30598,30602,30610,30614,30623,30647,30662,30674],{"__ignoreMap":178},[220,30498,30499,30501,30503],{"class":222,"line":223},[220,30500,343],{"class":264},[220,30502,2590],{"class":346},[220,30504,359],{"class":264},[220,30506,30507,30509,30511,30513],{"class":222,"line":179},[220,30508,12950],{"class":260},[220,30510,30233],{"class":264},[220,30512,268],{"class":260},[220,30514,30238],{"class":230},[220,30516,30517],{"class":222,"line":389},[220,30518,647],{"emptyLinePlaceholder":194},[220,30520,30521,30523],{"class":222,"line":399},[220,30522,2861],{"class":260},[220,30524,30525],{"class":264}," ShaderComponent\n",[220,30527,30528,30530],{"class":222,"line":644},[220,30529,2861],{"class":260},[220,30531,30532],{"class":264}," LinearGradientComponent\n",[220,30534,30535],{"class":222,"line":650},[220,30536,647],{"emptyLinePlaceholder":194},[220,30538,30539,30541,30543,30545,30547,30549],{"class":222,"line":656},[220,30540,3884],{"class":226},[220,30542,2626],{"class":264},[220,30544,3489],{"class":260},[220,30546,3492],{"class":264},[220,30548,2762],{"class":260},[220,30550,3241],{"class":264},[220,30552,30553,30555,30557,30559,30561,30563,30565,30567,30569,30571,30573,30576],{"class":222,"line":673},[220,30554,16838],{"class":260},[220,30556,4018],{"class":264},[220,30558,347],{"class":420},[220,30560,1895],{"class":264},[220,30562,367],{"class":420},[220,30564,4023],{"class":264},[220,30566,353],{"class":260},[220,30568,1744],{"class":260},[220,30570,27770],{"class":260},[220,30572,2626],{"class":264},[220,30574,30575],{"class":230},"'shaders\u002Fsvelte'",[220,30577,2632],{"class":264},[220,30579,30580,30583,30585],{"class":222,"line":682},[220,30581,30582],{"class":264}," ShaderComponent ",[220,30584,353],{"class":260},[220,30586,30587],{"class":264}," Shader\n",[220,30589,30590,30593,30595],{"class":222,"line":691},[220,30591,30592],{"class":264}," LinearGradientComponent ",[220,30594,353],{"class":260},[220,30596,30597],{"class":264}," LinearGradient\n",[220,30599,30600],{"class":222,"line":696},[220,30601,12997],{"class":264},[220,30603,30604,30606,30608],{"class":222,"line":702},[220,30605,402],{"class":264},[220,30607,2590],{"class":346},[220,30609,359],{"class":264},[220,30611,30612],{"class":222,"line":718},[220,30613,647],{"emptyLinePlaceholder":194},[220,30615,30616,30618,30620],{"class":222,"line":727},[220,30617,3751],{"class":264},[220,30619,3754],{"class":260},[220,30621,30622],{"class":264}," ShaderComponent}\n",[220,30624,30625,30627,30629,30631,30634,30636,30639,30641,30643,30645],{"class":222,"line":2664},[220,30626,364],{"class":264},[220,30628,2846],{"class":260},[220,30630,1554],{"class":264},[220,30632,30633],{"class":346},"component",[220,30635,5340],{"class":226},[220,30637,30638],{"class":264},"={ShaderComponent} ",[220,30640,28486],{"class":226},[220,30642,353],{"class":264},[220,30644,356],{"class":230},[220,30646,359],{"class":264},[220,30648,30649,30651,30653,30655,30657,30659],{"class":222,"line":3522},[220,30650,2550],{"class":264},[220,30652,2846],{"class":260},[220,30654,1554],{"class":264},[220,30656,30633],{"class":346},[220,30658,5340],{"class":226},[220,30660,30661],{"class":264},"={LinearGradientComponent} \u002F>\n",[220,30663,30664,30666,30668,30670,30672],{"class":222,"line":9657},[220,30665,2567],{"class":264},[220,30667,2846],{"class":260},[220,30669,1554],{"class":264},[220,30671,30633],{"class":346},[220,30673,359],{"class":264},[220,30675,30676,30678,30680],{"class":222,"line":9668},[220,30677,30477],{"class":264},[220,30679,3754],{"class":260},[220,30681,749],{"class":264},[1504,30683,30684],{},"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":30686},[30687,30688,30690,30692],{"id":30124,"depth":179,"text":30125},{"id":30205,"depth":179,"text":30689},"onMount for browser-only code",{"id":30348,"depth":179,"text":30691},"Conditional rendering with browser",{"id":30487,"depth":179,"text":30488},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":30076,"description":30693},"docs\u002Fguide\u002Fsvelte\u002Fssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":30699,"title":201,"body":30700,"category":188,"description":31214,"exclude":190,"extension":191,"forceFramework":190,"icon":1519,"meta":31215,"navigation":194,"path":31216,"seo":31217,"stem":31218,"__hash__":31219},"guide\u002Fdocs\u002Fguide\u002Fvue\u002F1.quickstart.md",{"type":8,"value":30701,"toc":31205},[30702,30706,30708,30720,30722,30736,30738,30740,30794,30796,30802,30804,30811,30925,30932,30934,30940,31009,31012,31182,31186,31190,31194,31200,31202],[11,30703,30705],{"id":30704},"quickstart-vue","Quickstart (Vue)",[23,30707,26214],{"id":26213},[212,30709,30710],{"className":214,"code":215,"language":216,"meta":178,"style":178},[99,30711,30712],{"__ignoreMap":178},[220,30713,30714,30716,30718],{"class":222,"line":223},[220,30715,227],{"class":226},[220,30717,231],{"class":230},[220,30719,234],{"class":230},[23,30721,26864],{"id":26863},[212,30723,30724],{"className":251,"code":252,"language":253,"meta":178,"style":178},[99,30725,30726],{"__ignoreMap":178},[220,30727,30728,30730,30732,30734],{"class":222,"line":223},[220,30729,261],{"class":260},[220,30731,265],{"class":264},[220,30733,268],{"class":260},[220,30735,271],{"class":230},[23,30737,323],{"id":322},[15,30739,26883],{},[212,30741,30742],{"className":334,"code":335,"language":336,"meta":178,"style":178},[99,30743,30744,30758,30778,30786],{"__ignoreMap":178},[220,30745,30746,30748,30750,30752,30754,30756],{"class":222,"line":223},[220,30747,343],{"class":264},[220,30749,347],{"class":346},[220,30751,350],{"class":226},[220,30753,353],{"class":264},[220,30755,356],{"class":230},[220,30757,359],{"class":264},[220,30759,30760,30762,30764,30766,30768,30770,30772,30774,30776],{"class":222,"line":179},[220,30761,364],{"class":264},[220,30763,367],{"class":346},[220,30765,370],{"class":226},[220,30767,353],{"class":264},[220,30769,375],{"class":230},[220,30771,378],{"class":226},[220,30773,353],{"class":264},[220,30775,383],{"class":230},[220,30777,386],{"class":264},[220,30779,30780,30782,30784],{"class":222,"line":389},[220,30781,364],{"class":264},[220,30783,394],{"class":346},[220,30785,386],{"class":264},[220,30787,30788,30790,30792],{"class":222,"line":399},[220,30789,402],{"class":264},[220,30791,347],{"class":346},[220,30793,359],{"class":264},[19,30795],{":preset":578},[15,30797,30798,583,30800,26946],{},[99,30799,101],{},[99,30801,586],{},[23,30803,594],{"id":593},[15,30805,1839,30806,30808,30809,590],{},[99,30807,586],{}," has no intrinsic size. The class or style you apply to ",[99,30810,101],{},[212,30812,30813],{"className":334,"code":29687,"language":336,"meta":178,"style":178},[99,30814,30815,30819,30833,30841,30849,30853,30857,30871,30879,30887,30891,30895,30909,30917],{"__ignoreMap":178},[220,30816,30817],{"class":222,"line":223},[220,30818,610],{"class":609},[220,30820,30821,30823,30825,30827,30829,30831],{"class":222,"line":179},[220,30822,343],{"class":264},[220,30824,347],{"class":346},[220,30826,350],{"class":226},[220,30828,353],{"class":264},[220,30830,623],{"class":230},[220,30832,359],{"class":264},[220,30834,30835,30837,30839],{"class":222,"line":389},[220,30836,364],{"class":264},[220,30838,367],{"class":346},[220,30840,386],{"class":264},[220,30842,30843,30845,30847],{"class":222,"line":399},[220,30844,402],{"class":264},[220,30846,347],{"class":346},[220,30848,359],{"class":264},[220,30850,30851],{"class":222,"line":644},[220,30852,647],{"emptyLinePlaceholder":194},[220,30854,30855],{"class":222,"line":650},[220,30856,653],{"class":609},[220,30858,30859,30861,30863,30865,30867,30869],{"class":222,"line":656},[220,30860,343],{"class":264},[220,30862,347],{"class":346},[220,30864,663],{"class":226},[220,30866,353],{"class":264},[220,30868,668],{"class":230},[220,30870,359],{"class":264},[220,30872,30873,30875,30877],{"class":222,"line":673},[220,30874,364],{"class":264},[220,30876,367],{"class":346},[220,30878,386],{"class":264},[220,30880,30881,30883,30885],{"class":222,"line":682},[220,30882,402],{"class":264},[220,30884,347],{"class":346},[220,30886,359],{"class":264},[220,30888,30889],{"class":222,"line":691},[220,30890,647],{"emptyLinePlaceholder":194},[220,30892,30893],{"class":222,"line":696},[220,30894,29770],{"class":609},[220,30896,30897,30899,30901,30903,30905,30907],{"class":222,"line":702},[220,30898,343],{"class":264},[220,30900,347],{"class":346},[220,30902,350],{"class":226},[220,30904,353],{"class":264},[220,30906,713],{"class":230},[220,30908,359],{"class":264},[220,30910,30911,30913,30915],{"class":222,"line":718},[220,30912,364],{"class":264},[220,30914,367],{"class":346},[220,30916,386],{"class":264},[220,30918,30919,30921,30923],{"class":222,"line":727},[220,30920,402],{"class":264},[220,30922,347],{"class":346},[220,30924,359],{"class":264},[15,30926,30927,30928,27106,30930,27109],{},"Applying a class or style to the ",[99,30929,101],{},[99,30931,586],{},[23,30933,1153],{"id":1152},[15,30935,30936,30937,30939],{},"Pass props directly to configure each component. Numeric props use Vue's ",[99,30938,1554],{}," binding syntax, strings can be passed plain:",[212,30941,30943],{"className":334,"code":30942,"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,30944,30945,30959,30965,30973,30981,30989,30997,31001],{"__ignoreMap":178},[220,30946,30947,30949,30951,30953,30955,30957],{"class":222,"line":223},[220,30948,343],{"class":264},[220,30950,347],{"class":346},[220,30952,350],{"class":226},[220,30954,353],{"class":264},[220,30956,356],{"class":230},[220,30958,359],{"class":264},[220,30960,30961,30963],{"class":222,"line":179},[220,30962,364],{"class":264},[220,30964,1189],{"class":346},[220,30966,30967,30969,30971],{"class":222,"line":389},[220,30968,19464],{"class":226},[220,30970,353],{"class":264},[220,30972,1199],{"class":230},[220,30974,30975,30977,30979],{"class":222,"line":399},[220,30976,19474],{"class":226},[220,30978,353],{"class":264},[220,30980,1209],{"class":230},[220,30982,30983,30985,30987],{"class":222,"line":644},[220,30984,1214],{"class":226},[220,30986,353],{"class":264},[220,30988,1219],{"class":230},[220,30990,30991,30993,30995],{"class":222,"line":650},[220,30992,1224],{"class":226},[220,30994,353],{"class":264},[220,30996,1229],{"class":230},[220,30998,30999],{"class":222,"line":656},[220,31000,1234],{"class":264},[220,31002,31003,31005,31007],{"class":222,"line":673},[220,31004,402],{"class":264},[220,31006,347],{"class":346},[220,31008,359],{"class":264},[15,31010,31011],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[212,31013,31015],{"className":11663,"code":31014,"language":11665,"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,31016,31017,31027,31037,31047,31051,31067,31075,31079,31087,31101,31127,31135,31139,31174],{"__ignoreMap":178},[220,31018,31019,31021,31023,31025],{"class":222,"line":223},[220,31020,343],{"class":264},[220,31022,2590],{"class":346},[220,31024,2593],{"class":226},[220,31026,359],{"class":264},[220,31028,31029,31031,31033,31035],{"class":222,"line":179},[220,31030,261],{"class":260},[220,31032,2602],{"class":264},[220,31034,268],{"class":260},[220,31036,2607],{"class":230},[220,31038,31039,31041,31043,31045],{"class":222,"line":389},[220,31040,261],{"class":260},[220,31042,27215],{"class":264},[220,31044,268],{"class":260},[220,31046,271],{"class":230},[220,31048,31049],{"class":222,"line":399},[220,31050,647],{"emptyLinePlaceholder":194},[220,31052,31053,31055,31057,31059,31061,31063,31065],{"class":222,"line":644},[220,31054,1735],{"class":260},[220,31056,10527],{"class":420},[220,31058,1741],{"class":260},[220,31060,2623],{"class":226},[220,31062,2626],{"class":264},[220,31064,8668],{"class":420},[220,31066,2632],{"class":264},[220,31068,31069,31071,31073],{"class":222,"line":650},[220,31070,402],{"class":264},[220,31072,2590],{"class":346},[220,31074,359],{"class":264},[220,31076,31077],{"class":222,"line":656},[220,31078,647],{"emptyLinePlaceholder":194},[220,31080,31081,31083,31085],{"class":222,"line":673},[220,31082,343],{"class":264},[220,31084,2519],{"class":346},[220,31086,359],{"class":264},[220,31088,31089,31091,31093,31095,31097,31099],{"class":222,"line":682},[220,31090,364],{"class":264},[220,31092,347],{"class":346},[220,31094,350],{"class":226},[220,31096,353],{"class":264},[220,31098,356],{"class":230},[220,31100,359],{"class":264},[220,31102,31103,31105,31107,31109,31111,31113,31115,31117,31119,31121,31123,31125],{"class":222,"line":691},[220,31104,2550],{"class":264},[220,31106,367],{"class":346},[220,31108,20331],{"class":226},[220,31110,353],{"class":264},[220,31112,27303],{"class":230},[220,31114,20338],{"class":226},[220,31116,353],{"class":264},[220,31118,27310],{"class":230},[220,31120,10683],{"class":226},[220,31122,353],{"class":264},[220,31124,10688],{"class":230},[220,31126,386],{"class":264},[220,31128,31129,31131,31133],{"class":222,"line":696},[220,31130,2567],{"class":264},[220,31132,347],{"class":346},[220,31134,359],{"class":264},[220,31136,31137],{"class":222,"line":702},[220,31138,647],{"emptyLinePlaceholder":194},[220,31140,31141,31143,31145,31147,31149,31151,31153,31155,31158,31160,31162,31165,31168,31170,31172],{"class":222,"line":718},[220,31142,364],{"class":264},[220,31144,30018],{"class":346},[220,31146,12938],{"class":226},[220,31148,353],{"class":264},[220,31150,30025],{"class":230},[220,31152,30028],{"class":226},[220,31154,353],{"class":264},[220,31156,31157],{"class":230},"\"0\"",[220,31159,30039],{"class":226},[220,31161,353],{"class":264},[220,31163,31164],{"class":230},"\"360\"",[220,31166,31167],{"class":226}," v-model.number",[220,31169,353],{"class":264},[220,31171,10688],{"class":230},[220,31173,386],{"class":264},[220,31175,31176,31178,31180],{"class":222,"line":727},[220,31177,402],{"class":264},[220,31179,2519],{"class":346},[220,31181,359],{"class":264},[15,31183,26756,31184,27426],{},[99,31185,10759],{},[15,31187,26763,31188,26766],{},[56,31189,1160],{"href":1159},[23,31191,31193],{"id":31192},"using-with-nuxt-ssr","Using with Nuxt \u002F SSR",[15,31195,27437,31196,27442],{},[56,31197,31199],{"href":31198},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR",[23,31201,1474],{"id":1473},[1504,31203,31204],{},"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":31206},[31207,31208,31209,31210,31211,31212,31213],{"id":26213,"depth":179,"text":26214},{"id":26863,"depth":179,"text":26864},{"id":322,"depth":179,"text":323},{"id":593,"depth":179,"text":594},{"id":1152,"depth":179,"text":1153},{"id":31192,"depth":179,"text":31193},{"id":1473,"depth":179,"text":1474},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart",{"title":201,"description":31214},"docs\u002Fguide\u002Fvue\u002F1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":31221,"title":31199,"body":31222,"category":2240,"description":31888,"exclude":190,"extension":191,"forceFramework":190,"icon":28369,"meta":31889,"navigation":194,"path":31198,"seo":31890,"stem":31891,"__hash__":31892},"guide\u002Fdocs\u002Fguide\u002Fvue\u002Fssr.md",{"type":8,"value":31223,"toc":31881},[31224,31228,31231,31238,31244,31296,31299,31302,31395,31399,31406,31556,31560,31563,31763,31770,31858,31864,31868,31878],[11,31225,31227],{"id":31226},"ssr-with-nuxt-vue","SSR with Nuxt \u002F Vue",[15,31229,31230],{},"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,31232,31234,31235],{"id":31233},"nuxt-clientonly","Nuxt: ",[99,31236,31237],{},"\u003CClientOnly>",[15,31239,31240,31241,31243],{},"Nuxt provides a built-in ",[99,31242,31237],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[212,31245,31247],{"className":334,"code":31246,"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,31248,31249,31258,31272,31280,31288],{"__ignoreMap":178},[220,31250,31251,31253,31256],{"class":222,"line":223},[220,31252,343],{"class":264},[220,31254,31255],{"class":346},"ClientOnly",[220,31257,359],{"class":264},[220,31259,31260,31262,31264,31266,31268,31270],{"class":222,"line":179},[220,31261,364],{"class":264},[220,31263,347],{"class":346},[220,31265,350],{"class":226},[220,31267,353],{"class":264},[220,31269,356],{"class":230},[220,31271,359],{"class":264},[220,31273,31274,31276,31278],{"class":222,"line":389},[220,31275,2550],{"class":264},[220,31277,367],{"class":346},[220,31279,386],{"class":264},[220,31281,31282,31284,31286],{"class":222,"line":399},[220,31283,2567],{"class":264},[220,31285,347],{"class":346},[220,31287,359],{"class":264},[220,31289,31290,31292,31294],{"class":222,"line":644},[220,31291,402],{"class":264},[220,31293,31255],{"class":346},[220,31295,359],{"class":264},[15,31297,31298],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,31300,31301],{},"You can add a placeholder slot to show something while the client-side shader loads:",[212,31303,31305],{"className":334,"code":31304,"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,31306,31307,31315,31329,31337,31345,31349,31362,31379,31387],{"__ignoreMap":178},[220,31308,31309,31311,31313],{"class":222,"line":223},[220,31310,343],{"class":264},[220,31312,31255],{"class":346},[220,31314,359],{"class":264},[220,31316,31317,31319,31321,31323,31325,31327],{"class":222,"line":179},[220,31318,364],{"class":264},[220,31320,347],{"class":346},[220,31322,350],{"class":226},[220,31324,353],{"class":264},[220,31326,356],{"class":230},[220,31328,359],{"class":264},[220,31330,31331,31333,31335],{"class":222,"line":389},[220,31332,2550],{"class":264},[220,31334,367],{"class":346},[220,31336,386],{"class":264},[220,31338,31339,31341,31343],{"class":222,"line":399},[220,31340,2567],{"class":264},[220,31342,347],{"class":346},[220,31344,359],{"class":264},[220,31346,31347],{"class":222,"line":644},[220,31348,647],{"emptyLinePlaceholder":194},[220,31350,31351,31353,31355,31358,31360],{"class":222,"line":650},[220,31352,364],{"class":264},[220,31354,2519],{"class":346},[220,31356,31357],{"class":264}," #",[220,31359,3936],{"class":226},[220,31361,359],{"class":264},[220,31363,31364,31366,31368,31370,31372,31375,31377],{"class":222,"line":656},[220,31365,2550],{"class":264},[220,31367,3398],{"class":346},[220,31369,350],{"class":226},[220,31371,353],{"class":264},[220,31373,31374],{"class":230},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[220,31376,3412],{"class":3411},[220,31378,359],{"class":264},[220,31380,31381,31383,31385],{"class":222,"line":673},[220,31382,2567],{"class":264},[220,31384,2519],{"class":346},[220,31386,359],{"class":264},[220,31388,31389,31391,31393],{"class":222,"line":682},[220,31390,402],{"class":264},[220,31392,31255],{"class":346},[220,31394,359],{"class":264},[23,31396,31398],{"id":31397},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,31400,31401,31402,31405],{},"If you're using Vue SSR without Nuxt, use ",[99,31403,31404],{},"v-if"," with a mounted flag:",[212,31407,31409],{"className":11663,"code":31408,"language":11665,"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,31410,31411,31421,31431,31435,31452,31469,31477,31481,31489,31503,31524,31532,31540,31548],{"__ignoreMap":178},[220,31412,31413,31415,31417,31419],{"class":222,"line":223},[220,31414,343],{"class":264},[220,31416,2590],{"class":346},[220,31418,2593],{"class":226},[220,31420,359],{"class":264},[220,31422,31423,31425,31427,31429],{"class":222,"line":179},[220,31424,261],{"class":260},[220,31426,3443],{"class":264},[220,31428,268],{"class":260},[220,31430,2607],{"class":230},[220,31432,31433],{"class":222,"line":389},[220,31434,647],{"emptyLinePlaceholder":194},[220,31436,31437,31439,31442,31444,31446,31448,31450],{"class":222,"line":399},[220,31438,1735],{"class":260},[220,31440,31441],{"class":420}," isMounted",[220,31443,1741],{"class":260},[220,31445,2623],{"class":226},[220,31447,2626],{"class":264},[220,31449,2629],{"class":420},[220,31451,2632],{"class":264},[220,31453,31454,31456,31458,31460,31463,31465,31467],{"class":222,"line":644},[220,31455,3484],{"class":226},[220,31457,3600],{"class":264},[220,31459,2762],{"class":260},[220,31461,31462],{"class":264}," { isMounted.value ",[220,31464,353],{"class":260},[220,31466,2911],{"class":420},[220,31468,11612],{"class":264},[220,31470,31471,31473,31475],{"class":222,"line":650},[220,31472,402],{"class":264},[220,31474,2590],{"class":346},[220,31476,359],{"class":264},[220,31478,31479],{"class":222,"line":656},[220,31480,647],{"emptyLinePlaceholder":194},[220,31482,31483,31485,31487],{"class":222,"line":673},[220,31484,343],{"class":264},[220,31486,2519],{"class":346},[220,31488,359],{"class":264},[220,31490,31491,31493,31495,31497,31499,31501],{"class":222,"line":682},[220,31492,364],{"class":264},[220,31494,3398],{"class":346},[220,31496,350],{"class":226},[220,31498,353],{"class":264},[220,31500,356],{"class":230},[220,31502,359],{"class":264},[220,31504,31505,31507,31509,31511,31513,31516,31518,31520,31522],{"class":222,"line":691},[220,31506,2550],{"class":264},[220,31508,347],{"class":346},[220,31510,3362],{"class":226},[220,31512,353],{"class":264},[220,31514,31515],{"class":230},"\"isMounted\"",[220,31517,350],{"class":226},[220,31519,353],{"class":264},[220,31521,356],{"class":230},[220,31523,359],{"class":264},[220,31525,31526,31528,31530],{"class":222,"line":696},[220,31527,2813],{"class":264},[220,31529,367],{"class":346},[220,31531,386],{"class":264},[220,31533,31534,31536,31538],{"class":222,"line":702},[220,31535,2828],{"class":264},[220,31537,347],{"class":346},[220,31539,359],{"class":264},[220,31541,31542,31544,31546],{"class":222,"line":718},[220,31543,2567],{"class":264},[220,31545,3398],{"class":346},[220,31547,359],{"class":264},[220,31549,31550,31552,31554],{"class":222,"line":727},[220,31551,402],{"class":264},[220,31553,2519],{"class":346},[220,31555,359],{"class":264},[23,31557,31559],{"id":31558},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,31561,31562],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[212,31564,31566],{"className":11663,"code":31565,"language":11665,"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,31567,31568,31578,31589,31593,31609,31625,31629,31634,31671,31705,31713,31717,31725,31739,31747,31755],{"__ignoreMap":178},[220,31569,31570,31572,31574,31576],{"class":222,"line":223},[220,31571,343],{"class":264},[220,31573,2590],{"class":346},[220,31575,2593],{"class":226},[220,31577,359],{"class":264},[220,31579,31580,31582,31585,31587],{"class":222,"line":179},[220,31581,261],{"class":260},[220,31583,31584],{"class":264}," { defineAsyncComponent, ref, onMounted } ",[220,31586,268],{"class":260},[220,31588,2607],{"class":230},[220,31590,31591],{"class":222,"line":389},[220,31592,647],{"emptyLinePlaceholder":194},[220,31594,31595,31597,31599,31601,31603,31605,31607],{"class":222,"line":399},[220,31596,1735],{"class":260},[220,31598,31441],{"class":420},[220,31600,1741],{"class":260},[220,31602,2623],{"class":226},[220,31604,2626],{"class":264},[220,31606,2629],{"class":420},[220,31608,2632],{"class":264},[220,31610,31611,31613,31615,31617,31619,31621,31623],{"class":222,"line":644},[220,31612,3484],{"class":226},[220,31614,3600],{"class":264},[220,31616,2762],{"class":260},[220,31618,31462],{"class":264},[220,31620,353],{"class":260},[220,31622,2911],{"class":420},[220,31624,11612],{"class":264},[220,31626,31627],{"class":222,"line":650},[220,31628,647],{"emptyLinePlaceholder":194},[220,31630,31631],{"class":222,"line":656},[220,31632,31633],{"class":609},"\u002F\u002F Lazy-load shader components — only fetched client-side when rendered\n",[220,31635,31636,31638,31641,31643,31646,31648,31650,31652,31654,31657,31659,31661,31663,31666,31668],{"class":222,"line":673},[220,31637,1735],{"class":260},[220,31639,31640],{"class":420}," Shader",[220,31642,1741],{"class":260},[220,31644,31645],{"class":226}," defineAsyncComponent",[220,31647,3600],{"class":264},[220,31649,2762],{"class":260},[220,31651,27770],{"class":260},[220,31653,2626],{"class":264},[220,31655,31656],{"class":230},"'shaders\u002Fvue'",[220,31658,15432],{"class":264},[220,31660,3615],{"class":226},[220,31662,2626],{"class":264},[220,31664,31665],{"class":3621},"m",[220,31667,10825],{"class":260},[220,31669,31670],{"class":264}," m.Shader))\n",[220,31672,31673,31675,31678,31680,31682,31684,31686,31688,31690,31692,31694,31696,31698,31700,31702],{"class":222,"line":682},[220,31674,1735],{"class":260},[220,31676,31677],{"class":420}," LinearGradient",[220,31679,1741],{"class":260},[220,31681,31645],{"class":226},[220,31683,3600],{"class":264},[220,31685,2762],{"class":260},[220,31687,27770],{"class":260},[220,31689,2626],{"class":264},[220,31691,31656],{"class":230},[220,31693,15432],{"class":264},[220,31695,3615],{"class":226},[220,31697,2626],{"class":264},[220,31699,31665],{"class":3621},[220,31701,10825],{"class":260},[220,31703,31704],{"class":264}," m.LinearGradient))\n",[220,31706,31707,31709,31711],{"class":222,"line":691},[220,31708,402],{"class":264},[220,31710,2590],{"class":346},[220,31712,359],{"class":264},[220,31714,31715],{"class":222,"line":696},[220,31716,647],{"emptyLinePlaceholder":194},[220,31718,31719,31721,31723],{"class":222,"line":702},[220,31720,343],{"class":264},[220,31722,2519],{"class":346},[220,31724,359],{"class":264},[220,31726,31727,31729,31731,31733,31735,31737],{"class":222,"line":718},[220,31728,364],{"class":264},[220,31730,347],{"class":346},[220,31732,3362],{"class":226},[220,31734,353],{"class":264},[220,31736,31515],{"class":230},[220,31738,359],{"class":264},[220,31740,31741,31743,31745],{"class":222,"line":727},[220,31742,2550],{"class":264},[220,31744,367],{"class":346},[220,31746,386],{"class":264},[220,31748,31749,31751,31753],{"class":222,"line":2664},[220,31750,2567],{"class":264},[220,31752,347],{"class":346},[220,31754,359],{"class":264},[220,31756,31757,31759,31761],{"class":222,"line":3522},[220,31758,402],{"class":264},[220,31760,2519],{"class":346},[220,31762,359],{"class":264},[15,31764,31765,31766,31769],{},"Or in Nuxt, use ",[99,31767,31768],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[212,31771,31773],{"className":251,"code":31772,"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,31774,31775,31780,31792,31802,31806,31826,31841,31854],{"__ignoreMap":178},[220,31776,31777],{"class":222,"line":223},[220,31778,31779],{"class":609},"\u002F\u002F plugins\u002Fshaders.client.ts\n",[220,31781,31782,31784,31787,31789],{"class":222,"line":179},[220,31783,261],{"class":260},[220,31785,31786],{"class":264}," { defineNuxtPlugin } ",[220,31788,268],{"class":260},[220,31790,31791],{"class":230}," '#app'\n",[220,31793,31794,31796,31798,31800],{"class":222,"line":389},[220,31795,261],{"class":260},[220,31797,27215],{"class":264},[220,31799,268],{"class":260},[220,31801,271],{"class":230},[220,31803,31804],{"class":222,"line":399},[220,31805,647],{"emptyLinePlaceholder":194},[220,31807,31808,31810,31812,31815,31817,31820,31822,31824],{"class":222,"line":644},[220,31809,27228],{"class":260},[220,31811,27231],{"class":260},[220,31813,31814],{"class":226}," defineNuxtPlugin",[220,31816,3897],{"class":264},[220,31818,31819],{"class":3621},"nuxtApp",[220,31821,4168],{"class":264},[220,31823,2762],{"class":260},[220,31825,3241],{"class":264},[220,31827,31828,31831,31833,31835,31838],{"class":222,"line":650},[220,31829,31830],{"class":264}," nuxtApp.vueApp.",[220,31832,30633],{"class":226},[220,31834,2626],{"class":264},[220,31836,31837],{"class":230},"'Shader'",[220,31839,31840],{"class":264},", Shader)\n",[220,31842,31843,31845,31847,31849,31851],{"class":222,"line":656},[220,31844,31830],{"class":264},[220,31846,30633],{"class":226},[220,31848,2626],{"class":264},[220,31850,2462],{"class":230},[220,31852,31853],{"class":264},", LinearGradient)\n",[220,31855,31856],{"class":222,"line":673},[220,31857,1792],{"class":264},[15,31859,1839,31860,31863],{},[99,31861,31862],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,31865,31867],{"id":31866},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,31869,1839,31870,12245,31872,31874,31875,31877],{},[99,31871,101],{},[99,31873,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,31876,31237],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1504,31879,31880],{},"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":31882},[31883,31885,31886,31887],{"id":31233,"depth":179,"text":31884},"Nuxt: \u003CClientOnly>",{"id":31397,"depth":179,"text":31398},{"id":31558,"depth":179,"text":31559},{"id":31866,"depth":179,"text":31867},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":31199,"description":31888},"docs\u002Fguide\u002Fvue\u002Fssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[31894,32235,32529,32807,33064,33397,33674,33874,34150,34350,34626,34826,35026,35359,35560,35892,36092,36369,36570,36903,37179,37379,37655,37931,38207,38406,38606,38910,39186,39475,39675,39951,40283,40483,40759,41035,41328,41621,41896,42095,42474,42728,43061,43261,43537,43870,44146,44422,44665,45034,45310,45555,45829,46105,46305,46581,46781,47057,47333,47609,47809,48085,48378,48578,48854,49054,49330,49530,49730,49930,50204,50535,50867,51198,51454,51654,51930,52200,52445,52821,53092,53292,53568,53862,54068,54268,54515,54715,54991,55191,55485,55755,56031,56231,56507,56783,57038,57299,57631,57963,58161,58437,58637,59015,59215,59415,59691,59891,60185,60461,60737,61070,61346,61591,61867,62067,62267,62466,62742,63074,63406,63682,63937,64137,64515,64807,65140,65398,65730,65986,66262,66538,66738,67070,67346,67678,67970,68246,68446,68691,69022,69222,69498,69878,70078,70323,70599,70855,71110,71366,71642,71886,72218,72418,72710,73042,73242,73518,73716,73963,74257,74533,74732,75025,75269,75524,75856,76132,76455,76700,76900,77176,77376,77708,77984,78260,78552,78885,79085,79499,79699,79899,80231,80507,80707,80907,81107,81439,81639],{"id":31895,"title":31896,"body":31897,"category":32229,"componentType":25878,"description":31904,"extension":191,"meta":32230,"navigation":194,"path":32231,"requiresChild":194,"seo":32232,"stem":32233,"__hash__":32234},"components\u002Fdocs\u002Fcomponents\u002FAngularBlur.md","AngularBlur",{"type":8,"value":31898,"toc":32225},[31899,31902,31905,31908,31911,31915,31919,32223],[11,31900,31896],{"id":31901},"angularblur",[15,31903,31904],{},"Radial motion blur rotating around a center point",[31906,31907],"shader-preview",{"component":31896},[23,31909,31910],{"id":26528},"Props",[31912,31913],"props-table",{":props":31914},"[{\"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,31916,31918],{"id":31917},"usage","Usage",[246,31920,31921,31979,32038,32094,32152],{":tabs":1557},[212,31922,31924],{"className":334,"code":31923,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31925,31926,31934,31941,31950,31955,31963,31971],{"__ignoreMap":178},[220,31927,31928,31930,31932],{"class":222,"line":223},[220,31929,343],{"class":264},[220,31931,347],{"class":346},[220,31933,359],{"class":264},[220,31935,31936,31938],{"class":222,"line":179},[220,31937,364],{"class":264},[220,31939,31940],{"class":346},"AngularBlur\n",[220,31942,31943,31945,31947],{"class":222,"line":389},[220,31944,20366],{"class":226},[220,31946,353],{"class":264},[220,31948,31949],{"class":230},"\"20\"\n",[220,31951,31952],{"class":222,"line":399},[220,31953,31954],{"class":264}," >\n",[220,31956,31957,31959,31961],{"class":222,"line":644},[220,31958,2550],{"class":264},[220,31960,2553],{"class":346},[220,31962,386],{"class":264},[220,31964,31965,31967,31969],{"class":222,"line":650},[220,31966,2567],{"class":264},[220,31968,31896],{"class":346},[220,31970,359],{"class":264},[220,31972,31973,31975,31977],{"class":222,"line":656},[220,31974,402],{"class":264},[220,31976,347],{"class":346},[220,31978,359],{"class":264},[212,31980,31982],{"className":409,"code":31981,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FAngularBlur>\n\u003C\u002FShader>\n",[99,31983,31984,31992,31998,32010,32014,32022,32030],{"__ignoreMap":178},[220,31985,31986,31988,31990],{"class":222,"line":223},[220,31987,343],{"class":264},[220,31989,347],{"class":420},[220,31991,359],{"class":264},[220,31993,31994,31996],{"class":222,"line":179},[220,31995,364],{"class":264},[220,31997,31940],{"class":420},[220,31999,32000,32002,32004,32006,32008],{"class":222,"line":389},[220,32001,20477],{"class":226},[220,32003,353],{"class":260},[220,32005,743],{"class":264},[220,32007,24795],{"class":420},[220,32009,749],{"class":264},[220,32011,32012],{"class":222,"line":399},[220,32013,31954],{"class":264},[220,32015,32016,32018,32020],{"class":222,"line":644},[220,32017,2550],{"class":264},[220,32019,2553],{"class":420},[220,32021,386],{"class":264},[220,32023,32024,32026,32028],{"class":222,"line":650},[220,32025,2567],{"class":264},[220,32027,31896],{"class":420},[220,32029,359],{"class":264},[220,32031,32032,32034,32036],{"class":222,"line":656},[220,32033,402],{"class":264},[220,32035,347],{"class":420},[220,32037,359],{"class":264},[212,32039,32040],{"className":2844,"code":31981,"language":2846,"meta":178,"style":178},[99,32041,32042,32050,32056,32066,32070,32078,32086],{"__ignoreMap":178},[220,32043,32044,32046,32048],{"class":222,"line":223},[220,32045,343],{"class":264},[220,32047,347],{"class":420},[220,32049,359],{"class":264},[220,32051,32052,32054],{"class":222,"line":179},[220,32053,364],{"class":264},[220,32055,31940],{"class":420},[220,32057,32058,32060,32062,32064],{"class":222,"line":389},[220,32059,20477],{"class":226},[220,32061,29866],{"class":264},[220,32063,24795],{"class":420},[220,32065,749],{"class":264},[220,32067,32068],{"class":222,"line":399},[220,32069,31954],{"class":264},[220,32071,32072,32074,32076],{"class":222,"line":644},[220,32073,2550],{"class":264},[220,32075,2553],{"class":420},[220,32077,386],{"class":264},[220,32079,32080,32082,32084],{"class":222,"line":650},[220,32081,2567],{"class":264},[220,32083,31896],{"class":420},[220,32085,359],{"class":264},[220,32087,32088,32090,32092],{"class":222,"line":656},[220,32089,402],{"class":264},[220,32091,347],{"class":420},[220,32093,359],{"class":264},[212,32095,32096],{"className":468,"code":31981,"language":469,"meta":178,"style":178},[99,32097,32098,32106,32112,32124,32128,32136,32144],{"__ignoreMap":178},[220,32099,32100,32102,32104],{"class":222,"line":223},[220,32101,343],{"class":264},[220,32103,347],{"class":420},[220,32105,359],{"class":264},[220,32107,32108,32110],{"class":222,"line":179},[220,32109,364],{"class":264},[220,32111,31940],{"class":420},[220,32113,32114,32116,32118,32120,32122],{"class":222,"line":389},[220,32115,20477],{"class":226},[220,32117,353],{"class":260},[220,32119,743],{"class":264},[220,32121,24795],{"class":420},[220,32123,749],{"class":264},[220,32125,32126],{"class":222,"line":399},[220,32127,31954],{"class":264},[220,32129,32130,32132,32134],{"class":222,"line":644},[220,32131,2550],{"class":264},[220,32133,2553],{"class":420},[220,32135,386],{"class":264},[220,32137,32138,32140,32142],{"class":222,"line":650},[220,32139,2567],{"class":264},[220,32141,31896],{"class":420},[220,32143,359],{"class":264},[220,32145,32146,32148,32150],{"class":222,"line":656},[220,32147,402],{"class":264},[220,32149,347],{"class":420},[220,32151,359],{"class":264},[212,32153,32155],{"className":251,"code":32154,"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,32156,32157,32167,32171,32185,32189,32203,32211,32215,32219],{"__ignoreMap":178},[220,32158,32159,32161,32163,32165],{"class":222,"line":223},[220,32160,261],{"class":260},[220,32162,11507],{"class":264},[220,32164,268],{"class":260},[220,32166,4007],{"class":230},[220,32168,32169],{"class":222,"line":179},[220,32170,647],{"emptyLinePlaceholder":194},[220,32172,32173,32175,32177,32179,32181,32183],{"class":222,"line":389},[220,32174,1735],{"class":260},[220,32176,1738],{"class":420},[220,32178,1741],{"class":260},[220,32180,1744],{"class":260},[220,32182,1747],{"class":226},[220,32184,1750],{"class":264},[220,32186,32187],{"class":222,"line":399},[220,32188,1765],{"class":264},[220,32190,32191,32193,32196,32199,32201],{"class":222,"line":644},[220,32192,1770],{"class":264},[220,32194,32195],{"class":230},"'AngularBlur'",[220,32197,32198],{"class":264},", props: { intensity: ",[220,32200,24795],{"class":420},[220,32202,7541],{"class":264},[220,32204,32205,32207,32209],{"class":222,"line":650},[220,32206,7009],{"class":264},[220,32208,3206],{"class":230},[220,32210,2465],{"class":264},[220,32212,32213],{"class":222,"line":656},[220,32214,7026],{"class":264},[220,32216,32217],{"class":222,"line":673},[220,32218,1787],{"class":264},[220,32220,32221],{"class":222,"line":682},[220,32222,1792],{"class":264},[1504,32224,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32226},[32227,32228],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Blurs",{},"\u002Fdocs\u002Fcomponents\u002Fangularblur",{"title":31896,"description":31904},"docs\u002Fcomponents\u002FAngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":32236,"title":32237,"body":32238,"category":15903,"componentType":25872,"description":32245,"extension":191,"meta":32523,"navigation":194,"path":32524,"requiresChild":32525,"seo":32526,"stem":32527,"__hash__":32528},"components\u002Fdocs\u002Fcomponents\u002FArc.md","Arc",{"type":8,"value":32239,"toc":32519},[32240,32243,32246,32248,32250,32253,32255,32517],[11,32241,32237],{"id":32242},"arc",[15,32244,32245],{},"Pie sector (arc wedge) with adjustable radius and aperture angle",[31906,32247],{"component":32237},[23,32249,31910],{"id":26528},[31912,32251],{":props":32252},"[{\"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,32254,31918],{"id":31917},[246,32256,32257,32306,32357,32405,32455],{":tabs":1557},[212,32258,32260],{"className":334,"code":32259,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n :radius=\"0.38\"\n \u002F>\n\u003C\u002FShader>\n",[99,32261,32262,32270,32277,32285,32294,32298],{"__ignoreMap":178},[220,32263,32264,32266,32268],{"class":222,"line":223},[220,32265,343],{"class":264},[220,32267,347],{"class":346},[220,32269,359],{"class":264},[220,32271,32272,32274],{"class":222,"line":179},[220,32273,364],{"class":264},[220,32275,32276],{"class":346},"Arc\n",[220,32278,32279,32281,32283],{"class":222,"line":389},[220,32280,9630],{"class":226},[220,32282,353],{"class":264},[220,32284,9586],{"class":230},[220,32286,32287,32289,32291],{"class":222,"line":399},[220,32288,17400],{"class":226},[220,32290,353],{"class":264},[220,32292,32293],{"class":230},"\"0.38\"\n",[220,32295,32296],{"class":222,"line":644},[220,32297,1234],{"class":264},[220,32299,32300,32302,32304],{"class":222,"line":650},[220,32301,402],{"class":264},[220,32303,347],{"class":346},[220,32305,359],{"class":264},[212,32307,32309],{"className":409,"code":32308,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CArc\n color=\"#ffffff\"\n radius={0.38}\n \u002F>\n\u003C\u002FShader>\n",[99,32310,32311,32319,32325,32333,32345,32349],{"__ignoreMap":178},[220,32312,32313,32315,32317],{"class":222,"line":223},[220,32314,343],{"class":264},[220,32316,347],{"class":420},[220,32318,359],{"class":264},[220,32320,32321,32323],{"class":222,"line":179},[220,32322,364],{"class":264},[220,32324,32276],{"class":420},[220,32326,32327,32329,32331],{"class":222,"line":389},[220,32328,9630],{"class":226},[220,32330,353],{"class":260},[220,32332,9586],{"class":230},[220,32334,32335,32337,32339,32341,32343],{"class":222,"line":399},[220,32336,9640],{"class":226},[220,32338,353],{"class":260},[220,32340,743],{"class":264},[220,32342,24733],{"class":420},[220,32344,749],{"class":264},[220,32346,32347],{"class":222,"line":644},[220,32348,1234],{"class":264},[220,32350,32351,32353,32355],{"class":222,"line":650},[220,32352,402],{"class":264},[220,32354,347],{"class":420},[220,32356,359],{"class":264},[212,32358,32359],{"className":2844,"code":32308,"language":2846,"meta":178,"style":178},[99,32360,32361,32369,32375,32383,32393,32397],{"__ignoreMap":178},[220,32362,32363,32365,32367],{"class":222,"line":223},[220,32364,343],{"class":264},[220,32366,347],{"class":420},[220,32368,359],{"class":264},[220,32370,32371,32373],{"class":222,"line":179},[220,32372,364],{"class":264},[220,32374,32276],{"class":420},[220,32376,32377,32379,32381],{"class":222,"line":389},[220,32378,9630],{"class":226},[220,32380,353],{"class":264},[220,32382,9586],{"class":230},[220,32384,32385,32387,32389,32391],{"class":222,"line":399},[220,32386,9640],{"class":226},[220,32388,29866],{"class":264},[220,32390,24733],{"class":420},[220,32392,749],{"class":264},[220,32394,32395],{"class":222,"line":644},[220,32396,1234],{"class":264},[220,32398,32399,32401,32403],{"class":222,"line":650},[220,32400,402],{"class":264},[220,32402,347],{"class":420},[220,32404,359],{"class":264},[212,32406,32407],{"className":468,"code":32308,"language":469,"meta":178,"style":178},[99,32408,32409,32417,32423,32431,32443,32447],{"__ignoreMap":178},[220,32410,32411,32413,32415],{"class":222,"line":223},[220,32412,343],{"class":264},[220,32414,347],{"class":420},[220,32416,359],{"class":264},[220,32418,32419,32421],{"class":222,"line":179},[220,32420,364],{"class":264},[220,32422,32276],{"class":420},[220,32424,32425,32427,32429],{"class":222,"line":389},[220,32426,9630],{"class":226},[220,32428,353],{"class":260},[220,32430,9586],{"class":230},[220,32432,32433,32435,32437,32439,32441],{"class":222,"line":399},[220,32434,9640],{"class":226},[220,32436,353],{"class":260},[220,32438,743],{"class":264},[220,32440,24733],{"class":420},[220,32442,749],{"class":264},[220,32444,32445],{"class":222,"line":644},[220,32446,1234],{"class":264},[220,32448,32449,32451,32453],{"class":222,"line":650},[220,32450,402],{"class":264},[220,32452,347],{"class":420},[220,32454,359],{"class":264},[212,32456,32458],{"className":251,"code":32457,"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,32459,32460,32470,32474,32488,32492,32509,32513],{"__ignoreMap":178},[220,32461,32462,32464,32466,32468],{"class":222,"line":223},[220,32463,261],{"class":260},[220,32465,11507],{"class":264},[220,32467,268],{"class":260},[220,32469,4007],{"class":230},[220,32471,32472],{"class":222,"line":179},[220,32473,647],{"emptyLinePlaceholder":194},[220,32475,32476,32478,32480,32482,32484,32486],{"class":222,"line":389},[220,32477,1735],{"class":260},[220,32479,1738],{"class":420},[220,32481,1741],{"class":260},[220,32483,1744],{"class":260},[220,32485,1747],{"class":226},[220,32487,1750],{"class":264},[220,32489,32490],{"class":222,"line":399},[220,32491,1765],{"class":264},[220,32493,32494,32496,32499,32501,32503,32505,32507],{"class":222,"line":644},[220,32495,1770],{"class":264},[220,32497,32498],{"class":230},"'Arc'",[220,32500,1776],{"class":264},[220,32502,10164],{"class":230},[220,32504,6561],{"class":264},[220,32506,24733],{"class":420},[220,32508,1782],{"class":264},[220,32510,32511],{"class":222,"line":650},[220,32512,1787],{"class":264},[220,32514,32515],{"class":222,"line":656},[220,32516,1792],{"class":264},[1504,32518,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":32520},[32521,32522],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Farc",false,{"title":32237,"description":32245},"docs\u002Fcomponents\u002FArc","I2EuhHpcUbcrQ9uSOSgreANTsm2_XJXh4GoQFwYf8Dg",{"id":32530,"title":32531,"body":32532,"category":32801,"componentType":25878,"description":32539,"extension":191,"meta":32802,"navigation":194,"path":32803,"requiresChild":194,"seo":32804,"stem":32805,"__hash__":32806},"components\u002Fdocs\u002Fcomponents\u002FAscii.md","Ascii",{"type":8,"value":32533,"toc":32797},[32534,32537,32540,32542,32544,32547,32549,32794],[11,32535,32531],{"id":32536},"ascii",[15,32538,32539],{},"Convert imagery to ASCII character art",[31906,32541],{"component":32531},[23,32543,31910],{"id":26528},[31912,32545],{":props":32546},"[{\"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,32548,31918],{"id":31917},[246,32550,32551,32596,32640,32684,32728],{":tabs":1557},[212,32552,32554],{"className":334,"code":32553,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAscii>\n \u003CCircle \u002F>\n \u003C\u002FAscii>\n\u003C\u002FShader>\n",[99,32555,32556,32564,32572,32580,32588],{"__ignoreMap":178},[220,32557,32558,32560,32562],{"class":222,"line":223},[220,32559,343],{"class":264},[220,32561,347],{"class":346},[220,32563,359],{"class":264},[220,32565,32566,32568,32570],{"class":222,"line":179},[220,32567,364],{"class":264},[220,32569,32531],{"class":346},[220,32571,359],{"class":264},[220,32573,32574,32576,32578],{"class":222,"line":389},[220,32575,2550],{"class":264},[220,32577,2553],{"class":346},[220,32579,386],{"class":264},[220,32581,32582,32584,32586],{"class":222,"line":399},[220,32583,2567],{"class":264},[220,32585,32531],{"class":346},[220,32587,359],{"class":264},[220,32589,32590,32592,32594],{"class":222,"line":644},[220,32591,402],{"class":264},[220,32593,347],{"class":346},[220,32595,359],{"class":264},[212,32597,32598],{"className":409,"code":32553,"language":411,"meta":178,"style":178},[99,32599,32600,32608,32616,32624,32632],{"__ignoreMap":178},[220,32601,32602,32604,32606],{"class":222,"line":223},[220,32603,343],{"class":264},[220,32605,347],{"class":420},[220,32607,359],{"class":264},[220,32609,32610,32612,32614],{"class":222,"line":179},[220,32611,364],{"class":264},[220,32613,32531],{"class":420},[220,32615,359],{"class":264},[220,32617,32618,32620,32622],{"class":222,"line":389},[220,32619,2550],{"class":264},[220,32621,2553],{"class":420},[220,32623,386],{"class":264},[220,32625,32626,32628,32630],{"class":222,"line":399},[220,32627,2567],{"class":264},[220,32629,32531],{"class":420},[220,32631,359],{"class":264},[220,32633,32634,32636,32638],{"class":222,"line":644},[220,32635,402],{"class":264},[220,32637,347],{"class":420},[220,32639,359],{"class":264},[212,32641,32642],{"className":2844,"code":32553,"language":2846,"meta":178,"style":178},[99,32643,32644,32652,32660,32668,32676],{"__ignoreMap":178},[220,32645,32646,32648,32650],{"class":222,"line":223},[220,32647,343],{"class":264},[220,32649,347],{"class":420},[220,32651,359],{"class":264},[220,32653,32654,32656,32658],{"class":222,"line":179},[220,32655,364],{"class":264},[220,32657,32531],{"class":420},[220,32659,359],{"class":264},[220,32661,32662,32664,32666],{"class":222,"line":389},[220,32663,2550],{"class":264},[220,32665,2553],{"class":420},[220,32667,386],{"class":264},[220,32669,32670,32672,32674],{"class":222,"line":399},[220,32671,2567],{"class":264},[220,32673,32531],{"class":420},[220,32675,359],{"class":264},[220,32677,32678,32680,32682],{"class":222,"line":644},[220,32679,402],{"class":264},[220,32681,347],{"class":420},[220,32683,359],{"class":264},[212,32685,32686],{"className":468,"code":32553,"language":469,"meta":178,"style":178},[99,32687,32688,32696,32704,32712,32720],{"__ignoreMap":178},[220,32689,32690,32692,32694],{"class":222,"line":223},[220,32691,343],{"class":264},[220,32693,347],{"class":420},[220,32695,359],{"class":264},[220,32697,32698,32700,32702],{"class":222,"line":179},[220,32699,364],{"class":264},[220,32701,32531],{"class":420},[220,32703,359],{"class":264},[220,32705,32706,32708,32710],{"class":222,"line":389},[220,32707,2550],{"class":264},[220,32709,2553],{"class":420},[220,32711,386],{"class":264},[220,32713,32714,32716,32718],{"class":222,"line":399},[220,32715,2567],{"class":264},[220,32717,32531],{"class":420},[220,32719,359],{"class":264},[220,32721,32722,32724,32726],{"class":222,"line":644},[220,32723,402],{"class":264},[220,32725,347],{"class":420},[220,32727,359],{"class":264},[212,32729,32731],{"className":251,"code":32730,"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,32732,32733,32743,32747,32761,32765,32774,32782,32786,32790],{"__ignoreMap":178},[220,32734,32735,32737,32739,32741],{"class":222,"line":223},[220,32736,261],{"class":260},[220,32738,11507],{"class":264},[220,32740,268],{"class":260},[220,32742,4007],{"class":230},[220,32744,32745],{"class":222,"line":179},[220,32746,647],{"emptyLinePlaceholder":194},[220,32748,32749,32751,32753,32755,32757,32759],{"class":222,"line":389},[220,32750,1735],{"class":260},[220,32752,1738],{"class":420},[220,32754,1741],{"class":260},[220,32756,1744],{"class":260},[220,32758,1747],{"class":226},[220,32760,1750],{"class":264},[220,32762,32763],{"class":222,"line":399},[220,32764,1765],{"class":264},[220,32766,32767,32769,32772],{"class":222,"line":644},[220,32768,1770],{"class":264},[220,32770,32771],{"class":230},"'Ascii'",[220,32773,7004],{"class":264},[220,32775,32776,32778,32780],{"class":222,"line":650},[220,32777,7009],{"class":264},[220,32779,3206],{"class":230},[220,32781,2465],{"class":264},[220,32783,32784],{"class":222,"line":656},[220,32785,7026],{"class":264},[220,32787,32788],{"class":222,"line":673},[220,32789,1787],{"class":264},[220,32791,32792],{"class":222,"line":682},[220,32793,1792],{"class":264},[1504,32795,32796],{},"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":32798},[32799,32800],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Stylize",{},"\u002Fdocs\u002Fcomponents\u002Fascii",{"title":32531,"description":32539},"docs\u002Fcomponents\u002FAscii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":32808,"title":12612,"body":32809,"category":33058,"componentType":25872,"description":32816,"extension":191,"meta":33059,"navigation":194,"path":33060,"requiresChild":32525,"seo":33061,"stem":33062,"__hash__":33063},"components\u002Fdocs\u002Fcomponents\u002FAurora.md",{"type":8,"value":32810,"toc":33054},[32811,32814,32817,32819,32821,32824,32826,33052],[11,32812,12612],{"id":32813},"aurora",[15,32815,32816],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[31906,32818],{"component":12612},[23,32820,31910],{"id":26528},[31912,32822],{":props":32823},"[{\"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,32825,31918],{"id":31917},[246,32827,32828,32869,32913,32953,32995],{":tabs":1557},[212,32829,32831],{"className":334,"code":32830,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n \u002F>\n\u003C\u002FShader>\n",[99,32832,32833,32841,32848,32857,32861],{"__ignoreMap":178},[220,32834,32835,32837,32839],{"class":222,"line":223},[220,32836,343],{"class":264},[220,32838,347],{"class":346},[220,32840,359],{"class":264},[220,32842,32843,32845],{"class":222,"line":179},[220,32844,364],{"class":264},[220,32846,32847],{"class":346},"Aurora\n",[220,32849,32850,32852,32854],{"class":222,"line":389},[220,32851,20366],{"class":226},[220,32853,353],{"class":264},[220,32855,32856],{"class":230},"\"80\"\n",[220,32858,32859],{"class":222,"line":399},[220,32860,1234],{"class":264},[220,32862,32863,32865,32867],{"class":222,"line":644},[220,32864,402],{"class":264},[220,32866,347],{"class":346},[220,32868,359],{"class":264},[212,32870,32872],{"className":409,"code":32871,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CAurora\n intensity={80}\n \u002F>\n\u003C\u002FShader>\n",[99,32873,32874,32882,32888,32901,32905],{"__ignoreMap":178},[220,32875,32876,32878,32880],{"class":222,"line":223},[220,32877,343],{"class":264},[220,32879,347],{"class":420},[220,32881,359],{"class":264},[220,32883,32884,32886],{"class":222,"line":179},[220,32885,364],{"class":264},[220,32887,32847],{"class":420},[220,32889,32890,32892,32894,32896,32899],{"class":222,"line":389},[220,32891,20477],{"class":226},[220,32893,353],{"class":260},[220,32895,743],{"class":264},[220,32897,32898],{"class":420},"80",[220,32900,749],{"class":264},[220,32902,32903],{"class":222,"line":399},[220,32904,1234],{"class":264},[220,32906,32907,32909,32911],{"class":222,"line":644},[220,32908,402],{"class":264},[220,32910,347],{"class":420},[220,32912,359],{"class":264},[212,32914,32915],{"className":2844,"code":32871,"language":2846,"meta":178,"style":178},[99,32916,32917,32925,32931,32941,32945],{"__ignoreMap":178},[220,32918,32919,32921,32923],{"class":222,"line":223},[220,32920,343],{"class":264},[220,32922,347],{"class":420},[220,32924,359],{"class":264},[220,32926,32927,32929],{"class":222,"line":179},[220,32928,364],{"class":264},[220,32930,32847],{"class":420},[220,32932,32933,32935,32937,32939],{"class":222,"line":389},[220,32934,20477],{"class":226},[220,32936,29866],{"class":264},[220,32938,32898],{"class":420},[220,32940,749],{"class":264},[220,32942,32943],{"class":222,"line":399},[220,32944,1234],{"class":264},[220,32946,32947,32949,32951],{"class":222,"line":644},[220,32948,402],{"class":264},[220,32950,347],{"class":420},[220,32952,359],{"class":264},[212,32954,32955],{"className":468,"code":32871,"language":469,"meta":178,"style":178},[99,32956,32957,32965,32971,32983,32987],{"__ignoreMap":178},[220,32958,32959,32961,32963],{"class":222,"line":223},[220,32960,343],{"class":264},[220,32962,347],{"class":420},[220,32964,359],{"class":264},[220,32966,32967,32969],{"class":222,"line":179},[220,32968,364],{"class":264},[220,32970,32847],{"class":420},[220,32972,32973,32975,32977,32979,32981],{"class":222,"line":389},[220,32974,20477],{"class":226},[220,32976,353],{"class":260},[220,32978,743],{"class":264},[220,32980,32898],{"class":420},[220,32982,749],{"class":264},[220,32984,32985],{"class":222,"line":399},[220,32986,1234],{"class":264},[220,32988,32989,32991,32993],{"class":222,"line":644},[220,32990,402],{"class":264},[220,32992,347],{"class":420},[220,32994,359],{"class":264},[212,32996,32998],{"className":251,"code":32997,"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,32999,33000,33010,33014,33028,33032,33044,33048],{"__ignoreMap":178},[220,33001,33002,33004,33006,33008],{"class":222,"line":223},[220,33003,261],{"class":260},[220,33005,11507],{"class":264},[220,33007,268],{"class":260},[220,33009,4007],{"class":230},[220,33011,33012],{"class":222,"line":179},[220,33013,647],{"emptyLinePlaceholder":194},[220,33015,33016,33018,33020,33022,33024,33026],{"class":222,"line":389},[220,33017,1735],{"class":260},[220,33019,1738],{"class":420},[220,33021,1741],{"class":260},[220,33023,1744],{"class":260},[220,33025,1747],{"class":226},[220,33027,1750],{"class":264},[220,33029,33030],{"class":222,"line":399},[220,33031,1765],{"class":264},[220,33033,33034,33036,33038,33040,33042],{"class":222,"line":644},[220,33035,1770],{"class":264},[220,33037,12989],{"class":230},[220,33039,32198],{"class":264},[220,33041,32898],{"class":420},[220,33043,1782],{"class":264},[220,33045,33046],{"class":222,"line":650},[220,33047,1787],{"class":264},[220,33049,33050],{"class":222,"line":656},[220,33051,1792],{"class":264},[1504,33053,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33055},[33056,33057],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Textures",{},"\u002Fdocs\u002Fcomponents\u002Faurora",{"title":12612,"description":32816},"docs\u002Fcomponents\u002FAurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":33065,"title":33066,"body":33067,"category":33391,"componentType":25878,"description":33074,"extension":191,"meta":33392,"navigation":194,"path":33393,"requiresChild":194,"seo":33394,"stem":33395,"__hash__":33396},"components\u002Fdocs\u002Fcomponents\u002FBarShift.md","BarShift",{"type":8,"value":33068,"toc":33387},[33069,33072,33075,33077,33079,33082,33084,33385],[11,33070,33066],{"id":33071},"barshift",[15,33073,33074],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[31906,33076],{"component":33066},[23,33078,31910],{"id":26528},[31912,33080],{":props":33081},"[{\"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,33083,31918],{"id":31917},[246,33085,33086,33142,33201,33257,33315],{":tabs":1557},[212,33087,33089],{"className":334,"code":33088,"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,33090,33091,33099,33106,33114,33118,33126,33134],{"__ignoreMap":178},[220,33092,33093,33095,33097],{"class":222,"line":223},[220,33094,343],{"class":264},[220,33096,347],{"class":346},[220,33098,359],{"class":264},[220,33100,33101,33103],{"class":222,"line":179},[220,33102,364],{"class":264},[220,33104,33105],{"class":346},"BarShift\n",[220,33107,33108,33110,33112],{"class":222,"line":389},[220,33109,20366],{"class":226},[220,33111,353],{"class":264},[220,33113,18103],{"class":230},[220,33115,33116],{"class":222,"line":399},[220,33117,31954],{"class":264},[220,33119,33120,33122,33124],{"class":222,"line":644},[220,33121,2550],{"class":264},[220,33123,2553],{"class":346},[220,33125,386],{"class":264},[220,33127,33128,33130,33132],{"class":222,"line":650},[220,33129,2567],{"class":264},[220,33131,33066],{"class":346},[220,33133,359],{"class":264},[220,33135,33136,33138,33140],{"class":222,"line":656},[220,33137,402],{"class":264},[220,33139,347],{"class":346},[220,33141,359],{"class":264},[212,33143,33145],{"className":409,"code":33144,"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,33146,33147,33155,33161,33173,33177,33185,33193],{"__ignoreMap":178},[220,33148,33149,33151,33153],{"class":222,"line":223},[220,33150,343],{"class":264},[220,33152,347],{"class":420},[220,33154,359],{"class":264},[220,33156,33157,33159],{"class":222,"line":179},[220,33158,364],{"class":264},[220,33160,33105],{"class":420},[220,33162,33163,33165,33167,33169,33171],{"class":222,"line":389},[220,33164,20477],{"class":226},[220,33166,353],{"class":260},[220,33168,743],{"class":264},[220,33170,18187],{"class":420},[220,33172,749],{"class":264},[220,33174,33175],{"class":222,"line":399},[220,33176,31954],{"class":264},[220,33178,33179,33181,33183],{"class":222,"line":644},[220,33180,2550],{"class":264},[220,33182,2553],{"class":420},[220,33184,386],{"class":264},[220,33186,33187,33189,33191],{"class":222,"line":650},[220,33188,2567],{"class":264},[220,33190,33066],{"class":420},[220,33192,359],{"class":264},[220,33194,33195,33197,33199],{"class":222,"line":656},[220,33196,402],{"class":264},[220,33198,347],{"class":420},[220,33200,359],{"class":264},[212,33202,33203],{"className":2844,"code":33144,"language":2846,"meta":178,"style":178},[99,33204,33205,33213,33219,33229,33233,33241,33249],{"__ignoreMap":178},[220,33206,33207,33209,33211],{"class":222,"line":223},[220,33208,343],{"class":264},[220,33210,347],{"class":420},[220,33212,359],{"class":264},[220,33214,33215,33217],{"class":222,"line":179},[220,33216,364],{"class":264},[220,33218,33105],{"class":420},[220,33220,33221,33223,33225,33227],{"class":222,"line":389},[220,33222,20477],{"class":226},[220,33224,29866],{"class":264},[220,33226,18187],{"class":420},[220,33228,749],{"class":264},[220,33230,33231],{"class":222,"line":399},[220,33232,31954],{"class":264},[220,33234,33235,33237,33239],{"class":222,"line":644},[220,33236,2550],{"class":264},[220,33238,2553],{"class":420},[220,33240,386],{"class":264},[220,33242,33243,33245,33247],{"class":222,"line":650},[220,33244,2567],{"class":264},[220,33246,33066],{"class":420},[220,33248,359],{"class":264},[220,33250,33251,33253,33255],{"class":222,"line":656},[220,33252,402],{"class":264},[220,33254,347],{"class":420},[220,33256,359],{"class":264},[212,33258,33259],{"className":468,"code":33144,"language":469,"meta":178,"style":178},[99,33260,33261,33269,33275,33287,33291,33299,33307],{"__ignoreMap":178},[220,33262,33263,33265,33267],{"class":222,"line":223},[220,33264,343],{"class":264},[220,33266,347],{"class":420},[220,33268,359],{"class":264},[220,33270,33271,33273],{"class":222,"line":179},[220,33272,364],{"class":264},[220,33274,33105],{"class":420},[220,33276,33277,33279,33281,33283,33285],{"class":222,"line":389},[220,33278,20477],{"class":226},[220,33280,353],{"class":260},[220,33282,743],{"class":264},[220,33284,18187],{"class":420},[220,33286,749],{"class":264},[220,33288,33289],{"class":222,"line":399},[220,33290,31954],{"class":264},[220,33292,33293,33295,33297],{"class":222,"line":644},[220,33294,2550],{"class":264},[220,33296,2553],{"class":420},[220,33298,386],{"class":264},[220,33300,33301,33303,33305],{"class":222,"line":650},[220,33302,2567],{"class":264},[220,33304,33066],{"class":420},[220,33306,359],{"class":264},[220,33308,33309,33311,33313],{"class":222,"line":656},[220,33310,402],{"class":264},[220,33312,347],{"class":420},[220,33314,359],{"class":264},[212,33316,33318],{"className":251,"code":33317,"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,33319,33320,33330,33334,33348,33352,33365,33373,33377,33381],{"__ignoreMap":178},[220,33321,33322,33324,33326,33328],{"class":222,"line":223},[220,33323,261],{"class":260},[220,33325,11507],{"class":264},[220,33327,268],{"class":260},[220,33329,4007],{"class":230},[220,33331,33332],{"class":222,"line":179},[220,33333,647],{"emptyLinePlaceholder":194},[220,33335,33336,33338,33340,33342,33344,33346],{"class":222,"line":389},[220,33337,1735],{"class":260},[220,33339,1738],{"class":420},[220,33341,1741],{"class":260},[220,33343,1744],{"class":260},[220,33345,1747],{"class":226},[220,33347,1750],{"class":264},[220,33349,33350],{"class":222,"line":399},[220,33351,1765],{"class":264},[220,33353,33354,33356,33359,33361,33363],{"class":222,"line":644},[220,33355,1770],{"class":264},[220,33357,33358],{"class":230},"'BarShift'",[220,33360,32198],{"class":264},[220,33362,18187],{"class":420},[220,33364,7541],{"class":264},[220,33366,33367,33369,33371],{"class":222,"line":650},[220,33368,7009],{"class":264},[220,33370,3206],{"class":230},[220,33372,2465],{"class":264},[220,33374,33375],{"class":222,"line":656},[220,33376,7026],{"class":264},[220,33378,33379],{"class":222,"line":673},[220,33380,1787],{"class":264},[220,33382,33383],{"class":222,"line":682},[220,33384,1792],{"class":264},[1504,33386,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":33388},[33389,33390],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Distortions",{},"\u002Fdocs\u002Fcomponents\u002Fbarshift",{"title":33066,"description":33074},"docs\u002Fcomponents\u002FBarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":33398,"title":33399,"body":33400,"category":33668,"componentType":25878,"description":33407,"extension":191,"meta":33669,"navigation":194,"path":33670,"requiresChild":194,"seo":33671,"stem":33672,"__hash__":33673},"components\u002Fdocs\u002Fcomponents\u002FBarnDoors.md","BarnDoors",{"type":8,"value":33401,"toc":33664},[33402,33405,33408,33410,33412,33415,33417,33662],[11,33403,33399],{"id":33404},"barndoors",[15,33406,33407],{},"Split the content along a center line and wipe outward in both directions",[31906,33409],{"component":33399},[23,33411,31910],{"id":26528},[31912,33413],{":props":33414},"[{\"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,33416,31918],{"id":31917},[246,33418,33419,33464,33508,33552,33596],{":tabs":1557},[212,33420,33422],{"className":334,"code":33421,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBarnDoors>\n \u003CCircle \u002F>\n \u003C\u002FBarnDoors>\n\u003C\u002FShader>\n",[99,33423,33424,33432,33440,33448,33456],{"__ignoreMap":178},[220,33425,33426,33428,33430],{"class":222,"line":223},[220,33427,343],{"class":264},[220,33429,347],{"class":346},[220,33431,359],{"class":264},[220,33433,33434,33436,33438],{"class":222,"line":179},[220,33435,364],{"class":264},[220,33437,33399],{"class":346},[220,33439,359],{"class":264},[220,33441,33442,33444,33446],{"class":222,"line":389},[220,33443,2550],{"class":264},[220,33445,2553],{"class":346},[220,33447,386],{"class":264},[220,33449,33450,33452,33454],{"class":222,"line":399},[220,33451,2567],{"class":264},[220,33453,33399],{"class":346},[220,33455,359],{"class":264},[220,33457,33458,33460,33462],{"class":222,"line":644},[220,33459,402],{"class":264},[220,33461,347],{"class":346},[220,33463,359],{"class":264},[212,33465,33466],{"className":409,"code":33421,"language":411,"meta":178,"style":178},[99,33467,33468,33476,33484,33492,33500],{"__ignoreMap":178},[220,33469,33470,33472,33474],{"class":222,"line":223},[220,33471,343],{"class":264},[220,33473,347],{"class":420},[220,33475,359],{"class":264},[220,33477,33478,33480,33482],{"class":222,"line":179},[220,33479,364],{"class":264},[220,33481,33399],{"class":420},[220,33483,359],{"class":264},[220,33485,33486,33488,33490],{"class":222,"line":389},[220,33487,2550],{"class":264},[220,33489,2553],{"class":420},[220,33491,386],{"class":264},[220,33493,33494,33496,33498],{"class":222,"line":399},[220,33495,2567],{"class":264},[220,33497,33399],{"class":420},[220,33499,359],{"class":264},[220,33501,33502,33504,33506],{"class":222,"line":644},[220,33503,402],{"class":264},[220,33505,347],{"class":420},[220,33507,359],{"class":264},[212,33509,33510],{"className":2844,"code":33421,"language":2846,"meta":178,"style":178},[99,33511,33512,33520,33528,33536,33544],{"__ignoreMap":178},[220,33513,33514,33516,33518],{"class":222,"line":223},[220,33515,343],{"class":264},[220,33517,347],{"class":420},[220,33519,359],{"class":264},[220,33521,33522,33524,33526],{"class":222,"line":179},[220,33523,364],{"class":264},[220,33525,33399],{"class":420},[220,33527,359],{"class":264},[220,33529,33530,33532,33534],{"class":222,"line":389},[220,33531,2550],{"class":264},[220,33533,2553],{"class":420},[220,33535,386],{"class":264},[220,33537,33538,33540,33542],{"class":222,"line":399},[220,33539,2567],{"class":264},[220,33541,33399],{"class":420},[220,33543,359],{"class":264},[220,33545,33546,33548,33550],{"class":222,"line":644},[220,33547,402],{"class":264},[220,33549,347],{"class":420},[220,33551,359],{"class":264},[212,33553,33554],{"className":468,"code":33421,"language":469,"meta":178,"style":178},[99,33555,33556,33564,33572,33580,33588],{"__ignoreMap":178},[220,33557,33558,33560,33562],{"class":222,"line":223},[220,33559,343],{"class":264},[220,33561,347],{"class":420},[220,33563,359],{"class":264},[220,33565,33566,33568,33570],{"class":222,"line":179},[220,33567,364],{"class":264},[220,33569,33399],{"class":420},[220,33571,359],{"class":264},[220,33573,33574,33576,33578],{"class":222,"line":389},[220,33575,2550],{"class":264},[220,33577,2553],{"class":420},[220,33579,386],{"class":264},[220,33581,33582,33584,33586],{"class":222,"line":399},[220,33583,2567],{"class":264},[220,33585,33399],{"class":420},[220,33587,359],{"class":264},[220,33589,33590,33592,33594],{"class":222,"line":644},[220,33591,402],{"class":264},[220,33593,347],{"class":420},[220,33595,359],{"class":264},[212,33597,33599],{"className":251,"code":33598,"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,33600,33601,33611,33615,33629,33633,33642,33650,33654,33658],{"__ignoreMap":178},[220,33602,33603,33605,33607,33609],{"class":222,"line":223},[220,33604,261],{"class":260},[220,33606,11507],{"class":264},[220,33608,268],{"class":260},[220,33610,4007],{"class":230},[220,33612,33613],{"class":222,"line":179},[220,33614,647],{"emptyLinePlaceholder":194},[220,33616,33617,33619,33621,33623,33625,33627],{"class":222,"line":389},[220,33618,1735],{"class":260},[220,33620,1738],{"class":420},[220,33622,1741],{"class":260},[220,33624,1744],{"class":260},[220,33626,1747],{"class":226},[220,33628,1750],{"class":264},[220,33630,33631],{"class":222,"line":399},[220,33632,1765],{"class":264},[220,33634,33635,33637,33640],{"class":222,"line":644},[220,33636,1770],{"class":264},[220,33638,33639],{"class":230},"'BarnDoors'",[220,33641,7004],{"class":264},[220,33643,33644,33646,33648],{"class":222,"line":650},[220,33645,7009],{"class":264},[220,33647,3206],{"class":230},[220,33649,2465],{"class":264},[220,33651,33652],{"class":222,"line":656},[220,33653,7026],{"class":264},[220,33655,33656],{"class":222,"line":673},[220,33657,1787],{"class":264},[220,33659,33660],{"class":222,"line":682},[220,33661,1792],{"class":264},[1504,33663,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":33665},[33666,33667],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Transitions",{},"\u002Fdocs\u002Fcomponents\u002Fbarndoors",{"title":33399,"description":33407},"docs\u002Fcomponents\u002FBarnDoors","73aNA7NyczNQKFcurXoO42FtB4UEaUOUGpMTLW3y3js",{"id":33675,"title":33676,"body":33677,"category":33058,"componentType":25872,"description":33684,"extension":191,"meta":33869,"navigation":194,"path":33870,"requiresChild":32525,"seo":33871,"stem":33872,"__hash__":33873},"components\u002Fdocs\u002Fcomponents\u002FBeam.md","Beam",{"type":8,"value":33678,"toc":33865},[33679,33682,33685,33687,33689,33692,33694,33863],[11,33680,33676],{"id":33681},"beam",[15,33683,33684],{},"A beam of light from one point to another.",[31906,33686],{"component":33676},[23,33688,31910],{"id":26528},[31912,33690],{":props":33691},"[{\"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,33693,31918],{"id":31917},[246,33695,33696,33725,33753,33781,33809],{":tabs":1557},[212,33697,33699],{"className":334,"code":33698,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBeam \u002F>\n\u003C\u002FShader>\n",[99,33700,33701,33709,33717],{"__ignoreMap":178},[220,33702,33703,33705,33707],{"class":222,"line":223},[220,33704,343],{"class":264},[220,33706,347],{"class":346},[220,33708,359],{"class":264},[220,33710,33711,33713,33715],{"class":222,"line":179},[220,33712,364],{"class":264},[220,33714,33676],{"class":346},[220,33716,386],{"class":264},[220,33718,33719,33721,33723],{"class":222,"line":389},[220,33720,402],{"class":264},[220,33722,347],{"class":346},[220,33724,359],{"class":264},[212,33726,33727],{"className":409,"code":33698,"language":411,"meta":178,"style":178},[99,33728,33729,33737,33745],{"__ignoreMap":178},[220,33730,33731,33733,33735],{"class":222,"line":223},[220,33732,343],{"class":264},[220,33734,347],{"class":420},[220,33736,359],{"class":264},[220,33738,33739,33741,33743],{"class":222,"line":179},[220,33740,364],{"class":264},[220,33742,33676],{"class":420},[220,33744,386],{"class":264},[220,33746,33747,33749,33751],{"class":222,"line":389},[220,33748,402],{"class":264},[220,33750,347],{"class":420},[220,33752,359],{"class":264},[212,33754,33755],{"className":2844,"code":33698,"language":2846,"meta":178,"style":178},[99,33756,33757,33765,33773],{"__ignoreMap":178},[220,33758,33759,33761,33763],{"class":222,"line":223},[220,33760,343],{"class":264},[220,33762,347],{"class":420},[220,33764,359],{"class":264},[220,33766,33767,33769,33771],{"class":222,"line":179},[220,33768,364],{"class":264},[220,33770,33676],{"class":420},[220,33772,386],{"class":264},[220,33774,33775,33777,33779],{"class":222,"line":389},[220,33776,402],{"class":264},[220,33778,347],{"class":420},[220,33780,359],{"class":264},[212,33782,33783],{"className":468,"code":33698,"language":469,"meta":178,"style":178},[99,33784,33785,33793,33801],{"__ignoreMap":178},[220,33786,33787,33789,33791],{"class":222,"line":223},[220,33788,343],{"class":264},[220,33790,347],{"class":420},[220,33792,359],{"class":264},[220,33794,33795,33797,33799],{"class":222,"line":179},[220,33796,364],{"class":264},[220,33798,33676],{"class":420},[220,33800,386],{"class":264},[220,33802,33803,33805,33807],{"class":222,"line":389},[220,33804,402],{"class":264},[220,33806,347],{"class":420},[220,33808,359],{"class":264},[212,33810,33812],{"className":251,"code":33811,"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,33813,33814,33824,33828,33842,33846,33855,33859],{"__ignoreMap":178},[220,33815,33816,33818,33820,33822],{"class":222,"line":223},[220,33817,261],{"class":260},[220,33819,11507],{"class":264},[220,33821,268],{"class":260},[220,33823,4007],{"class":230},[220,33825,33826],{"class":222,"line":179},[220,33827,647],{"emptyLinePlaceholder":194},[220,33829,33830,33832,33834,33836,33838,33840],{"class":222,"line":389},[220,33831,1735],{"class":260},[220,33833,1738],{"class":420},[220,33835,1741],{"class":260},[220,33837,1744],{"class":260},[220,33839,1747],{"class":226},[220,33841,1750],{"class":264},[220,33843,33844],{"class":222,"line":399},[220,33845,1765],{"class":264},[220,33847,33848,33850,33853],{"class":222,"line":644},[220,33849,1770],{"class":264},[220,33851,33852],{"class":230},"'Beam'",[220,33854,2465],{"class":264},[220,33856,33857],{"class":222,"line":650},[220,33858,1787],{"class":264},[220,33860,33861],{"class":222,"line":656},[220,33862,1792],{"class":264},[1504,33864,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":33866},[33867,33868],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbeam",{"title":33676,"description":33684},"docs\u002Fcomponents\u002FBeam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":33875,"title":33876,"body":33877,"category":33391,"componentType":25878,"description":33884,"extension":191,"meta":34145,"navigation":194,"path":34146,"requiresChild":194,"seo":34147,"stem":34148,"__hash__":34149},"components\u002Fdocs\u002Fcomponents\u002FBend.md","Bend",{"type":8,"value":33878,"toc":34141},[33879,33882,33885,33887,33889,33892,33894,34139],[11,33880,33876],{"id":33881},"bend",[15,33883,33884],{},"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",[31906,33886],{"component":33876},[23,33888,31910],{"id":26528},[31912,33890],{":props":33891},"[{\"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,33893,31918],{"id":31917},[246,33895,33896,33941,33985,34029,34073],{":tabs":1557},[212,33897,33899],{"className":334,"code":33898,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBend>\n \u003CCircle \u002F>\n \u003C\u002FBend>\n\u003C\u002FShader>\n",[99,33900,33901,33909,33917,33925,33933],{"__ignoreMap":178},[220,33902,33903,33905,33907],{"class":222,"line":223},[220,33904,343],{"class":264},[220,33906,347],{"class":346},[220,33908,359],{"class":264},[220,33910,33911,33913,33915],{"class":222,"line":179},[220,33912,364],{"class":264},[220,33914,33876],{"class":346},[220,33916,359],{"class":264},[220,33918,33919,33921,33923],{"class":222,"line":389},[220,33920,2550],{"class":264},[220,33922,2553],{"class":346},[220,33924,386],{"class":264},[220,33926,33927,33929,33931],{"class":222,"line":399},[220,33928,2567],{"class":264},[220,33930,33876],{"class":346},[220,33932,359],{"class":264},[220,33934,33935,33937,33939],{"class":222,"line":644},[220,33936,402],{"class":264},[220,33938,347],{"class":346},[220,33940,359],{"class":264},[212,33942,33943],{"className":409,"code":33898,"language":411,"meta":178,"style":178},[99,33944,33945,33953,33961,33969,33977],{"__ignoreMap":178},[220,33946,33947,33949,33951],{"class":222,"line":223},[220,33948,343],{"class":264},[220,33950,347],{"class":420},[220,33952,359],{"class":264},[220,33954,33955,33957,33959],{"class":222,"line":179},[220,33956,364],{"class":264},[220,33958,33876],{"class":420},[220,33960,359],{"class":264},[220,33962,33963,33965,33967],{"class":222,"line":389},[220,33964,2550],{"class":264},[220,33966,2553],{"class":420},[220,33968,386],{"class":264},[220,33970,33971,33973,33975],{"class":222,"line":399},[220,33972,2567],{"class":264},[220,33974,33876],{"class":420},[220,33976,359],{"class":264},[220,33978,33979,33981,33983],{"class":222,"line":644},[220,33980,402],{"class":264},[220,33982,347],{"class":420},[220,33984,359],{"class":264},[212,33986,33987],{"className":2844,"code":33898,"language":2846,"meta":178,"style":178},[99,33988,33989,33997,34005,34013,34021],{"__ignoreMap":178},[220,33990,33991,33993,33995],{"class":222,"line":223},[220,33992,343],{"class":264},[220,33994,347],{"class":420},[220,33996,359],{"class":264},[220,33998,33999,34001,34003],{"class":222,"line":179},[220,34000,364],{"class":264},[220,34002,33876],{"class":420},[220,34004,359],{"class":264},[220,34006,34007,34009,34011],{"class":222,"line":389},[220,34008,2550],{"class":264},[220,34010,2553],{"class":420},[220,34012,386],{"class":264},[220,34014,34015,34017,34019],{"class":222,"line":399},[220,34016,2567],{"class":264},[220,34018,33876],{"class":420},[220,34020,359],{"class":264},[220,34022,34023,34025,34027],{"class":222,"line":644},[220,34024,402],{"class":264},[220,34026,347],{"class":420},[220,34028,359],{"class":264},[212,34030,34031],{"className":468,"code":33898,"language":469,"meta":178,"style":178},[99,34032,34033,34041,34049,34057,34065],{"__ignoreMap":178},[220,34034,34035,34037,34039],{"class":222,"line":223},[220,34036,343],{"class":264},[220,34038,347],{"class":420},[220,34040,359],{"class":264},[220,34042,34043,34045,34047],{"class":222,"line":179},[220,34044,364],{"class":264},[220,34046,33876],{"class":420},[220,34048,359],{"class":264},[220,34050,34051,34053,34055],{"class":222,"line":389},[220,34052,2550],{"class":264},[220,34054,2553],{"class":420},[220,34056,386],{"class":264},[220,34058,34059,34061,34063],{"class":222,"line":399},[220,34060,2567],{"class":264},[220,34062,33876],{"class":420},[220,34064,359],{"class":264},[220,34066,34067,34069,34071],{"class":222,"line":644},[220,34068,402],{"class":264},[220,34070,347],{"class":420},[220,34072,359],{"class":264},[212,34074,34076],{"className":251,"code":34075,"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,34077,34078,34088,34092,34106,34110,34119,34127,34131,34135],{"__ignoreMap":178},[220,34079,34080,34082,34084,34086],{"class":222,"line":223},[220,34081,261],{"class":260},[220,34083,11507],{"class":264},[220,34085,268],{"class":260},[220,34087,4007],{"class":230},[220,34089,34090],{"class":222,"line":179},[220,34091,647],{"emptyLinePlaceholder":194},[220,34093,34094,34096,34098,34100,34102,34104],{"class":222,"line":389},[220,34095,1735],{"class":260},[220,34097,1738],{"class":420},[220,34099,1741],{"class":260},[220,34101,1744],{"class":260},[220,34103,1747],{"class":226},[220,34105,1750],{"class":264},[220,34107,34108],{"class":222,"line":399},[220,34109,1765],{"class":264},[220,34111,34112,34114,34117],{"class":222,"line":644},[220,34113,1770],{"class":264},[220,34115,34116],{"class":230},"'Bend'",[220,34118,7004],{"class":264},[220,34120,34121,34123,34125],{"class":222,"line":650},[220,34122,7009],{"class":264},[220,34124,3206],{"class":230},[220,34126,2465],{"class":264},[220,34128,34129],{"class":222,"line":656},[220,34130,7026],{"class":264},[220,34132,34133],{"class":222,"line":673},[220,34134,1787],{"class":264},[220,34136,34137],{"class":222,"line":682},[220,34138,1792],{"class":264},[1504,34140,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":34142},[34143,34144],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbend",{"title":33876,"description":33884},"docs\u002Fcomponents\u002FBend","yTh745yjRF84KyipDFIzuYlGJcnZKEi8xan5ye79WXk",{"id":34151,"title":34152,"body":34153,"category":33058,"componentType":25872,"description":34160,"extension":191,"meta":34345,"navigation":194,"path":34346,"requiresChild":32525,"seo":34347,"stem":34348,"__hash__":34349},"components\u002Fdocs\u002Fcomponents\u002FBlob.md","Blob",{"type":8,"value":34154,"toc":34341},[34155,34158,34161,34163,34165,34168,34170,34339],[11,34156,34152],{"id":34157},"blob",[15,34159,34160],{},"Organic animated blob with 3D lighting and gradients",[31906,34162],{"component":34152},[23,34164,31910],{"id":26528},[31912,34166],{":props":34167},"[{\"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,34169,31918],{"id":31917},[246,34171,34172,34201,34229,34257,34285],{":tabs":1557},[212,34173,34175],{"className":334,"code":34174,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlob \u002F>\n\u003C\u002FShader>\n",[99,34176,34177,34185,34193],{"__ignoreMap":178},[220,34178,34179,34181,34183],{"class":222,"line":223},[220,34180,343],{"class":264},[220,34182,347],{"class":346},[220,34184,359],{"class":264},[220,34186,34187,34189,34191],{"class":222,"line":179},[220,34188,364],{"class":264},[220,34190,34152],{"class":346},[220,34192,386],{"class":264},[220,34194,34195,34197,34199],{"class":222,"line":389},[220,34196,402],{"class":264},[220,34198,347],{"class":346},[220,34200,359],{"class":264},[212,34202,34203],{"className":409,"code":34174,"language":411,"meta":178,"style":178},[99,34204,34205,34213,34221],{"__ignoreMap":178},[220,34206,34207,34209,34211],{"class":222,"line":223},[220,34208,343],{"class":264},[220,34210,347],{"class":420},[220,34212,359],{"class":264},[220,34214,34215,34217,34219],{"class":222,"line":179},[220,34216,364],{"class":264},[220,34218,34152],{"class":420},[220,34220,386],{"class":264},[220,34222,34223,34225,34227],{"class":222,"line":389},[220,34224,402],{"class":264},[220,34226,347],{"class":420},[220,34228,359],{"class":264},[212,34230,34231],{"className":2844,"code":34174,"language":2846,"meta":178,"style":178},[99,34232,34233,34241,34249],{"__ignoreMap":178},[220,34234,34235,34237,34239],{"class":222,"line":223},[220,34236,343],{"class":264},[220,34238,347],{"class":420},[220,34240,359],{"class":264},[220,34242,34243,34245,34247],{"class":222,"line":179},[220,34244,364],{"class":264},[220,34246,34152],{"class":420},[220,34248,386],{"class":264},[220,34250,34251,34253,34255],{"class":222,"line":389},[220,34252,402],{"class":264},[220,34254,347],{"class":420},[220,34256,359],{"class":264},[212,34258,34259],{"className":468,"code":34174,"language":469,"meta":178,"style":178},[99,34260,34261,34269,34277],{"__ignoreMap":178},[220,34262,34263,34265,34267],{"class":222,"line":223},[220,34264,343],{"class":264},[220,34266,347],{"class":420},[220,34268,359],{"class":264},[220,34270,34271,34273,34275],{"class":222,"line":179},[220,34272,364],{"class":264},[220,34274,34152],{"class":420},[220,34276,386],{"class":264},[220,34278,34279,34281,34283],{"class":222,"line":389},[220,34280,402],{"class":264},[220,34282,347],{"class":420},[220,34284,359],{"class":264},[212,34286,34288],{"className":251,"code":34287,"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,34289,34290,34300,34304,34318,34322,34331,34335],{"__ignoreMap":178},[220,34291,34292,34294,34296,34298],{"class":222,"line":223},[220,34293,261],{"class":260},[220,34295,11507],{"class":264},[220,34297,268],{"class":260},[220,34299,4007],{"class":230},[220,34301,34302],{"class":222,"line":179},[220,34303,647],{"emptyLinePlaceholder":194},[220,34305,34306,34308,34310,34312,34314,34316],{"class":222,"line":389},[220,34307,1735],{"class":260},[220,34309,1738],{"class":420},[220,34311,1741],{"class":260},[220,34313,1744],{"class":260},[220,34315,1747],{"class":226},[220,34317,1750],{"class":264},[220,34319,34320],{"class":222,"line":399},[220,34321,1765],{"class":264},[220,34323,34324,34326,34329],{"class":222,"line":644},[220,34325,1770],{"class":264},[220,34327,34328],{"class":230},"'Blob'",[220,34330,2465],{"class":264},[220,34332,34333],{"class":222,"line":650},[220,34334,1787],{"class":264},[220,34336,34337],{"class":222,"line":656},[220,34338,1792],{"class":264},[1504,34340,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":34342},[34343,34344],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fblob",{"title":34152,"description":34160},"docs\u002Fcomponents\u002FBlob","U-pbQn6f0SrlOpH89U1WG2da3ucUQlGSSh6bWsmxdSs",{"id":34351,"title":34352,"body":34353,"category":33668,"componentType":25878,"description":34360,"extension":191,"meta":34621,"navigation":194,"path":34622,"requiresChild":194,"seo":34623,"stem":34624,"__hash__":34625},"components\u002Fdocs\u002Fcomponents\u002FBlockDissolve.md","BlockDissolve",{"type":8,"value":34354,"toc":34617},[34355,34358,34361,34363,34365,34368,34370,34615],[11,34356,34352],{"id":34357},"blockdissolve",[15,34359,34360],{},"Dissolve the content away as a grid of blocks vanishing in random order",[31906,34362],{"component":34352},[23,34364,31910],{"id":26528},[31912,34366],{":props":34367},"[{\"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,34369,31918],{"id":31917},[246,34371,34372,34417,34461,34505,34549],{":tabs":1557},[212,34373,34375],{"className":334,"code":34374,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockDissolve>\n \u003CCircle \u002F>\n \u003C\u002FBlockDissolve>\n\u003C\u002FShader>\n",[99,34376,34377,34385,34393,34401,34409],{"__ignoreMap":178},[220,34378,34379,34381,34383],{"class":222,"line":223},[220,34380,343],{"class":264},[220,34382,347],{"class":346},[220,34384,359],{"class":264},[220,34386,34387,34389,34391],{"class":222,"line":179},[220,34388,364],{"class":264},[220,34390,34352],{"class":346},[220,34392,359],{"class":264},[220,34394,34395,34397,34399],{"class":222,"line":389},[220,34396,2550],{"class":264},[220,34398,2553],{"class":346},[220,34400,386],{"class":264},[220,34402,34403,34405,34407],{"class":222,"line":399},[220,34404,2567],{"class":264},[220,34406,34352],{"class":346},[220,34408,359],{"class":264},[220,34410,34411,34413,34415],{"class":222,"line":644},[220,34412,402],{"class":264},[220,34414,347],{"class":346},[220,34416,359],{"class":264},[212,34418,34419],{"className":409,"code":34374,"language":411,"meta":178,"style":178},[99,34420,34421,34429,34437,34445,34453],{"__ignoreMap":178},[220,34422,34423,34425,34427],{"class":222,"line":223},[220,34424,343],{"class":264},[220,34426,347],{"class":420},[220,34428,359],{"class":264},[220,34430,34431,34433,34435],{"class":222,"line":179},[220,34432,364],{"class":264},[220,34434,34352],{"class":420},[220,34436,359],{"class":264},[220,34438,34439,34441,34443],{"class":222,"line":389},[220,34440,2550],{"class":264},[220,34442,2553],{"class":420},[220,34444,386],{"class":264},[220,34446,34447,34449,34451],{"class":222,"line":399},[220,34448,2567],{"class":264},[220,34450,34352],{"class":420},[220,34452,359],{"class":264},[220,34454,34455,34457,34459],{"class":222,"line":644},[220,34456,402],{"class":264},[220,34458,347],{"class":420},[220,34460,359],{"class":264},[212,34462,34463],{"className":2844,"code":34374,"language":2846,"meta":178,"style":178},[99,34464,34465,34473,34481,34489,34497],{"__ignoreMap":178},[220,34466,34467,34469,34471],{"class":222,"line":223},[220,34468,343],{"class":264},[220,34470,347],{"class":420},[220,34472,359],{"class":264},[220,34474,34475,34477,34479],{"class":222,"line":179},[220,34476,364],{"class":264},[220,34478,34352],{"class":420},[220,34480,359],{"class":264},[220,34482,34483,34485,34487],{"class":222,"line":389},[220,34484,2550],{"class":264},[220,34486,2553],{"class":420},[220,34488,386],{"class":264},[220,34490,34491,34493,34495],{"class":222,"line":399},[220,34492,2567],{"class":264},[220,34494,34352],{"class":420},[220,34496,359],{"class":264},[220,34498,34499,34501,34503],{"class":222,"line":644},[220,34500,402],{"class":264},[220,34502,347],{"class":420},[220,34504,359],{"class":264},[212,34506,34507],{"className":468,"code":34374,"language":469,"meta":178,"style":178},[99,34508,34509,34517,34525,34533,34541],{"__ignoreMap":178},[220,34510,34511,34513,34515],{"class":222,"line":223},[220,34512,343],{"class":264},[220,34514,347],{"class":420},[220,34516,359],{"class":264},[220,34518,34519,34521,34523],{"class":222,"line":179},[220,34520,364],{"class":264},[220,34522,34352],{"class":420},[220,34524,359],{"class":264},[220,34526,34527,34529,34531],{"class":222,"line":389},[220,34528,2550],{"class":264},[220,34530,2553],{"class":420},[220,34532,386],{"class":264},[220,34534,34535,34537,34539],{"class":222,"line":399},[220,34536,2567],{"class":264},[220,34538,34352],{"class":420},[220,34540,359],{"class":264},[220,34542,34543,34545,34547],{"class":222,"line":644},[220,34544,402],{"class":264},[220,34546,347],{"class":420},[220,34548,359],{"class":264},[212,34550,34552],{"className":251,"code":34551,"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,34553,34554,34564,34568,34582,34586,34595,34603,34607,34611],{"__ignoreMap":178},[220,34555,34556,34558,34560,34562],{"class":222,"line":223},[220,34557,261],{"class":260},[220,34559,11507],{"class":264},[220,34561,268],{"class":260},[220,34563,4007],{"class":230},[220,34565,34566],{"class":222,"line":179},[220,34567,647],{"emptyLinePlaceholder":194},[220,34569,34570,34572,34574,34576,34578,34580],{"class":222,"line":389},[220,34571,1735],{"class":260},[220,34573,1738],{"class":420},[220,34575,1741],{"class":260},[220,34577,1744],{"class":260},[220,34579,1747],{"class":226},[220,34581,1750],{"class":264},[220,34583,34584],{"class":222,"line":399},[220,34585,1765],{"class":264},[220,34587,34588,34590,34593],{"class":222,"line":644},[220,34589,1770],{"class":264},[220,34591,34592],{"class":230},"'BlockDissolve'",[220,34594,7004],{"class":264},[220,34596,34597,34599,34601],{"class":222,"line":650},[220,34598,7009],{"class":264},[220,34600,3206],{"class":230},[220,34602,2465],{"class":264},[220,34604,34605],{"class":222,"line":656},[220,34606,7026],{"class":264},[220,34608,34609],{"class":222,"line":673},[220,34610,1787],{"class":264},[220,34612,34613],{"class":222,"line":682},[220,34614,1792],{"class":264},[1504,34616,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":34618},[34619,34620],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fblockdissolve",{"title":34352,"description":34360},"docs\u002Fcomponents\u002FBlockDissolve","eek109j_YYMANDpv7x-fWVWd060AWX7s6NXkZk6R6zE",{"id":34627,"title":34628,"body":34629,"category":33058,"componentType":25872,"description":34636,"extension":191,"meta":34821,"navigation":194,"path":34822,"requiresChild":32525,"seo":34823,"stem":34824,"__hash__":34825},"components\u002Fdocs\u002Fcomponents\u002FBlockNoise.md","BlockNoise",{"type":8,"value":34630,"toc":34817},[34631,34634,34637,34639,34641,34644,34646,34815],[11,34632,34628],{"id":34633},"blocknoise",[15,34635,34636],{},"Blocky value noise with soft cells that morph over time",[31906,34638],{"component":34628},[23,34640,31910],{"id":26528},[31912,34642],{":props":34643},"[{\"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,34645,31918],{"id":31917},[246,34647,34648,34677,34705,34733,34761],{":tabs":1557},[212,34649,34651],{"className":334,"code":34650,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlockNoise \u002F>\n\u003C\u002FShader>\n",[99,34652,34653,34661,34669],{"__ignoreMap":178},[220,34654,34655,34657,34659],{"class":222,"line":223},[220,34656,343],{"class":264},[220,34658,347],{"class":346},[220,34660,359],{"class":264},[220,34662,34663,34665,34667],{"class":222,"line":179},[220,34664,364],{"class":264},[220,34666,34628],{"class":346},[220,34668,386],{"class":264},[220,34670,34671,34673,34675],{"class":222,"line":389},[220,34672,402],{"class":264},[220,34674,347],{"class":346},[220,34676,359],{"class":264},[212,34678,34679],{"className":409,"code":34650,"language":411,"meta":178,"style":178},[99,34680,34681,34689,34697],{"__ignoreMap":178},[220,34682,34683,34685,34687],{"class":222,"line":223},[220,34684,343],{"class":264},[220,34686,347],{"class":420},[220,34688,359],{"class":264},[220,34690,34691,34693,34695],{"class":222,"line":179},[220,34692,364],{"class":264},[220,34694,34628],{"class":420},[220,34696,386],{"class":264},[220,34698,34699,34701,34703],{"class":222,"line":389},[220,34700,402],{"class":264},[220,34702,347],{"class":420},[220,34704,359],{"class":264},[212,34706,34707],{"className":2844,"code":34650,"language":2846,"meta":178,"style":178},[99,34708,34709,34717,34725],{"__ignoreMap":178},[220,34710,34711,34713,34715],{"class":222,"line":223},[220,34712,343],{"class":264},[220,34714,347],{"class":420},[220,34716,359],{"class":264},[220,34718,34719,34721,34723],{"class":222,"line":179},[220,34720,364],{"class":264},[220,34722,34628],{"class":420},[220,34724,386],{"class":264},[220,34726,34727,34729,34731],{"class":222,"line":389},[220,34728,402],{"class":264},[220,34730,347],{"class":420},[220,34732,359],{"class":264},[212,34734,34735],{"className":468,"code":34650,"language":469,"meta":178,"style":178},[99,34736,34737,34745,34753],{"__ignoreMap":178},[220,34738,34739,34741,34743],{"class":222,"line":223},[220,34740,343],{"class":264},[220,34742,347],{"class":420},[220,34744,359],{"class":264},[220,34746,34747,34749,34751],{"class":222,"line":179},[220,34748,364],{"class":264},[220,34750,34628],{"class":420},[220,34752,386],{"class":264},[220,34754,34755,34757,34759],{"class":222,"line":389},[220,34756,402],{"class":264},[220,34758,347],{"class":420},[220,34760,359],{"class":264},[212,34762,34764],{"className":251,"code":34763,"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,34765,34766,34776,34780,34794,34798,34807,34811],{"__ignoreMap":178},[220,34767,34768,34770,34772,34774],{"class":222,"line":223},[220,34769,261],{"class":260},[220,34771,11507],{"class":264},[220,34773,268],{"class":260},[220,34775,4007],{"class":230},[220,34777,34778],{"class":222,"line":179},[220,34779,647],{"emptyLinePlaceholder":194},[220,34781,34782,34784,34786,34788,34790,34792],{"class":222,"line":389},[220,34783,1735],{"class":260},[220,34785,1738],{"class":420},[220,34787,1741],{"class":260},[220,34789,1744],{"class":260},[220,34791,1747],{"class":226},[220,34793,1750],{"class":264},[220,34795,34796],{"class":222,"line":399},[220,34797,1765],{"class":264},[220,34799,34800,34802,34805],{"class":222,"line":644},[220,34801,1770],{"class":264},[220,34803,34804],{"class":230},"'BlockNoise'",[220,34806,2465],{"class":264},[220,34808,34809],{"class":222,"line":650},[220,34810,1787],{"class":264},[220,34812,34813],{"class":222,"line":656},[220,34814,1792],{"class":264},[1504,34816,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":34818},[34819,34820],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fblocknoise",{"title":34628,"description":34636},"docs\u002Fcomponents\u002FBlockNoise","9DKlfn2LX2r4szxlyRLWeJEwGZymEn-SYjJ9ydW2Yt8",{"id":34827,"title":34828,"body":34829,"category":33058,"componentType":25872,"description":34836,"extension":191,"meta":35021,"navigation":194,"path":35022,"requiresChild":32525,"seo":35023,"stem":35024,"__hash__":35025},"components\u002Fdocs\u002Fcomponents\u002FBlueNoise.md","BlueNoise",{"type":8,"value":34830,"toc":35017},[34831,34834,34837,34839,34841,34844,34846,35015],[11,34832,34828],{"id":34833},"bluenoise",[15,34835,34836],{},"High-frequency blue noise — even, grainy speckle ideal for dithering",[31906,34838],{"component":34828},[23,34840,31910],{"id":26528},[31912,34842],{":props":34843},"[{\"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,34845,31918],{"id":31917},[246,34847,34848,34877,34905,34933,34961],{":tabs":1557},[212,34849,34851],{"className":334,"code":34850,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlueNoise \u002F>\n\u003C\u002FShader>\n",[99,34852,34853,34861,34869],{"__ignoreMap":178},[220,34854,34855,34857,34859],{"class":222,"line":223},[220,34856,343],{"class":264},[220,34858,347],{"class":346},[220,34860,359],{"class":264},[220,34862,34863,34865,34867],{"class":222,"line":179},[220,34864,364],{"class":264},[220,34866,34828],{"class":346},[220,34868,386],{"class":264},[220,34870,34871,34873,34875],{"class":222,"line":389},[220,34872,402],{"class":264},[220,34874,347],{"class":346},[220,34876,359],{"class":264},[212,34878,34879],{"className":409,"code":34850,"language":411,"meta":178,"style":178},[99,34880,34881,34889,34897],{"__ignoreMap":178},[220,34882,34883,34885,34887],{"class":222,"line":223},[220,34884,343],{"class":264},[220,34886,347],{"class":420},[220,34888,359],{"class":264},[220,34890,34891,34893,34895],{"class":222,"line":179},[220,34892,364],{"class":264},[220,34894,34828],{"class":420},[220,34896,386],{"class":264},[220,34898,34899,34901,34903],{"class":222,"line":389},[220,34900,402],{"class":264},[220,34902,347],{"class":420},[220,34904,359],{"class":264},[212,34906,34907],{"className":2844,"code":34850,"language":2846,"meta":178,"style":178},[99,34908,34909,34917,34925],{"__ignoreMap":178},[220,34910,34911,34913,34915],{"class":222,"line":223},[220,34912,343],{"class":264},[220,34914,347],{"class":420},[220,34916,359],{"class":264},[220,34918,34919,34921,34923],{"class":222,"line":179},[220,34920,364],{"class":264},[220,34922,34828],{"class":420},[220,34924,386],{"class":264},[220,34926,34927,34929,34931],{"class":222,"line":389},[220,34928,402],{"class":264},[220,34930,347],{"class":420},[220,34932,359],{"class":264},[212,34934,34935],{"className":468,"code":34850,"language":469,"meta":178,"style":178},[99,34936,34937,34945,34953],{"__ignoreMap":178},[220,34938,34939,34941,34943],{"class":222,"line":223},[220,34940,343],{"class":264},[220,34942,347],{"class":420},[220,34944,359],{"class":264},[220,34946,34947,34949,34951],{"class":222,"line":179},[220,34948,364],{"class":264},[220,34950,34828],{"class":420},[220,34952,386],{"class":264},[220,34954,34955,34957,34959],{"class":222,"line":389},[220,34956,402],{"class":264},[220,34958,347],{"class":420},[220,34960,359],{"class":264},[212,34962,34964],{"className":251,"code":34963,"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,34965,34966,34976,34980,34994,34998,35007,35011],{"__ignoreMap":178},[220,34967,34968,34970,34972,34974],{"class":222,"line":223},[220,34969,261],{"class":260},[220,34971,11507],{"class":264},[220,34973,268],{"class":260},[220,34975,4007],{"class":230},[220,34977,34978],{"class":222,"line":179},[220,34979,647],{"emptyLinePlaceholder":194},[220,34981,34982,34984,34986,34988,34990,34992],{"class":222,"line":389},[220,34983,1735],{"class":260},[220,34985,1738],{"class":420},[220,34987,1741],{"class":260},[220,34989,1744],{"class":260},[220,34991,1747],{"class":226},[220,34993,1750],{"class":264},[220,34995,34996],{"class":222,"line":399},[220,34997,1765],{"class":264},[220,34999,35000,35002,35005],{"class":222,"line":644},[220,35001,1770],{"class":264},[220,35003,35004],{"class":230},"'BlueNoise'",[220,35006,2465],{"class":264},[220,35008,35009],{"class":222,"line":650},[220,35010,1787],{"class":264},[220,35012,35013],{"class":222,"line":656},[220,35014,1792],{"class":264},[1504,35016,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":35018},[35019,35020],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbluenoise",{"title":34828,"description":34836},"docs\u002Fcomponents\u002FBlueNoise","flT8qqJVpl3NuZ7XyFUOpPXptC3UH2KUJuMBHpfIJhA",{"id":35027,"title":11764,"body":35028,"category":32229,"componentType":25878,"description":35035,"extension":191,"meta":35354,"navigation":194,"path":35355,"requiresChild":194,"seo":35356,"stem":35357,"__hash__":35358},"components\u002Fdocs\u002Fcomponents\u002FBlur.md",{"type":8,"value":35029,"toc":35350},[35030,35033,35036,35038,35040,35043,35045,35348],[11,35031,11764],{"id":35032},"blur",[15,35034,35035],{},"A simple Gaussian blur effect",[31906,35037],{"component":11764},[23,35039,31910],{"id":26528},[31912,35041],{":props":35042},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,35044,31918],{"id":31917},[246,35046,35047,35104,35164,35220,35278],{":tabs":1557},[212,35048,35050],{"className":334,"code":35049,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35051,35052,35060,35067,35076,35080,35088,35096],{"__ignoreMap":178},[220,35053,35054,35056,35058],{"class":222,"line":223},[220,35055,343],{"class":264},[220,35057,347],{"class":346},[220,35059,359],{"class":264},[220,35061,35062,35064],{"class":222,"line":179},[220,35063,364],{"class":264},[220,35065,35066],{"class":346},"Blur\n",[220,35068,35069,35071,35073],{"class":222,"line":389},[220,35070,20366],{"class":226},[220,35072,353],{"class":264},[220,35074,35075],{"class":230},"\"50\"\n",[220,35077,35078],{"class":222,"line":399},[220,35079,31954],{"class":264},[220,35081,35082,35084,35086],{"class":222,"line":644},[220,35083,2550],{"class":264},[220,35085,2553],{"class":346},[220,35087,386],{"class":264},[220,35089,35090,35092,35094],{"class":222,"line":650},[220,35091,2567],{"class":264},[220,35093,11764],{"class":346},[220,35095,359],{"class":264},[220,35097,35098,35100,35102],{"class":222,"line":656},[220,35099,402],{"class":264},[220,35101,347],{"class":346},[220,35103,359],{"class":264},[212,35105,35107],{"className":409,"code":35106,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBlur>\n\u003C\u002FShader>\n",[99,35108,35109,35117,35123,35136,35140,35148,35156],{"__ignoreMap":178},[220,35110,35111,35113,35115],{"class":222,"line":223},[220,35112,343],{"class":264},[220,35114,347],{"class":420},[220,35116,359],{"class":264},[220,35118,35119,35121],{"class":222,"line":179},[220,35120,364],{"class":264},[220,35122,35066],{"class":420},[220,35124,35125,35127,35129,35131,35134],{"class":222,"line":389},[220,35126,20477],{"class":226},[220,35128,353],{"class":260},[220,35130,743],{"class":264},[220,35132,35133],{"class":420},"50",[220,35135,749],{"class":264},[220,35137,35138],{"class":222,"line":399},[220,35139,31954],{"class":264},[220,35141,35142,35144,35146],{"class":222,"line":644},[220,35143,2550],{"class":264},[220,35145,2553],{"class":420},[220,35147,386],{"class":264},[220,35149,35150,35152,35154],{"class":222,"line":650},[220,35151,2567],{"class":264},[220,35153,11764],{"class":420},[220,35155,359],{"class":264},[220,35157,35158,35160,35162],{"class":222,"line":656},[220,35159,402],{"class":264},[220,35161,347],{"class":420},[220,35163,359],{"class":264},[212,35165,35166],{"className":2844,"code":35106,"language":2846,"meta":178,"style":178},[99,35167,35168,35176,35182,35192,35196,35204,35212],{"__ignoreMap":178},[220,35169,35170,35172,35174],{"class":222,"line":223},[220,35171,343],{"class":264},[220,35173,347],{"class":420},[220,35175,359],{"class":264},[220,35177,35178,35180],{"class":222,"line":179},[220,35179,364],{"class":264},[220,35181,35066],{"class":420},[220,35183,35184,35186,35188,35190],{"class":222,"line":389},[220,35185,20477],{"class":226},[220,35187,29866],{"class":264},[220,35189,35133],{"class":420},[220,35191,749],{"class":264},[220,35193,35194],{"class":222,"line":399},[220,35195,31954],{"class":264},[220,35197,35198,35200,35202],{"class":222,"line":644},[220,35199,2550],{"class":264},[220,35201,2553],{"class":420},[220,35203,386],{"class":264},[220,35205,35206,35208,35210],{"class":222,"line":650},[220,35207,2567],{"class":264},[220,35209,11764],{"class":420},[220,35211,359],{"class":264},[220,35213,35214,35216,35218],{"class":222,"line":656},[220,35215,402],{"class":264},[220,35217,347],{"class":420},[220,35219,359],{"class":264},[212,35221,35222],{"className":468,"code":35106,"language":469,"meta":178,"style":178},[99,35223,35224,35232,35238,35250,35254,35262,35270],{"__ignoreMap":178},[220,35225,35226,35228,35230],{"class":222,"line":223},[220,35227,343],{"class":264},[220,35229,347],{"class":420},[220,35231,359],{"class":264},[220,35233,35234,35236],{"class":222,"line":179},[220,35235,364],{"class":264},[220,35237,35066],{"class":420},[220,35239,35240,35242,35244,35246,35248],{"class":222,"line":389},[220,35241,20477],{"class":226},[220,35243,353],{"class":260},[220,35245,743],{"class":264},[220,35247,35133],{"class":420},[220,35249,749],{"class":264},[220,35251,35252],{"class":222,"line":399},[220,35253,31954],{"class":264},[220,35255,35256,35258,35260],{"class":222,"line":644},[220,35257,2550],{"class":264},[220,35259,2553],{"class":420},[220,35261,386],{"class":264},[220,35263,35264,35266,35268],{"class":222,"line":650},[220,35265,2567],{"class":264},[220,35267,11764],{"class":420},[220,35269,359],{"class":264},[220,35271,35272,35274,35276],{"class":222,"line":656},[220,35273,402],{"class":264},[220,35275,347],{"class":420},[220,35277,359],{"class":264},[212,35279,35281],{"className":251,"code":35280,"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,35282,35283,35293,35297,35311,35315,35328,35336,35340,35344],{"__ignoreMap":178},[220,35284,35285,35287,35289,35291],{"class":222,"line":223},[220,35286,261],{"class":260},[220,35288,11507],{"class":264},[220,35290,268],{"class":260},[220,35292,4007],{"class":230},[220,35294,35295],{"class":222,"line":179},[220,35296,647],{"emptyLinePlaceholder":194},[220,35298,35299,35301,35303,35305,35307,35309],{"class":222,"line":389},[220,35300,1735],{"class":260},[220,35302,1738],{"class":420},[220,35304,1741],{"class":260},[220,35306,1744],{"class":260},[220,35308,1747],{"class":226},[220,35310,1750],{"class":264},[220,35312,35313],{"class":222,"line":399},[220,35314,1765],{"class":264},[220,35316,35317,35319,35322,35324,35326],{"class":222,"line":644},[220,35318,1770],{"class":264},[220,35320,35321],{"class":230},"'Blur'",[220,35323,32198],{"class":264},[220,35325,35133],{"class":420},[220,35327,7541],{"class":264},[220,35329,35330,35332,35334],{"class":222,"line":650},[220,35331,7009],{"class":264},[220,35333,3206],{"class":230},[220,35335,2465],{"class":264},[220,35337,35338],{"class":222,"line":656},[220,35339,7026],{"class":264},[220,35341,35342],{"class":222,"line":673},[220,35343,1787],{"class":264},[220,35345,35346],{"class":222,"line":682},[220,35347,1792],{"class":264},[1504,35349,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35351},[35352,35353],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fblur",{"title":11764,"description":35035},"docs\u002Fcomponents\u002FBlur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":35360,"title":35361,"body":35362,"category":35554,"componentType":25872,"description":35369,"extension":191,"meta":35555,"navigation":194,"path":35556,"requiresChild":32525,"seo":35557,"stem":35558,"__hash__":35559},"components\u002Fdocs\u002Fcomponents\u002FBoids.md","Boids",{"type":8,"value":35363,"toc":35550},[35364,35367,35370,35372,35374,35377,35379,35548],[11,35365,35361],{"id":35366},"boids",[15,35368,35369],{},"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",[31906,35371],{"component":35361},[23,35373,31910],{"id":26528},[31912,35375],{":props":35376},"[{\"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,35378,31918],{"id":31917},[246,35380,35381,35410,35438,35466,35494],{":tabs":1557},[212,35382,35384],{"className":334,"code":35383,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBoids \u002F>\n\u003C\u002FShader>\n",[99,35385,35386,35394,35402],{"__ignoreMap":178},[220,35387,35388,35390,35392],{"class":222,"line":223},[220,35389,343],{"class":264},[220,35391,347],{"class":346},[220,35393,359],{"class":264},[220,35395,35396,35398,35400],{"class":222,"line":179},[220,35397,364],{"class":264},[220,35399,35361],{"class":346},[220,35401,386],{"class":264},[220,35403,35404,35406,35408],{"class":222,"line":389},[220,35405,402],{"class":264},[220,35407,347],{"class":346},[220,35409,359],{"class":264},[212,35411,35412],{"className":409,"code":35383,"language":411,"meta":178,"style":178},[99,35413,35414,35422,35430],{"__ignoreMap":178},[220,35415,35416,35418,35420],{"class":222,"line":223},[220,35417,343],{"class":264},[220,35419,347],{"class":420},[220,35421,359],{"class":264},[220,35423,35424,35426,35428],{"class":222,"line":179},[220,35425,364],{"class":264},[220,35427,35361],{"class":420},[220,35429,386],{"class":264},[220,35431,35432,35434,35436],{"class":222,"line":389},[220,35433,402],{"class":264},[220,35435,347],{"class":420},[220,35437,359],{"class":264},[212,35439,35440],{"className":2844,"code":35383,"language":2846,"meta":178,"style":178},[99,35441,35442,35450,35458],{"__ignoreMap":178},[220,35443,35444,35446,35448],{"class":222,"line":223},[220,35445,343],{"class":264},[220,35447,347],{"class":420},[220,35449,359],{"class":264},[220,35451,35452,35454,35456],{"class":222,"line":179},[220,35453,364],{"class":264},[220,35455,35361],{"class":420},[220,35457,386],{"class":264},[220,35459,35460,35462,35464],{"class":222,"line":389},[220,35461,402],{"class":264},[220,35463,347],{"class":420},[220,35465,359],{"class":264},[212,35467,35468],{"className":468,"code":35383,"language":469,"meta":178,"style":178},[99,35469,35470,35478,35486],{"__ignoreMap":178},[220,35471,35472,35474,35476],{"class":222,"line":223},[220,35473,343],{"class":264},[220,35475,347],{"class":420},[220,35477,359],{"class":264},[220,35479,35480,35482,35484],{"class":222,"line":179},[220,35481,364],{"class":264},[220,35483,35361],{"class":420},[220,35485,386],{"class":264},[220,35487,35488,35490,35492],{"class":222,"line":389},[220,35489,402],{"class":264},[220,35491,347],{"class":420},[220,35493,359],{"class":264},[212,35495,35497],{"className":251,"code":35496,"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,35498,35499,35509,35513,35527,35531,35540,35544],{"__ignoreMap":178},[220,35500,35501,35503,35505,35507],{"class":222,"line":223},[220,35502,261],{"class":260},[220,35504,11507],{"class":264},[220,35506,268],{"class":260},[220,35508,4007],{"class":230},[220,35510,35511],{"class":222,"line":179},[220,35512,647],{"emptyLinePlaceholder":194},[220,35514,35515,35517,35519,35521,35523,35525],{"class":222,"line":389},[220,35516,1735],{"class":260},[220,35518,1738],{"class":420},[220,35520,1741],{"class":260},[220,35522,1744],{"class":260},[220,35524,1747],{"class":226},[220,35526,1750],{"class":264},[220,35528,35529],{"class":222,"line":399},[220,35530,1765],{"class":264},[220,35532,35533,35535,35538],{"class":222,"line":644},[220,35534,1770],{"class":264},[220,35536,35537],{"class":230},"'Boids'",[220,35539,2465],{"class":264},[220,35541,35542],{"class":222,"line":650},[220,35543,1787],{"class":264},[220,35545,35546],{"class":222,"line":656},[220,35547,1792],{"class":264},[1504,35549,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":35551},[35552,35553],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Interactive",{},"\u002Fdocs\u002Fcomponents\u002Fboids",{"title":35361,"description":35369},"docs\u002Fcomponents\u002FBoids","hdhqsDQg5KnzNA_UfsNUlag4VVQ8bEJ7WQJ5TSK_WTs",{"id":35561,"title":35562,"body":35563,"category":32229,"componentType":25878,"description":35570,"extension":191,"meta":35887,"navigation":194,"path":35888,"requiresChild":194,"seo":35889,"stem":35890,"__hash__":35891},"components\u002Fdocs\u002Fcomponents\u002FBokehBlur.md","BokehBlur",{"type":8,"value":35564,"toc":35883},[35565,35568,35571,35573,35575,35578,35580,35881],[11,35566,35562],{"id":35567},"bokehblur",[15,35569,35570],{},"Photographic lens blur where bright highlights bloom into aperture-shaped discs",[31906,35572],{"component":35562},[23,35574,31910],{"id":26528},[31912,35576],{":props":35577},"[{\"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,35579,31918],{"id":31917},[246,35581,35582,35638,35697,35753,35811],{":tabs":1557},[212,35583,35585],{"className":334,"code":35584,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n :radius=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35586,35587,35595,35602,35610,35614,35622,35630],{"__ignoreMap":178},[220,35588,35589,35591,35593],{"class":222,"line":223},[220,35590,343],{"class":264},[220,35592,347],{"class":346},[220,35594,359],{"class":264},[220,35596,35597,35599],{"class":222,"line":179},[220,35598,364],{"class":264},[220,35600,35601],{"class":346},"BokehBlur\n",[220,35603,35604,35606,35608],{"class":222,"line":389},[220,35605,17400],{"class":226},[220,35607,353],{"class":264},[220,35609,35075],{"class":230},[220,35611,35612],{"class":222,"line":399},[220,35613,31954],{"class":264},[220,35615,35616,35618,35620],{"class":222,"line":644},[220,35617,2550],{"class":264},[220,35619,2553],{"class":346},[220,35621,386],{"class":264},[220,35623,35624,35626,35628],{"class":222,"line":650},[220,35625,2567],{"class":264},[220,35627,35562],{"class":346},[220,35629,359],{"class":264},[220,35631,35632,35634,35636],{"class":222,"line":656},[220,35633,402],{"class":264},[220,35635,347],{"class":346},[220,35637,359],{"class":264},[212,35639,35641],{"className":409,"code":35640,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBokehBlur\n radius={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FBokehBlur>\n\u003C\u002FShader>\n",[99,35642,35643,35651,35657,35669,35673,35681,35689],{"__ignoreMap":178},[220,35644,35645,35647,35649],{"class":222,"line":223},[220,35646,343],{"class":264},[220,35648,347],{"class":420},[220,35650,359],{"class":264},[220,35652,35653,35655],{"class":222,"line":179},[220,35654,364],{"class":264},[220,35656,35601],{"class":420},[220,35658,35659,35661,35663,35665,35667],{"class":222,"line":389},[220,35660,9640],{"class":226},[220,35662,353],{"class":260},[220,35664,743],{"class":264},[220,35666,35133],{"class":420},[220,35668,749],{"class":264},[220,35670,35671],{"class":222,"line":399},[220,35672,31954],{"class":264},[220,35674,35675,35677,35679],{"class":222,"line":644},[220,35676,2550],{"class":264},[220,35678,2553],{"class":420},[220,35680,386],{"class":264},[220,35682,35683,35685,35687],{"class":222,"line":650},[220,35684,2567],{"class":264},[220,35686,35562],{"class":420},[220,35688,359],{"class":264},[220,35690,35691,35693,35695],{"class":222,"line":656},[220,35692,402],{"class":264},[220,35694,347],{"class":420},[220,35696,359],{"class":264},[212,35698,35699],{"className":2844,"code":35640,"language":2846,"meta":178,"style":178},[99,35700,35701,35709,35715,35725,35729,35737,35745],{"__ignoreMap":178},[220,35702,35703,35705,35707],{"class":222,"line":223},[220,35704,343],{"class":264},[220,35706,347],{"class":420},[220,35708,359],{"class":264},[220,35710,35711,35713],{"class":222,"line":179},[220,35712,364],{"class":264},[220,35714,35601],{"class":420},[220,35716,35717,35719,35721,35723],{"class":222,"line":389},[220,35718,9640],{"class":226},[220,35720,29866],{"class":264},[220,35722,35133],{"class":420},[220,35724,749],{"class":264},[220,35726,35727],{"class":222,"line":399},[220,35728,31954],{"class":264},[220,35730,35731,35733,35735],{"class":222,"line":644},[220,35732,2550],{"class":264},[220,35734,2553],{"class":420},[220,35736,386],{"class":264},[220,35738,35739,35741,35743],{"class":222,"line":650},[220,35740,2567],{"class":264},[220,35742,35562],{"class":420},[220,35744,359],{"class":264},[220,35746,35747,35749,35751],{"class":222,"line":656},[220,35748,402],{"class":264},[220,35750,347],{"class":420},[220,35752,359],{"class":264},[212,35754,35755],{"className":468,"code":35640,"language":469,"meta":178,"style":178},[99,35756,35757,35765,35771,35783,35787,35795,35803],{"__ignoreMap":178},[220,35758,35759,35761,35763],{"class":222,"line":223},[220,35760,343],{"class":264},[220,35762,347],{"class":420},[220,35764,359],{"class":264},[220,35766,35767,35769],{"class":222,"line":179},[220,35768,364],{"class":264},[220,35770,35601],{"class":420},[220,35772,35773,35775,35777,35779,35781],{"class":222,"line":389},[220,35774,9640],{"class":226},[220,35776,353],{"class":260},[220,35778,743],{"class":264},[220,35780,35133],{"class":420},[220,35782,749],{"class":264},[220,35784,35785],{"class":222,"line":399},[220,35786,31954],{"class":264},[220,35788,35789,35791,35793],{"class":222,"line":644},[220,35790,2550],{"class":264},[220,35792,2553],{"class":420},[220,35794,386],{"class":264},[220,35796,35797,35799,35801],{"class":222,"line":650},[220,35798,2567],{"class":264},[220,35800,35562],{"class":420},[220,35802,359],{"class":264},[220,35804,35805,35807,35809],{"class":222,"line":656},[220,35806,402],{"class":264},[220,35808,347],{"class":420},[220,35810,359],{"class":264},[212,35812,35814],{"className":251,"code":35813,"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,35815,35816,35826,35830,35844,35848,35861,35869,35873,35877],{"__ignoreMap":178},[220,35817,35818,35820,35822,35824],{"class":222,"line":223},[220,35819,261],{"class":260},[220,35821,11507],{"class":264},[220,35823,268],{"class":260},[220,35825,4007],{"class":230},[220,35827,35828],{"class":222,"line":179},[220,35829,647],{"emptyLinePlaceholder":194},[220,35831,35832,35834,35836,35838,35840,35842],{"class":222,"line":389},[220,35833,1735],{"class":260},[220,35835,1738],{"class":420},[220,35837,1741],{"class":260},[220,35839,1744],{"class":260},[220,35841,1747],{"class":226},[220,35843,1750],{"class":264},[220,35845,35846],{"class":222,"line":399},[220,35847,1765],{"class":264},[220,35849,35850,35852,35855,35857,35859],{"class":222,"line":644},[220,35851,1770],{"class":264},[220,35853,35854],{"class":230},"'BokehBlur'",[220,35856,7536],{"class":264},[220,35858,35133],{"class":420},[220,35860,7541],{"class":264},[220,35862,35863,35865,35867],{"class":222,"line":650},[220,35864,7009],{"class":264},[220,35866,3206],{"class":230},[220,35868,2465],{"class":264},[220,35870,35871],{"class":222,"line":656},[220,35872,7026],{"class":264},[220,35874,35875],{"class":222,"line":673},[220,35876,1787],{"class":264},[220,35878,35879],{"class":222,"line":682},[220,35880,1792],{"class":264},[1504,35882,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":35884},[35885,35886],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbokehblur",{"title":35562,"description":35570},"docs\u002Fcomponents\u002FBokehBlur","UvgWoVz1msLk-OLpiNCYNxzzxY6uC56cKmY-6PdjJas",{"id":35893,"title":35894,"body":35895,"category":33058,"componentType":25872,"description":35902,"extension":191,"meta":36087,"navigation":194,"path":36088,"requiresChild":32525,"seo":36089,"stem":36090,"__hash__":36091},"components\u002Fdocs\u002Fcomponents\u002FBrickPattern.md","BrickPattern",{"type":8,"value":35896,"toc":36083},[35897,35900,35903,35905,35907,35910,35912,36081],[11,35898,35894],{"id":35899},"brickpattern",[15,35901,35902],{},"Classic brick wall pattern with alternating rows and mortar gaps",[31906,35904],{"component":35894},[23,35906,31910],{"id":26528},[31912,35908],{":props":35909},"[{\"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,35911,31918],{"id":31917},[246,35913,35914,35943,35971,35999,36027],{":tabs":1557},[212,35915,35917],{"className":334,"code":35916,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrickPattern \u002F>\n\u003C\u002FShader>\n",[99,35918,35919,35927,35935],{"__ignoreMap":178},[220,35920,35921,35923,35925],{"class":222,"line":223},[220,35922,343],{"class":264},[220,35924,347],{"class":346},[220,35926,359],{"class":264},[220,35928,35929,35931,35933],{"class":222,"line":179},[220,35930,364],{"class":264},[220,35932,35894],{"class":346},[220,35934,386],{"class":264},[220,35936,35937,35939,35941],{"class":222,"line":389},[220,35938,402],{"class":264},[220,35940,347],{"class":346},[220,35942,359],{"class":264},[212,35944,35945],{"className":409,"code":35916,"language":411,"meta":178,"style":178},[99,35946,35947,35955,35963],{"__ignoreMap":178},[220,35948,35949,35951,35953],{"class":222,"line":223},[220,35950,343],{"class":264},[220,35952,347],{"class":420},[220,35954,359],{"class":264},[220,35956,35957,35959,35961],{"class":222,"line":179},[220,35958,364],{"class":264},[220,35960,35894],{"class":420},[220,35962,386],{"class":264},[220,35964,35965,35967,35969],{"class":222,"line":389},[220,35966,402],{"class":264},[220,35968,347],{"class":420},[220,35970,359],{"class":264},[212,35972,35973],{"className":2844,"code":35916,"language":2846,"meta":178,"style":178},[99,35974,35975,35983,35991],{"__ignoreMap":178},[220,35976,35977,35979,35981],{"class":222,"line":223},[220,35978,343],{"class":264},[220,35980,347],{"class":420},[220,35982,359],{"class":264},[220,35984,35985,35987,35989],{"class":222,"line":179},[220,35986,364],{"class":264},[220,35988,35894],{"class":420},[220,35990,386],{"class":264},[220,35992,35993,35995,35997],{"class":222,"line":389},[220,35994,402],{"class":264},[220,35996,347],{"class":420},[220,35998,359],{"class":264},[212,36000,36001],{"className":468,"code":35916,"language":469,"meta":178,"style":178},[99,36002,36003,36011,36019],{"__ignoreMap":178},[220,36004,36005,36007,36009],{"class":222,"line":223},[220,36006,343],{"class":264},[220,36008,347],{"class":420},[220,36010,359],{"class":264},[220,36012,36013,36015,36017],{"class":222,"line":179},[220,36014,364],{"class":264},[220,36016,35894],{"class":420},[220,36018,386],{"class":264},[220,36020,36021,36023,36025],{"class":222,"line":389},[220,36022,402],{"class":264},[220,36024,347],{"class":420},[220,36026,359],{"class":264},[212,36028,36030],{"className":251,"code":36029,"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,36031,36032,36042,36046,36060,36064,36073,36077],{"__ignoreMap":178},[220,36033,36034,36036,36038,36040],{"class":222,"line":223},[220,36035,261],{"class":260},[220,36037,11507],{"class":264},[220,36039,268],{"class":260},[220,36041,4007],{"class":230},[220,36043,36044],{"class":222,"line":179},[220,36045,647],{"emptyLinePlaceholder":194},[220,36047,36048,36050,36052,36054,36056,36058],{"class":222,"line":389},[220,36049,1735],{"class":260},[220,36051,1738],{"class":420},[220,36053,1741],{"class":260},[220,36055,1744],{"class":260},[220,36057,1747],{"class":226},[220,36059,1750],{"class":264},[220,36061,36062],{"class":222,"line":399},[220,36063,1765],{"class":264},[220,36065,36066,36068,36071],{"class":222,"line":644},[220,36067,1770],{"class":264},[220,36069,36070],{"class":230},"'BrickPattern'",[220,36072,2465],{"class":264},[220,36074,36075],{"class":222,"line":650},[220,36076,1787],{"class":264},[220,36078,36079],{"class":222,"line":656},[220,36080,1792],{"class":264},[1504,36082,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":36084},[36085,36086],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbrickpattern",{"title":35894,"description":35902},"docs\u002Fcomponents\u002FBrickPattern","N72uvSI6oXAr_sggmz8uwd9seHUACNlXAOKhUg07lt8",{"id":36093,"title":36094,"body":36095,"category":36363,"componentType":25878,"description":36102,"extension":191,"meta":36364,"navigation":194,"path":36365,"requiresChild":194,"seo":36366,"stem":36367,"__hash__":36368},"components\u002Fdocs\u002Fcomponents\u002FBrightnessContrast.md","BrightnessContrast",{"type":8,"value":36096,"toc":36359},[36097,36100,36103,36105,36107,36110,36112,36357],[11,36098,36094],{"id":36099},"brightnesscontrast",[15,36101,36102],{},"Adjust brightness and contrast of the image",[31906,36104],{"component":36094},[23,36106,31910],{"id":26528},[31912,36108],{":props":36109},"[{\"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,36111,31918],{"id":31917},[246,36113,36114,36159,36203,36247,36291],{":tabs":1557},[212,36115,36117],{"className":334,"code":36116,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle \u002F>\n \u003C\u002FBrightnessContrast>\n\u003C\u002FShader>\n",[99,36118,36119,36127,36135,36143,36151],{"__ignoreMap":178},[220,36120,36121,36123,36125],{"class":222,"line":223},[220,36122,343],{"class":264},[220,36124,347],{"class":346},[220,36126,359],{"class":264},[220,36128,36129,36131,36133],{"class":222,"line":179},[220,36130,364],{"class":264},[220,36132,36094],{"class":346},[220,36134,359],{"class":264},[220,36136,36137,36139,36141],{"class":222,"line":389},[220,36138,2550],{"class":264},[220,36140,2553],{"class":346},[220,36142,386],{"class":264},[220,36144,36145,36147,36149],{"class":222,"line":399},[220,36146,2567],{"class":264},[220,36148,36094],{"class":346},[220,36150,359],{"class":264},[220,36152,36153,36155,36157],{"class":222,"line":644},[220,36154,402],{"class":264},[220,36156,347],{"class":346},[220,36158,359],{"class":264},[212,36160,36161],{"className":409,"code":36116,"language":411,"meta":178,"style":178},[99,36162,36163,36171,36179,36187,36195],{"__ignoreMap":178},[220,36164,36165,36167,36169],{"class":222,"line":223},[220,36166,343],{"class":264},[220,36168,347],{"class":420},[220,36170,359],{"class":264},[220,36172,36173,36175,36177],{"class":222,"line":179},[220,36174,364],{"class":264},[220,36176,36094],{"class":420},[220,36178,359],{"class":264},[220,36180,36181,36183,36185],{"class":222,"line":389},[220,36182,2550],{"class":264},[220,36184,2553],{"class":420},[220,36186,386],{"class":264},[220,36188,36189,36191,36193],{"class":222,"line":399},[220,36190,2567],{"class":264},[220,36192,36094],{"class":420},[220,36194,359],{"class":264},[220,36196,36197,36199,36201],{"class":222,"line":644},[220,36198,402],{"class":264},[220,36200,347],{"class":420},[220,36202,359],{"class":264},[212,36204,36205],{"className":2844,"code":36116,"language":2846,"meta":178,"style":178},[99,36206,36207,36215,36223,36231,36239],{"__ignoreMap":178},[220,36208,36209,36211,36213],{"class":222,"line":223},[220,36210,343],{"class":264},[220,36212,347],{"class":420},[220,36214,359],{"class":264},[220,36216,36217,36219,36221],{"class":222,"line":179},[220,36218,364],{"class":264},[220,36220,36094],{"class":420},[220,36222,359],{"class":264},[220,36224,36225,36227,36229],{"class":222,"line":389},[220,36226,2550],{"class":264},[220,36228,2553],{"class":420},[220,36230,386],{"class":264},[220,36232,36233,36235,36237],{"class":222,"line":399},[220,36234,2567],{"class":264},[220,36236,36094],{"class":420},[220,36238,359],{"class":264},[220,36240,36241,36243,36245],{"class":222,"line":644},[220,36242,402],{"class":264},[220,36244,347],{"class":420},[220,36246,359],{"class":264},[212,36248,36249],{"className":468,"code":36116,"language":469,"meta":178,"style":178},[99,36250,36251,36259,36267,36275,36283],{"__ignoreMap":178},[220,36252,36253,36255,36257],{"class":222,"line":223},[220,36254,343],{"class":264},[220,36256,347],{"class":420},[220,36258,359],{"class":264},[220,36260,36261,36263,36265],{"class":222,"line":179},[220,36262,364],{"class":264},[220,36264,36094],{"class":420},[220,36266,359],{"class":264},[220,36268,36269,36271,36273],{"class":222,"line":389},[220,36270,2550],{"class":264},[220,36272,2553],{"class":420},[220,36274,386],{"class":264},[220,36276,36277,36279,36281],{"class":222,"line":399},[220,36278,2567],{"class":264},[220,36280,36094],{"class":420},[220,36282,359],{"class":264},[220,36284,36285,36287,36289],{"class":222,"line":644},[220,36286,402],{"class":264},[220,36288,347],{"class":420},[220,36290,359],{"class":264},[212,36292,36294],{"className":251,"code":36293,"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,36295,36296,36306,36310,36324,36328,36337,36345,36349,36353],{"__ignoreMap":178},[220,36297,36298,36300,36302,36304],{"class":222,"line":223},[220,36299,261],{"class":260},[220,36301,11507],{"class":264},[220,36303,268],{"class":260},[220,36305,4007],{"class":230},[220,36307,36308],{"class":222,"line":179},[220,36309,647],{"emptyLinePlaceholder":194},[220,36311,36312,36314,36316,36318,36320,36322],{"class":222,"line":389},[220,36313,1735],{"class":260},[220,36315,1738],{"class":420},[220,36317,1741],{"class":260},[220,36319,1744],{"class":260},[220,36321,1747],{"class":226},[220,36323,1750],{"class":264},[220,36325,36326],{"class":222,"line":399},[220,36327,1765],{"class":264},[220,36329,36330,36332,36335],{"class":222,"line":644},[220,36331,1770],{"class":264},[220,36333,36334],{"class":230},"'BrightnessContrast'",[220,36336,7004],{"class":264},[220,36338,36339,36341,36343],{"class":222,"line":650},[220,36340,7009],{"class":264},[220,36342,3206],{"class":230},[220,36344,2465],{"class":264},[220,36346,36347],{"class":222,"line":656},[220,36348,7026],{"class":264},[220,36350,36351],{"class":222,"line":673},[220,36352,1787],{"class":264},[220,36354,36355],{"class":222,"line":682},[220,36356,1792],{"class":264},[1504,36358,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":36360},[36361,36362],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Adjustments",{},"\u002Fdocs\u002Fcomponents\u002Fbrightnesscontrast",{"title":36094,"description":36102},"docs\u002Fcomponents\u002FBrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":36370,"title":36371,"body":36372,"category":36564,"componentType":25872,"description":36379,"extension":191,"meta":36565,"navigation":194,"path":36566,"requiresChild":32525,"seo":36567,"stem":36568,"__hash__":36569},"components\u002Fdocs\u002Fcomponents\u002FBrushedMetal.md","BrushedMetal",{"type":8,"value":36373,"toc":36560},[36374,36377,36380,36382,36384,36387,36389,36558],[11,36375,36371],{"id":36376},"brushedmetal",[15,36378,36379],{},"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",[31906,36381],{"component":36371},[23,36383,31910],{"id":26528},[31912,36385],{":props":36386},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#e9ebef\",\"description\":\"The bright tone of the polished grain — recolor for gold (#ffe8b0), copper (#ffc8a0) or steel\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#26282d\",\"description\":\"The dark tone the brushed grain falls to in shadow. Tint it warm for gold\u002Fbronze, cool for steel.\"},{\"name\":\"brushAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the surface is brushed, in degrees — the grain and every reflection streak run along this axis\"},{\"name\":\"anisotropy\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How directional the brushing is — 1 = long smeared streaks along the grain, 0 = isotropic satin with no direction\"},{\"name\":\"grain\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Depth of the individual brush scratches — the fine satin texture combed into the metal\"},{\"name\":\"grainScale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Density of the brush lines — higher = finer, tighter scratches\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall satin softness — 0 = near-polished with crisp reflections, 1 = soft matte brushed finish\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.4\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen smeared across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the anisotropic specular streak, in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Speed of the slowly drifting reflection — the studio gently orbits the surface. 0 pauses.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,36388,31918],{"id":31917},[246,36390,36391,36420,36448,36476,36504],{":tabs":1557},[212,36392,36394],{"className":334,"code":36393,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBrushedMetal \u002F>\n\u003C\u002FShader>\n",[99,36395,36396,36404,36412],{"__ignoreMap":178},[220,36397,36398,36400,36402],{"class":222,"line":223},[220,36399,343],{"class":264},[220,36401,347],{"class":346},[220,36403,359],{"class":264},[220,36405,36406,36408,36410],{"class":222,"line":179},[220,36407,364],{"class":264},[220,36409,36371],{"class":346},[220,36411,386],{"class":264},[220,36413,36414,36416,36418],{"class":222,"line":389},[220,36415,402],{"class":264},[220,36417,347],{"class":346},[220,36419,359],{"class":264},[212,36421,36422],{"className":409,"code":36393,"language":411,"meta":178,"style":178},[99,36423,36424,36432,36440],{"__ignoreMap":178},[220,36425,36426,36428,36430],{"class":222,"line":223},[220,36427,343],{"class":264},[220,36429,347],{"class":420},[220,36431,359],{"class":264},[220,36433,36434,36436,36438],{"class":222,"line":179},[220,36435,364],{"class":264},[220,36437,36371],{"class":420},[220,36439,386],{"class":264},[220,36441,36442,36444,36446],{"class":222,"line":389},[220,36443,402],{"class":264},[220,36445,347],{"class":420},[220,36447,359],{"class":264},[212,36449,36450],{"className":2844,"code":36393,"language":2846,"meta":178,"style":178},[99,36451,36452,36460,36468],{"__ignoreMap":178},[220,36453,36454,36456,36458],{"class":222,"line":223},[220,36455,343],{"class":264},[220,36457,347],{"class":420},[220,36459,359],{"class":264},[220,36461,36462,36464,36466],{"class":222,"line":179},[220,36463,364],{"class":264},[220,36465,36371],{"class":420},[220,36467,386],{"class":264},[220,36469,36470,36472,36474],{"class":222,"line":389},[220,36471,402],{"class":264},[220,36473,347],{"class":420},[220,36475,359],{"class":264},[212,36477,36478],{"className":468,"code":36393,"language":469,"meta":178,"style":178},[99,36479,36480,36488,36496],{"__ignoreMap":178},[220,36481,36482,36484,36486],{"class":222,"line":223},[220,36483,343],{"class":264},[220,36485,347],{"class":420},[220,36487,359],{"class":264},[220,36489,36490,36492,36494],{"class":222,"line":179},[220,36491,364],{"class":264},[220,36493,36371],{"class":420},[220,36495,386],{"class":264},[220,36497,36498,36500,36502],{"class":222,"line":389},[220,36499,402],{"class":264},[220,36501,347],{"class":420},[220,36503,359],{"class":264},[212,36505,36507],{"className":251,"code":36506,"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,36508,36509,36519,36523,36537,36541,36550,36554],{"__ignoreMap":178},[220,36510,36511,36513,36515,36517],{"class":222,"line":223},[220,36512,261],{"class":260},[220,36514,11507],{"class":264},[220,36516,268],{"class":260},[220,36518,4007],{"class":230},[220,36520,36521],{"class":222,"line":179},[220,36522,647],{"emptyLinePlaceholder":194},[220,36524,36525,36527,36529,36531,36533,36535],{"class":222,"line":389},[220,36526,1735],{"class":260},[220,36528,1738],{"class":420},[220,36530,1741],{"class":260},[220,36532,1744],{"class":260},[220,36534,1747],{"class":226},[220,36536,1750],{"class":264},[220,36538,36539],{"class":222,"line":399},[220,36540,1765],{"class":264},[220,36542,36543,36545,36548],{"class":222,"line":644},[220,36544,1770],{"class":264},[220,36546,36547],{"class":230},"'BrushedMetal'",[220,36549,2465],{"class":264},[220,36551,36552],{"class":222,"line":650},[220,36553,1787],{"class":264},[220,36555,36556],{"class":222,"line":656},[220,36557,1792],{"class":264},[1504,36559,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":36561},[36562,36563],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Shape Effects",{},"\u002Fdocs\u002Fcomponents\u002Fbrushedmetal",{"title":36371,"description":36379},"docs\u002Fcomponents\u002FBrushedMetal","X6ouSbZ77zKffUpJ7quDAdvuyIaM6zcwqjSynJdeoHc",{"id":36571,"title":36572,"body":36573,"category":33391,"componentType":25878,"description":36580,"extension":191,"meta":36898,"navigation":194,"path":36899,"requiresChild":194,"seo":36900,"stem":36901,"__hash__":36902},"components\u002Fdocs\u002Fcomponents\u002FBulge.md","Bulge",{"type":8,"value":36574,"toc":36894},[36575,36578,36581,36583,36585,36588,36590,36892],[11,36576,36572],{"id":36577},"bulge",[15,36579,36580],{},"Magnify or pinch content around a center point",[31906,36582],{"component":36572},[23,36584,31910],{"id":26528},[31912,36586],{":props":36587},"[{\"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,36589,31918],{"id":31917},[246,36591,36592,36649,36708,36764,36822],{":tabs":1557},[212,36593,36595],{"className":334,"code":36594,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36596,36597,36605,36612,36621,36625,36633,36641],{"__ignoreMap":178},[220,36598,36599,36601,36603],{"class":222,"line":223},[220,36600,343],{"class":264},[220,36602,347],{"class":346},[220,36604,359],{"class":264},[220,36606,36607,36609],{"class":222,"line":179},[220,36608,364],{"class":264},[220,36610,36611],{"class":346},"Bulge\n",[220,36613,36614,36616,36618],{"class":222,"line":389},[220,36615,17400],{"class":226},[220,36617,353],{"class":264},[220,36619,36620],{"class":230},"\"1\"\n",[220,36622,36623],{"class":222,"line":399},[220,36624,31954],{"class":264},[220,36626,36627,36629,36631],{"class":222,"line":644},[220,36628,2550],{"class":264},[220,36630,2553],{"class":346},[220,36632,386],{"class":264},[220,36634,36635,36637,36639],{"class":222,"line":650},[220,36636,2567],{"class":264},[220,36638,36572],{"class":346},[220,36640,359],{"class":264},[220,36642,36643,36645,36647],{"class":222,"line":656},[220,36644,402],{"class":264},[220,36646,347],{"class":346},[220,36648,359],{"class":264},[212,36650,36652],{"className":409,"code":36651,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FBulge>\n\u003C\u002FShader>\n",[99,36653,36654,36662,36668,36680,36684,36692,36700],{"__ignoreMap":178},[220,36655,36656,36658,36660],{"class":222,"line":223},[220,36657,343],{"class":264},[220,36659,347],{"class":420},[220,36661,359],{"class":264},[220,36663,36664,36666],{"class":222,"line":179},[220,36665,364],{"class":264},[220,36667,36611],{"class":420},[220,36669,36670,36672,36674,36676,36678],{"class":222,"line":389},[220,36671,9640],{"class":226},[220,36673,353],{"class":260},[220,36675,743],{"class":264},[220,36677,8672],{"class":420},[220,36679,749],{"class":264},[220,36681,36682],{"class":222,"line":399},[220,36683,31954],{"class":264},[220,36685,36686,36688,36690],{"class":222,"line":644},[220,36687,2550],{"class":264},[220,36689,2553],{"class":420},[220,36691,386],{"class":264},[220,36693,36694,36696,36698],{"class":222,"line":650},[220,36695,2567],{"class":264},[220,36697,36572],{"class":420},[220,36699,359],{"class":264},[220,36701,36702,36704,36706],{"class":222,"line":656},[220,36703,402],{"class":264},[220,36705,347],{"class":420},[220,36707,359],{"class":264},[212,36709,36710],{"className":2844,"code":36651,"language":2846,"meta":178,"style":178},[99,36711,36712,36720,36726,36736,36740,36748,36756],{"__ignoreMap":178},[220,36713,36714,36716,36718],{"class":222,"line":223},[220,36715,343],{"class":264},[220,36717,347],{"class":420},[220,36719,359],{"class":264},[220,36721,36722,36724],{"class":222,"line":179},[220,36723,364],{"class":264},[220,36725,36611],{"class":420},[220,36727,36728,36730,36732,36734],{"class":222,"line":389},[220,36729,9640],{"class":226},[220,36731,29866],{"class":264},[220,36733,8672],{"class":420},[220,36735,749],{"class":264},[220,36737,36738],{"class":222,"line":399},[220,36739,31954],{"class":264},[220,36741,36742,36744,36746],{"class":222,"line":644},[220,36743,2550],{"class":264},[220,36745,2553],{"class":420},[220,36747,386],{"class":264},[220,36749,36750,36752,36754],{"class":222,"line":650},[220,36751,2567],{"class":264},[220,36753,36572],{"class":420},[220,36755,359],{"class":264},[220,36757,36758,36760,36762],{"class":222,"line":656},[220,36759,402],{"class":264},[220,36761,347],{"class":420},[220,36763,359],{"class":264},[212,36765,36766],{"className":468,"code":36651,"language":469,"meta":178,"style":178},[99,36767,36768,36776,36782,36794,36798,36806,36814],{"__ignoreMap":178},[220,36769,36770,36772,36774],{"class":222,"line":223},[220,36771,343],{"class":264},[220,36773,347],{"class":420},[220,36775,359],{"class":264},[220,36777,36778,36780],{"class":222,"line":179},[220,36779,364],{"class":264},[220,36781,36611],{"class":420},[220,36783,36784,36786,36788,36790,36792],{"class":222,"line":389},[220,36785,9640],{"class":226},[220,36787,353],{"class":260},[220,36789,743],{"class":264},[220,36791,8672],{"class":420},[220,36793,749],{"class":264},[220,36795,36796],{"class":222,"line":399},[220,36797,31954],{"class":264},[220,36799,36800,36802,36804],{"class":222,"line":644},[220,36801,2550],{"class":264},[220,36803,2553],{"class":420},[220,36805,386],{"class":264},[220,36807,36808,36810,36812],{"class":222,"line":650},[220,36809,2567],{"class":264},[220,36811,36572],{"class":420},[220,36813,359],{"class":264},[220,36815,36816,36818,36820],{"class":222,"line":656},[220,36817,402],{"class":264},[220,36819,347],{"class":420},[220,36821,359],{"class":264},[212,36823,36825],{"className":251,"code":36824,"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,36826,36827,36837,36841,36855,36859,36872,36880,36884,36888],{"__ignoreMap":178},[220,36828,36829,36831,36833,36835],{"class":222,"line":223},[220,36830,261],{"class":260},[220,36832,11507],{"class":264},[220,36834,268],{"class":260},[220,36836,4007],{"class":230},[220,36838,36839],{"class":222,"line":179},[220,36840,647],{"emptyLinePlaceholder":194},[220,36842,36843,36845,36847,36849,36851,36853],{"class":222,"line":389},[220,36844,1735],{"class":260},[220,36846,1738],{"class":420},[220,36848,1741],{"class":260},[220,36850,1744],{"class":260},[220,36852,1747],{"class":226},[220,36854,1750],{"class":264},[220,36856,36857],{"class":222,"line":399},[220,36858,1765],{"class":264},[220,36860,36861,36863,36866,36868,36870],{"class":222,"line":644},[220,36862,1770],{"class":264},[220,36864,36865],{"class":230},"'Bulge'",[220,36867,7536],{"class":264},[220,36869,8672],{"class":420},[220,36871,7541],{"class":264},[220,36873,36874,36876,36878],{"class":222,"line":650},[220,36875,7009],{"class":264},[220,36877,3206],{"class":230},[220,36879,2465],{"class":264},[220,36881,36882],{"class":222,"line":656},[220,36883,7026],{"class":264},[220,36885,36886],{"class":222,"line":673},[220,36887,1787],{"class":264},[220,36889,36890],{"class":222,"line":682},[220,36891,1792],{"class":264},[1504,36893,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":36895},[36896,36897],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fbulge",{"title":36572,"description":36580},"docs\u002Fcomponents\u002FBulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":36904,"title":36905,"body":36906,"category":32801,"componentType":25878,"description":36913,"extension":191,"meta":37174,"navigation":194,"path":37175,"requiresChild":194,"seo":37176,"stem":37177,"__hash__":37178},"components\u002Fdocs\u002Fcomponents\u002FCRTScreen.md","CRTScreen",{"type":8,"value":36907,"toc":37170},[36908,36911,36914,36916,36918,36921,36923,37168],[11,36909,36905],{"id":36910},"crtscreen",[15,36912,36913],{},"Retro CRT monitor simulation with scanlines",[31906,36915],{"component":36905},[23,36917,31910],{"id":26528},[31912,36919],{":props":36920},"[{\"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,36922,31918],{"id":31917},[246,36924,36925,36970,37014,37058,37102],{":tabs":1557},[212,36926,36928],{"className":334,"code":36927,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle \u002F>\n \u003C\u002FCRTScreen>\n\u003C\u002FShader>\n",[99,36929,36930,36938,36946,36954,36962],{"__ignoreMap":178},[220,36931,36932,36934,36936],{"class":222,"line":223},[220,36933,343],{"class":264},[220,36935,347],{"class":346},[220,36937,359],{"class":264},[220,36939,36940,36942,36944],{"class":222,"line":179},[220,36941,364],{"class":264},[220,36943,36905],{"class":346},[220,36945,359],{"class":264},[220,36947,36948,36950,36952],{"class":222,"line":389},[220,36949,2550],{"class":264},[220,36951,2553],{"class":346},[220,36953,386],{"class":264},[220,36955,36956,36958,36960],{"class":222,"line":399},[220,36957,2567],{"class":264},[220,36959,36905],{"class":346},[220,36961,359],{"class":264},[220,36963,36964,36966,36968],{"class":222,"line":644},[220,36965,402],{"class":264},[220,36967,347],{"class":346},[220,36969,359],{"class":264},[212,36971,36972],{"className":409,"code":36927,"language":411,"meta":178,"style":178},[99,36973,36974,36982,36990,36998,37006],{"__ignoreMap":178},[220,36975,36976,36978,36980],{"class":222,"line":223},[220,36977,343],{"class":264},[220,36979,347],{"class":420},[220,36981,359],{"class":264},[220,36983,36984,36986,36988],{"class":222,"line":179},[220,36985,364],{"class":264},[220,36987,36905],{"class":420},[220,36989,359],{"class":264},[220,36991,36992,36994,36996],{"class":222,"line":389},[220,36993,2550],{"class":264},[220,36995,2553],{"class":420},[220,36997,386],{"class":264},[220,36999,37000,37002,37004],{"class":222,"line":399},[220,37001,2567],{"class":264},[220,37003,36905],{"class":420},[220,37005,359],{"class":264},[220,37007,37008,37010,37012],{"class":222,"line":644},[220,37009,402],{"class":264},[220,37011,347],{"class":420},[220,37013,359],{"class":264},[212,37015,37016],{"className":2844,"code":36927,"language":2846,"meta":178,"style":178},[99,37017,37018,37026,37034,37042,37050],{"__ignoreMap":178},[220,37019,37020,37022,37024],{"class":222,"line":223},[220,37021,343],{"class":264},[220,37023,347],{"class":420},[220,37025,359],{"class":264},[220,37027,37028,37030,37032],{"class":222,"line":179},[220,37029,364],{"class":264},[220,37031,36905],{"class":420},[220,37033,359],{"class":264},[220,37035,37036,37038,37040],{"class":222,"line":389},[220,37037,2550],{"class":264},[220,37039,2553],{"class":420},[220,37041,386],{"class":264},[220,37043,37044,37046,37048],{"class":222,"line":399},[220,37045,2567],{"class":264},[220,37047,36905],{"class":420},[220,37049,359],{"class":264},[220,37051,37052,37054,37056],{"class":222,"line":644},[220,37053,402],{"class":264},[220,37055,347],{"class":420},[220,37057,359],{"class":264},[212,37059,37060],{"className":468,"code":36927,"language":469,"meta":178,"style":178},[99,37061,37062,37070,37078,37086,37094],{"__ignoreMap":178},[220,37063,37064,37066,37068],{"class":222,"line":223},[220,37065,343],{"class":264},[220,37067,347],{"class":420},[220,37069,359],{"class":264},[220,37071,37072,37074,37076],{"class":222,"line":179},[220,37073,364],{"class":264},[220,37075,36905],{"class":420},[220,37077,359],{"class":264},[220,37079,37080,37082,37084],{"class":222,"line":389},[220,37081,2550],{"class":264},[220,37083,2553],{"class":420},[220,37085,386],{"class":264},[220,37087,37088,37090,37092],{"class":222,"line":399},[220,37089,2567],{"class":264},[220,37091,36905],{"class":420},[220,37093,359],{"class":264},[220,37095,37096,37098,37100],{"class":222,"line":644},[220,37097,402],{"class":264},[220,37099,347],{"class":420},[220,37101,359],{"class":264},[212,37103,37105],{"className":251,"code":37104,"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,37106,37107,37117,37121,37135,37139,37148,37156,37160,37164],{"__ignoreMap":178},[220,37108,37109,37111,37113,37115],{"class":222,"line":223},[220,37110,261],{"class":260},[220,37112,11507],{"class":264},[220,37114,268],{"class":260},[220,37116,4007],{"class":230},[220,37118,37119],{"class":222,"line":179},[220,37120,647],{"emptyLinePlaceholder":194},[220,37122,37123,37125,37127,37129,37131,37133],{"class":222,"line":389},[220,37124,1735],{"class":260},[220,37126,1738],{"class":420},[220,37128,1741],{"class":260},[220,37130,1744],{"class":260},[220,37132,1747],{"class":226},[220,37134,1750],{"class":264},[220,37136,37137],{"class":222,"line":399},[220,37138,1765],{"class":264},[220,37140,37141,37143,37146],{"class":222,"line":644},[220,37142,1770],{"class":264},[220,37144,37145],{"class":230},"'CRTScreen'",[220,37147,7004],{"class":264},[220,37149,37150,37152,37154],{"class":222,"line":650},[220,37151,7009],{"class":264},[220,37153,3206],{"class":230},[220,37155,2465],{"class":264},[220,37157,37158],{"class":222,"line":656},[220,37159,7026],{"class":264},[220,37161,37162],{"class":222,"line":673},[220,37163,1787],{"class":264},[220,37165,37166],{"class":222,"line":682},[220,37167,1792],{"class":264},[1504,37169,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":37171},[37172,37173],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcrtscreen",{"title":36905,"description":36913},"docs\u002Fcomponents\u002FCRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":37180,"title":37181,"body":37182,"category":36564,"componentType":25872,"description":37189,"extension":191,"meta":37374,"navigation":194,"path":37375,"requiresChild":32525,"seo":37376,"stem":37377,"__hash__":37378},"components\u002Fdocs\u002Fcomponents\u002FCarbonFiber.md","CarbonFiber",{"type":8,"value":37183,"toc":37370},[37184,37187,37190,37192,37194,37197,37199,37368],[11,37185,37181],{"id":37186},"carbonfiber",[15,37188,37189],{},"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.",[31906,37191],{"component":37181},[23,37193,31910],{"id":26528},[31912,37195],{":props":37196},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the carbon shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the carbon shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the carbon shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#b9bdc6\",\"description\":\"The bright tone of the fibre sheen — recolor for forged\u002Fcoloured carbon (red, blue, bronze)\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#0b0c0e\",\"description\":\"The deep resin tone the weave falls to in shadow — near-black for classic carbon\"},{\"name\":\"weaveStyle\",\"type\":\"\\\"twill\\\" | \\\"plain\\\"\",\"default\":\"twill\",\"description\":\"Weave pattern — plain (checkerboard) or 2×2 twill (the diagonal supercar weave)\"},{\"name\":\"weaveScale\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Number of woven tows across the shape — higher = finer, denser weave\"},{\"name\":\"weaveAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole weave grid in degrees\"},{\"name\":\"relief\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Depth of the quilted weave — how far each tow bulges, catching light on its crown and shadowing the valleys between\"},{\"name\":\"fiberSheen\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the anisotropic fibre sheen — the directional satin glint running along each tow\"},{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the fibre sheen — 0 = tight crisp glints, 1 = soft matte satin\"},{\"name\":\"clearcoat\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Strength of the glossy lacquer coat — the sharp studio reflections of the wet clearcoat over the weave\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Strength of the reflected studio lighting seen in the clearcoat\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"215\",\"description\":\"Direction of the key light for the fibre sheen, in degrees\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,37198,31918],{"id":31917},[246,37200,37201,37230,37258,37286,37314],{":tabs":1557},[212,37202,37204],{"className":334,"code":37203,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCarbonFiber \u002F>\n\u003C\u002FShader>\n",[99,37205,37206,37214,37222],{"__ignoreMap":178},[220,37207,37208,37210,37212],{"class":222,"line":223},[220,37209,343],{"class":264},[220,37211,347],{"class":346},[220,37213,359],{"class":264},[220,37215,37216,37218,37220],{"class":222,"line":179},[220,37217,364],{"class":264},[220,37219,37181],{"class":346},[220,37221,386],{"class":264},[220,37223,37224,37226,37228],{"class":222,"line":389},[220,37225,402],{"class":264},[220,37227,347],{"class":346},[220,37229,359],{"class":264},[212,37231,37232],{"className":409,"code":37203,"language":411,"meta":178,"style":178},[99,37233,37234,37242,37250],{"__ignoreMap":178},[220,37235,37236,37238,37240],{"class":222,"line":223},[220,37237,343],{"class":264},[220,37239,347],{"class":420},[220,37241,359],{"class":264},[220,37243,37244,37246,37248],{"class":222,"line":179},[220,37245,364],{"class":264},[220,37247,37181],{"class":420},[220,37249,386],{"class":264},[220,37251,37252,37254,37256],{"class":222,"line":389},[220,37253,402],{"class":264},[220,37255,347],{"class":420},[220,37257,359],{"class":264},[212,37259,37260],{"className":2844,"code":37203,"language":2846,"meta":178,"style":178},[99,37261,37262,37270,37278],{"__ignoreMap":178},[220,37263,37264,37266,37268],{"class":222,"line":223},[220,37265,343],{"class":264},[220,37267,347],{"class":420},[220,37269,359],{"class":264},[220,37271,37272,37274,37276],{"class":222,"line":179},[220,37273,364],{"class":264},[220,37275,37181],{"class":420},[220,37277,386],{"class":264},[220,37279,37280,37282,37284],{"class":222,"line":389},[220,37281,402],{"class":264},[220,37283,347],{"class":420},[220,37285,359],{"class":264},[212,37287,37288],{"className":468,"code":37203,"language":469,"meta":178,"style":178},[99,37289,37290,37298,37306],{"__ignoreMap":178},[220,37291,37292,37294,37296],{"class":222,"line":223},[220,37293,343],{"class":264},[220,37295,347],{"class":420},[220,37297,359],{"class":264},[220,37299,37300,37302,37304],{"class":222,"line":179},[220,37301,364],{"class":264},[220,37303,37181],{"class":420},[220,37305,386],{"class":264},[220,37307,37308,37310,37312],{"class":222,"line":389},[220,37309,402],{"class":264},[220,37311,347],{"class":420},[220,37313,359],{"class":264},[212,37315,37317],{"className":251,"code":37316,"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,37318,37319,37329,37333,37347,37351,37360,37364],{"__ignoreMap":178},[220,37320,37321,37323,37325,37327],{"class":222,"line":223},[220,37322,261],{"class":260},[220,37324,11507],{"class":264},[220,37326,268],{"class":260},[220,37328,4007],{"class":230},[220,37330,37331],{"class":222,"line":179},[220,37332,647],{"emptyLinePlaceholder":194},[220,37334,37335,37337,37339,37341,37343,37345],{"class":222,"line":389},[220,37336,1735],{"class":260},[220,37338,1738],{"class":420},[220,37340,1741],{"class":260},[220,37342,1744],{"class":260},[220,37344,1747],{"class":226},[220,37346,1750],{"class":264},[220,37348,37349],{"class":222,"line":399},[220,37350,1765],{"class":264},[220,37352,37353,37355,37358],{"class":222,"line":644},[220,37354,1770],{"class":264},[220,37356,37357],{"class":230},"'CarbonFiber'",[220,37359,2465],{"class":264},[220,37361,37362],{"class":222,"line":650},[220,37363,1787],{"class":264},[220,37365,37366],{"class":222,"line":656},[220,37367,1792],{"class":264},[1504,37369,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":37371},[37372,37373],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcarbonfiber",{"title":37181,"description":37189},"docs\u002Fcomponents\u002FCarbonFiber","Vug8R9Ib1Nal1wvFebaB3aW1EfJ6nVWs50q_JfYhFoA",{"id":37380,"title":37381,"body":37382,"category":32801,"componentType":25878,"description":37389,"extension":191,"meta":37650,"navigation":194,"path":37651,"requiresChild":194,"seo":37652,"stem":37653,"__hash__":37654},"components\u002Fdocs\u002Fcomponents\u002FChalkboard.md","Chalkboard",{"type":8,"value":37383,"toc":37646},[37384,37387,37390,37392,37394,37397,37399,37644],[11,37385,37381],{"id":37386},"chalkboard",[15,37388,37389],{},"Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading",[31906,37391],{"component":37381},[23,37393,31910],{"id":26528},[31912,37395],{":props":37396},"[{\"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,37398,31918],{"id":31917},[246,37400,37401,37446,37490,37534,37578],{":tabs":1557},[212,37402,37404],{"className":334,"code":37403,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChalkboard>\n \u003CCircle \u002F>\n \u003C\u002FChalkboard>\n\u003C\u002FShader>\n",[99,37405,37406,37414,37422,37430,37438],{"__ignoreMap":178},[220,37407,37408,37410,37412],{"class":222,"line":223},[220,37409,343],{"class":264},[220,37411,347],{"class":346},[220,37413,359],{"class":264},[220,37415,37416,37418,37420],{"class":222,"line":179},[220,37417,364],{"class":264},[220,37419,37381],{"class":346},[220,37421,359],{"class":264},[220,37423,37424,37426,37428],{"class":222,"line":389},[220,37425,2550],{"class":264},[220,37427,2553],{"class":346},[220,37429,386],{"class":264},[220,37431,37432,37434,37436],{"class":222,"line":399},[220,37433,2567],{"class":264},[220,37435,37381],{"class":346},[220,37437,359],{"class":264},[220,37439,37440,37442,37444],{"class":222,"line":644},[220,37441,402],{"class":264},[220,37443,347],{"class":346},[220,37445,359],{"class":264},[212,37447,37448],{"className":409,"code":37403,"language":411,"meta":178,"style":178},[99,37449,37450,37458,37466,37474,37482],{"__ignoreMap":178},[220,37451,37452,37454,37456],{"class":222,"line":223},[220,37453,343],{"class":264},[220,37455,347],{"class":420},[220,37457,359],{"class":264},[220,37459,37460,37462,37464],{"class":222,"line":179},[220,37461,364],{"class":264},[220,37463,37381],{"class":420},[220,37465,359],{"class":264},[220,37467,37468,37470,37472],{"class":222,"line":389},[220,37469,2550],{"class":264},[220,37471,2553],{"class":420},[220,37473,386],{"class":264},[220,37475,37476,37478,37480],{"class":222,"line":399},[220,37477,2567],{"class":264},[220,37479,37381],{"class":420},[220,37481,359],{"class":264},[220,37483,37484,37486,37488],{"class":222,"line":644},[220,37485,402],{"class":264},[220,37487,347],{"class":420},[220,37489,359],{"class":264},[212,37491,37492],{"className":2844,"code":37403,"language":2846,"meta":178,"style":178},[99,37493,37494,37502,37510,37518,37526],{"__ignoreMap":178},[220,37495,37496,37498,37500],{"class":222,"line":223},[220,37497,343],{"class":264},[220,37499,347],{"class":420},[220,37501,359],{"class":264},[220,37503,37504,37506,37508],{"class":222,"line":179},[220,37505,364],{"class":264},[220,37507,37381],{"class":420},[220,37509,359],{"class":264},[220,37511,37512,37514,37516],{"class":222,"line":389},[220,37513,2550],{"class":264},[220,37515,2553],{"class":420},[220,37517,386],{"class":264},[220,37519,37520,37522,37524],{"class":222,"line":399},[220,37521,2567],{"class":264},[220,37523,37381],{"class":420},[220,37525,359],{"class":264},[220,37527,37528,37530,37532],{"class":222,"line":644},[220,37529,402],{"class":264},[220,37531,347],{"class":420},[220,37533,359],{"class":264},[212,37535,37536],{"className":468,"code":37403,"language":469,"meta":178,"style":178},[99,37537,37538,37546,37554,37562,37570],{"__ignoreMap":178},[220,37539,37540,37542,37544],{"class":222,"line":223},[220,37541,343],{"class":264},[220,37543,347],{"class":420},[220,37545,359],{"class":264},[220,37547,37548,37550,37552],{"class":222,"line":179},[220,37549,364],{"class":264},[220,37551,37381],{"class":420},[220,37553,359],{"class":264},[220,37555,37556,37558,37560],{"class":222,"line":389},[220,37557,2550],{"class":264},[220,37559,2553],{"class":420},[220,37561,386],{"class":264},[220,37563,37564,37566,37568],{"class":222,"line":399},[220,37565,2567],{"class":264},[220,37567,37381],{"class":420},[220,37569,359],{"class":264},[220,37571,37572,37574,37576],{"class":222,"line":644},[220,37573,402],{"class":264},[220,37575,347],{"class":420},[220,37577,359],{"class":264},[212,37579,37581],{"className":251,"code":37580,"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,37582,37583,37593,37597,37611,37615,37624,37632,37636,37640],{"__ignoreMap":178},[220,37584,37585,37587,37589,37591],{"class":222,"line":223},[220,37586,261],{"class":260},[220,37588,11507],{"class":264},[220,37590,268],{"class":260},[220,37592,4007],{"class":230},[220,37594,37595],{"class":222,"line":179},[220,37596,647],{"emptyLinePlaceholder":194},[220,37598,37599,37601,37603,37605,37607,37609],{"class":222,"line":389},[220,37600,1735],{"class":260},[220,37602,1738],{"class":420},[220,37604,1741],{"class":260},[220,37606,1744],{"class":260},[220,37608,1747],{"class":226},[220,37610,1750],{"class":264},[220,37612,37613],{"class":222,"line":399},[220,37614,1765],{"class":264},[220,37616,37617,37619,37622],{"class":222,"line":644},[220,37618,1770],{"class":264},[220,37620,37621],{"class":230},"'Chalkboard'",[220,37623,7004],{"class":264},[220,37625,37626,37628,37630],{"class":222,"line":650},[220,37627,7009],{"class":264},[220,37629,3206],{"class":230},[220,37631,2465],{"class":264},[220,37633,37634],{"class":222,"line":656},[220,37635,7026],{"class":264},[220,37637,37638],{"class":222,"line":673},[220,37639,1787],{"class":264},[220,37641,37642],{"class":222,"line":682},[220,37643,1792],{"class":264},[1504,37645,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":37647},[37648,37649],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fchalkboard",{"title":37381,"description":37389},"docs\u002Fcomponents\u002FChalkboard","4UA6SIT6VPNN853gp0rMSEZulSyNRPaB9voNTQ5gBQ8",{"id":37656,"title":37657,"body":37658,"category":32229,"componentType":25878,"description":37665,"extension":191,"meta":37926,"navigation":194,"path":37927,"requiresChild":194,"seo":37928,"stem":37929,"__hash__":37930},"components\u002Fdocs\u002Fcomponents\u002FChannelBlur.md","ChannelBlur",{"type":8,"value":37659,"toc":37922},[37660,37663,37666,37668,37670,37673,37675,37920],[11,37661,37657],{"id":37662},"channelblur",[15,37664,37665],{},"Independent blur for red, green, and blue channels",[31906,37667],{"component":37657},[23,37669,31910],{"id":26528},[31912,37671],{":props":37672},"[{\"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,37674,31918],{"id":31917},[246,37676,37677,37722,37766,37810,37854],{":tabs":1557},[212,37678,37680],{"className":334,"code":37679,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle \u002F>\n \u003C\u002FChannelBlur>\n\u003C\u002FShader>\n",[99,37681,37682,37690,37698,37706,37714],{"__ignoreMap":178},[220,37683,37684,37686,37688],{"class":222,"line":223},[220,37685,343],{"class":264},[220,37687,347],{"class":346},[220,37689,359],{"class":264},[220,37691,37692,37694,37696],{"class":222,"line":179},[220,37693,364],{"class":264},[220,37695,37657],{"class":346},[220,37697,359],{"class":264},[220,37699,37700,37702,37704],{"class":222,"line":389},[220,37701,2550],{"class":264},[220,37703,2553],{"class":346},[220,37705,386],{"class":264},[220,37707,37708,37710,37712],{"class":222,"line":399},[220,37709,2567],{"class":264},[220,37711,37657],{"class":346},[220,37713,359],{"class":264},[220,37715,37716,37718,37720],{"class":222,"line":644},[220,37717,402],{"class":264},[220,37719,347],{"class":346},[220,37721,359],{"class":264},[212,37723,37724],{"className":409,"code":37679,"language":411,"meta":178,"style":178},[99,37725,37726,37734,37742,37750,37758],{"__ignoreMap":178},[220,37727,37728,37730,37732],{"class":222,"line":223},[220,37729,343],{"class":264},[220,37731,347],{"class":420},[220,37733,359],{"class":264},[220,37735,37736,37738,37740],{"class":222,"line":179},[220,37737,364],{"class":264},[220,37739,37657],{"class":420},[220,37741,359],{"class":264},[220,37743,37744,37746,37748],{"class":222,"line":389},[220,37745,2550],{"class":264},[220,37747,2553],{"class":420},[220,37749,386],{"class":264},[220,37751,37752,37754,37756],{"class":222,"line":399},[220,37753,2567],{"class":264},[220,37755,37657],{"class":420},[220,37757,359],{"class":264},[220,37759,37760,37762,37764],{"class":222,"line":644},[220,37761,402],{"class":264},[220,37763,347],{"class":420},[220,37765,359],{"class":264},[212,37767,37768],{"className":2844,"code":37679,"language":2846,"meta":178,"style":178},[99,37769,37770,37778,37786,37794,37802],{"__ignoreMap":178},[220,37771,37772,37774,37776],{"class":222,"line":223},[220,37773,343],{"class":264},[220,37775,347],{"class":420},[220,37777,359],{"class":264},[220,37779,37780,37782,37784],{"class":222,"line":179},[220,37781,364],{"class":264},[220,37783,37657],{"class":420},[220,37785,359],{"class":264},[220,37787,37788,37790,37792],{"class":222,"line":389},[220,37789,2550],{"class":264},[220,37791,2553],{"class":420},[220,37793,386],{"class":264},[220,37795,37796,37798,37800],{"class":222,"line":399},[220,37797,2567],{"class":264},[220,37799,37657],{"class":420},[220,37801,359],{"class":264},[220,37803,37804,37806,37808],{"class":222,"line":644},[220,37805,402],{"class":264},[220,37807,347],{"class":420},[220,37809,359],{"class":264},[212,37811,37812],{"className":468,"code":37679,"language":469,"meta":178,"style":178},[99,37813,37814,37822,37830,37838,37846],{"__ignoreMap":178},[220,37815,37816,37818,37820],{"class":222,"line":223},[220,37817,343],{"class":264},[220,37819,347],{"class":420},[220,37821,359],{"class":264},[220,37823,37824,37826,37828],{"class":222,"line":179},[220,37825,364],{"class":264},[220,37827,37657],{"class":420},[220,37829,359],{"class":264},[220,37831,37832,37834,37836],{"class":222,"line":389},[220,37833,2550],{"class":264},[220,37835,2553],{"class":420},[220,37837,386],{"class":264},[220,37839,37840,37842,37844],{"class":222,"line":399},[220,37841,2567],{"class":264},[220,37843,37657],{"class":420},[220,37845,359],{"class":264},[220,37847,37848,37850,37852],{"class":222,"line":644},[220,37849,402],{"class":264},[220,37851,347],{"class":420},[220,37853,359],{"class":264},[212,37855,37857],{"className":251,"code":37856,"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,37858,37859,37869,37873,37887,37891,37900,37908,37912,37916],{"__ignoreMap":178},[220,37860,37861,37863,37865,37867],{"class":222,"line":223},[220,37862,261],{"class":260},[220,37864,11507],{"class":264},[220,37866,268],{"class":260},[220,37868,4007],{"class":230},[220,37870,37871],{"class":222,"line":179},[220,37872,647],{"emptyLinePlaceholder":194},[220,37874,37875,37877,37879,37881,37883,37885],{"class":222,"line":389},[220,37876,1735],{"class":260},[220,37878,1738],{"class":420},[220,37880,1741],{"class":260},[220,37882,1744],{"class":260},[220,37884,1747],{"class":226},[220,37886,1750],{"class":264},[220,37888,37889],{"class":222,"line":399},[220,37890,1765],{"class":264},[220,37892,37893,37895,37898],{"class":222,"line":644},[220,37894,1770],{"class":264},[220,37896,37897],{"class":230},"'ChannelBlur'",[220,37899,7004],{"class":264},[220,37901,37902,37904,37906],{"class":222,"line":650},[220,37903,7009],{"class":264},[220,37905,3206],{"class":230},[220,37907,2465],{"class":264},[220,37909,37910],{"class":222,"line":656},[220,37911,7026],{"class":264},[220,37913,37914],{"class":222,"line":673},[220,37915,1787],{"class":264},[220,37917,37918],{"class":222,"line":682},[220,37919,1792],{"class":264},[1504,37921,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":37923},[37924,37925],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fchannelblur",{"title":37657,"description":37665},"docs\u002Fcomponents\u002FChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":37932,"title":37933,"body":37934,"category":33668,"componentType":25878,"description":37941,"extension":191,"meta":38202,"navigation":194,"path":38203,"requiresChild":194,"seo":38204,"stem":38205,"__hash__":38206},"components\u002Fdocs\u002Fcomponents\u002FCheckerWipe.md","CheckerWipe",{"type":8,"value":37935,"toc":38198},[37936,37939,37942,37944,37946,37949,37951,38196],[11,37937,37933],{"id":37938},"checkerwipe",[15,37940,37941],{},"Wipe the content away as a checkerboard of fading squares",[31906,37943],{"component":37933},[23,37945,31910],{"id":26528},[31912,37947],{":props":37948},"[{\"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,37950,31918],{"id":31917},[246,37952,37953,37998,38042,38086,38130],{":tabs":1557},[212,37954,37956],{"className":334,"code":37955,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerWipe>\n \u003CCircle \u002F>\n \u003C\u002FCheckerWipe>\n\u003C\u002FShader>\n",[99,37957,37958,37966,37974,37982,37990],{"__ignoreMap":178},[220,37959,37960,37962,37964],{"class":222,"line":223},[220,37961,343],{"class":264},[220,37963,347],{"class":346},[220,37965,359],{"class":264},[220,37967,37968,37970,37972],{"class":222,"line":179},[220,37969,364],{"class":264},[220,37971,37933],{"class":346},[220,37973,359],{"class":264},[220,37975,37976,37978,37980],{"class":222,"line":389},[220,37977,2550],{"class":264},[220,37979,2553],{"class":346},[220,37981,386],{"class":264},[220,37983,37984,37986,37988],{"class":222,"line":399},[220,37985,2567],{"class":264},[220,37987,37933],{"class":346},[220,37989,359],{"class":264},[220,37991,37992,37994,37996],{"class":222,"line":644},[220,37993,402],{"class":264},[220,37995,347],{"class":346},[220,37997,359],{"class":264},[212,37999,38000],{"className":409,"code":37955,"language":411,"meta":178,"style":178},[99,38001,38002,38010,38018,38026,38034],{"__ignoreMap":178},[220,38003,38004,38006,38008],{"class":222,"line":223},[220,38005,343],{"class":264},[220,38007,347],{"class":420},[220,38009,359],{"class":264},[220,38011,38012,38014,38016],{"class":222,"line":179},[220,38013,364],{"class":264},[220,38015,37933],{"class":420},[220,38017,359],{"class":264},[220,38019,38020,38022,38024],{"class":222,"line":389},[220,38021,2550],{"class":264},[220,38023,2553],{"class":420},[220,38025,386],{"class":264},[220,38027,38028,38030,38032],{"class":222,"line":399},[220,38029,2567],{"class":264},[220,38031,37933],{"class":420},[220,38033,359],{"class":264},[220,38035,38036,38038,38040],{"class":222,"line":644},[220,38037,402],{"class":264},[220,38039,347],{"class":420},[220,38041,359],{"class":264},[212,38043,38044],{"className":2844,"code":37955,"language":2846,"meta":178,"style":178},[99,38045,38046,38054,38062,38070,38078],{"__ignoreMap":178},[220,38047,38048,38050,38052],{"class":222,"line":223},[220,38049,343],{"class":264},[220,38051,347],{"class":420},[220,38053,359],{"class":264},[220,38055,38056,38058,38060],{"class":222,"line":179},[220,38057,364],{"class":264},[220,38059,37933],{"class":420},[220,38061,359],{"class":264},[220,38063,38064,38066,38068],{"class":222,"line":389},[220,38065,2550],{"class":264},[220,38067,2553],{"class":420},[220,38069,386],{"class":264},[220,38071,38072,38074,38076],{"class":222,"line":399},[220,38073,2567],{"class":264},[220,38075,37933],{"class":420},[220,38077,359],{"class":264},[220,38079,38080,38082,38084],{"class":222,"line":644},[220,38081,402],{"class":264},[220,38083,347],{"class":420},[220,38085,359],{"class":264},[212,38087,38088],{"className":468,"code":37955,"language":469,"meta":178,"style":178},[99,38089,38090,38098,38106,38114,38122],{"__ignoreMap":178},[220,38091,38092,38094,38096],{"class":222,"line":223},[220,38093,343],{"class":264},[220,38095,347],{"class":420},[220,38097,359],{"class":264},[220,38099,38100,38102,38104],{"class":222,"line":179},[220,38101,364],{"class":264},[220,38103,37933],{"class":420},[220,38105,359],{"class":264},[220,38107,38108,38110,38112],{"class":222,"line":389},[220,38109,2550],{"class":264},[220,38111,2553],{"class":420},[220,38113,386],{"class":264},[220,38115,38116,38118,38120],{"class":222,"line":399},[220,38117,2567],{"class":264},[220,38119,37933],{"class":420},[220,38121,359],{"class":264},[220,38123,38124,38126,38128],{"class":222,"line":644},[220,38125,402],{"class":264},[220,38127,347],{"class":420},[220,38129,359],{"class":264},[212,38131,38133],{"className":251,"code":38132,"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,38134,38135,38145,38149,38163,38167,38176,38184,38188,38192],{"__ignoreMap":178},[220,38136,38137,38139,38141,38143],{"class":222,"line":223},[220,38138,261],{"class":260},[220,38140,11507],{"class":264},[220,38142,268],{"class":260},[220,38144,4007],{"class":230},[220,38146,38147],{"class":222,"line":179},[220,38148,647],{"emptyLinePlaceholder":194},[220,38150,38151,38153,38155,38157,38159,38161],{"class":222,"line":389},[220,38152,1735],{"class":260},[220,38154,1738],{"class":420},[220,38156,1741],{"class":260},[220,38158,1744],{"class":260},[220,38160,1747],{"class":226},[220,38162,1750],{"class":264},[220,38164,38165],{"class":222,"line":399},[220,38166,1765],{"class":264},[220,38168,38169,38171,38174],{"class":222,"line":644},[220,38170,1770],{"class":264},[220,38172,38173],{"class":230},"'CheckerWipe'",[220,38175,7004],{"class":264},[220,38177,38178,38180,38182],{"class":222,"line":650},[220,38179,7009],{"class":264},[220,38181,3206],{"class":230},[220,38183,2465],{"class":264},[220,38185,38186],{"class":222,"line":656},[220,38187,7026],{"class":264},[220,38189,38190],{"class":222,"line":673},[220,38191,1787],{"class":264},[220,38193,38194],{"class":222,"line":682},[220,38195,1792],{"class":264},[1504,38197,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":38199},[38200,38201],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerwipe",{"title":37933,"description":37941},"docs\u002Fcomponents\u002FCheckerWipe","NqeYXHsapZtoyRSSIzfTaKg5Au8v5cKkjvG-ZTxFNu8",{"id":38208,"title":38209,"body":38210,"category":33058,"componentType":25872,"description":38217,"extension":191,"meta":38401,"navigation":194,"path":38402,"requiresChild":32525,"seo":38403,"stem":38404,"__hash__":38405},"components\u002Fdocs\u002Fcomponents\u002FCheckerboard.md","Checkerboard",{"type":8,"value":38211,"toc":38397},[38212,38215,38218,38220,38222,38225,38227,38395],[11,38213,38209],{"id":38214},"checkerboard",[15,38216,38217],{},"Classic checkerboard pattern with two alternating colors",[31906,38219],{"component":38209},[23,38221,31910],{"id":26528},[31912,38223],{":props":38224},"[{\"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,38226,31918],{"id":31917},[246,38228,38229,38258,38286,38314,38342],{":tabs":1557},[212,38230,38232],{"className":334,"code":38231,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCheckerboard \u002F>\n\u003C\u002FShader>\n",[99,38233,38234,38242,38250],{"__ignoreMap":178},[220,38235,38236,38238,38240],{"class":222,"line":223},[220,38237,343],{"class":264},[220,38239,347],{"class":346},[220,38241,359],{"class":264},[220,38243,38244,38246,38248],{"class":222,"line":179},[220,38245,364],{"class":264},[220,38247,38209],{"class":346},[220,38249,386],{"class":264},[220,38251,38252,38254,38256],{"class":222,"line":389},[220,38253,402],{"class":264},[220,38255,347],{"class":346},[220,38257,359],{"class":264},[212,38259,38260],{"className":409,"code":38231,"language":411,"meta":178,"style":178},[99,38261,38262,38270,38278],{"__ignoreMap":178},[220,38263,38264,38266,38268],{"class":222,"line":223},[220,38265,343],{"class":264},[220,38267,347],{"class":420},[220,38269,359],{"class":264},[220,38271,38272,38274,38276],{"class":222,"line":179},[220,38273,364],{"class":264},[220,38275,38209],{"class":420},[220,38277,386],{"class":264},[220,38279,38280,38282,38284],{"class":222,"line":389},[220,38281,402],{"class":264},[220,38283,347],{"class":420},[220,38285,359],{"class":264},[212,38287,38288],{"className":2844,"code":38231,"language":2846,"meta":178,"style":178},[99,38289,38290,38298,38306],{"__ignoreMap":178},[220,38291,38292,38294,38296],{"class":222,"line":223},[220,38293,343],{"class":264},[220,38295,347],{"class":420},[220,38297,359],{"class":264},[220,38299,38300,38302,38304],{"class":222,"line":179},[220,38301,364],{"class":264},[220,38303,38209],{"class":420},[220,38305,386],{"class":264},[220,38307,38308,38310,38312],{"class":222,"line":389},[220,38309,402],{"class":264},[220,38311,347],{"class":420},[220,38313,359],{"class":264},[212,38315,38316],{"className":468,"code":38231,"language":469,"meta":178,"style":178},[99,38317,38318,38326,38334],{"__ignoreMap":178},[220,38319,38320,38322,38324],{"class":222,"line":223},[220,38321,343],{"class":264},[220,38323,347],{"class":420},[220,38325,359],{"class":264},[220,38327,38328,38330,38332],{"class":222,"line":179},[220,38329,364],{"class":264},[220,38331,38209],{"class":420},[220,38333,386],{"class":264},[220,38335,38336,38338,38340],{"class":222,"line":389},[220,38337,402],{"class":264},[220,38339,347],{"class":420},[220,38341,359],{"class":264},[212,38343,38345],{"className":251,"code":38344,"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,38346,38347,38357,38361,38375,38379,38387,38391],{"__ignoreMap":178},[220,38348,38349,38351,38353,38355],{"class":222,"line":223},[220,38350,261],{"class":260},[220,38352,11507],{"class":264},[220,38354,268],{"class":260},[220,38356,4007],{"class":230},[220,38358,38359],{"class":222,"line":179},[220,38360,647],{"emptyLinePlaceholder":194},[220,38362,38363,38365,38367,38369,38371,38373],{"class":222,"line":389},[220,38364,1735],{"class":260},[220,38366,1738],{"class":420},[220,38368,1741],{"class":260},[220,38370,1744],{"class":260},[220,38372,1747],{"class":226},[220,38374,1750],{"class":264},[220,38376,38377],{"class":222,"line":399},[220,38378,1765],{"class":264},[220,38380,38381,38383,38385],{"class":222,"line":644},[220,38382,1770],{"class":264},[220,38384,10153],{"class":230},[220,38386,2465],{"class":264},[220,38388,38389],{"class":222,"line":650},[220,38390,1787],{"class":264},[220,38392,38393],{"class":222,"line":656},[220,38394,1792],{"class":264},[1504,38396,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":38398},[38399,38400],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcheckerboard",{"title":38209,"description":38217},"docs\u002Fcomponents\u002FCheckerboard","gk0VEGhuoITOhp1cxE7gjEpfTe-mTLCHWoRyF1Tp1Ac",{"id":38407,"title":38408,"body":38409,"category":33058,"componentType":25872,"description":38416,"extension":191,"meta":38601,"navigation":194,"path":38602,"requiresChild":32525,"seo":38603,"stem":38604,"__hash__":38605},"components\u002Fdocs\u002Fcomponents\u002FChevron.md","Chevron",{"type":8,"value":38410,"toc":38597},[38411,38414,38417,38419,38421,38424,38426,38595],[11,38412,38408],{"id":38413},"chevron",[15,38415,38416],{},"Animated chevron \u002F zigzag stripe pattern",[31906,38418],{"component":38408},[23,38420,31910],{"id":26528},[31912,38422],{":props":38423},"[{\"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,38425,31918],{"id":31917},[246,38427,38428,38457,38485,38513,38541],{":tabs":1557},[212,38429,38431],{"className":334,"code":38430,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChevron \u002F>\n\u003C\u002FShader>\n",[99,38432,38433,38441,38449],{"__ignoreMap":178},[220,38434,38435,38437,38439],{"class":222,"line":223},[220,38436,343],{"class":264},[220,38438,347],{"class":346},[220,38440,359],{"class":264},[220,38442,38443,38445,38447],{"class":222,"line":179},[220,38444,364],{"class":264},[220,38446,38408],{"class":346},[220,38448,386],{"class":264},[220,38450,38451,38453,38455],{"class":222,"line":389},[220,38452,402],{"class":264},[220,38454,347],{"class":346},[220,38456,359],{"class":264},[212,38458,38459],{"className":409,"code":38430,"language":411,"meta":178,"style":178},[99,38460,38461,38469,38477],{"__ignoreMap":178},[220,38462,38463,38465,38467],{"class":222,"line":223},[220,38464,343],{"class":264},[220,38466,347],{"class":420},[220,38468,359],{"class":264},[220,38470,38471,38473,38475],{"class":222,"line":179},[220,38472,364],{"class":264},[220,38474,38408],{"class":420},[220,38476,386],{"class":264},[220,38478,38479,38481,38483],{"class":222,"line":389},[220,38480,402],{"class":264},[220,38482,347],{"class":420},[220,38484,359],{"class":264},[212,38486,38487],{"className":2844,"code":38430,"language":2846,"meta":178,"style":178},[99,38488,38489,38497,38505],{"__ignoreMap":178},[220,38490,38491,38493,38495],{"class":222,"line":223},[220,38492,343],{"class":264},[220,38494,347],{"class":420},[220,38496,359],{"class":264},[220,38498,38499,38501,38503],{"class":222,"line":179},[220,38500,364],{"class":264},[220,38502,38408],{"class":420},[220,38504,386],{"class":264},[220,38506,38507,38509,38511],{"class":222,"line":389},[220,38508,402],{"class":264},[220,38510,347],{"class":420},[220,38512,359],{"class":264},[212,38514,38515],{"className":468,"code":38430,"language":469,"meta":178,"style":178},[99,38516,38517,38525,38533],{"__ignoreMap":178},[220,38518,38519,38521,38523],{"class":222,"line":223},[220,38520,343],{"class":264},[220,38522,347],{"class":420},[220,38524,359],{"class":264},[220,38526,38527,38529,38531],{"class":222,"line":179},[220,38528,364],{"class":264},[220,38530,38408],{"class":420},[220,38532,386],{"class":264},[220,38534,38535,38537,38539],{"class":222,"line":389},[220,38536,402],{"class":264},[220,38538,347],{"class":420},[220,38540,359],{"class":264},[212,38542,38544],{"className":251,"code":38543,"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,38545,38546,38556,38560,38574,38578,38587,38591],{"__ignoreMap":178},[220,38547,38548,38550,38552,38554],{"class":222,"line":223},[220,38549,261],{"class":260},[220,38551,11507],{"class":264},[220,38553,268],{"class":260},[220,38555,4007],{"class":230},[220,38557,38558],{"class":222,"line":179},[220,38559,647],{"emptyLinePlaceholder":194},[220,38561,38562,38564,38566,38568,38570,38572],{"class":222,"line":389},[220,38563,1735],{"class":260},[220,38565,1738],{"class":420},[220,38567,1741],{"class":260},[220,38569,1744],{"class":260},[220,38571,1747],{"class":226},[220,38573,1750],{"class":264},[220,38575,38576],{"class":222,"line":399},[220,38577,1765],{"class":264},[220,38579,38580,38582,38585],{"class":222,"line":644},[220,38581,1770],{"class":264},[220,38583,38584],{"class":230},"'Chevron'",[220,38586,2465],{"class":264},[220,38588,38589],{"class":222,"line":650},[220,38590,1787],{"class":264},[220,38592,38593],{"class":222,"line":656},[220,38594,1792],{"class":264},[1504,38596,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":38598},[38599,38600],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fchevron",{"title":38408,"description":38416},"docs\u002Fcomponents\u002FChevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":38607,"title":38608,"body":38609,"category":35554,"componentType":25872,"description":38616,"extension":191,"meta":38905,"navigation":194,"path":38906,"requiresChild":32525,"seo":38907,"stem":38908,"__hash__":38909},"components\u002Fdocs\u002Fcomponents\u002FChromaFlow.md","ChromaFlow",{"type":8,"value":38610,"toc":38901},[38611,38614,38617,38619,38621,38624,38626,38899],[11,38612,38608],{"id":38613},"chromaflow",[15,38615,38616],{},"Interactive liquid flow effect that follows your cursor",[31906,38618],{"component":38608},[23,38620,31910],{"id":26528},[31912,38622],{":props":38623},"[{\"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,38625,31918],{"id":31917},[246,38627,38628,38677,38733,38783,38837],{":tabs":1557},[212,38629,38631],{"className":334,"code":38630,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n \u002F>\n\u003C\u002FShader>\n",[99,38632,38633,38641,38648,38656,38665,38669],{"__ignoreMap":178},[220,38634,38635,38637,38639],{"class":222,"line":223},[220,38636,343],{"class":264},[220,38638,347],{"class":346},[220,38640,359],{"class":264},[220,38642,38643,38645],{"class":222,"line":179},[220,38644,364],{"class":264},[220,38646,38647],{"class":346},"ChromaFlow\n",[220,38649,38650,38652,38654],{"class":222,"line":389},[220,38651,20366],{"class":226},[220,38653,353],{"class":264},[220,38655,36620],{"class":230},[220,38657,38658,38660,38662],{"class":222,"line":399},[220,38659,17400],{"class":226},[220,38661,353],{"class":264},[220,38663,38664],{"class":230},"\"3\"\n",[220,38666,38667],{"class":222,"line":644},[220,38668,1234],{"class":264},[220,38670,38671,38673,38675],{"class":222,"line":650},[220,38672,402],{"class":264},[220,38674,347],{"class":346},[220,38676,359],{"class":264},[212,38678,38680],{"className":409,"code":38679,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n \u002F>\n\u003C\u002FShader>\n",[99,38681,38682,38690,38696,38708,38721,38725],{"__ignoreMap":178},[220,38683,38684,38686,38688],{"class":222,"line":223},[220,38685,343],{"class":264},[220,38687,347],{"class":420},[220,38689,359],{"class":264},[220,38691,38692,38694],{"class":222,"line":179},[220,38693,364],{"class":264},[220,38695,38647],{"class":420},[220,38697,38698,38700,38702,38704,38706],{"class":222,"line":389},[220,38699,20477],{"class":226},[220,38701,353],{"class":260},[220,38703,743],{"class":264},[220,38705,8672],{"class":420},[220,38707,749],{"class":264},[220,38709,38710,38712,38714,38716,38719],{"class":222,"line":399},[220,38711,9640],{"class":226},[220,38713,353],{"class":260},[220,38715,743],{"class":264},[220,38717,38718],{"class":420},"3",[220,38720,749],{"class":264},[220,38722,38723],{"class":222,"line":644},[220,38724,1234],{"class":264},[220,38726,38727,38729,38731],{"class":222,"line":650},[220,38728,402],{"class":264},[220,38730,347],{"class":420},[220,38732,359],{"class":264},[212,38734,38735],{"className":2844,"code":38679,"language":2846,"meta":178,"style":178},[99,38736,38737,38745,38751,38761,38771,38775],{"__ignoreMap":178},[220,38738,38739,38741,38743],{"class":222,"line":223},[220,38740,343],{"class":264},[220,38742,347],{"class":420},[220,38744,359],{"class":264},[220,38746,38747,38749],{"class":222,"line":179},[220,38748,364],{"class":264},[220,38750,38647],{"class":420},[220,38752,38753,38755,38757,38759],{"class":222,"line":389},[220,38754,20477],{"class":226},[220,38756,29866],{"class":264},[220,38758,8672],{"class":420},[220,38760,749],{"class":264},[220,38762,38763,38765,38767,38769],{"class":222,"line":399},[220,38764,9640],{"class":226},[220,38766,29866],{"class":264},[220,38768,38718],{"class":420},[220,38770,749],{"class":264},[220,38772,38773],{"class":222,"line":644},[220,38774,1234],{"class":264},[220,38776,38777,38779,38781],{"class":222,"line":650},[220,38778,402],{"class":264},[220,38780,347],{"class":420},[220,38782,359],{"class":264},[212,38784,38785],{"className":468,"code":38679,"language":469,"meta":178,"style":178},[99,38786,38787,38795,38801,38813,38825,38829],{"__ignoreMap":178},[220,38788,38789,38791,38793],{"class":222,"line":223},[220,38790,343],{"class":264},[220,38792,347],{"class":420},[220,38794,359],{"class":264},[220,38796,38797,38799],{"class":222,"line":179},[220,38798,364],{"class":264},[220,38800,38647],{"class":420},[220,38802,38803,38805,38807,38809,38811],{"class":222,"line":389},[220,38804,20477],{"class":226},[220,38806,353],{"class":260},[220,38808,743],{"class":264},[220,38810,8672],{"class":420},[220,38812,749],{"class":264},[220,38814,38815,38817,38819,38821,38823],{"class":222,"line":399},[220,38816,9640],{"class":226},[220,38818,353],{"class":260},[220,38820,743],{"class":264},[220,38822,38718],{"class":420},[220,38824,749],{"class":264},[220,38826,38827],{"class":222,"line":644},[220,38828,1234],{"class":264},[220,38830,38831,38833,38835],{"class":222,"line":650},[220,38832,402],{"class":264},[220,38834,347],{"class":420},[220,38836,359],{"class":264},[212,38838,38840],{"className":251,"code":38839,"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,38841,38842,38852,38856,38870,38874,38891,38895],{"__ignoreMap":178},[220,38843,38844,38846,38848,38850],{"class":222,"line":223},[220,38845,261],{"class":260},[220,38847,11507],{"class":264},[220,38849,268],{"class":260},[220,38851,4007],{"class":230},[220,38853,38854],{"class":222,"line":179},[220,38855,647],{"emptyLinePlaceholder":194},[220,38857,38858,38860,38862,38864,38866,38868],{"class":222,"line":389},[220,38859,1735],{"class":260},[220,38861,1738],{"class":420},[220,38863,1741],{"class":260},[220,38865,1744],{"class":260},[220,38867,1747],{"class":226},[220,38869,1750],{"class":264},[220,38871,38872],{"class":222,"line":399},[220,38873,1765],{"class":264},[220,38875,38876,38878,38881,38883,38885,38887,38889],{"class":222,"line":644},[220,38877,1770],{"class":264},[220,38879,38880],{"class":230},"'ChromaFlow'",[220,38882,32198],{"class":264},[220,38884,8672],{"class":420},[220,38886,6561],{"class":264},[220,38888,38718],{"class":420},[220,38890,1782],{"class":264},[220,38892,38893],{"class":222,"line":650},[220,38894,1787],{"class":264},[220,38896,38897],{"class":222,"line":656},[220,38898,1792],{"class":264},[1504,38900,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":38902},[38903,38904],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fchromaflow",{"title":38608,"description":38616},"docs\u002Fcomponents\u002FChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":38911,"title":38912,"body":38913,"category":32801,"componentType":25878,"description":38920,"extension":191,"meta":39181,"navigation":194,"path":39182,"requiresChild":194,"seo":39183,"stem":39184,"__hash__":39185},"components\u002Fdocs\u002Fcomponents\u002FChromaticAberration.md","ChromaticAberration",{"type":8,"value":38914,"toc":39177},[38915,38918,38921,38923,38925,38928,38930,39175],[11,38916,38912],{"id":38917},"chromaticaberration",[15,38919,38920],{},"Separate RGB channels for a prismatic distortion effect",[31906,38922],{"component":38912},[23,38924,31910],{"id":26528},[31912,38926],{":props":38927},"[{\"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,38929,31918],{"id":31917},[246,38931,38932,38977,39021,39065,39109],{":tabs":1557},[212,38933,38935],{"className":334,"code":38934,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle \u002F>\n \u003C\u002FChromaticAberration>\n\u003C\u002FShader>\n",[99,38936,38937,38945,38953,38961,38969],{"__ignoreMap":178},[220,38938,38939,38941,38943],{"class":222,"line":223},[220,38940,343],{"class":264},[220,38942,347],{"class":346},[220,38944,359],{"class":264},[220,38946,38947,38949,38951],{"class":222,"line":179},[220,38948,364],{"class":264},[220,38950,38912],{"class":346},[220,38952,359],{"class":264},[220,38954,38955,38957,38959],{"class":222,"line":389},[220,38956,2550],{"class":264},[220,38958,2553],{"class":346},[220,38960,386],{"class":264},[220,38962,38963,38965,38967],{"class":222,"line":399},[220,38964,2567],{"class":264},[220,38966,38912],{"class":346},[220,38968,359],{"class":264},[220,38970,38971,38973,38975],{"class":222,"line":644},[220,38972,402],{"class":264},[220,38974,347],{"class":346},[220,38976,359],{"class":264},[212,38978,38979],{"className":409,"code":38934,"language":411,"meta":178,"style":178},[99,38980,38981,38989,38997,39005,39013],{"__ignoreMap":178},[220,38982,38983,38985,38987],{"class":222,"line":223},[220,38984,343],{"class":264},[220,38986,347],{"class":420},[220,38988,359],{"class":264},[220,38990,38991,38993,38995],{"class":222,"line":179},[220,38992,364],{"class":264},[220,38994,38912],{"class":420},[220,38996,359],{"class":264},[220,38998,38999,39001,39003],{"class":222,"line":389},[220,39000,2550],{"class":264},[220,39002,2553],{"class":420},[220,39004,386],{"class":264},[220,39006,39007,39009,39011],{"class":222,"line":399},[220,39008,2567],{"class":264},[220,39010,38912],{"class":420},[220,39012,359],{"class":264},[220,39014,39015,39017,39019],{"class":222,"line":644},[220,39016,402],{"class":264},[220,39018,347],{"class":420},[220,39020,359],{"class":264},[212,39022,39023],{"className":2844,"code":38934,"language":2846,"meta":178,"style":178},[99,39024,39025,39033,39041,39049,39057],{"__ignoreMap":178},[220,39026,39027,39029,39031],{"class":222,"line":223},[220,39028,343],{"class":264},[220,39030,347],{"class":420},[220,39032,359],{"class":264},[220,39034,39035,39037,39039],{"class":222,"line":179},[220,39036,364],{"class":264},[220,39038,38912],{"class":420},[220,39040,359],{"class":264},[220,39042,39043,39045,39047],{"class":222,"line":389},[220,39044,2550],{"class":264},[220,39046,2553],{"class":420},[220,39048,386],{"class":264},[220,39050,39051,39053,39055],{"class":222,"line":399},[220,39052,2567],{"class":264},[220,39054,38912],{"class":420},[220,39056,359],{"class":264},[220,39058,39059,39061,39063],{"class":222,"line":644},[220,39060,402],{"class":264},[220,39062,347],{"class":420},[220,39064,359],{"class":264},[212,39066,39067],{"className":468,"code":38934,"language":469,"meta":178,"style":178},[99,39068,39069,39077,39085,39093,39101],{"__ignoreMap":178},[220,39070,39071,39073,39075],{"class":222,"line":223},[220,39072,343],{"class":264},[220,39074,347],{"class":420},[220,39076,359],{"class":264},[220,39078,39079,39081,39083],{"class":222,"line":179},[220,39080,364],{"class":264},[220,39082,38912],{"class":420},[220,39084,359],{"class":264},[220,39086,39087,39089,39091],{"class":222,"line":389},[220,39088,2550],{"class":264},[220,39090,2553],{"class":420},[220,39092,386],{"class":264},[220,39094,39095,39097,39099],{"class":222,"line":399},[220,39096,2567],{"class":264},[220,39098,38912],{"class":420},[220,39100,359],{"class":264},[220,39102,39103,39105,39107],{"class":222,"line":644},[220,39104,402],{"class":264},[220,39106,347],{"class":420},[220,39108,359],{"class":264},[212,39110,39112],{"className":251,"code":39111,"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,39113,39114,39124,39128,39142,39146,39155,39163,39167,39171],{"__ignoreMap":178},[220,39115,39116,39118,39120,39122],{"class":222,"line":223},[220,39117,261],{"class":260},[220,39119,11507],{"class":264},[220,39121,268],{"class":260},[220,39123,4007],{"class":230},[220,39125,39126],{"class":222,"line":179},[220,39127,647],{"emptyLinePlaceholder":194},[220,39129,39130,39132,39134,39136,39138,39140],{"class":222,"line":389},[220,39131,1735],{"class":260},[220,39133,1738],{"class":420},[220,39135,1741],{"class":260},[220,39137,1744],{"class":260},[220,39139,1747],{"class":226},[220,39141,1750],{"class":264},[220,39143,39144],{"class":222,"line":399},[220,39145,1765],{"class":264},[220,39147,39148,39150,39153],{"class":222,"line":644},[220,39149,1770],{"class":264},[220,39151,39152],{"class":230},"'ChromaticAberration'",[220,39154,7004],{"class":264},[220,39156,39157,39159,39161],{"class":222,"line":650},[220,39158,7009],{"class":264},[220,39160,3206],{"class":230},[220,39162,2465],{"class":264},[220,39164,39165],{"class":222,"line":656},[220,39166,7026],{"class":264},[220,39168,39169],{"class":222,"line":673},[220,39170,1787],{"class":264},[220,39172,39173],{"class":222,"line":682},[220,39174,1792],{"class":264},[1504,39176,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":39178},[39179,39180],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fchromaticaberration",{"title":38912,"description":38920},"docs\u002Fcomponents\u002FChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":39187,"title":2553,"body":39188,"category":15903,"componentType":25872,"description":39195,"extension":191,"meta":39470,"navigation":194,"path":39471,"requiresChild":32525,"seo":39472,"stem":39473,"__hash__":39474},"components\u002Fdocs\u002Fcomponents\u002FCircle.md",{"type":8,"value":39189,"toc":39466},[39190,39193,39196,39198,39200,39203,39205,39464],[11,39191,2553],{"id":39192},"circle",[15,39194,39195],{},"Generate a circle with adjustable size and softness",[31906,39197],{"component":2553},[23,39199,31910],{"id":26528},[31912,39201],{":props":39202},"[{\"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,39204,31918],{"id":31917},[246,39206,39207,39254,39305,39353,39403],{":tabs":1557},[212,39208,39210],{"className":334,"code":39209,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,39211,39212,39220,39226,39234,39242,39246],{"__ignoreMap":178},[220,39213,39214,39216,39218],{"class":222,"line":223},[220,39215,343],{"class":264},[220,39217,347],{"class":346},[220,39219,359],{"class":264},[220,39221,39222,39224],{"class":222,"line":179},[220,39223,364],{"class":264},[220,39225,9625],{"class":346},[220,39227,39228,39230,39232],{"class":222,"line":389},[220,39229,9630],{"class":226},[220,39231,353],{"class":264},[220,39233,9586],{"class":230},[220,39235,39236,39238,39240],{"class":222,"line":399},[220,39237,17400],{"class":226},[220,39239,353],{"class":264},[220,39241,36620],{"class":230},[220,39243,39244],{"class":222,"line":644},[220,39245,1234],{"class":264},[220,39247,39248,39250,39252],{"class":222,"line":650},[220,39249,402],{"class":264},[220,39251,347],{"class":346},[220,39253,359],{"class":264},[212,39255,39257],{"className":409,"code":39256,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,39258,39259,39267,39273,39281,39293,39297],{"__ignoreMap":178},[220,39260,39261,39263,39265],{"class":222,"line":223},[220,39262,343],{"class":264},[220,39264,347],{"class":420},[220,39266,359],{"class":264},[220,39268,39269,39271],{"class":222,"line":179},[220,39270,364],{"class":264},[220,39272,9625],{"class":420},[220,39274,39275,39277,39279],{"class":222,"line":389},[220,39276,9630],{"class":226},[220,39278,353],{"class":260},[220,39280,9586],{"class":230},[220,39282,39283,39285,39287,39289,39291],{"class":222,"line":399},[220,39284,9640],{"class":226},[220,39286,353],{"class":260},[220,39288,743],{"class":264},[220,39290,8672],{"class":420},[220,39292,749],{"class":264},[220,39294,39295],{"class":222,"line":644},[220,39296,1234],{"class":264},[220,39298,39299,39301,39303],{"class":222,"line":650},[220,39300,402],{"class":264},[220,39302,347],{"class":420},[220,39304,359],{"class":264},[212,39306,39307],{"className":2844,"code":39256,"language":2846,"meta":178,"style":178},[99,39308,39309,39317,39323,39331,39341,39345],{"__ignoreMap":178},[220,39310,39311,39313,39315],{"class":222,"line":223},[220,39312,343],{"class":264},[220,39314,347],{"class":420},[220,39316,359],{"class":264},[220,39318,39319,39321],{"class":222,"line":179},[220,39320,364],{"class":264},[220,39322,9625],{"class":420},[220,39324,39325,39327,39329],{"class":222,"line":389},[220,39326,9630],{"class":226},[220,39328,353],{"class":264},[220,39330,9586],{"class":230},[220,39332,39333,39335,39337,39339],{"class":222,"line":399},[220,39334,9640],{"class":226},[220,39336,29866],{"class":264},[220,39338,8672],{"class":420},[220,39340,749],{"class":264},[220,39342,39343],{"class":222,"line":644},[220,39344,1234],{"class":264},[220,39346,39347,39349,39351],{"class":222,"line":650},[220,39348,402],{"class":264},[220,39350,347],{"class":420},[220,39352,359],{"class":264},[212,39354,39355],{"className":468,"code":39256,"language":469,"meta":178,"style":178},[99,39356,39357,39365,39371,39379,39391,39395],{"__ignoreMap":178},[220,39358,39359,39361,39363],{"class":222,"line":223},[220,39360,343],{"class":264},[220,39362,347],{"class":420},[220,39364,359],{"class":264},[220,39366,39367,39369],{"class":222,"line":179},[220,39368,364],{"class":264},[220,39370,9625],{"class":420},[220,39372,39373,39375,39377],{"class":222,"line":389},[220,39374,9630],{"class":226},[220,39376,353],{"class":260},[220,39378,9586],{"class":230},[220,39380,39381,39383,39385,39387,39389],{"class":222,"line":399},[220,39382,9640],{"class":226},[220,39384,353],{"class":260},[220,39386,743],{"class":264},[220,39388,8672],{"class":420},[220,39390,749],{"class":264},[220,39392,39393],{"class":222,"line":644},[220,39394,1234],{"class":264},[220,39396,39397,39399,39401],{"class":222,"line":650},[220,39398,402],{"class":264},[220,39400,347],{"class":420},[220,39402,359],{"class":264},[212,39404,39406],{"className":251,"code":39405,"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,39407,39408,39418,39422,39436,39440,39456,39460],{"__ignoreMap":178},[220,39409,39410,39412,39414,39416],{"class":222,"line":223},[220,39411,261],{"class":260},[220,39413,11507],{"class":264},[220,39415,268],{"class":260},[220,39417,4007],{"class":230},[220,39419,39420],{"class":222,"line":179},[220,39421,647],{"emptyLinePlaceholder":194},[220,39423,39424,39426,39428,39430,39432,39434],{"class":222,"line":389},[220,39425,1735],{"class":260},[220,39427,1738],{"class":420},[220,39429,1741],{"class":260},[220,39431,1744],{"class":260},[220,39433,1747],{"class":226},[220,39435,1750],{"class":264},[220,39437,39438],{"class":222,"line":399},[220,39439,1765],{"class":264},[220,39441,39442,39444,39446,39448,39450,39452,39454],{"class":222,"line":644},[220,39443,1770],{"class":264},[220,39445,3206],{"class":230},[220,39447,1776],{"class":264},[220,39449,10164],{"class":230},[220,39451,6561],{"class":264},[220,39453,8672],{"class":420},[220,39455,1782],{"class":264},[220,39457,39458],{"class":222,"line":650},[220,39459,1787],{"class":264},[220,39461,39462],{"class":222,"line":656},[220,39463,1792],{"class":264},[1504,39465,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":39467},[39468,39469],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcircle",{"title":2553,"description":39195},"docs\u002Fcomponents\u002FCircle","2wmLspM0zvtvXsjN4nmVTCsKAIRWuD9d1sEJJDn2fbo",{"id":39476,"title":39477,"body":39478,"category":33058,"componentType":25872,"description":39485,"extension":191,"meta":39670,"navigation":194,"path":39671,"requiresChild":32525,"seo":39672,"stem":39673,"__hash__":39674},"components\u002Fdocs\u002Fcomponents\u002FColorWheel.md","ColorWheel",{"type":8,"value":39479,"toc":39666},[39480,39483,39486,39488,39490,39493,39495,39664],[11,39481,39477],{"id":39482},"colorwheel",[15,39484,39485],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[31906,39487],{"component":39477},[23,39489,31910],{"id":26528},[31912,39491],{":props":39492},"[{\"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,39494,31918],{"id":31917},[246,39496,39497,39526,39554,39582,39610],{":tabs":1557},[212,39498,39500],{"className":334,"code":39499,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CColorWheel \u002F>\n\u003C\u002FShader>\n",[99,39501,39502,39510,39518],{"__ignoreMap":178},[220,39503,39504,39506,39508],{"class":222,"line":223},[220,39505,343],{"class":264},[220,39507,347],{"class":346},[220,39509,359],{"class":264},[220,39511,39512,39514,39516],{"class":222,"line":179},[220,39513,364],{"class":264},[220,39515,39477],{"class":346},[220,39517,386],{"class":264},[220,39519,39520,39522,39524],{"class":222,"line":389},[220,39521,402],{"class":264},[220,39523,347],{"class":346},[220,39525,359],{"class":264},[212,39527,39528],{"className":409,"code":39499,"language":411,"meta":178,"style":178},[99,39529,39530,39538,39546],{"__ignoreMap":178},[220,39531,39532,39534,39536],{"class":222,"line":223},[220,39533,343],{"class":264},[220,39535,347],{"class":420},[220,39537,359],{"class":264},[220,39539,39540,39542,39544],{"class":222,"line":179},[220,39541,364],{"class":264},[220,39543,39477],{"class":420},[220,39545,386],{"class":264},[220,39547,39548,39550,39552],{"class":222,"line":389},[220,39549,402],{"class":264},[220,39551,347],{"class":420},[220,39553,359],{"class":264},[212,39555,39556],{"className":2844,"code":39499,"language":2846,"meta":178,"style":178},[99,39557,39558,39566,39574],{"__ignoreMap":178},[220,39559,39560,39562,39564],{"class":222,"line":223},[220,39561,343],{"class":264},[220,39563,347],{"class":420},[220,39565,359],{"class":264},[220,39567,39568,39570,39572],{"class":222,"line":179},[220,39569,364],{"class":264},[220,39571,39477],{"class":420},[220,39573,386],{"class":264},[220,39575,39576,39578,39580],{"class":222,"line":389},[220,39577,402],{"class":264},[220,39579,347],{"class":420},[220,39581,359],{"class":264},[212,39583,39584],{"className":468,"code":39499,"language":469,"meta":178,"style":178},[99,39585,39586,39594,39602],{"__ignoreMap":178},[220,39587,39588,39590,39592],{"class":222,"line":223},[220,39589,343],{"class":264},[220,39591,347],{"class":420},[220,39593,359],{"class":264},[220,39595,39596,39598,39600],{"class":222,"line":179},[220,39597,364],{"class":264},[220,39599,39477],{"class":420},[220,39601,386],{"class":264},[220,39603,39604,39606,39608],{"class":222,"line":389},[220,39605,402],{"class":264},[220,39607,347],{"class":420},[220,39609,359],{"class":264},[212,39611,39613],{"className":251,"code":39612,"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,39614,39615,39625,39629,39643,39647,39656,39660],{"__ignoreMap":178},[220,39616,39617,39619,39621,39623],{"class":222,"line":223},[220,39618,261],{"class":260},[220,39620,11507],{"class":264},[220,39622,268],{"class":260},[220,39624,4007],{"class":230},[220,39626,39627],{"class":222,"line":179},[220,39628,647],{"emptyLinePlaceholder":194},[220,39630,39631,39633,39635,39637,39639,39641],{"class":222,"line":389},[220,39632,1735],{"class":260},[220,39634,1738],{"class":420},[220,39636,1741],{"class":260},[220,39638,1744],{"class":260},[220,39640,1747],{"class":226},[220,39642,1750],{"class":264},[220,39644,39645],{"class":222,"line":399},[220,39646,1765],{"class":264},[220,39648,39649,39651,39654],{"class":222,"line":644},[220,39650,1770],{"class":264},[220,39652,39653],{"class":230},"'ColorWheel'",[220,39655,2465],{"class":264},[220,39657,39658],{"class":222,"line":650},[220,39659,1787],{"class":264},[220,39661,39662],{"class":222,"line":656},[220,39663,1792],{"class":264},[1504,39665,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":39667},[39668,39669],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcolorwheel",{"title":39477,"description":39485},"docs\u002Fcomponents\u002FColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":39676,"title":39677,"body":39678,"category":32801,"componentType":25878,"description":39685,"extension":191,"meta":39946,"navigation":194,"path":39947,"requiresChild":194,"seo":39948,"stem":39949,"__hash__":39950},"components\u002Fdocs\u002Fcomponents\u002FCompressionArtifacts.md","CompressionArtifacts",{"type":8,"value":39679,"toc":39942},[39680,39683,39686,39688,39690,39693,39695,39940],[11,39681,39677],{"id":39682},"compressionartifacts",[15,39684,39685],{},"Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",[31906,39687],{"component":39677},[23,39689,31910],{"id":26528},[31912,39691],{":props":39692},"[{\"name\":\"quality\",\"type\":\"number\",\"default\":\"12\",\"description\":\"JPEG quality (1 = heavily destroyed, 100 = near lossless)\"}]",[23,39694,31918],{"id":31917},[246,39696,39697,39742,39786,39830,39874],{":tabs":1557},[212,39698,39700],{"className":334,"code":39699,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCompressionArtifacts>\n \u003CCircle \u002F>\n \u003C\u002FCompressionArtifacts>\n\u003C\u002FShader>\n",[99,39701,39702,39710,39718,39726,39734],{"__ignoreMap":178},[220,39703,39704,39706,39708],{"class":222,"line":223},[220,39705,343],{"class":264},[220,39707,347],{"class":346},[220,39709,359],{"class":264},[220,39711,39712,39714,39716],{"class":222,"line":179},[220,39713,364],{"class":264},[220,39715,39677],{"class":346},[220,39717,359],{"class":264},[220,39719,39720,39722,39724],{"class":222,"line":389},[220,39721,2550],{"class":264},[220,39723,2553],{"class":346},[220,39725,386],{"class":264},[220,39727,39728,39730,39732],{"class":222,"line":399},[220,39729,2567],{"class":264},[220,39731,39677],{"class":346},[220,39733,359],{"class":264},[220,39735,39736,39738,39740],{"class":222,"line":644},[220,39737,402],{"class":264},[220,39739,347],{"class":346},[220,39741,359],{"class":264},[212,39743,39744],{"className":409,"code":39699,"language":411,"meta":178,"style":178},[99,39745,39746,39754,39762,39770,39778],{"__ignoreMap":178},[220,39747,39748,39750,39752],{"class":222,"line":223},[220,39749,343],{"class":264},[220,39751,347],{"class":420},[220,39753,359],{"class":264},[220,39755,39756,39758,39760],{"class":222,"line":179},[220,39757,364],{"class":264},[220,39759,39677],{"class":420},[220,39761,359],{"class":264},[220,39763,39764,39766,39768],{"class":222,"line":389},[220,39765,2550],{"class":264},[220,39767,2553],{"class":420},[220,39769,386],{"class":264},[220,39771,39772,39774,39776],{"class":222,"line":399},[220,39773,2567],{"class":264},[220,39775,39677],{"class":420},[220,39777,359],{"class":264},[220,39779,39780,39782,39784],{"class":222,"line":644},[220,39781,402],{"class":264},[220,39783,347],{"class":420},[220,39785,359],{"class":264},[212,39787,39788],{"className":2844,"code":39699,"language":2846,"meta":178,"style":178},[99,39789,39790,39798,39806,39814,39822],{"__ignoreMap":178},[220,39791,39792,39794,39796],{"class":222,"line":223},[220,39793,343],{"class":264},[220,39795,347],{"class":420},[220,39797,359],{"class":264},[220,39799,39800,39802,39804],{"class":222,"line":179},[220,39801,364],{"class":264},[220,39803,39677],{"class":420},[220,39805,359],{"class":264},[220,39807,39808,39810,39812],{"class":222,"line":389},[220,39809,2550],{"class":264},[220,39811,2553],{"class":420},[220,39813,386],{"class":264},[220,39815,39816,39818,39820],{"class":222,"line":399},[220,39817,2567],{"class":264},[220,39819,39677],{"class":420},[220,39821,359],{"class":264},[220,39823,39824,39826,39828],{"class":222,"line":644},[220,39825,402],{"class":264},[220,39827,347],{"class":420},[220,39829,359],{"class":264},[212,39831,39832],{"className":468,"code":39699,"language":469,"meta":178,"style":178},[99,39833,39834,39842,39850,39858,39866],{"__ignoreMap":178},[220,39835,39836,39838,39840],{"class":222,"line":223},[220,39837,343],{"class":264},[220,39839,347],{"class":420},[220,39841,359],{"class":264},[220,39843,39844,39846,39848],{"class":222,"line":179},[220,39845,364],{"class":264},[220,39847,39677],{"class":420},[220,39849,359],{"class":264},[220,39851,39852,39854,39856],{"class":222,"line":389},[220,39853,2550],{"class":264},[220,39855,2553],{"class":420},[220,39857,386],{"class":264},[220,39859,39860,39862,39864],{"class":222,"line":399},[220,39861,2567],{"class":264},[220,39863,39677],{"class":420},[220,39865,359],{"class":264},[220,39867,39868,39870,39872],{"class":222,"line":644},[220,39869,402],{"class":264},[220,39871,347],{"class":420},[220,39873,359],{"class":264},[212,39875,39877],{"className":251,"code":39876,"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,39878,39879,39889,39893,39907,39911,39920,39928,39932,39936],{"__ignoreMap":178},[220,39880,39881,39883,39885,39887],{"class":222,"line":223},[220,39882,261],{"class":260},[220,39884,11507],{"class":264},[220,39886,268],{"class":260},[220,39888,4007],{"class":230},[220,39890,39891],{"class":222,"line":179},[220,39892,647],{"emptyLinePlaceholder":194},[220,39894,39895,39897,39899,39901,39903,39905],{"class":222,"line":389},[220,39896,1735],{"class":260},[220,39898,1738],{"class":420},[220,39900,1741],{"class":260},[220,39902,1744],{"class":260},[220,39904,1747],{"class":226},[220,39906,1750],{"class":264},[220,39908,39909],{"class":222,"line":399},[220,39910,1765],{"class":264},[220,39912,39913,39915,39918],{"class":222,"line":644},[220,39914,1770],{"class":264},[220,39916,39917],{"class":230},"'CompressionArtifacts'",[220,39919,7004],{"class":264},[220,39921,39922,39924,39926],{"class":222,"line":650},[220,39923,7009],{"class":264},[220,39925,3206],{"class":230},[220,39927,2465],{"class":264},[220,39929,39930],{"class":222,"line":656},[220,39931,7026],{"class":264},[220,39933,39934],{"class":222,"line":673},[220,39935,1787],{"class":264},[220,39937,39938],{"class":222,"line":682},[220,39939,1792],{"class":264},[1504,39941,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":39943},[39944,39945],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcompressionartifacts",{"title":39677,"description":39685},"docs\u002Fcomponents\u002FCompressionArtifacts","P2BT0DcjrB-zkLZJxhp7ssp_GTeYqS6GubItrAZY13o",{"id":39952,"title":39953,"body":39954,"category":33391,"componentType":25878,"description":39961,"extension":191,"meta":40278,"navigation":194,"path":40279,"requiresChild":194,"seo":40280,"stem":40281,"__hash__":40282},"components\u002Fdocs\u002Fcomponents\u002FConcentricSpin.md","ConcentricSpin",{"type":8,"value":39955,"toc":40274},[39956,39959,39962,39964,39966,39969,39971,40272],[11,39957,39953],{"id":39958},"concentricspin",[15,39960,39961],{},"Concentric rings that each rotate the underlying image by different amounts",[31906,39963],{"component":39953},[23,39965,31910],{"id":26528},[31912,39967],{":props":39968},"[{\"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,39970,31918],{"id":31917},[246,39972,39973,40029,40088,40144,40202],{":tabs":1557},[212,39974,39976],{"className":334,"code":39975,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,39977,39978,39986,39993,40001,40005,40013,40021],{"__ignoreMap":178},[220,39979,39980,39982,39984],{"class":222,"line":223},[220,39981,343],{"class":264},[220,39983,347],{"class":346},[220,39985,359],{"class":264},[220,39987,39988,39990],{"class":222,"line":179},[220,39989,364],{"class":264},[220,39991,39992],{"class":346},"ConcentricSpin\n",[220,39994,39995,39997,39999],{"class":222,"line":389},[220,39996,20366],{"class":226},[220,39998,353],{"class":264},[220,40000,31949],{"class":230},[220,40002,40003],{"class":222,"line":399},[220,40004,31954],{"class":264},[220,40006,40007,40009,40011],{"class":222,"line":644},[220,40008,2550],{"class":264},[220,40010,2553],{"class":346},[220,40012,386],{"class":264},[220,40014,40015,40017,40019],{"class":222,"line":650},[220,40016,2567],{"class":264},[220,40018,39953],{"class":346},[220,40020,359],{"class":264},[220,40022,40023,40025,40027],{"class":222,"line":656},[220,40024,402],{"class":264},[220,40026,347],{"class":346},[220,40028,359],{"class":264},[212,40030,40032],{"className":409,"code":40031,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle \u002F>\n \u003C\u002FConcentricSpin>\n\u003C\u002FShader>\n",[99,40033,40034,40042,40048,40060,40064,40072,40080],{"__ignoreMap":178},[220,40035,40036,40038,40040],{"class":222,"line":223},[220,40037,343],{"class":264},[220,40039,347],{"class":420},[220,40041,359],{"class":264},[220,40043,40044,40046],{"class":222,"line":179},[220,40045,364],{"class":264},[220,40047,39992],{"class":420},[220,40049,40050,40052,40054,40056,40058],{"class":222,"line":389},[220,40051,20477],{"class":226},[220,40053,353],{"class":260},[220,40055,743],{"class":264},[220,40057,24795],{"class":420},[220,40059,749],{"class":264},[220,40061,40062],{"class":222,"line":399},[220,40063,31954],{"class":264},[220,40065,40066,40068,40070],{"class":222,"line":644},[220,40067,2550],{"class":264},[220,40069,2553],{"class":420},[220,40071,386],{"class":264},[220,40073,40074,40076,40078],{"class":222,"line":650},[220,40075,2567],{"class":264},[220,40077,39953],{"class":420},[220,40079,359],{"class":264},[220,40081,40082,40084,40086],{"class":222,"line":656},[220,40083,402],{"class":264},[220,40085,347],{"class":420},[220,40087,359],{"class":264},[212,40089,40090],{"className":2844,"code":40031,"language":2846,"meta":178,"style":178},[99,40091,40092,40100,40106,40116,40120,40128,40136],{"__ignoreMap":178},[220,40093,40094,40096,40098],{"class":222,"line":223},[220,40095,343],{"class":264},[220,40097,347],{"class":420},[220,40099,359],{"class":264},[220,40101,40102,40104],{"class":222,"line":179},[220,40103,364],{"class":264},[220,40105,39992],{"class":420},[220,40107,40108,40110,40112,40114],{"class":222,"line":389},[220,40109,20477],{"class":226},[220,40111,29866],{"class":264},[220,40113,24795],{"class":420},[220,40115,749],{"class":264},[220,40117,40118],{"class":222,"line":399},[220,40119,31954],{"class":264},[220,40121,40122,40124,40126],{"class":222,"line":644},[220,40123,2550],{"class":264},[220,40125,2553],{"class":420},[220,40127,386],{"class":264},[220,40129,40130,40132,40134],{"class":222,"line":650},[220,40131,2567],{"class":264},[220,40133,39953],{"class":420},[220,40135,359],{"class":264},[220,40137,40138,40140,40142],{"class":222,"line":656},[220,40139,402],{"class":264},[220,40141,347],{"class":420},[220,40143,359],{"class":264},[212,40145,40146],{"className":468,"code":40031,"language":469,"meta":178,"style":178},[99,40147,40148,40156,40162,40174,40178,40186,40194],{"__ignoreMap":178},[220,40149,40150,40152,40154],{"class":222,"line":223},[220,40151,343],{"class":264},[220,40153,347],{"class":420},[220,40155,359],{"class":264},[220,40157,40158,40160],{"class":222,"line":179},[220,40159,364],{"class":264},[220,40161,39992],{"class":420},[220,40163,40164,40166,40168,40170,40172],{"class":222,"line":389},[220,40165,20477],{"class":226},[220,40167,353],{"class":260},[220,40169,743],{"class":264},[220,40171,24795],{"class":420},[220,40173,749],{"class":264},[220,40175,40176],{"class":222,"line":399},[220,40177,31954],{"class":264},[220,40179,40180,40182,40184],{"class":222,"line":644},[220,40181,2550],{"class":264},[220,40183,2553],{"class":420},[220,40185,386],{"class":264},[220,40187,40188,40190,40192],{"class":222,"line":650},[220,40189,2567],{"class":264},[220,40191,39953],{"class":420},[220,40193,359],{"class":264},[220,40195,40196,40198,40200],{"class":222,"line":656},[220,40197,402],{"class":264},[220,40199,347],{"class":420},[220,40201,359],{"class":264},[212,40203,40205],{"className":251,"code":40204,"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,40206,40207,40217,40221,40235,40239,40252,40260,40264,40268],{"__ignoreMap":178},[220,40208,40209,40211,40213,40215],{"class":222,"line":223},[220,40210,261],{"class":260},[220,40212,11507],{"class":264},[220,40214,268],{"class":260},[220,40216,4007],{"class":230},[220,40218,40219],{"class":222,"line":179},[220,40220,647],{"emptyLinePlaceholder":194},[220,40222,40223,40225,40227,40229,40231,40233],{"class":222,"line":389},[220,40224,1735],{"class":260},[220,40226,1738],{"class":420},[220,40228,1741],{"class":260},[220,40230,1744],{"class":260},[220,40232,1747],{"class":226},[220,40234,1750],{"class":264},[220,40236,40237],{"class":222,"line":399},[220,40238,1765],{"class":264},[220,40240,40241,40243,40246,40248,40250],{"class":222,"line":644},[220,40242,1770],{"class":264},[220,40244,40245],{"class":230},"'ConcentricSpin'",[220,40247,32198],{"class":264},[220,40249,24795],{"class":420},[220,40251,7541],{"class":264},[220,40253,40254,40256,40258],{"class":222,"line":650},[220,40255,7009],{"class":264},[220,40257,3206],{"class":230},[220,40259,2465],{"class":264},[220,40261,40262],{"class":222,"line":656},[220,40263,7026],{"class":264},[220,40265,40266],{"class":222,"line":673},[220,40267,1787],{"class":264},[220,40269,40270],{"class":222,"line":682},[220,40271,1792],{"class":264},[1504,40273,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":40275},[40276,40277],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fconcentricspin",{"title":39953,"description":39961},"docs\u002Fcomponents\u002FConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":40284,"title":40285,"body":40286,"category":33058,"componentType":25872,"description":40293,"extension":191,"meta":40478,"navigation":194,"path":40479,"requiresChild":32525,"seo":40480,"stem":40481,"__hash__":40482},"components\u002Fdocs\u002Fcomponents\u002FConicGradient.md","ConicGradient",{"type":8,"value":40287,"toc":40474},[40288,40291,40294,40296,40298,40301,40303,40472],[11,40289,40285],{"id":40290},"conicgradient",[15,40292,40293],{},"Colors sweep in a full circle around a center point, like a color wheel",[31906,40295],{"component":40285},[23,40297,31910],{"id":26528},[31912,40299],{":props":40300},"[{\"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,40302,31918],{"id":31917},[246,40304,40305,40334,40362,40390,40418],{":tabs":1557},[212,40306,40308],{"className":334,"code":40307,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CConicGradient \u002F>\n\u003C\u002FShader>\n",[99,40309,40310,40318,40326],{"__ignoreMap":178},[220,40311,40312,40314,40316],{"class":222,"line":223},[220,40313,343],{"class":264},[220,40315,347],{"class":346},[220,40317,359],{"class":264},[220,40319,40320,40322,40324],{"class":222,"line":179},[220,40321,364],{"class":264},[220,40323,40285],{"class":346},[220,40325,386],{"class":264},[220,40327,40328,40330,40332],{"class":222,"line":389},[220,40329,402],{"class":264},[220,40331,347],{"class":346},[220,40333,359],{"class":264},[212,40335,40336],{"className":409,"code":40307,"language":411,"meta":178,"style":178},[99,40337,40338,40346,40354],{"__ignoreMap":178},[220,40339,40340,40342,40344],{"class":222,"line":223},[220,40341,343],{"class":264},[220,40343,347],{"class":420},[220,40345,359],{"class":264},[220,40347,40348,40350,40352],{"class":222,"line":179},[220,40349,364],{"class":264},[220,40351,40285],{"class":420},[220,40353,386],{"class":264},[220,40355,40356,40358,40360],{"class":222,"line":389},[220,40357,402],{"class":264},[220,40359,347],{"class":420},[220,40361,359],{"class":264},[212,40363,40364],{"className":2844,"code":40307,"language":2846,"meta":178,"style":178},[99,40365,40366,40374,40382],{"__ignoreMap":178},[220,40367,40368,40370,40372],{"class":222,"line":223},[220,40369,343],{"class":264},[220,40371,347],{"class":420},[220,40373,359],{"class":264},[220,40375,40376,40378,40380],{"class":222,"line":179},[220,40377,364],{"class":264},[220,40379,40285],{"class":420},[220,40381,386],{"class":264},[220,40383,40384,40386,40388],{"class":222,"line":389},[220,40385,402],{"class":264},[220,40387,347],{"class":420},[220,40389,359],{"class":264},[212,40391,40392],{"className":468,"code":40307,"language":469,"meta":178,"style":178},[99,40393,40394,40402,40410],{"__ignoreMap":178},[220,40395,40396,40398,40400],{"class":222,"line":223},[220,40397,343],{"class":264},[220,40399,347],{"class":420},[220,40401,359],{"class":264},[220,40403,40404,40406,40408],{"class":222,"line":179},[220,40405,364],{"class":264},[220,40407,40285],{"class":420},[220,40409,386],{"class":264},[220,40411,40412,40414,40416],{"class":222,"line":389},[220,40413,402],{"class":264},[220,40415,347],{"class":420},[220,40417,359],{"class":264},[212,40419,40421],{"className":251,"code":40420,"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,40422,40423,40433,40437,40451,40455,40464,40468],{"__ignoreMap":178},[220,40424,40425,40427,40429,40431],{"class":222,"line":223},[220,40426,261],{"class":260},[220,40428,11507],{"class":264},[220,40430,268],{"class":260},[220,40432,4007],{"class":230},[220,40434,40435],{"class":222,"line":179},[220,40436,647],{"emptyLinePlaceholder":194},[220,40438,40439,40441,40443,40445,40447,40449],{"class":222,"line":389},[220,40440,1735],{"class":260},[220,40442,1738],{"class":420},[220,40444,1741],{"class":260},[220,40446,1744],{"class":260},[220,40448,1747],{"class":226},[220,40450,1750],{"class":264},[220,40452,40453],{"class":222,"line":399},[220,40454,1765],{"class":264},[220,40456,40457,40459,40462],{"class":222,"line":644},[220,40458,1770],{"class":264},[220,40460,40461],{"class":230},"'ConicGradient'",[220,40463,2465],{"class":264},[220,40465,40466],{"class":222,"line":650},[220,40467,1787],{"class":264},[220,40469,40470],{"class":222,"line":656},[220,40471,1792],{"class":264},[1504,40473,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":40475},[40476,40477],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fconicgradient",{"title":40285,"description":40293},"docs\u002Fcomponents\u002FConicGradient","lAoOYidN3eaNhRZp1Xgum4czubv5fEnMUNXUkkeq_j0",{"id":40484,"title":40485,"body":40486,"category":32801,"componentType":25878,"description":40493,"extension":191,"meta":40754,"navigation":194,"path":40755,"requiresChild":194,"seo":40756,"stem":40757,"__hash__":40758},"components\u002Fdocs\u002Fcomponents\u002FContourLines.md","ContourLines",{"type":8,"value":40487,"toc":40750},[40488,40491,40494,40496,40498,40501,40503,40748],[11,40489,40485],{"id":40490},"contourlines",[15,40492,40493],{},"Draw topographical contour lines based on luminance or alpha",[31906,40495],{"component":40485},[23,40497,31910],{"id":26528},[31912,40499],{":props":40500},"[{\"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,40502,31918],{"id":31917},[246,40504,40505,40550,40594,40638,40682],{":tabs":1557},[212,40506,40508],{"className":334,"code":40507,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CContourLines>\n \u003CCircle \u002F>\n \u003C\u002FContourLines>\n\u003C\u002FShader>\n",[99,40509,40510,40518,40526,40534,40542],{"__ignoreMap":178},[220,40511,40512,40514,40516],{"class":222,"line":223},[220,40513,343],{"class":264},[220,40515,347],{"class":346},[220,40517,359],{"class":264},[220,40519,40520,40522,40524],{"class":222,"line":179},[220,40521,364],{"class":264},[220,40523,40485],{"class":346},[220,40525,359],{"class":264},[220,40527,40528,40530,40532],{"class":222,"line":389},[220,40529,2550],{"class":264},[220,40531,2553],{"class":346},[220,40533,386],{"class":264},[220,40535,40536,40538,40540],{"class":222,"line":399},[220,40537,2567],{"class":264},[220,40539,40485],{"class":346},[220,40541,359],{"class":264},[220,40543,40544,40546,40548],{"class":222,"line":644},[220,40545,402],{"class":264},[220,40547,347],{"class":346},[220,40549,359],{"class":264},[212,40551,40552],{"className":409,"code":40507,"language":411,"meta":178,"style":178},[99,40553,40554,40562,40570,40578,40586],{"__ignoreMap":178},[220,40555,40556,40558,40560],{"class":222,"line":223},[220,40557,343],{"class":264},[220,40559,347],{"class":420},[220,40561,359],{"class":264},[220,40563,40564,40566,40568],{"class":222,"line":179},[220,40565,364],{"class":264},[220,40567,40485],{"class":420},[220,40569,359],{"class":264},[220,40571,40572,40574,40576],{"class":222,"line":389},[220,40573,2550],{"class":264},[220,40575,2553],{"class":420},[220,40577,386],{"class":264},[220,40579,40580,40582,40584],{"class":222,"line":399},[220,40581,2567],{"class":264},[220,40583,40485],{"class":420},[220,40585,359],{"class":264},[220,40587,40588,40590,40592],{"class":222,"line":644},[220,40589,402],{"class":264},[220,40591,347],{"class":420},[220,40593,359],{"class":264},[212,40595,40596],{"className":2844,"code":40507,"language":2846,"meta":178,"style":178},[99,40597,40598,40606,40614,40622,40630],{"__ignoreMap":178},[220,40599,40600,40602,40604],{"class":222,"line":223},[220,40601,343],{"class":264},[220,40603,347],{"class":420},[220,40605,359],{"class":264},[220,40607,40608,40610,40612],{"class":222,"line":179},[220,40609,364],{"class":264},[220,40611,40485],{"class":420},[220,40613,359],{"class":264},[220,40615,40616,40618,40620],{"class":222,"line":389},[220,40617,2550],{"class":264},[220,40619,2553],{"class":420},[220,40621,386],{"class":264},[220,40623,40624,40626,40628],{"class":222,"line":399},[220,40625,2567],{"class":264},[220,40627,40485],{"class":420},[220,40629,359],{"class":264},[220,40631,40632,40634,40636],{"class":222,"line":644},[220,40633,402],{"class":264},[220,40635,347],{"class":420},[220,40637,359],{"class":264},[212,40639,40640],{"className":468,"code":40507,"language":469,"meta":178,"style":178},[99,40641,40642,40650,40658,40666,40674],{"__ignoreMap":178},[220,40643,40644,40646,40648],{"class":222,"line":223},[220,40645,343],{"class":264},[220,40647,347],{"class":420},[220,40649,359],{"class":264},[220,40651,40652,40654,40656],{"class":222,"line":179},[220,40653,364],{"class":264},[220,40655,40485],{"class":420},[220,40657,359],{"class":264},[220,40659,40660,40662,40664],{"class":222,"line":389},[220,40661,2550],{"class":264},[220,40663,2553],{"class":420},[220,40665,386],{"class":264},[220,40667,40668,40670,40672],{"class":222,"line":399},[220,40669,2567],{"class":264},[220,40671,40485],{"class":420},[220,40673,359],{"class":264},[220,40675,40676,40678,40680],{"class":222,"line":644},[220,40677,402],{"class":264},[220,40679,347],{"class":420},[220,40681,359],{"class":264},[212,40683,40685],{"className":251,"code":40684,"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,40686,40687,40697,40701,40715,40719,40728,40736,40740,40744],{"__ignoreMap":178},[220,40688,40689,40691,40693,40695],{"class":222,"line":223},[220,40690,261],{"class":260},[220,40692,11507],{"class":264},[220,40694,268],{"class":260},[220,40696,4007],{"class":230},[220,40698,40699],{"class":222,"line":179},[220,40700,647],{"emptyLinePlaceholder":194},[220,40702,40703,40705,40707,40709,40711,40713],{"class":222,"line":389},[220,40704,1735],{"class":260},[220,40706,1738],{"class":420},[220,40708,1741],{"class":260},[220,40710,1744],{"class":260},[220,40712,1747],{"class":226},[220,40714,1750],{"class":264},[220,40716,40717],{"class":222,"line":399},[220,40718,1765],{"class":264},[220,40720,40721,40723,40726],{"class":222,"line":644},[220,40722,1770],{"class":264},[220,40724,40725],{"class":230},"'ContourLines'",[220,40727,7004],{"class":264},[220,40729,40730,40732,40734],{"class":222,"line":650},[220,40731,7009],{"class":264},[220,40733,3206],{"class":230},[220,40735,2465],{"class":264},[220,40737,40738],{"class":222,"line":656},[220,40739,7026],{"class":264},[220,40741,40742],{"class":222,"line":673},[220,40743,1787],{"class":264},[220,40745,40746],{"class":222,"line":682},[220,40747,1792],{"class":264},[1504,40749,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":40751},[40752,40753],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcontourlines",{"title":40485,"description":40493},"docs\u002Fcomponents\u002FContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":40760,"title":40761,"body":40762,"category":33391,"componentType":25878,"description":40769,"extension":191,"meta":41030,"navigation":194,"path":41031,"requiresChild":194,"seo":41032,"stem":41033,"__hash__":41034},"components\u002Fdocs\u002Fcomponents\u002FCornerPin.md","CornerPin",{"type":8,"value":40763,"toc":41026},[40764,40767,40770,40772,40774,40777,40779,41024],[11,40765,40761],{"id":40766},"cornerpin",[15,40768,40769],{},"Pin each corner of the content to an arbitrary position for a free perspective warp",[31906,40771],{"component":40761},[23,40773,31910],{"id":26528},[31912,40775],{":props":40776},"[{\"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,40778,31918],{"id":31917},[246,40780,40781,40826,40870,40914,40958],{":tabs":1557},[212,40782,40784],{"className":334,"code":40783,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCornerPin>\n \u003CCircle \u002F>\n \u003C\u002FCornerPin>\n\u003C\u002FShader>\n",[99,40785,40786,40794,40802,40810,40818],{"__ignoreMap":178},[220,40787,40788,40790,40792],{"class":222,"line":223},[220,40789,343],{"class":264},[220,40791,347],{"class":346},[220,40793,359],{"class":264},[220,40795,40796,40798,40800],{"class":222,"line":179},[220,40797,364],{"class":264},[220,40799,40761],{"class":346},[220,40801,359],{"class":264},[220,40803,40804,40806,40808],{"class":222,"line":389},[220,40805,2550],{"class":264},[220,40807,2553],{"class":346},[220,40809,386],{"class":264},[220,40811,40812,40814,40816],{"class":222,"line":399},[220,40813,2567],{"class":264},[220,40815,40761],{"class":346},[220,40817,359],{"class":264},[220,40819,40820,40822,40824],{"class":222,"line":644},[220,40821,402],{"class":264},[220,40823,347],{"class":346},[220,40825,359],{"class":264},[212,40827,40828],{"className":409,"code":40783,"language":411,"meta":178,"style":178},[99,40829,40830,40838,40846,40854,40862],{"__ignoreMap":178},[220,40831,40832,40834,40836],{"class":222,"line":223},[220,40833,343],{"class":264},[220,40835,347],{"class":420},[220,40837,359],{"class":264},[220,40839,40840,40842,40844],{"class":222,"line":179},[220,40841,364],{"class":264},[220,40843,40761],{"class":420},[220,40845,359],{"class":264},[220,40847,40848,40850,40852],{"class":222,"line":389},[220,40849,2550],{"class":264},[220,40851,2553],{"class":420},[220,40853,386],{"class":264},[220,40855,40856,40858,40860],{"class":222,"line":399},[220,40857,2567],{"class":264},[220,40859,40761],{"class":420},[220,40861,359],{"class":264},[220,40863,40864,40866,40868],{"class":222,"line":644},[220,40865,402],{"class":264},[220,40867,347],{"class":420},[220,40869,359],{"class":264},[212,40871,40872],{"className":2844,"code":40783,"language":2846,"meta":178,"style":178},[99,40873,40874,40882,40890,40898,40906],{"__ignoreMap":178},[220,40875,40876,40878,40880],{"class":222,"line":223},[220,40877,343],{"class":264},[220,40879,347],{"class":420},[220,40881,359],{"class":264},[220,40883,40884,40886,40888],{"class":222,"line":179},[220,40885,364],{"class":264},[220,40887,40761],{"class":420},[220,40889,359],{"class":264},[220,40891,40892,40894,40896],{"class":222,"line":389},[220,40893,2550],{"class":264},[220,40895,2553],{"class":420},[220,40897,386],{"class":264},[220,40899,40900,40902,40904],{"class":222,"line":399},[220,40901,2567],{"class":264},[220,40903,40761],{"class":420},[220,40905,359],{"class":264},[220,40907,40908,40910,40912],{"class":222,"line":644},[220,40909,402],{"class":264},[220,40911,347],{"class":420},[220,40913,359],{"class":264},[212,40915,40916],{"className":468,"code":40783,"language":469,"meta":178,"style":178},[99,40917,40918,40926,40934,40942,40950],{"__ignoreMap":178},[220,40919,40920,40922,40924],{"class":222,"line":223},[220,40921,343],{"class":264},[220,40923,347],{"class":420},[220,40925,359],{"class":264},[220,40927,40928,40930,40932],{"class":222,"line":179},[220,40929,364],{"class":264},[220,40931,40761],{"class":420},[220,40933,359],{"class":264},[220,40935,40936,40938,40940],{"class":222,"line":389},[220,40937,2550],{"class":264},[220,40939,2553],{"class":420},[220,40941,386],{"class":264},[220,40943,40944,40946,40948],{"class":222,"line":399},[220,40945,2567],{"class":264},[220,40947,40761],{"class":420},[220,40949,359],{"class":264},[220,40951,40952,40954,40956],{"class":222,"line":644},[220,40953,402],{"class":264},[220,40955,347],{"class":420},[220,40957,359],{"class":264},[212,40959,40961],{"className":251,"code":40960,"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,40962,40963,40973,40977,40991,40995,41004,41012,41016,41020],{"__ignoreMap":178},[220,40964,40965,40967,40969,40971],{"class":222,"line":223},[220,40966,261],{"class":260},[220,40968,11507],{"class":264},[220,40970,268],{"class":260},[220,40972,4007],{"class":230},[220,40974,40975],{"class":222,"line":179},[220,40976,647],{"emptyLinePlaceholder":194},[220,40978,40979,40981,40983,40985,40987,40989],{"class":222,"line":389},[220,40980,1735],{"class":260},[220,40982,1738],{"class":420},[220,40984,1741],{"class":260},[220,40986,1744],{"class":260},[220,40988,1747],{"class":226},[220,40990,1750],{"class":264},[220,40992,40993],{"class":222,"line":399},[220,40994,1765],{"class":264},[220,40996,40997,40999,41002],{"class":222,"line":644},[220,40998,1770],{"class":264},[220,41000,41001],{"class":230},"'CornerPin'",[220,41003,7004],{"class":264},[220,41005,41006,41008,41010],{"class":222,"line":650},[220,41007,7009],{"class":264},[220,41009,3206],{"class":230},[220,41011,2465],{"class":264},[220,41013,41014],{"class":222,"line":656},[220,41015,7026],{"class":264},[220,41017,41018],{"class":222,"line":673},[220,41019,1787],{"class":264},[220,41021,41022],{"class":222,"line":682},[220,41023,1792],{"class":264},[1504,41025,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":41027},[41028,41029],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcornerpin",{"title":40761,"description":40769},"docs\u002Fcomponents\u002FCornerPin","CAOxXPDVXZ6EbiGKubbnjN_ajITzWxZTWfjfhgeRFaA",{"id":41036,"title":41037,"body":41038,"category":15903,"componentType":25872,"description":41045,"extension":191,"meta":41323,"navigation":194,"path":41324,"requiresChild":32525,"seo":41325,"stem":41326,"__hash__":41327},"components\u002Fdocs\u002Fcomponents\u002FCrescent.md","Crescent",{"type":8,"value":41039,"toc":41319},[41040,41043,41046,41048,41050,41053,41055,41317],[11,41041,41037],{"id":41042},"crescent",[15,41044,41045],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[31906,41047],{"component":41037},[23,41049,31910],{"id":26528},[31912,41051],{":props":41052},"[{\"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,41054,31918],{"id":31917},[246,41056,41057,41106,41157,41205,41255],{":tabs":1557},[212,41058,41060],{"className":334,"code":41059,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,41061,41062,41070,41077,41085,41094,41098],{"__ignoreMap":178},[220,41063,41064,41066,41068],{"class":222,"line":223},[220,41065,343],{"class":264},[220,41067,347],{"class":346},[220,41069,359],{"class":264},[220,41071,41072,41074],{"class":222,"line":179},[220,41073,364],{"class":264},[220,41075,41076],{"class":346},"Crescent\n",[220,41078,41079,41081,41083],{"class":222,"line":389},[220,41080,9630],{"class":226},[220,41082,353],{"class":264},[220,41084,9586],{"class":230},[220,41086,41087,41089,41091],{"class":222,"line":399},[220,41088,17400],{"class":226},[220,41090,353],{"class":264},[220,41092,41093],{"class":230},"\"0.3\"\n",[220,41095,41096],{"class":222,"line":644},[220,41097,1234],{"class":264},[220,41099,41100,41102,41104],{"class":222,"line":650},[220,41101,402],{"class":264},[220,41103,347],{"class":346},[220,41105,359],{"class":264},[212,41107,41109],{"className":409,"code":41108,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,41110,41111,41119,41125,41133,41145,41149],{"__ignoreMap":178},[220,41112,41113,41115,41117],{"class":222,"line":223},[220,41114,343],{"class":264},[220,41116,347],{"class":420},[220,41118,359],{"class":264},[220,41120,41121,41123],{"class":222,"line":179},[220,41122,364],{"class":264},[220,41124,41076],{"class":420},[220,41126,41127,41129,41131],{"class":222,"line":389},[220,41128,9630],{"class":226},[220,41130,353],{"class":260},[220,41132,9586],{"class":230},[220,41134,41135,41137,41139,41141,41143],{"class":222,"line":399},[220,41136,9640],{"class":226},[220,41138,353],{"class":260},[220,41140,743],{"class":264},[220,41142,21999],{"class":420},[220,41144,749],{"class":264},[220,41146,41147],{"class":222,"line":644},[220,41148,1234],{"class":264},[220,41150,41151,41153,41155],{"class":222,"line":650},[220,41152,402],{"class":264},[220,41154,347],{"class":420},[220,41156,359],{"class":264},[212,41158,41159],{"className":2844,"code":41108,"language":2846,"meta":178,"style":178},[99,41160,41161,41169,41175,41183,41193,41197],{"__ignoreMap":178},[220,41162,41163,41165,41167],{"class":222,"line":223},[220,41164,343],{"class":264},[220,41166,347],{"class":420},[220,41168,359],{"class":264},[220,41170,41171,41173],{"class":222,"line":179},[220,41172,364],{"class":264},[220,41174,41076],{"class":420},[220,41176,41177,41179,41181],{"class":222,"line":389},[220,41178,9630],{"class":226},[220,41180,353],{"class":264},[220,41182,9586],{"class":230},[220,41184,41185,41187,41189,41191],{"class":222,"line":399},[220,41186,9640],{"class":226},[220,41188,29866],{"class":264},[220,41190,21999],{"class":420},[220,41192,749],{"class":264},[220,41194,41195],{"class":222,"line":644},[220,41196,1234],{"class":264},[220,41198,41199,41201,41203],{"class":222,"line":650},[220,41200,402],{"class":264},[220,41202,347],{"class":420},[220,41204,359],{"class":264},[212,41206,41207],{"className":468,"code":41108,"language":469,"meta":178,"style":178},[99,41208,41209,41217,41223,41231,41243,41247],{"__ignoreMap":178},[220,41210,41211,41213,41215],{"class":222,"line":223},[220,41212,343],{"class":264},[220,41214,347],{"class":420},[220,41216,359],{"class":264},[220,41218,41219,41221],{"class":222,"line":179},[220,41220,364],{"class":264},[220,41222,41076],{"class":420},[220,41224,41225,41227,41229],{"class":222,"line":389},[220,41226,9630],{"class":226},[220,41228,353],{"class":260},[220,41230,9586],{"class":230},[220,41232,41233,41235,41237,41239,41241],{"class":222,"line":399},[220,41234,9640],{"class":226},[220,41236,353],{"class":260},[220,41238,743],{"class":264},[220,41240,21999],{"class":420},[220,41242,749],{"class":264},[220,41244,41245],{"class":222,"line":644},[220,41246,1234],{"class":264},[220,41248,41249,41251,41253],{"class":222,"line":650},[220,41250,402],{"class":264},[220,41252,347],{"class":420},[220,41254,359],{"class":264},[212,41256,41258],{"className":251,"code":41257,"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,41259,41260,41270,41274,41288,41292,41309,41313],{"__ignoreMap":178},[220,41261,41262,41264,41266,41268],{"class":222,"line":223},[220,41263,261],{"class":260},[220,41265,11507],{"class":264},[220,41267,268],{"class":260},[220,41269,4007],{"class":230},[220,41271,41272],{"class":222,"line":179},[220,41273,647],{"emptyLinePlaceholder":194},[220,41275,41276,41278,41280,41282,41284,41286],{"class":222,"line":389},[220,41277,1735],{"class":260},[220,41279,1738],{"class":420},[220,41281,1741],{"class":260},[220,41283,1744],{"class":260},[220,41285,1747],{"class":226},[220,41287,1750],{"class":264},[220,41289,41290],{"class":222,"line":399},[220,41291,1765],{"class":264},[220,41293,41294,41296,41299,41301,41303,41305,41307],{"class":222,"line":644},[220,41295,1770],{"class":264},[220,41297,41298],{"class":230},"'Crescent'",[220,41300,1776],{"class":264},[220,41302,10164],{"class":230},[220,41304,6561],{"class":264},[220,41306,21999],{"class":420},[220,41308,1782],{"class":264},[220,41310,41311],{"class":222,"line":650},[220,41312,1787],{"class":264},[220,41314,41315],{"class":222,"line":656},[220,41316,1792],{"class":264},[1504,41318,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41320},[41321,41322],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcrescent",{"title":41037,"description":41045},"docs\u002Fcomponents\u002FCrescent","gK3rkOK0ZeEW1xfB_ZFuf-cW7ln2C-Hn36xZXOlWTQg",{"id":41329,"title":41330,"body":41331,"category":15903,"componentType":25872,"description":41338,"extension":191,"meta":41616,"navigation":194,"path":41617,"requiresChild":32525,"seo":41618,"stem":41619,"__hash__":41620},"components\u002Fdocs\u002Fcomponents\u002FCross.md","Cross",{"type":8,"value":41332,"toc":41612},[41333,41336,41339,41341,41343,41346,41348,41610],[11,41334,41330],{"id":41335},"cross",[15,41337,41338],{},"Plus \u002F cross shape with adjustable arm length, width, and rounding",[31906,41340],{"component":41330},[23,41342,31910],{"id":26528},[31912,41344],{":props":41345},"[{\"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,41347,31918],{"id":31917},[246,41349,41350,41399,41450,41498,41548],{":tabs":1557},[212,41351,41353],{"className":334,"code":41352,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,41354,41355,41363,41370,41378,41387,41391],{"__ignoreMap":178},[220,41356,41357,41359,41361],{"class":222,"line":223},[220,41358,343],{"class":264},[220,41360,347],{"class":346},[220,41362,359],{"class":264},[220,41364,41365,41367],{"class":222,"line":179},[220,41366,364],{"class":264},[220,41368,41369],{"class":346},"Cross\n",[220,41371,41372,41374,41376],{"class":222,"line":389},[220,41373,9630],{"class":226},[220,41375,353],{"class":264},[220,41377,9586],{"class":230},[220,41379,41380,41382,41384],{"class":222,"line":399},[220,41381,17400],{"class":226},[220,41383,353],{"class":264},[220,41385,41386],{"class":230},"\"0.35\"\n",[220,41388,41389],{"class":222,"line":644},[220,41390,1234],{"class":264},[220,41392,41393,41395,41397],{"class":222,"line":650},[220,41394,402],{"class":264},[220,41396,347],{"class":346},[220,41398,359],{"class":264},[212,41400,41402],{"className":409,"code":41401,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,41403,41404,41412,41418,41426,41438,41442],{"__ignoreMap":178},[220,41405,41406,41408,41410],{"class":222,"line":223},[220,41407,343],{"class":264},[220,41409,347],{"class":420},[220,41411,359],{"class":264},[220,41413,41414,41416],{"class":222,"line":179},[220,41415,364],{"class":264},[220,41417,41369],{"class":420},[220,41419,41420,41422,41424],{"class":222,"line":389},[220,41421,9630],{"class":226},[220,41423,353],{"class":260},[220,41425,9586],{"class":230},[220,41427,41428,41430,41432,41434,41436],{"class":222,"line":399},[220,41429,9640],{"class":226},[220,41431,353],{"class":260},[220,41433,743],{"class":264},[220,41435,21143],{"class":420},[220,41437,749],{"class":264},[220,41439,41440],{"class":222,"line":644},[220,41441,1234],{"class":264},[220,41443,41444,41446,41448],{"class":222,"line":650},[220,41445,402],{"class":264},[220,41447,347],{"class":420},[220,41449,359],{"class":264},[212,41451,41452],{"className":2844,"code":41401,"language":2846,"meta":178,"style":178},[99,41453,41454,41462,41468,41476,41486,41490],{"__ignoreMap":178},[220,41455,41456,41458,41460],{"class":222,"line":223},[220,41457,343],{"class":264},[220,41459,347],{"class":420},[220,41461,359],{"class":264},[220,41463,41464,41466],{"class":222,"line":179},[220,41465,364],{"class":264},[220,41467,41369],{"class":420},[220,41469,41470,41472,41474],{"class":222,"line":389},[220,41471,9630],{"class":226},[220,41473,353],{"class":264},[220,41475,9586],{"class":230},[220,41477,41478,41480,41482,41484],{"class":222,"line":399},[220,41479,9640],{"class":226},[220,41481,29866],{"class":264},[220,41483,21143],{"class":420},[220,41485,749],{"class":264},[220,41487,41488],{"class":222,"line":644},[220,41489,1234],{"class":264},[220,41491,41492,41494,41496],{"class":222,"line":650},[220,41493,402],{"class":264},[220,41495,347],{"class":420},[220,41497,359],{"class":264},[212,41499,41500],{"className":468,"code":41401,"language":469,"meta":178,"style":178},[99,41501,41502,41510,41516,41524,41536,41540],{"__ignoreMap":178},[220,41503,41504,41506,41508],{"class":222,"line":223},[220,41505,343],{"class":264},[220,41507,347],{"class":420},[220,41509,359],{"class":264},[220,41511,41512,41514],{"class":222,"line":179},[220,41513,364],{"class":264},[220,41515,41369],{"class":420},[220,41517,41518,41520,41522],{"class":222,"line":389},[220,41519,9630],{"class":226},[220,41521,353],{"class":260},[220,41523,9586],{"class":230},[220,41525,41526,41528,41530,41532,41534],{"class":222,"line":399},[220,41527,9640],{"class":226},[220,41529,353],{"class":260},[220,41531,743],{"class":264},[220,41533,21143],{"class":420},[220,41535,749],{"class":264},[220,41537,41538],{"class":222,"line":644},[220,41539,1234],{"class":264},[220,41541,41542,41544,41546],{"class":222,"line":650},[220,41543,402],{"class":264},[220,41545,347],{"class":420},[220,41547,359],{"class":264},[212,41549,41551],{"className":251,"code":41550,"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,41552,41553,41563,41567,41581,41585,41602,41606],{"__ignoreMap":178},[220,41554,41555,41557,41559,41561],{"class":222,"line":223},[220,41556,261],{"class":260},[220,41558,11507],{"class":264},[220,41560,268],{"class":260},[220,41562,4007],{"class":230},[220,41564,41565],{"class":222,"line":179},[220,41566,647],{"emptyLinePlaceholder":194},[220,41568,41569,41571,41573,41575,41577,41579],{"class":222,"line":389},[220,41570,1735],{"class":260},[220,41572,1738],{"class":420},[220,41574,1741],{"class":260},[220,41576,1744],{"class":260},[220,41578,1747],{"class":226},[220,41580,1750],{"class":264},[220,41582,41583],{"class":222,"line":399},[220,41584,1765],{"class":264},[220,41586,41587,41589,41592,41594,41596,41598,41600],{"class":222,"line":644},[220,41588,1770],{"class":264},[220,41590,41591],{"class":230},"'Cross'",[220,41593,1776],{"class":264},[220,41595,10164],{"class":230},[220,41597,6561],{"class":264},[220,41599,21143],{"class":420},[220,41601,1782],{"class":264},[220,41603,41604],{"class":222,"line":650},[220,41605,1787],{"class":264},[220,41607,41608],{"class":222,"line":656},[220,41609,1792],{"class":264},[1504,41611,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":41613},[41614,41615],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcross",{"title":41330,"description":41338},"docs\u002Fcomponents\u002FCross","DvRGwVA_CBw-m33grnS5kNxeOuwO-2lOfOaHZXeeKvk",{"id":41622,"title":23167,"body":41623,"category":36564,"componentType":25878,"description":41630,"extension":191,"meta":41891,"navigation":194,"path":41892,"requiresChild":194,"seo":41893,"stem":41894,"__hash__":41895},"components\u002Fdocs\u002Fcomponents\u002FCrystal.md",{"type":8,"value":41624,"toc":41887},[41625,41628,41631,41633,41635,41638,41640,41885],[11,41626,23167],{"id":41627},"crystal",[15,41629,41630],{},"Diamond-like crystal lens with faceted refraction.",[31906,41632],{"component":23167},[23,41634,31910],{"id":26528},[31912,41636],{":props":41637},"[{\"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,41639,31918],{"id":31917},[246,41641,41642,41687,41731,41775,41819],{":tabs":1557},[212,41643,41645],{"className":334,"code":41644,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCrystal>\n \u003CCircle \u002F>\n \u003C\u002FCrystal>\n\u003C\u002FShader>\n",[99,41646,41647,41655,41663,41671,41679],{"__ignoreMap":178},[220,41648,41649,41651,41653],{"class":222,"line":223},[220,41650,343],{"class":264},[220,41652,347],{"class":346},[220,41654,359],{"class":264},[220,41656,41657,41659,41661],{"class":222,"line":179},[220,41658,364],{"class":264},[220,41660,23167],{"class":346},[220,41662,359],{"class":264},[220,41664,41665,41667,41669],{"class":222,"line":389},[220,41666,2550],{"class":264},[220,41668,2553],{"class":346},[220,41670,386],{"class":264},[220,41672,41673,41675,41677],{"class":222,"line":399},[220,41674,2567],{"class":264},[220,41676,23167],{"class":346},[220,41678,359],{"class":264},[220,41680,41681,41683,41685],{"class":222,"line":644},[220,41682,402],{"class":264},[220,41684,347],{"class":346},[220,41686,359],{"class":264},[212,41688,41689],{"className":409,"code":41644,"language":411,"meta":178,"style":178},[99,41690,41691,41699,41707,41715,41723],{"__ignoreMap":178},[220,41692,41693,41695,41697],{"class":222,"line":223},[220,41694,343],{"class":264},[220,41696,347],{"class":420},[220,41698,359],{"class":264},[220,41700,41701,41703,41705],{"class":222,"line":179},[220,41702,364],{"class":264},[220,41704,23167],{"class":420},[220,41706,359],{"class":264},[220,41708,41709,41711,41713],{"class":222,"line":389},[220,41710,2550],{"class":264},[220,41712,2553],{"class":420},[220,41714,386],{"class":264},[220,41716,41717,41719,41721],{"class":222,"line":399},[220,41718,2567],{"class":264},[220,41720,23167],{"class":420},[220,41722,359],{"class":264},[220,41724,41725,41727,41729],{"class":222,"line":644},[220,41726,402],{"class":264},[220,41728,347],{"class":420},[220,41730,359],{"class":264},[212,41732,41733],{"className":2844,"code":41644,"language":2846,"meta":178,"style":178},[99,41734,41735,41743,41751,41759,41767],{"__ignoreMap":178},[220,41736,41737,41739,41741],{"class":222,"line":223},[220,41738,343],{"class":264},[220,41740,347],{"class":420},[220,41742,359],{"class":264},[220,41744,41745,41747,41749],{"class":222,"line":179},[220,41746,364],{"class":264},[220,41748,23167],{"class":420},[220,41750,359],{"class":264},[220,41752,41753,41755,41757],{"class":222,"line":389},[220,41754,2550],{"class":264},[220,41756,2553],{"class":420},[220,41758,386],{"class":264},[220,41760,41761,41763,41765],{"class":222,"line":399},[220,41762,2567],{"class":264},[220,41764,23167],{"class":420},[220,41766,359],{"class":264},[220,41768,41769,41771,41773],{"class":222,"line":644},[220,41770,402],{"class":264},[220,41772,347],{"class":420},[220,41774,359],{"class":264},[212,41776,41777],{"className":468,"code":41644,"language":469,"meta":178,"style":178},[99,41778,41779,41787,41795,41803,41811],{"__ignoreMap":178},[220,41780,41781,41783,41785],{"class":222,"line":223},[220,41782,343],{"class":264},[220,41784,347],{"class":420},[220,41786,359],{"class":264},[220,41788,41789,41791,41793],{"class":222,"line":179},[220,41790,364],{"class":264},[220,41792,23167],{"class":420},[220,41794,359],{"class":264},[220,41796,41797,41799,41801],{"class":222,"line":389},[220,41798,2550],{"class":264},[220,41800,2553],{"class":420},[220,41802,386],{"class":264},[220,41804,41805,41807,41809],{"class":222,"line":399},[220,41806,2567],{"class":264},[220,41808,23167],{"class":420},[220,41810,359],{"class":264},[220,41812,41813,41815,41817],{"class":222,"line":644},[220,41814,402],{"class":264},[220,41816,347],{"class":420},[220,41818,359],{"class":264},[212,41820,41822],{"className":251,"code":41821,"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,41823,41824,41834,41838,41852,41856,41865,41873,41877,41881],{"__ignoreMap":178},[220,41825,41826,41828,41830,41832],{"class":222,"line":223},[220,41827,261],{"class":260},[220,41829,11507],{"class":264},[220,41831,268],{"class":260},[220,41833,4007],{"class":230},[220,41835,41836],{"class":222,"line":179},[220,41837,647],{"emptyLinePlaceholder":194},[220,41839,41840,41842,41844,41846,41848,41850],{"class":222,"line":389},[220,41841,1735],{"class":260},[220,41843,1738],{"class":420},[220,41845,1741],{"class":260},[220,41847,1744],{"class":260},[220,41849,1747],{"class":226},[220,41851,1750],{"class":264},[220,41853,41854],{"class":222,"line":399},[220,41855,1765],{"class":264},[220,41857,41858,41860,41863],{"class":222,"line":644},[220,41859,1770],{"class":264},[220,41861,41862],{"class":230},"'Crystal'",[220,41864,7004],{"class":264},[220,41866,41867,41869,41871],{"class":222,"line":650},[220,41868,7009],{"class":264},[220,41870,3206],{"class":230},[220,41872,2465],{"class":264},[220,41874,41875],{"class":222,"line":656},[220,41876,7026],{"class":264},[220,41878,41879],{"class":222,"line":673},[220,41880,1787],{"class":264},[220,41882,41883],{"class":222,"line":682},[220,41884,1792],{"class":264},[1504,41886,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":41888},[41889,41890],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcrystal",{"title":23167,"description":41630},"docs\u002Fcomponents\u002FCrystal","DipLsKDC0W4dvbFPUkUuOv77m97wrhvin9Q08z3qsf0",{"id":41897,"title":41898,"body":41899,"category":33058,"componentType":25872,"description":41906,"extension":191,"meta":42090,"navigation":194,"path":42091,"requiresChild":32525,"seo":42092,"stem":42093,"__hash__":42094},"components\u002Fdocs\u002Fcomponents\u002FCurlNoise.md","CurlNoise",{"type":8,"value":41900,"toc":42086},[41901,41904,41907,41909,41911,41913,41915,42084],[11,41902,41898],{"id":41903},"curlnoise",[15,41905,41906],{},"Swirling divergence-free flow field that drifts over time",[31906,41908],{"component":41898},[23,41910,31910],{"id":26528},[31912,41912],{":props":34643},[23,41914,31918],{"id":31917},[246,41916,41917,41946,41974,42002,42030],{":tabs":1557},[212,41918,41920],{"className":334,"code":41919,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCurlNoise \u002F>\n\u003C\u002FShader>\n",[99,41921,41922,41930,41938],{"__ignoreMap":178},[220,41923,41924,41926,41928],{"class":222,"line":223},[220,41925,343],{"class":264},[220,41927,347],{"class":346},[220,41929,359],{"class":264},[220,41931,41932,41934,41936],{"class":222,"line":179},[220,41933,364],{"class":264},[220,41935,41898],{"class":346},[220,41937,386],{"class":264},[220,41939,41940,41942,41944],{"class":222,"line":389},[220,41941,402],{"class":264},[220,41943,347],{"class":346},[220,41945,359],{"class":264},[212,41947,41948],{"className":409,"code":41919,"language":411,"meta":178,"style":178},[99,41949,41950,41958,41966],{"__ignoreMap":178},[220,41951,41952,41954,41956],{"class":222,"line":223},[220,41953,343],{"class":264},[220,41955,347],{"class":420},[220,41957,359],{"class":264},[220,41959,41960,41962,41964],{"class":222,"line":179},[220,41961,364],{"class":264},[220,41963,41898],{"class":420},[220,41965,386],{"class":264},[220,41967,41968,41970,41972],{"class":222,"line":389},[220,41969,402],{"class":264},[220,41971,347],{"class":420},[220,41973,359],{"class":264},[212,41975,41976],{"className":2844,"code":41919,"language":2846,"meta":178,"style":178},[99,41977,41978,41986,41994],{"__ignoreMap":178},[220,41979,41980,41982,41984],{"class":222,"line":223},[220,41981,343],{"class":264},[220,41983,347],{"class":420},[220,41985,359],{"class":264},[220,41987,41988,41990,41992],{"class":222,"line":179},[220,41989,364],{"class":264},[220,41991,41898],{"class":420},[220,41993,386],{"class":264},[220,41995,41996,41998,42000],{"class":222,"line":389},[220,41997,402],{"class":264},[220,41999,347],{"class":420},[220,42001,359],{"class":264},[212,42003,42004],{"className":468,"code":41919,"language":469,"meta":178,"style":178},[99,42005,42006,42014,42022],{"__ignoreMap":178},[220,42007,42008,42010,42012],{"class":222,"line":223},[220,42009,343],{"class":264},[220,42011,347],{"class":420},[220,42013,359],{"class":264},[220,42015,42016,42018,42020],{"class":222,"line":179},[220,42017,364],{"class":264},[220,42019,41898],{"class":420},[220,42021,386],{"class":264},[220,42023,42024,42026,42028],{"class":222,"line":389},[220,42025,402],{"class":264},[220,42027,347],{"class":420},[220,42029,359],{"class":264},[212,42031,42033],{"className":251,"code":42032,"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,42034,42035,42045,42049,42063,42067,42076,42080],{"__ignoreMap":178},[220,42036,42037,42039,42041,42043],{"class":222,"line":223},[220,42038,261],{"class":260},[220,42040,11507],{"class":264},[220,42042,268],{"class":260},[220,42044,4007],{"class":230},[220,42046,42047],{"class":222,"line":179},[220,42048,647],{"emptyLinePlaceholder":194},[220,42050,42051,42053,42055,42057,42059,42061],{"class":222,"line":389},[220,42052,1735],{"class":260},[220,42054,1738],{"class":420},[220,42056,1741],{"class":260},[220,42058,1744],{"class":260},[220,42060,1747],{"class":226},[220,42062,1750],{"class":264},[220,42064,42065],{"class":222,"line":399},[220,42066,1765],{"class":264},[220,42068,42069,42071,42074],{"class":222,"line":644},[220,42070,1770],{"class":264},[220,42072,42073],{"class":230},"'CurlNoise'",[220,42075,2465],{"class":264},[220,42077,42078],{"class":222,"line":650},[220,42079,1787],{"class":264},[220,42081,42082],{"class":222,"line":656},[220,42083,1792],{"class":264},[1504,42085,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":42087},[42088,42089],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcurlnoise",{"title":41898,"description":41906},"docs\u002Fcomponents\u002FCurlNoise","WCQl-fLfIPxiFOfZLzT9m9QemmQD3j8WNihe8ge9lB4",{"id":42096,"title":14421,"body":42097,"category":35554,"componentType":25878,"description":42104,"extension":191,"meta":42469,"navigation":194,"path":42470,"requiresChild":194,"seo":42471,"stem":42472,"__hash__":42473},"components\u002Fdocs\u002Fcomponents\u002FCursorRipples.md",{"type":8,"value":42098,"toc":42465},[42099,42102,42105,42107,42109,42112,42114,42463],[11,42100,14421],{"id":42101},"cursorripples",[15,42103,42104],{},"Fluid-like ripple distortion",[31906,42106],{"component":14421},[23,42108,31910],{"id":26528},[31912,42110],{":props":42111},"[{\"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,42113,31918],{"id":31917},[246,42115,42116,42182,42253,42319,42389],{":tabs":1557},[212,42117,42119],{"className":334,"code":42118,"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,42120,42121,42129,42136,42145,42154,42158,42166,42174],{"__ignoreMap":178},[220,42122,42123,42125,42127],{"class":222,"line":223},[220,42124,343],{"class":264},[220,42126,347],{"class":346},[220,42128,359],{"class":264},[220,42130,42131,42133],{"class":222,"line":179},[220,42132,364],{"class":264},[220,42134,42135],{"class":346},"CursorRipples\n",[220,42137,42138,42140,42142],{"class":222,"line":389},[220,42139,20366],{"class":226},[220,42141,353],{"class":264},[220,42143,42144],{"class":230},"\"10\"\n",[220,42146,42147,42149,42151],{"class":222,"line":399},[220,42148,17400],{"class":226},[220,42150,353],{"class":264},[220,42152,42153],{"class":230},"\"0.5\"\n",[220,42155,42156],{"class":222,"line":644},[220,42157,31954],{"class":264},[220,42159,42160,42162,42164],{"class":222,"line":650},[220,42161,2550],{"class":264},[220,42163,2553],{"class":346},[220,42165,386],{"class":264},[220,42167,42168,42170,42172],{"class":222,"line":656},[220,42169,2567],{"class":264},[220,42171,14421],{"class":346},[220,42173,359],{"class":264},[220,42175,42176,42178,42180],{"class":222,"line":673},[220,42177,402],{"class":264},[220,42179,347],{"class":346},[220,42181,359],{"class":264},[212,42183,42185],{"className":409,"code":42184,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorRipples\n intensity={10}\n radius={0.5}\n >\n \u003CCircle \u002F>\n \u003C\u002FCursorRipples>\n\u003C\u002FShader>\n",[99,42186,42187,42195,42201,42213,42225,42229,42237,42245],{"__ignoreMap":178},[220,42188,42189,42191,42193],{"class":222,"line":223},[220,42190,343],{"class":264},[220,42192,347],{"class":420},[220,42194,359],{"class":264},[220,42196,42197,42199],{"class":222,"line":179},[220,42198,364],{"class":264},[220,42200,42135],{"class":420},[220,42202,42203,42205,42207,42209,42211],{"class":222,"line":389},[220,42204,20477],{"class":226},[220,42206,353],{"class":260},[220,42208,743],{"class":264},[220,42210,23845],{"class":420},[220,42212,749],{"class":264},[220,42214,42215,42217,42219,42221,42223],{"class":222,"line":399},[220,42216,9640],{"class":226},[220,42218,353],{"class":260},[220,42220,743],{"class":264},[220,42222,7749],{"class":420},[220,42224,749],{"class":264},[220,42226,42227],{"class":222,"line":644},[220,42228,31954],{"class":264},[220,42230,42231,42233,42235],{"class":222,"line":650},[220,42232,2550],{"class":264},[220,42234,2553],{"class":420},[220,42236,386],{"class":264},[220,42238,42239,42241,42243],{"class":222,"line":656},[220,42240,2567],{"class":264},[220,42242,14421],{"class":420},[220,42244,359],{"class":264},[220,42246,42247,42249,42251],{"class":222,"line":673},[220,42248,402],{"class":264},[220,42250,347],{"class":420},[220,42252,359],{"class":264},[212,42254,42255],{"className":2844,"code":42184,"language":2846,"meta":178,"style":178},[99,42256,42257,42265,42271,42281,42291,42295,42303,42311],{"__ignoreMap":178},[220,42258,42259,42261,42263],{"class":222,"line":223},[220,42260,343],{"class":264},[220,42262,347],{"class":420},[220,42264,359],{"class":264},[220,42266,42267,42269],{"class":222,"line":179},[220,42268,364],{"class":264},[220,42270,42135],{"class":420},[220,42272,42273,42275,42277,42279],{"class":222,"line":389},[220,42274,20477],{"class":226},[220,42276,29866],{"class":264},[220,42278,23845],{"class":420},[220,42280,749],{"class":264},[220,42282,42283,42285,42287,42289],{"class":222,"line":399},[220,42284,9640],{"class":226},[220,42286,29866],{"class":264},[220,42288,7749],{"class":420},[220,42290,749],{"class":264},[220,42292,42293],{"class":222,"line":644},[220,42294,31954],{"class":264},[220,42296,42297,42299,42301],{"class":222,"line":650},[220,42298,2550],{"class":264},[220,42300,2553],{"class":420},[220,42302,386],{"class":264},[220,42304,42305,42307,42309],{"class":222,"line":656},[220,42306,2567],{"class":264},[220,42308,14421],{"class":420},[220,42310,359],{"class":264},[220,42312,42313,42315,42317],{"class":222,"line":673},[220,42314,402],{"class":264},[220,42316,347],{"class":420},[220,42318,359],{"class":264},[212,42320,42321],{"className":468,"code":42184,"language":469,"meta":178,"style":178},[99,42322,42323,42331,42337,42349,42361,42365,42373,42381],{"__ignoreMap":178},[220,42324,42325,42327,42329],{"class":222,"line":223},[220,42326,343],{"class":264},[220,42328,347],{"class":420},[220,42330,359],{"class":264},[220,42332,42333,42335],{"class":222,"line":179},[220,42334,364],{"class":264},[220,42336,42135],{"class":420},[220,42338,42339,42341,42343,42345,42347],{"class":222,"line":389},[220,42340,20477],{"class":226},[220,42342,353],{"class":260},[220,42344,743],{"class":264},[220,42346,23845],{"class":420},[220,42348,749],{"class":264},[220,42350,42351,42353,42355,42357,42359],{"class":222,"line":399},[220,42352,9640],{"class":226},[220,42354,353],{"class":260},[220,42356,743],{"class":264},[220,42358,7749],{"class":420},[220,42360,749],{"class":264},[220,42362,42363],{"class":222,"line":644},[220,42364,31954],{"class":264},[220,42366,42367,42369,42371],{"class":222,"line":650},[220,42368,2550],{"class":264},[220,42370,2553],{"class":420},[220,42372,386],{"class":264},[220,42374,42375,42377,42379],{"class":222,"line":656},[220,42376,2567],{"class":264},[220,42378,14421],{"class":420},[220,42380,359],{"class":264},[220,42382,42383,42385,42387],{"class":222,"line":673},[220,42384,402],{"class":264},[220,42386,347],{"class":420},[220,42388,359],{"class":264},[212,42390,42392],{"className":251,"code":42391,"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,42393,42394,42404,42408,42422,42426,42443,42451,42455,42459],{"__ignoreMap":178},[220,42395,42396,42398,42400,42402],{"class":222,"line":223},[220,42397,261],{"class":260},[220,42399,11507],{"class":264},[220,42401,268],{"class":260},[220,42403,4007],{"class":230},[220,42405,42406],{"class":222,"line":179},[220,42407,647],{"emptyLinePlaceholder":194},[220,42409,42410,42412,42414,42416,42418,42420],{"class":222,"line":389},[220,42411,1735],{"class":260},[220,42413,1738],{"class":420},[220,42415,1741],{"class":260},[220,42417,1744],{"class":260},[220,42419,1747],{"class":226},[220,42421,1750],{"class":264},[220,42423,42424],{"class":222,"line":399},[220,42425,1765],{"class":264},[220,42427,42428,42430,42433,42435,42437,42439,42441],{"class":222,"line":644},[220,42429,1770],{"class":264},[220,42431,42432],{"class":230},"'CursorRipples'",[220,42434,32198],{"class":264},[220,42436,23845],{"class":420},[220,42438,6561],{"class":264},[220,42440,7749],{"class":420},[220,42442,7541],{"class":264},[220,42444,42445,42447,42449],{"class":222,"line":650},[220,42446,7009],{"class":264},[220,42448,3206],{"class":230},[220,42450,2465],{"class":264},[220,42452,42453],{"class":222,"line":656},[220,42454,7026],{"class":264},[220,42456,42457],{"class":222,"line":673},[220,42458,1787],{"class":264},[220,42460,42461],{"class":222,"line":682},[220,42462,1792],{"class":264},[1504,42464,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42466},[42467,42468],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcursorripples",{"title":14421,"description":42104},"docs\u002Fcomponents\u002FCursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":42475,"title":394,"body":42476,"category":35554,"componentType":25872,"description":42483,"extension":191,"meta":42723,"navigation":194,"path":42724,"requiresChild":32525,"seo":42725,"stem":42726,"__hash__":42727},"components\u002Fdocs\u002Fcomponents\u002FCursorTrail.md",{"type":8,"value":42477,"toc":42719},[42478,42481,42484,42486,42488,42491,42493,42717],[11,42479,394],{"id":42480},"cursortrail",[15,42482,42483],{},"Animated trail effect that tracks cursor movement",[31906,42485],{"component":394},[23,42487,31910],{"id":26528},[31912,42489],{":props":42490},"[{\"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,42492,31918],{"id":31917},[246,42494,42495,42535,42578,42618,42660],{":tabs":1557},[212,42496,42498],{"className":334,"code":42497,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,42499,42500,42508,42515,42523,42527],{"__ignoreMap":178},[220,42501,42502,42504,42506],{"class":222,"line":223},[220,42503,343],{"class":264},[220,42505,347],{"class":346},[220,42507,359],{"class":264},[220,42509,42510,42512],{"class":222,"line":179},[220,42511,364],{"class":264},[220,42513,42514],{"class":346},"CursorTrail\n",[220,42516,42517,42519,42521],{"class":222,"line":389},[220,42518,17400],{"class":226},[220,42520,353],{"class":264},[220,42522,42153],{"class":230},[220,42524,42525],{"class":222,"line":399},[220,42526,1234],{"class":264},[220,42528,42529,42531,42533],{"class":222,"line":644},[220,42530,402],{"class":264},[220,42532,347],{"class":346},[220,42534,359],{"class":264},[212,42536,42538],{"className":409,"code":42537,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,42539,42540,42548,42554,42566,42570],{"__ignoreMap":178},[220,42541,42542,42544,42546],{"class":222,"line":223},[220,42543,343],{"class":264},[220,42545,347],{"class":420},[220,42547,359],{"class":264},[220,42549,42550,42552],{"class":222,"line":179},[220,42551,364],{"class":264},[220,42553,42514],{"class":420},[220,42555,42556,42558,42560,42562,42564],{"class":222,"line":389},[220,42557,9640],{"class":226},[220,42559,353],{"class":260},[220,42561,743],{"class":264},[220,42563,7749],{"class":420},[220,42565,749],{"class":264},[220,42567,42568],{"class":222,"line":399},[220,42569,1234],{"class":264},[220,42571,42572,42574,42576],{"class":222,"line":644},[220,42573,402],{"class":264},[220,42575,347],{"class":420},[220,42577,359],{"class":264},[212,42579,42580],{"className":2844,"code":42537,"language":2846,"meta":178,"style":178},[99,42581,42582,42590,42596,42606,42610],{"__ignoreMap":178},[220,42583,42584,42586,42588],{"class":222,"line":223},[220,42585,343],{"class":264},[220,42587,347],{"class":420},[220,42589,359],{"class":264},[220,42591,42592,42594],{"class":222,"line":179},[220,42593,364],{"class":264},[220,42595,42514],{"class":420},[220,42597,42598,42600,42602,42604],{"class":222,"line":389},[220,42599,9640],{"class":226},[220,42601,29866],{"class":264},[220,42603,7749],{"class":420},[220,42605,749],{"class":264},[220,42607,42608],{"class":222,"line":399},[220,42609,1234],{"class":264},[220,42611,42612,42614,42616],{"class":222,"line":644},[220,42613,402],{"class":264},[220,42615,347],{"class":420},[220,42617,359],{"class":264},[212,42619,42620],{"className":468,"code":42537,"language":469,"meta":178,"style":178},[99,42621,42622,42630,42636,42648,42652],{"__ignoreMap":178},[220,42623,42624,42626,42628],{"class":222,"line":223},[220,42625,343],{"class":264},[220,42627,347],{"class":420},[220,42629,359],{"class":264},[220,42631,42632,42634],{"class":222,"line":179},[220,42633,364],{"class":264},[220,42635,42514],{"class":420},[220,42637,42638,42640,42642,42644,42646],{"class":222,"line":389},[220,42639,9640],{"class":226},[220,42641,353],{"class":260},[220,42643,743],{"class":264},[220,42645,7749],{"class":420},[220,42647,749],{"class":264},[220,42649,42650],{"class":222,"line":399},[220,42651,1234],{"class":264},[220,42653,42654,42656,42658],{"class":222,"line":644},[220,42655,402],{"class":264},[220,42657,347],{"class":420},[220,42659,359],{"class":264},[212,42661,42663],{"className":251,"code":42662,"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,42664,42665,42675,42679,42693,42697,42709,42713],{"__ignoreMap":178},[220,42666,42667,42669,42671,42673],{"class":222,"line":223},[220,42668,261],{"class":260},[220,42670,11507],{"class":264},[220,42672,268],{"class":260},[220,42674,4007],{"class":230},[220,42676,42677],{"class":222,"line":179},[220,42678,647],{"emptyLinePlaceholder":194},[220,42680,42681,42683,42685,42687,42689,42691],{"class":222,"line":389},[220,42682,1735],{"class":260},[220,42684,1738],{"class":420},[220,42686,1741],{"class":260},[220,42688,1744],{"class":260},[220,42690,1747],{"class":226},[220,42692,1750],{"class":264},[220,42694,42695],{"class":222,"line":399},[220,42696,1765],{"class":264},[220,42698,42699,42701,42703,42705,42707],{"class":222,"line":644},[220,42700,1770],{"class":264},[220,42702,26360],{"class":230},[220,42704,7536],{"class":264},[220,42706,7749],{"class":420},[220,42708,1782],{"class":264},[220,42710,42711],{"class":222,"line":650},[220,42712,1787],{"class":264},[220,42714,42715],{"class":222,"line":656},[220,42716,1792],{"class":264},[1504,42718,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":42720},[42721,42722],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fcursortrail",{"title":394,"description":42483},"docs\u002Fcomponents\u002FCursorTrail","URuo8BOFrBB8qZloC62QqMmj4CFqamo2bIuQ4JBiMlE",{"id":42729,"title":42730,"body":42731,"category":32801,"componentType":25878,"description":42738,"extension":191,"meta":43056,"navigation":194,"path":43057,"requiresChild":194,"seo":43058,"stem":43059,"__hash__":43060},"components\u002Fdocs\u002Fcomponents\u002FDataMosh.md","DataMosh",{"type":8,"value":42732,"toc":43052},[42733,42736,42739,42741,42743,42746,42748,43050],[11,42734,42730],{"id":42735},"datamosh",[15,42737,42738],{},"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",[31906,42740],{"component":42730},[23,42742,31910],{"id":26528},[31912,42744],{":props":42745},"[{\"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,42747,31918],{"id":31917},[246,42749,42750,42807,42866,42922,42980],{":tabs":1557},[212,42751,42753],{"className":334,"code":42752,"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,42754,42755,42763,42770,42779,42783,42791,42799],{"__ignoreMap":178},[220,42756,42757,42759,42761],{"class":222,"line":223},[220,42758,343],{"class":264},[220,42760,347],{"class":346},[220,42762,359],{"class":264},[220,42764,42765,42767],{"class":222,"line":179},[220,42766,364],{"class":264},[220,42768,42769],{"class":346},"DataMosh\n",[220,42771,42772,42774,42776],{"class":222,"line":389},[220,42773,20366],{"class":226},[220,42775,353],{"class":264},[220,42777,42778],{"class":230},"\"0.7\"\n",[220,42780,42781],{"class":222,"line":399},[220,42782,31954],{"class":264},[220,42784,42785,42787,42789],{"class":222,"line":644},[220,42786,2550],{"class":264},[220,42788,2553],{"class":346},[220,42790,386],{"class":264},[220,42792,42793,42795,42797],{"class":222,"line":650},[220,42794,2567],{"class":264},[220,42796,42730],{"class":346},[220,42798,359],{"class":264},[220,42800,42801,42803,42805],{"class":222,"line":656},[220,42802,402],{"class":264},[220,42804,347],{"class":346},[220,42806,359],{"class":264},[212,42808,42810],{"className":409,"code":42809,"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,42811,42812,42820,42826,42838,42842,42850,42858],{"__ignoreMap":178},[220,42813,42814,42816,42818],{"class":222,"line":223},[220,42815,343],{"class":264},[220,42817,347],{"class":420},[220,42819,359],{"class":264},[220,42821,42822,42824],{"class":222,"line":179},[220,42823,364],{"class":264},[220,42825,42769],{"class":420},[220,42827,42828,42830,42832,42834,42836],{"class":222,"line":389},[220,42829,20477],{"class":226},[220,42831,353],{"class":260},[220,42833,743],{"class":264},[220,42835,18939],{"class":420},[220,42837,749],{"class":264},[220,42839,42840],{"class":222,"line":399},[220,42841,31954],{"class":264},[220,42843,42844,42846,42848],{"class":222,"line":644},[220,42845,2550],{"class":264},[220,42847,2553],{"class":420},[220,42849,386],{"class":264},[220,42851,42852,42854,42856],{"class":222,"line":650},[220,42853,2567],{"class":264},[220,42855,42730],{"class":420},[220,42857,359],{"class":264},[220,42859,42860,42862,42864],{"class":222,"line":656},[220,42861,402],{"class":264},[220,42863,347],{"class":420},[220,42865,359],{"class":264},[212,42867,42868],{"className":2844,"code":42809,"language":2846,"meta":178,"style":178},[99,42869,42870,42878,42884,42894,42898,42906,42914],{"__ignoreMap":178},[220,42871,42872,42874,42876],{"class":222,"line":223},[220,42873,343],{"class":264},[220,42875,347],{"class":420},[220,42877,359],{"class":264},[220,42879,42880,42882],{"class":222,"line":179},[220,42881,364],{"class":264},[220,42883,42769],{"class":420},[220,42885,42886,42888,42890,42892],{"class":222,"line":389},[220,42887,20477],{"class":226},[220,42889,29866],{"class":264},[220,42891,18939],{"class":420},[220,42893,749],{"class":264},[220,42895,42896],{"class":222,"line":399},[220,42897,31954],{"class":264},[220,42899,42900,42902,42904],{"class":222,"line":644},[220,42901,2550],{"class":264},[220,42903,2553],{"class":420},[220,42905,386],{"class":264},[220,42907,42908,42910,42912],{"class":222,"line":650},[220,42909,2567],{"class":264},[220,42911,42730],{"class":420},[220,42913,359],{"class":264},[220,42915,42916,42918,42920],{"class":222,"line":656},[220,42917,402],{"class":264},[220,42919,347],{"class":420},[220,42921,359],{"class":264},[212,42923,42924],{"className":468,"code":42809,"language":469,"meta":178,"style":178},[99,42925,42926,42934,42940,42952,42956,42964,42972],{"__ignoreMap":178},[220,42927,42928,42930,42932],{"class":222,"line":223},[220,42929,343],{"class":264},[220,42931,347],{"class":420},[220,42933,359],{"class":264},[220,42935,42936,42938],{"class":222,"line":179},[220,42937,364],{"class":264},[220,42939,42769],{"class":420},[220,42941,42942,42944,42946,42948,42950],{"class":222,"line":389},[220,42943,20477],{"class":226},[220,42945,353],{"class":260},[220,42947,743],{"class":264},[220,42949,18939],{"class":420},[220,42951,749],{"class":264},[220,42953,42954],{"class":222,"line":399},[220,42955,31954],{"class":264},[220,42957,42958,42960,42962],{"class":222,"line":644},[220,42959,2550],{"class":264},[220,42961,2553],{"class":420},[220,42963,386],{"class":264},[220,42965,42966,42968,42970],{"class":222,"line":650},[220,42967,2567],{"class":264},[220,42969,42730],{"class":420},[220,42971,359],{"class":264},[220,42973,42974,42976,42978],{"class":222,"line":656},[220,42975,402],{"class":264},[220,42977,347],{"class":420},[220,42979,359],{"class":264},[212,42981,42983],{"className":251,"code":42982,"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,42984,42985,42995,42999,43013,43017,43030,43038,43042,43046],{"__ignoreMap":178},[220,42986,42987,42989,42991,42993],{"class":222,"line":223},[220,42988,261],{"class":260},[220,42990,11507],{"class":264},[220,42992,268],{"class":260},[220,42994,4007],{"class":230},[220,42996,42997],{"class":222,"line":179},[220,42998,647],{"emptyLinePlaceholder":194},[220,43000,43001,43003,43005,43007,43009,43011],{"class":222,"line":389},[220,43002,1735],{"class":260},[220,43004,1738],{"class":420},[220,43006,1741],{"class":260},[220,43008,1744],{"class":260},[220,43010,1747],{"class":226},[220,43012,1750],{"class":264},[220,43014,43015],{"class":222,"line":399},[220,43016,1765],{"class":264},[220,43018,43019,43021,43024,43026,43028],{"class":222,"line":644},[220,43020,1770],{"class":264},[220,43022,43023],{"class":230},"'DataMosh'",[220,43025,32198],{"class":264},[220,43027,18939],{"class":420},[220,43029,7541],{"class":264},[220,43031,43032,43034,43036],{"class":222,"line":650},[220,43033,7009],{"class":264},[220,43035,3206],{"class":230},[220,43037,2465],{"class":264},[220,43039,43040],{"class":222,"line":656},[220,43041,7026],{"class":264},[220,43043,43044],{"class":222,"line":673},[220,43045,1787],{"class":264},[220,43047,43048],{"class":222,"line":682},[220,43049,1792],{"class":264},[1504,43051,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43053},[43054,43055],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdatamosh",{"title":42730,"description":42738},"docs\u002Fcomponents\u002FDataMosh","QI0DyQOaJe28FtuKr4o8BUcIzDGUh2TnOPM9nXyRDdQ",{"id":43062,"title":43063,"body":43064,"category":33058,"componentType":25872,"description":43071,"extension":191,"meta":43256,"navigation":194,"path":43257,"requiresChild":32525,"seo":43258,"stem":43259,"__hash__":43260},"components\u002Fdocs\u002Fcomponents\u002FDiamondGradient.md","DiamondGradient",{"type":8,"value":43065,"toc":43252},[43066,43069,43072,43074,43076,43079,43081,43250],[11,43067,43063],{"id":43068},"diamondgradient",[15,43070,43071],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[31906,43073],{"component":43063},[23,43075,31910],{"id":26528},[31912,43077],{":props":43078},"[{\"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,43080,31918],{"id":31917},[246,43082,43083,43112,43140,43168,43196],{":tabs":1557},[212,43084,43086],{"className":334,"code":43085,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondGradient \u002F>\n\u003C\u002FShader>\n",[99,43087,43088,43096,43104],{"__ignoreMap":178},[220,43089,43090,43092,43094],{"class":222,"line":223},[220,43091,343],{"class":264},[220,43093,347],{"class":346},[220,43095,359],{"class":264},[220,43097,43098,43100,43102],{"class":222,"line":179},[220,43099,364],{"class":264},[220,43101,43063],{"class":346},[220,43103,386],{"class":264},[220,43105,43106,43108,43110],{"class":222,"line":389},[220,43107,402],{"class":264},[220,43109,347],{"class":346},[220,43111,359],{"class":264},[212,43113,43114],{"className":409,"code":43085,"language":411,"meta":178,"style":178},[99,43115,43116,43124,43132],{"__ignoreMap":178},[220,43117,43118,43120,43122],{"class":222,"line":223},[220,43119,343],{"class":264},[220,43121,347],{"class":420},[220,43123,359],{"class":264},[220,43125,43126,43128,43130],{"class":222,"line":179},[220,43127,364],{"class":264},[220,43129,43063],{"class":420},[220,43131,386],{"class":264},[220,43133,43134,43136,43138],{"class":222,"line":389},[220,43135,402],{"class":264},[220,43137,347],{"class":420},[220,43139,359],{"class":264},[212,43141,43142],{"className":2844,"code":43085,"language":2846,"meta":178,"style":178},[99,43143,43144,43152,43160],{"__ignoreMap":178},[220,43145,43146,43148,43150],{"class":222,"line":223},[220,43147,343],{"class":264},[220,43149,347],{"class":420},[220,43151,359],{"class":264},[220,43153,43154,43156,43158],{"class":222,"line":179},[220,43155,364],{"class":264},[220,43157,43063],{"class":420},[220,43159,386],{"class":264},[220,43161,43162,43164,43166],{"class":222,"line":389},[220,43163,402],{"class":264},[220,43165,347],{"class":420},[220,43167,359],{"class":264},[212,43169,43170],{"className":468,"code":43085,"language":469,"meta":178,"style":178},[99,43171,43172,43180,43188],{"__ignoreMap":178},[220,43173,43174,43176,43178],{"class":222,"line":223},[220,43175,343],{"class":264},[220,43177,347],{"class":420},[220,43179,359],{"class":264},[220,43181,43182,43184,43186],{"class":222,"line":179},[220,43183,364],{"class":264},[220,43185,43063],{"class":420},[220,43187,386],{"class":264},[220,43189,43190,43192,43194],{"class":222,"line":389},[220,43191,402],{"class":264},[220,43193,347],{"class":420},[220,43195,359],{"class":264},[212,43197,43199],{"className":251,"code":43198,"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,43200,43201,43211,43215,43229,43233,43242,43246],{"__ignoreMap":178},[220,43202,43203,43205,43207,43209],{"class":222,"line":223},[220,43204,261],{"class":260},[220,43206,11507],{"class":264},[220,43208,268],{"class":260},[220,43210,4007],{"class":230},[220,43212,43213],{"class":222,"line":179},[220,43214,647],{"emptyLinePlaceholder":194},[220,43216,43217,43219,43221,43223,43225,43227],{"class":222,"line":389},[220,43218,1735],{"class":260},[220,43220,1738],{"class":420},[220,43222,1741],{"class":260},[220,43224,1744],{"class":260},[220,43226,1747],{"class":226},[220,43228,1750],{"class":264},[220,43230,43231],{"class":222,"line":399},[220,43232,1765],{"class":264},[220,43234,43235,43237,43240],{"class":222,"line":644},[220,43236,1770],{"class":264},[220,43238,43239],{"class":230},"'DiamondGradient'",[220,43241,2465],{"class":264},[220,43243,43244],{"class":222,"line":650},[220,43245,1787],{"class":264},[220,43247,43248],{"class":222,"line":656},[220,43249,1792],{"class":264},[1504,43251,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":43253},[43254,43255],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondgradient",{"title":43063,"description":43071},"docs\u002Fcomponents\u002FDiamondGradient","iBpHYSuR69Ctgw5IfzFE8DG74p6k99_SAfH43mIrz1g",{"id":43262,"title":43263,"body":43264,"category":33668,"componentType":25878,"description":43271,"extension":191,"meta":43532,"navigation":194,"path":43533,"requiresChild":194,"seo":43534,"stem":43535,"__hash__":43536},"components\u002Fdocs\u002Fcomponents\u002FDiamondWipe.md","DiamondWipe",{"type":8,"value":43265,"toc":43528},[43266,43269,43272,43274,43276,43279,43281,43526],[11,43267,43263],{"id":43268},"diamondwipe",[15,43270,43271],{},"Wipe the content away through a lattice of growing diamonds",[31906,43273],{"component":43263},[23,43275,31910],{"id":26528},[31912,43277],{":props":43278},"[{\"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,43280,31918],{"id":31917},[246,43282,43283,43328,43372,43416,43460],{":tabs":1557},[212,43284,43286],{"className":334,"code":43285,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiamondWipe>\n \u003CCircle \u002F>\n \u003C\u002FDiamondWipe>\n\u003C\u002FShader>\n",[99,43287,43288,43296,43304,43312,43320],{"__ignoreMap":178},[220,43289,43290,43292,43294],{"class":222,"line":223},[220,43291,343],{"class":264},[220,43293,347],{"class":346},[220,43295,359],{"class":264},[220,43297,43298,43300,43302],{"class":222,"line":179},[220,43299,364],{"class":264},[220,43301,43263],{"class":346},[220,43303,359],{"class":264},[220,43305,43306,43308,43310],{"class":222,"line":389},[220,43307,2550],{"class":264},[220,43309,2553],{"class":346},[220,43311,386],{"class":264},[220,43313,43314,43316,43318],{"class":222,"line":399},[220,43315,2567],{"class":264},[220,43317,43263],{"class":346},[220,43319,359],{"class":264},[220,43321,43322,43324,43326],{"class":222,"line":644},[220,43323,402],{"class":264},[220,43325,347],{"class":346},[220,43327,359],{"class":264},[212,43329,43330],{"className":409,"code":43285,"language":411,"meta":178,"style":178},[99,43331,43332,43340,43348,43356,43364],{"__ignoreMap":178},[220,43333,43334,43336,43338],{"class":222,"line":223},[220,43335,343],{"class":264},[220,43337,347],{"class":420},[220,43339,359],{"class":264},[220,43341,43342,43344,43346],{"class":222,"line":179},[220,43343,364],{"class":264},[220,43345,43263],{"class":420},[220,43347,359],{"class":264},[220,43349,43350,43352,43354],{"class":222,"line":389},[220,43351,2550],{"class":264},[220,43353,2553],{"class":420},[220,43355,386],{"class":264},[220,43357,43358,43360,43362],{"class":222,"line":399},[220,43359,2567],{"class":264},[220,43361,43263],{"class":420},[220,43363,359],{"class":264},[220,43365,43366,43368,43370],{"class":222,"line":644},[220,43367,402],{"class":264},[220,43369,347],{"class":420},[220,43371,359],{"class":264},[212,43373,43374],{"className":2844,"code":43285,"language":2846,"meta":178,"style":178},[99,43375,43376,43384,43392,43400,43408],{"__ignoreMap":178},[220,43377,43378,43380,43382],{"class":222,"line":223},[220,43379,343],{"class":264},[220,43381,347],{"class":420},[220,43383,359],{"class":264},[220,43385,43386,43388,43390],{"class":222,"line":179},[220,43387,364],{"class":264},[220,43389,43263],{"class":420},[220,43391,359],{"class":264},[220,43393,43394,43396,43398],{"class":222,"line":389},[220,43395,2550],{"class":264},[220,43397,2553],{"class":420},[220,43399,386],{"class":264},[220,43401,43402,43404,43406],{"class":222,"line":399},[220,43403,2567],{"class":264},[220,43405,43263],{"class":420},[220,43407,359],{"class":264},[220,43409,43410,43412,43414],{"class":222,"line":644},[220,43411,402],{"class":264},[220,43413,347],{"class":420},[220,43415,359],{"class":264},[212,43417,43418],{"className":468,"code":43285,"language":469,"meta":178,"style":178},[99,43419,43420,43428,43436,43444,43452],{"__ignoreMap":178},[220,43421,43422,43424,43426],{"class":222,"line":223},[220,43423,343],{"class":264},[220,43425,347],{"class":420},[220,43427,359],{"class":264},[220,43429,43430,43432,43434],{"class":222,"line":179},[220,43431,364],{"class":264},[220,43433,43263],{"class":420},[220,43435,359],{"class":264},[220,43437,43438,43440,43442],{"class":222,"line":389},[220,43439,2550],{"class":264},[220,43441,2553],{"class":420},[220,43443,386],{"class":264},[220,43445,43446,43448,43450],{"class":222,"line":399},[220,43447,2567],{"class":264},[220,43449,43263],{"class":420},[220,43451,359],{"class":264},[220,43453,43454,43456,43458],{"class":222,"line":644},[220,43455,402],{"class":264},[220,43457,347],{"class":420},[220,43459,359],{"class":264},[212,43461,43463],{"className":251,"code":43462,"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,43464,43465,43475,43479,43493,43497,43506,43514,43518,43522],{"__ignoreMap":178},[220,43466,43467,43469,43471,43473],{"class":222,"line":223},[220,43468,261],{"class":260},[220,43470,11507],{"class":264},[220,43472,268],{"class":260},[220,43474,4007],{"class":230},[220,43476,43477],{"class":222,"line":179},[220,43478,647],{"emptyLinePlaceholder":194},[220,43480,43481,43483,43485,43487,43489,43491],{"class":222,"line":389},[220,43482,1735],{"class":260},[220,43484,1738],{"class":420},[220,43486,1741],{"class":260},[220,43488,1744],{"class":260},[220,43490,1747],{"class":226},[220,43492,1750],{"class":264},[220,43494,43495],{"class":222,"line":399},[220,43496,1765],{"class":264},[220,43498,43499,43501,43504],{"class":222,"line":644},[220,43500,1770],{"class":264},[220,43502,43503],{"class":230},"'DiamondWipe'",[220,43505,7004],{"class":264},[220,43507,43508,43510,43512],{"class":222,"line":650},[220,43509,7009],{"class":264},[220,43511,3206],{"class":230},[220,43513,2465],{"class":264},[220,43515,43516],{"class":222,"line":656},[220,43517,7026],{"class":264},[220,43519,43520],{"class":222,"line":673},[220,43521,1787],{"class":264},[220,43523,43524],{"class":222,"line":682},[220,43525,1792],{"class":264},[1504,43527,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":43529},[43530,43531],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdiamondwipe",{"title":43263,"description":43271},"docs\u002Fcomponents\u002FDiamondWipe","KVM9D5et0aht_X23sPAUaS_o9p9s4ipXzKcG_Xwj6PA",{"id":43538,"title":43539,"body":43540,"category":32229,"componentType":25878,"description":43547,"extension":191,"meta":43865,"navigation":194,"path":43866,"requiresChild":194,"seo":43867,"stem":43868,"__hash__":43869},"components\u002Fdocs\u002Fcomponents\u002FDiffuseBlur.md","DiffuseBlur",{"type":8,"value":43541,"toc":43861},[43542,43545,43548,43550,43552,43555,43557,43859],[11,43543,43539],{"id":43544},"diffuseblur",[15,43546,43547],{},"Grain-like pixel displacement at random",[31906,43549],{"component":43539},[23,43551,31910],{"id":26528},[31912,43553],{":props":43554},"[{\"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,43556,31918],{"id":31917},[246,43558,43559,43616,43675,43731,43789],{":tabs":1557},[212,43560,43562],{"className":334,"code":43561,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43563,43564,43572,43579,43588,43592,43600,43608],{"__ignoreMap":178},[220,43565,43566,43568,43570],{"class":222,"line":223},[220,43567,343],{"class":264},[220,43569,347],{"class":346},[220,43571,359],{"class":264},[220,43573,43574,43576],{"class":222,"line":179},[220,43575,364],{"class":264},[220,43577,43578],{"class":346},"DiffuseBlur\n",[220,43580,43581,43583,43585],{"class":222,"line":389},[220,43582,20366],{"class":226},[220,43584,353],{"class":264},[220,43586,43587],{"class":230},"\"30\"\n",[220,43589,43590],{"class":222,"line":399},[220,43591,31954],{"class":264},[220,43593,43594,43596,43598],{"class":222,"line":644},[220,43595,2550],{"class":264},[220,43597,2553],{"class":346},[220,43599,386],{"class":264},[220,43601,43602,43604,43606],{"class":222,"line":650},[220,43603,2567],{"class":264},[220,43605,43539],{"class":346},[220,43607,359],{"class":264},[220,43609,43610,43612,43614],{"class":222,"line":656},[220,43611,402],{"class":264},[220,43613,347],{"class":346},[220,43615,359],{"class":264},[212,43617,43619],{"className":409,"code":43618,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FDiffuseBlur>\n\u003C\u002FShader>\n",[99,43620,43621,43629,43635,43647,43651,43659,43667],{"__ignoreMap":178},[220,43622,43623,43625,43627],{"class":222,"line":223},[220,43624,343],{"class":264},[220,43626,347],{"class":420},[220,43628,359],{"class":264},[220,43630,43631,43633],{"class":222,"line":179},[220,43632,364],{"class":264},[220,43634,43578],{"class":420},[220,43636,43637,43639,43641,43643,43645],{"class":222,"line":389},[220,43638,20477],{"class":226},[220,43640,353],{"class":260},[220,43642,743],{"class":264},[220,43644,24005],{"class":420},[220,43646,749],{"class":264},[220,43648,43649],{"class":222,"line":399},[220,43650,31954],{"class":264},[220,43652,43653,43655,43657],{"class":222,"line":644},[220,43654,2550],{"class":264},[220,43656,2553],{"class":420},[220,43658,386],{"class":264},[220,43660,43661,43663,43665],{"class":222,"line":650},[220,43662,2567],{"class":264},[220,43664,43539],{"class":420},[220,43666,359],{"class":264},[220,43668,43669,43671,43673],{"class":222,"line":656},[220,43670,402],{"class":264},[220,43672,347],{"class":420},[220,43674,359],{"class":264},[212,43676,43677],{"className":2844,"code":43618,"language":2846,"meta":178,"style":178},[99,43678,43679,43687,43693,43703,43707,43715,43723],{"__ignoreMap":178},[220,43680,43681,43683,43685],{"class":222,"line":223},[220,43682,343],{"class":264},[220,43684,347],{"class":420},[220,43686,359],{"class":264},[220,43688,43689,43691],{"class":222,"line":179},[220,43690,364],{"class":264},[220,43692,43578],{"class":420},[220,43694,43695,43697,43699,43701],{"class":222,"line":389},[220,43696,20477],{"class":226},[220,43698,29866],{"class":264},[220,43700,24005],{"class":420},[220,43702,749],{"class":264},[220,43704,43705],{"class":222,"line":399},[220,43706,31954],{"class":264},[220,43708,43709,43711,43713],{"class":222,"line":644},[220,43710,2550],{"class":264},[220,43712,2553],{"class":420},[220,43714,386],{"class":264},[220,43716,43717,43719,43721],{"class":222,"line":650},[220,43718,2567],{"class":264},[220,43720,43539],{"class":420},[220,43722,359],{"class":264},[220,43724,43725,43727,43729],{"class":222,"line":656},[220,43726,402],{"class":264},[220,43728,347],{"class":420},[220,43730,359],{"class":264},[212,43732,43733],{"className":468,"code":43618,"language":469,"meta":178,"style":178},[99,43734,43735,43743,43749,43761,43765,43773,43781],{"__ignoreMap":178},[220,43736,43737,43739,43741],{"class":222,"line":223},[220,43738,343],{"class":264},[220,43740,347],{"class":420},[220,43742,359],{"class":264},[220,43744,43745,43747],{"class":222,"line":179},[220,43746,364],{"class":264},[220,43748,43578],{"class":420},[220,43750,43751,43753,43755,43757,43759],{"class":222,"line":389},[220,43752,20477],{"class":226},[220,43754,353],{"class":260},[220,43756,743],{"class":264},[220,43758,24005],{"class":420},[220,43760,749],{"class":264},[220,43762,43763],{"class":222,"line":399},[220,43764,31954],{"class":264},[220,43766,43767,43769,43771],{"class":222,"line":644},[220,43768,2550],{"class":264},[220,43770,2553],{"class":420},[220,43772,386],{"class":264},[220,43774,43775,43777,43779],{"class":222,"line":650},[220,43776,2567],{"class":264},[220,43778,43539],{"class":420},[220,43780,359],{"class":264},[220,43782,43783,43785,43787],{"class":222,"line":656},[220,43784,402],{"class":264},[220,43786,347],{"class":420},[220,43788,359],{"class":264},[212,43790,43792],{"className":251,"code":43791,"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,43793,43794,43804,43808,43822,43826,43839,43847,43851,43855],{"__ignoreMap":178},[220,43795,43796,43798,43800,43802],{"class":222,"line":223},[220,43797,261],{"class":260},[220,43799,11507],{"class":264},[220,43801,268],{"class":260},[220,43803,4007],{"class":230},[220,43805,43806],{"class":222,"line":179},[220,43807,647],{"emptyLinePlaceholder":194},[220,43809,43810,43812,43814,43816,43818,43820],{"class":222,"line":389},[220,43811,1735],{"class":260},[220,43813,1738],{"class":420},[220,43815,1741],{"class":260},[220,43817,1744],{"class":260},[220,43819,1747],{"class":226},[220,43821,1750],{"class":264},[220,43823,43824],{"class":222,"line":399},[220,43825,1765],{"class":264},[220,43827,43828,43830,43833,43835,43837],{"class":222,"line":644},[220,43829,1770],{"class":264},[220,43831,43832],{"class":230},"'DiffuseBlur'",[220,43834,32198],{"class":264},[220,43836,24005],{"class":420},[220,43838,7541],{"class":264},[220,43840,43841,43843,43845],{"class":222,"line":650},[220,43842,7009],{"class":264},[220,43844,3206],{"class":230},[220,43846,2465],{"class":264},[220,43848,43849],{"class":222,"line":656},[220,43850,7026],{"class":264},[220,43852,43853],{"class":222,"line":673},[220,43854,1787],{"class":264},[220,43856,43857],{"class":222,"line":682},[220,43858,1792],{"class":264},[1504,43860,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":43862},[43863,43864],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdiffuseblur",{"title":43539,"description":43547},"docs\u002Fcomponents\u002FDiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":43871,"title":43872,"body":43873,"category":33391,"componentType":25878,"description":43880,"extension":191,"meta":44141,"navigation":194,"path":44142,"requiresChild":194,"seo":44143,"stem":44144,"__hash__":44145},"components\u002Fdocs\u002Fcomponents\u002FDisplacementMap.md","DisplacementMap",{"type":8,"value":43874,"toc":44137},[43875,43878,43881,43883,43885,43888,43890,44135],[11,43876,43872],{"id":43877},"displacementmap",[15,43879,43880],{},"Distorts child content using another layer's pixels as a displacement map",[31906,43882],{"component":43872},[23,43884,31910],{"id":26528},[31912,43886],{":props":43887},"[{\"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,43889,31918],{"id":31917},[246,43891,43892,43937,43981,44025,44069],{":tabs":1557},[212,43893,43895],{"className":334,"code":43894,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDisplacementMap>\n \u003CCircle \u002F>\n \u003C\u002FDisplacementMap>\n\u003C\u002FShader>\n",[99,43896,43897,43905,43913,43921,43929],{"__ignoreMap":178},[220,43898,43899,43901,43903],{"class":222,"line":223},[220,43900,343],{"class":264},[220,43902,347],{"class":346},[220,43904,359],{"class":264},[220,43906,43907,43909,43911],{"class":222,"line":179},[220,43908,364],{"class":264},[220,43910,43872],{"class":346},[220,43912,359],{"class":264},[220,43914,43915,43917,43919],{"class":222,"line":389},[220,43916,2550],{"class":264},[220,43918,2553],{"class":346},[220,43920,386],{"class":264},[220,43922,43923,43925,43927],{"class":222,"line":399},[220,43924,2567],{"class":264},[220,43926,43872],{"class":346},[220,43928,359],{"class":264},[220,43930,43931,43933,43935],{"class":222,"line":644},[220,43932,402],{"class":264},[220,43934,347],{"class":346},[220,43936,359],{"class":264},[212,43938,43939],{"className":409,"code":43894,"language":411,"meta":178,"style":178},[99,43940,43941,43949,43957,43965,43973],{"__ignoreMap":178},[220,43942,43943,43945,43947],{"class":222,"line":223},[220,43944,343],{"class":264},[220,43946,347],{"class":420},[220,43948,359],{"class":264},[220,43950,43951,43953,43955],{"class":222,"line":179},[220,43952,364],{"class":264},[220,43954,43872],{"class":420},[220,43956,359],{"class":264},[220,43958,43959,43961,43963],{"class":222,"line":389},[220,43960,2550],{"class":264},[220,43962,2553],{"class":420},[220,43964,386],{"class":264},[220,43966,43967,43969,43971],{"class":222,"line":399},[220,43968,2567],{"class":264},[220,43970,43872],{"class":420},[220,43972,359],{"class":264},[220,43974,43975,43977,43979],{"class":222,"line":644},[220,43976,402],{"class":264},[220,43978,347],{"class":420},[220,43980,359],{"class":264},[212,43982,43983],{"className":2844,"code":43894,"language":2846,"meta":178,"style":178},[99,43984,43985,43993,44001,44009,44017],{"__ignoreMap":178},[220,43986,43987,43989,43991],{"class":222,"line":223},[220,43988,343],{"class":264},[220,43990,347],{"class":420},[220,43992,359],{"class":264},[220,43994,43995,43997,43999],{"class":222,"line":179},[220,43996,364],{"class":264},[220,43998,43872],{"class":420},[220,44000,359],{"class":264},[220,44002,44003,44005,44007],{"class":222,"line":389},[220,44004,2550],{"class":264},[220,44006,2553],{"class":420},[220,44008,386],{"class":264},[220,44010,44011,44013,44015],{"class":222,"line":399},[220,44012,2567],{"class":264},[220,44014,43872],{"class":420},[220,44016,359],{"class":264},[220,44018,44019,44021,44023],{"class":222,"line":644},[220,44020,402],{"class":264},[220,44022,347],{"class":420},[220,44024,359],{"class":264},[212,44026,44027],{"className":468,"code":43894,"language":469,"meta":178,"style":178},[99,44028,44029,44037,44045,44053,44061],{"__ignoreMap":178},[220,44030,44031,44033,44035],{"class":222,"line":223},[220,44032,343],{"class":264},[220,44034,347],{"class":420},[220,44036,359],{"class":264},[220,44038,44039,44041,44043],{"class":222,"line":179},[220,44040,364],{"class":264},[220,44042,43872],{"class":420},[220,44044,359],{"class":264},[220,44046,44047,44049,44051],{"class":222,"line":389},[220,44048,2550],{"class":264},[220,44050,2553],{"class":420},[220,44052,386],{"class":264},[220,44054,44055,44057,44059],{"class":222,"line":399},[220,44056,2567],{"class":264},[220,44058,43872],{"class":420},[220,44060,359],{"class":264},[220,44062,44063,44065,44067],{"class":222,"line":644},[220,44064,402],{"class":264},[220,44066,347],{"class":420},[220,44068,359],{"class":264},[212,44070,44072],{"className":251,"code":44071,"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,44073,44074,44084,44088,44102,44106,44115,44123,44127,44131],{"__ignoreMap":178},[220,44075,44076,44078,44080,44082],{"class":222,"line":223},[220,44077,261],{"class":260},[220,44079,11507],{"class":264},[220,44081,268],{"class":260},[220,44083,4007],{"class":230},[220,44085,44086],{"class":222,"line":179},[220,44087,647],{"emptyLinePlaceholder":194},[220,44089,44090,44092,44094,44096,44098,44100],{"class":222,"line":389},[220,44091,1735],{"class":260},[220,44093,1738],{"class":420},[220,44095,1741],{"class":260},[220,44097,1744],{"class":260},[220,44099,1747],{"class":226},[220,44101,1750],{"class":264},[220,44103,44104],{"class":222,"line":399},[220,44105,1765],{"class":264},[220,44107,44108,44110,44113],{"class":222,"line":644},[220,44109,1770],{"class":264},[220,44111,44112],{"class":230},"'DisplacementMap'",[220,44114,7004],{"class":264},[220,44116,44117,44119,44121],{"class":222,"line":650},[220,44118,7009],{"class":264},[220,44120,3206],{"class":230},[220,44122,2465],{"class":264},[220,44124,44125],{"class":222,"line":656},[220,44126,7026],{"class":264},[220,44128,44129],{"class":222,"line":673},[220,44130,1787],{"class":264},[220,44132,44133],{"class":222,"line":682},[220,44134,1792],{"class":264},[1504,44136,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":44138},[44139,44140],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdisplacementmap",{"title":43872,"description":43880},"docs\u002Fcomponents\u002FDisplacementMap","HycyWL6qHg4DTwqZElHNgjHrKGK_TxnCG4rLePq5EZc",{"id":44147,"title":44148,"body":44149,"category":32801,"componentType":25878,"description":44156,"extension":191,"meta":44417,"navigation":194,"path":44418,"requiresChild":194,"seo":44419,"stem":44420,"__hash__":44421},"components\u002Fdocs\u002Fcomponents\u002FDither.md","Dither",{"type":8,"value":44150,"toc":44413},[44151,44154,44157,44159,44161,44164,44166,44411],[11,44152,44148],{"id":44153},"dither",[15,44155,44156],{},"Dithering effect with multiple pattern options",[31906,44158],{"component":44148},[23,44160,31910],{"id":26528},[31912,44162],{":props":44163},"[{\"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,44165,31918],{"id":31917},[246,44167,44168,44213,44257,44301,44345],{":tabs":1557},[212,44169,44171],{"className":334,"code":44170,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDither>\n \u003CCircle \u002F>\n \u003C\u002FDither>\n\u003C\u002FShader>\n",[99,44172,44173,44181,44189,44197,44205],{"__ignoreMap":178},[220,44174,44175,44177,44179],{"class":222,"line":223},[220,44176,343],{"class":264},[220,44178,347],{"class":346},[220,44180,359],{"class":264},[220,44182,44183,44185,44187],{"class":222,"line":179},[220,44184,364],{"class":264},[220,44186,44148],{"class":346},[220,44188,359],{"class":264},[220,44190,44191,44193,44195],{"class":222,"line":389},[220,44192,2550],{"class":264},[220,44194,2553],{"class":346},[220,44196,386],{"class":264},[220,44198,44199,44201,44203],{"class":222,"line":399},[220,44200,2567],{"class":264},[220,44202,44148],{"class":346},[220,44204,359],{"class":264},[220,44206,44207,44209,44211],{"class":222,"line":644},[220,44208,402],{"class":264},[220,44210,347],{"class":346},[220,44212,359],{"class":264},[212,44214,44215],{"className":409,"code":44170,"language":411,"meta":178,"style":178},[99,44216,44217,44225,44233,44241,44249],{"__ignoreMap":178},[220,44218,44219,44221,44223],{"class":222,"line":223},[220,44220,343],{"class":264},[220,44222,347],{"class":420},[220,44224,359],{"class":264},[220,44226,44227,44229,44231],{"class":222,"line":179},[220,44228,364],{"class":264},[220,44230,44148],{"class":420},[220,44232,359],{"class":264},[220,44234,44235,44237,44239],{"class":222,"line":389},[220,44236,2550],{"class":264},[220,44238,2553],{"class":420},[220,44240,386],{"class":264},[220,44242,44243,44245,44247],{"class":222,"line":399},[220,44244,2567],{"class":264},[220,44246,44148],{"class":420},[220,44248,359],{"class":264},[220,44250,44251,44253,44255],{"class":222,"line":644},[220,44252,402],{"class":264},[220,44254,347],{"class":420},[220,44256,359],{"class":264},[212,44258,44259],{"className":2844,"code":44170,"language":2846,"meta":178,"style":178},[99,44260,44261,44269,44277,44285,44293],{"__ignoreMap":178},[220,44262,44263,44265,44267],{"class":222,"line":223},[220,44264,343],{"class":264},[220,44266,347],{"class":420},[220,44268,359],{"class":264},[220,44270,44271,44273,44275],{"class":222,"line":179},[220,44272,364],{"class":264},[220,44274,44148],{"class":420},[220,44276,359],{"class":264},[220,44278,44279,44281,44283],{"class":222,"line":389},[220,44280,2550],{"class":264},[220,44282,2553],{"class":420},[220,44284,386],{"class":264},[220,44286,44287,44289,44291],{"class":222,"line":399},[220,44288,2567],{"class":264},[220,44290,44148],{"class":420},[220,44292,359],{"class":264},[220,44294,44295,44297,44299],{"class":222,"line":644},[220,44296,402],{"class":264},[220,44298,347],{"class":420},[220,44300,359],{"class":264},[212,44302,44303],{"className":468,"code":44170,"language":469,"meta":178,"style":178},[99,44304,44305,44313,44321,44329,44337],{"__ignoreMap":178},[220,44306,44307,44309,44311],{"class":222,"line":223},[220,44308,343],{"class":264},[220,44310,347],{"class":420},[220,44312,359],{"class":264},[220,44314,44315,44317,44319],{"class":222,"line":179},[220,44316,364],{"class":264},[220,44318,44148],{"class":420},[220,44320,359],{"class":264},[220,44322,44323,44325,44327],{"class":222,"line":389},[220,44324,2550],{"class":264},[220,44326,2553],{"class":420},[220,44328,386],{"class":264},[220,44330,44331,44333,44335],{"class":222,"line":399},[220,44332,2567],{"class":264},[220,44334,44148],{"class":420},[220,44336,359],{"class":264},[220,44338,44339,44341,44343],{"class":222,"line":644},[220,44340,402],{"class":264},[220,44342,347],{"class":420},[220,44344,359],{"class":264},[212,44346,44348],{"className":251,"code":44347,"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,44349,44350,44360,44364,44378,44382,44391,44399,44403,44407],{"__ignoreMap":178},[220,44351,44352,44354,44356,44358],{"class":222,"line":223},[220,44353,261],{"class":260},[220,44355,11507],{"class":264},[220,44357,268],{"class":260},[220,44359,4007],{"class":230},[220,44361,44362],{"class":222,"line":179},[220,44363,647],{"emptyLinePlaceholder":194},[220,44365,44366,44368,44370,44372,44374,44376],{"class":222,"line":389},[220,44367,1735],{"class":260},[220,44369,1738],{"class":420},[220,44371,1741],{"class":260},[220,44373,1744],{"class":260},[220,44375,1747],{"class":226},[220,44377,1750],{"class":264},[220,44379,44380],{"class":222,"line":399},[220,44381,1765],{"class":264},[220,44383,44384,44386,44389],{"class":222,"line":644},[220,44385,1770],{"class":264},[220,44387,44388],{"class":230},"'Dither'",[220,44390,7004],{"class":264},[220,44392,44393,44395,44397],{"class":222,"line":650},[220,44394,7009],{"class":264},[220,44396,3206],{"class":230},[220,44398,2465],{"class":264},[220,44400,44401],{"class":222,"line":656},[220,44402,7026],{"class":264},[220,44404,44405],{"class":222,"line":673},[220,44406,1787],{"class":264},[220,44408,44409],{"class":222,"line":682},[220,44410,1792],{"class":264},[1504,44412,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":44414},[44415,44416],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdither",{"title":44148,"description":44156},"docs\u002Fcomponents\u002FDither","RpJOyeNRTikk73609hU3YKVUkcOOq-7t9PvvNkq4FNo",{"id":44423,"title":44424,"body":44425,"category":33058,"componentType":25872,"description":44432,"extension":191,"meta":44660,"navigation":194,"path":44661,"requiresChild":32525,"seo":44662,"stem":44663,"__hash__":44664},"components\u002Fdocs\u002Fcomponents\u002FDotGrid.md","DotGrid",{"type":8,"value":44426,"toc":44656},[44427,44430,44433,44435,44437,44440,44442,44654],[11,44428,44424],{"id":44429},"dotgrid",[15,44431,44432],{},"Grid of dots with optional twinkling animation",[31906,44434],{"component":44424},[23,44436,31910],{"id":26528},[31912,44438],{":props":44439},"[{\"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,44441,31918],{"id":31917},[246,44443,44444,44483,44521,44559,44597],{":tabs":1557},[212,44445,44447],{"className":334,"code":44446,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,44448,44449,44457,44463,44471,44475],{"__ignoreMap":178},[220,44450,44451,44453,44455],{"class":222,"line":223},[220,44452,343],{"class":264},[220,44454,347],{"class":346},[220,44456,359],{"class":264},[220,44458,44459,44461],{"class":222,"line":179},[220,44460,364],{"class":264},[220,44462,19498],{"class":346},[220,44464,44465,44467,44469],{"class":222,"line":389},[220,44466,9630],{"class":226},[220,44468,353],{"class":264},[220,44470,9586],{"class":230},[220,44472,44473],{"class":222,"line":399},[220,44474,1234],{"class":264},[220,44476,44477,44479,44481],{"class":222,"line":644},[220,44478,402],{"class":264},[220,44480,347],{"class":346},[220,44482,359],{"class":264},[212,44484,44485],{"className":409,"code":44446,"language":411,"meta":178,"style":178},[99,44486,44487,44495,44501,44509,44513],{"__ignoreMap":178},[220,44488,44489,44491,44493],{"class":222,"line":223},[220,44490,343],{"class":264},[220,44492,347],{"class":420},[220,44494,359],{"class":264},[220,44496,44497,44499],{"class":222,"line":179},[220,44498,364],{"class":264},[220,44500,19498],{"class":420},[220,44502,44503,44505,44507],{"class":222,"line":389},[220,44504,9630],{"class":226},[220,44506,353],{"class":260},[220,44508,9586],{"class":230},[220,44510,44511],{"class":222,"line":399},[220,44512,1234],{"class":264},[220,44514,44515,44517,44519],{"class":222,"line":644},[220,44516,402],{"class":264},[220,44518,347],{"class":420},[220,44520,359],{"class":264},[212,44522,44523],{"className":2844,"code":44446,"language":2846,"meta":178,"style":178},[99,44524,44525,44533,44539,44547,44551],{"__ignoreMap":178},[220,44526,44527,44529,44531],{"class":222,"line":223},[220,44528,343],{"class":264},[220,44530,347],{"class":420},[220,44532,359],{"class":264},[220,44534,44535,44537],{"class":222,"line":179},[220,44536,364],{"class":264},[220,44538,19498],{"class":420},[220,44540,44541,44543,44545],{"class":222,"line":389},[220,44542,9630],{"class":226},[220,44544,353],{"class":264},[220,44546,9586],{"class":230},[220,44548,44549],{"class":222,"line":399},[220,44550,1234],{"class":264},[220,44552,44553,44555,44557],{"class":222,"line":644},[220,44554,402],{"class":264},[220,44556,347],{"class":420},[220,44558,359],{"class":264},[212,44560,44561],{"className":468,"code":44446,"language":469,"meta":178,"style":178},[99,44562,44563,44571,44577,44585,44589],{"__ignoreMap":178},[220,44564,44565,44567,44569],{"class":222,"line":223},[220,44566,343],{"class":264},[220,44568,347],{"class":420},[220,44570,359],{"class":264},[220,44572,44573,44575],{"class":222,"line":179},[220,44574,364],{"class":264},[220,44576,19498],{"class":420},[220,44578,44579,44581,44583],{"class":222,"line":389},[220,44580,9630],{"class":226},[220,44582,353],{"class":260},[220,44584,9586],{"class":230},[220,44586,44587],{"class":222,"line":399},[220,44588,1234],{"class":264},[220,44590,44591,44593,44595],{"class":222,"line":644},[220,44592,402],{"class":264},[220,44594,347],{"class":420},[220,44596,359],{"class":264},[212,44598,44600],{"className":251,"code":44599,"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,44601,44602,44612,44616,44630,44634,44646,44650],{"__ignoreMap":178},[220,44603,44604,44606,44608,44610],{"class":222,"line":223},[220,44605,261],{"class":260},[220,44607,11507],{"class":264},[220,44609,268],{"class":260},[220,44611,4007],{"class":230},[220,44613,44614],{"class":222,"line":179},[220,44615,647],{"emptyLinePlaceholder":194},[220,44617,44618,44620,44622,44624,44626,44628],{"class":222,"line":389},[220,44619,1735],{"class":260},[220,44621,1738],{"class":420},[220,44623,1741],{"class":260},[220,44625,1744],{"class":260},[220,44627,1747],{"class":226},[220,44629,1750],{"class":264},[220,44631,44632],{"class":222,"line":399},[220,44633,1765],{"class":264},[220,44635,44636,44638,44640,44642,44644],{"class":222,"line":644},[220,44637,1770],{"class":264},[220,44639,20051],{"class":230},[220,44641,1776],{"class":264},[220,44643,10164],{"class":230},[220,44645,1782],{"class":264},[220,44647,44648],{"class":222,"line":650},[220,44649,1787],{"class":264},[220,44651,44652],{"class":222,"line":656},[220,44653,1792],{"class":264},[1504,44655,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":44657},[44658,44659],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdotgrid",{"title":44424,"description":44432},"docs\u002Fcomponents\u002FDotGrid","Oz6BXPFCxmoA7lNyqwqkZNriFmZV5rTcHjYWZmISd7A",{"id":44666,"title":44667,"body":44668,"category":32801,"componentType":25878,"description":44675,"extension":191,"meta":45029,"navigation":194,"path":45030,"requiresChild":194,"seo":45031,"stem":45032,"__hash__":45033},"components\u002Fdocs\u002Fcomponents\u002FDropShadow.md","DropShadow",{"type":8,"value":44669,"toc":45025},[44670,44673,44676,44678,44680,44683,44685,45023],[11,44671,44667],{"id":44672},"dropshadow",[15,44674,44675],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[31906,44677],{"component":44667},[23,44679,31910],{"id":26528},[31912,44681],{":props":44682},"[{\"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,44684,31918],{"id":31917},[246,44686,44687,44751,44818,44882,44948],{":tabs":1557},[212,44688,44690],{"className":334,"code":44689,"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,44691,44692,44700,44707,44715,44723,44727,44735,44743],{"__ignoreMap":178},[220,44693,44694,44696,44698],{"class":222,"line":223},[220,44695,343],{"class":264},[220,44697,347],{"class":346},[220,44699,359],{"class":264},[220,44701,44702,44704],{"class":222,"line":179},[220,44703,364],{"class":264},[220,44705,44706],{"class":346},"DropShadow\n",[220,44708,44709,44711,44713],{"class":222,"line":389},[220,44710,9630],{"class":226},[220,44712,353],{"class":264},[220,44714,19469],{"class":230},[220,44716,44717,44719,44721],{"class":222,"line":399},[220,44718,20366],{"class":226},[220,44720,353],{"class":264},[220,44722,42153],{"class":230},[220,44724,44725],{"class":222,"line":644},[220,44726,31954],{"class":264},[220,44728,44729,44731,44733],{"class":222,"line":650},[220,44730,2550],{"class":264},[220,44732,2553],{"class":346},[220,44734,386],{"class":264},[220,44736,44737,44739,44741],{"class":222,"line":656},[220,44738,2567],{"class":264},[220,44740,44667],{"class":346},[220,44742,359],{"class":264},[220,44744,44745,44747,44749],{"class":222,"line":673},[220,44746,402],{"class":264},[220,44748,347],{"class":346},[220,44750,359],{"class":264},[212,44752,44754],{"className":409,"code":44753,"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,44755,44756,44764,44770,44778,44790,44794,44802,44810],{"__ignoreMap":178},[220,44757,44758,44760,44762],{"class":222,"line":223},[220,44759,343],{"class":264},[220,44761,347],{"class":420},[220,44763,359],{"class":264},[220,44765,44766,44768],{"class":222,"line":179},[220,44767,364],{"class":264},[220,44769,44706],{"class":420},[220,44771,44772,44774,44776],{"class":222,"line":389},[220,44773,9630],{"class":226},[220,44775,353],{"class":260},[220,44777,19469],{"class":230},[220,44779,44780,44782,44784,44786,44788],{"class":222,"line":399},[220,44781,20477],{"class":226},[220,44783,353],{"class":260},[220,44785,743],{"class":264},[220,44787,7749],{"class":420},[220,44789,749],{"class":264},[220,44791,44792],{"class":222,"line":644},[220,44793,31954],{"class":264},[220,44795,44796,44798,44800],{"class":222,"line":650},[220,44797,2550],{"class":264},[220,44799,2553],{"class":420},[220,44801,386],{"class":264},[220,44803,44804,44806,44808],{"class":222,"line":656},[220,44805,2567],{"class":264},[220,44807,44667],{"class":420},[220,44809,359],{"class":264},[220,44811,44812,44814,44816],{"class":222,"line":673},[220,44813,402],{"class":264},[220,44815,347],{"class":420},[220,44817,359],{"class":264},[212,44819,44820],{"className":2844,"code":44753,"language":2846,"meta":178,"style":178},[99,44821,44822,44830,44836,44844,44854,44858,44866,44874],{"__ignoreMap":178},[220,44823,44824,44826,44828],{"class":222,"line":223},[220,44825,343],{"class":264},[220,44827,347],{"class":420},[220,44829,359],{"class":264},[220,44831,44832,44834],{"class":222,"line":179},[220,44833,364],{"class":264},[220,44835,44706],{"class":420},[220,44837,44838,44840,44842],{"class":222,"line":389},[220,44839,9630],{"class":226},[220,44841,353],{"class":264},[220,44843,19469],{"class":230},[220,44845,44846,44848,44850,44852],{"class":222,"line":399},[220,44847,20477],{"class":226},[220,44849,29866],{"class":264},[220,44851,7749],{"class":420},[220,44853,749],{"class":264},[220,44855,44856],{"class":222,"line":644},[220,44857,31954],{"class":264},[220,44859,44860,44862,44864],{"class":222,"line":650},[220,44861,2550],{"class":264},[220,44863,2553],{"class":420},[220,44865,386],{"class":264},[220,44867,44868,44870,44872],{"class":222,"line":656},[220,44869,2567],{"class":264},[220,44871,44667],{"class":420},[220,44873,359],{"class":264},[220,44875,44876,44878,44880],{"class":222,"line":673},[220,44877,402],{"class":264},[220,44879,347],{"class":420},[220,44881,359],{"class":264},[212,44883,44884],{"className":468,"code":44753,"language":469,"meta":178,"style":178},[99,44885,44886,44894,44900,44908,44920,44924,44932,44940],{"__ignoreMap":178},[220,44887,44888,44890,44892],{"class":222,"line":223},[220,44889,343],{"class":264},[220,44891,347],{"class":420},[220,44893,359],{"class":264},[220,44895,44896,44898],{"class":222,"line":179},[220,44897,364],{"class":264},[220,44899,44706],{"class":420},[220,44901,44902,44904,44906],{"class":222,"line":389},[220,44903,9630],{"class":226},[220,44905,353],{"class":260},[220,44907,19469],{"class":230},[220,44909,44910,44912,44914,44916,44918],{"class":222,"line":399},[220,44911,20477],{"class":226},[220,44913,353],{"class":260},[220,44915,743],{"class":264},[220,44917,7749],{"class":420},[220,44919,749],{"class":264},[220,44921,44922],{"class":222,"line":644},[220,44923,31954],{"class":264},[220,44925,44926,44928,44930],{"class":222,"line":650},[220,44927,2550],{"class":264},[220,44929,2553],{"class":420},[220,44931,386],{"class":264},[220,44933,44934,44936,44938],{"class":222,"line":656},[220,44935,2567],{"class":264},[220,44937,44667],{"class":420},[220,44939,359],{"class":264},[220,44941,44942,44944,44946],{"class":222,"line":673},[220,44943,402],{"class":264},[220,44945,347],{"class":420},[220,44947,359],{"class":264},[212,44949,44951],{"className":251,"code":44950,"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,44952,44953,44963,44967,44981,44985,45003,45011,45015,45019],{"__ignoreMap":178},[220,44954,44955,44957,44959,44961],{"class":222,"line":223},[220,44956,261],{"class":260},[220,44958,11507],{"class":264},[220,44960,268],{"class":260},[220,44962,4007],{"class":230},[220,44964,44965],{"class":222,"line":179},[220,44966,647],{"emptyLinePlaceholder":194},[220,44968,44969,44971,44973,44975,44977,44979],{"class":222,"line":389},[220,44970,1735],{"class":260},[220,44972,1738],{"class":420},[220,44974,1741],{"class":260},[220,44976,1744],{"class":260},[220,44978,1747],{"class":226},[220,44980,1750],{"class":264},[220,44982,44983],{"class":222,"line":399},[220,44984,1765],{"class":264},[220,44986,44987,44989,44992,44994,44996,44999,45001],{"class":222,"line":644},[220,44988,1770],{"class":264},[220,44990,44991],{"class":230},"'DropShadow'",[220,44993,1776],{"class":264},[220,44995,20029],{"class":230},[220,44997,44998],{"class":264},", intensity: ",[220,45000,7749],{"class":420},[220,45002,7541],{"class":264},[220,45004,45005,45007,45009],{"class":222,"line":650},[220,45006,7009],{"class":264},[220,45008,3206],{"class":230},[220,45010,2465],{"class":264},[220,45012,45013],{"class":222,"line":656},[220,45014,7026],{"class":264},[220,45016,45017],{"class":222,"line":673},[220,45018,1787],{"class":264},[220,45020,45021],{"class":222,"line":682},[220,45022,1792],{"class":264},[1504,45024,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45026},[45027,45028],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fdropshadow",{"title":44667,"description":44675},"docs\u002Fcomponents\u002FDropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":45035,"title":45036,"body":45037,"category":36363,"componentType":25878,"description":45044,"extension":191,"meta":45305,"navigation":194,"path":45306,"requiresChild":194,"seo":45307,"stem":45308,"__hash__":45309},"components\u002Fdocs\u002Fcomponents\u002FDuotone.md","Duotone",{"type":8,"value":45038,"toc":45301},[45039,45042,45045,45047,45049,45052,45054,45299],[11,45040,45036],{"id":45041},"duotone",[15,45043,45044],{},"Map colors to two tones based on luminance",[31906,45046],{"component":45036},[23,45048,31910],{"id":26528},[31912,45050],{":props":45051},"[{\"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,45053,31918],{"id":31917},[246,45055,45056,45101,45145,45189,45233],{":tabs":1557},[212,45057,45059],{"className":334,"code":45058,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CDuotone>\n \u003CCircle \u002F>\n \u003C\u002FDuotone>\n\u003C\u002FShader>\n",[99,45060,45061,45069,45077,45085,45093],{"__ignoreMap":178},[220,45062,45063,45065,45067],{"class":222,"line":223},[220,45064,343],{"class":264},[220,45066,347],{"class":346},[220,45068,359],{"class":264},[220,45070,45071,45073,45075],{"class":222,"line":179},[220,45072,364],{"class":264},[220,45074,45036],{"class":346},[220,45076,359],{"class":264},[220,45078,45079,45081,45083],{"class":222,"line":389},[220,45080,2550],{"class":264},[220,45082,2553],{"class":346},[220,45084,386],{"class":264},[220,45086,45087,45089,45091],{"class":222,"line":399},[220,45088,2567],{"class":264},[220,45090,45036],{"class":346},[220,45092,359],{"class":264},[220,45094,45095,45097,45099],{"class":222,"line":644},[220,45096,402],{"class":264},[220,45098,347],{"class":346},[220,45100,359],{"class":264},[212,45102,45103],{"className":409,"code":45058,"language":411,"meta":178,"style":178},[99,45104,45105,45113,45121,45129,45137],{"__ignoreMap":178},[220,45106,45107,45109,45111],{"class":222,"line":223},[220,45108,343],{"class":264},[220,45110,347],{"class":420},[220,45112,359],{"class":264},[220,45114,45115,45117,45119],{"class":222,"line":179},[220,45116,364],{"class":264},[220,45118,45036],{"class":420},[220,45120,359],{"class":264},[220,45122,45123,45125,45127],{"class":222,"line":389},[220,45124,2550],{"class":264},[220,45126,2553],{"class":420},[220,45128,386],{"class":264},[220,45130,45131,45133,45135],{"class":222,"line":399},[220,45132,2567],{"class":264},[220,45134,45036],{"class":420},[220,45136,359],{"class":264},[220,45138,45139,45141,45143],{"class":222,"line":644},[220,45140,402],{"class":264},[220,45142,347],{"class":420},[220,45144,359],{"class":264},[212,45146,45147],{"className":2844,"code":45058,"language":2846,"meta":178,"style":178},[99,45148,45149,45157,45165,45173,45181],{"__ignoreMap":178},[220,45150,45151,45153,45155],{"class":222,"line":223},[220,45152,343],{"class":264},[220,45154,347],{"class":420},[220,45156,359],{"class":264},[220,45158,45159,45161,45163],{"class":222,"line":179},[220,45160,364],{"class":264},[220,45162,45036],{"class":420},[220,45164,359],{"class":264},[220,45166,45167,45169,45171],{"class":222,"line":389},[220,45168,2550],{"class":264},[220,45170,2553],{"class":420},[220,45172,386],{"class":264},[220,45174,45175,45177,45179],{"class":222,"line":399},[220,45176,2567],{"class":264},[220,45178,45036],{"class":420},[220,45180,359],{"class":264},[220,45182,45183,45185,45187],{"class":222,"line":644},[220,45184,402],{"class":264},[220,45186,347],{"class":420},[220,45188,359],{"class":264},[212,45190,45191],{"className":468,"code":45058,"language":469,"meta":178,"style":178},[99,45192,45193,45201,45209,45217,45225],{"__ignoreMap":178},[220,45194,45195,45197,45199],{"class":222,"line":223},[220,45196,343],{"class":264},[220,45198,347],{"class":420},[220,45200,359],{"class":264},[220,45202,45203,45205,45207],{"class":222,"line":179},[220,45204,364],{"class":264},[220,45206,45036],{"class":420},[220,45208,359],{"class":264},[220,45210,45211,45213,45215],{"class":222,"line":389},[220,45212,2550],{"class":264},[220,45214,2553],{"class":420},[220,45216,386],{"class":264},[220,45218,45219,45221,45223],{"class":222,"line":399},[220,45220,2567],{"class":264},[220,45222,45036],{"class":420},[220,45224,359],{"class":264},[220,45226,45227,45229,45231],{"class":222,"line":644},[220,45228,402],{"class":264},[220,45230,347],{"class":420},[220,45232,359],{"class":264},[212,45234,45236],{"className":251,"code":45235,"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,45237,45238,45248,45252,45266,45270,45279,45287,45291,45295],{"__ignoreMap":178},[220,45239,45240,45242,45244,45246],{"class":222,"line":223},[220,45241,261],{"class":260},[220,45243,11507],{"class":264},[220,45245,268],{"class":260},[220,45247,4007],{"class":230},[220,45249,45250],{"class":222,"line":179},[220,45251,647],{"emptyLinePlaceholder":194},[220,45253,45254,45256,45258,45260,45262,45264],{"class":222,"line":389},[220,45255,1735],{"class":260},[220,45257,1738],{"class":420},[220,45259,1741],{"class":260},[220,45261,1744],{"class":260},[220,45263,1747],{"class":226},[220,45265,1750],{"class":264},[220,45267,45268],{"class":222,"line":399},[220,45269,1765],{"class":264},[220,45271,45272,45274,45277],{"class":222,"line":644},[220,45273,1770],{"class":264},[220,45275,45276],{"class":230},"'Duotone'",[220,45278,7004],{"class":264},[220,45280,45281,45283,45285],{"class":222,"line":650},[220,45282,7009],{"class":264},[220,45284,3206],{"class":230},[220,45286,2465],{"class":264},[220,45288,45289],{"class":222,"line":656},[220,45290,7026],{"class":264},[220,45292,45293],{"class":222,"line":673},[220,45294,1787],{"class":264},[220,45296,45297],{"class":222,"line":682},[220,45298,1792],{"class":264},[1504,45300,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":45302},[45303,45304],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fduotone",{"title":45036,"description":45044},"docs\u002Fcomponents\u002FDuotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":45311,"title":45312,"body":45313,"category":15903,"componentType":25872,"description":45320,"extension":191,"meta":45550,"navigation":194,"path":45551,"requiresChild":32525,"seo":45552,"stem":45553,"__hash__":45554},"components\u002Fdocs\u002Fcomponents\u002FEllipse.md","Ellipse",{"type":8,"value":45314,"toc":45546},[45315,45318,45321,45323,45325,45328,45330,45544],[11,45316,45312],{"id":45317},"ellipse",[15,45319,45320],{},"Ellipse with independently adjustable horizontal and vertical radii",[31906,45322],{"component":45312},[23,45324,31910],{"id":26528},[31912,45326],{":props":45327},"[{\"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,45329,31918],{"id":31917},[246,45331,45332,45372,45410,45448,45486],{":tabs":1557},[212,45333,45335],{"className":334,"code":45334,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,45336,45337,45345,45352,45360,45364],{"__ignoreMap":178},[220,45338,45339,45341,45343],{"class":222,"line":223},[220,45340,343],{"class":264},[220,45342,347],{"class":346},[220,45344,359],{"class":264},[220,45346,45347,45349],{"class":222,"line":179},[220,45348,364],{"class":264},[220,45350,45351],{"class":346},"Ellipse\n",[220,45353,45354,45356,45358],{"class":222,"line":389},[220,45355,9630],{"class":226},[220,45357,353],{"class":264},[220,45359,9586],{"class":230},[220,45361,45362],{"class":222,"line":399},[220,45363,1234],{"class":264},[220,45365,45366,45368,45370],{"class":222,"line":644},[220,45367,402],{"class":264},[220,45369,347],{"class":346},[220,45371,359],{"class":264},[212,45373,45374],{"className":409,"code":45334,"language":411,"meta":178,"style":178},[99,45375,45376,45384,45390,45398,45402],{"__ignoreMap":178},[220,45377,45378,45380,45382],{"class":222,"line":223},[220,45379,343],{"class":264},[220,45381,347],{"class":420},[220,45383,359],{"class":264},[220,45385,45386,45388],{"class":222,"line":179},[220,45387,364],{"class":264},[220,45389,45351],{"class":420},[220,45391,45392,45394,45396],{"class":222,"line":389},[220,45393,9630],{"class":226},[220,45395,353],{"class":260},[220,45397,9586],{"class":230},[220,45399,45400],{"class":222,"line":399},[220,45401,1234],{"class":264},[220,45403,45404,45406,45408],{"class":222,"line":644},[220,45405,402],{"class":264},[220,45407,347],{"class":420},[220,45409,359],{"class":264},[212,45411,45412],{"className":2844,"code":45334,"language":2846,"meta":178,"style":178},[99,45413,45414,45422,45428,45436,45440],{"__ignoreMap":178},[220,45415,45416,45418,45420],{"class":222,"line":223},[220,45417,343],{"class":264},[220,45419,347],{"class":420},[220,45421,359],{"class":264},[220,45423,45424,45426],{"class":222,"line":179},[220,45425,364],{"class":264},[220,45427,45351],{"class":420},[220,45429,45430,45432,45434],{"class":222,"line":389},[220,45431,9630],{"class":226},[220,45433,353],{"class":264},[220,45435,9586],{"class":230},[220,45437,45438],{"class":222,"line":399},[220,45439,1234],{"class":264},[220,45441,45442,45444,45446],{"class":222,"line":644},[220,45443,402],{"class":264},[220,45445,347],{"class":420},[220,45447,359],{"class":264},[212,45449,45450],{"className":468,"code":45334,"language":469,"meta":178,"style":178},[99,45451,45452,45460,45466,45474,45478],{"__ignoreMap":178},[220,45453,45454,45456,45458],{"class":222,"line":223},[220,45455,343],{"class":264},[220,45457,347],{"class":420},[220,45459,359],{"class":264},[220,45461,45462,45464],{"class":222,"line":179},[220,45463,364],{"class":264},[220,45465,45351],{"class":420},[220,45467,45468,45470,45472],{"class":222,"line":389},[220,45469,9630],{"class":226},[220,45471,353],{"class":260},[220,45473,9586],{"class":230},[220,45475,45476],{"class":222,"line":399},[220,45477,1234],{"class":264},[220,45479,45480,45482,45484],{"class":222,"line":644},[220,45481,402],{"class":264},[220,45483,347],{"class":420},[220,45485,359],{"class":264},[212,45487,45489],{"className":251,"code":45488,"language":253,"meta":178,"style":178},"import { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ellipse', props: { color: '#ffffff' } }\n ]\n})\n",[99,45490,45491,45501,45505,45519,45523,45536,45540],{"__ignoreMap":178},[220,45492,45493,45495,45497,45499],{"class":222,"line":223},[220,45494,261],{"class":260},[220,45496,11507],{"class":264},[220,45498,268],{"class":260},[220,45500,4007],{"class":230},[220,45502,45503],{"class":222,"line":179},[220,45504,647],{"emptyLinePlaceholder":194},[220,45506,45507,45509,45511,45513,45515,45517],{"class":222,"line":389},[220,45508,1735],{"class":260},[220,45510,1738],{"class":420},[220,45512,1741],{"class":260},[220,45514,1744],{"class":260},[220,45516,1747],{"class":226},[220,45518,1750],{"class":264},[220,45520,45521],{"class":222,"line":399},[220,45522,1765],{"class":264},[220,45524,45525,45527,45530,45532,45534],{"class":222,"line":644},[220,45526,1770],{"class":264},[220,45528,45529],{"class":230},"'Ellipse'",[220,45531,1776],{"class":264},[220,45533,10164],{"class":230},[220,45535,1782],{"class":264},[220,45537,45538],{"class":222,"line":650},[220,45539,1787],{"class":264},[220,45541,45542],{"class":222,"line":656},[220,45543,1792],{"class":264},[1504,45545,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":45547},[45548,45549],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fellipse",{"title":45312,"description":45320},"docs\u002Fcomponents\u002FEllipse","ZMFje4wyKl-k4wX5XiwKbHGOw-r5FcIIojlQKJjJMls",{"id":45556,"title":20979,"body":45557,"category":36564,"componentType":25878,"description":45564,"extension":191,"meta":45824,"navigation":194,"path":45825,"requiresChild":194,"seo":45826,"stem":45827,"__hash__":45828},"components\u002Fdocs\u002Fcomponents\u002FEmboss.md",{"type":8,"value":45558,"toc":45820},[45559,45562,45565,45567,45569,45572,45574,45818],[11,45560,20979],{"id":45561},"emboss",[15,45563,45564],{},"Embossed \u002F debossed relief shading on top of child content, driven by a custom shape",[31906,45566],{"component":20979},[23,45568,31910],{"id":26528},[31912,45570],{":props":45571},"[{\"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,45573,31918],{"id":31917},[246,45575,45576,45621,45665,45709,45753],{":tabs":1557},[212,45577,45579],{"className":334,"code":45578,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEmboss>\n \u003CCircle \u002F>\n \u003C\u002FEmboss>\n\u003C\u002FShader>\n",[99,45580,45581,45589,45597,45605,45613],{"__ignoreMap":178},[220,45582,45583,45585,45587],{"class":222,"line":223},[220,45584,343],{"class":264},[220,45586,347],{"class":346},[220,45588,359],{"class":264},[220,45590,45591,45593,45595],{"class":222,"line":179},[220,45592,364],{"class":264},[220,45594,20979],{"class":346},[220,45596,359],{"class":264},[220,45598,45599,45601,45603],{"class":222,"line":389},[220,45600,2550],{"class":264},[220,45602,2553],{"class":346},[220,45604,386],{"class":264},[220,45606,45607,45609,45611],{"class":222,"line":399},[220,45608,2567],{"class":264},[220,45610,20979],{"class":346},[220,45612,359],{"class":264},[220,45614,45615,45617,45619],{"class":222,"line":644},[220,45616,402],{"class":264},[220,45618,347],{"class":346},[220,45620,359],{"class":264},[212,45622,45623],{"className":409,"code":45578,"language":411,"meta":178,"style":178},[99,45624,45625,45633,45641,45649,45657],{"__ignoreMap":178},[220,45626,45627,45629,45631],{"class":222,"line":223},[220,45628,343],{"class":264},[220,45630,347],{"class":420},[220,45632,359],{"class":264},[220,45634,45635,45637,45639],{"class":222,"line":179},[220,45636,364],{"class":264},[220,45638,20979],{"class":420},[220,45640,359],{"class":264},[220,45642,45643,45645,45647],{"class":222,"line":389},[220,45644,2550],{"class":264},[220,45646,2553],{"class":420},[220,45648,386],{"class":264},[220,45650,45651,45653,45655],{"class":222,"line":399},[220,45652,2567],{"class":264},[220,45654,20979],{"class":420},[220,45656,359],{"class":264},[220,45658,45659,45661,45663],{"class":222,"line":644},[220,45660,402],{"class":264},[220,45662,347],{"class":420},[220,45664,359],{"class":264},[212,45666,45667],{"className":2844,"code":45578,"language":2846,"meta":178,"style":178},[99,45668,45669,45677,45685,45693,45701],{"__ignoreMap":178},[220,45670,45671,45673,45675],{"class":222,"line":223},[220,45672,343],{"class":264},[220,45674,347],{"class":420},[220,45676,359],{"class":264},[220,45678,45679,45681,45683],{"class":222,"line":179},[220,45680,364],{"class":264},[220,45682,20979],{"class":420},[220,45684,359],{"class":264},[220,45686,45687,45689,45691],{"class":222,"line":389},[220,45688,2550],{"class":264},[220,45690,2553],{"class":420},[220,45692,386],{"class":264},[220,45694,45695,45697,45699],{"class":222,"line":399},[220,45696,2567],{"class":264},[220,45698,20979],{"class":420},[220,45700,359],{"class":264},[220,45702,45703,45705,45707],{"class":222,"line":644},[220,45704,402],{"class":264},[220,45706,347],{"class":420},[220,45708,359],{"class":264},[212,45710,45711],{"className":468,"code":45578,"language":469,"meta":178,"style":178},[99,45712,45713,45721,45729,45737,45745],{"__ignoreMap":178},[220,45714,45715,45717,45719],{"class":222,"line":223},[220,45716,343],{"class":264},[220,45718,347],{"class":420},[220,45720,359],{"class":264},[220,45722,45723,45725,45727],{"class":222,"line":179},[220,45724,364],{"class":264},[220,45726,20979],{"class":420},[220,45728,359],{"class":264},[220,45730,45731,45733,45735],{"class":222,"line":389},[220,45732,2550],{"class":264},[220,45734,2553],{"class":420},[220,45736,386],{"class":264},[220,45738,45739,45741,45743],{"class":222,"line":399},[220,45740,2567],{"class":264},[220,45742,20979],{"class":420},[220,45744,359],{"class":264},[220,45746,45747,45749,45751],{"class":222,"line":644},[220,45748,402],{"class":264},[220,45750,347],{"class":420},[220,45752,359],{"class":264},[212,45754,45756],{"className":251,"code":45755,"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,45757,45758,45768,45772,45786,45790,45798,45806,45810,45814],{"__ignoreMap":178},[220,45759,45760,45762,45764,45766],{"class":222,"line":223},[220,45761,261],{"class":260},[220,45763,11507],{"class":264},[220,45765,268],{"class":260},[220,45767,4007],{"class":230},[220,45769,45770],{"class":222,"line":179},[220,45771,647],{"emptyLinePlaceholder":194},[220,45773,45774,45776,45778,45780,45782,45784],{"class":222,"line":389},[220,45775,1735],{"class":260},[220,45777,1738],{"class":420},[220,45779,1741],{"class":260},[220,45781,1744],{"class":260},[220,45783,1747],{"class":226},[220,45785,1750],{"class":264},[220,45787,45788],{"class":222,"line":399},[220,45789,1765],{"class":264},[220,45791,45792,45794,45796],{"class":222,"line":644},[220,45793,1770],{"class":264},[220,45795,21642],{"class":230},[220,45797,7004],{"class":264},[220,45799,45800,45802,45804],{"class":222,"line":650},[220,45801,7009],{"class":264},[220,45803,3206],{"class":230},[220,45805,2465],{"class":264},[220,45807,45808],{"class":222,"line":656},[220,45809,7026],{"class":264},[220,45811,45812],{"class":222,"line":673},[220,45813,1787],{"class":264},[220,45815,45816],{"class":222,"line":682},[220,45817,1792],{"class":264},[1504,45819,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":45821},[45822,45823],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Femboss",{"title":20979,"description":45564},"docs\u002Fcomponents\u002FEmboss","Qr7L824U9CSOm50lFQmIeyBQ4tfeW8efNThawnMS35s",{"id":45830,"title":45831,"body":45832,"category":32801,"componentType":25878,"description":45839,"extension":191,"meta":46100,"navigation":194,"path":46101,"requiresChild":194,"seo":46102,"stem":46103,"__hash__":46104},"components\u002Fdocs\u002Fcomponents\u002FEngraving.md","Engraving",{"type":8,"value":45833,"toc":46096},[45834,45837,45840,45842,45844,45847,45849,46094],[11,45835,45831],{"id":45836},"engraving",[15,45838,45839],{},"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",[31906,45841],{"component":45831},[23,45843,31910],{"id":26528},[31912,45845],{":props":45846},"[{\"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,45848,31918],{"id":31917},[246,45850,45851,45896,45940,45984,46028],{":tabs":1557},[212,45852,45854],{"className":334,"code":45853,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CEngraving>\n \u003CCircle \u002F>\n \u003C\u002FEngraving>\n\u003C\u002FShader>\n",[99,45855,45856,45864,45872,45880,45888],{"__ignoreMap":178},[220,45857,45858,45860,45862],{"class":222,"line":223},[220,45859,343],{"class":264},[220,45861,347],{"class":346},[220,45863,359],{"class":264},[220,45865,45866,45868,45870],{"class":222,"line":179},[220,45867,364],{"class":264},[220,45869,45831],{"class":346},[220,45871,359],{"class":264},[220,45873,45874,45876,45878],{"class":222,"line":389},[220,45875,2550],{"class":264},[220,45877,2553],{"class":346},[220,45879,386],{"class":264},[220,45881,45882,45884,45886],{"class":222,"line":399},[220,45883,2567],{"class":264},[220,45885,45831],{"class":346},[220,45887,359],{"class":264},[220,45889,45890,45892,45894],{"class":222,"line":644},[220,45891,402],{"class":264},[220,45893,347],{"class":346},[220,45895,359],{"class":264},[212,45897,45898],{"className":409,"code":45853,"language":411,"meta":178,"style":178},[99,45899,45900,45908,45916,45924,45932],{"__ignoreMap":178},[220,45901,45902,45904,45906],{"class":222,"line":223},[220,45903,343],{"class":264},[220,45905,347],{"class":420},[220,45907,359],{"class":264},[220,45909,45910,45912,45914],{"class":222,"line":179},[220,45911,364],{"class":264},[220,45913,45831],{"class":420},[220,45915,359],{"class":264},[220,45917,45918,45920,45922],{"class":222,"line":389},[220,45919,2550],{"class":264},[220,45921,2553],{"class":420},[220,45923,386],{"class":264},[220,45925,45926,45928,45930],{"class":222,"line":399},[220,45927,2567],{"class":264},[220,45929,45831],{"class":420},[220,45931,359],{"class":264},[220,45933,45934,45936,45938],{"class":222,"line":644},[220,45935,402],{"class":264},[220,45937,347],{"class":420},[220,45939,359],{"class":264},[212,45941,45942],{"className":2844,"code":45853,"language":2846,"meta":178,"style":178},[99,45943,45944,45952,45960,45968,45976],{"__ignoreMap":178},[220,45945,45946,45948,45950],{"class":222,"line":223},[220,45947,343],{"class":264},[220,45949,347],{"class":420},[220,45951,359],{"class":264},[220,45953,45954,45956,45958],{"class":222,"line":179},[220,45955,364],{"class":264},[220,45957,45831],{"class":420},[220,45959,359],{"class":264},[220,45961,45962,45964,45966],{"class":222,"line":389},[220,45963,2550],{"class":264},[220,45965,2553],{"class":420},[220,45967,386],{"class":264},[220,45969,45970,45972,45974],{"class":222,"line":399},[220,45971,2567],{"class":264},[220,45973,45831],{"class":420},[220,45975,359],{"class":264},[220,45977,45978,45980,45982],{"class":222,"line":644},[220,45979,402],{"class":264},[220,45981,347],{"class":420},[220,45983,359],{"class":264},[212,45985,45986],{"className":468,"code":45853,"language":469,"meta":178,"style":178},[99,45987,45988,45996,46004,46012,46020],{"__ignoreMap":178},[220,45989,45990,45992,45994],{"class":222,"line":223},[220,45991,343],{"class":264},[220,45993,347],{"class":420},[220,45995,359],{"class":264},[220,45997,45998,46000,46002],{"class":222,"line":179},[220,45999,364],{"class":264},[220,46001,45831],{"class":420},[220,46003,359],{"class":264},[220,46005,46006,46008,46010],{"class":222,"line":389},[220,46007,2550],{"class":264},[220,46009,2553],{"class":420},[220,46011,386],{"class":264},[220,46013,46014,46016,46018],{"class":222,"line":399},[220,46015,2567],{"class":264},[220,46017,45831],{"class":420},[220,46019,359],{"class":264},[220,46021,46022,46024,46026],{"class":222,"line":644},[220,46023,402],{"class":264},[220,46025,347],{"class":420},[220,46027,359],{"class":264},[212,46029,46031],{"className":251,"code":46030,"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,46032,46033,46043,46047,46061,46065,46074,46082,46086,46090],{"__ignoreMap":178},[220,46034,46035,46037,46039,46041],{"class":222,"line":223},[220,46036,261],{"class":260},[220,46038,11507],{"class":264},[220,46040,268],{"class":260},[220,46042,4007],{"class":230},[220,46044,46045],{"class":222,"line":179},[220,46046,647],{"emptyLinePlaceholder":194},[220,46048,46049,46051,46053,46055,46057,46059],{"class":222,"line":389},[220,46050,1735],{"class":260},[220,46052,1738],{"class":420},[220,46054,1741],{"class":260},[220,46056,1744],{"class":260},[220,46058,1747],{"class":226},[220,46060,1750],{"class":264},[220,46062,46063],{"class":222,"line":399},[220,46064,1765],{"class":264},[220,46066,46067,46069,46072],{"class":222,"line":644},[220,46068,1770],{"class":264},[220,46070,46071],{"class":230},"'Engraving'",[220,46073,7004],{"class":264},[220,46075,46076,46078,46080],{"class":222,"line":650},[220,46077,7009],{"class":264},[220,46079,3206],{"class":230},[220,46081,2465],{"class":264},[220,46083,46084],{"class":222,"line":656},[220,46085,7026],{"class":264},[220,46087,46088],{"class":222,"line":673},[220,46089,1787],{"class":264},[220,46091,46092],{"class":222,"line":682},[220,46093,1792],{"class":264},[1504,46095,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":46097},[46098,46099],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fengraving",{"title":45831,"description":45839},"docs\u002Fcomponents\u002FEngraving","qeiD-G80ijGi4oQ_P_LHA32YLYv6Z1ESTU97R2EhUqw",{"id":46106,"title":46107,"body":46108,"category":33058,"componentType":25872,"description":46115,"extension":191,"meta":46300,"navigation":194,"path":46301,"requiresChild":32525,"seo":46302,"stem":46303,"__hash__":46304},"components\u002Fdocs\u002Fcomponents\u002FErosionNoise.md","ErosionNoise",{"type":8,"value":46109,"toc":46296},[46110,46113,46116,46118,46120,46123,46125,46294],[11,46111,46107],{"id":46112},"erosionnoise",[15,46114,46115],{},"Branching, hydraulic-erosion ridges carved into noise",[31906,46117],{"component":46107},[23,46119,31910],{"id":26528},[31912,46121],{":props":46122},"[{\"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,46124,31918],{"id":31917},[246,46126,46127,46156,46184,46212,46240],{":tabs":1557},[212,46128,46130],{"className":334,"code":46129,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CErosionNoise \u002F>\n\u003C\u002FShader>\n",[99,46131,46132,46140,46148],{"__ignoreMap":178},[220,46133,46134,46136,46138],{"class":222,"line":223},[220,46135,343],{"class":264},[220,46137,347],{"class":346},[220,46139,359],{"class":264},[220,46141,46142,46144,46146],{"class":222,"line":179},[220,46143,364],{"class":264},[220,46145,46107],{"class":346},[220,46147,386],{"class":264},[220,46149,46150,46152,46154],{"class":222,"line":389},[220,46151,402],{"class":264},[220,46153,347],{"class":346},[220,46155,359],{"class":264},[212,46157,46158],{"className":409,"code":46129,"language":411,"meta":178,"style":178},[99,46159,46160,46168,46176],{"__ignoreMap":178},[220,46161,46162,46164,46166],{"class":222,"line":223},[220,46163,343],{"class":264},[220,46165,347],{"class":420},[220,46167,359],{"class":264},[220,46169,46170,46172,46174],{"class":222,"line":179},[220,46171,364],{"class":264},[220,46173,46107],{"class":420},[220,46175,386],{"class":264},[220,46177,46178,46180,46182],{"class":222,"line":389},[220,46179,402],{"class":264},[220,46181,347],{"class":420},[220,46183,359],{"class":264},[212,46185,46186],{"className":2844,"code":46129,"language":2846,"meta":178,"style":178},[99,46187,46188,46196,46204],{"__ignoreMap":178},[220,46189,46190,46192,46194],{"class":222,"line":223},[220,46191,343],{"class":264},[220,46193,347],{"class":420},[220,46195,359],{"class":264},[220,46197,46198,46200,46202],{"class":222,"line":179},[220,46199,364],{"class":264},[220,46201,46107],{"class":420},[220,46203,386],{"class":264},[220,46205,46206,46208,46210],{"class":222,"line":389},[220,46207,402],{"class":264},[220,46209,347],{"class":420},[220,46211,359],{"class":264},[212,46213,46214],{"className":468,"code":46129,"language":469,"meta":178,"style":178},[99,46215,46216,46224,46232],{"__ignoreMap":178},[220,46217,46218,46220,46222],{"class":222,"line":223},[220,46219,343],{"class":264},[220,46221,347],{"class":420},[220,46223,359],{"class":264},[220,46225,46226,46228,46230],{"class":222,"line":179},[220,46227,364],{"class":264},[220,46229,46107],{"class":420},[220,46231,386],{"class":264},[220,46233,46234,46236,46238],{"class":222,"line":389},[220,46235,402],{"class":264},[220,46237,347],{"class":420},[220,46239,359],{"class":264},[212,46241,46243],{"className":251,"code":46242,"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,46244,46245,46255,46259,46273,46277,46286,46290],{"__ignoreMap":178},[220,46246,46247,46249,46251,46253],{"class":222,"line":223},[220,46248,261],{"class":260},[220,46250,11507],{"class":264},[220,46252,268],{"class":260},[220,46254,4007],{"class":230},[220,46256,46257],{"class":222,"line":179},[220,46258,647],{"emptyLinePlaceholder":194},[220,46260,46261,46263,46265,46267,46269,46271],{"class":222,"line":389},[220,46262,1735],{"class":260},[220,46264,1738],{"class":420},[220,46266,1741],{"class":260},[220,46268,1744],{"class":260},[220,46270,1747],{"class":226},[220,46272,1750],{"class":264},[220,46274,46275],{"class":222,"line":399},[220,46276,1765],{"class":264},[220,46278,46279,46281,46284],{"class":222,"line":644},[220,46280,1770],{"class":264},[220,46282,46283],{"class":230},"'ErosionNoise'",[220,46285,2465],{"class":264},[220,46287,46288],{"class":222,"line":650},[220,46289,1787],{"class":264},[220,46291,46292],{"class":222,"line":656},[220,46293,1792],{"class":264},[1504,46295,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":46297},[46298,46299],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ferosionnoise",{"title":46107,"description":46115},"docs\u002Fcomponents\u002FErosionNoise","NDtJi6wQgjQFUGuV5QqAqghkLA0CLD9ohncyepUGOP8",{"id":46306,"title":46307,"body":46308,"category":36363,"componentType":25878,"description":46315,"extension":191,"meta":46576,"navigation":194,"path":46577,"requiresChild":194,"seo":46578,"stem":46579,"__hash__":46580},"components\u002Fdocs\u002Fcomponents\u002FExposure.md","Exposure",{"type":8,"value":46309,"toc":46572},[46310,46313,46316,46318,46320,46323,46325,46570],[11,46311,46307],{"id":46312},"exposure",[15,46314,46315],{},"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.",[31906,46317],{"component":46307},[23,46319,31910],{"id":26528},[31912,46321],{":props":46322},"[{\"name\":\"exposure\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness multiplier (gain). 1 = unchanged, >1 pushes highlights past white for HDR bloom, \u003C1 darkens.\"}]",[23,46324,31918],{"id":31917},[246,46326,46327,46372,46416,46460,46504],{":tabs":1557},[212,46328,46330],{"className":334,"code":46329,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CExposure>\n \u003CCircle \u002F>\n \u003C\u002FExposure>\n\u003C\u002FShader>\n",[99,46331,46332,46340,46348,46356,46364],{"__ignoreMap":178},[220,46333,46334,46336,46338],{"class":222,"line":223},[220,46335,343],{"class":264},[220,46337,347],{"class":346},[220,46339,359],{"class":264},[220,46341,46342,46344,46346],{"class":222,"line":179},[220,46343,364],{"class":264},[220,46345,46307],{"class":346},[220,46347,359],{"class":264},[220,46349,46350,46352,46354],{"class":222,"line":389},[220,46351,2550],{"class":264},[220,46353,2553],{"class":346},[220,46355,386],{"class":264},[220,46357,46358,46360,46362],{"class":222,"line":399},[220,46359,2567],{"class":264},[220,46361,46307],{"class":346},[220,46363,359],{"class":264},[220,46365,46366,46368,46370],{"class":222,"line":644},[220,46367,402],{"class":264},[220,46369,347],{"class":346},[220,46371,359],{"class":264},[212,46373,46374],{"className":409,"code":46329,"language":411,"meta":178,"style":178},[99,46375,46376,46384,46392,46400,46408],{"__ignoreMap":178},[220,46377,46378,46380,46382],{"class":222,"line":223},[220,46379,343],{"class":264},[220,46381,347],{"class":420},[220,46383,359],{"class":264},[220,46385,46386,46388,46390],{"class":222,"line":179},[220,46387,364],{"class":264},[220,46389,46307],{"class":420},[220,46391,359],{"class":264},[220,46393,46394,46396,46398],{"class":222,"line":389},[220,46395,2550],{"class":264},[220,46397,2553],{"class":420},[220,46399,386],{"class":264},[220,46401,46402,46404,46406],{"class":222,"line":399},[220,46403,2567],{"class":264},[220,46405,46307],{"class":420},[220,46407,359],{"class":264},[220,46409,46410,46412,46414],{"class":222,"line":644},[220,46411,402],{"class":264},[220,46413,347],{"class":420},[220,46415,359],{"class":264},[212,46417,46418],{"className":2844,"code":46329,"language":2846,"meta":178,"style":178},[99,46419,46420,46428,46436,46444,46452],{"__ignoreMap":178},[220,46421,46422,46424,46426],{"class":222,"line":223},[220,46423,343],{"class":264},[220,46425,347],{"class":420},[220,46427,359],{"class":264},[220,46429,46430,46432,46434],{"class":222,"line":179},[220,46431,364],{"class":264},[220,46433,46307],{"class":420},[220,46435,359],{"class":264},[220,46437,46438,46440,46442],{"class":222,"line":389},[220,46439,2550],{"class":264},[220,46441,2553],{"class":420},[220,46443,386],{"class":264},[220,46445,46446,46448,46450],{"class":222,"line":399},[220,46447,2567],{"class":264},[220,46449,46307],{"class":420},[220,46451,359],{"class":264},[220,46453,46454,46456,46458],{"class":222,"line":644},[220,46455,402],{"class":264},[220,46457,347],{"class":420},[220,46459,359],{"class":264},[212,46461,46462],{"className":468,"code":46329,"language":469,"meta":178,"style":178},[99,46463,46464,46472,46480,46488,46496],{"__ignoreMap":178},[220,46465,46466,46468,46470],{"class":222,"line":223},[220,46467,343],{"class":264},[220,46469,347],{"class":420},[220,46471,359],{"class":264},[220,46473,46474,46476,46478],{"class":222,"line":179},[220,46475,364],{"class":264},[220,46477,46307],{"class":420},[220,46479,359],{"class":264},[220,46481,46482,46484,46486],{"class":222,"line":389},[220,46483,2550],{"class":264},[220,46485,2553],{"class":420},[220,46487,386],{"class":264},[220,46489,46490,46492,46494],{"class":222,"line":399},[220,46491,2567],{"class":264},[220,46493,46307],{"class":420},[220,46495,359],{"class":264},[220,46497,46498,46500,46502],{"class":222,"line":644},[220,46499,402],{"class":264},[220,46501,347],{"class":420},[220,46503,359],{"class":264},[212,46505,46507],{"className":251,"code":46506,"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,46508,46509,46519,46523,46537,46541,46550,46558,46562,46566],{"__ignoreMap":178},[220,46510,46511,46513,46515,46517],{"class":222,"line":223},[220,46512,261],{"class":260},[220,46514,11507],{"class":264},[220,46516,268],{"class":260},[220,46518,4007],{"class":230},[220,46520,46521],{"class":222,"line":179},[220,46522,647],{"emptyLinePlaceholder":194},[220,46524,46525,46527,46529,46531,46533,46535],{"class":222,"line":389},[220,46526,1735],{"class":260},[220,46528,1738],{"class":420},[220,46530,1741],{"class":260},[220,46532,1744],{"class":260},[220,46534,1747],{"class":226},[220,46536,1750],{"class":264},[220,46538,46539],{"class":222,"line":399},[220,46540,1765],{"class":264},[220,46542,46543,46545,46548],{"class":222,"line":644},[220,46544,1770],{"class":264},[220,46546,46547],{"class":230},"'Exposure'",[220,46549,7004],{"class":264},[220,46551,46552,46554,46556],{"class":222,"line":650},[220,46553,7009],{"class":264},[220,46555,3206],{"class":230},[220,46557,2465],{"class":264},[220,46559,46560],{"class":222,"line":656},[220,46561,7026],{"class":264},[220,46563,46564],{"class":222,"line":673},[220,46565,1787],{"class":264},[220,46567,46568],{"class":222,"line":682},[220,46569,1792],{"class":264},[1504,46571,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":46573},[46574,46575],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fexposure",{"title":46307,"description":46315},"docs\u002Fcomponents\u002FExposure","VfM-TzROqJT3s7jsLf0egheTpNMJh4WgoIVTlvSNT2I",{"id":46582,"title":46583,"body":46584,"category":33058,"componentType":25872,"description":46591,"extension":191,"meta":46776,"navigation":194,"path":46777,"requiresChild":32525,"seo":46778,"stem":46779,"__hash__":46780},"components\u002Fdocs\u002Fcomponents\u002FFallingLines.md","FallingLines",{"type":8,"value":46585,"toc":46772},[46586,46589,46592,46594,46596,46599,46601,46770],[11,46587,46583],{"id":46588},"fallinglines",[15,46590,46591],{},"Directional falling lines with a leading-to-trailing color fade",[31906,46593],{"component":46583},[23,46595,31910],{"id":26528},[31912,46597],{":props":46598},"[{\"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,46600,31918],{"id":31917},[246,46602,46603,46632,46660,46688,46716],{":tabs":1557},[212,46604,46606],{"className":334,"code":46605,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFallingLines \u002F>\n\u003C\u002FShader>\n",[99,46607,46608,46616,46624],{"__ignoreMap":178},[220,46609,46610,46612,46614],{"class":222,"line":223},[220,46611,343],{"class":264},[220,46613,347],{"class":346},[220,46615,359],{"class":264},[220,46617,46618,46620,46622],{"class":222,"line":179},[220,46619,364],{"class":264},[220,46621,46583],{"class":346},[220,46623,386],{"class":264},[220,46625,46626,46628,46630],{"class":222,"line":389},[220,46627,402],{"class":264},[220,46629,347],{"class":346},[220,46631,359],{"class":264},[212,46633,46634],{"className":409,"code":46605,"language":411,"meta":178,"style":178},[99,46635,46636,46644,46652],{"__ignoreMap":178},[220,46637,46638,46640,46642],{"class":222,"line":223},[220,46639,343],{"class":264},[220,46641,347],{"class":420},[220,46643,359],{"class":264},[220,46645,46646,46648,46650],{"class":222,"line":179},[220,46647,364],{"class":264},[220,46649,46583],{"class":420},[220,46651,386],{"class":264},[220,46653,46654,46656,46658],{"class":222,"line":389},[220,46655,402],{"class":264},[220,46657,347],{"class":420},[220,46659,359],{"class":264},[212,46661,46662],{"className":2844,"code":46605,"language":2846,"meta":178,"style":178},[99,46663,46664,46672,46680],{"__ignoreMap":178},[220,46665,46666,46668,46670],{"class":222,"line":223},[220,46667,343],{"class":264},[220,46669,347],{"class":420},[220,46671,359],{"class":264},[220,46673,46674,46676,46678],{"class":222,"line":179},[220,46675,364],{"class":264},[220,46677,46583],{"class":420},[220,46679,386],{"class":264},[220,46681,46682,46684,46686],{"class":222,"line":389},[220,46683,402],{"class":264},[220,46685,347],{"class":420},[220,46687,359],{"class":264},[212,46689,46690],{"className":468,"code":46605,"language":469,"meta":178,"style":178},[99,46691,46692,46700,46708],{"__ignoreMap":178},[220,46693,46694,46696,46698],{"class":222,"line":223},[220,46695,343],{"class":264},[220,46697,347],{"class":420},[220,46699,359],{"class":264},[220,46701,46702,46704,46706],{"class":222,"line":179},[220,46703,364],{"class":264},[220,46705,46583],{"class":420},[220,46707,386],{"class":264},[220,46709,46710,46712,46714],{"class":222,"line":389},[220,46711,402],{"class":264},[220,46713,347],{"class":420},[220,46715,359],{"class":264},[212,46717,46719],{"className":251,"code":46718,"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,46720,46721,46731,46735,46749,46753,46762,46766],{"__ignoreMap":178},[220,46722,46723,46725,46727,46729],{"class":222,"line":223},[220,46724,261],{"class":260},[220,46726,11507],{"class":264},[220,46728,268],{"class":260},[220,46730,4007],{"class":230},[220,46732,46733],{"class":222,"line":179},[220,46734,647],{"emptyLinePlaceholder":194},[220,46736,46737,46739,46741,46743,46745,46747],{"class":222,"line":389},[220,46738,1735],{"class":260},[220,46740,1738],{"class":420},[220,46742,1741],{"class":260},[220,46744,1744],{"class":260},[220,46746,1747],{"class":226},[220,46748,1750],{"class":264},[220,46750,46751],{"class":222,"line":399},[220,46752,1765],{"class":264},[220,46754,46755,46757,46760],{"class":222,"line":644},[220,46756,1770],{"class":264},[220,46758,46759],{"class":230},"'FallingLines'",[220,46761,2465],{"class":264},[220,46763,46764],{"class":222,"line":650},[220,46765,1787],{"class":264},[220,46767,46768],{"class":222,"line":656},[220,46769,1792],{"class":264},[1504,46771,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":46773},[46774,46775],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffallinglines",{"title":46583,"description":46591},"docs\u002Fcomponents\u002FFallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":46782,"title":46783,"body":46784,"category":32801,"componentType":25878,"description":46791,"extension":191,"meta":47052,"navigation":194,"path":47053,"requiresChild":194,"seo":47054,"stem":47055,"__hash__":47056},"components\u002Fdocs\u002Fcomponents\u002FFilmGrain.md","FilmGrain",{"type":8,"value":46785,"toc":47048},[46786,46789,46792,46794,46796,46799,46801,47046],[11,46787,46783],{"id":46788},"filmgrain",[15,46790,46791],{},"Analog film grain texture overlay, weighted toward darker areas",[31906,46793],{"component":46783},[23,46795,31910],{"id":26528},[31912,46797],{":props":46798},"[{\"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,46800,31918],{"id":31917},[246,46802,46803,46848,46892,46936,46980],{":tabs":1557},[212,46804,46806],{"className":334,"code":46805,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle \u002F>\n \u003C\u002FFilmGrain>\n\u003C\u002FShader>\n",[99,46807,46808,46816,46824,46832,46840],{"__ignoreMap":178},[220,46809,46810,46812,46814],{"class":222,"line":223},[220,46811,343],{"class":264},[220,46813,347],{"class":346},[220,46815,359],{"class":264},[220,46817,46818,46820,46822],{"class":222,"line":179},[220,46819,364],{"class":264},[220,46821,46783],{"class":346},[220,46823,359],{"class":264},[220,46825,46826,46828,46830],{"class":222,"line":389},[220,46827,2550],{"class":264},[220,46829,2553],{"class":346},[220,46831,386],{"class":264},[220,46833,46834,46836,46838],{"class":222,"line":399},[220,46835,2567],{"class":264},[220,46837,46783],{"class":346},[220,46839,359],{"class":264},[220,46841,46842,46844,46846],{"class":222,"line":644},[220,46843,402],{"class":264},[220,46845,347],{"class":346},[220,46847,359],{"class":264},[212,46849,46850],{"className":409,"code":46805,"language":411,"meta":178,"style":178},[99,46851,46852,46860,46868,46876,46884],{"__ignoreMap":178},[220,46853,46854,46856,46858],{"class":222,"line":223},[220,46855,343],{"class":264},[220,46857,347],{"class":420},[220,46859,359],{"class":264},[220,46861,46862,46864,46866],{"class":222,"line":179},[220,46863,364],{"class":264},[220,46865,46783],{"class":420},[220,46867,359],{"class":264},[220,46869,46870,46872,46874],{"class":222,"line":389},[220,46871,2550],{"class":264},[220,46873,2553],{"class":420},[220,46875,386],{"class":264},[220,46877,46878,46880,46882],{"class":222,"line":399},[220,46879,2567],{"class":264},[220,46881,46783],{"class":420},[220,46883,359],{"class":264},[220,46885,46886,46888,46890],{"class":222,"line":644},[220,46887,402],{"class":264},[220,46889,347],{"class":420},[220,46891,359],{"class":264},[212,46893,46894],{"className":2844,"code":46805,"language":2846,"meta":178,"style":178},[99,46895,46896,46904,46912,46920,46928],{"__ignoreMap":178},[220,46897,46898,46900,46902],{"class":222,"line":223},[220,46899,343],{"class":264},[220,46901,347],{"class":420},[220,46903,359],{"class":264},[220,46905,46906,46908,46910],{"class":222,"line":179},[220,46907,364],{"class":264},[220,46909,46783],{"class":420},[220,46911,359],{"class":264},[220,46913,46914,46916,46918],{"class":222,"line":389},[220,46915,2550],{"class":264},[220,46917,2553],{"class":420},[220,46919,386],{"class":264},[220,46921,46922,46924,46926],{"class":222,"line":399},[220,46923,2567],{"class":264},[220,46925,46783],{"class":420},[220,46927,359],{"class":264},[220,46929,46930,46932,46934],{"class":222,"line":644},[220,46931,402],{"class":264},[220,46933,347],{"class":420},[220,46935,359],{"class":264},[212,46937,46938],{"className":468,"code":46805,"language":469,"meta":178,"style":178},[99,46939,46940,46948,46956,46964,46972],{"__ignoreMap":178},[220,46941,46942,46944,46946],{"class":222,"line":223},[220,46943,343],{"class":264},[220,46945,347],{"class":420},[220,46947,359],{"class":264},[220,46949,46950,46952,46954],{"class":222,"line":179},[220,46951,364],{"class":264},[220,46953,46783],{"class":420},[220,46955,359],{"class":264},[220,46957,46958,46960,46962],{"class":222,"line":389},[220,46959,2550],{"class":264},[220,46961,2553],{"class":420},[220,46963,386],{"class":264},[220,46965,46966,46968,46970],{"class":222,"line":399},[220,46967,2567],{"class":264},[220,46969,46783],{"class":420},[220,46971,359],{"class":264},[220,46973,46974,46976,46978],{"class":222,"line":644},[220,46975,402],{"class":264},[220,46977,347],{"class":420},[220,46979,359],{"class":264},[212,46981,46983],{"className":251,"code":46982,"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,46984,46985,46995,46999,47013,47017,47026,47034,47038,47042],{"__ignoreMap":178},[220,46986,46987,46989,46991,46993],{"class":222,"line":223},[220,46988,261],{"class":260},[220,46990,11507],{"class":264},[220,46992,268],{"class":260},[220,46994,4007],{"class":230},[220,46996,46997],{"class":222,"line":179},[220,46998,647],{"emptyLinePlaceholder":194},[220,47000,47001,47003,47005,47007,47009,47011],{"class":222,"line":389},[220,47002,1735],{"class":260},[220,47004,1738],{"class":420},[220,47006,1741],{"class":260},[220,47008,1744],{"class":260},[220,47010,1747],{"class":226},[220,47012,1750],{"class":264},[220,47014,47015],{"class":222,"line":399},[220,47016,1765],{"class":264},[220,47018,47019,47021,47024],{"class":222,"line":644},[220,47020,1770],{"class":264},[220,47022,47023],{"class":230},"'FilmGrain'",[220,47025,7004],{"class":264},[220,47027,47028,47030,47032],{"class":222,"line":650},[220,47029,7009],{"class":264},[220,47031,3206],{"class":230},[220,47033,2465],{"class":264},[220,47035,47036],{"class":222,"line":656},[220,47037,7026],{"class":264},[220,47039,47040],{"class":222,"line":673},[220,47041,1787],{"class":264},[220,47043,47044],{"class":222,"line":682},[220,47045,1792],{"class":264},[1504,47047,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":47049},[47050,47051],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffilmgrain",{"title":46783,"description":46791},"docs\u002Fcomponents\u002FFilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":47058,"title":47059,"body":47060,"category":36363,"componentType":25878,"description":47067,"extension":191,"meta":47328,"navigation":194,"path":47329,"requiresChild":194,"seo":47330,"stem":47331,"__hash__":47332},"components\u002Fdocs\u002Fcomponents\u002FFilmStock.md","FilmStock",{"type":8,"value":47061,"toc":47324},[47062,47065,47068,47070,47072,47075,47077,47322],[11,47063,47059],{"id":47064},"filmstock",[15,47066,47067],{},"Real analog film color from measured film-emulation LUTs — ten classic stock looks with emulsion halation and projector gate weave",[31906,47069],{"component":47059},[23,47071,31910],{"id":26528},[31912,47073],{":props":47074},"[{\"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,47076,31918],{"id":31917},[246,47078,47079,47124,47168,47212,47256],{":tabs":1557},[212,47080,47082],{"className":334,"code":47081,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFilmStock>\n \u003CCircle \u002F>\n \u003C\u002FFilmStock>\n\u003C\u002FShader>\n",[99,47083,47084,47092,47100,47108,47116],{"__ignoreMap":178},[220,47085,47086,47088,47090],{"class":222,"line":223},[220,47087,343],{"class":264},[220,47089,347],{"class":346},[220,47091,359],{"class":264},[220,47093,47094,47096,47098],{"class":222,"line":179},[220,47095,364],{"class":264},[220,47097,47059],{"class":346},[220,47099,359],{"class":264},[220,47101,47102,47104,47106],{"class":222,"line":389},[220,47103,2550],{"class":264},[220,47105,2553],{"class":346},[220,47107,386],{"class":264},[220,47109,47110,47112,47114],{"class":222,"line":399},[220,47111,2567],{"class":264},[220,47113,47059],{"class":346},[220,47115,359],{"class":264},[220,47117,47118,47120,47122],{"class":222,"line":644},[220,47119,402],{"class":264},[220,47121,347],{"class":346},[220,47123,359],{"class":264},[212,47125,47126],{"className":409,"code":47081,"language":411,"meta":178,"style":178},[99,47127,47128,47136,47144,47152,47160],{"__ignoreMap":178},[220,47129,47130,47132,47134],{"class":222,"line":223},[220,47131,343],{"class":264},[220,47133,347],{"class":420},[220,47135,359],{"class":264},[220,47137,47138,47140,47142],{"class":222,"line":179},[220,47139,364],{"class":264},[220,47141,47059],{"class":420},[220,47143,359],{"class":264},[220,47145,47146,47148,47150],{"class":222,"line":389},[220,47147,2550],{"class":264},[220,47149,2553],{"class":420},[220,47151,386],{"class":264},[220,47153,47154,47156,47158],{"class":222,"line":399},[220,47155,2567],{"class":264},[220,47157,47059],{"class":420},[220,47159,359],{"class":264},[220,47161,47162,47164,47166],{"class":222,"line":644},[220,47163,402],{"class":264},[220,47165,347],{"class":420},[220,47167,359],{"class":264},[212,47169,47170],{"className":2844,"code":47081,"language":2846,"meta":178,"style":178},[99,47171,47172,47180,47188,47196,47204],{"__ignoreMap":178},[220,47173,47174,47176,47178],{"class":222,"line":223},[220,47175,343],{"class":264},[220,47177,347],{"class":420},[220,47179,359],{"class":264},[220,47181,47182,47184,47186],{"class":222,"line":179},[220,47183,364],{"class":264},[220,47185,47059],{"class":420},[220,47187,359],{"class":264},[220,47189,47190,47192,47194],{"class":222,"line":389},[220,47191,2550],{"class":264},[220,47193,2553],{"class":420},[220,47195,386],{"class":264},[220,47197,47198,47200,47202],{"class":222,"line":399},[220,47199,2567],{"class":264},[220,47201,47059],{"class":420},[220,47203,359],{"class":264},[220,47205,47206,47208,47210],{"class":222,"line":644},[220,47207,402],{"class":264},[220,47209,347],{"class":420},[220,47211,359],{"class":264},[212,47213,47214],{"className":468,"code":47081,"language":469,"meta":178,"style":178},[99,47215,47216,47224,47232,47240,47248],{"__ignoreMap":178},[220,47217,47218,47220,47222],{"class":222,"line":223},[220,47219,343],{"class":264},[220,47221,347],{"class":420},[220,47223,359],{"class":264},[220,47225,47226,47228,47230],{"class":222,"line":179},[220,47227,364],{"class":264},[220,47229,47059],{"class":420},[220,47231,359],{"class":264},[220,47233,47234,47236,47238],{"class":222,"line":389},[220,47235,2550],{"class":264},[220,47237,2553],{"class":420},[220,47239,386],{"class":264},[220,47241,47242,47244,47246],{"class":222,"line":399},[220,47243,2567],{"class":264},[220,47245,47059],{"class":420},[220,47247,359],{"class":264},[220,47249,47250,47252,47254],{"class":222,"line":644},[220,47251,402],{"class":264},[220,47253,347],{"class":420},[220,47255,359],{"class":264},[212,47257,47259],{"className":251,"code":47258,"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,47260,47261,47271,47275,47289,47293,47302,47310,47314,47318],{"__ignoreMap":178},[220,47262,47263,47265,47267,47269],{"class":222,"line":223},[220,47264,261],{"class":260},[220,47266,11507],{"class":264},[220,47268,268],{"class":260},[220,47270,4007],{"class":230},[220,47272,47273],{"class":222,"line":179},[220,47274,647],{"emptyLinePlaceholder":194},[220,47276,47277,47279,47281,47283,47285,47287],{"class":222,"line":389},[220,47278,1735],{"class":260},[220,47280,1738],{"class":420},[220,47282,1741],{"class":260},[220,47284,1744],{"class":260},[220,47286,1747],{"class":226},[220,47288,1750],{"class":264},[220,47290,47291],{"class":222,"line":399},[220,47292,1765],{"class":264},[220,47294,47295,47297,47300],{"class":222,"line":644},[220,47296,1770],{"class":264},[220,47298,47299],{"class":230},"'FilmStock'",[220,47301,7004],{"class":264},[220,47303,47304,47306,47308],{"class":222,"line":650},[220,47305,7009],{"class":264},[220,47307,3206],{"class":230},[220,47309,2465],{"class":264},[220,47311,47312],{"class":222,"line":656},[220,47313,7026],{"class":264},[220,47315,47316],{"class":222,"line":673},[220,47317,1787],{"class":264},[220,47319,47320],{"class":222,"line":682},[220,47321,1792],{"class":264},[1504,47323,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":47325},[47326,47327],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffilmstock",{"title":47059,"description":47067},"docs\u002Fcomponents\u002FFilmStock","7G7V30XyBVTR6eEcxr1nWz6_QIArP0YFqNLOoQt5-5A",{"id":47334,"title":47335,"body":47336,"category":33391,"componentType":25878,"description":47343,"extension":191,"meta":47604,"navigation":194,"path":47605,"requiresChild":194,"seo":47606,"stem":47607,"__hash__":47608},"components\u002Fdocs\u002Fcomponents\u002FFlip.md","Flip",{"type":8,"value":47337,"toc":47600},[47338,47341,47344,47346,47348,47351,47353,47598],[11,47339,47335],{"id":47340},"flip",[15,47342,47343],{},"Mirror content horizontally, vertically, or both",[31906,47345],{"component":47335},[23,47347,31910],{"id":26528},[31912,47349],{":props":47350},"[{\"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,47352,31918],{"id":31917},[246,47354,47355,47400,47444,47488,47532],{":tabs":1557},[212,47356,47358],{"className":334,"code":47357,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlip>\n \u003CCircle \u002F>\n \u003C\u002FFlip>\n\u003C\u002FShader>\n",[99,47359,47360,47368,47376,47384,47392],{"__ignoreMap":178},[220,47361,47362,47364,47366],{"class":222,"line":223},[220,47363,343],{"class":264},[220,47365,347],{"class":346},[220,47367,359],{"class":264},[220,47369,47370,47372,47374],{"class":222,"line":179},[220,47371,364],{"class":264},[220,47373,47335],{"class":346},[220,47375,359],{"class":264},[220,47377,47378,47380,47382],{"class":222,"line":389},[220,47379,2550],{"class":264},[220,47381,2553],{"class":346},[220,47383,386],{"class":264},[220,47385,47386,47388,47390],{"class":222,"line":399},[220,47387,2567],{"class":264},[220,47389,47335],{"class":346},[220,47391,359],{"class":264},[220,47393,47394,47396,47398],{"class":222,"line":644},[220,47395,402],{"class":264},[220,47397,347],{"class":346},[220,47399,359],{"class":264},[212,47401,47402],{"className":409,"code":47357,"language":411,"meta":178,"style":178},[99,47403,47404,47412,47420,47428,47436],{"__ignoreMap":178},[220,47405,47406,47408,47410],{"class":222,"line":223},[220,47407,343],{"class":264},[220,47409,347],{"class":420},[220,47411,359],{"class":264},[220,47413,47414,47416,47418],{"class":222,"line":179},[220,47415,364],{"class":264},[220,47417,47335],{"class":420},[220,47419,359],{"class":264},[220,47421,47422,47424,47426],{"class":222,"line":389},[220,47423,2550],{"class":264},[220,47425,2553],{"class":420},[220,47427,386],{"class":264},[220,47429,47430,47432,47434],{"class":222,"line":399},[220,47431,2567],{"class":264},[220,47433,47335],{"class":420},[220,47435,359],{"class":264},[220,47437,47438,47440,47442],{"class":222,"line":644},[220,47439,402],{"class":264},[220,47441,347],{"class":420},[220,47443,359],{"class":264},[212,47445,47446],{"className":2844,"code":47357,"language":2846,"meta":178,"style":178},[99,47447,47448,47456,47464,47472,47480],{"__ignoreMap":178},[220,47449,47450,47452,47454],{"class":222,"line":223},[220,47451,343],{"class":264},[220,47453,347],{"class":420},[220,47455,359],{"class":264},[220,47457,47458,47460,47462],{"class":222,"line":179},[220,47459,364],{"class":264},[220,47461,47335],{"class":420},[220,47463,359],{"class":264},[220,47465,47466,47468,47470],{"class":222,"line":389},[220,47467,2550],{"class":264},[220,47469,2553],{"class":420},[220,47471,386],{"class":264},[220,47473,47474,47476,47478],{"class":222,"line":399},[220,47475,2567],{"class":264},[220,47477,47335],{"class":420},[220,47479,359],{"class":264},[220,47481,47482,47484,47486],{"class":222,"line":644},[220,47483,402],{"class":264},[220,47485,347],{"class":420},[220,47487,359],{"class":264},[212,47489,47490],{"className":468,"code":47357,"language":469,"meta":178,"style":178},[99,47491,47492,47500,47508,47516,47524],{"__ignoreMap":178},[220,47493,47494,47496,47498],{"class":222,"line":223},[220,47495,343],{"class":264},[220,47497,347],{"class":420},[220,47499,359],{"class":264},[220,47501,47502,47504,47506],{"class":222,"line":179},[220,47503,364],{"class":264},[220,47505,47335],{"class":420},[220,47507,359],{"class":264},[220,47509,47510,47512,47514],{"class":222,"line":389},[220,47511,2550],{"class":264},[220,47513,2553],{"class":420},[220,47515,386],{"class":264},[220,47517,47518,47520,47522],{"class":222,"line":399},[220,47519,2567],{"class":264},[220,47521,47335],{"class":420},[220,47523,359],{"class":264},[220,47525,47526,47528,47530],{"class":222,"line":644},[220,47527,402],{"class":264},[220,47529,347],{"class":420},[220,47531,359],{"class":264},[212,47533,47535],{"className":251,"code":47534,"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,47536,47537,47547,47551,47565,47569,47578,47586,47590,47594],{"__ignoreMap":178},[220,47538,47539,47541,47543,47545],{"class":222,"line":223},[220,47540,261],{"class":260},[220,47542,11507],{"class":264},[220,47544,268],{"class":260},[220,47546,4007],{"class":230},[220,47548,47549],{"class":222,"line":179},[220,47550,647],{"emptyLinePlaceholder":194},[220,47552,47553,47555,47557,47559,47561,47563],{"class":222,"line":389},[220,47554,1735],{"class":260},[220,47556,1738],{"class":420},[220,47558,1741],{"class":260},[220,47560,1744],{"class":260},[220,47562,1747],{"class":226},[220,47564,1750],{"class":264},[220,47566,47567],{"class":222,"line":399},[220,47568,1765],{"class":264},[220,47570,47571,47573,47576],{"class":222,"line":644},[220,47572,1770],{"class":264},[220,47574,47575],{"class":230},"'Flip'",[220,47577,7004],{"class":264},[220,47579,47580,47582,47584],{"class":222,"line":650},[220,47581,7009],{"class":264},[220,47583,3206],{"class":230},[220,47585,2465],{"class":264},[220,47587,47588],{"class":222,"line":656},[220,47589,7026],{"class":264},[220,47591,47592],{"class":222,"line":673},[220,47593,1787],{"class":264},[220,47595,47596],{"class":222,"line":682},[220,47597,1792],{"class":264},[1504,47599,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":47601},[47602,47603],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fflip",{"title":47335,"description":47343},"docs\u002Fcomponents\u002FFlip","gsKaXBI-Mqa7nN_1k1g3GVV35lhzfj_YawpaizFeROo",{"id":47610,"title":47611,"body":47612,"category":33058,"componentType":25872,"description":47619,"extension":191,"meta":47804,"navigation":194,"path":47805,"requiresChild":32525,"seo":47806,"stem":47807,"__hash__":47808},"components\u002Fdocs\u002Fcomponents\u002FFloatingParticles.md","FloatingParticles",{"type":8,"value":47613,"toc":47800},[47614,47617,47620,47622,47624,47627,47629,47798],[11,47615,47611],{"id":47616},"floatingparticles",[15,47618,47619],{},"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",[31906,47621],{"component":47611},[23,47623,31910],{"id":26528},[31912,47625],{":props":47626},"[{\"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,47628,31918],{"id":31917},[246,47630,47631,47660,47688,47716,47744],{":tabs":1557},[212,47632,47634],{"className":334,"code":47633,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFloatingParticles \u002F>\n\u003C\u002FShader>\n",[99,47635,47636,47644,47652],{"__ignoreMap":178},[220,47637,47638,47640,47642],{"class":222,"line":223},[220,47639,343],{"class":264},[220,47641,347],{"class":346},[220,47643,359],{"class":264},[220,47645,47646,47648,47650],{"class":222,"line":179},[220,47647,364],{"class":264},[220,47649,47611],{"class":346},[220,47651,386],{"class":264},[220,47653,47654,47656,47658],{"class":222,"line":389},[220,47655,402],{"class":264},[220,47657,347],{"class":346},[220,47659,359],{"class":264},[212,47661,47662],{"className":409,"code":47633,"language":411,"meta":178,"style":178},[99,47663,47664,47672,47680],{"__ignoreMap":178},[220,47665,47666,47668,47670],{"class":222,"line":223},[220,47667,343],{"class":264},[220,47669,347],{"class":420},[220,47671,359],{"class":264},[220,47673,47674,47676,47678],{"class":222,"line":179},[220,47675,364],{"class":264},[220,47677,47611],{"class":420},[220,47679,386],{"class":264},[220,47681,47682,47684,47686],{"class":222,"line":389},[220,47683,402],{"class":264},[220,47685,347],{"class":420},[220,47687,359],{"class":264},[212,47689,47690],{"className":2844,"code":47633,"language":2846,"meta":178,"style":178},[99,47691,47692,47700,47708],{"__ignoreMap":178},[220,47693,47694,47696,47698],{"class":222,"line":223},[220,47695,343],{"class":264},[220,47697,347],{"class":420},[220,47699,359],{"class":264},[220,47701,47702,47704,47706],{"class":222,"line":179},[220,47703,364],{"class":264},[220,47705,47611],{"class":420},[220,47707,386],{"class":264},[220,47709,47710,47712,47714],{"class":222,"line":389},[220,47711,402],{"class":264},[220,47713,347],{"class":420},[220,47715,359],{"class":264},[212,47717,47718],{"className":468,"code":47633,"language":469,"meta":178,"style":178},[99,47719,47720,47728,47736],{"__ignoreMap":178},[220,47721,47722,47724,47726],{"class":222,"line":223},[220,47723,343],{"class":264},[220,47725,347],{"class":420},[220,47727,359],{"class":264},[220,47729,47730,47732,47734],{"class":222,"line":179},[220,47731,364],{"class":264},[220,47733,47611],{"class":420},[220,47735,386],{"class":264},[220,47737,47738,47740,47742],{"class":222,"line":389},[220,47739,402],{"class":264},[220,47741,347],{"class":420},[220,47743,359],{"class":264},[212,47745,47747],{"className":251,"code":47746,"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,47748,47749,47759,47763,47777,47781,47790,47794],{"__ignoreMap":178},[220,47750,47751,47753,47755,47757],{"class":222,"line":223},[220,47752,261],{"class":260},[220,47754,11507],{"class":264},[220,47756,268],{"class":260},[220,47758,4007],{"class":230},[220,47760,47761],{"class":222,"line":179},[220,47762,647],{"emptyLinePlaceholder":194},[220,47764,47765,47767,47769,47771,47773,47775],{"class":222,"line":389},[220,47766,1735],{"class":260},[220,47768,1738],{"class":420},[220,47770,1741],{"class":260},[220,47772,1744],{"class":260},[220,47774,1747],{"class":226},[220,47776,1750],{"class":264},[220,47778,47779],{"class":222,"line":399},[220,47780,1765],{"class":264},[220,47782,47783,47785,47788],{"class":222,"line":644},[220,47784,1770],{"class":264},[220,47786,47787],{"class":230},"'FloatingParticles'",[220,47789,2465],{"class":264},[220,47791,47792],{"class":222,"line":650},[220,47793,1787],{"class":264},[220,47795,47796],{"class":222,"line":656},[220,47797,1792],{"class":264},[1504,47799,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":47801},[47802,47803],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffloatingparticles",{"title":47611,"description":47619},"docs\u002Fcomponents\u002FFloatingParticles","2vzJ2ZLCZ_o9DprZbQ9-7pRvNJ0fcraR48tKiBUaJNs",{"id":47810,"title":47811,"body":47812,"category":33391,"componentType":25878,"description":47819,"extension":191,"meta":48080,"navigation":194,"path":48081,"requiresChild":194,"seo":48082,"stem":48083,"__hash__":48084},"components\u002Fdocs\u002Fcomponents\u002FFlowField.md","FlowField",{"type":8,"value":47813,"toc":48076},[47814,47817,47820,47822,47824,47827,47829,48074],[11,47815,47811],{"id":47816},"flowfield",[15,47818,47819],{},"Fluid-like distortion with constant smooth motion",[31906,47821],{"component":47811},[23,47823,31910],{"id":26528},[31912,47825],{":props":47826},"[{\"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,47828,31918],{"id":31917},[246,47830,47831,47876,47920,47964,48008],{":tabs":1557},[212,47832,47834],{"className":334,"code":47833,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowField>\n \u003CCircle \u002F>\n \u003C\u002FFlowField>\n\u003C\u002FShader>\n",[99,47835,47836,47844,47852,47860,47868],{"__ignoreMap":178},[220,47837,47838,47840,47842],{"class":222,"line":223},[220,47839,343],{"class":264},[220,47841,347],{"class":346},[220,47843,359],{"class":264},[220,47845,47846,47848,47850],{"class":222,"line":179},[220,47847,364],{"class":264},[220,47849,47811],{"class":346},[220,47851,359],{"class":264},[220,47853,47854,47856,47858],{"class":222,"line":389},[220,47855,2550],{"class":264},[220,47857,2553],{"class":346},[220,47859,386],{"class":264},[220,47861,47862,47864,47866],{"class":222,"line":399},[220,47863,2567],{"class":264},[220,47865,47811],{"class":346},[220,47867,359],{"class":264},[220,47869,47870,47872,47874],{"class":222,"line":644},[220,47871,402],{"class":264},[220,47873,347],{"class":346},[220,47875,359],{"class":264},[212,47877,47878],{"className":409,"code":47833,"language":411,"meta":178,"style":178},[99,47879,47880,47888,47896,47904,47912],{"__ignoreMap":178},[220,47881,47882,47884,47886],{"class":222,"line":223},[220,47883,343],{"class":264},[220,47885,347],{"class":420},[220,47887,359],{"class":264},[220,47889,47890,47892,47894],{"class":222,"line":179},[220,47891,364],{"class":264},[220,47893,47811],{"class":420},[220,47895,359],{"class":264},[220,47897,47898,47900,47902],{"class":222,"line":389},[220,47899,2550],{"class":264},[220,47901,2553],{"class":420},[220,47903,386],{"class":264},[220,47905,47906,47908,47910],{"class":222,"line":399},[220,47907,2567],{"class":264},[220,47909,47811],{"class":420},[220,47911,359],{"class":264},[220,47913,47914,47916,47918],{"class":222,"line":644},[220,47915,402],{"class":264},[220,47917,347],{"class":420},[220,47919,359],{"class":264},[212,47921,47922],{"className":2844,"code":47833,"language":2846,"meta":178,"style":178},[99,47923,47924,47932,47940,47948,47956],{"__ignoreMap":178},[220,47925,47926,47928,47930],{"class":222,"line":223},[220,47927,343],{"class":264},[220,47929,347],{"class":420},[220,47931,359],{"class":264},[220,47933,47934,47936,47938],{"class":222,"line":179},[220,47935,364],{"class":264},[220,47937,47811],{"class":420},[220,47939,359],{"class":264},[220,47941,47942,47944,47946],{"class":222,"line":389},[220,47943,2550],{"class":264},[220,47945,2553],{"class":420},[220,47947,386],{"class":264},[220,47949,47950,47952,47954],{"class":222,"line":399},[220,47951,2567],{"class":264},[220,47953,47811],{"class":420},[220,47955,359],{"class":264},[220,47957,47958,47960,47962],{"class":222,"line":644},[220,47959,402],{"class":264},[220,47961,347],{"class":420},[220,47963,359],{"class":264},[212,47965,47966],{"className":468,"code":47833,"language":469,"meta":178,"style":178},[99,47967,47968,47976,47984,47992,48000],{"__ignoreMap":178},[220,47969,47970,47972,47974],{"class":222,"line":223},[220,47971,343],{"class":264},[220,47973,347],{"class":420},[220,47975,359],{"class":264},[220,47977,47978,47980,47982],{"class":222,"line":179},[220,47979,364],{"class":264},[220,47981,47811],{"class":420},[220,47983,359],{"class":264},[220,47985,47986,47988,47990],{"class":222,"line":389},[220,47987,2550],{"class":264},[220,47989,2553],{"class":420},[220,47991,386],{"class":264},[220,47993,47994,47996,47998],{"class":222,"line":399},[220,47995,2567],{"class":264},[220,47997,47811],{"class":420},[220,47999,359],{"class":264},[220,48001,48002,48004,48006],{"class":222,"line":644},[220,48003,402],{"class":264},[220,48005,347],{"class":420},[220,48007,359],{"class":264},[212,48009,48011],{"className":251,"code":48010,"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,48012,48013,48023,48027,48041,48045,48054,48062,48066,48070],{"__ignoreMap":178},[220,48014,48015,48017,48019,48021],{"class":222,"line":223},[220,48016,261],{"class":260},[220,48018,11507],{"class":264},[220,48020,268],{"class":260},[220,48022,4007],{"class":230},[220,48024,48025],{"class":222,"line":179},[220,48026,647],{"emptyLinePlaceholder":194},[220,48028,48029,48031,48033,48035,48037,48039],{"class":222,"line":389},[220,48030,1735],{"class":260},[220,48032,1738],{"class":420},[220,48034,1741],{"class":260},[220,48036,1744],{"class":260},[220,48038,1747],{"class":226},[220,48040,1750],{"class":264},[220,48042,48043],{"class":222,"line":399},[220,48044,1765],{"class":264},[220,48046,48047,48049,48052],{"class":222,"line":644},[220,48048,1770],{"class":264},[220,48050,48051],{"class":230},"'FlowField'",[220,48053,7004],{"class":264},[220,48055,48056,48058,48060],{"class":222,"line":650},[220,48057,7009],{"class":264},[220,48059,3206],{"class":230},[220,48061,2465],{"class":264},[220,48063,48064],{"class":222,"line":656},[220,48065,7026],{"class":264},[220,48067,48068],{"class":222,"line":673},[220,48069,1787],{"class":264},[220,48071,48072],{"class":222,"line":682},[220,48073,1792],{"class":264},[1504,48075,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":48077},[48078,48079],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fflowfield",{"title":47811,"description":47819},"docs\u002Fcomponents\u002FFlowField","40vSshKVy-Ly_AqwMp3agSZpmzbaniueXLxqEv9znFc",{"id":48086,"title":48087,"body":48088,"category":15903,"componentType":25872,"description":48095,"extension":191,"meta":48373,"navigation":194,"path":48374,"requiresChild":32525,"seo":48375,"stem":48376,"__hash__":48377},"components\u002Fdocs\u002Fcomponents\u002FFlower.md","Flower",{"type":8,"value":48089,"toc":48369},[48090,48093,48096,48098,48100,48103,48105,48367],[11,48091,48087],{"id":48092},"flower",[15,48094,48095],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[31906,48097],{"component":48087},[23,48099,31910],{"id":26528},[31912,48101],{":props":48102},"[{\"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,48104,31918],{"id":31917},[246,48106,48107,48156,48207,48255,48305],{":tabs":1557},[212,48108,48110],{"className":334,"code":48109,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,48111,48112,48120,48127,48135,48144,48148],{"__ignoreMap":178},[220,48113,48114,48116,48118],{"class":222,"line":223},[220,48115,343],{"class":264},[220,48117,347],{"class":346},[220,48119,359],{"class":264},[220,48121,48122,48124],{"class":222,"line":179},[220,48123,364],{"class":264},[220,48125,48126],{"class":346},"Flower\n",[220,48128,48129,48131,48133],{"class":222,"line":389},[220,48130,9630],{"class":226},[220,48132,353],{"class":264},[220,48134,9586],{"class":230},[220,48136,48137,48139,48141],{"class":222,"line":399},[220,48138,17400],{"class":226},[220,48140,353],{"class":264},[220,48142,48143],{"class":230},"\"0.4\"\n",[220,48145,48146],{"class":222,"line":644},[220,48147,1234],{"class":264},[220,48149,48150,48152,48154],{"class":222,"line":650},[220,48151,402],{"class":264},[220,48153,347],{"class":346},[220,48155,359],{"class":264},[212,48157,48159],{"className":409,"code":48158,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,48160,48161,48169,48175,48183,48195,48199],{"__ignoreMap":178},[220,48162,48163,48165,48167],{"class":222,"line":223},[220,48164,343],{"class":264},[220,48166,347],{"class":420},[220,48168,359],{"class":264},[220,48170,48171,48173],{"class":222,"line":179},[220,48172,364],{"class":264},[220,48174,48126],{"class":420},[220,48176,48177,48179,48181],{"class":222,"line":389},[220,48178,9630],{"class":226},[220,48180,353],{"class":260},[220,48182,9586],{"class":230},[220,48184,48185,48187,48189,48191,48193],{"class":222,"line":399},[220,48186,9640],{"class":226},[220,48188,353],{"class":260},[220,48190,743],{"class":264},[220,48192,8244],{"class":420},[220,48194,749],{"class":264},[220,48196,48197],{"class":222,"line":644},[220,48198,1234],{"class":264},[220,48200,48201,48203,48205],{"class":222,"line":650},[220,48202,402],{"class":264},[220,48204,347],{"class":420},[220,48206,359],{"class":264},[212,48208,48209],{"className":2844,"code":48158,"language":2846,"meta":178,"style":178},[99,48210,48211,48219,48225,48233,48243,48247],{"__ignoreMap":178},[220,48212,48213,48215,48217],{"class":222,"line":223},[220,48214,343],{"class":264},[220,48216,347],{"class":420},[220,48218,359],{"class":264},[220,48220,48221,48223],{"class":222,"line":179},[220,48222,364],{"class":264},[220,48224,48126],{"class":420},[220,48226,48227,48229,48231],{"class":222,"line":389},[220,48228,9630],{"class":226},[220,48230,353],{"class":264},[220,48232,9586],{"class":230},[220,48234,48235,48237,48239,48241],{"class":222,"line":399},[220,48236,9640],{"class":226},[220,48238,29866],{"class":264},[220,48240,8244],{"class":420},[220,48242,749],{"class":264},[220,48244,48245],{"class":222,"line":644},[220,48246,1234],{"class":264},[220,48248,48249,48251,48253],{"class":222,"line":650},[220,48250,402],{"class":264},[220,48252,347],{"class":420},[220,48254,359],{"class":264},[212,48256,48257],{"className":468,"code":48158,"language":469,"meta":178,"style":178},[99,48258,48259,48267,48273,48281,48293,48297],{"__ignoreMap":178},[220,48260,48261,48263,48265],{"class":222,"line":223},[220,48262,343],{"class":264},[220,48264,347],{"class":420},[220,48266,359],{"class":264},[220,48268,48269,48271],{"class":222,"line":179},[220,48270,364],{"class":264},[220,48272,48126],{"class":420},[220,48274,48275,48277,48279],{"class":222,"line":389},[220,48276,9630],{"class":226},[220,48278,353],{"class":260},[220,48280,9586],{"class":230},[220,48282,48283,48285,48287,48289,48291],{"class":222,"line":399},[220,48284,9640],{"class":226},[220,48286,353],{"class":260},[220,48288,743],{"class":264},[220,48290,8244],{"class":420},[220,48292,749],{"class":264},[220,48294,48295],{"class":222,"line":644},[220,48296,1234],{"class":264},[220,48298,48299,48301,48303],{"class":222,"line":650},[220,48300,402],{"class":264},[220,48302,347],{"class":420},[220,48304,359],{"class":264},[212,48306,48308],{"className":251,"code":48307,"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,48309,48310,48320,48324,48338,48342,48359,48363],{"__ignoreMap":178},[220,48311,48312,48314,48316,48318],{"class":222,"line":223},[220,48313,261],{"class":260},[220,48315,11507],{"class":264},[220,48317,268],{"class":260},[220,48319,4007],{"class":230},[220,48321,48322],{"class":222,"line":179},[220,48323,647],{"emptyLinePlaceholder":194},[220,48325,48326,48328,48330,48332,48334,48336],{"class":222,"line":389},[220,48327,1735],{"class":260},[220,48329,1738],{"class":420},[220,48331,1741],{"class":260},[220,48333,1744],{"class":260},[220,48335,1747],{"class":226},[220,48337,1750],{"class":264},[220,48339,48340],{"class":222,"line":399},[220,48341,1765],{"class":264},[220,48343,48344,48346,48349,48351,48353,48355,48357],{"class":222,"line":644},[220,48345,1770],{"class":264},[220,48347,48348],{"class":230},"'Flower'",[220,48350,1776],{"class":264},[220,48352,10164],{"class":230},[220,48354,6561],{"class":264},[220,48356,8244],{"class":420},[220,48358,1782],{"class":264},[220,48360,48361],{"class":222,"line":650},[220,48362,1787],{"class":264},[220,48364,48365],{"class":222,"line":656},[220,48366,1792],{"class":264},[1504,48368,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":48370},[48371,48372],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fflower",{"title":48087,"description":48095},"docs\u002Fcomponents\u002FFlower","OqfngtIO-Ht_II6zs76vhQxPvu_BYR_MpwimfO6G-t4",{"id":48379,"title":48380,"body":48381,"category":33058,"componentType":25872,"description":48388,"extension":191,"meta":48573,"navigation":194,"path":48574,"requiresChild":32525,"seo":48575,"stem":48576,"__hash__":48577},"components\u002Fdocs\u002Fcomponents\u002FFlowingGradient.md","FlowingGradient",{"type":8,"value":48382,"toc":48569},[48383,48386,48389,48391,48393,48396,48398,48567],[11,48384,48380],{"id":48385},"flowinggradient",[15,48387,48388],{},"Liquid silk gradient with organic flowing color bands",[31906,48390],{"component":48380},[23,48392,31910],{"id":26528},[31912,48394],{":props":48395},"[{\"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,48397,31918],{"id":31917},[246,48399,48400,48429,48457,48485,48513],{":tabs":1557},[212,48401,48403],{"className":334,"code":48402,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlowingGradient \u002F>\n\u003C\u002FShader>\n",[99,48404,48405,48413,48421],{"__ignoreMap":178},[220,48406,48407,48409,48411],{"class":222,"line":223},[220,48408,343],{"class":264},[220,48410,347],{"class":346},[220,48412,359],{"class":264},[220,48414,48415,48417,48419],{"class":222,"line":179},[220,48416,364],{"class":264},[220,48418,48380],{"class":346},[220,48420,386],{"class":264},[220,48422,48423,48425,48427],{"class":222,"line":389},[220,48424,402],{"class":264},[220,48426,347],{"class":346},[220,48428,359],{"class":264},[212,48430,48431],{"className":409,"code":48402,"language":411,"meta":178,"style":178},[99,48432,48433,48441,48449],{"__ignoreMap":178},[220,48434,48435,48437,48439],{"class":222,"line":223},[220,48436,343],{"class":264},[220,48438,347],{"class":420},[220,48440,359],{"class":264},[220,48442,48443,48445,48447],{"class":222,"line":179},[220,48444,364],{"class":264},[220,48446,48380],{"class":420},[220,48448,386],{"class":264},[220,48450,48451,48453,48455],{"class":222,"line":389},[220,48452,402],{"class":264},[220,48454,347],{"class":420},[220,48456,359],{"class":264},[212,48458,48459],{"className":2844,"code":48402,"language":2846,"meta":178,"style":178},[99,48460,48461,48469,48477],{"__ignoreMap":178},[220,48462,48463,48465,48467],{"class":222,"line":223},[220,48464,343],{"class":264},[220,48466,347],{"class":420},[220,48468,359],{"class":264},[220,48470,48471,48473,48475],{"class":222,"line":179},[220,48472,364],{"class":264},[220,48474,48380],{"class":420},[220,48476,386],{"class":264},[220,48478,48479,48481,48483],{"class":222,"line":389},[220,48480,402],{"class":264},[220,48482,347],{"class":420},[220,48484,359],{"class":264},[212,48486,48487],{"className":468,"code":48402,"language":469,"meta":178,"style":178},[99,48488,48489,48497,48505],{"__ignoreMap":178},[220,48490,48491,48493,48495],{"class":222,"line":223},[220,48492,343],{"class":264},[220,48494,347],{"class":420},[220,48496,359],{"class":264},[220,48498,48499,48501,48503],{"class":222,"line":179},[220,48500,364],{"class":264},[220,48502,48380],{"class":420},[220,48504,386],{"class":264},[220,48506,48507,48509,48511],{"class":222,"line":389},[220,48508,402],{"class":264},[220,48510,347],{"class":420},[220,48512,359],{"class":264},[212,48514,48516],{"className":251,"code":48515,"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,48517,48518,48528,48532,48546,48550,48559,48563],{"__ignoreMap":178},[220,48519,48520,48522,48524,48526],{"class":222,"line":223},[220,48521,261],{"class":260},[220,48523,11507],{"class":264},[220,48525,268],{"class":260},[220,48527,4007],{"class":230},[220,48529,48530],{"class":222,"line":179},[220,48531,647],{"emptyLinePlaceholder":194},[220,48533,48534,48536,48538,48540,48542,48544],{"class":222,"line":389},[220,48535,1735],{"class":260},[220,48537,1738],{"class":420},[220,48539,1741],{"class":260},[220,48541,1744],{"class":260},[220,48543,1747],{"class":226},[220,48545,1750],{"class":264},[220,48547,48548],{"class":222,"line":399},[220,48549,1765],{"class":264},[220,48551,48552,48554,48557],{"class":222,"line":644},[220,48553,1770],{"class":264},[220,48555,48556],{"class":230},"'FlowingGradient'",[220,48558,2465],{"class":264},[220,48560,48561],{"class":222,"line":650},[220,48562,1787],{"class":264},[220,48564,48565],{"class":222,"line":656},[220,48566,1792],{"class":264},[1504,48568,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":48570},[48571,48572],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fflowinggradient",{"title":48380,"description":48388},"docs\u002Fcomponents\u002FFlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":48579,"title":48580,"body":48581,"category":33391,"componentType":25878,"description":48588,"extension":191,"meta":48849,"navigation":194,"path":48850,"requiresChild":194,"seo":48851,"stem":48852,"__hash__":48853},"components\u002Fdocs\u002Fcomponents\u002FFlutedGlass.md","FlutedGlass",{"type":8,"value":48582,"toc":48845},[48583,48586,48589,48591,48593,48596,48598,48843],[11,48584,48580],{"id":48585},"flutedglass",[15,48587,48588],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[31906,48590],{"component":48580},[23,48592,31910],{"id":26528},[31912,48594],{":props":48595},"[{\"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,48597,31918],{"id":31917},[246,48599,48600,48645,48689,48733,48777],{":tabs":1557},[212,48601,48603],{"className":334,"code":48602,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle \u002F>\n \u003C\u002FFlutedGlass>\n\u003C\u002FShader>\n",[99,48604,48605,48613,48621,48629,48637],{"__ignoreMap":178},[220,48606,48607,48609,48611],{"class":222,"line":223},[220,48608,343],{"class":264},[220,48610,347],{"class":346},[220,48612,359],{"class":264},[220,48614,48615,48617,48619],{"class":222,"line":179},[220,48616,364],{"class":264},[220,48618,48580],{"class":346},[220,48620,359],{"class":264},[220,48622,48623,48625,48627],{"class":222,"line":389},[220,48624,2550],{"class":264},[220,48626,2553],{"class":346},[220,48628,386],{"class":264},[220,48630,48631,48633,48635],{"class":222,"line":399},[220,48632,2567],{"class":264},[220,48634,48580],{"class":346},[220,48636,359],{"class":264},[220,48638,48639,48641,48643],{"class":222,"line":644},[220,48640,402],{"class":264},[220,48642,347],{"class":346},[220,48644,359],{"class":264},[212,48646,48647],{"className":409,"code":48602,"language":411,"meta":178,"style":178},[99,48648,48649,48657,48665,48673,48681],{"__ignoreMap":178},[220,48650,48651,48653,48655],{"class":222,"line":223},[220,48652,343],{"class":264},[220,48654,347],{"class":420},[220,48656,359],{"class":264},[220,48658,48659,48661,48663],{"class":222,"line":179},[220,48660,364],{"class":264},[220,48662,48580],{"class":420},[220,48664,359],{"class":264},[220,48666,48667,48669,48671],{"class":222,"line":389},[220,48668,2550],{"class":264},[220,48670,2553],{"class":420},[220,48672,386],{"class":264},[220,48674,48675,48677,48679],{"class":222,"line":399},[220,48676,2567],{"class":264},[220,48678,48580],{"class":420},[220,48680,359],{"class":264},[220,48682,48683,48685,48687],{"class":222,"line":644},[220,48684,402],{"class":264},[220,48686,347],{"class":420},[220,48688,359],{"class":264},[212,48690,48691],{"className":2844,"code":48602,"language":2846,"meta":178,"style":178},[99,48692,48693,48701,48709,48717,48725],{"__ignoreMap":178},[220,48694,48695,48697,48699],{"class":222,"line":223},[220,48696,343],{"class":264},[220,48698,347],{"class":420},[220,48700,359],{"class":264},[220,48702,48703,48705,48707],{"class":222,"line":179},[220,48704,364],{"class":264},[220,48706,48580],{"class":420},[220,48708,359],{"class":264},[220,48710,48711,48713,48715],{"class":222,"line":389},[220,48712,2550],{"class":264},[220,48714,2553],{"class":420},[220,48716,386],{"class":264},[220,48718,48719,48721,48723],{"class":222,"line":399},[220,48720,2567],{"class":264},[220,48722,48580],{"class":420},[220,48724,359],{"class":264},[220,48726,48727,48729,48731],{"class":222,"line":644},[220,48728,402],{"class":264},[220,48730,347],{"class":420},[220,48732,359],{"class":264},[212,48734,48735],{"className":468,"code":48602,"language":469,"meta":178,"style":178},[99,48736,48737,48745,48753,48761,48769],{"__ignoreMap":178},[220,48738,48739,48741,48743],{"class":222,"line":223},[220,48740,343],{"class":264},[220,48742,347],{"class":420},[220,48744,359],{"class":264},[220,48746,48747,48749,48751],{"class":222,"line":179},[220,48748,364],{"class":264},[220,48750,48580],{"class":420},[220,48752,359],{"class":264},[220,48754,48755,48757,48759],{"class":222,"line":389},[220,48756,2550],{"class":264},[220,48758,2553],{"class":420},[220,48760,386],{"class":264},[220,48762,48763,48765,48767],{"class":222,"line":399},[220,48764,2567],{"class":264},[220,48766,48580],{"class":420},[220,48768,359],{"class":264},[220,48770,48771,48773,48775],{"class":222,"line":644},[220,48772,402],{"class":264},[220,48774,347],{"class":420},[220,48776,359],{"class":264},[212,48778,48780],{"className":251,"code":48779,"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,48781,48782,48792,48796,48810,48814,48823,48831,48835,48839],{"__ignoreMap":178},[220,48783,48784,48786,48788,48790],{"class":222,"line":223},[220,48785,261],{"class":260},[220,48787,11507],{"class":264},[220,48789,268],{"class":260},[220,48791,4007],{"class":230},[220,48793,48794],{"class":222,"line":179},[220,48795,647],{"emptyLinePlaceholder":194},[220,48797,48798,48800,48802,48804,48806,48808],{"class":222,"line":389},[220,48799,1735],{"class":260},[220,48801,1738],{"class":420},[220,48803,1741],{"class":260},[220,48805,1744],{"class":260},[220,48807,1747],{"class":226},[220,48809,1750],{"class":264},[220,48811,48812],{"class":222,"line":399},[220,48813,1765],{"class":264},[220,48815,48816,48818,48821],{"class":222,"line":644},[220,48817,1770],{"class":264},[220,48819,48820],{"class":230},"'FlutedGlass'",[220,48822,7004],{"class":264},[220,48824,48825,48827,48829],{"class":222,"line":650},[220,48826,7009],{"class":264},[220,48828,3206],{"class":230},[220,48830,2465],{"class":264},[220,48832,48833],{"class":222,"line":656},[220,48834,7026],{"class":264},[220,48836,48837],{"class":222,"line":673},[220,48838,1787],{"class":264},[220,48840,48841],{"class":222,"line":682},[220,48842,1792],{"class":264},[1504,48844,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":48846},[48847,48848],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fflutedglass",{"title":48580,"description":48588},"docs\u002Fcomponents\u002FFlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":48855,"title":48856,"body":48857,"category":35554,"componentType":25872,"description":48864,"extension":191,"meta":49049,"navigation":194,"path":49050,"requiresChild":32525,"seo":49051,"stem":49052,"__hash__":49053},"components\u002Fdocs\u002Fcomponents\u002FFog.md","Fog",{"type":8,"value":48858,"toc":49045},[48859,48862,48865,48867,48869,48872,48874,49043],[11,48860,48856],{"id":48861},"fog",[15,48863,48864],{},"Fog that fills the screen and interacts with the mouse",[31906,48866],{"component":48856},[23,48868,31910],{"id":26528},[31912,48870],{":props":48871},"[{\"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,48873,31918],{"id":31917},[246,48875,48876,48905,48933,48961,48989],{":tabs":1557},[212,48877,48879],{"className":334,"code":48878,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFog \u002F>\n\u003C\u002FShader>\n",[99,48880,48881,48889,48897],{"__ignoreMap":178},[220,48882,48883,48885,48887],{"class":222,"line":223},[220,48884,343],{"class":264},[220,48886,347],{"class":346},[220,48888,359],{"class":264},[220,48890,48891,48893,48895],{"class":222,"line":179},[220,48892,364],{"class":264},[220,48894,48856],{"class":346},[220,48896,386],{"class":264},[220,48898,48899,48901,48903],{"class":222,"line":389},[220,48900,402],{"class":264},[220,48902,347],{"class":346},[220,48904,359],{"class":264},[212,48906,48907],{"className":409,"code":48878,"language":411,"meta":178,"style":178},[99,48908,48909,48917,48925],{"__ignoreMap":178},[220,48910,48911,48913,48915],{"class":222,"line":223},[220,48912,343],{"class":264},[220,48914,347],{"class":420},[220,48916,359],{"class":264},[220,48918,48919,48921,48923],{"class":222,"line":179},[220,48920,364],{"class":264},[220,48922,48856],{"class":420},[220,48924,386],{"class":264},[220,48926,48927,48929,48931],{"class":222,"line":389},[220,48928,402],{"class":264},[220,48930,347],{"class":420},[220,48932,359],{"class":264},[212,48934,48935],{"className":2844,"code":48878,"language":2846,"meta":178,"style":178},[99,48936,48937,48945,48953],{"__ignoreMap":178},[220,48938,48939,48941,48943],{"class":222,"line":223},[220,48940,343],{"class":264},[220,48942,347],{"class":420},[220,48944,359],{"class":264},[220,48946,48947,48949,48951],{"class":222,"line":179},[220,48948,364],{"class":264},[220,48950,48856],{"class":420},[220,48952,386],{"class":264},[220,48954,48955,48957,48959],{"class":222,"line":389},[220,48956,402],{"class":264},[220,48958,347],{"class":420},[220,48960,359],{"class":264},[212,48962,48963],{"className":468,"code":48878,"language":469,"meta":178,"style":178},[99,48964,48965,48973,48981],{"__ignoreMap":178},[220,48966,48967,48969,48971],{"class":222,"line":223},[220,48968,343],{"class":264},[220,48970,347],{"class":420},[220,48972,359],{"class":264},[220,48974,48975,48977,48979],{"class":222,"line":179},[220,48976,364],{"class":264},[220,48978,48856],{"class":420},[220,48980,386],{"class":264},[220,48982,48983,48985,48987],{"class":222,"line":389},[220,48984,402],{"class":264},[220,48986,347],{"class":420},[220,48988,359],{"class":264},[212,48990,48992],{"className":251,"code":48991,"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,48993,48994,49004,49008,49022,49026,49035,49039],{"__ignoreMap":178},[220,48995,48996,48998,49000,49002],{"class":222,"line":223},[220,48997,261],{"class":260},[220,48999,11507],{"class":264},[220,49001,268],{"class":260},[220,49003,4007],{"class":230},[220,49005,49006],{"class":222,"line":179},[220,49007,647],{"emptyLinePlaceholder":194},[220,49009,49010,49012,49014,49016,49018,49020],{"class":222,"line":389},[220,49011,1735],{"class":260},[220,49013,1738],{"class":420},[220,49015,1741],{"class":260},[220,49017,1744],{"class":260},[220,49019,1747],{"class":226},[220,49021,1750],{"class":264},[220,49023,49024],{"class":222,"line":399},[220,49025,1765],{"class":264},[220,49027,49028,49030,49033],{"class":222,"line":644},[220,49029,1770],{"class":264},[220,49031,49032],{"class":230},"'Fog'",[220,49034,2465],{"class":264},[220,49036,49037],{"class":222,"line":650},[220,49038,1787],{"class":264},[220,49040,49041],{"class":222,"line":656},[220,49042,1792],{"class":264},[1504,49044,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":49046},[49047,49048],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffog",{"title":48856,"description":48864},"docs\u002Fcomponents\u002FFog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":49055,"title":49056,"body":49057,"category":33391,"componentType":25878,"description":49064,"extension":191,"meta":49325,"navigation":194,"path":49326,"requiresChild":194,"seo":49327,"stem":49328,"__hash__":49329},"components\u002Fdocs\u002Fcomponents\u002FForm3D.md","Form3D",{"type":8,"value":49058,"toc":49321},[49059,49062,49065,49067,49069,49072,49074,49319],[11,49060,49056],{"id":49061},"form3d",[15,49063,49064],{},"Wraps child content onto a 3D raymarched shape with lighting.",[31906,49066],{"component":49056},[23,49068,31910],{"id":26528},[31912,49070],{":props":49071},"[{\"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,49073,31918],{"id":31917},[246,49075,49076,49121,49165,49209,49253],{":tabs":1557},[212,49077,49079],{"className":334,"code":49078,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CForm3D>\n \u003CCircle \u002F>\n \u003C\u002FForm3D>\n\u003C\u002FShader>\n",[99,49080,49081,49089,49097,49105,49113],{"__ignoreMap":178},[220,49082,49083,49085,49087],{"class":222,"line":223},[220,49084,343],{"class":264},[220,49086,347],{"class":346},[220,49088,359],{"class":264},[220,49090,49091,49093,49095],{"class":222,"line":179},[220,49092,364],{"class":264},[220,49094,49056],{"class":346},[220,49096,359],{"class":264},[220,49098,49099,49101,49103],{"class":222,"line":389},[220,49100,2550],{"class":264},[220,49102,2553],{"class":346},[220,49104,386],{"class":264},[220,49106,49107,49109,49111],{"class":222,"line":399},[220,49108,2567],{"class":264},[220,49110,49056],{"class":346},[220,49112,359],{"class":264},[220,49114,49115,49117,49119],{"class":222,"line":644},[220,49116,402],{"class":264},[220,49118,347],{"class":346},[220,49120,359],{"class":264},[212,49122,49123],{"className":409,"code":49078,"language":411,"meta":178,"style":178},[99,49124,49125,49133,49141,49149,49157],{"__ignoreMap":178},[220,49126,49127,49129,49131],{"class":222,"line":223},[220,49128,343],{"class":264},[220,49130,347],{"class":420},[220,49132,359],{"class":264},[220,49134,49135,49137,49139],{"class":222,"line":179},[220,49136,364],{"class":264},[220,49138,49056],{"class":420},[220,49140,359],{"class":264},[220,49142,49143,49145,49147],{"class":222,"line":389},[220,49144,2550],{"class":264},[220,49146,2553],{"class":420},[220,49148,386],{"class":264},[220,49150,49151,49153,49155],{"class":222,"line":399},[220,49152,2567],{"class":264},[220,49154,49056],{"class":420},[220,49156,359],{"class":264},[220,49158,49159,49161,49163],{"class":222,"line":644},[220,49160,402],{"class":264},[220,49162,347],{"class":420},[220,49164,359],{"class":264},[212,49166,49167],{"className":2844,"code":49078,"language":2846,"meta":178,"style":178},[99,49168,49169,49177,49185,49193,49201],{"__ignoreMap":178},[220,49170,49171,49173,49175],{"class":222,"line":223},[220,49172,343],{"class":264},[220,49174,347],{"class":420},[220,49176,359],{"class":264},[220,49178,49179,49181,49183],{"class":222,"line":179},[220,49180,364],{"class":264},[220,49182,49056],{"class":420},[220,49184,359],{"class":264},[220,49186,49187,49189,49191],{"class":222,"line":389},[220,49188,2550],{"class":264},[220,49190,2553],{"class":420},[220,49192,386],{"class":264},[220,49194,49195,49197,49199],{"class":222,"line":399},[220,49196,2567],{"class":264},[220,49198,49056],{"class":420},[220,49200,359],{"class":264},[220,49202,49203,49205,49207],{"class":222,"line":644},[220,49204,402],{"class":264},[220,49206,347],{"class":420},[220,49208,359],{"class":264},[212,49210,49211],{"className":468,"code":49078,"language":469,"meta":178,"style":178},[99,49212,49213,49221,49229,49237,49245],{"__ignoreMap":178},[220,49214,49215,49217,49219],{"class":222,"line":223},[220,49216,343],{"class":264},[220,49218,347],{"class":420},[220,49220,359],{"class":264},[220,49222,49223,49225,49227],{"class":222,"line":179},[220,49224,364],{"class":264},[220,49226,49056],{"class":420},[220,49228,359],{"class":264},[220,49230,49231,49233,49235],{"class":222,"line":389},[220,49232,2550],{"class":264},[220,49234,2553],{"class":420},[220,49236,386],{"class":264},[220,49238,49239,49241,49243],{"class":222,"line":399},[220,49240,2567],{"class":264},[220,49242,49056],{"class":420},[220,49244,359],{"class":264},[220,49246,49247,49249,49251],{"class":222,"line":644},[220,49248,402],{"class":264},[220,49250,347],{"class":420},[220,49252,359],{"class":264},[212,49254,49256],{"className":251,"code":49255,"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,49257,49258,49268,49272,49286,49290,49299,49307,49311,49315],{"__ignoreMap":178},[220,49259,49260,49262,49264,49266],{"class":222,"line":223},[220,49261,261],{"class":260},[220,49263,11507],{"class":264},[220,49265,268],{"class":260},[220,49267,4007],{"class":230},[220,49269,49270],{"class":222,"line":179},[220,49271,647],{"emptyLinePlaceholder":194},[220,49273,49274,49276,49278,49280,49282,49284],{"class":222,"line":389},[220,49275,1735],{"class":260},[220,49277,1738],{"class":420},[220,49279,1741],{"class":260},[220,49281,1744],{"class":260},[220,49283,1747],{"class":226},[220,49285,1750],{"class":264},[220,49287,49288],{"class":222,"line":399},[220,49289,1765],{"class":264},[220,49291,49292,49294,49297],{"class":222,"line":644},[220,49293,1770],{"class":264},[220,49295,49296],{"class":230},"'Form3D'",[220,49298,7004],{"class":264},[220,49300,49301,49303,49305],{"class":222,"line":650},[220,49302,7009],{"class":264},[220,49304,3206],{"class":230},[220,49306,2465],{"class":264},[220,49308,49309],{"class":222,"line":656},[220,49310,7026],{"class":264},[220,49312,49313],{"class":222,"line":673},[220,49314,1787],{"class":264},[220,49316,49317],{"class":222,"line":682},[220,49318,1792],{"class":264},[1504,49320,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":49322},[49323,49324],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fform3d",{"title":49056,"description":49064},"docs\u002Fcomponents\u002FForm3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":49331,"title":49332,"body":49333,"category":33058,"componentType":25872,"description":49340,"extension":191,"meta":49525,"navigation":194,"path":49526,"requiresChild":32525,"seo":49527,"stem":49528,"__hash__":49529},"components\u002Fdocs\u002Fcomponents\u002FFractalNoise.md","FractalNoise",{"type":8,"value":49334,"toc":49521},[49335,49338,49341,49343,49345,49348,49350,49519],[11,49336,49332],{"id":49337},"fractalnoise",[15,49339,49340],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[31906,49342],{"component":49332},[23,49344,31910],{"id":26528},[31912,49346],{":props":49347},"[{\"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,49349,31918],{"id":31917},[246,49351,49352,49381,49409,49437,49465],{":tabs":1557},[212,49353,49355],{"className":334,"code":49354,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFractalNoise \u002F>\n\u003C\u002FShader>\n",[99,49356,49357,49365,49373],{"__ignoreMap":178},[220,49358,49359,49361,49363],{"class":222,"line":223},[220,49360,343],{"class":264},[220,49362,347],{"class":346},[220,49364,359],{"class":264},[220,49366,49367,49369,49371],{"class":222,"line":179},[220,49368,364],{"class":264},[220,49370,49332],{"class":346},[220,49372,386],{"class":264},[220,49374,49375,49377,49379],{"class":222,"line":389},[220,49376,402],{"class":264},[220,49378,347],{"class":346},[220,49380,359],{"class":264},[212,49382,49383],{"className":409,"code":49354,"language":411,"meta":178,"style":178},[99,49384,49385,49393,49401],{"__ignoreMap":178},[220,49386,49387,49389,49391],{"class":222,"line":223},[220,49388,343],{"class":264},[220,49390,347],{"class":420},[220,49392,359],{"class":264},[220,49394,49395,49397,49399],{"class":222,"line":179},[220,49396,364],{"class":264},[220,49398,49332],{"class":420},[220,49400,386],{"class":264},[220,49402,49403,49405,49407],{"class":222,"line":389},[220,49404,402],{"class":264},[220,49406,347],{"class":420},[220,49408,359],{"class":264},[212,49410,49411],{"className":2844,"code":49354,"language":2846,"meta":178,"style":178},[99,49412,49413,49421,49429],{"__ignoreMap":178},[220,49414,49415,49417,49419],{"class":222,"line":223},[220,49416,343],{"class":264},[220,49418,347],{"class":420},[220,49420,359],{"class":264},[220,49422,49423,49425,49427],{"class":222,"line":179},[220,49424,364],{"class":264},[220,49426,49332],{"class":420},[220,49428,386],{"class":264},[220,49430,49431,49433,49435],{"class":222,"line":389},[220,49432,402],{"class":264},[220,49434,347],{"class":420},[220,49436,359],{"class":264},[212,49438,49439],{"className":468,"code":49354,"language":469,"meta":178,"style":178},[99,49440,49441,49449,49457],{"__ignoreMap":178},[220,49442,49443,49445,49447],{"class":222,"line":223},[220,49444,343],{"class":264},[220,49446,347],{"class":420},[220,49448,359],{"class":264},[220,49450,49451,49453,49455],{"class":222,"line":179},[220,49452,364],{"class":264},[220,49454,49332],{"class":420},[220,49456,386],{"class":264},[220,49458,49459,49461,49463],{"class":222,"line":389},[220,49460,402],{"class":264},[220,49462,347],{"class":420},[220,49464,359],{"class":264},[212,49466,49468],{"className":251,"code":49467,"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,49469,49470,49480,49484,49498,49502,49511,49515],{"__ignoreMap":178},[220,49471,49472,49474,49476,49478],{"class":222,"line":223},[220,49473,261],{"class":260},[220,49475,11507],{"class":264},[220,49477,268],{"class":260},[220,49479,4007],{"class":230},[220,49481,49482],{"class":222,"line":179},[220,49483,647],{"emptyLinePlaceholder":194},[220,49485,49486,49488,49490,49492,49494,49496],{"class":222,"line":389},[220,49487,1735],{"class":260},[220,49489,1738],{"class":420},[220,49491,1741],{"class":260},[220,49493,1744],{"class":260},[220,49495,1747],{"class":226},[220,49497,1750],{"class":264},[220,49499,49500],{"class":222,"line":399},[220,49501,1765],{"class":264},[220,49503,49504,49506,49509],{"class":222,"line":644},[220,49505,1770],{"class":264},[220,49507,49508],{"class":230},"'FractalNoise'",[220,49510,2465],{"class":264},[220,49512,49513],{"class":222,"line":650},[220,49514,1787],{"class":264},[220,49516,49517],{"class":222,"line":656},[220,49518,1792],{"class":264},[1504,49520,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":49522},[49523,49524],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffractalnoise",{"title":49332,"description":49340},"docs\u002Fcomponents\u002FFractalNoise","0sAQrz5anTFMIkogI5FgxEC_sb7cs-aI8mz6hKo1594",{"id":49531,"title":49532,"body":49533,"category":36564,"componentType":25872,"description":49540,"extension":191,"meta":49725,"navigation":194,"path":49726,"requiresChild":32525,"seo":49727,"stem":49728,"__hash__":49729},"components\u002Fdocs\u002Fcomponents\u002FFrost.md","Frost",{"type":8,"value":49534,"toc":49721},[49535,49538,49541,49543,49545,49548,49550,49719],[11,49536,49532],{"id":49537},"frost",[15,49539,49540],{},"Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges",[31906,49542],{"component":49532},[23,49544,31910],{"id":26528},[31912,49546],{":props":49547},"[{\"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,49549,31918],{"id":31917},[246,49551,49552,49581,49609,49637,49665],{":tabs":1557},[212,49553,49555],{"className":334,"code":49554,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CFrost \u002F>\n\u003C\u002FShader>\n",[99,49556,49557,49565,49573],{"__ignoreMap":178},[220,49558,49559,49561,49563],{"class":222,"line":223},[220,49560,343],{"class":264},[220,49562,347],{"class":346},[220,49564,359],{"class":264},[220,49566,49567,49569,49571],{"class":222,"line":179},[220,49568,364],{"class":264},[220,49570,49532],{"class":346},[220,49572,386],{"class":264},[220,49574,49575,49577,49579],{"class":222,"line":389},[220,49576,402],{"class":264},[220,49578,347],{"class":346},[220,49580,359],{"class":264},[212,49582,49583],{"className":409,"code":49554,"language":411,"meta":178,"style":178},[99,49584,49585,49593,49601],{"__ignoreMap":178},[220,49586,49587,49589,49591],{"class":222,"line":223},[220,49588,343],{"class":264},[220,49590,347],{"class":420},[220,49592,359],{"class":264},[220,49594,49595,49597,49599],{"class":222,"line":179},[220,49596,364],{"class":264},[220,49598,49532],{"class":420},[220,49600,386],{"class":264},[220,49602,49603,49605,49607],{"class":222,"line":389},[220,49604,402],{"class":264},[220,49606,347],{"class":420},[220,49608,359],{"class":264},[212,49610,49611],{"className":2844,"code":49554,"language":2846,"meta":178,"style":178},[99,49612,49613,49621,49629],{"__ignoreMap":178},[220,49614,49615,49617,49619],{"class":222,"line":223},[220,49616,343],{"class":264},[220,49618,347],{"class":420},[220,49620,359],{"class":264},[220,49622,49623,49625,49627],{"class":222,"line":179},[220,49624,364],{"class":264},[220,49626,49532],{"class":420},[220,49628,386],{"class":264},[220,49630,49631,49633,49635],{"class":222,"line":389},[220,49632,402],{"class":264},[220,49634,347],{"class":420},[220,49636,359],{"class":264},[212,49638,49639],{"className":468,"code":49554,"language":469,"meta":178,"style":178},[99,49640,49641,49649,49657],{"__ignoreMap":178},[220,49642,49643,49645,49647],{"class":222,"line":223},[220,49644,343],{"class":264},[220,49646,347],{"class":420},[220,49648,359],{"class":264},[220,49650,49651,49653,49655],{"class":222,"line":179},[220,49652,364],{"class":264},[220,49654,49532],{"class":420},[220,49656,386],{"class":264},[220,49658,49659,49661,49663],{"class":222,"line":389},[220,49660,402],{"class":264},[220,49662,347],{"class":420},[220,49664,359],{"class":264},[212,49666,49668],{"className":251,"code":49667,"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,49669,49670,49680,49684,49698,49702,49711,49715],{"__ignoreMap":178},[220,49671,49672,49674,49676,49678],{"class":222,"line":223},[220,49673,261],{"class":260},[220,49675,11507],{"class":264},[220,49677,268],{"class":260},[220,49679,4007],{"class":230},[220,49681,49682],{"class":222,"line":179},[220,49683,647],{"emptyLinePlaceholder":194},[220,49685,49686,49688,49690,49692,49694,49696],{"class":222,"line":389},[220,49687,1735],{"class":260},[220,49689,1738],{"class":420},[220,49691,1741],{"class":260},[220,49693,1744],{"class":260},[220,49695,1747],{"class":226},[220,49697,1750],{"class":264},[220,49699,49700],{"class":222,"line":399},[220,49701,1765],{"class":264},[220,49703,49704,49706,49709],{"class":222,"line":644},[220,49705,1770],{"class":264},[220,49707,49708],{"class":230},"'Frost'",[220,49710,2465],{"class":264},[220,49712,49713],{"class":222,"line":650},[220,49714,1787],{"class":264},[220,49716,49717],{"class":222,"line":656},[220,49718,1792],{"class":264},[1504,49720,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":49722},[49723,49724],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ffrost",{"title":49532,"description":49540},"docs\u002Fcomponents\u002FFrost","QS81jlWvakKuBKKhh5fhaQU1Jrfcdr9Zq_FlKnImr_M",{"id":49731,"title":49732,"body":49733,"category":33058,"componentType":25872,"description":49740,"extension":191,"meta":49925,"navigation":194,"path":49926,"requiresChild":32525,"seo":49927,"stem":49928,"__hash__":49929},"components\u002Fdocs\u002Fcomponents\u002FGaborNoise.md","GaborNoise",{"type":8,"value":49734,"toc":49921},[49735,49738,49741,49743,49745,49748,49750,49919],[11,49736,49732],{"id":49737},"gabornoise",[15,49739,49740],{},"Oriented sine-grain noise with a fingerprint-like flow",[31906,49742],{"component":49732},[23,49744,31910],{"id":26528},[31912,49746],{":props":49747},"[{\"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,49749,31918],{"id":31917},[246,49751,49752,49781,49809,49837,49865],{":tabs":1557},[212,49753,49755],{"className":334,"code":49754,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGaborNoise \u002F>\n\u003C\u002FShader>\n",[99,49756,49757,49765,49773],{"__ignoreMap":178},[220,49758,49759,49761,49763],{"class":222,"line":223},[220,49760,343],{"class":264},[220,49762,347],{"class":346},[220,49764,359],{"class":264},[220,49766,49767,49769,49771],{"class":222,"line":179},[220,49768,364],{"class":264},[220,49770,49732],{"class":346},[220,49772,386],{"class":264},[220,49774,49775,49777,49779],{"class":222,"line":389},[220,49776,402],{"class":264},[220,49778,347],{"class":346},[220,49780,359],{"class":264},[212,49782,49783],{"className":409,"code":49754,"language":411,"meta":178,"style":178},[99,49784,49785,49793,49801],{"__ignoreMap":178},[220,49786,49787,49789,49791],{"class":222,"line":223},[220,49788,343],{"class":264},[220,49790,347],{"class":420},[220,49792,359],{"class":264},[220,49794,49795,49797,49799],{"class":222,"line":179},[220,49796,364],{"class":264},[220,49798,49732],{"class":420},[220,49800,386],{"class":264},[220,49802,49803,49805,49807],{"class":222,"line":389},[220,49804,402],{"class":264},[220,49806,347],{"class":420},[220,49808,359],{"class":264},[212,49810,49811],{"className":2844,"code":49754,"language":2846,"meta":178,"style":178},[99,49812,49813,49821,49829],{"__ignoreMap":178},[220,49814,49815,49817,49819],{"class":222,"line":223},[220,49816,343],{"class":264},[220,49818,347],{"class":420},[220,49820,359],{"class":264},[220,49822,49823,49825,49827],{"class":222,"line":179},[220,49824,364],{"class":264},[220,49826,49732],{"class":420},[220,49828,386],{"class":264},[220,49830,49831,49833,49835],{"class":222,"line":389},[220,49832,402],{"class":264},[220,49834,347],{"class":420},[220,49836,359],{"class":264},[212,49838,49839],{"className":468,"code":49754,"language":469,"meta":178,"style":178},[99,49840,49841,49849,49857],{"__ignoreMap":178},[220,49842,49843,49845,49847],{"class":222,"line":223},[220,49844,343],{"class":264},[220,49846,347],{"class":420},[220,49848,359],{"class":264},[220,49850,49851,49853,49855],{"class":222,"line":179},[220,49852,364],{"class":264},[220,49854,49732],{"class":420},[220,49856,386],{"class":264},[220,49858,49859,49861,49863],{"class":222,"line":389},[220,49860,402],{"class":264},[220,49862,347],{"class":420},[220,49864,359],{"class":264},[212,49866,49868],{"className":251,"code":49867,"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,49869,49870,49880,49884,49898,49902,49911,49915],{"__ignoreMap":178},[220,49871,49872,49874,49876,49878],{"class":222,"line":223},[220,49873,261],{"class":260},[220,49875,11507],{"class":264},[220,49877,268],{"class":260},[220,49879,4007],{"class":230},[220,49881,49882],{"class":222,"line":179},[220,49883,647],{"emptyLinePlaceholder":194},[220,49885,49886,49888,49890,49892,49894,49896],{"class":222,"line":389},[220,49887,1735],{"class":260},[220,49889,1738],{"class":420},[220,49891,1741],{"class":260},[220,49893,1744],{"class":260},[220,49895,1747],{"class":226},[220,49897,1750],{"class":264},[220,49899,49900],{"class":222,"line":399},[220,49901,1765],{"class":264},[220,49903,49904,49906,49909],{"class":222,"line":644},[220,49905,1770],{"class":264},[220,49907,49908],{"class":230},"'GaborNoise'",[220,49910,2465],{"class":264},[220,49912,49913],{"class":222,"line":650},[220,49914,1787],{"class":264},[220,49916,49917],{"class":222,"line":656},[220,49918,1792],{"class":264},[1504,49920,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":49922},[49923,49924],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgabornoise",{"title":49732,"description":49740},"docs\u002Fcomponents\u002FGaborNoise","HK8Rk4XjN6Z9aLXUSewkIWMKV9VAHYzKd3dlELMEjNk",{"id":49931,"title":15461,"body":49932,"category":36564,"componentType":25878,"description":49939,"extension":191,"meta":50199,"navigation":194,"path":50200,"requiresChild":194,"seo":50201,"stem":50202,"__hash__":50203},"components\u002Fdocs\u002Fcomponents\u002FGlass.md",{"type":8,"value":49933,"toc":50195},[49934,49937,49940,49942,49944,49947,49949,50193],[11,49935,15461],{"id":49936},"glass",[15,49938,49939],{},"Optically realistic glass lens driven in a custom shape",[31906,49941],{"component":15461},[23,49943,31910],{"id":26528},[31912,49945],{":props":49946},"[{\"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,49948,31918],{"id":31917},[246,49950,49951,49996,50040,50084,50128],{":tabs":1557},[212,49952,49954],{"className":334,"code":49953,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlass>\n \u003CCircle \u002F>\n \u003C\u002FGlass>\n\u003C\u002FShader>\n",[99,49955,49956,49964,49972,49980,49988],{"__ignoreMap":178},[220,49957,49958,49960,49962],{"class":222,"line":223},[220,49959,343],{"class":264},[220,49961,347],{"class":346},[220,49963,359],{"class":264},[220,49965,49966,49968,49970],{"class":222,"line":179},[220,49967,364],{"class":264},[220,49969,15461],{"class":346},[220,49971,359],{"class":264},[220,49973,49974,49976,49978],{"class":222,"line":389},[220,49975,2550],{"class":264},[220,49977,2553],{"class":346},[220,49979,386],{"class":264},[220,49981,49982,49984,49986],{"class":222,"line":399},[220,49983,2567],{"class":264},[220,49985,15461],{"class":346},[220,49987,359],{"class":264},[220,49989,49990,49992,49994],{"class":222,"line":644},[220,49991,402],{"class":264},[220,49993,347],{"class":346},[220,49995,359],{"class":264},[212,49997,49998],{"className":409,"code":49953,"language":411,"meta":178,"style":178},[99,49999,50000,50008,50016,50024,50032],{"__ignoreMap":178},[220,50001,50002,50004,50006],{"class":222,"line":223},[220,50003,343],{"class":264},[220,50005,347],{"class":420},[220,50007,359],{"class":264},[220,50009,50010,50012,50014],{"class":222,"line":179},[220,50011,364],{"class":264},[220,50013,15461],{"class":420},[220,50015,359],{"class":264},[220,50017,50018,50020,50022],{"class":222,"line":389},[220,50019,2550],{"class":264},[220,50021,2553],{"class":420},[220,50023,386],{"class":264},[220,50025,50026,50028,50030],{"class":222,"line":399},[220,50027,2567],{"class":264},[220,50029,15461],{"class":420},[220,50031,359],{"class":264},[220,50033,50034,50036,50038],{"class":222,"line":644},[220,50035,402],{"class":264},[220,50037,347],{"class":420},[220,50039,359],{"class":264},[212,50041,50042],{"className":2844,"code":49953,"language":2846,"meta":178,"style":178},[99,50043,50044,50052,50060,50068,50076],{"__ignoreMap":178},[220,50045,50046,50048,50050],{"class":222,"line":223},[220,50047,343],{"class":264},[220,50049,347],{"class":420},[220,50051,359],{"class":264},[220,50053,50054,50056,50058],{"class":222,"line":179},[220,50055,364],{"class":264},[220,50057,15461],{"class":420},[220,50059,359],{"class":264},[220,50061,50062,50064,50066],{"class":222,"line":389},[220,50063,2550],{"class":264},[220,50065,2553],{"class":420},[220,50067,386],{"class":264},[220,50069,50070,50072,50074],{"class":222,"line":399},[220,50071,2567],{"class":264},[220,50073,15461],{"class":420},[220,50075,359],{"class":264},[220,50077,50078,50080,50082],{"class":222,"line":644},[220,50079,402],{"class":264},[220,50081,347],{"class":420},[220,50083,359],{"class":264},[212,50085,50086],{"className":468,"code":49953,"language":469,"meta":178,"style":178},[99,50087,50088,50096,50104,50112,50120],{"__ignoreMap":178},[220,50089,50090,50092,50094],{"class":222,"line":223},[220,50091,343],{"class":264},[220,50093,347],{"class":420},[220,50095,359],{"class":264},[220,50097,50098,50100,50102],{"class":222,"line":179},[220,50099,364],{"class":264},[220,50101,15461],{"class":420},[220,50103,359],{"class":264},[220,50105,50106,50108,50110],{"class":222,"line":389},[220,50107,2550],{"class":264},[220,50109,2553],{"class":420},[220,50111,386],{"class":264},[220,50113,50114,50116,50118],{"class":222,"line":399},[220,50115,2567],{"class":264},[220,50117,15461],{"class":420},[220,50119,359],{"class":264},[220,50121,50122,50124,50126],{"class":222,"line":644},[220,50123,402],{"class":264},[220,50125,347],{"class":420},[220,50127,359],{"class":264},[212,50129,50131],{"className":251,"code":50130,"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,50132,50133,50143,50147,50161,50165,50173,50181,50185,50189],{"__ignoreMap":178},[220,50134,50135,50137,50139,50141],{"class":222,"line":223},[220,50136,261],{"class":260},[220,50138,11507],{"class":264},[220,50140,268],{"class":260},[220,50142,4007],{"class":230},[220,50144,50145],{"class":222,"line":179},[220,50146,647],{"emptyLinePlaceholder":194},[220,50148,50149,50151,50153,50155,50157,50159],{"class":222,"line":389},[220,50150,1735],{"class":260},[220,50152,1738],{"class":420},[220,50154,1741],{"class":260},[220,50156,1744],{"class":260},[220,50158,1747],{"class":226},[220,50160,1750],{"class":264},[220,50162,50163],{"class":222,"line":399},[220,50164,1765],{"class":264},[220,50166,50167,50169,50171],{"class":222,"line":644},[220,50168,1770],{"class":264},[220,50170,21528],{"class":230},[220,50172,7004],{"class":264},[220,50174,50175,50177,50179],{"class":222,"line":650},[220,50176,7009],{"class":264},[220,50178,3206],{"class":230},[220,50180,2465],{"class":264},[220,50182,50183],{"class":222,"line":656},[220,50184,7026],{"class":264},[220,50186,50187],{"class":222,"line":673},[220,50188,1787],{"class":264},[220,50190,50191],{"class":222,"line":682},[220,50192,1792],{"class":264},[1504,50194,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":50196},[50197,50198],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fglass",{"title":15461,"description":49939},"docs\u002Fcomponents\u002FGlass","37g9ge8fWCAuMQUo_5TkyJaH5Z1vMATTO5Lqzkkkyow",{"id":50205,"title":6220,"body":50206,"category":33391,"componentType":25878,"description":50213,"extension":191,"meta":50530,"navigation":194,"path":50531,"requiresChild":194,"seo":50532,"stem":50533,"__hash__":50534},"components\u002Fdocs\u002Fcomponents\u002FGlassTiles.md",{"type":8,"value":50207,"toc":50526},[50208,50211,50214,50216,50218,50221,50223,50524],[11,50209,6220],{"id":50210},"glasstiles",[15,50212,50213],{},"Refraction-like distortion in a tile grid pattern",[31906,50215],{"component":6220},[23,50217,31910],{"id":26528},[31912,50219],{":props":50220},"[{\"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,50222,31918],{"id":31917},[246,50224,50225,50282,50341,50397,50455],{":tabs":1557},[212,50226,50228],{"className":334,"code":50227,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50229,50230,50238,50245,50254,50258,50266,50274],{"__ignoreMap":178},[220,50231,50232,50234,50236],{"class":222,"line":223},[220,50233,343],{"class":264},[220,50235,347],{"class":346},[220,50237,359],{"class":264},[220,50239,50240,50242],{"class":222,"line":179},[220,50241,364],{"class":264},[220,50243,50244],{"class":346},"GlassTiles\n",[220,50246,50247,50249,50251],{"class":222,"line":389},[220,50248,20366],{"class":226},[220,50250,353],{"class":264},[220,50252,50253],{"class":230},"\"2\"\n",[220,50255,50256],{"class":222,"line":399},[220,50257,31954],{"class":264},[220,50259,50260,50262,50264],{"class":222,"line":644},[220,50261,2550],{"class":264},[220,50263,2553],{"class":346},[220,50265,386],{"class":264},[220,50267,50268,50270,50272],{"class":222,"line":650},[220,50269,2567],{"class":264},[220,50271,6220],{"class":346},[220,50273,359],{"class":264},[220,50275,50276,50278,50280],{"class":222,"line":656},[220,50277,402],{"class":264},[220,50279,347],{"class":346},[220,50281,359],{"class":264},[212,50283,50285],{"className":409,"code":50284,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlassTiles>\n\u003C\u002FShader>\n",[99,50286,50287,50295,50301,50313,50317,50325,50333],{"__ignoreMap":178},[220,50288,50289,50291,50293],{"class":222,"line":223},[220,50290,343],{"class":264},[220,50292,347],{"class":420},[220,50294,359],{"class":264},[220,50296,50297,50299],{"class":222,"line":179},[220,50298,364],{"class":264},[220,50300,50244],{"class":420},[220,50302,50303,50305,50307,50309,50311],{"class":222,"line":389},[220,50304,20477],{"class":226},[220,50306,353],{"class":260},[220,50308,743],{"class":264},[220,50310,7209],{"class":420},[220,50312,749],{"class":264},[220,50314,50315],{"class":222,"line":399},[220,50316,31954],{"class":264},[220,50318,50319,50321,50323],{"class":222,"line":644},[220,50320,2550],{"class":264},[220,50322,2553],{"class":420},[220,50324,386],{"class":264},[220,50326,50327,50329,50331],{"class":222,"line":650},[220,50328,2567],{"class":264},[220,50330,6220],{"class":420},[220,50332,359],{"class":264},[220,50334,50335,50337,50339],{"class":222,"line":656},[220,50336,402],{"class":264},[220,50338,347],{"class":420},[220,50340,359],{"class":264},[212,50342,50343],{"className":2844,"code":50284,"language":2846,"meta":178,"style":178},[99,50344,50345,50353,50359,50369,50373,50381,50389],{"__ignoreMap":178},[220,50346,50347,50349,50351],{"class":222,"line":223},[220,50348,343],{"class":264},[220,50350,347],{"class":420},[220,50352,359],{"class":264},[220,50354,50355,50357],{"class":222,"line":179},[220,50356,364],{"class":264},[220,50358,50244],{"class":420},[220,50360,50361,50363,50365,50367],{"class":222,"line":389},[220,50362,20477],{"class":226},[220,50364,29866],{"class":264},[220,50366,7209],{"class":420},[220,50368,749],{"class":264},[220,50370,50371],{"class":222,"line":399},[220,50372,31954],{"class":264},[220,50374,50375,50377,50379],{"class":222,"line":644},[220,50376,2550],{"class":264},[220,50378,2553],{"class":420},[220,50380,386],{"class":264},[220,50382,50383,50385,50387],{"class":222,"line":650},[220,50384,2567],{"class":264},[220,50386,6220],{"class":420},[220,50388,359],{"class":264},[220,50390,50391,50393,50395],{"class":222,"line":656},[220,50392,402],{"class":264},[220,50394,347],{"class":420},[220,50396,359],{"class":264},[212,50398,50399],{"className":468,"code":50284,"language":469,"meta":178,"style":178},[99,50400,50401,50409,50415,50427,50431,50439,50447],{"__ignoreMap":178},[220,50402,50403,50405,50407],{"class":222,"line":223},[220,50404,343],{"class":264},[220,50406,347],{"class":420},[220,50408,359],{"class":264},[220,50410,50411,50413],{"class":222,"line":179},[220,50412,364],{"class":264},[220,50414,50244],{"class":420},[220,50416,50417,50419,50421,50423,50425],{"class":222,"line":389},[220,50418,20477],{"class":226},[220,50420,353],{"class":260},[220,50422,743],{"class":264},[220,50424,7209],{"class":420},[220,50426,749],{"class":264},[220,50428,50429],{"class":222,"line":399},[220,50430,31954],{"class":264},[220,50432,50433,50435,50437],{"class":222,"line":644},[220,50434,2550],{"class":264},[220,50436,2553],{"class":420},[220,50438,386],{"class":264},[220,50440,50441,50443,50445],{"class":222,"line":650},[220,50442,2567],{"class":264},[220,50444,6220],{"class":420},[220,50446,359],{"class":264},[220,50448,50449,50451,50453],{"class":222,"line":656},[220,50450,402],{"class":264},[220,50452,347],{"class":420},[220,50454,359],{"class":264},[212,50456,50458],{"className":251,"code":50457,"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,50459,50460,50470,50474,50488,50492,50504,50512,50516,50520],{"__ignoreMap":178},[220,50461,50462,50464,50466,50468],{"class":222,"line":223},[220,50463,261],{"class":260},[220,50465,11507],{"class":264},[220,50467,268],{"class":260},[220,50469,4007],{"class":230},[220,50471,50472],{"class":222,"line":179},[220,50473,647],{"emptyLinePlaceholder":194},[220,50475,50476,50478,50480,50482,50484,50486],{"class":222,"line":389},[220,50477,1735],{"class":260},[220,50479,1738],{"class":420},[220,50481,1741],{"class":260},[220,50483,1744],{"class":260},[220,50485,1747],{"class":226},[220,50487,1750],{"class":264},[220,50489,50490],{"class":222,"line":399},[220,50491,1765],{"class":264},[220,50493,50494,50496,50498,50500,50502],{"class":222,"line":644},[220,50495,1770],{"class":264},[220,50497,6578],{"class":230},[220,50499,32198],{"class":264},[220,50501,7209],{"class":420},[220,50503,7541],{"class":264},[220,50505,50506,50508,50510],{"class":222,"line":650},[220,50507,7009],{"class":264},[220,50509,3206],{"class":230},[220,50511,2465],{"class":264},[220,50513,50514],{"class":222,"line":656},[220,50515,7026],{"class":264},[220,50517,50518],{"class":222,"line":673},[220,50519,1787],{"class":264},[220,50521,50522],{"class":222,"line":682},[220,50523,1792],{"class":264},[1504,50525,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50527},[50528,50529],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fglasstiles",{"title":6220,"description":50213},"docs\u002Fcomponents\u002FGlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":50536,"title":50537,"body":50538,"category":32801,"componentType":25878,"description":50545,"extension":191,"meta":50862,"navigation":194,"path":50863,"requiresChild":194,"seo":50864,"stem":50865,"__hash__":50866},"components\u002Fdocs\u002Fcomponents\u002FGlitch.md","Glitch",{"type":8,"value":50539,"toc":50858},[50540,50543,50546,50548,50550,50553,50555,50856],[11,50541,50537],{"id":50542},"glitch",[15,50544,50545],{},"Digital glitch that melts pixels and distorts colors",[31906,50547],{"component":50537},[23,50549,31910],{"id":26528},[31912,50551],{":props":50552},"[{\"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,50554,31918],{"id":31917},[246,50556,50557,50613,50672,50728,50786],{":tabs":1557},[212,50558,50560],{"className":334,"code":50559,"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,50561,50562,50570,50577,50585,50589,50597,50605],{"__ignoreMap":178},[220,50563,50564,50566,50568],{"class":222,"line":223},[220,50565,343],{"class":264},[220,50567,347],{"class":346},[220,50569,359],{"class":264},[220,50571,50572,50574],{"class":222,"line":179},[220,50573,364],{"class":264},[220,50575,50576],{"class":346},"Glitch\n",[220,50578,50579,50581,50583],{"class":222,"line":389},[220,50580,20366],{"class":226},[220,50582,353],{"class":264},[220,50584,42153],{"class":230},[220,50586,50587],{"class":222,"line":399},[220,50588,31954],{"class":264},[220,50590,50591,50593,50595],{"class":222,"line":644},[220,50592,2550],{"class":264},[220,50594,2553],{"class":346},[220,50596,386],{"class":264},[220,50598,50599,50601,50603],{"class":222,"line":650},[220,50600,2567],{"class":264},[220,50602,50537],{"class":346},[220,50604,359],{"class":264},[220,50606,50607,50609,50611],{"class":222,"line":656},[220,50608,402],{"class":264},[220,50610,347],{"class":346},[220,50612,359],{"class":264},[212,50614,50616],{"className":409,"code":50615,"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,50617,50618,50626,50632,50644,50648,50656,50664],{"__ignoreMap":178},[220,50619,50620,50622,50624],{"class":222,"line":223},[220,50621,343],{"class":264},[220,50623,347],{"class":420},[220,50625,359],{"class":264},[220,50627,50628,50630],{"class":222,"line":179},[220,50629,364],{"class":264},[220,50631,50576],{"class":420},[220,50633,50634,50636,50638,50640,50642],{"class":222,"line":389},[220,50635,20477],{"class":226},[220,50637,353],{"class":260},[220,50639,743],{"class":264},[220,50641,7749],{"class":420},[220,50643,749],{"class":264},[220,50645,50646],{"class":222,"line":399},[220,50647,31954],{"class":264},[220,50649,50650,50652,50654],{"class":222,"line":644},[220,50651,2550],{"class":264},[220,50653,2553],{"class":420},[220,50655,386],{"class":264},[220,50657,50658,50660,50662],{"class":222,"line":650},[220,50659,2567],{"class":264},[220,50661,50537],{"class":420},[220,50663,359],{"class":264},[220,50665,50666,50668,50670],{"class":222,"line":656},[220,50667,402],{"class":264},[220,50669,347],{"class":420},[220,50671,359],{"class":264},[212,50673,50674],{"className":2844,"code":50615,"language":2846,"meta":178,"style":178},[99,50675,50676,50684,50690,50700,50704,50712,50720],{"__ignoreMap":178},[220,50677,50678,50680,50682],{"class":222,"line":223},[220,50679,343],{"class":264},[220,50681,347],{"class":420},[220,50683,359],{"class":264},[220,50685,50686,50688],{"class":222,"line":179},[220,50687,364],{"class":264},[220,50689,50576],{"class":420},[220,50691,50692,50694,50696,50698],{"class":222,"line":389},[220,50693,20477],{"class":226},[220,50695,29866],{"class":264},[220,50697,7749],{"class":420},[220,50699,749],{"class":264},[220,50701,50702],{"class":222,"line":399},[220,50703,31954],{"class":264},[220,50705,50706,50708,50710],{"class":222,"line":644},[220,50707,2550],{"class":264},[220,50709,2553],{"class":420},[220,50711,386],{"class":264},[220,50713,50714,50716,50718],{"class":222,"line":650},[220,50715,2567],{"class":264},[220,50717,50537],{"class":420},[220,50719,359],{"class":264},[220,50721,50722,50724,50726],{"class":222,"line":656},[220,50723,402],{"class":264},[220,50725,347],{"class":420},[220,50727,359],{"class":264},[212,50729,50730],{"className":468,"code":50615,"language":469,"meta":178,"style":178},[99,50731,50732,50740,50746,50758,50762,50770,50778],{"__ignoreMap":178},[220,50733,50734,50736,50738],{"class":222,"line":223},[220,50735,343],{"class":264},[220,50737,347],{"class":420},[220,50739,359],{"class":264},[220,50741,50742,50744],{"class":222,"line":179},[220,50743,364],{"class":264},[220,50745,50576],{"class":420},[220,50747,50748,50750,50752,50754,50756],{"class":222,"line":389},[220,50749,20477],{"class":226},[220,50751,353],{"class":260},[220,50753,743],{"class":264},[220,50755,7749],{"class":420},[220,50757,749],{"class":264},[220,50759,50760],{"class":222,"line":399},[220,50761,31954],{"class":264},[220,50763,50764,50766,50768],{"class":222,"line":644},[220,50765,2550],{"class":264},[220,50767,2553],{"class":420},[220,50769,386],{"class":264},[220,50771,50772,50774,50776],{"class":222,"line":650},[220,50773,2567],{"class":264},[220,50775,50537],{"class":420},[220,50777,359],{"class":264},[220,50779,50780,50782,50784],{"class":222,"line":656},[220,50781,402],{"class":264},[220,50783,347],{"class":420},[220,50785,359],{"class":264},[212,50787,50789],{"className":251,"code":50788,"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,50790,50791,50801,50805,50819,50823,50836,50844,50848,50852],{"__ignoreMap":178},[220,50792,50793,50795,50797,50799],{"class":222,"line":223},[220,50794,261],{"class":260},[220,50796,11507],{"class":264},[220,50798,268],{"class":260},[220,50800,4007],{"class":230},[220,50802,50803],{"class":222,"line":179},[220,50804,647],{"emptyLinePlaceholder":194},[220,50806,50807,50809,50811,50813,50815,50817],{"class":222,"line":389},[220,50808,1735],{"class":260},[220,50810,1738],{"class":420},[220,50812,1741],{"class":260},[220,50814,1744],{"class":260},[220,50816,1747],{"class":226},[220,50818,1750],{"class":264},[220,50820,50821],{"class":222,"line":399},[220,50822,1765],{"class":264},[220,50824,50825,50827,50830,50832,50834],{"class":222,"line":644},[220,50826,1770],{"class":264},[220,50828,50829],{"class":230},"'Glitch'",[220,50831,32198],{"class":264},[220,50833,7749],{"class":420},[220,50835,7541],{"class":264},[220,50837,50838,50840,50842],{"class":222,"line":650},[220,50839,7009],{"class":264},[220,50841,3206],{"class":230},[220,50843,2465],{"class":264},[220,50845,50846],{"class":222,"line":656},[220,50847,7026],{"class":264},[220,50849,50850],{"class":222,"line":673},[220,50851,1787],{"class":264},[220,50853,50854],{"class":222,"line":682},[220,50855,1792],{"class":264},[1504,50857,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":50859},[50860,50861],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fglitch",{"title":50537,"description":50545},"docs\u002Fcomponents\u002FGlitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":50868,"title":11787,"body":50869,"category":32801,"componentType":25878,"description":50876,"extension":191,"meta":51193,"navigation":194,"path":51194,"requiresChild":194,"seo":51195,"stem":51196,"__hash__":51197},"components\u002Fdocs\u002Fcomponents\u002FGlow.md",{"type":8,"value":50870,"toc":51189},[50871,50874,50877,50879,50881,50884,50886,51187],[11,50872,11787],{"id":50873},"glow",[15,50875,50876],{},"Soft glow effect with adjustable intensity",[31906,50878],{"component":11787},[23,50880,31910],{"id":26528},[31912,50882],{":props":50883},"[{\"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,50885,31918],{"id":31917},[246,50887,50888,50944,51003,51059,51117],{":tabs":1557},[212,50889,50891],{"className":334,"code":50890,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50892,50893,50901,50908,50916,50920,50928,50936],{"__ignoreMap":178},[220,50894,50895,50897,50899],{"class":222,"line":223},[220,50896,343],{"class":264},[220,50898,347],{"class":346},[220,50900,359],{"class":264},[220,50902,50903,50905],{"class":222,"line":179},[220,50904,364],{"class":264},[220,50906,50907],{"class":346},"Glow\n",[220,50909,50910,50912,50914],{"class":222,"line":389},[220,50911,20366],{"class":226},[220,50913,353],{"class":264},[220,50915,36620],{"class":230},[220,50917,50918],{"class":222,"line":399},[220,50919,31954],{"class":264},[220,50921,50922,50924,50926],{"class":222,"line":644},[220,50923,2550],{"class":264},[220,50925,2553],{"class":346},[220,50927,386],{"class":264},[220,50929,50930,50932,50934],{"class":222,"line":650},[220,50931,2567],{"class":264},[220,50933,11787],{"class":346},[220,50935,359],{"class":264},[220,50937,50938,50940,50942],{"class":222,"line":656},[220,50939,402],{"class":264},[220,50941,347],{"class":346},[220,50943,359],{"class":264},[212,50945,50947],{"className":409,"code":50946,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FGlow>\n\u003C\u002FShader>\n",[99,50948,50949,50957,50963,50975,50979,50987,50995],{"__ignoreMap":178},[220,50950,50951,50953,50955],{"class":222,"line":223},[220,50952,343],{"class":264},[220,50954,347],{"class":420},[220,50956,359],{"class":264},[220,50958,50959,50961],{"class":222,"line":179},[220,50960,364],{"class":264},[220,50962,50907],{"class":420},[220,50964,50965,50967,50969,50971,50973],{"class":222,"line":389},[220,50966,20477],{"class":226},[220,50968,353],{"class":260},[220,50970,743],{"class":264},[220,50972,8672],{"class":420},[220,50974,749],{"class":264},[220,50976,50977],{"class":222,"line":399},[220,50978,31954],{"class":264},[220,50980,50981,50983,50985],{"class":222,"line":644},[220,50982,2550],{"class":264},[220,50984,2553],{"class":420},[220,50986,386],{"class":264},[220,50988,50989,50991,50993],{"class":222,"line":650},[220,50990,2567],{"class":264},[220,50992,11787],{"class":420},[220,50994,359],{"class":264},[220,50996,50997,50999,51001],{"class":222,"line":656},[220,50998,402],{"class":264},[220,51000,347],{"class":420},[220,51002,359],{"class":264},[212,51004,51005],{"className":2844,"code":50946,"language":2846,"meta":178,"style":178},[99,51006,51007,51015,51021,51031,51035,51043,51051],{"__ignoreMap":178},[220,51008,51009,51011,51013],{"class":222,"line":223},[220,51010,343],{"class":264},[220,51012,347],{"class":420},[220,51014,359],{"class":264},[220,51016,51017,51019],{"class":222,"line":179},[220,51018,364],{"class":264},[220,51020,50907],{"class":420},[220,51022,51023,51025,51027,51029],{"class":222,"line":389},[220,51024,20477],{"class":226},[220,51026,29866],{"class":264},[220,51028,8672],{"class":420},[220,51030,749],{"class":264},[220,51032,51033],{"class":222,"line":399},[220,51034,31954],{"class":264},[220,51036,51037,51039,51041],{"class":222,"line":644},[220,51038,2550],{"class":264},[220,51040,2553],{"class":420},[220,51042,386],{"class":264},[220,51044,51045,51047,51049],{"class":222,"line":650},[220,51046,2567],{"class":264},[220,51048,11787],{"class":420},[220,51050,359],{"class":264},[220,51052,51053,51055,51057],{"class":222,"line":656},[220,51054,402],{"class":264},[220,51056,347],{"class":420},[220,51058,359],{"class":264},[212,51060,51061],{"className":468,"code":50946,"language":469,"meta":178,"style":178},[99,51062,51063,51071,51077,51089,51093,51101,51109],{"__ignoreMap":178},[220,51064,51065,51067,51069],{"class":222,"line":223},[220,51066,343],{"class":264},[220,51068,347],{"class":420},[220,51070,359],{"class":264},[220,51072,51073,51075],{"class":222,"line":179},[220,51074,364],{"class":264},[220,51076,50907],{"class":420},[220,51078,51079,51081,51083,51085,51087],{"class":222,"line":389},[220,51080,20477],{"class":226},[220,51082,353],{"class":260},[220,51084,743],{"class":264},[220,51086,8672],{"class":420},[220,51088,749],{"class":264},[220,51090,51091],{"class":222,"line":399},[220,51092,31954],{"class":264},[220,51094,51095,51097,51099],{"class":222,"line":644},[220,51096,2550],{"class":264},[220,51098,2553],{"class":420},[220,51100,386],{"class":264},[220,51102,51103,51105,51107],{"class":222,"line":650},[220,51104,2567],{"class":264},[220,51106,11787],{"class":420},[220,51108,359],{"class":264},[220,51110,51111,51113,51115],{"class":222,"line":656},[220,51112,402],{"class":264},[220,51114,347],{"class":420},[220,51116,359],{"class":264},[212,51118,51120],{"className":251,"code":51119,"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,51121,51122,51132,51136,51150,51154,51167,51175,51179,51183],{"__ignoreMap":178},[220,51123,51124,51126,51128,51130],{"class":222,"line":223},[220,51125,261],{"class":260},[220,51127,11507],{"class":264},[220,51129,268],{"class":260},[220,51131,4007],{"class":230},[220,51133,51134],{"class":222,"line":179},[220,51135,647],{"emptyLinePlaceholder":194},[220,51137,51138,51140,51142,51144,51146,51148],{"class":222,"line":389},[220,51139,1735],{"class":260},[220,51141,1738],{"class":420},[220,51143,1741],{"class":260},[220,51145,1744],{"class":260},[220,51147,1747],{"class":226},[220,51149,1750],{"class":264},[220,51151,51152],{"class":222,"line":399},[220,51153,1765],{"class":264},[220,51155,51156,51158,51161,51163,51165],{"class":222,"line":644},[220,51157,1770],{"class":264},[220,51159,51160],{"class":230},"'Glow'",[220,51162,32198],{"class":264},[220,51164,8672],{"class":420},[220,51166,7541],{"class":264},[220,51168,51169,51171,51173],{"class":222,"line":650},[220,51170,7009],{"class":264},[220,51172,3206],{"class":230},[220,51174,2465],{"class":264},[220,51176,51177],{"class":222,"line":656},[220,51178,7026],{"class":264},[220,51180,51181],{"class":222,"line":673},[220,51182,1787],{"class":264},[220,51184,51185],{"class":222,"line":682},[220,51186,1792],{"class":264},[1504,51188,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51190},[51191,51192],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fglow",{"title":11787,"description":50876},"docs\u002Fcomponents\u002FGlow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":51199,"title":51200,"body":51201,"category":33058,"componentType":25872,"description":51208,"extension":191,"meta":51449,"navigation":194,"path":51450,"requiresChild":32525,"seo":51451,"stem":51452,"__hash__":51453},"components\u002Fdocs\u002Fcomponents\u002FGodrays.md","Godrays",{"type":8,"value":51202,"toc":51445},[51203,51206,51209,51211,51213,51216,51218,51443],[11,51204,51200],{"id":51205},"godrays",[15,51207,51208],{},"Volumetric light rays emanating from a point",[31906,51210],{"component":51200},[23,51212,31910],{"id":26528},[31912,51214],{":props":51215},"[{\"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,51217,31918],{"id":31917},[246,51219,51220,51260,51303,51343,51385],{":tabs":1557},[212,51221,51223],{"className":334,"code":51222,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,51224,51225,51233,51240,51248,51252],{"__ignoreMap":178},[220,51226,51227,51229,51231],{"class":222,"line":223},[220,51228,343],{"class":264},[220,51230,347],{"class":346},[220,51232,359],{"class":264},[220,51234,51235,51237],{"class":222,"line":179},[220,51236,364],{"class":264},[220,51238,51239],{"class":346},"Godrays\n",[220,51241,51242,51244,51246],{"class":222,"line":389},[220,51243,20366],{"class":226},[220,51245,353],{"class":264},[220,51247,9645],{"class":230},[220,51249,51250],{"class":222,"line":399},[220,51251,1234],{"class":264},[220,51253,51254,51256,51258],{"class":222,"line":644},[220,51255,402],{"class":264},[220,51257,347],{"class":346},[220,51259,359],{"class":264},[212,51261,51263],{"className":409,"code":51262,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,51264,51265,51273,51279,51291,51295],{"__ignoreMap":178},[220,51266,51267,51269,51271],{"class":222,"line":223},[220,51268,343],{"class":264},[220,51270,347],{"class":420},[220,51272,359],{"class":264},[220,51274,51275,51277],{"class":222,"line":179},[220,51276,364],{"class":264},[220,51278,51239],{"class":420},[220,51280,51281,51283,51285,51287,51289],{"class":222,"line":389},[220,51282,20477],{"class":226},[220,51284,353],{"class":260},[220,51286,743],{"class":264},[220,51288,6294],{"class":420},[220,51290,749],{"class":264},[220,51292,51293],{"class":222,"line":399},[220,51294,1234],{"class":264},[220,51296,51297,51299,51301],{"class":222,"line":644},[220,51298,402],{"class":264},[220,51300,347],{"class":420},[220,51302,359],{"class":264},[212,51304,51305],{"className":2844,"code":51262,"language":2846,"meta":178,"style":178},[99,51306,51307,51315,51321,51331,51335],{"__ignoreMap":178},[220,51308,51309,51311,51313],{"class":222,"line":223},[220,51310,343],{"class":264},[220,51312,347],{"class":420},[220,51314,359],{"class":264},[220,51316,51317,51319],{"class":222,"line":179},[220,51318,364],{"class":264},[220,51320,51239],{"class":420},[220,51322,51323,51325,51327,51329],{"class":222,"line":389},[220,51324,20477],{"class":226},[220,51326,29866],{"class":264},[220,51328,6294],{"class":420},[220,51330,749],{"class":264},[220,51332,51333],{"class":222,"line":399},[220,51334,1234],{"class":264},[220,51336,51337,51339,51341],{"class":222,"line":644},[220,51338,402],{"class":264},[220,51340,347],{"class":420},[220,51342,359],{"class":264},[212,51344,51345],{"className":468,"code":51262,"language":469,"meta":178,"style":178},[99,51346,51347,51355,51361,51373,51377],{"__ignoreMap":178},[220,51348,51349,51351,51353],{"class":222,"line":223},[220,51350,343],{"class":264},[220,51352,347],{"class":420},[220,51354,359],{"class":264},[220,51356,51357,51359],{"class":222,"line":179},[220,51358,364],{"class":264},[220,51360,51239],{"class":420},[220,51362,51363,51365,51367,51369,51371],{"class":222,"line":389},[220,51364,20477],{"class":226},[220,51366,353],{"class":260},[220,51368,743],{"class":264},[220,51370,6294],{"class":420},[220,51372,749],{"class":264},[220,51374,51375],{"class":222,"line":399},[220,51376,1234],{"class":264},[220,51378,51379,51381,51383],{"class":222,"line":644},[220,51380,402],{"class":264},[220,51382,347],{"class":420},[220,51384,359],{"class":264},[212,51386,51388],{"className":251,"code":51387,"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,51389,51390,51400,51404,51418,51422,51435,51439],{"__ignoreMap":178},[220,51391,51392,51394,51396,51398],{"class":222,"line":223},[220,51393,261],{"class":260},[220,51395,11507],{"class":264},[220,51397,268],{"class":260},[220,51399,4007],{"class":230},[220,51401,51402],{"class":222,"line":179},[220,51403,647],{"emptyLinePlaceholder":194},[220,51405,51406,51408,51410,51412,51414,51416],{"class":222,"line":389},[220,51407,1735],{"class":260},[220,51409,1738],{"class":420},[220,51411,1741],{"class":260},[220,51413,1744],{"class":260},[220,51415,1747],{"class":226},[220,51417,1750],{"class":264},[220,51419,51420],{"class":222,"line":399},[220,51421,1765],{"class":264},[220,51423,51424,51426,51429,51431,51433],{"class":222,"line":644},[220,51425,1770],{"class":264},[220,51427,51428],{"class":230},"'Godrays'",[220,51430,32198],{"class":264},[220,51432,6294],{"class":420},[220,51434,1782],{"class":264},[220,51436,51437],{"class":222,"line":650},[220,51438,1787],{"class":264},[220,51440,51441],{"class":222,"line":656},[220,51442,1792],{"class":264},[1504,51444,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":51446},[51447,51448],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgodrays",{"title":51200,"description":51208},"docs\u002Fcomponents\u002FGodrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":51455,"title":51456,"body":51457,"category":36564,"componentType":25872,"description":51464,"extension":191,"meta":51649,"navigation":194,"path":51650,"requiresChild":32525,"seo":51651,"stem":51652,"__hash__":51653},"components\u002Fdocs\u002Fcomponents\u002FGoo.md","Goo",{"type":8,"value":51458,"toc":51645},[51459,51462,51465,51467,51469,51472,51474,51643],[11,51460,51456],{"id":51461},"goo",[15,51463,51464],{},"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",[31906,51466],{"component":51456},[23,51468,31910],{"id":26528},[31912,51470],{":props":51471},"[{\"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,51473,31918],{"id":31917},[246,51475,51476,51505,51533,51561,51589],{":tabs":1557},[212,51477,51479],{"className":334,"code":51478,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGoo \u002F>\n\u003C\u002FShader>\n",[99,51480,51481,51489,51497],{"__ignoreMap":178},[220,51482,51483,51485,51487],{"class":222,"line":223},[220,51484,343],{"class":264},[220,51486,347],{"class":346},[220,51488,359],{"class":264},[220,51490,51491,51493,51495],{"class":222,"line":179},[220,51492,364],{"class":264},[220,51494,51456],{"class":346},[220,51496,386],{"class":264},[220,51498,51499,51501,51503],{"class":222,"line":389},[220,51500,402],{"class":264},[220,51502,347],{"class":346},[220,51504,359],{"class":264},[212,51506,51507],{"className":409,"code":51478,"language":411,"meta":178,"style":178},[99,51508,51509,51517,51525],{"__ignoreMap":178},[220,51510,51511,51513,51515],{"class":222,"line":223},[220,51512,343],{"class":264},[220,51514,347],{"class":420},[220,51516,359],{"class":264},[220,51518,51519,51521,51523],{"class":222,"line":179},[220,51520,364],{"class":264},[220,51522,51456],{"class":420},[220,51524,386],{"class":264},[220,51526,51527,51529,51531],{"class":222,"line":389},[220,51528,402],{"class":264},[220,51530,347],{"class":420},[220,51532,359],{"class":264},[212,51534,51535],{"className":2844,"code":51478,"language":2846,"meta":178,"style":178},[99,51536,51537,51545,51553],{"__ignoreMap":178},[220,51538,51539,51541,51543],{"class":222,"line":223},[220,51540,343],{"class":264},[220,51542,347],{"class":420},[220,51544,359],{"class":264},[220,51546,51547,51549,51551],{"class":222,"line":179},[220,51548,364],{"class":264},[220,51550,51456],{"class":420},[220,51552,386],{"class":264},[220,51554,51555,51557,51559],{"class":222,"line":389},[220,51556,402],{"class":264},[220,51558,347],{"class":420},[220,51560,359],{"class":264},[212,51562,51563],{"className":468,"code":51478,"language":469,"meta":178,"style":178},[99,51564,51565,51573,51581],{"__ignoreMap":178},[220,51566,51567,51569,51571],{"class":222,"line":223},[220,51568,343],{"class":264},[220,51570,347],{"class":420},[220,51572,359],{"class":264},[220,51574,51575,51577,51579],{"class":222,"line":179},[220,51576,364],{"class":264},[220,51578,51456],{"class":420},[220,51580,386],{"class":264},[220,51582,51583,51585,51587],{"class":222,"line":389},[220,51584,402],{"class":264},[220,51586,347],{"class":420},[220,51588,359],{"class":264},[212,51590,51592],{"className":251,"code":51591,"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,51593,51594,51604,51608,51622,51626,51635,51639],{"__ignoreMap":178},[220,51595,51596,51598,51600,51602],{"class":222,"line":223},[220,51597,261],{"class":260},[220,51599,11507],{"class":264},[220,51601,268],{"class":260},[220,51603,4007],{"class":230},[220,51605,51606],{"class":222,"line":179},[220,51607,647],{"emptyLinePlaceholder":194},[220,51609,51610,51612,51614,51616,51618,51620],{"class":222,"line":389},[220,51611,1735],{"class":260},[220,51613,1738],{"class":420},[220,51615,1741],{"class":260},[220,51617,1744],{"class":260},[220,51619,1747],{"class":226},[220,51621,1750],{"class":264},[220,51623,51624],{"class":222,"line":399},[220,51625,1765],{"class":264},[220,51627,51628,51630,51633],{"class":222,"line":644},[220,51629,1770],{"class":264},[220,51631,51632],{"class":230},"'Goo'",[220,51634,2465],{"class":264},[220,51636,51637],{"class":222,"line":650},[220,51638,1787],{"class":264},[220,51640,51641],{"class":222,"line":656},[220,51642,1792],{"class":264},[1504,51644,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":51646},[51647,51648],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgoo",{"title":51456,"description":51464},"docs\u002Fcomponents\u002FGoo","2Vgl93mbxzEAMOgjMsJx-Q0kbrlrwgSXhJxx5RwXDyU",{"id":51655,"title":51656,"body":51657,"category":32801,"componentType":25878,"description":51664,"extension":191,"meta":51925,"navigation":194,"path":51926,"requiresChild":194,"seo":51927,"stem":51928,"__hash__":51929},"components\u002Fdocs\u002Fcomponents\u002FGradientMap.md","GradientMap",{"type":8,"value":51658,"toc":51921},[51659,51662,51665,51667,51669,51672,51674,51919],[11,51660,51656],{"id":51661},"gradientmap",[15,51663,51664],{},"Maps source luminance through an animated color gradient (Photoshop-style gradient map)",[31906,51666],{"component":51656},[23,51668,31910],{"id":26528},[31912,51670],{":props":51671},"[{\"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,51673,31918],{"id":31917},[246,51675,51676,51721,51765,51809,51853],{":tabs":1557},[212,51677,51679],{"className":334,"code":51678,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGradientMap>\n \u003CCircle \u002F>\n \u003C\u002FGradientMap>\n\u003C\u002FShader>\n",[99,51680,51681,51689,51697,51705,51713],{"__ignoreMap":178},[220,51682,51683,51685,51687],{"class":222,"line":223},[220,51684,343],{"class":264},[220,51686,347],{"class":346},[220,51688,359],{"class":264},[220,51690,51691,51693,51695],{"class":222,"line":179},[220,51692,364],{"class":264},[220,51694,51656],{"class":346},[220,51696,359],{"class":264},[220,51698,51699,51701,51703],{"class":222,"line":389},[220,51700,2550],{"class":264},[220,51702,2553],{"class":346},[220,51704,386],{"class":264},[220,51706,51707,51709,51711],{"class":222,"line":399},[220,51708,2567],{"class":264},[220,51710,51656],{"class":346},[220,51712,359],{"class":264},[220,51714,51715,51717,51719],{"class":222,"line":644},[220,51716,402],{"class":264},[220,51718,347],{"class":346},[220,51720,359],{"class":264},[212,51722,51723],{"className":409,"code":51678,"language":411,"meta":178,"style":178},[99,51724,51725,51733,51741,51749,51757],{"__ignoreMap":178},[220,51726,51727,51729,51731],{"class":222,"line":223},[220,51728,343],{"class":264},[220,51730,347],{"class":420},[220,51732,359],{"class":264},[220,51734,51735,51737,51739],{"class":222,"line":179},[220,51736,364],{"class":264},[220,51738,51656],{"class":420},[220,51740,359],{"class":264},[220,51742,51743,51745,51747],{"class":222,"line":389},[220,51744,2550],{"class":264},[220,51746,2553],{"class":420},[220,51748,386],{"class":264},[220,51750,51751,51753,51755],{"class":222,"line":399},[220,51752,2567],{"class":264},[220,51754,51656],{"class":420},[220,51756,359],{"class":264},[220,51758,51759,51761,51763],{"class":222,"line":644},[220,51760,402],{"class":264},[220,51762,347],{"class":420},[220,51764,359],{"class":264},[212,51766,51767],{"className":2844,"code":51678,"language":2846,"meta":178,"style":178},[99,51768,51769,51777,51785,51793,51801],{"__ignoreMap":178},[220,51770,51771,51773,51775],{"class":222,"line":223},[220,51772,343],{"class":264},[220,51774,347],{"class":420},[220,51776,359],{"class":264},[220,51778,51779,51781,51783],{"class":222,"line":179},[220,51780,364],{"class":264},[220,51782,51656],{"class":420},[220,51784,359],{"class":264},[220,51786,51787,51789,51791],{"class":222,"line":389},[220,51788,2550],{"class":264},[220,51790,2553],{"class":420},[220,51792,386],{"class":264},[220,51794,51795,51797,51799],{"class":222,"line":399},[220,51796,2567],{"class":264},[220,51798,51656],{"class":420},[220,51800,359],{"class":264},[220,51802,51803,51805,51807],{"class":222,"line":644},[220,51804,402],{"class":264},[220,51806,347],{"class":420},[220,51808,359],{"class":264},[212,51810,51811],{"className":468,"code":51678,"language":469,"meta":178,"style":178},[99,51812,51813,51821,51829,51837,51845],{"__ignoreMap":178},[220,51814,51815,51817,51819],{"class":222,"line":223},[220,51816,343],{"class":264},[220,51818,347],{"class":420},[220,51820,359],{"class":264},[220,51822,51823,51825,51827],{"class":222,"line":179},[220,51824,364],{"class":264},[220,51826,51656],{"class":420},[220,51828,359],{"class":264},[220,51830,51831,51833,51835],{"class":222,"line":389},[220,51832,2550],{"class":264},[220,51834,2553],{"class":420},[220,51836,386],{"class":264},[220,51838,51839,51841,51843],{"class":222,"line":399},[220,51840,2567],{"class":264},[220,51842,51656],{"class":420},[220,51844,359],{"class":264},[220,51846,51847,51849,51851],{"class":222,"line":644},[220,51848,402],{"class":264},[220,51850,347],{"class":420},[220,51852,359],{"class":264},[212,51854,51856],{"className":251,"code":51855,"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,51857,51858,51868,51872,51886,51890,51899,51907,51911,51915],{"__ignoreMap":178},[220,51859,51860,51862,51864,51866],{"class":222,"line":223},[220,51861,261],{"class":260},[220,51863,11507],{"class":264},[220,51865,268],{"class":260},[220,51867,4007],{"class":230},[220,51869,51870],{"class":222,"line":179},[220,51871,647],{"emptyLinePlaceholder":194},[220,51873,51874,51876,51878,51880,51882,51884],{"class":222,"line":389},[220,51875,1735],{"class":260},[220,51877,1738],{"class":420},[220,51879,1741],{"class":260},[220,51881,1744],{"class":260},[220,51883,1747],{"class":226},[220,51885,1750],{"class":264},[220,51887,51888],{"class":222,"line":399},[220,51889,1765],{"class":264},[220,51891,51892,51894,51897],{"class":222,"line":644},[220,51893,1770],{"class":264},[220,51895,51896],{"class":230},"'GradientMap'",[220,51898,7004],{"class":264},[220,51900,51901,51903,51905],{"class":222,"line":650},[220,51902,7009],{"class":264},[220,51904,3206],{"class":230},[220,51906,2465],{"class":264},[220,51908,51909],{"class":222,"line":656},[220,51910,7026],{"class":264},[220,51912,51913],{"class":222,"line":673},[220,51914,1787],{"class":264},[220,51916,51917],{"class":222,"line":682},[220,51918,1792],{"class":264},[1504,51920,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":51922},[51923,51924],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgradientmap",{"title":51656,"description":51664},"docs\u002Fcomponents\u002FGradientMap","zNnOGw0Gv-qEfUF4RuLJpNXFlpSJWeeFk-mSquVUmfU",{"id":51931,"title":51932,"body":51933,"category":36363,"componentType":25878,"description":51940,"extension":191,"meta":52195,"navigation":194,"path":52196,"requiresChild":194,"seo":52197,"stem":52198,"__hash__":52199},"components\u002Fdocs\u002Fcomponents\u002FGrayscale.md","Grayscale",{"type":8,"value":51934,"toc":52192},[51935,51938,51941,51943,51945,52190],[11,51936,51932],{"id":51937},"grayscale",[15,51939,51940],{},"Convert colors to black and white",[31906,51942],{"component":51932},[23,51944,31918],{"id":31917},[246,51946,51947,51992,52036,52080,52124],{":tabs":1557},[212,51948,51950],{"className":334,"code":51949,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle \u002F>\n \u003C\u002FGrayscale>\n\u003C\u002FShader>\n",[99,51951,51952,51960,51968,51976,51984],{"__ignoreMap":178},[220,51953,51954,51956,51958],{"class":222,"line":223},[220,51955,343],{"class":264},[220,51957,347],{"class":346},[220,51959,359],{"class":264},[220,51961,51962,51964,51966],{"class":222,"line":179},[220,51963,364],{"class":264},[220,51965,51932],{"class":346},[220,51967,359],{"class":264},[220,51969,51970,51972,51974],{"class":222,"line":389},[220,51971,2550],{"class":264},[220,51973,2553],{"class":346},[220,51975,386],{"class":264},[220,51977,51978,51980,51982],{"class":222,"line":399},[220,51979,2567],{"class":264},[220,51981,51932],{"class":346},[220,51983,359],{"class":264},[220,51985,51986,51988,51990],{"class":222,"line":644},[220,51987,402],{"class":264},[220,51989,347],{"class":346},[220,51991,359],{"class":264},[212,51993,51994],{"className":409,"code":51949,"language":411,"meta":178,"style":178},[99,51995,51996,52004,52012,52020,52028],{"__ignoreMap":178},[220,51997,51998,52000,52002],{"class":222,"line":223},[220,51999,343],{"class":264},[220,52001,347],{"class":420},[220,52003,359],{"class":264},[220,52005,52006,52008,52010],{"class":222,"line":179},[220,52007,364],{"class":264},[220,52009,51932],{"class":420},[220,52011,359],{"class":264},[220,52013,52014,52016,52018],{"class":222,"line":389},[220,52015,2550],{"class":264},[220,52017,2553],{"class":420},[220,52019,386],{"class":264},[220,52021,52022,52024,52026],{"class":222,"line":399},[220,52023,2567],{"class":264},[220,52025,51932],{"class":420},[220,52027,359],{"class":264},[220,52029,52030,52032,52034],{"class":222,"line":644},[220,52031,402],{"class":264},[220,52033,347],{"class":420},[220,52035,359],{"class":264},[212,52037,52038],{"className":2844,"code":51949,"language":2846,"meta":178,"style":178},[99,52039,52040,52048,52056,52064,52072],{"__ignoreMap":178},[220,52041,52042,52044,52046],{"class":222,"line":223},[220,52043,343],{"class":264},[220,52045,347],{"class":420},[220,52047,359],{"class":264},[220,52049,52050,52052,52054],{"class":222,"line":179},[220,52051,364],{"class":264},[220,52053,51932],{"class":420},[220,52055,359],{"class":264},[220,52057,52058,52060,52062],{"class":222,"line":389},[220,52059,2550],{"class":264},[220,52061,2553],{"class":420},[220,52063,386],{"class":264},[220,52065,52066,52068,52070],{"class":222,"line":399},[220,52067,2567],{"class":264},[220,52069,51932],{"class":420},[220,52071,359],{"class":264},[220,52073,52074,52076,52078],{"class":222,"line":644},[220,52075,402],{"class":264},[220,52077,347],{"class":420},[220,52079,359],{"class":264},[212,52081,52082],{"className":468,"code":51949,"language":469,"meta":178,"style":178},[99,52083,52084,52092,52100,52108,52116],{"__ignoreMap":178},[220,52085,52086,52088,52090],{"class":222,"line":223},[220,52087,343],{"class":264},[220,52089,347],{"class":420},[220,52091,359],{"class":264},[220,52093,52094,52096,52098],{"class":222,"line":179},[220,52095,364],{"class":264},[220,52097,51932],{"class":420},[220,52099,359],{"class":264},[220,52101,52102,52104,52106],{"class":222,"line":389},[220,52103,2550],{"class":264},[220,52105,2553],{"class":420},[220,52107,386],{"class":264},[220,52109,52110,52112,52114],{"class":222,"line":399},[220,52111,2567],{"class":264},[220,52113,51932],{"class":420},[220,52115,359],{"class":264},[220,52117,52118,52120,52122],{"class":222,"line":644},[220,52119,402],{"class":264},[220,52121,347],{"class":420},[220,52123,359],{"class":264},[212,52125,52127],{"className":251,"code":52126,"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,52128,52129,52139,52143,52157,52161,52170,52178,52182,52186],{"__ignoreMap":178},[220,52130,52131,52133,52135,52137],{"class":222,"line":223},[220,52132,261],{"class":260},[220,52134,11507],{"class":264},[220,52136,268],{"class":260},[220,52138,4007],{"class":230},[220,52140,52141],{"class":222,"line":179},[220,52142,647],{"emptyLinePlaceholder":194},[220,52144,52145,52147,52149,52151,52153,52155],{"class":222,"line":389},[220,52146,1735],{"class":260},[220,52148,1738],{"class":420},[220,52150,1741],{"class":260},[220,52152,1744],{"class":260},[220,52154,1747],{"class":226},[220,52156,1750],{"class":264},[220,52158,52159],{"class":222,"line":399},[220,52160,1765],{"class":264},[220,52162,52163,52165,52168],{"class":222,"line":644},[220,52164,1770],{"class":264},[220,52166,52167],{"class":230},"'Grayscale'",[220,52169,7004],{"class":264},[220,52171,52172,52174,52176],{"class":222,"line":650},[220,52173,7009],{"class":264},[220,52175,3206],{"class":230},[220,52177,2465],{"class":264},[220,52179,52180],{"class":222,"line":656},[220,52181,7026],{"class":264},[220,52183,52184],{"class":222,"line":673},[220,52185,1787],{"class":264},[220,52187,52188],{"class":222,"line":682},[220,52189,1792],{"class":264},[1504,52191,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":52193},[52194],{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgrayscale",{"title":51932,"description":51940},"docs\u002Fcomponents\u002FGrayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":52201,"title":52202,"body":52203,"category":33058,"componentType":25872,"description":52210,"extension":191,"meta":52440,"navigation":194,"path":52441,"requiresChild":32525,"seo":52442,"stem":52443,"__hash__":52444},"components\u002Fdocs\u002Fcomponents\u002FGrid.md","Grid",{"type":8,"value":52204,"toc":52436},[52205,52208,52211,52213,52215,52218,52220,52434],[11,52206,52202],{"id":52207},"grid",[15,52209,52210],{},"Simple grid lines pattern with adjustable thickness and rotation",[31906,52212],{"component":52202},[23,52214,31910],{"id":26528},[31912,52216],{":props":52217},"[{\"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,52219,31918],{"id":31917},[246,52221,52222,52262,52300,52338,52376],{":tabs":1557},[212,52223,52225],{"className":334,"code":52224,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,52226,52227,52235,52242,52250,52254],{"__ignoreMap":178},[220,52228,52229,52231,52233],{"class":222,"line":223},[220,52230,343],{"class":264},[220,52232,347],{"class":346},[220,52234,359],{"class":264},[220,52236,52237,52239],{"class":222,"line":179},[220,52238,364],{"class":264},[220,52240,52241],{"class":346},"Grid\n",[220,52243,52244,52246,52248],{"class":222,"line":389},[220,52245,9630],{"class":226},[220,52247,353],{"class":264},[220,52249,9586],{"class":230},[220,52251,52252],{"class":222,"line":399},[220,52253,1234],{"class":264},[220,52255,52256,52258,52260],{"class":222,"line":644},[220,52257,402],{"class":264},[220,52259,347],{"class":346},[220,52261,359],{"class":264},[212,52263,52264],{"className":409,"code":52224,"language":411,"meta":178,"style":178},[99,52265,52266,52274,52280,52288,52292],{"__ignoreMap":178},[220,52267,52268,52270,52272],{"class":222,"line":223},[220,52269,343],{"class":264},[220,52271,347],{"class":420},[220,52273,359],{"class":264},[220,52275,52276,52278],{"class":222,"line":179},[220,52277,364],{"class":264},[220,52279,52241],{"class":420},[220,52281,52282,52284,52286],{"class":222,"line":389},[220,52283,9630],{"class":226},[220,52285,353],{"class":260},[220,52287,9586],{"class":230},[220,52289,52290],{"class":222,"line":399},[220,52291,1234],{"class":264},[220,52293,52294,52296,52298],{"class":222,"line":644},[220,52295,402],{"class":264},[220,52297,347],{"class":420},[220,52299,359],{"class":264},[212,52301,52302],{"className":2844,"code":52224,"language":2846,"meta":178,"style":178},[99,52303,52304,52312,52318,52326,52330],{"__ignoreMap":178},[220,52305,52306,52308,52310],{"class":222,"line":223},[220,52307,343],{"class":264},[220,52309,347],{"class":420},[220,52311,359],{"class":264},[220,52313,52314,52316],{"class":222,"line":179},[220,52315,364],{"class":264},[220,52317,52241],{"class":420},[220,52319,52320,52322,52324],{"class":222,"line":389},[220,52321,9630],{"class":226},[220,52323,353],{"class":264},[220,52325,9586],{"class":230},[220,52327,52328],{"class":222,"line":399},[220,52329,1234],{"class":264},[220,52331,52332,52334,52336],{"class":222,"line":644},[220,52333,402],{"class":264},[220,52335,347],{"class":420},[220,52337,359],{"class":264},[212,52339,52340],{"className":468,"code":52224,"language":469,"meta":178,"style":178},[99,52341,52342,52350,52356,52364,52368],{"__ignoreMap":178},[220,52343,52344,52346,52348],{"class":222,"line":223},[220,52345,343],{"class":264},[220,52347,347],{"class":420},[220,52349,359],{"class":264},[220,52351,52352,52354],{"class":222,"line":179},[220,52353,364],{"class":264},[220,52355,52241],{"class":420},[220,52357,52358,52360,52362],{"class":222,"line":389},[220,52359,9630],{"class":226},[220,52361,353],{"class":260},[220,52363,9586],{"class":230},[220,52365,52366],{"class":222,"line":399},[220,52367,1234],{"class":264},[220,52369,52370,52372,52374],{"class":222,"line":644},[220,52371,402],{"class":264},[220,52373,347],{"class":420},[220,52375,359],{"class":264},[212,52377,52379],{"className":251,"code":52378,"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,52380,52381,52391,52395,52409,52413,52426,52430],{"__ignoreMap":178},[220,52382,52383,52385,52387,52389],{"class":222,"line":223},[220,52384,261],{"class":260},[220,52386,11507],{"class":264},[220,52388,268],{"class":260},[220,52390,4007],{"class":230},[220,52392,52393],{"class":222,"line":179},[220,52394,647],{"emptyLinePlaceholder":194},[220,52396,52397,52399,52401,52403,52405,52407],{"class":222,"line":389},[220,52398,1735],{"class":260},[220,52400,1738],{"class":420},[220,52402,1741],{"class":260},[220,52404,1744],{"class":260},[220,52406,1747],{"class":226},[220,52408,1750],{"class":264},[220,52410,52411],{"class":222,"line":399},[220,52412,1765],{"class":264},[220,52414,52415,52417,52420,52422,52424],{"class":222,"line":644},[220,52416,1770],{"class":264},[220,52418,52419],{"class":230},"'Grid'",[220,52421,1776],{"class":264},[220,52423,10164],{"class":230},[220,52425,1782],{"class":264},[220,52427,52428],{"class":222,"line":650},[220,52429,1787],{"class":264},[220,52431,52432],{"class":222,"line":656},[220,52433,1792],{"class":264},[1504,52435,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52437},[52438,52439],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":52202,"description":52210},"docs\u002Fcomponents\u002FGrid","1XMSdFUazcSJ7SiLxHV6wWlR-aX4sa9sh00vfHXN1MY",{"id":52446,"title":7090,"body":52447,"category":35554,"componentType":25878,"description":52454,"extension":191,"meta":52816,"navigation":194,"path":52817,"requiresChild":194,"seo":52818,"stem":52819,"__hash__":52820},"components\u002Fdocs\u002Fcomponents\u002FGridDistortion.md",{"type":8,"value":52448,"toc":52812},[52449,52452,52455,52457,52459,52462,52464,52810],[11,52450,7090],{"id":52451},"griddistortion",[15,52453,52454],{},"Interactive grid distortion controlled by mouse position",[31906,52456],{"component":7090},[23,52458,31910],{"id":26528},[31912,52460],{":props":52461},"[{\"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,52463,31918],{"id":31917},[246,52465,52466,52530,52601,52667,52737],{":tabs":1557},[212,52467,52469],{"className":334,"code":52468,"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,52470,52471,52479,52486,52494,52502,52506,52514,52522],{"__ignoreMap":178},[220,52472,52473,52475,52477],{"class":222,"line":223},[220,52474,343],{"class":264},[220,52476,347],{"class":346},[220,52478,359],{"class":264},[220,52480,52481,52483],{"class":222,"line":179},[220,52482,364],{"class":264},[220,52484,52485],{"class":346},"GridDistortion\n",[220,52487,52488,52490,52492],{"class":222,"line":389},[220,52489,20366],{"class":226},[220,52491,353],{"class":264},[220,52493,36620],{"class":230},[220,52495,52496,52498,52500],{"class":222,"line":399},[220,52497,17400],{"class":226},[220,52499,353],{"class":264},[220,52501,36620],{"class":230},[220,52503,52504],{"class":222,"line":644},[220,52505,31954],{"class":264},[220,52507,52508,52510,52512],{"class":222,"line":650},[220,52509,2550],{"class":264},[220,52511,2553],{"class":346},[220,52513,386],{"class":264},[220,52515,52516,52518,52520],{"class":222,"line":656},[220,52517,2567],{"class":264},[220,52519,7090],{"class":346},[220,52521,359],{"class":264},[220,52523,52524,52526,52528],{"class":222,"line":673},[220,52525,402],{"class":264},[220,52527,347],{"class":346},[220,52529,359],{"class":264},[212,52531,52533],{"className":409,"code":52532,"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,52534,52535,52543,52549,52561,52573,52577,52585,52593],{"__ignoreMap":178},[220,52536,52537,52539,52541],{"class":222,"line":223},[220,52538,343],{"class":264},[220,52540,347],{"class":420},[220,52542,359],{"class":264},[220,52544,52545,52547],{"class":222,"line":179},[220,52546,364],{"class":264},[220,52548,52485],{"class":420},[220,52550,52551,52553,52555,52557,52559],{"class":222,"line":389},[220,52552,20477],{"class":226},[220,52554,353],{"class":260},[220,52556,743],{"class":264},[220,52558,8672],{"class":420},[220,52560,749],{"class":264},[220,52562,52563,52565,52567,52569,52571],{"class":222,"line":399},[220,52564,9640],{"class":226},[220,52566,353],{"class":260},[220,52568,743],{"class":264},[220,52570,8672],{"class":420},[220,52572,749],{"class":264},[220,52574,52575],{"class":222,"line":644},[220,52576,31954],{"class":264},[220,52578,52579,52581,52583],{"class":222,"line":650},[220,52580,2550],{"class":264},[220,52582,2553],{"class":420},[220,52584,386],{"class":264},[220,52586,52587,52589,52591],{"class":222,"line":656},[220,52588,2567],{"class":264},[220,52590,7090],{"class":420},[220,52592,359],{"class":264},[220,52594,52595,52597,52599],{"class":222,"line":673},[220,52596,402],{"class":264},[220,52598,347],{"class":420},[220,52600,359],{"class":264},[212,52602,52603],{"className":2844,"code":52532,"language":2846,"meta":178,"style":178},[99,52604,52605,52613,52619,52629,52639,52643,52651,52659],{"__ignoreMap":178},[220,52606,52607,52609,52611],{"class":222,"line":223},[220,52608,343],{"class":264},[220,52610,347],{"class":420},[220,52612,359],{"class":264},[220,52614,52615,52617],{"class":222,"line":179},[220,52616,364],{"class":264},[220,52618,52485],{"class":420},[220,52620,52621,52623,52625,52627],{"class":222,"line":389},[220,52622,20477],{"class":226},[220,52624,29866],{"class":264},[220,52626,8672],{"class":420},[220,52628,749],{"class":264},[220,52630,52631,52633,52635,52637],{"class":222,"line":399},[220,52632,9640],{"class":226},[220,52634,29866],{"class":264},[220,52636,8672],{"class":420},[220,52638,749],{"class":264},[220,52640,52641],{"class":222,"line":644},[220,52642,31954],{"class":264},[220,52644,52645,52647,52649],{"class":222,"line":650},[220,52646,2550],{"class":264},[220,52648,2553],{"class":420},[220,52650,386],{"class":264},[220,52652,52653,52655,52657],{"class":222,"line":656},[220,52654,2567],{"class":264},[220,52656,7090],{"class":420},[220,52658,359],{"class":264},[220,52660,52661,52663,52665],{"class":222,"line":673},[220,52662,402],{"class":264},[220,52664,347],{"class":420},[220,52666,359],{"class":264},[212,52668,52669],{"className":468,"code":52532,"language":469,"meta":178,"style":178},[99,52670,52671,52679,52685,52697,52709,52713,52721,52729],{"__ignoreMap":178},[220,52672,52673,52675,52677],{"class":222,"line":223},[220,52674,343],{"class":264},[220,52676,347],{"class":420},[220,52678,359],{"class":264},[220,52680,52681,52683],{"class":222,"line":179},[220,52682,364],{"class":264},[220,52684,52485],{"class":420},[220,52686,52687,52689,52691,52693,52695],{"class":222,"line":389},[220,52688,20477],{"class":226},[220,52690,353],{"class":260},[220,52692,743],{"class":264},[220,52694,8672],{"class":420},[220,52696,749],{"class":264},[220,52698,52699,52701,52703,52705,52707],{"class":222,"line":399},[220,52700,9640],{"class":226},[220,52702,353],{"class":260},[220,52704,743],{"class":264},[220,52706,8672],{"class":420},[220,52708,749],{"class":264},[220,52710,52711],{"class":222,"line":644},[220,52712,31954],{"class":264},[220,52714,52715,52717,52719],{"class":222,"line":650},[220,52716,2550],{"class":264},[220,52718,2553],{"class":420},[220,52720,386],{"class":264},[220,52722,52723,52725,52727],{"class":222,"line":656},[220,52724,2567],{"class":264},[220,52726,7090],{"class":420},[220,52728,359],{"class":264},[220,52730,52731,52733,52735],{"class":222,"line":673},[220,52732,402],{"class":264},[220,52734,347],{"class":420},[220,52736,359],{"class":264},[212,52738,52740],{"className":251,"code":52739,"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,52741,52742,52752,52756,52770,52774,52790,52798,52802,52806],{"__ignoreMap":178},[220,52743,52744,52746,52748,52750],{"class":222,"line":223},[220,52745,261],{"class":260},[220,52747,11507],{"class":264},[220,52749,268],{"class":260},[220,52751,4007],{"class":230},[220,52753,52754],{"class":222,"line":179},[220,52755,647],{"emptyLinePlaceholder":194},[220,52757,52758,52760,52762,52764,52766,52768],{"class":222,"line":389},[220,52759,1735],{"class":260},[220,52761,1738],{"class":420},[220,52763,1741],{"class":260},[220,52765,1744],{"class":260},[220,52767,1747],{"class":226},[220,52769,1750],{"class":264},[220,52771,52772],{"class":222,"line":399},[220,52773,1765],{"class":264},[220,52775,52776,52778,52780,52782,52784,52786,52788],{"class":222,"line":644},[220,52777,1770],{"class":264},[220,52779,7533],{"class":230},[220,52781,32198],{"class":264},[220,52783,8672],{"class":420},[220,52785,6561],{"class":264},[220,52787,8672],{"class":420},[220,52789,7541],{"class":264},[220,52791,52792,52794,52796],{"class":222,"line":650},[220,52793,7009],{"class":264},[220,52795,3206],{"class":230},[220,52797,2465],{"class":264},[220,52799,52800],{"class":222,"line":656},[220,52801,7026],{"class":264},[220,52803,52804],{"class":222,"line":673},[220,52805,1787],{"class":264},[220,52807,52808],{"class":222,"line":682},[220,52809,1792],{"class":264},[1504,52811,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":52813},[52814,52815],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fgriddistortion",{"title":7090,"description":52454},"docs\u002Fcomponents\u002FGridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":52822,"title":52823,"body":52824,"category":53086,"componentType":25878,"description":52831,"extension":191,"meta":53087,"navigation":194,"path":53088,"requiresChild":194,"seo":53089,"stem":53090,"__hash__":53091},"components\u002Fdocs\u002Fcomponents\u002FGroup.md","Group",{"type":8,"value":52825,"toc":53083},[52826,52829,52832,52834,52836,53081],[11,52827,52823],{"id":52828},"group",[15,52830,52831],{},"Container for organizing and composing child effects — supports flex-like flow layout (column\u002Frow stacking via the flow prop)",[31906,52833],{"component":52823},[23,52835,31918],{"id":31917},[246,52837,52838,52883,52927,52971,53015],{":tabs":1557},[212,52839,52841],{"className":334,"code":52840,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CGroup>\n \u003CCircle \u002F>\n \u003C\u002FGroup>\n\u003C\u002FShader>\n",[99,52842,52843,52851,52859,52867,52875],{"__ignoreMap":178},[220,52844,52845,52847,52849],{"class":222,"line":223},[220,52846,343],{"class":264},[220,52848,347],{"class":346},[220,52850,359],{"class":264},[220,52852,52853,52855,52857],{"class":222,"line":179},[220,52854,364],{"class":264},[220,52856,52823],{"class":346},[220,52858,359],{"class":264},[220,52860,52861,52863,52865],{"class":222,"line":389},[220,52862,2550],{"class":264},[220,52864,2553],{"class":346},[220,52866,386],{"class":264},[220,52868,52869,52871,52873],{"class":222,"line":399},[220,52870,2567],{"class":264},[220,52872,52823],{"class":346},[220,52874,359],{"class":264},[220,52876,52877,52879,52881],{"class":222,"line":644},[220,52878,402],{"class":264},[220,52880,347],{"class":346},[220,52882,359],{"class":264},[212,52884,52885],{"className":409,"code":52840,"language":411,"meta":178,"style":178},[99,52886,52887,52895,52903,52911,52919],{"__ignoreMap":178},[220,52888,52889,52891,52893],{"class":222,"line":223},[220,52890,343],{"class":264},[220,52892,347],{"class":420},[220,52894,359],{"class":264},[220,52896,52897,52899,52901],{"class":222,"line":179},[220,52898,364],{"class":264},[220,52900,52823],{"class":420},[220,52902,359],{"class":264},[220,52904,52905,52907,52909],{"class":222,"line":389},[220,52906,2550],{"class":264},[220,52908,2553],{"class":420},[220,52910,386],{"class":264},[220,52912,52913,52915,52917],{"class":222,"line":399},[220,52914,2567],{"class":264},[220,52916,52823],{"class":420},[220,52918,359],{"class":264},[220,52920,52921,52923,52925],{"class":222,"line":644},[220,52922,402],{"class":264},[220,52924,347],{"class":420},[220,52926,359],{"class":264},[212,52928,52929],{"className":2844,"code":52840,"language":2846,"meta":178,"style":178},[99,52930,52931,52939,52947,52955,52963],{"__ignoreMap":178},[220,52932,52933,52935,52937],{"class":222,"line":223},[220,52934,343],{"class":264},[220,52936,347],{"class":420},[220,52938,359],{"class":264},[220,52940,52941,52943,52945],{"class":222,"line":179},[220,52942,364],{"class":264},[220,52944,52823],{"class":420},[220,52946,359],{"class":264},[220,52948,52949,52951,52953],{"class":222,"line":389},[220,52950,2550],{"class":264},[220,52952,2553],{"class":420},[220,52954,386],{"class":264},[220,52956,52957,52959,52961],{"class":222,"line":399},[220,52958,2567],{"class":264},[220,52960,52823],{"class":420},[220,52962,359],{"class":264},[220,52964,52965,52967,52969],{"class":222,"line":644},[220,52966,402],{"class":264},[220,52968,347],{"class":420},[220,52970,359],{"class":264},[212,52972,52973],{"className":468,"code":52840,"language":469,"meta":178,"style":178},[99,52974,52975,52983,52991,52999,53007],{"__ignoreMap":178},[220,52976,52977,52979,52981],{"class":222,"line":223},[220,52978,343],{"class":264},[220,52980,347],{"class":420},[220,52982,359],{"class":264},[220,52984,52985,52987,52989],{"class":222,"line":179},[220,52986,364],{"class":264},[220,52988,52823],{"class":420},[220,52990,359],{"class":264},[220,52992,52993,52995,52997],{"class":222,"line":389},[220,52994,2550],{"class":264},[220,52996,2553],{"class":420},[220,52998,386],{"class":264},[220,53000,53001,53003,53005],{"class":222,"line":399},[220,53002,2567],{"class":264},[220,53004,52823],{"class":420},[220,53006,359],{"class":264},[220,53008,53009,53011,53013],{"class":222,"line":644},[220,53010,402],{"class":264},[220,53012,347],{"class":420},[220,53014,359],{"class":264},[212,53016,53018],{"className":251,"code":53017,"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,53019,53020,53030,53034,53048,53052,53061,53069,53073,53077],{"__ignoreMap":178},[220,53021,53022,53024,53026,53028],{"class":222,"line":223},[220,53023,261],{"class":260},[220,53025,11507],{"class":264},[220,53027,268],{"class":260},[220,53029,4007],{"class":230},[220,53031,53032],{"class":222,"line":179},[220,53033,647],{"emptyLinePlaceholder":194},[220,53035,53036,53038,53040,53042,53044,53046],{"class":222,"line":389},[220,53037,1735],{"class":260},[220,53039,1738],{"class":420},[220,53041,1741],{"class":260},[220,53043,1744],{"class":260},[220,53045,1747],{"class":226},[220,53047,1750],{"class":264},[220,53049,53050],{"class":222,"line":399},[220,53051,1765],{"class":264},[220,53053,53054,53056,53059],{"class":222,"line":644},[220,53055,1770],{"class":264},[220,53057,53058],{"class":230},"'Group'",[220,53060,7004],{"class":264},[220,53062,53063,53065,53067],{"class":222,"line":650},[220,53064,7009],{"class":264},[220,53066,3206],{"class":230},[220,53068,2465],{"class":264},[220,53070,53071],{"class":222,"line":656},[220,53072,7026],{"class":264},[220,53074,53075],{"class":222,"line":673},[220,53076,1787],{"class":264},[220,53078,53079],{"class":222,"line":682},[220,53080,1792],{"class":264},[1504,53082,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":53084},[53085],{"id":31917,"depth":179,"text":31918},"Utilities",{},"\u002Fdocs\u002Fcomponents\u002Fgroup",{"title":52823,"description":52831},"docs\u002Fcomponents\u002FGroup","VRm3A9h-85RvRmiecZuaIcK_SKxGDs5Woe18hQVpFfg",{"id":53093,"title":53094,"body":53095,"category":33058,"componentType":25872,"description":53102,"extension":191,"meta":53287,"navigation":194,"path":53288,"requiresChild":32525,"seo":53289,"stem":53290,"__hash__":53291},"components\u002Fdocs\u002Fcomponents\u002FHTMLInCanvas.md","HTMLInCanvas",{"type":8,"value":53096,"toc":53284},[53097,53100,53103,53109,53111,53113,53282],[11,53098,53094],{"id":53099},"htmlincanvas",[15,53101,53102],{},"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.",[53104,53105],"experimental-warning",{"link-label":53106,"link-url":53107,"message":53108},"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.",[31906,53110],{"component":53094},[23,53112,31918],{"id":31917},[246,53114,53115,53144,53172,53200,53228],{":tabs":1557},[212,53116,53118],{"className":334,"code":53117,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHTMLInCanvas \u002F>\n\u003C\u002FShader>\n",[99,53119,53120,53128,53136],{"__ignoreMap":178},[220,53121,53122,53124,53126],{"class":222,"line":223},[220,53123,343],{"class":264},[220,53125,347],{"class":346},[220,53127,359],{"class":264},[220,53129,53130,53132,53134],{"class":222,"line":179},[220,53131,364],{"class":264},[220,53133,53094],{"class":346},[220,53135,386],{"class":264},[220,53137,53138,53140,53142],{"class":222,"line":389},[220,53139,402],{"class":264},[220,53141,347],{"class":346},[220,53143,359],{"class":264},[212,53145,53146],{"className":409,"code":53117,"language":411,"meta":178,"style":178},[99,53147,53148,53156,53164],{"__ignoreMap":178},[220,53149,53150,53152,53154],{"class":222,"line":223},[220,53151,343],{"class":264},[220,53153,347],{"class":420},[220,53155,359],{"class":264},[220,53157,53158,53160,53162],{"class":222,"line":179},[220,53159,364],{"class":264},[220,53161,53094],{"class":420},[220,53163,386],{"class":264},[220,53165,53166,53168,53170],{"class":222,"line":389},[220,53167,402],{"class":264},[220,53169,347],{"class":420},[220,53171,359],{"class":264},[212,53173,53174],{"className":2844,"code":53117,"language":2846,"meta":178,"style":178},[99,53175,53176,53184,53192],{"__ignoreMap":178},[220,53177,53178,53180,53182],{"class":222,"line":223},[220,53179,343],{"class":264},[220,53181,347],{"class":420},[220,53183,359],{"class":264},[220,53185,53186,53188,53190],{"class":222,"line":179},[220,53187,364],{"class":264},[220,53189,53094],{"class":420},[220,53191,386],{"class":264},[220,53193,53194,53196,53198],{"class":222,"line":389},[220,53195,402],{"class":264},[220,53197,347],{"class":420},[220,53199,359],{"class":264},[212,53201,53202],{"className":468,"code":53117,"language":469,"meta":178,"style":178},[99,53203,53204,53212,53220],{"__ignoreMap":178},[220,53205,53206,53208,53210],{"class":222,"line":223},[220,53207,343],{"class":264},[220,53209,347],{"class":420},[220,53211,359],{"class":264},[220,53213,53214,53216,53218],{"class":222,"line":179},[220,53215,364],{"class":264},[220,53217,53094],{"class":420},[220,53219,386],{"class":264},[220,53221,53222,53224,53226],{"class":222,"line":389},[220,53223,402],{"class":264},[220,53225,347],{"class":420},[220,53227,359],{"class":264},[212,53229,53231],{"className":251,"code":53230,"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,53232,53233,53243,53247,53261,53265,53274,53278],{"__ignoreMap":178},[220,53234,53235,53237,53239,53241],{"class":222,"line":223},[220,53236,261],{"class":260},[220,53238,11507],{"class":264},[220,53240,268],{"class":260},[220,53242,4007],{"class":230},[220,53244,53245],{"class":222,"line":179},[220,53246,647],{"emptyLinePlaceholder":194},[220,53248,53249,53251,53253,53255,53257,53259],{"class":222,"line":389},[220,53250,1735],{"class":260},[220,53252,1738],{"class":420},[220,53254,1741],{"class":260},[220,53256,1744],{"class":260},[220,53258,1747],{"class":226},[220,53260,1750],{"class":264},[220,53262,53263],{"class":222,"line":399},[220,53264,1765],{"class":264},[220,53266,53267,53269,53272],{"class":222,"line":644},[220,53268,1770],{"class":264},[220,53270,53271],{"class":230},"'HTMLInCanvas'",[220,53273,2465],{"class":264},[220,53275,53276],{"class":222,"line":650},[220,53277,1787],{"class":264},[220,53279,53280],{"class":222,"line":656},[220,53281,1792],{"class":264},[1504,53283,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":53285},[53286],{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fhtmlincanvas",{"title":53094,"description":53102},"docs\u002Fcomponents\u002FHTMLInCanvas","1gpE_BrWAlIJQU2c02pY_YKYJGKOk5b4LGNpVcA27co",{"id":53293,"title":53294,"body":53295,"category":32801,"componentType":25878,"description":53302,"extension":191,"meta":53563,"navigation":194,"path":53564,"requiresChild":194,"seo":53565,"stem":53566,"__hash__":53567},"components\u002Fdocs\u002Fcomponents\u002FHalftone.md","Halftone",{"type":8,"value":53296,"toc":53559},[53297,53300,53303,53305,53307,53310,53312,53557],[11,53298,53294],{"id":53299},"halftone",[15,53301,53302],{},"Halftone dot pattern effect for printing aesthetics",[31906,53304],{"component":53294},[23,53306,31910],{"id":26528},[31912,53308],{":props":53309},"[{\"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,53311,31918],{"id":31917},[246,53313,53314,53359,53403,53447,53491],{":tabs":1557},[212,53315,53317],{"className":334,"code":53316,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHalftone>\n \u003CCircle \u002F>\n \u003C\u002FHalftone>\n\u003C\u002FShader>\n",[99,53318,53319,53327,53335,53343,53351],{"__ignoreMap":178},[220,53320,53321,53323,53325],{"class":222,"line":223},[220,53322,343],{"class":264},[220,53324,347],{"class":346},[220,53326,359],{"class":264},[220,53328,53329,53331,53333],{"class":222,"line":179},[220,53330,364],{"class":264},[220,53332,53294],{"class":346},[220,53334,359],{"class":264},[220,53336,53337,53339,53341],{"class":222,"line":389},[220,53338,2550],{"class":264},[220,53340,2553],{"class":346},[220,53342,386],{"class":264},[220,53344,53345,53347,53349],{"class":222,"line":399},[220,53346,2567],{"class":264},[220,53348,53294],{"class":346},[220,53350,359],{"class":264},[220,53352,53353,53355,53357],{"class":222,"line":644},[220,53354,402],{"class":264},[220,53356,347],{"class":346},[220,53358,359],{"class":264},[212,53360,53361],{"className":409,"code":53316,"language":411,"meta":178,"style":178},[99,53362,53363,53371,53379,53387,53395],{"__ignoreMap":178},[220,53364,53365,53367,53369],{"class":222,"line":223},[220,53366,343],{"class":264},[220,53368,347],{"class":420},[220,53370,359],{"class":264},[220,53372,53373,53375,53377],{"class":222,"line":179},[220,53374,364],{"class":264},[220,53376,53294],{"class":420},[220,53378,359],{"class":264},[220,53380,53381,53383,53385],{"class":222,"line":389},[220,53382,2550],{"class":264},[220,53384,2553],{"class":420},[220,53386,386],{"class":264},[220,53388,53389,53391,53393],{"class":222,"line":399},[220,53390,2567],{"class":264},[220,53392,53294],{"class":420},[220,53394,359],{"class":264},[220,53396,53397,53399,53401],{"class":222,"line":644},[220,53398,402],{"class":264},[220,53400,347],{"class":420},[220,53402,359],{"class":264},[212,53404,53405],{"className":2844,"code":53316,"language":2846,"meta":178,"style":178},[99,53406,53407,53415,53423,53431,53439],{"__ignoreMap":178},[220,53408,53409,53411,53413],{"class":222,"line":223},[220,53410,343],{"class":264},[220,53412,347],{"class":420},[220,53414,359],{"class":264},[220,53416,53417,53419,53421],{"class":222,"line":179},[220,53418,364],{"class":264},[220,53420,53294],{"class":420},[220,53422,359],{"class":264},[220,53424,53425,53427,53429],{"class":222,"line":389},[220,53426,2550],{"class":264},[220,53428,2553],{"class":420},[220,53430,386],{"class":264},[220,53432,53433,53435,53437],{"class":222,"line":399},[220,53434,2567],{"class":264},[220,53436,53294],{"class":420},[220,53438,359],{"class":264},[220,53440,53441,53443,53445],{"class":222,"line":644},[220,53442,402],{"class":264},[220,53444,347],{"class":420},[220,53446,359],{"class":264},[212,53448,53449],{"className":468,"code":53316,"language":469,"meta":178,"style":178},[99,53450,53451,53459,53467,53475,53483],{"__ignoreMap":178},[220,53452,53453,53455,53457],{"class":222,"line":223},[220,53454,343],{"class":264},[220,53456,347],{"class":420},[220,53458,359],{"class":264},[220,53460,53461,53463,53465],{"class":222,"line":179},[220,53462,364],{"class":264},[220,53464,53294],{"class":420},[220,53466,359],{"class":264},[220,53468,53469,53471,53473],{"class":222,"line":389},[220,53470,2550],{"class":264},[220,53472,2553],{"class":420},[220,53474,386],{"class":264},[220,53476,53477,53479,53481],{"class":222,"line":399},[220,53478,2567],{"class":264},[220,53480,53294],{"class":420},[220,53482,359],{"class":264},[220,53484,53485,53487,53489],{"class":222,"line":644},[220,53486,402],{"class":264},[220,53488,347],{"class":420},[220,53490,359],{"class":264},[212,53492,53494],{"className":251,"code":53493,"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,53495,53496,53506,53510,53524,53528,53537,53545,53549,53553],{"__ignoreMap":178},[220,53497,53498,53500,53502,53504],{"class":222,"line":223},[220,53499,261],{"class":260},[220,53501,11507],{"class":264},[220,53503,268],{"class":260},[220,53505,4007],{"class":230},[220,53507,53508],{"class":222,"line":179},[220,53509,647],{"emptyLinePlaceholder":194},[220,53511,53512,53514,53516,53518,53520,53522],{"class":222,"line":389},[220,53513,1735],{"class":260},[220,53515,1738],{"class":420},[220,53517,1741],{"class":260},[220,53519,1744],{"class":260},[220,53521,1747],{"class":226},[220,53523,1750],{"class":264},[220,53525,53526],{"class":222,"line":399},[220,53527,1765],{"class":264},[220,53529,53530,53532,53535],{"class":222,"line":644},[220,53531,1770],{"class":264},[220,53533,53534],{"class":230},"'Halftone'",[220,53536,7004],{"class":264},[220,53538,53539,53541,53543],{"class":222,"line":650},[220,53540,7009],{"class":264},[220,53542,3206],{"class":230},[220,53544,2465],{"class":264},[220,53546,53547],{"class":222,"line":656},[220,53548,7026],{"class":264},[220,53550,53551],{"class":222,"line":673},[220,53552,1787],{"class":264},[220,53554,53555],{"class":222,"line":682},[220,53556,1792],{"class":264},[1504,53558,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":53560},[53561,53562],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fhalftone",{"title":53294,"description":53302},"docs\u002Fcomponents\u002FHalftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":53569,"title":53570,"body":53571,"category":15903,"componentType":25872,"description":53578,"extension":191,"meta":53857,"navigation":194,"path":53858,"requiresChild":32525,"seo":53859,"stem":53860,"__hash__":53861},"components\u002Fdocs\u002Fcomponents\u002FHeart.md","Heart",{"type":8,"value":53572,"toc":53853},[53573,53576,53579,53581,53583,53586,53588,53851],[11,53574,53570],{"id":53575},"heart",[15,53577,53578],{},"Heart shape with adjustable size",[31906,53580],{"component":53570},[23,53582,31910],{"id":26528},[31912,53584],{":props":53585},"[{\"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,53587,31918],{"id":31917},[246,53589,53590,53639,53691,53739,53789],{":tabs":1557},[212,53591,53593],{"className":334,"code":53592,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n :radius=\"0.32\"\n \u002F>\n\u003C\u002FShader>\n",[99,53594,53595,53603,53610,53618,53627,53631],{"__ignoreMap":178},[220,53596,53597,53599,53601],{"class":222,"line":223},[220,53598,343],{"class":264},[220,53600,347],{"class":346},[220,53602,359],{"class":264},[220,53604,53605,53607],{"class":222,"line":179},[220,53606,364],{"class":264},[220,53608,53609],{"class":346},"Heart\n",[220,53611,53612,53614,53616],{"class":222,"line":389},[220,53613,9630],{"class":226},[220,53615,353],{"class":264},[220,53617,9586],{"class":230},[220,53619,53620,53622,53624],{"class":222,"line":399},[220,53621,17400],{"class":226},[220,53623,353],{"class":264},[220,53625,53626],{"class":230},"\"0.32\"\n",[220,53628,53629],{"class":222,"line":644},[220,53630,1234],{"class":264},[220,53632,53633,53635,53637],{"class":222,"line":650},[220,53634,402],{"class":264},[220,53636,347],{"class":346},[220,53638,359],{"class":264},[212,53640,53642],{"className":409,"code":53641,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CHeart\n color=\"#ffffff\"\n radius={0.32}\n \u002F>\n\u003C\u002FShader>\n",[99,53643,53644,53652,53658,53666,53679,53683],{"__ignoreMap":178},[220,53645,53646,53648,53650],{"class":222,"line":223},[220,53647,343],{"class":264},[220,53649,347],{"class":420},[220,53651,359],{"class":264},[220,53653,53654,53656],{"class":222,"line":179},[220,53655,364],{"class":264},[220,53657,53609],{"class":420},[220,53659,53660,53662,53664],{"class":222,"line":389},[220,53661,9630],{"class":226},[220,53663,353],{"class":260},[220,53665,9586],{"class":230},[220,53667,53668,53670,53672,53674,53677],{"class":222,"line":399},[220,53669,9640],{"class":226},[220,53671,353],{"class":260},[220,53673,743],{"class":264},[220,53675,53676],{"class":420},"0.32",[220,53678,749],{"class":264},[220,53680,53681],{"class":222,"line":644},[220,53682,1234],{"class":264},[220,53684,53685,53687,53689],{"class":222,"line":650},[220,53686,402],{"class":264},[220,53688,347],{"class":420},[220,53690,359],{"class":264},[212,53692,53693],{"className":2844,"code":53641,"language":2846,"meta":178,"style":178},[99,53694,53695,53703,53709,53717,53727,53731],{"__ignoreMap":178},[220,53696,53697,53699,53701],{"class":222,"line":223},[220,53698,343],{"class":264},[220,53700,347],{"class":420},[220,53702,359],{"class":264},[220,53704,53705,53707],{"class":222,"line":179},[220,53706,364],{"class":264},[220,53708,53609],{"class":420},[220,53710,53711,53713,53715],{"class":222,"line":389},[220,53712,9630],{"class":226},[220,53714,353],{"class":264},[220,53716,9586],{"class":230},[220,53718,53719,53721,53723,53725],{"class":222,"line":399},[220,53720,9640],{"class":226},[220,53722,29866],{"class":264},[220,53724,53676],{"class":420},[220,53726,749],{"class":264},[220,53728,53729],{"class":222,"line":644},[220,53730,1234],{"class":264},[220,53732,53733,53735,53737],{"class":222,"line":650},[220,53734,402],{"class":264},[220,53736,347],{"class":420},[220,53738,359],{"class":264},[212,53740,53741],{"className":468,"code":53641,"language":469,"meta":178,"style":178},[99,53742,53743,53751,53757,53765,53777,53781],{"__ignoreMap":178},[220,53744,53745,53747,53749],{"class":222,"line":223},[220,53746,343],{"class":264},[220,53748,347],{"class":420},[220,53750,359],{"class":264},[220,53752,53753,53755],{"class":222,"line":179},[220,53754,364],{"class":264},[220,53756,53609],{"class":420},[220,53758,53759,53761,53763],{"class":222,"line":389},[220,53760,9630],{"class":226},[220,53762,353],{"class":260},[220,53764,9586],{"class":230},[220,53766,53767,53769,53771,53773,53775],{"class":222,"line":399},[220,53768,9640],{"class":226},[220,53770,353],{"class":260},[220,53772,743],{"class":264},[220,53774,53676],{"class":420},[220,53776,749],{"class":264},[220,53778,53779],{"class":222,"line":644},[220,53780,1234],{"class":264},[220,53782,53783,53785,53787],{"class":222,"line":650},[220,53784,402],{"class":264},[220,53786,347],{"class":420},[220,53788,359],{"class":264},[212,53790,53792],{"className":251,"code":53791,"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,53793,53794,53804,53808,53822,53826,53843,53847],{"__ignoreMap":178},[220,53795,53796,53798,53800,53802],{"class":222,"line":223},[220,53797,261],{"class":260},[220,53799,11507],{"class":264},[220,53801,268],{"class":260},[220,53803,4007],{"class":230},[220,53805,53806],{"class":222,"line":179},[220,53807,647],{"emptyLinePlaceholder":194},[220,53809,53810,53812,53814,53816,53818,53820],{"class":222,"line":389},[220,53811,1735],{"class":260},[220,53813,1738],{"class":420},[220,53815,1741],{"class":260},[220,53817,1744],{"class":260},[220,53819,1747],{"class":226},[220,53821,1750],{"class":264},[220,53823,53824],{"class":222,"line":399},[220,53825,1765],{"class":264},[220,53827,53828,53830,53833,53835,53837,53839,53841],{"class":222,"line":644},[220,53829,1770],{"class":264},[220,53831,53832],{"class":230},"'Heart'",[220,53834,1776],{"class":264},[220,53836,10164],{"class":230},[220,53838,6561],{"class":264},[220,53840,53676],{"class":420},[220,53842,1782],{"class":264},[220,53844,53845],{"class":222,"line":650},[220,53846,1787],{"class":264},[220,53848,53849],{"class":222,"line":656},[220,53850,1792],{"class":264},[1504,53852,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":53854},[53855,53856],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fheart",{"title":53570,"description":53578},"docs\u002Fcomponents\u002FHeart","9qJUX_iZbER0G90iX1Faiw87lyQlVzOxytAkQD33dTU",{"id":53863,"title":53864,"body":53865,"category":36564,"componentType":25872,"description":54062,"extension":191,"meta":54063,"navigation":194,"path":54064,"requiresChild":32525,"seo":54065,"stem":54066,"__hash__":54067},"components\u002Fdocs\u002Fcomponents\u002FHeatmap.md","Heatmap",{"type":8,"value":53866,"toc":54058},[53867,53870,53878,53880,53882,53885,53887,54056],[11,53868,53864],{"id":53869},"heatmap",[15,53871,53872,53873,4831],{},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by ",[56,53874,53877],{"href":53875,"rel":53876},"https:\u002F\u002Fshaders.paper.design",[167],"Paper Shaders",[31906,53879],{"component":53864},[23,53881,31910],{"id":26528},[31912,53883],{":props":53884},"[{\"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,53886,31918],{"id":31917},[246,53888,53889,53918,53946,53974,54002],{":tabs":1557},[212,53890,53892],{"className":334,"code":53891,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHeatmap \u002F>\n\u003C\u002FShader>\n",[99,53893,53894,53902,53910],{"__ignoreMap":178},[220,53895,53896,53898,53900],{"class":222,"line":223},[220,53897,343],{"class":264},[220,53899,347],{"class":346},[220,53901,359],{"class":264},[220,53903,53904,53906,53908],{"class":222,"line":179},[220,53905,364],{"class":264},[220,53907,53864],{"class":346},[220,53909,386],{"class":264},[220,53911,53912,53914,53916],{"class":222,"line":389},[220,53913,402],{"class":264},[220,53915,347],{"class":346},[220,53917,359],{"class":264},[212,53919,53920],{"className":409,"code":53891,"language":411,"meta":178,"style":178},[99,53921,53922,53930,53938],{"__ignoreMap":178},[220,53923,53924,53926,53928],{"class":222,"line":223},[220,53925,343],{"class":264},[220,53927,347],{"class":420},[220,53929,359],{"class":264},[220,53931,53932,53934,53936],{"class":222,"line":179},[220,53933,364],{"class":264},[220,53935,53864],{"class":420},[220,53937,386],{"class":264},[220,53939,53940,53942,53944],{"class":222,"line":389},[220,53941,402],{"class":264},[220,53943,347],{"class":420},[220,53945,359],{"class":264},[212,53947,53948],{"className":2844,"code":53891,"language":2846,"meta":178,"style":178},[99,53949,53950,53958,53966],{"__ignoreMap":178},[220,53951,53952,53954,53956],{"class":222,"line":223},[220,53953,343],{"class":264},[220,53955,347],{"class":420},[220,53957,359],{"class":264},[220,53959,53960,53962,53964],{"class":222,"line":179},[220,53961,364],{"class":264},[220,53963,53864],{"class":420},[220,53965,386],{"class":264},[220,53967,53968,53970,53972],{"class":222,"line":389},[220,53969,402],{"class":264},[220,53971,347],{"class":420},[220,53973,359],{"class":264},[212,53975,53976],{"className":468,"code":53891,"language":469,"meta":178,"style":178},[99,53977,53978,53986,53994],{"__ignoreMap":178},[220,53979,53980,53982,53984],{"class":222,"line":223},[220,53981,343],{"class":264},[220,53983,347],{"class":420},[220,53985,359],{"class":264},[220,53987,53988,53990,53992],{"class":222,"line":179},[220,53989,364],{"class":264},[220,53991,53864],{"class":420},[220,53993,386],{"class":264},[220,53995,53996,53998,54000],{"class":222,"line":389},[220,53997,402],{"class":264},[220,53999,347],{"class":420},[220,54001,359],{"class":264},[212,54003,54005],{"className":251,"code":54004,"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,54006,54007,54017,54021,54035,54039,54048,54052],{"__ignoreMap":178},[220,54008,54009,54011,54013,54015],{"class":222,"line":223},[220,54010,261],{"class":260},[220,54012,11507],{"class":264},[220,54014,268],{"class":260},[220,54016,4007],{"class":230},[220,54018,54019],{"class":222,"line":179},[220,54020,647],{"emptyLinePlaceholder":194},[220,54022,54023,54025,54027,54029,54031,54033],{"class":222,"line":389},[220,54024,1735],{"class":260},[220,54026,1738],{"class":420},[220,54028,1741],{"class":260},[220,54030,1744],{"class":260},[220,54032,1747],{"class":226},[220,54034,1750],{"class":264},[220,54036,54037],{"class":222,"line":399},[220,54038,1765],{"class":264},[220,54040,54041,54043,54046],{"class":222,"line":644},[220,54042,1770],{"class":264},[220,54044,54045],{"class":230},"'Heatmap'",[220,54047,2465],{"class":264},[220,54049,54050],{"class":222,"line":650},[220,54051,1787],{"class":264},[220,54053,54054],{"class":222,"line":656},[220,54055,1792],{"class":264},[1504,54057,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":54059},[54060,54061],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Thermal-camera heat flowing through any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Fheatmap",{"title":53864,"description":54062},"docs\u002Fcomponents\u002FHeatmap","f_FNv8lLbR6y7HozaHslnFNDGZMnqWX84U84korSCn8",{"id":54069,"title":54070,"body":54071,"category":33058,"componentType":25872,"description":54078,"extension":191,"meta":54263,"navigation":194,"path":54264,"requiresChild":32525,"seo":54265,"stem":54266,"__hash__":54267},"components\u002Fdocs\u002Fcomponents\u002FHexGrid.md","HexGrid",{"type":8,"value":54072,"toc":54259},[54073,54076,54079,54081,54083,54086,54088,54257],[11,54074,54070],{"id":54075},"hexgrid",[15,54077,54078],{},"Honeycomb hexagonal grid pattern",[31906,54080],{"component":54070},[23,54082,31910],{"id":26528},[31912,54084],{":props":54085},"[{\"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,54087,31918],{"id":31917},[246,54089,54090,54119,54147,54175,54203],{":tabs":1557},[212,54091,54093],{"className":334,"code":54092,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHexGrid \u002F>\n\u003C\u002FShader>\n",[99,54094,54095,54103,54111],{"__ignoreMap":178},[220,54096,54097,54099,54101],{"class":222,"line":223},[220,54098,343],{"class":264},[220,54100,347],{"class":346},[220,54102,359],{"class":264},[220,54104,54105,54107,54109],{"class":222,"line":179},[220,54106,364],{"class":264},[220,54108,54070],{"class":346},[220,54110,386],{"class":264},[220,54112,54113,54115,54117],{"class":222,"line":389},[220,54114,402],{"class":264},[220,54116,347],{"class":346},[220,54118,359],{"class":264},[212,54120,54121],{"className":409,"code":54092,"language":411,"meta":178,"style":178},[99,54122,54123,54131,54139],{"__ignoreMap":178},[220,54124,54125,54127,54129],{"class":222,"line":223},[220,54126,343],{"class":264},[220,54128,347],{"class":420},[220,54130,359],{"class":264},[220,54132,54133,54135,54137],{"class":222,"line":179},[220,54134,364],{"class":264},[220,54136,54070],{"class":420},[220,54138,386],{"class":264},[220,54140,54141,54143,54145],{"class":222,"line":389},[220,54142,402],{"class":264},[220,54144,347],{"class":420},[220,54146,359],{"class":264},[212,54148,54149],{"className":2844,"code":54092,"language":2846,"meta":178,"style":178},[99,54150,54151,54159,54167],{"__ignoreMap":178},[220,54152,54153,54155,54157],{"class":222,"line":223},[220,54154,343],{"class":264},[220,54156,347],{"class":420},[220,54158,359],{"class":264},[220,54160,54161,54163,54165],{"class":222,"line":179},[220,54162,364],{"class":264},[220,54164,54070],{"class":420},[220,54166,386],{"class":264},[220,54168,54169,54171,54173],{"class":222,"line":389},[220,54170,402],{"class":264},[220,54172,347],{"class":420},[220,54174,359],{"class":264},[212,54176,54177],{"className":468,"code":54092,"language":469,"meta":178,"style":178},[99,54178,54179,54187,54195],{"__ignoreMap":178},[220,54180,54181,54183,54185],{"class":222,"line":223},[220,54182,343],{"class":264},[220,54184,347],{"class":420},[220,54186,359],{"class":264},[220,54188,54189,54191,54193],{"class":222,"line":179},[220,54190,364],{"class":264},[220,54192,54070],{"class":420},[220,54194,386],{"class":264},[220,54196,54197,54199,54201],{"class":222,"line":389},[220,54198,402],{"class":264},[220,54200,347],{"class":420},[220,54202,359],{"class":264},[212,54204,54206],{"className":251,"code":54205,"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,54207,54208,54218,54222,54236,54240,54249,54253],{"__ignoreMap":178},[220,54209,54210,54212,54214,54216],{"class":222,"line":223},[220,54211,261],{"class":260},[220,54213,11507],{"class":264},[220,54215,268],{"class":260},[220,54217,4007],{"class":230},[220,54219,54220],{"class":222,"line":179},[220,54221,647],{"emptyLinePlaceholder":194},[220,54223,54224,54226,54228,54230,54232,54234],{"class":222,"line":389},[220,54225,1735],{"class":260},[220,54227,1738],{"class":420},[220,54229,1741],{"class":260},[220,54231,1744],{"class":260},[220,54233,1747],{"class":226},[220,54235,1750],{"class":264},[220,54237,54238],{"class":222,"line":399},[220,54239,1765],{"class":264},[220,54241,54242,54244,54247],{"class":222,"line":644},[220,54243,1770],{"class":264},[220,54245,54246],{"class":230},"'HexGrid'",[220,54248,2465],{"class":264},[220,54250,54251],{"class":222,"line":650},[220,54252,1787],{"class":264},[220,54254,54255],{"class":222,"line":656},[220,54256,1792],{"class":264},[1504,54258,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":54260},[54261,54262],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fhexgrid",{"title":54070,"description":54078},"docs\u002Fcomponents\u002FHexGrid","nYUgxTXQOGwO3JS3QA8k_S-4Ef2uRW7v08r1QQULwFk",{"id":54269,"title":54270,"body":54271,"category":36564,"componentType":25872,"description":54278,"extension":191,"meta":54510,"navigation":194,"path":54511,"requiresChild":32525,"seo":54512,"stem":54513,"__hash__":54514},"components\u002Fdocs\u002Fcomponents\u002FHologram.md","Hologram",{"type":8,"value":54272,"toc":54506},[54273,54276,54279,54281,54283,54286,54288,54504],[11,54274,54270],{"id":54275},"hologram",[15,54277,54278],{},"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",[31906,54280],{"component":54270},[23,54282,31910],{"id":26528},[31912,54284],{":props":54285},"[{\"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,54287,31918],{"id":31917},[246,54289,54290,54331,54369,54407,54445],{":tabs":1557},[212,54291,54293],{"className":334,"code":54292,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHologram\n color=\"#5ec8ff\"\n \u002F>\n\u003C\u002FShader>\n",[99,54294,54295,54303,54310,54319,54323],{"__ignoreMap":178},[220,54296,54297,54299,54301],{"class":222,"line":223},[220,54298,343],{"class":264},[220,54300,347],{"class":346},[220,54302,359],{"class":264},[220,54304,54305,54307],{"class":222,"line":179},[220,54306,364],{"class":264},[220,54308,54309],{"class":346},"Hologram\n",[220,54311,54312,54314,54316],{"class":222,"line":389},[220,54313,9630],{"class":226},[220,54315,353],{"class":264},[220,54317,54318],{"class":230},"\"#5ec8ff\"\n",[220,54320,54321],{"class":222,"line":399},[220,54322,1234],{"class":264},[220,54324,54325,54327,54329],{"class":222,"line":644},[220,54326,402],{"class":264},[220,54328,347],{"class":346},[220,54330,359],{"class":264},[212,54332,54333],{"className":409,"code":54292,"language":411,"meta":178,"style":178},[99,54334,54335,54343,54349,54357,54361],{"__ignoreMap":178},[220,54336,54337,54339,54341],{"class":222,"line":223},[220,54338,343],{"class":264},[220,54340,347],{"class":420},[220,54342,359],{"class":264},[220,54344,54345,54347],{"class":222,"line":179},[220,54346,364],{"class":264},[220,54348,54309],{"class":420},[220,54350,54351,54353,54355],{"class":222,"line":389},[220,54352,9630],{"class":226},[220,54354,353],{"class":260},[220,54356,54318],{"class":230},[220,54358,54359],{"class":222,"line":399},[220,54360,1234],{"class":264},[220,54362,54363,54365,54367],{"class":222,"line":644},[220,54364,402],{"class":264},[220,54366,347],{"class":420},[220,54368,359],{"class":264},[212,54370,54371],{"className":2844,"code":54292,"language":2846,"meta":178,"style":178},[99,54372,54373,54381,54387,54395,54399],{"__ignoreMap":178},[220,54374,54375,54377,54379],{"class":222,"line":223},[220,54376,343],{"class":264},[220,54378,347],{"class":420},[220,54380,359],{"class":264},[220,54382,54383,54385],{"class":222,"line":179},[220,54384,364],{"class":264},[220,54386,54309],{"class":420},[220,54388,54389,54391,54393],{"class":222,"line":389},[220,54390,9630],{"class":226},[220,54392,353],{"class":264},[220,54394,54318],{"class":230},[220,54396,54397],{"class":222,"line":399},[220,54398,1234],{"class":264},[220,54400,54401,54403,54405],{"class":222,"line":644},[220,54402,402],{"class":264},[220,54404,347],{"class":420},[220,54406,359],{"class":264},[212,54408,54409],{"className":468,"code":54292,"language":469,"meta":178,"style":178},[99,54410,54411,54419,54425,54433,54437],{"__ignoreMap":178},[220,54412,54413,54415,54417],{"class":222,"line":223},[220,54414,343],{"class":264},[220,54416,347],{"class":420},[220,54418,359],{"class":264},[220,54420,54421,54423],{"class":222,"line":179},[220,54422,364],{"class":264},[220,54424,54309],{"class":420},[220,54426,54427,54429,54431],{"class":222,"line":389},[220,54428,9630],{"class":226},[220,54430,353],{"class":260},[220,54432,54318],{"class":230},[220,54434,54435],{"class":222,"line":399},[220,54436,1234],{"class":264},[220,54438,54439,54441,54443],{"class":222,"line":644},[220,54440,402],{"class":264},[220,54442,347],{"class":420},[220,54444,359],{"class":264},[212,54446,54448],{"className":251,"code":54447,"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,54449,54450,54460,54464,54478,54482,54496,54500],{"__ignoreMap":178},[220,54451,54452,54454,54456,54458],{"class":222,"line":223},[220,54453,261],{"class":260},[220,54455,11507],{"class":264},[220,54457,268],{"class":260},[220,54459,4007],{"class":230},[220,54461,54462],{"class":222,"line":179},[220,54463,647],{"emptyLinePlaceholder":194},[220,54465,54466,54468,54470,54472,54474,54476],{"class":222,"line":389},[220,54467,1735],{"class":260},[220,54469,1738],{"class":420},[220,54471,1741],{"class":260},[220,54473,1744],{"class":260},[220,54475,1747],{"class":226},[220,54477,1750],{"class":264},[220,54479,54480],{"class":222,"line":399},[220,54481,1765],{"class":264},[220,54483,54484,54486,54489,54491,54494],{"class":222,"line":644},[220,54485,1770],{"class":264},[220,54487,54488],{"class":230},"'Hologram'",[220,54490,1776],{"class":264},[220,54492,54493],{"class":230},"'#5ec8ff'",[220,54495,1782],{"class":264},[220,54497,54498],{"class":222,"line":650},[220,54499,1787],{"class":264},[220,54501,54502],{"class":222,"line":656},[220,54503,1792],{"class":264},[1504,54505,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":54507},[54508,54509],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fhologram",{"title":54270,"description":54278},"docs\u002Fcomponents\u002FHologram","6QGr-xjyFkobVNhMA2Y2WPzf9jpujJAFiIhNWqISEBM",{"id":54516,"title":54517,"body":54518,"category":36564,"componentType":25872,"description":54525,"extension":191,"meta":54710,"navigation":194,"path":54711,"requiresChild":32525,"seo":54712,"stem":54713,"__hash__":54714},"components\u002Fdocs\u002Fcomponents\u002FHolographic.md","Holographic",{"type":8,"value":54519,"toc":54706},[54520,54523,54526,54528,54530,54533,54535,54704],[11,54521,54517],{"id":54522},"holographic",[15,54524,54525],{},"Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes",[31906,54527],{"component":54517},[23,54529,31910],{"id":26528},[31912,54531],{":props":54532},"[{\"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,54534,31918],{"id":31917},[246,54536,54537,54566,54594,54622,54650],{":tabs":1557},[212,54538,54540],{"className":334,"code":54539,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHolographic \u002F>\n\u003C\u002FShader>\n",[99,54541,54542,54550,54558],{"__ignoreMap":178},[220,54543,54544,54546,54548],{"class":222,"line":223},[220,54545,343],{"class":264},[220,54547,347],{"class":346},[220,54549,359],{"class":264},[220,54551,54552,54554,54556],{"class":222,"line":179},[220,54553,364],{"class":264},[220,54555,54517],{"class":346},[220,54557,386],{"class":264},[220,54559,54560,54562,54564],{"class":222,"line":389},[220,54561,402],{"class":264},[220,54563,347],{"class":346},[220,54565,359],{"class":264},[212,54567,54568],{"className":409,"code":54539,"language":411,"meta":178,"style":178},[99,54569,54570,54578,54586],{"__ignoreMap":178},[220,54571,54572,54574,54576],{"class":222,"line":223},[220,54573,343],{"class":264},[220,54575,347],{"class":420},[220,54577,359],{"class":264},[220,54579,54580,54582,54584],{"class":222,"line":179},[220,54581,364],{"class":264},[220,54583,54517],{"class":420},[220,54585,386],{"class":264},[220,54587,54588,54590,54592],{"class":222,"line":389},[220,54589,402],{"class":264},[220,54591,347],{"class":420},[220,54593,359],{"class":264},[212,54595,54596],{"className":2844,"code":54539,"language":2846,"meta":178,"style":178},[99,54597,54598,54606,54614],{"__ignoreMap":178},[220,54599,54600,54602,54604],{"class":222,"line":223},[220,54601,343],{"class":264},[220,54603,347],{"class":420},[220,54605,359],{"class":264},[220,54607,54608,54610,54612],{"class":222,"line":179},[220,54609,364],{"class":264},[220,54611,54517],{"class":420},[220,54613,386],{"class":264},[220,54615,54616,54618,54620],{"class":222,"line":389},[220,54617,402],{"class":264},[220,54619,347],{"class":420},[220,54621,359],{"class":264},[212,54623,54624],{"className":468,"code":54539,"language":469,"meta":178,"style":178},[99,54625,54626,54634,54642],{"__ignoreMap":178},[220,54627,54628,54630,54632],{"class":222,"line":223},[220,54629,343],{"class":264},[220,54631,347],{"class":420},[220,54633,359],{"class":264},[220,54635,54636,54638,54640],{"class":222,"line":179},[220,54637,364],{"class":264},[220,54639,54517],{"class":420},[220,54641,386],{"class":264},[220,54643,54644,54646,54648],{"class":222,"line":389},[220,54645,402],{"class":264},[220,54647,347],{"class":420},[220,54649,359],{"class":264},[212,54651,54653],{"className":251,"code":54652,"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,54654,54655,54665,54669,54683,54687,54696,54700],{"__ignoreMap":178},[220,54656,54657,54659,54661,54663],{"class":222,"line":223},[220,54658,261],{"class":260},[220,54660,11507],{"class":264},[220,54662,268],{"class":260},[220,54664,4007],{"class":230},[220,54666,54667],{"class":222,"line":179},[220,54668,647],{"emptyLinePlaceholder":194},[220,54670,54671,54673,54675,54677,54679,54681],{"class":222,"line":389},[220,54672,1735],{"class":260},[220,54674,1738],{"class":420},[220,54676,1741],{"class":260},[220,54678,1744],{"class":260},[220,54680,1747],{"class":226},[220,54682,1750],{"class":264},[220,54684,54685],{"class":222,"line":399},[220,54686,1765],{"class":264},[220,54688,54689,54691,54694],{"class":222,"line":644},[220,54690,1770],{"class":264},[220,54692,54693],{"class":230},"'Holographic'",[220,54695,2465],{"class":264},[220,54697,54698],{"class":222,"line":650},[220,54699,1787],{"class":264},[220,54701,54702],{"class":222,"line":656},[220,54703,1792],{"class":264},[1504,54705,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":54707},[54708,54709],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fholographic",{"title":54517,"description":54525},"docs\u002Fcomponents\u002FHolographic","K5eXeEblOGzMNbwsKPKtEBz9ikWKQBMbvs_8Na1Psko",{"id":54716,"title":54717,"body":54718,"category":36363,"componentType":25878,"description":54725,"extension":191,"meta":54986,"navigation":194,"path":54987,"requiresChild":194,"seo":54988,"stem":54989,"__hash__":54990},"components\u002Fdocs\u002Fcomponents\u002FHueShift.md","HueShift",{"type":8,"value":54719,"toc":54982},[54720,54723,54726,54728,54730,54733,54735,54980],[11,54721,54717],{"id":54722},"hueshift",[15,54724,54725],{},"Rotate hue around the color wheel",[31906,54727],{"component":54717},[23,54729,31910],{"id":26528},[31912,54731],{":props":54732},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,54734,31918],{"id":31917},[246,54736,54737,54782,54826,54870,54914],{":tabs":1557},[212,54738,54740],{"className":334,"code":54739,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CHueShift>\n \u003CCircle \u002F>\n \u003C\u002FHueShift>\n\u003C\u002FShader>\n",[99,54741,54742,54750,54758,54766,54774],{"__ignoreMap":178},[220,54743,54744,54746,54748],{"class":222,"line":223},[220,54745,343],{"class":264},[220,54747,347],{"class":346},[220,54749,359],{"class":264},[220,54751,54752,54754,54756],{"class":222,"line":179},[220,54753,364],{"class":264},[220,54755,54717],{"class":346},[220,54757,359],{"class":264},[220,54759,54760,54762,54764],{"class":222,"line":389},[220,54761,2550],{"class":264},[220,54763,2553],{"class":346},[220,54765,386],{"class":264},[220,54767,54768,54770,54772],{"class":222,"line":399},[220,54769,2567],{"class":264},[220,54771,54717],{"class":346},[220,54773,359],{"class":264},[220,54775,54776,54778,54780],{"class":222,"line":644},[220,54777,402],{"class":264},[220,54779,347],{"class":346},[220,54781,359],{"class":264},[212,54783,54784],{"className":409,"code":54739,"language":411,"meta":178,"style":178},[99,54785,54786,54794,54802,54810,54818],{"__ignoreMap":178},[220,54787,54788,54790,54792],{"class":222,"line":223},[220,54789,343],{"class":264},[220,54791,347],{"class":420},[220,54793,359],{"class":264},[220,54795,54796,54798,54800],{"class":222,"line":179},[220,54797,364],{"class":264},[220,54799,54717],{"class":420},[220,54801,359],{"class":264},[220,54803,54804,54806,54808],{"class":222,"line":389},[220,54805,2550],{"class":264},[220,54807,2553],{"class":420},[220,54809,386],{"class":264},[220,54811,54812,54814,54816],{"class":222,"line":399},[220,54813,2567],{"class":264},[220,54815,54717],{"class":420},[220,54817,359],{"class":264},[220,54819,54820,54822,54824],{"class":222,"line":644},[220,54821,402],{"class":264},[220,54823,347],{"class":420},[220,54825,359],{"class":264},[212,54827,54828],{"className":2844,"code":54739,"language":2846,"meta":178,"style":178},[99,54829,54830,54838,54846,54854,54862],{"__ignoreMap":178},[220,54831,54832,54834,54836],{"class":222,"line":223},[220,54833,343],{"class":264},[220,54835,347],{"class":420},[220,54837,359],{"class":264},[220,54839,54840,54842,54844],{"class":222,"line":179},[220,54841,364],{"class":264},[220,54843,54717],{"class":420},[220,54845,359],{"class":264},[220,54847,54848,54850,54852],{"class":222,"line":389},[220,54849,2550],{"class":264},[220,54851,2553],{"class":420},[220,54853,386],{"class":264},[220,54855,54856,54858,54860],{"class":222,"line":399},[220,54857,2567],{"class":264},[220,54859,54717],{"class":420},[220,54861,359],{"class":264},[220,54863,54864,54866,54868],{"class":222,"line":644},[220,54865,402],{"class":264},[220,54867,347],{"class":420},[220,54869,359],{"class":264},[212,54871,54872],{"className":468,"code":54739,"language":469,"meta":178,"style":178},[99,54873,54874,54882,54890,54898,54906],{"__ignoreMap":178},[220,54875,54876,54878,54880],{"class":222,"line":223},[220,54877,343],{"class":264},[220,54879,347],{"class":420},[220,54881,359],{"class":264},[220,54883,54884,54886,54888],{"class":222,"line":179},[220,54885,364],{"class":264},[220,54887,54717],{"class":420},[220,54889,359],{"class":264},[220,54891,54892,54894,54896],{"class":222,"line":389},[220,54893,2550],{"class":264},[220,54895,2553],{"class":420},[220,54897,386],{"class":264},[220,54899,54900,54902,54904],{"class":222,"line":399},[220,54901,2567],{"class":264},[220,54903,54717],{"class":420},[220,54905,359],{"class":264},[220,54907,54908,54910,54912],{"class":222,"line":644},[220,54909,402],{"class":264},[220,54911,347],{"class":420},[220,54913,359],{"class":264},[212,54915,54917],{"className":251,"code":54916,"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,54918,54919,54929,54933,54947,54951,54960,54968,54972,54976],{"__ignoreMap":178},[220,54920,54921,54923,54925,54927],{"class":222,"line":223},[220,54922,261],{"class":260},[220,54924,11507],{"class":264},[220,54926,268],{"class":260},[220,54928,4007],{"class":230},[220,54930,54931],{"class":222,"line":179},[220,54932,647],{"emptyLinePlaceholder":194},[220,54934,54935,54937,54939,54941,54943,54945],{"class":222,"line":389},[220,54936,1735],{"class":260},[220,54938,1738],{"class":420},[220,54940,1741],{"class":260},[220,54942,1744],{"class":260},[220,54944,1747],{"class":226},[220,54946,1750],{"class":264},[220,54948,54949],{"class":222,"line":399},[220,54950,1765],{"class":264},[220,54952,54953,54955,54958],{"class":222,"line":644},[220,54954,1770],{"class":264},[220,54956,54957],{"class":230},"'HueShift'",[220,54959,7004],{"class":264},[220,54961,54962,54964,54966],{"class":222,"line":650},[220,54963,7009],{"class":264},[220,54965,3206],{"class":230},[220,54967,2465],{"class":264},[220,54969,54970],{"class":222,"line":656},[220,54971,7026],{"class":264},[220,54973,54974],{"class":222,"line":673},[220,54975,1787],{"class":264},[220,54977,54978],{"class":222,"line":682},[220,54979,1792],{"class":264},[1504,54981,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":54983},[54984,54985],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fhueshift",{"title":54717,"description":54725},"docs\u002Fcomponents\u002FHueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":54992,"title":54993,"body":54994,"category":33058,"componentType":25872,"description":55001,"extension":191,"meta":55186,"navigation":194,"path":55187,"requiresChild":32525,"seo":55188,"stem":55189,"__hash__":55190},"components\u002Fdocs\u002Fcomponents\u002FImageTexture.md","ImageTexture",{"type":8,"value":54995,"toc":55182},[54996,54999,55002,55004,55006,55009,55011,55180],[11,54997,54993],{"id":54998},"imagetexture",[15,55000,55001],{},"Display an image with customizable object-fit modes",[31906,55003],{"component":54993},[23,55005,31910],{"id":26528},[31912,55007],{":props":55008},"[{\"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,55010,31918],{"id":31917},[246,55012,55013,55042,55070,55098,55126],{":tabs":1557},[212,55014,55016],{"className":334,"code":55015,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CImageTexture \u002F>\n\u003C\u002FShader>\n",[99,55017,55018,55026,55034],{"__ignoreMap":178},[220,55019,55020,55022,55024],{"class":222,"line":223},[220,55021,343],{"class":264},[220,55023,347],{"class":346},[220,55025,359],{"class":264},[220,55027,55028,55030,55032],{"class":222,"line":179},[220,55029,364],{"class":264},[220,55031,54993],{"class":346},[220,55033,386],{"class":264},[220,55035,55036,55038,55040],{"class":222,"line":389},[220,55037,402],{"class":264},[220,55039,347],{"class":346},[220,55041,359],{"class":264},[212,55043,55044],{"className":409,"code":55015,"language":411,"meta":178,"style":178},[99,55045,55046,55054,55062],{"__ignoreMap":178},[220,55047,55048,55050,55052],{"class":222,"line":223},[220,55049,343],{"class":264},[220,55051,347],{"class":420},[220,55053,359],{"class":264},[220,55055,55056,55058,55060],{"class":222,"line":179},[220,55057,364],{"class":264},[220,55059,54993],{"class":420},[220,55061,386],{"class":264},[220,55063,55064,55066,55068],{"class":222,"line":389},[220,55065,402],{"class":264},[220,55067,347],{"class":420},[220,55069,359],{"class":264},[212,55071,55072],{"className":2844,"code":55015,"language":2846,"meta":178,"style":178},[99,55073,55074,55082,55090],{"__ignoreMap":178},[220,55075,55076,55078,55080],{"class":222,"line":223},[220,55077,343],{"class":264},[220,55079,347],{"class":420},[220,55081,359],{"class":264},[220,55083,55084,55086,55088],{"class":222,"line":179},[220,55085,364],{"class":264},[220,55087,54993],{"class":420},[220,55089,386],{"class":264},[220,55091,55092,55094,55096],{"class":222,"line":389},[220,55093,402],{"class":264},[220,55095,347],{"class":420},[220,55097,359],{"class":264},[212,55099,55100],{"className":468,"code":55015,"language":469,"meta":178,"style":178},[99,55101,55102,55110,55118],{"__ignoreMap":178},[220,55103,55104,55106,55108],{"class":222,"line":223},[220,55105,343],{"class":264},[220,55107,347],{"class":420},[220,55109,359],{"class":264},[220,55111,55112,55114,55116],{"class":222,"line":179},[220,55113,364],{"class":264},[220,55115,54993],{"class":420},[220,55117,386],{"class":264},[220,55119,55120,55122,55124],{"class":222,"line":389},[220,55121,402],{"class":264},[220,55123,347],{"class":420},[220,55125,359],{"class":264},[212,55127,55129],{"className":251,"code":55128,"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,55130,55131,55141,55145,55159,55163,55172,55176],{"__ignoreMap":178},[220,55132,55133,55135,55137,55139],{"class":222,"line":223},[220,55134,261],{"class":260},[220,55136,11507],{"class":264},[220,55138,268],{"class":260},[220,55140,4007],{"class":230},[220,55142,55143],{"class":222,"line":179},[220,55144,647],{"emptyLinePlaceholder":194},[220,55146,55147,55149,55151,55153,55155,55157],{"class":222,"line":389},[220,55148,1735],{"class":260},[220,55150,1738],{"class":420},[220,55152,1741],{"class":260},[220,55154,1744],{"class":260},[220,55156,1747],{"class":226},[220,55158,1750],{"class":264},[220,55160,55161],{"class":222,"line":399},[220,55162,1765],{"class":264},[220,55164,55165,55167,55170],{"class":222,"line":644},[220,55166,1770],{"class":264},[220,55168,55169],{"class":230},"'ImageTexture'",[220,55171,2465],{"class":264},[220,55173,55174],{"class":222,"line":650},[220,55175,1787],{"class":264},[220,55177,55178],{"class":222,"line":656},[220,55179,1792],{"class":264},[1504,55181,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":55183},[55184,55185],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fimagetexture",{"title":54993,"description":55001},"docs\u002Fcomponents\u002FImageTexture","2Lk_D0pUimQfwgEYDD6_Qih4AC3U7-cLlITIjRj_y3o",{"id":55192,"title":55193,"body":55194,"category":35554,"componentType":25872,"description":55201,"extension":191,"meta":55480,"navigation":194,"path":55481,"requiresChild":32525,"seo":55482,"stem":55483,"__hash__":55484},"components\u002Fdocs\u002Fcomponents\u002FInkFlow.md","InkFlow",{"type":8,"value":55195,"toc":55476},[55196,55199,55202,55204,55206,55209,55211,55474],[11,55197,55193],{"id":55198},"inkflow",[15,55200,55201],{},"Drag to paint swirling ribbons of ink through a real fluid field — eddies keep evolving after you let go",[31906,55203],{"component":55193},[23,55205,31910],{"id":26528},[31912,55207],{":props":55208},"[{\"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,55210,31918],{"id":31917},[246,55212,55213,55262,55313,55361,55411],{":tabs":1557},[212,55214,55216],{"className":334,"code":55215,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,55217,55218,55226,55233,55242,55250,55254],{"__ignoreMap":178},[220,55219,55220,55222,55224],{"class":222,"line":223},[220,55221,343],{"class":264},[220,55223,347],{"class":346},[220,55225,359],{"class":264},[220,55227,55228,55230],{"class":222,"line":179},[220,55229,364],{"class":264},[220,55231,55232],{"class":346},"InkFlow\n",[220,55234,55235,55237,55239],{"class":222,"line":389},[220,55236,9630],{"class":226},[220,55238,353],{"class":264},[220,55240,55241],{"class":230},"\"#ff2d7e\"\n",[220,55243,55244,55246,55248],{"class":222,"line":399},[220,55245,17400],{"class":226},[220,55247,353],{"class":264},[220,55249,41093],{"class":230},[220,55251,55252],{"class":222,"line":644},[220,55253,1234],{"class":264},[220,55255,55256,55258,55260],{"class":222,"line":650},[220,55257,402],{"class":264},[220,55259,347],{"class":346},[220,55261,359],{"class":264},[212,55263,55265],{"className":409,"code":55264,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CInkFlow\n color=\"#ff2d7e\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,55266,55267,55275,55281,55289,55301,55305],{"__ignoreMap":178},[220,55268,55269,55271,55273],{"class":222,"line":223},[220,55270,343],{"class":264},[220,55272,347],{"class":420},[220,55274,359],{"class":264},[220,55276,55277,55279],{"class":222,"line":179},[220,55278,364],{"class":264},[220,55280,55232],{"class":420},[220,55282,55283,55285,55287],{"class":222,"line":389},[220,55284,9630],{"class":226},[220,55286,353],{"class":260},[220,55288,55241],{"class":230},[220,55290,55291,55293,55295,55297,55299],{"class":222,"line":399},[220,55292,9640],{"class":226},[220,55294,353],{"class":260},[220,55296,743],{"class":264},[220,55298,21999],{"class":420},[220,55300,749],{"class":264},[220,55302,55303],{"class":222,"line":644},[220,55304,1234],{"class":264},[220,55306,55307,55309,55311],{"class":222,"line":650},[220,55308,402],{"class":264},[220,55310,347],{"class":420},[220,55312,359],{"class":264},[212,55314,55315],{"className":2844,"code":55264,"language":2846,"meta":178,"style":178},[99,55316,55317,55325,55331,55339,55349,55353],{"__ignoreMap":178},[220,55318,55319,55321,55323],{"class":222,"line":223},[220,55320,343],{"class":264},[220,55322,347],{"class":420},[220,55324,359],{"class":264},[220,55326,55327,55329],{"class":222,"line":179},[220,55328,364],{"class":264},[220,55330,55232],{"class":420},[220,55332,55333,55335,55337],{"class":222,"line":389},[220,55334,9630],{"class":226},[220,55336,353],{"class":264},[220,55338,55241],{"class":230},[220,55340,55341,55343,55345,55347],{"class":222,"line":399},[220,55342,9640],{"class":226},[220,55344,29866],{"class":264},[220,55346,21999],{"class":420},[220,55348,749],{"class":264},[220,55350,55351],{"class":222,"line":644},[220,55352,1234],{"class":264},[220,55354,55355,55357,55359],{"class":222,"line":650},[220,55356,402],{"class":264},[220,55358,347],{"class":420},[220,55360,359],{"class":264},[212,55362,55363],{"className":468,"code":55264,"language":469,"meta":178,"style":178},[99,55364,55365,55373,55379,55387,55399,55403],{"__ignoreMap":178},[220,55366,55367,55369,55371],{"class":222,"line":223},[220,55368,343],{"class":264},[220,55370,347],{"class":420},[220,55372,359],{"class":264},[220,55374,55375,55377],{"class":222,"line":179},[220,55376,364],{"class":264},[220,55378,55232],{"class":420},[220,55380,55381,55383,55385],{"class":222,"line":389},[220,55382,9630],{"class":226},[220,55384,353],{"class":260},[220,55386,55241],{"class":230},[220,55388,55389,55391,55393,55395,55397],{"class":222,"line":399},[220,55390,9640],{"class":226},[220,55392,353],{"class":260},[220,55394,743],{"class":264},[220,55396,21999],{"class":420},[220,55398,749],{"class":264},[220,55400,55401],{"class":222,"line":644},[220,55402,1234],{"class":264},[220,55404,55405,55407,55409],{"class":222,"line":650},[220,55406,402],{"class":264},[220,55408,347],{"class":420},[220,55410,359],{"class":264},[212,55412,55414],{"className":251,"code":55413,"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,55415,55416,55426,55430,55444,55448,55466,55470],{"__ignoreMap":178},[220,55417,55418,55420,55422,55424],{"class":222,"line":223},[220,55419,261],{"class":260},[220,55421,11507],{"class":264},[220,55423,268],{"class":260},[220,55425,4007],{"class":230},[220,55427,55428],{"class":222,"line":179},[220,55429,647],{"emptyLinePlaceholder":194},[220,55431,55432,55434,55436,55438,55440,55442],{"class":222,"line":389},[220,55433,1735],{"class":260},[220,55435,1738],{"class":420},[220,55437,1741],{"class":260},[220,55439,1744],{"class":260},[220,55441,1747],{"class":226},[220,55443,1750],{"class":264},[220,55445,55446],{"class":222,"line":399},[220,55447,1765],{"class":264},[220,55449,55450,55452,55455,55457,55460,55462,55464],{"class":222,"line":644},[220,55451,1770],{"class":264},[220,55453,55454],{"class":230},"'InkFlow'",[220,55456,1776],{"class":264},[220,55458,55459],{"class":230},"'#ff2d7e'",[220,55461,6561],{"class":264},[220,55463,21999],{"class":420},[220,55465,1782],{"class":264},[220,55467,55468],{"class":222,"line":650},[220,55469,1787],{"class":264},[220,55471,55472],{"class":222,"line":656},[220,55473,1792],{"class":264},[1504,55475,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":55477},[55478,55479],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Finkflow",{"title":55193,"description":55201},"docs\u002Fcomponents\u002FInkFlow","uPnBHNk-ARjAflUEs5hW2qB4NhGh9P1nHfkYFbPq04k",{"id":55486,"title":55487,"body":55488,"category":36363,"componentType":25878,"description":55495,"extension":191,"meta":55750,"navigation":194,"path":55751,"requiresChild":194,"seo":55752,"stem":55753,"__hash__":55754},"components\u002Fdocs\u002Fcomponents\u002FInvert.md","Invert",{"type":8,"value":55489,"toc":55747},[55490,55493,55496,55498,55500,55745],[11,55491,55487],{"id":55492},"invert",[15,55494,55495],{},"Invert RGB colors while preserving alpha",[31906,55497],{"component":55487},[23,55499,31918],{"id":31917},[246,55501,55502,55547,55591,55635,55679],{":tabs":1557},[212,55503,55505],{"className":334,"code":55504,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CInvert>\n \u003CCircle \u002F>\n \u003C\u002FInvert>\n\u003C\u002FShader>\n",[99,55506,55507,55515,55523,55531,55539],{"__ignoreMap":178},[220,55508,55509,55511,55513],{"class":222,"line":223},[220,55510,343],{"class":264},[220,55512,347],{"class":346},[220,55514,359],{"class":264},[220,55516,55517,55519,55521],{"class":222,"line":179},[220,55518,364],{"class":264},[220,55520,55487],{"class":346},[220,55522,359],{"class":264},[220,55524,55525,55527,55529],{"class":222,"line":389},[220,55526,2550],{"class":264},[220,55528,2553],{"class":346},[220,55530,386],{"class":264},[220,55532,55533,55535,55537],{"class":222,"line":399},[220,55534,2567],{"class":264},[220,55536,55487],{"class":346},[220,55538,359],{"class":264},[220,55540,55541,55543,55545],{"class":222,"line":644},[220,55542,402],{"class":264},[220,55544,347],{"class":346},[220,55546,359],{"class":264},[212,55548,55549],{"className":409,"code":55504,"language":411,"meta":178,"style":178},[99,55550,55551,55559,55567,55575,55583],{"__ignoreMap":178},[220,55552,55553,55555,55557],{"class":222,"line":223},[220,55554,343],{"class":264},[220,55556,347],{"class":420},[220,55558,359],{"class":264},[220,55560,55561,55563,55565],{"class":222,"line":179},[220,55562,364],{"class":264},[220,55564,55487],{"class":420},[220,55566,359],{"class":264},[220,55568,55569,55571,55573],{"class":222,"line":389},[220,55570,2550],{"class":264},[220,55572,2553],{"class":420},[220,55574,386],{"class":264},[220,55576,55577,55579,55581],{"class":222,"line":399},[220,55578,2567],{"class":264},[220,55580,55487],{"class":420},[220,55582,359],{"class":264},[220,55584,55585,55587,55589],{"class":222,"line":644},[220,55586,402],{"class":264},[220,55588,347],{"class":420},[220,55590,359],{"class":264},[212,55592,55593],{"className":2844,"code":55504,"language":2846,"meta":178,"style":178},[99,55594,55595,55603,55611,55619,55627],{"__ignoreMap":178},[220,55596,55597,55599,55601],{"class":222,"line":223},[220,55598,343],{"class":264},[220,55600,347],{"class":420},[220,55602,359],{"class":264},[220,55604,55605,55607,55609],{"class":222,"line":179},[220,55606,364],{"class":264},[220,55608,55487],{"class":420},[220,55610,359],{"class":264},[220,55612,55613,55615,55617],{"class":222,"line":389},[220,55614,2550],{"class":264},[220,55616,2553],{"class":420},[220,55618,386],{"class":264},[220,55620,55621,55623,55625],{"class":222,"line":399},[220,55622,2567],{"class":264},[220,55624,55487],{"class":420},[220,55626,359],{"class":264},[220,55628,55629,55631,55633],{"class":222,"line":644},[220,55630,402],{"class":264},[220,55632,347],{"class":420},[220,55634,359],{"class":264},[212,55636,55637],{"className":468,"code":55504,"language":469,"meta":178,"style":178},[99,55638,55639,55647,55655,55663,55671],{"__ignoreMap":178},[220,55640,55641,55643,55645],{"class":222,"line":223},[220,55642,343],{"class":264},[220,55644,347],{"class":420},[220,55646,359],{"class":264},[220,55648,55649,55651,55653],{"class":222,"line":179},[220,55650,364],{"class":264},[220,55652,55487],{"class":420},[220,55654,359],{"class":264},[220,55656,55657,55659,55661],{"class":222,"line":389},[220,55658,2550],{"class":264},[220,55660,2553],{"class":420},[220,55662,386],{"class":264},[220,55664,55665,55667,55669],{"class":222,"line":399},[220,55666,2567],{"class":264},[220,55668,55487],{"class":420},[220,55670,359],{"class":264},[220,55672,55673,55675,55677],{"class":222,"line":644},[220,55674,402],{"class":264},[220,55676,347],{"class":420},[220,55678,359],{"class":264},[212,55680,55682],{"className":251,"code":55681,"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,55683,55684,55694,55698,55712,55716,55725,55733,55737,55741],{"__ignoreMap":178},[220,55685,55686,55688,55690,55692],{"class":222,"line":223},[220,55687,261],{"class":260},[220,55689,11507],{"class":264},[220,55691,268],{"class":260},[220,55693,4007],{"class":230},[220,55695,55696],{"class":222,"line":179},[220,55697,647],{"emptyLinePlaceholder":194},[220,55699,55700,55702,55704,55706,55708,55710],{"class":222,"line":389},[220,55701,1735],{"class":260},[220,55703,1738],{"class":420},[220,55705,1741],{"class":260},[220,55707,1744],{"class":260},[220,55709,1747],{"class":226},[220,55711,1750],{"class":264},[220,55713,55714],{"class":222,"line":399},[220,55715,1765],{"class":264},[220,55717,55718,55720,55723],{"class":222,"line":644},[220,55719,1770],{"class":264},[220,55721,55722],{"class":230},"'Invert'",[220,55724,7004],{"class":264},[220,55726,55727,55729,55731],{"class":222,"line":650},[220,55728,7009],{"class":264},[220,55730,3206],{"class":230},[220,55732,2465],{"class":264},[220,55734,55735],{"class":222,"line":656},[220,55736,7026],{"class":264},[220,55738,55739],{"class":222,"line":673},[220,55740,1787],{"class":264},[220,55742,55743],{"class":222,"line":682},[220,55744,1792],{"class":264},[1504,55746,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":55748},[55749],{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Finvert",{"title":55487,"description":55495},"docs\u002Fcomponents\u002FInvert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":55756,"title":55757,"body":55758,"category":33668,"componentType":25878,"description":55765,"extension":191,"meta":56026,"navigation":194,"path":56027,"requiresChild":194,"seo":56028,"stem":56029,"__hash__":56030},"components\u002Fdocs\u002Fcomponents\u002FIrisWipe.md","IrisWipe",{"type":8,"value":55759,"toc":56022},[55760,55763,55766,55768,55770,55773,55775,56020],[11,55761,55757],{"id":55762},"iriswipe",[15,55764,55765],{},"Reveal through an expanding circle growing from a center point",[31906,55767],{"component":55757},[23,55769,31910],{"id":26528},[31912,55771],{":props":55772},"[{\"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,55774,31918],{"id":31917},[246,55776,55777,55822,55866,55910,55954],{":tabs":1557},[212,55778,55780],{"className":334,"code":55779,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIrisWipe>\n \u003CCircle \u002F>\n \u003C\u002FIrisWipe>\n\u003C\u002FShader>\n",[99,55781,55782,55790,55798,55806,55814],{"__ignoreMap":178},[220,55783,55784,55786,55788],{"class":222,"line":223},[220,55785,343],{"class":264},[220,55787,347],{"class":346},[220,55789,359],{"class":264},[220,55791,55792,55794,55796],{"class":222,"line":179},[220,55793,364],{"class":264},[220,55795,55757],{"class":346},[220,55797,359],{"class":264},[220,55799,55800,55802,55804],{"class":222,"line":389},[220,55801,2550],{"class":264},[220,55803,2553],{"class":346},[220,55805,386],{"class":264},[220,55807,55808,55810,55812],{"class":222,"line":399},[220,55809,2567],{"class":264},[220,55811,55757],{"class":346},[220,55813,359],{"class":264},[220,55815,55816,55818,55820],{"class":222,"line":644},[220,55817,402],{"class":264},[220,55819,347],{"class":346},[220,55821,359],{"class":264},[212,55823,55824],{"className":409,"code":55779,"language":411,"meta":178,"style":178},[99,55825,55826,55834,55842,55850,55858],{"__ignoreMap":178},[220,55827,55828,55830,55832],{"class":222,"line":223},[220,55829,343],{"class":264},[220,55831,347],{"class":420},[220,55833,359],{"class":264},[220,55835,55836,55838,55840],{"class":222,"line":179},[220,55837,364],{"class":264},[220,55839,55757],{"class":420},[220,55841,359],{"class":264},[220,55843,55844,55846,55848],{"class":222,"line":389},[220,55845,2550],{"class":264},[220,55847,2553],{"class":420},[220,55849,386],{"class":264},[220,55851,55852,55854,55856],{"class":222,"line":399},[220,55853,2567],{"class":264},[220,55855,55757],{"class":420},[220,55857,359],{"class":264},[220,55859,55860,55862,55864],{"class":222,"line":644},[220,55861,402],{"class":264},[220,55863,347],{"class":420},[220,55865,359],{"class":264},[212,55867,55868],{"className":2844,"code":55779,"language":2846,"meta":178,"style":178},[99,55869,55870,55878,55886,55894,55902],{"__ignoreMap":178},[220,55871,55872,55874,55876],{"class":222,"line":223},[220,55873,343],{"class":264},[220,55875,347],{"class":420},[220,55877,359],{"class":264},[220,55879,55880,55882,55884],{"class":222,"line":179},[220,55881,364],{"class":264},[220,55883,55757],{"class":420},[220,55885,359],{"class":264},[220,55887,55888,55890,55892],{"class":222,"line":389},[220,55889,2550],{"class":264},[220,55891,2553],{"class":420},[220,55893,386],{"class":264},[220,55895,55896,55898,55900],{"class":222,"line":399},[220,55897,2567],{"class":264},[220,55899,55757],{"class":420},[220,55901,359],{"class":264},[220,55903,55904,55906,55908],{"class":222,"line":644},[220,55905,402],{"class":264},[220,55907,347],{"class":420},[220,55909,359],{"class":264},[212,55911,55912],{"className":468,"code":55779,"language":469,"meta":178,"style":178},[99,55913,55914,55922,55930,55938,55946],{"__ignoreMap":178},[220,55915,55916,55918,55920],{"class":222,"line":223},[220,55917,343],{"class":264},[220,55919,347],{"class":420},[220,55921,359],{"class":264},[220,55923,55924,55926,55928],{"class":222,"line":179},[220,55925,364],{"class":264},[220,55927,55757],{"class":420},[220,55929,359],{"class":264},[220,55931,55932,55934,55936],{"class":222,"line":389},[220,55933,2550],{"class":264},[220,55935,2553],{"class":420},[220,55937,386],{"class":264},[220,55939,55940,55942,55944],{"class":222,"line":399},[220,55941,2567],{"class":264},[220,55943,55757],{"class":420},[220,55945,359],{"class":264},[220,55947,55948,55950,55952],{"class":222,"line":644},[220,55949,402],{"class":264},[220,55951,347],{"class":420},[220,55953,359],{"class":264},[212,55955,55957],{"className":251,"code":55956,"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,55958,55959,55969,55973,55987,55991,56000,56008,56012,56016],{"__ignoreMap":178},[220,55960,55961,55963,55965,55967],{"class":222,"line":223},[220,55962,261],{"class":260},[220,55964,11507],{"class":264},[220,55966,268],{"class":260},[220,55968,4007],{"class":230},[220,55970,55971],{"class":222,"line":179},[220,55972,647],{"emptyLinePlaceholder":194},[220,55974,55975,55977,55979,55981,55983,55985],{"class":222,"line":389},[220,55976,1735],{"class":260},[220,55978,1738],{"class":420},[220,55980,1741],{"class":260},[220,55982,1744],{"class":260},[220,55984,1747],{"class":226},[220,55986,1750],{"class":264},[220,55988,55989],{"class":222,"line":399},[220,55990,1765],{"class":264},[220,55992,55993,55995,55998],{"class":222,"line":644},[220,55994,1770],{"class":264},[220,55996,55997],{"class":230},"'IrisWipe'",[220,55999,7004],{"class":264},[220,56001,56002,56004,56006],{"class":222,"line":650},[220,56003,7009],{"class":264},[220,56005,3206],{"class":230},[220,56007,2465],{"class":264},[220,56009,56010],{"class":222,"line":656},[220,56011,7026],{"class":264},[220,56013,56014],{"class":222,"line":673},[220,56015,1787],{"class":264},[220,56017,56018],{"class":222,"line":682},[220,56019,1792],{"class":264},[1504,56021,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":56023},[56024,56025],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Firiswipe",{"title":55757,"description":55765},"docs\u002Fcomponents\u002FIrisWipe","Q-Y0lKxKc9uQ4PXBs4DXeOvl14Gh9zZU_1lh2dK4pUU",{"id":56032,"title":56033,"body":56034,"category":33058,"componentType":25872,"description":56041,"extension":191,"meta":56226,"navigation":194,"path":56227,"requiresChild":32525,"seo":56228,"stem":56229,"__hash__":56230},"components\u002Fdocs\u002Fcomponents\u002FIsometricCubes.md","IsometricCubes",{"type":8,"value":56035,"toc":56222},[56036,56039,56042,56044,56046,56049,56051,56220],[11,56037,56033],{"id":56038},"isometriccubes",[15,56040,56041],{},"Isometric tumbling-blocks tiling — a 3D cube illusion (rhombille pattern)",[31906,56043],{"component":56033},[23,56045,31910],{"id":26528},[31912,56047],{":props":56048},"[{\"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,56050,31918],{"id":31917},[246,56052,56053,56082,56110,56138,56166],{":tabs":1557},[212,56054,56056],{"className":334,"code":56055,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CIsometricCubes \u002F>\n\u003C\u002FShader>\n",[99,56057,56058,56066,56074],{"__ignoreMap":178},[220,56059,56060,56062,56064],{"class":222,"line":223},[220,56061,343],{"class":264},[220,56063,347],{"class":346},[220,56065,359],{"class":264},[220,56067,56068,56070,56072],{"class":222,"line":179},[220,56069,364],{"class":264},[220,56071,56033],{"class":346},[220,56073,386],{"class":264},[220,56075,56076,56078,56080],{"class":222,"line":389},[220,56077,402],{"class":264},[220,56079,347],{"class":346},[220,56081,359],{"class":264},[212,56083,56084],{"className":409,"code":56055,"language":411,"meta":178,"style":178},[99,56085,56086,56094,56102],{"__ignoreMap":178},[220,56087,56088,56090,56092],{"class":222,"line":223},[220,56089,343],{"class":264},[220,56091,347],{"class":420},[220,56093,359],{"class":264},[220,56095,56096,56098,56100],{"class":222,"line":179},[220,56097,364],{"class":264},[220,56099,56033],{"class":420},[220,56101,386],{"class":264},[220,56103,56104,56106,56108],{"class":222,"line":389},[220,56105,402],{"class":264},[220,56107,347],{"class":420},[220,56109,359],{"class":264},[212,56111,56112],{"className":2844,"code":56055,"language":2846,"meta":178,"style":178},[99,56113,56114,56122,56130],{"__ignoreMap":178},[220,56115,56116,56118,56120],{"class":222,"line":223},[220,56117,343],{"class":264},[220,56119,347],{"class":420},[220,56121,359],{"class":264},[220,56123,56124,56126,56128],{"class":222,"line":179},[220,56125,364],{"class":264},[220,56127,56033],{"class":420},[220,56129,386],{"class":264},[220,56131,56132,56134,56136],{"class":222,"line":389},[220,56133,402],{"class":264},[220,56135,347],{"class":420},[220,56137,359],{"class":264},[212,56139,56140],{"className":468,"code":56055,"language":469,"meta":178,"style":178},[99,56141,56142,56150,56158],{"__ignoreMap":178},[220,56143,56144,56146,56148],{"class":222,"line":223},[220,56145,343],{"class":264},[220,56147,347],{"class":420},[220,56149,359],{"class":264},[220,56151,56152,56154,56156],{"class":222,"line":179},[220,56153,364],{"class":264},[220,56155,56033],{"class":420},[220,56157,386],{"class":264},[220,56159,56160,56162,56164],{"class":222,"line":389},[220,56161,402],{"class":264},[220,56163,347],{"class":420},[220,56165,359],{"class":264},[212,56167,56169],{"className":251,"code":56168,"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,56170,56171,56181,56185,56199,56203,56212,56216],{"__ignoreMap":178},[220,56172,56173,56175,56177,56179],{"class":222,"line":223},[220,56174,261],{"class":260},[220,56176,11507],{"class":264},[220,56178,268],{"class":260},[220,56180,4007],{"class":230},[220,56182,56183],{"class":222,"line":179},[220,56184,647],{"emptyLinePlaceholder":194},[220,56186,56187,56189,56191,56193,56195,56197],{"class":222,"line":389},[220,56188,1735],{"class":260},[220,56190,1738],{"class":420},[220,56192,1741],{"class":260},[220,56194,1744],{"class":260},[220,56196,1747],{"class":226},[220,56198,1750],{"class":264},[220,56200,56201],{"class":222,"line":399},[220,56202,1765],{"class":264},[220,56204,56205,56207,56210],{"class":222,"line":644},[220,56206,1770],{"class":264},[220,56208,56209],{"class":230},"'IsometricCubes'",[220,56211,2465],{"class":264},[220,56213,56214],{"class":222,"line":650},[220,56215,1787],{"class":264},[220,56217,56218],{"class":222,"line":656},[220,56219,1792],{"class":264},[1504,56221,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":56223},[56224,56225],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fisometriccubes",{"title":56033,"description":56041},"docs\u002Fcomponents\u002FIsometricCubes","w_VV3kO3EXlUuXVbw0Wgv0ia6NpnbmU9jdoqLgnUDsg",{"id":56232,"title":56233,"body":56234,"category":33391,"componentType":25878,"description":56241,"extension":191,"meta":56502,"navigation":194,"path":56503,"requiresChild":194,"seo":56504,"stem":56505,"__hash__":56506},"components\u002Fdocs\u002Fcomponents\u002FKaleidoscope.md","Kaleidoscope",{"type":8,"value":56235,"toc":56498},[56236,56239,56242,56244,56246,56249,56251,56496],[11,56237,56233],{"id":56238},"kaleidoscope",[15,56240,56241],{},"Create a kaleidoscope effect with radial mirrored segments",[31906,56243],{"component":56233},[23,56245,31910],{"id":26528},[31912,56247],{":props":56248},"[{\"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,56250,31918],{"id":31917},[246,56252,56253,56298,56342,56386,56430],{":tabs":1557},[212,56254,56256],{"className":334,"code":56255,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle \u002F>\n \u003C\u002FKaleidoscope>\n\u003C\u002FShader>\n",[99,56257,56258,56266,56274,56282,56290],{"__ignoreMap":178},[220,56259,56260,56262,56264],{"class":222,"line":223},[220,56261,343],{"class":264},[220,56263,347],{"class":346},[220,56265,359],{"class":264},[220,56267,56268,56270,56272],{"class":222,"line":179},[220,56269,364],{"class":264},[220,56271,56233],{"class":346},[220,56273,359],{"class":264},[220,56275,56276,56278,56280],{"class":222,"line":389},[220,56277,2550],{"class":264},[220,56279,2553],{"class":346},[220,56281,386],{"class":264},[220,56283,56284,56286,56288],{"class":222,"line":399},[220,56285,2567],{"class":264},[220,56287,56233],{"class":346},[220,56289,359],{"class":264},[220,56291,56292,56294,56296],{"class":222,"line":644},[220,56293,402],{"class":264},[220,56295,347],{"class":346},[220,56297,359],{"class":264},[212,56299,56300],{"className":409,"code":56255,"language":411,"meta":178,"style":178},[99,56301,56302,56310,56318,56326,56334],{"__ignoreMap":178},[220,56303,56304,56306,56308],{"class":222,"line":223},[220,56305,343],{"class":264},[220,56307,347],{"class":420},[220,56309,359],{"class":264},[220,56311,56312,56314,56316],{"class":222,"line":179},[220,56313,364],{"class":264},[220,56315,56233],{"class":420},[220,56317,359],{"class":264},[220,56319,56320,56322,56324],{"class":222,"line":389},[220,56321,2550],{"class":264},[220,56323,2553],{"class":420},[220,56325,386],{"class":264},[220,56327,56328,56330,56332],{"class":222,"line":399},[220,56329,2567],{"class":264},[220,56331,56233],{"class":420},[220,56333,359],{"class":264},[220,56335,56336,56338,56340],{"class":222,"line":644},[220,56337,402],{"class":264},[220,56339,347],{"class":420},[220,56341,359],{"class":264},[212,56343,56344],{"className":2844,"code":56255,"language":2846,"meta":178,"style":178},[99,56345,56346,56354,56362,56370,56378],{"__ignoreMap":178},[220,56347,56348,56350,56352],{"class":222,"line":223},[220,56349,343],{"class":264},[220,56351,347],{"class":420},[220,56353,359],{"class":264},[220,56355,56356,56358,56360],{"class":222,"line":179},[220,56357,364],{"class":264},[220,56359,56233],{"class":420},[220,56361,359],{"class":264},[220,56363,56364,56366,56368],{"class":222,"line":389},[220,56365,2550],{"class":264},[220,56367,2553],{"class":420},[220,56369,386],{"class":264},[220,56371,56372,56374,56376],{"class":222,"line":399},[220,56373,2567],{"class":264},[220,56375,56233],{"class":420},[220,56377,359],{"class":264},[220,56379,56380,56382,56384],{"class":222,"line":644},[220,56381,402],{"class":264},[220,56383,347],{"class":420},[220,56385,359],{"class":264},[212,56387,56388],{"className":468,"code":56255,"language":469,"meta":178,"style":178},[99,56389,56390,56398,56406,56414,56422],{"__ignoreMap":178},[220,56391,56392,56394,56396],{"class":222,"line":223},[220,56393,343],{"class":264},[220,56395,347],{"class":420},[220,56397,359],{"class":264},[220,56399,56400,56402,56404],{"class":222,"line":179},[220,56401,364],{"class":264},[220,56403,56233],{"class":420},[220,56405,359],{"class":264},[220,56407,56408,56410,56412],{"class":222,"line":389},[220,56409,2550],{"class":264},[220,56411,2553],{"class":420},[220,56413,386],{"class":264},[220,56415,56416,56418,56420],{"class":222,"line":399},[220,56417,2567],{"class":264},[220,56419,56233],{"class":420},[220,56421,359],{"class":264},[220,56423,56424,56426,56428],{"class":222,"line":644},[220,56425,402],{"class":264},[220,56427,347],{"class":420},[220,56429,359],{"class":264},[212,56431,56433],{"className":251,"code":56432,"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,56434,56435,56445,56449,56463,56467,56476,56484,56488,56492],{"__ignoreMap":178},[220,56436,56437,56439,56441,56443],{"class":222,"line":223},[220,56438,261],{"class":260},[220,56440,11507],{"class":264},[220,56442,268],{"class":260},[220,56444,4007],{"class":230},[220,56446,56447],{"class":222,"line":179},[220,56448,647],{"emptyLinePlaceholder":194},[220,56450,56451,56453,56455,56457,56459,56461],{"class":222,"line":389},[220,56452,1735],{"class":260},[220,56454,1738],{"class":420},[220,56456,1741],{"class":260},[220,56458,1744],{"class":260},[220,56460,1747],{"class":226},[220,56462,1750],{"class":264},[220,56464,56465],{"class":222,"line":399},[220,56466,1765],{"class":264},[220,56468,56469,56471,56474],{"class":222,"line":644},[220,56470,1770],{"class":264},[220,56472,56473],{"class":230},"'Kaleidoscope'",[220,56475,7004],{"class":264},[220,56477,56478,56480,56482],{"class":222,"line":650},[220,56479,7009],{"class":264},[220,56481,3206],{"class":230},[220,56483,2465],{"class":264},[220,56485,56486],{"class":222,"line":656},[220,56487,7026],{"class":264},[220,56489,56490],{"class":222,"line":673},[220,56491,1787],{"class":264},[220,56493,56494],{"class":222,"line":682},[220,56495,1792],{"class":264},[1504,56497,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":56499},[56500,56501],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fkaleidoscope",{"title":56233,"description":56241},"docs\u002Fcomponents\u002FKaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":56508,"title":56509,"body":56510,"category":32801,"componentType":25878,"description":56517,"extension":191,"meta":56778,"navigation":194,"path":56779,"requiresChild":194,"seo":56780,"stem":56781,"__hash__":56782},"components\u002Fdocs\u002Fcomponents\u002FKeyFrames.md","KeyFrames",{"type":8,"value":56511,"toc":56774},[56512,56515,56518,56520,56522,56525,56527,56772],[11,56513,56509],{"id":56514},"keyframes",[15,56516,56517],{},"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",[31906,56519],{"component":56509},[23,56521,31910],{"id":26528},[31912,56523],{":props":56524},"[{\"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,56526,31918],{"id":31917},[246,56528,56529,56574,56618,56662,56706],{":tabs":1557},[212,56530,56532],{"className":334,"code":56531,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CKeyFrames>\n \u003CCircle \u002F>\n \u003C\u002FKeyFrames>\n\u003C\u002FShader>\n",[99,56533,56534,56542,56550,56558,56566],{"__ignoreMap":178},[220,56535,56536,56538,56540],{"class":222,"line":223},[220,56537,343],{"class":264},[220,56539,347],{"class":346},[220,56541,359],{"class":264},[220,56543,56544,56546,56548],{"class":222,"line":179},[220,56545,364],{"class":264},[220,56547,56509],{"class":346},[220,56549,359],{"class":264},[220,56551,56552,56554,56556],{"class":222,"line":389},[220,56553,2550],{"class":264},[220,56555,2553],{"class":346},[220,56557,386],{"class":264},[220,56559,56560,56562,56564],{"class":222,"line":399},[220,56561,2567],{"class":264},[220,56563,56509],{"class":346},[220,56565,359],{"class":264},[220,56567,56568,56570,56572],{"class":222,"line":644},[220,56569,402],{"class":264},[220,56571,347],{"class":346},[220,56573,359],{"class":264},[212,56575,56576],{"className":409,"code":56531,"language":411,"meta":178,"style":178},[99,56577,56578,56586,56594,56602,56610],{"__ignoreMap":178},[220,56579,56580,56582,56584],{"class":222,"line":223},[220,56581,343],{"class":264},[220,56583,347],{"class":420},[220,56585,359],{"class":264},[220,56587,56588,56590,56592],{"class":222,"line":179},[220,56589,364],{"class":264},[220,56591,56509],{"class":420},[220,56593,359],{"class":264},[220,56595,56596,56598,56600],{"class":222,"line":389},[220,56597,2550],{"class":264},[220,56599,2553],{"class":420},[220,56601,386],{"class":264},[220,56603,56604,56606,56608],{"class":222,"line":399},[220,56605,2567],{"class":264},[220,56607,56509],{"class":420},[220,56609,359],{"class":264},[220,56611,56612,56614,56616],{"class":222,"line":644},[220,56613,402],{"class":264},[220,56615,347],{"class":420},[220,56617,359],{"class":264},[212,56619,56620],{"className":2844,"code":56531,"language":2846,"meta":178,"style":178},[99,56621,56622,56630,56638,56646,56654],{"__ignoreMap":178},[220,56623,56624,56626,56628],{"class":222,"line":223},[220,56625,343],{"class":264},[220,56627,347],{"class":420},[220,56629,359],{"class":264},[220,56631,56632,56634,56636],{"class":222,"line":179},[220,56633,364],{"class":264},[220,56635,56509],{"class":420},[220,56637,359],{"class":264},[220,56639,56640,56642,56644],{"class":222,"line":389},[220,56641,2550],{"class":264},[220,56643,2553],{"class":420},[220,56645,386],{"class":264},[220,56647,56648,56650,56652],{"class":222,"line":399},[220,56649,2567],{"class":264},[220,56651,56509],{"class":420},[220,56653,359],{"class":264},[220,56655,56656,56658,56660],{"class":222,"line":644},[220,56657,402],{"class":264},[220,56659,347],{"class":420},[220,56661,359],{"class":264},[212,56663,56664],{"className":468,"code":56531,"language":469,"meta":178,"style":178},[99,56665,56666,56674,56682,56690,56698],{"__ignoreMap":178},[220,56667,56668,56670,56672],{"class":222,"line":223},[220,56669,343],{"class":264},[220,56671,347],{"class":420},[220,56673,359],{"class":264},[220,56675,56676,56678,56680],{"class":222,"line":179},[220,56677,364],{"class":264},[220,56679,56509],{"class":420},[220,56681,359],{"class":264},[220,56683,56684,56686,56688],{"class":222,"line":389},[220,56685,2550],{"class":264},[220,56687,2553],{"class":420},[220,56689,386],{"class":264},[220,56691,56692,56694,56696],{"class":222,"line":399},[220,56693,2567],{"class":264},[220,56695,56509],{"class":420},[220,56697,359],{"class":264},[220,56699,56700,56702,56704],{"class":222,"line":644},[220,56701,402],{"class":264},[220,56703,347],{"class":420},[220,56705,359],{"class":264},[212,56707,56709],{"className":251,"code":56708,"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,56710,56711,56721,56725,56739,56743,56752,56760,56764,56768],{"__ignoreMap":178},[220,56712,56713,56715,56717,56719],{"class":222,"line":223},[220,56714,261],{"class":260},[220,56716,11507],{"class":264},[220,56718,268],{"class":260},[220,56720,4007],{"class":230},[220,56722,56723],{"class":222,"line":179},[220,56724,647],{"emptyLinePlaceholder":194},[220,56726,56727,56729,56731,56733,56735,56737],{"class":222,"line":389},[220,56728,1735],{"class":260},[220,56730,1738],{"class":420},[220,56732,1741],{"class":260},[220,56734,1744],{"class":260},[220,56736,1747],{"class":226},[220,56738,1750],{"class":264},[220,56740,56741],{"class":222,"line":399},[220,56742,1765],{"class":264},[220,56744,56745,56747,56750],{"class":222,"line":644},[220,56746,1770],{"class":264},[220,56748,56749],{"class":230},"'KeyFrames'",[220,56751,7004],{"class":264},[220,56753,56754,56756,56758],{"class":222,"line":650},[220,56755,7009],{"class":264},[220,56757,3206],{"class":230},[220,56759,2465],{"class":264},[220,56761,56762],{"class":222,"line":656},[220,56763,7026],{"class":264},[220,56765,56766],{"class":222,"line":673},[220,56767,1787],{"class":264},[220,56769,56770],{"class":222,"line":682},[220,56771,1792],{"class":264},[1504,56773,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":56775},[56776,56777],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fkeyframes",{"title":56509,"description":56517},"docs\u002Fcomponents\u002FKeyFrames","eslsp37SXSLD--_atcEEPCW6sWPJ9vP_yhGGOq1Y6pE",{"id":56784,"title":56785,"body":56786,"category":32801,"componentType":25872,"description":56793,"extension":191,"meta":57033,"navigation":194,"path":57034,"requiresChild":32525,"seo":57035,"stem":57036,"__hash__":57037},"components\u002Fdocs\u002Fcomponents\u002FLensFlare.md","LensFlare",{"type":8,"value":56787,"toc":57029},[56788,56791,56794,56796,56798,56801,56803,57027],[11,56789,56785],{"id":56790},"lensflare",[15,56792,56793],{},"Realistic camera lens flare with artifacts.",[31906,56795],{"component":56785},[23,56797,31910],{"id":26528},[31912,56799],{":props":56800},"[{\"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,56802,31918],{"id":31917},[246,56804,56805,56844,56887,56927,56969],{":tabs":1557},[212,56806,56808],{"className":334,"code":56807,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,56809,56810,56818,56824,56832,56836],{"__ignoreMap":178},[220,56811,56812,56814,56816],{"class":222,"line":223},[220,56813,343],{"class":264},[220,56815,347],{"class":346},[220,56817,359],{"class":264},[220,56819,56820,56822],{"class":222,"line":179},[220,56821,364],{"class":264},[220,56823,20352],{"class":346},[220,56825,56826,56828,56830],{"class":222,"line":389},[220,56827,20366],{"class":226},[220,56829,353],{"class":264},[220,56831,42153],{"class":230},[220,56833,56834],{"class":222,"line":399},[220,56835,1234],{"class":264},[220,56837,56838,56840,56842],{"class":222,"line":644},[220,56839,402],{"class":264},[220,56841,347],{"class":346},[220,56843,359],{"class":264},[212,56845,56847],{"className":409,"code":56846,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n \u002F>\n\u003C\u002FShader>\n",[99,56848,56849,56857,56863,56875,56879],{"__ignoreMap":178},[220,56850,56851,56853,56855],{"class":222,"line":223},[220,56852,343],{"class":264},[220,56854,347],{"class":420},[220,56856,359],{"class":264},[220,56858,56859,56861],{"class":222,"line":179},[220,56860,364],{"class":264},[220,56862,20352],{"class":420},[220,56864,56865,56867,56869,56871,56873],{"class":222,"line":389},[220,56866,20477],{"class":226},[220,56868,353],{"class":260},[220,56870,743],{"class":264},[220,56872,7749],{"class":420},[220,56874,749],{"class":264},[220,56876,56877],{"class":222,"line":399},[220,56878,1234],{"class":264},[220,56880,56881,56883,56885],{"class":222,"line":644},[220,56882,402],{"class":264},[220,56884,347],{"class":420},[220,56886,359],{"class":264},[212,56888,56889],{"className":2844,"code":56846,"language":2846,"meta":178,"style":178},[99,56890,56891,56899,56905,56915,56919],{"__ignoreMap":178},[220,56892,56893,56895,56897],{"class":222,"line":223},[220,56894,343],{"class":264},[220,56896,347],{"class":420},[220,56898,359],{"class":264},[220,56900,56901,56903],{"class":222,"line":179},[220,56902,364],{"class":264},[220,56904,20352],{"class":420},[220,56906,56907,56909,56911,56913],{"class":222,"line":389},[220,56908,20477],{"class":226},[220,56910,29866],{"class":264},[220,56912,7749],{"class":420},[220,56914,749],{"class":264},[220,56916,56917],{"class":222,"line":399},[220,56918,1234],{"class":264},[220,56920,56921,56923,56925],{"class":222,"line":644},[220,56922,402],{"class":264},[220,56924,347],{"class":420},[220,56926,359],{"class":264},[212,56928,56929],{"className":468,"code":56846,"language":469,"meta":178,"style":178},[99,56930,56931,56939,56945,56957,56961],{"__ignoreMap":178},[220,56932,56933,56935,56937],{"class":222,"line":223},[220,56934,343],{"class":264},[220,56936,347],{"class":420},[220,56938,359],{"class":264},[220,56940,56941,56943],{"class":222,"line":179},[220,56942,364],{"class":264},[220,56944,20352],{"class":420},[220,56946,56947,56949,56951,56953,56955],{"class":222,"line":389},[220,56948,20477],{"class":226},[220,56950,353],{"class":260},[220,56952,743],{"class":264},[220,56954,7749],{"class":420},[220,56956,749],{"class":264},[220,56958,56959],{"class":222,"line":399},[220,56960,1234],{"class":264},[220,56962,56963,56965,56967],{"class":222,"line":644},[220,56964,402],{"class":264},[220,56966,347],{"class":420},[220,56968,359],{"class":264},[212,56970,56972],{"className":251,"code":56971,"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,56973,56974,56984,56988,57002,57006,57019,57023],{"__ignoreMap":178},[220,56975,56976,56978,56980,56982],{"class":222,"line":223},[220,56977,261],{"class":260},[220,56979,11507],{"class":264},[220,56981,268],{"class":260},[220,56983,4007],{"class":230},[220,56985,56986],{"class":222,"line":179},[220,56987,647],{"emptyLinePlaceholder":194},[220,56989,56990,56992,56994,56996,56998,57000],{"class":222,"line":389},[220,56991,1735],{"class":260},[220,56993,1738],{"class":420},[220,56995,1741],{"class":260},[220,56997,1744],{"class":260},[220,56999,1747],{"class":226},[220,57001,1750],{"class":264},[220,57003,57004],{"class":222,"line":399},[220,57005,1765],{"class":264},[220,57007,57008,57010,57013,57015,57017],{"class":222,"line":644},[220,57009,1770],{"class":264},[220,57011,57012],{"class":230},"'LensFlare'",[220,57014,32198],{"class":264},[220,57016,7749],{"class":420},[220,57018,1782],{"class":264},[220,57020,57021],{"class":222,"line":650},[220,57022,1787],{"class":264},[220,57024,57025],{"class":222,"line":656},[220,57026,1792],{"class":264},[1504,57028,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57030},[57031,57032],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Flensflare",{"title":56785,"description":56793},"docs\u002Fcomponents\u002FLensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":57039,"title":57040,"body":57041,"category":36564,"componentType":25872,"description":57293,"extension":191,"meta":57294,"navigation":194,"path":57295,"requiresChild":32525,"seo":57296,"stem":57297,"__hash__":57298},"components\u002Fdocs\u002Fcomponents\u002FLightEdge.md","LightEdge",{"type":8,"value":57042,"toc":57289},[57043,57046,57052,57054,57056,57059,57061,57287],[11,57044,57040],{"id":57045},"lightedge",[15,57047,57048,57049,4831],{},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by ",[56,57050,53877],{"href":53875,"rel":57051},[167],[31906,57053],{"component":57040},[23,57055,31910],{"id":26528},[31912,57057],{":props":57058},"[{\"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,57060,31918],{"id":31917},[246,57062,57063,57104,57147,57187,57229],{":tabs":1557},[212,57064,57066],{"className":334,"code":57065,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n :intensity=\"0.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,57067,57068,57076,57083,57092,57096],{"__ignoreMap":178},[220,57069,57070,57072,57074],{"class":222,"line":223},[220,57071,343],{"class":264},[220,57073,347],{"class":346},[220,57075,359],{"class":264},[220,57077,57078,57080],{"class":222,"line":179},[220,57079,364],{"class":264},[220,57081,57082],{"class":346},"LightEdge\n",[220,57084,57085,57087,57089],{"class":222,"line":389},[220,57086,20366],{"class":226},[220,57088,353],{"class":264},[220,57090,57091],{"class":230},"\"0.6\"\n",[220,57093,57094],{"class":222,"line":399},[220,57095,1234],{"class":264},[220,57097,57098,57100,57102],{"class":222,"line":644},[220,57099,402],{"class":264},[220,57101,347],{"class":346},[220,57103,359],{"class":264},[212,57105,57107],{"className":409,"code":57106,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLightEdge\n intensity={0.6}\n \u002F>\n\u003C\u002FShader>\n",[99,57108,57109,57117,57123,57135,57139],{"__ignoreMap":178},[220,57110,57111,57113,57115],{"class":222,"line":223},[220,57112,343],{"class":264},[220,57114,347],{"class":420},[220,57116,359],{"class":264},[220,57118,57119,57121],{"class":222,"line":179},[220,57120,364],{"class":264},[220,57122,57082],{"class":420},[220,57124,57125,57127,57129,57131,57133],{"class":222,"line":389},[220,57126,20477],{"class":226},[220,57128,353],{"class":260},[220,57130,743],{"class":264},[220,57132,8231],{"class":420},[220,57134,749],{"class":264},[220,57136,57137],{"class":222,"line":399},[220,57138,1234],{"class":264},[220,57140,57141,57143,57145],{"class":222,"line":644},[220,57142,402],{"class":264},[220,57144,347],{"class":420},[220,57146,359],{"class":264},[212,57148,57149],{"className":2844,"code":57106,"language":2846,"meta":178,"style":178},[99,57150,57151,57159,57165,57175,57179],{"__ignoreMap":178},[220,57152,57153,57155,57157],{"class":222,"line":223},[220,57154,343],{"class":264},[220,57156,347],{"class":420},[220,57158,359],{"class":264},[220,57160,57161,57163],{"class":222,"line":179},[220,57162,364],{"class":264},[220,57164,57082],{"class":420},[220,57166,57167,57169,57171,57173],{"class":222,"line":389},[220,57168,20477],{"class":226},[220,57170,29866],{"class":264},[220,57172,8231],{"class":420},[220,57174,749],{"class":264},[220,57176,57177],{"class":222,"line":399},[220,57178,1234],{"class":264},[220,57180,57181,57183,57185],{"class":222,"line":644},[220,57182,402],{"class":264},[220,57184,347],{"class":420},[220,57186,359],{"class":264},[212,57188,57189],{"className":468,"code":57106,"language":469,"meta":178,"style":178},[99,57190,57191,57199,57205,57217,57221],{"__ignoreMap":178},[220,57192,57193,57195,57197],{"class":222,"line":223},[220,57194,343],{"class":264},[220,57196,347],{"class":420},[220,57198,359],{"class":264},[220,57200,57201,57203],{"class":222,"line":179},[220,57202,364],{"class":264},[220,57204,57082],{"class":420},[220,57206,57207,57209,57211,57213,57215],{"class":222,"line":389},[220,57208,20477],{"class":226},[220,57210,353],{"class":260},[220,57212,743],{"class":264},[220,57214,8231],{"class":420},[220,57216,749],{"class":264},[220,57218,57219],{"class":222,"line":399},[220,57220,1234],{"class":264},[220,57222,57223,57225,57227],{"class":222,"line":644},[220,57224,402],{"class":264},[220,57226,347],{"class":420},[220,57228,359],{"class":264},[212,57230,57232],{"className":251,"code":57231,"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,57233,57234,57244,57248,57262,57266,57279,57283],{"__ignoreMap":178},[220,57235,57236,57238,57240,57242],{"class":222,"line":223},[220,57237,261],{"class":260},[220,57239,11507],{"class":264},[220,57241,268],{"class":260},[220,57243,4007],{"class":230},[220,57245,57246],{"class":222,"line":179},[220,57247,647],{"emptyLinePlaceholder":194},[220,57249,57250,57252,57254,57256,57258,57260],{"class":222,"line":389},[220,57251,1735],{"class":260},[220,57253,1738],{"class":420},[220,57255,1741],{"class":260},[220,57257,1744],{"class":260},[220,57259,1747],{"class":226},[220,57261,1750],{"class":264},[220,57263,57264],{"class":222,"line":399},[220,57265,1765],{"class":264},[220,57267,57268,57270,57273,57275,57277],{"class":222,"line":644},[220,57269,1770],{"class":264},[220,57271,57272],{"class":230},"'LightEdge'",[220,57274,32198],{"class":264},[220,57276,8231],{"class":420},[220,57278,1782],{"class":264},[220,57280,57281],{"class":222,"line":650},[220,57282,1787],{"class":264},[220,57284,57285],{"class":222,"line":656},[220,57286,1792],{"class":264},[1504,57288,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57290},[57291,57292],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},"Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.",{},"\u002Fdocs\u002Fcomponents\u002Flightedge",{"title":57040,"description":57293},"docs\u002Fcomponents\u002FLightEdge","DNPAWM3moiGlQAUBu7ZQbvRkpiMqMXxe15AclUr6C-8",{"id":57300,"title":57301,"body":57302,"category":32801,"componentType":25878,"description":57309,"extension":191,"meta":57626,"navigation":194,"path":57627,"requiresChild":194,"seo":57628,"stem":57629,"__hash__":57630},"components\u002Fdocs\u002Fcomponents\u002FLightLeak.md","LightLeak",{"type":8,"value":57303,"toc":57622},[57304,57307,57310,57312,57314,57317,57319,57620],[11,57305,57301],{"id":57306},"lightleak",[15,57308,57309],{},"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",[31906,57311],{"component":57301},[23,57313,31910],{"id":26528},[31912,57315],{":props":57316},"[{\"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,57318,31918],{"id":31917},[246,57320,57321,57377,57436,57492,57550],{":tabs":1557},[212,57322,57324],{"className":334,"code":57323,"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,57325,57326,57334,57341,57349,57353,57361,57369],{"__ignoreMap":178},[220,57327,57328,57330,57332],{"class":222,"line":223},[220,57329,343],{"class":264},[220,57331,347],{"class":346},[220,57333,359],{"class":264},[220,57335,57336,57338],{"class":222,"line":179},[220,57337,364],{"class":264},[220,57339,57340],{"class":346},"LightLeak\n",[220,57342,57343,57345,57347],{"class":222,"line":389},[220,57344,20366],{"class":226},[220,57346,353],{"class":264},[220,57348,18103],{"class":230},[220,57350,57351],{"class":222,"line":399},[220,57352,31954],{"class":264},[220,57354,57355,57357,57359],{"class":222,"line":644},[220,57356,2550],{"class":264},[220,57358,2553],{"class":346},[220,57360,386],{"class":264},[220,57362,57363,57365,57367],{"class":222,"line":650},[220,57364,2567],{"class":264},[220,57366,57301],{"class":346},[220,57368,359],{"class":264},[220,57370,57371,57373,57375],{"class":222,"line":656},[220,57372,402],{"class":264},[220,57374,347],{"class":346},[220,57376,359],{"class":264},[212,57378,57380],{"className":409,"code":57379,"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,57381,57382,57390,57396,57408,57412,57420,57428],{"__ignoreMap":178},[220,57383,57384,57386,57388],{"class":222,"line":223},[220,57385,343],{"class":264},[220,57387,347],{"class":420},[220,57389,359],{"class":264},[220,57391,57392,57394],{"class":222,"line":179},[220,57393,364],{"class":264},[220,57395,57340],{"class":420},[220,57397,57398,57400,57402,57404,57406],{"class":222,"line":389},[220,57399,20477],{"class":226},[220,57401,353],{"class":260},[220,57403,743],{"class":264},[220,57405,18187],{"class":420},[220,57407,749],{"class":264},[220,57409,57410],{"class":222,"line":399},[220,57411,31954],{"class":264},[220,57413,57414,57416,57418],{"class":222,"line":644},[220,57415,2550],{"class":264},[220,57417,2553],{"class":420},[220,57419,386],{"class":264},[220,57421,57422,57424,57426],{"class":222,"line":650},[220,57423,2567],{"class":264},[220,57425,57301],{"class":420},[220,57427,359],{"class":264},[220,57429,57430,57432,57434],{"class":222,"line":656},[220,57431,402],{"class":264},[220,57433,347],{"class":420},[220,57435,359],{"class":264},[212,57437,57438],{"className":2844,"code":57379,"language":2846,"meta":178,"style":178},[99,57439,57440,57448,57454,57464,57468,57476,57484],{"__ignoreMap":178},[220,57441,57442,57444,57446],{"class":222,"line":223},[220,57443,343],{"class":264},[220,57445,347],{"class":420},[220,57447,359],{"class":264},[220,57449,57450,57452],{"class":222,"line":179},[220,57451,364],{"class":264},[220,57453,57340],{"class":420},[220,57455,57456,57458,57460,57462],{"class":222,"line":389},[220,57457,20477],{"class":226},[220,57459,29866],{"class":264},[220,57461,18187],{"class":420},[220,57463,749],{"class":264},[220,57465,57466],{"class":222,"line":399},[220,57467,31954],{"class":264},[220,57469,57470,57472,57474],{"class":222,"line":644},[220,57471,2550],{"class":264},[220,57473,2553],{"class":420},[220,57475,386],{"class":264},[220,57477,57478,57480,57482],{"class":222,"line":650},[220,57479,2567],{"class":264},[220,57481,57301],{"class":420},[220,57483,359],{"class":264},[220,57485,57486,57488,57490],{"class":222,"line":656},[220,57487,402],{"class":264},[220,57489,347],{"class":420},[220,57491,359],{"class":264},[212,57493,57494],{"className":468,"code":57379,"language":469,"meta":178,"style":178},[99,57495,57496,57504,57510,57522,57526,57534,57542],{"__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,57340],{"class":420},[220,57511,57512,57514,57516,57518,57520],{"class":222,"line":389},[220,57513,20477],{"class":226},[220,57515,353],{"class":260},[220,57517,743],{"class":264},[220,57519,18187],{"class":420},[220,57521,749],{"class":264},[220,57523,57524],{"class":222,"line":399},[220,57525,31954],{"class":264},[220,57527,57528,57530,57532],{"class":222,"line":644},[220,57529,2550],{"class":264},[220,57531,2553],{"class":420},[220,57533,386],{"class":264},[220,57535,57536,57538,57540],{"class":222,"line":650},[220,57537,2567],{"class":264},[220,57539,57301],{"class":420},[220,57541,359],{"class":264},[220,57543,57544,57546,57548],{"class":222,"line":656},[220,57545,402],{"class":264},[220,57547,347],{"class":420},[220,57549,359],{"class":264},[212,57551,57553],{"className":251,"code":57552,"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,57554,57555,57565,57569,57583,57587,57600,57608,57612,57616],{"__ignoreMap":178},[220,57556,57557,57559,57561,57563],{"class":222,"line":223},[220,57558,261],{"class":260},[220,57560,11507],{"class":264},[220,57562,268],{"class":260},[220,57564,4007],{"class":230},[220,57566,57567],{"class":222,"line":179},[220,57568,647],{"emptyLinePlaceholder":194},[220,57570,57571,57573,57575,57577,57579,57581],{"class":222,"line":389},[220,57572,1735],{"class":260},[220,57574,1738],{"class":420},[220,57576,1741],{"class":260},[220,57578,1744],{"class":260},[220,57580,1747],{"class":226},[220,57582,1750],{"class":264},[220,57584,57585],{"class":222,"line":399},[220,57586,1765],{"class":264},[220,57588,57589,57591,57594,57596,57598],{"class":222,"line":644},[220,57590,1770],{"class":264},[220,57592,57593],{"class":230},"'LightLeak'",[220,57595,32198],{"class":264},[220,57597,18187],{"class":420},[220,57599,7541],{"class":264},[220,57601,57602,57604,57606],{"class":222,"line":650},[220,57603,7009],{"class":264},[220,57605,3206],{"class":230},[220,57607,2465],{"class":264},[220,57609,57610],{"class":222,"line":656},[220,57611,7026],{"class":264},[220,57613,57614],{"class":222,"line":673},[220,57615,1787],{"class":264},[220,57617,57618],{"class":222,"line":682},[220,57619,1792],{"class":264},[1504,57621,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57623},[57624,57625],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Flightleak",{"title":57301,"description":57309},"docs\u002Fcomponents\u002FLightLeak","9axsAe-hShN2GBHj7he9DblasuDlGGCnqO21FFAMLVM",{"id":57632,"title":57633,"body":57634,"category":32229,"componentType":25878,"description":57641,"extension":191,"meta":57958,"navigation":194,"path":57959,"requiresChild":194,"seo":57960,"stem":57961,"__hash__":57962},"components\u002Fdocs\u002Fcomponents\u002FLinearBlur.md","LinearBlur",{"type":8,"value":57635,"toc":57954},[57636,57639,57642,57644,57646,57649,57651,57952],[11,57637,57633],{"id":57638},"linearblur",[15,57640,57641],{},"Directional motion blur in a specific angle",[31906,57643],{"component":57633},[23,57645,31910],{"id":26528},[31912,57647],{":props":57648},"[{\"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,57650,31918],{"id":31917},[246,57652,57653,57709,57768,57824,57882],{":tabs":1557},[212,57654,57656],{"className":334,"code":57655,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57657,57658,57666,57673,57681,57685,57693,57701],{"__ignoreMap":178},[220,57659,57660,57662,57664],{"class":222,"line":223},[220,57661,343],{"class":264},[220,57663,347],{"class":346},[220,57665,359],{"class":264},[220,57667,57668,57670],{"class":222,"line":179},[220,57669,364],{"class":264},[220,57671,57672],{"class":346},"LinearBlur\n",[220,57674,57675,57677,57679],{"class":222,"line":389},[220,57676,20366],{"class":226},[220,57678,353],{"class":264},[220,57680,43587],{"class":230},[220,57682,57683],{"class":222,"line":399},[220,57684,31954],{"class":264},[220,57686,57687,57689,57691],{"class":222,"line":644},[220,57688,2550],{"class":264},[220,57690,2553],{"class":346},[220,57692,386],{"class":264},[220,57694,57695,57697,57699],{"class":222,"line":650},[220,57696,2567],{"class":264},[220,57698,57633],{"class":346},[220,57700,359],{"class":264},[220,57702,57703,57705,57707],{"class":222,"line":656},[220,57704,402],{"class":264},[220,57706,347],{"class":346},[220,57708,359],{"class":264},[212,57710,57712],{"className":409,"code":57711,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FLinearBlur>\n\u003C\u002FShader>\n",[99,57713,57714,57722,57728,57740,57744,57752,57760],{"__ignoreMap":178},[220,57715,57716,57718,57720],{"class":222,"line":223},[220,57717,343],{"class":264},[220,57719,347],{"class":420},[220,57721,359],{"class":264},[220,57723,57724,57726],{"class":222,"line":179},[220,57725,364],{"class":264},[220,57727,57672],{"class":420},[220,57729,57730,57732,57734,57736,57738],{"class":222,"line":389},[220,57731,20477],{"class":226},[220,57733,353],{"class":260},[220,57735,743],{"class":264},[220,57737,24005],{"class":420},[220,57739,749],{"class":264},[220,57741,57742],{"class":222,"line":399},[220,57743,31954],{"class":264},[220,57745,57746,57748,57750],{"class":222,"line":644},[220,57747,2550],{"class":264},[220,57749,2553],{"class":420},[220,57751,386],{"class":264},[220,57753,57754,57756,57758],{"class":222,"line":650},[220,57755,2567],{"class":264},[220,57757,57633],{"class":420},[220,57759,359],{"class":264},[220,57761,57762,57764,57766],{"class":222,"line":656},[220,57763,402],{"class":264},[220,57765,347],{"class":420},[220,57767,359],{"class":264},[212,57769,57770],{"className":2844,"code":57711,"language":2846,"meta":178,"style":178},[99,57771,57772,57780,57786,57796,57800,57808,57816],{"__ignoreMap":178},[220,57773,57774,57776,57778],{"class":222,"line":223},[220,57775,343],{"class":264},[220,57777,347],{"class":420},[220,57779,359],{"class":264},[220,57781,57782,57784],{"class":222,"line":179},[220,57783,364],{"class":264},[220,57785,57672],{"class":420},[220,57787,57788,57790,57792,57794],{"class":222,"line":389},[220,57789,20477],{"class":226},[220,57791,29866],{"class":264},[220,57793,24005],{"class":420},[220,57795,749],{"class":264},[220,57797,57798],{"class":222,"line":399},[220,57799,31954],{"class":264},[220,57801,57802,57804,57806],{"class":222,"line":644},[220,57803,2550],{"class":264},[220,57805,2553],{"class":420},[220,57807,386],{"class":264},[220,57809,57810,57812,57814],{"class":222,"line":650},[220,57811,2567],{"class":264},[220,57813,57633],{"class":420},[220,57815,359],{"class":264},[220,57817,57818,57820,57822],{"class":222,"line":656},[220,57819,402],{"class":264},[220,57821,347],{"class":420},[220,57823,359],{"class":264},[212,57825,57826],{"className":468,"code":57711,"language":469,"meta":178,"style":178},[99,57827,57828,57836,57842,57854,57858,57866,57874],{"__ignoreMap":178},[220,57829,57830,57832,57834],{"class":222,"line":223},[220,57831,343],{"class":264},[220,57833,347],{"class":420},[220,57835,359],{"class":264},[220,57837,57838,57840],{"class":222,"line":179},[220,57839,364],{"class":264},[220,57841,57672],{"class":420},[220,57843,57844,57846,57848,57850,57852],{"class":222,"line":389},[220,57845,20477],{"class":226},[220,57847,353],{"class":260},[220,57849,743],{"class":264},[220,57851,24005],{"class":420},[220,57853,749],{"class":264},[220,57855,57856],{"class":222,"line":399},[220,57857,31954],{"class":264},[220,57859,57860,57862,57864],{"class":222,"line":644},[220,57861,2550],{"class":264},[220,57863,2553],{"class":420},[220,57865,386],{"class":264},[220,57867,57868,57870,57872],{"class":222,"line":650},[220,57869,2567],{"class":264},[220,57871,57633],{"class":420},[220,57873,359],{"class":264},[220,57875,57876,57878,57880],{"class":222,"line":656},[220,57877,402],{"class":264},[220,57879,347],{"class":420},[220,57881,359],{"class":264},[212,57883,57885],{"className":251,"code":57884,"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,57886,57887,57897,57901,57915,57919,57932,57940,57944,57948],{"__ignoreMap":178},[220,57888,57889,57891,57893,57895],{"class":222,"line":223},[220,57890,261],{"class":260},[220,57892,11507],{"class":264},[220,57894,268],{"class":260},[220,57896,4007],{"class":230},[220,57898,57899],{"class":222,"line":179},[220,57900,647],{"emptyLinePlaceholder":194},[220,57902,57903,57905,57907,57909,57911,57913],{"class":222,"line":389},[220,57904,1735],{"class":260},[220,57906,1738],{"class":420},[220,57908,1741],{"class":260},[220,57910,1744],{"class":260},[220,57912,1747],{"class":226},[220,57914,1750],{"class":264},[220,57916,57917],{"class":222,"line":399},[220,57918,1765],{"class":264},[220,57920,57921,57923,57926,57928,57930],{"class":222,"line":644},[220,57922,1770],{"class":264},[220,57924,57925],{"class":230},"'LinearBlur'",[220,57927,32198],{"class":264},[220,57929,24005],{"class":420},[220,57931,7541],{"class":264},[220,57933,57934,57936,57938],{"class":222,"line":650},[220,57935,7009],{"class":264},[220,57937,3206],{"class":230},[220,57939,2465],{"class":264},[220,57941,57942],{"class":222,"line":656},[220,57943,7026],{"class":264},[220,57945,57946],{"class":222,"line":673},[220,57947,1787],{"class":264},[220,57949,57950],{"class":222,"line":682},[220,57951,1792],{"class":264},[1504,57953,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":57955},[57956,57957],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Flinearblur",{"title":57633,"description":57641},"docs\u002Fcomponents\u002FLinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":57964,"title":367,"body":57965,"category":33058,"componentType":25872,"description":57972,"extension":191,"meta":58156,"navigation":194,"path":58157,"requiresChild":32525,"seo":58158,"stem":58159,"__hash__":58160},"components\u002Fdocs\u002Fcomponents\u002FLinearGradient.md",{"type":8,"value":57966,"toc":58152},[57967,57970,57973,57975,57977,57980,57982,58150],[11,57968,367],{"id":57969},"lineargradient",[15,57971,57972],{},"Create smooth linear color gradients",[31906,57974],{"component":367},[23,57976,31910],{"id":26528},[31912,57978],{":props":57979},"[{\"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,57981,31918],{"id":31917},[246,57983,57984,58013,58041,58069,58097],{":tabs":1557},[212,57985,57987],{"className":334,"code":57986,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[99,57988,57989,57997,58005],{"__ignoreMap":178},[220,57990,57991,57993,57995],{"class":222,"line":223},[220,57992,343],{"class":264},[220,57994,347],{"class":346},[220,57996,359],{"class":264},[220,57998,57999,58001,58003],{"class":222,"line":179},[220,58000,364],{"class":264},[220,58002,367],{"class":346},[220,58004,386],{"class":264},[220,58006,58007,58009,58011],{"class":222,"line":389},[220,58008,402],{"class":264},[220,58010,347],{"class":346},[220,58012,359],{"class":264},[212,58014,58015],{"className":409,"code":57986,"language":411,"meta":178,"style":178},[99,58016,58017,58025,58033],{"__ignoreMap":178},[220,58018,58019,58021,58023],{"class":222,"line":223},[220,58020,343],{"class":264},[220,58022,347],{"class":420},[220,58024,359],{"class":264},[220,58026,58027,58029,58031],{"class":222,"line":179},[220,58028,364],{"class":264},[220,58030,367],{"class":420},[220,58032,386],{"class":264},[220,58034,58035,58037,58039],{"class":222,"line":389},[220,58036,402],{"class":264},[220,58038,347],{"class":420},[220,58040,359],{"class":264},[212,58042,58043],{"className":2844,"code":57986,"language":2846,"meta":178,"style":178},[99,58044,58045,58053,58061],{"__ignoreMap":178},[220,58046,58047,58049,58051],{"class":222,"line":223},[220,58048,343],{"class":264},[220,58050,347],{"class":420},[220,58052,359],{"class":264},[220,58054,58055,58057,58059],{"class":222,"line":179},[220,58056,364],{"class":264},[220,58058,367],{"class":420},[220,58060,386],{"class":264},[220,58062,58063,58065,58067],{"class":222,"line":389},[220,58064,402],{"class":264},[220,58066,347],{"class":420},[220,58068,359],{"class":264},[212,58070,58071],{"className":468,"code":57986,"language":469,"meta":178,"style":178},[99,58072,58073,58081,58089],{"__ignoreMap":178},[220,58074,58075,58077,58079],{"class":222,"line":223},[220,58076,343],{"class":264},[220,58078,347],{"class":420},[220,58080,359],{"class":264},[220,58082,58083,58085,58087],{"class":222,"line":179},[220,58084,364],{"class":264},[220,58086,367],{"class":420},[220,58088,386],{"class":264},[220,58090,58091,58093,58095],{"class":222,"line":389},[220,58092,402],{"class":264},[220,58094,347],{"class":420},[220,58096,359],{"class":264},[212,58098,58100],{"className":251,"code":58099,"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,58101,58102,58112,58116,58130,58134,58142,58146],{"__ignoreMap":178},[220,58103,58104,58106,58108,58110],{"class":222,"line":223},[220,58105,261],{"class":260},[220,58107,11507],{"class":264},[220,58109,268],{"class":260},[220,58111,4007],{"class":230},[220,58113,58114],{"class":222,"line":179},[220,58115,647],{"emptyLinePlaceholder":194},[220,58117,58118,58120,58122,58124,58126,58128],{"class":222,"line":389},[220,58119,1735],{"class":260},[220,58121,1738],{"class":420},[220,58123,1741],{"class":260},[220,58125,1744],{"class":260},[220,58127,1747],{"class":226},[220,58129,1750],{"class":264},[220,58131,58132],{"class":222,"line":399},[220,58133,1765],{"class":264},[220,58135,58136,58138,58140],{"class":222,"line":644},[220,58137,1770],{"class":264},[220,58139,2462],{"class":230},[220,58141,2465],{"class":264},[220,58143,58144],{"class":222,"line":650},[220,58145,1787],{"class":264},[220,58147,58148],{"class":222,"line":656},[220,58149,1792],{"class":264},[1504,58151,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":58153},[58154,58155],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Flineargradient",{"title":367,"description":57972},"docs\u002Fcomponents\u002FLinearGradient","5V6smxOaH3k-3P0Y6AN5bQr0_Rb15-ActtHusD_Eb6k",{"id":58162,"title":58163,"body":58164,"category":33668,"componentType":25878,"description":58171,"extension":191,"meta":58432,"navigation":194,"path":58433,"requiresChild":194,"seo":58434,"stem":58435,"__hash__":58436},"components\u002Fdocs\u002Fcomponents\u002FLinearWipe.md","LinearWipe",{"type":8,"value":58165,"toc":58428},[58166,58169,58172,58174,58176,58179,58181,58426],[11,58167,58163],{"id":58168},"linearwipe",[15,58170,58171],{},"Wipe the content away along a straight edge with a soft feathered transition",[31906,58173],{"component":58163},[23,58175,31910],{"id":26528},[31912,58177],{":props":58178},"[{\"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,58180,31918],{"id":31917},[246,58182,58183,58228,58272,58316,58360],{":tabs":1557},[212,58184,58186],{"className":334,"code":58185,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLinearWipe>\n \u003CCircle \u002F>\n \u003C\u002FLinearWipe>\n\u003C\u002FShader>\n",[99,58187,58188,58196,58204,58212,58220],{"__ignoreMap":178},[220,58189,58190,58192,58194],{"class":222,"line":223},[220,58191,343],{"class":264},[220,58193,347],{"class":346},[220,58195,359],{"class":264},[220,58197,58198,58200,58202],{"class":222,"line":179},[220,58199,364],{"class":264},[220,58201,58163],{"class":346},[220,58203,359],{"class":264},[220,58205,58206,58208,58210],{"class":222,"line":389},[220,58207,2550],{"class":264},[220,58209,2553],{"class":346},[220,58211,386],{"class":264},[220,58213,58214,58216,58218],{"class":222,"line":399},[220,58215,2567],{"class":264},[220,58217,58163],{"class":346},[220,58219,359],{"class":264},[220,58221,58222,58224,58226],{"class":222,"line":644},[220,58223,402],{"class":264},[220,58225,347],{"class":346},[220,58227,359],{"class":264},[212,58229,58230],{"className":409,"code":58185,"language":411,"meta":178,"style":178},[99,58231,58232,58240,58248,58256,58264],{"__ignoreMap":178},[220,58233,58234,58236,58238],{"class":222,"line":223},[220,58235,343],{"class":264},[220,58237,347],{"class":420},[220,58239,359],{"class":264},[220,58241,58242,58244,58246],{"class":222,"line":179},[220,58243,364],{"class":264},[220,58245,58163],{"class":420},[220,58247,359],{"class":264},[220,58249,58250,58252,58254],{"class":222,"line":389},[220,58251,2550],{"class":264},[220,58253,2553],{"class":420},[220,58255,386],{"class":264},[220,58257,58258,58260,58262],{"class":222,"line":399},[220,58259,2567],{"class":264},[220,58261,58163],{"class":420},[220,58263,359],{"class":264},[220,58265,58266,58268,58270],{"class":222,"line":644},[220,58267,402],{"class":264},[220,58269,347],{"class":420},[220,58271,359],{"class":264},[212,58273,58274],{"className":2844,"code":58185,"language":2846,"meta":178,"style":178},[99,58275,58276,58284,58292,58300,58308],{"__ignoreMap":178},[220,58277,58278,58280,58282],{"class":222,"line":223},[220,58279,343],{"class":264},[220,58281,347],{"class":420},[220,58283,359],{"class":264},[220,58285,58286,58288,58290],{"class":222,"line":179},[220,58287,364],{"class":264},[220,58289,58163],{"class":420},[220,58291,359],{"class":264},[220,58293,58294,58296,58298],{"class":222,"line":389},[220,58295,2550],{"class":264},[220,58297,2553],{"class":420},[220,58299,386],{"class":264},[220,58301,58302,58304,58306],{"class":222,"line":399},[220,58303,2567],{"class":264},[220,58305,58163],{"class":420},[220,58307,359],{"class":264},[220,58309,58310,58312,58314],{"class":222,"line":644},[220,58311,402],{"class":264},[220,58313,347],{"class":420},[220,58315,359],{"class":264},[212,58317,58318],{"className":468,"code":58185,"language":469,"meta":178,"style":178},[99,58319,58320,58328,58336,58344,58352],{"__ignoreMap":178},[220,58321,58322,58324,58326],{"class":222,"line":223},[220,58323,343],{"class":264},[220,58325,347],{"class":420},[220,58327,359],{"class":264},[220,58329,58330,58332,58334],{"class":222,"line":179},[220,58331,364],{"class":264},[220,58333,58163],{"class":420},[220,58335,359],{"class":264},[220,58337,58338,58340,58342],{"class":222,"line":389},[220,58339,2550],{"class":264},[220,58341,2553],{"class":420},[220,58343,386],{"class":264},[220,58345,58346,58348,58350],{"class":222,"line":399},[220,58347,2567],{"class":264},[220,58349,58163],{"class":420},[220,58351,359],{"class":264},[220,58353,58354,58356,58358],{"class":222,"line":644},[220,58355,402],{"class":264},[220,58357,347],{"class":420},[220,58359,359],{"class":264},[212,58361,58363],{"className":251,"code":58362,"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,58364,58365,58375,58379,58393,58397,58406,58414,58418,58422],{"__ignoreMap":178},[220,58366,58367,58369,58371,58373],{"class":222,"line":223},[220,58368,261],{"class":260},[220,58370,11507],{"class":264},[220,58372,268],{"class":260},[220,58374,4007],{"class":230},[220,58376,58377],{"class":222,"line":179},[220,58378,647],{"emptyLinePlaceholder":194},[220,58380,58381,58383,58385,58387,58389,58391],{"class":222,"line":389},[220,58382,1735],{"class":260},[220,58384,1738],{"class":420},[220,58386,1741],{"class":260},[220,58388,1744],{"class":260},[220,58390,1747],{"class":226},[220,58392,1750],{"class":264},[220,58394,58395],{"class":222,"line":399},[220,58396,1765],{"class":264},[220,58398,58399,58401,58404],{"class":222,"line":644},[220,58400,1770],{"class":264},[220,58402,58403],{"class":230},"'LinearWipe'",[220,58405,7004],{"class":264},[220,58407,58408,58410,58412],{"class":222,"line":650},[220,58409,7009],{"class":264},[220,58411,3206],{"class":230},[220,58413,2465],{"class":264},[220,58415,58416],{"class":222,"line":656},[220,58417,7026],{"class":264},[220,58419,58420],{"class":222,"line":673},[220,58421,1787],{"class":264},[220,58423,58424],{"class":222,"line":682},[220,58425,1792],{"class":264},[1504,58427,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":58429},[58430,58431],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Flinearwipe",{"title":58163,"description":58171},"docs\u002Fcomponents\u002FLinearWipe","Do2VP6VCJG5V-V0O07nzgUTppBJgUsZZ-ZsoVAOlqwk",{"id":58438,"title":58439,"body":58440,"category":36564,"componentType":25872,"description":58447,"extension":191,"meta":58632,"navigation":194,"path":58633,"requiresChild":32525,"seo":58634,"stem":58635,"__hash__":58636},"components\u002Fdocs\u002Fcomponents\u002FLiquidMetal.md","LiquidMetal",{"type":8,"value":58441,"toc":58628},[58442,58445,58448,58450,58452,58455,58457,58626],[11,58443,58439],{"id":58444},"liquidmetal",[15,58446,58447],{},"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",[31906,58449],{"component":58439},[23,58451,31910],{"id":26528},[31912,58453],{":props":58454},"[{\"name\":\"origin\",\"type\":\"string\",\"default\":\"center\",\"description\":\"Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the metal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the metal shape (1 = default size)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the metal shape in degrees\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#eef0f6\",\"description\":\"The bright tone of the chrome highlights\"},{\"name\":\"darkColor\",\"type\":\"string\",\"default\":\"#141414\",\"description\":\"The dark tone the reflection falls to in shadow — recolor for tinted metal (gold, steel, copper…)\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How molten the surface is — the depth of the flowing folds that bend the reflection\"},{\"name\":\"ripple\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Scale of the molten folds — higher = smaller, busier ripples\"},{\"name\":\"warp\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Swirl of the flow — domain-warps the folds into liquid curls\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of the molten flow and the slowly drifting reflection. 0 pauses.\"},{\"name\":\"environment\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Strength of the reflected studio lighting — the softboxes seen across the metal\"},{\"name\":\"envRotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the whole reflected studio — spins where the bright reflections fall\"},{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Tightness of the specular highlights — 1 = razor chrome glints, 0 = soft satin\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Prismatic color fringing along the reflection edges\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"265\",\"description\":\"Direction of the key light for the specular glints, in degrees\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Softness of the shape boundary edge\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](\u002Fdocs\u002Fguide\u002Fshape-effects) for how to generate an SDF from an SVG.\"}]",[23,58456,31918],{"id":31917},[246,58458,58459,58488,58516,58544,58572],{":tabs":1557},[212,58460,58462],{"className":334,"code":58461,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CLiquidMetal \u002F>\n\u003C\u002FShader>\n",[99,58463,58464,58472,58480],{"__ignoreMap":178},[220,58465,58466,58468,58470],{"class":222,"line":223},[220,58467,343],{"class":264},[220,58469,347],{"class":346},[220,58471,359],{"class":264},[220,58473,58474,58476,58478],{"class":222,"line":179},[220,58475,364],{"class":264},[220,58477,58439],{"class":346},[220,58479,386],{"class":264},[220,58481,58482,58484,58486],{"class":222,"line":389},[220,58483,402],{"class":264},[220,58485,347],{"class":346},[220,58487,359],{"class":264},[212,58489,58490],{"className":409,"code":58461,"language":411,"meta":178,"style":178},[99,58491,58492,58500,58508],{"__ignoreMap":178},[220,58493,58494,58496,58498],{"class":222,"line":223},[220,58495,343],{"class":264},[220,58497,347],{"class":420},[220,58499,359],{"class":264},[220,58501,58502,58504,58506],{"class":222,"line":179},[220,58503,364],{"class":264},[220,58505,58439],{"class":420},[220,58507,386],{"class":264},[220,58509,58510,58512,58514],{"class":222,"line":389},[220,58511,402],{"class":264},[220,58513,347],{"class":420},[220,58515,359],{"class":264},[212,58517,58518],{"className":2844,"code":58461,"language":2846,"meta":178,"style":178},[99,58519,58520,58528,58536],{"__ignoreMap":178},[220,58521,58522,58524,58526],{"class":222,"line":223},[220,58523,343],{"class":264},[220,58525,347],{"class":420},[220,58527,359],{"class":264},[220,58529,58530,58532,58534],{"class":222,"line":179},[220,58531,364],{"class":264},[220,58533,58439],{"class":420},[220,58535,386],{"class":264},[220,58537,58538,58540,58542],{"class":222,"line":389},[220,58539,402],{"class":264},[220,58541,347],{"class":420},[220,58543,359],{"class":264},[212,58545,58546],{"className":468,"code":58461,"language":469,"meta":178,"style":178},[99,58547,58548,58556,58564],{"__ignoreMap":178},[220,58549,58550,58552,58554],{"class":222,"line":223},[220,58551,343],{"class":264},[220,58553,347],{"class":420},[220,58555,359],{"class":264},[220,58557,58558,58560,58562],{"class":222,"line":179},[220,58559,364],{"class":264},[220,58561,58439],{"class":420},[220,58563,386],{"class":264},[220,58565,58566,58568,58570],{"class":222,"line":389},[220,58567,402],{"class":264},[220,58569,347],{"class":420},[220,58571,359],{"class":264},[212,58573,58575],{"className":251,"code":58574,"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,58576,58577,58587,58591,58605,58609,58618,58622],{"__ignoreMap":178},[220,58578,58579,58581,58583,58585],{"class":222,"line":223},[220,58580,261],{"class":260},[220,58582,11507],{"class":264},[220,58584,268],{"class":260},[220,58586,4007],{"class":230},[220,58588,58589],{"class":222,"line":179},[220,58590,647],{"emptyLinePlaceholder":194},[220,58592,58593,58595,58597,58599,58601,58603],{"class":222,"line":389},[220,58594,1735],{"class":260},[220,58596,1738],{"class":420},[220,58598,1741],{"class":260},[220,58600,1744],{"class":260},[220,58602,1747],{"class":226},[220,58604,1750],{"class":264},[220,58606,58607],{"class":222,"line":399},[220,58608,1765],{"class":264},[220,58610,58611,58613,58616],{"class":222,"line":644},[220,58612,1770],{"class":264},[220,58614,58615],{"class":230},"'LiquidMetal'",[220,58617,2465],{"class":264},[220,58619,58620],{"class":222,"line":650},[220,58621,1787],{"class":264},[220,58623,58624],{"class":222,"line":656},[220,58625,1792],{"class":264},[1504,58627,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":58629},[58630,58631],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fliquidmetal",{"title":58439,"description":58447},"docs\u002Fcomponents\u002FLiquidMetal","LmQ5r2jwprcNrDO0hQT_86dYHtyOQFU-SFxP_e6xZTM",{"id":58638,"title":58639,"body":58640,"category":35554,"componentType":25878,"description":58647,"extension":191,"meta":59010,"navigation":194,"path":59011,"requiresChild":194,"seo":59012,"stem":59013,"__hash__":59014},"components\u002Fdocs\u002Fcomponents\u002FLiquify.md","Liquify",{"type":8,"value":58641,"toc":59006},[58642,58645,58648,58650,58652,58655,58657,59004],[11,58643,58639],{"id":58644},"liquify",[15,58646,58647],{},"Liquid-like interactive deformation effect",[31906,58649],{"component":58639},[23,58651,31910],{"id":26528},[31912,58653],{":props":58654},"[{\"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,58656,31918],{"id":31917},[246,58658,58659,58723,58794,58860,58930],{":tabs":1557},[212,58660,58662],{"className":334,"code":58661,"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,58663,58664,58672,58679,58687,58695,58699,58707,58715],{"__ignoreMap":178},[220,58665,58666,58668,58670],{"class":222,"line":223},[220,58667,343],{"class":264},[220,58669,347],{"class":346},[220,58671,359],{"class":264},[220,58673,58674,58676],{"class":222,"line":179},[220,58675,364],{"class":264},[220,58677,58678],{"class":346},"Liquify\n",[220,58680,58681,58683,58685],{"class":222,"line":389},[220,58682,20366],{"class":226},[220,58684,353],{"class":264},[220,58686,42144],{"class":230},[220,58688,58689,58691,58693],{"class":222,"line":399},[220,58690,17400],{"class":226},[220,58692,353],{"class":264},[220,58694,36620],{"class":230},[220,58696,58697],{"class":222,"line":644},[220,58698,31954],{"class":264},[220,58700,58701,58703,58705],{"class":222,"line":650},[220,58702,2550],{"class":264},[220,58704,2553],{"class":346},[220,58706,386],{"class":264},[220,58708,58709,58711,58713],{"class":222,"line":656},[220,58710,2567],{"class":264},[220,58712,58639],{"class":346},[220,58714,359],{"class":264},[220,58716,58717,58719,58721],{"class":222,"line":673},[220,58718,402],{"class":264},[220,58720,347],{"class":346},[220,58722,359],{"class":264},[212,58724,58726],{"className":409,"code":58725,"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,58727,58728,58736,58742,58754,58766,58770,58778,58786],{"__ignoreMap":178},[220,58729,58730,58732,58734],{"class":222,"line":223},[220,58731,343],{"class":264},[220,58733,347],{"class":420},[220,58735,359],{"class":264},[220,58737,58738,58740],{"class":222,"line":179},[220,58739,364],{"class":264},[220,58741,58678],{"class":420},[220,58743,58744,58746,58748,58750,58752],{"class":222,"line":389},[220,58745,20477],{"class":226},[220,58747,353],{"class":260},[220,58749,743],{"class":264},[220,58751,23845],{"class":420},[220,58753,749],{"class":264},[220,58755,58756,58758,58760,58762,58764],{"class":222,"line":399},[220,58757,9640],{"class":226},[220,58759,353],{"class":260},[220,58761,743],{"class":264},[220,58763,8672],{"class":420},[220,58765,749],{"class":264},[220,58767,58768],{"class":222,"line":644},[220,58769,31954],{"class":264},[220,58771,58772,58774,58776],{"class":222,"line":650},[220,58773,2550],{"class":264},[220,58775,2553],{"class":420},[220,58777,386],{"class":264},[220,58779,58780,58782,58784],{"class":222,"line":656},[220,58781,2567],{"class":264},[220,58783,58639],{"class":420},[220,58785,359],{"class":264},[220,58787,58788,58790,58792],{"class":222,"line":673},[220,58789,402],{"class":264},[220,58791,347],{"class":420},[220,58793,359],{"class":264},[212,58795,58796],{"className":2844,"code":58725,"language":2846,"meta":178,"style":178},[99,58797,58798,58806,58812,58822,58832,58836,58844,58852],{"__ignoreMap":178},[220,58799,58800,58802,58804],{"class":222,"line":223},[220,58801,343],{"class":264},[220,58803,347],{"class":420},[220,58805,359],{"class":264},[220,58807,58808,58810],{"class":222,"line":179},[220,58809,364],{"class":264},[220,58811,58678],{"class":420},[220,58813,58814,58816,58818,58820],{"class":222,"line":389},[220,58815,20477],{"class":226},[220,58817,29866],{"class":264},[220,58819,23845],{"class":420},[220,58821,749],{"class":264},[220,58823,58824,58826,58828,58830],{"class":222,"line":399},[220,58825,9640],{"class":226},[220,58827,29866],{"class":264},[220,58829,8672],{"class":420},[220,58831,749],{"class":264},[220,58833,58834],{"class":222,"line":644},[220,58835,31954],{"class":264},[220,58837,58838,58840,58842],{"class":222,"line":650},[220,58839,2550],{"class":264},[220,58841,2553],{"class":420},[220,58843,386],{"class":264},[220,58845,58846,58848,58850],{"class":222,"line":656},[220,58847,2567],{"class":264},[220,58849,58639],{"class":420},[220,58851,359],{"class":264},[220,58853,58854,58856,58858],{"class":222,"line":673},[220,58855,402],{"class":264},[220,58857,347],{"class":420},[220,58859,359],{"class":264},[212,58861,58862],{"className":468,"code":58725,"language":469,"meta":178,"style":178},[99,58863,58864,58872,58878,58890,58902,58906,58914,58922],{"__ignoreMap":178},[220,58865,58866,58868,58870],{"class":222,"line":223},[220,58867,343],{"class":264},[220,58869,347],{"class":420},[220,58871,359],{"class":264},[220,58873,58874,58876],{"class":222,"line":179},[220,58875,364],{"class":264},[220,58877,58678],{"class":420},[220,58879,58880,58882,58884,58886,58888],{"class":222,"line":389},[220,58881,20477],{"class":226},[220,58883,353],{"class":260},[220,58885,743],{"class":264},[220,58887,23845],{"class":420},[220,58889,749],{"class":264},[220,58891,58892,58894,58896,58898,58900],{"class":222,"line":399},[220,58893,9640],{"class":226},[220,58895,353],{"class":260},[220,58897,743],{"class":264},[220,58899,8672],{"class":420},[220,58901,749],{"class":264},[220,58903,58904],{"class":222,"line":644},[220,58905,31954],{"class":264},[220,58907,58908,58910,58912],{"class":222,"line":650},[220,58909,2550],{"class":264},[220,58911,2553],{"class":420},[220,58913,386],{"class":264},[220,58915,58916,58918,58920],{"class":222,"line":656},[220,58917,2567],{"class":264},[220,58919,58639],{"class":420},[220,58921,359],{"class":264},[220,58923,58924,58926,58928],{"class":222,"line":673},[220,58925,402],{"class":264},[220,58927,347],{"class":420},[220,58929,359],{"class":264},[212,58931,58933],{"className":251,"code":58932,"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,58934,58935,58945,58949,58963,58967,58984,58992,58996,59000],{"__ignoreMap":178},[220,58936,58937,58939,58941,58943],{"class":222,"line":223},[220,58938,261],{"class":260},[220,58940,11507],{"class":264},[220,58942,268],{"class":260},[220,58944,4007],{"class":230},[220,58946,58947],{"class":222,"line":179},[220,58948,647],{"emptyLinePlaceholder":194},[220,58950,58951,58953,58955,58957,58959,58961],{"class":222,"line":389},[220,58952,1735],{"class":260},[220,58954,1738],{"class":420},[220,58956,1741],{"class":260},[220,58958,1744],{"class":260},[220,58960,1747],{"class":226},[220,58962,1750],{"class":264},[220,58964,58965],{"class":222,"line":399},[220,58966,1765],{"class":264},[220,58968,58969,58971,58974,58976,58978,58980,58982],{"class":222,"line":644},[220,58970,1770],{"class":264},[220,58972,58973],{"class":230},"'Liquify'",[220,58975,32198],{"class":264},[220,58977,23845],{"class":420},[220,58979,6561],{"class":264},[220,58981,8672],{"class":420},[220,58983,7541],{"class":264},[220,58985,58986,58988,58990],{"class":222,"line":650},[220,58987,7009],{"class":264},[220,58989,3206],{"class":230},[220,58991,2465],{"class":264},[220,58993,58994],{"class":222,"line":656},[220,58995,7026],{"class":264},[220,58997,58998],{"class":222,"line":673},[220,58999,1787],{"class":264},[220,59001,59002],{"class":222,"line":682},[220,59003,1792],{"class":264},[1504,59005,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":59007},[59008,59009],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fliquify",{"title":58639,"description":58647},"docs\u002Fcomponents\u002FLiquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":59016,"title":59017,"body":59018,"category":35554,"componentType":25872,"description":59025,"extension":191,"meta":59210,"navigation":194,"path":59211,"requiresChild":32525,"seo":59212,"stem":59213,"__hash__":59214},"components\u002Fdocs\u002Fcomponents\u002FMagneticFilings.md","MagneticFilings",{"type":8,"value":59019,"toc":59206},[59020,59023,59026,59028,59030,59033,59035,59204],[11,59021,59017],{"id":59022},"magneticfilings",[15,59024,59025],{},"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",[31906,59027],{"component":59017},[23,59029,31910],{"id":26528},[31912,59031],{":props":59032},"[{\"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,59034,31918],{"id":31917},[246,59036,59037,59066,59094,59122,59150],{":tabs":1557},[212,59038,59040],{"className":334,"code":59039,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMagneticFilings \u002F>\n\u003C\u002FShader>\n",[99,59041,59042,59050,59058],{"__ignoreMap":178},[220,59043,59044,59046,59048],{"class":222,"line":223},[220,59045,343],{"class":264},[220,59047,347],{"class":346},[220,59049,359],{"class":264},[220,59051,59052,59054,59056],{"class":222,"line":179},[220,59053,364],{"class":264},[220,59055,59017],{"class":346},[220,59057,386],{"class":264},[220,59059,59060,59062,59064],{"class":222,"line":389},[220,59061,402],{"class":264},[220,59063,347],{"class":346},[220,59065,359],{"class":264},[212,59067,59068],{"className":409,"code":59039,"language":411,"meta":178,"style":178},[99,59069,59070,59078,59086],{"__ignoreMap":178},[220,59071,59072,59074,59076],{"class":222,"line":223},[220,59073,343],{"class":264},[220,59075,347],{"class":420},[220,59077,359],{"class":264},[220,59079,59080,59082,59084],{"class":222,"line":179},[220,59081,364],{"class":264},[220,59083,59017],{"class":420},[220,59085,386],{"class":264},[220,59087,59088,59090,59092],{"class":222,"line":389},[220,59089,402],{"class":264},[220,59091,347],{"class":420},[220,59093,359],{"class":264},[212,59095,59096],{"className":2844,"code":59039,"language":2846,"meta":178,"style":178},[99,59097,59098,59106,59114],{"__ignoreMap":178},[220,59099,59100,59102,59104],{"class":222,"line":223},[220,59101,343],{"class":264},[220,59103,347],{"class":420},[220,59105,359],{"class":264},[220,59107,59108,59110,59112],{"class":222,"line":179},[220,59109,364],{"class":264},[220,59111,59017],{"class":420},[220,59113,386],{"class":264},[220,59115,59116,59118,59120],{"class":222,"line":389},[220,59117,402],{"class":264},[220,59119,347],{"class":420},[220,59121,359],{"class":264},[212,59123,59124],{"className":468,"code":59039,"language":469,"meta":178,"style":178},[99,59125,59126,59134,59142],{"__ignoreMap":178},[220,59127,59128,59130,59132],{"class":222,"line":223},[220,59129,343],{"class":264},[220,59131,347],{"class":420},[220,59133,359],{"class":264},[220,59135,59136,59138,59140],{"class":222,"line":179},[220,59137,364],{"class":264},[220,59139,59017],{"class":420},[220,59141,386],{"class":264},[220,59143,59144,59146,59148],{"class":222,"line":389},[220,59145,402],{"class":264},[220,59147,347],{"class":420},[220,59149,359],{"class":264},[212,59151,59153],{"className":251,"code":59152,"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,59154,59155,59165,59169,59183,59187,59196,59200],{"__ignoreMap":178},[220,59156,59157,59159,59161,59163],{"class":222,"line":223},[220,59158,261],{"class":260},[220,59160,11507],{"class":264},[220,59162,268],{"class":260},[220,59164,4007],{"class":230},[220,59166,59167],{"class":222,"line":179},[220,59168,647],{"emptyLinePlaceholder":194},[220,59170,59171,59173,59175,59177,59179,59181],{"class":222,"line":389},[220,59172,1735],{"class":260},[220,59174,1738],{"class":420},[220,59176,1741],{"class":260},[220,59178,1744],{"class":260},[220,59180,1747],{"class":226},[220,59182,1750],{"class":264},[220,59184,59185],{"class":222,"line":399},[220,59186,1765],{"class":264},[220,59188,59189,59191,59194],{"class":222,"line":644},[220,59190,1770],{"class":264},[220,59192,59193],{"class":230},"'MagneticFilings'",[220,59195,2465],{"class":264},[220,59197,59198],{"class":222,"line":650},[220,59199,1787],{"class":264},[220,59201,59202],{"class":222,"line":656},[220,59203,1792],{"class":264},[1504,59205,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":59207},[59208,59209],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fmagneticfilings",{"title":59017,"description":59025},"docs\u002Fcomponents\u002FMagneticFilings","U8PeRAe8_FnYvmQqGfzTNEhVpWkgxxeoKJjn9HVNJaY",{"id":59216,"title":59217,"body":59218,"category":33058,"componentType":25872,"description":59225,"extension":191,"meta":59410,"navigation":194,"path":59411,"requiresChild":32525,"seo":59412,"stem":59413,"__hash__":59414},"components\u002Fdocs\u002Fcomponents\u002FMarble.md","Marble",{"type":8,"value":59219,"toc":59406},[59220,59223,59226,59228,59230,59233,59235,59404],[11,59221,59217],{"id":59222},"marble",[15,59224,59225],{},"Classic marble swirl and vein texture using noise-warped sine waves",[31906,59227],{"component":59217},[23,59229,31910],{"id":26528},[31912,59231],{":props":59232},"[{\"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,59234,31918],{"id":31917},[246,59236,59237,59266,59294,59322,59350],{":tabs":1557},[212,59238,59240],{"className":334,"code":59239,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMarble \u002F>\n\u003C\u002FShader>\n",[99,59241,59242,59250,59258],{"__ignoreMap":178},[220,59243,59244,59246,59248],{"class":222,"line":223},[220,59245,343],{"class":264},[220,59247,347],{"class":346},[220,59249,359],{"class":264},[220,59251,59252,59254,59256],{"class":222,"line":179},[220,59253,364],{"class":264},[220,59255,59217],{"class":346},[220,59257,386],{"class":264},[220,59259,59260,59262,59264],{"class":222,"line":389},[220,59261,402],{"class":264},[220,59263,347],{"class":346},[220,59265,359],{"class":264},[212,59267,59268],{"className":409,"code":59239,"language":411,"meta":178,"style":178},[99,59269,59270,59278,59286],{"__ignoreMap":178},[220,59271,59272,59274,59276],{"class":222,"line":223},[220,59273,343],{"class":264},[220,59275,347],{"class":420},[220,59277,359],{"class":264},[220,59279,59280,59282,59284],{"class":222,"line":179},[220,59281,364],{"class":264},[220,59283,59217],{"class":420},[220,59285,386],{"class":264},[220,59287,59288,59290,59292],{"class":222,"line":389},[220,59289,402],{"class":264},[220,59291,347],{"class":420},[220,59293,359],{"class":264},[212,59295,59296],{"className":2844,"code":59239,"language":2846,"meta":178,"style":178},[99,59297,59298,59306,59314],{"__ignoreMap":178},[220,59299,59300,59302,59304],{"class":222,"line":223},[220,59301,343],{"class":264},[220,59303,347],{"class":420},[220,59305,359],{"class":264},[220,59307,59308,59310,59312],{"class":222,"line":179},[220,59309,364],{"class":264},[220,59311,59217],{"class":420},[220,59313,386],{"class":264},[220,59315,59316,59318,59320],{"class":222,"line":389},[220,59317,402],{"class":264},[220,59319,347],{"class":420},[220,59321,359],{"class":264},[212,59323,59324],{"className":468,"code":59239,"language":469,"meta":178,"style":178},[99,59325,59326,59334,59342],{"__ignoreMap":178},[220,59327,59328,59330,59332],{"class":222,"line":223},[220,59329,343],{"class":264},[220,59331,347],{"class":420},[220,59333,359],{"class":264},[220,59335,59336,59338,59340],{"class":222,"line":179},[220,59337,364],{"class":264},[220,59339,59217],{"class":420},[220,59341,386],{"class":264},[220,59343,59344,59346,59348],{"class":222,"line":389},[220,59345,402],{"class":264},[220,59347,347],{"class":420},[220,59349,359],{"class":264},[212,59351,59353],{"className":251,"code":59352,"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,59354,59355,59365,59369,59383,59387,59396,59400],{"__ignoreMap":178},[220,59356,59357,59359,59361,59363],{"class":222,"line":223},[220,59358,261],{"class":260},[220,59360,11507],{"class":264},[220,59362,268],{"class":260},[220,59364,4007],{"class":230},[220,59366,59367],{"class":222,"line":179},[220,59368,647],{"emptyLinePlaceholder":194},[220,59370,59371,59373,59375,59377,59379,59381],{"class":222,"line":389},[220,59372,1735],{"class":260},[220,59374,1738],{"class":420},[220,59376,1741],{"class":260},[220,59378,1744],{"class":260},[220,59380,1747],{"class":226},[220,59382,1750],{"class":264},[220,59384,59385],{"class":222,"line":399},[220,59386,1765],{"class":264},[220,59388,59389,59391,59394],{"class":222,"line":644},[220,59390,1770],{"class":264},[220,59392,59393],{"class":230},"'Marble'",[220,59395,2465],{"class":264},[220,59397,59398],{"class":222,"line":650},[220,59399,1787],{"class":264},[220,59401,59402],{"class":222,"line":656},[220,59403,1792],{"class":264},[1504,59405,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":59407},[59408,59409],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fmarble",{"title":59217,"description":59225},"docs\u002Fcomponents\u002FMarble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":59416,"title":59417,"body":59418,"category":33391,"componentType":25878,"description":59425,"extension":191,"meta":59686,"navigation":194,"path":59687,"requiresChild":194,"seo":59688,"stem":59689,"__hash__":59690},"components\u002Fdocs\u002Fcomponents\u002FMirror.md","Mirror",{"type":8,"value":59419,"toc":59682},[59420,59423,59426,59428,59430,59433,59435,59680],[11,59421,59417],{"id":59422},"mirror",[15,59424,59425],{},"Mirror content across a line defined by center point and angle",[31906,59427],{"component":59417},[23,59429,31910],{"id":26528},[31912,59431],{":props":59432},"[{\"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,59434,31918],{"id":31917},[246,59436,59437,59482,59526,59570,59614],{":tabs":1557},[212,59438,59440],{"className":334,"code":59439,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMirror>\n \u003CCircle \u002F>\n \u003C\u002FMirror>\n\u003C\u002FShader>\n",[99,59441,59442,59450,59458,59466,59474],{"__ignoreMap":178},[220,59443,59444,59446,59448],{"class":222,"line":223},[220,59445,343],{"class":264},[220,59447,347],{"class":346},[220,59449,359],{"class":264},[220,59451,59452,59454,59456],{"class":222,"line":179},[220,59453,364],{"class":264},[220,59455,59417],{"class":346},[220,59457,359],{"class":264},[220,59459,59460,59462,59464],{"class":222,"line":389},[220,59461,2550],{"class":264},[220,59463,2553],{"class":346},[220,59465,386],{"class":264},[220,59467,59468,59470,59472],{"class":222,"line":399},[220,59469,2567],{"class":264},[220,59471,59417],{"class":346},[220,59473,359],{"class":264},[220,59475,59476,59478,59480],{"class":222,"line":644},[220,59477,402],{"class":264},[220,59479,347],{"class":346},[220,59481,359],{"class":264},[212,59483,59484],{"className":409,"code":59439,"language":411,"meta":178,"style":178},[99,59485,59486,59494,59502,59510,59518],{"__ignoreMap":178},[220,59487,59488,59490,59492],{"class":222,"line":223},[220,59489,343],{"class":264},[220,59491,347],{"class":420},[220,59493,359],{"class":264},[220,59495,59496,59498,59500],{"class":222,"line":179},[220,59497,364],{"class":264},[220,59499,59417],{"class":420},[220,59501,359],{"class":264},[220,59503,59504,59506,59508],{"class":222,"line":389},[220,59505,2550],{"class":264},[220,59507,2553],{"class":420},[220,59509,386],{"class":264},[220,59511,59512,59514,59516],{"class":222,"line":399},[220,59513,2567],{"class":264},[220,59515,59417],{"class":420},[220,59517,359],{"class":264},[220,59519,59520,59522,59524],{"class":222,"line":644},[220,59521,402],{"class":264},[220,59523,347],{"class":420},[220,59525,359],{"class":264},[212,59527,59528],{"className":2844,"code":59439,"language":2846,"meta":178,"style":178},[99,59529,59530,59538,59546,59554,59562],{"__ignoreMap":178},[220,59531,59532,59534,59536],{"class":222,"line":223},[220,59533,343],{"class":264},[220,59535,347],{"class":420},[220,59537,359],{"class":264},[220,59539,59540,59542,59544],{"class":222,"line":179},[220,59541,364],{"class":264},[220,59543,59417],{"class":420},[220,59545,359],{"class":264},[220,59547,59548,59550,59552],{"class":222,"line":389},[220,59549,2550],{"class":264},[220,59551,2553],{"class":420},[220,59553,386],{"class":264},[220,59555,59556,59558,59560],{"class":222,"line":399},[220,59557,2567],{"class":264},[220,59559,59417],{"class":420},[220,59561,359],{"class":264},[220,59563,59564,59566,59568],{"class":222,"line":644},[220,59565,402],{"class":264},[220,59567,347],{"class":420},[220,59569,359],{"class":264},[212,59571,59572],{"className":468,"code":59439,"language":469,"meta":178,"style":178},[99,59573,59574,59582,59590,59598,59606],{"__ignoreMap":178},[220,59575,59576,59578,59580],{"class":222,"line":223},[220,59577,343],{"class":264},[220,59579,347],{"class":420},[220,59581,359],{"class":264},[220,59583,59584,59586,59588],{"class":222,"line":179},[220,59585,364],{"class":264},[220,59587,59417],{"class":420},[220,59589,359],{"class":264},[220,59591,59592,59594,59596],{"class":222,"line":389},[220,59593,2550],{"class":264},[220,59595,2553],{"class":420},[220,59597,386],{"class":264},[220,59599,59600,59602,59604],{"class":222,"line":399},[220,59601,2567],{"class":264},[220,59603,59417],{"class":420},[220,59605,359],{"class":264},[220,59607,59608,59610,59612],{"class":222,"line":644},[220,59609,402],{"class":264},[220,59611,347],{"class":420},[220,59613,359],{"class":264},[212,59615,59617],{"className":251,"code":59616,"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,59618,59619,59629,59633,59647,59651,59660,59668,59672,59676],{"__ignoreMap":178},[220,59620,59621,59623,59625,59627],{"class":222,"line":223},[220,59622,261],{"class":260},[220,59624,11507],{"class":264},[220,59626,268],{"class":260},[220,59628,4007],{"class":230},[220,59630,59631],{"class":222,"line":179},[220,59632,647],{"emptyLinePlaceholder":194},[220,59634,59635,59637,59639,59641,59643,59645],{"class":222,"line":389},[220,59636,1735],{"class":260},[220,59638,1738],{"class":420},[220,59640,1741],{"class":260},[220,59642,1744],{"class":260},[220,59644,1747],{"class":226},[220,59646,1750],{"class":264},[220,59648,59649],{"class":222,"line":399},[220,59650,1765],{"class":264},[220,59652,59653,59655,59658],{"class":222,"line":644},[220,59654,1770],{"class":264},[220,59656,59657],{"class":230},"'Mirror'",[220,59659,7004],{"class":264},[220,59661,59662,59664,59666],{"class":222,"line":650},[220,59663,7009],{"class":264},[220,59665,3206],{"class":230},[220,59667,2465],{"class":264},[220,59669,59670],{"class":222,"line":656},[220,59671,7026],{"class":264},[220,59673,59674],{"class":222,"line":673},[220,59675,1787],{"class":264},[220,59677,59678],{"class":222,"line":682},[220,59679,1792],{"class":264},[1504,59681,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":59683},[59684,59685],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fmirror",{"title":59417,"description":59425},"docs\u002Fcomponents\u002FMirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":59692,"title":59693,"body":59694,"category":33058,"componentType":25872,"description":59701,"extension":191,"meta":59886,"navigation":194,"path":59887,"requiresChild":32525,"seo":59888,"stem":59889,"__hash__":59890},"components\u002Fdocs\u002Fcomponents\u002FMultiPointGradient.md","MultiPointGradient",{"type":8,"value":59695,"toc":59882},[59696,59699,59702,59704,59706,59709,59711,59880],[11,59697,59693],{"id":59698},"multipointgradient",[15,59700,59701],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[31906,59703],{"component":59693},[23,59705,31910],{"id":26528},[31912,59707],{":props":59708},"[{\"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,59710,31918],{"id":31917},[246,59712,59713,59742,59770,59798,59826],{":tabs":1557},[212,59714,59716],{"className":334,"code":59715,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CMultiPointGradient \u002F>\n\u003C\u002FShader>\n",[99,59717,59718,59726,59734],{"__ignoreMap":178},[220,59719,59720,59722,59724],{"class":222,"line":223},[220,59721,343],{"class":264},[220,59723,347],{"class":346},[220,59725,359],{"class":264},[220,59727,59728,59730,59732],{"class":222,"line":179},[220,59729,364],{"class":264},[220,59731,59693],{"class":346},[220,59733,386],{"class":264},[220,59735,59736,59738,59740],{"class":222,"line":389},[220,59737,402],{"class":264},[220,59739,347],{"class":346},[220,59741,359],{"class":264},[212,59743,59744],{"className":409,"code":59715,"language":411,"meta":178,"style":178},[99,59745,59746,59754,59762],{"__ignoreMap":178},[220,59747,59748,59750,59752],{"class":222,"line":223},[220,59749,343],{"class":264},[220,59751,347],{"class":420},[220,59753,359],{"class":264},[220,59755,59756,59758,59760],{"class":222,"line":179},[220,59757,364],{"class":264},[220,59759,59693],{"class":420},[220,59761,386],{"class":264},[220,59763,59764,59766,59768],{"class":222,"line":389},[220,59765,402],{"class":264},[220,59767,347],{"class":420},[220,59769,359],{"class":264},[212,59771,59772],{"className":2844,"code":59715,"language":2846,"meta":178,"style":178},[99,59773,59774,59782,59790],{"__ignoreMap":178},[220,59775,59776,59778,59780],{"class":222,"line":223},[220,59777,343],{"class":264},[220,59779,347],{"class":420},[220,59781,359],{"class":264},[220,59783,59784,59786,59788],{"class":222,"line":179},[220,59785,364],{"class":264},[220,59787,59693],{"class":420},[220,59789,386],{"class":264},[220,59791,59792,59794,59796],{"class":222,"line":389},[220,59793,402],{"class":264},[220,59795,347],{"class":420},[220,59797,359],{"class":264},[212,59799,59800],{"className":468,"code":59715,"language":469,"meta":178,"style":178},[99,59801,59802,59810,59818],{"__ignoreMap":178},[220,59803,59804,59806,59808],{"class":222,"line":223},[220,59805,343],{"class":264},[220,59807,347],{"class":420},[220,59809,359],{"class":264},[220,59811,59812,59814,59816],{"class":222,"line":179},[220,59813,364],{"class":264},[220,59815,59693],{"class":420},[220,59817,386],{"class":264},[220,59819,59820,59822,59824],{"class":222,"line":389},[220,59821,402],{"class":264},[220,59823,347],{"class":420},[220,59825,359],{"class":264},[212,59827,59829],{"className":251,"code":59828,"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,59830,59831,59841,59845,59859,59863,59872,59876],{"__ignoreMap":178},[220,59832,59833,59835,59837,59839],{"class":222,"line":223},[220,59834,261],{"class":260},[220,59836,11507],{"class":264},[220,59838,268],{"class":260},[220,59840,4007],{"class":230},[220,59842,59843],{"class":222,"line":179},[220,59844,647],{"emptyLinePlaceholder":194},[220,59846,59847,59849,59851,59853,59855,59857],{"class":222,"line":389},[220,59848,1735],{"class":260},[220,59850,1738],{"class":420},[220,59852,1741],{"class":260},[220,59854,1744],{"class":260},[220,59856,1747],{"class":226},[220,59858,1750],{"class":264},[220,59860,59861],{"class":222,"line":399},[220,59862,1765],{"class":264},[220,59864,59865,59867,59870],{"class":222,"line":644},[220,59866,1770],{"class":264},[220,59868,59869],{"class":230},"'MultiPointGradient'",[220,59871,2465],{"class":264},[220,59873,59874],{"class":222,"line":650},[220,59875,1787],{"class":264},[220,59877,59878],{"class":222,"line":656},[220,59879,1792],{"class":264},[1504,59881,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":59883},[59884,59885],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fmultipointgradient",{"title":59693,"description":59701},"docs\u002Fcomponents\u002FMultiPointGradient","y5QlgFrm19qHm6dId7JedpqbmSRD7gmHN8sHs7H3aNo",{"id":59892,"title":20975,"body":59893,"category":36564,"componentType":25872,"description":59900,"extension":191,"meta":60180,"navigation":194,"path":60181,"requiresChild":32525,"seo":60182,"stem":60183,"__hash__":60184},"components\u002Fdocs\u002Fcomponents\u002FNeon.md",{"type":8,"value":59894,"toc":60176},[59895,59898,59901,59903,59905,59908,59910,60174],[11,59896,20975],{"id":59897},"neon",[15,59899,59900],{},"Photorealistic neon tube \u002F 3D pipe effect driven by a custom shape",[31906,59902],{"component":20975},[23,59904,31910],{"id":26528},[31912,59906],{":props":59907},"[{\"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,59909,31918],{"id":31917},[246,59911,59912,59962,60014,60062,60112],{":tabs":1557},[212,59913,59915],{"className":334,"code":59914,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,59916,59917,59925,59932,59941,59950,59954],{"__ignoreMap":178},[220,59918,59919,59921,59923],{"class":222,"line":223},[220,59920,343],{"class":264},[220,59922,347],{"class":346},[220,59924,359],{"class":264},[220,59926,59927,59929],{"class":222,"line":179},[220,59928,364],{"class":264},[220,59930,59931],{"class":346},"Neon\n",[220,59933,59934,59936,59938],{"class":222,"line":389},[220,59935,9630],{"class":226},[220,59937,353],{"class":264},[220,59939,59940],{"class":230},"\"#00ddff\"\n",[220,59942,59943,59945,59947],{"class":222,"line":399},[220,59944,20366],{"class":226},[220,59946,353],{"class":264},[220,59948,59949],{"class":230},"\"1.5\"\n",[220,59951,59952],{"class":222,"line":644},[220,59953,1234],{"class":264},[220,59955,59956,59958,59960],{"class":222,"line":650},[220,59957,402],{"class":264},[220,59959,347],{"class":346},[220,59961,359],{"class":264},[212,59963,59965],{"className":409,"code":59964,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,59966,59967,59975,59981,59989,60002,60006],{"__ignoreMap":178},[220,59968,59969,59971,59973],{"class":222,"line":223},[220,59970,343],{"class":264},[220,59972,347],{"class":420},[220,59974,359],{"class":264},[220,59976,59977,59979],{"class":222,"line":179},[220,59978,364],{"class":264},[220,59980,59931],{"class":420},[220,59982,59983,59985,59987],{"class":222,"line":389},[220,59984,9630],{"class":226},[220,59986,353],{"class":260},[220,59988,59940],{"class":230},[220,59990,59991,59993,59995,59997,60000],{"class":222,"line":399},[220,59992,20477],{"class":226},[220,59994,353],{"class":260},[220,59996,743],{"class":264},[220,59998,59999],{"class":420},"1.5",[220,60001,749],{"class":264},[220,60003,60004],{"class":222,"line":644},[220,60005,1234],{"class":264},[220,60007,60008,60010,60012],{"class":222,"line":650},[220,60009,402],{"class":264},[220,60011,347],{"class":420},[220,60013,359],{"class":264},[212,60015,60016],{"className":2844,"code":59964,"language":2846,"meta":178,"style":178},[99,60017,60018,60026,60032,60040,60050,60054],{"__ignoreMap":178},[220,60019,60020,60022,60024],{"class":222,"line":223},[220,60021,343],{"class":264},[220,60023,347],{"class":420},[220,60025,359],{"class":264},[220,60027,60028,60030],{"class":222,"line":179},[220,60029,364],{"class":264},[220,60031,59931],{"class":420},[220,60033,60034,60036,60038],{"class":222,"line":389},[220,60035,9630],{"class":226},[220,60037,353],{"class":264},[220,60039,59940],{"class":230},[220,60041,60042,60044,60046,60048],{"class":222,"line":399},[220,60043,20477],{"class":226},[220,60045,29866],{"class":264},[220,60047,59999],{"class":420},[220,60049,749],{"class":264},[220,60051,60052],{"class":222,"line":644},[220,60053,1234],{"class":264},[220,60055,60056,60058,60060],{"class":222,"line":650},[220,60057,402],{"class":264},[220,60059,347],{"class":420},[220,60061,359],{"class":264},[212,60063,60064],{"className":468,"code":59964,"language":469,"meta":178,"style":178},[99,60065,60066,60074,60080,60088,60100,60104],{"__ignoreMap":178},[220,60067,60068,60070,60072],{"class":222,"line":223},[220,60069,343],{"class":264},[220,60071,347],{"class":420},[220,60073,359],{"class":264},[220,60075,60076,60078],{"class":222,"line":179},[220,60077,364],{"class":264},[220,60079,59931],{"class":420},[220,60081,60082,60084,60086],{"class":222,"line":389},[220,60083,9630],{"class":226},[220,60085,353],{"class":260},[220,60087,59940],{"class":230},[220,60089,60090,60092,60094,60096,60098],{"class":222,"line":399},[220,60091,20477],{"class":226},[220,60093,353],{"class":260},[220,60095,743],{"class":264},[220,60097,59999],{"class":420},[220,60099,749],{"class":264},[220,60101,60102],{"class":222,"line":644},[220,60103,1234],{"class":264},[220,60105,60106,60108,60110],{"class":222,"line":650},[220,60107,402],{"class":264},[220,60109,347],{"class":420},[220,60111,359],{"class":264},[212,60113,60115],{"className":251,"code":60114,"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,60116,60117,60127,60131,60145,60149,60166,60170],{"__ignoreMap":178},[220,60118,60119,60121,60123,60125],{"class":222,"line":223},[220,60120,261],{"class":260},[220,60122,11507],{"class":264},[220,60124,268],{"class":260},[220,60126,4007],{"class":230},[220,60128,60129],{"class":222,"line":179},[220,60130,647],{"emptyLinePlaceholder":194},[220,60132,60133,60135,60137,60139,60141,60143],{"class":222,"line":389},[220,60134,1735],{"class":260},[220,60136,1738],{"class":420},[220,60138,1741],{"class":260},[220,60140,1744],{"class":260},[220,60142,1747],{"class":226},[220,60144,1750],{"class":264},[220,60146,60147],{"class":222,"line":399},[220,60148,1765],{"class":264},[220,60150,60151,60153,60155,60157,60160,60162,60164],{"class":222,"line":644},[220,60152,1770],{"class":264},[220,60154,21582],{"class":230},[220,60156,1776],{"class":264},[220,60158,60159],{"class":230},"'#00ddff'",[220,60161,44998],{"class":264},[220,60163,59999],{"class":420},[220,60165,1782],{"class":264},[220,60167,60168],{"class":222,"line":650},[220,60169,1787],{"class":264},[220,60171,60172],{"class":222,"line":656},[220,60173,1792],{"class":264},[1504,60175,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":60177},[60178,60179],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fneon",{"title":20975,"description":59900},"docs\u002Fcomponents\u002FNeon","BWABXNYSAJUC6yhq2q7lTQwSFWy6ocIGuv-2Ww-pN-0",{"id":60186,"title":60187,"body":60188,"category":33668,"componentType":25878,"description":60195,"extension":191,"meta":60456,"navigation":194,"path":60457,"requiresChild":194,"seo":60458,"stem":60459,"__hash__":60460},"components\u002Fdocs\u002Fcomponents\u002FNoiseDissolve.md","NoiseDissolve",{"type":8,"value":60189,"toc":60452},[60190,60193,60196,60198,60200,60203,60205,60450],[11,60191,60187],{"id":60192},"noisedissolve",[15,60194,60195],{},"Dissolve the content away through an organic noise pattern",[31906,60197],{"component":60187},[23,60199,31910],{"id":26528},[31912,60201],{":props":60202},"[{\"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,60204,31918],{"id":31917},[246,60206,60207,60252,60296,60340,60384],{":tabs":1557},[212,60208,60210],{"className":334,"code":60209,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CNoiseDissolve>\n \u003CCircle \u002F>\n \u003C\u002FNoiseDissolve>\n\u003C\u002FShader>\n",[99,60211,60212,60220,60228,60236,60244],{"__ignoreMap":178},[220,60213,60214,60216,60218],{"class":222,"line":223},[220,60215,343],{"class":264},[220,60217,347],{"class":346},[220,60219,359],{"class":264},[220,60221,60222,60224,60226],{"class":222,"line":179},[220,60223,364],{"class":264},[220,60225,60187],{"class":346},[220,60227,359],{"class":264},[220,60229,60230,60232,60234],{"class":222,"line":389},[220,60231,2550],{"class":264},[220,60233,2553],{"class":346},[220,60235,386],{"class":264},[220,60237,60238,60240,60242],{"class":222,"line":399},[220,60239,2567],{"class":264},[220,60241,60187],{"class":346},[220,60243,359],{"class":264},[220,60245,60246,60248,60250],{"class":222,"line":644},[220,60247,402],{"class":264},[220,60249,347],{"class":346},[220,60251,359],{"class":264},[212,60253,60254],{"className":409,"code":60209,"language":411,"meta":178,"style":178},[99,60255,60256,60264,60272,60280,60288],{"__ignoreMap":178},[220,60257,60258,60260,60262],{"class":222,"line":223},[220,60259,343],{"class":264},[220,60261,347],{"class":420},[220,60263,359],{"class":264},[220,60265,60266,60268,60270],{"class":222,"line":179},[220,60267,364],{"class":264},[220,60269,60187],{"class":420},[220,60271,359],{"class":264},[220,60273,60274,60276,60278],{"class":222,"line":389},[220,60275,2550],{"class":264},[220,60277,2553],{"class":420},[220,60279,386],{"class":264},[220,60281,60282,60284,60286],{"class":222,"line":399},[220,60283,2567],{"class":264},[220,60285,60187],{"class":420},[220,60287,359],{"class":264},[220,60289,60290,60292,60294],{"class":222,"line":644},[220,60291,402],{"class":264},[220,60293,347],{"class":420},[220,60295,359],{"class":264},[212,60297,60298],{"className":2844,"code":60209,"language":2846,"meta":178,"style":178},[99,60299,60300,60308,60316,60324,60332],{"__ignoreMap":178},[220,60301,60302,60304,60306],{"class":222,"line":223},[220,60303,343],{"class":264},[220,60305,347],{"class":420},[220,60307,359],{"class":264},[220,60309,60310,60312,60314],{"class":222,"line":179},[220,60311,364],{"class":264},[220,60313,60187],{"class":420},[220,60315,359],{"class":264},[220,60317,60318,60320,60322],{"class":222,"line":389},[220,60319,2550],{"class":264},[220,60321,2553],{"class":420},[220,60323,386],{"class":264},[220,60325,60326,60328,60330],{"class":222,"line":399},[220,60327,2567],{"class":264},[220,60329,60187],{"class":420},[220,60331,359],{"class":264},[220,60333,60334,60336,60338],{"class":222,"line":644},[220,60335,402],{"class":264},[220,60337,347],{"class":420},[220,60339,359],{"class":264},[212,60341,60342],{"className":468,"code":60209,"language":469,"meta":178,"style":178},[99,60343,60344,60352,60360,60368,60376],{"__ignoreMap":178},[220,60345,60346,60348,60350],{"class":222,"line":223},[220,60347,343],{"class":264},[220,60349,347],{"class":420},[220,60351,359],{"class":264},[220,60353,60354,60356,60358],{"class":222,"line":179},[220,60355,364],{"class":264},[220,60357,60187],{"class":420},[220,60359,359],{"class":264},[220,60361,60362,60364,60366],{"class":222,"line":389},[220,60363,2550],{"class":264},[220,60365,2553],{"class":420},[220,60367,386],{"class":264},[220,60369,60370,60372,60374],{"class":222,"line":399},[220,60371,2567],{"class":264},[220,60373,60187],{"class":420},[220,60375,359],{"class":264},[220,60377,60378,60380,60382],{"class":222,"line":644},[220,60379,402],{"class":264},[220,60381,347],{"class":420},[220,60383,359],{"class":264},[212,60385,60387],{"className":251,"code":60386,"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,60388,60389,60399,60403,60417,60421,60430,60438,60442,60446],{"__ignoreMap":178},[220,60390,60391,60393,60395,60397],{"class":222,"line":223},[220,60392,261],{"class":260},[220,60394,11507],{"class":264},[220,60396,268],{"class":260},[220,60398,4007],{"class":230},[220,60400,60401],{"class":222,"line":179},[220,60402,647],{"emptyLinePlaceholder":194},[220,60404,60405,60407,60409,60411,60413,60415],{"class":222,"line":389},[220,60406,1735],{"class":260},[220,60408,1738],{"class":420},[220,60410,1741],{"class":260},[220,60412,1744],{"class":260},[220,60414,1747],{"class":226},[220,60416,1750],{"class":264},[220,60418,60419],{"class":222,"line":399},[220,60420,1765],{"class":264},[220,60422,60423,60425,60428],{"class":222,"line":644},[220,60424,1770],{"class":264},[220,60426,60427],{"class":230},"'NoiseDissolve'",[220,60429,7004],{"class":264},[220,60431,60432,60434,60436],{"class":222,"line":650},[220,60433,7009],{"class":264},[220,60435,3206],{"class":230},[220,60437,2465],{"class":264},[220,60439,60440],{"class":222,"line":656},[220,60441,7026],{"class":264},[220,60443,60444],{"class":222,"line":673},[220,60445,1787],{"class":264},[220,60447,60448],{"class":222,"line":682},[220,60449,1792],{"class":264},[1504,60451,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":60453},[60454,60455],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fnoisedissolve",{"title":60187,"description":60195},"docs\u002Fcomponents\u002FNoiseDissolve","F_aVeqJAkNkkZ_aCCg745ZVvogpO7CXcGAt4J3G8JeQ",{"id":60462,"title":60463,"body":60464,"category":32801,"componentType":25878,"description":60471,"extension":191,"meta":60732,"navigation":194,"path":60733,"requiresChild":194,"seo":60734,"stem":60735,"__hash__":60736},"components\u002Fdocs\u002Fcomponents\u002FObjectTracker.md","ObjectTracker",{"type":8,"value":60465,"toc":60728},[60466,60469,60472,60474,60476,60479,60481,60726],[11,60467,60463],{"id":60468},"objecttracker",[15,60470,60471],{},"Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.",[31906,60473],{"component":60463},[23,60475,31910],{"id":26528},[31912,60477],{":props":60478},"[{\"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,60480,31918],{"id":31917},[246,60482,60483,60528,60572,60616,60660],{":tabs":1557},[212,60484,60486],{"className":334,"code":60485,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CObjectTracker>\n \u003CCircle \u002F>\n \u003C\u002FObjectTracker>\n\u003C\u002FShader>\n",[99,60487,60488,60496,60504,60512,60520],{"__ignoreMap":178},[220,60489,60490,60492,60494],{"class":222,"line":223},[220,60491,343],{"class":264},[220,60493,347],{"class":346},[220,60495,359],{"class":264},[220,60497,60498,60500,60502],{"class":222,"line":179},[220,60499,364],{"class":264},[220,60501,60463],{"class":346},[220,60503,359],{"class":264},[220,60505,60506,60508,60510],{"class":222,"line":389},[220,60507,2550],{"class":264},[220,60509,2553],{"class":346},[220,60511,386],{"class":264},[220,60513,60514,60516,60518],{"class":222,"line":399},[220,60515,2567],{"class":264},[220,60517,60463],{"class":346},[220,60519,359],{"class":264},[220,60521,60522,60524,60526],{"class":222,"line":644},[220,60523,402],{"class":264},[220,60525,347],{"class":346},[220,60527,359],{"class":264},[212,60529,60530],{"className":409,"code":60485,"language":411,"meta":178,"style":178},[99,60531,60532,60540,60548,60556,60564],{"__ignoreMap":178},[220,60533,60534,60536,60538],{"class":222,"line":223},[220,60535,343],{"class":264},[220,60537,347],{"class":420},[220,60539,359],{"class":264},[220,60541,60542,60544,60546],{"class":222,"line":179},[220,60543,364],{"class":264},[220,60545,60463],{"class":420},[220,60547,359],{"class":264},[220,60549,60550,60552,60554],{"class":222,"line":389},[220,60551,2550],{"class":264},[220,60553,2553],{"class":420},[220,60555,386],{"class":264},[220,60557,60558,60560,60562],{"class":222,"line":399},[220,60559,2567],{"class":264},[220,60561,60463],{"class":420},[220,60563,359],{"class":264},[220,60565,60566,60568,60570],{"class":222,"line":644},[220,60567,402],{"class":264},[220,60569,347],{"class":420},[220,60571,359],{"class":264},[212,60573,60574],{"className":2844,"code":60485,"language":2846,"meta":178,"style":178},[99,60575,60576,60584,60592,60600,60608],{"__ignoreMap":178},[220,60577,60578,60580,60582],{"class":222,"line":223},[220,60579,343],{"class":264},[220,60581,347],{"class":420},[220,60583,359],{"class":264},[220,60585,60586,60588,60590],{"class":222,"line":179},[220,60587,364],{"class":264},[220,60589,60463],{"class":420},[220,60591,359],{"class":264},[220,60593,60594,60596,60598],{"class":222,"line":389},[220,60595,2550],{"class":264},[220,60597,2553],{"class":420},[220,60599,386],{"class":264},[220,60601,60602,60604,60606],{"class":222,"line":399},[220,60603,2567],{"class":264},[220,60605,60463],{"class":420},[220,60607,359],{"class":264},[220,60609,60610,60612,60614],{"class":222,"line":644},[220,60611,402],{"class":264},[220,60613,347],{"class":420},[220,60615,359],{"class":264},[212,60617,60618],{"className":468,"code":60485,"language":469,"meta":178,"style":178},[99,60619,60620,60628,60636,60644,60652],{"__ignoreMap":178},[220,60621,60622,60624,60626],{"class":222,"line":223},[220,60623,343],{"class":264},[220,60625,347],{"class":420},[220,60627,359],{"class":264},[220,60629,60630,60632,60634],{"class":222,"line":179},[220,60631,364],{"class":264},[220,60633,60463],{"class":420},[220,60635,359],{"class":264},[220,60637,60638,60640,60642],{"class":222,"line":389},[220,60639,2550],{"class":264},[220,60641,2553],{"class":420},[220,60643,386],{"class":264},[220,60645,60646,60648,60650],{"class":222,"line":399},[220,60647,2567],{"class":264},[220,60649,60463],{"class":420},[220,60651,359],{"class":264},[220,60653,60654,60656,60658],{"class":222,"line":644},[220,60655,402],{"class":264},[220,60657,347],{"class":420},[220,60659,359],{"class":264},[212,60661,60663],{"className":251,"code":60662,"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,60664,60665,60675,60679,60693,60697,60706,60714,60718,60722],{"__ignoreMap":178},[220,60666,60667,60669,60671,60673],{"class":222,"line":223},[220,60668,261],{"class":260},[220,60670,11507],{"class":264},[220,60672,268],{"class":260},[220,60674,4007],{"class":230},[220,60676,60677],{"class":222,"line":179},[220,60678,647],{"emptyLinePlaceholder":194},[220,60680,60681,60683,60685,60687,60689,60691],{"class":222,"line":389},[220,60682,1735],{"class":260},[220,60684,1738],{"class":420},[220,60686,1741],{"class":260},[220,60688,1744],{"class":260},[220,60690,1747],{"class":226},[220,60692,1750],{"class":264},[220,60694,60695],{"class":222,"line":399},[220,60696,1765],{"class":264},[220,60698,60699,60701,60704],{"class":222,"line":644},[220,60700,1770],{"class":264},[220,60702,60703],{"class":230},"'ObjectTracker'",[220,60705,7004],{"class":264},[220,60707,60708,60710,60712],{"class":222,"line":650},[220,60709,7009],{"class":264},[220,60711,3206],{"class":230},[220,60713,2465],{"class":264},[220,60715,60716],{"class":222,"line":656},[220,60717,7026],{"class":264},[220,60719,60720],{"class":222,"line":673},[220,60721,1787],{"class":264},[220,60723,60724],{"class":222,"line":682},[220,60725,1792],{"class":264},[1504,60727,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":60729},[60730,60731],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fobjecttracker",{"title":60463,"description":60471},"docs\u002Fcomponents\u002FObjectTracker","GbC5gwgHI1ejAy2zbWySlMqCItTxfhJ5wK04HWTqgRw",{"id":60738,"title":60739,"body":60740,"category":33668,"componentType":25878,"description":60747,"extension":191,"meta":61065,"navigation":194,"path":61066,"requiresChild":194,"seo":61067,"stem":61068,"__hash__":61069},"components\u002Fdocs\u002Fcomponents\u002FPagePeel.md","PagePeel",{"type":8,"value":60741,"toc":61061},[60742,60745,60748,60750,60752,60755,60757,61059],[11,60743,60739],{"id":60744},"pagepeel",[15,60746,60747],{},"Curl the content up from a corner like a peeling page",[31906,60749],{"component":60739},[23,60751,31910],{"id":26528},[31912,60753],{":props":60754},"[{\"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,60756,31918],{"id":31917},[246,60758,60759,60816,60875,60931,60989],{":tabs":1557},[212,60760,60762],{"className":334,"code":60761,"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,60763,60764,60772,60779,60788,60792,60800,60808],{"__ignoreMap":178},[220,60765,60766,60768,60770],{"class":222,"line":223},[220,60767,343],{"class":264},[220,60769,347],{"class":346},[220,60771,359],{"class":264},[220,60773,60774,60776],{"class":222,"line":179},[220,60775,364],{"class":264},[220,60777,60778],{"class":346},"PagePeel\n",[220,60780,60781,60783,60785],{"class":222,"line":389},[220,60782,17400],{"class":226},[220,60784,353],{"class":264},[220,60786,60787],{"class":230},"\"0.2\"\n",[220,60789,60790],{"class":222,"line":399},[220,60791,31954],{"class":264},[220,60793,60794,60796,60798],{"class":222,"line":644},[220,60795,2550],{"class":264},[220,60797,2553],{"class":346},[220,60799,386],{"class":264},[220,60801,60802,60804,60806],{"class":222,"line":650},[220,60803,2567],{"class":264},[220,60805,60739],{"class":346},[220,60807,359],{"class":264},[220,60809,60810,60812,60814],{"class":222,"line":656},[220,60811,402],{"class":264},[220,60813,347],{"class":346},[220,60815,359],{"class":264},[212,60817,60819],{"className":409,"code":60818,"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,60820,60821,60829,60835,60847,60851,60859,60867],{"__ignoreMap":178},[220,60822,60823,60825,60827],{"class":222,"line":223},[220,60824,343],{"class":264},[220,60826,347],{"class":420},[220,60828,359],{"class":264},[220,60830,60831,60833],{"class":222,"line":179},[220,60832,364],{"class":264},[220,60834,60778],{"class":420},[220,60836,60837,60839,60841,60843,60845],{"class":222,"line":389},[220,60838,9640],{"class":226},[220,60840,353],{"class":260},[220,60842,743],{"class":264},[220,60844,16971],{"class":420},[220,60846,749],{"class":264},[220,60848,60849],{"class":222,"line":399},[220,60850,31954],{"class":264},[220,60852,60853,60855,60857],{"class":222,"line":644},[220,60854,2550],{"class":264},[220,60856,2553],{"class":420},[220,60858,386],{"class":264},[220,60860,60861,60863,60865],{"class":222,"line":650},[220,60862,2567],{"class":264},[220,60864,60739],{"class":420},[220,60866,359],{"class":264},[220,60868,60869,60871,60873],{"class":222,"line":656},[220,60870,402],{"class":264},[220,60872,347],{"class":420},[220,60874,359],{"class":264},[212,60876,60877],{"className":2844,"code":60818,"language":2846,"meta":178,"style":178},[99,60878,60879,60887,60893,60903,60907,60915,60923],{"__ignoreMap":178},[220,60880,60881,60883,60885],{"class":222,"line":223},[220,60882,343],{"class":264},[220,60884,347],{"class":420},[220,60886,359],{"class":264},[220,60888,60889,60891],{"class":222,"line":179},[220,60890,364],{"class":264},[220,60892,60778],{"class":420},[220,60894,60895,60897,60899,60901],{"class":222,"line":389},[220,60896,9640],{"class":226},[220,60898,29866],{"class":264},[220,60900,16971],{"class":420},[220,60902,749],{"class":264},[220,60904,60905],{"class":222,"line":399},[220,60906,31954],{"class":264},[220,60908,60909,60911,60913],{"class":222,"line":644},[220,60910,2550],{"class":264},[220,60912,2553],{"class":420},[220,60914,386],{"class":264},[220,60916,60917,60919,60921],{"class":222,"line":650},[220,60918,2567],{"class":264},[220,60920,60739],{"class":420},[220,60922,359],{"class":264},[220,60924,60925,60927,60929],{"class":222,"line":656},[220,60926,402],{"class":264},[220,60928,347],{"class":420},[220,60930,359],{"class":264},[212,60932,60933],{"className":468,"code":60818,"language":469,"meta":178,"style":178},[99,60934,60935,60943,60949,60961,60965,60973,60981],{"__ignoreMap":178},[220,60936,60937,60939,60941],{"class":222,"line":223},[220,60938,343],{"class":264},[220,60940,347],{"class":420},[220,60942,359],{"class":264},[220,60944,60945,60947],{"class":222,"line":179},[220,60946,364],{"class":264},[220,60948,60778],{"class":420},[220,60950,60951,60953,60955,60957,60959],{"class":222,"line":389},[220,60952,9640],{"class":226},[220,60954,353],{"class":260},[220,60956,743],{"class":264},[220,60958,16971],{"class":420},[220,60960,749],{"class":264},[220,60962,60963],{"class":222,"line":399},[220,60964,31954],{"class":264},[220,60966,60967,60969,60971],{"class":222,"line":644},[220,60968,2550],{"class":264},[220,60970,2553],{"class":420},[220,60972,386],{"class":264},[220,60974,60975,60977,60979],{"class":222,"line":650},[220,60976,2567],{"class":264},[220,60978,60739],{"class":420},[220,60980,359],{"class":264},[220,60982,60983,60985,60987],{"class":222,"line":656},[220,60984,402],{"class":264},[220,60986,347],{"class":420},[220,60988,359],{"class":264},[212,60990,60992],{"className":251,"code":60991,"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,60993,60994,61004,61008,61022,61026,61039,61047,61051,61055],{"__ignoreMap":178},[220,60995,60996,60998,61000,61002],{"class":222,"line":223},[220,60997,261],{"class":260},[220,60999,11507],{"class":264},[220,61001,268],{"class":260},[220,61003,4007],{"class":230},[220,61005,61006],{"class":222,"line":179},[220,61007,647],{"emptyLinePlaceholder":194},[220,61009,61010,61012,61014,61016,61018,61020],{"class":222,"line":389},[220,61011,1735],{"class":260},[220,61013,1738],{"class":420},[220,61015,1741],{"class":260},[220,61017,1744],{"class":260},[220,61019,1747],{"class":226},[220,61021,1750],{"class":264},[220,61023,61024],{"class":222,"line":399},[220,61025,1765],{"class":264},[220,61027,61028,61030,61033,61035,61037],{"class":222,"line":644},[220,61029,1770],{"class":264},[220,61031,61032],{"class":230},"'PagePeel'",[220,61034,7536],{"class":264},[220,61036,16971],{"class":420},[220,61038,7541],{"class":264},[220,61040,61041,61043,61045],{"class":222,"line":650},[220,61042,7009],{"class":264},[220,61044,3206],{"class":230},[220,61046,2465],{"class":264},[220,61048,61049],{"class":222,"line":656},[220,61050,7026],{"class":264},[220,61052,61053],{"class":222,"line":673},[220,61054,1787],{"class":264},[220,61056,61057],{"class":222,"line":682},[220,61058,1792],{"class":264},[1504,61060,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61062},[61063,61064],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpagepeel",{"title":60739,"description":60747},"docs\u002Fcomponents\u002FPagePeel","_NeopYd_-B_NGUYuoaMmpptj7IZDDKnYCjDx53B4nGQ",{"id":61071,"title":61072,"body":61073,"category":32801,"componentType":25878,"description":61080,"extension":191,"meta":61341,"navigation":194,"path":61342,"requiresChild":194,"seo":61343,"stem":61344,"__hash__":61345},"components\u002Fdocs\u002Fcomponents\u002FPaper.md","Paper",{"type":8,"value":61074,"toc":61337},[61075,61078,61081,61083,61085,61088,61090,61335],[11,61076,61072],{"id":61077},"paper",[15,61079,61080],{},"Applies realistic paper grain and surface roughness to child content",[31906,61082],{"component":61072},[23,61084,31910],{"id":26528},[31912,61086],{":props":61087},"[{\"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,61089,31918],{"id":31917},[246,61091,61092,61137,61181,61225,61269],{":tabs":1557},[212,61093,61095],{"className":334,"code":61094,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPaper>\n \u003CCircle \u002F>\n \u003C\u002FPaper>\n\u003C\u002FShader>\n",[99,61096,61097,61105,61113,61121,61129],{"__ignoreMap":178},[220,61098,61099,61101,61103],{"class":222,"line":223},[220,61100,343],{"class":264},[220,61102,347],{"class":346},[220,61104,359],{"class":264},[220,61106,61107,61109,61111],{"class":222,"line":179},[220,61108,364],{"class":264},[220,61110,61072],{"class":346},[220,61112,359],{"class":264},[220,61114,61115,61117,61119],{"class":222,"line":389},[220,61116,2550],{"class":264},[220,61118,2553],{"class":346},[220,61120,386],{"class":264},[220,61122,61123,61125,61127],{"class":222,"line":399},[220,61124,2567],{"class":264},[220,61126,61072],{"class":346},[220,61128,359],{"class":264},[220,61130,61131,61133,61135],{"class":222,"line":644},[220,61132,402],{"class":264},[220,61134,347],{"class":346},[220,61136,359],{"class":264},[212,61138,61139],{"className":409,"code":61094,"language":411,"meta":178,"style":178},[99,61140,61141,61149,61157,61165,61173],{"__ignoreMap":178},[220,61142,61143,61145,61147],{"class":222,"line":223},[220,61144,343],{"class":264},[220,61146,347],{"class":420},[220,61148,359],{"class":264},[220,61150,61151,61153,61155],{"class":222,"line":179},[220,61152,364],{"class":264},[220,61154,61072],{"class":420},[220,61156,359],{"class":264},[220,61158,61159,61161,61163],{"class":222,"line":389},[220,61160,2550],{"class":264},[220,61162,2553],{"class":420},[220,61164,386],{"class":264},[220,61166,61167,61169,61171],{"class":222,"line":399},[220,61168,2567],{"class":264},[220,61170,61072],{"class":420},[220,61172,359],{"class":264},[220,61174,61175,61177,61179],{"class":222,"line":644},[220,61176,402],{"class":264},[220,61178,347],{"class":420},[220,61180,359],{"class":264},[212,61182,61183],{"className":2844,"code":61094,"language":2846,"meta":178,"style":178},[99,61184,61185,61193,61201,61209,61217],{"__ignoreMap":178},[220,61186,61187,61189,61191],{"class":222,"line":223},[220,61188,343],{"class":264},[220,61190,347],{"class":420},[220,61192,359],{"class":264},[220,61194,61195,61197,61199],{"class":222,"line":179},[220,61196,364],{"class":264},[220,61198,61072],{"class":420},[220,61200,359],{"class":264},[220,61202,61203,61205,61207],{"class":222,"line":389},[220,61204,2550],{"class":264},[220,61206,2553],{"class":420},[220,61208,386],{"class":264},[220,61210,61211,61213,61215],{"class":222,"line":399},[220,61212,2567],{"class":264},[220,61214,61072],{"class":420},[220,61216,359],{"class":264},[220,61218,61219,61221,61223],{"class":222,"line":644},[220,61220,402],{"class":264},[220,61222,347],{"class":420},[220,61224,359],{"class":264},[212,61226,61227],{"className":468,"code":61094,"language":469,"meta":178,"style":178},[99,61228,61229,61237,61245,61253,61261],{"__ignoreMap":178},[220,61230,61231,61233,61235],{"class":222,"line":223},[220,61232,343],{"class":264},[220,61234,347],{"class":420},[220,61236,359],{"class":264},[220,61238,61239,61241,61243],{"class":222,"line":179},[220,61240,364],{"class":264},[220,61242,61072],{"class":420},[220,61244,359],{"class":264},[220,61246,61247,61249,61251],{"class":222,"line":389},[220,61248,2550],{"class":264},[220,61250,2553],{"class":420},[220,61252,386],{"class":264},[220,61254,61255,61257,61259],{"class":222,"line":399},[220,61256,2567],{"class":264},[220,61258,61072],{"class":420},[220,61260,359],{"class":264},[220,61262,61263,61265,61267],{"class":222,"line":644},[220,61264,402],{"class":264},[220,61266,347],{"class":420},[220,61268,359],{"class":264},[212,61270,61272],{"className":251,"code":61271,"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,61273,61274,61284,61288,61302,61306,61315,61323,61327,61331],{"__ignoreMap":178},[220,61275,61276,61278,61280,61282],{"class":222,"line":223},[220,61277,261],{"class":260},[220,61279,11507],{"class":264},[220,61281,268],{"class":260},[220,61283,4007],{"class":230},[220,61285,61286],{"class":222,"line":179},[220,61287,647],{"emptyLinePlaceholder":194},[220,61289,61290,61292,61294,61296,61298,61300],{"class":222,"line":389},[220,61291,1735],{"class":260},[220,61293,1738],{"class":420},[220,61295,1741],{"class":260},[220,61297,1744],{"class":260},[220,61299,1747],{"class":226},[220,61301,1750],{"class":264},[220,61303,61304],{"class":222,"line":399},[220,61305,1765],{"class":264},[220,61307,61308,61310,61313],{"class":222,"line":644},[220,61309,1770],{"class":264},[220,61311,61312],{"class":230},"'Paper'",[220,61314,7004],{"class":264},[220,61316,61317,61319,61321],{"class":222,"line":650},[220,61318,7009],{"class":264},[220,61320,3206],{"class":230},[220,61322,2465],{"class":264},[220,61324,61325],{"class":222,"line":656},[220,61326,7026],{"class":264},[220,61328,61329],{"class":222,"line":673},[220,61330,1787],{"class":264},[220,61332,61333],{"class":222,"line":682},[220,61334,1792],{"class":264},[1504,61336,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":61338},[61339,61340],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpaper",{"title":61072,"description":61080},"docs\u002Fcomponents\u002FPaper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":61347,"title":61348,"body":61349,"category":15903,"componentType":25872,"description":61356,"extension":191,"meta":61586,"navigation":194,"path":61587,"requiresChild":32525,"seo":61588,"stem":61589,"__hash__":61590},"components\u002Fdocs\u002Fcomponents\u002FParallelogram.md","Parallelogram",{"type":8,"value":61350,"toc":61582},[61351,61354,61357,61359,61361,61364,61366,61580],[11,61352,61348],{"id":61353},"parallelogram",[15,61355,61356],{},"Parallelogram with adjustable width, height and skew",[31906,61358],{"component":61348},[23,61360,31910],{"id":26528},[31912,61362],{":props":61363},"[{\"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,61365,31918],{"id":31917},[246,61367,61368,61408,61446,61484,61522],{":tabs":1557},[212,61369,61371],{"className":334,"code":61370,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParallelogram\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,61372,61373,61381,61388,61396,61400],{"__ignoreMap":178},[220,61374,61375,61377,61379],{"class":222,"line":223},[220,61376,343],{"class":264},[220,61378,347],{"class":346},[220,61380,359],{"class":264},[220,61382,61383,61385],{"class":222,"line":179},[220,61384,364],{"class":264},[220,61386,61387],{"class":346},"Parallelogram\n",[220,61389,61390,61392,61394],{"class":222,"line":389},[220,61391,9630],{"class":226},[220,61393,353],{"class":264},[220,61395,9586],{"class":230},[220,61397,61398],{"class":222,"line":399},[220,61399,1234],{"class":264},[220,61401,61402,61404,61406],{"class":222,"line":644},[220,61403,402],{"class":264},[220,61405,347],{"class":346},[220,61407,359],{"class":264},[212,61409,61410],{"className":409,"code":61370,"language":411,"meta":178,"style":178},[99,61411,61412,61420,61426,61434,61438],{"__ignoreMap":178},[220,61413,61414,61416,61418],{"class":222,"line":223},[220,61415,343],{"class":264},[220,61417,347],{"class":420},[220,61419,359],{"class":264},[220,61421,61422,61424],{"class":222,"line":179},[220,61423,364],{"class":264},[220,61425,61387],{"class":420},[220,61427,61428,61430,61432],{"class":222,"line":389},[220,61429,9630],{"class":226},[220,61431,353],{"class":260},[220,61433,9586],{"class":230},[220,61435,61436],{"class":222,"line":399},[220,61437,1234],{"class":264},[220,61439,61440,61442,61444],{"class":222,"line":644},[220,61441,402],{"class":264},[220,61443,347],{"class":420},[220,61445,359],{"class":264},[212,61447,61448],{"className":2844,"code":61370,"language":2846,"meta":178,"style":178},[99,61449,61450,61458,61464,61472,61476],{"__ignoreMap":178},[220,61451,61452,61454,61456],{"class":222,"line":223},[220,61453,343],{"class":264},[220,61455,347],{"class":420},[220,61457,359],{"class":264},[220,61459,61460,61462],{"class":222,"line":179},[220,61461,364],{"class":264},[220,61463,61387],{"class":420},[220,61465,61466,61468,61470],{"class":222,"line":389},[220,61467,9630],{"class":226},[220,61469,353],{"class":264},[220,61471,9586],{"class":230},[220,61473,61474],{"class":222,"line":399},[220,61475,1234],{"class":264},[220,61477,61478,61480,61482],{"class":222,"line":644},[220,61479,402],{"class":264},[220,61481,347],{"class":420},[220,61483,359],{"class":264},[212,61485,61486],{"className":468,"code":61370,"language":469,"meta":178,"style":178},[99,61487,61488,61496,61502,61510,61514],{"__ignoreMap":178},[220,61489,61490,61492,61494],{"class":222,"line":223},[220,61491,343],{"class":264},[220,61493,347],{"class":420},[220,61495,359],{"class":264},[220,61497,61498,61500],{"class":222,"line":179},[220,61499,364],{"class":264},[220,61501,61387],{"class":420},[220,61503,61504,61506,61508],{"class":222,"line":389},[220,61505,9630],{"class":226},[220,61507,353],{"class":260},[220,61509,9586],{"class":230},[220,61511,61512],{"class":222,"line":399},[220,61513,1234],{"class":264},[220,61515,61516,61518,61520],{"class":222,"line":644},[220,61517,402],{"class":264},[220,61519,347],{"class":420},[220,61521,359],{"class":264},[212,61523,61525],{"className":251,"code":61524,"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,61526,61527,61537,61541,61555,61559,61572,61576],{"__ignoreMap":178},[220,61528,61529,61531,61533,61535],{"class":222,"line":223},[220,61530,261],{"class":260},[220,61532,11507],{"class":264},[220,61534,268],{"class":260},[220,61536,4007],{"class":230},[220,61538,61539],{"class":222,"line":179},[220,61540,647],{"emptyLinePlaceholder":194},[220,61542,61543,61545,61547,61549,61551,61553],{"class":222,"line":389},[220,61544,1735],{"class":260},[220,61546,1738],{"class":420},[220,61548,1741],{"class":260},[220,61550,1744],{"class":260},[220,61552,1747],{"class":226},[220,61554,1750],{"class":264},[220,61556,61557],{"class":222,"line":399},[220,61558,1765],{"class":264},[220,61560,61561,61563,61566,61568,61570],{"class":222,"line":644},[220,61562,1770],{"class":264},[220,61564,61565],{"class":230},"'Parallelogram'",[220,61567,1776],{"class":264},[220,61569,10164],{"class":230},[220,61571,1782],{"class":264},[220,61573,61574],{"class":222,"line":650},[220,61575,1787],{"class":264},[220,61577,61578],{"class":222,"line":656},[220,61579,1792],{"class":264},[1504,61581,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":61583},[61584,61585],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fparallelogram",{"title":61348,"description":61356},"docs\u002Fcomponents\u002FParallelogram","fl9mqgny0bH5hyCoFcca-yUl2MX3TUPXOvl5sD8Syt0",{"id":61592,"title":61593,"body":61594,"category":32801,"componentType":25878,"description":61601,"extension":191,"meta":61862,"navigation":194,"path":61863,"requiresChild":194,"seo":61864,"stem":61865,"__hash__":61866},"components\u002Fdocs\u002Fcomponents\u002FParticleField.md","ParticleField",{"type":8,"value":61595,"toc":61858},[61596,61599,61602,61604,61606,61609,61611,61856],[11,61597,61593],{"id":61598},"particlefield",[15,61600,61601],{},"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",[31906,61603],{"component":61593},[23,61605,31910],{"id":26528},[31912,61607],{":props":61608},"[{\"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,61610,31918],{"id":31917},[246,61612,61613,61658,61702,61746,61790],{":tabs":1557},[212,61614,61616],{"className":334,"code":61615,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleField>\n \u003CCircle \u002F>\n \u003C\u002FParticleField>\n\u003C\u002FShader>\n",[99,61617,61618,61626,61634,61642,61650],{"__ignoreMap":178},[220,61619,61620,61622,61624],{"class":222,"line":223},[220,61621,343],{"class":264},[220,61623,347],{"class":346},[220,61625,359],{"class":264},[220,61627,61628,61630,61632],{"class":222,"line":179},[220,61629,364],{"class":264},[220,61631,61593],{"class":346},[220,61633,359],{"class":264},[220,61635,61636,61638,61640],{"class":222,"line":389},[220,61637,2550],{"class":264},[220,61639,2553],{"class":346},[220,61641,386],{"class":264},[220,61643,61644,61646,61648],{"class":222,"line":399},[220,61645,2567],{"class":264},[220,61647,61593],{"class":346},[220,61649,359],{"class":264},[220,61651,61652,61654,61656],{"class":222,"line":644},[220,61653,402],{"class":264},[220,61655,347],{"class":346},[220,61657,359],{"class":264},[212,61659,61660],{"className":409,"code":61615,"language":411,"meta":178,"style":178},[99,61661,61662,61670,61678,61686,61694],{"__ignoreMap":178},[220,61663,61664,61666,61668],{"class":222,"line":223},[220,61665,343],{"class":264},[220,61667,347],{"class":420},[220,61669,359],{"class":264},[220,61671,61672,61674,61676],{"class":222,"line":179},[220,61673,364],{"class":264},[220,61675,61593],{"class":420},[220,61677,359],{"class":264},[220,61679,61680,61682,61684],{"class":222,"line":389},[220,61681,2550],{"class":264},[220,61683,2553],{"class":420},[220,61685,386],{"class":264},[220,61687,61688,61690,61692],{"class":222,"line":399},[220,61689,2567],{"class":264},[220,61691,61593],{"class":420},[220,61693,359],{"class":264},[220,61695,61696,61698,61700],{"class":222,"line":644},[220,61697,402],{"class":264},[220,61699,347],{"class":420},[220,61701,359],{"class":264},[212,61703,61704],{"className":2844,"code":61615,"language":2846,"meta":178,"style":178},[99,61705,61706,61714,61722,61730,61738],{"__ignoreMap":178},[220,61707,61708,61710,61712],{"class":222,"line":223},[220,61709,343],{"class":264},[220,61711,347],{"class":420},[220,61713,359],{"class":264},[220,61715,61716,61718,61720],{"class":222,"line":179},[220,61717,364],{"class":264},[220,61719,61593],{"class":420},[220,61721,359],{"class":264},[220,61723,61724,61726,61728],{"class":222,"line":389},[220,61725,2550],{"class":264},[220,61727,2553],{"class":420},[220,61729,386],{"class":264},[220,61731,61732,61734,61736],{"class":222,"line":399},[220,61733,2567],{"class":264},[220,61735,61593],{"class":420},[220,61737,359],{"class":264},[220,61739,61740,61742,61744],{"class":222,"line":644},[220,61741,402],{"class":264},[220,61743,347],{"class":420},[220,61745,359],{"class":264},[212,61747,61748],{"className":468,"code":61615,"language":469,"meta":178,"style":178},[99,61749,61750,61758,61766,61774,61782],{"__ignoreMap":178},[220,61751,61752,61754,61756],{"class":222,"line":223},[220,61753,343],{"class":264},[220,61755,347],{"class":420},[220,61757,359],{"class":264},[220,61759,61760,61762,61764],{"class":222,"line":179},[220,61761,364],{"class":264},[220,61763,61593],{"class":420},[220,61765,359],{"class":264},[220,61767,61768,61770,61772],{"class":222,"line":389},[220,61769,2550],{"class":264},[220,61771,2553],{"class":420},[220,61773,386],{"class":264},[220,61775,61776,61778,61780],{"class":222,"line":399},[220,61777,2567],{"class":264},[220,61779,61593],{"class":420},[220,61781,359],{"class":264},[220,61783,61784,61786,61788],{"class":222,"line":644},[220,61785,402],{"class":264},[220,61787,347],{"class":420},[220,61789,359],{"class":264},[212,61791,61793],{"className":251,"code":61792,"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,61794,61795,61805,61809,61823,61827,61836,61844,61848,61852],{"__ignoreMap":178},[220,61796,61797,61799,61801,61803],{"class":222,"line":223},[220,61798,261],{"class":260},[220,61800,11507],{"class":264},[220,61802,268],{"class":260},[220,61804,4007],{"class":230},[220,61806,61807],{"class":222,"line":179},[220,61808,647],{"emptyLinePlaceholder":194},[220,61810,61811,61813,61815,61817,61819,61821],{"class":222,"line":389},[220,61812,1735],{"class":260},[220,61814,1738],{"class":420},[220,61816,1741],{"class":260},[220,61818,1744],{"class":260},[220,61820,1747],{"class":226},[220,61822,1750],{"class":264},[220,61824,61825],{"class":222,"line":399},[220,61826,1765],{"class":264},[220,61828,61829,61831,61834],{"class":222,"line":644},[220,61830,1770],{"class":264},[220,61832,61833],{"class":230},"'ParticleField'",[220,61835,7004],{"class":264},[220,61837,61838,61840,61842],{"class":222,"line":650},[220,61839,7009],{"class":264},[220,61841,3206],{"class":230},[220,61843,2465],{"class":264},[220,61845,61846],{"class":222,"line":656},[220,61847,7026],{"class":264},[220,61849,61850],{"class":222,"line":673},[220,61851,1787],{"class":264},[220,61853,61854],{"class":222,"line":682},[220,61855,1792],{"class":264},[1504,61857,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":61859},[61860,61861],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fparticlefield",{"title":61593,"description":61601},"docs\u002Fcomponents\u002FParticleField","72Kbo_zyMBePEBCQsUM1xkoCFISBvZiOP8pBV57COSc",{"id":61868,"title":61869,"body":61870,"category":35554,"componentType":25872,"description":61877,"extension":191,"meta":62062,"navigation":194,"path":62063,"requiresChild":32525,"seo":62064,"stem":62065,"__hash__":62066},"components\u002Fdocs\u002Fcomponents\u002FParticleFlow.md","ParticleFlow",{"type":8,"value":61871,"toc":62058},[61872,61875,61878,61880,61882,61885,61887,62056],[11,61873,61869],{"id":61874},"particleflow",[15,61876,61877],{},"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",[31906,61879],{"component":61869},[23,61881,31910],{"id":26528},[31912,61883],{":props":61884},"[{\"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,61886,31918],{"id":31917},[246,61888,61889,61918,61946,61974,62002],{":tabs":1557},[212,61890,61892],{"className":334,"code":61891,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticleFlow \u002F>\n\u003C\u002FShader>\n",[99,61893,61894,61902,61910],{"__ignoreMap":178},[220,61895,61896,61898,61900],{"class":222,"line":223},[220,61897,343],{"class":264},[220,61899,347],{"class":346},[220,61901,359],{"class":264},[220,61903,61904,61906,61908],{"class":222,"line":179},[220,61905,364],{"class":264},[220,61907,61869],{"class":346},[220,61909,386],{"class":264},[220,61911,61912,61914,61916],{"class":222,"line":389},[220,61913,402],{"class":264},[220,61915,347],{"class":346},[220,61917,359],{"class":264},[212,61919,61920],{"className":409,"code":61891,"language":411,"meta":178,"style":178},[99,61921,61922,61930,61938],{"__ignoreMap":178},[220,61923,61924,61926,61928],{"class":222,"line":223},[220,61925,343],{"class":264},[220,61927,347],{"class":420},[220,61929,359],{"class":264},[220,61931,61932,61934,61936],{"class":222,"line":179},[220,61933,364],{"class":264},[220,61935,61869],{"class":420},[220,61937,386],{"class":264},[220,61939,61940,61942,61944],{"class":222,"line":389},[220,61941,402],{"class":264},[220,61943,347],{"class":420},[220,61945,359],{"class":264},[212,61947,61948],{"className":2844,"code":61891,"language":2846,"meta":178,"style":178},[99,61949,61950,61958,61966],{"__ignoreMap":178},[220,61951,61952,61954,61956],{"class":222,"line":223},[220,61953,343],{"class":264},[220,61955,347],{"class":420},[220,61957,359],{"class":264},[220,61959,61960,61962,61964],{"class":222,"line":179},[220,61961,364],{"class":264},[220,61963,61869],{"class":420},[220,61965,386],{"class":264},[220,61967,61968,61970,61972],{"class":222,"line":389},[220,61969,402],{"class":264},[220,61971,347],{"class":420},[220,61973,359],{"class":264},[212,61975,61976],{"className":468,"code":61891,"language":469,"meta":178,"style":178},[99,61977,61978,61986,61994],{"__ignoreMap":178},[220,61979,61980,61982,61984],{"class":222,"line":223},[220,61981,343],{"class":264},[220,61983,347],{"class":420},[220,61985,359],{"class":264},[220,61987,61988,61990,61992],{"class":222,"line":179},[220,61989,364],{"class":264},[220,61991,61869],{"class":420},[220,61993,386],{"class":264},[220,61995,61996,61998,62000],{"class":222,"line":389},[220,61997,402],{"class":264},[220,61999,347],{"class":420},[220,62001,359],{"class":264},[212,62003,62005],{"className":251,"code":62004,"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,62006,62007,62017,62021,62035,62039,62048,62052],{"__ignoreMap":178},[220,62008,62009,62011,62013,62015],{"class":222,"line":223},[220,62010,261],{"class":260},[220,62012,11507],{"class":264},[220,62014,268],{"class":260},[220,62016,4007],{"class":230},[220,62018,62019],{"class":222,"line":179},[220,62020,647],{"emptyLinePlaceholder":194},[220,62022,62023,62025,62027,62029,62031,62033],{"class":222,"line":389},[220,62024,1735],{"class":260},[220,62026,1738],{"class":420},[220,62028,1741],{"class":260},[220,62030,1744],{"class":260},[220,62032,1747],{"class":226},[220,62034,1750],{"class":264},[220,62036,62037],{"class":222,"line":399},[220,62038,1765],{"class":264},[220,62040,62041,62043,62046],{"class":222,"line":644},[220,62042,1770],{"class":264},[220,62044,62045],{"class":230},"'ParticleFlow'",[220,62047,2465],{"class":264},[220,62049,62050],{"class":222,"line":650},[220,62051,1787],{"class":264},[220,62053,62054],{"class":222,"line":656},[220,62055,1792],{"class":264},[1504,62057,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":62059},[62060,62061],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fparticleflow",{"title":61869,"description":61877},"docs\u002Fcomponents\u002FParticleFlow","zsHVvGrsiT7C6qLRUh6rNKLVC2E5ylsIAjONaCcQUGc",{"id":62068,"title":62069,"body":62070,"category":36564,"componentType":25872,"description":62077,"extension":191,"meta":62262,"navigation":194,"path":62263,"requiresChild":32525,"seo":62264,"stem":62265,"__hash__":62266},"components\u002Fdocs\u002Fcomponents\u002FParticles.md","Particles",{"type":8,"value":62071,"toc":62258},[62072,62075,62078,62080,62082,62085,62087,62256],[11,62073,62069],{"id":62074},"particles",[15,62076,62077],{},"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",[31906,62079],{"component":62069},[23,62081,31910],{"id":26528},[31912,62083],{":props":62084},"[{\"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,62086,31918],{"id":31917},[246,62088,62089,62118,62146,62174,62202],{":tabs":1557},[212,62090,62092],{"className":334,"code":62091,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CParticles \u002F>\n\u003C\u002FShader>\n",[99,62093,62094,62102,62110],{"__ignoreMap":178},[220,62095,62096,62098,62100],{"class":222,"line":223},[220,62097,343],{"class":264},[220,62099,347],{"class":346},[220,62101,359],{"class":264},[220,62103,62104,62106,62108],{"class":222,"line":179},[220,62105,364],{"class":264},[220,62107,62069],{"class":346},[220,62109,386],{"class":264},[220,62111,62112,62114,62116],{"class":222,"line":389},[220,62113,402],{"class":264},[220,62115,347],{"class":346},[220,62117,359],{"class":264},[212,62119,62120],{"className":409,"code":62091,"language":411,"meta":178,"style":178},[99,62121,62122,62130,62138],{"__ignoreMap":178},[220,62123,62124,62126,62128],{"class":222,"line":223},[220,62125,343],{"class":264},[220,62127,347],{"class":420},[220,62129,359],{"class":264},[220,62131,62132,62134,62136],{"class":222,"line":179},[220,62133,364],{"class":264},[220,62135,62069],{"class":420},[220,62137,386],{"class":264},[220,62139,62140,62142,62144],{"class":222,"line":389},[220,62141,402],{"class":264},[220,62143,347],{"class":420},[220,62145,359],{"class":264},[212,62147,62148],{"className":2844,"code":62091,"language":2846,"meta":178,"style":178},[99,62149,62150,62158,62166],{"__ignoreMap":178},[220,62151,62152,62154,62156],{"class":222,"line":223},[220,62153,343],{"class":264},[220,62155,347],{"class":420},[220,62157,359],{"class":264},[220,62159,62160,62162,62164],{"class":222,"line":179},[220,62161,364],{"class":264},[220,62163,62069],{"class":420},[220,62165,386],{"class":264},[220,62167,62168,62170,62172],{"class":222,"line":389},[220,62169,402],{"class":264},[220,62171,347],{"class":420},[220,62173,359],{"class":264},[212,62175,62176],{"className":468,"code":62091,"language":469,"meta":178,"style":178},[99,62177,62178,62186,62194],{"__ignoreMap":178},[220,62179,62180,62182,62184],{"class":222,"line":223},[220,62181,343],{"class":264},[220,62183,347],{"class":420},[220,62185,359],{"class":264},[220,62187,62188,62190,62192],{"class":222,"line":179},[220,62189,364],{"class":264},[220,62191,62069],{"class":420},[220,62193,386],{"class":264},[220,62195,62196,62198,62200],{"class":222,"line":389},[220,62197,402],{"class":264},[220,62199,347],{"class":420},[220,62201,359],{"class":264},[212,62203,62205],{"className":251,"code":62204,"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,62206,62207,62217,62221,62235,62239,62248,62252],{"__ignoreMap":178},[220,62208,62209,62211,62213,62215],{"class":222,"line":223},[220,62210,261],{"class":260},[220,62212,11507],{"class":264},[220,62214,268],{"class":260},[220,62216,4007],{"class":230},[220,62218,62219],{"class":222,"line":179},[220,62220,647],{"emptyLinePlaceholder":194},[220,62222,62223,62225,62227,62229,62231,62233],{"class":222,"line":389},[220,62224,1735],{"class":260},[220,62226,1738],{"class":420},[220,62228,1741],{"class":260},[220,62230,1744],{"class":260},[220,62232,1747],{"class":226},[220,62234,1750],{"class":264},[220,62236,62237],{"class":222,"line":399},[220,62238,1765],{"class":264},[220,62240,62241,62243,62246],{"class":222,"line":644},[220,62242,1770],{"class":264},[220,62244,62245],{"class":230},"'Particles'",[220,62247,2465],{"class":264},[220,62249,62250],{"class":222,"line":650},[220,62251,1787],{"class":264},[220,62253,62254],{"class":222,"line":656},[220,62255,1792],{"class":264},[1504,62257,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":62259},[62260,62261],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fparticles",{"title":62069,"description":62077},"docs\u002Fcomponents\u002FParticles","jxyMx-Ww4ghBZRf8Gy9kIwtIBqtncQlodaIg_7kARuU",{"id":62268,"title":62269,"body":62270,"category":33058,"componentType":25872,"description":62277,"extension":191,"meta":62461,"navigation":194,"path":62462,"requiresChild":32525,"seo":62463,"stem":62464,"__hash__":62465},"components\u002Fdocs\u002Fcomponents\u002FPerlinNoise.md","PerlinNoise",{"type":8,"value":62271,"toc":62457},[62272,62275,62278,62280,62282,62284,62286,62455],[11,62273,62269],{"id":62274},"perlinnoise",[15,62276,62277],{},"Smooth gradient noise that morphs over time",[31906,62279],{"component":62269},[23,62281,31910],{"id":26528},[31912,62283],{":props":34643},[23,62285,31918],{"id":31917},[246,62287,62288,62317,62345,62373,62401],{":tabs":1557},[212,62289,62291],{"className":334,"code":62290,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerlinNoise \u002F>\n\u003C\u002FShader>\n",[99,62292,62293,62301,62309],{"__ignoreMap":178},[220,62294,62295,62297,62299],{"class":222,"line":223},[220,62296,343],{"class":264},[220,62298,347],{"class":346},[220,62300,359],{"class":264},[220,62302,62303,62305,62307],{"class":222,"line":179},[220,62304,364],{"class":264},[220,62306,62269],{"class":346},[220,62308,386],{"class":264},[220,62310,62311,62313,62315],{"class":222,"line":389},[220,62312,402],{"class":264},[220,62314,347],{"class":346},[220,62316,359],{"class":264},[212,62318,62319],{"className":409,"code":62290,"language":411,"meta":178,"style":178},[99,62320,62321,62329,62337],{"__ignoreMap":178},[220,62322,62323,62325,62327],{"class":222,"line":223},[220,62324,343],{"class":264},[220,62326,347],{"class":420},[220,62328,359],{"class":264},[220,62330,62331,62333,62335],{"class":222,"line":179},[220,62332,364],{"class":264},[220,62334,62269],{"class":420},[220,62336,386],{"class":264},[220,62338,62339,62341,62343],{"class":222,"line":389},[220,62340,402],{"class":264},[220,62342,347],{"class":420},[220,62344,359],{"class":264},[212,62346,62347],{"className":2844,"code":62290,"language":2846,"meta":178,"style":178},[99,62348,62349,62357,62365],{"__ignoreMap":178},[220,62350,62351,62353,62355],{"class":222,"line":223},[220,62352,343],{"class":264},[220,62354,347],{"class":420},[220,62356,359],{"class":264},[220,62358,62359,62361,62363],{"class":222,"line":179},[220,62360,364],{"class":264},[220,62362,62269],{"class":420},[220,62364,386],{"class":264},[220,62366,62367,62369,62371],{"class":222,"line":389},[220,62368,402],{"class":264},[220,62370,347],{"class":420},[220,62372,359],{"class":264},[212,62374,62375],{"className":468,"code":62290,"language":469,"meta":178,"style":178},[99,62376,62377,62385,62393],{"__ignoreMap":178},[220,62378,62379,62381,62383],{"class":222,"line":223},[220,62380,343],{"class":264},[220,62382,347],{"class":420},[220,62384,359],{"class":264},[220,62386,62387,62389,62391],{"class":222,"line":179},[220,62388,364],{"class":264},[220,62390,62269],{"class":420},[220,62392,386],{"class":264},[220,62394,62395,62397,62399],{"class":222,"line":389},[220,62396,402],{"class":264},[220,62398,347],{"class":420},[220,62400,359],{"class":264},[212,62402,62404],{"className":251,"code":62403,"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,62405,62406,62416,62420,62434,62438,62447,62451],{"__ignoreMap":178},[220,62407,62408,62410,62412,62414],{"class":222,"line":223},[220,62409,261],{"class":260},[220,62411,11507],{"class":264},[220,62413,268],{"class":260},[220,62415,4007],{"class":230},[220,62417,62418],{"class":222,"line":179},[220,62419,647],{"emptyLinePlaceholder":194},[220,62421,62422,62424,62426,62428,62430,62432],{"class":222,"line":389},[220,62423,1735],{"class":260},[220,62425,1738],{"class":420},[220,62427,1741],{"class":260},[220,62429,1744],{"class":260},[220,62431,1747],{"class":226},[220,62433,1750],{"class":264},[220,62435,62436],{"class":222,"line":399},[220,62437,1765],{"class":264},[220,62439,62440,62442,62445],{"class":222,"line":644},[220,62441,1770],{"class":264},[220,62443,62444],{"class":230},"'PerlinNoise'",[220,62446,2465],{"class":264},[220,62448,62449],{"class":222,"line":650},[220,62450,1787],{"class":264},[220,62452,62453],{"class":222,"line":656},[220,62454,1792],{"class":264},[1504,62456,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":62458},[62459,62460],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fperlinnoise",{"title":62269,"description":62277},"docs\u002Fcomponents\u002FPerlinNoise","NcjxqwXJEGPKxt4IUEg2QnS3Hfwvccx6ORTZ3ZV2edE",{"id":62467,"title":62468,"body":62469,"category":33391,"componentType":25878,"description":62476,"extension":191,"meta":62737,"navigation":194,"path":62738,"requiresChild":194,"seo":62739,"stem":62740,"__hash__":62741},"components\u002Fdocs\u002Fcomponents\u002FPerspective.md","Perspective",{"type":8,"value":62470,"toc":62733},[62471,62474,62477,62479,62481,62484,62486,62731],[11,62472,62468],{"id":62473},"perspective",[15,62475,62476],{},"Rotate the plane in 3D space with pan and tilt",[31906,62478],{"component":62468},[23,62480,31910],{"id":26528},[31912,62482],{":props":62483},"[{\"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,62485,31918],{"id":31917},[246,62487,62488,62533,62577,62621,62665],{":tabs":1557},[212,62489,62491],{"className":334,"code":62490,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPerspective>\n \u003CCircle \u002F>\n \u003C\u002FPerspective>\n\u003C\u002FShader>\n",[99,62492,62493,62501,62509,62517,62525],{"__ignoreMap":178},[220,62494,62495,62497,62499],{"class":222,"line":223},[220,62496,343],{"class":264},[220,62498,347],{"class":346},[220,62500,359],{"class":264},[220,62502,62503,62505,62507],{"class":222,"line":179},[220,62504,364],{"class":264},[220,62506,62468],{"class":346},[220,62508,359],{"class":264},[220,62510,62511,62513,62515],{"class":222,"line":389},[220,62512,2550],{"class":264},[220,62514,2553],{"class":346},[220,62516,386],{"class":264},[220,62518,62519,62521,62523],{"class":222,"line":399},[220,62520,2567],{"class":264},[220,62522,62468],{"class":346},[220,62524,359],{"class":264},[220,62526,62527,62529,62531],{"class":222,"line":644},[220,62528,402],{"class":264},[220,62530,347],{"class":346},[220,62532,359],{"class":264},[212,62534,62535],{"className":409,"code":62490,"language":411,"meta":178,"style":178},[99,62536,62537,62545,62553,62561,62569],{"__ignoreMap":178},[220,62538,62539,62541,62543],{"class":222,"line":223},[220,62540,343],{"class":264},[220,62542,347],{"class":420},[220,62544,359],{"class":264},[220,62546,62547,62549,62551],{"class":222,"line":179},[220,62548,364],{"class":264},[220,62550,62468],{"class":420},[220,62552,359],{"class":264},[220,62554,62555,62557,62559],{"class":222,"line":389},[220,62556,2550],{"class":264},[220,62558,2553],{"class":420},[220,62560,386],{"class":264},[220,62562,62563,62565,62567],{"class":222,"line":399},[220,62564,2567],{"class":264},[220,62566,62468],{"class":420},[220,62568,359],{"class":264},[220,62570,62571,62573,62575],{"class":222,"line":644},[220,62572,402],{"class":264},[220,62574,347],{"class":420},[220,62576,359],{"class":264},[212,62578,62579],{"className":2844,"code":62490,"language":2846,"meta":178,"style":178},[99,62580,62581,62589,62597,62605,62613],{"__ignoreMap":178},[220,62582,62583,62585,62587],{"class":222,"line":223},[220,62584,343],{"class":264},[220,62586,347],{"class":420},[220,62588,359],{"class":264},[220,62590,62591,62593,62595],{"class":222,"line":179},[220,62592,364],{"class":264},[220,62594,62468],{"class":420},[220,62596,359],{"class":264},[220,62598,62599,62601,62603],{"class":222,"line":389},[220,62600,2550],{"class":264},[220,62602,2553],{"class":420},[220,62604,386],{"class":264},[220,62606,62607,62609,62611],{"class":222,"line":399},[220,62608,2567],{"class":264},[220,62610,62468],{"class":420},[220,62612,359],{"class":264},[220,62614,62615,62617,62619],{"class":222,"line":644},[220,62616,402],{"class":264},[220,62618,347],{"class":420},[220,62620,359],{"class":264},[212,62622,62623],{"className":468,"code":62490,"language":469,"meta":178,"style":178},[99,62624,62625,62633,62641,62649,62657],{"__ignoreMap":178},[220,62626,62627,62629,62631],{"class":222,"line":223},[220,62628,343],{"class":264},[220,62630,347],{"class":420},[220,62632,359],{"class":264},[220,62634,62635,62637,62639],{"class":222,"line":179},[220,62636,364],{"class":264},[220,62638,62468],{"class":420},[220,62640,359],{"class":264},[220,62642,62643,62645,62647],{"class":222,"line":389},[220,62644,2550],{"class":264},[220,62646,2553],{"class":420},[220,62648,386],{"class":264},[220,62650,62651,62653,62655],{"class":222,"line":399},[220,62652,2567],{"class":264},[220,62654,62468],{"class":420},[220,62656,359],{"class":264},[220,62658,62659,62661,62663],{"class":222,"line":644},[220,62660,402],{"class":264},[220,62662,347],{"class":420},[220,62664,359],{"class":264},[212,62666,62668],{"className":251,"code":62667,"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,62669,62670,62680,62684,62698,62702,62711,62719,62723,62727],{"__ignoreMap":178},[220,62671,62672,62674,62676,62678],{"class":222,"line":223},[220,62673,261],{"class":260},[220,62675,11507],{"class":264},[220,62677,268],{"class":260},[220,62679,4007],{"class":230},[220,62681,62682],{"class":222,"line":179},[220,62683,647],{"emptyLinePlaceholder":194},[220,62685,62686,62688,62690,62692,62694,62696],{"class":222,"line":389},[220,62687,1735],{"class":260},[220,62689,1738],{"class":420},[220,62691,1741],{"class":260},[220,62693,1744],{"class":260},[220,62695,1747],{"class":226},[220,62697,1750],{"class":264},[220,62699,62700],{"class":222,"line":399},[220,62701,1765],{"class":264},[220,62703,62704,62706,62709],{"class":222,"line":644},[220,62705,1770],{"class":264},[220,62707,62708],{"class":230},"'Perspective'",[220,62710,7004],{"class":264},[220,62712,62713,62715,62717],{"class":222,"line":650},[220,62714,7009],{"class":264},[220,62716,3206],{"class":230},[220,62718,2465],{"class":264},[220,62720,62721],{"class":222,"line":656},[220,62722,7026],{"class":264},[220,62724,62725],{"class":222,"line":673},[220,62726,1787],{"class":264},[220,62728,62729],{"class":222,"line":682},[220,62730,1792],{"class":264},[1504,62732,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":62734},[62735,62736],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fperspective",{"title":62468,"description":62476},"docs\u002Fcomponents\u002FPerspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":62743,"title":62744,"body":62745,"category":35554,"componentType":25878,"description":62752,"extension":191,"meta":63069,"navigation":194,"path":63070,"requiresChild":194,"seo":63071,"stem":63072,"__hash__":63073},"components\u002Fdocs\u002Fcomponents\u002FPixelSort.md","PixelSort",{"type":8,"value":62746,"toc":63065},[62747,62750,62753,62755,62757,62760,62762,63063],[11,62748,62744],{"id":62749},"pixelsort",[15,62751,62752],{},"Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time",[31906,62754],{"component":62744},[23,62756,31910],{"id":26528},[31912,62758],{":props":62759},"[{\"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,62761,31918],{"id":31917},[246,62763,62764,62820,62879,62935,62993],{":tabs":1557},[212,62765,62767],{"className":334,"code":62766,"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,62768,62769,62777,62784,62792,62796,62804,62812],{"__ignoreMap":178},[220,62770,62771,62773,62775],{"class":222,"line":223},[220,62772,343],{"class":264},[220,62774,347],{"class":346},[220,62776,359],{"class":264},[220,62778,62779,62781],{"class":222,"line":179},[220,62780,364],{"class":264},[220,62782,62783],{"class":346},"PixelSort\n",[220,62785,62786,62788,62790],{"class":222,"line":389},[220,62787,17400],{"class":226},[220,62789,353],{"class":264},[220,62791,48143],{"class":230},[220,62793,62794],{"class":222,"line":399},[220,62795,31954],{"class":264},[220,62797,62798,62800,62802],{"class":222,"line":644},[220,62799,2550],{"class":264},[220,62801,2553],{"class":346},[220,62803,386],{"class":264},[220,62805,62806,62808,62810],{"class":222,"line":650},[220,62807,2567],{"class":264},[220,62809,62744],{"class":346},[220,62811,359],{"class":264},[220,62813,62814,62816,62818],{"class":222,"line":656},[220,62815,402],{"class":264},[220,62817,347],{"class":346},[220,62819,359],{"class":264},[212,62821,62823],{"className":409,"code":62822,"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,62824,62825,62833,62839,62851,62855,62863,62871],{"__ignoreMap":178},[220,62826,62827,62829,62831],{"class":222,"line":223},[220,62828,343],{"class":264},[220,62830,347],{"class":420},[220,62832,359],{"class":264},[220,62834,62835,62837],{"class":222,"line":179},[220,62836,364],{"class":264},[220,62838,62783],{"class":420},[220,62840,62841,62843,62845,62847,62849],{"class":222,"line":389},[220,62842,9640],{"class":226},[220,62844,353],{"class":260},[220,62846,743],{"class":264},[220,62848,8244],{"class":420},[220,62850,749],{"class":264},[220,62852,62853],{"class":222,"line":399},[220,62854,31954],{"class":264},[220,62856,62857,62859,62861],{"class":222,"line":644},[220,62858,2550],{"class":264},[220,62860,2553],{"class":420},[220,62862,386],{"class":264},[220,62864,62865,62867,62869],{"class":222,"line":650},[220,62866,2567],{"class":264},[220,62868,62744],{"class":420},[220,62870,359],{"class":264},[220,62872,62873,62875,62877],{"class":222,"line":656},[220,62874,402],{"class":264},[220,62876,347],{"class":420},[220,62878,359],{"class":264},[212,62880,62881],{"className":2844,"code":62822,"language":2846,"meta":178,"style":178},[99,62882,62883,62891,62897,62907,62911,62919,62927],{"__ignoreMap":178},[220,62884,62885,62887,62889],{"class":222,"line":223},[220,62886,343],{"class":264},[220,62888,347],{"class":420},[220,62890,359],{"class":264},[220,62892,62893,62895],{"class":222,"line":179},[220,62894,364],{"class":264},[220,62896,62783],{"class":420},[220,62898,62899,62901,62903,62905],{"class":222,"line":389},[220,62900,9640],{"class":226},[220,62902,29866],{"class":264},[220,62904,8244],{"class":420},[220,62906,749],{"class":264},[220,62908,62909],{"class":222,"line":399},[220,62910,31954],{"class":264},[220,62912,62913,62915,62917],{"class":222,"line":644},[220,62914,2550],{"class":264},[220,62916,2553],{"class":420},[220,62918,386],{"class":264},[220,62920,62921,62923,62925],{"class":222,"line":650},[220,62922,2567],{"class":264},[220,62924,62744],{"class":420},[220,62926,359],{"class":264},[220,62928,62929,62931,62933],{"class":222,"line":656},[220,62930,402],{"class":264},[220,62932,347],{"class":420},[220,62934,359],{"class":264},[212,62936,62937],{"className":468,"code":62822,"language":469,"meta":178,"style":178},[99,62938,62939,62947,62953,62965,62969,62977,62985],{"__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],{"class":222,"line":179},[220,62950,364],{"class":264},[220,62952,62783],{"class":420},[220,62954,62955,62957,62959,62961,62963],{"class":222,"line":389},[220,62956,9640],{"class":226},[220,62958,353],{"class":260},[220,62960,743],{"class":264},[220,62962,8244],{"class":420},[220,62964,749],{"class":264},[220,62966,62967],{"class":222,"line":399},[220,62968,31954],{"class":264},[220,62970,62971,62973,62975],{"class":222,"line":644},[220,62972,2550],{"class":264},[220,62974,2553],{"class":420},[220,62976,386],{"class":264},[220,62978,62979,62981,62983],{"class":222,"line":650},[220,62980,2567],{"class":264},[220,62982,62744],{"class":420},[220,62984,359],{"class":264},[220,62986,62987,62989,62991],{"class":222,"line":656},[220,62988,402],{"class":264},[220,62990,347],{"class":420},[220,62992,359],{"class":264},[212,62994,62996],{"className":251,"code":62995,"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,62997,62998,63008,63012,63026,63030,63043,63051,63055,63059],{"__ignoreMap":178},[220,62999,63000,63002,63004,63006],{"class":222,"line":223},[220,63001,261],{"class":260},[220,63003,11507],{"class":264},[220,63005,268],{"class":260},[220,63007,4007],{"class":230},[220,63009,63010],{"class":222,"line":179},[220,63011,647],{"emptyLinePlaceholder":194},[220,63013,63014,63016,63018,63020,63022,63024],{"class":222,"line":389},[220,63015,1735],{"class":260},[220,63017,1738],{"class":420},[220,63019,1741],{"class":260},[220,63021,1744],{"class":260},[220,63023,1747],{"class":226},[220,63025,1750],{"class":264},[220,63027,63028],{"class":222,"line":399},[220,63029,1765],{"class":264},[220,63031,63032,63034,63037,63039,63041],{"class":222,"line":644},[220,63033,1770],{"class":264},[220,63035,63036],{"class":230},"'PixelSort'",[220,63038,7536],{"class":264},[220,63040,8244],{"class":420},[220,63042,7541],{"class":264},[220,63044,63045,63047,63049],{"class":222,"line":650},[220,63046,7009],{"class":264},[220,63048,3206],{"class":230},[220,63050,2465],{"class":264},[220,63052,63053],{"class":222,"line":656},[220,63054,7026],{"class":264},[220,63056,63057],{"class":222,"line":673},[220,63058,1787],{"class":264},[220,63060,63061],{"class":222,"line":682},[220,63062,1792],{"class":264},[1504,63064,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63066},[63067,63068],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpixelsort",{"title":62744,"description":62752},"docs\u002Fcomponents\u002FPixelSort","D4tAuGnsFOchul4u2R9IV-ibQltn9j9THYgtz5qZr1w",{"id":63075,"title":63076,"body":63077,"category":35554,"componentType":25878,"description":63084,"extension":191,"meta":63401,"navigation":194,"path":63402,"requiresChild":194,"seo":63403,"stem":63404,"__hash__":63405},"components\u002Fdocs\u002Fcomponents\u002FPixelThrow.md","PixelThrow",{"type":8,"value":63078,"toc":63397},[63079,63082,63085,63087,63089,63092,63094,63395],[11,63080,63076],{"id":63081},"pixelthrow",[15,63083,63084],{},"Throws pixels along the cursor's path like a fluid — brighter (or redder\u002Fgreener\u002Fbluer) pixels are flung farther, then settle back with friction",[31906,63086],{"component":63076},[23,63088,31910],{"id":26528},[31912,63090],{":props":63091},"[{\"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,63093,31918],{"id":31917},[246,63095,63096,63152,63211,63267,63325],{":tabs":1557},[212,63097,63099],{"className":334,"code":63098,"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,63100,63101,63109,63116,63124,63128,63136,63144],{"__ignoreMap":178},[220,63102,63103,63105,63107],{"class":222,"line":223},[220,63104,343],{"class":264},[220,63106,347],{"class":346},[220,63108,359],{"class":264},[220,63110,63111,63113],{"class":222,"line":179},[220,63112,364],{"class":264},[220,63114,63115],{"class":346},"PixelThrow\n",[220,63117,63118,63120,63122],{"class":222,"line":389},[220,63119,17400],{"class":226},[220,63121,353],{"class":264},[220,63123,60787],{"class":230},[220,63125,63126],{"class":222,"line":399},[220,63127,31954],{"class":264},[220,63129,63130,63132,63134],{"class":222,"line":644},[220,63131,2550],{"class":264},[220,63133,2553],{"class":346},[220,63135,386],{"class":264},[220,63137,63138,63140,63142],{"class":222,"line":650},[220,63139,2567],{"class":264},[220,63141,63076],{"class":346},[220,63143,359],{"class":264},[220,63145,63146,63148,63150],{"class":222,"line":656},[220,63147,402],{"class":264},[220,63149,347],{"class":346},[220,63151,359],{"class":264},[212,63153,63155],{"className":409,"code":63154,"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,63156,63157,63165,63171,63183,63187,63195,63203],{"__ignoreMap":178},[220,63158,63159,63161,63163],{"class":222,"line":223},[220,63160,343],{"class":264},[220,63162,347],{"class":420},[220,63164,359],{"class":264},[220,63166,63167,63169],{"class":222,"line":179},[220,63168,364],{"class":264},[220,63170,63115],{"class":420},[220,63172,63173,63175,63177,63179,63181],{"class":222,"line":389},[220,63174,9640],{"class":226},[220,63176,353],{"class":260},[220,63178,743],{"class":264},[220,63180,16971],{"class":420},[220,63182,749],{"class":264},[220,63184,63185],{"class":222,"line":399},[220,63186,31954],{"class":264},[220,63188,63189,63191,63193],{"class":222,"line":644},[220,63190,2550],{"class":264},[220,63192,2553],{"class":420},[220,63194,386],{"class":264},[220,63196,63197,63199,63201],{"class":222,"line":650},[220,63198,2567],{"class":264},[220,63200,63076],{"class":420},[220,63202,359],{"class":264},[220,63204,63205,63207,63209],{"class":222,"line":656},[220,63206,402],{"class":264},[220,63208,347],{"class":420},[220,63210,359],{"class":264},[212,63212,63213],{"className":2844,"code":63154,"language":2846,"meta":178,"style":178},[99,63214,63215,63223,63229,63239,63243,63251,63259],{"__ignoreMap":178},[220,63216,63217,63219,63221],{"class":222,"line":223},[220,63218,343],{"class":264},[220,63220,347],{"class":420},[220,63222,359],{"class":264},[220,63224,63225,63227],{"class":222,"line":179},[220,63226,364],{"class":264},[220,63228,63115],{"class":420},[220,63230,63231,63233,63235,63237],{"class":222,"line":389},[220,63232,9640],{"class":226},[220,63234,29866],{"class":264},[220,63236,16971],{"class":420},[220,63238,749],{"class":264},[220,63240,63241],{"class":222,"line":399},[220,63242,31954],{"class":264},[220,63244,63245,63247,63249],{"class":222,"line":644},[220,63246,2550],{"class":264},[220,63248,2553],{"class":420},[220,63250,386],{"class":264},[220,63252,63253,63255,63257],{"class":222,"line":650},[220,63254,2567],{"class":264},[220,63256,63076],{"class":420},[220,63258,359],{"class":264},[220,63260,63261,63263,63265],{"class":222,"line":656},[220,63262,402],{"class":264},[220,63264,347],{"class":420},[220,63266,359],{"class":264},[212,63268,63269],{"className":468,"code":63154,"language":469,"meta":178,"style":178},[99,63270,63271,63279,63285,63297,63301,63309,63317],{"__ignoreMap":178},[220,63272,63273,63275,63277],{"class":222,"line":223},[220,63274,343],{"class":264},[220,63276,347],{"class":420},[220,63278,359],{"class":264},[220,63280,63281,63283],{"class":222,"line":179},[220,63282,364],{"class":264},[220,63284,63115],{"class":420},[220,63286,63287,63289,63291,63293,63295],{"class":222,"line":389},[220,63288,9640],{"class":226},[220,63290,353],{"class":260},[220,63292,743],{"class":264},[220,63294,16971],{"class":420},[220,63296,749],{"class":264},[220,63298,63299],{"class":222,"line":399},[220,63300,31954],{"class":264},[220,63302,63303,63305,63307],{"class":222,"line":644},[220,63304,2550],{"class":264},[220,63306,2553],{"class":420},[220,63308,386],{"class":264},[220,63310,63311,63313,63315],{"class":222,"line":650},[220,63312,2567],{"class":264},[220,63314,63076],{"class":420},[220,63316,359],{"class":264},[220,63318,63319,63321,63323],{"class":222,"line":656},[220,63320,402],{"class":264},[220,63322,347],{"class":420},[220,63324,359],{"class":264},[212,63326,63328],{"className":251,"code":63327,"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,63329,63330,63340,63344,63358,63362,63375,63383,63387,63391],{"__ignoreMap":178},[220,63331,63332,63334,63336,63338],{"class":222,"line":223},[220,63333,261],{"class":260},[220,63335,11507],{"class":264},[220,63337,268],{"class":260},[220,63339,4007],{"class":230},[220,63341,63342],{"class":222,"line":179},[220,63343,647],{"emptyLinePlaceholder":194},[220,63345,63346,63348,63350,63352,63354,63356],{"class":222,"line":389},[220,63347,1735],{"class":260},[220,63349,1738],{"class":420},[220,63351,1741],{"class":260},[220,63353,1744],{"class":260},[220,63355,1747],{"class":226},[220,63357,1750],{"class":264},[220,63359,63360],{"class":222,"line":399},[220,63361,1765],{"class":264},[220,63363,63364,63366,63369,63371,63373],{"class":222,"line":644},[220,63365,1770],{"class":264},[220,63367,63368],{"class":230},"'PixelThrow'",[220,63370,7536],{"class":264},[220,63372,16971],{"class":420},[220,63374,7541],{"class":264},[220,63376,63377,63379,63381],{"class":222,"line":650},[220,63378,7009],{"class":264},[220,63380,3206],{"class":230},[220,63382,2465],{"class":264},[220,63384,63385],{"class":222,"line":656},[220,63386,7026],{"class":264},[220,63388,63389],{"class":222,"line":673},[220,63390,1787],{"class":264},[220,63392,63393],{"class":222,"line":682},[220,63394,1792],{"class":264},[1504,63396,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63398},[63399,63400],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpixelthrow",{"title":63076,"description":63084},"docs\u002Fcomponents\u002FPixelThrow","RVEbQcMV0qMkbroKnxwj94cbAu3e-oOB8YuDdJmcATw",{"id":63407,"title":63408,"body":63409,"category":32801,"componentType":25878,"description":63416,"extension":191,"meta":63677,"navigation":194,"path":63678,"requiresChild":194,"seo":63679,"stem":63680,"__hash__":63681},"components\u002Fdocs\u002Fcomponents\u002FPixelate.md","Pixelate",{"type":8,"value":63410,"toc":63673},[63411,63414,63417,63419,63421,63424,63426,63671],[11,63412,63408],{"id":63413},"pixelate",[15,63415,63416],{},"Pixelation effect with adjustable cell size",[31906,63418],{"component":63408},[23,63420,31910],{"id":26528},[31912,63422],{":props":63423},"[{\"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,63425,31918],{"id":31917},[246,63427,63428,63473,63517,63561,63605],{":tabs":1557},[212,63429,63431],{"className":334,"code":63430,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPixelate>\n \u003CCircle \u002F>\n \u003C\u002FPixelate>\n\u003C\u002FShader>\n",[99,63432,63433,63441,63449,63457,63465],{"__ignoreMap":178},[220,63434,63435,63437,63439],{"class":222,"line":223},[220,63436,343],{"class":264},[220,63438,347],{"class":346},[220,63440,359],{"class":264},[220,63442,63443,63445,63447],{"class":222,"line":179},[220,63444,364],{"class":264},[220,63446,63408],{"class":346},[220,63448,359],{"class":264},[220,63450,63451,63453,63455],{"class":222,"line":389},[220,63452,2550],{"class":264},[220,63454,2553],{"class":346},[220,63456,386],{"class":264},[220,63458,63459,63461,63463],{"class":222,"line":399},[220,63460,2567],{"class":264},[220,63462,63408],{"class":346},[220,63464,359],{"class":264},[220,63466,63467,63469,63471],{"class":222,"line":644},[220,63468,402],{"class":264},[220,63470,347],{"class":346},[220,63472,359],{"class":264},[212,63474,63475],{"className":409,"code":63430,"language":411,"meta":178,"style":178},[99,63476,63477,63485,63493,63501,63509],{"__ignoreMap":178},[220,63478,63479,63481,63483],{"class":222,"line":223},[220,63480,343],{"class":264},[220,63482,347],{"class":420},[220,63484,359],{"class":264},[220,63486,63487,63489,63491],{"class":222,"line":179},[220,63488,364],{"class":264},[220,63490,63408],{"class":420},[220,63492,359],{"class":264},[220,63494,63495,63497,63499],{"class":222,"line":389},[220,63496,2550],{"class":264},[220,63498,2553],{"class":420},[220,63500,386],{"class":264},[220,63502,63503,63505,63507],{"class":222,"line":399},[220,63504,2567],{"class":264},[220,63506,63408],{"class":420},[220,63508,359],{"class":264},[220,63510,63511,63513,63515],{"class":222,"line":644},[220,63512,402],{"class":264},[220,63514,347],{"class":420},[220,63516,359],{"class":264},[212,63518,63519],{"className":2844,"code":63430,"language":2846,"meta":178,"style":178},[99,63520,63521,63529,63537,63545,63553],{"__ignoreMap":178},[220,63522,63523,63525,63527],{"class":222,"line":223},[220,63524,343],{"class":264},[220,63526,347],{"class":420},[220,63528,359],{"class":264},[220,63530,63531,63533,63535],{"class":222,"line":179},[220,63532,364],{"class":264},[220,63534,63408],{"class":420},[220,63536,359],{"class":264},[220,63538,63539,63541,63543],{"class":222,"line":389},[220,63540,2550],{"class":264},[220,63542,2553],{"class":420},[220,63544,386],{"class":264},[220,63546,63547,63549,63551],{"class":222,"line":399},[220,63548,2567],{"class":264},[220,63550,63408],{"class":420},[220,63552,359],{"class":264},[220,63554,63555,63557,63559],{"class":222,"line":644},[220,63556,402],{"class":264},[220,63558,347],{"class":420},[220,63560,359],{"class":264},[212,63562,63563],{"className":468,"code":63430,"language":469,"meta":178,"style":178},[99,63564,63565,63573,63581,63589,63597],{"__ignoreMap":178},[220,63566,63567,63569,63571],{"class":222,"line":223},[220,63568,343],{"class":264},[220,63570,347],{"class":420},[220,63572,359],{"class":264},[220,63574,63575,63577,63579],{"class":222,"line":179},[220,63576,364],{"class":264},[220,63578,63408],{"class":420},[220,63580,359],{"class":264},[220,63582,63583,63585,63587],{"class":222,"line":389},[220,63584,2550],{"class":264},[220,63586,2553],{"class":420},[220,63588,386],{"class":264},[220,63590,63591,63593,63595],{"class":222,"line":399},[220,63592,2567],{"class":264},[220,63594,63408],{"class":420},[220,63596,359],{"class":264},[220,63598,63599,63601,63603],{"class":222,"line":644},[220,63600,402],{"class":264},[220,63602,347],{"class":420},[220,63604,359],{"class":264},[212,63606,63608],{"className":251,"code":63607,"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,63609,63610,63620,63624,63638,63642,63651,63659,63663,63667],{"__ignoreMap":178},[220,63611,63612,63614,63616,63618],{"class":222,"line":223},[220,63613,261],{"class":260},[220,63615,11507],{"class":264},[220,63617,268],{"class":260},[220,63619,4007],{"class":230},[220,63621,63622],{"class":222,"line":179},[220,63623,647],{"emptyLinePlaceholder":194},[220,63625,63626,63628,63630,63632,63634,63636],{"class":222,"line":389},[220,63627,1735],{"class":260},[220,63629,1738],{"class":420},[220,63631,1741],{"class":260},[220,63633,1744],{"class":260},[220,63635,1747],{"class":226},[220,63637,1750],{"class":264},[220,63639,63640],{"class":222,"line":399},[220,63641,1765],{"class":264},[220,63643,63644,63646,63649],{"class":222,"line":644},[220,63645,1770],{"class":264},[220,63647,63648],{"class":230},"'Pixelate'",[220,63650,7004],{"class":264},[220,63652,63653,63655,63657],{"class":222,"line":650},[220,63654,7009],{"class":264},[220,63656,3206],{"class":230},[220,63658,2465],{"class":264},[220,63660,63661],{"class":222,"line":656},[220,63662,7026],{"class":264},[220,63664,63665],{"class":222,"line":673},[220,63666,1787],{"class":264},[220,63668,63669],{"class":222,"line":682},[220,63670,1792],{"class":264},[1504,63672,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":63674},[63675,63676],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpixelate",{"title":63408,"description":63416},"docs\u002Fcomponents\u002FPixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":63683,"title":13064,"body":63684,"category":33058,"componentType":25872,"description":63691,"extension":191,"meta":63932,"navigation":194,"path":63933,"requiresChild":32525,"seo":63934,"stem":63935,"__hash__":63936},"components\u002Fdocs\u002Fcomponents\u002FPlasma.md",{"type":8,"value":63685,"toc":63928},[63686,63689,63692,63694,63696,63699,63701,63926],[11,63687,13064],{"id":63688},"plasma",[15,63690,63691],{},"Animated effect of glowing plasma",[31906,63693],{"component":13064},[23,63695,31910],{"id":26528},[31912,63697],{":props":63698},"[{\"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,63700,31918],{"id":31917},[246,63702,63703,63743,63786,63826,63868],{":tabs":1557},[212,63704,63706],{"className":334,"code":63705,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n \u002F>\n\u003C\u002FShader>\n",[99,63707,63708,63716,63723,63731,63735],{"__ignoreMap":178},[220,63709,63710,63712,63714],{"class":222,"line":223},[220,63711,343],{"class":264},[220,63713,347],{"class":346},[220,63715,359],{"class":264},[220,63717,63718,63720],{"class":222,"line":179},[220,63719,364],{"class":264},[220,63721,63722],{"class":346},"Plasma\n",[220,63724,63725,63727,63729],{"class":222,"line":389},[220,63726,20366],{"class":226},[220,63728,353],{"class":264},[220,63730,59949],{"class":230},[220,63732,63733],{"class":222,"line":399},[220,63734,1234],{"class":264},[220,63736,63737,63739,63741],{"class":222,"line":644},[220,63738,402],{"class":264},[220,63740,347],{"class":346},[220,63742,359],{"class":264},[212,63744,63746],{"className":409,"code":63745,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n \u002F>\n\u003C\u002FShader>\n",[99,63747,63748,63756,63762,63774,63778],{"__ignoreMap":178},[220,63749,63750,63752,63754],{"class":222,"line":223},[220,63751,343],{"class":264},[220,63753,347],{"class":420},[220,63755,359],{"class":264},[220,63757,63758,63760],{"class":222,"line":179},[220,63759,364],{"class":264},[220,63761,63722],{"class":420},[220,63763,63764,63766,63768,63770,63772],{"class":222,"line":389},[220,63765,20477],{"class":226},[220,63767,353],{"class":260},[220,63769,743],{"class":264},[220,63771,59999],{"class":420},[220,63773,749],{"class":264},[220,63775,63776],{"class":222,"line":399},[220,63777,1234],{"class":264},[220,63779,63780,63782,63784],{"class":222,"line":644},[220,63781,402],{"class":264},[220,63783,347],{"class":420},[220,63785,359],{"class":264},[212,63787,63788],{"className":2844,"code":63745,"language":2846,"meta":178,"style":178},[99,63789,63790,63798,63804,63814,63818],{"__ignoreMap":178},[220,63791,63792,63794,63796],{"class":222,"line":223},[220,63793,343],{"class":264},[220,63795,347],{"class":420},[220,63797,359],{"class":264},[220,63799,63800,63802],{"class":222,"line":179},[220,63801,364],{"class":264},[220,63803,63722],{"class":420},[220,63805,63806,63808,63810,63812],{"class":222,"line":389},[220,63807,20477],{"class":226},[220,63809,29866],{"class":264},[220,63811,59999],{"class":420},[220,63813,749],{"class":264},[220,63815,63816],{"class":222,"line":399},[220,63817,1234],{"class":264},[220,63819,63820,63822,63824],{"class":222,"line":644},[220,63821,402],{"class":264},[220,63823,347],{"class":420},[220,63825,359],{"class":264},[212,63827,63828],{"className":468,"code":63745,"language":469,"meta":178,"style":178},[99,63829,63830,63838,63844,63856,63860],{"__ignoreMap":178},[220,63831,63832,63834,63836],{"class":222,"line":223},[220,63833,343],{"class":264},[220,63835,347],{"class":420},[220,63837,359],{"class":264},[220,63839,63840,63842],{"class":222,"line":179},[220,63841,364],{"class":264},[220,63843,63722],{"class":420},[220,63845,63846,63848,63850,63852,63854],{"class":222,"line":389},[220,63847,20477],{"class":226},[220,63849,353],{"class":260},[220,63851,743],{"class":264},[220,63853,59999],{"class":420},[220,63855,749],{"class":264},[220,63857,63858],{"class":222,"line":399},[220,63859,1234],{"class":264},[220,63861,63862,63864,63866],{"class":222,"line":644},[220,63863,402],{"class":264},[220,63865,347],{"class":420},[220,63867,359],{"class":264},[212,63869,63871],{"className":251,"code":63870,"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,63872,63873,63883,63887,63901,63905,63918,63922],{"__ignoreMap":178},[220,63874,63875,63877,63879,63881],{"class":222,"line":223},[220,63876,261],{"class":260},[220,63878,11507],{"class":264},[220,63880,268],{"class":260},[220,63882,4007],{"class":230},[220,63884,63885],{"class":222,"line":179},[220,63886,647],{"emptyLinePlaceholder":194},[220,63888,63889,63891,63893,63895,63897,63899],{"class":222,"line":389},[220,63890,1735],{"class":260},[220,63892,1738],{"class":420},[220,63894,1741],{"class":260},[220,63896,1744],{"class":260},[220,63898,1747],{"class":226},[220,63900,1750],{"class":264},[220,63902,63903],{"class":222,"line":399},[220,63904,1765],{"class":264},[220,63906,63907,63909,63912,63914,63916],{"class":222,"line":644},[220,63908,1770],{"class":264},[220,63910,63911],{"class":230},"'Plasma'",[220,63913,32198],{"class":264},[220,63915,59999],{"class":420},[220,63917,1782],{"class":264},[220,63919,63920],{"class":222,"line":650},[220,63921,1787],{"class":264},[220,63923,63924],{"class":222,"line":656},[220,63925,1792],{"class":264},[1504,63927,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":63929},[63930,63931],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fplasma",{"title":13064,"description":63691},"docs\u002Fcomponents\u002FPlasma","lkBZQKqMWpJvUAjjtOhXDGeYas6XYghUXeP_ULP-MNg",{"id":63938,"title":63939,"body":63940,"category":36564,"componentType":25872,"description":63947,"extension":191,"meta":64132,"navigation":194,"path":64133,"requiresChild":32525,"seo":64134,"stem":64135,"__hash__":64136},"components\u002Fdocs\u002Fcomponents\u002FPlastic.md","Plastic",{"type":8,"value":63941,"toc":64128},[63942,63945,63948,63950,63952,63955,63957,64126],[11,63943,63939],{"id":63944},"plastic",[15,63946,63947],{},"Glossy molded plastic with photorealistic studio reflections, driven in a custom shape",[31906,63949],{"component":63939},[23,63951,31910],{"id":26528},[31912,63953],{":props":63954},"[{\"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,63956,31918],{"id":31917},[246,63958,63959,63988,64016,64044,64072],{":tabs":1557},[212,63960,63962],{"className":334,"code":63961,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPlastic \u002F>\n\u003C\u002FShader>\n",[99,63963,63964,63972,63980],{"__ignoreMap":178},[220,63965,63966,63968,63970],{"class":222,"line":223},[220,63967,343],{"class":264},[220,63969,347],{"class":346},[220,63971,359],{"class":264},[220,63973,63974,63976,63978],{"class":222,"line":179},[220,63975,364],{"class":264},[220,63977,63939],{"class":346},[220,63979,386],{"class":264},[220,63981,63982,63984,63986],{"class":222,"line":389},[220,63983,402],{"class":264},[220,63985,347],{"class":346},[220,63987,359],{"class":264},[212,63989,63990],{"className":409,"code":63961,"language":411,"meta":178,"style":178},[99,63991,63992,64000,64008],{"__ignoreMap":178},[220,63993,63994,63996,63998],{"class":222,"line":223},[220,63995,343],{"class":264},[220,63997,347],{"class":420},[220,63999,359],{"class":264},[220,64001,64002,64004,64006],{"class":222,"line":179},[220,64003,364],{"class":264},[220,64005,63939],{"class":420},[220,64007,386],{"class":264},[220,64009,64010,64012,64014],{"class":222,"line":389},[220,64011,402],{"class":264},[220,64013,347],{"class":420},[220,64015,359],{"class":264},[212,64017,64018],{"className":2844,"code":63961,"language":2846,"meta":178,"style":178},[99,64019,64020,64028,64036],{"__ignoreMap":178},[220,64021,64022,64024,64026],{"class":222,"line":223},[220,64023,343],{"class":264},[220,64025,347],{"class":420},[220,64027,359],{"class":264},[220,64029,64030,64032,64034],{"class":222,"line":179},[220,64031,364],{"class":264},[220,64033,63939],{"class":420},[220,64035,386],{"class":264},[220,64037,64038,64040,64042],{"class":222,"line":389},[220,64039,402],{"class":264},[220,64041,347],{"class":420},[220,64043,359],{"class":264},[212,64045,64046],{"className":468,"code":63961,"language":469,"meta":178,"style":178},[99,64047,64048,64056,64064],{"__ignoreMap":178},[220,64049,64050,64052,64054],{"class":222,"line":223},[220,64051,343],{"class":264},[220,64053,347],{"class":420},[220,64055,359],{"class":264},[220,64057,64058,64060,64062],{"class":222,"line":179},[220,64059,364],{"class":264},[220,64061,63939],{"class":420},[220,64063,386],{"class":264},[220,64065,64066,64068,64070],{"class":222,"line":389},[220,64067,402],{"class":264},[220,64069,347],{"class":420},[220,64071,359],{"class":264},[212,64073,64075],{"className":251,"code":64074,"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,64076,64077,64087,64091,64105,64109,64118,64122],{"__ignoreMap":178},[220,64078,64079,64081,64083,64085],{"class":222,"line":223},[220,64080,261],{"class":260},[220,64082,11507],{"class":264},[220,64084,268],{"class":260},[220,64086,4007],{"class":230},[220,64088,64089],{"class":222,"line":179},[220,64090,647],{"emptyLinePlaceholder":194},[220,64092,64093,64095,64097,64099,64101,64103],{"class":222,"line":389},[220,64094,1735],{"class":260},[220,64096,1738],{"class":420},[220,64098,1741],{"class":260},[220,64100,1744],{"class":260},[220,64102,1747],{"class":226},[220,64104,1750],{"class":264},[220,64106,64107],{"class":222,"line":399},[220,64108,1765],{"class":264},[220,64110,64111,64113,64116],{"class":222,"line":644},[220,64112,1770],{"class":264},[220,64114,64115],{"class":230},"'Plastic'",[220,64117,2465],{"class":264},[220,64119,64120],{"class":222,"line":650},[220,64121,1787],{"class":264},[220,64123,64124],{"class":222,"line":656},[220,64125,1792],{"class":264},[1504,64127,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":64129},[64130,64131],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fplastic",{"title":63939,"description":63947},"docs\u002Fcomponents\u002FPlastic","23pGkWDasbMd7wJPiI7MUu_FDQWuDd2ny3yEztKrHQ4",{"id":64138,"title":64139,"body":64140,"category":33391,"componentType":25878,"description":64147,"extension":191,"meta":64510,"navigation":194,"path":64511,"requiresChild":194,"seo":64512,"stem":64513,"__hash__":64514},"components\u002Fdocs\u002Fcomponents\u002FPolarCoordinates.md","PolarCoordinates",{"type":8,"value":64141,"toc":64506},[64142,64145,64148,64150,64152,64155,64157,64504],[11,64143,64139],{"id":64144},"polarcoordinates",[15,64146,64147],{},"Convert rectangular coordinates to polar space",[31906,64149],{"component":64139},[23,64151,31910],{"id":26528},[31912,64153],{":props":64154},"[{\"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,64156,31918],{"id":31917},[246,64158,64159,64223,64294,64360,64430],{":tabs":1557},[212,64160,64162],{"className":334,"code":64161,"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,64163,64164,64172,64179,64187,64195,64199,64207,64215],{"__ignoreMap":178},[220,64165,64166,64168,64170],{"class":222,"line":223},[220,64167,343],{"class":264},[220,64169,347],{"class":346},[220,64171,359],{"class":264},[220,64173,64174,64176],{"class":222,"line":179},[220,64175,364],{"class":264},[220,64177,64178],{"class":346},"PolarCoordinates\n",[220,64180,64181,64183,64185],{"class":222,"line":389},[220,64182,17400],{"class":226},[220,64184,353],{"class":264},[220,64186,36620],{"class":230},[220,64188,64189,64191,64193],{"class":222,"line":399},[220,64190,20366],{"class":226},[220,64192,353],{"class":264},[220,64194,36620],{"class":230},[220,64196,64197],{"class":222,"line":644},[220,64198,31954],{"class":264},[220,64200,64201,64203,64205],{"class":222,"line":650},[220,64202,2550],{"class":264},[220,64204,2553],{"class":346},[220,64206,386],{"class":264},[220,64208,64209,64211,64213],{"class":222,"line":656},[220,64210,2567],{"class":264},[220,64212,64139],{"class":346},[220,64214,359],{"class":264},[220,64216,64217,64219,64221],{"class":222,"line":673},[220,64218,402],{"class":264},[220,64220,347],{"class":346},[220,64222,359],{"class":264},[212,64224,64226],{"className":409,"code":64225,"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,64227,64228,64236,64242,64254,64266,64270,64278,64286],{"__ignoreMap":178},[220,64229,64230,64232,64234],{"class":222,"line":223},[220,64231,343],{"class":264},[220,64233,347],{"class":420},[220,64235,359],{"class":264},[220,64237,64238,64240],{"class":222,"line":179},[220,64239,364],{"class":264},[220,64241,64178],{"class":420},[220,64243,64244,64246,64248,64250,64252],{"class":222,"line":389},[220,64245,9640],{"class":226},[220,64247,353],{"class":260},[220,64249,743],{"class":264},[220,64251,8672],{"class":420},[220,64253,749],{"class":264},[220,64255,64256,64258,64260,64262,64264],{"class":222,"line":399},[220,64257,20477],{"class":226},[220,64259,353],{"class":260},[220,64261,743],{"class":264},[220,64263,8672],{"class":420},[220,64265,749],{"class":264},[220,64267,64268],{"class":222,"line":644},[220,64269,31954],{"class":264},[220,64271,64272,64274,64276],{"class":222,"line":650},[220,64273,2550],{"class":264},[220,64275,2553],{"class":420},[220,64277,386],{"class":264},[220,64279,64280,64282,64284],{"class":222,"line":656},[220,64281,2567],{"class":264},[220,64283,64139],{"class":420},[220,64285,359],{"class":264},[220,64287,64288,64290,64292],{"class":222,"line":673},[220,64289,402],{"class":264},[220,64291,347],{"class":420},[220,64293,359],{"class":264},[212,64295,64296],{"className":2844,"code":64225,"language":2846,"meta":178,"style":178},[99,64297,64298,64306,64312,64322,64332,64336,64344,64352],{"__ignoreMap":178},[220,64299,64300,64302,64304],{"class":222,"line":223},[220,64301,343],{"class":264},[220,64303,347],{"class":420},[220,64305,359],{"class":264},[220,64307,64308,64310],{"class":222,"line":179},[220,64309,364],{"class":264},[220,64311,64178],{"class":420},[220,64313,64314,64316,64318,64320],{"class":222,"line":389},[220,64315,9640],{"class":226},[220,64317,29866],{"class":264},[220,64319,8672],{"class":420},[220,64321,749],{"class":264},[220,64323,64324,64326,64328,64330],{"class":222,"line":399},[220,64325,20477],{"class":226},[220,64327,29866],{"class":264},[220,64329,8672],{"class":420},[220,64331,749],{"class":264},[220,64333,64334],{"class":222,"line":644},[220,64335,31954],{"class":264},[220,64337,64338,64340,64342],{"class":222,"line":650},[220,64339,2550],{"class":264},[220,64341,2553],{"class":420},[220,64343,386],{"class":264},[220,64345,64346,64348,64350],{"class":222,"line":656},[220,64347,2567],{"class":264},[220,64349,64139],{"class":420},[220,64351,359],{"class":264},[220,64353,64354,64356,64358],{"class":222,"line":673},[220,64355,402],{"class":264},[220,64357,347],{"class":420},[220,64359,359],{"class":264},[212,64361,64362],{"className":468,"code":64225,"language":469,"meta":178,"style":178},[99,64363,64364,64372,64378,64390,64402,64406,64414,64422],{"__ignoreMap":178},[220,64365,64366,64368,64370],{"class":222,"line":223},[220,64367,343],{"class":264},[220,64369,347],{"class":420},[220,64371,359],{"class":264},[220,64373,64374,64376],{"class":222,"line":179},[220,64375,364],{"class":264},[220,64377,64178],{"class":420},[220,64379,64380,64382,64384,64386,64388],{"class":222,"line":389},[220,64381,9640],{"class":226},[220,64383,353],{"class":260},[220,64385,743],{"class":264},[220,64387,8672],{"class":420},[220,64389,749],{"class":264},[220,64391,64392,64394,64396,64398,64400],{"class":222,"line":399},[220,64393,20477],{"class":226},[220,64395,353],{"class":260},[220,64397,743],{"class":264},[220,64399,8672],{"class":420},[220,64401,749],{"class":264},[220,64403,64404],{"class":222,"line":644},[220,64405,31954],{"class":264},[220,64407,64408,64410,64412],{"class":222,"line":650},[220,64409,2550],{"class":264},[220,64411,2553],{"class":420},[220,64413,386],{"class":264},[220,64415,64416,64418,64420],{"class":222,"line":656},[220,64417,2567],{"class":264},[220,64419,64139],{"class":420},[220,64421,359],{"class":264},[220,64423,64424,64426,64428],{"class":222,"line":673},[220,64425,402],{"class":264},[220,64427,347],{"class":420},[220,64429,359],{"class":264},[212,64431,64433],{"className":251,"code":64432,"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,64434,64435,64445,64449,64463,64467,64484,64492,64496,64500],{"__ignoreMap":178},[220,64436,64437,64439,64441,64443],{"class":222,"line":223},[220,64438,261],{"class":260},[220,64440,11507],{"class":264},[220,64442,268],{"class":260},[220,64444,4007],{"class":230},[220,64446,64447],{"class":222,"line":179},[220,64448,647],{"emptyLinePlaceholder":194},[220,64450,64451,64453,64455,64457,64459,64461],{"class":222,"line":389},[220,64452,1735],{"class":260},[220,64454,1738],{"class":420},[220,64456,1741],{"class":260},[220,64458,1744],{"class":260},[220,64460,1747],{"class":226},[220,64462,1750],{"class":264},[220,64464,64465],{"class":222,"line":399},[220,64466,1765],{"class":264},[220,64468,64469,64471,64474,64476,64478,64480,64482],{"class":222,"line":644},[220,64470,1770],{"class":264},[220,64472,64473],{"class":230},"'PolarCoordinates'",[220,64475,7536],{"class":264},[220,64477,8672],{"class":420},[220,64479,44998],{"class":264},[220,64481,8672],{"class":420},[220,64483,7541],{"class":264},[220,64485,64486,64488,64490],{"class":222,"line":650},[220,64487,7009],{"class":264},[220,64489,3206],{"class":230},[220,64491,2465],{"class":264},[220,64493,64494],{"class":222,"line":656},[220,64495,7026],{"class":264},[220,64497,64498],{"class":222,"line":673},[220,64499,1787],{"class":264},[220,64501,64502],{"class":222,"line":682},[220,64503,1792],{"class":264},[1504,64505,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64507},[64508,64509],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpolarcoordinates",{"title":64139,"description":64147},"docs\u002Fcomponents\u002FPolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":64516,"title":64517,"body":64518,"category":15903,"componentType":25872,"description":64525,"extension":191,"meta":64802,"navigation":194,"path":64803,"requiresChild":32525,"seo":64804,"stem":64805,"__hash__":64806},"components\u002Fdocs\u002Fcomponents\u002FPolygon.md","Polygon",{"type":8,"value":64519,"toc":64798},[64520,64523,64526,64528,64530,64533,64535,64796],[11,64521,64517],{"id":64522},"polygon",[15,64524,64525],{},"Regular polygon with adjustable sides and corner rounding",[31906,64527],{"component":64517},[23,64529,31910],{"id":26528},[31912,64531],{":props":64532},"[{\"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,64534,31918],{"id":31917},[246,64536,64537,64585,64636,64684,64734],{":tabs":1557},[212,64538,64540],{"className":334,"code":64539,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,64541,64542,64550,64557,64565,64573,64577],{"__ignoreMap":178},[220,64543,64544,64546,64548],{"class":222,"line":223},[220,64545,343],{"class":264},[220,64547,347],{"class":346},[220,64549,359],{"class":264},[220,64551,64552,64554],{"class":222,"line":179},[220,64553,364],{"class":264},[220,64555,64556],{"class":346},"Polygon\n",[220,64558,64559,64561,64563],{"class":222,"line":389},[220,64560,9630],{"class":226},[220,64562,353],{"class":264},[220,64564,9586],{"class":230},[220,64566,64567,64569,64571],{"class":222,"line":399},[220,64568,17400],{"class":226},[220,64570,353],{"class":264},[220,64572,48143],{"class":230},[220,64574,64575],{"class":222,"line":644},[220,64576,1234],{"class":264},[220,64578,64579,64581,64583],{"class":222,"line":650},[220,64580,402],{"class":264},[220,64582,347],{"class":346},[220,64584,359],{"class":264},[212,64586,64588],{"className":409,"code":64587,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,64589,64590,64598,64604,64612,64624,64628],{"__ignoreMap":178},[220,64591,64592,64594,64596],{"class":222,"line":223},[220,64593,343],{"class":264},[220,64595,347],{"class":420},[220,64597,359],{"class":264},[220,64599,64600,64602],{"class":222,"line":179},[220,64601,364],{"class":264},[220,64603,64556],{"class":420},[220,64605,64606,64608,64610],{"class":222,"line":389},[220,64607,9630],{"class":226},[220,64609,353],{"class":260},[220,64611,9586],{"class":230},[220,64613,64614,64616,64618,64620,64622],{"class":222,"line":399},[220,64615,9640],{"class":226},[220,64617,353],{"class":260},[220,64619,743],{"class":264},[220,64621,8244],{"class":420},[220,64623,749],{"class":264},[220,64625,64626],{"class":222,"line":644},[220,64627,1234],{"class":264},[220,64629,64630,64632,64634],{"class":222,"line":650},[220,64631,402],{"class":264},[220,64633,347],{"class":420},[220,64635,359],{"class":264},[212,64637,64638],{"className":2844,"code":64587,"language":2846,"meta":178,"style":178},[99,64639,64640,64648,64654,64662,64672,64676],{"__ignoreMap":178},[220,64641,64642,64644,64646],{"class":222,"line":223},[220,64643,343],{"class":264},[220,64645,347],{"class":420},[220,64647,359],{"class":264},[220,64649,64650,64652],{"class":222,"line":179},[220,64651,364],{"class":264},[220,64653,64556],{"class":420},[220,64655,64656,64658,64660],{"class":222,"line":389},[220,64657,9630],{"class":226},[220,64659,353],{"class":264},[220,64661,9586],{"class":230},[220,64663,64664,64666,64668,64670],{"class":222,"line":399},[220,64665,9640],{"class":226},[220,64667,29866],{"class":264},[220,64669,8244],{"class":420},[220,64671,749],{"class":264},[220,64673,64674],{"class":222,"line":644},[220,64675,1234],{"class":264},[220,64677,64678,64680,64682],{"class":222,"line":650},[220,64679,402],{"class":264},[220,64681,347],{"class":420},[220,64683,359],{"class":264},[212,64685,64686],{"className":468,"code":64587,"language":469,"meta":178,"style":178},[99,64687,64688,64696,64702,64710,64722,64726],{"__ignoreMap":178},[220,64689,64690,64692,64694],{"class":222,"line":223},[220,64691,343],{"class":264},[220,64693,347],{"class":420},[220,64695,359],{"class":264},[220,64697,64698,64700],{"class":222,"line":179},[220,64699,364],{"class":264},[220,64701,64556],{"class":420},[220,64703,64704,64706,64708],{"class":222,"line":389},[220,64705,9630],{"class":226},[220,64707,353],{"class":260},[220,64709,9586],{"class":230},[220,64711,64712,64714,64716,64718,64720],{"class":222,"line":399},[220,64713,9640],{"class":226},[220,64715,353],{"class":260},[220,64717,743],{"class":264},[220,64719,8244],{"class":420},[220,64721,749],{"class":264},[220,64723,64724],{"class":222,"line":644},[220,64725,1234],{"class":264},[220,64727,64728,64730,64732],{"class":222,"line":650},[220,64729,402],{"class":264},[220,64731,347],{"class":420},[220,64733,359],{"class":264},[212,64735,64737],{"className":251,"code":64736,"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,64738,64739,64749,64753,64767,64771,64788,64792],{"__ignoreMap":178},[220,64740,64741,64743,64745,64747],{"class":222,"line":223},[220,64742,261],{"class":260},[220,64744,11507],{"class":264},[220,64746,268],{"class":260},[220,64748,4007],{"class":230},[220,64750,64751],{"class":222,"line":179},[220,64752,647],{"emptyLinePlaceholder":194},[220,64754,64755,64757,64759,64761,64763,64765],{"class":222,"line":389},[220,64756,1735],{"class":260},[220,64758,1738],{"class":420},[220,64760,1741],{"class":260},[220,64762,1744],{"class":260},[220,64764,1747],{"class":226},[220,64766,1750],{"class":264},[220,64768,64769],{"class":222,"line":399},[220,64770,1765],{"class":264},[220,64772,64773,64775,64778,64780,64782,64784,64786],{"class":222,"line":644},[220,64774,1770],{"class":264},[220,64776,64777],{"class":230},"'Polygon'",[220,64779,1776],{"class":264},[220,64781,10164],{"class":230},[220,64783,6561],{"class":264},[220,64785,8244],{"class":420},[220,64787,1782],{"class":264},[220,64789,64790],{"class":222,"line":650},[220,64791,1787],{"class":264},[220,64793,64794],{"class":222,"line":656},[220,64795,1792],{"class":264},[1504,64797,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":64799},[64800,64801],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fpolygon",{"title":64517,"description":64525},"docs\u002Fcomponents\u002FPolygon","0U-uN2tp30YnjkaecnklvPXKznsNEFqRLkKsB1DY_hQ",{"id":64808,"title":64809,"body":64810,"category":36363,"componentType":25878,"description":64817,"extension":191,"meta":65135,"navigation":194,"path":65136,"requiresChild":194,"seo":65137,"stem":65138,"__hash__":65139},"components\u002Fdocs\u002Fcomponents\u002FPosterize.md","Posterize",{"type":8,"value":64811,"toc":65131},[64812,64815,64818,64820,64822,64825,64827,65129],[11,64813,64809],{"id":64814},"posterize",[15,64816,64817],{},"Reduce color depth to create a poster effect",[31906,64819],{"component":64809},[23,64821,31910],{"id":26528},[31912,64823],{":props":64824},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,64826,31918],{"id":31917},[246,64828,64829,64886,64945,65001,65059],{":tabs":1557},[212,64830,64832],{"className":334,"code":64831,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64833,64834,64842,64849,64858,64862,64870,64878],{"__ignoreMap":178},[220,64835,64836,64838,64840],{"class":222,"line":223},[220,64837,343],{"class":264},[220,64839,347],{"class":346},[220,64841,359],{"class":264},[220,64843,64844,64846],{"class":222,"line":179},[220,64845,364],{"class":264},[220,64847,64848],{"class":346},"Posterize\n",[220,64850,64851,64853,64855],{"class":222,"line":389},[220,64852,20366],{"class":226},[220,64854,353],{"class":264},[220,64856,64857],{"class":230},"\"5\"\n",[220,64859,64860],{"class":222,"line":399},[220,64861,31954],{"class":264},[220,64863,64864,64866,64868],{"class":222,"line":644},[220,64865,2550],{"class":264},[220,64867,2553],{"class":346},[220,64869,386],{"class":264},[220,64871,64872,64874,64876],{"class":222,"line":650},[220,64873,2567],{"class":264},[220,64875,64809],{"class":346},[220,64877,359],{"class":264},[220,64879,64880,64882,64884],{"class":222,"line":656},[220,64881,402],{"class":264},[220,64883,347],{"class":346},[220,64885,359],{"class":264},[212,64887,64889],{"className":409,"code":64888,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle \u002F>\n \u003C\u002FPosterize>\n\u003C\u002FShader>\n",[99,64890,64891,64899,64905,64917,64921,64929,64937],{"__ignoreMap":178},[220,64892,64893,64895,64897],{"class":222,"line":223},[220,64894,343],{"class":264},[220,64896,347],{"class":420},[220,64898,359],{"class":264},[220,64900,64901,64903],{"class":222,"line":179},[220,64902,364],{"class":264},[220,64904,64848],{"class":420},[220,64906,64907,64909,64911,64913,64915],{"class":222,"line":389},[220,64908,20477],{"class":226},[220,64910,353],{"class":260},[220,64912,743],{"class":264},[220,64914,22088],{"class":420},[220,64916,749],{"class":264},[220,64918,64919],{"class":222,"line":399},[220,64920,31954],{"class":264},[220,64922,64923,64925,64927],{"class":222,"line":644},[220,64924,2550],{"class":264},[220,64926,2553],{"class":420},[220,64928,386],{"class":264},[220,64930,64931,64933,64935],{"class":222,"line":650},[220,64932,2567],{"class":264},[220,64934,64809],{"class":420},[220,64936,359],{"class":264},[220,64938,64939,64941,64943],{"class":222,"line":656},[220,64940,402],{"class":264},[220,64942,347],{"class":420},[220,64944,359],{"class":264},[212,64946,64947],{"className":2844,"code":64888,"language":2846,"meta":178,"style":178},[99,64948,64949,64957,64963,64973,64977,64985,64993],{"__ignoreMap":178},[220,64950,64951,64953,64955],{"class":222,"line":223},[220,64952,343],{"class":264},[220,64954,347],{"class":420},[220,64956,359],{"class":264},[220,64958,64959,64961],{"class":222,"line":179},[220,64960,364],{"class":264},[220,64962,64848],{"class":420},[220,64964,64965,64967,64969,64971],{"class":222,"line":389},[220,64966,20477],{"class":226},[220,64968,29866],{"class":264},[220,64970,22088],{"class":420},[220,64972,749],{"class":264},[220,64974,64975],{"class":222,"line":399},[220,64976,31954],{"class":264},[220,64978,64979,64981,64983],{"class":222,"line":644},[220,64980,2550],{"class":264},[220,64982,2553],{"class":420},[220,64984,386],{"class":264},[220,64986,64987,64989,64991],{"class":222,"line":650},[220,64988,2567],{"class":264},[220,64990,64809],{"class":420},[220,64992,359],{"class":264},[220,64994,64995,64997,64999],{"class":222,"line":656},[220,64996,402],{"class":264},[220,64998,347],{"class":420},[220,65000,359],{"class":264},[212,65002,65003],{"className":468,"code":64888,"language":469,"meta":178,"style":178},[99,65004,65005,65013,65019,65031,65035,65043,65051],{"__ignoreMap":178},[220,65006,65007,65009,65011],{"class":222,"line":223},[220,65008,343],{"class":264},[220,65010,347],{"class":420},[220,65012,359],{"class":264},[220,65014,65015,65017],{"class":222,"line":179},[220,65016,364],{"class":264},[220,65018,64848],{"class":420},[220,65020,65021,65023,65025,65027,65029],{"class":222,"line":389},[220,65022,20477],{"class":226},[220,65024,353],{"class":260},[220,65026,743],{"class":264},[220,65028,22088],{"class":420},[220,65030,749],{"class":264},[220,65032,65033],{"class":222,"line":399},[220,65034,31954],{"class":264},[220,65036,65037,65039,65041],{"class":222,"line":644},[220,65038,2550],{"class":264},[220,65040,2553],{"class":420},[220,65042,386],{"class":264},[220,65044,65045,65047,65049],{"class":222,"line":650},[220,65046,2567],{"class":264},[220,65048,64809],{"class":420},[220,65050,359],{"class":264},[220,65052,65053,65055,65057],{"class":222,"line":656},[220,65054,402],{"class":264},[220,65056,347],{"class":420},[220,65058,359],{"class":264},[212,65060,65062],{"className":251,"code":65061,"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,65063,65064,65074,65078,65092,65096,65109,65117,65121,65125],{"__ignoreMap":178},[220,65065,65066,65068,65070,65072],{"class":222,"line":223},[220,65067,261],{"class":260},[220,65069,11507],{"class":264},[220,65071,268],{"class":260},[220,65073,4007],{"class":230},[220,65075,65076],{"class":222,"line":179},[220,65077,647],{"emptyLinePlaceholder":194},[220,65079,65080,65082,65084,65086,65088,65090],{"class":222,"line":389},[220,65081,1735],{"class":260},[220,65083,1738],{"class":420},[220,65085,1741],{"class":260},[220,65087,1744],{"class":260},[220,65089,1747],{"class":226},[220,65091,1750],{"class":264},[220,65093,65094],{"class":222,"line":399},[220,65095,1765],{"class":264},[220,65097,65098,65100,65103,65105,65107],{"class":222,"line":644},[220,65099,1770],{"class":264},[220,65101,65102],{"class":230},"'Posterize'",[220,65104,32198],{"class":264},[220,65106,22088],{"class":420},[220,65108,7541],{"class":264},[220,65110,65111,65113,65115],{"class":222,"line":650},[220,65112,7009],{"class":264},[220,65114,3206],{"class":230},[220,65116,2465],{"class":264},[220,65118,65119],{"class":222,"line":656},[220,65120,7026],{"class":264},[220,65122,65123],{"class":222,"line":673},[220,65124,1787],{"class":264},[220,65126,65127],{"class":222,"line":682},[220,65128,1792],{"class":264},[1504,65130,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65132},[65133,65134],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fposterize",{"title":64809,"description":64817},"docs\u002Fcomponents\u002FPosterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":65141,"title":65142,"body":65143,"category":33058,"componentType":25872,"description":65150,"extension":191,"meta":65393,"navigation":194,"path":65394,"requiresChild":32525,"seo":65395,"stem":65396,"__hash__":65397},"components\u002Fdocs\u002Fcomponents\u002FPrism.md","Prism",{"type":8,"value":65144,"toc":65389},[65145,65148,65151,65153,65155,65158,65160,65387],[11,65146,65142],{"id":65147},"prism",[15,65149,65150],{},"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.",[31906,65152],{"component":65142},[23,65154,31910],{"id":26528},[31912,65156],{":props":65157},"[{\"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,65159,31918],{"id":31917},[246,65161,65162,65203,65247,65287,65329],{":tabs":1557},[212,65163,65165],{"className":334,"code":65164,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n :intensity=\"1.6\"\n \u002F>\n\u003C\u002FShader>\n",[99,65166,65167,65175,65182,65191,65195],{"__ignoreMap":178},[220,65168,65169,65171,65173],{"class":222,"line":223},[220,65170,343],{"class":264},[220,65172,347],{"class":346},[220,65174,359],{"class":264},[220,65176,65177,65179],{"class":222,"line":179},[220,65178,364],{"class":264},[220,65180,65181],{"class":346},"Prism\n",[220,65183,65184,65186,65188],{"class":222,"line":389},[220,65185,20366],{"class":226},[220,65187,353],{"class":264},[220,65189,65190],{"class":230},"\"1.6\"\n",[220,65192,65193],{"class":222,"line":399},[220,65194,1234],{"class":264},[220,65196,65197,65199,65201],{"class":222,"line":644},[220,65198,402],{"class":264},[220,65200,347],{"class":346},[220,65202,359],{"class":264},[212,65204,65206],{"className":409,"code":65205,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CPrism\n intensity={1.6}\n \u002F>\n\u003C\u002FShader>\n",[99,65207,65208,65216,65222,65235,65239],{"__ignoreMap":178},[220,65209,65210,65212,65214],{"class":222,"line":223},[220,65211,343],{"class":264},[220,65213,347],{"class":420},[220,65215,359],{"class":264},[220,65217,65218,65220],{"class":222,"line":179},[220,65219,364],{"class":264},[220,65221,65181],{"class":420},[220,65223,65224,65226,65228,65230,65233],{"class":222,"line":389},[220,65225,20477],{"class":226},[220,65227,353],{"class":260},[220,65229,743],{"class":264},[220,65231,65232],{"class":420},"1.6",[220,65234,749],{"class":264},[220,65236,65237],{"class":222,"line":399},[220,65238,1234],{"class":264},[220,65240,65241,65243,65245],{"class":222,"line":644},[220,65242,402],{"class":264},[220,65244,347],{"class":420},[220,65246,359],{"class":264},[212,65248,65249],{"className":2844,"code":65205,"language":2846,"meta":178,"style":178},[99,65250,65251,65259,65265,65275,65279],{"__ignoreMap":178},[220,65252,65253,65255,65257],{"class":222,"line":223},[220,65254,343],{"class":264},[220,65256,347],{"class":420},[220,65258,359],{"class":264},[220,65260,65261,65263],{"class":222,"line":179},[220,65262,364],{"class":264},[220,65264,65181],{"class":420},[220,65266,65267,65269,65271,65273],{"class":222,"line":389},[220,65268,20477],{"class":226},[220,65270,29866],{"class":264},[220,65272,65232],{"class":420},[220,65274,749],{"class":264},[220,65276,65277],{"class":222,"line":399},[220,65278,1234],{"class":264},[220,65280,65281,65283,65285],{"class":222,"line":644},[220,65282,402],{"class":264},[220,65284,347],{"class":420},[220,65286,359],{"class":264},[212,65288,65289],{"className":468,"code":65205,"language":469,"meta":178,"style":178},[99,65290,65291,65299,65305,65317,65321],{"__ignoreMap":178},[220,65292,65293,65295,65297],{"class":222,"line":223},[220,65294,343],{"class":264},[220,65296,347],{"class":420},[220,65298,359],{"class":264},[220,65300,65301,65303],{"class":222,"line":179},[220,65302,364],{"class":264},[220,65304,65181],{"class":420},[220,65306,65307,65309,65311,65313,65315],{"class":222,"line":389},[220,65308,20477],{"class":226},[220,65310,353],{"class":260},[220,65312,743],{"class":264},[220,65314,65232],{"class":420},[220,65316,749],{"class":264},[220,65318,65319],{"class":222,"line":399},[220,65320,1234],{"class":264},[220,65322,65323,65325,65327],{"class":222,"line":644},[220,65324,402],{"class":264},[220,65326,347],{"class":420},[220,65328,359],{"class":264},[212,65330,65332],{"className":251,"code":65331,"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,65333,65334,65344,65348,65362,65366,65379,65383],{"__ignoreMap":178},[220,65335,65336,65338,65340,65342],{"class":222,"line":223},[220,65337,261],{"class":260},[220,65339,11507],{"class":264},[220,65341,268],{"class":260},[220,65343,4007],{"class":230},[220,65345,65346],{"class":222,"line":179},[220,65347,647],{"emptyLinePlaceholder":194},[220,65349,65350,65352,65354,65356,65358,65360],{"class":222,"line":389},[220,65351,1735],{"class":260},[220,65353,1738],{"class":420},[220,65355,1741],{"class":260},[220,65357,1744],{"class":260},[220,65359,1747],{"class":226},[220,65361,1750],{"class":264},[220,65363,65364],{"class":222,"line":399},[220,65365,1765],{"class":264},[220,65367,65368,65370,65373,65375,65377],{"class":222,"line":644},[220,65369,1770],{"class":264},[220,65371,65372],{"class":230},"'Prism'",[220,65374,32198],{"class":264},[220,65376,65232],{"class":420},[220,65378,1782],{"class":264},[220,65380,65381],{"class":222,"line":650},[220,65382,1787],{"class":264},[220,65384,65385],{"class":222,"line":656},[220,65386,1792],{"class":264},[1504,65388,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65390},[65391,65392],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fprism",{"title":65142,"description":65150},"docs\u002Fcomponents\u002FPrism","mShoncLtKoZigIPcgy6vMD-IEIwHSnsUtbRA0InUc1w",{"id":65399,"title":65400,"body":65401,"category":32229,"componentType":25878,"description":65408,"extension":191,"meta":65725,"navigation":194,"path":65726,"requiresChild":194,"seo":65727,"stem":65728,"__hash__":65729},"components\u002Fdocs\u002Fcomponents\u002FProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":65402,"toc":65721},[65403,65406,65409,65411,65413,65416,65418,65719],[11,65404,65400],{"id":65405},"progressiveblur",[15,65407,65408],{},"Blur that increases progressively in one direction",[31906,65410],{"component":65400},[23,65412,31910],{"id":26528},[31912,65414],{":props":65415},"[{\"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,65417,31918],{"id":31917},[246,65419,65420,65476,65535,65591,65649],{":tabs":1557},[212,65421,65423],{"className":334,"code":65422,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65424,65425,65433,65440,65448,65452,65460,65468],{"__ignoreMap":178},[220,65426,65427,65429,65431],{"class":222,"line":223},[220,65428,343],{"class":264},[220,65430,347],{"class":346},[220,65432,359],{"class":264},[220,65434,65435,65437],{"class":222,"line":179},[220,65436,364],{"class":264},[220,65438,65439],{"class":346},"ProgressiveBlur\n",[220,65441,65442,65444,65446],{"class":222,"line":389},[220,65443,20366],{"class":226},[220,65445,353],{"class":264},[220,65447,35075],{"class":230},[220,65449,65450],{"class":222,"line":399},[220,65451,31954],{"class":264},[220,65453,65454,65456,65458],{"class":222,"line":644},[220,65455,2550],{"class":264},[220,65457,2553],{"class":346},[220,65459,386],{"class":264},[220,65461,65462,65464,65466],{"class":222,"line":650},[220,65463,2567],{"class":264},[220,65465,65400],{"class":346},[220,65467,359],{"class":264},[220,65469,65470,65472,65474],{"class":222,"line":656},[220,65471,402],{"class":264},[220,65473,347],{"class":346},[220,65475,359],{"class":264},[212,65477,65479],{"className":409,"code":65478,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FProgressiveBlur>\n\u003C\u002FShader>\n",[99,65480,65481,65489,65495,65507,65511,65519,65527],{"__ignoreMap":178},[220,65482,65483,65485,65487],{"class":222,"line":223},[220,65484,343],{"class":264},[220,65486,347],{"class":420},[220,65488,359],{"class":264},[220,65490,65491,65493],{"class":222,"line":179},[220,65492,364],{"class":264},[220,65494,65439],{"class":420},[220,65496,65497,65499,65501,65503,65505],{"class":222,"line":389},[220,65498,20477],{"class":226},[220,65500,353],{"class":260},[220,65502,743],{"class":264},[220,65504,35133],{"class":420},[220,65506,749],{"class":264},[220,65508,65509],{"class":222,"line":399},[220,65510,31954],{"class":264},[220,65512,65513,65515,65517],{"class":222,"line":644},[220,65514,2550],{"class":264},[220,65516,2553],{"class":420},[220,65518,386],{"class":264},[220,65520,65521,65523,65525],{"class":222,"line":650},[220,65522,2567],{"class":264},[220,65524,65400],{"class":420},[220,65526,359],{"class":264},[220,65528,65529,65531,65533],{"class":222,"line":656},[220,65530,402],{"class":264},[220,65532,347],{"class":420},[220,65534,359],{"class":264},[212,65536,65537],{"className":2844,"code":65478,"language":2846,"meta":178,"style":178},[99,65538,65539,65547,65553,65563,65567,65575,65583],{"__ignoreMap":178},[220,65540,65541,65543,65545],{"class":222,"line":223},[220,65542,343],{"class":264},[220,65544,347],{"class":420},[220,65546,359],{"class":264},[220,65548,65549,65551],{"class":222,"line":179},[220,65550,364],{"class":264},[220,65552,65439],{"class":420},[220,65554,65555,65557,65559,65561],{"class":222,"line":389},[220,65556,20477],{"class":226},[220,65558,29866],{"class":264},[220,65560,35133],{"class":420},[220,65562,749],{"class":264},[220,65564,65565],{"class":222,"line":399},[220,65566,31954],{"class":264},[220,65568,65569,65571,65573],{"class":222,"line":644},[220,65570,2550],{"class":264},[220,65572,2553],{"class":420},[220,65574,386],{"class":264},[220,65576,65577,65579,65581],{"class":222,"line":650},[220,65578,2567],{"class":264},[220,65580,65400],{"class":420},[220,65582,359],{"class":264},[220,65584,65585,65587,65589],{"class":222,"line":656},[220,65586,402],{"class":264},[220,65588,347],{"class":420},[220,65590,359],{"class":264},[212,65592,65593],{"className":468,"code":65478,"language":469,"meta":178,"style":178},[99,65594,65595,65603,65609,65621,65625,65633,65641],{"__ignoreMap":178},[220,65596,65597,65599,65601],{"class":222,"line":223},[220,65598,343],{"class":264},[220,65600,347],{"class":420},[220,65602,359],{"class":264},[220,65604,65605,65607],{"class":222,"line":179},[220,65606,364],{"class":264},[220,65608,65439],{"class":420},[220,65610,65611,65613,65615,65617,65619],{"class":222,"line":389},[220,65612,20477],{"class":226},[220,65614,353],{"class":260},[220,65616,743],{"class":264},[220,65618,35133],{"class":420},[220,65620,749],{"class":264},[220,65622,65623],{"class":222,"line":399},[220,65624,31954],{"class":264},[220,65626,65627,65629,65631],{"class":222,"line":644},[220,65628,2550],{"class":264},[220,65630,2553],{"class":420},[220,65632,386],{"class":264},[220,65634,65635,65637,65639],{"class":222,"line":650},[220,65636,2567],{"class":264},[220,65638,65400],{"class":420},[220,65640,359],{"class":264},[220,65642,65643,65645,65647],{"class":222,"line":656},[220,65644,402],{"class":264},[220,65646,347],{"class":420},[220,65648,359],{"class":264},[212,65650,65652],{"className":251,"code":65651,"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,65653,65654,65664,65668,65682,65686,65699,65707,65711,65715],{"__ignoreMap":178},[220,65655,65656,65658,65660,65662],{"class":222,"line":223},[220,65657,261],{"class":260},[220,65659,11507],{"class":264},[220,65661,268],{"class":260},[220,65663,4007],{"class":230},[220,65665,65666],{"class":222,"line":179},[220,65667,647],{"emptyLinePlaceholder":194},[220,65669,65670,65672,65674,65676,65678,65680],{"class":222,"line":389},[220,65671,1735],{"class":260},[220,65673,1738],{"class":420},[220,65675,1741],{"class":260},[220,65677,1744],{"class":260},[220,65679,1747],{"class":226},[220,65681,1750],{"class":264},[220,65683,65684],{"class":222,"line":399},[220,65685,1765],{"class":264},[220,65687,65688,65690,65693,65695,65697],{"class":222,"line":644},[220,65689,1770],{"class":264},[220,65691,65692],{"class":230},"'ProgressiveBlur'",[220,65694,32198],{"class":264},[220,65696,35133],{"class":420},[220,65698,7541],{"class":264},[220,65700,65701,65703,65705],{"class":222,"line":650},[220,65702,7009],{"class":264},[220,65704,3206],{"class":230},[220,65706,2465],{"class":264},[220,65708,65709],{"class":222,"line":656},[220,65710,7026],{"class":264},[220,65712,65713],{"class":222,"line":673},[220,65714,1787],{"class":264},[220,65716,65717],{"class":222,"line":682},[220,65718,1792],{"class":264},[1504,65720,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65722},[65723,65724],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fprogressiveblur",{"title":65400,"description":65408},"docs\u002Fcomponents\u002FProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":65731,"title":65732,"body":65733,"category":33058,"componentType":25872,"description":65740,"extension":191,"meta":65981,"navigation":194,"path":65982,"requiresChild":32525,"seo":65983,"stem":65984,"__hash__":65985},"components\u002Fdocs\u002Fcomponents\u002FRadialGradient.md","RadialGradient",{"type":8,"value":65734,"toc":65977},[65735,65738,65741,65743,65745,65748,65750,65975],[11,65736,65732],{"id":65737},"radialgradient",[15,65739,65740],{},"Radial gradient radiating from a center point",[31906,65742],{"component":65732},[23,65744,31910],{"id":26528},[31912,65746],{":props":65747},"[{\"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,65749,31918],{"id":31917},[246,65751,65752,65792,65835,65875,65917],{":tabs":1557},[212,65753,65755],{"className":334,"code":65754,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,65756,65757,65765,65772,65780,65784],{"__ignoreMap":178},[220,65758,65759,65761,65763],{"class":222,"line":223},[220,65760,343],{"class":264},[220,65762,347],{"class":346},[220,65764,359],{"class":264},[220,65766,65767,65769],{"class":222,"line":179},[220,65768,364],{"class":264},[220,65770,65771],{"class":346},"RadialGradient\n",[220,65773,65774,65776,65778],{"class":222,"line":389},[220,65775,17400],{"class":226},[220,65777,353],{"class":264},[220,65779,36620],{"class":230},[220,65781,65782],{"class":222,"line":399},[220,65783,1234],{"class":264},[220,65785,65786,65788,65790],{"class":222,"line":644},[220,65787,402],{"class":264},[220,65789,347],{"class":346},[220,65791,359],{"class":264},[212,65793,65795],{"className":409,"code":65794,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n \u002F>\n\u003C\u002FShader>\n",[99,65796,65797,65805,65811,65823,65827],{"__ignoreMap":178},[220,65798,65799,65801,65803],{"class":222,"line":223},[220,65800,343],{"class":264},[220,65802,347],{"class":420},[220,65804,359],{"class":264},[220,65806,65807,65809],{"class":222,"line":179},[220,65808,364],{"class":264},[220,65810,65771],{"class":420},[220,65812,65813,65815,65817,65819,65821],{"class":222,"line":389},[220,65814,9640],{"class":226},[220,65816,353],{"class":260},[220,65818,743],{"class":264},[220,65820,8672],{"class":420},[220,65822,749],{"class":264},[220,65824,65825],{"class":222,"line":399},[220,65826,1234],{"class":264},[220,65828,65829,65831,65833],{"class":222,"line":644},[220,65830,402],{"class":264},[220,65832,347],{"class":420},[220,65834,359],{"class":264},[212,65836,65837],{"className":2844,"code":65794,"language":2846,"meta":178,"style":178},[99,65838,65839,65847,65853,65863,65867],{"__ignoreMap":178},[220,65840,65841,65843,65845],{"class":222,"line":223},[220,65842,343],{"class":264},[220,65844,347],{"class":420},[220,65846,359],{"class":264},[220,65848,65849,65851],{"class":222,"line":179},[220,65850,364],{"class":264},[220,65852,65771],{"class":420},[220,65854,65855,65857,65859,65861],{"class":222,"line":389},[220,65856,9640],{"class":226},[220,65858,29866],{"class":264},[220,65860,8672],{"class":420},[220,65862,749],{"class":264},[220,65864,65865],{"class":222,"line":399},[220,65866,1234],{"class":264},[220,65868,65869,65871,65873],{"class":222,"line":644},[220,65870,402],{"class":264},[220,65872,347],{"class":420},[220,65874,359],{"class":264},[212,65876,65877],{"className":468,"code":65794,"language":469,"meta":178,"style":178},[99,65878,65879,65887,65893,65905,65909],{"__ignoreMap":178},[220,65880,65881,65883,65885],{"class":222,"line":223},[220,65882,343],{"class":264},[220,65884,347],{"class":420},[220,65886,359],{"class":264},[220,65888,65889,65891],{"class":222,"line":179},[220,65890,364],{"class":264},[220,65892,65771],{"class":420},[220,65894,65895,65897,65899,65901,65903],{"class":222,"line":389},[220,65896,9640],{"class":226},[220,65898,353],{"class":260},[220,65900,743],{"class":264},[220,65902,8672],{"class":420},[220,65904,749],{"class":264},[220,65906,65907],{"class":222,"line":399},[220,65908,1234],{"class":264},[220,65910,65911,65913,65915],{"class":222,"line":644},[220,65912,402],{"class":264},[220,65914,347],{"class":420},[220,65916,359],{"class":264},[212,65918,65920],{"className":251,"code":65919,"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,65921,65922,65932,65936,65950,65954,65967,65971],{"__ignoreMap":178},[220,65923,65924,65926,65928,65930],{"class":222,"line":223},[220,65925,261],{"class":260},[220,65927,11507],{"class":264},[220,65929,268],{"class":260},[220,65931,4007],{"class":230},[220,65933,65934],{"class":222,"line":179},[220,65935,647],{"emptyLinePlaceholder":194},[220,65937,65938,65940,65942,65944,65946,65948],{"class":222,"line":389},[220,65939,1735],{"class":260},[220,65941,1738],{"class":420},[220,65943,1741],{"class":260},[220,65945,1744],{"class":260},[220,65947,1747],{"class":226},[220,65949,1750],{"class":264},[220,65951,65952],{"class":222,"line":399},[220,65953,1765],{"class":264},[220,65955,65956,65958,65961,65963,65965],{"class":222,"line":644},[220,65957,1770],{"class":264},[220,65959,65960],{"class":230},"'RadialGradient'",[220,65962,7536],{"class":264},[220,65964,8672],{"class":420},[220,65966,1782],{"class":264},[220,65968,65969],{"class":222,"line":650},[220,65970,1787],{"class":264},[220,65972,65973],{"class":222,"line":656},[220,65974,1792],{"class":264},[1504,65976,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":65978},[65979,65980],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fradialgradient",{"title":65732,"description":65740},"docs\u002Fcomponents\u002FRadialGradient","baeVwiMf6Bkp4hFfrNP2LGHgjpcH0Bfjgn6YzAUYhOE",{"id":65987,"title":65988,"body":65989,"category":33668,"componentType":25878,"description":65996,"extension":191,"meta":66257,"navigation":194,"path":66258,"requiresChild":194,"seo":66259,"stem":66260,"__hash__":66261},"components\u002Fdocs\u002Fcomponents\u002FRadialWipe.md","RadialWipe",{"type":8,"value":65990,"toc":66253},[65991,65994,65997,65999,66001,66004,66006,66251],[11,65992,65988],{"id":65993},"radialwipe",[15,65995,65996],{},"Sweep the content away in a clock-hand arc around a center point",[31906,65998],{"component":65988},[23,66000,31910],{"id":26528},[31912,66002],{":props":66003},"[{\"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,66005,31918],{"id":31917},[246,66007,66008,66053,66097,66141,66185],{":tabs":1557},[212,66009,66011],{"className":334,"code":66010,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRadialWipe>\n \u003CCircle \u002F>\n \u003C\u002FRadialWipe>\n\u003C\u002FShader>\n",[99,66012,66013,66021,66029,66037,66045],{"__ignoreMap":178},[220,66014,66015,66017,66019],{"class":222,"line":223},[220,66016,343],{"class":264},[220,66018,347],{"class":346},[220,66020,359],{"class":264},[220,66022,66023,66025,66027],{"class":222,"line":179},[220,66024,364],{"class":264},[220,66026,65988],{"class":346},[220,66028,359],{"class":264},[220,66030,66031,66033,66035],{"class":222,"line":389},[220,66032,2550],{"class":264},[220,66034,2553],{"class":346},[220,66036,386],{"class":264},[220,66038,66039,66041,66043],{"class":222,"line":399},[220,66040,2567],{"class":264},[220,66042,65988],{"class":346},[220,66044,359],{"class":264},[220,66046,66047,66049,66051],{"class":222,"line":644},[220,66048,402],{"class":264},[220,66050,347],{"class":346},[220,66052,359],{"class":264},[212,66054,66055],{"className":409,"code":66010,"language":411,"meta":178,"style":178},[99,66056,66057,66065,66073,66081,66089],{"__ignoreMap":178},[220,66058,66059,66061,66063],{"class":222,"line":223},[220,66060,343],{"class":264},[220,66062,347],{"class":420},[220,66064,359],{"class":264},[220,66066,66067,66069,66071],{"class":222,"line":179},[220,66068,364],{"class":264},[220,66070,65988],{"class":420},[220,66072,359],{"class":264},[220,66074,66075,66077,66079],{"class":222,"line":389},[220,66076,2550],{"class":264},[220,66078,2553],{"class":420},[220,66080,386],{"class":264},[220,66082,66083,66085,66087],{"class":222,"line":399},[220,66084,2567],{"class":264},[220,66086,65988],{"class":420},[220,66088,359],{"class":264},[220,66090,66091,66093,66095],{"class":222,"line":644},[220,66092,402],{"class":264},[220,66094,347],{"class":420},[220,66096,359],{"class":264},[212,66098,66099],{"className":2844,"code":66010,"language":2846,"meta":178,"style":178},[99,66100,66101,66109,66117,66125,66133],{"__ignoreMap":178},[220,66102,66103,66105,66107],{"class":222,"line":223},[220,66104,343],{"class":264},[220,66106,347],{"class":420},[220,66108,359],{"class":264},[220,66110,66111,66113,66115],{"class":222,"line":179},[220,66112,364],{"class":264},[220,66114,65988],{"class":420},[220,66116,359],{"class":264},[220,66118,66119,66121,66123],{"class":222,"line":389},[220,66120,2550],{"class":264},[220,66122,2553],{"class":420},[220,66124,386],{"class":264},[220,66126,66127,66129,66131],{"class":222,"line":399},[220,66128,2567],{"class":264},[220,66130,65988],{"class":420},[220,66132,359],{"class":264},[220,66134,66135,66137,66139],{"class":222,"line":644},[220,66136,402],{"class":264},[220,66138,347],{"class":420},[220,66140,359],{"class":264},[212,66142,66143],{"className":468,"code":66010,"language":469,"meta":178,"style":178},[99,66144,66145,66153,66161,66169,66177],{"__ignoreMap":178},[220,66146,66147,66149,66151],{"class":222,"line":223},[220,66148,343],{"class":264},[220,66150,347],{"class":420},[220,66152,359],{"class":264},[220,66154,66155,66157,66159],{"class":222,"line":179},[220,66156,364],{"class":264},[220,66158,65988],{"class":420},[220,66160,359],{"class":264},[220,66162,66163,66165,66167],{"class":222,"line":389},[220,66164,2550],{"class":264},[220,66166,2553],{"class":420},[220,66168,386],{"class":264},[220,66170,66171,66173,66175],{"class":222,"line":399},[220,66172,2567],{"class":264},[220,66174,65988],{"class":420},[220,66176,359],{"class":264},[220,66178,66179,66181,66183],{"class":222,"line":644},[220,66180,402],{"class":264},[220,66182,347],{"class":420},[220,66184,359],{"class":264},[212,66186,66188],{"className":251,"code":66187,"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,66189,66190,66200,66204,66218,66222,66231,66239,66243,66247],{"__ignoreMap":178},[220,66191,66192,66194,66196,66198],{"class":222,"line":223},[220,66193,261],{"class":260},[220,66195,11507],{"class":264},[220,66197,268],{"class":260},[220,66199,4007],{"class":230},[220,66201,66202],{"class":222,"line":179},[220,66203,647],{"emptyLinePlaceholder":194},[220,66205,66206,66208,66210,66212,66214,66216],{"class":222,"line":389},[220,66207,1735],{"class":260},[220,66209,1738],{"class":420},[220,66211,1741],{"class":260},[220,66213,1744],{"class":260},[220,66215,1747],{"class":226},[220,66217,1750],{"class":264},[220,66219,66220],{"class":222,"line":399},[220,66221,1765],{"class":264},[220,66223,66224,66226,66229],{"class":222,"line":644},[220,66225,1770],{"class":264},[220,66227,66228],{"class":230},"'RadialWipe'",[220,66230,7004],{"class":264},[220,66232,66233,66235,66237],{"class":222,"line":650},[220,66234,7009],{"class":264},[220,66236,3206],{"class":230},[220,66238,2465],{"class":264},[220,66240,66241],{"class":222,"line":656},[220,66242,7026],{"class":264},[220,66244,66245],{"class":222,"line":673},[220,66246,1787],{"class":264},[220,66248,66249],{"class":222,"line":682},[220,66250,1792],{"class":264},[1504,66252,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":66254},[66255,66256],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fradialwipe",{"title":65988,"description":65996},"docs\u002Fcomponents\u002FRadialWipe","nUrviUP1ftpLIxdItR9innSIhwR4K8qi4Drktjb9bho",{"id":66263,"title":66264,"body":66265,"category":33668,"componentType":25878,"description":66272,"extension":191,"meta":66533,"navigation":194,"path":66534,"requiresChild":194,"seo":66535,"stem":66536,"__hash__":66537},"components\u002Fdocs\u002Fcomponents\u002FRandomBars.md","RandomBars",{"type":8,"value":66266,"toc":66529},[66267,66270,66273,66275,66277,66280,66282,66527],[11,66268,66264],{"id":66269},"randombars",[15,66271,66272],{},"Wipe the content away as parallel bars vanishing in random order",[31906,66274],{"component":66264},[23,66276,31910],{"id":26528},[31912,66278],{":props":66279},"[{\"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,66281,31918],{"id":31917},[246,66283,66284,66329,66373,66417,66461],{":tabs":1557},[212,66285,66287],{"className":334,"code":66286,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRandomBars>\n \u003CCircle \u002F>\n \u003C\u002FRandomBars>\n\u003C\u002FShader>\n",[99,66288,66289,66297,66305,66313,66321],{"__ignoreMap":178},[220,66290,66291,66293,66295],{"class":222,"line":223},[220,66292,343],{"class":264},[220,66294,347],{"class":346},[220,66296,359],{"class":264},[220,66298,66299,66301,66303],{"class":222,"line":179},[220,66300,364],{"class":264},[220,66302,66264],{"class":346},[220,66304,359],{"class":264},[220,66306,66307,66309,66311],{"class":222,"line":389},[220,66308,2550],{"class":264},[220,66310,2553],{"class":346},[220,66312,386],{"class":264},[220,66314,66315,66317,66319],{"class":222,"line":399},[220,66316,2567],{"class":264},[220,66318,66264],{"class":346},[220,66320,359],{"class":264},[220,66322,66323,66325,66327],{"class":222,"line":644},[220,66324,402],{"class":264},[220,66326,347],{"class":346},[220,66328,359],{"class":264},[212,66330,66331],{"className":409,"code":66286,"language":411,"meta":178,"style":178},[99,66332,66333,66341,66349,66357,66365],{"__ignoreMap":178},[220,66334,66335,66337,66339],{"class":222,"line":223},[220,66336,343],{"class":264},[220,66338,347],{"class":420},[220,66340,359],{"class":264},[220,66342,66343,66345,66347],{"class":222,"line":179},[220,66344,364],{"class":264},[220,66346,66264],{"class":420},[220,66348,359],{"class":264},[220,66350,66351,66353,66355],{"class":222,"line":389},[220,66352,2550],{"class":264},[220,66354,2553],{"class":420},[220,66356,386],{"class":264},[220,66358,66359,66361,66363],{"class":222,"line":399},[220,66360,2567],{"class":264},[220,66362,66264],{"class":420},[220,66364,359],{"class":264},[220,66366,66367,66369,66371],{"class":222,"line":644},[220,66368,402],{"class":264},[220,66370,347],{"class":420},[220,66372,359],{"class":264},[212,66374,66375],{"className":2844,"code":66286,"language":2846,"meta":178,"style":178},[99,66376,66377,66385,66393,66401,66409],{"__ignoreMap":178},[220,66378,66379,66381,66383],{"class":222,"line":223},[220,66380,343],{"class":264},[220,66382,347],{"class":420},[220,66384,359],{"class":264},[220,66386,66387,66389,66391],{"class":222,"line":179},[220,66388,364],{"class":264},[220,66390,66264],{"class":420},[220,66392,359],{"class":264},[220,66394,66395,66397,66399],{"class":222,"line":389},[220,66396,2550],{"class":264},[220,66398,2553],{"class":420},[220,66400,386],{"class":264},[220,66402,66403,66405,66407],{"class":222,"line":399},[220,66404,2567],{"class":264},[220,66406,66264],{"class":420},[220,66408,359],{"class":264},[220,66410,66411,66413,66415],{"class":222,"line":644},[220,66412,402],{"class":264},[220,66414,347],{"class":420},[220,66416,359],{"class":264},[212,66418,66419],{"className":468,"code":66286,"language":469,"meta":178,"style":178},[99,66420,66421,66429,66437,66445,66453],{"__ignoreMap":178},[220,66422,66423,66425,66427],{"class":222,"line":223},[220,66424,343],{"class":264},[220,66426,347],{"class":420},[220,66428,359],{"class":264},[220,66430,66431,66433,66435],{"class":222,"line":179},[220,66432,364],{"class":264},[220,66434,66264],{"class":420},[220,66436,359],{"class":264},[220,66438,66439,66441,66443],{"class":222,"line":389},[220,66440,2550],{"class":264},[220,66442,2553],{"class":420},[220,66444,386],{"class":264},[220,66446,66447,66449,66451],{"class":222,"line":399},[220,66448,2567],{"class":264},[220,66450,66264],{"class":420},[220,66452,359],{"class":264},[220,66454,66455,66457,66459],{"class":222,"line":644},[220,66456,402],{"class":264},[220,66458,347],{"class":420},[220,66460,359],{"class":264},[212,66462,66464],{"className":251,"code":66463,"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,66465,66466,66476,66480,66494,66498,66507,66515,66519,66523],{"__ignoreMap":178},[220,66467,66468,66470,66472,66474],{"class":222,"line":223},[220,66469,261],{"class":260},[220,66471,11507],{"class":264},[220,66473,268],{"class":260},[220,66475,4007],{"class":230},[220,66477,66478],{"class":222,"line":179},[220,66479,647],{"emptyLinePlaceholder":194},[220,66481,66482,66484,66486,66488,66490,66492],{"class":222,"line":389},[220,66483,1735],{"class":260},[220,66485,1738],{"class":420},[220,66487,1741],{"class":260},[220,66489,1744],{"class":260},[220,66491,1747],{"class":226},[220,66493,1750],{"class":264},[220,66495,66496],{"class":222,"line":399},[220,66497,1765],{"class":264},[220,66499,66500,66502,66505],{"class":222,"line":644},[220,66501,1770],{"class":264},[220,66503,66504],{"class":230},"'RandomBars'",[220,66506,7004],{"class":264},[220,66508,66509,66511,66513],{"class":222,"line":650},[220,66510,7009],{"class":264},[220,66512,3206],{"class":230},[220,66514,2465],{"class":264},[220,66516,66517],{"class":222,"line":656},[220,66518,7026],{"class":264},[220,66520,66521],{"class":222,"line":673},[220,66522,1787],{"class":264},[220,66524,66525],{"class":222,"line":682},[220,66526,1792],{"class":264},[1504,66528,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":66530},[66531,66532],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Frandombars",{"title":66264,"description":66272},"docs\u002Fcomponents\u002FRandomBars","XgBCPA4gxuugWJlg4oDrwVA3_03S4Lb2qtTwq8ToMe0",{"id":66539,"title":66540,"body":66541,"category":35554,"componentType":25872,"description":66548,"extension":191,"meta":66733,"navigation":194,"path":66734,"requiresChild":32525,"seo":66735,"stem":66736,"__hash__":66737},"components\u002Fdocs\u002Fcomponents\u002FReactionDiffusion.md","ReactionDiffusion",{"type":8,"value":66542,"toc":66729},[66543,66546,66549,66551,66553,66556,66558,66727],[11,66544,66540],{"id":66545},"reactiondiffusion",[15,66547,66548],{},"A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor",[31906,66550],{"component":66540},[23,66552,31910],{"id":26528},[31912,66554],{":props":66555},"[{\"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,66557,31918],{"id":31917},[246,66559,66560,66589,66617,66645,66673],{":tabs":1557},[212,66561,66563],{"className":334,"code":66562,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReactionDiffusion \u002F>\n\u003C\u002FShader>\n",[99,66564,66565,66573,66581],{"__ignoreMap":178},[220,66566,66567,66569,66571],{"class":222,"line":223},[220,66568,343],{"class":264},[220,66570,347],{"class":346},[220,66572,359],{"class":264},[220,66574,66575,66577,66579],{"class":222,"line":179},[220,66576,364],{"class":264},[220,66578,66540],{"class":346},[220,66580,386],{"class":264},[220,66582,66583,66585,66587],{"class":222,"line":389},[220,66584,402],{"class":264},[220,66586,347],{"class":346},[220,66588,359],{"class":264},[212,66590,66591],{"className":409,"code":66562,"language":411,"meta":178,"style":178},[99,66592,66593,66601,66609],{"__ignoreMap":178},[220,66594,66595,66597,66599],{"class":222,"line":223},[220,66596,343],{"class":264},[220,66598,347],{"class":420},[220,66600,359],{"class":264},[220,66602,66603,66605,66607],{"class":222,"line":179},[220,66604,364],{"class":264},[220,66606,66540],{"class":420},[220,66608,386],{"class":264},[220,66610,66611,66613,66615],{"class":222,"line":389},[220,66612,402],{"class":264},[220,66614,347],{"class":420},[220,66616,359],{"class":264},[212,66618,66619],{"className":2844,"code":66562,"language":2846,"meta":178,"style":178},[99,66620,66621,66629,66637],{"__ignoreMap":178},[220,66622,66623,66625,66627],{"class":222,"line":223},[220,66624,343],{"class":264},[220,66626,347],{"class":420},[220,66628,359],{"class":264},[220,66630,66631,66633,66635],{"class":222,"line":179},[220,66632,364],{"class":264},[220,66634,66540],{"class":420},[220,66636,386],{"class":264},[220,66638,66639,66641,66643],{"class":222,"line":389},[220,66640,402],{"class":264},[220,66642,347],{"class":420},[220,66644,359],{"class":264},[212,66646,66647],{"className":468,"code":66562,"language":469,"meta":178,"style":178},[99,66648,66649,66657,66665],{"__ignoreMap":178},[220,66650,66651,66653,66655],{"class":222,"line":223},[220,66652,343],{"class":264},[220,66654,347],{"class":420},[220,66656,359],{"class":264},[220,66658,66659,66661,66663],{"class":222,"line":179},[220,66660,364],{"class":264},[220,66662,66540],{"class":420},[220,66664,386],{"class":264},[220,66666,66667,66669,66671],{"class":222,"line":389},[220,66668,402],{"class":264},[220,66670,347],{"class":420},[220,66672,359],{"class":264},[212,66674,66676],{"className":251,"code":66675,"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,66677,66678,66688,66692,66706,66710,66719,66723],{"__ignoreMap":178},[220,66679,66680,66682,66684,66686],{"class":222,"line":223},[220,66681,261],{"class":260},[220,66683,11507],{"class":264},[220,66685,268],{"class":260},[220,66687,4007],{"class":230},[220,66689,66690],{"class":222,"line":179},[220,66691,647],{"emptyLinePlaceholder":194},[220,66693,66694,66696,66698,66700,66702,66704],{"class":222,"line":389},[220,66695,1735],{"class":260},[220,66697,1738],{"class":420},[220,66699,1741],{"class":260},[220,66701,1744],{"class":260},[220,66703,1747],{"class":226},[220,66705,1750],{"class":264},[220,66707,66708],{"class":222,"line":399},[220,66709,1765],{"class":264},[220,66711,66712,66714,66717],{"class":222,"line":644},[220,66713,1770],{"class":264},[220,66715,66716],{"class":230},"'ReactionDiffusion'",[220,66718,2465],{"class":264},[220,66720,66721],{"class":222,"line":650},[220,66722,1787],{"class":264},[220,66724,66725],{"class":222,"line":656},[220,66726,1792],{"class":264},[1504,66728,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":66730},[66731,66732],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Freactiondiffusion",{"title":66540,"description":66548},"docs\u002Fcomponents\u002FReactionDiffusion","NYG8rTGKT-we5Yb6vVhrjHcbQfR7IFWMNLpjfgq1_DE",{"id":66739,"title":66740,"body":66741,"category":33391,"componentType":25878,"description":66748,"extension":191,"meta":67065,"navigation":194,"path":67066,"requiresChild":194,"seo":67067,"stem":67068,"__hash__":67069},"components\u002Fdocs\u002Fcomponents\u002FRectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":66742,"toc":67061},[66743,66746,66749,66751,66753,66756,66758,67059],[11,66744,66740],{"id":66745},"rectangularcoordinates",[15,66747,66748],{},"Convert polar coordinates back to rectangular space",[31906,66750],{"component":66740},[23,66752,31910],{"id":26528},[31912,66754],{":props":66755},"[{\"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,66757,31918],{"id":31917},[246,66759,66760,66816,66875,66931,66989],{":tabs":1557},[212,66761,66763],{"className":334,"code":66762,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66764,66765,66773,66780,66788,66792,66800,66808],{"__ignoreMap":178},[220,66766,66767,66769,66771],{"class":222,"line":223},[220,66768,343],{"class":264},[220,66770,347],{"class":346},[220,66772,359],{"class":264},[220,66774,66775,66777],{"class":222,"line":179},[220,66776,364],{"class":264},[220,66778,66779],{"class":346},"RectangularCoordinates\n",[220,66781,66782,66784,66786],{"class":222,"line":389},[220,66783,20366],{"class":226},[220,66785,353],{"class":264},[220,66787,36620],{"class":230},[220,66789,66790],{"class":222,"line":399},[220,66791,31954],{"class":264},[220,66793,66794,66796,66798],{"class":222,"line":644},[220,66795,2550],{"class":264},[220,66797,2553],{"class":346},[220,66799,386],{"class":264},[220,66801,66802,66804,66806],{"class":222,"line":650},[220,66803,2567],{"class":264},[220,66805,66740],{"class":346},[220,66807,359],{"class":264},[220,66809,66810,66812,66814],{"class":222,"line":656},[220,66811,402],{"class":264},[220,66813,347],{"class":346},[220,66815,359],{"class":264},[212,66817,66819],{"className":409,"code":66818,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FRectangularCoordinates>\n\u003C\u002FShader>\n",[99,66820,66821,66829,66835,66847,66851,66859,66867],{"__ignoreMap":178},[220,66822,66823,66825,66827],{"class":222,"line":223},[220,66824,343],{"class":264},[220,66826,347],{"class":420},[220,66828,359],{"class":264},[220,66830,66831,66833],{"class":222,"line":179},[220,66832,364],{"class":264},[220,66834,66779],{"class":420},[220,66836,66837,66839,66841,66843,66845],{"class":222,"line":389},[220,66838,20477],{"class":226},[220,66840,353],{"class":260},[220,66842,743],{"class":264},[220,66844,8672],{"class":420},[220,66846,749],{"class":264},[220,66848,66849],{"class":222,"line":399},[220,66850,31954],{"class":264},[220,66852,66853,66855,66857],{"class":222,"line":644},[220,66854,2550],{"class":264},[220,66856,2553],{"class":420},[220,66858,386],{"class":264},[220,66860,66861,66863,66865],{"class":222,"line":650},[220,66862,2567],{"class":264},[220,66864,66740],{"class":420},[220,66866,359],{"class":264},[220,66868,66869,66871,66873],{"class":222,"line":656},[220,66870,402],{"class":264},[220,66872,347],{"class":420},[220,66874,359],{"class":264},[212,66876,66877],{"className":2844,"code":66818,"language":2846,"meta":178,"style":178},[99,66878,66879,66887,66893,66903,66907,66915,66923],{"__ignoreMap":178},[220,66880,66881,66883,66885],{"class":222,"line":223},[220,66882,343],{"class":264},[220,66884,347],{"class":420},[220,66886,359],{"class":264},[220,66888,66889,66891],{"class":222,"line":179},[220,66890,364],{"class":264},[220,66892,66779],{"class":420},[220,66894,66895,66897,66899,66901],{"class":222,"line":389},[220,66896,20477],{"class":226},[220,66898,29866],{"class":264},[220,66900,8672],{"class":420},[220,66902,749],{"class":264},[220,66904,66905],{"class":222,"line":399},[220,66906,31954],{"class":264},[220,66908,66909,66911,66913],{"class":222,"line":644},[220,66910,2550],{"class":264},[220,66912,2553],{"class":420},[220,66914,386],{"class":264},[220,66916,66917,66919,66921],{"class":222,"line":650},[220,66918,2567],{"class":264},[220,66920,66740],{"class":420},[220,66922,359],{"class":264},[220,66924,66925,66927,66929],{"class":222,"line":656},[220,66926,402],{"class":264},[220,66928,347],{"class":420},[220,66930,359],{"class":264},[212,66932,66933],{"className":468,"code":66818,"language":469,"meta":178,"style":178},[99,66934,66935,66943,66949,66961,66965,66973,66981],{"__ignoreMap":178},[220,66936,66937,66939,66941],{"class":222,"line":223},[220,66938,343],{"class":264},[220,66940,347],{"class":420},[220,66942,359],{"class":264},[220,66944,66945,66947],{"class":222,"line":179},[220,66946,364],{"class":264},[220,66948,66779],{"class":420},[220,66950,66951,66953,66955,66957,66959],{"class":222,"line":389},[220,66952,20477],{"class":226},[220,66954,353],{"class":260},[220,66956,743],{"class":264},[220,66958,8672],{"class":420},[220,66960,749],{"class":264},[220,66962,66963],{"class":222,"line":399},[220,66964,31954],{"class":264},[220,66966,66967,66969,66971],{"class":222,"line":644},[220,66968,2550],{"class":264},[220,66970,2553],{"class":420},[220,66972,386],{"class":264},[220,66974,66975,66977,66979],{"class":222,"line":650},[220,66976,2567],{"class":264},[220,66978,66740],{"class":420},[220,66980,359],{"class":264},[220,66982,66983,66985,66987],{"class":222,"line":656},[220,66984,402],{"class":264},[220,66986,347],{"class":420},[220,66988,359],{"class":264},[212,66990,66992],{"className":251,"code":66991,"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,66993,66994,67004,67008,67022,67026,67039,67047,67051,67055],{"__ignoreMap":178},[220,66995,66996,66998,67000,67002],{"class":222,"line":223},[220,66997,261],{"class":260},[220,66999,11507],{"class":264},[220,67001,268],{"class":260},[220,67003,4007],{"class":230},[220,67005,67006],{"class":222,"line":179},[220,67007,647],{"emptyLinePlaceholder":194},[220,67009,67010,67012,67014,67016,67018,67020],{"class":222,"line":389},[220,67011,1735],{"class":260},[220,67013,1738],{"class":420},[220,67015,1741],{"class":260},[220,67017,1744],{"class":260},[220,67019,1747],{"class":226},[220,67021,1750],{"class":264},[220,67023,67024],{"class":222,"line":399},[220,67025,1765],{"class":264},[220,67027,67028,67030,67033,67035,67037],{"class":222,"line":644},[220,67029,1770],{"class":264},[220,67031,67032],{"class":230},"'RectangularCoordinates'",[220,67034,32198],{"class":264},[220,67036,8672],{"class":420},[220,67038,7541],{"class":264},[220,67040,67041,67043,67045],{"class":222,"line":650},[220,67042,7009],{"class":264},[220,67044,3206],{"class":230},[220,67046,2465],{"class":264},[220,67048,67049],{"class":222,"line":656},[220,67050,7026],{"class":264},[220,67052,67053],{"class":222,"line":673},[220,67054,1787],{"class":264},[220,67056,67057],{"class":222,"line":682},[220,67058,1792],{"class":264},[1504,67060,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67062},[67063,67064],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Frectangularcoordinates",{"title":66740,"description":66748},"docs\u002Fcomponents\u002FRectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":67071,"title":67072,"body":67073,"category":32801,"componentType":25878,"description":67080,"extension":191,"meta":67341,"navigation":194,"path":67342,"requiresChild":194,"seo":67343,"stem":67344,"__hash__":67345},"components\u002Fdocs\u002Fcomponents\u002FReflectivePlane.md","ReflectivePlane",{"type":8,"value":67074,"toc":67337},[67075,67078,67081,67083,67085,67088,67090,67335],[11,67076,67072],{"id":67077},"reflectiveplane",[15,67079,67080],{},"Reflective floor that mirrors the content above it",[31906,67082],{"component":67072},[23,67084,31910],{"id":26528},[31912,67086],{":props":67087},"[{\"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,67089,31918],{"id":31917},[246,67091,67092,67137,67181,67225,67269],{":tabs":1557},[212,67093,67095],{"className":334,"code":67094,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CReflectivePlane>\n \u003CCircle \u002F>\n \u003C\u002FReflectivePlane>\n\u003C\u002FShader>\n",[99,67096,67097,67105,67113,67121,67129],{"__ignoreMap":178},[220,67098,67099,67101,67103],{"class":222,"line":223},[220,67100,343],{"class":264},[220,67102,347],{"class":346},[220,67104,359],{"class":264},[220,67106,67107,67109,67111],{"class":222,"line":179},[220,67108,364],{"class":264},[220,67110,67072],{"class":346},[220,67112,359],{"class":264},[220,67114,67115,67117,67119],{"class":222,"line":389},[220,67116,2550],{"class":264},[220,67118,2553],{"class":346},[220,67120,386],{"class":264},[220,67122,67123,67125,67127],{"class":222,"line":399},[220,67124,2567],{"class":264},[220,67126,67072],{"class":346},[220,67128,359],{"class":264},[220,67130,67131,67133,67135],{"class":222,"line":644},[220,67132,402],{"class":264},[220,67134,347],{"class":346},[220,67136,359],{"class":264},[212,67138,67139],{"className":409,"code":67094,"language":411,"meta":178,"style":178},[99,67140,67141,67149,67157,67165,67173],{"__ignoreMap":178},[220,67142,67143,67145,67147],{"class":222,"line":223},[220,67144,343],{"class":264},[220,67146,347],{"class":420},[220,67148,359],{"class":264},[220,67150,67151,67153,67155],{"class":222,"line":179},[220,67152,364],{"class":264},[220,67154,67072],{"class":420},[220,67156,359],{"class":264},[220,67158,67159,67161,67163],{"class":222,"line":389},[220,67160,2550],{"class":264},[220,67162,2553],{"class":420},[220,67164,386],{"class":264},[220,67166,67167,67169,67171],{"class":222,"line":399},[220,67168,2567],{"class":264},[220,67170,67072],{"class":420},[220,67172,359],{"class":264},[220,67174,67175,67177,67179],{"class":222,"line":644},[220,67176,402],{"class":264},[220,67178,347],{"class":420},[220,67180,359],{"class":264},[212,67182,67183],{"className":2844,"code":67094,"language":2846,"meta":178,"style":178},[99,67184,67185,67193,67201,67209,67217],{"__ignoreMap":178},[220,67186,67187,67189,67191],{"class":222,"line":223},[220,67188,343],{"class":264},[220,67190,347],{"class":420},[220,67192,359],{"class":264},[220,67194,67195,67197,67199],{"class":222,"line":179},[220,67196,364],{"class":264},[220,67198,67072],{"class":420},[220,67200,359],{"class":264},[220,67202,67203,67205,67207],{"class":222,"line":389},[220,67204,2550],{"class":264},[220,67206,2553],{"class":420},[220,67208,386],{"class":264},[220,67210,67211,67213,67215],{"class":222,"line":399},[220,67212,2567],{"class":264},[220,67214,67072],{"class":420},[220,67216,359],{"class":264},[220,67218,67219,67221,67223],{"class":222,"line":644},[220,67220,402],{"class":264},[220,67222,347],{"class":420},[220,67224,359],{"class":264},[212,67226,67227],{"className":468,"code":67094,"language":469,"meta":178,"style":178},[99,67228,67229,67237,67245,67253,67261],{"__ignoreMap":178},[220,67230,67231,67233,67235],{"class":222,"line":223},[220,67232,343],{"class":264},[220,67234,347],{"class":420},[220,67236,359],{"class":264},[220,67238,67239,67241,67243],{"class":222,"line":179},[220,67240,364],{"class":264},[220,67242,67072],{"class":420},[220,67244,359],{"class":264},[220,67246,67247,67249,67251],{"class":222,"line":389},[220,67248,2550],{"class":264},[220,67250,2553],{"class":420},[220,67252,386],{"class":264},[220,67254,67255,67257,67259],{"class":222,"line":399},[220,67256,2567],{"class":264},[220,67258,67072],{"class":420},[220,67260,359],{"class":264},[220,67262,67263,67265,67267],{"class":222,"line":644},[220,67264,402],{"class":264},[220,67266,347],{"class":420},[220,67268,359],{"class":264},[212,67270,67272],{"className":251,"code":67271,"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,67273,67274,67284,67288,67302,67306,67315,67323,67327,67331],{"__ignoreMap":178},[220,67275,67276,67278,67280,67282],{"class":222,"line":223},[220,67277,261],{"class":260},[220,67279,11507],{"class":264},[220,67281,268],{"class":260},[220,67283,4007],{"class":230},[220,67285,67286],{"class":222,"line":179},[220,67287,647],{"emptyLinePlaceholder":194},[220,67289,67290,67292,67294,67296,67298,67300],{"class":222,"line":389},[220,67291,1735],{"class":260},[220,67293,1738],{"class":420},[220,67295,1741],{"class":260},[220,67297,1744],{"class":260},[220,67299,1747],{"class":226},[220,67301,1750],{"class":264},[220,67303,67304],{"class":222,"line":399},[220,67305,1765],{"class":264},[220,67307,67308,67310,67313],{"class":222,"line":644},[220,67309,1770],{"class":264},[220,67311,67312],{"class":230},"'ReflectivePlane'",[220,67314,7004],{"class":264},[220,67316,67317,67319,67321],{"class":222,"line":650},[220,67318,7009],{"class":264},[220,67320,3206],{"class":230},[220,67322,2465],{"class":264},[220,67324,67325],{"class":222,"line":656},[220,67326,7026],{"class":264},[220,67328,67329],{"class":222,"line":673},[220,67330,1787],{"class":264},[220,67332,67333],{"class":222,"line":682},[220,67334,1792],{"class":264},[1504,67336,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":67338},[67339,67340],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Freflectiveplane",{"title":67072,"description":67080},"docs\u002Fcomponents\u002FReflectivePlane","M1mQraVUpHSkWQ5ne_9f2mLxSBWj8aHVTxuI31XW9MI",{"id":67347,"title":67348,"body":67349,"category":33391,"componentType":25878,"description":67356,"extension":191,"meta":67673,"navigation":194,"path":67674,"requiresChild":194,"seo":67675,"stem":67676,"__hash__":67677},"components\u002Fdocs\u002Fcomponents\u002FRepeater.md","Repeater",{"type":8,"value":67350,"toc":67669},[67351,67354,67357,67359,67361,67364,67366,67667],[11,67352,67348],{"id":67353},"repeater",[15,67355,67356],{},"Repeat the child content in grid, radial or linear layouts with per-instance variation",[31906,67358],{"component":67348},[23,67360,31910],{"id":26528},[31912,67362],{":props":67363},"[{\"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,67365,31918],{"id":31917},[246,67367,67368,67424,67483,67539,67597],{":tabs":1557},[212,67369,67371],{"className":334,"code":67370,"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,67372,67373,67381,67388,67396,67400,67408,67416],{"__ignoreMap":178},[220,67374,67375,67377,67379],{"class":222,"line":223},[220,67376,343],{"class":264},[220,67378,347],{"class":346},[220,67380,359],{"class":264},[220,67382,67383,67385],{"class":222,"line":179},[220,67384,364],{"class":264},[220,67386,67387],{"class":346},"Repeater\n",[220,67389,67390,67392,67394],{"class":222,"line":389},[220,67391,17400],{"class":226},[220,67393,353],{"class":264},[220,67395,41093],{"class":230},[220,67397,67398],{"class":222,"line":399},[220,67399,31954],{"class":264},[220,67401,67402,67404,67406],{"class":222,"line":644},[220,67403,2550],{"class":264},[220,67405,2553],{"class":346},[220,67407,386],{"class":264},[220,67409,67410,67412,67414],{"class":222,"line":650},[220,67411,2567],{"class":264},[220,67413,67348],{"class":346},[220,67415,359],{"class":264},[220,67417,67418,67420,67422],{"class":222,"line":656},[220,67419,402],{"class":264},[220,67421,347],{"class":346},[220,67423,359],{"class":264},[212,67425,67427],{"className":409,"code":67426,"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,67428,67429,67437,67443,67455,67459,67467,67475],{"__ignoreMap":178},[220,67430,67431,67433,67435],{"class":222,"line":223},[220,67432,343],{"class":264},[220,67434,347],{"class":420},[220,67436,359],{"class":264},[220,67438,67439,67441],{"class":222,"line":179},[220,67440,364],{"class":264},[220,67442,67387],{"class":420},[220,67444,67445,67447,67449,67451,67453],{"class":222,"line":389},[220,67446,9640],{"class":226},[220,67448,353],{"class":260},[220,67450,743],{"class":264},[220,67452,21999],{"class":420},[220,67454,749],{"class":264},[220,67456,67457],{"class":222,"line":399},[220,67458,31954],{"class":264},[220,67460,67461,67463,67465],{"class":222,"line":644},[220,67462,2550],{"class":264},[220,67464,2553],{"class":420},[220,67466,386],{"class":264},[220,67468,67469,67471,67473],{"class":222,"line":650},[220,67470,2567],{"class":264},[220,67472,67348],{"class":420},[220,67474,359],{"class":264},[220,67476,67477,67479,67481],{"class":222,"line":656},[220,67478,402],{"class":264},[220,67480,347],{"class":420},[220,67482,359],{"class":264},[212,67484,67485],{"className":2844,"code":67426,"language":2846,"meta":178,"style":178},[99,67486,67487,67495,67501,67511,67515,67523,67531],{"__ignoreMap":178},[220,67488,67489,67491,67493],{"class":222,"line":223},[220,67490,343],{"class":264},[220,67492,347],{"class":420},[220,67494,359],{"class":264},[220,67496,67497,67499],{"class":222,"line":179},[220,67498,364],{"class":264},[220,67500,67387],{"class":420},[220,67502,67503,67505,67507,67509],{"class":222,"line":389},[220,67504,9640],{"class":226},[220,67506,29866],{"class":264},[220,67508,21999],{"class":420},[220,67510,749],{"class":264},[220,67512,67513],{"class":222,"line":399},[220,67514,31954],{"class":264},[220,67516,67517,67519,67521],{"class":222,"line":644},[220,67518,2550],{"class":264},[220,67520,2553],{"class":420},[220,67522,386],{"class":264},[220,67524,67525,67527,67529],{"class":222,"line":650},[220,67526,2567],{"class":264},[220,67528,67348],{"class":420},[220,67530,359],{"class":264},[220,67532,67533,67535,67537],{"class":222,"line":656},[220,67534,402],{"class":264},[220,67536,347],{"class":420},[220,67538,359],{"class":264},[212,67540,67541],{"className":468,"code":67426,"language":469,"meta":178,"style":178},[99,67542,67543,67551,67557,67569,67573,67581,67589],{"__ignoreMap":178},[220,67544,67545,67547,67549],{"class":222,"line":223},[220,67546,343],{"class":264},[220,67548,347],{"class":420},[220,67550,359],{"class":264},[220,67552,67553,67555],{"class":222,"line":179},[220,67554,364],{"class":264},[220,67556,67387],{"class":420},[220,67558,67559,67561,67563,67565,67567],{"class":222,"line":389},[220,67560,9640],{"class":226},[220,67562,353],{"class":260},[220,67564,743],{"class":264},[220,67566,21999],{"class":420},[220,67568,749],{"class":264},[220,67570,67571],{"class":222,"line":399},[220,67572,31954],{"class":264},[220,67574,67575,67577,67579],{"class":222,"line":644},[220,67576,2550],{"class":264},[220,67578,2553],{"class":420},[220,67580,386],{"class":264},[220,67582,67583,67585,67587],{"class":222,"line":650},[220,67584,2567],{"class":264},[220,67586,67348],{"class":420},[220,67588,359],{"class":264},[220,67590,67591,67593,67595],{"class":222,"line":656},[220,67592,402],{"class":264},[220,67594,347],{"class":420},[220,67596,359],{"class":264},[212,67598,67600],{"className":251,"code":67599,"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,67601,67602,67612,67616,67630,67634,67647,67655,67659,67663],{"__ignoreMap":178},[220,67603,67604,67606,67608,67610],{"class":222,"line":223},[220,67605,261],{"class":260},[220,67607,11507],{"class":264},[220,67609,268],{"class":260},[220,67611,4007],{"class":230},[220,67613,67614],{"class":222,"line":179},[220,67615,647],{"emptyLinePlaceholder":194},[220,67617,67618,67620,67622,67624,67626,67628],{"class":222,"line":389},[220,67619,1735],{"class":260},[220,67621,1738],{"class":420},[220,67623,1741],{"class":260},[220,67625,1744],{"class":260},[220,67627,1747],{"class":226},[220,67629,1750],{"class":264},[220,67631,67632],{"class":222,"line":399},[220,67633,1765],{"class":264},[220,67635,67636,67638,67641,67643,67645],{"class":222,"line":644},[220,67637,1770],{"class":264},[220,67639,67640],{"class":230},"'Repeater'",[220,67642,7536],{"class":264},[220,67644,21999],{"class":420},[220,67646,7541],{"class":264},[220,67648,67649,67651,67653],{"class":222,"line":650},[220,67650,7009],{"class":264},[220,67652,3206],{"class":230},[220,67654,2465],{"class":264},[220,67656,67657],{"class":222,"line":656},[220,67658,7026],{"class":264},[220,67660,67661],{"class":222,"line":673},[220,67662,1787],{"class":264},[220,67664,67665],{"class":222,"line":682},[220,67666,1792],{"class":264},[1504,67668,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67670},[67671,67672],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Frepeater",{"title":67348,"description":67356},"docs\u002Fcomponents\u002FRepeater","lIRY1HeVvHLSvieOfooTskbnUYza20f1q-6EaL9Cu0o",{"id":67679,"title":67680,"body":67681,"category":15903,"componentType":25872,"description":67688,"extension":191,"meta":67965,"navigation":194,"path":67966,"requiresChild":32525,"seo":67967,"stem":67968,"__hash__":67969},"components\u002Fdocs\u002Fcomponents\u002FRing.md","Ring",{"type":8,"value":67682,"toc":67961},[67683,67686,67689,67691,67693,67696,67698,67959],[11,67684,67680],{"id":67685},"ring",[15,67687,67688],{},"Annular ring (donut) with adjustable radius and band thickness",[31906,67690],{"component":67680},[23,67692,31910],{"id":26528},[31912,67694],{":props":67695},"[{\"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,67697,31918],{"id":31917},[246,67699,67700,67748,67799,67847,67897],{":tabs":1557},[212,67701,67703],{"className":334,"code":67702,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n \u002F>\n\u003C\u002FShader>\n",[99,67704,67705,67713,67720,67728,67736,67740],{"__ignoreMap":178},[220,67706,67707,67709,67711],{"class":222,"line":223},[220,67708,343],{"class":264},[220,67710,347],{"class":346},[220,67712,359],{"class":264},[220,67714,67715,67717],{"class":222,"line":179},[220,67716,364],{"class":264},[220,67718,67719],{"class":346},"Ring\n",[220,67721,67722,67724,67726],{"class":222,"line":389},[220,67723,9630],{"class":226},[220,67725,353],{"class":264},[220,67727,9586],{"class":230},[220,67729,67730,67732,67734],{"class":222,"line":399},[220,67731,17400],{"class":226},[220,67733,353],{"class":264},[220,67735,41093],{"class":230},[220,67737,67738],{"class":222,"line":644},[220,67739,1234],{"class":264},[220,67741,67742,67744,67746],{"class":222,"line":650},[220,67743,402],{"class":264},[220,67745,347],{"class":346},[220,67747,359],{"class":264},[212,67749,67751],{"className":409,"code":67750,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n \u002F>\n\u003C\u002FShader>\n",[99,67752,67753,67761,67767,67775,67787,67791],{"__ignoreMap":178},[220,67754,67755,67757,67759],{"class":222,"line":223},[220,67756,343],{"class":264},[220,67758,347],{"class":420},[220,67760,359],{"class":264},[220,67762,67763,67765],{"class":222,"line":179},[220,67764,364],{"class":264},[220,67766,67719],{"class":420},[220,67768,67769,67771,67773],{"class":222,"line":389},[220,67770,9630],{"class":226},[220,67772,353],{"class":260},[220,67774,9586],{"class":230},[220,67776,67777,67779,67781,67783,67785],{"class":222,"line":399},[220,67778,9640],{"class":226},[220,67780,353],{"class":260},[220,67782,743],{"class":264},[220,67784,21999],{"class":420},[220,67786,749],{"class":264},[220,67788,67789],{"class":222,"line":644},[220,67790,1234],{"class":264},[220,67792,67793,67795,67797],{"class":222,"line":650},[220,67794,402],{"class":264},[220,67796,347],{"class":420},[220,67798,359],{"class":264},[212,67800,67801],{"className":2844,"code":67750,"language":2846,"meta":178,"style":178},[99,67802,67803,67811,67817,67825,67835,67839],{"__ignoreMap":178},[220,67804,67805,67807,67809],{"class":222,"line":223},[220,67806,343],{"class":264},[220,67808,347],{"class":420},[220,67810,359],{"class":264},[220,67812,67813,67815],{"class":222,"line":179},[220,67814,364],{"class":264},[220,67816,67719],{"class":420},[220,67818,67819,67821,67823],{"class":222,"line":389},[220,67820,9630],{"class":226},[220,67822,353],{"class":264},[220,67824,9586],{"class":230},[220,67826,67827,67829,67831,67833],{"class":222,"line":399},[220,67828,9640],{"class":226},[220,67830,29866],{"class":264},[220,67832,21999],{"class":420},[220,67834,749],{"class":264},[220,67836,67837],{"class":222,"line":644},[220,67838,1234],{"class":264},[220,67840,67841,67843,67845],{"class":222,"line":650},[220,67842,402],{"class":264},[220,67844,347],{"class":420},[220,67846,359],{"class":264},[212,67848,67849],{"className":468,"code":67750,"language":469,"meta":178,"style":178},[99,67850,67851,67859,67865,67873,67885,67889],{"__ignoreMap":178},[220,67852,67853,67855,67857],{"class":222,"line":223},[220,67854,343],{"class":264},[220,67856,347],{"class":420},[220,67858,359],{"class":264},[220,67860,67861,67863],{"class":222,"line":179},[220,67862,364],{"class":264},[220,67864,67719],{"class":420},[220,67866,67867,67869,67871],{"class":222,"line":389},[220,67868,9630],{"class":226},[220,67870,353],{"class":260},[220,67872,9586],{"class":230},[220,67874,67875,67877,67879,67881,67883],{"class":222,"line":399},[220,67876,9640],{"class":226},[220,67878,353],{"class":260},[220,67880,743],{"class":264},[220,67882,21999],{"class":420},[220,67884,749],{"class":264},[220,67886,67887],{"class":222,"line":644},[220,67888,1234],{"class":264},[220,67890,67891,67893,67895],{"class":222,"line":650},[220,67892,402],{"class":264},[220,67894,347],{"class":420},[220,67896,359],{"class":264},[212,67898,67900],{"className":251,"code":67899,"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,67901,67902,67912,67916,67930,67934,67951,67955],{"__ignoreMap":178},[220,67903,67904,67906,67908,67910],{"class":222,"line":223},[220,67905,261],{"class":260},[220,67907,11507],{"class":264},[220,67909,268],{"class":260},[220,67911,4007],{"class":230},[220,67913,67914],{"class":222,"line":179},[220,67915,647],{"emptyLinePlaceholder":194},[220,67917,67918,67920,67922,67924,67926,67928],{"class":222,"line":389},[220,67919,1735],{"class":260},[220,67921,1738],{"class":420},[220,67923,1741],{"class":260},[220,67925,1744],{"class":260},[220,67927,1747],{"class":226},[220,67929,1750],{"class":264},[220,67931,67932],{"class":222,"line":399},[220,67933,1765],{"class":264},[220,67935,67936,67938,67941,67943,67945,67947,67949],{"class":222,"line":644},[220,67937,1770],{"class":264},[220,67939,67940],{"class":230},"'Ring'",[220,67942,1776],{"class":264},[220,67944,10164],{"class":230},[220,67946,6561],{"class":264},[220,67948,21999],{"class":420},[220,67950,1782],{"class":264},[220,67952,67953],{"class":222,"line":650},[220,67954,1787],{"class":264},[220,67956,67957],{"class":222,"line":656},[220,67958,1792],{"class":264},[1504,67960,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":67962},[67963,67964],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fring",{"title":67680,"description":67688},"docs\u002Fcomponents\u002FRing","vdpmopvHSvGuHny9uMBWFn8Qla4GpUkcdcWUiBLV-pk",{"id":67971,"title":67972,"body":67973,"category":33668,"componentType":25878,"description":67980,"extension":191,"meta":68241,"navigation":194,"path":68242,"requiresChild":194,"seo":68243,"stem":68244,"__hash__":68245},"components\u002Fdocs\u002Fcomponents\u002FRippleWipe.md","RippleWipe",{"type":8,"value":67974,"toc":68237},[67975,67978,67981,67983,67985,67988,67990,68235],[11,67976,67972],{"id":67977},"ripplewipe",[15,67979,67980],{},"Wipe the content away in concentric rings pulsing out from a center point",[31906,67982],{"component":67972},[23,67984,31910],{"id":26528},[31912,67986],{":props":67987},"[{\"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,67989,31918],{"id":31917},[246,67991,67992,68037,68081,68125,68169],{":tabs":1557},[212,67993,67995],{"className":334,"code":67994,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRippleWipe>\n \u003CCircle \u002F>\n \u003C\u002FRippleWipe>\n\u003C\u002FShader>\n",[99,67996,67997,68005,68013,68021,68029],{"__ignoreMap":178},[220,67998,67999,68001,68003],{"class":222,"line":223},[220,68000,343],{"class":264},[220,68002,347],{"class":346},[220,68004,359],{"class":264},[220,68006,68007,68009,68011],{"class":222,"line":179},[220,68008,364],{"class":264},[220,68010,67972],{"class":346},[220,68012,359],{"class":264},[220,68014,68015,68017,68019],{"class":222,"line":389},[220,68016,2550],{"class":264},[220,68018,2553],{"class":346},[220,68020,386],{"class":264},[220,68022,68023,68025,68027],{"class":222,"line":399},[220,68024,2567],{"class":264},[220,68026,67972],{"class":346},[220,68028,359],{"class":264},[220,68030,68031,68033,68035],{"class":222,"line":644},[220,68032,402],{"class":264},[220,68034,347],{"class":346},[220,68036,359],{"class":264},[212,68038,68039],{"className":409,"code":67994,"language":411,"meta":178,"style":178},[99,68040,68041,68049,68057,68065,68073],{"__ignoreMap":178},[220,68042,68043,68045,68047],{"class":222,"line":223},[220,68044,343],{"class":264},[220,68046,347],{"class":420},[220,68048,359],{"class":264},[220,68050,68051,68053,68055],{"class":222,"line":179},[220,68052,364],{"class":264},[220,68054,67972],{"class":420},[220,68056,359],{"class":264},[220,68058,68059,68061,68063],{"class":222,"line":389},[220,68060,2550],{"class":264},[220,68062,2553],{"class":420},[220,68064,386],{"class":264},[220,68066,68067,68069,68071],{"class":222,"line":399},[220,68068,2567],{"class":264},[220,68070,67972],{"class":420},[220,68072,359],{"class":264},[220,68074,68075,68077,68079],{"class":222,"line":644},[220,68076,402],{"class":264},[220,68078,347],{"class":420},[220,68080,359],{"class":264},[212,68082,68083],{"className":2844,"code":67994,"language":2846,"meta":178,"style":178},[99,68084,68085,68093,68101,68109,68117],{"__ignoreMap":178},[220,68086,68087,68089,68091],{"class":222,"line":223},[220,68088,343],{"class":264},[220,68090,347],{"class":420},[220,68092,359],{"class":264},[220,68094,68095,68097,68099],{"class":222,"line":179},[220,68096,364],{"class":264},[220,68098,67972],{"class":420},[220,68100,359],{"class":264},[220,68102,68103,68105,68107],{"class":222,"line":389},[220,68104,2550],{"class":264},[220,68106,2553],{"class":420},[220,68108,386],{"class":264},[220,68110,68111,68113,68115],{"class":222,"line":399},[220,68112,2567],{"class":264},[220,68114,67972],{"class":420},[220,68116,359],{"class":264},[220,68118,68119,68121,68123],{"class":222,"line":644},[220,68120,402],{"class":264},[220,68122,347],{"class":420},[220,68124,359],{"class":264},[212,68126,68127],{"className":468,"code":67994,"language":469,"meta":178,"style":178},[99,68128,68129,68137,68145,68153,68161],{"__ignoreMap":178},[220,68130,68131,68133,68135],{"class":222,"line":223},[220,68132,343],{"class":264},[220,68134,347],{"class":420},[220,68136,359],{"class":264},[220,68138,68139,68141,68143],{"class":222,"line":179},[220,68140,364],{"class":264},[220,68142,67972],{"class":420},[220,68144,359],{"class":264},[220,68146,68147,68149,68151],{"class":222,"line":389},[220,68148,2550],{"class":264},[220,68150,2553],{"class":420},[220,68152,386],{"class":264},[220,68154,68155,68157,68159],{"class":222,"line":399},[220,68156,2567],{"class":264},[220,68158,67972],{"class":420},[220,68160,359],{"class":264},[220,68162,68163,68165,68167],{"class":222,"line":644},[220,68164,402],{"class":264},[220,68166,347],{"class":420},[220,68168,359],{"class":264},[212,68170,68172],{"className":251,"code":68171,"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,68173,68174,68184,68188,68202,68206,68215,68223,68227,68231],{"__ignoreMap":178},[220,68175,68176,68178,68180,68182],{"class":222,"line":223},[220,68177,261],{"class":260},[220,68179,11507],{"class":264},[220,68181,268],{"class":260},[220,68183,4007],{"class":230},[220,68185,68186],{"class":222,"line":179},[220,68187,647],{"emptyLinePlaceholder":194},[220,68189,68190,68192,68194,68196,68198,68200],{"class":222,"line":389},[220,68191,1735],{"class":260},[220,68193,1738],{"class":420},[220,68195,1741],{"class":260},[220,68197,1744],{"class":260},[220,68199,1747],{"class":226},[220,68201,1750],{"class":264},[220,68203,68204],{"class":222,"line":399},[220,68205,1765],{"class":264},[220,68207,68208,68210,68213],{"class":222,"line":644},[220,68209,1770],{"class":264},[220,68211,68212],{"class":230},"'RippleWipe'",[220,68214,7004],{"class":264},[220,68216,68217,68219,68221],{"class":222,"line":650},[220,68218,7009],{"class":264},[220,68220,3206],{"class":230},[220,68222,2465],{"class":264},[220,68224,68225],{"class":222,"line":656},[220,68226,7026],{"class":264},[220,68228,68229],{"class":222,"line":673},[220,68230,1787],{"class":264},[220,68232,68233],{"class":222,"line":682},[220,68234,1792],{"class":264},[1504,68236,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":68238},[68239,68240],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fripplewipe",{"title":67972,"description":67980},"docs\u002Fcomponents\u002FRippleWipe","LOswGRn0XjmgHLubxtf4SiP5RFuduVhbbFC6v9OmRrU",{"id":68247,"title":68248,"body":68249,"category":33058,"componentType":25872,"description":68256,"extension":191,"meta":68441,"navigation":194,"path":68442,"requiresChild":32525,"seo":68443,"stem":68444,"__hash__":68445},"components\u002Fdocs\u002Fcomponents\u002FRipples.md","Ripples",{"type":8,"value":68250,"toc":68437},[68251,68254,68257,68259,68261,68264,68266,68435],[11,68252,68248],{"id":68253},"ripples",[15,68255,68256],{},"Concentric animated ripples emanating from a point",[31906,68258],{"component":68248},[23,68260,31910],{"id":26528},[31912,68262],{":props":68263},"[{\"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,68265,31918],{"id":31917},[246,68267,68268,68297,68325,68353,68381],{":tabs":1557},[212,68269,68271],{"className":334,"code":68270,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRipples \u002F>\n\u003C\u002FShader>\n",[99,68272,68273,68281,68289],{"__ignoreMap":178},[220,68274,68275,68277,68279],{"class":222,"line":223},[220,68276,343],{"class":264},[220,68278,347],{"class":346},[220,68280,359],{"class":264},[220,68282,68283,68285,68287],{"class":222,"line":179},[220,68284,364],{"class":264},[220,68286,68248],{"class":346},[220,68288,386],{"class":264},[220,68290,68291,68293,68295],{"class":222,"line":389},[220,68292,402],{"class":264},[220,68294,347],{"class":346},[220,68296,359],{"class":264},[212,68298,68299],{"className":409,"code":68270,"language":411,"meta":178,"style":178},[99,68300,68301,68309,68317],{"__ignoreMap":178},[220,68302,68303,68305,68307],{"class":222,"line":223},[220,68304,343],{"class":264},[220,68306,347],{"class":420},[220,68308,359],{"class":264},[220,68310,68311,68313,68315],{"class":222,"line":179},[220,68312,364],{"class":264},[220,68314,68248],{"class":420},[220,68316,386],{"class":264},[220,68318,68319,68321,68323],{"class":222,"line":389},[220,68320,402],{"class":264},[220,68322,347],{"class":420},[220,68324,359],{"class":264},[212,68326,68327],{"className":2844,"code":68270,"language":2846,"meta":178,"style":178},[99,68328,68329,68337,68345],{"__ignoreMap":178},[220,68330,68331,68333,68335],{"class":222,"line":223},[220,68332,343],{"class":264},[220,68334,347],{"class":420},[220,68336,359],{"class":264},[220,68338,68339,68341,68343],{"class":222,"line":179},[220,68340,364],{"class":264},[220,68342,68248],{"class":420},[220,68344,386],{"class":264},[220,68346,68347,68349,68351],{"class":222,"line":389},[220,68348,402],{"class":264},[220,68350,347],{"class":420},[220,68352,359],{"class":264},[212,68354,68355],{"className":468,"code":68270,"language":469,"meta":178,"style":178},[99,68356,68357,68365,68373],{"__ignoreMap":178},[220,68358,68359,68361,68363],{"class":222,"line":223},[220,68360,343],{"class":264},[220,68362,347],{"class":420},[220,68364,359],{"class":264},[220,68366,68367,68369,68371],{"class":222,"line":179},[220,68368,364],{"class":264},[220,68370,68248],{"class":420},[220,68372,386],{"class":264},[220,68374,68375,68377,68379],{"class":222,"line":389},[220,68376,402],{"class":264},[220,68378,347],{"class":420},[220,68380,359],{"class":264},[212,68382,68384],{"className":251,"code":68383,"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,68385,68386,68396,68400,68414,68418,68427,68431],{"__ignoreMap":178},[220,68387,68388,68390,68392,68394],{"class":222,"line":223},[220,68389,261],{"class":260},[220,68391,11507],{"class":264},[220,68393,268],{"class":260},[220,68395,4007],{"class":230},[220,68397,68398],{"class":222,"line":179},[220,68399,647],{"emptyLinePlaceholder":194},[220,68401,68402,68404,68406,68408,68410,68412],{"class":222,"line":389},[220,68403,1735],{"class":260},[220,68405,1738],{"class":420},[220,68407,1741],{"class":260},[220,68409,1744],{"class":260},[220,68411,1747],{"class":226},[220,68413,1750],{"class":264},[220,68415,68416],{"class":222,"line":399},[220,68417,1765],{"class":264},[220,68419,68420,68422,68425],{"class":222,"line":644},[220,68421,1770],{"class":264},[220,68423,68424],{"class":230},"'Ripples'",[220,68426,2465],{"class":264},[220,68428,68429],{"class":222,"line":650},[220,68430,1787],{"class":264},[220,68432,68433],{"class":222,"line":656},[220,68434,1792],{"class":264},[1504,68436,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":68438},[68439,68440],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fripples",{"title":68248,"description":68256},"docs\u002Fcomponents\u002FRipples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":68447,"title":68448,"body":68449,"category":15903,"componentType":25872,"description":68456,"extension":191,"meta":68686,"navigation":194,"path":68687,"requiresChild":32525,"seo":68688,"stem":68689,"__hash__":68690},"components\u002Fdocs\u002Fcomponents\u002FRoundedRect.md","RoundedRect",{"type":8,"value":68450,"toc":68682},[68451,68454,68457,68459,68461,68464,68466,68680],[11,68452,68448],{"id":68453},"roundedrect",[15,68455,68456],{},"Rounded rectangle with adjustable width, height, and corner rounding",[31906,68458],{"component":68448},[23,68460,31910],{"id":26528},[31912,68462],{":props":68463},"[{\"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,68465,31918],{"id":31917},[246,68467,68468,68508,68546,68584,68622],{":tabs":1557},[212,68469,68471],{"className":334,"code":68470,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,68472,68473,68481,68488,68496,68500],{"__ignoreMap":178},[220,68474,68475,68477,68479],{"class":222,"line":223},[220,68476,343],{"class":264},[220,68478,347],{"class":346},[220,68480,359],{"class":264},[220,68482,68483,68485],{"class":222,"line":179},[220,68484,364],{"class":264},[220,68486,68487],{"class":346},"RoundedRect\n",[220,68489,68490,68492,68494],{"class":222,"line":389},[220,68491,9630],{"class":226},[220,68493,353],{"class":264},[220,68495,9586],{"class":230},[220,68497,68498],{"class":222,"line":399},[220,68499,1234],{"class":264},[220,68501,68502,68504,68506],{"class":222,"line":644},[220,68503,402],{"class":264},[220,68505,347],{"class":346},[220,68507,359],{"class":264},[212,68509,68510],{"className":409,"code":68470,"language":411,"meta":178,"style":178},[99,68511,68512,68520,68526,68534,68538],{"__ignoreMap":178},[220,68513,68514,68516,68518],{"class":222,"line":223},[220,68515,343],{"class":264},[220,68517,347],{"class":420},[220,68519,359],{"class":264},[220,68521,68522,68524],{"class":222,"line":179},[220,68523,364],{"class":264},[220,68525,68487],{"class":420},[220,68527,68528,68530,68532],{"class":222,"line":389},[220,68529,9630],{"class":226},[220,68531,353],{"class":260},[220,68533,9586],{"class":230},[220,68535,68536],{"class":222,"line":399},[220,68537,1234],{"class":264},[220,68539,68540,68542,68544],{"class":222,"line":644},[220,68541,402],{"class":264},[220,68543,347],{"class":420},[220,68545,359],{"class":264},[212,68547,68548],{"className":2844,"code":68470,"language":2846,"meta":178,"style":178},[99,68549,68550,68558,68564,68572,68576],{"__ignoreMap":178},[220,68551,68552,68554,68556],{"class":222,"line":223},[220,68553,343],{"class":264},[220,68555,347],{"class":420},[220,68557,359],{"class":264},[220,68559,68560,68562],{"class":222,"line":179},[220,68561,364],{"class":264},[220,68563,68487],{"class":420},[220,68565,68566,68568,68570],{"class":222,"line":389},[220,68567,9630],{"class":226},[220,68569,353],{"class":264},[220,68571,9586],{"class":230},[220,68573,68574],{"class":222,"line":399},[220,68575,1234],{"class":264},[220,68577,68578,68580,68582],{"class":222,"line":644},[220,68579,402],{"class":264},[220,68581,347],{"class":420},[220,68583,359],{"class":264},[212,68585,68586],{"className":468,"code":68470,"language":469,"meta":178,"style":178},[99,68587,68588,68596,68602,68610,68614],{"__ignoreMap":178},[220,68589,68590,68592,68594],{"class":222,"line":223},[220,68591,343],{"class":264},[220,68593,347],{"class":420},[220,68595,359],{"class":264},[220,68597,68598,68600],{"class":222,"line":179},[220,68599,364],{"class":264},[220,68601,68487],{"class":420},[220,68603,68604,68606,68608],{"class":222,"line":389},[220,68605,9630],{"class":226},[220,68607,353],{"class":260},[220,68609,9586],{"class":230},[220,68611,68612],{"class":222,"line":399},[220,68613,1234],{"class":264},[220,68615,68616,68618,68620],{"class":222,"line":644},[220,68617,402],{"class":264},[220,68619,347],{"class":420},[220,68621,359],{"class":264},[212,68623,68625],{"className":251,"code":68624,"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,68626,68627,68637,68641,68655,68659,68672,68676],{"__ignoreMap":178},[220,68628,68629,68631,68633,68635],{"class":222,"line":223},[220,68630,261],{"class":260},[220,68632,11507],{"class":264},[220,68634,268],{"class":260},[220,68636,4007],{"class":230},[220,68638,68639],{"class":222,"line":179},[220,68640,647],{"emptyLinePlaceholder":194},[220,68642,68643,68645,68647,68649,68651,68653],{"class":222,"line":389},[220,68644,1735],{"class":260},[220,68646,1738],{"class":420},[220,68648,1741],{"class":260},[220,68650,1744],{"class":260},[220,68652,1747],{"class":226},[220,68654,1750],{"class":264},[220,68656,68657],{"class":222,"line":399},[220,68658,1765],{"class":264},[220,68660,68661,68663,68666,68668,68670],{"class":222,"line":644},[220,68662,1770],{"class":264},[220,68664,68665],{"class":230},"'RoundedRect'",[220,68667,1776],{"class":264},[220,68669,10164],{"class":230},[220,68671,1782],{"class":264},[220,68673,68674],{"class":222,"line":650},[220,68675,1787],{"class":264},[220,68677,68678],{"class":222,"line":656},[220,68679,1792],{"class":264},[1504,68681,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":68683},[68684,68685],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Froundedrect",{"title":68448,"description":68456},"docs\u002Fcomponents\u002FRoundedRect","YNw6-pkU9iQAshUF85suO1ImBWcIdD7GPIWfw2mhGYs",{"id":68692,"title":68693,"body":68694,"category":36363,"componentType":25878,"description":68700,"extension":191,"meta":69017,"navigation":194,"path":69018,"requiresChild":194,"seo":69019,"stem":69020,"__hash__":69021},"components\u002Fdocs\u002Fcomponents\u002FSaturation.md","Saturation",{"type":8,"value":68695,"toc":69013},[68696,68698,68701,68703,68705,68708,68710,69011],[11,68697,68693],{"id":8054},[15,68699,68700],{},"Adjust color saturation intensity",[31906,68702],{"component":68693},[23,68704,31910],{"id":26528},[31912,68706],{":props":68707},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,68709,31918],{"id":31917},[246,68711,68712,68768,68827,68883,68941],{":tabs":1557},[212,68713,68715],{"className":334,"code":68714,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68716,68717,68725,68732,68740,68744,68752,68760],{"__ignoreMap":178},[220,68718,68719,68721,68723],{"class":222,"line":223},[220,68720,343],{"class":264},[220,68722,347],{"class":346},[220,68724,359],{"class":264},[220,68726,68727,68729],{"class":222,"line":179},[220,68728,364],{"class":264},[220,68730,68731],{"class":346},"Saturation\n",[220,68733,68734,68736,68738],{"class":222,"line":389},[220,68735,20366],{"class":226},[220,68737,353],{"class":264},[220,68739,36620],{"class":230},[220,68741,68742],{"class":222,"line":399},[220,68743,31954],{"class":264},[220,68745,68746,68748,68750],{"class":222,"line":644},[220,68747,2550],{"class":264},[220,68749,2553],{"class":346},[220,68751,386],{"class":264},[220,68753,68754,68756,68758],{"class":222,"line":650},[220,68755,2567],{"class":264},[220,68757,68693],{"class":346},[220,68759,359],{"class":264},[220,68761,68762,68764,68766],{"class":222,"line":656},[220,68763,402],{"class":264},[220,68765,347],{"class":346},[220,68767,359],{"class":264},[212,68769,68771],{"className":409,"code":68770,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSaturation>\n\u003C\u002FShader>\n",[99,68772,68773,68781,68787,68799,68803,68811,68819],{"__ignoreMap":178},[220,68774,68775,68777,68779],{"class":222,"line":223},[220,68776,343],{"class":264},[220,68778,347],{"class":420},[220,68780,359],{"class":264},[220,68782,68783,68785],{"class":222,"line":179},[220,68784,364],{"class":264},[220,68786,68731],{"class":420},[220,68788,68789,68791,68793,68795,68797],{"class":222,"line":389},[220,68790,20477],{"class":226},[220,68792,353],{"class":260},[220,68794,743],{"class":264},[220,68796,8672],{"class":420},[220,68798,749],{"class":264},[220,68800,68801],{"class":222,"line":399},[220,68802,31954],{"class":264},[220,68804,68805,68807,68809],{"class":222,"line":644},[220,68806,2550],{"class":264},[220,68808,2553],{"class":420},[220,68810,386],{"class":264},[220,68812,68813,68815,68817],{"class":222,"line":650},[220,68814,2567],{"class":264},[220,68816,68693],{"class":420},[220,68818,359],{"class":264},[220,68820,68821,68823,68825],{"class":222,"line":656},[220,68822,402],{"class":264},[220,68824,347],{"class":420},[220,68826,359],{"class":264},[212,68828,68829],{"className":2844,"code":68770,"language":2846,"meta":178,"style":178},[99,68830,68831,68839,68845,68855,68859,68867,68875],{"__ignoreMap":178},[220,68832,68833,68835,68837],{"class":222,"line":223},[220,68834,343],{"class":264},[220,68836,347],{"class":420},[220,68838,359],{"class":264},[220,68840,68841,68843],{"class":222,"line":179},[220,68842,364],{"class":264},[220,68844,68731],{"class":420},[220,68846,68847,68849,68851,68853],{"class":222,"line":389},[220,68848,20477],{"class":226},[220,68850,29866],{"class":264},[220,68852,8672],{"class":420},[220,68854,749],{"class":264},[220,68856,68857],{"class":222,"line":399},[220,68858,31954],{"class":264},[220,68860,68861,68863,68865],{"class":222,"line":644},[220,68862,2550],{"class":264},[220,68864,2553],{"class":420},[220,68866,386],{"class":264},[220,68868,68869,68871,68873],{"class":222,"line":650},[220,68870,2567],{"class":264},[220,68872,68693],{"class":420},[220,68874,359],{"class":264},[220,68876,68877,68879,68881],{"class":222,"line":656},[220,68878,402],{"class":264},[220,68880,347],{"class":420},[220,68882,359],{"class":264},[212,68884,68885],{"className":468,"code":68770,"language":469,"meta":178,"style":178},[99,68886,68887,68895,68901,68913,68917,68925,68933],{"__ignoreMap":178},[220,68888,68889,68891,68893],{"class":222,"line":223},[220,68890,343],{"class":264},[220,68892,347],{"class":420},[220,68894,359],{"class":264},[220,68896,68897,68899],{"class":222,"line":179},[220,68898,364],{"class":264},[220,68900,68731],{"class":420},[220,68902,68903,68905,68907,68909,68911],{"class":222,"line":389},[220,68904,20477],{"class":226},[220,68906,353],{"class":260},[220,68908,743],{"class":264},[220,68910,8672],{"class":420},[220,68912,749],{"class":264},[220,68914,68915],{"class":222,"line":399},[220,68916,31954],{"class":264},[220,68918,68919,68921,68923],{"class":222,"line":644},[220,68920,2550],{"class":264},[220,68922,2553],{"class":420},[220,68924,386],{"class":264},[220,68926,68927,68929,68931],{"class":222,"line":650},[220,68928,2567],{"class":264},[220,68930,68693],{"class":420},[220,68932,359],{"class":264},[220,68934,68935,68937,68939],{"class":222,"line":656},[220,68936,402],{"class":264},[220,68938,347],{"class":420},[220,68940,359],{"class":264},[212,68942,68944],{"className":251,"code":68943,"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,68945,68946,68956,68960,68974,68978,68991,68999,69003,69007],{"__ignoreMap":178},[220,68947,68948,68950,68952,68954],{"class":222,"line":223},[220,68949,261],{"class":260},[220,68951,11507],{"class":264},[220,68953,268],{"class":260},[220,68955,4007],{"class":230},[220,68957,68958],{"class":222,"line":179},[220,68959,647],{"emptyLinePlaceholder":194},[220,68961,68962,68964,68966,68968,68970,68972],{"class":222,"line":389},[220,68963,1735],{"class":260},[220,68965,1738],{"class":420},[220,68967,1741],{"class":260},[220,68969,1744],{"class":260},[220,68971,1747],{"class":226},[220,68973,1750],{"class":264},[220,68975,68976],{"class":222,"line":399},[220,68977,1765],{"class":264},[220,68979,68980,68982,68985,68987,68989],{"class":222,"line":644},[220,68981,1770],{"class":264},[220,68983,68984],{"class":230},"'Saturation'",[220,68986,32198],{"class":264},[220,68988,8672],{"class":420},[220,68990,7541],{"class":264},[220,68992,68993,68995,68997],{"class":222,"line":650},[220,68994,7009],{"class":264},[220,68996,3206],{"class":230},[220,68998,2465],{"class":264},[220,69000,69001],{"class":222,"line":656},[220,69002,7026],{"class":264},[220,69004,69005],{"class":222,"line":673},[220,69006,1787],{"class":264},[220,69008,69009],{"class":222,"line":682},[220,69010,1792],{"class":264},[1504,69012,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69014},[69015,69016],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsaturation",{"title":68693,"description":68700},"docs\u002Fcomponents\u002FSaturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":69023,"title":69024,"body":69025,"category":33058,"componentType":25872,"description":69032,"extension":191,"meta":69217,"navigation":194,"path":69218,"requiresChild":32525,"seo":69219,"stem":69220,"__hash__":69221},"components\u002Fdocs\u002Fcomponents\u002FScratches.md","Scratches",{"type":8,"value":69026,"toc":69213},[69027,69030,69033,69035,69037,69040,69042,69211],[11,69028,69024],{"id":69029},"scratches",[15,69031,69032],{},"Fine hairline scratches, like a worn film or scratched surface",[31906,69034],{"component":69024},[23,69036,31910],{"id":26528},[31912,69038],{":props":69039},"[{\"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,69041,31918],{"id":31917},[246,69043,69044,69073,69101,69129,69157],{":tabs":1557},[212,69045,69047],{"className":334,"code":69046,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CScratches \u002F>\n\u003C\u002FShader>\n",[99,69048,69049,69057,69065],{"__ignoreMap":178},[220,69050,69051,69053,69055],{"class":222,"line":223},[220,69052,343],{"class":264},[220,69054,347],{"class":346},[220,69056,359],{"class":264},[220,69058,69059,69061,69063],{"class":222,"line":179},[220,69060,364],{"class":264},[220,69062,69024],{"class":346},[220,69064,386],{"class":264},[220,69066,69067,69069,69071],{"class":222,"line":389},[220,69068,402],{"class":264},[220,69070,347],{"class":346},[220,69072,359],{"class":264},[212,69074,69075],{"className":409,"code":69046,"language":411,"meta":178,"style":178},[99,69076,69077,69085,69093],{"__ignoreMap":178},[220,69078,69079,69081,69083],{"class":222,"line":223},[220,69080,343],{"class":264},[220,69082,347],{"class":420},[220,69084,359],{"class":264},[220,69086,69087,69089,69091],{"class":222,"line":179},[220,69088,364],{"class":264},[220,69090,69024],{"class":420},[220,69092,386],{"class":264},[220,69094,69095,69097,69099],{"class":222,"line":389},[220,69096,402],{"class":264},[220,69098,347],{"class":420},[220,69100,359],{"class":264},[212,69102,69103],{"className":2844,"code":69046,"language":2846,"meta":178,"style":178},[99,69104,69105,69113,69121],{"__ignoreMap":178},[220,69106,69107,69109,69111],{"class":222,"line":223},[220,69108,343],{"class":264},[220,69110,347],{"class":420},[220,69112,359],{"class":264},[220,69114,69115,69117,69119],{"class":222,"line":179},[220,69116,364],{"class":264},[220,69118,69024],{"class":420},[220,69120,386],{"class":264},[220,69122,69123,69125,69127],{"class":222,"line":389},[220,69124,402],{"class":264},[220,69126,347],{"class":420},[220,69128,359],{"class":264},[212,69130,69131],{"className":468,"code":69046,"language":469,"meta":178,"style":178},[99,69132,69133,69141,69149],{"__ignoreMap":178},[220,69134,69135,69137,69139],{"class":222,"line":223},[220,69136,343],{"class":264},[220,69138,347],{"class":420},[220,69140,359],{"class":264},[220,69142,69143,69145,69147],{"class":222,"line":179},[220,69144,364],{"class":264},[220,69146,69024],{"class":420},[220,69148,386],{"class":264},[220,69150,69151,69153,69155],{"class":222,"line":389},[220,69152,402],{"class":264},[220,69154,347],{"class":420},[220,69156,359],{"class":264},[212,69158,69160],{"className":251,"code":69159,"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,69161,69162,69172,69176,69190,69194,69203,69207],{"__ignoreMap":178},[220,69163,69164,69166,69168,69170],{"class":222,"line":223},[220,69165,261],{"class":260},[220,69167,11507],{"class":264},[220,69169,268],{"class":260},[220,69171,4007],{"class":230},[220,69173,69174],{"class":222,"line":179},[220,69175,647],{"emptyLinePlaceholder":194},[220,69177,69178,69180,69182,69184,69186,69188],{"class":222,"line":389},[220,69179,1735],{"class":260},[220,69181,1738],{"class":420},[220,69183,1741],{"class":260},[220,69185,1744],{"class":260},[220,69187,1747],{"class":226},[220,69189,1750],{"class":264},[220,69191,69192],{"class":222,"line":399},[220,69193,1765],{"class":264},[220,69195,69196,69198,69201],{"class":222,"line":644},[220,69197,1770],{"class":264},[220,69199,69200],{"class":230},"'Scratches'",[220,69202,2465],{"class":264},[220,69204,69205],{"class":222,"line":650},[220,69206,1787],{"class":264},[220,69208,69209],{"class":222,"line":656},[220,69210,1792],{"class":264},[1504,69212,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":69214},[69215,69216],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fscratches",{"title":69024,"description":69032},"docs\u002Fcomponents\u002FScratches","GMDFyn2462g6CmUQVTChBYf2I0nzdMUiUv46i24wk-E",{"id":69223,"title":69224,"body":69225,"category":36363,"componentType":25878,"description":69232,"extension":191,"meta":69493,"navigation":194,"path":69494,"requiresChild":194,"seo":69495,"stem":69496,"__hash__":69497},"components\u002Fdocs\u002Fcomponents\u002FSharpness.md","Sharpness",{"type":8,"value":69226,"toc":69489},[69227,69230,69233,69235,69237,69240,69242,69487],[11,69228,69224],{"id":69229},"sharpness",[15,69231,69232],{},"Adjust image sharpness using a convolution kernel",[31906,69234],{"component":69224},[23,69236,31910],{"id":26528},[31912,69238],{":props":69239},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,69241,31918],{"id":31917},[246,69243,69244,69289,69333,69377,69421],{":tabs":1557},[212,69245,69247],{"className":334,"code":69246,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSharpness>\n \u003CCircle \u002F>\n \u003C\u002FSharpness>\n\u003C\u002FShader>\n",[99,69248,69249,69257,69265,69273,69281],{"__ignoreMap":178},[220,69250,69251,69253,69255],{"class":222,"line":223},[220,69252,343],{"class":264},[220,69254,347],{"class":346},[220,69256,359],{"class":264},[220,69258,69259,69261,69263],{"class":222,"line":179},[220,69260,364],{"class":264},[220,69262,69224],{"class":346},[220,69264,359],{"class":264},[220,69266,69267,69269,69271],{"class":222,"line":389},[220,69268,2550],{"class":264},[220,69270,2553],{"class":346},[220,69272,386],{"class":264},[220,69274,69275,69277,69279],{"class":222,"line":399},[220,69276,2567],{"class":264},[220,69278,69224],{"class":346},[220,69280,359],{"class":264},[220,69282,69283,69285,69287],{"class":222,"line":644},[220,69284,402],{"class":264},[220,69286,347],{"class":346},[220,69288,359],{"class":264},[212,69290,69291],{"className":409,"code":69246,"language":411,"meta":178,"style":178},[99,69292,69293,69301,69309,69317,69325],{"__ignoreMap":178},[220,69294,69295,69297,69299],{"class":222,"line":223},[220,69296,343],{"class":264},[220,69298,347],{"class":420},[220,69300,359],{"class":264},[220,69302,69303,69305,69307],{"class":222,"line":179},[220,69304,364],{"class":264},[220,69306,69224],{"class":420},[220,69308,359],{"class":264},[220,69310,69311,69313,69315],{"class":222,"line":389},[220,69312,2550],{"class":264},[220,69314,2553],{"class":420},[220,69316,386],{"class":264},[220,69318,69319,69321,69323],{"class":222,"line":399},[220,69320,2567],{"class":264},[220,69322,69224],{"class":420},[220,69324,359],{"class":264},[220,69326,69327,69329,69331],{"class":222,"line":644},[220,69328,402],{"class":264},[220,69330,347],{"class":420},[220,69332,359],{"class":264},[212,69334,69335],{"className":2844,"code":69246,"language":2846,"meta":178,"style":178},[99,69336,69337,69345,69353,69361,69369],{"__ignoreMap":178},[220,69338,69339,69341,69343],{"class":222,"line":223},[220,69340,343],{"class":264},[220,69342,347],{"class":420},[220,69344,359],{"class":264},[220,69346,69347,69349,69351],{"class":222,"line":179},[220,69348,364],{"class":264},[220,69350,69224],{"class":420},[220,69352,359],{"class":264},[220,69354,69355,69357,69359],{"class":222,"line":389},[220,69356,2550],{"class":264},[220,69358,2553],{"class":420},[220,69360,386],{"class":264},[220,69362,69363,69365,69367],{"class":222,"line":399},[220,69364,2567],{"class":264},[220,69366,69224],{"class":420},[220,69368,359],{"class":264},[220,69370,69371,69373,69375],{"class":222,"line":644},[220,69372,402],{"class":264},[220,69374,347],{"class":420},[220,69376,359],{"class":264},[212,69378,69379],{"className":468,"code":69246,"language":469,"meta":178,"style":178},[99,69380,69381,69389,69397,69405,69413],{"__ignoreMap":178},[220,69382,69383,69385,69387],{"class":222,"line":223},[220,69384,343],{"class":264},[220,69386,347],{"class":420},[220,69388,359],{"class":264},[220,69390,69391,69393,69395],{"class":222,"line":179},[220,69392,364],{"class":264},[220,69394,69224],{"class":420},[220,69396,359],{"class":264},[220,69398,69399,69401,69403],{"class":222,"line":389},[220,69400,2550],{"class":264},[220,69402,2553],{"class":420},[220,69404,386],{"class":264},[220,69406,69407,69409,69411],{"class":222,"line":399},[220,69408,2567],{"class":264},[220,69410,69224],{"class":420},[220,69412,359],{"class":264},[220,69414,69415,69417,69419],{"class":222,"line":644},[220,69416,402],{"class":264},[220,69418,347],{"class":420},[220,69420,359],{"class":264},[212,69422,69424],{"className":251,"code":69423,"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,69425,69426,69436,69440,69454,69458,69467,69475,69479,69483],{"__ignoreMap":178},[220,69427,69428,69430,69432,69434],{"class":222,"line":223},[220,69429,261],{"class":260},[220,69431,11507],{"class":264},[220,69433,268],{"class":260},[220,69435,4007],{"class":230},[220,69437,69438],{"class":222,"line":179},[220,69439,647],{"emptyLinePlaceholder":194},[220,69441,69442,69444,69446,69448,69450,69452],{"class":222,"line":389},[220,69443,1735],{"class":260},[220,69445,1738],{"class":420},[220,69447,1741],{"class":260},[220,69449,1744],{"class":260},[220,69451,1747],{"class":226},[220,69453,1750],{"class":264},[220,69455,69456],{"class":222,"line":399},[220,69457,1765],{"class":264},[220,69459,69460,69462,69465],{"class":222,"line":644},[220,69461,1770],{"class":264},[220,69463,69464],{"class":230},"'Sharpness'",[220,69466,7004],{"class":264},[220,69468,69469,69471,69473],{"class":222,"line":650},[220,69470,7009],{"class":264},[220,69472,3206],{"class":230},[220,69474,2465],{"class":264},[220,69476,69477],{"class":222,"line":656},[220,69478,7026],{"class":264},[220,69480,69481],{"class":222,"line":673},[220,69482,1787],{"class":264},[220,69484,69485],{"class":222,"line":682},[220,69486,1792],{"class":264},[1504,69488,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":69490},[69491,69492],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsharpness",{"title":69224,"description":69232},"docs\u002Fcomponents\u002FSharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":69499,"title":69500,"body":69501,"category":35554,"componentType":25878,"description":69508,"extension":191,"meta":69873,"navigation":194,"path":69874,"requiresChild":194,"seo":69875,"stem":69876,"__hash__":69877},"components\u002Fdocs\u002Fcomponents\u002FShatter.md","Shatter",{"type":8,"value":69502,"toc":69869},[69503,69506,69509,69511,69513,69516,69518,69867],[11,69504,69500],{"id":69505},"shatter",[15,69507,69508],{},"Broken glass effect with tectonic plate displacement",[31906,69510],{"component":69500},[23,69512,31910],{"id":26528},[31912,69514],{":props":69515},"[{\"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,69517,31918],{"id":31917},[246,69519,69520,69585,69657,69723,69793],{":tabs":1557},[212,69521,69523],{"className":334,"code":69522,"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,69524,69525,69533,69540,69549,69557,69561,69569,69577],{"__ignoreMap":178},[220,69526,69527,69529,69531],{"class":222,"line":223},[220,69528,343],{"class":264},[220,69530,347],{"class":346},[220,69532,359],{"class":264},[220,69534,69535,69537],{"class":222,"line":179},[220,69536,364],{"class":264},[220,69538,69539],{"class":346},"Shatter\n",[220,69541,69542,69544,69546],{"class":222,"line":389},[220,69543,20366],{"class":226},[220,69545,353],{"class":264},[220,69547,69548],{"class":230},"\"4\"\n",[220,69550,69551,69553,69555],{"class":222,"line":399},[220,69552,17400],{"class":226},[220,69554,353],{"class":264},[220,69556,48143],{"class":230},[220,69558,69559],{"class":222,"line":644},[220,69560,31954],{"class":264},[220,69562,69563,69565,69567],{"class":222,"line":650},[220,69564,2550],{"class":264},[220,69566,2553],{"class":346},[220,69568,386],{"class":264},[220,69570,69571,69573,69575],{"class":222,"line":656},[220,69572,2567],{"class":264},[220,69574,69500],{"class":346},[220,69576,359],{"class":264},[220,69578,69579,69581,69583],{"class":222,"line":673},[220,69580,402],{"class":264},[220,69582,347],{"class":346},[220,69584,359],{"class":264},[212,69586,69588],{"className":409,"code":69587,"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,69589,69590,69598,69604,69617,69629,69633,69641,69649],{"__ignoreMap":178},[220,69591,69592,69594,69596],{"class":222,"line":223},[220,69593,343],{"class":264},[220,69595,347],{"class":420},[220,69597,359],{"class":264},[220,69599,69600,69602],{"class":222,"line":179},[220,69601,364],{"class":264},[220,69603,69539],{"class":420},[220,69605,69606,69608,69610,69612,69615],{"class":222,"line":389},[220,69607,20477],{"class":226},[220,69609,353],{"class":260},[220,69611,743],{"class":264},[220,69613,69614],{"class":420},"4",[220,69616,749],{"class":264},[220,69618,69619,69621,69623,69625,69627],{"class":222,"line":399},[220,69620,9640],{"class":226},[220,69622,353],{"class":260},[220,69624,743],{"class":264},[220,69626,8244],{"class":420},[220,69628,749],{"class":264},[220,69630,69631],{"class":222,"line":644},[220,69632,31954],{"class":264},[220,69634,69635,69637,69639],{"class":222,"line":650},[220,69636,2550],{"class":264},[220,69638,2553],{"class":420},[220,69640,386],{"class":264},[220,69642,69643,69645,69647],{"class":222,"line":656},[220,69644,2567],{"class":264},[220,69646,69500],{"class":420},[220,69648,359],{"class":264},[220,69650,69651,69653,69655],{"class":222,"line":673},[220,69652,402],{"class":264},[220,69654,347],{"class":420},[220,69656,359],{"class":264},[212,69658,69659],{"className":2844,"code":69587,"language":2846,"meta":178,"style":178},[99,69660,69661,69669,69675,69685,69695,69699,69707,69715],{"__ignoreMap":178},[220,69662,69663,69665,69667],{"class":222,"line":223},[220,69664,343],{"class":264},[220,69666,347],{"class":420},[220,69668,359],{"class":264},[220,69670,69671,69673],{"class":222,"line":179},[220,69672,364],{"class":264},[220,69674,69539],{"class":420},[220,69676,69677,69679,69681,69683],{"class":222,"line":389},[220,69678,20477],{"class":226},[220,69680,29866],{"class":264},[220,69682,69614],{"class":420},[220,69684,749],{"class":264},[220,69686,69687,69689,69691,69693],{"class":222,"line":399},[220,69688,9640],{"class":226},[220,69690,29866],{"class":264},[220,69692,8244],{"class":420},[220,69694,749],{"class":264},[220,69696,69697],{"class":222,"line":644},[220,69698,31954],{"class":264},[220,69700,69701,69703,69705],{"class":222,"line":650},[220,69702,2550],{"class":264},[220,69704,2553],{"class":420},[220,69706,386],{"class":264},[220,69708,69709,69711,69713],{"class":222,"line":656},[220,69710,2567],{"class":264},[220,69712,69500],{"class":420},[220,69714,359],{"class":264},[220,69716,69717,69719,69721],{"class":222,"line":673},[220,69718,402],{"class":264},[220,69720,347],{"class":420},[220,69722,359],{"class":264},[212,69724,69725],{"className":468,"code":69587,"language":469,"meta":178,"style":178},[99,69726,69727,69735,69741,69753,69765,69769,69777,69785],{"__ignoreMap":178},[220,69728,69729,69731,69733],{"class":222,"line":223},[220,69730,343],{"class":264},[220,69732,347],{"class":420},[220,69734,359],{"class":264},[220,69736,69737,69739],{"class":222,"line":179},[220,69738,364],{"class":264},[220,69740,69539],{"class":420},[220,69742,69743,69745,69747,69749,69751],{"class":222,"line":389},[220,69744,20477],{"class":226},[220,69746,353],{"class":260},[220,69748,743],{"class":264},[220,69750,69614],{"class":420},[220,69752,749],{"class":264},[220,69754,69755,69757,69759,69761,69763],{"class":222,"line":399},[220,69756,9640],{"class":226},[220,69758,353],{"class":260},[220,69760,743],{"class":264},[220,69762,8244],{"class":420},[220,69764,749],{"class":264},[220,69766,69767],{"class":222,"line":644},[220,69768,31954],{"class":264},[220,69770,69771,69773,69775],{"class":222,"line":650},[220,69772,2550],{"class":264},[220,69774,2553],{"class":420},[220,69776,386],{"class":264},[220,69778,69779,69781,69783],{"class":222,"line":656},[220,69780,2567],{"class":264},[220,69782,69500],{"class":420},[220,69784,359],{"class":264},[220,69786,69787,69789,69791],{"class":222,"line":673},[220,69788,402],{"class":264},[220,69790,347],{"class":420},[220,69792,359],{"class":264},[212,69794,69796],{"className":251,"code":69795,"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,69797,69798,69808,69812,69826,69830,69847,69855,69859,69863],{"__ignoreMap":178},[220,69799,69800,69802,69804,69806],{"class":222,"line":223},[220,69801,261],{"class":260},[220,69803,11507],{"class":264},[220,69805,268],{"class":260},[220,69807,4007],{"class":230},[220,69809,69810],{"class":222,"line":179},[220,69811,647],{"emptyLinePlaceholder":194},[220,69813,69814,69816,69818,69820,69822,69824],{"class":222,"line":389},[220,69815,1735],{"class":260},[220,69817,1738],{"class":420},[220,69819,1741],{"class":260},[220,69821,1744],{"class":260},[220,69823,1747],{"class":226},[220,69825,1750],{"class":264},[220,69827,69828],{"class":222,"line":399},[220,69829,1765],{"class":264},[220,69831,69832,69834,69837,69839,69841,69843,69845],{"class":222,"line":644},[220,69833,1770],{"class":264},[220,69835,69836],{"class":230},"'Shatter'",[220,69838,32198],{"class":264},[220,69840,69614],{"class":420},[220,69842,6561],{"class":264},[220,69844,8244],{"class":420},[220,69846,7541],{"class":264},[220,69848,69849,69851,69853],{"class":222,"line":650},[220,69850,7009],{"class":264},[220,69852,3206],{"class":230},[220,69854,2465],{"class":264},[220,69856,69857],{"class":222,"line":656},[220,69858,7026],{"class":264},[220,69860,69861],{"class":222,"line":673},[220,69862,1787],{"class":264},[220,69864,69865],{"class":222,"line":682},[220,69866,1792],{"class":264},[1504,69868,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":69870},[69871,69872],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fshatter",{"title":69500,"description":69508},"docs\u002Fcomponents\u002FShatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":69879,"title":69880,"body":69881,"category":33058,"componentType":25872,"description":69888,"extension":191,"meta":70073,"navigation":194,"path":70074,"requiresChild":32525,"seo":70075,"stem":70076,"__hash__":70077},"components\u002Fdocs\u002Fcomponents\u002FSimplexNoise.md","SimplexNoise",{"type":8,"value":69882,"toc":70069},[69883,69886,69889,69891,69893,69896,69898,70067],[11,69884,69880],{"id":69885},"simplexnoise",[15,69887,69888],{},"Organic noise with animated movement",[31906,69890],{"component":69880},[23,69892,31910],{"id":26528},[31912,69894],{":props":69895},"[{\"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,69897,31918],{"id":31917},[246,69899,69900,69929,69957,69985,70013],{":tabs":1557},[212,69901,69903],{"className":334,"code":69902,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSimplexNoise \u002F>\n\u003C\u002FShader>\n",[99,69904,69905,69913,69921],{"__ignoreMap":178},[220,69906,69907,69909,69911],{"class":222,"line":223},[220,69908,343],{"class":264},[220,69910,347],{"class":346},[220,69912,359],{"class":264},[220,69914,69915,69917,69919],{"class":222,"line":179},[220,69916,364],{"class":264},[220,69918,69880],{"class":346},[220,69920,386],{"class":264},[220,69922,69923,69925,69927],{"class":222,"line":389},[220,69924,402],{"class":264},[220,69926,347],{"class":346},[220,69928,359],{"class":264},[212,69930,69931],{"className":409,"code":69902,"language":411,"meta":178,"style":178},[99,69932,69933,69941,69949],{"__ignoreMap":178},[220,69934,69935,69937,69939],{"class":222,"line":223},[220,69936,343],{"class":264},[220,69938,347],{"class":420},[220,69940,359],{"class":264},[220,69942,69943,69945,69947],{"class":222,"line":179},[220,69944,364],{"class":264},[220,69946,69880],{"class":420},[220,69948,386],{"class":264},[220,69950,69951,69953,69955],{"class":222,"line":389},[220,69952,402],{"class":264},[220,69954,347],{"class":420},[220,69956,359],{"class":264},[212,69958,69959],{"className":2844,"code":69902,"language":2846,"meta":178,"style":178},[99,69960,69961,69969,69977],{"__ignoreMap":178},[220,69962,69963,69965,69967],{"class":222,"line":223},[220,69964,343],{"class":264},[220,69966,347],{"class":420},[220,69968,359],{"class":264},[220,69970,69971,69973,69975],{"class":222,"line":179},[220,69972,364],{"class":264},[220,69974,69880],{"class":420},[220,69976,386],{"class":264},[220,69978,69979,69981,69983],{"class":222,"line":389},[220,69980,402],{"class":264},[220,69982,347],{"class":420},[220,69984,359],{"class":264},[212,69986,69987],{"className":468,"code":69902,"language":469,"meta":178,"style":178},[99,69988,69989,69997,70005],{"__ignoreMap":178},[220,69990,69991,69993,69995],{"class":222,"line":223},[220,69992,343],{"class":264},[220,69994,347],{"class":420},[220,69996,359],{"class":264},[220,69998,69999,70001,70003],{"class":222,"line":179},[220,70000,364],{"class":264},[220,70002,69880],{"class":420},[220,70004,386],{"class":264},[220,70006,70007,70009,70011],{"class":222,"line":389},[220,70008,402],{"class":264},[220,70010,347],{"class":420},[220,70012,359],{"class":264},[212,70014,70016],{"className":251,"code":70015,"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,70017,70018,70028,70032,70046,70050,70059,70063],{"__ignoreMap":178},[220,70019,70020,70022,70024,70026],{"class":222,"line":223},[220,70021,261],{"class":260},[220,70023,11507],{"class":264},[220,70025,268],{"class":260},[220,70027,4007],{"class":230},[220,70029,70030],{"class":222,"line":179},[220,70031,647],{"emptyLinePlaceholder":194},[220,70033,70034,70036,70038,70040,70042,70044],{"class":222,"line":389},[220,70035,1735],{"class":260},[220,70037,1738],{"class":420},[220,70039,1741],{"class":260},[220,70041,1744],{"class":260},[220,70043,1747],{"class":226},[220,70045,1750],{"class":264},[220,70047,70048],{"class":222,"line":399},[220,70049,1765],{"class":264},[220,70051,70052,70054,70057],{"class":222,"line":644},[220,70053,1770],{"class":264},[220,70055,70056],{"class":230},"'SimplexNoise'",[220,70058,2465],{"class":264},[220,70060,70061],{"class":222,"line":650},[220,70062,1787],{"class":264},[220,70064,70065],{"class":222,"line":656},[220,70066,1792],{"class":264},[1504,70068,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":70070},[70071,70072],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsimplexnoise",{"title":69880,"description":69888},"docs\u002Fcomponents\u002FSimplexNoise","OlMmAZtW28X0YGNFqcNVmDZ6P2vIZ5Qkl0_KhxfQKVc",{"id":70079,"title":70080,"body":70081,"category":33058,"componentType":25872,"description":70088,"extension":191,"meta":70318,"navigation":194,"path":70319,"requiresChild":32525,"seo":70320,"stem":70321,"__hash__":70322},"components\u002Fdocs\u002Fcomponents\u002FSineWave.md","SineWave",{"type":8,"value":70082,"toc":70314},[70083,70086,70089,70091,70093,70096,70098,70312],[11,70084,70080],{"id":70085},"sinewave",[15,70087,70088],{},"Animated wave with thickness and softness",[31906,70090],{"component":70080},[23,70092,31910],{"id":26528},[31912,70094],{":props":70095},"[{\"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,70097,31918],{"id":31917},[246,70099,70100,70140,70178,70216,70254],{":tabs":1557},[212,70101,70103],{"className":334,"code":70102,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,70104,70105,70113,70120,70128,70132],{"__ignoreMap":178},[220,70106,70107,70109,70111],{"class":222,"line":223},[220,70108,343],{"class":264},[220,70110,347],{"class":346},[220,70112,359],{"class":264},[220,70114,70115,70117],{"class":222,"line":179},[220,70116,364],{"class":264},[220,70118,70119],{"class":346},"SineWave\n",[220,70121,70122,70124,70126],{"class":222,"line":389},[220,70123,9630],{"class":226},[220,70125,353],{"class":264},[220,70127,9586],{"class":230},[220,70129,70130],{"class":222,"line":399},[220,70131,1234],{"class":264},[220,70133,70134,70136,70138],{"class":222,"line":644},[220,70135,402],{"class":264},[220,70137,347],{"class":346},[220,70139,359],{"class":264},[212,70141,70142],{"className":409,"code":70102,"language":411,"meta":178,"style":178},[99,70143,70144,70152,70158,70166,70170],{"__ignoreMap":178},[220,70145,70146,70148,70150],{"class":222,"line":223},[220,70147,343],{"class":264},[220,70149,347],{"class":420},[220,70151,359],{"class":264},[220,70153,70154,70156],{"class":222,"line":179},[220,70155,364],{"class":264},[220,70157,70119],{"class":420},[220,70159,70160,70162,70164],{"class":222,"line":389},[220,70161,9630],{"class":226},[220,70163,353],{"class":260},[220,70165,9586],{"class":230},[220,70167,70168],{"class":222,"line":399},[220,70169,1234],{"class":264},[220,70171,70172,70174,70176],{"class":222,"line":644},[220,70173,402],{"class":264},[220,70175,347],{"class":420},[220,70177,359],{"class":264},[212,70179,70180],{"className":2844,"code":70102,"language":2846,"meta":178,"style":178},[99,70181,70182,70190,70196,70204,70208],{"__ignoreMap":178},[220,70183,70184,70186,70188],{"class":222,"line":223},[220,70185,343],{"class":264},[220,70187,347],{"class":420},[220,70189,359],{"class":264},[220,70191,70192,70194],{"class":222,"line":179},[220,70193,364],{"class":264},[220,70195,70119],{"class":420},[220,70197,70198,70200,70202],{"class":222,"line":389},[220,70199,9630],{"class":226},[220,70201,353],{"class":264},[220,70203,9586],{"class":230},[220,70205,70206],{"class":222,"line":399},[220,70207,1234],{"class":264},[220,70209,70210,70212,70214],{"class":222,"line":644},[220,70211,402],{"class":264},[220,70213,347],{"class":420},[220,70215,359],{"class":264},[212,70217,70218],{"className":468,"code":70102,"language":469,"meta":178,"style":178},[99,70219,70220,70228,70234,70242,70246],{"__ignoreMap":178},[220,70221,70222,70224,70226],{"class":222,"line":223},[220,70223,343],{"class":264},[220,70225,347],{"class":420},[220,70227,359],{"class":264},[220,70229,70230,70232],{"class":222,"line":179},[220,70231,364],{"class":264},[220,70233,70119],{"class":420},[220,70235,70236,70238,70240],{"class":222,"line":389},[220,70237,9630],{"class":226},[220,70239,353],{"class":260},[220,70241,9586],{"class":230},[220,70243,70244],{"class":222,"line":399},[220,70245,1234],{"class":264},[220,70247,70248,70250,70252],{"class":222,"line":644},[220,70249,402],{"class":264},[220,70251,347],{"class":420},[220,70253,359],{"class":264},[212,70255,70257],{"className":251,"code":70256,"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,70258,70259,70269,70273,70287,70291,70304,70308],{"__ignoreMap":178},[220,70260,70261,70263,70265,70267],{"class":222,"line":223},[220,70262,261],{"class":260},[220,70264,11507],{"class":264},[220,70266,268],{"class":260},[220,70268,4007],{"class":230},[220,70270,70271],{"class":222,"line":179},[220,70272,647],{"emptyLinePlaceholder":194},[220,70274,70275,70277,70279,70281,70283,70285],{"class":222,"line":389},[220,70276,1735],{"class":260},[220,70278,1738],{"class":420},[220,70280,1741],{"class":260},[220,70282,1744],{"class":260},[220,70284,1747],{"class":226},[220,70286,1750],{"class":264},[220,70288,70289],{"class":222,"line":399},[220,70290,1765],{"class":264},[220,70292,70293,70295,70298,70300,70302],{"class":222,"line":644},[220,70294,1770],{"class":264},[220,70296,70297],{"class":230},"'SineWave'",[220,70299,1776],{"class":264},[220,70301,10164],{"class":230},[220,70303,1782],{"class":264},[220,70305,70306],{"class":222,"line":650},[220,70307,1787],{"class":264},[220,70309,70310],{"class":222,"line":656},[220,70311,1792],{"class":264},[1504,70313,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70315},[70316,70317],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsinewave",{"title":70080,"description":70088},"docs\u002Fcomponents\u002FSineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":70324,"title":70325,"body":70326,"category":33668,"componentType":25878,"description":70333,"extension":191,"meta":70594,"navigation":194,"path":70595,"requiresChild":194,"seo":70596,"stem":70597,"__hash__":70598},"components\u002Fdocs\u002Fcomponents\u002FSliceWipe.md","SliceWipe",{"type":8,"value":70327,"toc":70590},[70328,70331,70334,70336,70338,70341,70343,70588],[11,70329,70325],{"id":70330},"slicewipe",[15,70332,70333],{},"Slice the content into strips that slide away in alternating directions",[31906,70335],{"component":70325},[23,70337,31910],{"id":26528},[31912,70339],{":props":70340},"[{\"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,70342,31918],{"id":31917},[246,70344,70345,70390,70434,70478,70522],{":tabs":1557},[212,70346,70348],{"className":334,"code":70347,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSliceWipe>\n \u003CCircle \u002F>\n \u003C\u002FSliceWipe>\n\u003C\u002FShader>\n",[99,70349,70350,70358,70366,70374,70382],{"__ignoreMap":178},[220,70351,70352,70354,70356],{"class":222,"line":223},[220,70353,343],{"class":264},[220,70355,347],{"class":346},[220,70357,359],{"class":264},[220,70359,70360,70362,70364],{"class":222,"line":179},[220,70361,364],{"class":264},[220,70363,70325],{"class":346},[220,70365,359],{"class":264},[220,70367,70368,70370,70372],{"class":222,"line":389},[220,70369,2550],{"class":264},[220,70371,2553],{"class":346},[220,70373,386],{"class":264},[220,70375,70376,70378,70380],{"class":222,"line":399},[220,70377,2567],{"class":264},[220,70379,70325],{"class":346},[220,70381,359],{"class":264},[220,70383,70384,70386,70388],{"class":222,"line":644},[220,70385,402],{"class":264},[220,70387,347],{"class":346},[220,70389,359],{"class":264},[212,70391,70392],{"className":409,"code":70347,"language":411,"meta":178,"style":178},[99,70393,70394,70402,70410,70418,70426],{"__ignoreMap":178},[220,70395,70396,70398,70400],{"class":222,"line":223},[220,70397,343],{"class":264},[220,70399,347],{"class":420},[220,70401,359],{"class":264},[220,70403,70404,70406,70408],{"class":222,"line":179},[220,70405,364],{"class":264},[220,70407,70325],{"class":420},[220,70409,359],{"class":264},[220,70411,70412,70414,70416],{"class":222,"line":389},[220,70413,2550],{"class":264},[220,70415,2553],{"class":420},[220,70417,386],{"class":264},[220,70419,70420,70422,70424],{"class":222,"line":399},[220,70421,2567],{"class":264},[220,70423,70325],{"class":420},[220,70425,359],{"class":264},[220,70427,70428,70430,70432],{"class":222,"line":644},[220,70429,402],{"class":264},[220,70431,347],{"class":420},[220,70433,359],{"class":264},[212,70435,70436],{"className":2844,"code":70347,"language":2846,"meta":178,"style":178},[99,70437,70438,70446,70454,70462,70470],{"__ignoreMap":178},[220,70439,70440,70442,70444],{"class":222,"line":223},[220,70441,343],{"class":264},[220,70443,347],{"class":420},[220,70445,359],{"class":264},[220,70447,70448,70450,70452],{"class":222,"line":179},[220,70449,364],{"class":264},[220,70451,70325],{"class":420},[220,70453,359],{"class":264},[220,70455,70456,70458,70460],{"class":222,"line":389},[220,70457,2550],{"class":264},[220,70459,2553],{"class":420},[220,70461,386],{"class":264},[220,70463,70464,70466,70468],{"class":222,"line":399},[220,70465,2567],{"class":264},[220,70467,70325],{"class":420},[220,70469,359],{"class":264},[220,70471,70472,70474,70476],{"class":222,"line":644},[220,70473,402],{"class":264},[220,70475,347],{"class":420},[220,70477,359],{"class":264},[212,70479,70480],{"className":468,"code":70347,"language":469,"meta":178,"style":178},[99,70481,70482,70490,70498,70506,70514],{"__ignoreMap":178},[220,70483,70484,70486,70488],{"class":222,"line":223},[220,70485,343],{"class":264},[220,70487,347],{"class":420},[220,70489,359],{"class":264},[220,70491,70492,70494,70496],{"class":222,"line":179},[220,70493,364],{"class":264},[220,70495,70325],{"class":420},[220,70497,359],{"class":264},[220,70499,70500,70502,70504],{"class":222,"line":389},[220,70501,2550],{"class":264},[220,70503,2553],{"class":420},[220,70505,386],{"class":264},[220,70507,70508,70510,70512],{"class":222,"line":399},[220,70509,2567],{"class":264},[220,70511,70325],{"class":420},[220,70513,359],{"class":264},[220,70515,70516,70518,70520],{"class":222,"line":644},[220,70517,402],{"class":264},[220,70519,347],{"class":420},[220,70521,359],{"class":264},[212,70523,70525],{"className":251,"code":70524,"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,70526,70527,70537,70541,70555,70559,70568,70576,70580,70584],{"__ignoreMap":178},[220,70528,70529,70531,70533,70535],{"class":222,"line":223},[220,70530,261],{"class":260},[220,70532,11507],{"class":264},[220,70534,268],{"class":260},[220,70536,4007],{"class":230},[220,70538,70539],{"class":222,"line":179},[220,70540,647],{"emptyLinePlaceholder":194},[220,70542,70543,70545,70547,70549,70551,70553],{"class":222,"line":389},[220,70544,1735],{"class":260},[220,70546,1738],{"class":420},[220,70548,1741],{"class":260},[220,70550,1744],{"class":260},[220,70552,1747],{"class":226},[220,70554,1750],{"class":264},[220,70556,70557],{"class":222,"line":399},[220,70558,1765],{"class":264},[220,70560,70561,70563,70566],{"class":222,"line":644},[220,70562,1770],{"class":264},[220,70564,70565],{"class":230},"'SliceWipe'",[220,70567,7004],{"class":264},[220,70569,70570,70572,70574],{"class":222,"line":650},[220,70571,7009],{"class":264},[220,70573,3206],{"class":230},[220,70575,2465],{"class":264},[220,70577,70578],{"class":222,"line":656},[220,70579,7026],{"class":264},[220,70581,70582],{"class":222,"line":673},[220,70583,1787],{"class":264},[220,70585,70586],{"class":222,"line":682},[220,70587,1792],{"class":264},[1504,70589,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":70591},[70592,70593],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fslicewipe",{"title":70325,"description":70333},"docs\u002Fcomponents\u002FSliceWipe","USVVGPmSms2A_JjUbAZu4pSl0AhaAY6Dkor41vykVBA",{"id":70600,"title":70601,"body":70602,"category":35554,"componentType":25872,"description":70609,"extension":191,"meta":70850,"navigation":194,"path":70851,"requiresChild":32525,"seo":70852,"stem":70853,"__hash__":70854},"components\u002Fdocs\u002Fcomponents\u002FSmoke.md","Smoke",{"type":8,"value":70603,"toc":70846},[70604,70607,70610,70612,70614,70617,70619,70844],[11,70605,70601],{"id":70606},"smoke",[15,70608,70609],{},"Realistic fluid smoke simulation with vorticity dynamics",[31906,70611],{"component":70601},[23,70613,31910],{"id":26528},[31912,70615],{":props":70616},"[{\"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,70618,31918],{"id":31917},[246,70620,70621,70661,70704,70744,70786],{":tabs":1557},[212,70622,70624],{"className":334,"code":70623,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70625,70626,70634,70641,70649,70653],{"__ignoreMap":178},[220,70627,70628,70630,70632],{"class":222,"line":223},[220,70629,343],{"class":264},[220,70631,347],{"class":346},[220,70633,359],{"class":264},[220,70635,70636,70638],{"class":222,"line":179},[220,70637,364],{"class":264},[220,70639,70640],{"class":346},"Smoke\n",[220,70642,70643,70645,70647],{"class":222,"line":389},[220,70644,20366],{"class":226},[220,70646,353],{"class":264},[220,70648,36620],{"class":230},[220,70650,70651],{"class":222,"line":399},[220,70652,1234],{"class":264},[220,70654,70655,70657,70659],{"class":222,"line":644},[220,70656,402],{"class":264},[220,70658,347],{"class":346},[220,70660,359],{"class":264},[212,70662,70664],{"className":409,"code":70663,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmoke\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70665,70666,70674,70680,70692,70696],{"__ignoreMap":178},[220,70667,70668,70670,70672],{"class":222,"line":223},[220,70669,343],{"class":264},[220,70671,347],{"class":420},[220,70673,359],{"class":264},[220,70675,70676,70678],{"class":222,"line":179},[220,70677,364],{"class":264},[220,70679,70640],{"class":420},[220,70681,70682,70684,70686,70688,70690],{"class":222,"line":389},[220,70683,20477],{"class":226},[220,70685,353],{"class":260},[220,70687,743],{"class":264},[220,70689,8672],{"class":420},[220,70691,749],{"class":264},[220,70693,70694],{"class":222,"line":399},[220,70695,1234],{"class":264},[220,70697,70698,70700,70702],{"class":222,"line":644},[220,70699,402],{"class":264},[220,70701,347],{"class":420},[220,70703,359],{"class":264},[212,70705,70706],{"className":2844,"code":70663,"language":2846,"meta":178,"style":178},[99,70707,70708,70716,70722,70732,70736],{"__ignoreMap":178},[220,70709,70710,70712,70714],{"class":222,"line":223},[220,70711,343],{"class":264},[220,70713,347],{"class":420},[220,70715,359],{"class":264},[220,70717,70718,70720],{"class":222,"line":179},[220,70719,364],{"class":264},[220,70721,70640],{"class":420},[220,70723,70724,70726,70728,70730],{"class":222,"line":389},[220,70725,20477],{"class":226},[220,70727,29866],{"class":264},[220,70729,8672],{"class":420},[220,70731,749],{"class":264},[220,70733,70734],{"class":222,"line":399},[220,70735,1234],{"class":264},[220,70737,70738,70740,70742],{"class":222,"line":644},[220,70739,402],{"class":264},[220,70741,347],{"class":420},[220,70743,359],{"class":264},[212,70745,70746],{"className":468,"code":70663,"language":469,"meta":178,"style":178},[99,70747,70748,70756,70762,70774,70778],{"__ignoreMap":178},[220,70749,70750,70752,70754],{"class":222,"line":223},[220,70751,343],{"class":264},[220,70753,347],{"class":420},[220,70755,359],{"class":264},[220,70757,70758,70760],{"class":222,"line":179},[220,70759,364],{"class":264},[220,70761,70640],{"class":420},[220,70763,70764,70766,70768,70770,70772],{"class":222,"line":389},[220,70765,20477],{"class":226},[220,70767,353],{"class":260},[220,70769,743],{"class":264},[220,70771,8672],{"class":420},[220,70773,749],{"class":264},[220,70775,70776],{"class":222,"line":399},[220,70777,1234],{"class":264},[220,70779,70780,70782,70784],{"class":222,"line":644},[220,70781,402],{"class":264},[220,70783,347],{"class":420},[220,70785,359],{"class":264},[212,70787,70789],{"className":251,"code":70788,"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,70790,70791,70801,70805,70819,70823,70836,70840],{"__ignoreMap":178},[220,70792,70793,70795,70797,70799],{"class":222,"line":223},[220,70794,261],{"class":260},[220,70796,11507],{"class":264},[220,70798,268],{"class":260},[220,70800,4007],{"class":230},[220,70802,70803],{"class":222,"line":179},[220,70804,647],{"emptyLinePlaceholder":194},[220,70806,70807,70809,70811,70813,70815,70817],{"class":222,"line":389},[220,70808,1735],{"class":260},[220,70810,1738],{"class":420},[220,70812,1741],{"class":260},[220,70814,1744],{"class":260},[220,70816,1747],{"class":226},[220,70818,1750],{"class":264},[220,70820,70821],{"class":222,"line":399},[220,70822,1765],{"class":264},[220,70824,70825,70827,70830,70832,70834],{"class":222,"line":644},[220,70826,1770],{"class":264},[220,70828,70829],{"class":230},"'Smoke'",[220,70831,32198],{"class":264},[220,70833,8672],{"class":420},[220,70835,1782],{"class":264},[220,70837,70838],{"class":222,"line":650},[220,70839,1787],{"class":264},[220,70841,70842],{"class":222,"line":656},[220,70843,1792],{"class":264},[1504,70845,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":70847},[70848,70849],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsmoke",{"title":70601,"description":70609},"docs\u002Fcomponents\u002FSmoke","kmT5-Q-A27LQPli-OryCccLp1204O9WNaimuVumo0qA",{"id":70856,"title":23171,"body":70857,"category":36564,"componentType":25872,"description":70864,"extension":191,"meta":71105,"navigation":194,"path":71106,"requiresChild":32525,"seo":71107,"stem":71108,"__hash__":71109},"components\u002Fdocs\u002Fcomponents\u002FSmokeFill.md",{"type":8,"value":70858,"toc":71101},[70859,70862,70865,70867,70869,70872,70874,71099],[11,70860,23171],{"id":70861},"smokefill",[15,70863,70864],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[31906,70866],{"component":23171},[23,70868,31910],{"id":26528},[31912,70870],{":props":70871},"[{\"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,70873,31918],{"id":31917},[246,70875,70876,70916,70959,70999,71041],{":tabs":1557},[212,70877,70879],{"className":334,"code":70878,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,70880,70881,70889,70896,70904,70908],{"__ignoreMap":178},[220,70882,70883,70885,70887],{"class":222,"line":223},[220,70884,343],{"class":264},[220,70886,347],{"class":346},[220,70888,359],{"class":264},[220,70890,70891,70893],{"class":222,"line":179},[220,70892,364],{"class":264},[220,70894,70895],{"class":346},"SmokeFill\n",[220,70897,70898,70900,70902],{"class":222,"line":389},[220,70899,20366],{"class":226},[220,70901,353],{"class":264},[220,70903,36620],{"class":230},[220,70905,70906],{"class":222,"line":399},[220,70907,1234],{"class":264},[220,70909,70910,70912,70914],{"class":222,"line":644},[220,70911,402],{"class":264},[220,70913,347],{"class":346},[220,70915,359],{"class":264},[212,70917,70919],{"className":409,"code":70918,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,70920,70921,70929,70935,70947,70951],{"__ignoreMap":178},[220,70922,70923,70925,70927],{"class":222,"line":223},[220,70924,343],{"class":264},[220,70926,347],{"class":420},[220,70928,359],{"class":264},[220,70930,70931,70933],{"class":222,"line":179},[220,70932,364],{"class":264},[220,70934,70895],{"class":420},[220,70936,70937,70939,70941,70943,70945],{"class":222,"line":389},[220,70938,20477],{"class":226},[220,70940,353],{"class":260},[220,70942,743],{"class":264},[220,70944,8672],{"class":420},[220,70946,749],{"class":264},[220,70948,70949],{"class":222,"line":399},[220,70950,1234],{"class":264},[220,70952,70953,70955,70957],{"class":222,"line":644},[220,70954,402],{"class":264},[220,70956,347],{"class":420},[220,70958,359],{"class":264},[212,70960,70961],{"className":2844,"code":70918,"language":2846,"meta":178,"style":178},[99,70962,70963,70971,70977,70987,70991],{"__ignoreMap":178},[220,70964,70965,70967,70969],{"class":222,"line":223},[220,70966,343],{"class":264},[220,70968,347],{"class":420},[220,70970,359],{"class":264},[220,70972,70973,70975],{"class":222,"line":179},[220,70974,364],{"class":264},[220,70976,70895],{"class":420},[220,70978,70979,70981,70983,70985],{"class":222,"line":389},[220,70980,20477],{"class":226},[220,70982,29866],{"class":264},[220,70984,8672],{"class":420},[220,70986,749],{"class":264},[220,70988,70989],{"class":222,"line":399},[220,70990,1234],{"class":264},[220,70992,70993,70995,70997],{"class":222,"line":644},[220,70994,402],{"class":264},[220,70996,347],{"class":420},[220,70998,359],{"class":264},[212,71000,71001],{"className":468,"code":70918,"language":469,"meta":178,"style":178},[99,71002,71003,71011,71017,71029,71033],{"__ignoreMap":178},[220,71004,71005,71007,71009],{"class":222,"line":223},[220,71006,343],{"class":264},[220,71008,347],{"class":420},[220,71010,359],{"class":264},[220,71012,71013,71015],{"class":222,"line":179},[220,71014,364],{"class":264},[220,71016,70895],{"class":420},[220,71018,71019,71021,71023,71025,71027],{"class":222,"line":389},[220,71020,20477],{"class":226},[220,71022,353],{"class":260},[220,71024,743],{"class":264},[220,71026,8672],{"class":420},[220,71028,749],{"class":264},[220,71030,71031],{"class":222,"line":399},[220,71032,1234],{"class":264},[220,71034,71035,71037,71039],{"class":222,"line":644},[220,71036,402],{"class":264},[220,71038,347],{"class":420},[220,71040,359],{"class":264},[212,71042,71044],{"className":251,"code":71043,"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,71045,71046,71056,71060,71074,71078,71091,71095],{"__ignoreMap":178},[220,71047,71048,71050,71052,71054],{"class":222,"line":223},[220,71049,261],{"class":260},[220,71051,11507],{"class":264},[220,71053,268],{"class":260},[220,71055,4007],{"class":230},[220,71057,71058],{"class":222,"line":179},[220,71059,647],{"emptyLinePlaceholder":194},[220,71061,71062,71064,71066,71068,71070,71072],{"class":222,"line":389},[220,71063,1735],{"class":260},[220,71065,1738],{"class":420},[220,71067,1741],{"class":260},[220,71069,1744],{"class":260},[220,71071,1747],{"class":226},[220,71073,1750],{"class":264},[220,71075,71076],{"class":222,"line":399},[220,71077,1765],{"class":264},[220,71079,71080,71082,71085,71087,71089],{"class":222,"line":644},[220,71081,1770],{"class":264},[220,71083,71084],{"class":230},"'SmokeFill'",[220,71086,32198],{"class":264},[220,71088,8672],{"class":420},[220,71090,1782],{"class":264},[220,71092,71093],{"class":222,"line":650},[220,71094,1787],{"class":264},[220,71096,71097],{"class":222,"line":656},[220,71098,1792],{"class":264},[1504,71100,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71102},[71103,71104],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsmokefill",{"title":23171,"description":70864},"docs\u002Fcomponents\u002FSmokeFill","dFVVmmtuH3hk6tiDHvDxX_FJuNjEhP8W3YxSerVlm80",{"id":71111,"title":71112,"body":71113,"category":35554,"componentType":25872,"description":71120,"extension":191,"meta":71361,"navigation":194,"path":71362,"requiresChild":32525,"seo":71363,"stem":71364,"__hash__":71365},"components\u002Fdocs\u002Fcomponents\u002FSmokeFlow.md","SmokeFlow",{"type":8,"value":71114,"toc":71357},[71115,71118,71121,71123,71125,71128,71130,71355],[11,71116,71112],{"id":71117},"smokeflow",[15,71119,71120],{},"Cursor-driven smoke that lingers, swirls, and dissipates with fluid dynamics",[31906,71122],{"component":71112},[23,71124,31910],{"id":26528},[31912,71126],{":props":71127},"[{\"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,71129,31918],{"id":31917},[246,71131,71132,71172,71215,71255,71297],{":tabs":1557},[212,71133,71135],{"className":334,"code":71134,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,71136,71137,71145,71152,71160,71164],{"__ignoreMap":178},[220,71138,71139,71141,71143],{"class":222,"line":223},[220,71140,343],{"class":264},[220,71142,347],{"class":346},[220,71144,359],{"class":264},[220,71146,71147,71149],{"class":222,"line":179},[220,71148,364],{"class":264},[220,71150,71151],{"class":346},"SmokeFlow\n",[220,71153,71154,71156,71158],{"class":222,"line":389},[220,71155,20366],{"class":226},[220,71157,353],{"class":264},[220,71159,36620],{"class":230},[220,71161,71162],{"class":222,"line":399},[220,71163,1234],{"class":264},[220,71165,71166,71168,71170],{"class":222,"line":644},[220,71167,402],{"class":264},[220,71169,347],{"class":346},[220,71171,359],{"class":264},[212,71173,71175],{"className":409,"code":71174,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSmokeFlow\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,71176,71177,71185,71191,71203,71207],{"__ignoreMap":178},[220,71178,71179,71181,71183],{"class":222,"line":223},[220,71180,343],{"class":264},[220,71182,347],{"class":420},[220,71184,359],{"class":264},[220,71186,71187,71189],{"class":222,"line":179},[220,71188,364],{"class":264},[220,71190,71151],{"class":420},[220,71192,71193,71195,71197,71199,71201],{"class":222,"line":389},[220,71194,20477],{"class":226},[220,71196,353],{"class":260},[220,71198,743],{"class":264},[220,71200,8672],{"class":420},[220,71202,749],{"class":264},[220,71204,71205],{"class":222,"line":399},[220,71206,1234],{"class":264},[220,71208,71209,71211,71213],{"class":222,"line":644},[220,71210,402],{"class":264},[220,71212,347],{"class":420},[220,71214,359],{"class":264},[212,71216,71217],{"className":2844,"code":71174,"language":2846,"meta":178,"style":178},[99,71218,71219,71227,71233,71243,71247],{"__ignoreMap":178},[220,71220,71221,71223,71225],{"class":222,"line":223},[220,71222,343],{"class":264},[220,71224,347],{"class":420},[220,71226,359],{"class":264},[220,71228,71229,71231],{"class":222,"line":179},[220,71230,364],{"class":264},[220,71232,71151],{"class":420},[220,71234,71235,71237,71239,71241],{"class":222,"line":389},[220,71236,20477],{"class":226},[220,71238,29866],{"class":264},[220,71240,8672],{"class":420},[220,71242,749],{"class":264},[220,71244,71245],{"class":222,"line":399},[220,71246,1234],{"class":264},[220,71248,71249,71251,71253],{"class":222,"line":644},[220,71250,402],{"class":264},[220,71252,347],{"class":420},[220,71254,359],{"class":264},[212,71256,71257],{"className":468,"code":71174,"language":469,"meta":178,"style":178},[99,71258,71259,71267,71273,71285,71289],{"__ignoreMap":178},[220,71260,71261,71263,71265],{"class":222,"line":223},[220,71262,343],{"class":264},[220,71264,347],{"class":420},[220,71266,359],{"class":264},[220,71268,71269,71271],{"class":222,"line":179},[220,71270,364],{"class":264},[220,71272,71151],{"class":420},[220,71274,71275,71277,71279,71281,71283],{"class":222,"line":389},[220,71276,20477],{"class":226},[220,71278,353],{"class":260},[220,71280,743],{"class":264},[220,71282,8672],{"class":420},[220,71284,749],{"class":264},[220,71286,71287],{"class":222,"line":399},[220,71288,1234],{"class":264},[220,71290,71291,71293,71295],{"class":222,"line":644},[220,71292,402],{"class":264},[220,71294,347],{"class":420},[220,71296,359],{"class":264},[212,71298,71300],{"className":251,"code":71299,"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,71301,71302,71312,71316,71330,71334,71347,71351],{"__ignoreMap":178},[220,71303,71304,71306,71308,71310],{"class":222,"line":223},[220,71305,261],{"class":260},[220,71307,11507],{"class":264},[220,71309,268],{"class":260},[220,71311,4007],{"class":230},[220,71313,71314],{"class":222,"line":179},[220,71315,647],{"emptyLinePlaceholder":194},[220,71317,71318,71320,71322,71324,71326,71328],{"class":222,"line":389},[220,71319,1735],{"class":260},[220,71321,1738],{"class":420},[220,71323,1741],{"class":260},[220,71325,1744],{"class":260},[220,71327,1747],{"class":226},[220,71329,1750],{"class":264},[220,71331,71332],{"class":222,"line":399},[220,71333,1765],{"class":264},[220,71335,71336,71338,71341,71343,71345],{"class":222,"line":644},[220,71337,1770],{"class":264},[220,71339,71340],{"class":230},"'SmokeFlow'",[220,71342,32198],{"class":264},[220,71344,8672],{"class":420},[220,71346,1782],{"class":264},[220,71348,71349],{"class":222,"line":650},[220,71350,1787],{"class":264},[220,71352,71353],{"class":222,"line":656},[220,71354,1792],{"class":264},[1504,71356,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71358},[71359,71360],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsmokeflow",{"title":71112,"description":71120},"docs\u002Fcomponents\u002FSmokeFlow","n2oregGhwJCIaGEY5y9mQVXj-76iVwV7lPedfpwBUn4",{"id":71367,"title":71368,"body":71369,"category":36363,"componentType":25878,"description":71376,"extension":191,"meta":71637,"navigation":194,"path":71638,"requiresChild":194,"seo":71639,"stem":71640,"__hash__":71641},"components\u002Fdocs\u002Fcomponents\u002FSolarize.md","Solarize",{"type":8,"value":71370,"toc":71633},[71371,71374,71377,71379,71381,71384,71386,71631],[11,71372,71368],{"id":71373},"solarize",[15,71375,71376],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[31906,71378],{"component":71368},[23,71380,31910],{"id":26528},[31912,71382],{":props":71383},"[{\"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,71385,31918],{"id":31917},[246,71387,71388,71433,71477,71521,71565],{":tabs":1557},[212,71389,71391],{"className":334,"code":71390,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolarize>\n \u003CCircle \u002F>\n \u003C\u002FSolarize>\n\u003C\u002FShader>\n",[99,71392,71393,71401,71409,71417,71425],{"__ignoreMap":178},[220,71394,71395,71397,71399],{"class":222,"line":223},[220,71396,343],{"class":264},[220,71398,347],{"class":346},[220,71400,359],{"class":264},[220,71402,71403,71405,71407],{"class":222,"line":179},[220,71404,364],{"class":264},[220,71406,71368],{"class":346},[220,71408,359],{"class":264},[220,71410,71411,71413,71415],{"class":222,"line":389},[220,71412,2550],{"class":264},[220,71414,2553],{"class":346},[220,71416,386],{"class":264},[220,71418,71419,71421,71423],{"class":222,"line":399},[220,71420,2567],{"class":264},[220,71422,71368],{"class":346},[220,71424,359],{"class":264},[220,71426,71427,71429,71431],{"class":222,"line":644},[220,71428,402],{"class":264},[220,71430,347],{"class":346},[220,71432,359],{"class":264},[212,71434,71435],{"className":409,"code":71390,"language":411,"meta":178,"style":178},[99,71436,71437,71445,71453,71461,71469],{"__ignoreMap":178},[220,71438,71439,71441,71443],{"class":222,"line":223},[220,71440,343],{"class":264},[220,71442,347],{"class":420},[220,71444,359],{"class":264},[220,71446,71447,71449,71451],{"class":222,"line":179},[220,71448,364],{"class":264},[220,71450,71368],{"class":420},[220,71452,359],{"class":264},[220,71454,71455,71457,71459],{"class":222,"line":389},[220,71456,2550],{"class":264},[220,71458,2553],{"class":420},[220,71460,386],{"class":264},[220,71462,71463,71465,71467],{"class":222,"line":399},[220,71464,2567],{"class":264},[220,71466,71368],{"class":420},[220,71468,359],{"class":264},[220,71470,71471,71473,71475],{"class":222,"line":644},[220,71472,402],{"class":264},[220,71474,347],{"class":420},[220,71476,359],{"class":264},[212,71478,71479],{"className":2844,"code":71390,"language":2846,"meta":178,"style":178},[99,71480,71481,71489,71497,71505,71513],{"__ignoreMap":178},[220,71482,71483,71485,71487],{"class":222,"line":223},[220,71484,343],{"class":264},[220,71486,347],{"class":420},[220,71488,359],{"class":264},[220,71490,71491,71493,71495],{"class":222,"line":179},[220,71492,364],{"class":264},[220,71494,71368],{"class":420},[220,71496,359],{"class":264},[220,71498,71499,71501,71503],{"class":222,"line":389},[220,71500,2550],{"class":264},[220,71502,2553],{"class":420},[220,71504,386],{"class":264},[220,71506,71507,71509,71511],{"class":222,"line":399},[220,71508,2567],{"class":264},[220,71510,71368],{"class":420},[220,71512,359],{"class":264},[220,71514,71515,71517,71519],{"class":222,"line":644},[220,71516,402],{"class":264},[220,71518,347],{"class":420},[220,71520,359],{"class":264},[212,71522,71523],{"className":468,"code":71390,"language":469,"meta":178,"style":178},[99,71524,71525,71533,71541,71549,71557],{"__ignoreMap":178},[220,71526,71527,71529,71531],{"class":222,"line":223},[220,71528,343],{"class":264},[220,71530,347],{"class":420},[220,71532,359],{"class":264},[220,71534,71535,71537,71539],{"class":222,"line":179},[220,71536,364],{"class":264},[220,71538,71368],{"class":420},[220,71540,359],{"class":264},[220,71542,71543,71545,71547],{"class":222,"line":389},[220,71544,2550],{"class":264},[220,71546,2553],{"class":420},[220,71548,386],{"class":264},[220,71550,71551,71553,71555],{"class":222,"line":399},[220,71552,2567],{"class":264},[220,71554,71368],{"class":420},[220,71556,359],{"class":264},[220,71558,71559,71561,71563],{"class":222,"line":644},[220,71560,402],{"class":264},[220,71562,347],{"class":420},[220,71564,359],{"class":264},[212,71566,71568],{"className":251,"code":71567,"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,71569,71570,71580,71584,71598,71602,71611,71619,71623,71627],{"__ignoreMap":178},[220,71571,71572,71574,71576,71578],{"class":222,"line":223},[220,71573,261],{"class":260},[220,71575,11507],{"class":264},[220,71577,268],{"class":260},[220,71579,4007],{"class":230},[220,71581,71582],{"class":222,"line":179},[220,71583,647],{"emptyLinePlaceholder":194},[220,71585,71586,71588,71590,71592,71594,71596],{"class":222,"line":389},[220,71587,1735],{"class":260},[220,71589,1738],{"class":420},[220,71591,1741],{"class":260},[220,71593,1744],{"class":260},[220,71595,1747],{"class":226},[220,71597,1750],{"class":264},[220,71599,71600],{"class":222,"line":399},[220,71601,1765],{"class":264},[220,71603,71604,71606,71609],{"class":222,"line":644},[220,71605,1770],{"class":264},[220,71607,71608],{"class":230},"'Solarize'",[220,71610,7004],{"class":264},[220,71612,71613,71615,71617],{"class":222,"line":650},[220,71614,7009],{"class":264},[220,71616,3206],{"class":230},[220,71618,2465],{"class":264},[220,71620,71621],{"class":222,"line":656},[220,71622,7026],{"class":264},[220,71624,71625],{"class":222,"line":673},[220,71626,1787],{"class":264},[220,71628,71629],{"class":222,"line":682},[220,71630,1792],{"class":264},[1504,71632,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":71634},[71635,71636],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsolarize",{"title":71368,"description":71376},"docs\u002Fcomponents\u002FSolarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":71643,"title":1585,"body":71644,"category":33058,"componentType":25872,"description":71651,"extension":191,"meta":71881,"navigation":194,"path":71882,"requiresChild":32525,"seo":71883,"stem":71884,"__hash__":71885},"components\u002Fdocs\u002Fcomponents\u002FSolidColor.md",{"type":8,"value":71645,"toc":71877},[71646,71649,71652,71654,71656,71659,71661,71875],[11,71647,1585],{"id":71648},"solidcolor",[15,71650,71651],{},"Fill the canvas with a single solid color",[31906,71653],{"component":1585},[23,71655,31910],{"id":26528},[31912,71657],{":props":71658},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,71660,31918],{"id":31917},[246,71662,71663,71704,71742,71780,71818],{":tabs":1557},[212,71664,71666],{"className":334,"code":71665,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n \u002F>\n\u003C\u002FShader>\n",[99,71667,71668,71676,71683,71692,71696],{"__ignoreMap":178},[220,71669,71670,71672,71674],{"class":222,"line":223},[220,71671,343],{"class":264},[220,71673,347],{"class":346},[220,71675,359],{"class":264},[220,71677,71678,71680],{"class":222,"line":179},[220,71679,364],{"class":264},[220,71681,71682],{"class":346},"SolidColor\n",[220,71684,71685,71687,71689],{"class":222,"line":389},[220,71686,9630],{"class":226},[220,71688,353],{"class":264},[220,71690,71691],{"class":230},"\"#5b18ca\"\n",[220,71693,71694],{"class":222,"line":399},[220,71695,1234],{"class":264},[220,71697,71698,71700,71702],{"class":222,"line":644},[220,71699,402],{"class":264},[220,71701,347],{"class":346},[220,71703,359],{"class":264},[212,71705,71706],{"className":409,"code":71665,"language":411,"meta":178,"style":178},[99,71707,71708,71716,71722,71730,71734],{"__ignoreMap":178},[220,71709,71710,71712,71714],{"class":222,"line":223},[220,71711,343],{"class":264},[220,71713,347],{"class":420},[220,71715,359],{"class":264},[220,71717,71718,71720],{"class":222,"line":179},[220,71719,364],{"class":264},[220,71721,71682],{"class":420},[220,71723,71724,71726,71728],{"class":222,"line":389},[220,71725,9630],{"class":226},[220,71727,353],{"class":260},[220,71729,71691],{"class":230},[220,71731,71732],{"class":222,"line":399},[220,71733,1234],{"class":264},[220,71735,71736,71738,71740],{"class":222,"line":644},[220,71737,402],{"class":264},[220,71739,347],{"class":420},[220,71741,359],{"class":264},[212,71743,71744],{"className":2844,"code":71665,"language":2846,"meta":178,"style":178},[99,71745,71746,71754,71760,71768,71772],{"__ignoreMap":178},[220,71747,71748,71750,71752],{"class":222,"line":223},[220,71749,343],{"class":264},[220,71751,347],{"class":420},[220,71753,359],{"class":264},[220,71755,71756,71758],{"class":222,"line":179},[220,71757,364],{"class":264},[220,71759,71682],{"class":420},[220,71761,71762,71764,71766],{"class":222,"line":389},[220,71763,9630],{"class":226},[220,71765,353],{"class":264},[220,71767,71691],{"class":230},[220,71769,71770],{"class":222,"line":399},[220,71771,1234],{"class":264},[220,71773,71774,71776,71778],{"class":222,"line":644},[220,71775,402],{"class":264},[220,71777,347],{"class":420},[220,71779,359],{"class":264},[212,71781,71782],{"className":468,"code":71665,"language":469,"meta":178,"style":178},[99,71783,71784,71792,71798,71806,71810],{"__ignoreMap":178},[220,71785,71786,71788,71790],{"class":222,"line":223},[220,71787,343],{"class":264},[220,71789,347],{"class":420},[220,71791,359],{"class":264},[220,71793,71794,71796],{"class":222,"line":179},[220,71795,364],{"class":264},[220,71797,71682],{"class":420},[220,71799,71800,71802,71804],{"class":222,"line":389},[220,71801,9630],{"class":226},[220,71803,353],{"class":260},[220,71805,71691],{"class":230},[220,71807,71808],{"class":222,"line":399},[220,71809,1234],{"class":264},[220,71811,71812,71814,71816],{"class":222,"line":644},[220,71813,402],{"class":264},[220,71815,347],{"class":420},[220,71817,359],{"class":264},[212,71819,71821],{"className":251,"code":71820,"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,71822,71823,71833,71837,71851,71855,71867,71871],{"__ignoreMap":178},[220,71824,71825,71827,71829,71831],{"class":222,"line":223},[220,71826,261],{"class":260},[220,71828,11507],{"class":264},[220,71830,268],{"class":260},[220,71832,4007],{"class":230},[220,71834,71835],{"class":222,"line":179},[220,71836,647],{"emptyLinePlaceholder":194},[220,71838,71839,71841,71843,71845,71847,71849],{"class":222,"line":389},[220,71840,1735],{"class":260},[220,71842,1738],{"class":420},[220,71844,1741],{"class":260},[220,71846,1744],{"class":260},[220,71848,1747],{"class":226},[220,71850,1750],{"class":264},[220,71852,71853],{"class":222,"line":399},[220,71854,1765],{"class":264},[220,71856,71857,71859,71861,71863,71865],{"class":222,"line":644},[220,71858,1770],{"class":264},[220,71860,1773],{"class":230},[220,71862,1776],{"class":264},[220,71864,1779],{"class":230},[220,71866,1782],{"class":264},[220,71868,71869],{"class":222,"line":650},[220,71870,1787],{"class":264},[220,71872,71873],{"class":222,"line":656},[220,71874,1792],{"class":264},[1504,71876,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":71878},[71879,71880],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsolidcolor",{"title":1585,"description":71651},"docs\u002Fcomponents\u002FSolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":71887,"title":71888,"body":71889,"category":33391,"componentType":25878,"description":71896,"extension":191,"meta":72213,"navigation":194,"path":72214,"requiresChild":194,"seo":72215,"stem":72216,"__hash__":72217},"components\u002Fdocs\u002Fcomponents\u002FSpherize.md","Spherize",{"type":8,"value":71890,"toc":72209},[71891,71894,71897,71899,71901,71904,71906,72207],[11,71892,71888],{"id":71893},"spherize",[15,71895,71896],{},"Map content onto a 3D sphere surface with depth distortion",[31906,71898],{"component":71888},[23,71900,31910],{"id":26528},[31912,71902],{":props":71903},"[{\"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,71905,31918],{"id":31917},[246,71907,71908,71964,72023,72079,72137],{":tabs":1557},[212,71909,71911],{"className":334,"code":71910,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71912,71913,71921,71928,71936,71940,71948,71956],{"__ignoreMap":178},[220,71914,71915,71917,71919],{"class":222,"line":223},[220,71916,343],{"class":264},[220,71918,347],{"class":346},[220,71920,359],{"class":264},[220,71922,71923,71925],{"class":222,"line":179},[220,71924,364],{"class":264},[220,71926,71927],{"class":346},"Spherize\n",[220,71929,71930,71932,71934],{"class":222,"line":389},[220,71931,17400],{"class":226},[220,71933,353],{"class":264},[220,71935,36620],{"class":230},[220,71937,71938],{"class":222,"line":399},[220,71939,31954],{"class":264},[220,71941,71942,71944,71946],{"class":222,"line":644},[220,71943,2550],{"class":264},[220,71945,2553],{"class":346},[220,71947,386],{"class":264},[220,71949,71950,71952,71954],{"class":222,"line":650},[220,71951,2567],{"class":264},[220,71953,71888],{"class":346},[220,71955,359],{"class":264},[220,71957,71958,71960,71962],{"class":222,"line":656},[220,71959,402],{"class":264},[220,71961,347],{"class":346},[220,71963,359],{"class":264},[212,71965,71967],{"className":409,"code":71966,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FSpherize>\n\u003C\u002FShader>\n",[99,71968,71969,71977,71983,71995,71999,72007,72015],{"__ignoreMap":178},[220,71970,71971,71973,71975],{"class":222,"line":223},[220,71972,343],{"class":264},[220,71974,347],{"class":420},[220,71976,359],{"class":264},[220,71978,71979,71981],{"class":222,"line":179},[220,71980,364],{"class":264},[220,71982,71927],{"class":420},[220,71984,71985,71987,71989,71991,71993],{"class":222,"line":389},[220,71986,9640],{"class":226},[220,71988,353],{"class":260},[220,71990,743],{"class":264},[220,71992,8672],{"class":420},[220,71994,749],{"class":264},[220,71996,71997],{"class":222,"line":399},[220,71998,31954],{"class":264},[220,72000,72001,72003,72005],{"class":222,"line":644},[220,72002,2550],{"class":264},[220,72004,2553],{"class":420},[220,72006,386],{"class":264},[220,72008,72009,72011,72013],{"class":222,"line":650},[220,72010,2567],{"class":264},[220,72012,71888],{"class":420},[220,72014,359],{"class":264},[220,72016,72017,72019,72021],{"class":222,"line":656},[220,72018,402],{"class":264},[220,72020,347],{"class":420},[220,72022,359],{"class":264},[212,72024,72025],{"className":2844,"code":71966,"language":2846,"meta":178,"style":178},[99,72026,72027,72035,72041,72051,72055,72063,72071],{"__ignoreMap":178},[220,72028,72029,72031,72033],{"class":222,"line":223},[220,72030,343],{"class":264},[220,72032,347],{"class":420},[220,72034,359],{"class":264},[220,72036,72037,72039],{"class":222,"line":179},[220,72038,364],{"class":264},[220,72040,71927],{"class":420},[220,72042,72043,72045,72047,72049],{"class":222,"line":389},[220,72044,9640],{"class":226},[220,72046,29866],{"class":264},[220,72048,8672],{"class":420},[220,72050,749],{"class":264},[220,72052,72053],{"class":222,"line":399},[220,72054,31954],{"class":264},[220,72056,72057,72059,72061],{"class":222,"line":644},[220,72058,2550],{"class":264},[220,72060,2553],{"class":420},[220,72062,386],{"class":264},[220,72064,72065,72067,72069],{"class":222,"line":650},[220,72066,2567],{"class":264},[220,72068,71888],{"class":420},[220,72070,359],{"class":264},[220,72072,72073,72075,72077],{"class":222,"line":656},[220,72074,402],{"class":264},[220,72076,347],{"class":420},[220,72078,359],{"class":264},[212,72080,72081],{"className":468,"code":71966,"language":469,"meta":178,"style":178},[99,72082,72083,72091,72097,72109,72113,72121,72129],{"__ignoreMap":178},[220,72084,72085,72087,72089],{"class":222,"line":223},[220,72086,343],{"class":264},[220,72088,347],{"class":420},[220,72090,359],{"class":264},[220,72092,72093,72095],{"class":222,"line":179},[220,72094,364],{"class":264},[220,72096,71927],{"class":420},[220,72098,72099,72101,72103,72105,72107],{"class":222,"line":389},[220,72100,9640],{"class":226},[220,72102,353],{"class":260},[220,72104,743],{"class":264},[220,72106,8672],{"class":420},[220,72108,749],{"class":264},[220,72110,72111],{"class":222,"line":399},[220,72112,31954],{"class":264},[220,72114,72115,72117,72119],{"class":222,"line":644},[220,72116,2550],{"class":264},[220,72118,2553],{"class":420},[220,72120,386],{"class":264},[220,72122,72123,72125,72127],{"class":222,"line":650},[220,72124,2567],{"class":264},[220,72126,71888],{"class":420},[220,72128,359],{"class":264},[220,72130,72131,72133,72135],{"class":222,"line":656},[220,72132,402],{"class":264},[220,72134,347],{"class":420},[220,72136,359],{"class":264},[212,72138,72140],{"className":251,"code":72139,"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,72141,72142,72152,72156,72170,72174,72187,72195,72199,72203],{"__ignoreMap":178},[220,72143,72144,72146,72148,72150],{"class":222,"line":223},[220,72145,261],{"class":260},[220,72147,11507],{"class":264},[220,72149,268],{"class":260},[220,72151,4007],{"class":230},[220,72153,72154],{"class":222,"line":179},[220,72155,647],{"emptyLinePlaceholder":194},[220,72157,72158,72160,72162,72164,72166,72168],{"class":222,"line":389},[220,72159,1735],{"class":260},[220,72161,1738],{"class":420},[220,72163,1741],{"class":260},[220,72165,1744],{"class":260},[220,72167,1747],{"class":226},[220,72169,1750],{"class":264},[220,72171,72172],{"class":222,"line":399},[220,72173,1765],{"class":264},[220,72175,72176,72178,72181,72183,72185],{"class":222,"line":644},[220,72177,1770],{"class":264},[220,72179,72180],{"class":230},"'Spherize'",[220,72182,7536],{"class":264},[220,72184,8672],{"class":420},[220,72186,7541],{"class":264},[220,72188,72189,72191,72193],{"class":222,"line":650},[220,72190,7009],{"class":264},[220,72192,3206],{"class":230},[220,72194,2465],{"class":264},[220,72196,72197],{"class":222,"line":656},[220,72198,7026],{"class":264},[220,72200,72201],{"class":222,"line":673},[220,72202,1787],{"class":264},[220,72204,72205],{"class":222,"line":682},[220,72206,1792],{"class":264},[1504,72208,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72210},[72211,72212],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fspherize",{"title":71888,"description":71896},"docs\u002Fcomponents\u002FSpherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":72219,"title":72220,"body":72221,"category":33058,"componentType":25872,"description":72228,"extension":191,"meta":72413,"navigation":194,"path":72414,"requiresChild":32525,"seo":72415,"stem":72416,"__hash__":72417},"components\u002Fdocs\u002Fcomponents\u002FSpiral.md","Spiral",{"type":8,"value":72222,"toc":72409},[72223,72226,72229,72231,72233,72236,72238,72407],[11,72224,72220],{"id":72225},"spiral",[15,72227,72228],{},"Rotating spiral pattern with animated movement",[31906,72230],{"component":72220},[23,72232,31910],{"id":26528},[31912,72234],{":props":72235},"[{\"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,72237,31918],{"id":31917},[246,72239,72240,72269,72297,72325,72353],{":tabs":1557},[212,72241,72243],{"className":334,"code":72242,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSpiral \u002F>\n\u003C\u002FShader>\n",[99,72244,72245,72253,72261],{"__ignoreMap":178},[220,72246,72247,72249,72251],{"class":222,"line":223},[220,72248,343],{"class":264},[220,72250,347],{"class":346},[220,72252,359],{"class":264},[220,72254,72255,72257,72259],{"class":222,"line":179},[220,72256,364],{"class":264},[220,72258,72220],{"class":346},[220,72260,386],{"class":264},[220,72262,72263,72265,72267],{"class":222,"line":389},[220,72264,402],{"class":264},[220,72266,347],{"class":346},[220,72268,359],{"class":264},[212,72270,72271],{"className":409,"code":72242,"language":411,"meta":178,"style":178},[99,72272,72273,72281,72289],{"__ignoreMap":178},[220,72274,72275,72277,72279],{"class":222,"line":223},[220,72276,343],{"class":264},[220,72278,347],{"class":420},[220,72280,359],{"class":264},[220,72282,72283,72285,72287],{"class":222,"line":179},[220,72284,364],{"class":264},[220,72286,72220],{"class":420},[220,72288,386],{"class":264},[220,72290,72291,72293,72295],{"class":222,"line":389},[220,72292,402],{"class":264},[220,72294,347],{"class":420},[220,72296,359],{"class":264},[212,72298,72299],{"className":2844,"code":72242,"language":2846,"meta":178,"style":178},[99,72300,72301,72309,72317],{"__ignoreMap":178},[220,72302,72303,72305,72307],{"class":222,"line":223},[220,72304,343],{"class":264},[220,72306,347],{"class":420},[220,72308,359],{"class":264},[220,72310,72311,72313,72315],{"class":222,"line":179},[220,72312,364],{"class":264},[220,72314,72220],{"class":420},[220,72316,386],{"class":264},[220,72318,72319,72321,72323],{"class":222,"line":389},[220,72320,402],{"class":264},[220,72322,347],{"class":420},[220,72324,359],{"class":264},[212,72326,72327],{"className":468,"code":72242,"language":469,"meta":178,"style":178},[99,72328,72329,72337,72345],{"__ignoreMap":178},[220,72330,72331,72333,72335],{"class":222,"line":223},[220,72332,343],{"class":264},[220,72334,347],{"class":420},[220,72336,359],{"class":264},[220,72338,72339,72341,72343],{"class":222,"line":179},[220,72340,364],{"class":264},[220,72342,72220],{"class":420},[220,72344,386],{"class":264},[220,72346,72347,72349,72351],{"class":222,"line":389},[220,72348,402],{"class":264},[220,72350,347],{"class":420},[220,72352,359],{"class":264},[212,72354,72356],{"className":251,"code":72355,"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,72357,72358,72368,72372,72386,72390,72399,72403],{"__ignoreMap":178},[220,72359,72360,72362,72364,72366],{"class":222,"line":223},[220,72361,261],{"class":260},[220,72363,11507],{"class":264},[220,72365,268],{"class":260},[220,72367,4007],{"class":230},[220,72369,72370],{"class":222,"line":179},[220,72371,647],{"emptyLinePlaceholder":194},[220,72373,72374,72376,72378,72380,72382,72384],{"class":222,"line":389},[220,72375,1735],{"class":260},[220,72377,1738],{"class":420},[220,72379,1741],{"class":260},[220,72381,1744],{"class":260},[220,72383,1747],{"class":226},[220,72385,1750],{"class":264},[220,72387,72388],{"class":222,"line":399},[220,72389,1765],{"class":264},[220,72391,72392,72394,72397],{"class":222,"line":644},[220,72393,1770],{"class":264},[220,72395,72396],{"class":230},"'Spiral'",[220,72398,2465],{"class":264},[220,72400,72401],{"class":222,"line":650},[220,72402,1787],{"class":264},[220,72404,72405],{"class":222,"line":656},[220,72406,1792],{"class":264},[1504,72408,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":72410},[72411,72412],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fspiral",{"title":72220,"description":72228},"docs\u002Fcomponents\u002FSpiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":72419,"title":72420,"body":72421,"category":15903,"componentType":25872,"description":72428,"extension":191,"meta":72705,"navigation":194,"path":72706,"requiresChild":32525,"seo":72707,"stem":72708,"__hash__":72709},"components\u002Fdocs\u002Fcomponents\u002FStar.md","Star",{"type":8,"value":72422,"toc":72701},[72423,72426,72429,72431,72433,72436,72438,72699],[11,72424,72420],{"id":72425},"star",[15,72427,72428],{},"Classic star polygon with straight sides and sharp pointed tips",[31906,72430],{"component":72420},[23,72432,31910],{"id":26528},[31912,72434],{":props":72435},"[{\"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,72437,31918],{"id":31917},[246,72439,72440,72488,72539,72587,72637],{":tabs":1557},[212,72441,72443],{"className":334,"code":72442,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n \u002F>\n\u003C\u002FShader>\n",[99,72444,72445,72453,72460,72468,72476,72480],{"__ignoreMap":178},[220,72446,72447,72449,72451],{"class":222,"line":223},[220,72448,343],{"class":264},[220,72450,347],{"class":346},[220,72452,359],{"class":264},[220,72454,72455,72457],{"class":222,"line":179},[220,72456,364],{"class":264},[220,72458,72459],{"class":346},"Star\n",[220,72461,72462,72464,72466],{"class":222,"line":389},[220,72463,9630],{"class":226},[220,72465,353],{"class":264},[220,72467,9586],{"class":230},[220,72469,72470,72472,72474],{"class":222,"line":399},[220,72471,17400],{"class":226},[220,72473,353],{"class":264},[220,72475,48143],{"class":230},[220,72477,72478],{"class":222,"line":644},[220,72479,1234],{"class":264},[220,72481,72482,72484,72486],{"class":222,"line":650},[220,72483,402],{"class":264},[220,72485,347],{"class":346},[220,72487,359],{"class":264},[212,72489,72491],{"className":409,"code":72490,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n \u002F>\n\u003C\u002FShader>\n",[99,72492,72493,72501,72507,72515,72527,72531],{"__ignoreMap":178},[220,72494,72495,72497,72499],{"class":222,"line":223},[220,72496,343],{"class":264},[220,72498,347],{"class":420},[220,72500,359],{"class":264},[220,72502,72503,72505],{"class":222,"line":179},[220,72504,364],{"class":264},[220,72506,72459],{"class":420},[220,72508,72509,72511,72513],{"class":222,"line":389},[220,72510,9630],{"class":226},[220,72512,353],{"class":260},[220,72514,9586],{"class":230},[220,72516,72517,72519,72521,72523,72525],{"class":222,"line":399},[220,72518,9640],{"class":226},[220,72520,353],{"class":260},[220,72522,743],{"class":264},[220,72524,8244],{"class":420},[220,72526,749],{"class":264},[220,72528,72529],{"class":222,"line":644},[220,72530,1234],{"class":264},[220,72532,72533,72535,72537],{"class":222,"line":650},[220,72534,402],{"class":264},[220,72536,347],{"class":420},[220,72538,359],{"class":264},[212,72540,72541],{"className":2844,"code":72490,"language":2846,"meta":178,"style":178},[99,72542,72543,72551,72557,72565,72575,72579],{"__ignoreMap":178},[220,72544,72545,72547,72549],{"class":222,"line":223},[220,72546,343],{"class":264},[220,72548,347],{"class":420},[220,72550,359],{"class":264},[220,72552,72553,72555],{"class":222,"line":179},[220,72554,364],{"class":264},[220,72556,72459],{"class":420},[220,72558,72559,72561,72563],{"class":222,"line":389},[220,72560,9630],{"class":226},[220,72562,353],{"class":264},[220,72564,9586],{"class":230},[220,72566,72567,72569,72571,72573],{"class":222,"line":399},[220,72568,9640],{"class":226},[220,72570,29866],{"class":264},[220,72572,8244],{"class":420},[220,72574,749],{"class":264},[220,72576,72577],{"class":222,"line":644},[220,72578,1234],{"class":264},[220,72580,72581,72583,72585],{"class":222,"line":650},[220,72582,402],{"class":264},[220,72584,347],{"class":420},[220,72586,359],{"class":264},[212,72588,72589],{"className":468,"code":72490,"language":469,"meta":178,"style":178},[99,72590,72591,72599,72605,72613,72625,72629],{"__ignoreMap":178},[220,72592,72593,72595,72597],{"class":222,"line":223},[220,72594,343],{"class":264},[220,72596,347],{"class":420},[220,72598,359],{"class":264},[220,72600,72601,72603],{"class":222,"line":179},[220,72602,364],{"class":264},[220,72604,72459],{"class":420},[220,72606,72607,72609,72611],{"class":222,"line":389},[220,72608,9630],{"class":226},[220,72610,353],{"class":260},[220,72612,9586],{"class":230},[220,72614,72615,72617,72619,72621,72623],{"class":222,"line":399},[220,72616,9640],{"class":226},[220,72618,353],{"class":260},[220,72620,743],{"class":264},[220,72622,8244],{"class":420},[220,72624,749],{"class":264},[220,72626,72627],{"class":222,"line":644},[220,72628,1234],{"class":264},[220,72630,72631,72633,72635],{"class":222,"line":650},[220,72632,402],{"class":264},[220,72634,347],{"class":420},[220,72636,359],{"class":264},[212,72638,72640],{"className":251,"code":72639,"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,72641,72642,72652,72656,72670,72674,72691,72695],{"__ignoreMap":178},[220,72643,72644,72646,72648,72650],{"class":222,"line":223},[220,72645,261],{"class":260},[220,72647,11507],{"class":264},[220,72649,268],{"class":260},[220,72651,4007],{"class":230},[220,72653,72654],{"class":222,"line":179},[220,72655,647],{"emptyLinePlaceholder":194},[220,72657,72658,72660,72662,72664,72666,72668],{"class":222,"line":389},[220,72659,1735],{"class":260},[220,72661,1738],{"class":420},[220,72663,1741],{"class":260},[220,72665,1744],{"class":260},[220,72667,1747],{"class":226},[220,72669,1750],{"class":264},[220,72671,72672],{"class":222,"line":399},[220,72673,1765],{"class":264},[220,72675,72676,72678,72681,72683,72685,72687,72689],{"class":222,"line":644},[220,72677,1770],{"class":264},[220,72679,72680],{"class":230},"'Star'",[220,72682,1776],{"class":264},[220,72684,10164],{"class":230},[220,72686,6561],{"class":264},[220,72688,8244],{"class":420},[220,72690,1782],{"class":264},[220,72692,72693],{"class":222,"line":650},[220,72694,1787],{"class":264},[220,72696,72697],{"class":222,"line":656},[220,72698,1792],{"class":264},[1504,72700,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":72702},[72703,72704],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstar",{"title":72420,"description":72428},"docs\u002Fcomponents\u002FStar","2eTCyUIBudx_09uMuAasJtd5s6m6H5j_60QXmO_J7m0",{"id":72711,"title":72712,"body":72713,"category":32801,"componentType":25878,"description":72720,"extension":191,"meta":73037,"navigation":194,"path":73038,"requiresChild":194,"seo":73039,"stem":73040,"__hash__":73041},"components\u002Fdocs\u002Fcomponents\u002FStone.md","Stone",{"type":8,"value":72714,"toc":73033},[72715,72718,72721,72723,72725,72728,72730,73031],[11,72716,72712],{"id":72717},"stone",[15,72719,72720],{},"Applies a marbled stone relief and surface distortion to child content",[31906,72722],{"component":72712},[23,72724,31910],{"id":26528},[31912,72726],{":props":72727},"[{\"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,72729,31918],{"id":31917},[246,72731,72732,72788,72847,72903,72961],{":tabs":1557},[212,72733,72735],{"className":334,"code":72734,"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,72736,72737,72745,72752,72760,72764,72772,72780],{"__ignoreMap":178},[220,72738,72739,72741,72743],{"class":222,"line":223},[220,72740,343],{"class":264},[220,72742,347],{"class":346},[220,72744,359],{"class":264},[220,72746,72747,72749],{"class":222,"line":179},[220,72748,364],{"class":264},[220,72750,72751],{"class":346},"Stone\n",[220,72753,72754,72756,72758],{"class":222,"line":389},[220,72755,20366],{"class":226},[220,72757,353],{"class":264},[220,72759,42153],{"class":230},[220,72761,72762],{"class":222,"line":399},[220,72763,31954],{"class":264},[220,72765,72766,72768,72770],{"class":222,"line":644},[220,72767,2550],{"class":264},[220,72769,2553],{"class":346},[220,72771,386],{"class":264},[220,72773,72774,72776,72778],{"class":222,"line":650},[220,72775,2567],{"class":264},[220,72777,72712],{"class":346},[220,72779,359],{"class":264},[220,72781,72782,72784,72786],{"class":222,"line":656},[220,72783,402],{"class":264},[220,72785,347],{"class":346},[220,72787,359],{"class":264},[212,72789,72791],{"className":409,"code":72790,"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,72792,72793,72801,72807,72819,72823,72831,72839],{"__ignoreMap":178},[220,72794,72795,72797,72799],{"class":222,"line":223},[220,72796,343],{"class":264},[220,72798,347],{"class":420},[220,72800,359],{"class":264},[220,72802,72803,72805],{"class":222,"line":179},[220,72804,364],{"class":264},[220,72806,72751],{"class":420},[220,72808,72809,72811,72813,72815,72817],{"class":222,"line":389},[220,72810,20477],{"class":226},[220,72812,353],{"class":260},[220,72814,743],{"class":264},[220,72816,7749],{"class":420},[220,72818,749],{"class":264},[220,72820,72821],{"class":222,"line":399},[220,72822,31954],{"class":264},[220,72824,72825,72827,72829],{"class":222,"line":644},[220,72826,2550],{"class":264},[220,72828,2553],{"class":420},[220,72830,386],{"class":264},[220,72832,72833,72835,72837],{"class":222,"line":650},[220,72834,2567],{"class":264},[220,72836,72712],{"class":420},[220,72838,359],{"class":264},[220,72840,72841,72843,72845],{"class":222,"line":656},[220,72842,402],{"class":264},[220,72844,347],{"class":420},[220,72846,359],{"class":264},[212,72848,72849],{"className":2844,"code":72790,"language":2846,"meta":178,"style":178},[99,72850,72851,72859,72865,72875,72879,72887,72895],{"__ignoreMap":178},[220,72852,72853,72855,72857],{"class":222,"line":223},[220,72854,343],{"class":264},[220,72856,347],{"class":420},[220,72858,359],{"class":264},[220,72860,72861,72863],{"class":222,"line":179},[220,72862,364],{"class":264},[220,72864,72751],{"class":420},[220,72866,72867,72869,72871,72873],{"class":222,"line":389},[220,72868,20477],{"class":226},[220,72870,29866],{"class":264},[220,72872,7749],{"class":420},[220,72874,749],{"class":264},[220,72876,72877],{"class":222,"line":399},[220,72878,31954],{"class":264},[220,72880,72881,72883,72885],{"class":222,"line":644},[220,72882,2550],{"class":264},[220,72884,2553],{"class":420},[220,72886,386],{"class":264},[220,72888,72889,72891,72893],{"class":222,"line":650},[220,72890,2567],{"class":264},[220,72892,72712],{"class":420},[220,72894,359],{"class":264},[220,72896,72897,72899,72901],{"class":222,"line":656},[220,72898,402],{"class":264},[220,72900,347],{"class":420},[220,72902,359],{"class":264},[212,72904,72905],{"className":468,"code":72790,"language":469,"meta":178,"style":178},[99,72906,72907,72915,72921,72933,72937,72945,72953],{"__ignoreMap":178},[220,72908,72909,72911,72913],{"class":222,"line":223},[220,72910,343],{"class":264},[220,72912,347],{"class":420},[220,72914,359],{"class":264},[220,72916,72917,72919],{"class":222,"line":179},[220,72918,364],{"class":264},[220,72920,72751],{"class":420},[220,72922,72923,72925,72927,72929,72931],{"class":222,"line":389},[220,72924,20477],{"class":226},[220,72926,353],{"class":260},[220,72928,743],{"class":264},[220,72930,7749],{"class":420},[220,72932,749],{"class":264},[220,72934,72935],{"class":222,"line":399},[220,72936,31954],{"class":264},[220,72938,72939,72941,72943],{"class":222,"line":644},[220,72940,2550],{"class":264},[220,72942,2553],{"class":420},[220,72944,386],{"class":264},[220,72946,72947,72949,72951],{"class":222,"line":650},[220,72948,2567],{"class":264},[220,72950,72712],{"class":420},[220,72952,359],{"class":264},[220,72954,72955,72957,72959],{"class":222,"line":656},[220,72956,402],{"class":264},[220,72958,347],{"class":420},[220,72960,359],{"class":264},[212,72962,72964],{"className":251,"code":72963,"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,72965,72966,72976,72980,72994,72998,73011,73019,73023,73027],{"__ignoreMap":178},[220,72967,72968,72970,72972,72974],{"class":222,"line":223},[220,72969,261],{"class":260},[220,72971,11507],{"class":264},[220,72973,268],{"class":260},[220,72975,4007],{"class":230},[220,72977,72978],{"class":222,"line":179},[220,72979,647],{"emptyLinePlaceholder":194},[220,72981,72982,72984,72986,72988,72990,72992],{"class":222,"line":389},[220,72983,1735],{"class":260},[220,72985,1738],{"class":420},[220,72987,1741],{"class":260},[220,72989,1744],{"class":260},[220,72991,1747],{"class":226},[220,72993,1750],{"class":264},[220,72995,72996],{"class":222,"line":399},[220,72997,1765],{"class":264},[220,72999,73000,73002,73005,73007,73009],{"class":222,"line":644},[220,73001,1770],{"class":264},[220,73003,73004],{"class":230},"'Stone'",[220,73006,32198],{"class":264},[220,73008,7749],{"class":420},[220,73010,7541],{"class":264},[220,73012,73013,73015,73017],{"class":222,"line":650},[220,73014,7009],{"class":264},[220,73016,3206],{"class":230},[220,73018,2465],{"class":264},[220,73020,73021],{"class":222,"line":656},[220,73022,7026],{"class":264},[220,73024,73025],{"class":222,"line":673},[220,73026,1787],{"class":264},[220,73028,73029],{"class":222,"line":682},[220,73030,1792],{"class":264},[1504,73032,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73034},[73035,73036],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstone",{"title":72712,"description":72720},"docs\u002Fcomponents\u002FStone","El6pd6LFKm4w5WD8UZn10m2OHzO3-AOTWn6nw9Gqj2g",{"id":73043,"title":73044,"body":73045,"category":33058,"componentType":25872,"description":73052,"extension":191,"meta":73237,"navigation":194,"path":73238,"requiresChild":32525,"seo":73239,"stem":73240,"__hash__":73241},"components\u002Fdocs\u002Fcomponents\u002FStrands.md","Strands",{"type":8,"value":73046,"toc":73233},[73047,73050,73053,73055,73057,73060,73062,73231],[11,73048,73044],{"id":73049},"strands",[15,73051,73052],{},"Flowing ribbons of light with a multi-color gradient",[31906,73054],{"component":73044},[23,73056,31910],{"id":26528},[31912,73058],{":props":73059},"[{\"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,73061,31918],{"id":31917},[246,73063,73064,73093,73121,73149,73177],{":tabs":1557},[212,73065,73067],{"className":334,"code":73066,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStrands \u002F>\n\u003C\u002FShader>\n",[99,73068,73069,73077,73085],{"__ignoreMap":178},[220,73070,73071,73073,73075],{"class":222,"line":223},[220,73072,343],{"class":264},[220,73074,347],{"class":346},[220,73076,359],{"class":264},[220,73078,73079,73081,73083],{"class":222,"line":179},[220,73080,364],{"class":264},[220,73082,73044],{"class":346},[220,73084,386],{"class":264},[220,73086,73087,73089,73091],{"class":222,"line":389},[220,73088,402],{"class":264},[220,73090,347],{"class":346},[220,73092,359],{"class":264},[212,73094,73095],{"className":409,"code":73066,"language":411,"meta":178,"style":178},[99,73096,73097,73105,73113],{"__ignoreMap":178},[220,73098,73099,73101,73103],{"class":222,"line":223},[220,73100,343],{"class":264},[220,73102,347],{"class":420},[220,73104,359],{"class":264},[220,73106,73107,73109,73111],{"class":222,"line":179},[220,73108,364],{"class":264},[220,73110,73044],{"class":420},[220,73112,386],{"class":264},[220,73114,73115,73117,73119],{"class":222,"line":389},[220,73116,402],{"class":264},[220,73118,347],{"class":420},[220,73120,359],{"class":264},[212,73122,73123],{"className":2844,"code":73066,"language":2846,"meta":178,"style":178},[99,73124,73125,73133,73141],{"__ignoreMap":178},[220,73126,73127,73129,73131],{"class":222,"line":223},[220,73128,343],{"class":264},[220,73130,347],{"class":420},[220,73132,359],{"class":264},[220,73134,73135,73137,73139],{"class":222,"line":179},[220,73136,364],{"class":264},[220,73138,73044],{"class":420},[220,73140,386],{"class":264},[220,73142,73143,73145,73147],{"class":222,"line":389},[220,73144,402],{"class":264},[220,73146,347],{"class":420},[220,73148,359],{"class":264},[212,73150,73151],{"className":468,"code":73066,"language":469,"meta":178,"style":178},[99,73152,73153,73161,73169],{"__ignoreMap":178},[220,73154,73155,73157,73159],{"class":222,"line":223},[220,73156,343],{"class":264},[220,73158,347],{"class":420},[220,73160,359],{"class":264},[220,73162,73163,73165,73167],{"class":222,"line":179},[220,73164,364],{"class":264},[220,73166,73044],{"class":420},[220,73168,386],{"class":264},[220,73170,73171,73173,73175],{"class":222,"line":389},[220,73172,402],{"class":264},[220,73174,347],{"class":420},[220,73176,359],{"class":264},[212,73178,73180],{"className":251,"code":73179,"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,73181,73182,73192,73196,73210,73214,73223,73227],{"__ignoreMap":178},[220,73183,73184,73186,73188,73190],{"class":222,"line":223},[220,73185,261],{"class":260},[220,73187,11507],{"class":264},[220,73189,268],{"class":260},[220,73191,4007],{"class":230},[220,73193,73194],{"class":222,"line":179},[220,73195,647],{"emptyLinePlaceholder":194},[220,73197,73198,73200,73202,73204,73206,73208],{"class":222,"line":389},[220,73199,1735],{"class":260},[220,73201,1738],{"class":420},[220,73203,1741],{"class":260},[220,73205,1744],{"class":260},[220,73207,1747],{"class":226},[220,73209,1750],{"class":264},[220,73211,73212],{"class":222,"line":399},[220,73213,1765],{"class":264},[220,73215,73216,73218,73221],{"class":222,"line":644},[220,73217,1770],{"class":264},[220,73219,73220],{"class":230},"'Strands'",[220,73222,2465],{"class":264},[220,73224,73225],{"class":222,"line":650},[220,73226,1787],{"class":264},[220,73228,73229],{"class":222,"line":656},[220,73230,1792],{"class":264},[1504,73232,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":73234},[73235,73236],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstrands",{"title":73044,"description":73052},"docs\u002Fcomponents\u002FStrands","GfqAOqLIverVQQv25oLdyFpn-lD7GlrS0UzcNmNu0Zo",{"id":73243,"title":73244,"body":73245,"category":33391,"componentType":25878,"description":73252,"extension":191,"meta":73513,"navigation":194,"path":73514,"requiresChild":194,"seo":73515,"stem":73516,"__hash__":73517},"components\u002Fdocs\u002Fcomponents\u002FStretch.md","Stretch",{"type":8,"value":73246,"toc":73509},[73247,73250,73253,73255,73257,73260,73262,73507],[11,73248,73244],{"id":73249},"stretch",[15,73251,73252],{},"Stretch content towards a direction from a center point",[31906,73254],{"component":73244},[23,73256,31910],{"id":26528},[31912,73258],{":props":73259},"[{\"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,73261,31918],{"id":31917},[246,73263,73264,73309,73353,73397,73441],{":tabs":1557},[212,73265,73267],{"className":334,"code":73266,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStretch>\n \u003CCircle \u002F>\n \u003C\u002FStretch>\n\u003C\u002FShader>\n",[99,73268,73269,73277,73285,73293,73301],{"__ignoreMap":178},[220,73270,73271,73273,73275],{"class":222,"line":223},[220,73272,343],{"class":264},[220,73274,347],{"class":346},[220,73276,359],{"class":264},[220,73278,73279,73281,73283],{"class":222,"line":179},[220,73280,364],{"class":264},[220,73282,73244],{"class":346},[220,73284,359],{"class":264},[220,73286,73287,73289,73291],{"class":222,"line":389},[220,73288,2550],{"class":264},[220,73290,2553],{"class":346},[220,73292,386],{"class":264},[220,73294,73295,73297,73299],{"class":222,"line":399},[220,73296,2567],{"class":264},[220,73298,73244],{"class":346},[220,73300,359],{"class":264},[220,73302,73303,73305,73307],{"class":222,"line":644},[220,73304,402],{"class":264},[220,73306,347],{"class":346},[220,73308,359],{"class":264},[212,73310,73311],{"className":409,"code":73266,"language":411,"meta":178,"style":178},[99,73312,73313,73321,73329,73337,73345],{"__ignoreMap":178},[220,73314,73315,73317,73319],{"class":222,"line":223},[220,73316,343],{"class":264},[220,73318,347],{"class":420},[220,73320,359],{"class":264},[220,73322,73323,73325,73327],{"class":222,"line":179},[220,73324,364],{"class":264},[220,73326,73244],{"class":420},[220,73328,359],{"class":264},[220,73330,73331,73333,73335],{"class":222,"line":389},[220,73332,2550],{"class":264},[220,73334,2553],{"class":420},[220,73336,386],{"class":264},[220,73338,73339,73341,73343],{"class":222,"line":399},[220,73340,2567],{"class":264},[220,73342,73244],{"class":420},[220,73344,359],{"class":264},[220,73346,73347,73349,73351],{"class":222,"line":644},[220,73348,402],{"class":264},[220,73350,347],{"class":420},[220,73352,359],{"class":264},[212,73354,73355],{"className":2844,"code":73266,"language":2846,"meta":178,"style":178},[99,73356,73357,73365,73373,73381,73389],{"__ignoreMap":178},[220,73358,73359,73361,73363],{"class":222,"line":223},[220,73360,343],{"class":264},[220,73362,347],{"class":420},[220,73364,359],{"class":264},[220,73366,73367,73369,73371],{"class":222,"line":179},[220,73368,364],{"class":264},[220,73370,73244],{"class":420},[220,73372,359],{"class":264},[220,73374,73375,73377,73379],{"class":222,"line":389},[220,73376,2550],{"class":264},[220,73378,2553],{"class":420},[220,73380,386],{"class":264},[220,73382,73383,73385,73387],{"class":222,"line":399},[220,73384,2567],{"class":264},[220,73386,73244],{"class":420},[220,73388,359],{"class":264},[220,73390,73391,73393,73395],{"class":222,"line":644},[220,73392,402],{"class":264},[220,73394,347],{"class":420},[220,73396,359],{"class":264},[212,73398,73399],{"className":468,"code":73266,"language":469,"meta":178,"style":178},[99,73400,73401,73409,73417,73425,73433],{"__ignoreMap":178},[220,73402,73403,73405,73407],{"class":222,"line":223},[220,73404,343],{"class":264},[220,73406,347],{"class":420},[220,73408,359],{"class":264},[220,73410,73411,73413,73415],{"class":222,"line":179},[220,73412,364],{"class":264},[220,73414,73244],{"class":420},[220,73416,359],{"class":264},[220,73418,73419,73421,73423],{"class":222,"line":389},[220,73420,2550],{"class":264},[220,73422,2553],{"class":420},[220,73424,386],{"class":264},[220,73426,73427,73429,73431],{"class":222,"line":399},[220,73428,2567],{"class":264},[220,73430,73244],{"class":420},[220,73432,359],{"class":264},[220,73434,73435,73437,73439],{"class":222,"line":644},[220,73436,402],{"class":264},[220,73438,347],{"class":420},[220,73440,359],{"class":264},[212,73442,73444],{"className":251,"code":73443,"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,73445,73446,73456,73460,73474,73478,73487,73495,73499,73503],{"__ignoreMap":178},[220,73447,73448,73450,73452,73454],{"class":222,"line":223},[220,73449,261],{"class":260},[220,73451,11507],{"class":264},[220,73453,268],{"class":260},[220,73455,4007],{"class":230},[220,73457,73458],{"class":222,"line":179},[220,73459,647],{"emptyLinePlaceholder":194},[220,73461,73462,73464,73466,73468,73470,73472],{"class":222,"line":389},[220,73463,1735],{"class":260},[220,73465,1738],{"class":420},[220,73467,1741],{"class":260},[220,73469,1744],{"class":260},[220,73471,1747],{"class":226},[220,73473,1750],{"class":264},[220,73475,73476],{"class":222,"line":399},[220,73477,1765],{"class":264},[220,73479,73480,73482,73485],{"class":222,"line":644},[220,73481,1770],{"class":264},[220,73483,73484],{"class":230},"'Stretch'",[220,73486,7004],{"class":264},[220,73488,73489,73491,73493],{"class":222,"line":650},[220,73490,7009],{"class":264},[220,73492,3206],{"class":230},[220,73494,2465],{"class":264},[220,73496,73497],{"class":222,"line":656},[220,73498,7026],{"class":264},[220,73500,73501],{"class":222,"line":673},[220,73502,1787],{"class":264},[220,73504,73505],{"class":222,"line":682},[220,73506,1792],{"class":264},[1504,73508,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":73510},[73511,73512],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstretch",{"title":73244,"description":73252},"docs\u002Fcomponents\u002FStretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":73519,"title":15834,"body":73520,"category":33058,"componentType":25872,"description":73527,"extension":191,"meta":73711,"navigation":194,"path":73712,"requiresChild":32525,"seo":73713,"stem":73714,"__hash__":73715},"components\u002Fdocs\u002Fcomponents\u002FStripes.md",{"type":8,"value":73521,"toc":73707},[73522,73525,73528,73530,73532,73535,73537,73705],[11,73523,15834],{"id":73524},"stripes",[15,73526,73527],{},"Alternating colored stripes with animation",[31906,73529],{"component":15834},[23,73531,31910],{"id":26528},[31912,73533],{":props":73534},"[{\"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,73536,31918],{"id":31917},[246,73538,73539,73568,73596,73624,73652],{":tabs":1557},[212,73540,73542],{"className":334,"code":73541,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStripes \u002F>\n\u003C\u002FShader>\n",[99,73543,73544,73552,73560],{"__ignoreMap":178},[220,73545,73546,73548,73550],{"class":222,"line":223},[220,73547,343],{"class":264},[220,73549,347],{"class":346},[220,73551,359],{"class":264},[220,73553,73554,73556,73558],{"class":222,"line":179},[220,73555,364],{"class":264},[220,73557,15834],{"class":346},[220,73559,386],{"class":264},[220,73561,73562,73564,73566],{"class":222,"line":389},[220,73563,402],{"class":264},[220,73565,347],{"class":346},[220,73567,359],{"class":264},[212,73569,73570],{"className":409,"code":73541,"language":411,"meta":178,"style":178},[99,73571,73572,73580,73588],{"__ignoreMap":178},[220,73573,73574,73576,73578],{"class":222,"line":223},[220,73575,343],{"class":264},[220,73577,347],{"class":420},[220,73579,359],{"class":264},[220,73581,73582,73584,73586],{"class":222,"line":179},[220,73583,364],{"class":264},[220,73585,15834],{"class":420},[220,73587,386],{"class":264},[220,73589,73590,73592,73594],{"class":222,"line":389},[220,73591,402],{"class":264},[220,73593,347],{"class":420},[220,73595,359],{"class":264},[212,73597,73598],{"className":2844,"code":73541,"language":2846,"meta":178,"style":178},[99,73599,73600,73608,73616],{"__ignoreMap":178},[220,73601,73602,73604,73606],{"class":222,"line":223},[220,73603,343],{"class":264},[220,73605,347],{"class":420},[220,73607,359],{"class":264},[220,73609,73610,73612,73614],{"class":222,"line":179},[220,73611,364],{"class":264},[220,73613,15834],{"class":420},[220,73615,386],{"class":264},[220,73617,73618,73620,73622],{"class":222,"line":389},[220,73619,402],{"class":264},[220,73621,347],{"class":420},[220,73623,359],{"class":264},[212,73625,73626],{"className":468,"code":73541,"language":469,"meta":178,"style":178},[99,73627,73628,73636,73644],{"__ignoreMap":178},[220,73629,73630,73632,73634],{"class":222,"line":223},[220,73631,343],{"class":264},[220,73633,347],{"class":420},[220,73635,359],{"class":264},[220,73637,73638,73640,73642],{"class":222,"line":179},[220,73639,364],{"class":264},[220,73641,15834],{"class":420},[220,73643,386],{"class":264},[220,73645,73646,73648,73650],{"class":222,"line":389},[220,73647,402],{"class":264},[220,73649,347],{"class":420},[220,73651,359],{"class":264},[212,73653,73655],{"className":251,"code":73654,"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,73656,73657,73667,73671,73685,73689,73697,73701],{"__ignoreMap":178},[220,73658,73659,73661,73663,73665],{"class":222,"line":223},[220,73660,261],{"class":260},[220,73662,11507],{"class":264},[220,73664,268],{"class":260},[220,73666,4007],{"class":230},[220,73668,73669],{"class":222,"line":179},[220,73670,647],{"emptyLinePlaceholder":194},[220,73672,73673,73675,73677,73679,73681,73683],{"class":222,"line":389},[220,73674,1735],{"class":260},[220,73676,1738],{"class":420},[220,73678,1741],{"class":260},[220,73680,1744],{"class":260},[220,73682,1747],{"class":226},[220,73684,1750],{"class":264},[220,73686,73687],{"class":222,"line":399},[220,73688,1765],{"class":264},[220,73690,73691,73693,73695],{"class":222,"line":644},[220,73692,1770],{"class":264},[220,73694,17092],{"class":230},[220,73696,2465],{"class":264},[220,73698,73699],{"class":222,"line":650},[220,73700,1787],{"class":264},[220,73702,73703],{"class":222,"line":656},[220,73704,1792],{"class":264},[1504,73706,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":73708},[73709,73710],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstripes",{"title":15834,"description":73527},"docs\u002Fcomponents\u002FStripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":73717,"title":73718,"body":73719,"category":33058,"componentType":25872,"description":73726,"extension":191,"meta":73958,"navigation":194,"path":73959,"requiresChild":32525,"seo":73960,"stem":73961,"__hash__":73962},"components\u002Fdocs\u002Fcomponents\u002FStudioBackground.md","StudioBackground",{"type":8,"value":73720,"toc":73954},[73721,73724,73727,73729,73731,73734,73736,73952],[11,73722,73718],{"id":73723},"studiobackground",[15,73725,73726],{},"Multi-light studio background with ambient motion.",[31906,73728],{"component":73718},[23,73730,31910],{"id":26528},[31912,73732],{":props":73733},"[{\"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,73735,31918],{"id":31917},[246,73737,73738,73779,73817,73855,73893],{":tabs":1557},[212,73739,73741],{"className":334,"code":73740,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n \u002F>\n\u003C\u002FShader>\n",[99,73742,73743,73751,73758,73767,73771],{"__ignoreMap":178},[220,73744,73745,73747,73749],{"class":222,"line":223},[220,73746,343],{"class":264},[220,73748,347],{"class":346},[220,73750,359],{"class":264},[220,73752,73753,73755],{"class":222,"line":179},[220,73754,364],{"class":264},[220,73756,73757],{"class":346},"StudioBackground\n",[220,73759,73760,73762,73764],{"class":222,"line":389},[220,73761,9630],{"class":226},[220,73763,353],{"class":264},[220,73765,73766],{"class":230},"\"#d8dbec\"\n",[220,73768,73769],{"class":222,"line":399},[220,73770,1234],{"class":264},[220,73772,73773,73775,73777],{"class":222,"line":644},[220,73774,402],{"class":264},[220,73776,347],{"class":346},[220,73778,359],{"class":264},[212,73780,73781],{"className":409,"code":73740,"language":411,"meta":178,"style":178},[99,73782,73783,73791,73797,73805,73809],{"__ignoreMap":178},[220,73784,73785,73787,73789],{"class":222,"line":223},[220,73786,343],{"class":264},[220,73788,347],{"class":420},[220,73790,359],{"class":264},[220,73792,73793,73795],{"class":222,"line":179},[220,73794,364],{"class":264},[220,73796,73757],{"class":420},[220,73798,73799,73801,73803],{"class":222,"line":389},[220,73800,9630],{"class":226},[220,73802,353],{"class":260},[220,73804,73766],{"class":230},[220,73806,73807],{"class":222,"line":399},[220,73808,1234],{"class":264},[220,73810,73811,73813,73815],{"class":222,"line":644},[220,73812,402],{"class":264},[220,73814,347],{"class":420},[220,73816,359],{"class":264},[212,73818,73819],{"className":2844,"code":73740,"language":2846,"meta":178,"style":178},[99,73820,73821,73829,73835,73843,73847],{"__ignoreMap":178},[220,73822,73823,73825,73827],{"class":222,"line":223},[220,73824,343],{"class":264},[220,73826,347],{"class":420},[220,73828,359],{"class":264},[220,73830,73831,73833],{"class":222,"line":179},[220,73832,364],{"class":264},[220,73834,73757],{"class":420},[220,73836,73837,73839,73841],{"class":222,"line":389},[220,73838,9630],{"class":226},[220,73840,353],{"class":264},[220,73842,73766],{"class":230},[220,73844,73845],{"class":222,"line":399},[220,73846,1234],{"class":264},[220,73848,73849,73851,73853],{"class":222,"line":644},[220,73850,402],{"class":264},[220,73852,347],{"class":420},[220,73854,359],{"class":264},[212,73856,73857],{"className":468,"code":73740,"language":469,"meta":178,"style":178},[99,73858,73859,73867,73873,73881,73885],{"__ignoreMap":178},[220,73860,73861,73863,73865],{"class":222,"line":223},[220,73862,343],{"class":264},[220,73864,347],{"class":420},[220,73866,359],{"class":264},[220,73868,73869,73871],{"class":222,"line":179},[220,73870,364],{"class":264},[220,73872,73757],{"class":420},[220,73874,73875,73877,73879],{"class":222,"line":389},[220,73876,9630],{"class":226},[220,73878,353],{"class":260},[220,73880,73766],{"class":230},[220,73882,73883],{"class":222,"line":399},[220,73884,1234],{"class":264},[220,73886,73887,73889,73891],{"class":222,"line":644},[220,73888,402],{"class":264},[220,73890,347],{"class":420},[220,73892,359],{"class":264},[212,73894,73896],{"className":251,"code":73895,"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,73897,73898,73908,73912,73926,73930,73944,73948],{"__ignoreMap":178},[220,73899,73900,73902,73904,73906],{"class":222,"line":223},[220,73901,261],{"class":260},[220,73903,11507],{"class":264},[220,73905,268],{"class":260},[220,73907,4007],{"class":230},[220,73909,73910],{"class":222,"line":179},[220,73911,647],{"emptyLinePlaceholder":194},[220,73913,73914,73916,73918,73920,73922,73924],{"class":222,"line":389},[220,73915,1735],{"class":260},[220,73917,1738],{"class":420},[220,73919,1741],{"class":260},[220,73921,1744],{"class":260},[220,73923,1747],{"class":226},[220,73925,1750],{"class":264},[220,73927,73928],{"class":222,"line":399},[220,73929,1765],{"class":264},[220,73931,73932,73934,73937,73939,73942],{"class":222,"line":644},[220,73933,1770],{"class":264},[220,73935,73936],{"class":230},"'StudioBackground'",[220,73938,1776],{"class":264},[220,73940,73941],{"class":230},"'#d8dbec'",[220,73943,1782],{"class":264},[220,73945,73946],{"class":222,"line":650},[220,73947,1787],{"class":264},[220,73949,73950],{"class":222,"line":656},[220,73951,1792],{"class":264},[1504,73953,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":73955},[73956,73957],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fstudiobackground",{"title":73718,"description":73726},"docs\u002Fcomponents\u002FStudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":73964,"title":73965,"body":73966,"category":33058,"componentType":25872,"description":73973,"extension":191,"meta":74252,"navigation":194,"path":74253,"requiresChild":32525,"seo":74254,"stem":74255,"__hash__":74256},"components\u002Fdocs\u002Fcomponents\u002FSunBurst.md","SunBurst",{"type":8,"value":73967,"toc":74248},[73968,73971,73974,73976,73978,73981,73983,74246],[11,73969,73965],{"id":73970},"sunburst",[15,73972,73973],{},"Radial sunburst rays emanating from a center point",[31906,73975],{"component":73965},[23,73977,31910],{"id":26528},[31912,73979],{":props":73980},"[{\"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,73982,31918],{"id":31917},[246,73984,73985,74034,74085,74133,74183],{":tabs":1557},[212,73986,73988],{"className":334,"code":73987,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n \u002F>\n\u003C\u002FShader>\n",[99,73989,73990,73998,74005,74014,74022,74026],{"__ignoreMap":178},[220,73991,73992,73994,73996],{"class":222,"line":223},[220,73993,343],{"class":264},[220,73995,347],{"class":346},[220,73997,359],{"class":264},[220,73999,74000,74002],{"class":222,"line":179},[220,74001,364],{"class":264},[220,74003,74004],{"class":346},"SunBurst\n",[220,74006,74007,74009,74011],{"class":222,"line":389},[220,74008,9630],{"class":226},[220,74010,353],{"class":264},[220,74012,74013],{"class":230},"\"#ffdd88\"\n",[220,74015,74016,74018,74020],{"class":222,"line":399},[220,74017,17400],{"class":226},[220,74019,353],{"class":264},[220,74021,9645],{"class":230},[220,74023,74024],{"class":222,"line":644},[220,74025,1234],{"class":264},[220,74027,74028,74030,74032],{"class":222,"line":650},[220,74029,402],{"class":264},[220,74031,347],{"class":346},[220,74033,359],{"class":264},[212,74035,74037],{"className":409,"code":74036,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n \u002F>\n\u003C\u002FShader>\n",[99,74038,74039,74047,74053,74061,74073,74077],{"__ignoreMap":178},[220,74040,74041,74043,74045],{"class":222,"line":223},[220,74042,343],{"class":264},[220,74044,347],{"class":420},[220,74046,359],{"class":264},[220,74048,74049,74051],{"class":222,"line":179},[220,74050,364],{"class":264},[220,74052,74004],{"class":420},[220,74054,74055,74057,74059],{"class":222,"line":389},[220,74056,9630],{"class":226},[220,74058,353],{"class":260},[220,74060,74013],{"class":230},[220,74062,74063,74065,74067,74069,74071],{"class":222,"line":399},[220,74064,9640],{"class":226},[220,74066,353],{"class":260},[220,74068,743],{"class":264},[220,74070,6294],{"class":420},[220,74072,749],{"class":264},[220,74074,74075],{"class":222,"line":644},[220,74076,1234],{"class":264},[220,74078,74079,74081,74083],{"class":222,"line":650},[220,74080,402],{"class":264},[220,74082,347],{"class":420},[220,74084,359],{"class":264},[212,74086,74087],{"className":2844,"code":74036,"language":2846,"meta":178,"style":178},[99,74088,74089,74097,74103,74111,74121,74125],{"__ignoreMap":178},[220,74090,74091,74093,74095],{"class":222,"line":223},[220,74092,343],{"class":264},[220,74094,347],{"class":420},[220,74096,359],{"class":264},[220,74098,74099,74101],{"class":222,"line":179},[220,74100,364],{"class":264},[220,74102,74004],{"class":420},[220,74104,74105,74107,74109],{"class":222,"line":389},[220,74106,9630],{"class":226},[220,74108,353],{"class":264},[220,74110,74013],{"class":230},[220,74112,74113,74115,74117,74119],{"class":222,"line":399},[220,74114,9640],{"class":226},[220,74116,29866],{"class":264},[220,74118,6294],{"class":420},[220,74120,749],{"class":264},[220,74122,74123],{"class":222,"line":644},[220,74124,1234],{"class":264},[220,74126,74127,74129,74131],{"class":222,"line":650},[220,74128,402],{"class":264},[220,74130,347],{"class":420},[220,74132,359],{"class":264},[212,74134,74135],{"className":468,"code":74036,"language":469,"meta":178,"style":178},[99,74136,74137,74145,74151,74159,74171,74175],{"__ignoreMap":178},[220,74138,74139,74141,74143],{"class":222,"line":223},[220,74140,343],{"class":264},[220,74142,347],{"class":420},[220,74144,359],{"class":264},[220,74146,74147,74149],{"class":222,"line":179},[220,74148,364],{"class":264},[220,74150,74004],{"class":420},[220,74152,74153,74155,74157],{"class":222,"line":389},[220,74154,9630],{"class":226},[220,74156,353],{"class":260},[220,74158,74013],{"class":230},[220,74160,74161,74163,74165,74167,74169],{"class":222,"line":399},[220,74162,9640],{"class":226},[220,74164,353],{"class":260},[220,74166,743],{"class":264},[220,74168,6294],{"class":420},[220,74170,749],{"class":264},[220,74172,74173],{"class":222,"line":644},[220,74174,1234],{"class":264},[220,74176,74177,74179,74181],{"class":222,"line":650},[220,74178,402],{"class":264},[220,74180,347],{"class":420},[220,74182,359],{"class":264},[212,74184,74186],{"className":251,"code":74185,"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,74187,74188,74198,74202,74216,74220,74238,74242],{"__ignoreMap":178},[220,74189,74190,74192,74194,74196],{"class":222,"line":223},[220,74191,261],{"class":260},[220,74193,11507],{"class":264},[220,74195,268],{"class":260},[220,74197,4007],{"class":230},[220,74199,74200],{"class":222,"line":179},[220,74201,647],{"emptyLinePlaceholder":194},[220,74203,74204,74206,74208,74210,74212,74214],{"class":222,"line":389},[220,74205,1735],{"class":260},[220,74207,1738],{"class":420},[220,74209,1741],{"class":260},[220,74211,1744],{"class":260},[220,74213,1747],{"class":226},[220,74215,1750],{"class":264},[220,74217,74218],{"class":222,"line":399},[220,74219,1765],{"class":264},[220,74221,74222,74224,74227,74229,74232,74234,74236],{"class":222,"line":644},[220,74223,1770],{"class":264},[220,74225,74226],{"class":230},"'SunBurst'",[220,74228,1776],{"class":264},[220,74230,74231],{"class":230},"'#ffdd88'",[220,74233,6561],{"class":264},[220,74235,6294],{"class":420},[220,74237,1782],{"class":264},[220,74239,74240],{"class":222,"line":650},[220,74241,1787],{"class":264},[220,74243,74244],{"class":222,"line":656},[220,74245,1792],{"class":264},[1504,74247,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":74249},[74250,74251],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsunburst",{"title":73965,"description":73973},"docs\u002Fcomponents\u002FSunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":74258,"title":74259,"body":74260,"category":33391,"componentType":25878,"description":74267,"extension":191,"meta":74528,"navigation":194,"path":74529,"requiresChild":194,"seo":74530,"stem":74531,"__hash__":74532},"components\u002Fdocs\u002Fcomponents\u002FSurface3D.md","Surface3D",{"type":8,"value":74261,"toc":74524},[74262,74265,74268,74270,74272,74275,74277,74522],[11,74263,74259],{"id":74264},"surface3d",[15,74266,74267],{},"Drapes child content over a 3D wave surface with perspective and lighting",[31906,74269],{"component":74259},[23,74271,31910],{"id":26528},[31912,74273],{":props":74274},"[{\"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,74276,31918],{"id":31917},[246,74278,74279,74324,74368,74412,74456],{":tabs":1557},[212,74280,74282],{"className":334,"code":74281,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSurface3D>\n \u003CCircle \u002F>\n \u003C\u002FSurface3D>\n\u003C\u002FShader>\n",[99,74283,74284,74292,74300,74308,74316],{"__ignoreMap":178},[220,74285,74286,74288,74290],{"class":222,"line":223},[220,74287,343],{"class":264},[220,74289,347],{"class":346},[220,74291,359],{"class":264},[220,74293,74294,74296,74298],{"class":222,"line":179},[220,74295,364],{"class":264},[220,74297,74259],{"class":346},[220,74299,359],{"class":264},[220,74301,74302,74304,74306],{"class":222,"line":389},[220,74303,2550],{"class":264},[220,74305,2553],{"class":346},[220,74307,386],{"class":264},[220,74309,74310,74312,74314],{"class":222,"line":399},[220,74311,2567],{"class":264},[220,74313,74259],{"class":346},[220,74315,359],{"class":264},[220,74317,74318,74320,74322],{"class":222,"line":644},[220,74319,402],{"class":264},[220,74321,347],{"class":346},[220,74323,359],{"class":264},[212,74325,74326],{"className":409,"code":74281,"language":411,"meta":178,"style":178},[99,74327,74328,74336,74344,74352,74360],{"__ignoreMap":178},[220,74329,74330,74332,74334],{"class":222,"line":223},[220,74331,343],{"class":264},[220,74333,347],{"class":420},[220,74335,359],{"class":264},[220,74337,74338,74340,74342],{"class":222,"line":179},[220,74339,364],{"class":264},[220,74341,74259],{"class":420},[220,74343,359],{"class":264},[220,74345,74346,74348,74350],{"class":222,"line":389},[220,74347,2550],{"class":264},[220,74349,2553],{"class":420},[220,74351,386],{"class":264},[220,74353,74354,74356,74358],{"class":222,"line":399},[220,74355,2567],{"class":264},[220,74357,74259],{"class":420},[220,74359,359],{"class":264},[220,74361,74362,74364,74366],{"class":222,"line":644},[220,74363,402],{"class":264},[220,74365,347],{"class":420},[220,74367,359],{"class":264},[212,74369,74370],{"className":2844,"code":74281,"language":2846,"meta":178,"style":178},[99,74371,74372,74380,74388,74396,74404],{"__ignoreMap":178},[220,74373,74374,74376,74378],{"class":222,"line":223},[220,74375,343],{"class":264},[220,74377,347],{"class":420},[220,74379,359],{"class":264},[220,74381,74382,74384,74386],{"class":222,"line":179},[220,74383,364],{"class":264},[220,74385,74259],{"class":420},[220,74387,359],{"class":264},[220,74389,74390,74392,74394],{"class":222,"line":389},[220,74391,2550],{"class":264},[220,74393,2553],{"class":420},[220,74395,386],{"class":264},[220,74397,74398,74400,74402],{"class":222,"line":399},[220,74399,2567],{"class":264},[220,74401,74259],{"class":420},[220,74403,359],{"class":264},[220,74405,74406,74408,74410],{"class":222,"line":644},[220,74407,402],{"class":264},[220,74409,347],{"class":420},[220,74411,359],{"class":264},[212,74413,74414],{"className":468,"code":74281,"language":469,"meta":178,"style":178},[99,74415,74416,74424,74432,74440,74448],{"__ignoreMap":178},[220,74417,74418,74420,74422],{"class":222,"line":223},[220,74419,343],{"class":264},[220,74421,347],{"class":420},[220,74423,359],{"class":264},[220,74425,74426,74428,74430],{"class":222,"line":179},[220,74427,364],{"class":264},[220,74429,74259],{"class":420},[220,74431,359],{"class":264},[220,74433,74434,74436,74438],{"class":222,"line":389},[220,74435,2550],{"class":264},[220,74437,2553],{"class":420},[220,74439,386],{"class":264},[220,74441,74442,74444,74446],{"class":222,"line":399},[220,74443,2567],{"class":264},[220,74445,74259],{"class":420},[220,74447,359],{"class":264},[220,74449,74450,74452,74454],{"class":222,"line":644},[220,74451,402],{"class":264},[220,74453,347],{"class":420},[220,74455,359],{"class":264},[212,74457,74459],{"className":251,"code":74458,"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,74460,74461,74471,74475,74489,74493,74502,74510,74514,74518],{"__ignoreMap":178},[220,74462,74463,74465,74467,74469],{"class":222,"line":223},[220,74464,261],{"class":260},[220,74466,11507],{"class":264},[220,74468,268],{"class":260},[220,74470,4007],{"class":230},[220,74472,74473],{"class":222,"line":179},[220,74474,647],{"emptyLinePlaceholder":194},[220,74476,74477,74479,74481,74483,74485,74487],{"class":222,"line":389},[220,74478,1735],{"class":260},[220,74480,1738],{"class":420},[220,74482,1741],{"class":260},[220,74484,1744],{"class":260},[220,74486,1747],{"class":226},[220,74488,1750],{"class":264},[220,74490,74491],{"class":222,"line":399},[220,74492,1765],{"class":264},[220,74494,74495,74497,74500],{"class":222,"line":644},[220,74496,1770],{"class":264},[220,74498,74499],{"class":230},"'Surface3D'",[220,74501,7004],{"class":264},[220,74503,74504,74506,74508],{"class":222,"line":650},[220,74505,7009],{"class":264},[220,74507,3206],{"class":230},[220,74509,2465],{"class":264},[220,74511,74512],{"class":222,"line":656},[220,74513,7026],{"class":264},[220,74515,74516],{"class":222,"line":673},[220,74517,1787],{"class":264},[220,74519,74520],{"class":222,"line":682},[220,74521,1792],{"class":264},[1504,74523,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":74525},[74526,74527],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fsurface3d",{"title":74259,"description":74267},"docs\u002Fcomponents\u002FSurface3D","cD8CC6JiPAIL5zb8PH3h5T6EXqfOEDsqjKyggwdHLyE",{"id":74534,"title":13998,"body":74535,"category":33058,"componentType":25872,"description":74542,"extension":191,"meta":74727,"navigation":194,"path":74728,"requiresChild":32525,"seo":74729,"stem":74730,"__hash__":74731},"components\u002Fdocs\u002Fcomponents\u002FSwirl.md",{"type":8,"value":74536,"toc":74723},[74537,74540,74543,74545,74547,74550,74552,74721],[11,74538,13998],{"id":74539},"swirl",[15,74541,74542],{},"Flowing swirl pattern with multi-layered noise",[31906,74544],{"component":13998},[23,74546,31910],{"id":26528},[31912,74548],{":props":74549},"[{\"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,74551,31918],{"id":31917},[246,74553,74554,74583,74611,74639,74667],{":tabs":1557},[212,74555,74557],{"className":334,"code":74556,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CSwirl \u002F>\n\u003C\u002FShader>\n",[99,74558,74559,74567,74575],{"__ignoreMap":178},[220,74560,74561,74563,74565],{"class":222,"line":223},[220,74562,343],{"class":264},[220,74564,347],{"class":346},[220,74566,359],{"class":264},[220,74568,74569,74571,74573],{"class":222,"line":179},[220,74570,364],{"class":264},[220,74572,13998],{"class":346},[220,74574,386],{"class":264},[220,74576,74577,74579,74581],{"class":222,"line":389},[220,74578,402],{"class":264},[220,74580,347],{"class":346},[220,74582,359],{"class":264},[212,74584,74585],{"className":409,"code":74556,"language":411,"meta":178,"style":178},[99,74586,74587,74595,74603],{"__ignoreMap":178},[220,74588,74589,74591,74593],{"class":222,"line":223},[220,74590,343],{"class":264},[220,74592,347],{"class":420},[220,74594,359],{"class":264},[220,74596,74597,74599,74601],{"class":222,"line":179},[220,74598,364],{"class":264},[220,74600,13998],{"class":420},[220,74602,386],{"class":264},[220,74604,74605,74607,74609],{"class":222,"line":389},[220,74606,402],{"class":264},[220,74608,347],{"class":420},[220,74610,359],{"class":264},[212,74612,74613],{"className":2844,"code":74556,"language":2846,"meta":178,"style":178},[99,74614,74615,74623,74631],{"__ignoreMap":178},[220,74616,74617,74619,74621],{"class":222,"line":223},[220,74618,343],{"class":264},[220,74620,347],{"class":420},[220,74622,359],{"class":264},[220,74624,74625,74627,74629],{"class":222,"line":179},[220,74626,364],{"class":264},[220,74628,13998],{"class":420},[220,74630,386],{"class":264},[220,74632,74633,74635,74637],{"class":222,"line":389},[220,74634,402],{"class":264},[220,74636,347],{"class":420},[220,74638,359],{"class":264},[212,74640,74641],{"className":468,"code":74556,"language":469,"meta":178,"style":178},[99,74642,74643,74651,74659],{"__ignoreMap":178},[220,74644,74645,74647,74649],{"class":222,"line":223},[220,74646,343],{"class":264},[220,74648,347],{"class":420},[220,74650,359],{"class":264},[220,74652,74653,74655,74657],{"class":222,"line":179},[220,74654,364],{"class":264},[220,74656,13998],{"class":420},[220,74658,386],{"class":264},[220,74660,74661,74663,74665],{"class":222,"line":389},[220,74662,402],{"class":264},[220,74664,347],{"class":420},[220,74666,359],{"class":264},[212,74668,74670],{"className":251,"code":74669,"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,74671,74672,74682,74686,74700,74704,74713,74717],{"__ignoreMap":178},[220,74673,74674,74676,74678,74680],{"class":222,"line":223},[220,74675,261],{"class":260},[220,74677,11507],{"class":264},[220,74679,268],{"class":260},[220,74681,4007],{"class":230},[220,74683,74684],{"class":222,"line":179},[220,74685,647],{"emptyLinePlaceholder":194},[220,74687,74688,74690,74692,74694,74696,74698],{"class":222,"line":389},[220,74689,1735],{"class":260},[220,74691,1738],{"class":420},[220,74693,1741],{"class":260},[220,74695,1744],{"class":260},[220,74697,1747],{"class":226},[220,74699,1750],{"class":264},[220,74701,74702],{"class":222,"line":399},[220,74703,1765],{"class":264},[220,74705,74706,74708,74711],{"class":222,"line":644},[220,74707,1770],{"class":264},[220,74709,74710],{"class":230},"'Swirl'",[220,74712,2465],{"class":264},[220,74714,74715],{"class":222,"line":650},[220,74716,1787],{"class":264},[220,74718,74719],{"class":222,"line":656},[220,74720,1792],{"class":264},[1504,74722,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":74724},[74725,74726],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fswirl",{"title":13998,"description":74542},"docs\u002Fcomponents\u002FSwirl","xujgBhUI5euz75cRvWgvwi6oDn9dGM1ypqM3BwCOdp4",{"id":74733,"title":74734,"body":74735,"category":15903,"componentType":25872,"description":74742,"extension":191,"meta":75020,"navigation":194,"path":75021,"requiresChild":32525,"seo":75022,"stem":75023,"__hash__":75024},"components\u002Fdocs\u002Fcomponents\u002FTeardrop.md","Teardrop",{"type":8,"value":74736,"toc":75016},[74737,74740,74743,74745,74747,74750,74752,75014],[11,74738,74734],{"id":74739},"teardrop",[15,74741,74742],{},"Teardrop — a rounded bulb tapering to a sharp point",[31906,74744],{"component":74734},[23,74746,31910],{"id":26528},[31912,74748],{":props":74749},"[{\"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,74751,31918],{"id":31917},[246,74753,74754,74803,74854,74902,74952],{":tabs":1557},[212,74755,74757],{"className":334,"code":74756,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n :radius=\"0.22\"\n \u002F>\n\u003C\u002FShader>\n",[99,74758,74759,74767,74774,74782,74791,74795],{"__ignoreMap":178},[220,74760,74761,74763,74765],{"class":222,"line":223},[220,74762,343],{"class":264},[220,74764,347],{"class":346},[220,74766,359],{"class":264},[220,74768,74769,74771],{"class":222,"line":179},[220,74770,364],{"class":264},[220,74772,74773],{"class":346},"Teardrop\n",[220,74775,74776,74778,74780],{"class":222,"line":389},[220,74777,9630],{"class":226},[220,74779,353],{"class":264},[220,74781,9586],{"class":230},[220,74783,74784,74786,74788],{"class":222,"line":399},[220,74785,17400],{"class":226},[220,74787,353],{"class":264},[220,74789,74790],{"class":230},"\"0.22\"\n",[220,74792,74793],{"class":222,"line":644},[220,74794,1234],{"class":264},[220,74796,74797,74799,74801],{"class":222,"line":650},[220,74798,402],{"class":264},[220,74800,347],{"class":346},[220,74802,359],{"class":264},[212,74804,74806],{"className":409,"code":74805,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTeardrop\n color=\"#ffffff\"\n radius={0.22}\n \u002F>\n\u003C\u002FShader>\n",[99,74807,74808,74816,74822,74830,74842,74846],{"__ignoreMap":178},[220,74809,74810,74812,74814],{"class":222,"line":223},[220,74811,343],{"class":264},[220,74813,347],{"class":420},[220,74815,359],{"class":264},[220,74817,74818,74820],{"class":222,"line":179},[220,74819,364],{"class":264},[220,74821,74773],{"class":420},[220,74823,74824,74826,74828],{"class":222,"line":389},[220,74825,9630],{"class":226},[220,74827,353],{"class":260},[220,74829,9586],{"class":230},[220,74831,74832,74834,74836,74838,74840],{"class":222,"line":399},[220,74833,9640],{"class":226},[220,74835,353],{"class":260},[220,74837,743],{"class":264},[220,74839,23944],{"class":420},[220,74841,749],{"class":264},[220,74843,74844],{"class":222,"line":644},[220,74845,1234],{"class":264},[220,74847,74848,74850,74852],{"class":222,"line":650},[220,74849,402],{"class":264},[220,74851,347],{"class":420},[220,74853,359],{"class":264},[212,74855,74856],{"className":2844,"code":74805,"language":2846,"meta":178,"style":178},[99,74857,74858,74866,74872,74880,74890,74894],{"__ignoreMap":178},[220,74859,74860,74862,74864],{"class":222,"line":223},[220,74861,343],{"class":264},[220,74863,347],{"class":420},[220,74865,359],{"class":264},[220,74867,74868,74870],{"class":222,"line":179},[220,74869,364],{"class":264},[220,74871,74773],{"class":420},[220,74873,74874,74876,74878],{"class":222,"line":389},[220,74875,9630],{"class":226},[220,74877,353],{"class":264},[220,74879,9586],{"class":230},[220,74881,74882,74884,74886,74888],{"class":222,"line":399},[220,74883,9640],{"class":226},[220,74885,29866],{"class":264},[220,74887,23944],{"class":420},[220,74889,749],{"class":264},[220,74891,74892],{"class":222,"line":644},[220,74893,1234],{"class":264},[220,74895,74896,74898,74900],{"class":222,"line":650},[220,74897,402],{"class":264},[220,74899,347],{"class":420},[220,74901,359],{"class":264},[212,74903,74904],{"className":468,"code":74805,"language":469,"meta":178,"style":178},[99,74905,74906,74914,74920,74928,74940,74944],{"__ignoreMap":178},[220,74907,74908,74910,74912],{"class":222,"line":223},[220,74909,343],{"class":264},[220,74911,347],{"class":420},[220,74913,359],{"class":264},[220,74915,74916,74918],{"class":222,"line":179},[220,74917,364],{"class":264},[220,74919,74773],{"class":420},[220,74921,74922,74924,74926],{"class":222,"line":389},[220,74923,9630],{"class":226},[220,74925,353],{"class":260},[220,74927,9586],{"class":230},[220,74929,74930,74932,74934,74936,74938],{"class":222,"line":399},[220,74931,9640],{"class":226},[220,74933,353],{"class":260},[220,74935,743],{"class":264},[220,74937,23944],{"class":420},[220,74939,749],{"class":264},[220,74941,74942],{"class":222,"line":644},[220,74943,1234],{"class":264},[220,74945,74946,74948,74950],{"class":222,"line":650},[220,74947,402],{"class":264},[220,74949,347],{"class":420},[220,74951,359],{"class":264},[212,74953,74955],{"className":251,"code":74954,"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,74956,74957,74967,74971,74985,74989,75006,75010],{"__ignoreMap":178},[220,74958,74959,74961,74963,74965],{"class":222,"line":223},[220,74960,261],{"class":260},[220,74962,11507],{"class":264},[220,74964,268],{"class":260},[220,74966,4007],{"class":230},[220,74968,74969],{"class":222,"line":179},[220,74970,647],{"emptyLinePlaceholder":194},[220,74972,74973,74975,74977,74979,74981,74983],{"class":222,"line":389},[220,74974,1735],{"class":260},[220,74976,1738],{"class":420},[220,74978,1741],{"class":260},[220,74980,1744],{"class":260},[220,74982,1747],{"class":226},[220,74984,1750],{"class":264},[220,74986,74987],{"class":222,"line":399},[220,74988,1765],{"class":264},[220,74990,74991,74993,74996,74998,75000,75002,75004],{"class":222,"line":644},[220,74992,1770],{"class":264},[220,74994,74995],{"class":230},"'Teardrop'",[220,74997,1776],{"class":264},[220,74999,10164],{"class":230},[220,75001,6561],{"class":264},[220,75003,23944],{"class":420},[220,75005,1782],{"class":264},[220,75007,75008],{"class":222,"line":650},[220,75009,1787],{"class":264},[220,75011,75012],{"class":222,"line":656},[220,75013,1792],{"class":264},[1504,75015,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75017},[75018,75019],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fteardrop",{"title":74734,"description":74742},"docs\u002Fcomponents\u002FTeardrop","HB7BPC1Hh2GGJe8Q_BDCEQl9aHaIrotgBGAAWufuwk4",{"id":75026,"title":75027,"body":75028,"category":33058,"componentType":25872,"description":75034,"extension":191,"meta":75264,"navigation":194,"path":75265,"requiresChild":32525,"seo":75266,"stem":75267,"__hash__":75268},"components\u002Fdocs\u002Fcomponents\u002FText.md","Text",{"type":8,"value":75029,"toc":75260},[75030,75032,75035,75037,75039,75042,75044,75258],[11,75031,75027],{"id":15639},[15,75033,75034],{},"Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture",[31906,75036],{"component":75027},[23,75038,31910],{"id":26528},[31912,75040],{":props":75041},"[{\"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,75043,31918],{"id":31917},[246,75045,75046,75086,75124,75162,75200],{":tabs":1557},[212,75047,75049],{"className":334,"code":75048,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CText\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,75050,75051,75059,75066,75074,75078],{"__ignoreMap":178},[220,75052,75053,75055,75057],{"class":222,"line":223},[220,75054,343],{"class":264},[220,75056,347],{"class":346},[220,75058,359],{"class":264},[220,75060,75061,75063],{"class":222,"line":179},[220,75062,364],{"class":264},[220,75064,75065],{"class":346},"Text\n",[220,75067,75068,75070,75072],{"class":222,"line":389},[220,75069,9630],{"class":226},[220,75071,353],{"class":264},[220,75073,9586],{"class":230},[220,75075,75076],{"class":222,"line":399},[220,75077,1234],{"class":264},[220,75079,75080,75082,75084],{"class":222,"line":644},[220,75081,402],{"class":264},[220,75083,347],{"class":346},[220,75085,359],{"class":264},[212,75087,75088],{"className":409,"code":75048,"language":411,"meta":178,"style":178},[99,75089,75090,75098,75104,75112,75116],{"__ignoreMap":178},[220,75091,75092,75094,75096],{"class":222,"line":223},[220,75093,343],{"class":264},[220,75095,347],{"class":420},[220,75097,359],{"class":264},[220,75099,75100,75102],{"class":222,"line":179},[220,75101,364],{"class":264},[220,75103,75065],{"class":420},[220,75105,75106,75108,75110],{"class":222,"line":389},[220,75107,9630],{"class":226},[220,75109,353],{"class":260},[220,75111,9586],{"class":230},[220,75113,75114],{"class":222,"line":399},[220,75115,1234],{"class":264},[220,75117,75118,75120,75122],{"class":222,"line":644},[220,75119,402],{"class":264},[220,75121,347],{"class":420},[220,75123,359],{"class":264},[212,75125,75126],{"className":2844,"code":75048,"language":2846,"meta":178,"style":178},[99,75127,75128,75136,75142,75150,75154],{"__ignoreMap":178},[220,75129,75130,75132,75134],{"class":222,"line":223},[220,75131,343],{"class":264},[220,75133,347],{"class":420},[220,75135,359],{"class":264},[220,75137,75138,75140],{"class":222,"line":179},[220,75139,364],{"class":264},[220,75141,75065],{"class":420},[220,75143,75144,75146,75148],{"class":222,"line":389},[220,75145,9630],{"class":226},[220,75147,353],{"class":264},[220,75149,9586],{"class":230},[220,75151,75152],{"class":222,"line":399},[220,75153,1234],{"class":264},[220,75155,75156,75158,75160],{"class":222,"line":644},[220,75157,402],{"class":264},[220,75159,347],{"class":420},[220,75161,359],{"class":264},[212,75163,75164],{"className":468,"code":75048,"language":469,"meta":178,"style":178},[99,75165,75166,75174,75180,75188,75192],{"__ignoreMap":178},[220,75167,75168,75170,75172],{"class":222,"line":223},[220,75169,343],{"class":264},[220,75171,347],{"class":420},[220,75173,359],{"class":264},[220,75175,75176,75178],{"class":222,"line":179},[220,75177,364],{"class":264},[220,75179,75065],{"class":420},[220,75181,75182,75184,75186],{"class":222,"line":389},[220,75183,9630],{"class":226},[220,75185,353],{"class":260},[220,75187,9586],{"class":230},[220,75189,75190],{"class":222,"line":399},[220,75191,1234],{"class":264},[220,75193,75194,75196,75198],{"class":222,"line":644},[220,75195,402],{"class":264},[220,75197,347],{"class":420},[220,75199,359],{"class":264},[212,75201,75203],{"className":251,"code":75202,"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,75204,75205,75215,75219,75233,75237,75250,75254],{"__ignoreMap":178},[220,75206,75207,75209,75211,75213],{"class":222,"line":223},[220,75208,261],{"class":260},[220,75210,11507],{"class":264},[220,75212,268],{"class":260},[220,75214,4007],{"class":230},[220,75216,75217],{"class":222,"line":179},[220,75218,647],{"emptyLinePlaceholder":194},[220,75220,75221,75223,75225,75227,75229,75231],{"class":222,"line":389},[220,75222,1735],{"class":260},[220,75224,1738],{"class":420},[220,75226,1741],{"class":260},[220,75228,1744],{"class":260},[220,75230,1747],{"class":226},[220,75232,1750],{"class":264},[220,75234,75235],{"class":222,"line":399},[220,75236,1765],{"class":264},[220,75238,75239,75241,75244,75246,75248],{"class":222,"line":644},[220,75240,1770],{"class":264},[220,75242,75243],{"class":230},"'Text'",[220,75245,1776],{"class":264},[220,75247,10164],{"class":230},[220,75249,1782],{"class":264},[220,75251,75252],{"class":222,"line":650},[220,75253,1787],{"class":264},[220,75255,75256],{"class":222,"line":656},[220,75257,1792],{"class":264},[1504,75259,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75261},[75262,75263],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftext",{"title":75027,"description":75034},"docs\u002Fcomponents\u002FText","V5GqEdlu-00Hi0ZR7eKOTsShbIRkhUQooFlrXUwGSSs",{"id":75270,"title":23164,"body":75271,"category":36564,"componentType":25872,"description":75278,"extension":191,"meta":75519,"navigation":194,"path":75520,"requiresChild":32525,"seo":75521,"stem":75522,"__hash__":75523},"components\u002Fdocs\u002Fcomponents\u002FThinFilm.md",{"type":8,"value":75272,"toc":75515},[75273,75276,75279,75281,75283,75286,75288,75513],[11,75274,23164],{"id":75275},"thinfilm",[15,75277,75278],{},"Iridescent thin-film edge",[31906,75280],{"component":23164},[23,75282,31910],{"id":26528},[31912,75284],{":props":75285},"[{\"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,75287,31918],{"id":31917},[246,75289,75290,75330,75373,75413,75455],{":tabs":1557},[212,75291,75293],{"className":334,"code":75292,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n :intensity=\"1\"\n \u002F>\n\u003C\u002FShader>\n",[99,75294,75295,75303,75310,75318,75322],{"__ignoreMap":178},[220,75296,75297,75299,75301],{"class":222,"line":223},[220,75298,343],{"class":264},[220,75300,347],{"class":346},[220,75302,359],{"class":264},[220,75304,75305,75307],{"class":222,"line":179},[220,75306,364],{"class":264},[220,75308,75309],{"class":346},"ThinFilm\n",[220,75311,75312,75314,75316],{"class":222,"line":389},[220,75313,20366],{"class":226},[220,75315,353],{"class":264},[220,75317,36620],{"class":230},[220,75319,75320],{"class":222,"line":399},[220,75321,1234],{"class":264},[220,75323,75324,75326,75328],{"class":222,"line":644},[220,75325,402],{"class":264},[220,75327,347],{"class":346},[220,75329,359],{"class":264},[212,75331,75333],{"className":409,"code":75332,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CThinFilm\n intensity={1}\n \u002F>\n\u003C\u002FShader>\n",[99,75334,75335,75343,75349,75361,75365],{"__ignoreMap":178},[220,75336,75337,75339,75341],{"class":222,"line":223},[220,75338,343],{"class":264},[220,75340,347],{"class":420},[220,75342,359],{"class":264},[220,75344,75345,75347],{"class":222,"line":179},[220,75346,364],{"class":264},[220,75348,75309],{"class":420},[220,75350,75351,75353,75355,75357,75359],{"class":222,"line":389},[220,75352,20477],{"class":226},[220,75354,353],{"class":260},[220,75356,743],{"class":264},[220,75358,8672],{"class":420},[220,75360,749],{"class":264},[220,75362,75363],{"class":222,"line":399},[220,75364,1234],{"class":264},[220,75366,75367,75369,75371],{"class":222,"line":644},[220,75368,402],{"class":264},[220,75370,347],{"class":420},[220,75372,359],{"class":264},[212,75374,75375],{"className":2844,"code":75332,"language":2846,"meta":178,"style":178},[99,75376,75377,75385,75391,75401,75405],{"__ignoreMap":178},[220,75378,75379,75381,75383],{"class":222,"line":223},[220,75380,343],{"class":264},[220,75382,347],{"class":420},[220,75384,359],{"class":264},[220,75386,75387,75389],{"class":222,"line":179},[220,75388,364],{"class":264},[220,75390,75309],{"class":420},[220,75392,75393,75395,75397,75399],{"class":222,"line":389},[220,75394,20477],{"class":226},[220,75396,29866],{"class":264},[220,75398,8672],{"class":420},[220,75400,749],{"class":264},[220,75402,75403],{"class":222,"line":399},[220,75404,1234],{"class":264},[220,75406,75407,75409,75411],{"class":222,"line":644},[220,75408,402],{"class":264},[220,75410,347],{"class":420},[220,75412,359],{"class":264},[212,75414,75415],{"className":468,"code":75332,"language":469,"meta":178,"style":178},[99,75416,75417,75425,75431,75443,75447],{"__ignoreMap":178},[220,75418,75419,75421,75423],{"class":222,"line":223},[220,75420,343],{"class":264},[220,75422,347],{"class":420},[220,75424,359],{"class":264},[220,75426,75427,75429],{"class":222,"line":179},[220,75428,364],{"class":264},[220,75430,75309],{"class":420},[220,75432,75433,75435,75437,75439,75441],{"class":222,"line":389},[220,75434,20477],{"class":226},[220,75436,353],{"class":260},[220,75438,743],{"class":264},[220,75440,8672],{"class":420},[220,75442,749],{"class":264},[220,75444,75445],{"class":222,"line":399},[220,75446,1234],{"class":264},[220,75448,75449,75451,75453],{"class":222,"line":644},[220,75450,402],{"class":264},[220,75452,347],{"class":420},[220,75454,359],{"class":264},[212,75456,75458],{"className":251,"code":75457,"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,75459,75460,75470,75474,75488,75492,75505,75509],{"__ignoreMap":178},[220,75461,75462,75464,75466,75468],{"class":222,"line":223},[220,75463,261],{"class":260},[220,75465,11507],{"class":264},[220,75467,268],{"class":260},[220,75469,4007],{"class":230},[220,75471,75472],{"class":222,"line":179},[220,75473,647],{"emptyLinePlaceholder":194},[220,75475,75476,75478,75480,75482,75484,75486],{"class":222,"line":389},[220,75477,1735],{"class":260},[220,75479,1738],{"class":420},[220,75481,1741],{"class":260},[220,75483,1744],{"class":260},[220,75485,1747],{"class":226},[220,75487,1750],{"class":264},[220,75489,75490],{"class":222,"line":399},[220,75491,1765],{"class":264},[220,75493,75494,75496,75499,75501,75503],{"class":222,"line":644},[220,75495,1770],{"class":264},[220,75497,75498],{"class":230},"'ThinFilm'",[220,75500,32198],{"class":264},[220,75502,8672],{"class":420},[220,75504,1782],{"class":264},[220,75506,75507],{"class":222,"line":650},[220,75508,1787],{"class":264},[220,75510,75511],{"class":222,"line":656},[220,75512,1792],{"class":264},[1504,75514,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75516},[75517,75518],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fthinfilm",{"title":23164,"description":75278},"docs\u002Fcomponents\u002FThinFilm","cwTM-RYxBIyu5ESqAmUyNO38ltCsf-h377qCF9fnsfY",{"id":75525,"title":75526,"body":75527,"category":32229,"componentType":25878,"description":75534,"extension":191,"meta":75851,"navigation":194,"path":75852,"requiresChild":194,"seo":75853,"stem":75854,"__hash__":75855},"components\u002Fdocs\u002Fcomponents\u002FTiltShift.md","TiltShift",{"type":8,"value":75528,"toc":75847},[75529,75532,75535,75537,75539,75542,75544,75845],[11,75530,75526],{"id":75531},"tiltshift",[15,75533,75534],{},"Selective focus blur mimicking tilt-shift photography",[31906,75536],{"component":75526},[23,75538,31910],{"id":26528},[31912,75540],{":props":75541},"[{\"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,75543,31918],{"id":31917},[246,75545,75546,75602,75661,75717,75775],{":tabs":1557},[212,75547,75549],{"className":334,"code":75548,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75550,75551,75559,75566,75574,75578,75586,75594],{"__ignoreMap":178},[220,75552,75553,75555,75557],{"class":222,"line":223},[220,75554,343],{"class":264},[220,75556,347],{"class":346},[220,75558,359],{"class":264},[220,75560,75561,75563],{"class":222,"line":179},[220,75562,364],{"class":264},[220,75564,75565],{"class":346},"TiltShift\n",[220,75567,75568,75570,75572],{"class":222,"line":389},[220,75569,20366],{"class":226},[220,75571,353],{"class":264},[220,75573,35075],{"class":230},[220,75575,75576],{"class":222,"line":399},[220,75577,31954],{"class":264},[220,75579,75580,75582,75584],{"class":222,"line":644},[220,75581,2550],{"class":264},[220,75583,2553],{"class":346},[220,75585,386],{"class":264},[220,75587,75588,75590,75592],{"class":222,"line":650},[220,75589,2567],{"class":264},[220,75591,75526],{"class":346},[220,75593,359],{"class":264},[220,75595,75596,75598,75600],{"class":222,"line":656},[220,75597,402],{"class":264},[220,75599,347],{"class":346},[220,75601,359],{"class":264},[212,75603,75605],{"className":409,"code":75604,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle \u002F>\n \u003C\u002FTiltShift>\n\u003C\u002FShader>\n",[99,75606,75607,75615,75621,75633,75637,75645,75653],{"__ignoreMap":178},[220,75608,75609,75611,75613],{"class":222,"line":223},[220,75610,343],{"class":264},[220,75612,347],{"class":420},[220,75614,359],{"class":264},[220,75616,75617,75619],{"class":222,"line":179},[220,75618,364],{"class":264},[220,75620,75565],{"class":420},[220,75622,75623,75625,75627,75629,75631],{"class":222,"line":389},[220,75624,20477],{"class":226},[220,75626,353],{"class":260},[220,75628,743],{"class":264},[220,75630,35133],{"class":420},[220,75632,749],{"class":264},[220,75634,75635],{"class":222,"line":399},[220,75636,31954],{"class":264},[220,75638,75639,75641,75643],{"class":222,"line":644},[220,75640,2550],{"class":264},[220,75642,2553],{"class":420},[220,75644,386],{"class":264},[220,75646,75647,75649,75651],{"class":222,"line":650},[220,75648,2567],{"class":264},[220,75650,75526],{"class":420},[220,75652,359],{"class":264},[220,75654,75655,75657,75659],{"class":222,"line":656},[220,75656,402],{"class":264},[220,75658,347],{"class":420},[220,75660,359],{"class":264},[212,75662,75663],{"className":2844,"code":75604,"language":2846,"meta":178,"style":178},[99,75664,75665,75673,75679,75689,75693,75701,75709],{"__ignoreMap":178},[220,75666,75667,75669,75671],{"class":222,"line":223},[220,75668,343],{"class":264},[220,75670,347],{"class":420},[220,75672,359],{"class":264},[220,75674,75675,75677],{"class":222,"line":179},[220,75676,364],{"class":264},[220,75678,75565],{"class":420},[220,75680,75681,75683,75685,75687],{"class":222,"line":389},[220,75682,20477],{"class":226},[220,75684,29866],{"class":264},[220,75686,35133],{"class":420},[220,75688,749],{"class":264},[220,75690,75691],{"class":222,"line":399},[220,75692,31954],{"class":264},[220,75694,75695,75697,75699],{"class":222,"line":644},[220,75696,2550],{"class":264},[220,75698,2553],{"class":420},[220,75700,386],{"class":264},[220,75702,75703,75705,75707],{"class":222,"line":650},[220,75704,2567],{"class":264},[220,75706,75526],{"class":420},[220,75708,359],{"class":264},[220,75710,75711,75713,75715],{"class":222,"line":656},[220,75712,402],{"class":264},[220,75714,347],{"class":420},[220,75716,359],{"class":264},[212,75718,75719],{"className":468,"code":75604,"language":469,"meta":178,"style":178},[99,75720,75721,75729,75735,75747,75751,75759,75767],{"__ignoreMap":178},[220,75722,75723,75725,75727],{"class":222,"line":223},[220,75724,343],{"class":264},[220,75726,347],{"class":420},[220,75728,359],{"class":264},[220,75730,75731,75733],{"class":222,"line":179},[220,75732,364],{"class":264},[220,75734,75565],{"class":420},[220,75736,75737,75739,75741,75743,75745],{"class":222,"line":389},[220,75738,20477],{"class":226},[220,75740,353],{"class":260},[220,75742,743],{"class":264},[220,75744,35133],{"class":420},[220,75746,749],{"class":264},[220,75748,75749],{"class":222,"line":399},[220,75750,31954],{"class":264},[220,75752,75753,75755,75757],{"class":222,"line":644},[220,75754,2550],{"class":264},[220,75756,2553],{"class":420},[220,75758,386],{"class":264},[220,75760,75761,75763,75765],{"class":222,"line":650},[220,75762,2567],{"class":264},[220,75764,75526],{"class":420},[220,75766,359],{"class":264},[220,75768,75769,75771,75773],{"class":222,"line":656},[220,75770,402],{"class":264},[220,75772,347],{"class":420},[220,75774,359],{"class":264},[212,75776,75778],{"className":251,"code":75777,"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,75779,75780,75790,75794,75808,75812,75825,75833,75837,75841],{"__ignoreMap":178},[220,75781,75782,75784,75786,75788],{"class":222,"line":223},[220,75783,261],{"class":260},[220,75785,11507],{"class":264},[220,75787,268],{"class":260},[220,75789,4007],{"class":230},[220,75791,75792],{"class":222,"line":179},[220,75793,647],{"emptyLinePlaceholder":194},[220,75795,75796,75798,75800,75802,75804,75806],{"class":222,"line":389},[220,75797,1735],{"class":260},[220,75799,1738],{"class":420},[220,75801,1741],{"class":260},[220,75803,1744],{"class":260},[220,75805,1747],{"class":226},[220,75807,1750],{"class":264},[220,75809,75810],{"class":222,"line":399},[220,75811,1765],{"class":264},[220,75813,75814,75816,75819,75821,75823],{"class":222,"line":644},[220,75815,1770],{"class":264},[220,75817,75818],{"class":230},"'TiltShift'",[220,75820,32198],{"class":264},[220,75822,35133],{"class":420},[220,75824,7541],{"class":264},[220,75826,75827,75829,75831],{"class":222,"line":650},[220,75828,7009],{"class":264},[220,75830,3206],{"class":230},[220,75832,2465],{"class":264},[220,75834,75835],{"class":222,"line":656},[220,75836,7026],{"class":264},[220,75838,75839],{"class":222,"line":673},[220,75840,1787],{"class":264},[220,75842,75843],{"class":222,"line":682},[220,75844,1792],{"class":264},[1504,75846,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":75848},[75849,75850],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftiltshift",{"title":75526,"description":75534},"docs\u002Fcomponents\u002FTiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":75857,"title":75858,"body":75859,"category":32801,"componentType":25878,"description":75866,"extension":191,"meta":76127,"navigation":194,"path":76128,"requiresChild":194,"seo":76129,"stem":76130,"__hash__":76131},"components\u002Fdocs\u002Fcomponents\u002FTimeTrail.md","TimeTrail",{"type":8,"value":75860,"toc":76123},[75861,75864,75867,75869,75871,75874,75876,76121],[11,75862,75858],{"id":75863},"timetrail",[15,75865,75866],{},"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",[31906,75868],{"component":75858},[23,75870,31910],{"id":26528},[31912,75872],{":props":75873},"[{\"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,75875,31918],{"id":31917},[246,75877,75878,75923,75967,76011,76055],{":tabs":1557},[212,75879,75881],{"className":334,"code":75880,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTimeTrail>\n \u003CCircle \u002F>\n \u003C\u002FTimeTrail>\n\u003C\u002FShader>\n",[99,75882,75883,75891,75899,75907,75915],{"__ignoreMap":178},[220,75884,75885,75887,75889],{"class":222,"line":223},[220,75886,343],{"class":264},[220,75888,347],{"class":346},[220,75890,359],{"class":264},[220,75892,75893,75895,75897],{"class":222,"line":179},[220,75894,364],{"class":264},[220,75896,75858],{"class":346},[220,75898,359],{"class":264},[220,75900,75901,75903,75905],{"class":222,"line":389},[220,75902,2550],{"class":264},[220,75904,2553],{"class":346},[220,75906,386],{"class":264},[220,75908,75909,75911,75913],{"class":222,"line":399},[220,75910,2567],{"class":264},[220,75912,75858],{"class":346},[220,75914,359],{"class":264},[220,75916,75917,75919,75921],{"class":222,"line":644},[220,75918,402],{"class":264},[220,75920,347],{"class":346},[220,75922,359],{"class":264},[212,75924,75925],{"className":409,"code":75880,"language":411,"meta":178,"style":178},[99,75926,75927,75935,75943,75951,75959],{"__ignoreMap":178},[220,75928,75929,75931,75933],{"class":222,"line":223},[220,75930,343],{"class":264},[220,75932,347],{"class":420},[220,75934,359],{"class":264},[220,75936,75937,75939,75941],{"class":222,"line":179},[220,75938,364],{"class":264},[220,75940,75858],{"class":420},[220,75942,359],{"class":264},[220,75944,75945,75947,75949],{"class":222,"line":389},[220,75946,2550],{"class":264},[220,75948,2553],{"class":420},[220,75950,386],{"class":264},[220,75952,75953,75955,75957],{"class":222,"line":399},[220,75954,2567],{"class":264},[220,75956,75858],{"class":420},[220,75958,359],{"class":264},[220,75960,75961,75963,75965],{"class":222,"line":644},[220,75962,402],{"class":264},[220,75964,347],{"class":420},[220,75966,359],{"class":264},[212,75968,75969],{"className":2844,"code":75880,"language":2846,"meta":178,"style":178},[99,75970,75971,75979,75987,75995,76003],{"__ignoreMap":178},[220,75972,75973,75975,75977],{"class":222,"line":223},[220,75974,343],{"class":264},[220,75976,347],{"class":420},[220,75978,359],{"class":264},[220,75980,75981,75983,75985],{"class":222,"line":179},[220,75982,364],{"class":264},[220,75984,75858],{"class":420},[220,75986,359],{"class":264},[220,75988,75989,75991,75993],{"class":222,"line":389},[220,75990,2550],{"class":264},[220,75992,2553],{"class":420},[220,75994,386],{"class":264},[220,75996,75997,75999,76001],{"class":222,"line":399},[220,75998,2567],{"class":264},[220,76000,75858],{"class":420},[220,76002,359],{"class":264},[220,76004,76005,76007,76009],{"class":222,"line":644},[220,76006,402],{"class":264},[220,76008,347],{"class":420},[220,76010,359],{"class":264},[212,76012,76013],{"className":468,"code":75880,"language":469,"meta":178,"style":178},[99,76014,76015,76023,76031,76039,76047],{"__ignoreMap":178},[220,76016,76017,76019,76021],{"class":222,"line":223},[220,76018,343],{"class":264},[220,76020,347],{"class":420},[220,76022,359],{"class":264},[220,76024,76025,76027,76029],{"class":222,"line":179},[220,76026,364],{"class":264},[220,76028,75858],{"class":420},[220,76030,359],{"class":264},[220,76032,76033,76035,76037],{"class":222,"line":389},[220,76034,2550],{"class":264},[220,76036,2553],{"class":420},[220,76038,386],{"class":264},[220,76040,76041,76043,76045],{"class":222,"line":399},[220,76042,2567],{"class":264},[220,76044,75858],{"class":420},[220,76046,359],{"class":264},[220,76048,76049,76051,76053],{"class":222,"line":644},[220,76050,402],{"class":264},[220,76052,347],{"class":420},[220,76054,359],{"class":264},[212,76056,76058],{"className":251,"code":76057,"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,76059,76060,76070,76074,76088,76092,76101,76109,76113,76117],{"__ignoreMap":178},[220,76061,76062,76064,76066,76068],{"class":222,"line":223},[220,76063,261],{"class":260},[220,76065,11507],{"class":264},[220,76067,268],{"class":260},[220,76069,4007],{"class":230},[220,76071,76072],{"class":222,"line":179},[220,76073,647],{"emptyLinePlaceholder":194},[220,76075,76076,76078,76080,76082,76084,76086],{"class":222,"line":389},[220,76077,1735],{"class":260},[220,76079,1738],{"class":420},[220,76081,1741],{"class":260},[220,76083,1744],{"class":260},[220,76085,1747],{"class":226},[220,76087,1750],{"class":264},[220,76089,76090],{"class":222,"line":399},[220,76091,1765],{"class":264},[220,76093,76094,76096,76099],{"class":222,"line":644},[220,76095,1770],{"class":264},[220,76097,76098],{"class":230},"'TimeTrail'",[220,76100,7004],{"class":264},[220,76102,76103,76105,76107],{"class":222,"line":650},[220,76104,7009],{"class":264},[220,76106,3206],{"class":230},[220,76108,2465],{"class":264},[220,76110,76111],{"class":222,"line":656},[220,76112,7026],{"class":264},[220,76114,76115],{"class":222,"line":673},[220,76116,1787],{"class":264},[220,76118,76119],{"class":222,"line":682},[220,76120,1792],{"class":264},[1504,76122,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":76124},[76125,76126],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftimetrail",{"title":75858,"description":75866},"docs\u002Fcomponents\u002FTimeTrail","UE92ll69s2IbTEP3QBBWCS9JFrQ-A1hkv-YEwMYNTXk",{"id":76133,"title":76134,"body":76135,"category":36363,"componentType":25878,"description":76142,"extension":191,"meta":76450,"navigation":194,"path":76451,"requiresChild":194,"seo":76452,"stem":76453,"__hash__":76454},"components\u002Fdocs\u002Fcomponents\u002FTint.md","Tint",{"type":8,"value":76136,"toc":76446},[76137,76140,76143,76145,76147,76150,76152,76444],[11,76138,76134],{"id":76139},"tint",[15,76141,76142],{},"Apply a color tint to the image",[31906,76144],{"component":76134},[23,76146,31910],{"id":26528},[31912,76148],{":props":76149},"[{\"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,76151,31918],{"id":31917},[246,76153,76154,76211,76265,76319,76373],{":tabs":1557},[212,76155,76157],{"className":334,"code":76156,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTint>\n\u003C\u002FShader>\n",[99,76158,76159,76167,76174,76183,76187,76195,76203],{"__ignoreMap":178},[220,76160,76161,76163,76165],{"class":222,"line":223},[220,76162,343],{"class":264},[220,76164,347],{"class":346},[220,76166,359],{"class":264},[220,76168,76169,76171],{"class":222,"line":179},[220,76170,364],{"class":264},[220,76172,76173],{"class":346},"Tint\n",[220,76175,76176,76178,76180],{"class":222,"line":389},[220,76177,9630],{"class":226},[220,76179,353],{"class":264},[220,76181,76182],{"class":230},"\"#ff8800\"\n",[220,76184,76185],{"class":222,"line":399},[220,76186,31954],{"class":264},[220,76188,76189,76191,76193],{"class":222,"line":644},[220,76190,2550],{"class":264},[220,76192,2553],{"class":346},[220,76194,386],{"class":264},[220,76196,76197,76199,76201],{"class":222,"line":650},[220,76198,2567],{"class":264},[220,76200,76134],{"class":346},[220,76202,359],{"class":264},[220,76204,76205,76207,76209],{"class":222,"line":656},[220,76206,402],{"class":264},[220,76208,347],{"class":346},[220,76210,359],{"class":264},[212,76212,76213],{"className":409,"code":76156,"language":411,"meta":178,"style":178},[99,76214,76215,76223,76229,76237,76241,76249,76257],{"__ignoreMap":178},[220,76216,76217,76219,76221],{"class":222,"line":223},[220,76218,343],{"class":264},[220,76220,347],{"class":420},[220,76222,359],{"class":264},[220,76224,76225,76227],{"class":222,"line":179},[220,76226,364],{"class":264},[220,76228,76173],{"class":420},[220,76230,76231,76233,76235],{"class":222,"line":389},[220,76232,9630],{"class":226},[220,76234,353],{"class":260},[220,76236,76182],{"class":230},[220,76238,76239],{"class":222,"line":399},[220,76240,31954],{"class":264},[220,76242,76243,76245,76247],{"class":222,"line":644},[220,76244,2550],{"class":264},[220,76246,2553],{"class":420},[220,76248,386],{"class":264},[220,76250,76251,76253,76255],{"class":222,"line":650},[220,76252,2567],{"class":264},[220,76254,76134],{"class":420},[220,76256,359],{"class":264},[220,76258,76259,76261,76263],{"class":222,"line":656},[220,76260,402],{"class":264},[220,76262,347],{"class":420},[220,76264,359],{"class":264},[212,76266,76267],{"className":2844,"code":76156,"language":2846,"meta":178,"style":178},[99,76268,76269,76277,76283,76291,76295,76303,76311],{"__ignoreMap":178},[220,76270,76271,76273,76275],{"class":222,"line":223},[220,76272,343],{"class":264},[220,76274,347],{"class":420},[220,76276,359],{"class":264},[220,76278,76279,76281],{"class":222,"line":179},[220,76280,364],{"class":264},[220,76282,76173],{"class":420},[220,76284,76285,76287,76289],{"class":222,"line":389},[220,76286,9630],{"class":226},[220,76288,353],{"class":264},[220,76290,76182],{"class":230},[220,76292,76293],{"class":222,"line":399},[220,76294,31954],{"class":264},[220,76296,76297,76299,76301],{"class":222,"line":644},[220,76298,2550],{"class":264},[220,76300,2553],{"class":420},[220,76302,386],{"class":264},[220,76304,76305,76307,76309],{"class":222,"line":650},[220,76306,2567],{"class":264},[220,76308,76134],{"class":420},[220,76310,359],{"class":264},[220,76312,76313,76315,76317],{"class":222,"line":656},[220,76314,402],{"class":264},[220,76316,347],{"class":420},[220,76318,359],{"class":264},[212,76320,76321],{"className":468,"code":76156,"language":469,"meta":178,"style":178},[99,76322,76323,76331,76337,76345,76349,76357,76365],{"__ignoreMap":178},[220,76324,76325,76327,76329],{"class":222,"line":223},[220,76326,343],{"class":264},[220,76328,347],{"class":420},[220,76330,359],{"class":264},[220,76332,76333,76335],{"class":222,"line":179},[220,76334,364],{"class":264},[220,76336,76173],{"class":420},[220,76338,76339,76341,76343],{"class":222,"line":389},[220,76340,9630],{"class":226},[220,76342,353],{"class":260},[220,76344,76182],{"class":230},[220,76346,76347],{"class":222,"line":399},[220,76348,31954],{"class":264},[220,76350,76351,76353,76355],{"class":222,"line":644},[220,76352,2550],{"class":264},[220,76354,2553],{"class":420},[220,76356,386],{"class":264},[220,76358,76359,76361,76363],{"class":222,"line":650},[220,76360,2567],{"class":264},[220,76362,76134],{"class":420},[220,76364,359],{"class":264},[220,76366,76367,76369,76371],{"class":222,"line":656},[220,76368,402],{"class":264},[220,76370,347],{"class":420},[220,76372,359],{"class":264},[212,76374,76376],{"className":251,"code":76375,"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,76377,76378,76388,76392,76406,76410,76424,76432,76436,76440],{"__ignoreMap":178},[220,76379,76380,76382,76384,76386],{"class":222,"line":223},[220,76381,261],{"class":260},[220,76383,11507],{"class":264},[220,76385,268],{"class":260},[220,76387,4007],{"class":230},[220,76389,76390],{"class":222,"line":179},[220,76391,647],{"emptyLinePlaceholder":194},[220,76393,76394,76396,76398,76400,76402,76404],{"class":222,"line":389},[220,76395,1735],{"class":260},[220,76397,1738],{"class":420},[220,76399,1741],{"class":260},[220,76401,1744],{"class":260},[220,76403,1747],{"class":226},[220,76405,1750],{"class":264},[220,76407,76408],{"class":222,"line":399},[220,76409,1765],{"class":264},[220,76411,76412,76414,76417,76419,76422],{"class":222,"line":644},[220,76413,1770],{"class":264},[220,76415,76416],{"class":230},"'Tint'",[220,76418,1776],{"class":264},[220,76420,76421],{"class":230},"'#ff8800'",[220,76423,7541],{"class":264},[220,76425,76426,76428,76430],{"class":222,"line":650},[220,76427,7009],{"class":264},[220,76429,3206],{"class":230},[220,76431,2465],{"class":264},[220,76433,76434],{"class":222,"line":656},[220,76435,7026],{"class":264},[220,76437,76438],{"class":222,"line":673},[220,76439,1787],{"class":264},[220,76441,76442],{"class":222,"line":682},[220,76443,1792],{"class":264},[1504,76445,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76447},[76448,76449],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftint",{"title":76134,"description":76142},"docs\u002Fcomponents\u002FTint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":76456,"title":76457,"body":76458,"category":15903,"componentType":25872,"description":76465,"extension":191,"meta":76695,"navigation":194,"path":76696,"requiresChild":32525,"seo":76697,"stem":76698,"__hash__":76699},"components\u002Fdocs\u002Fcomponents\u002FTrapezoid.md","Trapezoid",{"type":8,"value":76459,"toc":76691},[76460,76463,76466,76468,76470,76473,76475,76689],[11,76461,76457],{"id":76462},"trapezoid",[15,76464,76465],{},"Trapezoid with adjustable top and bottom widths and height",[31906,76467],{"component":76457},[23,76469,31910],{"id":26528},[31912,76471],{":props":76472},"[{\"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,76474,31918],{"id":31917},[246,76476,76477,76517,76555,76593,76631],{":tabs":1557},[212,76478,76480],{"className":334,"code":76479,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n \u002F>\n\u003C\u002FShader>\n",[99,76481,76482,76490,76497,76505,76509],{"__ignoreMap":178},[220,76483,76484,76486,76488],{"class":222,"line":223},[220,76485,343],{"class":264},[220,76487,347],{"class":346},[220,76489,359],{"class":264},[220,76491,76492,76494],{"class":222,"line":179},[220,76493,364],{"class":264},[220,76495,76496],{"class":346},"Trapezoid\n",[220,76498,76499,76501,76503],{"class":222,"line":389},[220,76500,9630],{"class":226},[220,76502,353],{"class":264},[220,76504,9586],{"class":230},[220,76506,76507],{"class":222,"line":399},[220,76508,1234],{"class":264},[220,76510,76511,76513,76515],{"class":222,"line":644},[220,76512,402],{"class":264},[220,76514,347],{"class":346},[220,76516,359],{"class":264},[212,76518,76519],{"className":409,"code":76479,"language":411,"meta":178,"style":178},[99,76520,76521,76529,76535,76543,76547],{"__ignoreMap":178},[220,76522,76523,76525,76527],{"class":222,"line":223},[220,76524,343],{"class":264},[220,76526,347],{"class":420},[220,76528,359],{"class":264},[220,76530,76531,76533],{"class":222,"line":179},[220,76532,364],{"class":264},[220,76534,76496],{"class":420},[220,76536,76537,76539,76541],{"class":222,"line":389},[220,76538,9630],{"class":226},[220,76540,353],{"class":260},[220,76542,9586],{"class":230},[220,76544,76545],{"class":222,"line":399},[220,76546,1234],{"class":264},[220,76548,76549,76551,76553],{"class":222,"line":644},[220,76550,402],{"class":264},[220,76552,347],{"class":420},[220,76554,359],{"class":264},[212,76556,76557],{"className":2844,"code":76479,"language":2846,"meta":178,"style":178},[99,76558,76559,76567,76573,76581,76585],{"__ignoreMap":178},[220,76560,76561,76563,76565],{"class":222,"line":223},[220,76562,343],{"class":264},[220,76564,347],{"class":420},[220,76566,359],{"class":264},[220,76568,76569,76571],{"class":222,"line":179},[220,76570,364],{"class":264},[220,76572,76496],{"class":420},[220,76574,76575,76577,76579],{"class":222,"line":389},[220,76576,9630],{"class":226},[220,76578,353],{"class":264},[220,76580,9586],{"class":230},[220,76582,76583],{"class":222,"line":399},[220,76584,1234],{"class":264},[220,76586,76587,76589,76591],{"class":222,"line":644},[220,76588,402],{"class":264},[220,76590,347],{"class":420},[220,76592,359],{"class":264},[212,76594,76595],{"className":468,"code":76479,"language":469,"meta":178,"style":178},[99,76596,76597,76605,76611,76619,76623],{"__ignoreMap":178},[220,76598,76599,76601,76603],{"class":222,"line":223},[220,76600,343],{"class":264},[220,76602,347],{"class":420},[220,76604,359],{"class":264},[220,76606,76607,76609],{"class":222,"line":179},[220,76608,364],{"class":264},[220,76610,76496],{"class":420},[220,76612,76613,76615,76617],{"class":222,"line":389},[220,76614,9630],{"class":226},[220,76616,353],{"class":260},[220,76618,9586],{"class":230},[220,76620,76621],{"class":222,"line":399},[220,76622,1234],{"class":264},[220,76624,76625,76627,76629],{"class":222,"line":644},[220,76626,402],{"class":264},[220,76628,347],{"class":420},[220,76630,359],{"class":264},[212,76632,76634],{"className":251,"code":76633,"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,76635,76636,76646,76650,76664,76668,76681,76685],{"__ignoreMap":178},[220,76637,76638,76640,76642,76644],{"class":222,"line":223},[220,76639,261],{"class":260},[220,76641,11507],{"class":264},[220,76643,268],{"class":260},[220,76645,4007],{"class":230},[220,76647,76648],{"class":222,"line":179},[220,76649,647],{"emptyLinePlaceholder":194},[220,76651,76652,76654,76656,76658,76660,76662],{"class":222,"line":389},[220,76653,1735],{"class":260},[220,76655,1738],{"class":420},[220,76657,1741],{"class":260},[220,76659,1744],{"class":260},[220,76661,1747],{"class":226},[220,76663,1750],{"class":264},[220,76665,76666],{"class":222,"line":399},[220,76667,1765],{"class":264},[220,76669,76670,76672,76675,76677,76679],{"class":222,"line":644},[220,76671,1770],{"class":264},[220,76673,76674],{"class":230},"'Trapezoid'",[220,76676,1776],{"class":264},[220,76678,10164],{"class":230},[220,76680,1782],{"class":264},[220,76682,76683],{"class":222,"line":650},[220,76684,1787],{"class":264},[220,76686,76687],{"class":222,"line":656},[220,76688,1792],{"class":264},[1504,76690,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":76692},[76693,76694],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftrapezoid",{"title":76457,"description":76465},"docs\u002Fcomponents\u002FTrapezoid","5Udy41Zm1SEj6f6dLi73I64sqwoDh4dmWuOKU28adPs",{"id":76701,"title":76702,"body":76703,"category":33058,"componentType":25872,"description":76710,"extension":191,"meta":76895,"navigation":194,"path":76896,"requiresChild":32525,"seo":76897,"stem":76898,"__hash__":76899},"components\u002Fdocs\u002Fcomponents\u002FTriangularGrid.md","TriangularGrid",{"type":8,"value":76704,"toc":76891},[76705,76708,76711,76713,76715,76718,76720,76889],[11,76706,76702],{"id":76707},"triangulargrid",[15,76709,76710],{},"Tiling grid of equilateral triangles with optional animated row offsets",[31906,76712],{"component":76702},[23,76714,31910],{"id":26528},[31912,76716],{":props":76717},"[{\"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,76719,31918],{"id":31917},[246,76721,76722,76751,76779,76807,76835],{":tabs":1557},[212,76723,76725],{"className":334,"code":76724,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTriangularGrid \u002F>\n\u003C\u002FShader>\n",[99,76726,76727,76735,76743],{"__ignoreMap":178},[220,76728,76729,76731,76733],{"class":222,"line":223},[220,76730,343],{"class":264},[220,76732,347],{"class":346},[220,76734,359],{"class":264},[220,76736,76737,76739,76741],{"class":222,"line":179},[220,76738,364],{"class":264},[220,76740,76702],{"class":346},[220,76742,386],{"class":264},[220,76744,76745,76747,76749],{"class":222,"line":389},[220,76746,402],{"class":264},[220,76748,347],{"class":346},[220,76750,359],{"class":264},[212,76752,76753],{"className":409,"code":76724,"language":411,"meta":178,"style":178},[99,76754,76755,76763,76771],{"__ignoreMap":178},[220,76756,76757,76759,76761],{"class":222,"line":223},[220,76758,343],{"class":264},[220,76760,347],{"class":420},[220,76762,359],{"class":264},[220,76764,76765,76767,76769],{"class":222,"line":179},[220,76766,364],{"class":264},[220,76768,76702],{"class":420},[220,76770,386],{"class":264},[220,76772,76773,76775,76777],{"class":222,"line":389},[220,76774,402],{"class":264},[220,76776,347],{"class":420},[220,76778,359],{"class":264},[212,76780,76781],{"className":2844,"code":76724,"language":2846,"meta":178,"style":178},[99,76782,76783,76791,76799],{"__ignoreMap":178},[220,76784,76785,76787,76789],{"class":222,"line":223},[220,76786,343],{"class":264},[220,76788,347],{"class":420},[220,76790,359],{"class":264},[220,76792,76793,76795,76797],{"class":222,"line":179},[220,76794,364],{"class":264},[220,76796,76702],{"class":420},[220,76798,386],{"class":264},[220,76800,76801,76803,76805],{"class":222,"line":389},[220,76802,402],{"class":264},[220,76804,347],{"class":420},[220,76806,359],{"class":264},[212,76808,76809],{"className":468,"code":76724,"language":469,"meta":178,"style":178},[99,76810,76811,76819,76827],{"__ignoreMap":178},[220,76812,76813,76815,76817],{"class":222,"line":223},[220,76814,343],{"class":264},[220,76816,347],{"class":420},[220,76818,359],{"class":264},[220,76820,76821,76823,76825],{"class":222,"line":179},[220,76822,364],{"class":264},[220,76824,76702],{"class":420},[220,76826,386],{"class":264},[220,76828,76829,76831,76833],{"class":222,"line":389},[220,76830,402],{"class":264},[220,76832,347],{"class":420},[220,76834,359],{"class":264},[212,76836,76838],{"className":251,"code":76837,"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,76839,76840,76850,76854,76868,76872,76881,76885],{"__ignoreMap":178},[220,76841,76842,76844,76846,76848],{"class":222,"line":223},[220,76843,261],{"class":260},[220,76845,11507],{"class":264},[220,76847,268],{"class":260},[220,76849,4007],{"class":230},[220,76851,76852],{"class":222,"line":179},[220,76853,647],{"emptyLinePlaceholder":194},[220,76855,76856,76858,76860,76862,76864,76866],{"class":222,"line":389},[220,76857,1735],{"class":260},[220,76859,1738],{"class":420},[220,76861,1741],{"class":260},[220,76863,1744],{"class":260},[220,76865,1747],{"class":226},[220,76867,1750],{"class":264},[220,76869,76870],{"class":222,"line":399},[220,76871,1765],{"class":264},[220,76873,76874,76876,76879],{"class":222,"line":644},[220,76875,1770],{"class":264},[220,76877,76878],{"class":230},"'TriangularGrid'",[220,76880,2465],{"class":264},[220,76882,76883],{"class":222,"line":650},[220,76884,1787],{"class":264},[220,76886,76887],{"class":222,"line":656},[220,76888,1792],{"class":264},[1504,76890,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":76892},[76893,76894],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftriangulargrid",{"title":76702,"description":76710},"docs\u002Fcomponents\u002FTriangularGrid","EtlBYN_LIU2J79H3PWONmaD3DhKD-GDWD03oI2KouGk",{"id":76901,"title":76902,"body":76903,"category":36363,"componentType":25878,"description":76910,"extension":191,"meta":77171,"navigation":194,"path":77172,"requiresChild":194,"seo":77173,"stem":77174,"__hash__":77175},"components\u002Fdocs\u002Fcomponents\u002FTritone.md","Tritone",{"type":8,"value":76904,"toc":77167},[76905,76908,76911,76913,76915,76918,76920,77165],[11,76906,76902],{"id":76907},"tritone",[15,76909,76910],{},"Map colors to three tones: shadows, midtones, highlights",[31906,76912],{"component":76902},[23,76914,31910],{"id":26528},[31912,76916],{":props":76917},"[{\"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,76919,31918],{"id":31917},[246,76921,76922,76967,77011,77055,77099],{":tabs":1557},[212,76923,76925],{"className":334,"code":76924,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTritone>\n \u003CCircle \u002F>\n \u003C\u002FTritone>\n\u003C\u002FShader>\n",[99,76926,76927,76935,76943,76951,76959],{"__ignoreMap":178},[220,76928,76929,76931,76933],{"class":222,"line":223},[220,76930,343],{"class":264},[220,76932,347],{"class":346},[220,76934,359],{"class":264},[220,76936,76937,76939,76941],{"class":222,"line":179},[220,76938,364],{"class":264},[220,76940,76902],{"class":346},[220,76942,359],{"class":264},[220,76944,76945,76947,76949],{"class":222,"line":389},[220,76946,2550],{"class":264},[220,76948,2553],{"class":346},[220,76950,386],{"class":264},[220,76952,76953,76955,76957],{"class":222,"line":399},[220,76954,2567],{"class":264},[220,76956,76902],{"class":346},[220,76958,359],{"class":264},[220,76960,76961,76963,76965],{"class":222,"line":644},[220,76962,402],{"class":264},[220,76964,347],{"class":346},[220,76966,359],{"class":264},[212,76968,76969],{"className":409,"code":76924,"language":411,"meta":178,"style":178},[99,76970,76971,76979,76987,76995,77003],{"__ignoreMap":178},[220,76972,76973,76975,76977],{"class":222,"line":223},[220,76974,343],{"class":264},[220,76976,347],{"class":420},[220,76978,359],{"class":264},[220,76980,76981,76983,76985],{"class":222,"line":179},[220,76982,364],{"class":264},[220,76984,76902],{"class":420},[220,76986,359],{"class":264},[220,76988,76989,76991,76993],{"class":222,"line":389},[220,76990,2550],{"class":264},[220,76992,2553],{"class":420},[220,76994,386],{"class":264},[220,76996,76997,76999,77001],{"class":222,"line":399},[220,76998,2567],{"class":264},[220,77000,76902],{"class":420},[220,77002,359],{"class":264},[220,77004,77005,77007,77009],{"class":222,"line":644},[220,77006,402],{"class":264},[220,77008,347],{"class":420},[220,77010,359],{"class":264},[212,77012,77013],{"className":2844,"code":76924,"language":2846,"meta":178,"style":178},[99,77014,77015,77023,77031,77039,77047],{"__ignoreMap":178},[220,77016,77017,77019,77021],{"class":222,"line":223},[220,77018,343],{"class":264},[220,77020,347],{"class":420},[220,77022,359],{"class":264},[220,77024,77025,77027,77029],{"class":222,"line":179},[220,77026,364],{"class":264},[220,77028,76902],{"class":420},[220,77030,359],{"class":264},[220,77032,77033,77035,77037],{"class":222,"line":389},[220,77034,2550],{"class":264},[220,77036,2553],{"class":420},[220,77038,386],{"class":264},[220,77040,77041,77043,77045],{"class":222,"line":399},[220,77042,2567],{"class":264},[220,77044,76902],{"class":420},[220,77046,359],{"class":264},[220,77048,77049,77051,77053],{"class":222,"line":644},[220,77050,402],{"class":264},[220,77052,347],{"class":420},[220,77054,359],{"class":264},[212,77056,77057],{"className":468,"code":76924,"language":469,"meta":178,"style":178},[99,77058,77059,77067,77075,77083,77091],{"__ignoreMap":178},[220,77060,77061,77063,77065],{"class":222,"line":223},[220,77062,343],{"class":264},[220,77064,347],{"class":420},[220,77066,359],{"class":264},[220,77068,77069,77071,77073],{"class":222,"line":179},[220,77070,364],{"class":264},[220,77072,76902],{"class":420},[220,77074,359],{"class":264},[220,77076,77077,77079,77081],{"class":222,"line":389},[220,77078,2550],{"class":264},[220,77080,2553],{"class":420},[220,77082,386],{"class":264},[220,77084,77085,77087,77089],{"class":222,"line":399},[220,77086,2567],{"class":264},[220,77088,76902],{"class":420},[220,77090,359],{"class":264},[220,77092,77093,77095,77097],{"class":222,"line":644},[220,77094,402],{"class":264},[220,77096,347],{"class":420},[220,77098,359],{"class":264},[212,77100,77102],{"className":251,"code":77101,"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,77103,77104,77114,77118,77132,77136,77145,77153,77157,77161],{"__ignoreMap":178},[220,77105,77106,77108,77110,77112],{"class":222,"line":223},[220,77107,261],{"class":260},[220,77109,11507],{"class":264},[220,77111,268],{"class":260},[220,77113,4007],{"class":230},[220,77115,77116],{"class":222,"line":179},[220,77117,647],{"emptyLinePlaceholder":194},[220,77119,77120,77122,77124,77126,77128,77130],{"class":222,"line":389},[220,77121,1735],{"class":260},[220,77123,1738],{"class":420},[220,77125,1741],{"class":260},[220,77127,1744],{"class":260},[220,77129,1747],{"class":226},[220,77131,1750],{"class":264},[220,77133,77134],{"class":222,"line":399},[220,77135,1765],{"class":264},[220,77137,77138,77140,77143],{"class":222,"line":644},[220,77139,1770],{"class":264},[220,77141,77142],{"class":230},"'Tritone'",[220,77144,7004],{"class":264},[220,77146,77147,77149,77151],{"class":222,"line":650},[220,77148,7009],{"class":264},[220,77150,3206],{"class":230},[220,77152,2465],{"class":264},[220,77154,77155],{"class":222,"line":656},[220,77156,7026],{"class":264},[220,77158,77159],{"class":222,"line":673},[220,77160,1787],{"class":264},[220,77162,77163],{"class":222,"line":682},[220,77164,1792],{"class":264},[1504,77166,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":77168},[77169,77170],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftritone",{"title":76902,"description":76910},"docs\u002Fcomponents\u002FTritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":77177,"title":77178,"body":77179,"category":33058,"componentType":25872,"description":77186,"extension":191,"meta":77371,"navigation":194,"path":77372,"requiresChild":32525,"seo":77373,"stem":77374,"__hash__":77375},"components\u002Fdocs\u002Fcomponents\u002FTruchet.md","Truchet",{"type":8,"value":77180,"toc":77367},[77181,77184,77187,77189,77191,77194,77196,77365],[11,77182,77178],{"id":77183},"truchet",[15,77185,77186],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[31906,77188],{"component":77178},[23,77190,31910],{"id":26528},[31912,77192],{":props":77193},"[{\"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,77195,31918],{"id":31917},[246,77197,77198,77227,77255,77283,77311],{":tabs":1557},[212,77199,77201],{"className":334,"code":77200,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTruchet \u002F>\n\u003C\u002FShader>\n",[99,77202,77203,77211,77219],{"__ignoreMap":178},[220,77204,77205,77207,77209],{"class":222,"line":223},[220,77206,343],{"class":264},[220,77208,347],{"class":346},[220,77210,359],{"class":264},[220,77212,77213,77215,77217],{"class":222,"line":179},[220,77214,364],{"class":264},[220,77216,77178],{"class":346},[220,77218,386],{"class":264},[220,77220,77221,77223,77225],{"class":222,"line":389},[220,77222,402],{"class":264},[220,77224,347],{"class":346},[220,77226,359],{"class":264},[212,77228,77229],{"className":409,"code":77200,"language":411,"meta":178,"style":178},[99,77230,77231,77239,77247],{"__ignoreMap":178},[220,77232,77233,77235,77237],{"class":222,"line":223},[220,77234,343],{"class":264},[220,77236,347],{"class":420},[220,77238,359],{"class":264},[220,77240,77241,77243,77245],{"class":222,"line":179},[220,77242,364],{"class":264},[220,77244,77178],{"class":420},[220,77246,386],{"class":264},[220,77248,77249,77251,77253],{"class":222,"line":389},[220,77250,402],{"class":264},[220,77252,347],{"class":420},[220,77254,359],{"class":264},[212,77256,77257],{"className":2844,"code":77200,"language":2846,"meta":178,"style":178},[99,77258,77259,77267,77275],{"__ignoreMap":178},[220,77260,77261,77263,77265],{"class":222,"line":223},[220,77262,343],{"class":264},[220,77264,347],{"class":420},[220,77266,359],{"class":264},[220,77268,77269,77271,77273],{"class":222,"line":179},[220,77270,364],{"class":264},[220,77272,77178],{"class":420},[220,77274,386],{"class":264},[220,77276,77277,77279,77281],{"class":222,"line":389},[220,77278,402],{"class":264},[220,77280,347],{"class":420},[220,77282,359],{"class":264},[212,77284,77285],{"className":468,"code":77200,"language":469,"meta":178,"style":178},[99,77286,77287,77295,77303],{"__ignoreMap":178},[220,77288,77289,77291,77293],{"class":222,"line":223},[220,77290,343],{"class":264},[220,77292,347],{"class":420},[220,77294,359],{"class":264},[220,77296,77297,77299,77301],{"class":222,"line":179},[220,77298,364],{"class":264},[220,77300,77178],{"class":420},[220,77302,386],{"class":264},[220,77304,77305,77307,77309],{"class":222,"line":389},[220,77306,402],{"class":264},[220,77308,347],{"class":420},[220,77310,359],{"class":264},[212,77312,77314],{"className":251,"code":77313,"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,77315,77316,77326,77330,77344,77348,77357,77361],{"__ignoreMap":178},[220,77317,77318,77320,77322,77324],{"class":222,"line":223},[220,77319,261],{"class":260},[220,77321,11507],{"class":264},[220,77323,268],{"class":260},[220,77325,4007],{"class":230},[220,77327,77328],{"class":222,"line":179},[220,77329,647],{"emptyLinePlaceholder":194},[220,77331,77332,77334,77336,77338,77340,77342],{"class":222,"line":389},[220,77333,1735],{"class":260},[220,77335,1738],{"class":420},[220,77337,1741],{"class":260},[220,77339,1744],{"class":260},[220,77341,1747],{"class":226},[220,77343,1750],{"class":264},[220,77345,77346],{"class":222,"line":399},[220,77347,1765],{"class":264},[220,77349,77350,77352,77355],{"class":222,"line":644},[220,77351,1770],{"class":264},[220,77353,77354],{"class":230},"'Truchet'",[220,77356,2465],{"class":264},[220,77358,77359],{"class":222,"line":650},[220,77360,1787],{"class":264},[220,77362,77363],{"class":222,"line":656},[220,77364,1792],{"class":264},[1504,77366,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":77368},[77369,77370],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftruchet",{"title":77178,"description":77186},"docs\u002Fcomponents\u002FTruchet","ctn5Bc0Hw7LB7sZLC053PlnV-Si8dx2u0k3qHGetDOQ",{"id":77377,"title":77378,"body":77379,"category":33391,"componentType":25878,"description":77386,"extension":191,"meta":77703,"navigation":194,"path":77704,"requiresChild":194,"seo":77705,"stem":77706,"__hash__":77707},"components\u002Fdocs\u002Fcomponents\u002FTwirl.md","Twirl",{"type":8,"value":77380,"toc":77699},[77381,77384,77387,77389,77391,77394,77396,77697],[11,77382,77378],{"id":77383},"twirl",[15,77385,77386],{},"Rotate and twist content around a center point",[31906,77388],{"component":77378},[23,77390,31910],{"id":26528},[31912,77392],{":props":77393},"[{\"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,77395,31918],{"id":31917},[246,77397,77398,77454,77513,77569,77627],{":tabs":1557},[212,77399,77401],{"className":334,"code":77400,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77402,77403,77411,77418,77426,77430,77438,77446],{"__ignoreMap":178},[220,77404,77405,77407,77409],{"class":222,"line":223},[220,77406,343],{"class":264},[220,77408,347],{"class":346},[220,77410,359],{"class":264},[220,77412,77413,77415],{"class":222,"line":179},[220,77414,364],{"class":264},[220,77416,77417],{"class":346},"Twirl\n",[220,77419,77420,77422,77424],{"class":222,"line":389},[220,77421,20366],{"class":226},[220,77423,353],{"class":264},[220,77425,36620],{"class":230},[220,77427,77428],{"class":222,"line":399},[220,77429,31954],{"class":264},[220,77431,77432,77434,77436],{"class":222,"line":644},[220,77433,2550],{"class":264},[220,77435,2553],{"class":346},[220,77437,386],{"class":264},[220,77439,77440,77442,77444],{"class":222,"line":650},[220,77441,2567],{"class":264},[220,77443,77378],{"class":346},[220,77445,359],{"class":264},[220,77447,77448,77450,77452],{"class":222,"line":656},[220,77449,402],{"class":264},[220,77451,347],{"class":346},[220,77453,359],{"class":264},[212,77455,77457],{"className":409,"code":77456,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle \u002F>\n \u003C\u002FTwirl>\n\u003C\u002FShader>\n",[99,77458,77459,77467,77473,77485,77489,77497,77505],{"__ignoreMap":178},[220,77460,77461,77463,77465],{"class":222,"line":223},[220,77462,343],{"class":264},[220,77464,347],{"class":420},[220,77466,359],{"class":264},[220,77468,77469,77471],{"class":222,"line":179},[220,77470,364],{"class":264},[220,77472,77417],{"class":420},[220,77474,77475,77477,77479,77481,77483],{"class":222,"line":389},[220,77476,20477],{"class":226},[220,77478,353],{"class":260},[220,77480,743],{"class":264},[220,77482,8672],{"class":420},[220,77484,749],{"class":264},[220,77486,77487],{"class":222,"line":399},[220,77488,31954],{"class":264},[220,77490,77491,77493,77495],{"class":222,"line":644},[220,77492,2550],{"class":264},[220,77494,2553],{"class":420},[220,77496,386],{"class":264},[220,77498,77499,77501,77503],{"class":222,"line":650},[220,77500,2567],{"class":264},[220,77502,77378],{"class":420},[220,77504,359],{"class":264},[220,77506,77507,77509,77511],{"class":222,"line":656},[220,77508,402],{"class":264},[220,77510,347],{"class":420},[220,77512,359],{"class":264},[212,77514,77515],{"className":2844,"code":77456,"language":2846,"meta":178,"style":178},[99,77516,77517,77525,77531,77541,77545,77553,77561],{"__ignoreMap":178},[220,77518,77519,77521,77523],{"class":222,"line":223},[220,77520,343],{"class":264},[220,77522,347],{"class":420},[220,77524,359],{"class":264},[220,77526,77527,77529],{"class":222,"line":179},[220,77528,364],{"class":264},[220,77530,77417],{"class":420},[220,77532,77533,77535,77537,77539],{"class":222,"line":389},[220,77534,20477],{"class":226},[220,77536,29866],{"class":264},[220,77538,8672],{"class":420},[220,77540,749],{"class":264},[220,77542,77543],{"class":222,"line":399},[220,77544,31954],{"class":264},[220,77546,77547,77549,77551],{"class":222,"line":644},[220,77548,2550],{"class":264},[220,77550,2553],{"class":420},[220,77552,386],{"class":264},[220,77554,77555,77557,77559],{"class":222,"line":650},[220,77556,2567],{"class":264},[220,77558,77378],{"class":420},[220,77560,359],{"class":264},[220,77562,77563,77565,77567],{"class":222,"line":656},[220,77564,402],{"class":264},[220,77566,347],{"class":420},[220,77568,359],{"class":264},[212,77570,77571],{"className":468,"code":77456,"language":469,"meta":178,"style":178},[99,77572,77573,77581,77587,77599,77603,77611,77619],{"__ignoreMap":178},[220,77574,77575,77577,77579],{"class":222,"line":223},[220,77576,343],{"class":264},[220,77578,347],{"class":420},[220,77580,359],{"class":264},[220,77582,77583,77585],{"class":222,"line":179},[220,77584,364],{"class":264},[220,77586,77417],{"class":420},[220,77588,77589,77591,77593,77595,77597],{"class":222,"line":389},[220,77590,20477],{"class":226},[220,77592,353],{"class":260},[220,77594,743],{"class":264},[220,77596,8672],{"class":420},[220,77598,749],{"class":264},[220,77600,77601],{"class":222,"line":399},[220,77602,31954],{"class":264},[220,77604,77605,77607,77609],{"class":222,"line":644},[220,77606,2550],{"class":264},[220,77608,2553],{"class":420},[220,77610,386],{"class":264},[220,77612,77613,77615,77617],{"class":222,"line":650},[220,77614,2567],{"class":264},[220,77616,77378],{"class":420},[220,77618,359],{"class":264},[220,77620,77621,77623,77625],{"class":222,"line":656},[220,77622,402],{"class":264},[220,77624,347],{"class":420},[220,77626,359],{"class":264},[212,77628,77630],{"className":251,"code":77629,"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,77631,77632,77642,77646,77660,77664,77677,77685,77689,77693],{"__ignoreMap":178},[220,77633,77634,77636,77638,77640],{"class":222,"line":223},[220,77635,261],{"class":260},[220,77637,11507],{"class":264},[220,77639,268],{"class":260},[220,77641,4007],{"class":230},[220,77643,77644],{"class":222,"line":179},[220,77645,647],{"emptyLinePlaceholder":194},[220,77647,77648,77650,77652,77654,77656,77658],{"class":222,"line":389},[220,77649,1735],{"class":260},[220,77651,1738],{"class":420},[220,77653,1741],{"class":260},[220,77655,1744],{"class":260},[220,77657,1747],{"class":226},[220,77659,1750],{"class":264},[220,77661,77662],{"class":222,"line":399},[220,77663,1765],{"class":264},[220,77665,77666,77668,77671,77673,77675],{"class":222,"line":644},[220,77667,1770],{"class":264},[220,77669,77670],{"class":230},"'Twirl'",[220,77672,32198],{"class":264},[220,77674,8672],{"class":420},[220,77676,7541],{"class":264},[220,77678,77679,77681,77683],{"class":222,"line":650},[220,77680,7009],{"class":264},[220,77682,3206],{"class":230},[220,77684,2465],{"class":264},[220,77686,77687],{"class":222,"line":656},[220,77688,7026],{"class":264},[220,77690,77691],{"class":222,"line":673},[220,77692,1787],{"class":264},[220,77694,77695],{"class":222,"line":682},[220,77696,1792],{"class":264},[1504,77698,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":77700},[77701,77702],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Ftwirl",{"title":77378,"description":77386},"docs\u002Fcomponents\u002FTwirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":77709,"title":77710,"body":77711,"category":32801,"componentType":25878,"description":77718,"extension":191,"meta":77979,"navigation":194,"path":77980,"requiresChild":194,"seo":77981,"stem":77982,"__hash__":77983},"components\u002Fdocs\u002Fcomponents\u002FVHS.md","VHS",{"type":8,"value":77712,"toc":77975},[77713,77716,77719,77721,77723,77726,77728,77973],[11,77714,77710],{"id":77715},"vhs",[15,77717,77718],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[31906,77720],{"component":77710},[23,77722,31910],{"id":26528},[31912,77724],{":props":77725},"[{\"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,77727,31918],{"id":31917},[246,77729,77730,77775,77819,77863,77907],{":tabs":1557},[212,77731,77733],{"className":334,"code":77732,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVHS>\n \u003CCircle \u002F>\n \u003C\u002FVHS>\n\u003C\u002FShader>\n",[99,77734,77735,77743,77751,77759,77767],{"__ignoreMap":178},[220,77736,77737,77739,77741],{"class":222,"line":223},[220,77738,343],{"class":264},[220,77740,347],{"class":346},[220,77742,359],{"class":264},[220,77744,77745,77747,77749],{"class":222,"line":179},[220,77746,364],{"class":264},[220,77748,77710],{"class":346},[220,77750,359],{"class":264},[220,77752,77753,77755,77757],{"class":222,"line":389},[220,77754,2550],{"class":264},[220,77756,2553],{"class":346},[220,77758,386],{"class":264},[220,77760,77761,77763,77765],{"class":222,"line":399},[220,77762,2567],{"class":264},[220,77764,77710],{"class":346},[220,77766,359],{"class":264},[220,77768,77769,77771,77773],{"class":222,"line":644},[220,77770,402],{"class":264},[220,77772,347],{"class":346},[220,77774,359],{"class":264},[212,77776,77777],{"className":409,"code":77732,"language":411,"meta":178,"style":178},[99,77778,77779,77787,77795,77803,77811],{"__ignoreMap":178},[220,77780,77781,77783,77785],{"class":222,"line":223},[220,77782,343],{"class":264},[220,77784,347],{"class":420},[220,77786,359],{"class":264},[220,77788,77789,77791,77793],{"class":222,"line":179},[220,77790,364],{"class":264},[220,77792,77710],{"class":420},[220,77794,359],{"class":264},[220,77796,77797,77799,77801],{"class":222,"line":389},[220,77798,2550],{"class":264},[220,77800,2553],{"class":420},[220,77802,386],{"class":264},[220,77804,77805,77807,77809],{"class":222,"line":399},[220,77806,2567],{"class":264},[220,77808,77710],{"class":420},[220,77810,359],{"class":264},[220,77812,77813,77815,77817],{"class":222,"line":644},[220,77814,402],{"class":264},[220,77816,347],{"class":420},[220,77818,359],{"class":264},[212,77820,77821],{"className":2844,"code":77732,"language":2846,"meta":178,"style":178},[99,77822,77823,77831,77839,77847,77855],{"__ignoreMap":178},[220,77824,77825,77827,77829],{"class":222,"line":223},[220,77826,343],{"class":264},[220,77828,347],{"class":420},[220,77830,359],{"class":264},[220,77832,77833,77835,77837],{"class":222,"line":179},[220,77834,364],{"class":264},[220,77836,77710],{"class":420},[220,77838,359],{"class":264},[220,77840,77841,77843,77845],{"class":222,"line":389},[220,77842,2550],{"class":264},[220,77844,2553],{"class":420},[220,77846,386],{"class":264},[220,77848,77849,77851,77853],{"class":222,"line":399},[220,77850,2567],{"class":264},[220,77852,77710],{"class":420},[220,77854,359],{"class":264},[220,77856,77857,77859,77861],{"class":222,"line":644},[220,77858,402],{"class":264},[220,77860,347],{"class":420},[220,77862,359],{"class":264},[212,77864,77865],{"className":468,"code":77732,"language":469,"meta":178,"style":178},[99,77866,77867,77875,77883,77891,77899],{"__ignoreMap":178},[220,77868,77869,77871,77873],{"class":222,"line":223},[220,77870,343],{"class":264},[220,77872,347],{"class":420},[220,77874,359],{"class":264},[220,77876,77877,77879,77881],{"class":222,"line":179},[220,77878,364],{"class":264},[220,77880,77710],{"class":420},[220,77882,359],{"class":264},[220,77884,77885,77887,77889],{"class":222,"line":389},[220,77886,2550],{"class":264},[220,77888,2553],{"class":420},[220,77890,386],{"class":264},[220,77892,77893,77895,77897],{"class":222,"line":399},[220,77894,2567],{"class":264},[220,77896,77710],{"class":420},[220,77898,359],{"class":264},[220,77900,77901,77903,77905],{"class":222,"line":644},[220,77902,402],{"class":264},[220,77904,347],{"class":420},[220,77906,359],{"class":264},[212,77908,77910],{"className":251,"code":77909,"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,77911,77912,77922,77926,77940,77944,77953,77961,77965,77969],{"__ignoreMap":178},[220,77913,77914,77916,77918,77920],{"class":222,"line":223},[220,77915,261],{"class":260},[220,77917,11507],{"class":264},[220,77919,268],{"class":260},[220,77921,4007],{"class":230},[220,77923,77924],{"class":222,"line":179},[220,77925,647],{"emptyLinePlaceholder":194},[220,77927,77928,77930,77932,77934,77936,77938],{"class":222,"line":389},[220,77929,1735],{"class":260},[220,77931,1738],{"class":420},[220,77933,1741],{"class":260},[220,77935,1744],{"class":260},[220,77937,1747],{"class":226},[220,77939,1750],{"class":264},[220,77941,77942],{"class":222,"line":399},[220,77943,1765],{"class":264},[220,77945,77946,77948,77951],{"class":222,"line":644},[220,77947,1770],{"class":264},[220,77949,77950],{"class":230},"'VHS'",[220,77952,7004],{"class":264},[220,77954,77955,77957,77959],{"class":222,"line":650},[220,77956,7009],{"class":264},[220,77958,3206],{"class":230},[220,77960,2465],{"class":264},[220,77962,77963],{"class":222,"line":656},[220,77964,7026],{"class":264},[220,77966,77967],{"class":222,"line":673},[220,77968,1787],{"class":264},[220,77970,77971],{"class":222,"line":682},[220,77972,1792],{"class":264},[1504,77974,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":77976},[77977,77978],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvhs",{"title":77710,"description":77718},"docs\u002Fcomponents\u002FVHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":77985,"title":77986,"body":77987,"category":33668,"componentType":25878,"description":77994,"extension":191,"meta":78255,"navigation":194,"path":78256,"requiresChild":194,"seo":78257,"stem":78258,"__hash__":78259},"components\u002Fdocs\u002Fcomponents\u002FVenetianBlinds.md","VenetianBlinds",{"type":8,"value":77988,"toc":78251},[77989,77992,77995,77997,77999,78002,78004,78249],[11,77990,77986],{"id":77991},"venetianblinds",[15,77993,77994],{},"Wipe the content away behind a set of parallel closing strips",[31906,77996],{"component":77986},[23,77998,31910],{"id":26528},[31912,78000],{":props":78001},"[{\"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,78003,31918],{"id":31917},[246,78005,78006,78051,78095,78139,78183],{":tabs":1557},[212,78007,78009],{"className":334,"code":78008,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVenetianBlinds>\n \u003CCircle \u002F>\n \u003C\u002FVenetianBlinds>\n\u003C\u002FShader>\n",[99,78010,78011,78019,78027,78035,78043],{"__ignoreMap":178},[220,78012,78013,78015,78017],{"class":222,"line":223},[220,78014,343],{"class":264},[220,78016,347],{"class":346},[220,78018,359],{"class":264},[220,78020,78021,78023,78025],{"class":222,"line":179},[220,78022,364],{"class":264},[220,78024,77986],{"class":346},[220,78026,359],{"class":264},[220,78028,78029,78031,78033],{"class":222,"line":389},[220,78030,2550],{"class":264},[220,78032,2553],{"class":346},[220,78034,386],{"class":264},[220,78036,78037,78039,78041],{"class":222,"line":399},[220,78038,2567],{"class":264},[220,78040,77986],{"class":346},[220,78042,359],{"class":264},[220,78044,78045,78047,78049],{"class":222,"line":644},[220,78046,402],{"class":264},[220,78048,347],{"class":346},[220,78050,359],{"class":264},[212,78052,78053],{"className":409,"code":78008,"language":411,"meta":178,"style":178},[99,78054,78055,78063,78071,78079,78087],{"__ignoreMap":178},[220,78056,78057,78059,78061],{"class":222,"line":223},[220,78058,343],{"class":264},[220,78060,347],{"class":420},[220,78062,359],{"class":264},[220,78064,78065,78067,78069],{"class":222,"line":179},[220,78066,364],{"class":264},[220,78068,77986],{"class":420},[220,78070,359],{"class":264},[220,78072,78073,78075,78077],{"class":222,"line":389},[220,78074,2550],{"class":264},[220,78076,2553],{"class":420},[220,78078,386],{"class":264},[220,78080,78081,78083,78085],{"class":222,"line":399},[220,78082,2567],{"class":264},[220,78084,77986],{"class":420},[220,78086,359],{"class":264},[220,78088,78089,78091,78093],{"class":222,"line":644},[220,78090,402],{"class":264},[220,78092,347],{"class":420},[220,78094,359],{"class":264},[212,78096,78097],{"className":2844,"code":78008,"language":2846,"meta":178,"style":178},[99,78098,78099,78107,78115,78123,78131],{"__ignoreMap":178},[220,78100,78101,78103,78105],{"class":222,"line":223},[220,78102,343],{"class":264},[220,78104,347],{"class":420},[220,78106,359],{"class":264},[220,78108,78109,78111,78113],{"class":222,"line":179},[220,78110,364],{"class":264},[220,78112,77986],{"class":420},[220,78114,359],{"class":264},[220,78116,78117,78119,78121],{"class":222,"line":389},[220,78118,2550],{"class":264},[220,78120,2553],{"class":420},[220,78122,386],{"class":264},[220,78124,78125,78127,78129],{"class":222,"line":399},[220,78126,2567],{"class":264},[220,78128,77986],{"class":420},[220,78130,359],{"class":264},[220,78132,78133,78135,78137],{"class":222,"line":644},[220,78134,402],{"class":264},[220,78136,347],{"class":420},[220,78138,359],{"class":264},[212,78140,78141],{"className":468,"code":78008,"language":469,"meta":178,"style":178},[99,78142,78143,78151,78159,78167,78175],{"__ignoreMap":178},[220,78144,78145,78147,78149],{"class":222,"line":223},[220,78146,343],{"class":264},[220,78148,347],{"class":420},[220,78150,359],{"class":264},[220,78152,78153,78155,78157],{"class":222,"line":179},[220,78154,364],{"class":264},[220,78156,77986],{"class":420},[220,78158,359],{"class":264},[220,78160,78161,78163,78165],{"class":222,"line":389},[220,78162,2550],{"class":264},[220,78164,2553],{"class":420},[220,78166,386],{"class":264},[220,78168,78169,78171,78173],{"class":222,"line":399},[220,78170,2567],{"class":264},[220,78172,77986],{"class":420},[220,78174,359],{"class":264},[220,78176,78177,78179,78181],{"class":222,"line":644},[220,78178,402],{"class":264},[220,78180,347],{"class":420},[220,78182,359],{"class":264},[212,78184,78186],{"className":251,"code":78185,"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,78187,78188,78198,78202,78216,78220,78229,78237,78241,78245],{"__ignoreMap":178},[220,78189,78190,78192,78194,78196],{"class":222,"line":223},[220,78191,261],{"class":260},[220,78193,11507],{"class":264},[220,78195,268],{"class":260},[220,78197,4007],{"class":230},[220,78199,78200],{"class":222,"line":179},[220,78201,647],{"emptyLinePlaceholder":194},[220,78203,78204,78206,78208,78210,78212,78214],{"class":222,"line":389},[220,78205,1735],{"class":260},[220,78207,1738],{"class":420},[220,78209,1741],{"class":260},[220,78211,1744],{"class":260},[220,78213,1747],{"class":226},[220,78215,1750],{"class":264},[220,78217,78218],{"class":222,"line":399},[220,78219,1765],{"class":264},[220,78221,78222,78224,78227],{"class":222,"line":644},[220,78223,1770],{"class":264},[220,78225,78226],{"class":230},"'VenetianBlinds'",[220,78228,7004],{"class":264},[220,78230,78231,78233,78235],{"class":222,"line":650},[220,78232,7009],{"class":264},[220,78234,3206],{"class":230},[220,78236,2465],{"class":264},[220,78238,78239],{"class":222,"line":656},[220,78240,7026],{"class":264},[220,78242,78243],{"class":222,"line":673},[220,78244,1787],{"class":264},[220,78246,78247],{"class":222,"line":682},[220,78248,1792],{"class":264},[1504,78250,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":78252},[78253,78254],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvenetianblinds",{"title":77986,"description":77994},"docs\u002Fcomponents\u002FVenetianBlinds","8-qPMX2YWIT5WLSW0uX6dk_pMBAHnuGY__KnerJvx9c",{"id":78261,"title":78262,"body":78263,"category":15903,"componentType":25872,"description":78270,"extension":191,"meta":78547,"navigation":194,"path":78548,"requiresChild":32525,"seo":78549,"stem":78550,"__hash__":78551},"components\u002Fdocs\u002Fcomponents\u002FVesica.md","Vesica",{"type":8,"value":78264,"toc":78543},[78265,78268,78271,78273,78275,78278,78280,78541],[11,78266,78262],{"id":78267},"vesica",[15,78269,78270],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[31906,78272],{"component":78262},[23,78274,31910],{"id":26528},[31912,78276],{":props":78277},"[{\"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,78279,31918],{"id":31917},[246,78281,78282,78330,78381,78429,78479],{":tabs":1557},[212,78283,78285],{"className":334,"code":78284,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n \u002F>\n\u003C\u002FShader>\n",[99,78286,78287,78295,78302,78310,78318,78322],{"__ignoreMap":178},[220,78288,78289,78291,78293],{"class":222,"line":223},[220,78290,343],{"class":264},[220,78292,347],{"class":346},[220,78294,359],{"class":264},[220,78296,78297,78299],{"class":222,"line":179},[220,78298,364],{"class":264},[220,78300,78301],{"class":346},"Vesica\n",[220,78303,78304,78306,78308],{"class":222,"line":389},[220,78305,9630],{"class":226},[220,78307,353],{"class":264},[220,78309,9586],{"class":230},[220,78311,78312,78314,78316],{"class":222,"line":399},[220,78313,17400],{"class":226},[220,78315,353],{"class":264},[220,78317,41386],{"class":230},[220,78319,78320],{"class":222,"line":644},[220,78321,1234],{"class":264},[220,78323,78324,78326,78328],{"class":222,"line":650},[220,78325,402],{"class":264},[220,78327,347],{"class":346},[220,78329,359],{"class":264},[212,78331,78333],{"className":409,"code":78332,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n \u002F>\n\u003C\u002FShader>\n",[99,78334,78335,78343,78349,78357,78369,78373],{"__ignoreMap":178},[220,78336,78337,78339,78341],{"class":222,"line":223},[220,78338,343],{"class":264},[220,78340,347],{"class":420},[220,78342,359],{"class":264},[220,78344,78345,78347],{"class":222,"line":179},[220,78346,364],{"class":264},[220,78348,78301],{"class":420},[220,78350,78351,78353,78355],{"class":222,"line":389},[220,78352,9630],{"class":226},[220,78354,353],{"class":260},[220,78356,9586],{"class":230},[220,78358,78359,78361,78363,78365,78367],{"class":222,"line":399},[220,78360,9640],{"class":226},[220,78362,353],{"class":260},[220,78364,743],{"class":264},[220,78366,21143],{"class":420},[220,78368,749],{"class":264},[220,78370,78371],{"class":222,"line":644},[220,78372,1234],{"class":264},[220,78374,78375,78377,78379],{"class":222,"line":650},[220,78376,402],{"class":264},[220,78378,347],{"class":420},[220,78380,359],{"class":264},[212,78382,78383],{"className":2844,"code":78332,"language":2846,"meta":178,"style":178},[99,78384,78385,78393,78399,78407,78417,78421],{"__ignoreMap":178},[220,78386,78387,78389,78391],{"class":222,"line":223},[220,78388,343],{"class":264},[220,78390,347],{"class":420},[220,78392,359],{"class":264},[220,78394,78395,78397],{"class":222,"line":179},[220,78396,364],{"class":264},[220,78398,78301],{"class":420},[220,78400,78401,78403,78405],{"class":222,"line":389},[220,78402,9630],{"class":226},[220,78404,353],{"class":264},[220,78406,9586],{"class":230},[220,78408,78409,78411,78413,78415],{"class":222,"line":399},[220,78410,9640],{"class":226},[220,78412,29866],{"class":264},[220,78414,21143],{"class":420},[220,78416,749],{"class":264},[220,78418,78419],{"class":222,"line":644},[220,78420,1234],{"class":264},[220,78422,78423,78425,78427],{"class":222,"line":650},[220,78424,402],{"class":264},[220,78426,347],{"class":420},[220,78428,359],{"class":264},[212,78430,78431],{"className":468,"code":78332,"language":469,"meta":178,"style":178},[99,78432,78433,78441,78447,78455,78467,78471],{"__ignoreMap":178},[220,78434,78435,78437,78439],{"class":222,"line":223},[220,78436,343],{"class":264},[220,78438,347],{"class":420},[220,78440,359],{"class":264},[220,78442,78443,78445],{"class":222,"line":179},[220,78444,364],{"class":264},[220,78446,78301],{"class":420},[220,78448,78449,78451,78453],{"class":222,"line":389},[220,78450,9630],{"class":226},[220,78452,353],{"class":260},[220,78454,9586],{"class":230},[220,78456,78457,78459,78461,78463,78465],{"class":222,"line":399},[220,78458,9640],{"class":226},[220,78460,353],{"class":260},[220,78462,743],{"class":264},[220,78464,21143],{"class":420},[220,78466,749],{"class":264},[220,78468,78469],{"class":222,"line":644},[220,78470,1234],{"class":264},[220,78472,78473,78475,78477],{"class":222,"line":650},[220,78474,402],{"class":264},[220,78476,347],{"class":420},[220,78478,359],{"class":264},[212,78480,78482],{"className":251,"code":78481,"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,78483,78484,78494,78498,78512,78516,78533,78537],{"__ignoreMap":178},[220,78485,78486,78488,78490,78492],{"class":222,"line":223},[220,78487,261],{"class":260},[220,78489,11507],{"class":264},[220,78491,268],{"class":260},[220,78493,4007],{"class":230},[220,78495,78496],{"class":222,"line":179},[220,78497,647],{"emptyLinePlaceholder":194},[220,78499,78500,78502,78504,78506,78508,78510],{"class":222,"line":389},[220,78501,1735],{"class":260},[220,78503,1738],{"class":420},[220,78505,1741],{"class":260},[220,78507,1744],{"class":260},[220,78509,1747],{"class":226},[220,78511,1750],{"class":264},[220,78513,78514],{"class":222,"line":399},[220,78515,1765],{"class":264},[220,78517,78518,78520,78523,78525,78527,78529,78531],{"class":222,"line":644},[220,78519,1770],{"class":264},[220,78521,78522],{"class":230},"'Vesica'",[220,78524,1776],{"class":264},[220,78526,10164],{"class":230},[220,78528,6561],{"class":264},[220,78530,21143],{"class":420},[220,78532,1782],{"class":264},[220,78534,78535],{"class":222,"line":650},[220,78536,1787],{"class":264},[220,78538,78539],{"class":222,"line":656},[220,78540,1792],{"class":264},[1504,78542,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78544},[78545,78546],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvesica",{"title":78262,"description":78270},"docs\u002Fcomponents\u002FVesica","fkL2W0a5q9mIl7W55I_L_wxioLM-FXJiPWQbUBBlPmQ",{"id":78553,"title":78554,"body":78555,"category":36363,"componentType":25878,"description":78562,"extension":191,"meta":78880,"navigation":194,"path":78881,"requiresChild":194,"seo":78882,"stem":78883,"__hash__":78884},"components\u002Fdocs\u002Fcomponents\u002FVibrance.md","Vibrance",{"type":8,"value":78556,"toc":78876},[78557,78560,78563,78565,78567,78570,78572,78874],[11,78558,78554],{"id":78559},"vibrance",[15,78561,78562],{},"Selective saturation adjustment protecting skin tones",[31906,78564],{"component":78554},[23,78566,31910],{"id":26528},[31912,78568],{":props":78569},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,78571,31918],{"id":31917},[246,78573,78574,78631,78690,78746,78804],{":tabs":1557},[212,78575,78577],{"className":334,"code":78576,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78578,78579,78587,78594,78603,78607,78615,78623],{"__ignoreMap":178},[220,78580,78581,78583,78585],{"class":222,"line":223},[220,78582,343],{"class":264},[220,78584,347],{"class":346},[220,78586,359],{"class":264},[220,78588,78589,78591],{"class":222,"line":179},[220,78590,364],{"class":264},[220,78592,78593],{"class":346},"Vibrance\n",[220,78595,78596,78598,78600],{"class":222,"line":389},[220,78597,20366],{"class":226},[220,78599,353],{"class":264},[220,78601,78602],{"class":230},"\"0\"\n",[220,78604,78605],{"class":222,"line":399},[220,78606,31954],{"class":264},[220,78608,78609,78611,78613],{"class":222,"line":644},[220,78610,2550],{"class":264},[220,78612,2553],{"class":346},[220,78614,386],{"class":264},[220,78616,78617,78619,78621],{"class":222,"line":650},[220,78618,2567],{"class":264},[220,78620,78554],{"class":346},[220,78622,359],{"class":264},[220,78624,78625,78627,78629],{"class":222,"line":656},[220,78626,402],{"class":264},[220,78628,347],{"class":346},[220,78630,359],{"class":264},[212,78632,78634],{"className":409,"code":78633,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle \u002F>\n \u003C\u002FVibrance>\n\u003C\u002FShader>\n",[99,78635,78636,78644,78650,78662,78666,78674,78682],{"__ignoreMap":178},[220,78637,78638,78640,78642],{"class":222,"line":223},[220,78639,343],{"class":264},[220,78641,347],{"class":420},[220,78643,359],{"class":264},[220,78645,78646,78648],{"class":222,"line":179},[220,78647,364],{"class":264},[220,78649,78593],{"class":420},[220,78651,78652,78654,78656,78658,78660],{"class":222,"line":389},[220,78653,20477],{"class":226},[220,78655,353],{"class":260},[220,78657,743],{"class":264},[220,78659,8668],{"class":420},[220,78661,749],{"class":264},[220,78663,78664],{"class":222,"line":399},[220,78665,31954],{"class":264},[220,78667,78668,78670,78672],{"class":222,"line":644},[220,78669,2550],{"class":264},[220,78671,2553],{"class":420},[220,78673,386],{"class":264},[220,78675,78676,78678,78680],{"class":222,"line":650},[220,78677,2567],{"class":264},[220,78679,78554],{"class":420},[220,78681,359],{"class":264},[220,78683,78684,78686,78688],{"class":222,"line":656},[220,78685,402],{"class":264},[220,78687,347],{"class":420},[220,78689,359],{"class":264},[212,78691,78692],{"className":2844,"code":78633,"language":2846,"meta":178,"style":178},[99,78693,78694,78702,78708,78718,78722,78730,78738],{"__ignoreMap":178},[220,78695,78696,78698,78700],{"class":222,"line":223},[220,78697,343],{"class":264},[220,78699,347],{"class":420},[220,78701,359],{"class":264},[220,78703,78704,78706],{"class":222,"line":179},[220,78705,364],{"class":264},[220,78707,78593],{"class":420},[220,78709,78710,78712,78714,78716],{"class":222,"line":389},[220,78711,20477],{"class":226},[220,78713,29866],{"class":264},[220,78715,8668],{"class":420},[220,78717,749],{"class":264},[220,78719,78720],{"class":222,"line":399},[220,78721,31954],{"class":264},[220,78723,78724,78726,78728],{"class":222,"line":644},[220,78725,2550],{"class":264},[220,78727,2553],{"class":420},[220,78729,386],{"class":264},[220,78731,78732,78734,78736],{"class":222,"line":650},[220,78733,2567],{"class":264},[220,78735,78554],{"class":420},[220,78737,359],{"class":264},[220,78739,78740,78742,78744],{"class":222,"line":656},[220,78741,402],{"class":264},[220,78743,347],{"class":420},[220,78745,359],{"class":264},[212,78747,78748],{"className":468,"code":78633,"language":469,"meta":178,"style":178},[99,78749,78750,78758,78764,78776,78780,78788,78796],{"__ignoreMap":178},[220,78751,78752,78754,78756],{"class":222,"line":223},[220,78753,343],{"class":264},[220,78755,347],{"class":420},[220,78757,359],{"class":264},[220,78759,78760,78762],{"class":222,"line":179},[220,78761,364],{"class":264},[220,78763,78593],{"class":420},[220,78765,78766,78768,78770,78772,78774],{"class":222,"line":389},[220,78767,20477],{"class":226},[220,78769,353],{"class":260},[220,78771,743],{"class":264},[220,78773,8668],{"class":420},[220,78775,749],{"class":264},[220,78777,78778],{"class":222,"line":399},[220,78779,31954],{"class":264},[220,78781,78782,78784,78786],{"class":222,"line":644},[220,78783,2550],{"class":264},[220,78785,2553],{"class":420},[220,78787,386],{"class":264},[220,78789,78790,78792,78794],{"class":222,"line":650},[220,78791,2567],{"class":264},[220,78793,78554],{"class":420},[220,78795,359],{"class":264},[220,78797,78798,78800,78802],{"class":222,"line":656},[220,78799,402],{"class":264},[220,78801,347],{"class":420},[220,78803,359],{"class":264},[212,78805,78807],{"className":251,"code":78806,"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,78808,78809,78819,78823,78837,78841,78854,78862,78866,78870],{"__ignoreMap":178},[220,78810,78811,78813,78815,78817],{"class":222,"line":223},[220,78812,261],{"class":260},[220,78814,11507],{"class":264},[220,78816,268],{"class":260},[220,78818,4007],{"class":230},[220,78820,78821],{"class":222,"line":179},[220,78822,647],{"emptyLinePlaceholder":194},[220,78824,78825,78827,78829,78831,78833,78835],{"class":222,"line":389},[220,78826,1735],{"class":260},[220,78828,1738],{"class":420},[220,78830,1741],{"class":260},[220,78832,1744],{"class":260},[220,78834,1747],{"class":226},[220,78836,1750],{"class":264},[220,78838,78839],{"class":222,"line":399},[220,78840,1765],{"class":264},[220,78842,78843,78845,78848,78850,78852],{"class":222,"line":644},[220,78844,1770],{"class":264},[220,78846,78847],{"class":230},"'Vibrance'",[220,78849,32198],{"class":264},[220,78851,8668],{"class":420},[220,78853,7541],{"class":264},[220,78855,78856,78858,78860],{"class":222,"line":650},[220,78857,7009],{"class":264},[220,78859,3206],{"class":230},[220,78861,2465],{"class":264},[220,78863,78864],{"class":222,"line":656},[220,78865,7026],{"class":264},[220,78867,78868],{"class":222,"line":673},[220,78869,1787],{"class":264},[220,78871,78872],{"class":222,"line":682},[220,78873,1792],{"class":264},[1504,78875,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":78877},[78878,78879],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvibrance",{"title":78554,"description":78562},"docs\u002Fcomponents\u002FVibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":78886,"title":78887,"body":78888,"category":33058,"componentType":25872,"description":78895,"extension":191,"meta":79080,"navigation":194,"path":79081,"requiresChild":32525,"seo":79082,"stem":79083,"__hash__":79084},"components\u002Fdocs\u002Fcomponents\u002FVideoTexture.md","VideoTexture",{"type":8,"value":78889,"toc":79076},[78890,78893,78896,78898,78900,78903,78905,79074],[11,78891,78887],{"id":78892},"videotexture",[15,78894,78895],{},"Display a video with customizable playback and object-fit modes",[31906,78897],{"component":78887},[23,78899,31910],{"id":26528},[31912,78901],{":props":78902},"[{\"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,78904,31918],{"id":31917},[246,78906,78907,78936,78964,78992,79020],{":tabs":1557},[212,78908,78910],{"className":334,"code":78909,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVideoTexture \u002F>\n\u003C\u002FShader>\n",[99,78911,78912,78920,78928],{"__ignoreMap":178},[220,78913,78914,78916,78918],{"class":222,"line":223},[220,78915,343],{"class":264},[220,78917,347],{"class":346},[220,78919,359],{"class":264},[220,78921,78922,78924,78926],{"class":222,"line":179},[220,78923,364],{"class":264},[220,78925,78887],{"class":346},[220,78927,386],{"class":264},[220,78929,78930,78932,78934],{"class":222,"line":389},[220,78931,402],{"class":264},[220,78933,347],{"class":346},[220,78935,359],{"class":264},[212,78937,78938],{"className":409,"code":78909,"language":411,"meta":178,"style":178},[99,78939,78940,78948,78956],{"__ignoreMap":178},[220,78941,78942,78944,78946],{"class":222,"line":223},[220,78943,343],{"class":264},[220,78945,347],{"class":420},[220,78947,359],{"class":264},[220,78949,78950,78952,78954],{"class":222,"line":179},[220,78951,364],{"class":264},[220,78953,78887],{"class":420},[220,78955,386],{"class":264},[220,78957,78958,78960,78962],{"class":222,"line":389},[220,78959,402],{"class":264},[220,78961,347],{"class":420},[220,78963,359],{"class":264},[212,78965,78966],{"className":2844,"code":78909,"language":2846,"meta":178,"style":178},[99,78967,78968,78976,78984],{"__ignoreMap":178},[220,78969,78970,78972,78974],{"class":222,"line":223},[220,78971,343],{"class":264},[220,78973,347],{"class":420},[220,78975,359],{"class":264},[220,78977,78978,78980,78982],{"class":222,"line":179},[220,78979,364],{"class":264},[220,78981,78887],{"class":420},[220,78983,386],{"class":264},[220,78985,78986,78988,78990],{"class":222,"line":389},[220,78987,402],{"class":264},[220,78989,347],{"class":420},[220,78991,359],{"class":264},[212,78993,78994],{"className":468,"code":78909,"language":469,"meta":178,"style":178},[99,78995,78996,79004,79012],{"__ignoreMap":178},[220,78997,78998,79000,79002],{"class":222,"line":223},[220,78999,343],{"class":264},[220,79001,347],{"class":420},[220,79003,359],{"class":264},[220,79005,79006,79008,79010],{"class":222,"line":179},[220,79007,364],{"class":264},[220,79009,78887],{"class":420},[220,79011,386],{"class":264},[220,79013,79014,79016,79018],{"class":222,"line":389},[220,79015,402],{"class":264},[220,79017,347],{"class":420},[220,79019,359],{"class":264},[212,79021,79023],{"className":251,"code":79022,"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,79024,79025,79035,79039,79053,79057,79066,79070],{"__ignoreMap":178},[220,79026,79027,79029,79031,79033],{"class":222,"line":223},[220,79028,261],{"class":260},[220,79030,11507],{"class":264},[220,79032,268],{"class":260},[220,79034,4007],{"class":230},[220,79036,79037],{"class":222,"line":179},[220,79038,647],{"emptyLinePlaceholder":194},[220,79040,79041,79043,79045,79047,79049,79051],{"class":222,"line":389},[220,79042,1735],{"class":260},[220,79044,1738],{"class":420},[220,79046,1741],{"class":260},[220,79048,1744],{"class":260},[220,79050,1747],{"class":226},[220,79052,1750],{"class":264},[220,79054,79055],{"class":222,"line":399},[220,79056,1765],{"class":264},[220,79058,79059,79061,79064],{"class":222,"line":644},[220,79060,1770],{"class":264},[220,79062,79063],{"class":230},"'VideoTexture'",[220,79065,2465],{"class":264},[220,79067,79068],{"class":222,"line":650},[220,79069,1787],{"class":264},[220,79071,79072],{"class":222,"line":656},[220,79073,1792],{"class":264},[1504,79075,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":79077},[79078,79079],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvideotexture",{"title":78887,"description":78895},"docs\u002Fcomponents\u002FVideoTexture","zW7Lad6UXS2O55ps3Vy7TaJGROkzusJLLhI4otMCnj0",{"id":79086,"title":79087,"body":79088,"category":32801,"componentType":25878,"description":79095,"extension":191,"meta":79494,"navigation":194,"path":79495,"requiresChild":194,"seo":79496,"stem":79497,"__hash__":79498},"components\u002Fdocs\u002Fcomponents\u002FVignette.md","Vignette",{"type":8,"value":79089,"toc":79490},[79090,79093,79096,79098,79100,79103,79105,79488],[11,79091,79087],{"id":79092},"vignette",[15,79094,79095],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[31906,79097],{"component":79087},[23,79099,31910],{"id":26528},[31912,79101],{":props":79102},"[{\"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,79104,31918],{"id":31917},[246,79106,79107,79179,79258,79332,79410],{":tabs":1557},[212,79108,79110],{"className":334,"code":79109,"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,79111,79112,79120,79127,79135,79143,79151,79155,79163,79171],{"__ignoreMap":178},[220,79113,79114,79116,79118],{"class":222,"line":223},[220,79115,343],{"class":264},[220,79117,347],{"class":346},[220,79119,359],{"class":264},[220,79121,79122,79124],{"class":222,"line":179},[220,79123,364],{"class":264},[220,79125,79126],{"class":346},"Vignette\n",[220,79128,79129,79131,79133],{"class":222,"line":389},[220,79130,9630],{"class":226},[220,79132,353],{"class":264},[220,79134,19469],{"class":230},[220,79136,79137,79139,79141],{"class":222,"line":399},[220,79138,17400],{"class":226},[220,79140,353],{"class":264},[220,79142,42153],{"class":230},[220,79144,79145,79147,79149],{"class":222,"line":644},[220,79146,20366],{"class":226},[220,79148,353],{"class":264},[220,79150,36620],{"class":230},[220,79152,79153],{"class":222,"line":650},[220,79154,31954],{"class":264},[220,79156,79157,79159,79161],{"class":222,"line":656},[220,79158,2550],{"class":264},[220,79160,2553],{"class":346},[220,79162,386],{"class":264},[220,79164,79165,79167,79169],{"class":222,"line":673},[220,79166,2567],{"class":264},[220,79168,79087],{"class":346},[220,79170,359],{"class":264},[220,79172,79173,79175,79177],{"class":222,"line":682},[220,79174,402],{"class":264},[220,79176,347],{"class":346},[220,79178,359],{"class":264},[212,79180,79182],{"className":409,"code":79181,"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,79183,79184,79192,79198,79206,79218,79230,79234,79242,79250],{"__ignoreMap":178},[220,79185,79186,79188,79190],{"class":222,"line":223},[220,79187,343],{"class":264},[220,79189,347],{"class":420},[220,79191,359],{"class":264},[220,79193,79194,79196],{"class":222,"line":179},[220,79195,364],{"class":264},[220,79197,79126],{"class":420},[220,79199,79200,79202,79204],{"class":222,"line":389},[220,79201,9630],{"class":226},[220,79203,353],{"class":260},[220,79205,19469],{"class":230},[220,79207,79208,79210,79212,79214,79216],{"class":222,"line":399},[220,79209,9640],{"class":226},[220,79211,353],{"class":260},[220,79213,743],{"class":264},[220,79215,7749],{"class":420},[220,79217,749],{"class":264},[220,79219,79220,79222,79224,79226,79228],{"class":222,"line":644},[220,79221,20477],{"class":226},[220,79223,353],{"class":260},[220,79225,743],{"class":264},[220,79227,8672],{"class":420},[220,79229,749],{"class":264},[220,79231,79232],{"class":222,"line":650},[220,79233,31954],{"class":264},[220,79235,79236,79238,79240],{"class":222,"line":656},[220,79237,2550],{"class":264},[220,79239,2553],{"class":420},[220,79241,386],{"class":264},[220,79243,79244,79246,79248],{"class":222,"line":673},[220,79245,2567],{"class":264},[220,79247,79087],{"class":420},[220,79249,359],{"class":264},[220,79251,79252,79254,79256],{"class":222,"line":682},[220,79253,402],{"class":264},[220,79255,347],{"class":420},[220,79257,359],{"class":264},[212,79259,79260],{"className":2844,"code":79181,"language":2846,"meta":178,"style":178},[99,79261,79262,79270,79276,79284,79294,79304,79308,79316,79324],{"__ignoreMap":178},[220,79263,79264,79266,79268],{"class":222,"line":223},[220,79265,343],{"class":264},[220,79267,347],{"class":420},[220,79269,359],{"class":264},[220,79271,79272,79274],{"class":222,"line":179},[220,79273,364],{"class":264},[220,79275,79126],{"class":420},[220,79277,79278,79280,79282],{"class":222,"line":389},[220,79279,9630],{"class":226},[220,79281,353],{"class":264},[220,79283,19469],{"class":230},[220,79285,79286,79288,79290,79292],{"class":222,"line":399},[220,79287,9640],{"class":226},[220,79289,29866],{"class":264},[220,79291,7749],{"class":420},[220,79293,749],{"class":264},[220,79295,79296,79298,79300,79302],{"class":222,"line":644},[220,79297,20477],{"class":226},[220,79299,29866],{"class":264},[220,79301,8672],{"class":420},[220,79303,749],{"class":264},[220,79305,79306],{"class":222,"line":650},[220,79307,31954],{"class":264},[220,79309,79310,79312,79314],{"class":222,"line":656},[220,79311,2550],{"class":264},[220,79313,2553],{"class":420},[220,79315,386],{"class":264},[220,79317,79318,79320,79322],{"class":222,"line":673},[220,79319,2567],{"class":264},[220,79321,79087],{"class":420},[220,79323,359],{"class":264},[220,79325,79326,79328,79330],{"class":222,"line":682},[220,79327,402],{"class":264},[220,79329,347],{"class":420},[220,79331,359],{"class":264},[212,79333,79334],{"className":468,"code":79181,"language":469,"meta":178,"style":178},[99,79335,79336,79344,79350,79358,79370,79382,79386,79394,79402],{"__ignoreMap":178},[220,79337,79338,79340,79342],{"class":222,"line":223},[220,79339,343],{"class":264},[220,79341,347],{"class":420},[220,79343,359],{"class":264},[220,79345,79346,79348],{"class":222,"line":179},[220,79347,364],{"class":264},[220,79349,79126],{"class":420},[220,79351,79352,79354,79356],{"class":222,"line":389},[220,79353,9630],{"class":226},[220,79355,353],{"class":260},[220,79357,19469],{"class":230},[220,79359,79360,79362,79364,79366,79368],{"class":222,"line":399},[220,79361,9640],{"class":226},[220,79363,353],{"class":260},[220,79365,743],{"class":264},[220,79367,7749],{"class":420},[220,79369,749],{"class":264},[220,79371,79372,79374,79376,79378,79380],{"class":222,"line":644},[220,79373,20477],{"class":226},[220,79375,353],{"class":260},[220,79377,743],{"class":264},[220,79379,8672],{"class":420},[220,79381,749],{"class":264},[220,79383,79384],{"class":222,"line":650},[220,79385,31954],{"class":264},[220,79387,79388,79390,79392],{"class":222,"line":656},[220,79389,2550],{"class":264},[220,79391,2553],{"class":420},[220,79393,386],{"class":264},[220,79395,79396,79398,79400],{"class":222,"line":673},[220,79397,2567],{"class":264},[220,79399,79087],{"class":420},[220,79401,359],{"class":264},[220,79403,79404,79406,79408],{"class":222,"line":682},[220,79405,402],{"class":264},[220,79407,347],{"class":420},[220,79409,359],{"class":264},[212,79411,79413],{"className":251,"code":79412,"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,79414,79415,79425,79429,79443,79447,79468,79476,79480,79484],{"__ignoreMap":178},[220,79416,79417,79419,79421,79423],{"class":222,"line":223},[220,79418,261],{"class":260},[220,79420,11507],{"class":264},[220,79422,268],{"class":260},[220,79424,4007],{"class":230},[220,79426,79427],{"class":222,"line":179},[220,79428,647],{"emptyLinePlaceholder":194},[220,79430,79431,79433,79435,79437,79439,79441],{"class":222,"line":389},[220,79432,1735],{"class":260},[220,79434,1738],{"class":420},[220,79436,1741],{"class":260},[220,79438,1744],{"class":260},[220,79440,1747],{"class":226},[220,79442,1750],{"class":264},[220,79444,79445],{"class":222,"line":399},[220,79446,1765],{"class":264},[220,79448,79449,79451,79454,79456,79458,79460,79462,79464,79466],{"class":222,"line":644},[220,79450,1770],{"class":264},[220,79452,79453],{"class":230},"'Vignette'",[220,79455,1776],{"class":264},[220,79457,20029],{"class":230},[220,79459,6561],{"class":264},[220,79461,7749],{"class":420},[220,79463,44998],{"class":264},[220,79465,8672],{"class":420},[220,79467,7541],{"class":264},[220,79469,79470,79472,79474],{"class":222,"line":650},[220,79471,7009],{"class":264},[220,79473,3206],{"class":230},[220,79475,2465],{"class":264},[220,79477,79478],{"class":222,"line":656},[220,79479,7026],{"class":264},[220,79481,79482],{"class":222,"line":673},[220,79483,1787],{"class":264},[220,79485,79486],{"class":222,"line":682},[220,79487,1792],{"class":264},[1504,79489,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":79491},[79492,79493],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvignette",{"title":79087,"description":79095},"docs\u002Fcomponents\u002FVignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":79500,"title":79501,"body":79502,"category":33058,"componentType":25872,"description":79509,"extension":191,"meta":79694,"navigation":194,"path":79695,"requiresChild":32525,"seo":79696,"stem":79697,"__hash__":79698},"components\u002Fdocs\u002Fcomponents\u002FVoronoi.md","Voronoi",{"type":8,"value":79503,"toc":79690},[79504,79507,79510,79512,79514,79517,79519,79688],[11,79505,79501],{"id":79506},"voronoi",[15,79508,79509],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[31906,79511],{"component":79501},[23,79513,31910],{"id":26528},[31912,79515],{":props":79516},"[{\"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,79518,31918],{"id":31917},[246,79520,79521,79550,79578,79606,79634],{":tabs":1557},[212,79522,79524],{"className":334,"code":79523,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CVoronoi \u002F>\n\u003C\u002FShader>\n",[99,79525,79526,79534,79542],{"__ignoreMap":178},[220,79527,79528,79530,79532],{"class":222,"line":223},[220,79529,343],{"class":264},[220,79531,347],{"class":346},[220,79533,359],{"class":264},[220,79535,79536,79538,79540],{"class":222,"line":179},[220,79537,364],{"class":264},[220,79539,79501],{"class":346},[220,79541,386],{"class":264},[220,79543,79544,79546,79548],{"class":222,"line":389},[220,79545,402],{"class":264},[220,79547,347],{"class":346},[220,79549,359],{"class":264},[212,79551,79552],{"className":409,"code":79523,"language":411,"meta":178,"style":178},[99,79553,79554,79562,79570],{"__ignoreMap":178},[220,79555,79556,79558,79560],{"class":222,"line":223},[220,79557,343],{"class":264},[220,79559,347],{"class":420},[220,79561,359],{"class":264},[220,79563,79564,79566,79568],{"class":222,"line":179},[220,79565,364],{"class":264},[220,79567,79501],{"class":420},[220,79569,386],{"class":264},[220,79571,79572,79574,79576],{"class":222,"line":389},[220,79573,402],{"class":264},[220,79575,347],{"class":420},[220,79577,359],{"class":264},[212,79579,79580],{"className":2844,"code":79523,"language":2846,"meta":178,"style":178},[99,79581,79582,79590,79598],{"__ignoreMap":178},[220,79583,79584,79586,79588],{"class":222,"line":223},[220,79585,343],{"class":264},[220,79587,347],{"class":420},[220,79589,359],{"class":264},[220,79591,79592,79594,79596],{"class":222,"line":179},[220,79593,364],{"class":264},[220,79595,79501],{"class":420},[220,79597,386],{"class":264},[220,79599,79600,79602,79604],{"class":222,"line":389},[220,79601,402],{"class":264},[220,79603,347],{"class":420},[220,79605,359],{"class":264},[212,79607,79608],{"className":468,"code":79523,"language":469,"meta":178,"style":178},[99,79609,79610,79618,79626],{"__ignoreMap":178},[220,79611,79612,79614,79616],{"class":222,"line":223},[220,79613,343],{"class":264},[220,79615,347],{"class":420},[220,79617,359],{"class":264},[220,79619,79620,79622,79624],{"class":222,"line":179},[220,79621,364],{"class":264},[220,79623,79501],{"class":420},[220,79625,386],{"class":264},[220,79627,79628,79630,79632],{"class":222,"line":389},[220,79629,402],{"class":264},[220,79631,347],{"class":420},[220,79633,359],{"class":264},[212,79635,79637],{"className":251,"code":79636,"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,79638,79639,79649,79653,79667,79671,79680,79684],{"__ignoreMap":178},[220,79640,79641,79643,79645,79647],{"class":222,"line":223},[220,79642,261],{"class":260},[220,79644,11507],{"class":264},[220,79646,268],{"class":260},[220,79648,4007],{"class":230},[220,79650,79651],{"class":222,"line":179},[220,79652,647],{"emptyLinePlaceholder":194},[220,79654,79655,79657,79659,79661,79663,79665],{"class":222,"line":389},[220,79656,1735],{"class":260},[220,79658,1738],{"class":420},[220,79660,1741],{"class":260},[220,79662,1744],{"class":260},[220,79664,1747],{"class":226},[220,79666,1750],{"class":264},[220,79668,79669],{"class":222,"line":399},[220,79670,1765],{"class":264},[220,79672,79673,79675,79678],{"class":222,"line":644},[220,79674,1770],{"class":264},[220,79676,79677],{"class":230},"'Voronoi'",[220,79679,2465],{"class":264},[220,79681,79682],{"class":222,"line":650},[220,79683,1787],{"class":264},[220,79685,79686],{"class":222,"line":656},[220,79687,1792],{"class":264},[1504,79689,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":79691},[79692,79693],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fvoronoi",{"title":79501,"description":79509},"docs\u002Fcomponents\u002FVoronoi","mZbN2-i8hQP9F579KiI5HfBWpsf8a9qW9xOM9-jk_-w",{"id":79700,"title":79701,"body":79702,"category":36564,"componentType":25872,"description":79709,"extension":191,"meta":79894,"navigation":194,"path":79895,"requiresChild":32525,"seo":79896,"stem":79897,"__hash__":79898},"components\u002Fdocs\u002Fcomponents\u002FWater.md","Water",{"type":8,"value":79703,"toc":79890},[79704,79707,79710,79712,79714,79717,79719,79888],[11,79705,79701],{"id":79706},"water",[15,79708,79709],{},"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",[31906,79711],{"component":79701},[23,79713,31910],{"id":26528},[31912,79715],{":props":79716},"[{\"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,79718,31918],{"id":31917},[246,79720,79721,79750,79778,79806,79834],{":tabs":1557},[212,79722,79724],{"className":334,"code":79723,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWater \u002F>\n\u003C\u002FShader>\n",[99,79725,79726,79734,79742],{"__ignoreMap":178},[220,79727,79728,79730,79732],{"class":222,"line":223},[220,79729,343],{"class":264},[220,79731,347],{"class":346},[220,79733,359],{"class":264},[220,79735,79736,79738,79740],{"class":222,"line":179},[220,79737,364],{"class":264},[220,79739,79701],{"class":346},[220,79741,386],{"class":264},[220,79743,79744,79746,79748],{"class":222,"line":389},[220,79745,402],{"class":264},[220,79747,347],{"class":346},[220,79749,359],{"class":264},[212,79751,79752],{"className":409,"code":79723,"language":411,"meta":178,"style":178},[99,79753,79754,79762,79770],{"__ignoreMap":178},[220,79755,79756,79758,79760],{"class":222,"line":223},[220,79757,343],{"class":264},[220,79759,347],{"class":420},[220,79761,359],{"class":264},[220,79763,79764,79766,79768],{"class":222,"line":179},[220,79765,364],{"class":264},[220,79767,79701],{"class":420},[220,79769,386],{"class":264},[220,79771,79772,79774,79776],{"class":222,"line":389},[220,79773,402],{"class":264},[220,79775,347],{"class":420},[220,79777,359],{"class":264},[212,79779,79780],{"className":2844,"code":79723,"language":2846,"meta":178,"style":178},[99,79781,79782,79790,79798],{"__ignoreMap":178},[220,79783,79784,79786,79788],{"class":222,"line":223},[220,79785,343],{"class":264},[220,79787,347],{"class":420},[220,79789,359],{"class":264},[220,79791,79792,79794,79796],{"class":222,"line":179},[220,79793,364],{"class":264},[220,79795,79701],{"class":420},[220,79797,386],{"class":264},[220,79799,79800,79802,79804],{"class":222,"line":389},[220,79801,402],{"class":264},[220,79803,347],{"class":420},[220,79805,359],{"class":264},[212,79807,79808],{"className":468,"code":79723,"language":469,"meta":178,"style":178},[99,79809,79810,79818,79826],{"__ignoreMap":178},[220,79811,79812,79814,79816],{"class":222,"line":223},[220,79813,343],{"class":264},[220,79815,347],{"class":420},[220,79817,359],{"class":264},[220,79819,79820,79822,79824],{"class":222,"line":179},[220,79821,364],{"class":264},[220,79823,79701],{"class":420},[220,79825,386],{"class":264},[220,79827,79828,79830,79832],{"class":222,"line":389},[220,79829,402],{"class":264},[220,79831,347],{"class":420},[220,79833,359],{"class":264},[212,79835,79837],{"className":251,"code":79836,"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,79838,79839,79849,79853,79867,79871,79880,79884],{"__ignoreMap":178},[220,79840,79841,79843,79845,79847],{"class":222,"line":223},[220,79842,261],{"class":260},[220,79844,11507],{"class":264},[220,79846,268],{"class":260},[220,79848,4007],{"class":230},[220,79850,79851],{"class":222,"line":179},[220,79852,647],{"emptyLinePlaceholder":194},[220,79854,79855,79857,79859,79861,79863,79865],{"class":222,"line":389},[220,79856,1735],{"class":260},[220,79858,1738],{"class":420},[220,79860,1741],{"class":260},[220,79862,1744],{"class":260},[220,79864,1747],{"class":226},[220,79866,1750],{"class":264},[220,79868,79869],{"class":222,"line":399},[220,79870,1765],{"class":264},[220,79872,79873,79875,79878],{"class":222,"line":644},[220,79874,1770],{"class":264},[220,79876,79877],{"class":230},"'Water'",[220,79879,2465],{"class":264},[220,79881,79882],{"class":222,"line":650},[220,79883,1787],{"class":264},[220,79885,79886],{"class":222,"line":656},[220,79887,1792],{"class":264},[1504,79889,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":79891},[79892,79893],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwater",{"title":79701,"description":79709},"docs\u002Fcomponents\u002FWater","1DlFM5RDMqcOq2q9BYAFFlU_zaWhPJNXXz4cYkU4YzE",{"id":79900,"title":79901,"body":79902,"category":32801,"componentType":25878,"description":79909,"extension":191,"meta":80226,"navigation":194,"path":80227,"requiresChild":194,"seo":80228,"stem":80229,"__hash__":80230},"components\u002Fdocs\u002Fcomponents\u002FWatercolor.md","Watercolor",{"type":8,"value":79903,"toc":80222},[79904,79907,79910,79912,79914,79917,79919,80220],[11,79905,79901],{"id":79906},"watercolor",[15,79908,79909],{},"Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding",[31906,79911],{"component":79901},[23,79913,31910],{"id":26528},[31912,79915],{":props":79916},"[{\"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,79918,31918],{"id":31917},[246,79920,79921,79977,80036,80092,80150],{":tabs":1557},[212,79922,79924],{"className":334,"code":79923,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n :radius=\"3\"\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79925,79926,79934,79941,79949,79953,79961,79969],{"__ignoreMap":178},[220,79927,79928,79930,79932],{"class":222,"line":223},[220,79929,343],{"class":264},[220,79931,347],{"class":346},[220,79933,359],{"class":264},[220,79935,79936,79938],{"class":222,"line":179},[220,79937,364],{"class":264},[220,79939,79940],{"class":346},"Watercolor\n",[220,79942,79943,79945,79947],{"class":222,"line":389},[220,79944,17400],{"class":226},[220,79946,353],{"class":264},[220,79948,38664],{"class":230},[220,79950,79951],{"class":222,"line":399},[220,79952,31954],{"class":264},[220,79954,79955,79957,79959],{"class":222,"line":644},[220,79956,2550],{"class":264},[220,79958,2553],{"class":346},[220,79960,386],{"class":264},[220,79962,79963,79965,79967],{"class":222,"line":650},[220,79964,2567],{"class":264},[220,79966,79901],{"class":346},[220,79968,359],{"class":264},[220,79970,79971,79973,79975],{"class":222,"line":656},[220,79972,402],{"class":264},[220,79974,347],{"class":346},[220,79976,359],{"class":264},[212,79978,79980],{"className":409,"code":79979,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CWatercolor\n radius={3}\n >\n \u003CCircle \u002F>\n \u003C\u002FWatercolor>\n\u003C\u002FShader>\n",[99,79981,79982,79990,79996,80008,80012,80020,80028],{"__ignoreMap":178},[220,79983,79984,79986,79988],{"class":222,"line":223},[220,79985,343],{"class":264},[220,79987,347],{"class":420},[220,79989,359],{"class":264},[220,79991,79992,79994],{"class":222,"line":179},[220,79993,364],{"class":264},[220,79995,79940],{"class":420},[220,79997,79998,80000,80002,80004,80006],{"class":222,"line":389},[220,79999,9640],{"class":226},[220,80001,353],{"class":260},[220,80003,743],{"class":264},[220,80005,38718],{"class":420},[220,80007,749],{"class":264},[220,80009,80010],{"class":222,"line":399},[220,80011,31954],{"class":264},[220,80013,80014,80016,80018],{"class":222,"line":644},[220,80015,2550],{"class":264},[220,80017,2553],{"class":420},[220,80019,386],{"class":264},[220,80021,80022,80024,80026],{"class":222,"line":650},[220,80023,2567],{"class":264},[220,80025,79901],{"class":420},[220,80027,359],{"class":264},[220,80029,80030,80032,80034],{"class":222,"line":656},[220,80031,402],{"class":264},[220,80033,347],{"class":420},[220,80035,359],{"class":264},[212,80037,80038],{"className":2844,"code":79979,"language":2846,"meta":178,"style":178},[99,80039,80040,80048,80054,80064,80068,80076,80084],{"__ignoreMap":178},[220,80041,80042,80044,80046],{"class":222,"line":223},[220,80043,343],{"class":264},[220,80045,347],{"class":420},[220,80047,359],{"class":264},[220,80049,80050,80052],{"class":222,"line":179},[220,80051,364],{"class":264},[220,80053,79940],{"class":420},[220,80055,80056,80058,80060,80062],{"class":222,"line":389},[220,80057,9640],{"class":226},[220,80059,29866],{"class":264},[220,80061,38718],{"class":420},[220,80063,749],{"class":264},[220,80065,80066],{"class":222,"line":399},[220,80067,31954],{"class":264},[220,80069,80070,80072,80074],{"class":222,"line":644},[220,80071,2550],{"class":264},[220,80073,2553],{"class":420},[220,80075,386],{"class":264},[220,80077,80078,80080,80082],{"class":222,"line":650},[220,80079,2567],{"class":264},[220,80081,79901],{"class":420},[220,80083,359],{"class":264},[220,80085,80086,80088,80090],{"class":222,"line":656},[220,80087,402],{"class":264},[220,80089,347],{"class":420},[220,80091,359],{"class":264},[212,80093,80094],{"className":468,"code":79979,"language":469,"meta":178,"style":178},[99,80095,80096,80104,80110,80122,80126,80134,80142],{"__ignoreMap":178},[220,80097,80098,80100,80102],{"class":222,"line":223},[220,80099,343],{"class":264},[220,80101,347],{"class":420},[220,80103,359],{"class":264},[220,80105,80106,80108],{"class":222,"line":179},[220,80107,364],{"class":264},[220,80109,79940],{"class":420},[220,80111,80112,80114,80116,80118,80120],{"class":222,"line":389},[220,80113,9640],{"class":226},[220,80115,353],{"class":260},[220,80117,743],{"class":264},[220,80119,38718],{"class":420},[220,80121,749],{"class":264},[220,80123,80124],{"class":222,"line":399},[220,80125,31954],{"class":264},[220,80127,80128,80130,80132],{"class":222,"line":644},[220,80129,2550],{"class":264},[220,80131,2553],{"class":420},[220,80133,386],{"class":264},[220,80135,80136,80138,80140],{"class":222,"line":650},[220,80137,2567],{"class":264},[220,80139,79901],{"class":420},[220,80141,359],{"class":264},[220,80143,80144,80146,80148],{"class":222,"line":656},[220,80145,402],{"class":264},[220,80147,347],{"class":420},[220,80149,359],{"class":264},[212,80151,80153],{"className":251,"code":80152,"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,80154,80155,80165,80169,80183,80187,80200,80208,80212,80216],{"__ignoreMap":178},[220,80156,80157,80159,80161,80163],{"class":222,"line":223},[220,80158,261],{"class":260},[220,80160,11507],{"class":264},[220,80162,268],{"class":260},[220,80164,4007],{"class":230},[220,80166,80167],{"class":222,"line":179},[220,80168,647],{"emptyLinePlaceholder":194},[220,80170,80171,80173,80175,80177,80179,80181],{"class":222,"line":389},[220,80172,1735],{"class":260},[220,80174,1738],{"class":420},[220,80176,1741],{"class":260},[220,80178,1744],{"class":260},[220,80180,1747],{"class":226},[220,80182,1750],{"class":264},[220,80184,80185],{"class":222,"line":399},[220,80186,1765],{"class":264},[220,80188,80189,80191,80194,80196,80198],{"class":222,"line":644},[220,80190,1770],{"class":264},[220,80192,80193],{"class":230},"'Watercolor'",[220,80195,7536],{"class":264},[220,80197,38718],{"class":420},[220,80199,7541],{"class":264},[220,80201,80202,80204,80206],{"class":222,"line":650},[220,80203,7009],{"class":264},[220,80205,3206],{"class":230},[220,80207,2465],{"class":264},[220,80209,80210],{"class":222,"line":656},[220,80211,7026],{"class":264},[220,80213,80214],{"class":222,"line":673},[220,80215,1787],{"class":264},[220,80217,80218],{"class":222,"line":682},[220,80219,1792],{"class":264},[1504,80221,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":80223},[80224,80225],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwatercolor",{"title":79901,"description":79909},"docs\u002Fcomponents\u002FWatercolor","_3PK69d3hD-yvatsETIvlcf9qZBzY2PJewxPiHOOA6U",{"id":80232,"title":80233,"body":80234,"category":33391,"componentType":25878,"description":80241,"extension":191,"meta":80502,"navigation":194,"path":80503,"requiresChild":194,"seo":80504,"stem":80505,"__hash__":80506},"components\u002Fdocs\u002Fcomponents\u002FWaveDistortion.md","WaveDistortion",{"type":8,"value":80235,"toc":80498},[80236,80239,80242,80244,80246,80249,80251,80496],[11,80237,80233],{"id":80238},"wavedistortion",[15,80240,80241],{},"Wave-based distortion with multiple waveform types",[31906,80243],{"component":80233},[23,80245,31910],{"id":26528},[31912,80247],{":props":80248},"[{\"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,80250,31918],{"id":31917},[246,80252,80253,80298,80342,80386,80430],{":tabs":1557},[212,80254,80256],{"className":334,"code":80255,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle \u002F>\n \u003C\u002FWaveDistortion>\n\u003C\u002FShader>\n",[99,80257,80258,80266,80274,80282,80290],{"__ignoreMap":178},[220,80259,80260,80262,80264],{"class":222,"line":223},[220,80261,343],{"class":264},[220,80263,347],{"class":346},[220,80265,359],{"class":264},[220,80267,80268,80270,80272],{"class":222,"line":179},[220,80269,364],{"class":264},[220,80271,80233],{"class":346},[220,80273,359],{"class":264},[220,80275,80276,80278,80280],{"class":222,"line":389},[220,80277,2550],{"class":264},[220,80279,2553],{"class":346},[220,80281,386],{"class":264},[220,80283,80284,80286,80288],{"class":222,"line":399},[220,80285,2567],{"class":264},[220,80287,80233],{"class":346},[220,80289,359],{"class":264},[220,80291,80292,80294,80296],{"class":222,"line":644},[220,80293,402],{"class":264},[220,80295,347],{"class":346},[220,80297,359],{"class":264},[212,80299,80300],{"className":409,"code":80255,"language":411,"meta":178,"style":178},[99,80301,80302,80310,80318,80326,80334],{"__ignoreMap":178},[220,80303,80304,80306,80308],{"class":222,"line":223},[220,80305,343],{"class":264},[220,80307,347],{"class":420},[220,80309,359],{"class":264},[220,80311,80312,80314,80316],{"class":222,"line":179},[220,80313,364],{"class":264},[220,80315,80233],{"class":420},[220,80317,359],{"class":264},[220,80319,80320,80322,80324],{"class":222,"line":389},[220,80321,2550],{"class":264},[220,80323,2553],{"class":420},[220,80325,386],{"class":264},[220,80327,80328,80330,80332],{"class":222,"line":399},[220,80329,2567],{"class":264},[220,80331,80233],{"class":420},[220,80333,359],{"class":264},[220,80335,80336,80338,80340],{"class":222,"line":644},[220,80337,402],{"class":264},[220,80339,347],{"class":420},[220,80341,359],{"class":264},[212,80343,80344],{"className":2844,"code":80255,"language":2846,"meta":178,"style":178},[99,80345,80346,80354,80362,80370,80378],{"__ignoreMap":178},[220,80347,80348,80350,80352],{"class":222,"line":223},[220,80349,343],{"class":264},[220,80351,347],{"class":420},[220,80353,359],{"class":264},[220,80355,80356,80358,80360],{"class":222,"line":179},[220,80357,364],{"class":264},[220,80359,80233],{"class":420},[220,80361,359],{"class":264},[220,80363,80364,80366,80368],{"class":222,"line":389},[220,80365,2550],{"class":264},[220,80367,2553],{"class":420},[220,80369,386],{"class":264},[220,80371,80372,80374,80376],{"class":222,"line":399},[220,80373,2567],{"class":264},[220,80375,80233],{"class":420},[220,80377,359],{"class":264},[220,80379,80380,80382,80384],{"class":222,"line":644},[220,80381,402],{"class":264},[220,80383,347],{"class":420},[220,80385,359],{"class":264},[212,80387,80388],{"className":468,"code":80255,"language":469,"meta":178,"style":178},[99,80389,80390,80398,80406,80414,80422],{"__ignoreMap":178},[220,80391,80392,80394,80396],{"class":222,"line":223},[220,80393,343],{"class":264},[220,80395,347],{"class":420},[220,80397,359],{"class":264},[220,80399,80400,80402,80404],{"class":222,"line":179},[220,80401,364],{"class":264},[220,80403,80233],{"class":420},[220,80405,359],{"class":264},[220,80407,80408,80410,80412],{"class":222,"line":389},[220,80409,2550],{"class":264},[220,80411,2553],{"class":420},[220,80413,386],{"class":264},[220,80415,80416,80418,80420],{"class":222,"line":399},[220,80417,2567],{"class":264},[220,80419,80233],{"class":420},[220,80421,359],{"class":264},[220,80423,80424,80426,80428],{"class":222,"line":644},[220,80425,402],{"class":264},[220,80427,347],{"class":420},[220,80429,359],{"class":264},[212,80431,80433],{"className":251,"code":80432,"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,80434,80435,80445,80449,80463,80467,80476,80484,80488,80492],{"__ignoreMap":178},[220,80436,80437,80439,80441,80443],{"class":222,"line":223},[220,80438,261],{"class":260},[220,80440,11507],{"class":264},[220,80442,268],{"class":260},[220,80444,4007],{"class":230},[220,80446,80447],{"class":222,"line":179},[220,80448,647],{"emptyLinePlaceholder":194},[220,80450,80451,80453,80455,80457,80459,80461],{"class":222,"line":389},[220,80452,1735],{"class":260},[220,80454,1738],{"class":420},[220,80456,1741],{"class":260},[220,80458,1744],{"class":260},[220,80460,1747],{"class":226},[220,80462,1750],{"class":264},[220,80464,80465],{"class":222,"line":399},[220,80466,1765],{"class":264},[220,80468,80469,80471,80474],{"class":222,"line":644},[220,80470,1770],{"class":264},[220,80472,80473],{"class":230},"'WaveDistortion'",[220,80475,7004],{"class":264},[220,80477,80478,80480,80482],{"class":222,"line":650},[220,80479,7009],{"class":264},[220,80481,3206],{"class":230},[220,80483,2465],{"class":264},[220,80485,80486],{"class":222,"line":656},[220,80487,7026],{"class":264},[220,80489,80490],{"class":222,"line":673},[220,80491,1787],{"class":264},[220,80493,80494],{"class":222,"line":682},[220,80495,1792],{"class":264},[1504,80497,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":80499},[80500,80501],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwavedistortion",{"title":80233,"description":80241},"docs\u002Fcomponents\u002FWaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":80508,"title":80509,"body":80510,"category":33058,"componentType":25872,"description":80517,"extension":191,"meta":80702,"navigation":194,"path":80703,"requiresChild":32525,"seo":80704,"stem":80705,"__hash__":80706},"components\u002Fdocs\u002Fcomponents\u002FWaveletNoise.md","WaveletNoise",{"type":8,"value":80511,"toc":80698},[80512,80515,80518,80520,80522,80525,80527,80696],[11,80513,80509],{"id":80514},"waveletnoise",[15,80516,80517],{},"Rotating banded wavelets that ripple as they animate",[31906,80519],{"component":80509},[23,80521,31910],{"id":26528},[31912,80523],{":props":80524},"[{\"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,80526,31918],{"id":31917},[246,80528,80529,80558,80586,80614,80642],{":tabs":1557},[212,80530,80532],{"className":334,"code":80531,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWaveletNoise \u002F>\n\u003C\u002FShader>\n",[99,80533,80534,80542,80550],{"__ignoreMap":178},[220,80535,80536,80538,80540],{"class":222,"line":223},[220,80537,343],{"class":264},[220,80539,347],{"class":346},[220,80541,359],{"class":264},[220,80543,80544,80546,80548],{"class":222,"line":179},[220,80545,364],{"class":264},[220,80547,80509],{"class":346},[220,80549,386],{"class":264},[220,80551,80552,80554,80556],{"class":222,"line":389},[220,80553,402],{"class":264},[220,80555,347],{"class":346},[220,80557,359],{"class":264},[212,80559,80560],{"className":409,"code":80531,"language":411,"meta":178,"style":178},[99,80561,80562,80570,80578],{"__ignoreMap":178},[220,80563,80564,80566,80568],{"class":222,"line":223},[220,80565,343],{"class":264},[220,80567,347],{"class":420},[220,80569,359],{"class":264},[220,80571,80572,80574,80576],{"class":222,"line":179},[220,80573,364],{"class":264},[220,80575,80509],{"class":420},[220,80577,386],{"class":264},[220,80579,80580,80582,80584],{"class":222,"line":389},[220,80581,402],{"class":264},[220,80583,347],{"class":420},[220,80585,359],{"class":264},[212,80587,80588],{"className":2844,"code":80531,"language":2846,"meta":178,"style":178},[99,80589,80590,80598,80606],{"__ignoreMap":178},[220,80591,80592,80594,80596],{"class":222,"line":223},[220,80593,343],{"class":264},[220,80595,347],{"class":420},[220,80597,359],{"class":264},[220,80599,80600,80602,80604],{"class":222,"line":179},[220,80601,364],{"class":264},[220,80603,80509],{"class":420},[220,80605,386],{"class":264},[220,80607,80608,80610,80612],{"class":222,"line":389},[220,80609,402],{"class":264},[220,80611,347],{"class":420},[220,80613,359],{"class":264},[212,80615,80616],{"className":468,"code":80531,"language":469,"meta":178,"style":178},[99,80617,80618,80626,80634],{"__ignoreMap":178},[220,80619,80620,80622,80624],{"class":222,"line":223},[220,80621,343],{"class":264},[220,80623,347],{"class":420},[220,80625,359],{"class":264},[220,80627,80628,80630,80632],{"class":222,"line":179},[220,80629,364],{"class":264},[220,80631,80509],{"class":420},[220,80633,386],{"class":264},[220,80635,80636,80638,80640],{"class":222,"line":389},[220,80637,402],{"class":264},[220,80639,347],{"class":420},[220,80641,359],{"class":264},[212,80643,80645],{"className":251,"code":80644,"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,80646,80647,80657,80661,80675,80679,80688,80692],{"__ignoreMap":178},[220,80648,80649,80651,80653,80655],{"class":222,"line":223},[220,80650,261],{"class":260},[220,80652,11507],{"class":264},[220,80654,268],{"class":260},[220,80656,4007],{"class":230},[220,80658,80659],{"class":222,"line":179},[220,80660,647],{"emptyLinePlaceholder":194},[220,80662,80663,80665,80667,80669,80671,80673],{"class":222,"line":389},[220,80664,1735],{"class":260},[220,80666,1738],{"class":420},[220,80668,1741],{"class":260},[220,80670,1744],{"class":260},[220,80672,1747],{"class":226},[220,80674,1750],{"class":264},[220,80676,80677],{"class":222,"line":399},[220,80678,1765],{"class":264},[220,80680,80681,80683,80686],{"class":222,"line":644},[220,80682,1770],{"class":264},[220,80684,80685],{"class":230},"'WaveletNoise'",[220,80687,2465],{"class":264},[220,80689,80690],{"class":222,"line":650},[220,80691,1787],{"class":264},[220,80693,80694],{"class":222,"line":656},[220,80695,1792],{"class":264},[1504,80697,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":80699},[80700,80701],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwaveletnoise",{"title":80509,"description":80517},"docs\u002Fcomponents\u002FWaveletNoise","SnyKzhggH-KN4PEldCxgq6rx2IVn2Y1GZgL-Kwb_2DY",{"id":80708,"title":80709,"body":80710,"category":33058,"componentType":25872,"description":80717,"extension":191,"meta":80902,"navigation":194,"path":80903,"requiresChild":32525,"seo":80904,"stem":80905,"__hash__":80906},"components\u002Fdocs\u002Fcomponents\u002FWeave.md","Weave",{"type":8,"value":80711,"toc":80898},[80712,80715,80718,80720,80722,80725,80727,80896],[11,80713,80709],{"id":80714},"weave",[15,80716,80717],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[31906,80719],{"component":80709},[23,80721,31910],{"id":26528},[31912,80723],{":props":80724},"[{\"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,80726,31918],{"id":31917},[246,80728,80729,80758,80786,80814,80842],{":tabs":1557},[212,80730,80732],{"className":334,"code":80731,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWeave \u002F>\n\u003C\u002FShader>\n",[99,80733,80734,80742,80750],{"__ignoreMap":178},[220,80735,80736,80738,80740],{"class":222,"line":223},[220,80737,343],{"class":264},[220,80739,347],{"class":346},[220,80741,359],{"class":264},[220,80743,80744,80746,80748],{"class":222,"line":179},[220,80745,364],{"class":264},[220,80747,80709],{"class":346},[220,80749,386],{"class":264},[220,80751,80752,80754,80756],{"class":222,"line":389},[220,80753,402],{"class":264},[220,80755,347],{"class":346},[220,80757,359],{"class":264},[212,80759,80760],{"className":409,"code":80731,"language":411,"meta":178,"style":178},[99,80761,80762,80770,80778],{"__ignoreMap":178},[220,80763,80764,80766,80768],{"class":222,"line":223},[220,80765,343],{"class":264},[220,80767,347],{"class":420},[220,80769,359],{"class":264},[220,80771,80772,80774,80776],{"class":222,"line":179},[220,80773,364],{"class":264},[220,80775,80709],{"class":420},[220,80777,386],{"class":264},[220,80779,80780,80782,80784],{"class":222,"line":389},[220,80781,402],{"class":264},[220,80783,347],{"class":420},[220,80785,359],{"class":264},[212,80787,80788],{"className":2844,"code":80731,"language":2846,"meta":178,"style":178},[99,80789,80790,80798,80806],{"__ignoreMap":178},[220,80791,80792,80794,80796],{"class":222,"line":223},[220,80793,343],{"class":264},[220,80795,347],{"class":420},[220,80797,359],{"class":264},[220,80799,80800,80802,80804],{"class":222,"line":179},[220,80801,364],{"class":264},[220,80803,80709],{"class":420},[220,80805,386],{"class":264},[220,80807,80808,80810,80812],{"class":222,"line":389},[220,80809,402],{"class":264},[220,80811,347],{"class":420},[220,80813,359],{"class":264},[212,80815,80816],{"className":468,"code":80731,"language":469,"meta":178,"style":178},[99,80817,80818,80826,80834],{"__ignoreMap":178},[220,80819,80820,80822,80824],{"class":222,"line":223},[220,80821,343],{"class":264},[220,80823,347],{"class":420},[220,80825,359],{"class":264},[220,80827,80828,80830,80832],{"class":222,"line":179},[220,80829,364],{"class":264},[220,80831,80709],{"class":420},[220,80833,386],{"class":264},[220,80835,80836,80838,80840],{"class":222,"line":389},[220,80837,402],{"class":264},[220,80839,347],{"class":420},[220,80841,359],{"class":264},[212,80843,80845],{"className":251,"code":80844,"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,80846,80847,80857,80861,80875,80879,80888,80892],{"__ignoreMap":178},[220,80848,80849,80851,80853,80855],{"class":222,"line":223},[220,80850,261],{"class":260},[220,80852,11507],{"class":264},[220,80854,268],{"class":260},[220,80856,4007],{"class":230},[220,80858,80859],{"class":222,"line":179},[220,80860,647],{"emptyLinePlaceholder":194},[220,80862,80863,80865,80867,80869,80871,80873],{"class":222,"line":389},[220,80864,1735],{"class":260},[220,80866,1738],{"class":420},[220,80868,1741],{"class":260},[220,80870,1744],{"class":260},[220,80872,1747],{"class":226},[220,80874,1750],{"class":264},[220,80876,80877],{"class":222,"line":399},[220,80878,1765],{"class":264},[220,80880,80881,80883,80886],{"class":222,"line":644},[220,80882,1770],{"class":264},[220,80884,80885],{"class":230},"'Weave'",[220,80887,2465],{"class":264},[220,80889,80890],{"class":222,"line":650},[220,80891,1787],{"class":264},[220,80893,80894],{"class":222,"line":656},[220,80895,1792],{"class":264},[1504,80897,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":80899},[80900,80901],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fweave",{"title":80709,"description":80717},"docs\u002Fcomponents\u002FWeave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":80908,"title":80909,"body":80910,"category":33058,"componentType":25872,"description":80917,"extension":191,"meta":81102,"navigation":194,"path":81103,"requiresChild":32525,"seo":81104,"stem":81105,"__hash__":81106},"components\u002Fdocs\u002Fcomponents\u002FWebcamTexture.md","WebcamTexture",{"type":8,"value":80911,"toc":81098},[80912,80915,80918,80920,80922,80925,80927,81096],[11,80913,80909],{"id":80914},"webcamtexture",[15,80916,80917],{},"Display a live webcam feed with customizable object-fit modes",[31906,80919],{"component":80909},[23,80921,31910],{"id":26528},[31912,80923],{":props":80924},"[{\"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,80926,31918],{"id":31917},[246,80928,80929,80958,80986,81014,81042],{":tabs":1557},[212,80930,80932],{"className":334,"code":80931,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWebcamTexture \u002F>\n\u003C\u002FShader>\n",[99,80933,80934,80942,80950],{"__ignoreMap":178},[220,80935,80936,80938,80940],{"class":222,"line":223},[220,80937,343],{"class":264},[220,80939,347],{"class":346},[220,80941,359],{"class":264},[220,80943,80944,80946,80948],{"class":222,"line":179},[220,80945,364],{"class":264},[220,80947,80909],{"class":346},[220,80949,386],{"class":264},[220,80951,80952,80954,80956],{"class":222,"line":389},[220,80953,402],{"class":264},[220,80955,347],{"class":346},[220,80957,359],{"class":264},[212,80959,80960],{"className":409,"code":80931,"language":411,"meta":178,"style":178},[99,80961,80962,80970,80978],{"__ignoreMap":178},[220,80963,80964,80966,80968],{"class":222,"line":223},[220,80965,343],{"class":264},[220,80967,347],{"class":420},[220,80969,359],{"class":264},[220,80971,80972,80974,80976],{"class":222,"line":179},[220,80973,364],{"class":264},[220,80975,80909],{"class":420},[220,80977,386],{"class":264},[220,80979,80980,80982,80984],{"class":222,"line":389},[220,80981,402],{"class":264},[220,80983,347],{"class":420},[220,80985,359],{"class":264},[212,80987,80988],{"className":2844,"code":80931,"language":2846,"meta":178,"style":178},[99,80989,80990,80998,81006],{"__ignoreMap":178},[220,80991,80992,80994,80996],{"class":222,"line":223},[220,80993,343],{"class":264},[220,80995,347],{"class":420},[220,80997,359],{"class":264},[220,80999,81000,81002,81004],{"class":222,"line":179},[220,81001,364],{"class":264},[220,81003,80909],{"class":420},[220,81005,386],{"class":264},[220,81007,81008,81010,81012],{"class":222,"line":389},[220,81009,402],{"class":264},[220,81011,347],{"class":420},[220,81013,359],{"class":264},[212,81015,81016],{"className":468,"code":80931,"language":469,"meta":178,"style":178},[99,81017,81018,81026,81034],{"__ignoreMap":178},[220,81019,81020,81022,81024],{"class":222,"line":223},[220,81021,343],{"class":264},[220,81023,347],{"class":420},[220,81025,359],{"class":264},[220,81027,81028,81030,81032],{"class":222,"line":179},[220,81029,364],{"class":264},[220,81031,80909],{"class":420},[220,81033,386],{"class":264},[220,81035,81036,81038,81040],{"class":222,"line":389},[220,81037,402],{"class":264},[220,81039,347],{"class":420},[220,81041,359],{"class":264},[212,81043,81045],{"className":251,"code":81044,"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,81046,81047,81057,81061,81075,81079,81088,81092],{"__ignoreMap":178},[220,81048,81049,81051,81053,81055],{"class":222,"line":223},[220,81050,261],{"class":260},[220,81052,11507],{"class":264},[220,81054,268],{"class":260},[220,81056,4007],{"class":230},[220,81058,81059],{"class":222,"line":179},[220,81060,647],{"emptyLinePlaceholder":194},[220,81062,81063,81065,81067,81069,81071,81073],{"class":222,"line":389},[220,81064,1735],{"class":260},[220,81066,1738],{"class":420},[220,81068,1741],{"class":260},[220,81070,1744],{"class":260},[220,81072,1747],{"class":226},[220,81074,1750],{"class":264},[220,81076,81077],{"class":222,"line":399},[220,81078,1765],{"class":264},[220,81080,81081,81083,81086],{"class":222,"line":644},[220,81082,1770],{"class":264},[220,81084,81085],{"class":230},"'WebcamTexture'",[220,81087,2465],{"class":264},[220,81089,81090],{"class":222,"line":650},[220,81091,1787],{"class":264},[220,81093,81094],{"class":222,"line":656},[220,81095,1792],{"class":264},[1504,81097,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":81099},[81100,81101],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwebcamtexture",{"title":80909,"description":80917},"docs\u002Fcomponents\u002FWebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":81108,"title":81109,"body":81110,"category":32801,"componentType":25878,"description":81117,"extension":191,"meta":81434,"navigation":194,"path":81435,"requiresChild":194,"seo":81436,"stem":81437,"__hash__":81438},"components\u002Fdocs\u002Fcomponents\u002FWool.md","Wool",{"type":8,"value":81111,"toc":81430},[81112,81115,81118,81120,81122,81125,81127,81428],[11,81113,81109],{"id":81114},"wool",[15,81116,81117],{},"Applies an interwoven fibrous fabric texture and distortion to child content",[31906,81119],{"component":81109},[23,81121,31910],{"id":26528},[31912,81123],{":props":81124},"[{\"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,81126,31918],{"id":31917},[246,81128,81129,81185,81244,81300,81358],{":tabs":1557},[212,81130,81132],{"className":334,"code":81131,"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,81133,81134,81142,81149,81157,81161,81169,81177],{"__ignoreMap":178},[220,81135,81136,81138,81140],{"class":222,"line":223},[220,81137,343],{"class":264},[220,81139,347],{"class":346},[220,81141,359],{"class":264},[220,81143,81144,81146],{"class":222,"line":179},[220,81145,364],{"class":264},[220,81147,81148],{"class":346},"Wool\n",[220,81150,81151,81153,81155],{"class":222,"line":389},[220,81152,20366],{"class":226},[220,81154,353],{"class":264},[220,81156,42153],{"class":230},[220,81158,81159],{"class":222,"line":399},[220,81160,31954],{"class":264},[220,81162,81163,81165,81167],{"class":222,"line":644},[220,81164,2550],{"class":264},[220,81166,2553],{"class":346},[220,81168,386],{"class":264},[220,81170,81171,81173,81175],{"class":222,"line":650},[220,81172,2567],{"class":264},[220,81174,81109],{"class":346},[220,81176,359],{"class":264},[220,81178,81179,81181,81183],{"class":222,"line":656},[220,81180,402],{"class":264},[220,81182,347],{"class":346},[220,81184,359],{"class":264},[212,81186,81188],{"className":409,"code":81187,"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,81189,81190,81198,81204,81216,81220,81228,81236],{"__ignoreMap":178},[220,81191,81192,81194,81196],{"class":222,"line":223},[220,81193,343],{"class":264},[220,81195,347],{"class":420},[220,81197,359],{"class":264},[220,81199,81200,81202],{"class":222,"line":179},[220,81201,364],{"class":264},[220,81203,81148],{"class":420},[220,81205,81206,81208,81210,81212,81214],{"class":222,"line":389},[220,81207,20477],{"class":226},[220,81209,353],{"class":260},[220,81211,743],{"class":264},[220,81213,7749],{"class":420},[220,81215,749],{"class":264},[220,81217,81218],{"class":222,"line":399},[220,81219,31954],{"class":264},[220,81221,81222,81224,81226],{"class":222,"line":644},[220,81223,2550],{"class":264},[220,81225,2553],{"class":420},[220,81227,386],{"class":264},[220,81229,81230,81232,81234],{"class":222,"line":650},[220,81231,2567],{"class":264},[220,81233,81109],{"class":420},[220,81235,359],{"class":264},[220,81237,81238,81240,81242],{"class":222,"line":656},[220,81239,402],{"class":264},[220,81241,347],{"class":420},[220,81243,359],{"class":264},[212,81245,81246],{"className":2844,"code":81187,"language":2846,"meta":178,"style":178},[99,81247,81248,81256,81262,81272,81276,81284,81292],{"__ignoreMap":178},[220,81249,81250,81252,81254],{"class":222,"line":223},[220,81251,343],{"class":264},[220,81253,347],{"class":420},[220,81255,359],{"class":264},[220,81257,81258,81260],{"class":222,"line":179},[220,81259,364],{"class":264},[220,81261,81148],{"class":420},[220,81263,81264,81266,81268,81270],{"class":222,"line":389},[220,81265,20477],{"class":226},[220,81267,29866],{"class":264},[220,81269,7749],{"class":420},[220,81271,749],{"class":264},[220,81273,81274],{"class":222,"line":399},[220,81275,31954],{"class":264},[220,81277,81278,81280,81282],{"class":222,"line":644},[220,81279,2550],{"class":264},[220,81281,2553],{"class":420},[220,81283,386],{"class":264},[220,81285,81286,81288,81290],{"class":222,"line":650},[220,81287,2567],{"class":264},[220,81289,81109],{"class":420},[220,81291,359],{"class":264},[220,81293,81294,81296,81298],{"class":222,"line":656},[220,81295,402],{"class":264},[220,81297,347],{"class":420},[220,81299,359],{"class":264},[212,81301,81302],{"className":468,"code":81187,"language":469,"meta":178,"style":178},[99,81303,81304,81312,81318,81330,81334,81342,81350],{"__ignoreMap":178},[220,81305,81306,81308,81310],{"class":222,"line":223},[220,81307,343],{"class":264},[220,81309,347],{"class":420},[220,81311,359],{"class":264},[220,81313,81314,81316],{"class":222,"line":179},[220,81315,364],{"class":264},[220,81317,81148],{"class":420},[220,81319,81320,81322,81324,81326,81328],{"class":222,"line":389},[220,81321,20477],{"class":226},[220,81323,353],{"class":260},[220,81325,743],{"class":264},[220,81327,7749],{"class":420},[220,81329,749],{"class":264},[220,81331,81332],{"class":222,"line":399},[220,81333,31954],{"class":264},[220,81335,81336,81338,81340],{"class":222,"line":644},[220,81337,2550],{"class":264},[220,81339,2553],{"class":420},[220,81341,386],{"class":264},[220,81343,81344,81346,81348],{"class":222,"line":650},[220,81345,2567],{"class":264},[220,81347,81109],{"class":420},[220,81349,359],{"class":264},[220,81351,81352,81354,81356],{"class":222,"line":656},[220,81353,402],{"class":264},[220,81355,347],{"class":420},[220,81357,359],{"class":264},[212,81359,81361],{"className":251,"code":81360,"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,81362,81363,81373,81377,81391,81395,81408,81416,81420,81424],{"__ignoreMap":178},[220,81364,81365,81367,81369,81371],{"class":222,"line":223},[220,81366,261],{"class":260},[220,81368,11507],{"class":264},[220,81370,268],{"class":260},[220,81372,4007],{"class":230},[220,81374,81375],{"class":222,"line":179},[220,81376,647],{"emptyLinePlaceholder":194},[220,81378,81379,81381,81383,81385,81387,81389],{"class":222,"line":389},[220,81380,1735],{"class":260},[220,81382,1738],{"class":420},[220,81384,1741],{"class":260},[220,81386,1744],{"class":260},[220,81388,1747],{"class":226},[220,81390,1750],{"class":264},[220,81392,81393],{"class":222,"line":399},[220,81394,1765],{"class":264},[220,81396,81397,81399,81402,81404,81406],{"class":222,"line":644},[220,81398,1770],{"class":264},[220,81400,81401],{"class":230},"'Wool'",[220,81403,32198],{"class":264},[220,81405,7749],{"class":420},[220,81407,7541],{"class":264},[220,81409,81410,81412,81414],{"class":222,"line":650},[220,81411,7009],{"class":264},[220,81413,3206],{"class":230},[220,81415,2465],{"class":264},[220,81417,81418],{"class":222,"line":656},[220,81419,7026],{"class":264},[220,81421,81422],{"class":222,"line":673},[220,81423,1787],{"class":264},[220,81425,81426],{"class":222,"line":682},[220,81427,1792],{"class":264},[1504,81429,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81431},[81432,81433],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fwool",{"title":81109,"description":81117},"docs\u002Fcomponents\u002FWool","NxSnRFVrJVVFZrWoLBDmd6LTvR0LJIcbYppWFbTJnk4",{"id":81440,"title":81441,"body":81442,"category":33058,"componentType":25872,"description":81449,"extension":191,"meta":81634,"navigation":194,"path":81635,"requiresChild":32525,"seo":81636,"stem":81637,"__hash__":81638},"components\u002Fdocs\u002Fcomponents\u002FWorleyNoise.md","WorleyNoise",{"type":8,"value":81443,"toc":81630},[81444,81447,81450,81452,81454,81457,81459,81628],[11,81445,81441],{"id":81446},"worleynoise",[15,81448,81449],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[31906,81451],{"component":81441},[23,81453,31910],{"id":26528},[31912,81455],{":props":81456},"[{\"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,81458,31918],{"id":31917},[246,81460,81461,81490,81518,81546,81574],{":tabs":1557},[212,81462,81464],{"className":334,"code":81463,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CWorleyNoise \u002F>\n\u003C\u002FShader>\n",[99,81465,81466,81474,81482],{"__ignoreMap":178},[220,81467,81468,81470,81472],{"class":222,"line":223},[220,81469,343],{"class":264},[220,81471,347],{"class":346},[220,81473,359],{"class":264},[220,81475,81476,81478,81480],{"class":222,"line":179},[220,81477,364],{"class":264},[220,81479,81441],{"class":346},[220,81481,386],{"class":264},[220,81483,81484,81486,81488],{"class":222,"line":389},[220,81485,402],{"class":264},[220,81487,347],{"class":346},[220,81489,359],{"class":264},[212,81491,81492],{"className":409,"code":81463,"language":411,"meta":178,"style":178},[99,81493,81494,81502,81510],{"__ignoreMap":178},[220,81495,81496,81498,81500],{"class":222,"line":223},[220,81497,343],{"class":264},[220,81499,347],{"class":420},[220,81501,359],{"class":264},[220,81503,81504,81506,81508],{"class":222,"line":179},[220,81505,364],{"class":264},[220,81507,81441],{"class":420},[220,81509,386],{"class":264},[220,81511,81512,81514,81516],{"class":222,"line":389},[220,81513,402],{"class":264},[220,81515,347],{"class":420},[220,81517,359],{"class":264},[212,81519,81520],{"className":2844,"code":81463,"language":2846,"meta":178,"style":178},[99,81521,81522,81530,81538],{"__ignoreMap":178},[220,81523,81524,81526,81528],{"class":222,"line":223},[220,81525,343],{"class":264},[220,81527,347],{"class":420},[220,81529,359],{"class":264},[220,81531,81532,81534,81536],{"class":222,"line":179},[220,81533,364],{"class":264},[220,81535,81441],{"class":420},[220,81537,386],{"class":264},[220,81539,81540,81542,81544],{"class":222,"line":389},[220,81541,402],{"class":264},[220,81543,347],{"class":420},[220,81545,359],{"class":264},[212,81547,81548],{"className":468,"code":81463,"language":469,"meta":178,"style":178},[99,81549,81550,81558,81566],{"__ignoreMap":178},[220,81551,81552,81554,81556],{"class":222,"line":223},[220,81553,343],{"class":264},[220,81555,347],{"class":420},[220,81557,359],{"class":264},[220,81559,81560,81562,81564],{"class":222,"line":179},[220,81561,364],{"class":264},[220,81563,81441],{"class":420},[220,81565,386],{"class":264},[220,81567,81568,81570,81572],{"class":222,"line":389},[220,81569,402],{"class":264},[220,81571,347],{"class":420},[220,81573,359],{"class":264},[212,81575,81577],{"className":251,"code":81576,"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,81578,81579,81589,81593,81607,81611,81620,81624],{"__ignoreMap":178},[220,81580,81581,81583,81585,81587],{"class":222,"line":223},[220,81582,261],{"class":260},[220,81584,11507],{"class":264},[220,81586,268],{"class":260},[220,81588,4007],{"class":230},[220,81590,81591],{"class":222,"line":179},[220,81592,647],{"emptyLinePlaceholder":194},[220,81594,81595,81597,81599,81601,81603,81605],{"class":222,"line":389},[220,81596,1735],{"class":260},[220,81598,1738],{"class":420},[220,81600,1741],{"class":260},[220,81602,1744],{"class":260},[220,81604,1747],{"class":226},[220,81606,1750],{"class":264},[220,81608,81609],{"class":222,"line":399},[220,81610,1765],{"class":264},[220,81612,81613,81615,81618],{"class":222,"line":644},[220,81614,1770],{"class":264},[220,81616,81617],{"class":230},"'WorleyNoise'",[220,81619,2465],{"class":264},[220,81621,81622],{"class":222,"line":650},[220,81623,1787],{"class":264},[220,81625,81626],{"class":222,"line":656},[220,81627,1792],{"class":264},[1504,81629,32796],{},{"title":178,"searchDepth":179,"depth":179,"links":81631},[81632,81633],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fworleynoise",{"title":81441,"description":81449},"docs\u002Fcomponents\u002FWorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":81640,"title":81641,"body":81642,"category":32229,"componentType":25878,"description":81649,"extension":191,"meta":81966,"navigation":194,"path":81967,"requiresChild":194,"seo":81968,"stem":81969,"__hash__":81970},"components\u002Fdocs\u002Fcomponents\u002FZoomBlur.md","ZoomBlur",{"type":8,"value":81643,"toc":81962},[81644,81647,81650,81652,81654,81657,81659,81960],[11,81645,81641],{"id":81646},"zoomblur",[15,81648,81649],{},"Radial zoom blur expanding from a center point",[31906,81651],{"component":81641},[23,81653,31910],{"id":26528},[31912,81655],{":props":81656},"[{\"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,81658,31918],{"id":31917},[246,81660,81661,81717,81776,81832,81890],{":tabs":1557},[212,81662,81664],{"className":334,"code":81663,"language":336,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81665,81666,81674,81681,81689,81693,81701,81709],{"__ignoreMap":178},[220,81667,81668,81670,81672],{"class":222,"line":223},[220,81669,343],{"class":264},[220,81671,347],{"class":346},[220,81673,359],{"class":264},[220,81675,81676,81678],{"class":222,"line":179},[220,81677,364],{"class":264},[220,81679,81680],{"class":346},"ZoomBlur\n",[220,81682,81683,81685,81687],{"class":222,"line":389},[220,81684,20366],{"class":226},[220,81686,353],{"class":264},[220,81688,43587],{"class":230},[220,81690,81691],{"class":222,"line":399},[220,81692,31954],{"class":264},[220,81694,81695,81697,81699],{"class":222,"line":644},[220,81696,2550],{"class":264},[220,81698,2553],{"class":346},[220,81700,386],{"class":264},[220,81702,81703,81705,81707],{"class":222,"line":650},[220,81704,2567],{"class":264},[220,81706,81641],{"class":346},[220,81708,359],{"class":264},[220,81710,81711,81713,81715],{"class":222,"line":656},[220,81712,402],{"class":264},[220,81714,347],{"class":346},[220,81716,359],{"class":264},[212,81718,81720],{"className":409,"code":81719,"language":411,"meta":178,"style":178},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle \u002F>\n \u003C\u002FZoomBlur>\n\u003C\u002FShader>\n",[99,81721,81722,81730,81736,81748,81752,81760,81768],{"__ignoreMap":178},[220,81723,81724,81726,81728],{"class":222,"line":223},[220,81725,343],{"class":264},[220,81727,347],{"class":420},[220,81729,359],{"class":264},[220,81731,81732,81734],{"class":222,"line":179},[220,81733,364],{"class":264},[220,81735,81680],{"class":420},[220,81737,81738,81740,81742,81744,81746],{"class":222,"line":389},[220,81739,20477],{"class":226},[220,81741,353],{"class":260},[220,81743,743],{"class":264},[220,81745,24005],{"class":420},[220,81747,749],{"class":264},[220,81749,81750],{"class":222,"line":399},[220,81751,31954],{"class":264},[220,81753,81754,81756,81758],{"class":222,"line":644},[220,81755,2550],{"class":264},[220,81757,2553],{"class":420},[220,81759,386],{"class":264},[220,81761,81762,81764,81766],{"class":222,"line":650},[220,81763,2567],{"class":264},[220,81765,81641],{"class":420},[220,81767,359],{"class":264},[220,81769,81770,81772,81774],{"class":222,"line":656},[220,81771,402],{"class":264},[220,81773,347],{"class":420},[220,81775,359],{"class":264},[212,81777,81778],{"className":2844,"code":81719,"language":2846,"meta":178,"style":178},[99,81779,81780,81788,81794,81804,81808,81816,81824],{"__ignoreMap":178},[220,81781,81782,81784,81786],{"class":222,"line":223},[220,81783,343],{"class":264},[220,81785,347],{"class":420},[220,81787,359],{"class":264},[220,81789,81790,81792],{"class":222,"line":179},[220,81791,364],{"class":264},[220,81793,81680],{"class":420},[220,81795,81796,81798,81800,81802],{"class":222,"line":389},[220,81797,20477],{"class":226},[220,81799,29866],{"class":264},[220,81801,24005],{"class":420},[220,81803,749],{"class":264},[220,81805,81806],{"class":222,"line":399},[220,81807,31954],{"class":264},[220,81809,81810,81812,81814],{"class":222,"line":644},[220,81811,2550],{"class":264},[220,81813,2553],{"class":420},[220,81815,386],{"class":264},[220,81817,81818,81820,81822],{"class":222,"line":650},[220,81819,2567],{"class":264},[220,81821,81641],{"class":420},[220,81823,359],{"class":264},[220,81825,81826,81828,81830],{"class":222,"line":656},[220,81827,402],{"class":264},[220,81829,347],{"class":420},[220,81831,359],{"class":264},[212,81833,81834],{"className":468,"code":81719,"language":469,"meta":178,"style":178},[99,81835,81836,81844,81850,81862,81866,81874,81882],{"__ignoreMap":178},[220,81837,81838,81840,81842],{"class":222,"line":223},[220,81839,343],{"class":264},[220,81841,347],{"class":420},[220,81843,359],{"class":264},[220,81845,81846,81848],{"class":222,"line":179},[220,81847,364],{"class":264},[220,81849,81680],{"class":420},[220,81851,81852,81854,81856,81858,81860],{"class":222,"line":389},[220,81853,20477],{"class":226},[220,81855,353],{"class":260},[220,81857,743],{"class":264},[220,81859,24005],{"class":420},[220,81861,749],{"class":264},[220,81863,81864],{"class":222,"line":399},[220,81865,31954],{"class":264},[220,81867,81868,81870,81872],{"class":222,"line":644},[220,81869,2550],{"class":264},[220,81871,2553],{"class":420},[220,81873,386],{"class":264},[220,81875,81876,81878,81880],{"class":222,"line":650},[220,81877,2567],{"class":264},[220,81879,81641],{"class":420},[220,81881,359],{"class":264},[220,81883,81884,81886,81888],{"class":222,"line":656},[220,81885,402],{"class":264},[220,81887,347],{"class":420},[220,81889,359],{"class":264},[212,81891,81893],{"className":251,"code":81892,"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,81894,81895,81905,81909,81923,81927,81940,81948,81952,81956],{"__ignoreMap":178},[220,81896,81897,81899,81901,81903],{"class":222,"line":223},[220,81898,261],{"class":260},[220,81900,11507],{"class":264},[220,81902,268],{"class":260},[220,81904,4007],{"class":230},[220,81906,81907],{"class":222,"line":179},[220,81908,647],{"emptyLinePlaceholder":194},[220,81910,81911,81913,81915,81917,81919,81921],{"class":222,"line":389},[220,81912,1735],{"class":260},[220,81914,1738],{"class":420},[220,81916,1741],{"class":260},[220,81918,1744],{"class":260},[220,81920,1747],{"class":226},[220,81922,1750],{"class":264},[220,81924,81925],{"class":222,"line":399},[220,81926,1765],{"class":264},[220,81928,81929,81931,81934,81936,81938],{"class":222,"line":644},[220,81930,1770],{"class":264},[220,81932,81933],{"class":230},"'ZoomBlur'",[220,81935,32198],{"class":264},[220,81937,24005],{"class":420},[220,81939,7541],{"class":264},[220,81941,81942,81944,81946],{"class":222,"line":650},[220,81943,7009],{"class":264},[220,81945,3206],{"class":230},[220,81947,2465],{"class":264},[220,81949,81950],{"class":222,"line":656},[220,81951,7026],{"class":264},[220,81953,81954],{"class":222,"line":673},[220,81955,1787],{"class":264},[220,81957,81958],{"class":222,"line":682},[220,81959,1792],{"class":264},[1504,81961,2476],{},{"title":178,"searchDepth":179,"depth":179,"links":81963},[81964,81965],{"id":26528,"depth":179,"text":31910},{"id":31917,"depth":179,"text":31918},{},"\u002Fdocs\u002Fcomponents\u002Fzoomblur",{"title":81641,"description":81649},"docs\u002Fcomponents\u002FZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"id":5506,"title":5507,"body":81972,"category":2240,"description":6116,"exclude":190,"extension":191,"forceFramework":190,"icon":6117,"meta":82459,"navigation":194,"path":4825,"seo":82460,"stem":6120,"__hash__":6121},{"type":8,"value":81973,"toc":82446},[81974,81976,81981,81995,81999,82001,82003,82005,82007,82013,82029,82031,82033,82039,82281,82291,82293,82297,82311,82315,82319,82321,82323,82337,82339,82341,82343,82353,82357,82359,82383,82385,82387,82403,82409,82422,82428,82430,82432,82442,82444],[11,81975,5507],{"id":5512},[15,81977,5515,81978,5520],{},[56,81979,4826],{"href":5518,"rel":81980},[167],[212,81982,81983],{"className":214,"code":5523,"language":216,"meta":178,"style":178},[99,81984,81985],{"__ignoreMap":178},[220,81986,81987,81989,81991,81993],{"class":222,"line":223},[220,81988,4489],{"class":226},[220,81990,5532],{"class":230},[220,81992,4544],{"class":230},[220,81994,5537],{"class":230},[15,81996,5540,81997,5544],{},[99,81998,5543],{},[23,82000,5548],{"id":5547},[3262,82002,5552],{"id":5551},[15,82004,5555],{},[4833,82006],{},[15,82008,5560,82009,5564,82011,5568],{},[99,82010,5563],{},[99,82012,5567],{},[212,82014,82015],{"className":214,"code":5571,"language":216,"meta":178,"style":178},[99,82016,82017,82021],{"__ignoreMap":178},[220,82018,82019],{"class":222,"line":223},[220,82020,5578],{"class":609},[220,82022,82023,82025,82027],{"class":222,"line":179},[220,82024,5583],{"class":264},[220,82026,353],{"class":260},[220,82028,5588],{"class":230},[15,82030,5591],{},[3262,82032,5595],{"id":5594},[15,82034,5598,82035,5602,82037,5606],{},[99,82036,5601],{},[99,82038,5605],{},[246,82040,82041,82101,82161,82221],{":tabs":248},[212,82042,82043],{"className":4559,"code":5611,"language":4561,"meta":178,"style":178},[99,82044,82045,82049,82053,82059,82065,82075,82089,82093,82097],{"__ignoreMap":178},[220,82046,82047],{"class":222,"line":223},[220,82048,5618],{"class":609},[220,82050,82051],{"class":222,"line":179},[220,82052,4573],{"class":264},[220,82054,82055,82057],{"class":222,"line":389},[220,82056,5627],{"class":420},[220,82058,4581],{"class":264},[220,82060,82061,82063],{"class":222,"line":399},[220,82062,5634],{"class":420},[220,82064,4581],{"class":264},[220,82066,82067,82069,82071,82073],{"class":222,"line":644},[220,82068,4721],{"class":420},[220,82070,4596],{"class":264},[220,82072,5645],{"class":230},[220,82074,1760],{"class":264},[220,82076,82077,82079,82081,82083,82085,82087],{"class":222,"line":650},[220,82078,4907],{"class":420},[220,82080,5654],{"class":264},[220,82082,5657],{"class":420},[220,82084,4596],{"class":264},[220,82086,5662],{"class":230},[220,82088,5665],{"class":264},[220,82090,82091],{"class":222,"line":656},[220,82092,4604],{"class":264},[220,82094,82095],{"class":222,"line":673},[220,82096,3256],{"class":264},[220,82098,82099],{"class":222,"line":682},[220,82100,749],{"class":264},[212,82102,82103],{"className":4559,"code":5680,"language":4561,"meta":178,"style":178},[99,82104,82105,82109,82113,82119,82125,82135,82149,82153,82157],{"__ignoreMap":178},[220,82106,82107],{"class":222,"line":223},[220,82108,5618],{"class":609},[220,82110,82111],{"class":222,"line":179},[220,82112,4573],{"class":264},[220,82114,82115,82117],{"class":222,"line":389},[220,82116,5627],{"class":420},[220,82118,4581],{"class":264},[220,82120,82121,82123],{"class":222,"line":399},[220,82122,5634],{"class":420},[220,82124,4581],{"class":264},[220,82126,82127,82129,82131,82133],{"class":222,"line":644},[220,82128,4721],{"class":420},[220,82130,4596],{"class":264},[220,82132,5711],{"class":230},[220,82134,1760],{"class":264},[220,82136,82137,82139,82141,82143,82145,82147],{"class":222,"line":650},[220,82138,4907],{"class":420},[220,82140,5654],{"class":264},[220,82142,5657],{"class":420},[220,82144,4596],{"class":264},[220,82146,5662],{"class":230},[220,82148,5665],{"class":264},[220,82150,82151],{"class":222,"line":656},[220,82152,4604],{"class":264},[220,82154,82155],{"class":222,"line":673},[220,82156,3256],{"class":264},[220,82158,82159],{"class":222,"line":682},[220,82160,749],{"class":264},[212,82162,82163],{"className":4559,"code":5742,"language":4561,"meta":178,"style":178},[99,82164,82165,82169,82173,82179,82185,82195,82209,82213,82217],{"__ignoreMap":178},[220,82166,82167],{"class":222,"line":223},[220,82168,5618],{"class":609},[220,82170,82171],{"class":222,"line":179},[220,82172,4573],{"class":264},[220,82174,82175,82177],{"class":222,"line":389},[220,82176,5627],{"class":420},[220,82178,4581],{"class":264},[220,82180,82181,82183],{"class":222,"line":399},[220,82182,5634],{"class":420},[220,82184,4581],{"class":264},[220,82186,82187,82189,82191,82193],{"class":222,"line":644},[220,82188,4721],{"class":420},[220,82190,4596],{"class":264},[220,82192,5773],{"class":230},[220,82194,1760],{"class":264},[220,82196,82197,82199,82201,82203,82205,82207],{"class":222,"line":650},[220,82198,4907],{"class":420},[220,82200,5654],{"class":264},[220,82202,5657],{"class":420},[220,82204,4596],{"class":264},[220,82206,5662],{"class":230},[220,82208,5665],{"class":264},[220,82210,82211],{"class":222,"line":656},[220,82212,4604],{"class":264},[220,82214,82215],{"class":222,"line":673},[220,82216,3256],{"class":264},[220,82218,82219],{"class":222,"line":682},[220,82220,749],{"class":264},[212,82222,82223],{"className":4559,"code":5804,"language":4561,"meta":178,"style":178},[99,82224,82225,82229,82233,82239,82245,82255,82269,82273,82277],{"__ignoreMap":178},[220,82226,82227],{"class":222,"line":223},[220,82228,5618],{"class":609},[220,82230,82231],{"class":222,"line":179},[220,82232,4573],{"class":264},[220,82234,82235,82237],{"class":222,"line":389},[220,82236,5627],{"class":420},[220,82238,4581],{"class":264},[220,82240,82241,82243],{"class":222,"line":399},[220,82242,5634],{"class":420},[220,82244,4581],{"class":264},[220,82246,82247,82249,82251,82253],{"class":222,"line":644},[220,82248,4721],{"class":420},[220,82250,4596],{"class":264},[220,82252,5835],{"class":230},[220,82254,1760],{"class":264},[220,82256,82257,82259,82261,82263,82265,82267],{"class":222,"line":650},[220,82258,4907],{"class":420},[220,82260,5654],{"class":264},[220,82262,5657],{"class":420},[220,82264,4596],{"class":264},[220,82266,5662],{"class":230},[220,82268,5665],{"class":264},[220,82270,82271],{"class":222,"line":656},[220,82272,4604],{"class":264},[220,82274,82275],{"class":222,"line":673},[220,82276,3256],{"class":264},[220,82278,82279],{"class":222,"line":682},[220,82280,749],{"class":264},[15,82282,5866,82283,5870,82285,5874,82287,1864,82289,5881],{},[99,82284,5869],{},[99,82286,5873],{},[99,82288,5877],{},[99,82290,5880],{},[23,82292,5885],{"id":5884},[15,82294,5888,82295,5892],{},[99,82296,5891],{},[212,82298,82299],{"className":214,"code":5895,"language":216,"meta":178,"style":178},[99,82300,82301],{"__ignoreMap":178},[220,82302,82303,82305,82307,82309],{"class":222,"line":223},[220,82304,4489],{"class":226},[220,82306,5532],{"class":230},[220,82308,4544],{"class":230},[220,82310,5908],{"class":230},[15,82312,5911,82313,5914],{},[99,82314,5543],{},[15,82316,5917,82317,5921],{},[159,82318,5920],{},[23,82320,5925],{"id":5924},[15,82322,5928],{},[212,82324,82325],{"className":214,"code":5931,"language":216,"meta":178,"style":178},[99,82326,82327],{"__ignoreMap":178},[220,82328,82329,82331,82333,82335],{"class":222,"line":223},[220,82330,4489],{"class":226},[220,82332,5532],{"class":230},[220,82334,4544],{"class":230},[220,82336,5944],{"class":230},[15,82338,5947],{},[3262,82340,5951],{"id":5950},[15,82342,5954],{},[34,82344,82345,82349],{},[37,82346,82347,5962],{},[159,82348,5961],{},[37,82350,82351,5968],{},[159,82352,5967],{},[15,82354,5971,82355,5975],{},[56,82356,5974],{"href":58},[23,82358,5979],{"id":5978},[1794,82360,82361,82369],{},[1797,82362,82363],{},[1800,82364,82365,82367],{},[1803,82366,5988],{},[1803,82368,5991],{},[1810,82370,82371,82377],{},[1800,82372,82373,82375],{},[1815,82374,5998],{},[1815,82376,6001],{},[1800,82378,82379,82381],{},[1815,82380,6006],{},[1815,82382,6009],{},[15,82384,6012],{},[23,82386,6016],{"id":6015},[15,82388,82389,6024,82393,6027,82395,6031,82397,6035,82399,6038,82401,4831],{},[159,82390,82391],{},[99,82392,6023],{},[99,82394,5583],{},[99,82396,6030],{},[99,82398,6034],{},[99,82400,5605],{},[99,82402,6041],{},[15,82404,82405,6049],{},[159,82406,82407],{},[99,82408,6048],{},[15,82410,82411,6057,82415,6060,82417,6067],{},[159,82412,82413],{},[99,82414,6056],{},[99,82416,5891],{},[56,82418,82420],{"href":6063,"rel":82419},[167],[99,82421,6063],{},[15,82423,82424,6073,82426,6076],{},[159,82425,6072],{},[99,82427,5605],{},[23,82429,6080],{"id":6079},[15,82431,6083],{},[212,82433,82434],{"className":214,"code":6086,"language":216,"meta":178,"style":178},[99,82435,82436],{"__ignoreMap":178},[220,82437,82438,82440],{"class":222,"line":223},[220,82439,6093],{"class":226},[220,82441,6096],{"class":230},[15,82443,6099],{},[1504,82445,6102],{},{"title":178,"searchDepth":179,"depth":179,"links":82447},[82448,82452,82453,82456,82457,82458],{"id":5547,"depth":179,"text":5548,"children":82449},[82450,82451],{"id":5551,"depth":389,"text":5552},{"id":5594,"depth":389,"text":5595},{"id":5884,"depth":179,"text":5885},{"id":5924,"depth":179,"text":5925,"children":82454},[82455],{"id":5950,"depth":389,"text":5951},{"id":5978,"depth":179,"text":5979},{"id":6015,"depth":179,"text":6016},{"id":6079,"depth":179,"text":6080},{},{"title":5507,"description":6116}]